@xstate/react 6.1.0 → 7.0.0-alpha.2

package/README.md

@@ -24,10 +24,10 @@ const toggleMachine = createMachine({
   initial: 'inactive',
   states: {
     inactive: {
-      on: { TOGGLE: 'active' }
+      on: { TOGGLE: { target: 'active' } }
     },
     active: {
-      on: { TOGGLE: 'inactive' }
+      on: { TOGGLE: { target: 'inactive' } }
     }
   }
 });

package/dist/declarations/src/useActorRef.d.ts

@@ -3,7 +3,8 @@ export declare function useIdleActorRef<TLogic extends AnyActorLogic>(logic: TLo
     options?: ActorOptions<TLogic> & {
         [K in RequiredActorOptionsKeys<TLogic>]: unknown;
     }
-], IsNotNever<RequiredActorOptionsKeys<TLogic>>>): Actor<TLogic>;
+], IsNotNever<RequiredActorOptionsKeys<TLogic>>>): [Actor<TLogic>, (actorRef: Actor<TLogic>) => void];
+export declare function useActorLifecycle<TLogic extends AnyActorLogic>(actorRef: Actor<TLogic>, setActorRef: (actorRef: Actor<TLogic>) => void, createReplacement: () => Actor<TLogic>): void;
 export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, ...[options, observerOrListener]: IsNotNever<RequiredActorOptionsKeys<TLogic>> extends true ? [
     options: ActorOptions<TLogic> & {
         [K in RequiredActorOptionsKeys<TLogic>]: unknown;

package/dist/xstate-react.cjs.js

@@ -31,62 +31,64 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
 
-const forEachActor = (actorRef, callback) => {
-  callback(actorRef);
-  const children = actorRef.getSnapshot().children;
-  if (children) {
-    Object.values(children).forEach(child => {
-      forEachActor(child, callback);
-    });
-  }
-};
-function stopRootWithRehydration(actorRef) {
-  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
-  // we do it to avoid setState in useEffect when the effect gets "reconnected"
-  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
-  // it also just allows us to end up with a somewhat more predictable behavior for the users
-  const persistedSnapshots = [];
-  forEachActor(actorRef, ref => {
-    persistedSnapshots.push([ref, ref.getSnapshot()]);
-    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
-    // React reconnects its subscribers (from the useSyncExternalStore) on its own
-    // and userland subscribers should basically always do the same anyway
-    // as each subscription should have its own cleanup logic and that should be called each such reconnect
-    ref.observers = new Set();
-  });
-  const systemSnapshot = actorRef.system.getSnapshot?.();
-  actorRef.stop();
-  actorRef.system._snapshot = systemSnapshot;
-  persistedSnapshots.forEach(([ref, snapshot]) => {
-    ref._processingStatus = 0;
-    ref._snapshot = snapshot;
-  });
-}
-
 function useIdleActorRef(logic, ...[options]) {
-  let [[currentConfig, actorRef], setCurrent] = React.useState(() => {
-    const actorRef = xstate.createActor(logic, options);
-    return [logic.config, actorRef];
+  let [actorRef, setActorRef] = React.useState(() => {
+    return xstate.createActor(logic, options);
   });
-  if (logic.config !== currentConfig) {
+  if (logic.config !== actorRef.logic.config) {
     const newActorRef = xstate.createActor(logic, {
       ...options,
       snapshot: actorRef.getPersistedSnapshot({
         __unsafeAllowInlineActors: true
       })
     });
-    setCurrent([logic.config, newActorRef]);
+    setActorRef(newActorRef);
     actorRef = newActorRef;
   }
 
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect__default["default"](() => {
-    actorRef.logic.implementations = logic.implementations;
+    actorRef.logic.sources = logic.sources;
   });
-  return actorRef;
+  return [actorRef, setActorRef];
+}
+function useActorLifecycle(actorRef, setActorRef, createReplacement) {
+  const pendingStopsRef = React.useRef(new Map());
+  React.useEffect(() => {
+    const cancelPendingStop = pendingStopsRef.current.get(actorRef);
+    if (cancelPendingStop) {
+      cancelPendingStop();
+      pendingStopsRef.current.delete(actorRef);
+    }
+
+    // If the actor was stopped before this effect reconnected, create a fresh
+    // actor. A stopped actor cannot be restarted.
+    if (actorRef._processingStatus === 2 /* ProcessingStatus.Stopped */ && actorRef.getSnapshot()?.status === 'stopped') {
+      const newActor = createReplacement();
+      newActor.start();
+      setActorRef(newActor);
+      return;
+    }
+    actorRef.start();
+    return () => {
+      let canceled = false;
+      const cancel = () => {
+        canceled = true;
+      };
+      pendingStopsRef.current.set(actorRef, cancel);
+      queueMicrotask(() => {
+        if (!canceled) {
+          actorRef.stop();
+        }
+        if (pendingStopsRef.current.get(actorRef) === cancel) {
+          pendingStopsRef.current.delete(actorRef);
+        }
+      });
+    };
+  }, [actorRef]);
 }
 function useActorRef(machine, ...[options, observerOrListener]) {
-  const actorRef = useIdleActorRef(machine, options);
+  const [actorRef, setActorRef] = useIdleActorRef(machine, options);
   React.useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -96,12 +98,7 @@ function useActorRef(machine, ...[options, observerOrListener]) {
       sub.unsubscribe();
     };
   }, [observerOrListener]);
-  React.useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
+  useActorLifecycle(actorRef, setActorRef, () => xstate.createActor(machine, actorRef.options));
   return actorRef;
 }
 
@@ -199,7 +196,7 @@ function shallowEqual(objA, objB) {
 }
 
 function useActor(logic, ...[options]) {
-  const actorRef = useIdleActorRef(logic, options);
+  const [actorRef, setActorRef] = useIdleActorRef(logic, options);
   const getSnapshot = React.useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -217,12 +214,7 @@ function useActor(logic, ...[options]) {
   if (snapshotWithStatus?.status === 'error') {
     throw snapshotWithStatus.error;
   }
-  React.useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
+  useActorLifecycle(actorRef, setActorRef, () => xstate.createActor(logic, options));
   return [actorSnapshot, actorRef.send, actorRef];
 }
 

package/dist/xstate-react.development.cjs.js

@@ -31,62 +31,64 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
 
-const forEachActor = (actorRef, callback) => {
-  callback(actorRef);
-  const children = actorRef.getSnapshot().children;
-  if (children) {
-    Object.values(children).forEach(child => {
-      forEachActor(child, callback);
-    });
-  }
-};
-function stopRootWithRehydration(actorRef) {
-  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
-  // we do it to avoid setState in useEffect when the effect gets "reconnected"
-  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
-  // it also just allows us to end up with a somewhat more predictable behavior for the users
-  const persistedSnapshots = [];
-  forEachActor(actorRef, ref => {
-    persistedSnapshots.push([ref, ref.getSnapshot()]);
-    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
-    // React reconnects its subscribers (from the useSyncExternalStore) on its own
-    // and userland subscribers should basically always do the same anyway
-    // as each subscription should have its own cleanup logic and that should be called each such reconnect
-    ref.observers = new Set();
-  });
-  const systemSnapshot = actorRef.system.getSnapshot?.();
-  actorRef.stop();
-  actorRef.system._snapshot = systemSnapshot;
-  persistedSnapshots.forEach(([ref, snapshot]) => {
-    ref._processingStatus = 0;
-    ref._snapshot = snapshot;
-  });
-}
-
 function useIdleActorRef(logic, ...[options]) {
-  let [[currentConfig, actorRef], setCurrent] = React.useState(() => {
-    const actorRef = xstate.createActor(logic, options);
-    return [logic.config, actorRef];
+  let [actorRef, setActorRef] = React.useState(() => {
+    return xstate.createActor(logic, options);
   });
-  if (logic.config !== currentConfig) {
+  if (logic.config !== actorRef.logic.config) {
     const newActorRef = xstate.createActor(logic, {
       ...options,
       snapshot: actorRef.getPersistedSnapshot({
         __unsafeAllowInlineActors: true
       })
     });
-    setCurrent([logic.config, newActorRef]);
+    setActorRef(newActorRef);
     actorRef = newActorRef;
   }
 
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect__default["default"](() => {
-    actorRef.logic.implementations = logic.implementations;
+    actorRef.logic.sources = logic.sources;
   });
-  return actorRef;
+  return [actorRef, setActorRef];
+}
+function useActorLifecycle(actorRef, setActorRef, createReplacement) {
+  const pendingStopsRef = React.useRef(new Map());
+  React.useEffect(() => {
+    const cancelPendingStop = pendingStopsRef.current.get(actorRef);
+    if (cancelPendingStop) {
+      cancelPendingStop();
+      pendingStopsRef.current.delete(actorRef);
+    }
+
+    // If the actor was stopped before this effect reconnected, create a fresh
+    // actor. A stopped actor cannot be restarted.
+    if (actorRef._processingStatus === 2 /* ProcessingStatus.Stopped */ && actorRef.getSnapshot()?.status === 'stopped') {
+      const newActor = createReplacement();
+      newActor.start();
+      setActorRef(newActor);
+      return;
+    }
+    actorRef.start();
+    return () => {
+      let canceled = false;
+      const cancel = () => {
+        canceled = true;
+      };
+      pendingStopsRef.current.set(actorRef, cancel);
+      queueMicrotask(() => {
+        if (!canceled) {
+          actorRef.stop();
+        }
+        if (pendingStopsRef.current.get(actorRef) === cancel) {
+          pendingStopsRef.current.delete(actorRef);
+        }
+      });
+    };
+  }, [actorRef]);
 }
 function useActorRef(machine, ...[options, observerOrListener]) {
-  const actorRef = useIdleActorRef(machine, options);
+  const [actorRef, setActorRef] = useIdleActorRef(machine, options);
   React.useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -96,12 +98,7 @@ function useActorRef(machine, ...[options, observerOrListener]) {
       sub.unsubscribe();
     };
   }, [observerOrListener]);
-  React.useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
+  useActorLifecycle(actorRef, setActorRef, () => xstate.createActor(machine, actorRef.options));
   return actorRef;
 }
 
@@ -202,7 +199,7 @@ function useActor(logic, ...[options]) {
   if (!!logic && 'send' in logic && typeof logic.send === 'function') {
     throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Use the useSelector(actorRef, ...) hook instead to read the ActorRef's snapshot.`);
   }
-  const actorRef = useIdleActorRef(logic, options);
+  const [actorRef, setActorRef] = useIdleActorRef(logic, options);
   const getSnapshot = React.useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -220,12 +217,7 @@ function useActor(logic, ...[options]) {
   if (snapshotWithStatus?.status === 'error') {
     throw snapshotWithStatus.error;
   }
-  React.useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
+  useActorLifecycle(actorRef, setActorRef, () => xstate.createActor(logic, options));
   return [actorSnapshot, actorRef.send, actorRef];
 }
 

package/dist/xstate-react.development.esm.js

@@ -1,66 +1,68 @@
 import * as React from 'react';
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import { toObserver, createActor } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
-const forEachActor = (actorRef, callback) => {
-  callback(actorRef);
-  const children = actorRef.getSnapshot().children;
-  if (children) {
-    Object.values(children).forEach(child => {
-      forEachActor(child, callback);
-    });
-  }
-};
-function stopRootWithRehydration(actorRef) {
-  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
-  // we do it to avoid setState in useEffect when the effect gets "reconnected"
-  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
-  // it also just allows us to end up with a somewhat more predictable behavior for the users
-  const persistedSnapshots = [];
-  forEachActor(actorRef, ref => {
-    persistedSnapshots.push([ref, ref.getSnapshot()]);
-    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
-    // React reconnects its subscribers (from the useSyncExternalStore) on its own
-    // and userland subscribers should basically always do the same anyway
-    // as each subscription should have its own cleanup logic and that should be called each such reconnect
-    ref.observers = new Set();
-  });
-  const systemSnapshot = actorRef.system.getSnapshot?.();
-  actorRef.stop();
-  actorRef.system._snapshot = systemSnapshot;
-  persistedSnapshots.forEach(([ref, snapshot]) => {
-    ref._processingStatus = 0;
-    ref._snapshot = snapshot;
-  });
-}
-
 function useIdleActorRef(logic, ...[options]) {
-  let [[currentConfig, actorRef], setCurrent] = useState(() => {
-    const actorRef = createActor(logic, options);
-    return [logic.config, actorRef];
+  let [actorRef, setActorRef] = useState(() => {
+    return createActor(logic, options);
   });
-  if (logic.config !== currentConfig) {
+  if (logic.config !== actorRef.logic.config) {
     const newActorRef = createActor(logic, {
       ...options,
       snapshot: actorRef.getPersistedSnapshot({
         __unsafeAllowInlineActors: true
       })
     });
-    setCurrent([logic.config, newActorRef]);
+    setActorRef(newActorRef);
     actorRef = newActorRef;
   }
 
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect(() => {
-    actorRef.logic.implementations = logic.implementations;
+    actorRef.logic.sources = logic.sources;
   });
-  return actorRef;
+  return [actorRef, setActorRef];
+}
+function useActorLifecycle(actorRef, setActorRef, createReplacement) {
+  const pendingStopsRef = useRef(new Map());
+  useEffect(() => {
+    const cancelPendingStop = pendingStopsRef.current.get(actorRef);
+    if (cancelPendingStop) {
+      cancelPendingStop();
+      pendingStopsRef.current.delete(actorRef);
+    }
+
+    // If the actor was stopped before this effect reconnected, create a fresh
+    // actor. A stopped actor cannot be restarted.
+    if (actorRef._processingStatus === 2 /* ProcessingStatus.Stopped */ && actorRef.getSnapshot()?.status === 'stopped') {
+      const newActor = createReplacement();
+      newActor.start();
+      setActorRef(newActor);
+      return;
+    }
+    actorRef.start();
+    return () => {
+      let canceled = false;
+      const cancel = () => {
+        canceled = true;
+      };
+      pendingStopsRef.current.set(actorRef, cancel);
+      queueMicrotask(() => {
+        if (!canceled) {
+          actorRef.stop();
+        }
+        if (pendingStopsRef.current.get(actorRef) === cancel) {
+          pendingStopsRef.current.delete(actorRef);
+        }
+      });
+    };
+  }, [actorRef]);
 }
 function useActorRef(machine, ...[options, observerOrListener]) {
-  const actorRef = useIdleActorRef(machine, options);
+  const [actorRef, setActorRef] = useIdleActorRef(machine, options);
   useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -70,12 +72,7 @@ function useActorRef(machine, ...[options, observerOrListener]) {
       sub.unsubscribe();
     };
   }, [observerOrListener]);
-  useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
+  useActorLifecycle(actorRef, setActorRef, () => createActor(machine, actorRef.options));
   return actorRef;
 }
 
@@ -176,7 +173,7 @@ function useActor(logic, ...[options]) {
   if (!!logic && 'send' in logic && typeof logic.send === 'function') {
     throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Use the useSelector(actorRef, ...) hook instead to read the ActorRef's snapshot.`);
   }
-  const actorRef = useIdleActorRef(logic, options);
+  const [actorRef, setActorRef] = useIdleActorRef(logic, options);
   const getSnapshot = useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -194,12 +191,7 @@ function useActor(logic, ...[options]) {
   if (snapshotWithStatus?.status === 'error') {
     throw snapshotWithStatus.error;
   }
-  useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
+  useActorLifecycle(actorRef, setActorRef, () => createActor(logic, options));
   return [actorSnapshot, actorRef.send, actorRef];
 }
 

package/dist/xstate-react.esm.js

@@ -1,66 +1,68 @@
 import * as React from 'react';
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import { toObserver, createActor } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
-const forEachActor = (actorRef, callback) => {
-  callback(actorRef);
-  const children = actorRef.getSnapshot().children;
-  if (children) {
-    Object.values(children).forEach(child => {
-      forEachActor(child, callback);
-    });
-  }
-};
-function stopRootWithRehydration(actorRef) {
-  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
-  // we do it to avoid setState in useEffect when the effect gets "reconnected"
-  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
-  // it also just allows us to end up with a somewhat more predictable behavior for the users
-  const persistedSnapshots = [];
-  forEachActor(actorRef, ref => {
-    persistedSnapshots.push([ref, ref.getSnapshot()]);
-    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
-    // React reconnects its subscribers (from the useSyncExternalStore) on its own
-    // and userland subscribers should basically always do the same anyway
-    // as each subscription should have its own cleanup logic and that should be called each such reconnect
-    ref.observers = new Set();
-  });
-  const systemSnapshot = actorRef.system.getSnapshot?.();
-  actorRef.stop();
-  actorRef.system._snapshot = systemSnapshot;
-  persistedSnapshots.forEach(([ref, snapshot]) => {
-    ref._processingStatus = 0;
-    ref._snapshot = snapshot;
-  });
-}
-
 function useIdleActorRef(logic, ...[options]) {
-  let [[currentConfig, actorRef], setCurrent] = useState(() => {
-    const actorRef = createActor(logic, options);
-    return [logic.config, actorRef];
+  let [actorRef, setActorRef] = useState(() => {
+    return createActor(logic, options);
   });
-  if (logic.config !== currentConfig) {
+  if (logic.config !== actorRef.logic.config) {
     const newActorRef = createActor(logic, {
       ...options,
       snapshot: actorRef.getPersistedSnapshot({
         __unsafeAllowInlineActors: true
       })
     });
-    setCurrent([logic.config, newActorRef]);
+    setActorRef(newActorRef);
     actorRef = newActorRef;
   }
 
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect(() => {
-    actorRef.logic.implementations = logic.implementations;
+    actorRef.logic.sources = logic.sources;
   });
-  return actorRef;
+  return [actorRef, setActorRef];
+}
+function useActorLifecycle(actorRef, setActorRef, createReplacement) {
+  const pendingStopsRef = useRef(new Map());
+  useEffect(() => {
+    const cancelPendingStop = pendingStopsRef.current.get(actorRef);
+    if (cancelPendingStop) {
+      cancelPendingStop();
+      pendingStopsRef.current.delete(actorRef);
+    }
+
+    // If the actor was stopped before this effect reconnected, create a fresh
+    // actor. A stopped actor cannot be restarted.
+    if (actorRef._processingStatus === 2 /* ProcessingStatus.Stopped */ && actorRef.getSnapshot()?.status === 'stopped') {
+      const newActor = createReplacement();
+      newActor.start();
+      setActorRef(newActor);
+      return;
+    }
+    actorRef.start();
+    return () => {
+      let canceled = false;
+      const cancel = () => {
+        canceled = true;
+      };
+      pendingStopsRef.current.set(actorRef, cancel);
+      queueMicrotask(() => {
+        if (!canceled) {
+          actorRef.stop();
+        }
+        if (pendingStopsRef.current.get(actorRef) === cancel) {
+          pendingStopsRef.current.delete(actorRef);
+        }
+      });
+    };
+  }, [actorRef]);
 }
 function useActorRef(machine, ...[options, observerOrListener]) {
-  const actorRef = useIdleActorRef(machine, options);
+  const [actorRef, setActorRef] = useIdleActorRef(machine, options);
   useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -70,12 +72,7 @@ function useActorRef(machine, ...[options, observerOrListener]) {
       sub.unsubscribe();
     };
   }, [observerOrListener]);
-  useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
+  useActorLifecycle(actorRef, setActorRef, () => createActor(machine, actorRef.options));
   return actorRef;
 }
 
@@ -173,7 +170,7 @@ function shallowEqual(objA, objB) {
 }
 
 function useActor(logic, ...[options]) {
-  const actorRef = useIdleActorRef(logic, options);
+  const [actorRef, setActorRef] = useIdleActorRef(logic, options);
   const getSnapshot = useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -191,12 +188,7 @@ function useActor(logic, ...[options]) {
   if (snapshotWithStatus?.status === 'error') {
     throw snapshotWithStatus.error;
   }
-  useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
+  useActorLifecycle(actorRef, setActorRef, () => createActor(logic, options));
   return [actorSnapshot, actorRef.send, actorRef];
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "6.1.0",
+  "version": "7.0.0-alpha.2",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -54,7 +54,7 @@
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "xstate": "^5.28.0"
+    "xstate": "^6.0.0-alpha.52"
   },
   "peerDependenciesMeta": {
     "xstate": {
@@ -73,7 +73,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rxjs": "^7.8.1",
-    "xstate": "^5.28.0"
+    "zod": "^3.25.51",
+    "xstate": "^6.0.0-alpha.52"
   },
   "scripts": {}
 }