@xhub-short/ui 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/{chunk-DHQJBXQW.js → chunk-KWHMZ6H5.js}

@@ -1,4 +1,4 @@
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { injectComponentCSS } from './chunk-RMLTPW5S.js';
 import { clsx } from 'clsx';
 import { createContext, useInsertionEffect, useMemo, useState, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-UXMA4KJZ.js → chunk-RMLTPW5S.js}

@@ -20,11 +20,12 @@ function injectComponentCSS(componentId, css) {
   const style = document.createElement("style");
   style.id = styleId;
   style.setAttribute("data-sv-component", componentId);
-  style.textContent = css;
+  style.textContent = `@layer sv {
+${css}
+}`;
   document.head.appendChild(style);
   injectedStyles.add(componentId);
   return () => {
-    removeComponentCSS(componentId);
   };
 }
 function removeComponentCSS(componentId) {

package/dist/{chunk-SSJDO24Q.js → chunk-SZXFH334.js}

@@ -1,4 +1,4 @@
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { injectComponentCSS } from './chunk-RMLTPW5S.js';
 import { useInsertionEffect, Component } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-4MN72OZH.js → chunk-UNV3NWN6.js}

@@ -1,5 +1,5 @@
-import { cn } from './chunk-WKX2WBVO.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-RMLTPW5S.js';
 import { useInsertionEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -121,7 +121,7 @@ function Skeleton({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("sv-skeleton", animation !== "none" && `sv-skeleton--${animation}`, className),
+      className: clsx2("sv-skeleton", animation !== "none" && `sv-skeleton--${animation}`, className),
       style,
       "aria-hidden": "true"
     }
@@ -130,7 +130,7 @@ function Skeleton({
 function SkeletonVideo({
   className
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("sv-skeleton-video", className), children: /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "100%", animation: "wave" }) });
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-skeleton-video", className), children: /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "100%", animation: "wave" }) });
 }
 function SkeletonAvatar({
   size = 40,

package/dist/{chunk-ZZDQKP4R.js → chunk-WCRDTBCZ.js}

@@ -1,6 +1,7 @@
-import { cn } from './chunk-WKX2WBVO.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
-import { createContext, useContext, useMemo, useInsertionEffect, useRef, useState, useEffect, useCallback } from 'react';
+import { VirtualSlider } from './chunk-AQHD6LPS.js';
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-RMLTPW5S.js';
+import { createContext, useContext, useInsertionEffect, useRef, useMemo, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/VideoFeed/VideoFeed.css.ts
@@ -193,6 +194,96 @@ function useVideoFeedContext() {
 function useOptionalVideoFeedContext() {
   return useContext(VideoFeedContext);
 }
+function VideoFeedLoading({ text = "Loading..." }) {
+  return /* @__PURE__ */ jsxs("div", { className: "sv-video-feed__loading", children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-video-feed__loading-spinner" }),
+    /* @__PURE__ */ jsx("div", { className: "sv-video-feed__loading-text", children: text })
+  ] });
+}
+function VideoFeedEmpty({ text = "No videos" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "sv-video-feed__empty", children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-video-feed__empty-icon", children: "\u{1F4ED}" }),
+    /* @__PURE__ */ jsx("div", { className: "sv-video-feed__empty-text", children: text })
+  ] });
+}
+function VideoFeedEnd({ text = "You've reached the end" }) {
+  return /* @__PURE__ */ jsx("div", { className: "sv-video-feed__end", "aria-live": "polite", children: text });
+}
+function VideoFeedHeadless({
+  feedState,
+  swipeState,
+  height,
+  className,
+  renderSlot,
+  onIndexChange,
+  onEndReached,
+  endReachedThreshold = 2,
+  bufferSize = 1,
+  loadingText = "Loading...",
+  emptyText = "No videos",
+  endText = "You've reached the end",
+  disableInlineTransforms = false
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("sv-video-feed", VIDEO_FEED_CSS);
+  }, []);
+  const { videos, isLoading, hasMore } = feedState;
+  const { activeIndex, isSwiping, dragOffset, goToIndex } = swipeState;
+  const containerHeightRef = useRef(
+    typeof window !== "undefined" ? window.innerHeight : 800
+  );
+  const contextValue = useMemo(
+    () => ({
+      videos,
+      activeIndex: Math.max(0, Math.min(videos.length - 1, activeIndex)),
+      isSwiping,
+      dragOffset,
+      containerHeight: containerHeightRef.current,
+      goToIndex,
+      totalCount: videos.length
+    }),
+    [videos, activeIndex, isSwiping, dragOffset, goToIndex]
+  );
+  const keyExtractor = useCallback((video) => video.id, []);
+  const renderItem = useCallback(
+    (video, index, _isActive) => {
+      return renderSlot(video, index);
+    },
+    [renderSlot]
+  );
+  const loadingComponent = useMemo(() => /* @__PURE__ */ jsx(VideoFeedLoading, { text: loadingText }), [loadingText]);
+  const emptyComponent = useMemo(() => /* @__PURE__ */ jsx(VideoFeedEmpty, { text: emptyText }), [emptyText]);
+  const endComponent = useMemo(() => /* @__PURE__ */ jsx(VideoFeedEnd, { text: endText }), [endText]);
+  const sliderProps = {
+    // Required
+    items: videos,
+    keyExtractor,
+    renderItem,
+    // Swipe state
+    activeIndex,
+    isSwiping,
+    dragOffset,
+    goToIndex,
+    // Callbacks
+    onIndexChange,
+    onEndReached,
+    endReachedThreshold,
+    bufferSize,
+    // Loading states
+    isLoading,
+    hasMore,
+    // Custom UI (video-specific styling)
+    loadingComponent,
+    emptyComponent,
+    endComponent,
+    // Styling - use sv-video-feed classes instead of sv-slider
+    height,
+    className: clsx2("sv-video-feed", className),
+    disableInlineTransforms
+  };
+  return /* @__PURE__ */ jsx(VideoFeedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(VirtualSlider, { ...sliderProps }) });
+}
+VideoFeedHeadless.displayName = "VideoFeedHeadless";
 function useVideoFeedPosition(options) {
   const {
     totalCount,
@@ -255,158 +346,6 @@ function getSlotIndexFromPosition(yPosition, containerHeight, totalCount) {
   const rawIndex = Math.round(-yPosition / containerHeight);
   return Math.max(0, Math.min(totalCount - 1, rawIndex));
 }
-function VideoFeedHeadless({
-  feedState,
-  swipeState,
-  height,
-  className,
-  renderSlot,
-  onIndexChange,
-  onEndReached,
-  endReachedThreshold = 2,
-  bufferSize = 1,
-  loadingText = "Loading...",
-  emptyText = "No videos",
-  endText = "You've reached the end",
-  disableInlineTransforms = false
-}) {
-  useInsertionEffect(() => {
-    return injectComponentCSS("sv-video-feed", VIDEO_FEED_CSS);
-  }, []);
-  const containerRef = useRef(null);
-  const [containerHeight, setContainerHeight] = useState(0);
-  const [isResizing, setIsResizing] = useState(false);
-  const resizeTimeoutRef = useRef(null);
-  const prevHeightRef = useRef(0);
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    const updateHeight = () => {
-      const newHeight = container.clientHeight;
-      const heightChanged = newHeight !== prevHeightRef.current && prevHeightRef.current !== 0;
-      if (heightChanged) {
-        setIsResizing(true);
-        if (resizeTimeoutRef.current) {
-          clearTimeout(resizeTimeoutRef.current);
-        }
-        resizeTimeoutRef.current = setTimeout(() => {
-          setIsResizing(false);
-        }, 150);
-      }
-      prevHeightRef.current = newHeight;
-      setContainerHeight(newHeight);
-    };
-    updateHeight();
-    let cleanup;
-    if (typeof ResizeObserver !== "undefined") {
-      const observer = new ResizeObserver(updateHeight);
-      observer.observe(container);
-      cleanup = () => observer.disconnect();
-    } else {
-      window.addEventListener("resize", updateHeight);
-      cleanup = () => window.removeEventListener("resize", updateHeight);
-    }
-    return () => {
-      cleanup();
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
-      }
-    };
-  }, []);
-  const { videos, isLoading, hasMore } = feedState;
-  const { activeIndex, isSwiping, dragOffset, goToIndex } = swipeState;
-  const prevActiveIndexRef = useRef(activeIndex);
-  useEffect(() => {
-    if (prevActiveIndexRef.current !== activeIndex) {
-      onIndexChange?.(activeIndex);
-      prevActiveIndexRef.current = activeIndex;
-    }
-  }, [activeIndex, onIndexChange]);
-  useEffect(() => {
-    if (videos.length === 0) return;
-    if (!hasMore || isLoading) return;
-    const distanceToEnd = videos.length - 1 - activeIndex;
-    if (distanceToEnd <= endReachedThreshold) {
-      onEndReached?.();
-    }
-  }, [activeIndex, videos.length, hasMore, isLoading, endReachedThreshold, onEndReached]);
-  const { slots, isAtLastIndex, clampedActiveIndex } = useVideoFeedPosition({
-    totalCount: videos.length,
-    activeIndex,
-    containerHeight,
-    dragOffset,
-    isSwiping,
-    isResizing,
-    bufferSize
-  });
-  const contextValue = useMemo(
-    () => ({
-      videos,
-      activeIndex: clampedActiveIndex,
-      isSwiping,
-      dragOffset,
-      containerHeight,
-      goToIndex,
-      totalCount: videos.length
-    }),
-    [videos, clampedActiveIndex, isSwiping, dragOffset, containerHeight, goToIndex]
-  );
-  const renderSlots = useCallback(() => {
-    return slots.map((slot) => {
-      const video = videos[slot.index];
-      if (!video) return null;
-      const slotStyle = disableInlineTransforms ? { opacity: slot.opacity } : { transform: slot.transform, opacity: slot.opacity };
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "sv-video-feed__slot",
-            slot.isActive && "sv-video-feed__slot--active",
-            !slot.isActive && "sv-video-feed__slot--adjacent",
-            !isSwiping && "sv-video-feed__slot--transitioning"
-          ),
-          style: slotStyle,
-          "data-slot-index": slot.index,
-          "data-slot-active": slot.isActive,
-          children: renderSlot(video, slot.index)
-        },
-        video.id
-      );
-    });
-  }, [slots, videos, isSwiping, renderSlot, disableInlineTransforms]);
-  const containerStyle = useMemo(() => {
-    const style = {};
-    if (height !== void 0) {
-      style.height = typeof height === "number" ? `${height}px` : height;
-    }
-    return style;
-  }, [height]);
-  if (isLoading && videos.length === 0) {
-    return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("sv-video-feed", className), style: containerStyle, children: /* @__PURE__ */ jsxs("div", { className: "sv-video-feed__loading", children: [
-      /* @__PURE__ */ jsx("div", { className: "sv-video-feed__loading-spinner" }),
-      /* @__PURE__ */ jsx("div", { className: "sv-video-feed__loading-text", children: loadingText })
-    ] }) });
-  }
-  if (!isLoading && videos.length === 0) {
-    return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("sv-video-feed", className), style: containerStyle, children: /* @__PURE__ */ jsxs("div", { className: "sv-video-feed__empty", children: [
-      /* @__PURE__ */ jsx("div", { className: "sv-video-feed__empty-icon", children: "\u{1F4ED}" }),
-      /* @__PURE__ */ jsx("div", { className: "sv-video-feed__empty-text", children: emptyText })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx(VideoFeedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("sv-video-feed", className), style: containerStyle, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "sv-video-feed__container",
-          isSwiping ? "sv-video-feed__container--swiping" : "sv-video-feed__container--snapping"
-        ),
-        children: renderSlots()
-      }
-    ),
-    isAtLastIndex && !hasMore && /* @__PURE__ */ jsx("div", { className: "sv-video-feed__end", "aria-live": "polite", children: endText })
-  ] }) });
-}
 
 // src/components/VideoFeed/constants.ts
 var SLOT_INDEX_ATTR = "data-slot-index";