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

package/dist/chunk-FNXTPQ6L.js

@@ -0,0 +1,2573 @@
+import { clsx } from 'clsx';
+import { createContext, memo, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/CommentSheet/CommentSheetHeadless.tsx
+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 = `
+/* \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
+   CSS VARIABLES (Light Theme)
+   \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 */
+
+:root {
+  /* Primary colors */
+  --sv-comment-primary: #164d8e;
+  --sv-comment-primary-light: #1354ae;
+  --sv-comment-primary-dark: #003477;
+  
+  /* Contrast colors */
+  --sv-comment-bg: #ffffff;
+  --sv-comment-text: #121212;
+  --sv-comment-text-secondary: #6b7271;
+  --sv-comment-border: rgba(18, 18, 18, 0.08);
+  
+  /* Accent colors */
+  --sv-comment-like-color: #ff434e;
+  --sv-comment-verified-color: #1ea031;
+  --sv-comment-mention-color: #164d8e;
+  
+  /* Component specific */
+  --sv-comment-avatar-bg: #e5e6e6;
+  --sv-comment-input-border: #a3a3a3;
+  --sv-comment-reply-line: #e5e6e6;
+}
+
+/* \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
+   BACKDROP & CONTAINER
+   \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-sheet-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--sv-comment-backdrop-bg, rgba(0, 0, 0, 0.5));
+  z-index: var(--sv-comment-sheet-z-index, 1000);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity var(--sv-comment-animation-duration, 400ms) ease,
+              visibility 0s linear var(--sv-comment-animation-duration, 400ms);
+}
+
+.sv-comment-sheet-backdrop--open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: opacity var(--sv-comment-animation-duration, 400ms) ease,
+              visibility 0s linear 0s;
+}
+
+/* Keyframes for slide animations */
+@keyframes sv-sheet-slide-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes sv-sheet-slide-down {
+  from { transform: translateY(0); }
+  to { transform: translateY(100%); }
+}
+
+.sv-comment-sheet {
+  position: fixed;
+  margin: 16px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--sv-comment-bg, #ffffff);
+  border-radius: var(--sv-comment-sheet-radius, 24px);
+  z-index: var(--sv-comment-sheet-z-index, 1001);
+  display: flex;
+  flex-direction: column;
+  max-height: var(--sv-comment-sheet-height, 55vh);
+  transform: translateY(100%);
+  overflow: hidden;
+  touch-action: pan-y;
+  isolation: isolate;
+  pointer-events: none;
+  will-change: transform;
+}
+
+.sv-comment-sheet--open {
+  transform: translateY(0);
+  pointer-events: auto;
+  animation: sv-sheet-slide-up var(--sv-comment-animation-duration, 400ms) 
+             var(--sv-comment-animation-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards;
+}
+
+.sv-comment-sheet--open.sv-comment-sheet--closing {
+  pointer-events: none;
+  animation: sv-sheet-slide-down var(--sv-comment-animation-duration, 400ms) 
+             var(--sv-comment-animation-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards !important;
+}
+
+/* CRITICAL: Disable VirtualSlider/VideoFeed swipe when CommentSheet is open */
+body.sv-comment-sheet-open .sv-slider,
+body.sv-comment-sheet-open .sv-video-feed {
+  pointer-events: none !important;
+  touch-action: none !important;
+}
+
+body.sv-comment-sheet-open .sv-comment-sheet,
+body.sv-comment-sheet-open .sv-comment-sheet-backdrop {
+  touch-action: auto !important;
+}
+
+/* \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
+   HEADER
+   \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-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: 0.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: 0.9;
+  margin: 0;
+}
+
+.sv-comment-sheet__sort-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  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: none;
+  border-radius: 100px;
+  background: linear-gradient(180deg, var(--sv-comment-primary-light) 0%, var(--sv-comment-primary-dark) 100%);
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.sv-comment-sheet__close-btn:hover {
+  opacity: 0.9;
+}
+
+.sv-comment-sheet__close-btn svg {
+  width: 20px;
+  height: 20px;
+  color: #ffffff;
+}
+
+/* \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
+   COMMENT LIST
+   \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-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: 0px;
+}
+
+.sv-comment-sheet__list::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.0);
+  border-radius: 0px;
+}
+
+/* \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
+   COMMENT ITEM
+   \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-item {
+  display: flex;
+  gap: 6px;
+  padding: 16px 0;
+  position: relative;
+}
+
+.sv-comment-item--pending {
+  opacity: 0.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: #ffffff;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.sv-comment-item__menu-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  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: 400;
+  line-height: 1.4;
+  color: var(--sv-comment-text);
+  word-break: break-word;
+  margin: 0;
+  padding-right: 16px;
+}
+
+/* Text collapse */
+.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: none;
+  border: none;
+  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);
+}
+
+/* Actions row */
+.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: none;
+  border: none;
+  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 0.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;
+}
+
+/* \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
+   REPLIES
+   \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-replies {
+  margin-top: 12px;
+  position: relative;
+}
+
+/* Vertical connecting line */
+.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: none;
+  border: none;
+  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;
+}
+
+/* \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
+   INPUT AREA
+   \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-sheet__input-area {
+  padding: 0 16px 36px 16px;
+  flex-shrink: 0;
+}
+
+/* Guest mode - login prompt instead of input */
+.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 0.15s ease;
+}
+
+.sv-comment-input-guest:hover {
+  background: rgba(22, 77, 142, 0.05);
+}
+
+.sv-comment-input-guest:active {
+  background: rgba(22, 77, 142, 0.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: none;
+  border: none;
+  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: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.sv-comment-sheet__media-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.sv-comment-sheet__input {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 12px;
+  font-style: italic;
+  font-weight: 400;
+  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: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.sv-comment-sheet__emoji-btn svg {
+  width: 20px;
+  height: 20px;
+  color: var(--sv-comment-primary);
+}
+
+/* Hidden emoji bar (can be toggled) */
+.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: none;
+  border: none;
+  padding: 4px;
+  font-size: 20px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.15s ease;
+}
+
+.sv-comment-sheet__emoji-bar-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+/* \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
+   STATES
+   \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-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, 0.1);
+  border-top-color: var(--sv-comment-primary);
+  border-radius: 50%;
+  animation: sv-comment-spin 0.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, 0.05);
+  border: none;
+  border-radius: 8px;
+  color: var(--sv-comment-text);
+  cursor: pointer;
+}
+
+/* Load more */
+.sv-comment-sheet__load-more {
+  display: flex;
+  justify-content: center;
+  padding: 12px;
+}
+
+.sv-comment-sheet__load-more-btn {
+  background: none;
+  border: none;
+  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);
+}
+
+/* \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
+   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;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 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: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.sv-comment-delete-confirm__btn--cancel {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--sv-comment-text);
+}
+
+.sv-comment-delete-confirm__btn--delete {
+  background: var(--sv-comment-like-color);
+  color: #ffffff;
+}
+
+/* \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
+   SKELETON LOADING
+   \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 */
+
+@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 0.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, 0.04) 25%,
+    rgba(0, 0, 0, 0.08) 50%,
+    rgba(0, 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, 0.04) 25%,
+    rgba(0, 0, 0, 0.08) 50%,
+    rgba(0, 0, 0, 0.04) 75%
+  );
+  background-size: 200% 100%;
+  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;
+  animation-delay: 0.1s;
+}
+
+.sv-comment-skeleton__time {
+  width: 40px;
+  height: 12px;
+  border-radius: 4px;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.04) 25%,
+    rgba(0, 0, 0, 0.08) 50%,
+    rgba(0, 0, 0, 0.04) 75%
+  );
+  background-size: 200% 100%;
+  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;
+  animation-delay: 0.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, 0.04) 25%,
+    rgba(0, 0, 0, 0.08) 50%,
+    rgba(0, 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: 0.2s;
+}
+
+.sv-comment-skeleton__line--medium {
+  width: 65%;
+  animation-delay: 0.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, 0.04) 25%,
+    rgba(0, 0, 0, 0.08) 50%,
+    rgba(0, 0, 0, 0.04) 75%
+  );
+  background-size: 200% 100%;
+  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;
+  animation-delay: 0.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, onClose, initialCount } = useCommentSheetContext();
+  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,
+  // 5 minutes
+  repliesAutoExpandThreshold: 1,
+  repliesCollapseLimit: 3,
+  textMaxLines: 3,
+  inputMaxLength: 500,
+  enableOptimisticUI: true,
+  requireDeleteConfirm: true
+};
+var ANIMATION_DURATION = 400;
+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 sheetRef = useRef(null);
+  const dragStartY = useRef(0);
+  const currentTranslateY = useRef(0);
+  const isDragging = useRef(false);
+  const [isClosing, setIsClosing] = useState(false);
+  const isDragClosingRef = useRef(false);
+  const closeTimeoutRef = useRef(null);
+  const openedAtRef = useRef(0);
+  const config = useMemo(() => ({ ...DEFAULT_CONFIG, ...configOverride }), [configOverride]);
+  const i18n = useMemo(() => ({ ...DEFAULT_I18N, ...i18nOverride }), [i18nOverride]);
+  const handleClose = useCallback(() => {
+    if (isClosing) return;
+    const timeSinceOpen = Date.now() - openedAtRef.current;
+    if (timeSinceOpen < 100) return;
+    setIsClosing(true);
+    closeTimeoutRef.current = setTimeout(() => {
+      setIsClosing(false);
+      onClose();
+    }, ANIMATION_DURATION);
+  }, [isClosing, onClose]);
+  useEffect(() => {
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (isOpen) {
+      openedAtRef.current = Date.now();
+      setIsClosing(false);
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+    }
+  }, [isOpen]);
+  const [replyTarget, setReplyTarget] = useState(null);
+  useEffect(() => {
+    if (!isOpen) {
+      setReplyTarget(null);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!closeOnEscape || !isOpen) return;
+    const handleEscapeKey = (e) => {
+      if (e.key === "Escape") {
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscapeKey);
+    return () => document.removeEventListener("keydown", handleEscapeKey);
+  }, [closeOnEscape, isOpen, handleClose]);
+  const handleBackdropClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (closeOnBackdropClick && e.target === e.currentTarget) {
+        handleClose();
+      }
+    },
+    [closeOnBackdropClick, handleClose]
+  );
+  useEffect(() => {
+    if (!isOpen) return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    document.body.classList.add("sv-comment-sheet-open");
+    const blockTouchMove = (e) => {
+      const target = e.target;
+      const isInsideSheet = target.closest(".sv-comment-sheet");
+      if (!isInsideSheet) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    document.addEventListener("touchmove", blockTouchMove, { passive: false, capture: true });
+    return () => {
+      document.body.style.overflow = originalOverflow;
+      document.body.classList.remove("sv-comment-sheet-open");
+      document.removeEventListener("touchmove", blockTouchMove, { capture: true });
+    };
+  }, [isOpen]);
+  const dragSourceRef = useRef(null);
+  const isListAtTop = useCallback(() => {
+    const list = sheetRef.current?.querySelector(".sv-comment-sheet__list");
+    if (!list) return true;
+    return list.scrollTop <= 0;
+  }, []);
+  useEffect(() => {
+    if (!isOpen || !sheetRef.current) return;
+    sheetRef.current.style.transform = "";
+    sheetRef.current.style.transition = "";
+    sheetRef.current.style.animation = "";
+    currentTranslateY.current = 0;
+    isDragging.current = false;
+    dragSourceRef.current = null;
+    isDragClosingRef.current = false;
+  }, [isOpen]);
+  const getDragSource = useCallback(
+    (target) => {
+      const isInput = target.closest(".sv-comment-sheet__input-container");
+      if (isInput) return null;
+      const isHeader = target.closest(".sv-comment-sheet__header");
+      if (isHeader) return "header";
+      const isList = target.closest(".sv-comment-sheet__list");
+      if (isList && isListAtTop()) return "overscroll";
+      return null;
+    },
+    [isListAtTop]
+  );
+  const animateClose = useCallback(
+    (sheet) => {
+      isDragClosingRef.current = true;
+      setIsClosing(true);
+      sheet.style.transition = `transform ${ANIMATION_DURATION}ms cubic-bezier(0.32, 0.72, 0, 1)`;
+      sheet.style.transform = "translateY(100%)";
+      closeTimeoutRef.current = setTimeout(() => {
+        sheet.style.transition = "";
+        sheet.style.transform = "";
+        sheet.style.animation = "";
+        isDragClosingRef.current = false;
+        setIsClosing(false);
+        onClose();
+      }, ANIMATION_DURATION);
+    },
+    [onClose]
+  );
+  const animateSnapBack = useCallback((sheet) => {
+    sheet.style.transition = `transform ${ANIMATION_DURATION}ms cubic-bezier(0.32, 0.72, 0, 1)`;
+    sheet.style.transform = "translateY(0)";
+    setTimeout(() => {
+      sheet.style.transition = "";
+      sheet.style.transform = "";
+    }, ANIMATION_DURATION);
+  }, []);
+  useEffect(() => {
+    const sheet = sheetRef.current;
+    if (!sheet || !isOpen || !enableDragToDismiss) return;
+    const onTouchStart = (e) => {
+      e.stopPropagation();
+      const source = getDragSource(e.target);
+      if (!source) return;
+      dragSourceRef.current = source;
+      isDragging.current = true;
+      dragStartY.current = e.touches[0]?.clientY ?? 0;
+      currentTranslateY.current = 0;
+      sheet.style.animation = "none";
+      sheet.style.transition = "none";
+      void sheet.offsetHeight;
+    };
+    const onTouchMove = (e) => {
+      e.stopPropagation();
+      const clientY = e.touches[0]?.clientY ?? 0;
+      const deltaY = clientY - dragStartY.current;
+      if (dragSourceRef.current === "overscroll" && (deltaY <= 0 || !isListAtTop())) {
+        isDragging.current = false;
+        return;
+      }
+      if (!isDragging.current) return;
+      currentTranslateY.current = Math.max(0, deltaY);
+      if (currentTranslateY.current > 0) {
+        e.preventDefault();
+      }
+      sheet.style.transform = `translateY(${currentTranslateY.current}px)`;
+    };
+    const onTouchEnd = (e) => {
+      e.stopPropagation();
+      dragSourceRef.current = null;
+      if (!isDragging.current) return;
+      isDragging.current = false;
+      const dragDistance = currentTranslateY.current;
+      currentTranslateY.current = 0;
+      if (dragDistance > dragCloseThreshold) {
+        animateClose(sheet);
+      } else if (dragDistance > 0) {
+        animateSnapBack(sheet);
+      }
+    };
+    sheet.addEventListener("touchstart", onTouchStart, { passive: false });
+    sheet.addEventListener("touchmove", onTouchMove, { passive: false });
+    sheet.addEventListener("touchend", onTouchEnd, { passive: false });
+    return () => {
+      sheet.removeEventListener("touchstart", onTouchStart);
+      sheet.removeEventListener("touchmove", onTouchMove);
+      sheet.removeEventListener("touchend", onTouchEnd);
+    };
+  }, [
+    isOpen,
+    enableDragToDismiss,
+    dragCloseThreshold,
+    isListAtTop,
+    getDragSource,
+    animateClose,
+    animateSnapBack
+  ]);
+  const contextValue = useMemo(
+    () => ({
+      state,
+      actions,
+      videoId,
+      config,
+      isOpen,
+      onClose: handleClose,
+      // Use animated close handler
+      replyTarget,
+      setReplyTarget,
+      initialCount,
+      i18n
+    }),
+    [state, actions, videoId, config, isOpen, handleClose, replyTarget, initialCount, i18n]
+  );
+  const defaultChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SheetHeader, {}),
+    /* @__PURE__ */ jsx(CommentList, {}),
+    /* @__PURE__ */ jsx(CommentInput, {})
+  ] });
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        handleClose();
+      }
+    },
+    [handleClose]
+  );
+  return /* @__PURE__ */ jsxs(CommentSheetContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          "sv-comment-sheet-backdrop",
+          isOpen && !isClosing && "sv-comment-sheet-backdrop--open",
+          backdropClassName
+        ),
+        onClick: handleBackdropClick,
+        onKeyDown: handleKeyDown,
+        onPointerDown: (e) => e.stopPropagation(),
+        onPointerUp: (e) => e.stopPropagation(),
+        onTouchStart: (e) => e.stopPropagation(),
+        onTouchMove: (e) => e.stopPropagation(),
+        onTouchEnd: (e) => e.stopPropagation(),
+        role: "presentation"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: sheetRef,
+        className: clsx(
+          "sv-comment-sheet",
+          isOpen && "sv-comment-sheet--open",
+          // Keep --open while closing for proper animation
+          isClosing && !isDragClosingRef.current && "sv-comment-sheet--closing",
+          // Skip CSS animation for drag close
+          className
+        ),
+        "aria-label": "Comments",
+        "aria-hidden": !isOpen,
+        onKeyDown: handleKeyDown,
+        tabIndex: isOpen ? 0 : -1,
+        onClick: (e) => e.stopPropagation(),
+        onPointerDown: (e) => e.stopPropagation(),
+        onPointerUp: (e) => e.stopPropagation(),
+        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 };