@xhub-short/ui 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/chunk-KMJ3PQ7M.js

@@ -0,0 +1,1262 @@
+import { useBottomSheetContext, BottomSheetHeadless } from './chunk-PJ4NMVMY.js';
+import { clsx } from 'clsx';
+import { createContext, memo, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var CommentSheetContext = createContext(void 0);
+function useCommentSheetContext() {
+  const context = useContext(CommentSheetContext);
+  if (!context) {
+    throw new Error("useCommentSheetContext must be used within <CommentSheetHeadless>");
+  }
+  return context;
+}
+function useOptionalCommentSheetContext() {
+  return useContext(CommentSheetContext);
+}
+function ImageIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className, viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "2",
+        y: "4",
+        width: "16",
+        height: "12",
+        rx: "2",
+        stroke: "#164d8e",
+        strokeWidth: "1.5",
+        fill: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M2 13l4-4 3 3 5-5 4 4",
+        stroke: "#164d8e",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        fill: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx("circle", { cx: "14", cy: "8", r: "1.5", fill: "#9fc6e9" })
+  ] });
+}
+function EmojiIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "9.01", y2: "9", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "15.01", y2: "9", strokeWidth: "2", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Close" }),
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+var DEFAULT_EMOJIS = ["\u{1F600}", "\u{1F602}", "\u{1F60D}", "\u{1F525}", "\u{1F44D}", "\u{1F4AF}", "\u2764\uFE0F", "\u{1F622}"];
+var CommentInput = memo(function CommentInput2({
+  placeholder = "Add a comment...",
+  emojis = DEFAULT_EMOJIS,
+  maxLength = 500,
+  className,
+  onSubmitSuccess,
+  onMediaClick,
+  replyingToText = "Replying to",
+  replyPlaceholderTemplate = "Reply to @{name}...",
+  cancelReplyAriaLabel = "Cancel reply",
+  addMediaAriaLabel = "Add media",
+  submitAriaLabel = "Submit comment",
+  emojiAriaLabel = "Open emoji",
+  addEmojiAriaLabel = "Add {emoji}"
+}) {
+  const { actions, state, replyTarget, setReplyTarget } = useCommentSheetContext();
+  const [text, setText] = useState("");
+  const [showEmojis, setShowEmojis] = useState(false);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (replyTarget && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [replyTarget]);
+  const handleTextChange = useCallback(
+    (e) => {
+      const value = e.target.value;
+      if (value.length <= maxLength) {
+        setText(value);
+      }
+    },
+    [maxLength]
+  );
+  const handleSubmit = useCallback(async () => {
+    const trimmed = text.trim();
+    if (!trimmed || state.isPosting) return;
+    try {
+      if (replyTarget) {
+        await actions.postReply(replyTarget.commentId, trimmed, {
+          id: replyTarget.authorId,
+          name: replyTarget.authorName
+        });
+        setReplyTarget(null);
+      } else {
+        await actions.postComment(trimmed);
+      }
+      setText("");
+      setShowEmojis(false);
+      onSubmitSuccess?.();
+    } catch {
+    }
+  }, [text, state.isPosting, replyTarget, actions, setReplyTarget, onSubmitSuccess]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const handleEmojiClick = useCallback((emoji) => {
+    setText((prev) => prev + emoji);
+    inputRef.current?.focus();
+  }, []);
+  const handleClearReply = useCallback(() => {
+    setReplyTarget(null);
+    inputRef.current?.focus();
+  }, [setReplyTarget]);
+  const toggleEmojis = useCallback(() => {
+    setShowEmojis((prev) => !prev);
+  }, []);
+  const canSubmit = text.trim().length > 0 && !state.isPosting;
+  return /* @__PURE__ */ jsxs("div", { className: clsx("sv-comment-sheet__input-area", className), children: [
+    replyTarget && /* @__PURE__ */ jsxs("div", { className: "sv-comment-sheet__reply-to", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        replyingToText,
+        " \u2022 ",
+        /* @__PURE__ */ jsx("span", { className: "sv-comment-sheet__reply-to-author-name", children: replyTarget.authorName })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "sv-comment-sheet__reply-to-clear",
+          onClick: handleClearReply,
+          "aria-label": cancelReplyAriaLabel,
+          children: /* @__PURE__ */ jsx(CloseIcon, { className: "sv-comment-item__action-icon" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          "sv-comment-sheet__emoji-bar",
+          showEmojis && "sv-comment-sheet__emoji-bar--visible"
+        ),
+        children: emojis.map((emoji) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "sv-comment-sheet__emoji-bar-btn",
+            onClick: () => handleEmojiClick(emoji),
+            "aria-label": addEmojiAriaLabel.replace("{emoji}", emoji),
+            children: emoji
+          },
+          emoji
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "sv-comment-sheet__input-wrapper", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sv-comment-sheet__input-left", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "sv-comment-sheet__media-btn",
+            onClick: onMediaClick,
+            "aria-label": addMediaAriaLabel,
+            children: /* @__PURE__ */ jsx(ImageIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            className: "sv-comment-sheet__input",
+            value: text,
+            onChange: handleTextChange,
+            onKeyDown: handleKeyDown,
+            placeholder: replyTarget ? replyPlaceholderTemplate.replace("{name}", replyTarget.authorName) : placeholder,
+            disabled: state.isPosting,
+            maxLength
+          }
+        )
+      ] }),
+      canSubmit ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "sv-comment-sheet__emoji-btn",
+          onClick: handleSubmit,
+          "aria-label": submitAriaLabel,
+          children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
+        }
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "sv-comment-sheet__emoji-btn",
+          onClick: toggleEmojis,
+          "aria-label": emojiAriaLabel,
+          children: /* @__PURE__ */ jsx(EmojiIcon, {})
+        }
+      )
+    ] })
+  ] });
+});
+CommentInput.displayName = "CommentInput";
+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 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",
+    {
+      "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: "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",
+    {
+      fillRule: "evenodd",
+      d: "M7.793 2.232a.75.75 0 01-.025 1.06L3.622 7.25h10.003a5.375 5.375 0 010 10.75H10.75a.75.75 0 010-1.5h2.875a3.875 3.875 0 000-7.75H3.622l4.146 3.957a.75.75 0 01-1.036 1.085l-5.5-5.25a.75.75 0 010-1.085l5.5-5.25a.75.75 0 011.06.025z",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+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 ChevronIcon({ direction, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      style: { transform: direction === "up" ? "rotate(180deg)" : void 0 },
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function CommentAvatar({
+  src,
+  name,
+  size = "normal",
+  className
+}) {
+  const [error, setError] = useState(false);
+  const sizeClass = size === "small" ? "sv-comment-reply__avatar" : "sv-comment-item__avatar";
+  const initial = name.charAt(0).toUpperCase();
+  if (!src || error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(sizeClass, className),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: size === "small" ? 10 : 14,
+          fontWeight: 600,
+          color: "#6b7271"
+        },
+        children: initial
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: name,
+      className: clsx(sizeClass, className),
+      onError: () => setError(true)
+    }
+  );
+}
+function CommentText({
+  text,
+  maxLines,
+  className,
+  expandText = "See more",
+  collapseText = "See less"
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const needsCollapse = text.length > maxLines * 60 || text.split("\n").length > maxLines;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: clsx(
+          "sv-comment-item__text",
+          !expanded && needsCollapse && "sv-comment-item__text--collapsed"
+        ),
+        style: { "--sv-comment-max-lines": maxLines },
+        children: text
+      }
+    ),
+    needsCollapse && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "sv-comment-item__expand-btn",
+        onClick: () => setExpanded(!expanded),
+        children: expanded ? collapseText : expandText
+      }
+    )
+  ] });
+}
+function defaultFormatTimeAgo(dateStr) {
+  const date = new Date(dateStr);
+  const now = /* @__PURE__ */ new Date();
+  const diff = Math.floor((now.getTime() - date.getTime()) / 1e3);
+  if (diff < 60) return "just now";
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
+  if (diff < 2592e3) return `${Math.floor(diff / 604800)}w ago`;
+  return `${Math.floor(diff / 2592e3)}mo ago`;
+}
+function formatCount(count) {
+  if (count >= 1e6) {
+    return `${(count / 1e6).toFixed(1)}M`;
+  }
+  if (count >= 1e3) {
+    return `${(count / 1e3).toFixed(1)}K`;
+  }
+  return String(count);
+}
+var ReplyItemComponent = memo(function ReplyItemComponent2({
+  reply,
+  parentComment
+}) {
+  const { setReplyTarget, i18n } = useCommentSheetContext();
+  const formatTimeAgo = i18n.formatRelativeTime ?? defaultFormatTimeAgo;
+  const handleReply = useCallback(() => {
+    setReplyTarget({
+      commentId: parentComment.id,
+      authorName: reply.author.name,
+      authorId: reply.author.id
+    });
+  }, [setReplyTarget, parentComment.id, reply.author]);
+  return /* @__PURE__ */ jsxs("div", { className: clsx("sv-comment-reply", reply.isPending && "sv-comment-item--pending"), children: [
+    /* @__PURE__ */ jsx(CommentAvatar, { src: reply.author.avatar, name: reply.author.name, size: "small" }),
+    /* @__PURE__ */ jsxs("div", { className: "sv-comment-item__content", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sv-comment-item__header", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sv-comment-item__header-left", children: [
+          /* @__PURE__ */ jsx("span", { className: "sv-comment-item__author", children: reply.author.name }),
+          reply.author.isVerified && /* @__PURE__ */ jsx(VerifiedIcon, { className: "sv-comment-item__verified" })
+        ] }),
+        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: [
+          "@",
+          reply.replyTo.name,
+          " "
+        ] }),
+        reply.content
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "sv-comment-item__actions", children: [
+        /* @__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" }) })
+      ] })
+    ] })
+  ] });
+});
+function RepliesList({ comment }) {
+  const { actions, config, i18n } = useCommentSheetContext();
+  const [expanded, setExpanded] = useState(false);
+  const { replyCount, replies = [], repliesLoaded } = comment;
+  const shouldAutoExpand = replyCount <= config.repliesAutoExpandThreshold;
+  const showReplies = shouldAutoExpand || expanded;
+  const visibleReplies = showReplies ? replies : [];
+  const hasMoreReplies = !repliesLoaded && replyCount > replies.length;
+  const remainingReplies = replyCount - visibleReplies.length;
+  const hideRepliesText = i18n.hideRepliesText ?? "Hide replies";
+  const viewRepliesText = (i18n.viewRepliesText ?? "View {count} more replies").replace(
+    "{count}",
+    String(remainingReplies)
+  );
+  const viewMoreRepliesText = i18n.viewMoreRepliesText ?? "View more replies";
+  const loadRepliesText = i18n.loadRepliesText ?? "Load replies";
+  const handleToggle = useCallback(() => {
+    if (!expanded && replies.length === 0) {
+      actions.loadReplies(comment.id);
+    }
+    setExpanded(!expanded);
+  }, [expanded, replies.length, actions, comment.id]);
+  const handleLoadMore = useCallback(() => {
+    actions.loadReplies(comment.id);
+  }, [actions, comment.id]);
+  if (replyCount === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "sv-comment-replies", children: [
+    showReplies && visibleReplies.length > 0 && /* @__PURE__ */ jsx("div", { className: "sv-comment-replies__list", children: visibleReplies.map((reply) => /* @__PURE__ */ jsx(ReplyItemComponent, { reply, parentComment: comment }, reply.id)) }),
+    !shouldAutoExpand && /* @__PURE__ */ jsxs("button", { type: "button", className: "sv-comment-replies__toggle", onClick: handleToggle, children: [
+      /* @__PURE__ */ jsx("span", { className: "sv-comment-replies__toggle-line" }),
+      /* @__PURE__ */ jsx("span", { className: "sv-comment-replies__toggle-text", children: expanded ? hideRepliesText : viewRepliesText }),
+      /* @__PURE__ */ jsx(
+        ChevronIcon,
+        {
+          direction: expanded ? "up" : "down",
+          className: "sv-comment-replies__toggle-icon"
+        }
+      )
+    ] }),
+    expanded && hasMoreReplies && /* @__PURE__ */ jsxs("button", { type: "button", className: "sv-comment-replies__toggle", onClick: handleLoadMore, children: [
+      /* @__PURE__ */ jsx("span", { className: "sv-comment-replies__toggle-line" }),
+      /* @__PURE__ */ jsx("span", { className: "sv-comment-replies__toggle-text", children: viewMoreRepliesText }),
+      /* @__PURE__ */ jsx(ChevronIcon, { direction: "down", className: "sv-comment-replies__toggle-icon" })
+    ] }),
+    shouldAutoExpand && replies.length === 0 && replyCount > 0 && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "sv-comment-replies__toggle",
+        onClick: () => actions.loadReplies(comment.id),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sv-comment-replies__toggle-line" }),
+          /* @__PURE__ */ jsx("span", { className: "sv-comment-replies__toggle-text", children: loadRepliesText }),
+          /* @__PURE__ */ jsx(ChevronIcon, { direction: "down", className: "sv-comment-replies__toggle-icon" })
+        ]
+      }
+    )
+  ] });
+}
+var CommentItemComponent = memo(function CommentItemComponent2({
+  comment,
+  className
+}) {
+  const { config, setReplyTarget, i18n } = useCommentSheetContext();
+  const expandText = i18n.expandText ?? "See more";
+  const collapseText = i18n.collapseText ?? "See less";
+  const formatTimeAgo = i18n.formatRelativeTime ?? defaultFormatTimeAgo;
+  const handleReply = useCallback(() => {
+    setReplyTarget({
+      commentId: comment.id,
+      authorName: comment.author.name,
+      authorId: comment.author.id
+    });
+  }, [setReplyTarget, comment.id, comment.author]);
+  const hasReplies = comment.replyCount > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "sv-comment-item",
+        comment.isPending && "sv-comment-item--pending",
+        comment.isPinned && "sv-comment-item--pinned",
+        hasReplies && "sv-comment-item--has-replies",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(CommentAvatar, { src: comment.author.avatar, name: comment.author.name }),
+        /* @__PURE__ */ jsxs("div", { className: "sv-comment-item__content", children: [
+          /* @__PURE__ */ jsxs("div", { className: "sv-comment-item__header", children: [
+            /* @__PURE__ */ jsxs("div", { className: "sv-comment-item__header-left", children: [
+              comment.isPinned && /* @__PURE__ */ jsx(PinIcon, { className: "sv-comment-item__pin-icon" }),
+              /* @__PURE__ */ jsx("span", { className: "sv-comment-item__author", children: comment.author.name }),
+              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 })
+            ] }),
+            comment.isOwner && /* @__PURE__ */ jsxs(CommentMenu, { comment, children: [
+              /* @__PURE__ */ jsx(CommentMenu.Trigger, {}),
+              /* @__PURE__ */ jsx(CommentMenu.Dropdown, { children: /* @__PURE__ */ jsx(CommentMenu.DeleteItem, {}) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            CommentText,
+            {
+              text: comment.content,
+              maxLines: config.textMaxLines,
+              expandText,
+              collapseText
+            }
+          ),
+          /* @__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: "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) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(RepliesList, { comment })
+        ] })
+      ]
+    }
+  );
+});
+CommentItemComponent.displayName = "CommentItem";
+var CommentItemSkeleton = memo(function CommentItemSkeleton2() {
+  return /* @__PURE__ */ jsxs("div", { className: "sv-comment-item sv-comment-skeleton", children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-comment-skeleton__avatar" }),
+    /* @__PURE__ */ jsxs("div", { className: "sv-comment-skeleton__content", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sv-comment-skeleton__header", children: [
+        /* @__PURE__ */ jsx("div", { className: "sv-comment-skeleton__author" }),
+        /* @__PURE__ */ jsx("div", { className: "sv-comment-skeleton__time" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "sv-comment-skeleton__text", children: [
+        /* @__PURE__ */ jsx("div", { className: "sv-comment-skeleton__line sv-comment-skeleton__line--full" }),
+        /* @__PURE__ */ jsx("div", { className: "sv-comment-skeleton__line sv-comment-skeleton__line--medium" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "sv-comment-skeleton__actions", children: [
+        /* @__PURE__ */ jsx("div", { className: "sv-comment-skeleton__action" }),
+        /* @__PURE__ */ jsx("div", { className: "sv-comment-skeleton__action" })
+      ] })
+    ] })
+  ] });
+});
+CommentItemSkeleton.displayName = "CommentItemSkeleton";
+var CommentListSkeleton = memo(function CommentListSkeleton2({
+  count = 5
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "sv-comment-skeleton-list", children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
+    CommentItemSkeleton,
+    {},
+    `skeleton-${// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+    index}`
+  )) });
+});
+CommentListSkeleton.displayName = "CommentListSkeleton";
+var CommentList = memo(function CommentList2({
+  emptyState,
+  loadingState,
+  errorState,
+  className,
+  errorText = "Failed to load comments",
+  retryText = "Try again",
+  emptyText = "No comments yet. Be the first!",
+  loadMoreText = "Load more comments"
+}) {
+  const { state, actions, videoId } = useCommentSheetContext();
+  const listRef = useRef(null);
+  const loadMoreRef = useRef(null);
+  const { comments, isLoading, error, hasMore, isLoadingMore } = state;
+  useEffect(() => {
+    if (!hasMore || isLoadingMore) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          actions.loadMore();
+        }
+      },
+      { threshold: 0.1 }
+    );
+    const target = loadMoreRef.current;
+    if (target) {
+      observer.observe(target);
+    }
+    return () => {
+      if (target) {
+        observer.unobserve(target);
+      }
+    };
+  }, [hasMore, isLoadingMore, actions]);
+  const handleRetry = useCallback(() => {
+    if (videoId) {
+      actions.loadComments(videoId);
+    }
+  }, [actions, videoId]);
+  if (isLoading && comments.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: clsx("sv-comment-sheet__list", className), children: loadingState ?? /* @__PURE__ */ jsx(CommentListSkeleton, { count: 5 }) });
+  }
+  if (error && comments.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: clsx("sv-comment-sheet__list", className), children: errorState?.(error, handleRetry) ?? /* @__PURE__ */ jsxs("div", { className: "sv-comment-sheet__error", children: [
+      /* @__PURE__ */ jsx("span", { children: errorText }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "sv-comment-sheet__error-btn", onClick: handleRetry, children: retryText })
+    ] }) });
+  }
+  if (comments.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: clsx("sv-comment-sheet__list", className), children: emptyState ?? /* @__PURE__ */ jsxs("div", { className: "sv-comment-sheet__empty", children: [
+      /* @__PURE__ */ jsx("span", { className: "sv-comment-sheet__empty-icon", children: "\u{1F4AC}" }),
+      /* @__PURE__ */ jsx("span", { className: "sv-comment-sheet__empty-text", children: emptyText })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: listRef, className: clsx("sv-comment-sheet__list", className), children: [
+    comments.map((comment) => /* @__PURE__ */ jsx(CommentItemComponent, { comment }, comment.id)),
+    hasMore && /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: "sv-comment-sheet__load-more", children: isLoadingMore ? /* @__PURE__ */ jsx(CommentItemSkeleton, {}) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "sv-comment-sheet__load-more-btn",
+        onClick: () => actions.loadMore(),
+        children: loadMoreText
+      }
+    ) })
+  ] });
+});
+CommentList.displayName = "CommentList";
+
+// src/components/CommentSheet/CommentSheet.css.ts
+var COMMENT_SHEET_CSS = `:root{--sv-comment-primary:#164d8e;--sv-comment-primary-light:#1354ae;--sv-comment-primary-dark:#003477;--sv-comment-bg:#fff;--sv-comment-text:#121212;--sv-comment-text-secondary:#6b7271;--sv-comment-border:rgba(18,18,18,.08);--sv-comment-like-color:#ff434e;--sv-comment-verified-color:#1ea031;--sv-comment-mention-color:#164d8e;--sv-comment-avatar-bg:#e5e6e6;--sv-comment-input-border:#a3a3a3;--sv-comment-reply-line:#e5e6e6}.sv-comment-sheet{--sv-sheet-bg:var(--sv-comment-bg,#fff);--sv-sheet-border-radius:var(--sv-comment-sheet-radius,24px);--sv-sheet-animation-duration:var(--sv-comment-animation-duration,400ms);--sv-sheet-animation-easing:var(--sv-comment-animation-easing,cubic-bezier(.32,.72,0,1));margin:16px;border-radius:var(--sv-comment-sheet-radius,24px)}.sv-comment-sheet-backdrop{--sv-sheet-backdrop-bg:var(--sv-comment-backdrop-bg,rgba(0,0,0,.5))}.sv-comment-sheet__inner{display:flex;flex-direction:column;height:100%}.sv-comment-sheet .sv-bottom-sheet__content{overflow:visible;display:flex;flex-direction:column;flex:1}.sv-comment-sheet__header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--sv-comment-border);flex-shrink:0;position:relative;cursor:grab;touch-action:none}.sv-comment-sheet__header:active{cursor:grabbing}.sv-comment-sheet__header-handle{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36px;height:4px;background:var(--sv-comment-text-secondary);border-radius:2px;opacity:.3}.sv-comment-sheet__header-left{display:flex;align-items:center;gap:2px}.sv-comment-sheet__title{font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:18px;font-weight:600;line-height:1.4;color:var(--sv-comment-text);opacity:.9;margin:0}.sv-comment-sheet__sort-btn{display:flex;align-items:center;justify-content:center;background:0 0;border:0;padding:0;cursor:pointer;color:var(--sv-comment-text)}.sv-comment-sheet__sort-btn svg{width:20px;height:20px}.sv-comment-sheet__close-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:100px;background:linear-gradient(180deg,var(--sv-comment-primary-light)0%,var(--sv-comment-primary-dark)100%);cursor:pointer;transition:opacity .15s ease}.sv-comment-sheet__close-btn:hover{opacity:.9}.sv-comment-sheet__close-btn svg{width:20px;height:20px;color:#fff}.sv-comment-sheet__list{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 16px 28px 16px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}.sv-comment-sheet__list::-webkit-scrollbar{width:0}.sv-comment-sheet__list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.0);border-radius:0}.sv-comment-item{display:flex;gap:6px;padding:16px 0;position:relative}.sv-comment-item--pending{opacity:.6}.sv-comment-item--pinned{background:var(--sv-comment-bg)}.sv-comment-item__avatar{width:40px;height:40px;border-radius:120px;flex-shrink:0;object-fit:cover;background:var(--sv-comment-avatar-bg)}.sv-comment-item__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.sv-comment-item__header{display:flex;align-items:center;justify-content:space-between;gap:4px}.sv-comment-item__header-left{display:flex;align-items:center;gap:4px;min-width:0}.sv-comment-item__pin-icon{width:16px;height:16px;flex-shrink:0;color:var(--sv-comment-primary)}.sv-comment-item__author{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:600;line-height:1.4;color:var(--sv-comment-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-comment-item__verified{width:12px;height:12px;flex-shrink:0;color:var(--sv-comment-verified-color)}.sv-comment-item__badge{font-size:10px;padding:2px 6px;background:var(--sv-comment-primary);color:#fff;border-radius:4px;flex-shrink:0}.sv-comment-item__menu-btn{display:flex;align-items:center;justify-content:center;background:0 0;border:0;padding:0;cursor:pointer;color:var(--sv-comment-text-secondary)}.sv-comment-item__menu-btn svg{width:20px;height:20px}.sv-comment-item__text{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;font-weight:normal;line-height:1.4;color:var(--sv-comment-text);word-break:break-word;margin:0;padding-right:16px}.sv-comment-item__text--collapsed{display:-webkit-box;-webkit-line-clamp:var(--sv-comment-max-lines,3);-webkit-box-orient:vertical;overflow:hidden}.sv-comment-item__expand-btn{background:0 0;border:0;padding:0;font-size:12px;color:var(--sv-comment-text-secondary);cursor:pointer;margin-top:4px}.sv-comment-item__expand-btn:hover{color:var(--sv-comment-text)}.sv-comment-item__actions{display:flex;align-items:center;gap:16px}.sv-comment-item__time{font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;font-weight:500;line-height:1.2;color:var(--sv-comment-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-comment-item__action-btn{display:flex;align-items:center;gap:4px;background:0 0;border:0;padding:0;font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;font-weight:500;line-height:1.2;color:var(--sv-comment-text-secondary);cursor:pointer;transition:color .15s ease}.sv-comment-item__action-btn:hover{color:var(--sv-comment-text)}.sv-comment-item__action-btn--active{color:var(--sv-comment-like-color)}.sv-comment-item__action-btn--active:hover{color:var(--sv-comment-like-color)}.sv-comment-item__action-icon{width:20px;height:20px}.sv-comment-replies{margin-top:12px;position:relative}.sv-comment-item--has-replies::before{content:'';position:absolute;left:20px;top:56px;bottom:0;width:1px;background:var(--sv-comment-reply-line)}.sv-comment-replies__toggle{display:flex;align-items:center;gap:0;background:0 0;border:0;padding:4px 0;cursor:pointer}.sv-comment-replies__toggle-line{width:24px;height:1px;background:#a3a3a3;margin-right:0}.sv-comment-replies__toggle-text{font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:13px;font-weight:600;line-height:1.4;color:var(--sv-comment-text-secondary);white-space:nowrap}.sv-comment-replies__toggle-icon{width:20px;height:20px;color:var(--sv-comment-text-secondary)}.sv-comment-replies__list{margin-top:12px}.sv-comment-reply{display:flex;gap:6px;padding:0 0 12px 0;position:relative}.sv-comment-reply__avatar{width:24px;height:24px;border-radius:100px;flex-shrink:0;object-fit:cover;background:var(--sv-comment-avatar-bg)}.sv-comment-reply__mention{color:var(--sv-comment-mention-color);font-weight:500}.sv-comment-sheet__input-area{padding:0 16px 36px 16px;flex-shrink:0}.sv-comment-input-guest{padding:16px;border-top:1px solid var(--sv-comment-border);display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--sv-comment-bg);color:var(--sv-comment-primary);font-weight:600;font-size:14px;width:100%;transition:background .15s ease}.sv-comment-input-guest:hover{background:rgba(22,77,142,.05)}.sv-comment-input-guest:active{background:rgba(22,77,142,.1)}.sv-comment-sheet__reply-to{display:flex;align-items:center;justify-content:space-between;padding:4px 0;margin-bottom:8px;font-size:12px;color:var(--sv-comment-text-secondary)}.sv-comment-sheet__reply-to-author-name{font-size:12px;color:var(--sv-comment-text);font-weight:500}.sv-comment-sheet__reply-to-clear{background:0 0;border:0;padding:4px;color:var(--sv-comment-text-secondary);cursor:pointer;font-size:12px}.sv-comment-sheet__input-wrapper{display:flex;align-items:center;gap:8px;height:44px;padding:16px;background:var(--sv-comment-bg);border:1px solid var(--sv-comment-input-border);border-radius:12px;backdrop-filter:blur(50px)}.sv-comment-sheet__input-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.sv-comment-sheet__media-btn{display:flex;align-items:center;justify-content:center;background:0 0;border:0;padding:0;cursor:pointer;flex-shrink:0}.sv-comment-sheet__media-btn svg{width:20px;height:20px}.sv-comment-sheet__input{flex:1;background:0 0;border:0;outline:none;resize:none;font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;font-style:italic;font-weight:normal;line-height:1.4;color:var(--sv-comment-text);padding:0;min-width:0}.sv-comment-sheet__input::placeholder{color:var(--sv-comment-text-secondary)}.sv-comment-sheet__input:not(:placeholder-shown){font-style:normal}.sv-comment-sheet__emoji-btn{display:flex;align-items:center;justify-content:center;background:0 0;border:0;padding:0;cursor:pointer;flex-shrink:0}.sv-comment-sheet__emoji-btn svg{width:20px;height:20px;color:var(--sv-comment-primary)}.sv-comment-sheet__emoji-bar{display:none;gap:8px;padding:8px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}.sv-comment-sheet__emoji-bar--visible{display:flex}.sv-comment-sheet__emoji-bar::-webkit-scrollbar{display:none}.sv-comment-sheet__emoji-bar-btn{background:0 0;border:0;padding:4px;font-size:20px;cursor:pointer;border-radius:4px;transition:background .15s ease}.sv-comment-sheet__emoji-bar-btn:hover{background:rgba(0,0,0,.05)}.sv-comment-sheet__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;color:var(--sv-comment-text-secondary)}.sv-comment-sheet__loading-spinner{width:24px;height:24px;border:2px solid rgba(0,0,0,.1);border-top-color:var(--sv-comment-primary);border-radius:50%;animation:sv-comment-spin .8s linear infinite}@keyframes sv-comment-spin{to{transform:rotate(360deg)}}.sv-comment-sheet__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center}.sv-comment-sheet__empty-icon{font-size:48px;margin-bottom:12px}.sv-comment-sheet__empty-text{color:var(--sv-comment-text-secondary);font-size:14px}.sv-comment-sheet__error{display:flex;flex-direction:column;align-items:center;padding:32px;text-align:center;color:var(--sv-comment-like-color)}.sv-comment-sheet__error-btn{margin-top:12px;padding:8px 16px;background:rgba(0,0,0,.05);border:0;border-radius:8px;color:var(--sv-comment-text);cursor:pointer}.sv-comment-sheet__load-more{display:flex;justify-content:center;padding:12px}.sv-comment-sheet__load-more-btn{background:0 0;border:0;padding:8px 16px;color:var(--sv-comment-text-secondary);cursor:pointer;font-size:13px}.sv-comment-sheet__load-more-btn:hover{color:var(--sv-comment-text)}.sv-comment-menu{position:relative}.sv-comment-menu__trigger{display:flex;align-items:center;justify-content:center;background:0 0;border:0;padding:4px;cursor:pointer;color:var(--sv-comment-text-secondary);border-radius:4px;transition:background .15s ease}.sv-comment-menu__trigger:hover{background:rgba(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,.15);z-index:10;overflow:hidden;animation:sv-menu-fade-in .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:0 0;border:0;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 .15s ease}.sv-comment-menu__item:hover{background:rgba(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,.08)}.sv-comment-menu__item-icon{width:18px;height:18px;flex-shrink:0}.sv-comment-dialog-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:var(--sv-comment-modal-z-index,1100);animation:sv-dialog-overlay-fade-in .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 .2s ease}@keyframes sv-dialog-scale-in{from{opacity:0;transform:scale(.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:0;border-radius:10px;font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s ease}.sv-comment-dialog__btn:disabled{opacity:.6;cursor:not-allowed}.sv-comment-dialog__btn--cancel{background:rgba(0,0,0,.06);color:var(--sv-comment-text)}.sv-comment-dialog__btn--cancel:hover:not(:disabled){background:rgba(0,0,0,.1)}.sv-comment-dialog__btn--danger{background:var(--sv-comment-like-color);color:#fff}.sv-comment-dialog__btn--danger:hover:not(:disabled){opacity:.9}.sv-comment-delete-confirm{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:var(--sv-comment-modal-z-index,1100)}.sv-comment-delete-confirm__dialog{background:var(--sv-comment-bg);border-radius:12px;padding:16px;max-width:280px;text-align:center}.sv-comment-delete-confirm__title{font-size:16px;font-weight:600;color:var(--sv-comment-text);margin-bottom:8px}.sv-comment-delete-confirm__text{font-size:14px;color:var(--sv-comment-text-secondary);margin-bottom:16px}.sv-comment-delete-confirm__actions{display:flex;gap:8px}.sv-comment-delete-confirm__btn{flex:1;padding:8px 12px;border:0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}.sv-comment-delete-confirm__btn--cancel{background:rgba(0,0,0,.05);color:var(--sv-comment-text)}.sv-comment-delete-confirm__btn--delete{background:var(--sv-comment-like-color);color:#fff}@keyframes sv-skeleton-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}.sv-comment-skeleton-list{display:flex;flex-direction:column}.sv-comment-skeleton{animation:sv-skeleton-fade-in .3s ease}@keyframes sv-skeleton-fade-in{from{opacity:0}to{opacity:1}}.sv-comment-skeleton__avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(90deg,rgba(0,0,0,.04)25%,rgba(0,0,0,.08)50%,rgba(0,0,0,.04)75%);background-size:200% 100%;animation:sv-skeleton-shimmer 1.5s ease-in-out infinite}.sv-comment-skeleton__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}.sv-comment-skeleton__header{display:flex;align-items:center;gap:12px}.sv-comment-skeleton__author{width:80px;height:14px;border-radius:4px;background:linear-gradient(90deg,rgba(0,0,0,.04)25%,rgba(0,0,0,.08)50%,rgba(0,0,0,.04)75%);background-size:200% 100%;animation:sv-skeleton-shimmer 1.5s ease-in-out infinite;animation-delay:.1s}.sv-comment-skeleton__time{width:40px;height:12px;border-radius:4px;background:linear-gradient(90deg,rgba(0,0,0,.04)25%,rgba(0,0,0,.08)50%,rgba(0,0,0,.04)75%);background-size:200% 100%;animation:sv-skeleton-shimmer 1.5s ease-in-out infinite;animation-delay:.15s}.sv-comment-skeleton__text{display:flex;flex-direction:column;gap:4px}.sv-comment-skeleton__line{height:14px;border-radius:4px;background:linear-gradient(90deg,rgba(0,0,0,.04)25%,rgba(0,0,0,.08)50%,rgba(0,0,0,.04)75%);background-size:200% 100%;animation:sv-skeleton-shimmer 1.5s ease-in-out infinite}.sv-comment-skeleton__line--full{width:100%;animation-delay:.2s}.sv-comment-skeleton__line--medium{width:65%;animation-delay:.25s}.sv-comment-skeleton__actions{display:flex;align-items:center;gap:16px;margin-top:4px}.sv-comment-skeleton__action{width:50px;height:12px;border-radius:4px;background:linear-gradient(90deg,rgba(0,0,0,.04)25%,rgba(0,0,0,.08)50%,rgba(0,0,0,.04)75%);background-size:200% 100%;animation:sv-skeleton-shimmer 1.5s ease-in-out infinite;animation-delay:.3s}`;
+function AngleDownIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function CloseIcon2({ className, style }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className,
+      style,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function formatCount2(count) {
+  if (count >= 1e6) {
+    return `${(count / 1e6).toFixed(1)}M`;
+  }
+  if (count >= 1e3) {
+    return `${(count / 1e3).toFixed(1)}K`;
+  }
+  return String(count);
+}
+var SheetHeader = memo(function SheetHeader2({
+  titleLabel = "Comments",
+  showHandle = false,
+  showSort = true,
+  onSortClick,
+  closeIcon,
+  className,
+  sortAriaLabel = "Sort comments",
+  closeAriaLabel = "Close comments"
+}) {
+  const { state, initialCount } = useCommentSheetContext();
+  const { onClose } = useBottomSheetContext();
+  const totalCount = state.totalCount > 0 ? state.totalCount : initialCount ?? 0;
+  return /* @__PURE__ */ jsxs("div", { className: clsx("sv-comment-sheet__header", className), children: [
+    showHandle && /* @__PURE__ */ jsx("div", { className: "sv-comment-sheet__header-handle" }),
+    /* @__PURE__ */ jsxs("div", { className: "sv-comment-sheet__header-left", children: [
+      /* @__PURE__ */ jsxs("h2", { className: "sv-comment-sheet__title", children: [
+        formatCount2(totalCount),
+        " ",
+        titleLabel
+      ] }),
+      showSort && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "sv-comment-sheet__sort-btn",
+          onClick: onSortClick,
+          "aria-label": sortAriaLabel,
+          children: /* @__PURE__ */ jsx(AngleDownIcon, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "sv-comment-sheet__close-btn",
+        onClick: onClose,
+        "aria-label": closeAriaLabel,
+        children: closeIcon ?? /* @__PURE__ */ jsx(CloseIcon2, {})
+      }
+    )
+  ] });
+});
+SheetHeader.displayName = "SheetHeader";
+var cssInjected = false;
+function injectCSS() {
+  if (cssInjected || typeof document === "undefined") return;
+  const styleId = "sv-comment-sheet-styles";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = COMMENT_SHEET_CSS;
+    document.head.appendChild(style);
+  }
+  cssInjected = true;
+}
+var DEFAULT_CONFIG = {
+  pageSize: 20,
+  replyPageSize: 10,
+  cacheTTL: 5 * 60 * 1e3,
+  repliesAutoExpandThreshold: 1,
+  repliesCollapseLimit: 3,
+  textMaxLines: 3,
+  inputMaxLength: 500,
+  enableOptimisticUI: true,
+  requireDeleteConfirm: true
+};
+var DEFAULT_I18N = {
+  expandText: "See more",
+  collapseText: "See less",
+  viewRepliesText: "View {count} more replies",
+  hideRepliesText: "Hide replies",
+  loadRepliesText: "Load replies",
+  viewMoreRepliesText: "View more replies"
+};
+var CommentSheetHeadless = memo(function CommentSheetHeadless2({
+  isOpen,
+  onClose,
+  videoId,
+  state,
+  actions,
+  config: configOverride,
+  initialCount,
+  children,
+  className,
+  backdropClassName,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  enableDragToDismiss = true,
+  dragCloseThreshold = 150,
+  i18n: i18nOverride
+}) {
+  useEffect(() => {
+    injectCSS();
+  }, []);
+  const [replyTarget, setReplyTarget] = useState(null);
+  const config = useMemo(() => ({ ...DEFAULT_CONFIG, ...configOverride }), [configOverride]);
+  const i18n = useMemo(() => ({ ...DEFAULT_I18N, ...i18nOverride }), [i18nOverride]);
+  useEffect(() => {
+    if (!isOpen) {
+      setReplyTarget(null);
+    }
+  }, [isOpen]);
+  const contextValue = useMemo(
+    () => ({
+      state,
+      actions,
+      videoId,
+      config,
+      isOpen,
+      onClose,
+      replyTarget,
+      setReplyTarget,
+      initialCount,
+      i18n
+    }),
+    [state, actions, videoId, config, isOpen, onClose, replyTarget, initialCount, i18n]
+  );
+  const defaultChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SheetHeader, {}),
+    /* @__PURE__ */ jsx(CommentList, {}),
+    /* @__PURE__ */ jsx(CommentInput, {})
+  ] });
+  return /* @__PURE__ */ jsx(CommentSheetContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    BottomSheetHeadless,
+    {
+      isOpen,
+      onClose,
+      height: "var(--sv-comment-sheet-height, 55vh)",
+      className: clsx("sv-comment-sheet", className),
+      backdropClassName: clsx("sv-comment-sheet-backdrop", backdropClassName),
+      contentClassName: "sv-comment-sheet__content",
+      closeOnBackdropClick,
+      closeOnEscape,
+      showDragHandle: false,
+      enableDragToDismiss,
+      dragCloseThreshold,
+      ariaLabel: "Comments",
+      dragHandleSelector: ".sv-comment-sheet__header",
+      scrollContainerSelector: ".sv-comment-sheet__list",
+      dragExcludeSelector: ".sv-comment-sheet__input-container",
+      children: children ?? defaultChildren
+    }
+  ) });
+});
+CommentSheetHeadless.displayName = "CommentSheetHeadless";
+var CommentSheet = Object.assign(CommentSheetHeadless, {
+  Header: SheetHeader,
+  List: CommentList,
+  Input: CommentInput,
+  Item: CommentItemComponent
+});
+
+export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentItemSkeleton, CommentList, CommentListSkeleton, CommentMenu, CommentSheet, CommentSheetContext, CommentSheetHeadless, DeleteConfirmDialog, SheetHeader, useCommentMenuContext, useCommentSheetContext, useOptionalCommentSheetContext };