elseware-ui 2.36.9 → 2.37.0

package/dist/index.js

@@ -22976,6 +22976,1573 @@ var TopNav = ({
   };
   return /* @__PURE__ */ jsxRuntime.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] = React2.useState(initialValues?.content ?? "");
+  const [rating, setRating] = React2.useState(initialValues?.rating ?? 0);
+  const [isRecommended, setIsRecommended] = React2.useState(
+    initialValues?.isRecommended ?? true
+  );
+  const [error, setError] = React2.useState("");
+  const contentLength = content.trim().length;
+  const ratingItems = React2.useMemo(() => {
+    return Array.from(
+      {
+        length: config.maxRating
+      },
+      (_, index) => index + 1
+    );
+  }, [config.maxRating]);
+  React2.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 text-xs text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        contentLength,
+        "/",
+        config.maxContentLength
+      ] }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: error })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Rating" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: ratingItems.map((item) => {
+        const active = item <= rating;
+        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Do you recommend this?" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "radio",
+              checked: isRecommended,
+              disabled: disabled || loading,
+              onChange: () => setIsRecommended(true)
+            }
+          ),
+          "Yes"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "radio",
+              checked: !isRecommended,
+              disabled: disabled || loading,
+              onChange: () => setIsRecommended(false)
+            }
+          ),
+          "No"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+      onCancel && /* @__PURE__ */ jsxRuntime.jsx(
+        Button_default,
+        {
+          text: cancelLabel,
+          variant: "secondary",
+          appearance: "ghost",
+          disabled: loading,
+          onClick: onCancel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Please login to post your review." }),
+      onLoginClick && /* @__PURE__ */ jsxRuntime.jsx(Button_default, { text: "Login", variant: "primary", onClick: onLoginClick })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: currentUser.avatar, size: "md" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: author?.avatar, size: "sm" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold text-gray-900 dark:text-gray-100", children: displayName }),
+        author?.username && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+          "@",
+          author.username
+        ] }),
+        author?.role && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatReviewDate(review.createdAt, config.dateFormat) }),
+        review.edited && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "(edited)" })
+      ] })
+    ] })
+  ] });
+}
+var ReviewHeader_default = ReviewHeader;
+function ReviewContent({ review }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "inline-flex items-center gap-0.5",
+      "aria-label": `${rating} out of ${maxRating}`,
+      children: items.map((item) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(bi.BiCheckCircle, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(bi.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] = React2.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "My Review" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ComposerComponent,
+        {
+          currentUser,
+          placeholder: "Write your review...",
+          submitLabel: "Post Review",
+          loading,
+          disabled,
+          config,
+          onLoginClick,
+          onSubmit: handleCreateReview
+        }
+      )
+    ] });
+  }
+  if (editing) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Update My Review" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "My Review" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(HeaderComponent, { review: myReview, config }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button_default,
+            {
+              text: "Edit",
+              variant: "secondary",
+              appearance: "ghost",
+              disabled: disabled || loading,
+              onClick: handleEdit
+            }
+          ),
+          onDeleteReview && /* @__PURE__ */ jsxRuntime.jsx(
+            Button_default,
+            {
+              text: "Delete",
+              variant: "danger",
+              appearance: "ghost",
+              disabled: disabled || loading,
+              onClick: handleDelete
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ContentComponent, { review: myReview }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RatingComponent,
+          {
+            rating: myReview.rating,
+            maxRating: config.maxRating
+          }
+        ),
+        config.allowRecommendation && /* @__PURE__ */ jsxRuntime.jsx(
+          RecommendationComponent,
+          {
+            isRecommended: myReview.isRecommended
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+var MyReviewPanel_default = MyReviewPanel;
+function ReviewMenuItem({
+  icon,
+  name,
+  badge,
+  to,
+  navigate,
+  className,
+  onClick,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenuItem,
+    {
+      icon,
+      name,
+      badge,
+      to,
+      navigate,
+      onClick,
+      style,
+      className
+    }
+  );
+}
+function ReviewMenu({
+  open,
+  setOpen,
+  canEdit,
+  canDelete,
+  canReport,
+  canReply,
+  onEdit,
+  onDelete,
+  onReport,
+  onReply
+}) {
+  const ref = React2.useRef(null);
+  useClickOutside(ref, () => setOpen(false));
+  const items = [];
+  if (canEdit) {
+    items.push({
+      type: "item",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(bi.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__ */ jsxRuntime.jsx(bi.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__ */ jsxRuntime.jsx(bi.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__ */ jsxRuntime.jsx(bi.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__ */ jsxRuntime.jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(bi.BiDotsVerticalRounded, { size: 20 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility: open, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Menu, { items }) }) })
+  ] });
+}
+var ReviewMenu_default = ReviewMenu;
+function ReviewActions({ canReply, onReply }) {
+  if (!canReply) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(bi.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__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: author?.avatar, size: "sm" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold text-gray-900 dark:text-gray-100", children: displayName }),
+        (reply.authorLabel || author?.role) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+          "@",
+          author.username
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatReviewDate(reply.createdAt, config.dateFormat) }),
+        reply.edited && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "(edited)" })
+      ] })
+    ] })
+  ] });
+}
+var ReviewReplyHeader_default = ReviewReplyHeader;
+function ReviewReplyContent({ reply }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    MenuItem,
+    {
+      icon,
+      name,
+      badge,
+      to,
+      navigate,
+      onClick,
+      style,
+      className
+    }
+  );
+}
+function ReviewReplyMenu({
+  open,
+  setOpen,
+  canEdit,
+  canDelete,
+  canReport,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  const ref = React2.useRef(null);
+  useClickOutside(ref, () => setOpen(false));
+  const items = [];
+  if (canEdit) {
+    items.push({
+      type: "item",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(bi.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__ */ jsxRuntime.jsx(bi.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__ */ jsxRuntime.jsx(bi.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__ */ jsxRuntime.jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(bi.BiDotsVerticalRounded, { size: 18 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility: open, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Menu, { items }) }) })
+  ] });
+}
+var ReviewReplyMenu_default = ReviewReplyMenu;
+function ReviewReplyItem({
+  reply,
+  parentReview,
+  config,
+  components,
+  onEditReviewReply,
+  onDeleteReviewReply,
+  onReportReviewReply
+}) {
+  const [menuOpen, setMenuOpen] = React2.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__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-neutral-800 dark:bg-neutral-950", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        HeaderComponent,
+        {
+          reply,
+          parentReview,
+          config
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MenuComponent,
+        {
+          reply,
+          parentReview,
+          open: menuOpen,
+          setOpen: setMenuOpen,
+          canEdit,
+          canDelete,
+          canReport,
+          onEdit: () => onEditReviewReply?.(reply, parentReview),
+          onDelete: () => onDeleteReviewReply?.(reply, parentReview),
+          onReport: () => onReportReviewReply?.(reply, parentReview)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "ml-6 border-l border-gray-200 pl-4 dark:border-neutral-800", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: replies.map((reply) => /* @__PURE__ */ jsxRuntime.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] = React2.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__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(HeaderComponent, { review, config }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MenuComponent,
+        {
+          review,
+          open: menuOpen,
+          setOpen: setMenuOpen,
+          canEdit,
+          canDelete,
+          canReport,
+          canReply,
+          onEdit: () => onEditReview?.(review),
+          onDelete: () => onDeleteReview?.(review),
+          onReport: () => onReportReview?.(review),
+          onReply: () => onReplyToReview?.(review)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ContentComponent, { review }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RatingComponent, { rating: review.rating, maxRating: config.maxRating }),
+      config.allowRecommendation && /* @__PURE__ */ jsxRuntime.jsx(RecommendationComponent, { isRecommended: review.isRecommended })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ActionsComponent,
+      {
+        review,
+        canReply,
+        onReply: () => onReplyToReview?.(review)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: title }),
+    text && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      EmptyStateComponent,
+      {
+        title: config.emptyTitle,
+        text: config.emptyText
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-5", children: reviews.map((review) => /* @__PURE__ */ jsxRuntime.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] = React2.useState([]);
+  const [myReview, setMyReview] = React2.useState(null);
+  const [isLoadingReviews, setIsLoadingReviews] = React2.useState(true);
+  const [isLoadingMyReview, setIsLoadingMyReview] = React2.useState(
+    Boolean(dataSource.getMyReview && shouldLoadMyReview)
+  );
+  const [isCreatingReview, setIsCreatingReview] = React2.useState(false);
+  const [isUpdatingReview, setIsUpdatingReview] = React2.useState(false);
+  const [isDeletingReview, setIsDeletingReview] = React2.useState(false);
+  const [isCreatingReviewReply, setIsCreatingReviewReply] = React2.useState(false);
+  const [isUpdatingReviewReply, setIsUpdatingReviewReply] = React2.useState(false);
+  const [isDeletingReviewReply, setIsDeletingReviewReply] = React2.useState(false);
+  const [reviewsError, setReviewsError] = React2.useState(null);
+  const [myReviewError, setMyReviewError] = React2.useState(null);
+  const error = reviewsError ?? myReviewError;
+  const visibleReviews = React2.useMemo(() => {
+    if (config.showMyReviewInList || !myReview) {
+      return reviews;
+    }
+    return reviews.filter((review) => review.id !== myReview.id);
+  }, [config.showMyReviewInList, myReview, reviews]);
+  const applyReview = React2.useCallback((review) => {
+    setReviews((prev) => upsertReview(prev, review));
+    setMyReview((prev) => {
+      if (!prev || prev.id !== review.id) {
+        return prev;
+      }
+      return review;
+    });
+  }, []);
+  const applyReviewUpdater = React2.useCallback(
+    (reviewId, updater) => {
+      setReviews((prev) => updateReview(prev, reviewId, updater));
+      setMyReview((prev) => {
+        if (!prev || prev.id !== reviewId) {
+          return prev;
+        }
+        return updateReviewEverywhere(prev, updater);
+      });
+    },
+    []
+  );
+  const removeReviewById = React2.useCallback((reviewId) => {
+    setReviews((prev) => removeReview(prev, reviewId));
+    setMyReview((prev) => {
+      if (!prev || prev.id !== reviewId) {
+        return prev;
+      }
+      return null;
+    });
+  }, []);
+  const loadReviews = React2.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 = React2.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 = React2.useCallback(async () => {
+    await Promise.all([loadReviews(), loadMyReview()]);
+  }, [loadReviews, loadMyReview]);
+  const createReview = React2.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 = React2.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 = React2.useCallback(
+    async (review) => {
+      try {
+        setIsDeletingReview(true);
+        await dataSource.deleteReview(review.id);
+        removeReviewById(review.id);
+        onReviewDeleted?.(review);
+      } finally {
+        setIsDeletingReview(false);
+      }
+    },
+    [dataSource, onReviewDeleted, removeReviewById]
+  );
+  const createReviewReply = React2.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 = React2.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 = React2.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]
+  );
+  React2.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]);
+  React2.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]);
+  React2.useEffect(() => {
+    if (!updatedReview) {
+      return;
+    }
+    applyReview(updatedReview);
+  }, [applyReview, updatedReview]);
+  React2.useEffect(() => {
+    if (!deletedReview) {
+      return;
+    }
+    removeReviewById(deletedReview.id);
+  }, [deletedReview, removeReviewById]);
+  React2.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
+  ]);
+  React2.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+      resolvedConfig.showMyReviewPanel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 animate-pulse rounded-xl bg-gray-100 dark:bg-neutral-900" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-36 animate-pulse rounded-xl bg-gray-100 dark:bg-neutral-900" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-36 animate-pulse rounded-xl bg-gray-100 dark:bg-neutral-900" })
+    ] });
+  }
+  if (reviewState.error && !reviewState.reviews.length) {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-red-700 dark:text-red-400", children: "Failed to load reviews" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button_default,
+        {
+          text: "Retry",
+          variant: "danger",
+          appearance: "ghost",
+          onClick: () => {
+            void reviewState.reload();
+          }
+        }
+      ) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8", children: [
+    resolvedConfig.showMyReviewPanel && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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,
@@ -23158,6 +24725,7 @@ exports.ConfiguratorError = ConfiguratorError;
 exports.Content = Content;
 exports.ContentArea = ContentArea_default;
 exports.DEFAULT_CHART_THEME = DEFAULT_CHART_THEME;
+exports.DEFAULT_REVIEW_THREAD_CONFIG = DEFAULT_REVIEW_THREAD_CONFIG;
 exports.DataView = DataView;
 exports.DataViewTable = DataViewTable_default;
 exports.DateSelector = DateSelector_default;
@@ -23235,6 +24803,7 @@ exports.ProgressBarRating = ProgressBarRating_default;
 exports.Quote = Quote;
 exports.Radio = Radio_default;
 exports.RealtimeChartDataSource = RealtimeChartDataSource;
+exports.ReviewThread = ReviewThread_default;
 exports.RouteTab = RouteTab_default;
 exports.RouteTabs = RouteTabs_default;
 exports.ScatterPlot = ScatterPlot;
@@ -23285,9 +24854,18 @@ exports.WorldMap = WorldMap;
 exports.WorldMapCountryTable = WorldMapCountryTable;
 exports.YoutubeVideoPlayer = YoutubeVideo_default;
 exports.addReplyToCache = addReplyToCache;
+exports.addReviewReply = addReviewReply;
+exports.appendReview = appendReview;
 exports.applyReactionState = applyReactionState;
 exports.assertAbsoluteURL = assertAbsoluteURL;
 exports.buildURL = buildURL;
+exports.canDeleteReview = canDeleteReview;
+exports.canDeleteReviewReply = canDeleteReviewReply;
+exports.canEditReview = canEditReview;
+exports.canEditReviewReply = canEditReviewReply;
+exports.canReplyToReview = canReplyToReview;
+exports.canReportReview = canReportReview;
+exports.canReportReviewReply = canReportReviewReply;
 exports.chartReducer = chartReducer;
 exports.cn = cn;
 exports.createConfigurator = createConfigurator;
@@ -23299,9 +24877,11 @@ exports.createURLResolver = createURLResolver;
 exports.decrementReplyCount = decrementReplyCount;
 exports.enumValues = enumValues;
 exports.euiToast = euiToast;
+exports.findReview = findReview;
 exports.formatChartValue = formatChartValue;
 exports.formatCommentDate = formatCommentDate;
 exports.formatConfigError = formatConfigError;
+exports.formatReviewDate = formatReviewDate;
 exports.getAllowedOrigins = getAllowedOrigins;
 exports.getBrowserHref = getBrowserHref;
 exports.getBrowserOrigin = getBrowserOrigin;
@@ -23311,6 +24891,7 @@ exports.getLayout = getLayout;
 exports.getOptimisticDislikeState = getOptimisticDislikeState;
 exports.getOptimisticLikeState = getOptimisticLikeState;
 exports.getSafeRedirect = getSafeRedirect;
+exports.hasReviewReply = hasReviewReply;
 exports.incrementReplyCount = incrementReplyCount;
 exports.isMatch = isMatch;
 exports.isRenderFn = isRenderFn;
@@ -23318,13 +24899,21 @@ exports.limitRealtimePoints = limitRealtimePoints;
 exports.normalize = normalize;
 exports.normalizeChartData = normalizeChartData;
 exports.normalizeChartDataPoint = normalizeChartDataPoint;
+exports.normalizeReview = normalizeReview;
+exports.normalizeReviewAuthor = normalizeReviewAuthor;
+exports.normalizeReviewReply = normalizeReviewReply;
 exports.parseJson = parseJson;
 exports.parseJsonRecord = parseJsonRecord;
 exports.parseUrlMap = parseUrlMap;
+exports.prependReview = prependReview;
 exports.registerLayout = registerLayout;
 exports.removeComment = removeComment;
 exports.removeCommentTreeFromCache = removeCommentTreeFromCache;
+exports.removeReview = removeReview;
+exports.removeReviewReply = removeReviewReply;
 exports.replaceRealtimePoints = replaceRealtimePoints;
+exports.replaceReview = replaceReview;
+exports.replaceReviewReply = replaceReviewReply;
 exports.resolveAppearanceStyles = resolveAppearanceStyles;
 exports.resolveChartColor = resolveChartColor;
 exports.resolveChartColors = resolveChartColors;
@@ -23333,6 +24922,9 @@ exports.sendToast = sendToast;
 exports.toConfiguratorError = toConfiguratorError;
 exports.updateComment = updateComment;
 exports.updateReplyCacheComment = updateReplyCacheComment;
+exports.updateReview = updateReview;
+exports.updateReviewReply = updateReviewReply;
+exports.upsertReview = upsertReview;
 exports.useChartContext = useChartContext;
 exports.useChartData = useChartData;
 exports.useChartPolling = useChartPolling;
@@ -23346,6 +24938,7 @@ exports.useDrawer = useDrawer_default;
 exports.useEUIConfig = useEUIConfig;
 exports.useIsMobile = useIsMobile_default;
 exports.useModal = useModal_default;
+exports.useReviewThreadState = useReviewThreadState;
 exports.useTheme = useTheme_default;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map