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

package/dist/components/DetailView/index.d.ts

@@ -0,0 +1,314 @@
+import * as react from 'react';
+import { ReactElement, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Article, MusicInfo } from '@xhub-short/contracts';
+
+interface DetailViewContextValue {
+    /** The article data */
+    article: Article;
+    /** Current image index */
+    currentImageIndex: number;
+    /** Set current image index */
+    setCurrentImageIndex: (index: number) => void;
+    /** Close detail view */
+    close: () => void;
+    /** Whether view is animating */
+    isAnimating: boolean;
+    /** Actions */
+    actions: {
+        onLike?: () => void;
+        onComment?: () => void;
+        onShare?: () => void;
+        onBookmark?: () => void;
+        onFollow?: () => void;
+        onGestureLock?: (isLocked: boolean) => void;
+    };
+    /** States */
+    states: {
+        isLiked: boolean;
+        isBookmarked: boolean;
+        isFollowing: boolean;
+    };
+}
+/**
+ * Hook to access DetailView context
+ * @throws if used outside DetailViewHeadless
+ */
+declare function useDetailViewContext(): DetailViewContextValue;
+declare function BackIcon(): react_jsx_runtime.JSX.Element;
+declare function HeartIcon({ filled }: {
+    filled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function CommentIcon(): react_jsx_runtime.JSX.Element;
+declare function BookmarkIcon({ filled }: {
+    filled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function ShareIcon(): react_jsx_runtime.JSX.Element;
+interface DetailViewHeadlessProps {
+    /** Whether the detail view is open */
+    isOpen: boolean;
+    /** Close handler */
+    onClose: () => void;
+    /** The article to display */
+    article: Article;
+    /** Initial image index */
+    initialImageIndex?: number;
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Enable swipe down to close */
+    enableSwipeToClose?: boolean;
+    /** Swipe threshold (percentage) to trigger close */
+    swipeCloseThreshold?: number;
+    /** Custom header title (fallback if no author) */
+    headerTitle?: string;
+    /** Show drag indicator */
+    showDragIndicator?: boolean;
+    /** Whether post is liked */
+    isLiked?: boolean;
+    /** Whether post is bookmarked */
+    isBookmarked?: boolean;
+    /** Whether following author */
+    isFollowing?: boolean;
+    /** Like button handler */
+    onLike?: () => void;
+    /** Comment button handler */
+    onComment?: () => void;
+    /** Share button handler */
+    onShare?: () => void;
+    /** Bookmark button handler */
+    onBookmark?: () => void;
+    /** Follow button handler */
+    onFollow?: () => void;
+    /** Callback to lock/unlock global gestures */
+    onGestureLock?: (isLocked: boolean) => void;
+    /**
+     * Custom bottom bar renderer.
+     * When provided, replaces the entire default bottom bar.
+     * Use compound components (DetailViewBottomBar, DetailViewActionButton, etc.)
+     * to build custom layouts.
+     *
+     * @example
+     * ```tsx
+     * <DetailViewHeadless
+     *   renderBottomBar={() => (
+     *     <DetailViewBottomBar>
+     *       <DetailViewActionButton type="like" />
+     *       <DetailViewActionButton type="share" />
+     *     </DetailViewBottomBar>
+     *   )}
+     * />
+     * ```
+     */
+    renderBottomBar?: () => ReactNode;
+    /**
+     * Hide the default bottom bar completely.
+     * Use when you want to render your own bottom bar via children.
+     */
+    hideBottomBar?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Children */
+    children?: ReactNode;
+}
+declare function formatCount(count: number): string;
+declare function DetailViewHeadlessBase({ isOpen, onClose, article, initialImageIndex, animationDuration, enableSwipeToClose, swipeCloseThreshold, headerTitle, showDragIndicator, isLiked, isBookmarked, isFollowing, onLike, onComment, onShare, onBookmark, onFollow, renderBottomBar, hideBottomBar, onGestureLock, className, children, }: DetailViewHeadlessProps): ReactElement | null;
+declare const DetailViewHeadless: react.MemoExoticComponent<typeof DetailViewHeadlessBase>;
+/**
+ * Image Gallery for detail view
+ */
+interface DetailViewGalleryProps {
+    /** Enable zoom on images */
+    enableZoom?: boolean;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewGallery({ enableZoom, className, }: DetailViewGalleryProps): ReactElement;
+/**
+ * Author section for detail view
+ */
+interface DetailViewAuthorProps {
+    /** Whether user is following this author */
+    isFollowing?: boolean;
+    /** Follow button click handler */
+    onFollowClick?: () => void;
+    /** Show follow button */
+    showFollowButton?: boolean;
+    /** Format date function */
+    formatDate?: (date: Date | string) => string;
+    /** Follow button label */
+    followLabel?: string;
+    /** Following button label */
+    followingLabel?: string;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewAuthor({ isFollowing, onFollowClick, showFollowButton, formatDate, followLabel, followingLabel, className, }: DetailViewAuthorProps): ReactElement | null;
+/**
+ * Caption display for detail view
+ */
+interface DetailViewCaptionProps {
+    /** Render hashtags as links */
+    renderHashtag?: (hashtag: string) => ReactNode;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewCaption({ renderHashtag, className, }: DetailViewCaptionProps): ReactElement | null;
+/**
+ * Stats display for detail view
+ */
+interface DetailViewStatsProps {
+    /** Format number function */
+    formatNumber?: (num: number) => string;
+    /** Labels */
+    labels?: {
+        likes?: string;
+        comments?: string;
+        shares?: string;
+        views?: string;
+    };
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewStats({ formatNumber, labels, className, }: DetailViewStatsProps): ReactElement;
+/**
+ * Music bar for detail view
+ */
+interface DetailViewMusicProps {
+    /** Music info */
+    music?: MusicInfo;
+    /** Whether music is playing */
+    isPlaying?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewMusic({ music, isPlaying, onClick, className, }: DetailViewMusicProps): ReactElement | null;
+/**
+ * Bottom bar container
+ *
+ * Use this to wrap custom bottom bar content.
+ * Handles event propagation and styling.
+ *
+ * @example
+ * ```tsx
+ * <DetailViewHeadless
+ *   renderBottomBar={() => (
+ *     <DetailViewBottomBar>
+ *       <DetailViewCommentInput />
+ *       <DetailViewActions>
+ *         <DetailViewActionButton type="like" />
+ *         <DetailViewActionButton type="share" />
+ *       </DetailViewActions>
+ *     </DetailViewBottomBar>
+ *   )}
+ * />
+ * ```
+ */
+interface DetailViewBottomBarProps {
+    /** Children */
+    children?: ReactNode;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewBottomBar({ children, className, }: DetailViewBottomBarProps): ReactElement;
+/**
+ * Comment input for bottom bar
+ *
+ * @example
+ * ```tsx
+ * <DetailViewCommentInput
+ *   placeholder="Write a comment..."
+ *   onSubmit={(value) => submitComment(value)}
+ * />
+ * ```
+ */
+interface DetailViewCommentInputProps {
+    /** Placeholder text */
+    placeholder?: string;
+    /** Called when user submits comment (presses Enter) */
+    onSubmit?: (value: string) => void;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewCommentInput({ placeholder, onSubmit, className, }: DetailViewCommentInputProps): ReactElement;
+/**
+ * Actions container for bottom bar
+ *
+ * @example
+ * ```tsx
+ * <DetailViewActions>
+ *   <DetailViewActionButton type="like" />
+ *   <DetailViewActionButton type="comment" />
+ * </DetailViewActions>
+ * ```
+ */
+interface DetailViewActionsProps {
+    /** Children (action buttons) */
+    children?: ReactNode;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewActions({ children, className }: DetailViewActionsProps): ReactElement;
+/**
+ * Action button types
+ */
+type DetailViewActionType = 'like' | 'comment' | 'bookmark' | 'share';
+/**
+ * Single action button for bottom bar
+ *
+ * Can be used with predefined types (like, comment, bookmark, share)
+ * or with custom icon/content.
+ *
+ * @example
+ * ```tsx
+ * // Using predefined type
+ * <DetailViewActionButton type="like" isActive={isLiked} count={123} onClick={handleLike} />
+ *
+ * // Using custom icon
+ * <DetailViewActionButton icon={<MyCustomIcon />} onClick={handleCustomAction} />
+ * ```
+ */
+interface DetailViewActionButtonProps {
+    /** Predefined action type */
+    type?: DetailViewActionType;
+    /** Custom icon (overrides type) */
+    icon?: ReactNode;
+    /** Whether button is active (e.g., liked, bookmarked) */
+    isActive?: boolean;
+    /** Count to display */
+    count?: number;
+    /** Click handler */
+    onClick?: () => void;
+    /** Aria label */
+    ariaLabel?: string;
+    /** Class name */
+    className?: string;
+    /** Children (additional content) */
+    children?: ReactNode;
+}
+declare function DetailViewActionButton({ type, icon, isActive, count, onClick, ariaLabel, className, children, }: DetailViewActionButtonProps): ReactElement;
+/**
+ * Export icons for host apps that want to build custom bottom bars
+ * but still use consistent icons.
+ */
+declare const DetailViewIcons: {
+    Back: typeof BackIcon;
+    Heart: typeof HeartIcon;
+    Comment: typeof CommentIcon;
+    Bookmark: typeof BookmarkIcon;
+    Share: typeof ShareIcon;
+};
+
+/**
+ * DetailView CSS - Injected at runtime
+ *
+ * Features:
+ * - Full-screen detail view
+ * - Expand/collapse animation
+ * - Scrollable content
+ * - Back gesture (swipe down)
+ */
+declare const DETAIL_VIEW_CSS = "\n/* \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\n   DETAIL VIEW - Container\n   \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 */\n\n.sv-detail-view {\n  position: fixed;\n  inset: 0;\n  z-index: var(--sv-detail-view-z-index, 1000);\n  background: var(--sv-detail-view-bg, #000);\n  overflow: hidden;\n  touch-action: none;\n}\n\n/* States */\n.sv-detail-view--entering {\n  animation: sv-detail-view-enter 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;\n}\n\n.sv-detail-view--exiting {\n  animation: sv-detail-view-exit 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;\n}\n\n.sv-detail-view--dragging {\n  transition: none;\n}\n\n@keyframes sv-detail-view-enter {\n  from {\n    opacity: 0;\n    transform: translateY(100%) scale(0.9);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes sv-detail-view-exit {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%) scale(0.9);\n  }\n}\n\n/* \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\n   BACKDROP\n   \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 */\n\n.sv-detail-view__backdrop {\n  position: absolute;\n  inset: 0;\n  background: var(--sv-detail-view-backdrop-bg, rgba(0, 0, 0, 0.8));\n  opacity: 1;\n  transition: opacity 0.3s ease;\n}\n\n.sv-detail-view--exiting .sv-detail-view__backdrop {\n  opacity: 0;\n}\n\n/* \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\n   CONTENT CONTAINER\n   \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 */\n\n.sv-detail-view__container {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  will-change: transform;\n}\n\n/* \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\n   HEADER\n   \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 */\n\n.sv-detail-view__header {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--sv-detail-view-header-padding, 12px 16px);\n  background: var(--sv-detail-view-header-bg, rgba(0, 0, 0, 0.8));\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n}\n\n.sv-detail-view__back-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--sv-detail-view-back-bg, rgba(255, 255, 255, 0.1));\n  color: var(--sv-detail-view-back-color, #fff);\n  cursor: pointer;\n  transition: background 0.2s ease;\n}\n\n.sv-detail-view__back-button:hover {\n  background: var(--sv-detail-view-back-hover-bg, rgba(255, 255, 255, 0.2));\n}\n\n.sv-detail-view__back-button svg {\n  width: 24px;\n  height: 24px;\n}\n\n.sv-detail-view__title {\n  font-size: var(--sv-detail-view-title-font-size, 16px);\n  font-weight: 600;\n  color: var(--sv-detail-view-title-color, #fff);\n}\n\n.sv-detail-view__actions {\n  display: flex;\n  gap: 8px;\n}\n\n/* \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\n   DRAG INDICATOR\n   \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 */\n\n.sv-detail-view__drag-indicator {\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 36px;\n  height: 5px;\n  background: var(--sv-detail-view-drag-indicator-bg, rgba(255, 255, 255, 0.3));\n  border-radius: 3px;\n  z-index: 20;\n}\n\n/* \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\n   SCROLL CONTENT\n   \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 */\n\n.sv-detail-view__scroll {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior-y: contain;\n  /* Allow vertical scroll but block horizontal (prevents Feed swipe) */\n  touch-action: pan-y;\n  /* Padding bottom for bottom bar */\n  padding-bottom: 70px;\n}\n\n.sv-detail-view__content {\n  min-height: 100%;\n  /* No horizontal padding - gallery should be full width */\n}\n\n/* \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\n   IMAGE GALLERY\n   \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 */\n\n.sv-detail-view__gallery {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 1;\n  background: var(--sv-detail-view-gallery-bg, #111);\n  overflow: hidden;\n}\n\n.sv-detail-view__gallery-image {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* Gallery pagination */\n.sv-detail-view__gallery-pagination {\n  position: absolute;\n  bottom: 12px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  gap: 6px;\n  padding: 6px 12px;\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 20px;\n}\n\n.sv-detail-view__gallery-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.5);\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.sv-detail-view__gallery-dot--active {\n  background: #fff;\n  transform: scale(1.2);\n}\n\n/* \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\n   AUTHOR SECTION\n   \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 */\n\n.sv-detail-view__author {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 0;\n  border-bottom: 1px solid var(--sv-detail-view-border-color, rgba(255, 255, 255, 0.1));\n}\n\n.sv-detail-view__author-avatar {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n\n.sv-detail-view__author-info {\n  flex: 1;\n}\n\n.sv-detail-view__author-name {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--sv-detail-view-text-color, #fff);\n}\n\n.sv-detail-view__author-date {\n  font-size: 13px;\n  color: var(--sv-detail-view-secondary-color, rgba(255, 255, 255, 0.6));\n  margin-top: 2px;\n}\n\n.sv-detail-view__follow-button {\n  padding: 8px 20px;\n  background: var(--sv-detail-view-follow-bg, #fe2c55);\n  border: none;\n  border-radius: 4px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #fff;\n  cursor: pointer;\n  transition: opacity 0.2s ease;\n}\n\n.sv-detail-view__follow-button:hover {\n  opacity: 0.9;\n}\n\n.sv-detail-view__follow-button--following {\n  background: var(--sv-detail-view-following-bg, rgba(255, 255, 255, 0.1));\n  color: var(--sv-detail-view-following-color, #fff);\n}\n\n/* \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\n   CAPTION SECTION\n   \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 */\n\n.sv-detail-view__caption {\n  padding: 16px;\n  font-size: var(--sv-detail-view-caption-font-size, 15px);\n  line-height: 1.5;\n  color: var(--sv-detail-view-text-color, #fff);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Hashtags in caption */\n.sv-detail-view__hashtag {\n  color: var(--sv-detail-view-hashtag-color, #4dabff);\n  cursor: pointer;\n}\n\n.sv-detail-view__hashtag:hover {\n  text-decoration: underline;\n}\n\n/* \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\n   STATS SECTION\n   \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 */\n\n.sv-detail-view__stats {\n  display: flex;\n  gap: 24px;\n  padding: 16px 0;\n  border-top: 1px solid var(--sv-detail-view-border-color, rgba(255, 255, 255, 0.1));\n}\n\n.sv-detail-view__stat {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 14px;\n  color: var(--sv-detail-view-secondary-color, rgba(255, 255, 255, 0.6));\n}\n\n.sv-detail-view__stat-value {\n  font-weight: 600;\n  color: var(--sv-detail-view-text-color, #fff);\n}\n\n/* \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\n   ACTION BAR (Bottom)\n   \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 */\n\n.sv-detail-view__action-bar {\n  position: sticky;\n  bottom: 0;\n  display: flex;\n  justify-content: space-around;\n  padding: 12px 16px;\n  background: var(--sv-detail-view-action-bar-bg, rgba(0, 0, 0, 0.9));\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  border-top: 1px solid var(--sv-detail-view-border-color, rgba(255, 255, 255, 0.1));\n}\n\n.sv-detail-view__action {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 16px;\n  border: none;\n  background: transparent;\n  color: var(--sv-detail-view-action-color, #fff);\n  cursor: pointer;\n  transition: opacity 0.2s ease;\n}\n\n.sv-detail-view__action:hover {\n  opacity: 0.8;\n}\n\n.sv-detail-view__action--active {\n  color: var(--sv-detail-view-action-active-color, #fe2c55);\n}\n\n.sv-detail-view__action svg {\n  width: 24px;\n  height: 24px;\n}\n\n.sv-detail-view__action-label {\n  font-size: 12px;\n}\n\n/* \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\n   MUSIC BAR\n   \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 */\n\n.sv-detail-view__music {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  margin: 0 16px 16px;\n  background: var(--sv-detail-view-music-bg, rgba(255, 255, 255, 0.05));\n  border-radius: 8px;\n  border: none;\n  width: calc(100% - 32px);\n  cursor: pointer;\n  text-align: left;\n}\n\n.sv-detail-view__music-cover {\n  width: 48px;\n  height: 48px;\n  border-radius: 4px;\n  object-fit: cover;\n}\n\n.sv-detail-view__music-info {\n  flex: 1;\n  overflow: hidden;\n}\n\n.sv-detail-view__music-title {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--sv-detail-view-text-color, #fff);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sv-detail-view__music-artist {\n  font-size: 12px;\n  color: var(--sv-detail-view-secondary-color, rgba(255, 255, 255, 0.6));\n  margin-top: 2px;\n}\n\n.sv-detail-view__music-icon {\n  width: 24px;\n  height: 24px;\n  color: var(--sv-detail-view-secondary-color, rgba(255, 255, 255, 0.6));\n}\n\n/* \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\n   HEADER - Author Info (Plan Layout)\n   \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 */\n\n.sv-detail-view__header-author {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n  min-width: 0;\n  margin-left: 12px;\n}\n\n.sv-detail-view__header-avatar {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n.sv-detail-view__header-name {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--sv-detail-view-text-color, #fff);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sv-detail-view__follow-btn {\n  padding: 6px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  border: none;\n  border-radius: 4px;\n  background: var(--sv-detail-view-follow-bg, #fe2c55);\n  color: #fff;\n  cursor: pointer;\n  transition: background 0.2s ease, opacity 0.2s ease;\n  flex-shrink: 0;\n}\n\n.sv-detail-view__follow-btn:hover {\n  opacity: 0.9;\n}\n\n.sv-detail-view__follow-btn--following {\n  background: var(--sv-detail-view-following-bg, rgba(255, 255, 255, 0.12));\n  color: var(--sv-detail-view-text-color, #fff);\n}\n\n/* \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\n   BOTTOM ACTION BAR (Plan Layout)\n   \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 */\n\n.sv-detail-view__bottom-bar {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  padding-bottom: max(10px, env(safe-area-inset-bottom));\n  background: var(--sv-detail-view-bottom-bar-bg, rgba(0, 0, 0, 0.95));\n  border-top: 1px solid var(--sv-detail-view-border-color, rgba(255, 255, 255, 0.1));\n  z-index: 20;\n}\n\n.sv-detail-view__comment-input {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  background: var(--sv-detail-view-input-bg, rgba(255, 255, 255, 0.08));\n  border-radius: 18px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.sv-detail-view__bottom-bar .sv-detail-view__comment-input input,\n.sv-detail-view__comment-field,\ninput.sv-detail-view__comment-field {\n  flex: 1;\n  width: 100%;\n  height: auto;\n  padding: 10px 14px;\n  margin: 0;\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  background-color: transparent;\n  font-family: inherit;\n  font-size: 14px;\n  line-height: 1.4;\n  color: var(--sv-detail-view-text-color, #fff);\n  outline: none;\n  box-shadow: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n.sv-detail-view__bottom-bar .sv-detail-view__comment-input input::placeholder,\n.sv-detail-view__comment-field::placeholder,\ninput.sv-detail-view__comment-field::placeholder {\n  color: var(--sv-detail-view-placeholder-color, rgba(255, 255, 255, 0.5));\n  opacity: 1;\n}\n\n.sv-detail-view__bottom-bar .sv-detail-view__comment-input input:focus,\n.sv-detail-view__comment-field:focus,\ninput.sv-detail-view__comment-field:focus {\n  outline: none;\n  box-shadow: none;\n  border: none;\n}\n\n.sv-detail-view__bottom-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n\n.sv-detail-view__action-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-width: 40px;\n  padding: 4px 6px;\n  background: none;\n  border: none;\n  color: var(--sv-detail-view-text-color, #fff);\n  cursor: pointer;\n  transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.sv-detail-view__action-btn:hover {\n  transform: scale(1.05);\n}\n\n.sv-detail-view__action-btn:active {\n  transform: scale(0.95);\n}\n\n.sv-detail-view__action-btn--active {\n  color: var(--sv-detail-view-active-color, #fe2c55);\n}\n\n.sv-detail-view__action-btn svg {\n  width: 22px;\n  height: 22px;\n}\n\n.sv-detail-view__action-count {\n  font-size: 11px;\n  margin-top: 2px;\n  color: var(--sv-detail-view-secondary-color, rgba(255, 255, 255, 0.7));\n}\n\n.sv-detail-view__action-btn--active .sv-detail-view__action-count {\n  color: var(--sv-detail-view-active-color, #fe2c55);\n}\n\n/* \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\n   ACCESSIBILITY\n   \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 */\n\n.sv-detail-view:focus-visible {\n  outline: 2px solid var(--sv-detail-view-focus-color, #4dabff);\n  outline-offset: -2px;\n}\n\n.sv-detail-view__sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n";
+
+export { DETAIL_VIEW_CSS, DetailViewActionButton, type DetailViewActionButtonProps, type DetailViewActionType, DetailViewActions, type DetailViewActionsProps, DetailViewAuthor, type DetailViewAuthorProps, DetailViewBottomBar, type DetailViewBottomBarProps, DetailViewCaption, type DetailViewCaptionProps, DetailViewCommentInput, type DetailViewCommentInputProps, type DetailViewContextValue, DetailViewGallery, type DetailViewGalleryProps, DetailViewHeadless, type DetailViewHeadlessProps, DetailViewIcons, DetailViewMusic, type DetailViewMusicProps, DetailViewStats, type DetailViewStatsProps, formatCount as formatDetailViewCount, useDetailViewContext };

package/dist/components/DetailView/index.js

@@ -0,0 +1 @@
+export { DETAIL_VIEW_CSS, DetailViewActionButton, DetailViewActions, DetailViewAuthor, DetailViewBottomBar, DetailViewCaption, DetailViewCommentInput, DetailViewGallery, DetailViewHeadless, DetailViewIcons, DetailViewMusic, DetailViewStats, formatCount as formatDetailViewCount, useDetailViewContext } from '../../chunk-BADA7OLG.js';

package/dist/components/ErrorBoundary/index.js

@@ -1 +1 @@
-export { ErrorBoundary } from '../../chunk-SZXFH334.js';
+export { ErrorBoundary } from '../../chunk-IWSBYOSS.js';

package/dist/components/{VideoFeed → Feed}/index.d.ts

@@ -1,16 +1,16 @@
-import { UIFeedState, UISwipeState, VideoItem } from '@xhub-short/contracts';
+import { UIFeedState, UISwipeState, ContentItem, VideoItem } from '@xhub-short/contracts';
 import * as react from 'react';
 import { ReactNode } from 'react';
 
 /**
- * VideoFeedHeadless Component
+ * FeedHeadless Component
  *
- * Position-based virtual scroller for video feed (TikTok-style).
+ * Position-based virtual scroller for mixed content feed (Videos, Articles, etc.).
  * Receives state via props (headless pattern).
  *
- * This component wraps VirtualSlider<VideoItem> and adds:
- * - Video-specific context (VideoFeedContext)
- * - Video-specific CSS classes (sv-video-feed prefix)
+ * This component wraps VirtualSlider<ContentItem> and adds:
+ * - Feed-specific context (FeedContext)
+ * - Feed-specific CSS classes (sv-feed prefix)
  * - Backwards-compatible API
  *
  * Features:
@@ -22,19 +22,19 @@ import { ReactNode } from 'react';
  *
  * @example
  * ```tsx
- * <VideoFeedHeadless
+ * <FeedHeadless
  *   feedState={feedState}
  *   swipeState={swipeState}
- *   renderSlot={(video, index) => <VideoSlot video={video} />}
+ *   renderSlot={(item, index) => <ArticleSlot item={item} />}
  *   onEndReached={() => feedState.loadMore()}
  * />
  * ```
  */
 
 /**
- * Props for VideoFeedHeadless
+ * Props for FeedHeadless
  */
-interface VideoFeedHeadlessProps {
+interface FeedHeadlessProps {
     /** Feed state (videos, loading, etc.) */
     feedState: UIFeedState;
     /** Swipe/scroll state */
@@ -43,8 +43,8 @@ interface VideoFeedHeadlessProps {
     height?: number | string;
     /** Additional CSS classes */
     className?: string;
-    /** Render function for each video slot */
-    renderSlot: (video: VideoItem, index: number) => ReactNode;
+    /** Render function for each content slot */
+    renderSlot: (item: ContentItem, index: number, isActive: boolean) => ReactNode;
     /** Called when active index changes */
     onIndexChange?: (index: number) => void;
     /** Called when reaching near end of feed */
@@ -62,8 +62,8 @@ interface VideoFeedHeadlessProps {
     /**
      * Disable inline transform styles on slots.
      *
-     * When true, VideoFeedHeadless will NOT apply inline `transform` styles
-     * to slot elements. This allows parent components (like VideoFeed wired)
+     * When true, FeedHeadless will NOT apply inline `transform` styles
+     * to slot elements. This allows parent components (like Feed wired)
      * to control transforms entirely via direct DOM manipulation.
      *
      * Use this when implementing 60fps swipe with ref-based transforms.
@@ -71,26 +71,45 @@ interface VideoFeedHeadlessProps {
      * @default false
      */
     disableInlineTransforms?: boolean;
+    /**
+     * Custom empty state component.
+     * Receives `text` prop (localized empty text).
+     */
+    renderEmpty?: (text: string) => ReactNode;
+    /**
+     * Custom loading state component.
+     * Receives `text` prop (localized loading text).
+     */
+    renderLoading?: (text: string) => ReactNode;
+    /**
+     * Custom end of feed component.
+     * Receives `text` prop (localized end text).
+     */
+    renderEnd?: (text: string) => ReactNode;
 }
+/** @deprecated Use FeedHeadlessProps instead. Will be removed in v3.0 */
+type VideoFeedHeadlessProps = FeedHeadlessProps;
 /**
- * VideoFeed Headless Component
+ * Feed Headless Component
  *
- * Renders a vertical video feed with virtual scrolling.
- * Position-based: each video takes full viewport height.
+ * Renders a vertical feed with virtual scrolling.
+ * Position-based: each item takes full viewport height.
  *
- * Internally uses VirtualSlider<VideoItem> for the core slider logic,
- * adding video-specific context and styling.
+ * Internally uses VirtualSlider<ContentItem> for the core slider logic,
+ * adding feed-specific context and styling.
  */
-declare function VideoFeedHeadless({ feedState, swipeState, height, className, renderSlot, onIndexChange, onEndReached, endReachedThreshold, bufferSize, loadingText, emptyText, endText, disableInlineTransforms, }: VideoFeedHeadlessProps): React.ReactElement;
-declare namespace VideoFeedHeadless {
+declare function FeedHeadless({ feedState, swipeState, height, className, renderSlot, onIndexChange, onEndReached, endReachedThreshold, bufferSize, renderEmpty, renderLoading, renderEnd, loadingText, emptyText, endText, disableInlineTransforms, }: FeedHeadlessProps): React.ReactElement;
+declare namespace FeedHeadless {
     var displayName: string;
 }
 
 /**
- * VideoFeed context value
+ * Feed context value
  */
-interface VideoFeedContextValue {
-    /** List of videos */
+interface FeedContextValue {
+    /** List of items */
+    items: ContentItem[];
+    /** @deprecated Use items instead. Will be removed in v3.0 */
     videos: VideoItem[];
     /** Current active index */
     activeIndex: number;
@@ -102,28 +121,28 @@ interface VideoFeedContextValue {
     containerHeight: number;
     /** Go to specific index */
     goToIndex: (index: number) => void;
-    /** Total video count */
+    /** Total item count */
     totalCount: number;
 }
 /**
- * VideoFeed context (internal use)
+ * Feed context (internal use)
  */
-declare const VideoFeedContext: react.Context<VideoFeedContextValue | null>;
+declare const FeedContext: react.Context<FeedContextValue | null>;
 /**
- * Hook to access VideoFeed context
+ * Hook to access Feed context
  *
- * @throws Error if used outside VideoFeed
+ * @throws Error if used outside Feed
  */
-declare function useVideoFeedContext(): VideoFeedContextValue;
+declare function useFeedContext(): FeedContextValue;
 /**
- * Hook to check if inside VideoFeed (doesn't throw)
+ * Hook to check if inside Feed (doesn't throw)
  */
-declare function useOptionalVideoFeedContext(): VideoFeedContextValue | null;
+declare function useOptionalFeedContext(): FeedContextValue | null;
 
 /**
- * useVideoFeedPosition Hook
+ * useFeedPosition Hook
  *
- * Calculates position and visibility for video slots in the feed.
+ * Calculates position and visibility for content slots in the feed.
  * Uses position-based virtual scrolling (TikTok-style).
  *
  * Architecture:
@@ -165,8 +184,8 @@ interface SlotPosition {
     /** Opacity for transition effect */
     opacity: number;
 }
-interface UseVideoFeedPositionOptions {
-    /** Total number of videos */
+interface UseFeedPositionOptions {
+    /** Total number of items */
     totalCount: number;
     /** Current active index */
     activeIndex: number;
@@ -184,7 +203,7 @@ interface UseVideoFeedPositionOptions {
     /** Number of slots to render before/after active (default: 1) */
     bufferSize?: number;
 }
-interface UseVideoFeedPositionReturn {
+interface UseFeedPositionReturn {
     /** Positions for all slots that should render */
     slots: SlotPosition[];
     /** Current scroll offset (for container transform) */
@@ -211,8 +230,8 @@ interface UseVideoFeedPositionReturn {
  *
  * @example
  * ```tsx
- * const { slots, isAtEnd } = useVideoFeedPosition({
- *   totalCount: videos.length,
+ * const { slots, isAtEnd } = useFeedPosition({
+ *   totalCount: items.length,
  *   activeIndex,
  *   containerHeight: 800,
  *   dragOffset,
@@ -225,7 +244,7 @@ interface UseVideoFeedPositionReturn {
  * });
  * ```
  */
-declare function useVideoFeedPosition(options: UseVideoFeedPositionOptions): UseVideoFeedPositionReturn;
+declare function useFeedPosition(options: UseFeedPositionOptions): UseFeedPositionReturn;
 /**
  * Calculate the slot index from a Y position
  * Useful for snap-to-slot logic
@@ -238,9 +257,9 @@ declare function useVideoFeedPosition(options: UseVideoFeedPositionOptions): Use
 declare function getSlotIndexFromPosition(yPosition: number, containerHeight: number, totalCount: number): number;
 
 /**
- * VideoFeed CSS
+ * Feed CSS
  */
-declare const VIDEO_FEED_CSS = "\n/* \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\n * VideoFeed Styles\n * \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 */\n\n.sv-video-feed {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background: var(--sv-bg-primary, #000);\n  touch-action: pan-y;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Feed Container (holds all slots)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-video-feed__container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  will-change: transform;\n}\n\n/* Smooth transition when not swiping */\n.sv-video-feed__container--snapping {\n  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n/* No transition during swipe for immediate feedback */\n.sv-video-feed__container--swiping {\n  transition: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Video Slot Wrapper\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-video-feed__slot {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  will-change: transform, opacity;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n}\n\n/* Active slot */\n.sv-video-feed__slot--active {\n  z-index: 2;\n}\n\n/* Adjacent slots (for preview) */\n.sv-video-feed__slot--adjacent {\n  z-index: 1;\n  pointer-events: none;\n}\n\n/* Transition for smooth snap animations (when not swiping) */\n.sv-video-feed__slot--transitioning {\n  transition: transform 0.175s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n              opacity 0.2s ease;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Loading State\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-video-feed__loading {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--sv-spacing-md, 16px);\n  color: var(--sv-text-secondary, #999);\n}\n\n.sv-video-feed__loading-spinner {\n  width: 32px;\n  height: 32px;\n  border: 3px solid rgba(255, 255, 255, 0.2);\n  border-top-color: var(--sv-color-primary, #fe2c55);\n  border-radius: 50%;\n  animation: sv-feed-spinner 0.8s linear infinite;\n}\n\n@keyframes sv-feed-spinner {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.sv-video-feed__loading-text {\n  font-size: var(--sv-font-size-sm, 13px);\n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Empty State\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-video-feed__empty {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  color: var(--sv-text-secondary, #999);\n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n}\n\n.sv-video-feed__empty-icon {\n  font-size: 48px;\n  margin-bottom: var(--sv-spacing-md, 16px);\n}\n\n.sv-video-feed__empty-text {\n  font-size: var(--sv-font-size-md, 14px);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * End of Feed\n * Note: Positioned outside container but above slots. Uses safe-area-inset\n * to avoid being covered by device notch/home indicator.\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-video-feed__end {\n  position: absolute;\n  /* Safe bottom positioning - accounts for device UI */\n  bottom: calc(var(--sv-spacing-xl, 32px) + env(safe-area-inset-bottom, 0px));\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10; /* Above slots (z-index 1-2) */\n  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-md, 16px);\n  background: rgba(0, 0, 0, 0.7);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: var(--sv-border-radius-md, 8px);\n  color: var(--sv-text-secondary, #999);\n  font-size: var(--sv-font-size-sm, 13px);\n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n  pointer-events: none; /* Don't block interactions */\n  animation: sv-feed-end-fade-in 0.3s ease-out;\n}\n\n@keyframes sv-feed-end-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Reduced Motion\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n@media (prefers-reduced-motion: reduce) {\n  .sv-video-feed__container--snapping {\n    transition: none;\n  }\n  \n  .sv-video-feed__loading-spinner {\n    animation: none;\n  }\n}\n";
+declare const FEED_CSS = "\n/* \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\n * Feed Styles\n * \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 */\n\n.sv-feed {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background: var(--sv-bg-primary, #000);\n  touch-action: pan-y;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Feed Container (holds all slots)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-feed__container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  will-change: transform;\n}\n\n/* Smooth transition when not swiping */\n.sv-feed__container--snapping {\n  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n/* No transition during swipe for immediate feedback */\n.sv-feed__container--swiping {\n  transition: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Content Slot Wrapper\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-feed__slot {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  will-change: transform, opacity;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n}\n\n/* Active slot */\n.sv-feed__slot--active {\n  z-index: 2;\n}\n\n/* Adjacent slots (for preview) */\n.sv-feed__slot--adjacent {\n  z-index: 1;\n  pointer-events: none;\n}\n\n/* Transition for smooth snap animations (when not swiping) */\n.sv-feed__slot--transitioning {\n  transition: transform 0.175s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n              opacity 0.2s ease;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Loading State\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-feed__loading {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--sv-spacing-md, 16px);\n  color: var(--sv-text-secondary, #999);\n}\n\n.sv-feed__loading-spinner {\n  width: 32px;\n  height: 32px;\n  border: 3px solid rgba(255, 255, 255, 0.2);\n  border-top-color: var(--sv-color-primary, #fe2c55);\n  border-radius: 50%;\n  animation: sv-feed-spinner 0.8s linear infinite;\n}\n\n@keyframes sv-feed-spinner {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.sv-feed__loading-text {\n  font-size: var(--sv-font-size-sm, 13px);\n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Empty State\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-feed__empty {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  color: var(--sv-text-secondary, #999);\n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n}\n\n.sv-feed__empty-icon {\n  font-size: 48px;\n  margin-bottom: var(--sv-spacing-md, 16px);\n}\n\n.sv-feed__empty-text {\n  font-size: var(--sv-font-size-md, 14px);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * End of Feed\n * Note: Positioned outside container but above slots. Uses safe-area-inset\n * to avoid being covered by device notch/home indicator.\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-feed__end {\n  position: absolute;\n  /* Safe bottom positioning - accounts for device UI */\n  bottom: calc(var(--sv-spacing-xl, 32px) + env(safe-area-inset-bottom, 0px));\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10; /* Above slots (z-index 1-2) */\n  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-md, 16px);\n  background: rgba(0, 0, 0, 0.7);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: var(--sv-border-radius-md, 8px);\n  color: var(--sv-text-secondary, #999);\n  font-size: var(--sv-font-size-sm, 13px);\n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n  pointer-events: none; /* Don't block interactions */\n  animation: sv-feed-end-fade-in 0.3s ease-out;\n}\n\n@keyframes sv-feed-end-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Reduced Motion\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n@media (prefers-reduced-motion: reduce) {\n  .sv-feed__container--snapping {\n    transition: none;\n  }\n  \n  .sv-feed__loading-spinner {\n    animation: none;\n  }\n}\n";
 
 /**
  * VideoFeed Constants
@@ -278,8 +297,8 @@ declare const SLOT_INDEX_DATASET_KEY = "slotIndex";
  */
 declare const SLOT_ACTIVE_DATASET_KEY = "slotActive";
 /**
- * CSS class prefix for VideoFeed components.
+ * CSS class prefix for Feed components.
  */
-declare const VIDEO_FEED_CLASS_PREFIX = "sv-video-feed";
+declare const FEED_CLASS_PREFIX = "sv-feed";
 
-export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, type SlotPosition, type UseVideoFeedPositionOptions, type UseVideoFeedPositionReturn, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, type VideoFeedContextValue, VideoFeedHeadless, type VideoFeedHeadlessProps, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition };
+export { FEED_CLASS_PREFIX, FEED_CSS, FeedContext, type FeedContextValue, FeedHeadless, type FeedHeadlessProps, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, type SlotPosition, type UseFeedPositionOptions, type UseFeedPositionReturn, FEED_CLASS_PREFIX as VIDEO_FEED_CLASS_PREFIX, FEED_CSS as VIDEO_FEED_CSS, FeedContext as VideoFeedContext, type FeedContextValue as VideoFeedContextValue, FeedHeadless as VideoFeedHeadless, type VideoFeedHeadlessProps, getSlotIndexFromPosition, useFeedContext, useFeedPosition, useOptionalFeedContext, useOptionalFeedContext as useOptionalVideoFeedContext, useFeedContext as useVideoFeedContext, useFeedPosition as useVideoFeedPosition };

package/dist/components/Feed/index.js

@@ -0,0 +1 @@
+export { FEED_CLASS_PREFIX, FEED_CSS, FeedContext, FeedHeadless, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, FEED_CLASS_PREFIX as VIDEO_FEED_CLASS_PREFIX, FEED_CSS as VIDEO_FEED_CSS, FeedContext as VideoFeedContext, FeedHeadless as VideoFeedHeadless, getSlotIndexFromPosition, useFeedContext, useFeedPosition, useOptionalFeedContext, useOptionalFeedContext as useOptionalVideoFeedContext, useFeedContext as useVideoFeedContext, useFeedPosition as useVideoFeedPosition } from '../../chunk-BEJAJFV6.js';