fix(ui): expand wildcard admin.condition paths per realized row

Path-valued conditions on fields nested under arrays/blocks (e.g.
`array.*.field`) were not evaluating client-side: useClientCondition-
Visibility passed the wildcard fieldPath verbatim into evaluateConditions,
the visibility map ended up keyed by `array.*.field`, and WatchCondition
looked up by concrete path (`array.0.field`) — miss → fall through to the
server-driven passesCondition (one keystroke lag, stale state on first
paint).

Walk `data` along each ref's fieldPath whenever it contains a `*`
segment, emit one entry per array index encountered, and forward the
row-local data slice as `siblingData` so sibling-scoped conditions read
the right row. Non-wildcard refs go through unchanged.

Verified in browser against the new Conditions demo: Add Array row with
controller off keeps the dependent row field hidden immediately, toggling
the row controller flips visibility synchronously, and toggling the
top-level controller doesn't disturb row state.

packages/ui/src/forms/Form/useClientConditionVisibility.ts

@@ -131,10 +131,30 @@ export function useClientConditionVisibility(
     if (resolved.size === 0) {
       return new Map<string, boolean>()
     }
-    const fields = Array.from(resolved.entries(), ([path, condition]) => ({
-      condition,
-      path,
-    }))
+    // Phase 14: expand wildcard fieldPaths (e.g. `rows.*.dependentRowField`)
+    // into concrete row paths against the live document data. WatchCondition
+    // looks up by concrete path (`rows.0.dependentRowField`); without this
+    // step the visibility map carries only wildcard keys, the lookup misses,
+    // and the field falls back to the server-driven `passesCondition` which
+    // lags one keystroke behind.
+    const fields: Array<{
+      condition: ConditionFn
+      path: string
+      siblingData?: unknown
+    }> = []
+    for (const [fieldPath, condition] of resolved) {
+      if (!fieldPath.includes('.*.')) {
+        fields.push({ condition, path: fieldPath })
+        continue
+      }
+      for (const expanded of expandWildcardPath(fieldPath, data)) {
+        fields.push({
+          condition,
+          path: expanded.concretePath,
+          siblingData: expanded.siblingData,
+        })
+      }
+    }
     return evaluateConditions({
       context: { blockData, operation, user },
       data,
@@ -144,3 +164,65 @@ export function useClientConditionVisibility(
     // in the caller). resolved changes only when the import map changes.
   }, [blockData, data, operation, resolved, user])
 }
+
+type ExpandedPath = {
+  concretePath: string
+  /**
+   * The data slice immediately containing the leaf field — the row object for
+   * an array-row field, or the parent row when nested deeper. Forwarded to
+   * `evaluateConditions` so sibling-scoped conditions read the right row.
+   */
+  siblingData: unknown
+}
+
+/**
+ * Walks `data` along `fieldPath`, expanding each `*` segment into one entry
+ * per array index it encounters. Returns concrete paths plus the sibling data
+ * slice the leaf field belongs to. Non-array values at a wildcard segment are
+ * silently skipped — keeps the helper safe against partial form state.
+ */
+function expandWildcardPath(fieldPath: string, data: unknown): ExpandedPath[] {
+  const segments = fieldPath.split('.')
+  const out: ExpandedPath[] = []
+  walk(segments, 0, data, [], out)
+  return out
+}
+
+function walk(
+  segments: string[],
+  index: number,
+  current: unknown,
+  resolvedSegments: string[],
+  out: ExpandedPath[],
+): void {
+  if (current == null) {
+    return
+  }
+  if (index === segments.length - 1) {
+    out.push({
+      concretePath: [...resolvedSegments, segments[index]].join('.'),
+      siblingData: current,
+    })
+    return
+  }
+  const segment = segments[index]
+  if (segment === '*') {
+    if (!Array.isArray(current)) {
+      return
+    }
+    for (let i = 0; i < current.length; i++) {
+      walk(segments, index + 1, current[i], [...resolvedSegments, String(i)], out)
+    }
+    return
+  }
+  if (typeof current !== 'object') {
+    return
+  }
+  walk(
+    segments,
+    index + 1,
+    (current as Record<string, unknown>)[segment],
+    [...resolvedSegments, segment],
+    out,
+  )
+}

test/form-state/collections/Conditions/conditions/showWhenChecked.ts

@@ -0,0 +1,7 @@
+'use client'
+
+import type { Condition } from 'payload'
+
+export const showWhenChecked: Condition = (data) => {
+  return Boolean((data as { showConditionalFields?: boolean })?.showConditionalFields)
+}

test/form-state/collections/Conditions/conditions/showWhenRowChecked.ts

@@ -0,0 +1,7 @@
+'use client'
+
+import type { Condition } from 'payload'
+
+export const showWhenRowChecked: Condition = (_data, siblingData) => {
+  return Boolean((siblingData as { showConditionalFields?: boolean })?.showConditionalFields)
+}

test/form-state/collections/Conditions/index.ts

@@ -2,21 +2,6 @@ import type { CollectionConfig } from 'payload'
 
 export const conditionsSlug = 'conditions'
 
-/**
- * Demo collection exercising the three path-valued condition flavors
- * supported in Payload v4 form-state. Field names are deliberately
- * functional (`controller` / `dependent`) rather than scenario-flavored
- * so the demo reads as a pure exercise of the visibility wiring.
- *
- * 1. `topLevelCheckbox` (controller, boolean) → `dependentTextA`
- * 2. `topLevelSelect`   (controller, enum)    → `dependentTextB`,
- *                                               `dependentNumberB`
- * 3. `rows.*.rowController` (sibling-scoped)  → `rows.*.dependentRowField`
- *
- * Inline `admin.condition: () => boolean` is no longer demonstrated. All
- * conditions reference an importable module so they bundle to the client
- * and evaluate synchronously.
- */
 export const ConditionsCollection: CollectionConfig = {
   slug: conditionsSlug,
   admin: {
@@ -28,65 +13,34 @@ export const ConditionsCollection: CollectionConfig = {
       type: 'text',
     },
     {
-      name: 'topLevelCheckbox',
+      name: 'showConditionalFields',
       type: 'checkbox',
-      label: 'Top-level checkbox controller (boolean)',
-      defaultValue: false,
+      label: 'Show conditional fields?',
     },
     {
-      name: 'dependentTextA',
+      name: 'conditionalTextField',
       type: 'text',
-      label: 'Dependent text A — visible when topLevelCheckbox is true',
+      label: 'Visible when `showConditionalFields` is true',
       admin: {
-        condition: './collections/Conditions/conditions/showWhenCheckboxOn.js#showWhenCheckboxOn',
+        condition: './collections/Conditions/conditions/showWhenChecked.js#showWhenChecked',
       },
     },
     {
-      name: 'topLevelSelect',
-      type: 'select',
-      label: 'Top-level select controller (enum)',
-      defaultValue: 'optionA',
-      options: [
-        { label: 'Option A', value: 'optionA' },
-        { label: 'Option B', value: 'optionB' },
-        { label: 'Option C', value: 'optionC' },
-      ],
-    },
-    {
-      name: 'dependentTextB',
-      type: 'text',
-      label: 'Dependent text B — visible when topLevelSelect === optionB',
-      admin: {
-        condition: './collections/Conditions/conditions/showWhenSelectIsB.js#showWhenSelectIsB',
-      },
-    },
-    {
-      name: 'dependentNumberB',
-      type: 'number',
-      label: 'Dependent number B — visible when topLevelSelect === optionB',
-      admin: {
-        condition: './collections/Conditions/conditions/showWhenSelectIsB.js#showWhenSelectIsB',
-      },
-    },
-    {
-      name: 'rows',
+      name: 'array',
       type: 'array',
-      label: 'Per-row controller / dependent (sibling-scoped condition)',
-      labels: { singular: 'Row', plural: 'Rows' },
       fields: [
         {
-          name: 'rowController',
+          name: 'showConditionalFields',
           type: 'checkbox',
-          label: 'Row controller',
-          defaultValue: false,
+          label: 'Show conditional fields?',
         },
         {
-          name: 'dependentRowField',
+          name: 'conditionalRowField',
           type: 'text',
-          label: 'Dependent row field — visible when rowController is true',
+          label: 'Visible when `showConditionalFields` is true in this row',
           admin: {
             condition:
-              './collections/Conditions/conditions/showWhenRowControllerOn.js#showWhenRowControllerOn',
+              './collections/Conditions/conditions/showWhenRowChecked.js#showWhenRowChecked',
           },
         },
       ],

test/form-state/payload-types.ts

@@ -248,15 +248,12 @@ export interface Array {
 export interface Condition {
   id: string;
   title?: string | null;
-  topLevelCheckbox?: boolean | null;
-  dependentTextA?: string | null;
-  topLevelSelect?: ('optionA' | 'optionB' | 'optionC') | null;
-  dependentTextB?: string | null;
-  dependentNumberB?: number | null;
-  rows?:
+  showConditionalFields?: boolean | null;
+  conditionalTextField?: string | null;
+  array?:
     | {
-        rowController?: boolean | null;
-        dependentRowField?: string | null;
+        showConditionalFields?: boolean | null;
+        conditionalRowField?: string | null;
         id?: string | null;
       }[]
     | null;
@@ -475,16 +472,13 @@ export interface ArraysSelect<T extends boolean = true> {
  */
 export interface ConditionsSelect<T extends boolean = true> {
   title?: T;
-  topLevelCheckbox?: T;
-  dependentTextA?: T;
-  topLevelSelect?: T;
-  dependentTextB?: T;
-  dependentNumberB?: T;
-  rows?:
+  showConditionalFields?: T;
+  conditionalTextField?: T;
+  array?:
     | T
     | {
-        rowController?: T;
-        dependentRowField?: T;
+        showConditionalFields?: T;
+        conditionalRowField?: T;
         id?: T;
       };
   updatedAt?: T;