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

package/dist/chunk-T4RQWGRY.js

@@ -1,1519 +0,0 @@
-import { PauseIcon, PlayIcon, HeartFilledIcon } from './chunk-ANCP53F3.js';
-import { clsx2 } from './chunk-EDWS2IPH.js';
-import { injectComponentCSS } from './chunk-UPCVSGWH.js';
-import { createContext, memo, useMemo, useState, useCallback, useEffect, useRef, useInsertionEffect, useContext } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var DEFAULT_DOUBLE_TAP_DELAY = 300;
-var TAP_DEBOUNCE_MS = 50;
-var DEFAULT_MOVEMENT_THRESHOLD = 10;
-function useDoubleTap({
-  containerRef,
-  onSingleTap,
-  onDoubleTap,
-  doubleTapDelay = DEFAULT_DOUBLE_TAP_DELAY,
-  disabled = false,
-  movementThreshold = DEFAULT_MOVEMENT_THRESHOLD
-}) {
-  const lastTapTimeRef = useRef(0);
-  const lastDoubleTapTimeRef = useRef(0);
-  const tapTimeoutRef = useRef(null);
-  const lastPositionRef = useRef({ x: 50, y: 50 });
-  const lastExecutionTimeRef = useRef(0);
-  const pointerStartRef = useRef(null);
-  const cumulativeMovementRef = useRef(0);
-  useEffect(() => {
-    return () => {
-      if (tapTimeoutRef.current) {
-        clearTimeout(tapTimeoutRef.current);
-        tapTimeoutRef.current = null;
-      }
-    };
-  }, []);
-  const calculatePosition = useCallback(
-    (clientX, clientY) => {
-      const container = containerRef.current;
-      if (!container) return { x: 50, y: 50 };
-      const rect = container.getBoundingClientRect();
-      const x = (clientX - rect.left) / rect.width * 100;
-      const y = (clientY - rect.top) / rect.height * 100;
-      return {
-        x: Math.max(0, Math.min(100, x)),
-        y: Math.max(0, Math.min(100, y))
-      };
-    },
-    [containerRef]
-  );
-  const handleTapCore = useCallback(() => {
-    if (disabled) return;
-    const now = Date.now();
-    const timeSinceLastTap = now - lastTapTimeRef.current;
-    if (tapTimeoutRef.current) {
-      clearTimeout(tapTimeoutRef.current);
-      tapTimeoutRef.current = null;
-    }
-    if (timeSinceLastTap < doubleTapDelay) {
-      lastDoubleTapTimeRef.current = now;
-      lastTapTimeRef.current = 0;
-      onDoubleTap?.(lastPositionRef.current);
-    } else {
-      lastTapTimeRef.current = now;
-      tapTimeoutRef.current = setTimeout(() => {
-        tapTimeoutRef.current = null;
-        const timeSinceDoubleTap = Date.now() - lastDoubleTapTimeRef.current;
-        if (lastDoubleTapTimeRef.current > 0 && timeSinceDoubleTap < doubleTapDelay * 1.5) {
-          return;
-        }
-        if (lastTapTimeRef.current !== now) {
-          return;
-        }
-        onSingleTap?.();
-      }, doubleTapDelay);
-    }
-  }, [disabled, doubleTapDelay, onSingleTap, onDoubleTap]);
-  const isSwipe = useCallback(
-    (clientX, clientY) => {
-      if (cumulativeMovementRef.current > movementThreshold * 2) {
-        return true;
-      }
-      const start = pointerStartRef.current;
-      if (!start) return false;
-      const dx = Math.abs(clientX - start.x);
-      const dy = Math.abs(clientY - start.y);
-      return dx > movementThreshold || dy > movementThreshold;
-    },
-    [movementThreshold]
-  );
-  const executeTapWithDebounce = useCallback(
-    (clientX, clientY) => {
-      if (disabled) return;
-      if (isSwipe(clientX, clientY)) {
-        pointerStartRef.current = null;
-        return;
-      }
-      const now = Date.now();
-      if (now - lastExecutionTimeRef.current < TAP_DEBOUNCE_MS) {
-        return;
-      }
-      lastExecutionTimeRef.current = now;
-      lastPositionRef.current = calculatePosition(clientX, clientY);
-      handleTapCore();
-      pointerStartRef.current = null;
-    },
-    [disabled, calculatePosition, handleTapCore, isSwipe]
-  );
-  const handlePointerDown = useCallback((e) => {
-    if (e.button !== 0) return;
-    pointerStartRef.current = { x: e.clientX, y: e.clientY };
-    cumulativeMovementRef.current = 0;
-  }, []);
-  const handlePointerMove = useCallback((e) => {
-    if (!pointerStartRef.current) return;
-    cumulativeMovementRef.current += Math.abs(e.movementX) + Math.abs(e.movementY);
-  }, []);
-  const handlePointerUp = useCallback(
-    (e) => {
-      if (e.button !== 0) return;
-      executeTapWithDebounce(e.clientX, e.clientY);
-    },
-    [executeTapWithDebounce]
-  );
-  const handleClick = useCallback(
-    (e) => {
-      if (e.detail > 0) {
-        executeTapWithDebounce(e.clientX, e.clientY);
-      }
-    },
-    [executeTapWithDebounce]
-  );
-  return {
-    handlers: {
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      onClick: handleClick
-    },
-    lastPosition: lastPositionRef
-  };
-}
-
-// src/components/VideoSlot/VideoSlot.css.ts
-var VIDEO_SLOT_CSS = `
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Z-INDEX LAYERING CONTRACT
- * 
- * Override these variables to customize layer stacking:
- * --sv-z-poster:       Poster/Thumbnail layer (default: 3)
- * --sv-z-slot-spinner: Loading spinner layer (default: 2)
- * --sv-z-indicator:    Error/Play indicator layer (default: 4)
- * --sv-z-progress:     Progress bar layer (default: 5)
- *
- * Layer Stack (bottom to top):
- * \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
- * \u2502  z-index: 5 - Progress Bar (topmost)        \u2502
- * \u2502  z-index: 4 - Error UI / Play Indicator     \u2502
- * \u2502  z-index: 3 - Poster / Thumbnail            \u2502
- * \u2502  z-index: 2 - Loading Spinner               \u2502
- * \u2502  z-index: 1 - Video Element                 \u2502
- * \u2502  z-index: 0 - Slot Container (base)         \u2502
- * \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
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * VideoSlot - Container for individual video in feed
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-slot {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-color: var(--sv-bg-primary, #000);
-  /* Touch optimization */
-  touch-action: none;
-  user-select: none;
-  -webkit-user-select: none;
-  /* GPU acceleration */
-  will-change: contents;
-  contain: layout style paint;
-}
-
-/* Active slot (currently visible) */
-.sv-video-slot--active {
-  z-index: 1;
-}
-
-/* Loading state */
-.sv-video-slot--loading .sv-video-slot__video {
-  opacity: 0;
-}
-
-.sv-video-slot--loading .sv-video-slot__poster {
-  opacity: 1;
-}
-
-/* Playing state */
-.sv-video-slot--playing .sv-video-slot__video {
-  opacity: 1;
-}
-
-.sv-video-slot--playing .sv-video-slot__poster {
-  opacity: 0;
-}
-
-/* Paused state - keep poster hidden (show paused video frame, not poster) */
-.sv-video-slot--paused .sv-video-slot__video {
-  opacity: 1;
-}
-
-.sv-video-slot--paused .sv-video-slot__poster {
-  opacity: 0;
-}
-
-/* Hidden poster (explicit class applied by VideoSlotPoster component) */
-.sv-video-slot__poster--hidden {
-  opacity: 0;
-  pointer-events: none;
-}
-
-/* Error state */
-.sv-video-slot--error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Video Element
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-slot__video-container {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.sv-video-slot__video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  background-color: transparent;
-  /* Smooth fade transition */
-  transition: opacity var(--sv-transition-duration, 300ms) ease-out;
-}
-
-/* Video loaded but not playing yet */
-.sv-video-slot__video[data-loaded="true"] {
-  opacity: 1;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Poster / Thumbnail / First Frame
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-slot__poster {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--sv-bg-primary, #000);
-  /* Poster should be ABOVE spinner (z-index: 2) so thumbnail shows instead of spinner */
-  z-index: var(--sv-z-poster, 3);
-  /* Smooth fade transition */
-  transition: opacity var(--sv-transition-duration, 300ms) ease-out;
-  pointer-events: none;
-}
-
-.sv-video-slot__poster-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* First frame (client-captured) */
-.sv-video-slot__poster--first-frame .sv-video-slot__poster-image {
-  image-rendering: auto;
-}
-
-/* Skeleton placeholder */
-.sv-video-slot__poster--skeleton {
-  background: linear-gradient(
-    110deg,
-    var(--sv-skeleton-bg, rgba(255, 255, 255, 0.05)) 0%,
-    var(--sv-skeleton-shimmer, rgba(255, 255, 255, 0.1)) 50%,
-    var(--sv-skeleton-bg, rgba(255, 255, 255, 0.05)) 100%
-  );
-  background-size: 200% 100%;
-  animation: sv-slot-skeleton-shimmer 1.5s ease-in-out infinite;
-}
-
-@keyframes sv-slot-skeleton-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Overlay Container
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-slot__overlay {
-  position: absolute;
-  inset: 0;
-  z-index: var(--sv-z-overlay, 2);
-  /* Gradient background for better text visibility */
-  background: linear-gradient(
-    to top,
-    rgba(0, 0, 0, 0.6) 0%,
-    rgba(0, 0, 0, 0.3) 20%,
-    transparent 40%,
-    transparent 60%,
-    rgba(0, 0, 0, 0.2) 80%,
-    rgba(0, 0, 0, 0.4) 100%
-  );
-  pointer-events: none;
-}
-
-/* 
- * Overlay sections should NOT block clicks (pass-through to container for play/pause)
- * Only actual interactive elements (buttons, links) inside sections should receive clicks.
- * 
- * DO NOT use: .sv-video-slot__overlay > * { pointer-events: auto; }
- * This would make entire sections block clicks even on "empty" areas.
- */
-.sv-video-slot__overlay-top,
-.sv-video-slot__overlay-bottom,
-.sv-video-slot__overlay-left,
-.sv-video-slot__overlay-right,
-.sv-video-slot__actions,
-.sv-video-slot__author {
-  pointer-events: none;
-}
-
-/* Only interactive elements inside overlay sections should receive clicks */
-.sv-video-slot__overlay button,
-.sv-video-slot__overlay a,
-.sv-video-slot__overlay [role="button"],
-.sv-video-slot__overlay input,
-.sv-video-slot__overlay label,
-.sv-video-slot__overlay .sv-progress-bar,
-.sv-video-slot__overlay .sv-author-info,
-.sv-video-slot__overlay .sv-video-info,
-.sv-video-slot__overlay .sv-action-bar {
-  pointer-events: auto;
-}
-
-/* Overlay sections */
-.sv-video-slot__overlay-top {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: var(--sv-spacing-md, 16px);
-  padding-top: calc(var(--sv-safe-area-top, 0px) + var(--sv-spacing-md, 16px));
-}
-
-.sv-video-slot__overlay-bottom {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0px;
-  padding: var(--sv-spacing-md, 16px);
-  padding-bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-spacing-md, 16px));
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-spacing-sm, 8px);
-}
-
-.sv-video-slot__overlay-left {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
-  padding: var(--sv-spacing-md, 16px);
-}
-
-.sv-video-slot__overlay-right {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  padding: var(--sv-spacing-md, 16px);
-}
-
-/* Action bar (typically right side) */
-.sv-video-slot__actions {
-  position: absolute;
-  right: var(--sv-spacing-sm, 8px);
-  bottom: calc(var(--sv-safe-area-bottom, 0px) + 80px);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-/* Author info (above bottom section, left side) */
-.sv-video-slot__author {
-  position: absolute;
-  left: var(--sv-spacing-md, 16px);
-  /* Position above .sv-video-slot__overlay-bottom (which has ~80px content) */
-  bottom: calc(var(--sv-safe-area-bottom, 0px) + 100px);
-  right: 80px; /* Leave space for actions */
-  max-width: calc(100% - 100px); /* Don't overlap with actions */
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Error State
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-slot__error {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--sv-bg-primary, #000);
-  color: var(--sv-text-secondary, #999);
-  text-align: center;
-  padding: var(--sv-spacing-lg, 20px);
-  gap: var(--sv-spacing-md, 16px);
-  z-index: var(--sv-z-indicator, 3);
-}
-
-.sv-video-slot__error-icon {
-  font-size: 48px;
-  opacity: 0.6;
-}
-
-.sv-video-slot__error-message {
-  font-size: var(--sv-font-size-md, 14px);
-  max-width: 200px;
-}
-
-.sv-video-slot__error-retry {
-  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-md, 16px);
-  background-color: var(--sv-color-primary, #fe2c55);
-  color: #fff;
-  border: none;
-  border-radius: var(--sv-radius-md, 8px);
-  font-size: var(--sv-font-size-sm, 12px);
-  font-weight: 600;
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-
-.sv-video-slot__error-retry:hover {
-  background-color: var(--sv-color-primary-hover, #e02850);
-}
-
-.sv-video-slot__error-retry:active {
-  transform: scale(0.96);
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Loading Spinner
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-slot__spinner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  /* Use slot-specific z-index (not global --sv-z-overlay which may conflict) */
-  z-index: var(--sv-z-slot-spinner, 2);
-}
-
-.sv-video-slot__spinner-circle {
-  width: 40px;
-  height: 40px;
-  border: 3px solid rgba(255, 255, 255, 0.2);
-  border-top-color: var(--sv-color-primary, #fe2c55);
-  border-radius: 50%;
-  animation: sv-slot-spin 0.8s linear infinite;
-}
-
-@keyframes sv-slot-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Play/Pause Visual Indicator
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-slot__play-indicator {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 64px;
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  z-index: var(--sv-z-indicator, 3);
-  opacity: 0;
-  transition: opacity 200ms ease-out;
-  pointer-events: none;
-}
-
-/* Show indicator */
-.sv-video-slot__play-indicator--visible {
-  opacity: 0.65;
-}
-
-/* Persist mode: stay visible, no animation */
-.sv-video-slot__play-indicator--persist {
-  opacity: 0.65;
-}
-
-/* Animating out: scale up + fade out */
-.sv-video-slot__play-indicator--animating-out {
-  animation: sv-slot-indicator-out var(--sv-indicator-duration, 200ms) ease-out forwards;
-}
-
-@keyframes sv-slot-indicator-out {
-  0% {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(1.5);
-  }
-}
-
-.sv-video-slot__play-indicator-icon {
-  color: #fff;
-  font-size: 28px;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Progress Bar
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-slot__progress {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background-color: rgba(255, 255, 255, 0.2);
-  z-index: var(--sv-z-progress, 4);
-}
-
-.sv-video-slot__progress-bar {
-  height: 100%;
-  background-color: var(--sv-color-primary, #fe2c55);
-  transition: width 100ms linear;
-}
-
-.sv-video-slot__progress-buffered {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.3);
-}
-`;
-function invariantContextError(hookName, componentName) {
-  const baseMessage = `${hookName} must be used within a VideoSlot component.`;
-  if (process.env.NODE_ENV !== "production") {
-    const debugInfo = [
-      "",
-      "\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550",
-      "\u274C VideoSlot Context Error",
-      "\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550",
-      "",
-      `Hook: ${hookName}`,
-      "",
-      "",
-      "Possible causes:",
-      "  1. You used a VideoSlot compound component outside of <VideoSlot>",
-      "  2. You used the headless component without SDK wiring",
-      "  3. The component tree was rendered in isolation (e.g., Storybook)",
-      "",
-      "Solutions:",
-      "  1. Wrap with <VideoSlot> or <VideoSlotHeadless>",
-      "  2. Use useOptionalVideoSlotContext() if context is optional",
-      "  3. Provide mock context in tests via <VideoSlotContext.Provider>",
-      "",
-      "Example:",
-      "  // Correct usage",
-      "  <VideoSlot video={video}>",
-      "    <VideoSlotPoster />      \u2190 These need context",
-      "    <VideoSlotOverlay />",
-      "  </VideoSlot>",
-      "",
-      "\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550"
-    ].filter(Boolean).join("\n");
-    throw new Error(baseMessage + debugInfo);
-  }
-  throw new Error(baseMessage);
-}
-var VideoSlotContext = createContext(null);
-VideoSlotContext.displayName = "VideoSlotContext";
-function useVideoSlotContext() {
-  const context = useContext(VideoSlotContext);
-  if (!context) {
-    invariantContextError("useVideoSlotContext");
-  }
-  return context;
-}
-function useOptionalVideoSlotContext() {
-  return useContext(VideoSlotContext);
-}
-function useVideoSlotVideo() {
-  const { video } = useVideoSlotContext();
-  return video;
-}
-function useVideoSlotPlayer() {
-  const { playerState, playerControls } = useVideoSlotContext();
-  return { state: playerState, controls: playerControls };
-}
-function useVideoSlotResource() {
-  const { resourceState } = useVideoSlotContext();
-  return resourceState;
-}
-function useVideoSlotIsActive() {
-  const { resourceState } = useVideoSlotContext();
-  return resourceState.isActive;
-}
-function useVideoSlotIsPlaying() {
-  const { playerState } = useVideoSlotContext();
-  return playerState.isPlaying;
-}
-
-// src/components/VideoSlot/constants.ts
-var VIDEO_ID_ATTR = "data-video-id";
-var VIDEO_ID_DATASET_KEY = "videoId";
-var SLOT_ACTIVE_ATTR = "data-slot-active";
-var SLOT_ACTIVE_DATASET_KEY = "slotActive";
-var PLAYER_STATE_ATTR = "data-player-state";
-var PLAYER_STATE_DATASET_KEY = "playerState";
-var LOADING_ATTR = "data-loading";
-var LOADING_DATASET_KEY = "loading";
-var SLOT_CLASS = "sv-video-slot";
-var SLOT_ACTIVE_CLASS = "sv-video-slot--active";
-var SLOT_LOADING_CLASS = "sv-video-slot--loading";
-var SLOT_ERROR_CLASS = "sv-video-slot--error";
-var SLOT_PLAYING_CLASS = "sv-video-slot--playing";
-var SLOT_PAUSED_CLASS = "sv-video-slot--paused";
-var Z_INDEX = {
-  /** Base layer - slot container */
-  SLOT: 0,
-  /** Video element */
-  VIDEO: 1,
-  /** Loading spinner */
-  SPINNER: 2,
-  /** Poster/thumbnail (above spinner so thumbnail shows during loading) */
-  POSTER: 3,
-  /** Error UI and play/pause indicator */
-  INDICATOR: 4,
-  /** Progress bar (always on top) */
-  PROGRESS: 5
-};
-var Z_INDEX_CSS_VARS = {
-  POSTER: "--sv-z-poster",
-  SPINNER: "--sv-z-slot-spinner",
-  INDICATOR: "--sv-z-indicator",
-  PROGRESS: "--sv-z-progress"
-};
-var ANIMATION_SELECTOR = '[data-like-animation="true"]';
-function VideoSlotHeadlessBase({
-  video,
-  resourceState,
-  playerState,
-  playerControls,
-  className,
-  children,
-  // TODO: Implement visibility detection with IntersectionObserver in v2
-  // These callbacks are reserved for future implementation:
-  // - onVisible: Called when slot enters viewport (for analytics, autoplay)
-  // - onHidden: Called when slot leaves viewport (for pause, cleanup)
-  onVisible: _onVisible,
-  onHidden: _onHidden,
-  onTap,
-  onDoubleTap,
-  renderError,
-  renderLoading,
-  restoreFrame
-}) {
-  useInsertionEffect(() => {
-    return injectComponentCSS("video-slot", VIDEO_SLOT_CSS);
-  }, []);
-  const containerRef = useRef(null);
-  const animationElementRef = useRef(null);
-  const prevVideoIdRef = useRef(video.id);
-  const [firstFrame, setFirstFrame] = useState(null);
-  const [lastUserToggleTime, setLastUserToggleTime] = useState(0);
-  if (prevVideoIdRef.current !== video.id) {
-    prevVideoIdRef.current = video.id;
-    animationElementRef.current = null;
-    if (firstFrame !== null) {
-      setFirstFrame(null);
-    }
-  }
-  const getAnimationElement = useCallback(() => {
-    if (animationElementRef.current) {
-      return animationElementRef.current;
-    }
-    const container = containerRef.current;
-    if (!container) return null;
-    const element = container.querySelector(ANIMATION_SELECTOR);
-    if (element) {
-      animationElementRef.current = element;
-    }
-    return element;
-  }, []);
-  const triggerLikeAnimation = useCallback(
-    (position) => {
-      const animationElement = getAnimationElement();
-      if (animationElement?.__likeAnimation) {
-        animationElement.__likeAnimation.triggerHeart(position.x, position.y);
-      }
-    },
-    [getAnimationElement]
-  );
-  const shouldShowAnimationWhenLiked = useCallback(() => {
-    const animationElement = getAnimationElement();
-    return animationElement?.__showWhenAlreadyLiked ?? true;
-  }, [getAnimationElement]);
-  const handleSingleTap = useCallback(() => {
-    setLastUserToggleTime(Date.now());
-    if (onTap) {
-      onTap();
-    } else {
-      playerControls.toggle();
-    }
-  }, [onTap, playerControls]);
-  const handleDoubleTap = useCallback(
-    (position) => {
-      if (shouldShowAnimationWhenLiked() || !playerState.isPlaying) {
-        triggerLikeAnimation(position);
-      }
-      onDoubleTap?.();
-    },
-    [onDoubleTap, shouldShowAnimationWhenLiked, playerState.isPlaying, triggerLikeAnimation]
-  );
-  const { handlers: tapHandlers } = useDoubleTap({
-    containerRef,
-    onSingleTap: handleSingleTap,
-    onDoubleTap: handleDoubleTap
-  });
-  const handleRetry = useCallback(() => {
-    playerControls.play();
-  }, [playerControls]);
-  const contextValue = useMemo(
-    () => ({
-      video,
-      resourceState,
-      playerState,
-      playerControls,
-      firstFrame,
-      setFirstFrame,
-      lastUserToggleTime,
-      setLastUserToggleTime
-    }),
-    [video, resourceState, playerState, playerControls, firstFrame, lastUserToggleTime]
-  );
-  const stateClasses = useMemo(() => {
-    const classes = [SLOT_CLASS];
-    if (resourceState.isActive) {
-      classes.push(SLOT_ACTIVE_CLASS);
-    }
-    if (playerState.isLoading) {
-      classes.push(SLOT_LOADING_CLASS);
-    }
-    if (playerState.error) {
-      classes.push(SLOT_ERROR_CLASS);
-    }
-    if (playerState.isPlaying) {
-      classes.push(SLOT_PLAYING_CLASS);
-    } else {
-      classes.push(SLOT_PAUSED_CLASS);
-    }
-    return classes;
-  }, [resourceState.isActive, playerState.isLoading, playerState.error, playerState.isPlaying]);
-  const playerStateString = useMemo(() => {
-    if (playerState.error) return "error";
-    if (playerState.isLoading) return "loading";
-    if (playerState.isPlaying) return "playing";
-    return "paused";
-  }, [playerState]);
-  return /* @__PURE__ */ jsx(VideoSlotContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: clsx2(...stateClasses, className),
-      ...tapHandlers,
-      ...{
-        [VIDEO_ID_ATTR]: video.id,
-        [SLOT_ACTIVE_ATTR]: resourceState.isActive ? "true" : "false",
-        [PLAYER_STATE_ATTR]: playerStateString,
-        [LOADING_ATTR]: playerState.isLoading ? "true" : "false"
-      },
-      children: [
-        restoreFrame && !playerState.isPlaying && !playerState.error && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "sv-video-slot__restore-frame",
-            style: {
-              position: "absolute",
-              inset: 0,
-              zIndex: 5,
-              // Above video, below overlay
-              backgroundImage: `url(${restoreFrame})`,
-              backgroundSize: "contain",
-              backgroundPosition: "center",
-              backgroundRepeat: "no-repeat",
-              backgroundColor: "#000"
-            },
-            "aria-hidden": "true"
-          }
-        ),
-        playerState.error && (renderError ? renderError(playerState.error, handleRetry) : /* @__PURE__ */ jsx(DefaultErrorUI, { error: playerState.error, onRetry: handleRetry })),
-        playerState.isLoading && !playerState.error && !restoreFrame && (renderLoading ? renderLoading() : /* @__PURE__ */ jsx(DefaultLoadingUI, {})),
-        children
-      ]
-    }
-  ) });
-}
-function getUserFriendlyErrorMessage(error) {
-  const message = error.message?.toLowerCase() ?? "";
-  if (message.includes("network") || message.includes("fetch") || message.includes("offline")) {
-    return "Unable to connect. Please check your internet connection.";
-  }
-  if (message.includes("timeout") || message.includes("timed out")) {
-    return "Video took too long to load. Please try again.";
-  }
-  if (message.includes("format") || message.includes("codec") || message.includes("unsupported") || message.includes("media")) {
-    return "This video format is not supported.";
-  }
-  if (message.includes("blocked") || message.includes("denied") || message.includes("cors")) {
-    return "Video playback is restricted.";
-  }
-  if (message.includes("404") || message.includes("not found")) {
-    return "Video not available.";
-  }
-  if (message.includes("500") || message.includes("server")) {
-    return "Server error. Please try again later.";
-  }
-  if (message.includes("hls") || message.includes("manifest") || message.includes("segment")) {
-    return "Video streaming error. Please try again.";
-  }
-  return "Video failed to load. Tap to retry.";
-}
-function DefaultErrorUI({
-  error,
-  onRetry
-}) {
-  const displayMessage = getUserFriendlyErrorMessage(error);
-  return /* @__PURE__ */ jsxs("div", { className: "sv-video-slot__error", children: [
-    /* @__PURE__ */ jsx("div", { className: "sv-video-slot__error-icon", children: "\u26A0\uFE0F" }),
-    /* @__PURE__ */ jsx("div", { className: "sv-video-slot__error-message", children: displayMessage }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "sv-video-slot__error-retry",
-        onClick: (e) => {
-          e.stopPropagation();
-          onRetry();
-        },
-        children: "Retry"
-      }
-    )
-  ] });
-}
-function DefaultLoadingUI() {
-  return /* @__PURE__ */ jsx("div", { className: "sv-video-slot__spinner", children: /* @__PURE__ */ jsx("div", { className: "sv-video-slot__spinner-circle", "aria-label": "Loading video" }) });
-}
-var VideoSlotHeadless = memo(VideoSlotHeadlessBase);
-VideoSlotHeadless.displayName = "VideoSlotHeadless";
-var VideoSlotPosterInner = memo(function VideoSlotPosterInner2({
-  className,
-  forceSkeleton = false,
-  posterUrl,
-  loading = "eager",
-  alt,
-  onError,
-  videoPoster,
-  videoTitle,
-  firstFrame,
-  isLoading,
-  currentTime
-}) {
-  const imageSource = useMemo(() => {
-    if (forceSkeleton) return null;
-    if (posterUrl) return posterUrl;
-    if (firstFrame) return firstFrame;
-    if (videoPoster) return videoPoster;
-    return null;
-  }, [forceSkeleton, posterUrl, firstFrame, videoPoster]);
-  const sourceKey = imageSource ?? "skeleton";
-  const [errorForSource, setErrorForSource] = useState(null);
-  const imageError = errorForSource === sourceKey;
-  const handleImageError = useCallback(() => {
-    setErrorForSource(sourceKey);
-    onError?.(new Error("Failed to load poster image"));
-  }, [sourceKey, onError]);
-  const showSkeleton = !imageSource || imageError;
-  const posterType = useMemo(() => {
-    if (showSkeleton) return "skeleton";
-    if (imageSource === firstFrame) return "first-frame";
-    return "poster";
-  }, [showSkeleton, imageSource, firstFrame]);
-  const imageAlt = alt ?? videoTitle ?? "";
-  const isVisible = isLoading && currentTime === 0;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx2(
-        "sv-video-slot__poster",
-        `sv-video-slot__poster--${posterType}`,
-        !isVisible && "sv-video-slot__poster--hidden",
-        className
-      ),
-      "aria-hidden": !isVisible,
-      children: imageSource && !imageError ? /* @__PURE__ */ jsx(
-        "img",
-        {
-          className: "sv-video-slot__poster-image",
-          src: imageSource,
-          alt: imageAlt,
-          loading,
-          decoding: "async",
-          onError: handleImageError
-        }
-      ) : (
-        // Skeleton shimmer - pure CSS animation, no JS
-        /* @__PURE__ */ jsx("div", { className: "sv-video-slot__poster-skeleton", "aria-hidden": "true" })
-      )
-    }
-  );
-});
-VideoSlotPosterInner.displayName = "VideoSlotPosterInner";
-function VideoSlotPoster(props) {
-  const { video, firstFrame, playerState } = useVideoSlotContext();
-  return /* @__PURE__ */ jsx(
-    VideoSlotPosterInner,
-    {
-      ...props,
-      videoPoster: video.poster,
-      videoTitle: video.title,
-      firstFrame,
-      isLoading: playerState.isLoading,
-      currentTime: playerState.currentTime
-    }
-  );
-}
-VideoSlotPoster.displayName = "VideoSlotPoster";
-function VideoSlotSkeleton({
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx2("sv-video-slot__poster", "sv-video-slot__poster--skeleton", className),
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("div", { className: "sv-video-slot__poster-skeleton" })
-    }
-  );
-}
-VideoSlotSkeleton.displayName = "VideoSlotSkeleton";
-function VideoSlotOverlayRoot({
-  children,
-  className,
-  noGradient = false
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx2(
-        "sv-video-slot__overlay",
-        noGradient && "sv-video-slot__overlay--no-gradient",
-        className
-      ),
-      children
-    }
-  );
-}
-function VideoSlotOverlayTop({
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__overlay-top", className), children });
-}
-function VideoSlotOverlayBottom({
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__overlay-bottom", className), children });
-}
-function VideoSlotOverlayLeft({
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__overlay-left", className), children });
-}
-function VideoSlotOverlayRight({
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__overlay-right", className), children });
-}
-function VideoSlotOverlayActions({
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__actions", className), children });
-}
-function VideoSlotOverlayAuthor({
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__author", className), children });
-}
-VideoSlotOverlayRoot.displayName = "VideoSlotOverlay";
-VideoSlotOverlayTop.displayName = "VideoSlotOverlay.Top";
-VideoSlotOverlayBottom.displayName = "VideoSlotOverlay.Bottom";
-VideoSlotOverlayLeft.displayName = "VideoSlotOverlay.Left";
-VideoSlotOverlayRight.displayName = "VideoSlotOverlay.Right";
-VideoSlotOverlayActions.displayName = "VideoSlotOverlay.Actions";
-VideoSlotOverlayAuthor.displayName = "VideoSlotOverlay.Author";
-var VideoSlotOverlay = Object.assign(VideoSlotOverlayRoot, {
-  Top: VideoSlotOverlayTop,
-  Bottom: VideoSlotOverlayBottom,
-  Left: VideoSlotOverlayLeft,
-  Right: VideoSlotOverlayRight,
-  Actions: VideoSlotOverlayActions,
-  Author: VideoSlotOverlayAuthor
-});
-
-// src/components/VideoSlot/VideoSlotLikeAnimation.css.ts
-var VIDEO_SLOT_LIKE_ANIMATION_CSS = `
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   Container
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-like-animation-container {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: var(--sv-z-indicator, 3);
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   Single Heart
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-like-heart {
-  position: absolute;
-  left: var(--sv-heart-x, 50%);
-  top: var(--sv-heart-y, 50%);
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-  will-change: transform, opacity;
-}
-
-.sv-like-heart__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sv-heart-size, 80px);
-  height: var(--sv-heart-size, 80px);
-  transform-origin: center;
-  animation-duration: var(--sv-heart-duration, 1000ms);
-  animation-fill-mode: forwards;
-  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   Float Animation (TikTok style)
-   - Hearts float upward while wiggling
-   - Fades out near the top
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-like-heart--float .sv-like-heart__icon {
-  animation-name: sv-heart-float;
-  animation-timing-function: ease-out;
-}
-
-@keyframes sv-heart-float {
-  0% {
-    opacity: 0;
-    transform: scale(0) rotate(var(--sv-heart-rotation, 0deg));
-  }
-  10% {
-    opacity: 1;
-    transform: scale(calc(var(--sv-heart-scale, 1) * 1.2)) rotate(var(--sv-heart-rotation, 0deg));
-  }
-  20% {
-    transform: 
-      scale(var(--sv-heart-scale, 1)) 
-      rotate(var(--sv-heart-rotation, 0deg)) 
-      translateY(-20px) 
-      translateX(10px);
-  }
-  40% {
-    transform: 
-      scale(var(--sv-heart-scale, 1)) 
-      rotate(calc(var(--sv-heart-rotation, 0deg) - 10deg)) 
-      translateY(-60px) 
-      translateX(-15px);
-  }
-  60% {
-    opacity: 1;
-    transform: 
-      scale(var(--sv-heart-scale, 1)) 
-      rotate(calc(var(--sv-heart-rotation, 0deg) + 15deg)) 
-      translateY(-100px) 
-      translateX(10px);
-  }
-  80% {
-    opacity: 0.6;
-    transform: 
-      scale(calc(var(--sv-heart-scale, 1) * 0.9)) 
-      rotate(calc(var(--sv-heart-rotation, 0deg) - 5deg)) 
-      translateY(-140px) 
-      translateX(-5px);
-  }
-  100% {
-    opacity: 0;
-    transform: 
-      scale(calc(var(--sv-heart-scale, 1) * 0.7)) 
-      rotate(var(--sv-heart-rotation, 0deg)) 
-      translateY(-180px) 
-      translateX(0);
-  }
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   Burst Animation
-   - Heart bursts outward with energy
-   - Scales up quickly then fades
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-like-heart--burst .sv-like-heart__icon {
-  animation-name: sv-heart-burst;
-  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-@keyframes sv-heart-burst {
-  0% {
-    opacity: 0;
-    transform: scale(0) rotate(var(--sv-heart-rotation, 0deg));
-  }
-  20% {
-    opacity: 1;
-    transform: scale(calc(var(--sv-heart-scale, 1) * 1.5)) rotate(calc(var(--sv-heart-rotation, 0deg) + 15deg));
-  }
-  40% {
-    transform: scale(calc(var(--sv-heart-scale, 1) * 1.2)) rotate(calc(var(--sv-heart-rotation, 0deg) - 10deg));
-  }
-  60% {
-    opacity: 1;
-    transform: scale(var(--sv-heart-scale, 1)) rotate(var(--sv-heart-rotation, 0deg)) translateY(-30px);
-  }
-  80% {
-    opacity: 0.5;
-    transform: scale(calc(var(--sv-heart-scale, 1) * 0.9)) rotate(var(--sv-heart-rotation, 0deg)) translateY(-60px);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(calc(var(--sv-heart-scale, 1) * 0.6)) rotate(var(--sv-heart-rotation, 0deg)) translateY(-80px);
-  }
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   Scale Animation
-   - Simple scale up and fade
-   - Clean and minimal
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-like-heart--scale .sv-like-heart__icon {
-  animation-name: sv-heart-scale;
-  animation-timing-function: ease-out;
-}
-
-@keyframes sv-heart-scale {
-  0% {
-    opacity: 0;
-    transform: scale(0);
-  }
-  20% {
-    opacity: 1;
-    transform: scale(calc(var(--sv-heart-scale, 1) * 1.3));
-  }
-  40% {
-    transform: scale(var(--sv-heart-scale, 1));
-  }
-  70% {
-    opacity: 1;
-    transform: scale(var(--sv-heart-scale, 1));
-  }
-  100% {
-    opacity: 0;
-    transform: scale(calc(var(--sv-heart-scale, 1) * 1.1));
-  }
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   Bounce Animation
-   - Heart bounces in place with energy
-   - Playful and fun
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-like-heart--bounce .sv-like-heart__icon {
-  animation-name: sv-heart-bounce;
-  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-@keyframes sv-heart-bounce {
-  0% {
-    opacity: 0;
-    transform: scale(0) rotate(var(--sv-heart-rotation, 0deg)) translateY(0);
-  }
-  15% {
-    opacity: 1;
-    transform: scale(calc(var(--sv-heart-scale, 1) * 1.4)) rotate(calc(var(--sv-heart-rotation, 0deg) + 10deg)) translateY(-30px);
-  }
-  30% {
-    transform: scale(calc(var(--sv-heart-scale, 1) * 0.9)) rotate(calc(var(--sv-heart-rotation, 0deg) - 5deg)) translateY(10px);
-  }
-  45% {
-    transform: scale(calc(var(--sv-heart-scale, 1) * 1.15)) rotate(calc(var(--sv-heart-rotation, 0deg) + 5deg)) translateY(-15px);
-  }
-  60% {
-    opacity: 1;
-    transform: scale(var(--sv-heart-scale, 1)) rotate(var(--sv-heart-rotation, 0deg)) translateY(0);
-  }
-  80% {
-    opacity: 0.7;
-    transform: scale(var(--sv-heart-scale, 1)) rotate(var(--sv-heart-rotation, 0deg)) translateY(-10px);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(calc(var(--sv-heart-scale, 1) * 0.8)) rotate(var(--sv-heart-rotation, 0deg)) translateY(-20px);
-  }
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   Accessibility: Reduce motion
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-@media (prefers-reduced-motion: reduce) {
-  .sv-like-heart__icon {
-    animation-duration: 0.5s !important;
-  }
-  
-  .sv-like-heart--float .sv-like-heart__icon,
-  .sv-like-heart--burst .sv-like-heart__icon,
-  .sv-like-heart--bounce .sv-like-heart__icon {
-    animation-name: sv-heart-scale;
-  }
-}
-`;
-var SingleHeart = memo(function SingleHeart2({
-  heart,
-  icon,
-  size,
-  animation,
-  duration,
-  onComplete
-}) {
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      onComplete(heart.id);
-    }, duration);
-    return () => clearTimeout(timer);
-  }, [heart.id, duration, onComplete]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx2("sv-like-heart", `sv-like-heart--${animation}`),
-      style: {
-        "--sv-heart-x": `${heart.x}%`,
-        "--sv-heart-y": `${heart.y}%`,
-        "--sv-heart-rotation": `${heart.rotation}deg`,
-        "--sv-heart-scale": heart.scale,
-        "--sv-heart-duration": `${duration}ms`,
-        "--sv-heart-size": `${size}px`
-      },
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("div", { className: "sv-like-heart__icon", children: icon })
-    }
-  );
-});
-function VideoSlotLikeAnimation({
-  icon,
-  duration = 1e3,
-  animation = "float",
-  size = 80,
-  color = "#fe2c55",
-  showWhenAlreadyLiked = true,
-  maxHearts = 10,
-  className,
-  onHeartCreated
-}) {
-  useInsertionEffect(() => {
-    return injectComponentCSS("VideoSlotLikeAnimation", VIDEO_SLOT_LIKE_ANIMATION_CSS);
-  }, []);
-  const heartIdCounterRef = useRef(0);
-  const [hearts, setHearts] = useState([]);
-  const containerRef = useRef(null);
-  const triggerHeart = useCallback(
-    (x, y) => {
-      heartIdCounterRef.current += 1;
-      const newHeart = {
-        id: heartIdCounterRef.current,
-        x,
-        y,
-        createdAt: Date.now(),
-        rotation: Math.random() * 60 - 30,
-        // -30 to 30 degrees
-        scale: 0.8 + Math.random() * 0.4
-        // 0.8 to 1.2
-      };
-      setHearts((prev) => {
-        const updated = prev.length >= maxHearts ? prev.slice(1) : prev;
-        return [...updated, newHeart];
-      });
-      onHeartCreated?.(newHeart);
-    },
-    [maxHearts, onHeartCreated]
-  );
-  const handleHeartComplete = useCallback((id) => {
-    setHearts((prev) => prev.filter((h) => h.id !== id));
-  }, []);
-  const clearAll = useCallback(() => {
-    setHearts([]);
-  }, []);
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) {
-      if (process.env.NODE_ENV !== "production") {
-        console.warn("[VideoSlotLikeAnimation] Container ref is null. Animation will not work.");
-      }
-      return;
-    }
-    const el = container;
-    el.__likeAnimation = {
-      triggerHeart,
-      clearAll
-    };
-    el.__showWhenAlreadyLiked = showWhenAlreadyLiked;
-    return () => {
-      el.__likeAnimation = void 0;
-      el.__showWhenAlreadyLiked = void 0;
-    };
-  }, [triggerHeart, clearAll, showWhenAlreadyLiked]);
-  const iconElement = icon ?? (typeof HeartFilledIcon === "function" ? /* @__PURE__ */ jsx(
-    HeartFilledIcon,
-    {
-      width: size,
-      height: size,
-      style: { color, filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))" }
-    }
-  ) : /* @__PURE__ */ jsx("span", { style: { fontSize: size, color, textShadow: "0 2px 4px rgba(0,0,0,0.3)" }, children: "\u2764\uFE0F" }));
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className: clsx2("sv-like-animation-container", className),
-      "data-like-animation": "true",
-      "aria-hidden": "true",
-      children: hearts.map((heart) => /* @__PURE__ */ jsx(
-        SingleHeart,
-        {
-          heart,
-          icon: iconElement,
-          size,
-          animation,
-          duration,
-          onComplete: handleHeartComplete
-        },
-        heart.id
-      ))
-    }
-  );
-}
-VideoSlotLikeAnimation.displayName = "VideoSlotLikeAnimation";
-function DefaultPlayIcon({ size }) {
-  return /* @__PURE__ */ jsx(PlayIcon, { size });
-}
-function DefaultPauseIcon({ size }) {
-  return /* @__PURE__ */ jsx(PauseIcon, { size });
-}
-var VideoSlotPlayIndicatorInner = memo(function VideoSlotPlayIndicatorInner2({
-  playIcon,
-  pauseIcon,
-  size = 48,
-  duration = 600,
-  persistWhenPaused = true,
-  className,
-  testId,
-  lastUserToggleTime,
-  isPlaying
-}) {
-  const [showIndicator, setShowIndicator] = useState(false);
-  const [isPersisting, setIsPersisting] = useState(false);
-  const [isAnimatingOut, setIsAnimatingOut] = useState(false);
-  const [iconType, setIconType] = useState("play");
-  const hideTimeoutRef = useRef(null);
-  const lastHandledToggleTimeRef = useRef(0);
-  const isPlayingRef = useRef(isPlaying);
-  isPlayingRef.current = isPlaying;
-  const persistWhenPausedRef = useRef(persistWhenPaused);
-  persistWhenPausedRef.current = persistWhenPaused;
-  const prevIsPlayingRef = useRef(isPlaying);
-  const clearHideTimeout = () => {
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current);
-      hideTimeoutRef.current = null;
-    }
-  };
-  useEffect(() => {
-    const wasPlaying = prevIsPlayingRef.current;
-    prevIsPlayingRef.current = isPlaying;
-    if (!wasPlaying && isPlaying && isPersisting) {
-      const timeSinceLastToggle = Date.now() - lastUserToggleTime;
-      const isAutoResume = timeSinceLastToggle > 100;
-      if (isAutoResume) {
-        if (hideTimeoutRef.current) {
-          clearTimeout(hideTimeoutRef.current);
-          hideTimeoutRef.current = null;
-        }
-        setShowIndicator(false);
-        setIsPersisting(false);
-        setIsAnimatingOut(false);
-      }
-    }
-  }, [isPlaying, isPersisting, lastUserToggleTime]);
-  useEffect(() => {
-    if (lastUserToggleTime === 0 || lastUserToggleTime === lastHandledToggleTimeRef.current) {
-      return;
-    }
-    lastHandledToggleTimeRef.current = lastUserToggleTime;
-    if (isPersisting && isPlaying) {
-      setIconType("pause");
-      setIsPersisting(false);
-      setIsAnimatingOut(true);
-      clearHideTimeout();
-      hideTimeoutRef.current = setTimeout(() => {
-        setShowIndicator(false);
-        setIsAnimatingOut(false);
-        hideTimeoutRef.current = null;
-      }, duration);
-      return;
-    }
-    setShowIndicator(true);
-    setIsPersisting(false);
-    setIsAnimatingOut(false);
-    setIconType("play");
-    clearHideTimeout();
-    hideTimeoutRef.current = setTimeout(() => {
-      const currentIsPlaying = isPlayingRef.current;
-      const shouldPersist = persistWhenPausedRef.current;
-      if (shouldPersist && !currentIsPlaying) {
-        setIsPersisting(true);
-        return;
-      }
-      setShowIndicator(false);
-      hideTimeoutRef.current = null;
-    }, duration);
-    return clearHideTimeout;
-  }, [lastUserToggleTime, duration, isPersisting, isPlaying]);
-  if (!showIndicator && !isPersisting) return null;
-  const iconToShow = iconType === "pause" ? pauseIcon ?? /* @__PURE__ */ jsx(DefaultPauseIcon, { size }) : playIcon ?? /* @__PURE__ */ jsx(DefaultPlayIcon, { size });
-  const indicatorClass = [
-    "sv-video-slot__play-indicator",
-    showIndicator && "sv-video-slot__play-indicator--visible",
-    isPersisting && "sv-video-slot__play-indicator--persist",
-    isAnimatingOut && "sv-video-slot__play-indicator--animating-out",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: indicatorClass,
-      style: { "--sv-indicator-duration": `${duration}ms` },
-      "aria-hidden": "true",
-      "data-testid": testId,
-      children: /* @__PURE__ */ jsx("span", { className: "sv-video-slot__play-indicator-icon", children: iconToShow })
-    }
-  );
-});
-VideoSlotPlayIndicatorInner.displayName = "VideoSlotPlayIndicatorInner";
-function VideoSlotPlayIndicator(props) {
-  const context = useOptionalVideoSlotContext();
-  if (!context) return null;
-  const lastUserToggleTime = context.lastUserToggleTime ?? 0;
-  const isPlaying = context.playerState?.isPlaying ?? false;
-  return /* @__PURE__ */ jsx(
-    VideoSlotPlayIndicatorInner,
-    {
-      ...props,
-      lastUserToggleTime,
-      isPlaying
-    }
-  );
-}
-VideoSlotPlayIndicator.displayName = "VideoSlotPlayIndicator";
-
-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, useDoubleTap, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo };