@uipath/apollo-wind 0.7.2-pr188.4865fad

package/dist/components/forms/form-designer.js

@@ -0,0 +1,2280 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { schemaToJson } from "./schema-serializer.js";
+import { MetadataForm } from "./metadata-form.js";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
+import { Label } from "../ui/label.js";
+import { Textarea } from "../ui/textarea.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Switch } from "../ui/switch.js";
+import { AlertTriangle, Asterisk, Ban, ChevronRight, Code, Database, Eye, EyeOff, GitBranch, GripVertical, Layers, MoveDown, MoveUp, Plus, Settings, Trash2, View } from "lucide-react";
+import { Separator } from "../ui/separator.js";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion.js";
+import { Grid } from "../ui/layout/grid.js";
+const FIELD_TYPE_METADATA = [
+    {
+        value: 'text',
+        label: 'Text',
+        category: 'Input',
+        description: 'Single-line text input'
+    },
+    {
+        value: 'email',
+        label: 'Email',
+        category: 'Input',
+        description: 'Email with validation'
+    },
+    {
+        value: 'textarea',
+        label: 'Textarea',
+        category: 'Input',
+        description: 'Multi-line text input'
+    },
+    {
+        value: 'number',
+        label: 'Number',
+        category: 'Input',
+        description: 'Numeric input with min/max'
+    },
+    {
+        value: 'date',
+        label: 'Date',
+        category: 'Input',
+        description: 'Date picker'
+    },
+    {
+        value: 'datetime',
+        label: 'Date & Time',
+        category: 'Input',
+        description: 'Date and time picker'
+    },
+    {
+        value: 'file',
+        label: 'File Upload',
+        category: 'Input',
+        description: 'File upload control'
+    },
+    {
+        value: 'select',
+        label: 'Select Dropdown',
+        category: 'Selection',
+        description: 'Single-select dropdown'
+    },
+    {
+        value: 'multiselect',
+        label: 'Multi-Select',
+        category: 'Selection',
+        description: 'Multi-select with search'
+    },
+    {
+        value: 'radio',
+        label: 'Radio Group',
+        category: 'Selection',
+        description: 'Radio button group'
+    },
+    {
+        value: 'checkbox',
+        label: 'Checkbox',
+        category: 'Boolean',
+        description: 'Single checkbox'
+    },
+    {
+        value: 'switch',
+        label: 'Switch Toggle',
+        category: 'Boolean',
+        description: 'Toggle switch'
+    },
+    {
+        value: 'slider',
+        label: 'Slider',
+        category: 'Input',
+        description: 'Range slider'
+    },
+    {
+        value: 'custom',
+        label: 'Custom Component',
+        category: 'Advanced',
+        description: 'Custom field component'
+    }
+];
+function buildValidationConfig(field) {
+    const { type, validation, rules } = field;
+    const config = {};
+    const messages = {};
+    const isAlwaysRequired = rules?.some((r)=>true === r.effects.required && 0 === r.conditions.length);
+    if (isAlwaysRequired) {
+        config.required = true;
+        if (validation?.requiredMessage) messages.required = validation.requiredMessage;
+    }
+    if (!validation && !isAlwaysRequired) return;
+    if (validation) {
+        if ('text' === type || 'textarea' === type || 'email' === type) {
+            const minLen = validation.minLength;
+            const maxLen = validation.maxLength;
+            const validLengthConstraints = null == minLen || null == maxLen || minLen <= maxLen;
+            if (validLengthConstraints) {
+                if (null != minLen) {
+                    config.minLength = minLen;
+                    if (validation.customMessage) messages.minLength = validation.customMessage;
+                }
+                if (null != maxLen) {
+                    config.maxLength = maxLen;
+                    if (validation.customMessage) messages.maxLength = validation.customMessage;
+                }
+            }
+            if (validation.pattern) try {
+                new RegExp(validation.pattern);
+                config.pattern = validation.pattern;
+                if (validation.patternMessage) messages.pattern = validation.patternMessage;
+                else if (validation.customMessage) messages.pattern = validation.customMessage;
+            } catch  {}
+        }
+        if ('number' === type || 'slider' === type) {
+            if (validation.integer) {
+                config.integer = true;
+                if (validation.customMessage) messages.integer = validation.customMessage;
+            }
+            const minVal = field.min;
+            const maxVal = field.max;
+            const validRangeConstraints = null == minVal || null == maxVal || minVal <= maxVal;
+            if (validRangeConstraints) {
+                if (null != minVal) {
+                    config.min = minVal;
+                    if (validation.customMessage) messages.min = validation.customMessage;
+                }
+                if (null != maxVal) {
+                    config.max = maxVal;
+                    if (validation.customMessage) messages.max = validation.customMessage;
+                }
+            }
+        }
+        if ('file' === type) {
+            if (null != validation.maxFileSize) config.maxFileSize = validation.maxFileSize;
+            if (field.multiple && null != validation.maxFiles) {
+                config.maxItems = validation.maxFiles;
+                if (validation.customMessage) messages.maxItems = validation.customMessage;
+            }
+        }
+        if (validation.customMessage) messages.custom = validation.customMessage;
+    }
+    if (Object.keys(messages).length > 0) config.messages = messages;
+    return Object.keys(config).length > 0 ? config : void 0;
+}
+const createSectionConfigSchema = (section)=>({
+        id: 'section-config',
+        title: '',
+        sections: [
+            {
+                id: 'main',
+                title: 'Section settings',
+                fields: [
+                    {
+                        name: 'id',
+                        type: 'text',
+                        label: 'Section ID',
+                        description: 'Unique identifier for this section'
+                    },
+                    {
+                        name: 'title',
+                        type: 'text',
+                        label: 'Section title',
+                        placeholder: 'Enter section title'
+                    },
+                    {
+                        name: "description",
+                        type: 'textarea',
+                        label: "Description",
+                        placeholder: "Optional section description",
+                        rows: 2
+                    },
+                    {
+                        name: 'collapsible',
+                        type: 'switch',
+                        label: 'Collapsible section'
+                    },
+                    {
+                        name: 'defaultExpanded',
+                        type: 'switch',
+                        label: 'Expanded by default',
+                        rules: [
+                            {
+                                id: 'show-when-collapsible',
+                                conditions: [
+                                    {
+                                        when: 'collapsible',
+                                        is: true
+                                    }
+                                ],
+                                operator: 'AND',
+                                effects: {
+                                    visible: true
+                                }
+                            }
+                        ]
+                    }
+                ]
+            }
+        ],
+        initialData: {
+            id: section.id,
+            title: section.title,
+            description: section.description || '',
+            collapsible: section.collapsible || false,
+            defaultExpanded: false !== section.defaultExpanded
+        },
+        actions: []
+    });
+const createFieldConfigSchema = (field)=>({
+        id: 'field-config',
+        title: '',
+        sections: [
+            {
+                id: 'basic',
+                title: 'Basic settings',
+                fields: [
+                    {
+                        name: 'name',
+                        type: 'text',
+                        label: 'Field name',
+                        placeholder: 'fieldName',
+                        description: 'Internal identifier (camelCase recommended)'
+                    },
+                    {
+                        name: 'label',
+                        type: 'text',
+                        label: 'Label',
+                        placeholder: 'Field Label'
+                    },
+                    {
+                        name: 'type',
+                        type: 'select',
+                        label: 'Field type',
+                        options: FIELD_TYPE_METADATA.map((t)=>({
+                                label: `${t.label} (${t.category})`,
+                                value: t.value
+                            }))
+                    },
+                    {
+                        name: 'placeholder',
+                        type: 'text',
+                        label: 'Placeholder',
+                        placeholder: 'Enter placeholder text...'
+                    },
+                    {
+                        name: "description",
+                        type: 'textarea',
+                        label: "Description",
+                        placeholder: 'Help text for this field',
+                        rows: 2
+                    }
+                ]
+            },
+            {
+                id: 'number-settings',
+                title: 'Number settings',
+                fields: [
+                    {
+                        name: 'min',
+                        type: 'number',
+                        label: 'Min'
+                    },
+                    {
+                        name: 'max',
+                        type: 'number',
+                        label: 'Max'
+                    },
+                    {
+                        name: 'step',
+                        type: 'number',
+                        label: 'Step'
+                    }
+                ],
+                conditions: [
+                    {
+                        when: 'type',
+                        in: [
+                            'number',
+                            'slider'
+                        ]
+                    }
+                ]
+            },
+            {
+                id: 'file-settings',
+                title: 'File settings',
+                fields: [
+                    {
+                        name: 'accept',
+                        type: 'text',
+                        label: 'Accepted file types',
+                        placeholder: '.pdf,.doc,.docx',
+                        description: 'Comma-separated file extensions'
+                    },
+                    {
+                        name: 'multiple',
+                        type: 'checkbox',
+                        label: 'Allow multiple files'
+                    }
+                ],
+                conditions: [
+                    {
+                        when: 'type',
+                        is: 'file'
+                    }
+                ]
+            },
+            {
+                id: 'text-validation',
+                title: 'Text validation',
+                fields: [
+                    {
+                        name: 'validation.minLength',
+                        type: 'number',
+                        label: 'Minimum length',
+                        min: 0,
+                        placeholder: '0'
+                    },
+                    {
+                        name: 'validation.maxLength',
+                        type: 'number',
+                        label: 'Maximum length',
+                        min: 0,
+                        placeholder: 'No limit'
+                    },
+                    {
+                        name: 'validation.pattern',
+                        type: 'text',
+                        label: 'Pattern (regex)',
+                        placeholder: '^[A-Za-z]+$',
+                        description: 'Regular expression pattern'
+                    },
+                    {
+                        name: 'validation.patternMessage',
+                        type: 'text',
+                        label: 'Pattern error message',
+                        placeholder: 'Invalid format',
+                        rules: [
+                            {
+                                id: 'show-when-pattern',
+                                conditions: [
+                                    {
+                                        when: 'validation.pattern',
+                                        isNot: ''
+                                    }
+                                ],
+                                operator: 'AND',
+                                effects: {
+                                    visible: true
+                                }
+                            }
+                        ]
+                    }
+                ],
+                conditions: [
+                    {
+                        when: 'type',
+                        in: [
+                            'text',
+                            'textarea',
+                            'email'
+                        ]
+                    }
+                ]
+            },
+            {
+                id: 'number-validation',
+                title: 'Number validation',
+                fields: [
+                    {
+                        name: 'validation.integer',
+                        type: 'switch',
+                        label: 'Integer only',
+                        description: 'Only allow whole numbers'
+                    }
+                ],
+                conditions: [
+                    {
+                        when: 'type',
+                        in: [
+                            'number',
+                            'slider'
+                        ]
+                    }
+                ]
+            },
+            {
+                id: 'file-validation',
+                title: 'File validation',
+                fields: [
+                    {
+                        name: 'validation.maxFileSize',
+                        type: 'number',
+                        label: 'Max file size (MB)',
+                        min: 0,
+                        step: 0.1,
+                        placeholder: 'No limit'
+                    },
+                    {
+                        name: 'validation.maxFiles',
+                        type: 'number',
+                        label: 'Max number of files',
+                        min: 1,
+                        placeholder: 'No limit',
+                        rules: [
+                            {
+                                id: 'show-when-multiple',
+                                conditions: [
+                                    {
+                                        when: 'multiple',
+                                        is: true
+                                    }
+                                ],
+                                operator: 'AND',
+                                effects: {
+                                    visible: true
+                                }
+                            }
+                        ]
+                    }
+                ],
+                conditions: [
+                    {
+                        when: 'type',
+                        is: 'file'
+                    }
+                ]
+            }
+        ],
+        initialData: {
+            name: field.name,
+            label: field.label,
+            type: field.type,
+            placeholder: field.placeholder || '',
+            description: field.description || '',
+            min: field.min,
+            max: field.max,
+            step: field.step,
+            accept: field.accept || '',
+            multiple: field.multiple || false,
+            validation: {
+                minLength: field.validation?.minLength,
+                maxLength: field.validation?.maxLength,
+                pattern: field.validation?.pattern || '',
+                patternMessage: field.validation?.patternMessage || '',
+                integer: field.validation?.integer || false,
+                maxFileSize: field.validation?.maxFileSize ? field.validation.maxFileSize / 1048576 : void 0,
+                maxFiles: field.validation?.maxFiles
+            }
+        },
+        actions: []
+    });
+function SectionConfigForm({ section, onUpdate, existingSectionIds }) {
+    const [attemptedId, setAttemptedId] = useState(null);
+    useEffect(()=>{
+        setAttemptedId(null);
+    }, [
+        section.id
+    ]);
+    const isDuplicateId = null !== attemptedId && attemptedId !== section.id && existingSectionIds.has(attemptedId);
+    const schema = useMemo(()=>createSectionConfigSchema(section), [
+        section
+    ]);
+    const plugins = useMemo(()=>[
+            {
+                name: 'section-sync',
+                onValueChange: (_field, _value, context)=>{
+                    const values = context.values;
+                    const newId = values.id;
+                    setAttemptedId(newId);
+                    onUpdate({
+                        id: newId,
+                        title: values.title,
+                        description: values.description || void 0,
+                        collapsible: values.collapsible,
+                        defaultExpanded: values.defaultExpanded
+                    });
+                }
+            }
+        ], [
+        onUpdate
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "space-y-4",
+        children: [
+            isDuplicateId && /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-2 p-2 bg-destructive/10 border border-destructive/20 rounded-md text-destructive text-sm",
+                children: [
+                    /*#__PURE__*/ jsx(AlertTriangle, {
+                        className: "h-4 w-4 shrink-0"
+                    }),
+                    /*#__PURE__*/ jsxs("span", {
+                        children: [
+                            'Section ID "',
+                            attemptedId,
+                            '" already exists. Please use a unique ID.'
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(MetadataForm, {
+                schema: schema,
+                plugins: plugins,
+                autoComplete: "off"
+            }, section.id),
+            /*#__PURE__*/ jsx(Separator, {}),
+            /*#__PURE__*/ jsxs("div", {
+                className: "text-sm text-muted-foreground",
+                children: [
+                    /*#__PURE__*/ jsxs("p", {
+                        children: [
+                            "This section contains ",
+                            section.fields.length,
+                            " field(s)."
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("p", {
+                        className: "mt-1",
+                        children: "Click on a field in the left panel to configure it."
+                    })
+                ]
+            })
+        ]
+    });
+}
+function FieldConfigForm({ field, onUpdate, allFields, existingFieldNames }) {
+    const [attemptedName, setAttemptedName] = useState(null);
+    useEffect(()=>{
+        setAttemptedName(null);
+    }, [
+        field.id
+    ]);
+    const isDuplicateName = null !== attemptedName && attemptedName !== field.name && existingFieldNames.has(attemptedName);
+    const schema = useMemo(()=>createFieldConfigSchema(field), [
+        field
+    ]);
+    const currentTypeRef = useMemo(()=>({
+            type: field.type
+        }), [
+        field.type
+    ]);
+    const plugins = useMemo(()=>[
+            {
+                name: 'field-sync',
+                onValueChange: (_fieldName, _value, context)=>{
+                    const values = context.values;
+                    const newType = values.type;
+                    const newName = values.name;
+                    const validationValues = values.validation;
+                    setAttemptedName(newName);
+                    const updates = {
+                        name: newName,
+                        label: values.label,
+                        type: newType,
+                        placeholder: values.placeholder || void 0,
+                        description: values.description || void 0
+                    };
+                    const requiredMessage = validationValues?.requiredMessage || void 0;
+                    if ('number' === newType || 'slider' === newType) {
+                        updates.min = values.min;
+                        updates.max = values.max;
+                        updates.step = values.step;
+                        updates.validation = {
+                            integer: validationValues?.integer,
+                            requiredMessage
+                        };
+                    } else if ('file' === newType) {
+                        updates.accept = values.accept || void 0;
+                        updates.multiple = values.multiple;
+                        const maxFileSizeMB = validationValues?.maxFileSize;
+                        updates.validation = {
+                            maxFileSize: maxFileSizeMB ? 1024 * maxFileSizeMB * 1024 : void 0,
+                            maxFiles: validationValues?.maxFiles,
+                            requiredMessage
+                        };
+                    } else if ('text' === newType || 'textarea' === newType || 'email' === newType) updates.validation = {
+                        minLength: validationValues?.minLength,
+                        maxLength: validationValues?.maxLength,
+                        pattern: validationValues?.pattern || void 0,
+                        patternMessage: validationValues?.patternMessage || void 0,
+                        requiredMessage
+                    };
+                    else if (requiredMessage) updates.validation = {
+                        requiredMessage
+                    };
+                    if (newType !== currentTypeRef.type) {
+                        const preservedRequiredMessage = field.validation?.requiredMessage;
+                        updates.options = void 0;
+                        updates.min = void 0;
+                        updates.max = void 0;
+                        updates.step = void 0;
+                        updates.accept = void 0;
+                        updates.multiple = void 0;
+                        updates.validation = void 0;
+                        if ('number' === newType || 'slider' === newType) {
+                            updates.min = values.min;
+                            updates.max = values.max;
+                            updates.step = values.step;
+                            updates.validation = {
+                                integer: validationValues?.integer,
+                                requiredMessage: preservedRequiredMessage
+                            };
+                        } else if ('file' === newType) {
+                            updates.accept = values.accept || void 0;
+                            updates.multiple = values.multiple;
+                            const maxFileSizeMB = validationValues?.maxFileSize;
+                            updates.validation = {
+                                maxFileSize: maxFileSizeMB ? 1024 * maxFileSizeMB * 1024 : void 0,
+                                maxFiles: validationValues?.maxFiles,
+                                requiredMessage: preservedRequiredMessage
+                            };
+                        } else if ('text' === newType || 'textarea' === newType || 'email' === newType) updates.validation = {
+                            minLength: validationValues?.minLength,
+                            maxLength: validationValues?.maxLength,
+                            pattern: validationValues?.pattern || void 0,
+                            patternMessage: validationValues?.patternMessage || void 0,
+                            requiredMessage: preservedRequiredMessage
+                        };
+                        else if (preservedRequiredMessage) updates.validation = {
+                            requiredMessage: preservedRequiredMessage
+                        };
+                        currentTypeRef.type = newType;
+                    }
+                    onUpdate(updates);
+                }
+            }
+        ], [
+        onUpdate,
+        currentTypeRef,
+        field.validation?.requiredMessage
+    ]);
+    const needsOptions = [
+        'select',
+        'multiselect',
+        'radio'
+    ].includes(field.type);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "space-y-2",
+        children: [
+            isDuplicateName && /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-2 p-2 bg-destructive/10 border border-destructive/20 rounded-md text-destructive text-sm",
+                children: [
+                    /*#__PURE__*/ jsx(AlertTriangle, {
+                        className: "h-4 w-4 shrink-0"
+                    }),
+                    /*#__PURE__*/ jsxs("span", {
+                        children: [
+                            'Field name "',
+                            attemptedName,
+                            '" already exists. Please use a unique name.'
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(MetadataForm, {
+                schema: schema,
+                plugins: plugins,
+                autoComplete: "off"
+            }, field.id),
+            needsOptions && /*#__PURE__*/ jsx(Accordion, {
+                type: "multiple",
+                defaultValue: [
+                    'options'
+                ],
+                children: /*#__PURE__*/ jsxs(AccordionItem, {
+                    value: "options",
+                    className: "border rounded-lg px-3",
+                    children: [
+                        /*#__PURE__*/ jsx(AccordionTrigger, {
+                            className: "text-sm font-medium",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center gap-2",
+                                children: [
+                                    /*#__PURE__*/ jsx(Database, {
+                                        className: "h-4 w-4"
+                                    }),
+                                    "Options"
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(AccordionContent, {
+                            className: "pt-2",
+                            children: /*#__PURE__*/ jsx(FieldOptionsEditor, {
+                                options: field.options || [],
+                                onChange: (options)=>onUpdate({
+                                        options
+                                    })
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Accordion, {
+                type: "multiple",
+                defaultValue: [
+                    'data-source'
+                ],
+                children: /*#__PURE__*/ jsxs(AccordionItem, {
+                    value: "data-source",
+                    className: "border rounded-lg px-3",
+                    children: [
+                        /*#__PURE__*/ jsx(AccordionTrigger, {
+                            className: "text-sm font-medium",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center gap-2",
+                                children: [
+                                    /*#__PURE__*/ jsx(Database, {
+                                        className: "h-4 w-4"
+                                    }),
+                                    "Data source"
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(AccordionContent, {
+                            className: "pt-2",
+                            children: /*#__PURE__*/ jsx(DataSourceEditor, {
+                                dataSource: field.dataSource,
+                                onChange: (dataSource)=>onUpdate({
+                                        dataSource
+                                    })
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Accordion, {
+                type: "multiple",
+                defaultValue: [
+                    'rules'
+                ],
+                children: /*#__PURE__*/ jsxs(AccordionItem, {
+                    value: "rules",
+                    className: "border rounded-lg px-3",
+                    children: [
+                        /*#__PURE__*/ jsx(AccordionTrigger, {
+                            className: "text-sm font-medium",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center gap-2",
+                                children: [
+                                    /*#__PURE__*/ jsx(GitBranch, {
+                                        className: "h-4 w-4"
+                                    }),
+                                    "Rules & conditions"
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(AccordionContent, {
+                            className: "pt-2",
+                            children: /*#__PURE__*/ jsx(RulesEditor, {
+                                rules: field.rules,
+                                onChange: (rules)=>onUpdate({
+                                        rules
+                                    }),
+                                allFields: allFields,
+                                requiredMessage: field.validation?.requiredMessage,
+                                onRequiredMessageChange: (message)=>onUpdate({
+                                        validation: {
+                                            ...field.validation,
+                                            requiredMessage: message
+                                        }
+                                    })
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function FormDesigner() {
+    const [formTitle, setFormTitle] = useState('My Custom Form');
+    const [formDescription, setFormDescription] = useState('');
+    const [sections, setSections] = useState([
+        {
+            id: 'section-1',
+            title: 'General Information',
+            collapsible: false,
+            defaultExpanded: true,
+            fields: [
+                {
+                    id: '1',
+                    name: 'fullName',
+                    type: 'text',
+                    label: 'Full Name',
+                    placeholder: 'Enter your name'
+                }
+            ]
+        }
+    ]);
+    const [selectedSectionId, setSelectedSectionId] = useState('section-1');
+    const [selectedFieldId, setSelectedFieldId] = useState('1');
+    const [expandedSections, setExpandedSections] = useState([
+        'section-1'
+    ]);
+    const [previewDisabled, setPreviewDisabled] = useState(false);
+    const allFields = sections.flatMap((s)=>s.fields);
+    const selectedSection = sections.find((s)=>s.id === selectedSectionId);
+    const selectedField = allFields.find((f)=>f.id === selectedFieldId);
+    const generatedSchema = {
+        id: 'custom-form',
+        title: formTitle,
+        description: formDescription || void 0,
+        mode: 'onChange',
+        reValidateMode: 'onChange',
+        sections: sections.map((section)=>({
+                id: section.id,
+                title: section.title,
+                description: section.description,
+                collapsible: section.collapsible,
+                defaultExpanded: section.defaultExpanded,
+                fields: section.fields.map((field)=>{
+                    const { id: _id, validation: _validationConfig, ...fieldMeta } = field;
+                    const validationConfig = buildValidationConfig(field);
+                    return {
+                        ...fieldMeta,
+                        validation: validationConfig
+                    };
+                })
+            }))
+    };
+    const addSection = ()=>{
+        const newSection = {
+            id: `section-${Date.now()}`,
+            title: `Section ${sections.length + 1}`,
+            collapsible: true,
+            defaultExpanded: true,
+            fields: []
+        };
+        setSections([
+            ...sections,
+            newSection
+        ]);
+        setSelectedSectionId(newSection.id);
+        setSelectedFieldId(null);
+        setExpandedSections([
+            ...expandedSections,
+            newSection.id
+        ]);
+    };
+    const removeSection = (id)=>{
+        if (sections.length <= 1) return;
+        setSections(sections.filter((s)=>s.id !== id));
+        setExpandedSections(expandedSections.filter((sId)=>sId !== id));
+        if (selectedSectionId === id) {
+            setSelectedSectionId(sections[0]?.id || null);
+            setSelectedFieldId(null);
+        }
+    };
+    const updateSection = (id, updates)=>{
+        let finalUpdates = updates;
+        if (updates.id && updates.id !== id) {
+            const idExists = sections.some((s)=>s.id === updates.id);
+            if (idExists) {
+                const { id: _id, ...rest } = updates;
+                finalUpdates = rest;
+            }
+        }
+        setSections(sections.map((s)=>s.id === id ? {
+                ...s,
+                ...finalUpdates
+            } : s));
+        if (finalUpdates.id && finalUpdates.id !== id) {
+            if (selectedSectionId === id) setSelectedSectionId(finalUpdates.id);
+            setExpandedSections(expandedSections.map((sId)=>sId === id ? finalUpdates.id : sId));
+        }
+    };
+    const moveSection = (id, direction)=>{
+        const index = sections.findIndex((s)=>s.id === id);
+        if (-1 === index) return;
+        const newSections = [
+            ...sections
+        ];
+        if ('up' === direction && index > 0) [newSections[index - 1], newSections[index]] = [
+            newSections[index],
+            newSections[index - 1]
+        ];
+        else if ('down' === direction && index < sections.length - 1) [newSections[index], newSections[index + 1]] = [
+            newSections[index + 1],
+            newSections[index]
+        ];
+        setSections(newSections);
+    };
+    const addField = (sectionId)=>{
+        const section = sections.find((s)=>s.id === sectionId);
+        if (!section) return;
+        const newField = {
+            id: Date.now().toString(),
+            name: `field_${allFields.length + 1}`,
+            type: 'text',
+            label: `Field ${allFields.length + 1}`
+        };
+        setSections(sections.map((s)=>s.id === sectionId ? {
+                ...s,
+                fields: [
+                    ...s.fields,
+                    newField
+                ]
+            } : s));
+        setSelectedSectionId(sectionId);
+        setSelectedFieldId(newField.id);
+    };
+    const removeField = (sectionId, fieldId)=>{
+        setSections(sections.map((s)=>s.id === sectionId ? {
+                ...s,
+                fields: s.fields.filter((f)=>f.id !== fieldId)
+            } : s));
+        if (selectedFieldId === fieldId) {
+            const section = sections.find((s)=>s.id === sectionId);
+            setSelectedFieldId(section?.fields[0]?.id || null);
+        }
+    };
+    const updateField = (fieldId, updates)=>{
+        setSections((prevSections)=>{
+            const prevAllFields = prevSections.flatMap((s)=>s.fields);
+            let finalUpdates = updates;
+            if (updates.name) {
+                const currentField = prevAllFields.find((f)=>f.id === fieldId);
+                if (currentField && updates.name !== currentField.name) {
+                    const nameExists = prevAllFields.some((f)=>f.id !== fieldId && f.name === updates.name);
+                    if (nameExists) {
+                        const { name: _name, ...rest } = updates;
+                        finalUpdates = rest;
+                    }
+                }
+            }
+            return prevSections.map((s)=>({
+                    ...s,
+                    fields: s.fields.map((f)=>f.id === fieldId ? {
+                            ...f,
+                            ...finalUpdates
+                        } : f)
+                }));
+        });
+    };
+    const moveField = (sectionId, fieldId, direction)=>{
+        const section = sections.find((s)=>s.id === sectionId);
+        if (!section) return;
+        const index = section.fields.findIndex((f)=>f.id === fieldId);
+        if (-1 === index) return;
+        const newFields = [
+            ...section.fields
+        ];
+        if ('up' === direction && index > 0) [newFields[index - 1], newFields[index]] = [
+            newFields[index],
+            newFields[index - 1]
+        ];
+        else if ('down' === direction && index < newFields.length - 1) [newFields[index], newFields[index + 1]] = [
+            newFields[index + 1],
+            newFields[index]
+        ];
+        setSections(sections.map((s)=>s.id === sectionId ? {
+                ...s,
+                fields: newFields
+            } : s));
+    };
+    return /*#__PURE__*/ jsxs(Grid, {
+        gap: 3,
+        h: "screen",
+        p: 3,
+        className: "lg:grid-cols-[2fr_3fr_3fr]",
+        children: [
+            /*#__PURE__*/ jsxs(Card, {
+                className: "overflow-hidden flex flex-col",
+                children: [
+                    /*#__PURE__*/ jsx(CardHeader, {
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "flex items-center justify-between",
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    children: [
+                                        /*#__PURE__*/ jsxs(CardTitle, {
+                                            className: "flex items-center gap-2",
+                                            children: [
+                                                /*#__PURE__*/ jsx(Layers, {
+                                                    className: "h-4 w-4"
+                                                }),
+                                                "Sections"
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx(CardDescription, {
+                                            children: "Organize fields into sections"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(Button, {
+                                    onClick: addSection,
+                                    variant: "outline",
+                                    size: "sm",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Plus, {
+                                            className: "h-3 w-3 mr-1"
+                                        }),
+                                        "Section"
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(CardContent, {
+                        className: "flex-1 overflow-auto px-2 pb-2",
+                        children: /*#__PURE__*/ jsx(Accordion, {
+                            type: "multiple",
+                            value: expandedSections,
+                            onValueChange: setExpandedSections,
+                            className: "space-y-1",
+                            children: sections.map((section, sectionIndex)=>/*#__PURE__*/ jsxs(AccordionItem, {
+                                    value: section.id,
+                                    className: `group/section border rounded-lg ${selectedSectionId === section.id && !selectedFieldId ? 'ring-2 ring-primary' : ''}`,
+                                    children: [
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "flex items-center gap-1 px-2 py-1.5",
+                                            children: [
+                                                /*#__PURE__*/ jsx(AccordionTrigger, {
+                                                    className: "h-5 w-5 p-0 hover:no-underline hover:bg-accent rounded [&>svg]:hidden flex items-center justify-center shrink-0",
+                                                    children: /*#__PURE__*/ jsx("span", {
+                                                        className: "flex items-center justify-center",
+                                                        children: /*#__PURE__*/ jsx(ChevronRight, {
+                                                            className: "h-3 w-3 shrink-0 transition-transform duration-200 group-data-[state=open]/section:rotate-90"
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "flex-1 min-w-0 cursor-pointer flex items-center gap-1",
+                                                    onClick: ()=>{
+                                                        setSelectedSectionId(section.id);
+                                                        setSelectedFieldId(null);
+                                                    },
+                                                    children: [
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            className: "text-sm font-medium truncate",
+                                                            children: section.title
+                                                        }),
+                                                        section.collapsible && /*#__PURE__*/ jsx("span", {
+                                                            className: "text-[10px] text-muted-foreground",
+                                                            children: "(collapsible)"
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "flex gap-0.5 opacity-0 group-hover/section:opacity-100 transition-opacity",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(Button, {
+                                                            variant: "ghost",
+                                                            size: "sm",
+                                                            className: "h-5 w-5 p-0",
+                                                            onClick: (e)=>{
+                                                                e.stopPropagation();
+                                                                moveSection(section.id, 'up');
+                                                            },
+                                                            disabled: 0 === sectionIndex,
+                                                            children: /*#__PURE__*/ jsx(MoveUp, {
+                                                                className: "h-2.5 w-2.5"
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ jsx(Button, {
+                                                            variant: "ghost",
+                                                            size: "sm",
+                                                            className: "h-5 w-5 p-0",
+                                                            onClick: (e)=>{
+                                                                e.stopPropagation();
+                                                                moveSection(section.id, 'down');
+                                                            },
+                                                            disabled: sectionIndex === sections.length - 1,
+                                                            children: /*#__PURE__*/ jsx(MoveDown, {
+                                                                className: "h-2.5 w-2.5"
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ jsx(Button, {
+                                                            variant: "ghost",
+                                                            size: "sm",
+                                                            className: "h-5 w-5 p-0",
+                                                            onClick: (e)=>{
+                                                                e.stopPropagation();
+                                                                removeSection(section.id);
+                                                            },
+                                                            disabled: sections.length <= 1,
+                                                            children: /*#__PURE__*/ jsx(Trash2, {
+                                                                className: "h-2.5 w-2.5 text-destructive"
+                                                            })
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx(AccordionContent, {
+                                            className: "px-2 pb-2 pt-0",
+                                            children: /*#__PURE__*/ jsxs("div", {
+                                                className: "space-y-0.5 ml-3 border-l pl-2",
+                                                children: [
+                                                    section.fields.map((field, fieldIndex)=>/*#__PURE__*/ jsxs("div", {
+                                                            className: `group/field flex items-center gap-1 px-2 py-1 rounded cursor-pointer hover:bg-accent transition-colors ${selectedFieldId === field.id ? 'bg-accent' : ''}`,
+                                                            onClick: ()=>{
+                                                                setSelectedSectionId(section.id);
+                                                                setSelectedFieldId(field.id);
+                                                            },
+                                                            children: [
+                                                                /*#__PURE__*/ jsx(GripVertical, {
+                                                                    className: "h-3 w-3 text-muted-foreground opacity-0 group-hover/field:opacity-50"
+                                                                }),
+                                                                /*#__PURE__*/ jsxs("div", {
+                                                                    className: "flex-1 min-w-0",
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsxs("div", {
+                                                                            className: "flex items-center gap-1",
+                                                                            children: [
+                                                                                /*#__PURE__*/ jsx("span", {
+                                                                                    className: "text-xs font-medium truncate",
+                                                                                    children: field.label
+                                                                                }),
+                                                                                field.rules?.some((r)=>r.effects.required) && /*#__PURE__*/ jsx("span", {
+                                                                                    className: "text-[10px] text-destructive",
+                                                                                    children: "*"
+                                                                                })
+                                                                            ]
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx("div", {
+                                                                            className: "text-[9px] text-muted-foreground",
+                                                                            children: field.type
+                                                                        })
+                                                                    ]
+                                                                }),
+                                                                /*#__PURE__*/ jsxs("div", {
+                                                                    className: "flex gap-0.5 opacity-0 group-hover/field:opacity-100 transition-opacity",
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsx(Button, {
+                                                                            variant: "ghost",
+                                                                            size: "sm",
+                                                                            className: "h-5 w-5 p-0",
+                                                                            onClick: (e)=>{
+                                                                                e.stopPropagation();
+                                                                                moveField(section.id, field.id, 'up');
+                                                                            },
+                                                                            disabled: 0 === fieldIndex,
+                                                                            children: /*#__PURE__*/ jsx(MoveUp, {
+                                                                                className: "h-2.5 w-2.5"
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(Button, {
+                                                                            variant: "ghost",
+                                                                            size: "sm",
+                                                                            className: "h-5 w-5 p-0",
+                                                                            onClick: (e)=>{
+                                                                                e.stopPropagation();
+                                                                                moveField(section.id, field.id, 'down');
+                                                                            },
+                                                                            disabled: fieldIndex === section.fields.length - 1,
+                                                                            children: /*#__PURE__*/ jsx(MoveDown, {
+                                                                                className: "h-2.5 w-2.5"
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(Button, {
+                                                                            variant: "ghost",
+                                                                            size: "sm",
+                                                                            className: "h-5 w-5 p-0",
+                                                                            onClick: (e)=>{
+                                                                                e.stopPropagation();
+                                                                                removeField(section.id, field.id);
+                                                                            },
+                                                                            children: /*#__PURE__*/ jsx(Trash2, {
+                                                                                className: "h-2.5 w-2.5 text-destructive"
+                                                                            })
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            ]
+                                                        }, field.id)),
+                                                    /*#__PURE__*/ jsxs(Button, {
+                                                        onClick: ()=>addField(section.id),
+                                                        variant: "outline",
+                                                        size: "sm",
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(Plus, {
+                                                                className: "h-3 w-3 mr-1"
+                                                            }),
+                                                            "Field"
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    ]
+                                }, section.id))
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Card, {
+                className: "overflow-hidden flex flex-col",
+                children: [
+                    /*#__PURE__*/ jsxs(CardHeader, {
+                        children: [
+                            /*#__PURE__*/ jsxs(CardTitle, {
+                                className: "flex items-center gap-2",
+                                children: [
+                                    /*#__PURE__*/ jsx(Settings, {
+                                        className: "h-4 w-4"
+                                    }),
+                                    selectedFieldId ? 'Field configuration' : selectedSectionId ? 'Section configuration' : 'Configuration'
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(CardDescription, {
+                                children: selectedField ? `Configure "${selectedField.label}"` : selectedSection ? `Configure "${selectedSection.title}" section` : 'Select a section or field to configure'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(CardContent, {
+                        className: "flex-1 overflow-auto",
+                        children: selectedField ? /*#__PURE__*/ jsx(FieldConfigForm, {
+                            field: selectedField,
+                            onUpdate: (updates)=>updateField(selectedField.id, updates),
+                            allFields: allFields,
+                            existingFieldNames: new Set(allFields.map((f)=>f.name))
+                        }) : selectedSection ? /*#__PURE__*/ jsx(SectionConfigForm, {
+                            section: selectedSection,
+                            onUpdate: (updates)=>updateSection(selectedSection.id, updates),
+                            existingSectionIds: new Set(sections.map((s)=>s.id))
+                        }) : /*#__PURE__*/ jsx("div", {
+                            className: "flex items-center justify-center h-full text-muted-foreground",
+                            children: "Select a section or field to configure"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Card, {
+                className: "overflow-hidden flex flex-col",
+                children: [
+                    /*#__PURE__*/ jsx(CardHeader, {
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "space-y-4",
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    children: [
+                                        /*#__PURE__*/ jsxs(CardTitle, {
+                                            className: "flex items-center gap-2",
+                                            children: [
+                                                /*#__PURE__*/ jsx(View, {
+                                                    className: "h-4 w-4"
+                                                }),
+                                                "Preview & export"
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx(CardDescription, {
+                                            children: "See how your form looks"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "space-y-2",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Label, {
+                                            htmlFor: "form-title",
+                                            children: "Form title"
+                                        }),
+                                        /*#__PURE__*/ jsx(Input, {
+                                            id: "form-title",
+                                            value: formTitle,
+                                            onChange: (e)=>setFormTitle(e.target.value)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "space-y-2",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Label, {
+                                            htmlFor: "form-description",
+                                            children: "Form description"
+                                        }),
+                                        /*#__PURE__*/ jsx(Textarea, {
+                                            id: "form-description",
+                                            value: formDescription,
+                                            onChange: (e)=>setFormDescription(e.target.value),
+                                            placeholder: "Optional description",
+                                            rows: 2
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(CardContent, {
+                        className: "flex-1 overflow-auto",
+                        children: /*#__PURE__*/ jsxs(Tabs, {
+                            defaultValue: "preview",
+                            className: "h-full flex flex-col",
+                            children: [
+                                /*#__PURE__*/ jsxs(TabsList, {
+                                    className: "grid w-full grid-cols-2",
+                                    children: [
+                                        /*#__PURE__*/ jsxs(TabsTrigger, {
+                                            value: "preview",
+                                            children: [
+                                                /*#__PURE__*/ jsx(Eye, {
+                                                    className: "h-4 w-4 mr-2"
+                                                }),
+                                                "Preview"
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs(TabsTrigger, {
+                                            value: "code",
+                                            children: [
+                                                /*#__PURE__*/ jsx(Code, {
+                                                    className: "h-4 w-4 mr-2"
+                                                }),
+                                                "Schema"
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(TabsContent, {
+                                    value: "preview",
+                                    className: "flex-1 overflow-auto",
+                                    children: [
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "flex items-center justify-end gap-2 mb-4 pb-2 border-b",
+                                            children: [
+                                                /*#__PURE__*/ jsx(Label, {
+                                                    htmlFor: "preview-readonly",
+                                                    className: "text-sm text-muted-foreground",
+                                                    children: "Readonly"
+                                                }),
+                                                /*#__PURE__*/ jsx(Switch, {
+                                                    id: "preview-readonly",
+                                                    checked: previewDisabled,
+                                                    onCheckedChange: setPreviewDisabled
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx(MetadataForm, {
+                                            schema: generatedSchema,
+                                            onSubmit: (data)=>{
+                                                console.log('Form submitted:', data);
+                                                alert('Form submitted! Check console for data.');
+                                            },
+                                            disabled: previewDisabled,
+                                            autoComplete: "off"
+                                        }, sections.map((s)=>`${s.id}:${s.collapsible}:${s.defaultExpanded}:${s.fields.map((f)=>`${f.id}:${f.type}:${f.name}:${JSON.stringify(f.rules || [])}:${JSON.stringify(f.validation || {})}`).join('-')}`).join(','))
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx(TabsContent, {
+                                    value: "code",
+                                    className: "flex-1 overflow-auto",
+                                    children: /*#__PURE__*/ jsx("pre", {
+                                        className: "text-xs bg-muted p-4 rounded-lg overflow-auto max-h-full",
+                                        children: schemaToJson(generatedSchema)
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+function FieldOptionsEditor({ options, onChange }) {
+    const addOption = ()=>{
+        onChange([
+            ...options,
+            {
+                label: `Option ${options.length + 1}`,
+                value: `option${options.length + 1}`
+            }
+        ]);
+    };
+    const updateOption = (index, updates)=>{
+        const newOptions = [
+            ...options
+        ];
+        newOptions[index] = {
+            ...newOptions[index],
+            ...updates
+        };
+        onChange(newOptions);
+    };
+    const removeOption = (index)=>{
+        onChange(options.filter((_, i)=>i !== index));
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "space-y-3",
+        children: [
+            options.map((option, index)=>/*#__PURE__*/ jsxs("div", {
+                    className: "flex gap-2 items-center",
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex-1 grid grid-cols-2 gap-2",
+                            children: [
+                                /*#__PURE__*/ jsx(Input, {
+                                    placeholder: "Label",
+                                    value: option.label,
+                                    onChange: (e)=>updateOption(index, {
+                                            label: e.target.value
+                                        })
+                                }),
+                                /*#__PURE__*/ jsx(Input, {
+                                    placeholder: "Value",
+                                    value: option.value,
+                                    onChange: (e)=>updateOption(index, {
+                                            value: e.target.value
+                                        })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            variant: "ghost",
+                            size: "icon",
+                            className: "h-8 w-8 text-muted-foreground hover:text-destructive",
+                            onClick: ()=>removeOption(index),
+                            children: /*#__PURE__*/ jsx(Trash2, {
+                                className: "h-4 w-4"
+                            })
+                        })
+                    ]
+                }, index)),
+            /*#__PURE__*/ jsxs(Button, {
+                onClick: addOption,
+                variant: "outline",
+                size: "sm",
+                className: "w-full",
+                children: [
+                    /*#__PURE__*/ jsx(Plus, {
+                        className: "h-3 w-3 mr-2"
+                    }),
+                    "Add option"
+                ]
+            })
+        ]
+    });
+}
+function DataSourceEditor({ dataSource, onChange }) {
+    const [sourceType, setSourceType] = useState(dataSource?.type || 'none');
+    return /*#__PURE__*/ jsxs("div", {
+        className: "space-y-4",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "space-y-2",
+                children: [
+                    /*#__PURE__*/ jsx(Label, {
+                        children: "Data source type"
+                    }),
+                    /*#__PURE__*/ jsxs(Select, {
+                        value: sourceType,
+                        onValueChange: (value)=>{
+                            setSourceType(value);
+                            if ('none' === value) onChange(void 0);
+                            else if ('static' === value) onChange({
+                                type: 'static',
+                                options: []
+                            });
+                            else if ('fetch' === value) onChange({
+                                type: 'fetch',
+                                url: '',
+                                method: 'GET'
+                            });
+                            else if ('remote' === value) onChange({
+                                type: 'remote',
+                                endpoint: '',
+                                params: {}
+                            });
+                            else if ('computed' === value) onChange({
+                                type: 'computed',
+                                dependency: [],
+                                compute: ''
+                            });
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(SelectTrigger, {
+                                children: /*#__PURE__*/ jsx(SelectValue, {})
+                            }),
+                            /*#__PURE__*/ jsxs(SelectContent, {
+                                children: [
+                                    /*#__PURE__*/ jsx(SelectItem, {
+                                        value: "none",
+                                        children: "None"
+                                    }),
+                                    /*#__PURE__*/ jsx(SelectItem, {
+                                        value: "fetch",
+                                        children: "Fetch (single request)"
+                                    }),
+                                    /*#__PURE__*/ jsx(SelectItem, {
+                                        value: "remote",
+                                        children: "Remote (dependent)"
+                                    }),
+                                    /*#__PURE__*/ jsx(SelectItem, {
+                                        value: "computed",
+                                        children: "Computed"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            'fetch' === sourceType && dataSource?.type === 'fetch' && /*#__PURE__*/ jsxs("div", {
+                className: "space-y-3",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "space-y-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Label, {
+                                children: "API URL"
+                            }),
+                            /*#__PURE__*/ jsx(Input, {
+                                placeholder: "/api/data",
+                                value: dataSource.url,
+                                onChange: (e)=>onChange({
+                                        ...dataSource,
+                                        url: e.target.value
+                                    })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "space-y-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Label, {
+                                children: "Transform"
+                            }),
+                            /*#__PURE__*/ jsx(Textarea, {
+                                placeholder: "data.map(item => ({ label: item.name, value: item.id }))",
+                                value: dataSource.transform || '',
+                                onChange: (e)=>onChange({
+                                        ...dataSource,
+                                        transform: e.target.value
+                                    }),
+                                rows: 2
+                            })
+                        ]
+                    })
+                ]
+            }),
+            'remote' === sourceType && dataSource?.type === 'remote' && /*#__PURE__*/ jsxs("div", {
+                className: "space-y-3",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "space-y-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Label, {
+                                children: "Endpoint"
+                            }),
+                            /*#__PURE__*/ jsx(Input, {
+                                placeholder: "/api/data",
+                                value: dataSource.endpoint,
+                                onChange: (e)=>onChange({
+                                        ...dataSource,
+                                        endpoint: e.target.value
+                                    })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "space-y-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Label, {
+                                children: "Parameters (JSON)"
+                            }),
+                            /*#__PURE__*/ jsx(Textarea, {
+                                placeholder: '{ "fieldName": "$otherField" }',
+                                value: JSON.stringify(dataSource.params || {}, null, 2),
+                                onChange: (e)=>{
+                                    try {
+                                        const params = JSON.parse(e.target.value);
+                                        onChange({
+                                            ...dataSource,
+                                            params
+                                        });
+                                    } catch  {}
+                                },
+                                rows: 3
+                            })
+                        ]
+                    })
+                ]
+            }),
+            'computed' === sourceType && dataSource?.type === 'computed' && /*#__PURE__*/ jsxs("div", {
+                className: "space-y-3",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "space-y-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Label, {
+                                children: "Dependencies (comma-separated)"
+                            }),
+                            /*#__PURE__*/ jsx(Input, {
+                                placeholder: "field1, field2",
+                                value: dataSource.dependency.join(', '),
+                                onChange: (e)=>onChange({
+                                        ...dataSource,
+                                        dependency: e.target.value.split(',').map((s)=>s.trim())
+                                    })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "space-y-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Label, {
+                                children: "Compute expression"
+                            }),
+                            /*#__PURE__*/ jsx(Textarea, {
+                                placeholder: "(field1 || 0) * (field2 || 0)",
+                                value: dataSource.compute,
+                                onChange: (e)=>onChange({
+                                        ...dataSource,
+                                        compute: e.target.value
+                                    }),
+                                rows: 2
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+const CONDITION_OPERATORS = [
+    {
+        value: 'is',
+        label: 'equals',
+        description: 'Field value equals'
+    },
+    {
+        value: 'isNot',
+        label: 'not equals',
+        description: 'Field value does not equal'
+    },
+    {
+        value: 'in',
+        label: 'is one of',
+        description: 'Field value is one of'
+    },
+    {
+        value: 'notIn',
+        label: 'is not one of',
+        description: 'Field value is not one of'
+    },
+    {
+        value: 'matches',
+        label: 'matches pattern',
+        description: 'Field value matches regex'
+    }
+];
+const RULE_EFFECTS = [
+    {
+        value: 'show',
+        label: 'Show field',
+        description: 'Show this field when conditions are met',
+        Icon: Eye,
+        color: 'text-green-600 bg-green-50 border-green-200'
+    },
+    {
+        value: 'hide',
+        label: 'Hide field',
+        description: 'Hide this field when conditions are met',
+        Icon: EyeOff,
+        color: 'text-orange-600 bg-orange-50 border-orange-200'
+    },
+    {
+        value: 'require',
+        label: 'Make required',
+        description: 'Require this field when conditions are met',
+        Icon: Asterisk,
+        color: 'text-red-600 bg-red-50 border-red-200'
+    },
+    {
+        value: 'disable',
+        label: 'Disable field',
+        description: 'Disable this field when conditions are met',
+        Icon: Ban,
+        color: 'text-gray-600 bg-gray-50 border-gray-200'
+    }
+];
+function RulesEditor({ rules = [], onChange, allFields, requiredMessage, onRequiredMessageChange }) {
+    const [isAddingRule, setIsAddingRule] = useState(false);
+    const [editingRuleIndex, setEditingRuleIndex] = useState(null);
+    const [selectedEffect, setSelectedEffect] = useState('show');
+    const [conditions, setConditions] = useState([
+        {
+            field: '',
+            operator: 'is',
+            value: ''
+        }
+    ]);
+    const [conditionOperator, setConditionOperator] = useState('AND');
+    const isAlwaysRequired = rules.some((r)=>true === r.effects.required && 0 === r.conditions.length);
+    const resetBuilder = ()=>{
+        setSelectedEffect('show');
+        setConditions([
+            {
+                field: '',
+                operator: 'is',
+                value: ''
+            }
+        ]);
+        setConditionOperator('AND');
+        setIsAddingRule(false);
+        setEditingRuleIndex(null);
+    };
+    const addCondition = ()=>{
+        setConditions([
+            ...conditions,
+            {
+                field: '',
+                operator: 'is',
+                value: ''
+            }
+        ]);
+    };
+    const updateCondition = (index, updates)=>{
+        const newConditions = [
+            ...conditions
+        ];
+        newConditions[index] = {
+            ...newConditions[index],
+            ...updates
+        };
+        setConditions(newConditions);
+    };
+    const removeCondition = (index)=>{
+        if (conditions.length > 1) setConditions(conditions.filter((_, i)=>i !== index));
+    };
+    const buildCondition = (cond)=>{
+        const condition = {
+            when: cond.field
+        };
+        const targetField = allFields.find((f)=>f.name === cond.field);
+        const isNumericField = targetField?.type === 'number' || targetField?.type === 'slider';
+        const isBooleanField = targetField?.type === 'checkbox' || targetField?.type === 'switch';
+        const parseValue = (val)=>{
+            if (isBooleanField) {
+                if ('true' === val.toLowerCase()) return true;
+                if ('false' === val.toLowerCase()) return false;
+            }
+            if (isNumericField) {
+                const num = Number(val);
+                if (!isNaN(num)) return num;
+            }
+            if ('true' === val.toLowerCase()) return true;
+            if ('false' === val.toLowerCase()) return false;
+            return val;
+        };
+        switch(cond.operator){
+            case 'is':
+                condition.is = parseValue(cond.value);
+                break;
+            case 'isNot':
+                condition.isNot = parseValue(cond.value);
+                break;
+            case 'in':
+                condition.in = cond.value.split(',').map((v)=>parseValue(v.trim()));
+                break;
+            case 'notIn':
+                condition.notIn = cond.value.split(',').map((v)=>parseValue(v.trim()));
+                break;
+            case 'matches':
+                condition.matches = cond.value;
+                break;
+        }
+        return condition;
+    };
+    const saveRule = ()=>{
+        const validConditions = conditions.filter((c)=>c.field);
+        if (0 === validConditions.length) return;
+        const newRule = {
+            id: `rule-${Date.now()}`,
+            conditions: validConditions.map(buildCondition),
+            operator: conditionOperator,
+            effects: {}
+        };
+        switch(selectedEffect){
+            case 'show':
+                newRule.effects.visible = true;
+                break;
+            case 'hide':
+                newRule.effects.visible = false;
+                break;
+            case 'require':
+                newRule.effects.required = true;
+                break;
+            case 'disable':
+                newRule.effects.disabled = true;
+                break;
+        }
+        if (null !== editingRuleIndex) {
+            const newRules = [
+                ...rules
+            ];
+            newRules[editingRuleIndex] = newRule;
+            onChange(newRules);
+        } else onChange([
+            ...rules,
+            newRule
+        ]);
+        resetBuilder();
+    };
+    const editRule = (index)=>{
+        const rule = rules[index];
+        if (!rule) return;
+        let effect = 'show';
+        if (true === rule.effects.visible) effect = 'show';
+        else if (false === rule.effects.visible) effect = 'hide';
+        else if (true === rule.effects.required) effect = 'require';
+        else if (true === rule.effects.disabled) effect = 'disable';
+        setSelectedEffect(effect);
+        setConditionOperator(rule.operator || 'AND');
+        const editableConditions = rule.conditions.map((cond)=>{
+            let operator = 'is';
+            let value = '';
+            if (void 0 !== cond.is) {
+                operator = 'is';
+                value = String(cond.is);
+            } else if (void 0 !== cond.isNot) {
+                operator = 'isNot';
+                value = String(cond.isNot);
+            } else if (void 0 !== cond.in) {
+                operator = 'in';
+                value = cond.in.map(String).join(', ');
+            } else if (void 0 !== cond.notIn) {
+                operator = 'notIn';
+                value = cond.notIn.map(String).join(', ');
+            } else if (void 0 !== cond.matches) {
+                operator = 'matches';
+                value = cond.matches;
+            }
+            return {
+                field: cond.when,
+                operator,
+                value
+            };
+        });
+        setConditions(editableConditions.length > 0 ? editableConditions : [
+            {
+                field: '',
+                operator: 'is',
+                value: ''
+            }
+        ]);
+        setEditingRuleIndex(index);
+        setIsAddingRule(true);
+    };
+    const deleteRule = (index)=>{
+        onChange(rules.filter((_, i)=>i !== index));
+    };
+    const getFieldLabel = (fieldName)=>{
+        const field = allFields.find((f)=>f.name === fieldName);
+        return field?.label || fieldName;
+    };
+    const describeRule = (rule)=>{
+        if (0 === rule.conditions.length) {
+            if (rule.effects.required) return 'Always required';
+            return 'Always applies';
+        }
+        const conditionDescriptions = rule.conditions.map((cond)=>{
+            const fieldLabel = getFieldLabel(cond.when);
+            if (void 0 !== cond.is) return `"${fieldLabel}" = ${JSON.stringify(cond.is)}`;
+            if (void 0 !== cond.isNot) return `"${fieldLabel}" ≠ ${JSON.stringify(cond.isNot)}`;
+            if (void 0 !== cond.in) return `"${fieldLabel}" in [${cond.in.map((v)=>JSON.stringify(v)).join(', ')}]`;
+            if (void 0 !== cond.notIn) return `"${fieldLabel}" not in [${cond.notIn.map((v)=>JSON.stringify(v)).join(', ')}]`;
+            if (void 0 !== cond.matches) return `"${fieldLabel}" matches /${cond.matches}/`;
+            return `"${fieldLabel}"`;
+        });
+        const operator = 'OR' === rule.operator ? ' OR ' : ' AND ';
+        return conditionDescriptions.join(operator);
+    };
+    const getEffectDescription = (rule)=>{
+        if (true === rule.effects.visible) return {
+            label: 'Show',
+            color: 'text-green-600 bg-green-50'
+        };
+        if (false === rule.effects.visible) return {
+            label: 'Hide',
+            color: 'text-orange-600 bg-orange-50'
+        };
+        if (true === rule.effects.required) return {
+            label: 'Required',
+            color: 'text-red-600 bg-red-50'
+        };
+        if (true === rule.effects.disabled) return {
+            label: 'Disabled',
+            color: 'text-gray-600 bg-gray-50'
+        };
+        return {
+            label: 'Unknown',
+            color: 'text-muted-foreground bg-muted'
+        };
+    };
+    const getFieldOptions = (fieldName)=>{
+        const field = allFields.find((f)=>f.name === fieldName);
+        return field?.options || [];
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "space-y-4",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "space-y-3 p-3 border rounded-lg bg-muted/30",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center justify-between",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center gap-3",
+                                children: [
+                                    /*#__PURE__*/ jsx(Asterisk, {
+                                        className: "h-5 w-5 text-red-500"
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Label, {
+                                                className: "cursor-pointer font-medium",
+                                                children: "Always required"
+                                            }),
+                                            /*#__PURE__*/ jsx("p", {
+                                                className: "text-xs text-muted-foreground",
+                                                children: "Field must always have a value"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Checkbox, {
+                                checked: isAlwaysRequired,
+                                onCheckedChange: (checked)=>{
+                                    if (checked) {
+                                        const requiredRule = {
+                                            id: 'always-required',
+                                            conditions: [],
+                                            operator: 'AND',
+                                            effects: {
+                                                required: true
+                                            }
+                                        };
+                                        onChange([
+                                            ...rules.filter((r)=>!(r.effects.required && 0 === r.conditions.length)),
+                                            requiredRule
+                                        ]);
+                                    } else {
+                                        onChange(rules.filter((r)=>!(r.effects.required && 0 === r.conditions.length)));
+                                        onRequiredMessageChange(void 0);
+                                    }
+                                }
+                            })
+                        ]
+                    }),
+                    isAlwaysRequired && /*#__PURE__*/ jsxs("div", {
+                        className: "space-y-1.5 pl-8",
+                        children: [
+                            /*#__PURE__*/ jsx(Label, {
+                                htmlFor: "required-message",
+                                className: "text-xs text-muted-foreground",
+                                children: "Error message"
+                            }),
+                            /*#__PURE__*/ jsx(Input, {
+                                id: "required-message",
+                                placeholder: "This field is required",
+                                value: requiredMessage || '',
+                                onChange: (e)=>onRequiredMessageChange(e.target.value || void 0),
+                                className: "h-8 text-sm"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            rules.filter((r)=>r.conditions.length > 0 || !r.effects.required).length > 0 && /*#__PURE__*/ jsxs("div", {
+                className: "space-y-2",
+                children: [
+                    /*#__PURE__*/ jsx(Label, {
+                        className: "text-xs text-muted-foreground uppercase tracking-wide",
+                        children: "Conditional rules"
+                    }),
+                    rules.map((rule, index)=>({
+                            rule,
+                            index
+                        })).filter(({ rule })=>rule.conditions.length > 0 || !rule.effects.required).map(({ rule, index })=>{
+                        const effect = getEffectDescription(rule);
+                        return /*#__PURE__*/ jsx("div", {
+                            className: "group border rounded-lg p-3 hover:border-primary/50 transition-colors",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-start justify-between gap-2",
+                                children: [
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "flex-1 min-w-0",
+                                        children: [
+                                            /*#__PURE__*/ jsxs("div", {
+                                                className: "flex items-center gap-2 mb-1",
+                                                children: [
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        className: `text-xs font-medium px-2 py-0.5 rounded ${effect.color}`,
+                                                        children: effect.label
+                                                    }),
+                                                    rule.conditions.length > 1 && /*#__PURE__*/ jsxs("span", {
+                                                        className: "text-xs text-muted-foreground",
+                                                        children: [
+                                                            "(",
+                                                            rule.operator,
+                                                            ")"
+                                                        ]
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsx("p", {
+                                                className: "text-sm text-muted-foreground truncate",
+                                                children: describeRule(rule)
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity",
+                                        children: [
+                                            /*#__PURE__*/ jsx(Button, {
+                                                variant: "ghost",
+                                                size: "sm",
+                                                className: "h-7 w-7 p-0",
+                                                onClick: ()=>editRule(index),
+                                                children: /*#__PURE__*/ jsx(Settings, {
+                                                    className: "h-3.5 w-3.5"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx(Button, {
+                                                variant: "ghost",
+                                                size: "sm",
+                                                className: "h-7 w-7 p-0 text-destructive hover:text-destructive",
+                                                onClick: ()=>deleteRule(index),
+                                                children: /*#__PURE__*/ jsx(Trash2, {
+                                                    className: "h-3.5 w-3.5"
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }, index);
+                    })
+                ]
+            }),
+            isAddingRule ? /*#__PURE__*/ jsxs("div", {
+                className: "border rounded-lg p-4 space-y-4 bg-muted/20",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center justify-between",
+                        children: [
+                            /*#__PURE__*/ jsx(Label, {
+                                className: "font-medium",
+                                children: null !== editingRuleIndex ? 'Edit rule' : 'New rule'
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                variant: "ghost",
+                                size: "sm",
+                                onClick: resetBuilder,
+                                children: "Cancel"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "space-y-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Label, {
+                                className: "text-xs text-muted-foreground",
+                                children: "When conditions are met:"
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "grid grid-cols-2 gap-2",
+                                children: RULE_EFFECTS.map((effect)=>/*#__PURE__*/ jsxs("button", {
+                                        type: "button",
+                                        className: `flex items-center gap-2 p-2 rounded-lg border text-left text-sm transition-all ${selectedEffect === effect.value ? effect.color + ' border-current' : 'hover:bg-muted'}`,
+                                        onClick: ()=>setSelectedEffect(effect.value),
+                                        children: [
+                                            /*#__PURE__*/ jsx(effect.Icon, {
+                                                className: "h-4 w-4"
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "font-medium",
+                                                children: effect.label
+                                            })
+                                        ]
+                                    }, effect.value))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "space-y-3",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center justify-between",
+                                children: [
+                                    /*#__PURE__*/ jsx(Label, {
+                                        className: "text-xs text-muted-foreground",
+                                        children: "Conditions:"
+                                    }),
+                                    conditions.length > 1 && /*#__PURE__*/ jsxs(Select, {
+                                        value: conditionOperator,
+                                        onValueChange: (v)=>setConditionOperator(v),
+                                        children: [
+                                            /*#__PURE__*/ jsx(SelectTrigger, {
+                                                className: "w-24 h-7 text-xs",
+                                                children: /*#__PURE__*/ jsx(SelectValue, {})
+                                            }),
+                                            /*#__PURE__*/ jsxs(SelectContent, {
+                                                children: [
+                                                    /*#__PURE__*/ jsx(SelectItem, {
+                                                        value: "AND",
+                                                        children: "Match ALL"
+                                                    }),
+                                                    /*#__PURE__*/ jsx(SelectItem, {
+                                                        value: "OR",
+                                                        children: "Match ANY"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            conditions.map((cond, index)=>/*#__PURE__*/ jsxs("div", {
+                                    className: "space-y-2",
+                                    children: [
+                                        index > 0 && /*#__PURE__*/ jsxs("div", {
+                                            className: "flex items-center gap-2 text-xs text-muted-foreground",
+                                            children: [
+                                                /*#__PURE__*/ jsx(Separator, {
+                                                    className: "flex-1"
+                                                }),
+                                                /*#__PURE__*/ jsx("span", {
+                                                    children: conditionOperator
+                                                }),
+                                                /*#__PURE__*/ jsx(Separator, {
+                                                    className: "flex-1"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "flex gap-2 items-start",
+                                            children: [
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "flex-1 space-y-2",
+                                                    children: [
+                                                        /*#__PURE__*/ jsxs(Select, {
+                                                            value: cond.field,
+                                                            onValueChange: (v)=>updateCondition(index, {
+                                                                    field: v
+                                                                }),
+                                                            children: [
+                                                                /*#__PURE__*/ jsx(SelectTrigger, {
+                                                                    className: "h-8 text-sm",
+                                                                    children: /*#__PURE__*/ jsx(SelectValue, {
+                                                                        placeholder: "Select field..."
+                                                                    })
+                                                                }),
+                                                                /*#__PURE__*/ jsx(SelectContent, {
+                                                                    children: allFields.map((field)=>/*#__PURE__*/ jsx(SelectItem, {
+                                                                            value: field.name,
+                                                                            children: field.label
+                                                                        }, field.id))
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsxs("div", {
+                                                            className: "flex gap-2",
+                                                            children: [
+                                                                /*#__PURE__*/ jsxs(Select, {
+                                                                    value: cond.operator,
+                                                                    onValueChange: (v)=>updateCondition(index, {
+                                                                            operator: v
+                                                                        }),
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsx(SelectTrigger, {
+                                                                            className: "w-32 h-8 text-sm",
+                                                                            children: /*#__PURE__*/ jsx(SelectValue, {})
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(SelectContent, {
+                                                                            children: CONDITION_OPERATORS.map((op)=>/*#__PURE__*/ jsx(SelectItem, {
+                                                                                    value: op.value,
+                                                                                    children: op.label
+                                                                                }, op.value))
+                                                                        })
+                                                                    ]
+                                                                }),
+                                                                /*#__PURE__*/ jsx("div", {
+                                                                    className: "flex-1",
+                                                                    children: cond.field && getFieldOptions(cond.field).length > 0 && ('is' === cond.operator || 'isNot' === cond.operator) ? /*#__PURE__*/ jsxs(Select, {
+                                                                        value: cond.value,
+                                                                        onValueChange: (v)=>updateCondition(index, {
+                                                                                value: v
+                                                                            }),
+                                                                        children: [
+                                                                            /*#__PURE__*/ jsx(SelectTrigger, {
+                                                                                className: "h-8 text-sm",
+                                                                                children: /*#__PURE__*/ jsx(SelectValue, {
+                                                                                    placeholder: "Select value..."
+                                                                                })
+                                                                            }),
+                                                                            /*#__PURE__*/ jsx(SelectContent, {
+                                                                                children: getFieldOptions(cond.field).map((opt)=>/*#__PURE__*/ jsx(SelectItem, {
+                                                                                        value: String(opt.value),
+                                                                                        children: opt.label
+                                                                                    }, String(opt.value)))
+                                                                            })
+                                                                        ]
+                                                                    }) : /*#__PURE__*/ jsx(Input, {
+                                                                        className: "h-8 text-sm",
+                                                                        placeholder: 'in' === cond.operator || 'notIn' === cond.operator ? 'value1, value2, ...' : 'matches' === cond.operator ? 'regex pattern' : 'value',
+                                                                        value: cond.value,
+                                                                        onChange: (e)=>updateCondition(index, {
+                                                                                value: e.target.value
+                                                                            })
+                                                                    })
+                                                                })
+                                                            ]
+                                                        })
+                                                    ]
+                                                }),
+                                                conditions.length > 1 && /*#__PURE__*/ jsx(Button, {
+                                                    variant: "ghost",
+                                                    size: "sm",
+                                                    className: "h-8 w-8 p-0 text-muted-foreground",
+                                                    onClick: ()=>removeCondition(index),
+                                                    children: /*#__PURE__*/ jsx(Trash2, {
+                                                        className: "h-3.5 w-3.5"
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }, index)),
+                            /*#__PURE__*/ jsxs(Button, {
+                                variant: "outline",
+                                size: "sm",
+                                className: "w-full",
+                                onClick: addCondition,
+                                children: [
+                                    /*#__PURE__*/ jsx(Plus, {
+                                        className: "h-3 w-3 mr-2"
+                                    }),
+                                    "Add condition"
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        className: "w-full",
+                        onClick: saveRule,
+                        disabled: !conditions.some((c)=>c.field),
+                        children: null !== editingRuleIndex ? 'Update rule' : 'Add rule'
+                    })
+                ]
+            }) : /*#__PURE__*/ jsxs(Button, {
+                variant: "outline",
+                className: "w-full",
+                onClick: ()=>setIsAddingRule(true),
+                children: [
+                    /*#__PURE__*/ jsx(Plus, {
+                        className: "h-4 w-4 mr-2"
+                    }),
+                    "Add conditional rule"
+                ]
+            })
+        ]
+    });
+}
+export { FormDesigner };