@xhub-short/ui 0.1.0-beta.8 → 1.0.0-beta.18

package/dist/chunk-UXNIXHII.js

@@ -1,2040 +0,0 @@
-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 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 HeartIcon({ filled, className }) {
-  if (filled) {
-    return /* @__PURE__ */ jsx(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        "aria-label": "Heart icon",
-        "aria-hidden": "true",
-        className,
-        viewBox: "0 0 24 24",
-        fill: "currentColor",
-        children: /* @__PURE__ */ jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-label": "Heart icon",
-      "aria-hidden": "true",
-      className,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      children: /* @__PURE__ */ jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })
-    }
-  );
-}
-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 MoreIcon({ className }) {
-  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className, viewBox: "0 0 24 24", fill: "currentColor", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.5" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "6", r: "1.5" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "18", r: "1.5" })
-  ] });
-}
-function ChevronIcon({ direction, className }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      "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 { actions, setReplyTarget } = useCommentSheetContext();
-  const handleLike = useCallback(() => {
-    if (reply.isLiked) {
-      actions.unlikeComment(reply.id);
-    } else {
-      actions.likeComment(reply.id);
-    }
-  }, [actions, reply.id, reply.isLiked]);
-  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" })
-        ] }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "sv-comment-item__menu-btn", "aria-label": "More options", children: /* @__PURE__ */ jsx(MoreIcon, {}) })
-      ] }),
-      /* @__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__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: clsx(
-              "sv-comment-item__action-btn",
-              reply.isLiked && "sv-comment-item__action-btn--active"
-            ),
-            onClick: handleLike,
-            children: [
-              /* @__PURE__ */ jsx(HeartIcon, { filled: reply.isLiked, className: "sv-comment-item__action-icon" }),
-              reply.likeCount > 0 && /* @__PURE__ */ jsx("span", { children: formatCount(reply.likeCount) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("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 { actions, config, setReplyTarget, i18n } = useCommentSheetContext();
-  const expandText = i18n.expandText ?? "See more";
-  const collapseText = i18n.collapseText ?? "See less";
-  const formatTimeAgo = i18n.formatRelativeTime ?? defaultFormatTimeAgo;
-  const handleLike = useCallback(() => {
-    if (comment.isLiked) {
-      actions.unlikeComment(comment.id);
-    } else {
-      actions.likeComment(comment.id);
-    }
-  }, [actions, comment.id, comment.isLiked]);
-  const handleReply = useCallback(() => {
-    setReplyTarget({
-      commentId: comment.id,
-      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 })
-            ] }),
-            /* @__PURE__ */ jsx("button", { type: "button", className: "sv-comment-item__menu-btn", "aria-label": "More options", children: /* @__PURE__ */ jsx(MoreIcon, {}) })
-          ] }),
-          /* @__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: clsx(
-                  "sv-comment-item__action-btn",
-                  comment.isLiked && "sv-comment-item__action-btn--active"
-                ),
-                onClick: handleLike,
-                children: [
-                  /* @__PURE__ */ jsx(HeartIcon, { filled: comment.isLiked, className: "sv-comment-item__action-icon" }),
-                  comment.likeCount > 0 && /* @__PURE__ */ jsx("span", { children: formatCount(comment.likeCount) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs("button", { type: "button", className: "sv-comment-item__action-btn", onClick: handleReply, children: [
-              /* @__PURE__ */ jsx(ReplyIcon, { className: "sv-comment-item__action-icon" }),
-              comment.replyCount > 0 && /* @__PURE__ */ jsx("span", { children: formatCount(comment.replyCount) })
-            ] })
-          ] }),
-          /* @__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
-   DELETE CONFIRMATION
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-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, CommentSheet, CommentSheetContext, CommentSheetHeadless, SheetHeader, useCommentSheetContext, useOptionalCommentSheetContext };