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

package/dist/components/ArticleSlot/index.d.ts

@@ -0,0 +1,213 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+import { Article, MusicInfo } from '@xhub-short/contracts';
+import { b as VideoSlotPlayIndicatorInnerProps } from '../../VideoSlotPlayIndicator-DPs8Xt5C.js';
+
+/** CSS class for article slot */
+declare const ARTICLE_SLOT_CLASS = "sv-article-slot";
+/** CSS class for active state */
+declare const ARTICLE_SLOT_ACTIVE_CLASS = "sv-article-slot--active";
+/** CSS class for clean mode */
+declare const ARTICLE_SLOT_CLEAN_MODE_CLASS = "sv-article-slot--clean-mode";
+/** Data attribute for article ID */
+declare const ARTICLE_ID_ATTR = "data-article-id";
+/** Data attribute for active state */
+declare const ARTICLE_ACTIVE_ATTR = "data-active";
+interface ArticleSlotContextValue {
+    /** The article data */
+    article: Article;
+    /** Current image index in carousel */
+    currentImageIndex: number;
+    /** Total number of images */
+    totalImages: number;
+    /** Whether this slot is active (visible) */
+    isActive: boolean;
+    /** Whether in clean mode */
+    isCleanMode: boolean;
+    /** Timestamp of last user music toggle (for PlayIndicator) */
+    lastMusicToggleTime: number;
+    /** Music info (if any) */
+    music?: MusicInfo;
+    /** Whether music is playing */
+    isMusicPlaying: boolean;
+    /** Toggle music playback */
+    toggleMusic: () => void;
+    /** Navigate to specific image */
+    goToImage: (index: number) => void;
+    /** Go to next image */
+    nextImage: () => void;
+    /** Go to previous image */
+    prevImage: () => void;
+    /** Expand caption / open detail view */
+    expandCaption: () => void;
+}
+/**
+ * Hook to access ArticleSlot context
+ * @throws if used outside ArticleSlotHeadless
+ */
+declare function useArticleSlotContext(): ArticleSlotContextValue;
+/**
+ * Hook to optionally access ArticleSlot context
+ * Returns null if used outside ArticleSlotHeadless
+ */
+declare function useOptionalArticleSlotContext(): ArticleSlotContextValue | null;
+interface ArticleSlotHeadlessProps {
+    /** The article data */
+    article: Article;
+    /** Whether this slot is active (visible in viewport) */
+    isActive?: boolean;
+    /** Current image index (controlled) */
+    currentImageIndex?: number;
+    /** Called when image index changes */
+    onImageIndexChange?: (index: number) => void;
+    /** Music info for this post */
+    music?: MusicInfo;
+    /** Whether music is playing */
+    isMusicPlaying?: boolean;
+    /** Toggle music playback */
+    onToggleMusic?: () => void;
+    /**
+     * Last music toggle timestamp (controlled from parent for PlayIndicator sync).
+     * If provided, overrides internal tracking.
+     */
+    lastMusicToggleTime?: number;
+    /** Whether in clean mode (hide overlay) */
+    isCleanMode?: boolean;
+    /** Handle single tap */
+    onTap?: () => void;
+    /** Handle double tap (usually for like) */
+    onDoubleTap?: () => void;
+    /** Handle long press */
+    onLongPress?: () => void;
+    /** Called when "Read More" is clicked */
+    onReadMoreClick?: () => void;
+    /** Disable tap gestures */
+    disableTap?: boolean;
+    /** Enable pinch-to-zoom on images */
+    enableZoom?: boolean;
+    /** Custom placeholder renderer for images */
+    renderPlaceholder?: (index: number) => ReactNode;
+    /** Show image counter (1/5) */
+    showCounter?: boolean;
+    /** Show pagination dots */
+    showIndicators?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Called when swipe direction changes (for gesture locking) */
+    onSwipeDirectionChange?: (direction: 'horizontal' | 'vertical' | null) => void;
+    /** Children (render prop or ReactNode) */
+    children?: ReactNode | ((context: ArticleSlotContextValue) => ReactNode);
+    /** Custom styles */
+    style?: React.CSSProperties;
+}
+declare function ArticleSlotHeadlessBase({ article, isActive, currentImageIndex: controlledIndex, onImageIndexChange, music, isMusicPlaying, onToggleMusic, lastMusicToggleTime: controlledToggleTime, isCleanMode, onTap, onDoubleTap, onLongPress, onReadMoreClick, disableTap, enableZoom, renderPlaceholder, showCounter, showIndicators, className, onSwipeDirectionChange, children, style, }: ArticleSlotHeadlessProps): ReactElement;
+declare const ArticleSlotHeadless: react.MemoExoticComponent<typeof ArticleSlotHeadlessBase>;
+/**
+ * Overlay container for author, caption, actions
+ */
+interface ArticleSlotOverlayProps {
+    children?: ReactNode;
+    className?: string;
+}
+declare function ArticleSlotOverlay({ children, className }: ArticleSlotOverlayProps): ReactElement;
+/**
+ * Bottom content area (author, caption, read more)
+ */
+interface ArticleSlotBottomProps {
+    children?: ReactNode;
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+}
+declare function ArticleSlotBottom({ children, className, onClick, }: ArticleSlotBottomProps): ReactElement;
+/**
+ * Actions container (right side)
+ */
+interface ArticleSlotActionsProps {
+    children?: ReactNode;
+    className?: string;
+}
+declare function ArticleSlotActions({ children, className }: ArticleSlotActionsProps): ReactElement;
+/**
+ * Caption component with optional expansion
+ */
+interface ArticleSlotCaptionProps {
+    /** Maximum lines to show (default: 2) */
+    maxLines?: number;
+    /** Whether caption is expanded */
+    expanded?: boolean;
+    /** Class name */
+    className?: string;
+}
+declare function ArticleSlotCaption({ maxLines, expanded, className, }: ArticleSlotCaptionProps): ReactElement;
+/**
+ * Read More button
+ */
+interface ArticleSlotReadMoreProps {
+    /** Button label */
+    label?: string;
+    /** Class name */
+    className?: string;
+    /** Click handler (overrides context) */
+    onClick?: () => void;
+}
+declare function ArticleSlotReadMore({ label, className, onClick, }: ArticleSlotReadMoreProps): ReactElement;
+/**
+ * Music bar component
+ */
+interface ArticleSlotMusicProps {
+    /** Class name */
+    className?: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Custom fallback element when cover image fails to load or is not provided.
+     * If not provided, a default vinyl disc SVG will be used.
+     *
+     * @example
+     * ```tsx
+     * <ArticleSlotMusic
+     *   fallbackCover={<MyCustomMusicIcon className="my-icon" />}
+     * />
+     * ```
+     */
+    fallbackCover?: ReactNode;
+}
+declare function ArticleSlotMusic({ className, onClick, fallbackCover, }: ArticleSlotMusicProps): ReactElement | null;
+/**
+ * Props for ArticleSlotPlayIndicator
+ * Uses same props as VideoSlotPlayIndicatorInner, minus context-derived props
+ */
+type ArticleSlotPlayIndicatorProps = Omit<VideoSlotPlayIndicatorInnerProps, 'lastUserToggleTime' | 'isPlaying'>;
+/**
+ * ArticleSlotPlayIndicator - Shows play/pause icon when user toggles music
+ *
+ * Reuses the same visual component as VideoSlot but reads from ArticleSlot context.
+ * This ensures UI consistency across Video and Article posts.
+ *
+ * @example
+ * ```tsx
+ * <ArticleSlotHeadless article={article}>
+ *   <ArticleSlotPlayIndicator persistWhenPaused />
+ * </ArticleSlotHeadless>
+ * ```
+ */
+declare function ArticleSlotPlayIndicator(props: ArticleSlotPlayIndicatorProps): ReactElement | null;
+declare namespace ArticleSlotPlayIndicator {
+    var displayName: string;
+}
+
+/**
+ * ArticleSlot CSS - Injected at runtime
+ *
+ * Features:
+ * - Full-screen article display
+ * - Overlay for author, caption, actions
+ * - Music bar (optional)
+ * - Read more button
+ */
+declare const ARTICLE_SLOT_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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ARTICLE SLOT - 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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-article-slot {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background: var(--sv-article-bg, #000);\n  touch-action: pan-y;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.sv-article-slot--active {\n  z-index: 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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   IMAGE 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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-article-slot__images {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   OVERLAY (Author, Caption, Actions)\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-article-slot__overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n}\n\n.sv-article-slot__overlay > * {\n  pointer-events: auto;\n}\n\n/* Gradient background for better text visibility */\n.sv-article-slot__gradient {\n  position: absolute;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.sv-article-slot__gradient--top {\n  top: 0;\n  height: 120px;\n  background: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, 0.5) 0%,\n    rgba(0, 0, 0, 0.3) 50%,\n    transparent 100%\n  );\n}\n\n.sv-article-slot__gradient--bottom {\n  bottom: 0;\n  height: 200px;\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.7) 0%,\n    rgba(0, 0, 0, 0.4) 50%,\n    transparent 100%\n  );\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   TOP BAR (Counter, Badge)\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-article-slot__top-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: var(--sv-article-top-padding, 16px);\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  z-index: 10;\n}\n\n.sv-article-slot__counter {\n  padding: 4px 10px;\n  background: var(--sv-article-counter-bg, rgba(0, 0, 0, 0.6));\n  border-radius: 12px;\n  font-size: var(--sv-article-counter-font-size, 12px);\n  font-weight: 500;\n  color: var(--sv-article-counter-color, #fff);\n}\n\n/* Image badge (e.g., \"Photo\") */\n.sv-article-slot__badge {\n  padding: 4px 8px;\n  background: var(--sv-article-badge-bg, rgba(255, 255, 255, 0.2));\n  border-radius: 4px;\n  font-size: var(--sv-article-badge-font-size, 11px);\n  font-weight: 500;\n  color: var(--sv-article-badge-color, #fff);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   BOTTOM CONTENT (Author, Caption, Music, Read More)\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-article-slot__bottom {\n  position: absolute;\n  bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-playlist-bar-offset, 0px));\n  left: 0;\n  right: var(--sv-article-action-bar-width, 72px);\n  padding: var(--sv-article-bottom-padding, 16px);\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  z-index: 5;\n  transition: bottom 0.3s ease-in-out;\n}\n\n/* Author section */\n.sv-article-slot__author {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.sv-article-slot__author-avatar {\n  width: var(--sv-article-avatar-size, 40px);\n  height: var(--sv-article-avatar-size, 40px);\n  border-radius: 50%;\n  object-fit: cover;\n  border: 2px solid var(--sv-article-avatar-border, rgba(255, 255, 255, 0.3));\n}\n\n.sv-article-slot__author-name {\n  font-size: var(--sv-article-author-font-size, 15px);\n  font-weight: 600;\n  color: var(--sv-article-author-color, #fff);\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n}\n\n/* Caption section */\n.sv-article-slot__caption {\n  font-size: var(--sv-article-caption-font-size, 14px);\n  line-height: 1.4;\n  color: var(--sv-article-caption-color, #fff);\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n  display: -webkit-box;\n  -webkit-line-clamp: var(--sv-article-caption-lines, 2);\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.sv-article-slot__caption--expanded {\n  -webkit-line-clamp: unset;\n  overflow: visible;\n}\n\n/* Read more button */\n.sv-article-slot__read-more {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 16px;\n  background: var(--sv-article-read-more-bg, rgba(255, 255, 255, 0.2));\n  border: none;\n  border-radius: 20px;\n  font-size: var(--sv-article-read-more-font-size, 13px);\n  font-weight: 500;\n  color: var(--sv-article-read-more-color, #fff);\n  cursor: pointer;\n  transition: background 0.2s ease;\n  width: fit-content;\n}\n\n.sv-article-slot__read-more:hover {\n  background: var(--sv-article-read-more-hover-bg, rgba(255, 255, 255, 0.3));\n}\n\n.sv-article-slot__read-more svg {\n  width: 16px;\n  height: 16px;\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ACTION BAR (Right side)\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-article-slot__actions {\n  position: absolute;\n  right: 0;\n  bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-playlist-bar-offset, 0px));\n  width: var(--sv-article-action-bar-width, 72px);\n  padding: var(--sv-article-actions-padding, 16px 8px);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  z-index: 5;\n  transition: bottom 0.3s ease-in-out;\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MUSIC BAR\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-article-slot__music {\n  overflow: hidden;\n  aspect-ratio: 1/1;\n  background: transparent;\n  width: fit-content;\n  height: fit-content;\n  border: none;\n}\n\n.sv-article-slot__music-cover {\n  width: 44px;\n  height: 44px;\n  object-fit: cover;\n  border-radius: 999px;\n  border: 2px solid var(--sv-article-music-border, rgba(255, 255, 255, 0.3));\n}\n\n.sv-article-slot__music-cover--playing {\n  animation: sv-music-rotate 4s linear infinite;\n}\n\n@keyframes sv-music-rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   LIKE ANIMATION\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-article-slot__like-animation {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 20;\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CLEAN MODE (Hide overlay)\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-article-slot--clean-mode .sv-article-slot__overlay,\n.sv-article-slot--clean-mode .sv-article-slot__top-bar,\n.sv-article-slot--clean-mode .sv-article-slot__bottom,\n.sv-article-slot--clean-mode .sv-article-slot__actions,\n.sv-article-slot--clean-mode .sv-article-slot__gradient {\n  opacity: 0;\n  transition: opacity 0.3s ease;\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   LOADING STATE\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-article-slot--loading .sv-article-slot__skeleton {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0.05) 25%,\n    rgba(255, 255, 255, 0.1) 50%,\n    rgba(255, 255, 255, 0.05) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-article-shimmer 1.5s infinite;\n}\n\n@keyframes sv-article-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ACCESSIBILITY\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-article-slot:focus-visible {\n  outline: 2px solid var(--sv-article-focus-color, #4dabff);\n  outline-offset: -2px;\n}\n\n.sv-article-slot__sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n";
+
+export { ARTICLE_ACTIVE_ATTR, ARTICLE_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS, ArticleSlotActions, type ArticleSlotActionsProps, ArticleSlotBottom, type ArticleSlotBottomProps, ArticleSlotCaption, type ArticleSlotCaptionProps, type ArticleSlotContextValue, ArticleSlotHeadless, type ArticleSlotHeadlessProps, ArticleSlotMusic, type ArticleSlotMusicProps, ArticleSlotOverlay, type ArticleSlotOverlayProps, ArticleSlotPlayIndicator, type ArticleSlotPlayIndicatorProps, ArticleSlotReadMore, type ArticleSlotReadMoreProps, 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, type ArticleSlotActionsProps as ImagePostSlotActionsProps, ArticleSlotBottom as ImagePostSlotBottom, type ArticleSlotBottomProps as ImagePostSlotBottomProps, ArticleSlotCaption as ImagePostSlotCaption, type ArticleSlotCaptionProps as ImagePostSlotCaptionProps, type ArticleSlotContextValue as ImagePostSlotContextValue, ArticleSlotHeadless as ImagePostSlotHeadless, type ArticleSlotHeadlessProps as ImagePostSlotHeadlessProps, ArticleSlotMusic as ImagePostSlotMusic, type ArticleSlotMusicProps as ImagePostSlotMusicProps, ArticleSlotOverlay as ImagePostSlotOverlay, type ArticleSlotOverlayProps as ImagePostSlotOverlayProps, ArticleSlotPlayIndicator as ImagePostSlotPlayIndicator, type ArticleSlotPlayIndicatorProps as ImagePostSlotPlayIndicatorProps, ArticleSlotReadMore as ImagePostSlotReadMore, type ArticleSlotReadMoreProps as ImagePostSlotReadMoreProps, useArticleSlotContext, useArticleSlotContext as useImagePostSlotContext, useOptionalArticleSlotContext, useOptionalArticleSlotContext as useOptionalImagePostSlotContext };

package/dist/components/ArticleSlot/index.js

@@ -0,0 +1 @@
+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';

package/dist/components/AuthorInfo/index.js

@@ -1 +1 @@
-export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext } from '../../chunk-2FSDVYER.js';
+export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext } from '../../chunk-3OB3OVYR.js';

package/dist/components/BottomSheet/index.d.ts

@@ -0,0 +1,87 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+
+interface BottomSheetContextValue {
+    isOpen: boolean;
+    onClose: () => void;
+}
+/**
+ * Hook to access bottom sheet context
+ * Must be used within BottomSheetHeadless
+ */
+declare function useBottomSheetContext(): BottomSheetContextValue;
+interface BottomSheetHeadlessProps {
+    /** Whether sheet is open */
+    isOpen: boolean;
+    /** Close callback */
+    onClose: () => void;
+    /** Sheet content */
+    children: ReactNode;
+    /** Sheet height (CSS value: "auto", "50vh", "80%", "400px") */
+    height?: string;
+    /** Root class name for sheet */
+    className?: string;
+    /** Backdrop class name */
+    backdropClassName?: string;
+    /** Content wrapper class name */
+    contentClassName?: string;
+    /** Close on backdrop click (default: true) */
+    closeOnBackdropClick?: boolean;
+    /** Close on escape key (default: true) */
+    closeOnEscape?: boolean;
+    /** Show drag handle (default: false) */
+    showDragHandle?: boolean;
+    /** Enable drag-to-dismiss (default: true) */
+    enableDragToDismiss?: boolean;
+    /** Drag threshold to close in pixels (default: 150) */
+    dragCloseThreshold?: number;
+    /** Custom aria-label */
+    ariaLabel?: string;
+    /** Custom z-index */
+    zIndex?: number;
+    /** Animation duration in ms (default: 300) */
+    animationDuration?: number;
+    /**
+     * CSS selector for drag handle element(s).
+     * Default: ".sv-bottom-sheet__handle"
+     * Example: ".sv-comment-sheet__header" for CommentSheet
+     */
+    dragHandleSelector?: string;
+    /**
+     * CSS selector for scroll container (for overscroll-to-dismiss).
+     * Default: ".sv-bottom-sheet__content"
+     * Example: ".sv-comment-sheet__list" for CommentSheet
+     */
+    scrollContainerSelector?: string;
+    /**
+     * CSS selector for elements that should NOT trigger drag.
+     * Example: ".sv-comment-sheet__input-container" for CommentSheet
+     */
+    dragExcludeSelector?: string;
+    /**
+     * Callback to lock/unlock global gestures (e.g., Feed swipe).
+     * Used to replace global touchmove blockers with centralized lock.
+     */
+    onGestureLock?: (isLocked: boolean) => void;
+}
+declare function BottomSheetHeadlessComponent({ isOpen, onClose, children, height, className, backdropClassName, contentClassName, closeOnBackdropClick, closeOnEscape, showDragHandle, enableDragToDismiss, dragCloseThreshold, ariaLabel, zIndex, animationDuration, dragHandleSelector, scrollContainerSelector, dragExcludeSelector, onGestureLock, }: BottomSheetHeadlessProps): ReactElement | null;
+declare const BottomSheetHeadless: react.MemoExoticComponent<typeof BottomSheetHeadlessComponent>;
+
+/**
+ * BottomSheet CSS
+ *
+ * Base bottom sheet component styles.
+ * Features:
+ * - Portal-based rendering support
+ * - Slide-up/down animations
+ * - Backdrop with fade
+ * - Drag handle
+ * - iOS-safe scroll lock via body class
+ */
+declare const BOTTOM_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\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  /* Bottom sheet theming */\n  --sv-sheet-bg: #ffffff;\n  --sv-sheet-backdrop-bg: rgba(0, 0, 0, 0.5);\n  --sv-sheet-handle-bg: rgba(0, 0, 0, 0.2);\n  --sv-sheet-border-radius: 24px;\n  --sv-sheet-z-index: 1000;\n  --sv-sheet-animation-duration: 300ms;\n  --sv-sheet-animation-easing: cubic-bezier(0.32, 0.72, 0, 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   BACKDROP\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-bottom-sheet-backdrop {\n  position: fixed;\n  inset: 0;\n  background: var(--sv-sheet-backdrop-bg);\n  z-index: 50;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: \n    opacity var(--sv-sheet-animation-duration) ease,\n    visibility 0s linear var(--sv-sheet-animation-duration);\n}\n\n.sv-bottom-sheet-backdrop[data-state=\"open\"] {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n  transition: \n    opacity var(--sv-sheet-animation-duration) ease,\n    visibility 0s linear 0s;\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   SHEET 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/* Keyframes */\n@keyframes sv-sheet-slide-up {\n  from { transform: translateY(100vh); }\n  to { transform: translateY(0); }\n}\n\n@keyframes sv-sheet-slide-down {\n  from { transform: translateY(0); }\n  to { transform: translateY(100vh); }\n}\n\n.sv-bottom-sheet {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--sv-sheet-bg);\n  border-radius: var(--sv-sheet-border-radius) var(--sv-sheet-border-radius) 0 0;\n  z-index: 51;\n  display: flex;\n  flex-direction: column;\n  max-height: var(--sv-sheet-max-height, 80vh);\n  transform: translateY(100vh);\n  overflow: hidden;\n  touch-action: pan-y;\n  isolation: isolate;\n  pointer-events: none;\n  will-change: transform;\n  outline: none;\n}\n\n.sv-bottom-sheet[data-state=\"open\"] {\n  transform: translateY(0);\n  pointer-events: auto;\n  animation: sv-sheet-slide-up var(--sv-sheet-animation-duration) \n             var(--sv-sheet-animation-easing) forwards;\n}\n\n.sv-bottom-sheet[data-state=\"closing\"] {\n  pointer-events: none;\n  animation: sv-sheet-slide-down var(--sv-sheet-animation-duration) \n             var(--sv-sheet-animation-easing) forwards !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   DRAG HANDLE\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-bottom-sheet__handle {\n  display: flex;\n  justify-content: center;\n  padding: 12px 0 8px;\n  cursor: grab;\n  touch-action: none;\n  flex-shrink: 0;\n}\n\n.sv-bottom-sheet__handle:active {\n  cursor: grabbing;\n}\n\n.sv-bottom-sheet__handle-bar {\n  width: 36px;\n  height: 4px;\n  background: var(--sv-sheet-handle-bg);\n  border-radius: 2px;\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   CONTENT\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-bottom-sheet__content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior: contain;\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   BODY SCROLL LOCK\n   Disable scroll on underlying content when sheet is open\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\nbody.sv-bottom-sheet-open {\n  overflow: hidden !important;\n  position: fixed !important;\n  width: 100% !important;\n  /* top is set dynamically via JS to preserve scroll position */\n}\n\n/* CRITICAL: Disable VirtualSlider/VideoFeed swipe when sheet is open */\nbody.sv-bottom-sheet-open .sv-slider,\nbody.sv-bottom-sheet-open .sv-video-feed {\n  pointer-events: none !important;\n  touch-action: none !important;\n}\n\nbody.sv-bottom-sheet-open .sv-bottom-sheet,\nbody.sv-bottom-sheet-open .sv-bottom-sheet-backdrop {\n  touch-action: auto !important;\n}\n";
+/**
+ * Inject BottomSheet CSS into document
+ */
+declare function injectBottomSheetCSS(): void;
+
+export { BOTTOM_SHEET_CSS, type BottomSheetContextValue, BottomSheetHeadless, type BottomSheetHeadlessProps, injectBottomSheetCSS, useBottomSheetContext };

package/dist/components/BottomSheet/index.js

@@ -0,0 +1 @@
+export { BOTTOM_SHEET_CSS, BottomSheetHeadless, injectBottomSheetCSS, useBottomSheetContext } from '../../chunk-UYBQTE4M.js';

package/dist/components/CleanModeOverlay/index.d.ts

@@ -0,0 +1,60 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+
+interface CleanModeOverlayHeadlessProps {
+    /** Whether clean mode is active */
+    isActive: boolean;
+    /** Whether video is playing */
+    isPlaying: boolean;
+    /** Current playback speed */
+    speed: number;
+    /** Current playback time in seconds */
+    currentTime: number;
+    /** Total duration in seconds */
+    duration: number;
+    /** Callback to toggle play/pause */
+    onTogglePlay: () => void;
+    /** Callback when speed changes */
+    onSpeedChange: (speed: number) => void;
+    /** Callback when user seeks */
+    onSeek: (time: number) => void;
+    /** Callback to exit clean mode */
+    onExit: () => void;
+    /** Available speed options (default: [0.5, 0.75, 1, 1.25, 1.5, 2]) */
+    speeds?: readonly number[];
+    /** Auto-hide delay in ms (default: 3000, 0 to disable) */
+    hideDelay?: number;
+    /** Custom exit icon */
+    exitIcon?: ReactNode;
+    /** Custom play icon */
+    playIcon?: ReactNode;
+    /** Custom pause icon */
+    pauseIcon?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Aria label for the overlay */
+    ariaLabel?: string;
+}
+declare function CleanModeOverlayHeadlessComponent({ isActive, isPlaying, speed, currentTime, duration, onTogglePlay, onSpeedChange, onSeek, onExit, speeds, hideDelay, exitIcon, playIcon, pauseIcon, className, ariaLabel, }: CleanModeOverlayHeadlessProps): ReactElement | null;
+declare const CleanModeOverlayHeadless: react.MemoExoticComponent<typeof CleanModeOverlayHeadlessComponent>;
+
+/**
+ * CleanModeOverlay CSS-in-TS
+ *
+ * Floating control bar for clean mode (TikTok-style).
+ * Layout: [Exit] ─── [Progress Bar] ─── [Play/Pause | Speed]
+ *
+ * NOTE: This CSS is injected WITHOUT @layer to ensure it resists
+ * global resets like `* { margin: 0; padding: 0; }`.
+ * Host app can still override via higher specificity selectors.
+ */
+declare const CLEAN_MODE_OVERLAY_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\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-clean-mode-container {\n  /* Colors */\n  --sv-clean-mode-bg: rgba(40, 40, 40, 0.85);\n  --sv-clean-mode-text: rgba(255, 255, 255, 0.95);\n  --sv-clean-mode-divider: rgba(255, 255, 255, 0.2);\n  --sv-clean-mode-progress-bg: rgba(255, 255, 255, 0.3);\n  --sv-clean-mode-progress-fill: rgba(255, 255, 255, 0.9);\n  --sv-clean-mode-progress-thumb: #ffffff;\n  \n  /* Layout */\n  --sv-clean-mode-radius: 50px;\n  --sv-clean-mode-button-size: 48px;\n  --sv-clean-mode-progress-height: 4px;\n  \n  /* Animation */\n  --sv-clean-mode-duration: 200ms;\n  --sv-clean-mode-easing: cubic-bezier(0.4, 0, 0.2, 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   MAIN CONTAINER - Full width bar at bottom\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-clean-mode-container {\n  position: absolute;\n  bottom: 24px;\n  left: 16px;\n  right: 16px;\n  z-index: 80;\n  \n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0;\n  padding: 0;\n  \n  /* Animation */\n  opacity: 1;\n  transition: opacity var(--sv-clean-mode-duration) var(--sv-clean-mode-easing);\n  \n  /* Prevent text selection */\n  user-select: none;\n  -webkit-user-select: none;\n  pointer-events: none;\n}\n\n.sv-clean-mode-container[data-hidden=\"true\"] {\n  opacity: 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   LEFT PILL - Exit button\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-clean-mode-left {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  \n  width: var(--sv-clean-mode-button-size);\n  height: var(--sv-clean-mode-button-size);\n  margin: 0;\n  padding: 0;\n  \n  background: var(--sv-clean-mode-bg);\n  border-radius: var(--sv-clean-mode-radius);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  \n  pointer-events: auto;\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   CENTER - Progress Bar\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-clean-mode-center {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  \n  pointer-events: auto;\n}\n\n.sv-clean-mode-progress {\n  position: relative;\n  width: 100%;\n  height: 24px;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  touch-action: none;\n}\n\n.sv-clean-mode-progress-track {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: var(--sv-clean-mode-progress-height);\n  margin: 0;\n  padding: 0;\n  background: var(--sv-clean-mode-progress-bg);\n  border-radius: calc(var(--sv-clean-mode-progress-height) / 2);\n  overflow: hidden;\n}\n\n.sv-clean-mode-progress-fill {\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  background: var(--sv-clean-mode-progress-fill);\n  border-radius: inherit;\n  transition: width 100ms linear;\n}\n\n.sv-clean-mode-progress-thumb {\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  margin: 0;\n  padding: 0;\n  background: var(--sv-clean-mode-progress-thumb);\n  border-radius: 50%;\n  transform: translateX(-50%);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n  transition: opacity 150ms ease;\n}\n\n.sv-clean-mode-progress:hover .sv-clean-mode-progress-thumb,\n.sv-clean-mode-progress[data-dragging=\"true\"] .sv-clean-mode-progress-thumb {\n  opacity: 1;\n}\n\n.sv-clean-mode-progress[data-dragging=\"true\"] .sv-clean-mode-progress-track {\n  height: 6px;\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   RIGHT PILL - Play/Pause + Speed\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-clean-mode-right {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  \n  height: var(--sv-clean-mode-button-size);\n  margin: 0;\n  padding: 0 4px;\n  \n  background: var(--sv-clean-mode-bg);\n  border-radius: var(--sv-clean-mode-radius);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  \n  pointer-events: auto;\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   BUTTONS\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-clean-mode-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  \n  height: 40px;\n  margin: 0;\n  padding: 0 14px;\n  \n  background: transparent;\n  border: none;\n  \n  color: var(--sv-clean-mode-text);\n  font-size: 15px;\n  font-weight: 600;\n  white-space: nowrap;\n  \n  cursor: pointer;\n  transition: opacity 150ms ease;\n}\n\n.sv-clean-mode-button:active {\n  opacity: 0.7;\n}\n\n.sv-clean-mode-button svg {\n  width: 22px;\n  height: 22px;\n  margin: 0;\n  padding: 0;\n  flex-shrink: 0;\n}\n\n/* Exit button - icon only */\n.sv-clean-mode-exit {\n  width: 40px;\n  height: 40px;\n  padding: 0;\n}\n\n.sv-clean-mode-exit svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* Play/Pause button - icon only */\n.sv-clean-mode-play {\n  width: 40px;\n  padding: 0;\n}\n\n/* Speed button */\n.sv-clean-mode-speed {\n  padding: 0 16px 0 8px;\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   DIVIDER\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-clean-mode-divider {\n  width: 1px;\n  height: 24px;\n  margin: 0;\n  padding: 0;\n  background: var(--sv-clean-mode-divider);\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   TAP AREA (for showing hidden bar)\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-clean-mode-tap-area {\n  position: absolute;\n  inset: 0;\n  z-index: 70;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n/* Hide tap area when bar is visible */\n.sv-clean-mode-tap-area[data-visible=\"true\"] {\n  pointer-events: none;\n}\n";
+/**
+ * Inject CleanModeOverlay CSS into document.
+ *
+ * NOTE: Injected WITHOUT @layer (layered: false) so it resists
+ * global resets. Host app can still override with higher specificity.
+ */
+declare function injectCleanModeOverlayCSS(): void;
+
+export { CLEAN_MODE_OVERLAY_CSS, CleanModeOverlayHeadless, type CleanModeOverlayHeadlessProps, injectCleanModeOverlayCSS };

package/dist/components/CleanModeOverlay/index.js

@@ -0,0 +1 @@
+export { CLEAN_MODE_OVERLAY_CSS, CleanModeOverlayHeadless, injectCleanModeOverlayCSS } from '../../chunk-QUEJHA24.js';

package/dist/components/CommentSheet/index.d.ts

@@ -1,4 +1,4 @@
-export { n as COMMENT_SHEET_CSS, f as CommentInput, g as CommentInputProps, h as CommentItemComponent, i as CommentItemProps, d as CommentList, e as CommentListProps, C as CommentSheet, j as CommentSheetContext, l as CommentSheetContextValue, a as CommentSheetHeadless, b as CommentSheetHeadlessProps, m as CommentSheetI18n, R as ReplyTarget, S as SheetHeader, c as SheetHeaderProps, u as useCommentSheetContext, k as useOptionalCommentSheetContext } from '../../CommentSheet.css-BeCrEaUG.js';
+export { C as COMMENT_SHEET_CSS, a as CommentInput, b as CommentInputProps, c as CommentItemComponent, d as CommentItemProps, e as CommentList, f as CommentListProps, g as CommentSheet, h as CommentSheetContext, i as CommentSheetContextValue, j as CommentSheetHeadless, k as CommentSheetHeadlessProps, l as CommentSheetI18n, R as ReplyTarget, S as SheetHeader, m as SheetHeaderProps, u as useCommentSheetContext, n as useOptionalCommentSheetContext } from '../../CommentSheet.css-DuBy01rU.js';
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
 import { CommentItem, ReplyItem } from '@xhub-short/contracts';

package/dist/components/CommentSheet/index.js

@@ -1 +1 @@
-export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentItemSkeleton, CommentList, CommentListSkeleton, CommentMenu, CommentSheet, CommentSheetContext, CommentSheetHeadless, DeleteConfirmDialog, SheetHeader, useCommentMenuContext, useCommentSheetContext, useOptionalCommentSheetContext } from '../../chunk-FNXTPQ6L.js';
+export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentItemSkeleton, CommentList, CommentListSkeleton, CommentMenu, CommentSheet, CommentSheetContext, CommentSheetHeadless, DeleteConfirmDialog, SheetHeader, useCommentMenuContext, useCommentSheetContext, useOptionalCommentSheetContext } from '../../chunk-IC2KUU4V.js';