@xhub-short/sdk 0.1.0-beta.1 → 0.1.0-beta.3

package/README.md

@@ -257,9 +257,24 @@ SDK đảm bảo hoạt động với Server-Side Rendering:
 ├── @xhub-short/contracts  (types, interfaces)
 ├── @xhub-short/core       (domain logic)
 ├── @xhub-short/adapters   (mock + preset adapters)
-└── react (peer dependency)
+├── @xhub-short/ui         (headless components)
+├── react (peer dependency)
+└── zustand (peer dependency)
 ```
 
+### Host App Installation
+
+```bash
+npm install @xhub-short/sdk
+```
+
+**That's it!** No other dependencies needed.
+
+**Bundled internally:**
+- `zustand` - state management (bundled in @xhub-short/core)
+- `clsx` - class names utility (bundled in @xhub-short/ui)
+- Custom `useTouchDrag` hook - gesture handling (bundled in @xhub-short/sdk)
+
 ---
 
 ## ✨ Chức năng chính

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import * as react from 'react';
-import { ComponentType, ReactNode, CSSProperties, ReactElement, SyntheticEvent } from 'react';
-import { ActionBarHeadlessProps, VideoItem, UIInteractionState, AuthorInfoHeadlessProps, UIAuthorState, UIAuthorActions, Author, ProgressBarHeadlessProps, UIFeedState, UISwipeState, VideoInfoProps, VideoSlotProps, IDataSource, IInteraction, ISessionStorage, IAnalytics, ILogger, INetworkAdapter, IVideoLoader, IPosterLoader } from '@xhub-short/contracts';
-export { ActionBarHeadlessProps, ActionBarProps, ActionButtonHeadlessProps, AnalyticsEvent, AnalyticsEventType, Author, AuthorInfoHeadlessProps, AuthorInfoProps, ErrorBoundaryProps, FeedResponse, IAnalytics, IDataSource, IInteraction, ILogger, INetworkAdapter, IPosterLoader, ISessionStorage, IStorage, IVideoLoader, LogEntry, LogLevel, SessionSnapshot, SkeletonProps, UIAuthorActions, UIAuthorState, UIFeedState, UIInteractionActions, UIInteractionState, UIPlayerControls, UIPlayerState, UIResourceState, UISwipeState, UIVideoInfoActions, UIVideoInfoState, VideoFeedHeadlessProps, VideoInfoHeadlessProps, VideoInfoProps, VideoItem, VideoPlayerHeadlessProps, VideoSlotHeadlessProps, VideoSlotProps, VideoSource, VideoStats } from '@xhub-short/contracts';
+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 * as react_jsx_runtime from 'react/jsx-runtime';
-import { AuthorAvatar, AuthorName, AuthorDescription, FollowButton, VideoAuthorName, VideoCaption, VideoHashtags, VideoLocation, VideoMusic, VideoPlayerHeadlessExtendedProps, ErrorMode, ErrorBoundaryProps } from '@xhub-short/ui';
-import { useDrag } from '@use-gesture/react';
+import { AuthorAvatar, AuthorName, AuthorDescription, FollowButtonProps, SheetHeaderProps, CommentListProps, CommentInputProps, VideoAuthorName, VideoCaption, VideoHashtags, VideoLocation, VideoMusic, VideoPlayerHeadlessExtendedProps, 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';
 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';
@@ -288,6 +288,10 @@ declare function AuthorInfoContent({ className, children, }: {
     className?: string;
     children?: ReactNode;
 }): react_jsx_runtime.JSX.Element;
+/**
+ * Translated FollowButton - auto-injects i18n strings
+ */
+declare function TranslatedFollowButton(props: FollowButtonProps): React.ReactElement;
 /**
  * AuthorInfo with compound sub-components
  *
@@ -308,12 +312,84 @@ declare const AuthorInfo: typeof AuthorInfoRoot & {
     Name: typeof AuthorName;
     /** Description/bio sub-component */
     Description: typeof AuthorDescription;
-    /** Follow button sub-component */
-    FollowButton: typeof FollowButton;
+    /** Follow button sub-component (auto-translated) */
+    FollowButton: typeof TranslatedFollowButton;
     /** Content wrapper for name + description */
     Content: typeof AuthorInfoContent;
 };
 
+/**
+ * CommentSheet - Wired SDK component
+ *
+ * TikTok-style bottom sheet for comments with SDK integration.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CommentSheet
+ *   videoId={currentVideoId}
+ *   isOpen={showComments}
+ *   onClose={() => setShowComments(false)}
+ * />
+ * ```
+ *
+ * @example Custom composition
+ * ```tsx
+ * <CommentSheet videoId={videoId} isOpen={isOpen} onClose={onClose}>
+ *   <CommentSheet.Header titleLabel="Bình luận" />
+ *   <CommentSheet.List />
+ *   <CommentSheet.Input placeholder="Aa..." />
+ * </CommentSheet>
+ * ```
+ */
+
+interface CommentSheetProps {
+    /** Video ID to show comments for */
+    videoId: string;
+    /** Whether sheet is open */
+    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) */
+    initialCount?: number;
+    /** Auto load comments when opened */
+    autoLoad?: boolean;
+    /** Custom children for compound pattern */
+    children?: ReactNode;
+    /** Root class name */
+    className?: string;
+    /** Backdrop class name */
+    backdropClassName?: string;
+    /** Close on backdrop click (default: true) */
+    closeOnBackdropClick?: boolean;
+    /** 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;
+/**
+ * Translated SheetHeader - auto-injects i18n strings
+ */
+declare function TranslatedSheetHeader(props: SheetHeaderProps): ReactElement;
+/**
+ * Translated CommentList - auto-injects i18n strings
+ */
+declare function TranslatedCommentList(props: CommentListProps): ReactElement;
+/**
+ * Translated CommentInput - auto-injects i18n strings
+ */
+declare function TranslatedCommentInput(props: CommentInputProps): ReactElement;
+declare const CommentSheet: typeof CommentSheetInner & {
+    /** Sheet header with title and close button (auto-translated) */
+    Header: typeof TranslatedSheetHeader;
+    /** Scrollable comment list with infinite loading (auto-translated) */
+    List: typeof TranslatedCommentList;
+    /** Input area with emoji bar and submit (auto-translated) */
+    Input: typeof TranslatedCommentInput;
+};
+
 /**
  * Wired ProgressBar Component (P11)
  *
@@ -382,6 +458,17 @@ interface ProgressBarProps extends Omit<ProgressBarHeadlessProps, 'currentTime'
      * @default false
      */
     minimal?: boolean;
+    /**
+     * Auto-hide progress bar when video is playing
+     *
+     * When enabled:
+     * - Hidden when video is playing
+     * - Visible when video is paused
+     * - Visible when user hovers (via CSS)
+     *
+     * @default true
+     */
+    autoHide?: boolean;
     /**
      * Additional CSS class
      */
@@ -393,16 +480,24 @@ interface ProgressBarProps extends Omit<ProgressBarHeadlessProps, 'currentTime'
  * Connects to PlayerEngine for automatic state updates.
  * Uses Direct DOM Update for 60fps smooth progress animation.
  */
-declare function ProgressBar({ seekable, showTime, showTooltip, minimal, className, onSeekStart, onSeekEnd, }: ProgressBarProps): React.ReactElement | null;
+declare function ProgressBar({ seekable, showTime, showTooltip, minimal, autoHide, className, onSeekStart, onSeekEnd, }: ProgressBarProps): React.ReactElement | null;
 declare namespace ProgressBar {
     var displayName: string;
 }
 
+interface DragBind {
+    onPointerDown?: (e: React.PointerEvent) => void;
+    onTouchStart?: (e: React.TouchEvent) => void;
+    style?: {
+        touchAction: string;
+    };
+}
+
 /**
  * Swipe Gesture Hook
  *
  * Headless hook for vertical swipe gestures in video feeds.
- * Wraps @use-gesture/react with direction locking and velocity-based snap.
+ * Uses custom lightweight touch handler (~1KB instead of @use-gesture/react ~20KB).
  *
  * Features:
  * - Touch and mouse support
@@ -506,7 +601,7 @@ interface UseSwipeGestureReturn {
      * return <div {...bind()}>...</div>;
      * ```
      */
-    bind: ReturnType<typeof useDrag>;
+    bind: () => DragBind;
     /**
      * Get current swipe state (ref-based, no re-render).
      * Use this for reading state during animations or imperative code.
@@ -543,6 +638,11 @@ interface UseSwipeGestureReturn {
      * ```
      */
     dragOffsetRef: React.RefObject<number>;
+    /**
+     * Ref indicating if current index change is from restore (vs user swipe).
+     * Use this to skip animations when restoring session.
+     */
+    isRestoreTransitionRef: React.RefObject<boolean>;
 }
 /**
  * Headless hook for vertical swipe gestures
@@ -750,7 +850,7 @@ interface VideoFeedProps {
  * 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.
  */
-declare function VideoFeed({ height, className, renderSlot, onIndexChange, onEndReached, endReachedThreshold, bufferSize, loadingText, emptyText, endText, autoLoad, autoLoadMore, swipeThreshold, velocityThreshold, snapDuration, onSwipe, feedState: feedStateProp, swipeState: swipeStateProp, containerStyle, }: VideoFeedProps): React.ReactElement;
+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 {
     var displayName: string;
 }
@@ -847,11 +947,17 @@ declare const VideoInfo: typeof VideoInfoRoot & {
  *
  * VideoPlayer (Wired) -> VideoPlayerHeadless (UI)
  *
- * - Auto-connects to PlayerEngine via usePlayer()
+ * - Auto-connects to PlayerEngine via usePlayerCore() (optimized)
  * - Auto-loads video when video prop changes
  * - Reports playback events back to PlayerEngine
  * - Can detect VideoSlot context for embedded use
  *
+ * ## Re-render Optimization
+ *
+ * Uses `usePlayerCore()` instead of `usePlayer()` to avoid re-renders
+ * during playback. This hook excludes time-based state (currentTime,
+ * duration, buffered, watchTime) which update ~4 times per second.
+ *
  * ## Important: Standalone vs Isolated
  *
  * **Standalone mode does NOT mean isolated player.**
@@ -1065,6 +1171,10 @@ interface DefaultSlotProps {
     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) */
@@ -1081,6 +1191,8 @@ interface DefaultSlotProps {
     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 */
@@ -1107,8 +1219,14 @@ interface DefaultSlotProps {
     renderVideoInfo?: (props: VideoInfoWiredProps) => ReactNode;
     /** Custom ProgressBar renderer */
     renderProgressBar?: (props: ProgressBarProps) => ReactNode;
+    /** Custom CommentSheet renderer */
+    renderCommentSheet?: (props: CommentSheetProps) => ReactNode;
     /** Custom Error renderer */
     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) */
@@ -1139,6 +1257,8 @@ interface AdaptersConfig {
     dataSource?: IDataSource;
     /** Interaction adapter for like/follow/comment actions */
     interaction?: IInteraction;
+    /** Comment adapter for comment operations (read/write/like) */
+    comment?: ICommentAdapter;
     /** Storage adapter for session persistence */
     storage?: ISessionStorage;
     /** Analytics adapter for tracking events */
@@ -1232,6 +1352,67 @@ interface SDKConfig {
      * @see OptimisticConfig
      */
     optimistic?: Partial<OptimisticConfig>;
+    /**
+     * Comment feature configuration
+     * @see CommentConfig
+     */
+    comment?: Partial<CommentConfig>;
+    /**
+     * Prefetch cache configuration for instant feed loading
+     *
+     * When enabled, SDK caches the last N videos from the feed.
+     * On fresh load (reload/new tab), cached videos are shown instantly
+     * while fresh data is fetched in the background.
+     *
+     * @example
+     * ```tsx
+     * <ShortVideoRoot
+     *   config={{
+     *     prefetchCache: {
+     *       enabled: true,
+     *       maxVideos: 15,
+     *     }
+     *   }}
+     * />
+     * ```
+     */
+    prefetchCache?: {
+        /** Enable instant loading from cache (default: true) */
+        enabled?: boolean;
+        /** Number of videos to cache (default: 10) */
+        maxVideos?: number;
+        /**
+         * Enable dynamic cache eviction (default: true)
+         * When user scrolls past cached videos, remove them from cache
+         * Prevents user from rewatching same videos on reload
+         */
+        enableDynamicEviction?: boolean;
+        /**
+         * Throttle duration (ms) for dynamic eviction (default: 2000)
+         * Reduces storage writes during fast scrolling
+         */
+        evictionThrottleMs?: number;
+    };
+    /**
+     * Localization configuration
+     *
+     * Configure locale and custom messages for i18n support.
+     *
+     * @example
+     * ```tsx
+     * <ShortVideoProvider config={{
+     *   localization: {
+     *     locale: 'vi',
+     *     messages: {
+     *       'feed.empty': 'Hiện chưa có video nào',
+     *     },
+     *   },
+     * }}>
+     *   <App />
+     * </ShortVideoProvider>
+     * ```
+     */
+    localization?: LocalizationConfig;
     /**
      * Enable debug mode
      * When true, enables verbose logging
@@ -1932,6 +2113,8 @@ interface SDKInstance {
         network: INetworkAdapter;
         videoLoader: IVideoLoader;
         posterLoader: IPosterLoader;
+        /** Comment adapter (optional - only if comment feature is enabled) */
+        comment?: ICommentAdapter;
     };
     /** Destroy all managers and cleanup resources */
     destroy: () => void;
@@ -2051,6 +2234,12 @@ interface UseLifecycleOptions {
  * - Session restore on mount
  * - State tracking during usage
  * - Session save on unmount/visibility hidden
+ *
+ * ## Session-Only Restore
+ *
+ * By default, restore only happens when user navigates within the app
+ * (e.g., going to another page and coming back). Fresh loads (reload,
+ * new tab, direct URL) will NOT restore to prevent stale data issues.
  */
 declare function useLifecycle(options?: UseLifecycleOptions): UseLifecycleReturn;
 /**
@@ -2064,4 +2253,271 @@ declare function useLifecycle(options?: UseLifecycleOptions): UseLifecycleReturn
  */
 declare function useLifecycleSelector<T>(selector: (state: LifecycleState) => T): T;
 
-export { ActionBar, type ActionBarIconSet, type ActionBarProps as ActionBarWiredProps, type AdaptersConfig, AuthorInfo, type AuthorInfoProps as AuthorInfoWiredProps, DefaultSlot, type DefaultSlotProps, type HookReturn, ProgressBar, type ProgressBarProps, type SDKConfig, type SDKInstance, SDKPlayerError, ShortVideoProvider, type ShortVideoProviderProps, ShortVideoRoot, type ShortVideoRootProps, type SwipeConfig, type SwipeDirection, type SwipeState, type UseFeedReturn, type UseLifecycleOptions, type UseLifecycleReturn, type UseOptimisticReturn, type UsePlayerForVideoReturn, type UsePlayerReturn, type UseResourceAllocationReturn, type UseResourceReturn, type UseSwipeGestureReturn, type VideoElementHandlers, VideoFeed, type VideoFeedProps, VideoInfo, type VideoInfoWiredProps, VideoPlayer, type VideoPlayerProps, VideoSlot, type VideoSlotWiredProps, type WireConfig, createSDK, createSimpleWireConfig, createWiredComponent, destroySDK, getSDK, useFeed, useFeedSelector, useLifecycle, useLifecycleSelector, useOptimistic, useOptimisticSelector, usePlayer, usePlayerForVideo, usePlayerSelector, useResource, useResourceAllocation, useResourceSelector, useSDK, useSwipeGesture };
+/**
+ * useComment Hook - SDK integration for Comment feature
+ *
+ * Provides comment state and actions for a specific video.
+ * Uses CommentManager from @xhub-short/core with Zustand store.
+ *
+ * @example
+ * ```tsx
+ * function CommentSheet({ videoId }) {
+ *   const { state, actions, isReady } = useComment({ videoId, autoLoad: true });
+ *
+ *   if (!isReady) return null;
+ *
+ *   return (
+ *     <>
+ *       {state.isLoading ? <Spinner /> : null}
+ *       {state.comments.map(c => <Comment key={c.id} {...c} />)}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+
+interface UseCommentOptions {
+    /** Video ID to load comments for */
+    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>;
+}
+interface UseCommentReturn {
+    /** Comment state */
+    state: UICommentState;
+    /** Comment actions */
+    actions: UICommentActions;
+    /** Whether hook is ready (adapter configured) */
+    isReady: boolean;
+}
+declare function resetCommentManager(): void;
+declare function useComment(options: UseCommentOptions): UseCommentReturn;
+
+/**
+ * Localization Context
+ *
+ * Holds the ILocalization instance for the SDK.
+ */
+declare const LocalizationContext: react.Context<ILocalization | null>;
+interface LocalizationProviderProps {
+    /**
+     * Localization configuration
+     */
+    config?: LocalizationConfig;
+    /**
+     * Children components
+     */
+    children: ReactNode;
+}
+/**
+ * Localization Provider
+ *
+ * Wraps SDK components with i18n support.
+ *
+ * @example
+ * <LocalizationProvider config={{ locale: 'vi' }}>
+ *   <VideoFeed />
+ * </LocalizationProvider>
+ */
+declare function LocalizationProvider({ config, children, }: LocalizationProviderProps): React.ReactElement;
+/**
+ * Get localization instance from context
+ *
+ * @throws Error if used outside LocalizationProvider
+ */
+declare function useLocalization(): ILocalization;
+/**
+ * Get localization instance (nullable)
+ *
+ * For components that may be used outside SDK context.
+ */
+declare function useOptionalLocalization(): ILocalization | null;
+
+/**
+ * useTranslation Hook
+ *
+ * Main hook for accessing i18n functions in SDK components.
+ */
+
+/**
+ * Translation function type
+ */
+type TranslateFn = (key: MessageKey, values?: MessageValues) => string;
+/**
+ * Return type of useTranslation hook
+ */
+interface UseTranslationReturn {
+    /** Current locale */
+    locale: string;
+    /** Translate function */
+    t: TranslateFn;
+    /** Format number with locale separators */
+    formatNumber: (value: number) => string;
+    /** Format compact number (1K, 1M, 1B) */
+    formatCompact: (value: number) => string;
+    /** Format relative time */
+    formatRelativeTime: (date: Date | number) => string;
+}
+/**
+ * Hook to access translation functions
+ *
+ * Must be used within ShortVideoProvider.
+ *
+ * @example
+ * const { t, formatCompact } = useTranslation();
+ *
+ * // Simple translation
+ * t('feed.loading') // "Đang tải..."
+ *
+ * // With interpolation
+ * t('comment.replyTo', { name: 'John' }) // "Đang trả lời John"
+ *
+ * // Plural
+ * t('comment.count', { count: 5 }) // "5 Bình luận"
+ *
+ * // Compact number
+ * formatCompact(15000) // "15N" (Vietnamese) or "15K" (English)
+ */
+declare function useTranslation(): UseTranslationReturn;
+/**
+ * Hook to access translation functions (nullable)
+ *
+ * Returns null if used outside ShortVideoProvider.
+ * Useful for components that may be used standalone.
+ *
+ * NOTE: This hook always runs all internal hooks unconditionally
+ * to comply with Rules of Hooks. The null check happens at the end.
+ */
+declare function useOptionalTranslation(): UseTranslationReturn | null;
+
+/**
+ * Default Localization Adapter
+ *
+ * Built-in implementation using lightweight ICU-like parser.
+ * Zero external dependencies.
+ */
+
+/**
+ * Default Localization Adapter
+ *
+ * Provides i18n support with:
+ * - ICU-like message format (plural, select, interpolation)
+ * - Compact number formatting (1K, 1M, 1B)
+ * - Relative time formatting
+ *
+ * @example
+ * const l10n = new LocalizationAdapter({ locale: 'vi' });
+ * l10n.t('comment.count', { count: 5 }); // "5 Bình luận"
+ * l10n.formatCompact(15000); // "15N"
+ */
+declare class LocalizationAdapter implements ILocalization {
+    readonly locale: string;
+    private readonly messages;
+    private readonly fallbackMessages;
+    constructor(config?: LocalizationConfig);
+    /**
+     * Translate a message key with optional interpolation
+     */
+    t(key: MessageKey, values?: MessageValues): string;
+    /**
+     * Format number with locale-aware separators
+     */
+    formatNumber(value: number): string;
+    /**
+     * Format number in compact form (1K, 1M, 1B)
+     */
+    formatCompact(value: number): string;
+    /**
+     * Format relative time (e.g., "2 hours ago")
+     */
+    formatRelativeTime(date: Date | number): string;
+}
+
+/**
+ * Lightweight ICU-like Message Parser
+ *
+ * Custom implementation - NO external dependencies.
+ * Bundle size: ~0.5KB gzipped
+ *
+ * Supported syntax:
+ * - Simple interpolation: {name}
+ * - Plural: {count, plural, =0 {none} =1 {one} one {# item} other {# items}}
+ * - Select: {gender, select, male {He} female {She} other {They}}
+ *
+ * Note: This is a simplified parser that covers 95% of i18n use cases.
+ * For full ICU compliance, use FormatJS.
+ */
+
+/**
+ * Parse ICU-like message format
+ *
+ * @param message - Message template with ICU placeholders
+ * @param values - Values to interpolate
+ * @param locale - Locale for plural rules
+ * @returns Formatted string
+ *
+ * @example
+ * parseMessage("Hello {name}!", { name: "World" })
+ * // "Hello World!"
+ *
+ * parseMessage("{count, plural, =0 {No items} one {# item} other {# items}}", { count: 5 })
+ * // "5 items"
+ *
+ * parseMessage("{active, select, true {Active} other {Inactive}}", { active: true })
+ * // "Active"
+ */
+declare function parseMessage(message: string, values?: MessageValues, locale?: string): string;
+
+/**
+ * English Messages (Default)
+ *
+ * Uses ICU-like message format for pluralization and selection.
+ */
+
+declare const enMessages: MessageCatalog;
+
+/**
+ * Vietnamese Messages
+ *
+ * Vietnamese doesn't have grammatical plural forms,
+ * so ICU plural syntax always uses "other" category.
+ */
+
+declare const viMessages: MessageCatalog;
+
+/**
+ * Message Catalogs Index
+ *
+ * Default messages for supported locales.
+ * Host App can override any message via config.
+ */
+
+/**
+ * All supported locales
+ */
+declare const SUPPORTED_LOCALES: readonly ["en", "vi"];
+type SupportedLocale = (typeof SUPPORTED_LOCALES)[number];
+/**
+ * Default locale
+ */
+declare const DEFAULT_LOCALE: SupportedLocale;
+/**
+ * Message catalogs by locale
+ */
+declare const messageCatalogs: Record<SupportedLocale, MessageCatalog>;
+/**
+ * Get messages for a locale
+ *
+ * Falls back to English if locale not supported
+ */
+declare function getMessages(locale: string): MessageCatalog;
+/**
+ * Check if locale is supported
+ */
+declare function isLocaleSupported(locale: string): locale is SupportedLocale;
+
+export { ActionBar, type ActionBarIconSet, type ActionBarProps as ActionBarWiredProps, type AdaptersConfig, AuthorInfo, type AuthorInfoProps as AuthorInfoWiredProps, CommentSheet, type CommentSheetProps, DEFAULT_LOCALE, DefaultSlot, type DefaultSlotProps, 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 UseLifecycleOptions, type UseLifecycleReturn, type UseOptimisticReturn, 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, resetCommentManager, useComment, useFeed, useFeedSelector, useLifecycle, useLifecycleSelector, useLocalization, useOptimistic, useOptimisticSelector, useOptionalLocalization, useOptionalTranslation, usePlayer, usePlayerForVideo, usePlayerSelector, useResource, useResourceAllocation, useResourceSelector, useSDK, useSwipeGesture, useTranslation, viMessages };