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

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-08-19T02:54:26.311Z",
+  "generatedAt": "2026-08-19T11:10:58.413Z",
   "packageName": "@praxisui/dynamic-form",
-  "packageVersion": "9.0.5-rc.38",
+  "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

@@ -17654,6 +17654,9 @@ 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.openChild({
@@ -17662,13 +17665,16 @@ class PraxisDynamicForm {
                 titleIcon: 'view_stream',
                 content: { component: RowEditorComponent, inputs: { row } },
             });
-            ref.applied$.pipe(takeUntil(this.destroy$)).subscribe((value) => this.applyRowEditorValue(row, value));
-            ref.saved$.pipe(takeUntil(this.destroy$)).subscribe((value) => this.applyRowEditorValue(row, value));
+            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.openChild({
@@ -17677,8 +17683,8 @@ class PraxisDynamicForm {
                 titleIcon: 'view_column',
                 content: { component: ColumnEditorComponent, inputs: { column } },
             });
-            ref.applied$.pipe(takeUntil(this.destroy$)).subscribe((value) => this.applyColumnEditorValue(column, value));
-            ref.saved$.pipe(takeUntil(this.destroy$)).subscribe((value) => this.applyColumnEditorValue(column, value));
+            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) {
@@ -17703,50 +17709,61 @@ class PraxisDynamicForm {
             });
         });
     }
-    applyRowEditorValue(row, value) {
-        this.applyNestedLayoutEditorValue('row', row, value);
+    applyRowEditorValue(location, value) {
+        this.applyNestedLayoutEditorValue('row', location, value);
     }
-    applyColumnEditorValue(column, value) {
-        this.applyNestedLayoutEditorValue('column', column, value);
+    applyColumnEditorValue(location, value) {
+        this.applyNestedLayoutEditorValue('column', location, value);
     }
-    applyNestedLayoutEditorValue(kind, target, value) {
-        if (!target || !value || typeof value !== 'object')
-            return;
-        const sourceSections = this.config?.sections || [];
-        let targetPosition;
-        for (let sectionIndex = 0; sectionIndex < sourceSections.length; sectionIndex++) {
-            const section = sourceSections[sectionIndex];
+    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 || (!!row?.id && !!target?.id && row.id === target.id))) {
-                    targetPosition = { sectionIndex, rowIndex };
-                    break;
+                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 ||
-                        (!!candidate?.id && !!target?.id && candidate.id === target.id));
+                    const columnIndex = (row.columns || []).findIndex((candidate) => candidate === target);
                     if (columnIndex >= 0) {
-                        targetPosition = { sectionIndex, rowIndex, columnIndex };
-                        break;
+                        return {
+                            sectionIndex,
+                            rowIndex,
+                            columnIndex,
+                            sectionId: section.id,
+                            rowId: row.id,
+                            columnId: row.columns[columnIndex]?.id,
+                        };
                     }
                 }
             }
-            if (targetPosition)
-                break;
         }
-        if (!targetPosition)
+        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[targetPosition.sectionIndex].rows[targetPosition.rowIndex];
+        const positionedRow = sections[location.sectionIndex].rows[location.rowIndex];
         if (kind === 'row') {
-            sections[targetPosition.sectionIndex].rows[targetPosition.rowIndex] = {
+            sections[location.sectionIndex].rows[location.rowIndex] = {
                 ...positionedRow,
                 ...structuredClone(value),
             };
         }
         else {
-            const columnIndex = targetPosition.columnIndex;
+            const columnIndex = location.columnIndex;
             positionedRow.columns[columnIndex] = {
                 ...positionedRow.columns[columnIndex],
                 ...structuredClone(value),
@@ -20586,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;
     }
@@ -31007,10 +31048,14 @@ 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) => {
@@ -31021,34 +31066,22 @@ class PraxisDynamicFormConfigEditor {
                 titleIcon: 'view_column',
                 content: { component: ColumnEditorComponent, inputs: { column } },
             });
-            ref.applied$.pipe(takeUntil(this.destroy$)).subscribe((value) => this.applyColumnEditorValue(column, value));
-            ref.saved$.pipe(takeUntil(this.destroy$)).subscribe((value) => this.applyColumnEditorValue(column, value));
+            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, value) {
+    applyColumnEditorValue(column, location, value) {
         if (!column || !value || typeof value !== 'object')
             return;
         const sourceSections = this.editedConfig.sections || [];
-        let targetPosition;
-        for (let sectionIndex = 0; sectionIndex < sourceSections.length; sectionIndex++) {
-            const section = sourceSections[sectionIndex];
-            for (let rowIndex = 0; rowIndex < (section.rows || []).length; rowIndex++) {
-                const row = section.rows[rowIndex];
-                const index = (row.columns || []).findIndex((candidate) => candidate === column || (!!candidate?.id && !!column?.id && candidate.id === column.id));
-                if (index >= 0) {
-                    targetPosition = { sectionIndex, rowIndex, columnIndex: index };
-                    break;
-                }
-            }
-            if (targetPosition)
-                break;
-        }
-        if (!targetPosition)
+        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[targetPosition.sectionIndex].rows[targetPosition.rowIndex];
-        row.columns[targetPosition.columnIndex] = {
-            ...row.columns[targetPosition.columnIndex],
+        const row = sections[location.sectionIndex].rows[location.rowIndex];
+        row.columns[location.columnIndex] = {
+            ...row.columns[location.columnIndex],
             ...structuredClone(value),
         };
         this.onConfigChange({ ...this.editedConfig, sections });
@@ -33045,6 +33078,7 @@ class SectionEditorComponent {
     });
     customActionValue = '__custom__';
     destroy$ = new Subject();
+    initialValueSig = '';
     titleInput;
     descriptionInput;
     constructor(fb, data, iconPicker) {
@@ -33100,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) => {
@@ -33114,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?.();
             }
@@ -33429,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);
@@ -35378,6 +35414,7 @@ class ColumnEditorComponent {
     isBusy$ = new BehaviorSubject(false);
     destroy$ = new Subject();
     _previewTimer;
+    initialValueSig = '';
     i18n = inject(PraxisI18nService);
     constructor(fb, data) {
         this.fb = fb;
@@ -35420,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.
@@ -35428,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/dynamic-form",
-  "version": "9.0.5-rc.38",
+  "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.38",
-    "@praxisui/dynamic-fields": "^9.0.5-rc.38",
-    "@praxisui/metadata-editor": "^9.0.5-rc.38",
-    "@praxisui/rich-content": "^9.0.5-rc.38",
-    "@praxisui/settings-panel": "^9.0.5-rc.38",
-    "@praxisui/visual-builder": "^9.0.5-rc.38",
-    "@praxisui/core": "^9.0.5-rc.38",
+    "@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

@@ -1360,6 +1360,7 @@ declare class PraxisDynamicForm implements OnInit, OnChanges, OnDestroy {
     openSectionEditor(section: any, focusTarget?: 'title' | 'description'): void;
     private applyRowEditorValue;
     private applyColumnEditorValue;
+    private resolveLayoutEditorLocation;
     private applyNestedLayoutEditorValue;
     private applySectionEditorValue;
     private resolveControlTypeEditorial;
@@ -2474,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: {
@@ -2597,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;