@unhingged/vizu-core 0.1.1 → 0.1.3

package/dist/live-collab-IRUNFAPE.js

@@ -1,1033 +0,0 @@
-import {
-  findByFingerprint
-} from "./chunk-OMIFOSQ2.js";
-
-// src/live-collab.ts
-import { createClient } from "@liveblocks/client";
-
-// src/cursor-colors.ts
-var CURSOR_COLORS = [
-  "#4F46E5",
-  // indigo
-  "#15803D",
-  // forest
-  "#C2410C",
-  // orange
-  "#BE185D",
-  // rose
-  "#0E7490",
-  // cyan
-  "#7E22CE",
-  // plum
-  "#DC2626",
-  // red
-  "#0F766E"
-  // teal
-];
-function colorForUser(userId) {
-  let h = 0;
-  for (let i = 0; i < userId.length; i++) {
-    h = h * 31 + userId.charCodeAt(i) | 0;
-  }
-  return CURSOR_COLORS[Math.abs(h) % CURSOR_COLORS.length];
-}
-function prefersReducedMotion() {
-  if (typeof window === "undefined" || !window.matchMedia) return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-
-// src/presence-stack.ts
-var Z_INDEX = 2147483640;
-var MAX_VISIBLE = 5;
-var AVATAR_SIZE = 28;
-var OVERLAP_PX = 6;
-var PresenceStack = class {
-  constructor(opts) {
-    this.container = null;
-    this.avatars = /* @__PURE__ */ new Map();
-    this.overflowEl = null;
-    this.followingUserId = null;
-    this.onAvatarClick = null;
-    this.onAvatarClick = opts?.onAvatarClick ?? null;
-  }
-  mount() {
-    if (typeof document === "undefined") return;
-    if (this.container) return;
-    this.container = document.createElement("div");
-    this.container.setAttribute("data-vizu-presence-stack", "");
-    this.container.style.cssText = `
-      position: fixed;
-      top: 16px;
-      right: 16px;
-      z-index: ${Z_INDEX};
-      display: flex;
-      align-items: center;
-      pointer-events: auto;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    `;
-    document.body.appendChild(this.container);
-  }
-  destroy() {
-    for (const el of this.avatars.values()) el.remove();
-    this.avatars.clear();
-    this.overflowEl?.remove();
-    this.overflowEl = null;
-    this.container?.remove();
-    this.container = null;
-  }
-  setOthers(others) {
-    if (!this.container) return;
-    const visible = others.slice(0, MAX_VISIBLE);
-    const overflow = Math.max(0, others.length - visible.length);
-    const nextIds = new Set(visible.map((u) => u.id));
-    for (const [id, el] of Array.from(this.avatars)) {
-      if (!nextIds.has(id)) {
-        el.remove();
-        this.avatars.delete(id);
-      }
-    }
-    for (const user of visible) {
-      let el = this.avatars.get(user.id);
-      if (!el) {
-        el = createAvatar(user, () => this.onAvatarClick?.(user.id));
-        this.avatars.set(user.id, el);
-      } else {
-        updateAvatar(el, user);
-      }
-      paintAvatarFollowState(el, user, this.followingUserId === user.id);
-      this.container.appendChild(el);
-    }
-    this.renderOverflow(overflow);
-  }
-  /**
-   * Mark a user as the active followee so its avatar can render the
-   * coral ring highlight. Pass null to clear.
-   */
-  setFollowing(userId) {
-    this.followingUserId = userId;
-    for (const [id, el] of this.avatars) {
-      const user = avatarMeta(el);
-      if (user) paintAvatarFollowState(el, user, id === userId);
-    }
-  }
-  /* ────────────────── private ────────────────── */
-  renderOverflow(count) {
-    if (!this.container) return;
-    if (count <= 0) {
-      this.overflowEl?.remove();
-      this.overflowEl = null;
-      return;
-    }
-    if (!this.overflowEl) {
-      this.overflowEl = createOverflowChip();
-    }
-    this.overflowEl.textContent = `+${count}`;
-    this.container.appendChild(this.overflowEl);
-  }
-};
-function createAvatar(user, onClick) {
-  const wrap = document.createElement("div");
-  wrap.setAttribute("data-vizu-presence-avatar", user.id);
-  wrap.setAttribute("data-vizu-presence-name", user.name);
-  wrap.setAttribute("data-vizu-presence-color", user.color);
-  if (user.avatar) wrap.setAttribute("data-vizu-presence-img", user.avatar);
-  const reduced = prefersReducedMotion();
-  const hoverTransition = reduced ? "none" : "transform 130ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 130ms ease-out";
-  wrap.style.cssText = `
-    position: relative;
-    width: ${AVATAR_SIZE}px;
-    height: ${AVATAR_SIZE}px;
-    margin-left: -${OVERLAP_PX}px;
-    border-radius: 50%;
-    background: ${user.color};
-    padding: 1.5px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(0, 0, 0, 0.15);
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: ${hoverTransition};
-  `;
-  wrap.addEventListener("click", (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onClick();
-  });
-  if (!reduced) {
-    wrap.addEventListener(
-      "mouseenter",
-      () => wrap.style.transform = "translateY(-1px) scale(1.06)"
-    );
-    wrap.addEventListener("mouseleave", () => wrap.style.transform = "");
-  }
-  const inner = document.createElement("div");
-  inner.setAttribute("data-vizu-presence-inner", "");
-  inner.style.cssText = `
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    overflow: hidden;
-    background: ${user.color};
-    color: #ffffff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 10.5px;
-    font-weight: 600;
-    letter-spacing: -0.01em;
-    line-height: 1;
-    user-select: none;
-  `;
-  paintAvatarContent(inner, user);
-  wrap.appendChild(inner);
-  const tip = createTooltip(user.name);
-  wrap.appendChild(tip);
-  wrap.addEventListener("mouseenter", () => {
-    tip.style.opacity = "1";
-    tip.style.transform = "translateY(0)";
-  });
-  wrap.addEventListener("mouseleave", () => {
-    tip.style.opacity = "0";
-    tip.style.transform = "translateY(-2px)";
-  });
-  return wrap;
-}
-function updateAvatar(wrap, user) {
-  const inner = wrap.querySelector("[data-vizu-presence-inner]");
-  if (inner) paintAvatarContent(inner, user);
-  const tip = wrap.querySelector("[data-vizu-presence-tip]");
-  if (tip) tip.textContent = user.name;
-  wrap.setAttribute("data-vizu-presence-name", user.name);
-  if (user.avatar) wrap.setAttribute("data-vizu-presence-img", user.avatar);
-  else wrap.removeAttribute("data-vizu-presence-img");
-}
-function avatarMeta(wrap) {
-  const id = wrap.getAttribute("data-vizu-presence-avatar");
-  const name = wrap.getAttribute("data-vizu-presence-name");
-  const color = wrap.getAttribute("data-vizu-presence-color");
-  if (!id || !name || !color) return null;
-  const avatar = wrap.getAttribute("data-vizu-presence-img") ?? void 0;
-  return { id, name, color, avatar };
-}
-function paintAvatarFollowState(wrap, user, isFollowing) {
-  if (isFollowing) {
-    wrap.style.boxShadow = `0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px var(--vizu-coral, #FF6647), 0 4px 12px rgba(255, 102, 71, 0.4)`;
-  } else {
-    wrap.style.boxShadow = `0 0 0 2px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(0, 0, 0, 0.15)`;
-  }
-  void user;
-}
-function paintAvatarContent(inner, user) {
-  inner.textContent = "";
-  if (user.avatar) {
-    const img = document.createElement("img");
-    img.src = user.avatar;
-    img.alt = user.name;
-    img.referrerPolicy = "no-referrer";
-    img.style.cssText = "width: 100%; height: 100%; object-fit: cover; display: block;";
-    img.addEventListener(
-      "error",
-      () => {
-        img.remove();
-        inner.textContent = initialsOf(user.name);
-      },
-      { once: true }
-    );
-    inner.appendChild(img);
-  } else {
-    inner.textContent = initialsOf(user.name);
-  }
-}
-function createTooltip(text) {
-  const tip = document.createElement("div");
-  tip.setAttribute("data-vizu-presence-tip", "");
-  tip.textContent = text;
-  tip.style.cssText = `
-    position: absolute;
-    top: calc(100% + 6px);
-    right: 0;
-    background: rgba(10, 10, 10, 0.92);
-    color: #ffffff;
-    font-size: 11px;
-    font-weight: 500;
-    padding: 4px 8px;
-    border-radius: 4px;
-    white-space: nowrap;
-    pointer-events: none;
-    opacity: 0;
-    transform: translateY(-2px);
-    transition: opacity 130ms ease-out, transform 130ms ease-out;
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
-    max-width: 220px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `;
-  return tip;
-}
-function createOverflowChip() {
-  const chip = document.createElement("div");
-  chip.setAttribute("data-vizu-presence-overflow", "");
-  chip.style.cssText = `
-    width: ${AVATAR_SIZE}px;
-    height: ${AVATAR_SIZE}px;
-    margin-left: -${OVERLAP_PX}px;
-    border-radius: 50%;
-    background: rgba(82, 82, 82, 0.95);
-    color: #ffffff;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(0, 0, 0, 0.15);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 10.5px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    line-height: 1;
-    user-select: none;
-    flex-shrink: 0;
-  `;
-  return chip;
-}
-function initialsOf(name) {
-  const trimmed = name.trim();
-  if (!trimmed) return "?";
-  const parts = trimmed.split(/\s+/);
-  if (parts.length >= 2 && parts[0] && parts[parts.length - 1]) {
-    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-  }
-  return trimmed.slice(0, 2).toUpperCase();
-}
-
-// src/selection-overlay.ts
-var Z_INDEX2 = 2147483639;
-var SelectionOverlay = class {
-  constructor() {
-    this.container = null;
-    this.overlays = /* @__PURE__ */ new Map();
-    this.scrollListener = null;
-    this.resizeListener = null;
-    this.rafScheduled = false;
-  }
-  mount() {
-    if (typeof document === "undefined") return;
-    if (this.container) return;
-    this.container = document.createElement("div");
-    this.container.setAttribute("data-vizu-selections", "");
-    this.container.style.cssText = `
-      position: fixed; inset: 0;
-      pointer-events: none;
-      z-index: ${Z_INDEX2};
-      contain: strict;
-    `;
-    document.body.appendChild(this.container);
-    this.scrollListener = () => this.scheduleReposition();
-    this.resizeListener = () => this.scheduleReposition();
-    window.addEventListener("scroll", this.scrollListener, { passive: true, capture: true });
-    window.addEventListener("resize", this.resizeListener);
-  }
-  destroy() {
-    if (this.scrollListener) {
-      window.removeEventListener("scroll", this.scrollListener, true);
-      this.scrollListener = null;
-    }
-    if (this.resizeListener) {
-      window.removeEventListener("resize", this.resizeListener);
-      this.resizeListener = null;
-    }
-    for (const e of this.overlays.values()) e.el.remove();
-    this.overlays.clear();
-    this.container?.remove();
-    this.container = null;
-  }
-  setSelections(selections) {
-    if (!this.container) return;
-    const nextIds = new Set(selections.map((s) => s.id));
-    for (const [id, entry] of Array.from(this.overlays)) {
-      if (!nextIds.has(id)) {
-        entry.el.remove();
-        this.overlays.delete(id);
-      }
-    }
-    for (const sel of selections) {
-      let entry = this.overlays.get(sel.id);
-      if (!entry) {
-        const el = createOverlay(sel.color, sel.name);
-        this.container.appendChild(el);
-        entry = { el, fingerprint: sel.fingerprint, color: sel.color, name: sel.name };
-        this.overlays.set(sel.id, entry);
-      } else {
-        entry.fingerprint = sel.fingerprint;
-        if (entry.color !== sel.color) {
-          entry.color = sel.color;
-          entry.el.style.borderColor = sel.color;
-        }
-        if (entry.name !== sel.name) {
-          entry.name = sel.name;
-          const label = entry.el.querySelector("[data-selection-label]");
-          if (label) {
-            label.textContent = sel.name;
-            label.style.background = sel.color;
-          }
-        }
-      }
-      this.positionOverlay(entry);
-    }
-  }
-  /* ────────────────── private ────────────────── */
-  positionOverlay(entry) {
-    const match = findByFingerprint(entry.fingerprint);
-    const target = match?.element ?? null;
-    if (!target) {
-      entry.el.style.display = "none";
-      return;
-    }
-    const rect = target.getBoundingClientRect();
-    if (rect.width === 0 || rect.height === 0) {
-      entry.el.style.display = "none";
-      return;
-    }
-    entry.el.style.display = "block";
-    entry.el.style.left = `${rect.left}px`;
-    entry.el.style.top = `${rect.top}px`;
-    entry.el.style.width = `${rect.width}px`;
-    entry.el.style.height = `${rect.height}px`;
-  }
-  scheduleReposition() {
-    if (this.rafScheduled) return;
-    this.rafScheduled = true;
-    requestAnimationFrame(() => {
-      this.rafScheduled = false;
-      for (const entry of this.overlays.values()) this.positionOverlay(entry);
-    });
-  }
-};
-function createOverlay(color, name) {
-  const el = document.createElement("div");
-  el.setAttribute("data-vizu-selection-overlay", "");
-  const positionTransition = prefersReducedMotion() ? "none" : "left 90ms ease-out, top 90ms ease-out, width 90ms ease-out, height 90ms ease-out";
-  el.style.cssText = `
-    position: fixed;
-    pointer-events: none;
-    display: none;
-    border: 2px dashed ${color};
-    border-radius: 4px;
-    background: ${color}10;
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
-    transition: ${positionTransition};
-    will-change: left, top, width, height;
-  `;
-  const label = document.createElement("div");
-  label.setAttribute("data-selection-label", "");
-  label.textContent = name;
-  label.style.cssText = `
-    position: absolute;
-    top: -22px;
-    left: -2px;
-    padding: 2px 7px;
-    background: ${color};
-    color: #ffffff;
-    font: 500 10.5px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    border-radius: 3px 3px 3px 0;
-    white-space: nowrap;
-    max-width: 180px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
-  `;
-  el.appendChild(label);
-  return el;
-}
-
-// src/live-collab.ts
-var MOUSEMOVE_THROTTLE_MS = 50;
-var SCROLL_THROTTLE_MS = 100;
-var INACTIVITY_FADE_MS = 5e3;
-var CURSOR_TRANSITION_MS = 110;
-var Z_INDEX3 = 2147483641;
-var FOLLOW_SCROLL_THRESHOLD_PX = 8;
-function fnv1a32Hex(input) {
-  let h = 2166136261;
-  for (let i = 0; i < input.length; i++) {
-    h ^= input.charCodeAt(i);
-    h = Math.imul(h, 16777619);
-  }
-  return (h >>> 0).toString(16).padStart(8, "0");
-}
-function roomIdFor(workspaceSlug, pageUrl) {
-  return `ws_${workspaceSlug}__pg_${fnv1a32Hex(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
-    this.presenceStack = null;
-    this.followPill = null;
-    this.selectionOverlay = null;
-    this.mouseListener = null;
-    this.scrollListener = null;
-    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.destroyed = false;
-    // 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;
-  }
-  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.mountContainer();
-      this.presenceStack = new PresenceStack({
-        onAvatarClick: (userId) => this.setFollowing(userId)
-      });
-      this.presenceStack.mount();
-      this.followPill = new FollowPill({
-        onStop: () => this.setFollowing(null)
-      });
-      this.selectionOverlay = new SelectionOverlay();
-      this.selectionOverlay.mount();
-      this.statusIndicator = new ConnectionIndicator();
-      this.statusIndicator.mount();
-      this.subscribeOthers();
-      this.subscribeStatus();
-      this.attachMouseListener();
-      this.attachScrollListener();
-      this.attachVisibilityListener();
-      this.attachKeyboardListener();
-    } catch (err) {
-      if (typeof console !== "undefined") {
-        console.warn("[vizu/live-collab] start failed; live cursors disabled:", err);
-      }
-      this.cleanup();
-    }
-  }
-  destroy() {
-    this.destroyed = true;
-    this.cleanup();
-  }
-  /* ────────────────── private ────────────────── */
-  cleanup() {
-    if (this.mouseListener) {
-      window.removeEventListener("mousemove", this.mouseListener);
-      this.mouseListener = null;
-    }
-    if (this.scrollListener) {
-      window.removeEventListener("scroll", this.scrollListener);
-      this.scrollListener = null;
-    }
-    if (this.visibilityListener) {
-      document.removeEventListener("visibilitychange", this.visibilityListener);
-      this.visibilityListener = null;
-    }
-    if (this.keydownListener) {
-      document.removeEventListener("keydown", this.keydownListener);
-      this.keydownListener = null;
-    }
-    if (this.throttleTimer != null) {
-      window.clearTimeout(this.throttleTimer);
-      this.throttleTimer = null;
-    }
-    if (this.scrollThrottleTimer != null) {
-      window.clearTimeout(this.scrollThrottleTimer);
-      this.scrollThrottleTimer = 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();
-    }
-    this.cursors.clear();
-    this.presenceStack?.destroy();
-    this.presenceStack = null;
-    this.followPill?.destroy();
-    this.followPill = null;
-    this.selectionOverlay?.destroy();
-    this.selectionOverlay = null;
-    this.statusIndicator?.destroy();
-    this.statusIndicator = null;
-    this.followingUserId = null;
-    this.lastFolloweeScrollY = null;
-    this.container?.remove();
-    this.container = null;
-    this.leave?.();
-    this.leave = null;
-    this.room = null;
-    this.client = null;
-  }
-  /**
-   * Public API: broadcast the local user's currently-hovered element
-   * (highlighter mode) so other clients can render a ghost outline on
-   * it. Pass null to clear (highlighter stopped, popover opened, etc.).
-   * 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
-    });
-  }
-  /**
-   * Public API: start/stop following a user by Clerk id. Null clears.
-   * Called by the avatar click handler and by the FollowPill stop button.
-   * Idempotent — same id again is a no-op.
-   */
-  setFollowing(userId) {
-    if (this.followingUserId === userId) return;
-    this.followingUserId = userId;
-    this.lastFolloweeScrollY = null;
-    this.presenceStack?.setFollowing(userId);
-    this.followPill?.setFollowing(userId ? this.lookupUserForPill(userId) : null);
-    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) {
-        return {
-          id: userId,
-          name: meta.info?.name ?? "Anonymous",
-          color: colorForUser(userId),
-          avatar: meta.info?.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);
-        }
-        return;
-      }
-    }
-  }
-  followScrollTo(scrollY) {
-    if (this.lastFolloweeScrollY !== null && Math.abs(this.lastFolloweeScrollY - scrollY) < FOLLOW_SCROLL_THRESHOLD_PX) {
-      return;
-    }
-    this.lastFolloweeScrollY = scrollY;
-    window.scrollTo({ top: scrollY, behavior: "smooth" });
-  }
-  mountContainer() {
-    this.container = document.createElement("div");
-    this.container.setAttribute("data-vizu-live-cursors", "");
-    this.container.style.cssText = `
-      position: fixed; inset: 0;
-      pointer-events: none;
-      z-index: ${Z_INDEX3};
-      contain: strict;
-    `;
-    document.body.appendChild(this.container);
-  }
-  attachMouseListener() {
-    this.mouseListener = (e) => {
-      const xPct = e.clientX / window.innerWidth * 100;
-      const yPct = e.clientY / window.innerHeight * 100;
-      this.pendingCursor = { xPct, yPct };
-      this.flushThrottled();
-    };
-    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);
-      }
-    };
-    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 });
-      }
-    };
-    document.addEventListener("visibilitychange", this.visibilityListener);
-  }
-  attachKeyboardListener() {
-    this.keydownListener = (e) => {
-      if (e.key !== "Escape") return;
-      if (!this.followingUserId) return;
-      this.setFollowing(null);
-    };
-    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);
-  }
-  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);
-    }
-  }
-  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;
-          }
-        }
-        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 {
-          }
-        }
-        if (!presence.cursor) {
-          this.removeCursor(other.connectionId);
-          continue;
-        }
-        this.upsertCursor(other.connectionId, userId, name, 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);
-        }
-      }
-    });
-    this.unsubscribers.push(unsub);
-  }
-  upsertCursor(connectionId, userId, name, cursor) {
-    if (!this.container) return;
-    let entry = this.cursors.get(connectionId);
-    if (!entry) {
-      const color = colorForUser(userId);
-      const el = createCursorElement(name, color);
-      this.container.appendChild(el);
-      entry = { el, fadeTimer: null };
-      this.cursors.set(connectionId, entry);
-    }
-    const inViewport = cursor.xPct >= 0 && cursor.xPct <= 100 && cursor.yPct >= 0 && cursor.yPct <= 100;
-    if (!inViewport) {
-      entry.el.style.opacity = "0";
-      return;
-    }
-    const x = window.innerWidth * cursor.xPct / 100;
-    const y = window.innerHeight * cursor.yPct / 100;
-    entry.el.style.transform = `translate(${x}px, ${y}px)`;
-    entry.el.style.opacity = "1";
-    if (entry.fadeTimer != null) window.clearTimeout(entry.fadeTimer);
-    entry.fadeTimer = window.setTimeout(() => {
-      if (entry) entry.el.style.opacity = "0";
-    }, INACTIVITY_FADE_MS);
-  }
-  removeCursor(connectionId) {
-    const entry = this.cursors.get(connectionId);
-    if (!entry) return;
-    if (entry.fadeTimer != null) window.clearTimeout(entry.fadeTimer);
-    entry.el.style.opacity = "0";
-    window.setTimeout(() => entry.el.remove(), 220);
-    this.cursors.delete(connectionId);
-  }
-};
-function createCursorElement(name, color) {
-  const wrap = document.createElement("div");
-  wrap.setAttribute("data-vizu-cursor", "");
-  const transformTransition = prefersReducedMotion() ? "none" : `transform ${CURSOR_TRANSITION_MS}ms cubic-bezier(0.16, 1, 0.3, 1)`;
-  wrap.style.cssText = `
-    position: absolute; top: 0; left: 0;
-    pointer-events: none;
-    opacity: 0;
-    transform: translate(0px, 0px);
-    transition: ${transformTransition}, opacity 220ms ease-out;
-    will-change: transform;
-  `;
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("width", "18");
-  svg.setAttribute("height", "20");
-  svg.setAttribute("viewBox", "0 0 16 18");
-  svg.style.cssText = "display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.3));";
-  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  path.setAttribute("d", "M0 0 L0 13 L4 9 L7 16 L9 15 L6 8 L11 8 Z");
-  path.setAttribute("fill", color);
-  path.setAttribute("stroke", "#ffffff");
-  path.setAttribute("stroke-width", "1.2");
-  path.setAttribute("stroke-linejoin", "round");
-  svg.appendChild(path);
-  wrap.appendChild(svg);
-  const label = document.createElement("div");
-  label.textContent = name;
-  label.style.cssText = `
-    margin-top: 2px;
-    margin-left: 10px;
-    padding: 2px 7px;
-    background: ${color};
-    color: #ffffff;
-    font: 500 11px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    border-radius: 4px;
-    white-space: nowrap;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
-    max-width: 160px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `;
-  wrap.appendChild(label);
-  return wrap;
-}
-var ConnectionIndicator = class {
-  constructor() {
-    this.el = null;
-    this.label = null;
-  }
-  mount() {
-    if (typeof document === "undefined") return;
-    if (this.el) return;
-    this.el = document.createElement("div");
-    this.el.setAttribute("data-vizu-connection-status", "");
-    this.el.style.cssText = `
-      position: fixed;
-      top: 18px;
-      right: 200px;
-      z-index: ${Z_INDEX3};
-      display: none;
-      align-items: center;
-      gap: 7px;
-      padding: 4px 10px 4px 8px;
-      background: rgba(10, 10, 10, 0.88);
-      color: #fafafa;
-      font: 500 11px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      border-radius: 999px;
-      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
-      pointer-events: none;
-    `;
-    const dot = document.createElement("span");
-    dot.style.cssText = `
-      display: inline-block;
-      width: 6px; height: 6px;
-      border-radius: 50%;
-      background: #F59E0B;
-      box-shadow: 0 0 6px #F59E0B;
-    `;
-    const label = document.createElement("span");
-    this.label = label;
-    this.el.appendChild(dot);
-    this.el.appendChild(label);
-    document.body.appendChild(this.el);
-  }
-  setStatus(status) {
-    if (!this.el || !this.label) return;
-    if (status === "connected") {
-      this.el.style.display = "none";
-      return;
-    }
-    this.label.textContent = labelForStatus(status);
-    this.el.style.display = "inline-flex";
-  }
-  destroy() {
-    this.el?.remove();
-    this.el = null;
-    this.label = null;
-  }
-};
-function labelForStatus(status) {
-  switch (status) {
-    case "connecting":
-      return "Connecting\u2026";
-    case "reconnecting":
-      return "Reconnecting\u2026";
-    case "disconnected":
-      return "Offline";
-    case "initial":
-      return "Connecting\u2026";
-    case "connected":
-      return "";
-  }
-}
-var FollowPill = class {
-  constructor(opts) {
-    this.el = null;
-    this.onStop = opts.onStop;
-  }
-  setFollowing(user) {
-    if (typeof document === "undefined") return;
-    if (!user) {
-      this.el?.remove();
-      this.el = null;
-      return;
-    }
-    if (!this.el) this.el = this.mount();
-    this.paint(user);
-  }
-  destroy() {
-    this.el?.remove();
-    this.el = null;
-  }
-  mount() {
-    const pill = document.createElement("div");
-    pill.setAttribute("data-vizu-follow-pill", "");
-    pill.style.cssText = `
-      position: fixed;
-      top: 56px;
-      right: 16px;
-      z-index: ${Z_INDEX3};
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      padding: 6px 6px 6px 12px;
-      background: rgba(10, 10, 10, 0.92);
-      color: #ffffff;
-      border-radius: 999px;
-      font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
-      pointer-events: auto;
-    `;
-    document.body.appendChild(pill);
-    return pill;
-  }
-  paint(user) {
-    if (!this.el) return;
-    this.el.textContent = "";
-    const dot = document.createElement("span");
-    dot.style.cssText = `
-      display: inline-block;
-      width: 8px; height: 8px;
-      border-radius: 50%;
-      background: ${user.color};
-      box-shadow: 0 0 8px ${user.color};
-    `;
-    this.el.appendChild(dot);
-    const label = document.createElement("span");
-    label.textContent = `Following ${user.name}`;
-    label.style.cssText = "max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;";
-    this.el.appendChild(label);
-    const stop = document.createElement("button");
-    stop.type = "button";
-    stop.setAttribute("aria-label", `Stop following ${user.name}`);
-    stop.innerHTML = '<svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true"><path d="M1 1 L11 11 M11 1 L1 11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /></svg>';
-    stop.style.cssText = `
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 22px; height: 22px;
-      border: none;
-      background: rgba(255, 255, 255, 0.12);
-      color: #ffffff;
-      border-radius: 50%;
-      cursor: pointer;
-      transition: background 120ms ease-out;
-    `;
-    stop.addEventListener("mouseenter", () => stop.style.background = "rgba(255, 255, 255, 0.22)");
-    stop.addEventListener("mouseleave", () => stop.style.background = "rgba(255, 255, 255, 0.12)");
-    stop.addEventListener("click", (e) => {
-      e.preventDefault();
-      this.onStop();
-    });
-    this.el.appendChild(stop);
-  }
-};
-export {
-  LiveCollab,
-  roomIdFor
-};
-//# sourceMappingURL=live-collab-IRUNFAPE.js.map