@sonordev/site-kit 6.4.0 → 7.0.0

package/dist/chunk-5C4WVOVO.js

@@ -0,0 +1,478 @@
+'use client';
+import { countStageViews, countStageQuestions, useFieldControls } from './chunk-JMRESWQT.js';
+import { HoneypotField } from './chunk-DXO6SBMD.js';
+import { DelightStyles, FormMomentum, FormField } from './chunk-QPEEKFCA.js';
+import { useFormLoadedAt, useFormTracking, submitForm, useRecaptchaWarmup, useForm } from './chunk-6CUFRMMF.js';
+import { isFieldVisible, validateField, isFieldComplete, isDisplayOnly } from './chunk-AQSNPZY4.js';
+import { DEFAULT_FORM_SUCCESS_MESSAGE } from './chunk-5SQK3D53.js';
+import { DEFAULT_HONEYPOT_FIELD } from './chunk-NJCTQH2P.js';
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+function FormClient({
+  config,
+  className,
+  onSuccess,
+  onError,
+  customRender,
+  experience,
+  defaultValues
+}) {
+  const [values, setValues] = useState(() => {
+    const defaults = {};
+    for (const field of config.fields || []) {
+      if (field.default_value !== void 0 && field.default_value !== null) {
+        defaults[field.slug] = field.default_value;
+      }
+    }
+    return { ...defaults, ...defaultValues || {} };
+  });
+  const [errors, setErrors] = useState({});
+  const [step, setStep] = useState(1);
+  const [stepDirection, setStepDirection] = useState("forward");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+  const [submitError, setSubmitError] = useState(null);
+  const [honeypotValue, setHoneypotValue] = useState("");
+  const [touched, setTouched] = useState({});
+  const honeypotFieldName = config.honeypot_field || DEFAULT_HONEYPOT_FIELD;
+  const formLoadedAt = useFormLoadedAt();
+  const isSubmittingRef = useRef(false);
+  const stageBeatCount = useMemo(() => countStageViews(config), [config]);
+  const questionCount = useMemo(() => countStageQuestions(config), [config]);
+  const requested = experience ?? (config.layout === "stage" ? "stage" : config.layout === "classic" ? "classic" : "spotlight");
+  const resolvedExperience = !customRender && questionCount > 0 && requested !== "classic" ? requested : "classic";
+  const fieldControls = useFieldControls(config.fields);
+  const [Celebration, setCelebration] = useState(null);
+  useEffect(() => {
+    if (!isSubmitting && !isComplete) return;
+    let cancelled = false;
+    import('./FormCelebration-OVGAGBKF.js').then((m) => {
+      if (!cancelled) setCelebration(() => m.FormCelebration);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isSubmitting, isComplete]);
+  const [Experience, setExperience] = useState(null);
+  useEffect(() => {
+    if (resolvedExperience === "classic") {
+      setExperience(null);
+      return;
+    }
+    let cancelled = false;
+    const load = resolvedExperience === "stage" ? import('./FormStage-OTPKEWID.js').then((m) => m.FormStage) : import('./FormSpotlight-QE3J3VB5.js').then((m) => m.FormSpotlight);
+    load.then((Component) => {
+      if (!cancelled) setExperience(() => Component);
+    }).catch((err) => {
+      console.error("[Forms] Experience failed to load; using classic form:", err);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [resolvedExperience]);
+  const currentFields = useMemo(() => {
+    if (!config.is_multi_step) {
+      return config.fields || [];
+    }
+    const currentStepConfig2 = config.steps?.find((s) => s.step_number === step);
+    if (!currentStepConfig2) return config.fields || [];
+    return (config.fields || []).filter((f) => f.step_id === currentStepConfig2.id);
+  }, [config, step]);
+  const isFieldVisible2 = useCallback(
+    (field) => isFieldVisible(field, values),
+    [values]
+  );
+  const validateField2 = useCallback(
+    (field) => validateField(field, values, isFieldVisible2),
+    [values, isFieldVisible2]
+  );
+  const fieldIsComplete = useCallback(
+    (field) => isFieldComplete(field, values, isFieldVisible2),
+    [values, isFieldVisible2]
+  );
+  const momentum = useMemo(() => {
+    const measurable = (config.fields || []).filter(
+      (f) => f.is_required && isFieldVisible2(f) && !isDisplayOnly(f)
+    );
+    return { done: measurable.filter(fieldIsComplete).length, total: measurable.length };
+  }, [config, isFieldVisible2, fieldIsComplete]);
+  const fieldBySlug = useMemo(
+    () => new Map((config.fields || []).map((f) => [f.slug, f])),
+    [config.fields]
+  );
+  const {
+    trackStepChange,
+    trackComplete,
+    trackFieldFocus: trackFocus,
+    trackFieldBlur,
+    trackFieldChange
+  } = useFormTracking({
+    formId: config.id,
+    // Alternate experiences report their unit (beat / field index) as the
+    // step — form_analytics becomes a drop-off funnel with zero API changes.
+    totalSteps: resolvedExperience === "stage" ? stageBeatCount : resolvedExperience === "spotlight" ? questionCount : config.total_steps,
+    // Same verdict as the valid tick and the momentum count.
+    isFieldComplete: (slug) => {
+      const field = fieldBySlug.get(slug);
+      return field ? fieldIsComplete(field) : false;
+    }
+  });
+  const validateStep = useCallback(() => {
+    const newErrors = {};
+    for (const field of currentFields) {
+      const error = validateField2(field);
+      if (error) {
+        newErrors[field.slug] = error;
+      }
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [currentFields, validateField2]);
+  const validateAll = useCallback(() => {
+    const allFields = config.fields || [];
+    const newErrors = {};
+    for (const field of allFields) {
+      const error = validateField2(field);
+      if (error) newErrors[field.slug] = error;
+    }
+    setErrors(newErrors);
+    if (Object.keys(newErrors).length === 0) return { ok: true, firstErrorStep: null };
+    let firstErrorStep = null;
+    if (config.is_multi_step && config.steps) {
+      const ordered = [...config.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 };
+  }, [config, validateField2]);
+  const buildVisibleValues = useCallback(() => {
+    const out = {};
+    for (const field of config.fields || []) {
+      if (!isFieldVisible2(field)) continue;
+      if (field.slug in values) out[field.slug] = values[field.slug];
+    }
+    return out;
+  }, [config, values, isFieldVisible2]);
+  const setFieldValue = useCallback((key, value) => {
+    setTouched((prev) => prev[key] ? prev : { ...prev, [key]: true });
+    setValues((prev) => ({ ...prev, [key]: value }));
+    trackFieldChange(key);
+    if (errors[key]) {
+      setErrors((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+    }
+  }, [errors, trackFieldChange]);
+  const nextStep = useCallback(() => {
+    if (!validateStep()) return false;
+    if (step < config.total_steps) {
+      const newStep = step + 1;
+      setStepDirection("forward");
+      setStep(newStep);
+      trackStepChange(newStep);
+      return true;
+    }
+    return false;
+  }, [step, config.total_steps, validateStep, trackStepChange]);
+  const prevStep = useCallback(() => {
+    if (step > 1) {
+      const newStep = step - 1;
+      setStepDirection("back");
+      setStep(newStep);
+      trackStepChange(newStep);
+    }
+  }, [step, trackStepChange]);
+  const goToStep = useCallback((targetStep) => {
+    if (targetStep >= 1 && targetStep <= config.total_steps) {
+      setStepDirection(targetStep < step ? "back" : "forward");
+      setStep(targetStep);
+      trackStepChange(targetStep);
+    }
+  }, [step, config.total_steps, trackStepChange]);
+  const submit = useCallback(async () => {
+    if (isSubmittingRef.current) return;
+    const { ok, firstErrorStep } = validateAll();
+    if (!ok) {
+      if (firstErrorStep != null) {
+        setStepDirection("back");
+        setStep(firstErrorStep);
+      }
+      return;
+    }
+    isSubmittingRef.current = true;
+    setIsSubmitting(true);
+    setSubmitError(null);
+    try {
+      const data = await submitForm({
+        config,
+        values: buildVisibleValues(),
+        honeypotValue: config.honeypot_enabled ? honeypotValue : "",
+        formLoadedAt: formLoadedAt()
+      });
+      trackComplete();
+      setIsComplete(true);
+      onSuccess?.(data);
+      if (config.redirect_url) {
+        window.location.href = config.redirect_url;
+      }
+    } 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);
+    }
+  }, [config, honeypotValue, validateAll, buildVisibleValues, trackComplete, onSuccess, onError]);
+  const progress = useMemo(() => {
+    return Math.round(step / config.total_steps * 100);
+  }, [step, config.total_steps]);
+  const currentStepConfig = useMemo(
+    () => config.steps?.find((s) => s.step_number === step),
+    [config.steps, step]
+  );
+  const stepPanelRef = useRef(null);
+  const hasNavigatedRef = useRef(false);
+  useEffect(() => {
+    if (!config.is_multi_step) return;
+    if (!hasNavigatedRef.current) {
+      hasNavigatedRef.current = true;
+      return;
+    }
+    stepPanelRef.current?.focus();
+  }, [step, config.is_multi_step]);
+  const trackFieldFocus = useRecaptchaWarmup(config, trackFocus);
+  const renderProps = {
+    config,
+    fields: currentFields,
+    step,
+    totalSteps: config.total_steps,
+    values,
+    errors,
+    isSubmitting,
+    progress,
+    nextStep,
+    prevStep,
+    goToStep,
+    submit,
+    setFieldValue,
+    isFieldVisible: isFieldVisible2,
+    trackFieldFocus,
+    trackFieldBlur
+  };
+  if (isComplete) {
+    const raw = config.success_message;
+    const message = typeof raw === "string" && raw.trim().length > 0 ? raw.trim() : DEFAULT_FORM_SUCCESS_MESSAGE;
+    if (Celebration) return /* @__PURE__ */ jsx(Celebration, { message, className });
+    return /* @__PURE__ */ jsx("div", { className, "data-sk-part": "celebration-fallback", role: "status", children: /* @__PURE__ */ jsx("p", { children: message }) });
+  }
+  if (customRender) {
+    return /* @__PURE__ */ jsx(Fragment, { children: customRender(renderProps) });
+  }
+  if (resolvedExperience !== "classic" && Experience) {
+    const bundle = {
+      config,
+      values,
+      errors,
+      touched,
+      isSubmitting,
+      submitError,
+      momentum,
+      className,
+      setFieldValue,
+      validateField: validateField2,
+      isFieldVisible: isFieldVisible2,
+      fieldIsComplete,
+      applyFieldError: (slug, message) => setErrors((prev) => ({ ...prev, [slug]: message })),
+      submit,
+      trackStepChange,
+      trackFieldFocus,
+      trackFieldBlur,
+      honeypot: config.honeypot_enabled ? /* @__PURE__ */ jsx(
+        HoneypotField,
+        {
+          name: honeypotFieldName,
+          value: honeypotValue,
+          onChange: setHoneypotValue
+        }
+      ) : null
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DelightStyles, {}),
+      /* @__PURE__ */ jsx(Experience, { ...bundle })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      "data-sk-state": isSubmitting ? "submitting" : "idle",
+      "data-sk-ready": momentum.total > 0 && momentum.done >= momentum.total && step >= config.total_steps ? "true" : void 0,
+      className: `sk-form ${className || ""}`,
+      method: "post",
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (step < config.total_steps) {
+          nextStep();
+        } else {
+          submit();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(DelightStyles, {}),
+        /* @__PURE__ */ jsx(FormMomentum, { done: momentum.done, total: momentum.total }),
+        config.is_multi_step && /* @__PURE__ */ jsxs("div", { className: "sk-form__progress", children: [
+          /* @__PURE__ */ jsxs("div", { className: "sk-form__progress-header", children: [
+            /* @__PURE__ */ jsxs("span", { className: "sk-form__progress-step", children: [
+              "Step ",
+              step,
+              " of ",
+              config.total_steps
+            ] }),
+            config.show_progress && /* @__PURE__ */ jsxs("span", { className: "sk-form__progress-percent", children: [
+              progress,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "sk-form__progress-track",
+              role: "progressbar",
+              "aria-valuemin": 1,
+              "aria-valuemax": config.total_steps,
+              "aria-valuenow": step,
+              "aria-valuetext": `Step ${step} of ${config.total_steps}`,
+              children: /* @__PURE__ */ jsx("div", { className: "sk-form__progress-bar", style: { width: `${progress}%` } })
+            }
+          ),
+          /* @__PURE__ */ jsx("ol", { className: "sk-form__progress-dots", "aria-hidden": "true", children: Array.from({ length: config.total_steps }, (_, i) => i + 1).map((n) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: "sk-form__progress-dot" + (n === step ? " sk-form__progress-dot--current" : "") + (n < step ? " sk-form__progress-dot--done" : "")
+            },
+            n
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: stepPanelRef,
+            tabIndex: -1,
+            className: "sk-form__step" + (config.is_multi_step ? ` sk-form__step--${stepDirection}` : ""),
+            children: [
+              config.is_multi_step && (currentStepConfig?.title || currentStepConfig?.description) && /* @__PURE__ */ jsxs("div", { className: "sk-form__step-intro", children: [
+                currentStepConfig.title && /* @__PURE__ */ jsx("h3", { className: "sk-form__step-title", children: currentStepConfig.title }),
+                currentStepConfig.description && /* @__PURE__ */ jsx("p", { className: "sk-form__step-description", children: currentStepConfig.description })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "sk-form__fields", children: currentFields.map((field) => {
+                if (!isFieldVisible2(field)) return null;
+                return /* @__PURE__ */ jsx("div", { className: `sk-form__field-wrapper sk-form__field-wrapper--${field.width || "full"}`, children: /* @__PURE__ */ jsx(
+                  FormField,
+                  {
+                    field,
+                    value: values[field.slug],
+                    error: errors[field.slug],
+                    showValid: !!touched[field.slug] && !errors[field.slug] && fieldIsComplete(field),
+                    onChange: (value) => setFieldValue(field.slug, value),
+                    onFocus: () => trackFieldFocus(field.slug),
+                    onBlur: () => trackFieldBlur(field.slug),
+                    controls: fieldControls
+                  }
+                ) }, field.id);
+              }) })
+            ]
+          },
+          step
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "sk-form__actions",
+            style: { justifyContent: step > 1 ? "space-between" : "flex-end" },
+            children: [
+              step > 1 && /* @__PURE__ */ jsx("button", { type: "button", className: "sk-form__btn sk-form__btn--back", onClick: prevStep, children: "Back" }),
+              /* @__PURE__ */ jsx("button", { type: "submit", className: "sk-form__btn sk-form__btn--submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : step < config.total_steps ? "Next" : config.submit_button_text })
+            ]
+          }
+        ),
+        submitError && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "sk-form__submit-error",
+            role: "alert",
+            style: { color: "var(--sk-error, #dc2626)", fontSize: 14, marginTop: 12 },
+            children: submitError
+          }
+        ),
+        config.honeypot_enabled && /* @__PURE__ */ jsx(
+          HoneypotField,
+          {
+            name: honeypotFieldName,
+            value: honeypotValue,
+            onChange: setHoneypotValue
+          }
+        )
+      ]
+    }
+  );
+}
+function ManagedForm({
+  formId,
+  projectId,
+  className,
+  onSuccess,
+  onError,
+  initialConfig,
+  experience,
+  defaultValues,
+  children
+}) {
+  const {
+    form,
+    isLoading,
+    fetchError
+  } = useForm(formId, {
+    projectId,
+    onSuccess,
+    onError,
+    initialForm: initialConfig,
+    // FormClient below owns this form's tracking — it renders the fields,
+    // drives step navigation and runs the submit, so it is the only thing that
+    // can report a real funnel. useForm is used here purely to FETCH the
+    // config; we never call its submit, so its analytics row could only ever
+    // open and abandon, never complete.
+    //
+    // Leaving this on is the double-count bug fixed in 4.2.2: two
+    // trackers per form, two form_analytics rows per page load, every
+    // start -> submission rate reported at half its true value.
+    trackAnalytics: false
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("p", { style: { color: "#6b7280" }, children: "Loading form..." }) });
+  }
+  if (fetchError || !form) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("p", { style: { color: "var(--sk-error, #dc2626)" }, children: fetchError?.message || "Form not found or inactive." }) });
+  }
+  return /* @__PURE__ */ jsx(
+    FormClient,
+    {
+      config: form,
+      className,
+      onSuccess,
+      onError,
+      customRender: children,
+      experience,
+      defaultValues
+    }
+  );
+}
+
+export { FormClient, ManagedForm };

package/dist/chunk-5SQK3D53.js

@@ -0,0 +1,24 @@
+// src/forms/defaultSuccessMessage.ts
+var DEFAULT_FORM_SUCCESS_MESSAGE = "Thank you for your submission! We will be in touch soon.";
+
+// src/forms/normalize-config.ts
+function normalizeFormConfig(data) {
+  if (data.steps) {
+    data.steps.sort((a, b) => (a.step_number || 0) - (b.step_number || 0));
+  }
+  if (data.fields) {
+    data.fields.sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0));
+  }
+  const total_steps = data.steps?.length || 1;
+  const is_multi_step = total_steps > 1;
+  const apiSuccess = typeof data.success_message === "string" ? data.success_message.trim() : "";
+  const success_message = apiSuccess || (typeof data.successMessage === "string" ? String(data.successMessage).trim() : "") || DEFAULT_FORM_SUCCESS_MESSAGE;
+  return {
+    ...data,
+    success_message,
+    total_steps,
+    is_multi_step
+  };
+}
+
+export { DEFAULT_FORM_SUCCESS_MESSAGE, normalizeFormConfig };

package/dist/chunk-5UZN5V52.js

@@ -0,0 +1,52 @@
+import { FormEnhancer } from './chunk-XZMVNORA.js';
+import { StaticForm } from './chunk-OPRBF7VE.js';
+import { serverApiFetch } from './chunk-X6F6SO4S.js';
+import { jsx } from 'react/jsx-runtime';
+
+async function ServerForm({
+  formId,
+  className,
+  experience,
+  enter = "fade",
+  enhance = true,
+  defer = true,
+  initialConfig,
+  configOptions,
+  defaultValues
+}) {
+  const config = initialConfig ?? await getFormConfig(formId, configOptions);
+  const shell = /* @__PURE__ */ jsx(StaticForm, { config, className });
+  if (!enhance) return shell;
+  return /* @__PURE__ */ jsx(
+    FormEnhancer,
+    {
+      formId,
+      initialConfig: config,
+      className,
+      experience,
+      defaultValues,
+      enter,
+      defer,
+      children: shell
+    }
+  );
+}
+
+// src/forms/server.ts
+async function getFormConfig(formIdOrSlug, options = {}) {
+  if (!formIdOrSlug) return null;
+  const data = await serverApiFetch(
+    "/api/public/forms/config",
+    {
+      method: "POST",
+      body: { formIdOrSlug },
+      revalidate: options.revalidate ?? 60,
+      apiKey: options.apiKey,
+      apiUrl: options.apiUrl,
+      logPrefix: "@sonordev/site-kit/forms"
+    }
+  );
+  return data && typeof data === "object" ? data : null;
+}
+
+export { ServerForm, getFormConfig };

package/dist/chunk-5YSI5KFD.js

@@ -0,0 +1,19 @@
+import { resolveSiteHost } from './chunk-FESKKJAS.js';
+import { configureSiteCredential, currentCredential } from './chunk-HPUXKMNR.js';
+
+// src/shared/publishCredential.ts
+function publishSiteCredential({
+  apiKey,
+  apiUrl = "https://api.sonor.io",
+  site,
+  debug = false
+}) {
+  if (typeof window === "undefined") return;
+  configureSiteCredential({ credential: apiKey, apiUrl });
+  window.__SITE_KIT_API_URL__ = apiUrl;
+  window.__SITE_KIT_API_KEY__ = currentCredential(apiKey);
+  window.__SITE_KIT_DEBUG__ = debug;
+  window.__SITE_KIT_SITE__ = site ?? resolveSiteHost();
+}
+
+export { publishSiteCredential };