@digiform/wizard 0.2.10 → 0.2.18

package/wizard/src/features/state-management/machines/formMachine.js

@@ -0,0 +1,1565 @@
+"use client";
+import { createMachine as I, assign as a } from "xstate";
+import { executeComponentAction as p } from "./actions/componentActions.js";
+import { executePendingNavigation as f } from "./actions/navigationActions.js";
+import { executeSaveActions as m } from "./actions/saveActions.js";
+import { ComponentTriggerEngine as u } from "./componentTriggerEngine.js";
+import { canNavigate as d, isPendingNextNavigation as S, isPendingPreviousNavigation as A, isPendingStepNavigation as T, hasSaveContextActions as E, shouldProceedWithNormalNavigation as O, hasSaveTriggersForNext as N } from "./guards/navigationGuards.js";
+import { isSectionEditable as _, canExecuteSaveActions as C } from "./guards/saveGuards.js";
+import { hasDirtyComponentsWithTriggers as v } from "./guards/triggerGuards.js";
+import { findComponentTriggers as V } from "./helpers/triggerHelpers.js";
+import { memoryUtils as h } from "./performance.js";
+const W = I({
+  id: "formMachine",
+  types: {},
+  context: ({ input: e }) => ({
+    config: e.config || { id: "", title: "", steps: [] },
+    currentStepId: e.currentStepId || "",
+    currentStepIndex: e.currentStepIndex || 0,
+    data: e.data || {},
+    errors: e.errors || {},
+    dirtyFields: e.dirtyFields || {},
+    touchedFields: e.touchedFields || {},
+    isValid: e.isValid ?? !0,
+    isSubmitting: e.isSubmitting ?? !1,
+    fieldStates: e.fieldStates || {},
+    sectionBackups: e.sectionBackups || {},
+    activeActions: e.activeActions || {},
+    actionResults: e.actionResults || {},
+    activeDialog: e.activeDialog || null,
+    executingTrigger: e.executingTrigger || null,
+    pendingNavigation: e.pendingNavigation || null,
+    canNavigate: e.canNavigate ?? !0,
+    waitingForActions: e.waitingForActions ?? !1,
+    // Initialize field change validation state
+    fieldChangeState: e.fieldChangeState || {},
+    fieldValidationState: e.fieldValidationState || {
+      activeWarnings: [],
+      pendingVerifications: [],
+      verificationResults: {}
+    },
+    // Initialize component trigger-action system state
+    componentTriggerState: e.componentTriggerState || {},
+    activeComponentActions: e.activeComponentActions || {},
+    componentAlerts: e.componentAlerts || {},
+    // Enhanced original value tracking
+    componentOriginalValues: e.componentOriginalValues || {},
+    // New simplified state machine context
+    activeExecutionPlan: e.activeExecutionPlan || null,
+    executionResults: e.executionResults || {},
+    // Track completed context actions
+    contextActionCompletions: e.contextActionCompletions || {},
+    // Initialize enhanced save state tracking
+    saveState: e.saveState || {
+      saveInProgress: !1,
+      saveInitiator: null,
+      savingSection: null,
+      executionPlan: null,
+      pendingVerifications: [],
+      completedVerifications: [],
+      validationErrors: {},
+      saveStartTimestamp: null
+    }
+  }),
+  initial: "idle",
+  // Global events that should work in any state
+  on: {
+    EVALUATE_COMPONENT_TRIGGERS: {
+      actions: [
+        // Create execution plan for fieldChange context and execute if needed
+        ({ context: e, event: t, self: n }) => {
+          if (t.type !== "EVALUATE_COMPONENT_TRIGGERS")
+            return;
+          const { componentId: i, value: o } = t, r = e.componentOriginalValues[i], s = !!(r?.isPopulated && r.value !== o);
+          console.log(
+            `🔥 [formMachine] EVALUATE_COMPONENT_TRIGGERS for ${i}:`,
+            {
+              value: o,
+              originalValue: r?.value,
+              isPopulated: r?.isPopulated,
+              isDirty: s,
+              hasAlerts: !!e.componentAlerts[i]?.length
+            }
+          ), console.log(
+            `🔍 [formMachine] Checking alert dismissal condition for ${i}:`,
+            {
+              isDirty: s,
+              hasAlerts: !!e.componentAlerts[i]?.length,
+              alertsCount: e.componentAlerts[i]?.length,
+              allComponentAlerts: Object.keys(e.componentAlerts),
+              alertsForComponent: e.componentAlerts[i],
+              conditionMet: !s && e.componentAlerts[i]?.length
+            }
+          ), !s && e.componentAlerts[i]?.length && (console.log(
+            `🧹 [formMachine] Clearing alerts for ${i} - field no longer dirty`
+          ), console.log(
+            `🧹 [formMachine] Sending DISMISS_COMPONENT_ALERT for ${i}`,
+            {
+              alertsCount: e.componentAlerts[i]?.length,
+              currentState: "about to send"
+            }
+          ), n.send({
+            type: "DISMISS_COMPONENT_ALERT",
+            componentId: i
+          }), console.log(
+            `🧹 [formMachine] DISMISS_COMPONENT_ALERT sent for ${i}`
+          ));
+          const g = u.createExecutionPlan(
+            e.config,
+            "fieldChange",
+            e.currentStepIndex,
+            e
+          );
+          console.log(
+            `🎯 [formMachine] FieldChange execution plan for ${i}:`,
+            {
+              totalActions: g.totalActions,
+              executionsCount: g.executions.length,
+              executions: g.executions.map((c) => ({
+                componentId: c.componentId,
+                triggerId: c.trigger.id,
+                actionsCount: c.actions.length,
+                actions: c.actions.map((l) => ({
+                  id: l.id,
+                  type: l.type,
+                  contexts: l.contexts
+                }))
+              }))
+            }
+          ), g.totalActions > 0 && g.executions.forEach((c) => {
+            c.actions.forEach((l) => {
+              console.log(
+                `⚡ [formMachine] Executing fieldChange action ${l.id} for ${c.componentId}`
+              ), n.send({
+                type: "TRIGGER_COMPONENT_ACTION",
+                componentId: c.componentId,
+                triggerId: c.trigger.id,
+                actionId: l.id,
+                eventType: "valueChange"
+              });
+            });
+          });
+        }
+      ]
+    },
+    SET_COMPONENT_ORIGINAL_VALUE: {
+      actions: a({
+        componentOriginalValues: ({ context: e, event: t }) => ({
+          ...e.componentOriginalValues,
+          [t.componentId]: {
+            value: t.value,
+            timestamp: Date.now(),
+            source: t.source || "initialized",
+            isPopulated: t.source !== "initialized"
+          }
+        }),
+        componentTriggerState: ({ context: e, event: t }) => {
+          const n = V(
+            e.config,
+            t.componentId
+          ), i = { ...e.componentTriggerState };
+          return n.forEach((o) => {
+            const r = `${t.componentId}-${o.id}`;
+            i[r] ? i[r].originalValue === void 0 && (i[r] = {
+              ...i[r],
+              originalValue: t.value
+            }) : i[r] = {
+              componentId: t.componentId,
+              triggerId: o.id,
+              isActive: !1,
+              originalValue: t.value,
+              lastEvaluated: Date.now()
+            };
+          }), i;
+        }
+      })
+    },
+    MARK_COMPONENT_AS_POPULATED: {
+      actions: a({
+        componentOriginalValues: ({
+          context: e,
+          event: t
+        }) => (console.log(
+          `🔧 [formMachine] MARK_COMPONENT_AS_POPULATED fixing original value for ${t.componentId}:`,
+          {
+            eventValue: t.value,
+            contextDataValue: e.data[t.componentId],
+            existingOriginalValue: e.componentOriginalValues[t.componentId]?.value,
+            isPopulated: e.componentOriginalValues[t.componentId]?.isPopulated
+          }
+        ), {
+          ...e.componentOriginalValues,
+          [t.componentId]: {
+            ...e.componentOriginalValues[t.componentId],
+            value: t.value,
+            // Use event.value instead of currentValue from context.data
+            timestamp: Date.now(),
+            source: "api_populated",
+            isPopulated: !0
+          }
+        })
+      })
+    },
+    UPDATE_COMPONENT_ORIGINAL_VALUE: {
+      actions: [
+        a({
+          componentOriginalValues: ({
+            context: e,
+            event: t
+          }) => {
+            const n = e.data[t.componentId];
+            return console.log(
+              `🔄 [formMachine] UPDATE_COMPONENT_ORIGINAL_VALUE for ${t.componentId}:`,
+              {
+                componentId: t.componentId,
+                currentValue: n,
+                oldOriginalValue: e.componentOriginalValues[t.componentId]?.value,
+                willUpdateTo: n
+              }
+            ), {
+              ...e.componentOriginalValues,
+              [t.componentId]: {
+                ...e.componentOriginalValues[t.componentId],
+                value: n,
+                // Update original value to current field value
+                timestamp: Date.now(),
+                source: "user_verified",
+                isPopulated: !0
+              }
+            };
+          }
+        }),
+        // Re-evaluate triggers after updating original value to clear alerts
+        ({ context: e, event: t, self: n }) => {
+          console.log(
+            `🔄 [formMachine] Re-evaluating triggers after UPDATE_COMPONENT_ORIGINAL_VALUE for ${t.componentId}`
+          ), n.send({
+            type: "EVALUATE_COMPONENT_TRIGGERS",
+            componentId: t.componentId,
+            value: e.data[t.componentId],
+            eventType: "valueChange"
+          });
+        }
+      ]
+    }
+  },
+  states: {
+    idle: {
+      on: {
+        SET_DATA: {
+          actions: a({
+            data: ({ context: e, event: t }) => e.data[t.key] === t.value ? e.data : Object.assign({}, e.data, {
+              [t.key]: t.value
+            }),
+            dirtyFields: ({ context: e, event: t }) => e.dirtyFields[t.key] ? e.dirtyFields : Object.assign({}, e.dirtyFields, {
+              [t.key]: !0
+            })
+          })
+        },
+        SET_FIELD_STATE: {
+          actions: a({
+            fieldStates: ({ context: e, event: t }) => {
+              const n = e.fieldStates[t.componentId] || {
+                value: void 0,
+                error: null,
+                isDirty: !1,
+                isTouched: !1,
+                isValidating: !1
+              };
+              let i = !1;
+              for (const r in t.state) {
+                const s = r;
+                if (n[s] !== t.state[s]) {
+                  i = !0;
+                  break;
+                }
+              }
+              if (!i)
+                return e.fieldStates;
+              const o = Object.assign({}, e.fieldStates);
+              return o[t.componentId] = Object.assign(
+                {},
+                n,
+                t.state
+              ), o;
+            }
+          })
+        },
+        VALIDATE_FIELD: {
+          actions: [
+            a({
+              touchedFields: ({ context: e, event: t }) => e.touchedFields[t.componentId] ? e.touchedFields : Object.assign({}, e.touchedFields, {
+                [t.componentId]: !0
+              })
+            })
+          ]
+        },
+        VALIDATE_SECTION: {
+          actions: []
+        },
+        VALIDATE_STEP: {
+          actions: []
+        },
+        VALIDATE_FORM: {
+          actions: []
+        },
+        START_SECTION_EDIT: {
+          actions: a({
+            sectionBackups: ({ context: e, event: t }) => {
+              if (e.sectionBackups[t.sectionId])
+                return e.sectionBackups;
+              const n = {};
+              for (const i of t.componentIds)
+                n[i] = e.data[i];
+              return Object.assign({}, e.sectionBackups, {
+                [t.sectionId]: n
+              });
+            }
+          })
+        },
+        CANCEL_SECTION_EDIT: {
+          actions: a({
+            data: ({ context: e, event: t }) => {
+              const n = e.sectionBackups[t.sectionId];
+              if (!n) return e.data;
+              let i = !1;
+              for (const [r, s] of Object.entries(n))
+                if (e.data[r] !== s) {
+                  i = !0;
+                  break;
+                }
+              if (!i)
+                return e.data;
+              const o = Object.assign({}, e.data);
+              for (const [r, s] of Object.entries(n))
+                o[r] = s;
+              return o;
+            },
+            // Clear the backup after restoring
+            sectionBackups: ({ context: e, event: t }) => {
+              if (!e.sectionBackups[t.sectionId])
+                return e.sectionBackups;
+              const n = Object.assign({}, e.sectionBackups);
+              return delete n[t.sectionId], n;
+            }
+          })
+        },
+        REQUEST_NAVIGATION: {
+          target: "evaluatingNavigation",
+          actions: [
+            a({
+              pendingNavigation: ({ event: e }) => {
+                if (e.type !== "REQUEST_NAVIGATION") return null;
+                const t = {
+                  type: e.navigationType
+                };
+                return e.stepId !== void 0 && (t.stepId = e.stepId), t;
+              }
+            })
+          ]
+        },
+        NEXT: [
+          {
+            guard: N,
+            target: "evaluatingNavigation",
+            actions: [
+              a({
+                activeExecutionPlan: ({ context: e }) => u.createExecutionPlan(
+                  e.config,
+                  "save",
+                  e.currentStepIndex,
+                  e
+                )
+              }),
+              a({
+                pendingNavigation: { type: "next" }
+              }),
+              a({
+                pendingNavigation: null,
+                canNavigate: !1
+              })
+            ]
+          },
+          {
+            // Direct navigation if no triggers need execution
+            guard: d,
+            actions: a({
+              currentStepIndex: ({ context: e }) => Math.min(
+                e.currentStepIndex + 1,
+                e.config.steps.length - 1
+              ),
+              currentStepId: ({ context: e }) => {
+                const t = Math.min(
+                  e.currentStepIndex + 1,
+                  e.config.steps.length - 1
+                );
+                return e.config.steps[t]?.id || "";
+              },
+              pendingNavigation: null
+            })
+          },
+          {
+            // Fallback - set pending navigation and transition to evaluation state
+            target: "evaluatingNavigation",
+            actions: a({
+              pendingNavigation: { type: "next" }
+            })
+          }
+        ],
+        PREVIOUS: [
+          {
+            guard: d,
+            actions: a({
+              currentStepIndex: ({ context: e }) => Math.max(e.currentStepIndex - 1, 0),
+              currentStepId: ({ context: e }) => {
+                const t = Math.max(e.currentStepIndex - 1, 0);
+                return e.config.steps[t]?.id || "";
+              },
+              pendingNavigation: null
+            })
+          },
+          {
+            // Fallback - set pending navigation and transition to evaluation state
+            target: "evaluatingNavigation",
+            actions: a({
+              pendingNavigation: { type: "previous" }
+            })
+          }
+        ],
+        GO_TO_STEP: [
+          {
+            guard: d,
+            actions: a({
+              currentStepIndex: ({ context: e, event: t }) => {
+                if (t.type !== "GO_TO_STEP")
+                  return e.currentStepIndex;
+                const n = e.config.steps.findIndex(
+                  (i) => i.id === t.stepId
+                );
+                return n >= 0 ? n : e.currentStepIndex;
+              },
+              currentStepId: ({ context: e, event: t }) => t.type !== "GO_TO_STEP" ? e.currentStepId : t.stepId,
+              pendingNavigation: null
+            })
+          },
+          {
+            // Fallback - set pending navigation and transition to evaluation state
+            target: "evaluatingNavigation",
+            actions: a({
+              pendingNavigation: ({ event: e }) => e.type !== "GO_TO_STEP" ? null : {
+                type: "step",
+                stepId: e.stepId
+              }
+            })
+          }
+        ],
+        SUBMIT: {
+          target: "submitting"
+        },
+        RESET: {
+          actions: a({
+            currentStepIndex: 0,
+            currentStepId: ({ context: e }) => e.config.steps[0]?.id || "",
+            data: {},
+            errors: {},
+            dirtyFields: {},
+            touchedFields: {},
+            isValid: !0,
+            isSubmitting: !1,
+            fieldStates: {},
+            sectionBackups: {},
+            componentTriggerState: {},
+            activeComponentActions: {},
+            componentAlerts: {},
+            activeActions: {},
+            executingTrigger: null,
+            waitingForActions: !1,
+            canNavigate: !0,
+            pendingNavigation: null,
+            activeDialog: null,
+            componentOriginalValues: {},
+            fieldChangeState: {},
+            fieldValidationState: {
+              activeWarnings: [],
+              pendingVerifications: [],
+              verificationResults: {}
+            }
+          })
+        },
+        EXECUTE_TRIGGER: {
+          target: "executingActions",
+          actions: a({
+            executingTrigger: ({ event: e }) => e.trigger,
+            waitingForActions: !0,
+            canNavigate: !1
+          })
+        },
+        EXECUTE_ACTIONS: {
+          target: "executingActions",
+          actions: a({
+            executingTrigger: ({ event: e }) => e.trigger,
+            waitingForActions: !0,
+            canNavigate: !1
+          })
+        },
+        EXECUTE_CONTEXT_ACTIONS: {
+          target: "executingContextActions",
+          actions: a({
+            activeExecutionPlan: ({ event: e }) => e.executionPlan,
+            canNavigate: !1
+          })
+        },
+        SHOW_ACTION_DIALOG: {
+          target: "showingActionDialog",
+          actions: a({
+            activeDialog: ({ event: e }) => e.dialogConfig,
+            canNavigate: !0,
+            // Reset navigation permission when showing dialog
+            waitingForActions: !1
+            // Clear action waiting state
+          })
+        },
+        SHOW_FIELD_WARNING: {
+          actions: a({
+            fieldChangeState: ({ context: e, event: t }) => t.type !== "SHOW_FIELD_WARNING" ? e.fieldChangeState : {
+              ...e.fieldChangeState,
+              [t.fieldId]: {
+                ...e.fieldChangeState[t.fieldId],
+                validationWarnings: [
+                  ...e.fieldChangeState[t.fieldId]?.validationWarnings || [],
+                  {
+                    id: t.warningId,
+                    fieldId: t.fieldId,
+                    message: t.message,
+                    severity: t.warningType || "warning",
+                    type: t.warningType || "warning",
+                    timestamp: Date.now(),
+                    dismissible: !0
+                  }
+                ]
+              }
+            },
+            fieldValidationState: ({ context: e, event: t }) => t.type !== "SHOW_FIELD_WARNING" ? e.fieldValidationState : {
+              ...e.fieldValidationState,
+              activeWarnings: e.fieldValidationState.activeWarnings.includes(
+                t.fieldId
+              ) ? e.fieldValidationState.activeWarnings : [
+                ...e.fieldValidationState.activeWarnings,
+                t.fieldId
+              ]
+            }
+          })
+        },
+        DISMISS_FIELD_WARNING: {
+          actions: a({
+            fieldChangeState: ({ context: e, event: t }) => {
+              const n = e.fieldChangeState[t.fieldId];
+              return n ? {
+                ...e.fieldChangeState,
+                [t.fieldId]: {
+                  ...n,
+                  validationWarnings: n.validationWarnings?.filter(
+                    (i) => i.id !== t.warningId
+                  ) || []
+                }
+              } : e.fieldChangeState;
+            },
+            fieldValidationState: ({ context: e, event: t }) => {
+              const i = e.fieldChangeState[t.fieldId]?.validationWarnings?.length > 0;
+              return {
+                ...e.fieldValidationState,
+                activeWarnings: i ? e.fieldValidationState.activeWarnings : e.fieldValidationState.activeWarnings.filter(
+                  (o) => o !== t.fieldId
+                )
+              };
+            }
+          })
+        },
+        START_FIELD_VERIFICATION: {
+          actions: a({
+            fieldValidationState: ({ context: e, event: t }) => t.type !== "START_FIELD_VERIFICATION" ? e.fieldValidationState : {
+              ...e.fieldValidationState,
+              pendingVerifications: e.fieldValidationState.pendingVerifications.includes(
+                t.fieldId
+              ) ? e.fieldValidationState.pendingVerifications : [
+                ...e.fieldValidationState.pendingVerifications,
+                t.fieldId
+              ],
+              verificationResults: {
+                ...e.fieldValidationState.verificationResults,
+                [t.fieldId]: {
+                  status: "pending",
+                  timestamp: Date.now()
+                }
+              }
+            }
+          })
+        },
+        FIELD_VERIFICATION_COMPLETE: {
+          actions: a({
+            fieldValidationState: ({
+              context: e,
+              event: t
+            }) => ({
+              ...e.fieldValidationState,
+              pendingVerifications: e.fieldValidationState.pendingVerifications.filter(
+                (n) => n !== t.fieldId
+              ),
+              verificationResults: {
+                ...e.fieldValidationState.verificationResults,
+                [t.fieldId]: {
+                  status: t.success ? "success" : "failed",
+                  timestamp: Date.now(),
+                  result: t.result
+                }
+              }
+            })
+          })
+        },
+        CLEAR_FIELD_CHANGES: {
+          actions: a({
+            fieldChangeState: ({ context: e, event: t }) => {
+              if (t.fieldId) {
+                const n = { ...e.fieldChangeState };
+                return delete n[t.fieldId], n;
+              } else
+                return {};
+            },
+            fieldValidationState: ({ context: e, event: t }) => t.fieldId ? {
+              ...e.fieldValidationState,
+              activeWarnings: e.fieldValidationState.activeWarnings.filter(
+                (n) => n !== t.fieldId
+              ),
+              pendingVerifications: e.fieldValidationState.pendingVerifications.filter(
+                (n) => n !== t.fieldId
+              ),
+              verificationResults: Object.fromEntries(
+                Object.entries(
+                  e.fieldValidationState.verificationResults
+                ).filter(([n]) => n !== t.fieldId)
+              )
+            } : {
+              activeWarnings: [],
+              pendingVerifications: [],
+              verificationResults: {}
+            }
+          })
+        },
+        SET_COMPONENT_ORIGINAL_VALUE: {
+          actions: a({
+            componentOriginalValues: ({ context: e, event: t }) => {
+              const n = e.componentOriginalValues[t.componentId], i = {
+                value: t.value,
+                timestamp: Date.now(),
+                source: t.source || "initialized",
+                isPopulated: t.source !== "initialized"
+              };
+              return n && h.shallowEqual(n, i) ? e.componentOriginalValues : Object.assign({}, e.componentOriginalValues, {
+                [t.componentId]: i
+              });
+            }
+          })
+        },
+        TRIGGER_COMPONENT_ACTION: {
+          actions: [p]
+        },
+        SHOW_COMPONENT_ALERT: {
+          actions: a({
+            componentAlerts: ({ context: e, event: t }) => {
+              const i = (e.componentAlerts[t.componentId] || []).filter(
+                (o) => o.id !== t.alert.id
+              );
+              return {
+                ...e.componentAlerts,
+                [t.componentId]: [...i, t.alert]
+              };
+            }
+          })
+        },
+        DISMISS_COMPONENT_ALERT: {
+          actions: a({
+            componentAlerts: ({ context: e, event: t }) => {
+              const n = e.componentAlerts[t.componentId] || [], i = t.alertId ? n.filter((o) => o.id !== t.alertId) : [];
+              return console.log(
+                `🧹 [formMachine] DISMISS_COMPONENT_ALERT for ${t.componentId}:`,
+                {
+                  alertId: t.alertId,
+                  beforeCount: n.length,
+                  afterCount: i.length,
+                  clearedAll: !t.alertId && n.length > 0
+                }
+              ), {
+                ...e.componentAlerts,
+                [t.componentId]: i
+              };
+            }
+          })
+        },
+        CLEAR_COMPONENT_ALERT: {
+          actions: a({
+            componentAlerts: ({ context: e, event: t }) => (console.log(
+              `🧹 [formMachine] CLEAR_COMPONENT_ALERT for ${t.componentId}`
+            ), {
+              ...e.componentAlerts,
+              [t.componentId]: []
+            })
+          })
+        },
+        START_SAVE: {
+          target: "preparingSave",
+          actions: a({
+            saveState: ({ context: e, event: t }) => t.type !== "START_SAVE" ? e.saveState : {
+              ...e.saveState,
+              saveInProgress: !0,
+              saveInitiator: t.initiator,
+              savingSection: t.sectionId,
+              saveStartTimestamp: Date.now(),
+              pendingVerifications: [],
+              completedVerifications: [],
+              validationErrors: {}
+            }
+          })
+        },
+        SAVE_DIALOG_SHOWN: {
+          actions: a({
+            saveState: ({ context: e, event: t }) => t.type !== "SAVE_DIALOG_SHOWN" ? e.saveState : {
+              ...e.saveState,
+              pendingVerifications: [
+                ...e.saveState.pendingVerifications,
+                t.dialogId
+              ]
+            }
+          })
+        }
+      }
+    },
+    // New simplified execution state for context-based triggers
+    executingContextActions: {
+      entry: [
+        // Execute all actions in the execution plan
+        ({ context: e, self: t }) => {
+          const n = e.activeExecutionPlan;
+          n && (n.executions.forEach((i) => {
+            i.actions.forEach((o) => {
+              t.send({
+                type: "TRIGGER_COMPONENT_ACTION",
+                componentId: i.componentId,
+                triggerId: i.trigger.id,
+                actionId: o.id,
+                eventType: "navigationAttempt"
+              });
+            });
+          }), n.totalActions === 0 && t.send({
+            type: "CONTEXT_ACTIONS_COMPLETE",
+            results: {}
+          }));
+        }
+      ],
+      on: {
+        REQUEST_NAVIGATION: {
+          actions: [
+            a({
+              pendingNavigation: ({ event: e }) => {
+                if (e.type !== "REQUEST_NAVIGATION") return null;
+                const t = {
+                  type: e.navigationType
+                };
+                return e.stepId !== void 0 && (t.stepId = e.stepId), t;
+              }
+            })
+          ]
+        },
+        TRIGGER_COMPONENT_ACTION: {
+          actions: [p]
+        },
+        CONTEXT_ACTIONS_COMPLETE: {
+          target: "idle",
+          actions: [
+            a({
+              activeExecutionPlan: null,
+              executionResults: ({ context: e, event: t }) => ({
+                ...e.executionResults,
+                ...t.results
+              })
+            }),
+            f
+          ]
+        },
+        SHOW_ACTION_DIALOG: {
+          target: "showingActionDialog",
+          actions: a({
+            activeDialog: ({ event: e }) => e.dialogConfig
+          })
+        },
+        SHOW_COMPONENT_ALERT: {
+          actions: a({
+            componentAlerts: ({ context: e, event: t }) => {
+              const i = (e.componentAlerts[t.componentId] || []).filter(
+                (o) => o.id !== t.alert.id
+              );
+              return {
+                ...e.componentAlerts,
+                [t.componentId]: [...i, t.alert]
+              };
+            }
+          })
+        }
+      }
+    },
+    submitting: {
+      entry: a({ isSubmitting: !0 }),
+      on: {
+        SUBMIT_SUCCESS: {
+          target: "idle",
+          actions: a({ isSubmitting: !1 })
+        },
+        SUBMIT_ERROR: {
+          target: "idle",
+          actions: a({
+            isSubmitting: !1,
+            errors: ({ context: e, event: t }) => ({
+              ...e.errors,
+              _form: [t.error.message]
+            })
+          })
+        },
+        SET_COMPONENT_ORIGINAL_VALUE: {
+          actions: a({
+            componentOriginalValues: ({ context: e, event: t }) => ({
+              ...e.componentOriginalValues,
+              [t.componentId]: {
+                value: t.value,
+                timestamp: Date.now(),
+                source: t.source || "initialized",
+                isPopulated: t.source !== "initialized"
+              }
+            })
+          })
+        }
+      }
+    },
+    // Enhanced execution states for step and component actions
+    executingActions: {
+      on: {
+        COMPONENT_ACTION_START: {
+          actions: a({
+            activeComponentActions: ({ context: e, event: t }) => {
+              const n = e.activeComponentActions[t.componentId] || [];
+              return {
+                ...e.activeComponentActions,
+                [t.componentId]: [
+                  ...n,
+                  {
+                    actionId: t.actionId,
+                    componentId: t.componentId,
+                    status: "executing",
+                    startTime: Date.now()
+                  }
+                ]
+              };
+            }
+          })
+        },
+        COMPONENT_ACTION_COMPLETE: {
+          actions: a({
+            activeComponentActions: ({ context: e, event: t }) => {
+              const n = e.activeComponentActions[t.componentId] || [];
+              return {
+                ...e.activeComponentActions,
+                [t.componentId]: n.map(
+                  (i) => i.actionId === t.actionId ? { ...i, status: "completed" } : i
+                )
+              };
+            }
+          })
+        },
+        COMPONENT_ACTION_FAILED: {
+          actions: a({
+            activeComponentActions: ({ context: e, event: t }) => {
+              const n = e.activeComponentActions[t.componentId] || [];
+              return {
+                ...e.activeComponentActions,
+                [t.componentId]: n.map(
+                  (i) => i.actionId === t.actionId ? {
+                    ...i,
+                    status: "failed",
+                    error: t.error
+                  } : i
+                )
+              };
+            }
+          })
+        },
+        SHOW_COMPONENT_ALERT: {
+          actions: a({
+            componentAlerts: ({ context: e, event: t }) => {
+              const i = (e.componentAlerts[t.componentId] || []).filter(
+                (o) => o.id !== t.alert.id
+              );
+              return {
+                ...e.componentAlerts,
+                [t.componentId]: [...i, t.alert]
+              };
+            }
+          })
+        },
+        ACTION_START: {
+          actions: a({
+            activeActions: ({ context: e, event: t }) => ({
+              ...e.activeActions,
+              [t.actionId]: {
+                actionId: t.actionId,
+                status: "executing",
+                startTime: Date.now()
+              }
+            })
+          })
+        },
+        ACTION_SUCCESS: {
+          actions: a({
+            activeActions: ({ context: e, event: t }) => ({
+              ...e.activeActions,
+              [t.actionId]: {
+                ...e.activeActions[t.actionId],
+                status: "success",
+                result: t.result,
+                completedTime: Date.now()
+              }
+            })
+          })
+        },
+        ACTION_ERROR: {
+          actions: a({
+            activeActions: ({ context: e, event: t }) => ({
+              ...e.activeActions,
+              [t.actionId]: {
+                ...e.activeActions[t.actionId],
+                status: "error",
+                error: t.error,
+                completedTime: Date.now()
+              }
+            })
+          })
+        },
+        ACTIONS_COMPLETED: {
+          target: "executingPendingNavigation",
+          actions: a({
+            // Clear all action execution state
+            activeActions: {},
+            executingTrigger: null,
+            waitingForActions: !1,
+            canNavigate: !0,
+            // Store final results
+            actionResults: ({ context: e, event: t }) => ({
+              ...e.actionResults,
+              ...t.results
+            })
+          })
+        },
+        SHOW_ACTION_DIALOG: {
+          target: "showingActionDialog",
+          actions: a({
+            activeDialog: ({ event: e }) => e.dialogConfig,
+            canNavigate: !1,
+            // Block navigation until dialog is resolved
+            waitingForActions: !1
+            // Clear action waiting state
+          })
+        },
+        TRIGGER_COMPONENT_ACTION: {
+          actions: [p]
+        },
+        DISMISS_COMPONENT_ALERT: {
+          actions: a({
+            componentAlerts: ({ context: e, event: t }) => {
+              const n = e.componentAlerts[t.componentId] || [], i = t.alertId ? n.filter((o) => o.id !== t.alertId) : [];
+              return {
+                ...e.componentAlerts,
+                [t.componentId]: i
+              };
+            }
+          })
+        },
+        CLEAR_COMPONENT_ALERT: {
+          actions: a({
+            componentAlerts: ({ context: e, event: t }) => ({
+              ...e.componentAlerts,
+              [t.componentId]: []
+            })
+          })
+        }
+      }
+    },
+    // State for evaluating navigation and potentially executing trigger actions
+    evaluatingNavigation: {
+      entry: [],
+      always: [
+        {
+          // PRIORITY 1: Execute save context actions (including verification dialogs)
+          guard: E,
+          target: "executingContextActions",
+          actions: [
+            a({
+              activeExecutionPlan: ({ context: e }) => {
+                console.log(
+                  "🎯 [formMachine] Creating execution plan for save context in evaluatingNavigation"
+                );
+                const t = u.createExecutionPlan(
+                  e.config,
+                  "save",
+                  e.currentStepIndex,
+                  e
+                );
+                return console.log("🎯 [formMachine] Save context execution plan:", {
+                  totalActions: t.totalActions,
+                  executionsCount: t.executions.length,
+                  executions: t.executions.map((n) => ({
+                    componentId: n.componentId,
+                    triggerId: n.trigger.id,
+                    triggerType: n.trigger.type,
+                    actionsCount: n.actions.length,
+                    actions: n.actions.map((i) => ({
+                      id: i.id,
+                      type: i.type,
+                      contexts: i.contexts
+                    }))
+                  }))
+                }), t;
+              }
+            })
+          ]
+        },
+        {
+          // PRIORITY 2: Check for other dirty components with triggers for step navigation
+          guard: v,
+          target: "executingTriggerActions",
+          actions: [
+            a({
+              executingTrigger: "onStepFinish",
+              waitingForActions: !0,
+              canNavigate: !1
+            }),
+            // Execute the component trigger actions
+            ({ context: e, self: t }) => {
+              console.log(
+                "🎯 [formMachine] Executing dirty component trigger actions for step navigation"
+              ), u.findDirtyComponentsForNavigation(
+                e.config,
+                e.currentStepIndex,
+                e,
+                "step"
+              ).forEach(
+                ({ componentId: i, trigger: o, actions: r }) => {
+                  r.forEach((s) => {
+                    console.log(
+                      `⚡ [formMachine] Executing step navigation action ${s.id} for ${i}`
+                    ), t.send({
+                      type: "TRIGGER_COMPONENT_ACTION",
+                      componentId: i,
+                      triggerId: o.id,
+                      actionId: s.id,
+                      eventType: "navigationAttempt"
+                    });
+                  });
+                }
+              );
+            }
+          ]
+        },
+        {
+          // PRIORITY 3: Execute step-level onStepFinish actions if this is a next navigation
+          guard: ({ context: e }) => {
+            if (e.pendingNavigation?.type !== "next") return !1;
+            const t = e.config.steps[e.currentStepIndex];
+            if (!t || !("actions" in t)) return !1;
+            const n = t.actions || [], i = n.some(
+              (o) => o.trigger === "onStepFinish"
+            );
+            return console.log(
+              "🎯 [formMachine] Checking for step-level onStepFinish actions:",
+              {
+                stepIndex: e.currentStepIndex,
+                stepId: t.id,
+                hasFinishActions: i,
+                stepActionsCount: n.length
+              }
+            ), i;
+          },
+          target: "executingActions",
+          actions: [
+            a({
+              executingTrigger: "onStepFinish",
+              waitingForActions: !0,
+              canNavigate: !1
+            }),
+            ({ context: e, self: t }) => {
+              const n = e.config.steps[e.currentStepIndex], i = n.actions || [];
+              console.log(
+                "🎯 [formMachine] Executing step-level onStepFinish actions:",
+                {
+                  stepIndex: e.currentStepIndex,
+                  stepId: n.id,
+                  actionsCount: i.length
+                }
+              ), t.send({
+                type: "EXECUTE_ACTIONS",
+                trigger: "onStepFinish"
+              });
+            }
+          ]
+        },
+        {
+          // PRIORITY 4: Proceed with normal navigation evaluation
+          guard: O,
+          target: "executingPendingNavigation"
+        }
+      ]
+    },
+    // New state for executing trigger actions
+    executingTriggerActions: {
+      on: {
+        TRIGGER_COMPONENT_ACTION: {
+          actions: [
+            a({
+              componentTriggerState: ({ context: e, event: t }) => ({
+                ...e.componentTriggerState,
+                [`${t.componentId}-${t.triggerId}`]: {
+                  ...e.componentTriggerState[`${t.componentId}-${t.triggerId}`],
+                  isActive: !0,
+                  lastTriggered: Date.now()
+                }
+              })
+            }),
+            a({
+              activeComponentActions: ({ context: e, event: t }) => {
+                const n = e.activeComponentActions[t.componentId] || [];
+                return {
+                  ...e.activeComponentActions,
+                  [t.componentId]: [
+                    ...n,
+                    {
+                      actionId: t.actionId,
+                      componentId: t.componentId,
+                      status: "executing",
+                      startTime: Date.now()
+                    }
+                  ]
+                };
+              }
+            }),
+            p
+          ]
+        },
+        TRIGGER_ACTIONS_COMPLETE: {
+          target: "executingPendingNavigation",
+          actions: a({
+            executingTrigger: null,
+            waitingForActions: !1,
+            canNavigate: !0
+          })
+        },
+        DISMISS_COMPONENT_ALERT: {
+          actions: a({
+            componentAlerts: ({ context: e, event: t }) => {
+              const n = e.componentAlerts[t.componentId] || [], i = t.alertId ? n.filter((o) => o.id !== t.alertId) : [];
+              return {
+                ...e.componentAlerts,
+                [t.componentId]: i
+              };
+            }
+          })
+        },
+        CLEAR_COMPONENT_ALERT: {
+          actions: a({
+            componentAlerts: ({ context: e, event: t }) => ({
+              ...e.componentAlerts,
+              [t.componentId]: []
+            })
+          })
+        },
+        SHOW_ACTION_DIALOG: {
+          target: "showingActionDialog",
+          actions: a({
+            activeDialog: ({ event: e }) => e.dialogConfig,
+            canNavigate: !1,
+            waitingForActions: !1
+          })
+        }
+      }
+    },
+    // Enhanced pending navigation execution state
+    executingPendingNavigation: {
+      always: [
+        {
+          guard: S,
+          target: "idle",
+          actions: a({
+            currentStepIndex: ({ context: e }) => Math.min(
+              e.currentStepIndex + 1,
+              e.config.steps.length - 1
+            ),
+            currentStepId: ({ context: e }) => {
+              const t = Math.min(
+                e.currentStepIndex + 1,
+                e.config.steps.length - 1
+              );
+              return e.config.steps[t]?.id || "";
+            },
+            pendingNavigation: null
+          })
+        },
+        {
+          guard: A,
+          target: "idle",
+          actions: a({
+            currentStepIndex: ({ context: e }) => Math.max(e.currentStepIndex - 1, 0),
+            currentStepId: ({ context: e }) => {
+              const t = Math.max(e.currentStepIndex - 1, 0);
+              return e.config.steps[t]?.id || "";
+            },
+            pendingNavigation: null
+          })
+        },
+        {
+          guard: T,
+          target: "idle",
+          actions: a({
+            currentStepIndex: ({ context: e }) => {
+              const t = e.config.steps.findIndex(
+                (n) => n.id === e.pendingNavigation?.stepId
+              );
+              return t >= 0 ? t : e.currentStepIndex;
+            },
+            currentStepId: ({ context: e }) => e.pendingNavigation?.stepId || e.currentStepId,
+            pendingNavigation: null,
+            canNavigate: !0
+          })
+        },
+        {
+          target: "idle",
+          actions: a({
+            pendingNavigation: null,
+            canNavigate: !0
+          })
+        }
+      ]
+    },
+    showingActionDialog: {
+      on: {
+        HIDE_ACTION_DIALOG: {
+          target: "idle",
+          actions: a({
+            activeDialog: null,
+            canNavigate: !0,
+            // Allow navigation when dialog is hidden (cancelled)
+            pendingNavigation: null
+            // Clear pending navigation - don't proceed
+          })
+        },
+        // Handle dialog verification success
+        DIALOG_VERIFIED: {
+          target: "executingPendingNavigation",
+          actions: [
+            a({
+              activeDialog: null,
+              canNavigate: !0
+              // Allow navigation after successful verification
+            }),
+            // Handle updateOriginalValue action from verified dialog
+            ({ context: e, self: t }) => {
+              const n = e.activeDialog;
+              if (!n) return;
+              const i = n;
+              if (i.templateConfig?.onVerifiedAction?.type === "updateOriginalValue") {
+                const o = i.componentId;
+                o && e.data[o] !== void 0 && (console.log(
+                  `🔄 [formMachine] DIALOG_VERIFIED: Updating original value for ${o}`,
+                  {
+                    newValue: e.data[o],
+                    oldOriginalValue: e.componentOriginalValues[o]?.value
+                  }
+                ), t.send({
+                  type: "SET_COMPONENT_ORIGINAL_VALUE",
+                  componentId: o,
+                  value: e.data[o],
+                  source: "user_verified"
+                }), t.send({
+                  type: "MARK_COMPONENT_AS_POPULATED",
+                  componentId: o,
+                  value: e.data[o]
+                }), t.send({
+                  type: "DISMISS_COMPONENT_ALERT",
+                  componentId: o
+                }), t.send({
+                  type: "EVALUATE_COMPONENT_TRIGGERS",
+                  componentId: o,
+                  value: e.data[o],
+                  eventType: "valueChange"
+                }), console.log(
+                  `🔄 [formMachine] Sending RESET_FIELD_TANSTACK_STATE event for ${o}`
+                ));
+              }
+            }
+          ]
+        },
+        // Handle dialog cancellation
+        DIALOG_CANCELLED: {
+          target: "idle",
+          actions: a({
+            activeDialog: null,
+            canNavigate: !0,
+            // Reset navigation permission
+            pendingNavigation: null
+            // Clear pending navigation - don't proceed
+          })
+        },
+        DIALOG_BUTTON_CLICK: {
+          // Handle dialog button actions - will be expanded later
+          actions: []
+        },
+        NEXT: [
+          {
+            guard: d,
+            target: "idle",
+            actions: a({
+              currentStepIndex: ({ context: e }) => Math.min(
+                e.currentStepIndex + 1,
+                e.config.steps.length - 1
+              ),
+              currentStepId: ({ context: e }) => {
+                const t = Math.min(
+                  e.currentStepIndex + 1,
+                  e.config.steps.length - 1
+                );
+                return e.config.steps[t]?.id || "";
+              },
+              pendingNavigation: null
+            })
+          },
+          {
+            target: "idle",
+            actions: a({
+              activeDialog: null,
+              pendingNavigation: { type: "next" }
+            })
+          }
+        ],
+        PREVIOUS: [
+          {
+            guard: d,
+            target: "idle",
+            actions: a({
+              currentStepIndex: ({ context: e }) => Math.max(e.currentStepIndex - 1, 0),
+              currentStepId: ({ context: e }) => {
+                const t = Math.max(e.currentStepIndex - 1, 0);
+                return e.config.steps[t]?.id || "";
+              },
+              pendingNavigation: null
+            })
+          },
+          {
+            target: "idle",
+            actions: a({
+              activeDialog: null,
+              pendingNavigation: { type: "previous" }
+            })
+          }
+        ],
+        GO_TO_STEP: [
+          {
+            guard: d,
+            target: "idle",
+            actions: a({
+              currentStepIndex: ({ context: e, event: t }) => {
+                if (t.type !== "GO_TO_STEP")
+                  return e.currentStepIndex;
+                const n = e.config.steps.findIndex(
+                  (i) => i.id === t.stepId
+                );
+                return n >= 0 ? n : e.currentStepIndex;
+              },
+              currentStepId: ({ context: e, event: t }) => t.type !== "GO_TO_STEP" ? e.currentStepId : t.stepId,
+              pendingNavigation: null
+            })
+          },
+          {
+            target: "idle",
+            actions: a({
+              activeDialog: null,
+              pendingNavigation: ({ event: e }) => ({
+                type: "step",
+                stepId: e.stepId
+              })
+            })
+          }
+        ]
+      }
+    },
+    // Enhanced Section Save Flow States
+    preparingSave: {
+      entry: [],
+      always: [
+        {
+          // Validate save fields and create execution plan
+          guard: C,
+          target: "executingSaveActions",
+          actions: a({
+            saveState: ({ context: e }) => {
+              const t = u.createExecutionPlan(
+                e.config,
+                "save",
+                e.currentStepIndex,
+                e
+              );
+              return {
+                ...e.saveState,
+                executionPlan: t
+              };
+            }
+          })
+        },
+        {
+          // Validation failed or no actions to execute
+          target: "idle",
+          actions: [
+            a({
+              saveState: ({ context: e }) => ({
+                ...e.saveState,
+                saveInProgress: !1,
+                saveInitiator: null,
+                savingSection: null,
+                pendingVerifications: [],
+                completedVerifications: [],
+                validationErrors: {},
+                executionPlan: null
+              })
+            })
+          ]
+        }
+      ]
+    },
+    executingSaveActions: {
+      entry: [m],
+      on: {
+        TRIGGER_COMPONENT_ACTION: {
+          actions: [p]
+        },
+        SHOW_ACTION_DIALOG: {
+          target: "awaitingVerification",
+          actions: a({
+            activeDialog: ({ event: e }) => e.dialogConfig
+          })
+        },
+        SAVE_ACTIONS_COMPLETE: {
+          target: "completingSave"
+        }
+      }
+    },
+    awaitingVerification: {
+      on: {
+        DIALOG_VERIFIED: {
+          target: "completingSave",
+          actions: [
+            a({
+              activeDialog: null,
+              saveState: ({ context: e }) => ({
+                ...e.saveState,
+                completedVerifications: [
+                  ...e.saveState.completedVerifications,
+                  `${e.activeDialog?.templateMetadata?.componentId || "unknown"}`
+                ]
+              })
+            }),
+            ({ context: e, self: t }) => {
+              e.saveState.pendingVerifications.length <= e.saveState.completedVerifications.length + 1 && t.send({
+                type: "SAVE_ACTIONS_COMPLETE",
+                sectionId: e.saveState.savingSection || "",
+                results: {}
+              });
+            }
+          ]
+        },
+        DIALOG_CANCELLED: {
+          target: "idle",
+          actions: [
+            a({
+              activeDialog: null,
+              saveState: ({ context: e }) => ({
+                ...e.saveState,
+                saveInProgress: !1,
+                saveInitiator: null,
+                savingSection: null,
+                pendingVerifications: [],
+                completedVerifications: [],
+                validationErrors: {},
+                executionPlan: null
+              })
+            })
+          ]
+        }
+      }
+    },
+    completingSave: {
+      entry: [],
+      always: [
+        {
+          // Handle section mode transitions after successful save
+          guard: _,
+          target: "idle",
+          actions: [
+            a({
+              saveState: ({ context: e }) => ({
+                ...e.saveState,
+                saveInProgress: !1,
+                saveInitiator: null,
+                savingSection: null,
+                pendingVerifications: [],
+                completedVerifications: [],
+                validationErrors: {},
+                executionPlan: null
+              })
+            })
+          ]
+        },
+        {
+          // Default completion
+          target: "idle",
+          actions: [
+            a({
+              saveState: ({ context: e }) => ({
+                ...e.saveState,
+                saveInProgress: !1,
+                saveInitiator: null,
+                savingSection: null,
+                pendingVerifications: [],
+                completedVerifications: [],
+                validationErrors: {},
+                executionPlan: null
+              })
+            }),
+            ({ context: e, self: t }) => {
+              if (e.saveState.saveInitiator === "navigation" && e.pendingNavigation)
+                switch (e.pendingNavigation.type) {
+                  case "next":
+                    t.send({ type: "NEXT" });
+                    break;
+                  case "previous":
+                    t.send({ type: "PREVIOUS" });
+                    break;
+                  case "step":
+                    t.send({
+                      type: "GO_TO_STEP",
+                      stepId: e.pendingNavigation.stepId
+                    });
+                    break;
+                }
+            }
+          ]
+        }
+      ]
+    }
+  }
+});
+export {
+  W as formMachine
+};