form-builder-pro 1.2.4 → 1.2.6

package/dist/index.d.mts

@@ -262,6 +262,7 @@ declare class FormBuilder {
     private unsubscribe;
     private options;
     private lastRenderedSchemaHash;
+    private pendingRenderId;
     constructor(container: HTMLElement, options?: FormBuilderOptions);
     loadForm(json: FormSchema): void;
     cloneForm(json: FormSchema): void;

package/dist/index.d.ts

@@ -262,6 +262,7 @@ declare class FormBuilder {
     private unsubscribe;
     private options;
     private lastRenderedSchemaHash;
+    private pendingRenderId;
     constructor(container: HTMLElement, options?: FormBuilderOptions);
     loadForm(json: FormSchema): void;
     cloneForm(json: FormSchema): void;

package/dist/index.js

@@ -8620,13 +8620,17 @@ var SectionList = class {
 
 // src/builder/FormBuilder.ts
 var advancedCssPanelState = /* @__PURE__ */ new Map();
+var LABEL_DEBOUNCE_MS = 300;
+var labelUpdateTimeouts = /* @__PURE__ */ new Map();
 var FormBuilder = class {
-  // Cache to detect meaningful changes
+  // For requestAnimationFrame debouncing
   constructor(container, options = {}) {
     __publicField(this, "container");
     __publicField(this, "unsubscribe");
     __publicField(this, "options");
     __publicField(this, "lastRenderedSchemaHash", "");
+    // Cache to detect meaningful changes
+    __publicField(this, "pendingRenderId", null);
     __publicField(this, "activeTab", "fields");
     if (!container) {
       throw new Error("Builder container not found. Please ensure the container element exists before initializing FormBuilder.");
@@ -8784,14 +8788,15 @@ var FormBuilder = class {
   }
   setupSubscriptions() {
     let lastPreviewMode = null;
-    this.unsubscribe = formStore.subscribe(() => {
+    const performRender = () => {
+      this.pendingRenderId = null;
       const state = formStore.getState();
       const previewModeChanged = lastPreviewMode !== null && lastPreviewMode !== state.isPreviewMode;
       lastPreviewMode = state.isPreviewMode;
       const schemaHash = JSON.stringify({
         sections: state.schema.sections.map((s) => ({
           id: s.id,
-          title: s.title,
+          // Exclude title - prevents re-renders on section name typing
           fields: s.fields.map((f) => ({
             id: f.id,
             type: f.type,
@@ -8799,21 +8804,29 @@ var FormBuilder = class {
             layout: f.layout,
             width: f.width,
             css: f.css
-            // Include css so style changes (textAlign, backgroundColor, etc.) trigger re-render
-            // Exclude frequently changing text (placeholder, etc.) to prevent re-renders on typing
           }))
         })),
         selectedField: state.selectedFieldId,
         isPreviewMode: state.isPreviewMode
-        // Include preview mode in hash
       });
       if (schemaHash !== this.lastRenderedSchemaHash || previewModeChanged) {
         this.lastRenderedSchemaHash = schemaHash;
         this.render();
       }
+    };
+    this.unsubscribe = formStore.subscribe(() => {
+      if (this.pendingRenderId == null) {
+        this.pendingRenderId = requestAnimationFrame(() => performRender.call(this));
+      }
     });
   }
   destroy() {
+    if (this.pendingRenderId != null) {
+      cancelAnimationFrame(this.pendingRenderId);
+      this.pendingRenderId = null;
+    }
+    labelUpdateTimeouts.forEach((id) => clearTimeout(id));
+    labelUpdateTimeouts.clear();
     this.unsubscribe();
     this.container.innerHTML = "";
   }
@@ -9245,7 +9258,16 @@ var FormBuilder = class {
       value: selectedField.label,
       "data-focus-id": `field-label-${selectedField.id}`,
       oninput: (e) => {
-        formStore.getState().updateField(selectedField.id, { label: e.target.value });
+        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);