@squaredr/fieldcraft-pro 1.8.0 → 1.9.1

package/dist/{chunk-GXKQCXIB.mjs → chunk-DWRLPGX5.mjs}

@@ -15,21 +15,20 @@ var MAX_HISTORY = 50;
 function useUndoRedo(currentSchema, setSchema) {
   const historyRef = useRef([currentSchema]);
   const [currentIndex, setCurrentIndex] = useState(0);
-  const currentIndexRef = useRef(currentIndex);
-  currentIndexRef.current = currentIndex;
   const canUndo = currentIndex > 0;
   const canRedo = currentIndex < historyRef.current.length - 1;
   const push = useCallback(
     (schema) => {
-      const idx = currentIndexRef.current;
-      historyRef.current = historyRef.current.slice(0, idx + 1);
-      historyRef.current.push(schema);
-      if (historyRef.current.length > MAX_HISTORY) {
-        historyRef.current.shift();
-        setCurrentIndex(historyRef.current.length - 1);
-      } else {
-        setCurrentIndex(idx + 1);
-      }
+      setCurrentIndex((prevIndex) => {
+        historyRef.current = historyRef.current.slice(0, prevIndex + 1);
+        historyRef.current.push(schema);
+        let newIndex = prevIndex + 1;
+        if (historyRef.current.length > MAX_HISTORY) {
+          historyRef.current.shift();
+          newIndex = Math.max(0, newIndex - 1);
+        }
+        return newIndex;
+      });
     },
     []
   );
@@ -62,13 +61,9 @@ function useUndoRedo(currentSchema, setSchema) {
 }
 
 // src/form-builder/utils/id-generator.ts
-var counter = 0;
 function generateId(prefix) {
-  const timestamp = Date.now().toString(36);
-  const random = Math.random().toString(36).substring(2, 7);
-  counter = (counter + 1) % 1e4;
-  const count = counter.toString(36);
-  return `${prefix}_${timestamp}${count}${random}`;
+  const uuid = crypto.randomUUID().replace(/-/g, "").substring(0, 12);
+  return `${prefix}_${uuid}`;
 }
 function generateSectionId() {
   return generateId("section");
@@ -155,18 +150,39 @@ function duplicateSection(schema, sectionId) {
   const sectionIndex = newSchema.sections.findIndex((s) => s.id === sectionId);
   if (sectionIndex === -1) return schema;
   const original = newSchema.sections[sectionIndex];
+  const idMap = /* @__PURE__ */ new Map();
+  for (const q of original.questions) {
+    idMap.set(q.id, generateQuestionId());
+  }
   const duplicate = {
     ...original,
     id: generateSectionId(),
     title: `${original.title} (Copy)`,
+    showIf: original.showIf ? remapConditionFieldIds(original.showIf, idMap) : void 0,
     questions: original.questions.map((q) => ({
       ...q,
-      id: generateQuestionId()
+      id: idMap.get(q.id),
+      showIf: q.showIf ? remapConditionFieldIds(q.showIf, idMap) : void 0
     }))
   };
   newSchema.sections.splice(sectionIndex + 1, 0, duplicate);
   return newSchema;
 }
+function remapConditionFieldIds(expr, idMap) {
+  if (expr.field) {
+    return {
+      ...expr,
+      field: idMap.get(expr.field) ?? expr.field
+    };
+  }
+  if (expr.conditions) {
+    return {
+      ...expr,
+      conditions: expr.conditions.map((c) => remapConditionFieldIds(c, idMap))
+    };
+  }
+  return expr;
+}
 function addQuestion(schema, sectionId, question, index) {
   const newSchema = deepClone(schema);
   const section = newSchema.sections.find((s) => s.id === sectionId);
@@ -310,7 +326,7 @@ function useBuilderState(initialSchema) {
     (sectionId) => {
       applyMutation((s) => removeSection(s, sectionId));
       setSelectedItem((prev) => {
-        if (prev?.type === "section" && prev.sectionId === sectionId) return null;
+        if (prev?.sectionId === sectionId) return null;
         return prev;
       });
     },
@@ -1440,6 +1456,14 @@ function SectionBlock({ section, builderState }) {
 }
 function FormCanvas({ builderState }) {
   const { schema } = builderState;
+  const [localTitle, setLocalTitle] = useState(schema.title);
+  const [localDesc, setLocalDesc] = useState(schema.description ?? "");
+  useEffect(() => {
+    setLocalTitle(schema.title);
+  }, [schema.title]);
+  useEffect(() => {
+    setLocalDesc(schema.description ?? "");
+  }, [schema.description]);
   const handleAddSection = () => {
     const newSection = {
       id: generateSectionId(),
@@ -1456,9 +1480,12 @@ function FormCanvas({ builderState }) {
         "input",
         {
           type: "text",
-          value: schema.title,
-          onChange: (e) => {
-            builderState.updateSchema({ ...schema, title: e.target.value });
+          value: localTitle,
+          onChange: (e) => setLocalTitle(e.target.value),
+          onBlur: () => {
+            if (localTitle !== schema.title) {
+              builderState.updateSchema({ ...schema, title: localTitle });
+            }
           },
           className: "w-full text-xl font-bold bg-transparent text-foreground border-0 outline-none p-1.5 rounded-md focus:bg-card transition-colors",
           placeholder: "Form Title"
@@ -1467,9 +1494,12 @@ function FormCanvas({ builderState }) {
       /* @__PURE__ */ jsx(
         "textarea",
         {
-          value: schema.description ?? "",
-          onChange: (e) => {
-            builderState.updateSchema({ ...schema, description: e.target.value });
+          value: localDesc,
+          onChange: (e) => setLocalDesc(e.target.value),
+          onBlur: () => {
+            if (localDesc !== (schema.description ?? "")) {
+              builderState.updateSchema({ ...schema, description: localDesc || void 0 });
+            }
           },
           className: "w-full text-sm text-muted-foreground bg-transparent border-0 outline-none p-1.5 resize-y min-h-12 rounded-md leading-relaxed focus:bg-card transition-colors",
           placeholder: "Form description (optional)"
@@ -1572,12 +1602,26 @@ SelectItem.displayName = "SelectItem";
 function useConfigUpdater(question, onUpdate) {
   return (updates) => {
     const current = question.config ?? {};
-    onUpdate({ config: { ...current, type: question.type, ...updates } });
+    const merged = { ...current, type: question.type, ...updates };
+    for (const key of Object.keys(merged)) {
+      if (merged[key] === void 0) delete merged[key];
+    }
+    onUpdate({ config: merged });
   };
 }
-function QuestionConfigEditor({ question, onUpdate }) {
+function QuestionConfigEditor({ question, schema, onUpdate }) {
   const updateConfig = useConfigUpdater(question, onUpdate);
   const config = question.config ?? {};
+  const allQuestions = useMemo(() => {
+    if (!schema?.sections) return [];
+    return schema.sections.flatMap((s) => s.questions || []);
+  }, [schema]);
+  const candidateAmountFields = useMemo(() => {
+    return allQuestions.filter((q) => q.id !== question.id && ["calculated", "number", "slider", "rating", "single_select"].includes(q.type)).map((q) => ({ label: `${q.label || q.id} (${q.id})`, value: q.id }));
+  }, [allQuestions, question.id]);
+  const candidateTimezoneFields = useMemo(() => {
+    return allQuestions.filter((q) => q.id !== question.id && ["dropdown", "single_select", "short_text"].includes(q.type)).map((q) => ({ label: `${q.label || q.id} (${q.id})`, value: q.id }));
+  }, [allQuestions, question.id]);
   switch (question.type) {
     // ── Text ──
     case "short_text":
@@ -1601,32 +1645,32 @@ function QuestionConfigEditor({ question, onUpdate }) {
     // ── Numeric ──
     case "number":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Number Settings", children: [
-        /* @__PURE__ */ jsx(NumberField, { label: "Min", value: config.min, onChange: (v) => updateConfig({ min: v }) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Max", value: config.max, onChange: (v) => updateConfig({ max: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Min Value", value: config.min, onChange: (v) => updateConfig({ min: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Max Value", value: config.max, onChange: (v) => updateConfig({ max: v }) }),
         /* @__PURE__ */ jsx(NumberField, { label: "Step", value: config.step, placeholder: "1", onChange: (v) => updateConfig({ step: v }) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Decimal Places", value: config.decimalPlaces, placeholder: "0", onChange: (v) => updateConfig({ decimalPlaces: v }) }),
         /* @__PURE__ */ jsx(TextField, { label: "Prefix", value: config.prefix, placeholder: "e.g. $", onChange: (v) => updateConfig({ prefix: v }) }),
         /* @__PURE__ */ jsx(TextField, { label: "Suffix", value: config.suffix, placeholder: "e.g. kg", onChange: (v) => updateConfig({ suffix: v }) })
       ] });
     case "slider":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Slider Settings", children: [
-        /* @__PURE__ */ jsx(NumberField, { label: "Min", value: config.min, placeholder: "0", onChange: (v) => updateConfig({ min: v }) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Max", value: config.max, placeholder: "100", onChange: (v) => updateConfig({ max: v }) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Step", value: config.step, placeholder: "1", onChange: (v) => updateConfig({ step: v }) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Show Value", checked: !!config.showValue, onChange: (v) => updateConfig({ showValue: v }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Min Label", value: config.minLabel, onChange: (v) => updateConfig({ minLabel: v }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Max Label", value: config.maxLabel, onChange: (v) => updateConfig({ maxLabel: v }) })
+        /* @__PURE__ */ jsx(NumberField, { label: "Min Value", value: config.min, placeholder: "0", onChange: (v) => updateConfig({ min: v ?? 0 }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Max Value", value: config.max, placeholder: "100", onChange: (v) => updateConfig({ max: v ?? 100 }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Step", value: config.step, placeholder: "1", onChange: (v) => updateConfig({ step: v ?? 1 }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Min Label", value: config.minLabel, placeholder: "Low", onChange: (v) => updateConfig({ minLabel: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Max Label", value: config.maxLabel, placeholder: "High", onChange: (v) => updateConfig({ maxLabel: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Show Value", checked: config.showValue !== false, onChange: (v) => updateConfig({ showValue: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Unit", value: config.unit, placeholder: "e.g. %", onChange: (v) => updateConfig({ unit: v }) })
       ] });
     case "rating":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Rating Settings", children: [
-        /* @__PURE__ */ jsx(NumberField, { label: "Max Stars", value: config.max, placeholder: "5", onChange: (v) => updateConfig({ max: v }) }),
-        /* @__PURE__ */ jsx(SelectField, { label: "Icon", value: config.icon ?? "star", options: [{ label: "Star", value: "star" }, { label: "Heart", value: "heart" }, { label: "Circle", value: "circle" }], onChange: (v) => updateConfig({ icon: v }) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Show Labels", checked: !!config.showLabels, onChange: (v) => updateConfig({ showLabels: v }) })
+        /* @__PURE__ */ jsx(NumberField, { label: "Max Rating", value: config.maxRating, placeholder: "5", onChange: (v) => updateConfig({ maxRating: v ?? 5 }) }),
+        /* @__PURE__ */ jsx(SelectField, { label: "Icon", value: config.icon ?? "star", options: [{ label: "Star", value: "star" }, { label: "Heart", value: "heart" }, { label: "Thumb", value: "thumb" }], onChange: (v) => updateConfig({ icon: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Allow Half Ratings", checked: !!config.allowHalf, onChange: (v) => updateConfig({ allowHalf: v }) })
       ] });
     case "nps":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "NPS Settings", children: [
-        /* @__PURE__ */ jsx(TextField, { label: "Low Label", value: config.lowLabel ?? "Not likely", onChange: (v) => updateConfig({ lowLabel: v }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "High Label", value: config.highLabel ?? "Very likely", onChange: (v) => updateConfig({ highLabel: v }) })
+        /* @__PURE__ */ jsx(TextField, { label: "Left Label", value: config.leftLabel ?? "Not likely", onChange: (v) => updateConfig({ leftLabel: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Right Label", value: config.rightLabel ?? "Extremely likely", onChange: (v) => updateConfig({ rightLabel: v }) })
       ] });
     case "opinion_scale":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Scale Settings", children: [
@@ -1692,50 +1736,126 @@ function QuestionConfigEditor({ question, onUpdate }) {
         /* @__PURE__ */ jsx(NumberField, { label: "Max Range (days)", value: config.maxRangeDays, onChange: (v) => updateConfig({ maxRangeDays: v }) })
       ] });
     case "appointment": {
-      const appointmentMode = typeof config.embedUrl === "string" ? "embed" : typeof config.slotsUrl === "string" ? "url" : "static";
+      const appointmentMode = typeof config.slotsUrl === "string" ? "url" : typeof config.embedUrl === "string" ? "embed" : "static";
+      const timezoneFieldOptions = [
+        { label: "None (Static Timezone)", value: "" },
+        ...candidateTimezoneFields,
+        { label: "Custom Field ID...", value: "__custom__" }
+      ];
+      const isCustomTzField = Boolean(config.timezoneField) && !candidateTimezoneFields.some((opt) => opt.value === config.timezoneField);
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Appointment Settings", children: [
         /* @__PURE__ */ jsx(
           SelectField,
           {
-            label: "Mode",
+            label: "Scheduling Mode",
             value: appointmentMode,
             options: [
-              { label: "Static Slots", value: "static" },
-              { label: "API Endpoint", value: "url" },
-              { label: "Embed (Calendly / Cal.com)", value: "embed" }
+              { label: "Manual Static Slots", value: "static" },
+              { label: "Fetch from URL", value: "url" },
+              { label: "Third-Party Embed (Calendly / Cal.com)", value: "embed" }
             ],
             onChange: (v) => {
-              if (v === "static") {
-                updateConfig({ slotsUrl: void 0, embedUrl: void 0, embedProvider: void 0 });
-              } else if (v === "url") {
-                updateConfig({ slotsUrl: "", embedUrl: void 0, embedProvider: void 0, slots: void 0 });
+              if (v === "url") {
+                updateConfig({
+                  slotsUrl: "",
+                  embedUrl: void 0,
+                  embedProvider: void 0,
+                  slots: void 0
+                });
               } else if (v === "embed") {
-                updateConfig({ embedUrl: "", slotsUrl: void 0, slots: void 0 });
+                updateConfig({
+                  embedUrl: "",
+                  embedProvider: config.embedProvider || "cal_com",
+                  slotsUrl: void 0,
+                  slots: void 0
+                });
+              } else {
+                updateConfig({
+                  slots: config.slots ?? [],
+                  slotsUrl: void 0,
+                  embedUrl: void 0,
+                  embedProvider: void 0
+                });
               }
             }
           }
         ),
-        /* @__PURE__ */ jsx(NumberField, { label: "Duration (min)", value: config.duration ?? 30, onChange: (v) => updateConfig({ duration: v }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Timezone", value: config.timezone, placeholder: "e.g. America/New_York", onChange: (v) => updateConfig({ timezone: v }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Timezone Field", value: config.timezoneField, placeholder: "Field ID for dynamic timezone", onChange: (v) => updateConfig({ timezoneField: v }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Date Format", value: config.dateFormat, placeholder: "Locale-aware (default)", onChange: (v) => updateConfig({ dateFormat: v }) }),
-        appointmentMode === "url" && /* @__PURE__ */ jsx(TextField, { label: "Slots URL", value: config.slotsUrl, placeholder: "https://api.example.com/slots", onChange: (v) => updateConfig({ slotsUrl: v }) }),
+        appointmentMode === "url" && /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Slots URL",
+            value: config.slotsUrl,
+            placeholder: "https://example.com/slots",
+            onChange: (v) => updateConfig({ slotsUrl: v ?? "" })
+          }
+        ),
         appointmentMode === "embed" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(TextField, { label: "Embed URL", value: config.embedUrl, placeholder: "https://calendly.com/your-name/30min", onChange: (v) => updateConfig({ embedUrl: v }) }),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Embed URL",
+              value: config.embedUrl,
+              placeholder: "https://calendly.com/... or https://cal.com/...",
+              onChange: (v) => updateConfig({ embedUrl: v ?? "" })
+            }
+          ),
           /* @__PURE__ */ jsx(
             SelectField,
             {
               label: "Embed Provider",
-              value: config.embedProvider ?? "custom",
+              value: config.embedProvider ?? "cal_com",
               options: [
-                { label: "Calendly", value: "calendly" },
                 { label: "Cal.com", value: "cal_com" },
+                { label: "Calendly", value: "calendly" },
                 { label: "Custom", value: "custom" }
               ],
               onChange: (v) => updateConfig({ embedProvider: v })
             }
           )
         ] }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Duration (min)", value: config.duration ?? 30, onChange: (v) => updateConfig({ duration: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Timezone", value: config.timezone, placeholder: "e.g. America/New_York", onChange: (v) => updateConfig({ timezone: v }) }),
+        candidateTimezoneFields.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            SelectField,
+            {
+              label: "Dynamic Timezone Field",
+              value: isCustomTzField ? "__custom__" : config.timezoneField ?? "",
+              options: timezoneFieldOptions,
+              onChange: (v) => {
+                if (v !== "__custom__") {
+                  updateConfig({ timezoneField: v || void 0 });
+                }
+              }
+            }
+          ),
+          isCustomTzField && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Custom Timezone Field ID",
+              value: config.timezoneField,
+              placeholder: "e.g. timezone",
+              onChange: (v) => updateConfig({ timezoneField: v || void 0 })
+            }
+          ) })
+        ] }) : /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Timezone Field",
+            value: config.timezoneField,
+            placeholder: "Field ID for dynamic timezone",
+            onChange: (v) => updateConfig({ timezoneField: v || void 0 })
+          }
+        ),
+        /* @__PURE__ */ jsx(TextField, { label: "Date Format", value: config.dateFormat, placeholder: "Locale-aware (default)", onChange: (v) => updateConfig({ dateFormat: v }) }),
+        /* @__PURE__ */ jsx(
+          ToggleField,
+          {
+            label: "Auto-Advance on Booking Complete",
+            checked: config.autoAdvance !== false,
+            onChange: (v) => updateConfig({ autoAdvance: v })
+          }
+        ),
         appointmentMode === "static" && /* @__PURE__ */ jsx(
           AppointmentSlotsEditor,
           {
@@ -1748,10 +1868,41 @@ function QuestionConfigEditor({ question, onUpdate }) {
     // ── Media ──
     case "file_upload":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Upload Settings", children: [
+        /* @__PURE__ */ jsxs("div", { className: "p-2.5 bg-muted/40 border border-border rounded-md text-xs text-muted-foreground flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u{1F4E6}" }),
+          /* @__PURE__ */ jsx("span", { children: "Uploads stream to your cloud bucket using Form / Account Storage settings." })
+        ] }),
         /* @__PURE__ */ jsx(NumberField, { label: "Max Files", value: config.maxFiles ?? 1, onChange: (v) => updateConfig({ maxFiles: v }) }),
         /* @__PURE__ */ jsx(NumberField, { label: "Max Size (MB)", value: config.maxSizeMb ?? 10, onChange: (v) => updateConfig({ maxSizeMb: v }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Accepted Types", value: config.accept?.join(", "), placeholder: "e.g. .pdf, .jpg, .png", onChange: (v) => updateConfig({ accept: v ? v.split(",").map((s) => s.trim()) : void 0 }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Upload URL", value: config.uploadUrl, placeholder: "Server upload endpoint", onChange: (v) => updateConfig({ uploadUrl: v }) })
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Accepted Types (comma-separated)",
+            value: config.accept?.join(", "),
+            placeholder: "e.g. image/*, .pdf, .docx, .zip",
+            onChange: (v) => updateConfig({
+              accept: v ? v.split(",").map((s) => s.trim()).filter(Boolean) : void 0
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Upload URL",
+            value: config.uploadUrl,
+            placeholder: "https://api.example.com/s3/presign",
+            onChange: (v) => updateConfig({ uploadUrl: v || void 0 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Public Key",
+            value: config.publicKey,
+            placeholder: "pk_test_...",
+            onChange: (v) => updateConfig({ publicKey: v || void 0 })
+          }
+        )
       ] });
     case "signature":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Signature Settings", children: [
@@ -1868,32 +2019,120 @@ function QuestionConfigEditor({ question, onUpdate }) {
         /* @__PURE__ */ jsx(TextField, { label: "Default Country", value: config.defaultCountry, placeholder: "e.g. US", onChange: (v) => updateConfig({ defaultCountry: v }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx(Label, { className: "text-xs text-muted-foreground mb-2 block", children: "Fields" }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: ADDRESS_FIELDS.map((f) => /* @__PURE__ */ jsx(
-            ToggleField,
-            {
-              label: f.label,
-              checked: activeFields.includes(f.value),
-              onChange: (checked) => {
-                const next = checked ? [...activeFields, f.value] : activeFields.filter((v) => v !== f.value);
-                updateConfig({ fields: next.length > 0 ? next : void 0 });
-              }
-            },
-            f.value
-          )) })
+          /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: ADDRESS_FIELDS.map((f) => {
+            const isChecked = activeFields.includes(f.value);
+            const isLastChecked = isChecked && activeFields.length === 1;
+            return /* @__PURE__ */ jsx(
+              ToggleField,
+              {
+                label: f.label,
+                checked: isChecked,
+                disabled: isLastChecked,
+                onChange: (checked) => {
+                  const next = checked ? [...activeFields, f.value] : activeFields.filter((v) => v !== f.value);
+                  updateConfig({ fields: next });
+                }
+              },
+              f.value
+            );
+          }) })
         ] })
       ] });
     }
-    case "payment":
+    case "payment": {
+      const amountFieldOptions = [
+        { label: "None (Fixed Amount)", value: "" },
+        ...candidateAmountFields,
+        { label: "Custom Field ID...", value: "__custom__" }
+      ];
+      const isCustomAmountField = Boolean(config.amountField) && !candidateAmountFields.some((opt) => opt.value === config.amountField);
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Payment Settings", children: [
-        /* @__PURE__ */ jsx(SelectField, { label: "Provider", value: config.provider ?? "stripe", options: [{ label: "Stripe", value: "stripe" }, { label: "PayPal", value: "paypal" }], onChange: (v) => updateConfig({ provider: v }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Public Key", value: config.publicKey ?? "", placeholder: "Provider public/client key", onChange: (v) => updateConfig({ publicKey: v }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Server URL", value: config.serverUrl ?? "", placeholder: "https://api.example.com/create-intent", onChange: (v) => updateConfig({ serverUrl: v || void 0 }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Client Secret Path", value: config.responseMapping?.clientSecretPath ?? "", placeholder: "clientSecret", onChange: (v) => updateConfig({ responseMapping: v ? { clientSecretPath: v } : void 0 }) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Amount", value: config.amount, onChange: (v) => updateConfig({ amount: v }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Amount Field", value: config.amountField, placeholder: "Field ID for dynamic amount", onChange: (v) => updateConfig({ amountField: v }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Currency", value: config.currency, placeholder: "USD", onChange: (v) => updateConfig({ currency: v }) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Description", value: config.description, onChange: (v) => updateConfig({ description: v }) })
+        /* @__PURE__ */ jsx(
+          SelectField,
+          {
+            label: "Provider",
+            value: config.provider ?? "stripe",
+            options: [
+              { label: "Stripe", value: "stripe" },
+              { label: "PayPal", value: "paypal" },
+              { label: "Razorpay", value: "razorpay" }
+            ],
+            onChange: (v) => updateConfig({ provider: v })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Public Key",
+            value: config.publicKey,
+            placeholder: "pk_test_...",
+            onChange: (v) => updateConfig({ publicKey: v || void 0 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Server URL",
+            value: config.serverUrl,
+            placeholder: "https://api.example.com/create-intent",
+            onChange: (v) => updateConfig({ serverUrl: v || void 0 })
+          }
+        ),
+        candidateAmountFields.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            SelectField,
+            {
+              label: "Dynamic Amount Field",
+              value: isCustomAmountField ? "__custom__" : config.amountField ?? "",
+              options: amountFieldOptions,
+              onChange: (v) => {
+                if (v !== "__custom__") {
+                  updateConfig({ amountField: v || void 0 });
+                }
+              }
+            }
+          ),
+          isCustomAmountField && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Custom Field ID",
+              value: config.amountField,
+              placeholder: "Field ID for dynamic amount",
+              onChange: (v) => updateConfig({ amountField: v || void 0 })
+            }
+          ) })
+        ] }) : /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Amount Field",
+            value: config.amountField,
+            placeholder: "Field ID for dynamic amount (e.g. total_cost)",
+            onChange: (v) => updateConfig({ amountField: v || void 0 })
+          }
+        ),
+        !config.amountField && /* @__PURE__ */ jsx(
+          NumberField,
+          {
+            label: "Fixed Amount",
+            value: config.amount,
+            onChange: (v) => updateConfig({ amount: v })
+          }
+        ),
+        /* @__PURE__ */ jsx(TextField, { label: "Currency", value: config.currency ?? "USD", placeholder: "USD", onChange: (v) => updateConfig({ currency: v || "USD" }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Description", value: config.description, onChange: (v) => updateConfig({ description: v }) }),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Client Secret Response Path",
+            value: typeof config.responseMapping?.clientSecretPath === "string" ? config.responseMapping.clientSecretPath : config.responseMapping ?? "",
+            placeholder: "clientSecret",
+            onChange: (v) => updateConfig({
+              responseMapping: v ? { clientSecretPath: v } : void 0
+            })
+          }
+        )
       ] });
+    }
     case "calculated":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Calculated Field", children: [
         /* @__PURE__ */ jsx(TextField, { label: "Expression", value: config.expression ?? "", placeholder: "e.g. {q1} + {q2}", onChange: (v) => updateConfig({ expression: v }) }),
@@ -2002,11 +2241,12 @@ function NumberField({
 function ToggleField({
   label,
   checked,
-  onChange
+  onChange,
+  disabled
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsx(Label, { className: "text-xs text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx(Switch, { checked, onCheckedChange: onChange })
+    /* @__PURE__ */ jsx(Switch, { checked, onCheckedChange: onChange, disabled })
   ] });
 }
 function SelectField({
@@ -2978,7 +3218,14 @@ function QuestionProperties({ question, sectionId, builderState, onClose, onOpen
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(QuestionConfigEditor, { question, onUpdate: updateQuestion2 }),
+        /* @__PURE__ */ jsx(
+          QuestionConfigEditor,
+          {
+            question,
+            schema: builderState.schema,
+            onUpdate: updateQuestion2
+          }
+        ),
         hasOptions && /* @__PURE__ */ jsx(
           OptionsEditor,
           {
@@ -3155,6 +3402,11 @@ function MonacoWrapper({ value, onChange, errors }) {
     editorRef.current = editor;
     monacoRef.current = monaco;
   };
+  useEffect(() => {
+    return () => {
+      editorRef.current?.dispose();
+    };
+  }, []);
   useEffect(() => {
     const editor = editorRef.current;
     const monaco = monacoRef.current;
@@ -3959,6 +4211,11 @@ function TemplateGallery({ templates, onSelect, onClose }) {
 function useDebouncedValidation(delayMs = 500) {
   const [errors, setErrors] = useState([]);
   const timerRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
   const validate = useCallback(
     (text) => {
       if (timerRef.current) {
@@ -4709,4 +4966,56 @@ function FormBuilderInner(props) {
 // src/form-builder/components/FormBuilderGated.tsx
 var FormBuilder = requireLicense(FormBuilderInner, "FormBuilder");
 
-export { DEFAULT_PALETTE, DEFAULT_SCHEMA, FormBuilder, FormBuilderThemeProvider, QUESTION_TYPE_INFO, addOption, addQuestion, addSection, duplicateQuestion, duplicateSection, findQuestion, findSection, generateId, generateOptionId, generateQuestionId, generateSectionId, moveOption, moveQuestion, moveSection, removeOption, removeQuestion, removeSection, updateOption, updateQuestion, updateSection, useBuilderState, useBuilderTheme, useDragDrop, useUndoRedo };
+// src/form-builder/theme/presets.ts
+var squaredrDarkPreset = {
+  background: "#0F1A1F",
+  foreground: "#E8EFF1",
+  card: "#16242A",
+  primary: "#63BDB4",
+  primaryForeground: "#0F1A1F",
+  secondary: "#182F31",
+  secondaryForeground: "#E8EFF1",
+  muted: "#182F31",
+  mutedForeground: "#8CA1A9",
+  accent: "#182F31",
+  accentForeground: "#E8EFF1",
+  destructive: "#E08072",
+  destructiveForeground: "#0F1A1F",
+  border: "#2A3B42",
+  input: "#2A3B42",
+  ring: "#63BDB4",
+  radius: "0px",
+  surface: "#16242A",
+  surfaceHover: "#182F31",
+  canvas: "#0F1A1F",
+  panel: "#16242A",
+  borderStrong: "#2F4F4C",
+  textDim: "#5E7680"
+};
+var cleanPreset = {
+  background: "#F4F7F8",
+  foreground: "#12222A",
+  card: "#FFFFFF",
+  primary: "#1F6B6E",
+  primaryForeground: "#FFFFFF",
+  secondary: "#EDF3F2",
+  secondaryForeground: "#12222A",
+  muted: "#EDF3F2",
+  mutedForeground: "#6A7B85",
+  accent: "#EDF3F2",
+  accentForeground: "#12222A",
+  destructive: "#B04A3C",
+  destructiveForeground: "#FFFFFF",
+  border: "#DCE4E8",
+  input: "#DCE4E8",
+  ring: "#1F6B6E",
+  radius: "0px",
+  surface: "#FAFCFC",
+  surfaceHover: "#EDF3F2",
+  canvas: "#F4F7F8",
+  panel: "#FFFFFF",
+  borderStrong: "#B9D1CF",
+  textDim: "#6A7B85"
+};
+
+export { DEFAULT_PALETTE, DEFAULT_SCHEMA, FormBuilder, FormBuilderThemeProvider, QUESTION_TYPE_INFO, addOption, addQuestion, addSection, cleanPreset, duplicateQuestion, duplicateSection, findQuestion, findSection, generateId, generateOptionId, generateQuestionId, generateSectionId, moveOption, moveQuestion, moveSection, removeOption, removeQuestion, removeSection, squaredrDarkPreset, updateOption, updateQuestion, updateSection, useBuilderState, useBuilderTheme, useDragDrop, useUndoRedo };