@korajs/react 0.5.0 → 0.6.1

package/dist/index.cjs

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -32,8 +22,10 @@ var index_exports = {};
 __export(index_exports, {
   KoraProvider: () => KoraProvider,
   useApp: () => useApp,
+  useCollaborators: () => useCollaborators,
   useCollection: () => useCollection,
   useMutation: () => useMutation,
+  usePresence: () => usePresence,
   useQuery: () => useQuery,
   useRichText: () => useRichText,
   useSyncStatus: () => useSyncStatus
@@ -41,6 +33,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/context/kora-context.ts
+var import_store = require("@korajs/store");
 var import_react = require("react");
 var KoraContext = (0, import_react.createContext)(null);
 function KoraProvider({
@@ -54,6 +47,10 @@ function KoraProvider({
   const [resolvedSync, setResolvedSync] = (0, import_react.useState)(syncEngine ?? null);
   const [ready, setReady] = (0, import_react.useState)(!app);
   const [initError, setInitError] = (0, import_react.useState)(null);
+  const fallbackQueryStoreCache = (0, import_react.useRef)(null);
+  if (!fallbackQueryStoreCache.current) {
+    fallbackQueryStoreCache.current = new import_store.QueryStoreCache();
+  }
   (0, import_react.useEffect)(() => {
     if (!app) return;
     let cancelled = false;
@@ -72,6 +69,26 @@ function KoraProvider({
       cancelled = true;
     };
   }, [app]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (!app) {
+        fallbackQueryStoreCache.current?.clear();
+      }
+    };
+  }, [app]);
+  const contextValue = (0, import_react.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 (0, import_react.createElement)(
       "div",
@@ -83,19 +100,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 (0, import_react.createElement)(KoraContext.Provider, { value }, children);
+  return (0, import_react.createElement)(KoraContext.Provider, { value: contextValue }, children);
 }
 function useKoraContext() {
   const context = (0, import_react.useContext)(KoraContext);
@@ -119,126 +129,35 @@ function useApp() {
 }
 
 // src/hooks/use-query.ts
+var import_store2 = require("@korajs/store");
 var import_react2 = require("react");
-
-// src/query-store/query-store.ts
 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 = (0, import_react2.useRef)(null);
-  const prevKeyRef = (0, import_react2.useRef)(null);
-  const queryStore = (0, import_react2.useMemo)(() => {
+  const queryRef = (0, import_react2.useRef)(query);
+  queryRef.current = query;
+  const [queryStore, setQueryStore] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
     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;
+    (0, import_store2.assertQueryReady)(currentQuery);
+    const store = queryStoreCache.getOrCreate(currentQuery);
+    setQueryStore(store);
+    return () => {
+      queryStoreCache.release(currentQuery);
+      setQueryStore(null);
+    };
+  }, [descriptorKey, enabled, queryStoreCache]);
+  const disabledGetSnapshot = () => EMPTY_ARRAY;
   return (0, import_react2.useSyncExternalStore)(
     queryStore ? queryStore.subscribe : noopSubscribe,
     queryStore ? queryStore.getSnapshot : disabledGetSnapshot
@@ -246,454 +165,210 @@ function useQuery(query, options) {
 }
 
 // src/hooks/use-mutation.ts
+var import_bindings = require("@korajs/core/bindings");
+var import_react4 = require("react");
+
+// src/hooks/use-controller.ts
 var import_react3 = require("react");
-function useMutation(mutationFn, options) {
-  const [state, setState] = (0, import_react3.useState)({
-    isLoading: false,
-    error: null
-  });
-  const mountedRef = (0, import_react3.useRef)(true);
+function useController(create, destroy, deps) {
+  const controllerRef = (0, import_react3.useRef)(null);
+  const createRef = (0, import_react3.useRef)(create);
+  createRef.current = create;
+  const [, forceRender] = (0, import_react3.useReducer)((count) => count + 1, 0);
+  const getController = (0, import_react3.useRef)(() => {
+    if (controllerRef.current === null) {
+      controllerRef.current = createRef.current();
+    }
+    return controllerRef.current;
+  }).current;
   (0, import_react3.useEffect)(() => {
-    mountedRef.current = true;
+    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 = (0, import_react3.useRef)(mutationFn);
+  }, deps);
+  return getController;
+}
+
+// src/hooks/use-mutation.ts
+function useMutation(mutationFn, options) {
+  const fnRef = (0, import_react4.useRef)(mutationFn);
   fnRef.current = mutationFn;
-  const optionsRef = (0, import_react3.useRef)(options);
+  const optionsRef = (0, import_react4.useRef)(options);
   optionsRef.current = options;
-  const mutateAsync = (0, import_react3.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 = (0, import_react3.useCallback)(
-    (...args) => {
-      mutateAsync(...args).catch(() => {
-      });
-    },
-    [mutateAsync]
+  const getController = useController(
+    () => (0, import_bindings.createMutationController)({
+      mutationFn: (...args) => fnRef.current(...args),
+      resolveOptions: () => optionsRef.current
+    }),
+    (controller) => controller.destroy(),
+    []
+  );
+  const state = (0, import_react4.useSyncExternalStore)(
+    (onStoreChange) => getController().subscribe(onStoreChange),
+    () => getController().getSnapshot(),
+    () => getController().getSnapshot()
   );
-  const reset = (0, import_react3.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
-var import_react4 = require("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"
-];
+var import_sync = require("@korajs/sync");
+var import_react5 = require("react");
 function useSyncStatus() {
   const { syncEngine, subscribeSyncStatus, events } = useKoraContext();
-  const snapshotRef = (0, import_react4.useRef)(OFFLINE_STATUS);
-  const serializedRef = (0, import_react4.useRef)(JSON.stringify(OFFLINE_STATUS));
-  const subscribe = (0, import_react4.useCallback)(
-    (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(
+    () => (0, import_sync.createSyncStatusController)({
+      syncEngine,
+      subscribeSyncStatus,
+      events: subscribeSyncStatus ? null : events
+    }),
+    (controller) => controller.destroy(),
     [syncEngine, subscribeSyncStatus, events]
   );
-  const getSnapshot = (0, import_react4.useCallback)(() => {
-    if (subscribeSyncStatus) {
-      return snapshotRef.current;
-    }
-    return syncEngine ? syncEngine.getStatus() : OFFLINE_STATUS;
-  }, [syncEngine, subscribeSyncStatus]);
-  return (0, import_react4.useSyncExternalStore)(subscribe, getSnapshot);
+  return (0, import_react5.useSyncExternalStore)(
+    (onStoreChange) => getController().subscribe(onStoreChange),
+    () => getController().getSnapshot(),
+    () => getController().getSnapshot()
+  );
 }
 
 // src/hooks/use-collection.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 function useCollection(name) {
   const { store } = useKoraContext();
-  return (0, import_react5.useMemo)(() => {
+  return (0, import_react6.useMemo)(() => {
     return store.collection(name);
   }, [store, name]);
 }
 
 // src/hooks/use-rich-text.ts
-var import_store = require("@korajs/store");
-var import_react6 = require("react");
-var Y = __toESM(require("yjs"), 1);
-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;
+var import_store3 = require("@korajs/store");
+var import_react7 = require("react");
 function useRichText(collectionName, recordId, fieldName, options) {
   const { store, syncEngine } = useKoraContext();
-  const collection = (0, import_react6.useMemo)(
-    () => store.collection(collectionName),
-    [store, collectionName]
+  const collection = (0, import_react7.useMemo)(() => store.collection(collectionName), [store, collectionName]);
+  const getController = useController(
+    () => (0, import_store3.createRichTextController)({
+      collection,
+      collectionName,
+      recordId,
+      fieldName,
+      store,
+      syncEngine: (0, import_store3.asRichTextSyncEngine)(syncEngine),
+      useDocChannel: options?.useDocChannel,
+      user: options?.user
+    }),
+    (controller) => controller.destroy(),
+    [collection, collectionName, fieldName, options?.useDocChannel, recordId, store, syncEngine]
   );
-  const [doc] = (0, import_react6.useState)(() => new Y.Doc());
-  const [ready, setReady] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const [canUndo, setCanUndo] = (0, import_react6.useState)(false);
-  const [canRedo, setCanRedo] = (0, import_react6.useState)(false);
-  const [cursors, setCursors] = (0, import_react6.useState)([]);
-  const baseUpdateRef = (0, import_react6.useRef)(null);
-  const pendingDeltasRef = (0, import_react6.useRef)([]);
-  const docChannelActiveRef = (0, import_react6.useRef)(false);
-  const persistTimerRef = (0, import_react6.useRef)(null);
-  const userRef = (0, import_react6.useRef)(options?.user);
-  (0, import_react6.useEffect)(() => {
-    userRef.current = options?.user;
-  }, [options?.user]);
-  const text = (0, import_react6.useMemo)(() => doc.getText(TEXT_KEY), [doc]);
-  const undoManager = (0, import_react6.useMemo)(() => new Y.UndoManager(text), [text]);
-  const syncHistoryState = (0, import_react6.useCallback)(() => {
-    setCanUndo(undoManager.undoStack.length > 0);
-    setCanRedo(undoManager.redoStack.length > 0);
-  }, [undoManager]);
-  const undo = (0, import_react6.useCallback)(() => {
-    undoManager.undo();
-    syncHistoryState();
-  }, [syncHistoryState, undoManager]);
-  const redo = (0, import_react6.useCallback)(() => {
-    undoManager.redo();
-    syncHistoryState();
-  }, [syncHistoryState, undoManager]);
-  const resolveAwarenessUser = (0, import_react6.useCallback)(() => {
-    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 = (0, import_react6.useCallback)(
-    (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]
+  (0, import_react7.useEffect)(() => {
+    getController().setUser(options?.user);
+  }, [getController, options?.user]);
+  const snapshot = (0, import_react7.useSyncExternalStore)(
+    (onStoreChange) => getController().subscribe(onStoreChange),
+    () => getController().getSnapshot(),
+    () => getController().getSnapshot()
   );
-  const clearCursor = (0, import_react6.useCallback)(() => {
-    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 = (0, import_react6.useCallback)(
-    (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 = (0, import_react7.useCallback)(() => {
+    getController().undo();
+  }, [getController]);
+  const redo = (0, import_react7.useCallback)(() => {
+    getController().redo();
+  }, [getController]);
+  const setCursor = (0, import_react7.useCallback)(
+    (anchor, head) => getController().setCursor(anchor, head),
+    [getController]
   );
-  (0, import_react6.useEffect)(() => {
-    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
-  ]);
-  (0, import_react6.useEffect)(() => {
-    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]);
-  (0, import_react6.useEffect)(() => {
-    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]);
-  (0, import_react6.useEffect)(() => {
-    if (!syncEngine) return;
+  const clearCursor = (0, import_react7.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
+var import_react8 = require("react");
+function usePresence(user) {
+  const { syncEngine } = useKoraContext();
+  const name = user?.name ?? null;
+  const color = user?.color ?? null;
+  const avatar = user?.avatar ?? null;
+  (0, import_react8.useEffect)(() => {
+    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 };
+  }, [syncEngine, name, color, avatar]);
 }
-function encodeRichtextInput(value) {
-  if (value === null || value === void 0) {
-    return null;
-  }
-  try {
-    return (0, import_store.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.");
-  }
-}
-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
+var import_sync2 = require("@korajs/sync");
+var import_react9 = require("react");
+var EMPTY_ARRAY2 = [];
+function useCollaborators() {
+  const { syncEngine } = useKoraContext();
+  const snapshotRef = (0, import_react9.useRef)(EMPTY_ARRAY2);
+  const subscribe = (0, import_react9.useCallback)(
+    (onStoreChange) => {
+      if (!syncEngine) {
+        snapshotRef.current = EMPTY_ARRAY2;
+        return () => {
+        };
+      }
+      const awareness = syncEngine.getAwarenessManager();
+      return (0, import_sync2.subscribeRemoteAwarenessStates)(awareness, (states) => {
+        snapshotRef.current = states;
+        onStoreChange();
+      });
+    },
+    [syncEngine]
+  );
+  const getSnapshot = (0, import_react9.useCallback)(() => snapshotRef.current, []);
+  (0, import_react9.useEffect)(() => {
+    if (!syncEngine) {
+      snapshotRef.current = EMPTY_ARRAY2;
     }
-  }
-  return true;
+  }, [syncEngine]);
+  return (0, import_react9.useSyncExternalStore)(subscribe, getSnapshot);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   KoraProvider,
   useApp,
+  useCollaborators,
   useCollection,
   useMutation,
+  usePresence,
   useQuery,
   useRichText,
   useSyncStatus