@verbb/formie-browser 1.0.12 → 1.0.14

package/src/js/modules/address/factories.ts

@@ -1,6 +1,6 @@
 import type {
-    FormieModuleDefinition,
-    FormieModuleInstance,
+    BrowserModuleDefinition,
+    BrowserModuleInstance,
     ModuleSetupContext,
 } from '#contracts/modules';
 import {
@@ -30,7 +30,7 @@ export type ManagedAddressModuleAdapter<
     TApi,
     TWidget,
 > = {
-    id: string;
+    moduleId: string;
     load: (ctx: AddressModuleSetupContext<TProvider>) => Promise<TApi>;
     mount: (args: {
         api: TApi;
@@ -61,9 +61,11 @@ export function createManagedAddressModule<
     TProvider extends Record<string, unknown>,
     TApi,
     TWidget,
->(adapter: ManagedAddressModuleAdapter<TProvider, TApi, TWidget>): FormieModuleDefinition {
+>(adapter: ManagedAddressModuleAdapter<TProvider, TApi, TWidget>): BrowserModuleDefinition {
     return {
-        id: adapter.id,
+        moduleId: adapter.moduleId,
+        version: 2,
+        surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
         kind: 'address',
         match: (ctx) => {
             const input = ctx.target.querySelector('[data-formie-address-autocomplete-input]');
@@ -71,10 +73,10 @@ export function createManagedAddressModule<
             return !!input;
         },
         setup: async (ctx) => {
-            const options = normalizeAddressModuleOptions<TProvider>(adapter.id, ctx.options || {});
+            const options = normalizeAddressModuleOptions<TProvider>(adapter.moduleId.split(':')[1], ctx.options || {});
             const services = createAddressHostServices(ctx);
             debug.log('Setup module.', {
-                moduleId: adapter.id,
+                moduleId: adapter.moduleId,
             });
 
             const setupCtx: AddressModuleSetupContext<TProvider> = {
@@ -90,11 +92,11 @@ export function createManagedAddressModule<
 
             if (!input) {
                 console.warn(
-                    `[formie] Address module "${adapter.id}" skipped: no autocomplete input found in target. ` +
+                    `[formie] Address module "${adapter.moduleId}" skipped: no autocomplete input found in target. ` +
                     'Ensure the Address field has the Auto-Complete subfield enabled.',
                 );
                 debug.warn('Autocomplete input missing; skipping module.', {
-                    moduleId: adapter.id,
+                    moduleId: adapter.moduleId,
                 });
                 return {
                     destroy: () => { },
@@ -104,7 +106,7 @@ export function createManagedAddressModule<
             const getApi = async(): Promise<TApi> => {
                 if (!apiPromise) {
                     debug.log('Loading provider API.', {
-                        moduleId: adapter.id,
+                        moduleId: adapter.moduleId,
                     });
                     apiPromise = adapter.load(setupCtx);
                 }
@@ -126,7 +128,7 @@ export function createManagedAddressModule<
                     provider: options.provider,
                 });
                 debug.log('Widget mounted.', {
-                    moduleId: adapter.id,
+                    moduleId: adapter.moduleId,
                 });
             };
 
@@ -178,7 +180,7 @@ export function createManagedAddressModule<
             return {
                 destroy: async () => {
                     debug.log('Destroying module.', {
-                        moduleId: adapter.id,
+                        moduleId: adapter.moduleId,
                     });
                     cleanups.forEach((c) => c());
 
@@ -193,7 +195,7 @@ export function createManagedAddressModule<
                             provider: options.provider,
                         });
                         debug.log('Widget unmounted.', {
-                            moduleId: adapter.id,
+                            moduleId: adapter.moduleId,
                         });
                     }
                 },

package/src/js/modules/address/google-address.ts

@@ -1,3 +1,6 @@
+import { appendFormCsrfToFormData } from '#utils/csrf';
+import { browserRequest } from '@verbb/formie-core';
+import { getFormBrowserRequestOptions } from '#utils/request-profile';
 import { defineAddressModule } from '#modules/address/api';
 import type { AddressHostServices } from '#modules/address/host';
 import { getAddressProviderEventName } from '#utils/event-names';
@@ -7,6 +10,7 @@ type GoogleMaps = typeof google;
 
 type GoogleAddressProviderOptions = {
     apiKey?: string;
+    geocodeEndpoint?: string;
     options?: Record<string, unknown>;
     countryDefaultValue?: string;
 };
@@ -231,7 +235,7 @@ export const googleAddressModule = defineAddressModule<
     GoogleMaps,
     google.maps.places.PlaceAutocompleteElement
 >({
-    id: 'google-address',
+    moduleId: 'formie:google-address',
     load: async ({ options }) => {
         const apiKey = options.provider.apiKey;
 
@@ -335,10 +339,10 @@ export const googleAddressModule = defineAddressModule<
 
         return autocomplete;
     },
-    onCurrentLocation: async (position, { field, services }) => {
+    onCurrentLocation: async (position, { field, services, provider }) => {
         const { latitude, longitude } = position.coords;
         const form = services.form;
-        const actionUrl = form?.action || window.location.href;
+        const actionUrl = provider.geocodeEndpoint || form?.action || window.location.href;
         const fieldHandle = field.getAttribute('data-formie-field-handle')?.trim();
         const formHandle = (form?.querySelector('[name="handle"]') as HTMLInputElement | null)?.value?.trim();
 
@@ -346,20 +350,20 @@ export const googleAddressModule = defineAddressModule<
 
         try {
             const formData = new FormData();
+            if (form) appendFormCsrfToFormData(formData, form);
             formData.append('action', 'formie/address/google-places-geocode');
             formData.append('latlng', `${latitude},${longitude}`);
             formData.append('handle', formHandle);
             formData.append('fieldHandle', fieldHandle);
 
-            const response = await fetch(actionUrl, {
+            const response = await browserRequest(actionUrl, {
                 method: 'POST',
                 body: formData,
-                credentials: 'include',
                 headers: {
                     'X-Requested-With': 'XMLHttpRequest',
                     Accept: 'application/json',
                 },
-            });
+            }, getFormBrowserRequestOptions(form));
 
             const data = await response.json();
 

package/src/js/modules/address/index.ts

@@ -1,6 +1,6 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 
-export const builtinAddressModuleLoaders: Record<string, () => Promise<FormieModuleDefinition>> = {
+export const builtinAddressModuleLoaders: Record<string, () => Promise<BrowserModuleDefinition>> = {
     // Address providers stay behind lazy importer entries because their SDKs are
     // optional and often much heavier than the base form client.
     'address-finder': () => import('#modules/address/address-finder').then((m) => m.addressFinderModule),

package/src/js/modules/address/loqate.ts

@@ -35,7 +35,7 @@ export const loqateModule = defineAddressModule<
     PcaGlobal,
     PcaAddressInstance
 >({
-    id: 'loqate',
+    moduleId: 'formie:loqate',
     load: async () => {
         await loadScriptAndEnsureGlobal<PcaGlobal>('pca', {
             id: SCRIPT_ID,

package/src/js/modules/address/place-kit.ts

@@ -28,7 +28,7 @@ export const placeKitModule = defineAddressModule<
     (apiKey: string, options: Record<string, unknown>) => PlaceKitPicker,
     PlaceKitPicker
 >({
-    id: 'place-kit',
+    moduleId: 'formie:place-kit',
     load: async () => {
         const module = await import('@placekit/autocomplete-js');
 

package/src/js/modules/captchas/captcha-eu.ts

@@ -34,7 +34,7 @@ async function loadCaptchaEuGlobal(options: CaptchaEuProviderOptions): Promise<C
 }
 
 export const captchaEuModule = defineCaptchaModule<CaptchaEuProviderOptions, CaptchaEuGlobal, HTMLElement>({
-    id: 'captcha-eu',
+    moduleId: 'formie:captcha-eu',
     defaultPlaceholderSelector: '[data-captcha-eu-placeholder]',
     defaultTokenFieldNames: ['captcha-eu-token'],
     load: ({ options }) => {
@@ -69,7 +69,7 @@ export const captchaEuModule = defineCaptchaModule<CaptchaEuProviderOptions, Cap
 
         return container;
     },
-    screen: async ({ placeholder, services, stageCtx }) => {
+    challenge: async ({ placeholder, services, stageCtx }) => {
         // Captcha.eu solves through its own widget lifecycle and callback. By
         // screen time we only need to wait for the shared transport layer to
         // contain the provider payload.

package/src/js/modules/captchas/factories.ts

@@ -1,8 +1,8 @@
 import type {
-    FormieModuleDefinition,
-    FormieModuleInstance,
+    BrowserModuleDefinition,
+    BrowserModuleInstance,
     ModuleSetupContext,
-    SubmitHookContext,
+    BeforeSubmitContext,
 } from '#contracts/modules';
 import type { FormSubmitResult } from '#contracts/schema';
 import { DEFAULT_WAIT_FOR_VALUE_MS } from '#modules/captchas/constants';
@@ -21,11 +21,11 @@ type Cleanup = () => void;
 const debug = createDebug('captchas');
 
 type CaptchaModuleFactory<TProvider extends Record<string, unknown>> = {
-    id: string;
+    moduleId: string;
     defaultPlaceholderSelector: string;
     defaultTokenFieldNames?: string[];
     defaultWaitForValueMs?: number;
-    setup: (ctx: CaptchaModuleSetupContext<TProvider>) => Promise<FormieModuleInstance | void>;
+    setup: (ctx: CaptchaModuleSetupContext<TProvider>) => Promise<BrowserModuleInstance | void>;
 };
 
 export type ManagedCaptchaModuleAdapter<
@@ -33,7 +33,7 @@ export type ManagedCaptchaModuleAdapter<
     TApi,
     TWidget,
 > = {
-    id: string;
+    moduleId: string;
     defaultPlaceholderSelector: string;
     defaultTokenFieldNames?: string[];
     load: (ctx: CaptchaModuleSetupContext<TProvider>) => Promise<TApi>;
@@ -45,14 +45,14 @@ export type ManagedCaptchaModuleAdapter<
         options: NormalizedCaptchaModuleOptions<TProvider>;
         provider: TProvider;
     }) => Promise<TWidget> | TWidget;
-    screen: (args: {
+    challenge: (args: {
         api: TApi;
         widget: TWidget;
         placeholder: HTMLElement;
         services: CaptchaHostServices;
         options: NormalizedCaptchaModuleOptions<TProvider>;
         provider: TProvider;
-        stageCtx: SubmitHookContext;
+        stageCtx: BeforeSubmitContext;
     }) => Promise<void> | void;
     unmount?: (args: {
         api: TApi;
@@ -79,14 +79,16 @@ export type CaptchaModuleSetupContext<TProvider extends Record<string, unknown>>
 };
 
 export function createCaptchaModule<TProvider extends Record<string, unknown> = Record<string, unknown>>({
-    id,
+    moduleId,
     defaultPlaceholderSelector,
     defaultTokenFieldNames = [],
     defaultWaitForValueMs = DEFAULT_WAIT_FOR_VALUE_MS,
     setup,
-}: CaptchaModuleFactory<TProvider>): FormieModuleDefinition {
+}: CaptchaModuleFactory<TProvider>): BrowserModuleDefinition {
     return {
-        id,
+        moduleId,
+        version: 2,
+        surfaces: ['server-rendered', 'client-rendered'],
         kind: 'captcha',
         match: () => true,
         setup: async(ctx) => {
@@ -95,47 +97,58 @@ export function createCaptchaModule<TProvider extends Record<string, unknown> =
             // 1. normalized options from the backend manifest
             // 2. shared host services for placeholders, errors, tokens, and
             //    refresh-token events
-            const options = normalizeCaptchaModuleOptions<TProvider>(id, ctx.options || {}, {
+            const options = normalizeCaptchaModuleOptions<TProvider>(moduleId.split(':')[1], ctx.options || {}, {
                 defaultPlaceholderSelector,
                 defaultTokenFieldNames,
                 defaultWaitForValueMs,
             });
             debug.log('Setup module.', {
-                moduleId: id,
+                moduleId: moduleId,
                 placeholderSelector: options.ui.placeholderSelector,
                 tokenFieldNames: options.transport.tokenFieldNames,
             });
+            let placeholder: HTMLElement | undefined;
+            if (ctx.surface === 'client-rendered' && !ctx.root.querySelector(options.ui.placeholderSelector)) {
+                const attribute = /^\[(data-[a-z0-9-]+)\]$/.exec(options.ui.placeholderSelector)?.[1];
+                if (!attribute) throw new Error('The CAPTCHA needs a supported placeholder in the client-rendered form.');
+                placeholder = document.createElement('div');
+                placeholder.setAttribute(attribute, '');
+                (ctx.form ?? ctx.root).append(placeholder);
+            }
             const services = createCaptchaHostServices(ctx, options);
 
-            return setup({
+            const instance = await setup({
                 ...ctx,
                 options,
                 services,
             });
+            if (!instance) { placeholder?.remove(); return; }
+            const destroy = instance.destroy;
+            return { ...instance, destroy: async() => { await destroy(); placeholder?.remove(); } };
         },
     };
 }
 
 export function createPassiveCaptchaModule({
-    id,
+    moduleId,
     defaultPlaceholderSelector,
     defaultTokenFieldNames = [],
     defaultWaitForValueMs = DEFAULT_WAIT_FOR_VALUE_MS,
 }: {
-    id: string;
+    moduleId: string;
     defaultPlaceholderSelector: string;
     defaultTokenFieldNames?: string[];
     defaultWaitForValueMs?: number;
-}): FormieModuleDefinition {
+}): BrowserModuleDefinition {
     return createCaptchaModule<Record<string, never>>({
-        id,
+        moduleId,
         defaultPlaceholderSelector,
         defaultTokenFieldNames,
         defaultWaitForValueMs,
         setup: async({ services, options, root }) => {
             // Passive captchas do not have a browser SDK or visible widget.
             // Their lifecycle is basically "keep the hidden transport input in
-            // sync, then verify it still exists at screen-stage submit time".
+            // sync, then verify it still exists at challenge-stage submit time".
             const cleanups: Cleanup[] = [];
             let activePlaceholder = services.placeholder.getPrimary();
             let sessionKey = options.transport.sessionKey;
@@ -159,7 +172,7 @@ export function createPassiveCaptchaModule({
                 (placeholder) => {
                     activePlaceholder = placeholder;
                     debug.log('Passive placeholder visible.', {
-                        moduleId: id,
+                        moduleId: moduleId,
                     });
                     renderPlaceholder(placeholder);
                 },
@@ -192,8 +205,8 @@ export function createPassiveCaptchaModule({
                         cleanup();
                     });
                 },
-                onBeforeStage: async(stageCtx) => {
-                    if (stageCtx.stage !== 'screen' || stageCtx.action !== 'submit') {
+                beforeSubmit: async(stageCtx) => {
+                    if (stageCtx.action !== 'submit') {
                         return;
                     }
 
@@ -209,7 +222,7 @@ export function createPassiveCaptchaModule({
                         const message = services.errors.getDefaultMessage();
                         services.errors.show(message, activePlaceholder);
                         debug.warn('Passive captcha missing token.', {
-                            moduleId: id,
+                            moduleId: moduleId,
                             tokenFieldNames,
                         });
                         stageCtx.abort(message);
@@ -224,9 +237,9 @@ export function createManagedCaptchaModule<
     TProvider extends Record<string, unknown>,
     TApi,
     TWidget,
->(adapter: ManagedCaptchaModuleAdapter<TProvider, TApi, TWidget>): FormieModuleDefinition {
+>(adapter: ManagedCaptchaModuleAdapter<TProvider, TApi, TWidget>): BrowserModuleDefinition {
     return createCaptchaModule<TProvider>({
-        id: adapter.id,
+        moduleId: adapter.moduleId,
         defaultPlaceholderSelector: adapter.defaultPlaceholderSelector,
         defaultTokenFieldNames: adapter.defaultTokenFieldNames,
         setup: async(ctx) => {
@@ -234,7 +247,7 @@ export function createManagedCaptchaModule<
             // owns only the generic plumbing:
             // - load the provider API once
             // - mount/unmount when placeholders appear/disappear
-            // - call the provider's `screen()` at submit time
+            // - call the provider's `challenge()` at submit time
             //
             // It intentionally does not know provider policy such as "execute
             // now" vs "must already be solved" - that stays in each module.
@@ -243,13 +256,14 @@ export function createManagedCaptchaModule<
             const mountPromises = new Map<HTMLElement, Promise<void>>();
             let activePlaceholder = ctx.services.placeholder.getPrimary();
             let destroyed = false;
+            let initializationError: unknown;
 
             let apiPromise: Promise<TApi> | null = null;
 
             const getApi = async(): Promise<TApi> => {
                 if (!apiPromise) {
                     debug.log('Loading captcha provider API.', {
-                        moduleId: adapter.id,
+                        moduleId: adapter.moduleId,
                     });
                     apiPromise = adapter.load(ctx);
                 }
@@ -284,7 +298,7 @@ export function createManagedCaptchaModule<
                 placeholder.innerHTML = '';
                 ctx.services.tokens.clear();
                 debug.log('Unmounted captcha placeholder widget.', {
-                    moduleId: adapter.id,
+                    moduleId: adapter.moduleId,
                 });
 
                 if (activePlaceholder === placeholder) {
@@ -293,9 +307,8 @@ export function createManagedCaptchaModule<
             };
 
             const mountPlaceholder = async(placeholder: HTMLElement) => {
-                if (destroyed || mountedWidgets.has(placeholder) || mountPromises.has(placeholder)) {
-                    return;
-                }
+                if (destroyed || mountedWidgets.has(placeholder)) return;
+                if (mountPromises.has(placeholder)) return mountPromises.get(placeholder);
 
                 // Guard against repeated visibility events or rapid DOM churn
                 // by tracking an in-flight mount promise per placeholder.
@@ -322,7 +335,7 @@ export function createManagedCaptchaModule<
                     mountedWidgets.set(placeholder, widget);
                     activePlaceholder = placeholder;
                     debug.log('Mounted captcha placeholder widget.', {
-                        moduleId: adapter.id,
+                        moduleId: adapter.moduleId,
                     });
                 })().finally(() => {
                     mountPromises.delete(placeholder);
@@ -336,7 +349,7 @@ export function createManagedCaptchaModule<
             const visibility = ctx.services.placeholder.observe(
                 (placeholder) => {
                     activePlaceholder = placeholder;
-                    void mountPlaceholder(placeholder);
+                    void mountPlaceholder(placeholder).catch((error) => { initializationError = error; });
                 },
                 (placeholder) => {
                     void unmountPlaceholder(placeholder);
@@ -399,7 +412,7 @@ export function createManagedCaptchaModule<
                     return;
                 }
 
-                if (detail?.ok === false && detail?.stage === 'screen') {
+                if (detail?.ok === false && detail?.stage === 'challenge') {
                     return;
                 }
 
@@ -420,7 +433,18 @@ export function createManagedCaptchaModule<
                 }));
             }
 
+            visibility.reconcileImmediate();
+            try {
+                await Promise.all([...mountPromises.values()]);
+                if (initializationError) throw initializationError;
+            } catch (error) {
+                destroyed = true;
+                cleanups.forEach((cleanup) => cleanup());
+                throw error;
+            }
+
             return {
+                assertReady: () => { if (initializationError) throw initializationError; },
                 destroy: async() => {
                     destroyed = true;
                     cleanups.forEach((cleanup) => {
@@ -431,22 +455,22 @@ export function createManagedCaptchaModule<
                         await unmountPlaceholder(placeholder);
                     }
                 },
-                onBeforeStage: async(stageCtx) => {
-                    if (stageCtx.stage !== 'screen' || stageCtx.action !== 'submit') {
+                beforeSubmit: async(stageCtx) => {
+                    if (stageCtx.action !== 'submit') {
                         return;
                     }
 
                     // Reconcile immediately so captcha placeholders on the newly
-                    // visible page are mounted before screen-stage policy runs.
+                    // visible page are mounted before challenge-stage policy runs.
                     visibility.reconcileImmediate();
 
-                    // By the time provider `screen()` runs, the widget is
+                    // By the time provider `challenge()` runs, the widget is
                     // guaranteed to be mounted and the active placeholder is
                     // resolved. That lets provider code focus on challenge
                     // policy rather than generic lifecycle setup.
                     const visiblePlaceholders = visibility.getVisible();
 
-                    // Captcha fields on hidden pages should not run in screen stage.
+                    // Captcha fields on hidden pages should not run in challenge stage.
                     if (visiblePlaceholders.length === 0) {
                         return;
                     }
@@ -464,8 +488,8 @@ export function createManagedCaptchaModule<
                     if (!widget) {
                         const message = ctx.services.errors.getDefaultMessage();
                         ctx.services.errors.show(message, placeholder);
-                        debug.warn('Captcha widget unavailable at screen stage.', {
-                            moduleId: adapter.id,
+                        debug.warn('Captcha widget unavailable at challenge stage.', {
+                            moduleId: adapter.moduleId,
                         });
                         stageCtx.abort(message);
                         return;
@@ -473,7 +497,7 @@ export function createManagedCaptchaModule<
 
                     const api = await getApi();
 
-                    await adapter.screen({
+                    await adapter.challenge({
                         api,
                         widget,
                         placeholder,

package/src/js/modules/captchas/friendly-captcha-v1.ts

@@ -8,6 +8,7 @@ type FriendlyCaptchaProviderOptions = {
     siteKey?: string | null;
     language?: string;
     startMode?: string;
+    theme?: string;
 };
 
 export const friendlyCaptchaV1Module = defineCaptchaModule<
@@ -15,7 +16,7 @@ export const friendlyCaptchaV1Module = defineCaptchaModule<
     FriendlyChallengeModule,
     import('friendly-challenge').WidgetInstance
 >({
-    id: 'friendly-captcha-v1',
+    moduleId: 'formie:friendly-captcha-v1',
     defaultPlaceholderSelector: '[data-friendly-captcha-placeholder]',
     defaultTokenFieldNames: ['frc-captcha-solution'],
     load: async() => {
@@ -24,6 +25,15 @@ export const friendlyCaptchaV1Module = defineCaptchaModule<
         return import('friendly-challenge');
     },
     mount: ({ api, container, provider, services }) => {
+        // V1 uses a `dark` class on the widget element (no `auto` theme option).
+        const theme = provider.theme || 'auto';
+        const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+        const useDark = theme === 'dark' || (theme === 'auto' && prefersDark);
+
+        if (useDark) {
+            container.classList.add('dark');
+        }
+
         return new api.WidgetInstance(container, {
             sitekey: provider.siteKey || '',
             startMode: (provider.startMode as 'auto' | 'focus' | 'none' | undefined) || 'none',
@@ -43,7 +53,7 @@ export const friendlyCaptchaV1Module = defineCaptchaModule<
             },
         });
     },
-    screen: async({ widget, placeholder, services, stageCtx }) => {
+    challenge: async({ widget, placeholder, services, stageCtx }) => {
         // FriendlyCaptcha is started programmatically on submit when needed.
         if (services.tokens.has()) {
             return;

package/src/js/modules/captchas/friendly-captcha-v2.ts

@@ -10,6 +10,7 @@ type FriendlyCaptchaProviderOptions = {
     siteKey?: string | null;
     language?: string;
     startMode?: string;
+    theme?: string;
 };
 
 export const friendlyCaptchaV2Module = defineCaptchaModule<
@@ -17,7 +18,7 @@ export const friendlyCaptchaV2Module = defineCaptchaModule<
     FriendlyCaptchaSdkModule,
     FriendlyCaptchaWidget
 >({
-    id: 'friendly-captcha-v2',
+    moduleId: 'formie:friendly-captcha-v2',
     defaultPlaceholderSelector: '[data-friendly-captcha-placeholder]',
     defaultTokenFieldNames: ['frc-captcha-response'],
     load: async () => {
@@ -34,6 +35,7 @@ export const friendlyCaptchaV2Module = defineCaptchaModule<
             formFieldName: 'frc-captcha-response',
             language: provider.language,
             startMode: (provider.startMode as 'auto' | 'focus' | 'none' | undefined) || 'none',
+            theme: (provider.theme as 'auto' | 'light' | 'dark' | undefined) || 'auto',
         });
 
         widget.addEventListener('frc:widget.complete', (event) => {
@@ -62,7 +64,7 @@ export const friendlyCaptchaV2Module = defineCaptchaModule<
 
         return widget;
     },
-    screen: async ({ widget, placeholder, services, stageCtx }) => {
+    challenge: async ({ widget, placeholder, services, stageCtx }) => {
         // As with v1, start the challenge only if no token is currently present.
         if (services.tokens.has()) {
             return;

package/src/js/modules/captchas/hcaptcha.ts

@@ -66,7 +66,7 @@ async function loadHcaptchaGlobal(options: HcaptchaProviderOptions): Promise<Hca
 }
 
 export const hcaptchaModule = defineCaptchaModule<HcaptchaProviderOptions, HcaptchaGlobal, number | string>({
-    id: 'hcaptcha',
+    moduleId: 'formie:hcaptcha',
     defaultPlaceholderSelector: '[data-hcaptcha-placeholder]',
     defaultTokenFieldNames: ['h-captcha-response'],
     load: ({ options }) => {
@@ -77,7 +77,7 @@ export const hcaptchaModule = defineCaptchaModule<HcaptchaProviderOptions, Hcapt
     },
     mount: ({ api, container, provider, services }) => {
         // Mount only renders/configures the widget. It does not decide whether
-        // a submit should be blocked; that responsibility lives in `screen()`.
+        // a submit should be blocked; that responsibility lives in `challenge()`.
         return api.render(container, {
             sitekey: provider.siteKey || '',
             theme: provider.theme || 'light',
@@ -113,10 +113,10 @@ export const hcaptchaModule = defineCaptchaModule<HcaptchaProviderOptions, Hcapt
             },
         });
     },
-    screen: ({ api, widget, placeholder, services, stageCtx }) => {
-        // `screen()` runs at submit time. By the time we get here the widget is
+    challenge: ({ api, widget, placeholder, services, stageCtx }) => {
+        // `challenge()` runs at submit time. By the time we get here the widget is
         // already mounted, so this method only answers "do we have a valid
-        // token yet, and if not, can we get one before the screen stage ends?"
+        // token yet, and if not, can we get one before the challenge stage ends?"
         if (services.tokens.has()) {
             // Users can complete hCaptcha before clicking submit. In that case
             // there is nothing to do; we already have the token the backend

package/src/js/modules/captchas/index.ts

@@ -1,6 +1,6 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 
-export const builtinCaptchaModuleLoaders: Record<string, () => Promise<FormieModuleDefinition>> = {
+export const builtinCaptchaModuleLoaders: Record<string, () => Promise<BrowserModuleDefinition>> = {
     // Module ids map directly to importer functions so the loader can fetch only
     // the captcha chunks required by the current form manifest.
     'captcha-eu': () => import('#modules/captchas/captcha-eu').then((module) => module.captchaEuModule),

package/src/js/modules/captchas/recaptcha-enterprise.ts

@@ -23,7 +23,7 @@ type RecaptchaEnterpriseProviderOptions = RecaptchaProviderOptions & {
 // Shared captcha services should not know about any of those distinctions, so
 // this module owns the branching itself.
 export const recaptchaEnterpriseModule = defineCaptchaModule<RecaptchaEnterpriseProviderOptions, RecaptchaGlobal, number | string>({
-    id: 'recaptcha-enterprise',
+    moduleId: 'formie:recaptcha-enterprise',
     defaultPlaceholderSelector: '[data-recaptcha-placeholder]',
     defaultTokenFieldNames: ['g-recaptcha-response'],
     load: ({ options }) => {
@@ -75,7 +75,7 @@ export const recaptchaEnterpriseModule = defineCaptchaModule<RecaptchaEnterprise
             });
         });
     },
-    screen: async({ api, widget, provider, placeholder, services, stageCtx }) => {
+    challenge: async({ api, widget, provider, placeholder, services, stageCtx }) => {
         const enterpriseApi = api.enterprise || api;
 
         if (provider.enterpriseType === 'checkbox') {