@squaredr/fieldcraft-pro 1.6.4 → 1.8.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,31 +8,32 @@ 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');
 
-// ../license/dist/index.mjs
-var PRO_FEATURES = [
-  "SchemaEditor",
-  "ResponseViewer",
-  "ThemeEditor",
-  "FormBuilder",
-  "ApiManager",
-  "Analytics"
-];
-var ALL_FEATURES = [
-  ...PRO_FEATURES,
-  "Telehealth"
-];
-var TIER_FEATURES = {
-  starter: ["SchemaEditor", "ResponseViewer"],
-  pro: PRO_FEATURES,
-  business: ALL_FEATURES,
-  enterprise: ALL_FEATURES
-};
-function tierHasFeature(tier, featureName) {
-  return TIER_FEATURES[tier]?.includes(featureName) ?? false;
+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",
   "127.0.0.1",
@@ -104,10 +105,11 @@ function isProductionEnvironment() {
   }
   return false;
 }
-var defaultContext = { status: "validating", tier: null };
-var LicenseCtx = react.createContext(defaultContext);
+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);
 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: [
@@ -304,7 +306,7 @@ function UnlicensedOverlay({ featureName, reason, children }) {
 }
 function requireLicense(Component3, featureName) {
   function LicenseGated(props) {
-    const { status, tier } = useLicense();
+    const { status } = useLicense();
     const isProduction = isProductionEnvironment();
     if (!isProduction) {
       return /* @__PURE__ */ jsxRuntime.jsx(Component3, { ...props });
@@ -312,8 +314,7 @@ function requireLicense(Component3, featureName) {
     if (status === "validating") {
       return null;
     }
-    const isLicensed = status === "valid" && tier != null && tierHasFeature(tier, featureName);
-    if (isLicensed) {
+    if (status === "valid") {
       return /* @__PURE__ */ jsxRuntime.jsx(Component3, { ...props });
     }
     let reason = "A valid license is required for production use.";
@@ -325,8 +326,6 @@ function requireLicense(Component3, featureName) {
       reason = "This license key has been revoked. Please contact support or purchase a new license.";
     } else if (status === "domain_mismatch") {
       reason = "This license key is registered to a different domain. Each key can only be used on one production domain. Please purchase a new license for this domain.";
-    } else if (!tier || !tierHasFeature(tier, featureName)) {
-      reason = "Your license does not include this feature. Please upgrade your plan.";
     }
     return /* @__PURE__ */ jsxRuntime.jsx(UnlicensedOverlay, { featureName, reason, children: /* @__PURE__ */ jsxRuntime.jsx(Component3, { ...props }) });
   }
@@ -335,38 +334,41 @@ 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 currentIndexRef = React.useRef(currentIndex);
+  currentIndexRef.current = currentIndex;
   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);
+      const idx = currentIndexRef.current;
+      historyRef.current = historyRef.current.slice(0, idx + 1);
       historyRef.current.push(schema);
       if (historyRef.current.length > MAX_HISTORY) {
         historyRef.current.shift();
         setCurrentIndex(historyRef.current.length - 1);
       } else {
-        setCurrentIndex((prev) => prev + 1);
+        setCurrentIndex(idx + 1);
       }
     },
-    [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]);
@@ -595,16 +597,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);
@@ -612,20 +614,20 @@ 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) => {
@@ -635,31 +637,31 @@ function useBuilderState(initialSchema) {
     },
     [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) => {
@@ -671,34 +673,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();
@@ -707,7 +709,7 @@ function useBuilderState(initialSchema) {
     },
     [undoRedo]
   );
-  const markClean = react.useCallback(() => {
+  const markClean = React.useCallback(() => {
     setIsDirty(false);
   }, []);
   return {
@@ -968,7 +970,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",
@@ -979,13 +981,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: {
@@ -1038,7 +1034,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: {
@@ -1185,7 +1181,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: {
@@ -1235,11 +1231,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) => {
@@ -1409,9 +1405,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]
   );
@@ -1492,13 +1488,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();
@@ -1655,7 +1651,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 }
@@ -1836,30 +1832,71 @@ 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 } });
+    onUpdate({ config: { ...current, type: question.type, ...updates } });
   };
 }
 function QuestionConfigEditor({ question, onUpdate }) {
@@ -1869,226 +1906,274 @@ function QuestionConfigEditor({ question, onUpdate }) {
     // ── 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: 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 }) })
       ] });
     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: 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 }) })
       ] });
     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 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 }) })
       ] });
     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: "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 }) })
       ] });
     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.embedUrl === "string" ? "embed" : typeof config.slotsUrl === "string" ? "url" : "static";
       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: "Mode",
+            value: appointmentMode,
+            options: [
+              { label: "Static Slots", value: "static" },
+              { label: "API Endpoint", value: "url" },
+              { label: "Embed (Calendly / Cal.com)", value: "embed" }
+            ],
+            onChange: (v) => {
+              if (v === "static") {
+                updateConfig({ slotsUrl: void 0, embedUrl: void 0, embedProvider: void 0 });
+              } else if (v === "url") {
+                updateConfig({ slotsUrl: "", embedUrl: void 0, embedProvider: void 0, slots: void 0 });
+              } else if (v === "embed") {
+                updateConfig({ embedUrl: "", slotsUrl: void 0, slots: void 0 });
+              }
+            }
+          }
+        ),
+        /* @__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: "Timezone Field", value: config.timezoneField, placeholder: "Field ID for dynamic timezone", onChange: (v) => updateConfig({ timezoneField: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Date Format", value: config.dateFormat, placeholder: "Locale-aware (default)", onChange: (v) => updateConfig({ dateFormat: v }) }),
+        appointmentMode === "url" && /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Slots URL", value: config.slotsUrl, placeholder: "https://api.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/your-name/30min", onChange: (v) => updateConfig({ embedUrl: v }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SelectField,
+            {
+              label: "Embed Provider",
+              value: config.embedProvider ?? "custom",
+              options: [
+                { label: "Calendly", value: "calendly" },
+                { label: "Cal.com", value: "cal_com" },
+                { label: "Custom", value: "custom" }
+              ],
+              onChange: (v) => updateConfig({ embedProvider: 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.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 }) })
       ] });
     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": {
@@ -2102,9 +2187,9 @@ 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(
@@ -2114,7 +2199,7 @@ function QuestionConfigEditor({ question, onUpdate }) {
               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);
+                updateConfig({ fields: next.length > 0 ? next : void 0 });
               }
             },
             f.value
@@ -2124,41 +2209,47 @@ function QuestionConfigEditor({ question, onUpdate }) {
     }
     case "payment":
       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" }], 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(TextField, { label: "Server URL", value: config.serverUrl ?? "", placeholder: "https://api.example.com/create-intent", onChange: (v) => updateConfig({ serverUrl: v || void 0 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Client Secret Path", value: config.responseMapping?.clientSecretPath ?? "", placeholder: "clientSecret", onChange: (v) => updateConfig({ responseMapping: v ? { clientSecretPath: v } : void 0 }) }),
+        /* @__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 }) })
       ] });
     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:
@@ -2250,7 +2341,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({
@@ -2396,6 +2490,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
@@ -2428,6 +2575,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" },
@@ -2832,7 +2999,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 } });
     }
@@ -2989,7 +3156,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) }),
@@ -3064,11 +3231,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);
     },
@@ -3243,7 +3410,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 };
@@ -3304,15 +3471,15 @@ 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(() => {
     const editor = editorRef.current;
     const monaco = monacoRef.current;
     if (!editor || !monaco) return;
@@ -3344,14 +3511,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);
@@ -3384,7 +3551,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 })
@@ -3583,7 +3750,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: [
@@ -3594,10 +3761,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];
@@ -3610,18 +3777,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
@@ -3639,7 +3806,7 @@ function ConditionEdgeInner({
   data,
   markerEnd
 }) {
-  const [edgePath, labelX, labelY] = react$1.getBezierPath({
+  const [edgePath, labelX, labelY] = react.getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -3650,7 +3817,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,
@@ -3663,7 +3830,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",
@@ -3676,7 +3843,7 @@ function ConditionEdgeInner({
     ) })
   ] });
 }
-var ConditionEdge = react.memo(ConditionEdgeInner);
+var ConditionEdge = React.memo(ConditionEdgeInner);
 function PipelineEdgeInner({
   id,
   sourceX,
@@ -3687,7 +3854,7 @@ function PipelineEdgeInner({
   targetPosition,
   markerEnd
 }) {
-  const [edgePath] = react$1.getBezierPath({
+  const [edgePath] = react.getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -3696,7 +3863,7 @@ function PipelineEdgeInner({
     targetPosition
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.BaseEdge,
+    react.BaseEdge,
     {
       id,
       path: edgePath,
@@ -3709,7 +3876,7 @@ function PipelineEdgeInner({
     }
   );
 }
-var PipelineEdge = react.memo(PipelineEdgeInner);
+var PipelineEdge = React.memo(PipelineEdgeInner);
 var logicFlowEdgeTypes = {
   conditionEdge: ConditionEdge,
   pipelineEdge: PipelineEdge
@@ -3747,30 +3914,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, onClose }) {
+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);
@@ -3778,7 +3945,7 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
     },
     []
   );
-  const onConnect = react.useCallback(
+  const onConnect = React.useCallback(
     (connection) => {
       if (!connection.source || !connection.target) return;
       const targetQuestion = findQuestion2(schema, connection.target);
@@ -3805,7 +3972,7 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
     },
     [schema, onChange]
   );
-  const onEdgesDelete = react.useCallback(
+  const onEdgesDelete = React.useCallback(
     (deletedEdges) => {
       let updatedSchema = schema;
       for (const edge of deletedEdges) {
@@ -3830,7 +3997,7 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
     },
     [schema, onChange]
   );
-  const handleConditionUpdate = react.useCallback(
+  const handleConditionUpdate = React.useCallback(
     (updates) => {
       if (!selectedFieldId) return;
       const updatedSchema = updateQuestionInSchema(schema, selectedFieldId, updates);
@@ -3844,34 +4011,90 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
   const jumpCount = flowGraph.edges.filter(
     (e) => e.data?.edgeType === "onExit"
   ).length;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-background/95 backdrop-blur-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-12 shrink-0 flex items-center justify-between px-4 border-b border-border bg-card", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranch, { size: 16, className: "text-primary" }),
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold", children: "Logic Flow" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
-          showIfCount,
-          " condition",
-          showIfCount !== 1 ? "s" : "",
-          jumpCount > 0 && ` \xB7 ${jumpCount} jump${jumpCount !== 1 ? "s" : ""}`,
-          " \xB7 ",
-          sectionIds.length,
-          " section",
-          sectionIds.length !== 1 ? "s" : ""
-        ] })
-      ] }),
+  const totalFields = React.useMemo(
+    () => schema.sections.reduce((sum, s) => sum + s.questions.length, 0),
+    [schema]
+  );
+  const conditionalFields = React.useMemo(
+    () => schema.sections.reduce(
+      (sum, s) => sum + s.questions.filter((q) => !!q.showIf).length,
+      0
+    ),
+    [schema]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    LogicFlowInner,
+    {
+      noSections,
+      nodes,
+      edges,
+      onNodesChange,
+      onEdgesChange,
+      onNodeClick,
+      onConnect,
+      onEdgesDelete,
+      selectedFieldId,
+      selectedQuestion,
+      setSelectedFieldId,
+      handleConditionUpdate,
+      schema,
+      sectionIds,
+      showIfCount,
+      jumpCount,
+      totalFields,
+      conditionalFields
+    }
+  ) });
+}
+function LogicFlowInner({
+  noSections,
+  nodes,
+  edges,
+  onNodesChange,
+  onEdgesChange,
+  onNodeClick,
+  onConnect,
+  onEdgesDelete,
+  selectedFieldId,
+  selectedQuestion,
+  setSelectedFieldId,
+  handleConditionUpdate,
+  schema,
+  sectionIds,
+  showIfCount,
+  jumpCount,
+  totalFields,
+  conditionalFields
+}) {
+  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: [
+        sectionIds.length,
+        " section",
+        sectionIds.length !== 1 ? "s" : "",
+        " \xB7 ",
+        totalFields,
+        " field",
+        totalFields !== 1 ? "s" : "",
+        conditionalFields > 0 && ` \xB7 ${conditionalFields} conditional`,
+        showIfCount > 0 && ` \xB7 ${showIfCount} rule${showIfCount !== 1 ? "s" : ""}`,
+        jumpCount > 0 && ` \xB7 ${jumpCount} jump${jumpCount !== 1 ? "s" : ""}`
+      ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground mr-2", children: "Drag between nodes to create conditions \xB7 Select edges and press Delete to remove" }),
-        /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "ghost", size: "icon-sm", onClick: onClose, title: "Close logic flow", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16, strokeWidth: 1.75 }) })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground mr-2 hidden md:inline", children: "Drag between nodes to create conditions \xB7 Select edges + Delete to remove" }),
+        /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "ghost", size: "icon-xs", onClick: () => zoomOut(), title: "Zoom out", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomOut, { size: 14, strokeWidth: 1.75 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "ghost", size: "icon-xs", onClick: () => zoomIn(), title: "Zoom in", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomIn, { size: 14, strokeWidth: 1.75 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "ghost", size: "icon-xs", onClick: () => fitView({ padding: 0.2 }), title: "Fit to view", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, { size: 14, strokeWidth: 1.75 }) })
       ] })
     ] }),
-    noSections ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranch, { size: 32, className: "mx-auto opacity-40" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "No sections found" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs max-w-xs", children: "Add sections and fields to your form to see the logic flow pipeline." })
-    ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        react$1.ReactFlow,
+    noSections ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranch, { size: 40, className: "mx-auto opacity-30" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "No logic to display" }),
+      /* @__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.ReactFlow,
         {
           nodes,
           edges,
@@ -3888,10 +4111,9 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
           deleteKeyCode: ["Backspace", "Delete"],
           proOptions: { hideAttribution: true },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react$1.Background, { gap: 20, size: 1 }),
-            /* @__PURE__ */ jsxRuntime.jsx(react$1.Controls, { showInteractive: false }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Background, { gap: 20, size: 1 }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              react$1.MiniMap,
+              react.MiniMap,
               {
                 nodeColor: (node) => {
                   const d = node.data;
@@ -3904,9 +4126,9 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
           ]
         }
       ) }),
-      selectedFieldId && selectedQuestion && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-72 border-l border-border bg-card overflow-auto", children: [
+      selectedFieldId && selectedQuestion && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-72 shrink-0 border-l border-border bg-card overflow-auto", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-3 border-b border-border flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold truncate", children: selectedQuestion.label || selectedQuestion.id }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: selectedQuestion.type })
           ] }),
@@ -3917,7 +4139,7 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
               size: "icon-xs",
               onClick: () => setSelectedFieldId(null),
               title: "Close panel",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14, strokeWidth: 1.75 })
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: "\xD7" })
             }
           )
         ] }),
@@ -3931,7 +4153,7 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-4 py-2 border-t border-border bg-card flex items-center gap-4 text-xs text-muted-foreground flex-wrap", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-4 py-1.5 border-t border-border bg-card/50 flex items-center gap-4 text-[11px] text-muted-foreground flex-wrap", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-0.5 rounded", style: { background: "var(--muted-foreground)", opacity: 0.4 } }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "flow" })
@@ -3955,15 +4177,15 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
   ] });
 }
 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()));
@@ -4059,9 +4281,9 @@ 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);
+  const validate = React.useCallback(
     (text) => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -4110,9 +4332,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 = {};
@@ -4148,10 +4370,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 };
@@ -4183,31 +4405,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 [showLogicMap, setShowLogicMap] = react.useState(false);
-  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);
@@ -4237,12 +4458,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);
@@ -4257,7 +4478,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);
@@ -4267,10 +4488,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;
@@ -4297,7 +4518,7 @@ ${details}`);
     },
     [builderState]
   );
-  const handleViewModeChange = react.useCallback(
+  const handleViewModeChange = React.useCallback(
     (newMode) => {
       setJsonSwitchError(null);
       if (viewMode === "json" && newMode !== "json") {
@@ -4323,7 +4544,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;
@@ -4343,6 +4564,11 @@ ${details}`);
         handleSave();
         return;
       }
+      if (mod && e.key === "l") {
+        e.preventDefault();
+        handleViewModeChange(viewMode === "logic" ? "design" : "logic");
+        return;
+      }
       if (isEditing) return;
       if (e.key === "Delete" || e.key === "Backspace") {
         const sel = builderState.selectedItem;
@@ -4373,7 +4599,7 @@ ${details}`);
         }
       }
     },
-    [builderState, handleSave]
+    [builderState, handleSave, handleViewModeChange, viewMode]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(FormBuilderThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsxs(
     core.DndContext,
@@ -4464,6 +4690,19 @@ ${details}`);
                           "JSON"
                         ]
                       }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      fieldcraftReact.Button,
+                      {
+                        variant: viewMode === "logic" ? "secondary" : "ghost",
+                        size: "sm",
+                        onClick: () => handleViewModeChange("logic"),
+                        className: "gap-1.5 h-7 px-2.5 text-xs",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranch, { size: 13, strokeWidth: 1.75 }),
+                          "Logic"
+                        ]
+                      }
                     )
                   ] }),
                   toolbarExtra
@@ -4480,17 +4719,6 @@ ${details}`);
                       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutTemplate, { size: 15, strokeWidth: 1.75 })
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    fieldcraftReact.Button,
-                    {
-                      variant: "ghost",
-                      size: "icon-sm",
-                      onClick: () => setShowLogicMap(true),
-                      title: "View branching logic map",
-                      "aria-label": "Logic map",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranch, { size: 15, strokeWidth: 1.75 })
-                    }
-                  ),
                   /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Separator, { orientation: "vertical", className: "mx-1 h-5" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     fieldcraftReact.Button,
@@ -4574,6 +4802,19 @@ ${details}`);
                             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "JSON" })
                           ]
                         }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        fieldcraftReact.Button,
+                        {
+                          variant: viewMode === "logic" ? "secondary" : "ghost",
+                          size: "sm",
+                          onClick: () => handleViewModeChange("logic"),
+                          className: "gap-1 h-7 px-2 text-xs",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranch, { size: 12, strokeWidth: 1.75 }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Logic" })
+                          ]
+                        }
                       )
                     ] }),
                     toolbarExtra,
@@ -4707,7 +4948,13 @@ ${details}`);
                   errors: jsonErrors,
                   onValidate: validateJson
                 }
-              ) : viewMode === "preview" ? /* @__PURE__ */ jsxRuntime.jsx(FormPreviewPanel, { schema: builderState.schema, preview }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              ) : viewMode === "preview" ? /* @__PURE__ */ jsxRuntime.jsx(FormPreviewPanel, { schema: builderState.schema, preview }) : viewMode === "logic" ? /* @__PURE__ */ jsxRuntime.jsx(
+                LogicFlowEditor,
+                {
+                  schema: builderState.schema,
+                  onChange: (updated) => builderState.resetSchema(updated)
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(QuestionPalette, { questionTypes: mergedQuestionTypes, palette }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(FormCanvas, { builderState }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(PropertiesPanel, { builderState }) }),
@@ -4726,14 +4973,6 @@ ${details}`);
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { dropAnimation: null, children: dragDrop.activeDragItem && /* @__PURE__ */ jsxRuntime.jsx(DragOverlayContent, { item: dragDrop.activeDragItem, schema: builderState.schema, questionTypes: mergedQuestionTypes }) }),
-        showLogicMap && /* @__PURE__ */ jsxRuntime.jsx(
-          LogicFlowEditor,
-          {
-            schema: builderState.schema,
-            onChange: (updated) => builderState.resetSchema(updated),
-            onClose: () => setShowLogicMap(false)
-          }
-        ),
         showTemplateGallery && templates && /* @__PURE__ */ jsxRuntime.jsx(
           TemplateGallery,
           {