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

package/dist/index.js

@@ -1,19 +1,29 @@
-export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from './chunk-RKS7YA7Z.js';
-export { BUFFERING_STATE_CLASS, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, VIDEO_CLASS, VIDEO_PLAYER_CSS, Z_INDEX as VIDEO_PLAYER_Z_INDEX, Z_INDEX_CSS_VARS as VIDEO_PLAYER_Z_INDEX_CSS_VARS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoPlayerHeadless, createFirstFrameCache, firstFrameCache, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from './chunk-NRQXKZO3.js';
-export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPlayIndicator, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useDoubleTap, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './chunk-T4RQWGRY.js';
-export { ACTION_BAR_CSS, CompoundBookmark as ActionBarBookmark, CompoundComment as ActionBarComment, ActionBarHeadless, CompoundLike as ActionBarLike, CompoundShare as ActionBarShare, ActionButton, BookmarkButton, CommentButton, LikeButton, ShareButton } from './chunk-CXPNPSF7.js';
-export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext } from './chunk-K3CETRCY.js';
+export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from './chunk-4RIMQOBR.js';
+export { DEFAULT_SPEEDS, SPEED_PICKER_CSS, SpeedPickerHeadless } from './chunk-QCRRF76W.js';
+export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from './chunk-7WXAQHJI.js';
+export { BUFFERING_STATE_CLASS, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, VIDEO_CLASS, VIDEO_PLAYER_CSS, Z_INDEX as VIDEO_PLAYER_Z_INDEX, Z_INDEX_CSS_VARS as VIDEO_PLAYER_Z_INDEX_CSS_VARS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoPlayerHeadless, createFirstFrameCache, firstFrameCache, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from './chunk-OM4L7RE5.js';
+export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, ReportedVideoOverlay, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS } from './chunk-VJ744W5N.js';
+export { DETAIL_VIEW_CSS, DetailViewAuthor, DetailViewCaption, DetailViewGallery, DetailViewHeadless, DetailViewMusic, DetailViewStats, useDetailViewContext } from './chunk-BADA7OLG.js';
+export { ErrorBoundary } from './chunk-IWSBYOSS.js';
+export { FEED_CLASS_PREFIX, FEED_CSS, FeedContext, FeedHeadless, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, FEED_CLASS_PREFIX as VIDEO_FEED_CLASS_PREFIX, FEED_CSS as VIDEO_FEED_CSS, FeedContext as VideoFeedContext, FeedHeadless as VideoFeedHeadless, getSlotIndexFromPosition, useFeedContext, useFeedPosition, useOptionalFeedContext, useOptionalFeedContext as useOptionalVideoFeedContext, useFeedContext as useVideoFeedContext, useFeedPosition as useVideoFeedPosition } from './chunk-BEJAJFV6.js';
+export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLOT_ACTIVE_ATTR as SLIDER_SLOT_ACTIVE_ATTR, SLIDER_SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY as SLIDER_SLOT_ACTIVE_DATASET_KEY, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLOT_INDEX_ATTR as SLIDER_SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY as SLIDER_SLOT_INDEX_DATASET_KEY, SLIDER_SLOT_TRANSITIONING_CLASS, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, getSlotIndexFromPosition as getSliderIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from './chunk-YB7AXTX7.js';
+export { PlaylistBarHeadless, PlaylistCollectionHeadless, PlaylistSheetHeadless } from './chunk-5Y43HNRG.js';
+export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from './chunk-VXW7AOGM.js';
+export { QUALITY_PICKER_CSS, QualityPickerHeadless } from './chunk-DR7KR7OT.js';
+export { REPORT_SHEET_CSS, ReportSheetHeadless, injectReportSheetCSS } from './chunk-DGKMO3AE.js';
+export { ACTION_BAR_CSS, CompoundBookmark as ActionBarBookmark, CompoundComment as ActionBarComment, ActionBarHeadless, CompoundLike as ActionBarLike, CompoundShare as ActionBarShare, ActionButton, BookmarkButton, CommentButton, LikeButton, ShareButton } from './chunk-NJXIYSDZ.js';
+export { ADVANCE_MENU_CSS, AdvanceMenuHeadless } from './chunk-HXQPEZRG.js';
+export { ARTICLE_ACTIVE_ATTR, ARTICLE_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS, ArticleSlotActions, ArticleSlotBottom, ArticleSlotCaption, ArticleSlotHeadless, ArticleSlotMusic, ArticleSlotOverlay, ArticleSlotPlayIndicator, ArticleSlotReadMore, ARTICLE_ACTIVE_ATTR as IMAGE_POST_ACTIVE_ATTR, ARTICLE_ID_ATTR as IMAGE_POST_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS as IMAGE_POST_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS as IMAGE_POST_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS as IMAGE_POST_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS as IMAGE_POST_SLOT_CSS, ArticleSlotActions as ImagePostSlotActions, ArticleSlotBottom as ImagePostSlotBottom, ArticleSlotCaption as ImagePostSlotCaption, ArticleSlotHeadless as ImagePostSlotHeadless, ArticleSlotMusic as ImagePostSlotMusic, ArticleSlotOverlay as ImagePostSlotOverlay, ArticleSlotPlayIndicator as ImagePostSlotPlayIndicator, ArticleSlotReadMore as ImagePostSlotReadMore, useArticleSlotContext, useArticleSlotContext as useImagePostSlotContext, useOptionalArticleSlotContext, useOptionalArticleSlotContext as useOptionalImagePostSlotContext } from './chunk-BNI7CYRI.js';
+export { VideoSlotContext, VideoSlotPlayIndicator, useDoubleTap, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './chunk-MFJS65C5.js';
+export { IMAGE_CAROUSEL_CSS, ImageCarouselHeadless } from './chunk-GSNIZ6DF.js';
+export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext } from './chunk-3OB3OVYR.js';
 export { BookmarkFilledIcon, BookmarkIcon, CloseIcon, CommentIcon, HeartFilledIcon, HeartIcon, MoreIcon, MusicIcon, PauseIcon, PlayIcon, PlusIcon, ShareIcon, UserCheckIcon, UserPlusIcon, VerifiedIcon, VolumeIcon, VolumeMutedIcon } from './chunk-ANCP53F3.js';
-export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentList, CommentSheet, CommentSheetContext, CommentSheetHeadless, SheetHeader, useCommentSheetContext, useOptionalCommentSheetContext } from './chunk-UXNIXHII.js';
-export { ErrorBoundary } from './chunk-YWAPI7JO.js';
-export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from './chunk-EBAMBI3O.js';
-export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from './chunk-PGHLVKXS.js';
-export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedHeadless, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from './chunk-QF7O26KZ.js';
-export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLOT_ACTIVE_ATTR as SLIDER_SLOT_ACTIVE_ATTR, SLIDER_SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY as SLIDER_SLOT_ACTIVE_DATASET_KEY, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLOT_INDEX_ATTR as SLIDER_SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY as SLIDER_SLOT_INDEX_DATASET_KEY, SLIDER_SLOT_TRANSITIONING_CLASS, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, getSlotIndexFromPosition as getSliderIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from './chunk-OQ7P5XC7.js';
+export { CLEAN_MODE_OVERLAY_CSS, CleanModeOverlayHeadless, injectCleanModeOverlayCSS } from './chunk-QUEJHA24.js';
 export { clsx, clsx2 as cn } from './chunk-EDWS2IPH.js';
 export { formatCount, formatCountWithSeparators, parseFormattedCount } from './chunk-3XPJHUYL.js';
-import { injectComponentCSS } from './chunk-UPCVSGWH.js';
-export { injectComponentCSS, isComponentCSSInjected, removeComponentCSS } from './chunk-UPCVSGWH.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+export { injectComponentCSS, isComponentCSSInjected, removeComponentCSS } from './chunk-CAWE42LH.js';
+export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentList, CommentSheet, CommentSheetContext, CommentSheetHeadless, SheetHeader, useCommentSheetContext, useOptionalCommentSheetContext } from './chunk-IC2KUU4V.js';
 import { createContext, useInsertionEffect, useContext, useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -24,13 +34,23 @@ var CSS_CONTENT = `
    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
 
 /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   FONT LOADING
+   CSS LAYER DECLARATION
+   
+   Declare the 'sv' layer first. All SDK component styles go into this layer.
+   Host app styles WITHOUT @layer automatically have HIGHER priority.
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+@layer sv;
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   FONT LOADING (outside layer - needs to be global)
    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
 
 @import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&display=swap');
 
 /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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 Mode (Default)
+   Outside layer so host app can easily override variables
    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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 {
@@ -203,9 +223,11 @@ var CSS_CONTENT = `
 }
 
 /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   BASE STYLES
+   BASE STYLES - Inside @layer sv for easy host app overrides
    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
 
+@layer sv {
+
 .sv-root {
   font-family: var(--sv-font-family);
   font-size: var(--sv-font-size-md);
@@ -600,6 +622,8 @@ var CSS_CONTENT = `
   transform: translateZ(0);
   will-change: transform;
 }
+
+} /* End @layer sv */
 `;
 
 // src/styles/useStyles.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhub-short/ui",
-  "version": "0.1.0-beta.8",
+  "version": "1.0.0-beta.18",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -57,6 +57,10 @@
       "types": "./dist/components/VirtualSlider/index.d.ts",
       "import": "./dist/components/VirtualSlider/index.js"
     },
+    "./ArticleSlot": {
+      "types": "./dist/components/ArticleSlot/index.d.ts",
+      "import": "./dist/components/ArticleSlot/index.js"
+    },
     "./icons": {
       "types": "./dist/components/icons/index.d.ts",
       "import": "./dist/components/icons/index.js"
@@ -69,7 +73,7 @@
   ],
   "dependencies": {
     "clsx": "^2.1.0",
-    "@xhub-short/contracts": "0.1.0-beta.8"
+    "@xhub-short/contracts": "1.0.0-beta.18"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -93,8 +97,8 @@
     "tsup": "^8.3.0",
     "typescript": "^5.7.0",
     "vitest": "^2.1.0",
-    "@xhub-short/tsconfig": "0.0.0",
-    "@xhub-short/vitest-config": "0.0.1-beta.7"
+    "@xhub-short/vitest-config": "0.1.0-beta.13",
+    "@xhub-short/tsconfig": "0.0.1-beta.2"
   },
   "scripts": {
     "build": "tsup",

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

@@ -1,207 +0,0 @@
-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;
-}
-/**
- * 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   DELETE CONFIRMATION\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-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 };