@unhingged/vizu-core 0.1.1 → 0.1.2

package/dist/index.cjs

@@ -770,6 +770,11 @@ __export(live_collab_exports, {
   LiveCollab: () => LiveCollab,
   roomIdFor: () => roomIdFor
 });
+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}`;
+}
 function fnv1a32Hex(input) {
   let h = 2166136261;
   for (let i = 0; i < input.length; i++) {
@@ -839,29 +844,27 @@ function labelForStatus(status) {
       return "";
   }
 }
-var import_client, MOUSEMOVE_THROTTLE_MS, SCROLL_THROTTLE_MS, INACTIVITY_FADE_MS, CURSOR_TRANSITION_MS, Z_INDEX3, FOLLOW_SCROLL_THRESHOLD_PX, LiveCollab, ConnectionIndicator, FollowPill;
+var PUSH_INTERVAL_MS, PULL_INTERVAL_MS, INACTIVITY_FADE_MS, CURSOR_TRANSITION_MS, Z_INDEX3, FOLLOW_SCROLL_THRESHOLD_PX, RECONNECT_AFTER_ERRORS, DISCONNECT_AFTER_ERRORS, LiveCollab, ConnectionIndicator, FollowPill;
 var init_live_collab = __esm({
   "src/live-collab.ts"() {
     "use strict";
-    import_client = require("@liveblocks/client");
     init_presence_stack();
     init_selection_overlay();
     init_cursor_colors();
-    MOUSEMOVE_THROTTLE_MS = 50;
-    SCROLL_THROTTLE_MS = 100;
+    PUSH_INTERVAL_MS = 100;
+    PULL_INTERVAL_MS = 200;
     INACTIVITY_FADE_MS = 5e3;
-    CURSOR_TRANSITION_MS = 110;
+    CURSOR_TRANSITION_MS = 220;
     Z_INDEX3 = 2147483641;
     FOLLOW_SCROLL_THRESHOLD_PX = 8;
+    RECONNECT_AFTER_ERRORS = 2;
+    DISCONNECT_AFTER_ERRORS = 5;
     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;
@@ -870,50 +873,36 @@ var init_live_collab = __esm({
         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 = (0, import_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)
@@ -926,12 +915,16 @@ var init_live_collab = __esm({
           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);
@@ -945,6 +938,7 @@ var init_live_collab = __esm({
       }
       /* ────────────────── private ────────────────── */
       cleanup() {
+        void this.clearRemotePresence();
         if (this.mouseListener) {
           window.removeEventListener("mousemove", this.mouseListener);
           this.mouseListener = null;
@@ -961,16 +955,14 @@ var init_live_collab = __esm({
           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();
@@ -988,10 +980,8 @@ var init_live_collab = __esm({
         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
@@ -1000,10 +990,8 @@ var init_live_collab = __esm({
        * Idempotent on no-op transitions. Slice 5 of live-collab.md.
        */
       setLocalSelection(fingerprint2) {
-        if (!this.room) return;
-        this.room.updatePresence({
-          selecting: fingerprint2 ? { fingerprintJson: JSON.stringify(fingerprint2) } : null
-        });
+        this.currentPresence.selecting = fingerprint2 ? { fingerprintJson: JSON.stringify(fingerprint2) } : null;
+        this.presenceDirty = true;
       }
       /**
        * Public API: start/stop following a user by Clerk id. Null clears.
@@ -1019,30 +1007,24 @@ var init_live_collab = __esm({
         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;
           }
@@ -1068,39 +1050,27 @@ var init_live_collab = __esm({
       }
       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);
@@ -1113,90 +1083,187 @@ var init_live_collab = __esm({
         };
         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;
@@ -1747,6 +1814,18 @@ var CloudStorageAdapter = class {
   async preflightAuth() {
     await this.resolveToken();
   }
+  /**
+   * Synchronous accessor for the currently cached bearer token, used
+   * by sibling modules that need to authenticate against the same
+   * backend (live-collab cross-origin polling). Returns null when no
+   * valid token is cached — callers fall back to credentials:'include'
+   * for same-origin or just disable themselves.
+   */
+  getCachedAuthToken() {
+    if (!this.cachedToken) return null;
+    if (this.isExpired(this.cachedToken)) return null;
+    return this.cachedToken.token;
+  }
   /* ─── StorageAdapter v2 ───────────────────────────────────────────── */
   async load(_namespace) {
     const out = [];
@@ -1919,7 +1998,7 @@ var CloudStorageAdapter = class {
     }
   }
   sessionKey() {
-    return `vizu:cloud-token:${this.workspace}`;
+    return `vizu:cloud-token:v2:${this.workspace}`;
   }
   /**
    * Resolve a valid token, opening the popup if needed.
@@ -4233,14 +4312,27 @@ var Vizu = class {
     if (options.actions) this.actions = [...options.actions];
     if (options.onCommentAdded) this.bus.on("comment:added", (p) => options.onCommentAdded(p.comment));
     if (options.onCommentRemoved) this.bus.on("comment:removed", (p) => options.onCommentRemoved(p.id));
-    if (options.liveblocks && options.cloud) {
-      const live = options.liveblocks;
+    if (options.cloud) {
       const cloud = options.cloud;
+      const apiUrl = (cloud.apiUrl ?? "https://vizu.unhingged.com").replace(/\/$/, "");
       void Promise.resolve().then(() => (init_live_collab(), live_collab_exports)).then(({ LiveCollab: LiveCollab2 }) => {
         this.liveCollab = new LiveCollab2({
-          publicKey: live.publicKey,
-          authEndpoint: live.authEndpoint,
-          workspaceSlug: cloud.workspace
+          workspaceSlug: cloud.workspace,
+          apiUrl,
+          getAuthHeader: async () => {
+            if (typeof window === "undefined") return null;
+            try {
+              if (new URL(apiUrl).origin === window.location.origin) return null;
+            } catch {
+              return null;
+            }
+            const adapter = this.storage;
+            if (adapter instanceof CloudStorageAdapter) {
+              const token = adapter.getCachedAuthToken();
+              if (token) return { Authorization: `Bearer ${token}` };
+            }
+            return null;
+          }
         });
         void this.liveCollab.start();
       });