@praxisui/metadata-editor 0.0.1

package/fesm2022/praxisui-metadata-editor.mjs

@@ -0,0 +1,4182 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, Component, Input, EventEmitter, Output, signal } from '@angular/core';
+import * as i3 from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i3$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { DynamicFieldLoaderDirective } from '@praxisui/dynamic-fields';
+import * as i2$1 from '@praxisui/core';
+import { FieldControlType, PraxisIconDirective } from '@praxisui/core';
+import * as i5 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i6 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1 from '@angular/material/dialog';
+import { MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import * as i8 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import { SETTINGS_PANEL_DATA } from '@praxisui/settings-panel';
+import { BehaviorSubject } from 'rxjs';
+import * as i7 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i8$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i9 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i11 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i12 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
+class ConfigRegistryService {
+    map = new Map();
+    register(controlType, props) {
+        this.map.set(controlType, props);
+    }
+    getProperties(controlType) {
+        return this.map.get(controlType) ?? [];
+    }
+    list() {
+        return Array.from(this.map.entries()).map(([ct, props]) => ({
+            controlType: ct,
+            count: props.length,
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConfigRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConfigRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConfigRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ContextValidatorRegistryService {
+    map = new Map();
+    register(controlType, validator) {
+        const list = this.map.get(controlType) ?? [];
+        list.push(validator);
+        this.map.set(controlType, list);
+    }
+    get(controlType) {
+        return this.map.get(controlType) ?? [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ContextValidatorRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ContextValidatorRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ContextValidatorRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SchemaNormalizerService {
+    /** Normaliza propriedades e aplica defaultValue resolvendo do seed por dot-path. */
+    normalize(properties, seed) {
+        const out = properties.map((p) => {
+            const clone = { ...p };
+            // normalizar options se for string simples
+            if (Array.isArray(clone.options)) {
+                clone.options = clone.options.map((opt) => typeof opt === 'string' ? { value: opt, text: opt } : opt);
+            }
+            // pattern/regex
+            if (clone.pattern && typeof clone.pattern === 'string') {
+                const str = String(clone.pattern);
+                const match = /^\/(.*)\/([gimsuy]*)$/.exec(str);
+                if (match) {
+                    try {
+                        clone.pattern = new RegExp(match[1], match[2]);
+                    }
+                    catch { }
+                }
+            }
+            // aplicar defaultValue do seed se existir
+            if (seed && clone.defaultValue === undefined) {
+                const val = this.getByPath(seed, clone.name);
+                if (val !== undefined) {
+                    // Stringify complex defaults for textarea-friendly editors
+                    const needsJson = (clone.editorType === 'textarea' &&
+                        (clone.name === 'options' ||
+                            clone.name === 'filterCriteria' ||
+                            clone.name === 'paletteSettings.colors' ||
+                            clone.name === 'views' ||
+                            clone.name === 'adaptiveSubtitle'));
+                    clone.defaultValue = needsJson && typeof val !== 'string' ? JSON.stringify(val, null, 2) : val;
+                    try {
+                        if (clone.name === 'resourcePath' ||
+                            clone.name === 'filterCriteria' ||
+                            clone.name === 'optionLabelKey' ||
+                            clone.name === 'optionValueKey' ||
+                            clone.name === 'options' ||
+                            clone.name === 'paletteSettings.colors' ||
+                            clone.name === 'views') {
+                            console.debug('[SchemaNormalizer] default from seed', {
+                                name: clone.name,
+                                value: needsJson && typeof val !== 'string' ? JSON.stringify(val) : val,
+                            });
+                        }
+                        // Extra diagnostics for Rating editor fields
+                        if ([
+                            'max',
+                            'allowHalf',
+                            'precision',
+                            'selection',
+                            'size',
+                            'icon',
+                            'emptyIcon',
+                            'svgIcon',
+                            'svgIconOutline',
+                            'ratingColor',
+                            'outlineColor',
+                            'readonly',
+                            'tabIndex',
+                            'ariaLabel',
+                        ].includes(clone.name)) {
+                            console.debug('[SchemaNormalizer][RATING] default from seed', {
+                                name: clone.name,
+                                value: val,
+                            });
+                        }
+                    }
+                    catch { }
+                }
+            }
+            else if (seed && clone.defaultValue !== undefined) {
+                // Log when a property defines its own defaultValue and thus does not read from seed
+                try {
+                    if (clone.name === 'resourcePath' ||
+                        clone.name === 'filterCriteria' ||
+                        clone.name === 'optionLabelKey' ||
+                        clone.name === 'optionValueKey' ||
+                        clone.name === 'options') {
+                        const val = this.getByPath(seed, clone.name);
+                        console.debug('[SchemaNormalizer] default preserved (property default overrides seed)', {
+                            name: clone.name,
+                            propertyDefault: clone.defaultValue,
+                            seedValue: val,
+                        });
+                    }
+                }
+                catch { }
+            }
+            return clone;
+        });
+        try {
+            const names = out.map((p) => p.name);
+            const defPreview = out
+                .filter((p) => ['resourcePath', 'filterCriteria', 'optionLabelKey', 'optionValueKey'].includes(p.name))
+                .map((p) => ({ name: p.name, defaultValue: p.defaultValue }));
+            console.debug('[SchemaNormalizer] normalize summary', { names, defPreview });
+        }
+        catch { }
+        return out;
+    }
+    /** Lê valor por dot-path */
+    getByPath(obj, path) {
+        return path.split('.').reduce((acc, key) => (acc == null ? acc : acc[key]), obj);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SchemaNormalizerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SchemaNormalizerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SchemaNormalizerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DynamicFormFactoryService {
+    fb;
+    ctxValidators;
+    constructor(fb, ctxValidators) {
+        this.fb = fb;
+        this.ctxValidators = ctxValidators;
+    }
+    createEditorForm(controlType, props, seed) {
+        const group = this.fb.group({});
+        for (const p of props) {
+            const ctrl = new FormControl(p.defaultValue ?? null, { validators: p.validators ?? [] });
+            this.assignControlByPath(group, p.name, ctrl);
+            try {
+                if (p.name === 'resourcePath' ||
+                    p.name === 'filterCriteria' ||
+                    p.name === 'optionLabelKey' ||
+                    p.name === 'optionValueKey') {
+                    console.debug('[EditorForm] control init', {
+                        name: p.name,
+                        defaultValue: p.defaultValue ?? null,
+                    });
+                }
+            }
+            catch { }
+        }
+        const formValidators = this.ctxValidators.get(controlType);
+        if (formValidators.length) {
+            group.addValidators(formValidators);
+        }
+        return group;
+    }
+    getControlByPath(form, path) {
+        return form.get(path);
+    }
+    setValueByPath(form, path, value) {
+        form.get(path)?.setValue(value);
+    }
+    extractPatch(form) {
+        const patch = form.getRawValue();
+        try {
+            console.debug('[EditorForm] extractPatch', patch);
+        }
+        catch { }
+        return patch;
+    }
+    mergeIntoFieldDefinition(base, patch) {
+        return this.deepMerge(base, patch);
+    }
+    assignControlByPath(group, path, ctrl) {
+        const parts = path.split('.');
+        let current = group;
+        for (let i = 0; i < parts.length - 1; i++) {
+            const key = parts[i];
+            const next = current.get(key);
+            if (!next) {
+                const child = this.fb.group({});
+                current.addControl(key, child);
+                current = child;
+            }
+            else if (next instanceof FormGroup) {
+                current = next;
+            }
+            else {
+                // Overwrite non-group path with group to respect dot-notation
+                const child = this.fb.group({});
+                current.removeControl(key);
+                current.addControl(key, child);
+                current = child;
+            }
+        }
+        current.addControl(parts[parts.length - 1], ctrl);
+    }
+    deepMerge(target, source) {
+        if (source == null || typeof source !== 'object')
+            return target;
+        const result = Array.isArray(target) ? [...target] : { ...target };
+        for (const [k, v] of Object.entries(source)) {
+            if (v && typeof v === 'object' && !Array.isArray(v)) {
+                result[k] = this.deepMerge(result[k] ?? {}, v);
+            }
+            else {
+                result[k] = v;
+            }
+        }
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicFormFactoryService, deps: [{ token: i3.FormBuilder }, { token: ContextValidatorRegistryService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicFormFactoryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicFormFactoryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i3.FormBuilder }, { type: ContextValidatorRegistryService }] });
+
+class EditorComponentRegistryService {
+    registry = new Map();
+    cache = new Map();
+    register(editorType, loader) {
+        this.registry.set(editorType, loader);
+    }
+    async get(editorType) {
+        if (this.cache.has(editorType)) {
+            return this.cache.get(editorType);
+        }
+        const loader = this.registry.get(editorType);
+        if (!loader)
+            return null;
+        const type = await loader();
+        if (type)
+            this.cache.set(editorType, type);
+        return type ?? null;
+    }
+    isRegistered(editorType) {
+        return this.registry.has(editorType);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: EditorComponentRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: EditorComponentRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: EditorComponentRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class RegexHelpDialogComponent {
+    dialogRef = inject((MatDialogRef));
+    presets = [
+        { label: 'Apenas letras (ASCII)', pattern: '/^[a-zA-Z]+$/' },
+        { label: 'Apenas dígitos', pattern: '/^\\d+$/' },
+        { label: 'Email simples', pattern: '/^\\w+@[\\w.-]+\\.[A-Za-z]&#123;2,&#125;$/' },
+        { label: 'URL básica (http/https)', pattern: '/^(https?:\\/\\/)?[\\w.-]+(\\\\.[\\w.-]+)+[\\w\\-._~:?#@!$&\'()*+,;=\\/]*$/' },
+        { label: 'Pelo menos 8 caracteres', pattern: '/^.&#123;8,&#125;$/' },
+        { label: 'CEP brasileiro (#####-###)', pattern: '/^\\d{5}-\\d{3}$/' },
+        { label: 'CPF (###.###.###-##)', pattern: '/^\\d{3}\\.\\d{3}\\.\\d{3}-\\d{2}$/' },
+        { label: 'CNPJ (##.###.###/####-##)', pattern: '/^\\d{2}\\.\\d{3}\\.\\d{3}\\/\\d{4}-\\d{2}$/' },
+        { label: 'Telefone (Brasil) com DDD', pattern: '/^\\(\\d{2}\\) \\d{4,5}-\\d{4}$/' },
+        { label: 'Somente hex (0-9 A-F)', pattern: '/^[0-9A-Fa-f]+$/' },
+        { label: 'Código postal (US ZIP)', pattern: '/^\\d{5}(-\\d{4})?$/' },
+        { label: 'Data (YYYY-MM-DD)', pattern: '/^\\d{4}-\\d{2}-\\d{2}$/' },
+        { label: 'Hora (HH:MM 24h)', pattern: '/^([01]\\d|2[0-3]):[0-5]\\d$/' },
+        { label: 'Slug (letras, dígitos, hífen)', pattern: '/^[a-z0-9-]+$/' },
+        { label: 'Username (3-16, alfanum., _ -)', pattern: '/^[a-zA-Z0-9_-]{3,16}$/' },
+        { label: 'Senha forte (8+, maiúsc., minúsc., dígito)', pattern: '/^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).&#123;8,&#125;$/' },
+        { label: 'IPv4', pattern: '/^(25[0-5]|2[0-4]\\d|[01]?\\d?\\d)(\\.(25[0-5]|2[0-4]\\d|[01]?\\d?\\d))&#123;3&#125;$/' },
+        { label: 'MAC address', pattern: '/^([0-9A-Fa-f]{2}:)&#123;5&#125;[0-9A-Fa-f]{2}$/' },
+        { label: 'Hashtag (#palavra)', pattern: '/^#\\w+$/' },
+        { label: 'Menção (@usuario)', pattern: '/^@\\w+$/' },
+        { label: 'Palavra específica (foo)', pattern: '/\\bfoo\\b/' },
+        { label: 'Não conter espaços', pattern: '/^\\S+$/' },
+        { label: 'Início com letra', pattern: '/^[A-Za-z].*$/' },
+        { label: 'Termina com ponto final', pattern: '/.*\\.$/' },
+        { label: 'Número com 2 casas decimais', pattern: '/^\\d+(,\\d{2}|\\.\\d{2})$/' },
+        { label: 'Hex color (#RRGGBB)', pattern: '/^#?[A-Fa-f0-9]{6}$/' },
+        { label: 'UUID v4', pattern: '/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i' },
+        { label: 'DOM id (letra inicial)', pattern: '/^[A-Za-z][-A-Za-z0-9_:.]*$/' },
+        { label: 'Base64', pattern: '/^(?:[A-Za-z0-9+\/]{4})*(?:[A-Za-z0-9+\/]{2}==|[A-Za-z0-9+\/]{3}=)?$/' },
+    ];
+    choose(pattern) {
+        this.dialogRef.close(pattern);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: RegexHelpDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: RegexHelpDialogComponent, isStandalone: true, selector: "praxis-regex-help-dialog", ngImport: i0, template: `
+    <h2 mat-dialog-title>Modelos de Expressões Regulares</h2>
+    <div mat-dialog-content>
+      <p>Selecione um dos modelos abaixo para preencher o campo ou use como base:</p>
+      <mat-nav-list dense>
+        @for (r of presets; track r.pattern) {
+          <a mat-list-item (click)="choose(r.pattern)" style="cursor: pointer;">
+            <span matListItemTitle><code>{{ r.pattern }}</code></span>
+            <span matListItemLine>{{ r.label }}</span>
+          </a>
+        }
+      </mat-nav-list>
+      <p style="margin-top: 12px;">Recursos úteis:</p>
+      <ul>
+        <li><a href="https://regex101.com/" target="_blank" rel="noreferrer noopener">regex101.com</a> — Teste e depure regex</li>
+        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions" target="_blank" rel="noreferrer noopener">MDN: Regular expressions</a></li>
+      </ul>
+    </div>
+    <div mat-dialog-actions>
+      <button class="mat-mdc-button mdc-button" mat-dialog-close>Fechar</button>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatButtonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: RegexHelpDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'praxis-regex-help-dialog',
+                    standalone: true,
+                    imports: [CommonModule, MatDialogModule, MatListModule, MatButtonModule],
+                    template: `
+    <h2 mat-dialog-title>Modelos de Expressões Regulares</h2>
+    <div mat-dialog-content>
+      <p>Selecione um dos modelos abaixo para preencher o campo ou use como base:</p>
+      <mat-nav-list dense>
+        @for (r of presets; track r.pattern) {
+          <a mat-list-item (click)="choose(r.pattern)" style="cursor: pointer;">
+            <span matListItemTitle><code>{{ r.pattern }}</code></span>
+            <span matListItemLine>{{ r.label }}</span>
+          </a>
+        }
+      </mat-nav-list>
+      <p style="margin-top: 12px;">Recursos úteis:</p>
+      <ul>
+        <li><a href="https://regex101.com/" target="_blank" rel="noreferrer noopener">regex101.com</a> — Teste e depure regex</li>
+        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions" target="_blank" rel="noreferrer noopener">MDN: Regular expressions</a></li>
+      </ul>
+    </div>
+    <div mat-dialog-actions>
+      <button class="mat-mdc-button mdc-button" mat-dialog-close>Fechar</button>
+    </div>
+  `,
+                }]
+        }] });
+
+class DynamicEditorRendererComponent {
+    dialog;
+    iconPicker;
+    properties = [];
+    form;
+    fields = [];
+    groupFields = {};
+    groupOrder = [];
+    groupRows = {};
+    // Evita reentrância: cria loaders após o primeiro tick
+    ready = false;
+    ngOnChanges(changes) {
+        if (changes['properties']) {
+            const mapped = this.properties.map((p) => this.toFieldMetadata(p));
+            this.fields = mapped;
+            const groupMap = new Map();
+            const rowMap = new Map();
+            for (const f of mapped) {
+                const g = f._group || 'Geral';
+                if (!groupMap.has(g))
+                    groupMap.set(g, []);
+                groupMap.get(g).push(f);
+                const rowKey = f._row || `${f.name}`;
+                if (!rowMap.has(g))
+                    rowMap.set(g, new Map());
+                const rmap = rowMap.get(g);
+                if (!rmap.has(rowKey))
+                    rmap.set(rowKey, []);
+                rmap.get(rowKey).push(f);
+            }
+            this.groupFields = Object.fromEntries(groupMap.entries());
+            this.groupOrder = Array.from(groupMap.keys()).sort((a, b) => this.groupWeight(a) - this.groupWeight(b));
+            const rows = {};
+            for (const g of this.groupOrder) {
+                const rmap = rowMap.get(g);
+                rows[g] = Array.from(rmap.values());
+            }
+            this.groupRows = rows;
+            // Ativar loaders após agrupar propriedades
+            queueMicrotask?.(() => (this.ready = true));
+        }
+    }
+    toFieldMetadata(p) {
+        const controlType = this.mapEditorType(p.editorType);
+        const meta = {
+            name: p.name,
+            label: p.label,
+            controlType,
+            placeholder: p.placeholder,
+            // Ajuda contextual padrão quando ausente
+            hint: p.hint,
+            options: Array.isArray(p.options) ? p.options : undefined,
+            required: p.required,
+            // meta auxiliar de agrupamento (não exportado)
+            _group: p.group || 'Geral',
+            _inline: p.inline || false,
+            _row: p.row || undefined,
+            // validators do EditorProperty já foram aplicados ao FormControl pela fábrica,
+            // mas manter aqui não prejudica e habilita exibição de mensagens padrão.
+            validators: undefined,
+        };
+        // Priorização de campos principais (agrupa em uma linha "core")
+        const coreNames = new Set(['controlType', 'label', 'placeholder']);
+        if (coreNames.has(p.name) && !meta._row)
+            meta._row = '__core';
+        // Campos menores e de baixa relevância visual (agrupados inline)
+        const smallNames = new Set([
+            'prefix',
+            'suffix',
+            'prefixIcon',
+            'suffixIcon',
+            'prefixIconColor',
+            'suffixIconColor',
+            'icon',
+        ]);
+        if (smallNames.has(p.name)) {
+            meta._inline = true;
+            if (!meta._row)
+                meta._row = '__affixes';
+        }
+        // Apenas campos de ícone devem receber o hint de Material Symbols
+        if (this.isIconField(p.name) && !meta.hint) {
+            meta.hint = 'Use o nome do ícone (Material Symbols)';
+        }
+        // Booleans em linha (switches) para melhor densidade
+        const booleanLike = new Set([
+            'required',
+            'disabled',
+            'readonly',
+            'showCharCount',
+            'showClear',
+            'autoFocus',
+            'hideLabel',
+        ]);
+        if (p.editorType === 'checkbox' || booleanLike.has(p.name)) {
+            meta._inline = true;
+            if (!meta._row)
+                meta._row = '__toggles';
+        }
+        // Mensagem padrão de atenção ao trocar tipo de campo
+        if (p.name === 'controlType' && !meta.hint) {
+            meta.hint = 'Alterar o tipo pode impactar configurações e validações';
+        }
+        if (p.editorType === 'number') {
+            // Defaults for numeric editors
+            if (/minlength|maxlength/i.test(p.name)) {
+                meta.min = 0;
+                meta.step = 1;
+            }
+        }
+        // no editor-specific overrides for textarea sizing here (reverted)
+        return meta;
+    }
+    // Priorização das seções
+    groupWeight(group) {
+        const key = group.toLowerCase();
+        const order = [
+            'geral',
+            'apresent',
+            'valida',
+            'formato',
+            'comport',
+            'material',
+            'ações',
+            'acess',
+        ];
+        const idx = order.findIndex((k) => key.includes(k));
+        return idx >= 0 ? idx : 999;
+    }
+    // No section open by default
+    isInitiallyExpanded(_group) {
+        return false;
+    }
+    // (preview removed by request)
+    rowClass(row) {
+        // Linha compacta (toggles) quando todos são inline
+        if (row.every((f) => !!f._inline))
+            return 'row-inline';
+        // Se não for inline e houver 2 ou 3 itens, usar colunas iguais
+        const n = row.length;
+        if (n === 2)
+            return 'row-2';
+        if (n === 3)
+            return 'row-3';
+        return '';
+    }
+    mapEditorType(t) {
+        switch (t) {
+            case 'text':
+                return FieldControlType.INPUT;
+            case 'number':
+                return FieldControlType.NUMERIC_TEXT_BOX;
+            case 'textarea':
+                return FieldControlType.TEXTAREA;
+            case 'select':
+                return FieldControlType.SELECT;
+            case 'checkbox':
+                // Para booleano simples, usamos o toggle
+                return FieldControlType.TOGGLE;
+            case 'date':
+                return FieldControlType.DATE_INPUT;
+            case 'datetime-local':
+                return FieldControlType.DATETIME_LOCAL_INPUT;
+            case 'color':
+                return FieldControlType.COLOR_INPUT;
+            case 'colorPicker':
+                return FieldControlType.COLOR_PICKER;
+            default:
+                return FieldControlType.INPUT;
+        }
+    }
+    groupIcon(group) {
+        const key = group.toLowerCase();
+        if (key.includes('valida'))
+            return 'rule';
+        if (key.includes('formato') || key.includes('másc'))
+            return 'format_shapes';
+        if (key.includes('apresent'))
+            return 'display_settings';
+        if (key.includes('lista') || key.includes('opç'))
+            return 'list';
+        return 'tune';
+    }
+    constructor(dialog, iconPicker) {
+        this.dialog = dialog;
+        this.iconPicker = iconPicker;
+    }
+    isIconField(path) {
+        if (!path)
+            return false;
+        // Supports: prefixIcon, suffixIcon, icon, clearButton.icon, any *.icon
+        return path === 'prefixIcon' || path === 'suffixIcon' || path === 'icon' || /(^|\.)icon$/.test(path);
+    }
+    openRegexHelp() {
+        const ref = this.dialog.open(RegexHelpDialogComponent, {
+            width: '720px',
+        });
+        ref.afterClosed().subscribe((selected) => {
+            if (!selected)
+                return;
+            const ctrl = this.form?.get('pattern');
+            ctrl?.setValue(selected);
+            ctrl?.markAsDirty();
+            this.form?.markAsDirty();
+        });
+    }
+    async openIconPicker(path) {
+        const current = this.form?.get(path)?.value;
+        const picked = await this.iconPicker.openDialog({ value: current });
+        if (picked !== undefined) {
+            this.form?.get(path)?.setValue(picked);
+            this.form?.markAsDirty();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicEditorRendererComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.IconPickerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: DynamicEditorRendererComponent, isStandalone: true, selector: "praxis-dynamic-editor-renderer", inputs: { properties: "properties", form: "form" }, usesOnChanges: true, ngImport: i0, template: `
+    <ng-template #item let-field="field" let-index="index" let-content="content">
+      <div class="editor-item" style="position: relative;">
+        <ng-container [ngTemplateOutlet]="content"></ng-container>
+        <!-- Botão de ajuda para regex, posicionado como sufixo visual do campo -->
+        <button
+          *ngIf="field.name === 'pattern'"
+          type="button"
+          mat-icon-button
+          class="regex-help-btn decorator-btn"
+          (click)="openRegexHelp()"
+          aria-label="Exemplos de regex"
+          matTooltip="Exemplos de regex"
+        >
+          <mat-icon [praxisIcon]="'search'"></mat-icon>
+        </button>
+        <!-- Botão para escolher ícone (prefix/suffix) -->
+        <button
+          *ngIf="isIconField(field.name)"
+          type="button"
+          mat-icon-button
+          class="icon-picker-btn decorator-btn"
+          (click)="openIconPicker(field.name)"
+          aria-label="Escolher ícone"
+          matTooltip="Escolher ícone"
+        >
+          <mat-icon [praxisIcon]="'apps'"></mat-icon>
+        </button>
+      </div>
+    </ng-template>
+
+    <div class="editor-surface">
+      <mat-accordion class="section-accordion" multi>
+        <mat-expansion-panel class="section-card" *ngFor="let g of groupOrder">
+          <mat-expansion-panel-header class="section-header">
+            <mat-panel-title>
+              <span class="section-title">
+                <mat-icon class="section-icon" [praxisIcon]="groupIcon(g)"></mat-icon>
+                {{ g }}
+              </span>
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+
+          <div *ngFor="let row of groupRows[g]" class="editor-row" [ngClass]="rowClass(row)">
+            <ng-container *ngIf="ready"
+              dynamicFieldLoader
+              [fields]="row"
+              [formGroup]="form"
+              [itemTemplate]="item">
+            </ng-container>
+          </div>
+        </mat-expansion-panel>
+      </mat-accordion>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.editor-surface{padding:8px 8px 2px;border-radius:12px;background:transparent}.section-accordion{display:block}.section-card{margin:6px 0 8px;border-radius:12px;border:1px solid rgba(0,0,0,.08);overflow:hidden}.section-card.mat-expanded{border-color:color-mix(in srgb,var(--mat-sys-primary, #3f51b5) 20%,transparent);box-shadow:0 2px 10px #0000000d}.section-card .mat-expansion-panel-body{padding:12px 12px 8px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-surface, var(--sicoob-bg-elev-1)) 2%),transparent)}.section-header{background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-surface, var(--sicoob-bg-elev-2)) 92%,var(--md-sys-color-primary, var(--sicoob-primary-default))) 0%,var(--md-sys-color-surface, var(--sicoob-bg-elev-2)) 100%);border-bottom:1px solid var(--md-sys-color-outline-variant, var(--sicoob-stroke-medium));padding:2px 8px;min-height:32px;display:flex;align-items:center}.section-header .mat-expansion-panel-header-title,.section-header .mat-expansion-panel-header-description{display:flex;align-items:center}.section-title{display:inline-flex;align-items:center;gap:6px;font-weight:600;letter-spacing:.2px;color:var(--mat-sys-color-on-surface, var(--md-sys-color-on-surface, rgba(0,0,0,.87)));font-size:.9rem;line-height:1.2}.section-icon{color:var(--mat-sys-color-primary, var(--md-sys-color-primary, #3f51b5));opacity:.9}.editor-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}.editor-row>praxis-field-shell{flex:1 1 100%;min-width:280px}.editor-row praxis-field-shell .mat-mdc-form-field{width:100%;margin-bottom:8px}.editor-row.row-inline>praxis-field-shell{flex:0 0 auto}.editor-row.row-2>praxis-field-shell{flex:1 1 calc(50% - 12px);min-width:260px}.editor-row.row-3>praxis-field-shell{flex:1 1 calc(33.333% - 12px);min-width:220px}.editor-row>praxis-field-shell[data-field-name=controlType],.editor-row>praxis-field-shell[data-field-name=label],.editor-row>praxis-field-shell[data-field-name=placeholder]{flex:1 1 calc(50% - 12px);min-width:300px}praxis-field-shell[data-field-name=label] .mdc-floating-label,praxis-field-shell[data-field-name=placeholder] .mdc-floating-label{font-weight:600}.editor-row>praxis-field-shell[data-field-name=prefix],.editor-row>praxis-field-shell[data-field-name=suffix],.editor-row>praxis-field-shell[data-field-name=prefixIcon],.editor-row>praxis-field-shell[data-field-name=suffixIcon],.editor-row>praxis-field-shell[data-field-name=prefixIconColor],.editor-row>praxis-field-shell[data-field-name=suffixIconColor]{flex:0 0 200px;min-width:160px}.decorator-btn{position:absolute;right:6px;top:8px;z-index:2;color:var(--mat-sys-primary, #3f51b5);opacity:.85}praxis-field-shell[data-field-name=showCharCount] .mdc-switch{transform:scale(1.05)}praxis-field-shell[data-field-name=showCharCount] .mat-mdc-slide-toggle{font-weight:600}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint{display:flex;align-items:center;gap:8px;background:#ffab001f;border:1px solid rgba(255,171,0,.35);color:#ffca28;padding:8px 10px;border-radius:6px;line-height:1.3;white-space:normal}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint:before{content:\"\\26a0\\fe0f\";display:inline-block}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-subscript-wrapper{margin-top:6px;margin-bottom:10px;min-height:auto}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field{margin-bottom:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "canvasMouseEnter", "canvasMouseLeave", "canvasClick"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicEditorRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-dynamic-editor-renderer', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        DynamicFieldLoaderDirective,
+                        MatExpansionModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatTooltipModule,
+                        PraxisIconDirective,
+                    ], template: `
+    <ng-template #item let-field="field" let-index="index" let-content="content">
+      <div class="editor-item" style="position: relative;">
+        <ng-container [ngTemplateOutlet]="content"></ng-container>
+        <!-- Botão de ajuda para regex, posicionado como sufixo visual do campo -->
+        <button
+          *ngIf="field.name === 'pattern'"
+          type="button"
+          mat-icon-button
+          class="regex-help-btn decorator-btn"
+          (click)="openRegexHelp()"
+          aria-label="Exemplos de regex"
+          matTooltip="Exemplos de regex"
+        >
+          <mat-icon [praxisIcon]="'search'"></mat-icon>
+        </button>
+        <!-- Botão para escolher ícone (prefix/suffix) -->
+        <button
+          *ngIf="isIconField(field.name)"
+          type="button"
+          mat-icon-button
+          class="icon-picker-btn decorator-btn"
+          (click)="openIconPicker(field.name)"
+          aria-label="Escolher ícone"
+          matTooltip="Escolher ícone"
+        >
+          <mat-icon [praxisIcon]="'apps'"></mat-icon>
+        </button>
+      </div>
+    </ng-template>
+
+    <div class="editor-surface">
+      <mat-accordion class="section-accordion" multi>
+        <mat-expansion-panel class="section-card" *ngFor="let g of groupOrder">
+          <mat-expansion-panel-header class="section-header">
+            <mat-panel-title>
+              <span class="section-title">
+                <mat-icon class="section-icon" [praxisIcon]="groupIcon(g)"></mat-icon>
+                {{ g }}
+              </span>
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+
+          <div *ngFor="let row of groupRows[g]" class="editor-row" [ngClass]="rowClass(row)">
+            <ng-container *ngIf="ready"
+              dynamicFieldLoader
+              [fields]="row"
+              [formGroup]="form"
+              [itemTemplate]="item">
+            </ng-container>
+          </div>
+        </mat-expansion-panel>
+      </mat-accordion>
+    </div>
+  `, styles: [":host{display:block}.editor-surface{padding:8px 8px 2px;border-radius:12px;background:transparent}.section-accordion{display:block}.section-card{margin:6px 0 8px;border-radius:12px;border:1px solid rgba(0,0,0,.08);overflow:hidden}.section-card.mat-expanded{border-color:color-mix(in srgb,var(--mat-sys-primary, #3f51b5) 20%,transparent);box-shadow:0 2px 10px #0000000d}.section-card .mat-expansion-panel-body{padding:12px 12px 8px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-surface, var(--sicoob-bg-elev-1)) 2%),transparent)}.section-header{background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-surface, var(--sicoob-bg-elev-2)) 92%,var(--md-sys-color-primary, var(--sicoob-primary-default))) 0%,var(--md-sys-color-surface, var(--sicoob-bg-elev-2)) 100%);border-bottom:1px solid var(--md-sys-color-outline-variant, var(--sicoob-stroke-medium));padding:2px 8px;min-height:32px;display:flex;align-items:center}.section-header .mat-expansion-panel-header-title,.section-header .mat-expansion-panel-header-description{display:flex;align-items:center}.section-title{display:inline-flex;align-items:center;gap:6px;font-weight:600;letter-spacing:.2px;color:var(--mat-sys-color-on-surface, var(--md-sys-color-on-surface, rgba(0,0,0,.87)));font-size:.9rem;line-height:1.2}.section-icon{color:var(--mat-sys-color-primary, var(--md-sys-color-primary, #3f51b5));opacity:.9}.editor-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}.editor-row>praxis-field-shell{flex:1 1 100%;min-width:280px}.editor-row praxis-field-shell .mat-mdc-form-field{width:100%;margin-bottom:8px}.editor-row.row-inline>praxis-field-shell{flex:0 0 auto}.editor-row.row-2>praxis-field-shell{flex:1 1 calc(50% - 12px);min-width:260px}.editor-row.row-3>praxis-field-shell{flex:1 1 calc(33.333% - 12px);min-width:220px}.editor-row>praxis-field-shell[data-field-name=controlType],.editor-row>praxis-field-shell[data-field-name=label],.editor-row>praxis-field-shell[data-field-name=placeholder]{flex:1 1 calc(50% - 12px);min-width:300px}praxis-field-shell[data-field-name=label] .mdc-floating-label,praxis-field-shell[data-field-name=placeholder] .mdc-floating-label{font-weight:600}.editor-row>praxis-field-shell[data-field-name=prefix],.editor-row>praxis-field-shell[data-field-name=suffix],.editor-row>praxis-field-shell[data-field-name=prefixIcon],.editor-row>praxis-field-shell[data-field-name=suffixIcon],.editor-row>praxis-field-shell[data-field-name=prefixIconColor],.editor-row>praxis-field-shell[data-field-name=suffixIconColor]{flex:0 0 200px;min-width:160px}.decorator-btn{position:absolute;right:6px;top:8px;z-index:2;color:var(--mat-sys-primary, #3f51b5);opacity:.85}praxis-field-shell[data-field-name=showCharCount] .mdc-switch{transform:scale(1.05)}praxis-field-shell[data-field-name=showCharCount] .mat-mdc-slide-toggle{font-weight:600}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint{display:flex;align-items:center;gap:8px;background:#ffab001f;border:1px solid rgba(255,171,0,.35);color:#ffca28;padding:8px 10px;border-radius:6px;line-height:1.3;white-space:normal}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint:before{content:\"\\26a0\\fe0f\";display:inline-block}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-subscript-wrapper{margin-top:6px;margin-bottom:10px;min-height:auto}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field{margin-bottom:16px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2$1.IconPickerService }], propDecorators: { properties: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
+const inputProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', placeholder: 'Rótulo do campo', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:search). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'prefix', label: 'Texto (prefixo)', editorType: 'text', group: 'Geral' },
+    { name: 'suffix', label: 'Texto (sufixo)', editorType: 'text', group: 'Geral' },
+    { name: 'showCharacterCount', label: 'Mostrar contador de caracteres', editorType: 'checkbox', group: 'Geral' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'minLength', label: 'Mínimo de caracteres', editorType: 'number', group: 'Validação', row: 'validacao.minmax' },
+    { name: 'maxLength', label: 'Máximo de caracteres', editorType: 'number', group: 'Validação', row: 'validacao.minmax' },
+    { name: 'pattern', label: 'Pattern (regex)', editorType: 'text', hint: 'Ex.: /^foo.*/i', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    { name: 'validators.minLengthMessage', label: 'Mensagem: mínimo', editorType: 'text', group: 'Validação' },
+    { name: 'validators.maxLengthMessage', label: 'Mensagem: máximo', editorType: 'text', group: 'Validação' },
+    { name: 'validators.patternMessage', label: 'Mensagem: padrão inválido', editorType: 'text', group: 'Validação' },
+    // Máscara/Formato
+    { name: 'mask', label: 'Máscara', editorType: 'text', group: 'Formato/Comportamento' },
+    {
+        name: 'textTransform',
+        label: 'Transformação de texto',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        options: [
+            { value: 'none', text: 'Nenhuma' },
+            { value: 'uppercase', text: 'MAIÚSCULAS (CSS)' },
+            { value: 'lowercase', text: 'minúsculas (CSS)' },
+            { value: 'capitalize', text: 'Capitalizar (CSS)' },
+            { value: 'titleCase', text: 'Title Case' },
+            { value: 'sentenceCase', text: 'Sentence case' },
+            { value: 'kebab', text: 'kebab-case' },
+            { value: 'snake', text: 'snake_case' },
+            { value: 'camel', text: 'camelCase' },
+            { value: 'pascal', text: 'PascalCase' },
+            { value: 'slugify', text: 'slugify (a-z0-9-)' },
+            { value: 'trim', text: 'trim (remover bordas)' },
+            { value: 'collapseWhitespace', text: 'collapseWhitespace (normalizar espaços)' },
+            { value: 'removeDiacritics', text: 'removeDiacritics (sem acentos)' },
+        ],
+    },
+    {
+        name: 'textTransformApply',
+        label: 'Aplicar em',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        defaultValue: 'displayOnly',
+        options: [
+            { value: 'displayOnly', text: 'Exibição (visual)' },
+            { value: 'saveOnly', text: 'Salvar (persistência)' },
+            { value: 'both', text: 'Ambos' },
+        ],
+    },
+    // Formato/Comportamento
+    { name: 'autocomplete', label: 'Autocomplete', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'spellcheck', label: 'Verificação ortográfica', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comportamento.toggles1', inline: true },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comportamento.toggles1', inline: true },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comportamento.toggles1', inline: true },
+    {
+        name: 'inputMode',
+        label: 'Modo de entrada (mobile)',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        options: [
+            { value: 'text', text: 'Texto' },
+            { value: 'numeric', text: 'Numérico' },
+            { value: 'decimal', text: 'Decimal' },
+            { value: 'tel', text: 'Telefone' },
+            { value: 'email', text: 'Email' },
+            { value: 'url', text: 'URL' },
+            { value: 'search', text: 'Busca' },
+        ],
+    },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comportamento.toggles2', inline: true },
+    {
+        name: 'inputType',
+        label: 'Tipo de input (HTML5)',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        options: [
+            { value: 'text', text: 'Texto' },
+            { value: 'email', text: 'Email' },
+            { value: 'password', text: 'Senha' },
+            { value: 'tel', text: 'Telefone' },
+            { value: 'url', text: 'URL' },
+            { value: 'search', text: 'Busca' },
+            { value: 'number', text: 'Número' },
+            { value: 'date', text: 'Data' },
+            { value: 'datetime-local', text: 'Data/Hora local' },
+            { value: 'time', text: 'Hora' },
+            { value: 'month', text: 'Mês' },
+            { value: 'week', text: 'Semana' },
+            { value: 'color', text: 'Cor' },
+        ],
+    },
+    {
+        name: 'validators.validationTrigger',
+        label: 'Gatilho de validação',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        row: 'comportamento.validation',
+        inline: true,
+        options: [
+            { value: 'change', text: 'Ao digitar' },
+            { value: 'blur', text: 'Ao sair do campo' },
+            { value: 'submit', text: 'Ao submeter' },
+            { value: 'immediate', text: 'Imediato' },
+        ],
+    },
+    {
+        name: 'validators.validationDebounce',
+        label: 'Debounce de validação (ms)',
+        editorType: 'number',
+        group: 'Formato/Comportamento',
+        row: 'comportamento.validation',
+        inline: true,
+    },
+    { name: 'validators.showInlineErrors', label: 'Mostrar erros inline', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    {
+        name: 'validators.errorPosition',
+        label: 'Posição do erro',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        options: [
+            { value: 'bottom', text: 'Abaixo' },
+            { value: 'top', text: 'Acima' },
+            { value: 'tooltip', text: 'Tooltip' },
+        ],
+    },
+    // Material Design
+    {
+        name: 'materialDesign.appearance',
+        label: 'Aparência',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ],
+    },
+    {
+        name: 'materialDesign.color',
+        label: 'Cor do tema',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ],
+    },
+    {
+        name: 'materialDesign.floatLabel',
+        label: 'Comportamento do label',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'always', text: 'Sempre' },
+        ],
+    },
+    {
+        name: 'materialDesign.subscriptSizing',
+        label: 'Subscript sizing',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'fixed', text: 'Fixo' },
+            { value: 'dynamic', text: 'Dinâmico' },
+        ],
+    },
+    { name: 'materialDesign.hideRequiredMarker', label: 'Ocultar * obrigatório', editorType: 'checkbox', group: 'Material Design' },
+    // Estado de erro e interações avançadas
+    {
+        name: 'errorStateMatcher',
+        label: 'Estratégia de erro',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'default', text: 'Padrão' },
+            { value: 'showOnDirtyAndInvalid', text: 'Mostrar ao sujar e inválido' },
+            { value: 'showOnSubmitted', text: 'Mostrar ao enviar' },
+            { value: 'showImmediately', text: 'Mostrar imediatamente' },
+        ],
+    },
+    { name: 'disabledInteractive', label: 'Desabilitado interativo', editorType: 'checkbox', group: 'Material Design' },
+    // Botão limpar (clear)
+    { name: 'clearButton.enabled', label: 'Clear: habilitar', editorType: 'checkbox', group: 'Ações' },
+    { name: 'clearButton.icon', label: 'Clear: ícone', editorType: 'text', group: 'Ações', hint: "Material Symbols (ex.: mi:clear). Use o seletor ao lado para buscar." },
+    { name: 'clearButton.iconColor', label: 'Clear: cor do ícone', editorType: 'color', group: 'Ações', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'clearButton.tooltip', label: 'Clear: tooltip', editorType: 'text', group: 'Ações' },
+    { name: 'clearButton.ariaLabel', label: 'Clear: aria-label', editorType: 'text', group: 'Ações' },
+    { name: 'clearButton.showOnlyWhenFilled', label: 'Clear: só quando preenchido', editorType: 'checkbox', group: 'Ações' },
+    // Acessibilidade / Avançado
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'dataAttributes', label: 'Data attributes (JSON)', editorType: 'textarea', hint: '{ "testId": "input-a" }', group: 'Acessibilidade' },
+    // Valor padrão
+    { name: 'defaultValue', label: 'Valor padrão', editorType: 'text', group: 'Geral' },
+];
+
+// Editor de metadados para componentes SELECT-like
+// Paridade com INPUT: grupos, linhas e propriedades canônicas
+const selectProperties = [
+    // 1) Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão', editorType: 'text', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:list). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'prefix', label: 'Texto (prefixo)', editorType: 'text', group: 'Geral' },
+    { name: 'suffix', label: 'Texto (sufixo)', editorType: 'text', group: 'Geral' },
+    // 2) Dados/Opções
+    {
+        name: 'options',
+        label: 'Opções (estáticas)',
+        editorType: 'textarea',
+        group: 'Dados/Opções',
+        hint: 'JSON: [{ "value":1, "text":"Um" }] ou linhas: valor|rótulo',
+    },
+    { name: 'emptyOptionText', label: 'Texto da opção vazia', editorType: 'text', group: 'Dados/Opções' },
+    { name: 'multiple', label: 'Múltipla seleção', editorType: 'checkbox', group: 'Dados/Opções', row: 'dados.inline1', inline: true },
+    { name: 'optionLabelKey', label: 'Chave do rótulo (remoto)', editorType: 'text', group: 'Dados/Opções' },
+    { name: 'optionValueKey', label: 'Chave do valor (remoto)', editorType: 'text', group: 'Dados/Opções' },
+    // 3) Fonte Remota
+    { name: 'resourcePath', label: 'Resource Path', editorType: 'text', group: 'Fonte Remota' },
+    {
+        name: 'loadOn',
+        label: 'Carregar em',
+        editorType: 'select',
+        group: 'Fonte Remota',
+        options: [
+            { value: 'open', text: 'Ao abrir (padrão)' },
+            { value: 'init', text: 'Na inicialização' },
+            { value: 'none', text: 'Nenhum (manual)' },
+        ],
+        hint: "Define quando o async-select realiza a primeira busca remota",
+    },
+    { name: 'filterCriteria', label: 'Critérios de filtro (JSON)', editorType: 'textarea', group: 'Fonte Remota', hint: '{ "active": true }' },
+    // 3.1) Dependências (Cascata Nativa – Fase 1)
+    { name: 'dependencyFields', label: 'Campos dependentes (CSV ou JSON)', editorType: 'text', group: 'Fonte Remota', hint: "Ex.: rotaId,destinoReqId" },
+    { name: 'resetOnDependentChange', label: 'Resetar ao mudar dependentes', editorType: 'checkbox', group: 'Fonte Remota' },
+    { name: 'enableDependencyCascade', label: 'Habilitar cascata nativa', editorType: 'checkbox', group: 'Fonte Remota', hint: 'Desative quando Connections controlarem filterCriteria' },
+    { name: 'dependencyFilterMap', label: 'Mapeamento de filtros (JSON)', editorType: 'textarea', group: 'Fonte Remota', hint: '{ "rotaId": "rotaId", "destinoReqId": { "key": "destinoId", "valuePath": "id" } }' },
+    { name: 'dependencyValuePath', label: 'Value path padrão (dep.)', editorType: 'text', group: 'Fonte Remota', hint: "Ex.: 'id' (default) ou 'code'" },
+    {
+        name: 'dependencyMergeStrategy',
+        label: 'Merge de filtros (dep.)',
+        editorType: 'select',
+        group: 'Fonte Remota',
+        options: [
+            { value: 'merge', text: 'merge (padrão)' },
+            { value: 'replace', text: 'replace (apenas chaves mapeadas)' },
+        ],
+        hint: 'merge preserva chaves externas; replace substitui apenas chaves mapeadas',
+    },
+    { name: 'dependencyDebounceMs', label: 'Debounce (ms) dependentes', editorType: 'number', group: 'Fonte Remota', hint: 'Padrão: 150' },
+    {
+        name: 'dependencyLoadOnChange',
+        label: 'Recarregar ao mudar dependentes',
+        editorType: 'select',
+        group: 'Fonte Remota',
+        options: [
+            { value: 'respectLoadOn', text: 'Respeitar loadOn (padrão)' },
+            { value: 'immediate', text: 'Imediato' },
+            { value: 'manual', text: 'Manual (Connections disparam)' },
+        ],
+    },
+    // 4) Formato/Comportamento
+    { name: 'selectAll', label: 'Selecionar todos', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.inline1', inline: true },
+    { name: 'searchable', label: 'Buscável', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.inline1', inline: true },
+    { name: 'maxSelections', label: 'Máximo de seleções', editorType: 'number', group: 'Formato/Comportamento' },
+    // 5) Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // 6) Material Design
+    {
+        name: 'materialDesign.appearance',
+        label: 'Aparência',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ],
+    },
+    {
+        name: 'materialDesign.color',
+        label: 'Cor do tema',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ],
+    },
+    {
+        name: 'materialDesign.floatLabel',
+        label: 'Comportamento do label',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'always', text: 'Sempre' },
+        ],
+    },
+    {
+        name: 'materialDesign.subscriptSizing',
+        label: 'Subscript sizing',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'fixed', text: 'Fixo' },
+            { value: 'dynamic', text: 'Dinâmico' },
+        ],
+    },
+    { name: 'materialDesign.hideRequiredMarker', label: 'Ocultar * obrigatório', editorType: 'checkbox', group: 'Material Design' },
+    {
+        name: 'errorStateMatcher',
+        label: 'Estratégia de erro',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'default', text: 'Padrão' },
+            { value: 'showOnDirtyAndInvalid', text: 'Mostrar ao sujar e inválido' },
+            { value: 'showOnSubmitted', text: 'Mostrar ao enviar' },
+            { value: 'showImmediately', text: 'Mostrar imediatamente' },
+        ],
+    },
+    // 7) Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'dataAttributes', label: 'Data attributes (JSON)', editorType: 'textarea', group: 'Acessibilidade', hint: '{ "testId": "select-a" }' },
+    // 8) Ações (Clear)
+    { name: 'clearButton.enabled', label: 'Clear: habilitar', editorType: 'checkbox', group: 'Ações', row: 'clear.inline1', inline: true },
+    { name: 'clearButton.icon', label: 'Clear: ícone', editorType: 'text', group: 'Ações', row: 'clear.inline2', hint: "Material Symbols (ex.: mi:clear). Use o seletor ao lado para buscar." },
+    { name: 'clearButton.iconColor', label: 'Clear: cor do ícone', editorType: 'color', group: 'Ações', row: 'clear.inline2', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'clearButton.tooltip', label: 'Clear: tooltip', editorType: 'text', group: 'Ações', row: 'clear.inline2' },
+    { name: 'clearButton.ariaLabel', label: 'Clear: aria-label', editorType: 'text', group: 'Ações', row: 'clear.inline2' },
+    { name: 'clearButton.showOnlyWhenFilled', label: 'Clear: só quando preenchido', editorType: 'checkbox', group: 'Ações', row: 'clear.inline1', inline: true },
+];
+
+const transferListProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    // Dados/Opções
+    {
+        name: 'options',
+        label: 'Opções (estáticas)',
+        editorType: 'textarea',
+        group: 'Dados/Opções',
+        hint: 'JSON: [{ "value":1, "text":"Um" }] ou linhas: valor|rótulo',
+    },
+    { name: 'optionLabelKey', label: 'Chave do rótulo (remoto)', editorType: 'text', group: 'Dados/Opções' },
+    { name: 'optionValueKey', label: 'Chave do valor (remoto)', editorType: 'text', group: 'Dados/Opções' },
+    // Fonte Remota
+    { name: 'resourcePath', label: 'Resource Path', editorType: 'text', group: 'Fonte Remota' },
+    { name: 'filterCriteria', label: 'Critérios de filtro (JSON)', editorType: 'textarea', group: 'Fonte Remota', hint: '{ "active": true }' },
+    { name: 'searchable', label: 'Buscável', editorType: 'checkbox', group: 'Fonte Remota', row: 'fonte.inline1', inline: true },
+    // Formato/Comportamento
+    { name: 'maxSelections', label: 'Máximo de seleções', editorType: 'number', group: 'Formato/Comportamento' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'dataAttributes', label: 'Data attributes (JSON)', editorType: 'textarea', group: 'Acessibilidade', hint: '{ "testId": "transfer-a" }' },
+    // Ações (Clear)
+    { name: 'clearButton.enabled', label: 'Clear: habilitar', editorType: 'checkbox', group: 'Ações' },
+    { name: 'clearButton.icon', label: 'Clear: ícone', editorType: 'text', group: 'Ações', hint: "Material Symbols (ex.: mi:clear). Use o seletor ao lado para buscar." },
+    { name: 'clearButton.iconColor', label: 'Clear: cor do ícone', editorType: 'color', group: 'Ações', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'clearButton.tooltip', label: 'Clear: tooltip', editorType: 'text', group: 'Ações' },
+    { name: 'clearButton.ariaLabel', label: 'Clear: aria-label', editorType: 'text', group: 'Ações' },
+    { name: 'clearButton.showOnlyWhenFilled', label: 'Clear: só quando preenchido', editorType: 'checkbox', group: 'Ações' },
+];
+
+const radioProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    // Dados/Opções
+    {
+        name: 'providerOptions',
+        label: 'Opções (estáticas)',
+        editorType: 'textarea',
+        group: 'Dados/Opções',
+        hint: 'JSON: [{ "value":1, "text":"Um" }] ou linhas: valor|rótulo',
+    },
+    { name: 'optionLabelKey', label: 'Chave do rótulo (remoto)', editorType: 'text', group: 'Dados/Opções' },
+    { name: 'optionValueKey', label: 'Chave do valor (remoto)', editorType: 'text', group: 'Dados/Opções' },
+    // Fonte Remota
+    { name: 'resourcePath', label: 'Resource Path', editorType: 'text', group: 'Fonte Remota' },
+    { name: 'filterCriteria', label: 'Critérios de filtro (JSON)', editorType: 'text', group: 'Fonte Remota', hint: '{ "active": true }' },
+    // Formato/Comportamento
+    { name: 'color', label: 'Cor', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'layout', label: 'Layout', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'horizontal', text: 'Horizontal' },
+            { value: 'vertical', text: 'Vertical' },
+        ] },
+    { name: 'labelPosition', label: 'Posição do label', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'before', text: 'Antes' },
+            { value: 'after', text: 'Depois' },
+        ] },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+];
+
+const buttonToggleProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Geral' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Geral' },
+    // Dados/Opções
+    {
+        name: 'options',
+        label: 'Opções (estáticas)',
+        editorType: 'textarea',
+        group: 'Dados/Opções',
+        hint: 'JSON: [{ "value":1, "text":"Um" }] ou linhas: valor|rótulo',
+    },
+    { name: 'optionLabelKey', label: 'Chave do rótulo (remoto)', editorType: 'text', group: 'Dados/Opções' },
+    { name: 'optionValueKey', label: 'Chave do valor (remoto)', editorType: 'text', group: 'Dados/Opções' },
+    // Fonte Remota
+    { name: 'resourcePath', label: 'Resource Path', editorType: 'text', group: 'Fonte Remota' },
+    { name: 'filterCriteria', label: 'Critérios de filtro (JSON)', editorType: 'textarea', group: 'Fonte Remota', hint: '{ "active": true }' },
+    // Formato/Comportamento
+    { name: 'multiple', label: 'Múltipla seleção', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.inline1', inline: true },
+    { name: 'maxSelections', label: 'Máximo de seleções', editorType: 'number', group: 'Formato/Comportamento' },
+    // Material Design
+    { name: 'appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'legacy', text: 'Legacy' },
+            { value: 'standard', text: 'Standard' },
+        ] },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+];
+
+const treeSelectProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    // Dados/Opções
+    {
+        name: 'options',
+        label: 'Nós (estáticos)',
+        editorType: 'textarea',
+        group: 'Dados/Opções',
+        hint: 'JSON: [{ "value":1, "label":"Um", children:[...] }]',
+    },
+    // Formato/Comportamento
+    { name: 'searchable', label: 'Buscável', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.inline1', inline: true },
+    { name: 'leafOnly', label: 'Permitir apenas folhas', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.inline1', inline: true },
+    { name: 'autoExpandOnSearch', label: 'Auto-expansão ao buscar', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.inline2', inline: true },
+    { name: 'returnPath', label: 'Retornar caminho', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.inline2', inline: true },
+    { name: 'returnObject', label: 'Retornar objeto', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.inline2', inline: true },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'dataAttributes', label: 'Data attributes (JSON)', editorType: 'textarea', group: 'Acessibilidade', hint: '{ "testId": "tree-a" }' },
+    // Ações (Clear)
+    { name: 'clearButton.enabled', label: 'Clear: habilitar', editorType: 'checkbox', group: 'Ações' },
+    { name: 'clearButton.icon', label: 'Clear: ícone', editorType: 'text', group: 'Ações', hint: "Material Symbols (ex.: mi:clear). Use o seletor ao lado para buscar." },
+    { name: 'clearButton.iconColor', label: 'Clear: cor do ícone', editorType: 'color', group: 'Ações', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'clearButton.tooltip', label: 'Clear: tooltip', editorType: 'text', group: 'Ações' },
+    { name: 'clearButton.ariaLabel', label: 'Clear: aria-label', editorType: 'text', group: 'Ações' },
+    { name: 'clearButton.showOnlyWhenFilled', label: 'Clear: só quando preenchido', editorType: 'checkbox', group: 'Ações' },
+];
+
+// Properties for Material Textarea editor (parity with INPUT where applicable)
+const textareaProperties = [
+    // Geral / Apresentação
+    { name: 'label', label: 'Label', editorType: 'text', placeholder: 'Rótulo do campo', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:edit). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'prefix', label: 'Texto (prefixo)', editorType: 'text', group: 'Geral' },
+    { name: 'suffix', label: 'Texto (sufixo)', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão', editorType: 'text', group: 'Geral' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'minLength', label: 'Mínimo de caracteres', editorType: 'number', group: 'Validação', row: 'validacao.minmax' },
+    { name: 'maxLength', label: 'Máximo de caracteres', editorType: 'number', group: 'Validação', row: 'validacao.minmax' },
+    { name: 'pattern', label: 'Pattern (regex)', editorType: 'text', hint: 'Ex.: /^foo.*/i', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    { name: 'validators.minLengthMessage', label: 'Mensagem: mínimo', editorType: 'text', group: 'Validação' },
+    { name: 'validators.maxLengthMessage', label: 'Mensagem: máximo', editorType: 'text', group: 'Validação' },
+    { name: 'validators.patternMessage', label: 'Mensagem: padrão inválido', editorType: 'text', group: 'Validação' },
+    // fase 2: minWords + mensagem
+    // { name: 'validators.minWords', label: 'Mínimo de palavras', editorType: 'number', group: 'Validação', row: 'validacao.minwords' },
+    // { name: 'validators.minWordsMessage', label: 'Mensagem: poucas palavras', editorType: 'text', group: 'Validação', row: 'validacao.minwords' },
+    // Formato/Comportamento
+    {
+        name: 'textTransform',
+        label: 'Transformação de texto',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        options: [
+            { value: 'none', text: 'Nenhuma' },
+            { value: 'uppercase', text: 'MAIÚSCULAS (CSS)' },
+            { value: 'lowercase', text: 'minúsculas (CSS)' },
+            { value: 'capitalize', text: 'Capitalizar (CSS)' },
+            { value: 'titleCase', text: 'Title Case' },
+            { value: 'sentenceCase', text: 'Sentence case' },
+            { value: 'kebab', text: 'kebab-case' },
+            { value: 'snake', text: 'snake_case' },
+            { value: 'camel', text: 'camelCase' },
+            { value: 'pascal', text: 'PascalCase' },
+            { value: 'slugify', text: 'slugify (a-z0-9-)' },
+            { value: 'trim', text: 'trim (remover bordas)' },
+            { value: 'collapseWhitespace', text: 'collapseWhitespace (normalizar espaços)' },
+            { value: 'removeDiacritics', text: 'removeDiacritics (sem acentos)' },
+        ],
+    },
+    {
+        name: 'textTransformApply',
+        label: 'Aplicar em',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        defaultValue: 'displayOnly',
+        options: [
+            { value: 'displayOnly', text: 'Exibição (visual)' },
+            { value: 'saveOnly', text: 'Salvar (persistência)' },
+            { value: 'both', text: 'Ambos' },
+        ],
+    },
+    { name: 'showCharacterCount', label: 'Mostrar contador de caracteres', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'rows', label: 'Linhas (rows)', editorType: 'number', group: 'Formato/Comportamento', row: 'formato.size' },
+    { name: 'cols', label: 'Colunas (cols)', editorType: 'number', group: 'Formato/Comportamento', row: 'formato.size' },
+    {
+        name: 'wrap',
+        label: 'Quebra de linha (wrap)',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        options: [
+            { value: 'soft', text: 'Soft (visual, sem \n)' },
+            { value: 'hard', text: 'Hard (visual + \n)' },
+            { value: 'off', text: 'Off (sem quebra automática)' },
+        ],
+    },
+    { name: 'autoResize', label: 'Auto-resize (CDK)', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'formato.autosize', inline: true },
+    { name: 'minRows', label: 'Mín. linhas', editorType: 'number', group: 'Formato/Comportamento', row: 'formato.autosize', inline: true },
+    { name: 'maxRows', label: 'Máx. linhas', editorType: 'number', group: 'Formato/Comportamento', row: 'formato.autosize', inline: true },
+    { name: 'resize', label: 'Redimensionamento (CSS resize)', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'none', text: 'Nenhum' },
+            { value: 'vertical', text: 'Vertical' },
+            { value: 'horizontal', text: 'Horizontal' },
+            { value: 'both', text: 'Ambos' },
+        ] },
+    { name: 'textAreaMode', label: 'Modo de edição', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'plain', text: 'Texto (normal)' },
+            { value: 'code', text: 'Código (genérico)' },
+            { value: 'markdown', text: 'Markdown' },
+            { value: 'json', text: 'JSON' },
+            { value: 'xml', text: 'XML' },
+            { value: 'sql', text: 'SQL' },
+            { value: 'log', text: 'Log' },
+        ] },
+    { name: 'showStats', label: 'Mostrar estatísticas (palavras/linhas)', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    // Formato/Comportamento
+    { name: 'autocomplete', label: 'Autocomplete', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'spellcheck', label: 'Verificação ortográfica', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comportamento.toggles1', inline: true },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comportamento.toggles1', inline: true },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comportamento.toggles1', inline: true },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comportamento.toggles2', inline: true },
+    { name: 'enableTabIndent', label: 'Tab: inserir indentação', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comportamento.toggles2', inline: true },
+    { name: 'tabSize', label: 'Tamanho da indentação (espaços)', editorType: 'number', group: 'Formato/Comportamento', row: 'comportamento.toggles2', inline: true },
+    { name: 'maxLines', label: 'Máx. de linhas (bloqueia Enter)', editorType: 'number', group: 'Formato/Comportamento', row: 'comportamento.validation', inline: true },
+    {
+        name: 'validators.validationTrigger',
+        label: 'Gatilho de validação',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        row: 'comportamento.validation',
+        inline: true,
+        options: [
+            { value: 'change', text: 'Ao digitar' },
+            { value: 'blur', text: 'Ao sair do campo' },
+            { value: 'submit', text: 'Ao submeter' },
+            { value: 'immediate', text: 'Imediato' },
+        ],
+    },
+    { name: 'validators.validationDebounce', label: 'Debounce de validação (ms)', editorType: 'number', group: 'Formato/Comportamento', row: 'comportamento.validation', inline: true },
+    { name: 'validators.showInlineErrors', label: 'Mostrar erros inline', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    {
+        name: 'validators.errorPosition',
+        label: 'Posição do erro',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        options: [
+            { value: 'bottom', text: 'Abaixo' },
+            { value: 'top', text: 'Acima' },
+            { value: 'tooltip', text: 'Tooltip' },
+        ],
+    },
+    // Material Design
+    {
+        name: 'materialDesign.appearance',
+        label: 'Aparência',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ],
+    },
+    {
+        name: 'materialDesign.color',
+        label: 'Cor do tema',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ],
+    },
+    {
+        name: 'materialDesign.floatLabel',
+        label: 'Comportamento do label',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'always', text: 'Sempre' },
+        ],
+    },
+    {
+        name: 'materialDesign.subscriptSizing',
+        label: 'Subscript sizing',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'fixed', text: 'Fixo' },
+            { value: 'dynamic', text: 'Dinâmico' },
+        ],
+    },
+    { name: 'materialDesign.hideRequiredMarker', label: 'Ocultar * obrigatório', editorType: 'checkbox', group: 'Material Design' },
+    {
+        name: 'errorStateMatcher',
+        label: 'Estratégia de erro',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'default', text: 'Padrão' },
+            { value: 'showOnDirtyAndInvalid', text: 'Mostrar ao sujar e inválido' },
+            { value: 'showOnSubmitted', text: 'Mostrar ao enviar' },
+            { value: 'showImmediately', text: 'Mostrar imediatamente' },
+        ],
+    },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'dataAttributes', label: 'Data attributes (JSON)', editorType: 'textarea', hint: '{ "testId": "textarea-a" }', group: 'Acessibilidade' },
+    // Ações (clear)
+    { name: 'clearButton.enabled', label: 'Clear: habilitar', editorType: 'checkbox', group: 'Ações' },
+    { name: 'clearButton.iconColor', label: 'Clear: cor do ícone', editorType: 'color', group: 'Ações', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'clearButton.icon', label: 'Clear: ícone', editorType: 'text', group: 'Ações', hint: "Material Symbols (ex.: mi:clear). Use o seletor ao lado para buscar." },
+    { name: 'clearButton.tooltip', label: 'Clear: tooltip', editorType: 'text', group: 'Ações' },
+    { name: 'clearButton.ariaLabel', label: 'Clear: aria-label', editorType: 'text', group: 'Ações' },
+    { name: 'clearButton.showOnlyWhenFilled', label: 'Clear: só quando preenchido', editorType: 'checkbox', group: 'Ações' },
+];
+
+// Editor de metadados para NUMBER (numericTextBox)
+// Paridade com INPUT, cobrindo grupos e propriedades canônicas
+const numberProperties = [
+    // 1) Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão', editorType: 'number', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: 'Material Symbols (ex.: mi:...). Use o seletor ao lado para buscar.' },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: 'Material Symbols (ex.: mi:...). Use o seletor ao lado para buscar.' },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'prefix', label: 'Texto (prefixo)', editorType: 'text', group: 'Geral' },
+    { name: 'suffix', label: 'Texto (sufixo)', editorType: 'text', group: 'Geral' },
+    // 2) Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'min', label: 'Mínimo', editorType: 'number', group: 'Validação', row: 'validacao.minmax', inline: true },
+    { name: 'max', label: 'Máximo', editorType: 'number', group: 'Validação', row: 'validacao.minmax', inline: true },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    { name: 'validators.minMessage', label: 'Mensagem: mínimo', editorType: 'text', group: 'Validação' },
+    { name: 'validators.maxMessage', label: 'Mensagem: máximo', editorType: 'text', group: 'Validação' },
+    // 3) Formato/Comportamento
+    { name: 'step', label: 'Step (incremento)', editorType: 'number', group: 'Formato/Comportamento' },
+    { name: 'numberFormat.decimalPlaces', label: 'Casas decimais', editorType: 'number', group: 'Formato/Comportamento', row: 'formato.decimais', inline: true },
+    { name: 'showGrouping', label: 'Agrupar milhares', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'formato.decimais', inline: true, hint: 'Fase 1: aplica apenas formatação visual básica' },
+    {
+        name: 'inputMode',
+        label: 'Modo de entrada',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        options: [
+            { value: 'numeric', text: 'Numérico' },
+            { value: 'decimal', text: 'Decimal' },
+        ],
+    },
+    // 4) Formato/Comportamento
+    { name: 'autocomplete', label: 'Autocomplete', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'spellcheck', label: 'Verificação ortográfica', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.toggles1', inline: true },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.toggles1', inline: true },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.toggles1', inline: true },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.toggles2', inline: true },
+    {
+        name: 'validators.validationTrigger',
+        label: 'Gatilho de validação',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        row: 'comp.validation',
+        inline: true,
+        options: [
+            { value: 'change', text: 'Ao digitar' },
+            { value: 'blur', text: 'Ao sair do campo' },
+            { value: 'submit', text: 'Ao submeter' },
+            { value: 'immediate', text: 'Imediato' },
+        ],
+    },
+    { name: 'validators.validationDebounce', label: 'Debounce (ms)', editorType: 'number', group: 'Formato/Comportamento', row: 'comp.validation', inline: true },
+    { name: 'validators.showInlineErrors', label: 'Mostrar erros inline', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    {
+        name: 'validators.errorPosition',
+        label: 'Posição do erro',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        options: [
+            { value: 'bottom', text: 'Abaixo' },
+            { value: 'top', text: 'Acima' },
+            { value: 'tooltip', text: 'Tooltip' },
+        ],
+    },
+    // 5) Material Design
+    {
+        name: 'materialDesign.appearance',
+        label: 'Aparência',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ],
+    },
+    {
+        name: 'materialDesign.color',
+        label: 'Cor do tema',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ],
+    },
+    {
+        name: 'materialDesign.floatLabel',
+        label: 'Comportamento do label',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'always', text: 'Sempre' },
+        ],
+    },
+    {
+        name: 'materialDesign.subscriptSizing',
+        label: 'Subscript sizing',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'fixed', text: 'Fixo' },
+            { value: 'dynamic', text: 'Dinâmico' },
+        ],
+    },
+    { name: 'materialDesign.hideRequiredMarker', label: 'Ocultar * obrigatório', editorType: 'checkbox', group: 'Material Design' },
+    {
+        name: 'errorStateMatcher',
+        label: 'Estratégia de erro',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'default', text: 'Padrão' },
+            { value: 'showOnDirtyAndInvalid', text: 'Mostrar ao sujar e inválido' },
+            { value: 'showOnSubmitted', text: 'Mostrar ao enviar' },
+            { value: 'showImmediately', text: 'Mostrar imediatamente' },
+        ],
+    },
+    // 6) Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'dataAttributes', label: 'Data attributes (JSON)', editorType: 'textarea', group: 'Acessibilidade', hint: '{ "testId": "number-a" }' },
+    // 7) Ações (Clear)
+    { name: 'clearButton.enabled', label: 'Clear: habilitar', editorType: 'checkbox', group: 'Ações', row: 'acoes.inline1', inline: true },
+    { name: 'clearButton.icon', label: 'Clear: ícone', editorType: 'text', group: 'Ações', row: 'acoes.inline2', hint: 'Material Symbols (ex.: mi:clear). Use o seletor ao lado para buscar.' },
+    { name: 'clearButton.iconColor', label: 'Clear: cor do ícone', editorType: 'color', group: 'Ações', row: 'acoes.inline2', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'clearButton.tooltip', label: 'Clear: tooltip', editorType: 'text', group: 'Ações', row: 'acoes.inline2' },
+    { name: 'clearButton.ariaLabel', label: 'Clear: aria-label', editorType: 'text', group: 'Ações', row: 'acoes.inline2' },
+    { name: 'clearButton.showOnlyWhenFilled', label: 'Clear: só quando preenchido', editorType: 'checkbox', group: 'Ações', row: 'acoes.inline1', inline: true },
+];
+
+const dateProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão', editorType: 'date', group: 'Geral', hint: 'Data (YYYY-MM-DD)' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:calendar_today). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'prefix', label: 'Texto (prefixo)', editorType: 'text', group: 'Geral' },
+    { name: 'suffix', label: 'Texto (sufixo)', editorType: 'text', group: 'Geral' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'minDate', label: 'Mínima', editorType: 'date', group: 'Validação', row: 'val.minmax' },
+    { name: 'maxDate', label: 'Máxima', editorType: 'date', group: 'Validação', row: 'val.minmax' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    { name: 'validators.minMessage', label: 'Mensagem: data mínima', editorType: 'text', group: 'Validação' },
+    { name: 'validators.maxMessage', label: 'Mensagem: data máxima', editorType: 'text', group: 'Validação' },
+    // Formato/Comportamento
+    { name: 'startView', label: 'Visão inicial', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'month', text: 'Mês' },
+            { value: 'year', text: 'Ano' },
+            { value: 'multi-year', text: 'Décadas' },
+        ] },
+    { name: 'startAt', label: 'Abrir em', editorType: 'date', group: 'Formato/Comportamento' },
+    { name: 'touchUi', label: 'Touch UI', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    { name: 'closeOnSelect', label: 'Fechar ao selecionar', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    // Material Design
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'materialDesign.floatLabel', label: 'Comportamento do label', editorType: 'select', group: 'Material Design', options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'always', text: 'Sempre' },
+        ] },
+    { name: 'materialDesign.subscriptSizing', label: 'Subscript sizing', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fixed', text: 'Fixo' },
+            { value: 'dynamic', text: 'Dinâmico' },
+        ] },
+    { name: 'materialDesign.hideRequiredMarker', label: 'Ocultar * obrigatório', editorType: 'checkbox', group: 'Material Design' },
+    { name: 'errorStateMatcher', label: 'Estratégia de erro', editorType: 'select', group: 'Material Design', options: [
+            { value: 'default', text: 'Padrão' },
+            { value: 'showOnDirtyAndInvalid', text: 'Mostrar ao sujar e inválido' },
+            { value: 'showOnSubmitted', text: 'Mostrar ao enviar' },
+            { value: 'showImmediately', text: 'Mostrar imediatamente' },
+        ] },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'dataAttributes', label: 'Data attributes (JSON)', editorType: 'textarea', group: 'Acessibilidade' },
+    // Ações
+    { name: 'clearButton.enabled', label: 'Clear: habilitar', editorType: 'checkbox', group: 'Ações', row: 'clear.inline1', inline: true },
+    { name: 'clearButton.icon', label: 'Clear: ícone', editorType: 'text', group: 'Ações', row: 'clear.inline2', hint: "Material Symbols (ex.: mi:clear). Use o seletor ao lado para buscar." },
+    { name: 'clearButton.iconColor', label: 'Clear: cor do ícone', editorType: 'color', group: 'Ações', row: 'clear.inline2', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'clearButton.tooltip', label: 'Clear: tooltip', editorType: 'text', group: 'Ações', row: 'clear.inline2' },
+    { name: 'clearButton.ariaLabel', label: 'Clear: aria-label', editorType: 'text', group: 'Ações', row: 'clear.inline2' },
+    { name: 'clearButton.showOnlyWhenFilled', label: 'Clear: só quando preenchido', editorType: 'checkbox', group: 'Ações', row: 'clear.inline1', inline: true },
+];
+
+const dateRangeProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue.startDate', label: 'Valor padrão (início)', editorType: 'date', group: 'Geral' },
+    { name: 'defaultValue.endDate', label: 'Valor padrão (fim)', editorType: 'date', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:date_range). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    // Placeholders específicos
+    { name: 'startPlaceholder', label: 'Placeholder (início)', editorType: 'text', group: 'Geral' },
+    { name: 'endPlaceholder', label: 'Placeholder (fim)', editorType: 'text', group: 'Geral' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'minDate', label: 'Mínima', editorType: 'date', group: 'Validação', row: 'val.minmax' },
+    { name: 'maxDate', label: 'Máxima', editorType: 'date', group: 'Validação', row: 'val.minmax' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // Formato/Comportamento
+    { name: 'startView', label: 'Visão inicial', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'month', text: 'Mês' },
+            { value: 'year', text: 'Ano' },
+            { value: 'multi-year', text: 'Décadas' },
+        ] },
+    { name: 'startAt', label: 'Abrir em', editorType: 'date', group: 'Formato/Comportamento' },
+    { name: 'touchUi', label: 'Touch UI', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    // Material Design
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'materialDesign.floatLabel', label: 'Comportamento do label', editorType: 'select', group: 'Material Design', options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'always', text: 'Sempre' },
+        ] },
+    { name: 'materialDesign.subscriptSizing', label: 'Subscript sizing', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fixed', text: 'Fixo' },
+            { value: 'dynamic', text: 'Dinâmico' },
+        ] },
+    { name: 'materialDesign.hideRequiredMarker', label: 'Ocultar * obrigatório', editorType: 'checkbox', group: 'Material Design' },
+    { name: 'errorStateMatcher', label: 'Estratégia de erro', editorType: 'select', group: 'Material Design', options: [
+            { value: 'default', text: 'Padrão' },
+            { value: 'showOnDirtyAndInvalid', text: 'Mostrar ao sujar e inválido' },
+            { value: 'showOnSubmitted', text: 'Mostrar ao enviar' },
+            { value: 'showImmediately', text: 'Mostrar imediatamente' },
+        ] },
+    // Acessibilidade
+    { name: 'startAriaLabel', label: 'ARIA (início)', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'endAriaLabel', label: 'ARIA (fim)', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'dataAttributes', label: 'Data attributes (JSON)', editorType: 'textarea', group: 'Acessibilidade' },
+];
+
+const datetimeLocalProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão (YYYY-MM-DDTHH:mm)', editorType: 'text', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:schedule). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'min', label: 'Mínimo (YYYY-MM-DDTHH:mm)', editorType: 'text', group: 'Validação', row: 'val.minmax' },
+    { name: 'max', label: 'Máximo (YYYY-MM-DDTHH:mm)', editorType: 'text', group: 'Validação', row: 'val.minmax' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    { name: 'validators.minMessage', label: 'Mensagem: mínimo', editorType: 'text', group: 'Validação' },
+    { name: 'validators.maxMessage', label: 'Mensagem: máximo', editorType: 'text', group: 'Validação' },
+    // Formato/Comportamento
+    { name: 'step', label: 'Step (segundos)', editorType: 'number', group: 'Formato/Comportamento' },
+    { name: 'inputMode', label: 'Modo de entrada (mobile)', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'text', text: 'Texto' },
+            { value: 'numeric', text: 'Numérico' },
+            { value: 'decimal', text: 'Decimal' },
+            { value: 'tel', text: 'Telefone' },
+            { value: 'email', text: 'Email' },
+            { value: 'url', text: 'URL' },
+            { value: 'search', text: 'Busca' },
+        ] },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    { name: 'autocomplete', label: 'Autocomplete', editorType: 'text', group: 'Formato/Comportamento' },
+    // Material Design
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'materialDesign.floatLabel', label: 'Comportamento do label', editorType: 'select', group: 'Material Design', options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'always', text: 'Sempre' },
+        ] },
+    { name: 'materialDesign.subscriptSizing', label: 'Subscript sizing', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fixed', text: 'Fixo' },
+            { value: 'dynamic', text: 'Dinâmico' },
+        ] },
+    { name: 'materialDesign.hideRequiredMarker', label: 'Ocultar * obrigatório', editorType: 'checkbox', group: 'Material Design' },
+    { name: 'errorStateMatcher', label: 'Estratégia de erro', editorType: 'select', group: 'Material Design', options: [
+            { value: 'default', text: 'Padrão' },
+            { value: 'showOnDirtyAndInvalid', text: 'Mostrar ao sujar e inválido' },
+            { value: 'showOnSubmitted', text: 'Mostrar ao enviar' },
+            { value: 'showImmediately', text: 'Mostrar imediatamente' },
+        ] },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'dataAttributes', label: 'Data attributes (JSON)', editorType: 'textarea', group: 'Acessibilidade' },
+    // Ações: Não expõe Clear (componente não implementa botão de limpar)
+];
+
+// Native <input type="date"> editor properties
+const dateInputProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão (YYYY-MM-DD)', editorType: 'date', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:event). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'prefix', label: 'Texto (prefixo)', editorType: 'text', group: 'Geral' },
+    { name: 'suffix', label: 'Texto (sufixo)', editorType: 'text', group: 'Geral' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'min', label: 'Mínima (YYYY-MM-DD)', editorType: 'date', group: 'Validação', row: 'val.minmax' },
+    { name: 'max', label: 'Máxima (YYYY-MM-DD)', editorType: 'date', group: 'Validação', row: 'val.minmax' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // Formato/Comportamento
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    { name: 'autocomplete', label: 'Autocomplete', editorType: 'text', group: 'Formato/Comportamento' },
+    // Material Design
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'materialDesign.floatLabel', label: 'Comportamento do label', editorType: 'select', group: 'Material Design', options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'always', text: 'Sempre' },
+        ] },
+    { name: 'materialDesign.subscriptSizing', label: 'Subscript sizing', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fixed', text: 'Fixo' },
+            { value: 'dynamic', text: 'Dinâmico' },
+        ] },
+    { name: 'materialDesign.hideRequiredMarker', label: 'Ocultar * obrigatório', editorType: 'checkbox', group: 'Material Design' },
+    { name: 'errorStateMatcher', label: 'Estratégia de erro', editorType: 'select', group: 'Material Design', options: [
+            { value: 'default', text: 'Padrão' },
+            { value: 'showOnDirtyAndInvalid', text: 'Mostrar ao sujar e inválido' },
+            { value: 'showOnSubmitted', text: 'Mostrar ao enviar' },
+            { value: 'showImmediately', text: 'Mostrar imediatamente' },
+        ] },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'dataAttributes', label: 'Data attributes (JSON)', editorType: 'textarea', group: 'Acessibilidade' },
+    // Ações: Não expõe Clear (componente não implementa botão de limpar)
+];
+
+const timeInputProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão (HH:mm)', editorType: 'text', group: 'Geral', hint: 'Ex.: 08:30' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:schedule). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'prefix', label: 'Texto (prefixo)', editorType: 'text', group: 'Geral' },
+    { name: 'suffix', label: 'Texto (sufixo)', editorType: 'text', group: 'Geral' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'min', label: 'Mínimo (HH:mm)', editorType: 'text', group: 'Validação', row: 'val.minmax' },
+    { name: 'max', label: 'Máximo (HH:mm)', editorType: 'text', group: 'Validação', row: 'val.minmax' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // Formato/Comportamento
+    { name: 'step', label: 'Step (segundos)', editorType: 'number', group: 'Formato/Comportamento' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    { name: 'autocomplete', label: 'Autocomplete', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'inputMode', label: 'Modo de entrada', editorType: 'text', group: 'Formato/Comportamento' },
+    // Material Design
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'materialDesign.floatLabel', label: 'Comportamento do label', editorType: 'select', group: 'Material Design', options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'always', text: 'Sempre' },
+        ] },
+    { name: 'materialDesign.subscriptSizing', label: 'Subscript sizing', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fixed', text: 'Fixo' },
+            { value: 'dynamic', text: 'Dinâmico' },
+        ] },
+    { name: 'materialDesign.hideRequiredMarker', label: 'Ocultar * obrigatório', editorType: 'checkbox', group: 'Material Design' },
+    { name: 'errorStateMatcher', label: 'Estratégia de erro', editorType: 'select', group: 'Material Design', options: [
+            { value: 'default', text: 'Padrão' },
+            { value: 'showOnDirtyAndInvalid', text: 'Mostrar ao sujar e inválido' },
+            { value: 'showOnSubmitted', text: 'Mostrar ao enviar' },
+            { value: 'showImmediately', text: 'Mostrar imediatamente' },
+        ] },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'dataAttributes', label: 'Data attributes (JSON)', editorType: 'textarea', group: 'Acessibilidade' },
+];
+
+const timePickerProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão (exibição)', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: 'Material Symbols (ex.: mi:...). Use o seletor ao lado para buscar.' },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: 'Material Symbols (ex.: mi:...). Use o seletor ao lado para buscar.' },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'min', label: 'Mínimo (HH:mm[:ss])', editorType: 'text', group: 'Validação', row: 'val.minmax' },
+    { name: 'max', label: 'Máximo (HH:mm[:ss])', editorType: 'text', group: 'Validação', row: 'val.minmax' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // Comportamento
+    { name: 'interval', label: 'Intervalo (segundos ou 30m)', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'timeOptions', label: 'Opções (uma por linha)', editorType: 'textarea', group: 'Formato/Comportamento' },
+    { name: 'openOnClick', label: 'Abrir ao clicar', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    { name: 'touchUi', label: 'Touch UI', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.inline1', inline: true },
+    { name: 'format', label: 'Formato', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: '24h', text: '24 horas' },
+            { value: '12h', text: '12 horas' },
+        ] },
+    { name: 'showSeconds', label: 'Exibir segundos', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'stepMinute', label: 'Passo (min)', editorType: 'number', group: 'Formato/Comportamento', row: 'fmt.steps', inline: true },
+    { name: 'stepSecond', label: 'Passo (seg)', editorType: 'number', group: 'Formato/Comportamento', row: 'fmt.steps', inline: true },
+    { name: 'timeFilter', label: 'Filtro (id função)', editorType: 'text', group: 'Formato/Comportamento' },
+    // Material/A11y/Ações básicas
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+];
+
+const timeRangeProperties = [
+    // Geral (defaultValue como objeto start/end)
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue.start', label: 'Início (HH:mm)', editorType: 'text', group: 'Geral', row: 'geral.range', inline: true },
+    { name: 'defaultValue.end', label: 'Fim (HH:mm)', editorType: 'text', group: 'Geral', row: 'geral.range', inline: true },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: 'Material Symbols (ex.: mi:...). Use o seletor ao lado para buscar.' },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: 'Material Symbols (ex.: mi:...). Use o seletor ao lado para buscar.' },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'min', label: 'Min (HH:mm)', editorType: 'text', group: 'Validação', row: 'val.minmax', inline: true },
+    { name: 'max', label: 'Max (HH:mm)', editorType: 'text', group: 'Validação', row: 'val.minmax', inline: true },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // Comportamento
+    { name: 'step', label: 'Step (segundos)', editorType: 'number', group: 'Formato/Comportamento' },
+    { name: 'touchUi', label: 'Touch UI', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    // Material/A11y
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+];
+
+const monthInputProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão (YYYY-MM)', editorType: 'text', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:calendar_view_month). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: 'Material Symbols (ex.: mi:...). Use o seletor ao lado para buscar.' },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'min', label: 'Mínimo (YYYY-MM)', editorType: 'text', group: 'Validação', row: 'val.minmax' },
+    { name: 'max', label: 'Máximo (YYYY-MM)', editorType: 'text', group: 'Validação', row: 'val.minmax' },
+    // Material/A11y/Ações
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+];
+
+const weekInputProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão (YYYY-Www)', editorType: 'text', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:date_range). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: 'Material Symbols (ex.: mi:...). Use o seletor ao lado para buscar.' },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'min', label: 'Mínimo (YYYY-Www)', editorType: 'text', group: 'Validação', row: 'val.minmax' },
+    { name: 'max', label: 'Máximo (YYYY-Www)', editorType: 'text', group: 'Validação', row: 'val.minmax' },
+    // Material/A11y
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+];
+
+const emailInputProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão', editorType: 'text', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:mail). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'prefix', label: 'Texto (prefixo)', editorType: 'text', group: 'Geral' },
+    { name: 'suffix', label: 'Texto (sufixo)', editorType: 'text', group: 'Geral' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'minLength', label: 'Mín. caracteres', editorType: 'number', group: 'Validação', row: 'val.len', inline: true },
+    { name: 'maxLength', label: 'Máx. caracteres', editorType: 'number', group: 'Validação', row: 'val.len', inline: true },
+    { name: 'pattern', label: 'Regex', editorType: 'text', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    { name: 'validators.minLengthMessage', label: 'Mensagem: minLength', editorType: 'text', group: 'Validação' },
+    { name: 'validators.maxLengthMessage', label: 'Mensagem: maxLength', editorType: 'text', group: 'Validação' },
+    { name: 'validators.patternMessage', label: 'Mensagem: regex', editorType: 'text', group: 'Validação' },
+    // Comportamento
+    { name: 'autocomplete', label: 'Autocomplete', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'spellcheck', label: 'Verificação ortográfica', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'inputMode', label: 'Modo de entrada', editorType: 'text', group: 'Formato/Comportamento' },
+    // Material/A11y/Ações
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+];
+
+const passwordInputProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:lock). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'minLength', label: 'Mín. caracteres', editorType: 'number', group: 'Validação', row: 'val.len', inline: true },
+    { name: 'maxLength', label: 'Máx. caracteres', editorType: 'number', group: 'Validação', row: 'val.len', inline: true },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    { name: 'validators.minLengthMessage', label: 'Mensagem: minLength', editorType: 'text', group: 'Validação' },
+    { name: 'validators.maxLengthMessage', label: 'Mensagem: maxLength', editorType: 'text', group: 'Validação' },
+    // Comportamento
+    { name: 'autocomplete', label: 'Autocomplete', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    // Material/A11y
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+];
+
+const urlInputProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão (URL)', editorType: 'text', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:link). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'pattern', label: 'Regex', editorType: 'text', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    { name: 'validators.patternMessage', label: 'Mensagem: regex', editorType: 'text', group: 'Validação' },
+    // Comportamento
+    { name: 'autocomplete', label: 'Autocomplete', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'spellcheck', label: 'Verificação ortográfica', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento' },
+];
+
+const searchInputProperties = [
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:search). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    { name: 'autocomplete', label: 'Autocomplete', editorType: 'text', group: 'Formato/Comportamento' },
+];
+
+const phoneInputProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão', editorType: 'text', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:call). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // Comportamento
+    { name: 'autocomplete', label: 'Autocomplete', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'spellcheck', label: 'Verificação ortográfica', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'inputMode', label: 'Modo de entrada', editorType: 'text', group: 'Formato/Comportamento' },
+];
+
+const colorInputProperties = [
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão (#RRGGBB)', editorType: 'text', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:palette). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'prefix', label: 'Texto (prefixo)', editorType: 'text', group: 'Geral' },
+    { name: 'suffix', label: 'Texto (sufixo)', editorType: 'text', group: 'Geral' },
+    // Palette / Preview
+    { name: 'palettePreset', label: 'Paleta (preset)', editorType: 'select', group: 'Palette', options: [
+            { value: 'material', text: 'Material' },
+            { value: 'office', text: 'Office' },
+            { value: 'basic', text: 'Básico' },
+        ] },
+    { name: 'paletteColors', label: 'Paleta: cores (JSON ou linhas)', editorType: 'textarea', group: 'Palette', hint: "JSON array ou uma cor por linha (#hex ou rgba/hsl)" },
+    { name: 'columns', label: 'Paleta: colunas', editorType: 'number', group: 'Palette', defaultValue: 8 },
+    { name: 'popupWidth', label: 'Popup width (px ou CSS)', editorType: 'text', group: 'Preview/Popup', defaultValue: '320' },
+    { name: 'preview', label: 'Mostrar preview', editorType: 'checkbox', group: 'Preview/Popup' },
+    { name: 'showRecent', label: 'Mostrar recentes', editorType: 'checkbox', group: 'Preview/Popup' },
+    { name: 'maxRecent', label: 'Qtd. de recentes', editorType: 'number', group: 'Preview/Popup', defaultValue: 12 },
+    { name: 'showNativeOption', label: 'Mostrar seletor nativo', editorType: 'checkbox', group: 'Preview/Popup' },
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'materialDesign.floatLabel', label: 'Comportamento do label', editorType: 'select', group: 'Material Design', options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'always', text: 'Sempre' },
+        ] },
+    { name: 'materialDesign.subscriptSizing', label: 'Subscript sizing', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fixed', text: 'Fixo' },
+            { value: 'dynamic', text: 'Dinâmico' },
+        ] },
+    { name: 'materialDesign.hideRequiredMarker', label: 'Ocultar * obrigatório', editorType: 'checkbox', group: 'Material Design' },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+];
+
+// ColorPicker v2 property editor (pdx-color-picker)
+const colorPickerProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão', editorType: 'text', group: 'Geral', hint: '#rrggbb, rgba(), ...' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Geral' },
+    // Formato/Comportamento
+    {
+        name: 'format',
+        label: 'Formato de saída',
+        editorType: 'select',
+        group: 'Formato/Comportamento',
+        defaultValue: 'rgba',
+        options: [
+            { value: 'hex', text: 'HEX' },
+            { value: 'rgb', text: 'RGB' },
+            { value: 'rgba', text: 'RGBA' },
+            { value: 'hsl', text: 'HSL' },
+        ],
+    },
+    // Views e Preview
+    {
+        name: 'views',
+        label: "Views (JSON: ['gradient','palette'])",
+        editorType: 'textarea',
+        group: 'Views/Preview',
+        hint: "JSON array. Ex.: ['gradient','palette']",
+        defaultValue: "['gradient','palette']",
+    },
+    {
+        name: 'activeView',
+        label: 'View ativa',
+        editorType: 'select',
+        group: 'Views/Preview',
+        options: [
+            { value: 'gradient', text: 'Gradient' },
+            { value: 'palette', text: 'Palette' },
+        ],
+    },
+    { name: 'preview', label: 'Mostrar preview (pane)', editorType: 'checkbox', group: 'Views/Preview' },
+    { name: 'clearButton', label: 'Botão Clear', editorType: 'checkbox', group: 'Views/Preview' },
+    {
+        name: 'actionsLayout',
+        label: 'Ações (layout)',
+        editorType: 'select',
+        group: 'Views/Preview',
+        defaultValue: 'end',
+        options: [
+            { value: 'start', text: 'Início' },
+            { value: 'end', text: 'Fim' },
+        ],
+    },
+    // Adaptive e Popup
+    { name: 'adaptiveMode', label: 'Adaptive (BottomSheet/Drawer)', editorType: 'checkbox', group: 'Adaptive/Popup' },
+    { name: 'adaptiveTitle', label: 'Adaptive title', editorType: 'text', group: 'Adaptive/Popup' },
+    { name: 'adaptiveSubtitle', label: 'Adaptive subtitle', editorType: 'text', group: 'Adaptive/Popup' },
+    { name: 'popupSettings.width', label: 'Popup width (px ou CSS)', editorType: 'text', group: 'Adaptive/Popup', defaultValue: '340' },
+    // Gradient
+    { name: 'gradientSettings.showOpacity', label: 'Gradiente: transparência (alpha)', editorType: 'checkbox', group: 'Gradient' },
+    {
+        name: 'gradientSettings.channel',
+        label: 'Gradiente: canal',
+        editorType: 'select',
+        group: 'Gradient',
+        defaultValue: 'hsv',
+        options: [
+            { value: 'hsv', text: 'HSV' },
+            { value: 'hsl', text: 'HSL' },
+        ],
+    },
+    // Palette
+    {
+        name: 'paletteSettings.preset',
+        label: 'Palette: preset',
+        editorType: 'select',
+        group: 'Palette',
+        defaultValue: 'material',
+        options: [
+            { value: 'material', text: 'Material' },
+            { value: 'office', text: 'Office' },
+            { value: 'basic', text: 'Básico' },
+        ],
+    },
+    {
+        name: 'paletteSettings.colors',
+        label: 'Palette: cores (JSON ou linhas)',
+        editorType: 'textarea',
+        group: 'Palette',
+        hint: "JSON array ou uma cor por linha (#hex ou rgba/hsl)",
+    },
+    { name: 'paletteSettings.columns', label: 'Palette: colunas', editorType: 'number', group: 'Palette', defaultValue: 8 },
+    // Tema/Estilo
+    {
+        name: 'fillMode',
+        label: 'Fill mode',
+        editorType: 'select',
+        group: 'Theming',
+        defaultValue: 'solid',
+        options: [
+            { value: 'solid', text: 'Solid' },
+            { value: 'flat', text: 'Flat' },
+            { value: 'outline', text: 'Outline' },
+        ],
+    },
+    {
+        name: 'rounded',
+        label: 'Rounded',
+        editorType: 'select',
+        group: 'Theming',
+        defaultValue: 'medium',
+        options: [
+            { value: 'none', text: 'None' },
+            { value: 'small', text: 'Small' },
+            { value: 'medium', text: 'Medium' },
+            { value: 'large', text: 'Large' },
+            { value: 'full', text: 'Full' },
+        ],
+    },
+    {
+        name: 'size',
+        label: 'Size',
+        editorType: 'select',
+        group: 'Theming',
+        defaultValue: 'medium',
+        options: [
+            { value: 'small', text: 'Small' },
+            { value: 'medium', text: 'Medium' },
+            { value: 'large', text: 'Large' },
+        ],
+    },
+    { name: 'icon', label: 'Ícone', editorType: 'text', group: 'Theming', hint: "Material Symbols (ex.: mi:palette). Use o seletor ao lado para buscar." },
+    { name: 'svgIcon', label: 'SVG icon', editorType: 'text', group: 'Theming' },
+    { name: 'iconClass', label: 'Icon class (JSON/string)', editorType: 'textarea', group: 'Theming', hint: 'string | string[] | Record<string, boolean>' },
+    // Acessibilidade/Comportamento
+    { name: 'tabindex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento' },
+];
+
+const ratingProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'max', label: 'Quantidade de itens', editorType: 'number', group: 'Formato/Comportamento', hint: 'Ex.: 5' },
+    { name: 'allowHalf', label: 'Permitir meio ícone', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'selection', label: 'Modo de seleção', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'continuous', text: 'Contínuo' },
+            { value: 'single', text: 'Único' },
+        ] },
+    { name: 'size', label: 'Tamanho', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'small', text: 'Pequeno' },
+            { value: 'medium', text: 'Médio' },
+            { value: 'large', text: 'Grande' },
+        ] },
+    { name: 'icon', label: 'Ícone preenchido', editorType: 'text', group: 'Formato/Comportamento', hint: 'Material Symbols (ex.: mi:star). Use o seletor ao lado para buscar.' },
+    { name: 'emptyIcon', label: 'Ícone vazio', editorType: 'text', group: 'Formato/Comportamento', hint: 'Material Symbols (ex.: mi:star_border). Use o seletor ao lado para buscar.' },
+    { name: 'svgIcon', label: 'SVG (preenchido)', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'svgIconOutline', label: 'SVG (vazio)', editorType: 'text', group: 'Formato/Comportamento' },
+    // Cores/Comportamento
+    { name: 'ratingColor', label: 'Cor do preenchimento', editorType: 'color', group: 'Formato/Comportamento', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'outlineColor', label: 'Cor do contorno', editorType: 'color', group: 'Formato/Comportamento', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+];
+
+const chipInputProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    // Dados/Opções
+    { name: 'options', label: 'Opções (JSON ou linhas valor|rótulo)', editorType: 'textarea', group: 'Dados/Opções' },
+    { name: 'resourcePath', label: 'Resource Path (remoto)', editorType: 'text', group: 'Dados/Opções', row: 'dados.remoto', inline: true },
+    { name: 'filterCriteria', label: 'Critérios de filtro (JSON)', editorType: 'textarea', group: 'Dados/Opções', hint: '{ "active": true }' },
+    { name: 'optionLabelKey', label: 'Chave do rótulo (remoto)', editorType: 'text', group: 'Dados/Opções', row: 'dados.keys', inline: true },
+    { name: 'optionValueKey', label: 'Chave do valor (remoto)', editorType: 'text', group: 'Dados/Opções', row: 'dados.keys', inline: true },
+    // Formato/Comportamento
+    { name: 'maxSelections', label: 'Máx. seleções', editorType: 'number', group: 'Formato/Comportamento' },
+    { name: 'removable', label: 'Removível', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.flags', inline: true },
+    { name: 'addOnBlur', label: 'Adicionar ao sair', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.flags', inline: true },
+    { name: 'searchable', label: 'Pesquisável', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'minLength', label: 'Mín. caracteres busca', editorType: 'number', group: 'Formato/Comportamento', row: 'comp.search', inline: true },
+    { name: 'validationDebounce', label: 'Debounce busca (ms)', editorType: 'number', group: 'Formato/Comportamento', row: 'comp.search', inline: true },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // Material Design
+    {
+        name: 'materialDesign.appearance',
+        label: 'Aparência',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ],
+    },
+    {
+        name: 'materialDesign.color',
+        label: 'Cor do tema',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ],
+    },
+    {
+        name: 'materialDesign.floatLabel',
+        label: 'Comportamento do label',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'always', text: 'Sempre' },
+        ],
+    },
+    {
+        name: 'materialDesign.subscriptSizing',
+        label: 'Subscript sizing',
+        editorType: 'select',
+        group: 'Material Design',
+        options: [
+            { value: 'fixed', text: 'Fixo' },
+            { value: 'dynamic', text: 'Dinâmico' },
+        ],
+    },
+    { name: 'materialDesign.hideRequiredMarker', label: 'Ocultar * obrigatório', editorType: 'checkbox', group: 'Material Design' },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    { name: 'dataAttributes', label: 'Data attributes (JSON)', editorType: 'textarea', group: 'Acessibilidade', hint: '{ "testId": "chips-a" }' },
+    // Ações (Clear)
+    { name: 'clearButton.enabled', label: 'Clear: habilitar', editorType: 'checkbox', group: 'Ações' },
+    { name: 'clearButton.icon', label: 'Clear: ícone', editorType: 'text', group: 'Ações', hint: "Material Symbols (ex.: mi:clear). Use o seletor ao lado para buscar." },
+    { name: 'clearButton.iconColor', label: 'Clear: cor do ícone', editorType: 'color', group: 'Ações', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'clearButton.tooltip', label: 'Clear: tooltip', editorType: 'text', group: 'Ações' },
+    { name: 'clearButton.ariaLabel', label: 'Clear: aria-label', editorType: 'text', group: 'Ações' },
+    { name: 'clearButton.showOnlyWhenFilled', label: 'Clear: só quando preenchido', editorType: 'checkbox', group: 'Ações' },
+];
+
+const checkboxGroupProperties = [
+    // Dados/Opções
+    { name: 'options', label: 'Opções (JSON ou linhas valor|rótulo)', editorType: 'textarea', group: 'Dados/Opções' },
+    { name: 'resourcePath', label: 'Recurso (remoto)', editorType: 'text', group: 'Dados/Opções', row: 'dados.remoto', inline: true },
+    { name: 'filterCriteria', label: 'Filtro (JSON)', editorType: 'textarea', group: 'Dados/Opções' },
+    { name: 'optionLabelKey', label: 'Chave rótulo', editorType: 'text', group: 'Dados/Opções', row: 'dados.keys', inline: true },
+    { name: 'optionValueKey', label: 'Chave valor', editorType: 'text', group: 'Dados/Opções', row: 'dados.keys', inline: true },
+    // Formato/Comportamento
+    { name: 'searchable', label: 'Pesquisável', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'selectAll', label: 'Selecionar todos', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'maxSelections', label: 'Máx. seleções', editorType: 'number', group: 'Formato/Comportamento' },
+    { name: 'layout', label: 'Layout', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'horizontal', text: 'Horizontal' },
+            { value: 'vertical', text: 'Vertical' },
+        ] },
+    { name: 'labelPosition', label: 'Posição do label', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'before', text: 'Antes' },
+            { value: 'after', text: 'Depois' },
+        ] },
+    { name: 'color', label: 'Cor', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'indeterminate', label: 'Indeterminado', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'linkText', label: 'Texto do link', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'linkUrl', label: 'URL do link', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'linkTarget', label: 'Alvo do link', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: '_self', text: 'Mesma janela' },
+            { value: '_blank', text: 'Nova janela' },
+        ] },
+    // Geral/Validação
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+];
+
+const toggleProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão (boolean)', editorType: 'checkbox', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    // Material Design
+    { name: 'color', label: 'Cor', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    // Formato/Comportamento
+    { name: 'labelPosition', label: 'Posição do label', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'before', text: 'Antes' },
+            { value: 'after', text: 'Depois' },
+        ] },
+    { name: 'hideIcon', label: 'Ocultar ícone', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'disableRipple', label: 'Desabilitar ripple', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    // Validação
+    { name: 'requiredTrue', label: 'Exigir verdadeiro', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredTrueMessage', label: 'Mensagem: exigir verdadeiro', editorType: 'text', group: 'Validação' },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+];
+
+const sliderProperties = [
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'min', label: 'Mínimo', editorType: 'number', group: 'Validação', row: 'val.minmax', inline: true },
+    { name: 'max', label: 'Máximo', editorType: 'number', group: 'Validação', row: 'val.minmax', inline: true },
+    { name: 'validators.minMessage', label: 'Mensagem: mínimo', editorType: 'text', group: 'Validação' },
+    { name: 'validators.maxMessage', label: 'Mensagem: máximo', editorType: 'text', group: 'Validação' },
+    { name: 'step', label: 'Step', editorType: 'number', group: 'Formato/Comportamento' },
+    { name: 'thumbLabel', label: 'Thumb label', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'vertical', label: 'Vertical', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.flags', inline: true },
+    { name: 'showTicks', label: 'Ticks', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: false, text: 'Sem ticks' },
+            { value: true, text: 'Com ticks' },
+            { value: 'auto', text: 'Auto' },
+        ] },
+    { name: 'discrete', label: 'Discreto', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'invert', label: 'Inverter', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.flags', inline: true },
+    { name: 'color', label: 'Cor', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+];
+
+const rangeSliderProperties = [
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'mode', label: 'Modo', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'single', text: 'Único' },
+            { value: 'range', text: 'Faixa' },
+        ] },
+    { name: 'min', label: 'Mínimo', editorType: 'number', group: 'Validação', row: 'val.minmax', inline: true },
+    { name: 'max', label: 'Máximo', editorType: 'number', group: 'Validação', row: 'val.minmax', inline: true },
+    { name: 'validators.minMessage', label: 'Mensagem: mínimo', editorType: 'text', group: 'Validação' },
+    { name: 'validators.maxMessage', label: 'Mensagem: máximo', editorType: 'text', group: 'Validação' },
+    { name: 'step', label: 'Step', editorType: 'number', group: 'Formato/Comportamento' },
+    { name: 'thumbLabel', label: 'Thumb label', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'showTicks', label: 'Ticks', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: false, text: 'Sem ticks' },
+            { value: true, text: 'Com ticks' },
+            { value: 'auto', text: 'Auto' },
+        ] },
+    { name: 'discrete', label: 'Discreto', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'vertical', label: 'Vertical', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'invert', label: 'Inverter', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'minDistance', label: 'Distância mínima', editorType: 'number', group: 'Validação', row: 'val.distance', inline: true },
+    { name: 'maxDistance', label: 'Distância máxima', editorType: 'number', group: 'Validação', row: 'val.distance', inline: true },
+    { name: 'validators.rangeMessage', label: 'Mensagem: ordem do range', editorType: 'text', group: 'Validação' },
+    { name: 'validators.distanceMessage', label: 'Mensagem: distância', editorType: 'text', group: 'Validação' },
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    { name: 'displayWith', label: 'DisplayWith (id função)', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'showInputs', label: 'Mostrar inputs', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'color', label: 'Cor', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+];
+
+const currencyInputProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão', editorType: 'number', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: 'Material Symbols (ex.: mi:...). Use o seletor ao lado para buscar.' },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: 'Material Symbols (ex.: mi:...). Use o seletor ao lado para buscar.' },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'prefix', label: 'Texto (prefixo)', editorType: 'text', group: 'Geral' },
+    { name: 'suffix', label: 'Texto (sufixo)', editorType: 'text', group: 'Geral' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'min', label: 'Mínimo', editorType: 'number', group: 'Validação', row: 'val.minmax', inline: true },
+    { name: 'max', label: 'Máximo', editorType: 'number', group: 'Validação', row: 'val.minmax', inline: true },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    { name: 'validators.minMessage', label: 'Mensagem: mínimo', editorType: 'text', group: 'Validação' },
+    { name: 'validators.maxMessage', label: 'Mensagem: máximo', editorType: 'text', group: 'Validação' },
+    // Formato/Comportamento
+    { name: 'numberFormat.currency', label: 'Moeda', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'numberFormat.currencyPosition', label: 'Posição moeda', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'before', text: 'Antes' },
+            { value: 'after', text: 'Depois' },
+        ] },
+    { name: 'numberFormat.decimalPlaces', label: 'Casas decimais', editorType: 'number', group: 'Formato/Comportamento' },
+    { name: 'numberFormat.locale', label: 'Locale', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'showGrouping', label: 'Agrupar milhares', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    // Material/A11y/Ações
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+    // Sem Clear: componente não implementa botão de limpar
+];
+
+const cpfCnpjProperties = [
+    // Geral
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão', editorType: 'text', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:badge). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'prefix', label: 'Texto (prefixo)', editorType: 'text', group: 'Geral' },
+    { name: 'suffix', label: 'Texto (sufixo)', editorType: 'text', group: 'Geral' },
+    // Validação
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    { name: 'validators.patternMessage', label: 'Mensagem: formato inválido', editorType: 'text', group: 'Validação' },
+    // Formato/Comportamento
+    { name: 'documentType', label: 'Tipo de documento', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'cpf', text: 'CPF' },
+            { value: 'cnpj', text: 'CNPJ' },
+        ] },
+    { name: 'version', label: 'Versão (parsing)', editorType: 'select', group: 'Formato/Comportamento', options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'legacy', text: 'Legacy (numérico)' },
+            { value: 'alpha', text: 'Alpha (alfa-numérico para CNPJ)' },
+        ] },
+    { name: 'allowFormattedInput', label: 'Permitir entrada formatada', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'unmaskOnSubmit', label: 'Enviar sem máscara (modelo)', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'autocomplete', label: 'Autocomplete', editorType: 'text', group: 'Formato/Comportamento' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    // Material Design
+    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fill', text: 'Fill' },
+            { value: 'outline', text: 'Outline' },
+        ] },
+    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Material Design', options: [
+            { value: 'primary', text: 'Primária' },
+            { value: 'accent', text: 'Acento' },
+            { value: 'warn', text: 'Alerta' },
+        ] },
+    { name: 'materialDesign.floatLabel', label: 'Comportamento do label', editorType: 'select', group: 'Material Design', options: [
+            { value: 'auto', text: 'Auto' },
+            { value: 'always', text: 'Sempre' },
+        ] },
+    { name: 'materialDesign.subscriptSizing', label: 'Subscript sizing', editorType: 'select', group: 'Material Design', options: [
+            { value: 'fixed', text: 'Fixo' },
+            { value: 'dynamic', text: 'Dinâmico' },
+        ] },
+    { name: 'materialDesign.hideRequiredMarker', label: 'Ocultar * obrigatório', editorType: 'checkbox', group: 'Material Design' },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+];
+
+const fileUploadProperties = [
+    // Dados/Opções
+    { name: 'accept', label: 'Tipos aceitos (mimes/ext.)', editorType: 'text', group: 'Dados/Opções' },
+    { name: 'multiple', label: 'Múltiplos arquivos', editorType: 'checkbox', group: 'Dados/Opções' },
+    { name: 'maxSizeMB', label: 'Tamanho máx (MB)', editorType: 'number', group: 'Dados/Opções' },
+    { name: 'resourcePath', label: 'Recurso', editorType: 'text', group: 'Dados/Opções' },
+    { name: 'uploadUrl', label: 'Upload URL', editorType: 'text', group: 'Dados/Opções' },
+    { name: 'filterCriteria', label: 'Filtro (JSON)', editorType: 'textarea', group: 'Dados/Opções' },
+    // Geral/Validação
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    // Acessibilidade
+    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade' },
+    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade' },
+];
+
+const yearInputProperties = [
+    { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
+    { name: 'defaultValue', label: 'Valor padrão (YYYY)', editorType: 'number', group: 'Geral' },
+    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
+    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral' },
+    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:calendar_month). Use o seletor ao lado para buscar." },
+    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Geral', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
+    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Geral', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
+    // Validação/Comportamento
+    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    { name: 'minYear', label: 'Ano mínimo', editorType: 'number', group: 'Validação', row: 'val.minmax', inline: true },
+    { name: 'maxYear', label: 'Ano máximo', editorType: 'number', group: 'Validação', row: 'val.minmax', inline: true },
+    { name: 'step', label: 'Step', editorType: 'number', group: 'Formato/Comportamento' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento' },
+];
+
+/** Garante que minLength <= maxLength quando ambos definidos. */
+function minLenLeMaxLen(group) {
+    const v = group.value || {};
+    const min = v?.minLength;
+    const max = v?.maxLength;
+    if (min != null && max != null && Number(min) > Number(max)) {
+        return { minLengthGtMaxLength: true };
+    }
+    return null;
+}
+
+class FieldMetadataEditorComponent {
+    registry;
+    normalizer;
+    factory;
+    ctxValidators;
+    controlType;
+    seed;
+    applied = new EventEmitter();
+    cancel = new EventEmitter();
+    form;
+    normalizedProps = [];
+    initialSnapshot = null;
+    baselineReady = false;
+    // Lista de tipos suportados no editor (curada para os tipos com config disponível)
+    typeOptions = [
+        { value: FieldControlType.INPUT, label: 'Texto (Input)' },
+        { value: FieldControlType.TEXTAREA, label: 'Texto longo (Textarea)' },
+        { value: FieldControlType.NUMERIC_TEXT_BOX, label: 'Número' },
+        { value: FieldControlType.CURRENCY_INPUT, label: 'Moeda' },
+        { value: FieldControlType.EMAIL_INPUT, label: 'E-mail' },
+        { value: FieldControlType.PASSWORD, label: 'Senha' },
+        { value: FieldControlType.URL_INPUT, label: 'URL' },
+        { value: FieldControlType.SEARCH_INPUT, label: 'Busca' },
+        { value: FieldControlType.PHONE, label: 'Telefone' },
+        { value: FieldControlType.SELECT, label: 'Seleção (Select)' },
+        { value: FieldControlType.MULTI_SELECT, label: 'Seleção múltipla' },
+        { value: FieldControlType.AUTO_COMPLETE, label: 'Auto-completar' },
+        { value: FieldControlType.SELECTION_LIST, label: 'Lista de seleção' },
+        { value: FieldControlType.TREE_SELECT, label: 'Árvore (Tree Select)' },
+        { value: FieldControlType.MULTI_SELECT_TREE, label: 'Árvore múltipla' },
+        { value: FieldControlType.RADIO, label: 'Opções (Radio)' },
+        { value: FieldControlType.BUTTON_TOGGLE, label: 'Alternador (Button Toggle)' },
+        { value: FieldControlType.CHECKBOX, label: 'Caixa de seleção' },
+        { value: FieldControlType.TOGGLE, label: 'Liga/Desliga (Toggle)' },
+        { value: FieldControlType.SLIDER, label: 'Slider' },
+        { value: FieldControlType.RANGE_SLIDER, label: 'Slider (intervalo)' },
+        { value: FieldControlType.DATE_INPUT, label: 'Data (Input)' },
+        { value: FieldControlType.DATE_RANGE, label: 'Intervalo de data' },
+        { value: FieldControlType.DATETIME_LOCAL_INPUT, label: 'Data e Hora (local)' },
+        { value: FieldControlType.TIME_INPUT, label: 'Hora (Input)' },
+        { value: FieldControlType.TIME_PICKER, label: 'Hora (Picker)' },
+        { value: FieldControlType.TIME_RANGE, label: 'Intervalo de hora' },
+        { value: FieldControlType.MONTH_INPUT, label: 'Mês' },
+        { value: FieldControlType.WEEK_INPUT, label: 'Semana' },
+        { value: FieldControlType.YEAR_INPUT, label: 'Ano' },
+        { value: FieldControlType.COLOR_INPUT, label: 'Cor (Input)' },
+        { value: FieldControlType.COLOR_PICKER, label: 'Cor (Picker)' },
+        { value: FieldControlType.RATING, label: 'Avaliação (Rating)' },
+        { value: FieldControlType.CHIP_INPUT, label: 'Chips' },
+        { value: FieldControlType.TRANSFER_LIST, label: 'Transferência de itens' },
+        { value: FieldControlType.CPF_CNPJ_INPUT, label: 'CPF/CNPJ' },
+        { value: FieldControlType.FILE_UPLOAD, label: 'Upload de Arquivo' },
+    ];
+    // Settings Panel integration (contract: isDirty$, isValid$, isBusy$)
+    isDirty$ = new BehaviorSubject(false);
+    isValid$ = new BehaviorSubject(true);
+    isBusy$ = new BehaviorSubject(false);
+    constructor(registry, normalizer, factory, ctxValidators) {
+        this.registry = registry;
+        this.normalizer = normalizer;
+        this.factory = factory;
+        this.ctxValidators = ctxValidators;
+        // Support SETTINGS_PANEL_DATA injection as input fallback
+        const data = inject(SETTINGS_PANEL_DATA, { optional: true });
+        if (data) {
+            if (data.controlType)
+                this.controlType = data.controlType;
+            if (data.seed)
+                this.seed = data.seed;
+            // Bridge: allow host to receive patches even if saved$/applied$ are missed
+            try {
+                this.__hostApplyPatch = data.hostBridge?.applyPatch;
+            }
+            catch { }
+        }
+    }
+    ngOnInit() {
+        try {
+            const hasBridge = typeof this.__hostApplyPatch === 'function';
+            (console.log || console.debug)('[FieldMetadataEditor] ngOnInit', { controlType: this.controlType, hasHostBridge: hasBridge });
+        }
+        catch { }
+        this.rebuildEditorForType(this.controlType);
+    }
+    rebuildEditorForType(ct) {
+        this.controlType = ct;
+        let props = this.registry.getProperties(this.controlType);
+        try {
+            (console.log || console.debug)('[FieldMetadataEditor] init', {
+                controlType: this.controlType,
+                seedPreview: {
+                    resourcePath: this.seed?.resourcePath,
+                    optionLabelKey: this.seed?.optionLabelKey,
+                    optionValueKey: this.seed?.optionValueKey,
+                    filterCriteria: typeof this.seed?.filterCriteria === 'string'
+                        ? this.seed?.filterCriteria
+                        : this.seed?.filterCriteria != null
+                            ? JSON.stringify(this.seed?.filterCriteria)
+                            : undefined,
+                },
+                propsBefore: props.map((p) => p.name),
+            });
+        }
+        catch { }
+        // Fallback de registro mínimo para facilitar execução inicial
+        if (!props.length) {
+            if (this.controlType === FieldControlType.INPUT) {
+                this.registry.register(this.controlType, inputProperties);
+                props = inputProperties;
+            }
+            else if (
+            // Aliases for select-like
+            this.controlType === 'searchable-select' ||
+                this.controlType === 'async-select') {
+                this.registry.register(this.controlType, selectProperties);
+                props = selectProperties;
+            }
+            else if (this.controlType === FieldControlType.NUMERIC_TEXT_BOX) {
+                this.registry.register(this.controlType, numberProperties);
+                props = numberProperties;
+            }
+            else if (this.controlType === FieldControlType.DATE_PICKER) {
+                this.registry.register(this.controlType, dateProperties);
+                props = dateProperties;
+            }
+            else if (this.controlType === FieldControlType.DATE_INPUT) {
+                this.registry.register(this.controlType, dateInputProperties);
+                props = dateInputProperties;
+            }
+            else if (this.controlType === FieldControlType.DATE_RANGE) {
+                this.registry.register(this.controlType, dateRangeProperties);
+                props = dateRangeProperties;
+            }
+            else if (this.controlType === FieldControlType.DATETIME_LOCAL_INPUT) {
+                this.registry.register(this.controlType, datetimeLocalProperties);
+                props = datetimeLocalProperties;
+            }
+            else if (this.controlType === FieldControlType.TIME_INPUT) {
+                this.registry.register(this.controlType, timeInputProperties);
+                props = timeInputProperties;
+            }
+            else if (this.controlType === FieldControlType.TIME_PICKER) {
+                this.registry.register(this.controlType, timePickerProperties);
+                props = timePickerProperties;
+            }
+            else if (this.controlType === FieldControlType.TIME_RANGE) {
+                this.registry.register(this.controlType, timeRangeProperties);
+                props = timeRangeProperties;
+            }
+            else if (this.controlType === FieldControlType.MONTH_INPUT) {
+                this.registry.register(this.controlType, monthInputProperties);
+                props = monthInputProperties;
+            }
+            else if (this.controlType === FieldControlType.WEEK_INPUT) {
+                this.registry.register(this.controlType, weekInputProperties);
+                props = weekInputProperties;
+            }
+            else if (this.controlType === FieldControlType.EMAIL_INPUT) {
+                this.registry.register(this.controlType, emailInputProperties);
+                props = emailInputProperties;
+            }
+            else if (this.controlType === FieldControlType.PASSWORD) {
+                this.registry.register(this.controlType, passwordInputProperties);
+                props = passwordInputProperties;
+            }
+            else if (this.controlType === FieldControlType.URL_INPUT) {
+                this.registry.register(this.controlType, urlInputProperties);
+                props = urlInputProperties;
+            }
+            else if (this.controlType === FieldControlType.SEARCH_INPUT) {
+                this.registry.register(this.controlType, searchInputProperties);
+                props = searchInputProperties;
+            }
+            else if (this.controlType === FieldControlType.PHONE) {
+                this.registry.register(this.controlType, phoneInputProperties);
+                props = phoneInputProperties;
+            }
+            else if (this.controlType === FieldControlType.COLOR_INPUT) {
+                this.registry.register(this.controlType, colorInputProperties);
+                props = colorInputProperties;
+            }
+            else if (this.controlType === FieldControlType.COLOR_PICKER) {
+                this.registry.register(this.controlType, colorPickerProperties);
+                props = colorPickerProperties;
+            }
+            else if (this.controlType === FieldControlType.RATING) {
+                this.registry.register(this.controlType, ratingProperties);
+                props = ratingProperties;
+            }
+            else if (this.controlType === FieldControlType.SELECT ||
+                this.controlType === FieldControlType.MULTI_SELECT ||
+                this.controlType === FieldControlType.AUTO_COMPLETE ||
+                this.controlType === FieldControlType.SELECTION_LIST) {
+                this.registry.register(this.controlType, selectProperties);
+                props = selectProperties;
+            }
+            else if (this.controlType === FieldControlType.TEXTAREA) {
+                this.registry.register(this.controlType, textareaProperties);
+                props = textareaProperties;
+            }
+            else if (this.controlType === FieldControlType.TRANSFER_LIST) {
+                this.registry.register(this.controlType, transferListProperties);
+                props = transferListProperties;
+            }
+            else if (this.controlType === FieldControlType.RADIO) {
+                this.registry.register(this.controlType, radioProperties);
+                props = radioProperties;
+            }
+            else if (this.controlType === FieldControlType.BUTTON_TOGGLE) {
+                this.registry.register(this.controlType, buttonToggleProperties);
+                props = buttonToggleProperties;
+            }
+            else if (this.controlType === FieldControlType.CHIP_INPUT) {
+                this.registry.register(this.controlType, chipInputProperties);
+                props = chipInputProperties;
+            }
+            else if (this.controlType === FieldControlType.CHECKBOX) {
+                this.registry.register(this.controlType, checkboxGroupProperties);
+                props = checkboxGroupProperties;
+            }
+            else if (this.controlType === FieldControlType.TOGGLE) {
+                this.registry.register(this.controlType, toggleProperties);
+                props = toggleProperties;
+            }
+            else if (this.controlType === FieldControlType.SLIDER) {
+                this.registry.register(this.controlType, sliderProperties);
+                props = sliderProperties;
+            }
+            else if (this.controlType === FieldControlType.RANGE_SLIDER) {
+                this.registry.register(this.controlType, rangeSliderProperties);
+                props = rangeSliderProperties;
+            }
+            else if (this.controlType === FieldControlType.CURRENCY_INPUT) {
+                this.registry.register(this.controlType, currencyInputProperties);
+                props = currencyInputProperties;
+            }
+            else if (this.controlType === FieldControlType.CPF_CNPJ_INPUT) {
+                this.registry.register(this.controlType, cpfCnpjProperties);
+                props = cpfCnpjProperties;
+            }
+            else if (this.controlType === FieldControlType.FILE_UPLOAD) {
+                this.registry.register(this.controlType, fileUploadProperties);
+                props = fileUploadProperties;
+            }
+            else if (this.controlType === FieldControlType.YEAR_INPUT) {
+                this.registry.register(this.controlType, yearInputProperties);
+                props = yearInputProperties;
+            }
+            else if (this.controlType === FieldControlType.TREE_SELECT ||
+                this.controlType === FieldControlType.MULTI_SELECT_TREE) {
+                this.registry.register(this.controlType, treeSelectProperties);
+                props = treeSelectProperties;
+            }
+        }
+        try {
+            (console.log || console.debug)('[FieldMetadataEditor] props after registry resolution', {
+                resolvedProps: props.map((p) => p.name),
+            });
+        }
+        catch { }
+        // Inject controlType selector into 'Geral' group so users can change field type
+        try {
+            const typeProp = {
+                name: 'controlType',
+                label: 'Tipo de campo',
+                editorType: 'select',
+                group: 'Geral',
+                // Destaque visual e aviso claro sobre risco
+                prefixIcon: 'warning',
+                hint: '⚠️ Alterar o tipo de campo NÃO altera o tipo de dado na API. ' +
+                    'Isso pode causar erro ao salvar se o formato esperado for diferente.',
+                options: this.typeOptions.map((o) => ({ value: o.value, text: o.label })),
+                defaultValue: this.controlType,
+            };
+            props = [typeProp, ...props];
+        }
+        catch { }
+        this.normalizedProps = this.normalizer.normalize(props, this.seed);
+        try {
+            console.debug('[FieldMetadataEditor] normalized props', {
+                propNames: this.normalizedProps.map((p) => p.name),
+                defaults: this.normalizedProps
+                    .filter((p) => ['resourcePath', 'filterCriteria', 'optionLabelKey', 'optionValueKey'].includes(p.name))
+                    .map((p) => ({ name: p.name, defaultValue: p.defaultValue })),
+                optionsDefault: (() => {
+                    const opt = this.normalizedProps.find((p) => p.name === 'options');
+                    if (!opt)
+                        return undefined;
+                    const v = opt.defaultValue;
+                    return {
+                        type: v == null ? 'null' : typeof v,
+                        preview: typeof v === 'string' ? String(v).slice(0, 80) : undefined,
+                        lengthOrCount: Array.isArray(v)
+                            ? v.length
+                            : (typeof v === 'string' ? v.length : undefined),
+                    };
+                })(),
+            });
+        }
+        catch { }
+        // Inject default for providerOptions from seed.options when present (radio/editor-friendly name)
+        try {
+            const hasProviderOptions = this.normalizedProps.some((p) => p.name === 'providerOptions');
+            const seedOptions = this.seed?.options;
+            if (hasProviderOptions && seedOptions !== undefined) {
+                const v = typeof seedOptions === 'string' ? seedOptions : (() => { try {
+                    return JSON.stringify(seedOptions, null, 2);
+                }
+                catch {
+                    return String(seedOptions);
+                } })();
+                this.normalizedProps = this.normalizedProps.map((p) => p.name === 'providerOptions' && p.defaultValue === undefined ? { ...p, defaultValue: v } : p);
+                (console.log || console.debug)('[FieldMetadataEditor] providerOptions default injected from seed.options', {
+                    type: typeof seedOptions,
+                    lengthOrCount: Array.isArray(seedOptions) ? seedOptions.length : (typeof seedOptions === 'string' ? seedOptions.length : undefined),
+                });
+            }
+        }
+        catch { }
+        // Register contextual validators for INPUT/TEXTAREA (minLength <= maxLength)
+        if (this.controlType === FieldControlType.INPUT ||
+            this.controlType === FieldControlType.TEXTAREA) {
+            const existing = this.ctxValidators.get(this.controlType);
+            if (!existing.includes(minLenLeMaxLen)) {
+                this.ctxValidators.register(this.controlType, minLenLeMaxLen);
+            }
+        }
+        this.form = this.factory.createEditorForm(this.controlType, this.normalizedProps, this.seed);
+        // Apply seed values into the form controls (only non-null/undefined)
+        try {
+            const getByPath = (obj, path) => {
+                if (!obj || typeof obj !== 'object')
+                    return undefined;
+                if (!path || typeof path !== 'string')
+                    return undefined;
+                const parts = path.split('.');
+                let curr = obj;
+                for (const k of parts) {
+                    if (curr == null)
+                        return undefined;
+                    curr = curr[k];
+                }
+                return curr;
+            };
+            const subset = {};
+            for (const p of this.normalizedProps || []) {
+                const name = p?.name;
+                if (!name)
+                    continue;
+                const val = getByPath(this.seed, name);
+                // Preserve false/0; skip only null/undefined
+                if (val !== undefined && val !== null) {
+                    this.factory.setValueByPath(this.form, name, val);
+                    subset[name] = val;
+                }
+            }
+            // Also patch the form in a single call to ensure UI reflects values immediately
+            try {
+                this.form.patchValue(subset, { emitEvent: false });
+            }
+            catch { }
+            // Diagnostics for Rating seeding after applying seed → form
+            try {
+                const ctU = String(this.controlType || '').toUpperCase();
+                if (ctU === String(FieldControlType.RATING)) {
+                    const pick = (k) => this.form.get(k)?.value;
+                    console.debug('[FieldMetadataEditor][RATING] seeded form values', {
+                        max: pick('max'),
+                        allowHalf: pick('allowHalf'),
+                        selection: pick('selection'),
+                        size: pick('size'),
+                        icon: pick('icon'),
+                        emptyIcon: pick('emptyIcon'),
+                        svgIcon: pick('svgIcon'),
+                        svgIconOutline: pick('svgIconOutline'),
+                        ratingColor: pick('ratingColor'),
+                        outlineColor: pick('outlineColor'),
+                        readonly: pick('readonly'),
+                        tabIndex: pick('tabIndex'),
+                        ariaLabel: pick('ariaLabel'),
+                    });
+                }
+            }
+            catch { }
+        }
+        catch { }
+        // Diagnostics: dump initial values for Rating editor
+        try {
+            const ctU = String(this.controlType || '').toUpperCase();
+            if (ctU === String(FieldControlType.RATING)) {
+                const pick = (k) => this.form.get(k)?.value;
+                console.debug('[FieldMetadataEditor][RATING] initial form values', {
+                    max: pick('max'),
+                    allowHalf: pick('allowHalf'),
+                    selection: pick('selection'),
+                    size: pick('size'),
+                    icon: pick('icon'),
+                    emptyIcon: pick('emptyIcon'),
+                    svgIcon: pick('svgIcon'),
+                    svgIconOutline: pick('svgIconOutline'),
+                    ratingColor: pick('ratingColor'),
+                    outlineColor: pick('outlineColor'),
+                    readonly: pick('readonly'),
+                    tabIndex: pick('tabIndex'),
+                    ariaLabel: pick('ariaLabel'),
+                });
+            }
+        }
+        catch { }
+        // track validity/dirty with snapshot-based detection (avoid false dirty on init)
+        this.isValid$.next(this.form.valid);
+        this.form.statusChanges.subscribe(() => this.isValid$.next(this.form.valid));
+        this.form.valueChanges.subscribe((val) => {
+            if (!this.baselineReady) {
+                // Ignore initial churn until baseline is captured
+                return;
+            }
+            if (this.initialSnapshot == null) {
+                this.initialSnapshot = val;
+                if (this.isDirty$.value)
+                    this.isDirty$.next(false);
+                try {
+                    (console.log || console.debug)('[FieldMetadataEditor] baseline set from first stable value');
+                }
+                catch { }
+                return;
+            }
+            let same = false;
+            try {
+                same = JSON.stringify(val) === JSON.stringify(this.initialSnapshot);
+            }
+            catch {
+                same = false;
+            }
+            const dirty = !same;
+            if (dirty !== this.isDirty$.value) {
+                try {
+                    (console.log || console.debug)('[FieldMetadataEditor] dirty ->', dirty);
+                }
+                catch { }
+                this.isDirty$.next(dirty);
+            }
+        });
+        // Defer baseline capture until next tick to absorb any programmatic value patches
+        setTimeout(() => {
+            try {
+                this.initialSnapshot = this.form.getRawValue();
+                this.baselineReady = true;
+                if (this.isDirty$.value)
+                    this.isDirty$.next(false);
+                (console.log || console.debug)('[FieldMetadataEditor] baseline captured (deferred)');
+            }
+            catch {
+                this.baselineReady = true;
+            }
+        }, 0);
+    }
+    apply() {
+        const raw = this.factory.extractPatch(this.form);
+        const patch = this.buildDeltaPatch(raw, this.initialSnapshot);
+        // Map editor-friendly 'providerOptions' back to canonical 'options'
+        if (patch && patch.providerOptions !== undefined && patch.options === undefined) {
+            patch.options = patch.providerOptions;
+            delete patch.providerOptions;
+        }
+        // Sempre incluir controlType no patch quando presente
+        patch.controlType = this.controlType;
+        try {
+            console.debug('[FieldMetadataEditor] apply() patch', patch);
+        }
+        catch { }
+        try {
+            const fn = this.__hostApplyPatch;
+            if (typeof fn === 'function')
+                fn(patch);
+        }
+        catch { }
+        this.applied.emit(patch);
+    }
+    onSave() {
+        return this.getSettingsValue();
+    }
+    // Settings Panel value provider API
+    getSettingsValue() {
+        const raw = this.factory.extractPatch(this.form);
+        const patch = this.buildDeltaPatch(raw, this.initialSnapshot);
+        if (patch && patch.providerOptions !== undefined && patch.options === undefined) {
+            patch.options = patch.providerOptions;
+            delete patch.providerOptions;
+        }
+        patch.controlType = this.controlType;
+        try {
+            console.debug('[FieldMetadataEditor] getSettingsValue() patch', patch);
+        }
+        catch { }
+        return patch;
+    }
+    /**
+     * Constrói um patch delta a partir do valor atual do form, removendo
+     * chaves não alteradas e valores nulos/strings vazias (exceto boolean/zero).
+     */
+    buildDeltaPatch(current, baseline) {
+        try {
+            const isObject = (v) => v != null && typeof v === 'object' && !Array.isArray(v);
+            const changed = {};
+            const keys = Object.keys(current || {});
+            for (const k of keys) {
+                const cv = current[k];
+                const bv = baseline ? baseline[k] : undefined;
+                const isNullish = cv === null || cv === undefined;
+                const isEmptyString = typeof cv === 'string' && cv.trim() === '';
+                // Preservar false/0 explicitamente; descartar null/undefined e strings vazias
+                if (isNullish || isEmptyString)
+                    continue;
+                if (isObject(cv)) {
+                    const nested = this.buildDeltaPatch(cv, isObject(bv) ? bv : undefined);
+                    if (nested && Object.keys(nested).length)
+                        changed[k] = nested;
+                }
+                else {
+                    // Incluir apenas se mudou em relação ao baseline ou se baseline não existe
+                    if (baseline === null || baseline === undefined || cv !== bv) {
+                        changed[k] = cv;
+                    }
+                }
+            }
+            return changed;
+        }
+        catch {
+            // Fallback: retornar current quando algo falhar (melhor do que perder patch)
+            return current;
+        }
+    }
+    reset() {
+        this.form.reset(this.factory.extractPatch(this.form));
+        this.isDirty$.next(false);
+    }
+    onControlTypeChange(next) {
+        this.rebuildEditorForType(next);
+        this.isDirty$.next(true);
+    }
+    // Template-safe change handler (avoid TS casts in template)
+    onControlTypeChangeEvent(event) {
+        const value = event.target?.value;
+        if (value != null)
+            this.onControlTypeChange(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FieldMetadataEditorComponent, deps: [{ token: ConfigRegistryService }, { token: SchemaNormalizerService }, { token: DynamicFormFactoryService }, { token: ContextValidatorRegistryService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: FieldMetadataEditorComponent, isStandalone: true, selector: "praxis-field-metadata-editor", inputs: { controlType: "controlType", seed: "seed" }, outputs: { applied: "applied", cancel: "cancel" }, ngImport: i0, template: `
+    <div class="p-3" *ngIf="form">
+      <praxis-dynamic-editor-renderer
+        [properties]="normalizedProps"
+        [form]="form"
+      ></praxis-dynamic-editor-renderer>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: DynamicEditorRendererComponent, selector: "praxis-dynamic-editor-renderer", inputs: ["properties", "form"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FieldMetadataEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'praxis-field-metadata-editor',
+                    standalone: true,
+                    imports: [CommonModule, ReactiveFormsModule, DynamicEditorRendererComponent],
+                    template: `
+    <div class="p-3" *ngIf="form">
+      <praxis-dynamic-editor-renderer
+        [properties]="normalizedProps"
+        [form]="form"
+      ></praxis-dynamic-editor-renderer>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: ConfigRegistryService }, { type: SchemaNormalizerService }, { type: DynamicFormFactoryService }, { type: ContextValidatorRegistryService }], propDecorators: { controlType: [{
+                type: Input
+            }], seed: [{
+                type: Input
+            }], applied: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }] } });
+
+class CascadeRulesService {
+    getFieldLabelMap(fields) {
+        const map = new Map();
+        fields.forEach((f) => map.set(f.name, f.label || f.name));
+        return map;
+    }
+    hydrateRule(field) {
+        const deps = field.dependencyFields;
+        if (!deps || deps.length === 0)
+            return null;
+        const vm = {
+            targetField: field.name,
+            dependencyFields: [...deps],
+            enableDependencyCascade: field.enableDependencyCascade === false ? false : true,
+            resetOnDependentChange: !!field.resetOnDependentChange,
+            dependencyFilterMap: field.dependencyFilterMap || null,
+            dependencyValuePath: field.dependencyValuePath || null,
+            dependencyMergeStrategy: field.dependencyMergeStrategy || 'merge',
+            dependencyDebounceMs: field.dependencyDebounceMs != null
+                ? Number(field.dependencyDebounceMs)
+                : 150,
+            dependencyLoadOnChange: field.dependencyLoadOnChange || 'respectLoadOn',
+        };
+        return vm;
+    }
+    dehydratePatch(rule) {
+        const patch = {
+            dependencyFields: rule.dependencyFields,
+            enableDependencyCascade: rule.enableDependencyCascade,
+            resetOnDependentChange: rule.resetOnDependentChange,
+            dependencyMergeStrategy: rule.dependencyMergeStrategy || 'merge',
+            dependencyLoadOnChange: rule.dependencyLoadOnChange || 'respectLoadOn',
+        };
+        if (rule.dependencyFilterMap != null)
+            patch.dependencyFilterMap = rule.dependencyFilterMap;
+        if (rule.dependencyValuePath != null)
+            patch.dependencyValuePath = rule.dependencyValuePath;
+        if (rule.dependencyDebounceMs != null)
+            patch.dependencyDebounceMs = Number(rule.dependencyDebounceMs);
+        return patch;
+    }
+    /** Suggest a basic mapping dep->dep and a default valuePath */
+    suggest(rule, inferredValueKey) {
+        const map = {};
+        (rule.dependencyFields || []).forEach((dep) => (map[dep] = dep));
+        return {
+            ...rule,
+            dependencyFilterMap: Object.keys(map).length ? map : rule.dependencyFilterMap,
+            dependencyValuePath: rule.dependencyValuePath || inferredValueKey || 'id',
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CascadeRulesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CascadeRulesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CascadeRulesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class CascadeManagerTabComponent {
+    svc;
+    fields = [];
+    connections; // optional signal for conflicts
+    apply = new EventEmitter();
+    cancel = new EventEmitter();
+    searchTerm = '';
+    searchTimer = null;
+    searchValue = '';
+    rules = signal(new Map(), ...(ngDevMode ? [{ debugName: "rules" }] : []));
+    selectedFieldSig = signal(null, ...(ngDevMode ? [{ debugName: "selectedFieldSig" }] : []));
+    // Inline editor state (MVP)
+    editing = signal(false, ...(ngDevMode ? [{ debugName: "editing" }] : []));
+    editDepCsv = '';
+    editEnable = true;
+    editReset = false;
+    editMerge = 'merge';
+    editLoadOn = 'respectLoadOn';
+    editDebounce = 150;
+    editValuePath = '';
+    editFilterMapJson = '';
+    importMode = false;
+    importJson = '';
+    editMapRows = [];
+    constructor(svc) {
+        this.svc = svc;
+    }
+    ngOnInit() {
+        // hydrate from input fields
+        const map = new Map();
+        for (const f of this.fields) {
+            const vm = this.svc.hydrateRule(f);
+            if (vm)
+                map.set(f.name, vm);
+        }
+        this.rules.set(map);
+        if (!this.selectedFieldSig() && this.fields.length) {
+            this.selectedFieldSig.set(this.fields[0].name);
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['fields'] && !changes['fields'].firstChange) {
+            // Re-hydrate rules from incoming fields while preserving existing ones when possible
+            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
+            const sel = this.selectedField();
+            if (sel && !incoming.some((f) => f.name === sel)) {
+                this.selectedFieldSig.set(incoming[0]?.name ?? null);
+            }
+        }
+    }
+    filteredFields() {
+        const q = (this.searchValue || '').toLowerCase();
+        const labelMap = this.svc.getFieldLabelMap(this.fields);
+        return 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));
+    }
+    labelFor(name) {
+        return this.svc.getFieldLabelMap(this.fields).get(name) || name;
+    }
+    selectedField() {
+        return this.selectedFieldSig();
+    }
+    selectField(name) {
+        this.selectedFieldSig.set(name);
+        this.editing.set(false);
+    }
+    hasRule(name) {
+        return this.rules().has(name);
+    }
+    ruleFor(name) {
+        return this.rules().get(name) || null;
+    }
+    isCascadeEnabled(name) {
+        return (this.ruleFor(name)?.enableDependencyCascade ?? true) === true;
+    }
+    loadOnChange(name) {
+        return this.ruleFor(name)?.dependencyLoadOnChange || 'respectLoadOn';
+    }
+    hasConflict(name) {
+        if (!this.connections)
+            return false;
+        return this.connections.some((c) => c.toFieldName === name && (c.toInputPath || '').includes('filterCriteria'));
+    }
+    startEdit(name) {
+        const existing = this.ruleFor(name);
+        const base = existing || {
+            targetField: name,
+            dependencyFields: [],
+            enableDependencyCascade: true,
+            resetOnDependentChange: false,
+            dependencyFilterMap: {},
+            dependencyValuePath: 'id',
+            dependencyMergeStrategy: 'merge',
+            dependencyDebounceMs: 150,
+            dependencyLoadOnChange: 'respectLoadOn',
+        };
+        const suggested = this.svc.suggest(base, 'id');
+        // Bind to inline editor
+        this.editDepCsv = suggested.dependencyFields.join(',');
+        this.editEnable = suggested.enableDependencyCascade;
+        this.editReset = suggested.resetOnDependentChange;
+        this.editMerge = suggested.dependencyMergeStrategy || 'merge';
+        this.editLoadOn = suggested.dependencyLoadOnChange || 'respectLoadOn';
+        this.editDebounce = suggested.dependencyDebounceMs ?? 150;
+        this.editValuePath = (typeof suggested.dependencyValuePath === 'string' ? suggested.dependencyValuePath : 'id') || '';
+        try {
+            this.editFilterMapJson = suggested.dependencyFilterMap ? JSON.stringify(suggested.dependencyFilterMap, null, 2) : '';
+        }
+        catch {
+            this.editFilterMapJson = '';
+        }
+        // Build mapping rows from dependencies
+        this.buildMapRowsFromDeps();
+        this.editing.set(true);
+    }
+    edit(name) { this.startEdit(name); }
+    cancelEdit() { this.editing.set(false); }
+    saveEdit(name) {
+        // Build rule from editor
+        const deps = (this.editDepCsv || '')
+            .split(',')
+            .map((s) => s.trim())
+            .filter((s) => !!s && s !== name);
+        // Build map from rows; fallback to JSON when provided
+        let map = {};
+        this.editMapRows.forEach((r) => { if (!r.key && r.dep)
+            r.key = r.dep; if (r.dep)
+            map[r.dep] = r.valuePath ? { key: r.key || r.dep, valuePath: r.valuePath } : (r.key || r.dep); });
+        const raw = (this.editFilterMapJson || '').trim();
+        if (raw) {
+            try {
+                const fromJson = JSON.parse(raw);
+                map = { ...map, ...fromJson };
+            }
+            catch {
+                alert('Mapeamento de filtros inválido (JSON)');
+                return;
+            }
+        }
+        const rule = {
+            targetField: name,
+            dependencyFields: deps,
+            enableDependencyCascade: this.editEnable,
+            resetOnDependentChange: this.editReset,
+            dependencyFilterMap: map,
+            dependencyValuePath: this.buildValuePathOverrides(deps),
+            dependencyMergeStrategy: this.editMerge,
+            dependencyDebounceMs: this.editDebounce ?? 150,
+            dependencyLoadOnChange: this.editLoadOn,
+        };
+        const next = new Map(this.rules());
+        next.set(name, rule);
+        this.rules.set(next);
+        this.emitPatch();
+        this.editing.set(false);
+    }
+    remove(name) {
+        const next = new Map(this.rules());
+        next.delete(name);
+        this.rules.set(next);
+        // Removing means clearing the cascade-related keys; send empty patch
+        const patch = {
+            [name]: {
+                dependencyFields: [],
+                enableDependencyCascade: false,
+                resetOnDependentChange: false,
+                dependencyFilterMap: undefined,
+                dependencyValuePath: undefined,
+                dependencyMergeStrategy: undefined,
+                dependencyDebounceMs: undefined,
+                dependencyLoadOnChange: undefined,
+            },
+        };
+        this.apply.emit(patch);
+    }
+    quickSet(name, action) {
+        const current = this.ruleFor(name);
+        if (!current)
+            return;
+        const next = { ...current };
+        if (action === 'disable')
+            next.enableDependencyCascade = false;
+        if (action === 'manual')
+            next.dependencyLoadOnChange = 'manual';
+        const map = new Map(this.rules());
+        map.set(name, next);
+        this.rules.set(map);
+        this.emitPatch();
+    }
+    emitPatch() {
+        const out = {};
+        for (const [name, rule] of this.rules()) {
+            out[name] = this.svc.dehydratePatch(rule);
+        }
+        this.apply.emit(out);
+    }
+    // Phase 2 helpers
+    onSearchChange(val) {
+        this.searchTerm = val;
+        if (this.searchTimer)
+            clearTimeout(this.searchTimer);
+        this.searchTimer = setTimeout(() => (this.searchValue = this.searchTerm), 150);
+    }
+    onFieldKeydown(event, name) {
+        if (event.key === 'Enter') {
+            this.edit(name);
+            event.preventDefault();
+        }
+        if (event.key.toLowerCase() === 'd' && (event.ctrlKey || event.metaKey)) { /* duplicate placeholder */
+            event.preventDefault();
+        }
+        if (event.key === 'Delete') {
+            this.remove(name);
+            event.preventDefault();
+        }
+    }
+    hasField(name) { return this.fields.some((f) => f.name === name); }
+    toggleImport() { this.importMode = !this.importMode; this.importJson = ''; }
+    exportRules() {
+        const out = {};
+        for (const [name, rule] of this.rules())
+            out[name] = this.svc.dehydratePatch(rule);
+        const json = JSON.stringify(out, null, 2);
+        try {
+            navigator.clipboard?.writeText(json);
+        }
+        catch { }
+        alert('Regras exportadas para a área de transferência.');
+    }
+    applyImport() {
+        let obj;
+        try {
+            obj = JSON.parse(this.importJson || '{}');
+        }
+        catch {
+            alert('JSON inválido');
+            return;
+        }
+        const next = new Map(this.rules());
+        Object.keys(obj || {}).forEach((field) => {
+            const patch = obj[field] || {};
+            const vm = this.svc.hydrateRule({ ...patch, name: field }) || {
+                targetField: field,
+                dependencyFields: patch.dependencyFields || [],
+                enableDependencyCascade: patch.enableDependencyCascade !== false,
+                resetOnDependentChange: !!patch.resetOnDependentChange,
+                dependencyFilterMap: patch.dependencyFilterMap || {},
+                dependencyValuePath: patch.dependencyValuePath || 'id',
+                dependencyMergeStrategy: patch.dependencyMergeStrategy || 'merge',
+                dependencyDebounceMs: patch.dependencyDebounceMs ?? 150,
+                dependencyLoadOnChange: patch.dependencyLoadOnChange || 'respectLoadOn',
+            };
+            next.set(field, vm);
+        });
+        this.rules.set(next);
+        this.emitPatch();
+        this.importMode = false;
+    }
+    startTemplate(name, tpl) {
+        const hasR = this.hasField('rotaId');
+        const hasD = this.hasField('destinoReqId');
+        const deps = tpl === 'rota-destino' ? (hasR ? ['rotaId'] : []) : (hasR && hasD ? ['rotaId', 'destinoReqId'] : []);
+        this.editDepCsv = deps.join(',');
+        this.editEnable = true;
+        this.editReset = true;
+        this.editMerge = 'merge';
+        this.editLoadOn = 'respectLoadOn';
+        this.editDebounce = 150;
+        this.editValuePath = 'id';
+        this.buildMapRowsFromDeps();
+        this.editing.set(true);
+    }
+    buildMapRowsFromDeps() {
+        const deps = (this.editDepCsv || '').split(',').map((s) => s.trim()).filter(Boolean);
+        const existing = (() => { try {
+            return JSON.parse(this.editFilterMapJson || '{}');
+        }
+        catch {
+            return {};
+        } })();
+        this.editMapRows = deps.map((dep) => {
+            const entry = existing[dep];
+            if (!entry)
+                return { dep, key: dep };
+            if (typeof entry === 'string')
+                return { dep, key: entry };
+            return { dep, key: entry.key || dep, valuePath: entry.valuePath };
+        });
+    }
+    buildValuePathOverrides(deps) {
+        // If any row defines a valuePath, return a record; else return default string
+        const record = {};
+        this.editMapRows.forEach((r) => { if (r.valuePath)
+            record[r.dep] = r.valuePath; });
+        const hasAny = Object.keys(record).length > 0;
+        return hasAny ? record : (this.editValuePath || 'id');
+    }
+    buildPreview() {
+        try {
+            const deps = (this.editDepCsv || '').split(',').map((s) => s.trim()).filter(Boolean);
+            const frag = {};
+            this.editMapRows.forEach((r) => {
+                const example = r.valuePath ? 123 : 123; // simple placeholder id
+                const parts = (r.key || r.dep).split('.');
+                let ref = frag;
+                for (let i = 0; i < parts.length - 1; i++) {
+                    const p = parts[i];
+                    ref[p] = ref[p] || {};
+                    ref = ref[p];
+                }
+                ref[parts[parts.length - 1]] = example;
+            });
+            return JSON.stringify(frag, null, 2);
+        }
+        catch {
+            return '{}';
+        }
+    }
+    copyPreview() { try {
+        navigator.clipboard?.writeText(this.buildPreview());
+    }
+    catch { } }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CascadeManagerTabComponent, deps: [{ token: CascadeRulesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: CascadeManagerTabComponent, isStandalone: true, selector: "praxis-cascade-manager-tab", inputs: { fields: "fields", connections: "connections" }, outputs: { apply: "apply", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="cm-root">
+      <!-- Left: Fields list -->
+      <div class="cm-left">
+        <mat-form-field appearance="outline" class="cm-search" subscriptSizing="dynamic">
+          <mat-label>Buscar campos</mat-label>
+          <input matInput [ngModel]="searchTerm" (ngModelChange)="onSearchChange($event)">
+        </mat-form-field>
+        <ng-container *ngIf="fields.length <= 50; else vscroll">
+          <div>
+            <div *ngFor="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>
+              </div>
+              <div class="rule-badges" *ngIf="hasRule(f.name)">
+                <span class="rule-badge b-active" *ngIf="isCascadeEnabled(f.name)">Ativo</span>
+                <span class="rule-badge b-manual" *ngIf="loadOnChange(f.name)==='manual'">Manual</span>
+                <span class="rule-badge b-immediate" *ngIf="loadOnChange(f.name)==='immediate'">Immediate</span>
+              </div>
+            </div>
+          </div>
+        </ng-container>
+        <ng-template #vscroll>
+          <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>
+              </div>
+              <div class="rule-badges" *ngIf="hasRule(f.name)">
+                <span class="rule-badge b-active" *ngIf="isCascadeEnabled(f.name)">Ativo</span>
+                <span class="rule-badge b-manual" *ngIf="loadOnChange(f.name)==='manual'">Manual</span>
+                <span class="rule-badge b-immediate" *ngIf="loadOnChange(f.name)==='immediate'">Immediate</span>
+              </div>
+            </div>
+          </cdk-virtual-scroll-viewport>
+        </ng-template>
+      </div>
+
+      <!-- Right: Rules for selected field -->
+      <div class="cm-right" *ngIf="selectedField() as sel">
+        <div class="cm-header">
+          <div>
+            <h3 style="margin:0">{{ labelFor(sel) }}</h3>
+            <div style="opacity:.7">{{ 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>
+            <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>
+              <button mat-menu-item (click)="startTemplate(sel, 'rota-destino-propriedade')" [disabled]="!hasField('rotaId') || !hasField('destinoReqId')"><mat-icon [praxisIcon]="'bolt'"></mat-icon><span>Rota + Destino → Propriedade (ids)</span></button>
+            </mat-menu>
+          </div>
+        </div>
+
+        <!-- Conflict banner (connections) -->
+        <div class="banner" *ngIf="hasConflict(sel)">
+          <mat-icon [praxisIcon]="'link_off'"></mat-icon>
+          <div>
+            Connections atualizam este campo (filterCriteria). Considere desativar a cascata nativa ou usar ‘manual’.
+          </div>
+          <span class="spacer"></span>
+          <button mat-stroked-button color="primary" (click)="quickSet(sel,'disable')">Desativar</button>
+          <button mat-stroked-button color="accent" (click)="quickSet(sel,'manual')">Definir manual</button>
+        </div>
+
+        <div *ngIf="importMode" 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>
+          <textarea matInput rows="6" class="full" [(ngModel)]="importJson" placeholder='{ "campo": { "dependencyFields": ["dep"], ... } }'></textarea>
+          <div style="display:flex; gap:8px; justify-content:flex-end; padding-top:8px">
+            <button mat-stroked-button (click)="toggleImport()">Cancelar</button>
+            <button mat-flat-button color="primary" (click)="applyImport()">Aplicar</button>
+          </div>
+        </div>
+
+        <div *ngIf="!ruleFor(sel)">
+          <div class="rules-empty">Nenhuma regra de cascata. Clique em “Adicionar”.</div>
+        </div>
+        <div *ngIf="ruleFor(sel) as rule">
+          <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>
+            <div class="rule-actions">
+              <button mat-icon-button matTooltip="Editar" (click)="edit(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>
+            </div>
+          </div>
+        </div>
+
+        <!-- Editor com seções -->
+        <mat-expansion-panel [expanded]="editing()">
+          <mat-expansion-panel-header>
+            <mat-panel-title>Edição de Regra</mat-panel-title>
+            <mat-panel-description>Configurar dependentes, execução e mapeamento</mat-panel-description>
+          </mat-expansion-panel-header>
+
+          <!-- Básico -->
+          <mat-expansion-panel [expanded]="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>Básico</mat-panel-title>
+            </mat-expansion-panel-header>
+            <div class="form-grid">
+              <div class="form-row">
+                <mat-form-field appearance="outline" class="full">
+                  <mat-label>Dependentes (CSV)</mat-label>
+                  <input matInput [(ngModel)]="editDepCsv">
+                  <mat-hint>Ex.: rotaId,destinoReqId</mat-hint>
+                </mat-form-field>
+              </div>
+              <div class="form-row">
+                <mat-checkbox [(ngModel)]="editEnable">Ativar cascata nativa</mat-checkbox>
+                <mat-checkbox [(ngModel)]="editReset">Resetar ao mudar</mat-checkbox>
+              </div>
+            </div>
+          </mat-expansion-panel>
+
+          <!-- Execução -->
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>Execução</mat-panel-title>
+            </mat-expansion-panel-header>
+            <div class="form-row">
+              <mat-form-field appearance="outline">
+                <mat-label>Carregar ao mudar</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-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Merge de filtros</mat-label>
+                <mat-select [(ngModel)]="editMerge">
+                  <mat-option value="merge">merge (padrão)</mat-option>
+                  <mat-option value="replace">replace</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Atraso (ms)</mat-label>
+                <input matInput type="number" [(ngModel)]="editDebounce">
+              </mat-form-field>
+            </div>
+          </mat-expansion-panel>
+
+          <!-- Extração de valor -->
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>Extração de valor</mat-panel-title>
+            </mat-expansion-panel-header>
+            <div class="form-row">
+              <mat-form-field appearance="outline" class="full">
+                <mat-label>ValuePath padrão</mat-label>
+                <input matInput [(ngModel)]="editValuePath" placeholder="id">
+                <mat-hint>Preenchido automaticamente a partir de optionValueKey() ou 'id'</mat-hint>
+              </mat-form-field>
+            </div>
+          </mat-expansion-panel>
+
+          <!-- Mapeamento de filtros (tabela) -->
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>Mapeamento de filtros</mat-panel-title>
+            </mat-expansion-panel-header>
+            <table class="map-table" *ngIf="editMapRows.length; else noMap">
+              <thead>
+                <tr>
+                  <th>Dependente</th>
+                  <th>Chave (dot‑path)</th>
+                  <th>ValuePath (opcional)</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let row of editMapRows; let i = index">
+                  <td>{{ row.dep }}</td>
+                  <td>
+                    <input matInput [(ngModel)]="row.key" placeholder="{{row.dep}}">
+                  </td>
+                  <td>
+                    <input matInput [(ngModel)]="row.valuePath" placeholder="{{editValuePath||'id'}}">
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <ng-template #noMap>
+              <div class="rules-empty">Defina dependentes para sugerir o mapeamento.</div>
+            </ng-template>
+          </mat-expansion-panel>
+
+          <!-- Preview -->
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>Preview</mat-panel-title>
+            </mat-expansion-panel-header>
+            <pre style="white-space: pre-wrap; background:#fafafa; padding:8px; border:1px solid #eee; border-radius:6px">{{ buildPreview() }}</pre>
+            <div style="display:flex; justify-content:flex-end; padding-top:6px">
+              <button mat-stroked-button (click)="copyPreview()">Copiar</button>
+            </div>
+          </mat-expansion-panel>
+
+          <div style="display:flex; gap:8px; justify-content:flex-end; padding:8px 0;">
+            <button mat-stroked-button (click)="cancelEdit()">Cancelar</button>
+            <button mat-flat-button color="primary" (click)="saveEdit(sel)">Salvar</button>
+          </div>
+        </mat-expansion-panel>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.cm-root{display:grid;grid-template-columns:320px 1fr;gap:16px;min-height:420px}.cm-left{border-right:1px solid rgba(0,0,0,.06);padding-right:8px}.cm-search{width:100%;margin-bottom:8px}.cm-right{padding-left:8px}.field-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;cursor:pointer;border-radius:6px}.field-item.selected{background:#0000000a}.rule-badges{display:inline-flex;gap:6px}.rule-badge{font-size:10px;padding:2px 6px;border-radius:10px}.b-active{background:#e8f5e9;color:#2e7d32}.b-manual{background:#eceff1;color:#455a64}.b-immediate{background:#fff3e0;color:#ef6c00}.b-conflict{background:#ffebee;color:#c62828}.cm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.rules-empty{opacity:.7;font-style:italic;padding:8px 0}.rule-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:8px 0;border-bottom:1px dashed rgba(0,0,0,.06)}.rule-actions button{margin-left:4px}.banner{background:#fff8e1;color:#6d4c41;padding:8px 12px;border:1px solid #ffe082;border-radius:6px;margin-bottom:8px;display:flex;gap:8px;align-items:center}.import-panel{background:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;padding:8px;margin-bottom:8px}.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:6px 8px;border-bottom:1px dashed rgba(0,0,0,.06)}.kbd{font-family:monospace;background:#eee;padding:0 4px;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.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: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.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: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8$1.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.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { 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: ScrollingModule }, { kind: "directive", type: i12.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i12.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i12.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: "20.1.4", ngImport: i0, type: CascadeManagerTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-cascade-manager-tab', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatInputModule,
+                        MatChipsModule,
+                        MatListModule,
+                        MatDividerModule,
+                        MatSelectModule,
+                        MatCheckboxModule,
+                        MatExpansionModule,
+                        MatMenuModule,
+                        ScrollingModule,
+                        PraxisIconDirective,
+                    ], template: `
+    <div class="cm-root">
+      <!-- Left: Fields list -->
+      <div class="cm-left">
+        <mat-form-field appearance="outline" class="cm-search" subscriptSizing="dynamic">
+          <mat-label>Buscar campos</mat-label>
+          <input matInput [ngModel]="searchTerm" (ngModelChange)="onSearchChange($event)">
+        </mat-form-field>
+        <ng-container *ngIf="fields.length <= 50; else vscroll">
+          <div>
+            <div *ngFor="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>
+              </div>
+              <div class="rule-badges" *ngIf="hasRule(f.name)">
+                <span class="rule-badge b-active" *ngIf="isCascadeEnabled(f.name)">Ativo</span>
+                <span class="rule-badge b-manual" *ngIf="loadOnChange(f.name)==='manual'">Manual</span>
+                <span class="rule-badge b-immediate" *ngIf="loadOnChange(f.name)==='immediate'">Immediate</span>
+              </div>
+            </div>
+          </div>
+        </ng-container>
+        <ng-template #vscroll>
+          <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>
+              </div>
+              <div class="rule-badges" *ngIf="hasRule(f.name)">
+                <span class="rule-badge b-active" *ngIf="isCascadeEnabled(f.name)">Ativo</span>
+                <span class="rule-badge b-manual" *ngIf="loadOnChange(f.name)==='manual'">Manual</span>
+                <span class="rule-badge b-immediate" *ngIf="loadOnChange(f.name)==='immediate'">Immediate</span>
+              </div>
+            </div>
+          </cdk-virtual-scroll-viewport>
+        </ng-template>
+      </div>
+
+      <!-- Right: Rules for selected field -->
+      <div class="cm-right" *ngIf="selectedField() as sel">
+        <div class="cm-header">
+          <div>
+            <h3 style="margin:0">{{ labelFor(sel) }}</h3>
+            <div style="opacity:.7">{{ 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>
+            <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>
+              <button mat-menu-item (click)="startTemplate(sel, 'rota-destino-propriedade')" [disabled]="!hasField('rotaId') || !hasField('destinoReqId')"><mat-icon [praxisIcon]="'bolt'"></mat-icon><span>Rota + Destino → Propriedade (ids)</span></button>
+            </mat-menu>
+          </div>
+        </div>
+
+        <!-- Conflict banner (connections) -->
+        <div class="banner" *ngIf="hasConflict(sel)">
+          <mat-icon [praxisIcon]="'link_off'"></mat-icon>
+          <div>
+            Connections atualizam este campo (filterCriteria). Considere desativar a cascata nativa ou usar ‘manual’.
+          </div>
+          <span class="spacer"></span>
+          <button mat-stroked-button color="primary" (click)="quickSet(sel,'disable')">Desativar</button>
+          <button mat-stroked-button color="accent" (click)="quickSet(sel,'manual')">Definir manual</button>
+        </div>
+
+        <div *ngIf="importMode" 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>
+          <textarea matInput rows="6" class="full" [(ngModel)]="importJson" placeholder='{ "campo": { "dependencyFields": ["dep"], ... } }'></textarea>
+          <div style="display:flex; gap:8px; justify-content:flex-end; padding-top:8px">
+            <button mat-stroked-button (click)="toggleImport()">Cancelar</button>
+            <button mat-flat-button color="primary" (click)="applyImport()">Aplicar</button>
+          </div>
+        </div>
+
+        <div *ngIf="!ruleFor(sel)">
+          <div class="rules-empty">Nenhuma regra de cascata. Clique em “Adicionar”.</div>
+        </div>
+        <div *ngIf="ruleFor(sel) as rule">
+          <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>
+            <div class="rule-actions">
+              <button mat-icon-button matTooltip="Editar" (click)="edit(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>
+            </div>
+          </div>
+        </div>
+
+        <!-- Editor com seções -->
+        <mat-expansion-panel [expanded]="editing()">
+          <mat-expansion-panel-header>
+            <mat-panel-title>Edição de Regra</mat-panel-title>
+            <mat-panel-description>Configurar dependentes, execução e mapeamento</mat-panel-description>
+          </mat-expansion-panel-header>
+
+          <!-- Básico -->
+          <mat-expansion-panel [expanded]="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>Básico</mat-panel-title>
+            </mat-expansion-panel-header>
+            <div class="form-grid">
+              <div class="form-row">
+                <mat-form-field appearance="outline" class="full">
+                  <mat-label>Dependentes (CSV)</mat-label>
+                  <input matInput [(ngModel)]="editDepCsv">
+                  <mat-hint>Ex.: rotaId,destinoReqId</mat-hint>
+                </mat-form-field>
+              </div>
+              <div class="form-row">
+                <mat-checkbox [(ngModel)]="editEnable">Ativar cascata nativa</mat-checkbox>
+                <mat-checkbox [(ngModel)]="editReset">Resetar ao mudar</mat-checkbox>
+              </div>
+            </div>
+          </mat-expansion-panel>
+
+          <!-- Execução -->
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>Execução</mat-panel-title>
+            </mat-expansion-panel-header>
+            <div class="form-row">
+              <mat-form-field appearance="outline">
+                <mat-label>Carregar ao mudar</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-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Merge de filtros</mat-label>
+                <mat-select [(ngModel)]="editMerge">
+                  <mat-option value="merge">merge (padrão)</mat-option>
+                  <mat-option value="replace">replace</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Atraso (ms)</mat-label>
+                <input matInput type="number" [(ngModel)]="editDebounce">
+              </mat-form-field>
+            </div>
+          </mat-expansion-panel>
+
+          <!-- Extração de valor -->
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>Extração de valor</mat-panel-title>
+            </mat-expansion-panel-header>
+            <div class="form-row">
+              <mat-form-field appearance="outline" class="full">
+                <mat-label>ValuePath padrão</mat-label>
+                <input matInput [(ngModel)]="editValuePath" placeholder="id">
+                <mat-hint>Preenchido automaticamente a partir de optionValueKey() ou 'id'</mat-hint>
+              </mat-form-field>
+            </div>
+          </mat-expansion-panel>
+
+          <!-- Mapeamento de filtros (tabela) -->
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>Mapeamento de filtros</mat-panel-title>
+            </mat-expansion-panel-header>
+            <table class="map-table" *ngIf="editMapRows.length; else noMap">
+              <thead>
+                <tr>
+                  <th>Dependente</th>
+                  <th>Chave (dot‑path)</th>
+                  <th>ValuePath (opcional)</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let row of editMapRows; let i = index">
+                  <td>{{ row.dep }}</td>
+                  <td>
+                    <input matInput [(ngModel)]="row.key" placeholder="{{row.dep}}">
+                  </td>
+                  <td>
+                    <input matInput [(ngModel)]="row.valuePath" placeholder="{{editValuePath||'id'}}">
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <ng-template #noMap>
+              <div class="rules-empty">Defina dependentes para sugerir o mapeamento.</div>
+            </ng-template>
+          </mat-expansion-panel>
+
+          <!-- Preview -->
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>Preview</mat-panel-title>
+            </mat-expansion-panel-header>
+            <pre style="white-space: pre-wrap; background:#fafafa; padding:8px; border:1px solid #eee; border-radius:6px">{{ buildPreview() }}</pre>
+            <div style="display:flex; justify-content:flex-end; padding-top:6px">
+              <button mat-stroked-button (click)="copyPreview()">Copiar</button>
+            </div>
+          </mat-expansion-panel>
+
+          <div style="display:flex; gap:8px; justify-content:flex-end; padding:8px 0;">
+            <button mat-stroked-button (click)="cancelEdit()">Cancelar</button>
+            <button mat-flat-button color="primary" (click)="saveEdit(sel)">Salvar</button>
+          </div>
+        </mat-expansion-panel>
+      </div>
+    </div>
+  `, styles: [":host{display:block}.cm-root{display:grid;grid-template-columns:320px 1fr;gap:16px;min-height:420px}.cm-left{border-right:1px solid rgba(0,0,0,.06);padding-right:8px}.cm-search{width:100%;margin-bottom:8px}.cm-right{padding-left:8px}.field-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;cursor:pointer;border-radius:6px}.field-item.selected{background:#0000000a}.rule-badges{display:inline-flex;gap:6px}.rule-badge{font-size:10px;padding:2px 6px;border-radius:10px}.b-active{background:#e8f5e9;color:#2e7d32}.b-manual{background:#eceff1;color:#455a64}.b-immediate{background:#fff3e0;color:#ef6c00}.b-conflict{background:#ffebee;color:#c62828}.cm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.rules-empty{opacity:.7;font-style:italic;padding:8px 0}.rule-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:8px 0;border-bottom:1px dashed rgba(0,0,0,.06)}.rule-actions button{margin-left:4px}.banner{background:#fff8e1;color:#6d4c41;padding:8px 12px;border:1px solid #ffe082;border-radius:6px;margin-bottom:8px;display:flex;gap:8px;align-items:center}.import-panel{background:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;padding:8px;margin-bottom:8px}.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:6px 8px;border-bottom:1px dashed rgba(0,0,0,.06)}.kbd{font-family:monospace;background:#eee;padding:0 4px;border-radius:3px}\n"] }]
+        }], ctorParameters: () => [{ type: CascadeRulesService }], propDecorators: { fields: [{
+                type: Input
+            }], connections: [{
+                type: Input
+            }], apply: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CascadeManagerTabComponent, CascadeRulesService, ConfigRegistryService, ContextValidatorRegistryService, DynamicEditorRendererComponent, DynamicFormFactoryService, EditorComponentRegistryService, FieldMetadataEditorComponent, SchemaNormalizerService };
+//# sourceMappingURL=praxisui-metadata-editor.mjs.map