@korajs/react 0.5.0 → 0.6.1

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/context/kora-context.ts
-import { createContext, createElement, useContext, useEffect, useState } from "react";
+import { QueryStoreCache } from "@korajs/store";
+import { createContext, createElement, useContext, useEffect, useMemo, useRef, useState } from "react";
 var KoraContext = createContext(null);
 function KoraProvider({
   app,
@@ -12,6 +13,10 @@ function KoraProvider({
   const [resolvedSync, setResolvedSync] = useState(syncEngine ?? null);
   const [ready, setReady] = useState(!app);
   const [initError, setInitError] = useState(null);
+  const fallbackQueryStoreCache = useRef(null);
+  if (!fallbackQueryStoreCache.current) {
+    fallbackQueryStoreCache.current = new QueryStoreCache();
+  }
   useEffect(() => {
     if (!app) return;
     let cancelled = false;
@@ -30,6 +35,26 @@ function KoraProvider({
       cancelled = true;
     };
   }, [app]);
+  useEffect(() => {
+    return () => {
+      if (!app) {
+        fallbackQueryStoreCache.current?.clear();
+      }
+    };
+  }, [app]);
+  const contextValue = useMemo(() => {
+    if (!resolvedStore) {
+      return null;
+    }
+    return {
+      store: resolvedStore,
+      syncEngine: resolvedSync,
+      app: app ?? null,
+      events: app?.events ?? null,
+      subscribeSyncStatus: app?.sync?.subscribeStatus ?? null,
+      queryStoreCache: app && typeof app.getQueryStoreCache === "function" ? app.getQueryStoreCache() : fallbackQueryStoreCache.current
+    };
+  }, [resolvedStore, resolvedSync, app]);
   if (initError) {
     return createElement(
       "div",
@@ -41,19 +66,12 @@ function KoraProvider({
   if (!ready) {
     return fallback ?? null;
   }
-  if (!resolvedStore) {
+  if (!contextValue) {
     throw new Error(
       'KoraProvider requires either an "app" or "store" prop. Pass a KoraApp from createApp() or a Store instance.'
     );
   }
-  const value = {
-    store: resolvedStore,
-    syncEngine: resolvedSync,
-    app: app ?? null,
-    events: app?.events ?? null,
-    subscribeSyncStatus: app?.sync?.subscribeStatus ?? null
-  };
-  return createElement(KoraContext.Provider, { value }, children);
+  return createElement(KoraContext.Provider, { value: contextValue }, children);
 }
 function useKoraContext() {
   const context = useContext(KoraContext);
@@ -77,126 +95,35 @@ function useApp() {
 }
 
 // src/hooks/use-query.ts
-import { useMemo, useRef, useSyncExternalStore } from "react";
-
-// src/query-store/query-store.ts
+import { assertQueryReady } from "@korajs/store";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2, useSyncExternalStore } from "react";
 var EMPTY_ARRAY = Object.freeze([]);
-var QueryStore = class {
-  snapshot = EMPTY_ARRAY;
-  listeners = /* @__PURE__ */ new Set();
-  unsubscribeQuery = null;
-  active = false;
-  queryBuilder;
-  constructor(queryBuilder) {
-    this.queryBuilder = queryBuilder;
-  }
-  /**
-   * Subscribe to snapshot changes. Compatible with useSyncExternalStore.
-   *
-   * Lazily starts the underlying query subscription when the first listener
-   * attaches, and stops it when the last listener detaches. This allows
-   * React StrictMode to unmount/remount without permanently killing the subscription.
-   *
-   * @returns Unsubscribe function
-   */
-  subscribe = (onStoreChange) => {
-    this.listeners.add(onStoreChange);
-    if (!this.active) {
-      this.startSubscription();
-    }
-    return () => {
-      this.listeners.delete(onStoreChange);
-      if (this.listeners.size === 0) {
-        this.stopSubscription();
-      }
-    };
-  };
-  /**
-   * Get the current snapshot synchronously. Compatible with useSyncExternalStore.
-   * Returns EMPTY_ARRAY before the first async fetch completes.
-   */
-  getSnapshot = () => {
-    return this.snapshot;
-  };
-  /**
-   * Clean up the underlying subscription and release resources.
-   * Called by useMemo when the query descriptor changes.
-   */
-  destroy() {
-    this.stopSubscription();
-    this.listeners.clear();
-    this.snapshot = EMPTY_ARRAY;
-  }
-  startSubscription() {
-    this.active = true;
-    this.unsubscribeQuery = this.queryBuilder.subscribe((results) => {
-      if (!this.active) return;
-      const newSnapshot = Object.freeze([...results]);
-      this.snapshot = newSnapshot;
-      this.notifyListeners();
-    });
-  }
-  stopSubscription() {
-    this.active = false;
-    if (this.unsubscribeQuery) {
-      this.unsubscribeQuery();
-      this.unsubscribeQuery = null;
-    }
-  }
-  notifyListeners() {
-    for (const listener of this.listeners) {
-      listener();
-    }
-  }
-};
-
-// src/hooks/use-query.ts
-var APP_NOT_READY_CODE = "APP_NOT_READY";
-function assertQueryReady(query) {
-  const descriptor = query.getDescriptor();
-  if (descriptor.collection === "__pending__") {
-    const err = new Error(
-      "Cannot use useQuery() before app.ready. Await app.ready or wrap your UI in <KoraProvider app={app}>."
-    );
-    err.name = "AppNotReadyError";
-    Object.assign(err, { code: APP_NOT_READY_CODE });
-    throw err;
-  }
-}
-var EMPTY_ARRAY2 = Object.freeze([]);
 var noopSubscribe = (_onStoreChange) => {
   return () => {
   };
 };
 function useQuery(query, options) {
+  const { queryStoreCache } = useKoraContext();
   const enabled = options?.enabled !== false;
-  if (enabled) {
-    assertQueryReady(query);
-  }
   const descriptorKey = JSON.stringify(query.getDescriptor());
-  const queryStoreRef = useRef(null);
-  const prevKeyRef = useRef(null);
-  const queryStore = useMemo(() => {
+  const queryRef = useRef2(query);
+  queryRef.current = query;
+  const [queryStore, setQueryStore] = useState2(null);
+  useEffect2(() => {
     if (!enabled) {
-      if (queryStoreRef.current) {
-        queryStoreRef.current.destroy();
-        queryStoreRef.current = null;
-      }
-      prevKeyRef.current = null;
-      return null;
-    }
-    if (prevKeyRef.current !== descriptorKey) {
-      if (queryStoreRef.current) {
-        queryStoreRef.current.destroy();
-      }
-      const newStore = new QueryStore(query);
-      queryStoreRef.current = newStore;
-      prevKeyRef.current = descriptorKey;
-      return newStore;
+      setQueryStore(null);
+      return;
     }
-    return queryStoreRef.current;
-  }, [descriptorKey, enabled, query]);
-  const disabledGetSnapshot = () => EMPTY_ARRAY2;
+    const currentQuery = queryRef.current;
+    assertQueryReady(currentQuery);
+    const store = queryStoreCache.getOrCreate(currentQuery);
+    setQueryStore(store);
+    return () => {
+      queryStoreCache.release(currentQuery);
+      setQueryStore(null);
+    };
+  }, [descriptorKey, enabled, queryStoreCache]);
+  const disabledGetSnapshot = () => EMPTY_ARRAY;
   return useSyncExternalStore(
     queryStore ? queryStore.subscribe : noopSubscribe,
     queryStore ? queryStore.getSnapshot : disabledGetSnapshot
@@ -204,144 +131,85 @@ function useQuery(query, options) {
 }
 
 // src/hooks/use-mutation.ts
-import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
-function useMutation(mutationFn, options) {
-  const [state, setState] = useState2({
-    isLoading: false,
-    error: null
-  });
-  const mountedRef = useRef2(true);
-  useEffect2(() => {
-    mountedRef.current = true;
+import { createMutationController } from "@korajs/core/bindings";
+import { useRef as useRef4, useSyncExternalStore as useSyncExternalStore2 } from "react";
+
+// src/hooks/use-controller.ts
+import { useEffect as useEffect3, useReducer, useRef as useRef3 } from "react";
+function useController(create, destroy, deps) {
+  const controllerRef = useRef3(null);
+  const createRef = useRef3(create);
+  createRef.current = create;
+  const [, forceRender] = useReducer((count) => count + 1, 0);
+  const getController = useRef3(() => {
+    if (controllerRef.current === null) {
+      controllerRef.current = createRef.current();
+    }
+    return controllerRef.current;
+  }).current;
+  useEffect3(() => {
+    if (controllerRef.current === null) {
+      controllerRef.current = createRef.current();
+      forceRender();
+    }
     return () => {
-      mountedRef.current = false;
+      const controller = controllerRef.current;
+      controllerRef.current = null;
+      if (controller !== null) {
+        destroy(controller);
+      }
     };
-  }, []);
-  const fnRef = useRef2(mutationFn);
+  }, deps);
+  return getController;
+}
+
+// src/hooks/use-mutation.ts
+function useMutation(mutationFn, options) {
+  const fnRef = useRef4(mutationFn);
   fnRef.current = mutationFn;
-  const optionsRef = useRef2(options);
+  const optionsRef = useRef4(options);
   optionsRef.current = options;
-  const mutateAsync = useCallback(async (...args) => {
-    const opts = optionsRef.current;
-    let context;
-    if (mountedRef.current) {
-      setState({ isLoading: true, error: null });
-    }
-    try {
-      if (opts?.onMutate) {
-        context = await opts.onMutate(...args);
-      }
-      const result = await fnRef.current(...args);
-      if (mountedRef.current) {
-        setState({ isLoading: false, error: null });
-      }
-      opts?.onSuccess?.(result, ...args);
-      opts?.onSettled?.(result, null, ...args);
-      return result;
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error(String(err));
-      if (context !== void 0 && opts?.onRollback) {
-        await opts.onRollback(context, ...args);
-      }
-      if (mountedRef.current) {
-        setState({ isLoading: false, error });
-      }
-      opts?.onError?.(error, ...args);
-      opts?.onSettled?.(void 0, error, ...args);
-      throw error;
-    }
-  }, []);
-  const mutate = useCallback(
-    (...args) => {
-      mutateAsync(...args).catch(() => {
-      });
-    },
-    [mutateAsync]
+  const getController = useController(
+    () => createMutationController({
+      mutationFn: (...args) => fnRef.current(...args),
+      resolveOptions: () => optionsRef.current
+    }),
+    (controller) => controller.destroy(),
+    []
+  );
+  const state = useSyncExternalStore2(
+    (onStoreChange) => getController().subscribe(onStoreChange),
+    () => getController().getSnapshot(),
+    () => getController().getSnapshot()
   );
-  const reset = useCallback(() => {
-    if (mountedRef.current) {
-      setState({ isLoading: false, error: null });
-    }
-  }, []);
   return {
-    mutate,
-    mutateAsync,
+    mutate: (...args) => getController().mutate(...args),
+    mutateAsync: (...args) => getController().mutateAsync(...args),
     isLoading: state.isLoading,
     error: state.error,
-    reset
+    reset: () => getController().reset()
   };
 }
 
 // src/hooks/use-sync-status.ts
-import { useCallback as useCallback2, useRef as useRef3, useSyncExternalStore as useSyncExternalStore2 } from "react";
-var OFFLINE_STATUS = Object.freeze({
-  status: "offline",
-  pendingOperations: 0,
-  lastSyncedAt: null,
-  lastSuccessfulPush: null,
-  lastSuccessfulPull: null,
-  conflicts: 0
-});
-var SYNC_STATUS_EVENT_TYPES = [
-  "sync:connected",
-  "sync:disconnected",
-  "sync:schema-mismatch",
-  "sync:auth-failed",
-  "sync:sent",
-  "sync:received",
-  "sync:acknowledged",
-  "sync:apply-failed",
-  "sync:diagnostics",
-  "sync:initial-sync-progress"
-];
+import { createSyncStatusController } from "@korajs/sync";
+import { useSyncExternalStore as useSyncExternalStore3 } from "react";
 function useSyncStatus() {
   const { syncEngine, subscribeSyncStatus, events } = useKoraContext();
-  const snapshotRef = useRef3(OFFLINE_STATUS);
-  const serializedRef = useRef3(JSON.stringify(OFFLINE_STATUS));
-  const subscribe = useCallback2(
-    (onStoreChange) => {
-      if (subscribeSyncStatus) {
-        return subscribeSyncStatus((status) => {
-          snapshotRef.current = status;
-          serializedRef.current = JSON.stringify(status);
-          onStoreChange();
-        });
-      }
-      if (!syncEngine) {
-        return () => {
-        };
-      }
-      const refresh = () => {
-        const newStatus = syncEngine.getStatus();
-        const newSerialized = JSON.stringify(newStatus);
-        if (newSerialized !== serializedRef.current) {
-          snapshotRef.current = newStatus;
-          serializedRef.current = newSerialized;
-          onStoreChange();
-        }
-      };
-      if (events) {
-        const unsubs = SYNC_STATUS_EVENT_TYPES.map((type) => events.on(type, refresh));
-        refresh();
-        return () => {
-          for (const unsub of unsubs) {
-            unsub();
-          }
-        };
-      }
-      refresh();
-      return () => {
-      };
-    },
+  const getController = useController(
+    () => createSyncStatusController({
+      syncEngine,
+      subscribeSyncStatus,
+      events: subscribeSyncStatus ? null : events
+    }),
+    (controller) => controller.destroy(),
     [syncEngine, subscribeSyncStatus, events]
   );
-  const getSnapshot = useCallback2(() => {
-    if (subscribeSyncStatus) {
-      return snapshotRef.current;
-    }
-    return syncEngine ? syncEngine.getStatus() : OFFLINE_STATUS;
-  }, [syncEngine, subscribeSyncStatus]);
-  return useSyncExternalStore2(subscribe, getSnapshot);
+  return useSyncExternalStore3(
+    (onStoreChange) => getController().subscribe(onStoreChange),
+    () => getController().getSnapshot(),
+    () => getController().getSnapshot()
+  );
 }
 
 // src/hooks/use-collection.ts
@@ -354,303 +222,118 @@ function useCollection(name) {
 }
 
 // src/hooks/use-rich-text.ts
-import { encodeRichtext } from "@korajs/store";
-import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
-import * as Y from "yjs";
-var LOAD_ORIGIN = "kora-load";
-var REMOTE_ORIGIN = "kora-remote";
-var DOC_CHANNEL_ORIGIN = "kora-doc-channel";
-var TEXT_KEY = "content";
-var COMPACT_AFTER_DELTAS = 20;
-var PERSIST_DEBOUNCE_MS = 400;
+import { asRichTextSyncEngine, createRichTextController } from "@korajs/store";
+import { useCallback, useEffect as useEffect4, useMemo as useMemo3, useSyncExternalStore as useSyncExternalStore4 } from "react";
 function useRichText(collectionName, recordId, fieldName, options) {
   const { store, syncEngine } = useKoraContext();
-  const collection = useMemo3(
-    () => store.collection(collectionName),
-    [store, collectionName]
+  const collection = useMemo3(() => store.collection(collectionName), [store, collectionName]);
+  const getController = useController(
+    () => createRichTextController({
+      collection,
+      collectionName,
+      recordId,
+      fieldName,
+      store,
+      syncEngine: asRichTextSyncEngine(syncEngine),
+      useDocChannel: options?.useDocChannel,
+      user: options?.user
+    }),
+    (controller) => controller.destroy(),
+    [collection, collectionName, fieldName, options?.useDocChannel, recordId, store, syncEngine]
   );
-  const [doc] = useState3(() => new Y.Doc());
-  const [ready, setReady] = useState3(false);
-  const [error, setError] = useState3(null);
-  const [canUndo, setCanUndo] = useState3(false);
-  const [canRedo, setCanRedo] = useState3(false);
-  const [cursors, setCursors] = useState3([]);
-  const baseUpdateRef = useRef4(null);
-  const pendingDeltasRef = useRef4([]);
-  const docChannelActiveRef = useRef4(false);
-  const persistTimerRef = useRef4(null);
-  const userRef = useRef4(options?.user);
-  useEffect3(() => {
-    userRef.current = options?.user;
-  }, [options?.user]);
-  const text = useMemo3(() => doc.getText(TEXT_KEY), [doc]);
-  const undoManager = useMemo3(() => new Y.UndoManager(text), [text]);
-  const syncHistoryState = useCallback3(() => {
-    setCanUndo(undoManager.undoStack.length > 0);
-    setCanRedo(undoManager.redoStack.length > 0);
-  }, [undoManager]);
-  const undo = useCallback3(() => {
-    undoManager.undo();
-    syncHistoryState();
-  }, [syncHistoryState, undoManager]);
-  const redo = useCallback3(() => {
-    undoManager.redo();
-    syncHistoryState();
-  }, [syncHistoryState, undoManager]);
-  const resolveAwarenessUser = useCallback3(() => {
-    if (userRef.current) {
-      return userRef.current;
-    }
-    if (syncEngine) {
-      const existing = syncEngine.getAwarenessManager().getLocalState()?.user;
-      if (existing) {
-        return existing;
-      }
-    }
-    return {
-      name: "Anonymous",
-      color: "#6366f1"
-    };
-  }, [syncEngine]);
-  const setCursor = useCallback3(
-    (anchor, head) => {
-      if (!syncEngine) {
-        return;
-      }
-      const awareness = syncEngine.getAwarenessManager();
-      const state = {
-        user: resolveAwarenessUser(),
-        cursor: {
-          collection: collectionName,
-          recordId,
-          field: fieldName,
-          anchor,
-          head
-        }
-      };
-      awareness.setLocalState(state);
-    },
-    [collectionName, fieldName, recordId, resolveAwarenessUser, syncEngine]
+  useEffect4(() => {
+    getController().setUser(options?.user);
+  }, [getController, options?.user]);
+  const snapshot = useSyncExternalStore4(
+    (onStoreChange) => getController().subscribe(onStoreChange),
+    () => getController().getSnapshot(),
+    () => getController().getSnapshot()
   );
-  const clearCursor = useCallback3(() => {
-    if (!syncEngine) {
-      return;
-    }
-    const awareness = syncEngine.getAwarenessManager();
-    const current = awareness.getLocalState();
-    if (!current?.cursor) {
-      return;
-    }
-    if (current.cursor.collection !== collectionName || current.cursor.recordId !== recordId || current.cursor.field !== fieldName) {
-      return;
-    }
-    awareness.setLocalState({ user: current.user });
-  }, [collectionName, fieldName, recordId, syncEngine]);
-  const applyRemoteSnapshot = useCallback3(
-    (value) => {
-      const encoded = encodeRichtextInput(value);
-      if (!encoded) {
-        return;
-      }
-      const currentSnapshot = Y.encodeStateAsUpdate(doc);
-      if (updatesEqual(currentSnapshot, encoded)) {
-        return;
-      }
-      Y.applyUpdate(doc, encoded, REMOTE_ORIGIN);
-      baseUpdateRef.current = encoded;
-      pendingDeltasRef.current = [];
-      syncHistoryState();
-    },
-    [doc, syncHistoryState]
+  const undo = useCallback(() => {
+    getController().undo();
+  }, [getController]);
+  const redo = useCallback(() => {
+    getController().redo();
+  }, [getController]);
+  const setCursor = useCallback(
+    (anchor, head) => getController().setCursor(anchor, head),
+    [getController]
   );
-  useEffect3(() => {
-    let disposed = false;
-    const initialize = async () => {
-      setReady(false);
-      setError(null);
-      try {
-        const record = await collection.findById(recordId);
-        if (disposed) return;
-        doc.transact(() => {
-          const target = doc.getText(TEXT_KEY);
-          target.delete(0, target.length);
-        }, LOAD_ORIGIN);
-        const encoded = encodeRichtextInput(record?.[fieldName]);
-        baseUpdateRef.current = encoded;
-        pendingDeltasRef.current = [];
-        if (encoded) {
-          Y.applyUpdate(doc, encoded, LOAD_ORIGIN);
-        }
-        const channel = syncEngine?.getRichtextDocChannel?.();
-        docChannelActiveRef.current = channel?.shouldUseChannel(encoded?.length ?? 0, options?.useDocChannel) ?? false;
-        setReady(true);
-      } catch (cause) {
-        if (disposed) return;
-        setError(cause instanceof Error ? cause : new Error(String(cause)));
-      }
-    };
-    const flushPersist = async () => {
-      const snapshot = composeRichtextSnapshot(baseUpdateRef.current, pendingDeltasRef.current);
-      if (pendingDeltasRef.current.length >= COMPACT_AFTER_DELTAS) {
-        baseUpdateRef.current = snapshot;
-        pendingDeltasRef.current = [];
-      }
-      try {
-        await collection.update(recordId, {
-          [fieldName]: snapshot
-        });
-      } catch (cause) {
-        if (!disposed) {
-          setError(cause instanceof Error ? cause : new Error(String(cause)));
-        }
-      }
-    };
-    const schedulePersist = () => {
-      if (persistTimerRef.current) {
-        clearTimeout(persistTimerRef.current);
-      }
-      persistTimerRef.current = setTimeout(() => {
-        persistTimerRef.current = null;
-        void flushPersist();
-      }, PERSIST_DEBOUNCE_MS);
-    };
-    const persist = (_update, origin) => {
-      syncHistoryState();
-      if (origin === LOAD_ORIGIN || origin === REMOTE_ORIGIN || origin === DOC_CHANNEL_ORIGIN) {
-        return;
-      }
-      pendingDeltasRef.current.push(_update);
-      if (docChannelActiveRef.current && syncEngine) {
-        syncEngine.getRichtextDocChannel().send(collectionName, recordId, fieldName, _update);
-        schedulePersist();
-        return;
-      }
-      void flushPersist();
-    };
-    doc.on("update", persist);
-    void initialize();
-    syncHistoryState();
-    return () => {
-      disposed = true;
-      if (persistTimerRef.current) {
-        clearTimeout(persistTimerRef.current);
-        persistTimerRef.current = null;
-      }
-      doc.off("update", persist);
-      undoManager.destroy();
-      baseUpdateRef.current = null;
-      pendingDeltasRef.current = [];
-      docChannelActiveRef.current = false;
-    };
-  }, [
-    collection,
-    collectionName,
-    doc,
-    fieldName,
-    options?.useDocChannel,
-    recordId,
-    syncEngine,
-    syncHistoryState,
-    undoManager
-  ]);
-  useEffect3(() => {
-    if (!ready || !syncEngine || !docChannelActiveRef.current) {
-      return;
-    }
-    const channel = syncEngine.getRichtextDocChannel();
-    return channel.subscribe(collectionName, recordId, fieldName, (update) => {
-      Y.applyUpdate(doc, update, DOC_CHANNEL_ORIGIN);
-      syncHistoryState();
-    });
-  }, [collectionName, doc, fieldName, ready, recordId, syncEngine, syncHistoryState]);
-  useEffect3(() => {
-    if (!ready) {
-      return;
-    }
-    const unsubscribe = store.collection(collectionName).where({ id: recordId }).subscribe((results) => {
-      const record = results[0];
-      if (!record) {
-        return;
-      }
-      applyRemoteSnapshot(record[fieldName]);
-    });
-    return unsubscribe;
-  }, [applyRemoteSnapshot, collectionName, fieldName, ready, recordId, store]);
-  useEffect3(() => {
-    if (!syncEngine) return;
+  const clearCursor = useCallback(() => getController().clearCursor(), [getController]);
+  return buildResult(getController(), snapshot, undo, redo, setCursor, clearCursor);
+}
+function buildResult(controller, snapshot, undo, redo, setCursor, clearCursor) {
+  return {
+    doc: controller.doc,
+    text: controller.text,
+    undo,
+    redo,
+    canUndo: snapshot.canUndo,
+    canRedo: snapshot.canRedo,
+    ready: snapshot.ready,
+    error: snapshot.error,
+    cursors: [...snapshot.cursors],
+    setCursor,
+    clearCursor
+  };
+}
+
+// src/hooks/use-presence.ts
+import { useEffect as useEffect5 } from "react";
+function usePresence(user) {
+  const { syncEngine } = useKoraContext();
+  const name = user?.name ?? null;
+  const color = user?.color ?? null;
+  const avatar = user?.avatar ?? null;
+  useEffect5(() => {
+    if (!syncEngine || !name || !color) return;
     const awareness = syncEngine.getAwarenessManager();
-    const localClientId = awareness.clientId;
-    const updateCursors = () => {
-      const states = awareness.getStates();
-      const fieldCursors = [];
-      for (const [clientId, state] of states) {
-        if (clientId === localClientId) continue;
-        if (!state.cursor) continue;
-        if (state.cursor.collection !== collectionName || state.cursor.recordId !== recordId || state.cursor.field !== fieldName) {
-          continue;
-        }
-        fieldCursors.push({
-          clientId,
-          userName: state.user.name,
-          color: state.user.color,
-          anchor: state.cursor.anchor,
-          head: state.cursor.head
-        });
-      }
-      setCursors(fieldCursors);
-    };
-    const unsubscribe = awareness.on("change", () => {
-      updateCursors();
+    awareness.setLocalState({
+      user: { name, color, avatar: avatar ?? void 0 }
     });
-    updateCursors();
     return () => {
-      unsubscribe();
-      clearCursor();
+      awareness.setLocalState(null);
     };
-  }, [clearCursor, collectionName, fieldName, recordId, syncEngine]);
-  return { doc, text, undo, redo, canUndo, canRedo, ready, error, cursors, setCursor, clearCursor };
-}
-function encodeRichtextInput(value) {
-  if (value === null || value === void 0) {
-    return null;
-  }
-  try {
-    return encodeRichtext(value);
-  } catch {
-    if (typeof value === "string") {
-      const fallbackDoc = new Y.Doc();
-      fallbackDoc.getText(TEXT_KEY).insert(0, value);
-      return Y.encodeStateAsUpdate(fallbackDoc);
-    }
-    throw new Error("Richtext record value must be a string, Uint8Array, ArrayBuffer, or null.");
-  }
+  }, [syncEngine, name, color, avatar]);
 }
-function composeRichtextSnapshot(base, deltas) {
-  const mergedDoc = new Y.Doc();
-  if (base) {
-    Y.applyUpdate(mergedDoc, base);
-  }
-  for (const delta of deltas) {
-    Y.applyUpdate(mergedDoc, delta);
-  }
-  return Y.encodeStateAsUpdate(mergedDoc);
-}
-function updatesEqual(left, right) {
-  if (left.length !== right.length) {
-    return false;
-  }
-  for (let index = 0; index < left.length; index++) {
-    if (left[index] !== right[index]) {
-      return false;
+
+// src/hooks/use-collaborators.ts
+import { subscribeRemoteAwarenessStates } from "@korajs/sync";
+import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef5, useSyncExternalStore as useSyncExternalStore5 } from "react";
+var EMPTY_ARRAY2 = [];
+function useCollaborators() {
+  const { syncEngine } = useKoraContext();
+  const snapshotRef = useRef5(EMPTY_ARRAY2);
+  const subscribe = useCallback2(
+    (onStoreChange) => {
+      if (!syncEngine) {
+        snapshotRef.current = EMPTY_ARRAY2;
+        return () => {
+        };
+      }
+      const awareness = syncEngine.getAwarenessManager();
+      return subscribeRemoteAwarenessStates(awareness, (states) => {
+        snapshotRef.current = states;
+        onStoreChange();
+      });
+    },
+    [syncEngine]
+  );
+  const getSnapshot = useCallback2(() => snapshotRef.current, []);
+  useEffect6(() => {
+    if (!syncEngine) {
+      snapshotRef.current = EMPTY_ARRAY2;
     }
-  }
-  return true;
+  }, [syncEngine]);
+  return useSyncExternalStore5(subscribe, getSnapshot);
 }
 export {
   KoraProvider,
   useApp,
+  useCollaborators,
   useCollection,
   useMutation,
+  usePresence,
   useQuery,
   useRichText,
   useSyncStatus