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

package/dist/chunk-QUEJHA24.js

@@ -0,0 +1,508 @@
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { clsx } from 'clsx';
+import { memo, useState, useRef, useEffect, useCallback } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/components/CleanModeOverlay/CleanModeOverlay.css.ts
+var CLEAN_MODE_OVERLAY_CSS = (
+  /* 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
+   CSS VARIABLES
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-clean-mode-container {
+  /* Colors */
+  --sv-clean-mode-bg: rgba(40, 40, 40, 0.85);
+  --sv-clean-mode-text: rgba(255, 255, 255, 0.95);
+  --sv-clean-mode-divider: rgba(255, 255, 255, 0.2);
+  --sv-clean-mode-progress-bg: rgba(255, 255, 255, 0.3);
+  --sv-clean-mode-progress-fill: rgba(255, 255, 255, 0.9);
+  --sv-clean-mode-progress-thumb: #ffffff;
+  
+  /* Layout */
+  --sv-clean-mode-radius: 50px;
+  --sv-clean-mode-button-size: 48px;
+  --sv-clean-mode-progress-height: 4px;
+  
+  /* Animation */
+  --sv-clean-mode-duration: 200ms;
+  --sv-clean-mode-easing: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   MAIN CONTAINER - Full width bar at bottom
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-clean-mode-container {
+  position: absolute;
+  bottom: 24px;
+  left: 16px;
+  right: 16px;
+  z-index: 80;
+  
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  
+  /* Animation */
+  opacity: 1;
+  transition: opacity var(--sv-clean-mode-duration) var(--sv-clean-mode-easing);
+  
+  /* Prevent text selection */
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: none;
+}
+
+.sv-clean-mode-container[data-hidden="true"] {
+  opacity: 0;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   LEFT PILL - Exit button
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-clean-mode-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  
+  width: var(--sv-clean-mode-button-size);
+  height: var(--sv-clean-mode-button-size);
+  margin: 0;
+  padding: 0;
+  
+  background: var(--sv-clean-mode-bg);
+  border-radius: var(--sv-clean-mode-radius);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  
+  pointer-events: auto;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   CENTER - Progress Bar
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-clean-mode-center {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  
+  pointer-events: auto;
+}
+
+.sv-clean-mode-progress {
+  position: relative;
+  width: 100%;
+  height: 24px;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.sv-clean-mode-progress-track {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: var(--sv-clean-mode-progress-height);
+  margin: 0;
+  padding: 0;
+  background: var(--sv-clean-mode-progress-bg);
+  border-radius: calc(var(--sv-clean-mode-progress-height) / 2);
+  overflow: hidden;
+}
+
+.sv-clean-mode-progress-fill {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: var(--sv-clean-mode-progress-fill);
+  border-radius: inherit;
+  transition: width 100ms linear;
+}
+
+.sv-clean-mode-progress-thumb {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  padding: 0;
+  background: var(--sv-clean-mode-progress-thumb);
+  border-radius: 50%;
+  transform: translateX(-50%);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.sv-clean-mode-progress:hover .sv-clean-mode-progress-thumb,
+.sv-clean-mode-progress[data-dragging="true"] .sv-clean-mode-progress-thumb {
+  opacity: 1;
+}
+
+.sv-clean-mode-progress[data-dragging="true"] .sv-clean-mode-progress-track {
+  height: 6px;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   RIGHT PILL - Play/Pause + Speed
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-clean-mode-right {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  
+  height: var(--sv-clean-mode-button-size);
+  margin: 0;
+  padding: 0 4px;
+  
+  background: var(--sv-clean-mode-bg);
+  border-radius: var(--sv-clean-mode-radius);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  
+  pointer-events: auto;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   BUTTONS
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-clean-mode-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  
+  height: 40px;
+  margin: 0;
+  padding: 0 14px;
+  
+  background: transparent;
+  border: none;
+  
+  color: var(--sv-clean-mode-text);
+  font-size: 15px;
+  font-weight: 600;
+  white-space: nowrap;
+  
+  cursor: pointer;
+  transition: opacity 150ms ease;
+}
+
+.sv-clean-mode-button:active {
+  opacity: 0.7;
+}
+
+.sv-clean-mode-button svg {
+  width: 22px;
+  height: 22px;
+  margin: 0;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+/* Exit button - icon only */
+.sv-clean-mode-exit {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+
+.sv-clean-mode-exit svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Play/Pause button - icon only */
+.sv-clean-mode-play {
+  width: 40px;
+  padding: 0;
+}
+
+/* Speed button */
+.sv-clean-mode-speed {
+  padding: 0 16px 0 8px;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   DIVIDER
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-clean-mode-divider {
+  width: 1px;
+  height: 24px;
+  margin: 0;
+  padding: 0;
+  background: var(--sv-clean-mode-divider);
+  flex-shrink: 0;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   TAP AREA (for showing hidden bar)
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-clean-mode-tap-area {
+  position: absolute;
+  inset: 0;
+  z-index: 70;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+/* Hide tap area when bar is visible */
+.sv-clean-mode-tap-area[data-visible="true"] {
+  pointer-events: none;
+}
+`
+);
+function injectCleanModeOverlayCSS() {
+  injectComponentCSS("clean-mode-overlay", CLEAN_MODE_OVERLAY_CSS, {
+    layered: false
+    // Critical component - resist global resets
+  });
+}
+var DEFAULT_HIDE_DELAY = 3e3;
+var DEFAULT_SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function PlayIcon() {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "22", height: "22", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) });
+}
+function PauseIcon() {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", width: "22", height: "22", viewBox: "0 0 24 24", fill: "currentColor", children: [
+    /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
+    /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
+  ] });
+}
+function formatSpeed(speed) {
+  return `${speed}x`;
+}
+function getNextSpeed(currentSpeed, speeds) {
+  const currentIndex = speeds.indexOf(currentSpeed);
+  if (currentIndex === -1) {
+    const closest = speeds.reduce(
+      (prev, curr) => Math.abs(curr - currentSpeed) < Math.abs(prev - currentSpeed) ? curr : prev
+    );
+    const closestIndex = speeds.indexOf(closest);
+    return speeds[(closestIndex + 1) % speeds.length] ?? speeds[0] ?? 1;
+  }
+  return speeds[(currentIndex + 1) % speeds.length] ?? speeds[0] ?? 1;
+}
+function CleanModeOverlayHeadlessComponent({
+  isActive,
+  isPlaying,
+  speed,
+  currentTime,
+  duration,
+  onTogglePlay,
+  onSpeedChange,
+  onSeek,
+  onExit,
+  speeds = DEFAULT_SPEEDS,
+  hideDelay = DEFAULT_HIDE_DELAY,
+  exitIcon,
+  playIcon,
+  pauseIcon,
+  className,
+  ariaLabel = "Clean mode controls"
+}) {
+  const [isHidden, setIsHidden] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const hideTimerRef = useRef(null);
+  const progressRef = useRef(null);
+  useEffect(() => {
+    injectCleanModeOverlayCSS();
+  }, []);
+  useEffect(() => {
+    if (isActive) {
+      setIsHidden(false);
+    }
+  }, [isActive]);
+  const resetHideTimer = useCallback(() => {
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current);
+    }
+    if (hideDelay > 0 && !isDragging) {
+      hideTimerRef.current = setTimeout(() => {
+        setIsHidden(true);
+      }, hideDelay);
+    }
+  }, [hideDelay, isDragging]);
+  useEffect(() => {
+    if (isActive && hideDelay > 0) {
+      resetHideTimer();
+    }
+    return () => {
+      if (hideTimerRef.current) {
+        clearTimeout(hideTimerRef.current);
+      }
+    };
+  }, [isActive, hideDelay, resetHideTimer]);
+  const handleTapArea = useCallback(() => {
+    if (isHidden) {
+      setIsHidden(false);
+      resetHideTimer();
+    }
+  }, [isHidden, resetHideTimer]);
+  const handlePlayPause = useCallback(() => {
+    onTogglePlay();
+    resetHideTimer();
+  }, [onTogglePlay, resetHideTimer]);
+  const handleSpeedClick = useCallback(() => {
+    const nextSpeed = getNextSpeed(speed, speeds);
+    onSpeedChange(nextSpeed);
+    resetHideTimer();
+  }, [speed, speeds, onSpeedChange, resetHideTimer]);
+  const handleExit = useCallback(() => {
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current);
+    }
+    onExit();
+  }, [onExit]);
+  const progress = duration > 0 ? currentTime / duration * 100 : 0;
+  const getTimeFromEvent = useCallback(
+    (clientX) => {
+      if (!progressRef.current || duration <= 0) return 0;
+      const rect = progressRef.current.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const percent = Math.max(0, Math.min(1, x / rect.width));
+      return percent * duration;
+    },
+    [duration]
+  );
+  const handleProgressPointerDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsDragging(true);
+      const time = getTimeFromEvent(e.clientX);
+      onSeek(time);
+      if (hideTimerRef.current) {
+        clearTimeout(hideTimerRef.current);
+      }
+      const handlePointerMove = (moveEvent) => {
+        const newTime = getTimeFromEvent(moveEvent.clientX);
+        onSeek(newTime);
+      };
+      const handlePointerUp = () => {
+        setIsDragging(false);
+        resetHideTimer();
+        document.removeEventListener("pointermove", handlePointerMove);
+        document.removeEventListener("pointerup", handlePointerUp);
+      };
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
+    },
+    [getTimeFromEvent, onSeek, resetHideTimer]
+  );
+  if (!isActive) return null;
+  const isVisible = !isHidden;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isHidden && // biome-ignore lint/a11y/useKeyWithClickEvents: tap area for touch
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "sv-clean-mode-tap-area",
+        "data-visible": isVisible,
+        onClick: handleTapArea,
+        "aria-label": "Tap to show controls"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx("sv-clean-mode-container", className),
+        "data-hidden": isHidden,
+        role: "toolbar",
+        "aria-label": ariaLabel,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "sv-clean-mode-left", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "sv-clean-mode-button sv-clean-mode-exit",
+              onClick: handleExit,
+              "aria-label": "Exit clean mode",
+              children: exitIcon ?? /* @__PURE__ */ jsx(CloseIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "sv-clean-mode-center", children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: progressRef,
+              className: "sv-clean-mode-progress",
+              "data-dragging": isDragging,
+              onPointerDown: handleProgressPointerDown,
+              "aria-label": "Video progress",
+              "aria-valuemin": 0,
+              "aria-valuemax": duration,
+              "aria-valuenow": currentTime,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "sv-clean-mode-progress-track", children: /* @__PURE__ */ jsx("div", { className: "sv-clean-mode-progress-fill", style: { width: `${progress}%` } }) }),
+                /* @__PURE__ */ jsx("div", { className: "sv-clean-mode-progress-thumb", style: { left: `${progress}%` } })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "sv-clean-mode-right", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "sv-clean-mode-button sv-clean-mode-play",
+                onClick: handlePlayPause,
+                "aria-label": isPlaying ? "Pause" : "Play",
+                children: isPlaying ? pauseIcon ?? /* @__PURE__ */ jsx(PauseIcon, {}) : playIcon ?? /* @__PURE__ */ jsx(PlayIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "sv-clean-mode-divider", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "sv-clean-mode-button sv-clean-mode-speed",
+                onClick: handleSpeedClick,
+                "aria-label": `Playback speed: ${formatSpeed(speed)}. Click to change.`,
+                children: /* @__PURE__ */ jsx("span", { children: formatSpeed(speed) })
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+var CleanModeOverlayHeadless = memo(CleanModeOverlayHeadlessComponent);
+CleanModeOverlayHeadless.displayName = "CleanModeOverlayHeadless";
+
+export { CLEAN_MODE_OVERLAY_CSS, CleanModeOverlayHeadless, injectCleanModeOverlayCSS };