@xhub-short/ui 0.1.0-beta.0

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

@@ -0,0 +1,592 @@
+import { VideoSlotHeadlessProps, VideoItem, UIResourceState, UIPlayerState, UIPlayerControls } from '@xhub-short/contracts';
+import * as react from 'react';
+import { ReactNode } from 'react';
+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;
+    /** Handle tap on video area */
+    onTap?: () => void;
+    /** Handle double tap */
+    onDoubleTap?: () => void;
+    /** Custom error UI */
+    renderError?: (error: Error, retry: () => void) => ReactNode;
+    /** Custom loading UI */
+    renderLoading?: () => ReactNode;
+}
+/**
+ * VideoSlotHeadless Component
+ *
+ * Headless component for a single video slot.
+ * Provides context to compound children (Poster, Overlay, etc.)
+ *
+ * ## SSR Safety (ITEM #3)
+ *
+ * This component is SSR-safe because:
+ * - CSS injection via `injectComponentCSS` checks `typeof document === 'undefined'`
+ * - All DOM queries are guarded by refs that are null on server
+ * - No direct window/document access in render path
+ *
+ * ## DOM Attributes Contract
+ *
+ * The component renders these data attributes for external access:
+ *
+ * | Attribute | Value | Purpose |
+ * |-----------|-------|---------|
+ * | `data-video-id` | string | Video identifier for analytics/testing |
+ * | `data-slot-active` | "true" \| "false" | Whether slot has resources allocated |
+ * | `data-player-state` | "playing" \| "paused" \| "loading" \| "error" | Current player state |
+ * | `data-loading` | "true" \| "false" | Whether video is loading |
+ *
+ * These attributes are used by:
+ * - Wired layer (VideoSlot in SDK) for DOM manipulation
+ * - Testing libraries for element selection
+ * - Analytics for event tracking
+ */
+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;
+}
+
+/**
+ * VideoSlotPoster - Poster/Thumbnail/First Frame Compound Component
+ *
+ * Displays visual placeholder while video loads.
+ * Priority order:
+ * 1. First frame (client-side captured)
+ * 2. Poster image (from video.poster)
+ * 3. Skeleton shimmer (fallback)
+ *
+ * @example
+ * ```tsx
+ * <VideoSlotHeadless {...props}>
+ *   <VideoSlotPoster />
+ *   <VideoSlotOverlay />
+ * </VideoSlotHeadless>
+ * ```
+ */
+interface VideoSlotPosterProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Force show skeleton (ignore first frame and poster) */
+    forceSkeleton?: boolean;
+    /** Custom poster image URL (overrides video.poster and firstFrame) */
+    posterUrl?: string;
+    /** Image loading priority */
+    loading?: 'eager' | 'lazy';
+    /** Alt text for the image */
+    alt?: string;
+    /** Called when image fails to load */
+    onError?: (error: Error) => void;
+}
+/**
+ * VideoSlotPoster Component
+ *
+ * Compound component that renders the poster/thumbnail layer.
+ * Must be used within a VideoSlotHeadless component.
+ *
+ * Automatically hides when video is playing via CSS.
+ */
+declare function VideoSlotPoster({ className, forceSkeleton, posterUrl, loading, alt, onError, }: VideoSlotPosterProps): React.ReactElement;
+declare namespace VideoSlotPoster {
+    var displayName: string;
+}
+/**
+ * VideoSlotSkeleton - Skeleton-only poster
+ *
+ * Use when you always want a skeleton placeholder regardless of video data.
+ */
+declare function VideoSlotSkeleton({ className, }: {
+    className?: string;
+}): React.ReactElement;
+declare namespace VideoSlotSkeleton {
+    var displayName: string;
+}
+
+/**
+ * VideoSlotOverlay - Overlay Container Compound Component
+ *
+ * Provides a container for overlay content (author info, action bar, captions, etc.)
+ * with a gradient background for better text visibility.
+ *
+ * Also provides sub-components for positioning content in specific regions.
+ *
+ * @example
+ * ```tsx
+ * <VideoSlotHeadless {...props}>
+ *   <VideoSlotPoster />
+ *   <VideoSlotOverlay>
+ *     <VideoSlotOverlay.Top>
+ *       <HeaderContent />
+ *     </VideoSlotOverlay.Top>
+ *     <VideoSlotOverlay.Bottom>
+ *       <AuthorInfo />
+ *     </VideoSlotOverlay.Bottom>
+ *     <VideoSlotOverlay.Right>
+ *       <ActionBar />
+ *     </VideoSlotOverlay.Right>
+ *   </VideoSlotOverlay>
+ * </VideoSlotHeadless>
+ * ```
+ */
+
+interface VideoSlotOverlayProps {
+    /** Children (overlay content) */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Disable gradient background */
+    noGradient?: boolean;
+}
+interface VideoSlotOverlayRegionProps {
+    /** Children (region content) */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * VideoSlotOverlay Component
+ *
+ * Container for overlay content with gradient background.
+ * Does NOT require VideoSlotContext - can be used standalone.
+ *
+ * The gradient provides better visibility for text/icons over video.
+ */
+declare function VideoSlotOverlayRoot({ children, className, noGradient, }: VideoSlotOverlayProps): React.ReactElement;
+declare namespace VideoSlotOverlayRoot {
+    var displayName: string;
+}
+/**
+ * Top region of overlay
+ * Typically used for video title, hashtags, or status indicators.
+ */
+declare function VideoSlotOverlayTop({ children, className, }: VideoSlotOverlayRegionProps): React.ReactElement;
+declare namespace VideoSlotOverlayTop {
+    var displayName: string;
+}
+/**
+ * Bottom region of overlay
+ * Typically used for author info, caption, music info.
+ */
+declare function VideoSlotOverlayBottom({ children, className, }: VideoSlotOverlayRegionProps): React.ReactElement;
+declare namespace VideoSlotOverlayBottom {
+    var displayName: string;
+}
+/**
+ * Left region of overlay
+ * Rarely used, but available for custom layouts.
+ */
+declare function VideoSlotOverlayLeft({ children, className, }: VideoSlotOverlayRegionProps): React.ReactElement;
+declare namespace VideoSlotOverlayLeft {
+    var displayName: string;
+}
+/**
+ * Right region of overlay
+ * Typically used for action buttons (like, comment, share).
+ */
+declare function VideoSlotOverlayRight({ children, className, }: VideoSlotOverlayRegionProps): React.ReactElement;
+declare namespace VideoSlotOverlayRight {
+    var displayName: string;
+}
+/**
+ * Actions region (alias for right, with specific styling)
+ * Optimized for vertical action button layout (TikTok style).
+ */
+declare function VideoSlotOverlayActions({ children, className, }: VideoSlotOverlayRegionProps): React.ReactElement;
+declare namespace VideoSlotOverlayActions {
+    var displayName: string;
+}
+/**
+ * Author region (alias for bottom-left area)
+ * Optimized for author info layout.
+ */
+declare function VideoSlotOverlayAuthor({ children, className, }: VideoSlotOverlayRegionProps): React.ReactElement;
+declare namespace VideoSlotOverlayAuthor {
+    var displayName: string;
+}
+/**
+ * VideoSlotOverlay with compound sub-components
+ *
+ * @example
+ * ```tsx
+ * <VideoSlotOverlay>
+ *   <VideoSlotOverlay.Top>Header</VideoSlotOverlay.Top>
+ *   <VideoSlotOverlay.Author>@username</VideoSlotOverlay.Author>
+ *   <VideoSlotOverlay.Actions>
+ *     <LikeButton />
+ *   </VideoSlotOverlay.Actions>
+ * </VideoSlotOverlay>
+ * ```
+ */
+declare const VideoSlotOverlay: typeof VideoSlotOverlayRoot & {
+    Top: typeof VideoSlotOverlayTop;
+    Bottom: typeof VideoSlotOverlayBottom;
+    Left: typeof VideoSlotOverlayLeft;
+    Right: typeof VideoSlotOverlayRight;
+    Actions: typeof VideoSlotOverlayActions;
+    Author: typeof VideoSlotOverlayAuthor;
+};
+
+type LikeAnimationStyle = 'float' | 'burst' | 'scale' | 'bounce';
+interface HeartInstance {
+    /** Unique ID for this heart */
+    id: number;
+    /** X position (percentage 0-100) */
+    x: number;
+    /** Y position (percentage 0-100) */
+    y: number;
+    /** Timestamp when created */
+    createdAt: number;
+    /** Random rotation for variety (-30 to 30 degrees) */
+    rotation: number;
+    /** Random scale factor (0.8 to 1.2) */
+    scale: number;
+}
+interface VideoSlotLikeAnimationProps {
+    /**
+     * Custom icon to display
+     * @default HeartFilledIcon (red)
+     */
+    icon?: ReactNode;
+    /**
+     * Animation duration in milliseconds
+     * @default 1000
+     */
+    duration?: number;
+    /**
+     * Animation style
+     * @default 'float'
+     */
+    animation?: LikeAnimationStyle;
+    /**
+     * Icon size in pixels
+     * @default 80
+     */
+    size?: number;
+    /**
+     * Icon color (only applies to default icon)
+     * @default '#fe2c55' (TikTok red)
+     */
+    color?: string;
+    /**
+     * Whether to show animation even when video is already liked
+     * If true: double-tap always shows heart animation
+     * If false: double-tap only shows heart on first like
+     * @default true
+     */
+    showWhenAlreadyLiked?: boolean;
+    /**
+     * Maximum number of hearts visible at once
+     * @default 10
+     */
+    maxHearts?: number;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Callback when a heart animation starts
+     */
+    onHeartCreated?: (heart: HeartInstance) => void;
+}
+/**
+ * Imperative handle for controlling animation from parent.
+ *
+ * Used by VideoSlotHeadless to trigger hearts via DOM contract.
+ * This interface is attached to the DOM element as `__likeAnimation`.
+ */
+interface VideoSlotLikeAnimationRef {
+    /**
+     * Trigger a heart at specific position
+     * @param x X position (0-100 percentage)
+     * @param y Y position (0-100 percentage)
+     */
+    triggerHeart: (x: number, y: number) => void;
+    /**
+     * Clear all hearts immediately
+     */
+    clearAll: () => void;
+}
+/**
+ * Type helper for DOM element with imperative contract.
+ * Use this for type-safe access to animation methods.
+ *
+ * @example
+ * ```ts
+ * const el = container.querySelector('[data-like-animation]') as LikeAnimationElement | null;
+ * el?.__likeAnimation?.triggerHeart(50, 50);
+ * ```
+ */
+type LikeAnimationElement = HTMLDivElement & {
+    __likeAnimation?: VideoSlotLikeAnimationRef;
+    __showWhenAlreadyLiked?: boolean;
+};
+/**
+ * VideoSlotLikeAnimation
+ *
+ * This component manages multiple heart animations that appear at tap positions.
+ * It's designed to be used as a compound child of VideoSlot.
+ *
+ * ## Imperative Control
+ *
+ * Instead of React ref forwarding, this component uses a DOM-based contract
+ * for imperative control. This is intentional - it allows VideoSlotHeadless
+ * to trigger animations without tight coupling or prop drilling.
+ *
+ * The parent (VideoSlotHeadless) accesses methods via:
+ * ```ts
+ * const el = container.querySelector('[data-like-animation="true"]');
+ * el.__likeAnimation.triggerHeart(x, y);
+ * ```
+ */
+declare function VideoSlotLikeAnimation({ icon, duration, animation, size, color, showWhenAlreadyLiked, maxHearts, className, onHeartCreated, }: VideoSlotLikeAnimationProps): react_jsx_runtime.JSX.Element;
+declare namespace VideoSlotLikeAnimation {
+    var displayName: string;
+}
+
+interface VideoSlotContextValue {
+    /** Video item data */
+    video: VideoItem;
+    /** Resource allocation state */
+    resourceState: UIResourceState;
+    /** Player state */
+    playerState: UIPlayerState;
+    /** Player controls */
+    playerControls: UIPlayerControls;
+    /** First frame data URL (if captured) */
+    firstFrame: string | null;
+    /** Set first frame data URL */
+    setFirstFrame: (dataUrl: string) => void;
+}
+/**
+ * VideoSlot Context
+ *
+ * Provides access to video data and player controls for compound components.
+ */
+declare const VideoSlotContext: react.Context<VideoSlotContextValue | null>;
+/**
+ * Access VideoSlot context (throws if not in provider)
+ *
+ * This hook includes dev-only invariant checks with helpful debugging info.
+ *
+ * @example
+ * ```tsx
+ * function VideoSlotOverlay() {
+ *   const { video, playerState } = useVideoSlotContext();
+ *   return <div>{video.title} - {playerState.currentTime}s</div>;
+ * }
+ * ```
+ *
+ * @throws {Error} If used outside of VideoSlot provider (with debug info in dev)
+ */
+declare function useVideoSlotContext(): VideoSlotContextValue;
+/**
+ * Access VideoSlot context (returns null if not in provider)
+ *
+ * Useful for components that can work both inside and outside VideoSlot.
+ *
+ * @example
+ * ```tsx
+ * function MaybeInSlot() {
+ *   const ctx = useOptionalVideoSlotContext();
+ *   if (ctx) {
+ *     return <div>In slot: {ctx.video.title}</div>;
+ *   }
+ *   return <div>Not in slot</div>;
+ * }
+ * ```
+ */
+declare function useOptionalVideoSlotContext(): VideoSlotContextValue | null;
+/**
+ * Get video item from context
+ */
+declare function useVideoSlotVideo(): VideoItem;
+/**
+ * Get player state from context
+ */
+declare function useVideoSlotPlayer(): {
+    state: UIPlayerState;
+    controls: UIPlayerControls;
+};
+/**
+ * Get resource state from context
+ */
+declare function useVideoSlotResource(): UIResourceState;
+/**
+ * Check if slot is currently active
+ */
+declare function useVideoSlotIsActive(): boolean;
+/**
+ * Check if video is playing
+ */
+declare function useVideoSlotIsPlaying(): boolean;
+
+/**
+ * VideoSlot DOM Contract Constants
+ *
+ * Defines data attributes used for DOM querying and direct manipulation.
+ * These constants ensure consistency between headless and wired components.
+ *
+ * @see packages/ui/src/components/VideoFeed/README.md for DOM Contract documentation
+ */
+/**
+ * Data attribute for video ID
+ * Used to identify which video this slot is displaying
+ * @example data-video-id="video-123"
+ */
+declare const VIDEO_ID_ATTR = "data-video-id";
+/**
+ * Dataset key for video ID (camelCase)
+ * @example element.dataset.videoId
+ */
+declare const VIDEO_ID_DATASET_KEY = "videoId";
+/**
+ * Data attribute for slot active state
+ * @example data-slot-active="true"
+ */
+declare const SLOT_ACTIVE_ATTR = "data-slot-active";
+/**
+ * Dataset key for slot active state (camelCase)
+ * @example element.dataset.slotActive
+ */
+declare const SLOT_ACTIVE_DATASET_KEY = "slotActive";
+/**
+ * Data attribute for player state
+ * @example data-player-state="playing"
+ */
+declare const PLAYER_STATE_ATTR = "data-player-state";
+/**
+ * Dataset key for player state (camelCase)
+ * @example element.dataset.playerState
+ */
+declare const PLAYER_STATE_DATASET_KEY = "playerState";
+/**
+ * Data attribute for loading state
+ * @example data-loading="true"
+ */
+declare const LOADING_ATTR = "data-loading";
+/**
+ * Dataset key for loading state (camelCase)
+ * @example element.dataset.loading
+ */
+declare const LOADING_DATASET_KEY = "loading";
+declare const SLOT_CLASS = "sv-video-slot";
+declare const SLOT_ACTIVE_CLASS = "sv-video-slot--active";
+declare const SLOT_LOADING_CLASS = "sv-video-slot--loading";
+declare const SLOT_ERROR_CLASS = "sv-video-slot--error";
+declare const SLOT_PLAYING_CLASS = "sv-video-slot--playing";
+declare const SLOT_PAUSED_CLASS = "sv-video-slot--paused";
+/**
+ * Z-Index layering contract for VideoSlot components.
+ *
+ * These values define the stacking order within a single video slot.
+ * Host apps can override via CSS custom properties.
+ *
+ * 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: 0 - Slot Container (base)         │
+ * └─────────────────────────────────────────────┘
+ *
+ * @example Override via CSS variables
+ * ```css
+ * :root {
+ *   --sv-z-poster: 1;
+ *   --sv-z-overlay: 2;
+ *   --sv-z-indicator: 3;
+ *   --sv-z-progress: 4;
+ * }
+ * ```
+ */
+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;
+    /** Error UI and play/pause indicator */
+    readonly INDICATOR: 3;
+    /** Progress bar (always on top) */
+    readonly PROGRESS: 4;
+};
+/**
+ * CSS custom property names for z-index layers.
+ * Use these to override default z-index values.
+ */
+declare const Z_INDEX_CSS_VARS: {
+    readonly POSTER: "--sv-z-poster";
+    readonly OVERLAY: "--sv-z-overlay";
+    readonly INDICATOR: "--sv-z-indicator";
+    readonly PROGRESS: "--sv-z-progress";
+};
+
+/**
+ * VideoSlot Component CSS
+ *
+ * Per-component CSS following the bundle optimization strategy.
+ * This CSS is injected via useInsertionEffect when component mounts.
+ *
+ * Architecture:
+ * - Uses CSS Variables for theming (--sv-* prefix)
+ * - 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  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: 0;\n  padding: var(--sv-spacing-md, 16px);\n  padding-bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-spacing-md, 16px));\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  gap: var(--sv-spacing-lg, 20px);\n}\n\n/* Author info (typically bottom left) */\n.sv-video-slot__author {\n  position: absolute;\n  left: var(--sv-spacing-md, 16px);\n  bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-spacing-md, 16px));\n  right: 80px;\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";
+
+/**
+ * VideoSlotLikeAnimation CSS Styles
+ *
+ * Beautiful heart animations with multiple styles:
+ * - float: Hearts float up and fade (like TikTok)
+ * - burst: Hearts burst outward with particles
+ * - scale: Hearts scale up and fade
+ * - bounce: Hearts bounce then fade
+ */
+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 };

package/dist/components/VideoSlot/index.js

@@ -0,0 +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-QKQUXR3H.js';