@anfenn/zync 0.1.4 → 0.1.5

package/dist/index.js

@@ -1,173 +1,87 @@
 // src/index.ts
-import "zustand";
+import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
 // src/indexedDBStorage.ts
-function createIndexedDBStorage(options = {}) {
-  if (typeof globalThis.localStorage === "undefined") {
-    const mem = {};
-    globalThis.localStorage = {
-      getItem: (k) => k in mem ? mem[k] : null,
-      setItem: (k, v) => {
-        mem[k] = v;
-      },
-      removeItem: (k) => {
-        delete mem[k];
-      },
-      clear: () => {
-        Object.keys(mem).forEach((k) => delete mem[k]);
+import { openDB } from "idb";
+function createIndexedDBStorage(options) {
+  const dbName = options.dbName;
+  const storeName = options.storeName;
+  let dbPromise = openDB(dbName, 1, {
+    upgrade(db) {
+      if (!db.objectStoreNames.contains(storeName)) {
+        db.createObjectStore(storeName);
       }
-    };
-  }
-  const dbName = options.dbName ?? "zustand-persist";
-  const storeName = options.storeName ?? "keyval";
-  const version = options.version ?? 1;
-  const log = options.logger ?? { warn: () => {
-  }, error: () => {
-  } };
-  const canUseIDB = typeof window !== "undefined" && "indexedDB" in window;
-  if (!canUseIDB) {
-    log.warn("[indexedDBStorage] IndexedDB not available \u2013 falling back to localStorage");
-    return localStorageFallback();
-  }
-  let dbPromise;
-  function openDB() {
-    if (dbPromise) return dbPromise;
-    dbPromise = new Promise((resolve, reject) => {
-      try {
-        const req = indexedDB.open(dbName, version);
-        req.onupgradeneeded = () => {
-          const db = req.result;
-          if (!db.objectStoreNames.contains(storeName)) {
-            db.createObjectStore(storeName);
-          }
-        };
-        req.onsuccess = () => resolve(req.result);
-        req.onerror = () => reject(req.error);
-        req.onblocked = () => log.warn("[indexedDBStorage] open blocked");
-      } catch (e) {
-        reject(e);
-      }
-    }).catch((e) => {
-      log.error("[indexedDBStorage] Failed to open DB, falling back to localStorage", e);
-      return void 0;
-    });
-    return dbPromise;
-  }
-  async function withStore(mode, fn) {
-    const db = await openDB();
-    if (!db) {
-      return fn(null);
     }
-    return new Promise((resolve, reject) => {
-      let tx;
-      try {
-        tx = db.transaction(storeName, mode);
-      } catch (_e) {
-        dbPromise = void 0;
-        openDB().then((fresh) => {
-          try {
-            if (!fresh) {
-              const result3 = fn(null);
-              Promise.resolve(result3).then(resolve, reject);
-              return;
-            }
-            const retryTx = fresh.transaction(storeName, mode);
-            const store2 = retryTx.objectStore(storeName);
-            const result2 = fn(store2);
-            Promise.resolve(result2).then(resolve, reject);
-          } catch (err) {
-            reject(err);
-          }
-        }, reject);
-        return;
-      }
-      const store = tx.objectStore(storeName);
-      let result;
-      try {
-        result = fn(store);
-      } catch (err) {
-        reject(err);
-        return;
-      }
-      tx.oncomplete = () => resolve(result);
-      tx.onerror = () => reject(tx.error);
-      tx.onabort = () => reject(tx.error || new Error("Transaction aborted"));
-    });
-  }
-  async function getItem(name) {
-    return withStore("readonly", (store) => {
-      console.log("READ STORE");
-      if (!store) return localStorage.getItem(name);
-      return new Promise((resolve, reject) => {
-        const req = store.get(name);
-        req.onsuccess = () => resolve(req.result ?? null);
-        req.onerror = () => reject(req.error);
-      });
-    });
-  }
-  async function setItem(name, value) {
-    return withStore("readwrite", (store) => {
-      console.log("WRITE STORE");
-      if (!store) {
-        localStorage.setItem(name, value);
-        return;
+  });
+  async function ensureStore() {
+    const db = await dbPromise;
+    if (db.objectStoreNames.contains(storeName)) return;
+    const nextVersion = (db.version || 0) + 1;
+    try {
+      db.close();
+    } catch (e) {
+    }
+    dbPromise = openDB(dbName, nextVersion, {
+      upgrade(upg) {
+        if (!upg.objectStoreNames.contains(storeName)) upg.createObjectStore(storeName);
       }
-      return new Promise((resolve, reject) => {
-        const req = store.put(value, name);
-        req.onsuccess = () => resolve();
-        req.onerror = () => reject(req.error);
-      });
     });
+    await dbPromise;
   }
-  async function removeItem(name) {
-    return withStore("readwrite", (store) => {
-      if (!store) {
-        localStorage.removeItem(name);
-        return;
+  async function withRetry(fn) {
+    try {
+      const db = await dbPromise;
+      return await fn(db);
+    } catch (err) {
+      const msg = String(err && err.message ? err.message : err);
+      if (err && (err.name === "NotFoundError" || /objectStore/i.test(msg))) {
+        await ensureStore();
+        const db2 = await dbPromise;
+        return await fn(db2);
       }
-      return new Promise((resolve, reject) => {
-        const req = store.delete(name);
-        req.onsuccess = () => resolve();
-        req.onerror = () => reject(req.error);
-      });
-    });
+      throw err;
+    }
   }
-  return { getItem, setItem, removeItem };
-}
-function localStorageFallback() {
-  const ls = globalThis.localStorage;
   return {
-    getItem: (n) => Promise.resolve(ls?.getItem ? ls.getItem(n) : null),
-    setItem: (n, v) => {
-      ls?.setItem?.(n, v);
-      return Promise.resolve();
+    getItem: async (name) => {
+      return withRetry(async (db) => {
+        let v = await db.get(storeName, name);
+        v = v ?? null;
+        console.log("getItem:", db.objectStoreNames, storeName, name, v);
+        return v;
+      });
     },
-    removeItem: (n) => {
-      ls?.removeItem?.(n);
-      return Promise.resolve();
+    setItem: async (name, value) => {
+      return withRetry(async (db) => {
+        console.log("setItem", name, value);
+        await db.put(storeName, value, name);
+      });
+    },
+    removeItem: async (name) => {
+      return withRetry(async (db) => {
+        console.log("removeItem", name);
+        await db.delete(storeName, name);
+      });
     }
   };
 }
 
 // src/index.ts
 var SyncAction = /* @__PURE__ */ ((SyncAction2) => {
-  SyncAction2["Create"] = "create";
-  SyncAction2["Update"] = "update";
+  SyncAction2["CreateOrUpdate"] = "createOrUpdate";
   SyncAction2["Remove"] = "remove";
   return SyncAction2;
 })(SyncAction || {});
 var DEFAULT_SYNC_INTERVAL_MILLIS = 5e3;
 var DEFAULT_LOGGER = console;
 var DEFAULT_MIN_LOG_LEVEL = "debug";
-var DEFAULT_MISSING_REMOTE_RECORD_ON_UPDATE_STRATEGY = "insertNewRemoteRecord";
+var DEFAULT_MISSING_REMOTE_RECORD_ON_UPDATE_STRATEGY = "ignore";
 var SYNC_FIELDS = ["id", "_localId", "updated_at", "deleted"];
 function persistWithSync(stateCreator, persistOptions, syncApi, syncOptions = {}) {
   const syncInterval = syncOptions.syncInterval ?? DEFAULT_SYNC_INTERVAL_MILLIS;
   const missingStrategy = syncOptions.missingRemoteRecordDuringUpdateStrategy ?? DEFAULT_MISSING_REMOTE_RECORD_ON_UPDATE_STRATEGY;
   const logger = newLogger(syncOptions.logger ?? DEFAULT_LOGGER, syncOptions.minLogLevel ?? DEFAULT_MIN_LOG_LEVEL);
-  let startSync;
-  let syncIntervalId;
   const baseOnRehydrate = persistOptions?.onRehydrateStorage;
   const basePartialize = persistOptions?.partialize;
   const wrappedPersistOptions = {
@@ -179,47 +93,52 @@ function persistWithSync(stateCreator, persistOptions, syncApi, syncOptions = {}
           logger.error("[persistWithSync] Rehydration failed", error);
         } else {
           baseOnRehydrate?.(state, error);
+          state.syncState.status = "idle";
           logger.debug("[persistWithSync] Rehydration complete");
-          startSync?.();
         }
       };
     },
     partialize: (s) => {
       const base = basePartialize ? basePartialize(s) : s;
-      const { syncState: _sync, ...rest } = base || {};
+      const { syncState, ...rest } = base || {};
       return {
         ...rest,
         syncState: {
-          firstLoadDone: _sync?.firstLoadDone ?? false
-        }
-      };
-    },
-    merge: (persisted, current) => {
-      const p = persisted || {};
-      const c = current || {};
-      return {
-        ...c,
-        ...p,
-        syncState: {
-          ...c.syncState,
-          firstLoadDone: p.syncState?.firstLoadDone ?? c.syncState?.firstLoadDone ?? false,
-          status: "idle"
+          firstLoadDone: syncState.firstLoadDone,
+          pendingChanges: syncState.pendingChanges,
+          lastPulled: syncState.lastPulled
         }
       };
     }
+    // merge: (persisted: any, current: any) => {
+    //     // Add unpersistable fields back e.g. functions or memory-only fields
+    //     const p = persisted || {};
+    //     const c = current || {};
+    //     return {
+    //         ...c,
+    //         ...p,
+    //         syncState: {
+    //             ...c.syncState,
+    //             ...p.syncState,
+    //             status: 'idle',
+    //             //firstLoadDone: p.syncState?.firstLoadDone ?? c.syncState.firstLoadDone ?? false,
+    //             //pendingChanges: p.syncState?.pendingChanges ?? c.syncState.pendingChanges ?? [],
+    //             //lastPulled: p.syncState?.lastPulled ?? c.syncState.lastPulled ?? {},
+    //         },
+    //     };
+    // },
   };
-  const creator = (set, get) => {
+  const creator = (set, get, storeApi) => {
+    let syncIntervalId;
     async function syncOnce() {
       const state = get();
       if (!state.syncState.enabled || state.syncState.status !== "idle") return;
-      set((state2) => {
-        return {
-          syncState: {
-            ...state2.syncState,
-            status: "syncing"
-          }
-        };
-      });
+      set((state2) => ({
+        syncState: {
+          ...state2.syncState || {},
+          status: "syncing"
+        }
+      }));
       let syncError;
       for (const stateKey of Object.keys(syncApi)) {
         try {
@@ -230,7 +149,7 @@ function persistWithSync(stateCreator, persistOptions, syncApi, syncOptions = {}
           logger.error(`[persistWithSync] Pull error for stateKey: ${stateKey}`, err);
         }
       }
-      const snapshot = [...get()._pendingChanges || []];
+      const snapshot = [...get().syncState.pendingChanges || []];
       snapshot.sort((a, b) => orderFor(a.action) - orderFor(b.action));
       for (const change of snapshot) {
         try {
@@ -251,83 +170,95 @@ function persistWithSync(stateCreator, persistOptions, syncApi, syncOptions = {}
           logger.error(`[persistWithSync] Push error for change: ${change}`, err);
         }
       }
-      set((state2) => {
-        return {
-          syncState: {
-            ...state2.syncState,
-            status: "idle",
-            error: syncError
-          }
-        };
-      });
+      set((state2) => ({
+        syncState: {
+          ...state2.syncState || {},
+          status: "idle",
+          error: syncError
+        }
+      }));
     }
-    startSync = async () => {
-      clearInterval(syncIntervalId);
-      syncIntervalId = void 0;
-      await syncOnce();
-      syncIntervalId = setInterval(syncOnce, syncInterval);
-    };
-    function queueToSync(action, localId, stateKey, changes) {
+    function queueToSync(action, stateKey, ...localIds) {
       set((state) => {
-        const queue = state._pendingChanges || [];
-        const idx = queue.findIndex((p) => p.localId === localId && p.stateKey === stateKey);
-        if (idx >= 0) {
-          const existing = queue[idx];
-          switch (existing?.action) {
-            case "create" /* Create */:
-              if (action === "update" /* Update */) {
-                existing.changes = { ...existing.changes, ...changes };
-              } else if (action === "remove" /* Remove */) {
-                queue.splice(idx, 1);
-              }
-              break;
-            case "update" /* Update */:
-              if (action === "update" /* Update */) {
-                existing.changes = { ...existing.changes, ...changes };
-              } else if (action === "remove" /* Remove */) {
-                existing.action = "remove" /* Remove */;
-                delete existing.changes;
-              }
-              break;
-            case "remove" /* Remove */:
-              break;
+        const queue = state.syncState.pendingChanges || [];
+        for (const localId of localIds) {
+          const item = state[stateKey].find((i) => i._localId === localId);
+          if (!item) {
+            logger.error("[persistWithSync] queueToSync:no-local-item", {
+              stateKey,
+              localId
+            });
+            continue;
           }
-        } else {
-          if (action === "remove" /* Remove */) {
-            const item = state[stateKey].find((i) => i._localId === localId);
-            if (item) changes = { id: item.id };
+          if (action === "remove" /* Remove */ && !item.id) {
+            logger.warn("[persistWithSync] queueToSync:remove-no-id", {
+              stateKey,
+              localId
+            });
+            continue;
+          }
+          const queueItem = queue.find((p) => p.localId === localId && p.stateKey === stateKey);
+          if (queueItem) {
+            queueItem.version += 1;
+            if (queueItem.action === "createOrUpdate" /* CreateOrUpdate */ && action === "remove" /* Remove */ && item.id) {
+              queueItem.action = "remove" /* Remove */;
+              queueItem.id = item.id;
+            }
+          } else {
+            queue.push({ action, stateKey, localId, id: item.id, version: 1 });
           }
-          queue.push({ stateKey, localId, action, changes });
         }
-        state._pendingChanges = queue;
-        return state;
-      });
-      syncOnce();
-    }
-    function setAndSync(partial) {
-      set(partial);
-      syncOnce();
-    }
-    function enableSync(enabled) {
-      set((state) => {
         return {
           syncState: {
-            ...state.syncState,
-            enabled
+            ...state.syncState || {},
+            pendingChanges: queue
           }
         };
       });
       syncOnce();
     }
-    document.addEventListener("visibilitychange", async () => {
+    function setAndSync(partial) {
+      if (typeof partial === "function") {
+        set((state) => ({ ...partial(state) }));
+      } else {
+        set(partial);
+      }
+      syncOnce();
+    }
+    function enable(enabled) {
+      set((state) => ({
+        syncState: {
+          ...state.syncState || {},
+          enabled
+        }
+      }));
+      enableSyncTimer(enabled);
+      addVisibilityChangeListener(enabled);
+    }
+    function enableSyncTimer(enabled) {
       clearInterval(syncIntervalId);
+      syncIntervalId = void 0;
+      if (enabled) {
+        syncIntervalId = setInterval(syncOnce, syncInterval);
+        syncOnce();
+      }
+    }
+    function addVisibilityChangeListener(add) {
+      if (add) {
+        document.addEventListener("visibilitychange", onVisibilityChange);
+      } else {
+        document.removeEventListener("visibilitychange", onVisibilityChange);
+      }
+    }
+    function onVisibilityChange() {
       if (document.visibilityState === "visible") {
-        logger.debug("[persistWithSync] Sync starting now app is in foreground");
-        await startSync?.();
+        logger.debug("[persistWithSync] Sync started now app is in foreground");
+        enableSyncTimer(true);
       } else {
         logger.debug("[persistWithSync] Sync paused now app is in background");
+        enableSyncTimer(false);
       }
-    });
+    }
     async function startFirstLoad() {
       let syncError;
       for (const stateKey of Object.keys(syncApi)) {
@@ -341,7 +272,7 @@ function persistWithSync(stateCreator, persistOptions, syncApi, syncOptions = {}
             set((state) => {
               const local = state[stateKey] || [];
               const localById = new Map(local.filter((l) => l.id).map((l) => [l.id, l]));
-              let newest = new Date(state._lastPulled?.[stateKey] || 0);
+              let newest = new Date(state.syncState.lastPulled[stateKey] || 0);
               const next = [...local];
               for (const remote of batch) {
                 const remoteUpdated = new Date(remote.updated_at || 0);
@@ -349,19 +280,30 @@ function persistWithSync(stateCreator, persistOptions, syncApi, syncOptions = {}
                 if (remote.deleted) continue;
                 const localItem = remote.id ? localById.get(remote.id) : void 0;
                 if (localItem) {
-                  const merged = { ...localItem, ...remote, _localId: localItem._localId };
+                  const merged = {
+                    ...localItem,
+                    ...remote,
+                    _localId: localItem._localId
+                  };
                   const idx = next.findIndex((i) => i._localId === localItem._localId);
                   if (idx >= 0) next[idx] = merged;
                 } else {
-                  next.push({ ...remote, _localId: nextLocalId() });
+                  next.push({
+                    ...remote,
+                    _localId: nextLocalId()
+                  });
                 }
               }
-              state[stateKey] = next;
-              state._lastPulled = {
-                ...state._lastPulled || {},
-                [stateKey]: newest.toISOString()
+              return {
+                [stateKey]: next,
+                syncState: {
+                  ...state.syncState || {},
+                  lastPulled: {
+                    ...state.syncState.lastPulled || {},
+                    [stateKey]: newest.toISOString()
+                  }
+                }
               };
-              return state;
             });
             lastId = batch[batch.length - 1].id;
           }
@@ -371,204 +313,209 @@ function persistWithSync(stateCreator, persistOptions, syncApi, syncOptions = {}
           logger.error(`[persistWithSync] First load pull error for stateKey: ${stateKey}`, err);
         }
       }
-      set((state) => {
-        return {
-          syncState: { ...state.syncState, firstLoadDone: true },
-          syncError
-        };
-      });
+      set((state) => ({
+        syncState: {
+          ...state.syncState || {},
+          firstLoadDone: true,
+          error: syncError
+        }
+      }));
     }
+    storeApi.sync = {
+      enable,
+      startFirstLoad
+    };
     const userState = stateCreator(setAndSync, get, queueToSync);
-    const syncState = userState.syncState || {};
     return {
       ...userState,
       syncState: {
-        status: syncState.status ?? "hydrating",
-        error: syncState.error,
-        enabled: syncState.enabled ?? false,
-        firstLoadDone: syncState.firstLoadDone ?? false,
-        enableSync,
-        startFirstLoad
-      },
-      _pendingChanges: userState._pendingChanges ?? [],
-      _lastPulled: userState._lastPulled ?? {}
+        // set defaults
+        status: "hydrating",
+        error: void 0,
+        enabled: false,
+        firstLoadDone: false,
+        pendingChanges: [],
+        lastPulled: {}
+      }
     };
   };
   return persist(creator, wrappedPersistOptions);
 }
+function createStoreWithSync(stateCreator, persistOptions, syncApi, syncOptions = {}) {
+  return create(persistWithSync(stateCreator, persistOptions, syncApi, syncOptions));
+}
 function orderFor(a) {
   switch (a) {
-    case "create" /* Create */:
+    case "createOrUpdate" /* CreateOrUpdate */:
       return 1;
-    case "update" /* Update */:
-      return 2;
     case "remove" /* Remove */:
-      return 3;
+      return 2;
   }
 }
 async function pull(set, get, stateKey, api, logger) {
-  const lastPulled = get()._lastPulled || {};
+  const lastPulled = get().syncState.lastPulled || {};
   const lastPulledAt = new Date(lastPulled[stateKey] || /* @__PURE__ */ new Date(0));
   logger.debug(`[persistWithSync] pull:start stateKey=${stateKey} since=${lastPulledAt.toISOString()}`);
   const serverData = await api.list(lastPulledAt);
   if (!serverData?.length) return;
   let newest = lastPulledAt;
   set((state) => {
-    const _pendingChanges = state._pendingChanges || [];
-    const local = state[stateKey] || [];
-    const localById = new Map(local.filter((l) => l.id).map((l) => [l.id, l]));
-    const pendingRemovals = new Set(
-      _pendingChanges.filter(
-        (p) => p.stateKey === stateKey && p.action === "remove" /* Remove */ && p.changes && typeof p.changes.id !== "undefined"
-      ).map((p) => p.changes.id)
-    );
+    const pendingChanges = state.syncState.pendingChanges || [];
+    const localItems = state[stateKey] || [];
+    let nextItems = [...localItems];
+    const localById = new Map(localItems.filter((l) => l.id).map((l) => [l.id, l]));
+    const pendingRemovalIds = /* @__PURE__ */ new Set();
+    for (const change of pendingChanges) {
+      if (change.stateKey === stateKey && change.action === "remove" /* Remove */) {
+        const item = localItems.find((i) => i._localId === change.localId);
+        if (item && item.id) pendingRemovalIds.add(item.id);
+      }
+    }
     for (const remote of serverData) {
       const remoteUpdated = new Date(remote.updated_at);
       if (remoteUpdated > newest) newest = remoteUpdated;
       const localItem = localById.get(remote.id);
-      if (pendingRemovals.has(remote.id)) {
+      if (pendingRemovalIds.has(remote.id)) {
         logger.debug(`[persistWithSync] pull:skip-pending-remove stateKey=${stateKey} id=${remote.id}`);
         continue;
       }
       if (remote.deleted) {
         if (localItem) {
-          state[stateKey] = state[stateKey].filter((i) => i.id !== remote.id);
+          nextItems = nextItems.filter((i) => i.id !== remote.id);
           logger.debug(`[persistWithSync] pull:remove stateKey=${stateKey} id=${remote.id}`);
         }
         continue;
       }
-      const pending = _pendingChanges.some(
-        (p) => p.stateKey === stateKey && localItem && p.localId === localItem._localId
-      );
+      const pending = localItem && pendingChanges.some((p) => p.stateKey === stateKey && p.localId === localItem._localId);
       if (localItem && !pending) {
-        const merged = { ...localItem, ...remote, _localId: localItem._localId };
-        state[stateKey] = state[stateKey].map((i) => i._localId === localItem._localId ? merged : i);
+        const merged = {
+          ...localItem,
+          ...remote,
+          _localId: localItem._localId
+        };
+        nextItems = nextItems.map((i) => i._localId === localItem._localId ? merged : i);
         logger.debug(`[persistWithSync] pull:merge stateKey=${stateKey} id=${remote.id}`);
       } else if (!localItem) {
-        state[stateKey] = [...state[stateKey], { ...remote, _localId: nextLocalId() }];
+        nextItems = [...nextItems, { ...remote, _localId: nextLocalId() }];
         logger.debug(`[persistWithSync] pull:add stateKey=${stateKey} id=${remote.id}`);
       }
     }
-    state._lastPulled = {
-      ...state._lastPulled,
-      [stateKey]: newest.toISOString()
+    return {
+      [stateKey]: nextItems,
+      syncState: {
+        ...state.syncState || {},
+        lastPulled: {
+          ...state.syncState.lastPulled || {},
+          [stateKey]: newest.toISOString()
+        }
+      }
     };
-    return state;
   });
 }
 async function pushOne(set, get, change, api, logger, queueToSync, missingStrategy, onMissingRemoteRecordDuringUpdate, onAfterRemoteAdd) {
-  logger.debug(
-    `[persistWithSync] push:attempt action=${change.action} stateKey=${change.stateKey} localId=${change.localId}`
-  );
-  const { stateKey, localId, action, changes } = change;
-  const state = get();
-  const items = state[stateKey] || [];
-  const item = items.find((i) => i._localId === localId);
+  logger.debug(`[persistWithSync] push:attempt action=${change.action} stateKey=${change.stateKey} localId=${change.localId}`);
+  const { action, stateKey, localId, id, version } = change;
   switch (action) {
-    case "create" /* Create */: {
+    case "remove" /* Remove */:
+      await api.remove(id);
+      logger.debug(`[persistWithSync] push:remove:success ${stateKey} ${localId} ${id}`);
+      removeFromPendingChanges(set, localId, stateKey);
+      break;
+    case "createOrUpdate" /* CreateOrUpdate */:
+      const state = get();
+      const items = state[stateKey] || [];
+      const item = items.find((i) => i._localId === localId);
       if (!item) {
+        logger.warn(`[persistWithSync] push:${action}:no-local-item`, {
+          stateKey,
+          localId
+        });
         removeFromPendingChanges(set, localId, stateKey);
         return;
       }
+      let omittedItem = omitSyncFields(item);
       if (item.id) {
-        if (changes && Object.keys(changes).length) {
-          await api.update(item.id, omitSyncFields({ ...item, ...changes }));
+        const changed = await api.update(item.id, omittedItem);
+        if (changed) {
+          logger.debug("[persistWithSync] push:update:success", {
+            stateKey,
+            localId,
+            id: item.id
+          });
+          if (samePendingVersion(get, stateKey, localId, version)) {
+            removeFromPendingChanges(set, localId, stateKey);
+          }
+          return;
+        } else {
+          logger.warn("[persistWithSync] push:update:missingRemote", {
+            stateKey,
+            localId,
+            id: item.id
+          });
+          switch (missingStrategy) {
+            case "deleteLocalRecord":
+              set((s) => ({
+                [stateKey]: (s[stateKey] || []).filter((i) => i._localId !== localId)
+              }));
+              break;
+            case "insertNewRemoteRecord": {
+              omittedItem._localId = nextLocalId();
+              omittedItem.updated_at = (/* @__PURE__ */ new Date()).toISOString();
+              set((s) => ({
+                [stateKey]: (s[stateKey] || []).map((i) => i._localId === localId ? omittedItem : i)
+              }));
+              queueToSync("createOrUpdate" /* CreateOrUpdate */, stateKey, omittedItem._localId);
+              break;
+            }
+          }
+          removeFromPendingChanges(set, localId, stateKey);
+          onMissingRemoteRecordDuringUpdate?.(missingStrategy, omittedItem, omittedItem._localId);
         }
-        removeFromPendingChanges(set, localId, stateKey);
         return;
       }
-      const payload = changes ? { ...item, ...changes } : item;
-      const result = await api.add(omitSyncFields(payload));
+      const result = await api.add(omittedItem);
       if (result) {
-        logger.debug("[persistWithSync] push:create:success", { stateKey, localId, id: result.id });
-        set((s) => {
-          s[stateKey] = (s[stateKey] || []).map(
-            (i) => i._localId === localId ? { ...i, ...result } : i
-          );
-          return s;
+        logger.debug("[persistWithSync] push:create:success", {
+          stateKey,
+          localId,
+          id: result.id
+        });
+        set((s) => ({
+          [stateKey]: (s[stateKey] || []).map((i) => i._localId === localId ? { ...i, ...result } : i)
+        }));
+        if (samePendingVersion(get, stateKey, localId, version)) {
+          removeFromPendingChanges(set, localId, stateKey);
+        }
+        onAfterRemoteAdd?.(set, get, queueToSync, stateKey, {
+          ...item,
+          ...result
         });
-        onAfterRemoteAdd?.(set, get, queueToSync, stateKey, { ...item, ...result });
       } else {
-        logger.warn("[persistWithSync] push:create:no-result", { stateKey, localId });
-      }
-      removeFromPendingChanges(set, localId, stateKey);
-      break;
-    }
-    case "update" /* Update */: {
-      if (!item) {
-        removeFromPendingChanges(set, localId, stateKey);
-        return;
-      }
-      if (!item.id) {
-        set((s) => {
-          const q = s._pendingChanges || [];
-          const e = q.find((p) => p.localId === localId && p.stateKey === stateKey);
-          if (e) e.action = "create" /* Create */;
-          return s;
+        logger.warn("[persistWithSync] push:create:no-result", {
+          stateKey,
+          localId
         });
-        return;
-      }
-      const changed = await api.update(item.id, omitSyncFields({ ...changes }));
-      if (!changed) {
-        logger.warn("[persistWithSync] push:update:missingRemote", { stateKey, localId, id: item.id });
-        const oldRecord = { ...item };
-        let newLocalId;
-        switch (missingStrategy) {
-          case "deleteLocalRecord":
-            set((s) => {
-              s[stateKey] = (s[stateKey] || []).filter((i) => i._localId !== localId);
-              return s;
-            });
-            removeFromPendingChanges(set, localId, stateKey);
-            break;
-          case "insertNewRemoteRecord": {
-            const freshLocalId = nextLocalId();
-            newLocalId = freshLocalId;
-            set((s) => {
-              s[stateKey] = (s[stateKey] || []).filter((i) => i._localId !== localId);
-              s[stateKey].push({
-                ...omitSyncFields(oldRecord),
-                _localId: freshLocalId,
-                updated_at: (/* @__PURE__ */ new Date()).toISOString()
-              });
-              const q = s._pendingChanges || [];
-              const e = q.find((p) => p.localId === localId && p.stateKey === stateKey);
-              if (e) {
-                e.localId = freshLocalId;
-                e.action = "create" /* Create */;
-              } else {
-                q.push({ stateKey, localId: freshLocalId, action: "create" /* Create */, changes });
-              }
-              s._pendingChanges = q;
-              return s;
-            });
-            break;
-          }
+        if (samePendingVersion(get, stateKey, localId, version)) {
+          removeFromPendingChanges(set, localId, stateKey);
         }
-        onMissingRemoteRecordDuringUpdate?.(missingStrategy, oldRecord, newLocalId);
-      } else {
-        logger.debug("[persistWithSync] push:update:success", { stateKey, localId, id: item.id });
-        removeFromPendingChanges(set, localId, stateKey);
-      }
-      break;
-    }
-    case "remove" /* Remove */: {
-      const id = changes?.id;
-      if (id) {
-        await api.remove(id);
-        logger.debug("[persistWithSync] push:remove:success", { stateKey, localId, id });
       }
-      removeFromPendingChanges(set, localId, stateKey);
       break;
-    }
   }
 }
+function samePendingVersion(get, stateKey, localId, version) {
+  const q = get().syncState.pendingChanges || [];
+  const curChange = q.find((p) => p.localId === localId && p.stateKey === stateKey);
+  return curChange?.version === version;
+}
 function removeFromPendingChanges(set, localId, stateKey) {
   set((s) => {
-    s._pendingChanges = (s._pendingChanges || []).filter(
-      (p) => !(p.localId === localId && p.stateKey === stateKey)
-    );
-    return s;
+    const queue = (s.syncState.pendingChanges || []).filter((p) => !(p.localId === localId && p.stateKey === stateKey));
+    return {
+      syncState: {
+        ...s.syncState || {},
+        pendingChanges: queue
+      }
+    };
   });
 }
 function omitSyncFields(item) {
@@ -580,7 +527,13 @@ function nextLocalId() {
   return crypto.randomUUID();
 }
 function newLogger(logger, min) {
-  const order = { debug: 10, info: 20, warn: 30, error: 40, none: 100 };
+  const order = {
+    debug: 10,
+    info: 20,
+    warn: 30,
+    error: 40,
+    none: 100
+  };
   const threshold = order[min];
   const enabled = (lvl) => order[lvl] >= threshold;
   return {
@@ -600,6 +553,7 @@ function findApi(stateKey, syncApi) {
 export {
   SyncAction,
   createIndexedDBStorage,
+  createStoreWithSync,
   nextLocalId,
   persistWithSync
 };