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

package/dist/chunk-WCRDTBCZ.js

@@ -1,357 +0,0 @@
-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
-var VIDEO_FEED_CSS = `
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * VideoFeed Styles
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-feed {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background: var(--sv-bg-primary, #000);
-  touch-action: pan-y;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Feed Container (holds all slots)
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-video-feed__container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  will-change: transform;
-}
-
-/* Smooth transition when not swiping */
-.sv-video-feed__container--snapping {
-  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-/* No transition during swipe for immediate feedback */
-.sv-video-feed__container--swiping {
-  transition: none;
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Video Slot Wrapper
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-video-feed__slot {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  will-change: transform, opacity;
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-}
-
-/* Active slot */
-.sv-video-feed__slot--active {
-  z-index: 2;
-}
-
-/* Adjacent slots (for preview) */
-.sv-video-feed__slot--adjacent {
-  z-index: 1;
-  pointer-events: none;
-}
-
-/* Transition for smooth snap animations (when not swiping) */
-.sv-video-feed__slot--transitioning {
-  transition: transform 0.175s cubic-bezier(0.25, 0.46, 0.45, 0.94),
-              opacity 0.2s ease;
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Loading State
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-video-feed__loading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--sv-spacing-md, 16px);
-  color: var(--sv-text-secondary, #999);
-}
-
-.sv-video-feed__loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid rgba(255, 255, 255, 0.2);
-  border-top-color: var(--sv-color-primary, #fe2c55);
-  border-radius: 50%;
-  animation: sv-feed-spinner 0.8s linear infinite;
-}
-
-@keyframes sv-feed-spinner {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.sv-video-feed__loading-text {
-  font-size: var(--sv-font-size-sm, 13px);
-  font-family: var(--sv-font-family, 'Urbanist', sans-serif);
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Empty State
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-video-feed__empty {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-  color: var(--sv-text-secondary, #999);
-  font-family: var(--sv-font-family, 'Urbanist', sans-serif);
-}
-
-.sv-video-feed__empty-icon {
-  font-size: 48px;
-  margin-bottom: var(--sv-spacing-md, 16px);
-}
-
-.sv-video-feed__empty-text {
-  font-size: var(--sv-font-size-md, 14px);
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * End of Feed
- * Note: Positioned outside container but above slots. Uses safe-area-inset
- * to avoid being covered by device notch/home indicator.
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-video-feed__end {
-  position: absolute;
-  /* Safe bottom positioning - accounts for device UI */
-  bottom: calc(var(--sv-spacing-xl, 32px) + env(safe-area-inset-bottom, 0px));
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10; /* Above slots (z-index 1-2) */
-  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-md, 16px);
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border-radius: var(--sv-border-radius-md, 8px);
-  color: var(--sv-text-secondary, #999);
-  font-size: var(--sv-font-size-sm, 13px);
-  font-family: var(--sv-font-family, 'Urbanist', sans-serif);
-  pointer-events: none; /* Don't block interactions */
-  animation: sv-feed-end-fade-in 0.3s ease-out;
-}
-
-@keyframes sv-feed-end-fade-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Reduced Motion
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-@media (prefers-reduced-motion: reduce) {
-  .sv-video-feed__container--snapping {
-    transition: none;
-  }
-  
-  .sv-video-feed__loading-spinner {
-    animation: none;
-  }
-}
-`;
-var VideoFeedContext = createContext(null);
-function useVideoFeedContext() {
-  const context = useContext(VideoFeedContext);
-  if (!context) {
-    throw new Error("useVideoFeedContext must be used within a VideoFeed");
-  }
-  return context;
-}
-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,
-    activeIndex,
-    containerHeight,
-    dragOffset,
-    isSwiping,
-    isResizing = false,
-    bufferSize = 1
-  } = options;
-  return useMemo(() => {
-    if (totalCount === 0) {
-      return {
-        slots: [],
-        scrollOffset: 0,
-        isAtStart: true,
-        isAtLastIndex: true,
-        clampedActiveIndex: 0
-      };
-    }
-    const clampedActiveIndex = Math.max(0, Math.min(totalCount - 1, activeIndex));
-    const slots = [];
-    const startIndex = Math.max(0, clampedActiveIndex - bufferSize);
-    const endIndex = Math.min(totalCount - 1, clampedActiveIndex + bufferSize);
-    const baseOffset = -clampedActiveIndex * containerHeight;
-    const scrollOffset = baseOffset + dragOffset;
-    for (let i = startIndex; i <= endIndex; i++) {
-      const signedDistance = i - clampedActiveIndex;
-      const distance = Math.abs(signedDistance);
-      const isActive = i === clampedActiveIndex;
-      const top = i * containerHeight;
-      const transform = `translateY(${top + scrollOffset}px)`;
-      let opacity = 1;
-      if (!isActive && !isResizing) {
-        opacity = isSwiping ? 0.7 : 0.3;
-      }
-      slots.push({
-        index: i,
-        top,
-        isActive,
-        distance,
-        signedDistance,
-        transform,
-        opacity
-      });
-    }
-    return {
-      slots,
-      scrollOffset,
-      isAtStart: clampedActiveIndex === 0,
-      isAtLastIndex: clampedActiveIndex >= totalCount - 1,
-      clampedActiveIndex
-    };
-  }, [totalCount, activeIndex, containerHeight, dragOffset, isSwiping, isResizing, bufferSize]);
-}
-function getSlotIndexFromPosition(yPosition, containerHeight, totalCount) {
-  if (totalCount === 0 || containerHeight === 0) {
-    return 0;
-  }
-  const rawIndex = Math.round(-yPosition / containerHeight);
-  return Math.max(0, Math.min(totalCount - 1, rawIndex));
-}
-
-// src/components/VideoFeed/constants.ts
-var SLOT_INDEX_ATTR = "data-slot-index";
-var SLOT_ACTIVE_ATTR = "data-slot-active";
-var SLOT_INDEX_DATASET_KEY = "slotIndex";
-var SLOT_ACTIVE_DATASET_KEY = "slotActive";
-var VIDEO_FEED_CLASS_PREFIX = "sv-video-feed";
-
-export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedHeadless, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition };