form-builder-pro 1.3.8 → 1.3.9

package/dist/index.js

@@ -4773,7 +4773,30 @@ function transformField(field) {
 var cleanFormSchema = (schema) => {
   const cleanField = transformField;
   let sections = [];
-  if (schema.fields && Array.isArray(schema.fields) && schema.fields.length > 0) {
+  if (schema.sections && Array.isArray(schema.sections)) {
+    sections = schema.sections;
+  } else if (schema.groups && Array.isArray(schema.groups)) {
+    const rootFields = schema.fields && Array.isArray(schema.fields) ? schema.fields : [];
+    const rootById = new Map(rootFields.map((f) => [String(f.id), f]));
+    sections = schema.groups.map((group, index2) => {
+      let fieldList = group.fields;
+      if (Array.isArray(group.fieldIds) && group.fieldIds.length > 0 && rootById.size > 0) {
+        fieldList = group.fieldIds.map((id) => rootById.get(String(id))).filter(Boolean);
+      }
+      if (!fieldList)
+        fieldList = [];
+      return {
+        ...group,
+        id: group.id || `section-${index2}`,
+        title: group.title || group.name || `Section ${index2 + 1}`,
+        name: group.name ?? group.title,
+        fields: fieldList,
+        order: group.order !== void 0 ? group.order : index2,
+        isExpanded: group.isExpanded !== void 0 ? group.isExpanded : true,
+        expanded: group.expanded !== void 0 ? group.expanded : group.isExpanded !== false
+      };
+    });
+  } else if (schema.fields && Array.isArray(schema.fields) && schema.fields.length > 0) {
     sections = [{
       id: schema.id ? `section-${schema.id}` : "section-1",
       title: schema.formName || schema.title || "Form Fields",
@@ -4781,16 +4804,6 @@ var cleanFormSchema = (schema) => {
       order: 0,
       isExpanded: true
     }];
-  } else if (schema.sections && Array.isArray(schema.sections)) {
-    sections = schema.sections;
-  } else if (schema.groups && Array.isArray(schema.groups)) {
-    sections = schema.groups.map((group, index2) => ({
-      id: group.id || `section-${index2}`,
-      title: group.title || group.name || `Section ${index2 + 1}`,
-      fields: group.fields || [],
-      order: group.order !== void 0 ? group.order : index2,
-      isExpanded: group.isExpanded !== void 0 ? group.isExpanded : true
-    }));
   }
   return {
     id: schema.id,
@@ -4798,26 +4811,37 @@ var cleanFormSchema = (schema) => {
     formName: schema.formName || schema.formId || schema.id,
     layout: schema.layout || { type: "grid", columns: 12, gap: "16px" },
     // Preserve form-level layout or set default
-    sections: sections.map((section, sectionIndex) => ({
-      id: section.id || `section-${sectionIndex}`,
-      title: section.title || `Section ${sectionIndex + 1}`,
-      fields: (section.fields || []).map((field, fieldIndex) => {
-        const cleaned = cleanField(field);
-        if (cleaned.order === void 0) {
-          cleaned.order = fieldIndex;
-        }
-        return cleaned;
-      }),
-      isExpanded: section.isExpanded !== void 0 ? section.isExpanded : true,
-      columns: section.columns,
-      // Legacy - prefer layout.columns
-      order: section.order !== void 0 ? section.order : sectionIndex,
-      // Ensure section order is set
-      layout: section.layout || { type: "grid", columns: section.columns || 12, gap: "16px" },
-      // Preserve section layout or set default
-      css: section.css
-      // Preserve section CSS
-    }))
+    sections: sections.map((section, sectionIndex) => {
+      const order = section.order !== void 0 ? section.order : sectionIndex;
+      return {
+        id: section.id || `section-${sectionIndex}`,
+        title: section.title || `Section ${sectionIndex + 1}`,
+        name: section.name ?? section.title,
+        description: section.description ?? null,
+        fields: (section.fields || []).map((field, fieldIndex) => {
+          const cleaned = cleanField(field);
+          if (cleaned.order === void 0) {
+            cleaned.order = fieldIndex;
+          }
+          return cleaned;
+        }),
+        isExpanded: section.isExpanded !== void 0 ? section.isExpanded : true,
+        expanded: section.expanded !== void 0 ? section.expanded : section.isExpanded !== false,
+        columns: section.columns,
+        order,
+        layout: section.layout || { type: "grid", columns: section.columns || 12, gap: "16px" },
+        css: section.css,
+        position: section.position ?? { row: order, column: 0, width: 12, order },
+        visible: section.visible !== false,
+        collapsible: section.collapsible !== false,
+        parentGroupId: section.parentGroupId ?? null,
+        repeatable: section.repeatable === true,
+        dataKey: section.dataKey ?? null,
+        addButtonLabel: section.addButtonLabel ?? null,
+        minInstances: section.minInstances ?? null,
+        maxInstances: section.maxInstances ?? null
+      };
+    })
   };
 };
 function convertValidationArrayToObject(validation) {
@@ -4862,7 +4886,7 @@ function convertWidthToSpan(width, totalColumns = 12) {
   const widthNum = parseWidth(width);
   return Math.max(1, Math.min(12, Math.round(widthNum / 100 * totalColumns)));
 }
-function fieldToPayload(field) {
+function fieldToPayload(field, opts) {
   let outputType = field.type;
   let outputValidations = field.validations ? { ...field.validations } : void 0;
   if (field.type === "text" && isEmailLikeField(field)) {
@@ -4881,6 +4905,9 @@ function fieldToPayload(field) {
     // Model key for binding (API / host app)
     order: field.order !== void 0 ? field.order : 0
   };
+  if (opts?.groupId) {
+    payload.groupId = opts.groupId;
+  }
   if (field.layout?.span !== void 0) {
     payload.layout = {
       row: field.layout.row ?? 0,
@@ -5036,20 +5063,48 @@ function fieldToPayload(field) {
   }
   return payload;
 }
+function sectionToGroupPayload(section, index2) {
+  const order = section.order !== void 0 ? section.order : index2;
+  const pos = section.position ?? { row: order, column: 0, width: 12, order };
+  const width = Math.max(1, Math.min(12, pos.width ?? 12));
+  return {
+    id: section.id,
+    name: section.name ?? section.title,
+    description: section.description ?? null,
+    position: {
+      row: pos.row ?? 0,
+      column: pos.column ?? 0,
+      width,
+      order: pos.order ?? order
+    },
+    fieldIds: section.fields.map((f) => f.id),
+    expanded: section.expanded !== void 0 ? section.expanded : section.isExpanded !== false,
+    visible: section.visible !== false,
+    collapsible: section.collapsible !== false,
+    parentGroupId: section.parentGroupId ?? null,
+    repeatable: section.repeatable === true,
+    dataKey: section.dataKey ?? null,
+    addButtonLabel: section.addButtonLabel ?? null,
+    minInstances: section.minInstances ?? null,
+    maxInstances: section.maxInstances ?? null,
+    css: section.css
+  };
+}
 var builderToPlatform = (builderSchema) => {
+  const fieldsFlat = [];
+  const groups = builderSchema.sections.map((section, sectionIndex) => {
+    section.fields.forEach((f) => {
+      fieldsFlat.push(fieldToPayload(f, { groupId: section.id }));
+    });
+    return sectionToGroupPayload(section, sectionIndex);
+  });
   return {
     id: builderSchema.id,
     title: builderSchema.title,
     formName: builderSchema.formName,
     layout: builderSchema.layout || { type: "grid", columns: 12, gap: "16px" },
-    sections: builderSchema.sections.map((section, sectionIndex) => ({
-      id: section.id,
-      title: section.title,
-      order: section.order !== void 0 ? section.order : sectionIndex,
-      layout: section.layout || { type: "grid", columns: section.columns || 12, gap: "16px" },
-      css: section.css,
-      fields: section.fields.map(fieldToPayload)
-    }))
+    fields: fieldsFlat,
+    groups
   };
 };
 var platformToBuilder = (platformSchema) => {
@@ -5070,6 +5125,77 @@ function getValidationConfigForAngular(validations) {
   };
 }
 
+// src/utils/sectionHierarchy.ts
+function effectiveParentId(section, sectionIds) {
+  const p = section.parentGroupId;
+  if (!p || !sectionIds.has(p))
+    return null;
+  return p;
+}
+function getRootSections(sections) {
+  const ids = new Set(sections.map((s) => s.id));
+  return sections.filter((s) => effectiveParentId(s, ids) === null);
+}
+function getChildSections(sections, parentId, excludeSectionId) {
+  const ids = new Set(sections.map((s) => s.id));
+  return sections.filter((s) => {
+    return effectiveParentId(s, ids) === parentId;
+  }).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+}
+function getDescendantSectionIds(sections, rootId) {
+  const byParent = /* @__PURE__ */ new Map();
+  sections.forEach((s) => {
+    const p = s.parentGroupId;
+    if (p) {
+      if (!byParent.has(p))
+        byParent.set(p, []);
+      byParent.get(p).push(s.id);
+    }
+  });
+  const out = /* @__PURE__ */ new Set();
+  const stack = [...byParent.get(rootId) || []];
+  while (stack.length) {
+    const id = stack.pop();
+    if (out.has(id))
+      continue;
+    out.add(id);
+    (byParent.get(id) || []).forEach((c) => stack.push(c));
+  }
+  return out;
+}
+function wouldCreateParentCycle(sections, sectionId, newParentId) {
+  if (newParentId === sectionId)
+    return true;
+  return getDescendantSectionIds(sections, sectionId).has(newParentId);
+}
+function getValidParentSectionIds(sections, sectionId) {
+  const descendants = getDescendantSectionIds(sections, sectionId);
+  return sections.map((s) => s.id).filter((id) => id !== sectionId && !descendants.has(id));
+}
+function siblingsForParent(sections, sectionIds, parentId, excludeSectionId) {
+  return sections.filter((s) => {
+    if (s.id === excludeSectionId)
+      return false;
+    const eff = effectiveParentId(s, sectionIds);
+    if (parentId === null)
+      return eff === null;
+    return eff === parentId;
+  });
+}
+function nextSiblingOrder(sections, sectionId, parentId) {
+  const sectionIds = new Set(sections.map((s) => s.id));
+  const siblings = siblingsForParent(sections, sectionIds, parentId, sectionId);
+  if (siblings.length === 0)
+    return 0;
+  return Math.max(...siblings.map((s) => s.order ?? 0)) + 1;
+}
+function getNextRootOrder(sections) {
+  const roots = getRootSections(sections);
+  if (roots.length === 0)
+    return 0;
+  return Math.max(...roots.map((r) => r.order ?? 0)) + 1;
+}
+
 // src/core/useFormStore.ts
 var INITIAL_SCHEMA = {
   id: "form_1",
@@ -5080,6 +5206,7 @@ var INITIAL_SCHEMA = {
 var formStore = createStore((set, get) => ({
   schema: INITIAL_SCHEMA,
   selectedFieldId: null,
+  selectedSectionId: null,
   history: [INITIAL_SCHEMA],
   historyIndex: 0,
   isPreviewMode: false,
@@ -5397,6 +5524,8 @@ var formStore = createStore((set, get) => ({
   importSection: (section) => {
     const { schema, history, historyIndex } = get();
     const clonedSection = cloneSection(section);
+    clonedSection.parentGroupId = null;
+    clonedSection.order = getNextRootOrder(schema.sections);
     const newSchema = { ...schema, sections: [...schema.sections, clonedSection] };
     set({
       schema: newSchema,
@@ -5406,15 +5535,26 @@ var formStore = createStore((set, get) => ({
   },
   addSection: () => {
     const { schema, history, historyIndex } = get();
+    const order = getNextRootOrder(schema.sections);
     const newSection = {
       id: generateId(),
-      title: `Section ${schema.sections.length + 1}`,
+      title: `Section ${order + 1}`,
+      name: `Section ${order + 1}`,
       fields: [],
       columns: 1,
       // Legacy - prefer layout.columns
       layout: { type: "grid", columns: 12, gap: "16px" },
-      order: schema.sections.length
-      // Set order based on current section count
+      order,
+      position: { row: order, column: 0, width: 12, order },
+      expanded: true,
+      visible: true,
+      collapsible: true,
+      parentGroupId: null,
+      repeatable: false,
+      dataKey: null,
+      addButtonLabel: null,
+      minInstances: null,
+      maxInstances: null
     };
     const newSchema = { ...schema, sections: [...schema.sections, newSection] };
     set({
@@ -5424,24 +5564,74 @@ var formStore = createStore((set, get) => ({
     });
   },
   removeSection: (sectionId) => {
-    const { schema, history, historyIndex } = get();
+    const { schema, history, historyIndex, selectedSectionId } = get();
     const newSchema = {
       ...schema,
-      sections: schema.sections.filter((s) => s.id !== sectionId)
+      sections: schema.sections.filter((s) => s.id !== sectionId).map((s) => s.parentGroupId === sectionId ? { ...s, parentGroupId: null } : s)
     };
     set({
       schema: newSchema,
+      selectedSectionId: selectedSectionId === sectionId ? null : selectedSectionId,
       history: [...history.slice(0, historyIndex + 1), newSchema],
       historyIndex: historyIndex + 1
     });
   },
   updateSection: (sectionId, updates) => {
     const { schema, history, historyIndex } = get();
+    let processedUpdates = { ...updates };
+    if (updates.parentGroupId !== void 0) {
+      const newParent = updates.parentGroupId;
+      if (newParent === null || newParent === "") {
+        processedUpdates.parentGroupId = null;
+        processedUpdates.order = nextSiblingOrder(schema.sections, sectionId, null);
+      } else if (wouldCreateParentCycle(schema.sections, sectionId, newParent)) {
+        delete processedUpdates.parentGroupId;
+      } else {
+        processedUpdates.parentGroupId = newParent;
+        processedUpdates.order = nextSiblingOrder(schema.sections, sectionId, newParent);
+      }
+    }
     const newSchema = {
       ...schema,
-      sections: schema.sections.map(
-        (s) => s.id === sectionId ? { ...s, ...updates } : s
-      )
+      sections: schema.sections.map((s) => {
+        if (s.id !== sectionId)
+          return s;
+        let mergedUpdates = { ...processedUpdates };
+        if (processedUpdates.css !== void 0) {
+          const styleKeyPassed = processedUpdates.css && "style" in processedUpdates.css;
+          let newStyle;
+          if (styleKeyPassed) {
+            if (processedUpdates.css.style === void 0 || processedUpdates.css.style === null) {
+              newStyle = void 0;
+            } else if (typeof processedUpdates.css.style === "object") {
+              const onlyStyleInUpdate = !("class" in processedUpdates.css) || processedUpdates.css.class === void 0;
+              if (onlyStyleInUpdate) {
+                newStyle = processedUpdates.css.style;
+              } else {
+                newStyle = { ...s.css?.style || {}, ...processedUpdates.css.style };
+              }
+            } else {
+              newStyle = processedUpdates.css.style;
+            }
+          } else {
+            newStyle = s.css?.style;
+          }
+          mergedUpdates.css = {
+            ...s.css || {},
+            ...processedUpdates.css,
+            style: newStyle
+          };
+          if (!mergedUpdates.css.class)
+            delete mergedUpdates.css.class;
+          if (!mergedUpdates.css.style || Object.keys(mergedUpdates.css.style).length === 0) {
+            delete mergedUpdates.css.style;
+          }
+          if (Object.keys(mergedUpdates.css).length === 0) {
+            mergedUpdates.css = void 0;
+          }
+        }
+        return { ...s, ...mergedUpdates };
+      })
     };
     set({
       schema: newSchema,
@@ -5451,14 +5641,23 @@ var formStore = createStore((set, get) => ({
   },
   moveSection: (oldIndex2, newIndex2) => {
     const { schema, history, historyIndex } = get();
-    const newSections = [...schema.sections];
-    const [movedSection] = newSections.splice(oldIndex2, 1);
-    newSections.splice(newIndex2, 0, movedSection);
-    newSections.forEach((section, index2) => {
-      if (section.order !== index2) {
-        section.order = index2;
-      }
-    });
+    const roots = getRootSections(schema.sections).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    if (oldIndex2 < 0 || oldIndex2 >= roots.length || newIndex2 < 0 || newIndex2 >= roots.length || oldIndex2 === newIndex2) {
+      return;
+    }
+    const reorderedRoots = [...roots];
+    const [moved2] = reorderedRoots.splice(oldIndex2, 1);
+    reorderedRoots.splice(newIndex2, 0, moved2);
+    const orderByRootId = new Map(reorderedRoots.map((r, i) => [r.id, i]));
+    const rootIdSet = new Set(reorderedRoots.map((r) => r.id));
+    const nonRoots = schema.sections.filter((s) => !rootIdSet.has(s.id));
+    const newSections = [
+      ...reorderedRoots.map((r) => {
+        const full = schema.sections.find((s) => s.id === r.id);
+        return { ...full, order: orderByRootId.get(r.id) };
+      }),
+      ...nonRoots
+    ];
     const newSchema = { ...schema, sections: newSections };
     set({
       schema: newSchema,
@@ -5604,7 +5803,14 @@ var formStore = createStore((set, get) => ({
       historyIndex: historyIndex + 1
     });
   },
-  selectField: (fieldId) => set({ selectedFieldId: fieldId }),
+  selectField: (fieldId) => set({
+    selectedFieldId: fieldId,
+    selectedSectionId: fieldId ? null : null
+  }),
+  selectSection: (sectionId) => set({
+    selectedSectionId: sectionId,
+    selectedFieldId: null
+  }),
   moveField: (fieldId, targetSectionId, newIndex2) => {
     const { schema, history, historyIndex } = get();
     let field;
@@ -9572,37 +9778,70 @@ var FieldWrapper = class {
 };
 
 // src/builder/Section.ts
-var Section = class {
-  constructor(section, isSelectedField) {
+var SECTION_TITLE_DEBOUNCE_MS = 300;
+var sectionTitleUpdateTimeouts = /* @__PURE__ */ new Map();
+var Section = class _Section {
+  constructor(section, isSelectedField, selectedSectionId, allSections, depth = 0) {
     __publicField(this, "container");
     __publicField(this, "section");
+    __publicField(this, "allSections");
     __publicField(this, "isSelectedField");
+    __publicField(this, "selectedSectionId");
+    __publicField(this, "depth");
     this.section = section;
+    this.allSections = allSections;
     this.isSelectedField = isSelectedField;
+    this.selectedSectionId = selectedSectionId;
+    this.depth = depth;
     this.container = this.render();
   }
   getElement() {
     return this.container;
   }
   render() {
+    const sectionVisible = this.section.visible !== false;
+    const isSelectedSection = this.section.id === this.selectedSectionId;
+    const marginClass = this.depth > 0 ? "mb-4" : "mb-6";
     const sectionEl = createElement("div", {
-      className: "mb-6 rounded-lg border bg-white dark:bg-gray-900 shadow-sm transition-all border-[#e9e9e9] ",
-      "data-id": this.section.id
+      className: `${marginClass} rounded-lg border bg-white dark:bg-gray-900 shadow-sm transition-all border-[#e9e9e9] ${!sectionVisible ? "opacity-50" : ""} ${isSelectedSection ? "ring-2 ring-[#635bff]" : ""} ${this.depth > 0 ? "shadow-inner" : ""}`,
+      "data-id": this.section.id,
+      "data-section-id": this.section.id
     });
-    const header = createElement("div", { className: "flex items-center justify-between  p-2 border-b border-gray-100 bg-white 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)]));
+    const header = createElement("div", {
+      className: "flex items-center justify-between  p-2 border-b border-gray-100 bg-white dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50 rounded-t-lg cursor-pointer",
+      onclick: () => {
+        formStore.getState().selectSection(this.section.id);
+      }
+    });
+    const headerLeft = createElement("div", { className: "flex items-center flex-1 min-w-0" });
+    const dragHandle = createElement("div", { className: "cursor-move mr-3 text-gray-400 hover:text-gray-600 section-handle flex-shrink-0" }, [getIcon("GripVertical", 20)]);
+    dragHandle.addEventListener("mousedown", (e) => e.stopPropagation());
+    dragHandle.addEventListener("click", (e) => e.stopPropagation());
+    headerLeft.appendChild(dragHandle);
     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",
+      className: "bg-transparent font-semibold text-gray-700 dark:text-gray-200 focus:outline-none focus:border-b border-blue-500 min-w-0 flex-1",
       value: this.section.title,
       "data-focus-id": `section-title-${this.section.id}`,
-      oninput: (e) => formStore.getState().updateSection(this.section.id, { title: e.target.value })
+      onclick: (e) => e.stopPropagation(),
+      oninput: (e) => {
+        const sid = this.section.id;
+        const value = e.target.value;
+        const existing = sectionTitleUpdateTimeouts.get(sid);
+        if (existing)
+          clearTimeout(existing);
+        const timeoutId = setTimeout(() => {
+          sectionTitleUpdateTimeouts.delete(sid);
+          formStore.getState().updateSection(sid, { title: value, name: value });
+        }, SECTION_TITLE_DEBOUNCE_MS);
+        sectionTitleUpdateTimeouts.set(sid, timeoutId);
+      }
     }));
     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",
+      onclick: (e) => e.stopPropagation(),
       onchange: (e) => {
         formStore.getState().updateSection(this.section.id, { columns: parseInt(e.target.value) });
       }
@@ -9613,7 +9852,8 @@ var Section = class {
     actions.appendChild(colSelect);
     actions.appendChild(createElement("button", {
       className: "text-gray-600 hover:text-red-500 transition-colors p-1",
-      onclick: () => {
+      onclick: (e) => {
+        e.stopPropagation();
         if (confirm("Delete this section and all its fields?")) {
           formStore.getState().removeSection(this.section.id);
         }
@@ -9657,6 +9897,25 @@ var Section = class {
       fieldsGrid.appendChild(FieldWrapper.render(field, isSelected));
     });
     sectionEl.appendChild(fieldsGrid);
+    const childSections = getChildSections(this.allSections, this.section.id);
+    if (childSections.length > 0) {
+      const nestedWrap = createElement("div", {
+        className: this.depth === 0 ? "px-4 pb-4 pt-0 border-t border-dashed border-gray-200 dark:border-gray-700" : "pl-3 ml-2 mt-3 pt-3 border-l-2 border-[#635bff]/35 dark:border-[#635bff]/50 rounded-bl-md"
+      });
+      const nestedList = createElement("div", { className: "space-y-4" });
+      childSections.forEach((child) => {
+        const childComponent = new _Section(
+          child,
+          this.isSelectedField,
+          this.selectedSectionId,
+          this.allSections,
+          this.depth + 1
+        );
+        nestedList.appendChild(childComponent.getElement());
+      });
+      nestedWrap.appendChild(nestedList);
+      sectionEl.appendChild(nestedWrap);
+    }
     this.initFieldSortable(fieldsGrid);
     return sectionEl;
   }
@@ -9674,7 +9933,6 @@ var Section = class {
       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();
@@ -9718,12 +9976,14 @@ var Section = class {
 
 // src/builder/SectionList.ts
 var SectionList = class {
-  constructor(schema, selectedFieldId) {
+  constructor(schema, selectedFieldId, selectedSectionId) {
     __publicField(this, "container");
     __publicField(this, "schema");
     __publicField(this, "selectedFieldId");
+    __publicField(this, "selectedSectionId");
     this.schema = schema;
     this.selectedFieldId = selectedFieldId;
+    this.selectedSectionId = selectedSectionId;
     this.container = this.render();
   }
   getElement() {
@@ -9746,13 +10006,18 @@ var SectionList = class {
       placeholder.appendChild(createElement("div", { className: "text-sm text-gray-400", text: 'Drag fields from the sidebar or click "Add Section" below.' }));
       listContainer.appendChild(placeholder);
     }
-    const sortedSections = [...this.schema.sections].sort((a, b) => {
+    const rootSections = getRootSections(this.schema.sections).sort((a, b) => {
       const orderA = a.order !== void 0 ? a.order : 0;
       const orderB = b.order !== void 0 ? b.order : 0;
       return orderA - orderB;
     });
-    sortedSections.forEach((section) => {
-      const sectionComponent = new Section(section, (id) => id === this.selectedFieldId);
+    rootSections.forEach((section) => {
+      const sectionComponent = new Section(
+        section,
+        (id) => id === this.selectedFieldId,
+        this.selectedSectionId,
+        this.schema.sections
+      );
       listContainer.appendChild(sectionComponent.getElement());
     });
     this.initSectionSortable(listContainer, hasNoSections);
@@ -10001,7 +10266,17 @@ var FormBuilder = class {
       const schemaHash = JSON.stringify({
         sections: state.schema.sections.map((s) => ({
           id: s.id,
-          // Exclude title - prevents re-renders on section name typing
+          title: s.title,
+          description: s.description,
+          visible: s.visible,
+          position: s.position,
+          expanded: s.expanded,
+          collapsible: s.collapsible,
+          parentGroupId: s.parentGroupId,
+          repeatable: s.repeatable,
+          minInstances: s.minInstances,
+          maxInstances: s.maxInstances,
+          css: s.css,
           fields: s.fields.map((f) => ({
             id: f.id,
             type: f.type,
@@ -10012,6 +10287,7 @@ var FormBuilder = class {
           }))
         })),
         selectedField: state.selectedFieldId,
+        selectedSection: state.selectedSectionId,
         isPreviewMode: state.isPreviewMode
       });
       if (schemaHash !== this.lastRenderedSchemaHash || previewModeChanged) {
@@ -10436,7 +10712,7 @@ var FormBuilder = class {
       }
     });
     inner.appendChild(formNameInput);
-    const sectionList = new SectionList(state.schema, state.selectedFieldId);
+    const sectionList = new SectionList(state.schema, state.selectedFieldId, state.selectedSectionId);
     inner.appendChild(sectionList.getElement());
     const addSectionBtn = createElement("button", {
       className: "w-full mt-6 py-3  dark:border-gray-700 rounded-md text-sm text-gray-500 bg-[#635bff] max-w-[140px]  text-white transition-colors flex items-center justify-center font-medium",
@@ -10472,142 +10748,612 @@ var FormBuilder = class {
     });
     return container;
   }
-  renderConfigPanel(state, focusState = null) {
-    const panel = createElement("div", { className: " dark:bg-gray-900 flex flex-col h-full overflow-y-auto" });
-    const selectedField = state.schema.sections.flatMap((s) => s.fields).find((f) => f.id === state.selectedFieldId);
-    if (!selectedField) {
-      panel.appendChild(createElement("div", { className: "p-4 text-center text-gray-500", text: "Select a field to configure" }));
-      return panel;
+  /**
+   * Shared 1–12 grid span control (Field Settings + Group Settings).
+   */
+  createGridSpanSelector(options) {
+    const layoutGroup = createElement("div", { className: "layout-span-group" });
+    const layoutLabelRow = createElement("div", { className: "flex items-center justify-between mb-2" });
+    layoutLabelRow.appendChild(createElement("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", text: "Grid Span" }));
+    const spanValueDisplay = createElement("span", {
+      className: "span-value-badge px-2 py-0.5 text-xs font-semibold bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200 rounded-full",
+      text: `${options.currentSpan}/12`,
+      id: options.badgeElementId
+    });
+    layoutLabelRow.appendChild(spanValueDisplay);
+    layoutGroup.appendChild(layoutLabelRow);
+    const spanButtonsContainer = createElement("div", { className: "grid grid-cols-6 gap-2 mt-2" });
+    for (let span = 1; span <= 12; span++) {
+      const isActive = options.currentSpan === span;
+      const spanBtn = createElement("button", {
+        type: "button",
+        className: `span-preset-btn px-2 py-1.5 text-xs rounded transition-colors cursor-pointer ${isActive ? "bg-[#e7e7ff] text-[#635bff] font-semibold" : "bg-white border-2 border-[#e7e7ff] dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"}`,
+        text: `${span}`,
+        title: `${span} column${span > 1 ? "s" : ""} (${Math.round(span / 12 * 100)}%)`
+      });
+      spanBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        options.onSelect(span);
+      });
+      spanButtonsContainer.appendChild(spanBtn);
     }
-    const header = createElement("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800" });
-    header.appendChild(createElement("h2", { className: "font-semibold text-gray-900 dark:text-white", text: "Field Settings" }));
-    header.appendChild(createElement("button", {
-      className: "text-gray-500 hover:text-gray-700",
-      onclick: () => formStore.getState().selectField(null)
-    }, [getIcon("X", 20)]));
-    panel.appendChild(header);
-    const body = createElement("div", { className: "flex-1 overflow-y-auto p-4 px-2 space-y-3", id: "config-panel-body" });
-    const labelGroup = createElement("div");
-    labelGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Label" }));
-    labelGroup.appendChild(createElement("input", {
-      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
-      value: selectedField.label,
-      "data-focus-id": `field-label-${selectedField.id}`,
-      oninput: (e) => {
-        const fieldId2 = selectedField.id;
-        const value = e.target.value;
-        const existing = labelUpdateTimeouts.get(fieldId2);
-        if (existing)
-          clearTimeout(existing);
-        const timeoutId = setTimeout(() => {
-          labelUpdateTimeouts.delete(fieldId2);
-          formStore.getState().updateField(fieldId2, { label: value });
-        }, LABEL_DEBOUNCE_MS);
-        labelUpdateTimeouts.set(fieldId2, timeoutId);
+    layoutGroup.appendChild(spanButtonsContainer);
+    return layoutGroup;
+  }
+  /**
+   * Shared Styling block (Padding, Background, Alignment, CSS class, Advanced CSS) — same as Field Settings.
+   */
+  appendSharedStylingSection(body, target, focusState) {
+    const cssHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Styling" });
+    body.appendChild(cssHeader);
+    const getEntity = () => {
+      const st = formStore.getState();
+      if (target.kind === "field") {
+        return st.schema.sections.flatMap((s) => s.fields).find((f) => f.id === target.fieldId);
       }
-    }));
-    body.appendChild(labelGroup);
-    if (selectedField.type === "number") {
-      const valueSourceHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 mt-4", text: "Value Source" });
-      body.appendChild(valueSourceHeader);
-      const valueSourceGroup = createElement("div", { className: "mb-3" });
-      valueSourceGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Source" }));
-      const valueSourceSelect = createElement("select", {
-        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
-        value: selectedField.valueSource || "manual",
-        onchange: (e) => {
-          const source = e.target.value;
-          const updates = { valueSource: source };
-          if (source === "manual") {
-            updates.formula = void 0;
-            updates.dependencies = void 0;
-          } else if (source === "formula") {
-            updates.formula = selectedField.formula || "";
-            updates.dependencies = selectedField.dependencies || [];
-          }
-          formStore.getState().updateField(selectedField.id, updates);
-          this.render();
+      return st.schema.sections.find((s) => s.id === target.sectionId);
+    };
+    const getStyleValue = (prop) => {
+      const ent = getEntity();
+      return ent?.css?.style?.[prop] || "";
+    };
+    const updateStyleProp = (prop, value) => {
+      const ent = getEntity();
+      if (!ent)
+        return;
+      const currentStyle = ent.css?.style || {};
+      const newStyle = { ...currentStyle };
+      if (value) {
+        newStyle[prop] = value;
+      } else {
+        delete newStyle[prop];
+      }
+      const updatePayload = {
+        css: {
+          style: Object.keys(newStyle).length > 0 ? newStyle : void 0
         }
-      });
-      valueSourceSelect.appendChild(createElement("option", { value: "manual", text: "Manual", selected: (selectedField.valueSource || "manual") === "manual" }));
-      valueSourceSelect.appendChild(createElement("option", { value: "formula", text: "Formula", selected: selectedField.valueSource === "formula" }));
-      valueSourceGroup.appendChild(valueSourceSelect);
-      body.appendChild(valueSourceGroup);
-      if (selectedField.valueSource === "formula") {
-        const schema = formStore.getState().schema;
-        const numericFields = getNumericFieldsForFormula(schema, selectedField.id);
-        const availableIds = numericFields.map((f) => f.id);
-        const availableNames = numericFields.map((f) => f.fieldName);
-        const formulaGroup = createElement("div", { className: "mb-3" });
-        formulaGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Formula" }));
-        const formulaInput = createElement("input", {
-          type: "text",
-          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent font-mono text-sm",
-          value: selectedField.formula || "",
-          placeholder: "e.g. quantity * price",
-          "data-focus-id": `field-formula-${selectedField.id}`,
-          oninput: (e) => {
-            const formula = e.target.value.trim();
-            const deps = parseFormulaDependencies(formula);
-            const validation = validateFormula(formula, availableIds, availableNames, selectedField.id);
-            const hasCircular = deps.length > 0 && detectCircularDependency(schema, selectedField.id, formula, deps);
-            const errEl = formulaGroup.querySelector(".formula-error");
-            if (errEl) {
-              if (validation.valid && !hasCircular) {
-                errEl.textContent = "";
-                errEl.classList.add("hidden");
-              } else {
-                errEl.textContent = !validation.valid ? validation.error : "Circular dependency detected";
-                errEl.classList.remove("hidden");
-              }
-            }
-            formStore.getState().updateField(selectedField.id, { formula, dependencies: deps });
-          }
-        });
-        formulaGroup.appendChild(formulaInput);
-        const formulaError = createElement("div", { className: "text-xs text-red-600 dark:text-red-400 mt-1 formula-error hidden" });
-        formulaGroup.appendChild(formulaError);
-        body.appendChild(formulaGroup);
-        const insertGroup = createElement("div", { className: "mb-3" });
-        insertGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Insert Field" }));
-        const insertSelect = createElement("select", {
-          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
-          onchange: (e) => {
-            const sel = e.target;
-            const ref = sel.value;
-            if (!ref)
-              return;
-            const current = selectedField.formula || "";
-            const insert = current ? ` ${ref} ` : ref;
-            const newFormula = current + insert;
-            formStore.getState().updateField(selectedField.id, {
-              formula: newFormula,
-              dependencies: parseFormulaDependencies(newFormula)
-            });
-            formulaInput.value = newFormula;
-            sel.value = "";
-            this.render();
-          }
-        });
-        insertSelect.appendChild(createElement("option", { value: "", text: "Select field to insert...", selected: true }));
-        numericFields.forEach((f) => {
-          const ref = f.fieldName !== f.id ? f.fieldName : f.id;
-          insertSelect.appendChild(createElement("option", { value: ref, text: `${f.label} (${ref})` }));
-        });
-        insertGroup.appendChild(insertSelect);
-        body.appendChild(insertGroup);
-        const hintEl = createElement("p", {
-          className: "text-xs text-gray-500 dark:text-gray-400 mb-2",
-          text: "Use +, -, *, / and parentheses. Reference fields by their name or ID."
-        });
-        body.appendChild(hintEl);
+      };
+      if (target.kind === "field") {
+        formStore.getState().updateField(target.fieldId, updatePayload);
+      } else {
+        formStore.getState().updateSection(target.sectionId, updatePayload);
       }
-    }
-    if (selectedField.type !== "image") {
-      const placeholderGroup = createElement("div");
-      placeholderGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Placeholder" }));
-      placeholderGroup.appendChild(createElement("input", {
-        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+    };
+    const entityId = target.kind === "field" ? target.fieldId : target.sectionId;
+    const paddingGroup = createElement("div", { className: "mb-3" });
+    paddingGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Padding" }));
+    const paddingSelect = createElement("select", {
+      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-sm",
+      onchange: (e) => {
+        updateStyleProp("padding", e.target.value);
+      }
+    });
+    const paddingOptions = [
+      { value: "", label: "None" },
+      { value: "4px", label: "4px - Tight" },
+      { value: "8px", label: "8px - Normal" },
+      { value: "12px", label: "12px - Comfortable" },
+      { value: "16px", label: "16px - Spacious" },
+      { value: "24px", label: "24px - Large" }
+    ];
+    paddingOptions.forEach((opt) => {
+      paddingSelect.appendChild(createElement("option", { value: opt.value, text: opt.label, selected: getStyleValue("padding") === opt.value }));
+    });
+    paddingGroup.appendChild(paddingSelect);
+    body.appendChild(paddingGroup);
+    const bgColorGroup = createElement("div", { className: "mb-3" });
+    bgColorGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Background Color" }));
+    const bgColorRow = createElement("div", { className: "flex items-center gap-2" });
+    const bgColorInput = createElement("input", {
+      type: "color",
+      className: "w-10 h-10 rounded border border-gray-300 cursor-pointer",
+      value: getStyleValue("backgroundColor") || "#ffffff",
+      onchange: (e) => {
+        const color = e.target.value;
+        updateStyleProp("backgroundColor", color === "#ffffff" ? "" : color);
+      }
+    });
+    const bgColorClear = createElement("button", {
+      type: "button",
+      className: "px-2 py-1 text-xs text-gray-600 hover:text-gray-800 border border-gray-300 rounded",
+      text: "Clear",
+      onclick: () => {
+        bgColorInput.value = "#ffffff";
+        updateStyleProp("backgroundColor", "");
+      }
+    });
+    bgColorRow.appendChild(bgColorInput);
+    bgColorRow.appendChild(bgColorClear);
+    bgColorGroup.appendChild(bgColorRow);
+    body.appendChild(bgColorGroup);
+    const alignGroup = createElement("div", { className: "mb-3" });
+    alignGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Text Alignment" }));
+    const alignButtonsRow = createElement("div", { className: "flex gap-1" });
+    const alignments = [
+      { value: "left", icon: "AlignLeft" },
+      { value: "center", icon: "AlignCenter" },
+      { value: "right", icon: "AlignRight" }
+    ];
+    const currentAlign = getStyleValue("textAlign") || "left";
+    alignments.forEach((align) => {
+      const isActive = currentAlign === align.value;
+      const btn = createElement("button", {
+        type: "button",
+        className: `p-2 rounded border ${isActive ? "border-blue-500 bg-blue-50 text-blue-600" : "border-gray-300 text-gray-600 hover:bg-gray-50"}`,
+        title: `Align ${align.value}`,
+        onclick: () => {
+          const newValue = align.value === "left" ? "" : align.value;
+          updateStyleProp("textAlign", newValue);
+        }
+      }, [getIcon(align.icon, 16)]);
+      alignButtonsRow.appendChild(btn);
+    });
+    alignGroup.appendChild(alignButtonsRow);
+    body.appendChild(alignGroup);
+    const cssClassGroup = createElement("div", { className: "mb-3" });
+    cssClassGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Custom CSS Class" }));
+    cssClassGroup.appendChild(createElement("input", {
+      type: "text",
+      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent text-sm",
+      value: getEntity()?.css?.class || "",
+      placeholder: "e.g. my-custom-class",
+      "data-focus-id": `${target.kind}-css-class-${entityId}`,
+      oninput: (e) => {
+        const cssClass = e.target.value;
+        const ent = getEntity();
+        if (!ent)
+          return;
+        if (target.kind === "field") {
+          formStore.getState().updateField(target.fieldId, {
+            css: { class: cssClass || void 0 }
+          });
+        } else {
+          formStore.getState().updateSection(target.sectionId, {
+            css: { class: cssClass || void 0 }
+          });
+        }
+      }
+    }));
+    body.appendChild(cssClassGroup);
+    const isPanelExpanded = advancedCssPanelState.get(entityId) || false;
+    const advancedToggleGroup = createElement("div", { className: "mb-3" });
+    const advancedToggle = createElement("button", {
+      type: "button",
+      className: "text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1",
+      onclick: () => {
+        const advancedPanel2 = document.getElementById(`advanced-css-${entityId}`);
+        if (advancedPanel2) {
+          advancedPanel2.classList.toggle("hidden");
+          const isHidden = advancedPanel2.classList.contains("hidden");
+          advancedToggle.textContent = isHidden ? "\u25B6 Show Advanced CSS" : "\u25BC Hide Advanced CSS";
+          advancedCssPanelState.set(entityId, !isHidden);
+        }
+      }
+    });
+    advancedToggle.textContent = isPanelExpanded ? "\u25BC Hide Advanced CSS" : "\u25B6 Show Advanced CSS";
+    advancedToggleGroup.appendChild(advancedToggle);
+    body.appendChild(advancedToggleGroup);
+    const advancedPanel = createElement("div", {
+      className: isPanelExpanded ? "mb-3" : "mb-3 hidden",
+      id: `advanced-css-${entityId}`
+    });
+    advancedPanel.appendChild(createElement("label", { className: "block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1", text: "Raw CSS Style (JSON)" }));
+    const cssStyleId = `${target.kind}-css-style-${entityId}`;
+    const freshEnt = getEntity();
+    let initialCssStyleValue = freshEnt?.css?.style ? JSON.stringify(freshEnt.css.style, null, 2) : "";
+    const preservedValue = focusState?.id === cssStyleId ? focusState.value : void 0;
+    if (preservedValue !== void 0) {
+      initialCssStyleValue = preservedValue;
+    }
+    const cssStyleTextarea = createElement("textarea", {
+      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent text-xs font-mono",
+      rows: 3,
+      placeholder: '{"padding": "8px", "backgroundColor": "#f0f0f0"}',
+      "data-focus-id": cssStyleId,
+      "data-was-focused": "false",
+      onfocus: (e) => {
+        const textarea = e.target;
+        textarea.setAttribute("data-was-focused", "true");
+        const ent = getEntity();
+        if (!textarea.value.trim() && ent?.css?.style && Object.keys(ent.css.style).length > 0) {
+          textarea.value = JSON.stringify(ent.css.style, null, 2);
+        }
+      },
+      oninput: (e) => {
+        const styleText = e.target.value;
+        const ent = getEntity();
+        if (!ent)
+          return;
+        try {
+          if (styleText.trim()) {
+            const styleObj = JSON.parse(styleText);
+            if (target.kind === "field") {
+              formStore.getState().updateField(target.fieldId, {
+                css: { ...ent.css, style: styleObj }
+              });
+            } else {
+              formStore.getState().updateSection(target.sectionId, {
+                css: { ...ent.css, style: styleObj }
+              });
+            }
+          }
+        } catch {
+        }
+      },
+      onblur: (e) => {
+        const textarea = e.target;
+        const styleText = textarea.value;
+        const wasFocused = textarea.getAttribute("data-was-focused") === "true";
+        if (!wasFocused)
+          return;
+        textarea.setAttribute("data-was-focused", "false");
+        setTimeout(() => {
+          if (!document.body.contains(textarea))
+            return;
+          const advPanel = document.getElementById(`advanced-css-${entityId}`);
+          const isPanelVisible = advPanel && !advPanel.classList.contains("hidden");
+          if (!isPanelVisible)
+            return;
+          const ent = getEntity();
+          if (!ent)
+            return;
+          try {
+            if (styleText.trim()) {
+              const styleObj = JSON.parse(styleText);
+              if (target.kind === "field") {
+                formStore.getState().updateField(target.fieldId, {
+                  css: { ...ent.css, style: styleObj }
+                });
+              } else {
+                formStore.getState().updateSection(target.sectionId, {
+                  css: { ...ent.css, style: styleObj }
+                });
+              }
+            } else if (ent.css?.style && Object.keys(ent.css.style).length > 0) {
+              textarea.value = JSON.stringify(ent.css.style, null, 2);
+            } else {
+              if (target.kind === "field") {
+                formStore.getState().updateField(target.fieldId, {
+                  css: { ...ent.css, style: void 0 }
+                });
+              } else {
+                formStore.getState().updateSection(target.sectionId, {
+                  css: { ...ent.css, style: void 0 }
+                });
+              }
+            }
+          } catch {
+            if (ent.css?.style) {
+              textarea.value = JSON.stringify(ent.css.style, null, 2);
+            }
+          }
+        }, 0);
+      }
+    });
+    cssStyleTextarea.value = initialCssStyleValue;
+    advancedPanel.appendChild(cssStyleTextarea);
+    body.appendChild(advancedPanel);
+  }
+  renderGroupSettingsPanel(section, allSections, focusState) {
+    const panel = createElement("div", { className: " dark:bg-gray-900 flex flex-col h-full overflow-y-auto" });
+    const header = createElement("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800" });
+    header.appendChild(createElement("h2", { className: "font-semibold text-gray-900 dark:text-white", text: "Group Settings" }));
+    header.appendChild(createElement("button", {
+      className: "text-gray-500 hover:text-gray-700",
+      onclick: () => formStore.getState().selectSection(null)
+    }, [getIcon("X", 20)]));
+    panel.appendChild(header);
+    const body = createElement("div", { className: "flex-1 overflow-y-auto p-4 px-2 space-y-3", id: "config-panel-body" });
+    const sectionId = section.id;
+    const sectionHeading = (text) => createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-2", text });
+    body.appendChild(sectionHeading("Basic"));
+    const labelGroup = createElement("div");
+    labelGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Group Label" }));
+    labelGroup.appendChild(createElement("input", {
+      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+      value: section.name ?? section.title,
+      "data-focus-id": `group-label-${sectionId}`,
+      oninput: (e) => {
+        const v = e.target.value;
+        const existing = labelUpdateTimeouts.get(`group-${sectionId}`);
+        if (existing)
+          clearTimeout(existing);
+        const timeoutId = setTimeout(() => {
+          labelUpdateTimeouts.delete(`group-${sectionId}`);
+          formStore.getState().updateSection(sectionId, { title: v, name: v });
+        }, LABEL_DEBOUNCE_MS);
+        labelUpdateTimeouts.set(`group-${sectionId}`, timeoutId);
+      }
+    }));
+    body.appendChild(labelGroup);
+    const descGroup = createElement("div");
+    descGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Description" }));
+    descGroup.appendChild(createElement("input", {
+      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+      value: section.description ?? "",
+      placeholder: "Optional",
+      "data-focus-id": `group-desc-${sectionId}`,
+      oninput: (e) => {
+        const v = e.target.value;
+        formStore.getState().updateSection(sectionId, { description: v || null });
+      }
+    }));
+    body.appendChild(descGroup);
+    body.appendChild(sectionHeading("Layout"));
+    const order = section.order ?? 0;
+    const pos = section.position ?? { width: 12};
+    const currentWidth = Math.max(1, Math.min(12, pos.width ?? 12));
+    body.appendChild(
+      this.createGridSpanSelector({
+        currentSpan: currentWidth,
+        badgeElementId: `group-span-badge-${sectionId}`,
+        onSelect: (span) => {
+          const st = formStore.getState().schema.sections.find((s) => s.id === sectionId);
+          if (!st)
+            return;
+          const p = st.position ?? { row: order, column: 0, width: 12, order: st.order ?? order };
+          formStore.getState().updateSection(sectionId, {
+            position: { ...p, width: span, order: p.order ?? st.order ?? order }
+          });
+        }
+      })
+    );
+    body.appendChild(sectionHeading("Fields in group"));
+    const fieldRows = createElement("div", { className: "rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/40 p-2 space-y-1 text-sm text-gray-700 dark:text-gray-300" });
+    if (section.fields.length === 0) {
+      fieldRows.appendChild(createElement("div", { className: "text-gray-400 italic text-xs py-1", text: "No fields added yet" }));
+    } else {
+      section.fields.forEach((f) => {
+        const display = f.displayName || f.label || f.id;
+        fieldRows.appendChild(createElement("div", { className: "truncate", text: display }));
+      });
+    }
+    body.appendChild(fieldRows);
+    body.appendChild(sectionHeading("Display options"));
+    body.appendChild(
+      this.createCheckboxField(
+        "Visible",
+        section.visible !== false,
+        (checked) => formStore.getState().updateSection(sectionId, { visible: checked }),
+        `group-visible-${sectionId}`
+      )
+    );
+    body.appendChild(
+      this.createCheckboxField(
+        "Show side/down arrow to expand/collapse",
+        section.collapsible !== false,
+        (checked) => formStore.getState().updateSection(sectionId, { collapsible: checked }),
+        `group-collapsible-${sectionId}`
+      )
+    );
+    body.appendChild(sectionHeading("Parent group"));
+    const parentGroup = createElement("div", { className: "mb-2" });
+    parentGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Parent Group" }));
+    const parentSelect = createElement("select", {
+      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+      value: section.parentGroupId || "",
+      onchange: (e) => {
+        const v = e.target.value;
+        const selfId = sectionId;
+        if (!v || v === selfId) {
+          formStore.getState().updateSection(selfId, { parentGroupId: null });
+        } else {
+          formStore.getState().updateSection(selfId, { parentGroupId: v });
+        }
+      }
+    });
+    parentSelect.appendChild(createElement("option", { value: "", text: "None", selected: !section.parentGroupId }));
+    const validParentIds = new Set(getValidParentSectionIds(allSections, sectionId));
+    allSections.forEach((g) => {
+      if (!validParentIds.has(g.id))
+        return;
+      const label = g.name ?? g.title;
+      parentSelect.appendChild(
+        createElement("option", {
+          value: g.id,
+          text: label,
+          selected: section.parentGroupId === g.id
+        })
+      );
+    });
+    parentGroup.appendChild(parentSelect);
+    body.appendChild(parentGroup);
+    body.appendChild(sectionHeading("Repeatable group"));
+    body.appendChild(
+      this.createCheckboxField(
+        "Allow multiple instances",
+        section.repeatable === true,
+        (checked) => formStore.getState().updateSection(sectionId, { repeatable: checked }),
+        `group-repeatable-${sectionId}`
+      )
+    );
+    if (section.repeatable === true) {
+      const minG = createElement("div", { className: "mb-2" });
+      minG.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Min Instances" }));
+      minG.appendChild(createElement("input", {
+        type: "number",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+        value: section.minInstances != null ? String(section.minInstances) : "",
+        placeholder: "e.g. 1",
+        "data-focus-id": `group-min-inst-${sectionId}`,
+        oninput: (e) => {
+          const raw = e.target.value;
+          if (raw === "") {
+            formStore.getState().updateSection(sectionId, { minInstances: null });
+            return;
+          }
+          const n = parseInt(raw, 10);
+          formStore.getState().updateSection(sectionId, { minInstances: isNaN(n) ? null : n });
+        }
+      }));
+      body.appendChild(minG);
+      const maxG = createElement("div", { className: "mb-2" });
+      maxG.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Max Instances" }));
+      maxG.appendChild(createElement("input", {
+        type: "number",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+        value: section.maxInstances != null ? String(section.maxInstances) : "",
+        placeholder: "Unlimited",
+        "data-focus-id": `group-max-inst-${sectionId}`,
+        oninput: (e) => {
+          const raw = e.target.value;
+          if (raw === "") {
+            formStore.getState().updateSection(sectionId, { maxInstances: null });
+            return;
+          }
+          const n = parseInt(raw, 10);
+          formStore.getState().updateSection(sectionId, { maxInstances: isNaN(n) ? null : n });
+        }
+      }));
+      body.appendChild(maxG);
+    }
+    this.appendSharedStylingSection(body, { kind: "section", sectionId }, focusState);
+    panel.appendChild(body);
+    return panel;
+  }
+  renderConfigPanel(state, focusState = null) {
+    const panel = createElement("div", { className: " dark:bg-gray-900 flex flex-col h-full overflow-y-auto" });
+    if (state.selectedSectionId) {
+      const selectedSection = state.schema.sections.find((s) => s.id === state.selectedSectionId);
+      if (selectedSection) {
+        return this.renderGroupSettingsPanel(selectedSection, state.schema.sections, focusState);
+      }
+    }
+    const selectedField = state.schema.sections.flatMap((s) => s.fields).find((f) => f.id === state.selectedFieldId);
+    if (!selectedField) {
+      panel.appendChild(createElement("div", { className: "p-4 text-center text-gray-500", text: "Select a field or section to configure" }));
+      return panel;
+    }
+    const header = createElement("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800" });
+    header.appendChild(createElement("h2", { className: "font-semibold text-gray-900 dark:text-white", text: "Field Settings" }));
+    header.appendChild(createElement("button", {
+      className: "text-gray-500 hover:text-gray-700",
+      onclick: () => formStore.getState().selectField(null)
+    }, [getIcon("X", 20)]));
+    panel.appendChild(header);
+    const body = createElement("div", { className: "flex-1 overflow-y-auto p-4 px-2 space-y-3", id: "config-panel-body" });
+    const labelGroup = createElement("div");
+    labelGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Label" }));
+    labelGroup.appendChild(createElement("input", {
+      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+      value: selectedField.label,
+      "data-focus-id": `field-label-${selectedField.id}`,
+      oninput: (e) => {
+        const fieldId2 = selectedField.id;
+        const value = e.target.value;
+        const existing = labelUpdateTimeouts.get(fieldId2);
+        if (existing)
+          clearTimeout(existing);
+        const timeoutId = setTimeout(() => {
+          labelUpdateTimeouts.delete(fieldId2);
+          formStore.getState().updateField(fieldId2, { label: value });
+        }, LABEL_DEBOUNCE_MS);
+        labelUpdateTimeouts.set(fieldId2, timeoutId);
+      }
+    }));
+    body.appendChild(labelGroup);
+    if (selectedField.type === "number") {
+      const valueSourceHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 mt-4", text: "Value Source" });
+      body.appendChild(valueSourceHeader);
+      const valueSourceGroup = createElement("div", { className: "mb-3" });
+      valueSourceGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Source" }));
+      const valueSourceSelect = createElement("select", {
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+        value: selectedField.valueSource || "manual",
+        onchange: (e) => {
+          const source = e.target.value;
+          const updates = { valueSource: source };
+          if (source === "manual") {
+            updates.formula = void 0;
+            updates.dependencies = void 0;
+          } else if (source === "formula") {
+            updates.formula = selectedField.formula || "";
+            updates.dependencies = selectedField.dependencies || [];
+          }
+          formStore.getState().updateField(selectedField.id, updates);
+          this.render();
+        }
+      });
+      valueSourceSelect.appendChild(createElement("option", { value: "manual", text: "Manual", selected: (selectedField.valueSource || "manual") === "manual" }));
+      valueSourceSelect.appendChild(createElement("option", { value: "formula", text: "Formula", selected: selectedField.valueSource === "formula" }));
+      valueSourceGroup.appendChild(valueSourceSelect);
+      body.appendChild(valueSourceGroup);
+      if (selectedField.valueSource === "formula") {
+        const schema = formStore.getState().schema;
+        const numericFields = getNumericFieldsForFormula(schema, selectedField.id);
+        const availableIds = numericFields.map((f) => f.id);
+        const availableNames = numericFields.map((f) => f.fieldName);
+        const formulaGroup = createElement("div", { className: "mb-3" });
+        formulaGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Formula" }));
+        const formulaInput = createElement("input", {
+          type: "text",
+          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent font-mono text-sm",
+          value: selectedField.formula || "",
+          placeholder: "e.g. quantity * price",
+          "data-focus-id": `field-formula-${selectedField.id}`,
+          oninput: (e) => {
+            const formula = e.target.value.trim();
+            const deps = parseFormulaDependencies(formula);
+            const validation = validateFormula(formula, availableIds, availableNames, selectedField.id);
+            const hasCircular = deps.length > 0 && detectCircularDependency(schema, selectedField.id, formula, deps);
+            const errEl = formulaGroup.querySelector(".formula-error");
+            if (errEl) {
+              if (validation.valid && !hasCircular) {
+                errEl.textContent = "";
+                errEl.classList.add("hidden");
+              } else {
+                errEl.textContent = !validation.valid ? validation.error : "Circular dependency detected";
+                errEl.classList.remove("hidden");
+              }
+            }
+            formStore.getState().updateField(selectedField.id, { formula, dependencies: deps });
+          }
+        });
+        formulaGroup.appendChild(formulaInput);
+        const formulaError = createElement("div", { className: "text-xs text-red-600 dark:text-red-400 mt-1 formula-error hidden" });
+        formulaGroup.appendChild(formulaError);
+        body.appendChild(formulaGroup);
+        const insertGroup = createElement("div", { className: "mb-3" });
+        insertGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Insert Field" }));
+        const insertSelect = createElement("select", {
+          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+          onchange: (e) => {
+            const sel = e.target;
+            const ref = sel.value;
+            if (!ref)
+              return;
+            const current = selectedField.formula || "";
+            const insert = current ? ` ${ref} ` : ref;
+            const newFormula = current + insert;
+            formStore.getState().updateField(selectedField.id, {
+              formula: newFormula,
+              dependencies: parseFormulaDependencies(newFormula)
+            });
+            formulaInput.value = newFormula;
+            sel.value = "";
+            this.render();
+          }
+        });
+        insertSelect.appendChild(createElement("option", { value: "", text: "Select field to insert...", selected: true }));
+        numericFields.forEach((f) => {
+          const ref = f.fieldName !== f.id ? f.fieldName : f.id;
+          insertSelect.appendChild(createElement("option", { value: ref, text: `${f.label} (${ref})` }));
+        });
+        insertGroup.appendChild(insertSelect);
+        body.appendChild(insertGroup);
+        const hintEl = createElement("p", {
+          className: "text-xs text-gray-500 dark:text-gray-400 mb-2",
+          text: "Use +, -, *, / and parentheses. Reference fields by their name or ID."
+        });
+        body.appendChild(hintEl);
+      }
+    }
+    if (selectedField.type !== "image") {
+      const placeholderGroup = createElement("div");
+      placeholderGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Placeholder" }));
+      placeholderGroup.appendChild(createElement("input", {
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
         value: selectedField.placeholder || "",
         "data-focus-id": `field-placeholder-${selectedField.id}`,
         oninput: (e) => {
@@ -10679,48 +11425,25 @@ var FormBuilder = class {
       imageGroup.appendChild(btnRow);
       body.appendChild(imageGroup);
     }
-    const layoutGroup = createElement("div", { className: "layout-span-group" });
-    const layoutLabelRow = createElement("div", { className: "flex items-center justify-between mb-2" });
-    layoutLabelRow.appendChild(createElement("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", text: "Grid Span" }));
     const currentSpan = selectedField.layout?.span !== void 0 ? selectedField.layout.span : Math.max(1, Math.min(12, Math.round(parseWidth(selectedField.width || "100%") / 100 * 12)));
-    const spanValueDisplay = createElement("span", {
-      className: "span-value-badge px-2 py-0.5 text-xs font-semibold bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200 rounded-full",
-      text: `${currentSpan}/12`,
-      id: `span-value-${selectedField.id}`
-      // const widthValueDisplay = createElement('span', {
-      //     className: 'width-value-badge px-2 py-0.5 text-xs font-semibold bg-[#019FA2] text-white dark:bg-blue-900 dark:text-blue-200 rounded-full',
-      //     text: `${currentWidth}%`,
-      //     id: `width-value-${selectedField.id}`
-    });
-    layoutLabelRow.appendChild(spanValueDisplay);
-    layoutGroup.appendChild(layoutLabelRow);
-    const spanButtonsContainer = createElement("div", { className: "grid grid-cols-6 gap-2 mt-2" });
     const fieldId = selectedField.id;
-    for (let span = 1; span <= 12; span++) {
-      const isActive = currentSpan === span;
-      const spanBtn = createElement("button", {
-        type: "button",
-        className: `span-preset-btn px-2 py-1.5 text-xs rounded transition-colors cursor-pointer ${isActive ? "bg-[#e7e7ff] text-[#635bff] font-semibold" : "bg-white border-2 border-[#e7e7ff] dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"}`,
-        text: `${span}`,
-        title: `${span} column${span > 1 ? "s" : ""} (${Math.round(span / 12 * 100)}%)`
-      });
-      spanBtn.addEventListener("click", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const state2 = formStore.getState();
-        const field = state2.schema.sections.flatMap((s) => s.fields).find((f) => f.id === fieldId);
-        if (field) {
-          const layout = field.layout || { row: 0, column: 0 };
-          state2.updateField(fieldId, {
-            layout: { ...layout, span },
-            width: Math.round(span / 12 * 100)
-          });
+    body.appendChild(
+      this.createGridSpanSelector({
+        currentSpan,
+        badgeElementId: `span-value-${fieldId}`,
+        onSelect: (span) => {
+          const st = formStore.getState();
+          const field = st.schema.sections.flatMap((s) => s.fields).find((f) => f.id === fieldId);
+          if (field) {
+            const layout = field.layout || { row: 0, column: 0 };
+            st.updateField(fieldId, {
+              layout: { ...layout, span },
+              width: Math.round(span / 12 * 100)
+            });
+          }
         }
-      });
-      spanButtonsContainer.appendChild(spanBtn);
-    }
-    layoutGroup.appendChild(spanButtonsContainer);
-    body.appendChild(layoutGroup);
+      })
+    );
     body.appendChild(this.createCheckboxField(
       "Required",
       !!selectedField.required || !!selectedField.validations?.required,
@@ -10818,9 +11541,9 @@ var FormBuilder = class {
         oninput: (e) => formStore.getState().updateField(selectedField.id, { nameGeneratorSuffix: e.target.value })
       }));
       body.appendChild(suffixGroup);
-      const paddingGroup2 = createElement("div", { className: "mb-3" });
-      paddingGroup2.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "ID Padding" }));
-      paddingGroup2.appendChild(createElement("input", {
+      const paddingGroup = createElement("div", { className: "mb-3" });
+      paddingGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "ID Padding" }));
+      paddingGroup.appendChild(createElement("input", {
         type: "number",
         className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
         value: String(selectedField.nameGeneratorIdPadding ?? 4),
@@ -10832,7 +11555,7 @@ var FormBuilder = class {
           formStore.getState().updateField(selectedField.id, { nameGeneratorIdPadding: isNaN(val) ? 4 : Math.max(1, Math.min(10, val)) });
         }
       }));
-      body.appendChild(paddingGroup2);
+      body.appendChild(paddingGroup);
     }
     if (selectedField.type === "binary_choice") {
       const bcHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Yes/No Toggle Settings" });
@@ -12046,234 +12769,7 @@ var FormBuilder = class {
         }
       }
     }
-    const cssHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Styling" });
-    body.appendChild(cssHeader);
-    const getStyleValue = (prop) => selectedField.css?.style?.[prop] || "";
-    const updateStyleProp = (prop, value) => {
-      const state2 = formStore.getState();
-      const freshField = state2.schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id);
-      if (!freshField) {
-        return;
-      }
-      const currentStyle = freshField.css?.style || {};
-      const newStyle = { ...currentStyle };
-      if (value) {
-        newStyle[prop] = value;
-      } else {
-        delete newStyle[prop];
-      }
-      const updatePayload = {
-        css: {
-          style: Object.keys(newStyle).length > 0 ? newStyle : void 0
-          // Do NOT spread freshField.css here - let updateField preserve class
-        }
-      };
-      state2.updateField(selectedField.id, updatePayload);
-    };
-    const paddingGroup = createElement("div", { className: "mb-3" });
-    paddingGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Padding" }));
-    const paddingSelect = createElement("select", {
-      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-sm",
-      onchange: (e) => {
-        updateStyleProp("padding", e.target.value);
-      }
-    });
-    const paddingOptions = [
-      { value: "", label: "None" },
-      { value: "4px", label: "4px - Tight" },
-      { value: "8px", label: "8px - Normal" },
-      { value: "12px", label: "12px - Comfortable" },
-      { value: "16px", label: "16px - Spacious" },
-      { value: "24px", label: "24px - Large" }
-    ];
-    paddingOptions.forEach((opt) => {
-      paddingSelect.appendChild(createElement("option", { value: opt.value, text: opt.label, selected: getStyleValue("padding") === opt.value }));
-    });
-    paddingGroup.appendChild(paddingSelect);
-    body.appendChild(paddingGroup);
-    const bgColorGroup = createElement("div", { className: "mb-3" });
-    bgColorGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Background Color" }));
-    const bgColorRow = createElement("div", { className: "flex items-center gap-2" });
-    const bgColorInput = createElement("input", {
-      type: "color",
-      className: "w-10 h-10 rounded border border-gray-300 cursor-pointer",
-      value: getStyleValue("backgroundColor") || "#ffffff",
-      onchange: (e) => {
-        const color = e.target.value;
-        updateStyleProp("backgroundColor", color === "#ffffff" ? "" : color);
-      }
-    });
-    const bgColorClear = createElement("button", {
-      type: "button",
-      className: "px-2 py-1 text-xs text-gray-600 hover:text-gray-800 border border-gray-300 rounded",
-      text: "Clear",
-      onclick: () => {
-        bgColorInput.value = "#ffffff";
-        updateStyleProp("backgroundColor", "");
-      }
-    });
-    bgColorRow.appendChild(bgColorInput);
-    bgColorRow.appendChild(bgColorClear);
-    bgColorGroup.appendChild(bgColorRow);
-    body.appendChild(bgColorGroup);
-    const alignGroup = createElement("div", { className: "mb-3" });
-    alignGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Text Alignment" }));
-    const alignButtonsRow = createElement("div", { className: "flex gap-1" });
-    const alignments = [
-      { value: "left", icon: "AlignLeft" },
-      { value: "center", icon: "AlignCenter" },
-      { value: "right", icon: "AlignRight" }
-    ];
-    const currentAlign = getStyleValue("textAlign") || "left";
-    alignments.forEach((align) => {
-      const isActive = currentAlign === align.value;
-      const btn = createElement("button", {
-        type: "button",
-        className: `p-2 rounded border ${isActive ? "border-blue-500 bg-blue-50 text-blue-600" : "border-gray-300 text-gray-600 hover:bg-gray-50"}`,
-        title: `Align ${align.value}`,
-        onclick: () => {
-          const newValue = align.value === "left" ? "" : align.value;
-          updateStyleProp("textAlign", newValue);
-        }
-      }, [getIcon(align.icon, 16)]);
-      alignButtonsRow.appendChild(btn);
-    });
-    alignGroup.appendChild(alignButtonsRow);
-    body.appendChild(alignGroup);
-    const cssClassGroup = createElement("div", { className: "mb-3" });
-    cssClassGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Custom CSS Class" }));
-    cssClassGroup.appendChild(createElement("input", {
-      type: "text",
-      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent text-sm",
-      value: selectedField.css?.class || "",
-      placeholder: "e.g. my-custom-class",
-      "data-focus-id": `field-css-class-${selectedField.id}`,
-      oninput: (e) => {
-        const cssClass = e.target.value;
-        const state2 = formStore.getState();
-        const freshField = state2.schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id);
-        if (!freshField)
-          return;
-        state2.updateField(selectedField.id, {
-          css: {
-            class: cssClass || void 0
-            // Do NOT spread freshField.css here - let updateField preserve style
-          }
-        });
-      }
-    }));
-    body.appendChild(cssClassGroup);
-    const isPanelExpanded = advancedCssPanelState.get(selectedField.id) || false;
-    const advancedToggleGroup = createElement("div", { className: "mb-3" });
-    const advancedToggle = createElement("button", {
-      type: "button",
-      className: "text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1",
-      onclick: () => {
-        const advancedPanel2 = document.getElementById(`advanced-css-${selectedField.id}`);
-        if (advancedPanel2) {
-          advancedPanel2.classList.toggle("hidden");
-          const isHidden = advancedPanel2.classList.contains("hidden");
-          advancedToggle.textContent = isHidden ? "\u25B6 Show Advanced CSS" : "\u25BC Hide Advanced CSS";
-          advancedCssPanelState.set(selectedField.id, !isHidden);
-        }
-      }
-    });
-    advancedToggle.textContent = isPanelExpanded ? "\u25BC Hide Advanced CSS" : "\u25B6 Show Advanced CSS";
-    advancedToggleGroup.appendChild(advancedToggle);
-    body.appendChild(advancedToggleGroup);
-    const advancedPanel = createElement("div", {
-      className: isPanelExpanded ? "mb-3" : "mb-3 hidden",
-      id: `advanced-css-${selectedField.id}`
-    });
-    advancedPanel.appendChild(createElement("label", { className: "block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1", text: "Raw CSS Style (JSON)" }));
-    const cssStyleId = `field-css-style-${selectedField.id}`;
-    const freshState = formStore.getState();
-    const freshFieldForInit = freshState.schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id);
-    const fieldForCssStyle = freshFieldForInit || selectedField;
-    let initialCssStyleValue = fieldForCssStyle.css?.style ? JSON.stringify(fieldForCssStyle.css.style, null, 2) : "";
-    const preservedValue = focusState?.id === cssStyleId ? focusState.value : void 0;
-    if (preservedValue !== void 0) {
-      initialCssStyleValue = preservedValue;
-    }
-    const cssStyleTextarea = createElement("textarea", {
-      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent text-xs font-mono",
-      rows: 3,
-      placeholder: '{"padding": "8px", "backgroundColor": "#f0f0f0"}',
-      "data-focus-id": cssStyleId,
-      "data-was-focused": "false",
-      onfocus: (e) => {
-        const textarea = e.target;
-        textarea.setAttribute("data-was-focused", "true");
-        const state2 = formStore.getState();
-        const freshField = state2.schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id);
-        if (!textarea.value.trim() && freshField?.css?.style && Object.keys(freshField.css.style).length > 0) {
-          const styleString = JSON.stringify(freshField.css.style, null, 2);
-          textarea.value = styleString;
-        }
-      },
-      oninput: (e) => {
-        const styleText = e.target.value;
-        const state2 = formStore.getState();
-        const freshField = state2.schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id);
-        if (!freshField)
-          return;
-        try {
-          if (styleText.trim()) {
-            const styleObj = JSON.parse(styleText);
-            state2.updateField(selectedField.id, {
-              css: { ...freshField.css, style: styleObj }
-            });
-          }
-        } catch (err) {
-        }
-      },
-      onblur: (e) => {
-        const textarea = e.target;
-        const styleText = textarea.value;
-        const wasFocused = textarea.getAttribute("data-was-focused") === "true";
-        if (!wasFocused) {
-          return;
-        }
-        textarea.setAttribute("data-was-focused", "false");
-        setTimeout(() => {
-          if (!document.body.contains(textarea)) {
-            return;
-          }
-          const advPanel = document.getElementById(`advanced-css-${selectedField.id}`);
-          const isPanelVisible = advPanel && !advPanel.classList.contains("hidden");
-          if (!isPanelVisible) {
-            return;
-          }
-          const state2 = formStore.getState();
-          const freshField = state2.schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id);
-          if (!freshField)
-            return;
-          try {
-            if (styleText.trim()) {
-              const styleObj = JSON.parse(styleText);
-              state2.updateField(selectedField.id, {
-                css: { ...freshField.css, style: styleObj }
-              });
-            } else {
-              if (freshField.css?.style && Object.keys(freshField.css.style).length > 0) {
-                textarea.value = JSON.stringify(freshField.css.style, null, 2);
-              } else {
-                state2.updateField(selectedField.id, {
-                  css: { ...freshField.css, style: void 0 }
-                });
-              }
-            }
-          } catch (err) {
-            if (freshField.css?.style) {
-              textarea.value = JSON.stringify(freshField.css.style, null, 2);
-            }
-          }
-        }, 0);
-      }
-    });
-    cssStyleTextarea.value = initialCssStyleValue;
-    advancedPanel.appendChild(cssStyleTextarea);
-    body.appendChild(advancedPanel);
+    this.appendSharedStylingSection(body, { kind: "field", fieldId: selectedField.id }, focusState);
     panel.appendChild(body);
     return panel;
   }