@verbb/formie-browser 1.0.13 → 1.0.14

package/src/js/modules/captchas/recaptcha-v2-checkbox.ts

@@ -11,7 +11,7 @@ import {
 // invisible/score flows is that we never trigger execution ourselves; the user
 // must solve the already-rendered widget before submit succeeds.
 export const recaptchaV2CheckboxModule = defineCaptchaModule<RecaptchaProviderOptions, RecaptchaGlobal, number | string>({
-    id: 'recaptcha-v2-checkbox',
+    moduleId: 'formie:recaptcha-v2-checkbox',
     defaultPlaceholderSelector: '[data-recaptcha-placeholder]',
     defaultTokenFieldNames: ['g-recaptcha-response'],
     load: ({ options }) => {
@@ -29,7 +29,7 @@ export const recaptchaV2CheckboxModule = defineCaptchaModule<RecaptchaProviderOp
                     callback: (token?: string) => {
                         // Checkbox mode solves interactively before submit, so
                         // the callback is the point where the transport layer
-                        // finally becomes "screen-stage ready".
+                        // finally becomes "challenge-stage ready".
                         if (typeof token === 'string' && token.trim() !== '') {
                             services.tokens.write(token.trim());
                         }
@@ -47,7 +47,7 @@ export const recaptchaV2CheckboxModule = defineCaptchaModule<RecaptchaProviderOp
             });
         });
     },
-    screen: ({ placeholder, services, stageCtx }) => {
+    challenge: ({ placeholder, services, stageCtx }) => {
         // Checkbox mode does not execute at submit time. We simply check if the
         // user already solved it; if not, abort immediately with a field-style
         // error and let the user interact with the widget.

package/src/js/modules/captchas/recaptcha-v2-invisible.ts

@@ -35,7 +35,7 @@ async function waitForRecaptchaResponse(api: RecaptchaGlobal, widgetId: number |
 }
 
 export const recaptchaV2InvisibleModule = defineCaptchaModule<RecaptchaProviderOptions, RecaptchaGlobal, RecaptchaWidgetState>({
-    id: 'recaptcha-v2-invisible',
+    moduleId: 'formie:recaptcha-v2-invisible',
     defaultPlaceholderSelector: '[data-recaptcha-placeholder]',
     defaultTokenFieldNames: ['g-recaptcha-response'],
     load: ({ options }) => {
@@ -79,7 +79,7 @@ export const recaptchaV2InvisibleModule = defineCaptchaModule<RecaptchaProviderO
             });
         });
     },
-    screen: async({ api, widget, placeholder, services, stageCtx }) => {
+    challenge: async({ api, widget, placeholder, services, stageCtx }) => {
         // If we already have a token, do not re-execute the invisible widget.
         if (services.tokens.has()) {
             return;

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

@@ -13,7 +13,7 @@ import {
 // instance so it can participate in the same submit lifecycle as other
 // providers, but most of the work happens at screen time.
 export const recaptchaV3Module = defineCaptchaModule<RecaptchaProviderOptions, RecaptchaGlobal, number | string>({
-    id: 'recaptcha-v3',
+    moduleId: 'formie:recaptcha-v3',
     defaultPlaceholderSelector: '[data-recaptcha-placeholder]',
     defaultTokenFieldNames: ['g-recaptcha-response'],
     load: ({ options }) => {
@@ -31,7 +31,7 @@ export const recaptchaV3Module = defineCaptchaModule<RecaptchaProviderOptions, R
             });
         });
     },
-    screen: async({ api, provider, placeholder, services, stageCtx }) => {
+    challenge: async({ api, provider, placeholder, services, stageCtx }) => {
         // If a token already exists we can skip execution, which matters for
         // re-renders or multi-step flows where the same challenge was already
         // completed very recently.

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

@@ -5,6 +5,6 @@ import { definePassiveCaptchaModule } from '#modules/captchas/api';
 // good fit here because the provider is really just about keeping a hidden
 // transport value in sync across renders and token refreshes.
 export const snaptchaModule = definePassiveCaptchaModule({
-    id: 'snaptcha',
+    moduleId: 'formie:snaptcha',
     defaultPlaceholderSelector: '[data-snaptcha-captcha-placeholder]',
 });

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

@@ -51,7 +51,7 @@ async function loadTurnstileGlobal(options: TurnstileProviderOptions): Promise<T
 }
 
 export const turnstileModule = defineCaptchaModule<TurnstileProviderOptions, TurnstileGlobal, string>({
-    id: 'turnstile',
+    moduleId: 'formie:turnstile',
     defaultPlaceholderSelector: '[data-turnstile-placeholder]',
     defaultTokenFieldNames: ['cf-turnstile-response'],
     load: ({ options }) => {
@@ -102,7 +102,7 @@ export const turnstileModule = defineCaptchaModule<TurnstileProviderOptions, Tur
             },
         });
     },
-    screen: ({ api, widget, placeholder, services, provider, stageCtx }) => {
+    challenge: ({ api, widget, placeholder, services, provider, stageCtx }) => {
         // Submit-time rule: if a valid token already exists, do nothing. This
         // covers cases where Turnstile solved itself on load or before submit.
         if (services.tokens.has()) {
@@ -115,7 +115,7 @@ export const turnstileModule = defineCaptchaModule<TurnstileProviderOptions, Tur
         api.execute(widget);
         return services.tokens.wait(getTurnstileWaitForValueMs(provider)).then((hasToken) => {
             if (!hasToken) {
-                // No token arrived in time, so block the screen stage and show
+                // No token arrived in time, so block the challenge stage and show
                 // the shared themed inline error next to the active placeholder.
                 const message = services.errors.getDefaultMessage();
                 services.errors.show(message, placeholder);

package/src/js/modules/fields/address-country.ts

@@ -1,4 +1,4 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { ADDRESS_SELECTORS, findAddressFieldInput } from '#modules/address/constants';
 import { getModuleFieldContainers } from '#modules/fields/shared';
 import { fetchCountryFromIp } from '#utils/country-from-ip';
@@ -85,7 +85,7 @@ async function preselectCountry(
         return;
     }
 
-    const response = await fetchCountryFromIp(options.countryFromIpAction);
+    const response = await fetchCountryFromIp(options.countryFromIpAction, addressRoot.closest('form'));
 
     if (!response?.countryCode) {
         return;
@@ -116,8 +116,10 @@ async function preselectCountry(
     debug.log('Preselected country from IP.', { selectValue });
 }
 
-export const addressCountryModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const addressCountryModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(COUNTRY_SELECTOR);

package/src/js/modules/fields/address-state.ts

@@ -1,7 +1,10 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import { browserRequest, type BrowserRequestOptions } from '@verbb/formie-core';
+import { getFormBrowserRequestOptions } from '#utils/request-profile';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { ADDRESS_SELECTORS } from '#modules/address/constants';
 import { initFormieCombobox } from '#modules/fields/combobox';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
+import { getThemeClasses, toggleThemeClasses } from '#theme/theme-classes';
 import { createDebug } from '#utils/debug';
 
 const STATE_DYNAMIC_SELECTOR = '[data-formie-address-state-dynamic]';
@@ -212,7 +215,7 @@ function reconcileAutofillValue(fieldState: FieldState): void {
 }
 
 function buildSubdivisionsUrl(action: string, country: string, optionLabel: string, optionValue: string): string {
-    const url = new URL(action.startsWith('/') ? action : `/actions/${action}`, window.location.origin);
+    const url = new URL(/^https?:\/\//.test(action) || action.startsWith('/') ? action : `/actions/${action}`, window.location.origin);
     url.searchParams.set('country', country);
     url.searchParams.set('optionLabel', optionLabel);
     url.searchParams.set('optionValue', optionValue);
@@ -238,6 +241,7 @@ async function fetchSubdivisions(
     optionLabel: string,
     optionValue: string,
     action: string,
+    requestOptions: BrowserRequestOptions,
 ): Promise<SubdivisionsResponse | null> {
     const cacheKey = getSubdivisionsCacheKey(country, optionLabel, optionValue, action);
 
@@ -248,11 +252,11 @@ async function fetchSubdivisions(
     if (!subdivisionInflight.has(cacheKey)) {
         subdivisionInflight.set(cacheKey, (async() => {
             try {
-                const response = await fetch(buildSubdivisionsUrl(action, country, optionLabel, optionValue), {
+                const response = await browserRequest(buildSubdivisionsUrl(action, country, optionLabel, optionValue), {
                     headers: {
                         Accept: 'application/json',
                     },
-                });
+                }, requestOptions);
 
                 if (!response.ok) {
                     subdivisionDataCache.set(cacheKey, null);
@@ -342,9 +346,11 @@ function applyTextThemeClasses(template: AddressStateControl, input: HTMLInputEl
 function applySelectThemeClasses(template: AddressStateControl, select: HTMLSelectElement): void {
     const classes: string[] = [...SELECT_THEME_CLASSES];
 
-    if (template.classList.contains('formie-input-error')) {
-        classes.push('formie-input-error');
-    }
+    getThemeClasses(template, 'fieldControlError').forEach((className) => {
+        if (template.classList.contains(className)) {
+            classes.push(className);
+        }
+    });
 
     select.className = classes.join(' ');
 }
@@ -454,7 +460,7 @@ function syncDatalist(
 function setFieldVisibility(fieldState: FieldState, visible: boolean): void {
     const { stateField, stateControl, required } = fieldState;
 
-    stateField.classList.toggle('formie-conditionally-hidden', !visible);
+    toggleThemeClasses(stateField, stateField, 'conditionalHidden', !visible);
     stateField.toggleAttribute('data-formie-conditionally-hidden', !visible);
 
     if (!visible) {
@@ -502,7 +508,7 @@ function showFetchingUI(fieldState: FieldState): void {
     fieldState.stateControl.setAttribute('aria-hidden', 'true');
     fieldState.stateControl.setAttribute('tabindex', '-1');
 
-    fieldState.stateField.classList.remove('formie-conditionally-hidden');
+    toggleThemeClasses(fieldState.stateField, fieldState.stateField, 'conditionalHidden', false);
     fieldState.stateField.removeAttribute('data-formie-conditionally-hidden');
     fieldState.stateField.setAttribute('data-formie-address-state-skeleton-active', 'true');
 
@@ -632,7 +638,7 @@ async function applyCountryState(
         showFetchingUI(fieldState);
     }
 
-    const response = await fetchSubdivisions(country, optionLabel, optionValue, subdivisionsAction);
+    const response = await fetchSubdivisions(country, optionLabel, optionValue, subdivisionsAction, getFormBrowserRequestOptions(fieldState.addressRoot.closest('form')));
 
     if (fetchGeneration !== fieldState.fetchGeneration) {
         return;
@@ -923,8 +929,10 @@ function initAddressStateField(field: HTMLElement, options: AddressStateOptions)
     };
 }
 
-export const addressStateModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const addressStateModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(STATE_DYNAMIC_SELECTOR);

package/src/js/modules/fields/calculations.ts

@@ -9,7 +9,7 @@ import {
     type CalculationVariableEntry,
 } from '@verbb/formie-core';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
 import { buildFieldValueRegistry, fieldKeyToInputName, normalizeFieldKey, resolveFieldReferenceLive } from '#utils/field-references';
 import { getRowScopedWatchNames, resolveRowScopedFieldReference, type RowScopeParams } from '#utils/field-references.row-scope';
@@ -263,8 +263,10 @@ function bindCalculationsField(root: Element, field: HTMLElement, input: HTMLInp
     };
 }
 
-export const calculationsModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const calculationsModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(INPUT_SELECTOR);

package/src/js/modules/fields/checkbox-radio.ts

@@ -1,5 +1,5 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
-import { dispatchFieldEvent, escapeSelectorValue, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
+import type { BrowserModuleDefinition } from '#contracts/modules';
+import { dispatchFieldEvent, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { createDebug } from '#utils/debug';
 
 const FIELD_SELECTOR = '[data-formie-checkboxes-field-layout], [data-formie-radio-field-layout]';
@@ -213,19 +213,7 @@ function unregisterValidators(form: HTMLFormElement | null): void {
     releaseFormValidators(form, VALIDATOR_SCOPE, [CHECKBOX_MINMAX_VALIDATOR, OTHER_OPTION_TEXT_VALIDATOR]);
 }
 
-function syncCheckedAttribute(input: HTMLInputElement): void {
-    if (input.checked) {
-        input.setAttribute('checked', '');
-    } else {
-        input.removeAttribute('checked');
-    }
-}
-
-function syncRequiredCheckboxes(field: HTMLElement): void {
-    const requiredCheckboxes = Array.from(field.querySelectorAll('input[type="checkbox"][required][data-formie-checkbox-input]')).filter((input): input is HTMLInputElement => {
-        return input instanceof HTMLInputElement;
-    });
-
+function syncRequiredCheckboxes(requiredCheckboxes: HTMLInputElement[]): void {
     if (!requiredCheckboxes.length) {
         return;
     }
@@ -299,27 +287,11 @@ function toggleCheckboxGroup(field: HTMLElement, toggle: HTMLInputElement): void
         // Re-emit change/input so downstream modules (conditions, calculations,
         // validation) react exactly as if the user toggled each box manually.
         input.checked = toggle.checked;
-        syncCheckedAttribute(input);
         input.dispatchEvent(new Event('change', { bubbles: true }));
         input.dispatchEvent(new Event('input', { bubbles: true }));
     });
 }
 
-function syncRadioGroup(input: HTMLInputElement, field: HTMLElement): void {
-    if (!input.checked || !input.name) {
-        syncCheckedAttribute(input);
-        return;
-    }
-
-    const group = Array.from(field.querySelectorAll(`input[type="radio"][name="${escapeSelectorValue(input.name)}"]`)).filter((radio): radio is HTMLInputElement => {
-        return radio instanceof HTMLInputElement;
-    });
-
-    group.forEach((radio) => {
-        syncCheckedAttribute(radio);
-    });
-}
-
 function bindField(field: HTMLElement): () => void {
     const inputs = Array.from(field.querySelectorAll('input[type="checkbox"], input[type="radio"]')).filter((input): input is HTMLInputElement => {
         return input instanceof HTMLInputElement;
@@ -330,20 +302,28 @@ function bindField(field: HTMLElement): () => void {
         return () => {};
     }
 
+    const requiredCheckboxes = inputs.filter((input) => input.type === 'checkbox' && input.required);
+    const form = field.closest('form');
+    const onReset = (event: Event) => {
+        // Native reset restores checked properties after the reset event returns.
+        queueMicrotask(() => {
+            if (!event.defaultPrevented) {
+                syncRequiredCheckboxes(requiredCheckboxes);
+                enforceMaxOptions(field);
+                syncOtherOptionField(field);
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
+
     const listeners = inputs.map((input) => {
         const eventName = input.type === 'radio' ? 'change' : 'click';
         const handler = () => {
-            syncCheckedAttribute(input);
-
             if (input.type === 'checkbox' && isToggleCheckbox(input)) {
                 toggleCheckboxGroup(field, input);
             }
 
-            if (input.type === 'radio') {
-                syncRadioGroup(input, field);
-            }
-
-            syncRequiredCheckboxes(field);
+            syncRequiredCheckboxes(requiredCheckboxes);
             enforceMaxOptions(field);
             queueMicrotask(() => {
                 syncOtherOptionField(field);
@@ -356,7 +336,6 @@ function bindField(field: HTMLElement): () => void {
         };
 
         input.addEventListener(eventName, handler);
-        syncCheckedAttribute(input);
 
         return () => {
             input.removeEventListener(eventName, handler);
@@ -365,7 +344,7 @@ function bindField(field: HTMLElement): () => void {
 
     const destroyOtherOptionBinding = bindOtherOptionField(field);
 
-    syncRequiredCheckboxes(field);
+    syncRequiredCheckboxes(requiredCheckboxes);
     enforceMaxOptions(field);
     syncOtherOptionField(field);
     dispatchFieldEvent(field, MODULE_ID, 'init', {
@@ -376,12 +355,15 @@ function bindField(field: HTMLElement): () => void {
         listeners.forEach((unbind) => {
             unbind();
         });
+        form?.removeEventListener('reset', onReset);
         destroyOtherOptionBinding();
     };
 }
 
-export const checkboxRadioModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const checkboxRadioModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && (

package/src/js/modules/fields/combobox.ts

@@ -1,9 +1,10 @@
 import TomSelect from 'tom-select/dist/esm/tom-select.complete.js';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import comboboxThemeCss from '#theme-css/fields/_combobox.css?inline';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
+import { getThemeClasses } from '#theme/theme-classes';
 import { createDebug } from '#utils/debug';
 
 const SELECT_SELECTOR = 'select[data-formie-combobox-input]';
@@ -15,7 +16,6 @@ ensureModuleStyles(MODULE_ID, [comboboxThemeCss]);
 const NATIVE_THEME_CLASSES = [
     'formie-select',
     'formie-dropdown-input',
-    'formie-input-error',
 ] as const;
 
 export type FormieComboboxOptions = {
@@ -35,7 +35,7 @@ type SelectElement = HTMLSelectElement & {
 function stripNativeThemeClasses(select: HTMLSelectElement): string[] {
     const removed: string[] = [];
 
-    NATIVE_THEME_CLASSES.forEach((className) => {
+    [...NATIVE_THEME_CLASSES, ...getThemeClasses(select, 'fieldControlError')].forEach((className) => {
         if (select.classList.contains(className)) {
             select.classList.remove(className);
             removed.push(className);
@@ -51,8 +51,8 @@ function restoreNativeThemeClasses(select: HTMLSelectElement, classNames: string
     });
 }
 
-function cleanLeakedThemeClasses(element: HTMLElement): void {
-    NATIVE_THEME_CLASSES.forEach((className) => {
+function cleanLeakedThemeClasses(element: HTMLElement, source: HTMLSelectElement): void {
+    [...NATIVE_THEME_CLASSES, ...getThemeClasses(source, 'fieldControlError')].forEach((className) => {
         element.classList.remove(className);
     });
 }
@@ -78,6 +78,8 @@ function removeEmptyOptionFromCombobox(instance: TomSelectInstance): void {
 export function initFormieCombobox(select: SelectElement, options: FormieComboboxOptions = {}): () => void {
     select._formieTomSelect?.destroy();
 
+    const initialValues = Array.from(select.selectedOptions, (option) => option.value).filter(Boolean);
+    const form = select.form;
     const multiple = options.multiple === true;
     const restoredClasses = stripNativeThemeClasses(select);
     const placeholder = resolvePlaceholder(select, options.placeholder);
@@ -115,10 +117,10 @@ export function initFormieCombobox(select: SelectElement, options: FormieCombobo
 
     const instance = new TomSelect(select, mergedOptions) as TomSelectInstance;
     removeEmptyOptionFromCombobox(instance);
-    cleanLeakedThemeClasses(instance.wrapper);
+    cleanLeakedThemeClasses(instance.wrapper, select);
 
     if (instance.dropdown) {
-        cleanLeakedThemeClasses(instance.dropdown);
+        cleanLeakedThemeClasses(instance.dropdown, select);
     }
 
     // Tom Select keeps the native select as a preceding sibling; ensure it never
@@ -127,6 +129,17 @@ export function initFormieCombobox(select: SelectElement, options: FormieCombobo
 
     select._formieTomSelect = instance;
 
+    const onReset = (event: Event) => {
+        // Tom Select replaces native options, so retain the original selection
+        // and restore its display after the browser resets the backing select.
+        queueMicrotask(() => {
+            if (!event.defaultPrevented) {
+                instance.setValue(initialValues);
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
+
     debug.log('Initialized.', {
         inputName: select.name,
         multiple,
@@ -138,6 +151,7 @@ export function initFormieCombobox(select: SelectElement, options: FormieCombobo
     });
 
     return () => {
+        form?.removeEventListener('reset', onReset);
         instance.destroy();
         select.style.removeProperty('display');
         restoreNativeThemeClasses(select, restoredClasses);
@@ -148,8 +162,10 @@ export function initFormieCombobox(select: SelectElement, options: FormieCombobo
     };
 }
 
-export const comboboxModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const comboboxModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(SELECT_SELECTOR);

package/src/js/modules/fields/conditions/config.ts

@@ -13,7 +13,7 @@ function parseConditionSource(value: unknown): ConditionSource | null {
     return {
         raw: typeof candidate.raw === 'string' ? candidate.raw : '',
         target: typeof candidate.target === 'string' ? candidate.target : '',
-        handle: typeof candidate.handle === 'string' ? candidate.handle : '',
+        handle: typeof candidate.domHandle === 'string' ? candidate.domHandle : typeof candidate.handle === 'string' ? candidate.handle : '',
         selector: typeof candidate.selector === 'string' ? candidate.selector : '',
         defaultValue: typeof candidate.defaultValue === 'string' ? candidate.defaultValue : '',
         transformerId: typeof candidate.transformerId === 'string' ? candidate.transformerId : '',
@@ -45,35 +45,32 @@ export function parseConditionSettings(node: Element): ParsedConditionSettings |
 
     try {
         const parsed = JSON.parse(raw) as Record<string, unknown>;
-        const conditions = Array.isArray(parsed.conditions)
-            ? parsed.conditions.filter((condition): condition is ConditionDefinition => {
-                if (!condition || typeof condition !== 'object') {
-                    return false;
-                }
-
-                const candidate = condition as Record<string, unknown>;
-                return typeof candidate.field === 'string' && typeof candidate.condition === 'string';
-            }).map((condition) => {
-                const candidate = condition as Record<string, unknown>;
-
+        const effect = String(parsed.effect ?? parsed.showRule ?? 'show');
+        const valid = (parsed.version == null || parsed.version === 1) && ['all', 'any'].includes(String(parsed.mode ?? parsed.conditionRule ?? 'all')) && ['show', 'hide', 'enable', 'disable'].includes(effect);
+        const rawRules = valid ? parsed.rules ?? parsed.conditions : [null];
+        const conditions = Array.isArray(rawRules)
+            ? rawRules.map((row) => {
+                const candidate = row && typeof row === 'object' ? row as Record<string, unknown> : {};
                 return {
-                    field: condition.field,
+                    field: typeof candidate.field === 'string' ? candidate.field : '',
                     source: parseConditionSource(candidate.source),
-                    condition: condition.condition,
-                    value: condition.value,
+                    condition: String(candidate.operator ?? candidate.condition ?? ''),
+                    valueType: candidate.valueType as ConditionDefinition['valueType'],
+                    browserSafe: candidate.browserSafe !== false,
+                    value: candidate.value,
                 };
             })
-            : [];
+            : [{ field: '', condition: '', value: null, browserSafe: false }];
 
         return {
-            showRule: parsed.showRule === 'hide' ? 'hide' : 'show',
-            conditionRule: parsed.conditionRule === 'any' ? 'any' : 'all',
+            showRule: ['hide', 'enable', 'disable'].includes(effect) ? effect as ParsedConditionSettings['showRule'] : 'show',
+            conditionRule: (parsed.mode ?? parsed.conditionRule) === 'any' ? 'any' : 'all',
             clearOnHide: parsed.clearOnHide !== false,
             isNested: Boolean(parsed.isNested),
             conditions,
         };
     } catch (error) {
-        console.error('[formie] Invalid condition JSON.', error);
-        return null;
+        console.error('[formie] Invalid condition JSON.');
+        return { showRule: 'show', conditionRule: 'all', clearOnHide: true, isNested: false, conditions: [{ field: '', condition: '', browserSafe: false }] };
     }
 }