elseware-ui 2.31.1 → 2.31.2

package/dist/index.mjs

@@ -22,7 +22,7 @@ import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { MdUpload, MdOutlineDone, MdOutlineRemoveCircleOutline } from 'react-icons/md';
 import '@mdxeditor/editor/style.css';
 import { MDXEditor, headingsPlugin, linkPlugin, listsPlugin, imagePlugin, tablePlugin, linkDialogPlugin, thematicBreakPlugin, quotePlugin, toolbarPlugin, UndoRedo, Separator, BlockTypeSelect, BoldItalicUnderlineToggles, StrikeThroughSupSubToggles, ListsToggle, CreateLink, InsertImage, InsertTable, InsertThematicBreak, markdownShortcutPlugin, frontmatterPlugin, codeBlockPlugin, codeMirrorPlugin } from '@mdxeditor/editor';
-import { BiDotsVerticalRounded, BiEdit, BiTrash, BiFlag, BiLike, BiDislike, BiChevronDown, BiChevronUp } from 'react-icons/bi';
+import { BiDotsVerticalRounded, BiEdit, BiTrash, BiFlag, BiSolidLike, BiLike, BiSolidDislike, BiDislike, BiChevronDown, BiChevronUp } from 'react-icons/bi';
 
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -3104,7 +3104,7 @@ var ShapeSwitch = () => {
     {
       value: currentShape,
       onChange: handleChange,
-      className: "\r\n          px-3 py-2 rounded-md border border-gray-300\r\n          bg-white dark:bg-gray-800\r\n          text-sm shadow-sm\r\n          focus:outline-none\r\n        ",
+      className: "\n          px-3 py-2 rounded-md border border-gray-300\n          bg-white dark:bg-gray-800\n          text-sm shadow-sm\n          focus:outline-none\n        ",
       children: Object.keys(Shape).map((shape) => /* @__PURE__ */ jsx("option", { value: shape, children: shape }, shape))
     }
   ) });
@@ -16098,7 +16098,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
     /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
       "h2",
       {
-        className: "\r\n            text-sm\r\n            font-semibold\r\n            uppercase\r\n            tracking-wide\r\n            text-gray-900\r\n            dark:text-gray-100\r\n          ",
+        className: "\n            text-sm\n            font-semibold\n            uppercase\n            tracking-wide\n            text-gray-900\n            dark:text-gray-100\n          ",
         children: title
       }
     ) }),
@@ -17427,7 +17427,7 @@ var GlowWrapper = ({
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "\r\n          pointer-events-none absolute inset-0 opacity-0 \r\n          group-hover:opacity-100 transition-opacity duration-300\r\n        ",
+            className: "\n          pointer-events-none absolute inset-0 opacity-0 \n          group-hover:opacity-100 transition-opacity duration-300\n        ",
             style: { background: "var(--glow-bg)" }
           }
         ),
@@ -17459,49 +17459,60 @@ function ShowMore({ text, limit }) {
 }
 var ShowMore_default = ShowMore;
 function CommentComposer({
+  avatar,
   placeholder = "Add a comment...",
   submitLabel = "Comment",
+  disabled,
+  loading,
   onSubmit
 }) {
   const [value, setValue] = useState("");
   const [focused, setFocused] = useState(false);
   async function handleSubmit() {
-    if (!value.trim()) return;
-    await onSubmit?.(value);
+    const content = value.trim();
+    if (!content) {
+      return;
+    }
+    await onSubmit?.(content);
+    setValue("");
+    setFocused(false);
+  }
+  function handleCancel() {
     setValue("");
     setFocused(false);
   }
   return /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-    /* @__PURE__ */ jsx(Avatar, { size: "md" }),
+    /* @__PURE__ */ jsx(Avatar, { src: avatar, size: "md" }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-3", children: [
       /* @__PURE__ */ jsx(
         "textarea",
         {
           value,
+          disabled: disabled || loading,
           placeholder,
           onFocus: () => setFocused(true),
           onChange: (e) => setValue(e.target.value),
-          className: "w-full min-h-[48px] bg-transparent border-b border-gray-300 dark:border-neutral-700 outline-none resize-none pb-2 text-sm"
+          className: "\n            w-full\n            min-h-[56px]\n            resize-none\n            bg-transparent\n            border-b\n            border-gray-300\n            dark:border-neutral-700\n            outline-none\n            pb-2\n            text-sm\n          "
         }
       ),
       (focused || value.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
         /* @__PURE__ */ jsx(
           Button_default,
           {
+            text: "Cancel",
             variant: "secondary",
             appearance: "ghost",
-            text: "Cancel",
-            onClick: () => {
-              setValue("");
-              setFocused(false);
-            }
+            disabled: loading,
+            onClick: handleCancel
           }
         ),
         /* @__PURE__ */ jsx(
           Button_default,
           {
-            variant: "primary",
             text: submitLabel,
+            variant: "primary",
+            loading,
+            disabled: !value.trim(),
             onClick: handleSubmit
           }
         )
@@ -17510,6 +17521,78 @@ function CommentComposer({
   ] });
 }
 var CommentComposer_default = CommentComposer;
+function CommentActions({
+  likes = 0,
+  dislikes = 0,
+  liked = false,
+  disliked = false,
+  canReply = true,
+  onLike,
+  onDislike,
+  onReply
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "\n        flex\n        items-center\n        gap-5\n        text-sm\n        text-gray-500\n        dark:text-gray-400\n      ",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: onLike,
+            className: `
+          inline-flex
+          items-center
+          gap-1
+          transition-colors
+          ${liked ? "text-blue-500" : "hover:text-gray-900 dark:hover:text-gray-100"}
+        `,
+            children: [
+              liked ? /* @__PURE__ */ jsx(BiSolidLike, { size: 18 }) : /* @__PURE__ */ jsx(BiLike, { size: 18 }),
+              /* @__PURE__ */ jsx("span", { children: likes })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: onDislike,
+            className: `
+          inline-flex
+          items-center
+          gap-1
+          transition-colors
+          ${disliked ? "text-red-500" : "hover:text-gray-900 dark:hover:text-gray-100"}
+        `,
+            children: [
+              disliked ? /* @__PURE__ */ jsx(BiSolidDislike, { size: 18 }) : /* @__PURE__ */ jsx(BiDislike, { size: 18 }),
+              /* @__PURE__ */ jsx("span", { children: dislikes })
+            ]
+          }
+        ),
+        canReply && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onReply,
+            className: "\n            font-medium\n            transition-colors\n            hover:text-gray-900\n            dark:hover:text-gray-100\n          ",
+            children: "Reply"
+          }
+        )
+      ]
+    }
+  );
+}
+var CommentActions_default = CommentActions;
+function CommentContent({ content }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "\n        text-sm\n        leading-relaxed\n        whitespace-pre-wrap\n        break-words\n        text-gray-700\n        dark:text-gray-300\n      ",
+      children: content
+    }
+  );
+}
+var CommentContent_default = CommentContent;
 
 // src/compositions/comment-thread/utils/formatCommentDate.ts
 function formatCommentDate(date) {
@@ -17517,11 +17600,26 @@ function formatCommentDate(date) {
   const target = new Date(date);
   const seconds = Math.floor((now.getTime() - target.getTime()) / 1e3);
   const intervals = [
-    { label: "year", seconds: 31536e3 },
-    { label: "month", seconds: 2592e3 },
-    { label: "day", seconds: 86400 },
-    { label: "hour", seconds: 3600 },
-    { label: "minute", seconds: 60 }
+    {
+      label: "year",
+      seconds: 31536e3
+    },
+    {
+      label: "month",
+      seconds: 2592e3
+    },
+    {
+      label: "day",
+      seconds: 86400
+    },
+    {
+      label: "hour",
+      seconds: 3600
+    },
+    {
+      label: "minute",
+      seconds: 60
+    }
   ];
   for (const interval of intervals) {
     const count = Math.floor(seconds / interval.seconds);
@@ -17534,67 +17632,27 @@ function formatCommentDate(date) {
 function CommentHeader({
   avatar,
   username,
+  firstName,
+  lastName,
   createdAt,
   edited
 }) {
+  const displayName = firstName || lastName ? `${firstName ?? ""} ${lastName ?? ""}`.trim() : username;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
     /* @__PURE__ */ jsx(Avatar, { src: avatar, size: "sm" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm flex-wrap", children: [
-      /* @__PURE__ */ jsxs("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap min-w-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100", children: displayName }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
         "@",
         username
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400", children: formatCommentDate(createdAt) }),
-      edited && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "edited" })
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: formatCommentDate(createdAt) }),
+      edited && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "(edited)" })
     ] })
   ] });
 }
 var CommentHeader_default = CommentHeader;
-function CommentContent({ content }) {
-  return /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed whitespace-pre-wrap text-gray-700 dark:text-gray-300", children: content });
-}
-var CommentContent_default = CommentContent;
-function CommentActions({
-  likes = 0,
-  dislikes = 0,
-  onLike,
-  onDislike,
-  onReply
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-5 text-sm text-gray-500 dark:text-gray-400", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: onLike,
-        className: "inline-flex items-center gap-1 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
-        children: [
-          /* @__PURE__ */ jsx(BiLike, { size: 18 }),
-          /* @__PURE__ */ jsx("span", { children: likes })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: onDislike,
-        className: "inline-flex items-center gap-1 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
-        children: [
-          /* @__PURE__ */ jsx(BiDislike, { size: 18 }),
-          /* @__PURE__ */ jsx("span", { children: dislikes })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: onReply,
-        className: "font-medium hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
-        children: "Reply"
-      }
-    )
-  ] });
-}
-var CommentActions_default = CommentActions;
 function CommentMenu({
   canEdit,
   canDelete,
@@ -17614,28 +17672,34 @@ function CommentMenu({
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
   }, []);
+  const hasActions = canEdit || canDelete || canReport;
+  if (!hasActions) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
+        type: "button",
         onClick: () => setOpen((prev) => !prev),
-        className: "text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+        className: "\n          text-gray-500\n          hover:text-gray-900\n          dark:hover:text-gray-100\n          transition-colors\n        ",
         children: /* @__PURE__ */ jsx(BiDotsVerticalRounded, { size: 18 })
       }
     ),
     open && /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "\r\n            absolute\r\n            right-0\r\n            top-full\r\n            mt-2\r\n            min-w-[160px]\r\n            overflow-hidden\r\n            rounded-xl\r\n            border\r\n            border-gray-200\r\n            dark:border-neutral-800\r\n            bg-white\r\n            dark:bg-neutral-900\r\n            shadow-xl\r\n            z-50\r\n          ",
+        className: "\n            absolute\n            right-0\n            top-full\n            mt-2\n            min-w-[180px]\n            overflow-hidden\n            rounded-xl\n            border\n            border-gray-200\n            dark:border-neutral-800\n            bg-white\n            dark:bg-neutral-900\n            shadow-xl\n            z-50\n          ",
         children: [
           canEdit && /* @__PURE__ */ jsxs(
             "button",
             {
+              type: "button",
               onClick: () => {
                 setOpen(false);
                 onEdit?.();
               },
-              className: "w-full flex items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+              className: "\n                w-full\n                flex\n                items-center\n                gap-2\n                px-4\n                py-3\n                text-sm\n                hover:bg-gray-100\n                dark:hover:bg-neutral-800\n              ",
               children: [
                 /* @__PURE__ */ jsx(BiEdit, {}),
                 "Edit"
@@ -17645,11 +17709,12 @@ function CommentMenu({
           canDelete && /* @__PURE__ */ jsxs(
             "button",
             {
+              type: "button",
               onClick: () => {
                 setOpen(false);
                 onDelete?.();
               },
-              className: "w-full flex items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+              className: "\n                w-full\n                flex\n                items-center\n                gap-2\n                px-4\n                py-3\n                text-sm\n                text-red-500\n                hover:bg-gray-100\n                dark:hover:bg-neutral-800\n              ",
               children: [
                 /* @__PURE__ */ jsx(BiTrash, {}),
                 "Delete"
@@ -17659,11 +17724,12 @@ function CommentMenu({
           canReport && /* @__PURE__ */ jsxs(
             "button",
             {
+              type: "button",
               onClick: () => {
                 setOpen(false);
                 onReport?.();
               },
-              className: "w-full flex items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+              className: "\n                w-full\n                flex\n                items-center\n                gap-2\n                px-4\n                py-3\n                text-sm\n                hover:bg-gray-100\n                dark:hover:bg-neutral-800\n              ",
               children: [
                 /* @__PURE__ */ jsx(BiFlag, {}),
                 "Report"
@@ -17681,25 +17747,37 @@ function CommentRepliesToggle({
   collapsed,
   onToggle
 }) {
+  if (repliesCount <= 0) {
+    return null;
+  }
+  const label = collapsed ? `View ${repliesCount} ${repliesCount === 1 ? "reply" : "replies"}` : "Hide replies";
   return /* @__PURE__ */ jsxs(
     "button",
     {
+      type: "button",
       onClick: onToggle,
-      className: "inline-flex items-center gap-1 text-sm font-medium text-blue-500 hover:text-blue-400 transition-colors w-fit",
+      className: "\n        inline-flex\n        items-center\n        gap-1\n        w-fit\n        text-sm\n        font-medium\n        text-blue-500\n        hover:text-blue-400\n        transition-colors\n      ",
       children: [
         collapsed ? /* @__PURE__ */ jsx(BiChevronDown, { size: 18 }) : /* @__PURE__ */ jsx(BiChevronUp, { size: 18 }),
-        /* @__PURE__ */ jsx("span", { children: collapsed ? `View ${repliesCount} repl${repliesCount > 1 ? "ies" : "y"}` : "Hide replies" })
+        /* @__PURE__ */ jsx("span", { children: label })
       ]
     }
   );
 }
 var CommentRepliesToggle_default = CommentRepliesToggle;
-function ReplyComposer({ username, onSubmit }) {
+function ReplyComposer({
+  avatar,
+  username,
+  loading,
+  onSubmit
+}) {
   return /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx(
     CommentComposer_default,
     {
-      placeholder: `Reply to @${username}`,
+      avatar,
+      loading,
       submitLabel: "Reply",
+      placeholder: `Reply to @${username}`,
       onSubmit
     }
   ) });
@@ -17708,7 +17786,7 @@ var ReplyComposer_default = ReplyComposer;
 
 // src/compositions/comment-thread/constants/comment.constants.ts
 var MAX_COMMENT_DEPTH = 5;
-var COMMENT_INDENTATION = 0;
+var COMMENT_INDENTATION = 24;
 function CommentItem({
   comment,
   depth = 0,
@@ -17723,7 +17801,7 @@ function CommentItem({
   const [isReplying, setIsReplying] = useState(false);
   const resolvedDepth = Math.min(depth, MAX_COMMENT_DEPTH);
   async function handleReply(content) {
-    console.log(content);
+    await onReply?.(comment, content);
     setIsReplying(false);
   }
   return /* @__PURE__ */ jsxs(
@@ -17731,16 +17809,18 @@ function CommentItem({
     {
       className: "flex flex-col gap-4",
       style: {
-        paddingLeft: `${resolvedDepth * COMMENT_INDENTATION}px`
+        paddingLeft: resolvedDepth * COMMENT_INDENTATION
       },
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-3 min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3 min-w-0", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
             /* @__PURE__ */ jsx(
               CommentHeader_default,
               {
-                avatar: comment.author.avatar,
-                username: comment.author.username,
+                avatar: comment.author?.avatar,
+                username: comment.author?.username ?? "unknown",
+                firstName: comment.author?.firstName,
+                lastName: comment.author?.lastName,
                 createdAt: comment.createdAt,
                 edited: comment.edited
               }
@@ -17763,18 +17843,19 @@ function CommentItem({
             {
               likes: comment.likes,
               dislikes: comment.dislikes,
+              liked: comment.liked,
+              disliked: comment.disliked,
+              canReply: comment.permissions?.canReply,
               onLike: () => onLike?.(comment),
               onDislike: () => onDislike?.(comment),
-              onReply: () => {
-                setIsReplying((prev) => !prev);
-                onReply?.(comment);
-              }
+              onReply: () => setIsReplying((prev) => !prev)
             }
           ),
           isReplying && /* @__PURE__ */ jsx(
             ReplyComposer_default,
             {
-              username: comment.author.username,
+              avatar: comment.author?.avatar,
+              username: comment.author?.username,
               onSubmit: handleReply
             }
           ),
@@ -17824,6 +17905,9 @@ function CommentList({
   onDelete,
   onReport
 }) {
+  if (!comments.length) {
+    return null;
+  }
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8", children: comments.map((comment) => /* @__PURE__ */ jsx(
     CommentItem_default,
     {
@@ -17840,52 +17924,356 @@ function CommentList({
   )) });
 }
 var CommentList_default = CommentList;
-var CommentThreadContext = createContext(null);
-function useCommentThread(initialComments) {
-  const [comments, setComments] = useState(initialComments);
-  return {
-    comments,
-    setComments
-  };
+function EditCommentModal({
+  show,
+  comment,
+  handleCloseModal,
+  onSubmit
+}) {
+  if (!comment) return null;
+  return /* @__PURE__ */ jsx(Modal_default, { title: "Edit Comment", show, handleOnClose: handleCloseModal, children: /* @__PURE__ */ jsx(
+    Form,
+    {
+      enableReinitialize: true,
+      initialValues: {
+        content: comment.content
+      },
+      onSubmit: async (values) => {
+        await onSubmit?.(comment, values.content);
+        handleCloseModal();
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(TextArea_default, { name: "content", rows: 5, placeholder: "Comment" }),
+        /* @__PURE__ */ jsx(Button_default, { type: "submit", variant: "success", text: "Save Changes" })
+      ] })
+    }
+  ) });
 }
-function CommentThread({
-  comments: initialComments = [],
-  onCommentCreate,
-  onLike,
-  onDislike,
-  onReply,
-  onEdit,
-  onDelete,
-  onReport
+var EditCommentModal_default = EditCommentModal;
+function DeleteCommentModal({
+  show,
+  comment,
+  handleCloseModal,
+  onDelete
 }) {
-  const { comments, setComments } = useCommentThread(initialComments);
-  async function handleCreateComment(content) {
-    await onCommentCreate?.(content);
+  if (!comment) return null;
+  return /* @__PURE__ */ jsx(Modal_default, { title: "Delete Comment", show, handleOnClose: handleCloseModal, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+    /* @__PURE__ */ jsx(Typography.Paragraph, { children: "Are you sure you want to permanently delete this comment?" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end", children: [
+      /* @__PURE__ */ jsx(Button_default, { text: "Cancel", appearance: "ghost", onClick: handleCloseModal }),
+      /* @__PURE__ */ jsx(
+        Button_default,
+        {
+          text: "Delete",
+          variant: "danger",
+          onClick: async () => {
+            await onDelete?.(comment);
+            handleCloseModal();
+          }
+        }
+      )
+    ] })
+  ] }) });
+}
+var DeleteCommentModal_default = DeleteCommentModal;
+var REPORT_REASONS = [
+  {
+    label: "Spam",
+    value: "spam"
+  },
+  {
+    label: "Harassment",
+    value: "harassment"
+  },
+  {
+    label: "Hate Speech",
+    value: "hate_speech"
+  },
+  {
+    label: "Misleading Information",
+    value: "misleading_information"
+  },
+  {
+    label: "Other",
+    value: "other"
   }
-  return /* @__PURE__ */ jsx(
-    CommentThreadContext.Provider,
+];
+function ReportCommentModal({
+  show,
+  comment,
+  handleCloseModal,
+  onSubmit
+}) {
+  if (!comment) return null;
+  return /* @__PURE__ */ jsx(Modal_default, { title: "Report Comment", show, handleOnClose: handleCloseModal, children: /* @__PURE__ */ jsx(
+    Form,
     {
-      value: {
-        comments,
-        setComments
+      initialValues: {
+        reason: "",
+        description: ""
+      },
+      onSubmit: async (values) => {
+        await onSubmit?.(comment, {
+          reason: values.reason,
+          description: values.description
+        });
+        handleCloseModal();
       },
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 w-full", children: [
-        /* @__PURE__ */ jsx(CommentComposer_default, { onSubmit: handleCreateComment }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(Select_default, { name: "reason", placeholder: "Reason", options: REPORT_REASONS }),
         /* @__PURE__ */ jsx(
-          CommentList_default,
+          TextArea_default,
           {
-            comments,
-            onLike,
-            onDislike,
-            onReply,
-            onEdit,
-            onDelete,
-            onReport
+            name: "description",
+            rows: 4,
+            placeholder: "Additional details"
           }
-        )
+        ),
+        /* @__PURE__ */ jsx(Button_default, { type: "submit", variant: "danger", text: "Submit Report" })
       ] })
     }
+  ) });
+}
+var ReportCommentModal_default = ReportCommentModal;
+function useCommentModals() {
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showReportModal, setShowReportModal] = useState(false);
+  return {
+    showEditModal,
+    openEditModal: () => setShowEditModal(true),
+    closeEditModal: () => setShowEditModal(false),
+    showDeleteModal,
+    openDeleteModal: () => setShowDeleteModal(true),
+    closeDeleteModal: () => setShowDeleteModal(false),
+    showReportModal,
+    openReportModal: () => setShowReportModal(true),
+    closeReportModal: () => setShowReportModal(false)
+  };
+}
+function useCommentSelection() {
+  const [selectedComment, setSelectedComment] = useState(
+    null
   );
+  function selectComment(comment) {
+    setSelectedComment(comment);
+  }
+  function clearSelection() {
+    setSelectedComment(null);
+  }
+  return {
+    selectedComment,
+    selectComment,
+    clearSelection
+  };
+}
+
+// src/compositions/comment-thread/utils/buildCommentTree.ts
+function buildCommentTree(comments) {
+  const map = /* @__PURE__ */ new Map();
+  const roots = [];
+  comments.forEach((comment) => {
+    map.set(comment.id, {
+      ...comment,
+      replies: []
+    });
+  });
+  comments.forEach((comment) => {
+    const current = map.get(comment.id);
+    if (!comment.parentCommentId) {
+      roots.push(current);
+      return;
+    }
+    const parent = map.get(comment.parentCommentId);
+    if (parent) {
+      parent.replies.push(current);
+    }
+  });
+  return roots;
+}
+
+// src/compositions/comment-thread/utils/updateComment.ts
+function updateComment(comments, commentId, updater) {
+  return comments.map((comment) => {
+    if (comment.id === commentId) {
+      return updater(comment);
+    }
+    return {
+      ...comment,
+      replies: comment.replies ? updateComment(comment.replies, commentId, updater) : []
+    };
+  });
+}
+
+// src/compositions/comment-thread/utils/removeComment.ts
+function removeComment(comments, commentId) {
+  return comments.filter((comment) => comment.id !== commentId).map((comment) => ({
+    ...comment,
+    replies: comment.replies ? removeComment(comment.replies, commentId) : []
+  }));
+}
+
+// src/compositions/comment-thread/utils/insertReply.ts
+function insertReply(comments, parentId, reply) {
+  return comments.map((comment) => {
+    if (comment.id === parentId) {
+      return {
+        ...comment,
+        replies: [...comment.replies || [], reply]
+      };
+    }
+    return {
+      ...comment,
+      replies: comment.replies ? insertReply(comment.replies, parentId, reply) : []
+    };
+  });
+}
+function CommentThread({
+  postId,
+  currentUser,
+  dataSource,
+  loading = false,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  const [comments, setComments] = useState([]);
+  const [isLoadingComments, setIsLoadingComments] = useState(true);
+  const selection = useCommentSelection();
+  const modals = useCommentModals();
+  useEffect(() => {
+    async function loadComments() {
+      try {
+        const result = await dataSource.getComments();
+        setComments(buildCommentTree(result));
+      } finally {
+        setIsLoadingComments(false);
+      }
+    }
+    loadComments();
+  }, [dataSource]);
+  async function handleCreateComment(content) {
+    const comment = await dataSource.createComment({
+      content,
+      parentCommentId: null
+    });
+    setComments((prev) => [comment, ...prev]);
+  }
+  async function handleReply(parentComment, content) {
+    const reply = await dataSource.createComment({
+      content,
+      parentCommentId: parentComment.id
+    });
+    setComments((prev) => insertReply(prev, parentComment.id, reply));
+  }
+  async function handleLike(comment) {
+    const result = await dataSource.toggleLike(comment.id);
+    setComments(
+      (prev) => updateComment(prev, comment.id, (item) => ({
+        ...item,
+        likes: result.likes,
+        dislikes: result.dislikes,
+        liked: result.liked,
+        disliked: result.disliked
+      }))
+    );
+  }
+  async function handleDislike(comment) {
+    const result = await dataSource.toggleDislike(comment.id);
+    setComments(
+      (prev) => updateComment(prev, comment.id, (item) => ({
+        ...item,
+        likes: result.likes,
+        dislikes: result.dislikes,
+        liked: result.liked,
+        disliked: result.disliked
+      }))
+    );
+  }
+  async function handleUpdateComment(comment, content) {
+    const updated = await dataSource.updateComment({
+      id: comment.id,
+      content
+    });
+    setComments((prev) => updateComment(prev, comment.id, () => updated));
+  }
+  async function handleDeleteComment(comment) {
+    await dataSource.deleteComment(comment.id);
+    setComments((prev) => removeComment(prev, comment.id));
+    onDelete?.(comment);
+  }
+  async function handleReportComment(comment, payload) {
+    await dataSource.reportComment?.(
+      comment.id,
+      payload.reason,
+      payload.description
+    );
+    onReport?.(comment);
+  }
+  if (loading || isLoadingComments) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: "Loading comments..." });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ jsx(
+        CommentComposer_default,
+        {
+          avatar: currentUser.avatar,
+          onSubmit: handleCreateComment
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CommentList_default,
+        {
+          comments,
+          onLike: handleLike,
+          onDislike: handleDislike,
+          onReply: handleReply,
+          onEdit: (comment) => {
+            selection.selectComment(comment);
+            onEdit?.(comment);
+            modals.openEditModal();
+          },
+          onDelete: (comment) => {
+            selection.selectComment(comment);
+            modals.openDeleteModal();
+          },
+          onReport: (comment) => {
+            selection.selectComment(comment);
+            onReport?.(comment);
+            modals.openReportModal();
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      EditCommentModal_default,
+      {
+        show: modals.showEditModal,
+        comment: selection.selectedComment,
+        handleCloseModal: modals.closeEditModal,
+        onSubmit: handleUpdateComment
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DeleteCommentModal_default,
+      {
+        show: modals.showDeleteModal,
+        comment: selection.selectedComment,
+        handleCloseModal: modals.closeDeleteModal,
+        onDelete: handleDeleteComment
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ReportCommentModal_default,
+      {
+        show: modals.showReportModal,
+        comment: selection.selectedComment,
+        handleCloseModal: modals.closeReportModal,
+        onSubmit: handleReportComment
+      }
+    )
+  ] });
 }
 var CommentThread_default = CommentThread;
 function DataViewTable({