@syncfusion/ej2-react-form-builder 0.1.0-beta

package/src/FormBuilder.js

@@ -0,0 +1,1299 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import LeftPane from './components/layout/LeftPane';
+import MainSection, { isDefaultFormSchema } from './components/layout/MainSection';
+import formSettingsConfig from './config/form-setting.json';
+import RightPane from './components/layout/RightPane';
+import componentProperties from './config/component-properties.json';
+import { ClipboardHelper } from './utils/ClipboardHelper';
+import { useFormSchema, FormSchemaProvider, LocalizationProvider, useLocalization } from './context/contexts';
+import { useState } from 'react';
+import { DragDrop } from '@syncfusion/react-base';
+import defaultTemplates from './defaultTemplate';
+import { generateId, generateName, splitSchema } from '../Common/json-converter';
+import { importSplitSchemas } from './import/schemaImportUtils';
+import { defaultFormSchema } from './context/defaultFormSchema';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
+import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
+import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
+import { enableRtl as Rtl } from '@syncfusion/ej2-base';
+import { navigateTo } from '../Common/utils';
+/**
+ * @private
+ */
+export let formBuilderMode = 'component';
+/**
+ * @private
+ */
+export const extractTemplateComponents = (template) => {
+    try {
+        if (!template.schema) {
+            console.warn(`Template "${template.title}" missing schema`);
+            return [];
+        }
+        // Convert template schema to JSON string
+        const dataSchemaJson = JSON.stringify(template.schema);
+        // Use importSplitSchemas to parse and merge template into empty schema
+        const emptyFormSchema = { version: '0.1.0', theme: 'tailwind3', components: [] };
+        const mergedSchema = importSplitSchemas(dataSchemaJson, emptyFormSchema);
+        // Extract components and regenerate IDs to ensure uniqueness
+        const regenerateIds = (comp) => {
+            const updated = { ...comp, id: generateId(comp.type) };
+            if (comp.children) {
+                updated.children = comp.children.map(regenerateIds);
+            }
+            if (comp.tableCells) {
+                updated.tableCells = comp.tableCells.map(row => row.map(cell => cell.map(regenerateIds)));
+            }
+            if (comp.tabItems) {
+                updated.tabItems = comp.tabItems.map(tab => ({
+                    ...tab,
+                    content: tab.content?.map(regenerateIds)
+                }));
+            }
+            return updated;
+        };
+        // Filter out submit buttons from templates to prevent duplicates
+        const filterOutSubmitButtons = (comp) => {
+            // Remove submit buttons
+            if (comp.type === 'button' && comp.buttonType === 'submit') {
+                return false;
+            }
+            return true;
+        };
+        const componentsWithIds = (mergedSchema?.components || []).map(regenerateIds);
+        return componentsWithIds.filter(filterOutSubmitButtons);
+    }
+    catch (error) {
+        console.error('Error extracting template components:', template.title, error);
+        return [];
+    }
+};
+const FormBuilderComponent = ({ allowExport, enablePreview, onFieldDragStarted, onFieldDraggingOver, onFieldDropped, onPropertyChanged, enableRtl = false, apiRef, mode, domRef, locale, enablePersistence, formTemplates = defaultTemplates, paletteConfig }) => {
+    // Use FormSchema context instead of local state
+    const { formSchema, setFormSchema } = useFormSchema();
+    const { l10n } = useLocalization();
+    Rtl(enableRtl);
+    // Expose imperative API methods via ref
+    useImperativeHandle(apiRef, () => ({
+        element: domRef?.current ?? null,
+        locale,
+        allowExport,
+        enablePreview,
+        enablePersistence,
+        getFormSettings: () => {
+            // formSchema may sometimes be missing a top-level `settings` (imported/legacy shapes).
+            // Read defensively: prefer top-level `settings`, then try common alternate locations,
+            // and fall back to an empty object so defaults are applied below.
+            const fsAny = formSchema;
+            const settings = fsAny?.settings ?? fsAny?.schema?.settings ?? fsAny?.properties?.settings ?? {};
+            const unified = splitSchema(formSchema);
+            const output = {
+                name: settings?.name ?? '',
+                width: settings?.width ?? '',
+                layout: {
+                    hideLabel: settings?.hideLabel ?? false,
+                    size: settings?.size ?? '',
+                    floatLabelType: settings?.floatLabelType ?? ''
+                },
+                schema: unified
+            };
+            return output;
+        }
+    }), [formSchema, domRef, locale, allowExport, enablePreview, enablePersistence]);
+    const [pendingComponent, setPendingComponent] = useState(null);
+    const [pendingDropContext, setPendingDropContext] = useState(null);
+    // Widget switch state: holds context when user initiates a widget switch
+    const [pendingWidgetSwitch, setPendingWidgetSwitch] = useState(null);
+    // Edit mode state
+    const [editingField, setEditingField] = useState(null);
+    // Left pane collapsed state for toggle functionality
+    const [isLeftPaneCollapsed, setIsLeftPaneCollapsed] = useState(false);
+    const [isRightPaneCollapsed, setIsRightPaneCollapsed] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    const [isRightPaneHovered, setIsRightPaneHovered] = useState(false);
+    const [isLeftPaneHovered, setIsLeftPaneHovered] = useState(false);
+    const leftPaneHoverTimeoutRef = useRef(null);
+    const rightPaneHoverTimeoutRef = useRef(null);
+    const contentSectionRef = useRef(null);
+    const isReorderingRef = useRef(false);
+    const builderContainerRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(1024);
+    useEffect(() => {
+        if (pendingWidgetSwitch) {
+            handlePropertyDialogSave(pendingWidgetSwitch.originalComponent);
+        }
+        if (pendingDropContext) {
+            handlePropertyDialogSave(pendingComponent);
+        }
+    }, [pendingWidgetSwitch, pendingDropContext, pendingComponent]);
+    const handleFormSettingsSave = useCallback((values, key) => {
+        const settings = values;
+        // Apply form settings to all existing components
+        const updateComponentsWithSettings = (components) => {
+            return components.map(component => {
+                // Skip components that have explicitly set these properties
+                const updatedComponent = { ...component };
+                // Only update the specific property if key is provided, otherwise update all
+                if (key === 'floatLabelType') {
+                    if (settings.floatLabelType !== undefined) {
+                        updatedComponent.floatLabelType = settings.floatLabelType;
+                    }
+                    else {
+                        updatedComponent.floatLabelType = 'Never';
+                    }
+                }
+                if (key === 'size') {
+                    if (settings.size !== undefined) {
+                        updatedComponent.size = settings.size;
+                    }
+                    else {
+                        updatedComponent.size = 'Default';
+                    }
+                }
+                if (key === 'hideLabel') {
+                    if (settings.hideLabel !== undefined) {
+                        updatedComponent.hideLabel = settings.hideLabel;
+                    }
+                    else {
+                        updatedComponent.hideLabel = false;
+                    }
+                }
+                // Handle nested components (panels, tables, tabs)
+                if (component.children?.length) {
+                    updatedComponent.children = updateComponentsWithSettings(component.children);
+                }
+                if (component.tableCells?.length) {
+                    updatedComponent.tableCells = component.tableCells.map(row => row.map(cell => updateComponentsWithSettings(cell)));
+                }
+                if (component.tabItems?.length) {
+                    updatedComponent.tabItems = component.tabItems.map(tab => ({
+                        ...tab,
+                        content: tab.content ? updateComponentsWithSettings(tab.content) : []
+                    }));
+                }
+                return updatedComponent;
+            });
+        };
+        setFormSchema(prev => ({
+            ...prev,
+            settings: settings,
+            components: updateComponentsWithSettings(prev.components)
+        }));
+    }, [setFormSchema]);
+    const handleComponentDrop = (component, dropTargetIndex, dropPosition) => {
+        // Check if this component type has property configuration and hasn't been configured yet
+        if (componentProperties[component.type] && !component._configured) {
+            // Show property dialog
+            setPendingComponent(component);
+            setEditingField(component);
+            setPendingDropContext({
+                isNested: false,
+                targetIndex: dropTargetIndex,
+                targetPosition: dropPosition
+            });
+        }
+        setPendingComponent(component);
+        setEditingField(component);
+        // Calculate insert index
+        let insertIndex;
+        if (dropTargetIndex !== null && dropTargetIndex !== undefined && dropPosition) {
+            insertIndex = dropPosition === 'before' ? dropTargetIndex : dropTargetIndex + 1;
+        }
+        // Add at specified index or with smart positioning
+        setFormSchema(prev => {
+            const submitIndex = prev.components.findIndex(c => c.type === 'button' && c.buttonType === 'submit');
+            let newComponents;
+            if (insertIndex !== undefined) {
+                // Insert at specified index
+                newComponents = [...prev.components];
+                newComponents.splice(insertIndex, 0, component);
+            }
+            else if (submitIndex !== -1 && submitIndex === prev.components.length - 1) {
+                // If submit exists and is at the last position, insert before it
+                newComponents = [...prev.components];
+                newComponents.splice(submitIndex, 0, component);
+            }
+            else {
+                // Otherwise (submit moved or doesn't exist), add at end
+                newComponents = [...prev.components, component];
+            }
+            return { ...prev, components: newComponents };
+        });
+        if (isMobile && !isLeftPaneCollapsed) {
+            setIsLeftPaneCollapsed(true);
+            setIsRightPaneCollapsed(false);
+        }
+    };
+    /**
+   * Deep search for a component by id across panels (children), tables (tableCells) and tabs (tabItems).
+   */
+    function findComponentById(components = [], id) {
+        const stack = [...components];
+        while (stack.length) {
+            const comp = stack.pop();
+            if (comp.id === id)
+                return comp;
+            // children (e.g. panel)
+            if (comp.children?.length)
+                stack.push(...comp.children);
+            // tabs -> tabItems[].content
+            if (comp.tabItems?.length) {
+                for (const tab of comp.tabItems) {
+                    if (tab.content?.length)
+                        stack.push(...tab.content);
+                }
+            }
+            // table -> tableCells: row[] -> cell[] -> components[]
+            if (comp.tableCells?.length) {
+                for (const row of comp.tableCells) {
+                    for (const cell of row) {
+                        if (cell?.length)
+                            stack.push(...cell);
+                    }
+                }
+            }
+        }
+        return null;
+    }
+    // T009: Handle Edit action
+    const handleEdit = React.useCallback((fieldId) => {
+        const field = findComponentById(formSchema.components, fieldId);
+        if (!field)
+            return;
+        // Check if this component type has property configuration
+        if (!componentProperties[field.type]) {
+            console.warn(`No property configuration found for component type: ${field.type}`);
+            alert(`Edit functionality is not yet configured for ${field.type} components.`);
+            return;
+        }
+        setEditingField(field);
+        setPendingComponent(field);
+    }, [formSchema.components]);
+    // Handle user selecting a new widget type from the Switch Widget dropdown
+    const handleSwitchWidget = React.useCallback((fieldId, newWidgetTypePascal) => {
+        const field = findComponentById(formSchema.components, fieldId);
+        if (!field)
+            return;
+        // Verify property configuration exists for the new widget type
+        if (!componentProperties[newWidgetTypePascal]) {
+            return;
+        }
+        // Prepare a component copy with the new type and open the PropertyDialog
+        const componentWithNewType = { ...field, type: newWidgetTypePascal };
+        setPendingWidgetSwitch({ fieldId, originalComponent: field, newWidgetType: newWidgetTypePascal });
+        setPendingComponent(componentWithNewType);
+        setEditingField(null);
+    }, [formSchema.components]);
+    // Filter component to only include properties valid for its type and only those that differ from defaults (validation at root)
+    const filterComponentProperties = (component) => {
+        const componentType = component.type;
+        const configData = componentProperties[componentType];
+        if (!configData)
+            return component;
+        const validProps = new Set();
+        configData.groups?.forEach((group) => {
+            group.properties?.forEach((prop) => {
+                if (prop.key) {
+                    validProps.add(prop.key);
+                }
+            });
+        });
+        const coreProps = ['id', 'type', 'label', 'name', '_configured'];
+        if (componentType === 'autoNumber') {
+            coreProps.push('visible', 'size');
+        }
+        const structuralProps = ['children', 'tableCells', 'tabItems'];
+        // Get defaults from configData
+        const defaults = {};
+        configData.groups?.forEach((group) => {
+            group.properties?.forEach((prop) => {
+                if (prop.key && prop.default !== undefined) {
+                    defaults[prop.key] = prop.default;
+                }
+            });
+        });
+        const filtered = {};
+        Object.keys(component).forEach(key => {
+            if (coreProps.includes(key) || structuralProps.includes(key)) {
+                filtered[key] = component[key];
+                return;
+            }
+            // Only include if valid and different from default
+            if (validProps.has(key)) {
+                if (key === 'dataSource' &&
+                    Array.isArray(component[key]) &&
+                    component[key].length === 0) {
+                    return;
+                }
+                if (component[key] !== defaults[key]) {
+                    filtered[key] = component[key];
+                }
+            }
+        });
+        // Ensure structural properties exist for container components
+        if (componentType === 'panel' && !filtered.children) {
+            filtered.children = [];
+        }
+        if (componentType === 'button' && !filtered.buttonType && !(component.buttonsGroups?.length > 0)) {
+            filtered.buttonType = 'button';
+        }
+        if (componentType === 'button' && !filtered.buttonType && (component.buttonsGroups.length > 0)) {
+            const hasSubmitButton = component.buttonsGroups.some((btn) => btn.type === 'submit');
+            if (hasSubmitButton) {
+                filtered.buttonType = 'submit';
+            }
+        }
+        if (componentType === 'card' && !filtered.children) {
+            filtered.children = [];
+        }
+        if (componentType === 'table' && !filtered.tableCells) {
+            filtered.tableCells = component.tableCells || [];
+        }
+        if (componentType === 'tabs' && !filtered.tabItems) {
+            filtered.tabItems = component.tabItems || [];
+        }
+        return filtered;
+    };
+    const handlePropertyDialogSave = useCallback((properties) => {
+        if (!pendingComponent)
+            return;
+        // Map collected properties to FormComponent fields
+        const mapPropertiesToComponent = (baseComponent, props) => {
+            const updatedComponent = {
+                ...baseComponent,
+                // Display properties - use properties from dialog or keep existing
+                label: props.label !== undefined ? props.label : baseComponent.label,
+                name: props.name !== undefined ? props.name : baseComponent.name,
+                description: (props.description !== undefined || props.description !== '') ? props.description : undefined,
+                prefix: (props.prefix !== undefined || props.prefix !== '') ? props.prefix : undefined,
+                suffix: (props.suffix !== undefined || props.suffix !== '') ? props.suffix : undefined,
+                conditions: props.conditions !== undefined ? props.conditions : baseComponent.conditions,
+                customValidation: props.customValidation !== undefined ? props.customValidation : baseComponent.customValidation,
+                pageSize: props.pageSize !== undefined ? props.pageSize : baseComponent.pageSize,
+                size: formSchema.settings?.size !== undefined ? formSchema.settings.size : (props.size !== undefined ? props.size : baseComponent.size),
+                allowPaging: props.allowPaging !== undefined ? props.allowPaging : baseComponent.allowPaging,
+                allowAdding: props.allowAdding !== undefined ? props.allowAdding : baseComponent.allowAdding,
+                allowFiltering: props.allowFiltering !== undefined ? props.allowFiltering : baseComponent.allowFiltering,
+                allowEditing: props.allowEditing !== undefined ? props.allowEditing : baseComponent.allowEditing,
+                allowDeleting: props.allowDeleting !== undefined ? props.allowDeleting : baseComponent.allowDeleting,
+                dataSource: props.dataSource !== undefined ? props.dataSource : baseComponent.dataSource || [],
+                cardTitle: props.cardTitle !== undefined ? props.cardTitle : baseComponent.cardTitle,
+                cardSubtitle: props.cardSubtitle !== undefined ? props.cardSubtitle : baseComponent.cardSubtitle,
+                textboxType: props.textboxType !== undefined ? props.textboxType.toLowerCase() : baseComponent.textboxType?.toLowerCase(),
+                hideBorders: props.hideBorders !== undefined ? props.hideBorders : baseComponent.hideBorders,
+                placeholder: props.placeholder !== undefined ? props.placeholder : baseComponent.placeholder,
+                defaultValue: props.defaultValue !== undefined ? props.defaultValue : baseComponent.defaultValue,
+                expressionValue: props.expressionValue !== undefined ? props.expressionValue : baseComponent.expressionValue,
+                disabled: props.disabled !== undefined ? props.disabled : (baseComponent.disabled || false),
+                visible: props.visible !== undefined ? props.visible : baseComponent.visible || false,
+                tooltip: props.tooltip !== undefined ? props.tooltip : baseComponent.tooltip,
+                cssClass: props.cssClass !== undefined ? props.cssClass : baseComponent.cssClass,
+                hideLabel: formSchema.settings?.hideLabel !== undefined ? formSchema.settings.hideLabel : (props.hideLabel !== undefined ? props.hideLabel : (baseComponent.hideLabel || false)),
+                labelPosition: props.labelPosition !== undefined ? props.labelPosition : (baseComponent.labelPosition || 'top'),
+                checkboxLabelPosition: props.checkboxLabelPosition !== undefined ? props.checkboxLabelPosition : (baseComponent.checkboxLabelPosition || 'After'),
+                layoutDirection: props.layoutDirection !== undefined ? props.layoutDirection.toLowerCase() : (baseComponent.layoutDirection?.toLowerCase() || 'column'),
+                enableHtmlSanitizer: props.enableHtmlSanitizer !== undefined ? props.enableHtmlSanitizer : (baseComponent.enableHtmlSanitizer || 'true'),
+                position: props.position !== undefined ? props.position : (baseComponent.position || 'left'),
+                labelWidth: props.labelWidth !== undefined ? props.labelWidth.toLowerCase() : (baseComponent.labelWidth?.toLowerCase() || 'auto'),
+                iconCss: props.iconCss !== undefined ? props.iconCss : baseComponent.iconCss,
+                iconPosition: props.iconPosition !== undefined ? props.iconPosition : baseComponent.iconPosition,
+                startIndex: props.startIndex !== undefined ? props.startIndex : baseComponent.startIndex,
+                style: props.style !== undefined ? props.style.toLowerCase() : baseComponent.style?.toLowerCase(),
+                buttonType: props.buttonType !== undefined ? props.buttonType.toLowerCase() : baseComponent.buttonType?.toLowerCase(),
+                // DatePicker-specific properties
+                calendarMode: props.calendarMode !== undefined ? props.calendarMode : baseComponent.calendarMode,
+                dayHeaderFormat: props.dayHeaderFormat !== undefined ? props.dayHeaderFormat : baseComponent.dayHeaderFormat,
+                depth: props.depth !== undefined ? props.depth : baseComponent.depth,
+                firstDayOfWeek: props.firstDayOfWeek !== undefined ? props.firstDayOfWeek : baseComponent.firstDayOfWeek,
+                start: props.start !== undefined ? props.start : baseComponent.start,
+                // DateTimePicker-specific properties
+                allowEdit: props.allowEdit !== undefined ? props.allowEdit : baseComponent.allowEdit,
+                enabled: props.enabled !== undefined ? props.enabled : baseComponent.enabled,
+                timeFormat: props.timeFormat !== undefined ? props.timeFormat : baseComponent.timeFormat,
+                showTodayButton: props.showTodayButton !== undefined ? props.showTodayButton : baseComponent.showTodayButton,
+                floatLabelType: formSchema.settings?.floatLabelType !== undefined ? formSchema.settings.floatLabelType : (props.floatLabelType !== undefined ? props.floatLabelType : (baseComponent.floatLabelType || 'Never')),
+                fieldLabelPosition: props.fieldLabelPosition !== undefined ? props.fieldLabelPosition : (baseComponent.fieldLabelPosition || 'After'),
+                readOnly: props.readOnly !== undefined ? props.readOnly : (baseComponent.readOnly || false),
+                autocomplete: props.autocomplete !== undefined ? props.autocomplete : (baseComponent.autocomplete !== false),
+                multiline: props.multiline !== undefined ? props.multiline : baseComponent.multiline,
+                showClearButton: props.showClearButton !== undefined ? props.showClearButton : (baseComponent.showClearButton || false),
+                checked: props.checked !== undefined ? props.checked : (baseComponent.checked || false),
+                indeterminate: props.indeterminate !== undefined ? props.indeterminate : (baseComponent.indeterminate || false),
+                options: props.options !== undefined ? props.options : (baseComponent.options || ['Option 1']),
+                tabOptions: props.tabOptions !== undefined ? props.tabOptions : (baseComponent.tabOptions || ['Tab 1']),
+                decimals: props.decimals !== undefined ? props.decimals : baseComponent.decimals,
+                currency: props.currency !== undefined ? props.currency : baseComponent.currency,
+                format: props.format !== undefined ? props.format : baseComponent.format,
+                numberFormat: props.numberFormat !== undefined ? props.numberFormat : baseComponent.numberFormat,
+                step: props.step !== undefined ? props.step : baseComponent.step,
+                enableVirtualization: props.enableVirtualization !== undefined ? props.enableVirtualization : baseComponent.enableVirtualization,
+                popupHeight: props.popupHeight !== undefined ? props.popupHeight : baseComponent.popupHeight,
+                popupWidth: props.popupWidth !== undefined ? props.popupWidth : baseComponent.popupWidth,
+                htmlAttributes: props.htmlAttributes !== undefined ? props.htmlAttributes : baseComponent.htmlAttributes,
+                buttonsGroups: props.buttonsGroups !== undefined ? props.buttonsGroups : baseComponent.buttonsGroups,
+                gap: props.gap !== undefined ? props.gap : baseComponent.gap,
+                cols: props.cols !== undefined ? props.cols : baseComponent.cols,
+                textareaRows: props.textareaRows !== undefined ? props.textareaRows : baseComponent.textareaRows,
+                offLabel: props.offLabel !== undefined ? props.offLabel : baseComponent.offLabel,
+                onLabel: props.onLabel !== undefined ? props.onLabel : baseComponent.onLabel,
+                startDate: props.startDate !== undefined ? props.startDate : baseComponent.startDate,
+                endDate: props.endDate !== undefined ? props.endDate : baseComponent.endDate,
+                separator: props.separator !== undefined ? props.separator : baseComponent.separator,
+                mask: props.mask !== undefined ? props.mask : baseComponent.mask,
+                customCharacters: props.customCharacters !== undefined ? JSON.parse(props.customCharacters) : baseComponent.customCharacters,
+                promptChar: props.promptChar !== undefined ? props.promptChar : baseComponent.promptChar,
+                allowCustomValue: props.allowCustomValue !== undefined ? props.allowCustomValue : baseComponent.allowCustomValue,
+                addTagOnBlur: props.addTagOnBlur !== undefined ? props.addTagOnBlur : baseComponent.addTagOnBlur,
+                delimiterChar: props.delimiterChar !== undefined ? props.delimiterChar : baseComponent.delimiterChar,
+                visualMode: props.visualMode !== undefined ? props.visualMode : baseComponent.visualMode,
+                showSelectAll: props.showSelectAll !== undefined ? props.showSelectAll : baseComponent.showSelectAll,
+                selectAllText: props.selectAllText !== undefined ? props.selectAllText : baseComponent.selectAllText,
+                unSelectAllText: props.unSelectAllText !== undefined ? props.unSelectAllText : baseComponent.unSelectAllText,
+                showDropDownIcon: props.showDropDownIcon !== undefined ? props.showDropDownIcon : baseComponent.showDropDownIcon,
+                showCloseIcon: props.showCloseIcon !== undefined ? props.showCloseIcon : (baseComponent.showCloseIcon || false),
+                showIcon: props.showIcon !== undefined ? props.showIcon : (baseComponent.showIcon || false),
+                variant: props.variant !== undefined ? props.variant : baseComponent.variant,
+                severity: props.severity !== undefined ? props.severity : baseComponent.severity,
+                content: props.content !== undefined ? props.content : baseComponent.content,
+                // Rating-specific display properties
+                allowReset: props.allowReset !== undefined ? props.allowReset : baseComponent.allowReset,
+                itemsCount: props.itemsCount !== undefined ? props.itemsCount : baseComponent.itemsCount,
+                precision: props.precision !== undefined ? props.precision : baseComponent.precision,
+                showRatingTooltip: props.showRatingTooltip !== undefined ? props.showRatingTooltip : baseComponent.showRatingTooltip,
+                showRatingLabel: props.showRatingLabel !== undefined ? props.showRatingLabel : baseComponent.showRatingLabel,
+                ratingLabelPosition: props.ratingLabelPosition !== undefined ? props.ratingLabelPosition : baseComponent.ratingLabelPosition,
+                // ImageEditor-specific properties
+                height: props.height !== undefined ? props.height : baseComponent.height,
+                width: props.width !== undefined ? props.width : baseComponent.width,
+                // ColorPicker-specific properties
+                enableOpacity: props.enableOpacity !== undefined ? props.enableOpacity : baseComponent.enableOpacity,
+                showNoColor: props.showNoColor !== undefined ? props.showNoColor : baseComponent.showNoColor,
+                showButtons: props.showButtons !== undefined ? props.showButtons : baseComponent.showButtons,
+                showRecentColors: props.showRecentColors !== undefined ? props.showRecentColors : baseComponent.showRecentColors,
+                // Signature-specific properties
+                backgroundColor: props.backgroundColor !== undefined ? props.backgroundColor : baseComponent.backgroundColor,
+                strokeColor: props.strokeColor !== undefined ? props.strokeColor : baseComponent.strokeColor,
+                maximumStrokeWidth: props.maximumStrokeWidth !== undefined ? props.maximumStrokeWidth : baseComponent.maximumStrokeWidth,
+                minimumStrokeWidth: props.minimumStrokeWidth !== undefined ? props.minimumStrokeWidth : baseComponent.minimumStrokeWidth,
+                velocity: props.velocity !== undefined ? props.velocity : baseComponent.velocity,
+                // Uploader-specific properties
+                allowExtensions: props.allowExtensions !== undefined ? props.allowExtensions : baseComponent.allowExtensions,
+                saveUrl: props.saveUrl !== undefined ? props.saveUrl : baseComponent.saveUrl,
+                removeUrl: props.removeUrl !== undefined ? props.removeUrl : baseComponent.removeUrl,
+                buttons: props.buttons !== undefined ? props.buttons : baseComponent.buttons,
+                allowMultiple: props.allowMultiple !== undefined ? props.allowMultiple : baseComponent.allowMultiple,
+                showFileList: props.showFileList !== undefined ? props.showFileList : baseComponent.showFileList,
+                // Slider-specific properties
+                orientation: props.orientation !== undefined ? props.orientation : baseComponent.orientation,
+                rows: props.rows !== undefined ? props.rows : baseComponent.rows,
+                columns: props.columns !== undefined ? props.columns : baseComponent.columns,
+                lookUpConfig: props.lookUpConfig !== undefined ? props.lookUpConfig : baseComponent.lookUpConfig,
+                enableImportFromWord: props.enableImportFromWord !== undefined ? props.enableImportFromWord : baseComponent.enableImportFromWord,
+                enableExportToWord: props.enableExportToWord !== undefined ? props.enableExportToWord : baseComponent.enableExportToWord,
+                enableExportToPdf: props.enableExportToPdf !== undefined ? props.enableExportToPdf : baseComponent.enableExportToPdf,
+                tableCells: baseComponent.type === 'table'
+                    ? (() => {
+                        const newRows = props.rows !== undefined ? props.rows : (baseComponent.rows || 2);
+                        const newCols = props.columns !== undefined ? props.columns : (baseComponent.columns || 2);
+                        const existingCells = baseComponent.tableCells || [];
+                        return Array.from({ length: newRows }, (_, rowIndex) => Array.from({ length: newCols }, (_, colIndex) => {
+                            return existingCells[rowIndex]?.[colIndex] || [];
+                        }));
+                    })()
+                    : undefined,
+                tabItems: baseComponent.type === 'tabs'
+                    ? (() => {
+                        const tabHeaders = props.tabOptions !== undefined
+                            ? props.tabOptions
+                            : (baseComponent.tabItems?.map(tab => tab.header) || ['Tab 1']);
+                        const existingTabs = baseComponent.tabItems || [];
+                        return tabHeaders.map((header, index) => {
+                            // ✅ CORRECT: Match by index position instead of header text to preserve children
+                            const existingTab = existingTabs[index];
+                            return {
+                                header: header,
+                                content: existingTab?.content || []
+                            };
+                        });
+                    })()
+                    : undefined,
+                columnWidths: (props.columnWidths?.widths ?? baseComponent.columnWidths?.widths)?.every((w) => w === null)
+                    ? undefined
+                    : (props.columnWidths ?? baseComponent.columnWidths),
+                // Validation properties - keep at root level for FormComponent interface
+                required: props.required !== undefined ? props.required : (baseComponent?.required || false),
+                validateOn: props.validateOn !== undefined ? props.validateOn : (baseComponent?.validateOn || 'Change'),
+                min: props.minValue !== undefined ? props.minValue : baseComponent?.min,
+                max: props.maxValue !== undefined ? props.maxValue : baseComponent?.max,
+                minValue: props.minValue !== undefined ? props.minValue : baseComponent?.minValue,
+                maxValue: props.maxValue !== undefined ? props.maxValue : baseComponent?.maxValue,
+                minMaxRange: props.minMaxRange !== undefined ? props.minMaxRange : baseComponent?.minMaxRange,
+                minMaxTimeRange: props.minMaxTimeRange !== undefined ? props.minMaxTimeRange : baseComponent?.minMaxTimeRange,
+                minLength: props.minLength !== undefined ? props.minLength : baseComponent?.minLength,
+                maxLength: props.maxLength !== undefined ? props.maxLength : baseComponent?.maxLength,
+                minDate: props.minDate !== undefined ? props.minDate : baseComponent?.minDate,
+                maxDate: props.maxDate !== undefined ? props.maxDate : baseComponent?.maxDate,
+                regex: props.regex !== undefined ? props.regex : baseComponent?.regex,
+                minTime: props.minTime !== undefined ? props.minTime : baseComponent?.minTime,
+                maxTime: props.maxTime !== undefined ? props.maxTime : baseComponent?.maxTime,
+                validationMessage: props.validationMessage !== undefined ? props.validationMessage : baseComponent?.validationMessage,
+                // Mark as configured to prevent dialog from opening again (internal flag, not stored in output)
+                _configured: true
+            };
+            return updatedComponent;
+        };
+        if (editingField) {
+            // Update existing field with new properties
+            const mappedField = mapPropertiesToComponent(editingField, properties);
+            const updatedField = filterComponentProperties(mappedField);
+            const updateComponentById = (components, targetId, replacement) => {
+                return components.map(comp => {
+                    if (comp.id === targetId)
+                        return replacement;
+                    const updatedComp = { ...comp };
+                    if (comp.children) {
+                        updatedComp.children = updateComponentById(comp.children, targetId, replacement);
+                    }
+                    if (comp.tabItems) {
+                        updatedComp.tabItems = comp.tabItems.map(tab => ({
+                            ...tab,
+                            content: tab.content ? updateComponentById(tab.content, targetId, replacement) : tab.content
+                        }));
+                    }
+                    if (comp.tableCells) {
+                        updatedComp.tableCells = comp.tableCells.map(row => row.map(cell => updateComponentById(cell, targetId, replacement)));
+                    }
+                    return updatedComp;
+                });
+            };
+            // Update form schema immutably
+            setFormSchema(prev => ({
+                ...prev,
+                components: updateComponentById(prev.components, editingField.id, updatedField)
+            }));
+            return;
+        }
+        // If this was a widget switch flow, update the existing component in-place
+        if (pendingWidgetSwitch) {
+            const mappedField = mapPropertiesToComponent(pendingComponent, properties);
+            const updatedField = filterComponentProperties(mappedField);
+            const updateComponentById = (components) => {
+                return components.map(comp => {
+                    if (comp.id === pendingWidgetSwitch.fieldId)
+                        return updatedField;
+                    const updatedComp = { ...comp };
+                    if (comp.children) {
+                        updatedComp.children = updateComponentById(comp.children);
+                    }
+                    if (comp.tabItems) {
+                        updatedComp.tabItems = comp.tabItems.map(tab => ({
+                            ...tab,
+                            content: tab.content ? updateComponentById(tab.content) : []
+                        }));
+                    }
+                    if (comp.tableCells) {
+                        updatedComp.tableCells = comp.tableCells.map(row => row.map(cell => updateComponentById(cell)));
+                    }
+                    return updatedComp;
+                });
+            };
+            setTimeout(() => {
+                setFormSchema(prev => ({
+                    ...prev,
+                    components: updateComponentById(prev.components)
+                }));
+            }, 100);
+            setPendingWidgetSwitch(null);
+            setEditingField(null);
+            setPendingDropContext(null);
+            return;
+        }
+        // Map collected properties to FormComponent fields for new component
+        const mappedComponent = mapPropertiesToComponent(pendingComponent, properties);
+        const componentWithProperties = filterComponentProperties(mappedComponent);
+        // Add to form based on drop context
+        if (pendingDropContext?.isNested && pendingDropContext.parentId) {
+            handleNestedComponentDrop(pendingDropContext.parentId, componentWithProperties, pendingDropContext.cellInfo, pendingDropContext.parentPath);
+        }
+        else {
+            // Insert before submit button only if submit is at the last position (not moved by user)
+            setFormSchema(prev => {
+                const submitIndex = prev.components.findIndex(c => c.type === 'button' && c.buttonType === 'submit');
+                // If submit exists and is at the last position, insert before it
+                if (submitIndex !== -1 && submitIndex === prev.components.length - 1) {
+                    const newComponents = [...prev.components];
+                    newComponents.splice(submitIndex, 0, componentWithProperties);
+                    return { ...prev, components: newComponents };
+                }
+                // Otherwise (submit moved or doesn't exist), add at end
+                return { ...prev, components: [...prev.components, componentWithProperties] };
+            });
+        }
+        setPendingDropContext(null);
+    }, [pendingComponent, pendingDropContext, editingField, pendingWidgetSwitch, setFormSchema]);
+    const handleNestedComponentDrop = (parentId, component, cellInfo, parentPath, dropTargetIndex, dropPosition) => {
+        // Check if this component type has property configuration and hasn't been configured yet
+        if (componentProperties[component.type] && !component._configured) {
+            // Show property dialog in nested context
+            setPendingComponent(component);
+            setEditingField(component);
+            setPendingDropContext({
+                isNested: true,
+                parentId,
+                cellInfo,
+                parentPath,
+                targetIndex: dropTargetIndex,
+                targetPosition: dropPosition
+            });
+        }
+        setPendingComponent(component);
+        setEditingField(component);
+        // Calculate insert index for drop position
+        let insertIndex;
+        if (dropTargetIndex !== null && dropTargetIndex !== undefined && dropPosition) {
+            insertIndex = dropPosition === 'before' ? dropTargetIndex : dropTargetIndex + 1;
+        }
+        const updateNestedComponent = (components, targetId, newComp, info, idx) => {
+            return components.map(comp => {
+                if (comp.id === targetId) {
+                    // Handle panel/tabs with children array
+                    if (comp.children && !info) {
+                        if (idx !== undefined) {
+                            const newChildren = [...comp.children];
+                            newChildren.splice(idx, 0, newComp);
+                            return { ...comp, children: newChildren };
+                        }
+                        return {
+                            ...comp,
+                            children: [...comp.children, newComp]
+                        };
+                    }
+                    // Handle table with cell-specific drops
+                    if (comp.tableCells && info && info.row !== undefined && info.col !== undefined && info.tabIndex === undefined) {
+                        const newTableCells = comp.tableCells.map((row, rowIndex) => row.map((cell, colIndex) => {
+                            if (rowIndex === info.row && colIndex === info.col) {
+                                if (idx !== undefined) {
+                                    const newCell = [...cell];
+                                    newCell.splice(idx, 0, newComp);
+                                    return newCell;
+                                }
+                                return [...cell, newComp];
+                            }
+                            return cell;
+                        }));
+                        return {
+                            ...comp,
+                            tableCells: newTableCells
+                        };
+                    }
+                    // Handle tabs with tab-specific drops
+                    if (comp.tabItems && info?.tabIndex !== undefined) {
+                        const newTabItems = comp.tabItems.map((tab, index) => {
+                            if (index === info.tabIndex) {
+                                if (idx !== undefined) {
+                                    const newContent = [...(tab.content || [])];
+                                    newContent.splice(idx, 0, newComp);
+                                    return {
+                                        ...tab,
+                                        content: newContent
+                                    };
+                                }
+                                return {
+                                    ...tab,
+                                    content: [...(tab.content || []), newComp]
+                                };
+                            }
+                            return tab;
+                        });
+                        return {
+                            ...comp,
+                            tabItems: newTabItems
+                        };
+                    }
+                }
+                if (comp.tabItems) {
+                    const newTabItems = comp.tabItems.map(tab => ({
+                        ...tab,
+                        content: tab.content ? updateNestedComponent(tab.content, targetId, newComp, info, idx) : []
+                    }));
+                    return {
+                        ...comp,
+                        tabItems: newTabItems
+                    };
+                }
+                // Recursively search in nested components
+                if (comp.children) {
+                    return {
+                        ...comp,
+                        children: updateNestedComponent(comp.children, targetId, newComp, info, idx)
+                    };
+                }
+                if (comp.tableCells) {
+                    const newTableCells = comp.tableCells.map(row => row.map(cell => updateNestedComponent(cell, targetId, newComp, info, idx)));
+                    return {
+                        ...comp,
+                        tableCells: newTableCells
+                    };
+                }
+                return comp;
+            });
+        };
+        setFormSchema(prev => ({
+            ...prev,
+            components: updateNestedComponent(prev.components, parentId, component, cellInfo, insertIndex)
+        }));
+    };
+    const handleReorder = (newComponents) => {
+        setFormSchema(prev => ({
+            ...prev,
+            components: newComponents
+        }));
+    };
+    const handleNestedReorder = (parentId, parentPath, newChildren, cellInfo) => {
+        const updateNestedChildren = (components, targetPath, updatedChildren, info) => {
+            return components.map(comp => {
+                const currentPath = comp.parentPath ? `${comp.parentPath}.${comp.id}` : comp.id;
+                // Check if this is the target component
+                if (currentPath === targetPath || comp.id === parentId) {
+                    // Handle panel children
+                    if (comp.children && !info) {
+                        return {
+                            ...comp,
+                            children: updatedChildren
+                        };
+                    }
+                    // Handle table cell children
+                    if (comp.tableCells && info && info.row !== undefined && info.col !== undefined && info.tabIndex === undefined) {
+                        const newTableCells = comp.tableCells.map((row, rowIndex) => row.map((cell, colIndex) => {
+                            if (rowIndex === info.row && colIndex === info.col) {
+                                return updatedChildren;
+                            }
+                            return cell;
+                        }));
+                        return {
+                            ...comp,
+                            tableCells: newTableCells
+                        };
+                    }
+                    // Handle tab content children
+                    if (comp.tabItems && info && info.tabIndex !== undefined) {
+                        const newTabItems = comp.tabItems.map((tab, index) => {
+                            if (index === info.tabIndex) {
+                                return {
+                                    ...tab,
+                                    content: updatedChildren
+                                };
+                            }
+                            return tab;
+                        });
+                        return {
+                            ...comp,
+                            tabItems: newTabItems
+                        };
+                    }
+                }
+                if (comp.tableCells) {
+                    const newTableCells = comp.tableCells.map(row => row.map(cell => updateNestedChildren(cell, targetPath, updatedChildren, info)));
+                    return {
+                        ...comp,
+                        tableCells: newTableCells
+                    };
+                }
+                if (comp.tabItems) {
+                    const newTabItems = comp.tabItems.map(tab => ({
+                        ...tab,
+                        content: tab.content ? updateNestedChildren(tab.content, targetPath, updatedChildren, info) : []
+                    }));
+                    return {
+                        ...comp,
+                        tabItems: newTabItems
+                    };
+                }
+                // Recursively search in nested structures
+                if (comp.children) {
+                    return {
+                        ...comp,
+                        children: updateNestedChildren(comp.children, targetPath, updatedChildren, info)
+                    };
+                }
+                return comp;
+            });
+        };
+        setFormSchema(prev => ({
+            ...prev,
+            components: updateNestedChildren(prev.components, parentPath, newChildren, cellInfo)
+        }));
+    };
+    // T024: Handle Copy action - copy to system clipboard
+    const [hasClipboardData, setHasClipboardData] = React.useState(false);
+    // In-memory cache of the copied field so paste never needs to read the
+    // system clipboard (avoids triggering the browser's native paste UI in
+    // Firefox, which was firing on the first drag-drop operation).
+    const copiedFieldRef = React.useRef(null);
+    const handleCopy = React.useCallback(async (field) => {
+        try {
+            await ClipboardHelper.copyToClipboard(field);
+            console.log('Field copied to system clipboard:', field.id);
+            copiedFieldRef.current = field;
+            setHasClipboardData(true);
+        }
+        catch (error) {
+            console.error('Copy failed:', error);
+        }
+    }, []);
+    // T025-T026: Handle Paste action - paste from system clipboard AFTER target field
+    const handlePaste = React.useCallback(async (targetFieldId) => {
+        try {
+            // Use the in-memory copy instead of reading the system clipboard.
+            // Reading navigator.clipboard.readText() at runtime in Firefox triggers
+            // the browser's native paste UI prompt (esp. on first invocation after
+            // drag-drop), so we avoid it entirely.
+            const copiedField = copiedFieldRef.current;
+            if (!copiedField) {
+                setHasClipboardData(false);
+                return;
+            }
+            // Remap IDs for layout components and all their descendants
+            const remapIds = (comp) => {
+                const newId = generateId(comp.type);
+                const newName = generateName(comp.type);
+                const remapped = {
+                    ...comp,
+                    id: newId,
+                    name: newName
+                };
+                if (comp.children) {
+                    remapped.children = comp.children.map(child => remapIds(child));
+                }
+                if (comp.tabItems) {
+                    remapped.tabItems = comp.tabItems.map(tab => ({
+                        ...tab,
+                        content: tab.content ? tab.content.map(child => remapIds(child)) : []
+                    }));
+                }
+                if (comp.tableCells) {
+                    remapped.tableCells = comp.tableCells.map(row => row.map(cell => cell.map(child => remapIds(child))));
+                }
+                return remapped;
+            };
+            // Create a unique field to insert (remap nested ids if layout)
+            let newField = ClipboardHelper.createUniqueField(copiedField);
+            // Always generate new ID and name (for both layout and regular components)
+            newField = {
+                ...newField,
+                id: generateId(newField.type),
+                name: generateName(newField.type)
+            };
+            // For layout components, also remap all nested children
+            if (['panel', 'tabs', 'table', 'card'].includes(newField.type)) {
+                newField = remapIds(newField);
+            }
+            // Recursive inserter: inserts newComp AFTER the component with targetId
+            const insertAfterTarget = (components, targetId) => {
+                const out = [];
+                for (let i = 0; i < components.length; i++) {
+                    const comp = components[i];
+                    // Direct match at this level
+                    out.push(comp);
+                    if (comp.id === targetId) {
+                        out.push(newField);
+                        // append remaining items
+                        out.push(...components.slice(i + 1));
+                        return { components: out, inserted: true };
+                    }
+                    // Search in children (panel)
+                    if (comp.children) {
+                        const { components: updatedChildren, inserted } = insertAfterTarget(comp.children, targetId);
+                        if (inserted) {
+                            const updatedComp = { ...comp, children: updatedChildren };
+                            // replace last pushed comp with updatedComp
+                            out[out.length - 1] = updatedComp;
+                            out.push(...components.slice(i + 1));
+                            return { components: out, inserted: true };
+                        }
+                    }
+                    // Search in tabItems content
+                    if (comp.tabItems) {
+                        let tabInserted = false;
+                        const newTabItems = comp.tabItems.map(tab => {
+                            if (!tab.content)
+                                return tab;
+                            const { components: updatedContent, inserted } = insertAfterTarget(tab.content, targetId);
+                            if (inserted)
+                                tabInserted = true;
+                            return { ...tab, content: updatedContent };
+                        });
+                        if (tabInserted) {
+                            const updatedComp = { ...comp, tabItems: newTabItems };
+                            out[out.length - 1] = updatedComp;
+                            out.push(...components.slice(i + 1));
+                            return { components: out, inserted: true };
+                        }
+                    }
+                    // Search in tableCells (rows -> cells -> component arrays)
+                    if (comp.tableCells) {
+                        let tableInserted = false;
+                        const newTableCells = comp.tableCells.map((row) => row.map((cell) => {
+                            const { components: updatedCell, inserted } = insertAfterTarget(cell, targetId);
+                            if (inserted)
+                                tableInserted = true;
+                            return updatedCell;
+                        }));
+                        if (tableInserted) {
+                            const updatedComp = { ...comp, tableCells: newTableCells };
+                            out[out.length - 1] = updatedComp;
+                            out.push(...components.slice(i + 1));
+                            return { components: out, inserted: true };
+                        }
+                    }
+                }
+                return { components: out, inserted: false };
+            };
+            setFormSchema(prev => {
+                const { components: updated, inserted } = insertAfterTarget(prev.components, targetFieldId);
+                if (!inserted) {
+                    // fallback: try to insert at root after target if present
+                    const rootIndex = prev.components.findIndex(c => c.id === targetFieldId);
+                    if (rootIndex !== -1) {
+                        const newComponents = [...prev.components];
+                        newComponents.splice(rootIndex + 1, 0, newField);
+                        return { ...prev, components: newComponents };
+                    }
+                    console.warn('Paste target not found:', targetFieldId);
+                    return prev;
+                }
+                return { ...prev, components: updated };
+            });
+            // visual feedback (unchanged)
+            setTimeout(() => {
+                const wrapper = document.querySelector(`[data-field-id="${newField.id}"]`);
+                if (wrapper) {
+                    wrapper.classList.add('field-inserted');
+                    setTimeout(() => wrapper.classList.remove('field-inserted'), 2000);
+                }
+            }, 50);
+            // Clear the system clipboard and in-memory copy so the paste button
+            // is hidden. This signals to the user that a fresh copy is needed
+            // before pasting again.
+            copiedFieldRef.current = null;
+            setHasClipboardData(false);
+            ClipboardHelper.clearData().catch(() => { });
+        }
+        catch (error) {
+            console.error('Paste failed:', error);
+        }
+    }, []);
+    // T017-T018: Handle Delete action with focus management
+    const handleDeleteAction = React.useCallback((fieldId) => {
+        setFormSchema(prev => ({
+            ...prev,
+            components: prev.components.filter(c => c.id !== fieldId)
+        }));
+        // Move focus to canvas container after delete
+        setTimeout(() => {
+            const canvas = document.querySelector('.form-preview-area');
+            canvas?.focus();
+        }, 0);
+    }, []);
+    const isDescendantOf = (parentId, childId, components) => {
+        const stack = [...components];
+        while (stack.length) {
+            const comp = stack.pop();
+            if (comp.id === parentId) {
+                // Found parent, now search for child within it
+                const searchInChildren = (items) => {
+                    for (const item of items) {
+                        if (item.id === childId)
+                            return true;
+                        if (item.children && searchInChildren(item.children))
+                            return true;
+                        if (item.tabItems) {
+                            for (const tab of item.tabItems) {
+                                if (tab.content && searchInChildren(tab.content))
+                                    return true;
+                            }
+                        }
+                        if (item.tableCells) {
+                            for (const row of item.tableCells) {
+                                for (const cell of row) {
+                                    if (searchInChildren(cell))
+                                        return true;
+                                }
+                            }
+                        }
+                    }
+                    return false;
+                };
+                return searchInChildren(comp.children || []) ||
+                    (comp.tabItems?.some(t => searchInChildren(t.content || [])) || false) ||
+                    (comp.tableCells?.some(row => row.some(cell => searchInChildren(cell))) || false);
+            }
+            if (comp.children?.length)
+                stack.push(...comp.children);
+            if (comp.tabItems?.length) {
+                for (const tab of comp.tabItems) {
+                    if (tab.content?.length)
+                        stack.push(...tab.content);
+                }
+            }
+            if (comp.tableCells?.length) {
+                for (const row of comp.tableCells) {
+                    for (const cell of row) {
+                        if (cell?.length)
+                            stack.push(...cell);
+                    }
+                }
+            }
+        }
+        return false;
+    };
+    const handleDelete = React.useCallback((fieldId, isReorering) => {
+        isReorderingRef.current = isReorering || false;
+        // Recursive function to remove component from nested structures
+        const removeComponentById = (components) => {
+            return components
+                .filter(c => c.id !== fieldId)
+                .map(c => {
+                // If component has tabs, recursively remove from tab content
+                if (c.tabItems) {
+                    return {
+                        ...c,
+                        tabItems: c.tabItems.map(tab => ({
+                            ...tab,
+                            content: tab.content ? removeComponentById(tab.content) : []
+                        }))
+                    };
+                }
+                // If component has children (panel), recursively remove from children
+                if (c.children) {
+                    return { ...c, children: removeComponentById(c.children) };
+                }
+                // If component has table cells, recursively remove from cells
+                if (c.tableCells) {
+                    return {
+                        ...c,
+                        tableCells: c.tableCells.map(row => row.map(cell => removeComponentById(cell)))
+                    };
+                }
+                return c;
+            });
+        };
+        setFormSchema(prev => ({
+            ...prev,
+            components: removeComponentById(prev.components)
+        }));
+        setPendingComponent(prev => (prev && (prev.id === fieldId || isDescendantOf(fieldId, prev.id, formSchema.components)) && !isReorering)
+            ? null
+            : prev);
+        setEditingField(prev => (prev && (prev.id === fieldId || isDescendantOf(fieldId, prev.id, formSchema.components)) && !isReorering)
+            ? null
+            : prev);
+        // Move focus to canvas container after delete
+        setTimeout(() => {
+            const canvas = document.querySelector('.form-preview-area');
+            canvas?.focus();
+        }, 0);
+        setTimeout(() => {
+            isReorderingRef.current = false;
+        }, 500);
+    }, [pendingComponent, editingField, setFormSchema]);
+    const handleLeftPaneToggle = useCallback(() => {
+        if (isMobile && !isRightPaneCollapsed) {
+            setIsRightPaneCollapsed(true);
+        }
+        setIsLeftPaneCollapsed(prev => !prev);
+    }, [isMobile, isRightPaneCollapsed]);
+    const handleSidebarOverlayClick = useCallback(() => {
+        if (!isLeftPaneCollapsed) {
+            setIsLeftPaneCollapsed(true);
+        }
+        if (!isRightPaneCollapsed) {
+            setIsRightPaneCollapsed(true);
+        }
+    }, [isLeftPaneCollapsed, isRightPaneCollapsed]);
+    const handleRightPaneToggle = useCallback(() => {
+        if (isMobile && !isLeftPaneCollapsed) {
+            setIsLeftPaneCollapsed(true);
+        }
+        setIsRightPaneCollapsed(prev => !prev);
+    }, [isMobile, isLeftPaneCollapsed]);
+    const handleLeftPaneMouseEnter = useCallback(() => {
+        if (leftPaneHoverTimeoutRef.current) {
+            clearTimeout(leftPaneHoverTimeoutRef.current);
+        }
+        if (isLeftPaneCollapsed) {
+            leftPaneHoverTimeoutRef.current = setTimeout(() => {
+                if (!isMobile) {
+                    setIsLeftPaneHovered(true);
+                }
+            }, 500);
+        }
+    }, [isLeftPaneCollapsed]);
+    const handleLeftPaneMouseLeave = useCallback(() => {
+        if (leftPaneHoverTimeoutRef.current) {
+            clearTimeout(leftPaneHoverTimeoutRef.current);
+        }
+        setIsLeftPaneHovered(false);
+    }, []);
+    const handleRightPaneMouseEnter = useCallback(() => {
+        if (rightPaneHoverTimeoutRef.current) {
+            clearTimeout(rightPaneHoverTimeoutRef.current);
+        }
+        if (isRightPaneCollapsed) {
+            rightPaneHoverTimeoutRef.current = setTimeout(() => {
+                if (!isMobile) {
+                    setIsRightPaneHovered(true);
+                }
+            }, 500);
+        }
+    }, [isRightPaneCollapsed, isMobile]);
+    const handleRightPaneMouseLeave = useCallback(() => {
+        if (rightPaneHoverTimeoutRef.current) {
+            clearTimeout(rightPaneHoverTimeoutRef.current);
+        }
+        setIsRightPaneHovered(false);
+    }, []);
+    const splitData = React.useMemo(() => splitSchema(formSchema), [formSchema]);
+    const downloadCombinedSchema = async () => {
+        try {
+            const timestamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-');
+            const blob = new Blob([JSON.stringify(splitData, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `form-schema-${timestamp}.json`;
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+            URL.revokeObjectURL(url);
+        }
+        catch (err) {
+            console.error('Download failed', err);
+        }
+    };
+    const modeItems = [
+        { text: l10n.getConstant('simple'), id: 'simple' },
+        { text: l10n.getConstant('developer'), id: 'developer' }
+    ];
+    const handleModeSelect = (args) => {
+        const selectedMode = args.item.id === 'simple' ? 'Simple' : 'Developer';
+        const url = new URL(window.location.href);
+        const currentUrlMode = url.searchParams.get('mode');
+        if (currentUrlMode === selectedMode.toLowerCase()) {
+            return;
+        }
+        url.searchParams.set('mode', selectedMode.toLowerCase());
+        window.location.href = url.toString();
+    };
+    useEffect(() => {
+        const element = builderContainerRef.current;
+        if (!element)
+            return;
+        const updateWidth = () => {
+            setContainerWidth(element.getBoundingClientRect().width);
+        };
+        updateWidth();
+        const resizeObserver = new ResizeObserver(() => {
+            updateWidth();
+        });
+        resizeObserver.observe(element);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    useEffect(() => {
+        setIsLeftPaneCollapsed(containerWidth <= 820);
+        setIsRightPaneCollapsed(containerWidth <= 1024);
+        setIsMobile(containerWidth <= 1024);
+    }, [containerWidth]);
+    useEffect(() => {
+        if (isMobile) {
+            if (pendingComponent && isRightPaneCollapsed && !isReorderingRef.current) {
+                handleRightPaneToggle();
+            }
+            if (!pendingComponent && !isRightPaneCollapsed) {
+                handleRightPaneToggle();
+            }
+        }
+    }, [isMobile, pendingComponent]);
+    useEffect(() => {
+        const element = contentSectionRef.current;
+        const preventTouchScroll = (e) => {
+            e.preventDefault();
+        };
+        element?.addEventListener("touchmove", preventTouchScroll, {
+            passive: false,
+        });
+        return () => {
+            element?.removeEventListener("touchmove", preventTouchScroll);
+        };
+    }, []);
+    return (_jsxs("div", { "aria-label": "Form Builder", ref: builderContainerRef, className: `builder-container  ${enableRtl ? 'e-rtl' : ''} ${formBuilderMode === 'component' ? 'e-component' : ''} ${containerWidth <= 820 ? 'small-screen' : ''}`, children: [_jsxs("div", { className: `main-header`, children: [_jsxs("div", { className: "left-section", children: [isMobile && _jsx(ButtonComponent, { cssClass: 'e-flat', iconCss: 'e-icons e-show-hide-panel', onClick: handleLeftPaneToggle, "aria-label": "Open component palette" }), formBuilderMode === 'sass' && !isMobile &&
+                                _jsx(ButtonComponent, { cssClass: 'action-btn e-flat', iconCss: 'e-icons e-arrow-head', onClick: () => { navigateTo('/dashboard'); }, "aria-label": "Back to dashboard" }), !isMobile && _jsx(InPlaceEditorComponent, { type: 'Text', mode: 'Inline', value: formSchema.settings?.name || 'Untitled Form', change: (e) => {
+                                    if (formSchema.settings) {
+                                        formSchema.settings.name = e.value;
+                                        setFormSchema({ ...formSchema });
+                                    }
+                                } })] }), _jsxs("div", { className: "right-section", children: [_jsx(DropDownButtonComponent, { items: modeItems, select: handleModeSelect, cssClass: "e-outline mode-button", popupWidth: "100%", "aria-label": l10n.getConstant(`${mode?.toLowerCase()}Mode`), children: l10n.getConstant(`${mode?.toLowerCase()}${!isMobile ? 'Mode' : ''}`) }), allowExport && _jsxs(_Fragment, { children: [_jsx("div", { className: 'separator' }), _jsx(ButtonComponent, { cssClass: "action-btn e-flat e-primary", onClick: downloadCombinedSchema, disabled: isDefaultFormSchema(formSchema), "aria-label": "Export json schema", children: l10n.getConstant('export') })] }), isMobile && _jsx(ButtonComponent, { cssClass: 'e-flat', iconCss: 'e-icons e-adjustment', onClick: handleRightPaneToggle, "aria-label": "Open properties panel" })] })] }), _jsxs("div", { ref: contentSectionRef, role: "main", className: `contentSection${editingField || pendingWidgetSwitch || pendingComponent ? ' sidebar-open' : ' sidebar-closed'}`, children: [containerWidth <= 820 && (!isLeftPaneCollapsed || !isRightPaneCollapsed) && _jsx("div", { className: "sidebar-overlay", "aria-hidden": "true", onClick: handleSidebarOverlayClick }), _jsxs(DragDrop, { children: [_jsx(LeftPane, { className: `${isLeftPaneCollapsed ? 'collapsed' : 'expanded'}`, templates: formTemplates ?? defaultTemplates, paletteConfig: paletteConfig, mode: mode, onFieldDragStarted: onFieldDragStarted, onDrop: handleComponentDrop, containerWidth: containerWidth }), !isMobile &&
+                                _jsxs("button", { className: `e-btn left-pane-toggle ${isLeftPaneCollapsed ? 'collapsed' : 'expanded'}`, onClick: handleLeftPaneToggle, onMouseEnter: handleLeftPaneMouseEnter, onMouseLeave: handleLeftPaneMouseLeave, "aria-label": isLeftPaneCollapsed ? 'Expand component palette' : 'Collapse component palette', "aria-expanded": !isLeftPaneCollapsed, children: [_jsx("span", { "aria-hidden": "true", className: `e-btn-icon e-icons ${enableRtl
+                                                ? (isLeftPaneCollapsed ? 'e-chevron-left' : 'e-chevron-right')
+                                                : (isLeftPaneCollapsed ? 'e-chevron-right' : 'e-chevron-left')}` }), isLeftPaneCollapsed && isLeftPaneHovered && _jsx("span", { style: { marginLeft: '8px' }, children: "Expand" })] }, "left-pane-toggle"), _jsx(MainSection, { className: `${isRightPaneCollapsed ? 'right-collapsed' : ''} ${isLeftPaneCollapsed ? 'left-collapsed' : ''}`, formSchema: formSchema, onDrop: handleComponentDrop, activeFieldId: pendingComponent?.id, onNestedDrop: handleNestedComponentDrop, onReorder: handleReorder, onNestedReorder: handleNestedReorder, onEdit: handleEdit, mode: mode, onCopy: handleCopy, onPaste: handlePaste, onDelete: handleDelete, onSwitchWidget: handleSwitchWidget, onDeleteAction: handleDeleteAction, enablePreview: enablePreview, onFieldDragStarted: onFieldDragStarted, onFieldDraggingOver: onFieldDraggingOver, onFieldDropped: onFieldDropped, hasClipboardData: hasClipboardData })] }), !isMobile &&
+                        _jsxs("button", { className: `e-btn right-pane-toggle ${isRightPaneCollapsed ? 'collapsed' : 'expanded'}`, onClick: handleRightPaneToggle, onMouseEnter: handleRightPaneMouseEnter, onMouseLeave: handleRightPaneMouseLeave, "aria-label": isRightPaneCollapsed ? 'Expand properties panel' : 'Collapse properties panel', "aria-expanded": !isRightPaneCollapsed, children: [_jsx("span", { "aria-hidden": "true", className: `e-btn-icon e-icons ${enableRtl
+                                        ? (isRightPaneCollapsed ? 'e-chevron-right' : 'e-chevron-left')
+                                        : (isRightPaneCollapsed ? 'e-chevron-left' : 'e-chevron-right')}` }), isRightPaneCollapsed && isRightPaneHovered && _jsx("span", { style: { marginLeft: '8px' }, children: "Expand" })] }, "right-pane-toggle"), _jsxs("aside", { role: "complementary", "aria-label": pendingComponent && !isDefaultFormSchema(formSchema)
+                            ? 'Component Properties'
+                            : 'Form Settings', className: `right-sidebar ${isRightPaneCollapsed ? 'sidebar-closed' : 'expanded'}`, children: [pendingComponent && componentProperties[pendingComponent.type] && !isDefaultFormSchema(formSchema) && (_jsx(RightPane, { mode: 'component', componentType: pendingComponent.type, configData: componentProperties, existingValues: editingField || pendingComponent, onSave: handlePropertyDialogSave, onPropertyChanged: onPropertyChanged, onClose: () => {
+                                    setPendingComponent(null);
+                                    setEditingField(null);
+                                    setPendingWidgetSwitch(null);
+                                    setPendingDropContext(null);
+                                }, builderMode: mode }, `sidebar-${(editingField || pendingComponent).id}`)), (!pendingComponent || isDefaultFormSchema(formSchema)) && (_jsx(RightPane, { componentType: 'form', mode: "formSettings", configData: componentProperties, formSettingsConfig: formSettingsConfig, formSettings: formSchema.settings, onSave: handleFormSettingsSave, onClose: () => { } }, "form-settings"))] })] })] }));
+};
+/**
+ * The FormBuilder component provides a visual, drag-and-drop interface for authoring form schemas. It supports palette customization, template insertion, dual modes (Simple/Developer), and emits structural form schemas (FormSchema) that can be consumed by FormRenderer.
+ *
+ * ```typescript
+ * import { FormBuilder } from '@syncfusion/ej2-react-form-builder';
+ *
+ * <FormBuilder />
+ * ```
+ */
+export const FormBuilder = forwardRef((props, ref) => {
+    const formBuilderRef = useRef(null);
+    const { locale = 'en-US', allowExport = true, enablePreview = true, enablePersistence = false, enableRtl = false, schema, mode = 'Developer', formTemplates, paletteConfig, onFieldDragStarted, onFieldDraggingOver, onFieldDropped, onPropertyChanged, style: userStyle, ...domProps } = props;
+    // Determine mode synchronously from the URL on first render (no extra render cycle)
+    const [effectiveMode] = useState(() => {
+        if (typeof window === 'undefined')
+            return undefined;
+        const urlMode = new URLSearchParams(window.location.search).get('mode');
+        if (urlMode === 'developer')
+            return 'Developer';
+        if (urlMode === 'simple')
+            return 'Simple';
+        return undefined;
+    });
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const params = new URLSearchParams(window.location.search);
+        // Only set mode in URL if a mode is provided via props and URL doesn't have one
+        if (params.get('mode') !== 'developer' && params.get('mode') !== 'simple' && mode) {
+            const url = new URL(window.location.href);
+            url.searchParams.set('mode', mode.toLowerCase());
+            window.history.replaceState({}, '', url.toString());
+        }
+    }, [mode]);
+    const finalMode = effectiveMode || mode;
+    const computedStyle = {
+        ...(formBuilderMode === 'component' ? { height: '700px' } : {}),
+        ...userStyle
+    };
+    const computedSchema = schema
+        ? schema.components !== undefined
+            ? schema
+            : importSplitSchemas(typeof schema === 'string' ? schema : JSON.stringify(schema), defaultFormSchema)
+        : schema;
+    return (_jsx(FormSchemaProvider, { enablePersistence: enablePersistence, initialSchema: computedSchema || defaultFormSchema, mode: finalMode, children: _jsx(LocalizationProvider, { locale: locale, children: _jsx("div", { id: "form-builder", ref: formBuilderRef, style: computedStyle, ...domProps, children: _jsx(FormBuilderComponent, { apiRef: ref, domRef: formBuilderRef, enableRtl: enableRtl, locale: locale, mode: finalMode, enablePersistence: enablePersistence, onFieldDragStarted: onFieldDragStarted, onFieldDraggingOver: onFieldDraggingOver, onFieldDropped: onFieldDropped, onPropertyChanged: onPropertyChanged, allowExport: allowExport, enablePreview: enablePreview, formTemplates: formTemplates, paletteConfig: paletteConfig }) }) }) }));
+});
+export default React.memo(FormBuilder);