@enerjisaformlibrary/formbuilder-react 1.0.8 → 1.0.22

package/index.js

@@ -8104,6 +8104,25 @@ const AlignLeft = createLucideIcon("AlignLeft", [
  */
 
 
+const BookOpen = createLucideIcon("BookOpen", [
+  ["path", { d: "M12 7v14", key: "1akyts" }],
+  [
+    "path",
+    {
+      d: "M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z",
+      key: "ruj8y"
+    }
+  ]
+]);
+
+/**
+ * @license lucide-react v0.453.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
 const Box = createLucideIcon("Box", [
   [
     "path",
@@ -9414,16 +9433,26 @@ const createEmptyForm = () => ({
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
 });
+const MAX_HISTORY = 50;
+const pushToHistory = (state) => {
+    const newHistory = state.history.slice(0, state.historyIndex + 1);
+    newHistory.push(JSON.parse(JSON.stringify(state.form)));
+    if (newHistory.length > MAX_HISTORY) {
+        newHistory.shift();
+    }
+    return { history: newHistory, historyIndex: newHistory.length - 1 };
+};
+const initialForm = createDemoForm();
 const useFormStore = create((set, get) => ({
-    form: createDemoForm(),
+    form: initialForm,
     selection: { type: null },
     isPreviewMode: false,
     currentStepIndex: 0,
     currentLanguage: 'en',
     formValues: {},
     canvasWidth: 'full',
-    history: [],
-    historyIndex: -1,
+    history: [JSON.parse(JSON.stringify(initialForm))],
+    historyIndex: 0,
     setCanvasWidth: (width) => set({ canvasWidth: width }),
     undo: () => {
         const state = get();
@@ -9460,75 +9489,87 @@ const useFormStore = create((set, get) => ({
         selection: { type: null },
         formValues: {},
     })),
-    clearForm: () => set({
-        form: createEmptyForm(),
-        selection: { type: null },
-        currentStepIndex: 0,
-        formValues: {},
-    }),
+    clearForm: () => {
+        const newForm = createEmptyForm();
+        return set({
+            form: newForm,
+            selection: { type: null },
+            currentStepIndex: 0,
+            formValues: {},
+            history: [JSON.parse(JSON.stringify(newForm))],
+            historyIndex: 0,
+        });
+    },
     loadForm: (form) => set({
         form,
         selection: { type: null },
         currentStepIndex: 0,
         formValues: {},
+        history: [JSON.parse(JSON.stringify(form))],
+        historyIndex: 0,
     }),
     addRow: (columns = 1, stepId) => set((state) => {
         const newRow = createEmptyRow(columns);
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
             const targetStepId = stepId || state.form.steps[state.currentStepIndex]?.id;
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps.map(s => s.id === targetStepId ? { ...s, rows: [...s.rows, newRow] } : s),
-                    updatedAt: new Date().toISOString(),
-                },
+            newForm = {
+                ...state.form,
+                steps: state.form.steps.map(s => s.id === targetStepId ? { ...s, rows: [...s.rows, newRow] } : s),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: {
+        else {
+            newForm = {
                 ...state.form,
                 rows: [...state.form.rows, newRow],
                 updatedAt: new Date().toISOString(),
-            },
-        };
+            };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
     }),
     updateRow: (rowId, updates) => set((state) => {
         const updateRows = (rows) => rows.map((row) => (row.id === rowId ? { ...row, ...updates } : row));
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
-                    updatedAt: new Date().toISOString(),
-                },
+            newForm = {
+                ...state.form,
+                steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: {
+        else {
+            newForm = {
                 ...state.form,
                 rows: updateRows(state.form.rows),
                 updatedAt: new Date().toISOString(),
-            },
-        };
+            };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
     }),
     deleteRow: (rowId) => set((state) => {
         const filterRows = (rows) => rows.filter((row) => row.id !== rowId);
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps.map(s => ({ ...s, rows: filterRows(s.rows) })),
-                    updatedAt: new Date().toISOString(),
-                },
-                selection: state.selection.rowId === rowId ? { type: null } : state.selection,
+            newForm = {
+                ...state.form,
+                steps: state.form.steps.map(s => ({ ...s, rows: filterRows(s.rows) })),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: {
+        else {
+            newForm = {
                 ...state.form,
                 rows: filterRows(state.form.rows),
                 updatedAt: new Date().toISOString(),
-            },
+            };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return {
+            form: newForm,
+            ...historyUpdate,
             selection: state.selection.rowId === rowId ? { type: null } : state.selection,
         };
     }),
@@ -9539,18 +9580,19 @@ const useFormStore = create((set, get) => ({
             newRows.splice(toIndex, 0, removed);
             return newRows;
         };
+        let newForm;
         if (state.form.isMultiStep && stepId) {
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps?.map(s => s.id === stepId ? { ...s, rows: moveInRows(s.rows) } : s),
-                    updatedAt: new Date().toISOString(),
-                },
+            newForm = {
+                ...state.form,
+                steps: state.form.steps?.map(s => s.id === stepId ? { ...s, rows: moveInRows(s.rows) } : s),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: { ...state.form, rows: moveInRows(state.form.rows) },
-        };
+        else {
+            newForm = { ...state.form, rows: moveInRows(state.form.rows), updatedAt: new Date().toISOString() };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
     }),
     addColumn: (rowId) => set((state) => {
         const updateRows = (rows) => rows.map((row) => {
@@ -9566,22 +9608,23 @@ const useFormStore = create((set, get) => ({
                 ],
             };
         });
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
-                    updatedAt: new Date().toISOString(),
-                },
+            newForm = {
+                ...state.form,
+                steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: {
+        else {
+            newForm = {
                 ...state.form,
                 rows: updateRows(state.form.rows),
                 updatedAt: new Date().toISOString(),
-            },
-        };
+            };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
     }),
     updateColumn: (rowId, columnId, updates) => set((state) => {
         const updateRows = (rows) => rows.map((row) => row.id === rowId
@@ -9590,22 +9633,23 @@ const useFormStore = create((set, get) => ({
                 columns: row.columns.map((col) => col.id === columnId ? { ...col, ...updates } : col),
             }
             : row);
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
-                    updatedAt: new Date().toISOString(),
-                },
+            newForm = {
+                ...state.form,
+                steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: {
+        else {
+            newForm = {
                 ...state.form,
                 rows: updateRows(state.form.rows),
                 updatedAt: new Date().toISOString(),
-            },
-        };
+            };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
     }),
     deleteColumn: (rowId, columnId) => set((state) => {
         const updateRows = (rows) => rows.map((row) => {
@@ -9620,22 +9664,25 @@ const useFormStore = create((set, get) => ({
                 columns: newColumns.map((col) => ({ ...col, width })),
             };
         });
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
-                    updatedAt: new Date().toISOString(),
-                },
-                selection: state.selection.columnId === columnId ? { type: null } : state.selection,
+            newForm = {
+                ...state.form,
+                steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: {
+        else {
+            newForm = {
                 ...state.form,
                 rows: updateRows(state.form.rows),
                 updatedAt: new Date().toISOString(),
-            },
+            };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return {
+            form: newForm,
+            ...historyUpdate,
             selection: state.selection.columnId === columnId ? { type: null } : state.selection,
         };
     }),
@@ -9664,22 +9711,23 @@ const useFormStore = create((set, get) => ({
                 columns: newColumns.map((col) => ({ ...col, width })),
             };
         });
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
-                    updatedAt: new Date().toISOString(),
-                },
+            newForm = {
+                ...state.form,
+                steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: {
+        else {
+            newForm = {
                 ...state.form,
                 rows: updateRows(state.form.rows),
                 updatedAt: new Date().toISOString(),
-            },
-        };
+            };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
     }),
     addField: (rowId, columnId, field) => set((state) => {
         const updateRows = (rows) => rows.map((row) => row.id === rowId
@@ -9693,22 +9741,23 @@ const useFormStore = create((set, get) => ({
                     : col),
             }
             : row);
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
-                    updatedAt: new Date().toISOString(),
-                },
+            newForm = {
+                ...state.form,
+                steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: {
+        else {
+            newForm = {
                 ...state.form,
                 rows: updateRows(state.form.rows),
                 updatedAt: new Date().toISOString(),
-            },
-        };
+            };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
     }),
     addRowWithField: (field) => set((state) => {
         const newRow = {
@@ -9719,25 +9768,26 @@ const useFormStore = create((set, get) => ({
                     fields: [{ ...field, id: nanoid() }],
                 }],
         };
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
             const currentStep = state.form.steps[state.currentStepIndex];
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps.map(s => s.id === currentStep.id
-                        ? { ...s, rows: [...s.rows, newRow] }
-                        : s),
-                    updatedAt: new Date().toISOString(),
-                },
+            newForm = {
+                ...state.form,
+                steps: state.form.steps.map(s => s.id === currentStep.id
+                    ? { ...s, rows: [...s.rows, newRow] }
+                    : s),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: {
+        else {
+            newForm = {
                 ...state.form,
                 rows: [...state.form.rows, newRow],
                 updatedAt: new Date().toISOString(),
-            },
-        };
+            };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
     }),
     addFieldToContainerDirect: (rowId, columnId, containerFieldId, field) => set((state) => {
         const newField = { ...field, id: nanoid() };
@@ -9763,22 +9813,23 @@ const useFormStore = create((set, get) => ({
                     : col),
             }
             : row);
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
-                    updatedAt: new Date().toISOString(),
-                },
+            newForm = {
+                ...state.form,
+                steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: {
+        else {
+            newForm = {
                 ...state.form,
                 rows: updateRows(state.form.rows),
                 updatedAt: new Date().toISOString(),
-            },
-        };
+            };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
     }),
     addFieldToContainer: (rowId, columnId, containerFieldId, containerRowId, containerColumnId, field) => set((state) => {
         const newField = { ...field, id: nanoid() };
@@ -9814,22 +9865,23 @@ const useFormStore = create((set, get) => ({
                     : col),
             }
             : row);
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
-                    updatedAt: new Date().toISOString(),
-                },
+            newForm = {
+                ...state.form,
+                steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: {
+        else {
+            newForm = {
                 ...state.form,
                 rows: updateRows(state.form.rows),
                 updatedAt: new Date().toISOString(),
-            },
-        };
+            };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
     }),
     updateField: (rowId, columnId, fieldId, updates) => set((state) => {
         const updateFieldInContainer = (field) => {
@@ -9894,22 +9946,23 @@ const useFormStore = create((set, get) => ({
                     : col),
             }
             : row);
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
-                    updatedAt: new Date().toISOString(),
-                },
+            newForm = {
+                ...state.form,
+                steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: {
+        else {
+            newForm = {
                 ...state.form,
                 rows: updateRows(state.form.rows),
                 updatedAt: new Date().toISOString(),
-            },
-        };
+            };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
     }),
     deleteField: (rowId, columnId, fieldId) => set((state) => {
         const updateRows = (rows) => rows.map((row) => row.id === rowId
@@ -9940,22 +9993,25 @@ const useFormStore = create((set, get) => ({
                     : col),
             }
             : row);
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
-            return {
-                form: {
-                    ...state.form,
-                    steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
-                    updatedAt: new Date().toISOString(),
-                },
-                selection: state.selection.fieldId === fieldId ? { type: null } : state.selection,
+            newForm = {
+                ...state.form,
+                steps: state.form.steps.map(s => ({ ...s, rows: updateRows(s.rows) })),
+                updatedAt: new Date().toISOString(),
             };
         }
-        return {
-            form: {
+        else {
+            newForm = {
                 ...state.form,
                 rows: updateRows(state.form.rows),
                 updatedAt: new Date().toISOString(),
-            },
+            };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return {
+            form: newForm,
+            ...historyUpdate,
             selection: state.selection.fieldId === fieldId ? { type: null } : state.selection,
         };
     }),
@@ -9993,22 +10049,23 @@ const useFormStore = create((set, get) => ({
             }
             return row;
         });
+        let newForm;
         if (state.form.isMultiStep && state.form.steps?.length) {
             let newSteps = state.form.steps.map(s => ({ ...s, rows: extractField(s.rows) }));
             if (!movedField)
                 return state;
             newSteps = newSteps.map(s => ({ ...s, rows: insertField(s.rows) }));
-            return {
-                form: { ...state.form, steps: newSteps, updatedAt: new Date().toISOString() },
-            };
+            newForm = { ...state.form, steps: newSteps, updatedAt: new Date().toISOString() };
         }
-        const rows = extractField(state.form.rows);
-        if (!movedField)
-            return state;
-        const finalRows = insertField(rows);
-        return {
-            form: { ...state.form, rows: finalRows, updatedAt: new Date().toISOString() },
-        };
+        else {
+            const rows = extractField(state.form.rows);
+            if (!movedField)
+                return state;
+            const finalRows = insertField(rows);
+            newForm = { ...state.form, rows: finalRows, updatedAt: new Date().toISOString() };
+        }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
     }),
     addStep: () => set((state) => {
         const newStep = createEmptyStep(state.form.steps?.length || 0);
@@ -10021,22 +10078,27 @@ const useFormStore = create((set, get) => ({
             },
         };
     }),
-    updateStep: (stepId, updates) => set((state) => ({
-        form: {
+    updateStep: (stepId, updates) => set((state) => {
+        const newForm = {
             ...state.form,
             steps: state.form.steps?.map(s => s.id === stepId ? { ...s, ...updates } : s),
             updatedAt: new Date().toISOString(),
-        },
-    })),
+        };
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
+    }),
     deleteStep: (stepId) => set((state) => {
         const newSteps = state.form.steps?.filter(s => s.id !== stepId) || [];
+        const newForm = {
+            ...state.form,
+            steps: newSteps,
+            isMultiStep: newSteps.length > 0,
+            updatedAt: new Date().toISOString(),
+        };
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
         return {
-            form: {
-                ...state.form,
-                steps: newSteps,
-                isMultiStep: newSteps.length > 0,
-                updatedAt: new Date().toISOString(),
-            },
+            form: newForm,
+            ...historyUpdate,
             currentStepIndex: Math.min(state.currentStepIndex, Math.max(0, newSteps.length - 1)),
             selection: state.selection.stepId === stepId ? { type: null } : state.selection,
         };
@@ -10045,9 +10107,9 @@ const useFormStore = create((set, get) => ({
         const steps = [...(state.form.steps || [])];
         const [removed] = steps.splice(fromIndex, 1);
         steps.splice(toIndex, 0, removed);
-        return {
-            form: { ...state.form, steps, updatedAt: new Date().toISOString() },
-        };
+        const newForm = { ...state.form, steps, updatedAt: new Date().toISOString() };
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate };
     }),
     setCurrentStep: (index) => set((state) => ({
         currentStepIndex: Math.max(0, Math.min(index, (state.form.steps?.length || 1) - 1)),
@@ -10059,33 +10121,30 @@ const useFormStore = create((set, get) => ({
         currentStepIndex: Math.max(0, state.currentStepIndex - 1),
     })),
     toggleMultiStep: () => set((state) => {
+        let newForm;
         if (state.form.isMultiStep) {
             const allRows = state.form.steps?.flatMap(s => s.rows) || [];
-            return {
-                form: {
-                    ...state.form,
-                    isMultiStep: false,
-                    rows: [...state.form.rows, ...allRows],
-                    steps: [],
-                    updatedAt: new Date().toISOString(),
-                },
-                currentStepIndex: 0,
+            newForm = {
+                ...state.form,
+                isMultiStep: false,
+                rows: [...state.form.rows, ...allRows],
+                steps: [],
+                updatedAt: new Date().toISOString(),
             };
         }
         else {
             const step = createEmptyStep(0);
             step.rows = [...state.form.rows];
-            return {
-                form: {
-                    ...state.form,
-                    isMultiStep: true,
-                    rows: [],
-                    steps: [step],
-                    updatedAt: new Date().toISOString(),
-                },
-                currentStepIndex: 0,
+            newForm = {
+                ...state.form,
+                isMultiStep: true,
+                rows: [],
+                steps: [step],
+                updatedAt: new Date().toISOString(),
             };
         }
+        const historyUpdate = pushToHistory({ form: newForm, history: state.history, historyIndex: state.historyIndex });
+        return { form: newForm, ...historyUpdate, currentStepIndex: 0 };
     }),
     updateSubmissionConfig: (config) => set((state) => ({
         form: {
@@ -18584,7 +18643,7 @@ function MultiSelectField({ value, onChange, options, disabled, maxItems, classN
 }
 function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMode, getFieldValue: externalGetFieldValue, setFieldValue: externalSetFieldValue, isInsideContainer = false, fieldSize = 'normal' }) {
     const store = useFormStore();
-    const { selection, setSelection, deleteField, evaluateCondition, clearFormValues } = store;
+    const { selection, setSelection, deleteField, evaluateCondition, clearFormValues, formValues } = store;
     const isPreviewMode = externalPreviewMode ?? store.isPreviewMode;
     const getFieldValue = externalGetFieldValue ?? store.getFieldValue;
     const setFieldValue = externalSetFieldValue ?? store.setFieldValue;
@@ -18608,6 +18667,15 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
             // Reset rating, slider values
             setRatingValue(field.props.defaultValue ? parseInt(field.props.defaultValue) || 0 : 0);
             setSliderValue([field.props.defaultValue ? parseInt(field.props.defaultValue) || 50 : 50]);
+            // Auto focus when entering preview mode
+            if (field.props.autoFocus) {
+                setTimeout(() => {
+                    const input = document.querySelector(`[data-testid^="field-"][data-testid$="-${field.id}"]`);
+                    if (input && input.focus) {
+                        input.focus();
+                    }
+                }, 100);
+            }
         }
     }, [isPreviewMode]);
     const isSelected = selection.type === 'field' &&
@@ -18640,8 +18708,59 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
                 break;
         }
         return { visible, enabled, required };
-    }, [field.conditionalLogic, field.validation?.required, evaluateCondition]);
-    if (isPreviewMode && !conditionalState.visible) {
+    }, [field.conditionalLogic, field.validation?.required, evaluateCondition, formValues]);
+    const handleChange = useCallback((newValue) => {
+        setLocalValue(newValue);
+        setFieldValue(field.props.key, newValue);
+        if (touched) {
+            setError(validateField(newValue, field.validation, field.type));
+        }
+    }, [touched, field.validation, field.type, field.props.key, setFieldValue]);
+    const handleBlur = useCallback(() => {
+        setTouched(true);
+        setError(validateField(localValue, field.validation, field.type));
+    }, [localValue, field.validation, field.type]);
+    // Execute field actions (onClick, onChange, onFocus, onBlur events)
+    const executeActions = useCallback((eventType) => {
+        if (!isPreviewMode || !field.events)
+            return;
+        const actions = field.events[eventType];
+        if (!actions || actions.length === 0)
+            return;
+        actions.forEach((action) => {
+            if (action.type === 'common') {
+                switch (action.name) {
+                    case 'focusField':
+                        if (action.args?.targetFieldKey) {
+                            setTimeout(() => {
+                                const allInputs = document.querySelectorAll('[data-field-key]');
+                                allInputs.forEach((el) => {
+                                    if (el.getAttribute('data-field-key') === action.args?.targetFieldKey) {
+                                        el.focus();
+                                    }
+                                });
+                            }, 50);
+                        }
+                        break;
+                    case 'clearField':
+                        setLocalValue('');
+                        setFieldValue(field.props.key, '');
+                        break;
+                    case 'showMessage':
+                        if (action.args?.message) {
+                            alert(action.args.message);
+                        }
+                        break;
+                    case 'reset':
+                        clearFormValues();
+                        break;
+                }
+            }
+        });
+    }, [isPreviewMode, field.events, field.props.key, setFieldValue, clearFormValues]);
+    // Early return for hidden fields - MUST be after all hooks
+    // Check both conditional visibility AND explicit hidden property
+    if (isPreviewMode && (!conditionalState.visible || field.props.hidden)) {
         return null;
     }
     const isFieldDisabled = field.props.disabled || !isPreviewMode || !conditionalState.enabled;
@@ -18656,18 +18775,10 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
                 fieldId: field.id,
             });
         }
-    };
-    const handleChange = useCallback((newValue) => {
-        setLocalValue(newValue);
-        setFieldValue(field.props.key, newValue);
-        if (touched) {
-            setError(validateField(newValue, field.validation, field.type));
+        else {
+            executeActions('onClick');
         }
-    }, [touched, field.validation, field.type, field.props.key, setFieldValue]);
-    const handleBlur = useCallback(() => {
-        setTouched(true);
-        setError(validateField(localValue, field.validation, field.type));
-    }, [localValue, field.validation, field.type]);
+    };
     const sizeClasses = {
         small: 'h-8 text-sm',
         medium: 'h-9',
@@ -18690,51 +18801,51 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
         const errorClass = hasError ? 'border-destructive focus-visible:ring-destructive' : '';
         switch (field.type) {
             case 'input':
-                return (jsx(Input, { placeholder: field.props.placeholder, disabled: isFieldDisabled, readOnly: field.props.readOnly, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { placeholder: field.props.placeholder, disabled: isFieldDisabled, readOnly: field.props.readOnly, autoFocus: isPreviewMode && field.props.autoFocus, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-                    }, "data-testid": `field-input-${field.id}` }));
+                    }, "data-testid": `field-input-${field.id}`, "data-field-key": field.props.key }));
             case 'password':
-                return (jsx(Input, { type: "password", placeholder: field.props.placeholder, disabled: isFieldDisabled, value: isPreviewMode ? localValue : '', onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "password", placeholder: field.props.placeholder, disabled: isFieldDisabled, autoFocus: isPreviewMode && field.props.autoFocus, value: isPreviewMode ? localValue : '', onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-                    }, "data-testid": `field-password-${field.id}` }));
+                    }, "data-testid": `field-password-${field.id}`, "data-field-key": field.props.key }));
             case 'phone':
-                return (jsx(Input, { type: "tel", placeholder: field.props.placeholder || '+1 (555) 000-0000', disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "tel", placeholder: field.props.placeholder || '+1 (555) 000-0000', disabled: isFieldDisabled, autoFocus: isPreviewMode && field.props.autoFocus, "data-field-key": field.props.key, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, "data-testid": `field-phone-${field.id}` }));
             case 'url':
-                return (jsx(Input, { type: "url", placeholder: field.props.placeholder || 'https://example.com', disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "url", placeholder: field.props.placeholder || 'https://example.com', disabled: isFieldDisabled, autoFocus: isPreviewMode && field.props.autoFocus, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-                    }, "data-testid": `field-url-${field.id}` }));
+                    }, "data-testid": `field-url-${field.id}`, "data-field-key": field.props.key }));
             case 'textarea':
-                return (jsx(Textarea, { placeholder: field.props.placeholder, disabled: isFieldDisabled, readOnly: field.props.readOnly, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `min-h-[80px] ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Textarea, { placeholder: field.props.placeholder, disabled: isFieldDisabled, readOnly: field.props.readOnly, autoFocus: isPreviewMode && field.props.autoFocus, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `min-h-[80px] ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-                    }, "data-testid": `field-textarea-${field.id}` }));
+                    }, "data-testid": `field-textarea-${field.id}`, "data-field-key": field.props.key }));
             case 'dropdown':
                 const dropdownOptions = typeof field.props.optionsString === 'string'
                     ? field.props.optionsString.split('\n').filter((o) => o.trim())
                     : (field.props.optionsString || []);
-                return (jsxs(Select, { disabled: isFieldDisabled, value: isPreviewMode ? localValue : undefined, onValueChange: (v) => isPreviewMode && handleChange(v), children: [jsx(SelectTrigger, { className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsxs(Select, { disabled: isFieldDisabled, value: isPreviewMode ? localValue : undefined, onValueChange: (v) => isPreviewMode && handleChange(v), children: [jsx(SelectTrigger, { className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, tabIndex: tabIndexValue, style: {
                                 ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                                 ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                             }, "data-testid": `field-dropdown-${field.id}`, children: jsx(SelectValue, { placeholder: field.props.placeholder || 'Select...' }) }), jsx(SelectContent, { children: dropdownOptions.map((option, i) => (jsx(SelectItem, { value: option, children: option }, i))) })] }));
             case 'checkbox':
-                return (jsxs("div", { className: `flex items-center gap-2 ${field.customStyle?.inputClassName || ''}`, children: [jsx(Checkbox, { disabled: isFieldDisabled, "data-testid": `field-checkbox-${field.id}` }), jsx("span", { className: "text-sm text-foreground", style: {
+                return (jsxs("div", { className: `flex items-center gap-2 ${field.customStyle?.inputClassName || ''}`, children: [jsx(Checkbox, { disabled: isFieldDisabled, tabIndex: tabIndexValue, "data-testid": `field-checkbox-${field.id}` }), jsx("span", { className: "text-sm text-foreground", style: {
                                 ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                             }, children: field.props.label })] }));
             case 'radio':
                 const radioOptions = typeof field.props.optionsString === 'string'
                     ? field.props.optionsString.split('\n').filter((o) => o.trim())
                     : (field.props.optionsString || []);
-                return (jsx(RadioGroup$1, { disabled: isFieldDisabled, className: field.customStyle?.inputClassName || '', children: radioOptions.map((option, i) => (jsxs("div", { className: "flex items-center gap-2", children: [jsx(RadioGroupItem, { value: option, id: `${field.id}-${i}`, "data-testid": `field-radio-${field.id}-${i}` }), jsx(Label$2, { htmlFor: `${field.id}-${i}`, className: "text-sm", style: {
+                return (jsx(RadioGroup$1, { disabled: isFieldDisabled, className: field.customStyle?.inputClassName || '', children: radioOptions.map((option, i) => (jsxs("div", { className: "flex items-center gap-2", children: [jsx(RadioGroupItem, { value: option, id: `${field.id}-${i}`, tabIndex: tabIndexValue, "data-testid": `field-radio-${field.id}-${i}` }), jsx(Label$2, { htmlFor: `${field.id}-${i}`, className: "text-sm", style: {
                                     ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                                 }, children: option })] }, i))) }));
             case 'toggle':
-                return (jsxs("div", { className: `flex items-center gap-2 ${field.customStyle?.inputClassName || ''}`, children: [jsx(Switch, { disabled: isFieldDisabled, "data-testid": `field-toggle-${field.id}` }), jsx("span", { className: "text-sm text-foreground", style: {
+                return (jsxs("div", { className: `flex items-center gap-2 ${field.customStyle?.inputClassName || ''}`, children: [jsx(Switch, { disabled: isFieldDisabled, tabIndex: tabIndexValue, "data-testid": `field-toggle-${field.id}` }), jsx("span", { className: "text-sm text-foreground", style: {
                                 ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                             }, children: field.props.label })] }));
             case 'multiselect':
@@ -18743,30 +18854,30 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
                         setFieldValue(field.props.key, v);
                     }, options: field.props.optionsString || [], disabled: isFieldDisabled, maxItems: field.props.multiSelectConfig?.maxItems, className: field.customStyle?.inputClassName }));
             case 'date':
-                return (jsx(Input, { type: "date", disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "date", disabled: isFieldDisabled, autoFocus: isPreviewMode && field.props.autoFocus, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-                    }, "data-testid": `field-date-${field.id}` }));
+                    }, "data-testid": `field-date-${field.id}`, "data-field-key": field.props.key }));
             case 'time':
-                return (jsx(Input, { type: "time", disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "time", disabled: isFieldDisabled, autoFocus: isPreviewMode && field.props.autoFocus, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-                    }, "data-testid": `field-time-${field.id}` }));
+                    }, "data-testid": `field-time-${field.id}`, "data-field-key": field.props.key }));
             case 'daterange':
-                return (jsxs("div", { className: `flex gap-2 items-center ${field.customStyle?.inputClassName || ''}`, children: [jsx(Input, { type: "date", disabled: isFieldDisabled, className: inputSize, style: {
+                return (jsxs("div", { className: `flex gap-2 items-center ${field.customStyle?.inputClassName || ''}`, children: [jsx(Input, { type: "date", disabled: isFieldDisabled, tabIndex: tabIndexValue, className: inputSize, style: {
                                 ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                             }, "data-testid": `field-daterange-start-${field.id}` }), jsx("span", { className: "text-muted-foreground", style: {
                                 ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
-                            }, children: "to" }), jsx(Input, { type: "date", disabled: isFieldDisabled, className: inputSize, style: {
+                            }, children: "to" }), jsx(Input, { type: "date", disabled: isFieldDisabled, tabIndex: tabIndexValue !== undefined ? tabIndexValue + 1 : undefined, className: inputSize, style: {
                                 ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                             }, "data-testid": `field-daterange-end-${field.id}` })] }));
             case 'number':
-                return (jsx(Input, { type: "number", placeholder: field.props.placeholder, disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "number", placeholder: field.props.placeholder, disabled: isFieldDisabled, autoFocus: isPreviewMode && field.props.autoFocus, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-                    }, "data-testid": `field-number-${field.id}` }));
+                    }, "data-testid": `field-number-${field.id}`, "data-field-key": field.props.key }));
             case 'email':
-                return (jsx(Input, { type: "email", placeholder: field.props.placeholder, disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "email", placeholder: field.props.placeholder, disabled: isFieldDisabled, autoFocus: isPreviewMode && field.props.autoFocus, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, "data-field-key": field.props.key, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, "data-testid": `field-email-${field.id}` }));
@@ -18792,7 +18903,7 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, "data-testid": `field-richtext-${field.id}` }));
             case 'autocomplete':
-                return (jsx("div", { className: `relative ${field.customStyle?.inputClassName || ''}`, children: jsx(Input, { placeholder: field.props.placeholder || 'Start typing...', disabled: isFieldDisabled, value: isPreviewMode ? localValue : '', onChange: (e) => isPreviewMode && handleChange(e.target.value), className: `${inputSize} ${errorClass}`, style: {
+                return (jsx("div", { className: `relative ${field.customStyle?.inputClassName || ''}`, children: jsx(Input, { placeholder: field.props.placeholder || 'Start typing...', disabled: isFieldDisabled, value: isPreviewMode ? localValue : '', onChange: (e) => isPreviewMode && handleChange(e.target.value), tabIndex: tabIndexValue, className: `${inputSize} ${errorClass}`, style: {
                             ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                             ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                         }, "data-testid": `field-autocomplete-${field.id}` }) }));
@@ -18800,7 +18911,7 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
                 return (jsxs("div", { className: `space-y-2 ${field.customStyle?.inputClassName || ''}`, children: [jsx(Slider, { value: sliderValue, onValueChange: (v) => {
                                 setSliderValue(v);
                                 setFieldValue(field.props.key, v[0]);
-                            }, min: field.validation?.min || 0, max: field.validation?.max || 100, step: 1, disabled: isFieldDisabled, "data-testid": `field-slider-${field.id}` }), jsxs("div", { className: "flex justify-between text-xs text-muted-foreground", children: [jsx("span", { children: field.validation?.min || 0 }), jsx("span", { className: "font-medium text-foreground", style: {
+                            }, min: field.validation?.min || 0, max: field.validation?.max || 100, step: 1, disabled: isFieldDisabled, tabIndex: tabIndexValue, "data-testid": `field-slider-${field.id}` }), jsxs("div", { className: "flex justify-between text-xs text-muted-foreground", children: [jsx("span", { children: field.validation?.min || 0 }), jsx("span", { className: "font-medium text-foreground", style: {
                                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                                     }, children: sliderValue[0] }), jsx("span", { children: field.validation?.max || 100 })] })] }));
             case 'header':
@@ -19795,15 +19906,30 @@ function FieldProperties() {
                                                 });
                                             }, className: "w-full gap-2", children: [jsx(Plus, { className: "h-4 w-4" }), "Add Attribute"] })] })] }), jsx(Separator$1, {}), hasOptions && (jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Options" }), jsxs("div", { className: "space-y-2", children: [getOptionsArray().map((option, i) => (jsxs("div", { className: "flex gap-2", children: [jsx(Input, { value: option, onChange: (e) => handleUpdateOption(i, e.target.value), className: "flex-1", "data-testid": `input-option-${i}` }), jsx(Button, { variant: "outline", size: "icon", onClick: () => handleRemoveOption(i), "data-testid": `button-remove-option-${i}`, children: jsx(Trash2, { className: "h-4 w-4" }) })] }, i))), jsxs(Button, { variant: "outline", size: "sm", onClick: handleAddOption, className: "w-full gap-2", "data-testid": "button-add-option", children: [jsx(Plus, { className: "h-4 w-4" }), "Add Option"] })] })] })), field.type === 'button' && (jsxs("div", { className: "space-y-4", children: [jsx(Separator$1, {}), jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Button Settings" }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Action" }), jsxs(Select, { value: field.props.buttonConfig?.action || 'submit', onValueChange: (value) => handleUpdateProp('buttonConfig', { ...field.props.buttonConfig, action: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "submit", children: "Submit Form" }), jsx(SelectItem, { value: "reset", children: "Reset Form" }), jsx(SelectItem, { value: "custom", children: "Custom Action" })] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Variant" }), jsxs(Select, { value: field.props.buttonConfig?.variant || 'default', onValueChange: (value) => handleUpdateProp('buttonConfig', { ...field.props.buttonConfig, variant: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "default", children: "Default" }), jsx(SelectItem, { value: "outline", children: "Outline" }), jsx(SelectItem, { value: "secondary", children: "Secondary" }), jsx(SelectItem, { value: "destructive", children: "Destructive" }), jsx(SelectItem, { value: "ghost", children: "Ghost" })] })] })] })] })), field.type === 'pattern' && (jsxs("div", { className: "space-y-4", children: [jsx(Separator$1, {}), jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Pattern Format" }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Format Pattern" }), jsx(Input, { value: field.props.patternConfig?.format || '(###) ###-####', onChange: (e) => handleUpdateProp('patternConfig', { ...field.props.patternConfig, format: e.target.value }), placeholder: "(###) ###-####" }), jsx("p", { className: "text-xs text-muted-foreground", children: "Use # for digit placeholders" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Mask Character" }), jsx(Input, { value: field.props.patternConfig?.mask || '_', onChange: (e) => handleUpdateProp('patternConfig', { ...field.props.patternConfig, mask: e.target.value }), maxLength: 1 })] })] })), field.type === 'qrcode' && (jsxs("div", { className: "space-y-4", children: [jsx(Separator$1, {}), jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "QR Code Settings" }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "QR Value" }), jsx(Input, { value: field.props.qrCodeConfig?.value || 'https://example.com', onChange: (e) => handleUpdateProp('qrCodeConfig', { ...field.props.qrCodeConfig, value: e.target.value }), placeholder: "https://example.com" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Size (px)" }), jsx(Input, { type: "number", value: field.props.qrCodeConfig?.size || 128, onChange: (e) => handleUpdateProp('qrCodeConfig', { ...field.props.qrCodeConfig, size: parseInt(e.target.value) }), min: 64, max: 512 })] })] })), field.type === 'container' && (jsxs("div", { className: "space-y-4", children: [jsx(Separator$1, {}), jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Container Settings" }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Direction" }), jsxs(Select, { value: field.props.containerConfig?.direction || 'row', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, direction: value }), children: [jsx(SelectTrigger, { "data-testid": "select-container-direction", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "row", children: "Row (Horizontal)" }), jsx(SelectItem, { value: "column", children: "Column (Vertical)" })] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Inner Field Size (Density)" }), jsxs(Select, { value: field.props.containerConfig?.fieldSize || 'normal', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, fieldSize: value }), children: [jsx(SelectTrigger, { "data-testid": "container-field-size", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "compact", "data-testid": "field-size-compact", children: "Compact (Minimal)" }), jsx(SelectItem, { value: "normal", "data-testid": "field-size-normal", children: "Normal" }), jsx(SelectItem, { value: "comfortable", "data-testid": "field-size-comfortable", children: "Comfortable (Spacious)" })] })] }), jsx("p", { className: "text-xs text-muted-foreground", children: "Controls padding and font sizes for fields inside this container" })] }), jsx(Separator$1, {}), jsx("h5", { className: "text-xs font-medium text-muted-foreground", children: "Spacing & Layout" }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Gap (between items)" }), jsx(Input, { type: "number", value: field.props.containerConfig?.gap ?? 4, onChange: (e) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, gap: parseInt(e.target.value) }), min: 0, max: 16 }), jsx("p", { className: "text-xs text-muted-foreground", children: "Space between child elements (0-16)" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Padding (inner space)" }), jsx(Input, { type: "number", value: field.props.containerConfig?.padding ?? 4, onChange: (e) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, padding: parseInt(e.target.value) }), min: 0, max: 16 }), jsx("p", { className: "text-xs text-muted-foreground", children: "Inner spacing around content (0-16)" })] }), jsx(Separator$1, {}), jsx("h5", { className: "text-xs font-medium text-muted-foreground", children: "Flex Properties" }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Justify Content" }), jsxs(Select, { value: field.props.containerConfig?.justifyContent || 'flex-start', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, justifyContent: value }), children: [jsx(SelectTrigger, { "data-testid": "select-justify-content", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "flex-start", children: "Start" }), jsx(SelectItem, { value: "flex-end", children: "End" }), jsx(SelectItem, { value: "center", children: "Center" }), jsx(SelectItem, { value: "space-between", children: "Space Between" }), jsx(SelectItem, { value: "space-around", children: "Space Around" }), jsx(SelectItem, { value: "space-evenly", children: "Space Evenly" })] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Align Items" }), jsxs(Select, { value: field.props.containerConfig?.alignItems || 'stretch', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, alignItems: value }), children: [jsx(SelectTrigger, { "data-testid": "select-align-items", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "flex-start", children: "Start" }), jsx(SelectItem, { value: "flex-end", children: "End" }), jsx(SelectItem, { value: "center", children: "Center" }), jsx(SelectItem, { value: "stretch", children: "Stretch" }), jsx(SelectItem, { value: "baseline", children: "Baseline" })] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Flex Wrap" }), jsxs(Select, { value: field.props.containerConfig?.flexWrap || 'wrap', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, flexWrap: value }), children: [jsx(SelectTrigger, { "data-testid": "select-flex-wrap", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "wrap", children: "Wrap" }), jsx(SelectItem, { value: "nowrap", children: "No Wrap" })] })] })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label$2, { className: "text-sm", children: "Show Border" }), jsx(Switch, { checked: field.props.containerConfig?.border || false, onCheckedChange: (checked) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, border: checked }) })] }), jsx(Separator$1, {}), jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx("h5", { className: "text-sm font-medium", children: "Container Fields" }), jsxs("span", { className: "text-xs text-muted-foreground", children: [(field.props.containerConfig?.fields || []).length, " field(s)"] })] }), jsx("p", { className: "text-xs text-muted-foreground", children: "Drag fields onto the container. Set each field's width in its properties." })] })] })), field.type === 'table' && (jsxs("div", { className: "space-y-4 p-3 bg-muted/30 rounded-md", children: [jsx("h4", { className: "text-sm font-medium", children: "Table Configuration" }), jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label$2, { className: "text-sm", children: "Show Row Numbers" }), jsx(Switch, { checked: field.props.tableConfig?.showRowNumbers ?? true, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, showRowNumbers: checked }) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label$2, { className: "text-sm", children: "Allow Add Rows" }), jsx(Switch, { checked: field.props.tableConfig?.allowAddRows ?? true, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, allowAddRows: checked }) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label$2, { className: "text-sm", children: "Allow Delete Rows" }), jsx(Switch, { checked: field.props.tableConfig?.allowDeleteRows ?? false, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, allowDeleteRows: checked }) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label$2, { className: "text-sm", children: "Striped Rows" }), jsx(Switch, { checked: field.props.tableConfig?.striped ?? false, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, striped: checked }) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label$2, { className: "text-sm", children: "Bordered" }), jsx(Switch, { checked: field.props.tableConfig?.bordered ?? true, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, bordered: checked }) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label$2, { className: "text-sm", children: "Compact" }), jsx(Switch, { checked: field.props.tableConfig?.compact ?? false, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, compact: checked }) })] })] }), jsx(Separator$1, {}), jsxs("div", { className: "grid grid-cols-2 gap-3", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Min Rows" }), jsx(Input, { type: "number", value: field.props.tableConfig?.minRows ?? 1, onChange: (e) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, minRows: parseInt(e.target.value) || 1 }), min: 1, max: 100 })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Max Rows" }), jsx(Input, { type: "number", value: field.props.tableConfig?.maxRows ?? 100, onChange: (e) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, maxRows: parseInt(e.target.value) || 100 }), min: 1, max: 1000 })] })] }), jsx(Separator$1, {}), jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx("h5", { className: "text-sm font-medium", children: "Columns" }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
                                                         const currentColumns = field.props.tableConfig?.columns || [];
+                                                        const totalColumns = currentColumns.length + 1;
+                                                        const widthPerColumn = Math.floor(100 / totalColumns);
+                                                        const extraWidth = 100 % totalColumns;
+                                                        const updatedColumns = currentColumns.map((c, idx) => ({
+                                                            ...c,
+                                                            width: `${widthPerColumn + (idx < extraWidth ? 1 : 0)}%`
+                                                        }));
                                                         const newColumn = {
                                                             key: `col_${Date.now()}`,
-                                                            label: `Column ${currentColumns.length + 1}`,
+                                                            label: `Column ${totalColumns}`,
                                                             type: 'text',
+                                                            width: `${widthPerColumn}%`,
                                                         };
-                                                        handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: [...currentColumns, newColumn] });
+                                                        handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: [...updatedColumns, newColumn] });
                                                     }, children: [jsx(Plus, { className: "h-4 w-4 mr-1" }), "Add Column"] })] }), (field.props.tableConfig?.columns || []).map((col, colIndex) => (jsxs("div", { className: "p-3 bg-background rounded-md border border-border space-y-3", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("span", { className: "text-xs font-medium text-muted-foreground", children: ["Column ", colIndex + 1] }), jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => {
                                                                 const currentColumns = [...(field.props.tableConfig?.columns || [])];
                                                                 currentColumns.splice(colIndex, 1);
+                                                                if (currentColumns.length > 0) {
+                                                                    const widthPerColumn = Math.floor(100 / currentColumns.length);
+                                                                    const extraWidth = 100 % currentColumns.length;
+                                                                    currentColumns.forEach((c, idx) => {
+                                                                        currentColumns[idx] = { ...c, width: `${widthPerColumn + (idx < extraWidth ? 1 : 0)}%` };
+                                                                    });
+                                                                }
                                                                 handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
                                                             }, children: jsx(Trash2, { className: "h-3 w-3 text-destructive" }) })] }), jsxs("div", { className: "grid grid-cols-2 gap-2", children: [jsxs("div", { className: "space-y-1", children: [jsx(Label$2, { className: "text-xs", children: "Key" }), jsx(Input, { value: col.key, onChange: (e) => {
                                                                         const currentColumns = [...(field.props.tableConfig?.columns || [])];
@@ -19817,11 +19943,12 @@ function FieldProperties() {
                                                                         const currentColumns = [...(field.props.tableConfig?.columns || [])];
                                                                         currentColumns[colIndex] = { ...col, type: value };
                                                                         handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
-                                                                    }, children: [jsx(SelectTrigger, { className: "h-8 text-xs", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "text", children: "Text" }), jsx(SelectItem, { value: "number", children: "Number" }), jsx(SelectItem, { value: "email", children: "Email" }), jsx(SelectItem, { value: "date", children: "Date" }), jsx(SelectItem, { value: "select", children: "Select" }), jsx(SelectItem, { value: "checkbox", children: "Checkbox" })] })] })] }), jsxs("div", { className: "space-y-1", children: [jsx(Label$2, { className: "text-xs", children: "Width" }), jsx(Input, { value: col.width || '', onChange: (e) => {
+                                                                    }, children: [jsx(SelectTrigger, { className: "h-8 text-xs", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "text", children: "Text" }), jsx(SelectItem, { value: "number", children: "Number" }), jsx(SelectItem, { value: "email", children: "Email" }), jsx(SelectItem, { value: "date", children: "Date" }), jsx(SelectItem, { value: "select", children: "Select" }), jsx(SelectItem, { value: "checkbox", children: "Checkbox" })] })] })] }), jsxs("div", { className: "space-y-1", children: [jsx(Label$2, { className: "text-xs", children: "%Width" }), jsx(Input, { type: "number", value: col.width ? parseInt(col.width) || '' : '', onChange: (e) => {
                                                                         const currentColumns = [...(field.props.tableConfig?.columns || [])];
-                                                                        currentColumns[colIndex] = { ...col, width: e.target.value };
+                                                                        const newWidth = parseInt(e.target.value) || 0;
+                                                                        currentColumns[colIndex] = { ...col, width: newWidth > 0 ? `${newWidth}%` : '' };
                                                                         handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
-                                                                    }, placeholder: "auto", className: "text-xs h-8" })] }), jsxs("div", { className: "space-y-1", children: [jsx(Label$2, { className: "text-xs", children: "Required" }), jsx("div", { className: "flex items-center h-8", children: jsx(Switch, { checked: col.required || false, onCheckedChange: (checked) => {
+                                                                    }, placeholder: "25", min: 1, max: 100, className: "text-xs h-8" })] }), jsxs("div", { className: "space-y-1", children: [jsx(Label$2, { className: "text-xs", children: "Required" }), jsx("div", { className: "flex items-center h-8", children: jsx(Switch, { checked: col.required || false, onCheckedChange: (checked) => {
                                                                             const currentColumns = [...(field.props.tableConfig?.columns || [])];
                                                                             currentColumns[colIndex] = { ...col, required: checked };
                                                                             handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
@@ -19849,7 +19976,12 @@ function FieldProperties() {
                                                                         currentOptions.splice(optIndex, 1);
                                                                         currentColumns[colIndex] = { ...col, options: currentOptions };
                                                                         handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
-                                                                    }, children: jsx(Trash2, { className: "h-3 w-3 text-destructive" }) })] }, optIndex))), (!col.options || col.options.length === 0) && (jsx("p", { className: "text-xs text-muted-foreground italic", children: "Hen\u00FCz se\u00E7enek eklenmedi" }))] }))] }, col.key)))] })] })), (() => {
+                                                                    }, children: jsx(Trash2, { className: "h-3 w-3 text-destructive" }) })] }, optIndex))), (!col.options || col.options.length === 0) && (jsx("p", { className: "text-xs text-muted-foreground italic", children: "Hen\u00FCz se\u00E7enek eklenmedi" }))] }))] }, `col-${colIndex}`))), (field.props.tableConfig?.columns || []).length > 0 && (() => {
+                                            const columns = field.props.tableConfig?.columns || [];
+                                            const totalWidth = columns.reduce((sum, c) => sum + (parseInt(c.width || '0') || 0), 0);
+                                            const isValid = totalWidth === 100;
+                                            return (jsxs("div", { className: `flex items-center justify-between p-2 rounded-md text-xs ${isValid ? 'bg-green-500/10 text-green-600 dark:text-green-400' : 'bg-destructive/10 text-destructive'}`, children: [jsxs("span", { className: "font-medium", children: ["Total Width: ", totalWidth, "%"] }), !isValid && (jsx("span", { children: "Must equal 100%" })), isValid && (jsx("span", { children: "\u2713" }))] }));
+                                        })()] })] })), (() => {
                             const staticDisplayTypes = ['spacer', 'divider', 'header', 'subheader', 'label', 'paragraph', 'alert', 'image', 'qrcode', 'button'];
                             if (staticDisplayTypes.includes(field.type))
                                 return null;
@@ -19860,7 +19992,7 @@ function FieldProperties() {
                             return (jsx("div", { className: "text-center py-8 text-muted-foreground", children: jsx("p", { className: "text-sm", children: "Bu bile\u015Fen i\u00E7in do\u011Frulama kurallar\u0131 gerekli de\u011Fil." }) }));
                         }
                         return (jsxs(Fragment, { children: [jsxs("div", { className: "flex items-center gap-2 mb-4", children: [jsx(Settings2, { className: "h-4 w-4 text-muted-foreground" }), jsx("span", { className: "text-sm font-medium", children: "Validation Rules" })] }), jsxs("div", { className: "space-y-3 pb-4", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label$2, { className: "text-sm", children: "Auto Validate" }), jsx(Switch, { checked: field.validation?.autoValidate || false, onCheckedChange: (checked) => handleUpdateValidation('autoValidate', checked) })] }), jsx("p", { className: "text-xs text-muted-foreground", children: "Validate while typing" }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label$2, { className: "text-sm", children: "Validate on Blur" }), jsx(Switch, { checked: field.validation?.validateOnBlur ?? true, onCheckedChange: (checked) => handleUpdateValidation('validateOnBlur', checked) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label$2, { className: "text-sm", children: "Validate on Change" }), jsx(Switch, { checked: field.validation?.validateOnChange || false, onCheckedChange: (checked) => handleUpdateValidation('validateOnChange', checked) })] })] }), jsx(Separator$1, {}), jsxs("div", { className: "space-y-2 pt-4", children: [jsx(Label$2, { className: "text-sm", children: "Validation Type" }), jsxs(Select, { value: field.validation?.validationType || '', onValueChange: (value) => handleUpdateValidation('validationType', value || undefined), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "None" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "email", children: "Email" }), jsx(SelectItem, { value: "url", children: "URL" }), jsx(SelectItem, { value: "phone", children: "Phone" }), jsx(SelectItem, { value: "custom", children: "Custom" })] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Min Length" }), jsx(Input, { type: "number", min: 0, value: field.validation?.minLength || '', onChange: (e) => handleUpdateValidation('minLength', e.target.value ? parseInt(e.target.value) : undefined), "data-testid": "input-min-length" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Max Length" }), jsx(Input, { type: "number", min: 0, value: field.validation?.maxLength || '', onChange: (e) => handleUpdateValidation('maxLength', e.target.value ? parseInt(e.target.value) : undefined), "data-testid": "input-max-length" })] }), ['number', 'slider'].includes(field.type) && (jsxs(Fragment, { children: [jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Min Value" }), jsx(Input, { type: "number", value: field.validation?.min ?? '', onChange: (e) => handleUpdateValidation('min', e.target.value ? parseFloat(e.target.value) : undefined), "data-testid": "input-min-value" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Max Value" }), jsx(Input, { type: "number", value: field.validation?.max ?? '', onChange: (e) => handleUpdateValidation('max', e.target.value ? parseFloat(e.target.value) : undefined), "data-testid": "input-max-value" })] })] })), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Pattern (Regex)" }), jsx(Input, { value: field.validation?.pattern || '', onChange: (e) => handleUpdateValidation('pattern', e.target.value || undefined), placeholder: "^[a-zA-Z]+$", className: "font-mono text-sm", "data-testid": "input-pattern" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Custom Error Message" }), jsx(Input, { value: field.validation?.errorMessage || '', onChange: (e) => handleUpdateValidation('errorMessage', e.target.value || undefined), placeholder: "Please enter a valid value", "data-testid": "input-error-message" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Custom Validation (JS)" }), jsx(Textarea, { value: field.validation?.customValidation || '', onChange: (e) => handleUpdateValidation('customValidation', e.target.value || undefined), placeholder: "return value.length > 5;", className: "font-mono text-sm min-h-[80px]" }), jsx("p", { className: "text-xs text-muted-foreground", children: "Write JavaScript that returns true for valid values" })] }), jsx(Separator$1, {}), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(Zap, { className: "h-4 w-4 text-muted-foreground" }), jsx(Label$2, { className: "text-sm font-medium", children: "Conditional Logic" })] }), jsx(Switch, { checked: field.conditionalLogic?.enabled || false, onCheckedChange: (checked) => handleUpdateConditionalLogic({ enabled: checked }) })] }), field.conditionalLogic?.enabled && (jsxs(Fragment, { children: [jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "Action" }), jsxs(Select, { value: field.conditionalLogic?.action || 'show', onValueChange: (value) => handleUpdateConditionalLogic({ action: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "show", children: "Show this field" }), jsx(SelectItem, { value: "hide", children: "Hide this field" }), jsx(SelectItem, { value: "enable", children: "Enable this field" }), jsx(SelectItem, { value: "disable", children: "Disable this field" }), jsx(SelectItem, { value: "require", children: "Make required" })] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-sm", children: "When" }), jsxs(Select, { value: field.conditionalLogic?.logicType || 'all', onValueChange: (value) => handleUpdateConditionalLogic({ logicType: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "all", children: "All conditions are met" }), jsx(SelectItem, { value: "any", children: "Any condition is met" })] })] })] }), jsx(Separator$1, {}), jsxs("div", { className: "space-y-3", children: [jsx(Label$2, { className: "text-sm font-medium", children: "Conditions" }), (field.conditionalLogic?.conditions || []).map((condition, index) => (jsxs("div", { className: "p-3 border border-border rounded-md space-y-3", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs(Badge, { variant: "secondary", children: ["Condition ", index + 1] }), jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeCondition(index), children: jsx(Trash2, { className: "h-4 w-4" }) })] }), jsxs(Select, { value: condition.fieldKey, onValueChange: (value) => updateCondition(index, { fieldKey: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "Select field..." }) }), jsx(SelectContent, { children: allFields.map((f) => (jsxs(SelectItem, { value: f.props.key, children: [f.props.label, " (", f.props.key, ")"] }, f.id))) })] }), jsxs(Select, { value: condition.operator, onValueChange: (value) => updateCondition(index, { operator: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "equals", children: "Equals" }), jsx(SelectItem, { value: "notEquals", children: "Not equals" }), jsx(SelectItem, { value: "contains", children: "Contains" }), jsx(SelectItem, { value: "notContains", children: "Does not contain" }), jsx(SelectItem, { value: "greaterThan", children: "Greater than" }), jsx(SelectItem, { value: "lessThan", children: "Less than" }), jsx(SelectItem, { value: "isEmpty", children: "Is empty" }), jsx(SelectItem, { value: "isNotEmpty", children: "Is not empty" }), jsx(SelectItem, { value: "startsWith", children: "Starts with" }), jsx(SelectItem, { value: "endsWith", children: "Ends with" })] })] }), !['isEmpty', 'isNotEmpty'].includes(condition.operator) && (jsx(Input, { value: condition.value || '', onChange: (e) => updateCondition(index, { value: e.target.value }), placeholder: "Value..." }))] }, index))), jsxs(Button, { variant: "outline", size: "sm", onClick: addCondition, className: "w-full gap-2", children: [jsx(Plus, { className: "h-4 w-4" }), "Add Condition"] })] })] }))] }));
-                    })() }), jsxs(TabsContent, { value: "actions", className: "space-y-4 mt-0", children: [jsxs("div", { className: "flex items-center gap-2 mb-4", children: [jsx(MousePointerClick, { className: "h-4 w-4 text-muted-foreground" }), jsx("span", { className: "text-sm font-medium", children: "Event Handlers" })] }), jsx("p", { className: "text-xs text-muted-foreground mb-4", children: "Add actions that trigger on specific events like click, change, focus, or blur." }), ['onClick', 'onChange', 'onFocus', 'onBlur'].map((eventType) => (jsxs(Collapsible, { className: "border border-border rounded-md", children: [jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full p-3 hover:bg-muted/50", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(Play, { className: "h-3 w-3 text-muted-foreground" }), jsx("span", { className: "text-sm font-medium", children: eventType }), (field.events?.[eventType]?.length || 0) > 0 && (jsx(Badge, { variant: "secondary", className: "text-xs", children: field.events?.[eventType]?.length }))] }), jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })] }), jsxs(CollapsibleContent, { className: "p-3 pt-0 space-y-3", children: [(field.events?.[eventType] || []).map((action, index) => (jsxs("div", { className: "p-3 border border-border rounded-md space-y-3 bg-muted/30", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs(Badge, { variant: "outline", children: ["Action ", index + 1] }), jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeEventAction(eventType, index), children: jsx(Trash2, { className: "h-4 w-4" }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-xs", children: "Type" }), jsxs(Select, { value: action.type, onValueChange: (value) => updateEventAction(eventType, index, { type: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "common", children: "Common Action" }), jsx(SelectItem, { value: "code", children: "Code Action" }), jsx(SelectItem, { value: "custom", children: "Custom Action" })] })] })] }), action.type === 'common' && (jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-xs", children: "Action" }), jsxs(Select, { value: action.name, onValueChange: (value) => updateEventAction(eventType, index, { name: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "Select action..." }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "validate", children: "Validate Form" }), jsx(SelectItem, { value: "reset", children: "Reset Form" }), jsx(SelectItem, { value: "submit", children: "Submit Form" }), jsx(SelectItem, { value: "clearField", children: "Clear This Field" }), jsx(SelectItem, { value: "focusField", children: "Focus Field" }), jsx(SelectItem, { value: "showMessage", children: "Show Message" })] })] })] })), action.type === 'code' && (jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-xs", children: "JavaScript Code" }), jsx(Textarea, { value: action.code || '', onChange: (e) => updateEventAction(eventType, index, { code: e.target.value }), placeholder: "console.log('Action triggered');", className: "font-mono text-xs min-h-[60px]" })] })), action.type === 'custom' && (jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-xs", children: "Custom Action Name" }), jsx(Input, { value: action.name, onChange: (e) => updateEventAction(eventType, index, { name: e.target.value }), placeholder: "myCustomAction", className: "font-mono text-sm" }), jsx("p", { className: "text-xs text-muted-foreground", children: "This will call the custom action passed to FormViewer" })] }))] }, index))), jsxs(Button, { variant: "outline", size: "sm", onClick: () => addEventAction(eventType), className: "w-full gap-2", children: [jsx(Plus, { className: "h-4 w-4" }), "Add Action"] })] })] }, eventType)))] }), jsxs(TabsContent, { value: "style", className: "space-y-4 mt-0", children: [jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsx("span", { className: "text-sm font-medium", children: "For device" }), jsxs(Select, { value: field.customStyle?.deviceTarget || 'any', onValueChange: (value) => handleUpdateCustomStyle('deviceTarget', value), children: [jsx(SelectTrigger, { className: "w-32", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "any", children: "Any" }), jsx(SelectItem, { value: "mobile", children: "Mobile" }), jsx(SelectItem, { value: "tablet", children: "Tablet" }), jsx(SelectItem, { value: "desktop", children: "Desktop" })] })] })] }), jsxs("div", { className: "space-y-4", children: [jsx("h4", { className: "text-sm font-semibold", children: "Component" }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Paintbrush, { className: "h-4 w-4 text-muted-foreground" }), jsx(Label$2, { className: "text-sm w-24", children: "Class Name" }), jsx(Input, { value: field.customStyle?.inputClassName || '', onChange: (e) => handleUpdateCustomStyle('inputClassName', e.target.value), placeholder: "", className: "font-mono text-sm flex-1" }), field.customStyle?.inputClassName && (jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleUpdateCustomStyle('inputClassName', ''), children: jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), jsx(Separator$1, {}), jsxs("div", { className: "space-y-4", children: [jsx("h4", { className: "text-sm font-semibold", children: "Wrapper" }), jsxs("div", { className: "grid grid-cols-2 gap-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Label$2, { className: "text-xs", children: "Width" }), jsxs("div", { className: "flex gap-1", children: [jsx(Input, { type: "number", value: field.customStyle?.width?.value ?? 100, onChange: (e) => handleUpdateCustomStyle('width', {
+                    })() }), jsxs(TabsContent, { value: "actions", className: "space-y-4 mt-0", children: [jsxs("div", { className: "flex items-center gap-2 mb-4", children: [jsx(MousePointerClick, { className: "h-4 w-4 text-muted-foreground" }), jsx("span", { className: "text-sm font-medium", children: "Event Handlers" })] }), jsx("p", { className: "text-xs text-muted-foreground mb-4", children: "Add actions that trigger on specific events like click, change, focus, or blur." }), ['onClick', 'onChange', 'onFocus', 'onBlur'].map((eventType) => (jsxs(Collapsible, { className: "border border-border rounded-md", children: [jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full p-3 hover:bg-muted/50", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(Play, { className: "h-3 w-3 text-muted-foreground" }), jsx("span", { className: "text-sm font-medium", children: eventType }), (field.events?.[eventType]?.length || 0) > 0 && (jsx(Badge, { variant: "secondary", className: "text-xs", children: field.events?.[eventType]?.length }))] }), jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })] }), jsxs(CollapsibleContent, { className: "p-3 pt-0 space-y-3", children: [(field.events?.[eventType] || []).map((action, index) => (jsxs("div", { className: "p-3 border border-border rounded-md space-y-3 bg-muted/30", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs(Badge, { variant: "outline", children: ["Action ", index + 1] }), jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeEventAction(eventType, index), children: jsx(Trash2, { className: "h-4 w-4" }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-xs", children: "Type" }), jsxs(Select, { value: action.type, onValueChange: (value) => updateEventAction(eventType, index, { type: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "common", children: "Common Action" }), jsx(SelectItem, { value: "code", children: "Code Action" }), jsx(SelectItem, { value: "custom", children: "Custom Action" })] })] })] }), action.type === 'common' && (jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-xs", children: "Action" }), jsxs(Select, { value: action.name, onValueChange: (value) => updateEventAction(eventType, index, { name: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "Select action..." }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "validate", children: "Validate Form" }), jsx(SelectItem, { value: "reset", children: "Reset Form" }), jsx(SelectItem, { value: "submit", children: "Submit Form" }), jsx(SelectItem, { value: "clearField", children: "Clear This Field" }), jsx(SelectItem, { value: "focusField", children: "Focus Field" }), jsx(SelectItem, { value: "showMessage", children: "Show Message" })] })] }), action.name === 'focusField' && (jsxs("div", { className: "space-y-2 mt-2", children: [jsx(Label$2, { className: "text-xs", children: "Target Field" }), jsxs(Select, { value: action.args?.targetFieldKey || '', onValueChange: (value) => updateEventAction(eventType, index, { args: { ...action.args, targetFieldKey: value } }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "Select field to focus..." }) }), jsx(SelectContent, { children: allFields.map((f) => (jsx(SelectItem, { value: f.props.key, children: f.props.label || f.props.key }, f.id))) })] })] })), action.name === 'showMessage' && (jsxs("div", { className: "space-y-2 mt-2", children: [jsx(Label$2, { className: "text-xs", children: "Message" }), jsx(Input, { value: action.args?.message || '', onChange: (e) => updateEventAction(eventType, index, { args: { ...action.args, message: e.target.value } }), placeholder: "Enter message to show..." })] }))] })), action.type === 'code' && (jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-xs", children: "JavaScript Code" }), jsx(Textarea, { value: action.code || '', onChange: (e) => updateEventAction(eventType, index, { code: e.target.value }), placeholder: "console.log('Action triggered');", className: "font-mono text-xs min-h-[60px]" })] })), action.type === 'custom' && (jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { className: "text-xs", children: "Custom Action Name" }), jsx(Input, { value: action.name, onChange: (e) => updateEventAction(eventType, index, { name: e.target.value }), placeholder: "myCustomAction", className: "font-mono text-sm" }), jsx("p", { className: "text-xs text-muted-foreground", children: "This will call the custom action passed to FormViewer" })] }))] }, index))), jsxs(Button, { variant: "outline", size: "sm", onClick: () => addEventAction(eventType), className: "w-full gap-2", children: [jsx(Plus, { className: "h-4 w-4" }), "Add Action"] })] })] }, eventType)))] }), jsxs(TabsContent, { value: "style", className: "space-y-4 mt-0", children: [jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsx("span", { className: "text-sm font-medium", children: "For device" }), jsxs(Select, { value: field.customStyle?.deviceTarget || 'any', onValueChange: (value) => handleUpdateCustomStyle('deviceTarget', value), children: [jsx(SelectTrigger, { className: "w-32", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "any", children: "Any" }), jsx(SelectItem, { value: "mobile", children: "Mobile" }), jsx(SelectItem, { value: "tablet", children: "Tablet" }), jsx(SelectItem, { value: "desktop", children: "Desktop" })] })] })] }), jsxs("div", { className: "space-y-4", children: [jsx("h4", { className: "text-sm font-semibold", children: "Component" }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Paintbrush, { className: "h-4 w-4 text-muted-foreground" }), jsx(Label$2, { className: "text-sm w-24", children: "Class Name" }), jsx(Input, { value: field.customStyle?.inputClassName || '', onChange: (e) => handleUpdateCustomStyle('inputClassName', e.target.value), placeholder: "", className: "font-mono text-sm flex-1" }), field.customStyle?.inputClassName && (jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleUpdateCustomStyle('inputClassName', ''), children: jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), jsx(Separator$1, {}), jsxs("div", { className: "space-y-4", children: [jsx("h4", { className: "text-sm font-semibold", children: "Wrapper" }), jsxs("div", { className: "grid grid-cols-2 gap-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Label$2, { className: "text-xs", children: "Width" }), jsxs("div", { className: "flex gap-1", children: [jsx(Input, { type: "number", value: field.customStyle?.width?.value ?? 100, onChange: (e) => handleUpdateCustomStyle('width', {
                                                                 ...field.customStyle?.width,
                                                                 value: parseInt(e.target.value) || 100
                                                             }), className: "w-16" }), jsxs(Select, { value: field.customStyle?.width?.unit || '%', onValueChange: (value) => handleUpdateCustomStyle('width', {
@@ -25034,12 +25166,12 @@ function DraggableComponent({ type, label, icon, isCollapsed }) {
 }
 const fieldCategories = {
     basic: { label: 'Basic Fields', types: FIELD_TYPES.filter(f => f.category === 'basic') },
-    selection: { label: 'Selection Fields', types: FIELD_TYPES.filter(f => f.category === 'selection') },
     advanced: { label: 'Advanced Fields', types: FIELD_TYPES.filter(f => f.category === 'advanced') },
+    selection: { label: 'Selection Fields', types: FIELD_TYPES.filter(f => f.category === 'selection') },
 };
 function ComponentLibrary({ isCollapsed = false, onToggleCollapse }) {
     if (isCollapsed) {
-        return (jsxs("aside", { className: "w-[60px] border-r border-border bg-card shrink-0 flex flex-col", children: [jsx("div", { className: "p-2 border-b border-border", children: jsx(Button, { variant: "ghost", size: "icon", onClick: onToggleCollapse, "data-testid": "button-expand-sidebar", children: jsx(PanelLeft, { className: "h-4 w-4" }) }) }), jsx(ScrollArea, { className: "flex-1", children: jsxs("div", { className: "p-2 space-y-4", children: [jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "LY" }) }), jsx(TooltipContent, { side: "right", children: "Layout" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: STRUCTURE_TYPES.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "BF" }) }), jsx(TooltipContent, { side: "right", children: "Basic Fields" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: fieldCategories.basic.types.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "SF" }) }), jsx(TooltipContent, { side: "right", children: "Selection Fields" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: fieldCategories.selection.types.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "AD" }) }), jsx(TooltipContent, { side: "right", children: "Advanced Fields" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: fieldCategories.advanced.types.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "EL" }) }), jsx(TooltipContent, { side: "right", children: "Static Elements" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: STATIC_TYPES.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] })] }) })] }));
+        return (jsxs("aside", { className: "w-[60px] border-r border-border bg-card shrink-0 flex flex-col", children: [jsx("div", { className: "p-2 border-b border-border", children: jsx(Button, { variant: "ghost", size: "icon", onClick: onToggleCollapse, "data-testid": "button-expand-sidebar", children: jsx(PanelLeft, { className: "h-4 w-4" }) }) }), jsx(ScrollArea, { className: "flex-1", children: jsxs("div", { className: "p-2 space-y-4", children: [jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "LY" }) }), jsx(TooltipContent, { side: "right", children: "Layout" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: STRUCTURE_TYPES.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "BF" }) }), jsx(TooltipContent, { side: "right", children: "Basic Fields" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: fieldCategories.basic.types.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "AD" }) }), jsx(TooltipContent, { side: "right", children: "Advanced Fields" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: fieldCategories.advanced.types.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "SF" }) }), jsx(TooltipContent, { side: "right", children: "Selection Fields" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: fieldCategories.selection.types.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "EL" }) }), jsx(TooltipContent, { side: "right", children: "Static Elements" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: STATIC_TYPES.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] })] }) })] }));
     }
     return (jsxs("aside", { className: "w-[200px] border-r border-border bg-card shrink-0 flex flex-col", children: [jsxs("div", { className: "p-2 border-b border-border flex items-center justify-between gap-2", children: [jsx("span", { className: "text-sm font-medium text-foreground pl-1", children: "Components" }), jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0", onClick: onToggleCollapse, "data-testid": "button-collapse-sidebar", children: jsx(PanelLeftClose, { className: "h-3.5 w-3.5" }) })] }), jsx(ScrollArea, { className: "flex-1", children: jsx("div", { className: "p-2", children: jsxs(Accordion, { type: "multiple", defaultValue: ['structure', 'basic', 'selection', 'advanced', 'static'], className: "w-full", children: [jsxs(AccordionItem, { value: "structure", className: "border-b-0 bg-muted/50 rounded-md mb-1 px-2", children: [jsxs(AccordionTrigger, { className: "py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline", children: ["Layout (", STRUCTURE_TYPES.length, ")"] }), jsx(AccordionContent, { children: jsx("div", { className: "grid grid-cols-2 gap-1 pb-2", children: STRUCTURE_TYPES.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon }, item.type))) }) })] }), Object.entries(fieldCategories).map(([key, category]) => (jsxs(AccordionItem, { value: key, className: "border-b-0 bg-background dark:bg-card rounded-md mb-1 px-2", children: [jsxs(AccordionTrigger, { className: "py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline", children: [category.label.split(' ')[0], " (", category.types.length, ")"] }), jsx(AccordionContent, { children: jsx("div", { className: "grid grid-cols-2 gap-1 pb-2", children: category.types.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon }, item.type))) }) })] }, key))), jsxs(AccordionItem, { value: "static", className: "border-b-0 bg-background dark:bg-card rounded-md mb-1 px-2", children: [jsxs(AccordionTrigger, { className: "py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline", children: ["Attributes (", STATIC_TYPES.length, ")"] }), jsx(AccordionContent, { children: jsx("div", { className: "grid grid-cols-2 gap-1 pb-2", children: STATIC_TYPES.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon }, item.type))) }) })] })] }) }) })] }));
 }
@@ -28323,7 +28455,9 @@ const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) =>
 DropdownMenuSeparator.displayName = Separator2.displayName;
 
 function Toolbar({ onOpenJsonViewer }) {
-    const { form, setFormName, isPreviewMode, togglePreviewMode, clearForm, toggleMultiStep, saveVersion, restoreVersion, updateSubmissionConfig, undo, redo, canUndo, canRedo, canvasWidth, setCanvasWidth, } = useFormStore();
+    const { form, setFormName, isPreviewMode, togglePreviewMode, clearForm, toggleMultiStep, saveVersion, restoreVersion, updateSubmissionConfig, undo, redo, canvasWidth, setCanvasWidth, historyIndex, history, } = useFormStore();
+    const canUndo = historyIndex > 0;
+    const canRedo = historyIndex < history.length - 1;
     const widthOptions = [
         { value: 'compact', label: 'Compact', description: '672px' },
         { value: 'medium', label: 'Medium', description: '896px' },
@@ -28336,6 +28470,7 @@ function Toolbar({ onOpenJsonViewer }) {
     const [versionDialogOpen, setVersionDialogOpen] = useState(false);
     const [changelog, setChangelog] = useState('');
     const [settingsDialogOpen, setSettingsDialogOpen] = useState(false);
+    const [docsDialogOpen, setDocsDialogOpen] = useState(false);
     const [isDarkMode, setIsDarkMode] = useState(false);
     const { toast } = useToast();
     const toggleTheme = () => {
@@ -28432,7 +28567,101 @@ function Toolbar({ onOpenJsonViewer }) {
     return (jsxs("header", { className: "h-14 border-b border-border bg-card px-6 flex items-center justify-between gap-4 shrink-0", children: [jsx("div", { className: "flex items-center gap-3", children: isEditing ? (jsxs("div", { className: "flex items-center gap-2", children: [jsx(Input, { value: tempName, onChange: (e) => setTempName(e.target.value), onKeyDown: handleKeyDown, onBlur: handleSaveName, className: "h-8 w-64 text-sm font-medium", autoFocus: true, "data-testid": "input-form-name" }), jsx(Button, { size: "icon", variant: "ghost", onClick: handleSaveName, "data-testid": "button-save-name", children: jsx(Check, { className: "h-4 w-4" }) })] })) : (jsxs("div", { className: "flex items-center gap-2", children: [jsx("h1", { className: "text-lg font-semibold text-foreground", children: form.name }), jsx(Button, { size: "icon", variant: "ghost", onClick: () => {
                                 setTempName(form.name);
                                 setIsEditing(true);
-                            }, "data-testid": "button-edit-name", children: jsx(PenLine, { className: "h-4 w-4" }) }), form.isMultiStep && (jsx(Badge, { variant: "secondary", className: "text-xs", children: "Multi-Step" })), form.currentVersion && (jsxs(Badge, { variant: "outline", className: "text-xs", children: ["v", form.currentVersion] }))] })) }), jsxs("div", { className: "flex items-center gap-2", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", onClick: undo, disabled: !canUndo(), "data-testid": "button-undo", children: jsx(Undo2, { className: "h-4 w-4" }) }) }), jsx(TooltipContent, { children: "Undo" })] }), jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", onClick: redo, disabled: !canRedo(), "data-testid": "button-redo", children: jsx(Redo2, { className: "h-4 w-4" }) }) }), jsx(TooltipContent, { children: "Redo" })] }), jsxs(DropdownMenu, { children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", "data-testid": "button-canvas-width", children: jsx(Maximize2, { className: "h-4 w-4" }) }) }) }), jsx(TooltipContent, { children: "Canvas Width" })] }), jsxs(DropdownMenuContent, { align: "end", children: [jsx(DropdownMenuLabel, { children: "Canvas Width" }), jsx(DropdownMenuSeparator, {}), widthOptions.map((option) => (jsxs(DropdownMenuItem, { onClick: () => setCanvasWidth(option.value), className: "flex justify-between gap-4", "data-testid": `menu-width-${option.value}`, children: [jsx("span", { children: option.label }), jsx("span", { className: "text-muted-foreground text-xs", children: option.description }), canvasWidth === option.value && jsx(Check, { className: "h-4 w-4 ml-2" })] }, option.value)))] })] }), jsx("div", { className: "w-px h-6 bg-border mx-1" }), jsxs(Button, { variant: "default", size: "sm", onClick: handleSaveForm, disabled: isSaving, className: "gap-2", "data-testid": "button-save-form", children: [isSaving ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" })) : (jsx(Save, { className: "h-4 w-4" })), jsx("span", { children: "Save" })] }), jsx(Button, { variant: isPreviewMode ? 'default' : 'outline', size: "sm", onClick: togglePreviewMode, className: "gap-2", "data-testid": "button-toggle-preview", children: isPreviewMode ? (jsxs(Fragment, { children: [jsx(EyeOff, { className: "h-4 w-4" }), jsx("span", { children: "Edit" })] })) : (jsxs(Fragment, { children: [jsx(Eye, { className: "h-4 w-4" }), jsx("span", { children: "Preview" })] })) }), jsx(Button, { variant: form.isMultiStep ? 'default' : 'outline', size: "sm", onClick: toggleMultiStep, className: "gap-2", title: form.isMultiStep ? 'Switch to single page' : 'Switch to multi-step wizard', "data-testid": "button-toggle-multistep", children: jsx(Layers, { className: "h-4 w-4" }) }), jsxs(Dialog, { open: versionDialogOpen, onOpenChange: setVersionDialogOpen, children: [jsx(DialogTrigger, { asChild: true, children: jsx(Button, { variant: "outline", size: "sm", className: "gap-2", "data-testid": "button-version", children: jsx(History, { className: "h-4 w-4" }) }) }), jsxs(DialogContent, { className: "max-w-md", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Version History" }), jsx(DialogDescription, { children: "Save snapshots and restore previous versions of your form." })] }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { children: "Save New Version" }), jsx(Textarea, { value: changelog, onChange: (e) => setChangelog(e.target.value), placeholder: "What changed in this version?", className: "min-h-[60px]" }), jsxs(Button, { onClick: handleSaveVersion, className: "w-full gap-2", size: "sm", children: [jsx(Save, { className: "h-4 w-4" }), "Save Version ", (form.currentVersion || 0) + 1] })] }), form.versions && form.versions.length > 0 && (jsx(Fragment, { children: jsxs("div", { className: "border-t pt-4", children: [jsx(Label$2, { className: "mb-2 block", children: "Previous Versions" }), jsx(ScrollArea, { className: "h-[200px]", children: jsx("div", { className: "space-y-2", children: [...form.versions].reverse().map((version) => (jsxs("div", { className: "p-3 border rounded-md space-y-2", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("span", { className: "font-medium", children: ["Version ", version.version] }), jsx(Button, { variant: "outline", size: "sm", onClick: () => handleRestoreVersion(version.id, version.version), children: "Restore" })] }), version.changelog && (jsx("p", { className: "text-sm text-muted-foreground", children: version.changelog })), jsx("p", { className: "text-xs text-muted-foreground", children: new Date(version.createdAt).toLocaleString() })] }, version.id))) }) })] }) }))] })] })] }), jsxs(Dialog, { open: settingsDialogOpen, onOpenChange: setSettingsDialogOpen, children: [jsx(DialogTrigger, { asChild: true, children: jsx(Button, { variant: "outline", size: "sm", className: "gap-2", "data-testid": "button-settings", children: jsx(Settings, { className: "h-4 w-4" }) }) }), jsxs(DialogContent, { className: "max-w-lg", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Form Settings" }), jsx(DialogDescription, { children: "Configure submission, webhooks, and other form settings." })] }), jsx("div", { className: "space-y-6", children: jsxs("div", { className: "space-y-4", children: [jsx("h4", { className: "font-medium", children: "Submission Settings" }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label$2, { children: "Enable Submission Handler" }), jsx(Switch, { checked: form.submissionConfig?.enabled || false, onCheckedChange: (checked) => updateSubmissionConfig({ enabled: checked }) })] }), form.submissionConfig?.enabled && (jsxs(Fragment, { children: [jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { children: "Webhook URL" }), jsx(Input, { value: form.submissionConfig?.webhookUrl || '', onChange: (e) => updateSubmissionConfig({ webhookUrl: e.target.value }), placeholder: "https://your-api.com/webhook" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { children: "Success Message" }), jsx(Input, { value: form.submissionConfig?.successMessage || '', onChange: (e) => updateSubmissionConfig({ successMessage: e.target.value }), placeholder: "Thank you for your submission!" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { children: "Redirect URL (optional)" }), jsx(Input, { value: form.submissionConfig?.redirectUrl || '', onChange: (e) => updateSubmissionConfig({ redirectUrl: e.target.value }), placeholder: "https://your-site.com/thank-you" })] })] }))] }) }), jsx(DialogFooter, { children: jsx(Button, { onClick: () => setSettingsDialogOpen(false), children: "Done" }) })] })] }), jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button, { variant: "outline", size: "sm", className: "gap-2", "data-testid": "button-more", children: jsx(FileJson, { className: "h-4 w-4" }) }) }), jsxs(DropdownMenuContent, { align: "end", children: [jsx(DropdownMenuLabel, { children: "Export / Import" }), jsx(DropdownMenuSeparator, {}), jsxs(DropdownMenuItem, { onClick: onOpenJsonViewer, children: [jsx(FileJson, { className: "h-4 w-4 mr-2" }), "View JSON Schema"] }), jsxs(DropdownMenuItem, { onClick: handleExportJson, children: [jsx(Download, { className: "h-4 w-4 mr-2" }), "Download JSON"] }), jsx(DropdownMenuItem, { asChild: true, children: jsxs("label", { className: "cursor-pointer flex items-center", children: [jsx(Upload, { className: "h-4 w-4 mr-2" }), "Import JSON", jsx("input", { type: "file", accept: ".json", onChange: handleImportJson, className: "hidden" })] }) })] })] }), jsx(Button, { variant: "outline", size: "sm", onClick: clearForm, className: "gap-2 text-destructive hover:text-destructive", "data-testid": "button-clear-form", children: jsx(Trash2, { className: "h-4 w-4" }) }), jsx("div", { className: "w-px h-6 bg-border mx-1" }), jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", onClick: toggleTheme, "data-testid": "button-toggle-theme", children: isDarkMode ? jsx(Sun, { className: "h-4 w-4" }) : jsx(Moon, { className: "h-4 w-4" }) }) }), jsx(TooltipContent, { children: isDarkMode ? 'Light Mode' : 'Dark Mode' })] })] })] }));
+                            }, "data-testid": "button-edit-name", children: jsx(PenLine, { className: "h-4 w-4" }) }), form.isMultiStep && (jsx(Badge, { variant: "secondary", className: "text-xs", children: "Multi-Step" })), form.currentVersion && (jsxs(Badge, { variant: "outline", className: "text-xs", children: ["v", form.currentVersion] }))] })) }), jsxs("div", { className: "flex items-center gap-2", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", onClick: undo, disabled: !canUndo, "data-testid": "button-undo", children: jsx(Undo2, { className: "h-4 w-4" }) }) }), jsx(TooltipContent, { children: "Undo" })] }), jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", onClick: redo, disabled: !canRedo, "data-testid": "button-redo", children: jsx(Redo2, { className: "h-4 w-4" }) }) }), jsx(TooltipContent, { children: "Redo" })] }), jsxs(DropdownMenu, { children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", "data-testid": "button-canvas-width", children: jsx(Maximize2, { className: "h-4 w-4" }) }) }) }), jsx(TooltipContent, { children: "Canvas Width" })] }), jsxs(DropdownMenuContent, { align: "end", children: [jsx(DropdownMenuLabel, { children: "Canvas Width" }), jsx(DropdownMenuSeparator, {}), widthOptions.map((option) => (jsxs(DropdownMenuItem, { onClick: () => setCanvasWidth(option.value), className: "flex justify-between gap-4", "data-testid": `menu-width-${option.value}`, children: [jsx("span", { children: option.label }), jsx("span", { className: "text-muted-foreground text-xs", children: option.description }), canvasWidth === option.value && jsx(Check, { className: "h-4 w-4 ml-2" })] }, option.value)))] })] }), jsx("div", { className: "w-px h-6 bg-border mx-1" }), jsxs(Button, { variant: "default", size: "sm", onClick: handleSaveForm, disabled: isSaving, className: "gap-2", "data-testid": "button-save-form", children: [isSaving ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" })) : (jsx(Save, { className: "h-4 w-4" })), jsx("span", { children: "Save" })] }), jsx(Button, { variant: isPreviewMode ? 'default' : 'outline', size: "sm", onClick: togglePreviewMode, className: "gap-2", "data-testid": "button-toggle-preview", children: isPreviewMode ? (jsxs(Fragment, { children: [jsx(EyeOff, { className: "h-4 w-4" }), jsx("span", { children: "Edit" })] })) : (jsxs(Fragment, { children: [jsx(Eye, { className: "h-4 w-4" }), jsx("span", { children: "Preview" })] })) }), jsx(Button, { variant: form.isMultiStep ? 'default' : 'outline', size: "sm", onClick: toggleMultiStep, className: "gap-2", title: form.isMultiStep ? 'Switch to single page' : 'Switch to multi-step wizard', "data-testid": "button-toggle-multistep", children: jsx(Layers, { className: "h-4 w-4" }) }), jsxs(Dialog, { open: versionDialogOpen, onOpenChange: setVersionDialogOpen, children: [jsx(DialogTrigger, { asChild: true, children: jsx(Button, { variant: "outline", size: "sm", className: "gap-2", "data-testid": "button-version", children: jsx(History, { className: "h-4 w-4" }) }) }), jsxs(DialogContent, { className: "max-w-md", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Version History" }), jsx(DialogDescription, { children: "Save snapshots and restore previous versions of your form." })] }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { children: "Save New Version" }), jsx(Textarea, { value: changelog, onChange: (e) => setChangelog(e.target.value), placeholder: "What changed in this version?", className: "min-h-[60px]" }), jsxs(Button, { onClick: handleSaveVersion, className: "w-full gap-2", size: "sm", children: [jsx(Save, { className: "h-4 w-4" }), "Save Version ", (form.currentVersion || 0) + 1] })] }), form.versions && form.versions.length > 0 && (jsx(Fragment, { children: jsxs("div", { className: "border-t pt-4", children: [jsx(Label$2, { className: "mb-2 block", children: "Previous Versions" }), jsx(ScrollArea, { className: "h-[200px]", children: jsx("div", { className: "space-y-2", children: [...form.versions].reverse().map((version) => (jsxs("div", { className: "p-3 border rounded-md space-y-2", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("span", { className: "font-medium", children: ["Version ", version.version] }), jsx(Button, { variant: "outline", size: "sm", onClick: () => handleRestoreVersion(version.id, version.version), children: "Restore" })] }), version.changelog && (jsx("p", { className: "text-sm text-muted-foreground", children: version.changelog })), jsx("p", { className: "text-xs text-muted-foreground", children: new Date(version.createdAt).toLocaleString() })] }, version.id))) }) })] }) }))] })] })] }), jsxs(Dialog, { open: docsDialogOpen, onOpenChange: setDocsDialogOpen, children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(DialogTrigger, { asChild: true, children: jsx(Button, { variant: "outline", size: "sm", className: "gap-2", "data-testid": "button-docs", children: jsx(BookOpen, { className: "h-4 w-4" }) }) }) }), jsx(TooltipContent, { children: "Documentation" })] }), jsxs(DialogContent, { className: "max-w-4xl max-h-[85vh]", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "FormBuilder Documentation" }), jsx(DialogDescription, { children: "Complete guide for the drag-and-drop form builder component" })] }), jsx(ScrollArea, { className: "h-[60vh] pr-4", children: jsxs("div", { className: "prose prose-sm dark:prose-invert max-w-none space-y-6", children: [jsxs("section", { children: [jsx("h3", { className: "text-lg font-semibold border-b pb-2", children: "Quick Start" }), jsx("pre", { className: "bg-muted p-3 rounded text-xs overflow-x-auto text-foreground", children: `import { FormBuilder } from '@enerjisaformlibrary/formbuilder-react';
+import '@enerjisaformlibrary/formbuilder-react/styles.css';
+
+function App() {
+  return (
+    <FormBuilder 
+      onSave={(form) => saveToDatabase(JSON.stringify(form))}
+      onChange={(form) => console.log('Updated:', form)}
+      theme="light"
+    />
+  );
+}` })] }), jsxs("section", { children: [jsx("h3", { className: "text-lg font-semibold border-b pb-2", children: "Field Types (20+)" }), jsxs("div", { className: "grid grid-cols-3 gap-2 text-sm", children: [jsxs("div", { children: [jsx("strong", { children: "Basic:" }), " input, textarea, number, email, password, phone, url"] }), jsxs("div", { children: [jsx("strong", { children: "Selection:" }), " dropdown, checkbox, radio, toggle, multiselect"] }), jsxs("div", { children: [jsx("strong", { children: "Date/Time:" }), " date, time, daterange"] }), jsxs("div", { children: [jsx("strong", { children: "Advanced:" }), " file, signature, rating, richtext, slider, color, autocomplete"] }), jsxs("div", { children: [jsx("strong", { children: "Static:" }), " header, label, paragraph, divider, spacer, alert, image"] }), jsxs("div", { children: [jsx("strong", { children: "Structure:" }), " button, qrcode, pattern, container"] })] })] }), jsxs("section", { children: [jsx("h3", { className: "text-lg font-semibold border-b pb-2", children: "Form Schema Structure" }), jsx("pre", { className: "bg-muted p-3 rounded text-xs overflow-x-auto text-foreground", children: `FormSchema {
+  id: string;
+  name: string;
+  rows: FormRow[];           // Single-page mode
+  steps?: FormStep[];        // Multi-step wizard mode
+  isMultiStep?: boolean;
+  submissionConfig?: { webhookUrl, successMessage, redirectUrl };
+}
+
+FormRow → columns[] → FormColumn (width: 1-12) → fields[] → FormField` })] }), jsxs("section", { children: [jsx("h3", { className: "text-lg font-semibold border-b pb-2", children: "FormField Properties" }), jsx("pre", { className: "bg-muted p-3 rounded text-xs overflow-x-auto text-foreground", children: `FormField {
+  id: string;
+  type: 'input' | 'dropdown' | 'checkbox' | ...;
+  props: {
+    key: string;            // Unique identifier for form values
+    label?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    tooltip?: string;       // Help text on hover
+    autoFocus?: boolean;    // Focus on preview mode
+    hidden?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: 'small' | 'medium' | 'large';
+  };
+  validation?: { required, minLength, maxLength, pattern, min, max };
+  conditionalLogic?: { enabled, action, conditions[] };
+  customStyle?: { containerClassName, labelClassName, inputClassName };
+  events?: { onClick, onChange, onFocus, onBlur };
+}` })] }), jsxs("section", { children: [jsx("h3", { className: "text-lg font-semibold border-b pb-2", children: "Conditional Logic" }), jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "Show/hide/enable/disable fields based on other field values" }), jsx("pre", { className: "bg-muted p-3 rounded text-xs overflow-x-auto text-foreground", children: `conditionalLogic: {
+  enabled: true,
+  action: 'show' | 'hide' | 'enable' | 'disable' | 'require',
+  conditions: [{
+    field: 'country',           // Target field's props.key
+    operator: 'equals' | 'notEquals' | 'contains' | 'isEmpty' | ...,
+    value: 'USA'
+  }],
+  conditionLogic: 'and' | 'or'  // How to combine multiple conditions
+}` })] }), jsxs("section", { children: [jsx("h3", { className: "text-lg font-semibold border-b pb-2", children: "Events & Actions" }), jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "Execute actions on field interactions (preview mode only)" }), jsxs("div", { className: "text-sm mb-2", children: [jsx("strong", { children: "Available Actions:" }), jsxs("ul", { className: "list-disc list-inside mt-1", children: [jsxs("li", { children: [jsx("code", { children: "focusField" }), " - Focus another field (args: targetFieldKey)"] }), jsxs("li", { children: [jsx("code", { children: "clearField" }), " - Clear current field value"] }), jsxs("li", { children: [jsx("code", { children: "showMessage" }), " - Display alert (args: message)"] }), jsxs("li", { children: [jsx("code", { children: "reset" }), " - Reset all form values"] })] })] }), jsx("pre", { className: "bg-muted p-3 rounded text-xs overflow-x-auto text-foreground", children: `events: {
+  onChange: [{
+    type: 'common',
+    name: 'focusField',
+    args: { targetFieldKey: 'nextField' }
+  }]
+}` })] }), jsxs("section", { children: [jsx("h3", { className: "text-lg font-semibold border-b pb-2", children: "Zustand Store API" }), jsx("pre", { className: "bg-muted p-3 rounded text-xs overflow-x-auto text-foreground", children: `import { useFormStore } from '@enerjisaformlibrary/formbuilder-react';
+
+const { 
+  form,                    // Current FormSchema
+  formValues,              // Values in preview mode
+  previewMode,             // boolean
+  loadForm,                // Load existing form
+  addRow, deleteRow,       // Row operations
+  addField, updateField,   // Field operations
+  setFieldValue,           // Set value in preview
+  getFormValues,           // Get all form values
+} = useFormStore();` })] }), jsxs("section", { children: [jsx("h3", { className: "text-lg font-semibold border-b pb-2", children: "Container Fields" }), jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "Group fields with nested row/column structure" }), jsx("pre", { className: "bg-muted p-3 rounded text-xs overflow-x-auto text-foreground", children: `{
+  type: 'container',
+  props: {
+    key: 'addressGroup',
+    label: 'Address',
+    containerConfig: {
+      rows: [{
+        id: 'row1',
+        columns: [
+          { id: 'col1', width: 6, fields: [...] },
+          { id: 'col2', width: 6, fields: [...] }
+        ]
+      }]
+    }
+  }
+}` })] }), jsxs("section", { children: [jsx("h3", { className: "text-lg font-semibold border-b pb-2", children: "Multi-Step Forms" }), jsx("pre", { className: "bg-muted p-3 rounded text-xs overflow-x-auto text-foreground", children: `{
+  isMultiStep: true,
+  steps: [{
+    id: 'step1',
+    title: 'Personal Info',
+    order: 0,
+    rows: [...],
+    validation: { validateOnNext: true }
+  }, {
+    id: 'step2',
+    title: 'Contact',
+    order: 1,
+    rows: [...]
+  }]
+}` })] })] }) }), jsx(DialogFooter, { children: jsx(Button, { onClick: () => setDocsDialogOpen(false), children: "Close" }) })] })] }), jsxs(Dialog, { open: settingsDialogOpen, onOpenChange: setSettingsDialogOpen, children: [jsx(DialogTrigger, { asChild: true, children: jsx(Button, { variant: "outline", size: "sm", className: "gap-2", "data-testid": "button-settings", children: jsx(Settings, { className: "h-4 w-4" }) }) }), jsxs(DialogContent, { className: "max-w-lg", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Form Settings" }), jsx(DialogDescription, { children: "Configure submission, webhooks, and other form settings." })] }), jsx("div", { className: "space-y-6", children: jsxs("div", { className: "space-y-4", children: [jsx("h4", { className: "font-medium", children: "Submission Settings" }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label$2, { children: "Enable Submission Handler" }), jsx(Switch, { checked: form.submissionConfig?.enabled || false, onCheckedChange: (checked) => updateSubmissionConfig({ enabled: checked }) })] }), form.submissionConfig?.enabled && (jsxs(Fragment, { children: [jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { children: "Webhook URL" }), jsx(Input, { value: form.submissionConfig?.webhookUrl || '', onChange: (e) => updateSubmissionConfig({ webhookUrl: e.target.value }), placeholder: "https://your-api.com/webhook" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { children: "Success Message" }), jsx(Input, { value: form.submissionConfig?.successMessage || '', onChange: (e) => updateSubmissionConfig({ successMessage: e.target.value }), placeholder: "Thank you for your submission!" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { children: "Redirect URL (optional)" }), jsx(Input, { value: form.submissionConfig?.redirectUrl || '', onChange: (e) => updateSubmissionConfig({ redirectUrl: e.target.value }), placeholder: "https://your-site.com/thank-you" })] })] }))] }) }), jsx(DialogFooter, { children: jsx(Button, { onClick: () => setSettingsDialogOpen(false), children: "Done" }) })] })] }), jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button, { variant: "outline", size: "sm", className: "gap-2", "data-testid": "button-more", children: jsx(FileJson, { className: "h-4 w-4" }) }) }), jsxs(DropdownMenuContent, { align: "end", children: [jsx(DropdownMenuLabel, { children: "Export / Import" }), jsx(DropdownMenuSeparator, {}), jsxs(DropdownMenuItem, { onClick: onOpenJsonViewer, children: [jsx(FileJson, { className: "h-4 w-4 mr-2" }), "View JSON Schema"] }), jsxs(DropdownMenuItem, { onClick: handleExportJson, children: [jsx(Download, { className: "h-4 w-4 mr-2" }), "Download JSON"] }), jsx(DropdownMenuItem, { asChild: true, children: jsxs("label", { className: "cursor-pointer flex items-center", children: [jsx(Upload, { className: "h-4 w-4 mr-2" }), "Import JSON", jsx("input", { type: "file", accept: ".json", onChange: handleImportJson, className: "hidden" })] }) })] })] }), jsx(Button, { variant: "outline", size: "sm", onClick: clearForm, className: "gap-2 text-destructive hover:text-destructive", "data-testid": "button-clear-form", children: jsx(Trash2, { className: "h-4 w-4" }) }), jsx("div", { className: "w-px h-6 bg-border mx-1" }), jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", onClick: toggleTheme, "data-testid": "button-toggle-theme", children: isDarkMode ? jsx(Sun, { className: "h-4 w-4" }) : jsx(Moon, { className: "h-4 w-4" }) }) }), jsx(TooltipContent, { children: isDarkMode ? 'Light Mode' : 'Dark Mode' })] })] })] }));
 }
 
 const iconMap = {