@xhub-short/ui 0.1.0-beta.0

package/dist/chunk-UXMA4KJZ.js

@@ -0,0 +1,45 @@
+// src/utils/injectComponentCSS.ts
+var injectedStyles = /* @__PURE__ */ new Set();
+var STYLE_ID_PREFIX = "sv-styles-";
+function injectComponentCSS(componentId, css) {
+  if (typeof document === "undefined") {
+    return () => {
+    };
+  }
+  if (injectedStyles.has(componentId)) {
+    return () => {
+    };
+  }
+  const styleId = `${STYLE_ID_PREFIX}${componentId}`;
+  const existingStyle = document.getElementById(styleId);
+  if (existingStyle) {
+    injectedStyles.add(componentId);
+    return () => {
+    };
+  }
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.setAttribute("data-sv-component", componentId);
+  style.textContent = css;
+  document.head.appendChild(style);
+  injectedStyles.add(componentId);
+  return () => {
+    removeComponentCSS(componentId);
+  };
+}
+function removeComponentCSS(componentId) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const styleId = `${STYLE_ID_PREFIX}${componentId}`;
+  const style = document.getElementById(styleId);
+  if (style) {
+    style.remove();
+    injectedStyles.delete(componentId);
+  }
+}
+function isComponentCSSInjected(componentId) {
+  return injectedStyles.has(componentId);
+}
+
+export { injectComponentCSS, isComponentCSSInjected, removeComponentCSS };

package/dist/chunk-WKX2WBVO.js

@@ -0,0 +1,98 @@
+// src/utils/lazyGesture.ts
+var gestureModule = null;
+var loadPromise = null;
+async function loadGesture() {
+  if (gestureModule) {
+    return gestureModule;
+  }
+  if (loadPromise) {
+    return loadPromise;
+  }
+  loadPromise = import('./use-gesture-react.esm-3SV4QLEJ.js').then((mod) => {
+    gestureModule = mod;
+    return mod;
+  }).catch((error) => {
+    loadPromise = null;
+    throw error;
+  });
+  return loadPromise;
+}
+function isGestureLoaded() {
+  return gestureModule !== null;
+}
+function preloadGesture() {
+  loadGesture().catch(() => {
+  });
+}
+
+// src/utils/formatCount.ts
+var DEFAULT_SUFFIXES = {
+  thousand: "K",
+  million: "M",
+  billion: "B"
+};
+function formatCount(count, options = {}) {
+  const { decimals = 1, trailingZeros = false, suffixes = {} } = options;
+  const { thousand, million, billion } = { ...DEFAULT_SUFFIXES, ...suffixes };
+  if (!Number.isFinite(count)) {
+    return "0";
+  }
+  const absCount = Math.abs(count);
+  const sign = count < 0 ? "-" : "";
+  if (absCount < 1e3) {
+    return `${sign}${Math.floor(absCount)}`;
+  }
+  let value;
+  let suffix;
+  if (absCount >= 1e9) {
+    value = absCount / 1e9;
+    suffix = billion;
+  } else if (absCount >= 1e6) {
+    value = absCount / 1e6;
+    suffix = million;
+  } else {
+    value = absCount / 1e3;
+    suffix = thousand;
+  }
+  const formatted = value.toFixed(decimals);
+  const result = trailingZeros ? formatted : formatted.replace(/\.?0+$/, "");
+  return `${sign}${result}${suffix}`;
+}
+function formatCountWithSeparators(count, locale = "en-US") {
+  return count.toLocaleString(locale);
+}
+function parseFormattedCount(formatted) {
+  const cleaned = formatted.trim().toUpperCase();
+  const match = cleaned.match(/^(-?[\d.]+)\s*([KMB])?$/);
+  if (!match) {
+    return 0;
+  }
+  const [, numStr, suffix] = match;
+  const num = Number.parseFloat(numStr ?? "0");
+  if (Number.isNaN(num)) {
+    return 0;
+  }
+  switch (suffix) {
+    case "K":
+      return num * 1e3;
+    case "M":
+      return num * 1e6;
+    case "B":
+      return num * 1e9;
+    default:
+      return num;
+  }
+}
+function cn(...inputs) {
+  return inputs.filter(Boolean).map((input) => {
+    if (typeof input === "string") {
+      return input;
+    }
+    if (typeof input === "object" && input !== null) {
+      return Object.entries(input).filter(([, value]) => value).map(([key]) => key).join(" ");
+    }
+    return "";
+  }).join(" ").trim();
+}
+
+export { cn, formatCount, formatCountWithSeparators, isGestureLoaded, loadGesture, parseFormattedCount, preloadGesture };

package/dist/chunk-YW23IBKF.js

@@ -0,0 +1,530 @@
+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 };