floppy-disk 3.2.0 → 3.2.2

package/README.md

@@ -2,7 +2,7 @@
 
 A unified state model for **sync & async** data.
 
-If you know [Zustand](https://zustand.docs.pmnd.rs) & [TanStack-Query](https://tanstack.com/query), you already know FloppyDisk.\
+If you know [Zustand](https://zustand.docs.pmnd.rs) & [TanStack-Query](https://tanstack.com/query), you already know FloppyDisk(.ts).\
 It keeps what works, removes unnecessary complexity, and unifies everything into a simpler API.\
 No relearning—just a better experience.
 
@@ -16,79 +16,125 @@ Demo: https://afiiif.github.io/floppy-disk/
 npm install floppy-disk
 ```
 
-## Global Store
+## In short, it is:
 
-Here's how to create and use a store:
+- **Like Zustand, but has additional capability:**
+  - No selector: auto optimize re-render.
+  - Store events: `onSubscribe`, `onUnSubscribe`, etc.
+  - Easier to set initial state from server
+  - Smaller bundle
+- **Like TanStack Query, but:**
+  - DX is very similar to Zustand → One mental model for sync & async
+  - Extremely less bundle size → With almost the same capabilities
+
+# Store (Global State)
+
+A store is a global state container that can be used both **inside and outside** React.\
+With FloppyDisk, creating a store is simple:
 
 ```tsx
 import { createStore } from "floppy-disk/react";
 
-const useDigimon = createStore({
-  age: 7,
-  level: "Rookie",
+const useLawn = createStore({
+  plants: 3,
+  zombies: 1,
 });
 ```
 
-You can use the store both inside and outside of React components.
+Use it inside a component:
 
 ```tsx
-function MyDigimon() {
-  const { age } = useDigimon();
-  return <div>Digimon age: {age}</div>;
-  // This component will only re-render when `age` changes.
-  // Changes to `level` will NOT trigger a re-render.
+function MyPlants() {
+  const { plants } = useLawn(); // No selectors needed.
+
+  return <div>Plants: {plants}</div>; // Only re-render when plants state changes
 }
+```
 
-function Control() {
-  return (
-    <>
-      <button
-        onClick={() => {
-          // You can setState directly
-          useDigimon.setState((prev) => ({ age: prev.age + 1 }));
-        }}
-      >
-        Increase digimon's age
-      </button>
+Update the state **anywhere**:
 
-      <button onClick={evolve}>Evolve</button>
-    </>
-  );
-}
+```tsx
+const addPlant = () => {
+  useLawn.setState(prev => ({ plants: prev.plants + 1 }));
+};
+```
 
-// You can create a custom actions
-const evolve = () => {
-  const { level } = useDigimon.getState();
+## Updating State
 
-  const order = ["In-Training", "Rookie", "Champion", "Ultimate"];
-  const nextLevel = order[order.indexOf(level) + 1];
+You can update state using `setState`:
 
-  if (!nextLevel) return console.warn("Already at ultimate level");
+```tsx
+const useLawn = createStore({ plants: 3, zombies: 1 });
+// Current state: { plants: 3, zombies: 1 }
 
-  useDigimon.setState({ level: nextLevel });
-};
+useLawn.setState({ plants: 5, zombies: 5 });
+// Current state: { plants: 5, zombies: 5 }
+
+useLawn.setState({ plants: 7 }); // 👈 Partial update
+// Current state: { plants: 7, zombies: 5 }
+
+useLawn.setState(prev => ({ plants: prev.plant + 2 })); // 👈 Using function
+// Current state: { plants: 9, zombies: 5 }
 ```
 
-### Store Subscription
+## Reading State Outside React
 
-At its core, FloppyDisk is a **pub-sub store**.
+Stores are not limited to React. You can access state **anywhere**:
 
-You can subscribe manually:
+```tsx
+const state = useLawn.getState();
+console.log(state.plants);
+```
+
+## Subscribing to Changes
+
+You can subscribe to state changes:
 
 ```tsx
-const unsubscribe = useMyStore.subscribe((state, prev) => {
-  console.log("New state:", state);
+const unsubscribeLawn = useLawn.subscribe((currentState, prevState) => {
+  console.log("State changed:", currentState);
 });
 
 // Later
-unsubscribe();
+unsubscribeLawn(); // when you no longer need it
+```
+
+## Transient Updates (No Re-render)
+
+Sometimes you want to listen to changes **without triggering re-renders**.
+You can do this by simply subscribing to the store:
+
+```tsx
+function MyComponent() {
+
+  useEffect(() => useLawn.subscribe((currentState, prevState) => {
+    if (currentState.zombies !== prevState.zombies) {
+      console.log("Zombie updated");
+      // Do something ...
+    }
+  }), []);
+
+  ...
+}
 ```
 
-FloppyDisk provides lifecycle hooks tied to subscription count.
+# Store Events
+
+FloppyDisk provides lifecycle events to help you understand when **subscribers are added or removed**, and react accordingly.
+
+Each store exposes the following events:
+
+- `onFirstSubscribe` → triggered right after the first subscriber is added
+- `onSubscribe` → triggered after any subscriber is added (including the first)
+- `onUnsubscribe` → triggered right after a subscriber is removed
+- `onLastUnsubscribe` → triggered after the last subscriber is removed
 
 ```tsx
-const useTowerDefense = createStore(
-  { archers: 3, mages: 1, barracks: 2, artillery: 1 },
+const useLawn = createStore(
+  {
+    plants: 3,
+    zombies: 1,
+  },
   {
     onFirstSubscribe: () => {
       console.log("First subscriber! We’re officially popular 🎉");
@@ -106,46 +152,47 @@ const useTowerDefense = createStore(
 );
 ```
 
-### Differences from Zustand
+## Use Cases
 
-If you're coming from Zustand, this should feel very familiar.\
-Key differences:
+These events let you control resource lifecycle based on usage.\
+You know exactly:
+- when something starts being used
+- when it's no longer needed
 
-1. **No Selectors Needed**\
-   You don't need selectors when using hooks.
-   FloppyDisk automatically tracks which parts of the state are used and optimizes re-renders accordingly.
-2. **Object-Only Store Initialization**\
-   In FloppyDisk, stores **must** be initialized with an object. Primitive values or function initializers are not allowed.
 
-Zustand examples:
+**Perfect for:**
+- opening / closing connections
+- starting / stopping polling
+- initializing expensive resources
+- adding / removing window event listeners
 
-```tsx
-const useDate = create(new Date(2021, 01, 11));
-
-const useCounter = create((set) => ({
-  value: 1,
-  increment: () => set((prev) => ({ value: prev.value + 1 })),
-}));
-```
+## State Changes Event
 
-FloppyDisk equivalents:
+Sometimes you want to observe state changes **without becoming a subscriber**.
 
-```tsx
-const useDate = createStore({ value: new Date(2021, 01, 11) });
+In addition to lifecycle events, FloppyDisk provides `onStateChange` event.
+It listens to changes, but does NOT count as a subscriber.
+It Acts like a "**spy**" on state updates.
 
-const useCounter = createStore({ value: 1 });
-const increment = () => useCounter.setState((prev) => ({ value: prev.value + 1 }));
-// Unlike Zustand, defining actions inside the store is **discouraged** in FloppyDisk.
-// This improves tree-shakeability and keeps your store minimal.
+Useful for devtools, logging, or debugging state changes.
 
-// However, it's still possible to mix actions with the state if you understand how closures work:
-const useCounterAlt = createStore({
-  value: 1,
-  increment: () => useCounterAlt.setState((prev) => ({ value: prev.value + 1 })),
-});
+```tsx
+const useLawn = createStore(
+  {
+    plants: 3,
+    zombies: 1,
+  },
+  {
+    onStateChange: (currentState, prevState) => {
+      if (currentState.zombies === 0 && prevState.zombies > 30) {
+        toast("🏆 Achievement unlocked! Clear more than 30 zombies at once!");
+      }
+    }
+  },
+);
 ```
 
-## Async State (Query & Mutation)
+# Query & Mutation Store for Async State
 
 FloppyDisk also provides a powerful async state layer, inspired by [TanStack-Query](https://tanstack.com/query) but with a simpler API.
 
@@ -158,7 +205,7 @@ Instead, we use:
 - **execute** → run the async operation (same as "fetch" in TanStack-Query)
 - **revalidate** → re-run while keeping existing data (same as "refetch" in TanStack-Query)
 
-### Query vs Mutation
+## Query vs Mutation
 
 <details>
 
@@ -210,64 +257,56 @@ If you need retry mechanism, then you can always add it manually.
 
 </details>
 
-### Single Query
+## Single Query
 
 Create a query using `createQuery`:
 
 ```tsx
 import { createQuery } from "floppy-disk/react";
 
-const myCoolQuery = createQuery(
+const myQuery = createQuery(
   myAsyncFn,
   // { staleTime: 5000, revalidateOnFocus: false } <-- optional options
 );
+```
 
-const useMyCoolQuery = myCoolQuery();
+Use it inside your component:
 
-// Use it inside your component:
+```tsx
+const useMyQuery = myQuery();
 
 function MyComponent() {
-  const query = useMyCoolQuery();
-  if (query.state === "INITIAL") return <div>Loading...</div>;
-  if (query.error) return <div>Error: {query.error.message}</div>;
-  return <div>{JSON.stringify(query.data)}</div>;
+  const { data, error } = useMyQuery();
+
+  if (!data && !error) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return <div>{data.foo} {data.bar}</div>;
 }
 ```
 
-### Query State: Two Independent Dimensions
+## Query State: Two Independent Dimensions
 
 FloppyDisk tracks two things separately:
 
-- Is it running? → `isPending`\
-  (value: `boolean`)
-- What's the result? → `state`\
-  (value: `INITIAL | 'SUCCESS' | 'ERROR' | 'SUCCESS_BUT_REVALIDATION_ERROR'`)
+- Is it running? → `isPending`
+- What's the result? → `state`
 
 They are **independent**.
 
-### Automatic Re-render Optimization
-
-Just like the global store, FloppyDisk tracks usage automatically:
-
-```tsx
-const { data } = useMyQuery();
-// ^Only data changes will trigger a re-render
-
-const value = useMyQuery().data?.foo.bar.baz;
-// ^Only data.foo.bar.baz changes will trigger a re-render
-```
-
-### Keyed Query (Dynamic Params)
+## Keyed Query (Dynamic Params)
 
 You can create parameterized queries:
 
 ```tsx
-import { getUserById, type GetUserByIdResponse } from "../utils";
+import { createQuery } from "floppy-disk/react";
 
-type MyQueryParam = { id: string };
+import { getZombieById, type GetZombieByIdResponse } from "../utils"; // Your own module
 
-const userQuery = createQuery<GetUserByIdResponse, MyQueryParam>(
-  getUserById,
+type ZombieQueryParam = { id: string };
+
+const zombieQuery = createQuery<GetZombieByIdResponse, ZombieQueryParam>(
+  getZombieById,
   // { staleTime: 5000, revalidateOnFocus: false } <-- optional options
 );
 ```
@@ -275,18 +314,44 @@ const userQuery = createQuery<GetUserByIdResponse, MyQueryParam>(
 Use it with parameters:
 
 ```tsx
-function UserDetail({ id }) {
-  const useUserQuery = userQuery({ id: 1 });
-  const query = useUserQuery();
-  if (query.state === "INITIAL") return <div>Loading...</div>;
-  if (query.error) return <div>Error: {query.error.message}</div>;
-  return <div>{JSON.stringify(query.data)}</div>;
+function ZombieDetail({ id }) {
+  const useZombieQuery = zombieQuery({ id });
+  const { data, error } = useZombieQuery();
+
+  if (!data && !error) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return <div>Name: {data.name}, hp: {data.hp}</div>;
 }
 ```
 
 Each unique parameter creates its own cache entry.
 
-### Infinite Query
+## Store Inheritance
+
+Queries in FloppyDisk are built on top of the core store.
+This means every query inherits the same capabilities, such as `subscribe`, `getState`, and store events.
+It also gets **automatic reactivity** out of the box, so components rerender only when the state they use actually changes.
+
+```tsx
+const { data } = useMyQuery();
+// ^Only data changes will trigger a re-render
+
+const value = useMyQuery().data?.foo.bar.baz;
+// ^Only data.foo.bar.baz changes will trigger a re-render
+```
+
+Get state outside React:
+
+```tsx
+const myPlantQuery = createQuery<MyPlantResponse>(getMyPlant); // Query without paramerer
+const zombieQuery = createQuery<GetZombieByIdResponse, { id: string }>(getZombieById); // Parameterized query
+
+const getMyPlantQueryData = () => myPlantQuery().getState().data;
+const getUserQueryData = ({ id }) => zombieQuery({ id }).getState().data;
+```
+
+## Infinite Query
 
 FloppyDisk does **not provide** a dedicated "infinite query" API.\
 Instead, it embraces a simpler and more flexible approach:
@@ -304,15 +369,15 @@ No special abstraction needed.
 Here is the example on how to implement infinite query properly:
 
 ```tsx
-type GetPostParams = {
+type GetPlantParams = {
   cursor?: string; // For pagination
 };
-type GetPostsResponse = {
-  posts: Post[];
+type GetPlantsResponse = {
+  plants: Plant[];
   meta: { nextCursor: string };
 };
 
-const postsQuery = createQuery<GetPostsResponse, GetPostParams>(getPosts, {
+const plantsQuery = createQuery<GetPlantsResponse, GetPlantParams>(getPlants, {
   staleTime: Infinity,
   revalidateOnFocus: false,
   revalidateOnReconnect: false,
@@ -323,16 +388,16 @@ function Main() {
 }
 
 function Page({ cursor }: { cursor?: string }) {
-  const usePostsQuery = postsQuery({ cursor });
-  const { state, data, error } = usePostsQuery();
+  const usePlantsQuery = plantsQuery({ cursor });
+  const { state, data, error } = usePlantsQuery();
 
-  if (state === "INITIAL") return <div>Loading...</div>;
+  if (!data && !error) return <div>Loading...</div>;
   if (error) return <div>Error</div>;
 
   return (
     <>
-      {data.posts.map((post) => (
-        <PostCard key={post.id} post={post} />
+      {data.plants.map((plant) => (
+        <PlantCard key={plant.id} plant={plant} />
       ))}
       {data.meta.nextCursor && <LoadMore nextCursor={data.meta.nextCursor} />}
     </>
@@ -341,7 +406,7 @@ function Page({ cursor }: { cursor?: string }) {
 
 function LoadMore({ nextCursor }: { nextCursor?: string }) {
   const [isNextPageRequested, setIsNextPageRequested] = useState(() => {
-    const stateOfNextPageQuery = postsQuery({ cursor: nextCursor }).getState();
+    const stateOfNextPageQuery = plantsQuery({ cursor: nextCursor }).getState();
     return stateOfNextPageQuery.isPending || stateOfNextPageQuery.isSuccess;
   });
 
@@ -349,7 +414,7 @@ function LoadMore({ nextCursor }: { nextCursor?: string }) {
     return <Page cursor={nextCursor} />;
   }
 
-  return <BottomObserver onReachBottom={() => setIsNextPageRequested(true)} />;
+  return <DomObserver onReachBottom={() => setIsNextPageRequested(true)} />;
 }
 ```
 
@@ -366,11 +431,104 @@ If revalidation is triggered:
 This leads to a **confusing and unstable user experience**.\
 Revalidating dozens of previously viewed pages rarely provides value to the user.
 
-## SSR Guidance
+## Mutation
+
+Mutations are used to perform write operations—such as creating, updating, or deleting data.
+
+FloppyDisk provides two ways to use mutations:
+- Global mutation → shared state across components
+- Local mutation → isolated per component
+
+### Global Mutation
+
+Create a global mutation using `createMutation`:
+
+```tsx
+import { createMutation } from "floppy-disk/react";
+
+const useUpdatePlant = createMutation(updatePlant, {
+  onSuccess: (data) => {
+    console.log("Global success:", data);
+  },
+});
+```
+
+Use it inside any component:
+
+```tsx
+function UpdateButton() {
+  const { isPending } = useUpdatePlant();
+
+  return (
+    <button
+      disabled={isPending}
+      onClick={() => {
+        useUpdatePlant.execute({ id: 1, name: "Sunflower", hp: 300 });
+      }}
+    >
+      Update User
+    </button>
+  );
+}
+```
+
+Characteristics:
+- Shared across all components
+- Single source of truth for mutation state
+- Can be triggered from anywhere using `.execute()`
+- Useful for global actions (e.g. forms, shared actions)
+
+### Local Mutation
+
+Create a local mutation using `useMutation`:
+
+```tsx
+import { useMutation } from "floppy-disk/react";
+
+function UpdateForm() {
+  const [result, { execute }] = useMutation(updateZombie, {
+    onSuccess: (data) => {
+      console.log("Local success:", data);
+    },
+  });
+
+  return (
+    <div>
+      <button
+        disabled={result.isPending}
+        onClick={() => {
+          execute({ id: 27, name: "Gargantuar", hp: 3000 });
+        }}
+      >
+        Submit
+      </button>
+
+      {result.isError && <div>Error occurred</div>}
+    </div>
+  );
+}
+```
+
+Characteristics:
+- Isolated per component instance
+- Each usage has its own state
+- No shared side effects
+- Ideal for component-scoped interactions
+
+### Execution
+
+Both global and local mutations:
+
+- Execute via `execute(input)`
+- Return a Promise that **never throw**.\
+  It returns `{ variable: TVariable; data?: TData; error?: TError }` instead.
+- Update state automatically (`isPending`, `isSuccess`, `isError`, etc.)
+
+# SSR Guidance
 
 Examples for using stores and queries in SSR with isolated data (no shared state between users).
 
-### Initialize Store State from Server
+## Initialize Store State from Server
 
 ```tsx
 const useCountStore = createStore({ count: 0 });
@@ -384,7 +542,7 @@ function Page({ initialCount }) {
 }
 ```
 
-### Initialize Query Data from Server
+## Initialize Query Data from Server
 
 ```tsx
 async function MyServerComponent() {
@@ -404,3 +562,131 @@ function MyClientComponent({ initialData }) {
   return <>count is {data.count}</>; // Output: count is 3
 }
 ```
+
+# Query State Machine
+
+This is how the query state transition flow looks like:
+
+```
+   initial                                                              failed, won't retry
+ ┌────────────────────────────┐                                       ┌────────────────────────────┐
+ │ isPending: false           │                                      ■│ isPending: false           │
+ │ isRevalidating: false      │                                       │ isRevalidating: false      │
+ │                            │                  ┌──────────────────▶ │                            │
+ │ state: "INITIAL"           │                  │                   ■│ state: "ERROR"             │
+ │ isSuccess: false           │                  │                    │ isSuccess: false           │
+ │ data: undefined            │                  │                    │ data: undefined            │
+ │ dataUpdatedAt: undefined   │                  │                    │ dataUpdatedAt: undefined   │
+ │ dataStaleAt: undefined     │                  │                    │ dataStaleAt: undefined     │
+ │ isError: false             │                  │                   ■│ isError: true              │
+ │ error: undefined           │                  │                   ■│ error: <TError>            │
+ │ errorUpdatedAt: undefined  │                  │                   ■│ errorUpdatedAt: <number>   │
+ │                            │                  │                    │                            │
+ │ willRetryAt: undefined     │                  │                    │ willRetryAt: undefined     │
+ │ isRetrying: false          │                  │                   •│ isRetrying: false          │
+ │ retryCount: 0              │                  │                   •│ retryCount: 0 (reset)      │
+ └─────────────┬──────────────┘                  │                    └────────────────────────────┘
+               │                                 │
+               │ execute                         │
+               ▼                                 │                      waiting retry delay
+ ┌────────────────────────────┐                 (N)                   ┌────────────────────────────┐
+■│ isPending: true         [ƒ]│                  │                   ■│ isPending: false           │
+ │ isRevalidating: false      │    fail          │                    │ isRevalidating: false      │
+ │                            ├──────────▶ Should retry? ────(Y)────▶ │                            │
+ │ state: "INITIAL"           │                  ▲                    │ state: "INITIAL"           │
+ │ isSuccess: false           │                  │                    │ isSuccess: false           │
+ │ data: undefined            │                  │                    │ data: undefined            │
+ │ dataUpdatedAt: undefined   │                  │                    │ dataUpdatedAt: undefined   │
+ │ dataStaleAt: undefined     │                  │                    │ dataStaleAt: undefined     │
+ │ isError: false             │                  │                    │ isError: false             │
+ │ error: undefined           │                  │                    │ error: undefined           │
+ │ errorUpdatedAt: undefined  │                  │                    │ errorUpdatedAt: undefined  │
+ │                            │                  │                    │                            │
+ │ willRetryAt: undefined     │                  │                   ■│ willRetryAt: <number>      │
+ │ isRetrying: false          │                  │                    │ isRetrying: false          │
+ │ retryCount: 0              │                  │                    │ retryCount: <number>       │
+ └─────────────┬──────────────┘                  │                    └─────────────┬──────────────┘
+               │                                 │                                  │
+               │ success                         │                                  │ retrying
+               ▼                                 │                                  ▼
+ ┌────────────────────────────┐                  │                    ┌────────────────────────────┐
+■│ isPending: false           │                  │                   ■│ isPending: true         [ƒ]│
+ │ isRevalidating: false      │                  │            fail    │ isRevalidating: false      │
+ │                            │                  └────────────────────┤                            │
+■│ state: "SUCCESS"           │                                       │ state: "INITIAL"           │
+■│ isSuccess: true            │                                       │ isSuccess: false           │
+■│ data: <TData>              │                                       │ data: undefined            │
+■│ dataUpdatedAt: <number>    │                                       │ dataUpdatedAt: undefined   │
+■│ dataStaleAt: <number>      │                                       │ dataStaleAt: undefined     │
+ │ isError: false             │                                       │ isError: false             │
+ │ error: undefined           │                                       │ error: undefined           │
+ │ errorUpdatedAt: undefined  │                            success    │ errorUpdatedAt: undefined  │
+ │                            │ ◀─────────────────────────────────────┤                            │
+ │ willRetryAt: undefined     │                                      ■│ willRetryAt: undefined     │
+•│ isRetrying: false          │                                      ■│ isRetrying: true           │
+•│ retryCount: 0 (reset)      │                                      ■│ retryCount: <number> (+1)  │
+ └────────────────────────────┘                                       └────────────────────────────┘
+```
+
+And then after success:
+
+```
+   success                                                              failed, won't retry
+ ┌────────────────────────────┐                                       ┌─────────────────────────────────────────┐
+ │ isPending: false           │                                      ■│ isPending: false                        │
+ │ isRevalidating: false      │                                      ■│ isRevalidating: false                   │
+ │                            │                  ┌──────────────────▶ │                                         │
+ │ state: "SUCCESS"           │                  │                   ■│ state: "SUCCESS_BUT_REVALIDATION_ERROR" │
+ │ isSuccess: true            │                  │                    │ isSuccess: true                         │
+ │ data: <TData>              │                  │                    │ data: <TData>                           │
+ │ dataUpdatedAt: <number>    │                  │                    │ dataUpdatedAt: <number>                 │
+ │ dataStaleAt: <number>      │                  │                    │ dataStaleAt: <number>                   │
+ │ isError: false             │                  │                    │ isError: false                          │
+ │ error: undefined           │                  │                   ■│ error: <TError>                         │
+ │ errorUpdatedAt: undefined  │                  │                   ■│ errorUpdatedAt: <number>                │
+ │                            │                  │                    │                                         │
+ │ willRetryAt: undefined     │                  │                    │ willRetryAt: undefined                  │
+ │ isRetrying: false          │                  │                   •│ isRetrying: false                       │
+ │ retryCount: 0              │                  │                   •│ retryCount: 0 (reset)                   │
+ └─────────────┬──────────────┘                  │                    └─────────────────────────────────────────┘
+               │                                 │
+               │ revalidate                      │
+               ▼                                 │                      waiting retry delay
+ ┌────────────────────────────┐                 (N)                   ┌────────────────────────────┐
+■│ isPending: true         [ƒ]│                  │                   ■│ isPending: false           │
+■│ isRevalidating: true       │    fail          │                   ■│ isRevalidating: false      │
+ │                            ├──────────▶ Should retry? ────(Y)────▶ │                            │
+ │ state: "SUCCESS"           │                  ▲                    │ state: "SUCCESS"           │
+ │ isSuccess: true            │                  │                    │ isSuccess: true            │
+ │ data: <TData>              │                  │                    │ data: <TData>              │
+ │ dataUpdatedAt: <number>    │                  │                    │ dataUpdatedAt: <number>    │
+ │ dataStaleAt: <number>      │                  │                    │ dataStaleAt: <number>      │
+ │ isError: false             │                  │                    │ isError: false             │
+ │ error: undefined           │                  │                    │ error: undefined           │
+ │ errorUpdatedAt: undefined  │                  │                    │ errorUpdatedAt: undefined  │
+ │                            │                  │                    │                            │
+ │ willRetryAt: undefined     │                  │                   ■│ willRetryAt: <number>      │
+ │ isRetrying: false          │                  │                    │ isRetrying: false          │
+ │ retryCount: 0              │                  │                    │ retryCount: <number>       │
+ └─────────────┬──────────────┘                  │                    └─────────────┬──────────────┘
+               │                                 │                                  │
+               │ success                         │                                  │ retrying
+               ▼                                 │                                  ▼
+ ┌────────────────────────────┐                  │                    ┌────────────────────────────┐
+■│ isPending: false           │                  │                   ■│ isPending: true         [ƒ]│
+■│ isRevalidating: false      │                  │            fail   ■│ isRevalidating: true       │
+ │                            │                  └────────────────────┤                            │
+ │ state: "SUCCESS"           │                                       │ state: "SUCCESS"           │
+ │ isSuccess: true            │                                       │ isSuccess: true            │
+■│ data: <TData>              │                                       │ data: <TData>              │
+■│ dataUpdatedAt: <number>    │                                       │ dataUpdatedAt: <number>    │
+■│ dataStaleAt: <number>      │                                       │ dataStaleAt: <number>      │
+ │ isError: false             │                                       │ isError: false             │
+ │ error: undefined           │                                       │ error: undefined           │
+ │ errorUpdatedAt: undefined  │                            success    │ errorUpdatedAt: undefined  │
+ │                            │ ◀─────────────────────────────────────┤                            │
+ │ willRetryAt: undefined     │                                      ■│ willRetryAt: undefined     │
+•│ isRetrying: false          │                                      ■│ isRetrying: true           │
+•│ retryCount: 0 (reset)      │                                      ■│ retryCount: <number> (+1)  │
+ └────────────────────────────┘                                       └────────────────────────────┘
+```

package/package.json

@@ -2,7 +2,7 @@
   "name": "floppy-disk",
   "description": "Lightweight unified state management for sync and async data.",
   "private": false,
-  "version": "3.2.0",
+  "version": "3.2.2",
   "keywords": [
     "utilities",
     "store",