@unhingged/vizu-core 0.1.2 → 0.1.4

package/dist/live-collab-BVLNJ5QI.js

@@ -1,1098 +0,0 @@
-import {
-  findByFingerprint
-} from "./chunk-OMIFOSQ2.js";
-
-// 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
-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 = 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++) {
-    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.container = null;
-    this.cursors = /* @__PURE__ */ new Map();
-    // keyed by connId now (was numeric 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.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 {
-      const pageUrl = this.opts.pageUrl ?? window.location.origin + window.location.pathname;
-      this.roomId = roomIdFor(this.opts.workspaceSlug, pageUrl);
-      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.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);
-      }
-      this.cleanup();
-    }
-  }
-  destroy() {
-    this.destroyed = true;
-    this.cleanup();
-  }
-  /* ────────────────── private ────────────────── */
-  cleanup() {
-    void this.clearRemotePresence();
-    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.pushTimer != null) {
-      window.clearInterval(this.pushTimer);
-      this.pushTimer = null;
-    }
-    if (this.pullTimer != null) {
-      window.clearInterval(this.pullTimer);
-      this.pullTimer = null;
-    }
-    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.roomId = null;
-    this.latestOthers = [];
-  }
-  /**
-   * 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) {
-    this.currentPresence.selecting = fingerprint ? { fingerprintJson: JSON.stringify(fingerprint) } : null;
-    this.presenceDirty = true;
-  }
-  /**
-   * 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) {
-    for (const o of this.latestOthers) {
-      if (o.user.userId === userId) {
-        return {
-          id: userId,
-          name: o.user.name ?? "Anonymous",
-          color: colorForUser(userId),
-          avatar: o.user.avatar
-        };
-      }
-    }
-    return null;
-  }
-  scrollToFolloweeIfKnown() {
-    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;
-      }
-    }
-  }
-  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) => {
-      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 = () => {
-      this.currentPresence.scrollY = window.scrollY;
-      this.presenceDirty = true;
-    };
-    window.addEventListener("scroll", this.scrollListener, { passive: true });
-  }
-  attachVisibilityListener() {
-    this.visibilityListener = () => {
-      if (document.hidden) {
-        void this.clearRemotePresence();
-      } else {
-        this.presenceDirty = true;
-      }
-    };
-    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);
-  }
-  setStatus(next) {
-    if (this.status === next) return;
-    this.status = next;
-    this.statusIndicator?.setStatus(next);
-  }
-  /**
-   * 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;
-    }
-  }
-  /**
-   * 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;
-        }
-        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 (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 {
-        }
-      }
-      if (!other.presence.cursor) {
-        this.removeCursor(other.connId);
-        continue;
-      }
-      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"
-    });
-  }
-  /**
-   * 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;
-    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-BVLNJ5QI.js.map