canvu-react 0.3.8 → 0.3.9

package/dist/realtime.d.cts

@@ -1,5 +1,5 @@
-import { P as PlacementPreview, X as RemotePresenceMarkupStroke, Y as RemotePresencePeer, Z as RealtimeConnectionState, J as VectorViewportHandle, b as VectorToolDefinition, K as VectorViewportProps, C as CanvasPlugin, f as CanvasPluginRenderContext } from './types-CW146bKP.cjs';
-export { _ as PresenceOverlayRenderContext } from './types-CW146bKP.cjs';
+import { P as PlacementPreview, X as RemotePresenceMarkupStroke, Y as RemotePresencePeer, Z as RemotePresenceCamera, _ as RealtimeConnectionState, J as VectorViewportHandle, b as VectorToolDefinition, K as VectorViewportProps, C as CanvasPlugin, f as CanvasPluginRenderContext } from './types-BtLGGw0r.cjs';
+export { $ as PresenceOverlayRenderContext } from './types-BtLGGw0r.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { C as Camera2D } from './camera-BwQjm5oh.cjs';
 import { V as VectorSceneItem, R as Rect } from './types-CB0TZZuk.cjs';
@@ -62,6 +62,7 @@ type RealtimePresencePayload = {
         readonly y: number;
     } | null;
     readonly markupStroke?: RemotePresenceMarkupStroke | null;
+    readonly camera?: RemotePresenceCamera | null;
     readonly activeTool?: string;
 };
 type RealtimeClientPeer = {
@@ -191,6 +192,7 @@ type UseRealtimeCommentsResult = {
     tools: VectorToolDefinition[];
     overlay: ReactNode;
     viewport: RealtimeCommentsViewportBindings;
+    handleViewportItemsChange: (items: VectorSceneItem[], onItemsChange?: (items: VectorSceneItem[]) => void) => void;
     isComposerOpen: boolean;
     closeComposer: () => void;
 };
@@ -215,16 +217,19 @@ type UseRealtimeSessionOptions = {
     connectTimeoutMs?: number;
     onError?: (message: string) => void;
 };
-type RealtimeViewportPresenceBindings = Pick<VectorViewportProps, "remotePresence" | "onWorldPointerMove" | "onWorldPointerLeave" | "onPlacementPreviewChange">;
+type RealtimeViewportPresenceBindings = Pick<VectorViewportProps, "remotePresence" | "onWorldPointerMove" | "onWorldPointerLeave" | "onPlacementPreviewChange" | "onCameraChange">;
+type BindViewportPresenceOptions = {
+    activeTool?: string;
+    viewportRef?: RefObject<VectorViewportHandle | null>;
+};
 type UseRealtimeSessionResult = {
     connection: RealtimeConnectionInfo;
     sessionPeers: RealtimeSessionPeer[];
     remotePresence: RealtimeSessionPeer[];
     remoteAdapter: VectorCanvasRemoteAdapter;
     document: RealtimeDocumentSnapshot | null;
-    bindViewportPresence: (options?: {
-        activeTool?: string;
-    }) => RealtimeViewportPresenceBindings;
+    bindViewportPresence: (options?: BindViewportPresenceOptions) => RealtimeViewportPresenceBindings;
+    syncViewportPresence: (options?: BindViewportPresenceOptions) => boolean;
     disconnect: () => void;
     reconnectNow: () => void;
 };
@@ -307,4 +312,12 @@ type RealtimeSessionPluginOptions = RealtimeSessionPanelProps;
  */
 declare function realtimeSessionPlugin(options: RealtimeSessionPluginOptions): CanvasPlugin;
 
-export { PresenceRemoteLayer, type PresenceRemoteLayerProps, REALTIME_COMMENT_TOOL, type RealtimeClientMessage, type RealtimeCollaborationPluginOptions, type RealtimeCommentData, type RealtimeCommentsAuthor, RealtimeCommentsOverlay, type RealtimeCommentsOverlayProps, type RealtimeCommentsPluginOptions, type RealtimeCommentsViewportBindings, type RealtimeConnectionInfo, RealtimeConnectionState, type RealtimeDocumentSnapshot, type RealtimePresencePayload, type RealtimeServerMessage, RealtimeSessionPanel, type RealtimeSessionPanelProps, type RealtimeSessionPeer, type RealtimeSessionPluginOptions, type RealtimeViewportPresenceBindings, RemotePresenceMarkupStroke, RemotePresencePeer, type UseRealtimeCommentsOptions, type UseRealtimeCommentsResult, type UseRealtimeSessionOptions, type UseRealtimeSessionResult, createRealtimeCommentAvatarDataUrl, createRealtimeCommentDraftItem, createRealtimeCommentItem, defaultPresenceColorForId, getRealtimeCommentData, isRealtimeCommentDraftItem, isRealtimeCommentItem, parseRealtimeClientMessage, parseRealtimeServerMessage, realtimeCollaborationPlugin, realtimeCommentsPlugin, realtimeSessionPlugin, remoteMarkupStrokeFromPlacementPreview, useRealtimeComments, useRealtimeSession, withRealtimeCommentTool };
+type UseRealtimePeerFollowOptions = {
+    viewportRef: RefObject<VectorViewportHandle | null>;
+    sessionPeers: RealtimeSessionPeer[];
+    followedPeerId: string | null | undefined;
+    onFollowEnd?: () => void;
+};
+declare function useRealtimePeerFollow(options: UseRealtimePeerFollowOptions): void;
+
+export { PresenceRemoteLayer, type PresenceRemoteLayerProps, REALTIME_COMMENT_TOOL, type RealtimeClientMessage, type RealtimeCollaborationPluginOptions, type RealtimeCommentData, type RealtimeCommentsAuthor, RealtimeCommentsOverlay, type RealtimeCommentsOverlayProps, type RealtimeCommentsPluginOptions, type RealtimeCommentsViewportBindings, type RealtimeConnectionInfo, RealtimeConnectionState, type RealtimeDocumentSnapshot, type RealtimePresencePayload, type RealtimeServerMessage, RealtimeSessionPanel, type RealtimeSessionPanelProps, type RealtimeSessionPeer, type RealtimeSessionPluginOptions, type RealtimeViewportPresenceBindings, RemotePresenceCamera, RemotePresenceMarkupStroke, RemotePresencePeer, type UseRealtimeCommentsOptions, type UseRealtimeCommentsResult, type UseRealtimePeerFollowOptions, type UseRealtimeSessionOptions, type UseRealtimeSessionResult, createRealtimeCommentAvatarDataUrl, createRealtimeCommentDraftItem, createRealtimeCommentItem, defaultPresenceColorForId, getRealtimeCommentData, isRealtimeCommentDraftItem, isRealtimeCommentItem, parseRealtimeClientMessage, parseRealtimeServerMessage, realtimeCollaborationPlugin, realtimeCommentsPlugin, realtimeSessionPlugin, remoteMarkupStrokeFromPlacementPreview, useRealtimeComments, useRealtimePeerFollow, useRealtimeSession, withRealtimeCommentTool };

package/dist/realtime.d.ts

@@ -1,5 +1,5 @@
-import { P as PlacementPreview, X as RemotePresenceMarkupStroke, Y as RemotePresencePeer, Z as RealtimeConnectionState, J as VectorViewportHandle, b as VectorToolDefinition, K as VectorViewportProps, C as CanvasPlugin, f as CanvasPluginRenderContext } from './types-CpqlbbCP.js';
-export { _ as PresenceOverlayRenderContext } from './types-CpqlbbCP.js';
+import { P as PlacementPreview, X as RemotePresenceMarkupStroke, Y as RemotePresencePeer, Z as RemotePresenceCamera, _ as RealtimeConnectionState, J as VectorViewportHandle, b as VectorToolDefinition, K as VectorViewportProps, C as CanvasPlugin, f as CanvasPluginRenderContext } from './types-ChnTSRSe.js';
+export { $ as PresenceOverlayRenderContext } from './types-ChnTSRSe.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { C as Camera2D } from './camera-KwCYYPhm.js';
 import { V as VectorSceneItem, R as Rect } from './types-CB0TZZuk.js';
@@ -62,6 +62,7 @@ type RealtimePresencePayload = {
         readonly y: number;
     } | null;
     readonly markupStroke?: RemotePresenceMarkupStroke | null;
+    readonly camera?: RemotePresenceCamera | null;
     readonly activeTool?: string;
 };
 type RealtimeClientPeer = {
@@ -191,6 +192,7 @@ type UseRealtimeCommentsResult = {
     tools: VectorToolDefinition[];
     overlay: ReactNode;
     viewport: RealtimeCommentsViewportBindings;
+    handleViewportItemsChange: (items: VectorSceneItem[], onItemsChange?: (items: VectorSceneItem[]) => void) => void;
     isComposerOpen: boolean;
     closeComposer: () => void;
 };
@@ -215,16 +217,19 @@ type UseRealtimeSessionOptions = {
     connectTimeoutMs?: number;
     onError?: (message: string) => void;
 };
-type RealtimeViewportPresenceBindings = Pick<VectorViewportProps, "remotePresence" | "onWorldPointerMove" | "onWorldPointerLeave" | "onPlacementPreviewChange">;
+type RealtimeViewportPresenceBindings = Pick<VectorViewportProps, "remotePresence" | "onWorldPointerMove" | "onWorldPointerLeave" | "onPlacementPreviewChange" | "onCameraChange">;
+type BindViewportPresenceOptions = {
+    activeTool?: string;
+    viewportRef?: RefObject<VectorViewportHandle | null>;
+};
 type UseRealtimeSessionResult = {
     connection: RealtimeConnectionInfo;
     sessionPeers: RealtimeSessionPeer[];
     remotePresence: RealtimeSessionPeer[];
     remoteAdapter: VectorCanvasRemoteAdapter;
     document: RealtimeDocumentSnapshot | null;
-    bindViewportPresence: (options?: {
-        activeTool?: string;
-    }) => RealtimeViewportPresenceBindings;
+    bindViewportPresence: (options?: BindViewportPresenceOptions) => RealtimeViewportPresenceBindings;
+    syncViewportPresence: (options?: BindViewportPresenceOptions) => boolean;
     disconnect: () => void;
     reconnectNow: () => void;
 };
@@ -307,4 +312,12 @@ type RealtimeSessionPluginOptions = RealtimeSessionPanelProps;
  */
 declare function realtimeSessionPlugin(options: RealtimeSessionPluginOptions): CanvasPlugin;
 
-export { PresenceRemoteLayer, type PresenceRemoteLayerProps, REALTIME_COMMENT_TOOL, type RealtimeClientMessage, type RealtimeCollaborationPluginOptions, type RealtimeCommentData, type RealtimeCommentsAuthor, RealtimeCommentsOverlay, type RealtimeCommentsOverlayProps, type RealtimeCommentsPluginOptions, type RealtimeCommentsViewportBindings, type RealtimeConnectionInfo, RealtimeConnectionState, type RealtimeDocumentSnapshot, type RealtimePresencePayload, type RealtimeServerMessage, RealtimeSessionPanel, type RealtimeSessionPanelProps, type RealtimeSessionPeer, type RealtimeSessionPluginOptions, type RealtimeViewportPresenceBindings, RemotePresenceMarkupStroke, RemotePresencePeer, type UseRealtimeCommentsOptions, type UseRealtimeCommentsResult, type UseRealtimeSessionOptions, type UseRealtimeSessionResult, createRealtimeCommentAvatarDataUrl, createRealtimeCommentDraftItem, createRealtimeCommentItem, defaultPresenceColorForId, getRealtimeCommentData, isRealtimeCommentDraftItem, isRealtimeCommentItem, parseRealtimeClientMessage, parseRealtimeServerMessage, realtimeCollaborationPlugin, realtimeCommentsPlugin, realtimeSessionPlugin, remoteMarkupStrokeFromPlacementPreview, useRealtimeComments, useRealtimeSession, withRealtimeCommentTool };
+type UseRealtimePeerFollowOptions = {
+    viewportRef: RefObject<VectorViewportHandle | null>;
+    sessionPeers: RealtimeSessionPeer[];
+    followedPeerId: string | null | undefined;
+    onFollowEnd?: () => void;
+};
+declare function useRealtimePeerFollow(options: UseRealtimePeerFollowOptions): void;
+
+export { PresenceRemoteLayer, type PresenceRemoteLayerProps, REALTIME_COMMENT_TOOL, type RealtimeClientMessage, type RealtimeCollaborationPluginOptions, type RealtimeCommentData, type RealtimeCommentsAuthor, RealtimeCommentsOverlay, type RealtimeCommentsOverlayProps, type RealtimeCommentsPluginOptions, type RealtimeCommentsViewportBindings, type RealtimeConnectionInfo, RealtimeConnectionState, type RealtimeDocumentSnapshot, type RealtimePresencePayload, type RealtimeServerMessage, RealtimeSessionPanel, type RealtimeSessionPanelProps, type RealtimeSessionPeer, type RealtimeSessionPluginOptions, type RealtimeViewportPresenceBindings, RemotePresenceCamera, RemotePresenceMarkupStroke, RemotePresencePeer, type UseRealtimeCommentsOptions, type UseRealtimeCommentsResult, type UseRealtimePeerFollowOptions, type UseRealtimeSessionOptions, type UseRealtimeSessionResult, createRealtimeCommentAvatarDataUrl, createRealtimeCommentDraftItem, createRealtimeCommentItem, defaultPresenceColorForId, getRealtimeCommentData, isRealtimeCommentDraftItem, isRealtimeCommentItem, parseRealtimeClientMessage, parseRealtimeServerMessage, realtimeCollaborationPlugin, realtimeCommentsPlugin, realtimeSessionPlugin, remoteMarkupStrokeFromPlacementPreview, useRealtimeComments, useRealtimePeerFollow, useRealtimeSession, withRealtimeCommentTool };

package/dist/realtime.js

@@ -233,6 +233,19 @@ function parseCursor(value) {
   if (x == null || y == null) return void 0;
   return { x, y };
 }
+function parseCamera(value) {
+  if (value === null) return null;
+  if (!isRecord(value)) return void 0;
+  const x = getNumber(value.x);
+  const y = getNumber(value.y);
+  const zoom = getNumber(value.zoom);
+  const viewportWidth = getNumber(value.viewportWidth);
+  const viewportHeight = getNumber(value.viewportHeight);
+  if (x == null || y == null || zoom == null || viewportWidth == null || viewportHeight == null) {
+    return void 0;
+  }
+  return { x, y, zoom, viewportWidth, viewportHeight };
+}
 function parseMarkupStroke(value) {
   if (value === null) return null;
   if (!isRecord(value) || !Array.isArray(value.points)) return void 0;
@@ -256,9 +269,12 @@ function parsePresencePayload(value) {
   const markupStroke = parseMarkupStroke(value.markupStroke);
   if (markupStroke === void 0 && value.markupStroke !== void 0)
     return void 0;
+  const camera = parseCamera(value.camera);
+  if (camera === void 0 && value.camera !== void 0) return void 0;
   return {
     cursor,
     ...markupStroke !== void 0 ? { markupStroke } : {},
+    ...camera !== void 0 ? { camera } : {},
     ...getString(value.activeTool) ? { activeTool: getString(value.activeTool) } : {}
   };
 }
@@ -292,6 +308,8 @@ function parseRealtimeSessionPeer(value) {
   const markupStroke = parseMarkupStroke(value.markupStroke);
   if (markupStroke === void 0 && value.markupStroke !== void 0)
     return void 0;
+  const camera = parseCamera(value.camera);
+  if (camera === void 0 && value.camera !== void 0) return void 0;
   const isSelf = value.isSelf === true;
   const connectionState = getString(value.connectionState);
   return {
@@ -307,6 +325,7 @@ function parseRealtimeSessionPeer(value) {
     ...getString(value.color) ? { color: getString(value.color) } : {},
     ...getString(value.image) ? { image: getString(value.image) } : {},
     ...markupStroke !== void 0 ? { markupStroke } : {},
+    ...camera !== void 0 ? { camera } : {},
     ...getString(value.activeTool) ? { activeTool: getString(value.activeTool) } : {},
     ...connectionState ? { connectionState } : {}
   };
@@ -1518,20 +1537,21 @@ function useRealtimeComments({
     }),
     [author.color]
   );
-  const onViewportItemsChange = useCallback(
-    (nextItems) => {
+  const handleViewportItemsChange = useCallback(
+    (nextItems, overrideOnItemsChange) => {
+      const applyItemsChange = overrideOnItemsChange ?? onItemsChange;
       const currentIds = new Set(items.map((item) => item.id));
       const draftItem = nextItems.find(
         (item) => !currentIds.has(item.id) && isRealtimeCommentDraftItem(item)
       );
       if (!draftItem) {
-        onItemsChange(nextItems);
+        applyItemsChange(nextItems);
         return;
       }
       const filteredItems = nextItems.filter((item) => item.id !== draftItem.id);
       const shouldPersistFiltered = filteredItems.length !== items.length || filteredItems.some((item, index) => items[index]?.id !== item.id);
       if (shouldPersistFiltered) {
-        onItemsChange(filteredItems);
+        applyItemsChange(filteredItems);
       }
       setCommentComposer({
         worldX: draftItem.bounds.x + draftItem.bounds.width / 2,
@@ -1631,22 +1651,159 @@ function useRealtimeComments({
   const viewport = useMemo(
     () => ({
       customPlacement,
-      onItemsChange: onViewportItemsChange,
+      onItemsChange: (nextItems) => handleViewportItemsChange(nextItems),
       onCameraChange
     }),
-    [customPlacement, onCameraChange, onViewportItemsChange]
+    [customPlacement, handleViewportItemsChange, onCameraChange]
   );
   return useMemo(
     () => ({
       tools,
       overlay,
       viewport,
+      handleViewportItemsChange,
       isComposerOpen: commentComposer != null,
       closeComposer
     }),
-    [closeComposer, commentComposer, overlay, tools, viewport]
+    [
+      closeComposer,
+      commentComposer,
+      handleViewportItemsChange,
+      overlay,
+      tools,
+      viewport
+    ]
   );
 }
+var viewportFollowSyncSnapshots = /* @__PURE__ */ new WeakMap();
+function getFollowedPeer(sessionPeers, followedPeerId) {
+  return sessionPeers.find(
+    (peerState) => peerState.peerId === followedPeerId || peerState.id === followedPeerId
+  );
+}
+function getCameraKey(peer) {
+  if (!peer.camera) return null;
+  return [
+    peer.peerId,
+    peer.camera.x,
+    peer.camera.y,
+    peer.camera.zoom,
+    peer.camera.viewportWidth,
+    peer.camera.viewportHeight
+  ].join(":");
+}
+function getViewportSizeKey(viewport) {
+  if (!viewport) return null;
+  const viewportSize = viewport.getViewportSize();
+  return [viewportSize.width, viewportSize.height].join(":");
+}
+function getFollowedCameraPosition(viewport, peer) {
+  if (!peer.camera) return null;
+  const viewportSize = viewport.getViewportSize();
+  return {
+    x: peer.camera.x + (viewportSize.width - peer.camera.viewportWidth) / 2,
+    y: peer.camera.y + (viewportSize.height - peer.camera.viewportHeight) / 2,
+    zoom: peer.camera.zoom
+  };
+}
+function applyPeerCamera(viewport, peer) {
+  const camera = viewport.getCamera();
+  const nextCamera = getFollowedCameraPosition(viewport, peer);
+  const viewportSize = viewport.getViewportSize();
+  if (!camera || !nextCamera) return false;
+  if (camera.x === nextCamera.x && camera.y === nextCamera.y && camera.zoom === nextCamera.zoom) {
+    return true;
+  }
+  markViewportFollowSync(viewport, {
+    x: nextCamera.x,
+    y: nextCamera.y,
+    zoom: nextCamera.zoom,
+    viewportWidth: viewportSize.width,
+    viewportHeight: viewportSize.height
+  });
+  camera.x = nextCamera.x;
+  camera.y = nextCamera.y;
+  camera.zoom = nextCamera.zoom;
+  viewport.requestRender();
+  return true;
+}
+function markViewportFollowSync(viewport, snapshot) {
+  viewportFollowSyncSnapshots.set(viewport, snapshot);
+}
+function consumeViewportFollowSync(viewport, snapshot) {
+  const currentSnapshot = viewportFollowSyncSnapshots.get(viewport);
+  if (!currentSnapshot || currentSnapshot.x !== snapshot.x || currentSnapshot.y !== snapshot.y || currentSnapshot.zoom !== snapshot.zoom || currentSnapshot.viewportWidth !== snapshot.viewportWidth || currentSnapshot.viewportHeight !== snapshot.viewportHeight) {
+    return false;
+  }
+  viewportFollowSyncSnapshots.delete(viewport);
+  return true;
+}
+function useRealtimePeerFollow(options) {
+  const { viewportRef, sessionPeers, followedPeerId, onFollowEnd } = options;
+  const endedPeerIdRef = useRef(null);
+  const lastAppliedCameraKeyRef = useRef(null);
+  const [viewportSizeVersion, setViewportSizeVersion] = useState(0);
+  useEffect(() => {
+    if (!followedPeerId) return;
+    let animationFrameId = 0;
+    let lastViewportSizeKey = getViewportSizeKey(viewportRef.current ?? null);
+    const checkViewportSize = () => {
+      const nextViewportSizeKey = getViewportSizeKey(viewportRef.current ?? null);
+      if (nextViewportSizeKey !== lastViewportSizeKey) {
+        lastViewportSizeKey = nextViewportSizeKey;
+        setViewportSizeVersion((value) => value + 1);
+      }
+      animationFrameId = window.requestAnimationFrame(checkViewportSize);
+    };
+    animationFrameId = window.requestAnimationFrame(checkViewportSize);
+    return () => {
+      window.cancelAnimationFrame(animationFrameId);
+    };
+  }, [followedPeerId, viewportRef]);
+  useEffect(() => {
+    if (!followedPeerId) {
+      endedPeerIdRef.current = null;
+      lastAppliedCameraKeyRef.current = null;
+      return;
+    }
+    const followedPeer = getFollowedPeer(sessionPeers, followedPeerId);
+    if (!followedPeer) {
+      lastAppliedCameraKeyRef.current = null;
+      if (endedPeerIdRef.current === followedPeerId) {
+        return;
+      }
+      endedPeerIdRef.current = followedPeerId;
+      onFollowEnd?.();
+      return;
+    }
+    if (!followedPeer.camera) {
+      endedPeerIdRef.current = null;
+      lastAppliedCameraKeyRef.current = null;
+      return;
+    }
+    endedPeerIdRef.current = null;
+    const viewport = viewportRef.current;
+    const nextCameraKey = [
+      getCameraKey(followedPeer),
+      getViewportSizeKey(viewport ?? null)
+    ].join(":");
+    if (nextCameraKey && nextCameraKey === lastAppliedCameraKeyRef.current) {
+      return;
+    }
+    if (!viewport || !applyPeerCamera(viewport, followedPeer)) {
+      return;
+    }
+    lastAppliedCameraKeyRef.current = nextCameraKey;
+  }, [
+    followedPeerId,
+    onFollowEnd,
+    sessionPeers,
+    viewportRef,
+    viewportSizeVersion
+  ]);
+}
+
+// src/react/plugins/realtime/use-realtime-session.ts
 function createClientId() {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
     return crypto.randomUUID();
@@ -1689,6 +1846,19 @@ function sameSerializedItems(left, right) {
 function nowMs() {
   return Date.now();
 }
+function getViewportCameraSnapshot(viewport) {
+  if (!viewport) return null;
+  const camera = viewport.getCamera();
+  if (!camera) return null;
+  const viewportSize = viewport.getViewportSize();
+  return {
+    x: camera.x,
+    y: camera.y,
+    zoom: camera.zoom,
+    viewportWidth: viewportSize.width,
+    viewportHeight: viewportSize.height
+  };
+}
 function useRealtimeSession(options) {
   const {
     url,
@@ -1715,6 +1885,9 @@ function useRealtimeSession(options) {
   const subscriberRefs = useRef(/* @__PURE__ */ new Set());
   const lastCursorRef = useRef(null);
   const lastMarkupStrokeRef = useRef(null);
+  const lastCameraRef = useRef(
+    null
+  );
   const lastActiveToolRef = useRef(void 0);
   const latestDocumentRef = useRef(null);
   const connectionStateRef = useRef(
@@ -1839,6 +2012,7 @@ function useRealtimeSession(options) {
       presence: {
         cursor: lastCursorRef.current,
         markupStroke: lastMarkupStrokeRef.current ?? null,
+        camera: lastCameraRef.current ?? null,
         ...lastActiveToolRef.current ? { activeTool: lastActiveToolRef.current } : {}
       }
     });
@@ -2164,6 +2338,18 @@ function useRealtimeSession(options) {
     () => sessionPeers.filter((peerState) => !peerState.isSelf),
     [sessionPeers]
   );
+  const syncViewportPresence = useCallback(
+    (bindingOptions) => {
+      const viewport = bindingOptions?.viewportRef?.current;
+      const cameraSnapshot = getViewportCameraSnapshot(viewport);
+      if (!cameraSnapshot) return false;
+      lastCameraRef.current = cameraSnapshot;
+      lastActiveToolRef.current = bindingOptions?.activeTool;
+      sendPresenceUpdate();
+      return true;
+    },
+    [sendPresenceUpdate]
+  );
   const bindViewportPresence = useCallback(
     (bindingOptions) => ({
       remotePresence,
@@ -2181,6 +2367,18 @@ function useRealtimeSession(options) {
         lastMarkupStrokeRef.current = remoteMarkupStrokeFromPlacementPreview(preview);
         lastActiveToolRef.current = bindingOptions?.activeTool;
         sendPresenceUpdate();
+      },
+      onCameraChange() {
+        const viewport = bindingOptions?.viewportRef?.current;
+        const cameraSnapshot = getViewportCameraSnapshot(viewport);
+        if (!cameraSnapshot) return;
+        if (viewport && consumeViewportFollowSync(viewport, cameraSnapshot)) {
+          lastCameraRef.current = cameraSnapshot;
+          return;
+        }
+        lastCameraRef.current = cameraSnapshot;
+        lastActiveToolRef.current = bindingOptions?.activeTool;
+        sendPresenceUpdate();
       }
     }),
     [remotePresence, sendPresenceUpdate]
@@ -2192,6 +2390,7 @@ function useRealtimeSession(options) {
     remoteAdapter,
     document: document2,
     bindViewportPresence,
+    syncViewportPresence,
     disconnect,
     reconnectNow
   };
@@ -2236,9 +2435,37 @@ function RealtimeCollaborationPluginComponent({
     ...commentOptions ?? {}
   });
   const presenceBindings = useMemo(
-    () => session.bindViewportPresence({ activeTool: viewport.toolId }),
-    [session.bindViewportPresence, viewport.toolId]
+    () => session.bindViewportPresence({
+      activeTool: viewport.toolId,
+      viewportRef
+    }),
+    [session.bindViewportPresence, viewport.toolId, viewportRef]
   );
+  const onViewportCameraChange = useCallback(() => {
+    presenceBindings.onCameraChange?.();
+    comments.viewport.onCameraChange?.();
+  }, [comments.viewport, presenceBindings]);
+  useEffect(() => {
+    if (!session.connection.connected) return;
+    let animationFrameId = 0;
+    const syncViewportPresence = () => {
+      const didSync = session.syncViewportPresence({
+        activeTool: viewport.toolId,
+        viewportRef
+      });
+      if (didSync) return;
+      animationFrameId = window.requestAnimationFrame(syncViewportPresence);
+    };
+    syncViewportPresence();
+    return () => {
+      window.cancelAnimationFrame(animationFrameId);
+    };
+  }, [
+    session.connection.connected,
+    session.syncViewportPresence,
+    viewport.toolId,
+    viewportRef
+  ]);
   useEffect(() => {
     if (!onItemsChange || !session.document) return;
     if (session.document.updatedByClientId === session.connection.clientId) return;
@@ -2255,11 +2482,14 @@ function RealtimeCollaborationPluginComponent({
         onWorldPointerMove: presenceBindings.onWorldPointerMove,
         onWorldPointerLeave: presenceBindings.onWorldPointerLeave,
         onPlacementPreviewChange: presenceBindings.onPlacementPreviewChange,
-        onCameraChange: commentOptions ? comments.viewport.onCameraChange : void 0
+        onCameraChange: onViewportCameraChange
       },
       wrapOnItemsChange: (nextItems, ctx) => {
         if (commentOptions) {
-          comments.viewport.onItemsChange?.(nextItems);
+          comments.handleViewportItemsChange(nextItems, (processedItems) => {
+            ctx.next(processedItems);
+            session.remoteAdapter.send?.([...processedItems]);
+          });
           return;
         }
         ctx.next(nextItems);
@@ -2270,6 +2500,8 @@ function RealtimeCollaborationPluginComponent({
       commentOptions,
       comments.tools,
       comments.viewport,
+      comments.handleViewportItemsChange,
+      onViewportCameraChange,
       presenceBindings,
       session.remoteAdapter
     ]
@@ -2312,6 +2544,6 @@ function realtimeSessionPlugin(options) {
   };
 }
 
-export { PresenceRemoteLayer, REALTIME_COMMENT_TOOL, RealtimeCommentsOverlay, RealtimeSessionPanel, createRealtimeCommentAvatarDataUrl, createRealtimeCommentDraftItem, createRealtimeCommentItem, defaultPresenceColorForId, getRealtimeCommentData, isRealtimeCommentDraftItem, isRealtimeCommentItem, parseRealtimeClientMessage, parseRealtimeServerMessage, realtimeCollaborationPlugin, realtimeCommentsPlugin, realtimeSessionPlugin, remoteMarkupStrokeFromPlacementPreview, useRealtimeComments, useRealtimeSession, withRealtimeCommentTool };
+export { PresenceRemoteLayer, REALTIME_COMMENT_TOOL, RealtimeCommentsOverlay, RealtimeSessionPanel, createRealtimeCommentAvatarDataUrl, createRealtimeCommentDraftItem, createRealtimeCommentItem, defaultPresenceColorForId, getRealtimeCommentData, isRealtimeCommentDraftItem, isRealtimeCommentItem, parseRealtimeClientMessage, parseRealtimeServerMessage, realtimeCollaborationPlugin, realtimeCommentsPlugin, realtimeSessionPlugin, remoteMarkupStrokeFromPlacementPreview, useRealtimeComments, useRealtimePeerFollow, useRealtimeSession, withRealtimeCommentTool };
 //# sourceMappingURL=realtime.js.map
 //# sourceMappingURL=realtime.js.map