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

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

@@ -1,7 +1,8 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 import { VideoSlotHeadlessProps, VideoItem, UIResourceState, UIPlayerState, UIPlayerControls } from '@xhub-short/contracts';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+export { V as VideoSlotPlayIndicator, c as VideoSlotPlayIndicatorInner, b as VideoSlotPlayIndicatorInnerProps, a as VideoSlotPlayIndicatorProps } from '../../VideoSlotPlayIndicator-DPs8Xt5C.js';
 
 interface VideoSlotHeadlessExtendedProps extends VideoSlotHeadlessProps {
     /** Children (overlay, poster, etc.) */
@@ -10,10 +11,22 @@ interface VideoSlotHeadlessExtendedProps extends VideoSlotHeadlessProps {
     onTap?: () => void;
     /** Handle double tap */
     onDoubleTap?: () => void;
+    /** Handle long press (hold > 500ms) */
+    onLongPress?: () => void;
+    /**
+     * Disable tap gesture handling.
+     * When true, single tap won't trigger play/pause toggle or PlayIndicator.
+     * Useful during zoom gesture to prevent phantom taps from touchend events.
+     */
+    disableTap?: boolean;
     /** Custom error UI */
     renderError?: (error: Error, retry: () => void) => ReactNode;
     /** Custom loading UI */
     renderLoading?: () => ReactNode;
+    /** Custom number of loop counts */
+    loopCount?: number;
+    /** Custom styles */
+    style?: React.CSSProperties;
 }
 /**
  * VideoSlotHeadless Component
@@ -46,7 +59,7 @@ interface VideoSlotHeadlessExtendedProps extends VideoSlotHeadlessProps {
  *
  * Wrapped with React.memo to prevent unnecessary re-renders.
  */
-declare function VideoSlotHeadlessBase({ video, resourceState, playerState, playerControls, className, children, onVisible: _onVisible, onHidden: _onHidden, onTap, onDoubleTap, renderError, renderLoading, restoreFrame, }: VideoSlotHeadlessExtendedProps): React.ReactElement;
+declare function VideoSlotHeadlessBase({ video, resourceState, playerState, playerControls, className, children, onVisible: _onVisible, onHidden: _onHidden, onTap, onDoubleTap, onLongPress, disableTap, renderError, renderLoading, restoreFrame, style, }: VideoSlotHeadlessExtendedProps): React.ReactElement;
 /**
  * VideoSlotHeadless - Memoized for performance
  *
@@ -366,72 +379,22 @@ declare namespace VideoSlotLikeAnimation {
     var displayName: string;
 }
 
-/**
- * VideoSlotPlayIndicator - Shows play/pause icon when user taps video
- *
- * ONLY shows indicator when user explicitly taps to toggle play/pause.
- * Does NOT show on: swipe, auto-play, video loop, video change.
- *
- * Uses `lastUserToggleTime` from VideoSlotContext to detect user taps.
- *
- * ## Re-render Optimization
- *
- * Uses the "Context Selector" pattern to prevent re-renders:
- * - Outer component consumes context
- * - Inner component is memoized and receives data via props
- * - React.memo compares props → prevents re-render when context changes
- *   but the selected values are the same
- *
- * @example
- * ```tsx
- * // Inside VideoSlot - auto-hide after tap
- * <VideoSlotPlayIndicator />
- *
- * // Persist play icon while paused (YouTube style)
- * <VideoSlotPlayIndicator persistWhenPaused />
- *
- * // With custom icons
- * <VideoSlotPlayIndicator
- *   playIcon={<CustomPlayIcon />}
- *   pauseIcon={<CustomPauseIcon />}
- * />
- * ```
- */
-
-interface VideoSlotPlayIndicatorProps {
-    /** Custom play icon */
-    playIcon?: ReactNode;
-    /** Custom pause icon */
-    pauseIcon?: ReactNode;
-    /** Icon size in pixels */
-    size?: number;
-    /** Animation duration in ms */
-    duration?: number;
-    /**
-     * Keep play icon visible while video is paused (YouTube style)
-     * When false, icon auto-hides after duration
-     */
-    persistWhenPaused?: boolean;
-    /** Additional CSS class */
+interface ReportedVideoOverlayProps {
+    /** Handler when user wants to watch video anyway */
+    onWatchVideo: () => void;
+    /** Custom title text */
+    title?: string;
+    /** Custom message text */
+    message?: string;
+    /** Custom button text */
+    buttonText?: string;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Custom class name */
     className?: string;
-    /** Test ID */
-    testId?: string;
-}
-/**
- * VideoSlotPlayIndicator Component
- *
- * This outer component:
- * 1. Consumes context (will re-render when context changes)
- * 2. Selects only the needed values
- * 3. Passes them as props to memoized inner component
- *
- * The inner component will only re-render when the selected values change,
- * NOT when unrelated context values change (e.g., during seek operations).
- */
-declare function VideoSlotPlayIndicator(props: VideoSlotPlayIndicatorProps): React.ReactElement | null;
-declare namespace VideoSlotPlayIndicator {
-    var displayName: string;
 }
+declare function ReportedVideoOverlayComponent({ onWatchVideo, title, message, buttonText, icon, className, }: ReportedVideoOverlayProps): ReactElement;
+declare const ReportedVideoOverlay: react.MemoExoticComponent<typeof ReportedVideoOverlayComponent>;
 
 interface VideoSlotContextValue {
     /** Video item data */
@@ -636,7 +599,7 @@ declare const Z_INDEX_CSS_VARS: {
  * - Avoids global selectors
  * - Follows BEM-like naming: sv-video-slot__[element]--[modifier]
  */
-declare const VIDEO_SLOT_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 * Z-INDEX LAYERING CONTRACT\n * \n * Override these variables to customize layer stacking:\n * --sv-z-poster:       Poster/Thumbnail layer (default: 3)\n * --sv-z-slot-spinner: Loading spinner layer (default: 2)\n * --sv-z-indicator:    Error/Play indicator layer (default: 4)\n * --sv-z-progress:     Progress bar layer (default: 5)\n *\n * Layer Stack (bottom to top):\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502  z-index: 5 - Progress Bar (topmost)        \u2502\n * \u2502  z-index: 4 - Error UI / Play Indicator     \u2502\n * \u2502  z-index: 3 - Poster / Thumbnail            \u2502\n * \u2502  z-index: 2 - Loading Spinner               \u2502\n * \u2502  z-index: 1 - Video Element                 \u2502\n * \u2502  z-index: 0 - Slot Container (base)         \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\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/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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 * VideoSlot - Container for individual video in feed\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-slot {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--sv-bg-primary, #000);\n  /* Touch optimization */\n  touch-action: none;\n  user-select: none;\n  -webkit-user-select: none;\n  /* GPU acceleration */\n  will-change: contents;\n  contain: layout style paint;\n}\n\n/* Active slot (currently visible) */\n.sv-video-slot--active {\n  z-index: 1;\n}\n\n/* Loading state */\n.sv-video-slot--loading .sv-video-slot__video {\n  opacity: 0;\n}\n\n.sv-video-slot--loading .sv-video-slot__poster {\n  opacity: 1;\n}\n\n/* Playing state */\n.sv-video-slot--playing .sv-video-slot__video {\n  opacity: 1;\n}\n\n.sv-video-slot--playing .sv-video-slot__poster {\n  opacity: 0;\n}\n\n/* Paused state - keep poster hidden (show paused video frame, not poster) */\n.sv-video-slot--paused .sv-video-slot__video {\n  opacity: 1;\n}\n\n.sv-video-slot--paused .sv-video-slot__poster {\n  opacity: 0;\n}\n\n/* Hidden poster (explicit class applied by VideoSlotPoster component) */\n.sv-video-slot__poster--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Error state */\n.sv-video-slot--error {\n  display: flex;\n  align-items: center;\n  justify-content: center;\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 * Video Element\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-slot__video-container {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sv-video-slot__video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  background-color: transparent;\n  /* Smooth fade transition */\n  transition: opacity var(--sv-transition-duration, 300ms) ease-out;\n}\n\n/* Video loaded but not playing yet */\n.sv-video-slot__video[data-loaded=\"true\"] {\n  opacity: 1;\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 * Poster / Thumbnail / First Frame\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-slot__poster {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sv-bg-primary, #000);\n  /* Poster should be ABOVE spinner (z-index: 2) so thumbnail shows instead of spinner */\n  z-index: var(--sv-z-poster, 3);\n  /* Smooth fade transition */\n  transition: opacity var(--sv-transition-duration, 300ms) ease-out;\n  pointer-events: none;\n}\n\n.sv-video-slot__poster-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* First frame (client-captured) */\n.sv-video-slot__poster--first-frame .sv-video-slot__poster-image {\n  image-rendering: auto;\n}\n\n/* Skeleton placeholder */\n.sv-video-slot__poster--skeleton {\n  background: linear-gradient(\n    110deg,\n    var(--sv-skeleton-bg, rgba(255, 255, 255, 0.05)) 0%,\n    var(--sv-skeleton-shimmer, rgba(255, 255, 255, 0.1)) 50%,\n    var(--sv-skeleton-bg, rgba(255, 255, 255, 0.05)) 100%\n  );\n  background-size: 200% 100%;\n  animation: sv-slot-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes sv-slot-skeleton-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\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 * Overlay 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-video-slot__overlay {\n  position: absolute;\n  inset: 0;\n  z-index: var(--sv-z-overlay, 2);\n  /* Gradient background for better text visibility */\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.6) 0%,\n    rgba(0, 0, 0, 0.3) 20%,\n    transparent 40%,\n    transparent 60%,\n    rgba(0, 0, 0, 0.2) 80%,\n    rgba(0, 0, 0, 0.4) 100%\n  );\n  pointer-events: none;\n}\n\n/* \n * Overlay sections should NOT block clicks (pass-through to container for play/pause)\n * Only actual interactive elements (buttons, links) inside sections should receive clicks.\n * \n * DO NOT use: .sv-video-slot__overlay > * { pointer-events: auto; }\n * This would make entire sections block clicks even on \"empty\" areas.\n */\n.sv-video-slot__overlay-top,\n.sv-video-slot__overlay-bottom,\n.sv-video-slot__overlay-left,\n.sv-video-slot__overlay-right,\n.sv-video-slot__actions,\n.sv-video-slot__author {\n  pointer-events: none;\n}\n\n/* Only interactive elements inside overlay sections should receive clicks */\n.sv-video-slot__overlay button,\n.sv-video-slot__overlay a,\n.sv-video-slot__overlay [role=\"button\"],\n.sv-video-slot__overlay input,\n.sv-video-slot__overlay label,\n.sv-video-slot__overlay .sv-progress-bar,\n.sv-video-slot__overlay .sv-author-info,\n.sv-video-slot__overlay .sv-video-info,\n.sv-video-slot__overlay .sv-action-bar {\n  pointer-events: auto;\n}\n\n/* Overlay sections */\n.sv-video-slot__overlay-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: var(--sv-spacing-md, 16px);\n  padding-top: calc(var(--sv-safe-area-top, 0px) + var(--sv-spacing-md, 16px));\n}\n\n.sv-video-slot__overlay-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0px;\n  padding: var(--sv-spacing-md, 16px);\n  padding-bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-spacing-md, 16px));\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-spacing-sm, 8px);\n}\n\n.sv-video-slot__overlay-left {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  padding: var(--sv-spacing-md, 16px);\n}\n\n.sv-video-slot__overlay-right {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  padding: var(--sv-spacing-md, 16px);\n}\n\n/* Action bar (typically right side) */\n.sv-video-slot__actions {\n  position: absolute;\n  right: var(--sv-spacing-sm, 8px);\n  bottom: calc(var(--sv-safe-area-bottom, 0px) + 80px);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Author info (above bottom section, left side) */\n.sv-video-slot__author {\n  position: absolute;\n  left: var(--sv-spacing-md, 16px);\n  /* Position above .sv-video-slot__overlay-bottom (which has ~80px content) */\n  bottom: calc(var(--sv-safe-area-bottom, 0px) + 100px);\n  right: 80px; /* Leave space for actions */\n  max-width: calc(100% - 100px); /* Don't overlap with actions */\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 * Error State\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-slot__error {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sv-bg-primary, #000);\n  color: var(--sv-text-secondary, #999);\n  text-align: center;\n  padding: var(--sv-spacing-lg, 20px);\n  gap: var(--sv-spacing-md, 16px);\n  z-index: var(--sv-z-indicator, 3);\n}\n\n.sv-video-slot__error-icon {\n  font-size: 48px;\n  opacity: 0.6;\n}\n\n.sv-video-slot__error-message {\n  font-size: var(--sv-font-size-md, 14px);\n  max-width: 200px;\n}\n\n.sv-video-slot__error-retry {\n  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-md, 16px);\n  background-color: var(--sv-color-primary, #fe2c55);\n  color: #fff;\n  border: none;\n  border-radius: var(--sv-radius-md, 8px);\n  font-size: var(--sv-font-size-sm, 12px);\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 150ms ease;\n}\n\n.sv-video-slot__error-retry:hover {\n  background-color: var(--sv-color-primary-hover, #e02850);\n}\n\n.sv-video-slot__error-retry:active {\n  transform: scale(0.96);\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 * Loading Spinner\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-slot__spinner {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  /* Use slot-specific z-index (not global --sv-z-overlay which may conflict) */\n  z-index: var(--sv-z-slot-spinner, 2);\n}\n\n.sv-video-slot__spinner-circle {\n  width: 40px;\n  height: 40px;\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-slot-spin 0.8s linear infinite;\n}\n\n@keyframes sv-slot-spin {\n  to {\n    transform: rotate(360deg);\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 * Play/Pause Visual 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-video-slot__play-indicator {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 64px;\n  height: 64px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: var(--sv-z-indicator, 3);\n  opacity: 0;\n  transition: opacity 200ms ease-out;\n  pointer-events: none;\n}\n\n/* Show indicator */\n.sv-video-slot__play-indicator--visible {\n  opacity: 0.65;\n}\n\n/* Persist mode: stay visible, no animation */\n.sv-video-slot__play-indicator--persist {\n  opacity: 0.65;\n}\n\n/* Animating out: scale up + fade out */\n.sv-video-slot__play-indicator--animating-out {\n  animation: sv-slot-indicator-out var(--sv-indicator-duration, 200ms) ease-out forwards;\n}\n\n@keyframes sv-slot-indicator-out {\n  0% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(1.5);\n  }\n}\n\n.sv-video-slot__play-indicator-icon {\n  color: #fff;\n  font-size: 28px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\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 * Progress 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-video-slot__progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background-color: rgba(255, 255, 255, 0.2);\n  z-index: var(--sv-z-progress, 4);\n}\n\n.sv-video-slot__progress-bar {\n  height: 100%;\n  background-color: var(--sv-color-primary, #fe2c55);\n  transition: width 100ms linear;\n}\n\n.sv-video-slot__progress-buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.3);\n}\n";
+declare const VIDEO_SLOT_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 * Z-INDEX LAYERING CONTRACT\n * \n * Override these variables to customize layer stacking:\n * --sv-z-poster:       Poster/Thumbnail layer (default: 3)\n * --sv-z-slot-spinner: Loading spinner layer (default: 2)\n * --sv-z-indicator:    Error/Play indicator layer (default: 4)\n * --sv-z-progress:     Progress bar layer (default: 5)\n *\n * Layer Stack (bottom to top):\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502  z-index: 5 - Progress Bar (topmost)        \u2502\n * \u2502  z-index: 4 - Error UI / Play Indicator     \u2502\n * \u2502  z-index: 3 - Poster / Thumbnail            \u2502\n * \u2502  z-index: 2 - Loading Spinner               \u2502\n * \u2502  z-index: 1 - Video Element                 \u2502\n * \u2502  z-index: 0 - Slot Container (base)         \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\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/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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 * VideoSlot - Container for individual video in feed\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-slot {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--sv-bg-primary, #000);\n  /* Touch optimization */\n  touch-action: none;\n  user-select: none;\n  -webkit-user-select: none;\n  /* GPU acceleration */\n  will-change: contents;\n  contain: layout style paint;\n}\n\n/* Active slot (currently visible) */\n.sv-video-slot--active {\n  z-index: 1;\n}\n\n/* Loading state */\n.sv-video-slot--loading .sv-video-slot__video {\n  opacity: 0;\n}\n\n.sv-video-slot--loading .sv-video-slot__poster {\n  opacity: 1;\n}\n\n/* Playing state */\n.sv-video-slot--playing .sv-video-slot__video {\n  opacity: 1;\n}\n\n.sv-video-slot--playing .sv-video-slot__poster {\n  opacity: 0;\n}\n\n/* Paused state - keep poster hidden (show paused video frame, not poster) */\n.sv-video-slot--paused .sv-video-slot__video {\n  opacity: 1;\n}\n\n.sv-video-slot--paused .sv-video-slot__poster {\n  opacity: 0;\n}\n\n/* Hidden poster (explicit class applied by VideoSlotPoster component) */\n.sv-video-slot__poster--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Error state */\n.sv-video-slot--error {\n  display: flex;\n  align-items: center;\n  justify-content: center;\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 * Video Element\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-slot__video-container {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sv-video-slot__video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  background-color: transparent;\n  /* Smooth fade transition */\n  transition: opacity var(--sv-transition-duration, 300ms) ease-out;\n}\n\n/* Video loaded but not playing yet */\n.sv-video-slot__video[data-loaded=\"true\"] {\n  opacity: 1;\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 * Poster / Thumbnail / First Frame\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-slot__poster {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sv-bg-primary, #000);\n  /* Poster should be ABOVE spinner (z-index: 2) so thumbnail shows instead of spinner */\n  z-index: var(--sv-z-poster, 3);\n  /* Smooth fade transition */\n  transition: opacity var(--sv-transition-duration, 300ms) ease-out;\n  pointer-events: none;\n}\n\n.sv-video-slot__poster-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* First frame (client-captured) */\n.sv-video-slot__poster--first-frame .sv-video-slot__poster-image {\n  image-rendering: auto;\n}\n\n/* Skeleton placeholder */\n.sv-video-slot__poster--skeleton {\n  background: linear-gradient(\n    110deg,\n    var(--sv-skeleton-bg, rgba(255, 255, 255, 0.05)) 0%,\n    var(--sv-skeleton-shimmer, rgba(255, 255, 255, 0.1)) 50%,\n    var(--sv-skeleton-bg, rgba(255, 255, 255, 0.05)) 100%\n  );\n  background-size: 200% 100%;\n  animation: sv-slot-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes sv-slot-skeleton-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\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 * Overlay 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-video-slot__overlay {\n  position: absolute;\n  inset: 0;\n  z-index: var(--sv-z-overlay, 2);\n  /* Gradient background for better text visibility */\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.6) 0%,\n    rgba(0, 0, 0, 0.3) 20%,\n    transparent 40%,\n    transparent 60%,\n    rgba(0, 0, 0, 0.2) 80%,\n    rgba(0, 0, 0, 0.4) 100%\n  );\n  pointer-events: none;\n}\n\n/* \n * Overlay sections should NOT block clicks (pass-through to container for play/pause)\n * Only actual interactive elements (buttons, links) inside sections should receive clicks.\n * \n * DO NOT use: .sv-video-slot__overlay > * { pointer-events: auto; }\n * This would make entire sections block clicks even on \"empty\" areas.\n */\n.sv-video-slot__overlay-top,\n.sv-video-slot__overlay-bottom,\n.sv-video-slot__overlay-left,\n.sv-video-slot__overlay-right,\n.sv-video-slot__actions,\n.sv-video-slot__author {\n  pointer-events: none;\n}\n\n/* Only interactive elements inside overlay sections should receive clicks */\n.sv-video-slot__overlay button,\n.sv-video-slot__overlay a,\n.sv-video-slot__overlay [role=\"button\"],\n.sv-video-slot__overlay input,\n.sv-video-slot__overlay label,\n.sv-video-slot__overlay .sv-progress-bar,\n.sv-video-slot__overlay .sv-author-info,\n.sv-video-slot__overlay .sv-video-info,\n.sv-video-slot__overlay .sv-action-bar {\n  pointer-events: auto;\n}\n\n/* Overlay sections */\n.sv-video-slot__overlay-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: var(--sv-spacing-md, 16px);\n  padding-top: calc(var(--sv-safe-area-top, 0px) + var(--sv-spacing-md, 16px));\n}\n\n.sv-video-slot__overlay-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0px;\n  padding: var(--sv-spacing-md, 16px);\n  padding-bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-spacing-md, 16px));\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-spacing-sm, 8px);\n}\n\n.sv-video-slot__overlay-left {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  padding: var(--sv-spacing-md, 16px);\n}\n\n.sv-video-slot__overlay-right {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  padding: var(--sv-spacing-md, 16px);\n}\n\n/* Action bar (typically right side) */\n.sv-video-slot__actions {\n  position: absolute;\n  right: var(--sv-spacing-sm, 8px);\n  bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-actions-bottom, 80px) + var(--sv-playlist-bar-offset, 0px));\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  transition: bottom 0.3s ease-in-out;\n}\n\n/* Author info (above bottom section, left side) */\n.sv-video-slot__author {\n  position: absolute;\n  left: var(--sv-spacing-md, 16px);\n  /* Position above .sv-video-slot__overlay-bottom (which has ~80px content) */\n  bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-author-bottom, 100px) + var(--sv-playlist-bar-offset, 0px));\n  right: 80px; /* Leave space for actions */\n  max-width: calc(100% - 100px); /* Don't overlap with actions */\n  transition: bottom 0.3s ease-in-out;\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 * Error State\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-slot__error {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sv-bg-primary, #000);\n  color: var(--sv-text-secondary, #999);\n  text-align: center;\n  padding: var(--sv-spacing-lg, 20px);\n  gap: var(--sv-spacing-md, 16px);\n  z-index: var(--sv-z-indicator, 3);\n}\n\n.sv-video-slot__error-icon {\n  font-size: 48px;\n  opacity: 0.6;\n}\n\n.sv-video-slot__error-message {\n  font-size: var(--sv-font-size-md, 14px);\n  max-width: 200px;\n}\n\n.sv-video-slot__error-retry {\n  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-md, 16px);\n  background-color: var(--sv-color-primary, #fe2c55);\n  color: #fff;\n  border: none;\n  border-radius: var(--sv-radius-md, 8px);\n  font-size: var(--sv-font-size-sm, 12px);\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 150ms ease;\n}\n\n.sv-video-slot__error-retry:hover {\n  background-color: var(--sv-color-primary-hover, #e02850);\n}\n\n.sv-video-slot__error-retry:active {\n  transform: scale(0.96);\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 * Loading Spinner\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-slot__spinner {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  /* Use slot-specific z-index (not global --sv-z-overlay which may conflict) */\n  z-index: var(--sv-z-slot-spinner, 2);\n}\n\n.sv-video-slot__spinner-circle {\n  width: 40px;\n  height: 40px;\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-slot-spin 0.8s linear infinite;\n}\n\n@keyframes sv-slot-spin {\n  to {\n    transform: rotate(360deg);\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 * Play/Pause Visual 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-video-slot__play-indicator {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 64px;\n  height: 64px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: var(--sv-z-indicator, 3);\n  opacity: 0;\n  transition: opacity 200ms ease-out;\n  pointer-events: none;\n}\n\n/* Show indicator */\n.sv-video-slot__play-indicator--visible {\n  opacity: 0.65;\n}\n\n/* Persist mode: stay visible, no animation */\n.sv-video-slot__play-indicator--persist {\n  opacity: 0.65;\n}\n\n/* Animating out: scale up + fade out */\n.sv-video-slot__play-indicator--animating-out {\n  animation: sv-slot-indicator-out var(--sv-indicator-duration, 200ms) ease-out forwards;\n}\n\n@keyframes sv-slot-indicator-out {\n  0% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(1.5);\n  }\n}\n\n.sv-video-slot__play-indicator-icon {\n  color: #fff;\n  font-size: 28px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\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 * Progress 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-video-slot__progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background-color: rgba(255, 255, 255, 0.2);\n  z-index: var(--sv-z-progress, 4);\n}\n\n.sv-video-slot__progress-bar {\n  height: 100%;\n  background-color: var(--sv-color-primary, #fe2c55);\n  transition: width 100ms linear;\n}\n\n.sv-video-slot__progress-buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.3);\n}\n";
 
 /**
  * VideoSlotLikeAnimation CSS Styles
@@ -649,4 +612,4 @@ declare const VIDEO_SLOT_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\
  */
 declare const VIDEO_SLOT_LIKE_ANIMATION_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   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-like-animation-container {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  pointer-events: none;\n  z-index: var(--sv-z-indicator, 3);\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   Single Heart\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-like-heart {\n  position: absolute;\n  left: var(--sv-heart-x, 50%);\n  top: var(--sv-heart-y, 50%);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  will-change: transform, opacity;\n}\n\n.sv-like-heart__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sv-heart-size, 80px);\n  height: var(--sv-heart-size, 80px);\n  transform-origin: center;\n  animation-duration: var(--sv-heart-duration, 1000ms);\n  animation-fill-mode: forwards;\n  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);\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   Float Animation (TikTok style)\n   - Hearts float upward while wiggling\n   - Fades out near the top\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-like-heart--float .sv-like-heart__icon {\n  animation-name: sv-heart-float;\n  animation-timing-function: ease-out;\n}\n\n@keyframes sv-heart-float {\n  0% {\n    opacity: 0;\n    transform: scale(0) rotate(var(--sv-heart-rotation, 0deg));\n  }\n  10% {\n    opacity: 1;\n    transform: scale(calc(var(--sv-heart-scale, 1) * 1.2)) rotate(var(--sv-heart-rotation, 0deg));\n  }\n  20% {\n    transform: \n      scale(var(--sv-heart-scale, 1)) \n      rotate(var(--sv-heart-rotation, 0deg)) \n      translateY(-20px) \n      translateX(10px);\n  }\n  40% {\n    transform: \n      scale(var(--sv-heart-scale, 1)) \n      rotate(calc(var(--sv-heart-rotation, 0deg) - 10deg)) \n      translateY(-60px) \n      translateX(-15px);\n  }\n  60% {\n    opacity: 1;\n    transform: \n      scale(var(--sv-heart-scale, 1)) \n      rotate(calc(var(--sv-heart-rotation, 0deg) + 15deg)) \n      translateY(-100px) \n      translateX(10px);\n  }\n  80% {\n    opacity: 0.6;\n    transform: \n      scale(calc(var(--sv-heart-scale, 1) * 0.9)) \n      rotate(calc(var(--sv-heart-rotation, 0deg) - 5deg)) \n      translateY(-140px) \n      translateX(-5px);\n  }\n  100% {\n    opacity: 0;\n    transform: \n      scale(calc(var(--sv-heart-scale, 1) * 0.7)) \n      rotate(var(--sv-heart-rotation, 0deg)) \n      translateY(-180px) \n      translateX(0);\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   Burst Animation\n   - Heart bursts outward with energy\n   - Scales up quickly then fades\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-like-heart--burst .sv-like-heart__icon {\n  animation-name: sv-heart-burst;\n  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n@keyframes sv-heart-burst {\n  0% {\n    opacity: 0;\n    transform: scale(0) rotate(var(--sv-heart-rotation, 0deg));\n  }\n  20% {\n    opacity: 1;\n    transform: scale(calc(var(--sv-heart-scale, 1) * 1.5)) rotate(calc(var(--sv-heart-rotation, 0deg) + 15deg));\n  }\n  40% {\n    transform: scale(calc(var(--sv-heart-scale, 1) * 1.2)) rotate(calc(var(--sv-heart-rotation, 0deg) - 10deg));\n  }\n  60% {\n    opacity: 1;\n    transform: scale(var(--sv-heart-scale, 1)) rotate(var(--sv-heart-rotation, 0deg)) translateY(-30px);\n  }\n  80% {\n    opacity: 0.5;\n    transform: scale(calc(var(--sv-heart-scale, 1) * 0.9)) rotate(var(--sv-heart-rotation, 0deg)) translateY(-60px);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(calc(var(--sv-heart-scale, 1) * 0.6)) rotate(var(--sv-heart-rotation, 0deg)) translateY(-80px);\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   Scale Animation\n   - Simple scale up and fade\n   - Clean and minimal\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-like-heart--scale .sv-like-heart__icon {\n  animation-name: sv-heart-scale;\n  animation-timing-function: ease-out;\n}\n\n@keyframes sv-heart-scale {\n  0% {\n    opacity: 0;\n    transform: scale(0);\n  }\n  20% {\n    opacity: 1;\n    transform: scale(calc(var(--sv-heart-scale, 1) * 1.3));\n  }\n  40% {\n    transform: scale(var(--sv-heart-scale, 1));\n  }\n  70% {\n    opacity: 1;\n    transform: scale(var(--sv-heart-scale, 1));\n  }\n  100% {\n    opacity: 0;\n    transform: scale(calc(var(--sv-heart-scale, 1) * 1.1));\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   Bounce Animation\n   - Heart bounces in place with energy\n   - Playful and fun\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-like-heart--bounce .sv-like-heart__icon {\n  animation-name: sv-heart-bounce;\n  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n@keyframes sv-heart-bounce {\n  0% {\n    opacity: 0;\n    transform: scale(0) rotate(var(--sv-heart-rotation, 0deg)) translateY(0);\n  }\n  15% {\n    opacity: 1;\n    transform: scale(calc(var(--sv-heart-scale, 1) * 1.4)) rotate(calc(var(--sv-heart-rotation, 0deg) + 10deg)) translateY(-30px);\n  }\n  30% {\n    transform: scale(calc(var(--sv-heart-scale, 1) * 0.9)) rotate(calc(var(--sv-heart-rotation, 0deg) - 5deg)) translateY(10px);\n  }\n  45% {\n    transform: scale(calc(var(--sv-heart-scale, 1) * 1.15)) rotate(calc(var(--sv-heart-rotation, 0deg) + 5deg)) translateY(-15px);\n  }\n  60% {\n    opacity: 1;\n    transform: scale(var(--sv-heart-scale, 1)) rotate(var(--sv-heart-rotation, 0deg)) translateY(0);\n  }\n  80% {\n    opacity: 0.7;\n    transform: scale(var(--sv-heart-scale, 1)) rotate(var(--sv-heart-rotation, 0deg)) translateY(-10px);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(calc(var(--sv-heart-scale, 1) * 0.8)) rotate(var(--sv-heart-rotation, 0deg)) translateY(-20px);\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   Accessibility: Reduce motion\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@media (prefers-reduced-motion: reduce) {\n  .sv-like-heart__icon {\n    animation-duration: 0.5s !important;\n  }\n  \n  .sv-like-heart--float .sv-like-heart__icon,\n  .sv-like-heart--burst .sv-like-heart__icon,\n  .sv-like-heart--bounce .sv-like-heart__icon {\n    animation-name: sv-heart-scale;\n  }\n}\n";
 
-export { type HeartInstance, LOADING_ATTR, LOADING_DATASET_KEY, type LikeAnimationElement, type LikeAnimationStyle, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, type VideoSlotContextValue, VideoSlotHeadless, type VideoSlotHeadlessExtendedProps, VideoSlotLikeAnimation, type VideoSlotLikeAnimationProps, type VideoSlotLikeAnimationRef, VideoSlotOverlay, type VideoSlotOverlayProps, type VideoSlotOverlayRegionProps, VideoSlotPlayIndicator, type VideoSlotPlayIndicatorProps, VideoSlotPoster, type VideoSlotPosterProps, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo };
+export { type HeartInstance, LOADING_ATTR, LOADING_DATASET_KEY, type LikeAnimationElement, type LikeAnimationStyle, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, ReportedVideoOverlay, type ReportedVideoOverlayProps, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, type VideoSlotContextValue, VideoSlotHeadless, type VideoSlotHeadlessExtendedProps, VideoSlotLikeAnimation, type VideoSlotLikeAnimationProps, type VideoSlotLikeAnimationRef, VideoSlotOverlay, type VideoSlotOverlayProps, type VideoSlotOverlayRegionProps, VideoSlotPoster, type VideoSlotPosterProps, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo };

package/dist/components/VideoSlot/index.js

@@ -1 +1,2 @@
-export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPlayIndicator, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from '../../chunk-XDIH66C4.js';
+export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, ReportedVideoOverlay, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS } from '../../chunk-VJ744W5N.js';
+export { VideoSlotContext, VideoSlotPlayIndicator, VideoSlotPlayIndicatorInner, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from '../../chunk-MFJS65C5.js';

package/dist/components/VirtualSlider/index.js

@@ -1 +1 @@
-export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLIDER_SLOT_ACTIVE_CLASS, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLIDER_SLOT_TRANSITIONING_CLASS, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, getSlotIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from '../../chunk-AQHD6LPS.js';
+export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLIDER_SLOT_ACTIVE_CLASS, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLIDER_SLOT_TRANSITIONING_CLASS, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, getSlotIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from '../../chunk-YB7AXTX7.js';

package/dist/index.d.ts

@@ -2,18 +2,28 @@ import { VideoItem, UIPlayerState, UIPlayerControls, UIInteractionState, UIInter
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
 export { clsx, clsx as cn } from 'clsx';
-export { ErrorBoundary, ErrorBoundaryProps, ErrorMode } from './components/ErrorBoundary/index.js';
-export { Skeleton, SkeletonAnimation, SkeletonAvatar, SkeletonProps, SkeletonText, SkeletonVideo } from './components/Skeleton/index.js';
+export { ACTION_BAR_CSS, ActionBarBookmark, ActionBarComment, ActionBarHeadless, ActionBarHeadlessExtendedProps, ActionBarLike, ActionBarShare, ActionButton, ActionButtonExtendedProps, BookmarkButton, BookmarkButtonProps, CommentButton, CommentButtonProps, LikeButton, LikeButtonProps, ShareButton, ShareButtonProps } from './components/ActionBar/index.js';
+export { ADVANCE_MENU_CSS, AdvanceMenuHeadless, AdvanceMenuHeadlessProps, AdvanceMenuItemProps, AdvanceMenuSectionTitleProps, AdvanceMenuSeparatorProps } from './components/AdvanceMenu/index.js';
+export { ARTICLE_ACTIVE_ATTR, ARTICLE_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS, ArticleSlotActions, ArticleSlotActionsProps, ArticleSlotBottom, ArticleSlotBottomProps, ArticleSlotCaption, ArticleSlotCaptionProps, ArticleSlotContextValue, ArticleSlotHeadless, ArticleSlotHeadlessProps, ArticleSlotMusic, ArticleSlotMusicProps, ArticleSlotOverlay, ArticleSlotOverlayProps, ArticleSlotPlayIndicator, ArticleSlotPlayIndicatorProps, ArticleSlotReadMore, ArticleSlotReadMoreProps, ARTICLE_ACTIVE_ATTR as IMAGE_POST_ACTIVE_ATTR, ARTICLE_ID_ATTR as IMAGE_POST_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS as IMAGE_POST_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS as IMAGE_POST_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS as IMAGE_POST_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS as IMAGE_POST_SLOT_CSS, ArticleSlotActions as ImagePostSlotActions, ArticleSlotActionsProps as ImagePostSlotActionsProps, ArticleSlotBottom as ImagePostSlotBottom, ArticleSlotBottomProps as ImagePostSlotBottomProps, ArticleSlotCaption as ImagePostSlotCaption, ArticleSlotCaptionProps as ImagePostSlotCaptionProps, ArticleSlotContextValue as ImagePostSlotContextValue, ArticleSlotHeadless as ImagePostSlotHeadless, ArticleSlotHeadlessProps as ImagePostSlotHeadlessProps, ArticleSlotMusic as ImagePostSlotMusic, ArticleSlotMusicProps as ImagePostSlotMusicProps, ArticleSlotOverlay as ImagePostSlotOverlay, ArticleSlotOverlayProps as ImagePostSlotOverlayProps, ArticleSlotPlayIndicator as ImagePostSlotPlayIndicator, ArticleSlotPlayIndicatorProps as ImagePostSlotPlayIndicatorProps, ArticleSlotReadMore as ImagePostSlotReadMore, ArticleSlotReadMoreProps as ImagePostSlotReadMoreProps, useArticleSlotContext, useArticleSlotContext as useImagePostSlotContext, useOptionalArticleSlotContext, useOptionalArticleSlotContext as useOptionalImagePostSlotContext } from './components/ArticleSlot/index.js';
+export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorAvatarProps, AuthorDescription, AuthorDescriptionProps, AuthorInfoContext, AuthorInfoContextValue, AuthorInfoHeadless, AuthorInfoHeadlessExtendedProps, AuthorInfoVariant, AuthorName, AuthorNameProps, AvatarSize, FollowButton, FollowButtonProps, FollowButtonSize, useAuthorInfoContext, useOptionalAuthorInfoContext } from './components/AuthorInfo/index.js';
+export { BUFFERING_STATE_CLASS, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, UseAutoFirstFrameCaptureConfig, UseFirstFrameCaptureConfig, UseFirstFrameCaptureReturn, UseVideoElementConfig, UseVideoElementReturn, VIDEO_CLASS, VIDEO_PLAYER_CSS, Z_INDEX as VIDEO_PLAYER_Z_INDEX, Z_INDEX_CSS_VARS as VIDEO_PLAYER_Z_INDEX_CSS_VARS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoErrorOrigin, VideoPlayerHeadless, VideoPlayerHeadlessExtendedProps, VideoSourceType, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from './components/VideoPlayer/index.js';
 export { BookmarkFilledIcon, BookmarkIcon, CloseIcon, CommentIcon, HeartFilledIcon, HeartIcon, IconProps, MoreIcon, MusicIcon, PauseIcon, PlayIcon, PlusIcon, ShareIcon, UserCheckIcon, UserPlusIcon, VerifiedIcon, VolumeIcon, VolumeMutedIcon } from './components/icons/index.js';
+export { CLEAN_MODE_OVERLAY_CSS, CleanModeOverlayHeadless, CleanModeOverlayHeadlessProps, injectCleanModeOverlayCSS } from './components/CleanModeOverlay/index.js';
+export { C as COMMENT_SHEET_CSS, a as CommentInput, b as CommentInputProps, c as CommentItemComponent, d as CommentItemProps, e as CommentList, f as CommentListProps, g as CommentSheet, h as CommentSheetContext, i as CommentSheetContextValue, j as CommentSheetHeadless, k as CommentSheetHeadlessProps, l as CommentSheetI18n, R as ReplyTarget, S as SheetHeader, m as SheetHeaderProps, u as useCommentSheetContext, n as useOptionalCommentSheetContext } from './CommentSheet.css-DuBy01rU.js';
 export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLOT_ACTIVE_ATTR as SLIDER_SLOT_ACTIVE_ATTR, SLIDER_SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY as SLIDER_SLOT_ACTIVE_DATASET_KEY, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLOT_INDEX_ATTR as SLIDER_SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY as SLIDER_SLOT_INDEX_DATASET_KEY, SLIDER_SLOT_TRANSITIONING_CLASS, SlotPosition as SliderSlotPosition, UseSliderPositionOptions, UseSliderPositionReturn, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, VirtualSliderContextValue, VirtualSliderProps, getSlotIndexFromPosition as getSliderIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from './components/VirtualSlider/index.js';
-export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, SlotPosition, UseVideoFeedPositionOptions, UseVideoFeedPositionReturn, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedContextValue, VideoFeedHeadless, VideoFeedHeadlessProps, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from './components/VideoFeed/index.js';
-export { HeartInstance, LOADING_ATTR, LOADING_DATASET_KEY, LikeAnimationStyle, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotContextValue, VideoSlotHeadless, VideoSlotHeadlessExtendedProps, VideoSlotLikeAnimation, VideoSlotLikeAnimationProps, VideoSlotLikeAnimationRef, VideoSlotOverlay, VideoSlotOverlayProps, VideoSlotOverlayRegionProps, VideoSlotPlayIndicator, VideoSlotPlayIndicatorProps, VideoSlotPoster, VideoSlotPosterProps, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './components/VideoSlot/index.js';
-export { BUFFERING_STATE_CLASS, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, UseAutoFirstFrameCaptureConfig, UseFirstFrameCaptureConfig, UseFirstFrameCaptureReturn, UseVideoElementConfig, UseVideoElementReturn, VIDEO_CLASS, VIDEO_PLAYER_CSS, Z_INDEX as VIDEO_PLAYER_Z_INDEX, Z_INDEX_CSS_VARS as VIDEO_PLAYER_Z_INDEX_CSS_VARS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoErrorOrigin, VideoPlayerHeadless, VideoPlayerHeadlessExtendedProps, VideoSourceType, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from './components/VideoPlayer/index.js';
+export { DEFAULT_SPEEDS, SPEED_PICKER_CSS, SpeedPickerHeadless, SpeedPickerHeadlessProps } from './components/SpeedPicker/index.js';
+export { DETAIL_VIEW_CSS, DetailViewAuthor, DetailViewAuthorProps, DetailViewCaption, DetailViewCaptionProps, DetailViewContextValue, DetailViewGallery, DetailViewGalleryProps, DetailViewHeadless, DetailViewHeadlessProps, DetailViewMusic, DetailViewMusicProps, DetailViewStats, DetailViewStatsProps, useDetailViewContext } from './components/DetailView/index.js';
+export { ErrorBoundary, ErrorBoundaryProps, ErrorMode } from './components/ErrorBoundary/index.js';
+export { FEED_CLASS_PREFIX, FEED_CSS, FeedContext, FeedContextValue, FeedHeadless, FeedHeadlessProps, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, SlotPosition, UseFeedPositionOptions, UseFeedPositionReturn, UseFeedPositionOptions as UseVideoFeedPositionOptions, UseFeedPositionReturn as UseVideoFeedPositionReturn, FEED_CLASS_PREFIX as VIDEO_FEED_CLASS_PREFIX, FEED_CSS as VIDEO_FEED_CSS, FeedContext as VideoFeedContext, FeedContextValue as VideoFeedContextValue, FeedHeadless as VideoFeedHeadless, FeedHeadlessProps as VideoFeedHeadlessProps, getSlotIndexFromPosition, useFeedContext, useFeedPosition, useOptionalFeedContext, useOptionalFeedContext as useOptionalVideoFeedContext, useFeedContext as useVideoFeedContext, useFeedPosition as useVideoFeedPosition } from './components/Feed/index.js';
+export { HeartInstance, LOADING_ATTR, LOADING_DATASET_KEY, LikeAnimationStyle, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, ReportedVideoOverlay, ReportedVideoOverlayProps, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotContextValue, VideoSlotHeadless, VideoSlotHeadlessExtendedProps, VideoSlotLikeAnimation, VideoSlotLikeAnimationProps, VideoSlotLikeAnimationRef, VideoSlotOverlay, VideoSlotOverlayProps, VideoSlotOverlayRegionProps, VideoSlotPoster, VideoSlotPosterProps, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './components/VideoSlot/index.js';
+export { IMAGE_CAROUSEL_CSS, ImageCarouselHeadless, ImageCarouselProps } from './components/ImageCarousel/index.js';
 export { PROGRESS_BAR_CSS, ProgressBarHeadless, ProgressBarHeadlessExtendedProps, calculateProgress, formatTime } from './components/ProgressBar/index.js';
-export { ACTION_BAR_CSS, ActionBarBookmark, ActionBarComment, ActionBarHeadless, ActionBarHeadlessExtendedProps, ActionBarLike, ActionBarShare, ActionButton, ActionButtonExtendedProps, BookmarkButton, BookmarkButtonProps, CommentButton, CommentButtonProps, LikeButton, LikeButtonProps, ShareButton, ShareButtonProps } from './components/ActionBar/index.js';
-export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorAvatarProps, AuthorDescription, AuthorDescriptionProps, AuthorInfoContext, AuthorInfoContextValue, AuthorInfoHeadless, AuthorInfoHeadlessExtendedProps, AuthorInfoVariant, AuthorName, AuthorNameProps, AvatarSize, FollowButton, FollowButtonProps, FollowButtonSize, useAuthorInfoContext, useOptionalAuthorInfoContext } from './components/AuthorInfo/index.js';
+export { PlaylistBarHeadless, PlaylistBarHeadlessProps, PlaylistCollectionHeadless, PlaylistCollectionHeadlessProps, PlaylistCollectionItem, PlaylistSheetHeadless, PlaylistSheetHeadlessProps } from './components/Playlist/index.js';
+export { QUALITY_PICKER_CSS, QualityPickerHeadless, QualityPickerHeadlessProps } from './components/QualityPicker/index.js';
+export { REPORT_SHEET_CSS, ReportSheetHeadless, ReportSheetHeadlessProps, ReportSheetState, injectReportSheetCSS } from './components/ReportSheet/index.js';
+export { Skeleton, SkeletonAnimation, SkeletonAvatar, SkeletonProps, SkeletonText, SkeletonVideo } from './components/Skeleton/index.js';
 export { VIDEO_INFO_CSS, VideoAuthorName, VideoAuthorNameProps, VideoCaption, VideoCaptionProps, VideoHashtags, VideoHashtagsProps, VideoInfoContext, VideoInfoContextValue, VideoInfoHeadless, VideoInfoHeadlessExtendedProps, VideoLocation, VideoLocationProps, VideoMusic, VideoMusicProps, useOptionalVideoInfoContext, useVideoInfoContext } from './components/VideoInfo/index.js';
-export { n as COMMENT_SHEET_CSS, f as CommentInput, g as CommentInputProps, h as CommentItemComponent, i as CommentItemProps, d as CommentList, e as CommentListProps, C as CommentSheet, j as CommentSheetContext, l as CommentSheetContextValue, a as CommentSheetHeadless, b as CommentSheetHeadlessProps, m as CommentSheetI18n, R as ReplyTarget, S as SheetHeader, c as SheetHeaderProps, u as useCommentSheetContext, k as useOptionalCommentSheetContext } from './CommentSheet.css-BeCrEaUG.js';
+export { V as VideoSlotPlayIndicator, a as VideoSlotPlayIndicatorProps } from './VideoSlotPlayIndicator-DPs8Xt5C.js';
 import 'react/jsx-runtime';
 
 /**
@@ -374,8 +384,12 @@ interface UseDoubleTapConfig {
     onSingleTap?: () => void;
     /** Callback for double tap with position */
     onDoubleTap?: (position: TapPosition) => void;
+    /** Callback for long press (hold > longPressDelay without moving) */
+    onLongPress?: (position: TapPosition) => void;
     /** Delay in ms to detect double tap (default: 300) */
     doubleTapDelay?: number;
+    /** Delay in ms to detect long press (default: 500) */
+    longPressDelay?: number;
     /** Whether the hook is disabled */
     disabled?: boolean;
     /**
@@ -416,7 +430,7 @@ interface UseDoubleTapReturn {
  * Returns tap position as percentage (0-100) relative to container.
  * Falls back to center (50, 50) if container ref is null.
  */
-declare function useDoubleTap({ containerRef, onSingleTap, onDoubleTap, doubleTapDelay, disabled, movementThreshold, }: UseDoubleTapConfig): UseDoubleTapReturn;
+declare function useDoubleTap({ containerRef, onSingleTap, onDoubleTap, onLongPress, doubleTapDelay, longPressDelay, disabled, movementThreshold, }: UseDoubleTapConfig): UseDoubleTapReturn;
 
 /**
  * CustomLayout - Fully Composable Layout
@@ -756,6 +770,21 @@ declare const Layouts: {
  * }
  * ```
  */
+/**
+ * Options for CSS injection
+ */
+interface InjectCSSOptions {
+    /**
+     * Whether to wrap CSS in @layer sv.
+     *
+     * - `true` (default): CSS wrapped in @layer sv, host app can override easily
+     * - `false`: CSS injected without layer, useful for critical components
+     *   that need to resist global resets like `* { margin: 0; padding: 0; }`
+     *
+     * @default true
+     */
+    layered?: boolean;
+}
 /**
  * Inject CSS for a specific component.
  *
@@ -764,9 +793,10 @@ declare const Layouts: {
  *
  * @param componentId - Unique identifier for the component (e.g., 'video-player')
  * @param css - CSS string to inject
+ * @param options - Injection options
  * @returns Empty cleanup function (CSS persists intentionally)
  */
-declare function injectComponentCSS(componentId: string, css: string): () => void;
+declare function injectComponentCSS(componentId: string, css: string, options?: InjectCSSOptions): () => void;
 /**
  * Remove CSS for a specific component.
  * Mainly used for testing cleanup.

package/dist/index.js

@@ -1,19 +1,29 @@
-export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from './chunk-KWHMZ6H5.js';
-export { BUFFERING_STATE_CLASS, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, VIDEO_CLASS, VIDEO_PLAYER_CSS, Z_INDEX as VIDEO_PLAYER_Z_INDEX, Z_INDEX_CSS_VARS as VIDEO_PLAYER_Z_INDEX_CSS_VARS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoPlayerHeadless, createFirstFrameCache, firstFrameCache, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from './chunk-CL6BS7GB.js';
-export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPlayIndicator, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useDoubleTap, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './chunk-XDIH66C4.js';
-export { ACTION_BAR_CSS, CompoundBookmark as ActionBarBookmark, CompoundComment as ActionBarComment, ActionBarHeadless, CompoundLike as ActionBarLike, CompoundShare as ActionBarShare, ActionButton, BookmarkButton, CommentButton, LikeButton, ShareButton } from './chunk-AC2IFAJR.js';
-export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext } from './chunk-2FSDVYER.js';
+export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from './chunk-4RIMQOBR.js';
+export { DEFAULT_SPEEDS, SPEED_PICKER_CSS, SpeedPickerHeadless } from './chunk-QCRRF76W.js';
+export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from './chunk-7WXAQHJI.js';
+export { BUFFERING_STATE_CLASS, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, VIDEO_CLASS, VIDEO_PLAYER_CSS, Z_INDEX as VIDEO_PLAYER_Z_INDEX, Z_INDEX_CSS_VARS as VIDEO_PLAYER_Z_INDEX_CSS_VARS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoPlayerHeadless, createFirstFrameCache, firstFrameCache, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from './chunk-OM4L7RE5.js';
+export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, ReportedVideoOverlay, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS } from './chunk-VJ744W5N.js';
+export { DETAIL_VIEW_CSS, DetailViewAuthor, DetailViewCaption, DetailViewGallery, DetailViewHeadless, DetailViewMusic, DetailViewStats, useDetailViewContext } from './chunk-BADA7OLG.js';
+export { ErrorBoundary } from './chunk-IWSBYOSS.js';
+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';
+export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLOT_ACTIVE_ATTR as SLIDER_SLOT_ACTIVE_ATTR, SLIDER_SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY as SLIDER_SLOT_ACTIVE_DATASET_KEY, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLOT_INDEX_ATTR as SLIDER_SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY as SLIDER_SLOT_INDEX_DATASET_KEY, SLIDER_SLOT_TRANSITIONING_CLASS, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, getSlotIndexFromPosition as getSliderIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from './chunk-YB7AXTX7.js';
+export { PlaylistBarHeadless, PlaylistCollectionHeadless, PlaylistSheetHeadless } from './chunk-5Y43HNRG.js';
+export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from './chunk-VXW7AOGM.js';
+export { QUALITY_PICKER_CSS, QualityPickerHeadless } from './chunk-DR7KR7OT.js';
+export { REPORT_SHEET_CSS, ReportSheetHeadless, injectReportSheetCSS } from './chunk-DGKMO3AE.js';
+export { ACTION_BAR_CSS, CompoundBookmark as ActionBarBookmark, CompoundComment as ActionBarComment, ActionBarHeadless, CompoundLike as ActionBarLike, CompoundShare as ActionBarShare, ActionButton, BookmarkButton, CommentButton, LikeButton, ShareButton } from './chunk-NJXIYSDZ.js';
+export { ADVANCE_MENU_CSS, AdvanceMenuHeadless } from './chunk-HXQPEZRG.js';
+export { ARTICLE_ACTIVE_ATTR, ARTICLE_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS, ArticleSlotActions, ArticleSlotBottom, ArticleSlotCaption, ArticleSlotHeadless, ArticleSlotMusic, ArticleSlotOverlay, ArticleSlotPlayIndicator, ArticleSlotReadMore, ARTICLE_ACTIVE_ATTR as IMAGE_POST_ACTIVE_ATTR, ARTICLE_ID_ATTR as IMAGE_POST_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS as IMAGE_POST_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS as IMAGE_POST_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS as IMAGE_POST_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS as IMAGE_POST_SLOT_CSS, ArticleSlotActions as ImagePostSlotActions, ArticleSlotBottom as ImagePostSlotBottom, ArticleSlotCaption as ImagePostSlotCaption, ArticleSlotHeadless as ImagePostSlotHeadless, ArticleSlotMusic as ImagePostSlotMusic, ArticleSlotOverlay as ImagePostSlotOverlay, ArticleSlotPlayIndicator as ImagePostSlotPlayIndicator, ArticleSlotReadMore as ImagePostSlotReadMore, useArticleSlotContext, useArticleSlotContext as useImagePostSlotContext, useOptionalArticleSlotContext, useOptionalArticleSlotContext as useOptionalImagePostSlotContext } from './chunk-BNI7CYRI.js';
+export { VideoSlotContext, VideoSlotPlayIndicator, useDoubleTap, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './chunk-MFJS65C5.js';
+export { IMAGE_CAROUSEL_CSS, ImageCarouselHeadless } from './chunk-GSNIZ6DF.js';
+export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext } from './chunk-3OB3OVYR.js';
 export { BookmarkFilledIcon, BookmarkIcon, CloseIcon, CommentIcon, HeartFilledIcon, HeartIcon, MoreIcon, MusicIcon, PauseIcon, PlayIcon, PlusIcon, ShareIcon, UserCheckIcon, UserPlusIcon, VerifiedIcon, VolumeIcon, VolumeMutedIcon } from './chunk-ANCP53F3.js';
-export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentList, CommentSheet, CommentSheetContext, CommentSheetHeadless, SheetHeader, useCommentSheetContext, useOptionalCommentSheetContext } from './chunk-FNXTPQ6L.js';
-export { ErrorBoundary } from './chunk-SZXFH334.js';
-export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from './chunk-ECR42RKK.js';
-export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from './chunk-UNV3NWN6.js';
-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 } from './chunk-WCRDTBCZ.js';
-export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLOT_ACTIVE_ATTR as SLIDER_SLOT_ACTIVE_ATTR, SLIDER_SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY as SLIDER_SLOT_ACTIVE_DATASET_KEY, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLOT_INDEX_ATTR as SLIDER_SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY as SLIDER_SLOT_INDEX_DATASET_KEY, SLIDER_SLOT_TRANSITIONING_CLASS, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, getSlotIndexFromPosition as getSliderIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from './chunk-AQHD6LPS.js';
+export { CLEAN_MODE_OVERLAY_CSS, CleanModeOverlayHeadless, injectCleanModeOverlayCSS } from './chunk-QUEJHA24.js';
 export { clsx, clsx2 as cn } from './chunk-EDWS2IPH.js';
 export { formatCount, formatCountWithSeparators, parseFormattedCount } from './chunk-3XPJHUYL.js';
-import { injectComponentCSS } from './chunk-RMLTPW5S.js';
-export { injectComponentCSS, isComponentCSSInjected, removeComponentCSS } from './chunk-RMLTPW5S.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+export { injectComponentCSS, isComponentCSSInjected, removeComponentCSS } from './chunk-CAWE42LH.js';
+export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentList, CommentSheet, CommentSheetContext, CommentSheetHeadless, SheetHeader, useCommentSheetContext, useOptionalCommentSheetContext } from './chunk-IC2KUU4V.js';
 import { createContext, useInsertionEffect, useContext, useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhub-short/ui",
-  "version": "0.1.0-beta.9",
+  "version": "1.0.0-beta.18",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -57,6 +57,10 @@
       "types": "./dist/components/VirtualSlider/index.d.ts",
       "import": "./dist/components/VirtualSlider/index.js"
     },
+    "./ArticleSlot": {
+      "types": "./dist/components/ArticleSlot/index.d.ts",
+      "import": "./dist/components/ArticleSlot/index.js"
+    },
     "./icons": {
       "types": "./dist/components/icons/index.d.ts",
       "import": "./dist/components/icons/index.js"
@@ -69,7 +73,7 @@
   ],
   "dependencies": {
     "clsx": "^2.1.0",
-    "@xhub-short/contracts": "0.1.0-beta.9"
+    "@xhub-short/contracts": "1.0.0-beta.18"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -93,8 +97,8 @@
     "tsup": "^8.3.0",
     "typescript": "^5.7.0",
     "vitest": "^2.1.0",
-    "@xhub-short/vitest-config": "0.0.1-beta.8",
-    "@xhub-short/tsconfig": "0.0.0"
+    "@xhub-short/vitest-config": "0.1.0-beta.13",
+    "@xhub-short/tsconfig": "0.0.1-beta.2"
   },
   "scripts": {
     "build": "tsup",