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

package/dist/index.d.ts

@@ -1,14 +1,14 @@
 import * as react from 'react';
-import { ComponentType, ReactNode, ReactElement, CSSProperties, SyntheticEvent } from 'react';
-import { ActionBarHeadlessProps, VideoItem, UIInteractionState, AuthorInfoHeadlessProps, UIAuthorState, UIAuthorActions, Author, CommentAuthor, CommentConfig, ProgressBarHeadlessProps, UIFeedState, UISwipeState, VideoInfoProps, VideoSlotProps, IDataSource, IInteraction, ICommentAdapter, ISessionStorage, IAnalytics, ILogger, INetworkAdapter, IVideoLoader, IPosterLoader, LocalizationConfig, UICommentState, UICommentActions, ILocalization, MessageKey, MessageValues, MessageCatalog } from '@xhub-short/contracts';
-export { ActionBarHeadlessProps, ActionBarProps, ActionButtonHeadlessProps, AnalyticsEvent, AnalyticsEventType, Author, AuthorInfoHeadlessProps, AuthorInfoProps, CommentAuthor, CommentConfig, CommentItem, ErrorBoundaryProps, FeedResponse, IAnalytics, ICommentAdapter, IDataSource, IInteraction, ILocalization, ILogger, INetworkAdapter, IPosterLoader, ISessionStorage, IStorage, IVideoLoader, LocalizationConfig, LogEntry, LogLevel, MessageCatalog, MessageKey, MessageValue, MessageValues, PartialMessageCatalog, ReplyItem, SessionSnapshot, SkeletonProps, UIAuthorActions, UIAuthorState, UICommentActions, UICommentState, UIFeedState, UIInteractionActions, UIInteractionState, UIPlayerControls, UIPlayerState, UIResourceState, UISwipeState, UIVideoInfoActions, UIVideoInfoState, VideoFeedHeadlessProps, VideoInfoHeadlessProps, VideoInfoProps, VideoItem, VideoPlayerHeadlessProps, VideoSlotHeadlessProps, VideoSlotProps, VideoSource, VideoStats } from '@xhub-short/contracts';
+import react__default, { ComponentType, ReactNode, ReactElement, CSSProperties, SyntheticEvent } from 'react';
+import { ActionBarHeadlessProps, ContentItem, VideoItem, UIInteractionState, AuthorInfoHeadlessProps, UIAuthorState, UIAuthorActions, Author, CommentConfig, ProgressBarHeadlessProps, Article, UIFeedState, UISwipeState, VideoInfoProps as VideoInfoProps$1, VideoSlotProps, MusicInfo, ContentStats, IDataSource, IPlaylistDataSource, IInteraction, ICommentAdapter, ISessionStorage, IAnalytics, ILogger, INetworkAdapter, IVideoLoader, IPosterLoader, LocalizationConfig, UICommentState, UICommentActions, ILocalization, MessageKey, MessageValues, MessageCatalog, CommentAuthor, VideoQuality, ReportReason, PlaylistData } from '@xhub-short/contracts';
+export { ActionBarHeadlessProps, ActionBarProps, ActionButtonHeadlessProps, AnalyticsEvent, AnalyticsEventType, Article, ArticleSlotHeadlessProps, ArticleStats, Author, AuthorInfoHeadlessProps, AuthorInfoProps, CommentAuthor, CommentConfig, CommentItem, ErrorBoundaryProps, FeedResponse, IAnalytics, ICommentAdapter, IDataSource, IInteraction, ILocalization, ILogger, INetworkAdapter, IPosterLoader, ISessionStorage, IStorage, IVideoLoader, ImagePostSlotHeadlessProps, LocalizationConfig, LogEntry, LogLevel, MessageCatalog, MessageKey, MessageValue, MessageValues, PartialMessageCatalog, ReplyItem, SessionSnapshot, SkeletonProps, UIAuthorActions, UIAuthorState, UICommentActions, UICommentState, UIFeedState, UIInteractionActions, UIInteractionState, UIPlayerControls, UIPlayerState, UIResourceState, UISwipeState, UIVideoInfoActions, UIVideoInfoState, VideoFeedHeadlessProps, VideoInfoHeadlessProps, VideoInfoProps, VideoItem, VideoPlayerHeadlessProps, VideoSlotHeadlessProps, VideoSlotProps, VideoSource } from '@xhub-short/contracts';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { AuthorAvatar, AuthorName, AuthorDescription, FollowButtonProps, SheetHeaderProps, CommentListProps, CommentInputProps, VideoAuthorName, VideoCaption, VideoHashtags, VideoLocation, VideoMusic, VideoPlayerHeadlessExtendedProps, ErrorMode, ErrorBoundaryProps } from '@xhub-short/ui';
+import { AuthorAvatar, AuthorName, AuthorDescription, FollowButtonProps, SheetHeaderProps, CommentListProps, CommentInputProps, VideoAuthorName, VideoCaption, VideoHashtags, VideoLocation, VideoMusic, VideoPlayerHeadlessExtendedProps, ArticleSlotHeadlessProps, ErrorMode, ErrorBoundaryProps } from '@xhub-short/ui';
 export { CommentInputProps, CommentListProps, SheetHeaderProps } from '@xhub-short/ui';
-import { PlayerError, FeedConfig, PlayerConfig, ResourceConfig, LifecycleConfig, OptimisticConfig, RestoreResult, FeedError, FeedState, PlayerStatus, PlayerState, NetworkType, AllocationResult, PrefetchConfig, ResourceState, PendingAction, ActionType, OptimisticState, FeedManager, PlayerEngine, ResourceGovernor, LifecycleManager, OptimisticManager, LifecycleState } from '@xhub-short/core';
+import { PlayerError, FeedConfig, PlayerConfig, ResourceConfig, LifecycleConfig, OptimisticConfig, RestoreResult, FeedError, FeedState, PlayerStatus, PlayerState, NetworkType, AllocationResult, PrefetchConfig, ResourceState, PendingAction, ActionType, OptimisticState, FeedManager, PlayerEngine, ResourceGovernor, LifecycleManager, OptimisticManager, PlaylistManager, PlaylistCollectionManager, LifecycleState } from '@xhub-short/core';
 export { ActionType, AllocationResult, FeedConfig, FeedError, FeedState, LifecycleConfig, LifecycleState, NetworkType, OptimisticConfig, OptimisticState, PendingAction, PlayerConfig, PlayerError, PlayerState, PlayerStatus, PrefetchConfig, ResourceConfig, ResourceState, RestoreResult } from '@xhub-short/core';
 import { BrowserAdaptersConfig } from '@xhub-short/adapters';
-export { BrowserAdaptersConfig } from '@xhub-short/adapters';
+export { BatchAnalyticsConfig, BatchAnalyticsContext, BatchAnalyticsEventData, BatchAnalyticsEventTransformer, BrowserAdaptersConfig } from '@xhub-short/adapters';
 
 /**
  * HOC Factory for creating wired components
@@ -143,10 +143,14 @@ interface ActionBarIconSet {
  */
 interface ActionBarProps extends Omit<ActionBarHeadlessProps, 'interactionState' | 'interactionActions'> {
     /**
-     * Video item to get interaction state for
-     * Required - ActionBar needs video data for likes/comments/shares
+     * Content item (Video or Article) to get interaction state for
+     * Required - ActionBar needs data for likes/comments/shares
      */
-    video: VideoItem;
+    content: ContentItem;
+    /**
+     * @deprecated Use 'content' instead. Will be removed in v3.0
+     */
+    video?: VideoItem;
     /**
      * Icon set for buttons
      * Host app provides these to customize appearance
@@ -166,11 +170,11 @@ interface ActionBarProps extends Omit<ActionBarHeadlessProps, 'interactionState'
      * Custom callback when sharing
      * Default: no-op (host app should implement share sheet)
      */
-    onShare?: (video: VideoItem) => void | Promise<void>;
+    onShare?: (content: ContentItem) => void | Promise<void>;
     /**
      * Custom callback when like is toggled (in addition to SDK action)
      */
-    onLikeToggle?: (isLiked: boolean, videoId: string) => void;
+    onLikeToggle?: (isLiked: boolean, contentId: string) => void;
     /**
      * Whether to show bookmark button (not auto-wired, host manages state)
      * @default false
@@ -183,7 +187,7 @@ interface ActionBarProps extends Omit<ActionBarHeadlessProps, 'interactionState'
     /**
      * Callback when bookmark is toggled
      */
-    onBookmarkToggle?: (isBookmarked: boolean, videoId: string) => void;
+    onBookmarkToggle?: (isBookmarked: boolean, contentId: string) => void;
     /**
      * Layout direction
      * @default 'vertical'
@@ -209,7 +213,7 @@ interface ActionBarProps extends Omit<ActionBarHeadlessProps, 'interactionState'
  * Auto-connects Like, Comment, Share buttons to SDK hooks.
  * Uses optimistic UI for Like with automatic rollback on failure.
  */
-declare function ActionBar({ video, icons, interactionState: overrideState, onOpenComments, onShare, onLikeToggle, showBookmark, isBookmarked, onBookmarkToggle, direction, buttonVariant, className, children, testId, }: ActionBarProps): React.ReactElement;
+declare function ActionBar({ content: contentProp, video: videoLegacy, icons, interactionState: overrideState, onOpenComments, onShare, onLikeToggle, showBookmark, isBookmarked, onBookmarkToggle, direction, buttonVariant, className, children, testId, }: ActionBarProps): React.ReactElement;
 declare namespace ActionBar {
     var displayName: string;
 }
@@ -219,10 +223,14 @@ declare namespace ActionBar {
  */
 interface AuthorInfoProps extends Omit<AuthorInfoHeadlessProps, 'authorState' | 'authorActions'> {
     /**
-     * Video item to get author from
-     * Required - AuthorInfo needs video data for author + follow state
+     * Content item (Video or Article) to get author from
+     * Required - AuthorInfo needs data for author + follow state
      */
-    video: VideoItem;
+    content: ContentItem;
+    /**
+     * @deprecated Use 'content' instead. Will be removed in v3.0
+     */
+    video?: VideoItem;
     /**
      * Override author state (for custom scenarios)
      * If provided, replaces auto-derived state from video
@@ -277,7 +285,7 @@ interface AuthorInfoProps extends Omit<AuthorInfoHeadlessProps, 'authorState' |
  * Auto-connects Follow button to SDK hooks.
  * Uses optimistic UI for Follow with automatic rollback on failure.
  */
-declare function AuthorInfoRoot({ video, authorState: overrideState, authorActions: overrideActions, onOpenProfile, onFollowToggle, showFollowButton, variant, overlay, className, children, testId, }: AuthorInfoProps): React.ReactElement;
+declare function AuthorInfoRoot({ content: contentProp, video: videoLegacy, authorState: overrideState, authorActions: overrideActions, onOpenProfile, onFollowToggle, showFollowButton, variant, overlay, className, children, testId, }: AuthorInfoProps): React.ReactElement;
 declare namespace AuthorInfoRoot {
     var displayName: string;
 }
@@ -349,8 +357,6 @@ interface CommentSheetProps {
     isOpen: boolean;
     /** Close callback */
     onClose: () => void;
-    /** Current user info (required for optimistic UI when posting) */
-    currentUser?: CommentAuthor;
     /** Config overrides */
     config?: Partial<CommentConfig>;
     /** Initial count from video data (displayed before API loads) */
@@ -368,7 +374,7 @@ interface CommentSheetProps {
     /** Close on escape key (default: true) */
     closeOnEscape?: boolean;
 }
-declare function CommentSheetInner({ videoId, isOpen, onClose, currentUser, config, initialCount, autoLoad, children, className, backdropClassName, closeOnBackdropClick, closeOnEscape, }: CommentSheetProps): ReactElement;
+declare function CommentSheetInner({ videoId, isOpen, onClose, config, initialCount, autoLoad, children, className, backdropClassName, closeOnBackdropClick, closeOnEscape, }: CommentSheetProps): ReactElement;
 /**
  * Translated SheetHeader - auto-injects i18n strings
  */
@@ -486,6 +492,54 @@ declare namespace ProgressBar {
     var displayName: string;
 }
 
+/**
+ * Lightweight Touch Drag Hook
+ *
+ * Custom replacement for @use-gesture/react's useDrag.
+ * ~1KB instead of ~20KB gzipped.
+ *
+ * Features:
+ * - Touch and mouse support
+ * - Axis locking (vertical/horizontal)
+ * - Velocity calculation
+ * - Direction detection
+ * - First/Last event detection
+ *
+ * @internal This is an internal implementation detail.
+ * Use useSwipeGesture for the public API.
+ */
+type DragAxis = 'x' | 'y' | 'both';
+interface DragState {
+    /** Movement from start [x, y] in pixels */
+    movement: [number, number];
+    /** Velocity [vx, vy] in px/ms */
+    velocity: [number, number];
+    /** Direction [-1, 0, 1] for each axis */
+    direction: [number, number];
+    /** True on first event of gesture */
+    first: boolean;
+    /** True on last event (release) */
+    last: boolean;
+    /** True while gesture is active */
+    active: boolean;
+    /** Cancel function to abort gesture */
+    cancel: () => void;
+    /** Original event */
+    event: TouchEvent | MouseEvent | PointerEvent;
+}
+interface DragConfig {
+    /** Axis to track: 'x', 'y', or 'both' */
+    axis?: DragAxis;
+    /** Filter out taps (short movements) */
+    filterTaps?: boolean;
+    /** Tap threshold in pixels */
+    tapThreshold?: number;
+    /** Enable touch events */
+    touch?: boolean;
+    /** Enable mouse/pointer events */
+    mouse?: boolean;
+}
+type DragHandler = (state: DragState) => void;
 interface DragBind {
     onPointerDown?: (e: React.PointerEvent) => void;
     onTouchStart?: (e: React.TouchEvent) => void;
@@ -493,6 +547,25 @@ interface DragBind {
         touchAction: string;
     };
 }
+/**
+ * Lightweight drag hook - replacement for @use-gesture/react useDrag
+ *
+ * @param handler - Callback for drag events
+ * @param config - Configuration options
+ * @returns Bind function to spread on target element
+ *
+ * @example
+ * ```tsx
+ * const bind = useTouchDrag((state) => {
+ *   if (state.first) console.log('Started dragging');
+ *   if (state.last) console.log('Released', state.velocity);
+ *   console.log('Movement:', state.movement);
+ * }, { axis: 'y' });
+ *
+ * return <div {...bind()}>Drag me</div>;
+ * ```
+ */
+declare function useTouchDrag(handler: DragHandler, config?: DragConfig): () => DragBind;
 
 /**
  * Swipe Gesture Hook
@@ -506,10 +579,6 @@ interface DragBind {
  * - Velocity-based snap decisions
  * - Integration with ResourceGovernor
  *
- * PERFORMANCE CRITICAL (ADR 005):
- * - KHÔNG sử dụng useState cho dragOffset trong scroll loop
- * - Dùng useRef + direct DOM manipulation
- * - Chỉ sync state khi Touch End (Snap)
  *
  * AXIS SUPPORT:
  * - `vertical`: Full support - index navigation + gesture
@@ -549,6 +618,19 @@ interface SwipeConfig {
      * @default true
      */
     enableMouse?: boolean;
+    /**
+     * Temporarily disable swipe gestures.
+     * Use this to block swipe during other gestures (e.g., zoom).
+     *
+     * @default false
+     * @example
+     * ```tsx
+     * // Block swipe during zoom
+     * const { isSwipeLocked } = useZoomGesture();
+     * const swipe = useSwipeGesture({ disabled: isSwipeLocked });
+     * ```
+     */
+    disabled?: boolean;
     /**
      * Called when swipe completes and snaps
      */
@@ -700,37 +782,40 @@ interface UseSwipeGestureReturn {
 declare function useSwipeGesture(config?: SwipeConfig): UseSwipeGestureReturn;
 
 /**
- * Wired VideoFeed Component
+ * Wired Feed Component
  *
  * Pre-wired version of VideoFeedHeadless that auto-injects SDK hooks.
- * This is the recommended way to use VideoFeed in host applications.
+ * Supports mixed content (VideoItem | Article) in a single feed.
+ * This is the recommended way to use Feed in host applications.
  *
  * Features:
  * - Auto-connects to FeedManager via useFeed()
  * - Auto-handles swipe gestures via useSwipeGesture()
  * - Direct DOM manipulation for 60fps swipe (ADR 005)
- * - All props from VideoFeedHeadless are still available for customization
+ * - Mixed content support (videos + articles)
+ * - All props from FeedHeadless are still available for customization
  *
  * ## Gesture Scope
  *
- * Gestures are attached to the outer container div (not VideoFeedHeadless).
+ * Gestures are attached to the outer container div (not FeedHeadless).
  * If you wrap this component with additional DOM, gestures will still work
  * correctly as they're attached to the inner container.
  *
  * @example
  * ```tsx
- * import { VideoFeed } from '@xhub-short/sdk';
+ * import { Feed, isVideoItem, isArticle } from '@xhub-short/sdk';
  *
  * function App() {
  *   return (
  *     <ShortVideoProvider>
- *       <VideoFeed
- *         renderSlot={(video, index) => (
- *           <div>
- *             <img src={video.poster} alt={video.title} />
- *             <span>{video.title}</span>
- *           </div>
- *         )}
+ *       <Feed
+ *         renderSlot={(item, index) => {
+ *           // Type guard for mixed content
+ *           if (isArticle(item)) {
+ *             return <DefaultArticleSlot article={item} index={index} />;
+ *           }
+ *           return <DefaultVideoSlot video={item} index={index} />;
+ *         }}
  *         onIndexChange={(index) => console.log('Active:', index)}
  *       />
  *     </ShortVideoProvider>
@@ -740,31 +825,111 @@ declare function useSwipeGesture(config?: SwipeConfig): UseSwipeGestureReturn;
  */
 
 /**
- * Props for wired VideoFeed component
+ * Custom renderers for each content type.
+ * Allows host apps to override rendering per type without using explicit type guards.
+ */
+interface SlotRenderers {
+    /** Custom renderer for video items */
+    video?: (props: {
+        video: VideoItem;
+        index: number;
+        isActive: boolean;
+    }) => ReactNode;
+    /** Custom renderer for article items */
+    article?: (props: {
+        article: Article;
+        index: number;
+        isActive: boolean;
+    }) => ReactNode;
+}
+/**
+ * Props for wired Feed component
+ *
+ * Supports mixed content (VideoItem | Article).
+ * Use type guards (isVideoItem, isArticle) in renderSlot to handle different content types.
  *
- * Extends VideoFeedHeadlessProps but feedState and swipeState are auto-injected.
+ * feedState and swipeState are auto-injected by SDK hooks.
  * You can still override them if needed.
  */
-interface VideoFeedProps {
-    /** Container height (default: 100vh via CSS) */
+interface FeedProps {
+    /**
+     * Container height (default: 100vh via CSS)
+     *
+     * @default 100vh
+     */
     height?: number | string;
-    /** Additional CSS classes */
+    /**
+     * Additional CSS classes
+     * @default ''
+     */
     className?: string;
-    /** Render function for each video slot */
-    renderSlot: (video: VideoItem, index: number) => ReactNode;
-    /** Called when active index changes */
+    /**
+     * Render function for each content slot (video or article)
+     *
+     * @deprecated Use `renderers` prop for a cleaner, type-safe mapping pattern.
+     * If not provided, RendererFactory will automatically select DefaultVideoSlot
+     * for videos and DefaultArticleSlot for articles.
+     *
+     * @param item - The content item (VideoItem | Article)
+     * @param index - The index of the slot
+     * @param isActive - Whether this slot is currently active/visible
+     * @returns The React node to render
+     */
+    renderSlot?: (item: ContentItem, index: number, isActive: boolean) => ReactNode;
+    /**
+     * Custom renderers for each content type.
+     * Recommended for advanced customization without explicit type guards.
+     *
+     * @example
+     * ```tsx
+     * <Feed
+     *   renderers={{
+     *     video: (props) => <MyCustomVideo {...props} showBookmark={false} />,
+     *     article: (props) => <MyCustomArticle {...props} />
+     *   }}
+     * />
+     * ```
+     */
+    renderers?: SlotRenderers;
+    /**
+     * Common props to pass to both default slots (if no renderers or renderSlot provided)
+     * or to use as a base for custom renderers.
+     */
+    slotProps?: Record<string, unknown>;
+    /**
+     * Called when active index changes
+     * @param index - The new active index
+     */
     onIndexChange?: (index: number) => void;
-    /** Called when reaching near end of feed */
+    /**
+     * Called when reaching near end of feed
+     * @returns The React node to render
+     */
     onEndReached?: () => void;
-    /** Threshold for triggering onEndReached (default: 2) */
+    /**
+     * Threshold for triggering onEndReached
+     * @default 2
+     */
     endReachedThreshold?: number;
-    /** Number of slots to render before/after active (default: 1) */
+    /**
+     * Number of slots to render before/after active
+     * @default 1
+     */
     bufferSize?: number;
-    /** Loading text */
+    /**
+     * Loading text
+     * @default 'Loading...'
+     */
     loadingText?: string;
-    /** Empty text */
+    /**
+     * Empty text
+     * @default 'No videos'
+     */
     emptyText?: string;
-    /** End of feed text */
+    /**
+     * End of feed text
+     * @default 'End of feed'
+     */
     endText?: string;
     /**
      * Whether to auto-load initial feed on mount
@@ -838,11 +1003,59 @@ interface VideoFeedProps {
      * @default { touchAction: 'none' }
      */
     containerStyle?: CSSProperties;
+    /**
+     * Playlist ID to load.
+     * If provided, feed will switch to Playlist mode.
+     * If undefined/null, feed will switch to Recommendation mode.
+     */
+    playlistId?: string;
+    /**
+     * Externally disable swipe gestures.
+     * Use this to block swipe during other gestures (e.g., zoom).
+     *
+     * @default false
+     * @example
+     * ```tsx
+     * // With useZoomGesture hook
+     * function MyFeed() {
+     *   const zoom = useZoomGesture();
+     *
+     *   return (
+     *     <VideoFeed
+     *       swipeDisabled={zoom.isSwipeLocked}
+     *       renderSlot={(video, index) => (
+     *         <div {...zoom.handlers} style={{ transform: zoom.transform }}>
+     *           <video src={video.url} />
+     *           {!zoom.isZooming && <ActionBar />}
+     *         </div>
+     *       )}
+     *     />
+     *   );
+     * }
+     * ```
+     */
+    swipeDisabled?: boolean;
+    /**
+     * Custom empty state component.
+     * Receives `text` prop (localized empty text).
+     */
+    renderEmpty?: (text: string) => ReactNode;
+    /**
+     * Custom loading state component.
+     * Receives `text` prop (localized loading text).
+     */
+    renderLoading?: (text: string) => ReactNode;
+    /**
+     * Custom end of feed component.
+     * Receives `text` prop (localized end text).
+     */
+    renderEnd?: (text: string) => ReactNode;
 }
 /**
- * Wired VideoFeed Component
+ * Wired Feed Component
  *
  * Automatically connects to SDK's FeedManager and SwipeGesture.
+ * Supports mixed content (VideoItem | Article) in a single feed.
  * Provides smooth 60fps swipe navigation using ref-based DOM manipulation.
  *
  * ## Performance Notes
@@ -850,11 +1063,31 @@ interface VideoFeedProps {
  * This component uses direct DOM manipulation during swipe to avoid
  * React re-renders. The `dragOffset` in swipeState is always 0 because
  * real-time offset is stored in a ref and applied directly to DOM elements.
+ *
+ * ## Mixed Content Support
+ *
+ * Use type guards in renderSlot to handle different content types:
+ * ```tsx
+ * <Feed
+ *   renderSlot={(item, index) => {
+ *     if (isArticle(item)) return <ArticleSlot article={item} />;
+ *     return <VideoSlot video={item} />;
+ *   }}
+ * />
+ * ```
  */
-declare function VideoFeed({ height, className, renderSlot, onIndexChange, onEndReached, endReachedThreshold, bufferSize, loadingText: loadingTextProp, emptyText: emptyTextProp, endText: endTextProp, autoLoad, autoLoadMore, swipeThreshold, velocityThreshold, snapDuration, onSwipe, feedState: feedStateProp, swipeState: swipeStateProp, containerStyle, }: VideoFeedProps): React.ReactElement;
-declare namespace VideoFeed {
+declare function Feed({ height, className, renderSlot, renderers, slotProps, onIndexChange, onEndReached, endReachedThreshold, bufferSize, loadingText: loadingTextProp, emptyText: emptyTextProp, endText: endTextProp, autoLoad, autoLoadMore, swipeThreshold, velocityThreshold, snapDuration, onSwipe, feedState: feedStateProp, swipeState: swipeStateProp, containerStyle, swipeDisabled, playlistId, renderEmpty, renderLoading, renderEnd, }: FeedProps): React.ReactElement;
+declare namespace Feed {
     var displayName: string;
 }
+/**
+ * @deprecated Use `Feed` instead. `VideoFeed` is an alias for backward compatibility.
+ */
+declare const VideoFeed: typeof Feed;
+/**
+ * @deprecated Use `FeedProps` instead. `VideoFeedProps` is an alias for backward compatibility.
+ */
+type VideoFeedProps = FeedProps;
 
 /**
  * VideoInfo - Wired SDK Component
@@ -875,9 +1108,9 @@ declare namespace VideoFeed {
  */
 
 /**
- * Extended props for wired VideoInfo component
+ * VideoInfo wired component props
  */
-interface VideoInfoWiredProps extends VideoInfoProps {
+interface VideoInfoProps extends VideoInfoProps$1 {
     /** Called when author name is clicked */
     onOpenProfile?: (author: Author) => void;
     /** Called when hashtag is clicked */
@@ -891,10 +1124,12 @@ interface VideoInfoWiredProps extends VideoInfoProps {
     /** Test ID for testing */
     testId?: string;
 }
+/** @deprecated Use VideoInfoProps instead. Will be removed in v3.0 */
+type VideoInfoWiredProps = VideoInfoProps;
 /**
  * VideoInfo - Wired SDK component
  */
-declare function VideoInfoRoot({ video, videoInfoState: overrideState, videoInfoActions: overrideActions, onOpenProfile, onHashtagClick, onMusicClick, onLocationClick, overlay, className, children, testId, }: VideoInfoWiredProps): ReactElement;
+declare function VideoInfoRoot({ content: contentProp, video: videoLegacy, videoInfoState: overrideState, videoInfoActions: overrideActions, onOpenProfile, onHashtagClick, onMusicClick, onLocationClick, overlay, className, children, testId, }: VideoInfoProps): ReactElement;
 /**
  * Compound component with sub-components attached
  */
@@ -1107,10 +1342,29 @@ interface VideoSlotWiredProps extends VideoSlotProps {
      * Must be provided by host app if needed
      */
     onDoubleTap?: () => void;
+    /**
+     * Handle long press (hold > 500ms)
+     * Typically used to open context menu (AdvanceMenu)
+     */
+    onLongPress?: () => void;
+    /**
+     * Disable tap gesture handling.
+     * When true, single tap won't trigger play/pause toggle or PlayIndicator.
+     * Useful during zoom gesture to prevent phantom taps from touchend events.
+     */
+    disableTap?: boolean;
     /** Custom error UI (receives wrapped error with metadata) */
     renderError?: (error: Error, retry: () => void) => ReactNode;
     /** Custom loading UI */
     renderLoading?: () => ReactNode;
+    /** Title for reported overlay */
+    reportedTitle?: string;
+    /** Message for reported overlay */
+    reportedMessage?: string;
+    /** Button text for reported overlay */
+    reportedButtonText?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
 }
 /**
  * SDK Player Error - Preserves error metadata from PlayerEngine
@@ -1160,88 +1414,489 @@ declare class SDKPlayerError extends Error {
  * Host app must trigger these manually or wait for future IntersectionObserver
  * implementation in VideoSlotHeadless.
  */
-declare function VideoSlot({ video, index, resourceState: resourceStateOverride, playerState: playerStateOverride, playerControls: playerControlsOverride, className, children, onVisible, onHidden, onTap, onDoubleTap, renderError, renderLoading, }: VideoSlotWiredProps): React.ReactElement;
+declare function VideoSlot({ video, index, resourceState: resourceStateOverride, playerState: playerStateOverride, playerControls: playerControlsOverride, className, children, onVisible, onHidden, onTap, onDoubleTap, onLongPress, disableTap, renderError, renderLoading, reportedTitle, reportedMessage, reportedButtonText, style, }: VideoSlotWiredProps): React.ReactElement;
 declare namespace VideoSlot {
     var displayName: string;
 }
 
-interface DefaultSlotProps {
+/**
+ * Wired ArticleSlot Component
+ *
+ * Pre-wired version of ArticleSlotHeadless that auto-injects SDK hooks.
+ * This is the recommended way to use ArticleSlot in host applications.
+ *
+ * Features:
+ * - Auto-connects to useArticle hook for state management
+ * - Auto-connects to SDK context for interactions
+ * - Handles like animation and double-tap
+ * - Integrates with DetailView for "Read More" functionality
+ * - Music playback support
+ */
+
+interface ArticleSlotWiredProps extends Omit<ArticleSlotHeadlessProps, 'currentImageIndex' | 'onImageIndexChange' | 'isMusicPlaying' | 'onToggleMusic' | 'onDoubleTap' | 'onReadMoreClick'> {
+    /** Slot index in the feed */
+    index: number;
+    /** Music info for this post */
+    music?: MusicInfo;
+    /** Whether this post is active (visible) */
+    isActive?: boolean;
+    /** Whether to show detail view on "Read More" click */
+    enableDetailView?: boolean;
+    /** Custom double tap handler (default: toggle like) */
+    onDoubleTap?: () => void;
+    /** Custom "Read More" handler (default: open detail view) */
+    onReadMoreClick?: () => void;
+    /** Custom long press handler */
+    onLongPress?: () => void;
+    /** Custom single tap handler (default: toggle music if tapToToggleMusic=true) */
+    onTap?: () => void;
+    /** Enable tap-to-toggle music (default: true if music exists) */
+    tapToToggleMusic?: boolean;
+    /**
+     * Callback when image index changes in carousel.
+     * Useful for syncing with Detail View.
+     */
+    onImageIndexChange?: (index: number) => void;
+    /** Children (overlay content) */
+    children?: ReactNode;
+    /** Custom detail view content */
+    renderDetailView?: (props: {
+        article: Article;
+        onClose: () => void;
+        isOpen: boolean;
+    }) => ReactNode;
+    /** Detail view header title */
+    detailViewTitle?: string;
+    /** Whether to show follow button in detail view */
+    showFollowButton?: boolean;
+    /** Current user follows this author */
+    isFollowing?: boolean;
+    /** Follow button click handler */
+    onFollowClick?: () => void;
+    /** Custom styles */
+    style?: React.CSSProperties;
+}
+declare function ArticleSlot({ article, index, music, isActive, enableDetailView, onDoubleTap: customDoubleTap, onReadMoreClick: customReadMore, onLongPress, onTap: customTap, tapToToggleMusic, onImageIndexChange: onIndexChangeProp, children, renderDetailView, detailViewTitle, showFollowButton, isFollowing, onFollowClick, ...restProps }: ArticleSlotWiredProps): ReactElement;
+declare namespace ArticleSlot {
+    var displayName: string;
+}
+/** @deprecated Use ArticleSlot instead */
+declare const ImagePostSlot: typeof ArticleSlot;
+/** @deprecated Use ArticleSlotWiredProps instead */
+type ImagePostSlotWiredProps = ArticleSlotWiredProps;
+
+interface DefaultArticleSlotProps {
+    /** Article data */
+    article: Article;
+    /** Index in the feed */
+    index: number;
+    /** Whether this post is currently active/visible (for music autoplay) */
+    isActive?: boolean;
+    showLikeAnimation?: boolean;
+    showBookmark?: boolean;
+    showShare?: boolean;
+    showComment?: boolean;
+    showMusic?: boolean;
+    showPlayIndicator?: boolean;
+    showAuthorFollow?: boolean;
+    enableDetailView?: boolean;
+    enableZoom?: boolean;
+    showCounter?: boolean;
+    showAdvanceMenu?: boolean;
+    showCleanModeOverlay?: boolean;
+    showReportSheet?: boolean;
+    detailViewTitle?: string;
+    onShare?: (article: Article) => void;
+    onOpenComments?: (postId: string) => void;
+    onAuthorTap?: (article: Article) => void;
+    onFollow?: (article: Article) => void;
+    onHashtagTap?: (hashtag: string, article: Article) => void;
+    onContentHidden?: (contentId: string) => void;
+    onLikeToggle?: (isLiked: boolean) => void;
+    onBookmarkToggle?: (isBookmarked: boolean) => void;
+    renderActionBar?: (props: ActionBarProps) => ReactNode;
+    renderAuthorInfo?: (props: AuthorInfoProps) => ReactNode;
+    children?: ReactNode;
+    /** Additional className */
+    className?: string;
+}
+declare const DefaultArticleSlot: react.NamedExoticComponent<DefaultArticleSlotProps>;
+/** @deprecated Use DefaultArticleSlot instead */
+declare const DefaultImagePostSlot: react.NamedExoticComponent<DefaultArticleSlotProps>;
+/** @deprecated Use DefaultArticleSlotProps instead */
+type DefaultImagePostSlotProps = DefaultArticleSlotProps;
+
+interface AdvanceMenuProps {
+    /** Content item (Video or Article) */
+    content: ContentItem;
+    /** @deprecated Use content instead. Will be removed in v3.0 */
+    video?: VideoItem;
+    /** Whether menu is open */
+    isOpen: boolean;
+    /** Close handler */
+    onClose: () => void;
+    /** Callback when report is clicked (opens report sheet) */
+    onOpenReport?: () => void;
+    /** Show quality picker (default: true) */
+    showQuality?: boolean;
+    /** Show auto-scroll toggle (default: true) */
+    showAutoScroll?: boolean;
+    /** Show clean mode option (default: true) */
+    showCleanMode?: boolean;
+    /** Show not interested option (default: true) */
+    showNotInterested?: boolean;
+    /** Show report option (default: true) */
+    showReport?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Speed label */
+    speedLabel?: string;
+    /** Quality label */
+    qualityLabel?: string;
+    /** Auto-scroll label */
+    autoScrollLabel?: string;
+    /** Clean mode label */
+    cleanModeLabel?: string;
+    /** Not interested label */
+    notInterestedLabel?: string;
+    /** Report label */
+    reportLabel?: string;
+    /** Custom speed icon */
+    speedIcon?: ReactNode;
+    /** Custom quality icon */
+    qualityIcon?: ReactNode;
+    /** Custom auto-scroll icon */
+    autoScrollIcon?: ReactNode;
+    /** Custom clean mode icon */
+    cleanModeIcon?: ReactNode;
+    /** Custom not interested icon */
+    notInterestedIcon?: ReactNode;
+    /** Custom report icon */
+    reportIcon?: ReactNode;
+}
+declare function AdvanceMenuComponent({ content: contentProp, video: videoLegacy, isOpen, onClose, onOpenReport, showQuality, showAutoScroll, showCleanMode, showNotInterested, showReport, className, speedLabel, qualityLabel, autoScrollLabel, cleanModeLabel, notInterestedLabel, reportLabel, speedIcon, qualityIcon, autoScrollIcon, cleanModeIcon, notInterestedIcon, reportIcon, }: AdvanceMenuProps): ReactElement;
+declare const AdvanceMenu: react.MemoExoticComponent<typeof AdvanceMenuComponent>;
+/** @deprecated Use AdvanceMenu instead */
+declare const AdvanceMenuWired: react.MemoExoticComponent<typeof AdvanceMenuComponent>;
+/** @deprecated Use AdvanceMenuProps instead */
+type AdvanceMenuWiredProps = AdvanceMenuProps;
+
+interface ReportSheetProps {
+    /** Content ID to report */
+    contentId: string;
+    /** Current video index in feed (required for goToNextOnSuccess) */
+    currentIndex?: number;
+    /** Whether sheet is open */
+    isOpen: boolean;
+    /** Close handler */
+    onClose: () => void;
+    /** Callback when report succeeds */
+    onSuccess?: () => void;
+    /** Callback when report fails */
+    onError?: (error: Error) => void;
+    /**
+     * Auto navigate to next video when Done is clicked after successful report
+     * @default true
+     */
+    goToNextOnSuccess?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Sheet title for step 1 - reason selection */
+    selectTitle?: string;
+    /** Sheet title for step 2 - report detail */
+    title?: string;
+    /** Text input placeholder */
+    inputPlaceholder?: string;
+    /** Submit button text */
+    submitText?: string;
+    /** Loading text */
+    loadingText?: string;
+    /** Success title */
+    successTitle?: string;
+    /** Success message */
+    successMessage?: string;
+    /** Done button text (on success screen) */
+    doneText?: string;
+    /** Error message */
+    errorMessage?: string;
+    /** Error description (retry hint) */
+    errorDescription?: string;
+    /**
+     * Custom button element to trigger the report sheet
+     */
+    buttonElement?: ReactElement;
+}
+declare function ReportSheetComponent({ contentId, currentIndex, isOpen, onClose, onSuccess, onError, goToNextOnSuccess, className, selectTitle, title, inputPlaceholder, submitText, loadingText, successTitle, successMessage, doneText, errorMessage, errorDescription, buttonElement, }: ReportSheetProps): ReactElement;
+declare const ReportSheet: react.MemoExoticComponent<typeof ReportSheetComponent>;
+/** @deprecated Use ReportSheet instead */
+declare const ReportSheetWired: react.MemoExoticComponent<typeof ReportSheetComponent>;
+/** @deprecated Use ReportSheetProps instead */
+type ReportSheetWiredProps = ReportSheetProps;
+
+interface CleanModeOverlayProps {
+    /** Auto-hide delay in ms (default: 3000) */
+    hideDelay?: number;
+    /** Custom exit icon */
+    exitIcon?: ReactNode;
+    /** Custom play icon */
+    playIcon?: ReactNode;
+    /** Custom pause icon */
+    pauseIcon?: ReactNode;
+    /** Custom class name */
+    className?: string;
+}
+declare function CleanModeOverlayComponent({ hideDelay, exitIcon, playIcon, pauseIcon, className, }: CleanModeOverlayProps): ReactElement | null;
+declare const CleanModeOverlay: react.MemoExoticComponent<typeof CleanModeOverlayComponent>;
+
+interface DefaultVideoSlotProps {
     /** Video item data */
     video: VideoItem;
     /** Index in the feed */
     index: number;
-    /** Show poster before video plays (default: true) */
     showPoster?: boolean;
-    /** Show play/pause indicator on tap (default: true) */
     showPlayIndicator?: boolean;
-    /** Keep play icon visible while video is paused - YouTube style (default: true) */
     persistPlayIndicatorWhenPaused?: boolean;
-    /** Show like animation on double-tap (default: true) */
     showLikeAnimation?: boolean;
-    /** Show author info - avatar + follow badge (default: true) */
     showAuthorInfo?: boolean;
-    /** Show action bar - like, comment, share (default: true) */
     showActionBar?: boolean;
-    /** Show video info - author name, caption, hashtags (default: true) */
     showVideoInfo?: boolean;
-    /** Show progress bar (default: true) */
     showProgressBar?: boolean;
-    /** Show time display in progress bar (default: true) */
     showTime?: boolean;
-    /** Show tooltip when seeking (default: true) */
     showTooltip?: boolean;
-    /** Show bookmark button (default: false) */
     showBookmark?: boolean;
-    /** Show comment sheet when comment button is clicked (default: true) */
     showCommentSheet?: boolean;
-    /** Show debug info (default: false) */
     showDebug?: boolean;
-    /** Called when comments button is clicked */
-    onOpenComments?: (videoId: string) => void;
-    /** Called when share button is clicked */
-    onShare?: (video: VideoItem) => void;
-    /** Called when like is toggled */
-    onLikeToggle?: (isNowLiked: boolean, videoId: string) => void;
-    /** Called when bookmark is toggled */
-    onBookmarkToggle?: (isNowBookmarked: boolean, videoId: string) => void;
-    /** Called when author profile is clicked */
+    showCleanModeOverlay?: boolean;
+    showAdvanceMenu?: boolean;
+    showReportSheet?: boolean;
+    onOpenComments?: () => void;
+    onShare?: (content: VideoItem) => void;
+    onLikeToggle?: (isLiked: boolean) => void;
+    onBookmarkToggle?: (isBookmarked: boolean) => void;
     onOpenProfile?: (author: VideoItem['author']) => void;
-    /** Called when follow is toggled */
-    onFollowToggle?: (isNowFollowing: boolean, authorId: string) => void;
-    /** Called when a hashtag is clicked */
+    onFollowToggle?: (isFollowing: boolean, authorId: string) => void;
     onHashtagClick?: (hashtag: string) => void;
-    /** Custom VideoPlayer renderer */
+    onContentHidden?: (contentId: string) => void;
+    onReportSuccess?: (contentId: string) => void;
+    onReportError?: (error: Error) => void;
+    onZoomStateChange?: (isZooming: boolean) => void;
     renderPlayer?: (props: VideoPlayerProps) => ReactNode;
-    /** Custom ActionBar renderer */
     renderActionBar?: (props: ActionBarProps) => ReactNode;
-    /** Custom AuthorInfo renderer */
     renderAuthorInfo?: (props: AuthorInfoProps) => ReactNode;
-    /** Custom VideoInfo renderer */
-    renderVideoInfo?: (props: VideoInfoWiredProps) => ReactNode;
-    /** Custom ProgressBar renderer */
+    renderVideoInfo?: (props: VideoInfoProps) => ReactNode;
     renderProgressBar?: (props: ProgressBarProps) => ReactNode;
-    /** Custom CommentSheet renderer */
-    renderCommentSheet?: (props: CommentSheetProps) => ReactNode;
-    /** Custom Error renderer */
+    renderCommentSheet?: (props: {
+        videoId: string;
+        isOpen: boolean;
+        onClose: () => void;
+        config?: Partial<CommentConfig>;
+    }) => ReactNode;
+    renderAdvanceMenu?: (props: {
+        content: VideoItem;
+        isOpen: boolean;
+        onClose: () => void;
+        onOpenReport?: () => void;
+    }) => ReactNode;
+    renderReportSheet?: (props: {
+        contentId: string;
+        isOpen: boolean;
+        onClose: () => void;
+        onSuccess?: () => void;
+        onError?: (error: Error) => void;
+    }) => ReactNode;
     renderError?: (error: Error, retry: () => void) => ReactNode;
-    /** Current user info for optimistic UI when posting comments */
-    currentUser?: CommentAuthor;
-    /** Comment configuration (pageSize, maxLength, etc.) */
     commentConfig?: Partial<CommentConfig>;
-    /** Like animation style (default: 'float') */
     likeAnimationStyle?: 'float' | 'burst' | 'scale' | 'bounce';
-    /** Like animation duration in ms (default: 1200) */
     likeAnimationDuration?: number;
-    /** Max hearts in animation (default: 15) */
     likeAnimationMaxHearts?: number;
-    /** Heart size in px (default: 70) */
     likeAnimationSize?: number;
-    /** Heart color (default: '#fe2c55') */
     likeAnimationColor?: string;
-    /** Additional class name */
+    enableZoom?: boolean;
+    zoomMaxScale?: number;
+    zoomSnapBackAnimation?: 'none' | 'ease' | 'spring';
     className?: string;
 }
-declare const DefaultSlot: react.NamedExoticComponent<DefaultSlotProps>;
+declare const DefaultVideoSlot: react.NamedExoticComponent<DefaultVideoSlotProps>;
+
+/**
+ * Minimum requirements for content used in SlotComposer
+ */
+interface SlotContent {
+    /** Unique content ID */
+    id: string;
+    /** Author information */
+    author: Author;
+    /** Content statistics */
+    stats: ContentStats;
+    /** Content type discriminator */
+    type: 'video' | 'article';
+}
+/**
+ * State provided by SlotComposer to its children
+ */
+interface ComposerState {
+    /** Whether clean mode is active */
+    cleanMode: boolean;
+    /** Whether pinch-to-zoom is currently active */
+    isZoomActive: boolean;
+    /** Whether content is liked (reactive) */
+    isLiked: boolean;
+    /** Whether content is bookmarked (local state) */
+    isBookmarked: boolean;
+    /** Whether comment sheet is open */
+    isCommentSheetOpen: boolean;
+    /** Whether advance menu is open */
+    isMenuOpen: boolean;
+    /** Whether report sheet is open */
+    isReportSheetOpen: boolean;
+}
+/**
+ * Handlers provided by SlotComposer
+ */
+interface ComposerHandlers {
+    /** Toggle like status */
+    handleLike: () => void;
+    /** Trigger share action */
+    handleShare: () => void;
+    /** Trigger comment action */
+    handleComment: () => void;
+    /** Toggle bookmark status */
+    handleBookmark: () => void;
+    /** Handle double-tap like (like only) */
+    handleDoubleTap: () => void;
+    /** Handle open report sheet */
+    handleOpenReport: () => void;
+    /** Close all transient UI */
+    handleCloseAll: () => void;
+    /** Set visibility states */
+    setCommentSheetOpen: (open: boolean) => void;
+    setMenuOpen: (open: boolean) => void;
+    setReportSheetOpen: (open: boolean) => void;
+}
+/**
+ * Pre-configured wired components
+ */
+interface ComposerComponents {
+    /** Pre-wired ActionBar */
+    ActionBarComponent: (props: {
+        icons: ActionBarIconSet;
+        onOpenComments?: () => void;
+        onShare?: (content: ContentItem) => void;
+    }) => ReactNode;
+    /** Pre-wired CommentSheet */
+    CommentSheetComponent: (props: {
+        isOpen: boolean;
+        onClose: () => void;
+        initialCount?: number;
+    }) => ReactNode;
+    /** Pre-wired AdvanceMenu */
+    AdvanceMenuComponent: (props: {
+        isOpen: boolean;
+        onClose: () => void;
+        onOpenReport?: () => void;
+    }) => ReactNode;
+    /** Pre-wired ReportSheet */
+    ReportSheetComponent: (props: {
+        isOpen: boolean;
+        onClose: () => void;
+    }) => ReactNode;
+}
+/**
+ * Context provided to the children render function
+ */
+interface ComposerContext<TContent extends SlotContent> {
+    /** Passed content data */
+    content: TContent;
+    /** Aggregate state from SDK hooks */
+    state: ComposerState;
+    /** Aggregate handlers from SDK hooks */
+    handlers: ComposerHandlers;
+    /** Pre-configured wired components */
+    components: ComposerComponents;
+}
+interface SlotComposerProps<TContent extends SlotContent> {
+    /** Content data (VideoItem or Article) */
+    content: TContent;
+    /** Render prop function */
+    children: (context: ComposerContext<TContent>) => ReactNode;
+    /** Callback when like is toggled */
+    onLikeToggle?: (isLiked: boolean) => void;
+    /** Callback when bookmark is toggled */
+    onBookmarkToggle?: (isBookmarked: boolean) => void;
+    /** Callback when comments are opened */
+    onOpenComments?: () => void;
+    /** Callback when share is triggered */
+    onShare?: (content: ContentItem) => void;
+    /** Callback when zoom state changes */
+    onZoomStateChange?: (isZooming: boolean) => void;
+    /** Whether to show ActionBar (default: true) */
+    showActionBar?: boolean;
+    /** Whether to show CommentSheet (default: true) */
+    showCommentSheet?: boolean;
+    /** Whether to show AdvanceMenu (default: true) */
+    showAdvanceMenu?: boolean;
+    /** Zoom max scale (default: 5) */
+    zoomMaxScale?: number;
+    /** Snap-back animation style (default: 'ease') */
+    zoomSnapBackAnimation?: 'none' | 'ease' | 'spring';
+}
+/**
+ * SlotComposer - Logic-only component for wiring slots
+ *
+ * extraction of shared behavior between DefaultVideoSlot and DefaultArticleSlot.
+ */
+declare function SlotComposer<TContent extends SlotContent>({ content: initialContent, children, onLikeToggle, onBookmarkToggle, onOpenComments, onShare, onZoomStateChange, showActionBar, showCommentSheet, showAdvanceMenu, zoomMaxScale, zoomSnapBackAnimation, }: SlotComposerProps<TContent>): react_jsx_runtime.JSX.Element;
+declare namespace SlotComposer {
+    var displayName: string;
+}
+
+interface PlaylistBarProps {
+    /** Custom playlist icon */
+    icon?: React.ReactNode;
+    /** Custom arrow icon */
+    arrowIcon?: React.ReactNode;
+    /** Optional label text */
+    label?: string;
+}
+/**
+ * Wired PlaylistBar component
+ * Automatically connects to PlaylistContext to display current playlist info.
+ */
+declare function PlaylistBar({ icon, arrowIcon, label }: PlaylistBarProps): react_jsx_runtime.JSX.Element | null;
+
+interface PlaylistCollectionProps {
+    /** View type: grid or list */
+    viewType?: 'grid' | 'list';
+    /** Optional callback for navigation when a playlist is selected */
+    onNavigate?: (id: string) => void;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Wired PlaylistCollection component
+ *
+ * Connects to usePlaylistCollection hook and renders PlaylistCollectionHeadless.
+ * Automatically handles data fetching and i18n.
+ */
+declare function PlaylistCollection({ viewType, onNavigate, className, }: PlaylistCollectionProps): react_jsx_runtime.JSX.Element;
+
+interface PlaylistSheetProps {
+    /** Optional custom header accessory */
+    headerAccessory?: ReactNode;
+    /** Optional custom translations */
+    translations?: {
+        title?: string;
+        emptyState?: string;
+        nowPlaying?: string;
+    };
+}
+/**
+ * Wired Playlist Sheet Component
+ *
+ * Connects the headless playlist sheet to the SDK store and context.
+ * Automatically handles item selection and visibility state via Global UI Store.
+ */
+declare function PlaylistSheet({ headerAccessory, translations }: PlaylistSheetProps): react_jsx_runtime.JSX.Element;
 
 /**
  * SDK Configuration Types
@@ -1256,6 +1911,8 @@ declare const DefaultSlot: react.NamedExoticComponent<DefaultSlotProps>;
 interface AdaptersConfig {
     /** Data source adapter for fetching video feed */
     dataSource?: IDataSource;
+    /** Playlist data source adapter for fetching playlists */
+    playlist?: IPlaylistDataSource;
     /** Interaction adapter for like/follow/comment actions */
     interaction?: IInteraction;
     /** Comment adapter for comment operations (read/write/like) */
@@ -1273,6 +1930,64 @@ interface AdaptersConfig {
     /** Poster loader adapter for preloading thumbnails */
     posterLoader?: IPosterLoader;
 }
+/**
+ * User information for SDK features
+ *
+ * Used by:
+ * - Analytics: Set user context for events
+ * - Comments: Author info for posted comments
+ * - Any feature requiring user identification
+ */
+interface SDKUser {
+    /** User ID (required) */
+    id: string;
+    /** Display name */
+    name?: string;
+    /** Avatar URL */
+    avatar?: string;
+    /** Additional user properties (for analytics) */
+    properties?: Record<string, unknown>;
+}
+/**
+ * User configuration
+ */
+interface UserConfig {
+    /**
+     * Current user info
+     *
+     * If provided, SDK will:
+     * - Set analytics user context automatically
+     * - Use as default author for comments
+     *
+     * @example
+     * ```tsx
+     * <ShortVideoProvider config={{
+     *   user: {
+     *     current: {
+     *       id: 'user-123',
+     *       name: 'John Doe',
+     *       avatar: 'https://example.com/avatar.jpg',
+     *     },
+     *   },
+     * }}>
+     * ```
+     */
+    current?: SDKUser | null;
+    /**
+     * Callback to get user dynamically
+     * Called when user info is needed but `current` is not set
+     *
+     * @example
+     * ```tsx
+     * <ShortVideoProvider config={{
+     *   user: {
+     *     getUser: () => authStore.getCurrentUser(),
+     *   },
+     * }}>
+     * ```
+     */
+    getUser?: () => SDKUser | null | Promise<SDKUser | null>;
+}
 /**
  * Actions that require authentication
  *
@@ -1287,7 +2002,7 @@ type GuestAction = 'like' | 'unlike' | 'comment' | 'reply' | 'follow' | 'unfollo
  */
 interface GuestActionContext {
     /** Type of resource */
-    resourceType: 'video' | 'comment' | 'author';
+    resourceType: 'video' | 'article' | 'comment' | 'author';
     /** Resource ID */
     resourceId: string;
     /** Additional metadata (e.g., videoId for comment, authorId for follow) */
@@ -1451,7 +2166,9 @@ interface SDKConfig {
     prefetchCache?: {
         /** Enable instant loading from cache (default: true) */
         enabled?: boolean;
-        /** Number of videos to cache (default: 10) */
+        /** Number of items to cache (default: 10) */
+        maxItems?: number;
+        /** @deprecated Use maxItems instead. Will be removed in v3.0 */
         maxVideos?: number;
         /**
          * Enable dynamic cache eviction (default: true)
@@ -1485,6 +2202,29 @@ interface SDKConfig {
      * ```
      */
     localization?: LocalizationConfig;
+    /**
+     * User configuration
+     *
+     * Provides user info for all SDK features:
+     * - Analytics: User context for events
+     * - Comments: Author info for posted comments
+     *
+     * @example
+     * ```tsx
+     * <ShortVideoProvider config={{
+     *   user: {
+     *     current: {
+     *       id: 'user-123',
+     *       name: 'John Doe',
+     *       avatar: 'https://example.com/avatar.jpg',
+     *     },
+     *   },
+     * }}>
+     *   <App />
+     * </ShortVideoProvider>
+     * ```
+     */
+    user?: UserConfig;
     /**
      * Enable debug mode
      * When true, enables verbose logging
@@ -1691,15 +2431,26 @@ declare namespace ShortVideoRoot {
     var displayName: string;
 }
 
-declare function ShortVideoProvider({ children, config, fallback, }: ShortVideoProviderProps): ReactElement;
+declare function ShortVideoProvider({ children, config }: ShortVideoProviderProps): ReactElement;
 
 /**
  * Feed Hooks
  *
- * React hooks for managing video feed state and actions.
+ * React hooks for managing content feed state and actions.
  * Provides SSR-safe subscriptions to FeedManager via useSyncExternalStore.
  */
 
+/**
+ * Options for useFeed hook
+ */
+interface UseFeedOptions {
+    /**
+     * Playlist ID to load.
+     * If provided, feed will switch to Playlist mode.
+     * If undefined/null, feed will switch to Recommendation mode.
+     */
+    playlistId?: string;
+}
 /**
  * Selector-based hook for FeedManager state
  *
@@ -1726,7 +2477,9 @@ declare function useFeedSelector<TSelected>(selector: (state: FeedState) => TSel
  * Return type for useFeed hook
  */
 interface UseFeedReturn {
-    /** Array of videos in display order */
+    /** Array of items in display order */
+    items: ContentItem[];
+    /** @deprecated Use items instead. Will be removed in v3.0 */
     videos: VideoItem[];
     /** Whether initial load is in progress */
     loading: boolean;
@@ -1734,19 +2487,23 @@ interface UseFeedReturn {
     loadingMore: boolean;
     /** Current error, if any */
     error: FeedError | null;
-    /** Whether more videos can be loaded */
+    /** Whether more items can be loaded */
     hasMore: boolean;
     /** Current pagination cursor */
     cursor: string | null;
     /** Load initial feed data */
     loadInitial: () => Promise<void>;
-    /** Load more videos (paginate) */
+    /** Load more items (paginate) */
     loadMore: () => Promise<void>;
     /** Revalidate current feed data */
     revalidate: () => Promise<void>;
-    /** Find video by ID */
+    /** Find item by ID */
+    findItem: (id: string) => ContentItem | undefined;
+    /** @deprecated Use findItem instead */
     findVideo: (id: string) => VideoItem | undefined;
-    /** Update a single video (for optimistic updates) */
+    /** Update a single item (for optimistic updates) */
+    updateItem: (id: string, updates: Partial<ContentItem>) => void;
+    /** @deprecated Use updateItem instead */
     updateVideo: (id: string, updates: Partial<VideoItem>) => void;
     /** Check if feed data is stale */
     isStale: () => boolean;
@@ -1756,15 +2513,15 @@ interface UseFeedReturn {
 /**
  * Full-featured hook for Feed management
  *
- * Returns state and methods for controlling the video feed.
+ * Returns state and methods for controlling the content feed.
  * Includes request spam prevention for loadMore.
  *
  * @returns Feed state and actions
  *
  * @example
  * ```tsx
- * function VideoFeed() {
- *   const { videos, loading, loadMore, hasMore } = useFeed();
+ * function Feed({ playlistId }: { playlistId?: string }) {
+ *   const { items, loading, loadMore, hasMore } = useFeed({ playlistId });
  *
  *   useEffect(() => {
  *     loadInitial();
@@ -1773,8 +2530,8 @@ interface UseFeedReturn {
  *   return (
  *     <div>
  *       {loading && <Spinner />}
- *       {videos.map(video => (
- *         <VideoCard key={video.id} video={video} />
+ *       {items.map(item => (
+ *         <ContentCard key={item.id} item={item} />
  *       ))}
  *       {hasMore && (
  *         <button onClick={loadMore}>Load More</button>
@@ -1784,7 +2541,7 @@ interface UseFeedReturn {
  * }
  * ```
  */
-declare function useFeed(): UseFeedReturn;
+declare function useFeed(options?: UseFeedOptions): UseFeedReturn;
 
 /**
  * Player Hooks
@@ -2247,11 +3004,62 @@ declare function useOptimistic(): {
 };
 type UseOptimisticReturn = ReturnType<typeof useOptimistic>;
 
+/**
+ * UI State Store
+ *
+ * Simple vanilla store for shared UI state that needs to be synced
+ * across multiple components (e.g., cleanMode, menuState).
+ *
+ * This is separate from Core managers because it's purely UI state
+ * that doesn't affect playback/feed logic.
+ *
+ * Uses the same pattern as Zustand's createStore for compatibility
+ * with React's useSyncExternalStore.
+ */
+/** What triggered clean mode */
+type CleanModeTrigger = 'menu' | 'zoom' | 'gesture' | 'api' | null;
+interface UIState {
+    cleanMode: boolean;
+    cleanModeTrigger: CleanModeTrigger;
+    isMenuOpen: boolean;
+    menuVideoId: string | null;
+    reportedVideoIds: Set<string>;
+    dismissedReportOverlays: Set<string>;
+    isPlaylistSheetOpen: boolean;
+    isGestureLocked: boolean;
+    overlaysVisible: boolean;
+    enableAutoHide: boolean;
+    autoScrollEnabled: boolean;
+}
+interface UIActions {
+    enterCleanMode: (trigger: CleanModeTrigger) => void;
+    exitCleanMode: () => void;
+    toggleCleanMode: () => void;
+    openMenu: (videoId: string) => void;
+    closeMenu: () => void;
+    markVideoReported: (videoId: string) => void;
+    isVideoReported: (videoId: string) => boolean;
+    dismissReportOverlay: (videoId: string) => void;
+    isReportOverlayDismissed: (videoId: string) => boolean;
+    openPlaylistSheet: () => void;
+    closePlaylistSheet: () => void;
+    togglePlaylistSheet: () => void;
+    setGestureLock: (isLocked: boolean) => void;
+    setEnableAutoHide: (enabled: boolean) => void;
+    triggerInteraction: () => void;
+    setAutoScrollEnabled: (enabled: boolean) => void;
+}
+type UIStore = UIState & UIActions;
+interface UIStoreApi {
+    getState: () => UIStore;
+    subscribe: (listener: () => void) => () => void;
+}
+
 /**
  * SDK instance containing all managers
  */
 interface SDKInstance {
-    /** Feed manager for video list management */
+    /** Feed manager for item list management */
     feedManager: FeedManager;
     /** Player engine for playback control */
     playerEngine: PlayerEngine;
@@ -2261,6 +3069,12 @@ interface SDKInstance {
     lifecycleManager: LifecycleManager;
     /** Optimistic manager for UI updates */
     optimisticManager: OptimisticManager;
+    /** UI state store (clean mode, menu state, etc.) */
+    uiStore: UIStoreApi;
+    /** Playlist manager */
+    playlistManager: PlaylistManager;
+    /** Playlist collection manager */
+    playlistCollectionManager: PlaylistCollectionManager;
     /** Adapters used by the SDK */
     adapters: {
         dataSource: IDataSource;
@@ -2271,6 +3085,8 @@ interface SDKInstance {
         network: INetworkAdapter;
         videoLoader: IVideoLoader;
         posterLoader: IPosterLoader;
+        /** Playlist adapter (optional) */
+        playlist?: IPlaylistDataSource;
         /** Comment adapter (optional - only if comment feature is enabled) */
         comment?: ICommentAdapter;
     };
@@ -2281,54 +3097,21 @@ interface SDKInstance {
         /** Guest mode config from SDKConfig */
         config?: GuestModeConfig;
     };
+    /** User management */
+    user: {
+        /** Get current user */
+        getUser: () => SDKUser | null;
+        /** Set current user (updates analytics and other features) */
+        setUser: (user: SDKUser | null) => void;
+        /** User config from SDKConfig */
+        config?: UserConfig;
+    };
     /** Destroy all managers and cleanup resources */
     destroy: () => void;
 }
 declare function createSDK(config?: SDKConfig): SDKInstance;
-/**
- * Get or create singleton SDK instance
- *
- * @deprecated Use `createSDK()` with `ShortVideoProvider` instead.
- * Singleton pattern causes issues with:
- * - **SSR**: Instance shared between requests
- * - **Testing**: State persists between tests
- * - **Multiple instances**: Not supported
- *
- * @param config - SDK configuration (only used on first call)
- * @returns Singleton SDK instance
- *
- * @example
- * ```tsx
- * // ❌ DEPRECATED - Don't use this
- * const sdk = getSDK({ feed: { pageSize: 20 } });
- *
- * // ✅ RECOMMENDED - Use createSDK with Provider
- * <ShortVideoProvider config={{ feed: { pageSize: 20 } }}>
- *   <App />
- * </ShortVideoProvider>
- * ```
- */
 declare function getSDK(config?: SDKConfig): SDKInstance;
-/**
- * Destroy singleton SDK instance
- *
- * Call this before creating a new instance with different config,
- * or when cleaning up (e.g., in tests).
- */
 declare function destroySDK(): void;
-/**
- * Prefetch feed data (Standalone functionality)
- *
- * Allows host app to fetch data before mounting the SDK components.
- * Data is stored in static in-memory cache and automatically consumed
- * when SDK initializes with the same configuration.
- *
- * @example
- * ```ts
- * // In routing logic or hover handler
- * await prefetchFeed(config);
- * ```
- */
 declare function prefetchFeed(config: SDKConfig, options?: {
     ttl?: number;
 }): Promise<void>;
@@ -2462,8 +3245,6 @@ interface UseCommentOptions {
     videoId: string;
     /** Auto load comments when hook mounts (default: false) */
     autoLoad?: boolean;
-    /** Current user info (required for posting) */
-    currentUser?: CommentAuthor;
     /** Config overrides */
     config?: Partial<CommentConfig>;
 }
@@ -2762,4 +3543,452 @@ interface UseGuestModeReturn {
  */
 declare function useGuestMode(guestConfigOverride?: GuestModeConfig): UseGuestModeReturn;
 
-export { ActionBar, type ActionBarIconSet, type ActionBarProps as ActionBarWiredProps, type AdaptersConfig, AuthorInfo, type AuthorInfoProps as AuthorInfoWiredProps, CommentSheet, type CommentSheetProps, DEFAULT_LOCALE, DefaultSlot, type DefaultSlotProps, type GuestAction, type GuestActionContext, type GuestModeConfig, type HookReturn, LocalizationAdapter, LocalizationContext, LocalizationProvider, type LocalizationProviderProps, ProgressBar, type ProgressBarProps, type SDKConfig, type SDKInstance, SDKPlayerError, SUPPORTED_LOCALES, ShortVideoProvider, type ShortVideoProviderProps, ShortVideoRoot, type ShortVideoRootProps, type SupportedLocale, type SwipeConfig, type SwipeDirection, type SwipeState, type TranslateFn, type UseCommentOptions, type UseCommentReturn, type UseFeedReturn, type UseGuestModeReturn, type UseLifecycleOptions, type UseLifecycleReturn, type UseOptimisticReturn, type UsePlayerCoreReturn, type UsePlayerForVideoReturn, type UsePlayerReturn, type UseResourceAllocationReturn, type UseResourceReturn, type UseSwipeGestureReturn, type UseTranslationReturn, type VideoElementHandlers, VideoFeed, type VideoFeedProps, VideoInfo, type VideoInfoWiredProps, VideoPlayer, type VideoPlayerProps, VideoSlot, type VideoSlotWiredProps, type WireConfig, createSDK, createSimpleWireConfig, createWiredComponent, destroySDK, enMessages, getMessages, getSDK, isLocaleSupported, messageCatalogs, parseMessage, prefetchFeed, resetCommentManager, useComment, useFeed, useFeedSelector, useGuestMode, useLifecycle, useLifecycleSelector, useLocalization, useOptimistic, useOptimisticSelector, useOptionalLocalization, useOptionalTranslation, usePlayer, usePlayerForVideo, usePlayerSelector, useResource, useResourceAllocation, useResourceSelector, useSDK, useSwipeGesture, useTranslation, viMessages };
+/**
+ * useUser - Hook for managing current user
+ *
+ * Provides access to current user and ability to update user info.
+ * Changes are automatically propagated to Analytics, Comments, etc.
+ *
+ * @example
+ * ```tsx
+ * function UserProfile() {
+ *   const { user, setUser, isLoggedIn } = useUser();
+ *
+ *   const handleLogin = (userData) => {
+ *     setUser({
+ *       id: userData.id,
+ *       name: userData.name,
+ *       avatar: userData.avatar,
+ *     });
+ *   };
+ *
+ *   const handleLogout = () => {
+ *     setUser(null);
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       {isLoggedIn ? (
+ *         <span>Welcome, {user.name}!</span>
+ *       ) : (
+ *         <span>Guest</span>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+
+interface UseUserReturn {
+    /** Current user info (null if not logged in) */
+    user: SDKUser | null;
+    /** Whether user is logged in */
+    isLoggedIn: boolean;
+    /**
+     * Set current user
+     * Pass null to logout/clear user
+     *
+     * This will:
+     * - Update analytics user context
+     * - Update default author for comments
+     */
+    setUser: (user: SDKUser | null) => void;
+    /**
+     * Get user as CommentAuthor format
+     * Returns anonymous user if not logged in
+     */
+    getCommentAuthor: () => CommentAuthor;
+}
+/**
+ * Hook for managing current user
+ */
+declare function useUser(): UseUserReturn;
+
+/**
+ * useAdvancedControls - Umbrella hook for advanced video controls
+ *
+ * Consolidates speed, quality, clean mode, auto-scroll, report, and menu state
+ * into a single hook for simplified SDK API surface.
+ *
+ * @example
+ * ```tsx
+ * function VideoControls({ videoId }: { videoId: string }) {
+ *   const {
+ *     speed, setSpeed,
+ *     cleanMode, enterCleanMode, exitCleanMode,
+ *     isMenuOpen, openMenu, closeMenu,
+ *     report, notInterested,
+ *   } = useAdvancedControls();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => setSpeed(2)}>2x</button>
+ *       <button onClick={openMenu}>Menu</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+
+/**
+ * Speed preset options
+ */
+declare const SPEED_PRESETS: readonly [0.5, 0.75, 1, 1.25, 1.5, 2];
+type SpeedPreset = (typeof SPEED_PRESETS)[number];
+/**
+ * Return type for useAdvancedControls hook
+ */
+interface UseAdvancedControlsReturn {
+    /** Current playback speed (from PlayerEngine) */
+    speed: number;
+    /** Set playback speed */
+    setSpeed: (speed: number) => void;
+    /** Available speed presets */
+    speedPresets: readonly number[];
+    /** Whether clean mode is active */
+    cleanMode: boolean;
+    /** What triggered clean mode */
+    cleanModeTrigger: CleanModeTrigger;
+    /** Enter clean mode */
+    enterCleanMode: (trigger: CleanModeTrigger) => void;
+    /** Exit clean mode */
+    exitCleanMode: () => void;
+    /** Toggle clean mode */
+    toggleCleanMode: () => void;
+    /** Whether auto-scroll is enabled */
+    autoScroll: boolean;
+    /** Toggle auto-scroll on/off */
+    toggleAutoScroll: () => void;
+    /** Set auto-scroll state */
+    setAutoScroll: (enabled: boolean) => void;
+    /** Current quality level (-1 = auto) */
+    quality: number;
+    /** Set quality level (-1 for auto) */
+    setQuality: (level: number) => void;
+    /** Available quality levels (from HLS.js) */
+    qualityLevels: VideoQuality[];
+    /** Whether quality is in auto mode */
+    isAutoQuality: boolean;
+    /**
+     * Report content
+     * @param contentId - ID of content to report
+     * @param reason - Report reason code
+     * @param description - Optional additional description
+     */
+    report: (contentId: string, reason: string, description?: string) => Promise<void>;
+    /**
+     * Get available report reasons
+     */
+    getReportReasons: () => Promise<ReportReason[]>;
+    /**
+     * Mark content as "not interested"
+     * @param contentId - ID of content
+     */
+    notInterested: (contentId: string) => Promise<void>;
+    /**
+     * Download content (delegated to host app via callback)
+     * @param content - Content item to download
+     */
+    download: (content: ContentItem) => Promise<void>;
+    /** Whether advanced menu is open */
+    isMenuOpen: boolean;
+    /** Open advanced menu */
+    openMenu: () => void;
+    /** Close advanced menu */
+    closeMenu: () => void;
+    /** Toggle menu open/close */
+    toggleMenu: () => void;
+    /** Whether report is in progress */
+    isReporting: boolean;
+    /** Whether not-interested action is in progress */
+    isMarkingNotInterested: boolean;
+}
+/**
+ * Configuration for useAdvancedControls
+ */
+interface UseAdvancedControlsConfig {
+    /** Callback when download is requested (handled by host app) */
+    onDownload?: (content: ContentItem) => Promise<void>;
+    /** Callback when content is hidden via "not interested" */
+    onContentHidden?: (contentId: string) => void;
+}
+/**
+ * Advanced controls hook
+ *
+ * Combines multiple control features into a single hook:
+ * - Speed control (uses PlayerEngine)
+ * - Clean mode (local state)
+ * - Auto-scroll (persisted to storage)
+ * - Quality control (placeholder for HLS.js integration)
+ * - Report/Not interested actions (uses IInteraction adapter)
+ * - Menu state (local state)
+ */
+declare function useAdvancedControls(config?: UseAdvancedControlsConfig): UseAdvancedControlsReturn;
+
+/**
+ * Snap-back animation type
+ * - 'none': Instant snap (no animation)
+ * - 'ease': Smooth ease-out transition
+ * - 'spring': Spring-like bounce effect
+ */
+type SnapBackAnimation = 'none' | 'ease' | 'spring';
+/**
+ * Configuration for useZoomGesture
+ */
+interface UseZoomGestureConfig {
+    /** Minimum scale factor (default: 1) */
+    minScale?: number;
+    /** Maximum scale factor (default: 5) */
+    maxScale?: number;
+    /** Whether to lock vertical swipe during zoom (default: true) */
+    lockVerticalSwipe?: boolean;
+    /**
+     * Snap-back animation type (default: 'ease')
+     * - 'none': Instant snap, onZoomEnd called immediately
+     * - 'ease': Smooth ease-out, onZoomEnd called after duration
+     * - 'spring': Spring bounce effect, onZoomEnd called after duration
+     */
+    snapBackAnimation?: SnapBackAnimation;
+    /** Snap-back animation duration in ms (default: 200) */
+    snapBackDuration?: number;
+    /** Callback when zoom starts (scale > 1) */
+    onZoomStart?: () => void;
+    /** Callback when zoom ends (after snap-back animation completes) */
+    onZoomEnd?: (finalScale: number) => void;
+    /** Callback on scale change during gesture */
+    onZoomChange?: (scale: number) => void;
+    /** Whether zoom is enabled (default: true) */
+    enabled?: boolean;
+}
+/**
+ * Touch event handlers
+ */
+interface ZoomGestureHandlers {
+    onTouchStart: (e: react__default.TouchEvent) => void;
+    onTouchMove: (e: react__default.TouchEvent) => void;
+    onTouchEnd: (e: react__default.TouchEvent) => void;
+}
+/**
+ * Return type for useZoomGesture
+ */
+interface UseZoomGestureReturn {
+    /** Current scale factor (1 = normal) */
+    scale: number;
+    /** Current X translation in pixels */
+    translateX: number;
+    /** Current Y translation in pixels */
+    translateY: number;
+    /** Whether actively zooming (2+ fingers) */
+    isZooming: boolean;
+    /** Whether currently panning while zoomed */
+    isPanning: boolean;
+    /** Whether snap-back animation is playing */
+    isAnimating: boolean;
+    /** Whether vertical swipe is locked */
+    isSwipeLocked: boolean;
+    /** Touch event handlers to spread on container */
+    handlers: ZoomGestureHandlers;
+    /** Manually reset to default state */
+    reset: () => void;
+    /** CSS transform string for convenience */
+    transform: string;
+    /** CSS transform-origin string */
+    transformOrigin: string;
+    /**
+     * CSS styles for container element.
+     * Includes `touchAction: 'none'` for proper gesture handling on mobile.
+     * Always spread this on your container for best compatibility.
+     */
+    containerStyle: react__default.CSSProperties;
+    /**
+     * CSS transition string for snap-back animation.
+     * Apply this to the transform property for smooth animations.
+     */
+    transitionStyle: react__default.CSSProperties;
+}
+/**
+ * useZoomGesture - Pinch-to-zoom gesture handler
+ *
+ * Handles pinch gestures for video zoom with pan support.
+ * Always snaps back to scale=1 on release (Instagram Reels behavior).
+ *
+ * @example
+ * ```tsx
+ * function VideoPlayer({ video }: { video: VideoItem }) {
+ *   const {
+ *     transform,
+ *     transformOrigin,
+ *     containerStyle,
+ *     handlers,
+ *     isZooming,
+ *   } = useZoomGesture({
+ *     onZoomStart: () => enterCleanMode('zoom'),
+ *     onZoomEnd: () => exitCleanMode(),
+ *     snapBackAnimation: 'ease', // smooth snap-back
+ *   });
+ *
+ *   return (
+ *     <div
+ *       style={{
+ *         ...containerStyle, // includes touchAction: 'none' for proper gesture handling
+ *         transform,
+ *         transformOrigin,
+ *       }}
+ *       {...handlers}
+ *     >
+ *       <video src={video.url} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ * **Important:** Always spread `containerStyle` on your container element.
+ * This sets `touchAction: 'none'` which is required for `preventDefault()` to work
+ * on mobile browsers (Chrome 56+, Safari) where touch events are passive by default.
+ */
+declare function useZoomGesture(config?: UseZoomGestureConfig): UseZoomGestureReturn;
+
+/**
+ * useReportedVideo - Hook to check/manage reported video state
+ *
+ * Provides methods to check if a video has been reported and
+ * whether the overlay has been dismissed by the user.
+ */
+interface UseReportedVideoReturn {
+    /** Whether this video has been reported by user */
+    isReported: boolean;
+    /** Whether user dismissed the overlay (wants to watch anyway) */
+    isOverlayDismissed: boolean;
+    /** Should show the reported overlay (reported AND not dismissed) */
+    shouldShowOverlay: boolean;
+    /** Mark video as reported */
+    markReported: () => void;
+    /** Dismiss the overlay (user wants to watch) */
+    dismissOverlay: () => void;
+}
+/**
+ * Hook to manage reported video state for a specific video
+ *
+ * @param videoId - The video ID to check
+ * @returns Object with reported state and actions
+ */
+declare function useReportedVideo(videoId: string): UseReportedVideoReturn;
+
+/**
+ * useArticle - Hook for managing Article state and interactions
+ *
+ * Features:
+ * - Article carousel navigation
+ * - Music playback control
+ * - Detail view state
+ * - Like/unlike
+ * - Share
+ */
+
+interface UseArticleConfig {
+    /** The article data */
+    article: Article;
+    /** Initial image index (default: 0) */
+    initialIndex?: number;
+    /** Music info for this article (optional) */
+    music?: MusicInfo;
+    /** Whether this article is currently active (visible) */
+    isActive?: boolean;
+}
+interface UseArticleReturn {
+    /** Current image index in carousel */
+    currentIndex: number;
+    /** Set current image index */
+    setCurrentIndex: (index: number) => void;
+    /** Go to next image */
+    next: () => void;
+    /** Go to previous image */
+    prev: () => void;
+    /** Total number of images */
+    totalImages: number;
+    /** Whether can go to next image */
+    hasNext: boolean;
+    /** Whether can go to previous image */
+    hasPrev: boolean;
+    /** Whether music is playing */
+    isMusicPlaying: boolean;
+    /** Toggle music playback */
+    toggleMusic: () => void;
+    /** Play music */
+    playMusic: () => void;
+    /** Pause music */
+    pauseMusic: () => void;
+    /** Timestamp of last user music toggle (for PlayIndicator) */
+    lastMusicToggleTime: number;
+    /** Whether detail view is open */
+    isDetailOpen: boolean;
+    /** Open detail view */
+    openDetail: () => void;
+    /** Close detail view */
+    closeDetail: () => void;
+    /** Whether article is liked by current user */
+    isLiked: boolean;
+    /** Like the article */
+    handleLike: () => Promise<void>;
+    /** Unlike the article */
+    handleUnlike: () => Promise<void>;
+    /** Toggle like state */
+    toggleLike: () => Promise<void>;
+    /** Share the article */
+    handleShare: () => Promise<void>;
+}
+declare function useArticle({ article, initialIndex, music, isActive, }: UseArticleConfig): UseArticleReturn;
+/** @deprecated Use useArticle instead */
+declare const useImagePost: typeof useArticle;
+/** @deprecated Use UseArticleConfig instead */
+type UseImagePostConfig = UseArticleConfig;
+/** @deprecated Use UseArticleReturn instead */
+type UseImagePostReturn = UseArticleReturn;
+
+/**
+ * Playlist Context Value
+ */
+interface PlaylistContextValue {
+    /** Current active playlist ID */
+    playlistId: string | null;
+    /** List of items in the playlist */
+    items: ContentItem[];
+    /** Current active item index */
+    currentIndex: number;
+    /** Loading status */
+    status: 'idle' | 'loading' | 'error';
+    /** Error information */
+    error: Error | null;
+    /** Playlist metadata */
+    metadata: {
+        title: string;
+        description?: string;
+        cover?: string;
+        totalItems: number;
+    } | null;
+    /** Load a playlist by ID */
+    loadPlaylist: (id: string) => Promise<void>;
+    /** Set playlist data directly */
+    setPlaylist: (playlist: PlaylistData) => void;
+    /** Go to next item */
+    next: () => void;
+    /** Go to previous item */
+    prev: () => void;
+    /** Jump to a specific index */
+    jumpTo: (index: number) => void;
+    /** Reset store state */
+    reset: () => void;
+}
+/**
+ * PlaylistProvider - Connects PlaylistManager to React Context
+ */
+declare function PlaylistProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access Playlist state and actions
+ */
+declare function usePlaylist(): PlaylistContextValue;
+
+export { ActionBar, type ActionBarIconSet, type ActionBarProps as ActionBarWiredProps, type AdaptersConfig, AdvanceMenu, type AdvanceMenuProps, AdvanceMenuWired, type AdvanceMenuWiredProps, ArticleSlot, type ArticleSlotWiredProps, AuthorInfo, type AuthorInfoProps as AuthorInfoWiredProps, CleanModeOverlay as CleanModeOverlayWired, type CleanModeOverlayProps as CleanModeOverlayWiredProps, type CleanModeTrigger, CommentSheet, type CommentSheetProps, type ComposerContext, DEFAULT_LOCALE, DefaultArticleSlot, type DefaultArticleSlotProps, DefaultImagePostSlot, type DefaultImagePostSlotProps, DefaultVideoSlot as DefaultSlot, type DefaultVideoSlotProps as DefaultSlotProps, type DragAxis, type DragBind, type DragConfig, type DragHandler, type DragState, Feed, type FeedProps, type GuestAction, type GuestActionContext, type GuestModeConfig, type HookReturn, ImagePostSlot, type ImagePostSlotWiredProps, LocalizationAdapter, LocalizationContext, LocalizationProvider, type LocalizationProviderProps, PlaylistBar, PlaylistCollection, type PlaylistCollectionProps, type PlaylistContextValue, PlaylistProvider, PlaylistSheet, ProgressBar, type ProgressBarProps, ReportSheet, type ReportSheetProps, ReportSheetWired, type ReportSheetWiredProps, type SDKConfig, type SDKInstance, SDKPlayerError, type SDKUser, SPEED_PRESETS, SUPPORTED_LOCALES, ShortVideoProvider, type ShortVideoProviderProps, ShortVideoRoot, type ShortVideoRootProps, SlotComposer, type SlotComposerProps, type SpeedPreset, type SupportedLocale, type SwipeConfig, type SwipeDirection, type SwipeState, type TranslateFn, type UseAdvancedControlsConfig, type UseAdvancedControlsReturn, type UseArticleConfig, type UseArticleReturn, type UseCommentOptions, type UseCommentReturn, type UseFeedReturn, type UseGuestModeReturn, type UseImagePostConfig, type UseImagePostReturn, type UseLifecycleOptions, type UseLifecycleReturn, type UseOptimisticReturn, type UsePlayerCoreReturn, type UsePlayerForVideoReturn, type UsePlayerReturn, type UseReportedVideoReturn, type UseResourceAllocationReturn, type UseResourceReturn, type UseSwipeGestureReturn, type UseTranslationReturn, type UseUserReturn, type UseZoomGestureConfig, type UseZoomGestureReturn, type UserConfig, type VideoElementHandlers, VideoFeed, type VideoFeedProps, VideoInfo, type VideoInfoWiredProps, VideoPlayer, type VideoPlayerProps, VideoSlot, type VideoSlotWiredProps, type WireConfig, type ZoomGestureHandlers, createSDK, createSimpleWireConfig, createWiredComponent, destroySDK, enMessages, getMessages, getSDK, isLocaleSupported, messageCatalogs, parseMessage, prefetchFeed, resetCommentManager, useAdvancedControls, useArticle, useComment, useFeed, useFeedSelector, useGuestMode, useImagePost, useLifecycle, useLifecycleSelector, useLocalization, useOptimistic, useOptimisticSelector, useOptionalLocalization, useOptionalTranslation, usePlayer, usePlayerForVideo, usePlayerSelector, usePlaylist, useReportedVideo, useResource, useResourceAllocation, useResourceSelector, useSDK, useSwipeGesture, useTouchDrag, useTranslation, useUser, useZoomGesture, viMessages };