@synap-core/client 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,7 +1,11 @@
+import {
+  createRealtimeClient
+} from "./chunk-BVKLN5W3.js";
+
 // src/index.ts
 import { createTRPCClient, httpBatchLink } from "@trpc/client";
 function createSynapClient(config) {
-  return createTRPCClient({
+  const trpcClient = createTRPCClient({
     links: [
       httpBatchLink({
         url: `${config.url}/trpc`,
@@ -10,6 +14,14 @@ function createSynapClient(config) {
       })
     ]
   });
+  const realtimeClient = config.realtime ? createRealtimeClient({
+    url: config.url,
+    auth: config.realtime
+  }) : null;
+  return {
+    trpc: trpcClient,
+    realtime: realtimeClient
+  };
 }
 var index_default = createSynapClient;
 export {

package/dist/react/provider.js

@@ -1,64 +1,10 @@
 "use client";
-
-// src/react/provider.tsx
-import { createContext, useContext, useMemo } from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { createTRPCReact, httpBatchLink } from "@trpc/react-query";
-import { jsx } from "react/jsx-runtime";
-var trpc = createTRPCReact();
-var SynapContext = createContext(null);
-function SynapProvider({ url = "http://localhost:3000", getToken, headers, children }) {
-  const queryClient = useMemo(() => new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 5 * 60 * 1e3,
-        // 5 minutes
-        retry: 1
-      }
-    }
-  }), []);
-  const trpcClient = useMemo(() => trpc.createClient({
-    links: [
-      httpBatchLink({
-        url: `${url}/trpc`,
-        async headers() {
-          const baseHeaders = {
-            ...headers
-          };
-          if (getToken) {
-            const token = await getToken();
-            if (token) {
-              baseHeaders["Authorization"] = `Bearer ${token}`;
-            }
-          }
-          return baseHeaders;
-        },
-        fetch(url2, options) {
-          return fetch(url2, {
-            ...options,
-            credentials: "include"
-            // Send cookies
-          });
-        }
-      })
-    ]
-  }), [url, getToken, headers]);
-  const contextValue = useMemo(() => ({
-    api: trpc,
-    url
-  }), [url]);
-  return /* @__PURE__ */ jsx(SynapContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(trpc.Provider, { client: trpcClient, queryClient, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children }) }) });
-}
-function useSynap() {
-  const context = useContext(SynapContext);
-  if (!context) {
-    throw new Error("useSynap must be used within a SynapProvider");
-  }
-  return context;
-}
-function useSynapClient() {
-  return useSynap().api;
-}
+import {
+  SynapProvider,
+  trpc,
+  useSynap,
+  useSynapClient
+} from "../chunk-6MAWMLEW.js";
 export {
   SynapProvider,
   trpc,

package/dist/react/usePresence.d.ts

@@ -0,0 +1,29 @@
+/**
+ * React Hook: usePresence
+ *
+ * Hook for real-time presence tracking in a view.
+ *
+ * @example
+ * ```typescript
+ * function WhiteboardView({ viewId }: { viewId: string }) {
+ *   const { client } = useSynapClient();
+ *   const { users, moveCursor } = usePresence(client?.realtime, viewId);
+ *
+ *   return (
+ *     <div onMouseMove={(e) => moveCursor(e.clientX, e.clientY)}>
+ *       {users.map(user => (
+ *         <Cursor key={user.userId} {...user} />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+import type { RealtimeClient } from '../realtime.js';
+import type { UserPresence } from '@synap-core/types/realtime';
+export interface UsePresenceReturn {
+    users: UserPresence[];
+    moveCursor: (x: number, y: number) => void;
+    setTyping: (isTyping: boolean) => void;
+}
+export declare function usePresence(client: RealtimeClient | null, viewId: string, viewType?: string): UsePresenceReturn;

package/dist/react/useYjs.d.ts

@@ -0,0 +1,24 @@
+/**
+ * React Hook: useYjs
+ *
+ * Hook for Yjs CRDT synchronization in a view.
+ *
+ * @example
+ * ```typescript
+ * function TldrawWhiteboard({ roomName }: { roomName: string }) {
+ *   const { client } = useSynapClient();
+ *   const { ydoc } = useYjs(client?.realtime, roomName);
+ *
+ *   if (!ydoc) return <div>Connecting...</div>;
+ *
+ *   return <TldrawEditor store={createTLStore({ doc: ydoc })} />;
+ * }
+ * ```
+ */
+import type { RealtimeClient } from '../realtime.js';
+import type { YDoc } from '@synap-core/types/realtime';
+export interface UseYjsReturn {
+    ydoc: YDoc | null;
+    isConnected: boolean;
+}
+export declare function useYjs(client: RealtimeClient | null, roomName: string): UseYjsReturn;

package/dist/react.cjs

@@ -20,19 +20,122 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/react.ts
 var react_exports = {};
 __export(react_exports, {
-  SynapQueryClientProvider: () => import_react_query2.QueryClientProvider,
+  SynapQueryClientProvider: () => import_react_query4.QueryClientProvider,
   createSynapReact: () => createSynapReact,
-  default: () => react_default
+  default: () => react_default,
+  useEntities: () => useEntities,
+  useEvents: () => useEvents,
+  usePresence: () => usePresence,
+  useThreads: () => useThreads,
+  useYjs: () => useYjs
 });
 module.exports = __toCommonJS(react_exports);
-var import_react_query = require("@trpc/react-query");
-var import_react_query2 = require("@tanstack/react-query");
+var import_react_query3 = require("@trpc/react-query");
+
+// src/react/provider.tsx
+var import_react = require("react");
+var import_react_query = require("@tanstack/react-query");
+var import_react_query2 = require("@trpc/react-query");
+var import_jsx_runtime = require("react/jsx-runtime");
+var trpc = (0, import_react_query2.createTRPCReact)();
+var SynapContext = (0, import_react.createContext)(null);
+function useSynap() {
+  const context = (0, import_react.useContext)(SynapContext);
+  if (!context) {
+    throw new Error("useSynap must be used within a SynapProvider");
+  }
+  return context;
+}
+
+// src/react/useEntities.ts
+function useEntities(options = {}) {
+  const { api } = useSynap();
+  return api.entities.list.useQuery({
+    type: options.type,
+    limit: options.limit || 50
+  });
+}
+
+// src/react/useThreads.ts
+function useThreads(_limit = 20) {
+  throw new Error("Chat router not yet implemented in API");
+}
+
+// src/react/useEvents.ts
+function useEvents(options = {}) {
+  const { api } = useSynap();
+  return api.events.list.useQuery({
+    limit: options.limit || 100,
+    type: options.eventTypes ? options.eventTypes[0] : void 0
+  });
+}
+
+// src/react/usePresence.ts
+var import_react2 = require("react");
+function usePresence(client, viewId, viewType) {
+  const [users, setUsers] = (0, import_react2.useState)([]);
+  (0, import_react2.useEffect)(() => {
+    if (!client) return;
+    client.connectPresence(viewId, viewType);
+    client.on("presence:init", (data) => {
+      setUsers(data.users);
+    });
+    client.on("user-joined", (user) => {
+      setUsers((prev) => [...prev, user]);
+    });
+    client.on("user-left", (data) => {
+      setUsers((prev) => prev.filter((u) => u.userId !== data.userId));
+    });
+    client.on("cursor-update", (data) => {
+      setUsers((prev) => prev.map(
+        (u) => u.userId === data.userId ? { ...u, cursor: { x: data.x, y: data.y } } : u
+      ));
+    });
+    return () => {
+      client.disconnect();
+    };
+  }, [client, viewId, viewType]);
+  const moveCursor = (0, import_react2.useCallback)((x, y) => {
+    client?.moveCursor(x, y);
+  }, [client]);
+  const setTyping = (0, import_react2.useCallback)((isTyping) => {
+    client?.setTyping(isTyping);
+  }, [client]);
+  return { users, moveCursor, setTyping };
+}
+
+// src/react/useYjs.ts
+var import_react3 = require("react");
+function useYjs(client, roomName) {
+  const [ydoc, setYdoc] = (0, import_react3.useState)(null);
+  const [isConnected, setIsConnected] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    if (!client) return;
+    const doc = client.connectYjs(roomName);
+    setYdoc(doc);
+    setIsConnected(true);
+    return () => {
+      client.disconnect();
+      setYdoc(null);
+      setIsConnected(false);
+    };
+  }, [client, roomName]);
+  return { ydoc, isConnected };
+}
+
+// src/react.ts
+var import_react_query4 = require("@tanstack/react-query");
 function createSynapReact() {
-  return (0, import_react_query.createTRPCReact)();
+  return (0, import_react_query3.createTRPCReact)();
 }
 var react_default = createSynapReact;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SynapQueryClientProvider,
-  createSynapReact
+  createSynapReact,
+  useEntities,
+  useEvents,
+  usePresence,
+  useThreads,
+  useYjs
 });

package/dist/react.d.ts

@@ -71,6 +71,16 @@ export declare function createSynapReact(): ReturnType<typeof createTRPCReact<Ap
  * Type alias for the Synap tRPC React context
  */
 export type SynapReactContext = ReturnType<typeof createSynapReact>;
+/**
+ * @synap/client/react - React Integration
+ *
+ * Re-exports React hooks for use in React applications.
+ */
+export { useEntities } from './react/useEntities.js';
+export { useThreads } from './react/useThreads.js';
+export { useEvents } from './react/useEvents.js';
+export { usePresence, type UsePresenceReturn } from './react/usePresence.js';
+export { useYjs, type UseYjsReturn } from './react/useYjs.js';
 export { QueryClientProvider as SynapQueryClientProvider } from '@tanstack/react-query';
 export type { AppRouter } from '@synap/api';
 export default createSynapReact;

package/dist/react.js

@@ -1,5 +1,87 @@
+import {
+  useSynap
+} from "./chunk-6MAWMLEW.js";
+
 // src/react.ts
 import { createTRPCReact } from "@trpc/react-query";
+
+// src/react/useEntities.ts
+function useEntities(options = {}) {
+  const { api } = useSynap();
+  return api.entities.list.useQuery({
+    type: options.type,
+    limit: options.limit || 50
+  });
+}
+
+// src/react/useThreads.ts
+function useThreads(_limit = 20) {
+  throw new Error("Chat router not yet implemented in API");
+}
+
+// src/react/useEvents.ts
+function useEvents(options = {}) {
+  const { api } = useSynap();
+  return api.events.list.useQuery({
+    limit: options.limit || 100,
+    type: options.eventTypes ? options.eventTypes[0] : void 0
+  });
+}
+
+// src/react/usePresence.ts
+import { useState, useEffect, useCallback } from "react";
+function usePresence(client, viewId, viewType) {
+  const [users, setUsers] = useState([]);
+  useEffect(() => {
+    if (!client) return;
+    client.connectPresence(viewId, viewType);
+    client.on("presence:init", (data) => {
+      setUsers(data.users);
+    });
+    client.on("user-joined", (user) => {
+      setUsers((prev) => [...prev, user]);
+    });
+    client.on("user-left", (data) => {
+      setUsers((prev) => prev.filter((u) => u.userId !== data.userId));
+    });
+    client.on("cursor-update", (data) => {
+      setUsers((prev) => prev.map(
+        (u) => u.userId === data.userId ? { ...u, cursor: { x: data.x, y: data.y } } : u
+      ));
+    });
+    return () => {
+      client.disconnect();
+    };
+  }, [client, viewId, viewType]);
+  const moveCursor = useCallback((x, y) => {
+    client?.moveCursor(x, y);
+  }, [client]);
+  const setTyping = useCallback((isTyping) => {
+    client?.setTyping(isTyping);
+  }, [client]);
+  return { users, moveCursor, setTyping };
+}
+
+// src/react/useYjs.ts
+import { useState as useState2, useEffect as useEffect2 } from "react";
+function useYjs(client, roomName) {
+  const [ydoc, setYdoc] = useState2(null);
+  const [isConnected, setIsConnected] = useState2(false);
+  useEffect2(() => {
+    if (!client) return;
+    const doc = client.connectYjs(roomName);
+    setYdoc(doc);
+    setIsConnected(true);
+    return () => {
+      client.disconnect();
+      setYdoc(null);
+      setIsConnected(false);
+    };
+  }, [client, roomName]);
+  return { ydoc, isConnected };
+}
+
+// src/react.ts
 import { QueryClientProvider } from "@tanstack/react-query";
 function createSynapReact() {
   return createTRPCReact();
@@ -8,5 +90,10 @@ var react_default = createSynapReact;
 export {
   QueryClientProvider as SynapQueryClientProvider,
   createSynapReact,
-  react_default as default
+  react_default as default,
+  useEntities,
+  useEvents,
+  usePresence,
+  useThreads,
+  useYjs
 };

package/dist/realtime.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,103 +17,137 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/realtime.ts
 var realtime_exports = {};
 __export(realtime_exports, {
-  SynapRealtimeClient: () => SynapRealtimeClient
+  RealtimeClient: () => RealtimeClient,
+  createRealtimeClient: () => createRealtimeClient
 });
 module.exports = __toCommonJS(realtime_exports);
-var SynapRealtimeClient = class {
-  ws = null;
-  config;
-  reconnectAttempts = 0;
-  maxReconnectAttempts;
-  reconnectDelay;
-  reconnectTimer = null;
-  isIntentionallyDisconnected = false;
+var import_socket = require("socket.io-client");
+var Y = __toESM(require("yjs"), 1);
+var RealtimeClient = class {
   constructor(config) {
     this.config = config;
-    this.maxReconnectAttempts = config.maxReconnectAttempts ?? 5;
-    this.reconnectDelay = config.reconnectDelay ?? 1e3;
   }
+  presenceSocket = null;
+  yjsSocket = null;
+  listeners = /* @__PURE__ */ new Map();
   /**
-   * Connect to the WebSocket server
+   * Connect to presence namespace for real-time collaboration
    */
-  connect() {
-    if (this.ws?.readyState === WebSocket.OPEN) {
-      return;
-    }
-    this.isIntentionallyDisconnected = false;
-    const wsUrl = this.config.url;
-    try {
-      this.ws = new WebSocket(wsUrl);
-      this.ws.onopen = () => {
-        this.reconnectAttempts = 0;
-        this.config.onConnect?.();
-      };
-      this.ws.onmessage = (event) => {
-        try {
-          const message = JSON.parse(event.data);
-          this.config.onMessage?.(message);
-        } catch (error) {
-          console.error("Failed to parse WebSocket message:", error);
-          this.config.onError?.(
-            new Error(`Failed to parse message: ${error instanceof Error ? error.message : String(error)}`)
-          );
-        }
-      };
-      this.ws.onerror = () => {
-        this.config.onError?.(new Error("WebSocket error"));
-      };
-      this.ws.onclose = () => {
-        this.config.onDisconnect?.();
-        if (!this.isIntentionallyDisconnected) {
-          this.attemptReconnect();
-        }
-      };
-    } catch (error) {
-      this.config.onError?.(
-        error instanceof Error ? error : new Error(String(error))
-      );
+  connectPresence(viewId, viewType = "document") {
+    if (this.presenceSocket) {
+      this.presenceSocket.disconnect();
     }
+    this.presenceSocket = (0, import_socket.io)(`${this.config.url}/presence`, {
+      auth: {
+        ...this.config.auth,
+        viewId,
+        viewType
+      }
+    });
+    this.presenceSocket.on("presence:init", (data) => {
+      this.emit("presence:init", data);
+    });
+    this.presenceSocket.on("user:joined", (user) => {
+      this.emit("user-joined", user);
+    });
+    this.presenceSocket.on("user:left", (data) => {
+      this.emit("user-left", data);
+    });
+    this.presenceSocket.on("cursor:update", (data) => {
+      this.emit("cursor-update", data);
+    });
+    this.presenceSocket.on("typing", (data) => {
+      this.emit("typing", data);
+    });
   }
   /**
-   * Disconnect from the WebSocket server
+   * Connect to Yjs namespace for CRDT synchronization
+   * 
+   * @returns Yjs document that auto-syncs with server
    */
-  disconnect() {
-    this.isIntentionallyDisconnected = true;
-    if (this.reconnectTimer) {
-      clearTimeout(this.reconnectTimer);
-      this.reconnectTimer = null;
+  connectYjs(roomName) {
+    if (this.yjsSocket) {
+      this.yjsSocket.disconnect();
     }
-    if (this.ws) {
-      this.ws.close();
-      this.ws = null;
+    const ydoc = new Y.Doc();
+    this.yjsSocket = (0, import_socket.io)(`${this.config.url}/yjs`, {
+      query: { room: roomName }
+    });
+    this.yjsSocket.on("yjs:sync", (message) => {
+      Y.applyUpdate(ydoc, Uint8Array.from(message));
+    });
+    this.yjsSocket.on("yjs:update", (message) => {
+      Y.applyUpdate(ydoc, Uint8Array.from(message), this.yjsSocket);
+    });
+    ydoc.on("update", (update, origin) => {
+      if (origin !== this.yjsSocket) {
+        this.yjsSocket?.emit("yjs:update", Array.from(update));
+      }
+    });
+    return ydoc;
+  }
+  /**
+   * Subscribe to events
+   */
+  on(event, callback) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
     }
+    this.listeners.get(event).add(callback);
   }
   /**
-   * Check if currently connected
+   * Unsubscribe from events
    */
-  isConnected() {
-    return this.ws?.readyState === WebSocket.OPEN;
+  off(event, callback) {
+    this.listeners.get(event)?.delete(callback);
   }
-  attemptReconnect() {
-    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-      this.config.onError?.(
-        new Error(`Max reconnection attempts (${this.maxReconnectAttempts}) reached`)
-      );
-      return;
-    }
-    this.reconnectAttempts++;
-    const delay = this.reconnectDelay * this.reconnectAttempts;
-    this.reconnectTimer = setTimeout(() => {
-      this.connect();
-    }, delay);
+  /**
+   * Emit event to all listeners
+   */
+  emit(event, data) {
+    this.listeners.get(event)?.forEach((cb) => cb(data));
+  }
+  /**
+   * Move cursor (presence)
+   */
+  moveCursor(x, y) {
+    this.presenceSocket?.emit("cursor:move", { x, y });
+  }
+  /**
+   * Set typing indicator
+   */
+  setTyping(isTyping) {
+    this.presenceSocket?.emit("typing", isTyping);
+  }
+  /**
+   * Disconnect all connections
+   */
+  disconnect() {
+    this.presenceSocket?.disconnect();
+    this.yjsSocket?.disconnect();
+    this.presenceSocket = null;
+    this.yjsSocket = null;
+    this.listeners.clear();
   }
 };
+function createRealtimeClient(config) {
+  return new RealtimeClient(config);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  SynapRealtimeClient
+  RealtimeClient,
+  createRealtimeClient
 });