XState V5 State Machines

# XState V5 State Machines for Google Antigravity IDE

Build robust UI state with XState V5 using Google Antigravity IDE. This guide covers actors, state machines, and integration patterns for complex application logic.

## Basic Machine Setup

```typescript
// src/machines/auth.ts
import { setup, assign, fromPromise } from "xstate";

interface AuthContext {
  user: User | null;
  error: string | null;
  retryCount: number;
}

type AuthEvent =
  | { type: "LOGIN"; email: string; password: string }
  | { type: "LOGOUT" }
  | { type: "RETRY" };

export const authMachine = setup({
  types: {
    context: {} as AuthContext,
    events: {} as AuthEvent,
  },
  actors: {
    loginUser: fromPromise(async ({ input }: { input: { email: string; password: string } }) => {
      const response = await fetch("/api/auth/login", {
        method: "POST",
        body: JSON.stringify(input),
      });
      if (!response.ok) throw new Error("Login failed");
      return response.json();
    }),
    logoutUser: fromPromise(async () => {
      await fetch("/api/auth/logout", { method: "POST" });
    }),
  },
  actions: {
    setUser: assign({ user: (_, event) => event.output }),
    setError: assign({ error: (_, event) => event.error.message }),
    clearError: assign({ error: null }),
    incrementRetry: assign({ retryCount: ({ context }) => context.retryCount + 1 }),
    resetRetry: assign({ retryCount: 0 }),
  },
  guards: {
    canRetry: ({ context }) => context.retryCount < 3,
  },
}).createMachine({
  id: "auth",
  initial: "idle",
  context: { user: null, error: null, retryCount: 0 },
  states: {
    idle: {
      on: { LOGIN: "loggingIn" },
    },
    loggingIn: {
      entry: "clearError",
      invoke: {
        src: "loginUser",
        input: ({ event }) => ({ email: event.email, password: event.password }),
        onDone: { target: "authenticated", actions: ["setUser", "resetRetry"] },
        onError: [
          { guard: "canRetry", target: "error", actions: ["setError", "incrementRetry"] },
          { target: "idle", actions: "setError" },
        ],
      },
    },
    authenticated: {
      on: { LOGOUT: "loggingOut" },
    },
    loggingOut: {
      invoke: {
        src: "logoutUser",
        onDone: { target: "idle", actions: assign({ user: null }) },
        onError: { target: "authenticated", actions: "setError" },
      },
    },
    error: {
      on: { RETRY: "loggingIn", LOGIN: "loggingIn" },
    },
  },
});
```

## React Integration

```typescript
// src/hooks/useAuth.ts
import { useMachine } from "@xstate/react";
import { authMachine } from "@/machines/auth";

export function useAuth() {
  const [state, send] = useMachine(authMachine);

  return {
    user: state.context.user,
    error: state.context.error,
    isLoading: state.matches("loggingIn") || state.matches("loggingOut"),
    isAuthenticated: state.matches("authenticated"),
    login: (email: string, password: string) => send({ type: "LOGIN", email, password }),
    logout: () => send({ type: "LOGOUT" }),
    retry: () => send({ type: "RETRY" }),
  };
}
```

## Form Wizard Machine

```typescript
// src/machines/wizard.ts
import { setup, assign } from "xstate";

interface WizardContext {
  currentStep: number;
  formData: Record<string, any>;
  errors: Record<string, string>;
}

export const wizardMachine = setup({
  types: { context: {} as WizardContext },
}).createMachine({
  id: "wizard",
  initial: "step1",
  context: { currentStep: 1, formData: {}, errors: {} },
  states: {
    step1: {
      on: {
        NEXT: { target: "step2", actions: assign({ currentStep: 2 }) },
        UPDATE: { actions: assign({ formData: ({ context, event }) => ({ ...context.formData, ...event.data }) }) },
      },
    },
    step2: {
      on: {
        BACK: { target: "step1", actions: assign({ currentStep: 1 }) },
        NEXT: { target: "step3", actions: assign({ currentStep: 3 }) },
        UPDATE: { actions: assign({ formData: ({ context, event }) => ({ ...context.formData, ...event.data }) }) },
      },
    },
    step3: {
      on: {
        BACK: { target: "step2", actions: assign({ currentStep: 2 }) },
        SUBMIT: "submitting",
      },
    },
    submitting: {
      invoke: {
        src: "submitForm",
        onDone: "success",
        onError: { target: "step3", actions: "setErrors" },
      },
    },
    success: { type: "final" },
  },
});
```

## Best Practices for Google Antigravity IDE

When using XState with Google Antigravity, model complex flows as state machines. Use actors for async operations. Implement guards for conditional transitions. Let Gemini 3 generate machines from flow diagrams.

Google Antigravity excels at visualizing and debugging XState machines.