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

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

@@ -1,48 +1,8 @@
-import { VideoSlotHeadlessProps, VideoItem, UIResourceState, UIPlayerState, UIPlayerControls } from '@xhub-short/contracts';
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { VideoSlotHeadlessProps, VideoItem, UIResourceState, UIPlayerState, UIPlayerControls } from '@xhub-short/contracts';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-/**
- * VideoSlotHeadless - Headless Video Slot Component
- *
- * A headless component for displaying a single video slot in the feed.
- * Receives ALL data via props (no SDK dependency).
- *
- * Architecture (Two-Tier Export Pattern):
- * - @xhub-short/ui: Exports this headless component
- * - @xhub-short/sdk: Wraps with SDK hooks (wired/VideoSlot.tsx)
- *
- * Responsibilities:
- * - Display video poster/first frame/skeleton
- * - Provide context for compound components
- * - Handle tap-to-play/pause interaction
- * - Display loading/error states
- *
- * @example
- * ```tsx
- * // Headless usage (requires all props)
- * <VideoSlotHeadless
- *   video={video}
- *   resourceState={resourceState}
- *   playerState={playerState}
- *   playerControls={playerControls}
- * >
- *   <VideoSlotPoster />
- *   <VideoSlotOverlay>
- *     <AuthorInfo />
- *     <ActionBar />
- *   </VideoSlotOverlay>
- * </VideoSlotHeadless>
- *
- * // Wired usage (SDK injects state)
- * import { VideoSlot } from '@xhub-short/sdk';
- * <VideoSlot video={video}>
- *   <VideoSlotOverlay>...</VideoSlotOverlay>
- * </VideoSlot>
- * ```
- */
-
 interface VideoSlotHeadlessExtendedProps extends VideoSlotHeadlessProps {
     /** Children (overlay, poster, etc.) */
     children?: ReactNode;
@@ -83,11 +43,18 @@ interface VideoSlotHeadlessExtendedProps extends VideoSlotHeadlessProps {
  * - Wired layer (VideoSlot in SDK) for DOM manipulation
  * - Testing libraries for element selection
  * - Analytics for event tracking
+ *
+ * Wrapped with React.memo to prevent unnecessary re-renders.
  */
-declare function VideoSlotHeadless({ video, resourceState, playerState, playerControls, className, children, onVisible: _onVisible, onHidden: _onHidden, onTap, onDoubleTap, renderError, renderLoading, }: VideoSlotHeadlessExtendedProps): React.ReactElement;
-declare namespace VideoSlotHeadless {
-    var displayName: string;
-}
+declare function VideoSlotHeadlessBase({ video, resourceState, playerState, playerControls, className, children, onVisible: _onVisible, onHidden: _onHidden, onTap, onDoubleTap, renderError, renderLoading, restoreFrame, }: VideoSlotHeadlessExtendedProps): React.ReactElement;
+/**
+ * VideoSlotHeadless - Memoized for performance
+ *
+ * Prevents re-renders when parent components update with same props.
+ * This is critical in virtualized feeds where slots may receive frequent
+ * prop updates from PlayerEngine and ResourceGovernor.
+ */
+declare const VideoSlotHeadless: react.MemoExoticComponent<typeof VideoSlotHeadlessBase>;
 
 /**
  * VideoSlotPoster - Poster/Thumbnail/First Frame Compound Component
@@ -98,6 +65,14 @@ declare namespace VideoSlotHeadless {
  * 2. Poster image (from video.poster)
  * 3. Skeleton shimmer (fallback)
  *
+ * ## 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
  * <VideoSlotHeadless {...props}>
@@ -126,9 +101,15 @@ interface VideoSlotPosterProps {
  * Compound component that renders the poster/thumbnail layer.
  * Must be used within a VideoSlotHeadless component.
  *
- * Automatically hides when video is playing via CSS.
+ * 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 VideoSlotPoster({ className, forceSkeleton, posterUrl, loading, alt, onError, }: VideoSlotPosterProps): React.ReactElement;
+declare function VideoSlotPoster(props: VideoSlotPosterProps): React.ReactElement;
 declare namespace VideoSlotPoster {
     var displayName: string;
 }
@@ -385,6 +366,73 @@ 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 */
+    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;
+}
+
 interface VideoSlotContextValue {
     /** Video item data */
     video: VideoItem;
@@ -398,6 +446,10 @@ interface VideoSlotContextValue {
     firstFrame: string | null;
     /** Set first frame data URL */
     setFirstFrame: (dataUrl: string) => void;
+    /** Timestamp of last user-initiated play toggle (for PlayIndicator) */
+    lastUserToggleTime: number;
+    /** Set last user toggle time */
+    setLastUserToggleTime: (time: number) => void;
 }
 /**
  * VideoSlot Context
@@ -525,42 +577,50 @@ declare const SLOT_PAUSED_CLASS = "sv-video-slot--paused";
  *
  * Layer Stack (bottom to top):
  * ┌─────────────────────────────────────────────┐
- * │  z-index: 4 - Progress Bar (topmost)        │
- * │  z-index: 3 - Error UI / Play Indicator     │
- * │  z-index: 2 - Overlay / Spinner             │
- * │  z-index: 1 - Poster / Video                │
+ * │  z-index: 5 - Progress Bar (topmost)        │
+ * │  z-index: 4 - Error UI / Play Indicator     │
+ * │  z-index: 3 - Poster / Thumbnail            │
+ * │  z-index: 2 - Loading Spinner               │
+ * │  z-index: 1 - Video Element                 │
  * │  z-index: 0 - Slot Container (base)         │
  * └─────────────────────────────────────────────┘
  *
+ * IMPORTANT: Poster (3) > Spinner (2) ensures thumbnail shows over loading spinner.
+ *
  * @example Override via CSS variables
  * ```css
  * :root {
- *   --sv-z-poster: 1;
- *   --sv-z-overlay: 2;
- *   --sv-z-indicator: 3;
- *   --sv-z-progress: 4;
+ *   --sv-z-poster: 3;
+ *   --sv-z-slot-spinner: 2;
+ *   --sv-z-indicator: 4;
+ *   --sv-z-progress: 5;
  * }
  * ```
  */
 declare const Z_INDEX: {
     /** Base layer - slot container */
     readonly SLOT: 0;
-    /** Poster image and video element */
-    readonly POSTER: 1;
-    /** Overlay content and loading spinner */
-    readonly OVERLAY: 2;
+    /** Video element */
+    readonly VIDEO: 1;
+    /** Loading spinner */
+    readonly SPINNER: 2;
+    /** Poster/thumbnail (above spinner so thumbnail shows during loading) */
+    readonly POSTER: 3;
     /** Error UI and play/pause indicator */
-    readonly INDICATOR: 3;
+    readonly INDICATOR: 4;
     /** Progress bar (always on top) */
-    readonly PROGRESS: 4;
+    readonly PROGRESS: 5;
 };
 /**
  * CSS custom property names for z-index layers.
  * Use these to override default z-index values.
+ *
+ * NOTE: --sv-z-slot-spinner is used instead of --sv-z-overlay to avoid
+ * conflicts with global --sv-z-overlay used for other overlay purposes.
  */
 declare const Z_INDEX_CSS_VARS: {
     readonly POSTER: "--sv-z-poster";
-    readonly OVERLAY: "--sv-z-overlay";
+    readonly SPINNER: "--sv-z-slot-spinner";
     readonly INDICATOR: "--sv-z-indicator";
     readonly PROGRESS: "--sv-z-progress";
 };
@@ -576,7 +636,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/Video layer (default: 1)\n * --sv-z-overlay:   Overlay/Spinner layer (default: 2)\n * --sv-z-indicator: Error/Play indicator layer (default: 3)\n * --sv-z-progress:  Progress bar layer (default: 4)\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: 4 - Progress Bar (topmost)        \u2502\n * \u2502  z-index: 3 - Error UI / Play Indicator     \u2502\n * \u2502  z-index: 2 - Overlay / Spinner             \u2502\n * \u2502  z-index: 1 - Poster / Video                \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  z-index: var(--sv-z-poster, 1);\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  z-index: var(--sv-z-overlay, 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  background-color: rgba(0, 0, 0, 0.5);\n  border-radius: 50%;\n  z-index: var(--sv-z-indicator, 3);\n  opacity: 0;\n  transition: opacity 200ms ease;\n  pointer-events: none;\n}\n\n.sv-video-slot__play-indicator--visible {\n  opacity: 1;\n  animation: sv-slot-play-indicator 400ms ease-out forwards;\n}\n\n@keyframes sv-slot-play-indicator {\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}\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) + 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";
 
 /**
  * VideoSlotLikeAnimation CSS Styles
@@ -589,4 +649,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, 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, 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 };

package/dist/components/VideoSlot/index.js

@@ -1 +1 @@
-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, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from '../../chunk-XAOEHLOX.js';
+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';