ngx-form-designerr 0.0.10 → 0.0.11

package/fesm2022/ngx-form-designer.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, NgModule, signal, computed, EventEmitter, inject, DestroyRef, Injector, ViewContainerRef, Input, ViewChild, Output, Inject, ChangeDetectionStrategy, Component, effect, ElementRef, NgZone, input, output, HostListener, ContentChildren, untracked, ChangeDetectorRef } from '@angular/core';
-import { BehaviorSubject, Subject, merge, of, filter, map, debounceTime as debounceTime$1, firstValueFrom } from 'rxjs';
+import { Injectable, InjectionToken, NgModule, inject, signal, computed, EventEmitter, DestroyRef, Injector, ViewContainerRef, Input, ViewChild, Output, Inject, ChangeDetectionStrategy, Component, effect, ElementRef, NgZone, input, output, HostListener, ContentChildren, untracked, ChangeDetectorRef } from '@angular/core';
+import { BehaviorSubject, Subject, merge, of, filter, map, debounceTime as debounceTime$1, skip, firstValueFrom } from 'rxjs';
 import { v4 } from 'uuid';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
@@ -241,7 +241,7 @@ class FormEngine {
             return;
         }
         const isRequired = this.isFieldRequired(field.id);
-        const isEmpty = value === null || value === undefined || value === '';
+        const isEmpty = value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0);
         if (isRequired && isEmpty) {
             fieldErrors.push('This field is required.');
         }
@@ -402,6 +402,12 @@ function computeAccessFlags(schema) {
         // hierarchyAccess: true if field participates in hierarchy (either direction)
         field.dataConfig.hierarchyAccess = hierarchyAccess;
     }
+    for (const field of schema.fields) {
+        const itemSchema = field.repeatable?.itemSchema;
+        if (!itemSchema)
+            continue;
+        computeAccessFlags(itemSchema);
+    }
 }
 
 /**
@@ -478,6 +484,10 @@ function checkSchemaForApiOnlySources(schema) {
         return issues;
     for (const field of schema.fields) {
         checkField(field, issues);
+        const itemSchema = field.repeatable?.itemSchema;
+        if (itemSchema) {
+            issues.push(...checkSchemaForApiOnlySources(itemSchema));
+        }
     }
     return issues;
 }
@@ -551,6 +561,9 @@ function stripEmbeddedSourceData(schema) {
                     delete field.staticOptions;
                 }
             }
+            if (field.repeatable?.itemSchema) {
+                field.repeatable.itemSchema = stripEmbeddedSourceData(field.repeatable.itemSchema);
+            }
         }
     }
     return clone;
@@ -640,25 +653,46 @@ function mergeAndNormalize(base, override) {
 
 const WIDGET_EDITOR_CONTEXT = new InjectionToken('WIDGET_EDITOR_CONTEXT');
 
-function buildLayoutIndex(root) {
+const SCOPED_NODE_SEPARATOR = '::scope::';
+function composeScopedNodeId(scopePath, nodeId) {
+    if (scopePath.length === 0)
+        return nodeId;
+    return `${scopePath.join('/')}${SCOPED_NODE_SEPARATOR}${nodeId}`;
+}
+function buildLayoutIndex(schema) {
     const index = {};
-    const walk = (node, parentId, path, position) => {
-        const nextPath = [...path, node.id];
-        index[node.id] = {
+    const walk = (scopeSchema, node, parentId, path, position, scopePath) => {
+        const scopedNodeId = composeScopedNodeId(scopePath, node.id);
+        const nextPath = [...path, scopedNodeId];
+        index[scopedNodeId] = {
             node,
             parentId,
             path: nextPath,
-            index: position
+            index: position,
+            scopePath: [...scopePath],
+            rawNodeId: node.id
         };
         if ('children' in node) {
             const children = node.children;
-            children.forEach((child, idx) => walk(child, node.id, nextPath, idx));
+            children.forEach((child, idx) => walk(scopeSchema, child, scopedNodeId, nextPath, idx, scopePath));
+        }
+        if (node.type === 'widget') {
+            const widgetNode = node;
+            if (!widgetNode.refId)
+                return;
+            const field = scopeSchema.fields.find(candidate => candidate.id === widgetNode.refId);
+            const itemSchema = field?.repeatable?.itemSchema;
+            if (!field || !itemSchema?.layout || !Array.isArray(itemSchema.fields))
+                return;
+            const nestedScopePath = [...scopePath, field.id];
+            walk(itemSchema, itemSchema.layout, scopedNodeId, nextPath, 0, nestedScopePath);
         }
     };
-    walk(root, null, [], 0);
+    walk(schema, schema.layout, null, [], 0, []);
     return index;
 }
 class DesignerStateService {
+    widgetDefs = (inject(WIDGET_DEFINITIONS, { optional: true }) ?? []).flat();
     activeFlavor = signal('form');
     schema = signal({
         id: v4(),
@@ -711,7 +745,7 @@ class DesignerStateService {
     constructor() {
         this.recordHistory(this.schema());
     }
-    layoutIndex = computed(() => buildLayoutIndex(this.schema().layout));
+    layoutIndex = computed(() => buildLayoutIndex(this.schema()));
     selectedNode = computed(() => {
         const id = this.selectedNodeId();
         if (!id)
@@ -720,12 +754,16 @@ class DesignerStateService {
         return entry?.node ?? null;
     });
     selectedField = computed(() => {
-        const node = this.selectedNode();
-        if (node && node.type === 'widget') {
-            const refId = node.refId;
-            return this.schema().fields.find((f) => f.id === refId) || null;
-        }
-        return null;
+        const selectedId = this.selectedNodeId();
+        if (!selectedId)
+            return null;
+        const entry = this.layoutIndex()[selectedId];
+        if (!entry || entry.node.type !== 'widget')
+            return null;
+        const refId = entry.node.refId;
+        if (!refId)
+            return null;
+        return this.findFieldByIdInScope(this.schema(), entry.scopePath, refId);
     });
     updateSchema(schema) {
         this.setSchema(schema);
@@ -788,6 +826,28 @@ class DesignerStateService {
     isNodeSelected(nodeId) {
         return this.selectedNodeIds().includes(nodeId);
     }
+    composeScopedNodeId(scopePath, nodeId) {
+        return composeScopedNodeId(scopePath, nodeId);
+    }
+    getSelectedScopeFields() {
+        const selectedId = this.selectedNodeId();
+        if (!selectedId)
+            return this.schema().fields;
+        const entry = this.layoutIndex()[selectedId];
+        if (!entry)
+            return this.schema().fields;
+        const scopeSchema = this.resolveSchemaAtScope(this.schema(), entry.scopePath);
+        return scopeSchema?.fields ?? this.schema().fields;
+    }
+    isSelectionInScope(scopePath) {
+        const selectedId = this.selectedNodeId();
+        if (!selectedId)
+            return false;
+        const entry = this.layoutIndex()[selectedId];
+        if (!entry)
+            return false;
+        return this.isScopePrefix(scopePath, entry.scopePath);
+    }
     openContextMenu(position) {
         this.contextMenu.set(position);
     }
@@ -819,11 +879,14 @@ class DesignerStateService {
         const nodesToCopy = [];
         const fieldsToCopy = [];
         const index = this.layoutIndex();
-        // 1. Gather nodes
-        // Sort by index/position if possible to maintain order, but simple iteration is okay for now.
-        // We should probably filter out descendants if ancestors are also selected to avoid duplication?
-        // For simplicity: just Copy exactly what is selected. If user selects Row + its Child Col, we might duplicate stuff?
-        // Better approach: minimal cover. If a parent is selected, don't include its children in the top-level list.
+        const primarySelectedId = this.selectedNodeId() ?? selectedIds[0];
+        const primaryEntry = primarySelectedId ? index[primarySelectedId] : undefined;
+        if (!primaryEntry)
+            return;
+        const scopePath = primaryEntry.scopePath;
+        const scopeSchema = this.resolveSchemaAtScope(current, scopePath);
+        if (!scopeSchema)
+            return;
         const isDescendantOfSelected = (id) => {
             let parentId = index[id]?.parentId;
             while (parentId) {
@@ -833,17 +896,27 @@ class DesignerStateService {
             }
             return false;
         };
-        const topLevelSelected = selectedIds.filter(id => !isDescendantOfSelected(id));
+        const topLevelSelected = selectedIds.filter(id => {
+            const entry = index[id];
+            if (!entry)
+                return false;
+            if (!this.sameScope(entry.scopePath, scopePath))
+                return false;
+            return !isDescendantOfSelected(id);
+        });
         for (const id of topLevelSelected) {
             const entry = index[id];
             if (entry && entry.node) {
                 nodesToCopy.push(entry.node);
-                // 2. Gather fields recursively
-                this.collectFields(entry.node, current.fields, fieldsToCopy);
+                this.collectFields(entry.node, scopeSchema.fields, fieldsToCopy);
             }
         }
         if (nodesToCopy.length > 0) {
-            this.clipboard.set({ nodes: JSON.parse(JSON.stringify(nodesToCopy)), fields: JSON.parse(JSON.stringify(fieldsToCopy)) });
+            this.clipboard.set({
+                nodes: JSON.parse(JSON.stringify(nodesToCopy)),
+                fields: JSON.parse(JSON.stringify(fieldsToCopy)),
+                scopePath: [...scopePath]
+            });
         }
     }
     cut() {
@@ -859,83 +932,83 @@ class DesignerStateService {
         if (!data || data.nodes.length === 0)
             return;
         const current = this.schema();
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
-        const newFields = [...current.fields];
-        // Determine Drop Target
-        const selectedId = this.selectedNodeId(); // Primary selection for paste target
+        const nextSchema = this.cloneValue(current);
+        const selectedId = this.selectedNodeId();
         const index = this.layoutIndex();
+        const selectedEntry = selectedId ? index[selectedId] : undefined;
+        const targetScopePath = selectedEntry
+            ? this.resolveInsertionScopePath(selectedEntry)
+            : [...(data.scopePath ?? [])];
+        const targetSchema = this.resolveSchemaAtScope(nextSchema, targetScopePath);
+        if (!targetSchema)
+            return;
         let targetParentId = null;
         let targetIndex = -1;
-        let insertMode = 'append'; // append to container, or insert after item
-        if (selectedId) {
-            const entry = index[selectedId];
-            if (entry) {
-                const node = entry.node;
-                if ((node.type === 'row' || node.type === 'col') && 'children' in node) {
-                    // Paste INSIDE the container
-                    targetParentId = node.id;
-                    targetIndex = node.children.length; // End of list
-                    insertMode = 'append';
+        if (selectedEntry && this.sameScope(selectedEntry.scopePath, targetScopePath)) {
+            if ((selectedEntry.node.type === 'row' || selectedEntry.node.type === 'col') && 'children' in selectedEntry.node) {
+                targetParentId = selectedEntry.rawNodeId;
+                targetIndex = selectedEntry.node.children.length;
+            }
+            else {
+                if (selectedEntry.parentId) {
+                    const parentEntry = index[selectedEntry.parentId];
+                    targetParentId = parentEntry?.rawNodeId ?? targetSchema.layout.id;
                 }
                 else {
-                    // Paste AFTER the widget (sibling)
-                    targetParentId = entry.parentId;
-                    targetIndex = entry.index + 1;
-                    insertMode = 'insert';
+                    targetParentId = targetSchema.layout.id;
                 }
+                targetIndex = selectedEntry.index + 1;
             }
         }
-        // Fallback: If no selection or invalid target, paste to Root
+        // Fallback: If no selection or invalid target, paste to scope root.
         if (!targetParentId) {
-            targetParentId = newLayout.id;
-            targetIndex = newLayout.children.length;
-            insertMode = 'append';
+            targetParentId = targetSchema.layout.id;
+            if ('children' in targetSchema.layout) {
+                targetIndex = targetSchema.layout.children.length;
+            }
+            else {
+                return;
+            }
         }
         const newSelectedIds = [];
+        const clipboardFields = new Map(data.fields.map(field => [field.id, field]));
         // Helper to clone node with new IDs
         const processNode = (node) => {
-            const newNode = JSON.parse(JSON.stringify(node));
-            newNode.id = v4();
+            const oldNode = JSON.parse(JSON.stringify(node));
+            const newNode = { ...oldNode, id: v4() };
             newSelectedIds.push(newNode.id);
             if (newNode.type === 'widget' && newNode.refId) {
-                // Find corresponding field in clipboard data
-                const originalField = data.fields.find(f => f.id === newNode.refId);
-                // Or map via old refId? 
-                // Wait, processNode receives 'node' which is from clipboard (already has old IDs).
-                // We need to map oldFieldId -> newFieldId.
+                const oldRefId = oldNode.refId;
+                const originalField = clipboardFields.get(oldRefId);
                 if (originalField) {
-                    // Create new field
                     const newFieldId = v4();
                     const newField = {
                         ...originalField,
                         id: newFieldId,
                         name: `${originalField.name}_${Date.now()}_${Math.floor(Math.random() * 1000)}`
                     };
-                    newFields.push(newField);
+                    targetSchema.fields.push(newField);
                     newNode.refId = newFieldId;
                 }
             }
             if ('children' in newNode) {
-                newNode.children = newNode.children.map((child) => processNode(child));
+                newNode.children =
+                    newNode.children.map((child) => processNode(child));
             }
             return newNode;
         };
         const clonedNodes = data.nodes.map(n => processNode(n));
         // Insert into Layout
         if (!targetParentId)
-            return; // Should be handled by fallback above, but satisfies TS
-        const targetNode = this.findNode(newLayout, targetParentId);
+            return;
+        const targetNode = this.findNode(targetSchema.layout, targetParentId);
         if (targetNode && 'children' in targetNode) {
             targetNode.children.splice(targetIndex, 0, ...clonedNodes);
-            this.setSchema({
-                ...current,
-                fields: newFields,
-                layout: newLayout
-            });
-            // Select pasted items
-            this.selectedNodeIds.set(newSelectedIds);
-            if (newSelectedIds.length > 0) {
-                this.selectedNodeId.set(newSelectedIds[0]);
+            this.setSchema(nextSchema);
+            const scopedSelectedIds = newSelectedIds.map(id => this.composeScopedNodeId(targetScopePath, id));
+            this.selectedNodeIds.set(scopedSelectedIds);
+            if (scopedSelectedIds.length > 0) {
+                this.selectedNodeId.set(scopedSelectedIds[0]);
             }
         }
     }
@@ -945,41 +1018,65 @@ class DesignerStateService {
         const idsToDelete = this.selectedNodeIds();
         if (idsToDelete.length === 0)
             return;
-        const current = this.schema();
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
-        let fieldsToRemove = [];
-        const collectFieldIds = (node) => {
-            if (node.type === 'widget' && node.refId) {
-                fieldsToRemove.push(node.refId);
-            }
-            if ('children' in node) {
-                node.children.forEach((c) => collectFieldIds(c));
+        const index = this.layoutIndex();
+        const isDescendantOfSelected = (id) => {
+            let parentId = index[id]?.parentId;
+            while (parentId) {
+                if (idsToDelete.includes(parentId))
+                    return true;
+                parentId = index[parentId]?.parentId;
             }
+            return false;
         };
-        const index = this.layoutIndex(); // Use current index to find nodes quickly if needed, 
-        // but we need to walk the newLayout to mutate it.
-        // Actually, simpler to just write a recursive remover that checks against the Set of IDs.
-        const deleteSet = new Set(idsToDelete);
-        const removeRecursive = (parent) => {
-            if (!('children' in parent))
-                return;
-            const children = parent.children;
-            // Iterate backwards to safely splice
-            for (let i = children.length - 1; i >= 0; i--) {
-                const child = children[i];
-                if (deleteSet.has(child.id)) {
-                    collectFieldIds(child);
-                    children.splice(i, 1);
+        const topLevelEntries = idsToDelete
+            .filter(id => !isDescendantOfSelected(id))
+            .map(id => index[id])
+            .filter((entry) => !!entry);
+        if (topLevelEntries.length === 0)
+            return;
+        const current = this.schema();
+        const nextSchema = this.cloneValue(current);
+        const entriesByScope = new Map();
+        for (const entry of topLevelEntries) {
+            const key = entry.scopePath.join('/');
+            const scopeEntries = entriesByScope.get(key) ?? [];
+            scopeEntries.push(entry);
+            entriesByScope.set(key, scopeEntries);
+        }
+        for (const scopeEntries of entriesByScope.values()) {
+            const scopePath = scopeEntries[0].scopePath;
+            const scopeSchema = this.resolveSchemaAtScope(nextSchema, scopePath);
+            if (!scopeSchema)
+                continue;
+            const deleteSet = new Set(scopeEntries.map(entry => entry.rawNodeId));
+            const fieldsToRemove = new Set();
+            const collectFieldIds = (node) => {
+                if (node.type === 'widget' && node.refId) {
+                    fieldsToRemove.add(node.refId);
                 }
-                else {
-                    removeRecursive(child);
+                if ('children' in node) {
+                    node.children.forEach((child) => collectFieldIds(child));
                 }
-            }
-        };
-        // Handle root children manually? No, root is just a node.
-        removeRecursive(newLayout);
-        const newFields = current.fields.filter(f => !fieldsToRemove.includes(f.id));
-        this.setSchema({ ...current, fields: newFields, layout: newLayout });
+            };
+            const removeRecursive = (parent) => {
+                if (!('children' in parent))
+                    return;
+                const children = parent.children;
+                for (let i = children.length - 1; i >= 0; i -= 1) {
+                    const child = children[i];
+                    if (deleteSet.has(child.id)) {
+                        collectFieldIds(child);
+                        children.splice(i, 1);
+                    }
+                    else {
+                        removeRecursive(child);
+                    }
+                }
+            };
+            removeRecursive(scopeSchema.layout);
+            scopeSchema.fields = scopeSchema.fields.filter(field => !fieldsToRemove.has(field.id));
+        }
+        this.setSchema(nextSchema);
         this.selectNode(null);
     }
     // Helper to find parent of a node (simple traversal)
@@ -1063,20 +1160,21 @@ class DesignerStateService {
             return [];
         const path = [];
         for (const id of entry.path) {
-            const node = index[id]?.node;
+            const indexedEntry = index[id];
+            const node = indexedEntry?.node;
             if (!node)
                 continue;
-            path.push({ id, label: this.getNodeLabel(node), type: node.type });
+            path.push({ id, label: this.getNodeLabel(node, indexedEntry.scopePath), type: node.type });
         }
         return path;
     }
-    getNodeLabel(node) {
+    getNodeLabel(node, scopePath) {
         if (node.type === 'row')
             return 'Row';
         if (node.type === 'col')
             return 'Column';
         if (node.type === 'widget') {
-            const field = this.schema().fields.find(f => f.id === node.refId);
+            const field = this.findFieldByIdInScope(this.schema(), scopePath, node.refId ?? '');
             return field?.label || field?.type || 'Widget';
         }
         return 'Root';
@@ -1115,24 +1213,16 @@ class DesignerStateService {
         return false;
     }
     handleDrop(event, targetColId) {
+        const targetEntry = this.layoutIndex()[targetColId];
+        if (!targetEntry || targetEntry.node.type !== 'col')
+            return;
         const current = this.schema();
-        const newLayout = JSON.parse(JSON.stringify(current.layout)); // Deep clone
-        const newFields = [...current.fields];
-        // helper to find column in newLayout
-        const findCol = (root, id) => {
-            if (root.id === id && root.type === 'col')
-                return root;
-            if ('children' in root) {
-                for (const child of root.children) {
-                    const res = findCol(child, id);
-                    if (res)
-                        return res;
-                }
-            }
-            return null;
-        };
-        const targetCol = findCol(newLayout, targetColId);
-        if (!targetCol)
+        const newSchema = this.cloneValue(current);
+        const targetSchema = this.resolveSchemaAtScope(newSchema, targetEntry.scopePath);
+        if (!targetSchema)
+            return;
+        const targetCol = this.findNode(targetSchema.layout, targetEntry.rawNodeId);
+        if (!targetCol || targetCol.type !== 'col')
             return;
         if (event.previousContainer === event.container) {
             // Reorder
@@ -1150,44 +1240,24 @@ class DesignerStateService {
                     console.warn('Drag data missing widget info.');
                     return;
                 }
-                // Create new
-                let widgetNode;
-                if (data.widgetKind === 'field' || data.widgetKind === 'image') {
-                    // 1. Create Field (or static element backed by FieldSchema)
-                    // We need the widget def to create config. 
-                    const fieldId = v4();
-                    const field = {
-                        id: fieldId,
-                        name: `field_${Date.now()}`,
-                        type: data.widgetType,
-                        label: 'New Widget',
-                    };
-                    newFields.push(field);
-                    widgetNode = {
-                        id: v4(),
-                        type: 'widget',
-                        widgetKind: data.widgetKind,
-                        refId: fieldId
-                    };
-                }
-                else {
-                    // other widgets
-                    widgetNode = {
-                        id: v4(),
-                        type: 'widget',
-                        widgetKind: data.widgetKind,
-                        refId: v4()
-                    };
-                }
+                const widgetDef = this.resolveWidgetDefinition(data);
+                const field = this.createFieldFromWidget(widgetDef, data.widgetType);
+                targetSchema.fields.push(field);
+                const widgetNode = {
+                    id: v4(),
+                    type: 'widget',
+                    widgetKind: widgetDef?.kind ?? data.widgetKind,
+                    refId: field.id
+                };
                 targetCol.children.splice(event.currentIndex, 0, widgetNode);
             }
             else if (data && data.type === 'new-section' && data.section) {
                 const draft = data.section.build();
                 targetCol.children.splice(event.currentIndex, 0, draft.layout);
-                newFields.push(...draft.fields);
+                targetSchema.fields.push(...draft.fields);
             }
             else if (this.isLayoutNode(data)) {
-                const movedNode = this.detachNode(newLayout, data.id);
+                const movedNode = this.detachNode(targetSchema.layout, data.id);
                 if (!movedNode)
                     return;
                 targetCol.children.splice(event.currentIndex, 0, movedNode);
@@ -1196,84 +1266,76 @@ class DesignerStateService {
                 console.warn('Unsupported drag data dropped into layout.');
             }
         }
-        this.setSchema({
-            ...current,
-            fields: newFields,
-            layout: newLayout
-        });
+        this.setSchema(newSchema);
     }
     pushField(widgetDef) {
         if (this.isReadOnly())
             return;
-        // Existing logic unchanged
-        // Simplified Logic: Always append to the last column of the last row for now, 
-        // or check if there is a selected column.
         const current = this.schema();
-        const newFields = [...current.fields];
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
-        const fieldId = v4();
-        const field = {
-            id: fieldId,
-            widgetId: widgetDef.id, // Persist stable ID
-            name: `field_${Date.now()}`,
-            type: widgetDef.type,
-            label: widgetDef.label,
-        };
-        newFields.push(field);
+        const selectedId = this.selectedNodeId();
+        const selectedEntry = selectedId ? this.layoutIndex()[selectedId] : undefined;
+        const insertionScopePath = this.resolveInsertionScopePath(selectedEntry);
+        const nextSchema = this.cloneValue(current);
+        const targetSchema = this.resolveSchemaAtScope(nextSchema, insertionScopePath);
+        if (!targetSchema)
+            return;
+        const field = this.createFieldFromWidget(widgetDef, widgetDef.type);
+        targetSchema.fields.push(field);
         const widgetNode = {
             id: v4(),
             type: 'widget',
-            refId: fieldId,
-            widgetKind: widgetDef.kind // Use kind from definition
+            refId: field.id,
+            widgetKind: widgetDef.kind
         };
-        // Find target container
-        let targetCol = null;
-        // Strategy 1: Use Selected Node if it is a Column
-        const selectedId = this.selectedNodeId();
-        if (selectedId) {
-            const node = this.findNode(newLayout, selectedId);
-            if (node && node.type === 'col') {
-                targetCol = node;
-            }
-            else if (node && node.type === 'widget') {
-                // If selected node is a widget, find its parent column (needs parent pointers or traversal)
-                // For now, let's just default to root behavior if widget selected
-                // Or we could implement findParent(root, id)
-            }
+        const targetCol = this.resolveTargetColumnForFieldInsert(targetSchema, selectedEntry, insertionScopePath);
+        if (!targetCol)
+            return;
+        targetCol.children.push(widgetNode);
+        this.setSchema(nextSchema);
+        this.selectNode(this.composeScopedNodeId(insertionScopePath, widgetNode.id));
+    }
+    resolveWidgetDefinition(data) {
+        if (data.widgetId) {
+            const byId = this.widgetDefs.find(widget => widget.id === data.widgetId);
+            if (byId)
+                return byId;
         }
-        // Strategy 2: Default to first column of first row (or create new)
-        if (!targetCol) {
-            // Just find the first column we can
-            const findFirstCol = (node) => {
-                if (node.type === 'col')
-                    return node;
-                if ('children' in node) {
-                    for (const child of node.children) {
-                        const res = findFirstCol(child);
-                        if (res)
-                            return res;
-                    }
-                }
-                return null;
-            };
-            targetCol = findFirstCol(newLayout);
-        }
-        if (targetCol) {
-            targetCol.children.push(widgetNode);
-            this.setSchema({
-                ...current,
-                fields: newFields,
-                layout: newLayout
-            });
-            // Auto Select new field
-            this.selectNode(widgetNode.id);
+        return this.widgetDefs.find(widget => widget.kind === data.widgetKind && widget.type === data.widgetType);
+    }
+    createFieldFromWidget(widgetDef, fallbackType) {
+        const baseConfig = widgetDef?.createConfig ? widgetDef.createConfig() : {};
+        const normalizedName = typeof baseConfig.name === 'string' && baseConfig.name.trim().length > 0
+            ? baseConfig.name
+            : `field_${Date.now()}`;
+        const normalizedType = typeof baseConfig.type === 'string' && baseConfig.type.trim().length > 0
+            ? baseConfig.type
+            : (widgetDef?.type || fallbackType || 'text');
+        const normalizedLabel = typeof baseConfig.label === 'string' && baseConfig.label.trim().length > 0
+            ? baseConfig.label
+            : (widgetDef?.label || 'New Widget');
+        const field = {
+            ...baseConfig,
+            id: v4(),
+            name: normalizedName,
+            type: normalizedType,
+            label: normalizedLabel
+        };
+        if (widgetDef?.id) {
+            field.widgetId = widgetDef.id;
         }
+        return field;
     }
     pushStructure(type) {
         if (this.isReadOnly())
             return;
         const current = this.schema();
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
+        const selectedId = this.selectedNodeId();
+        const selectedEntry = selectedId ? this.layoutIndex()[selectedId] : undefined;
+        const insertionScopePath = this.resolveInsertionScopePath(selectedEntry);
+        const newSchema = this.cloneValue(current);
+        const targetSchema = this.resolveSchemaAtScope(newSchema, insertionScopePath);
+        if (!targetSchema)
+            return;
         // Create a new Row
         const newRow = {
             id: v4(),
@@ -1288,8 +1350,9 @@ class DesignerStateService {
             children: []
         };
         newRow.children.push(col1);
+        let col2;
         if (type === '2col') {
-            const col2 = {
+            col2 = {
                 id: v4(),
                 type: 'col',
                 responsive: { xs: 6 },
@@ -1297,30 +1360,39 @@ class DesignerStateService {
             };
             newRow.children.push(col2);
         }
-        // Add the new Row to the Root (Page)
-        // Root is 'col', so we push to its children
-        if (newLayout.type === 'col') {
-            newLayout.children.push(newRow);
+        const layoutRoot = targetSchema.layout;
+        if (layoutRoot.type === 'col') {
+            layoutRoot.children.push(newRow);
+        }
+        else if (layoutRoot.type === 'row') {
+            layoutRoot.children.push(col1);
+            if (col2) {
+                layoutRoot.children.push(col2);
+            }
         }
         else {
-            // Fallback if root is somehow still 'row' (migration?)
-            // We can't put a row in a row effectively without wrapping.
-            // For now assume root is fixed to col.
-            newLayout.children.push(newRow);
+            return;
         }
-        this.setSchema({ ...current, layout: newLayout });
+        this.setSchema(newSchema);
+        this.selectNode(this.composeScopedNodeId(insertionScopePath, col1.id));
     }
     // --- Column Management Methods ---
     /** Remove a column by its id */
     removeColumn(columnId) {
         if (this.isReadOnly())
             return;
+        const entry = this.resolveEntry(columnId);
+        if (!entry)
+            return;
         const current = this.schema();
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
+        const newSchema = this.cloneValue(current);
+        const scopeSchema = this.resolveSchemaAtScope(newSchema, entry.scopePath);
+        if (!scopeSchema)
+            return;
         // Find parent row and remove column
         const removeFromRow = (node) => {
             if (node.type === 'row') {
-                const idx = node.children.findIndex((c) => c.id === columnId && c.type === 'col');
+                const idx = node.children.findIndex((c) => c.id === entry.rawNodeId && c.type === 'col');
                 if (idx !== -1) {
                     node.children.splice(idx, 1);
                     return true;
@@ -1334,16 +1406,22 @@ class DesignerStateService {
             }
             return false;
         };
-        removeFromRow(newLayout);
-        this.setSchema({ ...current, layout: newLayout });
+        removeFromRow(scopeSchema.layout);
+        this.setSchema(newSchema);
     }
     /** Set preset column layout (e.g., 3,4,6) on a row */
     setPresetLayout(rowId, preset) {
         if (this.isReadOnly())
             return;
+        const entry = this.resolveEntry(rowId);
+        if (!entry)
+            return;
         const current = this.schema();
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
-        const rowNode = this.findNode(newLayout, rowId);
+        const newSchema = this.cloneValue(current);
+        const scopeSchema = this.resolveSchemaAtScope(newSchema, entry.scopePath);
+        if (!scopeSchema)
+            return;
+        const rowNode = this.findNode(scopeSchema.layout, entry.rawNodeId);
         if (!rowNode || rowNode.type !== 'row')
             return;
         rowNode.maxColumns = preset;
@@ -1368,15 +1446,21 @@ class DesignerStateService {
         rowNode.children.forEach((c) => {
             c.responsive = { xs: Math.floor(12 / preset) };
         });
-        this.setSchema({ ...current, layout: newLayout });
+        this.setSchema(newSchema);
     }
     /** Add one or more columns to a row */
     addColumn(rowId, count = 1) {
         if (this.isReadOnly())
             return;
+        const entry = this.resolveEntry(rowId);
+        if (!entry)
+            return;
         const current = this.schema();
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
-        const rowNode = this.findNode(newLayout, rowId);
+        const newSchema = this.cloneValue(current);
+        const scopeSchema = this.resolveSchemaAtScope(newSchema, entry.scopePath);
+        if (!scopeSchema)
+            return;
+        const rowNode = this.findNode(scopeSchema.layout, entry.rawNodeId);
         if (!rowNode || rowNode.type !== 'row')
             return;
         for (let i = 0; i < count; i++) {
@@ -1388,13 +1472,19 @@ class DesignerStateService {
             };
             rowNode.children.push(col);
         }
-        this.setSchema({ ...current, layout: newLayout });
+        this.setSchema(newSchema);
     }
     // --- Node Manipulation Methods (for floating toolbar) ---
     /** Move a node up or down within its parent container */
     moveNode(nodeId, direction) {
+        const entry = this.resolveEntry(nodeId);
+        if (!entry)
+            return;
         const current = this.schema();
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
+        const newSchema = this.cloneValue(current);
+        const scopeSchema = this.resolveSchemaAtScope(newSchema, entry.scopePath);
+        if (!scopeSchema)
+            return;
         // Find parent that contains this node
         const findParentAndIndex = (parent, id) => {
             if ('children' in parent) {
@@ -1411,7 +1501,7 @@ class DesignerStateService {
             }
             return null;
         };
-        const result = findParentAndIndex(newLayout, nodeId);
+        const result = findParentAndIndex(scopeSchema.layout, entry.rawNodeId);
         if (!result)
             return;
         const { parent, index } = result;
@@ -1424,13 +1514,19 @@ class DesignerStateService {
             // Swap with next
             [children[index], children[index + 1]] = [children[index + 1], children[index]];
         }
-        this.setSchema({ ...current, layout: newLayout });
+        this.setSchema(newSchema);
     }
     /** Duplicate a node (row, col, or widget) */
     duplicateNode(nodeId) {
+        const entry = this.resolveEntry(nodeId);
+        if (!entry)
+            return;
         const current = this.schema();
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
-        const newFields = [...current.fields];
+        const newSchema = this.cloneValue(current);
+        const scopeSchema = this.resolveSchemaAtScope(newSchema, entry.scopePath);
+        if (!scopeSchema)
+            return;
+        const scopeFields = scopeSchema.fields;
         // Find node and its parent
         const findParentAndNode = (parent, id) => {
             if ('children' in parent) {
@@ -1447,7 +1543,7 @@ class DesignerStateService {
             }
             return null;
         };
-        const result = findParentAndNode(newLayout, nodeId);
+        const result = findParentAndNode(scopeSchema.layout, entry.rawNodeId);
         if (!result)
             return;
         const { parent, node, index } = result;
@@ -1458,7 +1554,7 @@ class DesignerStateService {
             cloned.id = v4();
             // If it's a widget, also duplicate the field
             if (cloned.type === 'widget' && cloned.refId) {
-                const originalField = current.fields.find(f => f.id === cloned.refId);
+                const originalField = scopeFields.find(f => f.id === cloned.refId);
                 if (originalField) {
                     const newFieldId = v4();
                     const newField = {
@@ -1467,7 +1563,7 @@ class DesignerStateService {
                         name: `${originalField.name}_copy_${Date.now()}`,
                         label: `${originalField.label || 'Field'} (Copy)`
                     };
-                    newFields.push(newField);
+                    scopeFields.push(newField);
                     cloned.refId = newFieldId;
                 }
             }
@@ -1478,18 +1574,24 @@ class DesignerStateService {
         };
         const duplicatedNode = cloneWithNewIds(node);
         children.splice(index + 1, 0, duplicatedNode);
-        this.setSchema({ ...current, fields: newFields, layout: newLayout });
-        this.selectNode(duplicatedNode.id);
+        this.setSchema(newSchema);
+        this.selectNode(this.composeScopedNodeId(entry.scopePath, duplicatedNode.id));
     }
     /** Delete a node (row, col, or widget) and associated field if widget */
     deleteNode(nodeId) {
+        const entry = this.resolveEntry(nodeId);
+        if (!entry)
+            return;
         const current = this.schema();
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
-        let fieldsToRemove = [];
+        const newSchema = this.cloneValue(current);
+        const scopeSchema = this.resolveSchemaAtScope(newSchema, entry.scopePath);
+        if (!scopeSchema)
+            return;
+        const fieldsToRemove = new Set();
         // Collect field IDs to remove (for widgets)
         const collectFieldIds = (node) => {
             if (node.type === 'widget' && node.refId) {
-                fieldsToRemove.push(node.refId);
+                fieldsToRemove.add(node.refId);
             }
             if ('children' in node) {
                 node.children.forEach(c => collectFieldIds(c));
@@ -1512,82 +1614,82 @@ class DesignerStateService {
             }
             return false;
         };
-        removeFromParent(newLayout, nodeId);
-        // Filter out removed fields
-        const newFields = current.fields.filter(f => !fieldsToRemove.includes(f.id));
+        removeFromParent(scopeSchema.layout, entry.rawNodeId);
+        scopeSchema.fields = scopeSchema.fields.filter(field => !fieldsToRemove.has(field.id));
         // Clear selection
-        if (this.selectedNodeId() === nodeId) {
+        if (this.selectedNodeId() === nodeId || this.selectedNodeId() === this.composeScopedNodeId(entry.scopePath, entry.rawNodeId)) {
             this.selectNode(null);
         }
-        this.setSchema({ ...current, fields: newFields, layout: newLayout });
+        this.setSchema(newSchema);
     }
     // Phase 2: Duplicate field
     duplicateField(fieldId) {
         const current = this.schema();
-        const field = current.fields.find(f => f.id === fieldId);
-        if (!field)
+        const nextSchema = this.cloneValue(current);
+        const preferredScope = this.selectedNodeScopePath();
+        const location = this.findFieldLocation(nextSchema, fieldId, preferredScope);
+        if (!location)
             return;
-        // Create new field with copied properties
         const newFieldId = v4();
         const newField = {
-            ...JSON.parse(JSON.stringify(field)),
+            ...JSON.parse(JSON.stringify(location.field)),
             id: newFieldId,
-            name: `${field.name}_copy_${Date.now()}`,
-            label: `${field.label || 'Field'} (Copy)`
+            name: `${location.field.name}_copy_${Date.now()}`,
+            label: `${location.field.label || 'Field'} (Copy)`
         };
-        // Find the widget node that references this field
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
-        const widgetNode = this.findWidgetByRefId(newLayout, fieldId);
-        if (widgetNode) {
-            // Find parent column and insert duplicate after original
-            const parent = this.findParentCol(newLayout, widgetNode.id);
-            if (parent) {
-                const index = parent.children.findIndex((c) => c.id === widgetNode.id);
-                const newWidgetNode = {
-                    id: v4(),
-                    type: 'widget',
-                    widgetKind: 'field',
-                    refId: newFieldId
-                };
-                parent.children.splice(index + 1, 0, newWidgetNode);
-            }
+        location.schema.fields.push(newField);
+        const widgetNode = this.findWidgetByRefId(location.schema.layout, fieldId);
+        if (!widgetNode) {
+            this.setSchema(nextSchema);
+            return;
         }
-        this.setSchema({
-            ...current,
-            fields: [...current.fields, newField],
-            layout: newLayout
-        });
+        const parent = this.findParentCol(location.schema.layout, widgetNode.id);
+        if (!parent) {
+            this.setSchema(nextSchema);
+            return;
+        }
+        const index = parent.children.findIndex((candidate) => candidate.id === widgetNode.id);
+        const newWidgetNode = {
+            id: v4(),
+            type: 'widget',
+            widgetKind: widgetNode.widgetKind ?? 'field',
+            refId: newFieldId
+        };
+        parent.children.splice(index + 1, 0, newWidgetNode);
+        this.setSchema(nextSchema);
+        this.selectNode(this.composeScopedNodeId(location.scopePath, newWidgetNode.id));
     }
     // Phase 2: Remove field
     removeField(fieldId) {
         const current = this.schema();
-        const newFields = current.fields.filter(f => f.id !== fieldId);
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
-        // Find and remove widget that references this field
-        this.removeWidgetByRefId(newLayout, fieldId);
-        // Clear selection if we removed the selected node
-        const selectedNode = this.selectedNode();
-        if (selectedNode && selectedNode.type === 'widget' && selectedNode.refId === fieldId) {
-            this.selectNode(null);
+        const nextSchema = this.cloneValue(current);
+        const preferredScope = this.selectedNodeScopePath();
+        const location = this.findFieldLocation(nextSchema, fieldId, preferredScope);
+        if (!location)
+            return;
+        location.schema.fields = location.schema.fields.filter(field => field.id !== fieldId);
+        this.removeWidgetByRefId(location.schema.layout, fieldId);
+        const selectedId = this.selectedNodeId();
+        if (selectedId) {
+            const selectedEntry = this.layoutIndex()[selectedId];
+            if (selectedEntry?.node.type === 'widget' && selectedEntry.node.refId === fieldId && this.sameScope(selectedEntry.scopePath, location.scopePath)) {
+                this.selectNode(null);
+            }
         }
-        this.setSchema({
-            ...current,
-            fields: newFields,
-            layout: newLayout
-        });
+        this.setSchema(nextSchema);
     }
     updateField(fieldId, updates) {
         const current = this.schema();
-        const newFields = current.fields.map(f => {
-            if (f.id === fieldId) {
-                return { ...f, ...updates };
-            }
-            return f;
-        });
-        this.setSchema({
-            ...current,
-            fields: newFields
-        });
+        const nextSchema = this.cloneValue(current);
+        const preferredScope = this.selectedNodeScopePath();
+        const location = this.findFieldLocation(nextSchema, fieldId, preferredScope);
+        if (!location)
+            return;
+        location.schema.fields[location.index] = {
+            ...location.field,
+            ...updates
+        };
+        this.setSchema(nextSchema);
     }
     groupSelectedFields() {
         const selected = this.getSelectedWidgetFields();
@@ -1638,23 +1740,23 @@ class DesignerStateService {
         return this.getSelectedWidgetFields().some(field => !!field.groupKey);
     }
     getSelectedWidgetFields() {
-        const current = this.schema();
         const index = this.layoutIndex();
-        const fieldMap = new Map(current.fields.map(field => [field.id, field]));
         const selectedFields = [];
         const seen = new Set();
         for (const nodeId of this.selectedNodeIds()) {
-            const node = index[nodeId]?.node;
+            const entry = index[nodeId];
+            const node = entry?.node;
             if (!node || node.type !== 'widget')
                 continue;
             const refId = node.refId;
-            if (!refId || seen.has(refId))
+            const scopeRefKey = `${entry.scopePath.join('/')}:${refId ?? ''}`;
+            if (!refId || seen.has(scopeRefKey))
                 continue;
-            const field = fieldMap.get(refId);
+            const field = this.findFieldByIdInScope(this.schema(), entry.scopePath, refId);
             if (!field)
                 continue;
             selectedFields.push(field);
-            seen.add(refId);
+            seen.add(scopeRefKey);
         }
         return selectedFields;
     }
@@ -1663,20 +1765,36 @@ class DesignerStateService {
      * Only the path from root to the target node gets new references.
      */
     updateNodeStyle(nodeId, style) {
+        const entry = this.resolveEntry(nodeId);
+        if (!entry)
+            return;
         const current = this.schema();
-        const newLayout = this.updateNodeInTree(current.layout, nodeId, { style });
-        if (newLayout !== current.layout) {
-            this.setSchema({ ...current, layout: newLayout });
+        const nextSchema = this.cloneValue(current);
+        const scopeSchema = this.resolveSchemaAtScope(nextSchema, entry.scopePath);
+        if (!scopeSchema)
+            return;
+        const newLayout = this.updateNodeInTree(scopeSchema.layout, entry.rawNodeId, { style });
+        if (newLayout !== scopeSchema.layout) {
+            scopeSchema.layout = newLayout;
+            this.setSchema(nextSchema);
         }
     }
     /**
      * Update a specific node's responsive settings.
      */
     updateNodeResponsive(nodeId, responsive) {
+        const entry = this.resolveEntry(nodeId);
+        if (!entry)
+            return;
         const current = this.schema();
-        const newLayout = this.updateNodeInTree(current.layout, nodeId, { responsive });
-        if (newLayout !== current.layout) {
-            this.setSchema({ ...current, layout: newLayout });
+        const nextSchema = this.cloneValue(current);
+        const scopeSchema = this.resolveSchemaAtScope(nextSchema, entry.scopePath);
+        if (!scopeSchema)
+            return;
+        const newLayout = this.updateNodeInTree(scopeSchema.layout, entry.rawNodeId, { responsive });
+        if (newLayout !== scopeSchema.layout) {
+            scopeSchema.layout = newLayout;
+            this.setSchema(nextSchema);
         }
     }
     /**
@@ -1703,6 +1821,146 @@ class DesignerStateService {
         }
         return node; // Unchanged - return original reference
     }
+    resolveEntry(nodeId) {
+        const direct = this.layoutIndex()[nodeId];
+        if (direct)
+            return direct;
+        const selectedId = this.selectedNodeId();
+        if (!selectedId)
+            return null;
+        const selectedEntry = this.layoutIndex()[selectedId];
+        if (!selectedEntry)
+            return null;
+        if (selectedEntry.rawNodeId !== nodeId)
+            return null;
+        return selectedEntry;
+    }
+    resolveSchemaAtScope(root, scopePath) {
+        let cursor = root;
+        for (const repeatableFieldId of scopePath) {
+            const field = cursor.fields.find(candidate => candidate.id === repeatableFieldId);
+            const itemSchema = field?.repeatable?.itemSchema;
+            if (!field || !itemSchema?.layout || !Array.isArray(itemSchema.fields)) {
+                return null;
+            }
+            cursor = itemSchema;
+        }
+        return cursor;
+    }
+    findFieldByIdInScope(root, scopePath, fieldId) {
+        const scopeSchema = this.resolveSchemaAtScope(root, scopePath);
+        if (!scopeSchema)
+            return null;
+        return scopeSchema.fields.find(field => field.id === fieldId) ?? null;
+    }
+    resolveInsertionScopePath(selectedEntry) {
+        if (!selectedEntry)
+            return [];
+        if (selectedEntry.node.type !== 'widget')
+            return selectedEntry.scopePath;
+        const widgetNode = selectedEntry.node;
+        const field = this.findFieldByIdInScope(this.schema(), selectedEntry.scopePath, widgetNode.refId ?? '');
+        if (field?.type === 'repeatable-group' && field.repeatable?.itemSchema) {
+            return [...selectedEntry.scopePath, field.id];
+        }
+        return selectedEntry.scopePath;
+    }
+    resolveTargetColumnForFieldInsert(targetSchema, selectedEntry, insertionScopePath) {
+        if (selectedEntry && this.sameScope(selectedEntry.scopePath, insertionScopePath)) {
+            if (selectedEntry.node.type === 'col') {
+                const selectedCol = this.findNode(targetSchema.layout, selectedEntry.rawNodeId);
+                if (selectedCol && selectedCol.type === 'col') {
+                    return selectedCol;
+                }
+            }
+            if (selectedEntry.node.type === 'widget') {
+                const parent = this.findParentCol(targetSchema.layout, selectedEntry.rawNodeId);
+                if (parent)
+                    return parent;
+            }
+        }
+        return this.findFirstColumn(targetSchema.layout);
+    }
+    findFirstColumn(node) {
+        if (node.type === 'col')
+            return node;
+        if (!('children' in node))
+            return null;
+        for (const child of node.children) {
+            const match = this.findFirstColumn(child);
+            if (match)
+                return match;
+        }
+        return null;
+    }
+    selectedNodeScopePath() {
+        const selectedId = this.selectedNodeId();
+        if (!selectedId)
+            return undefined;
+        const entry = this.layoutIndex()[selectedId];
+        if (!entry)
+            return undefined;
+        return entry.scopePath;
+    }
+    findFieldLocation(root, fieldId, preferredScopePath) {
+        const searchInScope = (scopeSchema, scopePath) => {
+            const index = scopeSchema.fields.findIndex(candidate => candidate.id === fieldId);
+            if (index !== -1) {
+                return {
+                    schema: scopeSchema,
+                    field: scopeSchema.fields[index],
+                    index,
+                    scopePath
+                };
+            }
+            for (const field of scopeSchema.fields) {
+                const itemSchema = field.repeatable?.itemSchema;
+                if (!itemSchema?.layout || !Array.isArray(itemSchema.fields))
+                    continue;
+                const nestedScopePath = [...scopePath, field.id];
+                const nestedMatch = searchInScope(itemSchema, nestedScopePath);
+                if (nestedMatch)
+                    return nestedMatch;
+            }
+            return null;
+        };
+        if (preferredScopePath) {
+            const preferredSchema = this.resolveSchemaAtScope(root, preferredScopePath);
+            if (preferredSchema) {
+                const preferredIndex = preferredSchema.fields.findIndex(candidate => candidate.id === fieldId);
+                if (preferredIndex !== -1) {
+                    return {
+                        schema: preferredSchema,
+                        field: preferredSchema.fields[preferredIndex],
+                        index: preferredIndex,
+                        scopePath: preferredScopePath
+                    };
+                }
+            }
+        }
+        return searchInScope(root, []);
+    }
+    sameScope(left, right) {
+        if (left.length !== right.length)
+            return false;
+        for (let i = 0; i < left.length; i += 1) {
+            if (left[i] !== right[i])
+                return false;
+        }
+        return true;
+    }
+    isScopePrefix(prefix, value) {
+        if (prefix.length > value.length)
+            return false;
+        for (let i = 0; i < prefix.length; i += 1) {
+            if (prefix[i] !== value[i])
+                return false;
+        }
+        return true;
+    }
+    cloneValue(value) {
+        return JSON.parse(JSON.stringify(value));
+    }
     isLayoutNode(value) {
         if (!value || typeof value !== 'object')
             return false;
@@ -1767,9 +2025,15 @@ class DesignerStateService {
      * Useful for creating nested grids.
      */
     insertRowInColumn(columnId, colCount = 1) {
+        const entry = this.resolveEntry(columnId);
+        if (!entry)
+            return;
         const current = this.schema();
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
-        const colNode = this.findNode(newLayout, columnId);
+        const newSchema = this.cloneValue(current);
+        const scopeSchema = this.resolveSchemaAtScope(newSchema, entry.scopePath);
+        if (!scopeSchema)
+            return;
+        const colNode = this.findNode(scopeSchema.layout, entry.rawNodeId);
         if (!colNode || colNode.type !== 'col')
             return;
         const newRow = {
@@ -1787,9 +2051,9 @@ class DesignerStateService {
             });
         }
         colNode.children.push(newRow);
-        this.setSchema({ ...current, layout: newLayout });
+        this.setSchema(newSchema);
         // Select the first column of the new row to aid flow
-        this.selectNode(newRow.children[0].id);
+        this.selectNode(this.composeScopedNodeId(entry.scopePath, newRow.children[0].id));
     }
     /**
      * Wrap an existing widget in a new Row -> Column structure.
@@ -1797,10 +2061,16 @@ class DesignerStateService {
      * and puts the widget inside the new Row's Column.
      */
     wrapWidgetInRow(widgetId) {
+        const entry = this.resolveEntry(widgetId);
+        if (!entry)
+            return;
         const current = this.schema();
-        const newLayout = JSON.parse(JSON.stringify(current.layout));
+        const newSchema = this.cloneValue(current);
+        const scopeSchema = this.resolveSchemaAtScope(newSchema, entry.scopePath);
+        if (!scopeSchema)
+            return;
         // 1. Find the widget and its parent
-        const findResult = this.findParentAndIndex(newLayout, widgetId);
+        const findResult = this.findParentAndIndex(scopeSchema.layout, entry.rawNodeId);
         if (!findResult)
             return;
         const { parent, index } = findResult;
@@ -1820,10 +2090,10 @@ class DesignerStateService {
         };
         // 3. Replace widget in parent with new Row
         parent.children.splice(index, 1, newRow);
-        this.setSchema({ ...current, layout: newLayout });
+        this.setSchema(newSchema);
         // Keep selection on widget? Or select the new Row?
         // Let's keep widget selected so context remains
-        this.selectNode(widgetId);
+        this.selectNode(this.composeScopedNodeId(entry.scopePath, entry.rawNodeId));
     }
     // Internal helper which was seemingly missing in previous steps but needed now
     findParentAndIndex(root, childId) {
@@ -1861,6 +2131,7 @@ class LayoutNodeComponent {
     engine;
     fields = [];
     designMode = false;
+    scopePath = [];
     device = 'desktop';
     breakpoint = 'xl';
     nodeDrop = new EventEmitter();
@@ -1887,10 +2158,10 @@ class LayoutNodeComponent {
         this.widgetDefs = this.allWidgetDefs;
     }
     get isSelected() {
-        return this.designerState.isNodeSelected(this.node.id);
+        return this.designerState.isNodeSelected(this.getScopedNodeId(this.node.id));
     }
     isNodeSelected(nodeId) {
-        return this.designerState.isNodeSelected(nodeId);
+        return this.designerState.isNodeSelected(this.getScopedNodeId(nodeId));
     }
     onWidgetClick(e) {
         if (!this.designMode)
@@ -1898,10 +2169,10 @@ class LayoutNodeComponent {
         e.stopPropagation();
         this.designerState.closeContextMenu();
         if (e instanceof MouseEvent && (e.ctrlKey || e.metaKey || e.shiftKey)) {
-            this.designerState.toggleNodeSelection(this.node.id);
+            this.designerState.toggleNodeSelection(this.getScopedNodeId(this.node.id));
         }
         else {
-            this.nodeSelect.emit(this.node.id);
+            this.nodeSelect.emit(this.getScopedNodeId(this.node.id));
         }
     }
     onWidgetContextMenu(e) {
@@ -1909,8 +2180,8 @@ class LayoutNodeComponent {
             return;
         e.preventDefault();
         e.stopPropagation();
-        if (!this.designerState.isNodeSelected(this.node.id)) {
-            this.nodeSelect.emit(this.node.id);
+        if (!this.designerState.isNodeSelected(this.getScopedNodeId(this.node.id))) {
+            this.nodeSelect.emit(this.getScopedNodeId(this.node.id));
         }
         this.designerState.openContextMenu({ x: e.clientX, y: e.clientY });
     }
@@ -1920,10 +2191,10 @@ class LayoutNodeComponent {
         e.stopPropagation();
         this.designerState.closeContextMenu();
         if (e instanceof MouseEvent && (e.ctrlKey || e.metaKey || e.shiftKey)) {
-            this.designerState.toggleNodeSelection(this.node.id);
+            this.designerState.toggleNodeSelection(this.getScopedNodeId(this.node.id));
         }
         else {
-            this.nodeSelect.emit(this.node.id);
+            this.nodeSelect.emit(this.getScopedNodeId(this.node.id));
         }
     }
     onRowClick(e) {
@@ -1932,10 +2203,10 @@ class LayoutNodeComponent {
         e.stopPropagation();
         this.designerState.closeContextMenu();
         if (e instanceof MouseEvent && (e.ctrlKey || e.metaKey || e.shiftKey)) {
-            this.designerState.toggleNodeSelection(this.node.id);
+            this.designerState.toggleNodeSelection(this.getScopedNodeId(this.node.id));
         }
         else {
-            this.nodeSelect.emit(this.node.id);
+            this.nodeSelect.emit(this.getScopedNodeId(this.node.id));
         }
     }
     onRowContextMenu(e) {
@@ -1943,8 +2214,8 @@ class LayoutNodeComponent {
             return;
         e.preventDefault();
         e.stopPropagation();
-        if (!this.designerState.isNodeSelected(this.node.id)) {
-            this.nodeSelect.emit(this.node.id);
+        if (!this.designerState.isNodeSelected(this.getScopedNodeId(this.node.id))) {
+            this.nodeSelect.emit(this.getScopedNodeId(this.node.id));
         }
         this.designerState.openContextMenu({ x: e.clientX, y: e.clientY });
     }
@@ -1953,36 +2224,36 @@ class LayoutNodeComponent {
             return;
         e.preventDefault();
         e.stopPropagation();
-        if (!this.designerState.isNodeSelected(this.node.id)) {
-            this.nodeSelect.emit(this.node.id);
+        if (!this.designerState.isNodeSelected(this.getScopedNodeId(this.node.id))) {
+            this.nodeSelect.emit(this.getScopedNodeId(this.node.id));
         }
         this.designerState.openContextMenu({ x: e.clientX, y: e.clientY });
     }
     onDrop(event) {
         if (this.designMode) {
-            this.designerState.handleDrop(event, this.node.id);
+            this.designerState.handleDrop(event, this.getScopedNodeId(this.node.id));
         }
     }
     // Floating Toolbar Actions
     moveNodeUp() {
-        this.designerState.moveNode(this.node.id, 'up');
+        this.designerState.moveNode(this.getScopedNodeId(this.node.id), 'up');
     }
     moveNodeDown() {
-        this.designerState.moveNode(this.node.id, 'down');
+        this.designerState.moveNode(this.getScopedNodeId(this.node.id), 'down');
     }
     deleteNode() {
-        this.designerState.deleteNode(this.node.id);
+        this.designerState.deleteNode(this.getScopedNodeId(this.node.id));
     }
     duplicateNode() {
-        this.designerState.duplicateNode(this.node.id);
+        this.designerState.duplicateNode(this.getScopedNodeId(this.node.id));
     }
     // Phase 5 Actions
     insertRowInColumn() {
         // Default to adding a single column row, maybe prompt user in future?
-        this.designerState.insertRowInColumn(this.node.id, 1);
+        this.designerState.insertRowInColumn(this.getScopedNodeId(this.node.id), 1);
     }
     wrapWidgetInRow() {
-        this.designerState.wrapWidgetInRow(this.node.id);
+        this.designerState.wrapWidgetInRow(this.getScopedNodeId(this.node.id));
     }
     getNodeTypeLabel() {
         if (this.node.type === 'widget') {
@@ -2039,7 +2310,7 @@ class LayoutNodeComponent {
         this.resizeStartHeight = isNaN(currentHeight) ? 50 : currentHeight;
         document.addEventListener('mousemove', this.resizeMoveListener);
         document.addEventListener('mouseup', this.resizeUpListener);
-        this.designerState.selectNode(node.id);
+        this.designerState.selectNode(this.getScopedNodeId(node.id));
     }
     // Column Width Resize
     onColResizeStart(e, node) {
@@ -2056,7 +2327,7 @@ class LayoutNodeComponent {
         this.resizeStartSpan = activeSpan;
         document.addEventListener('mousemove', this.resizeMoveListener);
         document.addEventListener('mouseup', this.resizeUpListener);
-        this.designerState.selectNode(node.id);
+        this.designerState.selectNode(this.getScopedNodeId(node.id));
     }
     onResizeMove(e) {
         // Handle Height Resize
@@ -2191,6 +2462,9 @@ class LayoutNodeComponent {
             return;
         this.widgetComponentRef.setInput('config', config);
         this.widgetComponentRef.setInput('engine', this.getEngineForRender());
+        if (config.type === 'repeatable-group') {
+            this.widgetComponentRef.setInput('scopePath', this.scopePath);
+        }
         const control = this.getWidgetControl(field);
         if (control) {
             this.widgetComponentRef.setInput('control', control);
@@ -2213,7 +2487,7 @@ class LayoutNodeComponent {
     createWidgetInjector(widgetNode) {
         const context = {
             isDesignMode: () => this.designMode,
-            isSelected: () => this.designMode && this.designerState.selectedNodeId() === widgetNode.id,
+            isSelected: () => this.designMode && this.designerState.selectedNodeId() === this.getScopedNodeId(widgetNode.id),
             updateField: (fieldId, updates) => {
                 if (!this.designMode)
                     return;
@@ -2243,6 +2517,21 @@ class LayoutNodeComponent {
     trackById(index, node) {
         return node.id;
     }
+    getScopedNodeId(nodeId) {
+        return this.designerState.composeScopedNodeId(this.scopePath, nodeId);
+    }
+    hasActiveNestedSelection() {
+        if (this.node.type !== 'widget')
+            return false;
+        const widgetNode = this.node;
+        if (!widgetNode.refId)
+            return false;
+        const field = this.fields.find(candidate => candidate.id === widgetNode.refId)
+            ?? this.engine?.getSchema()?.fields?.find(candidate => candidate.id === widgetNode.refId);
+        if (!field || field.type !== 'repeatable-group')
+            return false;
+        return this.designerState.isSelectionInScope([...this.scopePath, field.id]);
+    }
     asRow(node) { return node; }
     asCol(node) { return node; }
     getColClasses(node) {
@@ -2349,7 +2638,7 @@ class LayoutNodeComponent {
         return !this.engine.isFieldVisible(field.id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutNodeComponent, deps: [{ token: WIDGET_DEFINITIONS }, { token: DesignerStateService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: LayoutNodeComponent, isStandalone: true, selector: "app-layout-node", inputs: { node: "node", engine: "engine", fields: "fields", designMode: "designMode", device: "device", breakpoint: "breakpoint", connectedDropLists: "connectedDropLists" }, outputs: { nodeDrop: "nodeDrop", nodeSelect: "nodeSelect" }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: LayoutNodeComponent, isStandalone: true, selector: "app-layout-node", inputs: { node: "node", engine: "engine", fields: "fields", designMode: "designMode", scopePath: "scopePath", device: "device", breakpoint: "breakpoint", connectedDropLists: "connectedDropLists" }, outputs: { nodeDrop: "nodeDrop", nodeSelect: "nodeSelect" }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: `
     <ng-container [ngSwitch]="node.type">
       
       <!-- ROW -->
@@ -2397,6 +2686,7 @@ class LayoutNodeComponent {
                          [engine]="engine"
                          [fields]="fields"
                          [designMode]="designMode"
+                         [scopePath]="scopePath"
                          [device]="device"
                          [breakpoint]="breakpoint"
                          [connectedDropLists]="connectedDropLists"
@@ -2423,7 +2713,7 @@ class LayoutNodeComponent {
              (contextmenu)="onColumnContextMenu($event)"
              cdkDropList
              [cdkDropListData]="node"
-             [id]="node.id"
+             [id]="getScopedNodeId(node.id)"
              [cdkDropListConnectedTo]="connectedDropLists"
              (cdkDropListDropped)="onDrop($event)"
              [class.outline-dashed]="designMode"
@@ -2477,6 +2767,7 @@ class LayoutNodeComponent {
                               [engine]="engine"
                               [fields]="fields"
                               [designMode]="designMode"
+                              [scopePath]="scopePath"
                               [device]="device"
                               [breakpoint]="breakpoint"
                               [connectedDropLists]="connectedDropLists"
@@ -2552,7 +2843,7 @@ class LayoutNodeComponent {
         </div>
         
         <!-- Overlay for selection in design mode - only show on unselected widgets to allow interaction with selected ones -->
-        <div *ngIf="designMode && !isSelected" class="absolute inset-0 cursor-pointer z-10 hover:bg-blue-500/5" (click)="onWidgetClick($event)"></div>
+        <div *ngIf="designMode && !isSelected && !hasActiveNestedSelection()" class="absolute inset-0 cursor-pointer z-10 hover:bg-blue-500/5" (click)="onWidgetClick($event)"></div>
         <div *ngIf="designMode && isSelected" 
              class="absolute bottom-0 left-0 right-0 h-3 cursor-row-resize bg-transparent hover:bg-blue-400/20 transition-colors z-50 group-hover:bg-blue-100/30"
              (mousedown)="onResizeStart($event, node)"
@@ -2562,7 +2853,7 @@ class LayoutNodeComponent {
       </ng-container>
 
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "scopePath", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutNodeComponent, decorators: [{
             type: Component,
@@ -2619,6 +2910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                          [engine]="engine"
                          [fields]="fields"
                          [designMode]="designMode"
+                         [scopePath]="scopePath"
                          [device]="device"
                          [breakpoint]="breakpoint"
                          [connectedDropLists]="connectedDropLists"
@@ -2645,7 +2937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
              (contextmenu)="onColumnContextMenu($event)"
              cdkDropList
              [cdkDropListData]="node"
-             [id]="node.id"
+             [id]="getScopedNodeId(node.id)"
              [cdkDropListConnectedTo]="connectedDropLists"
              (cdkDropListDropped)="onDrop($event)"
              [class.outline-dashed]="designMode"
@@ -2699,6 +2991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                               [engine]="engine"
                               [fields]="fields"
                               [designMode]="designMode"
+                              [scopePath]="scopePath"
                               [device]="device"
                               [breakpoint]="breakpoint"
                               [connectedDropLists]="connectedDropLists"
@@ -2774,7 +3067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         </div>
         
         <!-- Overlay for selection in design mode - only show on unselected widgets to allow interaction with selected ones -->
-        <div *ngIf="designMode && !isSelected" class="absolute inset-0 cursor-pointer z-10 hover:bg-blue-500/5" (click)="onWidgetClick($event)"></div>
+        <div *ngIf="designMode && !isSelected && !hasActiveNestedSelection()" class="absolute inset-0 cursor-pointer z-10 hover:bg-blue-500/5" (click)="onWidgetClick($event)"></div>
         <div *ngIf="designMode && isSelected" 
              class="absolute bottom-0 left-0 right-0 h-3 cursor-row-resize bg-transparent hover:bg-blue-400/20 transition-colors z-50 group-hover:bg-blue-100/30"
              (mousedown)="onResizeStart($event, node)"
@@ -2797,6 +3090,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], designMode: [{
                 type: Input
+            }], scopePath: [{
+                type: Input
             }], device: [{
                 type: Input
             }], breakpoint: [{
@@ -3073,32 +3368,73 @@ class JsonFormRendererComponent {
             return {};
         const uploaded = {};
         const schema = this.engine.getSchema();
+        const values = this.engine.getValues();
+        const changedTopLevelFields = new Set();
+        await this.uploadPendingFilesInSchema({
+            schema,
+            valueScope: values,
+            uploaded,
+            markTopLevelChanged: (fieldName) => changedTopLevelFields.add(fieldName)
+        });
+        for (const fieldName of changedTopLevelFields) {
+            this.engine.setValue(fieldName, values[fieldName]);
+        }
+        return uploaded;
+    }
+    async uploadPendingFilesInSchema(params) {
+        const { schema, valueScope, uploaded, markTopLevelChanged, pathPrefix = '', topLevelFieldName } = params;
         for (const field of schema.fields) {
-            if (field.type !== 'file')
+            if (!field?.name)
                 continue;
-            const pendingFiles = this.getPendingFiles(this.engine.getValue(field.name));
-            if (pendingFiles.length === 0)
-                continue;
-            const endpoint = field.uploadUrl?.trim() || DEFAULT_UPLOAD_ENDPOINT;
-            try {
-                const refs = await this.uploadClient.upload(pendingFiles, {
-                    endpoint,
-                    fieldId: field.id,
-                    fieldName: field.name,
-                    fieldKey: field.uploadFieldName || undefined
-                });
-                if (refs.length > 0) {
-                    const storedValue = field.multiple ? refs : (refs[0] ?? null);
-                    field.defaultValue = storedValue;
-                    this.engine.setValue(field.name, storedValue);
-                    uploaded[field.id] = refs;
+            if (field.type === 'file') {
+                const pendingFiles = this.getPendingFiles(valueScope[field.name]);
+                if (pendingFiles.length === 0)
+                    continue;
+                const endpoint = field.uploadUrl?.trim() || DEFAULT_UPLOAD_ENDPOINT;
+                try {
+                    const refs = await this.uploadClient.upload(pendingFiles, {
+                        endpoint,
+                        fieldId: field.id,
+                        fieldName: field.name,
+                        fieldKey: field.uploadFieldName || undefined
+                    });
+                    if (refs.length > 0) {
+                        const storedValue = field.multiple ? refs : (refs[0] ?? null);
+                        valueScope[field.name] = storedValue;
+                        const uploadedKey = pathPrefix ? `${pathPrefix}.${field.id}` : field.id;
+                        uploaded[uploadedKey] = refs;
+                        markTopLevelChanged(topLevelFieldName ?? field.name);
+                    }
+                }
+                catch (error) {
+                    console.warn('[ngx-form-designer] File upload failed', { fieldId: field.id, error });
                 }
+                continue;
             }
-            catch (error) {
-                console.warn('[ngx-form-designer] File upload failed', { fieldId: field.id, error });
+            if (field.type !== 'repeatable-group')
+                continue;
+            const itemSchema = field.repeatable?.itemSchema;
+            if (!itemSchema || !Array.isArray(itemSchema.fields) || !itemSchema.layout)
+                continue;
+            const rawRows = valueScope[field.name];
+            if (!Array.isArray(rawRows))
+                continue;
+            const nestedTopLevel = topLevelFieldName ?? field.name;
+            for (let rowIndex = 0; rowIndex < rawRows.length; rowIndex += 1) {
+                const rowValue = rawRows[rowIndex];
+                if (!this.isObjectRecord(rowValue))
+                    continue;
+                const rowPath = pathPrefix ? `${pathPrefix}.${field.id}[${rowIndex}]` : `${field.id}[${rowIndex}]`;
+                await this.uploadPendingFilesInSchema({
+                    schema: itemSchema,
+                    valueScope: rowValue,
+                    uploaded,
+                    markTopLevelChanged,
+                    pathPrefix: rowPath,
+                    topLevelFieldName: nestedTopLevel
+                });
             }
         }
-        return uploaded;
     }
     getPendingFiles(value) {
         if (this.isFile(value))
@@ -3117,16 +3453,42 @@ class JsonFormRendererComponent {
     isFileList(value) {
         return typeof FileList !== 'undefined' && value instanceof FileList;
     }
+    isObjectRecord(value) {
+        return !!value && typeof value === 'object' && !Array.isArray(value);
+    }
     buildFieldValueMap(values) {
         const schema = this.engine?.getSchema();
         if (!schema)
             return {};
-        const fieldByName = new Map(schema.fields.map(field => [field.name, field.id]));
+        return this.buildFieldValueMapForSchema(schema, values);
+    }
+    buildFieldValueMapForSchema(schema, valuesScope) {
         const mapped = {};
-        for (const [name, value] of Object.entries(values)) {
-            mapped[name] = {
-                fieldId: fieldByName.get(name) ?? name,
-                value
+        for (const field of schema.fields) {
+            if (!field?.id || !field?.name)
+                continue;
+            const rawValue = valuesScope[field.name];
+            if (field.type === 'repeatable-group') {
+                const itemSchema = field.repeatable?.itemSchema;
+                const rows = [];
+                if (itemSchema && Array.isArray(rawValue)) {
+                    for (const row of rawValue) {
+                        if (!this.isObjectRecord(row)) {
+                            rows.push({});
+                            continue;
+                        }
+                        rows.push(this.buildFieldValueMapForSchema(itemSchema, row));
+                    }
+                }
+                mapped[field.id] = {
+                    fieldName: field.name,
+                    value: rows
+                };
+                continue;
+            }
+            mapped[field.id] = {
+                fieldName: field.name,
+                value: rawValue
             };
         }
         return mapped;
@@ -3143,9 +3505,9 @@ class JsonFormRendererComponent {
             if (!grouped[groupKey]) {
                 grouped[groupKey] = {};
             }
-            const fieldValue = values[field.name];
+            const fieldValue = values[field.id];
             if (fieldValue !== undefined) {
-                grouped[groupKey][field.name] = fieldValue;
+                grouped[groupKey][field.id] = fieldValue;
             }
         }
         return grouped;
@@ -3159,14 +3521,14 @@ class JsonFormRendererComponent {
             const groupKey = field.groupKey?.trim();
             if (!groupKey)
                 continue;
-            const fieldValue = values[field.name];
+            const fieldValue = values[field.id];
             if (!fieldValue)
                 continue;
             const currentGroup = combined[groupKey];
             const groupValues = this.isGroupValue(currentGroup) ? currentGroup : {};
-            groupValues[field.name] = fieldValue;
+            groupValues[field.id] = fieldValue;
             combined[groupKey] = groupValues;
-            delete combined[field.name];
+            delete combined[field.id];
         }
         return combined;
     }
@@ -3174,7 +3536,8 @@ class JsonFormRendererComponent {
         if (!value || typeof value !== 'object' || Array.isArray(value))
             return false;
         const record = value;
-        return typeof record['fieldId'] === 'string' && Object.hasOwn(record, 'value');
+        return typeof record['fieldName'] === 'string'
+            && Object.hasOwn(record, 'value');
     }
     isGroupValue(value) {
         if (!value || typeof value !== 'object' || Array.isArray(value))
@@ -3202,7 +3565,7 @@ class JsonFormRendererComponent {
         </ng-container>
         <ng-template #loading>Loading form...</ng-template>
     </div>
-  `, isInline: true, styles: [".form-renderer-container{width:100%;height:100%;overflow-y:auto}.form-renderer-container.is-design{padding-top:2.25rem;height:auto;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }] });
+  `, isInline: true, styles: [".form-renderer-container{width:100%;height:100%;overflow-y:auto}.form-renderer-container.is-design{padding-top:2.25rem;height:auto;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "scopePath", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: JsonFormRendererComponent, decorators: [{
             type: Component,
@@ -3975,6 +4338,7 @@ class FieldPaletteComponent {
     getDragData(widget) {
         return {
             type: 'new-widget',
+            widgetId: widget.id,
             widgetType: widget.type,
             widgetKind: widget.kind
         };
@@ -6554,7 +6918,7 @@ class DynamicPropertiesComponent {
         return sections;
     }
     getFieldReferenceCandidates(field) {
-        const all = this.designerCtx.getFields();
+        const all = this.getAllFields();
         const allowed = field.allowedFieldTypes;
         const includeSelf = field.includeSelf === true;
         const currentId = this.config?.id;
@@ -12932,7 +13296,7 @@ class WidgetInspectorComponent {
            <div class="flex flex-col min-h-0 bg-white">
               <app-dynamic-properties 
                   [config]="field()"
-                  [allFields]="stateService.schema().fields"
+                  [allFields]="stateService.getSelectedScopeFields()"
                   [excludeSections]="['Layout', 'Spacing', 'Size', 'Typography', 'Appearance', 'Box Model', 'Position']"
                   (configChange)="fieldChange.emit($event)">
               </app-dynamic-properties>
@@ -12944,7 +13308,7 @@ class WidgetInspectorComponent {
            <div class="flex flex-col min-h-0 bg-white p-1">
                <app-data-panel
                    [config]="field()"
-                   [allFields]="stateService.schema().fields"
+                   [allFields]="stateService.getSelectedScopeFields()"
                    [dataConsumer]="dataConsumer()"
                    [bindingShape]="bindingShape()"
                    [widgetType]="field().type"
@@ -12958,7 +13322,7 @@ class WidgetInspectorComponent {
            <div class="flex flex-col min-h-0 bg-white">
                <app-rules-panel
                    [rules]="field().rules || []"
-                   [allFields]="stateService.schema().fields"
+                   [allFields]="stateService.getSelectedScopeFields()"
                    (rulesChange)="rulesChange.emit($event)">
                </app-rules-panel>
            </div>
@@ -12969,7 +13333,7 @@ class WidgetInspectorComponent {
            <div class="flex flex-col min-h-0 bg-white">
                <app-events-panel
                    [config]="field()"
-                   [allFields]="stateService.schema().fields"
+                   [allFields]="stateService.getSelectedScopeFields()"
                    (configChange)="fieldChange.emit($event)">
                </app-events-panel>
            </div>
@@ -13155,7 +13519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
            <div class="flex flex-col min-h-0 bg-white">
               <app-dynamic-properties 
                   [config]="field()"
-                  [allFields]="stateService.schema().fields"
+                  [allFields]="stateService.getSelectedScopeFields()"
                   [excludeSections]="['Layout', 'Spacing', 'Size', 'Typography', 'Appearance', 'Box Model', 'Position']"
                   (configChange)="fieldChange.emit($event)">
               </app-dynamic-properties>
@@ -13167,7 +13531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
            <div class="flex flex-col min-h-0 bg-white p-1">
                <app-data-panel
                    [config]="field()"
-                   [allFields]="stateService.schema().fields"
+                   [allFields]="stateService.getSelectedScopeFields()"
                    [dataConsumer]="dataConsumer()"
                    [bindingShape]="bindingShape()"
                    [widgetType]="field().type"
@@ -13181,7 +13545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
            <div class="flex flex-col min-h-0 bg-white">
                <app-rules-panel
                    [rules]="field().rules || []"
-                   [allFields]="stateService.schema().fields"
+                   [allFields]="stateService.getSelectedScopeFields()"
                    (rulesChange)="rulesChange.emit($event)">
                </app-rules-panel>
            </div>
@@ -13192,7 +13556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
            <div class="flex flex-col min-h-0 bg-white">
                <app-events-panel
                    [config]="field()"
-                   [allFields]="stateService.schema().fields"
+                   [allFields]="stateService.getSelectedScopeFields()"
                    (configChange)="fieldChange.emit($event)">
                </app-events-panel>
            </div>
@@ -13735,7 +14099,8 @@ class PropertiesPanelComponent {
             return;
         const currentStyle = { ...(node.style || {}) };
         currentStyle[key] = value;
-        this.state.updateNodeStyle(nodeId, currentStyle);
+        const scopedNodeId = this.state.selectedNodeId() ?? nodeId;
+        this.state.updateNodeStyle(scopedNodeId, currentStyle);
     }
     /**
      * Handle style changes from the widget inspector.
@@ -13748,7 +14113,8 @@ class PropertiesPanelComponent {
         // For now, we only support container styling (node.style)
         // Widget-specific styling would require extending the FieldSchema
         if (event.target === 'container') {
-            this.state.updateNodeStyle(node.id, event.style);
+            const scopedNodeId = this.state.selectedNodeId() ?? node.id;
+            this.state.updateNodeStyle(scopedNodeId, event.style);
         }
     }
     /**
@@ -13767,7 +14133,8 @@ class PropertiesPanelComponent {
         else {
             currentResponsive[breakpoint] = Number(value);
         }
-        this.state.updateNodeResponsive(nodeId, currentResponsive);
+        const scopedNodeId = this.state.selectedNodeId() ?? nodeId;
+        this.state.updateNodeResponsive(scopedNodeId, currentResponsive);
     }
     /**
      * Legacy method for backward compatibility with dynamic properties.
@@ -13832,7 +14199,7 @@ class PropertiesPanelComponent {
                     // Fallback to Data-Driven Properties
                     const ref = this.inspectorContainer.createComponent(DynamicPropertiesComponent);
                     ref.setInput('config', field);
-                    ref.setInput('allFields', this.state.schema().fields);
+                    ref.setInput('allFields', this.state.getSelectedScopeFields());
                     ref.setInput('readOnly', this.state.isReadOnly());
                     if (this.isBrickWidget(node)) {
                         ref.setInput('excludeSections', ['Brick']);
@@ -13898,13 +14265,13 @@ class PropertiesPanelComponent {
         return def?.dataBinding || null;
     }
     applyPreset(rowId, preset) {
-        this.state.setPresetLayout(rowId, preset);
+        this.state.setPresetLayout(this.state.selectedNodeId() ?? rowId, preset);
     }
     addColumn(rowId) {
-        this.state.addColumn(rowId);
+        this.state.addColumn(this.state.selectedNodeId() ?? rowId);
     }
     removeColumn(colId) {
-        this.state.removeColumn(colId);
+        this.state.removeColumn(this.state.selectedNodeId() ?? colId);
         // Deselect because it's gone
         this.state.selectNode(null);
     }
@@ -23415,6 +23782,484 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }] } });
 
+class RepeatableGroupWidgetComponent {
+    config;
+    engine;
+    control = new FormControl();
+    scopePath = [];
+    rowStates = [];
+    itemSchema = createEmptySchema('form', { title: 'Repeatable Item' });
+    designPreviewEngine;
+    parentValueSub;
+    parentSubmitSub;
+    rowIdCounter = 0;
+    isWritingToParent = false;
+    lastCommittedRowsRef;
+    editorContext = inject(WIDGET_EDITOR_CONTEXT, { optional: true });
+    designerState = inject(DesignerStateService);
+    get groupId() {
+        return `field-${this.config.id}`;
+    }
+    get isDesignMode() {
+        return this.editorContext?.isDesignMode() ?? false;
+    }
+    get isSelected() {
+        return this.editorContext?.isSelected() ?? false;
+    }
+    get nestedScopePath() {
+        return [...this.scopePath, this.config.id];
+    }
+    get addButtonLabel() {
+        const label = this.config.repeatable?.addButtonLabel?.trim();
+        return label || 'Add item';
+    }
+    get removeButtonLabel() {
+        const label = this.config.repeatable?.removeButtonLabel?.trim();
+        return label || 'Remove';
+    }
+    get itemLabel() {
+        const label = this.config.repeatable?.itemLabel?.trim();
+        return label || 'Item';
+    }
+    get minItems() {
+        const raw = Number(this.config.repeatable?.minItems ?? 0);
+        if (!Number.isFinite(raw) || raw < 0)
+            return 0;
+        return Math.floor(raw);
+    }
+    get maxItems() {
+        const raw = this.config.repeatable?.maxItems;
+        if (raw === undefined || raw === null)
+            return Number.POSITIVE_INFINITY;
+        const parsed = Number(raw);
+        if (!Number.isFinite(parsed) || parsed < 0)
+            return Number.POSITIVE_INFINITY;
+        return Math.max(this.minItems, Math.floor(parsed));
+    }
+    get canAddItem() {
+        if (!this.enabled)
+            return false;
+        return this.rowStates.length < this.maxItems;
+    }
+    get canRemoveItem() {
+        if (!this.enabled)
+            return false;
+        return this.rowStates.length > this.minItems;
+    }
+    ngOnInit() {
+        this.initialize();
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] || changes['engine']) {
+            this.initialize();
+        }
+    }
+    ngOnDestroy() {
+        this.disposeParentSubscriptions();
+        this.disposeRowStates();
+    }
+    addItem() {
+        if (!this.canAddItem)
+            return;
+        const row = this.createDefaultRow(this.itemSchema);
+        this.rowStates.push(this.createRowState(row));
+        this.commitRowsToParent();
+    }
+    removeItem(index) {
+        if (!this.canRemoveItem)
+            return;
+        const row = this.rowStates[index];
+        if (!row)
+            return;
+        row.valueSub.unsubscribe();
+        this.rowStates.splice(index, 1);
+        this.commitRowsToParent();
+    }
+    trackByRowId(index, row) {
+        return row.id;
+    }
+    getWrapperStyles() {
+        if (!this.config?.style)
+            return {};
+        return mergeAndNormalize({
+            width: '100%'
+        }, this.config.style);
+    }
+    get visible() {
+        return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
+    }
+    get enabled() {
+        if (this.config?.disabled)
+            return false;
+        return this.engine ? this.engine.isFieldEnabled(this.config.id) : true;
+    }
+    get required() {
+        return this.engine ? this.engine.isFieldRequired(this.config.id) : !!this.config?.html5?.required;
+    }
+    onNestedNodeSelect(nodeId) {
+        if (!this.isDesignMode)
+            return;
+        this.designerState.selectNode(nodeId);
+    }
+    initialize() {
+        this.itemSchema = this.resolveItemSchema();
+        this.buildDesignPreviewEngine();
+        if (this.isDesignMode) {
+            this.disposeParentSubscriptions();
+            this.disposeRowStates();
+            return;
+        }
+        this.rebuildRows(this.readRowsFromParent(), true);
+        this.bindParentSubscriptions();
+    }
+    bindParentSubscriptions() {
+        this.disposeParentSubscriptions();
+        if (!this.engine)
+            return;
+        this.parentValueSub = this.engine.valueChanges$.subscribe(values => {
+            if (!this.config?.name)
+                return;
+            if (this.isWritingToParent)
+                return;
+            const incoming = values[this.config.name];
+            if (incoming === this.lastCommittedRowsRef)
+                return;
+            this.rebuildRows(this.normalizeRows(incoming), true);
+        });
+        this.parentSubmitSub = this.engine.submitted$.subscribe(() => {
+            for (const row of this.rowStates) {
+                row.engine.validate();
+                row.engine.submit();
+            }
+        });
+    }
+    disposeParentSubscriptions() {
+        this.parentValueSub?.unsubscribe();
+        this.parentSubmitSub?.unsubscribe();
+        this.parentValueSub = undefined;
+        this.parentSubmitSub = undefined;
+    }
+    rebuildRows(sourceRows, enforceBounds) {
+        this.disposeRowStates();
+        const boundedRows = enforceBounds ? this.applyBounds(sourceRows) : sourceRows;
+        this.rowStates = boundedRows.map(row => this.createRowState(row));
+        if (!this.engine || !this.config?.name)
+            return;
+        const current = this.engine.getValue(this.config.name);
+        if (current === boundedRows) {
+            this.lastCommittedRowsRef = current;
+            return;
+        }
+        if (!this.isSameLength(current, boundedRows)) {
+            this.commitRowsToParent();
+            return;
+        }
+        this.lastCommittedRowsRef = current;
+    }
+    createRowState(rowValue) {
+        const rowEngine = createFormEngine(this.itemSchema, rowValue);
+        const valueSub = rowEngine.valueChanges$.pipe(skip(1)).subscribe(() => {
+            this.commitRowsToParent();
+        });
+        this.rowIdCounter += 1;
+        return {
+            id: `repeatable-row-${this.config.id}-${this.rowIdCounter}`,
+            engine: rowEngine,
+            valueSub
+        };
+    }
+    disposeRowStates() {
+        for (const row of this.rowStates) {
+            row.valueSub.unsubscribe();
+        }
+        this.rowStates = [];
+    }
+    commitRowsToParent() {
+        if (!this.engine || !this.config?.name)
+            return;
+        const nextRows = this.rowStates.map(row => row.engine.getValues());
+        this.lastCommittedRowsRef = nextRows;
+        this.isWritingToParent = true;
+        this.engine.setValue(this.config.name, nextRows);
+        this.isWritingToParent = false;
+    }
+    readRowsFromParent() {
+        if (!this.engine || !this.config?.name) {
+            return this.applyBounds([]);
+        }
+        const value = this.engine.getValue(this.config.name);
+        return this.applyBounds(this.normalizeRows(value));
+    }
+    normalizeRows(value) {
+        if (!Array.isArray(value))
+            return [];
+        return value.map(item => this.normalizeRow(item));
+    }
+    normalizeRow(value) {
+        if (!value || typeof value !== 'object' || Array.isArray(value))
+            return {};
+        return { ...value };
+    }
+    applyBounds(rows) {
+        const bounded = [...rows];
+        if (bounded.length > this.maxItems) {
+            bounded.length = this.maxItems;
+        }
+        while (bounded.length < this.minItems) {
+            bounded.push(this.createDefaultRow(this.itemSchema));
+        }
+        return bounded;
+    }
+    createDefaultRow(schema) {
+        const row = {};
+        for (const field of schema.fields) {
+            if (!field.name)
+                continue;
+            if (field.defaultValue !== undefined) {
+                row[field.name] = this.cloneValue(field.defaultValue);
+            }
+            else {
+                row[field.name] = null;
+            }
+        }
+        return row;
+    }
+    resolveItemSchema() {
+        const schema = this.config?.repeatable?.itemSchema;
+        if (schema && this.isSchemaLike(schema)) {
+            return schema;
+        }
+        return createEmptySchema('form', { title: 'Repeatable Item' });
+    }
+    isSchemaLike(value) {
+        if (!value || typeof value !== 'object')
+            return false;
+        const candidate = value;
+        return Array.isArray(candidate.fields) && !!candidate.layout;
+    }
+    isSameLength(left, right) {
+        return Array.isArray(left) && left.length === right.length;
+    }
+    cloneValue(value) {
+        if (typeof structuredClone === 'function') {
+            return structuredClone(value);
+        }
+        try {
+            return JSON.parse(JSON.stringify(value));
+        }
+        catch {
+            return value;
+        }
+    }
+    buildDesignPreviewEngine() {
+        if (!this.itemSchema?.layout) {
+            this.designPreviewEngine = undefined;
+            return;
+        }
+        const previewRow = this.createDefaultRow(this.itemSchema);
+        this.designPreviewEngine = createFormEngine(this.itemSchema, previewRow);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RepeatableGroupWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: RepeatableGroupWidgetComponent, isStandalone: true, selector: "app-repeatable-group-widget", inputs: { config: "config", engine: "engine", control: "control", scopePath: "scopePath" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="w-full pb-4 font-sans" [class.hidden]="!visible" [ngStyle]="getWrapperStyles()">
+      <div class="flex items-start justify-between gap-3 mb-2">
+        <div class="min-w-0">
+          <label [attr.for]="groupId" class="block text-sm font-medium text-gray-700">
+            {{ config.label }} <span *ngIf="required" class="text-red-500" aria-label="required">*</span>
+          </label>
+          <p *ngIf="config.helpText" class="mt-1 text-xs text-gray-500">{{ config.helpText }}</p>
+        </div>
+        <div class="flex shrink-0 items-center gap-2">
+          <button
+            *ngIf="!isDesignMode"
+            type="button"
+            class="h-9 rounded-md border border-blue-200 px-3 text-xs font-semibold text-blue-700 transition-colors hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
+            [disabled]="!canAddItem"
+            (click)="addItem()">
+            {{ addButtonLabel }}
+          </button>
+        </div>
+      </div>
+
+      <ng-container *ngIf="!isDesignMode; else designModeView">
+        <div [id]="groupId" class="flex flex-col gap-3">
+          <div *ngFor="let row of rowStates; let rowIndex = index; trackBy: trackByRowId"
+               class="rounded-lg border border-gray-200 bg-white p-3">
+            <div class="mb-3 flex items-center justify-between">
+              <span class="text-xs font-semibold uppercase tracking-wide text-gray-500">
+                {{ itemLabel }} {{ rowIndex + 1 }}
+              </span>
+              <button
+                type="button"
+                class="h-8 rounded-md border border-red-200 px-2.5 text-xs font-medium text-red-700 transition-colors hover:bg-red-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
+                [disabled]="!canRemoveItem"
+                (click)="removeItem(rowIndex)">
+                {{ removeButtonLabel }}
+              </button>
+            </div>
+
+            <app-layout-node
+              *ngIf="itemSchema.layout"
+              [node]="itemSchema.layout"
+              [engine]="row.engine"
+              [fields]="itemSchema.fields"
+              [designMode]="false"
+              [device]="'desktop'"
+              [breakpoint]="'xl'">
+            </app-layout-node>
+          </div>
+        </div>
+
+        <p *ngIf="rowStates.length === 0" class="rounded-md border border-dashed border-gray-300 bg-gray-50 px-3 py-4 text-xs text-gray-500">
+          No items yet.
+        </p>
+      </ng-container>
+
+      <ng-template #designModeView>
+        <div [id]="groupId" class="flex flex-col gap-3">
+          <div class="rounded-lg border border-dashed border-gray-300 bg-gray-50 p-3">
+            <div class="mb-2 flex items-center justify-between gap-2">
+              <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Item Template</p>
+              <span class="rounded bg-gray-200 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-gray-600">
+                {{ itemSchema.fields.length }} fields
+              </span>
+            </div>
+            <p class="mb-2 rounded-md border border-gray-200 bg-white px-3 py-2 text-xs text-gray-600">
+              Select this group, then add fields from the main palette. New fields are added inside this group scope.
+            </p>
+            <p *ngIf="itemSchema.fields.length === 0" class="rounded-md border border-dashed border-gray-300 bg-white px-3 py-3 text-xs text-gray-500">
+              No nested fields yet. You can still add rows/columns now.
+            </p>
+            <div class="rounded-md border border-gray-200 bg-white p-2"
+                 (click)="$event.stopPropagation()"
+                 (mousedown)="$event.stopPropagation()"
+                 (contextmenu)="$event.stopPropagation()">
+              <app-layout-node
+                *ngIf="itemSchema.layout && designPreviewEngine"
+                [node]="itemSchema.layout"
+                [engine]="designPreviewEngine"
+                [fields]="itemSchema.fields"
+                [designMode]="true"
+                [scopePath]="nestedScopePath"
+                [device]="'desktop'"
+                [breakpoint]="'xl'"
+                (nodeSelect)="onNestedNodeSelect($event)">
+              </app-layout-node>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "scopePath", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RepeatableGroupWidgetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-repeatable-group-widget',
+                    standalone: true,
+                    imports: [CommonModule, LayoutNodeComponent],
+                    template: `
+    <div class="w-full pb-4 font-sans" [class.hidden]="!visible" [ngStyle]="getWrapperStyles()">
+      <div class="flex items-start justify-between gap-3 mb-2">
+        <div class="min-w-0">
+          <label [attr.for]="groupId" class="block text-sm font-medium text-gray-700">
+            {{ config.label }} <span *ngIf="required" class="text-red-500" aria-label="required">*</span>
+          </label>
+          <p *ngIf="config.helpText" class="mt-1 text-xs text-gray-500">{{ config.helpText }}</p>
+        </div>
+        <div class="flex shrink-0 items-center gap-2">
+          <button
+            *ngIf="!isDesignMode"
+            type="button"
+            class="h-9 rounded-md border border-blue-200 px-3 text-xs font-semibold text-blue-700 transition-colors hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
+            [disabled]="!canAddItem"
+            (click)="addItem()">
+            {{ addButtonLabel }}
+          </button>
+        </div>
+      </div>
+
+      <ng-container *ngIf="!isDesignMode; else designModeView">
+        <div [id]="groupId" class="flex flex-col gap-3">
+          <div *ngFor="let row of rowStates; let rowIndex = index; trackBy: trackByRowId"
+               class="rounded-lg border border-gray-200 bg-white p-3">
+            <div class="mb-3 flex items-center justify-between">
+              <span class="text-xs font-semibold uppercase tracking-wide text-gray-500">
+                {{ itemLabel }} {{ rowIndex + 1 }}
+              </span>
+              <button
+                type="button"
+                class="h-8 rounded-md border border-red-200 px-2.5 text-xs font-medium text-red-700 transition-colors hover:bg-red-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
+                [disabled]="!canRemoveItem"
+                (click)="removeItem(rowIndex)">
+                {{ removeButtonLabel }}
+              </button>
+            </div>
+
+            <app-layout-node
+              *ngIf="itemSchema.layout"
+              [node]="itemSchema.layout"
+              [engine]="row.engine"
+              [fields]="itemSchema.fields"
+              [designMode]="false"
+              [device]="'desktop'"
+              [breakpoint]="'xl'">
+            </app-layout-node>
+          </div>
+        </div>
+
+        <p *ngIf="rowStates.length === 0" class="rounded-md border border-dashed border-gray-300 bg-gray-50 px-3 py-4 text-xs text-gray-500">
+          No items yet.
+        </p>
+      </ng-container>
+
+      <ng-template #designModeView>
+        <div [id]="groupId" class="flex flex-col gap-3">
+          <div class="rounded-lg border border-dashed border-gray-300 bg-gray-50 p-3">
+            <div class="mb-2 flex items-center justify-between gap-2">
+              <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Item Template</p>
+              <span class="rounded bg-gray-200 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-gray-600">
+                {{ itemSchema.fields.length }} fields
+              </span>
+            </div>
+            <p class="mb-2 rounded-md border border-gray-200 bg-white px-3 py-2 text-xs text-gray-600">
+              Select this group, then add fields from the main palette. New fields are added inside this group scope.
+            </p>
+            <p *ngIf="itemSchema.fields.length === 0" class="rounded-md border border-dashed border-gray-300 bg-white px-3 py-3 text-xs text-gray-500">
+              No nested fields yet. You can still add rows/columns now.
+            </p>
+            <div class="rounded-md border border-gray-200 bg-white p-2"
+                 (click)="$event.stopPropagation()"
+                 (mousedown)="$event.stopPropagation()"
+                 (contextmenu)="$event.stopPropagation()">
+              <app-layout-node
+                *ngIf="itemSchema.layout && designPreviewEngine"
+                [node]="itemSchema.layout"
+                [engine]="designPreviewEngine"
+                [fields]="itemSchema.fields"
+                [designMode]="true"
+                [scopePath]="nestedScopePath"
+                [device]="'desktop'"
+                [breakpoint]="'xl'"
+                (nodeSelect)="onNestedNodeSelect($event)">
+              </app-layout-node>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+    </div>
+  `
+                }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], engine: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], scopePath: [{
+                type: Input
+            }] } });
+
 class ButtonWidgetComponent {
     router = inject(Router, { optional: true });
     pageLinks = inject(WIDGET_PAGE_LINKS, { optional: true });
@@ -24164,6 +25009,36 @@ const FILE_WIDGET_PROPERTIES = [
     { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
     ...COMMON_STYLE_SECTIONS
 ];
+const REPEATABLE_WIDGET_PROPERTIES = [
+    {
+        label: 'Basic',
+        fields: [
+            { key: 'name', type: 'text', label: 'Field Key (Name)' },
+            { key: 'label', type: 'text', label: 'Label' },
+            { key: 'helpText', type: 'text', label: 'Help Text' },
+            { key: 'tooltip', type: 'text', label: 'Tooltip' },
+            ...COMMON_GROUP_FIELDS
+        ]
+    },
+    {
+        label: 'Repeatable',
+        fields: [
+            { key: 'repeatable.minItems', type: 'number', label: 'Minimum Items', min: 0 },
+            { key: 'repeatable.maxItems', type: 'number', label: 'Maximum Items', min: 1 },
+            { key: 'repeatable.itemLabel', type: 'text', label: 'Item Label', placeholder: 'Item' },
+            { key: 'repeatable.addButtonLabel', type: 'text', label: 'Add Button Label', placeholder: 'Add item' },
+            { key: 'repeatable.removeButtonLabel', type: 'text', label: 'Remove Button Label', placeholder: 'Remove' }
+        ]
+    },
+    {
+        label: 'Validation',
+        fields: [
+            BASE_REQUIRED_FIELD
+        ]
+    },
+    { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
+    ...COMMON_STYLE_SECTIONS
+];
 const pluginId$2 = 'core.form';
 const FIELD_WIDGETS = [
     defineWidget(pluginId$2, {
@@ -24470,6 +25345,33 @@ const FIELD_WIDGETS = [
         dataConsumer: 'none',
         properties: FILE_WIDGET_PROPERTIES
     }),
+    defineWidget(pluginId$2, {
+        kind: 'field',
+        flavor: 'form',
+        type: 'repeatable-group',
+        icon: 'list-plus',
+        label: 'Repeatable Group',
+        createConfig: () => ({
+            id: generateId$2(),
+            name: 'group_' + Date.now(),
+            type: 'repeatable-group',
+            label: 'Repeatable Group',
+            helpText: '',
+            defaultValue: [],
+            repeatable: {
+                minItems: 1,
+                maxItems: 5,
+                itemLabel: 'Item',
+                addButtonLabel: 'Add item',
+                removeButtonLabel: 'Remove',
+                itemSchema: createEmptySchema('form', { title: 'Repeatable Item' })
+            },
+            style: { width: '100%' }
+        }),
+        renderer: RepeatableGroupWidgetComponent,
+        dataConsumer: 'none',
+        properties: REPEATABLE_WIDGET_PROPERTIES
+    }),
     defineWidget(pluginId$2, {
         kind: 'field',
         flavor: 'form',