@object-ui/collaboration 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ObjectQL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,121 @@
+# @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
+
+```bash
+npm install @object-ui/collaboration
+```
+
+**Peer Dependencies:**
+- `react` ^18.0.0 || ^19.0.0
+- `react-dom` ^18.0.0 || ^19.0.0
+
+## Quick Start
+
+```tsx
+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:
+
+```tsx
+const { data, connectionState, error } = useRealtimeSubscription({
+  channel: 'orders',
+  event: 'update',
+});
+```
+
+### usePresence
+
+Hook for tracking user presence:
+
+```tsx
+const { users, updatePresence } = usePresence({
+  channel: 'document-123',
+  user: { id: 'user-1', name: 'Alice' },
+});
+```
+
+### useConflictResolution
+
+Hook for version history and conflict management:
+
+```tsx
+const { versions, conflicts, resolve } = useConflictResolution({
+  resourceId: 'doc-123',
+});
+```
+
+### LiveCursors
+
+Displays remote user cursors on the page:
+
+```tsx
+<LiveCursors users={presenceUsers} />
+```
+
+### PresenceAvatars
+
+Shows avatar badges for active users:
+
+```tsx
+<PresenceAvatars users={presenceUsers} maxVisible={5} />
+```
+
+### CommentThread
+
+Threaded comment component with @mentions:
+
+```tsx
+<CommentThread
+  threadId="thread-1"
+  comments={comments}
+  onSubmit={(comment) => saveComment(comment)}
+/>
+```
+
+## License
+
+MIT

package/dist/CommentThread.d.ts

@@ -0,0 +1,61 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface Comment {
+    id: string;
+    author: {
+        id: string;
+        name: string;
+        avatar?: string;
+    };
+    content: string;
+    mentions: string[];
+    createdAt: string;
+    updatedAt?: string;
+    parentId?: string;
+    resolved?: boolean;
+    reactions?: Record<string, string[]>;
+}
+export interface CommentThreadProps {
+    /** Thread ID */
+    threadId: string;
+    /** Comments in the thread */
+    comments: Comment[];
+    /** Current user */
+    currentUser: {
+        id: string;
+        name: string;
+        avatar?: string;
+    };
+    /** Available users for @mentions */
+    mentionableUsers?: {
+        id: string;
+        name: string;
+        avatar?: string;
+    }[];
+    /** Callback when a new comment is posted */
+    onAddComment?: (content: string, mentions: string[], parentId?: string) => void;
+    /** Callback when a comment is edited */
+    onEditComment?: (commentId: string, content: string) => void;
+    /** Callback when a comment is deleted */
+    onDeleteComment?: (commentId: string) => void;
+    /** Callback when thread is resolved/reopened */
+    onResolve?: (resolved: boolean) => void;
+    /** Whether the thread is resolved */
+    resolved?: boolean;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Comment thread component with @mentions support.
+ *
+ * Renders a list of comments with author avatars, timestamps,
+ * reply functionality, and an @mention suggestions popup.
+ */
+export declare function CommentThread({ threadId, comments, currentUser, mentionableUsers, onAddComment, onEditComment, onDeleteComment, onResolve, resolved, className, }: CommentThreadProps): React.ReactElement;
+//# sourceMappingURL=CommentThread.d.ts.map

package/dist/CommentThread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentThread.d.ts","sourceRoot":"","sources":["../src/CommentThread.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,kBAAkB;IACjC,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,6BAA6B;IAC7B,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,mBAAmB;IACnB,WAAW,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3D,oCAAoC;IACpC,gBAAgB,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACnE,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChF,wCAAwC;IACxC,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,yCAAyC;IACzC,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gDAAgD;IAChD,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiOD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,gBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,eAAe,EACf,SAAS,EACT,QAAgB,EAChB,SAAS,GACV,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAuQzC"}

package/dist/CommentThread.js

@@ -0,0 +1,438 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+function formatTimestamp(iso) {
+    try {
+        const date = new Date(iso);
+        const now = new Date();
+        const diff = now.getTime() - date.getTime();
+        const minutes = Math.floor(diff / 60000);
+        if (minutes < 1)
+            return 'just now';
+        if (minutes < 60)
+            return `${minutes}m ago`;
+        const hours = Math.floor(minutes / 60);
+        if (hours < 24)
+            return `${hours}h ago`;
+        const days = Math.floor(hours / 24);
+        if (days < 7)
+            return `${days}d ago`;
+        return date.toLocaleDateString();
+    }
+    catch {
+        return iso;
+    }
+}
+function getInitials(name) {
+    return name
+        .split(' ')
+        .map(part => part[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+}
+/** Parse @mentions from text content */
+function parseMentions(content, users) {
+    const mentions = [];
+    const mentionPattern = /@(\w+)/g;
+    let match;
+    while ((match = mentionPattern.exec(content)) !== null) {
+        const matchStr = match[1];
+        const mentioned = users.find(u => u.name.toLowerCase().replace(/\s+/g, '') === matchStr.toLowerCase()
+            || u.id === matchStr);
+        if (mentioned && !mentions.includes(mentioned.id)) {
+            mentions.push(mentioned.id);
+        }
+    }
+    return mentions;
+}
+const styles = {
+    thread: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontSize: '14px',
+        lineHeight: '1.5',
+        border: '1px solid #e2e8f0',
+        borderRadius: '8px',
+        overflow: 'hidden',
+        backgroundColor: '#fff',
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '8px 12px',
+        borderBottom: '1px solid #e2e8f0',
+        backgroundColor: '#f8fafc',
+        fontSize: '12px',
+        color: '#64748b',
+    },
+    resolveBtn: {
+        background: 'none',
+        border: '1px solid #cbd5e1',
+        borderRadius: '4px',
+        padding: '2px 8px',
+        fontSize: '12px',
+        cursor: 'pointer',
+        color: '#475569',
+    },
+    commentList: {
+        maxHeight: '400px',
+        overflowY: 'auto',
+    },
+    comment: {
+        display: 'flex',
+        gap: '8px',
+        padding: '10px 12px',
+        borderBottom: '1px solid #f1f5f9',
+    },
+    reply: {
+        paddingLeft: '32px',
+    },
+    avatar: {
+        width: '28px',
+        height: '28px',
+        borderRadius: '50%',
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '11px',
+        fontWeight: 600,
+        color: '#fff',
+        backgroundColor: '#94a3b8',
+        overflow: 'hidden',
+    },
+    avatarImg: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+    },
+    commentBody: {
+        flex: 1,
+        minWidth: 0,
+    },
+    commentHeader: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+        marginBottom: '2px',
+    },
+    authorName: {
+        fontWeight: 600,
+        fontSize: '13px',
+        color: '#1e293b',
+    },
+    timestamp: {
+        fontSize: '12px',
+        color: '#94a3b8',
+    },
+    content: {
+        color: '#334155',
+        wordBreak: 'break-word',
+    },
+    mention: {
+        color: '#3b82f6',
+        fontWeight: 500,
+    },
+    actions: {
+        display: 'flex',
+        gap: '8px',
+        marginTop: '4px',
+    },
+    actionBtn: {
+        background: 'none',
+        border: 'none',
+        fontSize: '12px',
+        color: '#64748b',
+        cursor: 'pointer',
+        padding: 0,
+    },
+    inputArea: {
+        display: 'flex',
+        gap: '8px',
+        padding: '10px 12px',
+        borderTop: '1px solid #e2e8f0',
+        position: 'relative',
+    },
+    textarea: {
+        flex: 1,
+        border: '1px solid #e2e8f0',
+        borderRadius: '6px',
+        padding: '6px 10px',
+        fontSize: '13px',
+        fontFamily: 'inherit',
+        resize: 'none',
+        outline: 'none',
+        minHeight: '36px',
+        maxHeight: '120px',
+        lineHeight: '1.5',
+    },
+    submitBtn: {
+        alignSelf: 'flex-end',
+        backgroundColor: '#3b82f6',
+        color: '#fff',
+        border: 'none',
+        borderRadius: '6px',
+        padding: '6px 14px',
+        fontSize: '13px',
+        fontWeight: 500,
+        cursor: 'pointer',
+        whiteSpace: 'nowrap',
+    },
+    submitBtnDisabled: {
+        backgroundColor: '#cbd5e1',
+        cursor: 'default',
+    },
+    mentionPopup: {
+        position: 'absolute',
+        bottom: '100%',
+        left: '12px',
+        backgroundColor: '#fff',
+        border: '1px solid #e2e8f0',
+        borderRadius: '6px',
+        boxShadow: '0 4px 6px -1px rgba(0,0,0,.1)',
+        maxHeight: '150px',
+        overflowY: 'auto',
+        zIndex: 10,
+        minWidth: '180px',
+    },
+    mentionItem: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '6px 10px',
+        cursor: 'pointer',
+        fontSize: '13px',
+        color: '#1e293b',
+    },
+    mentionItemHighlighted: {
+        backgroundColor: '#f1f5f9',
+    },
+};
+/** Render comment content with highlighted @mentions */
+function renderContent(content) {
+    const parts = content.split(/(@\w+)/g);
+    return parts.map((part, i) => {
+        if (part.startsWith('@')) {
+            return React.createElement('span', { key: i, style: styles.mention }, part);
+        }
+        return part;
+    });
+}
+/**
+ * Comment thread component with @mentions support.
+ *
+ * Renders a list of comments with author avatars, timestamps,
+ * reply functionality, and an @mention suggestions popup.
+ */
+export function CommentThread({ threadId, comments, currentUser, mentionableUsers = [], onAddComment, onEditComment, onDeleteComment, onResolve, resolved = false, className, }) {
+    const [inputValue, setInputValue] = useState('');
+    const [replyTo, setReplyTo] = useState(null);
+    const [editingId, setEditingId] = useState(null);
+    const [editValue, setEditValue] = useState('');
+    const [mentionQuery, setMentionQuery] = useState(null);
+    const [mentionIndex, setMentionIndex] = useState(0);
+    const inputRef = useRef(null);
+    const filteredMentions = useMemo(() => {
+        if (mentionQuery === null)
+            return [];
+        const query = mentionQuery.toLowerCase();
+        return mentionableUsers.filter(u => u.name.toLowerCase().includes(query) || u.id.toLowerCase().includes(query));
+    }, [mentionQuery, mentionableUsers]);
+    const handleInputChange = useCallback((e) => {
+        const value = e.target.value;
+        setInputValue(value);
+        // Detect @mention trigger
+        const cursorPos = e.target.selectionStart;
+        const textBeforeCursor = value.slice(0, cursorPos);
+        const mentionMatch = textBeforeCursor.match(/@(\w*)$/);
+        if (mentionMatch) {
+            setMentionQuery(mentionMatch[1]);
+            setMentionIndex(0);
+        }
+        else {
+            setMentionQuery(null);
+        }
+    }, []);
+    const insertMention = useCallback((user) => {
+        const textarea = inputRef.current;
+        if (!textarea)
+            return;
+        const cursorPos = textarea.selectionStart;
+        const textBeforeCursor = inputValue.slice(0, cursorPos);
+        const mentionMatch = textBeforeCursor.match(/@(\w*)$/);
+        if (mentionMatch) {
+            const before = textBeforeCursor.slice(0, mentionMatch.index);
+            const after = inputValue.slice(cursorPos);
+            const mentionText = `@${user.name.replace(/\s+/g, '')}`;
+            setInputValue(`${before}${mentionText} ${after}`);
+        }
+        setMentionQuery(null);
+    }, [inputValue]);
+    const handleKeyDown = useCallback((e) => {
+        if (mentionQuery !== null && filteredMentions.length > 0) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setMentionIndex(prev => Math.min(prev + 1, filteredMentions.length - 1));
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                setMentionIndex(prev => Math.max(prev - 1, 0));
+            }
+            else if (e.key === 'Enter' || e.key === 'Tab') {
+                e.preventDefault();
+                insertMention(filteredMentions[mentionIndex]);
+            }
+            else if (e.key === 'Escape') {
+                setMentionQuery(null);
+            }
+            return;
+        }
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    }, [mentionQuery, filteredMentions, mentionIndex, insertMention]); // eslint-disable-line react-hooks/exhaustive-deps
+    const handleSubmit = useCallback(() => {
+        const trimmed = inputValue.trim();
+        if (!trimmed || !onAddComment)
+            return;
+        const mentions = parseMentions(trimmed, mentionableUsers);
+        onAddComment(trimmed, mentions, replyTo ?? undefined);
+        setInputValue('');
+        setReplyTo(null);
+        setMentionQuery(null);
+    }, [inputValue, onAddComment, mentionableUsers, replyTo]);
+    const handleEdit = useCallback((commentId) => {
+        const comment = comments.find(c => c.id === commentId);
+        if (comment) {
+            setEditingId(commentId);
+            setEditValue(comment.content);
+        }
+    }, [comments]);
+    const handleEditSave = useCallback(() => {
+        if (editingId && editValue.trim() && onEditComment) {
+            onEditComment(editingId, editValue.trim());
+        }
+        setEditingId(null);
+        setEditValue('');
+    }, [editingId, editValue, onEditComment]);
+    // Keep mention index in bounds
+    useEffect(() => {
+        if (mentionIndex >= filteredMentions.length) {
+            setMentionIndex(Math.max(0, filteredMentions.length - 1));
+        }
+    }, [filteredMentions.length, mentionIndex]);
+    const rootComments = useMemo(() => comments.filter(c => !c.parentId), [comments]);
+    const replies = useMemo(() => comments.filter(c => c.parentId), [comments]);
+    const renderComment = (comment, isReply = false) => {
+        const isEditing = editingId === comment.id;
+        const isOwner = comment.author.id === currentUser.id;
+        return React.createElement('div', {
+            key: comment.id,
+            style: { ...styles.comment, ...(isReply ? styles.reply : {}) },
+            'data-comment-id': comment.id,
+        }, 
+        // Avatar
+        React.createElement('div', { style: styles.avatar }, comment.author.avatar
+            ? React.createElement('img', {
+                src: comment.author.avatar,
+                alt: comment.author.name,
+                style: styles.avatarImg,
+            })
+            : getInitials(comment.author.name)), 
+        // Body
+        React.createElement('div', { style: styles.commentBody }, 
+        // Header
+        React.createElement('div', { style: styles.commentHeader }, React.createElement('span', { style: styles.authorName }, comment.author.name), React.createElement('span', { style: styles.timestamp }, formatTimestamp(comment.createdAt)), comment.updatedAt
+            ? React.createElement('span', { style: styles.timestamp }, '(edited)')
+            : null), 
+        // Content or edit input
+        isEditing
+            ? React.createElement('div', { style: { display: 'flex', gap: '4px' } }, React.createElement('textarea', {
+                value: editValue,
+                onChange: (e) => setEditValue(e.target.value),
+                style: { ...styles.textarea, flex: 1 },
+                rows: 2,
+            }), React.createElement('button', {
+                onClick: handleEditSave,
+                style: { ...styles.submitBtn, padding: '4px 10px', fontSize: '12px' },
+            }, 'Save'), React.createElement('button', {
+                onClick: () => { setEditingId(null); setEditValue(''); },
+                style: { ...styles.actionBtn },
+            }, 'Cancel'))
+            : React.createElement('div', { style: styles.content }, renderContent(comment.content)), 
+        // Actions
+        !isEditing && React.createElement('div', { style: styles.actions }, React.createElement('button', {
+            style: styles.actionBtn,
+            onClick: () => setReplyTo(comment.id),
+        }, 'Reply'), isOwner && onEditComment && React.createElement('button', {
+            style: styles.actionBtn,
+            onClick: () => handleEdit(comment.id),
+        }, 'Edit'), isOwner && onDeleteComment && React.createElement('button', {
+            style: styles.actionBtn,
+            onClick: () => onDeleteComment(comment.id),
+        }, 'Delete'))));
+    };
+    return React.createElement('div', {
+        style: styles.thread,
+        className,
+        'data-thread-id': threadId,
+    }, 
+    // Header
+    React.createElement('div', { style: styles.header }, React.createElement('span', null, `${comments.length} comment${comments.length !== 1 ? 's' : ''}`, resolved ? ' · Resolved' : ''), onResolve && React.createElement('button', {
+        style: styles.resolveBtn,
+        onClick: () => onResolve(!resolved),
+    }, resolved ? 'Reopen' : 'Resolve')), 
+    // Comments list
+    React.createElement('div', { style: styles.commentList }, rootComments.map(comment => React.createElement(React.Fragment, { key: comment.id }, renderComment(comment), replies
+        .filter(r => r.parentId === comment.id)
+        .map(r => renderComment(r, true))))), 
+    // Reply indicator
+    replyTo && React.createElement('div', {
+        style: { padding: '4px 12px', fontSize: '12px', color: '#64748b', backgroundColor: '#f8fafc', display: 'flex', justifyContent: 'space-between' },
+    }, React.createElement('span', null, `Replying to ${comments.find(c => c.id === replyTo)?.author.name ?? 'comment'}...`), React.createElement('button', {
+        style: styles.actionBtn,
+        onClick: () => setReplyTo(null),
+    }, '✕')), 
+    // Input area
+    React.createElement('div', { style: styles.inputArea }, 
+    // Mention popup
+    mentionQuery !== null && filteredMentions.length > 0 && React.createElement('div', { style: styles.mentionPopup }, filteredMentions.map((user, idx) => React.createElement('div', {
+        key: user.id,
+        style: { ...styles.mentionItem, ...(idx === mentionIndex ? styles.mentionItemHighlighted : {}) },
+        onMouseDown: (e) => {
+            e.preventDefault();
+            insertMention(user);
+        },
+        onMouseEnter: () => setMentionIndex(idx),
+    }, user.avatar
+        ? React.createElement('img', {
+            src: user.avatar,
+            alt: user.name,
+            style: { width: '20px', height: '20px', borderRadius: '50%' },
+        })
+        : React.createElement('span', {
+            style: { ...styles.avatar, width: '20px', height: '20px', fontSize: '9px' },
+        }, getInitials(user.name)), user.name))), React.createElement('textarea', {
+        ref: inputRef,
+        value: inputValue,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        placeholder: 'Add a comment... (use @ to mention)',
+        style: styles.textarea,
+        rows: 1,
+    }), React.createElement('button', {
+        onClick: handleSubmit,
+        disabled: !inputValue.trim(),
+        style: {
+            ...styles.submitBtn,
+            ...(!inputValue.trim() ? styles.submitBtnDisabled : {}),
+        },
+    }, 'Send')));
+}

package/dist/LiveCursors.d.ts

@@ -0,0 +1,33 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import type { PresenceUser } from './usePresence';
+export interface LiveCursorsProps {
+    /** Other users' presence data */
+    users: PresenceUser[];
+    /** Container ref for relative positioning */
+    containerRef?: React.RefObject<HTMLElement>;
+    /** Whether to show user names next to cursors */
+    showNames?: boolean;
+    /** Whether to show user avatars */
+    showAvatars?: boolean;
+    /** Cursor size in pixels (default: 20) */
+    cursorSize?: number;
+    /** Fade out idle cursors */
+    fadeIdle?: boolean;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Live cursors component displaying other users' cursor positions.
+ *
+ * Renders absolutely-positioned cursor SVGs with smooth CSS transitions,
+ * user name labels, and fade-out for idle users.
+ */
+export declare function LiveCursors({ users, containerRef: _containerRef, showNames, showAvatars, cursorSize, fadeIdle, className, }: LiveCursorsProps): React.ReactElement;
+//# sourceMappingURL=LiveCursors.d.ts.map

package/dist/LiveCursors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveCursors.d.ts","sourceRoot":"","sources":["../src/LiveCursors.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,iCAAiC;IACjC,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC5C,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2DD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAY,EAAE,aAAa,EAC3B,SAAgB,EAChB,WAAmB,EACnB,UAAe,EACf,QAAe,EACf,SAAS,GACV,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CA2CvC"}