@object-ui/collaboration

Real-time collaboration for Object UI — live cursors, presence tracking, comment threads, and conflict resolution.

Features

• 🖱️ Live Cursors - Display remote user cursors in real time with LiveCursors
• 👥 Presence Avatars - Show active users with PresenceAvatars
• 💬 Comment Threads - Threaded comments with @mentions via CommentThread
• 🔄 Realtime Subscriptions - WebSocket data subscriptions with useRealtimeSubscription
• 👁️ Presence Tracking - Track who's viewing or editing with usePresence
• ⚔️ Conflict Resolution - Version history and merge conflicts with useConflictResolution
• 🎯 Type-Safe - Full TypeScript support with exported types

Installation

npm install @object-ui/collaboration

Peer Dependencies:

• react ^18.0.0 || ^19.0.0
• react-dom ^18.0.0 || ^19.0.0

Quick Start

import {
  usePresence,
  useRealtimeSubscription,
  LiveCursors,
  PresenceAvatars,
  CommentThread,
} from '@object-ui/collaboration';

function CollaborativeEditor() {
  const { users, updatePresence } = usePresence({
    channel: 'document-123',
  });

  const { data, connectionState } = useRealtimeSubscription({
    channel: 'document-123',
    event: 'update',
  });

  return (
    <div>
      <PresenceAvatars users={users} />
      <LiveCursors users={users} />
      <Editor data={data} onCursorMove={(pos) => updatePresence({ cursor: pos })} />
      <CommentThread threadId="thread-1" />
    </div>
  );
}

API

useRealtimeSubscription

Hook for WebSocket data subscriptions:

const { data, connectionState, error } = useRealtimeSubscription({
  channel: 'orders',
  event: 'update',
});

usePresence

Hook for tracking user presence:

const { users, updatePresence } = usePresence({
  channel: 'document-123',
  user: { id: 'user-1', name: 'Alice' },
});

useConflictResolution

Hook for version history and conflict management:

const { versions, conflicts, resolve } = useConflictResolution({
  resourceId: 'doc-123',
});

LiveCursors

Displays remote user cursors on the page:

<LiveCursors users={presenceUsers} />

PresenceAvatars

Shows avatar badges for active users:

<PresenceAvatars users={presenceUsers} maxVisible={5} />

CommentThread

Threaded comment component with @mentions:

<CommentThread
  threadId="thread-1"
  comments={comments}
  onSubmit={(comment) => saveComment(comment)}
/>

License

MIT