@syncfusion/ej2-react-form-renderer 0.1.1-beta → 34.2.2

package/src/json-converter.js

@@ -1,1329 +0,0 @@
-// ============================================================================
-// TYPE DEFINITIONS (from spec)
-// ============================================================================
-export const generateId = (type) => {
-    const timestamp = Date.now();
-    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
-// ============================================================================
-/**
- * Convert label to camelCase identifier
- * Examples:
- *   "First Name" → "firstName"
- *   "Email Address" → "emailAddress"
- *   "Date of Birth" → "dateOfBirth"
- *   "Phone Number (Mobile)" → "phoneNumberMobile"
- */
-export function labelToFieldKey(label, fallbackId) {
-    if (!label || label.trim() === '') {
-        return fallbackId || 'field';
-    }
-    // Remove special characters, keep letters, numbers, and spaces
-    const cleaned = label
-        .replace(/[^\w\s]/g, '') // Remove special chars
-        .trim();
-    if (cleaned === '') {
-        return fallbackId || 'field';
-    }
-    // Split by spaces/underscores and convert to camelCase
-    const words = cleaned.split(/[\s_]+/);
-    if (words.length === 0) {
-        return fallbackId || 'field';
-    }
-    // First word lowercase, rest title case
-    const camelCase = words
-        .map((word, index) => {
-        if (index === 0) {
-            return word.toLowerCase();
-        }
-        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
-    })
-        .join('');
-    return camelCase || fallbackId || 'field';
-}
-/**
- * Ensure field key is unique by appending a number if needed
- */
-export function makeUniqueFieldKey(baseKey, existingKeys, originalId) {
-    if (!existingKeys.has(baseKey)) {
-        return baseKey;
-    }
-    // Try with original ID suffix first
-    if (originalId) {
-        const withId = `${baseKey}_${originalId.split('_').pop()}`;
-        if (!existingKeys.has(withId)) {
-            return withId;
-        }
-    }
-    // Fall back to numeric suffix
-    let counter = 2;
-    while (existingKeys.has(`${baseKey}${counter}`)) {
-        counter++;
-    }
-    return `${baseKey}${counter}`;
-}
-// ============================================================================
-// UI TYPE TO SEMANTIC TYPE MAPPING
-// ============================================================================
-const 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
-};
-/**
- * Remove internal-only UI properties before emitting UI schema
- */
-function stripConfiguredFlag(properties) {
-    const out = {};
-    Object.entries(properties || {}).forEach(([key, val]) => {
-        const copy = { ...val };
-        if (copy && copy._configured !== undefined) {
-            delete copy._configured;
-        }
-        out[key] = copy;
-    });
-    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) {
-    const dataFields = {};
-    const uiFields = {};
-    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,
-        layoutParent: layout
-    }));
-    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;
-                }
-            }
-            // 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
-        if (component.type === 'table') {
-            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,
-                ...(component.conditions ? { conditions: component.conditions } : {})
-            };
-            // Process table cells
-            component.tableCells?.forEach((row, rowIndex) => {
-                const cellRow = [];
-                row.forEach((cellComponents, colIndex) => {
-                    const cellChildren = [];
-                    // Reverse children and use unshift() to maintain order with depth-first processing
-                    [...cellComponents].reverse().forEach((comp) => {
-                        stack.unshift({ component: comp, layoutParent: cellChildren });
-                    });
-                    cellRow.push({ row: rowIndex, col: colIndex, children: cellChildren });
-                });
-                tableNode.cells.push(cellRow);
-            });
-            layoutParent.push(tableNode);
-            continue;
-        }
-        if (component.type === 'panel') {
-            const panelNode = {
-                type: 'panel',
-                id: component.id,
-                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 || [])].reverse().forEach((child) => {
-                stack.unshift({ component: child, layoutParent: panelNode.children });
-            });
-            layoutParent.push(panelNode);
-            continue;
-        }
-        if (component.type === 'tabs') {
-            const tabsNode = {
-                type: 'tabs',
-                name: component.name,
-                id: component.id,
-                label: component.label,
-                cssClass: component.cssClass,
-                tabOptions: component.tabOptions,
-                tabs: [],
-                ...(component.conditions ? { conditions: component.conditions } : {})
-            };
-            // Process tabs
-            component.tabItems?.forEach((tab) => {
-                const tabChildren = [];
-                // Reverse children and use unshift() to maintain order with depth-first processing
-                [...(tab.content || [])].reverse().forEach((comp) => {
-                    stack.unshift({ component: comp, layoutParent: tabChildren });
-                });
-                tabsNode.tabs.push({ header: tab.header, children: tabChildren });
-            });
-            layoutParent.push(tabsNode);
-            continue;
-        }
-        if (component.type === 'card') {
-            const cardNode = {
-                type: 'card',
-                id: component.id,
-                name: component.name,
-                label: component.label,
-                cssClass: component.cssClass,
-                hideLabel: component.hideLabel,
-                cardTitle: component.cardTitle,
-                cardSubtitle: component.cardSubtitle,
-                enableAction: component.enableAction,
-                actionButtonLabel: component.actionButtonLabel,
-                actionButtonType: component.actionButtonType,
-                children: [],
-                ...(component.conditions ? { conditions: component.conditions } : {})
-            };
-            // Process card children
-            // Reverse children and use unshift() to maintain order with depth-first processing
-            [...(component.children || [])].reverse().forEach((child) => {
-                stack.unshift({ component: child, layoutParent: cardNode.children });
-            });
-            layoutParent.push(cardNode);
-            continue;
-        }
-        // ✅ DEDUPLICATION: Skip if we've already processed this component ID
-        if (seenComponentIds.has(component.id)) {
-            //console.log(`⚠️ [splitSchema] Skipping duplicate component: ${component.id} (${component.label})`);
-            continue;
-        }
-        seenComponentIds.add(component.id);
-        // Generate semantic field key from label
-        const baseFieldKey = labelToFieldKey(component.label || component.id, component.id);
-        const 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
-        const 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 });
-    }
-    return {
-        dataSchema: {
-            version: heartSchema.version,
-            properties: dataFields
-        },
-        uiSchema: {
-            properties: stripConfiguredFlag(uiFields),
-            layout
-        }
-    };
-}
-function extractDataField(component, semanticType) {
-    const dataField = {
-        id: component.id,
-        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.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) {
-        const regex = component.regex;
-        dataField.pattern = regex instanceof RegExp ? regex.source : regex;
-    }
-    if (component.pattern !== undefined) {
-        const pattern = component.pattern;
-        dataField.pattern = pattern instanceof RegExp ? pattern.source : pattern;
-    }
-    return dataField;
-}
-function extractUIField(component) {
-    const uiField = {
-        widget: component.type,
-    };
-    // Copy all properties EXCEPT those in data schema allowed list
-    const dataSchemaProps = new Set([
-        'id', 'type', 'label', 'format', 'defaultValue', 'required', 'options', 'name',
-        'minLength', 'maxLength', 'minimum', 'maximum', 'minValue', 'maxValue',
-        'minDate', 'maxDate', 'minTime', 'maxTime', 'regex', 'pattern', 'content', 'buttonType', 'textboxType'
-    ]);
-    Object.keys(component).forEach(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)) {
-        const requiredColumnProps = [
-            'field',
-            'headerText',
-            'type',
-            'width',
-            'format',
-            'editType',
-            'validationRules'
-        ];
-        uiField.columns = uiField.columns.map((col) => {
-            const filteredCol = {};
-            requiredColumnProps.forEach(prop => {
-                if (col[prop] !== undefined) {
-                    filteredCol[prop] = col[prop];
-                }
-            });
-            return filteredCol;
-        });
-    }
-    return uiField;
-}
-// ============================================================================
-// MERGE ALGORITHM
-// ============================================================================
-/**
- * Merge split schemas back into heart schema
- * Supports both simple merge and fuzzy matching for re-import scenarios
- */
-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
-        };
-    });
-    // 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
-    const processLayoutNodes = (layoutNodes) => {
-        const components = [];
-        for (const node of layoutNodes) {
-            if (node.type === 'field') {
-                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 = {
-                        id: fieldNode.propertyId,
-                        name: generateName(uiField?.widget || ''),
-                        type: 'any',
-                        label: uiField?.widget || 'Unknown Field'
-                    };
-                    components.push(mergeField(fallbackDataField, uiField));
-                }
-                else {
-                    components.push(mergeField(dataField, uiField));
-                }
-            }
-            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,
-                    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((row) => {
-                    const cellRow = [];
-                    row.forEach((cell) => {
-                        // Recursively process children in each cell
-                        const cellComponents = processLayoutNodes(cell.children);
-                        cellRow.push(cellComponents);
-                    });
-                    tableComponent.tableCells.push(cellRow);
-                });
-                components.push(tableComponent);
-            }
-            else if (node.type === 'panel') {
-                const panelNode = node;
-                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,
-                    ...(panelNode.conditions ? { conditions: panelNode.conditions } : {})
-                };
-                components.push(panelComponent);
-            }
-            else if (node.type === 'tabs') {
-                const tabsNode = node;
-                const tabsComponent = {
-                    id: tabsNode.id,
-                    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((tab) => {
-                    tabsComponent.tabItems.push({
-                        header: tab.header,
-                        content: processLayoutNodes(tab.children) // Recursively process tab content
-                    });
-                });
-                components.push(tabsComponent);
-            }
-            else if (node.type === 'card') {
-                const cardNode = node;
-                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,
-                    ...(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;
-                if (cardNode.enableAction !== undefined)
-                    cardComponent.enableAction = cardNode.enableAction;
-                if (cardNode.actionButtonLabel !== undefined)
-                    cardComponent.actionButtonLabel = cardNode.actionButtonLabel;
-                if (cardNode.actionButtonType !== undefined)
-                    cardComponent.actionButtonType = cardNode.actionButtonType;
-                components.push(cardComponent);
-            }
-        }
-        return components;
-    };
-    // 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);
-        });
-    }
-    else {
-        components = processLayoutNodes(uiSchema.layout);
-    }
-    return {
-        version: split.dataSchema.version,
-        components
-    };
-}
-/**
- * Merge a single field from data and UI schemas
- */
-function mergeField(dataField, uiField) {
-    // Check if options are present in the data field
-    const hasOptions = dataField.options !== undefined && dataField.options.length > 0;
-    const component = {
-        id: dataField.id,
-        name: dataField.name,
-        type: (uiField?.widget || inferWidgetFromType(dataField.type, dataField.format, hasOptions)),
-        label: dataField.label || dataField.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];
-            }
-        });
-    }
-    return component;
-}
-/**
- * Infer widget type from semantic data type
- */
-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';
-}
-/**
- * Calculate Levenshtein distance for fuzzy string matching
- */
-function levenshteinDistance(str1, str2) {
-    const len1 = str1.length;
-    const len2 = str2.length;
-    const matrix = [];
-    // Initialize matrix
-    for (let i = 0; i <= len1; i++) {
-        matrix[i] = [i];
-    }
-    for (let j = 0; j <= len2; j++) {
-        matrix[0][j] = j;
-    }
-    // Fill matrix
-    for (let i = 1; i <= len1; i++) {
-        for (let j = 1; j <= len2; j++) {
-            const 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];
-}
-/**
- * Calculate similarity percentage between two strings
- */
-function calculateSimilarity(str1, str2) {
-    const distance = levenshteinDistance(str1.toLowerCase(), str2.toLowerCase());
-    const maxLen = Math.max(str1.length, str2.length);
-    if (maxLen === 0)
-        return 100;
-    return Math.round(((maxLen - distance) / maxLen) * 100);
-}
-/**
- * Match a new data field with existing UI schema field
- * Preserves existing ID for stability
- */
-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)
-    let bestIdMatch = null;
-    for (const [existingId, existingUIField] of Object.entries(existingUISchema.properties)) {
-        // Skip if this is a layout container
-        if (['table', 'panel', 'tabs'].includes(existingUIField.widget)) {
-            continue;
-        }
-        // Check if one ID is a prefix of the other (common case: radio_123 vs radio_123_456)
-        const newId = newDataField.id || '';
-        const isPrefix = existingId.startsWith(newId + '_') || newId.startsWith(existingId + '_');
-        if (isPrefix) {
-            const 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, // PRESERVE EXISTING ID
-                    newDataId: newDataField.id,
-                    confidence: similarity >= 90 ? 'high' : similarity >= 70 ? 'medium' : 'low',
-                    method: 'id',
-                    similarity
-                };
-            }
-        }
-        else {
-            // Try Levenshtein distance for ID similarity
-            const 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
-    let bestLabelMatch = null;
-    for (const [existingId, existingUIField] of Object.entries(existingUISchema.properties)) {
-        // Skip if this is a layout container
-        if (['table', 'panel', 'tabs'].includes(existingUIField.widget)) {
-            continue;
-        }
-        // Get label from UI field or try to extract from ID
-        const existingLabel = existingUIField.label || existingId;
-        const newLabel = newDataField.label || newDataField.id;
-        if (!existingLabel || !newLabel)
-            continue;
-        const similarity = calculateSimilarity(existingLabel, newLabel);
-        // Update best match if this is better
-        if (!bestLabelMatch || (bestLabelMatch.similarity && similarity > bestLabelMatch.similarity)) {
-            bestLabelMatch = {
-                existingId: existingId, // PRESERVE EXISTING ID
-                newDataId: newDataField.id,
-                confidence: similarity >= 90 ? 'high' : similarity >= 70 ? 'medium' : 'low',
-                method: similarity === 100 ? 'label-exact' : 'label-fuzzy',
-                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
-    };
-}
-/**
- * Merge with ID remapping for re-import scenarios
- * Preserves existing IDs to maintain layout stability
- */
-export function mergeWithIDRemapping(newDataSchema, existingUISchema) {
-    const idMap = new Map(); // newId → canonicalId
-    const matchResults = [];
-    // Build ID mapping table
-    Object.entries(newDataSchema.properties).forEach(([newId, dataField]) => {
-        const 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
-    const remappedDataFields = {};
-    Object.entries(newDataSchema.properties).forEach(([newId, dataField]) => {
-        const canonicalId = idMap.get(newId) || newId;
-        remappedDataFields[canonicalId] = {
-            ...dataField,
-            id: canonicalId // Use canonical ID
-        };
-    });
-    // Get existing field IDs from the layout
-    const existingFieldIds = extractFieldIdsFromLayout(existingUISchema.layout);
-    const newFieldIds = Object.keys(remappedDataFields).filter(id => !existingFieldIds.has(id));
-    //console.log(`📋 Existing fields in layout: ${existingFieldIds.size}, New fields: ${newFieldIds.length}`);
-    // ✅ CHECK IF SUBMIT BUTTON EXISTS: Prevent duplicate submit buttons
-    const hasExistingSubmitButton = Object.values(existingUISchema.properties).some((uiField) => uiField.widget === 'button');
-    // Filter out new submit buttons if one already exists
-    const filteredNewFieldIds = newFieldIds.filter(id => {
-        const 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
-    let 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)
-    const enhancedUIProperties = {};
-    Object.entries(existingUISchema.properties).forEach(([key, uiField]) => {
-        enhancedUIProperties[key] = {
-            ...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)
-        const lastNode = remappedLayout[remappedLayout.length - 1];
-        const isSubmitAtEnd = lastNode?.type === 'field' &&
-            enhancedUIProperties[lastNode.propertyId]?.widget === 'button';
-        const newFieldNodes = [];
-        // Generate default UI properties for new fields
-        filteredNewFieldIds.forEach(id => {
-            const dataField = remappedDataFields[id];
-            const hasOptions = dataField.options !== undefined && dataField.options.length > 0;
-            const widget = inferWidgetFromType(dataField.type, dataField.format, hasOptions);
-            // ✅ Add default button styling
-            const uiProperties = {
-                widget,
-                label: dataField.label,
-                _configured: true
-            };
-            // Add primary styling for buttons
-            if (widget === 'button') {
-                uiProperties.isPrimary = true;
-                uiProperties.cssClass = 'e-primary';
-            }
-            enhancedUIProperties[id] = uiProperties;
-            newFieldNodes.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), ...newFieldNodes, 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, ...newFieldNodes];
-            //console.log(`📐 Layout rebuilt: new fields added at end`);
-        }
-    }
-    // Merge with remapped data
-    const mergedSchema = mergeSchema({
-        dataSchema: {
-            version: newDataSchema.version,
-            properties: remappedDataFields
-        },
-        uiSchema: {
-            properties: enhancedUIProperties,
-            layout: remappedLayout
-        }
-    });
-    // 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;
-}
-/**
- * Recursively remap IDs in layout tree
- */
-function remapLayoutIds(layout, idMap) {
-    return layout.map(node => {
-        if (node.type === 'field') {
-            const fieldNode = node;
-            const canonicalId = idMap.get(fieldNode.propertyId) || fieldNode.propertyId;
-            return {
-                ...fieldNode,
-                propertyId: canonicalId
-            };
-        }
-        else if (node.type === 'table') {
-            const tableNode = node;
-            return {
-                ...tableNode,
-                cells: tableNode.cells.map(row => row.map(cell => ({
-                    ...cell,
-                    children: remapLayoutIds(cell.children, idMap)
-                })))
-            };
-        }
-        else if (node.type === 'panel') {
-            const panelNode = node;
-            return {
-                ...panelNode,
-                children: remapLayoutIds(panelNode.children, idMap)
-            };
-        }
-        else if (node.type === 'tabs') {
-            const tabsNode = node;
-            return {
-                ...tabsNode,
-                tabs: tabsNode.tabs.map(tab => ({
-                    ...tab,
-                    children: remapLayoutIds(tab.children, idMap)
-                }))
-            };
-        }
-        else if (node.type === 'card') {
-            const cardNode = node;
-            return {
-                ...cardNode,
-                children: remapLayoutIds(cardNode.children, idMap)
-            };
-        }
-        return node;
-    });
-}
-// ============================================================================
-// UTILITY FUNCTIONS
-// ============================================================================
-/**
- * Extract all field IDs from layout tree
- */
-export function extractFieldIdsFromLayout(layout) {
-    const fieldIds = new Set();
-    const stack = [...layout];
-    while (stack.length > 0) {
-        const node = stack.shift();
-        if (node.type === 'field') {
-            fieldIds.add(node.propertyId);
-        }
-        else if (node.type === 'table') {
-            node.cells.forEach(row => row.forEach(cell => stack.push(...cell.children)));
-        }
-        else if (node.type === 'panel') {
-            stack.push(...node.children);
-        }
-        else if (node.type === 'tabs') {
-            node.tabs.forEach(tab => stack.push(...tab.children));
-        }
-        else if (node.type === 'card') {
-            stack.push(...node.children);
-        }
-    }
-    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
-// ============================================================================
-/**
- * Convert parser output (FormComponent[]) to DataSchema format
- * This allows parser results to be merged with existing UI schemas
- */
-export function convertComponentsToDataSchema(components) {
-    const properties = {};
-    const seenComponentIds = new Set(); // Track component IDs to prevent duplicates
-    // Flatten all components (including nested ones)
-    const stack = [...components];
-    while (stack.length > 0) {
-        const comp = stack.shift();
-        // Infer semantic type from component
-        const 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?.length) {
-                stack.unshift(...comp.children);
-            }
-            if (comp.tabItems?.length) {
-                for (const tab of comp.tabItems) {
-                    if (tab.content?.length) {
-                        stack.unshift(...tab.content);
-                    }
-                }
-            }
-            if (comp.tableCells?.length) {
-                for (const row of comp.tableCells) {
-                    for (const cell of row) {
-                        if (cell.length) {
-                            stack.unshift(...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?.length) {
-                stack.unshift(...comp.children);
-            }
-            if (comp.tabItems?.length) {
-                for (const tab of comp.tabItems) {
-                    if (tab.content?.length) {
-                        stack.unshift(...tab.content);
-                    }
-                }
-            }
-            if (comp.tableCells?.length) {
-                for (const row of comp.tableCells) {
-                    for (const cell of row) {
-                        if (cell.length) {
-                            stack.unshift(...cell);
-                        }
-                    }
-                }
-            }
-            continue;
-        }
-        seenComponentIds.add(comp.id);
-        // Generate fieldKey from label or ID
-        const baseFieldKey = labelToFieldKey(comp.label || comp.id, comp.id);
-        const fieldKey = makeUniqueFieldKey(baseFieldKey, new Set(Object.keys(properties)), comp.id);
-        const dataField = extractDataField(comp, semanticType || { type: 'any' });
-        properties[fieldKey] = dataField;
-        // Process nested children
-        if (comp.children?.length) {
-            stack.unshift(...comp.children);
-        }
-        // Process tab items
-        if (comp.tabItems?.length) {
-            for (const tab of comp.tabItems) {
-                if (tab.content?.length) {
-                    stack.unshift(...tab.content);
-                }
-            }
-        }
-        // Process table cells
-        if (comp.tableCells?.length) {
-            for (const row of comp.tableCells) {
-                for (const cell of row) {
-                    // cell is FormComponent[], not an object with .components
-                    if (cell.length) {
-                        stack.unshift(...cell);
-                    }
-                }
-            }
-        }
-    }
-    return {
-        version: '1.0',
-        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,
-                name: comp.name,
-                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,
-                name: comp.name,
-                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,
-                name: comp.name,
-                cssClass: comp.cssClass,
-                tabs
-            };
-        }
-        if (comp.type === 'card' && comp.children) {
-            return {
-                type: 'card',
-                id: comp.id,
-                name: comp.name,
-                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',
-            name: generateName(uiField.label),
-            label: uiField.label || fieldId
-        };
-    });
-    return {
-        version: '0.1.0',
-        properties: dataProperties
-    };
-}