@liveblocks/react 1.11.2 → 1.12.0-lexical2

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.11.2";
+var PKG_VERSION = "1.12.0-lexical2";
 var PKG_FORMAT = "esm";
 
 // src/ClientSideSuspense.tsx
@@ -18,68 +18,6 @@ function ClientSideSuspense(props) {
   return /* @__PURE__ */ React.createElement(React.Suspense, { fallback: props.fallback }, mounted ? props.children() : props.fallback);
 }
 
-// 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).sort(
-    // Sort so that the most recent notifications are first
-    (a, b) => b.notifiedAt.getTime() - a.notifiedAt.getTime()
-  );
-}
-
-// src/lib/retry-error.ts
-var MAX_ERROR_RETRY_COUNT = 5;
-var ERROR_RETRY_INTERVAL = 5e3;
-function retryError(action, retryCount) {
-  if (retryCount >= MAX_ERROR_RETRY_COUNT)
-    return;
-  const timeout = Math.pow(2, retryCount) * ERROR_RETRY_INTERVAL;
-  setTimeout(() => {
-    void action();
-  }, timeout);
-}
-
-// 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 {
-  addReaction,
-  CommentsApiError,
-  console as console2,
-  deleteComment,
-  deprecateIf,
-  errorIf,
-  isLiveNode,
-  kInternal,
-  makeEventSource,
-  makePoller,
-  NotificationsApiError,
-  removeReaction,
-  ServerMsgCode,
-  stringify,
-  upsertComment
-} from "@liveblocks/core";
-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
 var CreateThreadError = class extends Error {
   constructor(cause, context) {
@@ -154,53 +92,28 @@ var UpdateNotificationSettingsError = class extends Error {
   }
 };
 
-// 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 createThreadId() {
-  return createOptimisticId(THREAD_ID_PREFIX);
-}
-function createCommentId() {
-  return createOptimisticId(COMMENT_ID_PREFIX);
-}
-
-// src/comments/lib/select-notification-settings.ts
-import {
-  applyOptimisticUpdates as applyOptimisticUpdates2,
-  nn
-} from "@liveblocks/core";
-function selectNotificationSettings(roomId, state) {
-  const { notificationSettings } = applyOptimisticUpdates2(state);
-  return nn(notificationSettings[roomId]);
-}
+// src/liveblocks.tsx
+import { kInternal as kInternal3, makePoller as makePoller2, raise as raise2 } from "@liveblocks/core";
+import { nanoid as nanoid2 } from "nanoid";
+import React4, {
+  createContext as createContext2,
+  useCallback as useCallback3,
+  useContext as useContext2,
+  useEffect as useEffect6
+} 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-threads.ts
-import {
-  applyOptimisticUpdates as applyOptimisticUpdates3
-} from "@liveblocks/core";
-function selectedThreads(roomId, state, options) {
-  const result = applyOptimisticUpdates3(state);
-  const threads = Object.values(result.threads).filter((thread) => {
-    if (thread.roomId !== roomId)
-      return false;
-    if (thread.deletedAt !== void 0) {
-      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 true;
-  });
-  return threads.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime());
+// src/lib/retry-error.ts
+var MAX_ERROR_RETRY_COUNT = 5;
+var ERROR_RETRY_INTERVAL = 5e3;
+function retryError(action, retryCount) {
+  if (retryCount >= MAX_ERROR_RETRY_COUNT)
+    return;
+  const timeout = Math.pow(2, retryCount) * ERROR_RETRY_INTERVAL;
+  setTimeout(() => {
+    void action();
+  }, timeout);
 }
 
 // src/lib/use-initial.ts
@@ -209,6 +122,34 @@ function useInitial(value) {
   return useState2(value)[0];
 }
 
+// src/shared.ts
+import { kInternal as kInternal2, raise } from "@liveblocks/core";
+import { useCallback as useCallback2, useEffect as useEffect5 } from "react";
+import { useSyncExternalStore as useSyncExternalStore2 } from "use-sync-external-store/shim/index.js";
+
+// src/room.tsx
+import { shallow } from "@liveblocks/client";
+import {
+  addReaction,
+  CommentsApiError,
+  console as console2,
+  deleteComment,
+  deprecateIf,
+  errorIf,
+  isLiveNode,
+  kInternal,
+  makeEventSource,
+  makePoller,
+  NotificationsApiError,
+  removeReaction,
+  ServerMsgCode,
+  stringify,
+  upsertComment
+} from "@liveblocks/core";
+import { nanoid } from "nanoid";
+import * as React3 from "react";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector.js";
+
 // src/lib/use-latest.ts
 import { useEffect as useEffect2, useRef } from "react";
 function useLatest(value) {
@@ -232,7 +173,46 @@ function useRerender() {
   return update;
 }
 
+// src/use-scroll-to-comment-on-load-effect.ts
+import * as React2 from "react";
+function handleScrollToCommentOnLoad(shouldScrollOnLoad, state) {
+  if (shouldScrollOnLoad === false)
+    return;
+  if (state.isLoading)
+    return;
+  const isWindowDefined = typeof window !== "undefined";
+  if (!isWindowDefined)
+    return;
+  const hash = window.location.hash;
+  const commentId = hash.slice(1);
+  if (!commentId.startsWith("cm_"))
+    return;
+  const comment = document.getElementById(commentId);
+  if (comment === null)
+    return;
+  const comments = state.threads.flatMap((thread) => thread.comments);
+  const isCommentInThreads = comments.some(
+    (comment2) => comment2.id === commentId
+  );
+  if (!isCommentInThreads)
+    return;
+  comment.scrollIntoView();
+}
+function useScrollToCommentOnLoadEffect(shouldScrollOnLoad, state) {
+  React2.useEffect(
+    () => {
+      handleScrollToCommentOnLoad(shouldScrollOnLoad, state);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to run this effect once
+    [state.isLoading]
+  );
+}
+
 // src/room.tsx
+var ThreadCreateCallbackContext = React3.createContext(null);
+var ThreadDeleteCallbackContext = React3.createContext(null);
+var ComposerFocusCallbackContext = React3.createContext(null);
+var IsThreadActiveCallbackContext = React3.createContext(null);
 var noop = () => {
 };
 var identity = (x) => x;
@@ -254,236 +234,662 @@ function useSyncExternalStore(s, gs, gss) {
 var STABLE_EMPTY_LIST = Object.freeze([]);
 var POLLING_INTERVAL = 5 * 60 * 1e3;
 var MENTION_SUGGESTIONS_DEBOUNCE = 500;
+function makeNotificationSettingsQueryKey(roomId) {
+  return `${roomId}:NOTIFICATION_SETTINGS`;
+}
 function alwaysEmptyList() {
   return STABLE_EMPTY_LIST;
 }
 function alwaysNull() {
   return null;
 }
+function selectorFor_useOthersConnectionIds(others) {
+  return others.map((user) => user.connectionId);
+}
 function makeMutationContext(room) {
-  const errmsg = "This mutation cannot be used until connected to the Liveblocks room";
+  const cannotUseUntil = "This mutation cannot be used until";
+  const needsPresence = `${cannotUseUntil} connected to the Liveblocks room`;
+  const needsStorage = `${cannotUseUntil} storage has been loaded`;
   return {
     get storage() {
       const mutableRoot = room.getStorageSnapshot();
       if (mutableRoot === null) {
-        throw new Error(errmsg);
+        throw new Error(needsStorage);
       }
       return mutableRoot;
     },
     get self() {
       const self = room.getSelf();
       if (self === null) {
-        throw new Error(errmsg);
+        throw new Error(needsPresence);
       }
       return self;
     },
     get others() {
       const others = room.getOthers();
       if (room.getSelf() === null) {
-        throw new Error(errmsg);
+        throw new Error(needsPresence);
       }
       return others;
     },
     setMyPresence: room.updatePresence
   };
 }
-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 getCurrentUserId(room) {
+  const self = room.getSelf();
+  if (self === null || self.id === void 0) {
+    return "anonymous";
+  } else {
+    return self.id;
   }
-  return bundle;
 }
-function createRoomContext(client, options) {
-  if (options?.resolveUsers) {
-    throw new Error(
-      "The 'resolveUsers' option has moved to 'createClient' from '@liveblocks/client'. Please refer to our Upgrade Guide to learn more, see https://liveblocks.io/docs/platform/upgrading/1.10."
-    );
+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);
   }
-  if (options?.resolveMentionSuggestions) {
-    throw new Error(
-      "The 'resolveMentionSuggestions' option has moved to 'createClient' from '@liveblocks/client'. Please refer to our Upgrade Guide to learn more, see https://liveblocks.io/docs/platform/upgrading/1.10."
-    );
+  return new Error(message);
+}
+var _extras = /* @__PURE__ */ new WeakMap();
+var _bundles = /* @__PURE__ */ new WeakMap();
+function getOrCreateRoomContextBundle(client) {
+  let bundle = _bundles.get(client);
+  if (!bundle) {
+    bundle = makeRoomContextBundle(client);
+    _bundles.set(client, bundle);
   }
-  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, 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__ */ React2.createElement(RoomProviderInner, { ...props, stableEnterRoom });
+  return bundle;
+}
+function getExtrasForClient(client) {
+  let extras = _extras.get(client);
+  if (!extras) {
+    extras = makeExtrasForClient(client);
+    _extras.set(client, extras);
+  }
+  return extras;
+}
+function makeExtrasForClient(client) {
+  const store = client[kInternal].cacheStore;
+  const DEFAULT_DEDUPING_INTERVAL = 2e3;
+  const lastRequestedAtByRoom = /* @__PURE__ */ new Map();
+  const requestsByQuery = /* @__PURE__ */ new Map();
+  const requestStatusByRoom = /* @__PURE__ */ new Map();
+  const subscribersByQuery = /* @__PURE__ */ new Map();
+  const mentionSuggestionsCache = /* @__PURE__ */ new Map();
+  const poller = makePoller(refreshThreadsAndNotifications);
+  async function refreshThreadsAndNotifications() {
+    const requests = [];
+    client[kInternal].getRoomIds().map((roomId) => {
+      const room = client.getRoom(roomId);
+      if (room === null)
+        return;
+      requests.push(getThreadsUpdates(room.id));
+    });
+    await Promise.allSettled(requests);
   }
-  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"
+  function incrementQuerySubscribers(queryKey) {
+    const subscribers = subscribersByQuery.get(queryKey) ?? 0;
+    subscribersByQuery.set(queryKey, subscribers + 1);
+    poller.start(POLLING_INTERVAL);
+    return () => {
+      const subscribers2 = subscribersByQuery.get(queryKey);
+      if (subscribers2 === void 0 || subscribers2 <= 0) {
+        console2.warn(
+          `Internal unexpected behavior. Cannot decrease subscriber count for query "${queryKey}"`
         );
+        return;
       }
-      if (typeof roomId !== "string") {
-        throw new Error("RoomProvider id property should be a string.");
+      subscribersByQuery.set(queryKey, subscribers2 - 1);
+      let totalSubscribers = 0;
+      for (const subscribers3 of subscribersByQuery.values()) {
+        totalSubscribers += subscribers3;
       }
-      const majorReactVersion = parseInt(React2.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
+      if (totalSubscribers <= 0) {
+        poller.stop();
+      }
+    };
+  }
+  async function getThreadsUpdates(roomId) {
+    const room = client.getRoom(roomId);
+    if (room === null)
+      return;
+    const since = lastRequestedAtByRoom.get(room.id);
+    if (since === void 0)
+      return;
+    const isFetchingThreadsUpdates = requestStatusByRoom.get(room.id) ?? false;
+    if (isFetchingThreadsUpdates === true)
+      return;
+    try {
+      requestStatusByRoom.set(room.id, true);
+      const updates = await room[kInternal].comments.getThreads({ since });
+      setTimeout(() => {
+        requestStatusByRoom.set(room.id, false);
+      }, DEFAULT_DEDUPING_INTERVAL);
+      store.updateThreadsAndNotifications(
+        updates.threads,
+        updates.inboxNotifications,
+        updates.deletedThreads,
+        updates.deletedInboxNotifications
       );
+      lastRequestedAtByRoom.set(room.id, updates.meta.requestedAt);
+    } catch (err) {
+      requestStatusByRoom.set(room.id, false);
+      return;
     }
-    const frozenProps = useInitial({
-      initialPresence: props.initialPresence,
-      initialStorage: props.initialStorage,
-      unstable_batchedUpdates: props.unstable_batchedUpdates,
-      autoConnect: props.autoConnect ?? props.shouldInitiallyConnect ?? typeof window !== "undefined"
+  }
+  async function getThreadsAndInboxNotifications(room, queryKey, options, { retryCount } = { retryCount: 0 }) {
+    const existingRequest = requestsByQuery.get(queryKey);
+    if (existingRequest !== void 0)
+      return existingRequest;
+    const commentsAPI = room[kInternal].comments;
+    const request = commentsAPI.getThreads(options);
+    requestsByQuery.set(queryKey, request);
+    store.setQueryState(queryKey, {
+      isLoading: true
     });
-    const [{ room }, setRoomLeavePair] = React2.useState(
-      () => stableEnterRoom(roomId, {
-        ...frozenProps,
-        autoConnect: false
-        // Deliberately using false here on the first render, see below
-      })
-    );
-    React2.useEffect(() => {
-      async function handleCommentEvent(message) {
-        const info = await room[kInternal].comments.getThread({
-          threadId: message.threadId
-        });
-        if (!info) {
-          store.deleteThread(message.threadId);
-          return;
-        }
-        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;
-        }
-      }
-      return room.events.comments.subscribe(
-        (message) => void handleCommentEvent(message)
+    try {
+      const result = await request;
+      store.updateThreadsAndNotifications(
+        result.threads,
+        result.inboxNotifications,
+        result.deletedThreads,
+        result.deletedInboxNotifications,
+        queryKey
       );
-    }, [room]);
-    React2.useEffect(() => {
-      void getThreadsUpdates(room.id);
-    }, [room.id]);
-    React2.useEffect(() => {
-      function handleIsOnline() {
-        void getThreadsUpdates(room.id);
-      }
-      window.addEventListener("online", handleIsOnline);
-      return () => {
-        window.removeEventListener("online", handleIsOnline);
-      };
-    }, [room.id]);
-    React2.useEffect(() => {
-      const pair = stableEnterRoom(roomId, frozenProps);
-      setRoomLeavePair(pair);
-      const { room: room2, leave } = pair;
-      if (frozenProps.autoConnect) {
-        room2.connect();
+      const lastRequestedAt = lastRequestedAtByRoom.get(room.id);
+      if (lastRequestedAt === void 0 || lastRequestedAt > result.meta.requestedAt) {
+        lastRequestedAtByRoom.set(room.id, result.meta.requestedAt);
       }
-      return () => {
-        leave();
-      };
-    }, [roomId, frozenProps, stableEnterRoom]);
-    return /* @__PURE__ */ React2.createElement(RoomContext.Provider, { value: room }, /* @__PURE__ */ React2.createElement(
-      ContextBundle.Provider,
-      {
-        value: bundle
-      },
-      props.children
-    ));
-  }
-  function connectionIdSelector(others) {
-    return others.map((user) => user.connectionId);
-  }
-  function useRoom() {
-    const room = React2.useContext(RoomContext);
-    if (room === null) {
-      throw new Error("RoomProvider is missing from the React tree.");
+      poller.start(POLLING_INTERVAL);
+    } catch (err) {
+      requestsByQuery.delete(queryKey);
+      retryError(() => {
+        void getThreadsAndInboxNotifications(room, queryKey, options, {
+          retryCount: retryCount + 1
+        });
+      }, retryCount);
+      store.setQueryState(queryKey, {
+        isLoading: false,
+        error: err
+      });
     }
-    return room;
-  }
-  function useStatus() {
-    const room = useRoom();
-    const subscribe = room.events.status.subscribe;
-    const getSnapshot = room.getStatus;
-    const getServerSnapshot = room.getStatus;
-    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    return;
   }
-  function useMyPresence() {
-    const room = useRoom();
-    const subscribe = room.events.myPresence.subscribe;
-    const getSnapshot = room.getPresence;
-    const presence = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-    const setPresence = room.updatePresence;
-    return [presence, setPresence];
+  async function getInboxNotificationSettings(room, queryKey, { retryCount } = { retryCount: 0 }) {
+    const existingRequest = requestsByQuery.get(queryKey);
+    if (existingRequest !== void 0)
+      return existingRequest;
+    try {
+      const request = room[kInternal].notifications.getRoomNotificationSettings();
+      requestsByQuery.set(queryKey, request);
+      store.setQueryState(queryKey, {
+        isLoading: true
+      });
+      const settings = await request;
+      store.updateRoomInboxNotificationSettings(room.id, settings, queryKey);
+    } catch (err) {
+      requestsByQuery.delete(queryKey);
+      retryError(() => {
+        void getInboxNotificationSettings(room, queryKey, {
+          retryCount: retryCount + 1
+        });
+      }, retryCount);
+      store.setQueryState(queryKey, {
+        isLoading: false,
+        error: err
+      });
+    }
+    return;
   }
-  function useUpdateMyPresence() {
-    return useRoom().updatePresence;
+  const commentsErrorEventSource = makeEventSource();
+  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;
   }
-  function useOthers(selector, isEqual) {
+  function useMentionSuggestions(search) {
     const room = useRoom();
-    const subscribe = room.events.others.subscribe;
-    const getSnapshot = room.getOthers;
-    const getServerSnapshot = alwaysEmptyList;
-    return useSyncExternalStoreWithSelector(
-      subscribe,
-      getSnapshot,
-      getServerSnapshot,
-      selector ?? identity,
-      isEqual
-    );
+    const [mentionSuggestions, setMentionSuggestions] = React3.useState();
+    const lastInvokedAt = React3.useRef();
+    React3.useEffect(() => {
+      const resolveMentionSuggestions = client[kInternal].resolveMentionSuggestions;
+      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;
+  }
+  return {
+    store,
+    incrementQuerySubscribers,
+    commentsErrorEventSource,
+    getThreadsUpdates,
+    getThreadsAndInboxNotifications,
+    getInboxNotificationSettings,
+    useMentionSuggestions,
+    onMutationFailure
+  };
+}
+var RoomContext = React3.createContext(null);
+function makeRoomContextBundle(client) {
+  function RoomProvider_withImplicitLiveblocksProvider(props) {
+    return /* @__PURE__ */ React3.createElement(LiveblocksProvider, { client }, /* @__PURE__ */ React3.createElement(RoomProvider, { ...props }));
   }
-  function useOthersConnectionIds() {
-    return useOthers(connectionIdSelector, shallow);
+  const { useMentionSuggestions } = getExtrasForClient(client);
+  const shared = createSharedContext(client);
+  const bundle = {
+    RoomContext,
+    RoomProvider: RoomProvider_withImplicitLiveblocksProvider,
+    useRoom,
+    useStatus,
+    useBatch,
+    useBroadcastEvent,
+    useOthersListener,
+    useLostConnectionListener,
+    useErrorListener,
+    useEventListener,
+    useHistory,
+    useUndo,
+    useRedo,
+    useCanRedo,
+    useCanUndo,
+    // These are just aliases. The passed-in key will define their return values.
+    useList: useLegacyKey,
+    useMap: useLegacyKey,
+    useObject: useLegacyKey,
+    useStorageRoot,
+    useStorage: make_useStorage(),
+    useSelf,
+    useMyPresence,
+    useUpdateMyPresence,
+    useOthers,
+    useOthersMapped: make_useOthersMapped(),
+    useOthersConnectionIds,
+    useOther: make_useOther(),
+    useMutation: make_useMutation(),
+    useThreads,
+    useCreateThread,
+    useEditThreadMetadata,
+    useCreateComment,
+    useEditComment,
+    useDeleteComment,
+    useAddReaction,
+    useRemoveReaction,
+    useMarkThreadAsRead,
+    useThreadSubscription,
+    useRoomNotificationSettings,
+    useUpdateRoomNotificationSettings,
+    ...shared.classic,
+    suspense: {
+      RoomContext,
+      RoomProvider: RoomProvider_withImplicitLiveblocksProvider,
+      useRoom,
+      useStatus,
+      useBatch,
+      useBroadcastEvent,
+      useOthersListener,
+      useLostConnectionListener,
+      useErrorListener,
+      useEventListener,
+      useHistory,
+      useUndo,
+      useRedo,
+      useCanRedo,
+      useCanUndo,
+      // Legacy hooks
+      useList: useLegacyKeySuspense,
+      useMap: useLegacyKeySuspense,
+      useObject: useLegacyKeySuspense,
+      useStorageRoot,
+      useStorage: make_useStorageSuspense(),
+      useSelf: useSelfSuspense,
+      useMyPresence,
+      useUpdateMyPresence,
+      useOthers: make_useOthersSuspense(),
+      useOthersMapped: make_useOthersMappedSuspense(),
+      useOthersConnectionIds: useOthersConnectionIdsSuspense,
+      useOther: make_useOtherSuspense(),
+      useMutation: make_useMutation(),
+      useThreads: useThreadsSuspense,
+      useCreateThread,
+      useEditThreadMetadata,
+      useCreateComment,
+      useEditComment,
+      useDeleteComment,
+      useAddReaction,
+      useRemoveReaction,
+      useMarkThreadAsRead,
+      useThreadSubscription,
+      useRoomNotificationSettings: useRoomNotificationSettingsSuspense,
+      useUpdateRoomNotificationSettings,
+      ...shared.suspense
+    },
+    [kInternal]: {
+      useCurrentUserId,
+      useMentionSuggestions,
+      useCommentsErrorListener,
+      ThreadCreateCallbackProvider: ThreadCreateCallbackContext.Provider,
+      useThreadCreateCallback,
+      ThreadDeleteCallbackProvider: ThreadDeleteCallbackContext.Provider,
+      useThreadDeleteCallback,
+      ComposerFocusCallbackProvider: ComposerFocusCallbackContext.Provider,
+      useComposerFocusCallback,
+      IsThreadActiveCallbackProvider: IsThreadActiveCallbackContext.Provider,
+      useIsThreadActiveCallback
+    }
+  };
+  return Object.defineProperty(bundle, kInternal, {
+    enumerable: false
+  });
+}
+function RoomProvider(props) {
+  const client = useClient();
+  const [cache] = React3.useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const stableEnterRoom = React3.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;
+    },
+    [client, cache]
+  );
+  return /* @__PURE__ */ React3.createElement(RoomProviderInner, { ...props, stableEnterRoom });
+}
+function RoomProviderInner(props) {
+  const client = useClient();
+  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 { store } = getExtrasForClient(client);
+    async function handleCommentEvent(message) {
+      const info = await room[kInternal].comments.getThread({
+        threadId: message.threadId
+      });
+      if (!info) {
+        store.deleteThread(message.threadId);
+        return;
+      }
+      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;
+      }
+    }
+    return room.events.comments.subscribe(
+      (message) => void handleCommentEvent(message)
+    );
+  }, [client, room]);
+  React3.useEffect(() => {
+    const { getThreadsUpdates } = getExtrasForClient(client);
+    void getThreadsUpdates(room.id);
+  }, [client, room.id]);
+  React3.useEffect(() => {
+    function handleIsOnline() {
+      const { getThreadsUpdates } = getExtrasForClient(client);
+      void getThreadsUpdates(room.id);
+    }
+    window.addEventListener("online", handleIsOnline);
+    return () => {
+      window.removeEventListener("online", handleIsOnline);
+    };
+  }, [client, room.id]);
+  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 }, props.children);
+}
+function useRoom() {
+  const room = React3.useContext(RoomContext);
+  if (room === null) {
+    throw new Error("RoomProvider is missing from the React tree.");
   }
-  function useOthersMapped(itemSelector, itemIsEqual) {
-    const wrappedSelector = React2.useCallback(
+  return room;
+}
+function useStatus() {
+  const room = useRoom();
+  const subscribe = room.events.status.subscribe;
+  const getSnapshot = room.getStatus;
+  const getServerSnapshot = room.getStatus;
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+function useBatch() {
+  return useRoom().batch;
+}
+function useBroadcastEvent() {
+  const room = useRoom();
+  return React3.useCallback(
+    (event, options = { shouldQueueEventIfNotReady: false }) => {
+      room.broadcastEvent(event, options);
+    },
+    [room]
+  );
+}
+function useOthersListener(callback) {
+  const room = useRoom();
+  const savedCallback = useLatest(callback);
+  React3.useEffect(
+    () => room.events.others.subscribe((event) => savedCallback.current(event)),
+    [room, savedCallback]
+  );
+}
+function useLostConnectionListener(callback) {
+  const room = useRoom();
+  const savedCallback = useLatest(callback);
+  React3.useEffect(
+    () => room.events.lostConnection.subscribe(
+      (event) => savedCallback.current(event)
+    ),
+    [room, savedCallback]
+  );
+}
+function useErrorListener(callback) {
+  const room = useRoom();
+  const savedCallback = useLatest(callback);
+  React3.useEffect(
+    () => room.events.error.subscribe((e) => savedCallback.current(e)),
+    [room, savedCallback]
+  );
+}
+function useEventListener(callback) {
+  const room = useRoom();
+  const savedCallback = useLatest(callback);
+  React3.useEffect(() => {
+    const listener = (eventData) => {
+      savedCallback.current(eventData);
+    };
+    return room.events.customEvent.subscribe(listener);
+  }, [room, savedCallback]);
+}
+function useHistory() {
+  return useRoom().history;
+}
+function useUndo() {
+  return useHistory().undo;
+}
+function useRedo() {
+  return useHistory().redo;
+}
+function useCanUndo() {
+  const room = useRoom();
+  const subscribe = room.events.history.subscribe;
+  const canUndo = room.history.canUndo;
+  return useSyncExternalStore(subscribe, canUndo, canUndo);
+}
+function useCanRedo() {
+  const room = useRoom();
+  const subscribe = room.events.history.subscribe;
+  const canRedo = room.history.canRedo;
+  return useSyncExternalStore(subscribe, canRedo, canRedo);
+}
+function useSelf(maybeSelector, isEqual) {
+  const room = useRoom();
+  const subscribe = room.events.self.subscribe;
+  const getSnapshot = room.getSelf;
+  const selector = maybeSelector ?? identity;
+  const wrappedSelector = React3.useCallback(
+    (me) => me !== null ? selector(me) : null,
+    [selector]
+  );
+  const getServerSnapshot = alwaysNull;
+  return useSyncExternalStoreWithSelector(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot,
+    wrappedSelector,
+    isEqual
+  );
+}
+function useCurrentUserId() {
+  return useSelf((user) => typeof user.id === "string" ? user.id : null);
+}
+function useMyPresence() {
+  const room = useRoom();
+  const subscribe = room.events.myPresence.subscribe;
+  const getSnapshot = room.getPresence;
+  const presence = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const setPresence = room.updatePresence;
+  return [presence, setPresence];
+}
+function useUpdateMyPresence() {
+  return useRoom().updatePresence;
+}
+function useOthers(selector, isEqual) {
+  const room = useRoom();
+  const subscribe = room.events.others.subscribe;
+  const getSnapshot = room.getOthers;
+  const getServerSnapshot = alwaysEmptyList;
+  return useSyncExternalStoreWithSelector(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot,
+    selector ?? identity,
+    isEqual
+  );
+}
+function make_useOthersMapped() {
+  return function useOthersMapped(itemSelector, itemIsEqual) {
+    const wrappedSelector = React3.useCallback(
       (others) => others.map(
         (other) => [other.connectionId, itemSelector(other)]
       ),
       [itemSelector]
     );
-    const wrappedIsEqual = React2.useCallback(
+    const wrappedIsEqual = React3.useCallback(
       (a, b) => {
         const eq = itemIsEqual ?? Object.is;
         return a.length === b.length && a.every((atuple, index) => {
@@ -494,10 +900,15 @@ function createRoomContext(client, options) {
       [itemIsEqual]
     );
     return useOthers(wrappedSelector, wrappedIsEqual);
-  }
-  const NOT_FOUND = Symbol();
-  function useOther(connectionId, selector, isEqual) {
-    const wrappedSelector = React2.useCallback(
+  };
+}
+function useOthersConnectionIds() {
+  return useOthers(selectorFor_useOthersConnectionIds, shallow);
+}
+var NOT_FOUND = Symbol();
+function make_useOther() {
+  return function useOther(connectionId, selector, isEqual) {
+    const wrappedSelector = React3.useCallback(
       (others) => {
         const other2 = others.find(
           (other3) => other3.connectionId === connectionId
@@ -506,7 +917,7 @@ function createRoomContext(client, options) {
       },
       [connectionId, selector]
     );
-    const wrappedIsEqual = React2.useCallback(
+    const wrappedIsEqual = React3.useCallback(
       (prev, curr) => {
         if (prev === NOT_FOUND || curr === NOT_FOUND) {
           return prev === curr;
@@ -523,153 +934,31 @@ function createRoomContext(client, options) {
       );
     }
     return other;
-  }
-  function useBroadcastEvent() {
-    const room = useRoom();
-    return React2.useCallback(
-      (event, options2 = { shouldQueueEventIfNotReady: false }) => {
-        room.broadcastEvent(event, options2);
-      },
-      [room]
-    );
-  }
-  function useOthersListener(callback) {
+  };
+}
+function useMutableStorageRoot() {
+  const room = useRoom();
+  const subscribe = room.events.storageDidLoad.subscribeOnce;
+  const getSnapshot = room.getStorageSnapshot;
+  const getServerSnapshot = alwaysNull;
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+function useStorageRoot() {
+  return [useMutableStorageRoot()];
+}
+function make_useStorage() {
+  return function useStorage(selector, isEqual) {
     const room = useRoom();
-    const savedCallback = useLatest(callback);
-    React2.useEffect(
-      () => room.events.others.subscribe((event) => savedCallback.current(event)),
-      [room, savedCallback]
+    const rootOrNull = useMutableStorageRoot();
+    const wrappedSelector = React3.useCallback(
+      (rootOrNull2) => rootOrNull2 !== null ? selector(rootOrNull2) : null,
+      [selector]
     );
-  }
-  function useLostConnectionListener(callback) {
-    const room = useRoom();
-    const savedCallback = useLatest(callback);
-    React2.useEffect(
-      () => room.events.lostConnection.subscribe(
-        (event) => savedCallback.current(event)
-      ),
-      [room, savedCallback]
+    const subscribe = React3.useCallback(
+      (onStoreChange) => rootOrNull !== null ? room.subscribe(rootOrNull, onStoreChange, { isDeep: true }) : noop,
+      [room, rootOrNull]
     );
-  }
-  function useErrorListener(callback) {
-    const room = useRoom();
-    const savedCallback = useLatest(callback);
-    React2.useEffect(
-      () => room.events.error.subscribe((e) => savedCallback.current(e)),
-      [room, savedCallback]
-    );
-  }
-  function useEventListener(callback) {
-    const room = useRoom();
-    const savedCallback = useLatest(callback);
-    React2.useEffect(() => {
-      const listener = (eventData) => {
-        savedCallback.current(eventData);
-      };
-      return room.events.customEvent.subscribe(listener);
-    }, [room, savedCallback]);
-  }
-  function useSelf(maybeSelector, isEqual) {
-    const room = useRoom();
-    const subscribe = room.events.self.subscribe;
-    const getSnapshot = room.getSelf;
-    const selector = maybeSelector ?? identity;
-    const wrappedSelector = React2.useCallback(
-      (me) => me !== null ? selector(me) : null,
-      [selector]
-    );
-    const getServerSnapshot = alwaysNull;
-    return useSyncExternalStoreWithSelector(
-      subscribe,
-      getSnapshot,
-      getServerSnapshot,
-      wrappedSelector,
-      isEqual
-    );
-  }
-  function useMutableStorageRoot() {
-    const room = useRoom();
-    const subscribe = room.events.storageDidLoad.subscribeOnce;
-    const getSnapshot = room.getStorageSnapshot;
-    const getServerSnapshot = alwaysNull;
-    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-  }
-  function useStorageRoot() {
-    return [useMutableStorageRoot()];
-  }
-  function useHistory() {
-    return useRoom().history;
-  }
-  function useUndo() {
-    return useHistory().undo;
-  }
-  function useRedo() {
-    return useHistory().redo;
-  }
-  function useCanUndo() {
-    const room = useRoom();
-    const subscribe = room.events.history.subscribe;
-    const canUndo = room.history.canUndo;
-    return useSyncExternalStore(subscribe, canUndo, canUndo);
-  }
-  function useCanRedo() {
-    const room = useRoom();
-    const subscribe = room.events.history.subscribe;
-    const canRedo = room.history.canRedo;
-    return useSyncExternalStore(subscribe, canRedo, canRedo);
-  }
-  function useBatch() {
-    return useRoom().batch;
-  }
-  function useLegacyKey(key) {
-    const room = useRoom();
-    const rootOrNull = useMutableStorageRoot();
-    const rerender = useRerender();
-    React2.useEffect(() => {
-      if (rootOrNull === null) {
-        return;
-      }
-      const root = rootOrNull;
-      let unsubCurr;
-      let curr = root.get(key);
-      function subscribeToCurr() {
-        unsubCurr = isLiveNode(curr) ? room.subscribe(curr, rerender) : void 0;
-      }
-      function onRootChange() {
-        const newValue = root.get(key);
-        if (newValue !== curr) {
-          unsubCurr?.();
-          curr = newValue;
-          subscribeToCurr();
-          rerender();
-        }
-      }
-      subscribeToCurr();
-      rerender();
-      const unsubscribeRoot = room.subscribe(root, onRootChange);
-      return () => {
-        unsubscribeRoot();
-        unsubCurr?.();
-      };
-    }, [rootOrNull, room, key, rerender]);
-    if (rootOrNull === null) {
-      return null;
-    } else {
-      return rootOrNull.get(key);
-    }
-  }
-  function useStorage(selector, isEqual) {
-    const room = useRoom();
-    const rootOrNull = useMutableStorageRoot();
-    const wrappedSelector = React2.useCallback(
-      (rootOrNull2) => rootOrNull2 !== null ? selector(rootOrNull2) : null,
-      [selector]
-    );
-    const subscribe = React2.useCallback(
-      (onStoreChange) => rootOrNull !== null ? room.subscribe(rootOrNull, onStoreChange, { isDeep: true }) : noop,
-      [room, rootOrNull]
-    );
-    const getSnapshot = React2.useCallback(() => {
+    const getSnapshot = React3.useCallback(() => {
       if (rootOrNull === null) {
         return null;
       } else {
@@ -686,38 +975,49 @@ function createRoomContext(client, options) {
       wrappedSelector,
       isEqual
     );
-  }
-  function ensureNotServerSide() {
-    if (typeof window === "undefined") {
-      throw new Error(
-        "You cannot use the Suspense version of this hook on the server side. Make sure to only call them on the client side.\nFor tips, see https://liveblocks.io/docs/api-reference/liveblocks-react#suspense-avoid-ssr"
-      );
-    }
-  }
-  function useSuspendUntilStorageLoaded() {
-    const room = useRoom();
-    if (room.getStorageSnapshot() !== null) {
+  };
+}
+function useLegacyKey(key) {
+  const room = useRoom();
+  const rootOrNull = useMutableStorageRoot();
+  const rerender = useRerender();
+  React3.useEffect(() => {
+    if (rootOrNull === null) {
       return;
     }
-    ensureNotServerSide();
-    throw new Promise((res) => {
-      room.events.storageDidLoad.subscribeOnce(() => res());
-    });
-  }
-  function useSuspendUntilPresenceLoaded() {
-    const room = useRoom();
-    if (room.getSelf() !== null) {
-      return;
+    const root = rootOrNull;
+    let unsubCurr;
+    let curr = root.get(key);
+    function subscribeToCurr() {
+      unsubCurr = isLiveNode(curr) ? room.subscribe(curr, rerender) : void 0;
     }
-    ensureNotServerSide();
-    throw new Promise((res) => {
-      room.events.self.subscribeOnce(() => res());
-      room.events.status.subscribeOnce(() => res());
-    });
+    function onRootChange() {
+      const newValue = root.get(key);
+      if (newValue !== curr) {
+        unsubCurr?.();
+        curr = newValue;
+        subscribeToCurr();
+        rerender();
+      }
+    }
+    subscribeToCurr();
+    rerender();
+    const unsubscribeRoot = room.subscribe(root, onRootChange);
+    return () => {
+      unsubscribeRoot();
+      unsubCurr?.();
+    };
+  }, [rootOrNull, room, key, rerender]);
+  if (rootOrNull === null) {
+    return null;
+  } else {
+    return rootOrNull.get(key);
   }
-  function useMutation(callback, deps) {
+}
+function make_useMutation() {
+  return function useMutation(callback, deps) {
     const room = useRoom();
-    return React2.useMemo(
+    return React3.useMemo(
       () => {
         return (...args) => (
           // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -735,1103 +1035,887 @@ function createRoomContext(client, options) {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [room, ...deps]
     );
-  }
-  function useStorageSuspense(selector, isEqual) {
-    useSuspendUntilStorageLoaded();
-    return useStorage(
-      selector,
-      isEqual
-    );
-  }
-  function useSelfSuspense(selector, isEqual) {
-    useSuspendUntilPresenceLoaded();
-    return useSelf(
-      selector,
-      isEqual
-    );
-  }
-  function useOthersSuspense(selector, isEqual) {
-    useSuspendUntilPresenceLoaded();
-    return useOthers(
-      selector,
-      isEqual
-    );
-  }
-  function useOthersConnectionIdsSuspense() {
-    useSuspendUntilPresenceLoaded();
-    return useOthersConnectionIds();
-  }
-  function useOthersMappedSuspense(itemSelector, itemIsEqual) {
-    useSuspendUntilPresenceLoaded();
-    return useOthersMapped(itemSelector, itemIsEqual);
-  }
-  function useOtherSuspense(connectionId, selector, isEqual) {
-    useSuspendUntilPresenceLoaded();
-    return useOther(connectionId, selector, isEqual);
-  }
-  function useLegacyKeySuspense(key) {
-    useSuspendUntilStorageLoaded();
-    return useLegacyKey(key);
-  }
-  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 subscribersByQuery = /* @__PURE__ */ new Map();
-  const requestsByQuery = /* @__PURE__ */ new Map();
-  const poller = makePoller(refreshThreadsAndNotifications);
-  async function refreshThreadsAndNotifications() {
-    const requests = [];
-    client[kInternal].getRoomIds().map((roomId) => {
-      const room = client.getRoom(roomId);
-      if (room === null)
-        return;
-      requests.push(getThreadsUpdates(room.id));
-    });
-    await Promise.allSettled(requests);
-  }
-  function incrementQuerySubscribers(queryKey) {
-    const subscribers = subscribersByQuery.get(queryKey) ?? 0;
-    subscribersByQuery.set(queryKey, subscribers + 1);
-    poller.start(POLLING_INTERVAL);
-  }
-  function decrementQuerySubscribers(queryKey) {
-    const subscribers = subscribersByQuery.get(queryKey);
-    if (subscribers === void 0 || subscribers <= 0) {
-      console2.warn(
-        `Internal unexpected behavior. Cannot decrease subscriber count for query "${queryKey}"`
-      );
-      return;
-    }
-    subscribersByQuery.set(queryKey, subscribers - 1);
-    let totalSubscribers = 0;
-    for (const subscribers2 of subscribersByQuery.values()) {
-      totalSubscribers += subscribers2;
-    }
-    if (totalSubscribers <= 0) {
-      poller.stop();
-    }
-  }
-  async function getThreadsAndInboxNotifications(room, queryKey, options2, { retryCount } = { retryCount: 0 }) {
-    const existingRequest = requestsByQuery.get(queryKey);
-    if (existingRequest !== void 0)
-      return existingRequest;
-    const request = room[kInternal].comments.getThreads(options2);
-    requestsByQuery.set(queryKey, request);
-    store.setQueryState(queryKey, {
-      isLoading: true
-    });
-    try {
-      const result = await request;
-      store.updateThreadsAndNotifications(
-        result.threads,
-        result.inboxNotifications,
-        result.deletedThreads,
-        result.deletedInboxNotifications,
-        queryKey
-      );
-      const lastRequestedAt = lastRequestedAtByRoom.get(room.id);
-      if (lastRequestedAt === void 0 || lastRequestedAt > result.meta.requestedAt) {
-        lastRequestedAtByRoom.set(room.id, result.meta.requestedAt);
+  };
+}
+function useThreads(options = {
+  query: { metadata: {} }
+}) {
+  const { scrollOnLoad = true } = options;
+  const client = useClient();
+  const room = useRoom();
+  const queryKey = React3.useMemo(
+    () => generateQueryKey(room.id, options.query),
+    [room, options]
+  );
+  const { store, getThreadsAndInboxNotifications, incrementQuerySubscribers } = getExtrasForClient(client);
+  React3.useEffect(() => {
+    void getThreadsAndInboxNotifications(room, queryKey, options);
+    return incrementQuerySubscribers(queryKey);
+  }, [room, queryKey]);
+  const selector = React3.useCallback(
+    (state2) => {
+      const query = state2.queries[queryKey];
+      if (query === void 0 || query.isLoading) {
+        return {
+          isLoading: true
+        };
       }
-      poller.start(POLLING_INTERVAL);
-    } catch (err) {
-      requestsByQuery.delete(queryKey);
-      retryError(() => {
-        void getThreadsAndInboxNotifications(room, queryKey, options2, {
-          retryCount: retryCount + 1
-        });
-      }, retryCount);
-      store.setQueryState(queryKey, {
+      return {
+        threads: client[kInternal].comments.selectedThreads(
+          room.id,
+          state2,
+          options
+        ),
         isLoading: false,
-        error: err
+        error: query.error
+      };
+    },
+    [room, queryKey]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const state = useSyncExternalStoreWithSelector(
+    store.subscribe,
+    store.get,
+    store.get,
+    selector
+  );
+  useScrollToCommentOnLoadEffect(scrollOnLoad, state);
+  return state;
+}
+function useCommentsErrorListener(callback) {
+  const client = useClient();
+  const savedCallback = useLatest(callback);
+  const { commentsErrorEventSource } = getExtrasForClient(client);
+  React3.useEffect(() => {
+    return commentsErrorEventSource.subscribe(savedCallback.current);
+  }, [savedCallback, commentsErrorEventSource]);
+}
+function useThreadCreateCallback() {
+  return React3.useContext(ThreadCreateCallbackContext);
+}
+function useThreadDeleteCallback() {
+  return React3.useContext(ThreadDeleteCallbackContext);
+}
+function useComposerFocusCallback() {
+  return React3.useContext(ComposerFocusCallbackContext);
+}
+function useIsThreadActiveCallback() {
+  return React3.useContext(IsThreadActiveCallbackContext);
+}
+function useCreateThread() {
+  const client = useClient();
+  const room = useRoom();
+  const onCreateThread = useThreadCreateCallback();
+  return React3.useCallback(
+    (options) => {
+      const body = options.body;
+      const metadata = "metadata" in options ? options.metadata : {};
+      const threadId = client[kInternal].comments.createThreadId();
+      const commentId = client[kInternal].comments.createCommentId();
+      const createdAt = /* @__PURE__ */ new Date();
+      const newComment = {
+        id: commentId,
+        threadId,
+        roomId: room.id,
+        createdAt,
+        type: "comment",
+        userId: getCurrentUserId(room),
+        body,
+        reactions: []
+      };
+      const newThread = {
+        id: threadId,
+        type: "thread",
+        createdAt,
+        updatedAt: createdAt,
+        roomId: room.id,
+        metadata,
+        comments: [newComment]
+      };
+      const optimisticUpdateId = nanoid();
+      const { store, onMutationFailure } = getExtrasForClient(client);
+      store.pushOptimisticUpdate({
+        type: "create-thread",
+        thread: newThread,
+        id: optimisticUpdateId,
+        roomId: room.id
       });
-      return;
-    }
-  }
-  const DEFAULT_DEDUPING_INTERVAL = 2e3;
-  const lastRequestedAtByRoom = /* @__PURE__ */ new Map();
-  const requestStatusByRoom = /* @__PURE__ */ new Map();
-  async function getThreadsUpdates(roomId) {
-    const room = client.getRoom(roomId);
-    if (room === null)
-      return;
-    const since = lastRequestedAtByRoom.get(room.id);
-    if (since === void 0)
-      return;
-    const isFetchingThreadsUpdates = requestStatusByRoom.get(room.id) ?? false;
-    if (isFetchingThreadsUpdates === true)
-      return;
-    try {
-      requestStatusByRoom.set(room.id, true);
-      const updates = await room[kInternal].comments.getThreads({ since });
-      setTimeout(() => {
-        requestStatusByRoom.set(room.id, false);
-      }, DEFAULT_DEDUPING_INTERVAL);
-      store.updateThreadsAndNotifications(
-        updates.threads,
-        updates.inboxNotifications,
-        updates.deletedThreads,
-        updates.deletedInboxNotifications
+      onCreateThread?.(newThread.id);
+      const commentsAPI = room[kInternal].comments;
+      commentsAPI.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
+          })
+        )
       );
-      lastRequestedAtByRoom.set(room.id, updates.meta.requestedAt);
-    } catch (err) {
-      requestStatusByRoom.set(room.id, false);
-      return;
-    }
-  }
-  function handleScrollToCommentOnLoad(isQueryLoading, shouldScrollOnLoad, state) {
-    if (shouldScrollOnLoad === false)
-      return;
-    if (isQueryLoading === true)
-      return;
-    const isWindowDefined = typeof window !== "undefined";
-    if (!isWindowDefined)
-      return;
-    const hash = window.location.hash;
-    const commentId = hash.slice(1);
-    if (!commentId.startsWith("cm_"))
-      return;
-    const comment = document.getElementById(commentId);
-    if (comment === null)
-      return;
-    const comments = state.threads.flatMap((thread) => thread.comments);
-    const isCommentInThreads = comments.some(
-      (comment2) => comment2.id === commentId
-    );
-    if (!isCommentInThreads)
-      return;
-    comment.scrollIntoView();
-  }
-  function useThreads(options2 = {
-    query: { metadata: {} }
-  }) {
-    const { scrollOnLoad = true } = options2;
-    const room = useRoom();
-    const queryKey = React2.useMemo(
-      () => generateQueryKey(room.id, options2.query),
-      [room, options2]
-    );
-    React2.useEffect(() => {
-      void getThreadsAndInboxNotifications(room, queryKey, options2);
-      incrementQuerySubscribers(queryKey);
-      return () => decrementQuerySubscribers(queryKey);
-    }, [room, queryKey]);
-    const selector = React2.useCallback(
-      (state2) => {
-        const query = state2.queries[queryKey];
-        if (query === void 0 || query.isLoading) {
-          return {
-            isLoading: true
-          };
-        }
-        return {
-          threads: selectedThreads(room.id, state2, options2),
-          isLoading: false,
-          error: query.error
-        };
-      },
-      [room, queryKey]
-      // eslint-disable-line react-hooks/exhaustive-deps
-    );
-    const state = useSyncExternalStoreWithSelector(
-      store.subscribe,
-      store.get,
-      store.get,
-      selector
-    );
-    React2.useEffect(
-      () => {
-        if (state.isLoading === true)
-          return;
-        handleScrollToCommentOnLoad(state.isLoading, scrollOnLoad, state);
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to run this effect once
-      [state.isLoading]
-    );
-    return state;
-  }
-  function useThreadsSuspense(options2 = {
-    query: { metadata: {} }
-  }) {
-    const { scrollOnLoad = true } = options2;
-    const room = useRoom();
-    const queryKey = React2.useMemo(
-      () => generateQueryKey(room.id, options2.query),
-      [room, options2]
-    );
-    const query = store.get().queries[queryKey];
-    if (query === void 0 || query.isLoading) {
-      throw getThreadsAndInboxNotifications(room, queryKey, options2);
-    }
-    if (query.error) {
-      throw query.error;
-    }
-    const selector = React2.useCallback(
-      (state2) => {
-        return {
-          threads: selectedThreads(room.id, state2, options2),
-          isLoading: false
-        };
-      },
-      [room, queryKey]
-      // eslint-disable-line react-hooks/exhaustive-deps
-    );
-    React2.useEffect(() => {
-      incrementQuerySubscribers(queryKey);
-      return () => {
-        decrementQuerySubscribers(queryKey);
+      return newThread;
+    },
+    [client, room, onCreateThread]
+  );
+}
+function useEditThreadMetadata() {
+  const client = useClient();
+  const room = useRoom();
+  return React3.useCallback(
+    (options) => {
+      if (!("metadata" in options)) {
+        return;
+      }
+      const threadId = options.threadId;
+      const metadata = options.metadata;
+      const updatedAt = /* @__PURE__ */ new Date();
+      const optimisticUpdateId = nanoid();
+      const { store, onMutationFailure } = getExtrasForClient(client);
+      store.pushOptimisticUpdate({
+        type: "edit-thread-metadata",
+        metadata,
+        id: optimisticUpdateId,
+        threadId,
+        updatedAt
+      });
+      const commentsAPI = room[kInternal].comments;
+      commentsAPI.editThreadMetadata({ metadata, threadId }).then(
+        (metadata2) => {
+          store.set((state) => {
+            const existingThread = state.threads[threadId];
+            const updatedOptimisticUpdates = state.optimisticUpdates.filter(
+              (update) => update.id !== optimisticUpdateId
+            );
+            if (existingThread === void 0) {
+              return {
+                ...state,
+                optimisticUpdates: updatedOptimisticUpdates
+              };
+            }
+            if (existingThread.deletedAt !== void 0) {
+              return {
+                ...state,
+                optimisticUpdates: updatedOptimisticUpdates
+              };
+            }
+            if (existingThread.updatedAt && existingThread.updatedAt > updatedAt) {
+              return {
+                ...state,
+                optimisticUpdates: updatedOptimisticUpdates
+              };
+            }
+            return {
+              ...state,
+              threads: {
+                ...state.threads,
+                [threadId]: {
+                  ...existingThread,
+                  metadata: metadata2
+                }
+              },
+              optimisticUpdates: updatedOptimisticUpdates
+            };
+          });
+        },
+        (err) => onMutationFailure(
+          err,
+          optimisticUpdateId,
+          (error) => new EditThreadMetadataError(error, {
+            roomId: room.id,
+            threadId,
+            metadata
+          })
+        )
+      );
+    },
+    [client, room]
+  );
+}
+function useCreateComment() {
+  const client = useClient();
+  const room = useRoom();
+  return React3.useCallback(
+    ({ threadId, body }) => {
+      const commentId = client[kInternal].comments.createCommentId();
+      const createdAt = /* @__PURE__ */ new Date();
+      const comment = {
+        id: commentId,
+        threadId,
+        roomId: room.id,
+        type: "comment",
+        createdAt,
+        userId: getCurrentUserId(room),
+        body,
+        reactions: []
       };
-    }, [queryKey]);
-    const state = useSyncExternalStoreWithSelector(
-      store.subscribe,
-      store.get,
-      store.get,
-      selector
-    );
-    React2.useEffect(
-      () => {
-        handleScrollToCommentOnLoad(state.isLoading, scrollOnLoad, state);
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to run this effect once
-      [state.isLoading]
-    );
-    return state;
-  }
-  function useCreateThread() {
-    const room = useRoom();
-    return React2.useCallback(
-      (options2) => {
-        const body = options2.body;
-        const metadata = "metadata" in options2 ? options2.metadata : {};
-        const threadId = createThreadId();
-        const commentId = createCommentId();
-        const createdAt = /* @__PURE__ */ new Date();
-        const newComment = {
-          id: commentId,
-          threadId,
-          roomId: room.id,
-          createdAt,
-          type: "comment",
-          userId: getCurrentUserId(room),
-          body,
-          reactions: []
-        };
-        const newThread = {
-          id: threadId,
-          type: "thread",
-          createdAt,
-          updatedAt: createdAt,
-          roomId: room.id,
-          metadata,
-          comments: [newComment]
-        };
-        const optimisticUpdateId = nanoid2();
-        store.pushOptimisticUpdate({
-          type: "create-thread",
-          thread: newThread,
-          id: optimisticUpdateId
-        });
-        room[kInternal].comments.createThread({ threadId, commentId, body, metadata }).then(
-          (thread) => {
-            store.set((state) => ({
+      const optimisticUpdateId = nanoid();
+      const { store, onMutationFailure } = getExtrasForClient(client);
+      store.pushOptimisticUpdate({
+        type: "create-comment",
+        comment,
+        id: optimisticUpdateId
+      });
+      room[kInternal].comments.createComment({ threadId, commentId, body }).then(
+        (newComment) => {
+          store.set((state) => {
+            const existingThread = state.threads[threadId];
+            const updatedOptimisticUpdates = state.optimisticUpdates.filter(
+              (update) => update.id !== optimisticUpdateId
+            );
+            if (existingThread === void 0) {
+              return {
+                ...state,
+                optimisticUpdates: updatedOptimisticUpdates
+              };
+            }
+            const inboxNotification = Object.values(
+              state.inboxNotifications
+            ).find(
+              (notification) => notification.kind === "thread" && notification.threadId === threadId
+            );
+            const updatedInboxNotifications = inboxNotification !== void 0 ? {
+              ...state.inboxNotifications,
+              [inboxNotification.id]: {
+                ...inboxNotification,
+                notifiedAt: newComment.createdAt,
+                readAt: newComment.createdAt
+              }
+            } : state.inboxNotifications;
+            return {
               ...state,
               threads: {
                 ...state.threads,
-                [threadId]: thread
+                [threadId]: upsertComment(existingThread, newComment)
+                // Upsert the new comment into the thread comments list (if applicable)
               },
-              optimisticUpdates: state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              )
-            }));
-          },
-          (err) => onMutationFailure(
-            err,
-            optimisticUpdateId,
-            (err2) => new CreateThreadError(err2, {
-              roomId: room.id,
-              threadId,
-              commentId,
-              body,
-              metadata
-            })
-          )
+              inboxNotifications: updatedInboxNotifications,
+              optimisticUpdates: updatedOptimisticUpdates
+            };
+          });
+        },
+        (err) => onMutationFailure(
+          err,
+          optimisticUpdateId,
+          (err2) => new CreateCommentError(err2, {
+            roomId: room.id,
+            threadId,
+            commentId,
+            body
+          })
+        )
+      );
+      return comment;
+    },
+    [client, room]
+  );
+}
+function useEditComment() {
+  const client = useClient();
+  const room = useRoom();
+  return React3.useCallback(
+    ({ threadId, commentId, body }) => {
+      const editedAt = /* @__PURE__ */ new Date();
+      const optimisticUpdateId = nanoid();
+      const { store, onMutationFailure } = getExtrasForClient(client);
+      const thread = store.get().threads[threadId];
+      if (thread === void 0) {
+        console2.warn(
+          `Internal unexpected behavior. Cannot edit comment in thread "${threadId}" because the thread does not exist in the cache.`
         );
-        return newThread;
-      },
-      [room]
-    );
-  }
-  function useEditThreadMetadata() {
-    const room = useRoom();
-    return React2.useCallback(
-      (options2) => {
-        if (!("metadata" in options2)) {
-          return;
-        }
-        const threadId = options2.threadId;
-        const metadata = options2.metadata;
-        const updatedAt = /* @__PURE__ */ new Date();
-        const optimisticUpdateId = nanoid2();
-        store.pushOptimisticUpdate({
-          type: "edit-thread-metadata",
-          metadata,
-          id: optimisticUpdateId,
-          threadId,
-          updatedAt
-        });
-        room[kInternal].comments.editThreadMetadata({ metadata, threadId }).then(
-          (metadata2) => {
-            store.set((state) => {
-              const existingThread = state.threads[threadId];
-              const updatedOptimisticUpdates = state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              );
-              if (existingThread === void 0) {
-                return {
-                  ...state,
-                  optimisticUpdates: updatedOptimisticUpdates
-                };
-              }
-              if (existingThread.deletedAt !== void 0) {
-                return {
-                  ...state,
-                  optimisticUpdates: updatedOptimisticUpdates
-                };
-              }
-              if (existingThread.updatedAt && existingThread.updatedAt > updatedAt) {
-                return {
-                  ...state,
-                  optimisticUpdates: updatedOptimisticUpdates
-                };
-              }
+        return;
+      }
+      const comment = thread.comments.find(
+        (comment2) => comment2.id === commentId
+      );
+      if (comment === void 0 || comment.deletedAt !== void 0) {
+        console2.warn(
+          `Internal unexpected behavior. Cannot edit comment "${commentId}" in thread "${threadId}" because the comment does not exist in the cache.`
+        );
+        return;
+      }
+      store.pushOptimisticUpdate({
+        type: "edit-comment",
+        comment: {
+          ...comment,
+          editedAt,
+          body
+        },
+        id: optimisticUpdateId
+      });
+      room[kInternal].comments.editComment({ threadId, commentId, body }).then(
+        (editedComment) => {
+          store.set((state) => {
+            const existingThread = state.threads[threadId];
+            const updatedOptimisticUpdates = state.optimisticUpdates.filter(
+              (update) => update.id !== optimisticUpdateId
+            );
+            if (existingThread === void 0) {
               return {
                 ...state,
-                threads: {
-                  ...state.threads,
-                  [threadId]: {
-                    ...existingThread,
-                    metadata: metadata2
-                  }
-                },
                 optimisticUpdates: updatedOptimisticUpdates
               };
-            });
-          },
-          (err) => onMutationFailure(
-            err,
-            optimisticUpdateId,
-            (error) => new EditThreadMetadataError(error, {
-              roomId: room.id,
-              threadId,
-              metadata
-            })
-          )
-        );
-      },
-      [room]
-    );
-  }
-  function useAddReaction() {
-    const room = useRoom();
-    return React2.useCallback(
-      ({ threadId, commentId, emoji }) => {
-        const createdAt = /* @__PURE__ */ new Date();
-        const userId = getCurrentUserId(room);
-        const optimisticUpdateId = nanoid2();
-        store.pushOptimisticUpdate({
-          type: "add-reaction",
-          threadId,
-          commentId,
-          reaction: {
-            emoji,
-            userId,
-            createdAt
-          },
-          id: optimisticUpdateId
-        });
-        room[kInternal].comments.addReaction({ threadId, commentId, emoji }).then(
-          (addedReaction) => {
-            store.set((state) => {
-              const existingThread = state.threads[threadId];
-              const updatedOptimisticUpdates = state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              );
-              if (existingThread === void 0) {
-                return {
-                  ...state,
-                  optimisticUpdates: updatedOptimisticUpdates
-                };
-              }
+            }
+            return {
+              ...state,
+              threads: {
+                ...state.threads,
+                [threadId]: upsertComment(existingThread, editedComment)
+                // Upsert the edited comment into the thread comments list (if applicable)
+              },
+              optimisticUpdates: updatedOptimisticUpdates
+            };
+          });
+        },
+        (err) => onMutationFailure(
+          err,
+          optimisticUpdateId,
+          (error) => new EditCommentError(error, {
+            roomId: room.id,
+            threadId,
+            commentId,
+            body
+          })
+        )
+      );
+    },
+    [client, room]
+  );
+}
+function useDeleteComment() {
+  const client = useClient();
+  const room = useRoom();
+  const onDeleteThread = useThreadDeleteCallback();
+  return React3.useCallback(
+    ({ threadId, commentId }) => {
+      const deletedAt = /* @__PURE__ */ new Date();
+      const optimisticUpdateId = nanoid();
+      const { store, onMutationFailure } = getExtrasForClient(client);
+      store.pushOptimisticUpdate({
+        type: "delete-comment",
+        threadId,
+        commentId,
+        deletedAt,
+        id: optimisticUpdateId,
+        roomId: room.id
+      });
+      const thread = store.get().threads[threadId];
+      if (thread !== void 0 && thread.deletedAt === void 0) {
+        const newThread = deleteComment(thread, commentId, deletedAt);
+        if (newThread.deletedAt !== void 0) {
+          onDeleteThread?.(threadId);
+        }
+      }
+      room[kInternal].comments.deleteComment({ threadId, commentId }).then(
+        () => {
+          store.set((state) => {
+            const existingThread = state.threads[threadId];
+            const updatedOptimisticUpdates = state.optimisticUpdates.filter(
+              (update) => update.id !== optimisticUpdateId
+            );
+            if (existingThread === void 0) {
               return {
                 ...state,
-                threads: {
-                  ...state.threads,
-                  [threadId]: addReaction(
-                    existingThread,
-                    commentId,
-                    addedReaction
-                  )
-                },
                 optimisticUpdates: updatedOptimisticUpdates
               };
-            });
-          },
-          (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 removedAt = /* @__PURE__ */ new Date();
-        const optimisticUpdateId = nanoid2();
-        store.pushOptimisticUpdate({
-          type: "remove-reaction",
-          threadId,
-          commentId,
+            }
+            return {
+              ...state,
+              threads: {
+                ...state.threads,
+                [threadId]: deleteComment(existingThread, commentId, deletedAt)
+              },
+              optimisticUpdates: updatedOptimisticUpdates
+            };
+          });
+        },
+        (err) => onMutationFailure(
+          err,
+          optimisticUpdateId,
+          (error) => new DeleteCommentError(error, {
+            roomId: room.id,
+            threadId,
+            commentId
+          })
+        )
+      );
+    },
+    [client, room, onDeleteThread]
+  );
+}
+function useAddReaction() {
+  const client = useClient();
+  const room = useRoom();
+  return React3.useCallback(
+    ({ threadId, commentId, emoji }) => {
+      const createdAt = /* @__PURE__ */ new Date();
+      const userId = getCurrentUserId(room);
+      const optimisticUpdateId = nanoid();
+      const { store, onMutationFailure } = getExtrasForClient(client);
+      store.pushOptimisticUpdate({
+        type: "add-reaction",
+        threadId,
+        commentId,
+        reaction: {
           emoji,
           userId,
-          removedAt,
-          id: optimisticUpdateId
-        });
-        room[kInternal].comments.removeReaction({ threadId, commentId, emoji }).then(
-          () => {
-            store.set((state) => {
-              const existingThread = state.threads[threadId];
-              const updatedOptimisticUpdates = state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              );
-              if (existingThread === void 0) {
-                return {
-                  ...state,
-                  optimisticUpdates: updatedOptimisticUpdates
-                };
-              }
+          createdAt
+        },
+        id: optimisticUpdateId
+      });
+      room[kInternal].comments.addReaction({ threadId, commentId, emoji }).then(
+        (addedReaction) => {
+          store.set((state) => {
+            const existingThread = state.threads[threadId];
+            const updatedOptimisticUpdates = state.optimisticUpdates.filter(
+              (update) => update.id !== optimisticUpdateId
+            );
+            if (existingThread === void 0) {
               return {
                 ...state,
-                threads: {
-                  ...state.threads,
-                  [threadId]: removeReaction(
-                    existingThread,
-                    commentId,
-                    emoji,
-                    userId,
-                    removedAt
-                  )
-                },
                 optimisticUpdates: updatedOptimisticUpdates
               };
-            });
-          },
-          (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 createdAt = /* @__PURE__ */ new Date();
-        const comment = {
-          id: commentId,
-          threadId,
-          roomId: room.id,
-          type: "comment",
-          createdAt,
-          userId: getCurrentUserId(room),
-          body,
-          reactions: []
-        };
-        const optimisticUpdateId = nanoid2();
-        store.pushOptimisticUpdate({
-          type: "create-comment",
-          comment,
-          id: optimisticUpdateId
-        });
-        room[kInternal].comments.createComment({ threadId, commentId, body }).then(
-          (newComment) => {
-            store.set((state) => {
-              const existingThread = state.threads[threadId];
-              const updatedOptimisticUpdates = state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              );
-              if (existingThread === void 0) {
-                return {
-                  ...state,
-                  optimisticUpdates: updatedOptimisticUpdates
-                };
-              }
-              const inboxNotification = Object.values(
-                state.inboxNotifications
-              ).find((notification) => notification.threadId === threadId);
-              const updatedInboxNotifications = inboxNotification !== void 0 ? {
-                ...state.inboxNotifications,
-                [inboxNotification.id]: {
-                  ...inboxNotification,
-                  notifiedAt: newComment.createdAt,
-                  readAt: newComment.createdAt
-                }
-              } : state.inboxNotifications;
+            }
+            return {
+              ...state,
+              threads: {
+                ...state.threads,
+                [threadId]: addReaction(
+                  existingThread,
+                  commentId,
+                  addedReaction
+                )
+              },
+              optimisticUpdates: updatedOptimisticUpdates
+            };
+          });
+        },
+        (err) => onMutationFailure(
+          err,
+          optimisticUpdateId,
+          (error) => new AddReactionError(error, {
+            roomId: room.id,
+            threadId,
+            commentId,
+            emoji
+          })
+        )
+      );
+    },
+    [client, room]
+  );
+}
+function useRemoveReaction() {
+  const client = useClient();
+  const room = useRoom();
+  return React3.useCallback(
+    ({ threadId, commentId, emoji }) => {
+      const userId = getCurrentUserId(room);
+      const removedAt = /* @__PURE__ */ new Date();
+      const optimisticUpdateId = nanoid();
+      const { store, onMutationFailure } = getExtrasForClient(client);
+      store.pushOptimisticUpdate({
+        type: "remove-reaction",
+        threadId,
+        commentId,
+        emoji,
+        userId,
+        removedAt,
+        id: optimisticUpdateId
+      });
+      room[kInternal].comments.removeReaction({ threadId, commentId, emoji }).then(
+        () => {
+          store.set((state) => {
+            const existingThread = state.threads[threadId];
+            const updatedOptimisticUpdates = state.optimisticUpdates.filter(
+              (update) => update.id !== optimisticUpdateId
+            );
+            if (existingThread === void 0) {
               return {
                 ...state,
-                threads: {
-                  ...state.threads,
-                  [threadId]: upsertComment(existingThread, newComment)
-                  // Upsert the new comment into the thread comments list (if applicable)
-                },
-                inboxNotifications: updatedInboxNotifications,
                 optimisticUpdates: updatedOptimisticUpdates
               };
-            });
-          },
-          (err) => onMutationFailure(
+            }
+            return {
+              ...state,
+              threads: {
+                ...state.threads,
+                [threadId]: removeReaction(
+                  existingThread,
+                  commentId,
+                  emoji,
+                  userId,
+                  removedAt
+                )
+              },
+              optimisticUpdates: updatedOptimisticUpdates
+            };
+          });
+        },
+        (err) => onMutationFailure(
+          err,
+          optimisticUpdateId,
+          (error) => new RemoveReactionError(error, {
+            roomId: room.id,
+            threadId,
+            commentId,
+            emoji
+          })
+        )
+      );
+    },
+    [client, room]
+  );
+}
+function useMarkThreadAsRead() {
+  const client = useClient();
+  const room = useRoom();
+  return React3.useCallback(
+    (threadId) => {
+      const { store, onMutationFailure } = getExtrasForClient(client);
+      const inboxNotification = Object.values(
+        store.get().inboxNotifications
+      ).find(
+        (inboxNotification2) => inboxNotification2.kind === "thread" && inboxNotification2.threadId === threadId
+      );
+      if (!inboxNotification)
+        return;
+      const optimisticUpdateId = nanoid();
+      const now = /* @__PURE__ */ new Date();
+      store.pushOptimisticUpdate({
+        type: "mark-inbox-notification-as-read",
+        id: optimisticUpdateId,
+        inboxNotificationId: inboxNotification.id,
+        readAt: now
+      });
+      room[kInternal].notifications.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,
-            (err2) => new CreateCommentError(err2, {
-              roomId: room.id,
-              threadId,
-              commentId,
-              body
+            (error) => new MarkInboxNotificationAsReadError(error, {
+              inboxNotificationId: inboxNotification.id
             })
-          )
-        );
-        return comment;
-      },
-      [room]
-    );
-  }
-  function useEditComment() {
-    const room = useRoom();
-    return React2.useCallback(
-      ({ threadId, commentId, body }) => {
-        const editedAt = /* @__PURE__ */ new Date();
-        const optimisticUpdateId = nanoid2();
-        const thread = store.get().threads[threadId];
-        if (thread === void 0) {
-          console2.warn(
-            `Internal unexpected behavior. Cannot edit comment in thread "${threadId}" because the thread does not exist in the cache.`
           );
           return;
         }
-        const comment = thread.comments.find(
-          (comment2) => comment2.id === commentId
-        );
-        if (comment === void 0 || comment.deletedAt !== void 0) {
-          console2.warn(
-            `Internal unexpected behavior. Cannot edit comment "${commentId}" in thread "${threadId}" because the comment does not exist in the cache.`
-          );
-          return;
-        }
-        store.pushOptimisticUpdate({
-          type: "edit-comment",
-          comment: {
-            ...comment,
-            editedAt,
-            body
-          },
-          id: optimisticUpdateId
-        });
-        room[kInternal].comments.editComment({ threadId, commentId, body }).then(
-          (editedComment) => {
-            store.set((state) => {
-              const existingThread = state.threads[threadId];
-              const updatedOptimisticUpdates = state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              );
-              if (existingThread === void 0) {
-                return {
-                  ...state,
-                  optimisticUpdates: updatedOptimisticUpdates
-                };
-              }
-              return {
-                ...state,
-                threads: {
-                  ...state.threads,
-                  [threadId]: upsertComment(existingThread, editedComment)
-                  // Upsert the edited comment into the thread comments list (if applicable)
-                },
-                optimisticUpdates: updatedOptimisticUpdates
-              };
-            });
-          },
-          (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 deletedAt = /* @__PURE__ */ new Date();
-        const optimisticUpdateId = nanoid2();
-        store.pushOptimisticUpdate({
-          type: "delete-comment",
-          threadId,
-          commentId,
-          deletedAt,
-          id: optimisticUpdateId
-        });
-        room[kInternal].comments.deleteComment({ threadId, commentId }).then(
-          () => {
-            store.set((state) => {
-              const existingThread = state.threads[threadId];
-              const updatedOptimisticUpdates = state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              );
-              if (existingThread === void 0) {
-                return {
-                  ...state,
-                  optimisticUpdates: updatedOptimisticUpdates
-                };
-              }
-              return {
-                ...state,
-                threads: {
-                  ...state.threads,
-                  [threadId]: deleteComment(
-                    existingThread,
-                    commentId,
-                    deletedAt
-                  )
-                },
-                optimisticUpdates: updatedOptimisticUpdates
-              };
-            });
-          },
-          (err) => onMutationFailure(
-            err,
-            optimisticUpdateId,
-            (error) => new DeleteCommentError(error, {
-              roomId: room.id,
-              threadId,
-              commentId
-            })
-          )
-        );
-      },
-      [room]
-    );
-  }
-  const resolveMentionSuggestions = client[kInternal].resolveMentionSuggestions;
-  const mentionSuggestionsCache = /* @__PURE__ */ new Map();
-  function useMentionSuggestions(search) {
-    const room = useRoom();
-    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 useThreadSubscription(threadId) {
-    const selector = React2.useCallback(
-      (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"
-          };
-        }
+    },
+    [client, room]
+  );
+}
+function useThreadSubscription(threadId) {
+  const client = useClient();
+  const { store } = getExtrasForClient(client);
+  const selector = React3.useCallback(
+    (state) => {
+      const inboxNotification = client[kInternal].comments.selectedInboxNotifications(state).find(
+        (inboxNotification2) => inboxNotification2.kind === "thread" && inboxNotification2.threadId === threadId
+      );
+      const thread = state.threads[threadId];
+      if (inboxNotification === void 0 || thread === void 0) {
         return {
-          status: "subscribed",
-          unreadSince: inboxNotification.readAt
+          status: "not-subscribed"
         };
-      },
-      [threadId]
-    );
-    return useSyncExternalStoreWithSelector(
-      store.subscribe,
-      store.get,
-      store.get,
-      selector
-    );
-  }
-  function useMarkThreadAsRead() {
-    const room = useRoom();
-    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
-        });
-        room[kInternal].notifications.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;
-          }
-        );
-      },
-      [room]
-    );
-  }
-  function makeNotificationSettingsQueryKey(roomId) {
-    return `${roomId}:NOTIFICATION_SETTINGS`;
-  }
-  async function getInboxNotificationSettings(room, queryKey, { retryCount } = { retryCount: 0 }) {
-    const existingRequest = requestsByQuery.get(queryKey);
-    if (existingRequest !== void 0)
-      return existingRequest;
-    try {
-      const request = room[kInternal].notifications.getRoomNotificationSettings();
-      requestsByQuery.set(queryKey, request);
-      store.setQueryState(queryKey, {
-        isLoading: true
-      });
-      const settings = await request;
-      store.updateRoomInboxNotificationSettings(room.id, settings, queryKey);
-    } catch (err) {
-      requestsByQuery.delete(queryKey);
-      retryError(() => {
-        void getInboxNotificationSettings(room, queryKey, {
-          retryCount: retryCount + 1
-        });
-      }, retryCount);
-      store.setQueryState(queryKey, {
+      }
+      return {
+        status: "subscribed",
+        unreadSince: inboxNotification.readAt
+      };
+    },
+    [threadId]
+  );
+  return useSyncExternalStoreWithSelector(
+    store.subscribe,
+    store.get,
+    store.get,
+    selector
+  );
+}
+function useRoomNotificationSettings() {
+  const client = useClient();
+  const room = useRoom();
+  const { store } = getExtrasForClient(client);
+  React3.useEffect(() => {
+    const { getInboxNotificationSettings } = getExtrasForClient(client);
+    const queryKey = makeNotificationSettingsQueryKey(room.id);
+    void getInboxNotificationSettings(room, queryKey);
+  }, [client, room]);
+  const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
+  const selector = React3.useCallback(
+    (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,
-        error: err
+        settings: client[kInternal].comments.selectNotificationSettings(
+          room.id,
+          state
+        )
+      };
+    },
+    [room]
+  );
+  const settings = useSyncExternalStoreWithSelector(
+    store.subscribe,
+    store.get,
+    store.get,
+    selector
+  );
+  return React3.useMemo(() => {
+    return [settings, updateRoomNotificationSettings];
+  }, [settings, updateRoomNotificationSettings]);
+}
+function useUpdateRoomNotificationSettings() {
+  const client = useClient();
+  const room = useRoom();
+  return React3.useCallback(
+    (settings) => {
+      const optimisticUpdateId = nanoid();
+      const { store, onMutationFailure } = getExtrasForClient(client);
+      store.pushOptimisticUpdate({
+        id: optimisticUpdateId,
+        type: "update-notification-settings",
+        roomId: room.id,
+        settings
       });
-      return;
-    }
-  }
-  function useRoomNotificationSettings() {
-    const room = useRoom();
-    React2.useEffect(() => {
-      const queryKey = makeNotificationSettingsQueryKey(room.id);
-      void getInboxNotificationSettings(room, queryKey);
-    }, [room]);
-    const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
-    const selector = React2.useCallback(
-      (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)
-        };
-      },
-      [room]
-    );
-    const settings = useSyncExternalStoreWithSelector(
-      store.subscribe,
-      store.get,
-      store.get,
-      selector
+      room[kInternal].notifications.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
+          })
+        )
+      );
+    },
+    [client, room]
+  );
+}
+function ensureNotServerSide() {
+  if (typeof window === "undefined") {
+    throw new Error(
+      "You cannot use the Suspense version of this hook on the server side. Make sure to only call them on the client side.\nFor tips, see https://liveblocks.io/docs/api-reference/liveblocks-react#suspense-avoid-ssr"
     );
-    return React2.useMemo(() => {
-      return [settings, updateRoomNotificationSettings];
-    }, [settings, updateRoomNotificationSettings]);
   }
-  function useRoomNotificationSettingsSuspense() {
-    const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
-    const room = useRoom();
-    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;
-    }
-    const selector = React2.useCallback(
-      (state) => {
-        return {
-          isLoading: false,
-          settings: selectNotificationSettings(room.id, state)
-        };
-      },
-      [room]
-    );
-    const settings = useSyncExternalStoreWithSelector(
-      store.subscribe,
-      store.get,
-      store.get,
-      selector
+}
+function useSuspendUntilPresenceLoaded() {
+  const room = useRoom();
+  if (room.getSelf() !== null) {
+    return;
+  }
+  ensureNotServerSide();
+  throw new Promise((res) => {
+    room.events.self.subscribeOnce(() => res());
+    room.events.status.subscribeOnce(() => res());
+  });
+}
+function useSelfSuspense(selector, isEqual) {
+  useSuspendUntilPresenceLoaded();
+  return useSelf(
+    selector,
+    isEqual
+  );
+}
+function make_useOthersSuspense() {
+  return function useOthersSuspense(selector, isEqual) {
+    useSuspendUntilPresenceLoaded();
+    return useOthers(
+      selector,
+      isEqual
     );
-    return React2.useMemo(() => {
-      return [settings, updateRoomNotificationSettings];
-    }, [settings, updateRoomNotificationSettings]);
+  };
+}
+function useOthersConnectionIdsSuspense() {
+  useSuspendUntilPresenceLoaded();
+  return useOthersConnectionIds();
+}
+function make_useOthersMappedSuspense() {
+  const useOthersMapped = make_useOthersMapped();
+  return function(itemSelector, itemIsEqual) {
+    useSuspendUntilPresenceLoaded();
+    return useOthersMapped(itemSelector, itemIsEqual);
+  };
+}
+function make_useOtherSuspense() {
+  const useOther = make_useOther();
+  return function useOtherSuspense(connectionId, selector, isEqual) {
+    useSuspendUntilPresenceLoaded();
+    return useOther(connectionId, selector, isEqual);
+  };
+}
+function useSuspendUntilStorageLoaded() {
+  const room = useRoom();
+  if (room.getStorageSnapshot() !== null) {
+    return;
   }
-  function useUpdateRoomNotificationSettings() {
-    const room = useRoom();
-    return React2.useCallback(
-      (settings) => {
-        const optimisticUpdateId = nanoid2();
-        store.pushOptimisticUpdate({
-          id: optimisticUpdateId,
-          type: "update-notification-settings",
-          roomId: room.id,
-          settings
-        });
-        room[kInternal].notifications.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]
+  ensureNotServerSide();
+  throw new Promise((res) => {
+    room.events.storageDidLoad.subscribeOnce(() => res());
+  });
+}
+function make_useStorageSuspense() {
+  const useStorage = make_useStorage();
+  return function useStorageSuspense(selector, isEqual) {
+    useSuspendUntilStorageLoaded();
+    return useStorage(
+      selector,
+      isEqual
     );
+  };
+}
+function useLegacyKeySuspense(key) {
+  useSuspendUntilStorageLoaded();
+  return useLegacyKey(key);
+}
+function useThreadsSuspense(options = {
+  query: { metadata: {} }
+}) {
+  const { scrollOnLoad = true } = options;
+  const client = useClient();
+  const room = useRoom();
+  const queryKey = React3.useMemo(
+    () => generateQueryKey(room.id, options.query),
+    [room, options]
+  );
+  const { store, getThreadsAndInboxNotifications } = getExtrasForClient(client);
+  const query = store.get().queries[queryKey];
+  if (query === void 0 || query.isLoading) {
+    throw getThreadsAndInboxNotifications(room, queryKey, options);
   }
-  function useCurrentUserId() {
-    return useSelf((user) => typeof user.id === "string" ? user.id : null);
+  if (query.error) {
+    throw query.error;
   }
-  const bundle = {
-    RoomContext,
-    RoomProvider: RoomProviderOuter,
-    useRoom,
-    useStatus,
-    useBatch,
-    useBroadcastEvent,
-    useOthersListener,
-    useLostConnectionListener,
-    useErrorListener,
-    useEventListener,
-    useHistory,
-    useUndo,
-    useRedo,
-    useCanRedo,
-    useCanUndo,
-    // These are just aliases. The passed-in key will define their return values.
-    useList: useLegacyKey,
-    useMap: useLegacyKey,
-    useObject: useLegacyKey,
-    useStorageRoot,
-    useStorage,
-    useSelf,
-    useMyPresence,
-    useUpdateMyPresence,
-    useOthers,
-    useOthersMapped,
-    useOthersConnectionIds,
-    useOther,
-    useMutation,
-    useThreads,
-    useCreateThread,
-    useEditThreadMetadata,
-    useCreateComment,
-    useEditComment,
-    useDeleteComment,
-    useAddReaction,
-    useRemoveReaction,
-    useMarkThreadAsRead,
-    useThreadSubscription,
-    useRoomNotificationSettings,
-    useUpdateRoomNotificationSettings,
-    ...shared,
-    suspense: {
-      RoomContext,
-      RoomProvider: RoomProviderOuter,
-      useRoom,
-      useStatus,
-      useBatch,
-      useBroadcastEvent,
-      useOthersListener,
-      useLostConnectionListener,
-      useErrorListener,
-      useEventListener,
-      useHistory,
-      useUndo,
-      useRedo,
-      useCanRedo,
-      useCanUndo,
-      // Legacy hooks
-      useList: useLegacyKeySuspense,
-      useMap: useLegacyKeySuspense,
-      useObject: useLegacyKeySuspense,
-      useStorageRoot,
-      useStorage: useStorageSuspense,
-      useSelf: useSelfSuspense,
-      useMyPresence,
-      useUpdateMyPresence,
-      useOthers: useOthersSuspense,
-      useOthersMapped: useOthersMappedSuspense,
-      useOthersConnectionIds: useOthersConnectionIdsSuspense,
-      useOther: useOtherSuspense,
-      useMutation,
-      useThreads: useThreadsSuspense,
-      useCreateThread,
-      useEditThreadMetadata,
-      useCreateComment,
-      useEditComment,
-      useDeleteComment,
-      useAddReaction,
-      useRemoveReaction,
-      useMarkThreadAsRead,
-      useThreadSubscription,
-      useRoomNotificationSettings: useRoomNotificationSettingsSuspense,
-      useUpdateRoomNotificationSettings,
-      ...shared.suspense
+  const selector = React3.useCallback(
+    (state2) => {
+      return {
+        threads: client[kInternal].comments.selectedThreads(
+          room.id,
+          state2,
+          options
+        ),
+        isLoading: false
+      };
     },
-    [kInternal]: {
-      useCurrentUserId,
-      hasResolveMentionSuggestions: resolveMentionSuggestions !== void 0,
-      useMentionSuggestions
-    }
-  };
-  return Object.defineProperty(bundle, kInternal, {
-    enumerable: false
-  });
+    [room, queryKey]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  React3.useEffect(() => {
+    const { incrementQuerySubscribers } = getExtrasForClient(client);
+    return incrementQuerySubscribers(queryKey);
+  }, [client, queryKey]);
+  const state = useSyncExternalStoreWithSelector(
+    store.subscribe,
+    store.get,
+    store.get,
+    selector
+  );
+  useScrollToCommentOnLoadEffect(scrollOnLoad, state);
+  return state;
 }
-function getCurrentUserId(room) {
-  const self = room.getSelf();
-  if (self === null || self.id === void 0) {
-    return "anonymous";
-  } else {
-    return self.id;
-  }
+function useRoomNotificationSettingsSuspense() {
+  const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
+  const client = useClient();
+  const room = useRoom();
+  const queryKey = makeNotificationSettingsQueryKey(room.id);
+  const { store, getInboxNotificationSettings } = getExtrasForClient(client);
+  const query = store.get().queries[queryKey];
+  if (query === void 0 || query.isLoading) {
+    throw getInboxNotificationSettings(room, queryKey);
+  }
+  if (query.error) {
+    throw query.error;
+  }
+  const selector = React3.useCallback(
+    (state) => {
+      return {
+        isLoading: false,
+        settings: client[kInternal].comments.selectNotificationSettings(
+          room.id,
+          state
+        )
+      };
+    },
+    [room]
+  );
+  const settings = useSyncExternalStoreWithSelector(
+    store.subscribe,
+    store.get,
+    store.get,
+    selector
+  );
+  return React3.useMemo(() => {
+    return [settings, updateRoomNotificationSettings];
+  }, [settings, updateRoomNotificationSettings]);
+}
+function useRoomOrNull() {
+  return React3.useContext(RoomContext);
+}
+function useRoomContextBundleOrNull() {
+  const client = useClientOrNull();
+  const room = useRoomOrNull();
+  return client && room ? getOrCreateRoomContextBundle(client) : null;
+}
+function useRoomContextBundle() {
+  const client = useClient();
+  return getOrCreateRoomContextBundle(client);
 }
-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);
+function createRoomContext(client, options) {
+  if (options?.resolveUsers) {
+    throw new Error(
+      "The 'resolveUsers' option has moved to 'createClient' from '@liveblocks/client'. Please refer to our Upgrade Guide to learn more, see https://liveblocks.io/docs/platform/upgrading/1.10."
+    );
   }
-  return new Error(message);
+  if (options?.resolveMentionSuggestions) {
+    throw new Error(
+      "The 'resolveMentionSuggestions' option has moved to 'createClient' from '@liveblocks/client'. Please refer to our Upgrade Guide to learn more, see https://liveblocks.io/docs/platform/upgrading/1.10."
+    );
+  }
+  return getOrCreateRoomContextBundle(client);
 }
 function generateQueryKey(roomId, options) {
   return `${roomId}-${stringify(options ?? {})}`;
@@ -1839,14 +1923,14 @@ function generateQueryKey(roomId, options) {
 
 // src/shared.ts
 function useSharedContextBundle() {
-  const roomContextBundle = useContext2(ContextBundle);
-  const liveblocksContextBundle = useContext2(ContextBundle2);
+  const roomContextBundle = useRoomContextBundleOrNull();
+  const liveblocksContextBundle = useLiveblocksContextBundleOrNull();
   if (roomContextBundle !== null) {
     return roomContextBundle;
   } else if (liveblocksContextBundle !== null) {
     return liveblocksContextBundle;
   } else {
-    throw new Error(
+    raise(
       "LiveblocksProvider or RoomProvider are missing from the React tree."
     );
   }
@@ -1857,142 +1941,201 @@ var missingUserError = new Error(
 var missingRoomInfoError = new Error(
   "resolveRoomsInfo didn't return anything for this room ID."
 );
-function createSharedContext(client) {
+function useUser_withClient(client, userId) {
+  const usersStore = client[kInternal2].usersStore;
+  const getUserState = useCallback2(
+    () => usersStore.getState(userId),
+    [usersStore, userId]
+  );
+  useEffect5(() => {
+    void usersStore.get(userId);
+  }, [usersStore, userId]);
+  const state = useSyncExternalStore2(
+    usersStore.subscribe,
+    getUserState,
+    getUserState
+  );
+  return state ? {
+    isLoading: state.isLoading,
+    user: state.data,
+    // Return an error if `undefined` was returned by `resolveUsers` for this user ID
+    error: !state.isLoading && !state.data && !state.error ? missingUserError : state.error
+  } : { isLoading: true };
+}
+function useUserSuspense_withClient(client, userId) {
   const usersStore = client[kInternal2].usersStore;
+  const getUserState = useCallback2(
+    () => usersStore.getState(userId),
+    [usersStore, userId]
+  );
+  const userState = getUserState();
+  if (!userState || userState.isLoading) {
+    throw usersStore.get(userId);
+  }
+  if (userState.error) {
+    throw userState.error;
+  }
+  if (!userState.data) {
+    throw missingUserError;
+  }
+  const state = useSyncExternalStore2(
+    usersStore.subscribe,
+    getUserState,
+    getUserState
+  );
+  return {
+    isLoading: false,
+    user: state?.data,
+    error: state?.error
+  };
+}
+function useRoomInfo_withClient(client, roomId) {
   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 ? {
-      isLoading: state.isLoading,
-      user: state.data,
-      // Return an error if `undefined` was returned by `resolveUsers` for this user ID
-      error: !state.isLoading && !state.data && !state.error ? missingUserError : state.error
-    } : { isLoading: true };
+  const getRoomInfoState = useCallback2(
+    () => roomsInfoStore.getState(roomId),
+    [roomsInfoStore, roomId]
+  );
+  useEffect5(() => {
+    void roomsInfoStore.get(roomId);
+  }, [roomsInfoStore, roomId]);
+  const state = useSyncExternalStore2(
+    roomsInfoStore.subscribe,
+    getRoomInfoState,
+    getRoomInfoState
+  );
+  return state ? {
+    isLoading: state.isLoading,
+    info: state.data,
+    // Return an error if `undefined` was returned by `resolveRoomsInfo` for this room ID
+    error: !state.isLoading && !state.data && !state.error ? missingRoomInfoError : state.error
+  } : { isLoading: true };
+}
+function useRoomInfoSuspense_withClient(client, roomId) {
+  const roomsInfoStore = client[kInternal2].roomsInfoStore;
+  const getRoomInfoState = useCallback2(
+    () => roomsInfoStore.getState(roomId),
+    [roomsInfoStore, roomId]
+  );
+  const roomInfoState = getRoomInfoState();
+  if (!roomInfoState || roomInfoState.isLoading) {
+    throw roomsInfoStore.get(roomId);
   }
-  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;
-    }
-    if (!userState.data) {
-      throw missingUserError;
+  if (roomInfoState.error) {
+    throw roomInfoState.error;
+  }
+  if (!roomInfoState.data) {
+    throw missingRoomInfoError;
+  }
+  const state = useSyncExternalStore2(
+    roomsInfoStore.subscribe,
+    getRoomInfoState,
+    getRoomInfoState
+  );
+  return {
+    isLoading: false,
+    info: state?.data,
+    error: state?.error
+  };
+}
+function createSharedContext(client) {
+  return {
+    classic: {
+      useUser: (userId) => useUser_withClient(client, userId),
+      useRoomInfo: (roomId) => useRoomInfo_withClient(client, roomId)
+    },
+    suspense: {
+      useUser: (userId) => useUserSuspense_withClient(client, userId),
+      useRoomInfo: (roomId) => useRoomInfoSuspense_withClient(client, roomId)
     }
-    const state = useSyncExternalStore2(
-      usersStore.subscribe,
-      getUserState,
-      getUserState
-    );
+  };
+}
+
+// src/liveblocks.tsx
+var ClientContext = createContext2(null);
+var _extras2 = /* @__PURE__ */ new WeakMap();
+var _bundles2 = /* @__PURE__ */ new WeakMap();
+var POLLING_INTERVAL2 = 5 * 1e3;
+var INBOX_NOTIFICATIONS_QUERY = "INBOX_NOTIFICATIONS";
+function selectorFor_useInboxNotifications(client, state) {
+  const query = state.queries[INBOX_NOTIFICATIONS_QUERY];
+  if (query === void 0 || query.isLoading) {
     return {
-      isLoading: false,
-      user: state?.data,
-      error: state?.error
+      isLoading: true
     };
   }
-  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 ? {
-      isLoading: state.isLoading,
-      info: state.data,
-      // Return an error if `undefined` was returned by `resolveRoomsInfo` for this room ID
-      error: !state.isLoading && !state.data && !state.error ? missingRoomInfoError : state.error
-    } : { isLoading: true };
+  if (query.error !== void 0) {
+    return {
+      error: query.error,
+      isLoading: false
+    };
   }
-  function useRoomInfoSuspense(roomId) {
-    const getRoomInfoState = useCallback2(
-      () => roomsInfoStore.getState(roomId),
-      [roomId]
-    );
-    const roomInfoState = getRoomInfoState();
-    if (!roomInfoState || roomInfoState.isLoading) {
-      throw roomsInfoStore.get(roomId);
-    }
-    if (roomInfoState.error) {
-      throw roomInfoState.error;
-    }
-    if (!roomInfoState.data) {
-      throw missingRoomInfoError;
+  return {
+    inboxNotifications: client[kInternal3].comments.selectedInboxNotifications(state),
+    isLoading: false
+  };
+}
+function selectorFor_useInboxNotificationsSuspense(client, state) {
+  return {
+    inboxNotifications: client[kInternal3].comments.selectedInboxNotifications(state),
+    isLoading: false
+  };
+}
+function selectUnreadInboxNotificationsCount(client, state) {
+  let count = 0;
+  for (const notification of client[kInternal3].comments.selectedInboxNotifications(state)) {
+    if (notification.readAt === null || notification.readAt < notification.notifiedAt) {
+      count++;
     }
-    const state = useSyncExternalStore2(
-      roomsInfoStore.subscribe,
-      getRoomInfoState,
-      getRoomInfoState
-    );
+  }
+  return count;
+}
+function selectorFor_useUnreadInboxNotificationsCount(client, state) {
+  const query = state.queries[INBOX_NOTIFICATIONS_QUERY];
+  if (query === void 0 || query.isLoading) {
     return {
-      isLoading: false,
-      info: state?.data,
-      error: state?.error
+      isLoading: true
     };
   }
-  const bundle = {
-    useUser,
-    useRoomInfo,
-    suspense: {
-      useUser: useUserSuspense,
-      useRoomInfo: useRoomInfoSuspense
-    }
+  if (query.error !== void 0) {
+    return {
+      error: query.error,
+      isLoading: false
+    };
+  }
+  return {
+    isLoading: false,
+    count: selectUnreadInboxNotificationsCount(client, state)
   };
-  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.");
+function selectorFor_useUnreadInboxNotificationsCountSuspense(client, state) {
+  return {
+    isLoading: false,
+    count: selectUnreadInboxNotificationsCount(client, state)
+  };
+}
+function getOrCreateContextBundle(client) {
+  let bundle = _bundles2.get(client);
+  if (!bundle) {
+    bundle = makeLiveblocksContextBundle(client);
+    _bundles2.set(client, bundle);
   }
   return bundle;
 }
-var POLLING_INTERVAL2 = 60 * 1e3;
-var INBOX_NOTIFICATIONS_QUERY = "INBOX_NOTIFICATIONS";
-function createLiveblocksContext(client) {
-  const shared = createSharedContext(client);
+function getExtrasForClient2(client) {
+  let extras = _extras2.get(client);
+  if (!extras) {
+    extras = makeExtrasForClient2(client);
+    _extras2.set(client, extras);
+  }
+  return extras;
+}
+function makeExtrasForClient2(client) {
   const store = client[kInternal3].cacheStore;
   const notifications = client[kInternal3].notifications;
-  function LiveblocksProvider(props) {
-    return /* @__PURE__ */ React3.createElement(
-      ContextBundle2.Provider,
-      {
-        value: bundle
-      },
-      props.children
-    );
-  }
   let fetchInboxNotificationsRequest = null;
-  let inboxNotificationsSubscribers = 0;
   let lastRequestedAt;
-  const poller = makePoller2(refreshThreadsAndNotifications);
-  function refreshThreadsAndNotifications() {
-    return notifications.getInboxNotifications({ since: lastRequestedAt }).then(
+  const poller = makePoller2(
+    () => notifications.getInboxNotifications({ since: lastRequestedAt }).then(
       (result) => {
         lastRequestedAt = result.meta.requestedAt;
         store.updateThreadsAndNotifications(
@@ -2005,24 +2148,8 @@ function createLiveblocksContext(client) {
       },
       () => {
       }
-    );
-  }
-  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({ retryCount } = { retryCount: 0 }) {
     if (fetchInboxNotificationsRequest !== null) {
       return fetchInboxNotificationsRequest;
@@ -2058,132 +2185,133 @@ function createLiveblocksContext(client) {
     }
     return;
   }
-  function useInboxNotificationsSelectorCallback(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
-    };
-  }
-  function useInboxNotifications() {
-    useEffect5(() => {
-      void fetchInboxNotifications();
-      incrementInboxNotificationsSubscribers();
-      return () => decrementInboxNotificationsSubscribers();
-    }, []);
-    const result = useSyncExternalStoreWithSelector2(
-      store.subscribe,
-      store.get,
-      store.get,
-      useInboxNotificationsSelectorCallback
-    );
-    return result;
-  }
-  function useInboxNotificationsSuspenseSelector(state) {
-    return {
-      inboxNotifications: selectedInboxNotifications(state),
-      isLoading: false
-    };
-  }
-  function useInboxNotificationsSuspense() {
-    const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
-    if (query === void 0 || query.isLoading) {
-      throw fetchInboxNotifications();
-    }
-    if (query.error !== void 0) {
-      throw query.error;
-    }
-    React3.useEffect(() => {
-      incrementInboxNotificationsSubscribers();
-      return () => {
-        decrementInboxNotificationsSubscribers();
-      };
-    }, []);
-    return useSyncExternalStoreWithSelector2(
-      store.subscribe,
-      store.get,
-      store.get,
-      useInboxNotificationsSuspenseSelector
-    );
-  }
-  function selectUnreadInboxNotificationsCount(state) {
-    let count = 0;
-    for (const notification of selectedInboxNotifications(state)) {
-      if (notification.readAt === null || notification.readAt < notification.notifiedAt) {
-        count++;
+  let inboxNotificationsSubscribers = 0;
+  function useSubscribeToInboxNotificationsEffect(options) {
+    const autoFetch = useInitial(options?.autoFetch ?? true);
+    useEffect6(() => {
+      if (autoFetch) {
+        void fetchInboxNotifications();
       }
-    }
-    return count;
-  }
-  function useUnreadInboxNotificationsCountSelector(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
+      inboxNotificationsSubscribers++;
+      poller.start(POLLING_INTERVAL2);
+      return () => {
+        if (inboxNotificationsSubscribers <= 0) {
+          console.warn(
+            `Internal unexpected behavior. Cannot decrease subscriber count for query "${INBOX_NOTIFICATIONS_QUERY}"`
+          );
+          return;
+        }
+        inboxNotificationsSubscribers--;
+        if (inboxNotificationsSubscribers <= 0) {
+          poller.stop();
+        }
       };
-    }
-    return {
-      isLoading: false,
-      count: selectUnreadInboxNotificationsCount(state)
-    };
-  }
-  function useUnreadInboxNotificationsCount() {
-    useEffect5(() => {
-      void fetchInboxNotifications();
-      incrementInboxNotificationsSubscribers();
-      return () => decrementInboxNotificationsSubscribers();
-    }, []);
-    return useSyncExternalStoreWithSelector2(
-      store.subscribe,
-      store.get,
-      store.get,
-      useUnreadInboxNotificationsCountSelector
-    );
+    }, [autoFetch]);
   }
-  function useUnreadInboxNotificationsCountSuspenseSelector(state) {
-    return {
-      isLoading: false,
-      count: selectUnreadInboxNotificationsCount(state)
-    };
+  return {
+    store,
+    notifications,
+    fetchInboxNotifications,
+    useSubscribeToInboxNotificationsEffect
+  };
+}
+function makeLiveblocksContextBundle(client) {
+  const useInboxNotificationThread = (inboxNotificationId) => useInboxNotificationThread_withClient(client, inboxNotificationId);
+  const useMarkInboxNotificationAsRead = () => useMarkInboxNotificationAsRead_withClient(client);
+  const useMarkAllInboxNotificationsAsRead = () => useMarkAllInboxNotificationsAsRead_withClient(client);
+  function LiveblocksProvider2(props) {
+    return /* @__PURE__ */ React4.createElement(ClientContext.Provider, { value: client }, props.children);
   }
-  function useUnreadInboxNotificationsCountSuspense() {
-    const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
-    if (query === void 0 || query.isLoading) {
-      throw fetchInboxNotifications();
+  const shared = createSharedContext(client);
+  const bundle = {
+    LiveblocksProvider: LiveblocksProvider2,
+    useInboxNotifications: () => useInboxNotifications_withClient(client),
+    useUnreadInboxNotificationsCount: () => useUnreadInboxNotificationsCount_withClient(client),
+    useMarkInboxNotificationAsRead,
+    useMarkAllInboxNotificationsAsRead,
+    useInboxNotificationThread,
+    ...shared.classic,
+    suspense: {
+      LiveblocksProvider: LiveblocksProvider2,
+      useInboxNotifications: () => useInboxNotificationsSuspense_withClient(client),
+      useUnreadInboxNotificationsCount: () => useUnreadInboxNotificationsCountSuspense_withClient(client),
+      useMarkInboxNotificationAsRead,
+      useMarkAllInboxNotificationsAsRead,
+      useInboxNotificationThread,
+      ...shared.suspense
+    },
+    [kInternal3]: {
+      useCurrentUserId: () => useCurrentUserId_withClient(client)
     }
-    React3.useEffect(() => {
-      incrementInboxNotificationsSubscribers();
-      return () => {
-        decrementInboxNotificationsSubscribers();
-      };
-    }, []);
-    return useSyncExternalStoreWithSelector2(
-      store.subscribe,
-      store.get,
-      store.get,
-      useUnreadInboxNotificationsCountSuspenseSelector
-    );
-  }
-  function useMarkInboxNotificationAsRead() {
-    return useCallback3((inboxNotificationId) => {
-      const optimisticUpdateId = nanoid3();
+  };
+  return Object.defineProperty(bundle, kInternal3, {
+    enumerable: false
+  });
+}
+function useInboxNotifications_withClient(client) {
+  const { store, useSubscribeToInboxNotificationsEffect } = getExtrasForClient2(client);
+  useSubscribeToInboxNotificationsEffect();
+  return useSyncExternalStoreWithSelector2(
+    store.subscribe,
+    store.get,
+    store.get,
+    () => selectorFor_useInboxNotifications(client, store.get())
+  );
+}
+function useInboxNotificationsSuspense_withClient(client) {
+  const {
+    store,
+    fetchInboxNotifications,
+    useSubscribeToInboxNotificationsEffect
+  } = getExtrasForClient2(client);
+  const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
+  if (query === void 0 || query.isLoading) {
+    throw fetchInboxNotifications();
+  }
+  if (query.error !== void 0) {
+    throw query.error;
+  }
+  useSubscribeToInboxNotificationsEffect({ autoFetch: false });
+  return useSyncExternalStoreWithSelector2(
+    store.subscribe,
+    store.get,
+    store.get,
+    () => selectorFor_useInboxNotificationsSuspense(client, store.get())
+  );
+}
+function useUnreadInboxNotificationsCount_withClient(client) {
+  const { store, useSubscribeToInboxNotificationsEffect } = getExtrasForClient2(client);
+  useSubscribeToInboxNotificationsEffect();
+  return useSyncExternalStoreWithSelector2(
+    store.subscribe,
+    store.get,
+    store.get,
+    () => selectorFor_useUnreadInboxNotificationsCount(client, store.get())
+  );
+}
+function useUnreadInboxNotificationsCountSuspense_withClient(client) {
+  const {
+    store,
+    fetchInboxNotifications,
+    useSubscribeToInboxNotificationsEffect
+  } = getExtrasForClient2(client);
+  const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
+  if (query === void 0 || query.isLoading) {
+    throw fetchInboxNotifications();
+  }
+  useSubscribeToInboxNotificationsEffect({ autoFetch: false });
+  return useSyncExternalStoreWithSelector2(
+    store.subscribe,
+    store.get,
+    store.get,
+    () => selectorFor_useUnreadInboxNotificationsCountSuspense(client, store.get())
+  );
+}
+function useMarkInboxNotificationAsRead_withClient(client) {
+  return useCallback3(
+    (inboxNotificationId) => {
+      const { store, notifications } = getExtrasForClient2(client);
+      const optimisticUpdateId = nanoid2();
       const readAt = /* @__PURE__ */ new Date();
       store.pushOptimisticUpdate({
         type: "mark-inbox-notification-as-read",
@@ -2227,96 +2355,99 @@ function createLiveblocksContext(client) {
           }));
         }
       );
-    }, []);
-  }
-  function useMarkAllInboxNotificationsAsRead() {
-    return useCallback3(() => {
-      const optimisticUpdateId = nanoid3();
-      const readAt = /* @__PURE__ */ new Date();
-      store.pushOptimisticUpdate({
-        type: "mark-inbox-notifications-as-read",
-        id: optimisticUpdateId,
-        readAt
-      });
-      notifications.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
+    },
+    [client]
+  );
+}
+function useMarkAllInboxNotificationsAsRead_withClient(client) {
+  return useCallback3(() => {
+    const { store, notifications } = getExtrasForClient2(client);
+    const optimisticUpdateId = nanoid2();
+    const readAt = /* @__PURE__ */ new Date();
+    store.pushOptimisticUpdate({
+      type: "mark-inbox-notifications-as-read",
+      id: optimisticUpdateId,
+      readAt
+    });
+    notifications.markAllInboxNotificationsAsRead().then(
+      () => {
+        store.set((state) => ({
+          ...state,
+          inboxNotifications: Object.fromEntries(
+            Array.from(Object.entries(state.inboxNotifications)).map(
+              ([id, inboxNotification]) => [
+                id,
+                { ...inboxNotification, readAt }
+              ]
             )
-          }));
-        }
-      );
-    }, []);
-  }
-  function useThreadFromCache(threadId) {
-    const selector = useCallback3(
-      (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;
+          ),
+          optimisticUpdates: state.optimisticUpdates.filter(
+            (update) => update.id !== optimisticUpdateId
+          )
+        }));
       },
-      [threadId]
-    );
-    return useSyncExternalStoreWithSelector2(
-      store.subscribe,
-      store.get,
-      store.get,
-      selector
-    );
-  }
-  const currentUserIdStore = client[kInternal3].currentUserIdStore;
-  function useCurrentUserId() {
-    return useSyncExternalStore3(
-      currentUserIdStore.subscribe,
-      currentUserIdStore.get,
-      currentUserIdStore.get
+      () => {
+        store.set((state) => ({
+          ...state,
+          optimisticUpdates: state.optimisticUpdates.filter(
+            (update) => update.id !== optimisticUpdateId
+          )
+        }));
+      }
     );
-  }
-  const bundle = {
-    LiveblocksProvider,
-    useInboxNotifications,
-    useUnreadInboxNotificationsCount,
-    useMarkInboxNotificationAsRead,
-    useMarkAllInboxNotificationsAsRead,
-    ...shared,
-    suspense: {
-      LiveblocksProvider,
-      useInboxNotifications: useInboxNotificationsSuspense,
-      useUnreadInboxNotificationsCount: useUnreadInboxNotificationsCountSuspense,
-      useMarkInboxNotificationAsRead,
-      useMarkAllInboxNotificationsAsRead,
-      ...shared.suspense
+  }, [client]);
+}
+function useInboxNotificationThread_withClient(client, inboxNotificationId) {
+  const { store } = getExtrasForClient2(client);
+  const selector = useCallback3(
+    (state) => {
+      const inboxNotification = state.inboxNotifications[inboxNotificationId] ?? raise2(`Inbox notification with ID "${inboxNotificationId}" not found`);
+      if (inboxNotification.kind !== "thread") {
+        raise2(
+          `Inbox notification with ID "${inboxNotificationId}" is not of kind "thread"`
+        );
+      }
+      const thread = state.threads[inboxNotification.threadId] ?? raise2(
+        `Thread with ID "${inboxNotification.threadId}" not found, this inbox notification might not be of kind "thread"`
+      );
+      return thread;
     },
-    [kInternal3]: {
-      useThreadFromCache,
-      useCurrentUserId
-    }
-  };
-  return Object.defineProperty(bundle, kInternal3, {
-    enumerable: false
-  });
+    [inboxNotificationId]
+  );
+  return useSyncExternalStoreWithSelector2(
+    store.subscribe,
+    store.get,
+    store.get,
+    selector
+  );
+}
+function useCurrentUserId_withClient(client) {
+  const currentUserIdStore = client[kInternal3].currentUserIdStore;
+  return useSyncExternalStore3(
+    currentUserIdStore.subscribe,
+    currentUserIdStore.get,
+    currentUserIdStore.get
+  );
+}
+function useClientOrNull() {
+  return useContext2(ClientContext);
+}
+function useClient() {
+  return useClientOrNull() ?? raise2("LiveblocksProvider is missing from the React tree.");
+}
+function LiveblocksProvider(props) {
+  return /* @__PURE__ */ React4.createElement(ClientContext.Provider, { value: props.client }, props.children);
+}
+function useLiveblocksContextBundleOrNull() {
+  const client = useClientOrNull();
+  return client !== null ? getOrCreateContextBundle(client) : null;
+}
+function useLiveblocksContextBundle() {
+  const client = useClient();
+  return getOrCreateContextBundle(client);
+}
+function createLiveblocksContext(client) {
+  return getOrCreateContextBundle(client);
 }
 
 // src/index.ts
@@ -2324,10 +2455,14 @@ import { shallow as shallow2 } from "@liveblocks/client";
 detectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);
 export {
   ClientSideSuspense,
+  CreateThreadError,
+  DeleteCommentError,
   createLiveblocksContext,
   createRoomContext,
   shallow2 as shallow,
+  useClient,
   useLiveblocksContextBundle,
+  useLiveblocksContextBundleOrNull,
   useRoomContextBundle,
   useSharedContextBundle
 };