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

package/dist/CommentSheet.css-BeCrEaUG.d.ts

@@ -0,0 +1,221 @@
+import * as react from 'react';
+import react__default, { ReactElement, ReactNode } from 'react';
+import { CommentItem, UICommentState, UICommentActions, CommentConfig } from '@xhub-short/contracts';
+
+interface CommentInputProps {
+    /** Placeholder text */
+    placeholder?: string;
+    /** Quick emojis */
+    emojis?: string[];
+    /** Max input length */
+    maxLength?: number;
+    /** Custom class */
+    className?: string;
+    /** On submit callback */
+    onSubmitSuccess?: () => void;
+    /** On media button click */
+    onMediaClick?: () => void;
+    /** Reply to text (default: "Replying to") */
+    replyingToText?: string;
+    /** Reply placeholder template (default: "Reply to @{name}...") - {name} will be replaced */
+    replyPlaceholderTemplate?: string;
+    /** Cancel reply aria-label (default: "Cancel reply") */
+    cancelReplyAriaLabel?: string;
+    /** Add media aria-label (default: "Add media") */
+    addMediaAriaLabel?: string;
+    /** Submit comment aria-label (default: "Submit comment") */
+    submitAriaLabel?: string;
+    /** Open emoji aria-label (default: "Open emoji") */
+    emojiAriaLabel?: string;
+    /** Emoji button aria-label template (default: "Add {emoji}") */
+    addEmojiAriaLabel?: string;
+}
+declare const CommentInput: react.NamedExoticComponent<CommentInputProps>;
+
+interface CommentItemProps {
+    comment: CommentItem;
+    className?: string;
+}
+declare const CommentItemComponent: react.NamedExoticComponent<CommentItemProps>;
+
+interface CommentListProps {
+    /** Custom empty state */
+    emptyState?: ReactElement;
+    /** Custom loading state */
+    loadingState?: ReactElement;
+    /** Custom error state */
+    errorState?: (error: Error, retry: () => void) => ReactElement;
+    /** Custom class */
+    className?: string;
+    /** Error text (default: "Failed to load comments") */
+    errorText?: string;
+    /** Retry button text (default: "Try again") */
+    retryText?: string;
+    /** Empty state text (default: "No comments yet. Be the first!") */
+    emptyText?: string;
+    /** Load more button text (default: "Load more comments") */
+    loadMoreText?: string;
+}
+declare const CommentList: react.NamedExoticComponent<CommentListProps>;
+
+/**
+ * i18n strings for CommentSheet internal components
+ */
+interface CommentSheetI18n {
+    /** Text for "See more" button (default: "See more") */
+    expandText?: string;
+    /** Text for "See less" button (default: "See less") */
+    collapseText?: string;
+    /** Text for view replies - use {count} placeholder (default: "View {count} more replies") */
+    viewRepliesText?: string;
+    /** Text for hide replies (default: "Hide replies") */
+    hideRepliesText?: string;
+    /** Text for load replies (default: "Load replies") */
+    loadRepliesText?: string;
+    /** Text for view more replies (default: "View more replies") */
+    viewMoreRepliesText?: string;
+    /** Function to format relative time */
+    formatRelativeTime?: (dateStr: string) => string;
+    /** Text for delete menu option (default: "Delete") */
+    deleteText?: string;
+    /** Text for edit menu option (default: "Edit") */
+    editText?: string;
+    /** Text for report menu option (default: "Report") */
+    reportText?: string;
+    /** Delete confirmation title (default: "Delete comment?") */
+    deleteConfirmTitle?: string;
+    /** Delete confirmation message (default: "This action cannot be undone.") */
+    deleteConfirmMessage?: string;
+    /** Delete confirm button (default: "Delete") */
+    deleteConfirmButton?: string;
+    /** Cancel button (default: "Cancel") */
+    cancelButton?: string;
+}
+/**
+ * CommentSheet context value
+ */
+interface CommentSheetContextValue {
+    /** Comment state */
+    state: UICommentState;
+    /** Comment actions */
+    actions: UICommentActions;
+    /** Video ID */
+    videoId: string;
+    /** Config */
+    config: CommentConfig;
+    /** Whether sheet is open */
+    isOpen: boolean;
+    /** Close sheet */
+    onClose: () => void;
+    /** Reply target (when replying to a comment) */
+    replyTarget: ReplyTarget | null;
+    /** Set reply target */
+    setReplyTarget: (target: ReplyTarget | null) => void;
+    /** Initial count from video data (used before API loads) */
+    initialCount?: number;
+    /** i18n strings for internal components */
+    i18n: CommentSheetI18n;
+}
+/**
+ * Reply target info
+ */
+interface ReplyTarget {
+    /** Parent comment ID */
+    commentId: string;
+    /** Author name for @mention */
+    authorName: string;
+    /** Author ID */
+    authorId: string;
+}
+/**
+ * CommentSheet context
+ */
+declare const CommentSheetContext: react.Context<CommentSheetContextValue | undefined>;
+/**
+ * Hook to use CommentSheet context
+ * @throws if used outside of CommentSheetHeadless
+ */
+declare function useCommentSheetContext(): CommentSheetContextValue;
+/**
+ * Hook to optionally use CommentSheet context
+ * @returns context or undefined if not within CommentSheetHeadless
+ */
+declare function useOptionalCommentSheetContext(): CommentSheetContextValue | undefined;
+
+interface SheetHeaderProps {
+    /** Custom title label (default: "Comments") */
+    titleLabel?: string;
+    /** Show drag handle */
+    showHandle?: boolean;
+    /** Show sort button */
+    showSort?: boolean;
+    /** Sort click handler */
+    onSortClick?: () => void;
+    /** Custom close icon */
+    closeIcon?: ReactElement;
+    /** Custom class */
+    className?: string;
+    /** Sort button aria-label (default: "Sort comments") */
+    sortAriaLabel?: string;
+    /** Close button aria-label (default: "Close comments") */
+    closeAriaLabel?: string;
+}
+declare const SheetHeader: react__default.NamedExoticComponent<SheetHeaderProps>;
+
+interface CommentSheetHeadlessProps {
+    /** Whether sheet is open */
+    isOpen: boolean;
+    /** Close callback */
+    onClose: () => void;
+    /** Video ID for comments */
+    videoId: string;
+    /** Comment state from SDK */
+    state: UICommentState;
+    /** Comment actions from SDK */
+    actions: UICommentActions;
+    /** Config */
+    config?: Partial<CommentConfig>;
+    /** Initial count from video data (displayed before API loads) */
+    initialCount?: number;
+    /** Custom children (compound pattern) */
+    children?: ReactNode;
+    /** Root class name */
+    className?: string;
+    /** Backdrop class name */
+    backdropClassName?: string;
+    /** Close on backdrop click */
+    closeOnBackdropClick?: boolean;
+    /** Close on escape key */
+    closeOnEscape?: boolean;
+    /** Enable drag-to-dismiss */
+    enableDragToDismiss?: boolean;
+    /** Drag threshold to close (px) */
+    dragCloseThreshold?: number;
+    /** i18n strings for internal components (CommentItem, etc.) */
+    i18n?: CommentSheetI18n;
+}
+declare const CommentSheetHeadless: react.NamedExoticComponent<CommentSheetHeadlessProps>;
+declare const CommentSheet: react.NamedExoticComponent<CommentSheetHeadlessProps> & {
+    Header: react.NamedExoticComponent<SheetHeaderProps>;
+    List: react.NamedExoticComponent<CommentListProps>;
+    Input: react.NamedExoticComponent<CommentInputProps>;
+    Item: react.NamedExoticComponent<CommentItemProps>;
+};
+
+/**
+ * CommentSheet CSS
+ *
+ * Modern bottom sheet for comments (Light Theme)
+ * Based on Figma design: https://figma.com/design/Kd1lJUJ4B3Kuw3dV9UcUok
+ * Features:
+ * - Light theme with clean aesthetics
+ * - Slide-up animation
+ * - Backdrop with click-to-close
+ * - Keyboard-aware input positioning
+ * - Scrollable comment list
+ * - Pinned comment support
+ * - Vertical reply thread lines
+ */
+declare const COMMENT_SHEET_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CSS VARIABLES (Light Theme)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n:root {\n  /* Primary colors */\n  --sv-comment-primary: #164d8e;\n  --sv-comment-primary-light: #1354ae;\n  --sv-comment-primary-dark: #003477;\n  \n  /* Contrast colors */\n  --sv-comment-bg: #ffffff;\n  --sv-comment-text: #121212;\n  --sv-comment-text-secondary: #6b7271;\n  --sv-comment-border: rgba(18, 18, 18, 0.08);\n  \n  /* Accent colors */\n  --sv-comment-like-color: #ff434e;\n  --sv-comment-verified-color: #1ea031;\n  --sv-comment-mention-color: #164d8e;\n  \n  /* Component specific */\n  --sv-comment-avatar-bg: #e5e6e6;\n  --sv-comment-input-border: #a3a3a3;\n  --sv-comment-reply-line: #e5e6e6;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   BACKDROP & CONTAINER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-sheet-backdrop {\n  position: fixed;\n  inset: 0;\n  background: var(--sv-comment-backdrop-bg, rgba(0, 0, 0, 0.5));\n  z-index: var(--sv-comment-sheet-z-index, 1000);\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: opacity var(--sv-comment-animation-duration, 400ms) ease,\n              visibility 0s linear var(--sv-comment-animation-duration, 400ms);\n}\n\n.sv-comment-sheet-backdrop--open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n  transition: opacity var(--sv-comment-animation-duration, 400ms) ease,\n              visibility 0s linear 0s;\n}\n\n/* Keyframes for slide animations */\n@keyframes sv-sheet-slide-up {\n  from { transform: translateY(100%); }\n  to { transform: translateY(0); }\n}\n\n@keyframes sv-sheet-slide-down {\n  from { transform: translateY(0); }\n  to { transform: translateY(100%); }\n}\n\n.sv-comment-sheet {\n  position: fixed;\n  margin: 16px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--sv-comment-bg, #ffffff);\n  border-radius: var(--sv-comment-sheet-radius, 24px);\n  z-index: var(--sv-comment-sheet-z-index, 1001);\n  display: flex;\n  flex-direction: column;\n  max-height: var(--sv-comment-sheet-height, 55vh);\n  transform: translateY(100%);\n  overflow: hidden;\n  touch-action: pan-y;\n  isolation: isolate;\n  pointer-events: none;\n  will-change: transform;\n}\n\n.sv-comment-sheet--open {\n  transform: translateY(0);\n  pointer-events: auto;\n  animation: sv-sheet-slide-up var(--sv-comment-animation-duration, 400ms) \n             var(--sv-comment-animation-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards;\n}\n\n.sv-comment-sheet--open.sv-comment-sheet--closing {\n  pointer-events: none;\n  animation: sv-sheet-slide-down var(--sv-comment-animation-duration, 400ms) \n             var(--sv-comment-animation-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards !important;\n}\n\n/* CRITICAL: Disable VirtualSlider/VideoFeed swipe when CommentSheet is open */\nbody.sv-comment-sheet-open .sv-slider,\nbody.sv-comment-sheet-open .sv-video-feed {\n  pointer-events: none !important;\n  touch-action: none !important;\n}\n\nbody.sv-comment-sheet-open .sv-comment-sheet,\nbody.sv-comment-sheet-open .sv-comment-sheet-backdrop {\n  touch-action: auto !important;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   HEADER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-sheet__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  border-bottom: 1px solid var(--sv-comment-border);\n  flex-shrink: 0;\n  position: relative;\n  cursor: grab;\n  touch-action: none;\n}\n\n.sv-comment-sheet__header:active {\n  cursor: grabbing;\n}\n\n.sv-comment-sheet__header-handle {\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 36px;\n  height: 4px;\n  background: var(--sv-comment-text-secondary);\n  border-radius: 2px;\n  opacity: 0.3;\n}\n\n.sv-comment-sheet__header-left {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.sv-comment-sheet__title {\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.4;\n  color: var(--sv-comment-text);\n  opacity: 0.9;\n  margin: 0;\n}\n\n.sv-comment-sheet__sort-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--sv-comment-text);\n}\n\n.sv-comment-sheet__sort-btn svg {\n  width: 20px;\n  height: 20px;\n}\n\n.sv-comment-sheet__close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: 100px;\n  background: linear-gradient(180deg, var(--sv-comment-primary-light) 0%, var(--sv-comment-primary-dark) 100%);\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-comment-sheet__close-btn:hover {\n  opacity: 0.9;\n}\n\n.sv-comment-sheet__close-btn svg {\n  width: 20px;\n  height: 20px;\n  color: #ffffff;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   COMMENT LIST\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-sheet__list {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 8px 16px 28px 16px;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior: contain;\n  touch-action: pan-y;\n}\n\n.sv-comment-sheet__list::-webkit-scrollbar {\n  width: 0px;\n}\n\n.sv-comment-sheet__list::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.0);\n  border-radius: 0px;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   COMMENT ITEM\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-item {\n  display: flex;\n  gap: 6px;\n  padding: 16px 0;\n  position: relative;\n}\n\n.sv-comment-item--pending {\n  opacity: 0.6;\n}\n\n.sv-comment-item--pinned {\n  background: var(--sv-comment-bg);\n}\n\n.sv-comment-item__avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 120px;\n  flex-shrink: 0;\n  object-fit: cover;\n  background: var(--sv-comment-avatar-bg);\n}\n\n.sv-comment-item__content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.sv-comment-item__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n}\n\n.sv-comment-item__header-left {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  min-width: 0;\n}\n\n.sv-comment-item__pin-icon {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n  color: var(--sv-comment-primary);\n}\n\n.sv-comment-item__author {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.4;\n  color: var(--sv-comment-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sv-comment-item__verified {\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  color: var(--sv-comment-verified-color);\n}\n\n.sv-comment-item__badge {\n  font-size: 10px;\n  padding: 2px 6px;\n  background: var(--sv-comment-primary);\n  color: #ffffff;\n  border-radius: 4px;\n  flex-shrink: 0;\n}\n\n.sv-comment-item__menu-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-item__menu-btn svg {\n  width: 20px;\n  height: 20px;\n}\n\n.sv-comment-item__text {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--sv-comment-text);\n  word-break: break-word;\n  margin: 0;\n  padding-right: 16px;\n}\n\n/* Text collapse */\n.sv-comment-item__text--collapsed {\n  display: -webkit-box;\n  -webkit-line-clamp: var(--sv-comment-max-lines, 3);\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.sv-comment-item__expand-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 12px;\n  color: var(--sv-comment-text-secondary);\n  cursor: pointer;\n  margin-top: 4px;\n}\n\n.sv-comment-item__expand-btn:hover {\n  color: var(--sv-comment-text);\n}\n\n/* Actions row */\n.sv-comment-item__actions {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.sv-comment-item__time {\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.2;\n  color: var(--sv-comment-text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sv-comment-item__action-btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  background: none;\n  border: none;\n  padding: 0;\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.2;\n  color: var(--sv-comment-text-secondary);\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n\n.sv-comment-item__action-btn:hover {\n  color: var(--sv-comment-text);\n}\n\n.sv-comment-item__action-btn--active {\n  color: var(--sv-comment-like-color);\n}\n\n.sv-comment-item__action-btn--active:hover {\n  color: var(--sv-comment-like-color);\n}\n\n.sv-comment-item__action-icon {\n  width: 20px;\n  height: 20px;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   REPLIES\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-replies {\n  margin-top: 12px;\n  position: relative;\n}\n\n/* Vertical connecting line */\n.sv-comment-item--has-replies::before {\n  content: '';\n  position: absolute;\n  left: 20px;\n  top: 56px;\n  bottom: 0;\n  width: 1px;\n  background: var(--sv-comment-reply-line);\n}\n\n.sv-comment-replies__toggle {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  background: none;\n  border: none;\n  padding: 4px 0;\n  cursor: pointer;\n}\n\n.sv-comment-replies__toggle-line {\n  width: 24px;\n  height: 1px;\n  background: #a3a3a3;\n  margin-right: 0;\n}\n\n.sv-comment-replies__toggle-text {\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.4;\n  color: var(--sv-comment-text-secondary);\n  white-space: nowrap;\n}\n\n.sv-comment-replies__toggle-icon {\n  width: 20px;\n  height: 20px;\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-replies__list {\n  margin-top: 12px;\n}\n\n.sv-comment-reply {\n  display: flex;\n  gap: 6px;\n  padding: 0 0 12px 0;\n  position: relative;\n}\n\n.sv-comment-reply__avatar {\n  width: 24px;\n  height: 24px;\n  border-radius: 100px;\n  flex-shrink: 0;\n  object-fit: cover;\n  background: var(--sv-comment-avatar-bg);\n}\n\n.sv-comment-reply__mention {\n  color: var(--sv-comment-mention-color);\n  font-weight: 500;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   INPUT AREA\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-sheet__input-area {\n  padding: 0 16px 36px 16px;\n  flex-shrink: 0;\n}\n\n/* Guest mode - login prompt instead of input */\n.sv-comment-input-guest {\n  padding: 16px;\n  border-top: 1px solid var(--sv-comment-border);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background: var(--sv-comment-bg);\n  color: var(--sv-comment-primary);\n  font-weight: 600;\n  font-size: 14px;\n  width: 100%;\n  transition: background 0.15s ease;\n}\n\n.sv-comment-input-guest:hover {\n  background: rgba(22, 77, 142, 0.05);\n}\n\n.sv-comment-input-guest:active {\n  background: rgba(22, 77, 142, 0.1);\n}\n\n.sv-comment-sheet__reply-to {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 0;\n  margin-bottom: 8px;\n  font-size: 12px;\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-sheet__reply-to-author-name {\n  font-size: 12px;\n  color: var(--sv-comment-text);\n  font-weight: 500;\n}\n\n.sv-comment-sheet__reply-to-clear {\n  background: none;\n  border: none;\n  padding: 4px;\n  color: var(--sv-comment-text-secondary);\n  cursor: pointer;\n  font-size: 12px;\n}\n\n.sv-comment-sheet__input-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 44px;\n  padding: 16px;\n  background: var(--sv-comment-bg);\n  border: 1px solid var(--sv-comment-input-border);\n  border-radius: 12px;\n  backdrop-filter: blur(50px);\n}\n\n.sv-comment-sheet__input-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n}\n\n.sv-comment-sheet__media-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.sv-comment-sheet__media-btn svg {\n  width: 20px;\n  height: 20px;\n}\n\n.sv-comment-sheet__input {\n  flex: 1;\n  background: none;\n  border: none;\n  outline: none;\n  resize: none;\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 12px;\n  font-style: italic;\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--sv-comment-text);\n  padding: 0;\n  min-width: 0;\n}\n\n.sv-comment-sheet__input::placeholder {\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-sheet__input:not(:placeholder-shown) {\n  font-style: normal;\n}\n\n.sv-comment-sheet__emoji-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.sv-comment-sheet__emoji-btn svg {\n  width: 20px;\n  height: 20px;\n  color: var(--sv-comment-primary);\n}\n\n/* Hidden emoji bar (can be toggled) */\n.sv-comment-sheet__emoji-bar {\n  display: none;\n  gap: 8px;\n  padding: 8px 0;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.sv-comment-sheet__emoji-bar--visible {\n  display: flex;\n}\n\n.sv-comment-sheet__emoji-bar::-webkit-scrollbar {\n  display: none;\n}\n\n.sv-comment-sheet__emoji-bar-btn {\n  background: none;\n  border: none;\n  padding: 4px;\n  font-size: 20px;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background 0.15s ease;\n}\n\n.sv-comment-sheet__emoji-bar-btn:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   STATES\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-sheet__loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px;\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-sheet__loading-spinner {\n  width: 24px;\n  height: 24px;\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-top-color: var(--sv-comment-primary);\n  border-radius: 50%;\n  animation: sv-comment-spin 0.8s linear infinite;\n}\n\n@keyframes sv-comment-spin {\n  to { transform: rotate(360deg); }\n}\n\n.sv-comment-sheet__empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px;\n  text-align: center;\n}\n\n.sv-comment-sheet__empty-icon {\n  font-size: 48px;\n  margin-bottom: 12px;\n}\n\n.sv-comment-sheet__empty-text {\n  color: var(--sv-comment-text-secondary);\n  font-size: 14px;\n}\n\n.sv-comment-sheet__error {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 32px;\n  text-align: center;\n  color: var(--sv-comment-like-color);\n}\n\n.sv-comment-sheet__error-btn {\n  margin-top: 12px;\n  padding: 8px 16px;\n  background: rgba(0, 0, 0, 0.05);\n  border: none;\n  border-radius: 8px;\n  color: var(--sv-comment-text);\n  cursor: pointer;\n}\n\n/* Load more */\n.sv-comment-sheet__load-more {\n  display: flex;\n  justify-content: center;\n  padding: 12px;\n}\n\n.sv-comment-sheet__load-more-btn {\n  background: none;\n  border: none;\n  padding: 8px 16px;\n  color: var(--sv-comment-text-secondary);\n  cursor: pointer;\n  font-size: 13px;\n}\n\n.sv-comment-sheet__load-more-btn:hover {\n  color: var(--sv-comment-text);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   COMMENT MENU (Dropdown)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-menu {\n  position: relative;\n}\n\n.sv-comment-menu__trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 4px;\n  cursor: pointer;\n  color: var(--sv-comment-text-secondary);\n  border-radius: 4px;\n  transition: background 0.15s ease;\n}\n\n.sv-comment-menu__trigger:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.sv-comment-menu__icon {\n  width: 20px;\n  height: 20px;\n}\n\n.sv-comment-menu__dropdown {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  min-width: 140px;\n  background: var(--sv-comment-bg);\n  border: 1px solid var(--sv-comment-border);\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  z-index: 10;\n  overflow: hidden;\n  animation: sv-menu-fade-in 0.15s ease;\n}\n\n@keyframes sv-menu-fade-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.sv-comment-menu__item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 12px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--sv-comment-text);\n  text-align: left;\n  transition: background 0.15s ease;\n}\n\n.sv-comment-menu__item:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.sv-comment-menu__item--danger {\n  color: var(--sv-comment-like-color);\n}\n\n.sv-comment-menu__item--danger:hover {\n  background: rgba(255, 67, 78, 0.08);\n}\n\n.sv-comment-menu__item-icon {\n  width: 18px;\n  height: 18px;\n  flex-shrink: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   DELETE CONFIRMATION DIALOG\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-dialog-overlay {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: var(--sv-comment-modal-z-index, 1100);\n  animation: sv-dialog-overlay-fade-in 0.2s ease;\n}\n\n@keyframes sv-dialog-overlay-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.sv-comment-dialog {\n  background: var(--sv-comment-bg);\n  border-radius: 16px;\n  padding: 24px;\n  max-width: 300px;\n  width: calc(100% - 48px);\n  text-align: center;\n  animation: sv-dialog-scale-in 0.2s ease;\n}\n\n@keyframes sv-dialog-scale-in {\n  from { opacity: 0; transform: scale(0.95); }\n  to { opacity: 1; transform: scale(1); }\n}\n\n.sv-comment-dialog__title {\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 17px;\n  font-weight: 600;\n  color: var(--sv-comment-text);\n  margin: 0 0 8px 0;\n}\n\n.sv-comment-dialog__message {\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 14px;\n  color: var(--sv-comment-text-secondary);\n  margin: 0 0 20px 0;\n  line-height: 1.4;\n}\n\n.sv-comment-dialog__actions {\n  display: flex;\n  gap: 12px;\n}\n\n.sv-comment-dialog__btn {\n  flex: 1;\n  padding: 12px 16px;\n  border: none;\n  border-radius: 10px;\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-comment-dialog__btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.sv-comment-dialog__btn--cancel {\n  background: rgba(0, 0, 0, 0.06);\n  color: var(--sv-comment-text);\n}\n\n.sv-comment-dialog__btn--cancel:hover:not(:disabled) {\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.sv-comment-dialog__btn--danger {\n  background: var(--sv-comment-like-color);\n  color: #ffffff;\n}\n\n.sv-comment-dialog__btn--danger:hover:not(:disabled) {\n  opacity: 0.9;\n}\n\n/* Legacy classes (keep for backwards compatibility) */\n.sv-comment-delete-confirm {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: var(--sv-comment-modal-z-index, 1100);\n}\n\n.sv-comment-delete-confirm__dialog {\n  background: var(--sv-comment-bg);\n  border-radius: 12px;\n  padding: 16px;\n  max-width: 280px;\n  text-align: center;\n}\n\n.sv-comment-delete-confirm__title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--sv-comment-text);\n  margin-bottom: 8px;\n}\n\n.sv-comment-delete-confirm__text {\n  font-size: 14px;\n  color: var(--sv-comment-text-secondary);\n  margin-bottom: 16px;\n}\n\n.sv-comment-delete-confirm__actions {\n  display: flex;\n  gap: 8px;\n}\n\n.sv-comment-delete-confirm__btn {\n  flex: 1;\n  padding: 8px 12px;\n  border: none;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.sv-comment-delete-confirm__btn--cancel {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--sv-comment-text);\n}\n\n.sv-comment-delete-confirm__btn--delete {\n  background: var(--sv-comment-like-color);\n  color: #ffffff;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   SKELETON LOADING\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@keyframes sv-skeleton-shimmer {\n  0% { background-position: -200% 0; }\n  100% { background-position: 200% 0; }\n}\n\n.sv-comment-skeleton-list {\n  display: flex;\n  flex-direction: column;\n}\n\n.sv-comment-skeleton {\n  animation: sv-skeleton-fade-in 0.3s ease;\n}\n\n@keyframes sv-skeleton-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.sv-comment-skeleton__avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.sv-comment-skeleton__content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sv-comment-skeleton__header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.sv-comment-skeleton__author {\n  width: 80px;\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n  animation-delay: 0.1s;\n}\n\n.sv-comment-skeleton__time {\n  width: 40px;\n  height: 12px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n  animation-delay: 0.15s;\n}\n\n.sv-comment-skeleton__text {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.sv-comment-skeleton__line {\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.sv-comment-skeleton__line--full {\n  width: 100%;\n  animation-delay: 0.2s;\n}\n\n.sv-comment-skeleton__line--medium {\n  width: 65%;\n  animation-delay: 0.25s;\n}\n\n.sv-comment-skeleton__actions {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-top: 4px;\n}\n\n.sv-comment-skeleton__action {\n  width: 50px;\n  height: 12px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n  animation-delay: 0.3s;\n}\n";
+
+export { CommentSheet as C, type ReplyTarget as R, SheetHeader as S, CommentSheetHeadless as a, type CommentSheetHeadlessProps as b, type SheetHeaderProps as c, CommentList as d, type CommentListProps as e, CommentInput as f, type CommentInputProps as g, CommentItemComponent as h, type CommentItemProps as i, CommentSheetContext as j, useOptionalCommentSheetContext as k, type CommentSheetContextValue as l, type CommentSheetI18n as m, COMMENT_SHEET_CSS as n, useCommentSheetContext as u };

package/dist/{chunk-2PTMP65P.js → chunk-2FSDVYER.js}

@@ -1,5 +1,5 @@
-import { PlusIcon } from './chunk-4YDIRPIN.js';
-import { injectComponentCSS, removeComponentCSS } from './chunk-UXMA4KJZ.js';
+import { PlusIcon } from './chunk-ANCP53F3.js';
+import { injectComponentCSS } from './chunk-RMLTPW5S.js';
 import { clsx } from 'clsx';
 import { createContext, useInsertionEffect, useMemo, useState, useEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -71,7 +71,7 @@ function AuthorAvatar({
       tabIndex: handleClick ? 0 : void 0,
       "aria-label": handleClick ? `View ${avatarAlt}'s profile` : void 0,
       children: [
-        children ?? (showImage ? /* @__PURE__ */ jsx(
+        children ?? (showImage && avatarSrc ? /* @__PURE__ */ jsx(
           "img",
           {
             src: avatarSrc,
@@ -590,7 +590,9 @@ function FollowButton({
   followingText = "Following",
   disabled = false,
   className,
-  children
+  children,
+  followAriaLabel = "Follow",
+  unfollowAriaLabel = "Unfollow"
 }) {
   const context = useOptionalAuthorInfoContext();
   const isFollowing = isFollowingProp ?? context?.isFollowing ?? false;
@@ -634,7 +636,7 @@ function FollowButton({
       onTouchEnd: stopPropagation,
       disabled: isDisabled,
       "aria-pressed": isFollowing,
-      "aria-label": isFollowing ? "Unfollow" : "Follow",
+      "aria-label": isFollowing ? unfollowAriaLabel : followAriaLabel,
       "aria-busy": isPending,
       children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
@@ -668,10 +670,7 @@ function AuthorInfoHeadlessRoot({
   children
 }) {
   useInsertionEffect(() => {
-    injectComponentCSS(CSS_COMPONENT_ID, AUTHOR_INFO_CSS);
-    return () => {
-      removeComponentCSS(CSS_COMPONENT_ID);
-    };
+    return injectComponentCSS(CSS_COMPONENT_ID, AUTHOR_INFO_CSS);
   }, []);
   const contextValue = useMemo(
     () => ({

package/dist/{chunk-WKX2WBVO.js → chunk-3XPJHUYL.js}

@@ -1,30 +1,3 @@
-// src/utils/lazyGesture.ts
-var gestureModule = null;
-var loadPromise = null;
-async function loadGesture() {
-  if (gestureModule) {
-    return gestureModule;
-  }
-  if (loadPromise) {
-    return loadPromise;
-  }
-  loadPromise = import('./use-gesture-react.esm-3SV4QLEJ.js').then((mod) => {
-    gestureModule = mod;
-    return mod;
-  }).catch((error) => {
-    loadPromise = null;
-    throw error;
-  });
-  return loadPromise;
-}
-function isGestureLoaded() {
-  return gestureModule !== null;
-}
-function preloadGesture() {
-  loadGesture().catch(() => {
-  });
-}
-
 // src/utils/formatCount.ts
 var DEFAULT_SUFFIXES = {
   thousand: "K",
@@ -83,16 +56,5 @@ function parseFormattedCount(formatted) {
       return num;
   }
 }
-function cn(...inputs) {
-  return inputs.filter(Boolean).map((input) => {
-    if (typeof input === "string") {
-      return input;
-    }
-    if (typeof input === "object" && input !== null) {
-      return Object.entries(input).filter(([, value]) => value).map(([key]) => key).join(" ");
-    }
-    return "";
-  }).join(" ").trim();
-}
 
-export { cn, formatCount, formatCountWithSeparators, isGestureLoaded, loadGesture, parseFormattedCount, preloadGesture };
+export { formatCount, formatCountWithSeparators, parseFormattedCount };

package/dist/{chunk-ANGBSV7L.js → chunk-AC2IFAJR.js}

@@ -1,5 +1,6 @@
-import { cn, formatCount } from './chunk-WKX2WBVO.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { formatCount } from './chunk-3XPJHUYL.js';
+import { injectComponentCSS } from './chunk-RMLTPW5S.js';
+import { clsx } from 'clsx';
 import { createContext, useInsertionEffect, useState, useRef, useEffect, useCallback, useContext } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -339,6 +340,7 @@ function ActionButton({
   const handleTouchEnd = useCallback(
     (e) => {
       e.stopPropagation();
+      e.preventDefault();
       if (!disabled && onClick) {
         onClick();
       }
@@ -360,7 +362,7 @@ function ActionButton({
   const formattedCount = count !== void 0 ? formatter(count) : null;
   const shouldShowCount = count !== void 0 && (!hideZeroCount || count > 0);
   const displayIcon = isActive && activeIcon ? activeIcon : icon;
-  const buttonClasses = cn(
+  const buttonClasses = clsx(
     CSS_PREFIX,
     variant !== "default" && `${CSS_PREFIX}--${variant}`,
     type !== "default" && `${CSS_PREFIX}--${type}`,
@@ -389,7 +391,10 @@ function ActionButton({
         shouldShowCount && /* @__PURE__ */ jsx(
           "span",
           {
-            className: cn(`${CSS_PREFIX}__count`, !shouldShowCount && `${CSS_PREFIX}__count--hidden`),
+            className: clsx(
+              `${CSS_PREFIX}__count`,
+              !shouldShowCount && `${CSS_PREFIX}__count--hidden`
+            ),
             children: formattedCount
           }
         )
@@ -443,7 +448,7 @@ function ActionBarHeadlessRoot({
     interactionState,
     interactionActions
   };
-  const containerClasses = cn(
+  const containerClasses = clsx(
     CSS_PREFIX2,
     direction === "horizontal" && `${CSS_PREFIX2}--horizontal`,
     className

package/dist/{chunk-4YDIRPIN.js → chunk-ANCP53F3.js}

@@ -110,10 +110,10 @@ function BookmarkFilledIcon(props) {
   ) });
 }
 function PlayIcon(props) {
-  return /* @__PURE__ */ jsx("svg", { ...getIconProps(props), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", ...getIconProps(props), children: /* @__PURE__ */ jsx(
     "path",
     {
-      d: "M17.0089 3.45151C12.3423 0.748041 6.5 4.11533 6.5 9.50852V38.4835C6.5 43.8767 12.3423 47.244 17.0089 44.5405L42.0169 30.053C46.6717 27.3565 46.6717 20.6356 42.0169 17.939L17.0089 3.45151Z",
+      d: "M9.92196 2.01322C7.19974 0.436195 3.79175 2.40044 3.79175 5.54647V22.4486C3.79175 25.5946 7.19974 27.5588 9.92195 25.9818L24.5099 17.5308C27.2252 15.9578 27.2252 12.0373 24.5099 10.4643L9.92196 2.01322Z",
       fill: "currentColor"
     }
   ) });
@@ -122,7 +122,7 @@ function PauseIcon(props) {
   return /* @__PURE__ */ jsx("svg", { ...getIconProps(props), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
     "path",
     {
-      d: "M20.751 3.6V20.4C20.751 21.036 20.751 21.42 20.561 21.794C20.392 22.126 20.127 22.391 19.796 22.559C19.422 22.749 19.038 22.749 18.401 22.749H16.601C15.965 22.749 15.58 22.749 15.206 22.559C14.875 22.391 14.61 22.126 14.441 21.794C14.25 21.419 14.25 21.035 14.25 20.399V3.6C14.25 2.964 14.25 2.58 14.44 2.206C14.609 1.874 14.874 1.609 15.205 1.441C15.579 1.25 15.963 1.25 16.6 1.25H18.4C19.037 1.25 19.421 1.25 19.796 1.441C20.126 1.609 20.391 1.874 20.56 2.205C20.751 2.58 20.751 2.964 20.751 3.6ZM8.796 1.441C8.421 1.25 8.037 1.25 7.4 1.25H5.6C4.963 1.25 4.579 1.25 4.205 1.441C3.873 1.61 3.608 1.875 3.44 2.206C3.25 2.58 3.25 2.964 3.25 3.6V20.4C3.25 21.036 3.25 21.42 3.44 21.793C3.609 22.125 3.874 22.39 4.206 22.559C4.58 22.749 4.964 22.749 5.601 22.749H7.401C8.037 22.749 8.422 22.749 8.796 22.559C9.127 22.391 9.392 22.126 9.561 21.794C9.751 21.42 9.751 21.036 9.751 20.4V3.6C9.751 2.964 9.751 2.58 9.56 2.205C9.391 1.873 9.126 1.609 8.796 1.441Z",
+      d: "M24.2096 4.20016V23.8002C24.2096 24.5422 24.2096 24.9902 23.9879 25.4265C23.7907 25.8138 23.4816 26.123 23.0954 26.319C22.6591 26.5407 22.2111 26.5407 21.4679 26.5407H19.3679C18.6259 26.5407 18.1767 26.5407 17.7404 26.319C17.3542 26.123 17.0451 25.8138 16.8479 25.4265C16.6251 24.989 16.6251 24.541 16.6251 23.799V4.20016C16.6251 3.45816 16.6251 3.01016 16.8467 2.57383C17.0439 2.1865 17.3531 1.87733 17.7393 1.68133C18.1756 1.4585 18.6236 1.4585 19.3667 1.4585H21.4667C22.2099 1.4585 22.6579 1.4585 23.0954 1.68133C23.4804 1.87733 23.7896 2.1865 23.9867 2.57266C24.2096 3.01016 24.2096 3.45816 24.2096 4.20016ZM10.2621 1.68133C9.82458 1.4585 9.37658 1.4585 8.63342 1.4585H6.53341C5.79025 1.4585 5.34225 1.4585 4.90591 1.68133C4.51858 1.8785 4.20941 2.18766 4.01341 2.57383C3.79175 3.01016 3.79175 3.45816 3.79175 4.20016V23.8002C3.79175 24.5422 3.79175 24.9902 4.01341 25.4253C4.21058 25.8127 4.51975 26.1218 4.90708 26.319C5.34341 26.5407 5.79141 26.5407 6.53458 26.5407H8.63458C9.37658 26.5407 9.82575 26.5407 10.2621 26.319C10.6482 26.123 10.9574 25.8138 11.1546 25.4265C11.3762 24.9902 11.3762 24.5422 11.3762 23.8002V4.20016C11.3762 3.45816 11.3762 3.01016 11.1534 2.57266C10.9562 2.18533 10.6471 1.87733 10.2621 1.68133Z",
       fill: "currentColor"
     }
   ) });