@syncfusion/ej2-form-renderer 34.2.2

package/src/common/json-converter.js

@@ -0,0 +1,1110 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { sanitizeId } from './utils';
+/**
+ * @private
+ */
+export var generateId = function (type) {
+    var timestamp = Date.now();
+    var random = Math.floor(Math.random() * 1000);
+    return type + "_" + timestamp + "_" + random;
+};
+/**
+ * @private
+ */
+export var generateName = function (type) {
+    var random = Math.floor(Math.random() * 1000);
+    return type + "_" + random;
+};
+/**
+ * @private
+ */
+export function labelToFieldKey(label, fallbackId) {
+    if (!label || label.trim() === '') {
+        return fallbackId || 'field';
+    }
+    // Remove special characters, keep letters, numbers, and spaces
+    var cleaned = label
+        .replace(/[^\w\s]/g, '') // Remove special chars
+        .trim();
+    if (cleaned === '') {
+        return fallbackId || 'field';
+    }
+    // Split by spaces/underscores and convert to camelCase
+    var words = cleaned.split(/[\s_]+/);
+    if (words.length === 0) {
+        return fallbackId || 'field';
+    }
+    // First word lowercase, rest title case
+    var camelCase = words
+        .map(function (word, index) {
+        if (index === 0) {
+            return word.toLowerCase();
+        }
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+    })
+        .join('');
+    return camelCase || fallbackId || 'field';
+}
+/**
+ * @private
+ */
+export function makeUniqueFieldKey(baseKey, existingKeys, originalId) {
+    if (!existingKeys.has(baseKey)) {
+        return baseKey;
+    }
+    // Try with original ID suffix first
+    if (originalId) {
+        var withId = baseKey + "_" + originalId.split('_').pop();
+        if (!existingKeys.has(withId)) {
+            return withId;
+        }
+    }
+    // Fall back to numeric suffix
+    var counter = 2;
+    while (existingKeys.has("" + baseKey + counter)) {
+        counter++;
+    }
+    return "" + baseKey + counter;
+}
+/**
+ * @private
+ */
+export var UI_TYPE_TO_SEMANTIC_TYPE = {
+    // String types
+    'textbox': { type: 'string' },
+    'textarea': { type: 'string' },
+    'email': { type: 'string', format: 'email' },
+    'url': { type: 'string', format: 'url' },
+    'phone': { type: 'string' },
+    'password': { type: 'string' },
+    'inputMask': { type: 'string' },
+    // Numeric types
+    'number': { type: 'number' },
+    'rangeSlider': { type: 'number' },
+    'rating': { type: 'number' },
+    // Boolean types
+    'checkbox': { type: 'boolean' },
+    'switch': { type: 'boolean' },
+    // Date/Time types
+    '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' },
+    // Single-value selection (stored as string)
+    'dropdown': { type: 'string' },
+    'radio': { 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' },
+    // Layout types (excluded from data schema)
+    'staticHtml': { type: 'string' },
+    'table': null,
+    'panel': null,
+    'tabs': null,
+    'card': null
+};
+/**
+ * @private
+ */
+function stripConfiguredFlag(properties) {
+    var out = {};
+    var keys = Object.keys(properties || {});
+    for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+        var key = keys_1[_i];
+        var val = properties[key];
+        var copy = __assign({}, val);
+        if (copy && copy._configured !== undefined) {
+            delete copy._configured;
+        }
+        out[key] = copy;
+    }
+    return out;
+}
+/**
+ * @private
+ */
+function cleanConditionRules(condition, validFieldIds) {
+    if (!condition || !condition.rules || !Array.isArray(condition.rules)) {
+        return undefined;
+    }
+    var cleanedRules = condition.rules
+        .map(function (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(function (rule) { return rule !== null && rule !== undefined; });
+    // If no rules remain, return undefined
+    if (cleanedRules.length === 0) {
+        return undefined;
+    }
+    return __assign({}, condition, { rules: cleanedRules });
+}
+/**
+ * @private
+ */
+function getAllComponentIds(components) {
+    var ids = new Set();
+    var stack = components.slice();
+    while (stack.length) {
+        var comp = stack.pop();
+        ids.add(comp.id);
+        if (comp.children)
+            stack.push.apply(stack, comp.children);
+        if (comp.tabItems) {
+            comp.tabItems.forEach(function (tab) {
+                if (tab.content)
+                    stack.push.apply(stack, tab.content);
+            });
+        }
+        if (comp.tableCells) {
+            comp.tableCells.forEach(function (row) {
+                row.forEach(function (cell) { return stack.push.apply(stack, cell); });
+            });
+        }
+    }
+    return ids;
+}
+/**
+ * @private
+ */
+export function splitSchema(heartSchema) {
+    var dataFields = {};
+    var uiFields = {};
+    var layout = [];
+    var usedFieldKeys = new Set(); // Track unique field keys
+    var seenComponentIds = new Set(); // Track component IDs to prevent duplicates
+    // ✅ Get all valid field IDs for condition validation
+    var validFieldIds = getAllComponentIds(heartSchema.components);
+    // Stack for iterative traversal (avoid recursion)
+    var stack = heartSchema.components.map(function (c) { return ({
+        component: c,
+        layoutParent: layout
+    }); });
+    var _loop_1 = function () {
+        // Use shift() instead of pop() to maintain order (FIFO instead of LIFO)
+        var _a = stack.shift(), component = _a.component, layoutParent = _a.layoutParent;
+        // ✅ Clean conditions before processing
+        if (component.conditions) {
+            var cleanedConditions = {};
+            var hasValidConditions = false;
+            if (component.conditions.visibleWhen) {
+                var cleaned = cleanConditionRules(component.conditions.visibleWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.visibleWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.hideWhen) {
+                var cleaned = cleanConditionRules(component.conditions.hideWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.hideWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.readOnlyWhen) {
+                var cleaned = cleanConditionRules(component.conditions.readOnlyWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.readOnlyWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.disabledWhen) {
+                var cleaned = cleanConditionRules(component.conditions.disabledWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.disabledWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.requiredWhen) {
+                var cleaned = cleanConditionRules(component.conditions.requiredWhen, validFieldIds);
+                if (cleaned) {
+                    cleanedConditions.requiredWhen = cleaned;
+                    hasValidConditions = true;
+                }
+            }
+            if (component.conditions.setValueWhen) {
+                var 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 && component.conditions.choiceBasedField) {
+                var 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)) {
+                var cleanedDataRules = component.conditions.conditionalData
+                    .map(function (rule) {
+                    var cleaned = cleanConditionRules(rule.condition, validFieldIds);
+                    if (cleaned && rule.dataSource) {
+                        return {
+                            condition: cleaned,
+                            dataSource: rule.dataSource,
+                            columns: rule.columns,
+                            includeColumns: rule.includeColumns
+                        };
+                    }
+                    return null;
+                })
+                    .filter(function (rule) { return 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)
+        var semanticType = UI_TYPE_TO_SEMANTIC_TYPE[component.type];
+        // Handle layout containers
+        if (component.type === 'table') {
+            var safeId = sanitizeId(component.id, generateId(semanticType.type));
+            var tableNode_1 = __assign({ type: 'table', id: safeId, name: component.name, label: component.label, cssClass: component.cssClass, hideBorders: component.hideBorders, rows: (component.tableCells && component.tableCells.length) || 0, cols: (component.tableCells && component.tableCells[0] && component.tableCells[0].length) || 0, cells: [], columnWidths: component.columnWidths }, (component.conditions ? { conditions: component.conditions } : {}));
+            // Process table cells
+            if (component.tableCells) {
+                component.tableCells.forEach(function (row, rowIndex) {
+                    var cellRow = [];
+                    row.forEach(function (cellComponents, colIndex) {
+                        var cellChildren = [];
+                        // Reverse children and use unshift() to maintain order with depth-first processing
+                        cellComponents.slice().reverse().forEach(function (comp) {
+                            stack.unshift({ component: comp, layoutParent: cellChildren });
+                        });
+                        cellRow.push({ row: rowIndex, col: colIndex, children: cellChildren });
+                    });
+                    tableNode_1.cells.push(cellRow);
+                });
+            }
+            layoutParent.push(tableNode_1);
+            return "continue";
+        }
+        if (component.type === 'panel') {
+            var safeId = sanitizeId(component.id, generateId(semanticType.type));
+            var panelNode_1 = __assign({ type: 'panel', id: safeId, name: component.name, label: component.label, cssClass: component.cssClass, hideBorders: component.hideBorders, hideLabel: component.hideLabel, children: [] }, (component.conditions ? { conditions: component.conditions } : {}));
+            // Process panel children
+            // Reverse children and use unshift() to maintain order with depth-first processing
+            (component.children || []).slice().reverse().forEach(function (child) {
+                stack.unshift({ component: child, layoutParent: panelNode_1.children });
+            });
+            layoutParent.push(panelNode_1);
+            return "continue";
+        }
+        if (component.type === 'tabs') {
+            var safeId = sanitizeId(component.id, generateId(semanticType.type));
+            var tabsNode_1 = __assign({ type: 'tabs', name: component.name, id: safeId, label: component.label, cssClass: component.cssClass, tabOptions: component.tabOptions, tabs: [] }, (component.conditions ? { conditions: component.conditions } : {}));
+            // Process tabs
+            if (component.tabItems) {
+                component.tabItems.forEach(function (tab) {
+                    var tabChildren = [];
+                    // Reverse children and use unshift() to maintain order with depth-first processing
+                    (tab.content || []).slice().reverse().forEach(function (comp) {
+                        stack.unshift({ component: comp, layoutParent: tabChildren });
+                    });
+                    tabsNode_1.tabs.push({ header: tab.header, children: tabChildren });
+                });
+            }
+            layoutParent.push(tabsNode_1);
+            return "continue";
+        }
+        if (component.type === 'card') {
+            var safeId = sanitizeId(component.id, generateId(semanticType.type));
+            var cardNode_1 = __assign({ type: 'card', id: safeId, name: component.name, label: component.label, cssClass: component.cssClass, hideLabel: component.hideLabel, cardTitle: component.cardTitle, cardSubtitle: component.cardSubtitle, children: [] }, (component.conditions ? { conditions: component.conditions } : {}));
+            // Process card children
+            // Reverse children and use unshift() to maintain order with depth-first processing
+            (component.children || []).slice().reverse().forEach(function (child) {
+                stack.unshift({ component: child, layoutParent: cardNode_1.children });
+            });
+            layoutParent.push(cardNode_1);
+            return "continue";
+        }
+        // ✅ DEDUPLICATION: Skip if we've already processed this component ID
+        if (seenComponentIds.has(component.id)) {
+            return "continue";
+        }
+        seenComponentIds.add(component.id);
+        // Generate semantic field key from label
+        var baseFieldKey = labelToFieldKey(component.label || component.id, component.id);
+        var fieldKey = makeUniqueFieldKey(baseFieldKey, usedFieldKeys, component.id);
+        usedFieldKeys.add(fieldKey);
+        // Extract data field properties (all components, no skipping)
+        // If no semantic type mapping exists, use 'any' as the type
+        var dataField = extractDataField(component, semanticType || { type: 'any' });
+        dataFields[fieldKey] = dataField;
+        // Extract UI field properties (all components)
+        uiFields[fieldKey] = extractUIField(component);
+        // Add property reference to layout (use fieldKey instead of component ID)
+        layoutParent.push({ type: 'field', propertyId: fieldKey });
+    };
+    while (stack.length > 0) {
+        _loop_1();
+    }
+    // ✅ Merge data and UI fields into unified properties
+    var unifiedProperties = {};
+    Object.keys(dataFields).forEach(function (fieldKey) {
+        var dataField = dataFields[fieldKey];
+        var uiField = uiFields[fieldKey];
+        unifiedProperties[fieldKey] = __assign({}, dataField, uiField, { 
+            // Ensure widget is always set
+            widget: (uiField && uiField.widget) || inferWidgetFromType(dataField.type, dataField.format, dataField.options !== undefined) });
+    });
+    var settings = heartSchema.settings ? __assign({}, heartSchema.settings) : {};
+    return __assign({ version: heartSchema.version, properties: stripConfiguredFlag(unifiedProperties), layout: layout }, (Object.keys(settings).length > 0 ? { settings: settings } : {}));
+}
+/**
+ * @private
+ */
+function extractDataField(component, semanticType) {
+    var safeId = sanitizeId(component.id, generateId(semanticType.type));
+    var dataField = {
+        id: safeId,
+        name: component.name,
+        type: semanticType.type,
+    };
+    // Add format if present
+    if (semanticType.format) {
+        dataField.format = semanticType.format;
+    }
+    // Extract allowed properties only
+    if (component.label !== undefined)
+        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)
+        dataField.buttonType = component.buttonType;
+    if (component.textboxType !== undefined)
+        dataField.textboxType = component.textboxType;
+    if (component.required !== undefined)
+        dataField.required = component.required;
+    // Extract options for selection fields (dropdown, radio, multiselect)
+    if (component.options !== undefined)
+        dataField.options = component.options;
+    if (component.minLength !== undefined)
+        dataField.minLength = component.minLength;
+    if (component.maxLength !== undefined)
+        dataField.maxLength = component.maxLength;
+    // Handle numeric validation (use canonical names)
+    if (component.minValue !== undefined)
+        dataField.minValue = component.minValue;
+    if (component.maxValue !== undefined)
+        dataField.maxValue = component.maxValue;
+    // Date/time validation
+    if (component.minDate !== undefined)
+        dataField.minDate = component.minDate;
+    if (component.maxDate !== undefined)
+        dataField.maxDate = component.maxDate;
+    if (component.minTime !== undefined)
+        dataField.minTime = component.minTime;
+    if (component.maxTime !== undefined)
+        dataField.maxTime = component.maxTime;
+    // Pattern validation (rename from regex, convert RegExp to string)
+    if (component.regex !== undefined) {
+        var regex = component.regex;
+        dataField.pattern = regex instanceof RegExp ? regex.source : regex;
+    }
+    if (component.pattern !== undefined) {
+        var pattern = component.pattern;
+        dataField.pattern = pattern instanceof RegExp ? pattern.source : pattern;
+    }
+    return dataField;
+}
+/**
+ * @private
+ */
+function extractUIField(component) {
+    var uiField = {
+        widget: component.type,
+    };
+    // Copy all properties EXCEPT those in data schema allowed list
+    var dataSchemaProps = new Set([
+        'id', 'type', 'label', 'format', 'defaultValue', 'required', 'options', 'name', 'expressionValue',
+        'minLength', 'maxLength', 'minimum', 'maximum', 'minValue', 'maxValue',
+        'minDate', 'maxDate', 'minTime', 'maxTime', 'regex', 'pattern', 'content', 'buttonType', 'textboxType'
+    ]);
+    Object.keys(component).forEach(function (key) {
+        if (!dataSchemaProps.has(key) && key !== 'id' && key !== 'type') {
+            uiField[key] = component[key];
+        }
+    });
+    // Special handling: Filter dataGrid columns to keep only required properties
+    if (component.type === 'dataGrid' && uiField.columns && Array.isArray(uiField.columns)) {
+        var requiredColumnProps_1 = [
+            'field',
+            'headerText',
+            'type',
+            'width',
+            'format',
+            'editType',
+            'validationRules',
+            'allowEditing',
+            'expression',
+            'isPrimaryKey',
+            'customValidation'
+        ];
+        uiField.columns = uiField.columns.map(function (col) {
+            var filteredCol = {};
+            requiredColumnProps_1.forEach(function (prop) {
+                if (col[prop] !== undefined) {
+                    filteredCol[prop] = col[prop];
+                }
+            });
+            return filteredCol;
+        });
+    }
+    return uiField;
+}
+/**
+ * @private
+ */
+export function mergeSchema(unified) {
+    // Create lookup map for O(1) access to unified properties
+    var propertyMap = new Map();
+    var unifiedPropKeys = Object.keys(unified.properties);
+    for (var _i = 0, unifiedPropKeys_1 = unifiedPropKeys; _i < unifiedPropKeys_1.length; _i++) {
+        var id = unifiedPropKeys_1[_i];
+        propertyMap.set(id, unified.properties[id]);
+    }
+    // Track processed field IDs to prevent duplicates
+    var processedFieldIds = new Set();
+    // Recursive function to process layout nodes
+    var processLayoutNodes = function (layoutNodes) {
+        var components = [];
+        var _loop_2 = function (node) {
+            if (node.type === 'field') {
+                var fieldNode = node;
+                // ✅ DEDUPLICATION: Skip if we've already processed this field
+                if (processedFieldIds.has(fieldNode.propertyId)) {
+                    return "continue";
+                }
+                processedFieldIds.add(fieldNode.propertyId);
+                var unifiedField = propertyMap.get(fieldNode.propertyId);
+                if (!unifiedField) {
+                    // console.warn(`Field ${fieldNode.propertyId} in layout not found in schema`);
+                    // Generate fallback component
+                    var fallbackComponent = {
+                        id: fieldNode.propertyId || generateId('textbox'),
+                        name: generateName(''),
+                        type: 'textbox',
+                        label: 'Unknown Field',
+                        _configured: true
+                    };
+                    components.push(fallbackComponent);
+                }
+                else {
+                    components.push(mergeUnifiedField(unifiedField));
+                }
+            }
+            else if (node.type === 'table') {
+                var tableNode = node;
+                var tableComponent_1 = __assign({ id: tableNode.id || generateId('table'), name: tableNode.name, type: 'table', label: tableNode.label || 'Table', cssClass: tableNode.cssClass, hideBorders: tableNode.hideBorders, rows: tableNode.rows, columns: tableNode.cols, columnWidths: tableNode.columnWidths, tableCells: [], _configured: true }, (tableNode.conditions ? { conditions: tableNode.conditions } : {}));
+                // Process table cells recursively
+                tableNode.cells.forEach(function (row) {
+                    var cellRow = [];
+                    row.forEach(function (cell) {
+                        var cellComponents = processLayoutNodes(cell.children);
+                        cellRow.push(cellComponents);
+                    });
+                    tableComponent_1.tableCells.push(cellRow);
+                });
+                components.push(tableComponent_1);
+            }
+            else if (node.type === 'panel') {
+                var panelNode = node;
+                var panelComponent = __assign({ id: panelNode.id || generateId('panel'), type: 'panel', name: panelNode.name, cssClass: panelNode.cssClass, hideBorders: panelNode.hideBorders, hideLabel: panelNode.hideLabel, label: panelNode.label || 'Panel', children: processLayoutNodes(panelNode.children), _configured: true }, (panelNode.conditions ? { conditions: panelNode.conditions } : {}));
+                components.push(panelComponent);
+            }
+            else if (node.type === 'tabs') {
+                var tabsNode = node;
+                var tabsComponent_1 = __assign({ id: tabsNode.id || generateId('tabs'), type: 'tabs', name: tabsNode.name, label: tabsNode.label || 'Tabs', cssClass: tabsNode.cssClass, tabOptions: tabsNode.tabOptions, tabItems: [], _configured: true }, (tabsNode.conditions ? { conditions: tabsNode.conditions } : {}));
+                // Process tabs recursively
+                tabsNode.tabs.forEach(function (tab) {
+                    tabsComponent_1.tabItems.push({
+                        header: tab.header,
+                        content: processLayoutNodes(tab.children)
+                    });
+                });
+                components.push(tabsComponent_1);
+            }
+            else if (node.type === 'card') {
+                var cardNode = node;
+                var cardComponent = __assign({ id: cardNode.id || generateId('card'), type: 'card', name: cardNode.name, label: cardNode.label || 'Card', cssClass: cardNode.cssClass, hideLabel: cardNode.hideLabel, children: processLayoutNodes(cardNode.children), _configured: true }, (cardNode.conditions ? { conditions: cardNode.conditions } : {}));
+                // Add card-specific properties
+                if (cardNode.cardTitle !== undefined)
+                    cardComponent.cardTitle = cardNode.cardTitle;
+                if (cardNode.cardSubtitle !== undefined)
+                    cardComponent.cardSubtitle = cardNode.cardSubtitle;
+                components.push(cardComponent);
+            }
+        };
+        for (var _i = 0, layoutNodes_1 = layoutNodes; _i < layoutNodes_1.length; _i++) {
+            var node = layoutNodes_1[_i];
+            _loop_2(node);
+        }
+        return components;
+    };
+    // Process root layout nodes
+    var components;
+    if (!unified.layout || unified.layout.length === 0) {
+        // If layout is undefined or empty, generate a flat layout from properties
+        var flatPropKeys = Object.keys(unified.properties);
+        components = flatPropKeys.map(function (key) {
+            return mergeUnifiedField(unified.properties[key]);
+        });
+    }
+    else {
+        components = processLayoutNodes(unified.layout);
+    }
+    return __assign({ version: unified.version, components: components }, (unified.settings ? { settings: unified.settings } : {}));
+}
+/**
+ * @private
+ */
+function mergeUnifiedField(unifiedField) {
+    var hasOptions = unifiedField.options !== undefined && unifiedField.options.length > 0;
+    var component = {
+        id: unifiedField.id || generateId(unifiedField.widget || inferWidgetFromType(unifiedField.type, unifiedField.format, hasOptions)),
+        name: unifiedField.name,
+        type: (unifiedField.widget || inferWidgetFromType(unifiedField.type, unifiedField.format, hasOptions)),
+        label: unifiedField.label || unifiedField.id,
+    };
+    // Copy all data and UI properties from unified field
+    var 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(function (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;
+}
+/**
+ * @private
+ */
+export function inferWidgetFromType(type, format, hasOptions) {
+    if (type === 'string') {
+        if (format === 'date')
+            return 'date';
+        if (format === 'date-time')
+            return 'dateTime';
+        if (format === 'time')
+            return 'time';
+        if (format === 'email')
+            return 'email';
+        if (format === 'url')
+            return 'url';
+        // If options are present, default to dropdown for string types
+        if (hasOptions)
+            return 'dropdown';
+        return 'textbox';
+    }
+    if (type === 'number')
+        return 'number';
+    if (type === 'boolean')
+        return 'checkbox';
+    if (type === 'array') {
+        // For array type with options, use multiselect
+        return 'multiselect';
+    }
+    if (type === 'button')
+        return 'button';
+    if (type === 'message')
+        return 'message';
+    if (type === 'sign')
+        return 'signature';
+    if (type === 'image')
+        return 'imageEditor';
+    if (type === 'file')
+        return 'fileUpload';
+    if (type === 'color')
+        return 'colorPicker';
+    if (type === 'grid')
+        return 'dataGrid';
+    if (type === 'any')
+        return 'textbox';
+    return 'textbox';
+}
+/**
+ * @private
+ */
+function levenshteinDistance(str1, str2) {
+    var len1 = str1.length;
+    var len2 = str2.length;
+    var matrix = [];
+    // Initialize matrix
+    for (var i = 0; i <= len1; i++) {
+        matrix[i] = [i];
+    }
+    for (var j = 0; j <= len2; j++) {
+        matrix[0][j] = j;
+    }
+    // Fill matrix
+    for (var i = 1; i <= len1; i++) {
+        for (var j = 1; j <= len2; j++) {
+            var cost = str1[i - 1] === str2[j - 1] ? 0 : 1;
+            matrix[i][j] = Math.min(matrix[i - 1][j] + 1, // deletion
+            matrix[i][j - 1] + 1, // insertion
+            matrix[i - 1][j - 1] + cost // substitution
+            );
+        }
+    }
+    return matrix[len1][len2];
+}
+/**
+ * @private
+ */
+function calculateSimilarity(str1, str2) {
+    var distance = levenshteinDistance(str1.toLowerCase(), str2.toLowerCase());
+    var maxLen = Math.max(str1.length, str2.length);
+    if (maxLen === 0)
+        return 100;
+    return Math.round(((maxLen - distance) / maxLen) * 100);
+}
+/**
+ * @private
+ */
+export function matchFieldWithIDPreservation(newDataField, existingUISchema) {
+    // 1. Try exact ID match first
+    if (existingUISchema.properties[newDataField.id]) {
+        return {
+            existingId: newDataField.id,
+            newDataId: newDataField.id,
+            confidence: 'exact',
+            method: 'id',
+            similarity: 100
+        };
+    }
+    // 2. Try fuzzy match by ID (check if existing ID starts with new ID or vice versa)
+    var bestIdMatch = null;
+    var idMatchKeys = Object.keys(existingUISchema.properties);
+    for (var _i = 0, idMatchKeys_1 = idMatchKeys; _i < idMatchKeys_1.length; _i++) {
+        var existingId = idMatchKeys_1[_i];
+        var existingUIField = existingUISchema.properties[existingId];
+        // Skip if this is a layout container
+        if (existingUIField.widget === 'table' || existingUIField.widget === 'panel' || existingUIField.widget === 'tabs') {
+            continue;
+        }
+        // Check if one ID is a prefix of the other (common case: radio_123 vs radio_123_456)
+        var newId = newDataField.id || '';
+        var isPrefix = existingId.indexOf(newId + '_') === 0 || newId.indexOf(existingId + '_') === 0;
+        if (isPrefix) {
+            var similarity = Math.round((Math.min(newId.length, existingId.length) / Math.max(newId.length, existingId.length)) * 100);
+            if (!bestIdMatch || (bestIdMatch.similarity && similarity > bestIdMatch.similarity)) {
+                bestIdMatch = {
+                    existingId: existingId,
+                    newDataId: newDataField.id,
+                    confidence: similarity >= 90 ? 'high' : similarity >= 70 ? 'medium' : 'low',
+                    method: 'id',
+                    similarity: similarity
+                };
+            }
+        }
+        else {
+            // Try Levenshtein distance for ID similarity
+            var idSimilarity = calculateSimilarity(existingId, newId);
+            // Only consider as potential match if very similar (≥85%)
+            if (idSimilarity >= 85) {
+                if (!bestIdMatch || (bestIdMatch.similarity && idSimilarity > bestIdMatch.similarity)) {
+                    bestIdMatch = {
+                        existingId: existingId,
+                        newDataId: newDataField.id,
+                        confidence: idSimilarity >= 90 ? 'high' : 'medium',
+                        method: 'id',
+                        similarity: idSimilarity
+                    };
+                }
+            }
+        }
+    }
+    // If we found a good ID match, use it
+    if (bestIdMatch && bestIdMatch.similarity && bestIdMatch.similarity >= 70) {
+        //console.log(`ID fuzzy match: "${newDataField.id}" → "${bestIdMatch.existingId}" (${bestIdMatch.similarity}% similar)`);
+        return bestIdMatch;
+    }
+    // 3. Try fuzzy match by label
+    var bestLabelMatch = null;
+    var labelMatchKeys = Object.keys(existingUISchema.properties);
+    for (var _a = 0, labelMatchKeys_1 = labelMatchKeys; _a < labelMatchKeys_1.length; _a++) {
+        var existingId = labelMatchKeys_1[_a];
+        var existingUIField = existingUISchema.properties[existingId];
+        // Skip if this is a layout container
+        if (existingUIField.widget === 'table' || existingUIField.widget === 'panel' || existingUIField.widget === 'tabs') {
+            continue;
+        }
+        // Get label from UI field or try to extract from ID
+        var existingLabel = existingUIField.label || existingId;
+        var newLabel = newDataField.label || newDataField.id;
+        if (!existingLabel || !newLabel)
+            continue;
+        var similarity = calculateSimilarity(existingLabel, newLabel);
+        // Update best match if this is better
+        if (!bestLabelMatch || (bestLabelMatch.similarity && similarity > bestLabelMatch.similarity)) {
+            bestLabelMatch = {
+                existingId: existingId,
+                newDataId: newDataField.id,
+                confidence: similarity >= 90 ? 'high' : similarity >= 70 ? 'medium' : 'low',
+                method: similarity === 100 ? 'label-exact' : 'label-fuzzy',
+                similarity: similarity
+            };
+        }
+    }
+    // 4. Return best label match if similarity is good enough (≥70%)
+    if (bestLabelMatch && bestLabelMatch.similarity && bestLabelMatch.similarity >= 70) {
+        //console.log(`Label fuzzy match: "${newDataField.label}" → "${bestLabelMatch.existingId}" (${bestLabelMatch.similarity}% similar)`);
+        return bestLabelMatch;
+    }
+    // 5. No match found - use new ID
+    return {
+        existingId: newDataField.id,
+        newDataId: newDataField.id,
+        confidence: 'exact',
+        method: 'new',
+        similarity: 100
+    };
+}
+/**
+ * @private
+ */
+export function mergeWithIDRemapping(newDataSchema, existingUISchema) {
+    var idMap = new Map(); // newId → canonicalId
+    var matchResults = [];
+    // Build ID mapping table
+    var newDataPropKeys = Object.keys(newDataSchema.properties);
+    for (var _i = 0, newDataPropKeys_1 = newDataPropKeys; _i < newDataPropKeys_1.length; _i++) {
+        var newId = newDataPropKeys_1[_i];
+        var dataField = newDataSchema.properties[newId];
+        var match = matchFieldWithIDPreservation(dataField, existingUISchema);
+        matchResults.push(match);
+        idMap.set(newId, match.existingId || generateId(labelToFieldKey(dataField.label || '')));
+        // Log remapping if IDs differ
+        if (match.newDataId !== match.existingId) {
+            //console.log(`ID remapped: ${match.newDataId} → ${match.existingId} (${match.method}, ${match.similarity}% similar)`);
+        }
+    }
+    // Remap all data field IDs to canonical IDs
+    var remappedDataFields = {};
+    var newDataPropKeys2 = Object.keys(newDataSchema.properties);
+    for (var _a = 0, newDataPropKeys2_1 = newDataPropKeys2; _a < newDataPropKeys2_1.length; _a++) {
+        var newId = newDataPropKeys2_1[_a];
+        var dataField = newDataSchema.properties[newId];
+        var canonicalId = idMap.get(newId) || newId;
+        remappedDataFields[canonicalId] = __assign({}, dataField, { id: canonicalId // Use canonical ID
+         });
+    }
+    // Get existing field IDs from the layout
+    var existingFieldIds = extractFieldIdsFromLayout(existingUISchema.layout);
+    var newFieldIds = Object.keys(remappedDataFields).filter(function (id) { return !existingFieldIds.has(id); });
+    //console.log(`📋 Existing fields in layout: ${existingFieldIds.size}, New fields: ${newFieldIds.length}`);
+    // ✅ CHECK IF SUBMIT BUTTON EXISTS: Prevent duplicate submit buttons
+    var existingUIValues = Object.keys(existingUISchema.properties).map(function (k) { return existingUISchema.properties[k]; });
+    var hasExistingSubmitButton = existingUIValues.some(function (uiField) { return uiField.widget === 'button'; });
+    // Filter out new submit buttons if one already exists
+    var filteredNewFieldIds = newFieldIds.filter(function (id) {
+        var dataField = remappedDataFields[id];
+        if ((dataField.type === 'button' && dataField.buttonType === 'submit') && hasExistingSubmitButton) {
+            //console.log(`⚠️ Skipping new button "${dataField.label}" - submit button already exists in layout`);
+            return false;
+        }
+        return true;
+    });
+    //console.log(`📋 New fields after filtering: ${filteredNewFieldIds.length}`);
+    // Update layout references to use canonical IDs
+    var remappedLayout = remapLayoutIds(existingUISchema.layout, idMap);
+    // Create UI properties for new fields that don't have them yet
+    // ✅ Ensure all existing UI properties have _configured flag (add if missing from imported JSON)
+    var enhancedUIProperties = {};
+    var existingUIKeys = Object.keys(existingUISchema.properties);
+    for (var _b = 0, existingUIKeys_1 = existingUIKeys; _b < existingUIKeys_1.length; _b++) {
+        var key = existingUIKeys_1[_b];
+        var uiField = existingUISchema.properties[key];
+        enhancedUIProperties[key] = __assign({}, uiField, { _configured: uiField._configured !== undefined ? uiField._configured : true });
+    }
+    if (filteredNewFieldIds.length > 0) {
+        //console.log(`➕ Adding ${filteredNewFieldIds.length} new fields to layout`);
+        // Check if submit button exists and is at the last position (not moved by user)
+        var lastNode = remappedLayout[remappedLayout.length - 1];
+        var isSubmitAtEnd = lastNode && lastNode.type === 'field' &&
+            enhancedUIProperties[lastNode.propertyId] && enhancedUIProperties[lastNode.propertyId].widget === 'button';
+        var newFieldNodes_1 = [];
+        // Generate default UI properties for new fields
+        filteredNewFieldIds.forEach(function (id) {
+            var dataField = remappedDataFields[id];
+            var hasOptions = dataField.options !== undefined && dataField.options.length > 0;
+            var widget = inferWidgetFromType(dataField.type, dataField.format, hasOptions);
+            // ✅ Add default button styling
+            var uiProperties = {
+                widget: widget,
+                label: dataField.label,
+                _configured: true
+            };
+            // Add primary styling for buttons
+            if (widget === 'button') {
+                uiProperties.isPrimary = true;
+                uiProperties.name = 'defaultFormSubmit';
+                uiProperties.cssClass = 'e-primary';
+            }
+            enhancedUIProperties[id] = uiProperties;
+            newFieldNodes_1.push({
+                type: 'field',
+                propertyId: id
+            });
+        });
+        // Apply same logic as App.tsx: insert before submit if it's at the end
+        if (isSubmitAtEnd) {
+            // Insert new fields BEFORE the submit button
+            remappedLayout = remappedLayout.slice(0, -1).concat(newFieldNodes_1, [remappedLayout[remappedLayout.length - 1]]);
+            //console.log(`📐 Layout rebuilt: new fields inserted before submit button at end`);
+        }
+        else {
+            // Submit moved or doesn't exist - add new fields at end
+            remappedLayout = remappedLayout.concat(newFieldNodes_1);
+            //console.log(`📐 Layout rebuilt: new fields added at end`);
+        }
+    }
+    // Merge to FormSchema using unified schema
+    var unifiedProperties = {};
+    Object.keys(remappedDataFields).forEach(function (fieldKey) {
+        var dataField = remappedDataFields[fieldKey];
+        var uiField = enhancedUIProperties[fieldKey];
+        unifiedProperties[fieldKey] = __assign({}, dataField, uiField, { widget: (uiField && uiField.widget) || inferWidgetFromType(dataField.type, dataField.format, dataField.options !== undefined) });
+    });
+    var mergedSchema = mergeSchema(__assign({ version: newDataSchema.version, properties: unifiedProperties, layout: remappedLayout }, (newDataSchema.settings ? { settings: newDataSchema.settings } : {})));
+    return mergedSchema;
+}
+/**
+ * @private
+ */
+function remapLayoutIds(layout, idMap) {
+    return layout.map(function (node) {
+        if (node.type === 'field') {
+            var fieldNode = node;
+            var canonicalId = idMap.get(fieldNode.propertyId) || fieldNode.propertyId;
+            return __assign({}, fieldNode, { propertyId: canonicalId });
+        }
+        else if (node.type === 'table') {
+            var tableNode = node;
+            return __assign({}, tableNode, { cells: tableNode.cells.map(function (row) {
+                    return row.map(function (cell) { return (__assign({}, cell, { children: remapLayoutIds(cell.children, idMap) })); });
+                }) });
+        }
+        else if (node.type === 'panel') {
+            var panelNode = node;
+            return __assign({}, panelNode, { children: remapLayoutIds(panelNode.children, idMap) });
+        }
+        else if (node.type === 'tabs') {
+            var tabsNode = node;
+            return __assign({}, tabsNode, { tabs: tabsNode.tabs.map(function (tab) { return (__assign({}, tab, { children: remapLayoutIds(tab.children, idMap) })); }) });
+        }
+        else if (node.type === 'card') {
+            var cardNode = node;
+            return __assign({}, cardNode, { children: remapLayoutIds(cardNode.children, idMap) });
+        }
+        return node;
+    });
+}
+/**
+ * @private
+ */
+export function extractFieldIdsFromLayout(layout) {
+    var fieldIds = new Set();
+    var stack = layout.slice();
+    while (stack.length > 0) {
+        var node = stack.shift();
+        if (node.type === 'field') {
+            fieldIds.add(node.propertyId);
+        }
+        else if (node.type === 'table') {
+            node.cells.forEach(function (row) {
+                return row.forEach(function (cell) { return stack.push.apply(stack, cell.children); });
+            });
+        }
+        else if (node.type === 'panel') {
+            stack.push.apply(stack, node.children);
+        }
+        else if (node.type === 'tabs') {
+            node.tabs.forEach(function (tab) { return stack.push.apply(stack, tab.children); });
+        }
+        else if (node.type === 'card') {
+            stack.push.apply(stack, node.children);
+        }
+    }
+    return fieldIds;
+}
+/**
+ * @private
+ */
+export function convertComponentsToDataSchema(components) {
+    var properties = {};
+    var seenComponentIds = new Set(); // Track component IDs to prevent duplicates
+    // Flatten all components (including nested ones)
+    var stack = components.slice();
+    while (stack.length > 0) {
+        var comp = stack.shift();
+        // Infer semantic type from component
+        var semanticType = UI_TYPE_TO_SEMANTIC_TYPE[comp.type];
+        // Skip presentation-only widgets (button, message, etc.) - they have null semantic type
+        if (semanticType === null) {
+            // Still process nested children for layout containers
+            if (comp.children && comp.children.length) {
+                stack.unshift.apply(stack, comp.children);
+            }
+            if (comp.tabItems && comp.tabItems.length) {
+                for (var _i = 0, _a = comp.tabItems; _i < _a.length; _i++) {
+                    var tab = _a[_i];
+                    if (tab.content && tab.content.length) {
+                        stack.unshift.apply(stack, tab.content);
+                    }
+                }
+            }
+            if (comp.tableCells && comp.tableCells.length) {
+                for (var _b = 0, _c = comp.tableCells; _b < _c.length; _b++) {
+                    var row = _c[_b];
+                    for (var _d = 0, row_1 = row; _d < row_1.length; _d++) {
+                        var cell = row_1[_d];
+                        if (cell.length) {
+                            stack.unshift.apply(stack, cell);
+                        }
+                    }
+                }
+            }
+            continue; // Skip adding to data schema
+        }
+        // ✅ DEDUPLICATION: Skip if we've already processed this component ID
+        if (seenComponentIds.has(comp.id)) {
+            //console.log(`⚠️ Skipping duplicate component: ${comp.id} (${comp.label})`);
+            // Still process nested children
+            if (comp.children && comp.children.length) {
+                stack.unshift.apply(stack, comp.children);
+            }
+            if (comp.tabItems && comp.tabItems.length) {
+                for (var _e = 0, _f = comp.tabItems; _e < _f.length; _e++) {
+                    var tab = _f[_e];
+                    if (tab.content && tab.content.length) {
+                        stack.unshift.apply(stack, tab.content);
+                    }
+                }
+            }
+            if (comp.tableCells && comp.tableCells.length) {
+                for (var _g = 0, _h = comp.tableCells; _g < _h.length; _g++) {
+                    var row = _h[_g];
+                    for (var _j = 0, row_2 = row; _j < row_2.length; _j++) {
+                        var cell = row_2[_j];
+                        if (cell.length) {
+                            stack.unshift.apply(stack, cell);
+                        }
+                    }
+                }
+            }
+            continue;
+        }
+        seenComponentIds.add(comp.id);
+        // Generate fieldKey from label or ID
+        var baseFieldKey = labelToFieldKey(comp.label || comp.id, comp.id);
+        var fieldKey = makeUniqueFieldKey(baseFieldKey, new Set(Object.keys(properties)), comp.id);
+        var dataField = extractDataField(comp, semanticType || { type: 'any' });
+        properties[fieldKey] = dataField;
+        // Process nested children
+        if (comp.children && comp.children.length) {
+            stack.unshift.apply(stack, comp.children);
+        }
+        // Process tab items
+        if (comp.tabItems && comp.tabItems.length) {
+            for (var _k = 0, _l = comp.tabItems; _k < _l.length; _k++) {
+                var tab = _l[_k];
+                if (tab.content && tab.content.length) {
+                    stack.unshift.apply(stack, tab.content);
+                }
+            }
+        }
+        // Process table cells
+        if (comp.tableCells && comp.tableCells.length) {
+            for (var _m = 0, _o = comp.tableCells; _m < _o.length; _m++) {
+                var row = _o[_m];
+                for (var _p = 0, row_3 = row; _p < row_3.length; _p++) {
+                    var cell = row_3[_p];
+                    // cell is FormNode[], not an object with .components
+                    if (cell.length) {
+                        stack.unshift.apply(stack, cell);
+                    }
+                }
+            }
+        }
+    }
+    return {
+        version: '1.0',
+        properties: properties
+    };
+}