@etus/ui 0.1.1 → 0.1.2

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

@@ -1,1014 +0,0 @@
-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,
-}