@etus/ui 0.1.0

package/src/components/workflow/CommentSystem/CommentSystem.tsx

@@ -0,0 +1,1014 @@
+import type {
+  Comment,
+  CommentAttachment,
+  CommentDeletePayload,
+  CommentEditPayload,
+  CommentInputProps,
+  CommentItemProps,
+  CommentMentionPayload,
+  CommentReaction,
+  CommentReactPayload,
+  CommentSubmitPayload,
+  CommentSystemProps,
+  CommentUser,
+  Reaction,
+} from "./CommentSystem.types"
+import type { KeyboardEvent, ReactNode } from "react"
+
+import {
+  CornerDownRight,
+  Edit2,
+  MessageCircle,
+  MoreHorizontal,
+  Paperclip,
+  Send,
+  Smile,
+  Trash2,
+  X,
+} from "lucide-react"
+import { useCallback, useId, useMemo, useRef, useState } from "react"
+
+import { cn } from "../../../lib/utils"
+import { Textarea } from "../../forms/Textarea"
+import { Avatar, AvatarFallback, AvatarImage } from "../../primitives/Avatar"
+import { Button } from "../../primitives/Button"
+import { defaultReactions } from "./CommentSystem.types"
+import {
+  commentActionsVariants,
+  commentContentVariants,
+  commentEmptyStateVariants,
+  commentHeaderVariants,
+  commentInputContainerVariants,
+  commentItemVariants,
+  commentMentionVariants,
+  commentReactionVariants,
+  commentRepliesVariants,
+  commentSystemVariants,
+  commentThreadLineVariants,
+  commentTimelineMarkerVariants,
+  mentionSuggestionItemVariants,
+  mentionSuggestionsVariants,
+} from "./CommentSystem.variants"
+
+/**
+ * Get initials from a name
+ */
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2)
+}
+
+/**
+ * Format relative time
+ */
+function formatRelativeTime(date: Date): string {
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffSecs = Math.floor(diffMs / 1000)
+  const diffMins = Math.floor(diffSecs / 60)
+  const diffHours = Math.floor(diffMins / 60)
+  const diffDays = Math.floor(diffHours / 24)
+
+  if (diffSecs < 60) return "agora"
+  if (diffMins < 60) return `${String(diffMins)}m atrás`
+  if (diffHours < 24) return `${String(diffHours)}h atrás`
+  if (diffDays < 7) return `${String(diffDays)}d atrás`
+
+  return date.toLocaleDateString()
+}
+
+/**
+ * Parse content and highlight mentions
+ */
+function parseContent(
+  content: string,
+  mentionableUsers?: CommentUser[],
+  onMentionClick?: (userId: string) => void
+): ReactNode {
+  if (!content) return null
+
+  // Pattern to match @mentions
+  const mentionPattern = /@(\w+)/g
+  const parts: ReactNode[] = []
+  let lastIndex = 0
+  let match
+
+  while ((match = mentionPattern.exec(content)) !== null) {
+    // Add text before the mention
+    if (match.index > lastIndex) {
+      parts.push(content.slice(lastIndex, match.index))
+    }
+
+    const mentionName = match[1]
+    const user = mentionableUsers?.find(
+      (u) => u.name.toLowerCase().replaceAll(/\s+/g, "") === mentionName?.toLowerCase()
+    )
+
+    parts.push(
+      <span
+        key={match.index}
+        className={commentMentionVariants()}
+        role="button"
+        tabIndex={0}
+        onClick={() => { if (user) { onMentionClick?.(user.id); } }}
+        onKeyDown={(e) => {
+          if ((e.key === "Enter" || e.key === " ") && user) {
+            onMentionClick?.(user.id);
+          }
+        }}
+      >
+        @{mentionName}
+      </span>
+    )
+
+    lastIndex = match.index + match[0].length
+  }
+
+  // Add remaining text
+  if (lastIndex < content.length) {
+    parts.push(content.slice(lastIndex))
+  }
+
+  return parts.length > 0 ? parts : content
+}
+
+/**
+ * CommentInput component for writing new comments or editing
+ */
+function CommentInput({
+  placeholder = "Escreva um comentário...",
+  allowMentions = true,
+  allowAttachments = false,
+  mentionableUsers = [],
+  parentId,
+  initialContent = "",
+  submitLabel = "Enviar",
+  cancelLabel = "Cancelar",
+  isEditing = false,
+  isSubmitting = false,
+  showCancel = false,
+  onSubmit,
+  onCancel,
+  onMention,
+  className,
+  ...props
+}: CommentInputProps) {
+  const inputId = useId()
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const [content, setContent] = useState(initialContent)
+  const [isFocused, setIsFocused] = useState(false)
+  const [showMentions, setShowMentions] = useState(false)
+  const [mentionSearch, setMentionSearch] = useState("")
+  const [selectedMentionIndex, setSelectedMentionIndex] = useState(0)
+
+  const filteredUsers = useMemo(() => {
+    if (!mentionSearch) return mentionableUsers.slice(0, 5)
+    return mentionableUsers
+      .filter((u) => u.name.toLowerCase().includes(mentionSearch.toLowerCase()))
+      .slice(0, 5)
+  }, [mentionableUsers, mentionSearch])
+
+  const handleSubmit = useCallback(() => {
+    if (!content.trim() || isSubmitting) return
+
+    // Extract mentions from content
+    const mentionPattern = /@(\w+)/g
+    const mentions: string[] = []
+    let match
+
+    while ((match = mentionPattern.exec(content)) !== null) {
+      const matchName = match[1] ?? ""
+      const user = mentionableUsers.find(
+        (u) => u.name.toLowerCase().replaceAll(/\s+/g, "") === matchName.toLowerCase()
+      )
+      if (user && !mentions.includes(user.id)) {
+        mentions.push(user.id)
+      }
+    }
+
+    onSubmit?.({
+      content: content.trim(),
+      parentId,
+      mentions,
+    })
+
+    if (!isEditing) {
+      setContent("")
+    }
+  }, [content, isSubmitting, isEditing, parentId, mentionableUsers, onSubmit])
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (showMentions) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault()
+        setSelectedMentionIndex((prev) =>
+          Math.min(prev + 1, filteredUsers.length - 1)
+        )
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault()
+        setSelectedMentionIndex((prev) => Math.max(prev - 1, 0))
+      } else if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault()
+        const selectedUser = filteredUsers[selectedMentionIndex]
+        if (selectedUser) {
+          insertMention(selectedUser)
+        }
+      } else if (e.key === "Escape") {
+        setShowMentions(false)
+      }
+    } else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault()
+      handleSubmit()
+    }
+  }
+
+  const handleChange = (value: string) => {
+    setContent(value)
+
+    if (allowMentions) {
+      // Check for @ trigger
+      const cursorPos = textareaRef.current?.selectionStart ?? 0
+      const textBeforeCursor = value.slice(0, cursorPos)
+      const atMatch = /@(\w*)$/.exec(textBeforeCursor)
+
+      if (atMatch) {
+        setShowMentions(true)
+        setMentionSearch(atMatch[1] ?? "")
+        setSelectedMentionIndex(0)
+      } else {
+        setShowMentions(false)
+        setMentionSearch("")
+      }
+    }
+  }
+
+  const insertMention = (user: CommentUser) => {
+    const cursorPos = textareaRef.current?.selectionStart ?? 0
+    const textBeforeCursor = content.slice(0, cursorPos)
+    const textAfterCursor = content.slice(cursorPos)
+    const atMatch = /@(\w*)$/.exec(textBeforeCursor)
+
+    if (atMatch) {
+      const newTextBefore = textBeforeCursor.slice(0, atMatch.index)
+      const mention = `@${user.name.replaceAll(/\s+/g, "")} `
+      setContent(newTextBefore + mention + textAfterCursor)
+      setShowMentions(false)
+      setMentionSearch("")
+      onMention?.({ userId: user.id })
+
+      // Focus back on textarea
+      setTimeout(() => {
+        textareaRef.current?.focus()
+        const newCursorPos = newTextBefore.length + mention.length
+        textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos)
+      }, 0)
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        commentInputContainerVariants({ isFocused, isSubmitting }),
+        className
+      )}
+      data-slot="comment-input"
+      {...props}
+    >
+      <div className="relative">
+        <Textarea
+          ref={textareaRef}
+          aria-describedby={`${inputId}-help`}
+          aria-label={isEditing ? "Editar comentário" : "Novo comentário"}
+          className="min-h-[80px] resize-none border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+          disabled={isSubmitting}
+          id={inputId}
+          placeholder={placeholder}
+          value={content}
+          onBlur={() => { setIsFocused(false); }}
+          onChange={(e) => { handleChange(e.target.value); }}
+          onFocus={() => { setIsFocused(true); }}
+          onKeyDown={handleKeyDown}
+        />
+
+        {/* Mention suggestions */}
+        {showMentions && filteredUsers.length > 0 && (
+          <div
+            className={mentionSuggestionsVariants({ position: "below" })}
+            data-slot="comment-mention-suggestions"
+            role="listbox"
+          >
+            {filteredUsers.map((user, index) => (
+              <button
+                key={user.id}
+                className={mentionSuggestionItemVariants({
+                  isSelected: index === selectedMentionIndex,
+                })}
+                aria-selected={index === selectedMentionIndex}
+                role="option"
+                type="button"
+                onClick={() => { insertMention(user); }}
+              >
+                <Avatar size="xs">
+                  {user.avatar ? (
+                    <AvatarImage alt={user.name} src={user.avatar} />
+                  ) : null}
+                  <AvatarFallback>{getInitials(user.name)}</AvatarFallback>
+                </Avatar>
+                <span>{user.name}</span>
+                {user.role && (
+                  <span className="text-muted-foreground text-xs">
+                    {user.role}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between border-t p-2">
+        <div className="flex items-center gap-1">
+          {allowMentions && (
+            <Button
+              aria-label="Mencionar alguém"
+              disabled={isSubmitting}
+              size="sm"
+              type="button"
+              variant="ghost"
+              onClick={() => {
+                const newContent = content + "@"
+                setContent(newContent)
+                handleChange(newContent)
+                textareaRef.current?.focus()
+              }}
+            >
+              <span className="text-sm font-medium">@</span>
+            </Button>
+          )}
+          {allowAttachments && (
+            <Button
+              aria-label="Anexar arquivo"
+              disabled={isSubmitting}
+              size="sm"
+              type="button"
+              variant="ghost"
+            >
+              <Paperclip className="h-4 w-4" />
+            </Button>
+          )}
+          <Button
+            aria-label="Adicionar emoji"
+            disabled={isSubmitting}
+            size="sm"
+            type="button"
+            variant="ghost"
+          >
+            <Smile className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {showCancel && (
+            <Button
+              disabled={isSubmitting}
+              size="sm"
+              type="button"
+              variant="ghost"
+              onClick={onCancel}
+            >
+              {cancelLabel}
+            </Button>
+          )}
+          <Button
+            disabled={!content.trim() || isSubmitting}
+            size="sm"
+            type="button"
+            onClick={handleSubmit}
+          >
+            <Send className="mr-1 h-4 w-4" />
+            {submitLabel}
+          </Button>
+        </div>
+      </div>
+
+      <span className="sr-only" id={`${inputId}-help`}>
+        Pressione Ctrl+Enter para enviar. Use @ para mencionar alguém.
+      </span>
+    </div>
+  )
+}
+
+/**
+ * CommentReactions component displays and manages reactions
+ */
+function CommentReactions({
+  commentId,
+  reactions = [],
+  availableReactions = defaultReactions,
+  readOnly = false,
+  onReact,
+}: {
+  availableReactions?: Reaction[]
+  commentId: string
+  onReact?: (payload: CommentReactPayload) => void
+  reactions?: { count: number; emoji: string; hasReacted?: boolean; users: string[] }[]
+  readOnly?: boolean
+}) {
+  const [showPicker, setShowPicker] = useState(false)
+
+  const handleReact = (emoji: string) => {
+    onReact?.({ commentId, reaction: emoji })
+    setShowPicker(false)
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-1" data-slot="comment-reactions">
+      {reactions.map((reaction) => (
+        <button
+          key={reaction.emoji}
+          className={commentReactionVariants({
+            hasReacted: reaction.hasReacted,
+          })}
+          disabled={readOnly}
+          title={`${String(reaction.count)} ${reaction.count === 1 ? "pessoa" : "pessoas"}`}
+          type="button"
+          onClick={() => { handleReact(reaction.emoji); }}
+        >
+          <span>{reaction.emoji}</span>
+          <span>{reaction.count}</span>
+        </button>
+      ))}
+
+      {!readOnly && (
+        <div className="relative">
+          <button
+            className="inline-flex h-6 w-6 items-center justify-center rounded-full border border-dashed border-muted-foreground/30 text-muted-foreground transition-colors hover:border-muted-foreground hover:text-foreground"
+            title="Adicionar reação"
+            type="button"
+            onClick={() => { setShowPicker(!showPicker); }}
+          >
+            <Smile className="h-3 w-3" />
+          </button>
+
+          {showPicker && (
+            <div
+              className="absolute bottom-full left-0 z-50 mb-1 flex gap-1 rounded-lg border bg-popover p-2 shadow-lg"
+              role="listbox"
+            >
+              {availableReactions.map((reaction) => (
+                <button
+                  key={reaction.shortcode}
+                  className="rounded p-1 text-lg transition-colors hover:bg-accent"
+                  role="option"
+                  title={reaction.label}
+                  type="button"
+                  onClick={() => { handleReact(reaction.emoji); }}
+                >
+                  {reaction.emoji}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * CommentItem component renders a single comment
+ */
+function CommentItem({
+  comment,
+  currentUser,
+  depth = 0,
+  maxDepth = 3,
+  layout = "list",
+  allowReplies = true,
+  allowReactions = true,
+  allowEditing = true,
+  allowDeleting = true,
+  allowMentions = true,
+  reactions = defaultReactions,
+  mentionableUsers = [],
+  readOnly = false,
+  onReply,
+  onEdit,
+  onDelete,
+  onReact,
+  className,
+  ...props
+}: CommentItemProps) {
+  const commentId = useId()
+  const [isReplying, setIsReplying] = useState(false)
+  const [isEditing, setIsEditing] = useState(false)
+  const [showActions, setShowActions] = useState(false)
+
+  const isOwn = currentUser?.id === comment.author.id
+  const canReply = allowReplies && depth < maxDepth && !readOnly
+  const canEdit = allowEditing && isOwn && !readOnly && !comment.isDeleted
+  const canDelete = allowDeleting && isOwn && !readOnly && !comment.isDeleted
+
+  const handleReply = (payload: CommentSubmitPayload) => {
+    onReply?.({ ...payload, parentId: comment.id })
+    setIsReplying(false)
+  }
+
+  const handleEdit = (payload: CommentSubmitPayload) => {
+    onEdit?.({ id: comment.id, content: payload.content })
+    setIsEditing(false)
+  }
+
+  const handleDelete = () => {
+    if (window.confirm("Tem certeza que deseja excluir este comentário?")) {
+      onDelete?.({ id: comment.id })
+    }
+  }
+
+  if (comment.isDeleted) {
+    return (
+      <article
+        data-deleted
+        aria-label="Comentário excluído"
+        className={cn(commentItemVariants({ layout, isDeleted: true }), className)}
+        data-slot="comment-item"
+        {...props}
+      >
+        <p className="text-sm italic text-muted-foreground">
+          Este comentário foi excluído.
+        </p>
+      </article>
+    )
+  }
+
+  return (
+    <article
+      className={cn(
+        commentItemVariants({ layout, isOwn, isPinned: comment.isPinned }),
+        className
+      )}
+      aria-describedby={`${commentId}-content`}
+      aria-label={`Comentário de ${comment.author.name}`}
+      data-slot="comment-item"
+      {...props}
+    >
+      {/* Timeline marker */}
+      {layout === "timeline" && (
+        <div
+          className={commentTimelineMarkerVariants({ status: "default" })}
+          data-slot="comment-timeline-marker"
+        />
+      )}
+
+      {/* Header */}
+      <div className={commentHeaderVariants({ layout })} data-slot="comment-header">
+        {layout !== "chat" && (
+          <Avatar size="sm">
+            {comment.author.avatar ? (
+              <AvatarImage alt={comment.author.name} src={comment.author.avatar} />
+            ) : null}
+            <AvatarFallback>{getInitials(comment.author.name)}</AvatarFallback>
+          </Avatar>
+        )}
+
+        <div className="flex flex-1 items-center gap-2">
+          <span className="text-sm font-medium text-foreground">
+            {comment.author.name}
+          </span>
+          <span className="text-xs text-muted-foreground">
+            {formatRelativeTime(comment.createdAt)}
+          </span>
+          {comment.isEdited && (
+            <span className="text-xs text-muted-foreground">(editado)</span>
+          )}
+          {comment.isPinned && (
+            <span className="text-xs font-medium text-primary">Fixado</span>
+          )}
+        </div>
+
+        {(canEdit || canDelete) && (
+          <div className="relative">
+            <Button
+              aria-expanded={showActions}
+              aria-haspopup="true"
+              aria-label="Mais ações"
+              size="sm"
+              variant="ghost"
+              onClick={() => { setShowActions(!showActions); }}
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+
+            {showActions && (
+              <div
+                className="absolute right-0 top-full z-10 mt-1 min-w-[120px] rounded-md border bg-popover p-1 shadow-md"
+                role="menu"
+              >
+                {canEdit && (
+                  <button
+                    className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+                    role="menuitem"
+                    type="button"
+                    onClick={() => {
+                      setIsEditing(true)
+                      setShowActions(false)
+                    }}
+                  >
+                    <Edit2 className="h-3.5 w-3.5" />
+                    Editar
+                  </button>
+                )}
+                {canDelete && (
+                  <button
+                    className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-destructive hover:bg-accent"
+                    role="menuitem"
+                    type="button"
+                    onClick={() => {
+                      handleDelete()
+                      setShowActions(false)
+                    }}
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                    Excluir
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      {isEditing ? (
+        <div className="mt-2">
+          <CommentInput
+            isEditing
+            showCancel
+            allowMentions={allowMentions}
+            cancelLabel="Cancelar"
+            initialContent={comment.content}
+            mentionableUsers={mentionableUsers}
+            placeholder="Editar comentário..."
+            submitLabel="Salvar"
+            onCancel={() => { setIsEditing(false); }}
+            onSubmit={handleEdit}
+          />
+        </div>
+      ) : (
+        <div
+          className={commentContentVariants({ layout })}
+          data-slot="comment-content"
+          id={`${commentId}-content`}
+        >
+          <p className="whitespace-pre-wrap">
+            {parseContent(comment.content, mentionableUsers)}
+          </p>
+        </div>
+      )}
+
+      {/* Attachments */}
+      {comment.attachments && comment.attachments.length > 0 && (
+        <div className="mt-2 flex flex-wrap gap-2" data-slot="comment-attachments">
+          {comment.attachments.map((attachment) => (
+            <a
+              key={attachment.id}
+              className="flex items-center gap-1 rounded border bg-muted/50 px-2 py-1 text-xs hover:bg-muted"
+              href={attachment.url}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <Paperclip className="h-3 w-3" />
+              {attachment.name}
+            </a>
+          ))}
+        </div>
+      )}
+
+      {/* Reactions */}
+      {allowReactions && (
+        <div className="mt-2">
+          <CommentReactions
+            availableReactions={reactions}
+            commentId={comment.id}
+            reactions={comment.reactions}
+            readOnly={readOnly}
+            onReact={onReact}
+          />
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className={commentActionsVariants({ layout })} data-slot="comment-actions">
+        {canReply && (
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => { setIsReplying(!isReplying); }}
+          >
+            <CornerDownRight className="mr-1 h-3 w-3" />
+            Responder
+          </Button>
+        )}
+      </div>
+
+      {/* Reply input */}
+      {isReplying && (
+        <div className="mt-3">
+          <CommentInput
+            showCancel
+            allowMentions={allowMentions}
+            mentionableUsers={mentionableUsers}
+            parentId={comment.id}
+            placeholder={`Responder a ${comment.author.name}...`}
+            onCancel={() => { setIsReplying(false); }}
+            onSubmit={handleReply}
+          />
+        </div>
+      )}
+
+      {/* Replies */}
+      {comment.replies && comment.replies.length > 0 && (
+        <div
+          className={cn(
+            commentRepliesVariants({ layout }),
+            "relative"
+          )}
+          data-slot="comment-replies"
+        >
+          {layout === "list" && (
+            <div className={commentThreadLineVariants({ layout })} />
+          )}
+          {comment.replies.map((reply) => (
+            <CommentItem
+              key={reply.id}
+              allowDeleting={allowDeleting}
+              allowEditing={allowEditing}
+              allowMentions={allowMentions}
+              allowReactions={allowReactions}
+              allowReplies={allowReplies}
+              comment={reply}
+              currentUser={currentUser}
+              depth={depth + 1}
+              layout={layout}
+              maxDepth={maxDepth}
+              mentionableUsers={mentionableUsers}
+              reactions={reactions}
+              readOnly={readOnly}
+              onDelete={onDelete}
+              onEdit={onEdit}
+              onReact={onReact}
+              onReply={onReply}
+            />
+          ))}
+        </div>
+      )}
+    </article>
+  )
+}
+
+/**
+ * CommentSystem displays and manages a complete comment system
+ * with threading, mentions, reactions, and moderation support.
+ *
+ * @example
+ * ```tsx
+ * const comments = [
+ *   {
+ *     id: '1',
+ *     content: 'Great work!',
+ *     author: { id: '1', name: 'John Doe' },
+ *     createdAt: new Date()
+ *   }
+ * ]
+ *
+ * <CommentSystem
+ *   comments={comments}
+ *   currentUser={{ id: '2', name: 'Jane Doe' }}
+ *   onSubmit={({ content }) => console.log('New comment:', content)}
+ * />
+ * ```
+ */
+function CommentSystem({
+  comments,
+  variant = "default",
+  layout = "list",
+  currentUser,
+  allowReplies = true,
+  allowReactions = true,
+  allowEditing = true,
+  allowDeleting = true,
+  allowMentions = true,
+  allowAttachments = false,
+  maxDepth = 3,
+  mentionableUsers = [],
+  reactions = defaultReactions,
+  placeholder = "Escreva um comentário...",
+  readOnly = false,
+  isLoading = false,
+  error,
+  onSubmit,
+  onEdit,
+  onDelete,
+  onReact,
+  onMention,
+  onLoadMore,
+  className,
+  "aria-label": ariaLabel = "Sistema de comentários",
+  ...props
+}: CommentSystemProps) {
+  const systemId = useId()
+
+  const handleReply = (payload: CommentSubmitPayload) => {
+    onSubmit?.(payload)
+  }
+
+  const hasComments = comments.length > 0
+  const showInput = !readOnly && currentUser
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div
+        data-loading
+        aria-busy="true"
+        aria-label={ariaLabel}
+        className={cn(commentSystemVariants({ variant, layout }), className)}
+        data-slot="comment-system"
+        {...props}
+      >
+        <div className="flex flex-col gap-4">
+          {[1, 2, 3].map((i) => (
+            <div
+              key={i}
+              className="animate-pulse rounded-lg border bg-card p-4"
+            >
+              <div className="flex items-center gap-3">
+                <div className="h-8 w-8 rounded-full bg-muted" />
+                <div className="space-y-2">
+                  <div className="h-4 w-24 rounded bg-muted" />
+                  <div className="h-3 w-16 rounded bg-muted" />
+                </div>
+              </div>
+              <div className="mt-3 space-y-2">
+                <div className="h-4 w-full rounded bg-muted" />
+                <div className="h-4 w-3/4 rounded bg-muted" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div
+        data-error
+        aria-label={ariaLabel}
+        className={cn(commentSystemVariants({ variant, layout }), className)}
+        data-slot="comment-system"
+        {...props}
+      >
+        <div className="rounded-lg border border-destructive/50 bg-destructive/5 p-4 text-center">
+          <X className="mx-auto h-8 w-8 text-destructive" />
+          <p className="mt-2 text-sm text-destructive">{error}</p>
+          <Button
+            className="mt-3"
+            size="sm"
+            variant="outline"
+            onClick={() => onLoadMore?.({})}
+          >
+            Tentar novamente
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={cn(commentSystemVariants({ variant, layout }), className)}
+      data-slot="comment-system"
+      data-variant={variant}
+      id={systemId}
+      {...props}
+    >
+      {/* Input for new comments */}
+      {showInput && (
+        <div className="mb-4" data-slot="comment-system-input">
+          <CommentInput
+            allowAttachments={allowAttachments}
+            allowMentions={allowMentions}
+            mentionableUsers={mentionableUsers}
+            placeholder={placeholder}
+            onMention={onMention}
+            onSubmit={onSubmit}
+          />
+        </div>
+      )}
+
+      {/* Comments list */}
+      {hasComments ? (
+        <div data-slot="comment-system-list" role="feed">
+          {comments.map((comment) => (
+            <CommentItem
+              key={comment.id}
+              allowDeleting={allowDeleting}
+              allowEditing={allowEditing}
+              allowMentions={allowMentions}
+              allowReactions={allowReactions}
+              allowReplies={allowReplies}
+              comment={comment}
+              currentUser={currentUser}
+              layout={layout ?? "list"}
+              maxDepth={maxDepth}
+              mentionableUsers={mentionableUsers}
+              reactions={reactions}
+              readOnly={readOnly}
+              onDelete={onDelete}
+              onEdit={onEdit}
+              onReact={onReact}
+              onReply={handleReply}
+            />
+          ))}
+        </div>
+      ) : (
+        <div
+          className={commentEmptyStateVariants({
+            variant: variant === "compact" ? "compact" : "default",
+          })}
+          data-slot="comment-system-empty"
+        >
+          <MessageCircle className="h-12 w-12 text-muted-foreground/50" />
+          <p className="mt-2 text-sm text-muted-foreground">
+            Nenhum comentário ainda.
+          </p>
+          {!readOnly && currentUser && (
+            <p className="mt-1 text-xs text-muted-foreground">
+              Seja o primeiro a comentar!
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Load more button */}
+      {onLoadMore && hasComments && (
+        <div className="mt-4 text-center">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              onLoadMore({ before: comments[comments.length - 1]?.id })
+            }}
+          >
+            Carregar mais comentários
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export {
+  commentActionsVariants,
+  commentContentVariants,
+  commentEmptyStateVariants,
+  commentHeaderVariants,
+  CommentInput,
+  commentInputContainerVariants,
+  CommentItem,
+  commentItemVariants,
+  commentMentionVariants,
+  CommentReactions,
+  commentReactionVariants,
+  commentRepliesVariants,
+  CommentSystem,
+  commentSystemVariants,
+  commentThreadLineVariants,
+  commentTimelineMarkerVariants,
+  defaultReactions,
+  mentionSuggestionItemVariants,
+  mentionSuggestionsVariants,
+}
+
+export type {
+  Comment,
+  CommentAttachment,
+  CommentDeletePayload,
+  CommentEditPayload,
+  CommentInputProps,
+  CommentItemProps,
+  CommentMentionPayload,
+  CommentReaction,
+  CommentReactPayload,
+  CommentSubmitPayload,
+  CommentSystemProps,
+  CommentUser,
+  Reaction,
+}