elseware-ui 2.36.9 → 2.37.0

package/dist/index.mjs

@@ -18,7 +18,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 { BiChevronDown, BiChevronUp, BiSolidLike, BiLike, BiSolidDislike, BiDislike, BiDotsVerticalRounded, BiEdit, BiTrash, BiFlag } from 'react-icons/bi';
+import { BiCheckCircle, BiXCircle, BiChevronDown, BiChevronUp, BiSolidLike, BiLike, BiSolidDislike, BiDislike, BiDotsVerticalRounded, BiReply, BiEdit, BiTrash, BiFlag } from 'react-icons/bi';
 
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -22948,6 +22948,1573 @@ var TopNav = ({
   };
   return /* @__PURE__ */ jsx("div", { className: "flex items-center", children: items.map(renderNode) });
 };
+function ReviewForm({
+  initialValues,
+  placeholder = "Write your review...",
+  submitLabel = "Submit",
+  cancelLabel = "Cancel",
+  loading = false,
+  disabled = false,
+  autoFocus = false,
+  config,
+  onSubmit,
+  onCancel
+}) {
+  const [content, setContent] = useState(initialValues?.content ?? "");
+  const [rating, setRating] = useState(initialValues?.rating ?? 0);
+  const [isRecommended, setIsRecommended] = useState(
+    initialValues?.isRecommended ?? true
+  );
+  const [error, setError] = useState("");
+  const contentLength = content.trim().length;
+  const ratingItems = useMemo(() => {
+    return Array.from(
+      {
+        length: config.maxRating
+      },
+      (_, index) => index + 1
+    );
+  }, [config.maxRating]);
+  useEffect(() => {
+    setContent(initialValues?.content ?? "");
+    setRating(initialValues?.rating ?? 0);
+    setIsRecommended(initialValues?.isRecommended ?? true);
+    setError("");
+  }, [
+    initialValues?.content,
+    initialValues?.rating,
+    initialValues?.isRecommended
+  ]);
+  function validate() {
+    const trimmedContent = content.trim();
+    if (trimmedContent.length < config.minContentLength) {
+      return `Review must be at least ${config.minContentLength} characters.`;
+    }
+    if (trimmedContent.length > config.maxContentLength) {
+      return `Review cannot be more than ${config.maxContentLength} characters.`;
+    }
+    if (rating < config.minRating) {
+      return "Please select a rating.";
+    }
+    return "";
+  }
+  async function handleSubmit() {
+    const nextError = validate();
+    if (nextError) {
+      setError(nextError);
+      return;
+    }
+    const values = {
+      content: content.trim(),
+      rating,
+      isRecommended: config.allowRecommendation ? isRecommended : void 0
+    };
+    await onSubmit(values);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        value: content,
+        disabled: disabled || loading,
+        autoFocus,
+        placeholder,
+        maxLength: config.maxContentLength,
+        onChange: (event) => {
+          setContent(event.target.value);
+          setError("");
+        },
+        className: "min-h-[120px] w-full resize-none rounded-xl border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 outline-none transition-colors placeholder:text-gray-400 focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-60 dark:border-neutral-700 dark:bg-neutral-900 dark:text-gray-100 dark:placeholder:text-gray-500"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-xs text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        contentLength,
+        "/",
+        config.maxContentLength
+      ] }),
+      error && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: error })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Rating" }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: ratingItems.map((item) => {
+        const active = item <= rating;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: disabled || loading,
+            onClick: () => {
+              setRating(item);
+              setError("");
+            },
+            className: `
+                  text-2xl leading-none transition-transform disabled:cursor-not-allowed disabled:opacity-60
+                  ${active ? "text-yellow-400" : "text-gray-300 dark:text-neutral-700"}
+                  hover:scale-110
+                `,
+            "aria-label": `Rate ${item} out of ${config.maxRating}`,
+            children: "\u2605"
+          },
+          item
+        );
+      }) })
+    ] }),
+    config.allowRecommendation && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Do you recommend this?" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
+        /* @__PURE__ */ jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              checked: isRecommended,
+              disabled: disabled || loading,
+              onChange: () => setIsRecommended(true)
+            }
+          ),
+          "Yes"
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              checked: !isRecommended,
+              disabled: disabled || loading,
+              onChange: () => setIsRecommended(false)
+            }
+          ),
+          "No"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+      onCancel && /* @__PURE__ */ jsx(
+        Button_default,
+        {
+          text: cancelLabel,
+          variant: "secondary",
+          appearance: "ghost",
+          disabled: loading,
+          onClick: onCancel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button_default,
+        {
+          text: submitLabel,
+          variant: "primary",
+          loading,
+          disabled: disabled || !content.trim() || rating < config.minRating,
+          onClick: handleSubmit
+        }
+      )
+    ] })
+  ] });
+}
+var ReviewForm_default = ReviewForm;
+function ReviewComposer({
+  currentUser,
+  placeholder = "Write your review...",
+  submitLabel = "Post Review",
+  loading = false,
+  disabled = false,
+  config,
+  onLoginClick,
+  onSubmit
+}) {
+  if (!currentUser) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Please login to post your review." }),
+      onLoginClick && /* @__PURE__ */ jsx(Button_default, { text: "Login", variant: "primary", onClick: onLoginClick })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+    /* @__PURE__ */ jsx(Avatar, { src: currentUser.avatar, size: "md" }),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+      ReviewForm_default,
+      {
+        placeholder,
+        submitLabel,
+        loading,
+        disabled,
+        config,
+        onSubmit
+      }
+    ) })
+  ] }) });
+}
+var ReviewComposer_default = ReviewComposer;
+
+// src/compositions/review-thread/utils/formatReviewDate.ts
+function formatReviewDate(date, format = "relative") {
+  if (!date) {
+    return "";
+  }
+  const target = new Date(date);
+  if (Number.isNaN(target.getTime())) {
+    return "";
+  }
+  if (format === "absolute") {
+    return target.toLocaleString();
+  }
+  const now = /* @__PURE__ */ new Date();
+  const seconds = Math.floor((now.getTime() - target.getTime()) / 1e3);
+  if (seconds < 60) {
+    return "Just now";
+  }
+  const intervals = [
+    {
+      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);
+    if (count >= 1) {
+      return `${count} ${interval.label}${count > 1 ? "s" : ""} ago`;
+    }
+  }
+  return "Just now";
+}
+
+// src/compositions/review-thread/utils/reviewState.ts
+function prependReview(reviews, review) {
+  return [review, ...reviews.filter((item) => item.id !== review.id)];
+}
+function appendReview(reviews, review) {
+  return [...reviews.filter((item) => item.id !== review.id), review];
+}
+function updateReview(reviews, reviewId, updater) {
+  return reviews.map(
+    (review) => review.id === reviewId ? updater(review) : review
+  );
+}
+function replaceReview(reviews, nextReview) {
+  return updateReview(reviews, nextReview.id, () => nextReview);
+}
+function removeReview(reviews, reviewId) {
+  return reviews.filter((review) => review.id !== reviewId);
+}
+function findReview(reviews, reviewId) {
+  return reviews.find((review) => review.id === reviewId);
+}
+function upsertReview(reviews, review) {
+  const exists = reviews.some((item) => item.id === review.id);
+  if (!exists) {
+    return prependReview(reviews, review);
+  }
+  return replaceReview(reviews, review);
+}
+
+// src/compositions/review-thread/utils/reviewReplyState.ts
+function addReviewReply(review, reply, maxReplies = 1) {
+  const replies = review.replies ?? [];
+  return {
+    ...review,
+    replies: [reply, ...replies.filter((item) => item.id !== reply.id)].slice(
+      0,
+      maxReplies
+    )
+  };
+}
+function updateReviewReply(review, replyId, updater) {
+  return {
+    ...review,
+    replies: (review.replies ?? []).map(
+      (reply) => reply.id === replyId ? updater(reply) : reply
+    )
+  };
+}
+function replaceReviewReply(review, nextReply) {
+  return updateReviewReply(review, nextReply.id, () => nextReply);
+}
+function removeReviewReply(review, replyId) {
+  return {
+    ...review,
+    replies: (review.replies ?? []).filter((reply) => reply.id !== replyId)
+  };
+}
+function hasReviewReply(review, replyId) {
+  return (review.replies ?? []).some((reply) => reply.id === replyId);
+}
+
+// src/compositions/review-thread/utils/reviewPermissions.ts
+function canEditReview(review) {
+  return review.permissions?.canEdit ?? false;
+}
+function canDeleteReview(review) {
+  return review.permissions?.canDelete ?? false;
+}
+function canReportReview(review) {
+  return review.permissions?.canReport ?? false;
+}
+function canReplyToReview(review) {
+  return review.permissions?.canReply ?? false;
+}
+function canEditReviewReply(reply) {
+  return reply.permissions?.canEdit ?? false;
+}
+function canDeleteReviewReply(reply) {
+  return reply.permissions?.canDelete ?? false;
+}
+function canReportReviewReply(reply) {
+  return reply.permissions?.canReport ?? false;
+}
+
+// src/compositions/review-thread/utils/normalizeReview.ts
+function normalizeReviewAuthor(author) {
+  if (!author) {
+    return null;
+  }
+  return {
+    id: String(author.id ?? author._id ?? ""),
+    username: author.username,
+    avatar: author.avatar,
+    firstName: author.firstName,
+    lastName: author.lastName,
+    role: author.role
+  };
+}
+function normalizeReviewReply(raw, fallback) {
+  return {
+    id: String(raw.id ?? raw._id ?? ""),
+    targetId: String(raw.targetId ?? fallback.targetId),
+    reviewId: String(raw.reviewId ?? fallback.reviewId),
+    content: String(raw.content ?? raw.replyText ?? raw.responseText ?? ""),
+    createdAt: String(raw.createdAt ?? (/* @__PURE__ */ new Date()).toISOString()),
+    updatedAt: raw.updatedAt,
+    edited: raw.edited ?? false,
+    author: normalizeReviewAuthor(raw.author ?? raw.repliedBy ?? null),
+    authorLabel: raw.authorLabel,
+    permissions: raw.permissions
+  };
+}
+function normalizeReview(raw, fallbackTargetId = "") {
+  const id = String(raw.id ?? raw._id ?? "");
+  const targetId = String(
+    raw.targetId ?? raw.gameSlug ?? raw.productSlug ?? raw.courseId ?? fallbackTargetId
+  );
+  const replies = raw.replies ? raw.replies.map(
+    (reply) => normalizeReviewReply(reply, {
+      targetId,
+      reviewId: id
+    })
+  ) : raw.ownerReply ? [
+    normalizeReviewReply(raw.ownerReply, {
+      targetId,
+      reviewId: id
+    })
+  ] : [];
+  return {
+    id,
+    targetId,
+    content: String(raw.content ?? raw.reviewText ?? ""),
+    rating: Number(raw.rating ?? 0),
+    isRecommended: raw.isRecommended,
+    createdAt: String(raw.createdAt ?? (/* @__PURE__ */ new Date()).toISOString()),
+    updatedAt: raw.updatedAt,
+    edited: raw.edited ?? false,
+    author: normalizeReviewAuthor(raw.author ?? raw.reviewedBy ?? null),
+    replies,
+    permissions: raw.permissions
+  };
+}
+function ReviewHeader({ review, config }) {
+  const author = review.author;
+  const displayName = author?.firstName || author?.lastName ? `${author?.firstName ?? ""} ${author?.lastName ?? ""}`.trim() : author?.username ?? "Unknown";
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+    /* @__PURE__ */ jsx(Avatar, { src: author?.avatar, size: "sm" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-gray-900 dark:text-gray-100", children: displayName }),
+        author?.username && /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+          "@",
+          author.username
+        ] }),
+        author?.role && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-neutral-800 dark:text-gray-300", children: author.role })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsx("span", { children: formatReviewDate(review.createdAt, config.dateFormat) }),
+        review.edited && /* @__PURE__ */ jsx("span", { children: "(edited)" })
+      ] })
+    ] })
+  ] });
+}
+var ReviewHeader_default = ReviewHeader;
+function ReviewContent({ review }) {
+  return /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-gray-700 dark:text-gray-300", children: review.content });
+}
+var ReviewContent_default = ReviewContent;
+function ReviewRating({ rating, maxRating }) {
+  const items = Array.from(
+    {
+      length: maxRating
+    },
+    (_, index) => index + 1
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "inline-flex items-center gap-0.5",
+      "aria-label": `${rating} out of ${maxRating}`,
+      children: items.map((item) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: item <= rating ? "text-sm text-yellow-400" : "text-sm text-gray-300 dark:text-neutral-700",
+          children: "\u2605"
+        },
+        item
+      ))
+    }
+  );
+}
+var ReviewRating_default = ReviewRating;
+function ReviewRecommendation({ isRecommended }) {
+  if (typeof isRecommended !== "boolean") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `
+        inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium
+        ${isRecommended ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"}
+      `,
+      children: [
+        isRecommended ? /* @__PURE__ */ jsx(BiCheckCircle, { size: 16 }) : /* @__PURE__ */ jsx(BiXCircle, { size: 16 }),
+        isRecommended ? "Recommended" : "Not Recommended"
+      ]
+    }
+  );
+}
+var ReviewRecommendation_default = ReviewRecommendation;
+function MyReviewPanel({
+  currentUser,
+  myReview,
+  loading = false,
+  disabled = false,
+  config,
+  components,
+  onLoginClick,
+  onCreateReview,
+  onUpdateReview,
+  onEditReview,
+  onDeleteReview
+}) {
+  const [editing, setEditing] = useState(false);
+  const ComposerComponent = components?.Composer ?? ReviewComposer_default;
+  const FormComponent = components?.Form ?? ReviewForm_default;
+  const HeaderComponent = components?.Header ?? ReviewHeader_default;
+  const ContentComponent = components?.Content ?? ReviewContent_default;
+  const RatingComponent = components?.Rating ?? ReviewRating_default;
+  const RecommendationComponent = components?.Recommendation ?? ReviewRecommendation_default;
+  async function handleCreateReview(values) {
+    await onCreateReview(values);
+  }
+  async function handleUpdateReview(values) {
+    if (!myReview) {
+      return;
+    }
+    await onUpdateReview(myReview, values);
+    setEditing(false);
+  }
+  function handleEdit() {
+    if (!myReview) {
+      return;
+    }
+    if (onEditReview) {
+      onEditReview(myReview);
+      return;
+    }
+    setEditing(true);
+  }
+  function handleDelete() {
+    if (!myReview) {
+      return;
+    }
+    onDeleteReview?.(myReview);
+  }
+  if (!config.showMyReviewPanel) {
+    return null;
+  }
+  if (!myReview) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "My Review" }),
+      /* @__PURE__ */ jsx(
+        ComposerComponent,
+        {
+          currentUser,
+          placeholder: "Write your review...",
+          submitLabel: "Post Review",
+          loading,
+          disabled,
+          config,
+          onLoginClick,
+          onSubmit: handleCreateReview
+        }
+      )
+    ] });
+  }
+  if (editing) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Update My Review" }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsx(
+        FormComponent,
+        {
+          initialValues: {
+            content: myReview.content,
+            rating: myReview.rating,
+            isRecommended: myReview.isRecommended
+          },
+          placeholder: "Update your review...",
+          submitLabel: "Update Review",
+          loading,
+          disabled,
+          autoFocus: true,
+          config,
+          onSubmit: handleUpdateReview,
+          onCancel: () => setEditing(false)
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "My Review" }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsx(HeaderComponent, { review: myReview, config }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button_default,
+            {
+              text: "Edit",
+              variant: "secondary",
+              appearance: "ghost",
+              disabled: disabled || loading,
+              onClick: handleEdit
+            }
+          ),
+          onDeleteReview && /* @__PURE__ */ jsx(
+            Button_default,
+            {
+              text: "Delete",
+              variant: "danger",
+              appearance: "ghost",
+              disabled: disabled || loading,
+              onClick: handleDelete
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ContentComponent, { review: myReview }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          RatingComponent,
+          {
+            rating: myReview.rating,
+            maxRating: config.maxRating
+          }
+        ),
+        config.allowRecommendation && /* @__PURE__ */ jsx(
+          RecommendationComponent,
+          {
+            isRecommended: myReview.isRecommended
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+var MyReviewPanel_default = MyReviewPanel;
+function ReviewMenuItem({
+  icon,
+  name,
+  badge,
+  to,
+  navigate,
+  className,
+  onClick,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      icon,
+      name,
+      badge,
+      to,
+      navigate,
+      onClick,
+      style,
+      className
+    }
+  );
+}
+function ReviewMenu({
+  open,
+  setOpen,
+  canEdit,
+  canDelete,
+  canReport,
+  canReply,
+  onEdit,
+  onDelete,
+  onReport,
+  onReply
+}) {
+  const ref = useRef(null);
+  useClickOutside(ref, () => setOpen(false));
+  const items = [];
+  if (canEdit) {
+    items.push({
+      type: "item",
+      icon: /* @__PURE__ */ jsx(BiEdit, {}),
+      name: "Edit Review",
+      component: ReviewMenuItem,
+      onClick: () => {
+        setOpen(false);
+        onEdit?.();
+      },
+      className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800"
+    });
+  }
+  if (canDelete) {
+    items.push({
+      type: "item",
+      icon: /* @__PURE__ */ jsx(BiTrash, {}),
+      name: "Delete Review",
+      component: ReviewMenuItem,
+      onClick: () => {
+        setOpen(false);
+        onDelete?.();
+      },
+      className: "flex w-full items-center gap-2 px-4 py-3 text-sm text-red-500 hover:bg-gray-100 dark:hover:bg-neutral-800"
+    });
+  }
+  if (canReport) {
+    items.push({
+      type: "item",
+      icon: /* @__PURE__ */ jsx(BiFlag, {}),
+      name: "Report Review",
+      component: ReviewMenuItem,
+      onClick: () => {
+        setOpen(false);
+        onReport?.();
+      },
+      className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800"
+    });
+  }
+  if (canReply) {
+    items.push({
+      type: "item",
+      icon: /* @__PURE__ */ jsx(BiReply, {}),
+      name: "Reply as Owner",
+      component: ReviewMenuItem,
+      onClick: () => {
+        setOpen(false);
+        onReply?.();
+      },
+      className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800"
+    });
+  }
+  if (!items.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: "text-gray-500 transition-colors hover:text-gray-900 dark:hover:text-gray-100",
+        "aria-label": "Review options",
+        children: /* @__PURE__ */ jsx(BiDotsVerticalRounded, { size: 20 })
+      }
+    ),
+    /* @__PURE__ */ jsx(Transition.TransitionDropdown, { visibility: open, children: /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-full z-50 mt-2 min-w-[190px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsx(Menu, { items }) }) })
+  ] });
+}
+var ReviewMenu_default = ReviewMenu;
+function ReviewActions({ canReply, onReply }) {
+  if (!canReply) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onReply,
+      className: "inline-flex items-center gap-1 font-medium transition-colors hover:text-gray-900 dark:hover:text-gray-100",
+      children: [
+        /* @__PURE__ */ jsx(BiReply, { size: 18 }),
+        "Reply as Owner"
+      ]
+    }
+  ) });
+}
+var ReviewActions_default = ReviewActions;
+function ReviewReplyHeader({ reply, config }) {
+  const author = reply.author;
+  const displayName = author?.firstName || author?.lastName ? `${author?.firstName ?? ""} ${author?.lastName ?? ""}`.trim() : author?.username ?? "Unknown";
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+    /* @__PURE__ */ jsx(Avatar, { src: author?.avatar, size: "sm" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-gray-900 dark:text-gray-100", children: displayName }),
+        (reply.authorLabel || author?.role) && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-blue-500/10 px-2 py-0.5 text-xs font-medium text-blue-500", children: reply.authorLabel ?? author?.role }),
+        author?.username && /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+          "@",
+          author.username
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsx("span", { children: formatReviewDate(reply.createdAt, config.dateFormat) }),
+        reply.edited && /* @__PURE__ */ jsx("span", { children: "(edited)" })
+      ] })
+    ] })
+  ] });
+}
+var ReviewReplyHeader_default = ReviewReplyHeader;
+function ReviewReplyContent({ reply }) {
+  return /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-gray-700 dark:text-gray-300", children: reply.content });
+}
+var ReviewReplyContent_default = ReviewReplyContent;
+function ReviewReplyMenuItem({
+  icon,
+  name,
+  badge,
+  to,
+  navigate,
+  className,
+  onClick,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      icon,
+      name,
+      badge,
+      to,
+      navigate,
+      onClick,
+      style,
+      className
+    }
+  );
+}
+function ReviewReplyMenu({
+  open,
+  setOpen,
+  canEdit,
+  canDelete,
+  canReport,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  const ref = useRef(null);
+  useClickOutside(ref, () => setOpen(false));
+  const items = [];
+  if (canEdit) {
+    items.push({
+      type: "item",
+      icon: /* @__PURE__ */ jsx(BiEdit, {}),
+      name: "Edit Reply",
+      component: ReviewReplyMenuItem,
+      onClick: () => {
+        setOpen(false);
+        onEdit?.();
+      },
+      className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800"
+    });
+  }
+  if (canDelete) {
+    items.push({
+      type: "item",
+      icon: /* @__PURE__ */ jsx(BiTrash, {}),
+      name: "Delete Reply",
+      component: ReviewReplyMenuItem,
+      onClick: () => {
+        setOpen(false);
+        onDelete?.();
+      },
+      className: "flex w-full items-center gap-2 px-4 py-3 text-sm text-red-500 hover:bg-gray-100 dark:hover:bg-neutral-800"
+    });
+  }
+  if (canReport) {
+    items.push({
+      type: "item",
+      icon: /* @__PURE__ */ jsx(BiFlag, {}),
+      name: "Report Reply",
+      component: ReviewReplyMenuItem,
+      onClick: () => {
+        setOpen(false);
+        onReport?.();
+      },
+      className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800"
+    });
+  }
+  if (!items.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: "text-gray-500 transition-colors hover:text-gray-900 dark:hover:text-gray-100",
+        "aria-label": "Review reply options",
+        children: /* @__PURE__ */ jsx(BiDotsVerticalRounded, { size: 18 })
+      }
+    ),
+    /* @__PURE__ */ jsx(Transition.TransitionDropdown, { visibility: open, children: /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-full z-50 mt-2 min-w-[180px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsx(Menu, { items }) }) })
+  ] });
+}
+var ReviewReplyMenu_default = ReviewReplyMenu;
+function ReviewReplyItem({
+  reply,
+  parentReview,
+  config,
+  components,
+  onEditReviewReply,
+  onDeleteReviewReply,
+  onReportReviewReply
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const HeaderComponent = components?.ReplyHeader ?? ReviewReplyHeader_default;
+  const ContentComponent = components?.ReplyContent ?? ReviewReplyContent_default;
+  const MenuComponent = components?.ReplyMenu ?? ReviewReplyMenu_default;
+  const canEdit = canEditReviewReply(reply);
+  const canDelete = canDeleteReviewReply(reply);
+  const canReport = canReportReviewReply(reply);
+  return /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-neutral-800 dark:bg-neutral-950", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsx(
+        HeaderComponent,
+        {
+          reply,
+          parentReview,
+          config
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MenuComponent,
+        {
+          reply,
+          parentReview,
+          open: menuOpen,
+          setOpen: setMenuOpen,
+          canEdit,
+          canDelete,
+          canReport,
+          onEdit: () => onEditReviewReply?.(reply, parentReview),
+          onDelete: () => onDeleteReviewReply?.(reply, parentReview),
+          onReport: () => onReportReviewReply?.(reply, parentReview)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(ContentComponent, { reply, parentReview })
+  ] }) });
+}
+var ReviewReplyItem_default = ReviewReplyItem;
+function ReviewReplyList({
+  review,
+  replies,
+  config,
+  components,
+  onEditReviewReply,
+  onDeleteReviewReply,
+  onReportReviewReply
+}) {
+  const ReplyItemComponent = components?.ReplyItem ?? ReviewReplyItem_default;
+  if (!config.allowReplies || !replies.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "ml-6 border-l border-gray-200 pl-4 dark:border-neutral-800", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: replies.map((reply) => /* @__PURE__ */ jsx(
+    ReplyItemComponent,
+    {
+      reply,
+      parentReview: review,
+      config,
+      components,
+      onEditReviewReply,
+      onDeleteReviewReply,
+      onReportReviewReply
+    },
+    reply.id
+  )) }) });
+}
+var ReviewReplyList_default = ReviewReplyList;
+function ReviewItem({
+  review,
+  config,
+  components,
+  onEditReview,
+  onDeleteReview,
+  onReportReview,
+  onReplyToReview,
+  onEditReviewReply,
+  onDeleteReviewReply,
+  onReportReviewReply
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const HeaderComponent = components?.Header ?? ReviewHeader_default;
+  const ContentComponent = components?.Content ?? ReviewContent_default;
+  const RatingComponent = components?.Rating ?? ReviewRating_default;
+  const RecommendationComponent = components?.Recommendation ?? ReviewRecommendation_default;
+  const MenuComponent = components?.Menu ?? ReviewMenu_default;
+  const ActionsComponent = components?.Actions ?? ReviewActions_default;
+  const ReplyListComponent = components?.ReplyList ?? ReviewReplyList_default;
+  const replies = review.replies ?? [];
+  const canEdit = canEditReview(review);
+  const canDelete = canDeleteReview(review);
+  const canReport = canReportReview(review);
+  const canReply = config.allowReplies && canReplyToReview(review) && replies.length < config.maxRepliesPerReview;
+  return /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsx(HeaderComponent, { review, config }),
+      /* @__PURE__ */ jsx(
+        MenuComponent,
+        {
+          review,
+          open: menuOpen,
+          setOpen: setMenuOpen,
+          canEdit,
+          canDelete,
+          canReport,
+          canReply,
+          onEdit: () => onEditReview?.(review),
+          onDelete: () => onDeleteReview?.(review),
+          onReport: () => onReportReview?.(review),
+          onReply: () => onReplyToReview?.(review)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(ContentComponent, { review }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsx(RatingComponent, { rating: review.rating, maxRating: config.maxRating }),
+      config.allowRecommendation && /* @__PURE__ */ jsx(RecommendationComponent, { isRecommended: review.isRecommended })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ActionsComponent,
+      {
+        review,
+        canReply,
+        onReply: () => onReplyToReview?.(review)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ReplyListComponent,
+      {
+        review,
+        replies,
+        config,
+        components,
+        onEditReviewReply,
+        onDeleteReviewReply,
+        onReportReviewReply
+      }
+    )
+  ] }) });
+}
+var ReviewItem_default = ReviewItem;
+function ReviewEmptyState({
+  title = "No reviews yet",
+  text = "There are no reviews to show."
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-dashed border-gray-300 bg-white p-8 text-center dark:border-neutral-800 dark:bg-neutral-900", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: title }),
+    text && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: text })
+  ] });
+}
+var ReviewEmptyState_default = ReviewEmptyState;
+function ReviewList({
+  reviews,
+  config,
+  components,
+  onEditReview,
+  onDeleteReview,
+  onReportReview,
+  onReplyToReview,
+  onEditReviewReply,
+  onDeleteReviewReply,
+  onReportReviewReply
+}) {
+  const ItemComponent = components?.Item ?? ReviewItem_default;
+  const EmptyStateComponent = components?.EmptyState ?? ReviewEmptyState_default;
+  if (!reviews.length) {
+    return /* @__PURE__ */ jsx(
+      EmptyStateComponent,
+      {
+        title: config.emptyTitle,
+        text: config.emptyText
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-5", children: reviews.map((review) => /* @__PURE__ */ jsx(
+    ItemComponent,
+    {
+      review,
+      config,
+      components,
+      onEditReview,
+      onDeleteReview,
+      onReportReview,
+      onReplyToReview,
+      onEditReviewReply,
+      onDeleteReviewReply,
+      onReportReviewReply
+    },
+    review.id
+  )) });
+}
+var ReviewList_default = ReviewList;
+
+// src/compositions/review-thread/constants/review-thread.constants.ts
+var DEFAULT_REVIEW_THREAD_CONFIG = {
+  reviewsPerPage: 10,
+  dateFormat: "relative",
+  minRating: 1,
+  maxRating: 5,
+  minContentLength: 8,
+  maxContentLength: 2e3,
+  allowRecommendation: true,
+  showMyReviewPanel: true,
+  showMyReviewInList: true,
+  allowReplies: true,
+  maxRepliesPerReview: 1,
+  ownerReplyLabel: "Owner",
+  emptyTitle: "No reviews yet",
+  emptyText: "There are no reviews to show."
+};
+function isReviewEntity(value) {
+  return Boolean(value && "rating" in value);
+}
+function updateReviewEverywhere(review, updater) {
+  return updater(review);
+}
+function useReviewThreadState({
+  targetId,
+  dataSource,
+  config,
+  shouldLoadMyReview = true,
+  loading = false,
+  updatedReview,
+  deletedReview,
+  updatedReviewReply,
+  deletedReviewReply,
+  onReviewCreated,
+  onReviewUpdated,
+  onReviewDeleted
+}) {
+  const [reviews, setReviews] = useState([]);
+  const [myReview, setMyReview] = useState(null);
+  const [isLoadingReviews, setIsLoadingReviews] = useState(true);
+  const [isLoadingMyReview, setIsLoadingMyReview] = useState(
+    Boolean(dataSource.getMyReview && shouldLoadMyReview)
+  );
+  const [isCreatingReview, setIsCreatingReview] = useState(false);
+  const [isUpdatingReview, setIsUpdatingReview] = useState(false);
+  const [isDeletingReview, setIsDeletingReview] = useState(false);
+  const [isCreatingReviewReply, setIsCreatingReviewReply] = useState(false);
+  const [isUpdatingReviewReply, setIsUpdatingReviewReply] = useState(false);
+  const [isDeletingReviewReply, setIsDeletingReviewReply] = useState(false);
+  const [reviewsError, setReviewsError] = useState(null);
+  const [myReviewError, setMyReviewError] = useState(null);
+  const error = reviewsError ?? myReviewError;
+  const visibleReviews = useMemo(() => {
+    if (config.showMyReviewInList || !myReview) {
+      return reviews;
+    }
+    return reviews.filter((review) => review.id !== myReview.id);
+  }, [config.showMyReviewInList, myReview, reviews]);
+  const applyReview = useCallback((review) => {
+    setReviews((prev) => upsertReview(prev, review));
+    setMyReview((prev) => {
+      if (!prev || prev.id !== review.id) {
+        return prev;
+      }
+      return review;
+    });
+  }, []);
+  const applyReviewUpdater = useCallback(
+    (reviewId, updater) => {
+      setReviews((prev) => updateReview(prev, reviewId, updater));
+      setMyReview((prev) => {
+        if (!prev || prev.id !== reviewId) {
+          return prev;
+        }
+        return updateReviewEverywhere(prev, updater);
+      });
+    },
+    []
+  );
+  const removeReviewById = useCallback((reviewId) => {
+    setReviews((prev) => removeReview(prev, reviewId));
+    setMyReview((prev) => {
+      if (!prev || prev.id !== reviewId) {
+        return prev;
+      }
+      return null;
+    });
+  }, []);
+  const loadReviews = useCallback(async () => {
+    try {
+      setIsLoadingReviews(true);
+      setReviewsError(null);
+      const result = await dataSource.getReviews({
+        limit: config.reviewsPerPage
+      });
+      setReviews(result.items);
+    } catch (error2) {
+      setReviewsError(error2);
+    } finally {
+      setIsLoadingReviews(false);
+    }
+  }, [config.reviewsPerPage, dataSource, targetId]);
+  const loadMyReview = useCallback(async () => {
+    if (!dataSource.getMyReview || !shouldLoadMyReview) {
+      setMyReview(null);
+      setIsLoadingMyReview(false);
+      setMyReviewError(null);
+      return;
+    }
+    try {
+      setIsLoadingMyReview(true);
+      setMyReviewError(null);
+      const result = await dataSource.getMyReview();
+      setMyReview(result);
+    } catch (error2) {
+      setMyReview(null);
+      setMyReviewError(error2);
+    } finally {
+      setIsLoadingMyReview(false);
+    }
+  }, [dataSource, shouldLoadMyReview, targetId]);
+  const reload = useCallback(async () => {
+    await Promise.all([loadReviews(), loadMyReview()]);
+  }, [loadReviews, loadMyReview]);
+  const createReview = useCallback(
+    async (values) => {
+      try {
+        setIsCreatingReview(true);
+        const review = await dataSource.createReview({
+          content: values.content,
+          rating: values.rating,
+          isRecommended: values.isRecommended
+        });
+        setMyReview(review);
+        setReviews((prev) => prependReview(prev, review));
+        onReviewCreated?.(review);
+        return review;
+      } finally {
+        setIsCreatingReview(false);
+      }
+    },
+    [dataSource, onReviewCreated]
+  );
+  const updateReview2 = useCallback(
+    async (review, values) => {
+      try {
+        setIsUpdatingReview(true);
+        const updated = await dataSource.updateReview({
+          id: review.id,
+          content: values.content,
+          rating: values.rating,
+          isRecommended: values.isRecommended
+        });
+        setMyReview((prev) => {
+          if (!prev || prev.id !== updated.id) {
+            return prev;
+          }
+          return updated;
+        });
+        setReviews((prev) => upsertReview(prev, updated));
+        onReviewUpdated?.(updated);
+        return updated;
+      } finally {
+        setIsUpdatingReview(false);
+      }
+    },
+    [dataSource, onReviewUpdated]
+  );
+  const deleteReview = useCallback(
+    async (review) => {
+      try {
+        setIsDeletingReview(true);
+        await dataSource.deleteReview(review.id);
+        removeReviewById(review.id);
+        onReviewDeleted?.(review);
+      } finally {
+        setIsDeletingReview(false);
+      }
+    },
+    [dataSource, onReviewDeleted, removeReviewById]
+  );
+  const createReviewReply = useCallback(
+    async (input) => {
+      if (!dataSource.createReviewReply) {
+        throw new Error("createReviewReply is not implemented by dataSource.");
+      }
+      try {
+        setIsCreatingReviewReply(true);
+        const result = await dataSource.createReviewReply(input);
+        if (isReviewEntity(result)) {
+          applyReview(result);
+        } else {
+          applyReviewUpdater(
+            input.reviewId,
+            (review) => addReviewReply(review, result, config.maxRepliesPerReview)
+          );
+        }
+        return result;
+      } finally {
+        setIsCreatingReviewReply(false);
+      }
+    },
+    [
+      applyReview,
+      applyReviewUpdater,
+      config.maxRepliesPerReview,
+      dataSource
+    ]
+  );
+  const updateReviewReply2 = useCallback(
+    async (input) => {
+      if (!dataSource.updateReviewReply) {
+        throw new Error("updateReviewReply is not implemented by dataSource.");
+      }
+      try {
+        setIsUpdatingReviewReply(true);
+        const result = await dataSource.updateReviewReply(input);
+        if (isReviewEntity(result)) {
+          applyReview(result);
+        } else {
+          applyReviewUpdater(
+            input.reviewId,
+            (review) => replaceReviewReply(review, result)
+          );
+        }
+        return result;
+      } finally {
+        setIsUpdatingReviewReply(false);
+      }
+    },
+    [applyReview, applyReviewUpdater, dataSource]
+  );
+  const deleteReviewReply = useCallback(
+    async (reviewId, replyId) => {
+      if (!dataSource.deleteReviewReply) {
+        throw new Error("deleteReviewReply is not implemented by dataSource.");
+      }
+      try {
+        setIsDeletingReviewReply(true);
+        const result = await dataSource.deleteReviewReply(reviewId, replyId);
+        if (isReviewEntity(result)) {
+          applyReview(result);
+        } else {
+          applyReviewUpdater(
+            reviewId,
+            (review) => removeReviewReply(review, replyId)
+          );
+        }
+        return result;
+      } finally {
+        setIsDeletingReviewReply(false);
+      }
+    },
+    [applyReview, applyReviewUpdater, dataSource]
+  );
+  useEffect(() => {
+    let cancelled = false;
+    async function run() {
+      try {
+        setIsLoadingReviews(true);
+        setReviewsError(null);
+        const result = await dataSource.getReviews({
+          limit: config.reviewsPerPage
+        });
+        if (!cancelled) {
+          setReviews(result.items);
+        }
+      } catch (error2) {
+        if (!cancelled) {
+          setReviewsError(error2);
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoadingReviews(false);
+        }
+      }
+    }
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [config.reviewsPerPage, dataSource, targetId]);
+  useEffect(() => {
+    let cancelled = false;
+    async function run() {
+      if (!dataSource.getMyReview || !shouldLoadMyReview) {
+        setMyReview(null);
+        setMyReviewError(null);
+        setIsLoadingMyReview(false);
+        return;
+      }
+      try {
+        setIsLoadingMyReview(true);
+        setMyReviewError(null);
+        const result = await dataSource.getMyReview();
+        if (!cancelled) {
+          setMyReview(result);
+        }
+      } catch (error2) {
+        if (!cancelled) {
+          setMyReview(null);
+          setMyReviewError(error2);
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoadingMyReview(false);
+        }
+      }
+    }
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [dataSource, shouldLoadMyReview, targetId]);
+  useEffect(() => {
+    if (!updatedReview) {
+      return;
+    }
+    applyReview(updatedReview);
+  }, [applyReview, updatedReview]);
+  useEffect(() => {
+    if (!deletedReview) {
+      return;
+    }
+    removeReviewById(deletedReview.id);
+  }, [deletedReview, removeReviewById]);
+  useEffect(() => {
+    if (!updatedReviewReply) {
+      return;
+    }
+    if (updatedReviewReply.review) {
+      applyReview(updatedReviewReply.review);
+      return;
+    }
+    if (!updatedReviewReply.reply) {
+      return;
+    }
+    applyReviewUpdater(updatedReviewReply.reviewId, (review) => {
+      if (hasReviewReply(review, updatedReviewReply.reply.id)) {
+        return replaceReviewReply(review, updatedReviewReply.reply);
+      }
+      return addReviewReply(
+        review,
+        updatedReviewReply.reply,
+        config.maxRepliesPerReview
+      );
+    });
+  }, [
+    applyReview,
+    applyReviewUpdater,
+    config.maxRepliesPerReview,
+    updatedReviewReply
+  ]);
+  useEffect(() => {
+    if (!deletedReviewReply) {
+      return;
+    }
+    if (deletedReviewReply.review) {
+      applyReview(deletedReviewReply.review);
+      return;
+    }
+    applyReviewUpdater(
+      deletedReviewReply.reviewId,
+      (review) => removeReviewReply(review, deletedReviewReply.replyId)
+    );
+  }, [applyReview, applyReviewUpdater, deletedReviewReply]);
+  return {
+    reviews,
+    visibleReviews,
+    myReview,
+    isLoadingReviews,
+    isLoadingMyReview,
+    isInitialLoading: loading || isLoadingReviews || isLoadingMyReview,
+    isCreatingReview,
+    isUpdatingReview,
+    isDeletingReview,
+    isCreatingReviewReply,
+    isUpdatingReviewReply,
+    isDeletingReviewReply,
+    reviewsError,
+    myReviewError,
+    error,
+    setReviews,
+    setMyReview,
+    loadReviews,
+    loadMyReview,
+    reload,
+    createReview,
+    updateReview: updateReview2,
+    deleteReview,
+    createReviewReply,
+    updateReviewReply: updateReviewReply2,
+    deleteReviewReply,
+    applyReview,
+    removeReviewById
+  };
+}
+function ReviewThread({
+  targetId,
+  currentUser,
+  dataSource,
+  loading = false,
+  disabled = false,
+  config,
+  components,
+  updatedReview,
+  deletedReview,
+  updatedReviewReply,
+  deletedReviewReply,
+  onLoginClick,
+  onEditReview,
+  onDeleteReview,
+  onReportReview,
+  onReplyToReview,
+  onEditReviewReply,
+  onDeleteReviewReply,
+  onReportReviewReply,
+  onReviewCreated,
+  onReviewUpdated,
+  onReviewDeleted
+}) {
+  const resolvedConfig = {
+    ...DEFAULT_REVIEW_THREAD_CONFIG,
+    ...config
+  };
+  const reviewState = useReviewThreadState({
+    targetId,
+    dataSource,
+    config: resolvedConfig,
+    shouldLoadMyReview: Boolean(currentUser),
+    loading,
+    updatedReview,
+    deletedReview,
+    updatedReviewReply,
+    deletedReviewReply,
+    onReviewCreated,
+    onReviewUpdated,
+    onReviewDeleted
+  });
+  function handleEditReview(review) {
+    onEditReview?.(review);
+  }
+  function handleDeleteReview(review) {
+    if (onDeleteReview) {
+      onDeleteReview(review);
+      return;
+    }
+    void reviewState.deleteReview(review);
+  }
+  function handleReportReview(review) {
+    onReportReview?.(review);
+  }
+  function handleReplyToReview(review) {
+    onReplyToReview?.(review);
+  }
+  function handleEditReviewReply(reply, parentReview) {
+    onEditReviewReply?.(reply, parentReview);
+  }
+  function handleDeleteReviewReply(reply, parentReview) {
+    onDeleteReviewReply?.(reply, parentReview);
+  }
+  function handleReportReviewReply(reply, parentReview) {
+    onReportReviewReply?.(reply, parentReview);
+  }
+  if (reviewState.isInitialLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      resolvedConfig.showMyReviewPanel && /* @__PURE__ */ jsx("div", { className: "h-40 animate-pulse rounded-xl bg-gray-100 dark:bg-neutral-900" }),
+      /* @__PURE__ */ jsx("div", { className: "h-36 animate-pulse rounded-xl bg-gray-100 dark:bg-neutral-900" }),
+      /* @__PURE__ */ jsx("div", { className: "h-36 animate-pulse rounded-xl bg-gray-100 dark:bg-neutral-900" })
+    ] });
+  }
+  if (reviewState.error && !reviewState.reviews.length) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-5 dark:border-red-500/20 dark:bg-red-500/10", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-red-700 dark:text-red-400", children: "Failed to load reviews" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-red-600/80 dark:text-red-300/80", children: "Something went wrong while loading the review thread." })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Button_default,
+        {
+          text: "Retry",
+          variant: "danger",
+          appearance: "ghost",
+          onClick: () => {
+            void reviewState.reload();
+          }
+        }
+      ) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+    resolvedConfig.showMyReviewPanel && /* @__PURE__ */ jsx(
+      MyReviewPanel_default,
+      {
+        currentUser,
+        myReview: reviewState.myReview,
+        loading: reviewState.isCreatingReview || reviewState.isUpdatingReview || reviewState.isDeletingReview,
+        disabled,
+        config: resolvedConfig,
+        components,
+        onLoginClick,
+        onCreateReview: reviewState.createReview,
+        onUpdateReview: reviewState.updateReview,
+        onEditReview: handleEditReview,
+        onDeleteReview: handleDeleteReview
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ReviewList_default,
+      {
+        reviews: reviewState.visibleReviews,
+        config: resolvedConfig,
+        components,
+        onEditReview: handleEditReview,
+        onDeleteReview: handleDeleteReview,
+        onReportReview: handleReportReview,
+        onReplyToReview: handleReplyToReview,
+        onEditReviewReply: handleEditReviewReply,
+        onDeleteReviewReply: handleDeleteReviewReply,
+        onReportReviewReply: handleReportReviewReply
+      }
+    )
+  ] });
+}
+var ReviewThread_default = ReviewThread;
 function GenericLayout({
   children,
   styles,
@@ -23064,6 +24631,6 @@ function ScrollToTop({
 }
 var ScrollToTop_default = ScrollToTop;
 
-export { Accordion_default as Accordion, AreaPlot, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarPlot, BaseChartDataSource, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand_default as Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_default as Button, CHART_COLOR_PALETTE, CHART_DARK_THEME, CHART_DATA_MODES, CHART_DEFAULT_ACTIVE_DOT_RADIUS, CHART_DEFAULT_ANIMATION_DURATION, CHART_DEFAULT_BAR_RADIUS, CHART_DEFAULT_DOT_RADIUS, CHART_DEFAULT_HEIGHT, CHART_DEFAULT_MARGIN, CHART_DEFAULT_MAX_REALTIME_POINTS, CHART_DEFAULT_POLLING_INTERVAL, CHART_DEFAULT_STROKE_WIDTH, CHART_EMPTY_MESSAGE, CHART_ERROR_MESSAGE, CHART_LIGHT_THEME, CHART_LOADING_MESSAGE, CHART_STATUSES, CHART_STATUS_COLORS, CHART_VALUE_FORMATS, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Chart, ChartContainer, ChartContext, ChartEmptyState, ChartErrorState, ChartHeader, ChartLegend, ChartLoadingState, ChartPanel, ChartProvider, ChartToolbar, ChartTooltip, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryProvider, CloudinaryVideo_default as CloudinaryVideo, Code, CommentThread_default as CommentThread, ConfigBootstrap_default as ConfigBootstrap, Configurator, ConfiguratorError, Content, ContentArea_default as ContentArea, DEFAULT_CHART_THEME, DataView, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, EnvErrorScreen_default as EnvErrorScreen, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse_default as FormResponse, GaugePlot, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, InfiniteScrollTrigger_default as InfiniteScrollTrigger, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LinePlot, Link, List_default as List, ListItem_default as ListItem, MarkdownEditor_default as MarkdownEditor, MarkdownProvider_default as MarkdownProvider, MarkdownTOC_default as MarkdownTOC, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating_default as NumericRating, Overline, Paragraph, PiePlot, PollingChartDataSource, PriceTag, ProgressBar, ProgressBarRating_default as ProgressBarRating, Quote, Radio_default as Radio, RealtimeChartDataSource, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScatterPlot, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, Spinner_default as Spinner, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, StatPlot, StaticChartDataSource, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table_default as Table, Tag_default as Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip6 as Tooltip, TopNav, Transition, TransitionAccordion_default as TransitionAccordion, TransitionBase_default as TransitionBase, TransitionDropdown_default as TransitionDropdown, TransitionFade_default as TransitionFade, TransitionFadeIn_default as TransitionFadeIn, TransitionScale_default as TransitionScale, TransitionSlide_default as TransitionSlide, Typography, UnderConstructionBanner, ValueBadge_default as ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo_default as YoutubeVideoPlayer, addReplyToCache, applyReactionState, assertAbsoluteURL, buildURL, chartReducer, cn, createConfigurator, createForceLayout, createGridLayout, createInitialChartState, createTreeLayout, createURLResolver, decrementReplyCount, enumValues, euiToast, formatChartValue, formatCommentDate, formatConfigError, getAllowedOrigins, getBrowserHref, getBrowserOrigin, getBrowserRedirectURL, getCurrencySymbol, getLayout, getOptimisticDislikeState, getOptimisticLikeState, getSafeRedirect, incrementReplyCount, isMatch, isRenderFn, limitRealtimePoints, normalize, normalizeChartData, normalizeChartDataPoint, parseJson, parseJsonRecord, parseUrlMap, registerLayout, removeComment, removeCommentTreeFromCache, replaceRealtimePoints, resolveAppearanceStyles, resolveChartColor, resolveChartColors, resolveWithGlobal, sendToast, toConfiguratorError, updateComment, updateReplyCacheComment, useChartContext, useChartData, useChartPolling, useChartRealtime, useChartSeries, useChartTheme, useClickOutside, useCloudinaryConfig, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useIsMobile_default as useIsMobile, useModal_default as useModal, useTheme_default as useTheme };
+export { Accordion_default as Accordion, AreaPlot, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarPlot, BaseChartDataSource, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand_default as Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_default as Button, CHART_COLOR_PALETTE, CHART_DARK_THEME, CHART_DATA_MODES, CHART_DEFAULT_ACTIVE_DOT_RADIUS, CHART_DEFAULT_ANIMATION_DURATION, CHART_DEFAULT_BAR_RADIUS, CHART_DEFAULT_DOT_RADIUS, CHART_DEFAULT_HEIGHT, CHART_DEFAULT_MARGIN, CHART_DEFAULT_MAX_REALTIME_POINTS, CHART_DEFAULT_POLLING_INTERVAL, CHART_DEFAULT_STROKE_WIDTH, CHART_EMPTY_MESSAGE, CHART_ERROR_MESSAGE, CHART_LIGHT_THEME, CHART_LOADING_MESSAGE, CHART_STATUSES, CHART_STATUS_COLORS, CHART_VALUE_FORMATS, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Chart, ChartContainer, ChartContext, ChartEmptyState, ChartErrorState, ChartHeader, ChartLegend, ChartLoadingState, ChartPanel, ChartProvider, ChartToolbar, ChartTooltip, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryProvider, CloudinaryVideo_default as CloudinaryVideo, Code, CommentThread_default as CommentThread, ConfigBootstrap_default as ConfigBootstrap, Configurator, ConfiguratorError, Content, ContentArea_default as ContentArea, DEFAULT_CHART_THEME, DEFAULT_REVIEW_THREAD_CONFIG, DataView, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, EnvErrorScreen_default as EnvErrorScreen, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse_default as FormResponse, GaugePlot, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, InfiniteScrollTrigger_default as InfiniteScrollTrigger, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LinePlot, Link, List_default as List, ListItem_default as ListItem, MarkdownEditor_default as MarkdownEditor, MarkdownProvider_default as MarkdownProvider, MarkdownTOC_default as MarkdownTOC, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating_default as NumericRating, Overline, Paragraph, PiePlot, PollingChartDataSource, PriceTag, ProgressBar, ProgressBarRating_default as ProgressBarRating, Quote, Radio_default as Radio, RealtimeChartDataSource, ReviewThread_default as ReviewThread, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScatterPlot, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, Spinner_default as Spinner, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, StatPlot, StaticChartDataSource, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table_default as Table, Tag_default as Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip6 as Tooltip, TopNav, Transition, TransitionAccordion_default as TransitionAccordion, TransitionBase_default as TransitionBase, TransitionDropdown_default as TransitionDropdown, TransitionFade_default as TransitionFade, TransitionFadeIn_default as TransitionFadeIn, TransitionScale_default as TransitionScale, TransitionSlide_default as TransitionSlide, Typography, UnderConstructionBanner, ValueBadge_default as ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo_default as YoutubeVideoPlayer, addReplyToCache, addReviewReply, appendReview, applyReactionState, assertAbsoluteURL, buildURL, canDeleteReview, canDeleteReviewReply, canEditReview, canEditReviewReply, canReplyToReview, canReportReview, canReportReviewReply, chartReducer, cn, createConfigurator, createForceLayout, createGridLayout, createInitialChartState, createTreeLayout, createURLResolver, decrementReplyCount, enumValues, euiToast, findReview, formatChartValue, formatCommentDate, formatConfigError, formatReviewDate, getAllowedOrigins, getBrowserHref, getBrowserOrigin, getBrowserRedirectURL, getCurrencySymbol, getLayout, getOptimisticDislikeState, getOptimisticLikeState, getSafeRedirect, hasReviewReply, incrementReplyCount, isMatch, isRenderFn, limitRealtimePoints, normalize, normalizeChartData, normalizeChartDataPoint, normalizeReview, normalizeReviewAuthor, normalizeReviewReply, parseJson, parseJsonRecord, parseUrlMap, prependReview, registerLayout, removeComment, removeCommentTreeFromCache, removeReview, removeReviewReply, replaceRealtimePoints, replaceReview, replaceReviewReply, resolveAppearanceStyles, resolveChartColor, resolveChartColors, resolveWithGlobal, sendToast, toConfiguratorError, updateComment, updateReplyCacheComment, updateReview, updateReviewReply, upsertReview, useChartContext, useChartData, useChartPolling, useChartRealtime, useChartSeries, useChartTheme, useClickOutside, useCloudinaryConfig, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useIsMobile_default as useIsMobile, useModal_default as useModal, useReviewThreadState, useTheme_default as useTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map