@mocanvas/sync 1.0.0 → 4.0.1

package/dist/index.js

@@ -1,11 +1,499 @@
 import { react, atom } from '@mocanvas/state';
-import { uniqueId, isRecordsDiffEmpty } from '@mocanvas/store';
+import { uniqueId, isRecordsDiffEmpty, createEmptyRecordsDiff } from '@mocanvas/store';
 import { InstancePresenceRecordType } from '@mocanvas/editor';
 import { track, useValue } from '@mocanvas/state/react';
 import { useRef, useState, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/SyncClient.ts
+var CRDT_STATE_VERSION = 1;
+var DEFAULT_TOMBSTONE_LIMIT = 5e3;
+var DEFAULT_TOMBSTONE_MAX_AGE_MS = 60 * 60 * 1e3;
+function compareStamps(a, b) {
+  if (a.lamport !== b.lamport) return a.lamport < b.lamport ? -1 : 1;
+  if (a.client === b.client) return 0;
+  return a.client < b.client ? -1 : 1;
+}
+function isStamp(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const stamp = value;
+  return typeof stamp.lamport === "number" && Number.isFinite(stamp.lamport) && typeof stamp.client === "string";
+}
+function createLamportClock(start = 0) {
+  let value = start;
+  return {
+    get: () => value,
+    tick: () => value += 1,
+    observe(remote) {
+      if (!Number.isFinite(remote)) return;
+      value = Math.max(value, remote) + 1;
+    }
+  };
+}
+function createEmptyStampedDiff() {
+  return { puts: [], removes: [] };
+}
+function isStampedDiffEmpty(diff) {
+  return diff.puts.length === 0 && diff.removes.length === 0;
+}
+function isStampedDiffLike(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const diff = value;
+  if (!Array.isArray(diff.puts) || !Array.isArray(diff.removes)) return false;
+  for (const put of diff.puts) {
+    if (typeof put !== "object" || put === null) return false;
+    const { record, fields, base } = put;
+    if (typeof record !== "object" || record === null) return false;
+    if (typeof record.id !== "string") return false;
+    if (typeof record.typeName !== "string") return false;
+    if (!isStampMap(fields)) return false;
+    if (base !== void 0 && !isStamp(base)) return false;
+  }
+  for (const remove of diff.removes) {
+    if (typeof remove !== "object" || remove === null) return false;
+    const { id, stamp } = remove;
+    if (typeof id !== "string" || !isStamp(stamp)) return false;
+  }
+  return true;
+}
+function createEmptyCrdtState() {
+  return { version: CRDT_STATE_VERSION, clock: 0, records: {} };
+}
+function isCrdtStateLike(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const state = value;
+  if (typeof state.version !== "number") return false;
+  if (typeof state.clock !== "number") return false;
+  if (typeof state.records !== "object" || state.records === null || Array.isArray(state.records)) return false;
+  for (const key of Object.keys(state.records)) {
+    const record = state.records[key];
+    if (typeof record !== "object" || record === null) return false;
+    const { fields, deleted, base } = record;
+    if (!isStampMap(fields)) return false;
+    if (deleted !== void 0 && !isStamp(deleted)) return false;
+    if (base !== void 0 && !isStamp(base)) return false;
+  }
+  return true;
+}
+function isStampMap(value) {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+  for (const key of Object.keys(value)) {
+    if (!isStamp(value[key])) return false;
+  }
+  return true;
+}
+function maxStamp(a, b) {
+  if (!a) return b;
+  if (!b) return a;
+  return compareStamps(a, b) >= 0 ? a : b;
+}
+function greatestStamp(fields) {
+  let best;
+  for (const path of Object.keys(fields)) best = maxStamp(best, fields[path]);
+  return best;
+}
+function ancestorPaths(path) {
+  const out = [];
+  let index = path.indexOf(".");
+  while (index !== -1) {
+    out.push(path.slice(0, index));
+    index = path.indexOf(".", index + 1);
+  }
+  return out;
+}
+function claimPath(state, path, stamp) {
+  const own = state.fields.get(path);
+  if (own && compareStamps(stamp, own) <= 0) return null;
+  for (const ancestor of ancestorPaths(path)) {
+    const above = state.fields.get(ancestor);
+    if (above && compareStamps(stamp, above) <= 0) return null;
+  }
+  const survivors = [];
+  const prefix = `${path}.`;
+  for (const [other, existing] of Array.from(state.fields)) {
+    if (!other.startsWith(prefix)) continue;
+    if (compareStamps(existing, stamp) <= 0) state.fields.delete(other);
+    else survivors.push(other);
+  }
+  state.fields.set(path, stamp);
+  return survivors;
+}
+function isStamped(state, path) {
+  if (state.fields.has(path)) return true;
+  for (const ancestor of ancestorPaths(path)) {
+    if (state.fields.has(ancestor)) return true;
+  }
+  return false;
+}
+function highestAbsent(body, state, path) {
+  for (const ancestor of ancestorPaths(path)) {
+    if (readPath(body, ancestor) !== ABSENT) continue;
+    if (isStamped(state, ancestor) || hasStampedDescendant(state, ancestor)) continue;
+    return ancestor;
+  }
+  return path;
+}
+function hasStampedDescendant(state, path) {
+  const prefix = `${path}.`;
+  for (const other of state.fields.keys()) {
+    if (other.startsWith(prefix)) return true;
+  }
+  return false;
+}
+function createCrdt(options) {
+  const { clientId } = options;
+  const getRecord = options.getRecord ?? (() => void 0);
+  const tombstoneLimit = options.tombstoneLimit ?? DEFAULT_TOMBSTONE_LIMIT;
+  const tombstoneMaxAgeMs = options.tombstoneMaxAgeMs ?? DEFAULT_TOMBSTONE_MAX_AGE_MS;
+  const now = options.now ?? (() => Date.now());
+  const clock = createLamportClock();
+  const states = /* @__PURE__ */ new Map();
+  let outgoing = createEmptyStampedDiff();
+  const stateFor = (id) => {
+    let state = states.get(id);
+    if (!state) {
+      state = { fields: /* @__PURE__ */ new Map() };
+      states.set(id, state);
+    }
+    return state;
+  };
+  const startPass = () => ({ before: /* @__PURE__ */ new Map(), after: /* @__PURE__ */ new Map() });
+  const readBefore = (pass, id) => {
+    if (!pass.before.has(id)) pass.before.set(id, getRecord(id));
+    return pass.before.get(id);
+  };
+  const readCurrent = (pass, id) => pass.after.has(id) ? pass.after.get(id) : readBefore(pass, id);
+  const write = (pass, id, value) => {
+    readBefore(pass, id);
+    pass.after.set(id, value);
+  };
+  const finishPass = (pass) => {
+    const result = createEmptyRecordsDiff();
+    for (const [id, next] of pass.after) {
+      const prev = pass.before.get(id);
+      if (prev === next) continue;
+      const key = id;
+      if (prev === void 0) {
+        if (next !== void 0) result.added[key] = next;
+      } else if (next === void 0) {
+        result.removed[key] = prev;
+      } else {
+        result.updated[key] = [prev, next];
+      }
+    }
+    return result;
+  };
+  const applyRemove = (pass, id, stamp) => {
+    const state = stateFor(id);
+    if (state.deleted && compareStamps(stamp, state.deleted) <= 0) return;
+    state.deleted = stamp;
+    state.deletedAt = now();
+    state.base = maxStamp(state.base, stamp);
+    let alive = false;
+    for (const [path, existing] of Array.from(state.fields)) {
+      if (compareStamps(existing, stamp) > 0) alive = true;
+      else state.fields.delete(path);
+    }
+    if (!alive) {
+      if (readCurrent(pass, id) !== void 0) write(pass, id, void 0);
+      return;
+    }
+    const record = readCurrent(pass, id);
+    if (!record) return;
+    const revival = { lamport: clock.tick(), client: clientId };
+    const fields = {};
+    for (const path of leafPaths(record)) {
+      fields[path] = revival;
+      claimPath(state, path, revival);
+    }
+    state.base = revival;
+    outgoing.puts.push({ record, fields, base: revival });
+  };
+  const adoptBody = (record, body, state) => {
+    const paths = /* @__PURE__ */ new Set([...leafPaths(body), ...leafPaths(record)]);
+    let next = record;
+    for (const path of Array.from(paths).sort()) {
+      if (path === "id" || path === "typeName") continue;
+      if (isStamped(state, path) || hasStampedDescendant(state, path)) continue;
+      const value = readPath(body, path);
+      next = writePath(next, value === ABSENT ? highestAbsent(body, state, path) : path, value);
+    }
+    return next;
+  };
+  const applyPut = (pass, put) => {
+    const id = put.record.id;
+    const state = stateFor(id);
+    const claims = [];
+    for (const path of Object.keys(put.fields)) {
+      const stamp = put.fields[path];
+      if (!stamp) continue;
+      if (state.deleted && compareStamps(stamp, state.deleted) <= 0) continue;
+      const survivors = claimPath(state, path, stamp);
+      if (survivors === null) continue;
+      claims.push({ path, survivors });
+    }
+    const base = put.base ?? greatestStamp(put.fields);
+    const bodyWins = base !== void 0 && (state.base === void 0 || compareStamps(base, state.base) > 0);
+    if (claims.length === 0 && !bodyWins) return;
+    const current = readCurrent(pass, id);
+    if (current === void 0) {
+      if (claims.length === 0) return;
+      write(pass, id, put.record);
+      state.base = maxStamp(state.base, base);
+      return;
+    }
+    let next = current;
+    for (const { path, survivors } of claims) {
+      if (path === "id") continue;
+      const before = next;
+      next = writePath(next, path, readPath(put.record, path));
+      for (const survivor of survivors) next = writePath(next, survivor, readPath(before, survivor));
+    }
+    if (bodyWins) {
+      next = adoptBody(next, put.record, state);
+      state.base = base;
+    }
+    if (next !== current) write(pass, id, next);
+  };
+  const observeStamps = (stamped) => {
+    let max = -1;
+    for (const put of stamped.puts) {
+      for (const path of Object.keys(put.fields)) {
+        const stamp = put.fields[path];
+        if (stamp && stamp.lamport > max) max = stamp.lamport;
+      }
+      if (put.base && put.base.lamport > max) max = put.base.lamport;
+    }
+    for (const remove of stamped.removes) {
+      if (remove.stamp.lamport > max) max = remove.stamp.lamport;
+    }
+    if (max >= 0) clock.observe(max);
+  };
+  const collectTombstones = () => {
+    const gone = [];
+    for (const [id, state] of states) {
+      if (state.deleted && state.fields.size === 0) gone.push({ id, at: state.deletedAt ?? 0 });
+    }
+    if (gone.length === 0) return;
+    const cutoff = now() - tombstoneMaxAgeMs;
+    let overflow = gone.length - tombstoneLimit;
+    if (overflow <= 0 && gone.every((entry) => entry.at >= cutoff)) return;
+    gone.sort((a, b) => a.at - b.at);
+    for (const entry of gone) {
+      if (overflow > 0) {
+        states.delete(entry.id);
+        overflow--;
+        continue;
+      }
+      if (entry.at < cutoff) states.delete(entry.id);
+    }
+  };
+  return {
+    clientId,
+    clock,
+    stampLocal(diff) {
+      const stamp = { lamport: clock.tick(), client: clientId };
+      const result = createEmptyStampedDiff();
+      for (const id in diff.added) {
+        const record = diff.added[id];
+        if (!record) continue;
+        const fields = {};
+        const state = stateFor(id);
+        for (const path of leafPaths(record)) {
+          fields[path] = stamp;
+          claimPath(state, path, stamp);
+        }
+        state.base = stamp;
+        result.puts.push({ record, fields, base: stamp });
+      }
+      for (const id in diff.updated) {
+        const pair = diff.updated[id];
+        if (!pair) continue;
+        const [from, to] = pair;
+        const paths = changedPaths(from, to);
+        if (paths.length === 0) continue;
+        const fields = {};
+        const state = stateFor(id);
+        for (const path of paths) {
+          fields[path] = stamp;
+          claimPath(state, path, stamp);
+        }
+        state.base = stamp;
+        result.puts.push({ record: to, fields, base: stamp });
+      }
+      for (const id in diff.removed) {
+        const state = stateFor(id);
+        state.deleted = stamp;
+        state.deletedAt = now();
+        state.fields.clear();
+        state.base = stamp;
+        result.removes.push({ id, stamp });
+      }
+      collectTombstones();
+      return result;
+    },
+    mergeRemote(stamped) {
+      observeStamps(stamped);
+      const pass = startPass();
+      for (const remove of stamped.removes) applyRemove(pass, remove.id, remove.stamp);
+      for (const put of stamped.puts) applyPut(pass, put);
+      collectTombstones();
+      return finishPass(pass);
+    },
+    getState() {
+      const records = {};
+      for (const [id, state] of states) {
+        const fields = {};
+        for (const [path, stamp] of state.fields) fields[path] = stamp;
+        records[id] = {
+          fields,
+          ...state.base ? { base: state.base } : {},
+          ...state.deleted ? { deleted: state.deleted, deletedAt: state.deletedAt ?? 0 } : {}
+        };
+      }
+      return { version: CRDT_STATE_VERSION, clock: clock.get(), records };
+    },
+    applyState(state) {
+      const pass = startPass();
+      if (state.version !== CRDT_STATE_VERSION) return finishPass(pass);
+      clock.observe(state.clock);
+      for (const id of Object.keys(state.records)) {
+        const incoming = state.records[id];
+        if (!incoming) continue;
+        if (incoming.deleted) applyRemove(pass, id, incoming.deleted);
+        const local = stateFor(id);
+        for (const path of Object.keys(incoming.fields)) {
+          const stamp = incoming.fields[path];
+          if (!stamp) continue;
+          clock.observe(stamp.lamport);
+          if (local.deleted && compareStamps(stamp, local.deleted) <= 0) continue;
+          claimPath(local, path, stamp);
+        }
+        if (incoming.base) {
+          clock.observe(incoming.base.lamport);
+          local.base = maxStamp(local.base, incoming.base);
+        }
+      }
+      collectTombstones();
+      return finishPass(pass);
+    },
+    takeOutgoing() {
+      if (isStampedDiffEmpty(outgoing)) return null;
+      const result = outgoing;
+      outgoing = createEmptyStampedDiff();
+      return result;
+    },
+    size: () => states.size,
+    collectTombstones
+  };
+}
+function stampedDiffFromSnapshot(records, state) {
+  const result = createEmptyStampedDiff();
+  for (const record of records) {
+    const entry = state.records[record.id];
+    const fields = entry?.fields ?? {};
+    const base = entry?.base ?? greatestStamp(fields);
+    result.puts.push(base ? { record, fields, base } : { record, fields });
+  }
+  for (const id of Object.keys(state.records)) {
+    const deleted = state.records[id]?.deleted;
+    if (deleted) result.removes.push({ id, stamp: deleted });
+  }
+  return result;
+}
+var ABSENT = /* @__PURE__ */ Symbol("absent");
+function isPlainObject(value) {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
+function leafPaths(value, prefix = "") {
+  const out = [];
+  collectLeaves(value, prefix, out);
+  return out;
+}
+function collectLeaves(value, prefix, out) {
+  if (isPlainObject(value)) {
+    const keys = Object.keys(value);
+    if (keys.length > 0) {
+      for (const key of keys) collectLeaves(value[key], prefix ? `${prefix}.${key}` : key, out);
+      return;
+    }
+  }
+  if (prefix !== "") out.push(prefix);
+}
+function changedPaths(from, to) {
+  const out = [];
+  collectChanges(from, to, "", out);
+  return out;
+}
+function collectChanges(from, to, prefix, out) {
+  if (isPlainObject(from) && isPlainObject(to)) {
+    for (const key of Object.keys(from)) {
+      const path = prefix ? `${prefix}.${key}` : key;
+      if (!(key in to)) out.push(path);
+      else collectChanges(from[key], to[key], path, out);
+    }
+    for (const key of Object.keys(to)) {
+      if (key in from) continue;
+      collectLeaves(to[key], prefix ? `${prefix}.${key}` : key, out);
+    }
+    return;
+  }
+  if (!deepEqual(from, to) && prefix !== "") out.push(prefix);
+}
+function readPath(source, path) {
+  let current = source;
+  for (const segment of path.split(".")) {
+    if (!isPlainObject(current) || !(segment in current)) return ABSENT;
+    current = current[segment];
+  }
+  return current;
+}
+function writePath(record, path, value) {
+  const current = readPath(record, path);
+  if (value === ABSENT) {
+    if (current === ABSENT) return record;
+  } else if (current !== ABSENT && deepEqual(current, value)) {
+    return record;
+  }
+  const segments = path.split(".");
+  return setIn(record, segments, 0, value);
+}
+function setIn(target, segments, index, value) {
+  const key = segments[index];
+  if (key === void 0) return target;
+  const next = { ...target };
+  if (index === segments.length - 1) {
+    if (value === ABSENT) delete next[key];
+    else next[key] = value;
+    return next;
+  }
+  const child = next[key];
+  next[key] = setIn(isPlainObject(child) ? child : {}, segments, index + 1, value);
+  return next;
+}
+function deepEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    for (const key of keysA) {
+      if (!(key in b)) return false;
+      if (!deepEqual(a[key], b[key])) return false;
+    }
+    return true;
+  }
+  return false;
+}
 var DEFAULT_PRESENCE_THROTTLE_MS = Math.ceil(1e3 / 30);
 var DEFAULT_PRESENCE_HEARTBEAT_MS = 3e3;
 var DEFAULT_PRESENCE_TIMEOUT_MS = 1e4;
@@ -98,7 +586,15 @@ function createPresenceSync(options) {
   };
 }
 function isSamePresence(a, b) {
-  return a.userId === b.userId && a.userName === b.userName && a.color === b.color && a.currentPageId === b.currentPageId && a.chatMessage === b.chatMessage && a.followingUserId === b.followingUserId && a.cursor.x === b.cursor.x && a.cursor.y === b.cursor.y && a.cursor.type === b.cursor.type && a.cursor.rotation === b.cursor.rotation && a.camera.x === b.camera.x && a.camera.y === b.camera.y && a.camera.z === b.camera.z && sameIds(a.selectedShapeIds, b.selectedShapeIds) && sameBrush(a.brush, b.brush) && a.scribbles.length === b.scribbles.length && a.scribbles.every((s, i) => s === b.scribbles[i]);
+  return a.userId === b.userId && a.userName === b.userName && a.color === b.color && a.currentPageId === b.currentPageId && a.chatMessage === b.chatMessage && a.followingUserId === b.followingUserId && sameCursor(a.cursor, b.cursor) && sameCamera(a.camera, b.camera) && sameIds(a.selectedShapeIds, b.selectedShapeIds) && sameBrush(a.brush, b.brush) && a.scribbles.length === b.scribbles.length && a.scribbles.every((s, i) => s === b.scribbles[i]);
+}
+function sameCamera(a, b) {
+  if (a === null || b === null) return a === b;
+  return a.x === b.x && a.y === b.y && a.z === b.z;
+}
+function sameCursor(a, b) {
+  if (a === null || b === null) return a === b;
+  return a.x === b.x && a.y === b.y && a.type === b.type && a.rotation === b.rotation;
 }
 function sameIds(a, b) {
   return a.length === b.length && a.every((id, i) => id === b[i]);
@@ -166,9 +662,9 @@ var PresenceRoom = class {
 };
 
 // src/protocol.ts
-var PROTOCOL_VERSION = 1;
+var PROTOCOL_VERSION = 3;
 function encodeMessage(message) {
-  return JSON.stringify(message);
+  return JSON.stringify({ ...message, version: PROTOCOL_VERSION });
 }
 function decodeMessage(data) {
   let value = data;
@@ -181,6 +677,11 @@ function decodeMessage(data) {
   }
   if (typeof value !== "object" || value === null) return null;
   const message = value;
+  const version = message["version"];
+  if (typeof version === "number" && version !== PROTOCOL_VERSION) {
+    const clientId = message["clientId"];
+    return typeof clientId === "string" ? { type: "unsupported", version, clientId } : { type: "unsupported", version };
+  }
   switch (message["type"]) {
     case "hello":
       if (typeof message["clientId"] !== "string") return null;
@@ -190,12 +691,14 @@ function decodeMessage(data) {
       const records = message["records"];
       if (!Array.isArray(records)) return null;
       if (!records.every(isRecordLike)) return null;
-      return { type: "snapshot", records };
+      const state = message["state"];
+      if (!isCrdtStateLike(state)) return null;
+      return { type: "snapshot", records, state };
     }
     case "diff": {
       if (typeof message["clientId"] !== "string") return null;
       if (typeof message["seq"] !== "number") return null;
-      if (!isDiffLike(message["diff"])) return null;
+      if (!isStampedDiffLike(message["diff"])) return null;
       return {
         type: "diff",
         clientId: message["clientId"],
@@ -218,15 +721,6 @@ function decodeMessage(data) {
 function isRecordLike(value) {
   return typeof value === "object" && value !== null && typeof value.id === "string" && typeof value.typeName === "string";
 }
-function isDiffLike(value) {
-  if (typeof value !== "object" || value === null) return false;
-  const diff = value;
-  for (const key of ["added", "updated", "removed"]) {
-    const part = diff[key];
-    if (typeof part !== "object" || part === null || Array.isArray(part)) return false;
-  }
-  return true;
-}
 
 // src/SyncClient.ts
 function createSyncClient(options) {
@@ -234,7 +728,14 @@ function createSyncClient(options) {
   const clientId = options.clientId ?? uniqueId(12);
   const status = atom(`sync.status:${roomId}`, "offline");
   const room = new PresenceRoom(store, options.presenceTimeoutMs ?? DEFAULT_PRESENCE_TIMEOUT_MS);
+  const crdt = createCrdt({
+    clientId,
+    getRecord: (id) => store.unsafeGetWithoutCapture(id),
+    ...options.tombstoneLimit !== void 0 ? { tombstoneLimit: options.tombstoneLimit } : {},
+    ...options.tombstoneMaxAgeMs !== void 0 ? { tombstoneMaxAgeMs: options.tombstoneMaxAgeMs } : {}
+  });
   const unsubscribes = [];
+  const reportedVersions = /* @__PURE__ */ new Set();
   let presence = null;
   let seq = 0;
   let awaitingSnapshot = false;
@@ -247,9 +748,78 @@ function createSyncClient(options) {
       options.onError?.(error instanceof Error ? error : new Error(String(error)));
     }
   };
+  const broadcast = (stamped) => {
+    if (isStampedDiffEmpty(stamped)) return;
+    send({ type: "diff", clientId, seq: seq++, diff: stamped });
+  };
+  const flushCrdt = () => {
+    const outgoing = crdt.takeOutgoing();
+    if (outgoing) broadcast(outgoing);
+  };
+  const sendSnapshot = () => {
+    send({
+      type: "snapshot",
+      records: Object.values(store.serialize("document")),
+      state: crdt.getState()
+    });
+  };
+  const applyRemote = (diff) => {
+    if (isRecordsDiffEmpty(diff)) return;
+    const actual = store.extractingChanges(() => {
+      store.mergeRemoteChanges(() => {
+        store.applyDiff(diff);
+      });
+    });
+    reportRewrites(diff, actual);
+  };
+  const reportRewrites = (asked, actual) => {
+    const rewrite = createEmptyRecordsDiff();
+    const intended = (id) => asked.added[id] ?? asked.updated[id]?.[1];
+    const isDocument = (record) => store.getScope(record.typeName) === "document";
+    for (const key in actual.added) {
+      const id = key;
+      const after = actual.added[id];
+      if (!after || !isDocument(after)) continue;
+      const want = intended(id);
+      if (!want) rewrite.added[id] = after;
+      else if (!deepEqual(want, after)) rewrite.updated[id] = [want, after];
+    }
+    for (const key in actual.updated) {
+      const id = key;
+      const pair = actual.updated[id];
+      if (!pair || !isDocument(pair[1])) continue;
+      const want = intended(id);
+      if (!want) rewrite.updated[id] = pair;
+      else if (!deepEqual(want, pair[1])) rewrite.updated[id] = [want, pair[1]];
+    }
+    for (const key in actual.removed) {
+      const id = key;
+      const before = actual.removed[id];
+      if (!before || !isDocument(before)) continue;
+      if (!asked.removed[id]) rewrite.removed[id] = before;
+    }
+    if (isRecordsDiffEmpty(rewrite)) return;
+    broadcast(crdt.stampLocal(rewrite));
+  };
+  const stopListening = store.listen(
+    (entry) => {
+      if (isRecordsDiffEmpty(entry.changes)) return;
+      const stamped = crdt.stampLocal(entry.changes);
+      if (connected) broadcast(stamped);
+    },
+    { source: "user", scope: "document" }
+  );
   const handle = (message) => {
     if (disposed) return;
     switch (message.type) {
+      case "unsupported": {
+        if (reportedVersions.has(message.version)) return;
+        reportedVersions.add(message.version);
+        options.onError?.(
+          new Error(`A peer speaks protocol ${message.version}, we speak ${PROTOCOL_VERSION}`)
+        );
+        return;
+      }
       case "hello": {
         if (message.clientId === clientId) return;
         if (message.version !== PROTOCOL_VERSION) {
@@ -259,24 +829,36 @@ function createSyncClient(options) {
           return;
         }
         awaitingSnapshot = false;
-        send({ type: "snapshot", records: Object.values(store.serialize("document")) });
+        sendSnapshot();
         presence?.poke();
         return;
       }
       case "snapshot": {
-        if (!awaitingSnapshot) return;
+        if (awaitingSnapshot && crdt.size() === 0) {
+          awaitingSnapshot = false;
+          const removals = crdt.applyState(message.state);
+          const actual = store.extractingChanges(() => {
+            store.mergeRemoteChanges(() => {
+              store.put(message.records);
+              store.applyDiff(removals);
+            });
+          });
+          const asked = createEmptyRecordsDiff();
+          for (const record of message.records) asked.added[record.id] = record;
+          reportRewrites(asked, actual);
+          flushCrdt();
+          return;
+        }
         awaitingSnapshot = false;
-        store.mergeRemoteChanges(() => {
-          store.put(message.records);
-        });
+        applyRemote(crdt.mergeRemote(stampedDiffFromSnapshot(message.records, message.state)));
+        flushCrdt();
         return;
       }
       case "diff": {
         if (message.clientId === clientId) return;
-        if (isRecordsDiffEmpty(message.diff)) return;
-        store.mergeRemoteChanges(() => {
-          store.applyDiff(message.diff);
-        });
+        if (isStampedDiffEmpty(message.diff)) return;
+        applyRemote(crdt.mergeRemote(message.diff));
+        flushCrdt();
         return;
       }
       case "presence": {
@@ -295,6 +877,7 @@ function createSyncClient(options) {
     if (disposed || !connected) return;
     status.set("online");
     send({ type: "hello", clientId, version: PROTOCOL_VERSION });
+    if (!awaitingSnapshot) sendSnapshot();
     presence?.poke();
   };
   const onClose = () => {
@@ -307,20 +890,11 @@ function createSyncClient(options) {
     connect() {
       if (disposed || connected) return;
       connected = true;
-      awaitingSnapshot = true;
+      awaitingSnapshot = crdt.size() === 0;
       status.set("connecting");
       unsubscribes.push(transport.onMessage(handle));
       if (transport.onOpen) unsubscribes.push(transport.onOpen(onOpen));
       if (transport.onClose) unsubscribes.push(transport.onClose(onClose));
-      unsubscribes.push(
-        store.listen(
-          (entry) => {
-            if (isRecordsDiffEmpty(entry.changes)) return;
-            send({ type: "diff", clientId, seq: seq++, diff: entry.changes });
-          },
-          { source: "user", scope: "document" }
-        )
-      );
       if (options.presence) {
         presence = createPresenceSync({
           editor: options.presence.editor,
@@ -343,7 +917,6 @@ function createSyncClient(options) {
       room.stopSweeping();
       room.clear();
       for (const off of unsubscribes.splice(0)) off();
-      awaitingSnapshot = false;
       status.set("offline");
     },
     getStatus() {
@@ -353,6 +926,7 @@ function createSyncClient(options) {
       if (disposed) return;
       this.disconnect();
       disposed = true;
+      stopListening();
       transport.close();
     }
   };
@@ -576,7 +1150,8 @@ var CollaboratorCursor = track(function CollaboratorCursor2({
   presence,
   showName
 }) {
-  const point = editor.pageToScreen(presence.cursor);
+  if (presence.cursor === null) return null;
+  const point = editor.pageToViewport(presence.cursor);
   const name = presence.userName || "Anonymous";
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${point.x}, ${point.y}) rotate(${presence.cursor.rotation})`, children: [
     /* @__PURE__ */ jsx(
@@ -613,8 +1188,8 @@ var CollaboratorSelection = track(function CollaboratorSelection2({
       [bounds.x, bounds.maxY]
     ];
     const points = corners.map(([x, y]) => {
-      const screen = editor.pageToScreen({ x: m.a * x + m.c * y + m.e, y: m.b * x + m.d * y + m.f });
-      return `${screen.x},${screen.y}`;
+      const p = editor.pageToViewport({ x: m.a * x + m.c * y + m.e, y: m.b * x + m.d * y + m.f });
+      return `${p.x},${p.y}`;
     });
     outlines.push(points.join(" "));
   }
@@ -655,6 +1230,6 @@ function useSync(editor, options) {
   return { status, client };
 }
 
-export { CollaboratorCursors, DEFAULT_PRESENCE_HEARTBEAT_MS, DEFAULT_PRESENCE_THROTTLE_MS, DEFAULT_PRESENCE_TIMEOUT_MS, PROTOCOL_VERSION, PresenceRoom, createBroadcastChannelTransport, createMemoryHub, createMemoryTransportPair, createPresenceSync, createSyncClient, createWebSocketTransport, decodeMessage, encodeMessage, isSamePresence, presenceIdForClient, useSync };
+export { CRDT_STATE_VERSION, CollaboratorCursors, DEFAULT_PRESENCE_HEARTBEAT_MS, DEFAULT_PRESENCE_THROTTLE_MS, DEFAULT_PRESENCE_TIMEOUT_MS, DEFAULT_TOMBSTONE_LIMIT, DEFAULT_TOMBSTONE_MAX_AGE_MS, PROTOCOL_VERSION, PresenceRoom, compareStamps, createBroadcastChannelTransport, createCrdt, createEmptyCrdtState, createEmptyStampedDiff, createLamportClock, createMemoryHub, createMemoryTransportPair, createPresenceSync, createSyncClient, createWebSocketTransport, decodeMessage, encodeMessage, isSamePresence, isStampedDiffEmpty, presenceIdForClient, stampedDiffFromSnapshot, useSync };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map