@usefillo/react 0.8.0 → 0.9.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ComponentType, ReactNode, ReactElement } from 'react';
 import * as _usefillo_core from '@usefillo/core';
-import { FormSchema, FilloClient, ResponseData, FieldValue, FormPage, Block, FormStatus, FieldKind, Field, CustomField, FormTheme, FilloAppearance, FilloRendererStrings, FilloRespondent, FilloError, CodeForm, FormSettings, Condition, TextField, PhoneField, NumberField, ChoiceField, SelectOption, CheckboxField, RatingField, LinearScaleField, RankingField, SignatureField, DateField, FileUploadField as FileUploadField$1, HiddenField } from '@usefillo/core';
+import { FormSchema, FilloClient, ResponseData, FieldValue, FormPage, Block, FormStatus, FieldKind, Field, CustomField, FormTheme, FilloAppearance, FilloRendererStrings, FilloRespondent, ChallengeConfig, FilloError, CodeForm, FormSettings, Condition, TextField, PhoneField, NumberField, ChoiceField, SelectOption, CheckboxField, RatingField, LinearScaleField, RankingField, SignatureField, DateField, FileUploadField as FileUploadField$1, HiddenField } from '@usefillo/core';
 export { CodeForm, Field, FieldValue, FileValue, FilloAppearance, FilloClient, FilloError, FilloJsxError, FilloRendererStrings, FilloSlot, FilloStrings, FormSchema, FormStatus, FormTheme, ProvisionWorkspaceResult, PublishedForm, ResponseData, SlotState, createClient, defineForm, provisionWorkspace, when } from '@usefillo/core';
 
 /**
@@ -136,6 +136,13 @@ interface FilloFormBaseProps {
      * loads).
      */
     respondent?: FilloRespondent;
+    /**
+     * Human-verification challenge config (public site key + provider). Normally
+     * the SDK reads this from the form fetch automatically; pass it explicitly
+     * only when you render an inline `form` schema and still want the widget (the
+     * hosted page does this). The SECRET key stays server-side — never passed here.
+     */
+    challenge?: ChallengeConfig;
     onChange?: (data: ResponseData) => void;
     onSubmitted?: (responseId: string | undefined, data: ResponseData) => void;
     /** Observe load and code-form sync failures (otherwise only logged). */
@@ -286,6 +293,12 @@ interface ControllerOptions {
      * dashboard, webhooks, and integrations can say who answered.
      */
     respondent?: FilloRespondent;
+    /** True when the form requires a human-verification challenge (Turnstile). */
+    challengeRequired?: boolean;
+    /** Read the current challenge token from the rendered widget (lazy). */
+    getChallengeToken?: () => string | undefined;
+    /** The server rejected the challenge — reset the widget for a fresh token. */
+    onChallengeFailed?: () => void;
 }
 /**
  * React binding for the framework-agnostic engine in @usefillo/core

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/FilloForm.tsx
-import { useEffect as useEffect7, useId as useId2, useMemo as useMemo5, useRef as useRef6, useState as useState6 } from "react";
+import { useCallback, useEffect as useEffect8, useId as useId2, useMemo as useMemo5, useRef as useRef7, useState as useState6 } from "react";
 import {
   FilloError as FilloError2,
   createClient,
@@ -10,7 +10,8 @@ import {
   needsExplicitSubmit,
   normalizeFormSchema,
   normalizeFormTheme,
-  visibleFields as visibleFields2
+  reachableFields,
+  reachablePageSequence
 } from "@usefillo/core";
 import { resolveStrings, slotClass as slotClass3 } from "@usefillo/core";
 
@@ -127,7 +128,12 @@ function useFilloController(options) {
       surface: options.surface ?? "headless",
       // Wrapped so the engine (created once) always calls the latest resolver.
       resolveFormId: options.resolveFormId ? () => optsRef.current.resolveFormId() : void 0,
-      respondent: options.respondent
+      respondent: options.respondent,
+      // Challenge wiring read through optsRef so the engine (created once) sees
+      // the latest token/reset each submit — the widget solves after mount.
+      challengeRequired: options.challengeRequired,
+      getChallengeToken: () => optsRef.current.getChallengeToken?.(),
+      onChallengeFailed: () => optsRef.current.onChallengeFailed?.()
     });
   }
   const store = storeRef.current;
@@ -276,6 +282,7 @@ function useCodeFormSync(form, client, onError, options) {
         formId: r.formId,
         status: r.status ?? null,
         branding: r.branding,
+        challenge: r.challenge,
         error: null,
         noticeError,
         staged: Boolean(r.staged),
@@ -325,6 +332,7 @@ function useCodeFormSync(form, client, onError, options) {
     formId: synced.formId,
     status: synced.status,
     branding: synced.branding,
+    challenge: synced.challenge,
     error: synced.error,
     noticeError: synced.noticeError,
     syncing: Boolean(syncKey) && !synced.settled,
@@ -1899,8 +1907,127 @@ function FormField({
   );
 }
 
+// src/turnstile.tsx
+import { useEffect as useEffect7, useRef as useRef6 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SCRIPT_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+var SCRIPT_ID = "fillo-turnstile-script";
+var scriptPromise = null;
+function turnstileGlobal() {
+  return globalThis.turnstile;
+}
+function loadTurnstileScript() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return Promise.reject(new Error("Turnstile needs a browser"));
+  }
+  if (turnstileGlobal()) return Promise.resolve();
+  if (scriptPromise) return scriptPromise;
+  scriptPromise = new Promise((resolve, reject) => {
+    const onReady = () => {
+      if (turnstileGlobal()) resolve();
+      else reject(new Error("Turnstile loaded without its global"));
+    };
+    const existing = document.getElementById(SCRIPT_ID);
+    if (existing) {
+      if (turnstileGlobal()) {
+        resolve();
+        return;
+      }
+      existing.addEventListener("load", onReady, { once: true });
+      existing.addEventListener(
+        "error",
+        () => reject(new Error("Turnstile script failed to load")),
+        { once: true }
+      );
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = SCRIPT_ID;
+    script.src = SCRIPT_SRC;
+    script.async = true;
+    script.defer = true;
+    script.addEventListener("load", onReady, { once: true });
+    script.addEventListener(
+      "error",
+      () => {
+        script.remove();
+        scriptPromise = null;
+        reject(new Error("Turnstile script failed to load"));
+      },
+      { once: true }
+    );
+    document.head.appendChild(script);
+  });
+  return scriptPromise;
+}
+function TurnstileWidget({
+  siteKey,
+  onToken,
+  onError,
+  registerReset,
+  className
+}) {
+  const containerRef = useRef6(null);
+  const widgetIdRef = useRef6(null);
+  const onTokenRef = useRef6(onToken);
+  onTokenRef.current = onToken;
+  const onErrorRef = useRef6(onError);
+  onErrorRef.current = onError;
+  const registerResetRef = useRef6(registerReset);
+  registerResetRef.current = registerReset;
+  useEffect7(() => {
+    let cancelled = false;
+    loadTurnstileScript().then(() => {
+      if (cancelled || !containerRef.current) return;
+      const api = turnstileGlobal();
+      if (!api) {
+        onErrorRef.current?.();
+        return;
+      }
+      const clearAndReset = () => {
+        onTokenRef.current(void 0);
+        if (widgetIdRef.current) api.reset(widgetIdRef.current);
+      };
+      widgetIdRef.current = api.render(containerRef.current, {
+        sitekey: siteKey,
+        theme: "auto",
+        callback: (token) => onTokenRef.current(token),
+        "error-callback": () => {
+          onTokenRef.current(void 0);
+          onErrorRef.current?.();
+        },
+        "expired-callback": clearAndReset,
+        "timeout-callback": clearAndReset
+      });
+      registerResetRef.current?.(clearAndReset);
+    }).catch(() => {
+      if (!cancelled) onErrorRef.current?.();
+    });
+    return () => {
+      cancelled = true;
+      const api = turnstileGlobal();
+      if (widgetIdRef.current && api) {
+        try {
+          api.remove(widgetIdRef.current);
+        } catch {
+        }
+      }
+      widgetIdRef.current = null;
+      onTokenRef.current(void 0);
+    };
+  }, [siteKey]);
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      "data-fillo": "turnstile"
+    }
+  );
+}
+
 // src/FilloForm.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function themeProps(theme) {
   const safeTheme = normalizeFormTheme(theme);
   if (!safeTheme) return {};
@@ -1973,6 +2100,7 @@ function FilloForm(props) {
     formId: syncedFormId,
     status: syncedStatus,
     branding: syncedBranding,
+    challenge: syncedChallenge,
     error: syncError,
     noticeError: syncNoticeError,
     syncing: codeFormSyncing,
@@ -1986,12 +2114,12 @@ function FilloForm(props) {
   });
   const renderResolvedSnapshot = Boolean(resolvedSchema && !isDevEnv());
   const inlineSchema = codeForm ? renderResolvedSnapshot ? resolvedSchema : codeForm.schema : form;
-  const onErrorRef = useRef6(onError);
-  useEffect7(() => {
+  const onErrorRef = useRef7(onError);
+  useEffect8(() => {
     onErrorRef.current = onError;
   });
   const needsFetch = !inlineSchema && Boolean(client && formId);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!needsFetch || !client || !formId) {
       setLoaded(null);
       setLoadFailure(null);
@@ -2007,7 +2135,8 @@ function FilloForm(props) {
         schema: published.schema,
         theme: published.theme,
         closed: Boolean(published.closed),
-        branding: published.branding ?? null
+        branding: published.branding ?? null,
+        challenge: published.challenge ?? null
       });
     }).catch((err) => {
       if (cancelled) return;
@@ -2029,25 +2158,25 @@ function FilloForm(props) {
   const theme = props.appearance?.theme ?? props.theme ?? resolvedCodeTheme ?? currentLoaded?.theme ?? void 0;
   if (normalized && !normalized.ok) {
     const error = new FilloError2(`This form could not be rendered: ${normalized.error}`, 422);
-    if (props.renderError) return /* @__PURE__ */ jsx5(Fragment2, { children: props.renderError(error) });
-    return /* @__PURE__ */ jsx5("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: strings.renderFailed });
+    if (props.renderError) return /* @__PURE__ */ jsx6(Fragment2, { children: props.renderError(error) });
+    return /* @__PURE__ */ jsx6("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: strings.renderFailed });
   }
   if (loadError) {
     if (props.renderError) {
-      return /* @__PURE__ */ jsx5(Fragment2, { children: props.renderError(loadError) });
+      return /* @__PURE__ */ jsx6(Fragment2, { children: props.renderError(loadError) });
     }
     const message = loadError.status === 404 ? strings.loadFailedNotFound : loadError.status === 0 ? strings.loadFailedNetwork : strings.loadFailed;
-    return /* @__PURE__ */ jsx5("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: message });
+    return /* @__PURE__ */ jsx6("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: message });
   }
   if (currentLoaded?.closed) {
-    return /* @__PURE__ */ jsx5("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx5("p", { className: "fillo-closed", children: strings.closed }) });
+    return /* @__PURE__ */ jsx6("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx6("p", { className: "fillo-closed", children: strings.closed }) });
   }
   const canonicalSyncError = codeForm && syncError && !props.skipValidation ? syncError : null;
   if (canonicalSyncError && props.renderError) {
-    return /* @__PURE__ */ jsx5(Fragment2, { children: props.renderError(canonicalSyncError) });
+    return /* @__PURE__ */ jsx6(Fragment2, { children: props.renderError(canonicalSyncError) });
   }
   if (canonicalSyncError && !isDevEnv()) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       "div",
       {
         className: `fillo-form fillo-form--error ${props.className ?? ""}`,
@@ -2062,8 +2191,8 @@ function FilloForm(props) {
   const notPublished = Boolean(codeForm) && syncedStatus === "draft" && !props.skipValidation;
   if (notPublished && !isDevEnv()) {
     const error = new FilloError2("This form isn't published yet.", 403);
-    if (props.renderError) return /* @__PURE__ */ jsx5(Fragment2, { children: props.renderError(error) });
-    return /* @__PURE__ */ jsx5("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx5("p", { className: "fillo-closed", children: strings.notLive }) });
+    if (props.renderError) return /* @__PURE__ */ jsx6(Fragment2, { children: props.renderError(error) });
+    return /* @__PURE__ */ jsx6("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx6("p", { className: "fillo-closed", children: strings.notLive }) });
   }
   const awaitingCanonical = Boolean(codeForm && codeFormSyncing && !props.skipValidation);
   if (!isDevEnv() && awaitingCanonical || !schema) {
@@ -2074,16 +2203,17 @@ function FilloForm(props) {
         "aria-busy": "true",
         ...themeProps(theme),
         children: [
-          /* @__PURE__ */ jsx5("div", { className: "fillo-skeleton" }),
-          /* @__PURE__ */ jsx5("div", { className: "fillo-skeleton" }),
-          /* @__PURE__ */ jsx5("div", { className: "fillo-skeleton fillo-skeleton--short" })
+          /* @__PURE__ */ jsx6("div", { className: "fillo-skeleton" }),
+          /* @__PURE__ */ jsx6("div", { className: "fillo-skeleton" }),
+          /* @__PURE__ */ jsx6("div", { className: "fillo-skeleton fillo-skeleton--short" })
         ]
       }
     );
   }
   const branding = codeForm ? syncedBranding : currentLoaded?.branding;
   const poweredBy = branding?.poweredBy ?? true;
-  return /* @__PURE__ */ jsx5(
+  const challenge = props.challenge ?? (codeForm ? syncedChallenge : currentLoaded?.challenge) ?? void 0;
+  return /* @__PURE__ */ jsx6(
     ResolvedForm,
     {
       ...props,
@@ -2096,33 +2226,34 @@ function FilloForm(props) {
       brandHref: branding?.href,
       draftNotice: notPublished,
       stagedNotice: codeChangesStaged,
-      syncErrorNotice: syncError ?? syncNoticeError ?? void 0
+      syncErrorNotice: syncError ?? syncNoticeError ?? void 0,
+      challenge
     }
   );
 }
 function PoweredBy({ label, href }) {
-  return /* @__PURE__ */ jsx5("a", { className: "fillo-powered", href: badgeUrl(href), target: "_blank", rel: "noopener noreferrer", children: label ?? "Powered by Fillo" });
+  return /* @__PURE__ */ jsx6("a", { className: "fillo-powered", href: badgeUrl(href), target: "_blank", rel: "noopener noreferrer", children: label ?? "Powered by Fillo" });
 }
 function isDevEnv() {
   return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
 }
 function DevNoClientNotice() {
   return /* @__PURE__ */ jsxs5("div", { className: "fillo-devwarning", role: "alert", children: [
-    /* @__PURE__ */ jsx5("strong", { children: "No Fillo client connected." }),
+    /* @__PURE__ */ jsx6("strong", { children: "No Fillo client connected." }),
     " This form is render-only and won\u2019t save responses. Pass a ",
-    /* @__PURE__ */ jsx5("code", { children: "client" }),
+    /* @__PURE__ */ jsx6("code", { children: "client" }),
     " to collect them in Fillo, or forward them with webhooks. (This notice only appears in development.)"
   ] });
 }
 function DevDraftNotice() {
   return /* @__PURE__ */ jsxs5("div", { className: "fillo-devwarning", role: "alert", children: [
-    /* @__PURE__ */ jsx5("strong", { children: "Draft form." }),
+    /* @__PURE__ */ jsx6("strong", { children: "Draft form." }),
     " It renders here, but it won\u2019t accept responses until you publish it in your Fillo dashboard. (This notice only appears in development.)"
   ] });
 }
 function DevStagedNotice() {
   return /* @__PURE__ */ jsxs5("div", { className: "fillo-devwarning", role: "alert", children: [
-    /* @__PURE__ */ jsx5("strong", { children: "Code changes are staged." }),
+    /* @__PURE__ */ jsx6("strong", { children: "Code changes are staged." }),
     " This local preview is not the live form yet. Publish the changes in Fillo before deploying them for respondents."
   ] });
 }
@@ -2141,9 +2272,23 @@ function DevSyncErrorNotice({ error }) {
 function ResolvedForm(props) {
   const { schema, theme } = props;
   const instanceId = useId2().replace(/:/g, "");
-  const hpRef = useRef6(null);
+  const hpRef = useRef7(null);
   const codeForm = isCodeForm2(props.form) ? props.form : null;
   const client = props.client;
+  const challenge = props.challenge;
+  const challengeRequired = Boolean(challenge);
+  const challengeTokenRef = useRef7(void 0);
+  const [challengeToken, setChallengeToken] = useState6(void 0);
+  const [challengeError, setChallengeError] = useState6(false);
+  const resetChallengeRef = useRef7(void 0);
+  const handleChallengeToken = useCallback((token) => {
+    challengeTokenRef.current = token;
+    setChallengeToken(token);
+    if (token) setChallengeError(false);
+  }, []);
+  const registerChallengeReset = useCallback((reset) => {
+    resetChallengeRef.current = reset;
+  }, []);
   const resolveFormId = useMemo5(
     () => codeForm && client?.key ? (
       // bypassCache: a stale cached formId must not be trusted at submit time.
@@ -2213,25 +2358,31 @@ function ResolvedForm(props) {
     // "default", never the bare-engine "headless".
     surface: "default",
     resolveFormId,
-    respondent: props.respondent
+    respondent: props.respondent,
+    challengeRequired,
+    getChallengeToken: () => challengeTokenRef.current,
+    onChallengeFailed: () => {
+      handleChallengeToken(void 0);
+      resetChallengeRef.current?.();
+    }
   });
   useDraftFlush(api);
   const themed = useMemo5(() => themeProps(theme), [theme]);
   const settings = schema.settings;
   const submitted = api.status === "submitted";
   const liveSubmit = submitted && !api.restoredSubmission;
-  useEffect7(() => {
+  useEffect8(() => {
     if (!liveSubmit || !settings.redirectUrl || typeof window === "undefined") return;
     const url = safeHttpUrl(settings.redirectUrl);
     if (url) window.location.assign(url);
   }, [liveSubmit, settings.redirectUrl]);
-  const successRef = useRef6(null);
-  useEffect7(() => {
+  const successRef = useRef7(null);
+  useEffect8(() => {
     if (liveSubmit) successRef.current?.focus();
   }, [liveSubmit]);
-  const blocksRef = useRef6(null);
-  const prevPageIndex = useRef6(api.pageIndex);
-  useEffect7(() => {
+  const blocksRef = useRef7(null);
+  const prevPageIndex = useRef7(api.pageIndex);
+  useEffect8(() => {
     if (prevPageIndex.current === api.pageIndex) return;
     prevPageIndex.current = api.pageIndex;
     blocksRef.current?.focus();
@@ -2261,22 +2412,29 @@ function ResolvedForm(props) {
               className: slotClass3("fillo-success", appearance, { slot: "success", status: "submitted" }),
               "data-fillo": "success",
               children: [
-                /* @__PURE__ */ jsx5("div", { className: "fillo-success-mark", "aria-hidden": "true", children: "\u2713" }),
-                /* @__PURE__ */ jsx5("h2", { className: "fillo-success-title", children: settings.successTitle ?? strings.successTitle }),
-                /* @__PURE__ */ jsx5("p", { className: "fillo-success-message", children: api.duplicateSubmission ? strings.alreadyAnswered : settings.successMessage ?? strings.successMessage })
+                /* @__PURE__ */ jsx6("div", { className: "fillo-success-mark", "aria-hidden": "true", children: "\u2713" }),
+                /* @__PURE__ */ jsx6("h2", { className: "fillo-success-title", children: settings.successTitle ?? strings.successTitle }),
+                /* @__PURE__ */ jsx6("p", { className: "fillo-success-message", children: api.duplicateSubmission ? strings.alreadyAnswered : settings.successMessage ?? strings.successMessage })
               ]
             }
           ),
-          props.poweredBy && /* @__PURE__ */ jsx5(PoweredBy, { label: props.brandLabel, href: props.brandHref })
+          props.poweredBy && /* @__PURE__ */ jsx6(PoweredBy, { label: props.brandLabel, href: props.brandHref })
         ]
       }
     );
   }
   const multiPage = api.pageCount > 1;
   const autoSubmit = settings.submitMode === "auto";
-  const showPrimaryButton = !autoSubmit || !api.isLastPage || needsExplicitSubmit(visibleFields2(api.form, api.data));
+  const showChallenge = challengeRequired && api.isLastPage;
+  const showPrimaryButton = !autoSubmit || !api.isLastPage || needsExplicitSubmit(reachableFields(api.form, api.data)) || // A challenge needs an explicit Submit even on an otherwise button-less
+  // auto-submit form — you can't one-tap past a human check.
+  showChallenge;
   const showFooter = showPrimaryButton || multiPage && !api.isFirstPage;
-  return /* @__PURE__ */ jsx5(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx5(FilloStringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx5(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx5(FilloInstanceIdContext.Provider, { value: instanceId, children: /* @__PURE__ */ jsxs5(
+  const progressSeq = reachablePageSequence(api.form, api.data);
+  const progressTotal = Math.max(progressSeq.length, 1);
+  const progressPos = progressSeq.indexOf(api.page.id);
+  const progressStep = progressPos >= 0 ? progressPos + 1 : Math.min(api.pageIndex + 1, progressTotal);
+  return /* @__PURE__ */ jsx6(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx6(FilloStringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx6(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx6(FilloInstanceIdContext.Provider, { value: instanceId, children: /* @__PURE__ */ jsxs5(
     "form",
     {
       className: slotClass3(`fillo-form ${props.className ?? ""}`, appearance, {
@@ -2301,10 +2459,10 @@ function ResolvedForm(props) {
         }
       },
       children: [
-        !props.client && !props.skipValidation && isDevEnv() && /* @__PURE__ */ jsx5(DevNoClientNotice, {}),
-        props.draftNotice && isDevEnv() && /* @__PURE__ */ jsx5(DevDraftNotice, {}),
-        props.stagedNotice && isDevEnv() && /* @__PURE__ */ jsx5(DevStagedNotice, {}),
-        props.syncErrorNotice && isDevEnv() && /* @__PURE__ */ jsx5(DevSyncErrorNotice, { error: props.syncErrorNotice }),
+        !props.client && !props.skipValidation && isDevEnv() && /* @__PURE__ */ jsx6(DevNoClientNotice, {}),
+        props.draftNotice && isDevEnv() && /* @__PURE__ */ jsx6(DevDraftNotice, {}),
+        props.stagedNotice && isDevEnv() && /* @__PURE__ */ jsx6(DevStagedNotice, {}),
+        props.syncErrorNotice && isDevEnv() && /* @__PURE__ */ jsx6(DevSyncErrorNotice, { error: props.syncErrorNotice }),
         (api.resumedDraft || api.editingPrevious) && /* @__PURE__ */ jsxs5(
           "div",
           {
@@ -2312,21 +2470,21 @@ function ResolvedForm(props) {
             "data-fillo": "resume",
             role: "status",
             children: [
-              /* @__PURE__ */ jsx5("span", { className: "fillo-resume-text", children: api.editingPrevious ? strings.editNotice : strings.resumeNotice }),
-              /* @__PURE__ */ jsx5("button", { type: "button", className: "fillo-resume-clear", onClick: api.resetDraft, children: strings.resumeStartOver })
+              /* @__PURE__ */ jsx6("span", { className: "fillo-resume-text", children: api.editingPrevious ? strings.editNotice : strings.resumeNotice }),
+              /* @__PURE__ */ jsx6("button", { type: "button", className: "fillo-resume-clear", onClick: api.resetDraft, children: strings.resumeStartOver })
             ]
           }
         ),
-        api.resumeLinkFailed && !api.resumedDraft && !api.editingPrevious && /* @__PURE__ */ jsx5(
+        api.resumeLinkFailed && !api.resumedDraft && !api.editingPrevious && /* @__PURE__ */ jsx6(
           "div",
           {
             className: slotClass3("fillo-resume fillo-resume--expired", appearance, { slot: "resume" }),
             "data-fillo": "resume",
             role: "status",
-            children: /* @__PURE__ */ jsx5("span", { className: "fillo-resume-text", children: strings.resumeLinkExpired })
+            children: /* @__PURE__ */ jsx6("span", { className: "fillo-resume-text", children: strings.resumeLinkExpired })
           }
         ),
-        multiPage && settings.showProgress !== false && /* @__PURE__ */ jsx5(
+        multiPage && settings.showProgress !== false && /* @__PURE__ */ jsx6(
           "div",
           {
             className: slotClass3("fillo-progress-track", appearance, { slot: "progress" }),
@@ -2334,21 +2492,21 @@ function ResolvedForm(props) {
             role: "progressbar",
             "aria-label": schema.title || "Form progress",
             "aria-valuemin": 1,
-            "aria-valuemax": api.pageCount,
-            "aria-valuenow": api.pageIndex + 1,
-            children: /* @__PURE__ */ jsx5(
+            "aria-valuemax": progressTotal,
+            "aria-valuenow": progressStep,
+            children: /* @__PURE__ */ jsx6(
               "div",
               {
                 className: slotClass3("fillo-progress-fill", appearance, { slot: "progressFill" }),
                 "data-fillo": "progressFill",
-                style: { "--fillo-progress-value": `${(api.pageIndex + 1) / api.pageCount * 100}%` }
+                style: { "--fillo-progress-value": `${progressStep / progressTotal * 100}%` }
               }
             )
           }
         ),
         api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs5("header", { className: slotClass3("fillo-header", appearance, { slot: "header" }), "data-fillo": "header", children: [
-          schema.title && /* @__PURE__ */ jsx5("h1", { className: slotClass3("fillo-title", appearance, { slot: "title" }), "data-fillo": "title", children: schema.title }),
-          schema.description && /* @__PURE__ */ jsx5(
+          schema.title && /* @__PURE__ */ jsx6("h1", { className: slotClass3("fillo-title", appearance, { slot: "title" }), "data-fillo": "title", children: schema.title }),
+          schema.description && /* @__PURE__ */ jsx6(
             "p",
             {
               className: slotClass3("fillo-form-description", appearance, { slot: "description" }),
@@ -2357,8 +2515,8 @@ function ResolvedForm(props) {
             }
           )
         ] }),
-        multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx5("h2", { className: slotClass3("fillo-page-title", appearance, { slot: "pageTitle" }), "data-fillo": "pageTitle", children: api.page.title }),
-        /* @__PURE__ */ jsx5("div", { className: slotClass3("fillo-blocks", appearance, { slot: "blocks" }), "data-fillo": "blocks", ref: blocksRef, tabIndex: -1, children: api.blocks.map((block) => /* @__PURE__ */ jsx5(
+        multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx6("h2", { className: slotClass3("fillo-page-title", appearance, { slot: "pageTitle" }), "data-fillo": "pageTitle", children: api.page.title }),
+        /* @__PURE__ */ jsx6("div", { className: slotClass3("fillo-blocks", appearance, { slot: "blocks" }), "data-fillo": "blocks", ref: blocksRef, tabIndex: -1, children: api.blocks.map((block) => /* @__PURE__ */ jsx6(
           BlockRenderer,
           {
             block,
@@ -2368,7 +2526,7 @@ function ResolvedForm(props) {
           },
           block.id
         )) }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "input",
           {
             type: "text",
@@ -2385,9 +2543,22 @@ function ResolvedForm(props) {
             }
           }
         ),
-        (api.status === "error" || api.submitError) && /* @__PURE__ */ jsx5("p", { className: "fillo-submit-error", role: "alert", children: api.submitError ?? strings.submitFailed }),
+        challenge && showChallenge && /* @__PURE__ */ jsxs5("div", { className: "fillo-turnstile-slot", "data-fillo": "turnstile-slot", children: [
+          /* @__PURE__ */ jsx6(
+            TurnstileWidget,
+            {
+              siteKey: challenge.siteKey,
+              className: slotClass3("fillo-turnstile", appearance, { slot: "turnstile" }),
+              onToken: handleChallengeToken,
+              onError: () => setChallengeError(true),
+              registerReset: registerChallengeReset
+            }
+          ),
+          challengeError && /* @__PURE__ */ jsx6("p", { className: "fillo-turnstile-error", role: "alert", children: strings.challengeUnavailable })
+        ] }),
+        (api.status === "error" || api.submitError) && /* @__PURE__ */ jsx6("p", { className: "fillo-submit-error", role: "alert", children: api.submitError ?? strings.submitFailed }),
         showFooter && /* @__PURE__ */ jsxs5("footer", { className: slotClass3("fillo-footer", appearance, { slot: "footer" }), "data-fillo": "footer", children: [
-          multiPage && !api.isFirstPage && /* @__PURE__ */ jsx5(
+          multiPage && !api.isFirstPage && /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -2397,38 +2568,41 @@ function ResolvedForm(props) {
               children: strings.back
             }
           ),
-          showPrimaryButton && /* @__PURE__ */ jsx5(
+          showPrimaryButton && /* @__PURE__ */ jsx6(
             "button",
             {
               type: "submit",
               className: slotClass3("fillo-button fillo-button--primary", appearance, { slot: "button", variant: "primary" }),
               "data-fillo": "button",
-              disabled: api.status === "submitting" || api.uploading,
+              disabled: api.status === "submitting" || api.uploading || // Wait for the human check before enabling submit (never
+              // "Next"). The server rejects a tokenless submit regardless —
+              // this is UX only.
+              showChallenge && !challengeToken,
               children: api.uploading ? strings.uploading : api.status === "submitting" ? strings.submitting : api.isLastPage ? settings.submitLabel ?? strings.submit : strings.next
             }
           )
         ] }),
-        props.poweredBy && /* @__PURE__ */ jsx5(PoweredBy, { label: props.brandLabel, href: props.brandHref })
+        props.poweredBy && /* @__PURE__ */ jsx6(PoweredBy, { label: props.brandLabel, href: props.brandHref })
       ]
     }
   ) }) }) }) });
 }
 
 // src/jsx.tsx
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 import {
   codeFormFromJsx,
   FilloJsxError,
   JSX_BLOCK_COMPONENTS
 } from "@usefillo/core";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var B = JSX_BLOCK_COMPONENTS;
 var isDevEnv2 = () => typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
 function JsxForm(props) {
   const { id, title, description, settings, theme, client, children, ...rest } = props;
   const compiled = codeFormFromJsx({ id, title, description, settings, theme }, children);
   const json = JSON.stringify(compiled.schema) + JSON.stringify(compiled.theme ?? null);
-  const memo2 = useRef7(null);
+  const memo2 = useRef8(null);
   if (memo2.current && memo2.current.json !== json && isDevEnv2()) {
     console.warn(
       `[fillo] "${id}": form structure changed between renders. If you just edited the form, ignore this. Otherwise: conditional questions are visibleIf={when(\u2026)\u2026}, never {cond && <Fillo.\u2026/>} \u2014 a per-visitor schema churns drafts in your workspace.`
@@ -2437,7 +2611,7 @@ function JsxForm(props) {
   if (!memo2.current || memo2.current.json !== json) {
     memo2.current = { json, form: compiled };
   }
-  return /* @__PURE__ */ jsx6(FilloForm, { form: memo2.current.form, client, ...rest });
+  return /* @__PURE__ */ jsx7(FilloForm, { form: memo2.current.form, client, ...rest });
 }
 function defineFormFromJsx(element) {
   if (!element || element.type !== JsxForm) {
@@ -2490,7 +2664,7 @@ import {
   resolveStrings as resolveStrings2,
   syncCodeForm as syncCodeForm3
 } from "@usefillo/core";
-import { Fragment as Fragment3, jsx as jsx7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8 } from "react/jsx-runtime";
 function FilloProvider({
   children,
   form,
@@ -2585,15 +2759,15 @@ function FilloProvider({
   useDraftFlush(api);
   const resolvedStrings = resolveStrings2(strings);
   const canonicalSyncError = syncError && !options.skipValidation ? syncError : null;
-  if (canonicalSyncError && renderError) return /* @__PURE__ */ jsx7(Fragment3, { children: renderError(canonicalSyncError) });
+  if (canonicalSyncError && renderError) return /* @__PURE__ */ jsx8(Fragment3, { children: renderError(canonicalSyncError) });
   if (canonicalSyncError && !isDevEnv3()) return null;
   if (codeFormSyncing && !options.skipValidation && !isDevEnv3()) return null;
   const notPublished = Boolean(codeForm) && syncedStatus === "draft" && !options.skipValidation;
   if (notPublished && !isDevEnv3()) {
     const error = new FilloError3("This form isn't published yet.", 403, void 0, "form_not_published");
-    return renderError ? /* @__PURE__ */ jsx7(Fragment3, { children: renderError(error) }) : null;
+    return renderError ? /* @__PURE__ */ jsx8(Fragment3, { children: renderError(error) }) : null;
   }
-  return /* @__PURE__ */ jsx7(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx7(FilloStringsContext.Provider, { value: resolvedStrings, children: /* @__PURE__ */ jsx7(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx7(FilloInstanceIdContext.Provider, { value: instanceId, children }) }) }) });
+  return /* @__PURE__ */ jsx8(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx8(FilloStringsContext.Provider, { value: resolvedStrings, children: /* @__PURE__ */ jsx8(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx8(FilloInstanceIdContext.Provider, { value: instanceId, children }) }) }) });
 }
 function isDevEnv3() {
   return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";

package/dist/styles.css

@@ -735,4 +735,22 @@
     border-radius: 4px;
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
+
+  /* ---------- Human-verification challenge (Turnstile) ---------- */
+  .fillo-turnstile-slot {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 0.25rem 0 1rem;
+  }
+  /* Cloudflare draws a fixed-size widget inside; just give it room to breathe. */
+  .fillo-turnstile {
+    min-height: 65px;
+  }
+  .fillo-turnstile-error {
+    margin: 0;
+    color: var(--fillo-error);
+    font-size: 0.82rem;
+    line-height: 1.45;
+  }
 }

package/dist/styles.unlayered.css

@@ -735,3 +735,21 @@
     border-radius: 4px;
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
+
+  /* ---------- Human-verification challenge (Turnstile) ---------- */
+  .fillo-turnstile-slot {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 0.25rem 0 1rem;
+  }
+  /* Cloudflare draws a fixed-size widget inside; just give it room to breathe. */
+  .fillo-turnstile {
+    min-height: 65px;
+  }
+  .fillo-turnstile-error {
+    margin: 0;
+    color: var(--fillo-error);
+    font-size: 0.82rem;
+    line-height: 1.45;
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefillo/react",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Headless React components for embedding Fillo forms natively in your product.",
   "license": "MIT",
   "keywords": [
@@ -34,7 +34,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@usefillo/core": "^0.8.0"
+    "@usefillo/core": "^0.9.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",