@unhingged/vizu-core 0.1.1 → 0.1.2

package/dist/{live-collab-IRUNFAPE.js → live-collab-BVLNJ5QI.js}

@@ -2,9 +2,6 @@ import {
   findByFingerprint
 } from "./chunk-OMIFOSQ2.js";
 
-// src/live-collab.ts
-import { createClient } from "@liveblocks/client";
-
 // src/cursor-colors.ts
 var CURSOR_COLORS = [
   "#4F46E5",
@@ -436,12 +433,19 @@ function createOverlay(color, name) {
 }
 
 // src/live-collab.ts
-var MOUSEMOVE_THROTTLE_MS = 50;
-var SCROLL_THROTTLE_MS = 100;
+function generateConnId() {
+  const a = Math.floor(Math.random() * 4294967295).toString(16).padStart(8, "0");
+  const b = Math.floor(Math.random() * 4294967295).toString(16).padStart(8, "0");
+  return `${a}${b}`;
+}
+var PUSH_INTERVAL_MS = 100;
+var PULL_INTERVAL_MS = 200;
 var INACTIVITY_FADE_MS = 5e3;
-var CURSOR_TRANSITION_MS = 110;
+var CURSOR_TRANSITION_MS = 220;
 var Z_INDEX3 = 2147483641;
 var FOLLOW_SCROLL_THRESHOLD_PX = 8;
+var RECONNECT_AFTER_ERRORS = 2;
+var DISCONNECT_AFTER_ERRORS = 5;
 function fnv1a32Hex(input) {
   let h = 2166136261;
   for (let i = 0; i < input.length; i++) {
@@ -456,12 +460,9 @@ function roomIdFor(workspaceSlug, pageUrl) {
 var LiveCollab = class {
   constructor(opts) {
     this.opts = opts;
-    this.client = null;
-    this.room = null;
-    this.leave = null;
     this.container = null;
     this.cursors = /* @__PURE__ */ new Map();
-    // keyed by connectionId
+    // keyed by connId now (was numeric connectionId)
     this.presenceStack = null;
     this.followPill = null;
     this.selectionOverlay = null;
@@ -470,50 +471,36 @@ var LiveCollab = class {
     this.visibilityListener = null;
     this.keydownListener = null;
     this.statusIndicator = null;
-    this.throttleTimer = null;
-    this.scrollThrottleTimer = null;
-    this.pendingCursor = null;
-    this.lastBroadcast = 0;
-    this.lastScrollBroadcast = 0;
-    this.unsubscribers = [];
+    this.pushTimer = null;
+    this.pullTimer = null;
     this.destroyed = false;
+    /** Full room id, built once in start() from workspace + pageUrl. */
+    this.roomId = null;
+    /** Latest snapshot of other connections from /api/live/[room]/others. */
+    this.latestOthers = [];
+    /** Local presence — mouse + scroll + selection update this in place; pushTimer ships it. */
+    this.currentPresence = { cursor: null, scrollY: 0, selecting: null };
+    /** True when something changed since the last push — skip the POST otherwise. */
+    this.presenceDirty = false;
+    /** Connection-health tracker for the indicator. */
+    this.status = "initial";
+    this.consecutiveErrors = 0;
     // Follow mode state
     /** Clerk user id we're currently following, or null. */
     this.followingUserId = null;
     /** Last scrollY we received from the followee — for delta gating. */
     this.lastFolloweeScrollY = null;
+    this.connId = generateConnId();
+    if (typeof window !== "undefined") {
+      this.currentPresence.scrollY = window.scrollY;
+    }
   }
   async start() {
     if (typeof window === "undefined" || typeof document === "undefined") return;
     if (this.destroyed) return;
     try {
-      void this.opts.publicKey;
-      this.client = createClient({
-        authEndpoint: async (room2) => {
-          const res = await fetch(this.opts.authEndpoint, {
-            method: "POST",
-            headers: { "content-type": "application/json" },
-            credentials: "include",
-            body: JSON.stringify({ room: room2 })
-          });
-          if (!res.ok) {
-            throw new Error(`vizu-liveblocks-auth: HTTP ${res.status}`);
-          }
-          return res.json();
-        }
-      });
       const pageUrl = this.opts.pageUrl ?? window.location.origin + window.location.pathname;
-      const room = this.opts.workspaceSlug ? roomIdFor(this.opts.workspaceSlug, pageUrl) : null;
-      if (!room) return;
-      const result = this.client.enterRoom(room, {
-        initialPresence: {
-          cursor: null,
-          scrollY: typeof window !== "undefined" ? window.scrollY : 0,
-          selecting: null
-        }
-      });
-      this.room = result.room;
-      this.leave = result.leave;
+      this.roomId = roomIdFor(this.opts.workspaceSlug, pageUrl);
       this.mountContainer();
       this.presenceStack = new PresenceStack({
         onAvatarClick: (userId) => this.setFollowing(userId)
@@ -526,12 +513,16 @@ var LiveCollab = class {
       this.selectionOverlay.mount();
       this.statusIndicator = new ConnectionIndicator();
       this.statusIndicator.mount();
-      this.subscribeOthers();
-      this.subscribeStatus();
+      this.setStatus("connecting");
       this.attachMouseListener();
       this.attachScrollListener();
       this.attachVisibilityListener();
       this.attachKeyboardListener();
+      this.pushTimer = window.setInterval(() => void this.push(), PUSH_INTERVAL_MS);
+      this.pullTimer = window.setInterval(() => void this.pull(), PULL_INTERVAL_MS);
+      this.presenceDirty = true;
+      void this.push();
+      void this.pull();
     } catch (err) {
       if (typeof console !== "undefined") {
         console.warn("[vizu/live-collab] start failed; live cursors disabled:", err);
@@ -545,6 +536,7 @@ var LiveCollab = class {
   }
   /* ────────────────── private ────────────────── */
   cleanup() {
+    void this.clearRemotePresence();
     if (this.mouseListener) {
       window.removeEventListener("mousemove", this.mouseListener);
       this.mouseListener = null;
@@ -561,16 +553,14 @@ var LiveCollab = class {
       document.removeEventListener("keydown", this.keydownListener);
       this.keydownListener = null;
     }
-    if (this.throttleTimer != null) {
-      window.clearTimeout(this.throttleTimer);
-      this.throttleTimer = null;
+    if (this.pushTimer != null) {
+      window.clearInterval(this.pushTimer);
+      this.pushTimer = null;
     }
-    if (this.scrollThrottleTimer != null) {
-      window.clearTimeout(this.scrollThrottleTimer);
-      this.scrollThrottleTimer = null;
+    if (this.pullTimer != null) {
+      window.clearInterval(this.pullTimer);
+      this.pullTimer = null;
     }
-    for (const unsub of this.unsubscribers) unsub();
-    this.unsubscribers = [];
     for (const c of this.cursors.values()) {
       if (c.fadeTimer != null) window.clearTimeout(c.fadeTimer);
       c.el.remove();
@@ -588,10 +578,8 @@ var LiveCollab = class {
     this.lastFolloweeScrollY = null;
     this.container?.remove();
     this.container = null;
-    this.leave?.();
-    this.leave = null;
-    this.room = null;
-    this.client = null;
+    this.roomId = null;
+    this.latestOthers = [];
   }
   /**
    * Public API: broadcast the local user's currently-hovered element
@@ -600,10 +588,8 @@ var LiveCollab = class {
    * Idempotent on no-op transitions. Slice 5 of live-collab.md.
    */
   setLocalSelection(fingerprint) {
-    if (!this.room) return;
-    this.room.updatePresence({
-      selecting: fingerprint ? { fingerprintJson: JSON.stringify(fingerprint) } : null
-    });
+    this.currentPresence.selecting = fingerprint ? { fingerprintJson: JSON.stringify(fingerprint) } : null;
+    this.presenceDirty = true;
   }
   /**
    * Public API: start/stop following a user by Clerk id. Null clears.
@@ -619,30 +605,24 @@ var LiveCollab = class {
     if (userId) this.scrollToFolloweeIfKnown();
   }
   lookupUserForPill(userId) {
-    if (!this.room) return null;
-    const others = this.room.getOthers();
-    for (const o of others) {
-      const meta = o;
-      if ((meta.id ?? `c${o.connectionId}`) === userId) {
+    for (const o of this.latestOthers) {
+      if (o.user.userId === userId) {
         return {
           id: userId,
-          name: meta.info?.name ?? "Anonymous",
+          name: o.user.name ?? "Anonymous",
           color: colorForUser(userId),
-          avatar: meta.info?.avatar
+          avatar: o.user.avatar
         };
       }
     }
     return null;
   }
   scrollToFolloweeIfKnown() {
-    if (!this.followingUserId || !this.room) return;
-    const others = this.room.getOthers();
-    for (const o of others) {
-      const meta = o;
-      if ((meta.id ?? `c${o.connectionId}`) === this.followingUserId) {
-        const presence = o.presence;
-        if (typeof presence.scrollY === "number") {
-          this.followScrollTo(presence.scrollY);
+    if (!this.followingUserId) return;
+    for (const o of this.latestOthers) {
+      if (o.user.userId === this.followingUserId) {
+        if (typeof o.presence.scrollY === "number") {
+          this.followScrollTo(o.presence.scrollY);
         }
         return;
       }
@@ -668,39 +648,27 @@ var LiveCollab = class {
   }
   attachMouseListener() {
     this.mouseListener = (e) => {
-      const xPct = e.clientX / window.innerWidth * 100;
-      const yPct = e.clientY / window.innerHeight * 100;
-      this.pendingCursor = { xPct, yPct };
-      this.flushThrottled();
+      this.currentPresence.cursor = {
+        xPct: e.clientX / window.innerWidth * 100,
+        yPct: e.clientY / window.innerHeight * 100
+      };
+      this.presenceDirty = true;
     };
     window.addEventListener("mousemove", this.mouseListener, { passive: true });
   }
   attachScrollListener() {
     this.scrollListener = () => {
-      const now = performance.now();
-      const elapsed = now - this.lastScrollBroadcast;
-      if (elapsed >= SCROLL_THROTTLE_MS) {
-        this.flushScroll();
-        return;
-      }
-      if (this.scrollThrottleTimer == null) {
-        this.scrollThrottleTimer = window.setTimeout(() => {
-          this.scrollThrottleTimer = null;
-          this.flushScroll();
-        }, SCROLL_THROTTLE_MS - elapsed);
-      }
+      this.currentPresence.scrollY = window.scrollY;
+      this.presenceDirty = true;
     };
     window.addEventListener("scroll", this.scrollListener, { passive: true });
   }
-  flushScroll() {
-    if (!this.room) return;
-    this.room.updatePresence({ scrollY: window.scrollY });
-    this.lastScrollBroadcast = performance.now();
-  }
   attachVisibilityListener() {
     this.visibilityListener = () => {
-      if (document.hidden && this.room) {
-        this.room.updatePresence({ cursor: null });
+      if (document.hidden) {
+        void this.clearRemotePresence();
+      } else {
+        this.presenceDirty = true;
       }
     };
     document.addEventListener("visibilitychange", this.visibilityListener);
@@ -713,90 +681,187 @@ var LiveCollab = class {
     };
     document.addEventListener("keydown", this.keydownListener);
   }
-  subscribeStatus() {
-    if (!this.room) return;
-    this.statusIndicator?.setStatus(this.room.getStatus());
-    const unsub = this.room.subscribe("status", (status) => {
-      this.statusIndicator?.setStatus(status);
-    });
-    this.unsubscribers.push(unsub);
+  setStatus(next) {
+    if (this.status === next) return;
+    this.status = next;
+    this.statusIndicator?.setStatus(next);
   }
-  flushThrottled() {
-    const now = performance.now();
-    const elapsed = now - this.lastBroadcast;
-    if (elapsed >= MOUSEMOVE_THROTTLE_MS) {
-      this.flush();
-      return;
-    }
-    if (this.throttleTimer == null) {
-      this.throttleTimer = window.setTimeout(() => {
-        this.throttleTimer = null;
-        this.flush();
-      }, MOUSEMOVE_THROTTLE_MS - elapsed);
+  /**
+   * Push tick — POST current presence to /api/live/[room]/me. Skips
+   * the request when nothing changed since last push, so an idle tab
+   * generates near-zero traffic.
+   */
+  async push() {
+    if (this.destroyed || !this.roomId) return;
+    if (!this.presenceDirty) return;
+    if (typeof document !== "undefined" && document.hidden) return;
+    this.presenceDirty = false;
+    try {
+      const res = await this.fetchLive(`/api/live/${encodeURIComponent(this.roomId)}/me`, {
+        method: "POST",
+        body: JSON.stringify({
+          connId: this.connId,
+          presence: this.currentPresence
+        })
+      });
+      if (!res.ok) {
+        if (res.status === 402 || res.status === 401 || res.status === 503) {
+          this.setStatus("disconnected");
+          if (this.pushTimer != null) {
+            window.clearInterval(this.pushTimer);
+            this.pushTimer = null;
+          }
+          if (this.pullTimer != null) {
+            window.clearInterval(this.pullTimer);
+            this.pullTimer = null;
+          }
+          return;
+        }
+        throw new Error(`push HTTP ${res.status}`);
+      }
+      this.noteSuccess();
+    } catch (err) {
+      this.noteError(err);
+      this.presenceDirty = true;
     }
   }
-  flush() {
-    if (!this.pendingCursor || !this.room) return;
-    this.room.updatePresence({ cursor: this.pendingCursor });
-    this.pendingCursor = null;
-    this.lastBroadcast = performance.now();
-  }
-  subscribeOthers() {
-    if (!this.room) return;
-    const unsub = this.room.subscribe("others", (others) => {
-      const seen = /* @__PURE__ */ new Set();
-      const stackUsers = /* @__PURE__ */ new Map();
-      const selections = [];
-      let followeeScrollY = null;
-      let followeeStillPresent = false;
-      for (const other of others) {
-        seen.add(other.connectionId);
-        const meta = other;
-        const userId = meta.id ?? `c${other.connectionId}`;
-        const name = meta.info?.name ?? "Anonymous";
-        const color = colorForUser(userId);
-        if (!stackUsers.has(userId)) {
-          stackUsers.set(userId, {
-            id: userId,
-            name,
-            color,
-            avatar: meta.info?.avatar
-          });
-        }
-        const presence = other.presence;
-        if (this.followingUserId === userId && followeeScrollY === null) {
-          followeeStillPresent = true;
-          if (typeof presence.scrollY === "number") {
-            followeeScrollY = presence.scrollY;
+  /**
+   * Pull tick — GET /api/live/[room]/others and drive cursor + stack +
+   * selection + follow updates. Same handler shape as the Liveblocks-era
+   * subscribeOthers callback; only the data source changed.
+   */
+  async pull() {
+    if (this.destroyed || !this.roomId) return;
+    try {
+      const res = await this.fetchLive(
+        `/api/live/${encodeURIComponent(this.roomId)}/others?me=${encodeURIComponent(this.connId)}`,
+        { method: "GET" }
+      );
+      if (!res.ok) {
+        if (res.status === 503 || res.status === 401) {
+          this.setStatus("disconnected");
+          if (this.pullTimer != null) {
+            window.clearInterval(this.pullTimer);
+            this.pullTimer = null;
           }
+          return;
         }
-        if (presence.selecting && !selections.find((s) => s.id === userId)) {
-          try {
-            const fp = JSON.parse(presence.selecting.fingerprintJson);
-            selections.push({ id: userId, name, color, fingerprint: fp });
-          } catch {
-          }
+        throw new Error(`pull HTTP ${res.status}`);
+      }
+      const body = await res.json();
+      const others = (body.others ?? []).map((o) => ({
+        connId: o.connId,
+        presence: o.payload.presence,
+        user: o.payload.user
+      }));
+      this.latestOthers = others;
+      this.renderOthers(others);
+      this.noteSuccess();
+    } catch (err) {
+      this.noteError(err);
+    }
+  }
+  noteSuccess() {
+    this.consecutiveErrors = 0;
+    if (this.status !== "connected") this.setStatus("connected");
+  }
+  noteError(err) {
+    this.consecutiveErrors++;
+    if (this.consecutiveErrors >= DISCONNECT_AFTER_ERRORS) {
+      this.setStatus("disconnected");
+    } else if (this.consecutiveErrors >= RECONNECT_AFTER_ERRORS) {
+      this.setStatus("reconnecting");
+    }
+    if (typeof console !== "undefined" && this.consecutiveErrors === 1) {
+      console.warn("[vizu/live-collab] transport error", err);
+    }
+  }
+  /**
+   * Drive the cursor / stack / selection / follow layers from a fresh
+   * `others` snapshot. Mirrors the body of the Liveblocks-era
+   * subscribeOthers callback so DOM behavior is unchanged.
+   */
+  renderOthers(others) {
+    const seen = /* @__PURE__ */ new Set();
+    const stackUsers = /* @__PURE__ */ new Map();
+    const selections = [];
+    let followeeScrollY = null;
+    let followeeStillPresent = false;
+    for (const other of others) {
+      seen.add(other.connId);
+      const userId = other.user.userId;
+      const name = other.user.name ?? "Anonymous";
+      const color = colorForUser(userId);
+      if (!stackUsers.has(userId)) {
+        stackUsers.set(userId, { id: userId, name, color, avatar: other.user.avatar });
+      }
+      if (this.followingUserId === userId && followeeScrollY === null) {
+        followeeStillPresent = true;
+        if (typeof other.presence.scrollY === "number") {
+          followeeScrollY = other.presence.scrollY;
         }
-        if (!presence.cursor) {
-          this.removeCursor(other.connectionId);
-          continue;
+      }
+      if (other.presence.selecting && !selections.find((s) => s.id === userId)) {
+        try {
+          const fp = JSON.parse(other.presence.selecting.fingerprintJson);
+          selections.push({ id: userId, name, color, fingerprint: fp });
+        } catch {
         }
-        this.upsertCursor(other.connectionId, userId, name, presence.cursor);
       }
-      for (const id of Array.from(this.cursors.keys())) {
-        if (!seen.has(id)) this.removeCursor(id);
+      if (!other.presence.cursor) {
+        this.removeCursor(other.connId);
+        continue;
       }
-      this.presenceStack?.setOthers(Array.from(stackUsers.values()));
-      this.selectionOverlay?.setSelections(selections);
-      if (this.followingUserId) {
-        if (!followeeStillPresent) {
-          this.setFollowing(null);
-        } else if (followeeScrollY !== null) {
-          this.followScrollTo(followeeScrollY);
-        }
+      this.upsertCursor(other.connId, userId, name, other.presence.cursor);
+    }
+    for (const id of Array.from(this.cursors.keys())) {
+      if (!seen.has(id)) this.removeCursor(id);
+    }
+    this.presenceStack?.setOthers(Array.from(stackUsers.values()));
+    this.selectionOverlay?.setSelections(selections);
+    if (this.followingUserId) {
+      if (!followeeStillPresent) {
+        this.setFollowing(null);
+      } else if (followeeScrollY !== null) {
+        this.followScrollTo(followeeScrollY);
+      }
+    }
+  }
+  /**
+   * Async wrapper around fetch that injects the optional auth header
+   * resolved from opts.getAuthHeader. Same-origin requests rely on
+   * cookies via `credentials: 'include'`; cross-origin gets the
+   * bearer token returned by the host.
+   */
+  async fetchLive(path, init) {
+    const headers = new Headers(init.headers);
+    headers.set("content-type", "application/json");
+    if (this.opts.getAuthHeader) {
+      const extra = await this.opts.getAuthHeader();
+      if (extra) {
+        new Headers(extra).forEach((v, k) => headers.set(k, v));
       }
+    }
+    return fetch(this.opts.apiUrl + path, {
+      ...init,
+      headers,
+      credentials: "include"
     });
-    this.unsubscribers.push(unsub);
+  }
+  /**
+   * Fire-and-forget clearOnly POST so other clients see us drop within
+   * one pull cycle (~200ms) instead of waiting for the 5s presence TTL.
+   * Errors swallowed — the TTL is the safety net.
+   */
+  async clearRemotePresence() {
+    if (!this.roomId) return;
+    try {
+      await this.fetchLive(`/api/live/${encodeURIComponent(this.roomId)}/me`, {
+        method: "POST",
+        body: JSON.stringify({ connId: this.connId, clearOnly: true })
+      });
+    } catch {
+    }
   }
   upsertCursor(connectionId, userId, name, cursor) {
     if (!this.container) return;
@@ -1030,4 +1095,4 @@ export {
   LiveCollab,
   roomIdFor
 };
-//# sourceMappingURL=live-collab-IRUNFAPE.js.map
+//# sourceMappingURL=live-collab-BVLNJ5QI.js.map