@squaredr/fieldcraft-pro 1.7.0 → 1.9.0

package/dist/form-builder/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@dnd-kit/core');
 var lucideReact = require('lucide-react');
@@ -8,9 +8,31 @@ var fieldcraftReact = require('@squaredr/fieldcraft-react');
 var fieldcraftCore = require('@squaredr/fieldcraft-core');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var react$1 = require('@xyflow/react');
+var SelectPrimitive = require('@radix-ui/react-select');
+var react = require('@xyflow/react');
 require('@xyflow/react/dist/style.css');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
+
 // ../license/dist/index.mjs
 var DEV_HOSTNAMES = /* @__PURE__ */ new Set([
   "localhost",
@@ -85,9 +107,9 @@ function isProductionEnvironment() {
 }
 typeof process !== "undefined" && process.env?.NEXT_PUBLIC_FCPRO_PING_URL || "https://fieldcraft.dev/api/license/ping";
 var defaultContext = { status: "validating" };
-var LicenseCtx = react.createContext(defaultContext);
+var LicenseCtx = React.createContext(defaultContext);
 function useLicense() {
-  return react.useContext(LicenseCtx);
+  return React.useContext(LicenseCtx);
 }
 function UnlicensedOverlay({ featureName, reason, children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", minHeight: "200px" }, children: [
@@ -312,38 +334,40 @@ function requireLicense(Component3, featureName) {
 }
 var MAX_HISTORY = 50;
 function useUndoRedo(currentSchema, setSchema) {
-  const historyRef = react.useRef([currentSchema]);
-  const [currentIndex, setCurrentIndex] = react.useState(0);
+  const historyRef = React.useRef([currentSchema]);
+  const [currentIndex, setCurrentIndex] = React.useState(0);
   const canUndo = currentIndex > 0;
   const canRedo = currentIndex < historyRef.current.length - 1;
-  const push = react.useCallback(
+  const push = React.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 = react.useCallback(() => {
+  const undo = React.useCallback(() => {
     if (currentIndex > 0) {
       const newIndex = currentIndex - 1;
       setCurrentIndex(newIndex);
       setSchema(historyRef.current[newIndex]);
     }
   }, [currentIndex, setSchema]);
-  const redo = react.useCallback(() => {
+  const redo = React.useCallback(() => {
     if (currentIndex < historyRef.current.length - 1) {
       const newIndex = currentIndex + 1;
       setCurrentIndex(newIndex);
       setSchema(historyRef.current[newIndex]);
     }
   }, [currentIndex, setSchema]);
-  const clear = react.useCallback(() => {
+  const clear = React.useCallback(() => {
     historyRef.current = [currentSchema];
     setCurrentIndex(0);
   }, [currentSchema]);
@@ -358,13 +382,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");
@@ -451,18 +471,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);
@@ -572,16 +613,16 @@ function findSection(schema, sectionId) {
 
 // src/form-builder/hooks/use-builder-state.ts
 function useBuilderState(initialSchema) {
-  const [schema, setSchema] = react.useState(initialSchema);
-  const [selectedItem, setSelectedItem] = react.useState(null);
-  const [isDirty, setIsDirty] = react.useState(false);
-  const schemaRef = react.useRef(schema);
+  const [schema, setSchema] = React.useState(initialSchema);
+  const [selectedItem, setSelectedItem] = React.useState(null);
+  const [isDirty, setIsDirty] = React.useState(false);
+  const schemaRef = React.useRef(schema);
   schemaRef.current = schema;
   const undoRedo = useUndoRedo(schema, (newSchema) => {
     setSchema(newSchema);
     setIsDirty(true);
   });
-  const updateSchema = react.useCallback(
+  const updateSchema = React.useCallback(
     (newSchema) => {
       setSchema(newSchema);
       undoRedo.push(newSchema);
@@ -589,54 +630,54 @@ function useBuilderState(initialSchema) {
     },
     [undoRedo]
   );
-  const applyMutation = react.useCallback(
+  const applyMutation = React.useCallback(
     (mutate) => {
       const result = mutate(schemaRef.current);
       updateSchema(result);
     },
     [updateSchema]
   );
-  const addSection2 = react.useCallback(
+  const addSection2 = React.useCallback(
     (section, index) => {
       applyMutation((s) => addSection(s, section, index));
     },
     [applyMutation]
   );
-  const removeSection2 = react.useCallback(
+  const removeSection2 = React.useCallback(
     (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;
       });
     },
     [applyMutation]
   );
-  const updateSection2 = react.useCallback(
+  const updateSection2 = React.useCallback(
     (sectionId, updates) => {
       applyMutation((s) => updateSection(s, sectionId, updates));
     },
     [applyMutation]
   );
-  const moveSection2 = react.useCallback(
+  const moveSection2 = React.useCallback(
     (sectionId, newIndex) => {
       applyMutation((s) => moveSection(s, sectionId, newIndex));
     },
     [applyMutation]
   );
-  const duplicateSection2 = react.useCallback(
+  const duplicateSection2 = React.useCallback(
     (sectionId) => {
       applyMutation((s) => duplicateSection(s, sectionId));
     },
     [applyMutation]
   );
-  const addQuestion2 = react.useCallback(
+  const addQuestion2 = React.useCallback(
     (sectionId, question, index) => {
       applyMutation((s) => addQuestion(s, sectionId, question, index));
     },
     [applyMutation]
   );
-  const removeQuestion2 = react.useCallback(
+  const removeQuestion2 = React.useCallback(
     (sectionId, questionId) => {
       applyMutation((s) => removeQuestion(s, sectionId, questionId));
       setSelectedItem((prev) => {
@@ -648,34 +689,34 @@ function useBuilderState(initialSchema) {
     },
     [applyMutation]
   );
-  const updateQuestion2 = react.useCallback(
+  const updateQuestion2 = React.useCallback(
     (sectionId, questionId, updates) => {
       applyMutation((s) => updateQuestion(s, sectionId, questionId, updates));
     },
     [applyMutation]
   );
-  const moveQuestion2 = react.useCallback(
+  const moveQuestion2 = React.useCallback(
     (sectionId, questionId, targetSectionId, newIndex) => {
       applyMutation((s) => moveQuestion(s, sectionId, questionId, targetSectionId, newIndex));
     },
     [applyMutation]
   );
-  const duplicateQuestion2 = react.useCallback(
+  const duplicateQuestion2 = React.useCallback(
     (sectionId, questionId) => {
       applyMutation((s) => duplicateQuestion(s, sectionId, questionId));
     },
     [applyMutation]
   );
-  const selectQuestion = react.useCallback((sectionId, questionId) => {
+  const selectQuestion = React.useCallback((sectionId, questionId) => {
     setSelectedItem({ type: "question", sectionId, questionId });
   }, []);
-  const selectSection = react.useCallback((sectionId) => {
+  const selectSection = React.useCallback((sectionId) => {
     setSelectedItem({ type: "section", sectionId });
   }, []);
-  const clearSelection = react.useCallback(() => {
+  const clearSelection = React.useCallback(() => {
     setSelectedItem(null);
   }, []);
-  const resetSchema = react.useCallback(
+  const resetSchema = React.useCallback(
     (newSchema) => {
       setSchema(newSchema);
       undoRedo.clear();
@@ -684,7 +725,7 @@ function useBuilderState(initialSchema) {
     },
     [undoRedo]
   );
-  const markClean = react.useCallback(() => {
+  const markClean = React.useCallback(() => {
     setIsDirty(false);
   }, []);
   return {
@@ -945,7 +986,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",
@@ -956,13 +997,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: {
@@ -1015,7 +1050,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: {
@@ -1162,7 +1197,7 @@ var DEFAULT_PALETTE = [
 
 // src/form-builder/hooks/use-drag-drop.ts
 function useDragDrop(builderState) {
-  const [activeDragItem, setActiveDragItem] = react.useState(null);
+  const [activeDragItem, setActiveDragItem] = React.useState(null);
   const sensors = core.useSensors(
     core.useSensor(core.MouseSensor, {
       activationConstraint: {
@@ -1212,11 +1247,11 @@ function useDragDrop(builderState) {
     }
     return null;
   };
-  const handleDragStart = react.useCallback((event) => {
+  const handleDragStart = React.useCallback((event) => {
     const item = parseDragItem(event.active);
     setActiveDragItem(item);
   }, []);
-  const handleDragCancel = react.useCallback(() => {
+  const handleDragCancel = React.useCallback(() => {
     setActiveDragItem(null);
   }, []);
   const handleDragEnd = (event) => {
@@ -1386,9 +1421,9 @@ function PaletteItem({ questionType, typeInfo }) {
   );
 }
 function QuestionPalette({ questionTypes, palette }) {
-  const [collapsed, setCollapsed] = react.useState({});
-  const [search, setSearch] = react.useState("");
-  const mergedPalette = react.useMemo(
+  const [collapsed, setCollapsed] = React.useState({});
+  const [search, setSearch] = React.useState("");
+  const mergedPalette = React.useMemo(
     () => palette ? [...DEFAULT_PALETTE, ...palette] : DEFAULT_PALETTE,
     [palette]
   );
@@ -1469,13 +1504,13 @@ function QuestionBlock({
 }) {
   const typeInfo = QUESTION_TYPE_INFO[question.type];
   const IconComponent = typeInfo ? getIcon(typeInfo.icon) : null;
-  const [isEditing, setIsEditing] = react.useState(false);
-  const [editValue, setEditValue] = react.useState(question.label);
-  const inputRef = react.useRef(null);
-  react.useEffect(() => {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editValue, setEditValue] = React.useState(question.label);
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
     if (!isEditing) setEditValue(question.label);
   }, [question.label, isEditing]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -1632,7 +1667,7 @@ function ConfirmDialog({ open, title, message, onConfirm, onCancel }) {
   );
 }
 function SectionBlock({ section, builderState }) {
-  const [confirmDelete, setConfirmDelete] = react.useState(false);
+  const [confirmDelete, setConfirmDelete] = React.useState(false);
   const { setNodeRef } = core.useDroppable({
     id: `section-end-${section.id}`,
     data: { type: "section", sectionId: section.id, index: section.questions.length }
@@ -1745,6 +1780,14 @@ function SectionBlock({ section, builderState }) {
 }
 function FormCanvas({ builderState }) {
   const { schema } = builderState;
+  const [localTitle, setLocalTitle] = React.useState(schema.title);
+  const [localDesc, setLocalDesc] = React.useState(schema.description ?? "");
+  React.useEffect(() => {
+    setLocalTitle(schema.title);
+  }, [schema.title]);
+  React.useEffect(() => {
+    setLocalDesc(schema.description ?? "");
+  }, [schema.description]);
   const handleAddSection = () => {
     const newSection = {
       id: generateSectionId(),
@@ -1761,9 +1804,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"
@@ -1772,9 +1818,12 @@ function FormCanvas({ builderState }) {
       /* @__PURE__ */ jsxRuntime.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)"
@@ -1813,259 +1862,469 @@ function FormCanvas({ builderState }) {
     ] })
   ] }) });
 }
-var NativeSelect = react.forwardRef(
-  ({ className, wrapperClassName, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", wrapperClassName), children: [
+var Select = SelectPrimitive__namespace.Root;
+var SelectTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.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__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4 text-muted-foreground" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = React__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.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__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-4" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        "select",
+        SelectPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" })
-    ] });
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" }) })
+    ]
   }
-);
-NativeSelect.displayName = "NativeSelect";
+) }));
+SelectContent.displayName = "SelectContent";
+var SelectItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.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__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-4" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.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 = React.useMemo(() => {
+    if (!schema?.sections) return [];
+    return schema.sections.flatMap((s) => s.questions || []);
+  }, [schema]);
+  const candidateAmountFields = React.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 = React.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__ */ jsxRuntime.jsxs(ConfigSection, { title: "Text Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Length", value: config.maxLength, placeholder: "255", onChange: (v) => updateConfig("maxLength", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(SelectField, { label: "Input Type", value: config.inputType ?? "text", options: [{ label: "Text", value: "text" }, { label: "Password", value: "password" }], onChange: (v) => updateConfig("inputType", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Prefix", value: config.prefix, placeholder: "e.g. $", onChange: (v) => updateConfig("prefix", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Suffix", value: config.suffix, placeholder: "e.g. USD", onChange: (v) => updateConfig("suffix", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Length", value: config.maxLength, placeholder: "255", onChange: (v) => updateConfig({ maxLength: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectField, { label: "Input Type", value: config.inputType ?? "text", options: [{ label: "Text", value: "text" }, { label: "Password", value: "password" }], onChange: (v) => updateConfig({ inputType: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Prefix", value: config.prefix, placeholder: "e.g. $", onChange: (v) => updateConfig({ prefix: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Suffix", value: config.suffix, placeholder: "e.g. USD", onChange: (v) => updateConfig({ suffix: v }) })
       ] });
     case "long_text":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Text Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Length", value: config.maxLength, placeholder: "No limit", onChange: (v) => updateConfig("maxLength", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Rows", value: config.rows, placeholder: "4", onChange: (v) => updateConfig("rows", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Show Character Count", checked: !!config.showCharCount, onChange: (v) => updateConfig("showCharCount", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Length", value: config.maxLength, placeholder: "No limit", onChange: (v) => updateConfig({ maxLength: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Rows", value: config.rows, placeholder: "4", onChange: (v) => updateConfig({ rows: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Show Character Count", checked: !!config.showCharCount, onChange: (v) => updateConfig({ showCharCount: v }) })
       ] });
     case "legal_name":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Name Fields", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Show Middle Name", checked: !!config.showMiddleName, onChange: (v) => updateConfig("showMiddleName", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Show Suffix", checked: !!config.showSuffix, onChange: (v) => updateConfig("showSuffix", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Show Middle Name", checked: !!config.showMiddleName, onChange: (v) => updateConfig({ showMiddleName: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Show Suffix", checked: !!config.showSuffix, onChange: (v) => updateConfig({ showSuffix: v }) })
       ] });
     // ── Numeric ──
     case "number":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Number Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Min", value: config.min, onChange: (v) => updateConfig("min", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max", value: config.max, onChange: (v) => updateConfig("max", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Step", value: config.step, placeholder: "1", onChange: (v) => updateConfig("step", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Decimal Places", value: config.decimalPlaces, placeholder: "0", onChange: (v) => updateConfig("decimalPlaces", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Prefix", value: config.prefix, placeholder: "e.g. $", onChange: (v) => updateConfig("prefix", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Suffix", value: config.suffix, placeholder: "e.g. kg", onChange: (v) => updateConfig("suffix", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Min Value", value: config.min, onChange: (v) => updateConfig({ min: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Value", value: config.max, onChange: (v) => updateConfig({ max: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Step", value: config.step, placeholder: "1", onChange: (v) => updateConfig({ step: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Prefix", value: config.prefix, placeholder: "e.g. $", onChange: (v) => updateConfig({ prefix: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Suffix", value: config.suffix, placeholder: "e.g. kg", onChange: (v) => updateConfig({ suffix: v }) })
       ] });
     case "slider":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Slider Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Min", value: config.min, placeholder: "0", onChange: (v) => updateConfig("min", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max", value: config.max, placeholder: "100", onChange: (v) => updateConfig("max", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Step", value: config.step, placeholder: "1", onChange: (v) => updateConfig("step", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Show Value", checked: !!config.showValue, onChange: (v) => updateConfig("showValue", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Min Label", value: config.minLabel, onChange: (v) => updateConfig("minLabel", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Max Label", value: config.maxLabel, onChange: (v) => updateConfig("maxLabel", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Min Value", value: config.min, placeholder: "0", onChange: (v) => updateConfig({ min: v ?? 0 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Value", value: config.max, placeholder: "100", onChange: (v) => updateConfig({ max: v ?? 100 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Step", value: config.step, placeholder: "1", onChange: (v) => updateConfig({ step: v ?? 1 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Min Label", value: config.minLabel, placeholder: "Low", onChange: (v) => updateConfig({ minLabel: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Max Label", value: config.maxLabel, placeholder: "High", onChange: (v) => updateConfig({ maxLabel: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Show Value", checked: config.showValue !== false, onChange: (v) => updateConfig({ showValue: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Unit", value: config.unit, placeholder: "e.g. %", onChange: (v) => updateConfig({ unit: v }) })
       ] });
     case "rating":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Rating Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Stars", value: config.max, placeholder: "5", onChange: (v) => updateConfig("max", v) }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToggleField, { label: "Show Labels", checked: !!config.showLabels, onChange: (v) => updateConfig("showLabels", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Rating", value: config.maxRating, placeholder: "5", onChange: (v) => updateConfig({ maxRating: v ?? 5 }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToggleField, { label: "Allow Half Ratings", checked: !!config.allowHalf, onChange: (v) => updateConfig({ allowHalf: v }) })
       ] });
     case "nps":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "NPS Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Low Label", value: config.lowLabel ?? "Not likely", onChange: (v) => updateConfig("lowLabel", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "High Label", value: config.highLabel ?? "Very likely", onChange: (v) => updateConfig("highLabel", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Left Label", value: config.leftLabel ?? "Not likely", onChange: (v) => updateConfig({ leftLabel: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Right Label", value: config.rightLabel ?? "Extremely likely", onChange: (v) => updateConfig({ rightLabel: v }) })
       ] });
     case "opinion_scale":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Scale Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Min", value: config.min, placeholder: "1", onChange: (v) => updateConfig("min", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max", value: config.max, placeholder: "5", onChange: (v) => updateConfig("max", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Step", value: config.step, placeholder: "1", onChange: (v) => updateConfig("step", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Min Label", value: config.minLabel, onChange: (v) => updateConfig("minLabel", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Max Label", value: config.maxLabel, onChange: (v) => updateConfig("maxLabel", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Min", value: config.min, placeholder: "1", onChange: (v) => updateConfig({ min: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max", value: config.max, placeholder: "5", onChange: (v) => updateConfig({ max: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Step", value: config.step, placeholder: "1", onChange: (v) => updateConfig({ step: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Min Label", value: config.minLabel, onChange: (v) => updateConfig({ minLabel: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Max Label", value: config.maxLabel, onChange: (v) => updateConfig({ maxLabel: v }) })
       ] });
     case "likert":
-      return /* @__PURE__ */ jsxRuntime.jsx(ConfigSection, { title: "Likert Settings", children: /* @__PURE__ */ jsxRuntime.jsx(LikertLabelsEditor, { labels: config.labels ?? ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"], onChange: (v) => updateConfig("labels", v) }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(ConfigSection, { title: "Likert Settings", children: /* @__PURE__ */ jsxRuntime.jsx(LikertLabelsEditor, { labels: config.labels ?? ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"], onChange: (v) => updateConfig({ labels: v }) }) });
     // ── Selection ──
     case "single_select":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Select Settings", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToggleField, { label: "Allow Other", checked: !!config.allowOther, onChange: (v) => updateConfig("allowOther", v) }),
-        !!config.allowOther && /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Other Label", value: config.otherLabel ?? "Other", onChange: (v) => updateConfig("otherLabel", v) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToggleField, { label: "Allow Other", checked: !!config.allowOther, onChange: (v) => v ? updateConfig({ allowOther: true }) : updateConfig({ allowOther: false, otherLabel: void 0 }) }),
+        !!config.allowOther && /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Other Label", value: config.otherLabel ?? "Other", onChange: (v) => updateConfig({ otherLabel: v }) })
       ] });
     case "multi_select":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Multi-Select Settings", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NumberField, { label: "Min Selections", value: config.minSelections, onChange: (v) => updateConfig("minSelections", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Selections", value: config.maxSelections, onChange: (v) => updateConfig("maxSelections", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Allow Other", checked: !!config.allowOther, onChange: (v) => updateConfig("allowOther", v) }),
-        !!config.allowOther && /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Other Label", value: config.otherLabel ?? "Other", onChange: (v) => updateConfig("otherLabel", v) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NumberField, { label: "Min Selections", value: config.minSelections, onChange: (v) => updateConfig({ minSelections: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Selections", value: config.maxSelections, onChange: (v) => updateConfig({ maxSelections: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Allow Other", checked: !!config.allowOther, onChange: (v) => v ? updateConfig({ allowOther: true }) : updateConfig({ allowOther: false, otherLabel: void 0 }) }),
+        !!config.allowOther && /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Other Label", value: config.otherLabel ?? "Other", onChange: (v) => updateConfig({ otherLabel: v }) })
       ] });
     case "dropdown":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Dropdown Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Searchable", checked: !!config.searchable, onChange: (v) => updateConfig("searchable", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Allow Other", checked: !!config.allowOther, onChange: (v) => updateConfig("allowOther", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Multiple", checked: !!config.multiple, onChange: (v) => updateConfig("multiple", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Searchable", checked: !!config.searchable, onChange: (v) => updateConfig({ searchable: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Allow Other", checked: !!config.allowOther, onChange: (v) => updateConfig({ allowOther: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Multiple", checked: !!config.multiple, onChange: (v) => updateConfig({ multiple: v }) })
       ] });
     case "boolean":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Yes/No Settings", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextField, { label: "True Label", value: config.trueLabel ?? "Yes", onChange: (v) => updateConfig("trueLabel", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "False Label", value: config.falseLabel ?? "No", onChange: (v) => updateConfig("falseLabel", v) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextField, { label: "True Label", value: config.trueLabel ?? "Yes", onChange: (v) => updateConfig({ trueLabel: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "False Label", value: config.falseLabel ?? "No", onChange: (v) => updateConfig({ falseLabel: v }) })
       ] });
     case "country_select":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Country Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Show Flags", checked: config.showFlags !== false, onChange: (v) => updateConfig("showFlags", v) }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToggleField, { label: "Show Flags", checked: config.showFlags !== false, onChange: (v) => updateConfig({ showFlags: v }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ConfigSection, { title: "Date Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Min Date", value: config.minDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig("minDate", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Max Date", value: config.maxDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig("maxDate", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Disable Past Dates", checked: !!config.disablePast, onChange: (v) => updateConfig("disablePast", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Disable Future Dates", checked: !!config.disableFuture, onChange: (v) => updateConfig("disableFuture", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Format", value: config.format, placeholder: "e.g. MM/DD/YYYY", onChange: (v) => updateConfig("format", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Min Date", value: config.minDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig({ minDate: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Max Date", value: config.maxDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig({ maxDate: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Disable Past Dates", checked: !!config.disablePast, onChange: (v) => updateConfig({ disablePast: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Disable Future Dates", checked: !!config.disableFuture, onChange: (v) => updateConfig({ disableFuture: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Format", value: config.format, placeholder: "e.g. MM/DD/YYYY", onChange: (v) => updateConfig({ format: v }) })
       ] });
     case "time":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Time Settings", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NumberField, { label: "Minute Step", value: config.minuteStep, placeholder: "1", onChange: (v) => updateConfig("minuteStep", v) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NumberField, { label: "Minute Step", value: config.minuteStep, placeholder: "1", onChange: (v) => updateConfig({ minuteStep: v }) })
       ] });
     case "date_range":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Date Range Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Min Date", value: config.minDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig("minDate", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Max Date", value: config.maxDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig("maxDate", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Range (days)", value: config.maxRangeDays, onChange: (v) => updateConfig("maxRangeDays", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Min Date", value: config.minDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig({ minDate: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Max Date", value: config.maxDate, placeholder: "YYYY-MM-DD", onChange: (v) => updateConfig({ maxDate: v }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ConfigSection, { title: "Appointment Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Duration (min)", value: config.duration ?? 30, onChange: (v) => updateConfig("duration", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Timezone", value: config.timezone, placeholder: "e.g. America/New_York", onChange: (v) => updateConfig("timezone", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Slots URL", value: config.slotsUrl, placeholder: "API endpoint for available slots", onChange: (v) => updateConfig("slotsUrl", v) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          TextField,
+          {
+            label: "Slots URL",
+            value: config.slotsUrl,
+            placeholder: "https://example.com/slots",
+            onChange: (v) => updateConfig({ slotsUrl: v ?? "" })
+          }
+        ),
+        appointmentMode === "embed" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TextField,
+            {
+              label: "Embed URL",
+              value: config.embedUrl,
+              placeholder: "https://calendly.com/... or https://cal.com/...",
+              onChange: (v) => updateConfig({ embedUrl: v ?? "" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NumberField, { label: "Duration (min)", value: config.duration ?? 30, onChange: (v) => updateConfig({ duration: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Timezone", value: config.timezone, placeholder: "e.g. America/New_York", onChange: (v) => updateConfig({ timezone: v }) }),
+        candidateTimezoneFields.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            TextField,
+            {
+              label: "Custom Timezone Field ID",
+              value: config.timezoneField,
+              placeholder: "e.g. timezone",
+              onChange: (v) => updateConfig({ timezoneField: v || void 0 })
+            }
+          ) })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          TextField,
+          {
+            label: "Timezone Field",
+            value: config.timezoneField,
+            placeholder: "Field ID for dynamic timezone",
+            onChange: (v) => updateConfig({ timezoneField: v || void 0 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Date Format", value: config.dateFormat, placeholder: "Locale-aware (default)", onChange: (v) => updateConfig({ dateFormat: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToggleField,
+          {
+            label: "Auto-Advance on Booking Complete",
+            checked: config.autoAdvance !== false,
+            onChange: (v) => updateConfig({ autoAdvance: v })
+          }
+        ),
+        appointmentMode === "static" && /* @__PURE__ */ jsxRuntime.jsx(
+          AppointmentSlotsEditor,
+          {
+            slots: config.slots ?? [],
+            onChange: (v) => updateConfig({ slots: v })
+          }
+        )
       ] });
+    }
     // ── Media ──
     case "file_upload":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Upload Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Files", value: config.maxFiles ?? 1, onChange: (v) => updateConfig("maxFiles", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Size (MB)", value: config.maxSizeMb ?? 10, onChange: (v) => updateConfig("maxSizeMb", v) }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextField, { label: "Upload URL", value: config.uploadUrl, placeholder: "Server upload endpoint", onChange: (v) => updateConfig("uploadUrl", v) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: "\u{1F4E6}" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Uploads stream to your cloud bucket using Form / Account Storage settings." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Files", value: config.maxFiles ?? 1, onChange: (v) => updateConfig({ maxFiles: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Size (MB)", value: config.maxSizeMb ?? 10, onChange: (v) => updateConfig({ maxSizeMb: v }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          TextField,
+          {
+            label: "Upload URL",
+            value: config.uploadUrl,
+            placeholder: "https://api.example.com/s3/presign",
+            onChange: (v) => updateConfig({ uploadUrl: v || void 0 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TextField,
+          {
+            label: "Public Key",
+            value: config.publicKey,
+            placeholder: "pk_test_...",
+            onChange: (v) => updateConfig({ publicKey: v || void 0 })
+          }
+        )
       ] });
     case "signature":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Signature Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Pen Color", value: config.penColor, placeholder: "#000000", onChange: (v) => updateConfig("penColor", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Background", value: config.backgroundColor, placeholder: "#ffffff", onChange: (v) => updateConfig("backgroundColor", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Width (px)", value: config.width, onChange: (v) => updateConfig("width", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Height (px)", value: config.height, onChange: (v) => updateConfig("height", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Pen Color", value: config.penColor, placeholder: "#000000", onChange: (v) => updateConfig({ penColor: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Background", value: config.backgroundColor, placeholder: "#ffffff", onChange: (v) => updateConfig({ backgroundColor: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Width (px)", value: config.width, onChange: (v) => updateConfig({ width: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Height (px)", value: config.height, onChange: (v) => updateConfig({ height: v }) })
       ] });
     case "image_capture":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Camera Settings", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NumberField, { label: "Max Size (MB)", value: config.maxSizeMb, onChange: (v) => updateConfig("maxSizeMb", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Allow Gallery", checked: config.allowGallery !== false, onChange: (v) => updateConfig("allowGallery", v) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NumberField, { label: "Max Size (MB)", value: config.maxSizeMb, onChange: (v) => updateConfig({ maxSizeMb: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Allow Gallery", checked: config.allowGallery !== false, onChange: (v) => updateConfig({ allowGallery: v }) })
       ] });
     // ── Content & Visual ──
     case "welcome-screen":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Welcome Screen", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Heading", value: config.heading ?? "Welcome", onChange: (v) => updateConfig("heading", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextareaField, { label: "Description", value: config.description, onChange: (v) => updateConfig("description", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Button Text", value: config.buttonText ?? "Start", onChange: (v) => updateConfig("buttonText", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Image URL", value: config.imageUrl, placeholder: "https://...", onChange: (v) => updateConfig("imageUrl", v) }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextField, { label: "Heading", value: config.heading ?? "Welcome", onChange: (v) => updateConfig({ heading: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextareaField, { label: "Description", value: config.description, onChange: (v) => updateConfig({ description: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Button Text", value: config.buttonText ?? "Start", onChange: (v) => updateConfig({ buttonText: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Image URL", value: config.imageUrl, placeholder: "https://...", onChange: (v) => updateConfig({ imageUrl: v }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ConfigSection, { title: "Thank You Screen", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Heading", value: config.heading ?? "Thank You!", onChange: (v) => updateConfig("heading", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextareaField, { label: "Description", value: config.description ?? "", onChange: (v) => updateConfig("description", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Image URL", value: config.imageUrl, placeholder: "https://...", onChange: (v) => updateConfig("imageUrl", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Redirect URL", value: config.redirectUrl, placeholder: "https://...", onChange: (v) => updateConfig("redirectUrl", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Redirect Delay (s)", value: config.redirectDelay, placeholder: "0", onChange: (v) => updateConfig("redirectDelay", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Show Response Summary", checked: !!config.showSummary, onChange: (v) => updateConfig("showSummary", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Heading", value: config.heading ?? "Thank You!", onChange: (v) => updateConfig({ heading: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextareaField, { label: "Description", value: config.description ?? "", onChange: (v) => updateConfig({ description: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Image URL", value: config.imageUrl, placeholder: "https://...", onChange: (v) => updateConfig({ imageUrl: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Redirect URL", value: config.redirectUrl, placeholder: "https://...", onChange: (v) => updateConfig({ redirectUrl: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Redirect Delay (s)", value: config.redirectDelay, placeholder: "0", onChange: (v) => updateConfig({ redirectDelay: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Show Response Summary", checked: !!config.showSummary, onChange: (v) => updateConfig({ showSummary: v }) })
       ] });
     case "rich-text":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Rich Text", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TextareaField, { label: "Content", value: config.content ?? "", rows: 6, onChange: (v) => updateConfig("content", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(SelectField, { label: "Format", value: config.format ?? "html", options: [{ label: "HTML", value: "html" }, { label: "Markdown", value: "markdown" }], onChange: (v) => updateConfig("format", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(TextareaField, { label: "Content", value: config.content ?? "", rows: 6, onChange: (v) => updateConfig({ content: v }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ConfigSection, { title: "Image Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Source URL", value: config.src ?? "", placeholder: "https://...", onChange: (v) => updateConfig("src", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Alt Text", value: config.alt ?? "", onChange: (v) => updateConfig("alt", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Caption", value: config.caption, onChange: (v) => updateConfig("caption", v) }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextField, { label: "Width", value: config.width, placeholder: "e.g. 100% or 300px", onChange: (v) => updateConfig("width", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Link URL", value: config.link, placeholder: "Click opens this URL", onChange: (v) => updateConfig("link", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Source URL", value: config.src ?? "", placeholder: "https://...", onChange: (v) => updateConfig({ src: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Alt Text", value: config.alt ?? "", onChange: (v) => updateConfig({ alt: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Caption", value: config.caption, onChange: (v) => updateConfig({ caption: v }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextField, { label: "Width", value: config.width, placeholder: "e.g. 100% or 300px", onChange: (v) => updateConfig({ width: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Link URL", value: config.link, placeholder: "Click opens this URL", onChange: (v) => updateConfig({ link: v }) })
       ] });
     case "video":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Video Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Source URL", value: config.src ?? "", placeholder: "YouTube/Vimeo URL", onChange: (v) => updateConfig("src", v) }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToggleField, { label: "Autoplay", checked: !!config.autoplay, onChange: (v) => updateConfig("autoplay", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Muted", checked: !!config.muted, onChange: (v) => updateConfig("muted", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Width", value: config.width, placeholder: "e.g. 100% or 640px", onChange: (v) => updateConfig("width", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Height", value: config.height, placeholder: "e.g. 360px", onChange: (v) => updateConfig("height", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Source URL", value: config.src ?? "", placeholder: "YouTube/Vimeo URL", onChange: (v) => updateConfig({ src: v }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToggleField, { label: "Autoplay", checked: !!config.autoplay, onChange: (v) => updateConfig({ autoplay: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Muted", checked: !!config.muted, onChange: (v) => updateConfig({ muted: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Width", value: config.width, placeholder: "e.g. 100% or 640px", onChange: (v) => updateConfig({ width: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Height", value: config.height, placeholder: "e.g. 360px", onChange: (v) => updateConfig({ height: v }) })
       ] });
     case "divider":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Divider Settings", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextField, { label: "Color", value: config.color, placeholder: "#e5e7eb", onChange: (v) => updateConfig("color", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Thickness (px)", value: config.thickness, placeholder: "1", onChange: (v) => updateConfig("thickness", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Spacing (px)", value: config.spacing, placeholder: "16", onChange: (v) => updateConfig("spacing", v) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextField, { label: "Color", value: config.color, placeholder: "#e5e7eb", onChange: (v) => updateConfig({ color: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Thickness (px)", value: config.thickness, placeholder: "1", onChange: (v) => updateConfig({ thickness: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Spacing (px)", value: config.spacing, placeholder: "16", onChange: (v) => updateConfig({ spacing: v }) })
       ] });
     case "spacer":
-      return /* @__PURE__ */ jsxRuntime.jsx(ConfigSection, { title: "Spacer Settings", children: /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Height (px)", value: config.height ?? 32, onChange: (v) => updateConfig("height", v) }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(ConfigSection, { title: "Spacer Settings", children: /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Height (px)", value: config.height ?? 32, onChange: (v) => updateConfig({ height: v }) }) });
     // ── Structural ──
     case "section_header":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Header Settings", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToggleField, { label: "Show Divider", checked: !!config.showDivider, onChange: (v) => updateConfig("showDivider", v) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToggleField, { label: "Show Divider", checked: !!config.showDivider, onChange: (v) => updateConfig({ showDivider: v }) })
       ] });
     case "info_block":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Info Block", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TextareaField, { label: "Content", value: config.content ?? "", rows: 4, onChange: (v) => updateConfig("content", v) }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextareaField, { label: "Content", value: config.content ?? "", rows: 4, onChange: (v) => updateConfig({ content: v }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ConfigSection, { title: "Page Break", children: /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Label", value: config.label, placeholder: "Next page label", onChange: (v) => updateConfig("label", v) }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(ConfigSection, { title: "Page Break", children: /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Label", value: config.label, placeholder: "Next page label", onChange: (v) => updateConfig({ label: v }) }) });
     case "consent":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Consent Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TextareaField, { label: "Consent Text", value: config.text ?? "", rows: 4, onChange: (v) => updateConfig("text", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Checkbox Label", value: config.checkboxLabel ?? "I agree", onChange: (v) => updateConfig("checkboxLabel", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextareaField, { label: "Expandable Text", value: config.expandableText, rows: 3, placeholder: "Additional text shown on expand", onChange: (v) => updateConfig("expandableText", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(TextareaField, { label: "Consent Text", value: config.text ?? "", rows: 4, onChange: (v) => updateConfig({ text: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Checkbox Label", value: config.checkboxLabel ?? "I agree", onChange: (v) => updateConfig({ checkboxLabel: v }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ConfigSection, { title: "Matrix Settings", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MatrixItemsEditor, { label: "Rows", items: config.rows ?? [], onChange: (v) => updateConfig("rows", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(MatrixItemsEditor, { label: "Columns", items: config.columns ?? [], onChange: (v) => updateConfig("columns", v) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MatrixItemsEditor, { label: "Rows", items: config.rows ?? [], onChange: (v) => updateConfig({ rows: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(MatrixItemsEditor, { label: "Columns", items: config.columns ?? [], onChange: (v) => updateConfig({ columns: v }) })
       ] });
     case "repeater":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Repeater Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Min Entries", value: config.minEntries, placeholder: "1", onChange: (v) => updateConfig("minEntries", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Entries", value: config.maxEntries, onChange: (v) => updateConfig("maxEntries", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Default Entries", value: config.defaultEntries, placeholder: "1", onChange: (v) => updateConfig("defaultEntries", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Add Button Label", value: config.addLabel, placeholder: "Add Entry", onChange: (v) => updateConfig("addLabel", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Remove Button Label", value: config.removeLabel, placeholder: "Remove", onChange: (v) => updateConfig("removeLabel", v) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Min Entries", value: config.minEntries, placeholder: "1", onChange: (v) => updateConfig({ minEntries: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Max Entries", value: config.maxEntries, onChange: (v) => updateConfig({ maxEntries: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Default Entries", value: config.defaultEntries, placeholder: "1", onChange: (v) => updateConfig({ defaultEntries: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Add Button Label", value: config.addLabel, placeholder: "Add Entry", onChange: (v) => updateConfig({ addLabel: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Remove Button Label", value: config.removeLabel, placeholder: "Remove", onChange: (v) => updateConfig({ removeLabel: v }) }),
         /* @__PURE__ */ jsxRuntime.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": {
@@ -2079,63 +2338,157 @@ function QuestionConfigEditor({ question, onUpdate }) {
       ];
       const activeFields = config.fields ?? ["street", "city", "state", "zip", "country"];
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Address Settings", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextField, { label: "API Key", value: config.apiKey, placeholder: "Provider API key", onChange: (v) => updateConfig("apiKey", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Default Country", value: config.defaultCountry, placeholder: "e.g. US", onChange: (v) => updateConfig("defaultCountry", v) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextField, { label: "API Key", value: config.apiKey, placeholder: "Provider API key", onChange: (v) => updateConfig({ apiKey: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Default Country", value: config.defaultCountry, placeholder: "e.g. US", onChange: (v) => updateConfig({ defaultCountry: v }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Label, { className: "text-xs text-muted-foreground mb-2 block", children: "Fields" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: ADDRESS_FIELDS.map((f) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ConfigSection, { title: "Payment Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SelectField, { label: "Provider", value: config.provider ?? "stripe", options: [{ label: "Stripe", value: "stripe" }, { label: "PayPal", value: "paypal" }], onChange: (v) => updateConfig("provider", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Public Key", value: config.publicKey ?? "", placeholder: "Provider public/client key", onChange: (v) => updateConfig("publicKey", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NumberField, { label: "Amount", value: config.amount, onChange: (v) => updateConfig("amount", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Amount Field", value: config.amountField, placeholder: "Field ID for dynamic amount", onChange: (v) => updateConfig("amountField", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Currency", value: config.currency, placeholder: "USD", onChange: (v) => updateConfig("currency", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Description", value: config.description, onChange: (v) => updateConfig("description", v) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          TextField,
+          {
+            label: "Public Key",
+            value: config.publicKey,
+            placeholder: "pk_test_...",
+            onChange: (v) => updateConfig({ publicKey: v || void 0 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            TextField,
+            {
+              label: "Custom Field ID",
+              value: config.amountField,
+              placeholder: "Field ID for dynamic amount",
+              onChange: (v) => updateConfig({ amountField: v || void 0 })
+            }
+          ) })
+        ] }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          NumberField,
+          {
+            label: "Fixed Amount",
+            value: config.amount,
+            onChange: (v) => updateConfig({ amount: v })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Currency", value: config.currency ?? "USD", placeholder: "USD", onChange: (v) => updateConfig({ currency: v || "USD" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Description", value: config.description, onChange: (v) => updateConfig({ description: v }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ConfigSection, { title: "Calculated Field", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Expression", value: config.expression ?? "", placeholder: "e.g. {q1} + {q2}", onChange: (v) => updateConfig("expression", v) }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NumberField, { label: "Decimal Places", value: config.decimalPlaces, placeholder: "2", onChange: (v) => updateConfig("decimalPlaces", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Prefix", value: config.prefix, onChange: (v) => updateConfig("prefix", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Suffix", value: config.suffix, onChange: (v) => updateConfig("suffix", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Visible to User", checked: config.visible !== false, onChange: (v) => updateConfig("visible", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Expression", value: config.expression ?? "", placeholder: "e.g. {q1} + {q2}", onChange: (v) => updateConfig({ expression: v }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NumberField, { label: "Decimal Places", value: config.decimalPlaces, placeholder: "2", onChange: (v) => updateConfig({ decimalPlaces: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Prefix", value: config.prefix, onChange: (v) => updateConfig({ prefix: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Suffix", value: config.suffix, onChange: (v) => updateConfig({ suffix: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Visible to User", checked: config.visible !== false, onChange: (v) => updateConfig({ visible: v }) })
       ] });
     case "hidden":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Hidden Field", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextField, { label: "Default Value", value: config.defaultValue, onChange: (v) => updateConfig("defaultValue", v) }),
-        config.source === "url_param" && /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Parameter Name", value: config.paramName, placeholder: "e.g. utm_source", onChange: (v) => updateConfig("paramName", v) }),
-        config.source === "cookie" && /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Cookie Name", value: config.cookieName, onChange: (v) => updateConfig("cookieName", v) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TextField, { label: "Default Value", value: config.defaultValue, onChange: (v) => updateConfig({ defaultValue: v }) }),
+        config.source === "url_param" && /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Parameter Name", value: config.paramName, placeholder: "e.g. utm_source", onChange: (v) => updateConfig({ paramName: v }) }),
+        config.source === "cookie" && /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Cookie Name", value: config.cookieName, onChange: (v) => updateConfig({ cookieName: v }) })
       ] });
     case "scoring":
       return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Scoring Settings", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Show Score", checked: !!config.showScore, onChange: (v) => updateConfig("showScore", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ScoringOptionsEditor, { options: config.options ?? [], onChange: (v) => updateConfig("options", v) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ScoreRangesEditor, { ranges: config.scoreRanges ?? [], onChange: (v) => updateConfig("scoreRanges", v) })
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleField, { label: "Show Score", checked: !!config.showScore, onChange: (v) => updateConfig({ showScore: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScoringOptionsEditor, { options: config.options ?? [], onChange: (v) => updateConfig({ options: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScoreRangesEditor, { ranges: config.scoreRanges ?? [], onChange: (v) => updateConfig({ scoreRanges: v }) })
       ] });
     case "ranking":
-      return /* @__PURE__ */ jsxRuntime.jsx(ConfigSection, { title: "Ranking Settings", children: /* @__PURE__ */ jsxRuntime.jsx(MatrixItemsEditor, { label: "Items", items: config.items ?? [], onChange: (v) => updateConfig("items", v) }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(ConfigSection, { title: "Ranking Settings", children: /* @__PURE__ */ jsxRuntime.jsx(MatrixItemsEditor, { label: "Items", items: config.items ?? [], onChange: (v) => updateConfig({ items: v }) }) });
+    case "phone_international":
+      return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "International Phone Settings", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Default Country", value: config.defaultCountry ?? "US", placeholder: "e.g. US", onChange: (v) => updateConfig({ defaultCountry: v }) }),
+        /* @__PURE__ */ jsxRuntime.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:
@@ -2212,11 +2565,12 @@ function NumberField({
 function ToggleField({
   label,
   checked,
-  onChange
+  onChange,
+  disabled
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Label, { className: "text-xs text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Switch, { checked, onCheckedChange: onChange })
+    /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Switch, { checked, onCheckedChange: onChange, disabled })
   ] });
 }
 function SelectField({
@@ -2227,7 +2581,10 @@ function SelectField({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Label, { className: "text-xs text-muted-foreground mb-1", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx(NativeSelect, { value, onChange: (e) => onChange(e.target.value), children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value)) })
+    /* @__PURE__ */ jsxRuntime.jsxs(Select, { value, onValueChange: onChange, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: options.find((o) => o.value === value)?.label ?? value }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+    ] })
   ] });
 }
 function LikertLabelsEditor({
@@ -2373,6 +2730,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__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Label, { className: "text-xs text-muted-foreground", children: "Slots" }),
+      /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { type: "button", variant: "link", size: "xs", onClick: handleAdd, className: "px-0", children: "+ Add Date" })
+    ] }),
+    slots.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-muted-foreground", children: "No slots configured. Add a date to get started." }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: slots.map((slot, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 rounded-md border border-border space-y-1.5 group", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          fieldcraftReact.Input,
+          {
+            type: "date",
+            value: slot.date,
+            onChange: (e) => handleDateChange(index, e.target.value),
+            className: "h-7 text-xs flex-1"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.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__ */ jsxRuntime.jsx(
+        fieldcraftReact.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
@@ -2405,6 +2815,26 @@ function ScoreRangesEditor({
     ] }, index)) })
   ] });
 }
+var NativeSelect = React.forwardRef(
+  ({ className, wrapperClassName, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", wrapperClassName), children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.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" },
@@ -2809,7 +3239,7 @@ function FormSettingsPanel({ schema, onUpdate }) {
   ];
   const displayMode = settings.displayMode ?? "stepped";
   const effectiveDisplayMode = hasConditions && displayMode === "classic" ? "stepped" : displayMode;
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (effectiveDisplayMode !== displayMode) {
       onUpdate({ ...schema, settings: { ...settings, displayMode: effectiveDisplayMode } });
     }
@@ -2966,7 +3396,7 @@ function SettingsSelect({
 }
 function PropertiesPanel({ builderState }) {
   const { schema, selectedItem } = builderState;
-  const [showSettings, setShowSettings] = react.useState(false);
+  const [showSettings, setShowSettings] = React.useState(false);
   if (showSettings) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-80 h-full border-l border-border bg-card flex flex-col", children: [
       /* @__PURE__ */ jsxRuntime.jsx(PanelHeader, { title: "Form Settings", onClose: () => setShowSettings(false) }),
@@ -3041,11 +3471,11 @@ function SectionProperties({ section, onUpdate, onClose, onOpenSettings }) {
   ] });
 }
 function QuestionProperties({ question, sectionId, builderState, onClose, onOpenSettings }) {
-  const [activeTab, setActiveTab] = react.useState("basic");
+  const [activeTab, setActiveTab] = React.useState("basic");
   const typeInfo = QUESTION_TYPE_INFO[question.type];
   const IconComponent = typeInfo ? getIcon(typeInfo.icon) : null;
   const hasOptions = typeInfo?.requiresOptions || question.options && question.options.length > 0;
-  const updateQuestion2 = react.useCallback(
+  const updateQuestion2 = React.useCallback(
     (updates) => {
       builderState.updateQuestion(sectionId, question.id, updates);
     },
@@ -3112,7 +3542,14 @@ function QuestionProperties({ question, sectionId, builderState, onClose, onOpen
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(QuestionConfigEditor, { question, onUpdate: updateQuestion2 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          QuestionConfigEditor,
+          {
+            question,
+            schema: builderState.schema,
+            onUpdate: updateQuestion2
+          }
+        ),
         hasOptions && /* @__PURE__ */ jsxRuntime.jsx(
           OptionsEditor,
           {
@@ -3220,7 +3657,7 @@ function FieldGroup({ label, children }) {
     children
   ] });
 }
-var PreviewErrorBoundary = class extends react.Component {
+var PreviewErrorBoundary = class extends React.Component {
   state = { error: null };
   static getDerivedStateFromError(error) {
     return { error };
@@ -3281,15 +3718,20 @@ function errorsToMarkers(errors) {
     source: "FieldCraft Schema Validator"
   }));
 }
-var Editor = react.lazy(() => import('@monaco-editor/react').then((m) => ({ default: m.default })));
+var Editor = React.lazy(() => import('@monaco-editor/react').then((m) => ({ default: m.default })));
 function MonacoWrapper({ value, onChange, errors }) {
-  const editorRef = react.useRef(null);
-  const monacoRef = react.useRef(null);
+  const editorRef = React.useRef(null);
+  const monacoRef = React.useRef(null);
   const handleMount = (editor, monaco) => {
     editorRef.current = editor;
     monacoRef.current = monaco;
   };
-  react.useEffect(() => {
+  React.useEffect(() => {
+    return () => {
+      editorRef.current?.dispose();
+    };
+  }, []);
+  React.useEffect(() => {
     const editor = editorRef.current;
     const monaco = monacoRef.current;
     if (!editor || !monaco) return;
@@ -3321,14 +3763,14 @@ function MonacoWrapper({ value, onChange, errors }) {
   );
 }
 function JsonEditorPanel({ value, onChange, errors, onValidate }) {
-  const handleChange = react.useCallback(
+  const handleChange = React.useCallback(
     (newValue) => {
       onChange(newValue);
       onValidate(newValue);
     },
     [onChange, onValidate]
   );
-  const handleFormat = react.useCallback(() => {
+  const handleFormat = React.useCallback(() => {
     try {
       const formatted = JSON.stringify(JSON.parse(value), null, 2);
       onChange(formatted);
@@ -3361,7 +3803,7 @@ function JsonEditorPanel({ value, onChange, errors, onValidate }) {
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-      react.Suspense,
+      React.Suspense,
       {
         fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-sm text-muted-foreground", children: "Loading editor..." }),
         children: /* @__PURE__ */ jsxRuntime.jsx(MonacoWrapper, { value, onChange: handleChange, errors })
@@ -3560,7 +4002,7 @@ function SectionNodeInner({ data }) {
   const d = data;
   const color = SECTION_COLORS[d.colorIndex % SECTION_COLORS.length];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-flow-section-group", style: { borderColor: color }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "target", position: react$1.Position.Left, className: "fc-flow-handle fc-flow-handle--section" }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "target", position: react.Position.Left, className: "fc-flow-handle fc-flow-handle--section" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-flow-section-group__header", style: { background: color }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fc-flow-section-group__label", children: d.label.length > 30 ? d.label.slice(0, 30) + "\u2026" : d.label }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "fc-flow-section-group__meta", children: [
@@ -3571,10 +4013,10 @@ function SectionNodeInner({ data }) {
         d.hasExitLogic && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fc-flow-section-group__badge fc-flow-section-group__badge--jump", title: "Has onExit jump", children: "\u2934" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "source", position: react$1.Position.Right, className: "fc-flow-handle fc-flow-handle--section" })
+    /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "source", position: react.Position.Right, className: "fc-flow-handle fc-flow-handle--section" })
   ] });
 }
-var SectionNode = react.memo(SectionNodeInner);
+var SectionNode = React.memo(SectionNodeInner);
 function FieldNodeInner({ data }) {
   const d = data;
   const color = SECTION_COLORS[d.colorIndex % SECTION_COLORS.length];
@@ -3587,18 +4029,18 @@ function FieldNodeInner({ data }) {
         borderWidth: d.hasCondition ? 2 : 1
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "target", position: react$1.Position.Left, className: "fc-flow-handle" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "target", position: react.Position.Left, className: "fc-flow-handle" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-flow-field__content", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fc-flow-field__label", children: d.label.length > 26 ? d.label.slice(0, 26) + "\u2026" : d.label }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fc-flow-field__type", children: d.fieldType })
         ] }),
         d.hasCondition && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fc-flow-badge", style: { background: color }, title: "Has showIf condition", children: "?" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "source", position: react$1.Position.Right, className: "fc-flow-handle" })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "source", position: react.Position.Right, className: "fc-flow-handle" })
       ]
     }
   );
 }
-var FieldNode = react.memo(FieldNodeInner);
+var FieldNode = React.memo(FieldNodeInner);
 var logicFlowNodeTypes = {
   sectionNode: SectionNode,
   fieldNode: FieldNode
@@ -3616,7 +4058,7 @@ function ConditionEdgeInner({
   data,
   markerEnd
 }) {
-  const [edgePath, labelX, labelY] = react$1.getBezierPath({
+  const [edgePath, labelX, labelY] = react.getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -3627,7 +4069,7 @@ function ConditionEdgeInner({
   const isJump = data?.edgeType === "onExit";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.BaseEdge,
+      react.BaseEdge,
       {
         id,
         path: edgePath,
@@ -3640,7 +4082,7 @@ function ConditionEdgeInner({
         }
       }
     ),
-    label && /* @__PURE__ */ jsxRuntime.jsx(react$1.EdgeLabelRenderer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    label && /* @__PURE__ */ jsxRuntime.jsx(react.EdgeLabelRenderer, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: "fc-flow-edge-label",
@@ -3653,7 +4095,7 @@ function ConditionEdgeInner({
     ) })
   ] });
 }
-var ConditionEdge = react.memo(ConditionEdgeInner);
+var ConditionEdge = React.memo(ConditionEdgeInner);
 function PipelineEdgeInner({
   id,
   sourceX,
@@ -3664,7 +4106,7 @@ function PipelineEdgeInner({
   targetPosition,
   markerEnd
 }) {
-  const [edgePath] = react$1.getBezierPath({
+  const [edgePath] = react.getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -3673,7 +4115,7 @@ function PipelineEdgeInner({
     targetPosition
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.BaseEdge,
+    react.BaseEdge,
     {
       id,
       path: edgePath,
@@ -3686,7 +4128,7 @@ function PipelineEdgeInner({
     }
   );
 }
-var PipelineEdge = react.memo(PipelineEdgeInner);
+var PipelineEdge = React.memo(PipelineEdgeInner);
 var logicFlowEdgeTypes = {
   conditionEdge: ConditionEdge,
   pipelineEdge: PipelineEdge
@@ -3724,30 +4166,30 @@ function removeConditionForSource(showIf, sourceFieldId) {
 }
 var defaultEdgeOptions = {
   markerEnd: {
-    type: react$1.MarkerType.ArrowClosed,
+    type: react.MarkerType.ArrowClosed,
     width: 16,
     height: 12
   }
 };
 function LogicFlowEditor({ schema, onChange }) {
   const noSections = schema.sections.length === 0;
-  const flowGraph = react.useMemo(() => buildReactFlowGraph(schema), [schema]);
-  const [nodes, setNodes, onNodesChange] = react$1.useNodesState(flowGraph.nodes);
-  const [edges, setEdges, onEdgesChange] = react$1.useEdgesState(flowGraph.edges);
-  const [selectedFieldId, setSelectedFieldId] = react.useState(null);
+  const flowGraph = React.useMemo(() => buildReactFlowGraph(schema), [schema]);
+  const [nodes, setNodes, onNodesChange] = react.useNodesState(flowGraph.nodes);
+  const [edges, setEdges, onEdgesChange] = react.useEdgesState(flowGraph.edges);
+  const [selectedFieldId, setSelectedFieldId] = React.useState(null);
   const selectedQuestion = selectedFieldId ? findQuestion2(schema, selectedFieldId) : void 0;
-  react.useEffect(() => {
+  React.useEffect(() => {
     setNodes(flowGraph.nodes);
     setEdges(flowGraph.edges);
   }, [flowGraph, setNodes, setEdges]);
-  const sectionIds = react.useMemo(() => {
+  const sectionIds = React.useMemo(() => {
     const ids = [];
     for (const section of schema.sections) {
       ids.push(section.id);
     }
     return ids;
   }, [schema]);
-  const onNodeClick = react.useCallback(
+  const onNodeClick = React.useCallback(
     (_event, node) => {
       if (node.type === "fieldNode") {
         setSelectedFieldId(node.id);
@@ -3755,7 +4197,7 @@ function LogicFlowEditor({ schema, onChange }) {
     },
     []
   );
-  const onConnect = react.useCallback(
+  const onConnect = React.useCallback(
     (connection) => {
       if (!connection.source || !connection.target) return;
       const targetQuestion = findQuestion2(schema, connection.target);
@@ -3782,7 +4224,7 @@ function LogicFlowEditor({ schema, onChange }) {
     },
     [schema, onChange]
   );
-  const onEdgesDelete = react.useCallback(
+  const onEdgesDelete = React.useCallback(
     (deletedEdges) => {
       let updatedSchema = schema;
       for (const edge of deletedEdges) {
@@ -3807,7 +4249,7 @@ function LogicFlowEditor({ schema, onChange }) {
     },
     [schema, onChange]
   );
-  const handleConditionUpdate = react.useCallback(
+  const handleConditionUpdate = React.useCallback(
     (updates) => {
       if (!selectedFieldId) return;
       const updatedSchema = updateQuestionInSchema(schema, selectedFieldId, updates);
@@ -3821,18 +4263,18 @@ function LogicFlowEditor({ schema, onChange }) {
   const jumpCount = flowGraph.edges.filter(
     (e) => e.data?.edgeType === "onExit"
   ).length;
-  const totalFields = react.useMemo(
+  const totalFields = React.useMemo(
     () => schema.sections.reduce((sum, s) => sum + s.questions.length, 0),
     [schema]
   );
-  const conditionalFields = react.useMemo(
+  const conditionalFields = React.useMemo(
     () => schema.sections.reduce(
       (sum, s) => sum + s.questions.filter((q) => !!q.showIf).length,
       0
     ),
     [schema]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
     LogicFlowInner,
     {
       noSections,
@@ -3876,7 +4318,7 @@ function LogicFlowInner({
   totalFields,
   conditionalFields
 }) {
-  const { zoomIn, zoomOut, fitView } = react$1.useReactFlow();
+  const { zoomIn, zoomOut, fitView } = react.useReactFlow();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col bg-background min-h-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 h-9 flex items-center justify-between px-4 border-b border-border bg-card/50", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
@@ -3904,7 +4346,7 @@ function LogicFlowInner({
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs max-w-xs mx-auto", children: "Switch to Design mode and add sections with fields. Then come back here to visualize and edit branching logic." })
     ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex min-h-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        react$1.ReactFlow,
+        react.ReactFlow,
         {
           nodes,
           edges,
@@ -3921,9 +4363,9 @@ function LogicFlowInner({
           deleteKeyCode: ["Backspace", "Delete"],
           proOptions: { hideAttribution: true },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react$1.Background, { gap: 20, size: 1 }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Background, { gap: 20, size: 1 }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              react$1.MiniMap,
+              react.MiniMap,
               {
                 nodeColor: (node) => {
                   const d = node.data;
@@ -3987,15 +4429,15 @@ function LogicFlowInner({
   ] });
 }
 function TemplateGallery({ templates, onSelect, onClose }) {
-  const [search, setSearch] = react.useState("");
-  const [activeCategory, setActiveCategory] = react.useState("all");
-  const [confirmTemplate, setConfirmTemplate] = react.useState(null);
-  const categories = react.useMemo(() => {
+  const [search, setSearch] = React.useState("");
+  const [activeCategory, setActiveCategory] = React.useState("all");
+  const [confirmTemplate, setConfirmTemplate] = React.useState(null);
+  const categories = React.useMemo(() => {
     const cats = /* @__PURE__ */ new Set();
     for (const t of templates) cats.add(t.meta.category);
     return ["all", ...Array.from(cats)];
   }, [templates]);
-  const filtered = react.useMemo(() => {
+  const filtered = React.useMemo(() => {
     return templates.filter((t) => {
       const matchesCategory = activeCategory === "all" || t.meta.category === activeCategory;
       const matchesSearch = !search || t.meta.name.toLowerCase().includes(search.toLowerCase()) || t.meta.description.toLowerCase().includes(search.toLowerCase()) || t.meta.tags?.some((tag) => tag.toLowerCase().includes(search.toLowerCase()));
@@ -4091,9 +4533,14 @@ function TemplateGallery({ templates, onSelect, onClose }) {
   ] }) });
 }
 function useDebouncedValidation(delayMs = 500) {
-  const [errors, setErrors] = react.useState([]);
-  const timerRef = react.useRef(null);
-  const validate = react.useCallback(
+  const [errors, setErrors] = React.useState([]);
+  const timerRef = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  const validate = React.useCallback(
     (text) => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -4142,9 +4589,9 @@ function useDebouncedValidation(delayMs = 500) {
   );
   return { errors, validate };
 }
-var ThemeCtx = react.createContext({});
+var ThemeCtx = React.createContext({});
 function useBuilderTheme() {
-  return react.useContext(ThemeCtx);
+  return React.useContext(ThemeCtx);
 }
 function themeToCssVars(theme) {
   const vars = {};
@@ -4180,10 +4627,10 @@ function themeToCssVars(theme) {
 }
 function FormBuilderThemeProvider({ theme, children }) {
   const resolved = theme ?? {};
-  const cssVars = react.useMemo(() => themeToCssVars(resolved), [resolved]);
+  const cssVars = React.useMemo(() => themeToCssVars(resolved), [resolved]);
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeCtx.Provider, { value: resolved, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-fcb-root": "", style: cssVars, className: "w-full h-full", children }) });
 }
-var FormBuilderErrorBoundary = class extends react.Component {
+var FormBuilderErrorBoundary = class extends React.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -4215,30 +4662,30 @@ var FormBuilderErrorBoundary = class extends react.Component {
 };
 function FormBuilderCore(props) {
   const { initialSchema = DEFAULT_SCHEMA, onChange, onSave, height = "100vh", theme, className, toolbarExtra, questionTypes, palette, preview, templates, schemaUrl } = props;
-  const [viewMode, setViewMode] = react.useState("design");
-  const [jsonText, setJsonText] = react.useState("");
-  const [jsonSwitchError, setJsonSwitchError] = react.useState(null);
-  const [showTemplateGallery, setShowTemplateGallery] = react.useState(false);
-  const [saveValidationErrors, setSaveValidationErrors] = react.useState(null);
-  const [schemaUrlLoading, setSchemaUrlLoading] = react.useState(!!schemaUrl);
-  const [schemaUrlError, setSchemaUrlError] = react.useState(null);
+  const [viewMode, setViewMode] = React.useState("design");
+  const [jsonText, setJsonText] = React.useState("");
+  const [jsonSwitchError, setJsonSwitchError] = React.useState(null);
+  const [showTemplateGallery, setShowTemplateGallery] = React.useState(false);
+  const [saveValidationErrors, setSaveValidationErrors] = React.useState(null);
+  const [schemaUrlLoading, setSchemaUrlLoading] = React.useState(!!schemaUrl);
+  const [schemaUrlError, setSchemaUrlError] = React.useState(null);
   const { errors: jsonErrors, validate: validateJson } = useDebouncedValidation(400);
   const mergedQuestionTypes = questionTypes ? { ...QUESTION_TYPE_INFO, ...questionTypes } : QUESTION_TYPE_INFO;
   const builderState = useBuilderState(initialSchema);
   const dragDrop = useDragDrop(builderState);
-  const fileInputRef = react.useRef(null);
-  const [mobilePanel, setMobilePanel] = react.useState("none");
-  react.useEffect(() => {
+  const fileInputRef = React.useRef(null);
+  const [mobilePanel, setMobilePanel] = React.useState("none");
+  React.useEffect(() => {
     if (builderState.selectedItem && window.innerWidth < 768) {
       setMobilePanel("properties");
     }
   }, [builderState.selectedItem]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!dragDrop.activeDragItem && mobilePanel === "palette") {
       setMobilePanel("none");
     }
   }, [dragDrop.activeDragItem]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!schemaUrl) return;
     let cancelled = false;
     setSchemaUrlLoading(true);
@@ -4268,12 +4715,12 @@ function FormBuilderCore(props) {
       cancelled = true;
     };
   }, [schemaUrl]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (onChange && builderState.isDirty) {
       onChange(builderState.schema);
     }
   }, [builderState.schema, builderState.isDirty, onChange]);
-  const handleSave = react.useCallback(() => {
+  const handleSave = React.useCallback(() => {
     if (!onSave) return;
     try {
       fieldcraftCore.validateSchema(builderState.schema);
@@ -4288,7 +4735,7 @@ function FormBuilderCore(props) {
       }
     }
   }, [onSave, builderState]);
-  const handleExport = react.useCallback(() => {
+  const handleExport = React.useCallback(() => {
     const json = JSON.stringify(builderState.schema, null, 2);
     const blob = new Blob([json], { type: "application/json" });
     const url = URL.createObjectURL(blob);
@@ -4298,10 +4745,10 @@ function FormBuilderCore(props) {
     a.click();
     URL.revokeObjectURL(url);
   }, [builderState.schema]);
-  const handleImport = react.useCallback(() => {
+  const handleImport = React.useCallback(() => {
     fileInputRef.current?.click();
   }, []);
-  const handleFileChange = react.useCallback(
+  const handleFileChange = React.useCallback(
     (e) => {
       const file = e.target.files?.[0];
       if (!file) return;
@@ -4328,7 +4775,7 @@ ${details}`);
     },
     [builderState]
   );
-  const handleViewModeChange = react.useCallback(
+  const handleViewModeChange = React.useCallback(
     (newMode) => {
       setJsonSwitchError(null);
       if (viewMode === "json" && newMode !== "json") {
@@ -4354,7 +4801,7 @@ ${details}`);
     },
     [viewMode, jsonText, builderState]
   );
-  const handleKeyDown = react.useCallback(
+  const handleKeyDown = React.useCallback(
     (e) => {
       const mod = e.metaKey || e.ctrlKey;
       const tag = e.target.tagName;
@@ -4843,6 +5290,58 @@ function FormBuilderInner(props) {
 // src/form-builder/components/FormBuilderGated.tsx
 var FormBuilder = requireLicense(FormBuilderInner, "FormBuilder");
 
+// 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"
+};
+
 exports.DEFAULT_PALETTE = DEFAULT_PALETTE;
 exports.DEFAULT_SCHEMA = DEFAULT_SCHEMA;
 exports.FormBuilder = FormBuilder;
@@ -4851,6 +5350,7 @@ exports.QUESTION_TYPE_INFO = QUESTION_TYPE_INFO;
 exports.addOption = addOption;
 exports.addQuestion = addQuestion;
 exports.addSection = addSection;
+exports.cleanPreset = cleanPreset;
 exports.cn = cn;
 exports.duplicateQuestion = duplicateQuestion;
 exports.duplicateSection = duplicateSection;
@@ -4866,6 +5366,7 @@ exports.moveSection = moveSection;
 exports.removeOption = removeOption;
 exports.removeQuestion = removeQuestion;
 exports.removeSection = removeSection;
+exports.squaredrDarkPreset = squaredrDarkPreset;
 exports.updateOption = updateOption;
 exports.updateQuestion = updateQuestion;
 exports.updateSection = updateSection;