@xhub-reel/feed 0.1.0

package/dist/index.js

@@ -0,0 +1,1855 @@
+'use strict';
+
+var react = require('react');
+var core = require('@xhub-reel/core');
+var gestures = require('@xhub-reel/gestures');
+var player = require('@xhub-reel/player');
+var jsxRuntime = require('react/jsx-runtime');
+var api = require('@xhub-reel/core/api');
+var reactQuery = require('@tanstack/react-query');
+
+// src/components/VideoFeed.tsx
+var videoFeedItemStyles = {
+  container: {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    backgroundColor: core.colors.background
+  },
+  video: {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "contain"
+  },
+  placeholder: {
+    position: "absolute",
+    inset: 0,
+    backgroundSize: "cover",
+    backgroundPosition: "center"
+  },
+  // Tap area for play/pause
+  tapArea: {
+    zIndex: core.zIndices.base},
+  // Pause overlay icon
+  pauseOverlay: {
+    zIndex: core.zIndices.overlay},
+  pauseIconWrapper: {
+    borderRadius: core.radii.full,
+    transition: `opacity ${core.durations.normal}ms ${core.easings.xhubReel}, transform ${core.durations.normal}ms ${core.easings.xhubReel}`
+  }
+};
+var VideoFeedItemContext = react.createContext(null);
+function useVideoFeedItemContext() {
+  const context = react.useContext(VideoFeedItemContext);
+  if (!context) {
+    throw new Error(
+      "VideoFeedItem compound components must be used within a VideoFeedItem"
+    );
+  }
+  return context;
+}
+function useVideoVisibility({
+  elementRef,
+  activateThreshold = core.VIDEO_ACTIVATION.ACTIVATION_THRESHOLD,
+  deactivateThreshold = core.VIDEO_ACTIVATION.DEACTIVATION_THRESHOLD,
+  rootMargin = "0px",
+  onVisibilityChange
+}) {
+  const [isVisible, setIsVisible] = react.useState(false);
+  const [isActive, setIsActive] = react.useState(false);
+  const [visibilityRatio, setVisibilityRatio] = react.useState(0);
+  const observerRef = react.useRef(null);
+  react.useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+    }
+    const thresholds = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const ratio = entry.intersectionRatio;
+          setVisibilityRatio(ratio);
+          setIsVisible(ratio > 0);
+          if (ratio >= activateThreshold) {
+            setIsActive(true);
+          } else if (ratio < deactivateThreshold) {
+            setIsActive(false);
+          }
+          onVisibilityChange?.(ratio > 0, ratio);
+        });
+      },
+      {
+        threshold: thresholds,
+        rootMargin
+      }
+    );
+    observerRef.current.observe(element);
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [elementRef, activateThreshold, deactivateThreshold, rootMargin, onVisibilityChange]);
+  return {
+    isVisible,
+    isActive,
+    visibilityRatio
+  };
+}
+
+// src/hooks/useVideoActivation.ts
+function useVideoActivation({
+  containerRef,
+  videoRef,
+  isCurrentVideo = false,
+  onActivate,
+  onDeactivate,
+  autoActivate = true,
+  trackVisibility = false,
+  onVisibilityChange
+}) {
+  const wasActiveRef = react.useRef(false);
+  const {
+    isVisible: observerIsVisible,
+    isActive: observerIsActive,
+    visibilityRatio: observerRatio
+  } = useVideoVisibility({
+    elementRef: containerRef ?? { current: null },
+    onVisibilityChange: trackVisibility ? onVisibilityChange : void 0
+  });
+  const effectiveIsActive = trackVisibility ? observerIsActive : isCurrentVideo;
+  react.useEffect(() => {
+    if (!autoActivate) return;
+    if (effectiveIsActive && !wasActiveRef.current) {
+      wasActiveRef.current = true;
+      onActivate?.();
+    } else if (!effectiveIsActive && wasActiveRef.current) {
+      wasActiveRef.current = false;
+      onDeactivate?.();
+    }
+  }, [effectiveIsActive, onActivate, onDeactivate, autoActivate]);
+  const activate = react.useCallback(() => {
+    const video = videoRef.current;
+    if (video) {
+      video.play().catch(() => {
+        video.muted = true;
+        video.play().catch(() => {
+        });
+      });
+    }
+    onActivate?.();
+  }, [videoRef, onActivate]);
+  const deactivate = react.useCallback(() => {
+    const video = videoRef.current;
+    if (video) {
+      video.pause();
+      video.currentTime = 0;
+    }
+    onDeactivate?.();
+  }, [videoRef, onDeactivate]);
+  return {
+    isActive: effectiveIsActive,
+    // Only meaningful when trackVisibility is enabled
+    isVisible: trackVisibility ? observerIsVisible : isCurrentVideo,
+    visibilityRatio: trackVisibility ? observerRatio : isCurrentVideo ? 1 : 0,
+    activate,
+    deactivate
+  };
+}
+var MemoryManager = class {
+  entries = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  memoryWarningThreshold;
+  constructor() {
+    this.memoryWarningThreshold = core.MEMORY_CONFIG?.MAX_TOTAL_MEMORY ? core.MEMORY_CONFIG.MAX_TOTAL_MEMORY / (1024 * 1024) : 150;
+    this.setupMemoryPressureListener();
+  }
+  /**
+   * Register a video
+   */
+  register(videoId, estimatedSizeMB = 10) {
+    this.entries.set(videoId, {
+      videoId,
+      inDom: false,
+      hasDecodedFrames: false,
+      estimatedSizeMB,
+      lastAccessed: Date.now()
+    });
+    this.notifyListeners();
+  }
+  /**
+   * Unregister a video
+   */
+  unregister(videoId) {
+    this.entries.delete(videoId);
+    this.notifyListeners();
+  }
+  /**
+   * Mark video as in DOM
+   */
+  setInDom(videoId, inDom) {
+    const entry = this.entries.get(videoId);
+    if (entry) {
+      entry.inDom = inDom;
+      entry.lastAccessed = Date.now();
+      this.notifyListeners();
+    }
+  }
+  /**
+   * Mark video as having decoded frames
+   */
+  setHasDecodedFrames(videoId, hasFrames) {
+    const entry = this.entries.get(videoId);
+    if (entry) {
+      entry.hasDecodedFrames = hasFrames;
+      entry.lastAccessed = Date.now();
+      this.notifyListeners();
+    }
+  }
+  /**
+   * Get current memory state
+   */
+  getState() {
+    let videosInDom = 0;
+    let decodedVideos = 0;
+    let estimatedMemoryMB = 0;
+    this.entries.forEach((entry) => {
+      if (entry.inDom) videosInDom++;
+      if (entry.hasDecodedFrames) decodedVideos++;
+      estimatedMemoryMB += entry.estimatedSizeMB;
+    });
+    return {
+      videosInDom,
+      decodedVideos,
+      estimatedMemoryMB,
+      isLowMemory: estimatedMemoryMB > this.memoryWarningThreshold
+    };
+  }
+  /**
+   * Get videos that should be disposed (LRU)
+   */
+  getVideosToDispose() {
+    const state = this.getState();
+    const toDispose = [];
+    const maxInDom = core.MEMORY_CONFIG?.MAX_VIDEOS_IN_DOM ?? 5;
+    const maxDecoded = core.MEMORY_CONFIG?.MAX_DECODED_FRAMES ?? 3;
+    const sortedEntries = Array.from(this.entries.values()).sort(
+      (a, b) => a.lastAccessed - b.lastAccessed
+    );
+    if (state.videosInDom > maxInDom) {
+      const toRemove = state.videosInDom - maxInDom;
+      let removed = 0;
+      for (const entry of sortedEntries) {
+        if (removed >= toRemove) break;
+        if (entry.inDom) {
+          toDispose.push(entry.videoId);
+          removed++;
+        }
+      }
+    }
+    if (state.decodedVideos > maxDecoded) {
+      const toRemove = state.decodedVideos - maxDecoded;
+      let removed = 0;
+      for (const entry of sortedEntries) {
+        if (removed >= toRemove) break;
+        if (entry.hasDecodedFrames && !toDispose.includes(entry.videoId)) {
+          toDispose.push(entry.videoId);
+          removed++;
+        }
+      }
+    }
+    return toDispose;
+  }
+  /**
+   * Subscribe to memory state changes
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  /**
+   * Force cleanup
+   */
+  forceCleanup() {
+    const toDispose = this.getVideosToDispose();
+    toDispose.forEach((id) => this.unregister(id));
+    return toDispose;
+  }
+  notifyListeners() {
+    const state = this.getState();
+    this.listeners.forEach((listener) => listener(state));
+  }
+  setupMemoryPressureListener() {
+    if (typeof window === "undefined") return;
+    if ("memory" in performance) {
+      setInterval(() => {
+        const state = this.getState();
+        if (state.isLowMemory) {
+          console.warn("[MemoryManager] Low memory warning, forcing cleanup");
+          this.forceCleanup();
+        }
+      }, 5e3);
+    }
+  }
+};
+var memoryManager = new MemoryManager();
+
+// src/hooks/useMemoryManager.ts
+function useMemoryManager({
+  videoId,
+  estimatedSizeMB = 10,
+  onShouldDispose
+}) {
+  const [memoryState, setMemoryState] = react.useState(
+    () => memoryManager.getState()
+  );
+  const [shouldDispose, setShouldDispose] = react.useState(false);
+  react.useEffect(() => {
+    memoryManager.register(videoId, estimatedSizeMB);
+    return () => {
+      memoryManager.unregister(videoId);
+    };
+  }, [videoId, estimatedSizeMB]);
+  react.useEffect(() => {
+    const unsubscribe = memoryManager.subscribe((state) => {
+      setMemoryState(state);
+      const toDispose = memoryManager.getVideosToDispose();
+      const shouldDisposeThis = toDispose.includes(videoId);
+      if (shouldDisposeThis && !shouldDispose) {
+        setShouldDispose(true);
+        onShouldDispose?.();
+      } else if (!shouldDisposeThis && shouldDispose) {
+        setShouldDispose(false);
+      }
+    });
+    return unsubscribe;
+  }, [videoId, shouldDispose, onShouldDispose]);
+  const setInDom = react.useCallback(
+    (inDom) => {
+      memoryManager.setInDom(videoId, inDom);
+    },
+    [videoId]
+  );
+  const setHasDecodedFrames = react.useCallback(
+    (hasFrames) => {
+      memoryManager.setHasDecodedFrames(videoId, hasFrames);
+    },
+    [videoId]
+  );
+  return {
+    memoryState,
+    setInDom,
+    setHasDecodedFrames,
+    shouldDispose
+  };
+}
+function useGlobalMemoryState() {
+  const [state, setState] = react.useState(() => memoryManager.getState());
+  react.useEffect(() => {
+    const unsubscribe = memoryManager.subscribe(setState);
+    return unsubscribe;
+  }, []);
+  return state;
+}
+
+// src/components/VideoFeedItem/useVideoFeedItemState.ts
+function useVideoFeedItemState({
+  video,
+  isActive,
+  priority,
+  onLike,
+  onComment,
+  onShare,
+  onAuthorClick
+}) {
+  const containerRef = react.useRef(null);
+  const videoRef = react.useRef(null);
+  const wasPlayingBeforeSeekRef = react.useRef(false);
+  const [showPauseOverlay, setShowPauseOverlay] = react.useState(false);
+  const [timelineExpanded, setTimelineExpanded] = react.useState(false);
+  const [isPreloaded, setIsPreloaded] = react.useState(false);
+  const {
+    isShowing: showHeart,
+    position: heartPosition,
+    showHeart: triggerHeart
+  } = player.useDoubleTapHeart();
+  const preloadConfig = react.useMemo(
+    () => ({
+      maxConcurrent: 2,
+      maxBufferSize: 10 * 1024 * 1024,
+      priorityLevels: 10
+    }),
+    []
+  );
+  const handleNetworkChange = react.useCallback((_info) => {
+  }, []);
+  const handlePowerChange = react.useCallback((_info) => {
+  }, []);
+  const handleAnalyticsUpdate = react.useCallback(
+    (metrics) => {
+      if (metrics.startupTime && metrics.startupTime > 1e3) {
+        console.warn("[VideoFeedItem] Slow startup:", metrics.startupTime, "ms", video.id);
+      }
+    },
+    [video.id]
+  );
+  const { state } = player.usePlayer(videoRef, containerRef, {
+    preferNative: true,
+    enableSmoothTimeUpdates: true,
+    networkBehavior: "feed",
+    powerBehavior: "moderate",
+    preloadConfig,
+    enableAnalytics: true,
+    onPlay: () => {
+      setShowPauseOverlay(false);
+      setTimelineExpanded(false);
+    },
+    onPause: () => {
+      if (!videoRef.current?.seeking) {
+        setShowPauseOverlay(true);
+        setTimelineExpanded(true);
+      }
+    },
+    onNetworkChange: handleNetworkChange,
+    onPowerChange: handlePowerChange,
+    onAnalyticsUpdate: handleAnalyticsUpdate
+  });
+  const play = react.useCallback(async () => {
+    const videoEl = videoRef.current;
+    if (videoEl) {
+      videoEl.muted = true;
+      try {
+        await videoEl.play();
+      } catch (err) {
+        console.warn("[VideoFeedItem] Play failed:", err.message);
+      }
+    }
+  }, []);
+  const pause = react.useCallback(() => {
+    const videoEl = videoRef.current;
+    if (videoEl) {
+      videoEl.pause();
+    }
+  }, []);
+  const seek = react.useCallback((time) => {
+    const videoEl = videoRef.current;
+    if (videoEl) {
+      videoEl.currentTime = time;
+    }
+  }, []);
+  const [isPlaying, setIsPlaying] = react.useState(false);
+  react.useEffect(() => {
+    const videoEl = videoRef.current;
+    if (!videoEl) return;
+    const handlePlay = () => setIsPlaying(true);
+    const handlePause = () => setIsPlaying(false);
+    const handleEnded = () => setIsPlaying(false);
+    videoEl.addEventListener("play", handlePlay);
+    videoEl.addEventListener("pause", handlePause);
+    videoEl.addEventListener("ended", handleEnded);
+    setIsPlaying(!videoEl.paused);
+    return () => {
+      videoEl.removeEventListener("play", handlePlay);
+      videoEl.removeEventListener("pause", handlePause);
+      videoEl.removeEventListener("ended", handleEnded);
+    };
+  }, [video.id]);
+  const effectiveIsPlaying = isPlaying || state.state === "playing";
+  const { setInDom, setHasDecodedFrames, shouldDispose } = useMemoryManager({
+    videoId: video.id,
+    onShouldDispose: () => {
+      pause();
+      if (videoRef.current) {
+        videoRef.current.src = "";
+        videoRef.current.load();
+      }
+    }
+  });
+  const shouldRenderVideo = !shouldDispose && priority !== "none";
+  const pendingPlayRef = react.useRef(false);
+  useVideoActivation({
+    videoRef,
+    isCurrentVideo: isActive,
+    onActivate: () => {
+      console.log("[VideoFeedItem] onActivate called, videoRef:", videoRef.current?.src);
+      setHasDecodedFrames(true);
+      if (!videoRef.current) {
+        console.log("[VideoFeedItem] Video element not ready, marking pending play");
+        pendingPlayRef.current = true;
+      } else {
+        play();
+      }
+    },
+    onDeactivate: () => {
+      console.log("[VideoFeedItem] onDeactivate called");
+      pendingPlayRef.current = false;
+      setHasDecodedFrames(false);
+      pause();
+      seek(0);
+    },
+    autoActivate: true
+  });
+  react.useEffect(() => {
+    const videoEl = videoRef.current;
+    if (videoEl && pendingPlayRef.current && isActive) {
+      console.log("[VideoFeedItem] Video element now available, executing pending play");
+      pendingPlayRef.current = false;
+      play();
+    }
+  });
+  react.useEffect(() => {
+    setInDom(true);
+    return () => setInDom(false);
+  }, [setInDom]);
+  react.useEffect(() => {
+    const videoEl = videoRef.current;
+    if (!videoEl) return;
+    setIsPreloaded(false);
+    const handleLoadedData = () => {
+      console.log("[VideoFeedItem] Video loadeddata:", video.id, { isActive, priority });
+      if (priority === "high" && !isActive) {
+        requestAnimationFrame(() => {
+          if (videoEl.readyState >= 2) {
+            videoEl.currentTime = 0.01;
+            setIsPreloaded(true);
+            console.log("[VideoFeedItem] First frame decoded (preloaded):", video.id);
+          }
+        });
+      } else if (isActive) {
+        setIsPreloaded(true);
+      }
+    };
+    const handleCanPlay = () => {
+      if (priority === "high" && !isPreloaded) {
+        setIsPreloaded(true);
+      }
+    };
+    videoEl.addEventListener("loadeddata", handleLoadedData);
+    videoEl.addEventListener("canplay", handleCanPlay);
+    if (videoEl.readyState >= 2) {
+      handleLoadedData();
+    }
+    return () => {
+      videoEl.removeEventListener("loadeddata", handleLoadedData);
+      videoEl.removeEventListener("canplay", handleCanPlay);
+    };
+  }, [video.id, isActive, priority, isPreloaded]);
+  react.useEffect(() => {
+    console.log("[VideoFeedItem] State:", {
+      videoId: video.id,
+      isActive,
+      priority,
+      shouldRenderVideo,
+      hasVideoElement: !!videoRef.current,
+      videoSrc: videoRef.current?.src
+    });
+  }, [video.id, isActive, priority, shouldRenderVideo]);
+  const preload = react.useMemo(() => {
+    switch (priority) {
+      case "high":
+        return "auto";
+      case "medium":
+        return "metadata";
+      case "low":
+      case "metadata":
+        return "none";
+      default:
+        return "none";
+    }
+  }, [priority]);
+  const handleSeekStart = react.useCallback(() => {
+    wasPlayingBeforeSeekRef.current = effectiveIsPlaying;
+    setTimelineExpanded(true);
+    setShowPauseOverlay(false);
+    pause();
+  }, [effectiveIsPlaying, pause]);
+  const handleSeekEnd = react.useCallback(
+    (time) => {
+      seek(time);
+      if (wasPlayingBeforeSeekRef.current) {
+        play();
+        setTimelineExpanded(false);
+      } else {
+        setShowPauseOverlay(true);
+      }
+    },
+    [seek, play]
+  );
+  const handleSingleTap = react.useCallback(() => {
+    if (effectiveIsPlaying) {
+      pause();
+    } else {
+      play();
+    }
+  }, [effectiveIsPlaying, play, pause]);
+  const handleDoubleTap = react.useCallback(
+    (_zone, position) => {
+      triggerHeart(position.x, position.y);
+      onLike?.();
+    },
+    [triggerHeart, onLike]
+  );
+  const handleLongPress = react.useCallback(() => {
+  }, []);
+  const gestureBindings = gestures.useVideoGestures({
+    onSingleTap: handleSingleTap,
+    onDoubleTap: handleDoubleTap,
+    onLongPress: handleLongPress
+  });
+  return {
+    video,
+    isActive,
+    shouldRenderVideo,
+    preload,
+    isPreloaded,
+    containerRef,
+    videoRef,
+    isPlaying: effectiveIsPlaying,
+    showPauseOverlay,
+    timelineExpanded,
+    play,
+    pause,
+    seek,
+    setShowPauseOverlay,
+    setTimelineExpanded,
+    gestureBindings,
+    showHeart,
+    heartPosition,
+    triggerHeart,
+    onLike,
+    onComment,
+    onShare,
+    onAuthorClick,
+    handleSeekStart,
+    handleSeekEnd
+  };
+}
+var VideoFeedItemPlayer = react.forwardRef(
+  ({ placeholder, ...props }, ref) => {
+    const { video, videoRef, shouldRenderVideo, preload, isPreloaded } = useVideoFeedItemContext();
+    if (!shouldRenderVideo) {
+      return placeholder ?? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ...props,
+          style: {
+            ...videoFeedItemStyles.placeholder,
+            backgroundImage: `url(${video.thumbnail})`,
+            ...props.style
+          }
+        }
+      );
+    }
+    const showPoster = !isPreloaded;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "video",
+      {
+        ref: (node) => {
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+          videoRef.current = node;
+        },
+        src: video.url,
+        poster: showPoster ? video.thumbnail : void 0,
+        preload,
+        loop: true,
+        playsInline: true,
+        muted: true,
+        style: videoFeedItemStyles.video
+      }
+    );
+  }
+);
+VideoFeedItemPlayer.displayName = "VideoFeedItemPlayer";
+var VideoFeedItemActions = react.forwardRef(
+  ({ onLike: onLikeProp, onComment: onCommentProp, onShare: onShareProp, ...props }, ref) => {
+    const {
+      video,
+      onLike: contextOnLike,
+      onComment: contextOnComment,
+      onShare: contextOnShare
+    } = useVideoFeedItemContext();
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      player.ActionBar,
+      {
+        avatarUrl: video.author.avatar,
+        likeCount: video.stats.likes,
+        commentCount: video.stats.comments,
+        shareCount: video.stats.shares,
+        isLiked: video.isLiked,
+        onLike: onLikeProp ?? contextOnLike,
+        onComment: onCommentProp ?? contextOnComment,
+        onShare: onShareProp ?? contextOnShare
+      }
+    ) });
+  }
+);
+VideoFeedItemActions.displayName = "VideoFeedItemActions";
+var VideoFeedItemTimeline = react.forwardRef(
+  ({ expanded: expandedProp, ...props }, ref) => {
+    const {
+      videoRef,
+      shouldRenderVideo,
+      timelineExpanded,
+      setTimelineExpanded,
+      handleSeekStart,
+      handleSeekEnd
+    } = useVideoFeedItemContext();
+    if (!shouldRenderVideo) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      player.Timeline,
+      {
+        videoRef,
+        expanded: expandedProp ?? timelineExpanded,
+        onSeekStart: handleSeekStart,
+        onSeekEnd: handleSeekEnd,
+        onExpandedChange: setTimelineExpanded
+      }
+    ) });
+  }
+);
+VideoFeedItemTimeline.displayName = "VideoFeedItemTimeline";
+var overlayStyles = {
+  container: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 64,
+    // Space for ActionBar (48px + 16px spacing)
+    padding: core.spacing[4],
+    paddingBottom: "env(safe-area-inset-bottom, 16px)",
+    zIndex: core.zIndices.base
+  },
+  containerWithTimeline: {
+    paddingBottom: "calc(env(safe-area-inset-bottom, 16px) + 48px)"
+  },
+  authorButton: {
+    gap: core.spacing[2],
+    marginBottom: core.spacing[3]},
+  avatar: {
+    borderRadius: core.radii.full,
+    border: `2px solid ${core.colors.text}`},
+  username: {
+    color: core.colors.text,
+    fontWeight: core.fontWeights.semibold,
+    fontSize: core.fontSizes.sm,
+    textShadow: core.shadows.text
+  },
+  caption: {
+    color: core.colors.text,
+    fontSize: core.fontSizes.sm,
+    lineHeight: 1.4,
+    textShadow: core.shadows.text,
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    paddingBottom: core.spacing[1]
+  },
+  author: {
+    color: core.colors.text,
+    fontSize: core.fontSizes.sm,
+    fontWeight: core.fontWeights.semibold,
+    textShadow: core.shadows.text,
+    display: "-webkit-box",
+    WebkitLineClamp: 1,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    paddingBottom: core.spacing[1]
+  },
+  hashtags: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: core.spacing[1],
+    marginTop: core.spacing[2],
+    paddingBottom: core.spacing[1]
+  },
+  hashtag: {
+    color: core.colors.accent,
+    fontSize: core.fontSizes.sm,
+    fontWeight: core.fontWeights.medium,
+    textShadow: core.shadows.text
+  }
+};
+function VideoOverlay({
+  video,
+  timelineExpanded = false,
+  style,
+  className = ""
+}) {
+  const containerStyles = core.mergeStyles(
+    overlayStyles.container,
+    timelineExpanded && overlayStyles.containerWithTimeline,
+    style
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyles, className, children: [
+    video.author && /* @__PURE__ */ jsxRuntime.jsx("p", { style: overlayStyles.author, children: video.author.displayName }),
+    video.caption && /* @__PURE__ */ jsxRuntime.jsx("p", { style: overlayStyles.caption, children: video.caption }),
+    video.hashtags && video.hashtags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: overlayStyles.hashtags, children: video.hashtags.slice(0, 3).map((tag, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { style: overlayStyles.hashtag, children: [
+      "#",
+      tag
+    ] }, i)) })
+  ] });
+}
+var VideoFeedItemOverlay = react.forwardRef(
+  ({
+    showPlayPause = true,
+    showDoubleTapHeart = true,
+    showVideoInfo = true,
+    ...props
+  }, ref) => {
+    const {
+      video,
+      isPlaying,
+      showPauseOverlay,
+      timelineExpanded,
+      showHeart,
+      heartPosition,
+      onAuthorClick
+    } = useVideoFeedItemContext();
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, ...props, children: [
+      showPlayPause && /* @__PURE__ */ jsxRuntime.jsx(
+        player.PlayPauseOverlay,
+        {
+          isPlaying,
+          show: showPauseOverlay,
+          size: 64,
+          autoHideDelay: 800,
+          showOnStateChange: false
+        }
+      ),
+      showDoubleTapHeart && /* @__PURE__ */ jsxRuntime.jsx(
+        player.DoubleTapHeart,
+        {
+          show: showHeart,
+          position: heartPosition,
+          size: 100,
+          showParticles: true,
+          particleCount: 8
+        }
+      ),
+      showVideoInfo && /* @__PURE__ */ jsxRuntime.jsx(
+        VideoOverlay,
+        {
+          video,
+          onAuthorClick,
+          timelineExpanded
+        }
+      )
+    ] });
+  }
+);
+VideoFeedItemOverlay.displayName = "VideoFeedItemOverlay";
+var VideoFeedItem = react.forwardRef(
+  ({
+    video,
+    isActive = false,
+    priority = "none",
+    showTimeline = true,
+    onLike,
+    onComment,
+    onShare,
+    onAuthorClick,
+    style,
+    className = "",
+    children
+  }, ref) => {
+    const state = useVideoFeedItemState({
+      video,
+      isActive,
+      priority,
+      onLike,
+      onComment,
+      onShare,
+      onAuthorClick
+    });
+    const content = children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(VideoFeedItemPlayer, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(VideoFeedItemOverlay, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(VideoFeedItemActions, {}),
+      showTimeline && /* @__PURE__ */ jsxRuntime.jsx(VideoFeedItemTimeline, {})
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(VideoFeedItemContext.Provider, { value: state, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: (node) => {
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+          state.containerRef.current = node;
+        },
+        style: core.mergeStyles(videoFeedItemStyles.container, style),
+        className,
+        ...state.gestureBindings(),
+        children: content
+      }
+    ) });
+  }
+);
+VideoFeedItem.displayName = "VideoFeedItem";
+function getPreloadPriorityForFeed(index, currentIndex) {
+  const distance = Math.abs(index - currentIndex);
+  if (distance === 0) return 1;
+  if (distance === 1) return 3;
+  if (distance === 2) return 5;
+  if (distance === 3) return 7;
+  return 10;
+}
+function mapPriorityToNumeric(priority) {
+  switch (priority) {
+    case "high":
+      return 1;
+    case "medium":
+      return 3;
+    case "low":
+      return 5;
+    case "metadata":
+      return 7;
+    default:
+      return 10;
+  }
+}
+function getPreloadPriority(index, currentIndex) {
+  const distance = index - currentIndex;
+  if (distance === 0) return "high";
+  if (distance === -1) return "high";
+  if (distance === 1) return "high";
+  if (distance === 2) return "medium";
+  if (distance === 3) return "low";
+  if (Math.abs(distance) <= 5) return "metadata";
+  return "none";
+}
+var SPRING_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+var DEFAULT_DURATION = 300;
+var DEFAULT_VIEWPORT_HEIGHT = 800;
+var TRANSITION_END_BUFFER = 50;
+function useSwipeAnimation({
+  trackRef,
+  transitionDuration = DEFAULT_DURATION,
+  easing = SPRING_EASING,
+  onTransitionEnd
+}) {
+  const viewportHeightRef = react.useRef(
+    typeof window !== "undefined" ? window.innerHeight : DEFAULT_VIEWPORT_HEIGHT
+  );
+  const currentYRef = react.useRef(0);
+  const rafIdRef = react.useRef(null);
+  const isAnimatingRef = react.useRef(false);
+  const isMountedRef = react.useRef(true);
+  react.useEffect(() => {
+    const handleResize = () => {
+      viewportHeightRef.current = window.innerHeight;
+    };
+    const handleOrientationChange = () => {
+      setTimeout(() => {
+        viewportHeightRef.current = window.innerHeight;
+      }, 100);
+    };
+    window.addEventListener("resize", handleResize, { passive: true });
+    window.addEventListener("orientationchange", handleOrientationChange, { passive: true });
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("orientationchange", handleOrientationChange);
+    };
+  }, []);
+  const setTranslateY = react.useCallback((y) => {
+    currentYRef.current = y;
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+    }
+    rafIdRef.current = requestAnimationFrame(() => {
+      const track = trackRef.current;
+      if (track) {
+        track.style.transition = "none";
+        track.style.transform = `translateY(${y}px)`;
+      }
+      rafIdRef.current = null;
+    });
+  }, [trackRef]);
+  const animateTo = react.useCallback((targetY) => {
+    return new Promise((resolve) => {
+      const track = trackRef.current;
+      if (!track || !isMountedRef.current) {
+        resolve();
+        return;
+      }
+      if (isAnimatingRef.current) {
+        resolve();
+        return;
+      }
+      isAnimatingRef.current = true;
+      currentYRef.current = targetY;
+      let cleanup = null;
+      let fallbackTimeout = null;
+      const handleTransitionEnd = (e) => {
+        if (e.propertyName !== "transform") return;
+        cleanup?.();
+        if (isMountedRef.current) {
+          isAnimatingRef.current = false;
+          onTransitionEnd?.();
+        }
+        resolve();
+      };
+      cleanup = () => {
+        track.removeEventListener("transitionend", handleTransitionEnd);
+        if (fallbackTimeout) {
+          clearTimeout(fallbackTimeout);
+          fallbackTimeout = null;
+        }
+      };
+      track.addEventListener("transitionend", handleTransitionEnd);
+      fallbackTimeout = setTimeout(() => {
+        cleanup?.();
+        if (isMountedRef.current && isAnimatingRef.current) {
+          isAnimatingRef.current = false;
+          onTransitionEnd?.();
+        }
+        resolve();
+      }, transitionDuration + TRANSITION_END_BUFFER);
+      track.offsetHeight;
+      track.style.transition = `transform ${transitionDuration}ms ${easing}`;
+      track.style.transform = `translateY(${targetY}px)`;
+    });
+  }, [trackRef, transitionDuration, easing, onTransitionEnd]);
+  const snapBack = react.useCallback(() => {
+    return animateTo(0);
+  }, [animateTo]);
+  const getCurrentY = react.useCallback(() => {
+    return currentYRef.current;
+  }, []);
+  react.useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+    };
+  }, []);
+  return {
+    setTranslateY,
+    animateTo,
+    snapBack,
+    getCurrentY,
+    viewportHeight: viewportHeightRef.current,
+    isAnimating: isAnimatingRef.current
+  };
+}
+var DEFAULT_TRANSITION_DURATION = 300;
+var DEFAULT_SWIPE_THRESHOLD = 50;
+var DEFAULT_VELOCITY_THRESHOLD = 0.3;
+var SPRING_EASING2 = "cubic-bezier(0.32, 0.72, 0, 1)";
+var feedStyles = {
+  container: {
+    position: "fixed",
+    inset: 0,
+    overflow: "hidden",
+    backgroundColor: core.colors.background,
+    touchAction: "none",
+    // Prevent browser gestures, @use-gesture handles all
+    userSelect: "none",
+    WebkitUserSelect: "none"
+  },
+  track: {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    willChange: "transform"
+  },
+  slide: {
+    position: "absolute",
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backfaceVisibility: "hidden",
+    WebkitBackfaceVisibility: "hidden"
+  },
+  loadingIndicator: {
+    position: "absolute",
+    bottom: 80,
+    left: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center",
+    zIndex: core.zIndices.base,
+    pointerEvents: "none"
+  },
+  spinner: {
+    width: 24,
+    height: 24,
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderColor: "rgba(255, 255, 255, 0.3)",
+    borderTopColor: core.colors.text,
+    borderRadius: core.radii.full,
+    animation: "xhub-reel-spin 1s linear infinite"
+  }
+};
+var VideoFeed = react.forwardRef(
+  ({
+    videos,
+    initialIndex = 0,
+    onLoadMore,
+    onVideoChange,
+    onLike,
+    onComment,
+    onShare,
+    onAuthorClick,
+    isLoading = false,
+    hasMore = false,
+    loadMoreThreshold = 3,
+    transitionDuration = DEFAULT_TRANSITION_DURATION,
+    swipeThreshold = DEFAULT_SWIPE_THRESHOLD,
+    velocityThreshold = DEFAULT_VELOCITY_THRESHOLD,
+    gesturesDisabled = false,
+    hapticEnabled = true,
+    style,
+    className = ""
+  }, ref) => {
+    const [currentIndex, setCurrentIndex] = react.useState(
+      () => Math.min(Math.max(0, initialIndex), Math.max(0, videos.length - 1))
+    );
+    const [isLocked, setIsLocked] = react.useState(false);
+    const [isAnimating, setIsAnimating] = react.useState(false);
+    const containerRef = react.useRef(null);
+    const trackRef = react.useRef(null);
+    const videosRef = react.useRef(videos);
+    const currentIndexRef = react.useRef(currentIndex);
+    const isLoadingRef = react.useRef(isLoading);
+    const hasMoreRef = react.useRef(hasMore);
+    const isLockedRef = react.useRef(isLocked);
+    const { setCurrentIndex: storeSetCurrentIndex } = core.useFeedStore();
+    const {
+      setTranslateY,
+      // Direct DOM manipulation, RAF batched
+      animateTo,
+      // CSS transition with transitionend
+      snapBack,
+      // Animate back to 0
+      viewportHeight
+      // Cached, no layout thrashing
+    } = useSwipeAnimation({ trackRef, transitionDuration, easing: SPRING_EASING2 });
+    react.useEffect(() => {
+      videosRef.current = videos;
+    }, [videos]);
+    react.useEffect(() => {
+      currentIndexRef.current = currentIndex;
+    }, [currentIndex]);
+    react.useEffect(() => {
+      isLoadingRef.current = isLoading;
+    }, [isLoading]);
+    react.useEffect(() => {
+      hasMoreRef.current = hasMore;
+    }, [hasMore]);
+    react.useEffect(() => {
+      isLockedRef.current = isLocked;
+    }, [isLocked]);
+    react.useEffect(() => {
+      if (videos.length === 0) {
+        setCurrentIndex(0);
+        return;
+      }
+      if (currentIndex >= videos.length) {
+        const newIndex = videos.length - 1;
+        const video = videos[newIndex];
+        setCurrentIndex(newIndex);
+        storeSetCurrentIndex(newIndex);
+        if (video) {
+          onVideoChange?.(video, newIndex);
+        }
+      }
+    }, [videos.length, currentIndex, storeSetCurrentIndex, onVideoChange, videos]);
+    const getVideoPriority = react.useCallback((index) => {
+      return getPreloadPriority(index, currentIndex);
+    }, [currentIndex]);
+    const checkLoadMore = react.useCallback((index) => {
+      const vids = videosRef.current;
+      if (hasMoreRef.current && !isLoadingRef.current && vids.length - index <= loadMoreThreshold) {
+        onLoadMore?.();
+      }
+    }, [loadMoreThreshold, onLoadMore]);
+    const slideTo = react.useCallback(async (index, animated = true) => {
+      if (isLockedRef.current) return;
+      const vids = videosRef.current;
+      const clampedIndex = Math.max(0, Math.min(index, vids.length - 1));
+      const currentIdx = currentIndexRef.current;
+      if (clampedIndex === currentIdx) {
+        setTranslateY(0);
+        return;
+      }
+      const direction = clampedIndex > currentIdx ? -1 : 1;
+      if (animated) {
+        setIsLocked(true);
+        setIsAnimating(true);
+        await animateTo(direction * viewportHeight);
+        setCurrentIndex(clampedIndex);
+        storeSetCurrentIndex(clampedIndex);
+        setTranslateY(0);
+        const video = vids[clampedIndex];
+        if (video) {
+          onVideoChange?.(video, clampedIndex);
+        }
+        checkLoadMore(clampedIndex);
+        setIsAnimating(false);
+        setIsLocked(false);
+      } else {
+        setCurrentIndex(clampedIndex);
+        storeSetCurrentIndex(clampedIndex);
+        setTranslateY(0);
+        const video = vids[clampedIndex];
+        if (video) {
+          onVideoChange?.(video, clampedIndex);
+          checkLoadMore(clampedIndex);
+        }
+      }
+    }, [viewportHeight, animateTo, setTranslateY, storeSetCurrentIndex, onVideoChange, checkLoadMore]);
+    const slideNext = react.useCallback((animated = true) => {
+      const vids = videosRef.current;
+      const idx = currentIndexRef.current;
+      if (idx < vids.length - 1) {
+        slideTo(idx + 1, animated);
+      }
+    }, [slideTo]);
+    const slidePrev = react.useCallback((animated = true) => {
+      const idx = currentIndexRef.current;
+      if (idx > 0) {
+        slideTo(idx - 1, animated);
+      }
+    }, [slideTo]);
+    const handleSwipeProgress = react.useCallback(
+      (_progress, direction, movement) => {
+        const vids = videosRef.current;
+        const idx = currentIndexRef.current;
+        const canGoUp = idx > 0;
+        const canGoDown = idx < vids.length - 1;
+        let delta = movement;
+        const atBoundary = direction === "down" && !canGoUp || direction === "up" && !canGoDown;
+        if (atBoundary) {
+          delta *= 0.3;
+        }
+        setTranslateY(delta);
+      },
+      [setTranslateY]
+    );
+    const handleSwipeUp = react.useCallback(async () => {
+      const vids = videosRef.current;
+      const idx = currentIndexRef.current;
+      const canGoDown = idx < vids.length - 1;
+      if (!canGoDown) {
+        await snapBack();
+        return;
+      }
+      setIsLocked(true);
+      setIsAnimating(true);
+      await animateTo(-viewportHeight);
+      const newIndex = currentIndexRef.current + 1;
+      const newVids = videosRef.current;
+      if (newIndex < newVids.length) {
+        setCurrentIndex(newIndex);
+        storeSetCurrentIndex(newIndex);
+        const video = newVids[newIndex];
+        if (video) {
+          onVideoChange?.(video, newIndex);
+        }
+        checkLoadMore(newIndex);
+      }
+      setTranslateY(0);
+      setIsAnimating(false);
+      setIsLocked(false);
+    }, [viewportHeight, animateTo, snapBack, setTranslateY, storeSetCurrentIndex, onVideoChange, checkLoadMore]);
+    const handleSwipeDown = react.useCallback(async () => {
+      const idx = currentIndexRef.current;
+      const canGoUp = idx > 0;
+      if (!canGoUp) {
+        await snapBack();
+        return;
+      }
+      setIsLocked(true);
+      setIsAnimating(true);
+      await animateTo(viewportHeight);
+      const newIndex = currentIndexRef.current - 1;
+      if (newIndex >= 0) {
+        setCurrentIndex(newIndex);
+        storeSetCurrentIndex(newIndex);
+        const video = videosRef.current[newIndex];
+        if (video) {
+          onVideoChange?.(video, newIndex);
+        }
+      }
+      setTranslateY(0);
+      setIsAnimating(false);
+      setIsLocked(false);
+    }, [viewportHeight, animateTo, snapBack, setTranslateY, storeSetCurrentIndex, onVideoChange]);
+    const handleSwipeCancel = react.useCallback(async () => {
+      await snapBack();
+    }, [snapBack]);
+    const { bind: swipeBind } = gestures.useVerticalSwipe({
+      onSwipeUp: handleSwipeUp,
+      onSwipeDown: handleSwipeDown,
+      onSwipeProgress: handleSwipeProgress,
+      onSwipeCancel: handleSwipeCancel,
+      threshold: swipeThreshold / viewportHeight,
+      // Convert px to percentage
+      velocityThreshold,
+      hapticEnabled,
+      disabled: gesturesDisabled || isLocked,
+      enableProgressState: false
+      // Disable for maximum performance
+    });
+    react.useImperativeHandle(ref, () => ({
+      slideTo,
+      slideNext,
+      slidePrev,
+      get activeIndex() {
+        return currentIndexRef.current;
+      },
+      get totalSlides() {
+        return videosRef.current.length;
+      },
+      get isBeginning() {
+        return currentIndexRef.current === 0;
+      },
+      get isEnd() {
+        return currentIndexRef.current === videosRef.current.length - 1;
+      }
+    }));
+    react.useEffect(() => {
+      const video = videos[currentIndex];
+      if (video) {
+        onVideoChange?.(video, currentIndex);
+      }
+    }, []);
+    const slides = [];
+    if (currentIndex > 0) {
+      slides.push({ index: currentIndex - 1, position: -1 });
+    }
+    slides.push({ index: currentIndex, position: 0 });
+    if (currentIndex < videos.length - 1) {
+      slides.push({ index: currentIndex + 1, position: 1 });
+    }
+    if (videos.length === 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: containerRef,
+          style: core.mergeStyles(feedStyles.container, style),
+          className,
+          "data-xhub-reel-feed": true,
+          children: isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...feedStyles.loadingIndicator, top: "50%", bottom: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: feedStyles.spinner }) })
+        }
+      );
+    }
+    const trackStyle = {
+      ...feedStyles.track
+      // transform and transition are now managed via trackRef.current.style
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: containerRef,
+        ...swipeBind(),
+        style: core.mergeStyles(feedStyles.container, style),
+        className,
+        "data-xhub-reel-feed": true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes xhub-reel-spin {
+            to { transform: rotate(360deg); }
+          }
+        ` }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: trackRef, style: trackStyle, children: slides.map(({ index, position }) => {
+            const video = videos[index];
+            if (!video) return null;
+            const priority = getVideoPriority(index);
+            const isActive = index === currentIndex && !isAnimating;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-index": index,
+                style: {
+                  ...feedStyles.slide,
+                  top: position * viewportHeight
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  VideoFeedItem,
+                  {
+                    video,
+                    isActive,
+                    priority,
+                    onLike: () => onLike?.(video),
+                    onComment: () => onComment?.(video),
+                    onShare: () => onShare?.(video),
+                    onAuthorClick: () => onAuthorClick?.(video)
+                  }
+                )
+              },
+              video.id
+            );
+          }) }),
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: feedStyles.loadingIndicator, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: feedStyles.spinner }) })
+        ]
+      }
+    );
+  }
+);
+VideoFeed.displayName = "VideoFeed";
+function useVideoFeed(options = {}) {
+  const {
+    config,
+    enabled = true,
+    initialVideos = [],
+    staleTime = 1e3 * 60 * 5,
+    // 5 minutes
+    refetchOnWindowFocus = false,
+    onSuccess,
+    onError,
+    userId,
+    tag,
+    searchQuery,
+    limit = 10,
+    cursor
+  } = options;
+  void reactQuery.useQueryClient();
+  const apiClientRef = react.useRef(null);
+  const configKey = react.useMemo(() => {
+    if (!config) return null;
+    return JSON.stringify({
+      baseUrl: config.baseUrl,
+      apiKey: config.apiKey,
+      auth: config.auth?.accessToken,
+      endpoints: config.endpoints
+    });
+  }, [config]);
+  react.useEffect(() => {
+    if (config && configKey) {
+      apiClientRef.current = api.createXHubReelApiClient(config);
+    } else {
+      apiClientRef.current = null;
+    }
+  }, [configKey]);
+  const fetchParams = react.useMemo(
+    () => ({
+      userId,
+      tag,
+      searchQuery,
+      limit,
+      cursor
+    }),
+    [userId, tag, searchQuery, limit, cursor]
+  );
+  const queryKey = react.useMemo(
+    () => api.queryKeys.videos.list(fetchParams),
+    [fetchParams]
+  );
+  const fetchVideos = react.useCallback(
+    async ({ pageParam }) => {
+      if (!apiClientRef.current) {
+        throw new Error("[XHubReel] API client not initialized. Provide config to useVideoFeed.");
+      }
+      return apiClientRef.current.fetchVideos({
+        ...fetchParams,
+        cursor: pageParam
+      });
+    },
+    [fetchParams]
+  );
+  const {
+    data,
+    isLoading,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage: tanstackFetchNextPage,
+    refetch: tanstackRefetch,
+    error
+  } = reactQuery.useInfiniteQuery({
+    queryKey,
+    queryFn: fetchVideos,
+    getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.nextCursor : void 0,
+    initialPageParam: void 0,
+    enabled: enabled && !!config,
+    staleTime,
+    refetchOnWindowFocus
+  });
+  react.useEffect(() => {
+    if (data && onSuccess) {
+      const allVideos = data.pages.flatMap((page) => page.videos);
+      onSuccess(allVideos);
+    }
+  }, [data, onSuccess]);
+  react.useEffect(() => {
+    if (error && onError) {
+      onError(error);
+    }
+  }, [error, onError]);
+  const videos = react.useMemo(() => {
+    if (!data) {
+      return initialVideos;
+    }
+    return data.pages.flatMap((page) => page.videos);
+  }, [data, initialVideos]);
+  const totalCount = react.useMemo(() => {
+    if (!data || data.pages.length === 0) return void 0;
+    const firstPage = data.pages[0];
+    return firstPage?.total;
+  }, [data]);
+  const fetchNextPage = react.useCallback(async () => {
+    if (!hasNextPage || isFetchingNextPage) return;
+    try {
+      await tanstackFetchNextPage();
+    } catch (err) {
+      console.error("[XHubReel] Error fetching next page:", err);
+      onError?.(err);
+    }
+  }, [hasNextPage, isFetchingNextPage, tanstackFetchNextPage, onError]);
+  const refetch = react.useCallback(async () => {
+    try {
+      await tanstackRefetch();
+    } catch (err) {
+      console.error("[XHubReel] Error refetching:", err);
+      onError?.(err);
+    }
+  }, [tanstackRefetch, onError]);
+  return {
+    videos,
+    isLoading: isLoading && !!config,
+    isFetchingMore: isFetchingNextPage,
+    hasMore: hasNextPage ?? false,
+    fetchNextPage,
+    refetch,
+    error: error ?? null,
+    isApiMode: !!config,
+    totalCount
+  };
+}
+async function prefetchVideoFeed(queryClient, config, params = {}) {
+  const client = api.createXHubReelApiClient(config);
+  await queryClient.prefetchInfiniteQuery({
+    queryKey: api.queryKeys.videos.list(params),
+    queryFn: ({ pageParam }) => client.fetchVideos({ ...params, cursor: pageParam }),
+    initialPageParam: void 0
+  });
+}
+var stateStyles = {
+  container: {
+    position: "fixed",
+    inset: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: core.colors.background,
+    color: core.colors.text,
+    gap: core.spacing[4]
+  },
+  spinner: {
+    width: 40,
+    height: 40,
+    borderWidth: 3,
+    borderStyle: "solid",
+    borderColor: "rgba(255, 255, 255, 0.2)",
+    borderTopColor: core.colors.accent,
+    borderRadius: core.radii.full,
+    animation: "xhub-reel-spin 1s linear infinite"
+  },
+  text: {
+    fontSize: core.fontSizes.md,
+    color: core.colors.textSecondary,
+    textAlign: "center",
+    maxWidth: 280,
+    lineHeight: 1.5
+  },
+  button: {
+    padding: `${core.spacing[3]}px ${core.spacing[6]}px`,
+    backgroundColor: core.colors.accent,
+    color: core.colors.text,
+    border: "none",
+    borderRadius: core.radii.md,
+    fontSize: core.fontSizes.sm,
+    fontWeight: core.fontWeights.semibold,
+    cursor: "pointer"
+  },
+  errorIcon: {
+    fontSize: 48,
+    marginBottom: core.spacing[2]
+  }
+};
+var DefaultLoading = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: stateStyles.container, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+      @keyframes xhub-reel-spin {
+        to { transform: rotate(360deg); }
+      }
+    ` }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { style: stateStyles.spinner }),
+  /* @__PURE__ */ jsxRuntime.jsx("p", { style: stateStyles.text, children: "\u0110ang t\u1EA3i video..." })
+] });
+var DefaultError = ({ error, retry }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: stateStyles.container, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { style: stateStyles.errorIcon, children: "\u{1F615}" }),
+  /* @__PURE__ */ jsxRuntime.jsx("p", { style: stateStyles.text, children: error.message || "C\xF3 l\u1ED7i x\u1EA3y ra khi t\u1EA3i video" }),
+  /* @__PURE__ */ jsxRuntime.jsx("button", { style: stateStyles.button, onClick: retry, children: "Th\u1EED l\u1EA1i" })
+] });
+var DefaultEmpty = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: stateStyles.container, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { style: stateStyles.errorIcon, children: "\u{1F4ED}" }),
+  /* @__PURE__ */ jsxRuntime.jsx("p", { style: stateStyles.text, children: "Kh\xF4ng c\xF3 video n\xE0o \u0111\u1EC3 hi\u1EC3n th\u1ECB" })
+] });
+var ConnectedVideoFeed = react.forwardRef(
+  ({
+    config: configProp,
+    userId,
+    tag,
+    searchQuery,
+    pageSize = 10,
+    initialVideos,
+    onFetchSuccess,
+    onFetchError,
+    renderLoading = () => /* @__PURE__ */ jsxRuntime.jsx(DefaultLoading, {}),
+    renderError = (error, retry) => /* @__PURE__ */ jsxRuntime.jsx(DefaultError, { error, retry }),
+    renderEmpty = () => /* @__PURE__ */ jsxRuntime.jsx(DefaultEmpty, {}),
+    // Pass through VideoFeed props
+    onVideoChange,
+    onLike,
+    onComment,
+    onShare,
+    onAuthorClick,
+    ...videoFeedProps
+  }, ref) => {
+    const { config: contextConfig } = api.useXHubReelConfig();
+    const config = configProp || contextConfig;
+    const {
+      videos,
+      isLoading,
+      isFetchingMore,
+      hasMore,
+      fetchNextPage,
+      refetch,
+      error
+    } = useVideoFeed({
+      config: config || void 0,
+      userId,
+      tag,
+      searchQuery,
+      limit: pageSize,
+      initialVideos,
+      onSuccess: onFetchSuccess,
+      onError: onFetchError
+    });
+    const handleLoadMore = react.useCallback(async () => {
+      await fetchNextPage();
+    }, [fetchNextPage]);
+    const handleRetry = react.useCallback(() => {
+      refetch();
+    }, [refetch]);
+    if (!config) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: stateStyles.container, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: stateStyles.errorIcon, children: "\u26A0\uFE0F" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: stateStyles.text, children: "Ch\u01B0a c\u1EA5u h\xECnh API. Vui l\xF2ng wrap component trong XHubReelProvider v\u1EDBi config ho\u1EB7c truy\u1EC1n config prop." })
+      ] });
+    }
+    if (isLoading && videos.length === 0) {
+      return renderLoading();
+    }
+    if (error && videos.length === 0) {
+      return renderError(error, handleRetry);
+    }
+    if (!isLoading && videos.length === 0) {
+      return renderEmpty();
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      VideoFeed,
+      {
+        ref,
+        videos,
+        isLoading: isFetchingMore,
+        hasMore,
+        onLoadMore: handleLoadMore,
+        onVideoChange,
+        onLike,
+        onComment,
+        onShare,
+        onAuthorClick,
+        ...videoFeedProps
+      }
+    );
+  }
+);
+ConnectedVideoFeed.displayName = "ConnectedVideoFeed";
+function useFeedScroll({
+  scrollRef,
+  itemCount,
+  itemHeight,
+  onScrollChange,
+  onIndexChange
+}) {
+  const [currentIndex, setCurrentIndex] = react.useState(0);
+  const [scrollVelocity, setScrollVelocity] = react.useState(0);
+  const [isScrolling, setIsScrolling] = react.useState(false);
+  const lastScrollTopRef = react.useRef(0);
+  const lastScrollTimeRef = react.useRef(Date.now());
+  const scrollTimeoutRef = react.useRef(null);
+  const getItemHeight = react.useCallback(() => {
+    if (itemHeight) return itemHeight;
+    if (typeof window !== "undefined") return window.innerHeight;
+    return 800;
+  }, [itemHeight]);
+  const scrollToIndex = react.useCallback(
+    (index, smooth = true) => {
+      const element = scrollRef.current;
+      if (!element) return;
+      const clampedIndex = Math.max(0, Math.min(index, itemCount - 1));
+      const top = clampedIndex * getItemHeight();
+      element.scrollTo({
+        top,
+        behavior: smooth ? "smooth" : "auto"
+      });
+    },
+    [scrollRef, itemCount, getItemHeight]
+  );
+  const scrollToNext = react.useCallback(() => {
+    scrollToIndex(currentIndex + 1);
+  }, [currentIndex, scrollToIndex]);
+  const scrollToPrev = react.useCallback(() => {
+    scrollToIndex(currentIndex - 1);
+  }, [currentIndex, scrollToIndex]);
+  react.useEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const handleScroll = () => {
+      const now = Date.now();
+      const scrollTop = element.scrollTop;
+      const timeDelta = now - lastScrollTimeRef.current;
+      const scrollDelta = Math.abs(scrollTop - lastScrollTopRef.current);
+      if (timeDelta > 0) {
+        const velocity = scrollDelta / timeDelta * 1e3;
+        setScrollVelocity(velocity);
+        onScrollChange?.(scrollTop, velocity);
+      }
+      const height = getItemHeight();
+      const newIndex = Math.round(scrollTop / height);
+      if (newIndex !== currentIndex && newIndex >= 0 && newIndex < itemCount) {
+        setCurrentIndex(newIndex);
+        onIndexChange?.(newIndex);
+      }
+      setIsScrolling(true);
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+      scrollTimeoutRef.current = setTimeout(() => {
+        setIsScrolling(false);
+        setScrollVelocity(0);
+      }, 150);
+      lastScrollTopRef.current = scrollTop;
+      lastScrollTimeRef.current = now;
+    };
+    element.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      element.removeEventListener("scroll", handleScroll);
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, [scrollRef, itemCount, currentIndex, getItemHeight, onScrollChange, onIndexChange]);
+  return {
+    currentIndex,
+    scrollVelocity,
+    isScrolling,
+    scrollToIndex,
+    scrollToNext,
+    scrollToPrev
+  };
+}
+function useInfiniteScroll({
+  onLoadMore,
+  isLoading = false,
+  hasMore = true,
+  threshold: _threshold = 3,
+  rootMargin = "0px 0px 200px 0px"
+}) {
+  const [isLoadingMore, setIsLoadingMore] = react.useState(false);
+  const observerRef = react.useRef(null);
+  const sentinelRef = react.useRef(null);
+  const loadingRef = react.useRef(false);
+  const handleLoadMore = react.useCallback(async () => {
+    if (loadingRef.current || isLoading || !hasMore || !onLoadMore) return;
+    loadingRef.current = true;
+    setIsLoadingMore(true);
+    try {
+      await onLoadMore();
+    } finally {
+      loadingRef.current = false;
+      setIsLoadingMore(false);
+    }
+  }, [onLoadMore, isLoading, hasMore]);
+  const setSentinelRef = react.useCallback(
+    (element) => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      sentinelRef.current = element;
+      if (!element || !hasMore) return;
+      observerRef.current = new IntersectionObserver(
+        (entries) => {
+          const [entry] = entries;
+          if (entry?.isIntersecting) {
+            handleLoadMore();
+          }
+        },
+        {
+          rootMargin,
+          threshold: 0
+        }
+      );
+      observerRef.current.observe(element);
+    },
+    [hasMore, rootMargin, handleLoadMore]
+  );
+  react.useEffect(() => {
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, []);
+  react.useEffect(() => {
+    loadingRef.current = isLoading;
+  }, [isLoading]);
+  return {
+    sentinelRef: setSentinelRef,
+    isLoadingMore
+  };
+}
+
+Object.defineProperty(exports, "usePreload", {
+  enumerable: true,
+  get: function () { return player.usePreload; }
+});
+exports.ConnectedVideoFeed = ConnectedVideoFeed;
+exports.VideoFeed = VideoFeed;
+exports.VideoFeedItem = VideoFeedItem;
+exports.VideoFeedItemActions = VideoFeedItemActions;
+exports.VideoFeedItemOverlay = VideoFeedItemOverlay;
+exports.VideoFeedItemPlayer = VideoFeedItemPlayer;
+exports.VideoFeedItemTimeline = VideoFeedItemTimeline;
+exports.VideoOverlay = VideoOverlay;
+exports.getPreloadPriority = getPreloadPriority;
+exports.getPreloadPriorityForFeed = getPreloadPriorityForFeed;
+exports.mapPriorityToNumeric = mapPriorityToNumeric;
+exports.memoryManager = memoryManager;
+exports.prefetchVideoFeed = prefetchVideoFeed;
+exports.useFeedScroll = useFeedScroll;
+exports.useGlobalMemoryState = useGlobalMemoryState;
+exports.useInfiniteScroll = useInfiniteScroll;
+exports.useMemoryManager = useMemoryManager;
+exports.useSwipeAnimation = useSwipeAnimation;
+exports.useVideoActivation = useVideoActivation;
+exports.useVideoFeed = useVideoFeed;
+exports.useVideoFeedItemContext = useVideoFeedItemContext;
+exports.useVideoVisibility = useVideoVisibility;