@sonordev/site-kit 2.6.1 → 2.7.0

package/dist/forms/index.js

@@ -2,9 +2,13 @@
 'use strict';
 
 require('../chunk-ZSMWDLMK.js');
-var react = require('react');
+var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+
 // src/forms/formsApi.ts
 var config = null;
 function configureFormsApi(options) {
@@ -328,14 +332,14 @@ function useFormTracking({
   enabled = true,
   debug = false
 }) {
-  const sessionIdRef = react.useRef("");
-  const startTimeRef = react.useRef(0);
-  const stepStartTimeRef = react.useRef(0);
-  const stepTimesRef = react.useRef({});
-  const currentStepRef = react.useRef(1);
-  const maxStepRef = react.useRef(1);
-  const analyticsIdRef = react.useRef(null);
-  react.useEffect(() => {
+  const sessionIdRef = React2.useRef("");
+  const startTimeRef = React2.useRef(0);
+  const stepStartTimeRef = React2.useRef(0);
+  const stepTimesRef = React2.useRef({});
+  const currentStepRef = React2.useRef(1);
+  const maxStepRef = React2.useRef(1);
+  const analyticsIdRef = React2.useRef(null);
+  React2.useEffect(() => {
     if (!enabled) return;
     if (!formId) {
       if (debug) console.warn("[Forms] Tracking skipped: formId is empty");
@@ -406,7 +410,7 @@ function useFormTracking({
       window.removeEventListener("beforeunload", handleBeforeUnload);
     };
   }, [formId, enabled, debug]);
-  const trackStepChange = react.useCallback(async (step) => {
+  const trackStepChange = React2.useCallback(async (step) => {
     if (!enabled || !analyticsIdRef.current) return;
     const apiUrl = window.__SITE_KIT_API_URL__;
     const apiKey = window.__SITE_KIT_API_KEY__;
@@ -442,7 +446,7 @@ function useFormTracking({
       if (debug) console.error("[Forms] Error updating step:", error);
     }
   }, [enabled, debug]);
-  const trackComplete = react.useCallback(async () => {
+  const trackComplete = React2.useCallback(async () => {
     if (!enabled || !analyticsIdRef.current) return;
     const apiUrl = window.__SITE_KIT_API_URL__;
     const apiKey = window.__SITE_KIT_API_KEY__;
@@ -508,6 +512,42 @@ function getDeviceType() {
   return "desktop";
 }
 
+// src/forms/fetchWithRetry.ts
+function backoffDelay(attempt, response) {
+  if (response?.status === 429) {
+    const header = response.headers.get("retry-after");
+    const seconds = header ? parseInt(header, 10) : NaN;
+    if (!Number.isNaN(seconds) && seconds > 0) return Math.min(seconds * 1e3, 1e4);
+  }
+  return Math.min(8e3, 500 * 2 ** attempt);
+}
+async function fetchWithRetry(url, init, options = {}) {
+  const retries = options.retries ?? 2;
+  const timeoutMs = options.timeoutMs ?? 15e3;
+  let lastError;
+  for (let attempt = 0; attempt <= retries; attempt++) {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), timeoutMs);
+    try {
+      const response = await fetch(url, { ...init, signal: controller.signal });
+      clearTimeout(timer);
+      if ((response.status === 429 || response.status >= 500) && attempt < retries) {
+        await new Promise((resolve) => setTimeout(resolve, backoffDelay(attempt, response)));
+        continue;
+      }
+      return response;
+    } catch (error) {
+      clearTimeout(timer);
+      lastError = error;
+      if (attempt < retries) {
+        await new Promise((resolve) => setTimeout(resolve, backoffDelay(attempt)));
+        continue;
+      }
+    }
+  }
+  throw lastError instanceof Error ? lastError : new Error("Network request failed after multiple attempts. Please try again.");
+}
+
 // src/forms/recaptcha.ts
 function getSiteKey(explicitSiteKey) {
   if (typeof window === "undefined") return void 0;
@@ -515,8 +555,9 @@ function getSiteKey(explicitSiteKey) {
   const win = window;
   return win.__SITE_KIT_RECAPTCHA_SITE_KEY__ ?? process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
 }
+var RECAPTCHA_LOAD_TIMEOUT_MS = 1e4;
 function loadScript(siteKey) {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     if (typeof window === "undefined") {
       resolve(null);
       return;
@@ -526,20 +567,35 @@ function loadScript(siteKey) {
       resolve(win.grecaptcha);
       return;
     }
+    let settled = false;
+    const finish = (value) => {
+      if (settled) return;
+      settled = true;
+      resolve(value);
+    };
+    const giveUp = setTimeout(() => finish(null), RECAPTCHA_LOAD_TIMEOUT_MS);
+    const waitForReady = () => {
+      if (settled) return;
+      if (win.grecaptcha?.enterprise) {
+        clearTimeout(giveUp);
+        finish(win.grecaptcha);
+        return;
+      }
+      setTimeout(waitForReady, 50);
+    };
     const existing = document.querySelector('script[src*="recaptcha/enterprise"]');
     if (existing) {
-      const check = () => {
-        if (win.grecaptcha?.enterprise) resolve(win.grecaptcha);
-        else setTimeout(check, 50);
-      };
-      check();
+      waitForReady();
       return;
     }
     const script = document.createElement("script");
     script.src = `https://www.google.com/recaptcha/enterprise.js?render=${siteKey}`;
     script.async = true;
-    script.onload = () => resolve(win.grecaptcha);
-    script.onerror = () => reject(new Error("reCAPTCHA script failed to load"));
+    script.onload = () => waitForReady();
+    script.onerror = () => {
+      clearTimeout(giveUp);
+      finish(null);
+    };
     document.head.appendChild(script);
   });
 }
@@ -557,21 +613,83 @@ async function getRecaptchaToken(explicitSiteKey) {
   }
 }
 
-// src/forms/defaultSuccessMessage.ts
-var DEFAULT_FORM_SUCCESS_MESSAGE = "Thank you for your submission! We will be in touch soon.";
-
-// src/forms/useForm.ts
+// src/forms/submitForm.ts
+var DEFAULT_HONEYPOT_FIELD = "_sk_hp_url";
+function getApiConfig() {
+  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : "https://api.sonor.io";
+  const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+  return { apiUrl, apiKey };
+}
 function getUTMParams() {
   if (typeof window === "undefined") return {};
   const params = new URLSearchParams(window.location.search);
-  return {
-    utm_source: params.get("utm_source"),
-    utm_medium: params.get("utm_medium"),
-    utm_campaign: params.get("utm_campaign"),
-    utm_term: params.get("utm_term"),
-    utm_content: params.get("utm_content")
+  const out = {};
+  for (const key of ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"]) {
+    out[key] = params.get(key);
+  }
+  return out;
+}
+async function submitForm({
+  config: config2,
+  values,
+  honeypotValue,
+  formLoadedAt
+}) {
+  const { apiUrl, apiKey } = getApiConfig();
+  if (!apiKey) {
+    throw new Error("API key is required. Set SONOR_API_KEY in your environment.");
+  }
+  const recaptchaToken = config2.recaptcha_enabled ? await getRecaptchaToken(config2.recaptcha_site_key) : null;
+  if (config2.recaptcha_enabled && !recaptchaToken) {
+    throw new Error("Verification could not be completed. Please try again.");
+  }
+  const honeypotFieldName = config2.honeypot_field || DEFAULT_HONEYPOT_FIELD;
+  const utm = getUTMParams();
+  const payload = {
+    formId: config2.id,
+    form_id: config2.id,
+    data: {
+      ...values,
+      ...config2.honeypot_enabled ? { [honeypotFieldName]: honeypotValue } : {}
+    },
+    metadata: {
+      pageUrl: typeof window !== "undefined" ? window.location.href : null,
+      referrer: typeof document !== "undefined" ? document.referrer || null : null,
+      userAgent: typeof navigator !== "undefined" ? navigator.userAgent : null,
+      sessionId: typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_sk_sid") : null,
+      recaptchaToken: recaptchaToken || void 0,
+      utmSource: utm.utm_source,
+      utmMedium: utm.utm_medium,
+      utmCampaign: utm.utm_campaign,
+      _formLoadedAt: formLoadedAt
+    }
   };
+  const response = await fetchWithRetry(
+    `${apiUrl}/api/public/forms/submit`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${apiKey}`
+      },
+      body: JSON.stringify(payload)
+    },
+    { retries: 2, timeoutMs: 2e4 }
+  );
+  const data = await response.json().catch(() => null);
+  if (!response.ok) {
+    const msg = (data?.message ?? data?.error ?? (response.statusText || `HTTP ${response.status}`)).toString().trim();
+    throw new Error(
+      msg ? `Failed to submit form: ${msg}` : `Failed to submit form (${response.status})`
+    );
+  }
+  return data;
 }
+
+// src/forms/defaultSuccessMessage.ts
+var DEFAULT_FORM_SUCCESS_MESSAGE = "Thank you for your submission! We will be in touch soon.";
+
+// src/forms/useForm.ts
 function useForm(formIdOrSlug, options = {}) {
   const {
     projectId: optionsProjectId,
@@ -581,32 +699,38 @@ function useForm(formIdOrSlug, options = {}) {
     redirectUrl
   } = options;
   const projectId = optionsProjectId || (typeof window !== "undefined" ? window.__SITE_KIT_PROJECT_ID__ : void 0);
-  const [form, setForm] = react.useState(null);
-  const [isLoading, setIsLoading] = react.useState(true);
-  const [fetchError, setFetchError] = react.useState(null);
-  const [values, setValuesState] = react.useState(initialValues);
-  const [errors, setErrors] = react.useState({});
-  const [step, setStep] = react.useState(1);
-  const [isSubmitting, setIsSubmitting] = react.useState(false);
-  const [isComplete, setIsComplete] = react.useState(false);
+  const [form, setForm] = React2.useState(null);
+  const [isLoading, setIsLoading] = React2.useState(true);
+  const [fetchError, setFetchError] = React2.useState(null);
+  const [values, setValuesState] = React2.useState(initialValues);
+  const [errors, setErrors] = React2.useState({});
+  const [step, setStep] = React2.useState(1);
+  const [isSubmitting, setIsSubmitting] = React2.useState(false);
+  const [isComplete, setIsComplete] = React2.useState(false);
+  const [submitError, setSubmitError] = React2.useState(null);
+  const isSubmittingRef = React2.useRef(false);
+  const formLoadedAt = React2.useRef(Date.now());
   const totalSteps = form?.total_steps || 1;
   const isMultiStep = form?.is_multi_step || false;
   const { trackStepChange, trackComplete } = useFormTracking({
     formId: form?.id || "",
     totalSteps
   });
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : "https://api.sonor.io";
-    const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
-    if (!apiKey) {
-      setFetchError(new Error("API key is required. Provide it via SiteKitProvider (apiKey) or set __SITE_KIT_API_KEY__."));
-      setIsLoading(false);
-      return;
-    }
     async function fetchForm() {
       try {
         setIsLoading(true);
         setFetchError(null);
+        const readApiKey = () => typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+        let apiKey = readApiKey();
+        for (let i = 0; i < 15 && !apiKey; i++) {
+          await new Promise((r) => setTimeout(r, 100));
+          apiKey = readApiKey();
+        }
+        if (!apiKey) {
+          throw new Error("API key is required. Provide it via SiteKitLayout/SiteKitProvider or set SONOR_API_KEY.");
+        }
         const url = `${apiUrl}/api/public/forms/config`;
         const init = {
           method: "POST",
@@ -618,15 +742,7 @@ function useForm(formIdOrSlug, options = {}) {
             formIdOrSlug
           })
         };
-        const maxAttempts = 4;
-        let response = await fetch(url, init);
-        for (let attempt = 1; attempt < maxAttempts && response.status === 429; attempt++) {
-          const ra = response.headers.get("retry-after");
-          const retryAfterSec = ra ? parseInt(ra, 10) : NaN;
-          const delayMs = !Number.isNaN(retryAfterSec) && retryAfterSec > 0 ? retryAfterSec * 1e3 : Math.min(8e3, 400 * 2 ** (attempt - 1));
-          await new Promise((r) => setTimeout(r, delayMs));
-          response = await fetch(url, init);
-        }
+        const response = await fetchWithRetry(url, init, { retries: 3, timeoutMs: 15e3 });
         if (!response.ok) {
           throw new Error(`Failed to fetch form: ${response.statusText}`);
         }
@@ -667,14 +783,14 @@ function useForm(formIdOrSlug, options = {}) {
     }
     fetchForm();
   }, [formIdOrSlug, projectId]);
-  const allFields = react.useMemo(() => form?.fields || [], [form]);
-  const fields = react.useMemo(() => {
+  const allFields = React2.useMemo(() => form?.fields || [], [form]);
+  const fields = React2.useMemo(() => {
     if (!isMultiStep) return allFields;
     const currentStepConfig = form?.steps?.find((s) => s.step_number === step);
     if (!currentStepConfig) return allFields;
     return allFields.filter((f) => f.step_id === currentStepConfig.id);
   }, [form, step, allFields, isMultiStep]);
-  const isFieldVisible = react.useCallback((field2) => {
+  const isFieldVisible = React2.useCallback((field2) => {
     if (!field2.conditional?.show_when) return true;
     const { field: condField, operator, value } = field2.conditional.show_when;
     const fieldValue = values[condField];
@@ -699,11 +815,12 @@ function useForm(formIdOrSlug, options = {}) {
         return true;
     }
   }, [values]);
-  const visibleFields = react.useMemo(() => {
+  const visibleFields = React2.useMemo(() => {
     return fields.filter(isFieldVisible);
   }, [fields, isFieldVisible]);
-  const validateField = react.useCallback((field2) => {
+  const validateField = React2.useCallback((field2) => {
     if (!isFieldVisible(field2)) return null;
+    if (["heading", "section_header", "paragraph", "hidden"].includes(field2.field_type)) return null;
     const value = values[field2.slug];
     const rules = field2.validation || {};
     if (field2.is_required && (!value || value === "")) {
@@ -723,8 +840,13 @@ function useForm(formIdOrSlug, options = {}) {
     if (rules.max !== void 0 && Number(value) > rules.max) {
       return `${field2.label} must be no more than ${rules.max}`;
     }
-    if (rules.pattern && !new RegExp(rules.pattern).test(strValue)) {
-      return rules.custom_error || `${field2.label} is invalid`;
+    if (rules.pattern) {
+      try {
+        if (!new RegExp(rules.pattern).test(strValue)) {
+          return rules.custom_error || `${field2.label} is invalid`;
+        }
+      } catch {
+      }
     }
     if (field2.field_type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(strValue)) {
       return "Please enter a valid email address";
@@ -734,7 +856,7 @@ function useForm(formIdOrSlug, options = {}) {
     }
     return null;
   }, [values, isFieldVisible]);
-  const validate = react.useCallback(() => {
+  const validate = React2.useCallback(() => {
     const newErrors = {};
     for (const field2 of fields) {
       const error = validateField(field2);
@@ -745,7 +867,24 @@ function useForm(formIdOrSlug, options = {}) {
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   }, [fields, validateField]);
-  const setFieldValue = react.useCallback((key, value) => {
+  const validateAll = React2.useCallback(() => {
+    const newErrors = {};
+    for (const field2 of allFields) {
+      const error = validateField(field2);
+      if (error) newErrors[field2.slug] = error;
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [allFields, validateField]);
+  const buildVisibleValues = React2.useCallback(() => {
+    const out = {};
+    for (const field2 of allFields) {
+      if (!isFieldVisible(field2)) continue;
+      if (field2.slug in values) out[field2.slug] = values[field2.slug];
+    }
+    return out;
+  }, [allFields, values, isFieldVisible]);
+  const setFieldValue = React2.useCallback((key, value) => {
     setValuesState((prev) => ({ ...prev, [key]: value }));
     setErrors((prev) => {
       if (prev[key]) {
@@ -756,17 +895,17 @@ function useForm(formIdOrSlug, options = {}) {
       return prev;
     });
   }, []);
-  const setValues = react.useCallback((newValues) => {
+  const setValues = React2.useCallback((newValues) => {
     setValuesState((prev) => ({ ...prev, ...newValues }));
   }, []);
-  const clearErrors = react.useCallback(() => {
+  const clearErrors = React2.useCallback(() => {
     setErrors({});
   }, []);
   const canGoNext = step < totalSteps;
   const canGoPrev = step > 1;
   const isLastStep = step === totalSteps;
   const progress = Math.round(step / totalSteps * 100);
-  const nextStep = react.useCallback(() => {
+  const nextStep = React2.useCallback(() => {
     if (!validate()) return false;
     if (step < totalSteps) {
       const newStep = step + 1;
@@ -776,64 +915,33 @@ function useForm(formIdOrSlug, options = {}) {
     }
     return false;
   }, [step, totalSteps, validate, trackStepChange]);
-  const prevStep = react.useCallback(() => {
+  const prevStep = React2.useCallback(() => {
     if (step > 1) {
       const newStep = step - 1;
       setStep(newStep);
       trackStepChange(newStep);
     }
   }, [step, trackStepChange]);
-  const goToStep = react.useCallback((targetStep) => {
+  const goToStep = React2.useCallback((targetStep) => {
     if (targetStep >= 1 && targetStep <= totalSteps) {
       setStep(targetStep);
       trackStepChange(targetStep);
     }
   }, [totalSteps, trackStepChange]);
-  const submit = react.useCallback(async () => {
+  const submit = React2.useCallback(async () => {
     if (!form) return;
-    if (!validate()) return;
+    if (isSubmittingRef.current) return;
+    if (!validateAll()) return;
+    isSubmittingRef.current = true;
     setIsSubmitting(true);
+    setSubmitError(null);
     try {
-      const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : "https://api.sonor.io";
-      const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
-      if (!apiKey) {
-        throw new Error("API key is required. Set SONOR_API_KEY in your .env");
-      }
-      const honeypotFieldName = form.honeypot_field || "website";
-      const recaptchaToken = form.recaptcha_enabled ? await getRecaptchaToken(form.recaptcha_site_key) : null;
-      if (form.recaptcha_enabled && !recaptchaToken) {
-        throw new Error("reCAPTCHA is required but could not be initialized.");
-      }
-      const utm = getUTMParams();
-      const submission = {
-        formId: form.id,
-        data: {
-          ...values,
-          ...form.honeypot_enabled ? { [honeypotFieldName]: "" } : {}
-        },
-        metadata: {
-          pageUrl: typeof window !== "undefined" ? window.location.href : null,
-          referrer: typeof document !== "undefined" ? document.referrer || null : null,
-          userAgent: typeof navigator !== "undefined" ? navigator.userAgent : null,
-          sessionId: typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_sk_sid") : null,
-          recaptchaToken: recaptchaToken || void 0,
-          utmSource: utm.utm_source,
-          utmMedium: utm.utm_medium,
-          utmCampaign: utm.utm_campaign
-        }
-      };
-      const response = await fetch(`${apiUrl}/api/public/forms/submit`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "Authorization": `Bearer ${apiKey}`
-        },
-        body: JSON.stringify(submission)
+      const data = await submitForm({
+        config: form,
+        values: buildVisibleValues(),
+        honeypotValue: "",
+        formLoadedAt: formLoadedAt.current
       });
-      if (!response.ok) {
-        throw new Error(`Form submission failed: ${response.statusText}`);
-      }
-      const data = await response.json();
       trackComplete();
       setIsComplete(true);
       onSuccess?.(data);
@@ -843,21 +951,25 @@ function useForm(formIdOrSlug, options = {}) {
       }
     } catch (error) {
       console.error("[useForm] Submission error:", error);
+      setSubmitError("Something went wrong sending your submission. Please try again.");
       onError?.(error);
     } finally {
+      isSubmittingRef.current = false;
       setIsSubmitting(false);
     }
-  }, [form, values, validate, trackComplete, onSuccess, onError, redirectUrl]);
-  const reset = react.useCallback(() => {
+  }, [form, validateAll, buildVisibleValues, trackComplete, onSuccess, onError, redirectUrl]);
+  const reset = React2.useCallback(() => {
     setValuesState(initialValues);
     setErrors({});
     setStep(1);
     setIsComplete(false);
+    setSubmitError(null);
   }, [initialValues]);
   return {
     form,
     isLoading,
     fetchError,
+    submitError,
     allFields,
     fields,
     visibleFields,
@@ -923,13 +1035,13 @@ function DatePicker({
 }) {
   const today = /* @__PURE__ */ new Date();
   const todayStr = toDateStr(today.getFullYear(), today.getMonth(), today.getDate());
-  const effectiveMin = minDate || todayStr;
+  const effectiveMin = minDate || "";
   const parsed = parseDate(value);
-  const [viewYear, setViewYear] = react.useState(parsed?.year || today.getFullYear());
-  const [viewMonth, setViewMonth] = react.useState(parsed?.month ?? today.getMonth());
-  const [open, setOpen] = react.useState(false);
-  const containerRef = react.useRef(null);
-  react.useEffect(() => {
+  const [viewYear, setViewYear] = React2.useState(parsed?.year || today.getFullYear());
+  const [viewMonth, setViewMonth] = React2.useState(parsed?.month ?? today.getMonth());
+  const [open, setOpen] = React2.useState(false);
+  const containerRef = React2.useRef(null);
+  React2.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -939,7 +1051,7 @@ function DatePicker({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -947,32 +1059,32 @@ function DatePicker({
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
   }, [open]);
-  const prevMonth = react.useCallback(() => {
+  const prevMonth = React2.useCallback(() => {
     if (viewMonth === 0) {
       setViewMonth(11);
       setViewYear((y) => y - 1);
     } else setViewMonth((m) => m - 1);
   }, [viewMonth]);
-  const nextMonth = react.useCallback(() => {
+  const nextMonth = React2.useCallback(() => {
     if (viewMonth === 11) {
       setViewMonth(0);
       setViewYear((y) => y + 1);
     } else setViewMonth((m) => m + 1);
   }, [viewMonth]);
-  const selectDay = react.useCallback((day) => {
+  const selectDay = React2.useCallback((day) => {
     const dateStr = toDateStr(viewYear, viewMonth, day);
     onChange(dateStr);
     setOpen(false);
   }, [viewYear, viewMonth, onChange]);
-  const isDisabled = react.useCallback((day) => {
+  const isDisabled = React2.useCallback((day) => {
     const dateStr = toDateStr(viewYear, viewMonth, day);
     return dateStr < effectiveMin;
   }, [viewYear, viewMonth, effectiveMin]);
-  const isSelected = react.useCallback((day) => {
+  const isSelected = React2.useCallback((day) => {
     if (!value) return false;
     return toDateStr(viewYear, viewMonth, day) === value;
   }, [viewYear, viewMonth, value]);
-  const isToday = react.useCallback((day) => {
+  const isToday = React2.useCallback((day) => {
     return toDateStr(viewYear, viewMonth, day) === todayStr;
   }, [viewYear, viewMonth, todayStr]);
   const daysInMonth = getDaysInMonth(viewYear, viewMonth);
@@ -1349,20 +1461,13 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "sk-fo
       }
     ),
     field2.field_type === "file" && /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
+      FileUploadField,
       {
-        id: inputId,
-        className: `${classPrefix}__input ${classPrefix}__input--file`,
-        type: "file",
-        name: field2.slug,
-        required: field2.is_required,
-        onChange: (e) => {
-          const file = e.target.files?.[0];
-          if (file) {
-            onChange(file.name);
-          }
-        },
-        style: baseInputStyle
+        field: field2,
+        inputId,
+        classPrefix,
+        baseInputStyle,
+        onChange
       }
     ),
     field2.field_type === "rating" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classPrefix}__rating`, style: { display: "flex", gap: 4 }, children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1402,6 +1507,79 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "sk-fo
     field2.help_text && !error && field2.field_type !== "checkbox" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${classPrefix}__help`, style: helpStyle, children: field2.help_text })
   ] });
 }
+function FileUploadField({
+  field: field2,
+  inputId,
+  classPrefix,
+  baseInputStyle,
+  onChange
+}) {
+  const [status, setStatus] = React2__default.default.useState("idle");
+  const [fileName, setFileName] = React2__default.default.useState("");
+  const handleFile = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setFileName(file.name);
+    setStatus("uploading");
+    onChange("");
+    try {
+      const url = await uploadFormFile(file);
+      onChange(url);
+      setStatus("idle");
+    } catch (err) {
+      console.error("[Forms] File upload failed:", err);
+      onChange("");
+      setStatus("error");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        id: inputId,
+        className: `${classPrefix}__input ${classPrefix}__input--file`,
+        type: "file",
+        name: field2.slug,
+        required: field2.is_required,
+        disabled: status === "uploading",
+        onChange: handleFile,
+        style: baseInputStyle
+      }
+    ),
+    status === "uploading" && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--sk-text-tertiary, #6b7280)", fontSize: 14, marginTop: 4 }, children: [
+      "Uploading ",
+      fileName,
+      "\u2026"
+    ] }),
+    status === "error" && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", style: { color: "var(--sk-error, #ef4444)", fontSize: 14, marginTop: 4 }, children: "Upload failed. Please choose the file again." })
+  ] });
+}
+async function uploadFormFile(file) {
+  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : "https://api.sonor.io";
+  const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+  if (!apiKey) {
+    throw new Error("API key is required to upload files.");
+  }
+  const body = new FormData();
+  body.append("file", file);
+  const response = await fetchWithRetry(
+    `${apiUrl}/api/public/forms/upload`,
+    {
+      method: "POST",
+      headers: { Authorization: `Bearer ${apiKey}` },
+      body
+    },
+    { retries: 1, timeoutMs: 6e4 }
+  );
+  if (!response.ok) {
+    throw new Error(`Upload failed (${response.status})`);
+  }
+  const data = await response.json().catch(() => null);
+  if (!data?.url) {
+    throw new Error("Upload did not return a URL.");
+  }
+  return data.url;
+}
 function FormClient({
   config: config2,
   className,
@@ -1409,19 +1587,21 @@ function FormClient({
   onError,
   customRender
 }) {
-  const [values, setValues] = react.useState({});
-  const [errors, setErrors] = react.useState({});
-  const [step, setStep] = react.useState(1);
-  const [isSubmitting, setIsSubmitting] = react.useState(false);
-  const [isComplete, setIsComplete] = react.useState(false);
-  const [honeypotValue, setHoneypotValue] = react.useState("");
-  const honeypotFieldName = config2.honeypot_field || "website";
-  const formLoadedAt = react.useRef(Date.now());
+  const [values, setValues] = React2.useState({});
+  const [errors, setErrors] = React2.useState({});
+  const [step, setStep] = React2.useState(1);
+  const [isSubmitting, setIsSubmitting] = React2.useState(false);
+  const [isComplete, setIsComplete] = React2.useState(false);
+  const [submitError, setSubmitError] = React2.useState(null);
+  const [honeypotValue, setHoneypotValue] = React2.useState("");
+  const honeypotFieldName = config2.honeypot_field || DEFAULT_HONEYPOT_FIELD;
+  const formLoadedAt = React2.useRef(Date.now());
+  const isSubmittingRef = React2.useRef(false);
   const { trackStepChange, trackComplete } = useFormTracking({
     formId: config2.id,
     totalSteps: config2.total_steps
   });
-  const currentFields = react.useMemo(() => {
+  const currentFields = React2.useMemo(() => {
     if (!config2.is_multi_step) {
       return config2.fields || [];
     }
@@ -1429,7 +1609,7 @@ function FormClient({
     if (!currentStepConfig) return config2.fields || [];
     return (config2.fields || []).filter((f) => f.step_id === currentStepConfig.id);
   }, [config2, step]);
-  const isFieldVisible = react.useCallback((field2) => {
+  const isFieldVisible = React2.useCallback((field2) => {
     if (!field2.conditional?.show_when) return true;
     const { field: condField, operator, value } = field2.conditional.show_when;
     const fieldValue = values[condField];
@@ -1454,7 +1634,7 @@ function FormClient({
         return true;
     }
   }, [values]);
-  const validateField = react.useCallback((field2) => {
+  const validateField = React2.useCallback((field2) => {
     if (!isFieldVisible(field2)) return null;
     if (["heading", "section_header", "paragraph", "hidden"].includes(field2.field_type)) return null;
     const value = values[field2.slug];
@@ -1476,8 +1656,13 @@ function FormClient({
     if (rules.max !== void 0 && Number(value) > rules.max) {
       return `${field2.label} must be no more than ${rules.max}`;
     }
-    if (rules.pattern && !new RegExp(rules.pattern).test(strValue)) {
-      return rules.custom_error || `${field2.label} is invalid`;
+    if (rules.pattern) {
+      try {
+        if (!new RegExp(rules.pattern).test(strValue)) {
+          return rules.custom_error || `${field2.label} is invalid`;
+        }
+      } catch {
+      }
     }
     if (field2.field_type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(strValue)) {
       return "Please enter a valid email address";
@@ -1487,7 +1672,7 @@ function FormClient({
     }
     return null;
   }, [values, isFieldVisible]);
-  const validateStep = react.useCallback(() => {
+  const validateStep = React2.useCallback(() => {
     const newErrors = {};
     for (const field2 of currentFields) {
       const error = validateField(field2);
@@ -1498,7 +1683,36 @@ function FormClient({
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   }, [currentFields, validateField]);
-  const setFieldValue = react.useCallback((key, value) => {
+  const validateAll = React2.useCallback(() => {
+    const allFields = config2.fields || [];
+    const newErrors = {};
+    for (const field2 of allFields) {
+      const error = validateField(field2);
+      if (error) newErrors[field2.slug] = error;
+    }
+    setErrors(newErrors);
+    if (Object.keys(newErrors).length === 0) return { ok: true, firstErrorStep: null };
+    let firstErrorStep = null;
+    if (config2.is_multi_step && config2.steps) {
+      const ordered = [...config2.steps].sort((a, b) => a.step_number - b.step_number);
+      for (const s of ordered) {
+        if (allFields.some((f) => f.step_id === s.id && newErrors[f.slug])) {
+          firstErrorStep = s.step_number;
+          break;
+        }
+      }
+    }
+    return { ok: false, firstErrorStep };
+  }, [config2, validateField]);
+  const buildVisibleValues = React2.useCallback(() => {
+    const out = {};
+    for (const field2 of config2.fields || []) {
+      if (!isFieldVisible(field2)) continue;
+      if (field2.slug in values) out[field2.slug] = values[field2.slug];
+    }
+    return out;
+  }, [config2, values, isFieldVisible]);
+  const setFieldValue = React2.useCallback((key, value) => {
     setValues((prev) => ({ ...prev, [key]: value }));
     if (errors[key]) {
       setErrors((prev) => {
@@ -1508,7 +1722,7 @@ function FormClient({
       });
     }
   }, [errors]);
-  const nextStep = react.useCallback(() => {
+  const nextStep = React2.useCallback(() => {
     if (!validateStep()) return false;
     if (step < config2.total_steps) {
       const newStep = step + 1;
@@ -1518,67 +1732,36 @@ function FormClient({
     }
     return false;
   }, [step, config2.total_steps, validateStep, trackStepChange]);
-  const prevStep = react.useCallback(() => {
+  const prevStep = React2.useCallback(() => {
     if (step > 1) {
       const newStep = step - 1;
       setStep(newStep);
       trackStepChange(newStep);
     }
   }, [step, trackStepChange]);
-  const goToStep = react.useCallback((targetStep) => {
+  const goToStep = React2.useCallback((targetStep) => {
     if (targetStep >= 1 && targetStep <= config2.total_steps) {
       setStep(targetStep);
       trackStepChange(targetStep);
     }
   }, [config2.total_steps, trackStepChange]);
-  const submit = react.useCallback(async () => {
-    if (!validateStep()) return;
+  const submit = React2.useCallback(async () => {
+    if (isSubmittingRef.current) return;
+    const { ok, firstErrorStep } = validateAll();
+    if (!ok) {
+      if (firstErrorStep != null) setStep(firstErrorStep);
+      return;
+    }
+    isSubmittingRef.current = true;
     setIsSubmitting(true);
+    setSubmitError(null);
     try {
-      const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : "https://api.sonor.io";
-      const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
-      if (!apiKey) {
-        throw new Error("API key is required. Set SONOR_API_KEY in your .env");
-      }
-      const recaptchaToken = config2.recaptcha_enabled ? await getRecaptchaToken(config2.recaptcha_site_key) : null;
-      if (config2.recaptcha_enabled && !recaptchaToken) {
-        throw new Error("reCAPTCHA is required but could not be initialized.");
-      }
-      const utm = getUTMParams2();
-      const submission = {
-        form_id: config2.id,
-        project_id: config2.project_id,
-        data: {
-          ...values,
-          ...config2.honeypot_enabled ? { [honeypotFieldName]: honeypotValue } : {}
-        },
-        routing_type: config2.form_type,
-        status: "new",
-        metadata: {
-          pageUrl: typeof window !== "undefined" ? window.location.href : null,
-          referrer: typeof document !== "undefined" ? document.referrer || null : null,
-          userAgent: typeof navigator !== "undefined" ? navigator.userAgent : null,
-          sessionId: typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_sk_sid") : null,
-          recaptchaToken: recaptchaToken || void 0,
-          utmSource: utm.utm_source,
-          utmMedium: utm.utm_medium,
-          utmCampaign: utm.utm_campaign,
-          _formLoadedAt: formLoadedAt.current
-        }
-      };
-      const response = await fetch(`${apiUrl}/api/public/forms/submit`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "Authorization": `Bearer ${apiKey}`
-        },
-        body: JSON.stringify(submission)
+      const data = await submitForm({
+        config: config2,
+        values: buildVisibleValues(),
+        honeypotValue: config2.honeypot_enabled ? honeypotValue : "",
+        formLoadedAt: formLoadedAt.current
       });
-      const data = await response.json().catch(() => null);
-      if (!response.ok) {
-        const msg = (data?.message ?? data?.error ?? (response.statusText || `HTTP ${response.status}`)).trim();
-        throw new Error(msg ? `Failed to submit form: ${msg}` : `Failed to submit form (${response.status})`);
-      }
       trackComplete();
       setIsComplete(true);
       onSuccess?.(data);
@@ -1587,12 +1770,14 @@ function FormClient({
       }
     } catch (error) {
       console.error("[Forms] Submission error:", error);
+      setSubmitError("Something went wrong sending your submission. Please try again.");
       onError?.(error);
     } finally {
+      isSubmittingRef.current = false;
       setIsSubmitting(false);
     }
-  }, [config2, honeypotFieldName, honeypotValue, values, validateStep, trackComplete, onSuccess, onError]);
-  const progress = react.useMemo(() => {
+  }, [config2, honeypotValue, validateAll, buildVisibleValues, trackComplete, onSuccess, onError]);
+  const progress = React2.useMemo(() => {
     return Math.round(step / config2.total_steps * 100);
   }, [step, config2.total_steps]);
   const renderProps = {
@@ -1689,6 +1874,15 @@ function FormClient({
           step > 1 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "sk-form__btn sk-form__btn--back", onClick: prevStep, children: "Back" }),
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "sk-form__btn sk-form__btn--submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : step < config2.total_steps ? "Next" : config2.submit_button_text })
         ] }),
+        submitError && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: "sk-form__submit-error",
+            role: "alert",
+            style: { color: "var(--sk-error, #ef4444)", fontSize: 14, marginTop: 12 },
+            children: submitError
+          }
+        ),
         config2.honeypot_enabled && /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -1715,16 +1909,6 @@ function FormClient({
     }
   );
 }
-function getUTMParams2() {
-  if (typeof window === "undefined") return {};
-  const params = new URLSearchParams(window.location.search);
-  const utmParams = {};
-  for (const key of ["utm_source", "utm_medium", "utm_campaign"]) {
-    const value = params.get(key);
-    if (value) utmParams[key] = value;
-  }
-  return utmParams;
-}
 function ManagedForm({
   formId,
   projectId,