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

package/src/components/layout/MainSection.js

@@ -1,1766 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { enableRipple } from '@syncfusion/ej2-base';
-import { useState, useRef, useEffect, useImperativeHandle, useCallback } from 'react';
-import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
-import { Tooltip, TooltipComponent } from '@syncfusion/ej2-react-popups';
-import { Form, FormField } from '../../../Common/FormValidator';
-import { VALIDATION_REGEX } from '../../../Common/utils';
-import { Draggable, Droppable } from '@syncfusion/react-base';
-import { useFormSchema, useLocalization } from '../../context/contexts';
-import { RenderComponent } from '../../utils/renderComponent';
-import { FormFieldWrapper } from './FormFieldWrapper';
-import { Preview } from './Preview';
-import { CustomTabComponent } from '../../../Common/CustomTabComponent';
-import { StaticHtmlRenderer } from '../../../Common/StaticHtmlRenderer';
-import { generateId, generateName, splitSchema } from '../../../Common/json-converter';
-import React from 'react';
-import ListBoxPane from './ListBoxPane';
-import { splitWidths } from '../../../Common/utils';
-import { extractTemplateComponents } from '../../FormBuilder';
-import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
-import { defaultFormSchema } from '../../context/defaultFormSchema';
-import { MessageComponent } from '@syncfusion/ej2-react-notifications';
-// import { builderSubmitUrl } from '../../../tempConstants';
-import { setFormId, getFormId } from '../../../Common/globalFormId';
-import { FormDropZoneIcon } from '../icons/ComponentIcons';
-export const isDefaultFormSchema = (schema) => {
-    return schema.components.length === 0 || schema.components.length === 1 &&
-        schema.components[0]?.type === 'button' &&
-        schema.components[0]?.buttonType === 'submit';
-};
-const MainSection = React.forwardRef(({ formSchema, activeFieldId, onDrop, onNestedDrop, onReorder, onNestedReorder, onDelete, onEdit, onCopy, onPaste, onSwitchWidget, enablePreview, mode, onFieldDragStarted, onFieldDraggingOver, className, onFieldDropped, paletteConfig, hasClipboardData }, ref) => {
-    // Enable ripple effect for Syncfusion components
-    enableRipple(true);
-    // Track initial drag position and current direction
-    const initialDragYRef = useRef(null);
-    const currentDragYRef = useRef(null);
-    const nestedInitialDragYRef = useRef(null);
-    const nestedCurrentDragYRef = useRef(null);
-    const reOrdering = useRef(false);
-    const nestedReOrdering = useRef(false);
-    // Track drop position for palette drag (drop-between-fields)
-    const dropTargetIndexRef = useRef(null);
-    const dropPositionRef = useRef(null);
-    const nestedDropTargetIndexRef = useRef(null);
-    const nestedDropPositionRef = useRef(null);
-    const isProcessingNestedDropRef = useRef(false);
-    const [isDraggingOver, setIsDraggingOver] = useState(false);
-    const [showSplitView, setShowSplitView] = useState(false);
-    const [isPreviewOpen, setIsPreviewOpen] = useState(false);
-    const [draggingOverPanel, setDraggingOverPanel] = useState(null);
-    const [formState, setFormState] = useState();
-    const [isListBoxPaneOpen, setIsListBoxPaneOpen] = useState(false);
-    const [currentMode, setCurrentMode] = useState(mode || 'Developer');
-    const { l10n, locale } = useLocalization();
-    // Access FormSchema context for import functionality
-    const { setFormSchema } = useFormSchema();
-    // Drag and reorder state
-    const draggedItemIndex = useRef(null);
-    const [showClone, setShowClone] = useState(false);
-    const cloneHelperRef = useRef(null);
-    const currentComponentsRef = useRef(formSchema.components);
-    const [isReordering, setIsReordering] = useState(false);
-    // Nested reorder state
-    const [isNestedReordering, setIsNestedReordering] = useState(false);
-    const [activeNestedContainer, setActiveNestedContainer] = useState(null);
-    const nestedDraggedIndex = useRef(null);
-    const nestedCloneHelperRef = useRef(null);
-    const nestedComponentsRef = useRef([]);
-    const nestedContainerIdRef = useRef(null);
-    const nestedContainerPathRef = useRef(null);
-    const nestedCellInfoRef = useRef(undefined);
-    // dataGrid refs management - maintains refs to all grid components for data collection
-    const gridRefsRef = useRef({});
-    /**
-     * Recursively collect all components including nested ones
-     */
-    const collectAllComponents = useCallback((components) => {
-        const allComponents = [];
-        const traverse = (comps) => {
-            comps.forEach(comp => {
-                allComponents.push(comp);
-                // Handle nested components in panels
-                if (comp.children && comp.children.length > 0) {
-                    traverse(comp.children);
-                }
-                // Handle components in table cells
-                if (comp.tableCells) {
-                    comp.tableCells.forEach(row => {
-                        row.forEach(cell => {
-                            traverse(cell);
-                        });
-                    });
-                }
-                // Handle components in tabs
-                if (comp.tabItems) {
-                    comp.tabItems.forEach(tab => {
-                        if (tab.content) {
-                            traverse(tab.content);
-                        }
-                    });
-                }
-            });
-        };
-        traverse(components);
-        return allComponents;
-    }, []);
-    const initialValues = React.useMemo(() => {
-        const values = {};
-        const allComponents = collectAllComponents(formSchema.components);
-        const componentIds = new Set();
-        allComponents.forEach(comp => {
-            // Do NOT store dataGrid data inside the form state; grids manage their own internal data.
-            if (comp.type === 'dataGrid') {
-                componentIds.add(comp.id);
-                return;
-            }
-            if (comp.defaultValue !== undefined) {
-                values[comp.id] = comp.defaultValue;
-            }
-            componentIds.add(comp.id);
-        });
-        if (formState) {
-            Object.keys(formState.values).filter(key => !componentIds.has(key)).forEach(key => {
-                delete formState.values[key];
-            });
-        }
-        return values;
-    }, [formSchema, collectAllComponents]);
-    // Update the useEffect that sets default values
-    useEffect(() => {
-        if (formState && initialValues) {
-            Object.keys(formState.values).filter(key => !(key in initialValues));
-            Object.entries(initialValues).forEach(([id, value]) => {
-                if (!formState.values[id]) {
-                    formState.values[id] = value;
-                }
-            });
-        }
-    }, [formState, formSchema, initialValues]);
-    // Expose gridRefs via forwardRef for parent components to collect grid data on form submission
-    useImperativeHandle(ref, () => ({
-        getGridRefs: () => gridRefsRef.current,
-    }), []);
-    // Cross-container move tracking
-    const [draggedComponentInfo, setDraggedComponentInfo] = useState(null);
-    // Track whether we're currently dragging from palette
-    const isDraggingFromPaletteRef = useRef(false);
-    const [activeTabIndices, setActiveTabIndices] = useState({});
-    useEffect(() => {
-        currentComponentsRef.current = formSchema.components;
-    }, [formSchema.components]);
-    useEffect(() => {
-        let tooltip = new Tooltip({
-            target: '#toolbar [title]',
-            position: 'BottomCenter',
-        });
-        tooltip.appendTo('#Editor-Tooltip');
-        return () => { tooltip.destroy(); };
-    }, [showSplitView, isPreviewOpen, formSchema]);
-    useEffect(() => {
-        const urlParams = new URLSearchParams(window.location.search);
-        const urlMode = urlParams.get('mode');
-        if (urlMode === 'developer' || urlMode === 'simple') {
-            const capitalizedMode = urlMode.charAt(0).toUpperCase() + urlMode.slice(1);
-            setCurrentMode(capitalizedMode);
-        }
-    }, []);
-    // Build validation rules from form schema
-    const buildValidationRules = useCallback(() => {
-        const rules = {};
-        const collectRules = (components) => {
-            components.forEach((component) => {
-                if (component) {
-                    const componentRules = {};
-                    if (component.required && !component.disabled && !component.readOnly) {
-                        componentRules.required = [true, component.validationMessage || `${component.label} is required`];
-                    }
-                    if (component.minLength && !component.disabled && !component.readOnly) {
-                        componentRules.minLength = [component.minLength, `Minimum ${component.minLength} characters required`];
-                    }
-                    if (component.maxLength && !component.disabled && !component.readOnly) {
-                        componentRules.maxLength = [component.maxLength, `Maximum ${component.maxLength} characters allowed`];
-                    }
-                    if (component?.type === 'textbox' && component?.textboxType && !component?.regex && !componentRules.regex && !component.disabled && !component.readOnly) {
-                        if (component.textboxType === 'email') {
-                            componentRules.regex = [VALIDATION_REGEX['EMAIL'], component?.validationMessage || 'Invalid format'];
-                        }
-                        else if (component.textboxType === 'url') {
-                            componentRules.regex = [VALIDATION_REGEX['URL'], component?.validationMessage || 'Invalid format'];
-                        }
-                    }
-                    if (component.regex && !component.disabled && !component.readOnly) {
-                        componentRules.regex = [component.regex, component.validationMessage || 'Invalid format'];
-                    }
-                    if (Object.keys(componentRules).length > 0) {
-                        rules[component.id] = componentRules;
-                    }
-                }
-                // Recursively collect rules from nested components
-                if (component.children) {
-                    collectRules(component.children);
-                }
-                if (component.tableCells) {
-                    component.tableCells.forEach(row => {
-                        row.forEach(cell => collectRules(cell));
-                    });
-                }
-                if (component.tabItems) {
-                    component.tabItems.forEach(tab => {
-                        if (tab.content)
-                            collectRules(tab.content);
-                    });
-                }
-            });
-        };
-        collectRules(formSchema.components);
-        return rules;
-    }, [formSchema]);
-    const validationRules = buildValidationRules();
-    // Helper: Find component by ID recursively in the entire form schema
-    const findComponentById = (componentId) => {
-        const searchInComponents = (components) => {
-            for (const comp of components) {
-                if (comp.id === componentId)
-                    return comp;
-                // Search in panel children
-                if (comp.children) {
-                    const found = searchInComponents(comp.children);
-                    if (found)
-                        return found;
-                }
-                // Search in table cells
-                if (comp.tableCells) {
-                    for (const row of comp.tableCells) {
-                        for (const cell of row) {
-                            const found = searchInComponents(cell);
-                            if (found)
-                                return found;
-                        }
-                    }
-                }
-                // Search in tab items
-                if (comp.tabItems) {
-                    for (const tab of comp.tabItems) {
-                        if (tab.content) {
-                            const found = searchInComponents(tab.content);
-                            if (found)
-                                return found;
-                        }
-                    }
-                }
-            }
-            return null;
-        };
-        return searchInComponents(formSchema.components);
-    };
-    // Helper: check if an id exists inside a component's subtree
-    const isIdInSubtree = (root, idToFind) => {
-        if (!root)
-            return false;
-        const search = (comp) => {
-            if (comp.id === idToFind)
-                return true;
-            if (comp.children) {
-                for (const c of comp.children) {
-                    if (search(c))
-                        return true;
-                }
-            }
-            if (comp.tableCells) {
-                for (const row of comp.tableCells) {
-                    for (const cellArr of row) {
-                        for (const c of cellArr) {
-                            if (search(c))
-                                return true;
-                        }
-                    }
-                }
-            }
-            if (comp.tabItems) {
-                for (const tab of comp.tabItems) {
-                    if (tab.content) {
-                        for (const c of tab.content) {
-                            if (search(c))
-                                return true;
-                        }
-                    }
-                }
-            }
-            return false;
-        };
-        return search(root);
-    };
-    const findDropTarget = useCallback((cursorY, containerSelector, container) => {
-        const fields = container ? container.querySelectorAll(containerSelector) : document.querySelectorAll(containerSelector);
-        if (fields.length === 0)
-            return null;
-        // First, try to find field directly under cursor
-        for (let i = 0; i < fields.length; i++) {
-            const rect = fields[i].getBoundingClientRect();
-            if (cursorY >= rect.top && cursorY < rect.bottom) {
-                const midpoint = rect.top + rect.height / 2;
-                return {
-                    index: i,
-                    position: cursorY < midpoint ? 'before' : 'after'
-                };
-            }
-        }
-        for (let i = 0; i < fields.length - 1; i++) {
-            const currentRect = fields[i].getBoundingClientRect();
-            const nextRect = fields[i + 1].getBoundingClientRect();
-            // If cursor is in the gap between current and next field
-            if (cursorY > currentRect.bottom && cursorY < nextRect.top) {
-                // Drop after current field (before next field)
-                return {
-                    index: i + 1,
-                    position: 'before'
-                };
-            }
-        }
-        // Check if cursor is above first field
-        const firstRect = fields[0].getBoundingClientRect();
-        if (cursorY < firstRect.top) {
-            return {
-                index: 0,
-                position: 'before'
-            };
-        }
-        // Check if cursor is below last field
-        const lastRect = fields[fields.length - 1].getBoundingClientRect();
-        if (cursorY > lastRect.bottom) {
-            return {
-                index: fields.length - 1,
-                position: 'after'
-            };
-        }
-        return null;
-    }, []);
-    // Reorder drag handlers
-    const isValidTarget = (element) => {
-        return element && element.classList.contains('form-field-draggable');
-    };
-    const helper = (args) => {
-        const formField = (args.sender?.target).closest('.form-field-draggable');
-        if (!formField || !isValidTarget(formField)) {
-            return null;
-        }
-        const index = parseInt(formField.getAttribute('data-index') || '0', 10);
-        draggedItemIndex.current = index;
-        setShowClone(true);
-        return cloneHelperRef.current;
-    };
-    const dragStart = (e) => {
-        if (cloneHelperRef.current) {
-            cloneHelperRef.current.style.display = 'flex';
-        }
-        // CAPTURE INITIAL POSITION from mouse event
-        if (e && (e.event.clientY !== undefined || e.event.touches[0].clientY !== undefined)) {
-            initialDragYRef.current = e.event.clientY || e.event.touches[0].clientY;
-            currentDragYRef.current = e.event.clientY || e.event.touches[0].clientY;
-        }
-        // Capture what's being dragged from root
-        if (draggedItemIndex.current !== null) {
-            const component = currentComponentsRef.current[draggedItemIndex.current];
-            setDraggedComponentInfo({
-                id: component.id,
-                containerId: 'root'
-            });
-            // Add class to the actual DOM element being dragged
-            const draggedElement = document.querySelector(`[data-component-id="${component.id}"]`);
-            if (draggedElement) {
-                draggedElement.classList.add('is-being-dragged');
-            }
-            // Trigger onFieldDragStarted event
-            if (onFieldDragStarted) {
-                onFieldDragStarted({
-                    componentName: component.name,
-                    componentType: component.type,
-                    sourceContainerId: 'root',
-                    isNested: false
-                });
-            }
-        }
-        // NOT palette drag - it's internal reordering
-        isDraggingFromPaletteRef.current = false;
-    };
-    const drag = (e) => {
-        if (currentComponentsRef.current.length > 1) {
-            setIsReordering(true);
-            reOrdering.current = true;
-        }
-        if (cloneHelperRef.current) {
-            cloneHelperRef.current.style.opacity = '0.97';
-            // DETERMINE DIRECTION and add appropriate class
-            if (e && (e.event.clientY !== undefined || e.event.touches[0].clientY !== undefined) && initialDragYRef.current !== null) {
-                const currentY = e.event.clientY || e.event.touches[0].clientY;
-                const initialY = initialDragYRef.current;
-                if (e.event?.touches?.length > 0) {
-                    const target = document.elementFromPoint(e.event.touches[0].clientX, e.event.touches[0].clientY);
-                    const wrapper = target?.closest('.form-field-wrapper');
-                    document.querySelectorAll('.form-field-wrapper.touch-hovered').forEach(el => {
-                        if (el !== wrapper)
-                            el.classList.remove('touch-hovered');
-                    });
-                    if (wrapper && !wrapper.classList.contains('touch-hovered')) {
-                        wrapper.classList.add('touch-hovered');
-                    }
-                }
-                // ALSO apply direction class to form-preview-area for styling hover targets
-                const formPreviewArea = document.querySelector('.form-preview-area');
-                if (formPreviewArea) {
-                    formPreviewArea.classList.remove('drag-moving-up', 'drag-moving-down');
-                    if (currentY < initialY) {
-                        formPreviewArea.classList.add('drag-moving-up');
-                    }
-                    else if (currentY > initialY) {
-                        formPreviewArea.classList.add('drag-moving-down');
-                    }
-                }
-                // UPDATE current position ref for tracking
-                currentDragYRef.current = currentY;
-            }
-        }
-    };
-    const dragStop = (args) => {
-        // Clear palette drag flag
-        isDraggingFromPaletteRef.current = false;
-        setIsReordering(false);
-        reOrdering.current = false;
-        setIsDraggingOver(false);
-        setDraggingOverPanel(null);
-        setShowClone(false);
-        // RESET drag position tracking on stop
-        initialDragYRef.current = null;
-        currentDragYRef.current = null;
-        const formPreviewArea = document.querySelector('.form-preview-area');
-        if (formPreviewArea) {
-            formPreviewArea.classList.remove('drag-moving-up', 'drag-moving-down');
-        }
-        if (draggedItemIndex.current === null)
-            return;
-        const component = currentComponentsRef.current[draggedItemIndex.current];
-        const target = args.target;
-        // Remove class from the dragged element
-        const draggedElement = document.querySelector(`[data-component-id="${component.id}"]`);
-        if (draggedElement) {
-            draggedElement.classList.remove('is-being-dragged');
-        }
-        // Check if dropped on a panel drop zone (cross-container move)
-        const panelDropZone = target?.closest('.panel-drop-zone');
-        if (panelDropZone) {
-            const panelId = panelDropZone.getAttribute('data-panel-id');
-            if (panelId && component) {
-                // Prevent dropping a component into itself or its own descendant
-                if (panelId === component.id || isIdInSubtree(component, panelId)) {
-                    draggedItemIndex.current = null;
-                    setDraggedComponentInfo(null);
-                    isDraggingFromPaletteRef.current = false;
-                    clearNestedDropTargetVisuals();
-                    return;
-                }
-                // Move from root to panel - DELETE FIRST, then ADD
-                onDelete(component.id, true);
-                setTimeout(() => {
-                    onNestedDrop(panelId, component, undefined, panelId, nestedDropTargetIndexRef.current, nestedDropPositionRef.current);
-                }, 0);
-                isDraggingFromPaletteRef.current = false;
-                clearNestedDropTargetVisuals();
-                draggedItemIndex.current = null;
-                setDraggedComponentInfo(null);
-                if (onFieldDropped) {
-                    onFieldDropped({
-                        componentName: component.name,
-                        componentType: component.type,
-                        sourceContainerId: 'root',
-                        targetContainerId: panelId,
-                        isReordered: false
-                    });
-                }
-                return;
-            }
-        }
-        // Check if dropped on a tab drop zone (cross-container move)
-        const tabDropZone = target?.closest('.tab-drop-zone');
-        if (tabDropZone) {
-            const tabContainerId = tabDropZone.getAttribute('data-container-id');
-            const tabIndex = parseInt(tabDropZone.getAttribute('data-tab-index') || '0', 10);
-            if (tabContainerId && component) {
-                // Prevent dropping into same component or into its descendant container
-                if (tabContainerId === component.id || isIdInSubtree(component, tabContainerId)) {
-                    draggedItemIndex.current = null;
-                    setDraggedComponentInfo(null);
-                    isDraggingFromPaletteRef.current = false;
-                    clearNestedDropTargetVisuals();
-                    return;
-                }
-                // Move from root to tab
-                onDelete(component.id, true);
-                setTimeout(() => {
-                    onNestedDrop(tabContainerId, component, { row: 0, col: 0, tabIndex }, tabContainerId, nestedDropTargetIndexRef.current, nestedDropPositionRef.current);
-                }, 0);
-                isDraggingFromPaletteRef.current = false;
-                clearNestedDropTargetVisuals();
-                draggedItemIndex.current = null;
-                setDraggedComponentInfo(null);
-                if (onFieldDropped) {
-                    onFieldDropped({
-                        componentName: component.name,
-                        componentType: component.type,
-                        sourceContainerId: 'root',
-                        targetContainerId: tabContainerId,
-                        isReordered: false
-                    });
-                }
-                return;
-            }
-        }
-        // Check if dropped on a table cell (cross-container move)
-        const tableCell = target?.closest('.table-cell');
-        if (tableCell) {
-            const cellContainerId = tableCell.getAttribute('data-container-id');
-            const cellRow = parseInt(tableCell.getAttribute('data-cell-row') || '0', 10);
-            const cellCol = parseInt(tableCell.getAttribute('data-cell-col') || '0', 10);
-            if (cellContainerId && component) {
-                // Prevent dropping into same component or into its descendant container
-                if (cellContainerId === component.id || isIdInSubtree(component, cellContainerId)) {
-                    draggedItemIndex.current = null;
-                    setDraggedComponentInfo(null);
-                    isDraggingFromPaletteRef.current = false;
-                    clearNestedDropTargetVisuals();
-                    return;
-                }
-                // Move from root to table cell
-                onDelete(component.id, true);
-                setTimeout(() => {
-                    onNestedDrop(cellContainerId, component, { row: cellRow, col: cellCol }, cellContainerId, nestedDropTargetIndexRef.current, nestedDropPositionRef.current);
-                }, 0);
-                isDraggingFromPaletteRef.current = false;
-                clearNestedDropTargetVisuals();
-                draggedItemIndex.current = null;
-                setDraggedComponentInfo(null);
-                if (onFieldDropped) {
-                    onFieldDropped({
-                        componentName: component.name,
-                        componentType: component.type,
-                        sourceContainerId: 'root',
-                        targetContainerId: cellContainerId,
-                        isReordered: false
-                    });
-                }
-                return;
-            }
-        }
-        // Same container reorder (existing logic)
-        const targetElement = args.target?.closest('.form-field-draggable');
-        if (targetElement) {
-            const targetIndex = parseInt(targetElement.getAttribute('data-index') || '0', 10);
-            if (targetIndex !== -1 && targetIndex !== draggedItemIndex.current) {
-                const newComponents = [...currentComponentsRef.current];
-                const draggedComponent = newComponents[draggedItemIndex.current];
-                newComponents.splice(draggedItemIndex.current, 1);
-                newComponents.splice(targetIndex, 0, draggedComponent);
-                onReorder(newComponents);
-                // Trigger onFieldDropped event for reordering
-                if (onFieldDropped) {
-                    onFieldDropped({
-                        componentName: draggedComponent.name,
-                        componentType: draggedComponent.type,
-                        sourceContainerId: 'root',
-                        targetContainerId: 'root',
-                        isReordered: true
-                    });
-                    isDraggingFromPaletteRef.current = false;
-                    clearDropTargetVisuals();
-                    clearNestedDropTargetVisuals();
-                }
-            }
-        }
-        draggedItemIndex.current = null;
-        isDraggingFromPaletteRef.current = false;
-        clearDropTargetVisuals();
-        clearNestedDropTargetVisuals();
-        setDraggedComponentInfo(null); // Clear tracking
-    };
-    const handleDragOver = (args) => {
-        if (isReordering || isNestedReordering || reOrdering.current) {
-            return;
-        }
-        setIsDraggingOver(true);
-        // Check if this is a palette drag by looking for palette clone
-        const paletteClone = document.querySelector('.palette-item-clone');
-        if (paletteClone) {
-            // Activate continuous position tracking for palette drag
-            isDraggingFromPaletteRef.current = true;
-        }
-        // DETECT DROP POSITION during palette drag - CONTINUOUSLY based on current mouse position
-        if (args && args.event && args.event.clientY !== undefined && !reOrdering.current) {
-            const result = findDropTarget(args.event.clientY, '.form-field-draggable');
-            if (result) {
-                // Update refs immediately
-                dropTargetIndexRef.current = result.index;
-                dropPositionRef.current = result.position;
-                // Immediately apply visual classes to indicate drop position
-                updateDropTargetVisuals(result);
-            }
-            else {
-                // Clear drop target if not over any field
-                dropTargetIndexRef.current = null;
-                dropPositionRef.current = null;
-                clearDropTargetVisuals();
-            }
-        }
-        // Trigger onFieldDraggingOver event
-        if (onFieldDraggingOver) {
-            onFieldDraggingOver({
-                isNested: false
-            });
-        }
-    };
-    // Helper to apply drop target visual feedback
-    const updateDropTargetVisuals = (target) => {
-        const fields = document.querySelectorAll('.form-field-draggable');
-        fields.forEach((field, idx) => {
-            field.classList.remove('drop-target-before', 'drop-target-after');
-            if (idx === target.index) {
-                field.classList.add(`drop-target-${target.position}`);
-            }
-        });
-    };
-    // Helper to clear drop target visual feedback
-    const clearDropTargetVisuals = () => {
-        const fields = document.querySelectorAll('.form-field-draggable');
-        fields.forEach(field => {
-            field.classList.remove('drop-target-before', 'drop-target-after');
-        });
-    };
-    const handleDragLeave = () => {
-        // Stop continuous tracking when leaving drop zone
-        isDraggingFromPaletteRef.current = false;
-        setIsDraggingOver(false);
-        // Clear drop target visual feedback
-        dropTargetIndexRef.current = null;
-        dropPositionRef.current = null;
-        clearDropTargetVisuals();
-    };
-    const handleDrop = () => {
-        // Clear palette drag flag
-        isDraggingFromPaletteRef.current = false;
-        setIsDraggingOver(false);
-        // Clear drop target visual feedback
-        clearDropTargetVisuals();
-        // Check if this is an internal move from panel to root
-        if (draggedComponentInfo && draggedComponentInfo.containerId !== 'root') {
-            const component = findComponentById(draggedComponentInfo.id);
-            if (component) {
-                onDrop(component);
-                onDelete(component.id, true);
-                setDraggedComponentInfo(null);
-                return;
-            }
-        }
-        // Check for template drop first (data-template-json)
-        let cloneElement = document.querySelector('.palette-item-clone[data-template-json]');
-        if (cloneElement) {
-            const templateData = cloneElement.getAttribute('data-template-json');
-            if (templateData) {
-                try {
-                    const template = JSON.parse(templateData);
-                    // Extract template components using the helper from App
-                    const templateComponents = extractTemplateComponents(template);
-                    // Add each template component to the form using the normal drop handler
-                    if (templateComponents && templateComponents.length > 0) {
-                        templateComponents.forEach((component) => {
-                            onDrop(component, dropTargetIndexRef.current, dropPositionRef.current);
-                            if (dropTargetIndexRef.current !== null && dropPositionRef.current) {
-                                dropTargetIndexRef.current = dropTargetIndexRef.current + 1;
-                            }
-                        });
-                    }
-                    else {
-                        console.warn(`Template "${template.title}" contains no components`);
-                    }
-                    return;
-                }
-                catch (error) {
-                    console.error('Error processing template drop:', error);
-                    return;
-                }
-            }
-        }
-        // Fall back to regular component drop (data-component-json)
-        cloneElement = document.querySelector('.palette-item-clone[data-component-json]');
-        let componentData;
-        if (cloneElement) {
-            componentData = cloneElement.getAttribute('data-component-json');
-        }
-        if (!componentData)
-            return;
-        const paletteComponent = JSON.parse(componentData);
-        const newComponent = {
-            id: generateId(paletteComponent.type),
-            type: paletteComponent.type,
-            label: paletteComponent.label,
-            name: generateName(paletteComponent.type)
-        };
-        // Pass drop position info to onDrop
-        onDrop(newComponent, dropTargetIndexRef.current, dropPositionRef.current);
-        // Trigger onFieldDropped event
-        if (onFieldDropped) {
-            onFieldDropped({
-                componentName: newComponent.name,
-                componentType: newComponent.type,
-                sourceContainerId: draggedComponentInfo?.containerId || 'palette',
-                targetContainerId: 'root',
-                isReordered: false
-            });
-        }
-        // Clear drop position refs after drop
-        dropTargetIndexRef.current = null;
-        dropPositionRef.current = null;
-    };
-    const findFilteredClosest = (target, selector, blockedSelectors = []) => {
-        let el = target;
-        while (el) {
-            if (blockedSelectors.some(cls => el.classList?.contains(cls)) &&
-                !el.matches(selector)) {
-                return null;
-            }
-            if (el.matches?.(selector)) {
-                return el;
-            }
-            el = el.parentElement;
-        }
-        return null;
-    };
-    const handleNestedDrop = (parentId, cellInfo, parentPath) => {
-        if (isProcessingNestedDropRef.current) {
-            isDraggingFromPaletteRef.current = false;
-            clearDropTargetVisuals();
-            clearNestedDropTargetVisuals();
-            return; // Already processing, prevent duplicate
-        }
-        isProcessingNestedDropRef.current = true;
-        setTimeout(() => {
-            isProcessingNestedDropRef.current = false;
-        }, 50);
-        setDraggingOverPanel(null);
-        setIsDraggingOver(false);
-        // Clear palette drag flag
-        isDraggingFromPaletteRef.current = false;
-        // Clear drop target visual feedback
-        clearNestedDropTargetVisuals();
-        // Clear nested drop target visual feedback
-        ['.panel-child-field-draggable', '.tab-child-field-draggable', '.table-cell-child-draggable'].forEach(selector => {
-            const fields = document.querySelectorAll(selector);
-            fields.forEach(field => {
-                field.classList.remove('drop-target-before', 'drop-target-after');
-            });
-        });
-        // Check if this is an internal move from root/different panel to this panel
-        if (draggedComponentInfo && draggedComponentInfo.containerId !== parentId) {
-            const component = findComponentById(draggedComponentInfo.id);
-            if (component) {
-                onNestedDrop(parentId, component, cellInfo, parentPath);
-                onDelete(component.id, true);
-                setDraggedComponentInfo(null);
-                return;
-            }
-        }
-        // Check for template drop first (data-template-json)
-        let cloneElement = document.querySelector('.palette-item-clone[data-template-json]');
-        if (cloneElement) {
-            const templateData = cloneElement.getAttribute('data-template-json');
-            if (templateData) {
-                try {
-                    const template = JSON.parse(templateData);
-                    // Extract template components using the helper from App
-                    const templateComponents = extractTemplateComponents(template);
-                    // Add each template component to the nested container using the normal handler
-                    if (templateComponents && templateComponents.length > 0) {
-                        templateComponents.forEach((component) => {
-                            onNestedDrop(parentId, component, cellInfo, parentPath, nestedDropTargetIndexRef.current, nestedDropPositionRef.current);
-                            if (nestedDropTargetIndexRef.current !== null && nestedDropPositionRef.current) {
-                                nestedDropTargetIndexRef.current = nestedDropTargetIndexRef.current + 1;
-                            }
-                        });
-                    }
-                    else {
-                        console.warn(`Template "${template.title}" contains no components`);
-                    }
-                    return;
-                }
-                catch (error) {
-                    console.error('Error processing nested template drop:', error);
-                    return;
-                }
-            }
-        }
-        // Fall back to regular component drop (data-component-json)
-        cloneElement = document.querySelector('.palette-item-clone[data-component-json]');
-        let componentData;
-        if (cloneElement) {
-            componentData = cloneElement.getAttribute('data-component-json');
-        }
-        if (!componentData)
-            return;
-        const paletteComponent = JSON.parse(componentData);
-        const newComponent = {
-            id: generateId(paletteComponent.type),
-            type: paletteComponent.type,
-            label: paletteComponent.label,
-            name: generateName(paletteComponent.type)
-        };
-        // Call the parent handler to update nested component
-        onNestedDrop(parentId, newComponent, cellInfo, parentPath, nestedDropTargetIndexRef.current, nestedDropPositionRef.current);
-        // Trigger onFieldDropped event
-        if (onFieldDropped) {
-            onFieldDropped({
-                componentName: newComponent.name,
-                componentType: newComponent.type,
-                sourceContainerId: draggedComponentInfo?.containerId || 'palette',
-                targetContainerId: parentId,
-                isReordered: false
-            });
-        }
-    };
-    const handleNestedDragOver = (args, panelId) => {
-        // Don't highlight nested drop zones during reordering
-        setDraggingOverPanel(panelId);
-        // Check if this is a palette drag by looking for palette clone
-        const paletteClone = document.querySelector('.palette-item-clone');
-        if (paletteClone) {
-            isDraggingFromPaletteRef.current = true;
-        }
-        // DETECT DROP POSITION during palette drag - CONTINUOUSLY based on current mouse position
-        if (args && args.event && args.event.clientY !== undefined && !nestedReOrdering.current) {
-            const target = document.elementFromPoint(args.event.clientX, args.event.clientY);
-            const isTableCell = target?.classList.contains('table-cell') || null;
-            const isTabDropZone = target?.classList.contains('tab-drop-zone') || null;
-            const isPanelDropZone = target?.classList.contains('panel-drop-zone') || null;
-            let tableCell = target?.classList.contains('table-cell') ? target : findFilteredClosest(target, '.table-cell', ['panel-drop-zone', 'tab-drop-zone']);
-            let tabDropZone = target?.classList.contains('tab-drop-zone') ? target : findFilteredClosest(target, '.tab-drop-zone', ['panel-drop-zone']);
-            let panelDropZone = target?.classList.contains('panel-drop-zone') ? target : findFilteredClosest(target, '.panel-drop-zone', ['tab-drop-zone']);
-            if (isTableCell) {
-                tabDropZone = null;
-                panelDropZone = null;
-            }
-            if (isTabDropZone) {
-                tableCell = null;
-                panelDropZone = null;
-            }
-            if (isPanelDropZone) {
-                tableCell = null;
-                tabDropZone = null;
-            }
-            let containerSelector = '.form-field-draggable'; // default to root
-            if (tableCell) {
-                // Mouse is over a table cell
-                containerSelector = '.table-cell-child-draggable';
-            }
-            else if (tabDropZone) {
-                // Mouse is over a tab
-                containerSelector = '.tab-child-field-draggable';
-            }
-            else if (panelDropZone) {
-                // Mouse is over a panel/card
-                containerSelector = '.panel-child-field-draggable';
-            }
-            const result = findDropTarget(args.event.clientY, containerSelector, tableCell || tabDropZone || panelDropZone || undefined);
-            if (result) {
-                // Update refs immediately
-                nestedDropTargetIndexRef.current = result.index;
-                nestedDropPositionRef.current = result.position;
-                // Immediately apply visual classes to indicate drop position
-                updateNestedDropTargetVisuals(result, containerSelector);
-            }
-            else {
-                // Clear drop target if not over any field
-                nestedDropTargetIndexRef.current = null;
-                nestedDropPositionRef.current = null;
-                clearNestedDropTargetVisuals();
-            }
-        }
-        // Trigger onFieldDraggingOver event
-        if (onFieldDraggingOver) {
-            onFieldDraggingOver({
-                isNested: true
-            });
-        }
-    };
-    const updateNestedDropTargetVisuals = (target, containerSelector, container) => {
-        const fields = container ? container.querySelectorAll(containerSelector) : document.querySelectorAll(containerSelector);
-        fields.forEach((field, idx) => {
-            field.classList.remove('drop-target-before', 'drop-target-after');
-            if (idx === target.index) {
-                field.classList.add(`drop-target-${target.position}`);
-            }
-        });
-    };
-    // Helper to clear nested drop target visual feedback
-    const clearNestedDropTargetVisuals = () => {
-        ['.panel-child-field-draggable', '.tab-child-field-draggable', '.table-cell-child-draggable'].forEach(selector => {
-            const fields = document.querySelectorAll(selector);
-            fields.forEach(field => {
-                field.classList.remove('drop-target-before', 'drop-target-after');
-            });
-        });
-    };
-    useEffect(() => {
-        // Extract pointer coordinates from either a MouseEvent or a TouchEvent.
-        // Touch events store their coordinates in `touches[0]`, not on the event itself.
-        const getPoint = (e) => {
-            if ('touches' in e) {
-                // touchend has changedTouches; touchmove/touchstart have touches
-                const touch = e.touches[0] || e.changedTouches?.[0];
-                if (!touch) {
-                    return null;
-                }
-                return { clientX: touch.clientX, clientY: touch.clientY };
-            }
-            return { clientX: e.clientX, clientY: e.clientY };
-        };
-        const handleGlobalPointerMove = (e) => {
-            if (!isDraggingFromPaletteRef.current) {
-                return;
-            }
-            const point = getPoint(e);
-            if (!point) {
-                return;
-            }
-            // DYNAMICALLY DETECT which container the pointer is over
-            const target = document.elementFromPoint(point.clientX, point.clientY);
-            // Check for nested containers first (most specific to least specific)
-            const isTableCell = target?.classList.contains('table-cell') || null;
-            const isTabDropZone = target?.classList.contains('tab-drop-zone') || null;
-            const isPanelDropZone = target?.classList.contains('panel-drop-zone') || null;
-            let tableCell = target?.classList.contains('table-cell') ? target : findFilteredClosest(target, '.table-cell', ['panel-drop-zone', 'tab-drop-zone']);
-            let tabDropZone = target?.classList.contains('tab-drop-zone') ? target : findFilteredClosest(target, '.tab-drop-zone', ['panel-drop-zone']);
-            let panelDropZone = target?.classList.contains('panel-drop-zone') ? target : findFilteredClosest(target, '.panel-drop-zone', ['tab-drop-zone']);
-            if (isTableCell) {
-                tabDropZone = null;
-                panelDropZone = null;
-            }
-            if (isTabDropZone) {
-                tableCell = null;
-                panelDropZone = null;
-            }
-            if (isPanelDropZone) {
-                tableCell = null;
-                tabDropZone = null;
-            }
-            let containerSelector = '.form-field-draggable'; // default to root
-            let isNested = false;
-            if (tableCell) {
-                // Mouse is over a table cell
-                containerSelector = '.table-cell-child-draggable';
-                isNested = true;
-            }
-            else if (tabDropZone) {
-                // Mouse is over a tab
-                containerSelector = '.tab-child-field-draggable';
-                isNested = true;
-            }
-            else if (panelDropZone) {
-                // Mouse is over a panel/card
-                containerSelector = '.panel-child-field-draggable';
-                isNested = true;
-            }
-            // Find drop target with the correct selector
-            const result = findDropTarget(point.clientY, containerSelector, tableCell || tabDropZone || panelDropZone || undefined);
-            if (result) {
-                if (isNested) {
-                    // Update nested refs
-                    clearNestedDropTargetVisuals();
-                    nestedDropTargetIndexRef.current = result.index;
-                    nestedDropPositionRef.current = result.position;
-                    updateNestedDropTargetVisuals(result, containerSelector, tableCell || tabDropZone || panelDropZone || undefined);
-                    // Clear root refs
-                    dropTargetIndexRef.current = null;
-                    dropPositionRef.current = null;
-                    clearDropTargetVisuals();
-                }
-                else {
-                    // Update root refs
-                    clearDropTargetVisuals();
-                    dropTargetIndexRef.current = result.index;
-                    dropPositionRef.current = result.position;
-                    updateDropTargetVisuals(result);
-                    // Clear nested refs
-                    nestedDropTargetIndexRef.current = null;
-                    nestedDropPositionRef.current = null;
-                    clearNestedDropTargetVisuals();
-                }
-            }
-            else {
-                // Clear all if not over any field
-                dropTargetIndexRef.current = null;
-                dropPositionRef.current = null;
-                nestedDropTargetIndexRef.current = null;
-                nestedDropPositionRef.current = null;
-                clearDropTargetVisuals();
-                clearNestedDropTargetVisuals();
-            }
-        };
-        document.addEventListener('mousemove', handleGlobalPointerMove);
-        document.addEventListener('touchmove', handleGlobalPointerMove, { passive: true });
-        return () => {
-            document.removeEventListener('mousemove', handleGlobalPointerMove);
-            document.removeEventListener('touchmove', handleGlobalPointerMove);
-        };
-    }, [isReordering, isNestedReordering, reOrdering.current, findDropTarget, updateNestedDropTargetVisuals, clearNestedDropTargetVisuals]);
-    const handleNestedDragLeave = () => {
-        setDraggingOverPanel(null);
-        isDraggingFromPaletteRef.current = false;
-        clearDropTargetVisuals();
-        clearNestedDropTargetVisuals();
-        // Clear drop target visual feedback
-        nestedDropTargetIndexRef.current = null;
-        nestedDropPositionRef.current = null;
-    };
-    // Nested reorder handlers
-    const isValidNestedTarget = (element, containerClass) => {
-        return element && element.classList.contains(containerClass);
-    };
-    const nestedHelper = (args, containerClass) => {
-        const nestedField = (args.sender?.target).closest(`.${containerClass}`);
-        if (!nestedField || !isValidNestedTarget(nestedField, containerClass)) {
-            return null;
-        }
-        const index = parseInt(nestedField.getAttribute('data-nested-index') || '0', 10);
-        nestedDraggedIndex.current = index;
-        return nestedCloneHelperRef.current;
-    };
-    const nestedDragStart = (e) => {
-        if (nestedCloneHelperRef.current) {
-            nestedCloneHelperRef.current.style.display = 'flex';
-        }
-        // CAPTURE INITIAL POSITION from mouse event
-        if (e && (e.event.clientY !== undefined || e.event.touches[0].clientY !== undefined)) {
-            nestedInitialDragYRef.current = e.event.clientY || e.event.touches[0].clientY;
-            nestedCurrentDragYRef.current = e.event.clientY || e.event.touches[0].clientY;
-        }
-        // Capture what's being dragged from nested container
-        if (nestedDraggedIndex.current !== null && nestedComponentsRef.current[nestedDraggedIndex.current]) {
-            const component = nestedComponentsRef.current[nestedDraggedIndex.current];
-            setDraggedComponentInfo({
-                id: component.id,
-                containerId: nestedContainerIdRef.current || ''
-            });
-            // Add class to the actual DOM element being dragged
-            const draggedElement = document.querySelector(`[data-component-id="${component.id}"]`);
-            if (draggedElement) {
-                draggedElement.classList.add('is-being-dragged');
-            }
-            // Trigger onFieldDragStarted event
-            if (onFieldDragStarted) {
-                onFieldDragStarted({
-                    componentName: component.name,
-                    componentType: component.type,
-                    sourceContainerId: nestedContainerIdRef.current || '',
-                    isNested: true
-                });
-            }
-        }
-    };
-    const nestedDrag = (e) => {
-        if (nestedComponentsRef.current.length > 1) {
-            setIsNestedReordering(true);
-            nestedReOrdering.current = true;
-        }
-        if (nestedCloneHelperRef.current) {
-            nestedCloneHelperRef.current.style.opacity = '0.97';
-            // DETERMINE DIRECTION and add appropriate class
-            if (e && (e.event.clientY !== undefined || e.event.touches[0].clientY !== undefined) && nestedInitialDragYRef.current !== null) {
-                const currentY = e.event.clientY || e.event.touches[0].clientY;
-                const initialY = nestedInitialDragYRef.current;
-                if (e.event?.touches?.length > 0) {
-                    const target = document.elementFromPoint(e.event.touches[0].clientX, e.event.touches[0].clientY);
-                    const wrapper = target?.closest('.form-field-wrapper');
-                    document.querySelectorAll('.form-field-wrapper.touch-hovered').forEach(el => {
-                        if (el !== wrapper)
-                            el.classList.remove('touch-hovered');
-                    });
-                    if (wrapper && !wrapper.classList.contains('touch-hovered')) {
-                        wrapper.classList.add('touch-hovered');
-                    }
-                }
-                // ALSO apply direction class to form-preview-area for styling hover targets
-                const formPreviewArea = document.querySelector('.form-preview-area');
-                if (formPreviewArea) {
-                    formPreviewArea.classList.remove('drag-moving-up', 'drag-moving-down');
-                    if (currentY < initialY) {
-                        formPreviewArea.classList.add('drag-moving-up');
-                    }
-                    else if (currentY > initialY) {
-                        formPreviewArea.classList.add('drag-moving-down');
-                    }
-                }
-                // UPDATE current position ref for tracking
-                nestedCurrentDragYRef.current = currentY;
-            }
-        }
-    };
-    const nestedDragStop = (args, containerClass) => {
-        setIsNestedReordering(false);
-        nestedReOrdering.current = false;
-        setIsDraggingOver(false);
-        setDraggingOverPanel(null);
-        setActiveNestedContainer(null);
-        // RESET nested drag position tracking on stop
-        nestedInitialDragYRef.current = null;
-        nestedCurrentDragYRef.current = null;
-        // Remove direction classes from nested clone
-        if (nestedCloneHelperRef.current) {
-            nestedCloneHelperRef.current.classList.remove('moving-up', 'moving-down');
-            nestedCloneHelperRef.current.style.display = 'none';
-        }
-        if (nestedDraggedIndex.current === null)
-            return;
-        const component = nestedComponentsRef.current[nestedDraggedIndex.current];
-        const sourceContainerId = nestedContainerIdRef.current;
-        const target = args.target;
-        // Remove class from the dragged element
-        if (component) {
-            const draggedElement = document.querySelector(`[data-component-id="${component.id}"]`);
-            if (draggedElement) {
-                draggedElement.classList.remove('is-being-dragged');
-            }
-        }
-        // Check if dropped on root (cross-container move to root)
-        const formPreviewArea = target?.closest('.form-preview-area');
-        const isOverAnyNested = target?.closest('.panel-drop-zone, .tab-drop-zone, .table-cell');
-        const closestDropZone = target?.closest('.panel-drop-zone, .tab-drop-zone, .table-cell');
-        const closestDropZoneId = closestDropZone?.getAttribute('data-panel-id') ||
-            closestDropZone?.getAttribute('data-container-id') ||
-            null;
-        // Extract target cell/tab info from closest drop zone
-        const targetCellRow = closestDropZone?.classList.contains('table-cell')
-            ? parseInt(closestDropZone.getAttribute('data-cell-row') || '0', 10)
-            : undefined;
-        const targetCellCol = closestDropZone?.classList.contains('table-cell')
-            ? parseInt(closestDropZone.getAttribute('data-cell-col') || '0', 10)
-            : undefined;
-        const targetTabIndex = closestDropZone?.classList.contains('tab-drop-zone')
-            ? parseInt(closestDropZone.getAttribute('data-tab-index') || '0', 10)
-            : undefined;
-        // Determine if dragging within same parent container
-        const isSameParent = nestedCellInfoRef.current?.row !== undefined && nestedCellInfoRef.current?.col !== undefined
-            ? // Source is from a table cell - check if target is the same cell
-                (sourceContainerId === closestDropZoneId &&
-                    nestedCellInfoRef.current?.row === targetCellRow &&
-                    nestedCellInfoRef.current?.col === targetCellCol)
-            : nestedCellInfoRef.current?.tabIndex !== undefined
-                ? // Source is from a tab - check if target is the same tab
-                    (sourceContainerId === closestDropZoneId &&
-                        nestedCellInfoRef.current?.tabIndex === targetTabIndex)
-                : // Source is from a panel - check if target is the same panel
-                    sourceContainerId === closestDropZoneId;
-        if (formPreviewArea && !isOverAnyNested && component) {
-            // DELETE FIRST, then ADD
-            onDelete(component.id, true);
-            setTimeout(() => {
-                onDrop(component, dropTargetIndexRef.current, dropPositionRef.current);
-            }, 10);
-            isDraggingFromPaletteRef.current = false;
-            clearDropTargetVisuals();
-            nestedDraggedIndex.current = null;
-            setDraggedComponentInfo(null);
-            if (onFieldDropped) {
-                onFieldDropped({
-                    componentName: component.name,
-                    componentType: component.type,
-                    sourceContainerId: sourceContainerId || 'root',
-                    targetContainerId: 'root',
-                    isReordered: false
-                });
-            }
-            return;
-        }
-        // Check if dropped on a different panel (cross-container move)
-        const targetPanelDropZone = target?.closest('.panel-drop-zone');
-        if (targetPanelDropZone && !isSameParent) {
-            const targetPanelId = targetPanelDropZone.getAttribute('data-panel-id');
-            if (targetPanelId && component) {
-                // Prevent dropping into itself or its own descendant
-                if (targetPanelId === component.id || isIdInSubtree(component, targetPanelId)) {
-                    nestedDraggedIndex.current = null;
-                    setDraggedComponentInfo(null);
-                    isDraggingFromPaletteRef.current = false;
-                    clearNestedDropTargetVisuals();
-                    return;
-                }
-                if (targetPanelId !== sourceContainerId && (sourceContainerId?.includes('panel') || sourceContainerId?.includes('card') || closestDropZoneId?.includes('panel') || closestDropZoneId?.includes('card'))) {
-                    // Move to different panel or card
-                    onDelete(component.id, true);
-                    setTimeout(() => {
-                        onNestedDrop(targetPanelId, component, undefined, targetPanelId, nestedDropTargetIndexRef.current, nestedDropPositionRef.current);
-                    }, 0);
-                    isDraggingFromPaletteRef.current = false;
-                    clearNestedDropTargetVisuals();
-                    nestedDraggedIndex.current = null;
-                    setDraggedComponentInfo(null);
-                    if (onFieldDropped) {
-                        onFieldDropped({
-                            componentName: component.name,
-                            componentType: component.type,
-                            sourceContainerId: sourceContainerId || 'root',
-                            targetContainerId: targetPanelId,
-                            isReordered: false
-                        });
-                    }
-                    return;
-                }
-            }
-        }
-        // Check if dropped on a tab drop zone (cross-container move)
-        const targetTabDropZone = target?.closest('.tab-drop-zone');
-        if (targetTabDropZone && !isSameParent) {
-            const targetTabContainerId = targetTabDropZone.getAttribute('data-container-id');
-            const targetTabIndex = parseInt(targetTabDropZone.getAttribute('data-tab-index') || '0', 10);
-            // Check if different container or different tab
-            const isSameTabContainer = targetTabContainerId === sourceContainerId &&
-                nestedCellInfoRef.current?.tabIndex === targetTabIndex;
-            if (targetTabContainerId && component) {
-                // Prevent dropping into itself or its own descendant
-                if (targetTabContainerId === component.id || isIdInSubtree(component, targetTabContainerId)) {
-                    nestedDraggedIndex.current = null;
-                    setDraggedComponentInfo(null);
-                    isDraggingFromPaletteRef.current = false;
-                    clearNestedDropTargetVisuals();
-                    return;
-                }
-                if (!isSameTabContainer && (sourceContainerId?.includes('tabs') || sourceContainerId?.includes('card') || closestDropZoneId?.includes('tabs') || closestDropZoneId?.includes('card'))) {
-                    // Move to different tab or card
-                    onDelete(component.id, true);
-                    setTimeout(() => {
-                        onNestedDrop(targetTabContainerId, component, { row: 0, col: 0, tabIndex: targetTabIndex }, targetTabContainerId, nestedDropTargetIndexRef.current, nestedDropPositionRef.current);
-                    }, 0);
-                    isDraggingFromPaletteRef.current = false;
-                    clearNestedDropTargetVisuals();
-                    nestedDraggedIndex.current = null;
-                    setDraggedComponentInfo(null);
-                    if (onFieldDropped) {
-                        onFieldDropped({
-                            componentName: component.name,
-                            componentType: component.type,
-                            sourceContainerId: sourceContainerId || 'root',
-                            targetContainerId: targetTabContainerId,
-                            isReordered: false
-                        });
-                    }
-                    return;
-                }
-            }
-        }
-        // Check if dropped on a table cell (cross-container move)
-        const targetTableCell = target?.closest('.table-cell');
-        if (targetTableCell && !isSameParent) {
-            const targetCellContainerId = targetTableCell.getAttribute('data-container-id');
-            const targetCellRow = parseInt(targetTableCell.getAttribute('data-cell-row') || '0', 10);
-            const targetCellCol = parseInt(targetTableCell.getAttribute('data-cell-col') || '0', 10);
-            // Check if different container or different cell
-            const isSameCell = targetCellContainerId === sourceContainerId &&
-                nestedCellInfoRef.current?.row === targetCellRow &&
-                nestedCellInfoRef.current?.col === targetCellCol;
-            if (targetCellContainerId && component) {
-                // Prevent dropping into itself or its own descendant
-                if (targetCellContainerId === component.id || isIdInSubtree(component, targetCellContainerId)) {
-                    nestedDraggedIndex.current = null;
-                    setDraggedComponentInfo(null);
-                    isDraggingFromPaletteRef.current = false;
-                    clearNestedDropTargetVisuals();
-                    return;
-                }
-                if (!isSameCell) {
-                    // Move to different cell
-                    onDelete(component.id, true);
-                    setTimeout(() => {
-                        onNestedDrop(targetCellContainerId, component, { row: targetCellRow, col: targetCellCol }, targetCellContainerId, nestedDropTargetIndexRef.current, nestedDropPositionRef.current);
-                    }, 0);
-                    isDraggingFromPaletteRef.current = false;
-                    clearNestedDropTargetVisuals();
-                    nestedDraggedIndex.current = null;
-                    setDraggedComponentInfo(null);
-                    if (onFieldDropped) {
-                        onFieldDropped({
-                            componentName: component.name,
-                            componentType: component.type,
-                            sourceContainerId: sourceContainerId || 'root',
-                            targetContainerId: targetCellContainerId,
-                            isReordered: false
-                        });
-                    }
-                    return;
-                }
-            }
-        }
-        // Same container reorder (existing logic)
-        const targetElement = args.target?.closest(`.${containerClass}`);
-        if (targetElement) {
-            const targetIndex = parseInt(targetElement.getAttribute('data-nested-index') || '0', 10);
-            if (targetIndex !== -1 && targetIndex !== nestedDraggedIndex.current) {
-                const newChildren = [...nestedComponentsRef.current];
-                const draggedChild = newChildren[nestedDraggedIndex.current];
-                newChildren.splice(nestedDraggedIndex.current, 1);
-                newChildren.splice(targetIndex, 0, draggedChild);
-                // Call parent to update
-                if (nestedContainerIdRef.current && nestedContainerPathRef.current) {
-                    onNestedReorder(nestedContainerIdRef.current, nestedContainerPathRef.current, newChildren, nestedCellInfoRef.current);
-                    isDraggingFromPaletteRef.current = false;
-                    clearDropTargetVisuals();
-                    clearNestedDropTargetVisuals();
-                }
-                // Trigger onFieldDropped event for reordering
-                if (onFieldDropped) {
-                    onFieldDropped({
-                        componentName: draggedChild.name,
-                        componentType: draggedChild.type,
-                        sourceContainerId: sourceContainerId || 'root',
-                        targetContainerId: nestedContainerIdRef.current || 'root',
-                        isReordered: true
-                    });
-                }
-            }
-        }
-        nestedDraggedIndex.current = null;
-        isDraggingFromPaletteRef.current = false;
-        clearDropTargetVisuals();
-        clearNestedDropTargetVisuals();
-        setDraggedComponentInfo(null); // Clear tracking
-    };
-    const handleListBoxItemSelect = useCallback((component) => {
-        // Create a new instance of the selected component with proper type casting
-        const newComponent = {
-            id: generateId(component.type),
-            type: component.type,
-            label: component.label || '',
-            name: generateName(component.type),
-            // Add default properties as needed
-        };
-        // Call onDrop with the new component (append to end)
-        if (onDrop) {
-            onDrop(newComponent);
-        }
-        setIsListBoxPaneOpen(false);
-    }, [onDrop, formSchema.components.length]);
-    const getNestedChildren = (parentId, _parentPath, cellInfo) => {
-        const parentComponent = findComponentById(parentId);
-        if (!parentComponent)
-            return [];
-        if (cellInfo?.tabIndex !== undefined) {
-            return parentComponent.tabItems?.[cellInfo.tabIndex]?.content || [];
-        }
-        if (cellInfo?.row !== undefined && cellInfo?.col !== undefined) {
-            return parentComponent.tableCells?.[cellInfo.row]?.[cellInfo.col] || [];
-        }
-        return parentComponent.children || [];
-    };
-    const handleMoveUp = useCallback((fieldId) => {
-        const index = currentComponentsRef.current.findIndex(c => c.id === fieldId);
-        if (index > 0) {
-            const newComponents = [...currentComponentsRef.current];
-            [newComponents[index - 1], newComponents[index]] = [newComponents[index], newComponents[index - 1]];
-            onReorder(newComponents);
-        }
-    }, [onReorder]);
-    const handleMoveDown = useCallback((fieldId) => {
-        const index = currentComponentsRef.current.findIndex(c => c.id === fieldId);
-        if (index < currentComponentsRef.current.length - 1) {
-            const newComponents = [...currentComponentsRef.current];
-            [newComponents[index], newComponents[index + 1]] = [newComponents[index + 1], newComponents[index]];
-            onReorder(newComponents);
-        }
-    }, [onReorder]);
-    const handleNestedMoveUp = useCallback((fieldId, parentId, parentPath, cellInfo) => {
-        const children = getNestedChildren(parentId, parentPath, cellInfo);
-        const index = children.findIndex(c => c.id === fieldId);
-        if (index > 0) {
-            const newChildren = [...children];
-            [newChildren[index - 1], newChildren[index]] = [newChildren[index], newChildren[index - 1]];
-            onNestedReorder(parentId, parentPath, newChildren, cellInfo);
-        }
-    }, [onNestedReorder]);
-    const handleNestedMoveDown = useCallback((fieldId, parentId, parentPath, cellInfo) => {
-        const children = getNestedChildren(parentId, parentPath, cellInfo);
-        const index = children.findIndex(c => c.id === fieldId);
-        if (index < children.length - 1) {
-            const newChildren = [...children];
-            [newChildren[index], newChildren[index + 1]] = [newChildren[index + 1], newChildren[index]];
-            onNestedReorder(parentId, parentPath, newChildren, cellInfo);
-        }
-    }, [onNestedReorder]);
-    const renderNestedChildren = (component, children, parentPath, canReorderPanel) => {
-        return (_jsx(Droppable, { scope: 'new-field', onOver: (args) => handleNestedDragOver(args, component.id), onOut: handleNestedDragLeave, onDrop: () => handleNestedDrop(component.id, undefined, parentPath), children: _jsx("div", { className: `panel-drop-zone ${draggingOverPanel === component.id ? 'dragging-over' : ''} ${children.length === 0 ? 'empty' : ''} ${component.cssClass}`, "data-panel-id": component.id, "aria-label": 'Drop Zone', children: children.length === 0 ? (_jsx(Droppable, { scope: 'new-field', onOver: (args) => handleNestedDragOver(args, component.id), onOut: handleNestedDragLeave, onDrop: () => handleNestedDrop(component.id, undefined, parentPath), children: _jsx("p", { className: "drop-zone-text", children: l10n.getConstant('emptyFieldSetState') }) }, `panel-${isNestedReordering}`)) : canReorderPanel ? (_jsx(Draggable, { scope: 'internal', clone: true, enableTailMode: true, isPreventSelect: true, helper: (args) => {
-                        nestedComponentsRef.current = children;
-                        nestedContainerIdRef.current = component.id;
-                        nestedContainerPathRef.current = parentPath;
-                        nestedCellInfoRef.current = undefined;
-                        setActiveNestedContainer(component.id);
-                        return nestedHelper(args, 'panel-child-field-draggable');
-                    }, onDragStart: nestedDragStart, onDragStop: (args) => nestedDragStop(args, 'panel-child-field-draggable'), onDrag: nestedDrag, children: _jsx("div", { style: { width: '100%', margin: '0px', padding: '0px' }, children: _jsx(Droppable, { scope: 'new-field', onOver: (args) => handleNestedDragOver(args, component.id), onOut: handleNestedDragLeave, onDrop: () => handleNestedDrop(component.id, undefined, parentPath), children: _jsx("div", { className: `panel-children ${isNestedReordering && activeNestedContainer === component.id ? 'is-nested-reordering' : ''}`, children: children.map((child, index) => {
-                                    const isLayoutComponent = ['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(child.type);
-                                    const labelPos = child.labelPosition || 'top';
-                                    const labelWidth = child.labelWidth + '%' || 'auto';
-                                    const labelStyle = {
-                                        width: labelWidth,
-                                        ...(labelPos.toLowerCase() === 'right' ? { marginLeft: labelWidth, width: 'unset' } : {})
-                                    };
-                                    return (_jsx(FormFieldWrapper, { mode: mode, isActive: activeFieldId === child.id, component: child, onEdit: onEdit, onCopy: onCopy, onPaste: onPaste, onDelete: onDelete, onSwitchWidget: onSwitchWidget, isNested: true, index: index, totalCount: children.length, hasClipboardData: hasClipboardData, nestingContext: {
-                                            parentId: component.id,
-                                            parentPath: parentPath,
-                                            cellInfo: undefined
-                                        }, onNestedMoveUp: handleNestedMoveUp, onNestedMoveDown: handleNestedMoveDown, children: _jsx(FormField, { name: child.id, children: _jsxs("div", { className: "panel-child-field panel-child-field-draggable", "data-nested-index": index, children: [_jsxs("div", { className: `field-content label-${labelPos.toLowerCase()}`, children: [!['checkbox', 'button', 'table', 'tabs', 'panel', 'message', 'card', 'splitButton', 'staticHtml'].includes(child.type) && child.label && !child.hideLabel && (_jsxs("label", { className: "field-label", htmlFor: child.id, style: {
-                                                                    ...labelStyle,
-                                                                    display: 'flex',
-                                                                    alignItems: 'center',
-                                                                    gap: '6px',
-                                                                }, children: [_jsxs("span", { children: [child.label, child?.required && _jsx("span", { className: "required", children: "*" })] }), child?.tooltip && (_jsx(TooltipComponent, { content: child.tooltip, children: _jsx("span", { className: "e-msg-icon", style: {
-                                                                                cursor: 'pointer',
-                                                                                display: 'flex',
-                                                                                alignItems: 'center',
-                                                                                justifyContent: 'center',
-                                                                                flexShrink: 0,
-                                                                            } }) }))] })), _jsxs("div", { className: "field-input", inert: !['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(child.type) ? true : undefined, children: [isLayoutComponent ? renderFormComponent({ ...child, parentPath: parentPath }) : renderFormComponent(child), formState?.errors[child.id] && (_jsx("div", { className: "e-error", children: formState?.errors[child.id] }))] })] }), child.description && _jsx("div", { className: 'field-description', children: child.description })] }, `field-${child.id}`) }, `field-${child.id}`) }, child.id));
-                                }) }) }, `panel-${isNestedReordering}`) }) }, `draggable-panel-${component.id}-${children.map(c => c.id).join('-')}`)) : (_jsx("div", { className: "panel-children", children: children.map((child, index) => {
-                        const isLayoutComponent = ['panel', 'table', 'tabs'].includes(child.type);
-                        const labelPos = child.labelPosition || 'top';
-                        const labelWidth = child.labelWidth + '%' || 'auto';
-                        const labelStyle = {
-                            width: labelWidth,
-                            ...(labelPos.toLowerCase() === 'right' ? { marginLeft: labelWidth, width: 'unset' } : {})
-                        };
-                        return (_jsx(FormFieldWrapper, { mode: mode, isActive: activeFieldId === child.id, component: child, onEdit: onEdit, onCopy: onCopy, onPaste: onPaste, onDelete: onDelete, onSwitchWidget: onSwitchWidget, isNested: true, index: index, totalCount: children.length, hasClipboardData: hasClipboardData, nestingContext: {
-                                parentId: component.id,
-                                parentPath: parentPath,
-                                cellInfo: undefined
-                            }, onNestedMoveUp: handleNestedMoveUp, onNestedMoveDown: handleNestedMoveDown, children: _jsxs(FormField, { name: child.id, children: ["                        ", _jsxs("div", { className: "panel-child-field", children: [_jsxs("div", { className: `field-content label-${labelPos.toLowerCase()}`, children: [!['checkbox', 'button', 'table', 'tabs', 'panel', 'message', 'card', 'splitButton', 'staticHtml'].includes(child.type) && child.label && !child.hideLabel && (_jsxs("label", { className: "field-label", htmlFor: child.id, style: {
-                                                            ...labelStyle,
-                                                            display: 'flex',
-                                                            alignItems: 'center',
-                                                            gap: '6px',
-                                                        }, children: [_jsxs("span", { children: [child.label, child?.required && _jsx("span", { className: "required", children: "*" })] }), child?.tooltip && (_jsx(TooltipComponent, { content: child.tooltip, children: _jsx("span", { className: "e-msg-icon", style: {
-                                                                        cursor: 'pointer',
-                                                                        display: 'flex',
-                                                                        alignItems: 'center',
-                                                                        justifyContent: 'center',
-                                                                        flexShrink: 0,
-                                                                    } }) }))] })), _jsxs("div", { className: "field-input", inert: !['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(child.type) ? true : undefined, children: [isLayoutComponent ? renderFormComponent({ ...child, parentPath: parentPath }) : renderFormComponent(child), formState?.errors[child.id] && (_jsx("div", { className: "e-error", children: formState?.errors[child.id] }))] })] }), child.description && _jsx("div", { className: 'field-description', children: child.description })] }, child.id)] }, `field-${child.id}`) }, child.id));
-                    }) })) }) }));
-    };
-    const renderFormComponent = (component) => {
-        const isLayoutComponent = ['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(component.type);
-        if (isLayoutComponent) {
-            switch (component.type) {
-                case 'panel':
-                    const panelPath = component.parentPath ? `${component.parentPath}.${component.id}` : component.id;
-                    const panelChildren = component.children || [];
-                    const canReorderPanel = panelChildren.length > 0;
-                    return (_jsxs("fieldset", { className: "form-panel", style: { minInlineSize: 'unset' }, children: [!component.hideLabel && _jsx("legend", { className: "panel-legend", children: component.label || 'Panel' }), renderNestedChildren(component, panelChildren, panelPath, canReorderPanel)] }, component.id));
-                case 'table':
-                    const tableRows = component.rows || 2;
-                    const tableCols = component.columns || 2;
-                    const tableCells = component.tableCells || [];
-                    const tablePath = component.parentPath ? `${component.parentPath}.${component.id}` : component.id;
-                    const defaultColSpan = Math.floor(12 / tableCols); // Calculate span: 1col=12, 2col=6, 3col=4, 4col=3
-                    const splittedWidths = component.columnWidths ? splitWidths(component.columnWidths.widths) : [];
-                    return (_jsx("div", { className: `form-table ${component.cssClass}`, children: _jsx("div", { className: "table-grid", children: Array.from({ length: tableRows }).map((_, rowIndex) => (_jsx("div", { className: "row table-row", children: Array.from({ length: tableCols }).map((_, colIndex) => {
-                                    const cellComponents = tableCells[rowIndex]?.[colIndex] || [];
-                                    const cellSpan = defaultColSpan; // Custom or default span
-                                    const cellId = `${component.id}-cell-${rowIndex}-${colIndex}`;
-                                    const cellPath = `${tablePath}.cell-${rowIndex}-${colIndex}`;
-                                    const isDraggingOverCell = draggingOverPanel === cellId;
-                                    const canReorderCell = cellComponents.length > 0;
-                                    // Get width from columnWidths - applies to all rows if defined
-                                    const colWidthValue = splittedWidths[colIndex];
-                                    const cellStyle = colWidthValue
-                                        ? { width: `${colWidthValue}%` }
-                                        : {};
-                                    return (_jsx(Droppable, { scope: 'new-field', onOver: (args) => handleNestedDragOver(args, cellId), onOut: handleNestedDragLeave, onDrop: () => handleNestedDrop(component.id, { row: rowIndex, col: colIndex }, cellPath), children: _jsx("div", { "aria-label": 'Drop Zone', className: `col ${colWidthValue ? '' : !component.columnWidths || component.columnWidths.widths.every(w => w === null) ? `col-${cellSpan}` : ''} table-cell drop-zone ${isDraggingOverCell ? 'dragging-over' : ''}`, style: cellStyle, "data-container-id": component.id, "data-cell-row": rowIndex, "data-cell-col": colIndex, "data-cell-span": cellSpan, children: cellComponents.length === 0 ? (_jsx(Droppable, { scope: 'new-field', onOver: (args) => handleNestedDragOver(args, cellId), onOut: handleNestedDragLeave, onDrop: () => handleNestedDrop(component.id, { row: rowIndex, col: colIndex }, cellPath), children: _jsxs("p", { className: "drop-zone-text", children: [l10n.getConstant('cell'), " ", rowIndex + 1, "-", colIndex + 1] }) }, `panel-${isNestedReordering}`)) : canReorderCell ? (_jsx(Draggable, { scope: 'internal', clone: true, enableTailMode: true, isPreventSelect: true, helper: (args) => {
-                                                    nestedComponentsRef.current = cellComponents;
-                                                    nestedContainerIdRef.current = component.id;
-                                                    nestedContainerPathRef.current = cellPath;
-                                                    nestedCellInfoRef.current = { row: rowIndex, col: colIndex };
-                                                    setActiveNestedContainer(cellId);
-                                                    return nestedHelper(args, 'table-cell-child-draggable');
-                                                }, onDragStart: nestedDragStart, onDragStop: (args) => nestedDragStop(args, 'table-cell-child-draggable'), onDrag: nestedDrag, children: _jsx("div", { style: { width: '100%', margin: '0px', padding: '0px' }, children: _jsx(Droppable, { scope: 'new-field', onOver: (args) => handleNestedDragOver(args, cellId), onOut: handleNestedDragLeave, onDrop: () => handleNestedDrop(component.id, { row: rowIndex, col: colIndex }, cellPath), children: _jsx("div", { className: `nested-components ${isNestedReordering && activeNestedContainer === cellId ? 'is-nested-reordering' : ''}`, children: cellComponents.map((nestedComp, index) => {
-                                                                const isLayoutComponent = ['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(nestedComp.type);
-                                                                const labelPos = nestedComp.labelPosition || 'top';
-                                                                const labelWidth = nestedComp.labelWidth + '%' || 'auto';
-                                                                const labelStyle = {
-                                                                    width: labelWidth,
-                                                                    ...(labelPos.toLowerCase() === 'right' ? { marginLeft: labelWidth, width: 'unset' } : {})
-                                                                };
-                                                                return (_jsx(FormFieldWrapper, { mode: mode, isActive: activeFieldId === nestedComp.id, component: nestedComp, onEdit: onEdit, onCopy: onCopy, onPaste: onPaste, onDelete: onDelete, onSwitchWidget: onSwitchWidget, isNested: true, index: index, totalCount: cellComponents.length, hasClipboardData: hasClipboardData, nestingContext: {
-                                                                        parentId: component.id,
-                                                                        parentPath: cellPath,
-                                                                        cellInfo: { row: rowIndex, col: colIndex }
-                                                                    }, onNestedMoveUp: handleNestedMoveUp, onNestedMoveDown: handleNestedMoveDown, children: _jsx(FormField, { name: nestedComp.id, children: _jsxs("div", { className: "nested-field table-cell-child-draggable", "data-nested-index": index, children: [_jsxs("div", { className: `field-content label-${labelPos.toLowerCase()}`, children: [!['checkbox', 'button', 'table', 'tabs', 'panel', 'message', 'card', 'splitButton', 'staticHtml'].includes(nestedComp.type) && nestedComp.label && !nestedComp.hideLabel && (_jsxs("label", { className: "field-label", htmlFor: nestedComp.id, style: {
-                                                                                                ...labelStyle,
-                                                                                                display: 'flex',
-                                                                                                alignItems: 'center',
-                                                                                                gap: '6px',
-                                                                                            }, children: [_jsxs("span", { children: [nestedComp.label, nestedComp?.required && _jsx("span", { className: "required", children: "*" })] }), nestedComp?.tooltip && (_jsx(TooltipComponent, { content: nestedComp.tooltip, children: _jsx("span", { className: "e-msg-icon", style: {
-                                                                                                            cursor: 'pointer',
-                                                                                                            display: 'flex',
-                                                                                                            alignItems: 'center',
-                                                                                                            justifyContent: 'center',
-                                                                                                            flexShrink: 0,
-                                                                                                        } }) }))] })), _jsxs("div", { className: "nested-field-input", inert: !['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(nestedComp.type) ? true : undefined, children: [isLayoutComponent ? renderFormComponent({ ...nestedComp, parentPath: cellPath }) : renderFormComponent(nestedComp), formState?.errors[nestedComp.id] && (_jsx("div", { className: "e-error", children: formState?.errors[nestedComp.id] }))] })] }), nestedComp.description && _jsx("div", { className: 'field-description', children: nestedComp.description })] }, `field-${nestedComp.id}`) }, `field-${nestedComp.id}`) }, nestedComp.id));
-                                                            }) }) }, `panel-${isNestedReordering}`) }) }, `draggable-cell-${component.id}-${rowIndex}-${colIndex}-${cellComponents.map(c => c.id).join('-')}`)) : (_jsx("div", { className: "nested-components", children: cellComponents.map((nestedComp, index) => {
-                                                    const isLayoutComponent = ['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(nestedComp.type);
-                                                    const labelPos = nestedComp.labelPosition || 'top';
-                                                    const labelWidth = nestedComp.labelWidth + '%' || 'auto';
-                                                    const labelStyle = {
-                                                        width: labelWidth,
-                                                        ...(labelPos.toLowerCase() === 'right' ? { marginLeft: labelWidth, width: 'unset' } : {})
-                                                    };
-                                                    return (_jsx(FormFieldWrapper, { mode: mode, isActive: activeFieldId === nestedComp.id, component: nestedComp, onEdit: onEdit, onCopy: onCopy, onPaste: onPaste, onDelete: onDelete, onSwitchWidget: onSwitchWidget, isNested: true, index: index, totalCount: cellComponents.length, hasClipboardData: hasClipboardData, nestingContext: {
-                                                            parentId: component.id,
-                                                            parentPath: cellPath,
-                                                            cellInfo: { row: rowIndex, col: colIndex }
-                                                        }, onNestedMoveUp: handleNestedMoveUp, onNestedMoveDown: handleNestedMoveDown, children: _jsx(FormField, { name: nestedComp.id, children: _jsxs("div", { className: "nested-field", children: [_jsxs("div", { className: `field-content label-${labelPos.toLowerCase()}`, children: [!['checkbox', 'button', 'table', 'tabs', 'panel', 'message', 'card', 'splitButton', 'staticHtml'].includes(nestedComp.type) && nestedComp.label && !nestedComp.hideLabel && (_jsxs("label", { className: "field-label", htmlFor: nestedComp.id, style: {
-                                                                                    ...labelStyle,
-                                                                                    display: 'flex',
-                                                                                    alignItems: 'center',
-                                                                                    gap: '6px',
-                                                                                }, children: [_jsxs("span", { children: [nestedComp.label, nestedComp?.required && _jsx("span", { className: "required", children: "*" })] }), nestedComp?.tooltip && (_jsx(TooltipComponent, { content: nestedComp.tooltip, children: _jsx("span", { className: "e-msg-icon", style: {
-                                                                                                cursor: 'pointer',
-                                                                                                display: 'flex',
-                                                                                                alignItems: 'center',
-                                                                                                justifyContent: 'center',
-                                                                                                flexShrink: 0,
-                                                                                            } }) }))] })), _jsxs("div", { className: "nested-field-input", inert: !['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(nestedComp.type) ? true : undefined, children: [isLayoutComponent ? renderFormComponent({ ...nestedComp, parentPath: cellPath }) : renderFormComponent(nestedComp), formState?.errors[nestedComp.id] && (_jsx("div", { className: "e-error", children: formState?.errors[nestedComp.id] }))] })] }), nestedComp.description && _jsx("div", { className: 'field-description', children: nestedComp.description })] }, nestedComp.id) }, `field-${nestedComp.id}`) }, nestedComp.id));
-                                                }) })) }, `cell-${rowIndex}-${colIndex}`) }, `cell-${rowIndex}-${colIndex}`));
-                                }) }, `row-${rowIndex}`))) }) }, component.id));
-                case 'tabs': {
-                    const tabsPath = component.parentPath ? `${component.parentPath}.${component.id}` : component.id;
-                    const renderTabContent = (tabIndex) => {
-                        const tabId = `${component.id}-tab-${tabIndex}`;
-                        const isDraggingOverTab = draggingOverPanel === tabId;
-                        const tabContent = component.tabItems?.[tabIndex]?.content || [];
-                        const canReorderTab = tabContent.length > 0;
-                        const isDefaultOptions = !component.tabOptions;
-                        if (isDefaultOptions && component.tabItems) {
-                            component.tabItems[0].header = l10n.getConstant('defaultTabValue') || 'Tab 1';
-                        }
-                        return (_jsx(Droppable, { scope: 'new-field', onOver: (args) => handleNestedDragOver(args, tabId), onOut: handleNestedDragLeave, onDrop: () => handleNestedDrop(component.id, { row: 0, col: 0, tabIndex }, tabsPath), children: _jsx("div", { "aria-label": 'Drop Zone', className: `tab-drop-zone ${isDraggingOverTab ? 'dragging-over' : ''} ${tabContent.length === 0 ? 'empty' : ''}`, "data-container-id": component.id, "data-tab-index": tabIndex, children: tabContent.length === 0 ? (_jsx(Droppable, { scope: 'new-field', onOver: (args) => handleNestedDragOver(args, tabId), onOut: handleNestedDragLeave, onDrop: () => handleNestedDrop(component.id, { row: 0, col: 0, tabIndex }, tabsPath), children: _jsx("p", { className: "drop-zone-text", children: l10n.getConstant('emptyFieldSetState') }) }, `panel-${isNestedReordering}`)) : canReorderTab ? (_jsx(Draggable, { scope: 'internal', clone: true, enableTailMode: true, isPreventSelect: true, helper: (args) => {
-                                        nestedComponentsRef.current = tabContent;
-                                        nestedContainerIdRef.current = component.id;
-                                        nestedContainerPathRef.current = tabsPath;
-                                        nestedCellInfoRef.current = { tabIndex };
-                                        setActiveNestedContainer(`${component.id}-tab-${tabIndex}`);
-                                        return nestedHelper(args, 'tab-child-field-draggable');
-                                    }, onDragStart: nestedDragStart, onDragStop: (args) => nestedDragStop(args, 'tab-child-field-draggable'), onDrag: nestedDrag, children: _jsx("div", { style: { width: '100%', margin: '0px', padding: '0px' }, children: _jsx(Droppable, { scope: 'new-field', onOver: (args) => handleNestedDragOver(args, tabId), onOut: handleNestedDragLeave, onDrop: () => handleNestedDrop(component.id, { row: 0, col: 0, tabIndex }, tabsPath), children: _jsx("div", { className: `tab-children ${isNestedReordering && activeNestedContainer === `${component.id}-tab-${tabIndex}` ? 'is-nested-reordering' : ''}`, children: tabContent.map((child, index) => {
-                                                    const isLayoutComponent = ['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(child.type);
-                                                    const labelPos = child.labelPosition || 'top';
-                                                    const labelWidth = child.labelWidth + '%' || 'auto';
-                                                    const labelStyle = {
-                                                        width: labelWidth,
-                                                        ...(labelPos.toLowerCase() === 'right' ? { marginLeft: labelWidth, width: 'unset' } : {})
-                                                    };
-                                                    return (_jsx(FormFieldWrapper, { mode: mode, isActive: activeFieldId === child.id, component: child, onEdit: onEdit, onCopy: onCopy, onPaste: onPaste, onDelete: onDelete, onSwitchWidget: onSwitchWidget, isNested: true, index: index, totalCount: tabContent.length, hasClipboardData: hasClipboardData, nestingContext: {
-                                                            parentId: component.id,
-                                                            parentPath: tabsPath,
-                                                            cellInfo: { tabIndex }
-                                                        }, onNestedMoveUp: handleNestedMoveUp, onNestedMoveDown: handleNestedMoveDown, children: _jsx(FormField, { name: child.id, children: _jsxs("div", { className: "tab-child-field tab-child-field-draggable", "data-nested-index": index, children: [_jsxs("div", { className: `field-content label-${labelPos.toLowerCase()}`, children: [!['checkbox', 'button', 'table', 'tabs', 'panel', 'message', 'card', 'splitButton', 'staticHtml'].includes(child.type) && child.label && !child.hideLabel && (_jsxs("label", { className: "field-label", htmlFor: child.id, style: {
-                                                                                    ...labelStyle,
-                                                                                    display: 'flex',
-                                                                                    alignItems: 'center',
-                                                                                    gap: '6px',
-                                                                                }, children: [_jsxs("span", { children: [child.label, child?.required && _jsx("span", { className: "required", children: "*" })] }), child?.tooltip && (_jsx(TooltipComponent, { content: child.tooltip, children: _jsx("span", { className: "e-msg-icon", style: {
-                                                                                                cursor: 'pointer',
-                                                                                                display: 'flex',
-                                                                                                alignItems: 'center',
-                                                                                                justifyContent: 'center',
-                                                                                                flexShrink: 0,
-                                                                                            } }) }))] })), _jsxs("div", { className: "field-input", inert: !['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(child.type) ? true : undefined, children: [isLayoutComponent ? renderFormComponent({ ...child, parentPath: tabsPath }) : renderFormComponent(child), formState?.errors[child.id] && (_jsx("div", { className: "e-error", children: formState?.errors[child.id] }))] })] }), child.description && _jsx("div", { className: 'field-description', children: child.description })] }, `field-${child.id}`) }, `field-${child.id}`) }, child.id));
-                                                }) }) }, `panel-${isNestedReordering}`) }) }, `draggable-tab-${component.id}-${tabIndex}-${tabContent.map(c => c.id).join('-')}`)) : (_jsx("div", { className: "tab-children", children: tabContent.map((child, index) => {
-                                        const isLayoutComponent = ['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(child.type);
-                                        const labelPos = child.labelPosition || 'top';
-                                        const labelWidth = child.labelWidth + '%' || 'auto';
-                                        const labelStyle = {
-                                            width: labelWidth,
-                                            ...(labelPos.toLowerCase() === 'right' ? { marginLeft: labelWidth, width: 'unset' } : {})
-                                        };
-                                        return (_jsx(FormFieldWrapper, { mode: mode, isActive: activeFieldId === child.id, component: child, onEdit: onEdit, onCopy: onCopy, onPaste: onPaste, onDelete: onDelete, onSwitchWidget: onSwitchWidget, isNested: true, index: index, totalCount: tabContent.length, hasClipboardData: hasClipboardData, nestingContext: {
-                                                parentId: component.id,
-                                                parentPath: tabsPath,
-                                                cellInfo: { tabIndex }
-                                            }, onNestedMoveUp: handleNestedMoveUp, onNestedMoveDown: handleNestedMoveDown, children: _jsx(FormField, { name: child.id, children: _jsxs("div", { className: "tab-child-field", children: [_jsxs("div", { className: `field-content label-${labelPos.toLowerCase()}`, children: [!['checkbox', 'button', 'table', 'tabs', 'panel', 'message', 'card', 'splitButton', 'staticHtml'].includes(child.type) && child.label && !child.hideLabel && (_jsxs("label", { className: "field-label", htmlFor: child.id, style: {
-                                                                        ...labelStyle,
-                                                                        display: 'flex',
-                                                                        alignItems: 'center',
-                                                                        gap: '6px',
-                                                                    }, children: [_jsxs("span", { children: [child.label, child?.required && _jsx("span", { className: "required", children: "*" })] }), child?.tooltip && (_jsxs(TooltipComponent, { content: child.tooltip, children: [_jsx("span", { className: "e-msg-icon", style: {
-                                                                                        cursor: 'pointer',
-                                                                                        display: 'flex',
-                                                                                        alignItems: 'center',
-                                                                                        justifyContent: 'center',
-                                                                                        flexShrink: 0,
-                                                                                    } }), "0"] }))] })), _jsxs("div", { className: "field-input", inert: !['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(child.type) ? true : undefined, children: [isLayoutComponent ? renderFormComponent({ ...child, parentPath: tabsPath }) : renderFormComponent(child), formState?.errors[child.id] && (_jsx("div", { className: "e-error", children: formState?.errors[child.id] }))] })] }), child.description && _jsx("div", { className: 'field-description', children: child.description })] }, child.id) }, `field-${child.id}`) }, child.id));
-                                    }) })) }) }));
-                    };
-                    return (_jsx(CustomTabComponent, { className: component.cssClass || '', tabs: component.tabItems?.map((tab, tabIndex) => ({
-                            header: tab.header,
-                            content: renderTabContent(tabIndex)
-                        })) || [], selectedIndex: activeTabIndices[component.id] || 0, onTabSelect: (index) => {
-                            setActiveTabIndices(prev => ({
-                                ...prev,
-                                [component.id]: index
-                            }));
-                        } }, `${component.id}`));
-                }
-                case 'card': {
-                    const cardPath = component.parentPath ? `${component.parentPath}.${component.id}` : component.id;
-                    const cardChildren = component.children || [];
-                    const canReorderCard = cardChildren.length > 0;
-                    return (_jsxs("fieldset", { className: `e-card form-card ${component.cssClass}`, style: { padding: 0, minInlineSize: 'unset' }, children: [_jsx("div", { className: "e-card-header", children: _jsxs("div", { className: "e-card-header-caption", children: [_jsx("div", { className: "e-card-title", children: component.cardTitle || l10n.getConstant('cardTitle') }), component.cardSubtitle && _jsx("div", { className: "e-card-sub-title", children: component.cardSubtitle })] }) }), _jsx("div", { className: "e-card-content", children: renderNestedChildren(component, cardChildren, cardPath, canReorderCard) })] }, component.id));
-                }
-                case 'staticHtml':
-                    return (_jsx(StaticHtmlRenderer, { id: component.id, content: component.defaultValue || '<p>HTML content</p>', enableHtmlSanitizer: component.enableHtmlSanitizer }, component.id));
-                default:
-                    return null;
-            }
-        }
-        else {
-            return _jsx(RenderComponent, { component: component, formState: formState, gridRefs: gridRefsRef.current, l10n: l10n, locale: locale, formSettings: formSchema.settings });
-        }
-    };
-    // Generate split schema and combined schema for export
-    const splitData = React.useMemo(() => splitSchema(formSchema), [formSchema]);
-    useEffect(() => {
-        setFormId(null);
-    }, [splitData, formSchema]);
-    const copyCombinedSchema = () => {
-        navigator.clipboard.writeText(JSON.stringify(splitData, null, 2));
-    };
-    const uploadToServer = async () => {
-        try {
-            const res = await fetch(/*builderSubmitUrl*/ '', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(splitData)
-            });
-            if (!res.ok) {
-                const text = await res.text().catch(() => '');
-                console.error('FormRenderer: submitUrl POST failed', res.status, text);
-                try {
-                    setFormId(null);
-                }
-                catch (e) { /* ignore */ }
-                return { ok: false, status: res.status, body: text };
-            }
-            const contentType = (res.headers.get('Content-Type') || '').toLowerCase();
-            let data = null;
-            if (contentType.includes('application/json')) {
-                data = await res.json();
-                const returnedId = data?.id ?? null;
-                if (returnedId) {
-                    try {
-                        setFormId(String(returnedId));
-                    }
-                    catch (e) {
-                        console.error('setFormId error', e);
-                    }
-                    let formId = getFormId();
-                }
-            }
-            else if (contentType.startsWith('text/')) {
-                data = await res.text();
-                try {
-                    const parsed = JSON.parse(data || '{}');
-                    const returnedId = parsed?.id ?? parsed?.formId ?? null;
-                    if (returnedId) {
-                        try {
-                            setFormId(String(returnedId));
-                        }
-                        catch (e) {
-                            console.error('setFormId error', e);
-                        }
-                    }
-                }
-                catch (e) {
-                    // not JSON, ignore
-                }
-            }
-            else {
-                data = await res.blob();
-            }
-            return { ok: true, status: res.status, data, formId: getFormId() };
-        }
-        catch (err) {
-            try {
-                setFormId(null);
-            }
-            catch (e) { /* ignore */ }
-            return { ok: false, error: err };
-        }
-    };
-    const handleSubmit = () => {
-    };
-    return (_jsxs("main", { className: `main-section ${className || ''}`, children: [_jsx("div", { className: "main-content fb-scrollbar", children: !showSplitView ? (_jsxs("div", { className: `form-preview-area ${isDraggingOver ? 'dragging-over' : ''} ${formSchema.components.length === 0 || (formSchema.components.length === 1 && formSchema.components[0].buttonType === 'submit') ? 'empty' : ''} ${isReordering ? 'is-reordering' : ''} ${isNestedReordering ? 'is-nesteditemreordering' : ''}`, tabIndex: -1, role: "region", "aria-label": "Form Preview", children: [(formSchema.components.length === 0 || (formSchema.components.length === 1 && formSchema.components[0].buttonType === 'submit')) ? (_jsx("div", { className: "empty-state", style: { width: formSchema.settings?.width || 'var(--form-width)' }, children: _jsx(Droppable, { scope: 'new-field', onOver: (args) => handleDragOver(args), onOut: handleDragLeave, onDrop: handleDrop, children: _jsx("div", { className: "form-dropzone", "aria-label": 'Drop Zone', children: _jsxs("div", { className: "form-dropzone-content", children: [_jsx(FormDropZoneIcon, {}), isDraggingOver ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "dropzone-title", children: l10n.getConstant('dropToAddField') }), _jsx("p", { className: "dropzone-hint", children: l10n.getConstant('releaseToAddField') })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "dropzone-title", children: l10n.getConstant('startBuildingForm') }), _jsx("p", { className: "dropzone-hint", children: l10n.getConstant('dragFieldsHint') })] }))] }) }) }) })) : (_jsx(Droppable, { scope: 'new-field', onOver: (args) => handleDragOver(args), onOut: handleDragLeave, onDrop: handleDrop, children: _jsxs("div", { style: { margin: "0 auto", minHeight: "100%" }, children: [_jsx(Form, { rules: validationRules, onSubmit: handleSubmit, onFormStateChange: setFormState, initialValues: initialValues, validateOnChange: true, "aria-label": "Form Builder Preview", autoComplete: 'off', style: { minWidth: formSchema.settings?.width || 'var(--form-width)', maxWidth: formSchema.settings?.width || 'var(--form-width)', overflowX: 'auto' }, className: "form-components", children: _jsx(Draggable, { scope: 'internal', clone: true, enableTailMode: true, isPreventSelect: true, helper: helper, onDragStart: (e) => dragStart(e), onDragStop: dragStop, onDrag: (e) => drag(e), children: _jsxs("div", { style: { width: '100%', margin: '0px', padding: '0px' }, children: [_jsx(Droppable, { scope: 'new-field', onOver: handleDragOver, onOut: handleDragLeave, onDrop: handleDrop, children: _jsx("div", { className: `draggable-fields-container`, children: formSchema.components.map((component, index) => {
-                                                                const labelPos = component.labelPosition || 'top';
-                                                                const labelWidth = component.labelWidth + '%' || 'auto';
-                                                                const labelStyle = {
-                                                                    width: labelWidth,
-                                                                    ...(labelPos.toLowerCase() === 'right' ? { marginLeft: labelWidth, width: 'unset' } : {})
-                                                                };
-                                                                return (_jsx(FormFieldWrapper, { mode: mode, isActive: activeFieldId === component.id, component: component, onEdit: onEdit, onCopy: onCopy, onPaste: onPaste, onDelete: onDelete, onSwitchWidget: onSwitchWidget, onMoveUp: handleMoveUp, onMoveDown: handleMoveDown, index: index, totalCount: formSchema.components.length, hasClipboardData: hasClipboardData, children: _jsx(FormField, { name: component.id, children: _jsxs("div", { className: "form-field form-field-draggable", "data-index": index, "data-component-id": component.id, children: [_jsxs("div", { className: `field-content label-${labelPos.toLowerCase()} ${['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(component.type) ? 'layout-component' : ''}`, children: [!['checkbox', 'button', 'table', 'tabs', 'panel', 'message', 'card', 'splitButton', 'staticHtml'].includes(component.type) && component.label && !component.hideLabel && (_jsxs("label", { className: "field-label", htmlFor: component.id, style: {
-                                                                                                ...labelStyle,
-                                                                                                display: 'flex',
-                                                                                                alignItems: 'center',
-                                                                                                gap: '6px',
-                                                                                            }, children: [_jsxs("span", { children: [component.label, component?.required && _jsx("span", { className: "required", children: "*" })] }), component?.tooltip && (_jsx(TooltipComponent, { content: component.tooltip, children: _jsx("span", { className: "e-msg-icon", "aria-label": component.tooltip, style: {
-                                                                                                            cursor: 'pointer',
-                                                                                                            display: 'flex',
-                                                                                                            alignItems: 'center',
-                                                                                                            justifyContent: 'center',
-                                                                                                            flexShrink: 0,
-                                                                                                        } }) }))] })), _jsxs("div", { className: "field-input", inert: !['panel', 'table', 'tabs', 'card', 'staticHtml'].includes(component.type) ? true : undefined, children: [renderFormComponent(component), formState?.errors[component.id] && (_jsx("div", { className: "e-error", role: "alert", "aria-live": "assertive", children: formState?.errors[component.id] }))] })] }), component.description && _jsx("div", { className: 'field-description', children: component.description })] }) }, `field-${component.id}`) }, component.id));
-                                                            }) }) }), _jsx("div", { style: { marginTop: '1rem' }, className: "add-field-message-wrapper", tabIndex: 0, onKeyDown: (e) => {
-                                                            if (e.code === "Enter") {
-                                                                setIsListBoxPaneOpen(true);
-                                                            }
-                                                        }, "aria-label": "Add new field", children: _jsxs(MessageComponent, { style: { justifyContent: 'center', cursor: 'pointer', fontSize: '12px', lineHeight: '16px' }, showIcon: false, showCloseIcon: false, cssClass: "add-field-message", "aria-label": "Add new field", onClick: () => setIsListBoxPaneOpen(true), children: [_jsx("span", { "aria-hidden": "true", style: { position: 'relative', top: '2px', marginRight: '10px' }, className: 'e-icons e-plus' }), _jsx("span", { children: "Drag any field here or click to add new field" })] }) })] }) }, `draggable-${formSchema.components.map(c => c.id).join('-')}`) }), _jsx(ListBoxPane, { isOpen: isListBoxPaneOpen, onClose: () => setIsListBoxPaneOpen(false), onSelect: handleListBoxItemSelect, paletteConfig: paletteConfig, mode: currentMode })] }) })), showClone && (_jsx("div", { ref: cloneHelperRef, className: "form-field-clone", "aria-hidden": true, style: {
-                                opacity: '0',
-                                padding: '12px',
-                                zIndex: '10000',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                gap: '8px',
-                                height: '37px',
-                                minWidth: '170px',
-                                backgroundColor: 'rgb(var(--sf-drag-clone))',
-                                border: '2px solid var(--sf-color-primary)',
-                                borderRadius: '8px',
-                                boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
-                                pointerEvents: 'none',
-                                display: 'none',
-                            }, children: _jsx("div", { className: "clone-content", style: { fontSize: '14px', fontWeight: '500' }, children: draggedItemIndex.current !== null && currentComponentsRef.current[draggedItemIndex.current]?.label }) })), _jsx("div", { ref: nestedCloneHelperRef, className: "nested-field-clone", "aria-hidden": true, style: {
-                                opacity: isNestedReordering ? '1' : '0',
-                                padding: '12px',
-                                zIndex: '10001',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                gap: '8px',
-                                height: '37px',
-                                minWidth: '170px',
-                                backgroundColor: 'var(--sf-color-surface)',
-                                border: '2px solid var(--sf-color-primary)',
-                                borderRadius: '8px',
-                                boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
-                                pointerEvents: 'none',
-                                display: isNestedReordering ? 'flex' : 'none',
-                                position: 'fixed',
-                            }, children: _jsx("div", { className: "clone-content", style: { fontSize: '14px', fontWeight: '500' }, children: nestedDraggedIndex.current !== null && (nestedComponentsRef.current[nestedDraggedIndex.current]?.label ||
-                                    nestedComponentsRef.current[nestedDraggedIndex.current]?.legend ||
-                                    nestedComponentsRef.current[nestedDraggedIndex.current]?.type) }) })] })) : (_jsx("div", { className: "split-view-container", children: _jsx("div", { className: "split-panels", children: _jsxs("div", { className: "split-panel full-width", "aria-labelledby": "combined-schema-heading", children: [_jsxs("div", { className: "json-header", children: [_jsx("span", { className: "json-title", children: l10n.getConstant('combinedSchema') || 'Schema' }), !isDefaultFormSchema(formSchema) &&
-                                            _jsx(ButtonComponent, { iconCss: "e-icons e-copy", onClick: copyCombinedSchema, "aria-label": l10n.getConstant('copy'), children: l10n.getConstant('copy') })] }), _jsx("pre", { className: "json-content", role: "textbox", "aria-readonly": "true", "aria-label": 'Schema', children: JSON.stringify(isDefaultFormSchema(formSchema) ? {} : splitData, null, 2) })] }) }) })) }), _jsx(Preview, { isOpen: isPreviewOpen, onClose: () => setIsPreviewOpen(false), schema: splitData, formSchema: formSchema }), _jsx("div", { id: "Editor-Tooltip", role: "toolbar", "aria-label": "Form Builder Actions", className: `editor-handle ${className}`, style: isPreviewOpen ? { zIndex: 99999 } : { zIndex: 999 }, children: _jsx(ToolbarComponent, { "aria-label": "Editor Actions", tabIndex: 0, id: 'toolbar', style: { width: '352px' }, children: _jsxs(ItemsDirective, { children: [!showSplitView && !isPreviewOpen &&
-                                _jsx(ItemDirective, { prefixIcon: 'e-icons e-copy', click: copyCombinedSchema, disabled: isDefaultFormSchema(formSchema), tooltipText: l10n.getConstant('copyCode') }), !showSplitView && !isPreviewOpen &&
-                                _jsx(ItemDirective, { prefixIcon: 'e-icons e-trash', click: () => setFormSchema(defaultFormSchema), disabled: isDefaultFormSchema(formSchema), tooltipText: l10n.getConstant('resetForm') }), !showSplitView && !isPreviewOpen &&
-                                _jsx(ItemDirective, { type: "Separator" }), _jsx(ItemDirective, { prefixIcon: 'e-icons e-edit', text: showSplitView || isPreviewOpen ? "Build" : undefined, click: () => { setShowSplitView(false); setIsPreviewOpen(false); }, cssClass: !showSplitView && !isPreviewOpen ? 'e-toolbar-active' : '', tooltipText: l10n.getConstant('editForm') }), _jsx(ItemDirective, { prefixIcon: 'e-icons e-code-view', text: showSplitView || isPreviewOpen ? "JSON" : undefined, click: () => { setShowSplitView(true); setIsPreviewOpen(false); }, cssClass: showSplitView && !isPreviewOpen ? 'e-toolbar-active' : '', tooltipText: l10n.getConstant('jsonview') }), enablePreview &&
-                                _jsx(ItemDirective, { prefixIcon: 'e-icons e-eye', text: showSplitView || isPreviewOpen ? "Preview" : undefined, click: () => { /*uploadToServer()*/ ; setIsPreviewOpen(true); }, cssClass: isPreviewOpen ? 'e-toolbar-active' : '', disabled: isDefaultFormSchema(formSchema), tooltipText: l10n.getConstant('previewForm') })] }) }) })] }, currentMode));
-});
-MainSection.displayName = 'MainSection';
-export default MainSection;