@xhub-short/ui 0.1.0-beta.9 → 1.0.0-beta.22

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

@@ -0,0 +1,219 @@
+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;
+    /** Callback to lock/unlock global gestures */
+    onGestureLock?: (isLocked: boolean) => void;
+}
+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
+ *
+ * Note: CommentSheet is built on BottomSheetHeadless, so this CSS
+ * only provides CommentSheet-specific styling (colors, items, etc.)
+ * The base sheet structure is handled by BottomSheet.css.ts
+ */
+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   OVERRIDE BOTTOMSHEET STYLES\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 {\n  /* Override BottomSheet theming */\n  --sv-sheet-bg: var(--sv-comment-bg, #ffffff);\n  --sv-sheet-border-radius: var(--sv-comment-sheet-radius, 24px);\n  --sv-sheet-animation-duration: var(--sv-comment-animation-duration, 400ms);\n  --sv-sheet-animation-easing: var(--sv-comment-animation-easing, cubic-bezier(0.32, 0.72, 0, 1));\n  \n  /* Add margin for rounded corners effect */\n  margin: 16px;\n  border-radius: var(--sv-comment-sheet-radius, 24px);\n}\n\n.sv-comment-sheet-backdrop {\n  --sv-sheet-backdrop-bg: var(--sv-comment-backdrop-bg, rgba(0, 0, 0, 0.5));\n}\n\n/* Inner content wrapper */\n.sv-comment-sheet__inner {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n/* Content wrapper - remove BottomSheet default scroll */\n.sv-comment-sheet .sv-bottom-sheet__content {\n  overflow: visible;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\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 { COMMENT_SHEET_CSS as C, type ReplyTarget as R, SheetHeader as S, CommentInput as a, type CommentInputProps as b, CommentItemComponent as c, type CommentItemProps as d, CommentList as e, type CommentListProps as f, CommentSheet as g, CommentSheetContext as h, type CommentSheetContextValue as i, CommentSheetHeadless as j, type CommentSheetHeadlessProps as k, type CommentSheetI18n as l, type SheetHeaderProps as m, useOptionalCommentSheetContext as n, useCommentSheetContext as u };

package/dist/VideoSlotPlayIndicator-DPs8Xt5C.d.ts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface VideoSlotPlayIndicatorProps {
+    /** Custom play icon */
+    playIcon?: ReactNode;
+    /** Custom pause icon */
+    pauseIcon?: ReactNode;
+    /** Icon size in pixels */
+    size?: number;
+    /** Animation duration in ms */
+    duration?: number;
+    /**
+     * Keep play icon visible while video is paused (YouTube style)
+     * When false, icon auto-hides after duration
+     */
+    persistWhenPaused?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+interface VideoSlotPlayIndicatorInnerProps extends VideoSlotPlayIndicatorProps {
+    lastUserToggleTime: number;
+    isPlaying: boolean;
+}
+/**
+ * VideoSlotPlayIndicatorInner - Memoized inner component
+ *
+ * This component is wrapped with React.memo and receives all data via props.
+ * It will only re-render when props actually change (shallow comparison).
+ */
+declare const VideoSlotPlayIndicatorInner: react.NamedExoticComponent<VideoSlotPlayIndicatorInnerProps>;
+
+/**
+ * VideoSlotPlayIndicator Component
+ *
+ * This outer component:
+ * 1. Consumes context (will re-render when context changes)
+ * 2. Selects only the needed values
+ * 3. Passes them as props to memoized inner component
+ *
+ * The inner component will only re-render when the selected values change,
+ * NOT when unrelated context values change (e.g., during seek operations).
+ */
+declare function VideoSlotPlayIndicator(props: VideoSlotPlayIndicatorProps): React.ReactElement | null;
+declare namespace VideoSlotPlayIndicator {
+    var displayName: string;
+}
+
+export { VideoSlotPlayIndicator as V, type VideoSlotPlayIndicatorProps as a, type VideoSlotPlayIndicatorInnerProps as b, VideoSlotPlayIndicatorInner as c };