canvu-react 0.4.33 → 0.4.35

package/dist/realtimeNative.js

@@ -0,0 +1,2097 @@
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import * as Y from 'yjs';
+
+// src/realtime/protocol.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function getString(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function getNumber(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+}
+function parseCursor(value) {
+  if (value === null) return null;
+  if (!isRecord(value)) return void 0;
+  const x = getNumber(value.x);
+  const y = getNumber(value.y);
+  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;
+  const tool = getString(value.tool);
+  if (tool !== "draw" && tool !== "pencil" && tool !== "brush" && tool !== "marker" && tool !== "laser") {
+    return void 0;
+  }
+  const points = value.points.map((point) => {
+    if (!isRecord(point)) return null;
+    const x = getNumber(point.x);
+    const y = getNumber(point.y);
+    if (x == null || y == null) return null;
+    return { x, y };
+  }).filter((point) => point != null);
+  const strokeWidth = getNumber(value.strokeWidth);
+  const stroke = getString(value.stroke);
+  const strokeOpacity = getNumber(value.strokeOpacity);
+  return {
+    points,
+    tool,
+    ...strokeWidth != null ? { strokeWidth } : {},
+    ...stroke ? { stroke } : {},
+    ...strokeOpacity != null ? { strokeOpacity } : {}
+  };
+}
+function parsePresencePayload(value) {
+  if (!isRecord(value)) return void 0;
+  const cursor = parseCursor(value.cursor);
+  if (cursor === void 0) return void 0;
+  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) } : {}
+  };
+}
+function parseItems(value) {
+  return Array.isArray(value) ? value : void 0;
+}
+function parseDocumentSnapshot(value) {
+  if (!isRecord(value)) return void 0;
+  const revision = getNumber(value.revision);
+  const updatedAt = getNumber(value.updatedAt);
+  const items = parseItems(value.items);
+  if (revision == null || updatedAt == null || items == null) return void 0;
+  return {
+    revision,
+    updatedAt,
+    items,
+    ...getString(value.updatedByClientId) ? { updatedByClientId: getString(value.updatedByClientId) } : {},
+    ...getNumber(value.persistedRevision) != null ? { persistedRevision: getNumber(value.persistedRevision) } : {}
+  };
+}
+function parseRealtimeSessionPeer(value) {
+  if (!isRecord(value)) return void 0;
+  const clientId = getString(value.clientId);
+  const peerId = getString(value.peerId);
+  const roomId = getString(value.roomId);
+  const joinedAt = getNumber(value.joinedAt);
+  const lastSeenAt = getNumber(value.lastSeenAt);
+  const cursor = parseCursor(value.cursor);
+  if (clientId == null || peerId == null || roomId == null || joinedAt == null || lastSeenAt == null || cursor === void 0) {
+    return void 0;
+  }
+  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 {
+    id: clientId,
+    clientId,
+    peerId,
+    roomId,
+    joinedAt,
+    lastSeenAt,
+    isSelf,
+    cursor,
+    ...getString(value.displayName) ? { displayName: getString(value.displayName) } : {},
+    ...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 } : {}
+  };
+}
+function parsePeers(value) {
+  if (!Array.isArray(value)) return void 0;
+  const peers = value.map((peer) => parseRealtimeSessionPeer(peer)).filter((peer) => peer != null);
+  return peers.length === value.length ? peers : void 0;
+}
+function parseRealtimeClientMessage(value) {
+  if (!isRecord(value)) return void 0;
+  const type = getString(value.type);
+  if (type === "session:join") {
+    const roomId = getString(value.roomId);
+    const peer = isRecord(value.peer) ? value.peer : void 0;
+    const clientId = peer ? getString(peer.clientId) : void 0;
+    const peerId = peer ? getString(peer.peerId) : void 0;
+    if (!roomId || !peer || !clientId || !peerId) return void 0;
+    return {
+      type,
+      roomId,
+      peer: {
+        clientId,
+        peerId,
+        ...getString(peer.displayName) ? { displayName: getString(peer.displayName) } : {},
+        ...getString(peer.color) ? { color: getString(peer.color) } : {},
+        ...getString(peer.image) ? { image: getString(peer.image) } : {}
+      }
+    };
+  }
+  if (type === "session:leave" || type === "session:ping") {
+    const roomId = getString(value.roomId);
+    const clientId = getString(value.clientId);
+    if (!roomId || !clientId) return void 0;
+    if (type === "session:leave") {
+      return { type, roomId, clientId };
+    }
+    const sentAt = getNumber(value.sentAt);
+    if (sentAt == null) return void 0;
+    return { type, roomId, clientId, sentAt };
+  }
+  if (type === "presence:update") {
+    const roomId = getString(value.roomId);
+    const clientId = getString(value.clientId);
+    const presence = parsePresencePayload(value.presence);
+    if (!roomId || !clientId || !presence) return void 0;
+    return { type, roomId, clientId, presence };
+  }
+  if (type === "document:update") {
+    const roomId = getString(value.roomId);
+    const clientId = getString(value.clientId);
+    const baseRevision = getNumber(value.baseRevision);
+    const items = parseItems(value.items);
+    if (!roomId || !clientId || baseRevision == null || !items) return void 0;
+    return { type, roomId, clientId, baseRevision, items };
+  }
+  return void 0;
+}
+function parseRealtimeServerMessage(value) {
+  if (!isRecord(value)) return void 0;
+  const type = getString(value.type);
+  if (type === "session:welcome") {
+    const roomId = getString(value.roomId);
+    const clientId = getString(value.clientId);
+    const serverTime = getNumber(value.serverTime);
+    const document = parseDocumentSnapshot(value.document);
+    const peers = parsePeers(value.peers);
+    if (!roomId || !clientId || serverTime == null || !document || !peers) {
+      return void 0;
+    }
+    return { type, roomId, clientId, serverTime, document, peers };
+  }
+  if (type === "session:peer-joined") {
+    const roomId = getString(value.roomId);
+    const peer = parseRealtimeSessionPeer(value.peer);
+    if (!roomId || !peer) return void 0;
+    return { type, roomId, peer };
+  }
+  if (type === "session:peer-left") {
+    const roomId = getString(value.roomId);
+    const clientId = getString(value.clientId);
+    if (!roomId || !clientId) return void 0;
+    return { type, roomId, clientId };
+  }
+  if (type === "session:pong") {
+    const roomId = getString(value.roomId);
+    const clientId = getString(value.clientId);
+    const sentAt = getNumber(value.sentAt);
+    const serverTime = getNumber(value.serverTime);
+    if (!roomId || !clientId || sentAt == null || serverTime == null) {
+      return void 0;
+    }
+    return { type, roomId, clientId, sentAt, serverTime };
+  }
+  if (type === "session:error") {
+    const code = getString(value.code);
+    const message = getString(value.message);
+    if (!code || !message) return void 0;
+    return {
+      type,
+      code,
+      message,
+      ...getString(value.roomId) ? { roomId: getString(value.roomId) } : {}
+    };
+  }
+  if (type === "presence:sync") {
+    const roomId = getString(value.roomId);
+    const peers = parsePeers(value.peers);
+    const serverTime = getNumber(value.serverTime);
+    if (!roomId || !peers || serverTime == null) return void 0;
+    return { type, roomId, peers, serverTime };
+  }
+  if (type === "document:sync" || type === "document:resync-required") {
+    const roomId = getString(value.roomId);
+    const document = parseDocumentSnapshot(value.document);
+    if (!roomId || !document) return void 0;
+    if (type === "document:sync") {
+      return { type, roomId, document };
+    }
+    const reason = getString(value.reason);
+    if (!reason) return void 0;
+    return { type, roomId, reason, document };
+  }
+  return void 0;
+}
+function getSceneItemId(item) {
+  const id = item.id;
+  return typeof id === "string" ? id : null;
+}
+function hasMissingLocalItems(localItems, incomingItems) {
+  const incomingIds = /* @__PURE__ */ new Set();
+  for (const item of incomingItems) {
+    const id = getSceneItemId(item);
+    if (id) incomingIds.add(id);
+  }
+  for (const item of localItems) {
+    const id = getSceneItemId(item);
+    if (id && !incomingIds.has(id)) return true;
+  }
+  return false;
+}
+function useRealtimeCanvasDocument(options) {
+  const {
+    session,
+    items,
+    onItemsChange,
+    normalizeItems,
+    hydrateItems,
+    enabled = true
+  } = options;
+  const [loading, setLoading] = useState(false);
+  const lastAppliedRevisionRef = useRef(null);
+  const inFlightRevisionRef = useRef(null);
+  const hasEverPropagatedItemsRef = useRef(false);
+  const realtimeEnabled = enabled && session != null;
+  const documentRevision = session?.document?.revision ?? null;
+  const documentItems = session?.document?.items;
+  const documentUpdatedByClientId = session?.document?.updatedByClientId ?? null;
+  const connectionClientId = session?.connection.clientId ?? null;
+  const hasLocalOfflineDraft = session?.hasLocalOfflineDraft ?? false;
+  const hasPendingDocumentSync = session?.hasPendingDocumentSync ?? false;
+  const applyIncomingItems = useCallback(
+    async (nextItems) => {
+      const normalizedItems = normalizeItems ? normalizeItems(nextItems) : [...nextItems];
+      if (!hydrateItems) return normalizedItems;
+      return await hydrateItems(normalizedItems);
+    },
+    [hydrateItems, normalizeItems]
+  );
+  const handleItemsChange = useCallback(
+    (nextItems) => {
+      if (!enabled) {
+        onItemsChange?.(normalizeItems ? normalizeItems(nextItems) : nextItems);
+        return;
+      }
+      const normalizedItems = normalizeItems ? normalizeItems(nextItems) : nextItems;
+      onItemsChange?.(normalizedItems);
+      session?.remoteAdapter.send?.(normalizedItems);
+    },
+    [enabled, normalizeItems, onItemsChange, session]
+  );
+  useEffect(() => {
+    if (items.length > 0) {
+      hasEverPropagatedItemsRef.current = true;
+    }
+  }, [items.length]);
+  useEffect(() => {
+    if (!realtimeEnabled || !onItemsChange || !session?.document) return;
+    if (documentUpdatedByClientId === connectionClientId) return;
+    if (documentRevision == null) return;
+    if (lastAppliedRevisionRef.current === documentRevision) return;
+    if (inFlightRevisionRef.current === documentRevision) return;
+    inFlightRevisionRef.current = documentRevision;
+    let cancelled = false;
+    setLoading(true);
+    void applyIncomingItems(documentItems ?? []).then((resolvedItems) => {
+      if (cancelled) return;
+      if (inFlightRevisionRef.current !== documentRevision) return;
+      lastAppliedRevisionRef.current = documentRevision;
+      const hasLocalItems = items.length > 0;
+      const hasPendingLocalChanges = hasLocalOfflineDraft || hasPendingDocumentSync;
+      if (resolvedItems.length === 0 && (hasEverPropagatedItemsRef.current || hasLocalItems || hasPendingLocalChanges)) {
+        if (hasLocalItems) {
+          const normalizedLocalItems = normalizeItems ? normalizeItems(items) : [...items];
+          session.remoteAdapter.send?.(normalizedLocalItems);
+        }
+        return;
+      }
+      if (hasLocalItems && hasMissingLocalItems(items, resolvedItems)) {
+        const normalizedLocalItems = normalizeItems ? normalizeItems(items) : [...items];
+        session.remoteAdapter.send?.(normalizedLocalItems);
+        return;
+      }
+      if (resolvedItems.length > 0) {
+        hasEverPropagatedItemsRef.current = true;
+      }
+      onItemsChange(resolvedItems);
+    }).finally(() => {
+      if (inFlightRevisionRef.current === documentRevision) {
+        inFlightRevisionRef.current = null;
+      }
+      if (cancelled) return;
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    applyIncomingItems,
+    connectionClientId,
+    documentItems,
+    documentRevision,
+    documentUpdatedByClientId,
+    hasLocalOfflineDraft,
+    hasPendingDocumentSync,
+    items,
+    normalizeItems,
+    onItemsChange,
+    realtimeEnabled,
+    session?.remoteAdapter,
+    session?.document
+  ]);
+  return useMemo(
+    () => ({
+      items,
+      onItemsChange: onItemsChange ? handleItemsChange : void 0,
+      loading,
+      saving: session?.hasPendingDocumentSync ?? false,
+      hasLocalOfflineDraft: session?.hasLocalOfflineDraft ?? false,
+      syncState: session?.syncState ?? "offline",
+      conflict: session?.conflict ?? null,
+      resolveConflict: session?.resolveConflict ?? (() => {
+      }),
+      clearLocalDraft: session?.clearLocalDraft ?? (() => {
+      }),
+      flush: session?.flushDocumentSync ?? (async () => {
+      })
+    }),
+    [handleItemsChange, items, loading, onItemsChange, session]
+  );
+}
+var viewportFollowSyncSnapshots = /* @__PURE__ */ new WeakMap();
+function requestRuntimeAnimationFrame(callback) {
+  const runtime = globalThis;
+  if (typeof runtime.requestAnimationFrame === "function") {
+    return runtime.requestAnimationFrame(callback);
+  }
+  return globalThis.setTimeout(() => callback(Date.now()), 16);
+}
+function cancelRuntimeAnimationFrame(handle) {
+  const runtime = globalThis;
+  if (typeof runtime.cancelAnimationFrame === "function") {
+    runtime.cancelAnimationFrame(handle);
+    return;
+  }
+  globalThis.clearTimeout(handle);
+}
+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 [, 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 = requestRuntimeAnimationFrame(checkViewportSize);
+    };
+    animationFrameId = requestRuntimeAnimationFrame(checkViewportSize);
+    return () => {
+      cancelRuntimeAnimationFrame(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]);
+}
+var ITEMS_KEY = "items";
+var CLIENT_ONLY_IMAGE_KEYS = /* @__PURE__ */ new Set([
+  "imageBlobId",
+  "imageThumbnailBlobId",
+  "imageRasterHref",
+  "imageThumbnailHref"
+]);
+var SERVER_ADD_RACE_WINDOW_MS = 2e3;
+function createYjsBoardDoc() {
+  const doc = new Y.Doc();
+  const yItems = doc.getArray(ITEMS_KEY);
+  return {
+    doc,
+    yItems,
+    lastServerConfirmedIds: /* @__PURE__ */ new Set(),
+    lastServerConfirmedItemSerializations: /* @__PURE__ */ new Map(),
+    serverItemSeenAt: /* @__PURE__ */ new Map()
+  };
+}
+function getItemId(item) {
+  if (item instanceof Y.Map) {
+    const id2 = item.get("id");
+    return typeof id2 === "string" ? id2 : null;
+  }
+  const id = item.id;
+  return typeof id === "string" ? id : null;
+}
+function vectorItemToYMap(item) {
+  const yMap = new Y.Map();
+  for (const [key, value] of Object.entries(normalizeRealtimeItem(item))) {
+    if (value === void 0) continue;
+    yMap.set(key, value);
+  }
+  return yMap;
+}
+function yMapToVectorItem(yMap) {
+  const obj = {};
+  for (const [key, value] of yMap.entries()) {
+    obj[key] = value;
+  }
+  return obj;
+}
+function readVectorItems(yItems) {
+  const result = [];
+  for (let i = 0; i < yItems.length; i++) {
+    const yMap = yItems.get(i);
+    if (yMap) result.push(yMapToVectorItem(yMap));
+  }
+  return result;
+}
+function indexYItemsById(yItems) {
+  const result = /* @__PURE__ */ new Map();
+  for (let i = 0; i < yItems.length; i++) {
+    const yMap = yItems.get(i);
+    if (!yMap) continue;
+    const id = getItemId(yMap);
+    if (!id) continue;
+    result.set(id, { yMap, index: i });
+  }
+  return result;
+}
+function valuesEqual(left, right) {
+  if (left === right) return true;
+  if (typeof left !== typeof right) return false;
+  if (left === null || right === null) return false;
+  if (typeof left !== "object") return false;
+  try {
+    return JSON.stringify(left) === JSON.stringify(right);
+  } catch {
+    return false;
+  }
+}
+function serializeItem(value) {
+  const item = value instanceof Y.Map ? yMapToVectorItem(value) : value;
+  return JSON.stringify(normalizeRealtimeItem(item));
+}
+function updateYMapInPlace(yMap, next) {
+  const normalizedNext = normalizeRealtimeItem(next);
+  const nextKeys = /* @__PURE__ */ new Set();
+  for (const [key, value] of Object.entries(normalizedNext)) {
+    if (value === void 0) continue;
+    nextKeys.add(key);
+    const current = yMap.get(key);
+    if (!valuesEqual(current, value)) {
+      yMap.set(key, value);
+    }
+  }
+  for (const key of Array.from(yMap.keys())) {
+    if (!nextKeys.has(key)) yMap.delete(key);
+  }
+}
+function normalizeRealtimeItem(item) {
+  if (item.toolKind !== "image") return item;
+  const normalized = Object.fromEntries(
+    Object.entries(item).filter(([key]) => !CLIENT_ONLY_IMAGE_KEYS.has(key))
+  );
+  normalized.childrenSvg = "";
+  return normalized;
+}
+function applyLocalItemsToYDoc(board, options) {
+  const { items, origin } = options;
+  const addedIds = [];
+  const removedIds = [];
+  const now = Date.now();
+  board.doc.transact(() => {
+    const currentIndex = indexYItemsById(board.yItems);
+    const nextIds = /* @__PURE__ */ new Set();
+    for (const item of items) {
+      const id = getItemId(item);
+      if (!id) continue;
+      nextIds.add(id);
+    }
+    const toDelete = [];
+    for (const [id, entry] of currentIndex) {
+      if (nextIds.has(id)) continue;
+      const serverSeenAt = board.serverItemSeenAt.get(id);
+      if (serverSeenAt != null && now - serverSeenAt < SERVER_ADD_RACE_WINDOW_MS) {
+        continue;
+      }
+      toDelete.push({ id, index: entry.index });
+    }
+    toDelete.sort((a, b) => b.index - a.index);
+    for (const { id, index } of toDelete) {
+      board.yItems.delete(index, 1);
+      board.serverItemSeenAt.delete(id);
+      removedIds.push(id);
+    }
+    const refreshedIndex = indexYItemsById(board.yItems);
+    for (let nextOrder = 0; nextOrder < items.length; nextOrder++) {
+      const item = items[nextOrder];
+      if (!item) continue;
+      const id = getItemId(item);
+      if (!id) continue;
+      const existing = refreshedIndex.get(id);
+      if (existing) {
+        updateYMapInPlace(existing.yMap, item);
+        continue;
+      }
+      const yMap = vectorItemToYMap(item);
+      board.yItems.push([yMap]);
+      addedIds.push(id);
+    }
+  }, origin);
+  return { addedIds, removedIds };
+}
+function applyServerSnapshotToYDoc(board, options) {
+  const { items: snapshotItems, origin } = options;
+  const now = Date.now();
+  board.doc.transact(() => {
+    for (const item of snapshotItems) {
+      const id = getItemId(item);
+      if (!id) continue;
+      const existing = indexYItemsById(board.yItems).get(id);
+      if (existing) {
+        const currentSerialized = serializeItem(existing.yMap);
+        const incomingSerialized = serializeItem(item);
+        const confirmedSerialized = board.lastServerConfirmedItemSerializations.get(id);
+        const hasPendingLocalChange = confirmedSerialized === void 0 ? currentSerialized !== incomingSerialized : currentSerialized !== confirmedSerialized && currentSerialized !== incomingSerialized;
+        if (hasPendingLocalChange) {
+          board.serverItemSeenAt.set(id, now);
+          continue;
+        }
+        updateYMapInPlace(existing.yMap, item);
+        board.serverItemSeenAt.set(id, now);
+        continue;
+      }
+      const yMap = vectorItemToYMap(item);
+      board.yItems.push([yMap]);
+      board.serverItemSeenAt.set(id, now);
+    }
+  }, origin);
+  board.lastServerConfirmedIds = /* @__PURE__ */ new Set();
+  board.lastServerConfirmedItemSerializations = /* @__PURE__ */ new Map();
+  for (const item of snapshotItems) {
+    const id = getItemId(item);
+    if (id) {
+      board.lastServerConfirmedIds.add(id);
+      board.lastServerConfirmedItemSerializations.set(id, serializeItem(item));
+    }
+  }
+}
+function replaceYDocWithSnapshot(board, options) {
+  const { items: snapshotItems, origin } = options;
+  const now = Date.now();
+  board.doc.transact(() => {
+    if (board.yItems.length > 0) {
+      board.yItems.delete(0, board.yItems.length);
+    }
+    for (const item of snapshotItems) {
+      board.yItems.push([vectorItemToYMap(item)]);
+    }
+  }, origin);
+  board.lastServerConfirmedIds = /* @__PURE__ */ new Set();
+  board.lastServerConfirmedItemSerializations = /* @__PURE__ */ new Map();
+  board.serverItemSeenAt = /* @__PURE__ */ new Map();
+  for (const item of snapshotItems) {
+    const id = getItemId(item);
+    if (id) {
+      board.lastServerConfirmedIds.add(id);
+      board.lastServerConfirmedItemSerializations.set(id, serializeItem(item));
+      board.serverItemSeenAt.set(id, now);
+    }
+  }
+}
+function getLocallyPendingItemIds(board) {
+  const pending = /* @__PURE__ */ new Set();
+  for (let i = 0; i < board.yItems.length; i++) {
+    const yMap = board.yItems.get(i);
+    if (!yMap) continue;
+    const id = getItemId(yMap);
+    if (!id) continue;
+    const confirmedSerialized = board.lastServerConfirmedItemSerializations.get(id);
+    if (!confirmedSerialized || serializeItem(yMap) !== confirmedSerialized) {
+      pending.add(id);
+    }
+  }
+  return pending;
+}
+function encodeYDocState(board) {
+  const update = Y.encodeStateAsUpdate(board.doc);
+  let binary = "";
+  for (let i = 0; i < update.length; i++) {
+    binary += String.fromCharCode(update[i]);
+  }
+  return btoa(binary);
+}
+function decodeYDocState(board, encoded) {
+  try {
+    const binary = atob(encoded);
+    const update = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      update[i] = binary.charCodeAt(i);
+    }
+    Y.applyUpdate(board.doc, update);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/realtime/use-realtime-session.ts
+var ORIGIN_LOCAL = /* @__PURE__ */ Symbol("canvu/realtime/local");
+var ORIGIN_REMOTE = /* @__PURE__ */ Symbol("canvu/realtime/remote");
+var ORIGIN_BOOTSTRAP = /* @__PURE__ */ Symbol("canvu/realtime/bootstrap");
+var DRAFT_STORAGE_PREFIX = "canvu-realtime-draft:";
+var DOCUMENT_FLUSH_DEBOUNCE_MS = 120;
+var DRAFT_PERSIST_DEBOUNCE_MS = 420;
+function requestRuntimeIdleCallback(callback, timeout) {
+  const runtime = globalThis;
+  if (typeof runtime.requestIdleCallback === "function") {
+    return runtime.requestIdleCallback(callback, { timeout });
+  }
+  return globalThis.setTimeout(callback, timeout);
+}
+function cancelRuntimeIdleCallback(handle) {
+  if (handle == null) return;
+  const runtime = globalThis;
+  if (typeof runtime.cancelIdleCallback === "function") {
+    runtime.cancelIdleCallback(Number(handle));
+    return;
+  }
+  globalThis.clearTimeout(handle);
+}
+function createBrowserDraftStorage() {
+  const runtime = globalThis;
+  const storage = runtime.localStorage;
+  if (!storage) return null;
+  return {
+    getItem: (key) => storage.getItem(key),
+    setItem: (key, value) => storage.setItem(key, value),
+    removeItem: (key) => storage.removeItem(key)
+  };
+}
+function getSocketHandlerProperty(type) {
+  if (type === "open") return "onopen";
+  if (type === "message") return "onmessage";
+  if (type === "error") return "onerror";
+  return "onclose";
+}
+function addRealtimeSocketListener(socket, type, handler) {
+  if (typeof socket.addEventListener === "function" && typeof socket.removeEventListener === "function") {
+    const listener = handler;
+    socket.addEventListener(type, listener);
+    return () => socket.removeEventListener(type, listener);
+  }
+  const property = getSocketHandlerProperty(type);
+  const handlerSocket = socket;
+  if (property === "onopen") {
+    const previous2 = handlerSocket.onopen;
+    handlerSocket.onopen = (event) => handler(event);
+    return () => {
+      handlerSocket.onopen = previous2;
+    };
+  }
+  if (property === "onmessage") {
+    const previous2 = handlerSocket.onmessage;
+    handlerSocket.onmessage = (event) => handler(event);
+    return () => {
+      handlerSocket.onmessage = previous2;
+    };
+  }
+  if (property === "onerror") {
+    const previous2 = handlerSocket.onerror;
+    handlerSocket.onerror = (event) => handler(event);
+    return () => {
+      handlerSocket.onerror = previous2;
+    };
+  }
+  const previous = handlerSocket.onclose;
+  handlerSocket.onclose = (event) => handler(event);
+  return () => {
+    handlerSocket.onclose = previous;
+  };
+}
+function createClientId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `client-${Math.random().toString(36).slice(2, 10)}`;
+}
+function normalizeSocketUrl(input) {
+  if (!input) return "";
+  if (input.startsWith("ws://") || input.startsWith("wss://")) return input;
+  if (input.startsWith("http://")) return `ws://${input.slice("http://".length)}`;
+  if (input.startsWith("https://")) return `wss://${input.slice("https://".length)}`;
+  if (input.startsWith("/")) {
+    const location = globalThis.location;
+    if (!location) return "";
+    const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+    return `${protocol}//${location.host}${input}`;
+  }
+  return input;
+}
+function isValidSocketUrl(input) {
+  if (!input || input.includes("<") || input.includes(">")) return false;
+  try {
+    const parsed = new URL(input);
+    return parsed.protocol === "ws:" || parsed.protocol === "wss:";
+  } catch {
+    return false;
+  }
+}
+function sanitizeRealtimeItem(item) {
+  if (item.toolKind !== "image") return item;
+  return {
+    ...item,
+    imageBlobId: void 0,
+    imageThumbnailBlobId: void 0,
+    imageRasterHref: void 0,
+    imageThumbnailHref: void 0,
+    childrenSvg: ""
+  };
+}
+function sanitizeRealtimeItems(items) {
+  return items.map(sanitizeRealtimeItem);
+}
+function sanitizeRealtimeSnapshot(snapshot) {
+  return {
+    ...snapshot,
+    items: sanitizeRealtimeItems(snapshot.items)
+  };
+}
+function serializeItems(items) {
+  try {
+    return JSON.stringify(sanitizeRealtimeItems(items));
+  } catch {
+    return null;
+  }
+}
+function sameSerializedItems(left, right) {
+  if (left === right) return true;
+  if (!left || !right) return false;
+  const leftJson = serializeItems(left);
+  const rightJson = serializeItems(right);
+  return leftJson != null && leftJson === rightJson;
+}
+function nowMs() {
+  return Date.now();
+}
+function hasDurableDocumentPersistence(snapshot) {
+  return snapshot.persistedRevision == null || snapshot.persistedRevision >= snapshot.revision;
+}
+function draftStorageKey(roomId) {
+  return `${DRAFT_STORAGE_PREFIX}${roomId}`;
+}
+function isRealtimeOfflineDraft(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const record = value;
+  if (typeof record.roomId !== "string" || typeof record.baseRevision !== "number" || typeof record.updatedAt !== "number" || !Array.isArray(record.items)) {
+    return false;
+  }
+  if (record.yDocState != null && typeof record.yDocState !== "string") {
+    return false;
+  }
+  if (record.pendingIds != null && !Array.isArray(record.pendingIds)) {
+    return false;
+  }
+  return true;
+}
+async function readRealtimeOfflineDraft(roomId, storage) {
+  if (!storage || !roomId) return null;
+  try {
+    const raw = await storage.getItem(draftStorageKey(roomId));
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!isRealtimeOfflineDraft(parsed)) return null;
+    return {
+      ...parsed,
+      items: sanitizeRealtimeItems(parsed.items)
+    };
+  } catch {
+    return null;
+  }
+}
+async function writeRealtimeOfflineDraft(draft, storage) {
+  if (!storage) return;
+  if (!draft) return;
+  try {
+    await storage.setItem(
+      draftStorageKey(draft.roomId),
+      JSON.stringify({
+        ...draft,
+        items: sanitizeRealtimeItems(draft.items)
+      })
+    );
+  } catch {
+  }
+}
+async function removeRealtimeOfflineDraft(roomId, storage) {
+  if (!storage || !roomId) return;
+  try {
+    await storage.removeItem(draftStorageKey(roomId));
+  } catch {
+  }
+}
+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 prepareRealtimeItems(items) {
+  try {
+    const sanitizedItems = sanitizeRealtimeItems(items);
+    return {
+      items: sanitizedItems,
+      serialized: JSON.stringify(sanitizedItems)
+    };
+  } catch {
+    return null;
+  }
+}
+function getRealtimeItemId(item) {
+  const id = item.id;
+  return typeof id === "string" ? id : null;
+}
+function serializeRealtimeItem(item) {
+  try {
+    return JSON.stringify(sanitizeRealtimeItem(item));
+  } catch {
+    return null;
+  }
+}
+function resolvePendingDraftItemIds(board, items) {
+  const pendingIds = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    const id = getRealtimeItemId(item);
+    if (!id) continue;
+    const confirmedSerialized = board.lastServerConfirmedItemSerializations.get(id);
+    const serialized = serializeRealtimeItem(item);
+    if (!confirmedSerialized || !serialized || serialized !== confirmedSerialized) {
+      pendingIds.add(id);
+    }
+  }
+  return pendingIds.size > 0 ? Array.from(pendingIds) : void 0;
+}
+function remoteMarkupStrokeFromPlacementPreview(preview) {
+  if (!preview || preview.kind !== "stroke" || preview.points.length === 0) {
+    return null;
+  }
+  const style = preview.style;
+  return {
+    points: preview.points,
+    tool: preview.tool,
+    ...style?.strokeWidth != null ? { strokeWidth: style.strokeWidth } : {},
+    ...style?.stroke ? { stroke: style.stroke } : {},
+    ...style?.strokeOpacity != null ? { strokeOpacity: style.strokeOpacity } : {}
+  };
+}
+function useRealtimeSession(options) {
+  const {
+    url,
+    roomId,
+    peer,
+    enabled = true,
+    draftStorage = createBrowserDraftStorage(),
+    reconnect = true,
+    heartbeatMs = 1e4,
+    maxReconnectDelayMs = 12e3,
+    initialReconnectDelayMs = 800,
+    connectTimeoutMs = 1e4,
+    onError
+  } = options;
+  const clientIdRef = useRef(peer.clientId ?? createClientId());
+  const wsRef = useRef(null);
+  const reconnectTimerRef = useRef(null);
+  const heartbeatTimerRef = useRef(null);
+  const connectTimeoutRef = useRef(null);
+  const documentFlushTimerRef = useRef(null);
+  const documentFlushIdleRef = useRef(null);
+  const draftPersistTimerRef = useRef(null);
+  const draftPersistIdleRef = useRef(null);
+  const draftStorageRef = useRef(draftStorage);
+  draftStorageRef.current = draftStorage;
+  const manualDisconnectRef = useRef(false);
+  const retryCountRef = useRef(0);
+  const currentRevisionRef = useRef(0);
+  const outboundInFlightRef = useRef(null);
+  const queuedDirtyRef = useRef(false);
+  const pendingLocalItemsRef = useRef(null);
+  const subscriberRefs = useRef(/* @__PURE__ */ new Set());
+  const boardRef = useRef(null);
+  if (boardRef.current == null) {
+    boardRef.current = createYjsBoardDoc();
+  }
+  const lastCursorRef = useRef(null);
+  const lastMarkupStrokeRef = useRef(null);
+  const lastCameraRef = useRef(
+    null
+  );
+  const lastActiveToolRef = useRef(void 0);
+  const latestDocumentRef = useRef(null);
+  const connectionStateRef = useRef(
+    enabled ? "connecting" : "offline"
+  );
+  const localDraftRef = useRef(null);
+  const conflictRef = useRef(null);
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+  const [connectSequence, setConnectSequence] = useState(0);
+  const [connection, setConnection] = useState({
+    state: enabled ? "connecting" : "offline",
+    connected: false,
+    roomId,
+    clientId: null,
+    retryCount: 0,
+    lastConnectedAt: null,
+    lastMessageAt: null,
+    lastPongAt: null,
+    lastError: null
+  });
+  const [sessionPeers, setSessionPeers] = useState([]);
+  const [document, setDocument] = useState(null);
+  const [hasLocalOfflineDraft, setHasLocalOfflineDraft] = useState(false);
+  const [hasPendingDocumentSync, setHasPendingDocumentSync] = useState(false);
+  const [conflict, setConflict] = useState(null);
+  connectionStateRef.current = connection.state;
+  const syncState = useMemo(() => {
+    if (conflict != null) return "conflicted";
+    if (connection.connected) return "connected";
+    if (connection.state === "reconnecting" || connection.state === "connecting") {
+      return "reconnecting";
+    }
+    return "offline";
+  }, [conflict, connection.connected, connection.state]);
+  const clearReconnectTimer = useCallback(() => {
+    if (reconnectTimerRef.current != null) {
+      globalThis.clearTimeout(reconnectTimerRef.current);
+      reconnectTimerRef.current = null;
+    }
+  }, []);
+  const clearHeartbeatTimer = useCallback(() => {
+    if (heartbeatTimerRef.current != null) {
+      globalThis.clearInterval(heartbeatTimerRef.current);
+      heartbeatTimerRef.current = null;
+    }
+  }, []);
+  const clearConnectTimeout = useCallback(() => {
+    if (connectTimeoutRef.current != null) {
+      globalThis.clearTimeout(connectTimeoutRef.current);
+      connectTimeoutRef.current = null;
+    }
+  }, []);
+  const clearDocumentFlushSchedule = useCallback(() => {
+    if (documentFlushTimerRef.current != null) {
+      globalThis.clearTimeout(documentFlushTimerRef.current);
+      documentFlushTimerRef.current = null;
+    }
+    cancelRuntimeIdleCallback(documentFlushIdleRef.current);
+    documentFlushIdleRef.current = null;
+  }, []);
+  const clearDraftPersistSchedule = useCallback(() => {
+    if (draftPersistTimerRef.current != null) {
+      globalThis.clearTimeout(draftPersistTimerRef.current);
+      draftPersistTimerRef.current = null;
+    }
+    cancelRuntimeIdleCallback(draftPersistIdleRef.current);
+    draftPersistIdleRef.current = null;
+  }, []);
+  const updateConnection = useCallback(
+    (patch) => {
+      setConnection((prev) => {
+        if (typeof patch === "function") return patch(prev);
+        return { ...prev, ...patch };
+      });
+    },
+    []
+  );
+  const notifySubscribers = useCallback((items) => {
+    for (const subscriber of subscriberRefs.current) {
+      subscriber(items);
+    }
+  }, []);
+  const applyDocument = useCallback(
+    (snapshot, options2) => {
+      const currentSnapshot = latestDocumentRef.current;
+      if (currentSnapshot && currentSnapshot.revision === snapshot.revision && currentSnapshot.updatedByClientId === snapshot.updatedByClientId && currentSnapshot.persistedRevision === snapshot.persistedRevision && sameSerializedItems(currentSnapshot.items, snapshot.items)) {
+        return;
+      }
+      const board = boardRef.current;
+      if (board) {
+        if (!options2?.replace) {
+          const pendingLocal = pendingLocalItemsRef.current;
+          if (pendingLocal) {
+            pendingLocalItemsRef.current = null;
+            applyLocalItemsToYDoc(board, {
+              items: pendingLocal,
+              origin: ORIGIN_LOCAL
+            });
+            queuedDirtyRef.current = true;
+          }
+        }
+        if (options2?.replace) {
+          replaceYDocWithSnapshot(board, {
+            items: snapshot.items,
+            origin: ORIGIN_REMOTE
+          });
+        } else {
+          applyServerSnapshotToYDoc(board, {
+            items: snapshot.items,
+            origin: ORIGIN_REMOTE
+          });
+        }
+      }
+      const mergedItems = board ? readVectorItems(board.yItems) : snapshot.items;
+      const mergedSnapshot = {
+        ...snapshot,
+        items: mergedItems
+      };
+      currentRevisionRef.current = snapshot.revision;
+      latestDocumentRef.current = mergedSnapshot;
+      setDocument(mergedSnapshot);
+      if (!options2?.suppressSubscriberNotify) {
+        notifySubscribers(mergedItems);
+      }
+    },
+    [notifySubscribers]
+  );
+  const setConflictState = useCallback(
+    (nextConflict) => {
+      conflictRef.current = nextConflict;
+      setConflict(nextConflict);
+    },
+    []
+  );
+  const setLocalDraft = useCallback(
+    (nextDraft) => {
+      localDraftRef.current = nextDraft;
+      setHasLocalOfflineDraft(nextDraft != null);
+      if (nextDraft) return;
+      void removeRealtimeOfflineDraft(roomId, draftStorageRef.current);
+    },
+    [roomId]
+  );
+  const persistLocalDraft = useCallback(() => {
+    clearDraftPersistSchedule();
+    if (!localDraftRef.current) {
+      void removeRealtimeOfflineDraft(roomId, draftStorageRef.current);
+      return;
+    }
+    const board = boardRef.current;
+    const draft = localDraftRef.current;
+    const canEncodeYDocState = board && draft.yDocState == null && sameSerializedItems(readVectorItems(board.yItems), draft.items);
+    const draftToWrite = canEncodeYDocState ? { ...draft, yDocState: encodeYDocState(board) } : draft;
+    void writeRealtimeOfflineDraft(draftToWrite, draftStorageRef.current);
+  }, [clearDraftPersistSchedule, roomId]);
+  const scheduleDraftPersistence = useCallback(() => {
+    clearDraftPersistSchedule();
+    draftPersistTimerRef.current = globalThis.setTimeout(() => {
+      draftPersistTimerRef.current = null;
+      draftPersistIdleRef.current = requestRuntimeIdleCallback(() => {
+        draftPersistIdleRef.current = null;
+        persistLocalDraft();
+      }, DRAFT_PERSIST_DEBOUNCE_MS);
+    }, DRAFT_PERSIST_DEBOUNCE_MS);
+  }, [clearDraftPersistSchedule, persistLocalDraft]);
+  const clearLocalDraft = useCallback(() => {
+    setLocalDraft(null);
+    clearDraftPersistSchedule();
+  }, [clearDraftPersistSchedule, setLocalDraft]);
+  const createSelfPeer = useCallback(
+    (state) => ({
+      id: peer.id,
+      clientId: clientIdRef.current,
+      peerId: peer.id,
+      roomId,
+      joinedAt: connection.lastConnectedAt ?? nowMs(),
+      lastSeenAt: nowMs(),
+      cursor: lastCursorRef.current,
+      isSelf: true,
+      connectionState: state,
+      ...peer.displayName ? { displayName: peer.displayName } : {},
+      ...peer.color ? { color: peer.color } : {},
+      ...peer.image ? { image: peer.image } : {},
+      ...lastMarkupStrokeRef.current !== void 0 ? { markupStroke: lastMarkupStrokeRef.current ?? null } : {},
+      ...lastCameraRef.current !== void 0 ? { camera: lastCameraRef.current ?? null } : {},
+      ...lastActiveToolRef.current ? { activeTool: lastActiveToolRef.current } : {}
+    }),
+    [
+      connection.lastConnectedAt,
+      peer.color,
+      peer.displayName,
+      peer.id,
+      peer.image,
+      roomId
+    ]
+  );
+  const collapsePeersToSelf = useCallback(
+    (state) => {
+      setSessionPeers((prev) => {
+        const selfPeer = prev.find(
+          (peerState) => peerState.clientId === clientIdRef.current
+        );
+        return [
+          selfPeer ? { ...selfPeer, isSelf: true, connectionState: state } : createSelfPeer(state)
+        ];
+      });
+    },
+    [createSelfPeer]
+  );
+  const applyPeers = useCallback((peers) => {
+    const selfClientId = clientIdRef.current;
+    setSessionPeers(
+      peers.map(
+        (peerState) => peerState.clientId === selfClientId ? {
+          ...peerState,
+          isSelf: true,
+          connectionState: connectionStateRef.current
+        } : peerState
+      )
+    );
+  }, []);
+  const buildClientMessage = useCallback(
+    (message) => JSON.stringify(message),
+    []
+  );
+  const sendRaw = useCallback(
+    (message) => {
+      const ws = wsRef.current;
+      const WebSocketConstructor = globalThis.WebSocket;
+      if (!ws || !WebSocketConstructor) return false;
+      if (ws.readyState !== WebSocketConstructor.OPEN) return false;
+      ws.send(buildClientMessage(message));
+      return true;
+    },
+    [buildClientMessage]
+  );
+  const flushQueuedDocument = useCallback(() => {
+    clearDocumentFlushSchedule();
+    const board = boardRef.current;
+    if (!board) return;
+    if (!queuedDirtyRef.current && pendingLocalItemsRef.current == null) return;
+    if (outboundInFlightRef.current) return;
+    const pendingLocal = pendingLocalItemsRef.current;
+    if (pendingLocal) {
+      pendingLocalItemsRef.current = null;
+      applyLocalItemsToYDoc(board, {
+        items: pendingLocal,
+        origin: ORIGIN_LOCAL
+      });
+    }
+    const baseRevision = currentRevisionRef.current;
+    const mergedItems = readVectorItems(board.yItems);
+    const preparedItems = prepareRealtimeItems(mergedItems);
+    if (!preparedItems) return;
+    queuedDirtyRef.current = false;
+    outboundInFlightRef.current = {
+      baseRevision,
+      items: preparedItems.items,
+      serialized: preparedItems.serialized
+    };
+    const didSend = sendRawRef.current({
+      type: "document:update",
+      roomId,
+      clientId: clientIdRef.current,
+      baseRevision,
+      items: preparedItems.items
+    });
+    const pendingIds = getLocallyPendingItemIds(board);
+    if (pendingIds.size > 0) {
+      setLocalDraftRef.current({
+        roomId,
+        baseRevision,
+        items: mergedItems,
+        updatedAt: nowMs(),
+        pendingIds: Array.from(pendingIds)
+      });
+      scheduleDraftPersistenceRef.current?.();
+    }
+    if (!didSend) {
+      queuedDirtyRef.current = true;
+      outboundInFlightRef.current = null;
+      setHasPendingDocumentSync(true);
+    }
+  }, [clearDocumentFlushSchedule, roomId]);
+  const scheduleDocumentFlush = useCallback(() => {
+    clearDocumentFlushSchedule();
+    documentFlushTimerRef.current = globalThis.setTimeout(() => {
+      documentFlushTimerRef.current = null;
+      documentFlushIdleRef.current = requestRuntimeIdleCallback(() => {
+        documentFlushIdleRef.current = null;
+        flushQueuedDocument();
+      }, DOCUMENT_FLUSH_DEBOUNCE_MS);
+    }, DOCUMENT_FLUSH_DEBOUNCE_MS);
+  }, [clearDocumentFlushSchedule, flushQueuedDocument]);
+  const queueDocumentSend = useCallback(
+    (items) => {
+      pendingLocalItemsRef.current = items;
+      queuedDirtyRef.current = true;
+      setHasPendingDocumentSync(true);
+      setHasLocalOfflineDraft(true);
+      const board = boardRef.current;
+      const draftItems = sanitizeRealtimeItems(items);
+      setLocalDraftRef.current({
+        roomId,
+        baseRevision: currentRevisionRef.current,
+        items: draftItems,
+        updatedAt: nowMs(),
+        pendingIds: board ? resolvePendingDraftItemIds(board, draftItems) : void 0
+      });
+      scheduleDraftPersistenceRef.current?.();
+      scheduleDocumentFlushRef.current();
+    },
+    [roomId]
+  );
+  const applyDraftSnapshot = useCallback(
+    (draft, options2) => {
+      const board = boardRef.current;
+      if (board) {
+        let restoredFromBinary = false;
+        if (draft.yDocState) {
+          if (board.yItems.length > 0) {
+            board.doc.transact(() => {
+              board.yItems.delete(0, board.yItems.length);
+            }, ORIGIN_BOOTSTRAP);
+          }
+          restoredFromBinary = decodeYDocState(board, draft.yDocState);
+          if (restoredFromBinary) {
+            const allIds = /* @__PURE__ */ new Set();
+            const allItems = readVectorItems(board.yItems);
+            for (let i = 0; i < board.yItems.length; i++) {
+              const yMap = board.yItems.get(i);
+              if (!yMap) continue;
+              const id = yMap.get("id");
+              if (typeof id === "string") allIds.add(id);
+            }
+            const pendingIds = new Set(draft.pendingIds ?? []);
+            board.lastServerConfirmedIds = /* @__PURE__ */ new Set();
+            board.lastServerConfirmedItemSerializations = /* @__PURE__ */ new Map();
+            for (const id of allIds) {
+              if (!pendingIds.has(id)) {
+                board.lastServerConfirmedIds.add(id);
+                const item = allItems.find((candidate) => candidate.id === id);
+                if (item) {
+                  board.lastServerConfirmedItemSerializations.set(
+                    id,
+                    JSON.stringify(item)
+                  );
+                }
+              }
+            }
+          }
+        }
+        if (!restoredFromBinary) {
+          replaceYDocWithSnapshot(board, {
+            items: draft.items,
+            origin: ORIGIN_BOOTSTRAP
+          });
+          board.lastServerConfirmedIds = /* @__PURE__ */ new Set();
+          board.lastServerConfirmedItemSerializations = /* @__PURE__ */ new Map();
+        }
+      }
+      const items = board ? readVectorItems(board.yItems) : draft.items;
+      const snapshot = {
+        revision: draft.baseRevision,
+        items,
+        updatedAt: draft.updatedAt,
+        updatedByClientId: clientIdRef.current
+      };
+      currentRevisionRef.current = snapshot.revision;
+      latestDocumentRef.current = snapshot;
+      setDocument(snapshot);
+      if (!options2?.suppressSubscriberNotify) {
+        notifySubscribers(items);
+      }
+    },
+    [notifySubscribers]
+  );
+  const resolveAuthoritativeDocument = useCallback(
+    (serverDocument, options2) => {
+      const board = boardRef.current;
+      const hadLocalContent = localDraftRef.current != null || board != null && board.yItems.length > 0;
+      applyDocument(serverDocument, {
+        ...options2,
+        replace: !hadLocalContent
+      });
+      if (!board) {
+        setHasPendingDocumentSync(false);
+        clearLocalDraftRef.current();
+        return false;
+      }
+      const pendingIds = getLocallyPendingItemIds(board);
+      if (pendingIds.size === 0) {
+        outboundInFlightRef.current = null;
+        queuedDirtyRef.current = false;
+        if (hasDurableDocumentPersistence(serverDocument)) {
+          clearLocalDraftRef.current();
+          setHasPendingDocumentSync(false);
+          return false;
+        }
+        const mergedItems2 = readVectorItems(board.yItems);
+        setLocalDraft({
+          roomId,
+          baseRevision: serverDocument.revision,
+          items: mergedItems2,
+          updatedAt: nowMs(),
+          pendingIds: []
+        });
+        setHasPendingDocumentSync(true);
+        return true;
+      }
+      const mergedItems = readVectorItems(board.yItems);
+      setLocalDraft({
+        roomId,
+        baseRevision: serverDocument.revision,
+        items: mergedItems,
+        updatedAt: nowMs(),
+        pendingIds: Array.from(pendingIds)
+      });
+      outboundInFlightRef.current = null;
+      queuedDirtyRef.current = true;
+      setHasPendingDocumentSync(true);
+      scheduleDocumentFlush();
+      return true;
+    },
+    [applyDocument, roomId, scheduleDocumentFlush, setLocalDraft]
+  );
+  const sendPresenceUpdate = useCallback(() => {
+    sendRaw({
+      type: "presence:update",
+      roomId,
+      clientId: clientIdRef.current,
+      presence: {
+        cursor: lastCursorRef.current,
+        markupStroke: lastMarkupStrokeRef.current ?? null,
+        camera: lastCameraRef.current ?? null,
+        ...lastActiveToolRef.current ? { activeTool: lastActiveToolRef.current } : {}
+      }
+    });
+  }, [roomId, sendRaw]);
+  const scheduleReconnect = useCallback(() => {
+    if (!reconnect || manualDisconnectRef.current) return;
+    clearReconnectTimer();
+    retryCountRef.current += 1;
+    const delay = Math.min(
+      maxReconnectDelayMs,
+      initialReconnectDelayMs * 2 ** Math.max(0, retryCountRef.current - 1)
+    );
+    updateConnection((prev) => ({
+      ...prev,
+      state: "reconnecting",
+      connected: false,
+      retryCount: retryCountRef.current
+    }));
+    reconnectTimerRef.current = globalThis.setTimeout(() => {
+      setConnectSequence((value) => value + 1);
+    }, delay);
+  }, [
+    clearReconnectTimer,
+    initialReconnectDelayMs,
+    maxReconnectDelayMs,
+    reconnect,
+    updateConnection
+  ]);
+  const resolveConflict = useCallback((_action) => {
+  }, []);
+  const setConflictStateRef = useRef(setConflictState);
+  setConflictStateRef.current = setConflictState;
+  const updateConnectionRef = useRef(updateConnection);
+  updateConnectionRef.current = updateConnection;
+  const applyDocumentRef = useRef(applyDocument);
+  applyDocumentRef.current = applyDocument;
+  const clearLocalDraftRef = useRef(clearLocalDraft);
+  clearLocalDraftRef.current = clearLocalDraft;
+  const collapsePeersToSelfRef = useRef(collapsePeersToSelf);
+  collapsePeersToSelfRef.current = collapsePeersToSelf;
+  const applyPeersRef = useRef(applyPeers);
+  applyPeersRef.current = applyPeers;
+  const resolveAuthoritativeDocumentRef = useRef(resolveAuthoritativeDocument);
+  resolveAuthoritativeDocumentRef.current = resolveAuthoritativeDocument;
+  const scheduleDocumentFlushRef = useRef(scheduleDocumentFlush);
+  scheduleDocumentFlushRef.current = scheduleDocumentFlush;
+  const scheduleReconnectRef = useRef(scheduleReconnect);
+  scheduleReconnectRef.current = scheduleReconnect;
+  const sendRawRef = useRef(sendRaw);
+  sendRawRef.current = sendRaw;
+  const setLocalDraftRef = useRef(setLocalDraft);
+  setLocalDraftRef.current = setLocalDraft;
+  const scheduleDraftPersistenceRef = useRef(scheduleDraftPersistence);
+  scheduleDraftPersistenceRef.current = scheduleDraftPersistence;
+  const persistLocalDraftRef = useRef(persistLocalDraft);
+  persistLocalDraftRef.current = persistLocalDraft;
+  useEffect(() => {
+    const runtimeWindow = globalThis.window;
+    const runtimeDocument = runtimeWindow?.document;
+    if (!runtimeWindow || !runtimeDocument) return;
+    const persistDraft = () => {
+      persistLocalDraftRef.current();
+    };
+    const handleVisibilityChange = () => {
+      if (runtimeDocument.visibilityState === "hidden") persistDraft();
+    };
+    runtimeWindow.addEventListener("pagehide", persistDraft);
+    runtimeDocument.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      runtimeWindow.removeEventListener("pagehide", persistDraft);
+      runtimeDocument.removeEventListener(
+        "visibilitychange",
+        handleVisibilityChange
+      );
+    };
+  }, []);
+  useEffect(() => {
+    let cancelled = false;
+    if (boardRef.current) {
+      boardRef.current.doc.destroy();
+    }
+    boardRef.current = createYjsBoardDoc();
+    if (!roomId) {
+      clearDocumentFlushSchedule();
+      clearDraftPersistSchedule();
+      localDraftRef.current = null;
+      setHasLocalOfflineDraft(false);
+      setHasPendingDocumentSync(false);
+      setConflictState(null);
+      queuedDirtyRef.current = false;
+      pendingLocalItemsRef.current = null;
+      outboundInFlightRef.current = null;
+      latestDocumentRef.current = null;
+      setDocument(null);
+      currentRevisionRef.current = 0;
+      return;
+    }
+    setConflictState(null);
+    pendingLocalItemsRef.current = null;
+    outboundInFlightRef.current = null;
+    void readRealtimeOfflineDraft(roomId, draftStorageRef.current).then(
+      (localDraft) => {
+        if (cancelled) return;
+        setLocalDraft(localDraft);
+        setHasPendingDocumentSync(localDraft != null);
+        queuedDirtyRef.current = localDraft != null;
+        if (localDraft) {
+          applyDraftSnapshot(localDraft, {
+            suppressSubscriberNotify: sameSerializedItems(
+              latestDocumentRef.current?.items,
+              localDraft.items
+            )
+          });
+          return;
+        }
+        latestDocumentRef.current = null;
+        setDocument(null);
+        currentRevisionRef.current = 0;
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    applyDraftSnapshot,
+    clearDocumentFlushSchedule,
+    clearDraftPersistSchedule,
+    roomId,
+    setConflictState,
+    setLocalDraft
+  ]);
+  useEffect(() => {
+    if (!enabled) {
+      manualDisconnectRef.current = true;
+      clearReconnectTimer();
+      clearHeartbeatTimer();
+      clearConnectTimeout();
+      clearDocumentFlushSchedule();
+      wsRef.current?.close();
+      wsRef.current = null;
+      queuedDirtyRef.current = localDraftRef.current != null;
+      outboundInFlightRef.current = null;
+      setHasPendingDocumentSync(localDraftRef.current != null);
+      collapsePeersToSelfRef.current("offline");
+      updateConnectionRef.current((prev) => ({
+        ...prev,
+        state: "offline",
+        connected: false,
+        roomId,
+        clientId: null
+      }));
+      return;
+    }
+    manualDisconnectRef.current = false;
+    const socketUrl = normalizeSocketUrl(url);
+    if (!socketUrl) {
+      collapsePeersToSelfRef.current("offline");
+      updateConnectionRef.current((prev) => ({
+        ...prev,
+        state: "offline",
+        connected: false,
+        roomId,
+        lastError: null
+      }));
+      return;
+    }
+    if (!isValidSocketUrl(socketUrl)) {
+      updateConnectionRef.current((prev) => ({
+        ...prev,
+        state: "error",
+        connected: false,
+        roomId,
+        lastError: "URL de websocket invalida."
+      }));
+      onErrorRef.current?.("URL de websocket invalida.");
+      return;
+    }
+    const WebSocketConstructor = globalThis.WebSocket;
+    if (!WebSocketConstructor) {
+      updateConnectionRef.current((prev) => ({
+        ...prev,
+        state: "error",
+        connected: false,
+        roomId,
+        lastError: "WebSocket nao esta disponivel neste runtime."
+      }));
+      onErrorRef.current?.("WebSocket nao esta disponivel neste runtime.");
+      return;
+    }
+    let disposed = false;
+    updateConnectionRef.current((prev) => ({
+      ...prev,
+      state: retryCountRef.current > 0 ? "reconnecting" : "connecting",
+      connected: false,
+      roomId,
+      lastError: null
+    }));
+    const socket = new WebSocketConstructor(socketUrl);
+    wsRef.current = socket;
+    clearConnectTimeout();
+    connectTimeoutRef.current = globalThis.setTimeout(() => {
+      if (socket.readyState === WebSocketConstructor.CONNECTING) {
+        socket.close();
+      }
+    }, connectTimeoutMs);
+    const removeSocketListeners = [
+      addRealtimeSocketListener(socket, "open", () => {
+        if (disposed) return;
+        clearConnectTimeout();
+        sendRawRef.current({
+          type: "session:join",
+          roomId,
+          peer: {
+            clientId: clientIdRef.current,
+            peerId: peer.id,
+            ...peer.displayName ? { displayName: peer.displayName } : {},
+            ...peer.color ? { color: peer.color } : {},
+            ...peer.image ? { image: peer.image } : {}
+          }
+        });
+        clearHeartbeatTimer();
+        heartbeatTimerRef.current = globalThis.setInterval(() => {
+          sendRawRef.current({
+            type: "session:ping",
+            roomId,
+            clientId: clientIdRef.current,
+            sentAt: nowMs()
+          });
+        }, heartbeatMs);
+      }),
+      addRealtimeSocketListener(socket, "message", (event) => {
+        if (disposed) return;
+        if (!("data" in event)) return;
+        let payload = event.data;
+        if (typeof payload === "string") {
+          try {
+            payload = JSON.parse(payload);
+          } catch {
+            return;
+          }
+        }
+        const parsed = parseRealtimeServerMessage(payload);
+        if (!parsed) return;
+        updateConnectionRef.current((prev) => ({
+          ...prev,
+          lastMessageAt: nowMs()
+        }));
+        if (parsed.type === "session:welcome") {
+          retryCountRef.current = 0;
+          updateConnectionRef.current((prev) => ({
+            ...prev,
+            state: "connected",
+            connected: true,
+            clientId: parsed.clientId,
+            retryCount: 0,
+            lastConnectedAt: nowMs(),
+            lastError: null
+          }));
+          applyPeersRef.current(parsed.peers);
+          const handledByDraft = resolveAuthoritativeDocumentRef.current(
+            sanitizeRealtimeSnapshot(parsed.document),
+            {
+              suppressSubscriberNotify: localDraftRef.current != null && sameSerializedItems(
+                latestDocumentRef.current?.items,
+                localDraftRef.current.items
+              )
+            }
+          );
+          if (!handledByDraft) {
+            queuedDirtyRef.current = false;
+            outboundInFlightRef.current = null;
+            setHasPendingDocumentSync(false);
+          }
+          scheduleDocumentFlushRef.current();
+          return;
+        }
+        if (parsed.type === "presence:sync") {
+          applyPeersRef.current(parsed.peers);
+          return;
+        }
+        if (parsed.type === "session:peer-joined") {
+          setSessionPeers((prev) => {
+            const next = prev.filter(
+              (peerState) => peerState.clientId !== parsed.peer.clientId
+            );
+            next.push(
+              parsed.peer.clientId === clientIdRef.current ? { ...parsed.peer, isSelf: true } : parsed.peer
+            );
+            return next;
+          });
+          return;
+        }
+        if (parsed.type === "session:peer-left") {
+          setSessionPeers(
+            (prev) => prev.filter((peerState) => peerState.clientId !== parsed.clientId)
+          );
+          return;
+        }
+        if (parsed.type === "session:pong") {
+          updateConnectionRef.current((prev) => ({
+            ...prev,
+            lastPongAt: parsed.serverTime
+          }));
+          return;
+        }
+        if (parsed.type === "session:error") {
+          updateConnectionRef.current((prev) => ({
+            ...prev,
+            state: prev.connected ? prev.state : "error",
+            lastError: parsed.message
+          }));
+          onErrorRef.current?.(parsed.message);
+          return;
+        }
+        if (parsed.type === "document:sync") {
+          const selfClientId = clientIdRef.current;
+          const inFlight = outboundInFlightRef.current;
+          const isSelfAck = parsed.document.updatedByClientId === selfClientId;
+          if (!isSelfAck) {
+            outboundInFlightRef.current = null;
+            resolveAuthoritativeDocumentRef.current(
+              sanitizeRealtimeSnapshot(parsed.document)
+            );
+            return;
+          }
+          const shouldSuppress = inFlight != null && sameSerializedItems(inFlight.items, parsed.document.items);
+          outboundInFlightRef.current = null;
+          applyDocumentRef.current(sanitizeRealtimeSnapshot(parsed.document), {
+            suppressSubscriberNotify: shouldSuppress
+          });
+          const board = boardRef.current;
+          const stillPending = board ? getLocallyPendingItemIds(board).size > 0 : false;
+          if (stillPending) {
+            const mergedItems = board ? readVectorItems(board.yItems) : [];
+            setLocalDraftRef.current({
+              roomId,
+              baseRevision: currentRevisionRef.current,
+              items: mergedItems,
+              updatedAt: nowMs(),
+              pendingIds: board ? Array.from(getLocallyPendingItemIds(board)) : void 0
+            });
+            queuedDirtyRef.current = true;
+            setHasPendingDocumentSync(true);
+            scheduleDocumentFlushRef.current();
+          } else {
+            queuedDirtyRef.current = false;
+            if (hasDurableDocumentPersistence(parsed.document)) {
+              clearLocalDraftRef.current();
+              setHasPendingDocumentSync(false);
+            } else {
+              const mergedItems = board ? readVectorItems(board.yItems) : [];
+              setLocalDraftRef.current({
+                roomId,
+                baseRevision: currentRevisionRef.current,
+                items: mergedItems,
+                updatedAt: nowMs(),
+                pendingIds: []
+              });
+              setHasPendingDocumentSync(true);
+            }
+          }
+          setConflictStateRef.current(null);
+          return;
+        }
+        if (parsed.type === "document:resync-required") {
+          outboundInFlightRef.current = null;
+          queuedDirtyRef.current = localDraftRef.current != null;
+          setHasPendingDocumentSync(queuedDirtyRef.current);
+          updateConnectionRef.current((prev) => ({
+            ...prev,
+            lastError: parsed.reason
+          }));
+          resolveAuthoritativeDocumentRef.current(
+            sanitizeRealtimeSnapshot(parsed.document)
+          );
+        }
+      }),
+      addRealtimeSocketListener(socket, "error", () => {
+        if (disposed) return;
+        updateConnectionRef.current((prev) => ({
+          ...prev,
+          state: prev.connected ? prev.state : "error",
+          lastError: "Falha de conex\xE3o websocket."
+        }));
+      }),
+      addRealtimeSocketListener(socket, "close", () => {
+        if (disposed) return;
+        clearHeartbeatTimer();
+        clearConnectTimeout();
+        wsRef.current = null;
+        collapsePeersToSelfRef.current(
+          manualDisconnectRef.current || !enabled ? "offline" : "reconnecting"
+        );
+        updateConnectionRef.current((prev) => ({
+          ...prev,
+          connected: false,
+          clientId: prev.clientId,
+          state: manualDisconnectRef.current || !enabled ? "offline" : prev.state
+        }));
+        if (!manualDisconnectRef.current && enabled) {
+          scheduleReconnectRef.current();
+        }
+      })
+    ];
+    return () => {
+      disposed = true;
+      for (const removeSocketListener of removeSocketListeners) {
+        removeSocketListener();
+      }
+      clearReconnectTimer();
+      clearHeartbeatTimer();
+      clearConnectTimeout();
+      clearDocumentFlushSchedule();
+      socket.close();
+    };
+  }, [
+    clearConnectTimeout,
+    clearDocumentFlushSchedule,
+    clearHeartbeatTimer,
+    clearReconnectTimer,
+    connectSequence,
+    connectTimeoutMs,
+    enabled,
+    heartbeatMs,
+    peer.color,
+    peer.displayName,
+    peer.id,
+    peer.image,
+    roomId,
+    url
+  ]);
+  useEffect(() => {
+    setSessionPeers(
+      (prev) => prev.map(
+        (peerState) => peerState.clientId === clientIdRef.current ? {
+          ...peerState,
+          isSelf: true,
+          connectionState: connection.state
+        } : peerState
+      )
+    );
+  }, [connection.state]);
+  useEffect(
+    () => () => {
+      clearDocumentFlushSchedule();
+      clearDraftPersistSchedule();
+      if (boardRef.current) {
+        boardRef.current.doc.destroy();
+        boardRef.current = null;
+      }
+    },
+    [clearDocumentFlushSchedule, clearDraftPersistSchedule]
+  );
+  const flushDocumentSync = useCallback(async () => {
+    const board = boardRef.current;
+    const pendingLocal = pendingLocalItemsRef.current;
+    if (board && pendingLocal) {
+      pendingLocalItemsRef.current = null;
+      applyLocalItemsToYDoc(board, {
+        items: pendingLocal,
+        origin: ORIGIN_LOCAL
+      });
+      const mergedItems = readVectorItems(board.yItems);
+      const pendingIds = getLocallyPendingItemIds(board);
+      if (pendingIds.size > 0) {
+        setLocalDraftRef.current({
+          roomId,
+          baseRevision: currentRevisionRef.current,
+          items: mergedItems,
+          updatedAt: nowMs(),
+          pendingIds: Array.from(pendingIds)
+        });
+      }
+    }
+    persistLocalDraft();
+    if (!connection.connected) return;
+    flushQueuedDocument();
+  }, [connection.connected, flushQueuedDocument, persistLocalDraft, roomId]);
+  const remoteAdapter = useMemo(
+    () => ({
+      subscribe(onItems) {
+        subscriberRefs.current.add(onItems);
+        if (latestDocumentRef.current) {
+          onItems(latestDocumentRef.current.items);
+        }
+        return () => {
+          subscriberRefs.current.delete(onItems);
+        };
+      },
+      send(items) {
+        queueDocumentSend(items);
+      },
+      flush() {
+        return flushDocumentSync();
+      }
+    }),
+    [flushDocumentSync, queueDocumentSend]
+  );
+  const disconnect = useCallback(() => {
+    manualDisconnectRef.current = true;
+    clearReconnectTimer();
+    clearHeartbeatTimer();
+    clearConnectTimeout();
+    sendRaw({
+      type: "session:leave",
+      roomId,
+      clientId: clientIdRef.current
+    });
+    wsRef.current?.close();
+    wsRef.current = null;
+    collapsePeersToSelf("offline");
+    updateConnection((prev) => ({
+      ...prev,
+      state: "offline",
+      connected: false
+    }));
+  }, [
+    clearConnectTimeout,
+    clearHeartbeatTimer,
+    clearReconnectTimer,
+    collapsePeersToSelf,
+    roomId,
+    sendRaw,
+    updateConnection
+  ]);
+  const reconnectNow = useCallback(() => {
+    disconnect();
+    manualDisconnectRef.current = false;
+    retryCountRef.current = 0;
+    setConnectSequence((value) => value + 1);
+  }, [disconnect]);
+  const remotePresence = useMemo(
+    () => 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,
+      onWorldPointerMove(world) {
+        lastCursorRef.current = world;
+        lastActiveToolRef.current = bindingOptions?.activeTool;
+        sendPresenceUpdate();
+      },
+      onWorldPointerLeave() {
+        lastCursorRef.current = null;
+        lastActiveToolRef.current = bindingOptions?.activeTool;
+        sendPresenceUpdate();
+      },
+      onPlacementPreviewChange(preview) {
+        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]
+  );
+  return {
+    connection,
+    sessionPeers,
+    remotePresence,
+    remoteAdapter,
+    document,
+    hasLocalOfflineDraft,
+    hasPendingDocumentSync,
+    syncState,
+    conflict,
+    bindViewportPresence,
+    syncViewportPresence,
+    resolveConflict,
+    clearLocalDraft,
+    flushDocumentSync,
+    disconnect,
+    reconnectNow
+  };
+}
+
+export { createBrowserDraftStorage, parseRealtimeClientMessage, parseRealtimeServerMessage, useRealtimeCanvasDocument, useRealtimePeerFollow, useRealtimeSession };
+//# sourceMappingURL=realtimeNative.js.map
+//# sourceMappingURL=realtimeNative.js.map