@liveblocks/react 1.9.7 → 1.10.0-beta1

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { detectDupes } from "@liveblocks/core";
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/react";
-var PKG_VERSION = "1.9.7";
+var PKG_VERSION = "1.10.0-beta1";
 var PKG_FORMAT = "esm";
 
 // src/ClientSideSuspense.tsx
@@ -18,29 +18,47 @@ function ClientSideSuspense(props) {
   return /* @__PURE__ */ React.createElement(React.Suspense, { fallback: props.fallback }, mounted ? props.children() : props.fallback);
 }
 
-// src/factory.tsx
+// src/liveblocks.tsx
+import { kInternal as kInternal3, makePoller as makePoller2 } from "@liveblocks/core";
+import { nanoid as nanoid3 } from "nanoid";
+import React3, {
+  createContext as createContext2,
+  useCallback as useCallback3,
+  useContext as useContext3,
+  useEffect as useEffect5
+} from "react";
+import { useSyncExternalStore as useSyncExternalStore3 } from "use-sync-external-store/shim/index.js";
+import { useSyncExternalStoreWithSelector as useSyncExternalStoreWithSelector2 } from "use-sync-external-store/shim/with-selector.js";
+
+// src/comments/lib/selected-inbox-notifications.ts
+import { applyOptimisticUpdates } from "@liveblocks/core";
+function selectedInboxNotifications(state) {
+  const result = applyOptimisticUpdates(state);
+  return Object.values(result.inboxNotifications);
+}
+
+// src/shared.ts
+import { kInternal as kInternal2 } from "@liveblocks/core";
+import { useCallback as useCallback2, useContext as useContext2, useEffect as useEffect4 } from "react";
+import { useSyncExternalStore as useSyncExternalStore2 } from "use-sync-external-store/shim/index.js";
+
+// src/room.tsx
 import { shallow } from "@liveblocks/client";
 import {
-  createAsyncCache,
+  CommentsApiError,
+  console as console2,
   deprecateIf,
   errorIf,
   isLiveNode,
-  makeEventSource as makeEventSource2,
-  stringify as stringify2
+  kInternal,
+  makeEventSource,
+  makePoller,
+  NotificationsApiError,
+  ServerMsgCode,
+  stringify
 } from "@liveblocks/core";
-import * as React3 from "react";
-import { useSyncExternalStoreWithSelector as useSyncExternalStoreWithSelector2 } from "use-sync-external-store/shim/with-selector.js";
-
-// src/comments/CommentsRoom.tsx
-import { CommentsApiError, makeEventSource, stringify } from "@liveblocks/core";
-import { nanoid } from "nanoid";
-import React2, {
-  createContext,
-  useCallback as useCallback3,
-  useContext,
-  useEffect as useEffect3,
-  useMemo
-} from "react";
+import { nanoid as nanoid2 } from "nanoid";
+import * as React2 from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector.js";
 
 // src/comments/errors.ts
@@ -100,1298 +118,322 @@ var RemoveReactionError = class extends Error {
     this.name = "RemoveReactionError";
   }
 };
+var MarkInboxNotificationAsReadError = class extends Error {
+  constructor(cause, context) {
+    super("Mark inbox notification as read failed.");
+    this.cause = cause;
+    this.context = context;
+    this.name = "MarkInboxNotificationAsReadError";
+  }
+};
+var UpdateNotificationSettingsError = class extends Error {
+  constructor(cause, context) {
+    super("Update notification settings failed.");
+    this.cause = cause;
+    this.context = context;
+    this.name = "UpdateNotificationSettingsError";
+  }
+};
 
-// src/comments/lib/revalidation.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
-
-// src/comments/lib/use-is-document-visible.ts
-import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
-function useIsDocumentVisible() {
-  const isVisible = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  return isVisible;
+// src/comments/lib/createIds.ts
+import { nanoid } from "nanoid";
+var THREAD_ID_PREFIX = "th";
+var COMMENT_ID_PREFIX = "cm";
+function createOptimisticId(prefix) {
+  return `${prefix}_${nanoid()}`;
 }
-function subscribe(onStoreChange) {
-  document.addEventListener("visibilitychange", onStoreChange);
-  return () => {
-    document.removeEventListener("visibilitychange", onStoreChange);
-  };
+function createThreadId() {
+  return createOptimisticId(THREAD_ID_PREFIX);
 }
-function getSnapshot() {
-  const isDocumentDefined = typeof document !== "undefined";
-  return isDocumentDefined ? document.visibilityState === "visible" : true;
+function createCommentId() {
+  return createOptimisticId(COMMENT_ID_PREFIX);
 }
 
-// src/comments/lib/use-is-online.ts
-import { useCallback, useRef } from "react";
-import { useSyncExternalStore as useSyncExternalStore2 } from "use-sync-external-store/shim/index.js";
-function useIsOnline() {
-  const isOnlineRef = useRef(true);
-  const subscribe2 = useCallback((onStoreChange) => {
-    function handleIsOnline() {
-      isOnlineRef.current = true;
-      onStoreChange();
-    }
-    function handleIsOffline() {
-      isOnlineRef.current = false;
-      onStoreChange();
-    }
-    window.addEventListener("online", handleIsOnline);
-    window.addEventListener("offline", handleIsOffline);
-    return () => {
-      window.removeEventListener("online", handleIsOnline);
-      window.removeEventListener("offline", handleIsOffline);
-    };
-  }, []);
-  const getSnapshot2 = useCallback(() => {
-    return isOnlineRef.current;
-  }, []);
-  const isOnline = useSyncExternalStore2(subscribe2, getSnapshot2, getSnapshot2);
-  return isOnline;
+// src/comments/lib/select-notification-settings.ts
+import {
+  applyOptimisticUpdates as applyOptimisticUpdates2
+} from "@liveblocks/core";
+function selectNotificationSettings(roomId, state) {
+  const { notificationSettings } = applyOptimisticUpdates2(state);
+  return notificationSettings[roomId];
 }
 
-// src/comments/lib/revalidation.ts
-var DEFAULT_ERROR_RETRY_INTERVAL = 5e3;
-var DEFAULT_MAX_ERROR_RETRY_COUNT = 5;
-var DEFAULT_DEDUPING_INTERVAL = 2e3;
-var timestamp = 0;
-function useRevalidateCache(manager, fetcher, options = {}) {
-  const isOnlineRef = useRef2(true);
-  const {
-    dedupingInterval = DEFAULT_DEDUPING_INTERVAL,
-    errorRetryInterval = DEFAULT_ERROR_RETRY_INTERVAL,
-    errorRetryCount = DEFAULT_MAX_ERROR_RETRY_COUNT
-  } = options;
-  const _revalidateCache = useCallback2(
-    async ({
-      shouldDedupe,
-      retryCount = 0
-    }) => {
-      let startAt;
-      const shouldStartRequest = !manager.getRequest() || !shouldDedupe;
-      function deleteActiveRequest() {
-        const activeRequest = manager.getRequest();
-        if (!activeRequest)
-          return;
-        if (activeRequest.timestamp !== startAt)
-          return;
-        manager.setRequest(void 0);
-      }
-      function handleError() {
-        const timeout = ~~((Math.random() + 0.5) * (1 << (retryCount < 8 ? retryCount : 8))) * errorRetryInterval;
-        if (retryCount > errorRetryCount)
-          return;
-        setTimeout(() => {
-          void _revalidateCache({
-            shouldDedupe: false,
-            retryCount: retryCount + 1
-          });
-        }, timeout);
-      }
-      if (shouldStartRequest) {
-        manager.setRequest({
-          fetcher: fetcher(),
-          timestamp: ++timestamp
-        });
-      }
-      try {
-        let activeRequest = manager.getRequest();
-        if (!activeRequest)
-          return;
-        startAt = activeRequest.timestamp;
-        const newData = await activeRequest.fetcher;
-        if (shouldStartRequest) {
-          setTimeout(deleteActiveRequest, dedupingInterval);
-        }
-        activeRequest = manager.getRequest();
-        if (!activeRequest || activeRequest.timestamp !== startAt)
-          return;
-        const activeMutation = manager.getMutation();
-        if (activeMutation && (activeMutation.startTime > startAt || activeMutation.endTime > startAt || activeMutation.endTime === 0)) {
-          return;
-        }
-        manager.setCache(newData);
-      } catch (err) {
-        deleteActiveRequest();
-        const isVisible = document.visibilityState === "visible";
-        const isOnline = isOnlineRef.current;
-        if (shouldStartRequest && isVisible && isOnline)
-          handleError();
-        manager.setError(err);
+// src/comments/lib/selected-threads.ts
+import {
+  applyOptimisticUpdates as applyOptimisticUpdates3
+} from "@liveblocks/core";
+function selectedThreads(roomId, state, options) {
+  const result = applyOptimisticUpdates3(state);
+  return Object.values(result.threads).filter((thread) => {
+    if (thread.roomId !== roomId)
+      return false;
+    const query = options.query;
+    if (!query)
+      return true;
+    for (const key in query.metadata) {
+      if (thread.metadata[key] !== query.metadata[key]) {
+        return false;
       }
-      return;
-    },
-    [manager, fetcher, dedupingInterval, errorRetryInterval, errorRetryCount]
-  );
-  useEffect2(() => {
-    function handleIsOnline() {
-      isOnlineRef.current = true;
     }
-    function handleIsOffline() {
-      isOnlineRef.current = false;
+    return true;
+  });
+}
+
+// src/comments/lib/upsert-comment.ts
+function upsertComment(threads, newComment) {
+  const thread = threads[newComment.threadId];
+  if (thread === void 0) {
+    return threads;
+  }
+  const newComments = [];
+  let updated = false;
+  for (const comment of thread.comments) {
+    if (comment.id === newComment.id) {
+      updated = true;
+      newComments.push(newComment);
+    } else {
+      newComments.push(comment);
+    }
+  }
+  if (!updated) {
+    newComments.push(newComment);
+  }
+  return {
+    ...threads,
+    [thread.id]: {
+      ...thread,
+      comments: newComments
     }
-    window.addEventListener("online", handleIsOnline);
-    window.addEventListener("offline", handleIsOffline);
-    return () => {
-      window.removeEventListener("online", handleIsOnline);
-      window.removeEventListener("offline", handleIsOffline);
-    };
-  }, []);
-  const revalidateCache = useCallback2(
-    ({ shouldDedupe }) => {
-      return _revalidateCache({ shouldDedupe, retryCount: 0 });
-    },
-    [_revalidateCache]
+  };
+}
+
+// src/lib/use-initial.ts
+import { useState as useState2 } from "react";
+function useInitial(value) {
+  return useState2(value)[0];
+}
+
+// src/lib/use-latest.ts
+import { useEffect as useEffect2, useRef } from "react";
+function useLatest(value) {
+  const ref = useRef(value);
+  useEffect2(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+
+// src/lib/use-rerender.ts
+import { useReducer } from "react";
+function useRerender() {
+  const [, update] = useReducer(
+    // This implementation works by incrementing a hidden counter value that is
+    // never consumed. Simply incrementing the counter changes the component's
+    // state and, thus, trigger a re-render.
+    (x) => x + 1,
+    0
   );
-  return revalidateCache;
+  return update;
 }
-function useMutate(manager, revalidateCache) {
-  const mutate = useCallback2(
-    async (data, options) => {
-      const beforeMutationTimestamp = ++timestamp;
-      manager.setMutation({
-        startTime: beforeMutationTimestamp,
-        endTime: 0
-      });
-      const currentCache = manager.getCache();
-      manager.setCache(options.optimisticData);
-      let error;
-      try {
-        await data;
-      } catch (err) {
-        error = err;
+
+// src/room.tsx
+var noop = () => {
+};
+var identity = (x) => x;
+var missing_unstable_batchedUpdates = (reactVersion, roomId) => `We noticed you\u2019re using React ${reactVersion}. Please pass unstable_batchedUpdates at the RoomProvider level until you\u2019re ready to upgrade to React 18:
+
+    import { unstable_batchedUpdates } from "react-dom";  // or "react-native"
+
+    <RoomProvider id=${JSON.stringify(
+  roomId
+)} ... unstable_batchedUpdates={unstable_batchedUpdates}>
+      ...
+    </RoomProvider>
+
+Why? Please see https://liveblocks.io/docs/platform/troubleshooting#stale-props-zombie-child for more information`;
+var superfluous_unstable_batchedUpdates = "You don\u2019t need to pass unstable_batchedUpdates to RoomProvider anymore, since you\u2019re on React 18+ already.";
+function useSyncExternalStore(s, gs, gss) {
+  return useSyncExternalStoreWithSelector(s, gs, gss, identity);
+}
+var STABLE_EMPTY_LIST = Object.freeze([]);
+var POLLING_INTERVAL = 5 * 60 * 1e3;
+var MENTION_SUGGESTIONS_DEBOUNCE = 500;
+function alwaysEmptyList() {
+  return STABLE_EMPTY_LIST;
+}
+function alwaysNull() {
+  return null;
+}
+function makeMutationContext(room) {
+  const errmsg = "This mutation cannot be used until connected to the Liveblocks room";
+  return {
+    get storage() {
+      const mutableRoot = room.getStorageSnapshot();
+      if (mutableRoot === null) {
+        throw new Error(errmsg);
       }
-      const activeMutation = manager.getMutation();
-      if (activeMutation && beforeMutationTimestamp !== activeMutation.startTime) {
-        if (error)
-          throw error;
-        return;
+      return mutableRoot;
+    },
+    get self() {
+      const self = room.getSelf();
+      if (self === null) {
+        throw new Error(errmsg);
       }
-      if (error) {
-        manager.setCache(currentCache);
+      return self;
+    },
+    get others() {
+      const others = room.getOthers();
+      if (room.getSelf() === null) {
+        throw new Error(errmsg);
       }
-      manager.setMutation({
-        startTime: beforeMutationTimestamp,
-        endTime: ++timestamp
-      });
-      manager.setRequest(void 0);
-      void revalidateCache({ shouldDedupe: false });
-      if (error)
-        throw error;
+      return others;
     },
-    [manager, revalidateCache]
-  );
-  return mutate;
+    setMyPresence: room.updatePresence
+  };
 }
-
-// src/comments/CommentsRoom.tsx
-var THREAD_ID_PREFIX = "th";
-var COMMENT_ID_PREFIX = "cm";
-var POLLING_INTERVAL_REALTIME = 3e4;
-var POLLING_INTERVAL = 5e3;
-function createCommentsRoom(errorEventSource) {
-  const store = createClientCacheStore();
-  const FetcherContext = createContext(null);
-  const RoomManagerContext = createContext(null);
-  function getThreads(manager) {
-    const threads = manager.getCache();
-    if (!threads) {
-      throw new Error(
-        "Cannot update threads or comments before they are loaded."
-      );
-    }
-    return threads;
+var ContextBundle = React2.createContext(null);
+function useRoomContextBundle() {
+  const bundle = React2.useContext(ContextBundle);
+  if (bundle === null) {
+    throw new Error("RoomProvider is missing from the React tree.");
   }
-  function CommentsRoomProvider({
-    room,
-    children
-  }) {
-    const manager = useMemo(() => {
-      return createRoomRevalidationManager(room.id, {
-        getCache: store.getThreads,
-        setCache: store.setThreads
-      });
-    }, [room.id]);
-    const fetcher = React2.useCallback(async () => {
-      const options = manager.getRevalidationManagers().filter(([key]) => manager.getReferenceCount(key) > 0).map(([_, manager2]) => manager2.getOptions());
-      const responses = await Promise.all(
-        options.map(async (option) => {
-          return await room.getThreads(option);
-        })
+  return bundle;
+}
+function createRoomContext(client) {
+  const RoomContext = React2.createContext(null);
+  const commentsErrorEventSource = makeEventSource();
+  const shared = createSharedContext(client);
+  function RoomProviderOuter(props) {
+    const [cache] = React2.useState(
+      () => /* @__PURE__ */ new Map()
+    );
+    const stableEnterRoom = React2.useCallback(
+      (roomId, options) => {
+        const cached = cache.get(roomId);
+        if (cached)
+          return cached;
+        const rv = client.enterRoom(
+          roomId,
+          options
+        );
+        const origLeave = rv.leave;
+        rv.leave = () => {
+          origLeave();
+          cache.delete(roomId);
+        };
+        cache.set(roomId, rv);
+        return rv;
+      },
+      [cache]
+    );
+    return /* @__PURE__ */ React2.createElement(RoomProviderInner, { ...props, stableEnterRoom });
+  }
+  function RoomProviderInner(props) {
+    const { id: roomId, stableEnterRoom } = props;
+    if (process.env.NODE_ENV !== "production") {
+      if (!roomId) {
+        throw new Error(
+          "RoomProvider id property is required. For more information: https://liveblocks.io/docs/errors/liveblocks-react/RoomProvider-id-property-is-required"
+        );
+      }
+      if (typeof roomId !== "string") {
+        throw new Error("RoomProvider id property should be a string.");
+      }
+      const majorReactVersion = parseInt(React2.version) || 1;
+      const oldReactVersion = majorReactVersion < 18;
+      errorIf(
+        oldReactVersion && props.unstable_batchedUpdates === void 0,
+        missing_unstable_batchedUpdates(majorReactVersion, roomId)
       );
-      const threads = Array.from(
-        new Map(responses.flat().map((thread) => [thread.id, thread])).values()
+      deprecateIf(
+        !oldReactVersion && props.unstable_batchedUpdates !== void 0,
+        superfluous_unstable_batchedUpdates
       );
-      return threads;
-    }, [room, manager]);
-    const revalidateCache = useRevalidateCache(manager, fetcher);
-    const status = useSyncExternalStore3(
-      room.events.status.subscribe,
-      room.getStatus,
-      room.getStatus
-    );
-    const isOnline = useIsOnline();
-    const isDocumentVisible = useIsDocumentVisible();
-    const refreshInterval = getPollingInterval(
-      isOnline,
-      isDocumentVisible,
-      status === "connected"
+    }
+    const frozenProps = useInitial({
+      initialPresence: props.initialPresence,
+      initialStorage: props.initialStorage,
+      unstable_batchedUpdates: props.unstable_batchedUpdates,
+      autoConnect: props.autoConnect ?? props.shouldInitiallyConnect ?? typeof window !== "undefined"
+    });
+    const [{ room }, setRoomLeavePair] = React2.useState(
+      () => stableEnterRoom(roomId, {
+        ...frozenProps,
+        autoConnect: false
+        // Deliberately using false here on the first render, see below
+      })
     );
-    useEffect3(() => {
-      let revalidationTimerId;
-      function scheduleRevalidation() {
-        if (refreshInterval === 0)
+    React2.useEffect(() => {
+      async function handleCommentEvent(message) {
+        const info = await room.getThread({ threadId: message.threadId });
+        if (!info) {
+          store.deleteThread(message.threadId);
           return;
-        revalidationTimerId = window.setTimeout(() => {
-          if (isOnline && isDocumentVisible && !manager.getError() && manager.getTotalReferenceCount() > 0) {
-            void revalidateCache({ shouldDedupe: true }).then(
-              scheduleRevalidation
-            );
-            return;
-          }
-          scheduleRevalidation();
-        }, refreshInterval);
-      }
-      scheduleRevalidation();
-      return () => {
-        window.clearTimeout(revalidationTimerId);
-      };
-    }, [
-      revalidateCache,
-      refreshInterval,
-      isOnline,
-      isDocumentVisible,
-      manager
-    ]);
-    useEffect3(() => {
-      function handleIsOnline() {
-        if (isDocumentVisible) {
-          void revalidateCache({ shouldDedupe: true });
         }
-      }
-      window.addEventListener("online", handleIsOnline);
-      return () => {
-        window.removeEventListener("online", handleIsOnline);
-      };
-    }, [revalidateCache, isDocumentVisible]);
-    useEffect3(() => {
-      function handleVisibilityChange() {
-        const isVisible = document.visibilityState === "visible";
-        if (isVisible && isOnline) {
-          void revalidateCache({ shouldDedupe: true });
+        const { thread, inboxNotification } = info;
+        const existingThread = store.get().threads[message.threadId];
+        switch (message.type) {
+          case ServerMsgCode.COMMENT_EDITED:
+          case ServerMsgCode.THREAD_METADATA_UPDATED:
+          case ServerMsgCode.COMMENT_REACTION_ADDED:
+          case ServerMsgCode.COMMENT_REACTION_REMOVED:
+          case ServerMsgCode.COMMENT_DELETED:
+            if (!existingThread)
+              break;
+            store.updateThreadAndNotification(thread, inboxNotification);
+            break;
+          case ServerMsgCode.COMMENT_CREATED:
+            store.updateThreadAndNotification(thread, inboxNotification);
+            break;
+          default:
+            break;
         }
       }
-      document.addEventListener("visibilitychange", handleVisibilityChange);
-      return () => {
-        document.removeEventListener(
-          "visibilitychange",
-          handleVisibilityChange
-        );
-      };
-    }, [revalidateCache, isOnline]);
-    useEffect3(() => {
-      const unsubscribe = room.events.comments.subscribe(() => {
-        void revalidateCache({ shouldDedupe: false });
-      });
+      return room.events.comments.subscribe(
+        (message) => void handleCommentEvent(message)
+      );
+    }, [room]);
+    React2.useEffect(() => {
+      const pair = stableEnterRoom(roomId, frozenProps);
+      setRoomLeavePair(pair);
+      const { room: room2, leave } = pair;
+      if (frozenProps.autoConnect) {
+        room2.connect();
+      }
       return () => {
-        unsubscribe();
+        leave();
       };
-    }, [room, revalidateCache]);
-    return /* @__PURE__ */ React2.createElement(FetcherContext.Provider, { value: fetcher }, /* @__PURE__ */ React2.createElement(RoomManagerContext.Provider, { value: manager }, children));
+    }, [roomId, frozenProps, stableEnterRoom]);
+    return /* @__PURE__ */ React2.createElement(RoomContext.Provider, { value: room }, /* @__PURE__ */ React2.createElement(
+      ContextBundle.Provider,
+      {
+        value: bundle
+      },
+      props.children
+    ));
   }
-  function useRoomManager() {
-    const manager = useContext(RoomManagerContext);
-    if (manager === null) {
-      throw new Error("CommentsRoomProvider is missing from the React tree.");
-    }
-    return manager;
-  }
-  function getUseThreadsRevalidationManager(options, roomManager) {
-    const key = stringify(options);
-    const revalidationManager = roomManager.getRevalidationManager(key);
-    if (!revalidationManager) {
-      const useThreadsRevalidationManager = createUseThreadsRevalidationManager(
-        options,
-        roomManager
-      );
-      roomManager.setRevalidationmanager(key, useThreadsRevalidationManager);
-      return useThreadsRevalidationManager;
-    }
-    return revalidationManager;
+  function connectionIdSelector(others) {
+    return others.map((user) => user.connectionId);
   }
-  function useThreadsFetcher() {
-    const fetcher = useContext(FetcherContext);
-    if (fetcher === null) {
-      throw new Error("CommentsRoomProvider is missing from the React tree.");
-    }
-    return fetcher;
-  }
-  function useThreads(room, options = { query: { metadata: {} } }) {
-    const key = useMemo(() => stringify(options), [options]);
-    const manager = useRoomManager();
-    const useThreadsRevalidationManager = getUseThreadsRevalidationManager(
-      options,
-      manager
-    );
-    const fetcher = React2.useCallback(
-      () => {
-        return room.getThreads(options);
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- The missing dependency is `options` but `key` and `normalized` are analogous, so we only include `key` as dependency. This helps minimize the number of re-renders as `options` can change on each render
-      [key, room]
-    );
-    const revalidateCache = useRevalidateCache(
-      useThreadsRevalidationManager,
-      fetcher
-    );
-    useEffect3(() => {
-      void revalidateCache({ shouldDedupe: true });
-    }, [revalidateCache]);
-    useEffect3(() => {
-      manager.incrementReferenceCount(key);
-      return () => {
-        manager.decrementReferenceCount(key);
-      };
-    }, [manager, key]);
-    const cache = _useThreads(room, options);
-    return cache;
-  }
-  function useThreadsSuspense(room, options = { query: { metadata: {} } }) {
-    const key = useMemo(() => stringify(options), [options]);
-    const manager = useRoomManager();
-    const useThreadsRevalidationManager = getUseThreadsRevalidationManager(
-      options,
-      manager
-    );
-    const fetcher = React2.useCallback(
-      () => {
-        return room.getThreads(options);
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- The missing dependency is `options` but `key` and `normalized` are analogous, so we only include `key` as dependency. This helps minimize the number of re-renders as `options` can change on each render
-      [key, room]
-    );
-    const revalidateCache = useRevalidateCache(
-      useThreadsRevalidationManager,
-      fetcher
-    );
-    useEffect3(() => {
-      void revalidateCache({ shouldDedupe: true });
-    }, [revalidateCache]);
-    useEffect3(() => {
-      manager.incrementReferenceCount(key);
-      return () => {
-        manager.decrementReferenceCount(key);
-      };
-    }, [manager, key]);
-    const cache = _useThreads(room, options);
-    if (cache.error) {
-      throw cache.error;
-    }
-    if (cache.isLoading || !cache.threads) {
-      throw revalidateCache({
-        shouldDedupe: true
-      });
-    }
-    return {
-      isLoading: false,
-      threads: cache.threads,
-      error: cache.error
-    };
-  }
-  function _useThreads(room, options) {
-    const manager = useRoomManager();
-    const useThreadsRevalidationManager = getUseThreadsRevalidationManager(
-      options,
-      manager
-    );
-    return useSyncExternalStoreWithSelector(
-      store.subscribe,
-      () => store.getThreads(),
-      () => store.getThreads(),
-      (state) => {
-        const isLoading = useThreadsRevalidationManager.getIsLoading();
-        if (isLoading) {
-          return {
-            isLoading: true
-          };
-        }
-        const options2 = useThreadsRevalidationManager.getOptions();
-        const error = useThreadsRevalidationManager.getError();
-        const filtered = state.filter((thread) => {
-          if (thread.roomId !== room.id)
-            return false;
-          const query = options2.query ?? {};
-          for (const key in query.metadata) {
-            if (thread.metadata[key] !== query.metadata[key]) {
-              return false;
-            }
-          }
-          return true;
-        });
-        return {
-          isLoading: false,
-          threads: filtered,
-          error
-        };
-      }
-    );
-  }
-  function useEditThreadMetadata(room) {
-    const manager = useRoomManager();
-    const fetcher = useThreadsFetcher();
-    const revalidate = useRevalidateCache(manager, fetcher);
-    const mutate = useMutate(manager, revalidate);
-    const editThreadMetadata = useCallback3(
-      (options) => {
-        const threadId = options.threadId;
-        const metadata = "metadata" in options ? options.metadata : {};
-        const threads = getThreads(manager);
-        const optimisticData = threads.map(
-          (thread) => thread.id === threadId ? {
-            ...thread,
-            metadata: {
-              ...thread.metadata,
-              ...metadata
-            }
-          } : thread
-        );
-        mutate(room.editThreadMetadata({ metadata, threadId }), {
-          optimisticData
-        }).catch((err) => {
-          if (!(err instanceof CommentsApiError)) {
-            throw err;
-          }
-          const error = handleCommentsApiError(err);
-          errorEventSource.notify(
-            new EditThreadMetadataError(error, {
-              roomId: room.id,
-              threadId,
-              metadata
-            })
-          );
-        });
-      },
-      [room, mutate, manager]
-    );
-    return editThreadMetadata;
-  }
-  function useCreateThread(room) {
-    const manager = useRoomManager();
-    const fetcher = useThreadsFetcher();
-    const revalidate = useRevalidateCache(manager, fetcher);
-    const mutate = useMutate(manager, revalidate);
-    const createThread = useCallback3(
-      (options) => {
-        const body = options.body;
-        const metadata = "metadata" in options ? options.metadata : {};
-        const threads = getThreads(manager);
-        const threadId = createThreadId();
-        const commentId = createCommentId();
-        const now = /* @__PURE__ */ new Date();
-        const newComment = {
-          id: commentId,
-          threadId,
-          roomId: room.id,
-          createdAt: now,
-          type: "comment",
-          userId: getCurrentUserId(room),
-          body,
-          reactions: []
-        };
-        const newThread = {
-          id: threadId,
-          type: "thread",
-          createdAt: now,
-          roomId: room.id,
-          metadata,
-          comments: [newComment]
-        };
-        mutate(room.createThread({ threadId, commentId, body, metadata }), {
-          optimisticData: [...threads, newThread]
-        }).catch((err) => {
-          if (!(err instanceof CommentsApiError)) {
-            throw err;
-          }
-          const error = handleCommentsApiError(err);
-          errorEventSource.notify(
-            new CreateThreadError(error, {
-              roomId: room.id,
-              threadId,
-              commentId,
-              body,
-              metadata
-            })
-          );
-        });
-        return newThread;
-      },
-      [room, mutate, manager]
-    );
-    return createThread;
-  }
-  function useCreateComment(room) {
-    const manager = useRoomManager();
-    const fetcher = useThreadsFetcher();
-    const revalidate = useRevalidateCache(manager, fetcher);
-    const mutate = useMutate(manager, revalidate);
-    const createComment = useCallback3(
-      ({ threadId, body }) => {
-        const threads = getThreads(manager);
-        const commentId = createCommentId();
-        const now = /* @__PURE__ */ new Date();
-        const comment = {
-          id: commentId,
-          threadId,
-          roomId: room.id,
-          type: "comment",
-          createdAt: now,
-          userId: getCurrentUserId(room),
-          body,
-          reactions: []
-        };
-        const optimisticData = threads.map(
-          (thread) => thread.id === threadId ? {
-            ...thread,
-            comments: [...thread.comments, comment]
-          } : thread
-        );
-        mutate(room.createComment({ threadId, commentId, body }), {
-          optimisticData
-        }).catch((err) => {
-          if (!(err instanceof CommentsApiError)) {
-            throw err;
-          }
-          const error = handleCommentsApiError(err);
-          errorEventSource.notify(
-            new CreateCommentError(error, {
-              roomId: room.id,
-              threadId,
-              commentId,
-              body
-            })
-          );
-        });
-        return comment;
-      },
-      [room, mutate, manager]
-    );
-    return createComment;
-  }
-  function useEditComment(room) {
-    const manager = useRoomManager();
-    const fetcher = useThreadsFetcher();
-    const revalidate = useRevalidateCache(manager, fetcher);
-    const mutate = useMutate(manager, revalidate);
-    const editComment = useCallback3(
-      ({ threadId, commentId, body }) => {
-        const threads = getThreads(manager);
-        const now = /* @__PURE__ */ new Date();
-        const optimisticData = threads.map(
-          (thread) => thread.id === threadId ? {
-            ...thread,
-            comments: thread.comments.map(
-              (comment) => comment.id === commentId ? {
-                ...comment,
-                editedAt: now,
-                body
-              } : comment
-            )
-          } : thread
-        );
-        mutate(room.editComment({ threadId, commentId, body }), {
-          optimisticData
-        }).catch((err) => {
-          if (!(err instanceof CommentsApiError)) {
-            throw err;
-          }
-          const error = handleCommentsApiError(err);
-          errorEventSource.notify(
-            new EditCommentError(error, {
-              roomId: room.id,
-              threadId,
-              commentId,
-              body
-            })
-          );
-        });
-      },
-      [room, mutate, manager]
-    );
-    return editComment;
-  }
-  function useDeleteComment(room) {
-    const manager = useRoomManager();
-    const fetcher = useThreadsFetcher();
-    const revalidate = useRevalidateCache(manager, fetcher);
-    const mutate = useMutate(manager, revalidate);
-    const deleteComment = useCallback3(
-      ({ threadId, commentId }) => {
-        const threads = getThreads(manager);
-        const now = /* @__PURE__ */ new Date();
-        const newThreads = [];
-        for (const thread of threads) {
-          if (thread.id === threadId) {
-            const newThread = {
-              ...thread,
-              comments: thread.comments.map(
-                (comment) => comment.id === commentId ? {
-                  ...comment,
-                  deletedAt: now,
-                  body: void 0
-                } : comment
-              )
-            };
-            if (newThread.comments.some(
-              (comment) => comment.deletedAt === void 0
-            )) {
-              newThreads.push(newThread);
-            }
-          } else {
-            newThreads.push(thread);
-          }
-        }
-        mutate(room.deleteComment({ threadId, commentId }), {
-          optimisticData: newThreads
-        }).catch((err) => {
-          if (!(err instanceof CommentsApiError)) {
-            throw err;
-          }
-          const error = handleCommentsApiError(err);
-          errorEventSource.notify(
-            new DeleteCommentError(error, {
-              roomId: room.id,
-              threadId,
-              commentId
-            })
-          );
-        });
-      },
-      [room, mutate, manager]
-    );
-    return deleteComment;
-  }
-  function useAddReaction(room) {
-    const manager = useRoomManager();
-    const fetcher = useThreadsFetcher();
-    const revalidate = useRevalidateCache(manager, fetcher);
-    const mutate = useMutate(manager, revalidate);
-    const createComment = useCallback3(
-      ({ threadId, commentId, emoji }) => {
-        const threads = getThreads(manager);
-        const now = /* @__PURE__ */ new Date();
-        const userId = getCurrentUserId(room);
-        const optimisticData = threads.map(
-          (thread) => thread.id === threadId ? {
-            ...thread,
-            comments: thread.comments.map((comment) => {
-              if (comment.id !== commentId) {
-                return comment;
-              }
-              let reactions;
-              if (comment.reactions.some(
-                (reaction) => reaction.emoji === emoji
-              )) {
-                reactions = comment.reactions.map(
-                  (reaction) => reaction.emoji === emoji ? {
-                    ...reaction,
-                    users: [...reaction.users, { id: userId }]
-                  } : reaction
-                );
-              } else {
-                reactions = [
-                  ...comment.reactions,
-                  {
-                    emoji,
-                    createdAt: now,
-                    users: [{ id: userId }]
-                  }
-                ];
-              }
-              return {
-                ...comment,
-                reactions
-              };
-            })
-          } : thread
-        );
-        mutate(room.addReaction({ threadId, commentId, emoji }), {
-          optimisticData
-        }).catch((err) => {
-          if (!(err instanceof CommentsApiError)) {
-            throw err;
-          }
-          const error = handleCommentsApiError(err);
-          errorEventSource.notify(
-            new AddReactionError(error, {
-              roomId: room.id,
-              threadId,
-              commentId,
-              emoji
-            })
-          );
-        });
-      },
-      [room, mutate, manager]
-    );
-    return createComment;
-  }
-  function useRemoveReaction(room) {
-    const manager = useRoomManager();
-    const fetcher = useThreadsFetcher();
-    const revalidate = useRevalidateCache(manager, fetcher);
-    const mutate = useMutate(manager, revalidate);
-    const createComment = useCallback3(
-      ({ threadId, commentId, emoji }) => {
-        const threads = getThreads(manager);
-        const userId = getCurrentUserId(room);
-        const optimisticData = threads.map(
-          (thread) => thread.id === threadId ? {
-            ...thread,
-            comments: thread.comments.map((comment) => {
-              if (comment.id !== commentId) {
-                return comment;
-              }
-              const reactionIndex = comment.reactions.findIndex(
-                (reaction) => reaction.emoji === emoji
-              );
-              let reactions = comment.reactions;
-              if (reactionIndex >= 0 && comment.reactions[reactionIndex].users.some(
-                (user) => user.id === userId
-              )) {
-                if (comment.reactions[reactionIndex].users.length <= 1) {
-                  reactions = [...comment.reactions];
-                  reactions.splice(reactionIndex, 1);
-                } else {
-                  reactions[reactionIndex] = {
-                    ...reactions[reactionIndex],
-                    users: reactions[reactionIndex].users.filter(
-                      (user) => user.id !== userId
-                    )
-                  };
-                }
-              }
-              return {
-                ...comment,
-                reactions
-              };
-            })
-          } : thread
-        );
-        mutate(room.removeReaction({ threadId, commentId, emoji }), {
-          optimisticData
-        }).catch((err) => {
-          if (!(err instanceof CommentsApiError)) {
-            throw err;
-          }
-          const error = handleCommentsApiError(err);
-          errorEventSource.notify(
-            new RemoveReactionError(error, {
-              roomId: room.id,
-              threadId,
-              commentId,
-              emoji
-            })
-          );
-        });
-      },
-      [room, mutate, manager]
-    );
-    return createComment;
-  }
-  return {
-    CommentsRoomProvider,
-    useThreads,
-    useThreadsSuspense,
-    useEditThreadMetadata,
-    useCreateThread,
-    useCreateComment,
-    useEditComment,
-    useDeleteComment,
-    useAddReaction,
-    useRemoveReaction
-  };
-}
-function createOptimisticId(prefix) {
-  return `${prefix}_${nanoid()}`;
-}
-function createThreadId() {
-  return createOptimisticId(THREAD_ID_PREFIX);
-}
-function createCommentId() {
-  return createOptimisticId(COMMENT_ID_PREFIX);
-}
-function getCurrentUserId(room) {
-  const self = room.getSelf();
-  if (self === null || self.id === void 0) {
-    return "anonymous";
-  } else {
-    return self.id;
-  }
-}
-function handleCommentsApiError(err) {
-  const message = `Request failed with status ${err.status}: ${err.message}`;
-  if (err.details?.error === "FORBIDDEN") {
-    const detailedMessage = [message, err.details.suggestion, err.details.docs].filter(Boolean).join("\n");
-    console.error(detailedMessage);
-  }
-  return new Error(message);
-}
-function createRoomRevalidationManager(roomId, {
-  getCache,
-  setCache
-}) {
-  let request;
-  let error;
-  let mutation;
-  const revalidationManagerByOptions = /* @__PURE__ */ new Map();
-  const referenceCountByOptions = /* @__PURE__ */ new Map();
-  return {
-    // Cache
-    getCache() {
-      const threads = getCache();
-      const filtered = threads.filter((thread) => thread.roomId === roomId);
-      return filtered;
-    },
-    setCache(value) {
-      for (const key of revalidationManagerByOptions.keys()) {
-        if (referenceCountByOptions.get(key) === 0) {
-          revalidationManagerByOptions.delete(key);
-          referenceCountByOptions.delete(key);
-        }
-      }
-      const sorted = value.sort(
-        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
-      );
-      const threads = getCache();
-      const newThreads = threads.filter((thread) => thread.roomId !== roomId).concat(sorted);
-      setCache(newThreads);
-    },
-    // Request
-    getRequest() {
-      return request;
-    },
-    setRequest(value) {
-      request = value;
-    },
-    // Error
-    getError() {
-      return error;
-    },
-    setError(err) {
-      error = err;
-    },
-    // Mutation
-    getMutation() {
-      return mutation;
-    },
-    setMutation(info) {
-      mutation = info;
-    },
-    getRevalidationManagers() {
-      return Array.from(revalidationManagerByOptions.entries());
-    },
-    getRevalidationManager(key) {
-      return revalidationManagerByOptions.get(key);
-    },
-    setRevalidationmanager(key, manager) {
-      revalidationManagerByOptions.set(key, manager);
-    },
-    getTotalReferenceCount() {
-      return Array.from(referenceCountByOptions.values()).reduce(
-        (acc, count) => acc + count,
-        0
-      );
-    },
-    incrementReferenceCount(key) {
-      const count = referenceCountByOptions.get(key) ?? 0;
-      referenceCountByOptions.set(key, count + 1);
-    },
-    decrementReferenceCount(key) {
-      const count = referenceCountByOptions.get(key) ?? 0;
-      referenceCountByOptions.set(key, count - 1);
-    },
-    getReferenceCount(key) {
-      return referenceCountByOptions.get(key) ?? 0;
-    }
-  };
-}
-function createClientCacheStore() {
-  let threads = [];
-  const threadsEventSource = makeEventSource();
-  return {
-    getThreads() {
-      return threads;
-    },
-    setThreads(value) {
-      threads = value;
-      threadsEventSource.notify(threads);
-    },
-    subscribe(callback) {
-      return threadsEventSource.subscribe(callback);
-    }
-  };
-}
-function createUseThreadsRevalidationManager(options, manager) {
-  let isLoading = true;
-  let request;
-  let error;
-  return {
-    // Cache
-    getCache() {
-      return void 0;
-    },
-    setCache(value) {
-      const cache = new Map(
-        (manager.getCache() ?? []).map((thread) => [thread.id, thread])
-      );
-      for (const thread of value) {
-        cache.set(thread.id, thread);
-      }
-      manager.setCache(Array.from(cache.values()));
-      isLoading = false;
-    },
-    // Request
-    getRequest() {
-      return request;
-    },
-    setRequest(value) {
-      request = value;
-    },
-    // Error
-    getError() {
-      return error;
-    },
-    setError(err) {
-      error = err;
-      isLoading = false;
-      const cache = manager.getCache();
-      manager.setCache(cache);
-    },
-    // Mutation
-    getMutation() {
-      return void 0;
-    },
-    setMutation(_) {
-      return;
-    },
-    getOptions() {
-      return options;
-    },
-    getIsLoading() {
-      return isLoading;
-    },
-    setIsLoading(value) {
-      isLoading = value;
-    }
-  };
-}
-function getPollingInterval(isBrowserOnline, isDocumentVisible, isRoomConnected) {
-  if (!isBrowserOnline || !isDocumentVisible)
-    return;
-  if (isRoomConnected)
-    return POLLING_INTERVAL_REALTIME;
-  return POLLING_INTERVAL;
-}
-
-// src/comments/lib/use-debounce.ts
-import { useEffect as useEffect4, useRef as useRef3, useState as useState2 } from "react";
-var DEFAULT_DELAY = 500;
-function useDebounce(value, delay = DEFAULT_DELAY) {
-  const timeout = useRef3();
-  const [debouncedValue, setDebouncedValue] = useState2(value);
-  useEffect4(() => {
-    if (delay === false) {
-      return;
-    }
-    if (timeout.current === void 0) {
-      setDebouncedValue(value);
-    }
-    timeout.current = window.setTimeout(() => {
-      setDebouncedValue(value);
-      timeout.current = void 0;
-    }, delay);
-    return () => {
-      window.clearTimeout(timeout.current);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
-
-// src/lib/use-async-cache.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef4 } from "react";
-import { useSyncExternalStore as useSyncExternalStore4 } from "use-sync-external-store/shim/index.js";
-
-// src/lib/use-initial.ts
-import { useState as useState3 } from "react";
-function useInitial(value) {
-  return useState3(value)[0];
-}
-
-// src/lib/use-async-cache.ts
-var INITIAL_ASYNC_STATE = {
-  isLoading: false,
-  data: void 0,
-  error: void 0
-};
-var noop = () => {
-};
-function useAsyncCache(cache, key, options) {
-  const frozenOptions = useInitial(options);
-  const cacheItem = useMemo2(() => {
-    if (key === null || !cache) {
-      return null;
-    }
-    const cacheItem2 = cache.create(key);
-    void cacheItem2.get();
-    return cacheItem2;
-  }, [cache, key]);
-  const subscribe2 = useCallback4(
-    (callback) => cacheItem?.subscribe(callback) ?? noop,
-    [cacheItem]
-  );
-  const getState = useCallback4(
-    () => cacheItem?.getState() ?? INITIAL_ASYNC_STATE,
-    [cacheItem]
-  );
-  const revalidate = useCallback4(() => cacheItem?.revalidate(), [cacheItem]);
-  const state = useSyncExternalStore4(subscribe2, getState, getState);
-  const previousData = useRef4();
-  let data = state.data;
-  useEffect5(() => {
-    previousData.current = { key, data: state.data };
-  }, [key, state.data]);
-  if (!cacheItem) {
-    return {
-      isLoading: false,
-      data: void 0,
-      error: void 0,
-      getState,
-      revalidate
-    };
-  }
-  if (frozenOptions?.suspense) {
-    const error = getState().error;
-    if (error) {
-      throw error;
-    } else if (getState().isLoading) {
-      throw new Promise((resolve) => {
-        cacheItem.subscribeOnce((state2) => {
-          if (!state2.isLoading) {
-            resolve();
-          }
-        });
-      });
-    }
-  }
-  if (state.isLoading && frozenOptions?.keepPreviousDataWhileLoading && typeof state.data === "undefined" && previousData.current?.key !== key && typeof previousData.current?.data !== "undefined") {
-    data = previousData.current.data;
-  }
-  return {
-    isLoading: state.isLoading,
-    data,
-    error: state.error,
-    getState,
-    revalidate
-  };
-}
-
-// src/lib/use-latest.ts
-import { useEffect as useEffect6, useRef as useRef5 } from "react";
-function useLatest(value) {
-  const ref = useRef5(value);
-  useEffect6(() => {
-    ref.current = value;
-  }, [value]);
-  return ref;
-}
-
-// src/lib/use-rerender.ts
-import { useReducer } from "react";
-function useRerender() {
-  const [, update] = useReducer(
-    // This implementation works by incrementing a hidden counter value that is
-    // never consumed. Simply incrementing the counter changes the component's
-    // state and, thus, trigger a re-render.
-    (x) => x + 1,
-    0
-  );
-  return update;
-}
-
-// src/factory.tsx
-var noop2 = () => {
-};
-var identity = (x) => x;
-var missing_unstable_batchedUpdates = (reactVersion, roomId) => `We noticed you\u2019re using React ${reactVersion}. Please pass unstable_batchedUpdates at the RoomProvider level until you\u2019re ready to upgrade to React 18:
-
-    import { unstable_batchedUpdates } from "react-dom";  // or "react-native"
-
-    <RoomProvider id=${JSON.stringify(
-  roomId
-)} ... unstable_batchedUpdates={unstable_batchedUpdates}>
-      ...
-    </RoomProvider>
-
-Why? Please see https://liveblocks.io/docs/platform/troubleshooting#stale-props-zombie-child for more information`;
-var superfluous_unstable_batchedUpdates = "You don\u2019t need to pass unstable_batchedUpdates to RoomProvider anymore, since you\u2019re on React 18+ already.";
-function useSyncExternalStore3(s, gs, gss) {
-  return useSyncExternalStoreWithSelector2(s, gs, gss, identity);
-}
-var STABLE_EMPTY_LIST = Object.freeze([]);
-function alwaysEmptyList() {
-  return STABLE_EMPTY_LIST;
-}
-function alwaysNull() {
-  return null;
-}
-function makeMutationContext(room) {
-  const errmsg = "This mutation cannot be used until connected to the Liveblocks room";
-  return {
-    get storage() {
-      const mutableRoot = room.getStorageSnapshot();
-      if (mutableRoot === null) {
-        throw new Error(errmsg);
-      }
-      return mutableRoot;
-    },
-    get self() {
-      const self = room.getSelf();
-      if (self === null) {
-        throw new Error(errmsg);
-      }
-      return self;
-    },
-    get others() {
-      const others = room.getOthers();
-      if (room.getSelf() === null) {
-        throw new Error(errmsg);
-      }
-      return others;
-    },
-    setMyPresence: room.updatePresence
-  };
-}
-var hasWarnedIfNoResolveUsers = false;
-function warnIfNoResolveUsers(usersCache) {
-  if (!hasWarnedIfNoResolveUsers && !usersCache && process.env.NODE_ENV !== "production") {
-    console.warn(
-      "Set the resolveUsers option in createRoomContext to specify user info."
-    );
-    hasWarnedIfNoResolveUsers = true;
-  }
-}
-var ContextBundle = React3.createContext(null);
-function useRoomContextBundle() {
-  const bundle = React3.useContext(ContextBundle);
-  if (bundle === null) {
-    throw new Error("RoomProvider is missing from the React tree.");
-  }
-  return bundle;
-}
-function createRoomContext(client, options) {
-  const RoomContext = React3.createContext(null);
-  const commentsErrorEventSource = makeEventSource2();
-  const { CommentsRoomProvider, ...commentsRoom } = createCommentsRoom(commentsErrorEventSource);
-  function RoomProviderOuter(props) {
-    const [cache] = React3.useState(
-      () => /* @__PURE__ */ new Map()
-    );
-    const stableEnterRoom = React3.useCallback(
-      (roomId, options2) => {
-        const cached = cache.get(roomId);
-        if (cached)
-          return cached;
-        const rv = client.enterRoom(
-          roomId,
-          options2
-        );
-        const origLeave = rv.leave;
-        rv.leave = () => {
-          origLeave();
-          cache.delete(roomId);
-        };
-        cache.set(roomId, rv);
-        return rv;
-      },
-      [cache]
-    );
-    return /* @__PURE__ */ React3.createElement(RoomProviderInner, { ...props, stableEnterRoom });
-  }
-  function RoomProviderInner(props) {
-    const { id: roomId, stableEnterRoom } = props;
-    if (process.env.NODE_ENV !== "production") {
-      if (!roomId) {
-        throw new Error(
-          "RoomProvider id property is required. For more information: https://liveblocks.io/docs/errors/liveblocks-react/RoomProvider-id-property-is-required"
-        );
-      }
-      if (typeof roomId !== "string") {
-        throw new Error("RoomProvider id property should be a string.");
-      }
-      const majorReactVersion = parseInt(React3.version) || 1;
-      const oldReactVersion = majorReactVersion < 18;
-      errorIf(
-        oldReactVersion && props.unstable_batchedUpdates === void 0,
-        missing_unstable_batchedUpdates(majorReactVersion, roomId)
-      );
-      deprecateIf(
-        !oldReactVersion && props.unstable_batchedUpdates !== void 0,
-        superfluous_unstable_batchedUpdates
-      );
-    }
-    const frozenProps = useInitial({
-      initialPresence: props.initialPresence,
-      initialStorage: props.initialStorage,
-      unstable_batchedUpdates: props.unstable_batchedUpdates,
-      autoConnect: props.autoConnect ?? props.shouldInitiallyConnect ?? typeof window !== "undefined"
-    });
-    const [{ room }, setRoomLeavePair] = React3.useState(
-      () => stableEnterRoom(roomId, {
-        ...frozenProps,
-        autoConnect: false
-        // Deliberately using false here on the first render, see below
-      })
-    );
-    React3.useEffect(() => {
-      const pair = stableEnterRoom(roomId, frozenProps);
-      setRoomLeavePair(pair);
-      const { room: room2, leave } = pair;
-      if (frozenProps.autoConnect) {
-        room2.connect();
-      }
-      return () => {
-        leave();
-      };
-    }, [roomId, frozenProps, stableEnterRoom]);
-    return /* @__PURE__ */ React3.createElement(RoomContext.Provider, { value: room }, /* @__PURE__ */ React3.createElement(CommentsRoomProvider, { room }, /* @__PURE__ */ React3.createElement(
-      ContextBundle.Provider,
-      {
-        value: internalBundle
-      },
-      props.children
-    )));
-  }
-  function connectionIdSelector(others) {
-    return others.map((user) => user.connectionId);
-  }
-  function useRoom() {
-    const room = React3.useContext(RoomContext);
-    if (room === null) {
-      throw new Error("RoomProvider is missing from the React tree.");
+  function useRoom() {
+    const room = React2.useContext(RoomContext);
+    if (room === null) {
+      throw new Error("RoomProvider is missing from the React tree.");
     }
     return room;
   }
   function useStatus() {
     const room = useRoom();
-    const subscribe2 = room.events.status.subscribe;
-    const getSnapshot2 = room.getStatus;
+    const subscribe = room.events.status.subscribe;
+    const getSnapshot = room.getStatus;
     const getServerSnapshot = room.getStatus;
-    return useSyncExternalStore3(subscribe2, getSnapshot2, getServerSnapshot);
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   }
   function useMyPresence() {
     const room = useRoom();
-    const subscribe2 = room.events.myPresence.subscribe;
-    const getSnapshot2 = room.getPresence;
-    const presence = useSyncExternalStore3(subscribe2, getSnapshot2, getSnapshot2);
+    const subscribe = room.events.myPresence.subscribe;
+    const getSnapshot = room.getPresence;
+    const presence = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
     const setPresence = room.updatePresence;
     return [presence, setPresence];
   }
@@ -1400,12 +442,12 @@ function createRoomContext(client, options) {
   }
   function useOthers(selector, isEqual) {
     const room = useRoom();
-    const subscribe2 = room.events.others.subscribe;
-    const getSnapshot2 = room.getOthers;
+    const subscribe = room.events.others.subscribe;
+    const getSnapshot = room.getOthers;
     const getServerSnapshot = alwaysEmptyList;
-    return useSyncExternalStoreWithSelector2(
-      subscribe2,
-      getSnapshot2,
+    return useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
       getServerSnapshot,
       selector ?? identity,
       isEqual
@@ -1415,13 +457,13 @@ function createRoomContext(client, options) {
     return useOthers(connectionIdSelector, shallow);
   }
   function useOthersMapped(itemSelector, itemIsEqual) {
-    const wrappedSelector = React3.useCallback(
+    const wrappedSelector = React2.useCallback(
       (others) => others.map(
         (other) => [other.connectionId, itemSelector(other)]
       ),
       [itemSelector]
     );
-    const wrappedIsEqual = React3.useCallback(
+    const wrappedIsEqual = React2.useCallback(
       (a, b) => {
         const eq = itemIsEqual ?? Object.is;
         return a.length === b.length && a.every((atuple, index) => {
@@ -1435,7 +477,7 @@ function createRoomContext(client, options) {
   }
   const NOT_FOUND = Symbol();
   function useOther(connectionId, selector, isEqual) {
-    const wrappedSelector = React3.useCallback(
+    const wrappedSelector = React2.useCallback(
       (others) => {
         const other2 = others.find(
           (other3) => other3.connectionId === connectionId
@@ -1444,7 +486,7 @@ function createRoomContext(client, options) {
       },
       [connectionId, selector]
     );
-    const wrappedIsEqual = React3.useCallback(
+    const wrappedIsEqual = React2.useCallback(
       (prev, curr) => {
         if (prev === NOT_FOUND || curr === NOT_FOUND) {
           return prev === curr;
@@ -1464,9 +506,9 @@ function createRoomContext(client, options) {
   }
   function useBroadcastEvent() {
     const room = useRoom();
-    return React3.useCallback(
-      (event, options2 = { shouldQueueEventIfNotReady: false }) => {
-        room.broadcastEvent(event, options2);
+    return React2.useCallback(
+      (event, options = { shouldQueueEventIfNotReady: false }) => {
+        room.broadcastEvent(event, options);
       },
       [room]
     );
@@ -1474,7 +516,7 @@ function createRoomContext(client, options) {
   function useOthersListener(callback) {
     const room = useRoom();
     const savedCallback = useLatest(callback);
-    React3.useEffect(
+    React2.useEffect(
       () => room.events.others.subscribe((event) => savedCallback.current(event)),
       [room, savedCallback]
     );
@@ -1482,7 +524,7 @@ function createRoomContext(client, options) {
   function useLostConnectionListener(callback) {
     const room = useRoom();
     const savedCallback = useLatest(callback);
-    React3.useEffect(
+    React2.useEffect(
       () => room.events.lostConnection.subscribe(
         (event) => savedCallback.current(event)
       ),
@@ -1492,7 +534,7 @@ function createRoomContext(client, options) {
   function useErrorListener(callback) {
     const room = useRoom();
     const savedCallback = useLatest(callback);
-    React3.useEffect(
+    React2.useEffect(
       () => room.events.error.subscribe((e) => savedCallback.current(e)),
       [room, savedCallback]
     );
@@ -1500,7 +542,7 @@ function createRoomContext(client, options) {
   function useEventListener(callback) {
     const room = useRoom();
     const savedCallback = useLatest(callback);
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       const listener = (eventData) => {
         savedCallback.current(eventData);
       };
@@ -1509,17 +551,17 @@ function createRoomContext(client, options) {
   }
   function useSelf(maybeSelector, isEqual) {
     const room = useRoom();
-    const subscribe2 = room.events.self.subscribe;
-    const getSnapshot2 = room.getSelf;
+    const subscribe = room.events.self.subscribe;
+    const getSnapshot = room.getSelf;
     const selector = maybeSelector ?? identity;
-    const wrappedSelector = React3.useCallback(
+    const wrappedSelector = React2.useCallback(
       (me) => me !== null ? selector(me) : null,
       [selector]
     );
     const getServerSnapshot = alwaysNull;
-    return useSyncExternalStoreWithSelector2(
-      subscribe2,
-      getSnapshot2,
+    return useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
       getServerSnapshot,
       wrappedSelector,
       isEqual
@@ -1527,10 +569,10 @@ function createRoomContext(client, options) {
   }
   function useMutableStorageRoot() {
     const room = useRoom();
-    const subscribe2 = room.events.storageDidLoad.subscribeOnce;
-    const getSnapshot2 = room.getStorageSnapshot;
+    const subscribe = room.events.storageDidLoad.subscribeOnce;
+    const getSnapshot = room.getStorageSnapshot;
     const getServerSnapshot = alwaysNull;
-    return useSyncExternalStore3(subscribe2, getSnapshot2, getServerSnapshot);
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   }
   function useStorageRoot() {
     return [useMutableStorageRoot()];
@@ -1546,15 +588,15 @@ function createRoomContext(client, options) {
   }
   function useCanUndo() {
     const room = useRoom();
-    const subscribe2 = room.events.history.subscribe;
+    const subscribe = room.events.history.subscribe;
     const canUndo = room.history.canUndo;
-    return useSyncExternalStore3(subscribe2, canUndo, canUndo);
+    return useSyncExternalStore(subscribe, canUndo, canUndo);
   }
   function useCanRedo() {
     const room = useRoom();
-    const subscribe2 = room.events.history.subscribe;
+    const subscribe = room.events.history.subscribe;
     const canRedo = room.history.canRedo;
-    return useSyncExternalStore3(subscribe2, canRedo, canRedo);
+    return useSyncExternalStore(subscribe, canRedo, canRedo);
   }
   function useBatch() {
     return useRoom().batch;
@@ -1563,7 +605,7 @@ function createRoomContext(client, options) {
     const room = useRoom();
     const rootOrNull = useMutableStorageRoot();
     const rerender = useRerender();
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       if (rootOrNull === null) {
         return;
       }
@@ -1599,15 +641,15 @@ function createRoomContext(client, options) {
   function useStorage(selector, isEqual) {
     const room = useRoom();
     const rootOrNull = useMutableStorageRoot();
-    const wrappedSelector = React3.useCallback(
+    const wrappedSelector = React2.useCallback(
       (rootOrNull2) => rootOrNull2 !== null ? selector(rootOrNull2) : null,
       [selector]
     );
-    const subscribe2 = React3.useCallback(
-      (onStoreChange) => rootOrNull !== null ? room.subscribe(rootOrNull, onStoreChange, { isDeep: true }) : noop2,
+    const subscribe = React2.useCallback(
+      (onStoreChange) => rootOrNull !== null ? room.subscribe(rootOrNull, onStoreChange, { isDeep: true }) : noop,
       [room, rootOrNull]
     );
-    const getSnapshot2 = React3.useCallback(() => {
+    const getSnapshot = React2.useCallback(() => {
       if (rootOrNull === null) {
         return null;
       } else {
@@ -1617,9 +659,9 @@ function createRoomContext(client, options) {
       }
     }, [rootOrNull]);
     const getServerSnapshot = alwaysNull;
-    return useSyncExternalStoreWithSelector2(
-      subscribe2,
-      getSnapshot2,
+    return useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
       getServerSnapshot,
       wrappedSelector,
       isEqual
@@ -1655,7 +697,7 @@ function createRoomContext(client, options) {
   }
   function useMutation(callback, deps) {
     const room = useRoom();
-    return React3.useMemo(
+    return React2.useMemo(
       () => {
         return (...args) => (
           // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -1711,102 +753,831 @@ function createRoomContext(client, options) {
     useSuspendUntilStorageLoaded();
     return useLegacyKey(key);
   }
-  function useThreads(options2) {
+  const store = client[kInternal].cacheStore;
+  function onMutationFailure(innerError, optimisticUpdateId, createPublicError) {
+    store.set((state) => ({
+      ...state,
+      optimisticUpdates: state.optimisticUpdates.filter(
+        (update) => update.id !== optimisticUpdateId
+      )
+    }));
+    if (innerError instanceof CommentsApiError) {
+      const error = handleApiError(innerError);
+      commentsErrorEventSource.notify(createPublicError(error));
+      return;
+    }
+    if (innerError instanceof NotificationsApiError) {
+      handleApiError(innerError);
+      return;
+    }
+    throw innerError;
+  }
+  const requestsCache = /* @__PURE__ */ new Map();
+  const poller = makePoller(refreshThreadsAndNotifications);
+  async function refreshThreadsAndNotifications() {
+    await Promise.allSettled(
+      Array.from(requestsCache.entries()).filter(([_, requestCache]) => requestCache.subscribers > 0).map(async ([_, requestCache]) => {
+        return requestCache.requestFactory().then(
+          (result) => requestCache.onSuccess(result),
+          () => {
+          }
+        );
+      })
+    );
+  }
+  function incrementQuerySubscribers(queryKey) {
+    const requestCache = requestsCache.get(queryKey);
+    if (requestCache === void 0) {
+      console2.warn(
+        `Internal unexpected behavior. Cannot increase subscriber count for query "${queryKey}"`
+      );
+      return;
+    }
+    requestCache.subscribers++;
+    poller.start(POLLING_INTERVAL);
+  }
+  function decrementQuerySubscribers(queryKey) {
+    const requestCache = requestsCache.get(queryKey);
+    if (requestCache === void 0 || requestCache.subscribers <= 0) {
+      console2.warn(
+        `Internal unexpected behavior. Cannot decrease subscriber count for query "${queryKey}"`
+      );
+      return;
+    }
+    requestCache.subscribers--;
+    let totalSubscribers = 0;
+    for (const requestCache2 of requestsCache.values()) {
+      totalSubscribers += requestCache2.subscribers;
+    }
+    if (totalSubscribers <= 0) {
+      poller.stop();
+    }
+  }
+  async function getOrInitRequest(queryKey, requestFactory, onSuccess) {
+    const requestInfo = requestsCache.get(queryKey);
+    if (requestInfo !== void 0) {
+      return requestInfo.promise;
+    }
+    const promise = requestFactory();
+    requestsCache.set(queryKey, {
+      promise,
+      requestFactory,
+      onSuccess,
+      subscribers: 0
+    });
+    store.setQueryState(queryKey, {
+      isLoading: true
+    });
+    try {
+      const result = await promise;
+      onSuccess(result);
+    } catch (er) {
+      store.setQueryState(queryKey, {
+        isLoading: false,
+        error: er
+      });
+    }
+    poller.start(POLLING_INTERVAL);
+  }
+  async function getThreadsAndInboxNotifications(room, queryKey, options) {
+    const roomId = room.id;
+    return getOrInitRequest(
+      queryKey,
+      async () => {
+        const room2 = client.getRoom(roomId);
+        if (room2 === null) {
+          return;
+        }
+        return room2.getThreads(options);
+      },
+      (result) => {
+        if (result !== void 0) {
+          store.updateThreadsAndNotifications(
+            result.threads,
+            result.inboxNotifications,
+            queryKey
+          );
+        }
+      }
+    );
+  }
+  function useThreads(options = { query: { metadata: {} } }) {
     const room = useRoom();
-    return commentsRoom.useThreads(room, options2);
+    const queryKey = React2.useMemo(
+      () => generateQueryKey(room.id, options.query),
+      [room, options]
+    );
+    React2.useEffect(() => {
+      void getThreadsAndInboxNotifications(room, queryKey, options);
+      incrementQuerySubscribers(queryKey);
+      return () => decrementQuerySubscribers(queryKey);
+    }, [room, queryKey]);
+    return useSyncExternalStoreWithSelector(
+      store.subscribe,
+      store.get,
+      store.get,
+      (state) => {
+        if (state.queries[queryKey] === void 0 || state.queries[queryKey].isLoading) {
+          return {
+            isLoading: true
+          };
+        }
+        return {
+          threads: selectedThreads(room.id, state, options),
+          isLoading: false,
+          error: state.queries[queryKey].error
+        };
+      }
+    );
   }
-  function useThreadsSuspense(options2) {
+  function useThreadsSuspense(options = { query: { metadata: {} } }) {
     const room = useRoom();
-    return commentsRoom.useThreadsSuspense(room, options2);
+    const queryKey = React2.useMemo(
+      () => generateQueryKey(room.id, options?.query),
+      [room, options]
+    );
+    const query = store.get().queries[queryKey];
+    if (query === void 0 || query.isLoading) {
+      throw getThreadsAndInboxNotifications(room, queryKey, options);
+    }
+    if (query.error) {
+      throw query.error;
+    }
+    React2.useEffect(() => {
+      incrementQuerySubscribers(queryKey);
+      return () => {
+        decrementQuerySubscribers(queryKey);
+      };
+    }, [room, queryKey]);
+    return useSyncExternalStoreWithSelector(
+      store.subscribe,
+      store.get,
+      store.get,
+      (state) => {
+        return {
+          threads: selectedThreads(room.id, state, options),
+          isLoading: false
+        };
+      }
+    );
   }
   function useCreateThread() {
     const room = useRoom();
-    return commentsRoom.useCreateThread(room);
+    return React2.useCallback(
+      (options) => {
+        const body = options.body;
+        const metadata = "metadata" in options ? options.metadata : {};
+        const threadId = createThreadId();
+        const commentId = createCommentId();
+        const now = /* @__PURE__ */ new Date();
+        const newComment = {
+          id: commentId,
+          threadId,
+          roomId: room.id,
+          createdAt: now,
+          type: "comment",
+          userId: getCurrentUserId(room),
+          body,
+          reactions: []
+        };
+        const newThread = {
+          id: threadId,
+          type: "thread",
+          createdAt: now,
+          roomId: room.id,
+          metadata,
+          comments: [newComment]
+        };
+        const optimisticUpdateId = nanoid2();
+        store.pushOptimisticUpdate({
+          type: "create-thread",
+          thread: newThread,
+          id: optimisticUpdateId
+        });
+        room.createThread({ threadId, commentId, body, metadata }).then(
+          (thread) => {
+            store.set((state) => ({
+              ...state,
+              threads: {
+                ...state.threads,
+                [threadId]: thread
+              },
+              optimisticUpdates: state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              )
+            }));
+          },
+          (err) => onMutationFailure(
+            err,
+            optimisticUpdateId,
+            (err2) => new CreateThreadError(err2, {
+              roomId: room.id,
+              threadId,
+              commentId,
+              body,
+              metadata
+            })
+          )
+        );
+        return newThread;
+      },
+      [room]
+    );
   }
   function useEditThreadMetadata() {
     const room = useRoom();
-    return commentsRoom.useEditThreadMetadata(room);
+    return React2.useCallback(
+      (options) => {
+        if (!("metadata" in options)) {
+          return;
+        }
+        const threadId = options.threadId;
+        const metadata = options.metadata;
+        const optimisticUpdateId = nanoid2();
+        store.pushOptimisticUpdate({
+          type: "edit-thread-metadata",
+          metadata,
+          id: optimisticUpdateId,
+          threadId
+        });
+        room.editThreadMetadata({ metadata, threadId }).then(
+          (metadata2) => {
+            store.set((state) => ({
+              ...state,
+              threads: {
+                ...state.threads,
+                [threadId]: {
+                  ...state.threads[threadId],
+                  metadata: {
+                    ...state.threads[threadId].metadata,
+                    ...metadata2
+                  }
+                }
+              },
+              optimisticUpdates: state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              )
+            }));
+          },
+          (err) => onMutationFailure(
+            err,
+            optimisticUpdateId,
+            (error) => new EditThreadMetadataError(error, {
+              roomId: room.id,
+              threadId,
+              metadata
+            })
+          )
+        );
+      },
+      [room]
+    );
   }
   function useAddReaction() {
     const room = useRoom();
-    return commentsRoom.useAddReaction(room);
+    return React2.useCallback(
+      ({ threadId, commentId, emoji }) => {
+        const now = /* @__PURE__ */ new Date();
+        const userId = getCurrentUserId(room);
+        const optimisticUpdateId = nanoid2();
+        store.pushOptimisticUpdate({
+          type: "add-reaction",
+          threadId,
+          commentId,
+          emoji,
+          userId,
+          createdAt: now,
+          id: optimisticUpdateId
+        });
+        room.addReaction({ threadId, commentId, emoji }).then(
+          (addedReaction) => {
+            store.set((state) => ({
+              ...state,
+              threads: {
+                ...state.threads,
+                [threadId]: {
+                  ...state.threads[threadId],
+                  comments: state.threads[threadId].comments.map(
+                    (comment) => comment.id === commentId ? {
+                      ...comment,
+                      reactions: comment.reactions.some(
+                        (reaction) => reaction.emoji === addedReaction.emoji
+                      ) ? comment.reactions.map(
+                        (reaction) => reaction.emoji === addedReaction.emoji ? {
+                          ...reaction,
+                          users: [
+                            ...reaction.users,
+                            { id: addedReaction.userId }
+                          ]
+                        } : reaction
+                      ) : [
+                        ...comment.reactions,
+                        {
+                          emoji: addedReaction.emoji,
+                          createdAt: addedReaction.createdAt,
+                          users: [{ id: addedReaction.userId }]
+                        }
+                      ]
+                    } : comment
+                  )
+                }
+              },
+              optimisticUpdates: state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              )
+            }));
+          },
+          (err) => onMutationFailure(
+            err,
+            optimisticUpdateId,
+            (error) => new AddReactionError(error, {
+              roomId: room.id,
+              threadId,
+              commentId,
+              emoji
+            })
+          )
+        );
+      },
+      [room]
+    );
+  }
+  function useRemoveReaction() {
+    const room = useRoom();
+    return React2.useCallback(
+      ({ threadId, commentId, emoji }) => {
+        const userId = getCurrentUserId(room);
+        const optimisticUpdateId = nanoid2();
+        store.pushOptimisticUpdate({
+          type: "remove-reaction",
+          threadId,
+          commentId,
+          emoji,
+          userId,
+          id: optimisticUpdateId
+        });
+        room.removeReaction({ threadId, commentId, emoji }).then(
+          () => {
+            store.set((state) => ({
+              ...state,
+              threads: {
+                ...state.threads,
+                [threadId]: {
+                  ...state.threads[threadId],
+                  comments: state.threads[threadId].comments.map((comment) => {
+                    if (comment.id !== commentId) {
+                      return comment;
+                    }
+                    const reactionIndex = comment.reactions.findIndex(
+                      (reaction) => reaction.emoji === emoji
+                    );
+                    let reactions = comment.reactions;
+                    if (reactionIndex >= 0 && comment.reactions[reactionIndex].users.some(
+                      (user) => user.id === userId
+                    )) {
+                      if (comment.reactions[reactionIndex].users.length <= 1) {
+                        reactions = [...comment.reactions];
+                        reactions.splice(reactionIndex, 1);
+                      } else {
+                        reactions[reactionIndex] = {
+                          ...reactions[reactionIndex],
+                          users: reactions[reactionIndex].users.filter(
+                            (user) => user.id !== userId
+                          )
+                        };
+                      }
+                    }
+                    return {
+                      ...comment,
+                      reactions
+                    };
+                  })
+                }
+              },
+              optimisticUpdates: state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              )
+            }));
+          },
+          (err) => onMutationFailure(
+            err,
+            optimisticUpdateId,
+            (error) => new RemoveReactionError(error, {
+              roomId: room.id,
+              threadId,
+              commentId,
+              emoji
+            })
+          )
+        );
+      },
+      [room]
+    );
+  }
+  function useCreateComment() {
+    const room = useRoom();
+    return React2.useCallback(
+      ({ threadId, body }) => {
+        const commentId = createCommentId();
+        const now = /* @__PURE__ */ new Date();
+        const comment = {
+          id: commentId,
+          threadId,
+          roomId: room.id,
+          type: "comment",
+          createdAt: now,
+          userId: getCurrentUserId(room),
+          body,
+          reactions: []
+        };
+        const optimisticUpdateId = nanoid2();
+        const inboxNotification = Object.values(
+          store.get().inboxNotifications
+        ).find((inboxNotification2) => inboxNotification2.threadId === threadId);
+        store.pushOptimisticUpdate({
+          type: "create-comment",
+          comment,
+          id: optimisticUpdateId,
+          inboxNotificationId: inboxNotification?.id
+        });
+        room.createComment({ threadId, commentId, body }).then(
+          (newComment) => {
+            store.set((state) => ({
+              ...state,
+              threads: upsertComment(state.threads, newComment),
+              inboxNotifications: inboxNotification ? {
+                ...state.inboxNotifications,
+                [inboxNotification.id]: {
+                  ...inboxNotification,
+                  notifiedAt: newComment.createdAt,
+                  readAt: newComment.createdAt
+                }
+              } : state.inboxNotifications,
+              optimisticUpdates: state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              )
+            }));
+          },
+          (err) => onMutationFailure(
+            err,
+            optimisticUpdateId,
+            (err2) => new CreateCommentError(err2, {
+              roomId: room.id,
+              threadId,
+              commentId,
+              body
+            })
+          )
+        );
+        return comment;
+      },
+      [room]
+    );
+  }
+  function useEditComment() {
+    const room = useRoom();
+    return React2.useCallback(
+      ({ threadId, commentId, body }) => {
+        const now = /* @__PURE__ */ new Date();
+        const optimisticUpdateId = nanoid2();
+        store.pushOptimisticUpdate({
+          type: "edit-comment",
+          threadId,
+          commentId,
+          body,
+          editedAt: now,
+          id: optimisticUpdateId
+        });
+        room.editComment({ threadId, commentId, body }).then(
+          (editedComment) => {
+            store.set((state) => ({
+              ...state,
+              threads: upsertComment(state.threads, editedComment),
+              optimisticUpdates: state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              )
+            }));
+          },
+          (err) => onMutationFailure(
+            err,
+            optimisticUpdateId,
+            (error) => new EditCommentError(error, {
+              roomId: room.id,
+              threadId,
+              commentId,
+              body
+            })
+          )
+        );
+      },
+      [room]
+    );
+  }
+  function useDeleteComment() {
+    const room = useRoom();
+    return React2.useCallback(
+      ({ threadId, commentId }) => {
+        const now = /* @__PURE__ */ new Date();
+        const optimisticUpdateId = nanoid2();
+        store.pushOptimisticUpdate({
+          type: "delete-comment",
+          threadId,
+          commentId,
+          deletedAt: now,
+          id: optimisticUpdateId
+        });
+        room.deleteComment({ threadId, commentId }).then(
+          () => {
+            const newThreads = { ...store.get().threads };
+            const thread = newThreads[threadId];
+            if (thread === void 0)
+              return;
+            newThreads[thread.id] = {
+              ...thread,
+              comments: thread.comments.map(
+                (comment) => comment.id === commentId ? {
+                  ...comment,
+                  deletedAt: now,
+                  body: void 0
+                } : comment
+              )
+            };
+            if (!newThreads[thread.id].comments.some(
+              (comment) => comment.deletedAt === void 0
+            )) {
+              delete newThreads[thread.id];
+            }
+            store.set((state) => ({
+              ...state,
+              threads: newThreads,
+              optimisticUpdates: state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              )
+            }));
+          },
+          (err) => onMutationFailure(
+            err,
+            optimisticUpdateId,
+            (error) => new DeleteCommentError(error, {
+              roomId: room.id,
+              threadId,
+              commentId
+            })
+          )
+        );
+      },
+      [room]
+    );
   }
-  function useRemoveReaction() {
+  const resolveMentionSuggestions = client[kInternal].resolveMentionSuggestions;
+  const mentionSuggestionsCache = /* @__PURE__ */ new Map();
+  function useMentionSuggestions(search) {
     const room = useRoom();
-    return commentsRoom.useRemoveReaction(room);
+    const [mentionSuggestions, setMentionSuggestions] = React2.useState();
+    const lastInvokedAt = React2.useRef();
+    React2.useEffect(() => {
+      if (search === void 0 || !resolveMentionSuggestions) {
+        return;
+      }
+      const resolveMentionSuggestionsArgs = { text: search, roomId: room.id };
+      const mentionSuggestionsCacheKey = stringify(
+        resolveMentionSuggestionsArgs
+      );
+      let debounceTimeout;
+      let isCanceled = false;
+      const getMentionSuggestions = async () => {
+        try {
+          lastInvokedAt.current = performance.now();
+          const mentionSuggestions2 = await resolveMentionSuggestions(
+            resolveMentionSuggestionsArgs
+          );
+          if (!isCanceled) {
+            setMentionSuggestions(mentionSuggestions2);
+            mentionSuggestionsCache.set(
+              mentionSuggestionsCacheKey,
+              mentionSuggestions2
+            );
+          }
+        } catch (error) {
+          console2.error(error?.message);
+        }
+      };
+      if (mentionSuggestionsCache.has(mentionSuggestionsCacheKey)) {
+        setMentionSuggestions(
+          mentionSuggestionsCache.get(mentionSuggestionsCacheKey)
+        );
+      } else if (!lastInvokedAt.current || Math.abs(performance.now() - lastInvokedAt.current) > MENTION_SUGGESTIONS_DEBOUNCE) {
+        void getMentionSuggestions();
+      } else {
+        debounceTimeout = window.setTimeout(() => {
+          void getMentionSuggestions();
+        }, MENTION_SUGGESTIONS_DEBOUNCE);
+      }
+      return () => {
+        isCanceled = true;
+        window.clearTimeout(debounceTimeout);
+      };
+    }, [room.id, search]);
+    return mentionSuggestions;
   }
-  function useCreateComment() {
-    const room = useRoom();
-    return commentsRoom.useCreateComment(room);
+  function useThreadSubscription(threadId) {
+    return useSyncExternalStoreWithSelector(
+      store.subscribe,
+      store.get,
+      store.get,
+      (state) => {
+        const inboxNotification = selectedInboxNotifications(state).find(
+          (inboxNotification2) => inboxNotification2.threadId === threadId
+        );
+        const thread = state.threads[threadId];
+        if (inboxNotification === void 0 || thread === void 0) {
+          return {
+            status: "not-subscribed"
+          };
+        }
+        return {
+          status: "subscribed",
+          unreadSince: inboxNotification.readAt
+        };
+      }
+    );
   }
-  function useEditComment() {
-    const room = useRoom();
-    return commentsRoom.useEditComment(room);
+  function useMarkThreadAsRead() {
+    return React2.useCallback((threadId) => {
+      const inboxNotification = Object.values(
+        store.get().inboxNotifications
+      ).find((inboxNotification2) => inboxNotification2.threadId === threadId);
+      if (!inboxNotification)
+        return;
+      const optimisticUpdateId = nanoid2();
+      const now = /* @__PURE__ */ new Date();
+      store.pushOptimisticUpdate({
+        type: "mark-inbox-notification-as-read",
+        id: optimisticUpdateId,
+        inboxNotificationId: inboxNotification.id,
+        readAt: now
+      });
+      client.markInboxNotificationAsRead(inboxNotification.id).then(
+        () => {
+          store.set((state) => ({
+            ...state,
+            inboxNotifications: {
+              ...state.inboxNotifications,
+              [inboxNotification.id]: {
+                ...inboxNotification,
+                readAt: now
+              }
+            },
+            optimisticUpdates: state.optimisticUpdates.filter(
+              (update) => update.id !== optimisticUpdateId
+            )
+          }));
+        },
+        (err) => {
+          onMutationFailure(
+            err,
+            optimisticUpdateId,
+            (error) => new MarkInboxNotificationAsReadError(error, {
+              inboxNotificationId: inboxNotification.id
+            })
+          );
+          return;
+        }
+      );
+    }, []);
+  }
+  function makeNotificationSettingsQueryKey(roomId) {
+    return `${roomId}:NOTIFICATION_SETTINGS`;
+  }
+  async function getInboxNotificationSettings(room, queryKey) {
+    const roomId = room.id;
+    return getOrInitRequest(
+      queryKey,
+      async () => {
+        const room2 = client.getRoom(roomId);
+        if (room2 === null) {
+          return;
+        }
+        return room2.getRoomNotificationSettings();
+      },
+      (settings) => {
+        if (settings !== void 0) {
+          store.set((state) => ({
+            ...state,
+            notificationSettings: {
+              ...state.notificationSettings,
+              [room.id]: settings
+            },
+            queries: {
+              ...state.queries,
+              [queryKey]: {
+                isLoading: false
+              }
+            }
+          }));
+        }
+      }
+    );
   }
-  function useDeleteComment() {
+  function useRoomNotificationSettings() {
     const room = useRoom();
-    return commentsRoom.useDeleteComment(room);
+    React2.useEffect(() => {
+      const queryKey = makeNotificationSettingsQueryKey(room.id);
+      void getInboxNotificationSettings(room, queryKey);
+      incrementQuerySubscribers(queryKey);
+      return () => decrementQuerySubscribers(queryKey);
+    }, [room]);
+    const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
+    return [
+      useSyncExternalStoreWithSelector(
+        store.subscribe,
+        store.get,
+        store.get,
+        (state) => {
+          const query = state.queries[makeNotificationSettingsQueryKey(room.id)];
+          if (query === void 0 || query.isLoading) {
+            return { isLoading: true };
+          }
+          if (query.error !== void 0) {
+            return { isLoading: false, error: query.error };
+          }
+          return {
+            isLoading: false,
+            settings: selectNotificationSettings(room.id, state)
+          };
+        }
+      ),
+      updateRoomNotificationSettings
+    ];
   }
-  const { resolveUsers, resolveMentionSuggestions } = options ?? {};
-  const usersCache = resolveUsers ? createAsyncCache(async (stringifiedOptions) => {
-    const users = await resolveUsers(
-      JSON.parse(stringifiedOptions)
-    );
-    return users?.[0];
-  }) : void 0;
-  function useUser(userId) {
+  function useRoomNotificationSettingsSuspense() {
+    const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
     const room = useRoom();
-    const resolverKey = React3.useMemo(
-      () => stringify2({ userIds: [userId], roomId: room.id }),
-      [userId, room.id]
-    );
-    const state = useAsyncCache(usersCache, resolverKey);
-    React3.useEffect(() => warnIfNoResolveUsers(usersCache), []);
-    if (state.isLoading) {
-      return {
-        isLoading: true
-      };
-    } else {
-      return {
-        user: state.data,
-        error: state.error,
-        isLoading: false
-      };
+    const queryKey = makeNotificationSettingsQueryKey(room.id);
+    const query = store.get().queries[queryKey];
+    if (query === void 0 || query.isLoading) {
+      throw getInboxNotificationSettings(room, queryKey);
+    }
+    if (query.error) {
+      throw query.error;
     }
+    React2.useEffect(() => {
+      const queryKey2 = makeNotificationSettingsQueryKey(room.id);
+      incrementQuerySubscribers(queryKey2);
+      return () => decrementQuerySubscribers(queryKey2);
+    }, [room]);
+    return [
+      useSyncExternalStoreWithSelector(
+        store.subscribe,
+        store.get,
+        store.get,
+        (state) => {
+          return {
+            isLoading: false,
+            settings: selectNotificationSettings(room.id, state)
+          };
+        }
+      ),
+      updateRoomNotificationSettings
+    ];
   }
-  function useUserSuspense(userId) {
+  function useUpdateRoomNotificationSettings() {
     const room = useRoom();
-    const resolverKey = React3.useMemo(
-      () => stringify2({ userIds: [userId], roomId: room.id }),
-      [userId, room.id]
+    return React2.useCallback(
+      (settings) => {
+        const optimisticUpdateId = nanoid2();
+        store.pushOptimisticUpdate({
+          id: optimisticUpdateId,
+          type: "update-notification-settings",
+          roomId: room.id,
+          settings
+        });
+        room.updateRoomNotificationSettings(settings).then(
+          (settings2) => {
+            store.set((state) => ({
+              ...state,
+              notificationSettings: {
+                [room.id]: settings2
+              },
+              optimisticUpdates: state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              )
+            }));
+          },
+          (err) => onMutationFailure(
+            err,
+            optimisticUpdateId,
+            (error) => new UpdateNotificationSettingsError(error, {
+              roomId: room.id
+            })
+          )
+        );
+      },
+      [room]
     );
-    const state = useAsyncCache(usersCache, resolverKey, {
-      suspense: true
-    });
-    React3.useEffect(() => warnIfNoResolveUsers(usersCache), []);
-    return {
-      user: state.data,
-      isLoading: false
-    };
   }
-  const mentionSuggestionsCache = createAsyncCache(
-    resolveMentionSuggestions ? (stringifiedOptions) => {
-      return resolveMentionSuggestions(
-        JSON.parse(stringifiedOptions)
-      );
-    } : () => Promise.resolve([])
-  );
-  function useMentionSuggestions(search) {
-    const room = useRoom();
-    const debouncedSearch = useDebounce(search, 500);
-    const resolverKey = React3.useMemo(
-      () => debouncedSearch !== void 0 ? stringify2({ text: debouncedSearch, roomId: room.id }) : null,
-      [debouncedSearch, room.id]
-    );
-    const { data } = useAsyncCache(mentionSuggestionsCache, resolverKey, {
-      keepPreviousDataWhileLoading: true
-    });
-    return data;
+  function useCurrentUserId() {
+    return useSelf((user) => typeof user.id === "string" ? user.id : null);
   }
   const bundle = {
     RoomContext,
@@ -1839,7 +1610,6 @@ function createRoomContext(client, options) {
     useOther,
     useMutation,
     useThreads,
-    useUser,
     useCreateThread,
     useEditThreadMetadata,
     useCreateComment,
@@ -1847,6 +1617,11 @@ function createRoomContext(client, options) {
     useDeleteComment,
     useAddReaction,
     useRemoveReaction,
+    useMarkThreadAsRead,
+    useThreadSubscription,
+    useRoomNotificationSettings,
+    useUpdateRoomNotificationSettings,
+    ...shared,
     suspense: {
       RoomContext,
       RoomProvider: RoomProviderOuter,
@@ -1878,31 +1653,483 @@ function createRoomContext(client, options) {
       useOther: useOtherSuspense,
       useMutation,
       useThreads: useThreadsSuspense,
-      useUser: useUserSuspense,
       useCreateThread,
       useEditThreadMetadata,
       useCreateComment,
       useEditComment,
       useDeleteComment,
       useAddReaction,
-      useRemoveReaction
+      useRemoveReaction,
+      useMarkThreadAsRead,
+      useThreadSubscription,
+      useRoomNotificationSettings: useRoomNotificationSettingsSuspense,
+      useUpdateRoomNotificationSettings,
+      ...shared.suspense
+    },
+    [kInternal]: {
+      useCurrentUserId,
+      hasResolveMentionSuggestions: resolveMentionSuggestions !== void 0,
+      useMentionSuggestions
     }
   };
-  const internalBundle = {
-    ...bundle,
-    hasResolveMentionSuggestions: resolveMentionSuggestions !== void 0,
-    useMentionSuggestions
+  return Object.defineProperty(bundle, kInternal, {
+    enumerable: false
+  });
+}
+function getCurrentUserId(room) {
+  const self = room.getSelf();
+  if (self === null || self.id === void 0) {
+    return "anonymous";
+  } else {
+    return self.id;
+  }
+}
+function handleApiError(err) {
+  const message = `Request failed with status ${err.status}: ${err.message}`;
+  if (err.details?.error === "FORBIDDEN") {
+    const detailedMessage = [message, err.details.suggestion, err.details.docs].filter(Boolean).join("\n");
+    console2.error(detailedMessage);
+  }
+  return new Error(message);
+}
+function generateQueryKey(roomId, options) {
+  return `${roomId}-${stringify(options ?? {})}`;
+}
+
+// src/shared.ts
+function useSharedContextBundle() {
+  const roomContextBundle = useContext2(ContextBundle);
+  const liveblocksContextBundle = useContext2(ContextBundle2);
+  if (roomContextBundle !== null) {
+    return roomContextBundle;
+  } else if (liveblocksContextBundle !== null) {
+    return liveblocksContextBundle;
+  } else {
+    throw new Error(
+      "LiveblocksProvider or RoomProvider are missing from the React tree."
+    );
+  }
+}
+function createSharedContext(client) {
+  const usersStore = client[kInternal2].usersStore;
+  const roomsInfoStore = client[kInternal2].roomsInfoStore;
+  function useUser(userId) {
+    const getUserState = useCallback2(
+      () => usersStore.getState(userId),
+      [userId]
+    );
+    useEffect4(() => {
+      void usersStore.get(userId);
+    }, [userId]);
+    const state = useSyncExternalStore2(
+      usersStore.subscribe,
+      getUserState,
+      getUserState
+    );
+    return state ? {
+      ...state,
+      user: state.data
+    } : { isLoading: true };
+  }
+  function useUserSuspense(userId) {
+    const getUserState = useCallback2(
+      () => usersStore.getState(userId),
+      [userId]
+    );
+    const userState = getUserState();
+    if (!userState || userState.isLoading) {
+      throw usersStore.get(userId);
+    }
+    if (userState.error) {
+      throw userState.error;
+    }
+    const state = useSyncExternalStore2(
+      usersStore.subscribe,
+      getUserState,
+      getUserState
+    );
+    return {
+      ...state,
+      user: state?.data
+    };
+  }
+  function useRoomInfo(roomId) {
+    const getRoomInfoState = useCallback2(
+      () => roomsInfoStore.getState(roomId),
+      [roomId]
+    );
+    useEffect4(() => {
+      void roomsInfoStore.get(roomId);
+    }, [roomId]);
+    const state = useSyncExternalStore2(
+      roomsInfoStore.subscribe,
+      getRoomInfoState,
+      getRoomInfoState
+    );
+    return state ? {
+      ...state,
+      info: state.data
+    } : { isLoading: true };
+  }
+  function useRoomInfoSuspense(roomId) {
+    const getRoomInfoState = useCallback2(
+      () => roomsInfoStore.getState(roomId),
+      [roomId]
+    );
+    const roomInfoState = getRoomInfoState();
+    if (!roomInfoState || roomInfoState.isLoading) {
+      throw usersStore.get(roomId);
+    }
+    if (roomInfoState.error) {
+      throw roomInfoState.error;
+    }
+    const state = useSyncExternalStore2(
+      usersStore.subscribe,
+      getRoomInfoState,
+      getRoomInfoState
+    );
+    return {
+      ...state,
+      info: state?.data
+    };
+  }
+  const bundle = {
+    useUser,
+    useRoomInfo,
+    suspense: {
+      useUser: useUserSuspense,
+      useRoomInfo: useRoomInfoSuspense
+    }
   };
   return bundle;
 }
 
+// src/liveblocks.tsx
+var ContextBundle2 = createContext2(null);
+function useLiveblocksContextBundle() {
+  const bundle = useContext3(ContextBundle2);
+  if (bundle === null) {
+    throw new Error("LiveblocksProvider is missing from the React tree.");
+  }
+  return bundle;
+}
+function createLiveblocksContext(client) {
+  const shared = createSharedContext(client);
+  const store = client[kInternal3].cacheStore;
+  function LiveblocksProvider(props) {
+    return /* @__PURE__ */ React3.createElement(
+      ContextBundle2.Provider,
+      {
+        value: bundle
+      },
+      props.children
+    );
+  }
+  let fetchInboxNotificationsRequest = null;
+  let inboxNotificationsSubscribers = 0;
+  const INBOX_NOTIFICATIONS_QUERY = "INBOX_NOTIFICATIONS";
+  const POLLING_INTERVAL2 = 60 * 1e3;
+  const poller = makePoller2(refreshThreadsAndNotifications);
+  function refreshThreadsAndNotifications() {
+    return client.getInboxNotifications().then(
+      ({ threads, inboxNotifications }) => {
+        store.updateThreadsAndNotifications(
+          threads,
+          inboxNotifications,
+          INBOX_NOTIFICATIONS_QUERY
+        );
+      },
+      () => {
+      }
+    );
+  }
+  function incrementInboxNotificationsSubscribers() {
+    inboxNotificationsSubscribers++;
+    poller.start(POLLING_INTERVAL2);
+  }
+  function decrementInboxNotificationsSubscribers() {
+    if (inboxNotificationsSubscribers <= 0) {
+      console.warn(
+        `Internal unexpected behavior. Cannot decrease subscriber count for query "${INBOX_NOTIFICATIONS_QUERY}"`
+      );
+      return;
+    }
+    inboxNotificationsSubscribers--;
+    if (inboxNotificationsSubscribers <= 0) {
+      poller.stop();
+    }
+  }
+  async function fetchInboxNotifications() {
+    if (fetchInboxNotificationsRequest) {
+      return fetchInboxNotificationsRequest;
+    }
+    store.setQueryState(INBOX_NOTIFICATIONS_QUERY, {
+      isLoading: true
+    });
+    try {
+      fetchInboxNotificationsRequest = client.getInboxNotifications();
+      const { inboxNotifications, threads } = await fetchInboxNotificationsRequest;
+      store.updateThreadsAndNotifications(
+        threads,
+        inboxNotifications,
+        INBOX_NOTIFICATIONS_QUERY
+      );
+    } catch (er) {
+      store.setQueryState(INBOX_NOTIFICATIONS_QUERY, {
+        isLoading: false,
+        error: er
+      });
+    }
+    return;
+  }
+  function useInboxNotifications() {
+    useEffect5(() => {
+      void fetchInboxNotifications();
+      incrementInboxNotificationsSubscribers();
+      return () => decrementInboxNotificationsSubscribers();
+    });
+    const result = useSyncExternalStoreWithSelector2(
+      store.subscribe,
+      store.get,
+      store.get,
+      (state) => {
+        const query = state.queries[INBOX_NOTIFICATIONS_QUERY];
+        if (query === void 0 || query.isLoading) {
+          return {
+            isLoading: true
+          };
+        }
+        if (query.error !== void 0) {
+          return {
+            error: query.error,
+            isLoading: false
+          };
+        }
+        return {
+          inboxNotifications: selectedInboxNotifications(state),
+          isLoading: false
+        };
+      }
+    );
+    return result;
+  }
+  function useInboxNotificationsSuspense() {
+    if (store.get().queries[INBOX_NOTIFICATIONS_QUERY] === void 0 || store.get().queries[INBOX_NOTIFICATIONS_QUERY].isLoading) {
+      throw fetchInboxNotifications();
+    }
+    React3.useEffect(() => {
+      incrementInboxNotificationsSubscribers();
+      return () => {
+        decrementInboxNotificationsSubscribers();
+      };
+    }, []);
+    return useSyncExternalStoreWithSelector2(
+      store.subscribe,
+      store.get,
+      store.get,
+      (state) => {
+        return {
+          inboxNotifications: selectedInboxNotifications(state),
+          isLoading: false
+        };
+      }
+    );
+  }
+  function selectUnreadInboxNotificationsCount(state) {
+    let count = 0;
+    for (const notification of selectedInboxNotifications(state)) {
+      if (notification.readAt === null || notification.readAt < notification.notifiedAt) {
+        count++;
+      }
+    }
+    return count;
+  }
+  function useUnreadInboxNotificationsCount() {
+    useEffect5(() => {
+      void fetchInboxNotifications();
+      incrementInboxNotificationsSubscribers();
+      return () => decrementInboxNotificationsSubscribers();
+    });
+    return useSyncExternalStoreWithSelector2(
+      store.subscribe,
+      store.get,
+      store.get,
+      (state) => {
+        const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
+        if (query === void 0 || query.isLoading) {
+          return {
+            isLoading: true
+          };
+        }
+        if (query.error !== void 0) {
+          return {
+            error: query.error,
+            isLoading: false
+          };
+        }
+        return {
+          isLoading: false,
+          count: selectUnreadInboxNotificationsCount(state)
+        };
+      }
+    );
+  }
+  function useUnreadInboxNotificationsCountSuspense() {
+    if (store.get().queries[INBOX_NOTIFICATIONS_QUERY] === void 0 || store.get().queries[INBOX_NOTIFICATIONS_QUERY].isLoading) {
+      throw fetchInboxNotifications();
+    }
+    React3.useEffect(() => {
+      incrementInboxNotificationsSubscribers();
+      return () => {
+        decrementInboxNotificationsSubscribers();
+      };
+    }, []);
+    return useSyncExternalStoreWithSelector2(
+      store.subscribe,
+      store.get,
+      store.get,
+      (state) => {
+        return {
+          isLoading: false,
+          count: selectUnreadInboxNotificationsCount(state)
+        };
+      }
+    );
+  }
+  function useMarkInboxNotificationAsRead() {
+    return useCallback3((inboxNotificationId) => {
+      const optimisticUpdateId = nanoid3();
+      const readAt = /* @__PURE__ */ new Date();
+      store.pushOptimisticUpdate({
+        type: "mark-inbox-notification-as-read",
+        id: optimisticUpdateId,
+        inboxNotificationId,
+        readAt
+      });
+      client.markInboxNotificationAsRead(inboxNotificationId).then(
+        () => {
+          store.set((state) => ({
+            ...state,
+            inboxNotifications: {
+              ...state.inboxNotifications,
+              [inboxNotificationId]: {
+                // TODO: Handle potential deleted inbox notification
+                ...state.inboxNotifications[inboxNotificationId],
+                readAt
+              }
+            },
+            optimisticUpdates: state.optimisticUpdates.filter(
+              (update) => update.id !== optimisticUpdateId
+            )
+          }));
+        },
+        () => {
+          store.set((state) => ({
+            ...state,
+            optimisticUpdates: state.optimisticUpdates.filter(
+              (update) => update.id !== optimisticUpdateId
+            )
+          }));
+        }
+      );
+    }, []);
+  }
+  function useMarkAllInboxNotificationsAsRead() {
+    return useCallback3(() => {
+      const optimisticUpdateId = nanoid3();
+      const readAt = /* @__PURE__ */ new Date();
+      store.pushOptimisticUpdate({
+        type: "mark-inbox-notifications-as-read",
+        id: optimisticUpdateId,
+        readAt
+      });
+      client.markAllInboxNotificationsAsRead().then(
+        () => {
+          store.set((state) => ({
+            ...state,
+            inboxNotifications: Object.fromEntries(
+              Array.from(Object.entries(state.inboxNotifications)).map(
+                ([id, inboxNotification]) => [
+                  id,
+                  { ...inboxNotification, readAt }
+                ]
+              )
+            ),
+            optimisticUpdates: state.optimisticUpdates.filter(
+              (update) => update.id !== optimisticUpdateId
+            )
+          }));
+        },
+        () => {
+          store.set((state) => ({
+            ...state,
+            optimisticUpdates: state.optimisticUpdates.filter(
+              (update) => update.id !== optimisticUpdateId
+            )
+          }));
+        }
+      );
+    }, []);
+  }
+  function useThreadFromCache(threadId) {
+    return useSyncExternalStoreWithSelector2(
+      store.subscribe,
+      store.get,
+      store.get,
+      (state) => {
+        const thread = state.threads[threadId];
+        if (thread === void 0) {
+          throw new Error(
+            `Internal error: thread with id "${threadId}" not found in cache`
+          );
+        }
+        return thread;
+      }
+    );
+  }
+  const currentUserIdStore = client[kInternal3].currentUserIdStore;
+  function useCurrentUserId() {
+    return useSyncExternalStore3(
+      currentUserIdStore.subscribe,
+      currentUserIdStore.get,
+      currentUserIdStore.get
+    );
+  }
+  const bundle = {
+    LiveblocksProvider,
+    useInboxNotifications,
+    useUnreadInboxNotificationsCount,
+    useMarkInboxNotificationAsRead,
+    useMarkAllInboxNotificationsAsRead,
+    ...shared,
+    suspense: {
+      LiveblocksProvider,
+      useInboxNotifications: useInboxNotificationsSuspense,
+      useUnreadInboxNotificationsCount: useUnreadInboxNotificationsCountSuspense,
+      useMarkInboxNotificationAsRead,
+      useMarkAllInboxNotificationsAsRead,
+      ...shared.suspense
+    },
+    [kInternal3]: {
+      useThreadFromCache,
+      useCurrentUserId
+    }
+  };
+  return Object.defineProperty(bundle, kInternal3, {
+    enumerable: false
+  });
+}
+
 // src/index.ts
 import { shallow as shallow2 } from "@liveblocks/client";
 detectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);
 export {
   ClientSideSuspense,
+  createLiveblocksContext,
   createRoomContext,
   shallow2 as shallow,
-  useRoomContextBundle
+  useLiveblocksContextBundle,
+  useRoomContextBundle,
+  useSharedContextBundle
 };
 //# sourceMappingURL=index.mjs.map