@praxisui/dynamic-form 9.0.5-rc.37 → 9.0.5-rc.39

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-08-19T01:49:06.767Z",
+  "generatedAt": "2026-08-19T11:10:58.413Z",
   "packageName": "@praxisui/dynamic-form",
-  "packageVersion": "9.0.5-rc.37",
+  "packageVersion": "9.0.5-rc.39",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 2,

package/docs/dynamic-form-authoring-document-semantics.md

@@ -4,7 +4,7 @@ doc_type: "adr"
 component: "praxis-dynamic-form"
 status: "accepted"
 owner: "praxis-ui"
-last_updated: "2026-04-15"
+last_updated: "2026-08-19"
 ---
 
 # Dynamic Form Authoring Document Semantics
@@ -39,6 +39,9 @@ Essa regra evita perda silenciosa do contrato canonico de Entity Lookup durante
 - `Apply` e `Save` vindos do editor operam em modo `replace-all`.
 - `reset` do editor limpa todos os modos persistidos do artefato.
 - adapters legados continuam suportados sem limpeza destrutiva de contexto ausente.
+- editores subordinados de seção, linha e coluna devem aplicar alterações pela localização estrutural capturada (`section`, `row`, `column`), nunca por busca global do primeiro `id` coincidente;
+- IDs de linha devem ser únicos dentro da seção e IDs de coluna devem ser únicos dentro da linha;
+- o estado `dirty` desses editores é reversível: restaurar o snapshot inicial deve desabilitar novamente Apply/Save.
 
 ## Visual Blocks Inside Layout
 

package/fesm2022/praxisui-dynamic-form.mjs

@@ -17553,7 +17553,7 @@ class PraxisDynamicForm {
             this.debugLog('[PDF] settingsPanel.open(FieldMetadataEditor)', { fieldName, composedTitle });
         }
         catch { }
-        const ref = this.settingsPanel.open({
+        const ref = this.settingsPanel.openChild({
             id: `field-meta.${this.formId}.${fieldName}`,
             title: composedTitle,
             titleIcon,
@@ -17654,31 +17654,37 @@ class PraxisDynamicForm {
     openRowEditor(row) {
         if (!row)
             return;
+        const location = this.resolveLayoutEditorLocation('row', row);
+        if (!location)
+            return;
         Promise.resolve().then(function () { return rowEditor_component; }).then((m) => {
             const { RowEditorComponent } = m;
-            const ref = this.settingsPanel.open({
+            const ref = this.settingsPanel.openChild({
                 id: `row.${this.formId || 'form'}.${row.id}`,
                 title: 'Configurar Linha',
                 titleIcon: 'view_stream',
                 content: { component: RowEditorComponent, inputs: { row } },
             });
-            ref.applied$.pipe(takeUntil(this.destroy$)).subscribe(() => this.cdr.detectChanges());
-            ref.saved$.pipe(takeUntil(this.destroy$)).subscribe(() => this.cdr.detectChanges());
+            ref.applied$.pipe(takeUntil(this.destroy$)).subscribe((value) => this.applyRowEditorValue(location, value));
+            ref.saved$.pipe(takeUntil(this.destroy$)).subscribe((value) => this.applyRowEditorValue(location, value));
         });
     }
     openColumnEditor(column) {
         if (!column)
             return;
+        const location = this.resolveLayoutEditorLocation('column', column);
+        if (!location)
+            return;
         Promise.resolve().then(function () { return columnEditor_component; }).then((m) => {
             const { ColumnEditorComponent } = m;
-            const ref = this.settingsPanel.open({
+            const ref = this.settingsPanel.openChild({
                 id: `column.${this.formId || 'form'}.${column.id}`,
                 title: 'Configurar Coluna',
                 titleIcon: 'view_column',
                 content: { component: ColumnEditorComponent, inputs: { column } },
             });
-            ref.applied$.pipe(takeUntil(this.destroy$)).subscribe(() => this.cdr.detectChanges());
-            ref.saved$.pipe(takeUntil(this.destroy$)).subscribe(() => this.cdr.detectChanges());
+            ref.applied$.pipe(takeUntil(this.destroy$)).subscribe((value) => this.applyColumnEditorValue(location, value));
+            ref.saved$.pipe(takeUntil(this.destroy$)).subscribe((value) => this.applyColumnEditorValue(location, value));
         });
     }
     openSectionEditor(section, focusTarget) {
@@ -17686,7 +17692,7 @@ class PraxisDynamicForm {
             return;
         Promise.resolve().then(function () { return sectionEditor_component; }).then((m) => {
             const { SectionEditorComponent } = m;
-            const ref = this.settingsPanel.open({
+            const ref = this.settingsPanel.openChild({
                 id: `section.${this.formId || 'form'}.${section.id}`,
                 title: section.title || 'Configurar seção',
                 titleIcon: 'view_agenda',
@@ -17703,6 +17709,71 @@ class PraxisDynamicForm {
             });
         });
     }
+    applyRowEditorValue(location, value) {
+        this.applyNestedLayoutEditorValue('row', location, value);
+    }
+    applyColumnEditorValue(location, value) {
+        this.applyNestedLayoutEditorValue('column', location, value);
+    }
+    resolveLayoutEditorLocation(kind, target) {
+        const sections = this.config?.sections || [];
+        for (let sectionIndex = 0; sectionIndex < sections.length; sectionIndex++) {
+            const section = sections[sectionIndex];
+            for (let rowIndex = 0; rowIndex < (section.rows || []).length; rowIndex++) {
+                const row = section.rows[rowIndex];
+                if (kind === 'row' && row === target) {
+                    return { sectionIndex, rowIndex, sectionId: section.id, rowId: row.id };
+                }
+                if (kind === 'column') {
+                    const columnIndex = (row.columns || []).findIndex((candidate) => candidate === target);
+                    if (columnIndex >= 0) {
+                        return {
+                            sectionIndex,
+                            rowIndex,
+                            columnIndex,
+                            sectionId: section.id,
+                            rowId: row.id,
+                            columnId: row.columns[columnIndex]?.id,
+                        };
+                    }
+                }
+            }
+        }
+        return undefined;
+    }
+    applyNestedLayoutEditorValue(kind, location, value) {
+        if (!value || typeof value !== 'object')
+            return;
+        const sourceSections = this.config?.sections || [];
+        const targetSection = sourceSections[location.sectionIndex];
+        const targetRow = targetSection?.rows?.[location.rowIndex];
+        const targetColumn = targetRow?.columns?.[location.columnIndex ?? -1];
+        if (!targetSection ||
+            targetSection.id !== location.sectionId ||
+            !targetRow ||
+            targetRow.id !== location.rowId ||
+            (kind === 'column' && (!targetColumn || targetColumn.id !== location.columnId)))
+            return;
+        const sections = structuredClone(sourceSections);
+        const positionedRow = sections[location.sectionIndex].rows[location.rowIndex];
+        if (kind === 'row') {
+            sections[location.sectionIndex].rows[location.rowIndex] = {
+                ...positionedRow,
+                ...structuredClone(value),
+            };
+        }
+        else {
+            const columnIndex = location.columnIndex;
+            positionedRow.columns[columnIndex] = {
+                ...positionedRow.columns[columnIndex],
+                ...structuredClone(value),
+            };
+        }
+        this.config = { ...this.config, sections };
+        this.configChange.emit(this.config);
+        this.emitConfigPatchChange();
+        this.cdr.detectChanges();
+    }
     applySectionEditorValue(section, value) {
         if (!section || !value || typeof value !== 'object') {
             this.cdr.detectChanges();
@@ -20532,6 +20603,30 @@ class FormConfigService {
             else {
                 ids.add(section.id);
             }
+            const rowIds = new Set();
+            for (const row of section.rows || []) {
+                if (!row.id) {
+                    errors.push(`Row id is required in section: ${section.id}`);
+                }
+                else if (rowIds.has(row.id)) {
+                    errors.push(`Duplicate row id in section ${section.id}: ${row.id}`);
+                }
+                else {
+                    rowIds.add(row.id);
+                }
+                const columnIds = new Set();
+                for (const column of row.columns || []) {
+                    if (!column.id) {
+                        errors.push(`Column id is required in row: ${row.id}`);
+                    }
+                    else if (columnIds.has(column.id)) {
+                        errors.push(`Duplicate column id in row ${row.id}: ${column.id}`);
+                    }
+                    else {
+                        columnIds.add(column.id);
+                    }
+                }
+            }
         }
         return errors;
     }
@@ -22774,7 +22869,7 @@ class SectionConfiguratorComponent {
             const SectionEditorComponent = m.SectionEditorComponent;
             if (!SectionEditorComponent)
                 return;
-            const ref = this.settingsPanel.open({
+            const ref = this.settingsPanel.openChild({
                 id: `layout.section.${this.section.id || this.sectionIndex}`,
                 title: this.section.title || `Seção ${this.sectionIndex + 1}`,
                 titleIcon: 'view_agenda',
@@ -22783,8 +22878,8 @@ class SectionConfiguratorComponent {
                     inputs: { section: this.section, fieldMetadata: this.fieldMetadata },
                 },
             });
-            ref.applied$?.subscribe(() => this.onSectionUpdated());
-            ref.saved$?.subscribe(() => this.onSectionUpdated());
+            ref.applied$?.subscribe((value) => this.onSectionUpdated(value));
+            ref.saved$?.subscribe((value) => this.onSectionUpdated(value));
         });
     }
     getSectionHeaderPreview() {
@@ -23376,7 +23471,7 @@ class LayoutEditorComponent {
             this.applyFieldMetadataPatch(fieldName, patch);
         };
         const title = this.t('field.editMetadataTitle').replace('{field}', field.label || field.name);
-        const ref = this.settingsPanel.open({
+        const ref = this.settingsPanel.openChild({
             id: `layout.fieldMetadata.${fieldName}`,
             title,
             titleIcon: 'edit_note',
@@ -23426,7 +23521,7 @@ class LayoutEditorComponent {
         if (!section?.id || !row?.id || !column?.id || item?.kind !== 'richContent') {
             return;
         }
-        const ref = this.settingsPanel.open({
+        const ref = this.settingsPanel.openChild({
             id: `layout.richContent.${section.id}.${row.id}.${column.id}.${item.id}`,
             title: this.t('visualBlock.editTitle'),
             titleIcon: 'notes',
@@ -30953,24 +31048,45 @@ class PraxisDynamicFormConfigEditor {
     onLayoutSelect(event) {
         if (event && event.type === 'column' && event.openEditor) {
             const column = withFormConfigSections(this.editedConfig).sections[event.sectionIndex]?.rows[event.rowIndex]?.columns[event.columnIndex];
-            this.openColumnEditor(column);
+            this.openColumnEditor(column, {
+                sectionIndex: event.sectionIndex,
+                rowIndex: event.rowIndex,
+                columnIndex: event.columnIndex,
+            });
         }
     }
-    openColumnEditor(column) {
+    openColumnEditor(column, location) {
         if (!column)
             return;
         Promise.resolve().then(function () { return columnEditor_component; }).then((m) => {
             const { ColumnEditorComponent } = m;
-            const ref = this.settingsPanel.open({
+            const ref = this.settingsPanel.openChild({
                 id: `column.${this.formId || 'form'}.${column.id}`,
                 title: this.tx('config.layout.columnEditor.title', 'Configurar Coluna'),
                 titleIcon: 'view_column',
                 content: { component: ColumnEditorComponent, inputs: { column } },
             });
-            ref.applied$.pipe(takeUntil(this.destroy$)).subscribe(() => this.cdr.detectChanges());
-            ref.saved$.pipe(takeUntil(this.destroy$)).subscribe(() => this.cdr.detectChanges());
+            ref.applied$.pipe(takeUntil(this.destroy$)).subscribe((value) => this.applyColumnEditorValue(column, location, value));
+            ref.saved$.pipe(takeUntil(this.destroy$)).subscribe((value) => this.applyColumnEditorValue(column, location, value));
         });
     }
+    applyColumnEditorValue(column, location, value) {
+        if (!column || !value || typeof value !== 'object')
+            return;
+        const sourceSections = this.editedConfig.sections || [];
+        const targetColumn = sourceSections[location.sectionIndex]?.rows?.[location.rowIndex]
+            ?.columns?.[location.columnIndex];
+        if (!targetColumn || targetColumn.id !== column.id)
+            return;
+        const sections = structuredClone(sourceSections);
+        const row = sections[location.sectionIndex].rows[location.rowIndex];
+        row.columns[location.columnIndex] = {
+            ...row.columns[location.columnIndex],
+            ...structuredClone(value),
+        };
+        this.onConfigChange({ ...this.editedConfig, sections });
+        this.cdr.detectChanges();
+    }
     // Cascatas: aplicar patch granular aos campos
     onCascadeApply(patch) {
         const fields = this.editedConfig.fieldMetadata || [];
@@ -32962,13 +33078,14 @@ class SectionEditorComponent {
     });
     customActionValue = '__custom__';
     destroy$ = new Subject();
+    initialValueSig = '';
     titleInput;
     descriptionInput;
     constructor(fb, data, iconPicker) {
         this.fb = fb;
         this.data = data;
         this.iconPicker = iconPicker;
-        this.section = this.data.section;
+        this.section = structuredClone(this.data.section);
         this.fieldMetadata = this.data.fieldMetadata || this.fieldMetadata;
     }
     ngOnInit() {
@@ -33017,9 +33134,11 @@ class SectionEditorComponent {
             headerActions: this.fb.array((this.normalizeHeaderActions(this.section.headerActions) ?? []).map((action) => this.createHeaderActionGroup(action))),
         });
         this.syncCollapsedControlState(!!this.form.get('collapsible')?.value);
+        this.initialValueSig = JSON.stringify(this.normalizeSectionFormValue(this.form.getRawValue()));
         this.form.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.applyNormalizedFormValue();
-            this.isDirty$.next(true);
+            this.isDirty$.next(JSON.stringify(this.normalizeSectionFormValue(this.form.getRawValue())) !==
+                this.initialValueSig);
             this.isValid$.next(this.form.valid);
         });
         this.form.get('collapsible')?.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((canCollapse) => {
@@ -33031,6 +33150,9 @@ class SectionEditorComponent {
     }
     ngAfterViewInit() {
         setTimeout(() => {
+            if (!this.isDirty$.value) {
+                this.initialValueSig = JSON.stringify(this.normalizeSectionFormValue(this.form.getRawValue()));
+            }
             if (this.focusTarget === 'title') {
                 this.titleInput?.nativeElement?.focus?.();
             }
@@ -33346,17 +33468,14 @@ class SectionEditorComponent {
             return;
         this.form.patchValue({ titleColor: v, descriptionColor: v });
         Object.assign(this.section, { titleColor: v, descriptionColor: v });
-        this.isDirty$.next(true);
     }
     onTitleStyleChange(style) {
         this.section.titleStyle = style;
         this.form.get('titleStyle')?.setValue(style);
-        this.isDirty$.next(true);
     }
     onDescriptionStyleChange(style) {
         this.section.descriptionStyle = style;
         this.form.get('descriptionStyle')?.setValue(style);
-        this.isDirty$.next(true);
     }
     trackFieldOption(index, field) {
         return field.value || String(index);
@@ -34925,7 +35044,7 @@ class RowEditorComponent {
     constructor(fb, data) {
         this.fb = fb;
         this.data = data;
-        this.row = data.row;
+        this.row = structuredClone(data.row);
     }
     ngOnInit() {
         const r = this.data.row;
@@ -34950,7 +35069,6 @@ class RowEditorComponent {
         }
         catch { }
         this.form.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            Object.assign(this.data.row, this.form.value);
             let dirty = true;
             try {
                 const nowSig = JSON.stringify(this.form.getRawValue());
@@ -34966,7 +35084,7 @@ class RowEditorComponent {
         this.destroy$.complete();
     }
     getSettingsValue() {
-        return this.form.value;
+        return { ...this.row, ...this.form.getRawValue() };
     }
     displayValue(value, fallback) {
         if (value === null || value === undefined)
@@ -35296,11 +35414,12 @@ class ColumnEditorComponent {
     isBusy$ = new BehaviorSubject(false);
     destroy$ = new Subject();
     _previewTimer;
+    initialValueSig = '';
     i18n = inject(PraxisI18nService);
     constructor(fb, data) {
         this.fb = fb;
         this.data = data;
-        this.column = data.column;
+        this.column = structuredClone(data.column);
     }
     ngOnInit() {
         const col = this.data.column;
@@ -35338,6 +35457,7 @@ class ColumnEditorComponent {
             className: [col.className ?? ''],
             testId: [col.testId ?? ''],
         });
+        this.initialValueSig = JSON.stringify(this.form.getRawValue());
         this.form.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
             // Evita NG0100: agendar a mutação para o próximo macrotask,
             // fora do ciclo de detecção atual, mantendo o preview ao vivo.
@@ -35346,7 +35466,7 @@ class ColumnEditorComponent {
             }
             this._previewTimer = setTimeout(() => {
                 this.applyChanges();
-                this.isDirty$.next(true);
+                this.isDirty$.next(JSON.stringify(this.form.getRawValue()) !== this.initialValueSig);
                 this.isValid$.next(this.form.valid);
                 this._previewTimer = null;
             }, 0);
@@ -35361,10 +35481,10 @@ class ColumnEditorComponent {
         this.destroy$.complete();
     }
     applyChanges() {
-        Object.assign(this.data.column, this.form.value);
+        this.column = { ...this.column, ...this.form.getRawValue() };
     }
     getSettingsValue() {
-        return this.form.value;
+        return { ...this.column, ...this.form.getRawValue() };
     }
     onBreakpointChange(bp) {
         this.previewBreakpoint = bp;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/dynamic-form",
-  "version": "9.0.5-rc.37",
+  "version": "9.0.5-rc.39",
   "description": "Angular dynamic form engine for Praxis UI: metadata-driven forms, hooks, and services integrating @praxisui/* packages.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
@@ -9,13 +9,13 @@
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
     "@angular/router": "^21.0.0",
-    "@praxisui/ai": "^9.0.5-rc.37",
-    "@praxisui/dynamic-fields": "^9.0.5-rc.37",
-    "@praxisui/metadata-editor": "^9.0.5-rc.37",
-    "@praxisui/rich-content": "^9.0.5-rc.37",
-    "@praxisui/settings-panel": "^9.0.5-rc.37",
-    "@praxisui/visual-builder": "^9.0.5-rc.37",
-    "@praxisui/core": "^9.0.5-rc.37",
+    "@praxisui/ai": "^9.0.5-rc.39",
+    "@praxisui/dynamic-fields": "^9.0.5-rc.39",
+    "@praxisui/metadata-editor": "^9.0.5-rc.39",
+    "@praxisui/rich-content": "^9.0.5-rc.39",
+    "@praxisui/settings-panel": "^9.0.5-rc.39",
+    "@praxisui/visual-builder": "^9.0.5-rc.39",
+    "@praxisui/core": "^9.0.5-rc.39",
     "rxjs": "^7.8.0"
   },
   "dependencies": {

package/types/praxisui-dynamic-form.d.ts

@@ -1358,6 +1358,10 @@ declare class PraxisDynamicForm implements OnInit, OnChanges, OnDestroy {
     private openRowEditor;
     private openColumnEditor;
     openSectionEditor(section: any, focusTarget?: 'title' | 'description'): void;
+    private applyRowEditorValue;
+    private applyColumnEditorValue;
+    private resolveLayoutEditorLocation;
+    private applyNestedLayoutEditorValue;
     private applySectionEditorValue;
     private resolveControlTypeEditorial;
     private getControlTypeIcon;
@@ -1789,6 +1793,7 @@ declare class PraxisDynamicFormConfigEditor implements SettingsValueProvider, On
     ngOnDestroy(): void;
     onLayoutSelect(event: any): void;
     private openColumnEditor;
+    private applyColumnEditorValue;
     onCascadeApply(patch: Record<string, Partial<FieldDefinition>>): void;
     private syncCascadeManagerFields;
     private stripLegacy;
@@ -2470,6 +2475,7 @@ declare class SectionEditorComponent implements OnInit, AfterViewInit, OnDestroy
     readonly globalActionCatalog: ActionCatalogOption[];
     readonly customActionValue = "__custom__";
     private destroy$;
+    private initialValueSig;
     titleInput?: ElementRef<HTMLInputElement>;
     descriptionInput?: ElementRef<HTMLTextAreaElement>;
     constructor(fb: FormBuilder, data: {
@@ -2593,6 +2599,7 @@ declare class ColumnEditorComponent implements OnInit, OnDestroy, SettingsValueP
     isBusy$: BehaviorSubject<boolean>;
     private destroy$;
     private _previewTimer;
+    private initialValueSig;
     private readonly i18n;
     constructor(fb: FormBuilder, data: {
         column: FormColumn;