@hamzasaleemorg/convex-comments 1.0.0

package/dist/react/Comment.js

@@ -0,0 +1,259 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Comment Component
+ *
+ * Displays a single comment/message with reactions and actions.
+ */
+import { useState, useEffect } from "react";
+import { useComments } from "./CommentsProvider";
+import { ReactionPicker } from "./ReactionPicker";
+// ============================================================================
+// Helpers
+// ============================================================================
+function formatTime(timestamp) {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffMins < 1)
+        return "just now";
+    if (diffMins < 60)
+        return `${diffMins}m ago`;
+    if (diffHours < 24)
+        return `${diffHours}h ago`;
+    if (diffDays < 7)
+        return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+}
+function renderBodyWithMentionsAndLinks(body, mentions, links) {
+    // Combine mentions and links, sort by start position
+    const segments = [
+        ...mentions.map((m) => ({
+            type: "mention",
+            start: m.start,
+            end: m.end,
+            data: { userId: m.userId },
+        })),
+        ...links.map((l) => ({
+            type: "link",
+            start: l.start,
+            end: l.end,
+            data: { url: l.url },
+        })),
+    ].sort((a, b) => a.start - b.start);
+    if (segments.length === 0) {
+        return body;
+    }
+    const parts = [];
+    let lastIndex = 0;
+    segments.forEach((segment, i) => {
+        // Add text before this segment
+        if (segment.start > lastIndex) {
+            parts.push(body.slice(lastIndex, segment.start));
+        }
+        // Add the highlighted segment
+        const segmentText = body.slice(segment.start, segment.end);
+        if (segment.type === "mention") {
+            parts.push(_jsx("span", { style: {
+                    color: "#3b82f6",
+                    fontWeight: 500,
+                    backgroundColor: "#eff6ff",
+                    padding: "0 2px",
+                    borderRadius: "2px",
+                }, children: segmentText }, `mention-${i}`));
+        }
+        else {
+            parts.push(_jsx("a", { href: segment.data.url, target: "_blank", rel: "noopener noreferrer", style: {
+                    color: "#3b82f6",
+                    textDecoration: "underline",
+                }, children: segmentText }, `link-${i}`));
+        }
+        lastIndex = segment.end;
+    });
+    // Add remaining text
+    if (lastIndex < body.length) {
+        parts.push(body.slice(lastIndex));
+    }
+    return parts;
+}
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * Component to display a single comment with reactions and actions.
+ *
+ * Usage:
+ * ```tsx
+ * <Comment
+ *   comment={messageData}
+ *   mine={true}
+ *   onToggleReaction={(emoji) => toggleReaction({ messageId, emoji })}
+ *   onEdit={(newBody) => editMessage({ messageId, body: newBody })}
+ *   onDelete={() => deleteMessage({ messageId })}
+ * />
+ * ```
+ */
+export function Comment({ comment, mine = false, onToggleReaction, onEdit, onDelete, className = "", }) {
+    const { resolveUser, canModerate, styles } = useComments();
+    const [isEditing, setIsEditing] = useState(false);
+    const [editBody, setEditBody] = useState(comment.message.body);
+    const [showReactionPicker, setShowReactionPicker] = useState(false);
+    const [showActions, setShowActions] = useState(false);
+    const [authorInfo, setAuthorInfo] = useState(null);
+    // Resolve author info
+    useEffect(() => {
+        if (resolveUser) {
+            Promise.resolve(resolveUser(comment.message.authorId)).then(setAuthorInfo);
+        }
+    }, [comment.message.authorId, resolveUser]);
+    const handleSaveEdit = () => {
+        if (editBody.trim() && editBody !== comment.message.body) {
+            onEdit?.(editBody.trim());
+        }
+        setIsEditing(false);
+    };
+    const handleCancelEdit = () => {
+        setEditBody(comment.message.body);
+        setIsEditing(false);
+    };
+    const canEdit = (mine || canModerate) && onEdit && !comment.message.isDeleted;
+    const canDelete = (mine || canModerate) && onDelete && !comment.message.isDeleted;
+    // Deleted message
+    if (comment.message.isDeleted) {
+        return (_jsx("div", { className: `comment comment-deleted ${className}`, style: {
+                padding: "12px",
+                color: "#9ca3af",
+                fontStyle: "italic",
+                fontSize: "13px",
+            }, children: "This message was deleted." }));
+    }
+    return (_jsxs("div", { className: `comment ${mine ? "comment-mine" : ""} ${className}`, onMouseEnter: () => setShowActions(true), onMouseLeave: () => {
+            setShowActions(false);
+            setShowReactionPicker(false);
+        }, style: {
+            position: "relative",
+            padding: "12px",
+            backgroundColor: mine ? "#eff6ff" : "#f9fafb",
+            borderRadius: styles?.borderRadius ?? "8px",
+        }, children: [_jsxs("div", { style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginBottom: "8px",
+                }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [authorInfo?.avatar ? (_jsx("img", { src: authorInfo.avatar, alt: "", style: {
+                                    width: "24px",
+                                    height: "24px",
+                                    borderRadius: "50%",
+                                } })) : (_jsx("div", { style: {
+                                    width: "24px",
+                                    height: "24px",
+                                    borderRadius: "50%",
+                                    backgroundColor: "#d1d5db",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    fontSize: "12px",
+                                    fontWeight: 600,
+                                    color: "#4b5563",
+                                }, children: (authorInfo?.name ?? comment.message.authorId).charAt(0).toUpperCase() })), _jsx("span", { style: { fontWeight: 600, fontSize: "13px", color: "#111827" }, children: authorInfo?.name ?? comment.message.authorId }), mine && (_jsx("span", { style: {
+                                    fontSize: "11px",
+                                    color: "#6b7280",
+                                    backgroundColor: "#e5e7eb",
+                                    padding: "1px 6px",
+                                    borderRadius: "4px",
+                                }, children: "You" }))] }), _jsxs("span", { style: { fontSize: "12px", color: "#6b7280" }, children: [formatTime(comment.message.createdAt), comment.message.isEdited && " (edited)"] })] }), isEditing ? (_jsxs("div", { style: { marginBottom: "8px" }, children: [_jsx("textarea", { value: editBody, onChange: (e) => setEditBody(e.target.value), style: {
+                            width: "100%",
+                            padding: "8px",
+                            border: "1px solid #d1d5db",
+                            borderRadius: "6px",
+                            fontSize: "14px",
+                            resize: "vertical",
+                            minHeight: "60px",
+                        }, autoFocus: true }), _jsxs("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [_jsx("button", { onClick: handleSaveEdit, style: {
+                                    padding: "4px 12px",
+                                    fontSize: "13px",
+                                    fontWeight: 500,
+                                    border: "none",
+                                    borderRadius: "4px",
+                                    backgroundColor: styles?.accentColor ?? "#3b82f6",
+                                    color: "white",
+                                    cursor: "pointer",
+                                }, children: "Save" }), _jsx("button", { onClick: handleCancelEdit, style: {
+                                    padding: "4px 12px",
+                                    fontSize: "13px",
+                                    border: "1px solid #d1d5db",
+                                    borderRadius: "4px",
+                                    background: "white",
+                                    cursor: "pointer",
+                                }, children: "Cancel" })] })] })) : (_jsx("div", { style: { fontSize: "14px", color: "#111827", lineHeight: 1.5 }, children: renderBodyWithMentionsAndLinks(comment.message.body, comment.message.mentions, comment.message.links) })), comment.message.attachments.length > 0 && (_jsx("div", { style: { marginTop: "8px", display: "flex", flexWrap: "wrap", gap: "8px" }, children: comment.message.attachments.map((attachment, i) => (_jsxs("a", { href: attachment.url, target: "_blank", rel: "noopener noreferrer", style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "4px",
+                        padding: "4px 8px",
+                        backgroundColor: "#e5e7eb",
+                        borderRadius: "4px",
+                        fontSize: "12px",
+                        color: "#374151",
+                        textDecoration: "none",
+                    }, children: [attachment.type === "image" ? "🖼️" : "📎", attachment.name ?? "Attachment"] }, i))) })), comment.reactions.length > 0 && (_jsx("div", { style: {
+                    marginTop: "8px",
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: "6px",
+                }, children: comment.reactions.map((reaction) => (_jsxs("button", { onClick: () => onToggleReaction?.(reaction.emoji), style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "4px",
+                        padding: "2px 8px",
+                        border: reaction.includesMe
+                            ? `1px solid ${styles?.accentColor ?? "#3b82f6"}`
+                            : "1px solid #d1d5db",
+                        borderRadius: "12px",
+                        backgroundColor: reaction.includesMe ? "#eff6ff" : "white",
+                        fontSize: "13px",
+                        cursor: onToggleReaction ? "pointer" : "default",
+                    }, children: [_jsx("span", { children: reaction.emoji }), _jsx("span", { style: { color: "#6b7280" }, children: reaction.count })] }, reaction.emoji))) })), showActions && !isEditing && (_jsxs("div", { style: {
+                    position: "absolute",
+                    top: "8px",
+                    right: "8px",
+                    display: "flex",
+                    gap: "4px",
+                    backgroundColor: "white",
+                    padding: "4px",
+                    borderRadius: "6px",
+                    boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+                }, children: [onToggleReaction && (_jsx("button", { onClick: () => setShowReactionPicker(!showReactionPicker), style: {
+                            padding: "4px 6px",
+                            border: "none",
+                            background: "transparent",
+                            cursor: "pointer",
+                            fontSize: "14px",
+                        }, title: "Add reaction", children: "\uD83D\uDE00" })), canEdit && (_jsx("button", { onClick: () => setIsEditing(true), style: {
+                            padding: "4px 6px",
+                            border: "none",
+                            background: "transparent",
+                            cursor: "pointer",
+                            fontSize: "12px",
+                        }, title: "Edit", children: "\u270F\uFE0F" })), canDelete && (_jsx("button", { onClick: () => {
+                            if (window.confirm("Delete this message?")) {
+                                onDelete?.();
+                            }
+                        }, style: {
+                            padding: "4px 6px",
+                            border: "none",
+                            background: "transparent",
+                            cursor: "pointer",
+                            fontSize: "12px",
+                        }, title: "Delete", children: "\uD83D\uDDD1\uFE0F" }))] })), showReactionPicker && onToggleReaction && (_jsx("div", { style: {
+                    position: "absolute",
+                    top: "40px",
+                    right: "8px",
+                    zIndex: 10,
+                }, children: _jsx(ReactionPicker, { onSelect: (emoji) => {
+                        onToggleReaction(emoji);
+                        setShowReactionPicker(false);
+                    }, onClose: () => setShowReactionPicker(false) }) }))] }));
+}
+//# sourceMappingURL=Comment.js.map

package/dist/react/Comment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Comment.js","sourceRoot":"","sources":["../../src/react/Comment.tsx"],"names":[],"mappings":"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"}

package/dist/react/Comments.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Comments Component
+ *
+ * Top-level component that displays all threads in a zone.
+ */
+import { type ReactNode } from "react";
+export interface ThreadData {
+    thread: {
+        _id: string;
+        zoneId: string;
+        resolved: boolean;
+        resolvedBy?: string;
+        resolvedAt?: number;
+        createdAt: number;
+        lastActivityAt: number;
+        position?: {
+            x: number;
+            y: number;
+            anchor?: string;
+        };
+        metadata?: unknown;
+    };
+    firstMessage: {
+        _id: string;
+        body: string;
+        authorId: string;
+        createdAt: number;
+    } | null;
+    messageCount: number;
+}
+export interface CommentsProps {
+    /** Threads data from getThreads query */
+    threads: ThreadData[];
+    /** Whether there are more threads to load */
+    hasMore?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Callback when load more is clicked */
+    onLoadMore?: () => void;
+    /** Callback when a thread is clicked */
+    onThreadClick?: (threadId: string) => void;
+    /** Callback when new thread button is clicked */
+    onNewThread?: () => void;
+    /** Callback when thread is resolved */
+    onResolveThread?: (threadId: string) => void;
+    /** Callback when thread is unresolve */
+    onUnresolveThread?: (threadId: string) => void;
+    /** Whether to show resolved threads */
+    showResolved?: boolean;
+    /** Custom thread renderer */
+    renderThread?: (thread: ThreadData) => ReactNode;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** CSS class name */
+    className?: string;
+}
+/**
+ * Main comments component that displays all threads in a zone.
+ *
+ * Usage:
+ * ```tsx
+ * const { threads, hasMore } = useQuery(api.comments.getThreads, { zoneId });
+ *
+ * <Comments
+ *   threads={threads}
+ *   hasMore={hasMore}
+ *   onLoadMore={loadMore}
+ *   onThreadClick={(id) => setSelectedThread(id)}
+ *   onNewThread={() => createThread()}
+ * />
+ * ```
+ */
+export declare function Comments({ threads, hasMore, isLoading, onLoadMore, onThreadClick, onNewThread, onResolveThread, onUnresolveThread, showResolved, renderThread, emptyMessage, className, }: CommentsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Comments.d.ts.map

package/dist/react/Comments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Comments.d.ts","sourceRoot":"","sources":["../../src/react/Comments.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,UAAU;IACvB,MAAM,EAAE;QACJ,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,OAAO,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,MAAM,CAAC;QACvB,QAAQ,CAAC,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;IACF,YAAY,EAAE;QACV,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACrB,GAAG,IAAI,CAAC;IACT,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC1B,yCAAyC;IACzC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,wCAAwC;IACxC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,uCAAuC;IACvC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,uCAAuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,SAAS,CAAC;IACjD,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,CAAC,EACrB,OAAO,EACP,OAAe,EACf,SAAiB,EACjB,UAAU,EACV,aAAa,EACb,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,YAAmB,EACnB,YAAY,EACZ,YAAuD,EACvD,SAAc,GACjB,EAAE,aAAa,2CAqLf"}

package/dist/react/Comments.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Comments Component
+ *
+ * Top-level component that displays all threads in a zone.
+ */
+import {} from "react";
+import { useComments } from "./CommentsProvider";
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * Main comments component that displays all threads in a zone.
+ *
+ * Usage:
+ * ```tsx
+ * const { threads, hasMore } = useQuery(api.comments.getThreads, { zoneId });
+ *
+ * <Comments
+ *   threads={threads}
+ *   hasMore={hasMore}
+ *   onLoadMore={loadMore}
+ *   onThreadClick={(id) => setSelectedThread(id)}
+ *   onNewThread={() => createThread()}
+ * />
+ * ```
+ */
+export function Comments({ threads, hasMore = false, isLoading = false, onLoadMore, onThreadClick, onNewThread, onResolveThread, onUnresolveThread, showResolved = true, renderThread, emptyMessage = "No comments yet. Start a conversation!", className = "", }) {
+    const { userId, styles } = useComments();
+    // Filter threads based on showResolved
+    const visibleThreads = showResolved
+        ? threads
+        : threads.filter((t) => !t.thread.resolved);
+    // Default thread renderer
+    const defaultRenderThread = (data) => {
+        const { thread, firstMessage, messageCount } = data;
+        const isResolved = thread.resolved;
+        return (_jsx("div", { className: `comments-thread-preview ${isResolved ? "resolved" : ""}`, onClick: () => onThreadClick?.(thread._id), style: {
+                padding: "12px 16px",
+                borderBottom: "1px solid #e5e7eb",
+                cursor: "pointer",
+                opacity: isResolved ? 0.6 : 1,
+                backgroundColor: isResolved ? "#f9fafb" : "white",
+            }, children: _jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: firstMessage ? (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                                        fontSize: "14px",
+                                        color: "#111827",
+                                        whiteSpace: "nowrap",
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                    }, children: firstMessage.body }), _jsxs("div", { style: { fontSize: "12px", color: "#6b7280", marginTop: "4px" }, children: [messageCount, " ", messageCount === 1 ? "message" : "messages", isResolved && " • Resolved"] })] })) : (_jsx("div", { style: { fontSize: "14px", color: "#6b7280", fontStyle: "italic" }, children: "Empty thread" })) }), isResolved && onUnresolveThread && (_jsx("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            onUnresolveThread(thread._id);
+                        }, style: {
+                            padding: "4px 8px",
+                            fontSize: "12px",
+                            border: "1px solid #d1d5db",
+                            borderRadius: "4px",
+                            background: "white",
+                            cursor: "pointer",
+                        }, children: "Reopen" })), !isResolved && onResolveThread && (_jsx("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            onResolveThread(thread._id);
+                        }, style: {
+                            padding: "4px 8px",
+                            fontSize: "12px",
+                            border: "1px solid #d1d5db",
+                            borderRadius: "4px",
+                            background: "white",
+                            cursor: "pointer",
+                        }, children: "Resolve" }))] }) }, thread._id));
+    };
+    return (_jsxs("div", { className: `comments-container ${className}`, style: {
+            fontFamily: styles?.fontFamily ?? "system-ui, -apple-system, sans-serif",
+            border: "1px solid #e5e7eb",
+            borderRadius: styles?.borderRadius ?? "8px",
+            overflow: "hidden",
+        }, children: [_jsxs("div", { style: {
+                    padding: "12px 16px",
+                    borderBottom: "1px solid #e5e7eb",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    backgroundColor: "#f9fafb",
+                }, children: [_jsxs("span", { style: { fontWeight: 600, fontSize: "14px" }, children: ["Comments (", threads.length, ")"] }), onNewThread && userId && (_jsx("button", { onClick: onNewThread, style: {
+                            padding: "6px 12px",
+                            fontSize: "13px",
+                            fontWeight: 500,
+                            border: "none",
+                            borderRadius: "6px",
+                            backgroundColor: styles?.accentColor ?? "#3b82f6",
+                            color: "white",
+                            cursor: "pointer",
+                        }, children: "+ New Thread" }))] }), _jsxs("div", { style: { maxHeight: "400px", overflowY: "auto" }, children: [visibleThreads.length === 0 ? (_jsx("div", { style: {
+                            padding: "40px 16px",
+                            textAlign: "center",
+                            color: "#6b7280",
+                            fontSize: "14px",
+                        }, children: emptyMessage })) : (visibleThreads.map((data) => renderThread ? renderThread(data) : defaultRenderThread(data))), hasMore && (_jsx("div", { style: { padding: "12px 16px", textAlign: "center" }, children: _jsx("button", { onClick: onLoadMore, disabled: isLoading, style: {
+                                padding: "8px 16px",
+                                fontSize: "13px",
+                                border: "1px solid #d1d5db",
+                                borderRadius: "6px",
+                                background: "white",
+                                cursor: isLoading ? "not-allowed" : "pointer",
+                                opacity: isLoading ? 0.6 : 1,
+                            }, children: isLoading ? "Loading..." : "Load More" }) }))] })] }));
+}
+//# sourceMappingURL=Comments.js.map

package/dist/react/Comments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Comments.js","sourceRoot":"","sources":["../../src/react/Comments.tsx"],"names":[],"mappings":"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"}

package/dist/react/CommentsProvider.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Comments Context Provider
+ *
+ * Provides the Comments API instance to all child components.
+ */
+import { type ReactNode } from "react";
+export interface CommentsStyles {
+    /** Primary accent color (buttons, links, highlights) */
+    accentColor?: string;
+    /** Background color for the comments container */
+    backgroundColor?: string;
+    /** Text color */
+    textColor?: string;
+    /** Secondary/muted text color */
+    textColorMuted?: string;
+    /** Border color */
+    borderColor?: string;
+    /** Border radius for cards and buttons */
+    borderRadius?: string;
+    /** Font family */
+    fontFamily?: string;
+    /** Base font size */
+    fontSize?: string;
+}
+export interface CommentsContextValue {
+    /** Current user ID */
+    userId: string | null;
+    /** Function to resolve user display info */
+    resolveUser?: (userId: string) => Promise<{
+        name: string;
+        avatar?: string;
+    }> | {
+        name: string;
+        avatar?: string;
+    };
+    /** Available reaction emojis */
+    reactionChoices: string[];
+    /** Whether the current user can edit/delete messages */
+    canModerate?: boolean;
+    /** Custom styles */
+    styles?: CommentsStyles;
+    /** CSS variables for theming */
+    cssVars: Record<string, string>;
+}
+export interface CommentsProviderProps {
+    /** Current user ID (null if not authenticated) */
+    userId: string | null;
+    /** Function to resolve user info for display */
+    resolveUser?: (userId: string) => Promise<{
+        name: string;
+        avatar?: string;
+    }> | {
+        name: string;
+        avatar?: string;
+    };
+    /** Available reaction emojis (defaults to common emojis) */
+    reactionChoices?: string[];
+    /** Whether the current user has moderator privileges */
+    canModerate?: boolean;
+    /**
+     * Custom styling options. Can also use CSS variables:
+     * --comments-accent-color, --comments-bg-color, etc.
+     */
+    styles?: CommentsStyles;
+    /** Optional class name for the wrapper */
+    className?: string;
+    /** Child components */
+    children: ReactNode;
+}
+/**
+ * Provider component that supplies comments configuration to all child components.
+ *
+ * Usage:
+ * ```tsx
+ * <CommentsProvider
+ *   userId={currentUserId}
+ *   resolveUser={async (id) => ({ name: users[id].name, avatar: users[id].avatar })}
+ *   reactionChoices={["👍", "❤️", "😄", "🎉", "😮", "😢"]}
+ *   styles={{
+ *     accentColor: "#8b5cf6",
+ *     borderRadius: "12px",
+ *   }}
+ * >
+ *   <Comments threads={threads} />
+ * </CommentsProvider>
+ * ```
+ *
+ * CSS Variables (can be set in your CSS):
+ * - --comments-accent-color
+ * - --comments-bg-color
+ * - --comments-text-color
+ * - --comments-text-color-muted
+ * - --comments-border-color
+ * - --comments-border-radius
+ * - --comments-font-family
+ * - --comments-font-size
+ */
+export declare function CommentsProvider({ userId, resolveUser, reactionChoices, canModerate, styles, className, children, }: CommentsProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the comments context.
+ * Must be used within a CommentsProvider.
+ */
+export declare function useComments(): CommentsContextValue;
+//# sourceMappingURL=CommentsProvider.d.ts.map

package/dist/react/CommentsProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentsProvider.d.ts","sourceRoot":"","sources":["../../src/react/CommentsProvider.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAsC,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAM/F,MAAM,WAAW,cAAc;IAC3B,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACjC,sBAAsB;IACtB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjH,gCAAgC;IAChC,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB;IACpB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,gCAAgC;IAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AA2BD,MAAM,WAAW,qBAAqB;IAClC,kDAAkD;IAClD,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjH,4DAA4D;IAC5D,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,WAAW,EACX,eAAkE,EAClE,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,QAAQ,GACX,EAAE,qBAAqB,2CAqDvB;AAMD;;;GAGG;AACH,wBAAgB,WAAW,IAAI,oBAAoB,CAMlD"}