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

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

@@ -1,3 +1,4 @@
+import * as react from 'react';
 import { ProgressBarHeadlessProps } from '@xhub-short/contracts';
 
 interface ProgressBarHeadlessExtendedProps extends ProgressBarHeadlessProps {
@@ -16,6 +17,23 @@ interface ProgressBarHeadlessExtendedProps extends ProgressBarHeadlessProps {
      * @default false
      */
     minimal?: boolean;
+    /**
+     * Auto-hide progress bar when video is playing
+     *
+     * When enabled:
+     * - Hidden when video is playing
+     * - Visible when video is paused
+     * - Visible when user hovers (if seekable)
+     *
+     * @default true
+     */
+    autoHide?: boolean;
+    /**
+     * Whether progress bar should be visible (controlled by parent)
+     * Used by wired component to control visibility based on player state.
+     * Takes precedence over autoHide behavior.
+     */
+    visible?: boolean;
     /**
      * Ref to the fill element for direct DOM manipulation (ADR 005)
      * Used by wired component for 60fps smooth updates
@@ -64,8 +82,18 @@ declare function calculateProgress(currentTime: number, duration: number): numbe
  * - Headless version updates via React state (acceptable for demos)
  * - Wired version (P11) will use Direct DOM Update for 60fps smooth
  * - Fill element uses will-change: transform for GPU compositing
+ *
+ * Wrapped with React.memo to prevent unnecessary re-renders from parent.
+ * Re-render is expected during seek (local state changes).
+ */
+declare function ProgressBarHeadlessBase({ currentTime, duration, buffered, seekable, className, onSeek, onSeekStart, onSeekEnd, showTime, showTooltip, minimal, autoHide, visible, fillRef: externalFillRef, bufferedRef: externalBufferedRef, handleRef: externalHandleRef, currentTimeRef: externalCurrentTimeRef, durationRef: externalDurationRef, }: ProgressBarHeadlessExtendedProps): React.ReactElement;
+/**
+ * ProgressBarHeadless - Memoized for performance
+ *
+ * Custom compare function excludes frequently-changing time values since
+ * the wired component uses Direct DOM Update for those.
  */
-declare function ProgressBarHeadless({ currentTime, duration, buffered, seekable, className, onSeek, onSeekStart, onSeekEnd, showTime, showTooltip, minimal, fillRef: externalFillRef, bufferedRef: externalBufferedRef, handleRef: externalHandleRef, currentTimeRef: externalCurrentTimeRef, durationRef: externalDurationRef, }: ProgressBarHeadlessExtendedProps): React.ReactElement;
+declare const ProgressBarHeadless: react.MemoExoticComponent<typeof ProgressBarHeadlessBase>;
 
 /**
  * CSS for ProgressBar Component
@@ -79,6 +107,6 @@ declare function ProgressBarHeadless({ currentTime, duration, buffered, seekable
  *    - Avoid width changes (causes layout thrashing)
  * 5. Support touch/click seek interaction
  */
-declare const PROGRESS_BAR_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 * ProgressBar 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-progress-bar {\n  /* Layout */\n  position: relative;\n  width: 100%;\n  \n  /* Interactive area - larger than visual for easier touch */\n  height: var(--sv-progress-bar-touch-height, 24px);\n  display: flex;\n  align-items: center;\n  \n  /* Cursor */\n  cursor: pointer;\n  \n  /* Prevent text selection during seek */\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.sv-progress-bar--disabled {\n  cursor: default;\n  pointer-events: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Track Wrapper (contains track + tooltip)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__track-wrapper {\n  position: relative;\n  flex: 1;\n  display: flex;\n  align-items: center;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Track (background bar)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__track {\n  position: relative;\n  width: 100%;\n  height: var(--sv-progress-bar-height, 3px);\n  \n  /* Visual */\n  background: var(--sv-progress-bar-track-bg, rgba(255, 255, 255, 0.2));\n  border-radius: var(--sv-progress-bar-radius, 1.5px);\n  overflow: hidden;\n}\n\n/* Expand track on hover/active for better visibility */\n.sv-progress-bar:hover .sv-progress-bar__track,\n.sv-progress-bar--seeking .sv-progress-bar__track {\n  height: var(--sv-progress-bar-height-active, 5px);\n}\n\n/* Disable transition during seeking for immediate feedback */\n.sv-progress-bar--seeking .sv-progress-bar__fill,\n.sv-progress-bar--seeking .sv-progress-bar__handle {\n  transition: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Buffered Fill (shows buffered progress)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  \n  /* Visual */\n  background: var(--sv-progress-bar-buffered-bg, rgba(255, 255, 255, 0.3));\n  border-radius: inherit;\n  \n  /* Performance: Use scaleX for GPU acceleration */\n  transform-origin: left center;\n  transform: scaleX(0);\n  \n  /* Smooth transition for buffered updates */\n  transition: transform 0.3s ease-out;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Progress Fill (shows playback progress)\n * IMPORTANT: Designed for Direct DOM Update (ADR 005)\n * - Uses scaleX() for 60fps smooth animation\n * - Wired component will update transform directly via DOM manipulation\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  \n  /* Visual */\n  background: var(--sv-progress-bar-fill-bg, var(--sv-color-accent, #fe2c55));\n  border-radius: inherit;\n  \n  /* Performance: Use scaleX for GPU acceleration */\n  transform-origin: left center;\n  transform: scaleX(0);\n  \n  /* Smooth transition for headless mode (timeupdate ~250ms intervals)\n   * For RAF-based Direct DOM Update (wired mode), this has minimal impact\n   * because transform updates every 16ms anyway */\n  transition: var(--sv-progress-bar-fill-transition, transform 0.25s linear);\n  will-change: transform;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Seek Handle (thumb indicator)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__handle {\n  position: absolute;\n  top: 50%;\n  \n  /* Size */\n  width: var(--sv-progress-bar-handle-size, 12px);\n  height: var(--sv-progress-bar-handle-size, 12px);\n  \n  /* Positioning - will be set via left % */\n  left: 0;\n  transform: translate(-50%, -50%) scale(0);\n  \n  /* Visual */\n  background: var(--sv-progress-bar-handle-bg, #fff);\n  border-radius: 50%;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  \n  /* Animation - smooth position + show/hide */\n  transition: left 0.25s linear, transform 0.15s ease-out;\n}\n\n/* Show handle on hover/seeking */\n.sv-progress-bar:hover .sv-progress-bar__handle,\n.sv-progress-bar--seeking .sv-progress-bar__handle {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Time Display (optional, shows current/duration)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__time {\n  display: flex;\n  justify-content: space-between;\n  padding: var(--sv-spacing-xs, 4px) 0;\n  \n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n  font-size: var(--sv-font-size-xs, 11px);\n  font-variant-numeric: tabular-nums;\n  color: var(--sv-text-secondary, rgba(255, 255, 255, 0.7));\n}\n\n.sv-progress-bar__time-current,\n.sv-progress-bar__time-duration {\n  /* Ensure consistent width for changing numbers */\n  min-width: 2.5em;\n}\n\n.sv-progress-bar__time-current {\n  text-align: left;\n}\n\n.sv-progress-bar__time-duration {\n  text-align: right;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Seek Tooltip (shows time at cursor position during hover)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__tooltip {\n  position: absolute;\n  /* Position above the container (not inside track to avoid overflow:hidden) */\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -100%);\n  margin-top: -8px;\n  \n  /* Visual */\n  padding: 4px 8px;\n  background: var(--sv-bg-overlay, rgba(0, 0, 0, 0.8));\n  border-radius: var(--sv-border-radius-sm, 4px);\n  \n  /* Typography */\n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n  font-size: var(--sv-font-size-xs, 11px);\n  font-variant-numeric: tabular-nums;\n  color: var(--sv-text-primary, #fff);\n  white-space: nowrap;\n  \n  /* Hidden by default */\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.15s ease, visibility 0.15s ease;\n  \n  /* Prevent tooltip from capturing pointer events */\n  pointer-events: none;\n  \n  /* Ensure tooltip is above other elements */\n  z-index: 10;\n}\n\n.sv-progress-bar:hover .sv-progress-bar__tooltip,\n.sv-progress-bar--seeking .sv-progress-bar__tooltip {\n  opacity: 1;\n  visibility: visible;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Minimal Variant (for use inside VideoSlot overlay)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar--minimal {\n  height: auto;\n}\n\n.sv-progress-bar--minimal .sv-progress-bar__track {\n  height: var(--sv-progress-bar-height-minimal, 2px);\n}\n\n.sv-progress-bar--minimal:hover .sv-progress-bar__track {\n  height: var(--sv-progress-bar-height-minimal, 2px);\n}\n\n.sv-progress-bar--minimal .sv-progress-bar__handle {\n  display: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Reduced Motion (Accessibility)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n@media (prefers-reduced-motion: reduce) {\n  .sv-progress-bar__fill,\n  .sv-progress-bar__buffered,\n  .sv-progress-bar__handle,\n  .sv-progress-bar__tooltip {\n    transition: none;\n  }\n}\n";
+declare const PROGRESS_BAR_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 * ProgressBar 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-progress-bar {\n  /* Layout */\n  position: relative;\n  width: 100%;\n  \n  /* Interactive area - larger than visual for easier touch */\n  height: var(--sv-progress-bar-touch-height, 24px);\n  display: flex;\n  align-items: center;\n  \n  /* Cursor */\n  cursor: pointer;\n  \n  /* Prevent text selection during seek */\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.sv-progress-bar--disabled {\n  cursor: default;\n  pointer-events: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Track Wrapper (contains track + tooltip)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__track-wrapper {\n  position: relative;\n  flex: 1;\n  display: flex;\n  align-items: center;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Track (background bar)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__track {\n  position: relative;\n  width: 100%;\n  height: var(--sv-progress-bar-height, 3px);\n  \n  /* Visual */\n  background: var(--sv-progress-bar-track-bg, rgba(255, 255, 255, 0.2));\n  border-radius: var(--sv-progress-bar-radius, 1.5px);\n  overflow: hidden;\n}\n\n/* Expand track on hover/active for better visibility */\n.sv-progress-bar:hover .sv-progress-bar__track,\n.sv-progress-bar--seeking .sv-progress-bar__track {\n  height: var(--sv-progress-bar-height-active, 5px);\n}\n\n/* Disable transition during seeking for immediate feedback */\n.sv-progress-bar--seeking .sv-progress-bar__fill,\n.sv-progress-bar--seeking .sv-progress-bar__handle {\n  transition: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Buffered Fill (shows buffered progress)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  \n  /* Visual */\n  background: var(--sv-progress-bar-buffered-bg, rgba(255, 255, 255, 0.3));\n  border-radius: inherit;\n  \n  /* Performance: Use scaleX for GPU acceleration */\n  transform-origin: left center;\n  transform: scaleX(0);\n  \n  /* Smooth transition for buffered updates */\n  transition: transform 0.3s ease-out;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Progress Fill (shows playback progress)\n * IMPORTANT: Designed for Direct DOM Update (ADR 005)\n * - Uses scaleX() for 60fps smooth animation\n * - Wired component will update transform directly via DOM manipulation\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  \n  /* Visual */\n  background: var(--sv-progress-bar-fill-bg, var(--sv-color-accent, #fe2c55));\n  border-radius: inherit;\n  \n  /* Performance: Use scaleX for GPU acceleration */\n  transform-origin: left center;\n  transform: scaleX(0);\n  \n  /* Smooth transition for headless mode (timeupdate ~250ms intervals)\n   * For RAF-based Direct DOM Update (wired mode), this has minimal impact\n   * because transform updates every 16ms anyway */\n  transition: var(--sv-progress-bar-fill-transition, transform 0.25s linear);\n  will-change: transform;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Seek Handle (thumb indicator)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__handle {\n  position: absolute;\n  top: 50%;\n  \n  /* Size */\n  width: var(--sv-progress-bar-handle-size, 12px);\n  height: var(--sv-progress-bar-handle-size, 12px);\n  \n  /* Positioning - will be set via left % */\n  left: 0;\n  transform: translate(-50%, -50%) scale(0);\n  \n  /* Visual */\n  background: var(--sv-progress-bar-handle-bg, #fff);\n  border-radius: 50%;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  \n  /* Animation - smooth position + show/hide */\n  transition: left 0.25s linear, transform 0.15s ease-out;\n}\n\n/* Show handle on hover/seeking */\n.sv-progress-bar:hover .sv-progress-bar__handle,\n.sv-progress-bar--seeking .sv-progress-bar__handle {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Time Display (optional, shows current/duration)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__time {\n  display: flex;\n  justify-content: space-between;\n  padding: var(--sv-spacing-xs, 4px) 0;\n  \n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n  font-size: var(--sv-font-size-xs, 11px);\n  font-variant-numeric: tabular-nums;\n  color: var(--sv-text-secondary, rgba(255, 255, 255, 0.7));\n}\n\n.sv-progress-bar__time-current,\n.sv-progress-bar__time-duration {\n  /* Ensure consistent width for changing numbers */\n  min-width: 2.5em;\n}\n\n.sv-progress-bar__time-current {\n  text-align: left;\n}\n\n.sv-progress-bar__time-duration {\n  text-align: right;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Seek Tooltip (shows time at cursor position during hover)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__tooltip {\n  position: absolute;\n  /* Position above the container (not inside track to avoid overflow:hidden) */\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -100%);\n  margin-top: -8px;\n  \n  /* Visual */\n  padding: 4px 8px;\n  background: var(--sv-bg-overlay, rgba(0, 0, 0, 0.8));\n  border-radius: var(--sv-border-radius-sm, 4px);\n  \n  /* Typography */\n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n  font-size: var(--sv-font-size-xs, 11px);\n  font-variant-numeric: tabular-nums;\n  color: var(--sv-text-primary, #fff);\n  white-space: nowrap;\n  \n  /* Hidden by default */\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.15s ease, visibility 0.15s ease;\n  \n  /* Prevent tooltip from capturing pointer events */\n  pointer-events: none;\n  \n  /* Ensure tooltip is above other elements */\n  z-index: 10;\n}\n\n.sv-progress-bar:hover .sv-progress-bar__tooltip,\n.sv-progress-bar--seeking .sv-progress-bar__tooltip {\n  opacity: 1;\n  visibility: visible;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Minimal Variant (for use inside VideoSlot overlay)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar--minimal {\n  height: auto;\n}\n\n.sv-progress-bar--minimal .sv-progress-bar__track {\n  height: var(--sv-progress-bar-height-minimal, 2px);\n}\n\n.sv-progress-bar--minimal:hover .sv-progress-bar__track {\n  height: var(--sv-progress-bar-height-minimal, 2px);\n}\n\n.sv-progress-bar--minimal .sv-progress-bar__handle {\n  display: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Auto-hide Variant\n * Shows progress bar only when video is paused or user is seeking/hovering\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar--auto-hide {\n  /* Smooth transition for show/hide */\n  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sv-progress-bar--auto-hide.sv-progress-bar--hidden {\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  pointer-events: none;\n}\n\n/* Show on hover even when auto-hide is enabled */\n.sv-progress-bar--auto-hide:hover {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Always show when seeking */\n.sv-progress-bar--auto-hide.sv-progress-bar--seeking {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Reduced Motion (Accessibility)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n@media (prefers-reduced-motion: reduce) {\n  .sv-progress-bar__fill,\n  .sv-progress-bar__buffered,\n  .sv-progress-bar__handle,\n  .sv-progress-bar__tooltip {\n    transition: none;\n  }\n}\n";
 
 export { PROGRESS_BAR_CSS, ProgressBarHeadless, type ProgressBarHeadlessExtendedProps, calculateProgress, formatTime };

package/dist/components/ProgressBar/index.js

@@ -1 +1 @@
-export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from '../../chunk-YW23IBKF.js';
+export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from '../../chunk-ECR42RKK.js';

package/dist/components/Skeleton/index.js

@@ -1 +1 @@
-export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from '../../chunk-4MN72OZH.js';
+export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from '../../chunk-UNV3NWN6.js';

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

@@ -0,0 +1,94 @@
+import { ReactNode } from 'react';
+
+/**
+ * SubtitleDisplayHeadless - Headless subtitle display component
+ *
+ * Displays subtitle text on video with customizable styling.
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * Subtitle position
+ */
+type SubtitlePosition = 'bottom' | 'top' | 'middle';
+/**
+ * Subtitle size
+ */
+type SubtitleSize = 'small' | 'medium' | 'large';
+/**
+ * Subtitle style variant
+ */
+type SubtitleStyle = 'background' | 'outline' | 'drop-shadow';
+/**
+ * Props for SubtitleDisplayHeadless
+ */
+interface SubtitleDisplayHeadlessProps {
+    /** Subtitle text to display */
+    text?: string | null;
+    /** Whether subtitles are enabled */
+    isEnabled?: boolean;
+    /** Position of subtitles */
+    position?: SubtitlePosition;
+    /** Size variant */
+    size?: SubtitleSize;
+    /** Style variant */
+    styleVariant?: SubtitleStyle;
+    /** Additional CSS class */
+    className?: string;
+    /** Custom render */
+    renderSubtitle?: (text: string) => ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+/**
+ * SubtitleDisplayHeadless - Display subtitles on video
+ *
+ * @example
+ * ```tsx
+ * <SubtitleDisplayHeadless
+ *   text={currentSubtitle}
+ *   isEnabled={isSubtitleEnabled}
+ *   position="bottom"
+ *   size="medium"
+ * />
+ * ```
+ */
+declare function SubtitleDisplayHeadless({ text, isEnabled, position, size, styleVariant, className, renderSubtitle, testId, }: SubtitleDisplayHeadlessProps): React.ReactElement | null;
+/**
+ * Props for SubtitleIndicator
+ */
+interface SubtitleIndicatorProps {
+    /** Whether video has subtitles */
+    hasSubtitle: boolean;
+    /** Whether subtitles are enabled */
+    isEnabled?: boolean;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Additional CSS class */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+}
+/**
+ * SubtitleIndicator - CC icon showing subtitle availability
+ *
+ * @example
+ * ```tsx
+ * <SubtitleIndicator
+ *   hasSubtitle={video.hasSubtitle}
+ *   isEnabled={isSubtitleEnabled}
+ *   onClick={toggleSubtitle}
+ * />
+ * ```
+ */
+declare function SubtitleIndicator({ hasSubtitle, isEnabled, icon, className, onClick, }: SubtitleIndicatorProps): React.ReactElement | null;
+
+/**
+ * SubtitleDisplay CSS
+ *
+ * Styles for subtitle text overlay on video.
+ */
+declare const SUBTITLE_DISPLAY_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 * SUBTITLE DISPLAY\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-subtitle-display {\n  position: absolute;\n  bottom: var(--sv-subtitle-bottom, 80px);\n  left: 50%;\n  transform: translateX(-50%);\n  max-width: 90%;\n  padding: var(--sv-subtitle-padding, 8px 16px);\n  background: var(--sv-subtitle-bg, rgba(0, 0, 0, 0.75));\n  border-radius: var(--sv-subtitle-radius, 4px);\n  color: var(--sv-subtitle-color, #fff);\n  font-size: var(--sv-subtitle-font-size, 16px);\n  font-family: var(--sv-subtitle-font-family, inherit);\n  line-height: var(--sv-subtitle-line-height, 1.4);\n  text-align: center;\n  z-index: var(--sv-z-subtitle, 10);\n  pointer-events: none;\n  transition: opacity 150ms ease-out;\n}\n\n/* Hidden state */\n.sv-subtitle-display--hidden {\n  opacity: 0;\n}\n\n/* Position variants */\n.sv-subtitle-display--top {\n  bottom: auto;\n  top: var(--sv-subtitle-top, 60px);\n}\n\n.sv-subtitle-display--middle {\n  bottom: auto;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n\n/* Size variants */\n.sv-subtitle-display--small {\n  font-size: 14px;\n  padding: 6px 12px;\n}\n\n.sv-subtitle-display--large {\n  font-size: 20px;\n  padding: 10px 20px;\n}\n\n/* Style variants */\n.sv-subtitle-display--outline {\n  background: transparent;\n  text-shadow: \n    -1px -1px 0 #000,\n    1px -1px 0 #000,\n    -1px 1px 0 #000,\n    1px 1px 0 #000;\n}\n\n.sv-subtitle-display--drop-shadow {\n  background: transparent;\n  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);\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 * SUBTITLE INDICATOR (CC icon)\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-subtitle-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: var(--sv-subtitle-indicator-color, rgba(255, 255, 255, 0.7));\n}\n\n.sv-subtitle-indicator[data-enabled=\"true\"] {\n  color: var(--sv-subtitle-indicator-active, #fff);\n}\n\n.sv-subtitle-indicator[data-available=\"false\"] {\n  opacity: 0.3;\n  pointer-events: none;\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 * 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-subtitle-display {\n    transition: none;\n  }\n}\n";
+
+export { SUBTITLE_DISPLAY_CSS, SubtitleDisplayHeadless, type SubtitleDisplayHeadlessProps, SubtitleIndicator, type SubtitleIndicatorProps, type SubtitlePosition, type SubtitleSize, type SubtitleStyle };

package/dist/components/SubtitleDisplay/index.js

@@ -0,0 +1,165 @@
+import { injectComponentCSS } from '../../chunk-RMLTPW5S.js';
+import { clsx } from 'clsx';
+import { useInsertionEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/SubtitleDisplay/SubtitleDisplay.css.ts
+var SUBTITLE_DISPLAY_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
+ * SUBTITLE DISPLAY
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-subtitle-display {
+  position: absolute;
+  bottom: var(--sv-subtitle-bottom, 80px);
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 90%;
+  padding: var(--sv-subtitle-padding, 8px 16px);
+  background: var(--sv-subtitle-bg, rgba(0, 0, 0, 0.75));
+  border-radius: var(--sv-subtitle-radius, 4px);
+  color: var(--sv-subtitle-color, #fff);
+  font-size: var(--sv-subtitle-font-size, 16px);
+  font-family: var(--sv-subtitle-font-family, inherit);
+  line-height: var(--sv-subtitle-line-height, 1.4);
+  text-align: center;
+  z-index: var(--sv-z-subtitle, 10);
+  pointer-events: none;
+  transition: opacity 150ms ease-out;
+}
+
+/* Hidden state */
+.sv-subtitle-display--hidden {
+  opacity: 0;
+}
+
+/* Position variants */
+.sv-subtitle-display--top {
+  bottom: auto;
+  top: var(--sv-subtitle-top, 60px);
+}
+
+.sv-subtitle-display--middle {
+  bottom: auto;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* Size variants */
+.sv-subtitle-display--small {
+  font-size: 14px;
+  padding: 6px 12px;
+}
+
+.sv-subtitle-display--large {
+  font-size: 20px;
+  padding: 10px 20px;
+}
+
+/* Style variants */
+.sv-subtitle-display--outline {
+  background: transparent;
+  text-shadow: 
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px 1px 0 #000;
+}
+
+.sv-subtitle-display--drop-shadow {
+  background: transparent;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * SUBTITLE INDICATOR (CC icon)
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-subtitle-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--sv-subtitle-indicator-color, rgba(255, 255, 255, 0.7));
+}
+
+.sv-subtitle-indicator[data-enabled="true"] {
+  color: var(--sv-subtitle-indicator-active, #fff);
+}
+
+.sv-subtitle-indicator[data-available="false"] {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * 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-subtitle-display {
+    transition: none;
+  }
+}
+`;
+function SubtitleDisplayHeadless({
+  text,
+  isEnabled = true,
+  position = "bottom",
+  size = "medium",
+  styleVariant = "background",
+  className,
+  renderSubtitle,
+  testId
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("subtitle-display", SUBTITLE_DISPLAY_CSS);
+  }, []);
+  if (!isEnabled || !text) {
+    return null;
+  }
+  const positionClass = position !== "bottom" ? `sv-subtitle-display--${position}` : "";
+  const sizeClass = size !== "medium" ? `sv-subtitle-display--${size}` : "";
+  const styleClass = styleVariant !== "background" ? `sv-subtitle-display--${styleVariant}` : "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx("sv-subtitle-display", positionClass, sizeClass, styleClass, className),
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "data-testid": testId,
+      children: renderSubtitle ? renderSubtitle(text) : text
+    }
+  );
+}
+function CCIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) });
+}
+function SubtitleIndicator({
+  hasSubtitle,
+  isEnabled = false,
+  icon,
+  className,
+  onClick
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("subtitle-display", SUBTITLE_DISPLAY_CSS);
+  }, []);
+  if (!hasSubtitle) return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: clsx("sv-subtitle-indicator", className),
+      "data-enabled": isEnabled,
+      "data-available": hasSubtitle,
+      onClick,
+      "aria-label": isEnabled ? "Turn off subtitles" : "Turn on subtitles",
+      "aria-pressed": isEnabled,
+      children: icon ?? /* @__PURE__ */ jsx(CCIcon, {})
+    }
+  );
+}
+
+export { SUBTITLE_DISPLAY_CSS, SubtitleDisplayHeadless, SubtitleIndicator };

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

@@ -8,6 +8,11 @@ import { ReactNode } from 'react';
  * Position-based virtual scroller for video feed (TikTok-style).
  * Receives state via props (headless pattern).
  *
+ * This component wraps VirtualSlider<VideoItem> and adds:
+ * - Video-specific context (VideoFeedContext)
+ * - Video-specific CSS classes (sv-video-feed prefix)
+ * - Backwards-compatible API
+ *
  * Features:
  * - Virtual scrolling (only renders visible + buffer slots)
  * - CSS transform-based scrolling (60fps)
@@ -72,8 +77,14 @@ interface VideoFeedHeadlessProps {
  *
  * Renders a vertical video feed with virtual scrolling.
  * Position-based: each video takes full viewport height.
+ *
+ * Internally uses VirtualSlider<VideoItem> for the core slider logic,
+ * adding video-specific context and styling.
  */
 declare function VideoFeedHeadless({ feedState, swipeState, height, className, renderSlot, onIndexChange, onEndReached, endReachedThreshold, bufferSize, loadingText, emptyText, endText, disableInlineTransforms, }: VideoFeedHeadlessProps): React.ReactElement;
+declare namespace VideoFeedHeadless {
+    var displayName: string;
+}
 
 /**
  * VideoFeed context value

package/dist/components/VideoFeed/index.js

@@ -1 +1 @@
-export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedHeadless, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from '../../chunk-ZZDQKP4R.js';
+export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedHeadless, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from '../../chunk-WCRDTBCZ.js';

package/dist/components/VideoInfo/index.js

@@ -1 +1 @@
-export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from '../../chunk-DHQJBXQW.js';
+export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from '../../chunk-KWHMZ6H5.js';

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

@@ -1,41 +1,6 @@
+import * as react from 'react';
 import { VideoPlayerHeadlessProps } from '@xhub-short/contracts';
 
-/**
- * VideoPlayerHeadless Component
- *
- * Headless video player component that receives all data via props.
- * Handles video playback for both MP4 and HLS sources.
- *
- * Features:
- * - MP4 and HLS support (with lazy hls.js loading)
- * - First frame capture
- * - Loading and error states
- * - Poster image support
- * - Accessibility support
- *
- * @example
- * ```tsx
- * // Basic usage
- * <VideoPlayerHeadless
- *   src="https://example.com/video.mp4"
- *   type="mp4"
- *   poster="https://example.com/poster.jpg"
- *   autoPlay
- *   muted
- * />
- *
- * // With all callbacks
- * <VideoPlayerHeadless
- *   src={video.url}
- *   type={video.type}
- *   onPlay={() => console.log('Playing')}
- *   onPause={() => console.log('Paused')}
- *   onTimeUpdate={(time) => setCurrentTime(time)}
- *   onError={(error) => console.error(error)}
- * />
- * ```
- */
-
 interface VideoPlayerHeadlessExtendedProps extends VideoPlayerHeadlessProps {
     /** Unique video ID for first frame caching */
     videoId?: string;
@@ -72,11 +37,19 @@ interface VideoPlayerHeadlessExtendedProps extends VideoPlayerHeadlessProps {
  *
  * Headless video player component.
  * All state is managed via props - no SDK dependencies.
+ *
+ * Wrapped with React.memo to prevent unnecessary re-renders.
+ * The component only re-renders when props actually change.
  */
-declare function VideoPlayerHeadless({ src, type, poster, autoPlay, loop, muted, volume, startTime, className, videoRef: externalVideoRef, videoId, objectFit, showErrorUI, showLoadingUI, showPoster, loadingComponent, errorComponent, onCanPlay, onPlay, onPlaying, onPause, onEnded, onTimeUpdate, onDurationChange, onWaiting, onError, onFirstFrameCapture, }: VideoPlayerHeadlessExtendedProps): React.ReactElement;
-declare namespace VideoPlayerHeadless {
-    var displayName: string;
-}
+declare function VideoPlayerHeadlessBase({ src, type, poster, autoPlay, loop, muted, volume, startTime, className, videoRef: externalVideoRef, videoId, objectFit, showErrorUI, showLoadingUI, showPoster, loadingComponent, errorComponent, onCanPlay, onPlay, onPlaying, onPause, onEnded, onTimeUpdate, onDurationChange, onWaiting, onError, onFirstFrameCapture, }: VideoPlayerHeadlessExtendedProps): React.ReactElement;
+/**
+ * VideoPlayerHeadless - Memoized for performance
+ *
+ * Prevents re-renders when parent components update with same props.
+ * Particularly important when used inside VideoSlot which may receive
+ * frequent state updates from PlayerEngine.
+ */
+declare const VideoPlayerHeadless: react.MemoExoticComponent<typeof VideoPlayerHeadlessBase>;
 
 /**
  * useVideoElement Hook
@@ -473,6 +446,6 @@ declare const FIRST_FRAME_MAX_WIDTH = 360;
  * CSS-in-JS styles injected per component.
  * Uses CSS variables for theming and customization.
  */
-declare const VIDEO_PLAYER_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\u2550\u2550\u2550\u2550\n   VideoPlayer 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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background: var(--sv-bg-primary, #000);\n  /* CSS variable z-index defaults */\n  --sv-player-video-z: 1;\n  --sv-player-poster-z: 2;\n  --sv-player-loading-z: 3;\n  --sv-player-error-z: 4;\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\u2550\u2550\u2550\u2550\n   Video Element Wrapper\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__video-wrapper {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: var(--sv-player-video-z);\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\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__video {\n  width: 100%;\n  height: 100%;\n  object-fit: var(--sv-player-object-fit, contain);\n  background: transparent;\n  /* Prevent iOS controls */\n  -webkit-playsinline: true;\n}\n\n/* Hide video when loading/error for smooth poster display */\n.sv-video-player--loading .sv-video-player__video,\n.sv-video-player--error .sv-video-player__video {\n  opacity: 0;\n}\n\n/* Smooth transition for video visibility */\n.sv-video-player__video {\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   Poster Overlay\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__poster {\n  position: absolute;\n  inset: 0;\n  z-index: var(--sv-player-poster-z);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n/**\n * Hide poster when video is ready OR playing.\n *\n * Poster visibility rules:\n * - SHOW: During initial loading (--loading)\n * - HIDE: Once video is ready (--ready) - even if paused\n * - HIDE: When playing (--playing)\n * - STAY HIDDEN: During buffering (--buffering) - video already visible\n *\n * pointer-events: none ensures poster doesn't block clicks on video.\n */\n.sv-video-player--ready .sv-video-player__poster,\n.sv-video-player--playing .sv-video-player__poster {\n  opacity: 0;\n  pointer-events: none;\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\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__loading {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: var(--sv-player-loading-z);\n  background: var(--sv-loading-bg, rgba(0, 0, 0, 0.3));\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n.sv-video-player--loading .sv-video-player__loading {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Default spinner animation */\n.sv-video-player__spinner {\n  width: var(--sv-spinner-size, 40px);\n  height: var(--sv-spinner-size, 40px);\n  border: 3px solid var(--sv-spinner-color, rgba(255, 255, 255, 0.3));\n  border-top-color: var(--sv-spinner-active-color, #fff);\n  border-radius: 50%;\n  animation: sv-player-spin 0.8s linear infinite;\n}\n\n@keyframes sv-player-spin {\n  from {\n    transform: rotate(0deg);\n  }\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\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__error {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sv-spacing-md, 12px);\n  z-index: var(--sv-player-error-z);\n  background: var(--sv-error-bg, rgba(0, 0, 0, 0.8));\n  color: var(--sv-error-color, #fff);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n.sv-video-player--error .sv-video-player__error {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.sv-video-player__error-icon {\n  width: var(--sv-error-icon-size, 48px);\n  height: var(--sv-error-icon-size, 48px);\n  color: var(--sv-error-icon-color, rgba(255, 255, 255, 0.7));\n}\n\n.sv-video-player__error-message {\n  font-size: var(--sv-error-font-size, 14px);\n  color: var(--sv-error-text-color, rgba(255, 255, 255, 0.8));\n  text-align: center;\n  max-width: 80%;\n}\n\n.sv-video-player__retry-btn {\n  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-lg, 16px);\n  background: var(--sv-btn-bg, rgba(255, 255, 255, 0.2));\n  border: 1px solid var(--sv-btn-border, rgba(255, 255, 255, 0.3));\n  border-radius: var(--sv-btn-radius, 6px);\n  color: var(--sv-btn-color, #fff);\n  font-size: var(--sv-btn-font-size, 14px);\n  cursor: pointer;\n  transition: background var(--sv-transition-duration, 200ms) ease;\n}\n\n.sv-video-player__retry-btn:hover {\n  background: var(--sv-btn-hover-bg, rgba(255, 255, 255, 0.3));\n}\n\n.sv-video-player__retry-btn:active {\n  transform: scale(0.98);\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\u2550\u2550\u2550\u2550\n   Accessibility - Reduced 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\u2550\u2550\u2550\u2550 */\n\n@media (prefers-reduced-motion: reduce) {\n  .sv-video-player__video,\n  .sv-video-player__poster,\n  .sv-video-player__loading,\n  .sv-video-player__error {\n    transition: none;\n  }\n\n  .sv-video-player__spinner {\n    animation: none;\n    border-top-color: var(--sv-spinner-active-color, #fff);\n  }\n}\n";
+declare const VIDEO_PLAYER_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\u2550\u2550\u2550\u2550\n   VideoPlayer 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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background: var(--sv-bg-primary, #000);\n  /* CSS variable z-index defaults */\n  --sv-player-video-z: 1;\n  --sv-player-poster-z: 2;\n  --sv-player-loading-z: 3;\n  --sv-player-error-z: 4;\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\u2550\u2550\u2550\u2550\n   Video Element Wrapper\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__video-wrapper {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: var(--sv-player-video-z);\n  background: var(--sv-bg-primary, #000);\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\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__video {\n  width: 100%;\n  height: 100%;\n  object-fit: var(--sv-player-object-fit, contain);\n  background: transparent;\n  /* Prevent iOS controls */\n  -webkit-playsinline: true;\n}\n\n/* Hide video when loading/error for smooth poster display */\n.sv-video-player--loading .sv-video-player__video,\n.sv-video-player--error .sv-video-player__video {\n  opacity: 0;\n}\n\n/* Smooth transition for video visibility */\n.sv-video-player__video {\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   Poster Overlay\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__poster {\n  position: absolute;\n  inset: 0;\n  z-index: var(--sv-player-poster-z);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n/**\n * Hide poster when video is ready OR playing.\n *\n * Poster visibility rules:\n * - SHOW: During initial loading (--loading)\n * - HIDE: Once video is ready (--ready) - even if paused\n * - HIDE: When playing (--playing)\n * - STAY HIDDEN: During buffering (--buffering) - video already visible\n *\n * pointer-events: none ensures poster doesn't block clicks on video.\n */\n.sv-video-player--ready .sv-video-player__poster,\n.sv-video-player--playing .sv-video-player__poster {\n  opacity: 0;\n  pointer-events: none;\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\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__loading {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: var(--sv-player-loading-z);\n  background: var(--sv-loading-bg, rgba(0, 0, 0, 0.3));\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n.sv-video-player--loading .sv-video-player__loading {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Default spinner animation */\n.sv-video-player__spinner {\n  width: var(--sv-spinner-size, 40px);\n  height: var(--sv-spinner-size, 40px);\n  border: 3px solid var(--sv-spinner-color, rgba(255, 255, 255, 0.3));\n  border-top-color: var(--sv-spinner-active-color, #fff);\n  border-radius: 50%;\n  animation: sv-player-spin 0.8s linear infinite;\n}\n\n@keyframes sv-player-spin {\n  from {\n    transform: rotate(0deg);\n  }\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\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__error {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sv-spacing-md, 12px);\n  z-index: var(--sv-player-error-z);\n  background: var(--sv-error-bg, rgba(0, 0, 0, 0.8));\n  color: var(--sv-error-color, #fff);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n.sv-video-player--error .sv-video-player__error {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.sv-video-player__error-icon {\n  width: var(--sv-error-icon-size, 48px);\n  height: var(--sv-error-icon-size, 48px);\n  color: var(--sv-error-icon-color, rgba(255, 255, 255, 0.7));\n}\n\n.sv-video-player__error-message {\n  font-size: var(--sv-error-font-size, 14px);\n  color: var(--sv-error-text-color, rgba(255, 255, 255, 0.8));\n  text-align: center;\n  max-width: 80%;\n}\n\n.sv-video-player__retry-btn {\n  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-lg, 16px);\n  background: var(--sv-btn-bg, rgba(255, 255, 255, 0.2));\n  border: 1px solid var(--sv-btn-border, rgba(255, 255, 255, 0.3));\n  border-radius: var(--sv-btn-radius, 6px);\n  color: var(--sv-btn-color, #fff);\n  font-size: var(--sv-btn-font-size, 14px);\n  cursor: pointer;\n  transition: background var(--sv-transition-duration, 200ms) ease;\n}\n\n.sv-video-player__retry-btn:hover {\n  background: var(--sv-btn-hover-bg, rgba(255, 255, 255, 0.3));\n}\n\n.sv-video-player__retry-btn:active {\n  transform: scale(0.98);\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\u2550\u2550\u2550\u2550\n   Accessibility - Reduced 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\u2550\u2550\u2550\u2550 */\n\n@media (prefers-reduced-motion: reduce) {\n  .sv-video-player__video,\n  .sv-video-player__poster,\n  .sv-video-player__loading,\n  .sv-video-player__error {\n    transition: none;\n  }\n\n  .sv-video-player__spinner {\n    animation: none;\n    border-top-color: var(--sv-spinner-active-color, #fff);\n  }\n}\n";
 
 export { BUFFERING_STATE_CLASS, DEFAULT_OBJECT_FIT, DEFAULT_PRELOAD, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, FIRST_FRAME_MAX_WIDTH, FIRST_FRAME_QUALITY, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, type UseAutoFirstFrameCaptureConfig, type UseFirstFrameCaptureConfig, type UseFirstFrameCaptureReturn, type UseVideoElementConfig, type UseVideoElementReturn, VIDEO_CLASS, VIDEO_PLAYER_CSS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, type VideoErrorOrigin, VideoPlayerHeadless, type VideoPlayerHeadlessExtendedProps, type VideoSourceType, Z_INDEX, Z_INDEX_CSS_VARS, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement };

package/dist/components/VideoPlayer/index.js

@@ -1 +1 @@
-export { BUFFERING_STATE_CLASS, DEFAULT_OBJECT_FIT, DEFAULT_PRELOAD, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, FIRST_FRAME_MAX_WIDTH, FIRST_FRAME_QUALITY, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, VIDEO_CLASS, VIDEO_PLAYER_CSS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoPlayerHeadless, Z_INDEX, Z_INDEX_CSS_VARS, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from '../../chunk-HW4LXTFT.js';
+export { BUFFERING_STATE_CLASS, DEFAULT_OBJECT_FIT, DEFAULT_PRELOAD, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, FIRST_FRAME_MAX_WIDTH, FIRST_FRAME_QUALITY, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, VIDEO_CLASS, VIDEO_PLAYER_CSS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoPlayerHeadless, Z_INDEX, Z_INDEX_CSS_VARS, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from '../../chunk-CL6BS7GB.js';