form-builder-pro 0.0.1 → 0.0.3

package/dist/web-components.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/web-components.tsx","../src/builder/FormBuilder.tsx","../src/core/useFormStore.ts","../src/core/constants.ts","../src/builder/Toolbar.tsx","../src/builder/FieldToolbox.tsx","../src/builder/Canvas.tsx","../src/builder/SortableSection.tsx","../src/builder/SortableField.tsx","../src/renderer/FieldRenderer.tsx","../src/builder/FieldConfigPanel.tsx","../src/renderer/FormRenderer.tsx"],"names":["React","useState","jsx","jsxs","useDroppable","SortableContext","verticalListSortingStrategy","useSortable","CSS","clsx","Trash2","GripVertical","Plus","Fragment"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { FormBuilder } from './builder/FormBuilder';\nimport { FormRenderer } from './renderer/FormRenderer';\nimport { FormSchema } from './core/schemaTypes';\n// import style from './index.css?inline'; // We will need to handle CSS injection\n\n// Helper to create a React Web Component wrapper\nclass ReactCustomElement extends HTMLElement {\n    protected root: ReactDOM.Root | null = null;\n    protected props: Record<string, any> = {};\n    protected Component: React.ComponentType<any>;\n\n    constructor(Component: React.ComponentType<any>) {\n        super();\n        this.Component = Component;\n    }\n\n    connectedCallback() {\n        if (!this.root) {\n            this.root = ReactDOM.createRoot(this);\n            this.render();\n        }\n    }\n\n    disconnectedCallback() {\n        if (this.root) {\n            this.root.unmount();\n            this.root = null;\n        }\n    }\n\n    attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n        if (oldValue !== newValue) {\n            this.props[name] = newValue;\n            this.render();\n        }\n    }\n\n    // Allow setting complex props via JS properties\n    setProp(name: string, value: any) {\n        this.props[name] = value;\n        this.render();\n    }\n\n    render() {\n        if (this.root) {\n            const Component = this.Component;\n            this.root.render(\n                <React.StrictMode>\n                    {/* We might need to wrap with a style provider or inject styles here if using Shadow DOM */}\n                    {/* For now, we assume global styles are loaded or we inject them */}\n                    <Component {...this.props} />\n                </React.StrictMode>\n            );\n        }\n    }\n}\n\n// Form Builder Wrapper\nclass FormBuilderElement extends ReactCustomElement {\n    constructor() {\n        super(FormBuilder);\n    }\n\n    // Expose methods or specific props if needed\n}\n\n// Form Renderer Wrapper\nclass FormRendererElement extends ReactCustomElement {\n    constructor() {\n        super(FormRenderer);\n    }\n\n    // Define setters for complex properties\n    set schema(value: FormSchema) {\n        this.setProp('schema', value);\n    }\n\n    set onSubmit(value: (data: any) => void) {\n        this.setProp('onSubmit', value);\n    }\n}\n\n// Register the custom elements\nexport function registerWebComponents() {\n    if (typeof window !== 'undefined') {\n        if (!customElements.get('form-builder-pro')) {\n            customElements.define('form-builder-pro', FormBuilderElement);\n        }\n        if (!customElements.get('form-renderer-pro')) {\n            customElements.define('form-renderer-pro', FormRendererElement);\n        }\n    }\n}\n\n// Auto-register if imported directly in a browser environment via script tag\nif (typeof window !== 'undefined') {\n    // We can expose a global variable to init\n    (window as any).FormBuilderPro = {\n        register: registerWebComponents\n    };\n}\n","import React, { useState } from 'react';\nimport {\n    DndContext,\n    DragOverlay,\n    useSensor,\n    useSensors,\n    PointerSensor,\n    KeyboardSensor,\n    DragStartEvent,\n    DragEndEvent,\n    DragOverEvent,\n    defaultDropAnimationSideEffects,\n    DropAnimation,\n    closestCorners,\n} from '@dnd-kit/core';\nimport { sortableKeyboardCoordinates } from '@dnd-kit/sortable';\nimport { useFormStore } from '../core/useFormStore';\nimport { Toolbar } from './Toolbar';\nimport { FieldToolbox } from './FieldToolbox';\nimport { Canvas } from './Canvas';\nimport { FieldConfigPanel } from './FieldConfigPanel';\nimport { SortableField } from './SortableField';\nimport { SortableSection } from './SortableSection';\nimport { createPortal } from 'react-dom';\nimport { FieldType } from '../core/schemaTypes';\nimport { FormRenderer } from '../renderer/FormRenderer';\n\nconst dropAnimation: DropAnimation = {\n    sideEffects: defaultDropAnimationSideEffects({\n        styles: {\n            active: {\n                opacity: '0.5',\n            },\n        },\n    }),\n};\n\nexport const FormBuilder: React.FC = () => {\n    const {\n        schema,\n        addField,\n        moveField,\n        moveSection,\n        isPreviewMode\n    } = useFormStore();\n\n    const [activeId, setActiveId] = useState<string | null>(null);\n    const [activeData, setActiveData] = useState<any>(null);\n\n    const sensors = useSensors(\n        useSensor(PointerSensor, {\n            activationConstraint: {\n                distance: 5,\n            },\n        }),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n\n    const handleDragStart = (event: DragStartEvent) => {\n        setActiveId(event.active.id as string);\n        setActiveData(event.active.data.current);\n    };\n\n    const handleDragOver = (event: DragOverEvent) => {\n        const { active, over } = event;\n        if (!over) return;\n\n        const activeType = active.data.current?.type;\n        const overType = over.data.current?.type;\n\n        // If dragging a toolbox item over a section\n        if (activeType === 'toolbox-item' && overType === 'section') {\n            // We don't need to do anything here, the drop handler will handle the addition\n            return;\n        }\n\n        // If dragging a field over another field or section\n        if (activeType === 'field') {\n            // Handled in moveField in store? \n            // Actually moveField in store handles reordering. \n            // But for visual feedback during drag, we might want to update the UI?\n            // dnd-kit handles the visual sorting if we use SortableContext correctly.\n        }\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        const { active, over } = event;\n        setActiveId(null);\n        setActiveData(null);\n\n        if (!over) return;\n\n        const activeType = active.data.current?.type;\n        const overType = over.data.current?.type;\n\n        // 1. Drop Toolbox Item -> Section\n        if (activeType === 'toolbox-item') {\n            const fieldType = active.data.current?.fieldType as FieldType;\n\n            if (overType === 'section') {\n                addField(over.id as string, fieldType);\n            } else if (overType === 'field') {\n                // Find which section this field belongs to\n                const section = schema.sections.find(s => s.fields.some(f => f.id === over.id));\n                if (section) {\n                    const index = section.fields.findIndex(f => f.id === over.id);\n                    addField(section.id, fieldType, index + 1); // Add after the target field\n                }\n            }\n            return;\n        }\n\n        // 2. Reorder Sections\n        if (activeType === 'section' && overType === 'section') {\n            if (active.id !== over.id) {\n                moveSection(active.id as string, over.id as string);\n            }\n            return;\n        }\n\n        // 3. Reorder Fields (Same Section or Different Section)\n        if (activeType === 'field') {\n            const activeFieldId = active.id as string;\n            const overId = over.id as string;\n\n            // Find source and destination sections\n            const activeSection = schema.sections.find(s => s.fields.some(f => f.id === activeFieldId));\n\n            let overSection;\n            if (overType === 'section') {\n                overSection = schema.sections.find(s => s.id === overId);\n            } else if (overType === 'field') {\n                overSection = schema.sections.find(s => s.fields.some(f => f.id === overId));\n            }\n\n            if (activeSection && overSection) {\n                moveField(activeFieldId, overId, activeSection.id, overSection.id);\n            }\n        }\n    };\n\n    return (\n        <DndContext\n            sensors={sensors}\n            collisionDetection={closestCorners}\n            onDragStart={handleDragStart}\n            onDragOver={handleDragOver}\n            onDragEnd={handleDragEnd}\n        >\n            <div className=\"flex flex-col h-screen bg-gray-100 dark:bg-gray-950\">\n                <Toolbar />\n                <div className=\"flex flex-1 overflow-hidden\">\n                    {isPreviewMode ? (\n                        <div className=\"flex-1 p-8 overflow-y-auto bg-white dark:bg-gray-900 flex justify-center\">\n                            <div className=\"w-full max-w-3xl\">\n                                <FormRenderer schema={schema} onSubmit={(data) => alert(JSON.stringify(data, null, 2))} />\n                            </div>\n                        </div>\n                    ) : (\n                        <>\n                            <FieldToolbox />\n                            <Canvas />\n                            <FieldConfigPanel />\n                        </>\n                    )}\n                </div>\n            </div>\n\n            {createPortal(\n                <DragOverlay dropAnimation={dropAnimation}>\n                    {activeId && activeData?.type === 'toolbox-item' && (\n                        <div className=\"p-3 bg-white border border-blue-500 rounded shadow-lg w-48\">\n                            {activeData.fieldType}\n                        </div>\n                    )}\n                    {activeId && activeData?.type === 'field' && (\n                        <div className=\"opacity-80\">\n                            <SortableField field={activeData.field} />\n                        </div>\n                    )}\n                    {activeId && activeData?.type === 'section' && (\n                        <div className=\"opacity-80\">\n                            <SortableSection section={activeData.section} />\n                        </div>\n                    )}\n                </DragOverlay>,\n                document.body\n            )}\n        </DndContext>\n    );\n};\n","import { create } from 'zustand';\nimport { FormSchema, FormSection, FormField, FieldType } from './schemaTypes';\nimport { generateId, DEFAULT_FIELD_CONFIG } from './constants';\n\ninterface FormState {\n    schema: FormSchema;\n    selectedFieldId: string | null;\n    history: FormSchema[];\n    historyIndex: number;\n    isPreviewMode: boolean;\n\n    // Actions\n    setSchema: (schema: FormSchema) => void;\n    togglePreview: () => void;\n    addSection: () => void;\n    removeSection: (sectionId: string) => void;\n    updateSection: (sectionId: string, updates: Partial<FormSection>) => void;\n    moveSection: (activeId: string, overId: string) => void;\n\n    addField: (sectionId: string, type: FieldType, index?: number) => void;\n    removeField: (fieldId: string) => void;\n    updateField: (fieldId: string, updates: Partial<FormField>) => void;\n    selectField: (fieldId: string | null) => void;\n    moveField: (activeId: string, overId: string, activeSectionId: string, overSectionId: string) => void;\n\n    undo: () => void;\n    redo: () => void;\n    canUndo: () => boolean;\n    canRedo: () => boolean;\n}\n\nconst INITIAL_SCHEMA: FormSchema = {\n    id: 'form_1',\n    title: 'My New Form',\n    sections: [\n        {\n            id: generateId(),\n            title: 'Section 1',\n            fields: [],\n        },\n    ],\n};\n\nexport const useFormStore = create<FormState>((set, get) => ({\n    schema: INITIAL_SCHEMA,\n    selectedFieldId: null,\n    history: [INITIAL_SCHEMA],\n    historyIndex: 0,\n    isPreviewMode: false,\n\n    setSchema: (schema) => set({ schema }),\n    togglePreview: () => set((state) => ({ isPreviewMode: !state.isPreviewMode })),\n\n    addSection: () => {\n        const { schema, history, historyIndex } = get();\n        const newSection: FormSection = {\n            id: generateId(),\n            title: `Section ${schema.sections.length + 1}`,\n            fields: [],\n        };\n        const newSchema = { ...schema, sections: [...schema.sections, newSection] };\n\n        set({\n            schema: newSchema,\n            history: [...history.slice(0, historyIndex + 1), newSchema],\n            historyIndex: historyIndex + 1,\n        });\n    },\n\n    removeSection: (sectionId) => {\n        const { schema, history, historyIndex } = get();\n        const newSchema = {\n            ...schema,\n            sections: schema.sections.filter((s) => s.id !== sectionId),\n        };\n        set({\n            schema: newSchema,\n            history: [...history.slice(0, historyIndex + 1), newSchema],\n            historyIndex: historyIndex + 1,\n        });\n    },\n\n    updateSection: (sectionId, updates) => {\n        const { schema, history, historyIndex } = get();\n        const newSchema = {\n            ...schema,\n            sections: schema.sections.map((s) =>\n                s.id === sectionId ? { ...s, ...updates } : s\n            ),\n        };\n        set({\n            schema: newSchema,\n            history: [...history.slice(0, historyIndex + 1), newSchema],\n            historyIndex: historyIndex + 1,\n        });\n    },\n\n    moveSection: (activeId, overId) => {\n        const { schema, history, historyIndex } = get();\n        const oldIndex = schema.sections.findIndex(s => s.id === activeId);\n        const newIndex = schema.sections.findIndex(s => s.id === overId);\n\n        if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return;\n\n        const newSections = [...schema.sections];\n        const [movedSection] = newSections.splice(oldIndex, 1);\n        newSections.splice(newIndex, 0, movedSection);\n\n        const newSchema = { ...schema, sections: newSections };\n        set({\n            schema: newSchema,\n            history: [...history.slice(0, historyIndex + 1), newSchema],\n            historyIndex: historyIndex + 1,\n        });\n    },\n\n    addField: (sectionId, type, index) => {\n        const { schema, history, historyIndex } = get();\n        const newField: FormField = {\n            id: generateId(),\n            type,\n            ...DEFAULT_FIELD_CONFIG[type],\n        } as FormField;\n\n        const newSchema = {\n            ...schema,\n            sections: schema.sections.map((s) => {\n                if (s.id === sectionId) {\n                    const newFields = [...s.fields];\n                    if (typeof index === 'number') {\n                        newFields.splice(index, 0, newField);\n                    } else {\n                        newFields.push(newField);\n                    }\n                    return { ...s, fields: newFields };\n                }\n                return s;\n            }),\n        };\n\n        set({\n            schema: newSchema,\n            selectedFieldId: newField.id,\n            history: [...history.slice(0, historyIndex + 1), newSchema],\n            historyIndex: historyIndex + 1,\n        });\n    },\n\n    removeField: (fieldId) => {\n        const { schema, history, historyIndex } = get();\n        const newSchema = {\n            ...schema,\n            sections: schema.sections.map((s) => ({\n                ...s,\n                fields: s.fields.filter((f) => f.id !== fieldId),\n            })),\n        };\n        set({\n            schema: newSchema,\n            selectedFieldId: null,\n            history: [...history.slice(0, historyIndex + 1), newSchema],\n            historyIndex: historyIndex + 1,\n        });\n    },\n\n    updateField: (fieldId, updates) => {\n        const { schema, history, historyIndex } = get();\n        const newSchema = {\n            ...schema,\n            sections: schema.sections.map((s) => ({\n                ...s,\n                fields: s.fields.map((f) => (f.id === fieldId ? { ...f, ...updates } : f)),\n            })),\n        };\n        set({\n            schema: newSchema,\n            history: [...history.slice(0, historyIndex + 1), newSchema],\n            historyIndex: historyIndex + 1,\n        });\n    },\n\n    selectField: (fieldId) => set({ selectedFieldId: fieldId }),\n\n    moveField: (activeId, overId, activeSectionId, overSectionId) => {\n        const { schema, history, historyIndex } = get();\n\n        // Deep clone to avoid mutation issues\n        const newSections = schema.sections.map(s => ({\n            ...s,\n            fields: [...s.fields]\n        }));\n\n        const activeSectionIndex = newSections.findIndex(s => s.id === activeSectionId);\n        const overSectionIndex = newSections.findIndex(s => s.id === overSectionId);\n\n        if (activeSectionIndex === -1 || overSectionIndex === -1) return;\n\n        const activeSection = newSections[activeSectionIndex];\n        const overSection = newSections[overSectionIndex];\n\n        const activeFieldIndex = activeSection.fields.findIndex(f => f.id === activeId);\n        const overFieldIndex = overSection.fields.findIndex(f => f.id === overId);\n\n        if (activeFieldIndex === -1) return;\n\n        // If moving within the same section\n        if (activeSectionId === overSectionId) {\n            if (activeFieldIndex === overFieldIndex) return;\n            const [movedField] = activeSection.fields.splice(activeFieldIndex, 1);\n            // If overFieldIndex is -1 (dropped on section container but not on a field), push to end? \n            // But dnd-kit usually gives us a valid overId if we are over a sortable.\n            // If overId is the section itself, we might handle it differently.\n            // For now assume overId is a field.\n            activeSection.fields.splice(overFieldIndex, 0, movedField);\n        } else {\n            // Moving to different section\n            const [movedField] = activeSection.fields.splice(activeFieldIndex, 1);\n\n            // If overId is the section ID, append to end of that section\n            if (overId === overSectionId) {\n                overSection.fields.push(movedField);\n            } else {\n                // Insert before the target field\n                // If overFieldIndex is -1, it might mean we are over the container.\n                // We need to be careful here.\n                const insertIndex = overFieldIndex >= 0 ? overFieldIndex : overSection.fields.length;\n                overSection.fields.splice(insertIndex, 0, movedField);\n            }\n        }\n\n        const newSchema = { ...schema, sections: newSections };\n        set({\n            schema: newSchema,\n            history: [...history.slice(0, historyIndex + 1), newSchema],\n            historyIndex: historyIndex + 1,\n        });\n    },\n\n    undo: () => {\n        const { history, historyIndex } = get();\n        if (historyIndex > 0) {\n            set({\n                schema: history[historyIndex - 1],\n                historyIndex: historyIndex - 1,\n            });\n        }\n    },\n\n    redo: () => {\n        const { history, historyIndex } = get();\n        if (historyIndex < history.length - 1) {\n            set({\n                schema: history[historyIndex + 1],\n                historyIndex: historyIndex + 1,\n            });\n        }\n    },\n\n    canUndo: () => get().historyIndex > 0,\n    canRedo: () => get().historyIndex < get().history.length - 1,\n}));\n","import { FieldType, FormField } from './schemaTypes';\nimport { v4 as uuidv4 } from 'uuid'; // We might need uuid, but for now I'll use a simple generator or just Date.now() if uuid isn't installed. Wait, I didn't install uuid. I'll use a helper.\n\nexport const generateId = () => Math.random().toString(36).substring(2, 9);\n\nexport const FIELD_TYPES: { type: FieldType; label: string; icon: string }[] = [\n    { type: 'text', label: 'Text Input', icon: 'Type' },\n    { type: 'textarea', label: 'Text Area', icon: 'AlignLeft' },\n    { type: 'number', label: 'Number', icon: 'Hash' },\n    { type: 'email', label: 'Email', icon: 'Mail' },\n    { type: 'phone', label: 'Phone', icon: 'Phone' },\n    { type: 'date', label: 'Date Picker', icon: 'Calendar' },\n    { type: 'select', label: 'Dropdown', icon: 'ChevronDown' },\n    { type: 'checkbox', label: 'Checkbox', icon: 'CheckSquare' },\n    { type: 'radio', label: 'Radio Group', icon: 'CircleDot' },\n    { type: 'toggle', label: 'Toggle', icon: 'ToggleLeft' }, // Lucide icon names, will be mapped later\n    { type: 'file', label: 'File Upload', icon: 'Upload' },\n];\n\nexport const DEFAULT_FIELD_CONFIG: Record<FieldType, Partial<FormField>> = {\n    text: { label: 'Text Input', placeholder: 'Enter text...', width: '100%' },\n    textarea: { label: 'Text Area', placeholder: 'Enter description...', width: '100%' },\n    number: { label: 'Number', placeholder: '0', width: '50%' },\n    email: { label: 'Email', placeholder: 'example@email.com', width: '100%', validation: [{ type: 'email', message: 'Invalid email' }] },\n    phone: { label: 'Phone', placeholder: '+1 234 567 8900', width: '100%' },\n    date: { label: 'Date', width: '50%' },\n    select: { label: 'Dropdown', options: [{ label: 'Option 1', value: 'opt1' }, { label: 'Option 2', value: 'opt2' }], width: '100%' },\n    checkbox: { label: 'Checkbox', width: '100%' },\n    radio: { label: 'Radio Group', options: [{ label: 'Option 1', value: 'opt1' }, { label: 'Option 2', value: 'opt2' }], width: '100%' },\n    toggle: { label: 'Toggle', width: '50%' },\n    file: { label: 'File Upload', width: '100%' },\n};\n","import React from 'react';\nimport { useFormStore } from '../core/useFormStore';\nimport { Undo, Redo, Eye, Save, Trash2 } from 'lucide-react';\nimport { clsx } from 'clsx';\n\nexport const Toolbar: React.FC = () => {\n    const { undo, redo, canUndo, canRedo, setSchema, togglePreview, isPreviewMode } = useFormStore();\n\n    const handleSave = () => {\n        const schema = useFormStore.getState().schema;\n        console.log('Saved Schema:', JSON.stringify(schema, null, 2));\n        alert('Schema saved to console!');\n    };\n\n    const handleClear = () => {\n        if (confirm('Are you sure you want to clear the form?')) {\n            setSchema({\n                id: 'form_' + Date.now(),\n                title: 'New Form',\n                sections: []\n            });\n        }\n    };\n\n    return (\n        <div className=\"flex items-center justify-between p-4 border-b bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800\">\n            <div className=\"flex items-center space-x-2\">\n                <h1 className=\"text-xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent mr-4\">\n                    FormBuilder Pro\n                </h1>\n                <button\n                    onClick={undo}\n                    disabled={!canUndo()}\n                    className=\"p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n                    title=\"Undo\"\n                >\n                    <Undo size={18} />\n                </button>\n                <button\n                    onClick={redo}\n                    disabled={!canRedo()}\n                    className=\"p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n                    title=\"Redo\"\n                >\n                    <Redo size={18} />\n                </button>\n            </div>\n            <div className=\"flex items-center space-x-2\">\n                <button\n                    onClick={handleClear}\n                    className=\"flex items-center px-3 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-md transition-colors\"\n                >\n                    <Trash2 size={16} className=\"mr-2\" />\n                    Clear\n                </button>\n                <button\n                    onClick={togglePreview}\n                    className={clsx(\n                        \"flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors\",\n                        isPreviewMode\n                            ? \"bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200\"\n                            : \"text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800\"\n                    )}\n                >\n                    <Eye size={16} className=\"mr-2\" />\n                    {isPreviewMode ? 'Edit' : 'Preview'}\n                </button>\n                <button\n                    onClick={handleSave}\n                    className=\"flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md shadow-sm transition-colors\"\n                >\n                    <Save size={16} className=\"mr-2\" />\n                    Save\n                </button>\n            </div>\n        </div>\n    );\n};\n","import React from 'react';\nimport { useDraggable } from '@dnd-kit/core';\nimport { FIELD_TYPES } from '../core/constants';\nimport * as Icons from 'lucide-react';\nimport { FieldType } from '../core/schemaTypes';\n\n// Helper to get icon component dynamically\nconst getIcon = (name: string) => {\n    const Icon = (Icons as any)[name];\n    return Icon ? <Icon size={16} /> : null;\n};\n\ninterface ToolboxItemProps {\n    type: FieldType;\n    label: string;\n    icon: string;\n}\n\nconst ToolboxItem: React.FC<ToolboxItemProps> = ({ type, label, icon }) => {\n    const { attributes, listeners, setNodeRef, transform } = useDraggable({\n        id: `toolbox-${type}`,\n        data: {\n            type: 'toolbox-item',\n            fieldType: type,\n        },\n    });\n\n    const style = transform ? {\n        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n    } : undefined;\n\n    return (\n        <div\n            ref={setNodeRef}\n            {...listeners}\n            {...attributes}\n            style={style}\n            className=\"flex items-center p-3 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md cursor-move hover:border-blue-500 hover:shadow-sm transition-all\"\n        >\n            <span className=\"mr-3 text-gray-500 dark:text-gray-400\">{getIcon(icon)}</span>\n            <span className=\"text-sm font-medium text-gray-700 dark:text-gray-200\">{label}</span>\n        </div>\n    );\n};\n\nexport const FieldToolbox: React.FC = () => {\n    return (\n        <div className=\"w-64 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 p-4 overflow-y-auto h-full\">\n            <h2 className=\"text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4\">\n                Form Fields\n            </h2>\n            <div className=\"space-y-1\">\n                {FIELD_TYPES.map((field) => (\n                    <ToolboxItem\n                        key={field.type}\n                        type={field.type}\n                        label={field.label}\n                        icon={field.icon}\n                    />\n                ))}\n            </div>\n        </div>\n    );\n};\n","import React from 'react';\nimport { useDroppable } from '@dnd-kit/core';\nimport { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { useFormStore } from '../core/useFormStore';\nimport { SortableSection } from './SortableSection';\nimport { Plus } from 'lucide-react';\n\nexport const Canvas: React.FC = () => {\n    const { schema, addSection, selectField } = useFormStore();\n\n    const { setNodeRef } = useDroppable({\n        id: 'canvas',\n        data: {\n            type: 'canvas',\n        },\n    });\n\n    return (\n        <div\n            className=\"flex-1 bg-gray-100 dark:bg-gray-950 p-8 overflow-y-auto h-full\"\n            onClick={() => selectField(null)} // Deselect on clicking background\n        >\n            <div className=\"max-w-3xl mx-auto\">\n                <div className=\"mb-8 text-center\">\n                    <input\n                        value={schema.title}\n                        onChange={(e) => useFormStore.getState().setSchema({ ...schema, title: e.target.value })}\n                        className=\"text-3xl font-bold text-center bg-transparent border-none focus:outline-none focus:ring-0 w-full text-gray-900 dark:text-white\"\n                        placeholder=\"Form Title\"\n                    />\n                </div>\n\n                <div ref={setNodeRef} className=\"space-y-6 min-h-[200px]\">\n                    <SortableContext\n                        items={schema.sections.map((s) => s.id)}\n                        strategy={verticalListSortingStrategy}\n                    >\n                        {schema.sections.map((section) => (\n                            <SortableSection key={section.id} section={section} />\n                        ))}\n                    </SortableContext>\n                </div>\n\n                <button\n                    onClick={addSection}\n                    className=\"w-full mt-6 py-4 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg text-gray-500 hover:border-blue-500 hover:text-blue-500 transition-colors flex items-center justify-center font-medium\"\n                >\n                    <Plus size={20} className=\"mr-2\" />\n                    Add Section\n                </button>\n            </div>\n        </div>\n    );\n};\n","import React from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { SortableContext, verticalListSortingStrategy, rectSortingStrategy } from '@dnd-kit/sortable';\nimport { FormSection } from '../core/schemaTypes';\nimport { SortableField } from './SortableField';\nimport { useFormStore } from '../core/useFormStore';\nimport { GripVertical, Trash2, Plus } from 'lucide-react';\nimport { clsx } from 'clsx';\nimport { useDroppable } from '@dnd-kit/core';\n\ninterface SortableSectionProps {\n    section: FormSection;\n}\n\nexport const SortableSection: React.FC<SortableSectionProps> = ({ section }) => {\n    const {\n        attributes,\n        listeners,\n        setNodeRef,\n        transform,\n        transition,\n        isDragging,\n    } = useSortable({\n        id: section.id,\n        data: {\n            type: 'section',\n            section,\n        },\n    });\n\n    const { removeSection, updateSection } = useFormStore();\n\n    // Make the section droppable for fields\n    const { setNodeRef: setDroppableNodeRef } = useDroppable({\n        id: section.id,\n        data: {\n            type: 'section',\n            section,\n        },\n    });\n\n    const style = {\n        transform: CSS.Transform.toString(transform),\n        transition,\n    };\n\n    return (\n        <div\n            ref={setNodeRef}\n            style={style}\n            className={clsx(\n                \"mb-6 rounded-lg border bg-white dark:bg-gray-900 shadow-sm transition-all\",\n                isDragging ? \"opacity-50 z-50 border-blue-500\" : \"border-gray-200 dark:border-gray-800\"\n            )}\n        >\n            {/* Section Header */}\n            <div className=\"flex items-center justify-between p-4 border-b border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50 rounded-t-lg\">\n                <div className=\"flex items-center flex-1\">\n                    <div\n                        {...attributes}\n                        {...listeners}\n                        className=\"cursor-move mr-3 text-gray-400 hover:text-gray-600\"\n                    >\n                        <GripVertical size={20} />\n                    </div>\n                    <input\n                        value={section.title}\n                        onChange={(e) => updateSection(section.id, { title: e.target.value })}\n                        className=\"bg-transparent font-semibold text-gray-700 dark:text-gray-200 focus:outline-none focus:border-b border-blue-500\"\n                        placeholder=\"Section Title\"\n                    />\n                </div>\n                <button\n                    onClick={() => removeSection(section.id)}\n                    className=\"text-gray-400 hover:text-red-500 transition-colors p-1\"\n                >\n                    <Trash2 size={18} />\n                </button>\n            </div>\n\n            {/* Section Body (Grid for Fields) */}\n            <div\n                ref={setDroppableNodeRef}\n                className=\"p-4 min-h-[100px] grid grid-cols-4 gap-4\"\n            >\n                <SortableContext\n                    items={section.fields.map((f) => f.id)}\n                    strategy={rectSortingStrategy} // Use rect strategy for grid\n                >\n                    {section.fields.map((field) => (\n                        <SortableField key={field.id} field={field} />\n                    ))}\n                </SortableContext>\n\n                {section.fields.length === 0 && (\n                    <div className=\"col-span-4 flex flex-col items-center justify-center py-8 border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-lg text-gray-400\">\n                        <p className=\"text-sm\">Drop fields here</p>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n","import React from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { FormField } from '../core/schemaTypes';\nimport { FieldRenderer } from '../renderer/FieldRenderer';\nimport { useFormStore } from '../core/useFormStore';\nimport { GripVertical, Trash2 } from 'lucide-react';\nimport { clsx } from 'clsx';\n\ninterface SortableFieldProps {\n    field: FormField;\n}\n\nexport const SortableField: React.FC<SortableFieldProps> = ({ field }) => {\n    const {\n        attributes,\n        listeners,\n        setNodeRef,\n        transform,\n        transition,\n        isDragging,\n    } = useSortable({\n        id: field.id,\n        data: {\n            type: 'field',\n            field,\n        },\n    });\n\n    const { selectField, selectedFieldId, removeField } = useFormStore();\n    const isSelected = selectedFieldId === field.id;\n\n    const style = {\n        transform: CSS.Transform.toString(transform),\n        transition,\n        gridColumn: field.width === '100%' ? 'span 4' : field.width === '50%' ? 'span 2' : 'span 1',\n    };\n\n    return (\n        <div\n            ref={setNodeRef}\n            style={style}\n            className={clsx(\n                \"relative group rounded-lg border-2 transition-all bg-white dark:bg-gray-800\",\n                isSelected ? \"border-blue-500 ring-2 ring-blue-200\" : \"border-transparent hover:border-gray-300 dark:hover:border-gray-600\",\n                isDragging && \"opacity-50 z-50\"\n            )}\n            onClick={(e) => {\n                e.stopPropagation();\n                selectField(field.id);\n            }}\n        >\n            {/* Drag Handle */}\n            <div\n                {...attributes}\n                {...listeners}\n                className={clsx(\n                    \"absolute top-2 left-2 cursor-move p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity\",\n                    isSelected && \"opacity-100\"\n                )}\n            >\n                <GripVertical size={16} />\n            </div>\n\n            {/* Delete Button */}\n            <button\n                onClick={(e) => {\n                    e.stopPropagation();\n                    removeField(field.id);\n                }}\n                className={clsx(\n                    \"absolute top-2 right-2 p-1 rounded hover:bg-red-50 text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity\",\n                    isSelected && \"opacity-100\"\n                )}\n            >\n                <Trash2 size={16} />\n            </button>\n\n            {/* Field Content */}\n            <div className=\"p-4 pointer-events-none\">\n                <FieldRenderer field={field} readOnly />\n            </div>\n        </div>\n    );\n};\n","import React from 'react';\nimport { FormField } from '../core/schemaTypes';\nimport { clsx } from 'clsx';\n\ninterface FieldRendererProps {\n    field: FormField;\n    value?: any;\n    onChange?: (value: any) => void;\n    readOnly?: boolean;\n    error?: string;\n}\n\nexport const FieldRenderer: React.FC<FieldRendererProps> = ({ field, value, onChange, readOnly, error }) => {\n    const baseInputClass = \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\";\n\n    const renderInput = () => {\n        switch (field.type) {\n            case 'text':\n            case 'email':\n            case 'phone':\n            case 'number':\n            case 'date':\n            case 'file':\n                return (\n                    <input\n                        type={field.type === 'phone' ? 'tel' : field.type}\n                        id={field.id}\n                        placeholder={field.placeholder}\n                        className={baseInputClass}\n                        value={value || ''}\n                        onChange={(e) => onChange?.(e.target.value)}\n                        disabled={readOnly}\n                    />\n                );\n            case 'textarea':\n                return (\n                    <textarea\n                        id={field.id}\n                        placeholder={field.placeholder}\n                        className={clsx(baseInputClass, \"min-h-[80px]\")}\n                        value={value || ''}\n                        onChange={(e) => onChange?.(e.target.value)}\n                        disabled={readOnly}\n                    />\n                );\n            case 'select':\n                return (\n                    <select\n                        id={field.id}\n                        className={baseInputClass}\n                        value={value || ''}\n                        onChange={(e) => onChange?.(e.target.value)}\n                        disabled={readOnly}\n                    >\n                        <option value=\"\" disabled>Select an option</option>\n                        {field.options?.map((opt) => (\n                            <option key={opt.value} value={opt.value}>\n                                {opt.label}\n                            </option>\n                        ))}\n                    </select>\n                );\n            case 'checkbox':\n                return (\n                    <div className=\"flex items-center h-10\">\n                        <input\n                            type=\"checkbox\"\n                            id={field.id}\n                            className=\"h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer\"\n                            checked={!!value}\n                            onChange={(e) => onChange?.(e.target.checked)}\n                            disabled={readOnly}\n                        />\n                    </div>\n                );\n            case 'radio':\n                return (\n                    <div className=\"space-y-2\">\n                        {field.options?.map((opt) => (\n                            <div key={opt.value} className=\"flex items-center space-x-2\">\n                                <input\n                                    type=\"radio\"\n                                    id={`${field.id}-${opt.value}`}\n                                    name={field.id}\n                                    value={opt.value}\n                                    checked={value === opt.value}\n                                    onChange={(e) => onChange?.(e.target.value)}\n                                    disabled={readOnly}\n                                    className=\"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n                                />\n                                <label htmlFor={`${field.id}-${opt.value}`} className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n                                    {opt.label}\n                                </label>\n                            </div>\n                        ))}\n                    </div>\n                );\n            case 'toggle':\n                return (\n                    <div className=\"flex items-center space-x-2\">\n                        <button\n                            type=\"button\"\n                            role=\"switch\"\n                            aria-checked={!!value}\n                            onClick={() => !readOnly && onChange?.(!value)}\n                            className={clsx(\n                                \"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n                                value ? \"bg-primary\" : \"bg-input\"\n                            )}\n                            disabled={readOnly}\n                        >\n                            <span\n                                className={clsx(\n                                    \"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform\",\n                                    value ? \"translate-x-5\" : \"translate-x-0\"\n                                )}\n                            />\n                        </button>\n                    </div>\n                );\n            default:\n                return <div className=\"text-red-500\">Unknown field type: {field.type}</div>;\n        }\n    };\n\n    return (\n        <div className=\"w-full\">\n            <label htmlFor={field.id} className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 block text-gray-900 dark:text-gray-100\">\n                {field.label}\n                {field.required && <span className=\"text-red-500 ml-1\">*</span>}\n            </label>\n            {renderInput()}\n            {field.description && (\n                <p className=\"text-sm text-muted-foreground mt-1\">{field.description}</p>\n            )}\n            {error && (\n                <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n            )}\n        </div>\n    );\n};\n","import React from 'react';\nimport { useFormStore } from '../core/useFormStore';\nimport { FieldWidth, ValidationRule } from '../core/schemaTypes';\nimport { X } from 'lucide-react';\n\nexport const FieldConfigPanel: React.FC = () => {\n    const { schema, selectedFieldId, updateField, selectField } = useFormStore();\n\n    const selectedField = React.useMemo(() => {\n        if (!selectedFieldId) return null;\n        for (const section of schema.sections) {\n            const field = section.fields.find((f) => f.id === selectedFieldId);\n            if (field) return field;\n        }\n        return null;\n    }, [schema, selectedFieldId]);\n\n    if (!selectedField) {\n        return (\n            <div className=\"w-80 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 p-6 flex flex-col items-center justify-center text-center text-gray-500\">\n                <p>Select a field to configure its properties</p>\n            </div>\n        );\n    }\n\n    const handleValidationChange = (type: ValidationRule['type'], value: any, checked: boolean) => {\n        const currentValidation = selectedField.validation || [];\n        if (checked) {\n            updateField(selectedField.id, { validation: [...currentValidation, { type, value }] });\n        } else {\n            updateField(selectedField.id, { validation: currentValidation.filter(v => v.type !== type) });\n        }\n    };\n\n    return (\n        <div className=\"w-80 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 flex flex-col h-full\">\n            <div className=\"flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800\">\n                <h2 className=\"font-semibold text-gray-900 dark:text-white\">Field Settings</h2>\n                <button onClick={() => selectField(null)} className=\"text-gray-500 hover:text-gray-700\">\n                    <X size={20} />\n                </button>\n            </div>\n\n            <div className=\"flex-1 overflow-y-auto p-4 space-y-6\">\n                {/* General Settings */}\n                <div className=\"space-y-4\">\n                    <div>\n                        <label className=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Label</label>\n                        <input\n                            type=\"text\"\n                            value={selectedField.label}\n                            onChange={(e) => updateField(selectedField.id, { label: e.target.value })}\n                            className=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent\"\n                        />\n                    </div>\n\n                    <div>\n                        <label className=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Placeholder</label>\n                        <input\n                            type=\"text\"\n                            value={selectedField.placeholder || ''}\n                            onChange={(e) => updateField(selectedField.id, { placeholder: e.target.value })}\n                            className=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent\"\n                        />\n                    </div>\n\n                    <div>\n                        <label className=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Description</label>\n                        <textarea\n                            value={selectedField.description || ''}\n                            onChange={(e) => updateField(selectedField.id, { description: e.target.value })}\n                            className=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent\"\n                            rows={2}\n                        />\n                    </div>\n                </div>\n\n                <hr className=\"border-gray-200 dark:border-gray-800\" />\n\n                {/* Layout Settings */}\n                <div className=\"space-y-4\">\n                    <h3 className=\"text-sm font-medium text-gray-900 dark:text-white\">Layout</h3>\n                    <div>\n                        <label className=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Width</label>\n                        <select\n                            value={selectedField.width}\n                            onChange={(e) => updateField(selectedField.id, { width: e.target.value as FieldWidth })}\n                            className=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent\"\n                        >\n                            <option value=\"25%\">25% (1/4)</option>\n                            <option value=\"50%\">50% (1/2)</option>\n                            <option value=\"100%\">100% (Full)</option>\n                        </select>\n                    </div>\n                </div>\n\n                <hr className=\"border-gray-200 dark:border-gray-800\" />\n\n                {/* Validation Settings */}\n                <div className=\"space-y-4\">\n                    <h3 className=\"text-sm font-medium text-gray-900 dark:text-white\">Validation</h3>\n\n                    <div className=\"flex items-center justify-between\">\n                        <label className=\"text-sm text-gray-700 dark:text-gray-300\">Required</label>\n                        <input\n                            type=\"checkbox\"\n                            checked={selectedField.required || false}\n                            onChange={(e) => updateField(selectedField.id, { required: e.target.checked })}\n                            className=\"h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500\"\n                        />\n                    </div>\n                </div>\n\n                {/* Options (for Select, Radio, etc.) */}\n                {(selectedField.type === 'select' || selectedField.type === 'radio') && (\n                    <>\n                        <hr className=\"border-gray-200 dark:border-gray-800\" />\n                        <div className=\"space-y-4\">\n                            <h3 className=\"text-sm font-medium text-gray-900 dark:text-white\">Options</h3>\n                            {selectedField.options?.map((option, index) => (\n                                <div key={index} className=\"flex gap-2\">\n                                    <input\n                                        placeholder=\"Label\"\n                                        value={option.label}\n                                        onChange={(e) => {\n                                            const newOptions = [...(selectedField.options || [])];\n                                            newOptions[index].label = e.target.value;\n                                            updateField(selectedField.id, { options: newOptions });\n                                        }}\n                                        className=\"flex-1 px-2 py-1 border border-gray-300 dark:border-gray-700 rounded text-sm\"\n                                    />\n                                    <input\n                                        placeholder=\"Value\"\n                                        value={option.value}\n                                        onChange={(e) => {\n                                            const newOptions = [...(selectedField.options || [])];\n                                            newOptions[index].value = e.target.value;\n                                            updateField(selectedField.id, { options: newOptions });\n                                        }}\n                                        className=\"flex-1 px-2 py-1 border border-gray-300 dark:border-gray-700 rounded text-sm\"\n                                    />\n                                    <button\n                                        onClick={() => {\n                                            const newOptions = selectedField.options?.filter((_, i) => i !== index);\n                                            updateField(selectedField.id, { options: newOptions });\n                                        }}\n                                        className=\"text-red-500 hover:text-red-700\"\n                                    >\n                                        <X size={16} />\n                                    </button>\n                                </div>\n                            ))}\n                            <button\n                                onClick={() => {\n                                    const newOptions = [...(selectedField.options || []), { label: 'New Option', value: 'new_option' }];\n                                    updateField(selectedField.id, { options: newOptions });\n                                }}\n                                className=\"text-sm text-blue-600 hover:text-blue-700 font-medium\"\n                            >\n                                + Add Option\n                            </button>\n                        </div>\n                    </>\n                )}\n            </div>\n        </div>\n    );\n};\n","import React, { useState } from 'react';\nimport { FormSchema } from '../core/schemaTypes';\nimport { FieldRenderer } from './FieldRenderer';\nimport { clsx } from 'clsx';\n\ninterface FormRendererProps {\n    schema: FormSchema;\n    onSubmit?: (data: Record<string, any>) => void;\n    className?: string;\n}\n\nexport const FormRenderer: React.FC<FormRendererProps> = ({ schema, onSubmit, className }) => {\n    const [formData, setFormData] = useState<Record<string, any>>({});\n    const [errors, setErrors] = useState<Record<string, string>>({});\n\n    const handleChange = (fieldId: string, value: any) => {\n        setFormData((prev) => ({ ...prev, [fieldId]: value }));\n        // Clear error on change\n        if (errors[fieldId]) {\n            setErrors((prev) => {\n                const newErrors = { ...prev };\n                delete newErrors[fieldId];\n                return newErrors;\n            });\n        }\n    };\n\n    const validate = () => {\n        const newErrors: Record<string, string> = {};\n        let isValid = true;\n\n        schema.sections.forEach((section) => {\n            section.fields.forEach((field) => {\n                const value = formData[field.id];\n\n                // Required check\n                if (field.required && !value) {\n                    newErrors[field.id] = 'This field is required';\n                    isValid = false;\n                }\n\n                // Custom validation rules\n                if (field.validation) {\n                    field.validation.forEach(rule => {\n                        if (rule.type === 'email' && value && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)) {\n                            newErrors[field.id] = rule.message || 'Invalid email address';\n                            isValid = false;\n                        }\n                        if (rule.type === 'min' && typeof value === 'number' && value < (rule.value as number)) {\n                            newErrors[field.id] = rule.message || `Minimum value is ${rule.value}`;\n                            isValid = false;\n                        }\n                        // Add more rules as needed\n                    });\n                }\n            });\n        });\n\n        setErrors(newErrors);\n        return isValid;\n    };\n\n    const handleSubmit = (e: React.FormEvent) => {\n        e.preventDefault();\n        if (validate()) {\n            onSubmit?.(formData);\n        }\n    };\n\n    return (\n        <form onSubmit={handleSubmit} className={clsx(\"space-y-8\", className)}>\n            <div className=\"space-y-2\">\n                <h1 className=\"text-2xl font-bold text-gray-900 dark:text-white\">{schema.title}</h1>\n            </div>\n\n            {schema.sections.map((section) => (\n                <div key={section.id} className=\"space-y-4\">\n                    <h2 className=\"text-xl font-semibold text-gray-800 dark:text-gray-200 border-b pb-2\">\n                        {section.title}\n                    </h2>\n\n                    <div className=\"grid grid-cols-4 gap-4\">\n                        {section.fields.map((field) => (\n                            <div\n                                key={field.id}\n                                style={{\n                                    gridColumn: field.width === '100%' ? 'span 4' : field.width === '50%' ? 'span 2' : 'span 1',\n                                }}\n                            >\n                                <FieldRenderer\n                                    field={field}\n                                    value={formData[field.id]}\n                                    onChange={(val) => handleChange(field.id, val)}\n                                    error={errors[field.id]}\n                                />\n                            </div>\n                        ))}\n                    </div>\n                </div>\n            ))}\n\n            <div className=\"pt-4\">\n                <button\n                    type=\"submit\"\n                    className=\"px-6 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors\"\n                >\n                    Submit\n                </button>\n            </div>\n        </form>\n    );\n};\n"]}