@squaredr/fieldcraft-pro 1.7.0 → 1.9.0

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

@@ -1,11 +1,13 @@
 import { cn } from './chunk-QQ4JZGTD.mjs';
 import { requireLicense } from './chunk-4MMKB2EW.mjs';
+import * as React from 'react';
 import { forwardRef, lazy, memo, createContext, Component, useState, useRef, useEffect, useCallback, useMemo, Suspense, useContext } from 'react';
 import { DndContext, DragOverlay, useSensors, useSensor, MouseSensor, TouchSensor, useDraggable, useDroppable } from '@dnd-kit/core';
-import { ChevronDown, Undo2, Redo2, PencilRuler, Eye, Code, GitBranch, LayoutTemplate, Upload, Download, Save, X, PanelLeft, PanelRight, Search, ChevronRight, Plus, Settings, FileText, Layers, ZoomOut, ZoomIn, Maximize, Copy, Trash2, HelpCircle, MoveVertical, Minus, Video, Image, PartyPopper, Hand, ShieldCheck, SeparatorHorizontal, Info, Heading, Trophy, EyeOff, Calculator, CreditCard, MapPin, Repeat, Grid3X3, Camera, PenTool, Paperclip, CalendarCheck, CalendarRange, Clock, Calendar, ArrowUpDown, Globe, ToggleLeft, CheckSquare, CircleDot, ListOrdered, TrendingUp, BarChart3, Star, SlidersHorizontal, Hash, UserCheck, Link, PhoneCall, Phone, Mail, AlignLeft, Type, GripVertical } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, Undo2, Redo2, PencilRuler, Eye, Code, GitBranch, LayoutTemplate, Upload, Download, Save, X, PanelLeft, PanelRight, Search, ChevronRight, Plus, Settings, FileText, Layers, ZoomOut, ZoomIn, Maximize, Copy, Trash2, HelpCircle, MoveVertical, Minus, Video, Image, PartyPopper, Hand, ShieldCheck, SeparatorHorizontal, Info, Heading, Trophy, EyeOff, Calculator, CreditCard, MapPin, Repeat, Grid3X3, Camera, PenTool, Paperclip, CalendarCheck, CalendarRange, Clock, Calendar, ArrowUpDown, Globe, ToggleLeft, CheckSquare, CircleDot, ListOrdered, TrendingUp, BarChart3, Star, SlidersHorizontal, Hash, UserCheck, Link, PhoneCall, Phone, Mail, AlignLeft, Type, GripVertical } from 'lucide-react';
 import { Button, Separator, FormEngineRenderer, Input, Badge, Textarea, Label, Switch } from '@squaredr/fieldcraft-react';
 import { validateSchema, FormEngineSchemaError } from '@squaredr/fieldcraft-core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as SelectPrimitive from '@radix-ui/react-select';
 import { MarkerType, Handle, Position, getBezierPath, BaseEdge, EdgeLabelRenderer, useNodesState, useEdgesState, ReactFlowProvider, useReactFlow, ReactFlow, Background, MiniMap } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 
@@ -17,16 +19,18 @@ function useUndoRedo(currentSchema, setSchema) {
   const canRedo = currentIndex < historyRef.current.length - 1;
   const push = useCallback(
     (schema) => {
-      historyRef.current = historyRef.current.slice(0, currentIndex + 1);
-      historyRef.current.push(schema);
-      if (historyRef.current.length > MAX_HISTORY) {
-        historyRef.current.shift();
-        setCurrentIndex(historyRef.current.length - 1);
-      } else {
-        setCurrentIndex((prev) => prev + 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;
+      });
     },
-    [currentIndex]
+    []
   );
   const undo = useCallback(() => {
     if (currentIndex > 0) {
@@ -57,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");
@@ -150,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);
@@ -305,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;
       });
     },
@@ -644,7 +665,7 @@ var QUESTION_TYPE_INFO = {
     category: "advanced",
     icon: "ListPlus",
     description: "Repeatable group of fields",
-    defaultConfig: { type: "repeater", fields: [], minItems: 1, maxItems: 10 }
+    defaultConfig: { type: "repeater", fields: [], minEntries: 1, maxEntries: 10 }
   },
   likert: {
     type: "likert",
@@ -655,13 +676,7 @@ var QUESTION_TYPE_INFO = {
     requiresOptions: true,
     defaultConfig: {
       type: "likert",
-      scale: [
-        { label: "Strongly Disagree", value: "1" },
-        { label: "Disagree", value: "2" },
-        { label: "Neutral", value: "3" },
-        { label: "Agree", value: "4" },
-        { label: "Strongly Agree", value: "5" }
-      ]
+      labels: ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"]
     }
   },
   scoring: {
@@ -714,7 +729,7 @@ var QUESTION_TYPE_INFO = {
     category: "advanced",
     icon: "CreditCard",
     description: "Collect payment via Stripe",
-    defaultConfig: { type: "payment", provider: "stripe", publicKey: "", currency: "USD" }
+    defaultConfig: { type: "payment", provider: "stripe", publicKey: "", currency: "USD", serverUrl: "" }
   },
   // ── Structural ──
   section_header: {
@@ -1441,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(),
@@ -1457,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"
@@ -1468,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)"
@@ -1509,259 +1538,469 @@ function FormCanvas({ builderState }) {
     ] })
   ] }) });
 }
-var NativeSelect = forwardRef(
-  ({ className, wrapperClassName, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative", wrapperClassName), children: [
+var Select = SelectPrimitive.Root;
+var SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-card px-3 py-1 text-sm shadow-xs transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-muted-foreground" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-64 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" }) }),
       /* @__PURE__ */ jsx(
-        "select",
+        SelectPrimitive.Viewport,
         {
-          ref,
           className: cn(
-            "flex h-9 w-full appearance-none rounded-md border border-input bg-card px-3 py-1 pr-8 text-sm shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring text-foreground cursor-pointer",
-            className
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
           ),
-          ...props,
           children
         }
       ),
-      /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" })
-    ] });
+      /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" }) })
+    ]
   }
-);
-NativeSelect.displayName = "NativeSelect";
+) }));
+SelectContent.displayName = "SelectContent";
+var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = "SelectItem";
 function useConfigUpdater(question, onUpdate) {
-  return (field, value) => {
+  return (updates) => {
     const current = question.config ?? {};
-    onUpdate({ config: { ...current, type: question.type, [field]: value } });
+    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":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Text Settings", children: [
-        /* @__PURE__ */ jsx(NumberField, { label: "Max Length", value: config.maxLength, placeholder: "255", onChange: (v) => updateConfig("maxLength", v) }),
-        /* @__PURE__ */ jsx(SelectField, { label: "Input Type", value: config.inputType ?? "text", options: [{ label: "Text", value: "text" }, { label: "Password", value: "password" }], onChange: (v) => updateConfig("inputType", 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. USD", onChange: (v) => updateConfig("suffix", v) })
+        /* @__PURE__ */ jsx(NumberField, { label: "Max Length", value: config.maxLength, placeholder: "255", onChange: (v) => updateConfig({ maxLength: v }) }),
+        /* @__PURE__ */ jsx(SelectField, { label: "Input Type", value: config.inputType ?? "text", options: [{ label: "Text", value: "text" }, { label: "Password", value: "password" }], onChange: (v) => updateConfig({ inputType: 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. USD", onChange: (v) => updateConfig({ suffix: v }) })
       ] });
     case "long_text":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Text Settings", children: [
-        /* @__PURE__ */ jsx(NumberField, { label: "Max Length", value: config.maxLength, placeholder: "No limit", onChange: (v) => updateConfig("maxLength", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Rows", value: config.rows, placeholder: "4", onChange: (v) => updateConfig("rows", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Show Character Count", checked: !!config.showCharCount, onChange: (v) => updateConfig("showCharCount", v) })
+        /* @__PURE__ */ jsx(NumberField, { label: "Max Length", value: config.maxLength, placeholder: "No limit", onChange: (v) => updateConfig({ maxLength: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Rows", value: config.rows, placeholder: "4", onChange: (v) => updateConfig({ rows: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Show Character Count", checked: !!config.showCharCount, onChange: (v) => updateConfig({ showCharCount: v }) })
       ] });
     case "legal_name":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Name Fields", children: [
-        /* @__PURE__ */ jsx(ToggleField, { label: "Show Middle Name", checked: !!config.showMiddleName, onChange: (v) => updateConfig("showMiddleName", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Show Suffix", checked: !!config.showSuffix, onChange: (v) => updateConfig("showSuffix", v) })
+        /* @__PURE__ */ jsx(ToggleField, { label: "Show Middle Name", checked: !!config.showMiddleName, onChange: (v) => updateConfig({ showMiddleName: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Show Suffix", checked: !!config.showSuffix, onChange: (v) => updateConfig({ showSuffix: v }) })
       ] });
     // ── 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: "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) })
+        /* @__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(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: [
-        /* @__PURE__ */ jsx(NumberField, { label: "Min", value: config.min, placeholder: "1", onChange: (v) => updateConfig("min", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Max", value: config.max, placeholder: "5", onChange: (v) => updateConfig("max", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Step", value: config.step, placeholder: "1", onChange: (v) => updateConfig("step", 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: config.min, placeholder: "1", onChange: (v) => updateConfig({ min: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Max", value: config.max, placeholder: "5", onChange: (v) => updateConfig({ max: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Step", value: config.step, placeholder: "1", onChange: (v) => updateConfig({ step: 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 }) })
       ] });
     case "likert":
-      return /* @__PURE__ */ jsx(ConfigSection, { title: "Likert Settings", children: /* @__PURE__ */ jsx(LikertLabelsEditor, { labels: config.labels ?? ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"], onChange: (v) => updateConfig("labels", v) }) });
+      return /* @__PURE__ */ jsx(ConfigSection, { title: "Likert Settings", children: /* @__PURE__ */ jsx(LikertLabelsEditor, { labels: config.labels ?? ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"], onChange: (v) => updateConfig({ labels: v }) }) });
     // ── Selection ──
     case "single_select":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Select Settings", children: [
-        /* @__PURE__ */ jsx(SelectField, { label: "Layout", value: config.layout ?? "vertical", options: [{ label: "Vertical", value: "vertical" }, { label: "Horizontal", value: "horizontal" }, { label: "Grid", value: "grid" }], onChange: (v) => updateConfig("layout", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Allow Other", checked: !!config.allowOther, onChange: (v) => updateConfig("allowOther", v) }),
-        !!config.allowOther && /* @__PURE__ */ jsx(TextField, { label: "Other Label", value: config.otherLabel ?? "Other", onChange: (v) => updateConfig("otherLabel", v) })
+        /* @__PURE__ */ jsx(SelectField, { label: "Layout", value: config.layout ?? "vertical", options: [{ label: "Vertical", value: "vertical" }, { label: "Horizontal", value: "horizontal" }, { label: "Grid", value: "grid" }], onChange: (v) => updateConfig({ layout: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Allow Other", checked: !!config.allowOther, onChange: (v) => v ? updateConfig({ allowOther: true }) : updateConfig({ allowOther: false, otherLabel: void 0 }) }),
+        !!config.allowOther && /* @__PURE__ */ jsx(TextField, { label: "Other Label", value: config.otherLabel ?? "Other", onChange: (v) => updateConfig({ otherLabel: v }) })
       ] });
     case "multi_select":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Multi-Select Settings", children: [
-        /* @__PURE__ */ jsx(SelectField, { label: "Layout", value: config.layout ?? "vertical", options: [{ label: "Vertical", value: "vertical" }, { label: "Horizontal", value: "horizontal" }, { label: "Grid", value: "grid" }], onChange: (v) => updateConfig("layout", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Min Selections", value: config.minSelections, onChange: (v) => updateConfig("minSelections", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Max Selections", value: config.maxSelections, onChange: (v) => updateConfig("maxSelections", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Allow Other", checked: !!config.allowOther, onChange: (v) => updateConfig("allowOther", v) }),
-        !!config.allowOther && /* @__PURE__ */ jsx(TextField, { label: "Other Label", value: config.otherLabel ?? "Other", onChange: (v) => updateConfig("otherLabel", v) })
+        /* @__PURE__ */ jsx(SelectField, { label: "Layout", value: config.layout ?? "vertical", options: [{ label: "Vertical", value: "vertical" }, { label: "Horizontal", value: "horizontal" }, { label: "Grid", value: "grid" }], onChange: (v) => updateConfig({ layout: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Min Selections", value: config.minSelections, onChange: (v) => updateConfig({ minSelections: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Max Selections", value: config.maxSelections, onChange: (v) => updateConfig({ maxSelections: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Allow Other", checked: !!config.allowOther, onChange: (v) => v ? updateConfig({ allowOther: true }) : updateConfig({ allowOther: false, otherLabel: void 0 }) }),
+        !!config.allowOther && /* @__PURE__ */ jsx(TextField, { label: "Other Label", value: config.otherLabel ?? "Other", onChange: (v) => updateConfig({ otherLabel: v }) })
       ] });
     case "dropdown":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Dropdown Settings", children: [
-        /* @__PURE__ */ jsx(ToggleField, { label: "Searchable", checked: !!config.searchable, onChange: (v) => updateConfig("searchable", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Allow Other", checked: !!config.allowOther, onChange: (v) => updateConfig("allowOther", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Multiple", checked: !!config.multiple, onChange: (v) => updateConfig("multiple", v) })
+        /* @__PURE__ */ jsx(ToggleField, { label: "Searchable", checked: !!config.searchable, onChange: (v) => updateConfig({ searchable: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Allow Other", checked: !!config.allowOther, onChange: (v) => updateConfig({ allowOther: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Multiple", checked: !!config.multiple, onChange: (v) => updateConfig({ multiple: v }) })
       ] });
     case "boolean":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Yes/No Settings", children: [
-        /* @__PURE__ */ jsx(SelectField, { label: "Style", value: config.style ?? "toggle", options: [{ label: "Toggle", value: "toggle" }, { label: "Radio", value: "radio" }, { label: "Checkbox", value: "checkbox" }], onChange: (v) => updateConfig("style", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "True Label", value: config.trueLabel ?? "Yes", onChange: (v) => updateConfig("trueLabel", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "False Label", value: config.falseLabel ?? "No", onChange: (v) => updateConfig("falseLabel", v) })
+        /* @__PURE__ */ jsx(SelectField, { label: "Style", value: config.style ?? "toggle", options: [{ label: "Toggle", value: "toggle" }, { label: "Radio", value: "radio" }, { label: "Checkbox", value: "checkbox" }], onChange: (v) => updateConfig({ style: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "True Label", value: config.trueLabel ?? "Yes", onChange: (v) => updateConfig({ trueLabel: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "False Label", value: config.falseLabel ?? "No", onChange: (v) => updateConfig({ falseLabel: v }) })
       ] });
     case "country_select":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Country Settings", children: [
-        /* @__PURE__ */ jsx(ToggleField, { label: "Show Flags", checked: config.showFlags !== false, onChange: (v) => updateConfig("showFlags", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Priority Countries", value: config.priorityCountries?.join(", "), placeholder: "e.g. US, GB, CA", onChange: (v) => updateConfig("priorityCountries", v ? v.split(",").map((s) => s.trim()).filter(Boolean) : void 0) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Exclude Countries", value: config.excludeCountries?.join(", "), placeholder: "e.g. XX, YY", onChange: (v) => updateConfig("excludeCountries", v ? v.split(",").map((s) => s.trim()).filter(Boolean) : void 0) })
+        /* @__PURE__ */ jsx(ToggleField, { label: "Show Flags", checked: config.showFlags !== false, onChange: (v) => updateConfig({ showFlags: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Priority Countries", value: config.priorityCountries?.join(", "), placeholder: "e.g. US, GB, CA", onChange: (v) => updateConfig({ priorityCountries: v ? v.split(",").map((s) => s.trim()).filter(Boolean) : void 0 }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Exclude Countries", value: config.excludeCountries?.join(", "), placeholder: "e.g. XX, YY", onChange: (v) => updateConfig({ excludeCountries: v ? v.split(",").map((s) => s.trim()).filter(Boolean) : void 0 }) })
       ] });
     // ── Date/Time ──
     case "date":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Date Settings", children: [
-        /* @__PURE__ */ jsx(TextField, { label: "Min Date", value: config.minDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig("minDate", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Max Date", value: config.maxDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig("maxDate", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Disable Past Dates", checked: !!config.disablePast, onChange: (v) => updateConfig("disablePast", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Disable Future Dates", checked: !!config.disableFuture, onChange: (v) => updateConfig("disableFuture", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Format", value: config.format, placeholder: "e.g. MM/DD/YYYY", onChange: (v) => updateConfig("format", v) })
+        /* @__PURE__ */ jsx(TextField, { label: "Min Date", value: config.minDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig({ minDate: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Max Date", value: config.maxDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig({ maxDate: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Disable Past Dates", checked: !!config.disablePast, onChange: (v) => updateConfig({ disablePast: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Disable Future Dates", checked: !!config.disableFuture, onChange: (v) => updateConfig({ disableFuture: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Format", value: config.format, placeholder: "e.g. MM/DD/YYYY", onChange: (v) => updateConfig({ format: v }) })
       ] });
     case "time":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Time Settings", children: [
-        /* @__PURE__ */ jsx(SelectField, { label: "Format", value: config.format ?? "12h", options: [{ label: "12 Hour", value: "12h" }, { label: "24 Hour", value: "24h" }], onChange: (v) => updateConfig("format", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Minute Step", value: config.minuteStep, placeholder: "1", onChange: (v) => updateConfig("minuteStep", v) })
+        /* @__PURE__ */ jsx(SelectField, { label: "Format", value: config.format ?? "12h", options: [{ label: "12 Hour", value: "12h" }, { label: "24 Hour", value: "24h" }], onChange: (v) => updateConfig({ format: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Minute Step", value: config.minuteStep, placeholder: "1", onChange: (v) => updateConfig({ minuteStep: v }) })
       ] });
     case "date_range":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Date Range Settings", children: [
-        /* @__PURE__ */ jsx(TextField, { label: "Min Date", value: config.minDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig("minDate", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Max Date", value: config.maxDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig("maxDate", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Max Range (days)", value: config.maxRangeDays, onChange: (v) => updateConfig("maxRangeDays", v) })
+        /* @__PURE__ */ jsx(TextField, { label: "Min Date", value: config.minDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig({ minDate: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Max Date", value: config.maxDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig({ maxDate: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Max Range (days)", value: config.maxRangeDays, onChange: (v) => updateConfig({ maxRangeDays: v }) })
       ] });
-    case "appointment":
+    case "appointment": {
+      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(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: "Slots URL", value: config.slotsUrl, placeholder: "API endpoint for available slots", onChange: (v) => updateConfig("slotsUrl", v) })
+        /* @__PURE__ */ jsx(
+          SelectField,
+          {
+            label: "Scheduling Mode",
+            value: appointmentMode,
+            options: [
+              { 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 === "url") {
+                updateConfig({
+                  slotsUrl: "",
+                  embedUrl: void 0,
+                  embedProvider: void 0,
+                  slots: void 0
+                });
+              } else if (v === "embed") {
+                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
+                });
+              }
+            }
+          }
+        ),
+        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/... or https://cal.com/...",
+              onChange: (v) => updateConfig({ embedUrl: v ?? "" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SelectField,
+            {
+              label: "Embed Provider",
+              value: config.embedProvider ?? "cal_com",
+              options: [
+                { 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,
+          {
+            slots: config.slots ?? [],
+            onChange: (v) => updateConfig({ slots: v })
+          }
+        )
       ] });
+    }
     // ── Media ──
     case "file_upload":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Upload Settings", children: [
-        /* @__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__ */ 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 (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: [
-        /* @__PURE__ */ jsx(TextField, { label: "Pen Color", value: config.penColor, placeholder: "#000000", onChange: (v) => updateConfig("penColor", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Background", value: config.backgroundColor, placeholder: "#ffffff", onChange: (v) => updateConfig("backgroundColor", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Width (px)", value: config.width, onChange: (v) => updateConfig("width", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Height (px)", value: config.height, onChange: (v) => updateConfig("height", v) })
+        /* @__PURE__ */ jsx(TextField, { label: "Pen Color", value: config.penColor, placeholder: "#000000", onChange: (v) => updateConfig({ penColor: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Background", value: config.backgroundColor, placeholder: "#ffffff", onChange: (v) => updateConfig({ backgroundColor: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Width (px)", value: config.width, onChange: (v) => updateConfig({ width: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Height (px)", value: config.height, onChange: (v) => updateConfig({ height: v }) })
       ] });
     case "image_capture":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Camera Settings", children: [
-        /* @__PURE__ */ jsx(SelectField, { label: "Camera", value: config.camera ?? "any", options: [{ label: "Any", value: "any" }, { label: "Front", value: "front" }, { label: "Back", value: "back" }], onChange: (v) => updateConfig("camera", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Max Size (MB)", value: config.maxSizeMb, onChange: (v) => updateConfig("maxSizeMb", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Allow Gallery", checked: config.allowGallery !== false, onChange: (v) => updateConfig("allowGallery", v) })
+        /* @__PURE__ */ jsx(SelectField, { label: "Camera", value: config.camera ?? "any", options: [{ label: "Any", value: "any" }, { label: "Front", value: "front" }, { label: "Back", value: "back" }], onChange: (v) => updateConfig({ camera: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Max Size (MB)", value: config.maxSizeMb, onChange: (v) => updateConfig({ maxSizeMb: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Allow Gallery", checked: config.allowGallery !== false, onChange: (v) => updateConfig({ allowGallery: v }) })
       ] });
     // ── Content & Visual ──
     case "welcome-screen":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Welcome Screen", children: [
-        /* @__PURE__ */ jsx(TextField, { label: "Heading", value: config.heading ?? "Welcome", onChange: (v) => updateConfig("heading", v) }),
-        /* @__PURE__ */ jsx(TextareaField, { label: "Description", value: config.description, onChange: (v) => updateConfig("description", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Button Text", value: config.buttonText ?? "Start", onChange: (v) => updateConfig("buttonText", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Image URL", value: config.imageUrl, placeholder: "https://...", onChange: (v) => updateConfig("imageUrl", v) }),
-        /* @__PURE__ */ jsx(SelectField, { label: "Alignment", value: config.alignment ?? "center", options: [{ label: "Left", value: "left" }, { label: "Center", value: "center" }, { label: "Right", value: "right" }], onChange: (v) => updateConfig("alignment", v) })
+        /* @__PURE__ */ jsx(TextField, { label: "Heading", value: config.heading ?? "Welcome", onChange: (v) => updateConfig({ heading: v }) }),
+        /* @__PURE__ */ jsx(TextareaField, { label: "Description", value: config.description, onChange: (v) => updateConfig({ description: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Button Text", value: config.buttonText ?? "Start", onChange: (v) => updateConfig({ buttonText: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Image URL", value: config.imageUrl, placeholder: "https://...", onChange: (v) => updateConfig({ imageUrl: v }) }),
+        /* @__PURE__ */ jsx(SelectField, { label: "Alignment", value: config.alignment ?? "center", options: [{ label: "Left", value: "left" }, { label: "Center", value: "center" }, { label: "Right", value: "right" }], onChange: (v) => updateConfig({ alignment: v }) })
       ] });
     case "thank-you-screen":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Thank You Screen", children: [
-        /* @__PURE__ */ jsx(TextField, { label: "Heading", value: config.heading ?? "Thank You!", onChange: (v) => updateConfig("heading", v) }),
-        /* @__PURE__ */ jsx(TextareaField, { label: "Description", value: config.description ?? "", onChange: (v) => updateConfig("description", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Image URL", value: config.imageUrl, placeholder: "https://...", onChange: (v) => updateConfig("imageUrl", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Redirect URL", value: config.redirectUrl, placeholder: "https://...", onChange: (v) => updateConfig("redirectUrl", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Redirect Delay (s)", value: config.redirectDelay, placeholder: "0", onChange: (v) => updateConfig("redirectDelay", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Show Response Summary", checked: !!config.showSummary, onChange: (v) => updateConfig("showSummary", v) })
+        /* @__PURE__ */ jsx(TextField, { label: "Heading", value: config.heading ?? "Thank You!", onChange: (v) => updateConfig({ heading: v }) }),
+        /* @__PURE__ */ jsx(TextareaField, { label: "Description", value: config.description ?? "", onChange: (v) => updateConfig({ description: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Image URL", value: config.imageUrl, placeholder: "https://...", onChange: (v) => updateConfig({ imageUrl: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Redirect URL", value: config.redirectUrl, placeholder: "https://...", onChange: (v) => updateConfig({ redirectUrl: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Redirect Delay (s)", value: config.redirectDelay, placeholder: "0", onChange: (v) => updateConfig({ redirectDelay: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Show Response Summary", checked: !!config.showSummary, onChange: (v) => updateConfig({ showSummary: v }) })
       ] });
     case "rich-text":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Rich Text", children: [
-        /* @__PURE__ */ jsx(TextareaField, { label: "Content", value: config.content ?? "", rows: 6, onChange: (v) => updateConfig("content", v) }),
-        /* @__PURE__ */ jsx(SelectField, { label: "Format", value: config.format ?? "html", options: [{ label: "HTML", value: "html" }, { label: "Markdown", value: "markdown" }], onChange: (v) => updateConfig("format", v) })
+        /* @__PURE__ */ jsx(TextareaField, { label: "Content", value: config.content ?? "", rows: 6, onChange: (v) => updateConfig({ content: v }) }),
+        /* @__PURE__ */ jsx(SelectField, { label: "Format", value: config.format ?? "html", options: [{ label: "HTML", value: "html" }, { label: "Markdown", value: "markdown" }], onChange: (v) => updateConfig({ format: v }) })
       ] });
     case "image":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Image Settings", children: [
-        /* @__PURE__ */ jsx(TextField, { label: "Source URL", value: config.src ?? "", placeholder: "https://...", onChange: (v) => updateConfig("src", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Alt Text", value: config.alt ?? "", onChange: (v) => updateConfig("alt", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Caption", value: config.caption, onChange: (v) => updateConfig("caption", v) }),
-        /* @__PURE__ */ jsx(SelectField, { label: "Alignment", value: config.alignment ?? "center", options: [{ label: "Left", value: "left" }, { label: "Center", value: "center" }, { label: "Right", value: "right" }], onChange: (v) => updateConfig("alignment", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Width", value: config.width, placeholder: "e.g. 100% or 300px", onChange: (v) => updateConfig("width", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Link URL", value: config.link, placeholder: "Click opens this URL", onChange: (v) => updateConfig("link", v) })
+        /* @__PURE__ */ jsx(TextField, { label: "Source URL", value: config.src ?? "", placeholder: "https://...", onChange: (v) => updateConfig({ src: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Alt Text", value: config.alt ?? "", onChange: (v) => updateConfig({ alt: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Caption", value: config.caption, onChange: (v) => updateConfig({ caption: v }) }),
+        /* @__PURE__ */ jsx(SelectField, { label: "Alignment", value: config.alignment ?? "center", options: [{ label: "Left", value: "left" }, { label: "Center", value: "center" }, { label: "Right", value: "right" }], onChange: (v) => updateConfig({ alignment: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Width", value: config.width, placeholder: "e.g. 100% or 300px", onChange: (v) => updateConfig({ width: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Link URL", value: config.link, placeholder: "Click opens this URL", onChange: (v) => updateConfig({ link: v }) })
       ] });
     case "video":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Video Settings", children: [
-        /* @__PURE__ */ jsx(TextField, { label: "Source URL", value: config.src ?? "", placeholder: "YouTube/Vimeo URL", onChange: (v) => updateConfig("src", v) }),
-        /* @__PURE__ */ jsx(SelectField, { label: "Provider", value: config.provider ?? "youtube", options: [{ label: "YouTube", value: "youtube" }, { label: "Vimeo", value: "vimeo" }, { label: "Direct URL", value: "url" }], onChange: (v) => updateConfig("provider", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Autoplay", checked: !!config.autoplay, onChange: (v) => updateConfig("autoplay", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Muted", checked: !!config.muted, onChange: (v) => updateConfig("muted", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Width", value: config.width, placeholder: "e.g. 100% or 640px", onChange: (v) => updateConfig("width", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Height", value: config.height, placeholder: "e.g. 360px", onChange: (v) => updateConfig("height", v) })
+        /* @__PURE__ */ jsx(TextField, { label: "Source URL", value: config.src ?? "", placeholder: "YouTube/Vimeo URL", onChange: (v) => updateConfig({ src: v }) }),
+        /* @__PURE__ */ jsx(SelectField, { label: "Provider", value: config.provider ?? "youtube", options: [{ label: "YouTube", value: "youtube" }, { label: "Vimeo", value: "vimeo" }, { label: "Direct URL", value: "url" }], onChange: (v) => updateConfig({ provider: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Autoplay", checked: !!config.autoplay, onChange: (v) => updateConfig({ autoplay: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Muted", checked: !!config.muted, onChange: (v) => updateConfig({ muted: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Width", value: config.width, placeholder: "e.g. 100% or 640px", onChange: (v) => updateConfig({ width: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Height", value: config.height, placeholder: "e.g. 360px", onChange: (v) => updateConfig({ height: v }) })
       ] });
     case "divider":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Divider Settings", children: [
-        /* @__PURE__ */ jsx(SelectField, { label: "Style", value: config.style ?? "solid", options: [{ label: "Solid", value: "solid" }, { label: "Dashed", value: "dashed" }, { label: "Dotted", value: "dotted" }], onChange: (v) => updateConfig("style", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Color", value: config.color, placeholder: "#e5e7eb", onChange: (v) => updateConfig("color", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Thickness (px)", value: config.thickness, placeholder: "1", onChange: (v) => updateConfig("thickness", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Spacing (px)", value: config.spacing, placeholder: "16", onChange: (v) => updateConfig("spacing", v) })
+        /* @__PURE__ */ jsx(SelectField, { label: "Style", value: config.style ?? "solid", options: [{ label: "Solid", value: "solid" }, { label: "Dashed", value: "dashed" }, { label: "Dotted", value: "dotted" }], onChange: (v) => updateConfig({ style: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Color", value: config.color, placeholder: "#e5e7eb", onChange: (v) => updateConfig({ color: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Thickness (px)", value: config.thickness, placeholder: "1", onChange: (v) => updateConfig({ thickness: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Spacing (px)", value: config.spacing, placeholder: "16", onChange: (v) => updateConfig({ spacing: v }) })
       ] });
     case "spacer":
-      return /* @__PURE__ */ jsx(ConfigSection, { title: "Spacer Settings", children: /* @__PURE__ */ jsx(NumberField, { label: "Height (px)", value: config.height ?? 32, onChange: (v) => updateConfig("height", v) }) });
+      return /* @__PURE__ */ jsx(ConfigSection, { title: "Spacer Settings", children: /* @__PURE__ */ jsx(NumberField, { label: "Height (px)", value: config.height ?? 32, onChange: (v) => updateConfig({ height: v }) }) });
     // ── Structural ──
     case "section_header":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Header Settings", children: [
-        /* @__PURE__ */ jsx(SelectField, { label: "Level", value: config.level ?? "h3", options: [{ label: "H2", value: "h2" }, { label: "H3", value: "h3" }, { label: "H4", value: "h4" }], onChange: (v) => updateConfig("level", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Show Divider", checked: !!config.showDivider, onChange: (v) => updateConfig("showDivider", v) })
+        /* @__PURE__ */ jsx(SelectField, { label: "Level", value: config.level ?? "h3", options: [{ label: "H2", value: "h2" }, { label: "H3", value: "h3" }, { label: "H4", value: "h4" }], onChange: (v) => updateConfig({ level: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Show Divider", checked: !!config.showDivider, onChange: (v) => updateConfig({ showDivider: v }) })
       ] });
     case "info_block":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Info Block", children: [
-        /* @__PURE__ */ jsx(TextareaField, { label: "Content", value: config.content ?? "", rows: 4, onChange: (v) => updateConfig("content", v) }),
-        /* @__PURE__ */ jsx(SelectField, { label: "Variant", value: config.variant ?? "info", options: [{ label: "Info", value: "info" }, { label: "Warning", value: "warning" }, { label: "Success", value: "success" }, { label: "Error", value: "error" }], onChange: (v) => updateConfig("variant", v) })
+        /* @__PURE__ */ jsx(TextareaField, { label: "Content", value: config.content ?? "", rows: 4, onChange: (v) => updateConfig({ content: v }) }),
+        /* @__PURE__ */ jsx(SelectField, { label: "Variant", value: config.variant ?? "info", options: [{ label: "Info", value: "info" }, { label: "Warning", value: "warning" }, { label: "Success", value: "success" }, { label: "Error", value: "error" }], onChange: (v) => updateConfig({ variant: v }) })
       ] });
     case "page_break":
-      return /* @__PURE__ */ jsx(ConfigSection, { title: "Page Break", children: /* @__PURE__ */ jsx(TextField, { label: "Label", value: config.label, placeholder: "Next page label", onChange: (v) => updateConfig("label", v) }) });
+      return /* @__PURE__ */ jsx(ConfigSection, { title: "Page Break", children: /* @__PURE__ */ jsx(TextField, { label: "Label", value: config.label, placeholder: "Next page label", onChange: (v) => updateConfig({ label: v }) }) });
     case "consent":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Consent Settings", children: [
-        /* @__PURE__ */ jsx(TextareaField, { label: "Consent Text", value: config.text ?? "", rows: 4, onChange: (v) => updateConfig("text", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Checkbox Label", value: config.checkboxLabel ?? "I agree", onChange: (v) => updateConfig("checkboxLabel", v) }),
-        /* @__PURE__ */ jsx(TextareaField, { label: "Expandable Text", value: config.expandableText, rows: 3, placeholder: "Additional text shown on expand", onChange: (v) => updateConfig("expandableText", v) })
+        /* @__PURE__ */ jsx(TextareaField, { label: "Consent Text", value: config.text ?? "", rows: 4, onChange: (v) => updateConfig({ text: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Checkbox Label", value: config.checkboxLabel ?? "I agree", onChange: (v) => updateConfig({ checkboxLabel: v }) }),
+        /* @__PURE__ */ jsx(TextareaField, { label: "Expandable Text", value: config.expandableText, rows: 3, placeholder: "Additional text shown on expand", onChange: (v) => updateConfig({ expandableText: v }) })
       ] });
     // ── Advanced ──
     case "matrix":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Matrix Settings", children: [
-        /* @__PURE__ */ jsx(SelectField, { label: "Input Type", value: config.inputType ?? "radio", options: [{ label: "Radio", value: "radio" }, { label: "Checkbox", value: "checkbox" }, { label: "Text", value: "text" }, { label: "Number", value: "number" }], onChange: (v) => updateConfig("inputType", v) }),
-        /* @__PURE__ */ jsx(SelectField, { label: "Required", value: config.required ?? "none", options: [{ label: "All rows", value: "all" }, { label: "Any row", value: "any" }, { label: "None", value: "none" }], onChange: (v) => updateConfig("required", v) }),
-        /* @__PURE__ */ jsx(MatrixItemsEditor, { label: "Rows", items: config.rows ?? [], onChange: (v) => updateConfig("rows", v) }),
-        /* @__PURE__ */ jsx(MatrixItemsEditor, { label: "Columns", items: config.columns ?? [], onChange: (v) => updateConfig("columns", v) })
+        /* @__PURE__ */ jsx(SelectField, { label: "Input Type", value: config.inputType ?? "radio", options: [{ label: "Radio", value: "radio" }, { label: "Checkbox", value: "checkbox" }, { label: "Text", value: "text" }, { label: "Number", value: "number" }], onChange: (v) => updateConfig({ inputType: v }) }),
+        /* @__PURE__ */ jsx(SelectField, { label: "Required", value: config.required ?? "none", options: [{ label: "All rows", value: "all" }, { label: "Any row", value: "any" }, { label: "None", value: "none" }], onChange: (v) => updateConfig({ required: v }) }),
+        /* @__PURE__ */ jsx(MatrixItemsEditor, { label: "Rows", items: config.rows ?? [], onChange: (v) => updateConfig({ rows: v }) }),
+        /* @__PURE__ */ jsx(MatrixItemsEditor, { label: "Columns", items: config.columns ?? [], onChange: (v) => updateConfig({ columns: v }) })
       ] });
     case "repeater":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Repeater Settings", children: [
-        /* @__PURE__ */ jsx(NumberField, { label: "Min Entries", value: config.minEntries, placeholder: "1", onChange: (v) => updateConfig("minEntries", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Max Entries", value: config.maxEntries, onChange: (v) => updateConfig("maxEntries", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Default Entries", value: config.defaultEntries, placeholder: "1", onChange: (v) => updateConfig("defaultEntries", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Add Button Label", value: config.addLabel, placeholder: "Add Entry", onChange: (v) => updateConfig("addLabel", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Remove Button Label", value: config.removeLabel, placeholder: "Remove", onChange: (v) => updateConfig("removeLabel", v) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Min Entries", value: config.minEntries, placeholder: "1", onChange: (v) => updateConfig({ minEntries: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Max Entries", value: config.maxEntries, onChange: (v) => updateConfig({ maxEntries: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Default Entries", value: config.defaultEntries, placeholder: "1", onChange: (v) => updateConfig({ defaultEntries: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Add Button Label", value: config.addLabel, placeholder: "Add Entry", onChange: (v) => updateConfig({ addLabel: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Remove Button Label", value: config.removeLabel, placeholder: "Remove", onChange: (v) => updateConfig({ removeLabel: v }) }),
         /* @__PURE__ */ jsx("div", { className: "mt-1 text-[11px] text-muted-foreground leading-relaxed", children: "Sub-fields for each repeater entry are configured by nesting questions inside the repeater in the schema JSON." })
       ] });
     case "address": {
@@ -1775,63 +2014,157 @@ function QuestionConfigEditor({ question, onUpdate }) {
       ];
       const activeFields = config.fields ?? ["street", "city", "state", "zip", "country"];
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Address Settings", children: [
-        /* @__PURE__ */ jsx(SelectField, { label: "Provider", value: config.provider ?? "none", options: [{ label: "None", value: "none" }, { label: "Google", value: "google" }, { label: "Mapbox", value: "mapbox" }], onChange: (v) => updateConfig("provider", v) }),
-        config.provider !== "none" && /* @__PURE__ */ jsx(TextField, { label: "API Key", value: config.apiKey, placeholder: "Provider API key", onChange: (v) => updateConfig("apiKey", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Default Country", value: config.defaultCountry, placeholder: "e.g. US", onChange: (v) => updateConfig("defaultCountry", v) }),
+        /* @__PURE__ */ jsx(SelectField, { label: "Provider", value: config.provider ?? "none", options: [{ label: "None", value: "none" }, { label: "Google", value: "google" }, { label: "Mapbox", value: "mapbox" }], onChange: (v) => updateConfig({ provider: v }) }),
+        config.provider !== "none" && /* @__PURE__ */ jsx(TextField, { label: "API Key", value: config.apiKey, placeholder: "Provider API key", onChange: (v) => updateConfig({ apiKey: v }) }),
+        /* @__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(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) }),
-        /* @__PURE__ */ jsx(SelectField, { label: "Format", value: config.format ?? "number", options: [{ label: "Number", value: "number" }, { label: "Currency", value: "currency" }, { label: "Percentage", value: "percentage" }], onChange: (v) => updateConfig("format", v) }),
-        /* @__PURE__ */ jsx(NumberField, { label: "Decimal Places", value: config.decimalPlaces, placeholder: "2", onChange: (v) => updateConfig("decimalPlaces", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Prefix", value: config.prefix, onChange: (v) => updateConfig("prefix", v) }),
-        /* @__PURE__ */ jsx(TextField, { label: "Suffix", value: config.suffix, onChange: (v) => updateConfig("suffix", v) }),
-        /* @__PURE__ */ jsx(ToggleField, { label: "Visible to User", checked: config.visible !== false, onChange: (v) => updateConfig("visible", v) })
+        /* @__PURE__ */ jsx(TextField, { label: "Expression", value: config.expression ?? "", placeholder: "e.g. {q1} + {q2}", onChange: (v) => updateConfig({ expression: v }) }),
+        /* @__PURE__ */ jsx(SelectField, { label: "Format", value: config.format ?? "number", options: [{ label: "Number", value: "number" }, { label: "Currency", value: "currency" }, { label: "Percentage", value: "percentage" }], onChange: (v) => updateConfig({ format: v }) }),
+        /* @__PURE__ */ jsx(NumberField, { label: "Decimal Places", value: config.decimalPlaces, placeholder: "2", onChange: (v) => updateConfig({ decimalPlaces: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Prefix", value: config.prefix, onChange: (v) => updateConfig({ prefix: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Suffix", value: config.suffix, onChange: (v) => updateConfig({ suffix: v }) }),
+        /* @__PURE__ */ jsx(ToggleField, { label: "Visible to User", checked: config.visible !== false, onChange: (v) => updateConfig({ visible: v }) })
       ] });
     case "hidden":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Hidden Field", children: [
-        /* @__PURE__ */ jsx(SelectField, { label: "Source", value: config.source ?? "static", options: [{ label: "Static Value", value: "static" }, { label: "URL Parameter", value: "url_param" }, { label: "Cookie", value: "cookie" }, { label: "Referrer", value: "referrer" }], onChange: (v) => updateConfig("source", v) }),
-        config.source === "static" && /* @__PURE__ */ jsx(TextField, { label: "Default Value", value: config.defaultValue, onChange: (v) => updateConfig("defaultValue", v) }),
-        config.source === "url_param" && /* @__PURE__ */ jsx(TextField, { label: "Parameter Name", value: config.paramName, placeholder: "e.g. utm_source", onChange: (v) => updateConfig("paramName", v) }),
-        config.source === "cookie" && /* @__PURE__ */ jsx(TextField, { label: "Cookie Name", value: config.cookieName, onChange: (v) => updateConfig("cookieName", v) })
+        /* @__PURE__ */ jsx(SelectField, { label: "Source", value: config.source ?? "static", options: [{ label: "Static Value", value: "static" }, { label: "URL Parameter", value: "url_param" }, { label: "Cookie", value: "cookie" }, { label: "Referrer", value: "referrer" }], onChange: (v) => updateConfig({ source: v }) }),
+        config.source === "static" && /* @__PURE__ */ jsx(TextField, { label: "Default Value", value: config.defaultValue, onChange: (v) => updateConfig({ defaultValue: v }) }),
+        config.source === "url_param" && /* @__PURE__ */ jsx(TextField, { label: "Parameter Name", value: config.paramName, placeholder: "e.g. utm_source", onChange: (v) => updateConfig({ paramName: v }) }),
+        config.source === "cookie" && /* @__PURE__ */ jsx(TextField, { label: "Cookie Name", value: config.cookieName, onChange: (v) => updateConfig({ cookieName: v }) })
       ] });
     case "scoring":
       return /* @__PURE__ */ jsxs(ConfigSection, { title: "Scoring Settings", children: [
-        /* @__PURE__ */ jsx(ToggleField, { label: "Show Score", checked: !!config.showScore, onChange: (v) => updateConfig("showScore", v) }),
-        /* @__PURE__ */ jsx(ScoringOptionsEditor, { options: config.options ?? [], onChange: (v) => updateConfig("options", v) }),
-        /* @__PURE__ */ jsx(ScoreRangesEditor, { ranges: config.scoreRanges ?? [], onChange: (v) => updateConfig("scoreRanges", v) })
+        /* @__PURE__ */ jsx(ToggleField, { label: "Show Score", checked: !!config.showScore, onChange: (v) => updateConfig({ showScore: v }) }),
+        /* @__PURE__ */ jsx(ScoringOptionsEditor, { options: config.options ?? [], onChange: (v) => updateConfig({ options: v }) }),
+        /* @__PURE__ */ jsx(ScoreRangesEditor, { ranges: config.scoreRanges ?? [], onChange: (v) => updateConfig({ scoreRanges: v }) })
       ] });
     case "ranking":
-      return /* @__PURE__ */ jsx(ConfigSection, { title: "Ranking Settings", children: /* @__PURE__ */ jsx(MatrixItemsEditor, { label: "Items", items: config.items ?? [], onChange: (v) => updateConfig("items", v) }) });
+      return /* @__PURE__ */ jsx(ConfigSection, { title: "Ranking Settings", children: /* @__PURE__ */ jsx(MatrixItemsEditor, { label: "Items", items: config.items ?? [], onChange: (v) => updateConfig({ items: v }) }) });
+    case "phone_international":
+      return /* @__PURE__ */ jsxs(ConfigSection, { title: "International Phone Settings", children: [
+        /* @__PURE__ */ jsx(TextField, { label: "Default Country", value: config.defaultCountry ?? "US", placeholder: "e.g. US", onChange: (v) => updateConfig({ defaultCountry: v }) }),
+        /* @__PURE__ */ jsx(TextField, { label: "Priority Countries", value: config.priorityCountries?.join(", "), placeholder: "e.g. US, GB, CA", onChange: (v) => updateConfig({ priorityCountries: v ? v.split(",").map((s) => s.trim()).filter(Boolean) : void 0 }) })
+      ] });
     // Types with no additional config
     case "email":
     case "phone":
-    case "phone_international":
     case "url":
       return null;
     default:
@@ -1908,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({
@@ -1923,7 +2257,10 @@ function SelectField({
 }) {
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(Label, { className: "text-xs text-muted-foreground mb-1", children: label }),
-    /* @__PURE__ */ jsx(NativeSelect, { value, onChange: (e) => onChange(e.target.value), children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value)) })
+    /* @__PURE__ */ jsxs(Select, { value, onValueChange: onChange, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx("span", { children: options.find((o) => o.value === value)?.label ?? value }) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+    ] })
   ] });
 }
 function LikertLabelsEditor({
@@ -2069,6 +2406,59 @@ function ScoringOptionsEditor({
     ] }, index)) })
   ] });
 }
+function AppointmentSlotsEditor({
+  slots,
+  onChange
+}) {
+  const handleDateChange = (index, date) => {
+    const updated = slots.map((s, i) => i === index ? { ...s, date } : s);
+    onChange(updated);
+  };
+  const handleTimesChange = (index, timesStr) => {
+    const times = timesStr.split(",").map((t) => t.trim()).filter(Boolean);
+    const updated = slots.map((s, i) => i === index ? { ...s, times } : s);
+    onChange(updated);
+  };
+  const handleAdd = () => {
+    const tomorrow = /* @__PURE__ */ new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    const dateStr = tomorrow.toISOString().split("T")[0];
+    onChange([...slots, { date: dateStr, times: ["09:00", "10:00", "11:00", "14:00", "15:00"] }]);
+  };
+  const handleRemove = (index) => {
+    onChange(slots.filter((_, i) => i !== index));
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx(Label, { className: "text-xs text-muted-foreground", children: "Slots" }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "xs", onClick: handleAdd, className: "px-0", children: "+ Add Date" })
+    ] }),
+    slots.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: "No slots configured. Add a date to get started." }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: slots.map((slot, index) => /* @__PURE__ */ jsxs("div", { className: "p-2 rounded-md border border-border space-y-1.5 group", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "date",
+            value: slot.date,
+            onChange: (e) => handleDateChange(index, e.target.value),
+            className: "h-7 text-xs flex-1"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: () => handleRemove(index), className: "text-destructive opacity-0 group-hover:opacity-100 transition-opacity", children: "x" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: slot.times.join(", "),
+          onChange: (e) => handleTimesChange(index, e.target.value),
+          className: "h-7 text-xs",
+          placeholder: "09:00, 10:00, 14:00, 15:00"
+        }
+      )
+    ] }, index)) })
+  ] });
+}
 function ScoreRangesEditor({
   ranges,
   onChange
@@ -2101,6 +2491,26 @@ function ScoreRangesEditor({
     ] }, index)) })
   ] });
 }
+var NativeSelect = forwardRef(
+  ({ className, wrapperClassName, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative", wrapperClassName), children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          ref,
+          className: cn(
+            "flex h-9 w-full appearance-none rounded-md border border-input bg-card px-3 py-1 pr-8 text-sm shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring text-foreground cursor-pointer",
+            className
+          ),
+          ...props,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" })
+    ] });
+  }
+);
+NativeSelect.displayName = "NativeSelect";
 var RULE_TYPES = [
   { value: "minLength", label: "Min Length", description: "Minimum character count" },
   { value: "maxLength", label: "Max Length", description: "Maximum character count" },
@@ -2808,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,
           {
@@ -2985,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;
@@ -3789,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) {
@@ -4539,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 };