@open-mercato/ui 0.6.8-develop.6930.1.1e5976efc3 → 0.6.8-develop.6940.1.177ea30c6e

package/src/backend/CrudForm.tsx

@@ -777,6 +777,21 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     () => ({ ...(initialValues ?? {}) } as CrudFormValues<TValues>)
   )
   const valuesRef = React.useRef(values)
+  const pendingFieldChangeEventsRef = React.useRef<Array<{
+    eventId: number
+    fieldId: string
+    fieldValue: unknown
+    fieldRevision: number
+    fieldRevisionsAtEnqueue: Map<string, number>
+    formGeneration: number
+  }>>([])
+  const nextFieldChangeEventIdRef = React.useRef(0)
+  const fieldChangeRevisionByFieldRef = React.useRef(new Map<string, number>())
+  const fieldChangeFormGenerationRef = React.useRef(0)
+  const fieldChangeFormSnapshotRef = React.useRef<string | undefined>(undefined)
+  const fieldChangeDispatcherMountedRef = React.useRef(false)
+  const activeFieldChangeDispatchRef = React.useRef<{ eventId: number; formGeneration: number } | null>(null)
+  const [fieldChangeDispatchVersion, setFieldChangeDispatchVersion] = React.useState(0)
   const [errors, setErrors] = React.useState<Record<string, string>>({})
   const [pending, setPending] = React.useState(false)
   // Synchronous guard against re-entrant submit/delete invocations (e.g. rapid
@@ -880,9 +895,32 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   React.useEffect(() => {
     injectionContextRef.current = injectionContext
   }, [injectionContext])
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     valuesRef.current = values
   }, [values])
+  const fieldChangeFormSnapshot = React.useMemo(
+    () => createDirtySnapshot((initialValues ?? {}) as Record<string, unknown>),
+    [initialValues],
+  )
+  React.useLayoutEffect(() => {
+    const fieldChangeRevisions = fieldChangeRevisionByFieldRef.current
+    fieldChangeDispatcherMountedRef.current = true
+    return () => {
+      fieldChangeDispatcherMountedRef.current = false
+      fieldChangeFormGenerationRef.current += 1
+      pendingFieldChangeEventsRef.current = []
+      fieldChangeRevisions.clear()
+      activeFieldChangeDispatchRef.current = null
+    }
+  }, [])
+  React.useLayoutEffect(() => {
+    if (fieldChangeFormSnapshotRef.current === fieldChangeFormSnapshot) return
+    fieldChangeFormSnapshotRef.current = fieldChangeFormSnapshot
+    fieldChangeFormGenerationRef.current += 1
+    pendingFieldChangeEventsRef.current = []
+    fieldChangeRevisionByFieldRef.current.clear()
+    activeFieldChangeDispatchRef.current = null
+  }, [fieldChangeFormSnapshot])
 
   const isDirtyRef = React.useRef(false)
   const navigationPromptBypassRef = React.useRef(false)
@@ -957,6 +995,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
 
   const clearDirtyState = React.useCallback((snapshotSource?: Record<string, unknown>) => {
     const source = snapshotSource ?? (valuesRef.current as Record<string, unknown>)
+    pendingDirtyBaselineCommitRef.current = null
     dirtyBaselineSnapshotRef.current = createDirtySnapshot(source)
     dirtyBaselineValuesRef.current = { ...source }
     userEditedFieldIdsRef.current.clear()
@@ -2315,29 +2354,32 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   }, [])
 
   const setValue = React.useCallback((id: string, nextValue: unknown) => {
-    let nextData: CrudFormValues<TValues> | null = null
-    let nextDirty: boolean | null = null
-    const currentValue = (valuesRef.current as Record<string, unknown>)[id]
-    if (!Object.is(currentValue, nextValue)) {
-      updateEditedFieldMarker(id, nextValue)
-    }
-    setValues((prev) => {
-      if (Object.is(prev[id], nextValue)) return prev
-      const baselineSource = dirtyBaselineValuesRef.current ?? (prev as Record<string, unknown>)
+    const currentValues = valuesRef.current
+    if (!Object.is(currentValues[id], nextValue)) {
+      pendingDirtyBaselineCommitRef.current = null
+      const baselineSource = dirtyBaselineValuesRef.current ?? (currentValues as Record<string, unknown>)
       updateEditedFieldMarker(id, nextValue, baselineSource)
-      nextData = { ...prev, [id]: nextValue } as CrudFormValues<TValues>
-      valuesRef.current = nextData
       if (!(embedded && !trackDirtyWhenEmbedded)) {
-        const baseline = dirtyBaselineSnapshotRef.current ?? createDirtySnapshot(prev as Record<string, unknown>)
-        dirtyBaselineSnapshotRef.current = baseline
+        dirtyBaselineSnapshotRef.current ??= createDirtySnapshot(currentValues as Record<string, unknown>)
         dirtyBaselineValuesRef.current = baselineSource
-        nextDirty = createDirtySnapshot(nextData as Record<string, unknown>) !== baseline
       }
-      return nextData
-    })
-    if (nextDirty !== null) {
-      isDirtyRef.current = nextDirty
-      setHasUnsavedChanges(nextDirty)
+      if (extendedInjectionEventsEnabled) {
+        const fieldRevision = (fieldChangeRevisionByFieldRef.current.get(id) ?? 0) + 1
+        fieldChangeRevisionByFieldRef.current.set(id, fieldRevision)
+        nextFieldChangeEventIdRef.current += 1
+        pendingFieldChangeEventsRef.current.push({
+          eventId: nextFieldChangeEventIdRef.current,
+          fieldId: id,
+          fieldValue: nextValue,
+          fieldRevision,
+          fieldRevisionsAtEnqueue: new Map(fieldChangeRevisionByFieldRef.current),
+          formGeneration: fieldChangeFormGenerationRef.current,
+        })
+        setFieldChangeDispatchVersion((version) => version + 1)
+      }
+      setValues((prev) => Object.is(prev[id], nextValue)
+        ? prev
+        : ({ ...prev, [id]: nextValue } as CrudFormValues<TValues>))
     }
     const clearedMessages: string[] = []
     setErrors((prev) => {
@@ -2373,19 +2415,50 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         return prev
       })
     }
-    if (!nextData || !extendedInjectionEventsEnabled) return
-    void triggerInjectionEvent('onFieldChange', nextData as TValues, injectionContextRef.current, {
-      fieldId: id,
-      fieldValue: nextValue,
+  }, [embedded, extendedInjectionEventsEnabled, t, trackDirtyWhenEmbedded, translateValidationMessage, updateEditedFieldMarker])
+
+  React.useEffect(() => {
+    if (!extendedInjectionEventsEnabled) {
+      pendingFieldChangeEventsRef.current = []
+      return
+    }
+    if (!fieldChangeDispatcherMountedRef.current || activeFieldChangeDispatchRef.current) return
+    let pendingEvent = pendingFieldChangeEventsRef.current.shift()
+    while (pendingEvent && pendingEvent.formGeneration !== fieldChangeFormGenerationRef.current) {
+      pendingEvent = pendingFieldChangeEventsRef.current.shift()
+    }
+    if (!pendingEvent) return
+    const dispatchToken = {
+      eventId: pendingEvent.eventId,
+      formGeneration: pendingEvent.formGeneration,
+    }
+    activeFieldChangeDispatchRef.current = dispatchToken
+    void triggerInjectionEvent('onFieldChange', values as TValues, injectionContextRef.current, {
+      fieldId: pendingEvent.fieldId,
+      fieldValue: pendingEvent.fieldValue,
     }).then((result) => {
+      const isCurrentEvent =
+        fieldChangeDispatcherMountedRef.current &&
+        fieldChangeFormGenerationRef.current === pendingEvent.formGeneration &&
+        fieldChangeRevisionByFieldRef.current.get(pendingEvent.fieldId) === pendingEvent.fieldRevision
+      if (!isCurrentEvent) return
       if (!result.ok) return
       const change = result.fieldChange
       if (!change) return
-      const updates: Record<string, unknown> = { ...(change.sideEffects ?? {}) }
+      const candidateUpdates: Record<string, unknown> = { ...(change.sideEffects ?? {}) }
       if (change.value !== undefined) {
-        updates[id] = change.value
+        candidateUpdates[pendingEvent.fieldId] = change.value
+      }
+      const updates: Record<string, unknown> = {}
+      for (const [fieldId, value] of Object.entries(candidateUpdates)) {
+        if (
+          fieldChangeRevisionByFieldRef.current.get(fieldId) !==
+          pendingEvent.fieldRevisionsAtEnqueue.get(fieldId)
+        ) continue
+        updates[fieldId] = value
       }
       if (Object.keys(updates).length > 0) {
+        pendingDirtyBaselineCommitRef.current = null
         setValues((prev) => {
           let changed = false
           const next = { ...prev } as Record<string, unknown>
@@ -2402,8 +2475,22 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       }
     }).catch((err) => {
       logger.error('Error in onFieldChange', { err })
+    }).finally(() => {
+      const activeDispatch = activeFieldChangeDispatchRef.current
+      if (
+        activeDispatch?.eventId === dispatchToken.eventId &&
+        activeDispatch.formGeneration === dispatchToken.formGeneration
+      ) {
+        activeFieldChangeDispatchRef.current = null
+      }
+      if (
+        fieldChangeDispatcherMountedRef.current &&
+        fieldChangeFormGenerationRef.current === dispatchToken.formGeneration
+      ) {
+        setFieldChangeDispatchVersion((version) => version + 1)
+      }
     })
-  }, [embedded, extendedInjectionEventsEnabled, flash, t, trackDirtyWhenEmbedded, translateValidationMessage, triggerInjectionEvent, updateEditedFieldMarker])
+  }, [extendedInjectionEventsEnabled, fieldChangeDispatchVersion, triggerInjectionEvent, values])
 
   const onBlurRequest = React.useCallback((fieldId: string) => {
     void validateFieldOnBlur(fieldId)
@@ -2446,68 +2533,83 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   )
 
   const appliedInitialValuesSnapshotRef = React.useRef<string | undefined>(undefined)
+  const initialValuesTransformMountedRef = React.useRef(true)
   const dirtyBaselineSnapshotRef = React.useRef<string | undefined>(undefined)
   const dirtyBaselineValuesRef = React.useRef<Record<string, unknown> | undefined>(undefined)
+  const pendingDirtyBaselineCommitRef = React.useRef<{
+    guardSnapshot?: string
+    valuesSnapshot: string
+    values: Record<string, unknown>
+  } | null>(null)
   const userEditedFieldIdsRef = React.useRef<Set<string>>(new Set())
   const everEditedFieldIdsRef = React.useRef<Set<string>>(new Set())
+  React.useLayoutEffect(() => {
+    initialValuesTransformMountedRef.current = true
+    return () => {
+      initialValuesTransformMountedRef.current = false
+    }
+  }, [])
+  React.useLayoutEffect(() => {
+    const pendingBaseline = pendingDirtyBaselineCommitRef.current
+    if (!pendingBaseline) return
+    pendingDirtyBaselineCommitRef.current = null
+    if (
+      pendingBaseline.guardSnapshot !== undefined &&
+      appliedInitialValuesSnapshotRef.current !== pendingBaseline.guardSnapshot
+    ) return
+    const committedValues = values as Record<string, unknown>
+    if (createDirtySnapshot(committedValues) !== pendingBaseline.valuesSnapshot) return
+    dirtyBaselineSnapshotRef.current = pendingBaseline.valuesSnapshot
+    dirtyBaselineValuesRef.current = { ...pendingBaseline.values }
+  }, [values])
   React.useLayoutEffect(() => {
     if (!initialValues) return
     const snapshot = JSON.stringify({
       initialValues,
       injectedFieldIds: injectedFieldDefinitions.map((definition) => definition.id),
+      injectionWidgetIds: injectionWidgets.map((widget) => `${widget.moduleId}:${widget.widgetId}:${widget.key}`),
       customFieldMappings: cfDefinitions.map((definition) => definition.key),
       dotPathBaseFieldIds: Array.from(dotPathBaseFieldIds),
     })
     if (appliedInitialValuesSnapshotRef.current === snapshot) return
     appliedInitialValuesSnapshotRef.current = snapshot
     const initialRecord = initialValues as Record<string, unknown>
-    let mergedValues: CrudFormValues<TValues> | null = null
-    // Whether the user already has unsaved edits relative to the load-time baseline,
-    // computed from `prev` (React's latest committed values) — NOT from isDirtyRef or
-    // valuesRef, which are both updated in post-render effects and therefore still
-    // hold stale values when this layout effect runs in the SAME render that async
-    // custom-field / injected-field definitions arrive. That lag was the residual
-    // race that let the baseline absorb an in-progress edit under load.
-    let hadUnsavedEdits = false
-    setValues((prev) => {
-      const priorBaseline = dirtyBaselineSnapshotRef.current
-      const editedFieldIds = userEditedFieldIdsRef.current
-      hadUnsavedEdits =
-        editedFieldIds.size > 0 ||
-        priorBaseline !== undefined &&
-        createDirtySnapshot(prev as Record<string, unknown>) !== priorBaseline
-      const merged = { ...prev } as CrudFormValues<TValues>
-      const mergedRecord = merged as Record<string, unknown>
-      for (const [key, value] of Object.entries(initialValues as Record<string, unknown>)) {
-        if (editedFieldIds.has(key)) continue
-        mergedRecord[key] = value
-      }
-      for (const definition of injectedFieldDefinitions) {
-        if (merged[definition.id] !== undefined) continue
-        const extracted = readByDotPath(initialRecord, definition.id)
-        if (extracted !== undefined) {
-          ;(merged as Record<string, unknown>)[definition.id] = extracted
-        }
+    const currentValues = valuesRef.current
+    const priorBaseline = dirtyBaselineSnapshotRef.current
+    const editedFieldIds = userEditedFieldIdsRef.current
+    const hadUnsavedEdits =
+      editedFieldIds.size > 0 ||
+      priorBaseline !== undefined &&
+      createDirtySnapshot(currentValues as Record<string, unknown>) !== priorBaseline
+    const mergedValues = { ...currentValues } as CrudFormValues<TValues>
+    const mergedRecord = mergedValues as Record<string, unknown>
+    for (const [key, value] of Object.entries(initialValues as Record<string, unknown>)) {
+      if (editedFieldIds.has(key)) continue
+      mergedRecord[key] = value
+    }
+    for (const definition of injectedFieldDefinitions) {
+      if (mergedValues[definition.id] !== undefined) continue
+      const extracted = readByDotPath(initialRecord, definition.id)
+      if (extracted !== undefined) {
+        mergedRecord[definition.id] = extracted
       }
-      for (const definition of cfDefinitions) {
-        const targetId = customEntity ? definition.key : `cf_${definition.key}`
-        if (!targetId || merged[targetId] !== undefined) continue
-        const extracted = readInitialCustomFieldValue(initialRecord, definition.key)
-        if (extracted !== undefined) {
-          ;(merged as Record<string, unknown>)[targetId] = extracted
-        }
+    }
+    for (const definition of cfDefinitions) {
+      const targetId = customEntity ? definition.key : `cf_${definition.key}`
+      if (!targetId || mergedValues[targetId] !== undefined) continue
+      const extracted = readInitialCustomFieldValue(initialRecord, definition.key)
+      if (extracted !== undefined) {
+        mergedRecord[targetId] = extracted
       }
-      for (const fieldId of dotPathBaseFieldIds) {
-        if (merged[fieldId] !== undefined) continue
-        const extracted = readByDotPath(initialRecord, fieldId)
-        if (extracted !== undefined) {
-          ;(merged as Record<string, unknown>)[fieldId] = extracted
-        }
+    }
+    for (const fieldId of dotPathBaseFieldIds) {
+      if (mergedValues[fieldId] !== undefined) continue
+      const extracted = readByDotPath(initialRecord, fieldId)
+      if (extracted !== undefined) {
+        mergedRecord[fieldId] = extracted
       }
-      mergedValues = merged
-      return mergedValues
-    })
-    if (mergedValues && !hadUnsavedEdits) {
+    }
+    if (!hadUnsavedEdits) {
       // Do not absorb an in-progress edit into the pristine baseline. This effect
       // re-runs whenever the snapshot changes — which includes custom-field
       // definitions and injected fields loading ASYNCHRONOUSLY after mount. If the
@@ -2518,11 +2620,17 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       // only when there are no pending edits; while dirty, keep the load-time
       // baseline so the edit stays dirty until save/discard. Root cause of the flaky
       // optimistic-lock stale-edit conflicts (#2055 / TC-LOCK-OSS-015 / TC-LOCK-OSS-029).
-      dirtyBaselineSnapshotRef.current = createDirtySnapshot(mergedValues as Record<string, unknown>)
-      dirtyBaselineValuesRef.current = { ...(mergedValues as Record<string, unknown>) }
+      pendingDirtyBaselineCommitRef.current = {
+        guardSnapshot: snapshot,
+        valuesSnapshot: createDirtySnapshot(mergedValues as Record<string, unknown>),
+        values: { ...(mergedValues as Record<string, unknown>) },
+      }
+    } else {
+      pendingDirtyBaselineCommitRef.current = null
     }
-    if (!extendedInjectionEventsEnabled || !mergedValues) return
-    let cancelled = false
+    setValues(mergedValues)
+    if (!extendedInjectionEventsEnabled || hadUnsavedEdits) return
+    const transformSourceSnapshot = createDirtySnapshot(mergedValues as Record<string, unknown>)
     const run = async () => {
       try {
         const result = await triggerInjectionEvent(
@@ -2531,21 +2639,27 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           injectionContextRef.current,
         )
         const transformed = result.data
-        if (cancelled || !transformed) return
-        // As above: never re-apply transformed display data over an in-progress
-        // edit — it would overwrite the user's unsaved changes and reset dirty.
-        if (isDirtyRef.current) return
-        dirtyBaselineSnapshotRef.current = createDirtySnapshot(transformed as Record<string, unknown>)
-        dirtyBaselineValuesRef.current = { ...(transformed as Record<string, unknown>) }
-        setValues(transformed as CrudFormValues<TValues>)
+        if (
+          !initialValuesTransformMountedRef.current ||
+          appliedInitialValuesSnapshotRef.current !== snapshot ||
+          !transformed
+        ) return
+        if (createDirtySnapshot(valuesRef.current as Record<string, unknown>) !== transformSourceSnapshot) return
+        const transformedValues = transformed as CrudFormValues<TValues>
+        pendingDirtyBaselineCommitRef.current = {
+          guardSnapshot: snapshot,
+          valuesSnapshot: createDirtySnapshot(transformedValues as Record<string, unknown>),
+          values: { ...(transformedValues as Record<string, unknown>) },
+        }
+        setValues((current) => {
+          if (createDirtySnapshot(current as Record<string, unknown>) !== transformSourceSnapshot) return current
+          return transformedValues
+        })
       } catch (err) {
         logger.error('Error in transformDisplayData', { err })
       }
     }
     void run()
-    return () => {
-      cancelled = true
-    }
   }, [
     cfDefinitions,
     customEntity,
@@ -2553,6 +2667,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     extendedInjectionEventsEnabled,
     initialValues,
     injectedFieldDefinitions,
+    injectionWidgets,
     triggerInjectionEvent,
   ])
 
@@ -2589,26 +2704,24 @@ export function CrudForm<TValues extends Record<string, unknown>>({
 
     if (Object.keys(defaults).length === 0) return
 
-    let mergedValues: CrudFormValues<TValues> | null = null
-    setValues((prev) => {
-      const merged = { ...prev } as CrudFormValues<TValues>
-      let applied = false
-      for (const [fieldId, defaultVal] of Object.entries(defaults)) {
-        // Skip if a value already exists (from initialValues or user input)
-        if (merged[fieldId] !== undefined) continue
-        ;(merged as Record<string, unknown>)[fieldId] = defaultVal
-        applied = true
-      }
-      if (!applied) return prev
-      mergedValues = merged
-      return mergedValues
-    })
+    const currentValues = valuesRef.current
+    const mergedValues = { ...currentValues } as CrudFormValues<TValues>
+    let applied = false
+    for (const [fieldId, defaultVal] of Object.entries(defaults)) {
+      // Skip if a value already exists (from initialValues or user input)
+      if (mergedValues[fieldId] !== undefined) continue
+      ;(mergedValues as Record<string, unknown>)[fieldId] = defaultVal
+      applied = true
+    }
+    if (!applied) return
 
-    // Update the dirty baseline so the form doesn't appear dirty from defaults
-    if (mergedValues) {
-      dirtyBaselineSnapshotRef.current = createDirtySnapshot(mergedValues as Record<string, unknown>)
-      dirtyBaselineValuesRef.current = { ...(mergedValues as Record<string, unknown>) }
+    // Update the dirty baseline only after the defaults commit so an interrupted
+    // render cannot make the navigation guard observe values the user never saw.
+    pendingDirtyBaselineCommitRef.current = {
+      valuesSnapshot: createDirtySnapshot(mergedValues as Record<string, unknown>),
+      values: { ...(mergedValues as Record<string, unknown>) },
     }
+    setValues(mergedValues)
   }, [isLoading, initialValuesHasId, cfDefinitions, customEntity])
 
   const markFormAsClean = React.useCallback((snapshotSource?: Record<string, unknown>) => {