@usefillo/dom 0.16.1 → 0.17.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Field, FieldValue, FormSchema, FilloClient, ResponseData, FormStatus as FormStatus$1, FormPage, Block, FilloRespondent, CodeForm, FormTheme, ChallengeConfig, FieldKind, FilloError, FormControllerOptions, FormController } from '@usefillo/core';
+import { Field, FieldValue, FormSchema, FilloClient, ResponseData, FormStatus as FormStatus$1, FormPage, Block, FilloRespondent, CodeForm, FormTheme, ChallengeConfig, ChallengeTheme, FieldKind, FilloError, FormControllerOptions, FormController } from '@usefillo/core';
 export { CodeForm, Field, FieldKind, FieldValue, FileValue, FilloClient, FilloClientOptions, FilloError, FormController, FormControllerOptions, FormControllerState, FormSchema, FormTheme, ProvisionWorkspaceResult, ResponseData, createClient, defineForm, provisionWorkspace } from '@usefillo/core';
 
 type FormStatus = FormStatus$1 | "loading" | "closed";
@@ -59,6 +59,18 @@ interface RenderFormBaseOptions {
      * hosted page does this). Wins over anything the server delivers.
      */
     challenge?: ChallengeConfig;
+    /**
+     * Theme for the human-verification widget. Defaults to "auto" (the
+     * visitor's OS preference); apps with their own theme switch 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";
     className?: string;
     components?: Partial<Record<FieldKind, FieldRenderer>>;
     customComponents?: Record<string, FieldRenderer>;

package/dist/index.js

@@ -1758,6 +1758,8 @@ function defaultFieldRenderer(context) {
 }
 var TURNSTILE_SCRIPT_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
 var TURNSTILE_SCRIPT_ID = "fillo-turnstile-script";
+var BRIDGE_READY_TIMEOUT_MS = 2e4;
+var CHALLENGE_CDATA_RE = /^[A-Za-z0-9_-]{1,255}$/;
 var turnstileScriptPromise = null;
 function turnstileGlobal() {
   return globalThis.turnstile;
@@ -1883,6 +1885,15 @@ var DomFormController = class {
   // Invalidated on teardown so a stale load/render callback can't land after
   // a later attempt replaced the container (or double-render into it).
   turnstileAttempt = 0;
+  // Bridge mode (challenge.bridgeUrl): the Fillo-hosted iframe that runs the
+  // widget on Fillo's OWN hostname (so the check works on any embedding
+  // domain) plus its postMessage wiring. Mutually exclusive with the direct
+  // Cloudflare-script fields above; teardownTurnstileWidget() clears both.
+  challengeFrame = null;
+  challengeFrameSrc = null;
+  challengeFrameOrigin = null;
+  challengeMessageHandler = null;
+  challengeWatchdog = null;
   // Clear-then-set (one frame apart) so an identical repeat still re-fires —
   // a same-tick ""→text write can collapse into a no-op net change for AT.
   announce = (text) => {
@@ -2503,6 +2514,142 @@ var DomFormController = class {
     }
     this.overlays.clear();
   }
+  /** Route the challenge to bridge or direct mode per the server's config.
+   *  Bridge (bridgeUrl present — every current server) works on any embedding
+   *  domain; direct is the pre-bridge fallback for older self-hosted servers.
+   *  Message contract mirrors @usefillo/react's turnstile module; keep both
+   *  in sync with apps/web src/app/embed/challenge/route.ts. */
+  ensureChallengeWidget(challenge) {
+    if (challenge.bridgeUrl) this.ensureChallengeBridge(challenge.bridgeUrl);
+    else this.ensureTurnstileWidget(challenge.siteKey);
+  }
+  /** Idempotent per src: mounts the Fillo-hosted bridge iframe into the
+   *  persistent container and wires its postMessage token flow. */
+  ensureChallengeBridge(bridgeUrl) {
+    if (typeof window === "undefined") return;
+    let url;
+    try {
+      url = new URL(bridgeUrl);
+    } catch {
+      this.handleChallengeError();
+      return;
+    }
+    if (url.protocol !== "https:" && url.protocol !== "http:") {
+      this.handleChallengeError();
+      return;
+    }
+    url.searchParams.set("origin", window.location.origin);
+    url.searchParams.set("theme", this.options.challengeTheme ?? "auto");
+    if (this.formId && CHALLENGE_CDATA_RE.test(this.formId)) {
+      url.searchParams.set("cdata", this.formId);
+    }
+    url.searchParams.set(
+      "appearance",
+      (this.options.challengeAppearance ?? "interaction-only") === "interaction-only" ? "interaction-only" : "always"
+    );
+    const src = url.toString();
+    if (this.challengeFrame && this.challengeFrameSrc === src) return;
+    this.teardownTurnstileWidget();
+    const attempt = ++this.turnstileAttempt;
+    const frame = el("iframe", {
+      className: "fillo-turnstile-frame",
+      attrs: {
+        src,
+        title: "Human verification",
+        // Cloudflare's normal widget footprint; attributes so host CSS wins.
+        width: "300",
+        height: "65",
+        referrerpolicy: "no-referrer"
+      }
+    });
+    this.challengeFrame = frame;
+    this.challengeFrameSrc = src;
+    this.challengeFrameOrigin = url.origin;
+    this.turnstileContainer.appendChild(frame);
+    this.setChallengeFrameVisible(
+      (this.options.challengeAppearance ?? "interaction-only") !== "interaction-only"
+    );
+    const onMessage = (event) => {
+      if (attempt !== this.turnstileAttempt || this.destroyed) return;
+      if (event.origin !== this.challengeFrameOrigin) return;
+      if (!this.challengeFrame || event.source !== this.challengeFrame.contentWindow) return;
+      const data = event.data;
+      switch (data?.type) {
+        case "fillo:challenge:ready":
+          this.settleChallengeWatchdog();
+          break;
+        case "fillo:challenge:token":
+          this.settleChallengeWatchdog();
+          if (typeof data.token === "string" && data.token.length > 0) {
+            this.handleChallengeToken(data.token);
+          }
+          if ((this.options.challengeAppearance ?? "interaction-only") === "interaction-only") {
+            this.setChallengeFrameVisible(false);
+          }
+          break;
+        case "fillo:challenge:interactive":
+          this.setChallengeFrameVisible(true);
+          break;
+        case "fillo:challenge:interactive-done":
+          if ((this.options.challengeAppearance ?? "interaction-only") === "interaction-only") {
+            this.setChallengeFrameVisible(false);
+          }
+          break;
+        case "fillo:challenge:expired":
+          this.handleChallengeToken(void 0);
+          break;
+        case "fillo:challenge:error":
+          this.settleChallengeWatchdog();
+          this.handleChallengeToken(void 0);
+          this.handleChallengeError();
+          break;
+      }
+    };
+    this.challengeMessageHandler = onMessage;
+    window.addEventListener("message", onMessage);
+    this.challengeWatchdog = window.setTimeout(() => {
+      if (attempt !== this.turnstileAttempt || this.destroyed) return;
+      this.handleChallengeToken(void 0);
+      this.handleChallengeError();
+    }, BRIDGE_READY_TIMEOUT_MS);
+  }
+  /** Collapse/expand the bridge frame (interaction-only mode). The frame stays
+   *  mounted either way — height 0 keeps the invisible check running. */
+  setChallengeFrameVisible(visible) {
+    const frame = this.challengeFrame;
+    if (!frame) return;
+    frame.setAttribute("height", visible ? "65" : "0");
+    if (visible) {
+      frame.removeAttribute("aria-hidden");
+      frame.removeAttribute("tabindex");
+    } else {
+      frame.setAttribute("aria-hidden", "true");
+      frame.setAttribute("tabindex", "-1");
+    }
+    this.turnstileContainer.setAttribute(
+      "data-fillo-challenge-visible",
+      visible ? "true" : "false"
+    );
+  }
+  settleChallengeWatchdog() {
+    if (this.challengeWatchdog !== null && typeof window !== "undefined") {
+      window.clearTimeout(this.challengeWatchdog);
+    }
+    this.challengeWatchdog = null;
+  }
+  /** Unwire and remove the bridge frame (listener, watchdog, iframe). Safe to
+   *  call when nothing is mounted. */
+  teardownChallengeBridge() {
+    if (this.challengeMessageHandler && typeof window !== "undefined") {
+      window.removeEventListener("message", this.challengeMessageHandler);
+    }
+    this.challengeMessageHandler = null;
+    this.settleChallengeWatchdog();
+    this.challengeFrame?.remove();
+    this.challengeFrame = null;
+    this.challengeFrameSrc = null;
+    this.challengeFrameOrigin = null;
+  }
   /** Idempotent: at most one load+render per armed container (guarded by
    *  widget id / in-flight / already-failed); re-arms on a changed site key
    *  (mirrors react's effect, keyed on siteKey). */
@@ -2558,7 +2705,14 @@ var DomFormController = class {
    *  expiry, or timeout) — not a teardown, the widget stays mounted. */
   resetChallengeWidget() {
     this.challengeToken = void 0;
-    if (this.turnstileWidgetId) turnstileGlobal()?.reset(this.turnstileWidgetId);
+    if (this.challengeFrame && this.challengeFrameOrigin) {
+      this.challengeFrame.contentWindow?.postMessage(
+        { type: "fillo:challenge:reset" },
+        this.challengeFrameOrigin
+      );
+    } else if (this.turnstileWidgetId) {
+      turnstileGlobal()?.reset(this.turnstileWidgetId);
+    }
     this.queueRender();
   }
   /** Fully remove any active/pending widget (mirrors react's unmount effect):
@@ -2566,8 +2720,11 @@ var DomFormController = class {
    *  fresh container replaces the old one for a pristine next mount. Safe to
    *  call when nothing is active. */
   teardownTurnstileWidget() {
-    if (this.turnstileWidgetId === null && !this.turnstileLoadInFlight) return;
+    if (this.turnstileWidgetId === null && !this.turnstileLoadInFlight && this.challengeFrame === null) {
+      return;
+    }
     this.turnstileAttempt++;
+    this.teardownChallengeBridge();
     const api = turnstileGlobal();
     if (this.turnstileWidgetId && api) {
       try {
@@ -3039,8 +3196,8 @@ var DomFormController = class {
         );
       }
       content.appendChild(slot);
-      this.ensureTurnstileWidget(this.challenge.siteKey);
-    } else if (this.turnstileWidgetId !== null || this.turnstileLoadInFlight) {
+      this.ensureChallengeWidget(this.challenge);
+    } else if (this.turnstileWidgetId !== null || this.turnstileLoadInFlight || this.challengeFrame !== null) {
       this.teardownTurnstileWidget();
     }
     const submitError = api.status === "error" ? "This form can't submit right now. Please try again in a moment." : this.engine?.getState().submitError;