@syncfusion/ej2-react-form-renderer 0.1.0-beta → 0.1.2-beta

package/src/json-converter.js

@@ -6,6 +6,10 @@ export const generateId = (type) => {
     const random = Math.floor(Math.random() * 1000);
     return `${type}_${timestamp}_${random}`;
 };
+export const generateName = (type) => {
+    const random = Math.floor(Math.random() * 1000);
+    return `${type}_${random}`;
+};
 // ============================================================================
 // LABEL TO CAMELCASE CONVERTER
 // ============================================================================
@@ -68,7 +72,7 @@ export function makeUniqueFieldKey(baseKey, existingKeys, originalId) {
 // ============================================================================
 // UI TYPE TO SEMANTIC TYPE MAPPING
 // ============================================================================
-const UI_TYPE_TO_SEMANTIC_TYPE = {
+export const UI_TYPE_TO_SEMANTIC_TYPE = {
     // String types
     'textbox': { type: 'string' },
     'textarea': { type: 'string' },
@@ -76,36 +80,36 @@ const UI_TYPE_TO_SEMANTIC_TYPE = {
     'url': { type: 'string', format: 'url' },
     'phone': { type: 'string' },
     'password': { type: 'string' },
-    'inputmask': { type: 'string' },
+    'inputMask': { type: 'string' },
     // Numeric types
     'number': { type: 'number' },
-    'rangeslider': { type: 'number' },
+    'rangeSlider': { type: 'number' },
     'rating': { type: 'number' },
     // Boolean types
     'checkbox': { type: 'boolean' },
     'switch': { type: 'boolean' },
     // Date/Time types
-    'datepicker': { type: 'string', format: 'date' },
-    'datetimepicker': { type: 'string', format: 'date-time' },
-    'timepicker': { type: 'string', format: 'time' },
-    'daterange': { type: 'string', format: 'date' },
+    'date': { type: 'string', format: 'date' },
+    'dateTime': { type: 'string', format: 'date-time' },
+    'time': { type: 'string', format: 'time' },
+    'dateRange': { type: 'string', format: 'date' },
     // Array types
     'multiselect': { type: 'array' },
-    'checkboxgroup': { type: 'array' },
+    'checkboxGroup': { type: 'array' },
     // Single-value selection (stored as string)
     'dropdown': { type: 'string' },
     'radio': { type: 'string' },
-    'splitbutton': { type: 'string' },
+    'splitButton': { type: 'string' },
     // Special types (excluded from data schema)
     'button': { type: 'button' },
     'message': { type: 'message' },
     'signature': { type: 'sign' },
-    'imageeditor': { type: 'image' },
-    'fileupload': { type: 'file' },
-    'colorpicker': { type: 'color' },
-    'datagrid': { type: 'grid' },
+    'imageEditor': { type: 'image' },
+    'fileUpload': { type: 'file' },
+    'colorPicker': { type: 'color' },
+    'dataGrid': { type: 'grid' },
     // Layout types (excluded from data schema)
-    'statichtml': { type: 'string' },
+    'staticHtml': { type: 'string' },
     'table': null,
     'panel': null,
     'tabs': null,
@@ -126,6 +130,73 @@ function stripConfiguredFlag(properties) {
     return out;
 }
 // ============================================================================
+// CONDITION VALIDATION HELPERS
+// ============================================================================
+/**
+ * Clean condition rules that reference non-existent field IDs
+ *
+ * Validates condition rules during split to remove references to deleted fields.
+ * Returns undefined if condition becomes empty after cleanup.
+ *
+ * @param condition - Condition object (visibleWhen/readOnlyWhen/disabledWhen)
+ * @param validFieldIds - Set of valid field IDs in current schema
+ * @returns Cleaned condition or undefined if empty
+ */
+function cleanConditionRules(condition, validFieldIds) {
+    if (!condition || !condition.rules || !Array.isArray(condition.rules)) {
+        return undefined;
+    }
+    const cleanedRules = condition.rules
+        .map((rule) => {
+        // If rule has nested rules (group), recursively clean
+        if (rule.rules && Array.isArray(rule.rules)) {
+            return cleanConditionRules(rule, validFieldIds);
+        }
+        // If rule references non-existent field, exclude it
+        if (rule.field && !validFieldIds.has(rule.field)) {
+            return null;
+        }
+        return rule;
+    })
+        .filter((rule) => rule !== null && rule !== undefined);
+    // If no rules remain, return undefined
+    if (cleanedRules.length === 0) {
+        return undefined;
+    }
+    return {
+        ...condition,
+        rules: cleanedRules
+    };
+}
+/**
+ * Get all valid field IDs from components
+ *
+ * @param components - Form components array
+ * @returns Set of field IDs
+ */
+function getAllComponentIds(components) {
+    const ids = new Set();
+    const stack = [...components];
+    while (stack.length) {
+        const comp = stack.pop();
+        ids.add(comp.id);
+        if (comp.children)
+            stack.push(...comp.children);
+        if (comp.tabItems) {
+            comp.tabItems.forEach(tab => {
+                if (tab.content)
+                    stack.push(...tab.content);
+            });
+        }
+        if (comp.tableCells) {
+            comp.tableCells.forEach(row => {
+                row.forEach(cell => stack.push(...cell));
+            });
+        }
+    }
+    return ids;
+}
+// ============================================================================
 // SPLIT ALGORITHM
 // ============================================================================
 export function splitSchema(heartSchema) {
@@ -134,6 +205,8 @@ export function splitSchema(heartSchema) {
     const layout = [];
     const usedFieldKeys = new Set(); // Track unique field keys
     const seenComponentIds = new Set(); // Track component IDs to prevent duplicates
+    // ✅ Get all valid field IDs for condition validation
+    const validFieldIds = getAllComponentIds(heartSchema.components);
     // Stack for iterative traversal (avoid recursion)
     const stack = heartSchema.components.map(c => ({
         component: c,
@@ -142,6 +215,86 @@ export function splitSchema(heartSchema) {
     while (stack.length > 0) {
         // Use shift() instead of pop() to maintain order (FIFO instead of LIFO)
         const { component, layoutParent } = stack.shift();
+        // ✅ Clean conditions before processing
+        if (component.conditions) {
+            const cleanedConditions = {};
+            let hasValidConditions = false;
+            if (component.conditions.visibleWhen) {
+                const cleaned = cleanConditionRules(component.conditions.visibleWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.visibleWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.hideWhen) {
+                const cleaned = cleanConditionRules(component.conditions.hideWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.hideWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.readOnlyWhen) {
+                const cleaned = cleanConditionRules(component.conditions.readOnlyWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.readOnlyWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.disabledWhen) {
+                const cleaned = cleanConditionRules(component.conditions.disabledWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.disabledWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.requiredWhen) {
+                const cleaned = cleanConditionRules(component.conditions.requiredWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.requiredWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.setValueWhen) {
+                const cleaned = cleanConditionRules(component.conditions.setValueWhen.condition, validFieldIds);
+                if (cleaned && component.conditions.setValueWhen.value !== undefined && component.conditions.setValueWhen.value !== '') {
+                    cleanedConditions.setValueWhen = {
+                        condition: cleaned,
+                        value: component.conditions.setValueWhen.value
+                    };
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions?.choiceBasedField) {
+                const rule = component.conditions.choiceBasedField;
+                // Validate that primary field exists
+                if (rule.primaryFieldId && validFieldIds.has(rule.primaryFieldId)) {
+                    cleanedConditions.choiceBasedField = rule;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.conditionalData && Array.isArray(component.conditions.conditionalData)) {
+                const cleanedDataRules = component.conditions.conditionalData
+                    .map((rule) => {
+                    const cleaned = cleanConditionRules(rule.condition, validFieldIds);
+                    if (cleaned && rule.dataSource) {
+                        return {
+                            condition: cleaned,
+                            dataSource: rule.dataSource,
+                            columns: rule.columns,
+                            includeColumns: rule.includeColumns
+                        };
+                    }
+                    return null;
+                })
+                    .filter((rule) => rule !== null && rule !== undefined);
+                if (cleanedDataRules.length > 0) {
+                    cleanedConditions.conditionalData = cleanedDataRules;
+                    hasValidConditions = true;
+                }
+            }
+            // Update component conditions (or remove if empty)
+            component.conditions = hasValidConditions ? cleanedConditions : undefined;
+        }
         // Get semantic type mapping (may be null for presentation-only widgets)
         const semanticType = UI_TYPE_TO_SEMANTIC_TYPE[component.type];
         // Handle layout containers
@@ -149,13 +302,15 @@ export function splitSchema(heartSchema) {
             const tableNode = {
                 type: 'table',
                 id: component.id,
+                name: component.name,
                 label: component.label,
                 cssClass: component.cssClass,
                 hideBorders: component.hideBorders,
                 rows: component.tableCells?.length || 0,
                 cols: component.tableCells?.[0]?.length || 0,
                 cells: [],
-                columnWidths: component.columnWidths
+                columnWidths: component.columnWidths,
+                ...(component.conditions ? { conditions: component.conditions } : {})
             };
             // Process table cells
             component.tableCells?.forEach((row, rowIndex) => {
@@ -177,11 +332,13 @@ export function splitSchema(heartSchema) {
             const panelNode = {
                 type: 'panel',
                 id: component.id,
+                name: component.name,
                 label: component.label,
                 cssClass: component.cssClass,
                 hideBorders: component.hideBorders,
                 hideLabel: component.hideLabel,
-                children: []
+                children: [],
+                ...(component.conditions ? { conditions: component.conditions } : {})
             };
             // Process panel children
             // Reverse children and use unshift() to maintain order with depth-first processing
@@ -194,11 +351,13 @@ export function splitSchema(heartSchema) {
         if (component.type === 'tabs') {
             const tabsNode = {
                 type: 'tabs',
+                name: component.name,
                 id: component.id,
                 label: component.label,
                 cssClass: component.cssClass,
                 tabOptions: component.tabOptions,
-                tabs: []
+                tabs: [],
+                ...(component.conditions ? { conditions: component.conditions } : {})
             };
             // Process tabs
             component.tabItems?.forEach((tab) => {
@@ -216,6 +375,7 @@ export function splitSchema(heartSchema) {
             const cardNode = {
                 type: 'card',
                 id: component.id,
+                name: component.name,
                 label: component.label,
                 cssClass: component.cssClass,
                 hideLabel: component.hideLabel,
@@ -224,7 +384,8 @@ export function splitSchema(heartSchema) {
                 enableAction: component.enableAction,
                 actionButtonLabel: component.actionButtonLabel,
                 actionButtonType: component.actionButtonType,
-                children: []
+                children: [],
+                ...(component.conditions ? { conditions: component.conditions } : {})
             };
             // Process card children
             // Reverse children and use unshift() to maintain order with depth-first processing
@@ -253,20 +414,29 @@ export function splitSchema(heartSchema) {
         // Add property reference to layout (use fieldKey instead of component ID)
         layoutParent.push({ type: 'field', propertyId: fieldKey });
     }
+    // ✅ Merge data and UI fields into unified properties
+    const unifiedProperties = {};
+    Object.keys(dataFields).forEach(fieldKey => {
+        const dataField = dataFields[fieldKey];
+        const uiField = uiFields[fieldKey];
+        unifiedProperties[fieldKey] = {
+            ...dataField,
+            ...uiField,
+            // Ensure widget is always set
+            widget: uiField?.widget || inferWidgetFromType(dataField.type, dataField.format, dataField.options !== undefined)
+        };
+    });
     return {
-        dataSchema: {
-            version: heartSchema.version,
-            properties: dataFields
-        },
-        uiSchema: {
-            properties: stripConfiguredFlag(uiFields),
-            layout
-        }
+        version: heartSchema.version,
+        properties: stripConfiguredFlag(unifiedProperties),
+        layout,
+        ...(heartSchema.settings ? { settings: heartSchema.settings } : {})
     };
 }
 function extractDataField(component, semanticType) {
     const dataField = {
         id: component.id,
+        name: component.name,
         type: semanticType.type,
     };
     // Add format if present
@@ -278,6 +448,8 @@ function extractDataField(component, semanticType) {
         dataField.label = component.label;
     if (component.defaultValue !== undefined)
         dataField.defaultValue = component.defaultValue;
+    if (component.expressionValue !== undefined)
+        dataField.expressionValue = component.expressionValue;
     if (component.content !== undefined)
         dataField.content = component.content;
     if (component.buttonType !== undefined)
@@ -324,7 +496,7 @@ function extractUIField(component) {
     };
     // Copy all properties EXCEPT those in data schema allowed list
     const dataSchemaProps = new Set([
-        'id', 'type', 'label', 'format', 'defaultValue', 'required', 'options',
+        'id', 'type', 'label', 'format', 'defaultValue', 'required', 'options', 'name', 'expressionValue',
         'minLength', 'maxLength', 'minimum', 'maximum', 'minValue', 'maxValue',
         'minDate', 'maxDate', 'minTime', 'maxTime', 'regex', 'pattern', 'content', 'buttonType', 'textboxType'
     ]);
@@ -333,8 +505,8 @@ function extractUIField(component) {
             uiField[key] = component[key];
         }
     });
-    // Special handling: Filter DataGrid columns to keep only required properties
-    if (component.type === 'datagrid' && uiField.columns && Array.isArray(uiField.columns)) {
+    // Special handling: Filter dataGrid columns to keep only required properties
+    if (component.type === 'dataGrid' && uiField.columns && Array.isArray(uiField.columns)) {
         const requiredColumnProps = [
             'field',
             'headerText',
@@ -360,30 +532,15 @@ function extractUIField(component) {
 // MERGE ALGORITHM
 // ============================================================================
 /**
- * Merge split schemas back into heart schema
- * Supports both simple merge and fuzzy matching for re-import scenarios
+ * Merge unified schema back into heart schema
+ * Reconstructs FormComponent array from unified properties and layout
  */
-export function mergeSchema(split, existingUISchema) {
-    // Create lookup map for O(1) access to data fields
-    const dataFieldMap = new Map();
-    Object.entries(split.dataSchema.properties).forEach(([id, field]) => {
-        dataFieldMap.set(id, field);
-    });
-    // Use existing UI schema if provided (for re-import), otherwise use split UI schema
-    let uiSchema = existingUISchema || split.uiSchema;
-    // ✅ Ensure all UI properties have _configured flag (add if missing from imported JSON)
-    const enhancedUIProperties = {};
-    Object.entries(uiSchema.properties).forEach(([key, uiField]) => {
-        enhancedUIProperties[key] = {
-            ...uiField,
-            _configured: uiField._configured !== undefined ? uiField._configured : true
-        };
+export function mergeSchema(unified) {
+    // Create lookup map for O(1) access to unified properties
+    const propertyMap = new Map();
+    Object.entries(unified.properties).forEach(([id, field]) => {
+        propertyMap.set(id, field);
     });
-    // Use enhanced UI schema with _configured flags
-    uiSchema = {
-        ...uiSchema,
-        properties: enhancedUIProperties
-    };
     // Track processed field IDs to prevent duplicates
     const processedFieldIds = new Set();
     // Recursive function to process layout nodes
@@ -394,30 +551,31 @@ export function mergeSchema(split, existingUISchema) {
                 const fieldNode = node;
                 // ✅ DEDUPLICATION: Skip if we've already processed this field
                 if (processedFieldIds.has(fieldNode.propertyId)) {
-                    //console.log(`⚠️ [mergeSchema] Skipping duplicate field: ${fieldNode.propertyId}`);
                     continue;
                 }
                 processedFieldIds.add(fieldNode.propertyId);
-                const dataField = dataFieldMap.get(fieldNode.propertyId);
-                const uiField = uiSchema.properties[fieldNode.propertyId];
-                if (!dataField) {
-                    console.warn(`Field ${fieldNode.propertyId} in layout not found in data schema`);
-                    // Generate fallback data field
-                    const fallbackDataField = {
+                const unifiedField = propertyMap.get(fieldNode.propertyId);
+                if (!unifiedField) {
+                    console.warn(`Field ${fieldNode.propertyId} in layout not found in unified schema`);
+                    // Generate fallback component
+                    const fallbackComponent = {
                         id: fieldNode.propertyId,
-                        type: 'any',
-                        label: uiField?.widget || 'Unknown Field'
+                        name: generateName(''),
+                        type: 'textbox',
+                        label: 'Unknown Field',
+                        _configured: true
                     };
-                    components.push(mergeField(fallbackDataField, uiField));
+                    components.push(fallbackComponent);
                 }
                 else {
-                    components.push(mergeField(dataField, uiField));
+                    components.push(mergeUnifiedField(unifiedField));
                 }
             }
             else if (node.type === 'table') {
                 const tableNode = node;
                 const tableComponent = {
                     id: tableNode.id,
+                    name: tableNode.name,
                     type: 'table',
                     label: tableNode.label || 'Table',
                     cssClass: tableNode.cssClass,
@@ -426,13 +584,13 @@ export function mergeSchema(split, existingUISchema) {
                     columns: tableNode.cols,
                     columnWidths: tableNode.columnWidths,
                     tableCells: [],
-                    _configured: true
+                    _configured: true,
+                    ...(tableNode.conditions ? { conditions: tableNode.conditions } : {})
                 };
                 // Process table cells recursively
                 tableNode.cells.forEach((row) => {
                     const cellRow = [];
                     row.forEach((cell) => {
-                        // Recursively process children in each cell
                         const cellComponents = processLayoutNodes(cell.children);
                         cellRow.push(cellComponents);
                     });
@@ -445,12 +603,14 @@ export function mergeSchema(split, existingUISchema) {
                 const panelComponent = {
                     id: panelNode.id,
                     type: 'panel',
+                    name: panelNode.name,
                     cssClass: panelNode.cssClass,
                     hideBorders: panelNode.hideBorders,
                     hideLabel: panelNode.hideLabel,
                     label: panelNode.label || 'Panel',
                     children: processLayoutNodes(panelNode.children),
-                    _configured: true
+                    _configured: true,
+                    ...(panelNode.conditions ? { conditions: panelNode.conditions } : {})
                 };
                 components.push(panelComponent);
             }
@@ -459,17 +619,19 @@ export function mergeSchema(split, existingUISchema) {
                 const tabsComponent = {
                     id: tabsNode.id,
                     type: 'tabs',
+                    name: tabsNode.name,
                     label: tabsNode.label || 'Tabs',
                     cssClass: tabsNode.cssClass,
                     tabOptions: tabsNode.tabOptions,
                     tabItems: [],
-                    _configured: true
+                    _configured: true,
+                    ...(tabsNode.conditions ? { conditions: tabsNode.conditions } : {})
                 };
                 // Process tabs recursively
                 tabsNode.tabs.forEach((tab) => {
                     tabsComponent.tabItems.push({
                         header: tab.header,
-                        content: processLayoutNodes(tab.children) // Recursively process tab content
+                        content: processLayoutNodes(tab.children)
                     });
                 });
                 components.push(tabsComponent);
@@ -479,11 +641,13 @@ export function mergeSchema(split, existingUISchema) {
                 const cardComponent = {
                     id: cardNode.id,
                     type: 'card',
+                    name: cardNode.name,
                     label: cardNode.label || 'Card',
                     cssClass: cardNode.cssClass,
                     hideLabel: cardNode.hideLabel,
                     children: processLayoutNodes(cardNode.children),
-                    _configured: true
+                    _configured: true,
+                    ...(cardNode.conditions ? { conditions: cardNode.conditions } : {})
                 };
                 // Add card-specific properties
                 if (cardNode.cardTitle !== undefined)
@@ -503,72 +667,76 @@ export function mergeSchema(split, existingUISchema) {
     };
     // Process root layout nodes
     let components;
-    if (!uiSchema.layout || uiSchema.layout.length === 0) {
-        // If layout is undefined or empty, generate a flat layout from data schema
-        //console.log('⚠️ UI Schema layout is undefined or empty, generating from data schema');
-        components = Object.entries(split.dataSchema.properties).map(([fieldKey, dataField]) => {
-            const uiField = uiSchema.properties[fieldKey];
-            return mergeField(dataField, uiField);
+    if (!unified.layout || unified.layout.length === 0) {
+        // If layout is undefined or empty, generate a flat layout from properties
+        components = Object.entries(unified.properties).map(([, unifiedField]) => {
+            return mergeUnifiedField(unifiedField);
         });
     }
     else {
-        components = processLayoutNodes(uiSchema.layout);
+        components = processLayoutNodes(unified.layout);
     }
     return {
-        version: split.dataSchema.version,
-        components
+        version: unified.version,
+        components,
+        ...(unified.settings ? { settings: unified.settings } : {})
     };
 }
 /**
- * Merge a single field from data and UI schemas
+ * Merge a single unified field into FormComponent
  */
-function mergeField(dataField, uiField) {
-    // Check if options are present in the data field
-    const hasOptions = dataField.options !== undefined && dataField.options.length > 0;
+function mergeUnifiedField(unifiedField) {
+    const hasOptions = unifiedField.options !== undefined && unifiedField.options.length > 0;
     const component = {
-        id: dataField.id,
-        type: (uiField?.widget || inferWidgetFromType(dataField.type, dataField.format, hasOptions)),
-        label: dataField.label || dataField.id,
+        id: unifiedField.id,
+        name: unifiedField.name,
+        type: (unifiedField.widget || inferWidgetFromType(unifiedField.type, unifiedField.format, hasOptions)),
+        label: unifiedField.label || unifiedField.id,
     };
-    // Copy data properties
-    if (dataField.defaultValue !== undefined)
-        component.defaultValue = dataField.defaultValue;
-    if (dataField.required !== undefined)
-        component.required = dataField.required;
-    if (dataField.content !== undefined)
-        component.content = dataField.content;
-    if (dataField.buttonType !== undefined)
-        component.buttonType = dataField.buttonType;
-    if (dataField.textboxType !== undefined)
-        component.textboxType = dataField.textboxType;
-    if (dataField.options !== undefined)
-        component.options = dataField.options;
-    if (dataField.minLength !== undefined)
-        component.minLength = dataField.minLength;
-    if (dataField.maxLength !== undefined)
-        component.maxLength = dataField.maxLength;
-    if (dataField.minValue !== undefined)
-        component.minValue = dataField.minValue;
-    if (dataField.maxValue !== undefined)
-        component.maxValue = dataField.maxValue;
-    if (dataField.minDate !== undefined)
-        component.minDate = dataField.minDate;
-    if (dataField.maxDate !== undefined)
-        component.maxDate = dataField.maxDate;
-    if (dataField.minTime !== undefined)
-        component.minTime = dataField.minTime;
-    if (dataField.maxTime !== undefined)
-        component.maxTime = dataField.maxTime;
-    if (dataField.pattern !== undefined)
-        component.regex = dataField.pattern;
-    // Copy UI properties (including _configured flag)
-    if (uiField) {
-        Object.keys(uiField).forEach(key => {
-            if (key !== 'widget' && component[key] === undefined) {
-                component[key] = uiField[key];
-            }
-        });
-    }
+    // Copy all data and UI properties from unified field
+    const dataSchemaProps = new Set([
+        'id', 'type', 'name', 'label', 'format', 'widget', 'defaultValue', 'required', 'options', 'expressionValue',
+        'minLength', 'maxLength', 'minimum', 'maximum', 'minValue', 'maxValue',
+        'minDate', 'maxDate', 'minTime', 'maxTime', 'regex', 'pattern', 'content', 'buttonType', 'textboxType'
+    ]);
+    Object.keys(unifiedField).forEach(key => {
+        if (!dataSchemaProps.has(key) && key !== 'id' && key !== 'name' && key !== 'type' && key !== 'label') {
+            component[key] = unifiedField[key];
+        }
+    });
+    // Copy specific data properties
+    if (unifiedField.defaultValue !== undefined)
+        component.defaultValue = unifiedField.defaultValue;
+    if (unifiedField.expressionValue !== undefined)
+        component.expressionValue = unifiedField.expressionValue;
+    if (unifiedField.required !== undefined)
+        component.required = unifiedField.required;
+    if (unifiedField.content !== undefined)
+        component.content = unifiedField.content;
+    if (unifiedField.buttonType !== undefined)
+        component.buttonType = unifiedField.buttonType;
+    if (unifiedField.textboxType !== undefined)
+        component.textboxType = unifiedField.textboxType;
+    if (unifiedField.options !== undefined)
+        component.options = unifiedField.options;
+    if (unifiedField.minLength !== undefined)
+        component.minLength = unifiedField.minLength;
+    if (unifiedField.maxLength !== undefined)
+        component.maxLength = unifiedField.maxLength;
+    if (unifiedField.minValue !== undefined)
+        component.minValue = unifiedField.minValue;
+    if (unifiedField.maxValue !== undefined)
+        component.maxValue = unifiedField.maxValue;
+    if (unifiedField.minDate !== undefined)
+        component.minDate = unifiedField.minDate;
+    if (unifiedField.maxDate !== undefined)
+        component.maxDate = unifiedField.maxDate;
+    if (unifiedField.minTime !== undefined)
+        component.minTime = unifiedField.minTime;
+    if (unifiedField.maxTime !== undefined)
+        component.maxTime = unifiedField.maxTime;
+    if (unifiedField.pattern !== undefined)
+        component.regex = unifiedField.pattern;
     return component;
 }
 /**
@@ -577,11 +745,11 @@ function mergeField(dataField, uiField) {
 export function inferWidgetFromType(type, format, hasOptions) {
     if (type === 'string') {
         if (format === 'date')
-            return 'datepicker';
+            return 'date';
         if (format === 'date-time')
-            return 'datetimepicker';
+            return 'dateTime';
         if (format === 'time')
-            return 'timepicker';
+            return 'time';
         if (format === 'email')
             return 'email';
         if (format === 'url')
@@ -606,13 +774,13 @@ export function inferWidgetFromType(type, format, hasOptions) {
     if (type === 'sign')
         return 'signature';
     if (type === 'image')
-        return 'imageeditor';
+        return 'imageEditor';
     if (type === 'file')
-        return 'fileupload';
+        return 'fileUpload';
     if (type === 'color')
-        return 'colorpicker';
+        return 'colorPicker';
     if (type === 'grid')
-        return 'datagrid';
+        return 'dataGrid';
     if (type === 'any')
         return 'textbox';
     return 'textbox';
@@ -844,21 +1012,23 @@ export function mergeWithIDRemapping(newDataSchema, existingUISchema) {
             //console.log(`📐 Layout rebuilt: new fields added at end`);
         }
     }
-    // Merge with remapped data
+    // Merge to FormSchema using unified schema
+    const unifiedProperties = {};
+    Object.keys(remappedDataFields).forEach(fieldKey => {
+        const dataField = remappedDataFields[fieldKey];
+        const uiField = enhancedUIProperties[fieldKey];
+        unifiedProperties[fieldKey] = {
+            ...dataField,
+            ...uiField,
+            widget: uiField?.widget || inferWidgetFromType(dataField.type, dataField.format, dataField.options !== undefined)
+        };
+    });
     const mergedSchema = mergeSchema({
-        dataSchema: {
-            version: newDataSchema.version,
-            properties: remappedDataFields
-        },
-        uiSchema: {
-            properties: enhancedUIProperties,
-            layout: remappedLayout
-        }
+        version: newDataSchema.version,
+        properties: unifiedProperties,
+        layout: remappedLayout,
+        ...(newDataSchema.settings ? { settings: newDataSchema.settings } : {})
     });
-    // Log summary
-    //const remappedCount = matchResults.filter(m => m.newDataId !== m.existingId).length;
-    //const newFieldsCount = matchResults.filter(m => m.method === 'new').length;
-    //console.log(`Merge complete: ${matchResults.length} fields, ${remappedCount} remapped, ${newFieldsCount} new`);
     return mergedSchema;
 }
 /**
@@ -911,9 +1081,6 @@ function remapLayoutIds(layout, idMap) {
         return node;
     });
 }
-// ============================================================================
-// UTILITY FUNCTIONS
-// ============================================================================
 /**
  * Extract all field IDs from layout tree
  */
@@ -940,14 +1107,6 @@ export function extractFieldIdsFromLayout(layout) {
     }
     return fieldIds;
 }
-/**
- * Find unmatched fields (in data schema but not in layout)
- */
-export function findUnmatchedFields(dataSchema, layout) {
-    const layoutFieldIds = extractFieldIdsFromLayout(layout);
-    const dataFieldIds = Object.keys(dataSchema.properties);
-    return dataFieldIds.filter(id => !layoutFieldIds.has(id));
-}
 // ============================================================================
 // PARSER OUTPUT CONVERSION
 // ============================================================================
@@ -1048,133 +1207,3 @@ export function convertComponentsToDataSchema(components) {
         properties
     };
 }
-/**
- * Convert parser output to a simple linear layout
- * Used when no existing UI schema is present
- */
-export function convertComponentsToUISchema(components) {
-    const properties = {};
-    const layout = [];
-    // Helper to recursively process components and build layout
-    function processComponent(comp) {
-        // Extract UI field
-        const uiField = extractUIField(comp);
-        properties[comp.id] = uiField;
-        // Handle different component types
-        if (comp.type === 'table' && comp.tableCells) {
-            const tableCells = comp.tableCells.map((row, rowIndex) => row.map((cellComponents, colIndex) => ({
-                row: rowIndex,
-                col: colIndex,
-                // cellComponents is FormComponent[], so map over it directly
-                children: cellComponents.map(processComponent)
-            })));
-            return {
-                type: 'table',
-                id: comp.id,
-                label: comp.label,
-                cssClass: comp.cssClass,
-                hideBorders: comp.hideBorders,
-                rows: comp.tableCells.length,
-                cols: comp.tableCells[0]?.length || 0,
-                cells: tableCells,
-                columnWidths: comp.columnWidths
-            };
-        }
-        if (comp.type === 'panel' && comp.children) {
-            return {
-                type: 'panel',
-                id: comp.id,
-                label: comp.label,
-                cssClass: comp.cssClass,
-                hideBorders: comp.hideBorders,
-                hideLabel: comp.hideLabel,
-                children: comp.children.map(processComponent)
-            };
-        }
-        if (comp.type === 'tabs' && comp.tabItems) {
-            // tabs is an array of { header, children }
-            const tabs = comp.tabItems.map((tab) => ({
-                header: tab.header,
-                children: tab.content?.map(processComponent) || []
-            }));
-            return {
-                type: 'tabs',
-                id: comp.id,
-                cssClass: comp.cssClass,
-                tabs
-            };
-        }
-        if (comp.type === 'card' && comp.children) {
-            return {
-                type: 'card',
-                id: comp.id,
-                label: comp.label,
-                cssClass: comp.cssClass,
-                hideLabel: comp.hideLabel,
-                cardTitle: comp.cardTitle,
-                cardSubtitle: comp.cardSubtitle,
-                enableAction: comp.enableAction,
-                actionButtonLabel: comp.actionButtonLabel,
-                actionButtonType: comp.actionButtonType,
-                children: comp.children.map(processComponent)
-            };
-        }
-        // Regular field
-        return {
-            type: 'field',
-            propertyId: comp.id
-        };
-    }
-    // Process all root components
-    for (const comp of components) {
-        layout.push(processComponent(comp));
-    }
-    return {
-        properties,
-        layout
-    };
-}
-// ============================================================================
-// RENDERER HELPER FUNCTIONS
-// ============================================================================
-/**
- * Generate default UI properties for each data field
- * Used by renderers when only data schema is provided
- */
-export function generateUIPropertiesFromData(dataSchema) {
-    const properties = {};
-    Object.entries(dataSchema.properties).forEach(([fieldId, dataField]) => {
-        const hasOptions = dataField.options !== undefined && dataField.options.length > 0;
-        const widget = inferWidgetFromType(dataField.type, dataField.format, hasOptions);
-        properties[fieldId] = { widget };
-    });
-    return properties;
-}
-/**
- * Generate sequential layout from data schema
- * Used by renderers when only data schema is provided
- */
-export function generateLayoutFromData(dataSchema) {
-    return Object.keys(dataSchema.properties).map(fieldId => ({
-        type: 'field',
-        propertyId: fieldId
-    }));
-}
-/**
- * Generate minimal data schema from UI schema
- * Used by renderers when only UI schema is provided
- */
-export function generateDataSchemaFromUI(uiSchema) {
-    const dataProperties = {};
-    Object.entries(uiSchema.properties).forEach(([fieldId, uiField]) => {
-        dataProperties[fieldId] = {
-            id: fieldId,
-            type: 'string',
-            label: uiField.label || fieldId
-        };
-    });
-    return {
-        version: '1.0.0-beta',
-        properties: dataProperties
-    };
-}