@verbb/formie-browser 1.0.13 → 1.0.14

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

@@ -1,14 +1,13 @@
+import { getThemeClasses } from '#theme/theme-classes';
+
 const CONDITION_DISABLED_ATTR = 'data-formie-conditions-disabled';
 const PRESERVED_DISABLED_ATTR = 'data-formie-preserve-disabled';
 const CONDITIONAL_HIDDEN_ATTR = 'data-formie-conditionally-hidden';
 const PAGE_HIDDEN_ATTR = 'data-formie-page-hidden';
-const CONDITIONAL_HIDDEN_CLASS = 'formie-conditionally-hidden';
 const CP_MUTED_CLASS = 'fui-cp-muted-conditional-field';
 const CP_MUTED_EXPANDED_CLASS = 'fui-cp-muted-conditional-field--expanded';
 const CP_MUTED_ATTR = 'data-formie-cp-muted';
-const PAGE_HIDDEN_CLASS = 'formie-page-hidden';
 const ROW_HIDDEN_ATTR = 'data-formie-row-hidden';
-const ROW_HIDDEN_CLASS = 'formie-row-hidden';
 const FIELD_COUNT_ATTR = 'data-formie-field-count';
 const ROW_SELECTOR = '[data-formie-row], [data-formie-subfield-row], [data-formie-nested-field-row]';
 const FIELD_SELECTOR = ':scope > [data-formie-field]';
@@ -35,7 +34,7 @@ function clearConditionNodeValues(node: Element): void {
                     option.selected = false;
                 });
             } else {
-                element.selectedIndex = 0;
+                element.selectedIndex = -1;
             }
         }
 
@@ -43,12 +42,14 @@ function clearConditionNodeValues(node: Element): void {
             element.value = '';
         }
     });
+
+    node.dispatchEvent(new CustomEvent('formie:field:clear', { bubbles: true }));
 }
 
 function setVisibilityState(node: Element, hidden: boolean): boolean {
     const isPage = node.hasAttribute('data-formie-page');
     const hiddenAttr = isPage ? PAGE_HIDDEN_ATTR : CONDITIONAL_HIDDEN_ATTR;
-    const hiddenClass = isPage ? PAGE_HIDDEN_CLASS : CONDITIONAL_HIDDEN_CLASS;
+    const hiddenClasses = getThemeClasses(node, isPage ? 'pageHidden' : 'conditionalHidden');
     const wasHidden = node.hasAttribute(hiddenAttr);
 
     if (hidden) {
@@ -56,17 +57,13 @@ function setVisibilityState(node: Element, hidden: boolean): boolean {
             node.setAttribute(hiddenAttr, 'true');
         }
 
-        if (!node.classList.contains(hiddenClass)) {
-            node.classList.add(hiddenClass);
-        }
+        node.classList.add(...hiddenClasses);
     } else {
         if (wasHidden) {
             node.removeAttribute(hiddenAttr);
         }
 
-        if (node.classList.contains(hiddenClass)) {
-            node.classList.remove(hiddenClass);
-        }
+        node.classList.remove(...hiddenClasses);
     }
 
     return wasHidden !== hidden;
@@ -152,6 +149,7 @@ function isFieldVisible(field: Element): boolean {
 }
 
 function syncRowState(row: Element): void {
+    const hiddenClasses = getThemeClasses(row, 'rowHidden');
     const directFields = Array.from(row.querySelectorAll(FIELD_SELECTOR));
     const visibleFieldCount = directFields.filter((field) => {
         return isFieldVisible(field);
@@ -168,9 +166,7 @@ function syncRowState(row: Element): void {
             row.removeAttribute(ROW_HIDDEN_ATTR);
         }
 
-        if (row.classList.contains(ROW_HIDDEN_CLASS)) {
-            row.classList.remove(ROW_HIDDEN_CLASS);
-        }
+        row.classList.remove(...hiddenClasses);
 
         return;
     }
@@ -183,9 +179,7 @@ function syncRowState(row: Element): void {
         row.setAttribute(ROW_HIDDEN_ATTR, 'true');
     }
 
-    if (!row.classList.contains(ROW_HIDDEN_CLASS)) {
-        row.classList.add(ROW_HIDDEN_CLASS);
-    }
+    row.classList.add(...hiddenClasses);
 }
 
 function clearCpMutedState(node: Element): void {
@@ -197,8 +191,8 @@ function clearCpMutedState(node: Element): void {
 function clearHideState(node: Element): void {
     node.removeAttribute(CONDITIONAL_HIDDEN_ATTR);
     node.removeAttribute(PAGE_HIDDEN_ATTR);
-    node.classList.remove(CONDITIONAL_HIDDEN_CLASS);
-    node.classList.remove(PAGE_HIDDEN_CLASS);
+    node.classList.remove(...getThemeClasses(node, 'conditionalHidden'));
+    node.classList.remove(...getThemeClasses(node, 'pageHidden'));
 }
 
 function syncAncestorRows(node: Element): void {
@@ -214,8 +208,15 @@ export function applyConditionVisibility(
     node: Element,
     hidden: boolean,
     clearOnHide: boolean,
-    options: { displayMode?: 'hide' | 'muted' } = {},
+    options: { displayMode?: 'hide' | 'muted'; disabledOnly?: boolean } = {},
 ): boolean {
+    if (options.disabledOnly) {
+        const changed = node.hasAttribute('data-formie-conditionally-disabled') !== hidden;
+        node.toggleAttribute('data-formie-conditionally-disabled', hidden);
+        syncDisabledState(node, hidden);
+        if (hidden && clearOnHide && changed) clearConditionNodeValues(node);
+        return changed;
+    }
     if (options.displayMode === 'muted') {
         return applyMutedConditionVisibility(node, hidden);
     }
@@ -246,9 +247,7 @@ function applyMutedConditionVisibility(node: Element, hidden: boolean): boolean
 
     if (hidden) {
         if (node.hasAttribute(CONDITIONAL_HIDDEN_ATTR)
-            || node.hasAttribute(PAGE_HIDDEN_ATTR)
-            || node.classList.contains(CONDITIONAL_HIDDEN_CLASS)
-            || node.classList.contains(PAGE_HIDDEN_CLASS)) {
+            || node.hasAttribute(PAGE_HIDDEN_ATTR)) {
             clearHideState(node);
             stateChanged = true;
         }
@@ -271,9 +270,7 @@ function applyMutedConditionVisibility(node: Element, hidden: boolean): boolean
         }
 
         if (node.hasAttribute(CONDITIONAL_HIDDEN_ATTR)
-            || node.hasAttribute(PAGE_HIDDEN_ATTR)
-            || node.classList.contains(CONDITIONAL_HIDDEN_CLASS)
-            || node.classList.contains(PAGE_HIDDEN_CLASS)) {
+            || node.hasAttribute(PAGE_HIDDEN_ATTR)) {
             clearHideState(node);
             stateChanged = true;
         }

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

@@ -1,43 +1,35 @@
-import { evaluateConditionDefinition, finalizeConditionEvaluation } from '@verbb/formie-core';
+import { evaluateCondition, finalizeConditionEvaluation } from '@verbb/formie-core';
 
-import type { ConditionDefinition, ParsedConditionSettings, ConditionInput } from '#modules/fields/conditions/types';
+import type { ConditionDefinition, ParsedConditionSettings } from '#modules/fields/conditions/types';
 import { resolveConditionSource } from '#modules/fields/conditions/references';
-import { readConditionValues } from '#modules/fields/conditions/values';
-
-function isInputVisible(input: ConditionInput): boolean {
-    if (
-        input.closest('[data-formie-conditionally-hidden]')
-        || input.closest('[data-formie-page-hidden]')
-        || input.closest('[hidden]')
-        || input.closest('[aria-hidden="true"]')
-    ) {
-        return false;
-    }
-
-    return !!(input.offsetWidth || input.offsetHeight || input.getClientRects().length);
-}
-
-function getConditionVisibility(inputs: ConditionInput[]): boolean | null {
-    if (!inputs.length) {
-        return null;
-    }
-
-    return inputs.some((input) => {
-        return isInputVisible(input);
-    });
-}
+import { readSubmissionConditionValues } from '#modules/fields/conditions/submission-context';
+import { readConditionValues, readConditionProjection } from '#modules/fields/conditions/values';
 
 export function evaluateConditionSettings(
     settings: ParsedConditionSettings,
     getConditionInputs: (condition: ConditionDefinition) => Array<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
+    options: {
+        root?: Element;
+        from?: Element;
+    } = {},
 ): { finalResult: boolean; shouldHide: boolean } {
+    const root = options.root;
+    const from = options.from || root;
+
     const groupedResults = settings.conditions.map((condition) => {
         const inputs = getConditionInputs(condition);
         const source = resolveConditionSource(condition);
 
-        return evaluateConditionDefinition(condition, readConditionValues(inputs, source), {
-            visibility: getConditionVisibility(inputs),
-        });
+        // `{submission:*}` is not a DOM field — read the snapshot emitted on the form.
+        const actualValues = source?.target === 'submission' && root && from
+            ? readSubmissionConditionValues(root, source, from)
+            : readConditionValues(inputs, source);
+
+        if (condition.browserSafe === false || Boolean(source?.transformerId) || source?.isValid === false || (!inputs.length && source?.target !== 'submission')) return { value: null, diagnostics: [{ code: 'unresolvedReference' }] };
+        const type = condition.valueType ?? (actualValues.length > 1 ? 'collection' : 'text');
+        const value = source?.target === 'submission' ? (type === 'collection' ? actualValues : actualValues[0] ?? null) : readConditionProjection(inputs, source, type, Number(from?.querySelector('input,select,textarea')?.getAttribute('name')?.match(/\[([0-9]+)\]/)?.[1]));
+        if (value && typeof value === 'object' && 'conditionDiagnostic' in value) return { value: null, diagnostics: [{ code: String(value.conditionDiagnostic) }] };
+        return evaluateCondition(condition.condition, value, condition.value, type);
     });
 
     return finalizeConditionEvaluation(settings, groupedResults);

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

@@ -33,7 +33,8 @@ function getRowScope(node: Element): Element | null {
 
 function getFieldInputs(fieldNode: Element): ConditionInput[] {
     return Array.from(fieldNode.querySelectorAll(CONDITION_INPUT_SELECTOR)).filter((element): element is ConditionInput => {
-        return isConditionInput(element);
+        // Enhanced controls add unnamed search/display inputs that are not field values.
+        return isConditionInput(element) && Boolean(element.name);
     });
 }
 
@@ -93,7 +94,12 @@ function preferSameRow<TElement extends Element>(targetNode: Element, candidates
 }
 
 export function resolveConditionSource(condition: ConditionDefinition): ConditionSource | null {
-    if (condition.source?.target === 'field' && condition.source.handle) {
+    if (!condition.source?.target || !condition.source.handle) {
+        return null;
+    }
+
+    // Field inputs + submission snapshot keys both use `source.handle`.
+    if (condition.source.target === 'field' || condition.source.target === 'submission') {
         return condition.source;
     }
 
@@ -112,10 +118,11 @@ export function queryConditionInputs(
     }
 
     const escapedFieldHandle = escapeSelectorValue(source.handle);
+    const explicitScope = Boolean(source.transformerParams.scope);
     const fieldMatches = Array.from(root.querySelectorAll(`[data-formie-field-handle="${escapedFieldHandle}"]`));
 
     if (fieldMatches.length) {
-        return preferSameRow(targetNode, fieldMatches).flatMap((fieldNode) => {
+        return (explicitScope ? fieldMatches : preferSameRow(targetNode, fieldMatches)).flatMap((fieldNode) => {
             return filterInputsBySelector(getFieldInputs(fieldNode), source.selector);
         });
     }
@@ -130,7 +137,7 @@ export function queryConditionInputs(
     });
 
     if (direct.length || multi.length) {
-        return preferSameRow(targetNode, [...direct, ...multi]);
+        return explicitScope ? [...direct, ...multi] : preferSameRow(targetNode, [...direct, ...multi]);
     }
 
     if (!source.handle.includes('__ROW__')) {
@@ -139,7 +146,7 @@ export function queryConditionInputs(
 
     const rowToken = getNodeRowToken(targetNode);
 
-    if (rowToken) {
+    if (rowToken && !explicitScope) {
         const rowFieldName = fieldKeyToInputName(source.handle.replace(/__ROW__/g, rowToken));
         const escapedRowFieldName = escapeSelectorValue(rowFieldName);
         const rowDirect = Array.from(root.querySelectorAll(`[name="${escapedRowFieldName}"]`)).filter((element): element is ConditionInput => {
@@ -154,6 +161,10 @@ export function queryConditionInputs(
         }
     }
 
+    if (!explicitScope) {
+        return [];
+    }
+
     const regexString = fieldKeyToInputName(source.handle)
         .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
         .replace(/__ROW__/g, '\\d+');

package/src/js/modules/fields/conditions/submission-context.ts

@@ -0,0 +1,80 @@
+import type { ConditionSource } from '#modules/fields/conditions/types';
+
+export const SUBMISSION_CONTEXT_ATTR = 'data-formie-submission';
+export const SUBMISSION_CONTEXT_CHANGE_EVENT = 'formie:submission-context-change';
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+/**
+ * Find the nearest form/host that carries the submission condition snapshot.
+ * Prefer ancestors of `from` (the conditioned node), then fall back to `root`.
+ */
+export function findSubmissionContextHost(root: Element, from: Element = root): Element | null {
+    const closest = from.closest(`[${SUBMISSION_CONTEXT_ATTR}]`);
+
+    if (closest) {
+        return closest;
+    }
+
+    if (root instanceof Element && root.hasAttribute(SUBMISSION_CONTEXT_ATTR)) {
+        return root;
+    }
+
+    return root.querySelector(`[${SUBMISSION_CONTEXT_ATTR}]`);
+}
+
+export function readSubmissionContext(root: Element, from: Element = root): Record<string, string> {
+    const host = findSubmissionContextHost(root, from);
+    const raw = host?.getAttribute(SUBMISSION_CONTEXT_ATTR);
+
+    if (!raw) {
+        return {};
+    }
+
+    try {
+        const parsed = JSON.parse(raw) as unknown;
+
+        if (!isRecord(parsed)) {
+            return {};
+        }
+
+        return Object.fromEntries(Object.entries(parsed).map(([key, value]) => {
+            return [key, value == null ? '' : String(value)];
+        }));
+    } catch (error) {
+        console.error('[formie] Invalid submission context JSON.', error);
+        return {};
+    }
+}
+
+/**
+ * Resolve `{submission:status}` (etc.) from the emitted snapshot.
+ * Handle is the property key from PHP (`status`, `title`, `formName`, …).
+ */
+export function readSubmissionConditionValues(
+    root: Element,
+    source: ConditionSource,
+    from: Element = root,
+): string[] {
+    const context = readSubmissionContext(root, from);
+    const key = String(source.handle || '').trim();
+    let value = '';
+
+    if (key !== '') {
+        if (Object.prototype.hasOwnProperty.call(context, key)) {
+            value = context[key] ?? '';
+        } else {
+            // Variables map uses camelCase (`submissionStatus`); tolerate that alias.
+            const aliased = `submission${key.charAt(0).toUpperCase()}${key.slice(1)}`;
+            value = context[aliased] ?? '';
+        }
+    }
+
+    if (value === '' && source.defaultValue) {
+        value = source.defaultValue;
+    }
+
+    return [value];
+}

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

@@ -15,11 +15,13 @@ export type ConditionDefinition = {
     field: string;
     source?: ConditionSource | null;
     condition: string;
+    valueType?: import('@verbb/formie-core').ConditionValueType;
+    browserSafe?: boolean;
     value?: unknown;
 };
 
 export type ParsedConditionSettings = {
-    showRule: 'show' | 'hide';
+    showRule: 'show' | 'hide' | 'enable' | 'disable';
     conditionRule: 'all' | 'any';
     clearOnHide: boolean;
     isNested: boolean;

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

@@ -1,4 +1,4 @@
-import { applyConditionSource } from '#modules/fields/conditions/transforms';
+import { selectConditionRows } from '@verbb/formie-core';
 import type { ConditionInput, ConditionSource } from '#modules/fields/conditions/types';
 
 function getInputKey(input: ConditionInput, index: number): string {
@@ -105,11 +105,36 @@ export function readConditionValues(inputs: ConditionInput[], source: ConditionS
         return readInputGroupValues(group, source?.selector || '');
     });
 
-    return applyConditionSource(rawValues, source);
+    return (rawValues.length === 0 || rawValues.every((value) => value === '')) && source?.defaultValue ? [source.defaultValue] : rawValues;
 }
 
-export function isConditionValueEmpty(values: string[]): boolean {
-    return values.length === 0 || values.every((value) => {
-        return value.trim() === '';
-    });
+// DOM controls adapt to the same normalized condition projection as client-rendered values.
+export function readConditionProjection(inputs: ConditionInput[], source: ConditionSource | null, type: import('@verbb/formie-core').ConditionValueType, currentRow?: number): unknown {
+    if (source?.transformerParams.scope) {
+        const grouped = new Map<string, ConditionInput[]>();
+        for (const input of inputs) {
+            const row = input.name.match(/\[([0-9]+)\]/)?.[1];
+            if (row != null) grouped.set(row, [...(grouped.get(row) ?? []), input]);
+        }
+        const rows = [...grouped.values()].map((group) => readConditionProjection(group, { ...source, transformerParams: {} }, type === 'collection' ? (group.length > 1 ? 'collection' : 'text') : type));
+        const selected = selectConditionRows(rows, source.transformerParams, currentRow);
+        if (selected.diagnostic) return { conditionDiagnostic: selected.diagnostic };
+        return source.transformerParams.scope === 'rows' && !Array.isArray(selected.value) ? [selected.value] : selected.value;
+    }
+    if (type === 'boolean') {
+        const checkbox = inputs.find((input) => input instanceof HTMLInputElement && input.type === 'checkbox') as HTMLInputElement | undefined;
+        if (checkbox) return checkbox.checked;
+    }
+    if (['date', 'time', 'datetime'].includes(type)) {
+        const parts: Record<string, string> = {};
+        for (const input of inputs) {
+            const key = input.name.match(/\[(year|month|day|hour|minute|second|ampm|timezone)\]$/)?.[1];
+            if (key && input.value !== '') parts[key] = input.value;
+        }
+        if (Object.keys(parts).length) return parts;
+    }
+    const values = readConditionValues(inputs, source);
+    // Empty hidden companions let unchecked groups post a value, but are not
+    // selected answers in the server's normalized collection.
+    return type === 'collection' ? values.filter((value) => value !== '') : values[0] ?? null;
 }

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

@@ -1,13 +1,16 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { CONDITION_SELECTOR, getConditionNodes, parseConditionSettings } from '#modules/fields/conditions/config';
 import { applyConditionVisibility } from '#modules/fields/conditions/effects';
 import { evaluateConditionSettings } from '#modules/fields/conditions/evaluator';
 import { queryConditionInputs } from '#modules/fields/conditions/references';
+import {
+    SUBMISSION_CONTEXT_ATTR,
+    SUBMISSION_CONTEXT_CHANGE_EVENT,
+} from '#modules/fields/conditions/submission-context';
 import type { ConditionEntry, ConditionInput } from '#modules/fields/conditions/types';
 import { getConditionInputEventNames } from '#modules/fields/conditions/values';
 import { createDebug } from '#utils/debug';
 
-const MAX_EVALUATION_PASSES = 4;
 const debug = createDebug('conditions');
 
 function uniqueConditionInputs(inputs: ConditionInput[]): ConditionInput[] {
@@ -23,9 +26,11 @@ function uniqueConditionInputs(inputs: ConditionInput[]): ConditionInput[] {
     });
 }
 
-export const conditionsModule: FormieModuleDefinition = {
-    id: 'conditions',
-    kind: 'field',
+export const conditionsModule: BrowserModuleDefinition = {
+    moduleId: 'formie:conditions',
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
+    kind: 'core',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && (
             ctx.target.matches(CONDITION_SELECTOR) ||
@@ -42,6 +47,7 @@ export const conditionsModule: FormieModuleDefinition = {
 
         const sourceUnbinds: Array<() => void> = [];
         let entries: ConditionEntry[] = [];
+        let cycles = new Set<Element>();
         let evaluationQueued = false;
         let rebuildQueued = false;
 
@@ -56,7 +62,7 @@ export const conditionsModule: FormieModuleDefinition = {
             return getConditionNodes(scopeRoot).flatMap((node) => {
                 const settings = parseConditionSettings(node);
 
-                if (!settings || !settings.conditions.length) {
+                if (!settings) {
                     return [];
                 }
 
@@ -72,6 +78,34 @@ export const conditionsModule: FormieModuleDefinition = {
             });
         };
 
+        const orderEntries = (items: ConditionEntry[]): ConditionEntry[] => {
+            const byNode = new Map(items.map((entry) => [entry.node, entry]));
+            const visited = new Set<Element>();
+            const visiting: Element[] = [];
+            const ordered: ConditionEntry[] = [];
+            cycles = new Set();
+            const visit = (entry: ConditionEntry): void => {
+                if (visited.has(entry.node)) return;
+                const index = visiting.indexOf(entry.node);
+                if (index >= 0) { visiting.slice(index).forEach((node) => cycles.add(node)); return; }
+                visiting.push(entry.node);
+                const ancestors = (node: Element | null) => {
+                    for (let current = node?.closest(CONDITION_SELECTOR); current; current = current.parentElement?.closest(CONDITION_SELECTOR)) {
+                        const dependency = byNode.get(current);
+                        if (dependency) visit(dependency);
+                    }
+                };
+                ancestors(entry.node.parentElement);
+                entry.sourceInputs.forEach((input) => ancestors(input));
+                visiting.pop();
+                visited.add(entry.node);
+                ordered.push(entry);
+            };
+            items.forEach(visit);
+            if (cycles.size) debug.warn('Condition dependency cycle.', { count: cycles.size });
+            return ordered;
+        };
+
         const cpDisplayMode = ctx.options?.cpDisplayMode === 'muted' ? 'muted' : 'hide';
         let isApplyingConditions = false;
 
@@ -79,8 +113,11 @@ export const conditionsModule: FormieModuleDefinition = {
             let hasStateChanges = false;
 
             entries.forEach((entry) => {
-                const result = evaluateConditionSettings(entry.settings, (condition) => {
+                const result = cycles.has(entry.node) ? { finalResult: false, shouldHide: ['show', 'enable'].includes(entry.settings.showRule), diagnostics: [{ code: 'dependencyCycle' }] } : evaluateConditionSettings(entry.settings, (condition) => {
                     return queryConditionInputs(scopeRoot, entry.node, condition);
+                }, {
+                    root: scopeRoot,
+                    from: entry.node,
                 });
 
                 const displayMode = entry.node.hasAttribute('data-formie-page')
@@ -91,7 +128,7 @@ export const conditionsModule: FormieModuleDefinition = {
                     entry.node,
                     result.shouldHide,
                     entry.settings.clearOnHide,
-                    { displayMode },
+                    { displayMode, disabledOnly: ['enable', 'disable'].includes(entry.settings.showRule) },
                 );
                 hasStateChanges = hasStateChanges || stateChanged;
                 debug.log('Condition evaluated.', {
@@ -105,6 +142,7 @@ export const conditionsModule: FormieModuleDefinition = {
                     shouldHide: result.shouldHide,
                     finalResult: result.finalResult,
                     clearOnHide: entry.settings.clearOnHide,
+                    diagnostics: cycles.has(entry.node) ? [{ code: 'dependencyCycle' }] : [],
                 });
             });
 
@@ -119,15 +157,7 @@ export const conditionsModule: FormieModuleDefinition = {
             isApplyingConditions = true;
 
             try {
-                for (let pass = 0; pass < MAX_EVALUATION_PASSES; pass += 1) {
-                    if (!runEvaluationPass()) {
-                        break;
-                    }
-
-                    if (pass === MAX_EVALUATION_PASSES - 1) {
-                        debug.warn('Reached max evaluation passes.', { maxPasses: MAX_EVALUATION_PASSES });
-                    }
-                }
+                runEvaluationPass();
             } finally {
                 isApplyingConditions = false;
             }
@@ -185,12 +215,22 @@ export const conditionsModule: FormieModuleDefinition = {
                 sourceUnbinds.push(() => {
                     ctx.form?.removeEventListener('reset', resetHandler);
                 });
+
+                // CP status menu (etc.) updates `data-formie-submission` and fires this event.
+                const submissionContextHandler = () => {
+                    scheduleEvaluateAll();
+                };
+
+                ctx.form.addEventListener(SUBMISSION_CONTEXT_CHANGE_EVENT, submissionContextHandler);
+                sourceUnbinds.push(() => {
+                    ctx.form?.removeEventListener(SUBMISSION_CONTEXT_CHANGE_EVENT, submissionContextHandler);
+                });
             }
         };
 
         const rebuild = (): void => {
             cleanupSourceBindings();
-            entries = buildEntries();
+            entries = orderEntries(buildEntries());
             bindSourceInputs();
             debug.log('Rebuilt condition graph.', {
                 entryCount: entries.length,
@@ -249,6 +289,7 @@ export const conditionsModule: FormieModuleDefinition = {
                 'data-formie-conditionally-hidden',
                 'data-formie-page-hidden',
                 'data-formie-row-hidden',
+                SUBMISSION_CONTEXT_ATTR,
             ],
         });
 

package/src/js/modules/fields/custom-google-maps.ts

@@ -1,4 +1,4 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { getModuleFieldTarget, observeMatchingElements } from '#modules/fields/shared';
 
 const MODULE_ID = 'custom-google-maps';
@@ -390,8 +390,10 @@ function initCustomGoogleMaps(root: HTMLElement): () => void {
     };
 }
 
-export const customGoogleMapsModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const customGoogleMapsModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: ({ target }) => {
         return target instanceof Element && (

package/src/js/modules/fields/custom-link.ts

@@ -1,4 +1,4 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { getModuleFieldTarget, observeMatchingElements } from '#modules/fields/shared';
 
 const MODULE_ID = 'custom-link';
@@ -69,8 +69,10 @@ function initCustomLink(link: HTMLElement): () => void {
     };
 }
 
-export const customLinkModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const customLinkModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: ({ target }) => {
         return target instanceof Element && (

package/src/js/modules/fields/custom-maps.ts

@@ -1,4 +1,4 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import type * as Leaflet from 'leaflet';
 import leafletCss from 'leaflet/dist/leaflet.css?inline';
 import { getModuleFieldTarget, observeMatchingElements } from '#modules/fields/shared';
@@ -313,8 +313,10 @@ function initCustomMaps(root: HTMLElement): () => void {
     };
 }
 
-export const customMapsModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const customMapsModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: ({ target }) => {
         return target instanceof Element && (