@usefillo/react 0.16.1 → 0.17.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, ChallengeConfig, FilloError, CodeForm, FormSettings, Condition, TextField, PhoneField, NumberField, ChoiceField, SelectOption, CheckboxField, RatingField, LinearScaleField, RankingField, SignatureField, DateField, FileUploadField as FileUploadField$1, HiddenField, CalculatedField } from '@usefillo/core';
+import { FormSchema, FilloClient, ResponseData, FieldValue, FormPage, Block, FormStatus, FieldKind, Field, CustomField, FormTheme, FilloAppearance, FilloRendererStrings, FilloRespondent, ChallengeConfig, ChallengeTheme, FilloError, CodeForm, FormSettings, Condition, TextField, PhoneField, NumberField, ChoiceField, SelectOption, CheckboxField, RatingField, LinearScaleField, RankingField, SignatureField, DateField, FileUploadField as FileUploadField$1, HiddenField, CalculatedField } 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';
 
 /**
@@ -143,6 +143,18 @@ interface FilloFormBaseProps {
      * hosted page does this). The SECRET key stays server-side — never passed here.
      */
     challenge?: ChallengeConfig;
+    /**
+     * Theme for the human-verification widget. Defaults to "auto" (the
+     * visitor's OS preference); apps with their own theme switch should pass
+     * "light"/"dark" so the widget matches the surrounding form.
+     */
+    challengeTheme?: ChallengeTheme;
+    /**
+     * Bridge-mode visibility for the human check. "interaction-only" (default)
+     * keeps it invisible unless Cloudflare needs the visitor to act; "always"
+     * shows the classic widget box the whole time.
+     */
+    challengeAppearance?: "always" | "interaction-only";
     /**
      * Server-owned per-file ceiling when an inline schema skips the normal form
      * fetch. Fillo's hosted page uses this to preserve its server-rendered fast

package/dist/index.js

@@ -7,7 +7,7 @@ import {
   useId as useId2,
   useMemo as useMemo6,
   useRef as useRef9,
-  useState as useState6,
+  useState as useState7,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 import {
@@ -2500,10 +2500,12 @@ function FormField({
 }
 
 // src/turnstile.tsx
-import { useEffect as useEffect8, useRef as useRef8 } from "react";
+import { useEffect as useEffect8, useRef as useRef8, useState as useState6 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var SCRIPT_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
 var SCRIPT_ID = "fillo-turnstile-script";
+var BRIDGE_READY_TIMEOUT_MS = 2e4;
+var CDATA_RE = /^[A-Za-z0-9_-]{1,255}$/;
 var scriptPromise = null;
 function turnstileGlobal() {
   return globalThis.turnstile;
@@ -2552,8 +2554,133 @@ function loadTurnstileScript() {
   });
   return scriptPromise;
 }
-function TurnstileWidget({
+function TurnstileWidget(props) {
+  return props.bridgeUrl ? /* @__PURE__ */ jsx7(BridgeChallenge, { ...props, bridgeUrl: props.bridgeUrl }) : /* @__PURE__ */ jsx7(DirectChallenge, { ...props });
+}
+function BridgeChallenge({
+  bridgeUrl,
+  formId,
+  theme,
+  appearance,
+  onToken,
+  onError,
+  registerReset,
+  className
+}) {
+  const iframeRef = useRef8(null);
+  const interactionOnly = (appearance ?? "interaction-only") === "interaction-only";
+  const [frame, setFrame] = useState6(null);
+  const [expanded, setExpanded] = useState6(!interactionOnly);
+  const onTokenRef = useRef8(onToken);
+  onTokenRef.current = onToken;
+  const onErrorRef = useRef8(onError);
+  onErrorRef.current = onError;
+  const registerResetRef = useRef8(registerReset);
+  registerResetRef.current = registerReset;
+  useEffect8(() => {
+    if (typeof window === "undefined") return;
+    let url;
+    try {
+      url = new URL(bridgeUrl);
+    } catch {
+      onErrorRef.current?.();
+      return;
+    }
+    if (url.protocol !== "https:" && url.protocol !== "http:") {
+      onErrorRef.current?.();
+      return;
+    }
+    url.searchParams.set("origin", window.location.origin);
+    url.searchParams.set("theme", theme ?? "auto");
+    url.searchParams.set("appearance", interactionOnly ? "interaction-only" : "always");
+    if (formId && CDATA_RE.test(formId)) url.searchParams.set("cdata", formId);
+    setFrame({ src: url.toString(), origin: url.origin });
+  }, [bridgeUrl, formId, theme, interactionOnly]);
+  useEffect8(() => {
+    if (!frame || typeof window === "undefined") return;
+    let settled = false;
+    const watchdog = window.setTimeout(() => {
+      if (!settled) {
+        onTokenRef.current(void 0);
+        onErrorRef.current?.();
+      }
+    }, BRIDGE_READY_TIMEOUT_MS);
+    const settle = () => {
+      settled = true;
+      window.clearTimeout(watchdog);
+    };
+    const onMessage = (event) => {
+      if (event.origin !== frame.origin) return;
+      const target = iframeRef.current;
+      if (!target || event.source !== target.contentWindow) return;
+      const data = event.data;
+      switch (data?.type) {
+        case "fillo:challenge:ready":
+          settle();
+          break;
+        case "fillo:challenge:token":
+          settle();
+          if (typeof data.token === "string" && data.token.length > 0) {
+            onTokenRef.current(data.token);
+          }
+          if (interactionOnly) setExpanded(false);
+          break;
+        case "fillo:challenge:interactive":
+          if (interactionOnly) setExpanded(true);
+          break;
+        case "fillo:challenge:interactive-done":
+          if (interactionOnly) setExpanded(false);
+          break;
+        case "fillo:challenge:expired":
+          onTokenRef.current(void 0);
+          break;
+        case "fillo:challenge:error":
+          settle();
+          onTokenRef.current(void 0);
+          onErrorRef.current?.();
+          break;
+      }
+    };
+    window.addEventListener("message", onMessage);
+    registerResetRef.current?.(() => {
+      onTokenRef.current(void 0);
+      iframeRef.current?.contentWindow?.postMessage(
+        { type: "fillo:challenge:reset" },
+        frame.origin
+      );
+    });
+    return () => {
+      window.clearTimeout(watchdog);
+      window.removeEventListener("message", onMessage);
+      onTokenRef.current(void 0);
+    };
+  }, [frame, interactionOnly]);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className,
+      "data-fillo": "turnstile",
+      "data-fillo-challenge-visible": expanded ? "true" : "false",
+      children: frame && /* @__PURE__ */ jsx7(
+        "iframe",
+        {
+          ref: iframeRef,
+          src: frame.src,
+          title: "Human verification",
+          width: 300,
+          height: expanded ? 65 : 0,
+          className: "fillo-turnstile-frame",
+          referrerPolicy: "no-referrer",
+          "aria-hidden": expanded ? void 0 : true,
+          tabIndex: expanded ? void 0 : -1
+        }
+      )
+    }
+  );
+}
+function DirectChallenge({
   siteKey,
+  theme,
   onToken,
   onError,
   registerReset,
@@ -2582,7 +2709,7 @@ function TurnstileWidget({
       };
       widgetIdRef.current = api.render(containerRef.current, {
         sitekey: siteKey,
-        theme: "auto",
+        theme: theme ?? "auto",
         callback: (token) => onTokenRef.current(token),
         "error-callback": () => {
           onTokenRef.current(void 0);
@@ -2607,15 +2734,8 @@ function TurnstileWidget({
       widgetIdRef.current = null;
       onTokenRef.current(void 0);
     };
-  }, [siteKey]);
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      ref: containerRef,
-      className,
-      "data-fillo": "turnstile"
-    }
-  );
+  }, [siteKey, theme]);
+  return /* @__PURE__ */ jsx7("div", { ref: containerRef, className, "data-fillo": "turnstile" });
 }
 
 // src/FilloForm.tsx
@@ -2680,8 +2800,8 @@ function FilloForm(props) {
     () => renderOnly ? void 0 : props.client ?? (formId ? createClient() : void 0),
     [renderOnly, props.client, formId]
   );
-  const [loaded, setLoaded] = useState6(null);
-  const [loadFailure, setLoadFailure] = useState6(
+  const [loaded, setLoaded] = useState7(null);
+  const [loadFailure, setLoadFailure] = useState7(
     null
   );
   const devEnv = useIsDevEnv();
@@ -2996,10 +3116,10 @@ function ResolvedForm(props) {
   const challenge = renderOnly ? void 0 : props.challenge;
   const challengeRequired = Boolean(challenge);
   const challengeTokenRef = useRef9(void 0);
-  const [resyncWarning, setResyncWarning] = useState6(null);
-  const [resolutionFailureCode, setResolutionFailureCode] = useState6(null);
-  const [challengeToken, setChallengeToken] = useState6(void 0);
-  const [challengeError, setChallengeError] = useState6(false);
+  const [resyncWarning, setResyncWarning] = useState7(null);
+  const [resolutionFailureCode, setResolutionFailureCode] = useState7(null);
+  const [challengeToken, setChallengeToken] = useState7(void 0);
+  const [challengeError, setChallengeError] = useState7(false);
   const resetChallengeRef = useRef9(void 0);
   const handleChallengeToken = useCallback2((token) => {
     challengeTokenRef.current = token;
@@ -3364,6 +3484,10 @@ function ResolvedForm(props) {
         TurnstileWidget,
         {
           siteKey: challenge.siteKey,
+          bridgeUrl: challenge.bridgeUrl,
+          formId: props.formId,
+          theme: props.challengeTheme,
+          appearance: props.challengeAppearance,
           className: slotClass3("fillo-turnstile", appearance, { slot: "turnstile" }),
           onToken: handleChallengeToken,
           onError: () => setChallengeError(true),
@@ -3531,7 +3655,7 @@ var Fillo = {
 };
 
 // src/provider.tsx
-import { useEffect as useEffect10, useId as useId3, useMemo as useMemo7, useState as useState7 } from "react";
+import { useEffect as useEffect10, useId as useId3, useMemo as useMemo7, useState as useState8 } from "react";
 import {
   FilloError as FilloError3,
   createClient as createClient2,
@@ -3594,7 +3718,7 @@ function FilloProvider({
   } = useCodeFormSync(form, activeClient, onError, {
     allowUnsynced: Boolean(!activeClient || activeFormId || localPreview)
   });
-  const [resyncWarning, setResyncWarning] = useState7(null);
+  const [resyncWarning, setResyncWarning] = useState8(null);
   const rawSchema = codeForm ? resolvedSchema && !devChrome ? resolvedSchema : codeForm.schema : form;
   const normalized = useMemo7(() => normalizeFormSchema2(rawSchema), [rawSchema]);
   if (!normalized.ok) {

package/dist/styles.css

@@ -994,6 +994,15 @@
   .fillo-turnstile {
     min-height: 65px;
   }
+  /* Bridge mode: the widget lives in Fillo's iframe — keep it flush. */
+  .fillo-turnstile-frame {
+    display: block;
+    border: 0;
+  }
+  /* interaction-only: while the check runs invisibly, reserve no space. */
+  .fillo-turnstile[data-fillo-challenge-visible="false"] {
+    min-height: 0;
+  }
   .fillo-turnstile-error {
     margin: 0;
     color: var(--fillo-error);

package/dist/styles.unlayered.css

@@ -994,6 +994,15 @@
   .fillo-turnstile {
     min-height: 65px;
   }
+  /* Bridge mode: the widget lives in Fillo's iframe — keep it flush. */
+  .fillo-turnstile-frame {
+    display: block;
+    border: 0;
+  }
+  /* interaction-only: while the check runs invisibly, reserve no space. */
+  .fillo-turnstile[data-fillo-challenge-visible="false"] {
+    min-height: 0;
+  }
   .fillo-turnstile-error {
     margin: 0;
     color: var(--fillo-error);

package/package.json

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