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

package/dist/chunk-YW23IBKF.js

@@ -1,530 +0,0 @@
-import { cn } from './chunk-WKX2WBVO.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
-import { useInsertionEffect, useMemo, useEffect, useCallback, useRef, useState } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-// src/components/ProgressBar/ProgressBar.css.ts
-var PROGRESS_BAR_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
- * ProgressBar Container
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-progress-bar {
-  /* Layout */
-  position: relative;
-  width: 100%;
-  
-  /* Interactive area - larger than visual for easier touch */
-  height: var(--sv-progress-bar-touch-height, 24px);
-  display: flex;
-  align-items: center;
-  
-  /* Cursor */
-  cursor: pointer;
-  
-  /* Prevent text selection during seek */
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: none;
-}
-
-.sv-progress-bar--disabled {
-  cursor: default;
-  pointer-events: none;
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Track Wrapper (contains track + tooltip)
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-progress-bar__track-wrapper {
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Track (background bar)
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-progress-bar__track {
-  position: relative;
-  width: 100%;
-  height: var(--sv-progress-bar-height, 3px);
-  
-  /* Visual */
-  background: var(--sv-progress-bar-track-bg, rgba(255, 255, 255, 0.2));
-  border-radius: var(--sv-progress-bar-radius, 1.5px);
-  overflow: hidden;
-}
-
-/* Expand track on hover/active for better visibility */
-.sv-progress-bar:hover .sv-progress-bar__track,
-.sv-progress-bar--seeking .sv-progress-bar__track {
-  height: var(--sv-progress-bar-height-active, 5px);
-}
-
-/* Disable transition during seeking for immediate feedback */
-.sv-progress-bar--seeking .sv-progress-bar__fill,
-.sv-progress-bar--seeking .sv-progress-bar__handle {
-  transition: none;
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Buffered Fill (shows buffered progress)
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-progress-bar__buffered {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  
-  /* Visual */
-  background: var(--sv-progress-bar-buffered-bg, rgba(255, 255, 255, 0.3));
-  border-radius: inherit;
-  
-  /* Performance: Use scaleX for GPU acceleration */
-  transform-origin: left center;
-  transform: scaleX(0);
-  
-  /* Smooth transition for buffered updates */
-  transition: transform 0.3s ease-out;
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Progress Fill (shows playback progress)
- * IMPORTANT: Designed for Direct DOM Update (ADR 005)
- * - Uses scaleX() for 60fps smooth animation
- * - Wired component will update transform directly via DOM manipulation
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-progress-bar__fill {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  
-  /* Visual */
-  background: var(--sv-progress-bar-fill-bg, var(--sv-color-accent, #fe2c55));
-  border-radius: inherit;
-  
-  /* Performance: Use scaleX for GPU acceleration */
-  transform-origin: left center;
-  transform: scaleX(0);
-  
-  /* Smooth transition for headless mode (timeupdate ~250ms intervals)
-   * For RAF-based Direct DOM Update (wired mode), this has minimal impact
-   * because transform updates every 16ms anyway */
-  transition: var(--sv-progress-bar-fill-transition, transform 0.25s linear);
-  will-change: transform;
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Seek Handle (thumb indicator)
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-progress-bar__handle {
-  position: absolute;
-  top: 50%;
-  
-  /* Size */
-  width: var(--sv-progress-bar-handle-size, 12px);
-  height: var(--sv-progress-bar-handle-size, 12px);
-  
-  /* Positioning - will be set via left % */
-  left: 0;
-  transform: translate(-50%, -50%) scale(0);
-  
-  /* Visual */
-  background: var(--sv-progress-bar-handle-bg, #fff);
-  border-radius: 50%;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  
-  /* Animation - smooth position + show/hide */
-  transition: left 0.25s linear, transform 0.15s ease-out;
-}
-
-/* Show handle on hover/seeking */
-.sv-progress-bar:hover .sv-progress-bar__handle,
-.sv-progress-bar--seeking .sv-progress-bar__handle {
-  transform: translate(-50%, -50%) scale(1);
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Time Display (optional, shows current/duration)
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-progress-bar__time {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--sv-spacing-xs, 4px) 0;
-  
-  font-family: var(--sv-font-family, 'Urbanist', sans-serif);
-  font-size: var(--sv-font-size-xs, 11px);
-  font-variant-numeric: tabular-nums;
-  color: var(--sv-text-secondary, rgba(255, 255, 255, 0.7));
-}
-
-.sv-progress-bar__time-current,
-.sv-progress-bar__time-duration {
-  /* Ensure consistent width for changing numbers */
-  min-width: 2.5em;
-}
-
-.sv-progress-bar__time-current {
-  text-align: left;
-}
-
-.sv-progress-bar__time-duration {
-  text-align: right;
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Seek Tooltip (shows time at cursor position during hover)
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-progress-bar__tooltip {
-  position: absolute;
-  /* Position above the container (not inside track to avoid overflow:hidden) */
-  top: 0;
-  left: 0;
-  transform: translate(-50%, -100%);
-  margin-top: -8px;
-  
-  /* Visual */
-  padding: 4px 8px;
-  background: var(--sv-bg-overlay, rgba(0, 0, 0, 0.8));
-  border-radius: var(--sv-border-radius-sm, 4px);
-  
-  /* Typography */
-  font-family: var(--sv-font-family, 'Urbanist', sans-serif);
-  font-size: var(--sv-font-size-xs, 11px);
-  font-variant-numeric: tabular-nums;
-  color: var(--sv-text-primary, #fff);
-  white-space: nowrap;
-  
-  /* Hidden by default */
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.15s ease, visibility 0.15s ease;
-  
-  /* Prevent tooltip from capturing pointer events */
-  pointer-events: none;
-  
-  /* Ensure tooltip is above other elements */
-  z-index: 10;
-}
-
-.sv-progress-bar:hover .sv-progress-bar__tooltip,
-.sv-progress-bar--seeking .sv-progress-bar__tooltip {
-  opacity: 1;
-  visibility: visible;
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Minimal Variant (for use inside VideoSlot overlay)
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-progress-bar--minimal {
-  height: auto;
-}
-
-.sv-progress-bar--minimal .sv-progress-bar__track {
-  height: var(--sv-progress-bar-height-minimal, 2px);
-}
-
-.sv-progress-bar--minimal:hover .sv-progress-bar__track {
-  height: var(--sv-progress-bar-height-minimal, 2px);
-}
-
-.sv-progress-bar--minimal .sv-progress-bar__handle {
-  display: none;
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Reduced Motion (Accessibility)
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-@media (prefers-reduced-motion: reduce) {
-  .sv-progress-bar__fill,
-  .sv-progress-bar__buffered,
-  .sv-progress-bar__handle,
-  .sv-progress-bar__tooltip {
-    transition: none;
-  }
-}
-`;
-var CSS_PREFIX = "sv-progress-bar";
-function formatTime(seconds) {
-  if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
-  const h = Math.floor(seconds / 3600);
-  const m = Math.floor(seconds % 3600 / 60);
-  const s = Math.floor(seconds % 60);
-  if (h > 0) {
-    return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
-  }
-  return `${m}:${s.toString().padStart(2, "0")}`;
-}
-function calculateProgress(currentTime, duration) {
-  if (!duration || duration <= 0) return 0;
-  return Math.min(100, Math.max(0, currentTime / duration * 100));
-}
-function calculateTimeFromPosition(clientX, rect, duration) {
-  const x = clientX - rect.left;
-  const percentage = Math.min(1, Math.max(0, x / rect.width));
-  return percentage * duration;
-}
-function useProgressBarRefs({
-  externalFillRef,
-  externalBufferedRef,
-  externalHandleRef,
-  externalCurrentTimeRef,
-  externalDurationRef
-}) {
-  const containerRef = useRef(null);
-  const internalFillRef = useRef(null);
-  const internalBufferedRef = useRef(null);
-  const internalHandleRef = useRef(null);
-  const internalCurrentTimeRef = useRef(null);
-  const internalDurationRef = useRef(null);
-  const tooltipRef = useRef(null);
-  return {
-    containerRef,
-    tooltipRef,
-    fillRef: externalFillRef ?? internalFillRef,
-    bufferedRef: externalBufferedRef ?? internalBufferedRef,
-    handleRef: externalHandleRef ?? internalHandleRef,
-    currentTimeRef: externalCurrentTimeRef ?? internalCurrentTimeRef,
-    durationRef: externalDurationRef ?? internalDurationRef,
-    hasExternalCurrentTimeRef: !!externalCurrentTimeRef,
-    hasExternalDurationRef: !!externalDurationRef
-  };
-}
-function useSeekHandlers({
-  containerRef,
-  duration,
-  isSeekable,
-  onSeek,
-  onSeekStart,
-  onSeekEnd
-}) {
-  const [isSeeking, setIsSeeking] = useState(false);
-  const [hoverTime, setHoverTime] = useState(null);
-  const [hoverPosition, setHoverPosition] = useState(0);
-  const handleSeek = useCallback(
-    (clientX) => {
-      if (!isSeekable || !containerRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const time = calculateTimeFromPosition(clientX, rect, duration);
-      onSeek?.(time);
-    },
-    [isSeekable, duration, onSeek, containerRef]
-  );
-  const handlePointerDown = useCallback(
-    (e) => {
-      if (!isSeekable) return;
-      e.preventDefault();
-      e.stopPropagation();
-      if (typeof e.currentTarget.setPointerCapture === "function") {
-        e.currentTarget.setPointerCapture(e.pointerId);
-      }
-      setIsSeeking(true);
-      onSeekStart?.();
-      handleSeek(e.clientX);
-    },
-    [isSeekable, onSeekStart, handleSeek]
-  );
-  const handlePointerMove = useCallback(
-    (e) => {
-      if (!containerRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const time = calculateTimeFromPosition(e.clientX, rect, duration);
-      const position = (e.clientX - rect.left) / rect.width * 100;
-      setHoverTime(time);
-      setHoverPosition(Math.min(100, Math.max(0, position)));
-      if (isSeeking) handleSeek(e.clientX);
-    },
-    [duration, isSeeking, handleSeek, containerRef]
-  );
-  const handlePointerUp = useCallback(
-    (e) => {
-      e.stopPropagation();
-      if (isSeeking) {
-        if (typeof e.currentTarget.releasePointerCapture === "function") {
-          e.currentTarget.releasePointerCapture(e.pointerId);
-        }
-        setIsSeeking(false);
-        onSeekEnd?.();
-      }
-    },
-    [isSeeking, onSeekEnd]
-  );
-  const handlePointerLeave = useCallback(() => {
-    setHoverTime(null);
-    if (isSeeking) {
-      setIsSeeking(false);
-      onSeekEnd?.();
-    }
-  }, [isSeeking, onSeekEnd]);
-  return {
-    isSeeking,
-    hoverTime,
-    hoverPosition,
-    handlePointerDown,
-    handlePointerMove,
-    handlePointerUp,
-    handlePointerLeave
-  };
-}
-function ProgressBarHeadless({
-  currentTime,
-  duration,
-  buffered = 0,
-  seekable = false,
-  className,
-  onSeek,
-  onSeekStart,
-  onSeekEnd,
-  showTime = false,
-  showTooltip,
-  minimal = false,
-  fillRef: externalFillRef,
-  bufferedRef: externalBufferedRef,
-  handleRef: externalHandleRef,
-  currentTimeRef: externalCurrentTimeRef,
-  durationRef: externalDurationRef
-}) {
-  useInsertionEffect(() => {
-    return injectComponentCSS("progress-bar", PROGRESS_BAR_CSS);
-  }, []);
-  const refs = useProgressBarRefs({
-    externalFillRef,
-    externalBufferedRef,
-    externalHandleRef,
-    externalCurrentTimeRef,
-    externalDurationRef
-  });
-  const progress = useMemo(() => calculateProgress(currentTime, duration), [currentTime, duration]);
-  const bufferedPercent = useMemo(() => Math.min(100, Math.max(0, buffered * 100)), [buffered]);
-  const isSeekable = seekable && !!onSeek && duration > 0;
-  const effectiveShowTooltip = showTooltip ?? isSeekable;
-  const {
-    isSeeking,
-    hoverTime,
-    hoverPosition,
-    handlePointerDown,
-    handlePointerMove,
-    handlePointerUp,
-    handlePointerLeave
-  } = useSeekHandlers({
-    containerRef: refs.containerRef,
-    duration,
-    isSeekable,
-    onSeek,
-    onSeekStart,
-    onSeekEnd
-  });
-  useEffect(() => {
-    if (!refs.hasExternalCurrentTimeRef && refs.currentTimeRef.current) {
-      refs.currentTimeRef.current.textContent = formatTime(currentTime);
-    }
-  }, [currentTime, refs]);
-  useEffect(() => {
-    if (!refs.hasExternalDurationRef && refs.durationRef.current) {
-      refs.durationRef.current.textContent = formatTime(duration);
-    }
-  }, [duration, refs]);
-  const stopBubble = useCallback((e) => {
-    e.stopPropagation();
-  }, []);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        CSS_PREFIX,
-        !isSeekable && `${CSS_PREFIX}--disabled`,
-        isSeeking && `${CSS_PREFIX}--seeking`,
-        minimal && `${CSS_PREFIX}--minimal`,
-        className
-      ),
-      onClick: stopBubble,
-      onKeyDown: stopBubble,
-      onPointerDown: stopBubble,
-      onPointerUp: stopBubble,
-      onTouchStart: stopBubble,
-      onTouchEnd: stopBubble,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: `${CSS_PREFIX}__track-wrapper`, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: refs.containerRef,
-              className: `${CSS_PREFIX}__track`,
-              onPointerDown: handlePointerDown,
-              onPointerMove: handlePointerMove,
-              onPointerUp: handlePointerUp,
-              onPointerLeave: handlePointerLeave,
-              onClick: (e) => e.stopPropagation(),
-              onKeyDown: (e) => e.stopPropagation(),
-              role: isSeekable ? "slider" : "progressbar",
-              "aria-label": "Video progress",
-              "aria-valuemin": 0,
-              "aria-valuemax": duration || 100,
-              "aria-valuenow": currentTime,
-              "aria-valuetext": `${formatTime(currentTime)} of ${formatTime(duration)}`,
-              tabIndex: isSeekable ? 0 : -1,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    ref: refs.bufferedRef,
-                    className: `${CSS_PREFIX}__buffered`,
-                    style: { transform: `scaleX(${bufferedPercent / 100})` },
-                    "aria-hidden": "true"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    ref: refs.fillRef,
-                    className: `${CSS_PREFIX}__fill`,
-                    style: { transform: `scaleX(${progress / 100})` },
-                    "aria-hidden": "true"
-                  }
-                ),
-                isSeekable && !minimal && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    ref: refs.handleRef,
-                    className: `${CSS_PREFIX}__handle`,
-                    style: { left: `${progress}%` },
-                    "aria-hidden": "true"
-                  }
-                )
-              ]
-            }
-          ),
-          effectiveShowTooltip && hoverTime !== null && /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: refs.tooltipRef,
-              className: `${CSS_PREFIX}__tooltip`,
-              style: { left: `${hoverPosition}%` },
-              "aria-hidden": "true",
-              children: formatTime(hoverTime)
-            }
-          )
-        ] }),
-        showTime && /* @__PURE__ */ jsxs("div", { className: `${CSS_PREFIX}__time`, children: [
-          /* @__PURE__ */ jsx("span", { ref: refs.currentTimeRef, className: `${CSS_PREFIX}__time-current`, children: formatTime(currentTime) }),
-          /* @__PURE__ */ jsx("span", { ref: refs.durationRef, className: `${CSS_PREFIX}__time-duration`, children: formatTime(duration) })
-        ] })
-      ]
-    }
-  );
-}
-
-export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime };