@sonordev/site-kit 6.4.0 → 7.0.0

package/dist/chunk-6CUFRMMF.js

@@ -0,0 +1,937 @@
+'use client';
+import { isFieldVisible, validateField, isFieldComplete } from './chunk-AQSNPZY4.js';
+import { normalizeFormConfig } from './chunk-5SQK3D53.js';
+import { DEFAULT_HONEYPOT_FIELD } from './chunk-NJCTQH2P.js';
+import { onPageLeave } from './chunk-L2V5PUFN.js';
+import { uuid } from './chunk-GJWI74ZZ.js';
+import { sonorFetch, sonorBeacon } from './chunk-4WI3FU5L.js';
+import { useRef, useCallback, useEffect, useState, useMemo } from 'react';
+
+// src/forms/field-interactions.ts
+var MAX_TRACKED_FIELDS = 100;
+var MAX_FIELD_SLUG_LENGTH = 100;
+var FieldInteractionLog = class {
+  constructor() {
+    /**
+     * The field the visitor was on, reported as `abandonment_field` when they
+     * leave. The last FOCUSED field once the form reports focus; a headless form
+     * that never wires focus falls back to the last field whose value changed.
+     */
+    this.lastField = null;
+    this.entries = /* @__PURE__ */ new Map();
+    this.focusReported = false;
+    /** The one field holding focus, if any. Only one can, so this is a slot, not a flag per field. */
+    this.open = null;
+  }
+  /**
+   * Visitor moved focus into `slug`. Returns true when that's a new visit to
+   * the field; false for an untrackable slug or a field that already has focus.
+   */
+  focus(slug, now = Date.now()) {
+    if (this.open?.slug === slug) return false;
+    const entry = this.entry(slug);
+    if (!entry) return false;
+    this.close(now);
+    entry.focusCount++;
+    this.open = { slug, since: now };
+    this.focusReported = true;
+    this.lastField = slug;
+    return true;
+  }
+  /** Visitor moved focus out of `slug`. */
+  blur(slug, now = Date.now()) {
+    if (this.open?.slug === slug) this.close(now);
+  }
+  /**
+   * `slug`'s value changed. Counts as reaching the field even without a focus
+   * event: autofill, a custom renderer that doesn't report focus, a picker
+   * that sets the value from outside the input.
+   */
+  change(slug) {
+    if (!this.entry(slug)) return false;
+    if (!this.focusReported) this.lastField = slug;
+    return true;
+  }
+  get size() {
+    return this.entries.size;
+  }
+  /**
+   * Every field reached so far. Time for a field that still has focus counts
+   * up to `now`, so a report built as the page hides includes the field the
+   * visitor was sitting in.
+   */
+  snapshot(isComplete, now = Date.now()) {
+    const out = {};
+    for (const [slug, entry] of this.entries) {
+      const openMs = this.open?.slug === slug ? Math.max(0, now - this.open.since) : 0;
+      out[slug] = {
+        completed: safeIsComplete(isComplete, slug),
+        focusCount: entry.focusCount,
+        timeMs: Math.round(entry.timeMs + openMs)
+      };
+    }
+    return out;
+  }
+  close(now) {
+    if (!this.open) return;
+    const entry = this.entries.get(this.open.slug);
+    if (entry) entry.timeMs += Math.max(0, now - this.open.since);
+    this.open = null;
+  }
+  entry(slug) {
+    if (typeof slug !== "string" || slug.length === 0 || slug.length > MAX_FIELD_SLUG_LENGTH) return null;
+    const existing = this.entries.get(slug);
+    if (existing) return existing;
+    if (this.entries.size >= MAX_TRACKED_FIELDS) return null;
+    const created = { focusCount: 0, timeMs: 0 };
+    this.entries.set(slug, created);
+    return created;
+  }
+};
+function safeIsComplete(isComplete, slug) {
+  try {
+    return isComplete(slug) === true;
+  } catch {
+    return false;
+  }
+}
+
+// src/forms/tracking-session.ts
+var SESSION_GRACE_MS = 2e3;
+var activeSessions = /* @__PURE__ */ new Map();
+function acquireTrackingSession(formId, start) {
+  const existing = activeSessions.get(formId);
+  if (existing) {
+    if (existing.releaseTimer) {
+      clearTimeout(existing.releaseTimer);
+      existing.releaseTimer = null;
+    }
+    existing.refCount++;
+    return existing;
+  }
+  const sessionId = uuid();
+  const session = {
+    sessionId,
+    startedAt: Date.now(),
+    // Assigned below — declared here so the object shape is complete first.
+    analyticsId: null,
+    fields: new FieldInteractionLog(),
+    interacted: false,
+    completed: false,
+    abandonSent: false,
+    onEnd: null,
+    refCount: 1,
+    releaseTimer: null
+  };
+  activeSessions.set(formId, session);
+  session.analyticsId = start(sessionId);
+  return session;
+}
+function releaseTrackingSession(formId, session) {
+  session.refCount--;
+  if (session.refCount > 0) return;
+  if (session.releaseTimer) return;
+  session.releaseTimer = setTimeout(() => {
+    session.releaseTimer = null;
+    if (session.refCount <= 0 && activeSessions.get(formId) === session) {
+      activeSessions.delete(formId);
+      const onEnd = session.onEnd;
+      session.onEnd = null;
+      try {
+        onEnd?.();
+      } catch {
+      }
+    }
+  }, SESSION_GRACE_MS);
+  session.releaseTimer?.unref?.();
+}
+function noteActivity(session) {
+  if (session.completed) return;
+  session.interacted = true;
+  session.abandonSent = false;
+}
+function claimAbandon(session) {
+  if (session.completed || !session.interacted || session.abandonSent) return false;
+  session.abandonSent = true;
+  return true;
+}
+function markCompleted(session) {
+  session.completed = true;
+  session.abandonSent = true;
+}
+
+// src/forms/useFormTracking.ts
+function useFormTracking({
+  formId,
+  totalSteps,
+  enabled = true,
+  debug = false,
+  isFieldComplete: isFieldComplete2
+}) {
+  const sessionRef = useRef(null);
+  const sessionIdRef = useRef("");
+  const startTimeRef = useRef(0);
+  const stepStartTimeRef = useRef(0);
+  const stepTimesRef = useRef({});
+  const currentStepRef = useRef(1);
+  const maxStepRef = useRef(1);
+  const analyticsIdRef = useRef(null);
+  const isFieldCompleteRef = useRef(isFieldComplete2);
+  isFieldCompleteRef.current = isFieldComplete2;
+  const fieldReport = useCallback((session, now) => {
+    const check = isFieldCompleteRef.current;
+    return session.fields.snapshot((slug) => check ? check(slug) : false, now);
+  }, []);
+  useEffect(() => {
+    if (!enabled) return;
+    if (!formId) {
+      if (debug) console.warn("[Forms] Tracking skipped: formId is empty");
+      return;
+    }
+    const startTracking = async (sessionId) => {
+      const apiUrl = window.__SITE_KIT_API_URL__;
+      const apiKey = window.__SITE_KIT_API_KEY__;
+      if (!apiUrl || !apiKey) {
+        if (debug) console.error("[Forms] Missing API URL or API key");
+        return null;
+      }
+      try {
+        const response = await sonorFetch(
+          `${apiUrl}/api/public/forms/analytics/start`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              formId,
+              sessionId,
+              deviceType: getDeviceType()
+            })
+          },
+          { apiKey, retries: 0 }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const data = await response.json();
+        if (debug) console.log("[Forms] Started tracking:", data.id);
+        return data.id ?? null;
+      } catch (error) {
+        if (debug) console.error("[Forms] Error starting tracking:", error);
+        return null;
+      }
+    };
+    const session = acquireTrackingSession(formId, startTracking);
+    sessionRef.current = session;
+    sessionIdRef.current = session.sessionId;
+    startTimeRef.current = session.startedAt;
+    stepStartTimeRef.current = Date.now();
+    let joined = true;
+    void session.analyticsId.then((id) => {
+      if (joined) analyticsIdRef.current = id;
+    });
+    const reportAbandon = (analyticsId) => {
+      if (!analyticsId) return;
+      const apiUrl = window.__SITE_KIT_API_URL__;
+      const apiKey = window.__SITE_KIT_API_KEY__;
+      if (!apiUrl || !apiKey) return;
+      if (!claimAbandon(session)) return;
+      const now = Date.now();
+      stepTimesRef.current[currentStepRef.current] = Math.floor((now - stepStartTimeRef.current) / 1e3);
+      sonorBeacon(
+        `${apiUrl}/api/public/forms/analytics/abandon`,
+        {
+          analyticsId,
+          step: currentStepRef.current,
+          maxStep: maxStepRef.current,
+          stepTimes: stepTimesRef.current,
+          totalTimeSeconds: Math.floor((now - startTimeRef.current) / 1e3),
+          fieldInteractions: fieldReport(session, now),
+          abandonmentField: session.fields.lastField
+        },
+        apiKey
+      );
+      if (debug) console.log("[Forms] Abandonment tracked:", session.fields.lastField);
+    };
+    const stopLeaveListener = onPageLeave(() => reportAbandon(analyticsIdRef.current));
+    session.onEnd = () => {
+      void session.analyticsId.then(reportAbandon);
+    };
+    return () => {
+      joined = false;
+      stopLeaveListener();
+      releaseTrackingSession(formId, session);
+      sessionRef.current = null;
+    };
+  }, [formId, enabled, debug, fieldReport]);
+  const resolveAnalyticsId = useCallback(async () => {
+    if (analyticsIdRef.current) return analyticsIdRef.current;
+    const session = sessionRef.current;
+    if (!session) return null;
+    const id = await session.analyticsId;
+    if (id) analyticsIdRef.current = id;
+    return id;
+  }, []);
+  const trackFieldFocus = useCallback((slug) => {
+    const session = sessionRef.current;
+    if (!session || session.completed) return;
+    if (session.fields.focus(slug)) noteActivity(session);
+  }, []);
+  const trackFieldBlur = useCallback((slug) => {
+    sessionRef.current?.fields.blur(slug);
+  }, []);
+  const trackFieldChange = useCallback((slug) => {
+    const session = sessionRef.current;
+    if (!session || session.completed) return;
+    if (session.fields.change(slug)) noteActivity(session);
+  }, []);
+  const trackStepChange = useCallback(async (step) => {
+    if (!enabled) return;
+    const apiUrl = window.__SITE_KIT_API_URL__;
+    const apiKey = window.__SITE_KIT_API_KEY__;
+    if (!apiUrl || !apiKey) {
+      if (debug) console.error("[Forms] Missing API URL or API key");
+      return;
+    }
+    const now = Date.now();
+    const prevStepTime = Math.floor((now - stepStartTimeRef.current) / 1e3);
+    stepTimesRef.current[currentStepRef.current] = prevStepTime;
+    currentStepRef.current = step;
+    maxStepRef.current = Math.max(maxStepRef.current, step);
+    stepStartTimeRef.current = now;
+    const session = sessionRef.current;
+    if (session) noteActivity(session);
+    const analyticsId = await resolveAnalyticsId();
+    if (!analyticsId) return;
+    try {
+      const response = await sonorFetch(
+        `${apiUrl}/api/public/forms/analytics/step`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            analyticsId,
+            step,
+            maxStep: maxStepRef.current,
+            stepTimes: stepTimesRef.current,
+            ...session ? { fieldInteractions: fieldReport(session, Date.now()) } : {}
+          })
+        },
+        { apiKey, retries: 0 }
+      );
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      if (debug) console.log("[Forms] Step changed to:", step);
+    } catch (error) {
+      if (debug) console.error("[Forms] Error updating step:", error);
+    }
+  }, [enabled, debug, resolveAnalyticsId, fieldReport]);
+  const trackComplete = useCallback(async () => {
+    if (!enabled) return;
+    const session = sessionRef.current;
+    if (session) markCompleted(session);
+    const apiUrl = window.__SITE_KIT_API_URL__;
+    const apiKey = window.__SITE_KIT_API_KEY__;
+    if (!apiUrl || !apiKey) {
+      if (debug) console.error("[Forms] Missing API URL or API key");
+      return;
+    }
+    const now = Date.now();
+    const finalStepTime = Math.floor((now - stepStartTimeRef.current) / 1e3);
+    stepTimesRef.current[currentStepRef.current] = finalStepTime;
+    const fieldInteractions = session ? fieldReport(session, now) : void 0;
+    const analyticsId = await resolveAnalyticsId();
+    if (!analyticsId) return;
+    try {
+      const response = await sonorFetch(
+        `${apiUrl}/api/public/forms/analytics/complete`,
+        {
+          method: "POST",
+          // A form with a redirect_url navigates away right after submit, which
+          // cancels an ordinary in-flight fetch. And since completion now
+          // suppresses the abandon beacon, losing this would leave the row
+          // neither completed nor abandoned.
+          keepalive: true,
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            analyticsId,
+            totalSteps,
+            stepTimes: stepTimesRef.current,
+            totalTimeSeconds: Math.floor((now - startTimeRef.current) / 1e3),
+            ...fieldInteractions ? { fieldInteractions } : {}
+          })
+        },
+        { apiKey, retries: 0 }
+      );
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      if (debug) console.log("[Forms] Form completed");
+    } catch (error) {
+      if (debug) console.error("[Forms] Error completing tracking:", error);
+    }
+  }, [enabled, totalSteps, debug, resolveAnalyticsId, fieldReport]);
+  return {
+    trackStepChange,
+    trackComplete,
+    trackFieldFocus,
+    trackFieldBlur,
+    trackFieldChange,
+    sessionId: sessionIdRef.current
+  };
+}
+function getDeviceType() {
+  if (typeof window === "undefined") return "desktop";
+  const ua = navigator.userAgent;
+  if (/tablet|ipad|playbook|silk/i.test(ua)) return "tablet";
+  if (/mobile|iphone|ipod|android|blackberry|opera mini|iemobile/i.test(ua)) return "mobile";
+  return "desktop";
+}
+function useFormLoadedAt() {
+  const loadedAt = useRef(0);
+  useEffect(() => {
+    loadedAt.current = Date.now();
+  }, []);
+  return useCallback(() => loadedAt.current || Date.now(), []);
+}
+
+// src/forms/form-values.ts
+function mergeFormValues({
+  fields,
+  current,
+  initialValues = {}
+}) {
+  const slugs = /* @__PURE__ */ new Set();
+  const next = {};
+  for (const field of fields || []) {
+    if (!field || typeof field.slug !== "string") continue;
+    slugs.add(field.slug);
+    if (field.default_value !== void 0 && field.default_value !== null) {
+      next[field.slug] = field.default_value;
+    }
+  }
+  for (const [slug, value] of Object.entries(initialValues)) {
+    if (slugs.has(slug)) next[slug] = value;
+  }
+  for (const [slug, value] of Object.entries(current)) {
+    if (slugs.has(slug)) next[slug] = value;
+  }
+  return next;
+}
+function pruneErrors(errors, fields) {
+  const slugs = new Set((fields || []).map((f) => f?.slug).filter(Boolean));
+  const next = {};
+  for (const [slug, message] of Object.entries(errors)) {
+    if (slugs.has(slug)) next[slug] = message;
+  }
+  return next;
+}
+
+// src/forms/recaptcha.ts
+function getSiteKey(explicitSiteKey) {
+  if (typeof window === "undefined") return void 0;
+  if (explicitSiteKey) return 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) => {
+    if (typeof window === "undefined") {
+      resolve(null);
+      return;
+    }
+    const win = window;
+    if (win.grecaptcha?.enterprise) {
+      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) {
+      waitForReady();
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = `https://www.google.com/recaptcha/enterprise.js?render=${siteKey}`;
+    script.async = true;
+    script.onload = () => waitForReady();
+    script.onerror = () => {
+      clearTimeout(giveUp);
+      finish(null);
+    };
+    document.head.appendChild(script);
+  });
+}
+async function loadReady(siteKey) {
+  const grecaptcha = await loadScript(siteKey);
+  if (typeof grecaptcha?.enterprise?.ready !== "function") return null;
+  const ready = await Promise.race([
+    new Promise((resolve) => grecaptcha.enterprise.ready(() => resolve(true))),
+    new Promise((resolve) => setTimeout(() => resolve(false), RECAPTCHA_LOAD_TIMEOUT_MS))
+  ]);
+  if (!ready || typeof grecaptcha.enterprise.execute !== "function") return null;
+  return grecaptcha;
+}
+function preloadRecaptcha(explicitSiteKey) {
+  const siteKey = getSiteKey(explicitSiteKey);
+  if (!siteKey || typeof window === "undefined") return;
+  void loadReady(siteKey).catch(() => null);
+}
+async function getRecaptchaToken(explicitSiteKey) {
+  const siteKey = getSiteKey(explicitSiteKey);
+  if (!siteKey || typeof window === "undefined") return null;
+  try {
+    const grecaptcha = await loadReady(siteKey);
+    if (!grecaptcha) return null;
+    const token = await grecaptcha.enterprise.execute(siteKey, { action: "submit" });
+    return token || null;
+  } catch (err) {
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 800));
+      const win = window;
+      const token = await win.grecaptcha.enterprise.execute(siteKey, { action: "submit" });
+      return token || null;
+    } catch (retryErr) {
+      console.warn("[site-kit reCAPTCHA]", retryErr);
+      return null;
+    }
+  }
+}
+
+// src/forms/ga4-identity.ts
+function readCookie(jar, name) {
+  const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const match = jar.match(new RegExp(`(?:^|;\\s*)${escaped}=([^;]*)`));
+  return match ? decodeURIComponent(match[1]) : void 0;
+}
+function readGa4Identity() {
+  if (typeof document === "undefined") return {};
+  const jar = document.cookie || "";
+  if (!jar) return {};
+  const identity = {};
+  const ga = readCookie(jar, "_ga");
+  if (ga) {
+    const parts = ga.split(".");
+    if (parts.length >= 4) {
+      const clientId = `${parts[parts.length - 2]}.${parts[parts.length - 1]}`;
+      if (/^\d+\.\d+$/.test(clientId)) identity.gaClientId = clientId;
+    }
+  }
+  const sessions = {};
+  for (const raw of jar.split(";")) {
+    const cookie = raw.trim();
+    const eq = cookie.indexOf("=");
+    if (eq < 0) continue;
+    const name = cookie.slice(0, eq);
+    const container = /^_ga_([A-Z0-9]+)$/i.exec(name)?.[1];
+    if (!container) continue;
+    const parts = decodeURIComponent(cookie.slice(eq + 1)).split(".");
+    if (parts.length >= 3 && /^\d+$/.test(parts[2])) sessions[container] = parts[2];
+  }
+  if (Object.keys(sessions).length > 0) identity.gaSessions = sessions;
+  return identity;
+}
+
+// src/forms/submitForm.ts
+function getApiConfig() {
+  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : process.env.SONOR_API_URL || process.env.NEXT_PUBLIC_SONOR_API_URL || "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);
+  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,
+  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 = config.recaptcha_enabled ? await getRecaptchaToken(config.recaptcha_site_key) : null;
+  if (config.recaptcha_enabled && !recaptchaToken) {
+    throw new Error("Verification could not be completed. Please try again.");
+  }
+  const honeypotFieldName = config.honeypot_field || DEFAULT_HONEYPOT_FIELD;
+  const utm = getUTMParams();
+  const ga4 = readGa4Identity();
+  const payload = {
+    formId: config.id,
+    form_id: config.id,
+    data: {
+      ...values,
+      ...config.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,
+      // Anonymous visitor id (_sk_vid) — the same id Analytics/Signal stamp on
+      // page views, so the Sonor side can bind this lead to its browsing session
+      // (page -> lead attribution). Sent on every submission; null pre-hydration.
+      visitorId: typeof localStorage !== "undefined" ? localStorage.getItem("_sk_vid") : null,
+      recaptchaToken: recaptchaToken || void 0,
+      utmSource: utm.utm_source,
+      utmMedium: utm.utm_medium,
+      utmCampaign: utm.utm_campaign,
+      utmTerm: utm.utm_term,
+      utmContent: utm.utm_content,
+      ...ga4,
+      // Sub-site host — preserved on form_submissions for lead attribution
+      // across multi-site projects. Resolved by SiteKitClientProviders.
+      site: typeof window !== "undefined" ? window.__SITE_KIT_SITE__ || window.location.host : void 0,
+      _formLoadedAt: formLoadedAt
+    }
+  };
+  const response = await sonorFetch(
+    `${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 submitResult(data, values);
+}
+function submitResult(receipt, values) {
+  const r = receipt && typeof receipt === "object" ? receipt : {};
+  const id = typeof r.submissionId === "string" ? r.submissionId : typeof r.id === "string" ? r.id : "";
+  return {
+    success: r.success !== false,
+    id,
+    submissionId: id,
+    message: typeof r.message === "string" ? r.message : void 0,
+    redirectUrl: typeof r.redirectUrl === "string" ? r.redirectUrl : null,
+    data: { ...values }
+  };
+}
+function useRecaptchaWarmup(config, onFocus) {
+  const warmed = useRef(false);
+  const enabled = !!config?.recaptcha_enabled;
+  const siteKey = config?.recaptcha_site_key;
+  return useCallback(
+    (slug) => {
+      if (enabled && !warmed.current) {
+        warmed.current = true;
+        preloadRecaptcha(siteKey);
+      }
+      onFocus(slug);
+    },
+    [enabled, siteKey, onFocus]
+  );
+}
+
+// src/forms/useForm.ts
+function useForm(formIdOrSlug, options = {}) {
+  const {
+    projectId: optionsProjectId,
+    onSuccess,
+    onError,
+    initialValues = {},
+    redirectUrl,
+    initialForm,
+    trackAnalytics = true
+  } = options;
+  const projectId = optionsProjectId || (typeof window !== "undefined" ? window.__SITE_KIT_PROJECT_ID__ : void 0);
+  const [form, setForm] = useState(
+    () => initialForm ? normalizeFormConfig(initialForm) : null
+  );
+  const [isLoading, setIsLoading] = useState(!initialForm);
+  const [fetchError, setFetchError] = useState(null);
+  const [values, setValuesState] = useState(() => {
+    if (!initialForm) return initialValues;
+    const defaults = {};
+    for (const field of initialForm.fields || []) {
+      if (field.default_value !== void 0 && field.default_value !== null) {
+        defaults[field.slug] = field.default_value;
+      }
+    }
+    return { ...defaults, ...initialValues };
+  });
+  const [errors, setErrors] = useState({});
+  const [step, setStep] = useState(1);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+  const [submitError, setSubmitError] = useState(null);
+  const isSubmittingRef = useRef(false);
+  const formLoadedAt = useFormLoadedAt();
+  const totalSteps = form?.total_steps || 1;
+  const isMultiStep = form?.is_multi_step || false;
+  useEffect(() => {
+    const initialMatches = initialForm && (initialForm.slug === formIdOrSlug || initialForm.id === formIdOrSlug);
+    if (initialMatches) {
+      const siteKey = initialForm.recaptcha_site_key;
+      if (typeof window !== "undefined" && siteKey) {
+        window.__SITE_KIT_RECAPTCHA_SITE_KEY__ = siteKey;
+      }
+      return;
+    }
+    const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : "https://api.sonor.io";
+    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 or set SONOR_API_KEY.");
+        }
+        const url = `${apiUrl}/api/public/forms/config`;
+        const init = {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            formIdOrSlug
+          })
+        };
+        const response = await sonorFetch(url, init, { apiKey, retries: 3, timeoutMs: 15e3 });
+        if (!response.ok) {
+          throw new Error(`Failed to fetch form: ${response.statusText}`);
+        }
+        const data = await response.json();
+        if (!data) throw new Error("Form not found");
+        if (typeof window !== "undefined" && data.recaptcha_site_key) {
+          ;
+          window.__SITE_KIT_RECAPTCHA_SITE_KEY__ = data.recaptcha_site_key;
+        }
+        setForm(normalizeFormConfig(data));
+        const nextFields = data.fields || [];
+        setValuesState(
+          (prev) => mergeFormValues({ fields: nextFields, current: prev, initialValues })
+        );
+        setErrors((prev) => pruneErrors(prev, nextFields));
+      } catch (err) {
+        setFetchError(err);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchForm();
+  }, [formIdOrSlug, projectId]);
+  const allFields = useMemo(() => form?.fields || [], [form]);
+  const fields = 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 isFieldVisible2 = useCallback(
+    (field) => isFieldVisible(field, values),
+    [values]
+  );
+  const visibleFields = useMemo(() => {
+    return fields.filter(isFieldVisible2);
+  }, [fields, isFieldVisible2]);
+  const validateField2 = useCallback(
+    (field) => validateField(field, values, isFieldVisible2),
+    [values, isFieldVisible2]
+  );
+  const fieldBySlug = useMemo(
+    () => new Map(allFields.map((f) => [f.slug, f])),
+    [allFields]
+  );
+  const {
+    trackStepChange,
+    trackComplete,
+    trackFieldFocus: trackFocus,
+    trackFieldBlur,
+    trackFieldChange
+  } = useFormTracking({
+    formId: form?.id || "",
+    totalSteps,
+    enabled: trackAnalytics,
+    isFieldComplete: (slug) => {
+      const field = fieldBySlug.get(slug);
+      return field ? isFieldComplete(field, values, isFieldVisible2) : false;
+    }
+  });
+  const trackFieldFocus = useRecaptchaWarmup(form, trackFocus);
+  const validate = useCallback(() => {
+    const newErrors = {};
+    for (const field of fields) {
+      const error = validateField2(field);
+      if (error) {
+        newErrors[field.slug] = error;
+      }
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [fields, validateField2]);
+  const validateAll = useCallback(() => {
+    const newErrors = {};
+    for (const field of allFields) {
+      const error = validateField2(field);
+      if (error) newErrors[field.slug] = error;
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [allFields, validateField2]);
+  const buildVisibleValues = useCallback(() => {
+    const out = {};
+    for (const field of allFields) {
+      if (!isFieldVisible2(field)) continue;
+      if (field.slug in values) out[field.slug] = values[field.slug];
+    }
+    return out;
+  }, [allFields, values, isFieldVisible2]);
+  const setFieldValue = useCallback((key, value) => {
+    setValuesState((prev) => ({ ...prev, [key]: value }));
+    trackFieldChange(key);
+    setErrors((prev) => {
+      if (prev[key]) {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      }
+      return prev;
+    });
+  }, [trackFieldChange]);
+  const setValues = useCallback((newValues) => {
+    setValuesState((prev) => ({ ...prev, ...newValues }));
+  }, []);
+  const clearErrors = useCallback(() => {
+    setErrors({});
+  }, []);
+  const canGoNext = step < totalSteps;
+  const canGoPrev = step > 1;
+  const isLastStep = step === totalSteps;
+  const progress = Math.round(step / totalSteps * 100);
+  const nextStep = useCallback(() => {
+    if (!validate()) return false;
+    if (step < totalSteps) {
+      const newStep = step + 1;
+      setStep(newStep);
+      trackStepChange(newStep);
+      return true;
+    }
+    return false;
+  }, [step, totalSteps, validate, trackStepChange]);
+  const prevStep = useCallback(() => {
+    if (step > 1) {
+      const newStep = step - 1;
+      setStep(newStep);
+      trackStepChange(newStep);
+    }
+  }, [step, trackStepChange]);
+  const goToStep = useCallback((targetStep) => {
+    if (targetStep >= 1 && targetStep <= totalSteps) {
+      setStep(targetStep);
+      trackStepChange(targetStep);
+    }
+  }, [totalSteps, trackStepChange]);
+  const submit = useCallback(async () => {
+    if (!form) return;
+    if (isSubmittingRef.current) return;
+    if (!validateAll()) return;
+    isSubmittingRef.current = true;
+    setIsSubmitting(true);
+    setSubmitError(null);
+    try {
+      const data = await submitForm({
+        config: form,
+        values: buildVisibleValues(),
+        honeypotValue: "",
+        formLoadedAt: formLoadedAt()
+      });
+      trackComplete();
+      setIsComplete(true);
+      onSuccess?.(data);
+      const finalRedirect = redirectUrl !== false ? redirectUrl || form.redirect_url : void 0;
+      if (finalRedirect) {
+        window.location.href = finalRedirect;
+      }
+    } 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, validateAll, buildVisibleValues, trackComplete, onSuccess, onError, redirectUrl]);
+  const reset = useCallback(() => {
+    setValuesState(initialValues);
+    setErrors({});
+    setStep(1);
+    setIsComplete(false);
+    setSubmitError(null);
+  }, [initialValues]);
+  return {
+    form,
+    isLoading,
+    fetchError,
+    submitError,
+    allFields,
+    fields,
+    visibleFields,
+    values,
+    errors,
+    setFieldValue,
+    setValues,
+    clearErrors,
+    step,
+    totalSteps,
+    isMultiStep,
+    progress,
+    nextStep,
+    prevStep,
+    goToStep,
+    canGoNext,
+    canGoPrev,
+    isLastStep,
+    validate,
+    validateField: validateField2,
+    isFieldVisible: isFieldVisible2,
+    submit,
+    isSubmitting,
+    isComplete,
+    reset,
+    trackFieldFocus,
+    trackFieldBlur
+  };
+}
+
+export { submitForm, useForm, useFormLoadedAt, useFormTracking, useRecaptchaWarmup };