@squaredr/fieldcraft-pro 1.4.0 → 1.6.0

package/dist/index.js

@@ -1032,6 +1032,14 @@ var QUESTION_TYPE_INFO = {
     icon: "Phone",
     description: "US phone number input"
   },
+  phone_international: {
+    type: "phone_international",
+    label: "Intl Phone",
+    category: "text",
+    icon: "Globe2",
+    description: "Phone with country code",
+    defaultConfig: { type: "phone_international", defaultCountry: "US" }
+  },
   url: {
     type: "url",
     label: "URL",
@@ -1125,6 +1133,14 @@ var QUESTION_TYPE_INFO = {
     requiresOptions: true,
     defaultConfig: { type: "ranking", items: [] }
   },
+  country_select: {
+    type: "country_select",
+    label: "Country",
+    category: "selection",
+    icon: "Globe",
+    description: "Country dropdown with search",
+    defaultConfig: { type: "country_select" }
+  },
   // ── Date/Time ──
   date: {
     type: "date",
@@ -1176,6 +1192,14 @@ var QUESTION_TYPE_INFO = {
     description: "Canvas signature pad",
     defaultConfig: { type: "signature" }
   },
+  image_capture: {
+    type: "image_capture",
+    label: "Camera",
+    category: "media",
+    icon: "Camera",
+    description: "Capture photo from camera",
+    defaultConfig: { type: "image_capture", allowGallery: true }
+  },
   date_range: {
     type: "date_range",
     label: "Date Range",
@@ -1184,6 +1208,14 @@ var QUESTION_TYPE_INFO = {
     description: "Start and end date picker",
     defaultConfig: { type: "date_range" }
   },
+  appointment: {
+    type: "appointment",
+    label: "Appointment",
+    category: "datetime",
+    icon: "CalendarCheck",
+    description: "Date & time slot booking",
+    defaultConfig: { type: "appointment", duration: 30 }
+  },
   // ── Advanced ──
   repeater: {
     type: "repeater",
@@ -1255,6 +1287,14 @@ var QUESTION_TYPE_INFO = {
     description: "Hidden value from URL or static",
     defaultConfig: { type: "hidden", source: "static" }
   },
+  payment: {
+    type: "payment",
+    label: "Payment",
+    category: "advanced",
+    icon: "CreditCard",
+    description: "Collect payment via Stripe",
+    defaultConfig: { type: "payment", provider: "stripe", publicKey: "", currency: "USD" }
+  },
   // ── Structural ──
   section_header: {
     type: "section_header",
@@ -1359,7 +1399,7 @@ var DEFAULT_PALETTE = [
   {
     category: "text",
     label: "Text Input",
-    types: ["short_text", "long_text", "email", "phone", "url", "legal_name", "address"]
+    types: ["short_text", "long_text", "email", "phone", "phone_international", "url", "legal_name", "address"]
   },
   {
     category: "numeric",
@@ -1369,17 +1409,17 @@ var DEFAULT_PALETTE = [
   {
     category: "selection",
     label: "Selection",
-    types: ["single_select", "multi_select", "dropdown", "boolean", "ranking"]
+    types: ["single_select", "multi_select", "dropdown", "boolean", "ranking", "country_select"]
   },
   {
     category: "datetime",
     label: "Date & Time",
-    types: ["date", "time", "date_range"]
+    types: ["date", "time", "date_range", "appointment"]
   },
   {
     category: "media",
     label: "Media",
-    types: ["file_upload", "signature"]
+    types: ["file_upload", "signature", "image_capture"]
   },
   {
     category: "content",
@@ -1394,7 +1434,7 @@ var DEFAULT_PALETTE = [
   {
     category: "advanced",
     label: "Advanced",
-    types: ["repeater", "likert", "scoring", "matrix", "calculated", "hidden"]
+    types: ["repeater", "likert", "scoring", "matrix", "calculated", "hidden", "payment"]
   }
 ];
 
@@ -5008,57 +5048,271 @@ function FormBuilderInner(props) {
 
 // src/form-builder/components/FormBuilderGated.tsx
 var FormBuilder = requireLicense(FormBuilderInner, "FormBuilder");
-
-// src/form-builder/theme/presets.ts
-var squaredrDarkPreset = {
-  background: "#0F1A1F",
-  foreground: "#E8EFF1",
-  card: "#16242A",
-  primary: "#63BDB4",
-  primaryForeground: "#0F1A1F",
-  secondary: "#182F31",
-  secondaryForeground: "#E8EFF1",
-  muted: "#182F31",
-  mutedForeground: "#8CA1A9",
-  accent: "#182F31",
-  accentForeground: "#E8EFF1",
-  destructive: "#E08072",
-  destructiveForeground: "#0F1A1F",
-  border: "#2A3B42",
-  input: "#2A3B42",
-  ring: "#63BDB4",
-  radius: "0px",
-  surface: "#16242A",
-  surfaceHover: "#182F31",
-  canvas: "#0F1A1F",
-  panel: "#16242A",
-  borderStrong: "#2F4F4C",
-  textDim: "#5E7680"
-};
-var cleanPreset = {
-  background: "#F4F7F8",
-  foreground: "#12222A",
-  card: "#FFFFFF",
-  primary: "#1F6B6E",
-  primaryForeground: "#FFFFFF",
-  secondary: "#EDF3F2",
-  secondaryForeground: "#12222A",
-  muted: "#EDF3F2",
-  mutedForeground: "#6A7B85",
-  accent: "#EDF3F2",
-  accentForeground: "#12222A",
-  destructive: "#B04A3C",
-  destructiveForeground: "#FFFFFF",
-  border: "#DCE4E8",
-  input: "#DCE4E8",
-  ring: "#1F6B6E",
-  radius: "0px",
-  surface: "#FAFCFC",
-  surfaceHover: "#EDF3F2",
-  canvas: "#F4F7F8",
-  panel: "#FFFFFF",
-  borderStrong: "#B9D1CF",
-  textDim: "#6A7B85"
+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 ProPaymentField(props) {
+  const { field, value, error, touched, disabled, readonly, onChange, onBlur, customProps } = props;
+  const config = field.config;
+  const current = value ?? { status: "pending" };
+  const provider = config?.provider ?? "stripe";
+  const publicKey = config?.publicKey;
+  const amount = customProps?.amount ?? config?.amount;
+  const currency = config?.currency ?? "USD";
+  const directSecret = customProps?.clientSecret;
+  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 mode = directSecret ? "direct" : onCreateIntent ? "callback" : serverUrl ? "url" : "setup";
+  react.useEffect(() => {
+    if (directSecret) {
+      setClientSecret(directSecret);
+      return;
+    }
+    if (mode === "setup" || !amount || !publicKey) return;
+    if (clientSecret) return;
+    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);
+        } 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 } })
+          });
+          if (!res.ok) throw new Error(`Server error (${res.status})`);
+          const data = await res.json();
+          setClientSecret(data.clientSecret);
+        }
+      } catch (err) {
+        setIntentError(err instanceof Error ? err.message : "Failed to create payment intent");
+      } finally {
+        setIntentLoading(false);
+      }
+    };
+    fetchIntent();
+  }, [mode, amount, currency, provider, publicKey, directSecret, clientSecret, onCreateIntent, serverUrl, field.id]);
+  const handleSuccess = (chargeId) => {
+    const result = { status: "succeeded", chargeId };
+    onChange(result);
+    onPaymentComplete?.(result);
+    onBlur();
+  };
+  const handleError = (message) => {
+    const result = { status: "failed", error: message };
+    onChange(result);
+    onPaymentComplete?.(result);
+    onBlur();
+  };
+  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 ",
+      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-muted px-1 rounded text-xs", children: "publicKey" }),
+      " in the field properties panel."
+    ] }) }) });
+  }
+  if (provider !== "stripe") {
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-input bg-muted/50 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      'Provider "',
+      provider,
+      '" \u2014 coming soon.'
+    ] }) }) });
+  }
+  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: [
+        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})` : ""
+        ] })
+      ] })
+    ] }) });
+  }
+  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}` : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "mt-2 text-xs text-primary hover:underline",
+          onClick: () => {
+            onChange({ status: "pending" });
+            setClientSecret(void 0);
+          },
+          children: "Retry"
+        }
+      )
+    ] }) });
+  }
+  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: [
+        "Amount: ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", 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(
+          "button",
+          {
+            type: "button",
+            className: "mt-2 text-xs text-primary hover:underline",
+            onClick: () => {
+              setIntentError(null);
+              setClientSecret(void 0);
+            },
+            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.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", { 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: [
+      "Amount: ",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatCurrency(amount, currency) }),
+      config?.description && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        " \u2014 ",
+        config.description
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.Suspense,
+      {
+        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
+          }
+        )
+      }
+    )
+  ] }) });
+}
+function PayKitCheckout({
+  publicKey,
+  clientSecret,
+  amount,
+  currency,
+  disabled,
+  onSuccess,
+  onError
+}) {
+  const [PayKit, setPayKit] = react.useState(null);
+  const [loadError, setLoadError] = react.useState(null);
+  react.useEffect(() => {
+    let cancelled = false;
+    Promise.all([
+      // @ts-expect-error — optional peer dep, resolved at runtime
+      import('@squaredr/paykit-react'),
+      // @ts-expect-error — optional peer dep, resolved at runtime
+      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-stripe 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,
+    {
+      clientSecret,
+      submitLabel: disabled ? "Payment disabled" : `Pay ${formatCurrency(amount, currency)}`,
+      onSuccess: (result) => onSuccess(result.chargeId),
+      onError: (err) => onError(err.message)
+    }
+  ) });
+}
+var PRO_FIELD_OVERRIDES = {
+  payment: ProPaymentField
 };
 
 // src/response-viewer/clinical-display-data.ts
@@ -6802,6 +7056,7 @@ function ResponseViewerInner({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      "data-fcrv-root": "",
       className: "flex flex-col border border-border rounded-lg overflow-hidden bg-background text-foreground",
       style: { height: heightValue, width: widthValue },
       children: [
@@ -7648,7 +7903,7 @@ function PaletteGenerator({ theme, onApply, onClose }) {
 }
 
 // src/theme-editor/presets.ts
-var draftingTealPreset = {
+var cleanPreset = {
   colors: {
     primary: "#1F6B6E",
     primaryForeground: "#FFFFFF",
@@ -7668,45 +7923,312 @@ var draftingTealPreset = {
     inputBackground: "#FFFFFF"
   },
   typography: {
-    fontFamily: "'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif",
+    fontFamily: "Inter, system-ui, sans-serif",
     scale: "comfortable",
-    questionSize: "1.1875rem",
-    labelSize: "0.8125rem",
+    questionSize: "1.125rem",
+    labelSize: "0.875rem",
     helpTextSize: "0.8125rem",
     bodySize: "0.9375rem"
   },
-  shape: {
-    radius: "none",
-    inputRadius: "0px",
-    buttonRadius: "0px",
-    cardRadius: "0px"
+  shape: { radius: "none", inputRadius: "0px", buttonRadius: "0px", cardRadius: "0px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+};
+var cleanDarkPreset = {
+  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"
   },
-  spacing: {
-    base: 16,
-    sectionGap: 32,
-    fieldGap: 24,
-    inputPaddingX: 12,
-    inputPaddingY: 10
+  typography: {
+    fontFamily: "Inter, system-ui, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.125rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
   },
-  layout: {
-    maxWidth: "640px",
-    alignment: "left",
-    progressPosition: "top",
-    sectionLayout: "flat"
-  }
+  shape: { radius: "none", inputRadius: "0px", buttonRadius: "0px", cardRadius: "0px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+};
+var modernPreset = {
+  colors: {
+    primary: "#6366F1",
+    primaryForeground: "#ffffff",
+    secondary: "#8B5CF6",
+    secondaryForeground: "#ffffff",
+    error: "#F43F5E",
+    errorForeground: "#ffffff",
+    warning: "#F59E0B",
+    success: "#22C55E",
+    surface: "#ffffff",
+    background: "#FAFAFA",
+    text: "#18181B",
+    textMuted: "#71717A",
+    textDisabled: "#D4D4D8",
+    border: "#E4E4E7",
+    borderFocus: "#6366F1",
+    inputBackground: "#FAFAFA"
+  },
+  typography: {
+    fontFamily: "'Plus Jakarta Sans', Inter, system-ui, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.25rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "1rem"
+  },
+  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" }
+};
+var modernDarkPreset = {
+  colors: {
+    primary: "#818CF8",
+    primaryForeground: "#1E1B4B",
+    secondary: "#A78BFA",
+    secondaryForeground: "#1E1B4B",
+    error: "#FB7185",
+    errorForeground: "#1E1B4B",
+    warning: "#FBBF24",
+    success: "#4ADE80",
+    surface: "#1E1B4B",
+    background: "#13111C",
+    text: "#E8E6F0",
+    textMuted: "#A1A1AA",
+    textDisabled: "#3F3F46",
+    border: "#2E2B4A",
+    borderFocus: "#818CF8",
+    inputBackground: "#1E1B4B"
+  },
+  typography: {
+    fontFamily: "'Plus Jakarta Sans', Inter, system-ui, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.25rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "1rem"
+  },
+  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" }
+};
+var clinicalPreset = {
+  colors: {
+    primary: "#0284C7",
+    primaryForeground: "#ffffff",
+    secondary: "#0891B2",
+    secondaryForeground: "#ffffff",
+    error: "#DC2626",
+    errorForeground: "#ffffff",
+    warning: "#D97706",
+    success: "#16A34A",
+    surface: "#ffffff",
+    background: "#F0F9FF",
+    text: "#0C4A6E",
+    textMuted: "#64748B",
+    textDisabled: "#CBD5E1",
+    border: "#BAE6FD",
+    borderFocus: "#0284C7",
+    inputBackground: "#ffffff"
+  },
+  typography: {
+    fontFamily: "'Source Sans 3', 'Segoe UI', system-ui, sans-serif",
+    scale: "comfortable",
+    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: 28, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "680px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
+};
+var clinicalDarkPreset = {
+  colors: {
+    primary: "#38BDF8",
+    primaryForeground: "#0C1929",
+    secondary: "#22D3EE",
+    secondaryForeground: "#0C1929",
+    error: "#F87171",
+    errorForeground: "#0C1929",
+    warning: "#FBBF24",
+    success: "#34D399",
+    surface: "#0F2438",
+    background: "#0C1929",
+    text: "#E0F2FE",
+    textMuted: "#7DD3FC",
+    textDisabled: "#1E3A5F",
+    border: "#1E3A5F",
+    borderFocus: "#38BDF8",
+    inputBackground: "#0F2438"
+  },
+  typography: {
+    fontFamily: "'Source Sans 3', 'Segoe UI', system-ui, sans-serif",
+    scale: "comfortable",
+    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: 28, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "680px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
 };
-var COMPARISON_PRESETS = {
-  "drafting-teal": { label: "Drafting Teal", theme: draftingTealPreset },
-  clean: { label: "Clean", theme: fieldcraftReact.cleanPreset },
-  dark: { label: "Dark", theme: fieldcraftReact.darkPreset },
-  modern: { label: "Modern", theme: fieldcraftReact.modernPreset },
-  "high-contrast": { label: "High Contrast", theme: fieldcraftReact.highContrastPreset },
-  clinical: { label: "Clinical", theme: fieldcraftReact.clinicalPreset },
-  playful: { label: "Playful", theme: fieldcraftReact.playfulPreset }
+var playfulPreset = {
+  colors: {
+    primary: "#EC4899",
+    primaryForeground: "#ffffff",
+    secondary: "#8B5CF6",
+    secondaryForeground: "#ffffff",
+    error: "#EF4444",
+    errorForeground: "#ffffff",
+    warning: "#F59E0B",
+    success: "#10B981",
+    surface: "#ffffff",
+    background: "#FFF7ED",
+    text: "#1C1917",
+    textMuted: "#78716C",
+    textDisabled: "#D6D3D1",
+    border: "#FDE68A",
+    borderFocus: "#EC4899",
+    inputBackground: "#FFFBEB"
+  },
+  typography: {
+    fontFamily: "'Nunito', 'Comic Neue', system-ui, sans-serif",
+    scale: "spacious",
+    questionSize: "1.25rem",
+    labelSize: "0.9375rem",
+    helpTextSize: "0.875rem",
+    bodySize: "1rem"
+  },
+  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" }
+};
+var playfulDarkPreset = {
+  colors: {
+    primary: "#F472B6",
+    primaryForeground: "#1A0A14",
+    secondary: "#A78BFA",
+    secondaryForeground: "#1A0A14",
+    error: "#FCA5A5",
+    errorForeground: "#1A0A14",
+    warning: "#FCD34D",
+    success: "#6EE7B7",
+    surface: "#2D1F2B",
+    background: "#1A0F19",
+    text: "#FDF2F8",
+    textMuted: "#D4A9C4",
+    textDisabled: "#4A3248",
+    border: "#5C3D56",
+    borderFocus: "#F472B6",
+    inputBackground: "#2D1F2B"
+  },
+  typography: {
+    fontFamily: "'Nunito', 'Comic Neue', system-ui, sans-serif",
+    scale: "spacious",
+    questionSize: "1.25rem",
+    labelSize: "0.9375rem",
+    helpTextSize: "0.875rem",
+    bodySize: "1rem"
+  },
+  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" }
 };
+var highContrastPreset = {
+  colors: {
+    primary: "#0000EE",
+    primaryForeground: "#ffffff",
+    secondary: "#6B21A8",
+    secondaryForeground: "#ffffff",
+    error: "#B91C1C",
+    errorForeground: "#ffffff",
+    warning: "#92400E",
+    success: "#166534",
+    surface: "#ffffff",
+    background: "#ffffff",
+    text: "#000000",
+    textMuted: "#374151",
+    textDisabled: "#9CA3AF",
+    border: "#000000",
+    borderFocus: "#0000EE",
+    inputBackground: "#ffffff"
+  },
+  typography: {
+    fontFamily: "Arial, Helvetica, sans-serif",
+    scale: "spacious",
+    questionSize: "1.25rem",
+    labelSize: "1rem",
+    helpTextSize: "0.9375rem",
+    bodySize: "1rem"
+  },
+  shape: { radius: "sm", inputRadius: "4px", buttonRadius: "4px", cardRadius: "4px" },
+  spacing: { base: 20, sectionGap: 40, fieldGap: 32, inputPaddingX: 14, inputPaddingY: 12 },
+  layout: { maxWidth: "720px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
+};
+var highContrastDarkPreset = {
+  colors: {
+    primary: "#93C5FD",
+    primaryForeground: "#000000",
+    secondary: "#C084FC",
+    secondaryForeground: "#000000",
+    error: "#FCA5A5",
+    errorForeground: "#000000",
+    warning: "#FCD34D",
+    success: "#86EFAC",
+    surface: "#000000",
+    background: "#000000",
+    text: "#FFFFFF",
+    textMuted: "#D1D5DB",
+    textDisabled: "#6B7280",
+    border: "#FFFFFF",
+    borderFocus: "#93C5FD",
+    inputBackground: "#000000"
+  },
+  typography: {
+    fontFamily: "Arial, Helvetica, sans-serif",
+    scale: "spacious",
+    questionSize: "1.25rem",
+    labelSize: "1rem",
+    helpTextSize: "0.9375rem",
+    bodySize: "1rem"
+  },
+  shape: { radius: "sm", inputRadius: "4px", buttonRadius: "4px", cardRadius: "4px" },
+  spacing: { base: 20, sectionGap: 40, fieldGap: 32, inputPaddingX: 14, inputPaddingY: 12 },
+  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" }
+};
+var COMPARISON_PRESETS = Object.fromEntries(
+  Object.entries(PRESET_FAMILIES).map(([key, family]) => [
+    key,
+    { label: family.label, theme: family.light }
+  ])
+);
 function ThemeComparison({ currentTheme, onClose }) {
   const [compareKey, setCompareKey] = react.useState("clean");
-  const compareTheme = COMPARISON_PRESETS[compareKey]?.theme ?? fieldcraftReact.cleanPreset;
+  const compareTheme = COMPARISON_PRESETS[compareKey]?.theme ?? PRESET_FAMILIES.clean.light;
   const diffs = getColorDiffs(currentTheme, compareTheme);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__header", children: [
@@ -7804,7 +8326,54 @@ function getColorDiffs(a, b) {
   }
   return diffs;
 }
+
+// src/utils/resolve-theme-from-dom.ts
+function resolveThemeFromDOM() {
+  if (typeof window === "undefined") return {};
+  const styles = getComputedStyle(document.documentElement);
+  const get = (prop) => {
+    const val = styles.getPropertyValue(prop).trim();
+    return val || void 0;
+  };
+  return {
+    colors: {
+      primary: get("--primary"),
+      primaryForeground: get("--primary-foreground"),
+      secondary: get("--secondary"),
+      secondaryForeground: get("--secondary-foreground"),
+      error: get("--destructive"),
+      errorForeground: get("--destructive-foreground"),
+      warning: get("--fc-color-warning"),
+      success: get("--fc-color-success"),
+      surface: get("--card"),
+      background: get("--background"),
+      text: get("--foreground"),
+      textMuted: get("--muted-foreground"),
+      textDisabled: void 0,
+      border: get("--border"),
+      borderFocus: get("--ring"),
+      inputBackground: get("--input-background") ?? get("--card")
+    },
+    typography: {
+      fontFamily: get("--fc-font-family"),
+      // scale is an enum ("compact" | "comfortable" | "spacious") — not resolvable from CSS
+      questionSize: get("--fc-font-question"),
+      labelSize: get("--fc-font-label"),
+      helpTextSize: get("--fc-font-help"),
+      bodySize: get("--fc-font-body")
+    },
+    shape: {
+      // radius is an enum ("none" | "sm" | "md" | "lg" | "full") — not resolvable from CSS
+      inputRadius: get("--fc-radius-input"),
+      buttonRadius: get("--fc-radius-button"),
+      cardRadius: get("--fc-radius-card")
+    }
+  };
+}
 var ThemeCtx2 = react.createContext({});
+function useEditorTheme() {
+  return react.useContext(ThemeCtx2);
+}
 function themeToCssVars2(theme) {
   const vars = {};
   if (theme.background) vars["--fcte-bg"] = theme.background;
@@ -7825,15 +8394,15 @@ function ThemeEditorThemeProvider({ theme, children }) {
   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 }) });
 }
-var PRESETS = {
-  "drafting-teal": draftingTealPreset,
-  clean: fieldcraftReact.cleanPreset,
-  dark: fieldcraftReact.darkPreset,
-  modern: fieldcraftReact.modernPreset,
-  "high-contrast": fieldcraftReact.highContrastPreset,
-  clinical: fieldcraftReact.clinicalPreset,
-  playful: fieldcraftReact.playfulPreset
-};
+function isDarkTheme(theme) {
+  const bg = theme.colors?.background ?? "#FFFFFF";
+  const hex = bg.replace("#", "");
+  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;
+}
 var SECTIONS = [
   {
     id: "colors",
@@ -7963,9 +8532,17 @@ function ThemeEditorInner({
   toolbarExtra,
   showPreview = true
 }) {
-  const [theme, setTheme] = react.useState(initialTheme ?? draftingTealPreset);
+  const resolvedInitial = react.useMemo(
+    () => initialTheme ?? resolveThemeFromDOM(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const [theme, setTheme] = react.useState(resolvedInitial);
   const [activeSection, setActiveSection] = react.useState("colors");
-  const [presetKey, setPresetKey] = react.useState(initialTheme ? "custom" : "drafting-teal");
+  const [presetKey, setPresetKey] = react.useState("custom");
+  const [mode, setMode] = react.useState(
+    () => isDarkTheme(resolvedInitial) ? "dark" : "light"
+  );
   const [showPalette, setShowPalette] = react.useState(false);
   const [showComparison, setShowComparison] = react.useState(false);
   const themeRef = react.useRef(theme);
@@ -7995,16 +8572,30 @@ function ThemeEditorInner({
     [onChange]
   );
   const loadPreset = react.useCallback(
-    (key) => {
-      const preset = PRESETS[key];
-      if (preset) {
+    (key, forceMode) => {
+      const family = PRESET_FAMILIES[key];
+      if (family) {
+        const m = forceMode ?? mode;
+        const preset = family[m];
         setTheme(preset);
         setPresetKey(key);
         onChange?.(preset);
       }
     },
-    [onChange]
+    [onChange, mode]
   );
+  const toggleMode = react.useCallback(() => {
+    setMode((prev) => {
+      const next = prev === "light" ? "dark" : "light";
+      const family = PRESET_FAMILIES[presetKey];
+      if (family) {
+        const preset = family[next];
+        setTheme(preset);
+        onChange?.(preset);
+      }
+      return next;
+    });
+  }, [presetKey, onChange]);
   const exportJson = react.useCallback(() => {
     const blob = new Blob([JSON.stringify(theme, null, 2)], { type: "application/json" });
     const url = URL.createObjectURL(blob);
@@ -8070,9 +8661,18 @@ function ThemeEditorInner({
                 className: "fcte-toolbar__preset",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("option", { value: "custom", disabled: true, children: "Custom" }),
-                  Object.keys(PRESETS).map((k) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: k, children: k.charAt(0).toUpperCase() + k.slice(1).replace("-", " ") }, k))
+                  Object.entries(PRESET_FAMILIES).map(([k, fam]) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: k, children: fam.label }, k))
                 ]
               }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: toggleMode,
+                className: "fcte-btn fcte-btn--secondary fcte-toolbar__mode",
+                title: mode === "light" ? "Switch to dark mode" : "Switch to light mode",
+                children: mode === "light" ? "\u2600" : "\u263E"
+              }
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-toolbar__right", children: [
@@ -8241,10 +8841,38 @@ function ThemeEditorInner({
 // src/theme-editor/ThemeEditor.tsx
 var ThemeEditor = requireLicense(ThemeEditorInner, "ThemeEditor");
 
+// src/theme-editor/theme/presets.ts
+var themeEditorLightPreset = {
+  background: "#F4F7F8",
+  surface: "#FFFFFF",
+  surfaceHover: "#EDF3F2",
+  text: "#12222A",
+  textMuted: "#6A7B85",
+  textDim: "#96A5AD",
+  border: "#DCE4E8",
+  borderStrong: "#B9D1CF",
+  inputBackground: "#FAFCFC",
+  accent: "#1F6B6E",
+  accentForeground: "#FFFFFF"
+};
+var themeEditorDarkPreset = {
+  background: "#0F1A1F",
+  surface: "#16242A",
+  surfaceHover: "#182F31",
+  text: "#E8EFF1",
+  textMuted: "#8CA1A9",
+  textDim: "#5E7680",
+  border: "#2A3B42",
+  borderStrong: "#2F4F4C",
+  inputBackground: "#12222A",
+  accent: "#63BDB4",
+  accentForeground: "#0F1A1F"
+};
+
 // src/index.ts
 if (typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined" && globalThis.process.env?.NODE_ENV !== "production") {
   const _fc_banner = `
-%c FieldCraft Pro %c v1.4.0 
+%c FieldCraft Pro %c v1.6.0 
 
 %cForm Builder \xB7 Response Viewer \xB7 Theme Editor
 
@@ -8267,16 +8895,19 @@ exports.DEFAULT_SCHEMA = DEFAULT_SCHEMA;
 exports.FieldCraftProProvider = FieldCraftProProvider;
 exports.FormBuilder = FormBuilder;
 exports.FormBuilderThemeProvider = FormBuilderThemeProvider;
+exports.PRESET_FAMILIES = PRESET_FAMILIES;
 exports.PREVIEW_SCHEMA = PREVIEW_SCHEMA;
+exports.PRO_FIELD_OVERRIDES = PRO_FIELD_OVERRIDES;
+exports.ProPaymentField = ProPaymentField;
 exports.QUESTION_TYPE_INFO = QUESTION_TYPE_INFO;
 exports.ResponseViewer = ResponseViewer;
 exports.ThemeEditor = ThemeEditor;
 exports.ThemeEditorInner = ThemeEditorInner;
+exports.ThemeEditorThemeProvider = ThemeEditorThemeProvider;
 exports.UnlicensedOverlay = UnlicensedOverlay;
 exports.addOption = addOption;
 exports.addQuestion = addQuestion;
 exports.addSection = addSection;
-exports.cleanPreset = cleanPreset;
 exports.cn = cn;
 exports.duplicateQuestion = duplicateQuestion;
 exports.duplicateSection = duplicateSection;
@@ -8294,13 +8925,16 @@ exports.removeOption = removeOption;
 exports.removeQuestion = removeQuestion;
 exports.removeSection = removeSection;
 exports.requireLicense = requireLicense;
-exports.squaredrDarkPreset = squaredrDarkPreset;
+exports.resolveThemeFromDOM = resolveThemeFromDOM;
+exports.themeEditorDarkPreset = themeEditorDarkPreset;
+exports.themeEditorLightPreset = themeEditorLightPreset;
 exports.updateOption = updateOption;
 exports.updateQuestion = updateQuestion;
 exports.updateSection = updateSection;
 exports.useBuilderState = useBuilderState;
 exports.useBuilderTheme = useBuilderTheme;
 exports.useDragDrop = useDragDrop;
+exports.useEditorTheme = useEditorTheme;
 exports.useLicense = useLicense;
 exports.useUndoRedo = useUndoRedo;
 exports.validateLicense = validateLicense;