config-driven-form 1.2.0 → 1.3.1

package/dist/index.js

@@ -7,6 +7,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var react$1 = require('@tiptap/react');
 var StarterKit = require('@tiptap/starter-kit');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var uuid = require('uuid');
+var utilities = require('@dnd-kit/utilities');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -34,6 +38,14 @@ var TextField = ({ name, schema, uiSchema, isRequired }) => {
       schema.title || name,
       isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
     ] }),
+    schema.description && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cx("cdf-description", globalClasses.description, localClasses.description),
+        style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
+        children: schema.description
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdf-input-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -76,6 +88,14 @@ var PasswordField = ({
       schema.title || name,
       isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
     ] }),
+    schema.description && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cx("cdf-description", globalClasses.description, localClasses.description),
+        style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
+        children: schema.description
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-input-wrapper", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -125,6 +145,14 @@ var NumberField = ({ name, schema, uiSchema, isRequired }) => {
       schema.title || name,
       isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
     ] }),
+    schema.description && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cx("cdf-description", globalClasses.description, localClasses.description),
+        style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
+        children: schema.description
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdf-input-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -182,6 +210,14 @@ var RichTextField = ({
       schema.title || name,
       isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
     ] }),
+    schema.description && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cx("cdf-description", globalClasses.description, localClasses.description),
+        style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
+        children: schema.description
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -263,6 +299,14 @@ var SelectField = ({ name, schema, uiSchema, isRequired }) => {
       schema.title || name,
       isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
     ] }),
+    schema.description && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cx("cdf-description", globalClasses.description, localClasses.description),
+        style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
+        children: schema.description
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdf-input-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "select",
       {
@@ -318,6 +362,14 @@ var RadioField = ({ name, schema, uiSchema, isRequired }) => {
       schema.title || name,
       isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
     ] }),
+    schema.description && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cx("cdf-description", globalClasses.description, localClasses.description),
+        style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
+        children: schema.description
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("cdf-radio-group", globalClasses.radioGroup, localClasses.radioGroup), children: (_a = schema.enum) == null ? void 0 : _a.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
@@ -452,6 +504,14 @@ var CheckboxGroupField = ({
       schema.title || name,
       isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
     ] }),
+    schema.description && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cx("cdf-description", globalClasses.description, localClasses.description),
+        style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
+        children: schema.description
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -540,6 +600,14 @@ var FileField = ({ name, schema, uiSchema, isRequired }) => {
       schema.title || name,
       isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
     ] }),
+    schema.description && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cx("cdf-description", globalClasses.description, localClasses.description),
+        style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
+        children: schema.description
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -696,7 +764,1435 @@ var SchemaForm = ({
   ] }) });
 };
 
+// src/builder/types.ts
+var FIELD_TEMPLATES = {
+  text: {
+    type: "text",
+    schema: { type: "string", title: "New Text Field" }
+  },
+  number: {
+    type: "number",
+    schema: { type: "number", title: "New Number Field" }
+  },
+  email: {
+    type: "email",
+    schema: { type: "string", format: "email", title: "Email Address" }
+  },
+  password: {
+    type: "password",
+    schema: { type: "string", format: "password", title: "Password" }
+  },
+  "rich-text": {
+    type: "rich-text",
+    schema: { type: "string", format: "rich-text", title: "Rich Text" }
+  },
+  file: {
+    type: "file",
+    schema: { type: "string", format: "data-url", title: "File Upload" }
+  },
+  checkbox: {
+    type: "checkbox",
+    schema: { type: "boolean", title: "Checkbox" }
+  },
+  checkboxes: {
+    type: "checkboxes",
+    schema: {
+      type: "array",
+      title: "Multiple Checkboxes",
+      items: { type: "string", enum: ["Option 1", "Option 2"] }
+    }
+  },
+  select: {
+    type: "select",
+    schema: { type: "string", title: "Dropdown", enum: ["Option 1", "Option 2"] }
+  },
+  radio: {
+    type: "radio",
+    schema: { type: "string", title: "Radio Buttons", enum: ["Option 1", "Option 2"] },
+    uiSchema: { "ui:widget": "radio" }
+  }
+};
+
+// src/builder/useFormBuilder.ts
+var useFormBuilder = (initialSchema, initialUiSchema, initialColumns, initialTheme) => {
+  const [fields, setFields] = react.useState(() => {
+    if (!initialSchema || !initialSchema.properties) return [];
+    return Object.entries(initialSchema.properties).map(([key, propSchema]) => {
+      var _a;
+      let type = "text";
+      if (propSchema.type === "string") {
+        if (propSchema.format === "email") type = "email";
+        else if (propSchema.format === "password") type = "password";
+        else if (propSchema.format === "data-url") type = "file";
+        else if (propSchema.format === "rich-text") type = "rich-text";
+        else if (propSchema.enum) type = "select";
+      } else if (propSchema.type === "number" || propSchema.type === "integer") {
+        type = "number";
+      } else if (propSchema.type === "boolean") {
+        type = "checkbox";
+      } else if (propSchema.type === "array") {
+        type = "checkboxes";
+      }
+      const uiSchema = initialUiSchema == null ? void 0 : initialUiSchema[key];
+      if (propSchema.enum && (uiSchema == null ? void 0 : uiSchema["ui:widget"]) === "radio") {
+        type = "radio";
+      }
+      return {
+        id: uuid.v4(),
+        key,
+        type,
+        schema: propSchema,
+        uiSchema,
+        isRequired: (_a = initialSchema.required) == null ? void 0 : _a.includes(key)
+      };
+    });
+  });
+  const [selectedFieldId, setSelectedFieldId] = react.useState(null);
+  const addField = react.useCallback((type, index) => {
+    const template = FIELD_TEMPLATES[type];
+    const newField = {
+      id: uuid.v4(),
+      key: `field_${Date.now()}`,
+      type,
+      // Deep clone template schemas
+      schema: JSON.parse(JSON.stringify(template.schema)),
+      uiSchema: template.uiSchema ? JSON.parse(JSON.stringify(template.uiSchema)) : void 0
+    };
+    setFields((prev) => {
+      if (typeof index === "number") {
+        const newFields = [...prev];
+        newFields.splice(index, 0, newField);
+        return newFields;
+      }
+      return [...prev, newField];
+    });
+    setSelectedFieldId(newField.id);
+  }, []);
+  const removeField = react.useCallback(
+    (id) => {
+      setFields((prev) => prev.filter((f) => f.id !== id));
+      if (selectedFieldId === id) setSelectedFieldId(null);
+    },
+    [selectedFieldId]
+  );
+  const updateField = react.useCallback((id, updates) => {
+    setFields((prev) => prev.map((f) => f.id === id ? { ...f, ...updates } : f));
+  }, []);
+  const reorderFields = react.useCallback((activeId, overId) => {
+    setFields((prev) => {
+      const oldIndex = prev.findIndex((f) => f.id === activeId);
+      const newIndex = prev.findIndex((f) => f.id === overId);
+      return sortable.arrayMove(prev, oldIndex, newIndex);
+    });
+  }, []);
+  const selectedField = react.useMemo(
+    () => fields.find((f) => f.id === selectedFieldId),
+    [fields, selectedFieldId]
+  );
+  const compileSchemas = react.useCallback(() => {
+    var _a;
+    const finalSchema = {
+      type: "object",
+      title: (initialSchema == null ? void 0 : initialSchema.title) || "Generated Form",
+      description: (initialSchema == null ? void 0 : initialSchema.description) || "",
+      properties: {},
+      required: []
+    };
+    const finalUiSchema = {};
+    fields.forEach((field) => {
+      if (finalSchema.properties) {
+        finalSchema.properties[field.key] = field.schema;
+      }
+      if (field.isRequired && finalSchema.required) {
+        finalSchema.required.push(field.key);
+      }
+      if (field.uiSchema) {
+        finalUiSchema[field.key] = field.uiSchema;
+      }
+    });
+    if (((_a = finalSchema.required) == null ? void 0 : _a.length) === 0) {
+      delete finalSchema.required;
+    }
+    return { schema: finalSchema, uiSchema: finalUiSchema };
+  }, [fields, initialSchema]);
+  const [formSettings, setFormSettings] = react.useState({
+    columns: initialColumns || 1,
+    theme: initialTheme || {}
+  });
+  const updateFormSettings = react.useCallback((updates) => {
+    setFormSettings((prev) => ({
+      ...prev,
+      ...updates,
+      theme: { ...prev.theme, ...updates.theme || {} }
+    }));
+  }, []);
+  return {
+    fields,
+    selectedFieldId,
+    setSelectedFieldId,
+    selectedField,
+    addField,
+    removeField,
+    updateField,
+    reorderFields,
+    compileSchemas,
+    formSettings,
+    updateFormSettings
+  };
+};
+var TOOLS = [
+  { type: "text", label: "Text Field", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { size: 18 }) },
+  { type: "number", label: "Number", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Hash, { size: 18 }) },
+  { type: "email", label: "Email", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mail, { size: 18 }) },
+  { type: "password", label: "Password", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Key, { size: 18 }) },
+  { type: "rich-text", label: "Rich Text", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeft, { size: 18 }) },
+  { type: "select", label: "Dropdown", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 18 }) },
+  { type: "radio", label: "Radio Group", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { size: 18 }) },
+  { type: "checkbox", label: "Checkbox", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckSquare, { size: 18 }) },
+  { type: "checkboxes", label: "Checkbox Group", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { size: 18 }) },
+  { type: "file", label: "File Upload", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileUp, { size: 18 }) }
+];
+var DraggableTool = ({
+  type,
+  label,
+  icon
+}) => {
+  const { attributes, listeners, setNodeRef, isDragging } = core.useDraggable({
+    id: `toolbox-${type}`,
+    data: {
+      type: "ToolboxItem",
+      fieldType: type
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      ...listeners,
+      ...attributes,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "0.75rem",
+        padding: "0.75rem",
+        backgroundColor: "white",
+        border: "1px solid #e5e7eb",
+        borderRadius: "0.5rem",
+        cursor: isDragging ? "grabbing" : "grab",
+        opacity: isDragging ? 0.5 : 1,
+        marginBottom: "0.5rem",
+        boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
+        transition: "all 0.2s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.borderColor = "#6366f1";
+        e.currentTarget.style.boxShadow = "0 4px 6px rgba(99, 102, 241, 0.1)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.borderColor = "#e5e7eb";
+        e.currentTarget.style.boxShadow = "0 1px 2px rgba(0,0,0,0.05)";
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#6b7280" }, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: label })
+      ]
+    }
+  );
+};
+var Toolbox = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        padding: "1.5rem",
+        width: "280px",
+        borderRight: "1px solid #e5e7eb",
+        backgroundColor: "#f9fafb",
+        height: "100%",
+        overflowY: "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "1rem", fontWeight: 600, color: "#111827", marginBottom: "1rem" }, children: "Form Elements" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem", color: "#6b7280", marginBottom: "1.5rem" }, children: "Drag and drop fields onto the canvas to build your form." }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: TOOLS.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(DraggableTool, { ...tool }, tool.type)) })
+      ]
+    }
+  );
+};
+var SortableField = ({
+  field,
+  isSelected,
+  onClick,
+  onRemove,
+  onDuplicate
+}) => {
+  var _a, _b;
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable.useSortable({
+    id: field.id,
+    data: {
+      type: "SortableField",
+      field
+    }
+  });
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.6 : 1,
+    position: "relative",
+    zIndex: isDragging ? 10 : 1,
+    padding: "2rem 1.5rem 1.5rem",
+    // Extra top padding for drag handle
+    backgroundColor: "white",
+    borderRadius: "0.75rem",
+    border: `2px solid ${isSelected ? "#6366f1" : "#e5e7eb"}`,
+    boxShadow: isSelected ? "0 4px 12px rgba(99, 102, 241, 0.15)" : "0 1px 3px rgba(0,0,0,0.05)",
+    marginBottom: "1rem",
+    cursor: "pointer",
+    gridColumn: `span ${((_a = field.uiSchema) == null ? void 0 : _a["ui:columnSpan"]) || 1} / span ${((_b = field.uiSchema) == null ? void 0 : _b["ui:columnSpan"]) || 1}`
+  };
+  const methods = reactHookForm.useForm();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ...attributes,
+            ...listeners,
+            style: {
+              position: "absolute",
+              top: "0",
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: "40px",
+              height: "24px",
+              backgroundColor: isSelected ? "#eef2ff" : "#f3f4f6",
+              borderBottomLeftRadius: "8px",
+              borderBottomRightRadius: "8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: isDragging ? "grabbing" : "grab",
+              color: isSelected ? "#6366f1" : "#9ca3af",
+              zIndex: 2
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, zIndex: 1, cursor: "pointer" } }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: /* @__PURE__ */ jsxRuntime.jsx("form", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            FieldRenderer,
+            {
+              name: field.key,
+              schema: field.schema,
+              uiSchema: field.uiSchema,
+              isRequired: field.isRequired
+            }
+          ) }) }) })
+        ] }),
+        isSelected && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "-12px",
+              right: "1rem",
+              display: "flex",
+              gap: "0.25rem",
+              backgroundColor: "#ffffff",
+              border: "1px solid #e5e7eb",
+              padding: "0.25rem",
+              borderRadius: "0.5rem",
+              boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+              zIndex: 10
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onDuplicate();
+                  },
+                  style: {
+                    color: "#4f46e5",
+                    backgroundColor: "#eef2ff",
+                    border: "none",
+                    cursor: "pointer",
+                    padding: "0.375rem",
+                    borderRadius: "0.375rem",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  title: "Duplicate Field",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { size: 14 })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onRemove();
+                  },
+                  style: {
+                    color: "#ef4444",
+                    backgroundColor: "#fef2f2",
+                    border: "none",
+                    cursor: "pointer",
+                    padding: "0.375rem",
+                    borderRadius: "0.375rem",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  title: "Remove Field",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 14 })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var Canvas = ({
+  fields,
+  selectedFieldId,
+  onSelectField,
+  onRemoveField,
+  onDuplicateField
+}) => {
+  const { setNodeRef, isOver } = core.useDroppable({
+    id: "canvas-droppable",
+    data: {
+      type: "Canvas"
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        flex: 1,
+        padding: "2rem",
+        backgroundColor: "#f3f4f6",
+        overflowY: "auto"
+      },
+      onClick: () => onSelectField(""),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: setNodeRef,
+          style: {
+            margin: "0 auto",
+            height: "fit-content",
+            width: "100%",
+            maxWidth: "800px",
+            minHeight: "400px",
+            backgroundColor: fields.length === 0 ? "transparent" : "white",
+            border: fields.length === 0 ? "2px dashed #d1d5db" : "1px solid #e5e7eb",
+            borderRadius: "0.75rem",
+            padding: fields.length === 0 ? "0" : "2rem",
+            display: "flex",
+            flexDirection: "column",
+            boxShadow: fields.length === 0 ? "none" : "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+            transition: "all 0.2s ease",
+            ...isOver && fields.length === 0 ? { backgroundColor: "#eef2ff", borderColor: "#6366f1" } : {}
+          },
+          children: fields.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { margin: "auto", textAlign: "center", color: "#6b7280" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "1.125rem", fontWeight: 500, marginBottom: "0.5rem" }, children: "Your form is empty" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem" }, children: "Drag and drop a field from the left panel to get started." })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: fields.map((f) => f.id), strategy: sortable.verticalListSortingStrategy, children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+            SortableField,
+            {
+              field,
+              isSelected: selectedFieldId === field.id,
+              onClick: () => onSelectField(field.id),
+              onRemove: () => onRemoveField(field.id),
+              onDuplicate: () => onDuplicateField(field)
+            },
+            field.id
+          )) }) })
+        }
+      )
+    }
+  );
+};
+var PropertiesPanel = ({
+  field,
+  formSettings,
+  onUpdate,
+  onUpdateSettings
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const [activeTab, setActiveTab] = react.useState("general");
+  if (!field) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          width: "320px",
+          borderLeft: "1px solid #e5e7eb",
+          backgroundColor: "white",
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          overflowY: "auto"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                padding: "1.5rem",
+                borderBottom: "1px solid #e5e7eb",
+                backgroundColor: "#f9fafb"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "1.125rem", fontWeight: 600, color: "#111827", margin: 0 }, children: "Global Form Settings" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem", color: "#6b7280", margin: "0.25rem 0 0" }, children: "Click a field to edit its properties, or configure global form settings here." })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1.5rem" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "h4",
+                {
+                  style: {
+                    fontSize: "0.875rem",
+                    fontWeight: 600,
+                    color: "#374151",
+                    marginBottom: "0.75rem",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.375rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutTemplate, { size: 16 }),
+                    " Layout Options"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.75rem", fontWeight: 500, color: "#6b7280" }, children: "Global Columns" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "select",
+                  {
+                    value: formSettings.columns,
+                    onChange: (e) => onUpdateSettings({ columns: Number(e.target.value) }),
+                    style: {
+                      width: "100%",
+                      padding: "0.5rem",
+                      border: "1px solid #d1d5db",
+                      borderRadius: "0.375rem",
+                      fontSize: "0.875rem"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: 1, children: "1 Column" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: 2, children: "2 Columns" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: 3, children: "3 Columns" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: 4, children: "4 Columns" })
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "h4",
+                {
+                  style: {
+                    fontSize: "0.875rem",
+                    fontWeight: 600,
+                    color: "#374151",
+                    marginBottom: "0.75rem",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.375rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { size: 16 }),
+                    " Theme Colors"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      gap: "0.5rem"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#4b5563" }, children: "Primary Color" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            type: "color",
+                            value: formSettings.theme.primary || "#6366f1",
+                            onChange: (e) => onUpdateSettings({
+                              theme: { ...formSettings.theme, primary: e.target.value }
+                            }),
+                            style: {
+                              width: "28px",
+                              height: "28px",
+                              padding: "0",
+                              border: "none",
+                              borderRadius: "4px",
+                              cursor: "pointer"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            type: "text",
+                            value: formSettings.theme.primary || "",
+                            placeholder: "#6366f1",
+                            onChange: (e) => onUpdateSettings({
+                              theme: { ...formSettings.theme, primary: e.target.value }
+                            }),
+                            style: {
+                              width: "80px",
+                              padding: "0.25rem 0.5rem",
+                              border: "1px solid #d1d5db",
+                              borderRadius: "0.25rem",
+                              fontSize: "0.75rem",
+                              fontFamily: "monospace"
+                            }
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      gap: "0.5rem"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#4b5563" }, children: "Background Color" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            type: "color",
+                            value: formSettings.theme.background || "#ffffff",
+                            onChange: (e) => onUpdateSettings({
+                              theme: { ...formSettings.theme, background: e.target.value }
+                            }),
+                            style: {
+                              width: "28px",
+                              height: "28px",
+                              padding: "0",
+                              border: "none",
+                              borderRadius: "4px",
+                              cursor: "pointer"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            type: "text",
+                            value: formSettings.theme.background || "",
+                            placeholder: "#ffffff",
+                            onChange: (e) => onUpdateSettings({
+                              theme: { ...formSettings.theme, background: e.target.value }
+                            }),
+                            style: {
+                              width: "80px",
+                              padding: "0.25rem 0.5rem",
+                              border: "1px solid #d1d5db",
+                              borderRadius: "0.25rem",
+                              fontSize: "0.75rem",
+                              fontFamily: "monospace"
+                            }
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  const handleSchemaChange = (key, value) => {
+    onUpdate(field.id, {
+      schema: { ...field.schema, [key]: value }
+    });
+  };
+  const handleUiSchemaChange = (key, value) => {
+    onUpdate(field.id, {
+      uiSchema: { ...field.uiSchema || {}, [key]: value }
+    });
+  };
+  const handleClassNamesChange = (element, value) => {
+    var _a2;
+    const existingUiClassNames = ((_a2 = field.uiSchema) == null ? void 0 : _a2["ui:classNames"]) || {};
+    handleUiSchemaChange("ui:classNames", {
+      ...existingUiClassNames,
+      [element]: value
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width: "320px",
+        borderLeft: "1px solid #e5e7eb",
+        backgroundColor: "white",
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        overflowY: "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "1.5rem 1.5rem 0", borderBottom: "1px solid #e5e7eb" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              style: { fontSize: "1.125rem", fontWeight: 600, color: "#111827", marginBottom: "1rem" },
+              children: "Field Settings"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", borderBottom: "1px solid #e5e7eb" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => setActiveTab("general"),
+                style: {
+                  flex: 1,
+                  padding: "0.75rem 0",
+                  fontSize: "0.875rem",
+                  fontWeight: 500,
+                  backgroundColor: "transparent",
+                  border: "none",
+                  borderBottom: `2px solid ${activeTab === "general" ? "#6366f1" : "transparent"}`,
+                  color: activeTab === "general" ? "#6366f1" : "#6b7280",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "0.25rem"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { size: 14 }),
+                  " General"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => setActiveTab("validation"),
+                style: {
+                  flex: 1,
+                  padding: "0.75rem 0",
+                  fontSize: "0.875rem",
+                  fontWeight: 500,
+                  backgroundColor: "transparent",
+                  border: "none",
+                  borderBottom: `2px solid ${activeTab === "validation" ? "#6366f1" : "transparent"}`,
+                  color: activeTab === "validation" ? "#6366f1" : "#6b7280",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "0.25rem"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { size: 14 }),
+                  " Validation"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => setActiveTab("design"),
+                style: {
+                  flex: 1,
+                  padding: "0.75rem 0",
+                  fontSize: "0.875rem",
+                  fontWeight: 500,
+                  backgroundColor: "transparent",
+                  border: "none",
+                  borderBottom: `2px solid ${activeTab === "design" ? "#6366f1" : "transparent"}`,
+                  color: activeTab === "design" ? "#6366f1" : "#6b7280",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "0.25rem"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Paintbrush, { size: 14 }),
+                  " Design"
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1.25rem" }, children: [
+          activeTab === "general" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Property Key" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  value: field.key,
+                  onChange: (e) => onUpdate(field.id, { key: e.target.value.replace(/[^a-zA-Z0-9_]/g, "") }),
+                  style: {
+                    width: "100%",
+                    padding: "0.5rem",
+                    border: "1px solid #d1d5db",
+                    borderRadius: "0.375rem",
+                    fontSize: "0.875rem"
+                  },
+                  placeholder: "e.g. firstName"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.75rem", color: "#9ca3af" }, children: "The key used in the final JSON output." })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Label / Title" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  value: field.schema.title || "",
+                  onChange: (e) => handleSchemaChange("title", e.target.value),
+                  style: {
+                    width: "100%",
+                    padding: "0.5rem",
+                    border: "1px solid #d1d5db",
+                    borderRadius: "0.375rem",
+                    fontSize: "0.875rem"
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Description" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "textarea",
+                {
+                  value: field.schema.description || "",
+                  onChange: (e) => handleSchemaChange("description", e.target.value),
+                  style: {
+                    width: "100%",
+                    padding: "0.5rem",
+                    border: "1px solid #d1d5db",
+                    borderRadius: "0.375rem",
+                    fontSize: "0.875rem",
+                    minHeight: "80px"
+                  }
+                }
+              )
+            ] }),
+            (field.type === "select" || field.type === "radio" || field.type === "checkboxes") && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Options (Comma separated)" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  value: field.type === "checkboxes" ? field.schema.items && !Array.isArray(field.schema.items) ? (_a = field.schema.items.enum) == null ? void 0 : _a.join(", ") : "" : ((_b = field.schema.enum) == null ? void 0 : _b.join(", ")) || "",
+                  onChange: (e) => {
+                    const valArray = e.target.value.split(",").map((s) => s.trim()).filter(Boolean);
+                    if (field.type === "checkboxes") {
+                      handleSchemaChange("items", {
+                        ...field.schema.items || {},
+                        enum: valArray
+                      });
+                    } else {
+                      handleSchemaChange("enum", valArray);
+                    }
+                  },
+                  style: {
+                    width: "100%",
+                    padding: "0.5rem",
+                    border: "1px solid #d1d5db",
+                    borderRadius: "0.375rem",
+                    fontSize: "0.875rem"
+                  }
+                }
+              )
+            ] })
+          ] }),
+          activeTab === "validation" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.5rem",
+                  fontSize: "0.875rem",
+                  fontWeight: 500,
+                  color: "#374151",
+                  cursor: "pointer"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: field.isRequired || false,
+                      onChange: (e) => onUpdate(field.id, { isRequired: e.target.checked })
+                    }
+                  ),
+                  "Required Field"
+                ]
+              }
+            ),
+            (field.type === "text" || field.type === "email" || field.type === "password") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Min Length" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "number",
+                    value: field.schema.minLength || "",
+                    onChange: (e) => handleSchemaChange(
+                      "minLength",
+                      e.target.value ? Number(e.target.value) : void 0
+                    ),
+                    style: {
+                      width: "100%",
+                      padding: "0.5rem",
+                      border: "1px solid #d1d5db",
+                      borderRadius: "0.375rem",
+                      fontSize: "0.875rem"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Max Length" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "number",
+                    value: field.schema.maxLength || "",
+                    onChange: (e) => handleSchemaChange(
+                      "maxLength",
+                      e.target.value ? Number(e.target.value) : void 0
+                    ),
+                    style: {
+                      width: "100%",
+                      padding: "0.5rem",
+                      border: "1px solid #d1d5db",
+                      borderRadius: "0.375rem",
+                      fontSize: "0.875rem"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Regex Pattern" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: field.schema.pattern || "",
+                    onChange: (e) => handleSchemaChange("pattern", e.target.value || void 0),
+                    style: {
+                      width: "100%",
+                      padding: "0.5rem",
+                      border: "1px solid #d1d5db",
+                      borderRadius: "0.375rem",
+                      fontSize: "0.875rem"
+                    }
+                  }
+                )
+              ] })
+            ] }),
+            field.type === "number" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Minimum Value" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "number",
+                    value: field.schema.minimum || "",
+                    onChange: (e) => handleSchemaChange(
+                      "minimum",
+                      e.target.value ? Number(e.target.value) : void 0
+                    ),
+                    style: {
+                      width: "100%",
+                      padding: "0.5rem",
+                      border: "1px solid #d1d5db",
+                      borderRadius: "0.375rem",
+                      fontSize: "0.875rem"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Maximum Value" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "number",
+                    value: field.schema.maximum || "",
+                    onChange: (e) => handleSchemaChange(
+                      "maximum",
+                      e.target.value ? Number(e.target.value) : void 0
+                    ),
+                    style: {
+                      width: "100%",
+                      padding: "0.5rem",
+                      border: "1px solid #d1d5db",
+                      borderRadius: "0.375rem",
+                      fontSize: "0.875rem"
+                    }
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          activeTab === "design" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Column Span" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "select",
+                {
+                  value: ((_c = field.uiSchema) == null ? void 0 : _c["ui:columnSpan"]) || 1,
+                  onChange: (e) => handleUiSchemaChange("ui:columnSpan", Number(e.target.value)),
+                  style: {
+                    width: "100%",
+                    padding: "0.5rem",
+                    border: "1px solid #d1d5db",
+                    borderRadius: "0.375rem",
+                    fontSize: "0.875rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: 1, children: "1 Column" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: 2, children: "2 Columns" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: 3, children: "3 Columns" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: 4, children: "4 Columns" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "1rem", borderTop: "1px solid #e5e7eb", paddingTop: "1rem" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h4",
+                {
+                  style: {
+                    fontSize: "0.875rem",
+                    fontWeight: 600,
+                    color: "#111827",
+                    marginBottom: "0.5rem"
+                  },
+                  children: "Tailwind Classes (ui:classNames)"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.75rem", color: "#6b7280" }, children: "Input" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: ((_e = (_d = field.uiSchema) == null ? void 0 : _d["ui:classNames"]) == null ? void 0 : _e.input) || "",
+                      onChange: (e) => handleClassNamesChange("input", e.target.value),
+                      style: {
+                        width: "100%",
+                        padding: "0.4rem",
+                        border: "1px solid #d1d5db",
+                        borderRadius: "0.25rem",
+                        fontSize: "0.75rem",
+                        fontFamily: "monospace"
+                      },
+                      placeholder: "e.g. bg-gray-50 border-blue-500"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.75rem", color: "#6b7280" }, children: "Label" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: ((_g = (_f = field.uiSchema) == null ? void 0 : _f["ui:classNames"]) == null ? void 0 : _g.label) || "",
+                      onChange: (e) => handleClassNamesChange("label", e.target.value),
+                      style: {
+                        width: "100%",
+                        padding: "0.4rem",
+                        border: "1px solid #d1d5db",
+                        borderRadius: "0.25rem",
+                        fontSize: "0.75rem",
+                        fontFamily: "monospace"
+                      },
+                      placeholder: "e.g. text-blue-600 font-bold"
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var FormBuilder = ({
+  initialSchema,
+  initialUiSchema,
+  initialColumns,
+  initialTheme,
+  onSave
+}) => {
+  const {
+    fields,
+    selectedFieldId,
+    setSelectedFieldId,
+    selectedField,
+    addField,
+    removeField,
+    updateField,
+    reorderFields,
+    compileSchemas,
+    formSettings,
+    updateFormSettings
+  } = useFormBuilder(initialSchema, initialUiSchema, initialColumns, initialTheme);
+  const [activeDragType, setActiveDragType] = react.useState(null);
+  const [isPreviewMode, setIsPreviewMode] = react.useState(false);
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor),
+    core.useSensor(core.KeyboardSensor, {
+      coordinateGetter: sortable.sortableKeyboardCoordinates
+    })
+  );
+  const handleDragStart = (event) => {
+    var _a;
+    const { active } = event;
+    if (((_a = active.data.current) == null ? void 0 : _a.type) === "ToolboxItem") {
+      setActiveDragType(active.data.current.fieldType);
+    }
+  };
+  const handleDragEnd = (event) => {
+    var _a, _b;
+    const { active, over } = event;
+    setActiveDragType(null);
+    if (!over) return;
+    if (((_a = active.data.current) == null ? void 0 : _a.type) === "ToolboxItem") {
+      if (over.id === "canvas-droppable" || fields.find((f) => f.id === over.id)) {
+        const overIndex = fields.findIndex((f) => f.id === over.id);
+        addField(
+          active.data.current.fieldType,
+          overIndex >= 0 ? overIndex : void 0
+        );
+      }
+      return;
+    }
+    if (((_b = active.data.current) == null ? void 0 : _b.type) === "SortableField" && active.id !== over.id) {
+      reorderFields(active.id, over.id);
+    }
+  };
+  const handleSave = () => {
+    if (onSave) {
+      const { schema, uiSchema } = compileSchemas();
+      onSave(schema, uiSchema, formSettings);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100vh",
+        width: "100vw",
+        fontFamily: "system-ui, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              height: "60px",
+              borderBottom: "1px solid #e5e7eb",
+              backgroundColor: "white",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "0 1.5rem",
+              zIndex: 20
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      width: "32px",
+                      height: "32px",
+                      backgroundColor: "#6366f1",
+                      borderRadius: "0.5rem",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: "white"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { size: 20 })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: "1.25rem", fontWeight: 700, color: "#111827", margin: 0 }, children: "Visual Form Builder" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    backgroundColor: "#f3f4f6",
+                    padding: "0.25rem",
+                    borderRadius: "0.5rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        onClick: () => setIsPreviewMode(false),
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "0.375rem",
+                          padding: "0.375rem 0.75rem",
+                          fontSize: "0.875rem",
+                          fontWeight: 500,
+                          border: "none",
+                          borderRadius: "0.375rem",
+                          cursor: "pointer",
+                          transition: "all 0.2s",
+                          backgroundColor: !isPreviewMode ? "white" : "transparent",
+                          color: !isPreviewMode ? "#111827" : "#6b7280",
+                          boxShadow: !isPreviewMode ? "0 1px 3px rgba(0,0,0,0.1)" : "none"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutTemplate, { size: 16 }),
+                          " Builder"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        onClick: () => setIsPreviewMode(true),
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "0.375rem",
+                          padding: "0.375rem 0.75rem",
+                          fontSize: "0.875rem",
+                          fontWeight: 500,
+                          border: "none",
+                          borderRadius: "0.375rem",
+                          cursor: "pointer",
+                          transition: "all 0.2s",
+                          backgroundColor: isPreviewMode ? "white" : "transparent",
+                          color: isPreviewMode ? "#111827" : "#6b7280",
+                          boxShadow: isPreviewMode ? "0 1px 3px rgba(0,0,0,0.1)" : "none"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 16 }),
+                          " Preview"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: handleSave,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                    backgroundColor: "#6366f1",
+                    color: "white",
+                    border: "none",
+                    padding: "0.5rem 1rem",
+                    borderRadius: "0.375rem",
+                    fontWeight: 600,
+                    cursor: "pointer",
+                    transition: "background-color 0.2s"
+                  },
+                  onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "#4f46e5",
+                  onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "#6366f1",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { size: 16 }),
+                    " Save Form"
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flex: 1,
+              overflow: "hidden",
+              backgroundColor: "#f3f4f6",
+              minHeight: 0
+            },
+            children: isPreviewMode ? /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  flex: 1,
+                  padding: "3rem",
+                  overflowY: "auto"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      margin: "0 auto",
+                      height: "fit-content",
+                      width: "100%",
+                      maxWidth: "800px",
+                      backgroundColor: "white",
+                      padding: "2rem",
+                      borderRadius: "1rem",
+                      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: {
+                            marginBottom: "2rem",
+                            paddingBottom: "1rem",
+                            borderBottom: "1px solid #e5e7eb",
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center"
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "0.875rem",
+                                fontWeight: 600,
+                                color: "#6366f1",
+                                textTransform: "uppercase",
+                                letterSpacing: "0.05em"
+                              },
+                              children: "Live Preview"
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        SchemaForm,
+                        {
+                          schema: compileSchemas().schema,
+                          uiSchema: compileSchemas().uiSchema,
+                          columns: formSettings.columns,
+                          theme: formSettings.theme,
+                          onSubmit: (data) => alert("Preview Form Submitted!\n\n" + JSON.stringify(data, null, 2))
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(
+              core.DndContext,
+              {
+                sensors,
+                collisionDetection: core.closestCenter,
+                onDragStart: handleDragStart,
+                onDragEnd: handleDragEnd,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Toolbox, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Canvas,
+                    {
+                      fields,
+                      selectedFieldId,
+                      onSelectField: setSelectedFieldId,
+                      onRemoveField: removeField,
+                      onDuplicateField: (f) => {
+                        const idx = fields.findIndex((field) => field.id === f.id);
+                        addField(f.type, idx + 1);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    PropertiesPanel,
+                    {
+                      field: selectedField || null,
+                      formSettings,
+                      onUpdate: updateField,
+                      onUpdateSettings: updateFormSettings
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { children: activeDragType ? /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      style: {
+                        padding: "0.75rem",
+                        backgroundColor: "#6366f1",
+                        color: "white",
+                        borderRadius: "0.5rem",
+                        opacity: 0.8,
+                        fontWeight: 500
+                      },
+                      children: [
+                        "Dropping ",
+                        activeDragType,
+                        "..."
+                      ]
+                    }
+                  ) : null })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
 exports.FieldRenderer = FieldRenderer;
+exports.FormBuilder = FormBuilder;
 exports.SchemaForm = SchemaForm;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map