@squaredr/fieldcraft-pro 1.7.0 → 1.8.0

package/dist/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,11 +8,36 @@ 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');
+var paykitReact = require('@squaredr/paykit-react');
+var client = require('@squaredr/paykit/stripe/client');
+var paykit = require('@squaredr/paykit');
+
+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);
 
 // package.json
-var version = "1.6.4";
+var version = "1.8.0";
 var PRODUCT_IDS = {
   FIELDCRAFT_PRO: 1
 };
@@ -308,10 +333,10 @@ async function performPing(key) {
   }
 }
 var defaultContext = { status: "validating" };
-var LicenseCtx = react.createContext(defaultContext);
+var LicenseCtx = React.createContext(defaultContext);
 function FieldCraftProProvider({ licenseKey, children }) {
-  const [license, setLicense] = react.useState(defaultContext);
-  react.useEffect(() => {
+  const [license, setLicense] = React.useState(defaultContext);
+  React.useEffect(() => {
     let cancelled = false;
     setLicense(defaultContext);
     validateLicense(licenseKey).then((clientResult) => {
@@ -340,7 +365,7 @@ function FieldCraftProProvider({ licenseKey, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(LicenseCtx.Provider, { value: license, children });
 }
 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: [
@@ -565,38 +590,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]);
@@ -825,16 +853,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);
@@ -842,20 +870,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) => {
@@ -865,31 +893,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) => {
@@ -901,34 +929,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();
@@ -937,7 +965,7 @@ function useBuilderState(initialSchema) {
     },
     [undoRedo]
   );
-  const markClean = react.useCallback(() => {
+  const markClean = React.useCallback(() => {
     setIsDirty(false);
   }, []);
   return {
@@ -1198,7 +1226,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",
@@ -1209,13 +1237,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: {
@@ -1268,7 +1290,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: {
@@ -1415,7 +1437,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: {
@@ -1465,11 +1487,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) => {
@@ -1639,9 +1661,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]
   );
@@ -1722,13 +1744,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();
@@ -1885,7 +1907,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 }
@@ -2066,30 +2088,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 }) {
@@ -2099,226 +2162,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": {
@@ -2332,9 +2443,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(
@@ -2344,7 +2455,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
@@ -2354,41 +2465,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:
@@ -2480,7 +2597,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({
@@ -2626,6 +2746,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
@@ -2658,6 +2831,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" },
@@ -3062,7 +3255,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 } });
     }
@@ -3219,7 +3412,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) }),
@@ -3294,11 +3487,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);
     },
@@ -3473,7 +3666,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 };
@@ -3534,15 +3727,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;
@@ -3574,14 +3767,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);
@@ -3614,7 +3807,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 })
@@ -3813,7 +4006,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: [
@@ -3824,10 +4017,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];
@@ -3840,18 +4033,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
@@ -3869,7 +4062,7 @@ function ConditionEdgeInner({
   data,
   markerEnd
 }) {
-  const [edgePath, labelX, labelY] = react$1.getBezierPath({
+  const [edgePath, labelX, labelY] = react.getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -3880,7 +4073,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,
@@ -3893,7 +4086,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",
@@ -3906,7 +4099,7 @@ function ConditionEdgeInner({
     ) })
   ] });
 }
-var ConditionEdge = react.memo(ConditionEdgeInner);
+var ConditionEdge = React.memo(ConditionEdgeInner);
 function PipelineEdgeInner({
   id,
   sourceX,
@@ -3917,7 +4110,7 @@ function PipelineEdgeInner({
   targetPosition,
   markerEnd
 }) {
-  const [edgePath] = react$1.getBezierPath({
+  const [edgePath] = react.getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -3926,7 +4119,7 @@ function PipelineEdgeInner({
     targetPosition
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.BaseEdge,
+    react.BaseEdge,
     {
       id,
       path: edgePath,
@@ -3939,7 +4132,7 @@ function PipelineEdgeInner({
     }
   );
 }
-var PipelineEdge = react.memo(PipelineEdgeInner);
+var PipelineEdge = React.memo(PipelineEdgeInner);
 var logicFlowEdgeTypes = {
   conditionEdge: ConditionEdge,
   pipelineEdge: PipelineEdge
@@ -3977,30 +4170,30 @@ function removeConditionForSource(showIf, sourceFieldId) {
 }
 var defaultEdgeOptions = {
   markerEnd: {
-    type: react$1.MarkerType.ArrowClosed,
+    type: react.MarkerType.ArrowClosed,
     width: 16,
     height: 12
   }
 };
 function LogicFlowEditor({ schema, onChange }) {
   const noSections = schema.sections.length === 0;
-  const flowGraph = react.useMemo(() => buildReactFlowGraph(schema), [schema]);
-  const [nodes, setNodes, onNodesChange] = react$1.useNodesState(flowGraph.nodes);
-  const [edges, setEdges, onEdgesChange] = react$1.useEdgesState(flowGraph.edges);
-  const [selectedFieldId, setSelectedFieldId] = react.useState(null);
+  const flowGraph = React.useMemo(() => buildReactFlowGraph(schema), [schema]);
+  const [nodes, setNodes, onNodesChange] = react.useNodesState(flowGraph.nodes);
+  const [edges, setEdges, onEdgesChange] = react.useEdgesState(flowGraph.edges);
+  const [selectedFieldId, setSelectedFieldId] = React.useState(null);
   const selectedQuestion = selectedFieldId ? findQuestion2(schema, selectedFieldId) : void 0;
-  react.useEffect(() => {
+  React.useEffect(() => {
     setNodes(flowGraph.nodes);
     setEdges(flowGraph.edges);
   }, [flowGraph, setNodes, setEdges]);
-  const sectionIds = react.useMemo(() => {
+  const sectionIds = React.useMemo(() => {
     const ids = [];
     for (const section of schema.sections) {
       ids.push(section.id);
     }
     return ids;
   }, [schema]);
-  const onNodeClick = react.useCallback(
+  const onNodeClick = React.useCallback(
     (_event, node) => {
       if (node.type === "fieldNode") {
         setSelectedFieldId(node.id);
@@ -4008,7 +4201,7 @@ function LogicFlowEditor({ schema, onChange }) {
     },
     []
   );
-  const onConnect = react.useCallback(
+  const onConnect = React.useCallback(
     (connection) => {
       if (!connection.source || !connection.target) return;
       const targetQuestion = findQuestion2(schema, connection.target);
@@ -4035,7 +4228,7 @@ function LogicFlowEditor({ schema, onChange }) {
     },
     [schema, onChange]
   );
-  const onEdgesDelete = react.useCallback(
+  const onEdgesDelete = React.useCallback(
     (deletedEdges) => {
       let updatedSchema = schema;
       for (const edge of deletedEdges) {
@@ -4060,7 +4253,7 @@ function LogicFlowEditor({ schema, onChange }) {
     },
     [schema, onChange]
   );
-  const handleConditionUpdate = react.useCallback(
+  const handleConditionUpdate = React.useCallback(
     (updates) => {
       if (!selectedFieldId) return;
       const updatedSchema = updateQuestionInSchema(schema, selectedFieldId, updates);
@@ -4074,18 +4267,18 @@ function LogicFlowEditor({ schema, onChange }) {
   const jumpCount = flowGraph.edges.filter(
     (e) => e.data?.edgeType === "onExit"
   ).length;
-  const totalFields = react.useMemo(
+  const totalFields = React.useMemo(
     () => schema.sections.reduce((sum, s) => sum + s.questions.length, 0),
     [schema]
   );
-  const conditionalFields = react.useMemo(
+  const conditionalFields = React.useMemo(
     () => schema.sections.reduce(
       (sum, s) => sum + s.questions.filter((q) => !!q.showIf).length,
       0
     ),
     [schema]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
     LogicFlowInner,
     {
       noSections,
@@ -4129,7 +4322,7 @@ function LogicFlowInner({
   totalFields,
   conditionalFields
 }) {
-  const { zoomIn, zoomOut, fitView } = react$1.useReactFlow();
+  const { zoomIn, zoomOut, fitView } = react.useReactFlow();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col bg-background min-h-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 h-9 flex items-center justify-between px-4 border-b border-border bg-card/50", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
@@ -4157,7 +4350,7 @@ function LogicFlowInner({
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs max-w-xs mx-auto", children: "Switch to Design mode and add sections with fields. Then come back here to visualize and edit branching logic." })
     ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex min-h-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        react$1.ReactFlow,
+        react.ReactFlow,
         {
           nodes,
           edges,
@@ -4174,9 +4367,9 @@ function LogicFlowInner({
           deleteKeyCode: ["Backspace", "Delete"],
           proOptions: { hideAttribution: true },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react$1.Background, { gap: 20, size: 1 }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Background, { gap: 20, size: 1 }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              react$1.MiniMap,
+              react.MiniMap,
               {
                 nodeColor: (node) => {
                   const d = node.data;
@@ -4240,15 +4433,15 @@ function LogicFlowInner({
   ] });
 }
 function TemplateGallery({ templates, onSelect, onClose }) {
-  const [search, setSearch] = react.useState("");
-  const [activeCategory, setActiveCategory] = react.useState("all");
-  const [confirmTemplate, setConfirmTemplate] = react.useState(null);
-  const categories = react.useMemo(() => {
+  const [search, setSearch] = React.useState("");
+  const [activeCategory, setActiveCategory] = React.useState("all");
+  const [confirmTemplate, setConfirmTemplate] = React.useState(null);
+  const categories = React.useMemo(() => {
     const cats = /* @__PURE__ */ new Set();
     for (const t of templates) cats.add(t.meta.category);
     return ["all", ...Array.from(cats)];
   }, [templates]);
-  const filtered = react.useMemo(() => {
+  const filtered = React.useMemo(() => {
     return templates.filter((t) => {
       const matchesCategory = activeCategory === "all" || t.meta.category === activeCategory;
       const matchesSearch = !search || t.meta.name.toLowerCase().includes(search.toLowerCase()) || t.meta.description.toLowerCase().includes(search.toLowerCase()) || t.meta.tags?.some((tag) => tag.toLowerCase().includes(search.toLowerCase()));
@@ -4344,9 +4537,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);
@@ -4395,9 +4588,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 = {};
@@ -4433,10 +4626,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 };
@@ -4468,30 +4661,30 @@ var FormBuilderErrorBoundary = class extends react.Component {
 };
 function FormBuilderCore(props) {
   const { initialSchema = DEFAULT_SCHEMA, onChange, onSave, height = "100vh", theme, className, toolbarExtra, questionTypes, palette, preview, templates, schemaUrl } = props;
-  const [viewMode, setViewMode] = react.useState("design");
-  const [jsonText, setJsonText] = react.useState("");
-  const [jsonSwitchError, setJsonSwitchError] = react.useState(null);
-  const [showTemplateGallery, setShowTemplateGallery] = react.useState(false);
-  const [saveValidationErrors, setSaveValidationErrors] = react.useState(null);
-  const [schemaUrlLoading, setSchemaUrlLoading] = react.useState(!!schemaUrl);
-  const [schemaUrlError, setSchemaUrlError] = react.useState(null);
+  const [viewMode, setViewMode] = React.useState("design");
+  const [jsonText, setJsonText] = React.useState("");
+  const [jsonSwitchError, setJsonSwitchError] = React.useState(null);
+  const [showTemplateGallery, setShowTemplateGallery] = React.useState(false);
+  const [saveValidationErrors, setSaveValidationErrors] = React.useState(null);
+  const [schemaUrlLoading, setSchemaUrlLoading] = React.useState(!!schemaUrl);
+  const [schemaUrlError, setSchemaUrlError] = React.useState(null);
   const { errors: jsonErrors, validate: validateJson } = useDebouncedValidation(400);
   const mergedQuestionTypes = questionTypes ? { ...QUESTION_TYPE_INFO, ...questionTypes } : QUESTION_TYPE_INFO;
   const builderState = useBuilderState(initialSchema);
   const dragDrop = useDragDrop(builderState);
-  const fileInputRef = react.useRef(null);
-  const [mobilePanel, setMobilePanel] = react.useState("none");
-  react.useEffect(() => {
+  const fileInputRef = React.useRef(null);
+  const [mobilePanel, setMobilePanel] = React.useState("none");
+  React.useEffect(() => {
     if (builderState.selectedItem && window.innerWidth < 768) {
       setMobilePanel("properties");
     }
   }, [builderState.selectedItem]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!dragDrop.activeDragItem && mobilePanel === "palette") {
       setMobilePanel("none");
     }
   }, [dragDrop.activeDragItem]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!schemaUrl) return;
     let cancelled = false;
     setSchemaUrlLoading(true);
@@ -4521,12 +4714,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);
@@ -4541,7 +4734,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);
@@ -4551,10 +4744,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;
@@ -4581,7 +4774,7 @@ ${details}`);
     },
     [builderState]
   );
-  const handleViewModeChange = react.useCallback(
+  const handleViewModeChange = React.useCallback(
     (newMode) => {
       setJsonSwitchError(null);
       if (viewMode === "json" && newMode !== "json") {
@@ -4607,7 +4800,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;
@@ -5095,19 +5288,104 @@ function FormBuilderInner(props) {
 
 // src/form-builder/components/FormBuilderGated.tsx
 var FormBuilder = requireLicense(FormBuilderInner, "FormBuilder");
-function formatCurrency(amount, currency) {
-  if (amount == null) return "";
-  try {
-    return new Intl.NumberFormat(void 0, {
-      style: "currency",
-      currency: currency ?? "USD"
-    }).format(amount);
-  } catch {
-    return `${currency ?? "USD"} ${amount.toFixed(2)}`;
+function resolvePath(obj, path) {
+  let current = obj;
+  for (const key of path.split(".")) {
+    if (current == null || typeof current !== "object") return void 0;
+    current = current[key];
   }
+  return current;
+}
+function isDarkTheme(theme) {
+  const bg = theme.colors?.background ?? "#FFFFFF";
+  let hex = bg.replace("#", "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  if (hex.length < 6) return false;
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return 0.299 * r + 0.587 * g + 0.114 * b < 128;
+}
+function resolveAppearance(theme) {
+  const c = theme.colors;
+  const isDark = isDarkTheme(theme);
+  return {
+    theme: isDark ? "night" : "default",
+    variables: {
+      colorPrimary: c?.primary,
+      colorBackground: c?.surface || c?.background,
+      colorText: c?.text,
+      colorDanger: c?.error,
+      colorSuccess: c?.success || "#22c55e",
+      borderRadius: theme.shape?.inputRadius || "6px",
+      fontFamily: theme.typography?.fontFamily
+    }
+  };
+}
+var PAYKIT_STYLES = `
+[data-paykit-form] {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+[data-paykit-submit] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 10px 20px;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  font-family: var(--paykit-font-family, inherit);
+  line-height: 1.5;
+  color: #fff;
+  background: var(--paykit-color-primary, #635BFF);
+  border: none;
+  border-radius: var(--paykit-border-radius, 6px);
+  cursor: pointer;
+  transition: opacity 150ms ease, box-shadow 150ms ease, filter 150ms ease;
+}
+[data-paykit-submit]:hover:not(:disabled) {
+  filter: brightness(1.1);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--paykit-color-primary, #635BFF) 35%, transparent);
+}
+[data-paykit-submit]:active:not(:disabled) {
+  filter: brightness(0.95);
+}
+[data-paykit-submit]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+`;
+var paykitStylesInjected = false;
+function injectPayKitStyles() {
+  if (paykitStylesInjected || typeof document === "undefined") return;
+  const style = document.createElement("style");
+  style.setAttribute("data-paykit-pro", "");
+  style.textContent = PAYKIT_STYLES;
+  document.head.appendChild(style);
+  paykitStylesInjected = true;
+}
+function formatCurrency(amountCents, currency) {
+  if (amountCents == null) return "";
+  return paykit.formatAmount(amountCents, currency ?? "USD");
 }
 function ProPaymentField(props) {
-  const { field, value, error, touched, disabled, readonly, onChange, onBlur, customProps } = props;
+  injectPayKitStyles();
+  const {
+    field,
+    value,
+    error,
+    touched,
+    disabled,
+    readonly,
+    onChange,
+    onBlur,
+    customProps,
+    theme: formTheme
+  } = props;
   const config = field.config;
   const current = value ?? { status: "pending" };
   const provider = config?.provider ?? "stripe";
@@ -5118,42 +5396,88 @@ function ProPaymentField(props) {
   const onCreateIntent = customProps?.onCreatePaymentIntent;
   const onPaymentComplete = customProps?.onPaymentComplete;
   const serverUrl = config?.serverUrl;
-  const [clientSecret, setClientSecret] = react.useState(directSecret);
-  const [intentLoading, setIntentLoading] = react.useState(false);
-  const [intentError, setIntentError] = react.useState(null);
+  const [clientSecret, setClientSecret] = React.useState(directSecret);
+  const [intentLoading, setIntentLoading] = React.useState(false);
+  const [intentError, setIntentError] = React.useState(null);
   const mode = directSecret ? "direct" : onCreateIntent ? "callback" : serverUrl ? "url" : "setup";
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (directSecret) {
       setClientSecret(directSecret);
       return;
     }
     if (mode === "setup" || !amount || !publicKey) return;
     if (clientSecret) return;
+    let cancelled = false;
+    const controller = mode === "url" ? new AbortController() : void 0;
     const fetchIntent = async () => {
       setIntentLoading(true);
       setIntentError(null);
       try {
         if (mode === "callback" && onCreateIntent) {
-          const result = await onCreateIntent({ amount, currency, provider, metadata: { fieldId: field.id } });
-          setClientSecret(result.clientSecret);
+          const result = await onCreateIntent({
+            amount,
+            currency,
+            provider,
+            metadata: { fieldId: field.id }
+          });
+          if (!cancelled) setClientSecret(result.clientSecret);
         } else if (mode === "url" && serverUrl) {
           const res = await fetch(serverUrl, {
             method: "POST",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ amount, currency, provider, metadata: { fieldId: field.id } })
+            body: JSON.stringify({ amount, currency, provider, metadata: { fieldId: field.id } }),
+            signal: controller?.signal
           });
           if (!res.ok) throw new Error(`Server error (${res.status})`);
           const data = await res.json();
-          setClientSecret(data.clientSecret);
+          const secretPath = config?.responseMapping?.clientSecretPath;
+          const secret = secretPath ? resolvePath(data, secretPath) : data.clientSecret;
+          if (!secret)
+            throw new Error(
+              "No clientSecret in response" + (secretPath ? ` at path "${secretPath}"` : "")
+            );
+          if (!cancelled) setClientSecret(secret);
         }
       } catch (err) {
+        if (cancelled) return;
         setIntentError(err instanceof Error ? err.message : "Failed to create payment intent");
       } finally {
-        setIntentLoading(false);
+        if (!cancelled) setIntentLoading(false);
       }
     };
     fetchIntent();
-  }, [mode, amount, currency, provider, publicKey, directSecret, clientSecret, onCreateIntent, serverUrl, field.id]);
+    return () => {
+      cancelled = true;
+      controller?.abort();
+    };
+  }, [
+    mode,
+    amount,
+    currency,
+    provider,
+    publicKey,
+    directSecret,
+    clientSecret,
+    onCreateIntent,
+    serverUrl,
+    field.id
+  ]);
+  const c = formTheme.colors;
+  const cardStyle = {
+    borderRadius: formTheme.shape?.inputRadius || "8px",
+    border: `1px solid ${c?.border || "#e2e8f0"}`,
+    padding: "16px",
+    background: c?.surface || c?.background,
+    color: c?.text
+  };
+  const mutedTextStyle = { color: c?.textMuted, fontSize: "0.875rem" };
+  const badgeStyle = {
+    fontSize: "0.75rem",
+    padding: "2px 8px",
+    borderRadius: formTheme.shape?.inputRadius || "4px",
+    background: c?.secondary || c?.surface,
+    color: c?.secondaryForeground || c?.textMuted
+  };
   const handleSuccess = (chargeId) => {
     const result = { status: "succeeded", chargeId };
     onChange(result);
@@ -5168,7 +5492,8 @@ function ProPaymentField(props) {
   };
   if (!publicKey) {
     return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-2 border-dashed border-input p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
-      "Payment field \u2014 configure a ",
+      "Payment field \u2014 configure a",
+      " ",
       /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-muted px-1 rounded text-xs", children: "publicKey" }),
       " in the field properties panel."
     ] }) }) });
@@ -5181,40 +5506,97 @@ function ProPaymentField(props) {
     ] }) }) });
   }
   if (current.status === "succeeded") {
-    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-input p-4", children: [
-      amount != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mb-2", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
+      amount != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { ...mutedTextStyle, marginBottom: "8px" }, children: [
         formatCurrency(amount, currency),
         config?.description && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
           " \u2014 ",
           config.description
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", style: { color: "var(--success, #22c55e)" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, width: 16, height: 16, children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          "Payment successful",
-          current.chargeId ? ` (${current.chargeId})` : ""
-        ] })
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            color: c?.success || "#22c55e"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                width: 16,
+                height: 16,
+                children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "Payment successful",
+              current.chargeId ? ` (${current.chargeId})` : ""
+            ] })
+          ]
+        }
+      )
     ] }) });
   }
   if (current.status === "failed") {
-    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-destructive/50 p-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-destructive font-medium", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, width: 16, height: 16, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          "Payment failed",
-          current.error ? `: ${current.error}` : ""
-        ] })
-      ] }),
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...cardStyle, borderColor: c?.error || "#dc2626" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            color: c?.error || "#dc2626"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                width: 16,
+                height: 16,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "Payment failed",
+              current.error ? `: ${current.error}` : ""
+            ] })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
-          className: "mt-2 text-xs text-primary hover:underline",
+          style: {
+            marginTop: "8px",
+            fontSize: "0.75rem",
+            color: c?.primary,
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            textDecoration: "underline",
+            padding: 0
+          },
           onClick: () => {
             onChange({ status: "pending" });
             setClientSecret(void 0);
@@ -5225,26 +5607,46 @@ function ProPaymentField(props) {
     ] }) });
   }
   if (intentLoading || mode !== "setup" && mode !== "direct" && !clientSecret) {
-    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-input p-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Payment" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
-      ] }),
-      amount != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: "12px"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem", fontWeight: 500 }, children: "Payment" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeStyle, children: provider })
+          ]
+        }
+      ),
+      amount != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { ...mutedTextStyle, marginBottom: "12px" }, children: [
         "Amount: ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatCurrency(amount, currency) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: formatCurrency(amount, currency) }),
         config?.description && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
           " \u2014 ",
           config.description
         ] })
       ] }),
       intentError ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: intentError }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem", color: c?.error || "#dc2626" }, children: intentError }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
-            className: "mt-2 text-xs text-primary hover:underline",
+            style: {
+              marginTop: "8px",
+              fontSize: "0.75rem",
+              color: c?.primary,
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              textDecoration: "underline",
+              padding: 0
+            },
             onClick: () => {
               setIntentError(null);
               setClientSecret(void 0);
@@ -5252,54 +5654,78 @@ function ProPaymentField(props) {
             children: "Retry"
           }
         )
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", ...mutedTextStyle }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            style: { width: "16px", height: "16px", animation: "spin 1s linear infinite" },
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" })
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Preparing payment..." })
       ] })
     ] }) });
   }
   if (!clientSecret) {
     const waitingForAmount = config?.amountField && !amount;
-    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-input p-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Payment" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: waitingForAmount ? "Select an option above to proceed with payment." : "Provide a clientSecret via customProps, an onCreatePaymentIntent callback, or a serverUrl." })
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: "12px"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem", fontWeight: 500 }, children: "Payment" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeStyle, children: provider })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: mutedTextStyle, children: waitingForAmount ? "Select an option above to proceed with payment." : "Provide a clientSecret via customProps, an onCreatePaymentIntent callback, or a serverUrl." })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-input p-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Payment" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
-    ] }),
-    amount != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "12px"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem", fontWeight: 500 }, children: "Payment" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeStyle, children: provider })
+        ]
+      }
+    ),
+    amount != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { ...mutedTextStyle, marginBottom: "12px" }, children: [
       "Amount: ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatCurrency(amount, currency) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: formatCurrency(amount, currency) }),
       config?.description && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
         " \u2014 ",
         config.description
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      react.Suspense,
+      PayKitCheckout,
       {
-        fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground py-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
-          "Loading payment form..."
-        ] }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          PayKitCheckout,
-          {
-            publicKey,
-            clientSecret,
-            amount,
-            currency,
-            disabled: disabled || readonly,
-            onSuccess: handleSuccess,
-            onError: handleError
-          }
-        )
+        publicKey,
+        clientSecret,
+        amount,
+        currency,
+        appearance: resolveAppearance(formTheme),
+        disabled: disabled || readonly,
+        onSuccess: handleSuccess,
+        onError: handleError
       }
     )
   ] }) });
@@ -5309,48 +5735,17 @@ function PayKitCheckout({
   clientSecret,
   amount,
   currency,
+  appearance,
   disabled,
   onSuccess,
   onError
 }) {
-  const [PayKit, setPayKit] = react.useState(null);
-  const [loadError, setLoadError] = react.useState(null);
-  react.useEffect(() => {
-    let cancelled = false;
-    Promise.all([
-      import('@squaredr/paykit-react'),
-      // @ts-expect-error — optional peer dep, types not available at build time
-      import('@squaredr/paykit/stripe/client')
-    ]).then(([paykit, stripe]) => {
-      if (cancelled) return;
-      setPayKit({
-        Provider: paykit.PayKitProvider,
-        Form: paykit.CheckoutForm,
-        adapter: new stripe.StripeClientAdapter(publicKey)
-      });
-    }).catch((err) => {
-      if (cancelled) return;
-      setLoadError(
-        `Failed to load payment SDK. Ensure @squaredr/paykit-react and @squaredr/paykit are installed. (${err.message})`
-      );
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [publicKey]);
-  if (loadError) {
-    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: loadError });
-  }
-  if (!PayKit) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground py-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
-      "Loading Stripe..."
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(PayKit.Provider, { clientAdapter: PayKit.adapter, children: /* @__PURE__ */ jsxRuntime.jsx(
-    PayKit.Form,
+  const clientAdapter = React.useMemo(() => new client.StripeClientAdapter(publicKey), [publicKey]);
+  return /* @__PURE__ */ jsxRuntime.jsx(paykitReact.PayKitProvider, { clientAdapter, children: /* @__PURE__ */ jsxRuntime.jsx(
+    paykitReact.CheckoutForm,
     {
       clientSecret,
+      appearance,
       submitLabel: disabled ? "Payment disabled" : `Pay ${formatCurrency(amount, currency)}`,
       onSuccess: (result) => onSuccess(result.chargeId),
       onError: (err) => onError(err.message)
@@ -5360,40 +5755,155 @@ function PayKitCheckout({
 var PRO_FIELD_OVERRIDES = {
   payment: ProPaymentField
 };
-
-// src/response-viewer/clinical-display-data.ts
-var BODY_REGION_LABELS = {
-  head: "Head",
-  neck: "Neck",
-  "left-shoulder": "Left Shoulder",
-  "right-shoulder": "Right Shoulder",
-  chest: "Chest",
-  abdomen: "Abdomen",
-  "left-upper-arm": "Left Upper Arm",
-  "right-upper-arm": "Right Upper Arm",
-  "left-forearm": "Left Forearm",
-  "right-forearm": "Right Forearm",
-  "left-hand": "Left Hand",
-  "right-hand": "Right Hand",
-  pelvis: "Pelvis",
-  "left-thigh": "Left Thigh",
-  "right-thigh": "Right Thigh",
-  "left-knee": "Left Knee",
-  "right-knee": "Right Knee",
-  "left-shin": "Left Shin",
-  "right-shin": "Right Shin",
-  "left-foot": "Left Foot",
-  "right-foot": "Right Foot"
-};
-var PAIN_FACE_LABELS = [
-  { score: 0, label: "No Hurt", color: "#22c55e" },
-  { score: 2, label: "Hurts Little Bit", color: "#84cc16" },
-  { score: 4, label: "Hurts Little More", color: "#eab308" },
-  { score: 6, label: "Hurts Even More", color: "#f97316" },
-  { score: 8, label: "Hurts Whole Lot", color: "#ef4444" },
-  { score: 10, label: "Hurts Worst", color: "#dc2626" }
-];
-function getPainLabel(score) {
+function formatDuration(ms) {
+  if (ms == null) return "\u2014";
+  const totalSeconds = Math.round(ms / 1e3);
+  if (totalSeconds < 60) return `${totalSeconds}s`;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}m ${seconds}s`;
+}
+function countAnswered(values) {
+  let count = 0;
+  for (const v of Object.values(values)) {
+    if (v !== void 0 && v !== null && v !== "") count++;
+  }
+  return count;
+}
+function getTotalFieldCount(schema) {
+  let count = 0;
+  for (const section of schema.sections) {
+    for (const q of section.questions) {
+      if (!DISPLAY_ONLY_TYPES.has(q.type)) count++;
+    }
+  }
+  return count;
+}
+function ResponseTable({
+  schema,
+  responses,
+  onRowClick,
+  selectable,
+  selectedIds,
+  onToggleSelect,
+  onSelectAll
+}) {
+  const totalFields = getTotalFieldCount(schema);
+  const allPageSelected = selectable && responses.length > 0 && responses.every(
+    (r) => r.sessionToken && selectedIds?.has(r.sessionToken)
+  );
+  const colCount = 4 + (selectable ? 1 : 0);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse text-[13px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "bg-muted", children: [
+      selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 w-8 border-b-2 border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: allPageSelected,
+          onChange: () => onSelectAll?.(),
+          className: "accent-primary"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left font-semibold text-foreground border-b-2 border-border whitespace-nowrap", children: "Submitted" }),
+      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left font-semibold text-foreground border-b-2 border-border whitespace-nowrap", children: "Completion Time" }),
+      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left font-semibold text-foreground border-b-2 border-border whitespace-nowrap", children: "Fields Answered" }),
+      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left font-semibold text-foreground border-b-2 border-border whitespace-nowrap", children: "Score" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+      responses.map((response, idx) => {
+        const answered = countAnswered(response.values);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "tr",
+          {
+            onClick: () => onRowClick?.(response),
+            className: onRowClick ? "cursor-pointer border-b border-border hover:bg-accent transition-colors" : "border-b border-border",
+            children: [
+              selectable && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: !!(response.sessionToken && selectedIds?.has(response.sessionToken)),
+                  onChange: (e) => {
+                    e.stopPropagation();
+                    if (response.sessionToken) onToggleSelect?.(response.sessionToken);
+                  },
+                  onClick: (e) => e.stopPropagation(),
+                  className: "accent-primary"
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-foreground whitespace-nowrap", children: new Date(response.submittedAt).toLocaleString() }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-foreground whitespace-nowrap", children: formatDuration(response.completionTimeMs) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "px-3 py-2 text-foreground whitespace-nowrap", children: [
+                answered,
+                "/",
+                totalFields
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-foreground whitespace-nowrap", children: response.totalScore ?? "\u2014" })
+            ]
+          },
+          response.sessionToken || idx
+        );
+      }),
+      responses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        "td",
+        {
+          colSpan: colCount,
+          className: "px-3 py-8 text-center text-muted-foreground",
+          children: "No responses yet"
+        }
+      ) })
+    ] })
+  ] }) });
+}
+var DISPLAY_ONLY_TYPES = /* @__PURE__ */ new Set([
+  "info-block",
+  "info_block",
+  "section-header",
+  "page-break",
+  "image",
+  "divider",
+  "spacer",
+  "video",
+  "rich-text",
+  "welcome-screen",
+  "thank-you-screen",
+  "hidden",
+  "calculated"
+]);
+
+// src/response-viewer/clinical-display-data.ts
+var BODY_REGION_LABELS = {
+  head: "Head",
+  neck: "Neck",
+  "left-shoulder": "Left Shoulder",
+  "right-shoulder": "Right Shoulder",
+  chest: "Chest",
+  abdomen: "Abdomen",
+  "left-upper-arm": "Left Upper Arm",
+  "right-upper-arm": "Right Upper Arm",
+  "left-forearm": "Left Forearm",
+  "right-forearm": "Right Forearm",
+  "left-hand": "Left Hand",
+  "right-hand": "Right Hand",
+  pelvis: "Pelvis",
+  "left-thigh": "Left Thigh",
+  "right-thigh": "Right Thigh",
+  "left-knee": "Left Knee",
+  "right-knee": "Right Knee",
+  "left-shin": "Left Shin",
+  "right-shin": "Right Shin",
+  "left-foot": "Left Foot",
+  "right-foot": "Right Foot"
+};
+var PAIN_FACE_LABELS = [
+  { score: 0, label: "No Hurt", color: "#22c55e" },
+  { score: 2, label: "Hurts Little Bit", color: "#84cc16" },
+  { score: 4, label: "Hurts Little More", color: "#eab308" },
+  { score: 6, label: "Hurts Even More", color: "#f97316" },
+  { score: 8, label: "Hurts Whole Lot", color: "#ef4444" },
+  { score: 10, label: "Hurts Worst", color: "#dc2626" }
+];
+function getPainLabel(score) {
   const face = PAIN_FACE_LABELS.reduce(
     (closest, f) => closest == null || Math.abs(f.score - score) < Math.abs(closest.score - score) ? f : closest,
     void 0
@@ -5497,166 +6007,6 @@ function getScoreSeverity(instrumentKey, score) {
   if (!thresholds) return void 0;
   return thresholds.find((t) => score >= t.min && score <= t.max);
 }
-function ResponseTable({
-  schema,
-  responses,
-  onRowClick,
-  selectable,
-  selectedIds,
-  onToggleSelect,
-  onSelectAll
-}) {
-  const questions = getAllQuestions(schema);
-  const allPageSelected = selectable && responses.length > 0 && responses.every(
-    (r) => r.sessionToken && selectedIds?.has(r.sessionToken)
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse text-[13px]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "bg-muted", children: [
-      selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 w-8 border-b-2 border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "checkbox",
-          checked: allPageSelected,
-          onChange: () => onSelectAll?.(),
-          className: "accent-primary"
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left font-semibold text-foreground border-b-2 border-border whitespace-nowrap", children: "Submitted" }),
-      questions.map((q) => /* @__PURE__ */ jsxRuntime.jsx(
-        "th",
-        {
-          className: "px-3 py-2 text-left font-semibold text-foreground border-b-2 border-border whitespace-nowrap",
-          children: q.label
-        },
-        q.id
-      )),
-      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left font-semibold text-foreground border-b-2 border-border whitespace-nowrap", children: "Score" })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-      responses.map((response, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "tr",
-        {
-          onClick: () => onRowClick?.(response),
-          className: onRowClick ? "cursor-pointer border-b border-border hover:bg-accent transition-colors" : "border-b border-border",
-          children: [
-            selectable && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "checkbox",
-                checked: !!(response.sessionToken && selectedIds?.has(response.sessionToken)),
-                onChange: (e) => {
-                  e.stopPropagation();
-                  if (response.sessionToken) onToggleSelect?.(response.sessionToken);
-                },
-                onClick: (e) => e.stopPropagation(),
-                className: "accent-primary"
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-foreground max-w-50 overflow-hidden text-ellipsis whitespace-nowrap", children: new Date(response.submittedAt).toLocaleString() }),
-            questions.map((q) => /* @__PURE__ */ jsxRuntime.jsx(
-              "td",
-              {
-                className: "px-3 py-2 text-foreground max-w-50 overflow-hidden text-ellipsis whitespace-nowrap",
-                children: formatCellValue(response.values[q.id], q.type)
-              },
-              q.id
-            )),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-foreground max-w-50 overflow-hidden text-ellipsis whitespace-nowrap", children: response.totalScore ?? "\u2014" })
-          ]
-        },
-        response.sessionToken || idx
-      )),
-      responses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
-        "td",
-        {
-          colSpan: questions.length + 2 + (selectable ? 1 : 0),
-          className: "px-3 py-8 text-center text-muted-foreground",
-          children: "No responses yet"
-        }
-      ) })
-    ] })
-  ] }) });
-}
-function getAllQuestions(schema) {
-  const questions = [];
-  for (const section of schema.sections) {
-    for (const q of section.questions) {
-      if (q.type === "info-block" || q.type === "section-header" || q.type === "page-break") {
-        continue;
-      }
-      questions.push(q);
-    }
-  }
-  return questions;
-}
-function formatCellValue(value, type) {
-  if (value == null) return "\u2014";
-  if (type) {
-    switch (type) {
-      case "vitals_entry": {
-        if (typeof value !== "object" || value === null) break;
-        const v = value;
-        const parts = [];
-        if (v.systolicBp && v.diastolicBp) parts.push(`BP ${v.systolicBp}/${v.diastolicBp}`);
-        if (v.heartRate) parts.push(`HR ${v.heartRate}`);
-        if (v.temperature) parts.push(`${v.temperature}\xB0F`);
-        if (v.oxygenSaturation) parts.push(`SpO\u2082 ${v.oxygenSaturation}%`);
-        return parts.length > 0 ? parts.join(", ") : "\u2014";
-      }
-      case "medication_list":
-        if (Array.isArray(value)) return `${value.length} medication${value.length !== 1 ? "s" : ""}`;
-        break;
-      case "allergy_list":
-        if (Array.isArray(value)) return `${value.length} allerg${value.length !== 1 ? "ies" : "y"}`;
-        break;
-      case "body_diagram":
-        if (Array.isArray(value)) {
-          const labels = value.map((id) => BODY_REGION_LABELS[id] ?? id);
-          return labels.join(", ");
-        }
-        break;
-      case "pain_scale":
-        if (typeof value === "number") return `${value}/10`;
-        break;
-      case "bmi_calculator": {
-        if (typeof value !== "object" || value === null) break;
-        const d = value;
-        if (d.bmi != null) return `BMI ${d.bmi}`;
-        break;
-      }
-      case "payment": {
-        if (typeof value !== "object" || value === null) break;
-        const p = value;
-        const status = p.status;
-        return status ? status.charAt(0).toUpperCase() + status.slice(1) : "\u2014";
-      }
-      case "insurance_card": {
-        if (typeof value !== "object" || value === null) break;
-        const ins = value;
-        const parts = [ins.carrierId, ins.planName].filter(Boolean);
-        return parts.length > 0 ? parts.join(" \u2014 ") : "Card uploaded";
-      }
-      case "legal_name": {
-        if (typeof value !== "object" || value === null) break;
-        const n = value;
-        return [n.first, n.last].filter(Boolean).join(" ") || "\u2014";
-      }
-      case "address": {
-        if (typeof value !== "object" || value === null) break;
-        const a = value;
-        return [a.city, a.state].filter(Boolean).join(", ") || "\u2014";
-      }
-      case "consent":
-        return value === true || value === "true" || value === "agreed" ? "Agreed" : "Not agreed";
-      case "signature":
-        return typeof value === "string" && value.startsWith("data:image") ? "Signed" : "\u2014";
-    }
-  }
-  if (typeof value === "boolean") return value ? "Yes" : "No";
-  if (Array.isArray(value)) return value.join(", ");
-  if (typeof value === "object") return JSON.stringify(value);
-  return String(value);
-}
 function ResponseCard({
   response,
   fields,
@@ -6144,7 +6494,7 @@ function formatFallbackValue(value) {
   return String(value);
 }
 function TimelineView({ responses, questions, onSelect }) {
-  const grouped = react.useMemo(() => groupByDay(responses), [responses]);
+  const grouped = React.useMemo(() => groupByDay(responses), [responses]);
   if (responses.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-muted-foreground text-sm", children: "No responses to display." });
   }
@@ -6370,7 +6720,7 @@ function getStatsQuestions(schema) {
   return questions;
 }
 function StatsPanel({ schema, responses, onClose }) {
-  const stats = react.useMemo(() => computeStats(responses, schema), [responses, schema]);
+  const stats = React.useMemo(() => computeStats(responses, schema), [responses, schema]);
   if (stats.totalCount === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-muted-foreground", children: "No responses to compute statistics." });
   }
@@ -6523,9 +6873,9 @@ function getChartableFieldIds(schema) {
   return chartable;
 }
 function ChartPanel({ schema, responses, onClose }) {
-  const chartableFields = react.useMemo(() => getChartableFieldIds(schema), [schema]);
-  const [selectedFieldId, setSelectedFieldId] = react.useState(chartableFields[0]?.id ?? "");
-  const distribution = react.useMemo(() => {
+  const chartableFields = React.useMemo(() => getChartableFieldIds(schema), [schema]);
+  const [selectedFieldId, setSelectedFieldId] = React.useState(chartableFields[0]?.id ?? "");
+  const distribution = React.useMemo(() => {
     if (!selectedFieldId) return [];
     return computeFieldDistribution(responses, selectedFieldId);
   }, [responses, selectedFieldId]);
@@ -6654,13 +7004,26 @@ function exportToJson(responses, filename = "responses.json") {
   const content = JSON.stringify(responses, null, 2);
   downloadBlob(content, filename, "application/json;charset=utf-8;");
 }
+var DISPLAY_ONLY_TYPES2 = /* @__PURE__ */ new Set([
+  "info-block",
+  "info_block",
+  "section-header",
+  "page-break",
+  "image",
+  "divider",
+  "spacer",
+  "video",
+  "rich-text",
+  "welcome-screen",
+  "thank-you-screen",
+  "hidden",
+  "calculated"
+]);
 function getExportableQuestions(schema) {
   const questions = [];
   for (const section of schema.sections) {
     for (const q of section.questions) {
-      if (q.type === "info-block" || q.type === "section-header" || q.type === "page-break") {
-        continue;
-      }
+      if (DISPLAY_ONLY_TYPES2.has(q.type)) continue;
       questions.push(q);
     }
   }
@@ -6726,6 +7089,10 @@ function formatExportValue(value, type) {
   return String(value);
 }
 function escapeCsvField(field) {
+  const first = field.charAt(0);
+  if (first === "=" || first === "+" || first === "-" || first === "@" || first === "	" || first === "\r") {
+    field = `'${field}`;
+  }
   if (field.includes(",") || field.includes('"') || field.includes("\n")) {
     return `"${field.replace(/"/g, '""')}"`;
   }
@@ -6740,7 +7107,7 @@ function downloadBlob(content, filename, mimeType) {
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
-  URL.revokeObjectURL(url);
+  setTimeout(() => URL.revokeObjectURL(url), 1e4);
 }
 
 // src/response-viewer/pagination-utils.ts
@@ -6944,38 +7311,41 @@ function ResponseViewerInner({
   onBulkExport,
   selectable = false
 }) {
-  const [viewMode, setViewMode] = react.useState("table");
-  const [selectedResponse, setSelectedResponse] = react.useState(null);
-  const [currentPage, setCurrentPage] = react.useState(1);
-  const [effectivePageSize, setEffectivePageSize] = react.useState(pageSize);
-  const [filterState, setFilterState] = react.useState(createEmptyFilterState);
-  const [showFilterPanel, setShowFilterPanel] = react.useState(false);
-  const [searchQuery, setSearchQuery] = react.useState("");
-  const [showStats, setShowStats] = react.useState(false);
-  const [showCharts, setShowCharts] = react.useState(false);
-  const [selectedIds, setSelectedIds] = react.useState(/* @__PURE__ */ new Set());
-  const [confirmDialog, setConfirmDialog] = react.useState(null);
-  const [draftFieldId, setDraftFieldId] = react.useState("");
-  const [draftOperator, setDraftOperator] = react.useState("contains");
-  const [draftValue, setDraftValue] = react.useState("");
-  react.useEffect(() => {
+  const [viewMode, setViewMode] = React.useState("table");
+  const [selectedResponse, setSelectedResponse] = React.useState(null);
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [effectivePageSize, setEffectivePageSize] = React.useState(pageSize);
+  const [filterState, setFilterState] = React.useState(createEmptyFilterState);
+  const [showFilterPanel, setShowFilterPanel] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [showStats, setShowStats] = React.useState(false);
+  const [showCharts, setShowCharts] = React.useState(false);
+  const [selectedIds, setSelectedIds] = React.useState(/* @__PURE__ */ new Set());
+  const [confirmDialog, setConfirmDialog] = React.useState(null);
+  const [draftFieldId, setDraftFieldId] = React.useState("");
+  const [draftOperator, setDraftOperator] = React.useState("contains");
+  const [draftValue, setDraftValue] = React.useState("");
+  React.useEffect(() => {
     setCurrentPage(1);
   }, [responses]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     setEffectivePageSize(pageSize);
     setCurrentPage(1);
   }, [pageSize]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     setSelectedIds(/* @__PURE__ */ new Set());
   }, [responses]);
-  const searchedResponses = react.useMemo(
+  const searchedResponses = React.useMemo(
     () => searchResponses(responses, searchQuery, schema),
     [responses, searchQuery, schema]
   );
   const isFiltered = hasActiveFilters(filterState);
-  const filteredResponses = applyFilters(searchedResponses, filterState);
+  const filteredResponses = React.useMemo(
+    () => applyFilters(searchedResponses, filterState),
+    [searchedResponses, filterState]
+  );
   const pag = paginate(filteredResponses, currentPage, effectivePageSize);
-  const questions = getAllQuestions2(schema);
+  const questions = getAllQuestions(schema);
   const isSelectable = selectable && (!!onBulkDelete || !!onBulkExport);
   function handleSelect(response) {
     setSelectedResponse(response);
@@ -7077,7 +7447,7 @@ function ResponseViewerInner({
     });
   }
   function getFields(response) {
-    return questions.map((q) => ({
+    return questions.filter((q) => response.values[q.id] !== void 0).map((q) => ({
       questionId: q.id,
       label: q.label,
       type: q.type,
@@ -7230,10 +7600,10 @@ function ResponseViewerInner({
                 className: "h-7 text-xs",
                 onClick: () => {
                   const csvFilename = filename ? filename.replace(/\.\w+$/, ".csv") : "responses.csv";
-                  exportToCsv(schema, responses, csvFilename, { dateFormat, columnLabels });
-                  onExport?.("csv", responses.length);
+                  exportToCsv(schema, filteredResponses, csvFilename, { dateFormat, columnLabels });
+                  onExport?.("csv", filteredResponses.length);
                 },
-                disabled: responses.length === 0,
+                disabled: filteredResponses.length === 0,
                 children: "Export CSV"
               }
             ),
@@ -7245,10 +7615,10 @@ function ResponseViewerInner({
                 className: "h-7 text-xs",
                 onClick: () => {
                   const jsonFilename = filename ? filename.replace(/\.\w+$/, ".json") : "responses.json";
-                  exportToJson(responses, jsonFilename);
-                  onExport?.("json", responses.length);
+                  exportToJson(filteredResponses, jsonFilename);
+                  onExport?.("json", filteredResponses.length);
                 },
-                disabled: responses.length === 0,
+                disabled: filteredResponses.length === 0,
                 children: "Export JSON"
               }
             )
@@ -7529,13 +7899,26 @@ function ResponseViewerInner({
     }
   );
 }
-function getAllQuestions2(schema) {
+var DISPLAY_ONLY_TYPES3 = /* @__PURE__ */ new Set([
+  "info-block",
+  "info_block",
+  "section-header",
+  "page-break",
+  "image",
+  "divider",
+  "spacer",
+  "video",
+  "rich-text",
+  "welcome-screen",
+  "thank-you-screen",
+  "hidden",
+  "calculated"
+]);
+function getAllQuestions(schema) {
   const questions = [];
   for (const section of schema.sections) {
     for (const q of section.questions) {
-      if (q.type === "info-block" || q.type === "section-header" || q.type === "page-break") {
-        continue;
-      }
+      if (DISPLAY_ONLY_TYPES3.has(q.type)) continue;
       questions.push(q);
     }
   }
@@ -7550,18 +7933,23 @@ var PREVIEW_SCHEMA = {
   id: "theme-preview",
   version: "1.0.0",
   title: "Theme Preview",
-  description: "See how your theme looks on a real form.",
+  description: "See how your theme looks across every field type.",
+  settings: {
+    displayMode: "classic",
+    showProgress: false
+  },
   sections: [
     {
-      id: "s1",
-      title: "Contact Information",
+      id: "s-text",
+      title: "Text Inputs",
       questions: [
         {
           id: "name",
           type: "short_text",
           label: "Full Name",
           required: true,
-          placeholder: "Jane Doe"
+          placeholder: "Jane Doe",
+          helpText: "Enter your full legal name."
         },
         {
           id: "email",
@@ -7570,6 +7958,31 @@ var PREVIEW_SCHEMA = {
           required: true,
           placeholder: "jane@example.com"
         },
+        {
+          id: "phone",
+          type: "phone",
+          label: "Phone Number",
+          placeholder: "(555) 123-4567"
+        },
+        {
+          id: "website",
+          type: "url",
+          label: "Website",
+          placeholder: "https://example.com"
+        },
+        {
+          id: "bio",
+          type: "long_text",
+          label: "Bio / Notes",
+          placeholder: "Tell us about yourself...",
+          helpText: "Markdown is supported."
+        }
+      ]
+    },
+    {
+      id: "s-selection",
+      title: "Selection Fields",
+      questions: [
         {
           id: "department",
           type: "dropdown",
@@ -7577,20 +7990,184 @@ var PREVIEW_SCHEMA = {
           options: [
             { label: "Engineering", value: "engineering" },
             { label: "Design", value: "design" },
-            { label: "Marketing", value: "marketing" }
+            { label: "Marketing", value: "marketing" },
+            { label: "Sales", value: "sales" }
           ]
         },
         {
-          id: "rating",
-          type: "rating",
-          label: "How would you rate this experience?",
+          id: "role",
+          type: "single_select",
+          label: "Role",
+          helpText: "Select one option.",
+          options: [
+            { label: "Individual Contributor", value: "ic" },
+            { label: "Team Lead", value: "lead" },
+            { label: "Manager", value: "manager" },
+            { label: "Director", value: "director" }
+          ],
+          config: { type: "single_select", layout: "vertical" }
+        },
+        {
+          id: "skills",
+          type: "multi_select",
+          label: "Skills",
+          helpText: "Select all that apply.",
+          options: [
+            { label: "JavaScript", value: "js" },
+            { label: "TypeScript", value: "ts" },
+            { label: "Python", value: "py" },
+            { label: "Rust", value: "rust" },
+            { label: "Go", value: "go" }
+          ],
+          config: { type: "multi_select", layout: "vertical" }
+        },
+        {
+          id: "newsletter",
+          type: "boolean",
+          label: "Subscribe to newsletter?",
+          config: { type: "boolean", style: "toggle" }
+        }
+      ]
+    },
+    {
+      id: "s-numeric",
+      title: "Numeric & Rating",
+      questions: [
+        {
+          id: "age",
+          type: "number",
+          label: "Age",
+          placeholder: "25",
+          config: { type: "number", min: 0, max: 150 }
+        },
+        {
+          id: "satisfaction",
+          type: "slider",
+          label: "Satisfaction Level",
+          config: { type: "slider", min: 0, max: 100, step: 5 }
+        },
+        {
+          id: "rating",
+          type: "rating",
+          label: "Overall Rating",
           config: { type: "rating", max: 5 }
         },
         {
-          id: "notes",
-          type: "long_text",
-          label: "Additional Notes",
-          placeholder: "Any other feedback..."
+          id: "nps",
+          type: "nps",
+          label: "How likely are you to recommend us?"
+        },
+        {
+          id: "opinion",
+          type: "opinion_scale",
+          label: "How do you feel about the onboarding?",
+          config: {
+            type: "opinion_scale",
+            min: 1,
+            max: 5,
+            minLabel: "Very Poor",
+            maxLabel: "Excellent"
+          }
+        }
+      ]
+    },
+    {
+      id: "s-datetime",
+      title: "Date & Time",
+      questions: [
+        {
+          id: "dob",
+          type: "date",
+          label: "Date of Birth",
+          config: { type: "date", disableFuture: true }
+        },
+        {
+          id: "preferred_time",
+          type: "time",
+          label: "Preferred Time",
+          config: { type: "time", format: "12h" }
+        },
+        {
+          id: "travel_dates",
+          type: "date_range",
+          label: "Travel Dates"
+        }
+      ]
+    },
+    {
+      id: "s-media",
+      title: "Media & Files",
+      questions: [
+        {
+          id: "resume",
+          type: "file_upload",
+          label: "Upload Resume",
+          helpText: "PDF or DOCX, max 10 MB.",
+          config: { type: "file_upload", maxFiles: 1, maxSizeMb: 10, accept: [".pdf", ".docx"] }
+        },
+        {
+          id: "signature",
+          type: "signature",
+          label: "Signature",
+          helpText: "Draw your signature below."
+        }
+      ]
+    },
+    {
+      id: "s-advanced",
+      title: "Advanced Fields",
+      questions: [
+        {
+          id: "experience",
+          type: "likert",
+          label: "Rate the following aspects:",
+          config: {
+            type: "likert",
+            labels: ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"]
+          }
+        },
+        {
+          id: "country",
+          type: "country_select",
+          label: "Country",
+          config: { type: "country_select", showFlags: true }
+        },
+        {
+          id: "consent",
+          type: "consent",
+          label: "Terms & Conditions",
+          config: {
+            type: "consent",
+            text: "I agree to the Terms of Service and Privacy Policy.",
+            checkboxLabel: "I agree"
+          }
+        }
+      ]
+    },
+    {
+      id: "s-content",
+      title: "Content & Visual",
+      questions: [
+        {
+          id: "info",
+          type: "info_block",
+          label: "This is an informational message block. It can be used to display important notices."
+        },
+        {
+          id: "warning_info",
+          type: "info_block",
+          label: "Please double-check all information before submitting."
+        },
+        {
+          id: "divider",
+          type: "divider",
+          label: ""
+        },
+        {
+          id: "section_head",
+          type: "section_header",
+          label: "Section Header Example",
+          config: { type: "section_header", level: "h3", showDivider: true }
         }
       ]
     }
@@ -7893,8 +8470,8 @@ var SWATCH_KEYS = [
   { key: "success", label: "Success" }
 ];
 function PaletteGenerator({ theme, onApply, onClose }) {
-  const [baseColor, setBaseColor] = react.useState(theme.colors?.primary ?? "#3b82f6");
-  const palette = react.useMemo(() => generatePalette(baseColor), [baseColor]);
+  const [baseColor, setBaseColor] = React.useState(theme.colors?.primary ?? "#3b82f6");
+  const palette = React.useMemo(() => generatePalette(baseColor), [baseColor]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette__header", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fcte-palette__title", children: "Generate Palette" }),
@@ -7949,148 +8526,458 @@ function PaletteGenerator({ theme, onApply, onClose }) {
 }
 
 // src/theme-editor/presets.ts
-var cleanPreset = {
+var cleanLight = {
   colors: {
-    primary: "#1F6B6E",
+    primary: "#2563EB",
     primaryForeground: "#FFFFFF",
-    secondary: "#B9D1CF",
-    secondaryForeground: "#12222A",
-    error: "#B04A3C",
+    secondary: "#DBEAFE",
+    secondaryForeground: "#1E3A5F",
+    error: "#DC2626",
     errorForeground: "#FFFFFF",
-    warning: "#C98A2E",
-    success: "#2E7D5B",
+    warning: "#D97706",
+    success: "#16A34A",
     surface: "#FFFFFF",
-    background: "#F4F7F8",
-    text: "#12222A",
-    textMuted: "#6A7B85",
-    textDisabled: "#B9D1CF",
-    border: "#DCE4E8",
-    borderFocus: "#1F6B6E",
+    background: "#F8FAFC",
+    text: "#0F172A",
+    textMuted: "#64748B",
+    textDisabled: "#CBD5E1",
+    border: "#E2E8F0",
+    borderFocus: "#2563EB",
     inputBackground: "#FFFFFF"
   },
   typography: {
     fontFamily: "Inter, system-ui, sans-serif",
     scale: "comfortable",
-    questionSize: "1.125rem",
+    questionSize: "1.0625rem",
     labelSize: "0.875rem",
     helpTextSize: "0.8125rem",
     bodySize: "0.9375rem"
   },
-  shape: { radius: "none", inputRadius: "0px", buttonRadius: "0px", cardRadius: "0px" },
+  shape: { radius: "sm", inputRadius: "6px", buttonRadius: "6px", cardRadius: "8px" },
   spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
-  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "flat" }
 };
-var cleanDarkPreset = {
+var cleanDark = {
   colors: {
-    primary: "#63BDB4",
-    primaryForeground: "#0F1A1F",
-    secondary: "#2F4F4C",
-    secondaryForeground: "#E8EFF1",
-    error: "#E08072",
-    errorForeground: "#0F1A1F",
-    warning: "#E0A94F",
-    success: "#5DB89A",
-    surface: "#16242A",
-    background: "#0F1A1F",
-    text: "#E8EFF1",
-    textMuted: "#8CA1A9",
-    textDisabled: "#3D5259",
-    border: "#2A3B42",
-    borderFocus: "#63BDB4",
-    inputBackground: "#16242A"
+    primary: "#60A5FA",
+    primaryForeground: "#0C1929",
+    secondary: "#1E3A5F",
+    secondaryForeground: "#DBEAFE",
+    error: "#F87171",
+    errorForeground: "#1C1917",
+    warning: "#FBBF24",
+    success: "#4ADE80",
+    surface: "#1E293B",
+    background: "#0F172A",
+    text: "#F1F5F9",
+    textMuted: "#94A3B8",
+    textDisabled: "#334155",
+    border: "#334155",
+    borderFocus: "#60A5FA",
+    inputBackground: "#1E293B"
   },
   typography: {
     fontFamily: "Inter, system-ui, sans-serif",
     scale: "comfortable",
-    questionSize: "1.125rem",
+    questionSize: "1.0625rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "sm", inputRadius: "6px", buttonRadius: "6px", cardRadius: "8px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "flat" }
+};
+var stripeLight = {
+  colors: {
+    primary: "#635BFF",
+    primaryForeground: "#FFFFFF",
+    secondary: "#E8E6FF",
+    secondaryForeground: "#32297D",
+    error: "#DF1B41",
+    errorForeground: "#FFFFFF",
+    warning: "#D97706",
+    success: "#30B130",
+    surface: "#FFFFFF",
+    background: "#F6F9FC",
+    text: "#1A1F36",
+    textMuted: "#697386",
+    textDisabled: "#C1C9D2",
+    border: "#E3E8EE",
+    borderFocus: "#635BFF",
+    inputBackground: "#FFFFFF"
+  },
+  typography: {
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
     labelSize: "0.875rem",
     helpTextSize: "0.8125rem",
     bodySize: "0.9375rem"
   },
-  shape: { radius: "none", inputRadius: "0px", buttonRadius: "0px", cardRadius: "0px" },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
   spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
   layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
 };
-var modernPreset = {
+var stripeDark = {
   colors: {
-    primary: "#6366F1",
-    primaryForeground: "#ffffff",
-    secondary: "#8B5CF6",
-    secondaryForeground: "#ffffff",
-    error: "#F43F5E",
-    errorForeground: "#ffffff",
-    warning: "#F59E0B",
-    success: "#22C55E",
-    surface: "#ffffff",
+    primary: "#7A73FF",
+    primaryForeground: "#FFFFFF",
+    secondary: "#2D2A5E",
+    secondaryForeground: "#CBC8FF",
+    error: "#F93A5E",
+    errorForeground: "#FFFFFF",
+    warning: "#FBBF24",
+    success: "#4ADE80",
+    surface: "#1C2033",
+    background: "#0A0E1A",
+    text: "#E3E5EA",
+    textMuted: "#8992A7",
+    textDisabled: "#3C4257",
+    border: "#2C3046",
+    borderFocus: "#7A73FF",
+    inputBackground: "#1C2033"
+  },
+  typography: {
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+};
+var githubLight = {
+  colors: {
+    primary: "#1F6FEB",
+    primaryForeground: "#FFFFFF",
+    secondary: "#DDF4FF",
+    secondaryForeground: "#0550AE",
+    error: "#CF222E",
+    errorForeground: "#FFFFFF",
+    warning: "#9A6700",
+    success: "#1A7F37",
+    surface: "#FFFFFF",
+    background: "#F6F8FA",
+    text: "#1F2328",
+    textMuted: "#656D76",
+    textDisabled: "#B1BAC4",
+    border: "#D0D7DE",
+    borderFocus: "#1F6FEB",
+    inputBackground: "#FFFFFF"
+  },
+  typography: {
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.75rem",
+    bodySize: "0.875rem"
+  },
+  shape: { radius: "md", inputRadius: "6px", buttonRadius: "6px", cardRadius: "6px" },
+  spacing: { base: 16, sectionGap: 28, fieldGap: 20, inputPaddingX: 12, inputPaddingY: 8 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
+};
+var githubDark = {
+  colors: {
+    primary: "#58A6FF",
+    primaryForeground: "#0D1117",
+    secondary: "#172B4D",
+    secondaryForeground: "#A5D6FF",
+    error: "#F85149",
+    errorForeground: "#0D1117",
+    warning: "#E3B341",
+    success: "#3FB950",
+    surface: "#161B22",
+    background: "#0D1117",
+    text: "#E6EDF3",
+    textMuted: "#8B949E",
+    textDisabled: "#3D444D",
+    border: "#30363D",
+    borderFocus: "#58A6FF",
+    inputBackground: "#161B22"
+  },
+  typography: {
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.75rem",
+    bodySize: "0.875rem"
+  },
+  shape: { radius: "md", inputRadius: "6px", buttonRadius: "6px", cardRadius: "6px" },
+  spacing: { base: 16, sectionGap: 28, fieldGap: 20, inputPaddingX: 12, inputPaddingY: 8 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
+};
+var vercelLight = {
+  colors: {
+    primary: "#000000",
+    primaryForeground: "#FFFFFF",
+    secondary: "#F5F5F5",
+    secondaryForeground: "#171717",
+    error: "#E5484D",
+    errorForeground: "#FFFFFF",
+    warning: "#F5A623",
+    success: "#45A557",
+    surface: "#FFFFFF",
     background: "#FAFAFA",
-    text: "#18181B",
-    textMuted: "#71717A",
-    textDisabled: "#D4D4D8",
-    border: "#E4E4E7",
-    borderFocus: "#6366F1",
-    inputBackground: "#FAFAFA"
+    text: "#171717",
+    textMuted: "#666666",
+    textDisabled: "#C7C7C7",
+    border: "#EAEAEA",
+    borderFocus: "#000000",
+    inputBackground: "#FFFFFF"
   },
   typography: {
-    fontFamily: "'Plus Jakarta Sans', Inter, system-ui, sans-serif",
+    fontFamily: "'Geist', Inter, -apple-system, sans-serif",
     scale: "comfortable",
-    questionSize: "1.25rem",
+    questionSize: "1rem",
     labelSize: "0.875rem",
     helpTextSize: "0.8125rem",
-    bodySize: "1rem"
+    bodySize: "0.875rem"
   },
-  shape: { radius: "lg", inputRadius: "12px", buttonRadius: "12px", cardRadius: "16px" },
-  spacing: { base: 16, sectionGap: 40, fieldGap: 28, inputPaddingX: 16, inputPaddingY: 12 },
-  layout: { maxWidth: "680px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "600px", alignment: "left", progressPosition: "top", sectionLayout: "flat" }
+};
+var vercelDark = {
+  colors: {
+    primary: "#FFFFFF",
+    primaryForeground: "#000000",
+    secondary: "#1A1A1A",
+    secondaryForeground: "#EDEDED",
+    error: "#E5484D",
+    errorForeground: "#FFFFFF",
+    warning: "#F5A623",
+    success: "#45A557",
+    surface: "#111111",
+    background: "#000000",
+    text: "#EDEDED",
+    textMuted: "#888888",
+    textDisabled: "#444444",
+    border: "#333333",
+    borderFocus: "#FFFFFF",
+    inputBackground: "#111111"
+  },
+  typography: {
+    fontFamily: "'Geist', Inter, -apple-system, sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.875rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "600px", alignment: "left", progressPosition: "top", sectionLayout: "flat" }
 };
-var modernDarkPreset = {
+var shopifyLight = {
+  colors: {
+    primary: "#008060",
+    primaryForeground: "#FFFFFF",
+    secondary: "#E3F1DF",
+    secondaryForeground: "#1A4D2E",
+    error: "#D72C0D",
+    errorForeground: "#FFFFFF",
+    warning: "#B98900",
+    success: "#008060",
+    surface: "#FFFFFF",
+    background: "#F6F6F7",
+    text: "#202223",
+    textMuted: "#6D7175",
+    textDisabled: "#BABEC3",
+    border: "#C9CCCF",
+    borderFocus: "#008060",
+    inputBackground: "#FFFFFF"
+  },
+  typography: {
+    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+};
+var shopifyDark = {
+  colors: {
+    primary: "#36D399",
+    primaryForeground: "#0D2818",
+    secondary: "#1A3A2A",
+    secondaryForeground: "#B5E4CA",
+    error: "#FE6B6B",
+    errorForeground: "#1C1110",
+    warning: "#FFD60A",
+    success: "#36D399",
+    surface: "#1A1C1E",
+    background: "#111213",
+    text: "#E3E5E7",
+    textMuted: "#8C9196",
+    textDisabled: "#44474A",
+    border: "#333638",
+    borderFocus: "#36D399",
+    inputBackground: "#1A1C1E"
+  },
+  typography: {
+    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+};
+var slackLight = {
+  colors: {
+    primary: "#611F69",
+    primaryForeground: "#FFFFFF",
+    secondary: "#F3E8F5",
+    secondaryForeground: "#4A154B",
+    error: "#E01E5A",
+    errorForeground: "#FFFFFF",
+    warning: "#ECB22E",
+    success: "#2EB67D",
+    surface: "#FFFFFF",
+    background: "#F8F8F8",
+    text: "#1D1C1D",
+    textMuted: "#616061",
+    textDisabled: "#B9B9B9",
+    border: "#DDDDDD",
+    borderFocus: "#611F69",
+    inputBackground: "#FFFFFF"
+  },
+  typography: {
+    fontFamily: "'Lato', 'Helvetica Neue', Helvetica, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.0625rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "10px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+};
+var slackDark = {
+  colors: {
+    primary: "#D4A8DB",
+    primaryForeground: "#1A0A1E",
+    secondary: "#2C1332",
+    secondaryForeground: "#E2C6E9",
+    error: "#F5638B",
+    errorForeground: "#1C0E14",
+    warning: "#F0CA4D",
+    success: "#4FCEA2",
+    surface: "#1A1D21",
+    background: "#0F1114",
+    text: "#D1D2D3",
+    textMuted: "#9B9C9E",
+    textDisabled: "#4D4D4F",
+    border: "#383A3E",
+    borderFocus: "#D4A8DB",
+    inputBackground: "#1A1D21"
+  },
+  typography: {
+    fontFamily: "'Lato', 'Helvetica Neue', Helvetica, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.0625rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "10px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+};
+var tailwindLight = {
+  colors: {
+    primary: "#4F46E5",
+    primaryForeground: "#FFFFFF",
+    secondary: "#EEF2FF",
+    secondaryForeground: "#3730A3",
+    error: "#DC2626",
+    errorForeground: "#FFFFFF",
+    warning: "#D97706",
+    success: "#059669",
+    surface: "#FFFFFF",
+    background: "#F9FAFB",
+    text: "#111827",
+    textMuted: "#6B7280",
+    textDisabled: "#D1D5DB",
+    border: "#E5E7EB",
+    borderFocus: "#4F46E5",
+    inputBackground: "#FFFFFF"
+  },
+  typography: {
+    fontFamily: "Inter, system-ui, sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.875rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 14, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+};
+var tailwindDark = {
   colors: {
     primary: "#818CF8",
     primaryForeground: "#1E1B4B",
-    secondary: "#A78BFA",
-    secondaryForeground: "#1E1B4B",
-    error: "#FB7185",
-    errorForeground: "#1E1B4B",
+    secondary: "#1E1B4B",
+    secondaryForeground: "#C7D2FE",
+    error: "#F87171",
+    errorForeground: "#1C1917",
     warning: "#FBBF24",
-    success: "#4ADE80",
-    surface: "#1E1B4B",
-    background: "#13111C",
-    text: "#E8E6F0",
-    textMuted: "#A1A1AA",
-    textDisabled: "#3F3F46",
-    border: "#2E2B4A",
+    success: "#34D399",
+    surface: "#1F2937",
+    background: "#111827",
+    text: "#F9FAFB",
+    textMuted: "#9CA3AF",
+    textDisabled: "#374151",
+    border: "#374151",
     borderFocus: "#818CF8",
-    inputBackground: "#1E1B4B"
+    inputBackground: "#1F2937"
   },
   typography: {
-    fontFamily: "'Plus Jakarta Sans', Inter, system-ui, sans-serif",
+    fontFamily: "Inter, system-ui, sans-serif",
     scale: "comfortable",
-    questionSize: "1.25rem",
+    questionSize: "1rem",
     labelSize: "0.875rem",
     helpTextSize: "0.8125rem",
-    bodySize: "1rem"
+    bodySize: "0.875rem"
   },
-  shape: { radius: "lg", inputRadius: "12px", buttonRadius: "12px", cardRadius: "16px" },
-  spacing: { base: 16, sectionGap: 40, fieldGap: 28, inputPaddingX: 16, inputPaddingY: 12 },
-  layout: { maxWidth: "680px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 14, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
 };
-var clinicalPreset = {
+var clinicalLight = {
   colors: {
-    primary: "#0284C7",
-    primaryForeground: "#ffffff",
-    secondary: "#0891B2",
-    secondaryForeground: "#ffffff",
-    error: "#DC2626",
-    errorForeground: "#ffffff",
-    warning: "#D97706",
-    success: "#16A34A",
-    surface: "#ffffff",
+    primary: "#0369A1",
+    primaryForeground: "#FFFFFF",
+    secondary: "#E0F2FE",
+    secondaryForeground: "#0C4A6E",
+    error: "#B91C1C",
+    errorForeground: "#FFFFFF",
+    warning: "#B45309",
+    success: "#15803D",
+    surface: "#FFFFFF",
     background: "#F0F9FF",
     text: "#0C4A6E",
-    textMuted: "#64748B",
-    textDisabled: "#CBD5E1",
+    textMuted: "#4B6B82",
+    textDisabled: "#BAD6E9",
     border: "#BAE6FD",
-    borderFocus: "#0284C7",
-    inputBackground: "#ffffff"
+    borderFocus: "#0369A1",
+    inputBackground: "#FFFFFF"
   },
   typography: {
     fontFamily: "'Source Sans 3', 'Segoe UI', system-ui, sans-serif",
@@ -8104,22 +8991,22 @@ var clinicalPreset = {
   spacing: { base: 16, sectionGap: 28, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
   layout: { maxWidth: "680px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
 };
-var clinicalDarkPreset = {
+var clinicalDark = {
   colors: {
     primary: "#38BDF8",
     primaryForeground: "#0C1929",
-    secondary: "#22D3EE",
-    secondaryForeground: "#0C1929",
-    error: "#F87171",
-    errorForeground: "#0C1929",
-    warning: "#FBBF24",
-    success: "#34D399",
+    secondary: "#0C3554",
+    secondaryForeground: "#BAE6FD",
+    error: "#FCA5A5",
+    errorForeground: "#1C1110",
+    warning: "#FCD34D",
+    success: "#6EE7B7",
     surface: "#0F2438",
-    background: "#0C1929",
+    background: "#0B1929",
     text: "#E0F2FE",
-    textMuted: "#7DD3FC",
+    textMuted: "#7DC4E8",
     textDisabled: "#1E3A5F",
-    border: "#1E3A5F",
+    border: "#1C3A5A",
     borderFocus: "#38BDF8",
     inputBackground: "#0F2438"
   },
@@ -8135,86 +9022,210 @@ var clinicalDarkPreset = {
   spacing: { base: 16, sectionGap: 28, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
   layout: { maxWidth: "680px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
 };
-var playfulPreset = {
+var notionLight = {
   colors: {
-    primary: "#EC4899",
-    primaryForeground: "#ffffff",
-    secondary: "#8B5CF6",
-    secondaryForeground: "#ffffff",
-    error: "#EF4444",
-    errorForeground: "#ffffff",
-    warning: "#F59E0B",
-    success: "#10B981",
-    surface: "#ffffff",
-    background: "#FFF7ED",
-    text: "#1C1917",
+    primary: "#2383E2",
+    primaryForeground: "#FFFFFF",
+    secondary: "#EBF5FB",
+    secondaryForeground: "#1B4F7B",
+    error: "#EB5757",
+    errorForeground: "#FFFFFF",
+    warning: "#CB912F",
+    success: "#0F7B6C",
+    surface: "#FFFFFF",
+    background: "#FFFFFF",
+    text: "#37352F",
+    textMuted: "#787774",
+    textDisabled: "#C3C2BF",
+    border: "#E3E2E0",
+    borderFocus: "#2383E2",
+    inputBackground: "#F7F6F3"
+  },
+  typography: {
+    fontFamily: "'Lyon Text', Georgia, 'Times New Roman', serif",
+    scale: "comfortable",
+    questionSize: "1.0625rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "1rem"
+  },
+  shape: { radius: "sm", inputRadius: "4px", buttonRadius: "4px", cardRadius: "4px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "680px", alignment: "left", progressPosition: "top", sectionLayout: "flat" }
+};
+var notionDark = {
+  colors: {
+    primary: "#529CCA",
+    primaryForeground: "#FFFFFF",
+    secondary: "#143046",
+    secondaryForeground: "#9ECBEB",
+    error: "#FF6B6B",
+    errorForeground: "#1C1210",
+    warning: "#E0AD50",
+    success: "#4DAB9A",
+    surface: "#2F3437",
+    background: "#191919",
+    text: "#E6E3DD",
+    textMuted: "#9B9A97",
+    textDisabled: "#4F4F4F",
+    border: "#434343",
+    borderFocus: "#529CCA",
+    inputBackground: "#2F3437"
+  },
+  typography: {
+    fontFamily: "'Lyon Text', Georgia, 'Times New Roman', serif",
+    scale: "comfortable",
+    questionSize: "1.0625rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "1rem"
+  },
+  shape: { radius: "sm", inputRadius: "4px", buttonRadius: "4px", cardRadius: "4px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "680px", alignment: "left", progressPosition: "top", sectionLayout: "flat" }
+};
+var sunsetLight = {
+  colors: {
+    primary: "#C2410C",
+    primaryForeground: "#FFFFFF",
+    secondary: "#FFF7ED",
+    secondaryForeground: "#7C2D12",
+    error: "#B91C1C",
+    errorForeground: "#FFFFFF",
+    warning: "#A16207",
+    success: "#15803D",
+    surface: "#FFFFFF",
+    background: "#FFFBF5",
+    text: "#292524",
     textMuted: "#78716C",
     textDisabled: "#D6D3D1",
-    border: "#FDE68A",
-    borderFocus: "#EC4899",
-    inputBackground: "#FFFBEB"
+    border: "#E7E5E4",
+    borderFocus: "#C2410C",
+    inputBackground: "#FFFFFF"
   },
   typography: {
-    fontFamily: "'Nunito', 'Comic Neue', system-ui, sans-serif",
-    scale: "spacious",
-    questionSize: "1.25rem",
-    labelSize: "0.9375rem",
-    helpTextSize: "0.875rem",
-    bodySize: "1rem"
+    fontFamily: "'DM Sans', Inter, system-ui, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.125rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
   },
-  shape: { radius: "full", inputRadius: "9999px", buttonRadius: "9999px", cardRadius: "20px" },
-  spacing: { base: 18, sectionGap: 36, fieldGap: 28, inputPaddingX: 18, inputPaddingY: 12 },
-  layout: { maxWidth: "600px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
+  shape: { radius: "lg", inputRadius: "10px", buttonRadius: "10px", cardRadius: "14px" },
+  spacing: { base: 16, sectionGap: 36, fieldGap: 26, inputPaddingX: 14, inputPaddingY: 11 },
+  layout: { maxWidth: "640px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
 };
-var playfulDarkPreset = {
+var sunsetDark = {
   colors: {
-    primary: "#F472B6",
-    primaryForeground: "#1A0A14",
-    secondary: "#A78BFA",
-    secondaryForeground: "#1A0A14",
+    primary: "#FB923C",
+    primaryForeground: "#1C1210",
+    secondary: "#3D1F0E",
+    secondaryForeground: "#FED7AA",
     error: "#FCA5A5",
-    errorForeground: "#1A0A14",
+    errorForeground: "#1C1210",
     warning: "#FCD34D",
     success: "#6EE7B7",
-    surface: "#2D1F2B",
-    background: "#1A0F19",
-    text: "#FDF2F8",
-    textMuted: "#D4A9C4",
-    textDisabled: "#4A3248",
-    border: "#5C3D56",
-    borderFocus: "#F472B6",
-    inputBackground: "#2D1F2B"
+    surface: "#292019",
+    background: "#1C1510",
+    text: "#F5F0EB",
+    textMuted: "#B0A89E",
+    textDisabled: "#4A413A",
+    border: "#3D352D",
+    borderFocus: "#FB923C",
+    inputBackground: "#292019"
+  },
+  typography: {
+    fontFamily: "'DM Sans', Inter, system-ui, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.125rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "lg", inputRadius: "10px", buttonRadius: "10px", cardRadius: "14px" },
+  spacing: { base: 16, sectionGap: 36, fieldGap: 26, inputPaddingX: 14, inputPaddingY: 11 },
+  layout: { maxWidth: "640px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
+};
+var roseLight = {
+  colors: {
+    primary: "#BE185D",
+    primaryForeground: "#FFFFFF",
+    secondary: "#FFF1F2",
+    secondaryForeground: "#881337",
+    error: "#DC2626",
+    errorForeground: "#FFFFFF",
+    warning: "#D97706",
+    success: "#059669",
+    surface: "#FFFFFF",
+    background: "#FFFBFB",
+    text: "#1C1917",
+    textMuted: "#737373",
+    textDisabled: "#D4D4D4",
+    border: "#FECDD3",
+    borderFocus: "#BE185D",
+    inputBackground: "#FFFFFF"
   },
   typography: {
-    fontFamily: "'Nunito', 'Comic Neue', system-ui, sans-serif",
+    fontFamily: "'Plus Jakarta Sans', Inter, system-ui, sans-serif",
     scale: "spacious",
-    questionSize: "1.25rem",
-    labelSize: "0.9375rem",
-    helpTextSize: "0.875rem",
-    bodySize: "1rem"
+    questionSize: "1.1875rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
   },
-  shape: { radius: "full", inputRadius: "9999px", buttonRadius: "9999px", cardRadius: "20px" },
-  spacing: { base: 18, sectionGap: 36, fieldGap: 28, inputPaddingX: 18, inputPaddingY: 12 },
-  layout: { maxWidth: "600px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
+  shape: { radius: "lg", inputRadius: "12px", buttonRadius: "12px", cardRadius: "16px" },
+  spacing: { base: 18, sectionGap: 36, fieldGap: 28, inputPaddingX: 16, inputPaddingY: 12 },
+  layout: { maxWidth: "640px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
 };
-var highContrastPreset = {
+var roseDark = {
   colors: {
-    primary: "#0000EE",
-    primaryForeground: "#ffffff",
-    secondary: "#6B21A8",
-    secondaryForeground: "#ffffff",
+    primary: "#FB7185",
+    primaryForeground: "#1C0A12",
+    secondary: "#3B0A22",
+    secondaryForeground: "#FECDD3",
+    error: "#F87171",
+    errorForeground: "#1C1210",
+    warning: "#FBBF24",
+    success: "#34D399",
+    surface: "#1F1318",
+    background: "#150D11",
+    text: "#FAF0F2",
+    textMuted: "#C9A4AE",
+    textDisabled: "#4A3039",
+    border: "#3D2030",
+    borderFocus: "#FB7185",
+    inputBackground: "#1F1318"
+  },
+  typography: {
+    fontFamily: "'Plus Jakarta Sans', Inter, system-ui, sans-serif",
+    scale: "spacious",
+    questionSize: "1.1875rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "lg", inputRadius: "12px", buttonRadius: "12px", cardRadius: "16px" },
+  spacing: { base: 18, sectionGap: 36, fieldGap: 28, inputPaddingX: 16, inputPaddingY: 12 },
+  layout: { maxWidth: "640px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
+};
+var highContrastLight = {
+  colors: {
+    primary: "#0000CC",
+    primaryForeground: "#FFFFFF",
+    secondary: "#E6E6FF",
+    secondaryForeground: "#000066",
     error: "#B91C1C",
-    errorForeground: "#ffffff",
-    warning: "#92400E",
+    errorForeground: "#FFFFFF",
+    warning: "#854D0E",
     success: "#166534",
-    surface: "#ffffff",
-    background: "#ffffff",
+    surface: "#FFFFFF",
+    background: "#FFFFFF",
     text: "#000000",
-    textMuted: "#374151",
-    textDisabled: "#9CA3AF",
+    textMuted: "#333333",
+    textDisabled: "#888888",
     border: "#000000",
-    borderFocus: "#0000EE",
-    inputBackground: "#ffffff"
+    borderFocus: "#0000CC",
+    inputBackground: "#FFFFFF"
   },
   typography: {
     fontFamily: "Arial, Helvetica, sans-serif",
@@ -8228,24 +9239,24 @@ var highContrastPreset = {
   spacing: { base: 20, sectionGap: 40, fieldGap: 32, inputPaddingX: 14, inputPaddingY: 12 },
   layout: { maxWidth: "720px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
 };
-var highContrastDarkPreset = {
+var highContrastDark = {
   colors: {
-    primary: "#93C5FD",
+    primary: "#6CB4FF",
     primaryForeground: "#000000",
-    secondary: "#C084FC",
-    secondaryForeground: "#000000",
-    error: "#FCA5A5",
+    secondary: "#002255",
+    secondaryForeground: "#99CCFF",
+    error: "#FF8A8A",
     errorForeground: "#000000",
-    warning: "#FCD34D",
-    success: "#86EFAC",
-    surface: "#000000",
+    warning: "#FFD54F",
+    success: "#69F0AE",
+    surface: "#0A0A0A",
     background: "#000000",
     text: "#FFFFFF",
-    textMuted: "#D1D5DB",
-    textDisabled: "#6B7280",
+    textMuted: "#CCCCCC",
+    textDisabled: "#666666",
     border: "#FFFFFF",
-    borderFocus: "#93C5FD",
-    inputBackground: "#000000"
+    borderFocus: "#6CB4FF",
+    inputBackground: "#0A0A0A"
   },
   typography: {
     fontFamily: "Arial, Helvetica, sans-serif",
@@ -8260,11 +9271,18 @@ var highContrastDarkPreset = {
   layout: { maxWidth: "720px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
 };
 var PRESET_FAMILIES = {
-  clean: { light: cleanPreset, dark: cleanDarkPreset, label: "Clean" },
-  modern: { light: modernPreset, dark: modernDarkPreset, label: "Modern" },
-  clinical: { light: clinicalPreset, dark: clinicalDarkPreset, label: "Clinical" },
-  playful: { light: playfulPreset, dark: playfulDarkPreset, label: "Playful" },
-  "high-contrast": { light: highContrastPreset, dark: highContrastDarkPreset, label: "High contrast" }
+  clean: { light: cleanLight, dark: cleanDark, label: "Clean" },
+  stripe: { light: stripeLight, dark: stripeDark, label: "Stripe" },
+  github: { light: githubLight, dark: githubDark, label: "GitHub" },
+  vercel: { light: vercelLight, dark: vercelDark, label: "Vercel" },
+  shopify: { light: shopifyLight, dark: shopifyDark, label: "Shopify" },
+  slack: { light: slackLight, dark: slackDark, label: "Slack" },
+  tailwind: { light: tailwindLight, dark: tailwindDark, label: "Tailwind" },
+  clinical: { light: clinicalLight, dark: clinicalDark, label: "Clinical" },
+  notion: { light: notionLight, dark: notionDark, label: "Notion" },
+  sunset: { light: sunsetLight, dark: sunsetDark, label: "Sunset" },
+  rose: { light: roseLight, dark: roseDark, label: "Rose" },
+  "high-contrast": { light: highContrastLight, dark: highContrastDark, label: "High contrast" }
 };
 var COMPARISON_PRESETS = Object.fromEntries(
   Object.entries(PRESET_FAMILIES).map(([key, family]) => [
@@ -8273,7 +9291,7 @@ var COMPARISON_PRESETS = Object.fromEntries(
   ])
 );
 function ThemeComparison({ currentTheme, onClose }) {
-  const [compareKey, setCompareKey] = react.useState("clean");
+  const [compareKey, setCompareKey] = React.useState("clean");
   const compareTheme = COMPARISON_PRESETS[compareKey]?.theme ?? PRESET_FAMILIES.clean.light;
   const diffs = getColorDiffs(currentTheme, compareTheme);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare", children: [
@@ -8416,9 +9434,9 @@ function resolveThemeFromDOM() {
     }
   };
 }
-var ThemeCtx2 = react.createContext({});
+var ThemeCtx2 = React.createContext({});
 function useEditorTheme() {
-  return react.useContext(ThemeCtx2);
+  return React.useContext(ThemeCtx2);
 }
 function themeToCssVars2(theme) {
   const vars = {};
@@ -8437,18 +9455,36 @@ function themeToCssVars2(theme) {
 }
 function ThemeEditorThemeProvider({ theme, children }) {
   const resolved = theme ?? {};
-  const cssVars = react.useMemo(() => themeToCssVars2(resolved), [resolved]);
+  const cssVars = React.useMemo(() => themeToCssVars2(resolved), [resolved]);
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeCtx2.Provider, { value: resolved, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-fcte-root": "", style: cssVars, className: "fcte-provider-root", children }) });
 }
-function isDarkTheme(theme) {
+function isDarkTheme2(theme) {
   const bg = theme.colors?.background ?? "#FFFFFF";
-  const hex = bg.replace("#", "");
+  let hex = bg.replace("#", "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
   if (hex.length < 6) return false;
   const r = parseInt(hex.slice(0, 2), 16);
   const g = parseInt(hex.slice(2, 4), 16);
   const b = parseInt(hex.slice(4, 6), 16);
   return 0.299 * r + 0.587 * g + 0.114 * b < 128;
 }
+function detectPresetFamily(theme) {
+  const c = theme.colors;
+  if (!c) return null;
+  for (const [key, family] of Object.entries(PRESET_FAMILIES)) {
+    for (const variant of ["light", "dark"]) {
+      const preset = family[variant];
+      const pc = preset.colors;
+      if (!pc) continue;
+      if (c.primary?.toLowerCase() === pc.primary?.toLowerCase() && c.background?.toLowerCase() === pc.background?.toLowerCase() && c.surface?.toLowerCase() === pc.surface?.toLowerCase()) {
+        return key;
+      }
+    }
+  }
+  return null;
+}
 var SECTIONS = [
   {
     id: "colors",
@@ -8569,6 +9605,7 @@ var SECTIONS = [
 ];
 function ThemeEditorInner({
   initialTheme,
+  initialPreset,
   onChange,
   onSave,
   theme: chromeTheme,
@@ -8578,74 +9615,118 @@ function ThemeEditorInner({
   toolbarExtra,
   showPreview = true
 }) {
-  const resolvedInitial = react.useMemo(
+  const resolvedInitial = React.useMemo(
     () => initialTheme ?? resolveThemeFromDOM(),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [initialTheme]
   );
-  const [theme, setTheme] = react.useState(resolvedInitial);
-  const [activeSection, setActiveSection] = react.useState("colors");
-  const [presetKey, setPresetKey] = react.useState("custom");
-  const [showPalette, setShowPalette] = react.useState(false);
-  const [showComparison, setShowComparison] = react.useState(false);
-  const themeRef = react.useRef(theme);
+  const [theme, setTheme] = React.useState(resolvedInitial);
+  const [activeSection, setActiveSection] = React.useState("colors");
+  const resolvedPresetInit = initialPreset ?? detectPresetFamily(resolvedInitial) ?? "custom";
+  const [presetKey, setPresetKey] = React.useState(resolvedPresetInit);
+  const presetKeyRef = React.useRef(presetKey);
+  presetKeyRef.current = presetKey;
+  const [showPalette, setShowPalette] = React.useState(false);
+  const [showComparison, setShowComparison] = React.useState(false);
+  const themeRef = React.useRef(theme);
   themeRef.current = theme;
-  const hasInitialTheme = react.useRef(initialTheme != null);
-  react.useEffect(() => {
-    if (hasInitialTheme.current) return;
+  const prevInitialRef = React.useRef(initialTheme);
+  const prevPresetRef = React.useRef(initialPreset);
+  React.useEffect(() => {
+    if (!initialTheme) return;
+    const themeChanged = JSON.stringify(initialTheme) !== JSON.stringify(prevInitialRef.current);
+    const presetChanged = initialPreset !== prevPresetRef.current;
+    if (!themeChanged && !presetChanged) return;
+    prevInitialRef.current = initialTheme;
+    prevPresetRef.current = initialPreset;
+    setTheme(initialTheme);
+    const resolvedPreset = initialPreset ?? detectPresetFamily(initialTheme) ?? "custom";
+    setPresetKey(resolvedPreset);
+  }, [initialTheme, initialPreset]);
+  const mountReadyRef = React.useRef(false);
+  React.useEffect(() => {
     if (typeof window === "undefined") return;
+    const initialAttr = document.documentElement.getAttribute("data-theme");
+    const lastAttrRef = { current: initialAttr };
+    const readyTimer = setTimeout(() => {
+      mountReadyRef.current = true;
+    }, 500);
     const observer = new MutationObserver(() => {
+      if (!mountReadyRef.current) return;
+      const currentAttr = document.documentElement.getAttribute("data-theme");
+      if (currentAttr === lastAttrRef.current) return;
+      lastAttrRef.current = currentAttr;
       requestAnimationFrame(() => {
-        const resolved = resolveThemeFromDOM();
-        setTheme(resolved);
-        setPresetKey("custom");
-        onChange?.(resolved);
+        const variant = currentAttr === "dark" ? "dark" : "light";
+        let key = presetKeyRef.current;
+        if (key === "custom") {
+          const detected = detectPresetFamily(themeRef.current);
+          if (detected) {
+            key = detected;
+            setPresetKey(detected);
+          }
+        }
+        if (key !== "custom") {
+          const family = PRESET_FAMILIES[key];
+          if (family) {
+            const preset = family[variant];
+            setTheme(preset);
+            onChange?.(preset, key);
+          }
+        } else {
+          const resolved = resolveThemeFromDOM();
+          setTheme(resolved);
+          onChange?.(resolved, "custom");
+        }
       });
     });
     observer.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ["data-theme", "class"]
     });
-    return () => observer.disconnect();
+    return () => {
+      clearTimeout(readyTimer);
+      observer.disconnect();
+    };
   }, [onChange]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     function handleKeyDown(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === "s") {
         e.preventDefault();
-        onSave?.(themeRef.current);
+        onSave?.(themeRef.current, presetKeyRef.current);
       }
     }
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [onSave]);
-  const updateField = react.useCallback(
+  const updateField = React.useCallback(
     (section, key, value) => {
       setTheme((prev) => {
         const next = {
           ...prev,
           [section]: { ...prev[section], [key]: value }
         };
-        onChange?.(next);
+        onChange?.(next, "custom");
         return next;
       });
       setPresetKey("custom");
     },
     [onChange]
   );
-  const loadPreset = react.useCallback(
+  const loadPreset = React.useCallback(
     (key) => {
       const family = PRESET_FAMILIES[key];
       if (family) {
-        const variant = isDarkTheme(theme) ? "dark" : "light";
+        const htmlTheme = typeof document !== "undefined" ? document.documentElement.getAttribute("data-theme") : null;
+        const variant = htmlTheme === "dark" ? "dark" : htmlTheme === "light" ? "light" : isDarkTheme2(theme) ? "dark" : "light";
         const preset = family[variant];
         setTheme(preset);
         setPresetKey(key);
-        onChange?.(preset);
+        onChange?.(preset, key);
       }
     },
     [onChange, theme]
   );
-  const exportJson = react.useCallback(() => {
+  const exportJson = React.useCallback(() => {
     const blob = new Blob([JSON.stringify(theme, null, 2)], { type: "application/json" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -8654,7 +9735,7 @@ function ThemeEditorInner({
     a.click();
     URL.revokeObjectURL(url);
   }, [theme]);
-  const importJson = react.useCallback(() => {
+  const importJson = React.useCallback(() => {
     const input = document.createElement("input");
     input.type = "file";
     input.accept = ".json";
@@ -8667,7 +9748,7 @@ function ThemeEditorInner({
           const parsed = JSON.parse(reader.result);
           setTheme(parsed);
           setPresetKey("custom");
-          onChange?.(parsed);
+          onChange?.(parsed, "custom");
         } catch {
         }
       };
@@ -8675,17 +9756,17 @@ function ThemeEditorInner({
     };
     input.click();
   }, [onChange]);
-  const exportCss = react.useCallback(() => {
+  const exportCss = React.useCallback(() => {
     exportCssFile(theme);
   }, [theme]);
-  const importCss = react.useCallback(() => {
+  const importCss = React.useCallback(() => {
     importCssFile(theme, (merged) => {
       setTheme(merged);
       setPresetKey("custom");
-      onChange?.(merged);
+      onChange?.(merged, "custom");
     });
   }, [theme, onChange]);
-  const currentSection = react.useMemo(
+  const currentSection = React.useMemo(
     () => SECTIONS.find((s) => s.id === activeSection),
     [activeSection]
   );
@@ -8743,7 +9824,7 @@ function ThemeEditorInner({
                 children: "Compare"
               }
             ),
-            onSave && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => onSave(theme), className: "fcte-btn fcte-btn--primary", children: "Save" })
+            onSave && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => onSave(theme, presetKey), className: "fcte-btn fcte-btn--primary", children: "Save" })
           ] })
         ] }),
         showPalette && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8753,7 +9834,7 @@ function ThemeEditorInner({
             onApply: (newTheme) => {
               setTheme(newTheme);
               setPresetKey("custom");
-              onChange?.(newTheme);
+              onChange?.(newTheme, "custom");
               setShowPalette(false);
             },
             onClose: () => setShowPalette(false)
@@ -8908,8 +9989,6 @@ var themeEditorDarkPreset = {
   accent: "#63BDB4",
   accentForeground: "#0F1A1F"
 };
-
-// src/templates/consultation-booking.ts
 var consultationBookingSchema = {
   id: "consultation-booking",
   version: "1.0.0",
@@ -9275,17 +10354,10 @@ var consultationBookingSchema = {
           type: "dropdown",
           label: "Your Timezone",
           required: true,
-          options: [
-            { label: "US Eastern (ET)", value: "America/New_York" },
-            { label: "US Central (CT)", value: "America/Chicago" },
-            { label: "US Mountain (MT)", value: "America/Denver" },
-            { label: "US Pacific (PT)", value: "America/Los_Angeles" },
-            { label: "UK (GMT/BST)", value: "Europe/London" },
-            { label: "Central Europe (CET)", value: "Europe/Berlin" },
-            { label: "India (IST)", value: "Asia/Kolkata" },
-            { label: "Japan (JST)", value: "Asia/Tokyo" },
-            { label: "Australia Eastern (AEST)", value: "Australia/Sydney" }
-          ]
+          options: fieldcraftCore.TIMEZONES.map((tz) => ({
+            label: `${tz.label} (${tz.offset})`,
+            value: tz.value
+          }))
         },
         {
           id: "appointment_slot",
@@ -9316,7 +10388,7 @@ var consultationBookingSchema = {
                 times: ["09:00", "11:00", "13:00", "14:00", "16:00"]
               }
             ],
-            timezone: "America/New_York",
+            timezoneField: "timezone",
             duration: 60
           }
         },
@@ -9412,10 +10484,11 @@ var consultationBookingSchema = {
             type: "payment",
             provider: "stripe",
             publicKey: "",
+            // Set your Stripe publishable key (pk_test_... or pk_live_...)
             amount: 2e4,
             currency: "USD",
-            description: "Consultation Session",
-            serverUrl: "/api/payment-intents"
+            description: "Consultation Session"
+            // No serverUrl — developer must configure their own endpoint via customProps or serverUrl
           }
         }
       ]
@@ -9939,10 +11012,11 @@ var ecommerceCheckoutSchema = {
             type: "payment",
             provider: "stripe",
             publicKey: "",
+            // Set your Stripe publishable key (pk_test_... or pk_live_...)
             amount: 1e4,
             currency: "USD",
-            description: "E-commerce Order",
-            serverUrl: "/api/payment-intents"
+            description: "E-commerce Order"
+            // No serverUrl — developer must configure their own endpoint via customProps or serverUrl
           }
         }
       ]