@sesionario/blocks 1.13.0 → 1.14.0

package/dist/index.d.cts

@@ -1123,8 +1123,12 @@ type UseRealtimeChannelOptions = {
 };
 /**
  * Subscribe to a realtime-svc channel WebSocket.
- * Reconnects with exponential backoff; refreshes the URL (token) on each attempt.
- * Treats events as invalidation signals — callers should re-fetch authoritative data.
+ * Components on the same channel share one socket (ref-counted; closed when
+ * the last subscriber unmounts). Reconnects with exponential backoff and
+ * refreshes the URL (token) on each attempt; if the URL resolves null the
+ * connection goes idle until the tab becomes visible again.
+ * Treats events as invalidation signals — callers should re-fetch
+ * authoritative data.
  */
 declare function useRealtimeChannel({ getWsUrl, onEvent, enabled, reconnectDelayMs, }: UseRealtimeChannelOptions): void;
 

package/dist/index.d.ts

@@ -1123,8 +1123,12 @@ type UseRealtimeChannelOptions = {
 };
 /**
  * Subscribe to a realtime-svc channel WebSocket.
- * Reconnects with exponential backoff; refreshes the URL (token) on each attempt.
- * Treats events as invalidation signals — callers should re-fetch authoritative data.
+ * Components on the same channel share one socket (ref-counted; closed when
+ * the last subscriber unmounts). Reconnects with exponential backoff and
+ * refreshes the URL (token) on each attempt; if the URL resolves null the
+ * connection goes idle until the tab becomes visible again.
+ * Treats events as invalidation signals — callers should re-fetch
+ * authoritative data.
  */
 declare function useRealtimeChannel({ getWsUrl, onEvent, enabled, reconnectDelayMs, }: UseRealtimeChannelOptions): void;
 

package/dist/index.js

@@ -6154,7 +6154,7 @@ function MessageScrollerButton({
       "data-size": size,
       direction,
       className: cn(
-        "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+        "absolute left-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full data-[direction=start]:[&_svg]:rotate-180",
         className
       ),
       render: render ?? /* @__PURE__ */ jsx(Button, { variant, size }),
@@ -6954,6 +6954,162 @@ function createSupportChatClient(basePath = "/api/chat-svc") {
 }
 var DEFAULT_RECONNECT_MS = 2e3;
 var MAX_RECONNECT_MS = 3e4;
+var HEARTBEAT_MS = 3e4;
+var registry = /* @__PURE__ */ new Map();
+function channelKeyFromUrl(url) {
+  const q = url.indexOf("?");
+  return q === -1 ? url : url.slice(0, q);
+}
+function stopHeartbeat(shared) {
+  if (shared.heartbeatTimer) {
+    clearInterval(shared.heartbeatTimer);
+    shared.heartbeatTimer = null;
+  }
+}
+function startHeartbeat(shared, gen) {
+  stopHeartbeat(shared);
+  shared.heartbeatTimer = setInterval(() => {
+    if (gen !== shared.gen) return;
+    if (shared.ws?.readyState === WebSocket.OPEN) {
+      try {
+        shared.ws.send("ping");
+      } catch {
+      }
+    }
+  }, HEARTBEAT_MS);
+}
+function clearReconnect(shared) {
+  if (shared.reconnectTimer) {
+    clearTimeout(shared.reconnectTimer);
+    shared.reconnectTimer = null;
+  }
+}
+function openSocket(shared, url) {
+  const gen = ++shared.gen;
+  clearReconnect(shared);
+  if (shared.ws) {
+    try {
+      shared.ws.close();
+    } catch {
+    }
+  }
+  const ws = new WebSocket(url);
+  shared.ws = ws;
+  ws.onopen = () => {
+    if (gen !== shared.gen) return;
+    shared.attempt = 0;
+    startHeartbeat(shared, gen);
+  };
+  ws.onmessage = (msg) => {
+    if (gen !== shared.gen) return;
+    let data;
+    try {
+      data = JSON.parse(String(msg.data));
+    } catch {
+      return;
+    }
+    if (typeof data?.type !== "string") return;
+    if (data.type === "pong") return;
+    for (const listener of shared.listeners) {
+      listener(data);
+    }
+  };
+  ws.onclose = () => {
+    if (gen !== shared.gen) return;
+    shared.ws = null;
+    stopHeartbeat(shared);
+    scheduleReconnect(shared);
+  };
+  ws.onerror = () => {
+  };
+}
+function scheduleReconnect(shared) {
+  if (shared.listeners.size === 0) return;
+  clearReconnect(shared);
+  const delay = Math.min(
+    shared.reconnectDelayMs * 2 ** shared.attempt,
+    MAX_RECONNECT_MS
+  );
+  shared.attempt += 1;
+  shared.reconnectTimer = setTimeout(() => {
+    shared.reconnectTimer = null;
+    void connectShared(shared);
+  }, delay);
+}
+async function connectShared(shared) {
+  if (shared.connecting || shared.listeners.size === 0) return;
+  shared.connecting = true;
+  let url = null;
+  try {
+    url = await shared.getWsUrl();
+  } finally {
+    shared.connecting = false;
+  }
+  if (shared.listeners.size === 0) return;
+  if (!url) return;
+  openSocket(shared, url);
+}
+function destroyShared(shared) {
+  shared.gen += 1;
+  clearReconnect(shared);
+  stopHeartbeat(shared);
+  if (shared.ws) {
+    try {
+      shared.ws.close();
+    } catch {
+    }
+    shared.ws = null;
+  }
+}
+function joinChannel(key, url, getWsUrl, reconnectDelayMs, listener) {
+  ensureVisibilityHook();
+  let shared = registry.get(key);
+  if (!shared) {
+    shared = {
+      key,
+      listeners: /* @__PURE__ */ new Set(),
+      getWsUrl,
+      reconnectDelayMs,
+      ws: null,
+      attempt: 0,
+      reconnectTimer: null,
+      heartbeatTimer: null,
+      connecting: false,
+      gen: 0
+    };
+    registry.set(key, shared);
+    shared.listeners.add(listener);
+    openSocket(shared, url);
+    return;
+  }
+  shared.getWsUrl = getWsUrl;
+  shared.listeners.add(listener);
+  if (!shared.ws && !shared.connecting && !shared.reconnectTimer) {
+    openSocket(shared, url);
+  }
+}
+function leaveChannel(key, listener) {
+  const shared = registry.get(key);
+  if (!shared) return;
+  shared.listeners.delete(listener);
+  if (shared.listeners.size === 0) {
+    destroyShared(shared);
+    registry.delete(key);
+  }
+}
+var visibilityHooked = false;
+function ensureVisibilityHook() {
+  if (visibilityHooked || typeof document === "undefined") return;
+  visibilityHooked = true;
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState !== "visible") return;
+    for (const shared of registry.values()) {
+      if (!shared.ws && !shared.reconnectTimer && !shared.connecting) {
+        void connectShared(shared);
+      }
+    }
+  });
+}
 function useRealtimeChannel({
   getWsUrl,
   onEvent,
@@ -6967,87 +7123,26 @@ function useRealtimeChannel({
   useEffect(() => {
     if (!enabled) return;
     let cancelled = false;
-    let socket = null;
-    let reconnectTimer = null;
-    let attempt = 0;
-    const connectGen = { current: 0 };
-    const clearReconnect = () => {
-      if (reconnectTimer) {
-        clearTimeout(reconnectTimer);
-        reconnectTimer = null;
-      }
-    };
-    const scheduleReconnect = () => {
-      if (cancelled) return;
-      clearReconnect();
-      const delay = Math.min(reconnectDelayMs * 2 ** attempt, MAX_RECONNECT_MS);
-      attempt += 1;
-      reconnectTimer = setTimeout(() => {
-        void connect();
-      }, delay);
-    };
-    const connect = async () => {
-      const gen = ++connectGen.current;
-      clearReconnect();
-      const url = await getWsUrlRef.current();
-      if (cancelled || gen !== connectGen.current) return;
-      if (!url) {
-        scheduleReconnect();
-        return;
-      }
-      if (socket) {
-        try {
-          socket.close();
-        } catch {
-        }
-        socket = null;
-      }
-      const ws = new WebSocket(url);
-      socket = ws;
-      ws.onopen = () => {
-        if (cancelled || gen !== connectGen.current) return;
-        attempt = 0;
-      };
-      ws.onmessage = (msg) => {
-        if (cancelled || gen !== connectGen.current) return;
-        let data;
-        try {
-          data = JSON.parse(String(msg.data));
-        } catch {
-          return;
-        }
-        if (typeof data?.type !== "string") return;
-        if (data.type === "pong") return;
-        onEventRef.current(data);
-      };
-      ws.onclose = () => {
-        if (cancelled || gen !== connectGen.current) return;
-        socket = null;
-        scheduleReconnect();
-      };
-      ws.onerror = () => {
-      };
+    let joinedKey = null;
+    const listener = (event) => onEventRef.current(event);
+    const resolver = () => getWsUrlRef.current();
+    const join = async () => {
+      if (cancelled || joinedKey) return;
+      const url = await resolver();
+      if (cancelled || !url) return;
+      joinedKey = channelKeyFromUrl(url);
+      joinChannel(joinedKey, url, resolver, reconnectDelayMs, listener);
     };
     const onVisibility = () => {
       if (document.visibilityState !== "visible" || cancelled) return;
-      if (!socket || socket.readyState === WebSocket.CLOSED) {
-        void connect();
-      }
+      if (!joinedKey) void join();
     };
-    void connect();
+    void join();
     document.addEventListener("visibilitychange", onVisibility);
     return () => {
       cancelled = true;
-      connectGen.current += 1;
-      clearReconnect();
       document.removeEventListener("visibilitychange", onVisibility);
-      if (socket) {
-        try {
-          socket.close();
-        } catch {
-        }
-        socket = null;
-      }
+      if (joinedKey) leaveChannel(joinedKey, listener);
     };
   }, [enabled, reconnectDelayMs]);
 }