form-builder-pro 1.0.3 → 1.0.5

package/dist/index.js

@@ -4112,17 +4112,17 @@ var FIELD_TYPES = [
   { type: "file", label: "File Upload", icon: "Upload" }
 ];
 var DEFAULT_FIELD_CONFIG = {
-  text: { label: "Text Input", placeholder: "Enter text...", width: "100%" },
-  textarea: { label: "Text Area", placeholder: "Enter description...", width: "100%" },
-  number: { label: "Number", placeholder: "0", width: "50%" },
-  email: { label: "Email", placeholder: "example@email.com", width: "100%", validation: [{ type: "email", message: "Invalid email" }] },
-  phone: { label: "Phone", placeholder: "+1 234 567 8900", width: "100%" },
-  date: { label: "Date", width: "50%" },
-  select: { label: "Dropdown", options: [{ label: "Option 1", value: "opt1" }, { label: "Option 2", value: "opt2" }], width: "100%" },
-  checkbox: { label: "Checkbox", width: "100%" },
-  radio: { label: "Radio Group", options: [{ label: "Option 1", value: "opt1" }, { label: "Option 2", value: "opt2" }], width: "100%" },
-  toggle: { label: "Toggle", width: "50%" },
-  file: { label: "File Upload", width: "100%" }
+  text: { label: "Text Input", placeholder: "Enter text...", width: "100%", enabled: true, visible: true },
+  textarea: { label: "Text Area", placeholder: "Enter description...", width: "100%", enabled: true, visible: true },
+  number: { label: "Number", placeholder: "0", width: "50%", enabled: true, visible: true },
+  email: { label: "Email", placeholder: "example@email.com", width: "100%", validation: [{ type: "email", message: "Invalid email" }], enabled: true, visible: true },
+  phone: { label: "Phone", placeholder: "+1 234 567 8900", width: "100%", enabled: true, visible: true },
+  date: { label: "Date", width: "50%", enabled: true, visible: true },
+  select: { label: "Dropdown", options: [{ label: "Option 1", value: "opt1" }, { label: "Option 2", value: "opt2" }], width: "100%", enabled: true, visible: true },
+  checkbox: { label: "Checkbox", width: "100%", enabled: true, visible: true },
+  radio: { label: "Radio Group", options: [{ label: "Option 1", value: "opt1" }, { label: "Option 2", value: "opt2" }], width: "100%", enabled: true, visible: true },
+  toggle: { label: "Toggle", width: "50%", enabled: true, visible: true },
+  file: { label: "File Upload", width: "100%", enabled: true, visible: true }
 };
 
 // src/utils/clone.ts
@@ -4157,13 +4157,7 @@ var INITIAL_SCHEMA = {
   id: "form_1",
   title: "My New Form",
   formName: "myNewForm",
-  sections: [
-    {
-      id: generateId(),
-      title: "Section 1",
-      fields: []
-    }
-  ]
+  sections: []
 };
 var formStore = createStore((set, get) => ({
   schema: INITIAL_SCHEMA,
@@ -4173,11 +4167,89 @@ var formStore = createStore((set, get) => ({
   isPreviewMode: false,
   existingForms: [],
   templates: [],
-  setSchema: (schema) => set({ schema }),
+  masterTypes: [],
+  setSchema: (schema) => {
+    const convertIndexesToOptions = (indexes) => {
+      if (!indexes || !Array.isArray(indexes) || indexes.length === 0) {
+        return [];
+      }
+      return indexes.map((item, index2) => {
+        if (typeof item === "string") {
+          return { label: item, value: item };
+        }
+        if (typeof item === "object" && item !== null) {
+          const label = item.label || item.name || item.displayName || item.text || `Option ${index2 + 1}`;
+          const value = item.value || item.id || item.name || String(index2);
+          return { label, value };
+        }
+        return { label: String(item), value: String(item) };
+      });
+    };
+    const state = get();
+    if (state.masterTypes && state.masterTypes.length > 0 && schema.sections) {
+      const updatedSections = schema.sections.map((section) => ({
+        ...section,
+        fields: section.fields.map((field) => {
+          if (field.type === "select" && field.groupName && (!field.options || field.options.length === 0)) {
+            const masterType = state.masterTypes.find(
+              (mt) => mt.active === true && (mt.id === field.groupName?.id || mt.name === field.groupName?.name)
+            );
+            if (masterType && masterType.indexes && masterType.indexes.length > 0) {
+              const options = convertIndexesToOptions(masterType.indexes);
+              return { ...field, options };
+            }
+          }
+          return field;
+        })
+      }));
+      set({ schema: { ...schema, sections: updatedSections } });
+    } else {
+      set({ schema });
+    }
+  },
   togglePreview: () => set((state) => ({ isPreviewMode: !state.isPreviewMode })),
   // New Actions
   setExistingForms: (forms) => set({ existingForms: forms }),
   setTemplates: (templates) => set({ templates }),
+  setMasterTypes: (masterTypes) => {
+    set({ masterTypes });
+    const state = get();
+    if (state.schema && state.schema.sections) {
+      const updatedSections = state.schema.sections.map((section) => ({
+        ...section,
+        fields: section.fields.map((field) => {
+          if (field.type === "select" && field.groupName && (!field.options || field.options.length === 0)) {
+            const masterType = masterTypes.find(
+              (mt) => mt.active === true && (mt.id === field.groupName?.id || mt.name === field.groupName?.name)
+            );
+            if (masterType && masterType.indexes && masterType.indexes.length > 0) {
+              const options = masterType.indexes.map((item, index2) => {
+                if (typeof item === "string") {
+                  return { label: item, value: item };
+                }
+                if (typeof item === "object" && item !== null) {
+                  const label = item.label || item.name || item.displayName || item.text || `Option ${index2 + 1}`;
+                  const value = item.value || item.id || item.name || String(index2);
+                  return { label, value };
+                }
+                return { label: String(item), value: String(item) };
+              });
+              return { ...field, options };
+            }
+          }
+          return field;
+        })
+      }));
+      const hasChanges = updatedSections.some(
+        (section, idx) => section.fields.some(
+          (field, fieldIdx) => field !== state.schema.sections[idx]?.fields[fieldIdx]
+        )
+      );
+      if (hasChanges) {
+        set({ schema: { ...state.schema, sections: updatedSections } });
+      }
+    }
+  },
   loadForm: (formId) => {
     const { existingForms, history, historyIndex } = get();
     const found = existingForms.find((f) => f.id === formId);
@@ -4272,20 +4344,39 @@ var formStore = createStore((set, get) => ({
       type,
       ...DEFAULT_FIELD_CONFIG[type]
     };
+    let newSections = [...schema.sections];
+    if (newSections.length === 0 || sectionId === null) {
+      const defaultSection = {
+        id: generateId(),
+        title: "Default Section",
+        fields: [],
+        columns: 1
+      };
+      newSections.push(defaultSection);
+      sectionId = defaultSection.id;
+    }
+    const sectionIndex = newSections.findIndex((s) => s.id === sectionId);
+    if (sectionIndex !== -1) {
+      const section = newSections[sectionIndex];
+      const newFields = [...section.fields];
+      if (typeof index2 === "number") {
+        newFields.splice(index2, 0, newField);
+      } else {
+        newFields.push(newField);
+      }
+      newSections[sectionIndex] = { ...section, fields: newFields };
+    } else {
+      const defaultSection = {
+        id: generateId(),
+        title: "Default Section",
+        fields: [newField],
+        columns: 1
+      };
+      newSections.push(defaultSection);
+    }
     const newSchema = {
       ...schema,
-      sections: schema.sections.map((s) => {
-        if (s.id === sectionId) {
-          const newFields = [...s.fields];
-          if (typeof index2 === "number") {
-            newFields.splice(index2, 0, newField);
-          } else {
-            newFields.push(newField);
-          }
-          return { ...s, fields: newFields };
-        }
-        return s;
-      })
+      sections: newSections
     };
     set({
       schema: newSchema,
@@ -4341,6 +4432,16 @@ var formStore = createStore((set, get) => ({
     });
     if (!field)
       return;
+    if (targetSectionId === null || newSections.length === 0) {
+      const defaultSection = {
+        id: generateId(),
+        title: "Default Section",
+        fields: [],
+        columns: 1
+      };
+      newSections.push(defaultSection);
+      targetSectionId = defaultSection.id;
+    }
     const targetSectionIndex = newSections.findIndex((s) => s.id === targetSectionId);
     if (targetSectionIndex !== -1) {
       const targetSection = newSections[targetSectionIndex];
@@ -4499,6 +4600,7 @@ function getIcon(name, size = 20) {
 var FieldRenderer = class {
   static render(field, value, onChange, readOnly = false) {
     const wrapper = createElement("div", { className: "w-full" });
+    const isEnabled = field.enabled !== false && !readOnly;
     if (field.type !== "checkbox") {
       const label = createElement("label", {
         className: "text-xs sm:text-sm font-medium leading-none mb-2 block text-gray-900 dark:text-gray-100",
@@ -4525,7 +4627,7 @@ var FieldRenderer = class {
           className: "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm sm:text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           placeholder: field.placeholder,
           value: value || "",
-          disabled: readOnly,
+          disabled: !isEnabled,
           oninput: (e) => onChange?.(e.target.value)
         });
         break;
@@ -4533,7 +4635,7 @@ var FieldRenderer = class {
         input = createElement("select", {
           className: "flex min-h-touch w-full rounded-md border border-input bg-background px-3 py-2 text-sm sm:text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           value: value || "",
-          disabled: readOnly,
+          disabled: !isEnabled,
           onchange: (e) => onChange?.(e.target.value)
         });
         input.appendChild(createElement("option", { value: "", text: "Select an option", disabled: true, selected: !value }));
@@ -4547,7 +4649,7 @@ var FieldRenderer = class {
           type: "checkbox",
           className: "h-5 w-5 sm:h-6 sm:w-6 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer",
           checked: !!value,
-          disabled: readOnly,
+          disabled: !isEnabled,
           onchange: (e) => onChange?.(e.target.checked)
         });
         input.appendChild(checkbox);
@@ -4561,7 +4663,7 @@ var FieldRenderer = class {
             name: field.id,
             value: opt.value,
             checked: value === opt.value,
-            disabled: readOnly,
+            disabled: !isEnabled,
             className: "aspect-square h-4 w-4 sm:h-5 sm:w-5 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             onchange: (e) => onChange?.(e.target.value)
           });
@@ -4580,7 +4682,7 @@ var FieldRenderer = class {
           className: "flex min-h-touch w-full rounded-md border border-input bg-background px-3 py-2 text-sm sm:text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           placeholder: field.placeholder,
           value: value || "",
-          disabled: readOnly,
+          disabled: !isEnabled,
           oninput: (e) => onChange?.(e.target.value)
         });
     }
@@ -4617,6 +4719,10 @@ var FormRenderer = class {
       sectionEl.appendChild(createElement("h2", { className: "text-lg md:text-xl font-semibold text-gray-800 dark:text-gray-200 border-b pb-2", text: section.title }));
       const grid = createElement("div", { className: "form-builder-grid" });
       section.fields.forEach((field) => {
+        const isVisible = field.visible !== false;
+        if (!isVisible) {
+          return;
+        }
         const fieldWrapper = createElement("div");
         let spanClass = "col-span-12";
         if (field.width === "50%")
@@ -6902,6 +7008,266 @@ Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
 var sortable_esm_default = Sortable;
 
+// src/builder/FieldWrapper.ts
+var FieldWrapper = class {
+  static render(field, isSelected) {
+    const isVisible = field.visible !== false;
+    let spanClass = "col-span-12";
+    if (field.width === "50%")
+      spanClass = "col-span-6";
+    else if (field.width === "33%")
+      spanClass = "col-span-4";
+    else if (field.width === "25%")
+      spanClass = "col-span-3";
+    else if (field.width === "66%")
+      spanClass = "col-span-8";
+    else if (field.width === "75%")
+      spanClass = "col-span-9";
+    const fieldWrapper = createElement("div", {
+      className: `form-builder-field-wrapper ${isSelected ? "selected-field" : ""} ${spanClass} relative group border border-transparent hover:border-blue-200 rounded-md transition-all ${!isVisible ? "hidden" : ""}`,
+      "data-id": field.id,
+      onclick: (e) => {
+        e.stopPropagation();
+        formStore.getState().selectField(field.id);
+      }
+    });
+    if (isSelected) {
+      fieldWrapper.classList.add("ring-2", "ring-blue-500", "bg-blue-50", "dark:bg-blue-900/20");
+    }
+    fieldWrapper.appendChild(createElement("div", {
+      className: `absolute top-2 left-2 cursor-move p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity field-handle z-10 ${isSelected ? "opacity-100" : ""}`
+    }, [getIcon("GripVertical", 16)]));
+    fieldWrapper.appendChild(createElement("button", {
+      className: `absolute top-2 right-2 p-1 rounded hover:bg-red-50 text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity z-10 ${isSelected ? "opacity-100" : ""}`,
+      onclick: (e) => {
+        e.stopPropagation();
+        if (confirm("Delete this field?")) {
+          formStore.getState().removeField(field.id);
+        }
+      }
+    }, [getIcon("Trash2", 16)]));
+    const content = createElement("div", { className: "p-4 pointer-events-none" });
+    content.appendChild(FieldRenderer.render(field, null, void 0, true));
+    fieldWrapper.appendChild(content);
+    return fieldWrapper;
+  }
+};
+
+// src/builder/Section.ts
+var Section = class {
+  constructor(section, isSelectedField) {
+    __publicField(this, "container");
+    __publicField(this, "section");
+    __publicField(this, "isSelectedField");
+    this.section = section;
+    this.isSelectedField = isSelectedField;
+    this.container = this.render();
+  }
+  getElement() {
+    return this.container;
+  }
+  render() {
+    const sectionEl = createElement("div", {
+      className: "mb-6 rounded-lg border bg-white dark:bg-gray-900 shadow-sm transition-all border-gray-200 dark:border-gray-800",
+      "data-id": this.section.id
+    });
+    const header = createElement("div", { className: "flex items-center justify-between  p-2 border-b border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50 rounded-t-lg" });
+    const headerLeft = createElement("div", { className: "flex items-center flex-1" });
+    headerLeft.appendChild(createElement("div", { className: "cursor-move mr-3 text-gray-400 hover:text-gray-600 section-handle" }, [getIcon("GripVertical", 20)]));
+    headerLeft.appendChild(createElement("input", {
+      className: "bg-transparent font-semibold text-gray-700 dark:text-gray-200 focus:outline-none focus:border-b border-blue-500",
+      value: this.section.title,
+      "data-focus-id": `section-title-${this.section.id}`,
+      oninput: (e) => formStore.getState().updateSection(this.section.id, { title: e.target.value })
+    }));
+    header.appendChild(headerLeft);
+    const actions = createElement("div", { className: "flex items-center space-x-1" });
+    const colSelect = createElement("select", {
+      className: "text-xs border rounded bg-transparent mr-2 p-1 text-gray-600",
+      title: "Section Columns",
+      onchange: (e) => {
+        formStore.getState().updateSection(this.section.id, { columns: parseInt(e.target.value) });
+      }
+    });
+    [1, 2, 3].forEach((c) => {
+      colSelect.appendChild(createElement("option", { value: c.toString(), text: `${c} Col`, selected: (this.section.columns || 1) === c }));
+    });
+    actions.appendChild(colSelect);
+    actions.appendChild(createElement("button", {
+      className: "text-gray-600 hover:text-red-500 transition-colors p-1",
+      onclick: () => {
+        if (confirm("Delete this section and all its fields?")) {
+          formStore.getState().removeSection(this.section.id);
+        }
+      }
+    }, [getIcon("Trash2", 18)]));
+    header.appendChild(actions);
+    sectionEl.appendChild(header);
+    const fieldsGrid = createElement("div", {
+      className: "form-builder-grid p-4 min-h-[100px] fields-list",
+      "data-section-id": this.section.id
+    });
+    if (this.section.fields.length === 0) {
+      fieldsGrid.classList.add("flex", "justify-center", "items-center", "border-2", "border-dashed", "border-gray-100", "dark:border-gray-800", "m-4", "rounded");
+      fieldsGrid.appendChild(createElement("div", { className: "text-gray-400 text-sm py-4", text: "Drop fields here" }));
+    }
+    this.section.fields.forEach((field) => {
+      const isSelected = this.isSelectedField(field.id);
+      fieldsGrid.appendChild(FieldWrapper.render(field, isSelected));
+    });
+    sectionEl.appendChild(fieldsGrid);
+    this.initFieldSortable(fieldsGrid);
+    return sectionEl;
+  }
+  initFieldSortable(element) {
+    new sortable_esm_default(element, {
+      group: {
+        name: "shared-fields",
+        put: ["shared-fields", "shared-templates"]
+        // Allow dropping templates to merge fields
+      },
+      handle: ".field-handle",
+      animation: 150,
+      ghostClass: "bg-blue-50",
+      // Class to apply to the drag ghost
+      onAdd: (evt) => {
+        const item = evt.item;
+        const type = item.getAttribute("data-type");
+        evt.from.getAttribute("data-section-id");
+        const toSectionId = this.section.id;
+        if (type && !item.hasAttribute("data-id")) {
+          item.remove();
+          if (type === "template-section") {
+            const templateId = item.getAttribute("data-template-id");
+            const templates = formStore.getState().templates;
+            const template = templates.find((t) => t.id === templateId);
+            if (template) {
+              formStore.getState().addTemplateFields(toSectionId, template, evt.newIndex);
+            }
+            return;
+          }
+          formStore.getState().addField(toSectionId, type, evt.newIndex);
+        } else {
+          const fieldId = item.getAttribute("data-id");
+          if (fieldId) {
+            formStore.getState().moveField(fieldId, toSectionId, evt.newIndex);
+            item.remove();
+          }
+        }
+      },
+      onUpdate: (evt) => {
+        const item = evt.item;
+        const fieldId = item.getAttribute("data-id");
+        if (fieldId && evt.newIndex !== void 0) {
+          formStore.getState().moveField(fieldId, this.section.id, evt.newIndex);
+        }
+      }
+    });
+  }
+};
+
+// src/builder/SectionList.ts
+var SectionList = class {
+  constructor(schema, selectedFieldId) {
+    __publicField(this, "container");
+    __publicField(this, "schema");
+    __publicField(this, "selectedFieldId");
+    this.schema = schema;
+    this.selectedFieldId = selectedFieldId;
+    this.container = this.render();
+  }
+  getElement() {
+    return this.container;
+  }
+  render() {
+    const listContainer = createElement("div", {
+      className: "space-y-6 min-h-[200px] pb-20",
+      // pb-20 for extra scrolling space
+      id: "sections-list",
+      "data-drop-zone": "sections"
+    });
+    const hasNoSections = this.schema.sections.length === 0;
+    if (hasNoSections) {
+      const placeholder = createElement("div", {
+        className: "border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-8 text-center text-gray-500 flex flex-col items-center justify-center min-h-[200px] bg-gray-50 dark:bg-gray-800/50 empty-fields-dropzone",
+        id: "empty-fields-dropzone"
+      });
+      placeholder.appendChild(createElement("div", { className: "font-medium mb-2", text: "Start Building Your Form" }));
+      placeholder.appendChild(createElement("div", { className: "text-sm text-gray-400", text: 'Drag fields from the sidebar or click "Add Section" below.' }));
+      listContainer.appendChild(placeholder);
+    }
+    this.schema.sections.forEach((section) => {
+      const sectionComponent = new Section(section, (id) => id === this.selectedFieldId);
+      listContainer.appendChild(sectionComponent.getElement());
+    });
+    this.initSectionSortable(listContainer, hasNoSections);
+    return listContainer;
+  }
+  initSectionSortable(element, hasNoSections) {
+    if (hasNoSections) {
+      const emptyDropzone = element.querySelector("#empty-fields-dropzone");
+      if (emptyDropzone) {
+        new sortable_esm_default(emptyDropzone, {
+          group: {
+            name: "shared-fields",
+            put: ["shared-fields", "shared-templates"]
+          },
+          animation: 150,
+          ghostClass: "bg-blue-50",
+          onAdd: (evt) => {
+            const item = evt.item;
+            const type = item.getAttribute("data-type");
+            const templateId = item.getAttribute("data-template-id");
+            item.remove();
+            if (templateId) {
+              const templates = formStore.getState().templates;
+              const template = templates.find((t) => t.id === templateId);
+              if (template) {
+                formStore.getState().importSection(template);
+              }
+            } else if (type && !item.hasAttribute("data-id")) {
+              formStore.getState().addField(null, type, evt.newIndex);
+            } else {
+              const fieldId = item.getAttribute("data-id");
+              if (fieldId) {
+                formStore.getState().moveField(fieldId, null, evt.newIndex || 0);
+              }
+            }
+          }
+        });
+      }
+    } else {
+      new sortable_esm_default(element, {
+        group: {
+          name: "shared-sections",
+          put: ["shared-templates"]
+          // Allow dropping templates here
+        },
+        handle: ".section-handle",
+        animation: 150,
+        ghostClass: "opacity-50",
+        onAdd: (evt) => {
+          const item = evt.item;
+          const templateId = item.getAttribute("data-template-id");
+          if (templateId) {
+            const templates = formStore.getState().templates;
+            const template = templates.find((t) => t.id === templateId);
+            item.remove();
+            if (template) {
+              formStore.getState().importSection(template);
+            }
+          }
+        },
+        onUpdate: (evt) => {
+          if (evt.oldIndex !== void 0 && evt.newIndex !== void 0) {
+            formStore.getState().moveSection(evt.oldIndex, evt.newIndex);
+          }
+        }
+      });
+    }
+  }
+};
+
 // src/builder/FormBuilder.ts
 var FormBuilder = class {
   constructor(container, options = {}) {
@@ -6935,6 +7301,9 @@ var FormBuilder = class {
     if (options.formJson) {
       formStore.getState().setSchema(options.formJson);
     } else if (options.mode === "create") ;
+    if (options.data?.masterTypes) {
+      formStore.getState().setMasterTypes(options.data.masterTypes);
+    }
     this.render();
     this.setupSubscriptions();
   }
@@ -7039,7 +7408,7 @@ var FormBuilder = class {
       }, 0);
     }
     if (!state.isPreviewMode) {
-      this.initSortable();
+      this.initSidebarSortables();
     }
   }
   renderToolbar(state) {
@@ -7236,98 +7605,8 @@ var FormBuilder = class {
       oninput: (e) => formStore.getState().setSchema({ ...state.schema, formName: e.target.value })
     });
     inner.appendChild(formNameInput);
-    const sectionsContainer = createElement("div", {
-      className: "space-y-6 min-h-[200px]",
-      id: "sections-list",
-      "data-drop-zone": "sections"
-    });
-    state.schema.sections.forEach((section) => {
-      const sectionEl = createElement("div", {
-        className: "mb-6 rounded-lg border bg-white dark:bg-gray-900 shadow-sm transition-all border-gray-200 dark:border-gray-800",
-        "data-id": section.id
-      });
-      const header = createElement("div", { className: "flex items-center justify-between  p-2 border-b border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50 rounded-t-lg" });
-      const headerLeft = createElement("div", { className: "flex items-center flex-1" });
-      headerLeft.appendChild(createElement("div", { className: "cursor-move mr-3 text-gray-400 hover:text-gray-600 section-handle" }, [getIcon("GripVertical", 20)]));
-      headerLeft.appendChild(createElement("input", {
-        className: "bg-transparent font-semibold text-gray-700 dark:text-gray-200 focus:outline-none focus:border-b border-blue-500",
-        value: section.title,
-        "data-focus-id": `section-title-${section.id}`,
-        oninput: (e) => formStore.getState().updateSection(section.id, { title: e.target.value })
-      }));
-      header.appendChild(headerLeft);
-      const actions = createElement("div", { className: "flex items-center space-x-1" });
-      const colSelect = createElement("select", {
-        className: "text-xs border rounded bg-transparent mr-2 p-1 text-gray-600",
-        title: "Section Columns",
-        onchange: (e) => {
-          formStore.getState().updateSection(section.id, { columns: parseInt(e.target.value) });
-        }
-      });
-      [1, 2, 3].forEach((c) => {
-        colSelect.appendChild(createElement("option", { value: c.toString(), text: `${c} Col`, selected: (section.columns || 1) === c }));
-      });
-      actions.appendChild(colSelect);
-      actions.appendChild(createElement("button", {
-        className: "text-gray-600 hover:text-blue-500 transition-colors p-1",
-        title: "Save as Template",
-        onclick: () => {
-          const name = prompt("Enter template name:", section.title);
-          if (name) {
-            this.saveSectionAsTemplate({ ...section, title: name });
-          }
-        }
-      }, [getIcon("Save", 18)]));
-      actions.appendChild(createElement("button", {
-        className: "text-gray-600 hover:text-red-500 transition-colors p-1",
-        onclick: () => formStore.getState().removeSection(section.id)
-      }, [getIcon("Trash2", 18)]));
-      header.appendChild(actions);
-      sectionEl.appendChild(header);
-      const fieldsGrid = createElement("div", {
-        className: "form-builder-grid p-4 min-h-[100px] fields-list",
-        "data-section-id": section.id
-      });
-      section.fields.forEach((field) => {
-        const isSelected = state.selectedFieldId === field.id;
-        let spanClass = "col-span-12";
-        if (field.width === "50%")
-          spanClass = "col-span-6";
-        else if (field.width === "33%")
-          spanClass = "col-span-4";
-        else if (field.width === "25%")
-          spanClass = "col-span-3";
-        else if (field.width === "66%")
-          spanClass = "col-span-8";
-        else if (field.width === "75%")
-          spanClass = "col-span-9";
-        const fieldWrapper = createElement("div", {
-          className: `form-builder-field-wrapper ${isSelected ? "selected-field" : ""} ${spanClass}`,
-          "data-id": field.id,
-          onclick: (e) => {
-            e.stopPropagation();
-            formStore.getState().selectField(field.id);
-          }
-        });
-        fieldWrapper.appendChild(createElement("div", {
-          className: `absolute top-2 left-2 cursor-move p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity field-handle ${isSelected ? "opacity-100" : ""}`
-        }, [getIcon("GripVertical", 16)]));
-        fieldWrapper.appendChild(createElement("button", {
-          className: `absolute top-2 right-2 p-1 rounded hover:bg-red-50 text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity ${isSelected ? "opacity-100" : ""}`,
-          onclick: (e) => {
-            e.stopPropagation();
-            formStore.getState().removeField(field.id);
-          }
-        }, [getIcon("Trash2", 16)]));
-        const content = createElement("div", { className: "p-4 pointer-events-none" });
-        content.appendChild(FieldRenderer.render(field, null, void 0, true));
-        fieldWrapper.appendChild(content);
-        fieldsGrid.appendChild(fieldWrapper);
-      });
-      sectionEl.appendChild(fieldsGrid);
-      sectionsContainer.appendChild(sectionEl);
-    });
-    inner.appendChild(sectionsContainer);
+    const sectionList = new SectionList(state.schema, state.selectedFieldId);
+    inner.appendChild(sectionList.getElement());
     const addSectionBtn = createElement("button", {
       className: "w-full mt-6 py-4 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg text-gray-500 hover:border-blue-500 hover:text-blue-500 transition-colors flex items-center justify-center font-medium",
       onclick: () => formStore.getState().addSection()
@@ -7389,6 +7668,101 @@ var FormBuilder = class {
       onchange: (e) => formStore.getState().updateField(selectedField.id, { required: e.target.checked })
     }));
     body.appendChild(requiredGroup);
+    const enabledGroup = createElement("div", { className: "flex items-center justify-between mb-4" });
+    enabledGroup.appendChild(createElement("label", { className: "text-sm text-gray-700 dark:text-gray-300", text: "Enabled" }));
+    enabledGroup.appendChild(createElement("input", {
+      type: "checkbox",
+      className: "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500",
+      checked: selectedField.enabled !== false,
+      // Default to true if not specified
+      onchange: (e) => formStore.getState().updateField(selectedField.id, { enabled: e.target.checked })
+    }));
+    body.appendChild(enabledGroup);
+    const visibleGroup = createElement("div", { className: "flex items-center justify-between mb-4" });
+    visibleGroup.appendChild(createElement("label", { className: "text-sm text-gray-700 dark:text-gray-300", text: "Visible" }));
+    visibleGroup.appendChild(createElement("input", {
+      type: "checkbox",
+      className: "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500",
+      checked: selectedField.visible !== false,
+      // Default to true if not specified
+      onchange: (e) => formStore.getState().updateField(selectedField.id, { visible: e.target.checked })
+    }));
+    body.appendChild(visibleGroup);
+    if (selectedField.type === "select") {
+      const masterTypes = formStore.getState().masterTypes;
+      const activeMasterTypes = masterTypes.filter((mt) => mt.active === true);
+      const convertIndexesToOptions = (indexes) => {
+        if (!indexes || !Array.isArray(indexes) || indexes.length === 0) {
+          return [];
+        }
+        return indexes.map((item, index2) => {
+          if (typeof item === "string") {
+            return { label: item, value: item };
+          }
+          if (typeof item === "object" && item !== null) {
+            const label = item.label || item.name || item.displayName || item.text || `Option ${index2 + 1}`;
+            const value = item.value || item.id || item.name || String(index2);
+            return { label, value };
+          }
+          return { label: String(item), value: String(item) };
+        });
+      };
+      if (activeMasterTypes.length > 0) {
+        const groupNameGroup = createElement("div", { className: "mb-4" });
+        groupNameGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Group Name" }));
+        const groupNameSelect = createElement("select", {
+          className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+          onchange: (e) => {
+            const selectedValue = e.target.value;
+            if (selectedValue) {
+              const selectedMasterType = activeMasterTypes.find((mt) => mt.id === selectedValue || mt.name === selectedValue);
+              if (selectedMasterType) {
+                const options = convertIndexesToOptions(selectedMasterType.indexes || []);
+                formStore.getState().updateField(selectedField.id, {
+                  groupName: {
+                    id: selectedMasterType.id,
+                    name: selectedMasterType.name
+                  },
+                  options: options.length > 0 ? options : void 0
+                });
+              }
+            } else {
+              formStore.getState().updateField(selectedField.id, {
+                groupName: void 0,
+                options: void 0
+                // Clear options when groupName is cleared
+              });
+            }
+          }
+        });
+        groupNameSelect.appendChild(createElement("option", {
+          value: "",
+          text: "None",
+          selected: !selectedField.groupName
+        }));
+        activeMasterTypes.forEach((mt) => {
+          const isSelected = selectedField.groupName && (selectedField.groupName.id === mt.id || selectedField.groupName.name === mt.name);
+          groupNameSelect.appendChild(createElement("option", {
+            value: mt.id || mt.name,
+            text: mt.displayName || mt.name,
+            selected: !!isSelected
+          }));
+        });
+        groupNameGroup.appendChild(groupNameSelect);
+        body.appendChild(groupNameGroup);
+        if (selectedField.groupName && (!selectedField.options || selectedField.options.length === 0)) {
+          const currentMasterType = activeMasterTypes.find(
+            (mt) => mt.id === selectedField.groupName?.id || mt.name === selectedField.groupName?.name
+          );
+          if (currentMasterType && currentMasterType.indexes && currentMasterType.indexes.length > 0) {
+            const options = convertIndexesToOptions(currentMasterType.indexes);
+            if (options.length > 0) {
+              formStore.getState().updateField(selectedField.id, { options });
+            }
+          }
+        }
+      }
+    }
     const validationHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Validation Rules" });
     body.appendChild(validationHeader);
     const validations = selectedField.validation || [];
@@ -7515,12 +7889,13 @@ var FormBuilder = class {
     panel.appendChild(body);
     return panel;
   }
-  initSortable() {
+  initSidebarSortables() {
     const toolboxList = document.getElementById("toolbox-list");
     if (toolboxList) {
       new sortable_esm_default(toolboxList, {
         group: {
-          name: "shared",
+          name: "shared-fields",
+          // Matches the group in Section.ts
           pull: "clone",
           put: false
         },
@@ -7532,7 +7907,7 @@ var FormBuilder = class {
     if (templatesList) {
       new sortable_esm_default(templatesList, {
         group: {
-          name: "shared",
+          name: "shared-templates",
           pull: "clone",
           put: false
         },
@@ -7542,85 +7917,6 @@ var FormBuilder = class {
         forceFallback: true
       });
     }
-    const sectionsList = document.getElementById("sections-list");
-    if (sectionsList) {
-      new sortable_esm_default(sectionsList, {
-        group: "shared",
-        handle: ".section-handle",
-        animation: 150,
-        onAdd: (evt) => {
-          const item = evt.item;
-          const templateId = item.getAttribute("data-template-id");
-          const isTemplate = item.getAttribute("data-type") === "template-section";
-          if (templateId && isTemplate) {
-            const templates = formStore.getState().templates;
-            const template = templates.find((t) => t.id === templateId);
-            if (template) {
-              item.remove();
-              formStore.getState().importSection(template);
-              return;
-            }
-          }
-        },
-        onEnd: (evt) => {
-          const item = evt.item;
-          const templateId = item.getAttribute("data-template-id");
-          const isTemplate = item.getAttribute("data-type") === "template-section";
-          if (!templateId && !isTemplate && evt.oldIndex !== void 0 && evt.newIndex !== void 0 && evt.oldIndex !== evt.newIndex) {
-            formStore.getState().moveSection(evt.oldIndex, evt.newIndex);
-          }
-        }
-      });
-    }
-    const fieldLists = document.querySelectorAll(".fields-list");
-    fieldLists.forEach((list) => {
-      new sortable_esm_default(list, {
-        group: "shared",
-        handle: ".field-handle",
-        animation: 150,
-        onAdd: (evt) => {
-          const item = evt.item;
-          const type = item.getAttribute("data-type");
-          const sectionId = list.getAttribute("data-section-id");
-          if (type && sectionId) {
-            if (type === "template-section") {
-              const templateId = item.getAttribute("data-template-id");
-              const templates = formStore.getState().templates;
-              const template = templates.find((t) => t.id === templateId);
-              item.remove();
-              if (template) {
-                formStore.getState().addTemplateFields(sectionId, template, evt.newIndex);
-              }
-              return;
-            }
-            item.remove();
-            formStore.getState().addField(sectionId, type, evt.newIndex);
-          } else if (sectionId) {
-            item.getAttribute("data-id");
-          }
-        },
-        onUpdate: (evt) => {
-          const item = evt.item;
-          const fieldId = item.getAttribute("data-id");
-          const sectionId = list.getAttribute("data-section-id");
-          if (fieldId && sectionId && evt.newIndex !== void 0) {
-            formStore.getState().moveField(fieldId, sectionId, evt.newIndex);
-          }
-        },
-        onEnd: (evt) => {
-          const item = evt.item;
-          const fromList = evt.from;
-          const toList = evt.to;
-          if (fromList !== toList && fromList.classList.contains("fields-list") && toList.classList.contains("fields-list")) {
-            const fieldId = item.getAttribute("data-id");
-            const targetSectionId = toList.getAttribute("data-section-id");
-            if (fieldId && targetSectionId && evt.newIndex !== void 0) {
-              formStore.getState().moveField(fieldId, targetSectionId, evt.newIndex);
-            }
-          }
-        }
-      });
-    });
   }
 };