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

package/README.md

@@ -483,38 +483,88 @@ export type { FeedState, PlayerState, ResourceState, ... } from '@xhub-short/cor
 
 ## 🚀 Quick Start
 
-### Basic Usage
+### Simplest Usage (Recommended)
 
 ```tsx
-import { ShortVideoProvider, useFeed, usePlayer } from '@xhub-short/sdk';
+import { ShortVideoRoot, VideoFeed, DefaultSlot } from '@xhub-short/sdk';
 
 function App() {
   return (
-    <ShortVideoProvider
+    <ShortVideoRoot
       config={{
         preset: {
           baseUrl: 'https://api.example.com/v1',
           auth: { getAccessToken: () => localStorage.getItem('token') },
           endpoints: {
             feed: { list: '/videos', detail: '/videos/:id' },
-            interaction: { like: '/videos/:id/like', ... },
+            interaction: { like: '/videos/:id/like' },
           },
         },
       }}
+      errorMode="auto-skip-with-toast"
     >
-      <VideoFeed />
-    </ShortVideoProvider>
+      <VideoFeed renderSlot={(video, index) => (
+        <DefaultSlot 
+          video={video} 
+          index={index}
+          showBookmark={true}
+          onOpenComments={(videoId) => openSheet(videoId)}
+          onShare={(video) => shareVideo(video)}
+        />
+      )} />
+    </ShortVideoRoot>
   );
 }
-
-function VideoFeed() {
-  const { videos, loadInitial, loadMore, hasMore } = useFeed();
-  const { load, play, pause, isPlaying } = usePlayer();
-  
-  // Your UI here...
-}
 ```
 
+**That's it!** The SDK handles everything: video loading, HLS playback, swipe navigation, like/follow actions, error handling, and more.
+
+### DefaultSlot Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `video` | `VideoItem` | required | Video data |
+| `index` | `number` | required | Index in feed |
+| `showPoster` | `boolean` | `true` | Show poster |
+| `showLikeAnimation` | `boolean` | `true` | Double-tap hearts |
+| `showAuthorInfo` | `boolean` | `true` | Avatar + follow |
+| `showActionBar` | `boolean` | `true` | Like, comment, share |
+| `showVideoInfo` | `boolean` | `true` | Caption, hashtags |
+| `showProgressBar` | `boolean` | `true` | Progress bar |
+| `showBookmark` | `boolean` | `false` | Bookmark button |
+| `onOpenComments` | `(videoId) => void` | - | Comment click |
+| `onShare` | `(video) => void` | - | Share click |
+| `onOpenProfile` | `(author) => void` | - | Author click |
+| `onHashtagClick` | `(tag) => void` | - | Hashtag click |
+
+### Custom Usage (Advanced)
+
+For full control, use individual components:
+
+```tsx
+import { 
+  ShortVideoRoot, VideoFeed, VideoSlot, VideoPlayer,
+  ActionBar, AuthorInfo, VideoInfo, ProgressBar 
+} from '@xhub-short/sdk';
+import { VideoSlotOverlay, VideoSlotPoster } from '@xhub-short/ui';
+
+<VideoFeed renderSlot={(video, index) => (
+  <VideoSlot video={video} index={index}>
+    <VideoPlayer />
+    <VideoSlotPoster />
+    <VideoSlotOverlay>
+      <VideoSlotOverlay.Actions>
+        <AuthorInfo video={video} variant="avatar-badge" />
+        <ActionBar video={video} />
+      </VideoSlotOverlay.Actions>
+      <VideoSlotOverlay.Bottom>
+        <VideoInfo video={video} />
+        <ProgressBar showTime />
+      </VideoSlotOverlay.Bottom>
+    </VideoSlotOverlay>
+  </VideoSlot>
+)} />
+
 ### With Custom Adapters
 
 ```tsx