@xhub-short/ui 0.1.0-beta.8 → 0.1.0-beta.9

package/dist/{chunk-UXNIXHII.js → chunk-FNXTPQ6L.js}

@@ -243,39 +243,442 @@ var CommentInput = memo(function CommentInput2({
   ] });
 });
 CommentInput.displayName = "CommentInput";
-function PinIcon({ className }) {
-  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className, viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a5.927 5.927 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707-.195-.195.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a5.922 5.922 0 0 1 1.013.16l3.134-3.133a2.772 2.772 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146z" }) });
+function MoreIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className, viewBox: "0 0 24 24", fill: "currentColor", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "6", r: "1.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "18", r: "1.5" })
+  ] });
 }
-function HeartIcon({ filled, className }) {
-  if (filled) {
-    return /* @__PURE__ */ jsx(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        "aria-label": "Heart icon",
-        "aria-hidden": "true",
-        className,
-        viewBox: "0 0 24 24",
-        fill: "currentColor",
-        children: /* @__PURE__ */ jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })
-      }
-    );
-  }
+function TrashIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+        }
+      )
+    }
+  );
+}
+function EditIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+        }
+      )
+    }
+  );
+}
+function FlagIcon({ className }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-label": "Heart icon",
       "aria-hidden": "true",
       className,
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
       strokeWidth: "1.5",
-      children: /* @__PURE__ */ jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"
+        }
+      )
+    }
+  );
+}
+var CommentMenuContext = createContext(null);
+function useCommentMenuContext() {
+  const context = useContext(CommentMenuContext);
+  if (!context) {
+    throw new Error("CommentMenu compound components must be used within <CommentMenu>");
+  }
+  return context;
+}
+var DeleteConfirmDialog = memo(function DeleteConfirmDialog2({
+  isOpen,
+  onClose,
+  onConfirm,
+  isDeleting = false,
+  title = "Delete comment?",
+  message = "This action cannot be undone.",
+  confirmText = "Delete",
+  cancelText = "Cancel",
+  danger = true
+}) {
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+  useEffect(() => {
+    if (!isOpen || !dialogRef.current) return;
+    const firstButton = dialogRef.current.querySelector("button");
+    firstButton?.focus();
+  }, [isOpen]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onKeyDown: (e) => e.stopPropagation(),
+      className: "sv-comment-dialog-overlay",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onKeyDown: (e) => e.stopPropagation(),
+          ref: dialogRef,
+          className: "sv-comment-dialog",
+          onClick: (e) => e.stopPropagation(),
+          role: "alertdialog",
+          "aria-modal": "true",
+          "aria-labelledby": "delete-dialog-title",
+          "aria-describedby": "delete-dialog-message",
+          children: [
+            /* @__PURE__ */ jsx("h3", { id: "delete-dialog-title", className: "sv-comment-dialog__title", children: title }),
+            /* @__PURE__ */ jsx("p", { id: "delete-dialog-message", className: "sv-comment-dialog__message", children: message }),
+            /* @__PURE__ */ jsxs("div", { className: "sv-comment-dialog__actions", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "sv-comment-dialog__btn sv-comment-dialog__btn--cancel",
+                  onClick: onClose,
+                  disabled: isDeleting,
+                  children: cancelText
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: clsx(
+                    "sv-comment-dialog__btn",
+                    danger ? "sv-comment-dialog__btn--danger" : "sv-comment-dialog__btn--primary"
+                  ),
+                  onClick: onConfirm,
+                  disabled: isDeleting,
+                  children: isDeleting ? "..." : confirmText
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+function CommentMenuRoot({
+  comment,
+  isReply = false,
+  parentId,
+  className,
+  children
+}) {
+  const { i18n: sheetI18n } = useCommentSheetContext();
+  const [isOpen, setIsOpen] = useState(false);
+  const [confirmDialog, setConfirmDialog] = useState({
+    isOpen: false,
+    isLoading: false,
+    title: "",
+    message: "",
+    confirmText: "",
+    cancelText: "",
+    onConfirm: async () => {
+    }
+  });
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const i18n = useMemo(
+    () => ({
+      deleteText: sheetI18n.deleteText ?? "Delete",
+      editText: sheetI18n.editText ?? "Edit",
+      reportText: sheetI18n.reportText ?? "Report",
+      deleteConfirmTitle: sheetI18n.deleteConfirmTitle ?? "Delete comment?",
+      deleteConfirmMessage: sheetI18n.deleteConfirmMessage ?? "This action cannot be undone.",
+      deleteConfirmButton: sheetI18n.deleteConfirmButton ?? "Delete",
+      cancelButton: sheetI18n.cancelButton ?? "Cancel"
+    }),
+    [sheetI18n]
+  );
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen]);
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+  const showConfirm = useCallback((config) => {
+    setConfirmDialog({
+      ...config,
+      isOpen: true,
+      isLoading: false
+    });
+  }, []);
+  const handleConfirm = useCallback(async () => {
+    setConfirmDialog((prev) => ({ ...prev, isLoading: true }));
+    try {
+      await confirmDialog.onConfirm();
+      setConfirmDialog((prev) => ({ ...prev, isOpen: false, isLoading: false }));
+    } catch {
+      setConfirmDialog((prev) => ({ ...prev, isLoading: false }));
+    }
+  }, [confirmDialog.onConfirm]);
+  const handleCloseConfirm = useCallback(() => {
+    setConfirmDialog((prev) => ({ ...prev, isOpen: false }));
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      comment,
+      isReply,
+      parentId,
+      isOpen,
+      open,
+      close,
+      toggle,
+      triggerRef,
+      menuRef,
+      showConfirm,
+      i18n
+    }),
+    [comment, isReply, parentId, isOpen, open, close, toggle, showConfirm, i18n]
+  );
+  return /* @__PURE__ */ jsxs(CommentMenuContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx("div", { ref: menuRef, className: clsx("sv-comment-menu", className), children }),
+    /* @__PURE__ */ jsx(
+      DeleteConfirmDialog,
+      {
+        isOpen: confirmDialog.isOpen,
+        onClose: handleCloseConfirm,
+        onConfirm: handleConfirm,
+        isDeleting: confirmDialog.isLoading,
+        title: confirmDialog.title,
+        message: confirmDialog.message,
+        confirmText: confirmDialog.confirmText,
+        cancelText: confirmDialog.cancelText,
+        danger: confirmDialog.danger
+      }
+    )
+  ] });
+}
+function Trigger({
+  className,
+  icon,
+  "aria-label": ariaLabel = "More options"
+}) {
+  const { isOpen, toggle, triggerRef } = useCommentMenuContext();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      className: clsx("sv-comment-menu__trigger", className),
+      onClick: toggle,
+      "aria-label": ariaLabel,
+      "aria-expanded": isOpen,
+      "aria-haspopup": "menu",
+      children: icon ?? /* @__PURE__ */ jsx(MoreIcon, { className: "sv-comment-menu__icon" })
+    }
+  );
+}
+function Dropdown({ className, children }) {
+  const { isOpen } = useCommentMenuContext();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx("div", { className: clsx("sv-comment-menu__dropdown", className), role: "menu", children });
+}
+function Item({
+  icon,
+  danger = false,
+  disabled = false,
+  className,
+  onClick,
+  children
+}) {
+  const { close } = useCommentMenuContext();
+  const handleClick = useCallback(() => {
+    if (disabled) return;
+    onClick?.();
+    close();
+  }, [disabled, onClick, close]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: clsx(
+        "sv-comment-menu__item",
+        danger && "sv-comment-menu__item--danger",
+        disabled && "sv-comment-menu__item--disabled",
+        className
+      ),
+      onClick: handleClick,
+      disabled,
+      role: "menuitem",
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "sv-comment-menu__item-icon", children: icon }),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+}
+function DeleteItem({ requireConfirm, onDelete, label, className }) {
+  const { comment, isReply, parentId, close, showConfirm, i18n } = useCommentMenuContext();
+  const { actions, config } = useCommentSheetContext();
+  const shouldConfirm = requireConfirm ?? config.requireDeleteConfirm;
+  const displayLabel = label ?? i18n.deleteText;
+  const performDelete = useCallback(async () => {
+    if (onDelete) {
+      await onDelete(comment.id, isReply, parentId);
+    } else {
+      await actions.deleteComment(comment.id, isReply, parentId);
+    }
+  }, [onDelete, actions, comment.id, isReply, parentId]);
+  const handleClick = useCallback(() => {
+    close();
+    if (shouldConfirm) {
+      showConfirm({
+        title: i18n.deleteConfirmTitle,
+        message: i18n.deleteConfirmMessage,
+        confirmText: i18n.deleteConfirmButton,
+        cancelText: i18n.cancelButton,
+        danger: true,
+        onConfirm: performDelete
+      });
+    } else {
+      performDelete();
+    }
+  }, [shouldConfirm, showConfirm, performDelete, i18n, close]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: clsx("sv-comment-menu__item sv-comment-menu__item--danger", className),
+      onClick: handleClick,
+      role: "menuitem",
+      children: [
+        /* @__PURE__ */ jsx(TrashIcon, { className: "sv-comment-menu__item-icon" }),
+        /* @__PURE__ */ jsx("span", { children: displayLabel })
+      ]
+    }
+  );
+}
+function EditItem({ onEdit, label, className }) {
+  const { comment, close, i18n } = useCommentMenuContext();
+  const displayLabel = label ?? i18n.editText;
+  const isDisabled = !onEdit;
+  const handleClick = useCallback(() => {
+    if (!onEdit) return;
+    close();
+    onEdit(comment.id, comment.content);
+  }, [close, onEdit, comment.id, comment.content]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: clsx(
+        "sv-comment-menu__item",
+        isDisabled && "sv-comment-menu__item--disabled",
+        className
+      ),
+      onClick: handleClick,
+      disabled: isDisabled,
+      role: "menuitem",
+      children: [
+        /* @__PURE__ */ jsx(EditIcon, { className: "sv-comment-menu__item-icon" }),
+        /* @__PURE__ */ jsx("span", { children: displayLabel })
+      ]
     }
   );
 }
+function ReportItem({
+  onReport,
+  reason = "inappropriate",
+  label,
+  className
+}) {
+  const { comment, close, i18n } = useCommentMenuContext();
+  const { actions } = useCommentSheetContext();
+  const displayLabel = label ?? i18n.reportText;
+  const handleClick = useCallback(() => {
+    close();
+    if (onReport) {
+      onReport(comment.id);
+    } else {
+      actions.reportComment(comment.id, reason);
+    }
+  }, [close, onReport, comment.id, actions, reason]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: clsx("sv-comment-menu__item", className),
+      onClick: handleClick,
+      role: "menuitem",
+      children: [
+        /* @__PURE__ */ jsx(FlagIcon, { className: "sv-comment-menu__item-icon" }),
+        /* @__PURE__ */ jsx("span", { children: displayLabel })
+      ]
+    }
+  );
+}
+var CommentMenu = Object.assign(memo(CommentMenuRoot), {
+  Trigger: memo(Trigger),
+  Dropdown: memo(Dropdown),
+  Item: memo(Item),
+  DeleteItem: memo(DeleteItem),
+  EditItem: memo(EditItem),
+  ReportItem: memo(ReportItem)
+});
+CommentMenu.displayName = "CommentMenu";
+function PinIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className, viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a5.927 5.927 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707-.195-.195.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a5.922 5.922 0 0 1 1.013.16l3.134-3.133a2.772 2.772 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146z" }) });
+}
 function ReplyIcon({ className }) {
   return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
     "path",
@@ -289,13 +692,6 @@ function ReplyIcon({ className }) {
 function VerifiedIcon({ className }) {
   return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) });
 }
-function MoreIcon({ className }) {
-  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className, viewBox: "0 0 24 24", fill: "currentColor", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.5" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "6", r: "1.5" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "18", r: "1.5" })
-  ] });
-}
 function ChevronIcon({ direction, className }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -408,14 +804,8 @@ var ReplyItemComponent = memo(function ReplyItemComponent2({
   reply,
   parentComment
 }) {
-  const { actions, setReplyTarget } = useCommentSheetContext();
-  const handleLike = useCallback(() => {
-    if (reply.isLiked) {
-      actions.unlikeComment(reply.id);
-    } else {
-      actions.likeComment(reply.id);
-    }
-  }, [actions, reply.id, reply.isLiked]);
+  const { setReplyTarget, i18n } = useCommentSheetContext();
+  const formatTimeAgo = i18n.formatRelativeTime ?? defaultFormatTimeAgo;
   const handleReply = useCallback(() => {
     setReplyTarget({
       commentId: parentComment.id,
@@ -431,7 +821,10 @@ var ReplyItemComponent = memo(function ReplyItemComponent2({
           /* @__PURE__ */ jsx("span", { className: "sv-comment-item__author", children: reply.author.name }),
           reply.author.isVerified && /* @__PURE__ */ jsx(VerifiedIcon, { className: "sv-comment-item__verified" })
         ] }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "sv-comment-item__menu-btn", "aria-label": "More options", children: /* @__PURE__ */ jsx(MoreIcon, {}) })
+        reply.isOwner && /* @__PURE__ */ jsxs(CommentMenu, { comment: reply, isReply: true, parentId: parentComment.id, children: [
+          /* @__PURE__ */ jsx(CommentMenu.Trigger, {}),
+          /* @__PURE__ */ jsx(CommentMenu.Dropdown, { children: /* @__PURE__ */ jsx(CommentMenu.DeleteItem, {}) })
+        ] })
       ] }),
       /* @__PURE__ */ jsxs("p", { className: "sv-comment-item__text", children: [
         reply.replyTo && reply.replyTo.id !== parentComment.author.id && /* @__PURE__ */ jsxs("span", { className: "sv-comment-reply__mention", children: [
@@ -442,21 +835,7 @@ var ReplyItemComponent = memo(function ReplyItemComponent2({
         reply.content
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "sv-comment-item__actions", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: clsx(
-              "sv-comment-item__action-btn",
-              reply.isLiked && "sv-comment-item__action-btn--active"
-            ),
-            onClick: handleLike,
-            children: [
-              /* @__PURE__ */ jsx(HeartIcon, { filled: reply.isLiked, className: "sv-comment-item__action-icon" }),
-              reply.likeCount > 0 && /* @__PURE__ */ jsx("span", { children: formatCount(reply.likeCount) })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsx("span", { className: "sv-comment-item__time", children: formatTimeAgo(reply.createdAt) }),
         /* @__PURE__ */ jsx("button", { type: "button", className: "sv-comment-item__action-btn", onClick: handleReply, children: /* @__PURE__ */ jsx(ReplyIcon, { className: "sv-comment-item__action-icon" }) })
       ] })
     ] })
@@ -525,17 +904,10 @@ var CommentItemComponent = memo(function CommentItemComponent2({
   comment,
   className
 }) {
-  const { actions, config, setReplyTarget, i18n } = useCommentSheetContext();
+  const { config, setReplyTarget, i18n } = useCommentSheetContext();
   const expandText = i18n.expandText ?? "See more";
   const collapseText = i18n.collapseText ?? "See less";
   const formatTimeAgo = i18n.formatRelativeTime ?? defaultFormatTimeAgo;
-  const handleLike = useCallback(() => {
-    if (comment.isLiked) {
-      actions.unlikeComment(comment.id);
-    } else {
-      actions.likeComment(comment.id);
-    }
-  }, [actions, comment.id, comment.isLiked]);
   const handleReply = useCallback(() => {
     setReplyTarget({
       commentId: comment.id,
@@ -564,7 +936,10 @@ var CommentItemComponent = memo(function CommentItemComponent2({
               comment.author.isVerified && /* @__PURE__ */ jsx(VerifiedIcon, { className: "sv-comment-item__verified" }),
               comment.author.badge && /* @__PURE__ */ jsx("span", { className: "sv-comment-item__badge", children: comment.author.badge })
             ] }),
-            /* @__PURE__ */ jsx("button", { type: "button", className: "sv-comment-item__menu-btn", "aria-label": "More options", children: /* @__PURE__ */ jsx(MoreIcon, {}) })
+            comment.isOwner && /* @__PURE__ */ jsxs(CommentMenu, { comment, children: [
+              /* @__PURE__ */ jsx(CommentMenu.Trigger, {}),
+              /* @__PURE__ */ jsx(CommentMenu.Dropdown, { children: /* @__PURE__ */ jsx(CommentMenu.DeleteItem, {}) })
+            ] })
           ] }),
           /* @__PURE__ */ jsx(
             CommentText,
@@ -577,21 +952,6 @@ var CommentItemComponent = memo(function CommentItemComponent2({
           ),
           /* @__PURE__ */ jsxs("div", { className: "sv-comment-item__actions", children: [
             /* @__PURE__ */ jsx("span", { className: "sv-comment-item__time", children: formatTimeAgo(comment.createdAt) }),
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                className: clsx(
-                  "sv-comment-item__action-btn",
-                  comment.isLiked && "sv-comment-item__action-btn--active"
-                ),
-                onClick: handleLike,
-                children: [
-                  /* @__PURE__ */ jsx(HeartIcon, { filled: comment.isLiked, className: "sv-comment-item__action-icon" }),
-                  comment.likeCount > 0 && /* @__PURE__ */ jsx("span", { children: formatCount(comment.likeCount) })
-                ]
-              }
-            ),
             /* @__PURE__ */ jsxs("button", { type: "button", className: "sv-comment-item__action-btn", onClick: handleReply, children: [
               /* @__PURE__ */ jsx(ReplyIcon, { className: "sv-comment-item__action-icon" }),
               comment.replyCount > 0 && /* @__PURE__ */ jsx("span", { children: formatCount(comment.replyCount) })
@@ -1435,9 +1795,182 @@ body.sv-comment-sheet-open .sv-comment-sheet-backdrop {
 }
 
 /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   DELETE CONFIRMATION
+   COMMENT MENU (Dropdown)
    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
 
+.sv-comment-menu {
+  position: relative;
+}
+
+.sv-comment-menu__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: var(--sv-comment-text-secondary);
+  border-radius: 4px;
+  transition: background 0.15s ease;
+}
+
+.sv-comment-menu__trigger:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.sv-comment-menu__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.sv-comment-menu__dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  min-width: 140px;
+  background: var(--sv-comment-bg);
+  border: 1px solid var(--sv-comment-border);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+  overflow: hidden;
+  animation: sv-menu-fade-in 0.15s ease;
+}
+
+@keyframes sv-menu-fade-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.sv-comment-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--sv-comment-text);
+  text-align: left;
+  transition: background 0.15s ease;
+}
+
+.sv-comment-menu__item:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.sv-comment-menu__item--danger {
+  color: var(--sv-comment-like-color);
+}
+
+.sv-comment-menu__item--danger:hover {
+  background: rgba(255, 67, 78, 0.08);
+}
+
+.sv-comment-menu__item-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   DELETE CONFIRMATION DIALOG
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-comment-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: var(--sv-comment-modal-z-index, 1100);
+  animation: sv-dialog-overlay-fade-in 0.2s ease;
+}
+
+@keyframes sv-dialog-overlay-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.sv-comment-dialog {
+  background: var(--sv-comment-bg);
+  border-radius: 16px;
+  padding: 24px;
+  max-width: 300px;
+  width: calc(100% - 48px);
+  text-align: center;
+  animation: sv-dialog-scale-in 0.2s ease;
+}
+
+@keyframes sv-dialog-scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.sv-comment-dialog__title {
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--sv-comment-text);
+  margin: 0 0 8px 0;
+}
+
+.sv-comment-dialog__message {
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 14px;
+  color: var(--sv-comment-text-secondary);
+  margin: 0 0 20px 0;
+  line-height: 1.4;
+}
+
+.sv-comment-dialog__actions {
+  display: flex;
+  gap: 12px;
+}
+
+.sv-comment-dialog__btn {
+  flex: 1;
+  padding: 12px 16px;
+  border: none;
+  border-radius: 10px;
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.sv-comment-dialog__btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.sv-comment-dialog__btn--cancel {
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--sv-comment-text);
+}
+
+.sv-comment-dialog__btn--cancel:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.sv-comment-dialog__btn--danger {
+  background: var(--sv-comment-like-color);
+  color: #ffffff;
+}
+
+.sv-comment-dialog__btn--danger:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+/* Legacy classes (keep for backwards compatibility) */
 .sv-comment-delete-confirm {
   position: fixed;
   inset: 0;
@@ -2037,4 +2570,4 @@ var CommentSheet = Object.assign(CommentSheetHeadless, {
   Item: CommentItemComponent
 });
 
-export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentItemSkeleton, CommentList, CommentListSkeleton, CommentSheet, CommentSheetContext, CommentSheetHeadless, SheetHeader, useCommentSheetContext, useOptionalCommentSheetContext };
+export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentItemSkeleton, CommentList, CommentListSkeleton, CommentMenu, CommentSheet, CommentSheetContext, CommentSheetHeadless, DeleteConfirmDialog, SheetHeader, useCommentMenuContext, useCommentSheetContext, useOptionalCommentSheetContext };