box-content-preview 3.90.0 → 3.92.0

package/dist/lib/index.js

@@ -21,6 +21,7 @@
  * and limitations under the license.
  */
 import { decode as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_utils_keys_d752524f_decode__ } from "box-ui-elements/es/utils/keys";
+import { createPortal as __WEBPACK_EXTERNAL_MODULE_react_dom_7dac9eee_createPortal__ } from "react-dom";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import { default as __WEBPACK_EXTERNAL_MODULE_axios_default__ } from "axios";
 import { bdlBoxBlue as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlBoxBlue__, bdlGray65 as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__, bdlGreenLight as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGreenLight__, bdlGrimace as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGrimace__, bdlWatermelonRed as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlWatermelonRed__, bdlYellorange as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlYellorange__, bdlYellow as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlYellow__, white as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_white__ } from "box-ui-elements/es/styles/variables";
@@ -1017,7 +1018,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
 const CLIENT_NAME_KEY = 'box_client_name';
 const CLIENT_VERSION_KEY = 'box_client_version';
-const CLIENT_VERSION = "3.90.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.92.0"; // eslint-disable-line no-undef
 const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
 const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
 const PROMISE_MAP = {};
@@ -2915,10 +2916,10 @@ function TimestampControl({
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  A: () => (/* binding */ VolumeControls)
+  Ay: () => (/* binding */ VolumeControls)
 });
 
-// UNUSED EXPORTS: getIcon
+// UNUSED EXPORTS: VOLUME_FLYOUT_DISMISS_MS, getIcon
 
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(1649);
@@ -2980,12 +2981,26 @@ function IconVolumeMuted24(props) {
 var MediaToggle = __webpack_require__(8997);
 ;// ./src/lib/viewers/controls/hooks/useAttention.ts
 
+/** True when focus/hover is moving to a descendant, not leaving the host. */
+function isRelatedTargetInside(event) {
+  return event.currentTarget.contains(event.relatedTarget);
+}
 function useAttention() {
   const [isFocused, setFocused] = external_react_.useState(false);
   const [isHovered, setHovered] = external_react_.useState(false);
-  const handleBlur = () => setFocused(false);
+  const handleBlur = event => {
+    if (isRelatedTargetInside(event)) {
+      return;
+    }
+    setFocused(false);
+  };
   const handleFocus = () => setFocused(true);
-  const handleMouseOut = () => setHovered(false);
+  const handleMouseOut = event => {
+    if (isRelatedTargetInside(event)) {
+      return;
+    }
+    setHovered(false);
+  };
   const handleMouseOver = () => setHovered(true);
   return [isFocused || isHovered, {
     onBlur: handleBlur,
@@ -3022,7 +3037,7 @@ var util = __webpack_require__(4410);
 // extracted by mini-css-extract-plugin
 
 ;// ./src/lib/viewers/controls/slider/VolumeSliderControl.tsx
-const _excluded = ["className", "max", "min", "onMove", "onUpdate", "step", "title", "value", "onMouseOver"];
+const _excluded = ["className", "max", "min", "onMove", "onUpdate", "step", "title", "value", "onMouseOver", "tabIndex"];
 function VolumeSliderControl_extends() { return VolumeSliderControl_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, VolumeSliderControl_extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -3048,7 +3063,8 @@ function VolumeSliderControl(_ref) {
       step = 1,
       title,
       value,
-      onMouseOver
+      onMouseOver,
+      tabIndex = 0
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const [isScrubbing, setIsScrubbing] = external_react_["default"].useState(false);
@@ -3159,33 +3175,29 @@ function VolumeSliderControl(_ref) {
     className: "bp-VolumeVerticalSliderControl-track-container"
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: sliderElRef,
-    className: "bp-VolumeVerticalSliderControl-track-background",
-    onMouseDown: handleMouseDown,
-    role: "button",
-    tabIndex: 0
-  }, /*#__PURE__*/external_react_["default"].createElement("div", {
     "aria-label": title,
     "aria-valuemax": max,
     "aria-valuemin": min,
     "aria-valuenow": value,
-    className: "bp-VolumeVerticalSliderControl-track",
+    className: "bp-VolumeVerticalSliderControl-track-background",
     "data-resin-target": "volumeSlider",
     "data-testid": "bp-volume-slider-control-track",
-    onFocus: onMouseOver,
+    onFocus: (noop_default()),
     onKeyDown: handleKeydown,
     onMouseDown: handleMouseDown,
     onMouseMove: handleMouseMove,
     onMouseOver: onMouseOver,
     onTouchStart: handleTouchStart,
     role: "slider",
+    tabIndex: tabIndex
+  }, /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-VolumeVerticalSliderControl-track",
     style: {
       height: `${heightValueBasedOnVolume / max * 100}%`
-    },
-    tabIndex: 0
+    }
   }))));
 }
 ;// ./src/lib/viewers/controls/media/VolumeControls.tsx
-function VolumeControls_extends() { return VolumeControls_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, VolumeControls_extends.apply(null, arguments); }
 
 
 
@@ -3196,6 +3208,9 @@ function VolumeControls_extends() { return VolumeControls_extends = Object.assig
 
 
 
+
+/** Keyboard volume keeps the flyout open longer than the 200ms max-width transition. */
+const VOLUME_FLYOUT_DISMISS_MS = 1000;
 function getIcon(volume) {
   let Icon = icons_IconVolumeMuted24;
   if (volume >= 0.66) {
@@ -3208,16 +3223,32 @@ function getIcon(volume) {
   return Icon;
 }
 function VolumeControls({
+  keyboardVolumeStep = 0,
   onMuteChange,
   onVolumeChange,
   volume = 1
 }) {
   const [isActive, handlers] = useAttention();
+  const [isRevealed, setIsRevealed] = (0,external_react_.useState)(false);
+  const revealTimerRef = (0,external_react_.useRef)(0);
   const isMuted = !volume;
   const Icon = isMuted ? icons_IconVolumeMuted24 : getIcon(volume);
   const title = isMuted ? "Unmute" : "Mute";
   const value = Math.round(volume * 100);
-  const handleVolume = external_react_["default"].useCallback(newValue => {
+  const isOpen = isActive || isRevealed;
+  (0,external_react_.useEffect)(() => {
+    if (!keyboardVolumeStep) {
+      return;
+    }
+    setIsRevealed(true);
+    window.clearTimeout(revealTimerRef.current);
+    revealTimerRef.current = window.setTimeout(() => {
+      setIsRevealed(false);
+      revealTimerRef.current = 0;
+    }, VOLUME_FLYOUT_DISMISS_MS);
+  }, [keyboardVolumeStep]);
+  (0,external_react_.useEffect)(() => () => window.clearTimeout(revealTimerRef.current), []);
+  const handleVolume = (0,external_react_.useCallback)(newValue => {
     const newValueToUse = newValue <= 5 ? 0 : newValue;
     // make sure the value is always between 0 and 1 since the value passed in could be
     // greater than 100 if the user drags the mouse above the top of the sider when adjusting the volume
@@ -3227,27 +3258,39 @@ function VolumeControls({
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-VolumeControls",
     "data-testid": "bp-volume-controls",
-    onBlur: handlers.onBlur,
+    onBlur: event => {
+      handlers.onBlur(event);
+      if (event.currentTarget.contains(event.relatedTarget)) {
+        return;
+      }
+      window.clearTimeout(revealTimerRef.current);
+      revealTimerRef.current = 0;
+      setIsRevealed(false);
+    },
     onFocus: handlers.onFocus,
     onMouseOut: handlers.onMouseOut,
     onMouseOver: handlers.onMouseOver
-  }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, VolumeControls_extends({
+  }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
     className: "bp-VolumeControls-toggle",
     "data-resin-target": "volumeToggle",
     onClick: () => onMuteChange(!isMuted),
     title: title
-  }, handlers), /*#__PURE__*/external_react_["default"].createElement(Icon, null)), /*#__PURE__*/external_react_["default"].createElement("div", {
+  }, /*#__PURE__*/external_react_["default"].createElement(Icon, null)), /*#__PURE__*/external_react_["default"].createElement("div", {
+    "aria-hidden": !isOpen,
     className: classnames_default()('bp-VolumeControls-flyout', {
-      'bp-is-open': isActive
+      'bp-is-open': isOpen
     })
-  }, /*#__PURE__*/external_react_["default"].createElement(VolumeSliderControl, VolumeControls_extends({
+  }, /*#__PURE__*/external_react_["default"].createElement(VolumeSliderControl, {
+    "aria-hidden": !isOpen,
     className: "bp-VolumeControls-slider",
     max: 100,
+    onMouseOver: handlers.onMouseOver,
     onUpdate: handleVolume,
     step: 1,
+    tabIndex: isOpen ? 0 : -1,
     title: "Volume Slider",
     value: value
-  }, handlers))));
+  })));
 }
 
 /***/ },
@@ -4487,7 +4530,7 @@ function getPdfjsWorkerSrc() {
 
 /***/ },
 
-/***/ 6180
+/***/ 7450
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 
@@ -4621,6 +4664,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 /** Visible window: start/end times, pixels-per-second, and the current zoom. */
 function createWaveformViewport({
   durationSec,
+  gutterPx = 0,
   heightPx,
   maxZoom,
   scrollLeftPx,
@@ -4630,11 +4674,16 @@ function createWaveformViewport({
   const zoom = Number.isFinite(zoomLevel) && zoomLevel > 0 ? zoomLevel : constants/* WAVEFORM_ZOOM_MIN */.LW;
   const viewDurationSec = durationSec > 0 ? durationSec / zoom : 0; // seconds visible at this zoom
   const pixelsPerSecond = viewDurationSec > 0 && widthPx > 0 ? widthPx / viewDurationSec : 0;
-  const maxStartSec = Math.max(0, durationSec - viewDurationSec); // last start that still fills the window
-  const startSec = pixelsPerSecond > 0 ? Math.min(maxStartSec, Math.max(0, scrollLeftPx / pixelsPerSecond)) : 0;
+  const leadingGutterPx = Number.isFinite(gutterPx) && gutterPx > 0 ? gutterPx : 0;
+  const unclampedStartSec = pixelsPerSecond > 0 ? (scrollLeftPx - leadingGutterPx) / pixelsPerSecond : 0;
+  const gutterDurationSec = pixelsPerSecond > 0 ? leadingGutterPx / pixelsPerSecond : 0;
+  const latestWindowStartSec = leadingGutterPx > 0 ? durationSec + gutterDurationSec - viewDurationSec : Math.max(0, durationSec - viewDurationSec);
+  const earliestWindowStartSec = leadingGutterPx > 0 ? -gutterDurationSec : 0;
+  const startSec = pixelsPerSecond > 0 ? Math.min(latestWindowStartSec, Math.max(earliestWindowStartSec, unclampedStartSec)) : 0;
   return {
     durationSec,
     endSec: startSec + viewDurationSec,
+    gutterPx: leadingGutterPx,
     heightPx,
     maxZoom,
     pixelsPerSecond,
@@ -4654,7 +4703,7 @@ function getViewportAtScroll(viewport, scrollLeftPx) {
 
 /** True when the visible window has not moved — skip a React state update. */
 function viewportEquals(prev, next) {
-  return !!prev && prev.durationSec === next.durationSec && prev.endSec === next.endSec && prev.maxZoom === next.maxZoom && prev.scrollLeftPx === next.scrollLeftPx && prev.startSec === next.startSec && prev.widthPx === next.widthPx && prev.zoomLevel === next.zoomLevel;
+  return !!prev && prev.durationSec === next.durationSec && prev.endSec === next.endSec && prev.gutterPx === next.gutterPx && prev.maxZoom === next.maxZoom && prev.scrollLeftPx === next.scrollLeftPx && prev.startSec === next.startSec && prev.widthPx === next.widthPx && prev.zoomLevel === next.zoomLevel;
 }
 
 /** How many CSS pixels from the left of the visible window this time sits. */
@@ -4701,17 +4750,34 @@ function clampWaveformZoom(zoomLevel, maxZoom = constants/* WAVEFORM_ZOOM_MIN */
 /** WaveSurfer zoom density. 0 = fit the whole file in the view. */
 function getZoomedPixelsPerSecond({
   durationSec,
+  isTape = false,
   maxZoom = constants/* WAVEFORM_ZOOM_MIN */.LW,
   viewWidthPx,
   zoomLevel
 }) {
   const zoom = clampWaveformZoom(zoomLevel, maxZoom);
-  if (zoom <= constants/* WAVEFORM_ZOOM_MIN */.LW || !(durationSec > 0) || !(viewWidthPx > 0)) {
+  if (!(durationSec > 0) || !(viewWidthPx > 0)) {
+    return 0;
+  }
+  if (!isTape && zoom <= constants/* WAVEFORM_ZOOM_MIN */.LW) {
     return 0;
   }
   return viewWidthPx / durationSec * zoom;
 }
 
+/** Half-view empty space so t=0 and duration can sit under the center pin. */
+function getTapeGutterPx(widthPx) {
+  return widthPx > 0 ? widthPx / 2 : 0;
+}
+
+/** Tape first paint: 10s on screen, or 1× when the file is shorter than that. */
+function getTapeDefaultZoom(durationSec, maxZoom = constants/* WAVEFORM_ZOOM_MIN */.LW) {
+  if (!(durationSec > 0)) {
+    return constants/* WAVEFORM_ZOOM_MIN */.LW;
+  }
+  return clampWaveformZoom(durationSec / constants/* WAVEFORM_TAPE_DEFAULT_WINDOW_SEC */.Av, maxZoom);
+}
+
 /** Map zoom (1…max) onto the 0–100 slider. */
 function sliderValueFromZoom(zoomLevel, maxZoom = constants/* WAVEFORM_ZOOM_MIN */.LW) {
   const max = Math.max(constants/* WAVEFORM_ZOOM_MIN */.LW, maxZoom);
@@ -4732,9 +4798,15 @@ function zoomFromSliderValue(value, maxZoom = constants/* WAVEFORM_ZOOM_MIN */.L
   return clampWaveformZoom(constants/* WAVEFORM_ZOOM_MIN */.LW + t * (max - constants/* WAVEFORM_ZOOM_MIN */.LW), max);
 }
 
-/** Max scroll that still shows a full window (no overscroll). */
+/** One zoom-in/out button step on the 0–100 slider, mapped back to zoom. */
+function stepWaveformZoom(zoomLevel, maxZoom, sliderDelta) {
+  return zoomFromSliderValue(Math.round(sliderValueFromZoom(zoomLevel, maxZoom)) + sliderDelta, maxZoom);
+}
+
+/** Max scroll that still shows a full window (no overscroll). Gutters add empty lead/trail. */
 function maxScrollLeft(viewport) {
-  return Math.max(0, viewport.durationSec * viewport.pixelsPerSecond - viewport.widthPx);
+  const gutterPx = viewport.gutterPx || 0;
+  return Math.max(0, viewport.durationSec * viewport.pixelsPerSecond + 2 * gutterPx - viewport.widthPx);
 }
 
 /** Scroll offset that still shows a full window (no overscroll). */
@@ -4747,7 +4819,7 @@ function clampScrollLeft(scrollLeftPx, viewport) {
 
 /** Center this time in the view, clamped so the window still fills the canvas. */
 function getCenteredScrollLeft(timeSec, viewport) {
-  return clampScrollLeft(timeSec * viewport.pixelsPerSecond - viewport.widthPx / 2, viewport);
+  return clampScrollLeft(timeSec * viewport.pixelsPerSecond + (viewport.gutterPx || 0) - viewport.widthPx / 2, viewport);
 }
 
 /**
@@ -4755,10 +4827,28 @@ function getCenteredScrollLeft(timeSec, viewport) {
  * No-op at fit-to-width or when that time is already visible.
  */
 function getSeekCameraAction({
+  cameraMode = 'desktop',
   timeSec,
   viewport
 }) {
-  if (viewport.zoomLevel <= constants/* WAVEFORM_ZOOM_MIN */.LW || !(viewport.widthPx > 0) || !(viewport.pixelsPerSecond > 0)) {
+  if (!(viewport.widthPx > 0) || !(viewport.pixelsPerSecond > 0)) {
+    return {
+      type: 'none'
+    };
+  }
+  if (cameraMode === 'tape') {
+    const scrollLeftPx = getCenteredScrollLeft(timeSec, viewport);
+    if (Math.abs(scrollLeftPx - viewport.scrollLeftPx) < 1) {
+      return {
+        type: 'none'
+      };
+    }
+    return {
+      type: 'jump',
+      scrollLeftPx
+    };
+  }
+  if (viewport.zoomLevel <= constants/* WAVEFORM_ZOOM_MIN */.LW) {
     return {
       type: 'none'
     };
@@ -4774,6 +4864,23 @@ function getSeekCameraAction({
   };
 }
 
+/** Always keep this time under the center pin. Reuses followRight so the camera hook can pin. */
+function getTapeCameraAction({
+  timeSec,
+  viewport
+}) {
+  if (!(viewport.widthPx > 0) || !(viewport.pixelsPerSecond > 0)) {
+    return {
+      type: 'none'
+    };
+  }
+  return {
+    isPlayheadPinned: true,
+    scrollLeftPx: getCenteredScrollLeft(timeSec, viewport),
+    type: 'followRight'
+  };
+}
+
 /** Follow inset in CSS px, capped at one third of the view so a narrow player still has room. */
 function getFollowInsetPx(widthPx, insetPx = constants/* WAVEFORM_FOLLOW_INSET_PX */.NM) {
   if (!(widthPx > 0)) {
@@ -4791,6 +4898,11 @@ function getPinnedPlayheadLeft(widthPx, insetPx = constants/* WAVEFORM_FOLLOW_IN
   return `${(widthPx - inset) / widthPx * 100}%`;
 }
 
+/** CSS left for a playhead locked to the center of the view. */
+function getTapePinnedPlayheadLeft() {
+  return '50%';
+}
+
 /** CSS left % of the playhead from the left of the visible window. */
 function timeLeftPercent(timeSec, durationSec, viewport) {
   if (viewport.widthPx > 0 && viewport.pixelsPerSecond > 0) {
@@ -4805,12 +4917,19 @@ function timeLeftPercent(timeSec, durationSec, viewport) {
  * Off-screen at play start jumps in; off-screen right while playing keeps following.
  */
 function getPlayheadCameraAction({
+  cameraMode = 'desktop',
   insetPx = constants/* WAVEFORM_FOLLOW_INSET_PX */.NM,
   isPlaying,
   playJustStarted,
   timeSec,
   viewport
 }) {
+  if (cameraMode === 'tape') {
+    return getTapeCameraAction({
+      timeSec,
+      viewport
+    });
+  }
   if (!isPlaying || viewport.zoomLevel <= constants/* WAVEFORM_ZOOM_MIN */.LW || !(viewport.widthPx > 0) || !(viewport.pixelsPerSecond > 0)) {
     return {
       type: 'none'
@@ -4850,6 +4969,46 @@ function getPlayheadCameraAction({
     type: 'none'
   };
 }
+;// ./src/lib/viewers/media/waveform/useTapeWaveform.ts
+
+
+function isIPadNavigator(tapeNavigator) {
+  return /iPad/i.test(tapeNavigator.userAgent || '') || tapeNavigator.platform === 'MacIntel' && (tapeNavigator.maxTouchPoints || 0) > 1;
+}
+function isCoarsePrimaryPointer(tapeWindow) {
+  return typeof tapeWindow.matchMedia === 'function' && tapeWindow.matchMedia(constants/* TAPE_POINTER_MEDIA_QUERY */.Le).matches;
+}
+
+/**
+ * Tape vs desktop camera: coarse primary pointer (finger) or iPad
+ * (including iPadOS reporting itself as Mac). Not width, not hasTouch,
+ * not Browser.isMobile().
+ */
+function isTapeWaveformInput(tapeWindow = window) {
+  return isCoarsePrimaryPointer(tapeWindow) || isIPadNavigator(tapeWindow.navigator);
+}
+
+/** Subscribe to the pointer media query; re-read the iPad heuristic on change. */
+function useTapeWaveform() {
+  const [isTape, setIsTape] = (0,external_react_.useState)(() => typeof window !== 'undefined' && isTapeWaveformInput(window));
+  (0,external_react_.useEffect)(() => {
+    if (typeof window.matchMedia !== 'function') {
+      setIsTape(isTapeWaveformInput(window));
+      return undefined;
+    }
+    const mediaQuery = window.matchMedia(constants/* TAPE_POINTER_MEDIA_QUERY */.Le);
+    const sync = () => {
+      setIsTape(isTapeWaveformInput(window));
+    };
+    sync();
+    mediaQuery.addEventListener('change', sync);
+    return () => mediaQuery.removeEventListener('change', sync);
+  }, []);
+  return isTape;
+}
+// EXTERNAL MODULE: ./node_modules/classnames/index.js
+var classnames = __webpack_require__(2485);
+var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/helpers/useDismissableMarkerSelection.ts
 var useDismissableMarkerSelection = __webpack_require__(2378);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/helpers/buildClusters.ts
@@ -4869,6 +5028,7 @@ var utils = __webpack_require__(5346);
 
 
 
+
 const WAVEFORM_MARKER_SIZE_PX = 20;
 function hasMappedWindow(viewport) {
   return !!viewport && Number.isFinite(viewport.startSec) && viewport.endSec > viewport.startSec;
@@ -4907,11 +5067,12 @@ function clustersByExactTime(markers, durationSec) {
 function WaveformCommentMarkers({
   commentMarkers,
   durationSec,
+  isTape = false,
   onCommentMarkerClick,
   selectedId: hostSelectedId = null,
   viewport = null
 }) {
-  const trackRef = (0,external_react_.useRef)(null);
+  const trackRef = (0,external_react_.useRef)(null); // width source for clustering overlapping badges
   const {
     containerRef,
     selectMarker,
@@ -4920,7 +5081,7 @@ function WaveformCommentMarkers({
   const [trackWidth, setTrackWidth] = (0,external_react_.useState)(0);
   const canShowTrack = durationSec > 0 && commentMarkers.length > 0;
   const zoomLevel = viewport?.zoomLevel ?? constants/* WAVEFORM_ZOOM_MIN */.LW;
-  const isZoomed = hasMappedWindow(viewport) && viewport.zoomLevel > constants/* WAVEFORM_ZOOM_MIN */.LW;
+  const alignsMarkersToVisibleWindow = hasMappedWindow(viewport) && (viewport.zoomLevel > constants/* WAVEFORM_ZOOM_MIN */.LW || isTape);
   (0,external_react_.useLayoutEffect)(() => {
     if (!canShowTrack) {
       setTrackWidth(0);
@@ -4956,7 +5117,10 @@ function WaveformCommentMarkers({
   }
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: containerRef,
-    className: `bp-WaveformCommentMarkers${isZoomed ? ' bp-WaveformCommentMarkers--zoomed' : ''}`,
+    className: classnames_default()('bp-WaveformCommentMarkers', {
+      'bp-WaveformCommentMarkers--tape': isTape,
+      'bp-WaveformCommentMarkers--zoomed': alignsMarkersToVisibleWindow
+    }),
     "data-testid": "bp-waveform-comment-markers"
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: trackRef,
@@ -4965,7 +5129,10 @@ function WaveformCommentMarkers({
     const marker = cluster.markers[0];
     const isGroup = cluster.markers.length > 1;
     const isSelected = cluster.markers.some(entry => entry.id === selectedId);
-    const className = `bp-WaveformCommentMarkers-marker${isSelected ? ' bp-WaveformCommentMarkers-marker--selected' : ''}${isGroup ? ' bp-WaveformCommentMarkers-marker--group' : ''}`;
+    const className = classnames_default()('bp-WaveformCommentMarkers-marker', {
+      'bp-WaveformCommentMarkers-marker--group': isGroup,
+      'bp-WaveformCommentMarkers-marker--selected': isSelected
+    });
     const left = `${markerLeftPercent(marker.time, durationSec, viewport)}%`;
     if (isGroup) {
       return /*#__PURE__*/external_react_["default"].createElement("div", {
@@ -5003,6 +5170,8 @@ function WaveformCommentMarkers({
     }));
   })));
 }
+;// external "react-dom"
+
 ;// ./node_modules/wavesurfer.js/dist/wavesurfer.esm.js
 function t(t,e,i,n){return new(i||(i=Promise))((function(s,r){function o(t){try{l(n.next(t))}catch(t){r(t)}}function a(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?s(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(o,a)}l((n=n.apply(t,e||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class e{constructor(){this.listeners={}}on(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),null==i?void 0:i.once){const i=(...n)=>{this.un(t,i),e(...n)};return this.listeners[t].add(i),()=>this.un(t,i)}return this.listeners[t].add(e),()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}const i={decode:function(e,i){return t(this,void 0,void 0,(function*(){const t=new AudioContext({sampleRate:i});try{return yield t.decodeAudioData(e)}finally{"closed"!==t.state&&(yield t.close().catch((()=>{})))}}))},createBuffer:function(t,e){if(!t||0===t.length)throw new Error("channelData must be a non-empty array");if(e<=0)throw new Error("duration must be greater than 0");if("number"==typeof t[0]&&(t=[t]),!t[0]||0===t[0].length)throw new Error("channelData must contain non-empty channel arrays");!function(t){const e=t[0];if(e.some((t=>t>1||t<-1))){const i=e.length;let n=0;for(let t=0;t<i;t++){const i=Math.abs(e[t]);i>n&&(n=i)}for(const e of t)for(let t=0;t<i;t++)e[t]/=n}}(t);const i=t.map((t=>t instanceof Float32Array?t:Float32Array.from(t)));return{duration:e,length:i[0].length,sampleRate:i[0].length/e,numberOfChannels:i.length,getChannelData:t=>{const e=i[t];if(!e)throw new Error(`Channel ${t} not found`);return e},copyFromChannel:AudioBuffer.prototype.copyFromChannel,copyToChannel:AudioBuffer.prototype.copyToChannel}}};function n(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,s]of Object.entries(e))if("children"===t&&s)for(const[t,e]of Object.entries(s))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(n(t,e));else"style"===t?Object.assign(i.style,s):"textContent"===t?i.textContent=s:i.setAttribute(t,s.toString());return i}function s(t,e,i){const s=n(t,e||{});return null==i||i.appendChild(s),s}function r(t){return t instanceof HTMLElement||"object"==typeof t&&null!==t&&t.nodeType===Node.ELEMENT_NODE&&"object"==typeof t.style}var o=Object.freeze({__proto__:null,createElement:s,default:s,isHTMLElement:r});const a={fetchBlob:function(e,i,n){return t(this,void 0,void 0,(function*(){var s;const r=yield fetch(e,n);if(r.status>=400)throw new Error(`Failed to fetch ${e}: ${r.status} (${r.statusText})`);return function(e,i,n){t(this,void 0,void 0,(function*(){var t;if(!e.body||!e.headers)return;const s=e.body.getReader(),r=Number(e.headers.get("Content-Length"))||0;let o=0;const a=()=>{s.cancel()};if(n){if(n.aborted)return void s.cancel();n.addEventListener("abort",a,{once:!0})}try{for(;;){const e=yield s.read();if(e.done)break;if(o+=(null===(t=e.value)||void 0===t?void 0:t.length)||0,r>0){const t=Math.round(o/r*100);i(t)}}}catch(t){if(t instanceof DOMException&&"AbortError"===t.name)return;console.warn("Progress tracking error:",t)}finally{n&&n.removeEventListener("abort",a)}}))}(r.clone(),i,null!==(s=null==n?void 0:n.signal)&&void 0!==s?s:void 0),r.blob()}))}};function l(t){let e=t;const i=new Set;return{get value(){return e},set(t){Object.is(e,t)||(e=t,i.forEach((t=>t(e))))},update(t){this.set(t(e))},subscribe:t=>(i.add(t),()=>i.delete(t))}}function h(t,e){const i=l(t());return e.forEach((e=>e.subscribe((()=>{const e=t();Object.is(i.value,e)||i.set(e)})))),{get value(){return i.value},subscribe:t=>i.subscribe(t)}}function c(t,e){let i;const n=()=>{i&&(i(),i=void 0),i=t()},s=e.map((t=>t.subscribe(n)));return n(),()=>{i&&(i(),i=void 0),s.forEach((t=>t()))}}class u extends e{get isPlayingSignal(){return this._isPlaying}get currentTimeSignal(){return this._currentTime}get durationSignal(){return this._duration}get volumeSignal(){return this._volume}get mutedSignal(){return this._muted}get playbackRateSignal(){return this._playbackRate}get seekingSignal(){return this._seeking}constructor(t){super(),this.isExternalMedia=!1,this._ownBlobUrl=null,this.reactiveMediaEventCleanups=[],t.media?(this.media=t.media,this.isExternalMedia=!0):this.media=document.createElement("audio"),this._isPlaying=l(!1),this._currentTime=l(0),this._duration=l(0),this._volume=l(this.media.volume),this._muted=l(this.media.muted),this._playbackRate=l(this.media.playbackRate||1),this._seeking=l(!1),this.setupReactiveMediaEvents(),t.mediaControls&&(this.media.controls=!0),t.autoplay&&(this.media.autoplay=!0),null!=t.playbackRate&&this.onMediaEvent("canplay",(()=>{null!=t.playbackRate&&(this.media.playbackRate=t.playbackRate)}),{once:!0})}setupReactiveMediaEvents(){this.reactiveMediaEventCleanups.push(this.onMediaEvent("play",(()=>{this._isPlaying.set(!0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("pause",(()=>{this._isPlaying.set(!1)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("ended",(()=>{this._isPlaying.set(!1)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("timeupdate",(()=>{this._currentTime.set(this.media.currentTime)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("durationchange",(()=>{this._duration.set(this.media.duration||0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("loadedmetadata",(()=>{this._duration.set(this.media.duration||0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("seeking",(()=>{this._seeking.set(!0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("seeked",(()=>{this._seeking.set(!1)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("volumechange",(()=>{this._volume.set(this.media.volume),this._muted.set(this.media.muted)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("ratechange",(()=>{this._playbackRate.set(this.media.playbackRate)})))}onMediaEvent(t,e,i){return this.media.addEventListener(t,e,i),()=>this.media.removeEventListener(t,e,i)}getSrc(){return this.media.currentSrc||this.media.src||""}revokeSrc(){this._ownBlobUrl&&(URL.revokeObjectURL(this._ownBlobUrl),this._ownBlobUrl=null)}canPlayType(t){return""!==this.media.canPlayType(t)}setSrc(t,e){const i=this.getSrc();if(t&&i===t)return;this.revokeSrc();const n=e instanceof Blob&&(this.canPlayType(e.type)||!t)?URL.createObjectURL(e):t;if(n!==t&&(this._ownBlobUrl=n),i&&this.media.removeAttribute("src"),n||t)try{this.media.src=n}catch(e){this.media.src=t}}destroy(){this.reactiveMediaEventCleanups.forEach((t=>t())),this.reactiveMediaEventCleanups=[],this.revokeSrc(),this.unAll(),this.isExternalMedia||(this.media.pause(),this.media.removeAttribute("src"),this.media.load(),this.media.remove())}setMediaElement(t){this.reactiveMediaEventCleanups.forEach((t=>t())),this.reactiveMediaEventCleanups=[],this.media=t,this.setupReactiveMediaEvents()}play(){return t(this,void 0,void 0,(function*(){try{return yield this.media.play()}catch(t){if(t instanceof DOMException&&"AbortError"===t.name)return;throw t}}))}pause(){this.media.pause()}isPlaying(){return!this.media.paused&&!this.media.ended}setTime(t){this.media.currentTime=Math.max(0,Math.min(t,this.getDuration()))}getDuration(){return this.media.duration}getCurrentTime(){return this.media.currentTime}getVolume(){return this.media.volume}setVolume(t){this.media.volume=t}getMuted(){return this.media.muted}setMuted(t){this.media.muted=t}getPlaybackRate(){return this.media.playbackRate}isSeeking(){return this.media.seeking}setPlaybackRate(t,e){null!=e&&(this.media.preservesPitch=e),this.media.playbackRate=t}getMediaElement(){return this.media}setSinkId(t){return this.media.setSinkId(t)}}function d({maxTop:t,maxBottom:e,halfHeight:i,vScale:n,barMinHeight:s=0,barAlign:r}){let o=Math.round(t*i*n);let a=o+Math.round(e*i*n)||1;return a<s&&(a=s,r||(o=a/2)),{topHeight:o,totalHeight:a}}function p({barAlign:t,halfHeight:e,topHeight:i,totalHeight:n,canvasHeight:s}){return"top"===t?0:"bottom"===t?s-n:e-i}function m(t,e,i){const n=e-t.left,s=i-t.top;return[n/t.width,s/t.height]}function g(t){return Boolean(t.barWidth||t.barGap||t.barAlign)}function f(t,e){if(!g(e))return t;const i=e.barWidth||.5,n=i+(e.barGap||i/2);return 0===n?t:Math.floor(t/n)*n}function v({scrollLeft:t,totalWidth:e,numCanvases:i}){if(0===e)return[0];const n=t/e,s=Math.floor(n*i);return[s-1,s,s+1]}function b(t){const e=t._cleanup;"function"==typeof e&&e()}function y(t){const e=l({scrollLeft:t.scrollLeft,scrollWidth:t.scrollWidth,clientWidth:t.clientWidth}),i=h((()=>function(t){const{scrollLeft:e,scrollWidth:i,clientWidth:n}=t;if(0===i)return{startX:0,endX:1};const s=e/i,r=(e+n)/i;return{startX:Math.max(0,Math.min(1,s)),endX:Math.max(0,Math.min(1,r))}}(e.value)),[e]),n=h((()=>function(t){return{left:t.scrollLeft,right:t.scrollLeft+t.clientWidth}}(e.value)),[e]),s=()=>{e.set({scrollLeft:t.scrollLeft,scrollWidth:t.scrollWidth,clientWidth:t.clientWidth})};t.addEventListener("scroll",s,{passive:!0});return{scrollData:e,percentages:i,bounds:n,cleanup:()=>{t.removeEventListener("scroll",s),b(e)}}}class C extends e{constructor(t,e){super(),this.timeouts=[],this.isScrollable=!1,this.audioData=null,this.resizeObserver=null,this.lastContainerWidth=0,this.isDragging=!1,this.subscriptions=[],this.unsubscribeOnScroll=[],this.dragStream=null,this.scrollStream=null,this.containerInlinePadding=0,this.onClickWrapper=t=>{const e=this.wrapper.getBoundingClientRect(),[i,n]=m(e,t.clientX,t.clientY);this.emit("click",i,n)},this.onDblClickWrapper=t=>{const e=this.wrapper.getBoundingClientRect(),[i,n]=m(e,t.clientX,t.clientY);this.emit("dblclick",i,n)},this.subscriptions=[],this.options=t;const i=this.parentFromOptionsContainer(t.container);this.parent=i;const[n,s]=this.initHtml();i.appendChild(n),this.container=n,this.scrollContainer=s.querySelector(".scroll"),this.wrapper=s.querySelector(".wrapper"),this.canvasWrapper=s.querySelector(".canvases"),this.progressWrapper=s.querySelector(".progress"),this.cursor=s.querySelector(".cursor"),this.calculateInlinePadding(),e&&s.appendChild(e),this.initEvents()}parentFromOptionsContainer(t){let e;if("string"==typeof t?e=document.querySelector(t):r(t)&&(e=t),!e)throw new Error("Container not found");return e}initEvents(){this.wrapper.addEventListener("click",this.onClickWrapper),this.wrapper.addEventListener("dblclick",this.onDblClickWrapper),!0!==this.options.dragToSeek&&"object"!=typeof this.options.dragToSeek||this.initDrag(),this.scrollStream=y(this.scrollContainer);const t=c((()=>{const{startX:t,endX:e}=this.scrollStream.percentages.value,{left:i,right:n}=this.scrollStream.bounds.value;this.emit("scroll",t,e,i,n)}),[this.scrollStream.percentages,this.scrollStream.bounds]);if(this.subscriptions.push(t),"function"==typeof ResizeObserver){const t=this.createDelay(100);this.resizeObserver=new ResizeObserver((()=>{t().then((()=>this.onContainerResize())).catch((()=>{}))})),this.resizeObserver.observe(this.scrollContainer)}}onContainerResize(){const t=this.parent.clientWidth;this.calculateInlinePadding(),t===this.lastContainerWidth&&"auto"!==this.options.height||(this.lastContainerWidth=t,this.reRender(),this.emit("resize"))}initDrag(){if(this.dragStream)return;this.dragStream=function(t,e={}){const{threshold:i=3,mouseButton:n=0,touchDelay:s=100}=e,r=l(null),o=new Map,a=matchMedia("(pointer: coarse)").matches;let h=()=>{};const c=e=>{if(e.button!==n)return;if(o.has(e.pointerId))return;if(o.set(e.pointerId,e),o.size>1)return;const l=e.pointerId;let c=e.clientX,u=e.clientY,d=!1;const p=Date.now(),m=t.getBoundingClientRect(),{left:g,top:f}=m,v=t=>{if(t.pointerId!==l)return;if(t.defaultPrevented||o.size>1)return;if(a&&Date.now()-p<s)return;const e=t.clientX,n=t.clientY,h=e-c,m=n-u;(d||Math.abs(h)>i||Math.abs(m)>i)&&(t.preventDefault(),t.stopPropagation(),d||(r.set({type:"start",x:c-g,y:u-f}),d=!0),r.set({type:"move",x:e-g,y:n-f,deltaX:h,deltaY:m}),c=e,u=n)},b=t=>{if(o.delete(t.pointerId)){if(t.pointerId===l&&d){const e=t.clientX,i=t.clientY;r.set({type:"end",x:e-g,y:i-f})}0===o.size&&h()}},y=t=>{t.relatedTarget&&t.relatedTarget!==document.documentElement||b(t)},C=t=>{d&&(t.stopPropagation(),t.preventDefault())},S=t=>{t.defaultPrevented||o.size>1||d&&t.preventDefault()};document.addEventListener("pointermove",v),document.addEventListener("pointerup",b),document.addEventListener("pointerout",y),document.addEventListener("pointercancel",y),document.addEventListener("touchmove",S,{passive:!1}),document.addEventListener("click",C,{capture:!0}),h=()=>{document.removeEventListener("pointermove",v),document.removeEventListener("pointerup",b),document.removeEventListener("pointerout",y),document.removeEventListener("pointercancel",y),document.removeEventListener("touchmove",S),setTimeout((()=>{document.removeEventListener("click",C,{capture:!0})}),10)}};return t.addEventListener("pointerdown",c),{signal:r,cleanup:()=>{h(),t.removeEventListener("pointerdown",c),o.clear(),b(r)}}}(this.wrapper);const t=c((()=>{const t=this.dragStream.signal.value;if(!t)return;const e=this.wrapper.getBoundingClientRect().width,i=(n=t.x/e)<0?0:n>1?1:n;var n;"start"===t.type?(this.isDragging=!0,this.emit("dragstart",i)):"move"===t.type?this.emit("drag",i):"end"===t.type&&(this.isDragging=!1,this.emit("dragend",i))}),[this.dragStream.signal]);this.subscriptions.push(t)}calculateInlinePadding(){const{paddingLeft:t,paddingRight:e}=getComputedStyle(this.scrollContainer),i=parseFloat(t)+parseFloat(e);this.containerInlinePadding=Number.isNaN(i)?0:i}initHtml(){const t=document.createElement("div"),e=t.attachShadow({mode:"open"}),i=this.options.cspNonce&&"string"==typeof this.options.cspNonce?this.options.cspNonce.replace(/"/g,""):"";return e.innerHTML=`\n      <style${i?` nonce="${i}"`:""}>\n        :host {\n          user-select: none;\n          min-width: 1px;\n        }\n        :host audio {\n          display: block;\n          width: 100%;\n        }\n        :host .scroll {\n          overflow-x: auto;\n          overflow-y: hidden;\n          width: 100%;\n          position: relative;\n        }\n        :host .noScrollbar {\n          scrollbar-color: transparent;\n          scrollbar-width: none;\n        }\n        :host .noScrollbar::-webkit-scrollbar {\n          display: none;\n          -webkit-appearance: none;\n        }\n        :host .wrapper {\n          position: relative;\n          overflow: visible;\n          z-index: 2;\n        }\n        :host .canvases {\n          min-height: ${this.getHeight(this.options.height,this.options.splitChannels)}px;\n          pointer-events: none;\n        }\n        :host .canvases > div {\n          position: relative;\n        }\n        :host canvas {\n          display: block;\n          position: absolute;\n          top: 0;\n          image-rendering: pixelated;\n        }\n        :host .progress {\n          pointer-events: none;\n          position: absolute;\n          z-index: 2;\n          top: 0;\n          left: 0;\n          width: 0;\n          height: 100%;\n          overflow: hidden;\n        }\n        :host .progress > div {\n          position: relative;\n        }\n        :host .cursor {\n          pointer-events: none;\n          position: absolute;\n          z-index: 5;\n          top: 0;\n          left: 0;\n          height: 100%;\n          border-radius: 2px;\n        }\n      </style>\n\n      <div class="scroll" part="scroll">\n        <div class="wrapper" part="wrapper">\n          <div class="canvases" part="canvases"></div>\n          <div class="progress" part="progress"></div>\n          <div class="cursor" part="cursor"></div>\n        </div>\n      </div>\n    `,[t,e]}setOptions(t){var e;if(this.options.container!==t.container){const e=this.parentFromOptionsContainer(t.container);e.appendChild(this.container),this.parent=e}!0===t.dragToSeek||"object"==typeof this.options.dragToSeek?this.initDrag():(null===(e=this.dragStream)||void 0===e||e.cleanup(),this.dragStream=null),this.options=t,this.reRender()}getWrapper(){return this.wrapper}getWidth(){return this.scrollContainer.clientWidth-this.containerInlinePadding}getScroll(){return this.scrollContainer.scrollLeft}setScroll(t){this.scrollContainer.scrollLeft=t}setScrollPercentage(t){const{scrollWidth:e}=this.scrollContainer,i=e*t;this.setScroll(i)}destroy(){var t;this.wrapper.removeEventListener("click",this.onClickWrapper),this.wrapper.removeEventListener("dblclick",this.onDblClickWrapper),this.timeouts.forEach((t=>t())),this.timeouts=[],this.subscriptions.forEach((t=>t())),this.container.remove(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),null===(t=this.unsubscribeOnScroll)||void 0===t||t.forEach((t=>t())),this.unsubscribeOnScroll=[],this.dragStream&&(this.dragStream.cleanup(),this.dragStream=null),this.scrollStream&&(this.scrollStream.cleanup(),this.scrollStream=null)}createDelay(t=10){let e,i;const n=()=>{e&&(clearTimeout(e),e=void 0),i&&(i(),i=void 0)};return this.timeouts.push(n),()=>new Promise(((s,r)=>{n(),i=r,e=setTimeout((()=>{e=void 0,i=void 0,s()}),t)}))}getHeight(t,e){var i;const n=(null===(i=this.audioData)||void 0===i?void 0:i.numberOfChannels)||1;return function({optionsHeight:t,optionsSplitChannels:e,parentHeight:i,numberOfChannels:n,defaultHeight:s=128}){if(null==t)return s;const r=Number(t);if(!isNaN(r))return r;if("auto"===t){const t=i||s;return(null==e?void 0:e.every((t=>!t.overlay)))?t/n:t}return s}({optionsHeight:t,optionsSplitChannels:e,parentHeight:this.parent.clientHeight,numberOfChannels:n,defaultHeight:128})}convertColorValues(t,e){return function(t,e,i){if(!Array.isArray(t))return t||"";if(0===t.length)return"#999";if(t.length<2)return t[0]||"";const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return t[0]||"";const r=i||n.height*e,o=s.createLinearGradient(0,0,0,r),a=1/(t.length-1);return t.forEach(((t,e)=>{o.addColorStop(e*a,t)})),o}(t,this.getPixelRatio(),null==e?void 0:e.canvas.height)}getPixelRatio(){return t=window.devicePixelRatio,Math.max(1,t||1);// removed by dead control flow
  var t; }renderBarWaveform(t,e,i,n){const{width:s,height:r}=i.canvas,{halfHeight:o,barWidth:a,barRadius:l,barIndexScale:h,barSpacing:c,barMinHeight:u}=function({width:t,height:e,length:i,options:n,pixelRatio:s}){const r=e/2,o=n.barWidth?n.barWidth*s:1,a=n.barGap?n.barGap*s:n.barWidth?o/2:0,l=o+a||1;return{halfHeight:r,barWidth:o,barGap:a,barRadius:n.barRadius||0,barMinHeight:n.barMinHeight?n.barMinHeight*s:0,barIndexScale:i>0?t/l/i:0,barSpacing:l}}({width:s,height:r,length:(t[0]||[]).length,options:e,pixelRatio:this.getPixelRatio()}),m=function({channelData:t,barIndexScale:e,barSpacing:i,barWidth:n,halfHeight:s,vScale:r,canvasHeight:o,barAlign:a,barMinHeight:l}){const h=t[0]||[],c=t[1]||h,u=h.length,m=[];let g=0,f=0,v=0;for(let t=0;t<=u;t++){const u=Math.round(t*e);if(u>g){const{topHeight:t,totalHeight:e}=d({maxTop:f,maxBottom:v,halfHeight:s,vScale:r,barMinHeight:l,barAlign:a}),h=p({barAlign:a,halfHeight:s,topHeight:t,totalHeight:e,canvasHeight:o});m.push({x:g*i,y:h,width:n,height:e}),g=u,f=0,v=0}const b=Math.abs(h[t]||0),y=Math.abs(c[t]||0);b>f&&(f=b),y>v&&(v=y)}return m}({channelData:t,barIndexScale:h,barSpacing:c,barWidth:a,halfHeight:o,vScale:n,canvasHeight:r,barAlign:e.barAlign,barMinHeight:u});i.beginPath();for(const t of m)l&&"roundRect"in i?i.roundRect(t.x,t.y,t.width,t.height,l):i.rect(t.x,t.y,t.width,t.height);i.fill(),i.closePath()}renderLineWaveform(t,e,i,n){const{width:s,height:r}=i.canvas,o=function({channelData:t,width:e,height:i,vScale:n}){const s=i/2,r=t[0]||[];return[r,t[1]||r].map(((t,i)=>{const r=t.length,o=r?e/r:0,a=s,l=0===i?-1:1,h=[{x:0,y:a}];let c=0,u=0;for(let e=0;e<=r;e++){const i=Math.round(e*o);if(i>c){const t=a+(Math.round(u*s*n)||1)*l;h.push({x:c,y:t}),c=i,u=0}const r=Math.abs(t[e]||0);r>u&&(u=r)}return h.push({x:c,y:a}),h}))}({channelData:t,width:s,height:r,vScale:n});i.beginPath();for(const t of o)if(t.length){i.moveTo(t[0].x,t[0].y);for(let e=1;e<t.length;e++){const n=t[e];i.lineTo(n.x,n.y)}}i.fill(),i.closePath()}renderWaveform(t,e,i){if(i.fillStyle=this.convertColorValues(e.waveColor,i),e.renderFunction)return void e.renderFunction(t,i);const n=function({channelData:t,barHeight:e,normalize:i,maxPeak:n}){var s;const r=e||1;if(!i)return r;const o=t[0];if(!o||0===o.length)return r;let a=null!=n?n:0;if(!n)for(let t=0;t<o.length;t++){const e=null!==(s=o[t])&&void 0!==s?s:0,i=Math.abs(e);i>a&&(a=i)}return a?r/a:r}({channelData:t,barHeight:e.barHeight,normalize:e.normalize,maxPeak:e.maxPeak});g(e)?this.renderBarWaveform(t,e,i,n):this.renderLineWaveform(t,e,i,n)}renderSingleCanvas(t,e,i,n,s,r,o){const a=this.getPixelRatio(),l=document.createElement("canvas");l.width=Math.round(i*a),l.height=Math.round(n*a),l.style.width=`${i}px`,l.style.height=`${n}px`,l.style.left=`${Math.round(s)}px`,r.appendChild(l);const h=l.getContext("2d");if(e.renderFunction?(h.fillStyle=this.convertColorValues(e.waveColor,h),e.renderFunction(t,h)):this.renderWaveform(t,e,h),l.width>0&&l.height>0){const t=l.cloneNode(),i=t.getContext("2d");i.drawImage(l,0,0),i.globalCompositeOperation="source-in",i.fillStyle=this.convertColorValues(e.progressColor,i),i.fillRect(0,0,l.width,l.height),o.appendChild(t)}}renderMultiCanvas(t,e,i,n,s,r){const o=this.getPixelRatio(),{clientWidth:a}=this.scrollContainer,l=i/o,h=function({clientWidth:t,totalWidth:e,options:i}){return f(Math.min(8e3,t,e),i)}({clientWidth:a,totalWidth:l,options:e});let c={};if(0===h)return;const u=i=>{if(i<0||i>=d)return;if(c[i])return;c[i]=!0;const o=i*h;let a=Math.min(l-o,h);if(a=f(a,e),a<=0)return;const u=function({channelData:t,offset:e,clampedWidth:i,totalWidth:n}){return t.map((t=>{const s=Math.floor(e/n*t.length),r=Math.floor((e+i)/n*t.length);return t.slice(s,r)}))}({channelData:t,offset:o,clampedWidth:a,totalWidth:l});this.renderSingleCanvas(u,e,a,n,o,s,r)},d=Math.ceil(l/h);if(!this.isScrollable){for(let t=0;t<d;t++)u(t);return}if(v({scrollLeft:this.scrollContainer.scrollLeft,totalWidth:l,numCanvases:d}).forEach((t=>u(t))),d>1){const t=this.on("scroll",(()=>{const{scrollLeft:t}=this.scrollContainer;Object.keys(c).length>10&&(s.innerHTML="",r.innerHTML="",c={}),v({scrollLeft:t,totalWidth:l,numCanvases:d}).forEach((t=>u(t)))}));this.unsubscribeOnScroll.push(t)}}renderChannel(t,e,i,n){var{overlay:s}=e,r=function(t,e){var i={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(i[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(t);s<n.length;s++)e.indexOf(n[s])<0&&Object.prototype.propertyIsEnumerable.call(t,n[s])&&(i[n[s]]=t[n[s]])}return i}(e,["overlay"]);const o=document.createElement("div"),a=this.getHeight(r.height,r.splitChannels);o.style.height=`${a}px`,s&&n>0&&(o.style.marginTop=`-${a}px`),this.canvasWrapper.style.minHeight=`${a}px`,this.canvasWrapper.appendChild(o);const l=o.cloneNode();this.progressWrapper.appendChild(l),this.renderMultiCanvas(t,r,i,a,o,l)}render(e){return t(this,void 0,void 0,(function*(){var t;this.timeouts.forEach((t=>t())),this.timeouts=[],this.unsubscribeOnScroll.forEach((t=>t())),this.unsubscribeOnScroll=[],this.canvasWrapper.innerHTML="",this.progressWrapper.innerHTML="",null!=this.options.width&&(this.scrollContainer.style.width="number"==typeof this.options.width?`${this.options.width}px`:this.options.width);const i=this.getPixelRatio(),n=this.scrollContainer.clientWidth-this.containerInlinePadding,{scrollWidth:s,isScrollable:r,useParentWidth:o,width:a}=function({duration:t,minPxPerSec:e=0,parentWidth:i,fillParent:n,pixelRatio:s}){const r=Math.ceil(t*e),o=r>i,a=Boolean(n&&!o);return{scrollWidth:r,isScrollable:o,useParentWidth:a,width:(a?i:r)*s}}({duration:e.duration,minPxPerSec:this.options.minPxPerSec||0,parentWidth:n,fillParent:this.options.fillParent,pixelRatio:i});if(this.isScrollable=r,this.wrapper.style.width=o?"100%":`${s}px`,this.scrollContainer.style.overflowX=this.isScrollable?"auto":"hidden",this.scrollContainer.classList.toggle("noScrollbar",!!this.options.hideScrollbar),this.cursor.style.backgroundColor=`${this.options.cursorColor||this.options.progressColor}`,this.cursor.style.width=`${this.options.cursorWidth}px`,this.audioData=e,this.emit("render"),this.options.splitChannels)for(let i=0;i<e.numberOfChannels;i++){const n=Object.assign(Object.assign({},this.options),null===(t=this.options.splitChannels)||void 0===t?void 0:t[i]);this.renderChannel([e.getChannelData(i)],n,a,i)}else{const t=[e.getChannelData(0)];e.numberOfChannels>1&&t.push(e.getChannelData(1)),this.renderChannel(t,this.options,a,0)}Promise.resolve().then((()=>this.emit("rendered")))}))}reRender(){if(this.unsubscribeOnScroll.forEach((t=>t())),this.unsubscribeOnScroll=[],!this.audioData)return;const{scrollWidth:t}=this.scrollContainer,{right:e}=this.progressWrapper.getBoundingClientRect();if(this.render(this.audioData),!this.isScrollable&&this.scrollContainer.scrollLeft)this.scrollContainer.scrollLeft=0;else if(this.isScrollable&&t!==this.scrollContainer.scrollWidth){const{right:t}=this.progressWrapper.getBoundingClientRect(),i=function(t){const e=2*t;return(e<0?Math.floor(e):Math.ceil(e))/2}(t-e);this.scrollContainer.scrollLeft+=i}}zoom(t){this.options.minPxPerSec=t,this.reRender()}scrollIntoView(t,e=!1){var i;const{scrollLeft:n,scrollWidth:s,clientWidth:r}=this.scrollContainer,o=t*s,a=n,l=n+r,h=r/2;if(this.isDragging){const t=30;o+t>l?this.scrollContainer.scrollLeft+=t:o-t<a&&(this.scrollContainer.scrollLeft-=t)}else{(o<a||o>l)&&(this.scrollContainer.scrollLeft=o-(this.options.autoCenter?h:0));const t=o-n-h;if(e&&this.options.autoCenter&&t>0){const e=null===(i=this.audioData)||void 0===i?void 0:i.duration;if(void 0===e||e<=0)return void(this.scrollContainer.scrollLeft+=t);const n=s/e;this.scrollContainer.scrollLeft+=n<=600?Math.min(t,10):t}}}renderProgress(t,e){if(isNaN(t))return;const i=100*t;this.canvasWrapper.style.clipPath=`polygon(${i}% 0%, 100% 0%, 100% 100%, ${i}% 100%)`,this.progressWrapper.style.width=`${i}%`,this.cursor.style.left=`${i}%`,this.cursor.style.transform=this.options.cursorWidth?`translateX(-${t*this.options.cursorWidth}px)`:"",this.isScrollable&&this.options.autoScroll&&this.audioData&&this.audioData.duration>0&&this.scrollIntoView(t,e)}exportImage(e,i,n){return t(this,void 0,void 0,(function*(){const t=this.canvasWrapper.querySelectorAll("canvas");if(!t.length)throw new Error("No waveform data");if("dataURL"===n){const n=Array.from(t).map((t=>t.toDataURL(e,i)));return Promise.resolve(n)}return Promise.all(Array.from(t).map((t=>new Promise(((n,s)=>{t.toBlob((t=>{t?n(t):s(new Error("Could not export image"))}),e,i)})))))}))}}class S extends e{constructor(){super(...arguments),this.animationFrameId=null,this.isRunning=!1}start(){if(this.isRunning)return;this.isRunning=!0;const t=()=>{this.isRunning&&(this.emit("tick"),this.animationFrameId=requestAnimationFrame(t))};t()}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}destroy(){this.stop(),this.unAll()}}class E extends e{constructor(t){super(),this.bufferNode=null,this.playStartTime=0,this.playbackPosition=0,this._muted=!1,this._playbackRate=1,this._duration=void 0,this.buffer=null,this.currentSrc="",this.paused=!0,this.crossOrigin=null,this.seeking=!1,this.autoplay=!1,this.addEventListener=this.on,this.removeEventListener=this.un,this._destroyed=!1,function(){const t=globalThis.navigator;if(null==t?void 0:t.audioSession)try{t.audioSession.type="playback"}catch(t){console.warn("Setting navigator.audioSession.type failed:",t)}}(),this.audioContext=t||new AudioContext,this.gainNode=this.audioContext.createGain(),this.gainNode.connect(this.audioContext.destination)}load(){return t(this,void 0,void 0,(function*(){}))}remove(){this.destroy()}destroy(){if(!this._destroyed){if(this._destroyed=!0,this.currentSrc="",this.bufferNode){this.bufferNode.onended=null;try{this.bufferNode.stop()}catch(t){}this.bufferNode.disconnect(),this.bufferNode=null}this.gainNode.disconnect(),"function"==typeof this.audioContext.close&&Promise.resolve(this.audioContext.close.call(this.audioContext)).catch((()=>{})),this.buffer=null,this.unAll()}}get src(){return this.currentSrc}set src(t){if(this.currentSrc=t,this._duration=void 0,!t)return this.buffer=null,void this.emit("emptied");fetch(t).then((e=>{if(e.status>=400)throw new Error(`Failed to fetch ${t}: ${e.status} (${e.statusText})`);return e.arrayBuffer()})).then((e=>this.currentSrc!==t?null:this.audioContext.decodeAudioData(e))).then((e=>{this.currentSrc===t&&(this.buffer=e,this.emit("loadedmetadata"),this.emit("canplay"),this.autoplay&&this.play())})).catch((t=>{console.error("WebAudioPlayer load error:",t)}))}_play(){if(!this.paused)return;this.paused=!1,this.bufferNode&&(this.bufferNode.onended=null,this.bufferNode.disconnect()),this.bufferNode=this.audioContext.createBufferSource(),this.buffer&&(this.bufferNode.buffer=this.buffer),this.bufferNode.playbackRate.value=this._playbackRate,this.bufferNode.connect(this.gainNode);let t=this.playbackPosition;(t>=this.duration||t<0)&&(t=0,this.playbackPosition=0),this.bufferNode.start(this.audioContext.currentTime,t),this.playStartTime=this.audioContext.currentTime,this.bufferNode.onended=()=>{!this.paused&&this.duration-this.currentTime<.01&&(this.pause(),this.emit("ended"))}}_pause(){if(this.paused=!0,this.bufferNode){this.bufferNode.onended=null;try{this.bufferNode.stop()}catch(t){}}this.playbackPosition+=(this.audioContext.currentTime-this.playStartTime)*this._playbackRate}play(){return t(this,void 0,void 0,(function*(){this.paused&&(this._play(),this.emit("play"))}))}pause(){this.paused||(this._pause(),this.emit("pause"))}stopAt(t){const e=(t-this.currentTime)/this._playbackRate,i=this.bufferNode;null==i||i.stop(this.audioContext.currentTime+e),null==i||i.addEventListener("ended",(()=>{i===this.bufferNode&&(this.bufferNode=null,this.pause(),this.playbackPosition=Math.min(t,this.duration),this.emit("timeupdate"))}),{once:!0})}setSinkId(e){return t(this,void 0,void 0,(function*(){return this.audioContext.setSinkId(e)}))}get playbackRate(){return this._playbackRate}set playbackRate(t){const e=!this.paused;e&&this._pause(),this._playbackRate=t,e&&this._play(),this.bufferNode&&(this.bufferNode.playbackRate.value=t)}get currentTime(){return this.paused?this.playbackPosition:this.playbackPosition+(this.audioContext.currentTime-this.playStartTime)*this._playbackRate}set currentTime(t){const e=!this.paused;e&&this._pause(),this.playbackPosition=t,e&&this._play(),this.emit("seeking"),this.emit("timeupdate")}get duration(){var t,e;return null!==(t=this._duration)&&void 0!==t?t:(null===(e=this.buffer)||void 0===e?void 0:e.duration)||0}set duration(t){this._duration=t}get volume(){return this.gainNode.gain.value}set volume(t){this.gainNode.gain.value=t,this.emit("volumechange")}get muted(){return this._muted}set muted(t){this._muted!==t&&(this._muted=t,this._muted?this.gainNode.disconnect():this.gainNode.connect(this.audioContext.destination))}canPlayType(t){return/^(audio|video)\//.test(t)}getGainNode(){return this.gainNode}getChannelData(){const t=[];if(!this.buffer)return t;const e=this.buffer.numberOfChannels;for(let i=0;i<e;i++)t.push(this.buffer.getChannelData(i));return t}removeAttribute(t){switch(t){case"src":this.src="";break;case"playbackRate":this.playbackRate=0;break;case"currentTime":this.currentTime=0;break;case"duration":this.duration=0;break;case"volume":this.volume=0;break;case"muted":this.muted=!1}}}const P={waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interact:!0,dragToSeek:!1,autoScroll:!0,autoCenter:!0,sampleRate:8e3};class w extends u{static create(t){return new w(t)}getState(){return this.wavesurferState}getRenderer(){return this.renderer}constructor(t){const e=t.media||("WebAudio"===t.backend?new E:void 0);super({media:e,mediaControls:t.mediaControls,autoplay:t.autoplay,playbackRate:t.audioRate}),this.plugins=[],this.decodedData=null,this.stopAtPosition=null,this.subscriptions=[],this.mediaSubscriptions=[],this.abortController=null,this._isDestroyed=!1,this._loadVersion=0,this.reactiveCleanups=[],this.options=Object.assign({},P,t);const{state:i,actions:n}=function(t){var e,i,n,s,r,o;const a=null!==(e=null==t?void 0:t.currentTime)&&void 0!==e?e:l(0),c=null!==(i=null==t?void 0:t.duration)&&void 0!==i?i:l(0),u=null!==(n=null==t?void 0:t.isPlaying)&&void 0!==n?n:l(!1),d=null!==(s=null==t?void 0:t.isSeeking)&&void 0!==s?s:l(!1),p=null!==(r=null==t?void 0:t.volume)&&void 0!==r?r:l(1),m=null!==(o=null==t?void 0:t.playbackRate)&&void 0!==o?o:l(1),g=l(null),f=l(null),v=l(""),b=l(0),y=l(0),C=h((()=>!u.value),[u]),S=h((()=>null!==g.value),[g]),E=h((()=>S.value&&c.value>0),[S,c]),P=h((()=>a.value),[a]),w=h((()=>c.value>0?a.value/c.value:0),[a,c]);return{state:{currentTime:a,duration:c,isPlaying:u,isPaused:C,isSeeking:d,volume:p,playbackRate:m,audioBuffer:g,peaks:f,url:v,zoom:b,scrollPosition:y,canPlay:S,isReady:E,progress:P,progressPercent:w},actions:{setCurrentTime:t=>{const e=Math.max(0,Math.min(c.value||1/0,t));a.set(e)},setDuration:t=>{c.set(Math.max(0,t))},setPlaying:t=>{u.set(t)},setSeeking:t=>{d.set(t)},setVolume:t=>{const e=Math.max(0,Math.min(1,t));p.set(e)},setPlaybackRate:t=>{const e=Math.max(.1,Math.min(16,t));m.set(e)},setAudioBuffer:t=>{g.set(t),t&&c.set(t.duration)},setPeaks:t=>{f.set(t)},setUrl:t=>{v.set(t)},setZoom:t=>{b.set(Math.max(0,t))},setScrollPosition:t=>{y.set(Math.max(0,t))}}}}({isPlaying:this.isPlayingSignal,currentTime:this.currentTimeSignal,duration:this.durationSignal,volume:this.volumeSignal,playbackRate:this.playbackRateSignal,isSeeking:this.seekingSignal});this.wavesurferState=i,this.wavesurferActions=n,this.timer=new S;const s=e?void 0:this.getMediaElement();this.renderer=new C(this.options,s),this.initPlayerEvents(),this.initRendererEvents(),this.initTimerEvents(),this.initReactiveState(),this.initPlugins();const r=this.options.url||this.getSrc()||"";Promise.resolve().then((()=>{this.emit("init");const{peaks:t,duration:e}=this.options;(r||t&&e)&&this.load(r,t,e).catch((()=>{}))}))}updateProgress(t=this.getCurrentTime()){return this.renderer.renderProgress(t/this.getDuration(),this.isPlaying()),t}initTimerEvents(){this.subscriptions.push(this.timer.on("tick",(()=>{if(!this.isSeeking()){const t=this.updateProgress();if(this.emit("timeupdate",t),this.emit("audioprocess",t),null!=this.stopAtPosition&&this.isPlaying()&&t>=this.stopAtPosition){const t=this.stopAtPosition;this.pause(),this.setTime(t)}}})))}initReactiveState(){this.reactiveCleanups.push(function(t,e){const i=[];i.push(c((()=>{const i=t.isPlaying.value;e.emit(i?"play":"pause")}),[t.isPlaying])),i.push(c((()=>{const i=t.currentTime.value;e.emit("timeupdate",i),t.isPlaying.value&&e.emit("audioprocess",i)}),[t.currentTime,t.isPlaying])),i.push(c((()=>{t.isSeeking.value&&e.emit("seeking",t.currentTime.value)}),[t.isSeeking,t.currentTime]));let n=!1;i.push(c((()=>{t.isReady.value&&!n&&(n=!0,e.emit("ready",t.duration.value))}),[t.isReady,t.duration])),i.push(c((()=>{null===t.audioBuffer.value&&(n=!1)}),[t.audioBuffer]));let s=!1;return i.push(c((()=>{const i=t.isPlaying.value,n=t.currentTime.value,r=t.duration.value,o=r>0&&n>=r;s&&!i&&o&&e.emit("finish"),s=i&&o}),[t.isPlaying,t.currentTime,t.duration])),i.push(c((()=>{const i=t.zoom.value;i>0&&e.emit("zoom",i)}),[t.zoom])),()=>{i.forEach((t=>t()))}}(this.wavesurferState,{emit:this.emit.bind(this)}))}initPlayerEvents(){this.isPlaying()&&(this.emit("play"),this.timer.start()),this.mediaSubscriptions.push(this.onMediaEvent("timeupdate",(()=>{const t=this.updateProgress();this.emit("timeupdate",t)})),this.onMediaEvent("play",(()=>{this.emit("play"),this.timer.start()})),this.onMediaEvent("pause",(()=>{this.emit("pause"),this.timer.stop(),this.stopAtPosition=null})),this.onMediaEvent("emptied",(()=>{this.timer.stop(),this.stopAtPosition=null})),this.onMediaEvent("ended",(()=>{this.emit("timeupdate",this.getDuration()),this.emit("finish"),this.stopAtPosition=null})),this.onMediaEvent("seeking",(()=>{this.emit("seeking",this.getCurrentTime())})),this.onMediaEvent("error",(()=>{var t;this.emit("error",null!==(t=this.getMediaElement().error)&&void 0!==t?t:new Error("Media error")),this.stopAtPosition=null})))}initRendererEvents(){this.subscriptions.push(this.renderer.on("click",((t,e)=>{this.options.interact&&(this.seekTo(t),this.emit("interaction",t*this.getDuration()),this.emit("click",t,e))})),this.renderer.on("dblclick",((t,e)=>{this.emit("dblclick",t,e)})),this.renderer.on("scroll",((t,e,i,n)=>{const s=this.getDuration();this.emit("scroll",t*s,e*s,i,n)})),this.renderer.on("render",(()=>{this.emit("redraw")})),this.renderer.on("rendered",(()=>{this.emit("redrawcomplete")})),this.renderer.on("dragstart",(t=>{this.emit("dragstart",t)})),this.renderer.on("dragend",(t=>{this.emit("dragend",t)})),this.renderer.on("resize",(()=>{this.emit("resize")})));{let t;const e=this.renderer.on("drag",(e=>{var i;if(!this.options.interact)return;this.renderer.renderProgress(e),clearTimeout(t);let n=0;const s=this.options.dragToSeek;this.isPlaying()?n=0:!0===s?n=200:s&&"object"==typeof s&&(n=null!==(i=s.debounceTime)&&void 0!==i?i:200),t=setTimeout((()=>{this.seekTo(e)}),n),this.emit("interaction",e*this.getDuration()),this.emit("drag",e)}));this.subscriptions.push((()=>{clearTimeout(t),e()}))}}initPlugins(){var t;(null===(t=this.options.plugins)||void 0===t?void 0:t.length)&&this.options.plugins.forEach((t=>{this.registerPlugin(t)}))}unsubscribePlayerEvents(){this.mediaSubscriptions.forEach((t=>t())),this.mediaSubscriptions=[]}setOptions(t){this.options=Object.assign({},this.options,t),t.duration&&!t.peaks&&(this.decodedData=i.createBuffer(this.exportPeaks(),t.duration)),t.peaks&&t.duration&&(this.decodedData=i.createBuffer(t.peaks,t.duration)),this.renderer.setOptions(this.options),t.audioRate&&this.setPlaybackRate(t.audioRate),null!=t.mediaControls&&(this.getMediaElement().controls=t.mediaControls)}registerPlugin(t){if(this.plugins.includes(t))return t;t._init(this),this.plugins.push(t);const e=t.once("destroy",(()=>{this.plugins=this.plugins.filter((e=>e!==t)),this.subscriptions=this.subscriptions.filter((t=>t!==e))}));return this.subscriptions.push(e),t}unregisterPlugin(t){this.plugins=this.plugins.filter((e=>e!==t)),t.destroy()}getWrapper(){return this.renderer.getWrapper()}getWidth(){return this.renderer.getWidth()}getScroll(){return this.renderer.getScroll()}setScroll(t){return this.renderer.setScroll(t)}setScrollTime(t){const e=t/this.getDuration();this.renderer.setScrollPercentage(e)}getActivePlugins(){return this.plugins}loadAudio(e,n,s,r){return t(this,void 0,void 0,(function*(){var t;const o=++this._loadVersion;if(this._isDestroyed=!1,this.emit("load",e),!this.options.media&&this.isPlaying()&&this.pause(),this.decodedData=null,this.stopAtPosition=null,null===(t=this.abortController)||void 0===t||t.abort(),this.abortController=null,!n&&!s){const t=this.options.fetchParams||{};window.AbortController&&!t.signal&&(this.abortController=new AbortController,t.signal=this.abortController.signal);const i=t=>this.emit("loading",t);if(n=yield a.fetchBlob(e,i,t),this._isDestroyed||o!==this._loadVersion)return;const s=this.options.blobMimeType;s&&(n=new Blob([n],{type:s}))}if(this._isDestroyed||o!==this._loadVersion)return;this.setSrc(e,n);const l=yield new Promise((t=>{const e=r||this.getDuration();e?t(e):this.mediaSubscriptions.push(this.onMediaEvent("loadedmetadata",(()=>t(this.getDuration())),{once:!0}))}));if(!this._isDestroyed&&o===this._loadVersion){if(!e&&!n){const t=this.getMediaElement();t instanceof E&&(t.duration=l)}if(s)this.decodedData=i.createBuffer(s,l||0);else if(n){const t=yield n.arrayBuffer();if(this._isDestroyed||o!==this._loadVersion)return;this.decodedData=yield i.decode(t,this.options.sampleRate)}this._isDestroyed||o!==this._loadVersion||(this.decodedData&&(this.emit("decode",this.getDuration()),this.renderer.render(this.decodedData)),this.emit("ready",this.getDuration()))}}))}load(e,i,n){return t(this,void 0,void 0,(function*(){try{return yield this.loadAudio(e,void 0,i,n)}catch(t){throw this.emit("error",t),t}}))}loadBlob(e,i,n){return t(this,void 0,void 0,(function*(){try{return yield this.loadAudio("",e,i,n)}catch(t){throw this.emit("error",t),t}}))}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(t),this.emit("zoom",t)}getDecodedData(){return this.decodedData}exportPeaks({channels:t=2,maxLength:e=8e3,precision:i=1e4}={}){if(!this.decodedData)throw new Error("The audio has not been decoded yet");const n=Math.min(t,this.decodedData.numberOfChannels),s=[];for(let t=0;t<n;t++){const n=this.decodedData.getChannelData(t),r=[],o=n.length/e;for(let t=0;t<e;t++){const e=n.slice(Math.floor(t*o),Math.ceil((t+1)*o));let s=0;for(let t=0;t<e.length;t++){const i=e[t];Math.abs(i)>Math.abs(s)&&(s=i)}r.push(Math.round(s*i)/i)}s.push(r)}return s}getDuration(){let t=super.getDuration()||0;return 0!==t&&t!==1/0||!this.decodedData||(t=this.decodedData.duration),t}toggleInteraction(t){this.options.interact=t}setTime(t){this.stopAtPosition=null,super.setTime(t),this.updateProgress(t),this.emit("timeupdate",t)}seekTo(t){const e=this.getDuration()*t;this.setTime(e)}play(e,i){const n=Object.create(null,{play:{get:()=>super.play}});return t(this,void 0,void 0,(function*(){null!=e&&this.setTime(e);const t=yield n.play.call(this);return null!=i&&(this.media instanceof E?this.media.stopAt(i):this.stopAtPosition=i),t}))}playPause(){return t(this,void 0,void 0,(function*(){return this.isPlaying()?this.pause():this.play()}))}stop(){this.pause(),this.setTime(0)}skip(t){this.setTime(this.getCurrentTime()+t)}empty(){this.load("",[[0]],.001)}setMediaElement(t){this.unsubscribePlayerEvents(),super.setMediaElement(t),this.initPlayerEvents()}exportImage(){return t(this,arguments,void 0,(function*(t="image/png",e=1,i="dataURL"){return this.renderer.exportImage(t,e,i)}))}destroy(){var t;this._isDestroyed=!0,this.emit("destroy"),null===(t=this.abortController)||void 0===t||t.abort(),this.plugins.forEach((t=>t.destroy())),this.subscriptions.forEach((t=>t())),this.unsubscribePlayerEvents(),this.reactiveCleanups.forEach((t=>t())),this.reactiveCleanups=[],this.timer.destroy(),this.renderer.destroy(),super.destroy()}}w.BasePlugin=class extends e{constructor(t){super(),this.subscriptions=[],this.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}},w.dom=o;
@@ -5087,18 +5256,86 @@ function getBufferedProgress(bufferedRange, durationSec) {
   return clampTo0And1(bufferedRange.end(bufferedRange.length - 1) / durationSec);
 }
 
+/** Played bars: rest token on desktop, hover-played (brightest) on tape. Tape never uses hover or buffer fills. */
+function getPlayedWaveformColor(isTape = false) {
+  return isTape ? WAVEFORM_COLOR_HOVER_PLAYED : WAVEFORM_COLOR_PLAYED;
+}
+function rangeFills({
+  buffer,
+  hover,
+  rangeEnd,
+  rangeStart
+}) {
+  const start = clampTo0And1(rangeStart);
+  const end = clampTo0And1(rangeEnd);
+  const hoverInside = hover != null && hover > start && hover < end;
+  const outsideAfter = [{
+    color: WAVEFORM_COLOR_UNPLAYED,
+    end: Math.max(end, buffer),
+    start: end
+  }, {
+    color: WAVEFORM_COLOR_BUFFER,
+    end: 1,
+    start: Math.max(end, buffer)
+  }];
+  const ranges = hoverInside ? [{
+    color: WAVEFORM_COLOR_UNPLAYED,
+    end: start,
+    start: 0
+  }, {
+    color: WAVEFORM_COLOR_HOVER_PLAYED,
+    end: hover,
+    start
+  }, {
+    color: WAVEFORM_COLOR_HOVER_AREA,
+    end,
+    start: hover
+  }, ...outsideAfter] : [{
+    color: WAVEFORM_COLOR_UNPLAYED,
+    end: start,
+    start: 0
+  }, {
+    color: WAVEFORM_COLOR_PLAYED,
+    end,
+    start
+  }, ...outsideAfter];
+  const fill = gradientStopsFromColorRanges(ranges);
+  return {
+    progressColor: fill,
+    waveColor: fill
+  };
+}
+
 /**
  * progressColor paints left of the playhead (clipped by wavesurfer).
  * waveColor paints right of the playhead, including buffered vs not-yet-buffered.
+ * An open comment range replaces the played/unplayed split with in-range / out-of-range.
  */
 function getWaveformFills({
   bufferProgress,
-  hoverProgress
+  hoverProgress,
+  isTape = false,
+  rangeProgress
 }) {
   const buffer = clampTo0And1(bufferProgress);
+  const playedColor = getPlayedWaveformColor(isTape);
+  if (isTape) {
+    return {
+      progressColor: playedColor,
+      waveColor: WAVEFORM_COLOR_UNPLAYED
+    };
+  }
+  if (rangeProgress && rangeProgress.end > rangeProgress.start) {
+    return rangeFills({
+      buffer,
+      hover: hoverProgress == null ? null : clampTo0And1(hoverProgress),
+      rangeEnd: rangeProgress.end,
+      rangeStart: rangeProgress.start
+    });
+  }
   if (hoverProgress == null) {
     return {
-      progressColor: WAVEFORM_COLOR_PLAYED,
+      progressColor: playedColor,
       waveColor: gradientStopsFromColorRanges([{
         color: WAVEFORM_COLOR_UNPLAYED,
         end: buffer,
@@ -5259,6 +5496,200 @@ function tintWaveformTiles({
     });
   });
 }
+;// ./src/lib/viewers/media/waveform/range.ts
+
+
+function clampToRange(value, min, max) {
+  if (!Number.isFinite(value)) {
+    return min;
+  }
+  return Math.min(max, Math.max(min, value));
+}
+
+/** Integer ms in `[0, durationMs]`. */
+function clampTimeMs(timeMs, durationMs) {
+  const duration = Math.max(0, durationMs);
+  return Math.round(clampToRange(timeMs, 0, duration));
+}
+function durationMsFromSec(durationSec) {
+  if (!Number.isFinite(durationSec) || durationSec <= 0) {
+    return 0;
+  }
+  return Math.round(durationSec * 1000);
+}
+function isRangeCollapsed(range) {
+  return !range || range.endMs == null || range.endMs <= range.startMs;
+}
+
+/** Clamp both edges onto the file. Collapsed drafts stay a point. */
+function resolveRange(range, durationMs) {
+  const startMs = clampTimeMs(range.startMs, durationMs);
+  if (range.endMs == null) {
+    return {
+      endMs: startMs,
+      startMs
+    };
+  }
+  const endMs = clampTimeMs(range.endMs, durationMs);
+  if (endMs <= startMs) {
+    return {
+      endMs: startMs,
+      startMs
+    };
+  }
+  return {
+    endMs,
+    startMs
+  };
+}
+
+/**
+ * Which handle should receive this pointer. Overlapping hit areas (collapsed or
+ * a span narrower than the 24px target) split at the midpoint so each edge stays reachable.
+ */
+function pickRangeHandle({
+  endX,
+  pointerX,
+  startX
+}) {
+  const mid = (startX + endX) / 2;
+  if (!Number.isFinite(mid)) {
+    return 'end';
+  }
+  return pointerX < mid ? 'start' : 'end';
+}
+
+/** Screen x of a handle. Collapsed drafts sit 1px left/right of the playhead, not on it. */
+function visualRangeHandlePx({
+  handle,
+  range,
+  viewport
+}) {
+  const timeSec = (handle === 'start' ? range.startMs : range.endMs) / 1000;
+  const x = positionPxFromTime(timeSec, viewport);
+  if (range.startMs !== range.endMs) {
+    return x;
+  }
+  return handle === 'start' ? x - constants/* WAVEFORM_RANGE_COLLAPSED_OFFSET_PX */.BG : x + constants/* WAVEFORM_RANGE_COLLAPSED_OFFSET_PX */.BG;
+}
+
+/** True when the pointer is over the range rectangle or its handle hit targets. */
+function isPointerOverRange({
+  pointerX,
+  range,
+  viewport
+}) {
+  const resolved = resolveRange(range, durationMsFromSec(viewport.durationSec));
+  const startX = visualRangeHandlePx({
+    handle: 'start',
+    range: resolved,
+    viewport
+  });
+  const endX = visualRangeHandlePx({
+    handle: 'end',
+    range: resolved,
+    viewport
+  });
+  const pad = constants/* WAVEFORM_RANGE_HIT_AREA_PX */.r0 / 2;
+  return pointerX >= Math.min(startX, endX) - pad && pointerX <= Math.max(startX, endX) + pad;
+}
+
+/** Snap to the playhead when the pointer is within `WAVEFORM_RANGE_SNAP_PX`. */
+function snapTimeMs({
+  pixelsPerSecond,
+  playheadMs,
+  timeMs
+}) {
+  if (!(pixelsPerSecond > 0) || !Number.isFinite(playheadMs)) {
+    return timeMs;
+  }
+  const deltaPx = Math.abs(timeMs - playheadMs) / 1000 * pixelsPerSecond;
+  if (deltaPx <= constants/* WAVEFORM_RANGE_SNAP_PX */.IQ) {
+    return Math.round(playheadMs);
+  }
+  return timeMs;
+}
+
+/**
+ * Move one edge. Crossing the other edge swaps roles so a collapsed pair can
+ * expand in either direction. Enforces `[0, duration]` and the minimum span
+ * once the drag has actually opened a range. An already-open range stays a
+ * span — snapping one edge onto the other clamps to the minimum duration.
+ */
+function dragRangeHandle({
+  durationMs,
+  handle,
+  pointerMs,
+  range
+}) {
+  const duration = Math.max(0, durationMs);
+  const pointer = clampTimeMs(pointerMs, duration);
+  let {
+    startMs,
+    endMs
+  } = range;
+  let nextHandle = handle;
+  if (handle === 'start') {
+    if (pointer > endMs) {
+      startMs = endMs;
+      endMs = pointer;
+      nextHandle = 'end';
+    } else {
+      startMs = pointer;
+    }
+  } else if (pointer < startMs) {
+    endMs = startMs;
+    startMs = pointer;
+    nextHandle = 'start';
+  } else {
+    endMs = pointer;
+  }
+  const wasOpen = range.startMs !== range.endMs;
+  const opened = wasOpen || startMs !== endMs;
+  if (opened && endMs - startMs < constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX) {
+    if (nextHandle === 'end') {
+      endMs = clampTimeMs(startMs + constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX, duration);
+      if (endMs - startMs < constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX) {
+        startMs = clampTimeMs(endMs - constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX, duration);
+      }
+    } else {
+      startMs = clampTimeMs(endMs - constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX, duration);
+      if (endMs - startMs < constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX) {
+        endMs = clampTimeMs(startMs + constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX, duration);
+      }
+    }
+  }
+  return {
+    handle: nextHandle,
+    range: {
+      endMs,
+      startMs
+    }
+  };
+}
+function pointerTimeMs(pointerX, viewport) {
+  return Math.round(timeFromPositionPx(pointerX, viewport) * 1000);
+}
+
+/** Sidebar payload after mouseup. Null when the draft is still a single timestamp. */
+function commitRangeChange(range) {
+  if (range.endMs <= range.startMs) {
+    return null;
+  }
+  return {
+    endMs: range.endMs,
+    startMs: range.startMs
+  };
+}
+function rangeProgress(range, durationMs) {
+  if (!(durationMs > 0) || range.endMs <= range.startMs) {
+    return null;
+  }
+  return {
+    end: range.endMs / durationMs,
+    start: range.startMs / durationMs
+  };
+}
 ;// ./src/lib/viewers/media/waveform/usePlayheadCamera.ts
 
 
@@ -5275,6 +5706,7 @@ function prefersReducedMotion() {
  * every frame. WaveformView owns WaveSurfer, zoom, and the media rAF loop.
  */
 function usePlayheadCamera({
+  cameraMode = 'desktop',
   mediaElRef,
   onViewportCommit,
   playheadRef,
@@ -5283,6 +5715,8 @@ function usePlayheadCamera({
 }) {
   const onViewportCommitRef = (0,external_react_.useRef)(onViewportCommit);
   onViewportCommitRef.current = onViewportCommit;
+  const cameraModeRef = (0,external_react_.useRef)(cameraMode);
+  cameraModeRef.current = cameraMode;
   const programmaticScrollRef = (0,external_react_.useRef)(false);
   const jumpAnimationRef = (0,external_react_.useRef)(0);
   const lastCameraScrollRef = (0,external_react_.useRef)(null);
@@ -5293,6 +5727,8 @@ function usePlayheadCamera({
   const scrollSettleTimerRef = (0,external_react_.useRef)(0);
   const applyRef = (0,external_react_.useRef)(null);
   const isFollowPinned = (0,external_react_.useCallback)(() => isFollowPinnedRef.current, []);
+  const isUserPanning = (0,external_react_.useCallback)(() => userIsScrollingRef.current, []);
+  const isTape = (0,external_react_.useCallback)(() => cameraModeRef.current === 'tape', []);
   const cancelJump = (0,external_react_.useCallback)(() => {
     if (!jumpAnimationRef.current) {
       return;
@@ -5321,15 +5757,22 @@ function usePlayheadCamera({
   const onSeek = (0,external_react_.useCallback)(timeSec => {
     mediaTimeRef.current = timeSec;
     cancelJump();
-    clearFollowPin();
-  }, [cancelJump, clearFollowPin]);
+    if (!isTape()) {
+      clearFollowPin();
+    }
+  }, [cancelJump, clearFollowPin, isTape]);
 
   /** Unpin and hold follow so zoom setScroll (slider center or pinch origin) is not stolen. */
   const onZoom = (0,external_react_.useCallback)(() => {
     cancelJump();
+    if (isTape()) {
+      isFollowPinnedRef.current = true;
+      holdFollowUntilInsetRef.current = false;
+      return;
+    }
     isFollowPinnedRef.current = false;
     holdFollowUntilInsetRef.current = true;
-  }, [cancelJump]);
+  }, [cancelJump, isTape]);
   const applyScrollLeft = (0,external_react_.useCallback)((scrollLeftPx, shouldCommitState) => {
     const wavesurfer = wavesurferRef.current;
     if (!wavesurfer || !wavesurfer.setScroll) {
@@ -5357,8 +5800,8 @@ function usePlayheadCamera({
     if (!playhead || !isPinned || !(viewport.widthPx > 0)) {
       return;
     }
-    playhead.style.left = getPinnedPlayheadLeft(viewport.widthPx);
-  }, []);
+    playhead.style.left = isTape() ? getTapePinnedPlayheadLeft() : getPinnedPlayheadLeft(viewport.widthPx);
+  }, [isTape]);
   const apply = (0,external_react_.useCallback)((timeSec, playJustStarted = false) => {
     mediaTimeRef.current = timeSec;
     const wavesurfer = wavesurferRef.current;
@@ -5366,7 +5809,7 @@ function usePlayheadCamera({
     if (!wavesurfer) {
       return;
     }
-    if (viewport.zoomLevel <= constants/* WAVEFORM_ZOOM_MIN */.LW) {
+    if (!isTape() && viewport.zoomLevel <= constants/* WAVEFORM_ZOOM_MIN */.LW) {
       clearFollowPin();
       return;
     }
@@ -5378,12 +5821,13 @@ function usePlayheadCamera({
     }
     const liveViewport = getViewportAtScroll(viewport, getScrollLeft(wavesurfer, viewport.scrollLeftPx));
     const action = getPlayheadCameraAction({
+      cameraMode: cameraModeRef.current,
       isPlaying: true,
       playJustStarted,
       timeSec,
       viewport: liveViewport
     });
-    if (holdFollowUntilInsetRef.current && !playJustStarted) {
+    if (!isTape() && holdFollowUntilInsetRef.current && !playJustStarted) {
       if (action.type !== 'none') {
         return;
       }
@@ -5415,6 +5859,7 @@ function usePlayheadCamera({
     const tick = now => {
       const t = Math.min(1, (now - start) / constants/* WAVEFORM_PLAYHEAD_JUMP_MS */.Bq);
       const liveAction = getPlayheadCameraAction({
+        cameraMode: cameraModeRef.current,
         isPlaying: true,
         playJustStarted: true,
         timeSec: mediaTimeRef.current,
@@ -5431,7 +5876,7 @@ function usePlayheadCamera({
       apply(mediaTimeRef.current, false);
     };
     jumpAnimationRef.current = window.requestAnimationFrame(tick);
-  }, [applyScrollLeft, cancelJump, clearFollowPin, pinFollowPlayhead, playheadRef, viewportRef, wavesurferRef]);
+  }, [applyScrollLeft, cancelJump, clearFollowPin, isTape, pinFollowPlayhead, playheadRef, viewportRef, wavesurferRef]);
   applyRef.current = apply;
 
   /**
@@ -5454,9 +5899,12 @@ function usePlayheadCamera({
     }
     releaseUserPanHold();
     cancelJump();
-    isFollowPinnedRef.current = false;
+    if (!isTape()) {
+      isFollowPinnedRef.current = false;
+    }
     const liveViewport = getViewportAtScroll(viewportRef.current, getScrollLeft(wavesurfer, viewportRef.current.scrollLeftPx));
     const action = getSeekCameraAction({
+      cameraMode: cameraModeRef.current,
       timeSec,
       viewport: liveViewport
     });
@@ -5476,7 +5924,7 @@ function usePlayheadCamera({
       applyScrollLeft(from + (to - from) * (1 - (1 - t) * (1 - t)), false);
       const playhead = playheadRef.current;
       if (playhead) {
-        playhead.style.left = timeLeftPercent(mediaTimeRef.current, viewportRef.current.durationSec, viewportRef.current);
+        playhead.style.left = isTape() ? getTapePinnedPlayheadLeft() : timeLeftPercent(mediaTimeRef.current, viewportRef.current.durationSec, viewportRef.current);
       }
       if (t < 1) {
         jumpAnimationRef.current = window.requestAnimationFrame(tick);
@@ -5486,7 +5934,7 @@ function usePlayheadCamera({
       applyScrollLeft(to, true);
     };
     jumpAnimationRef.current = window.requestAnimationFrame(tick);
-  }, [applyScrollLeft, cancelJump, playheadRef, releaseUserPanHold, viewportRef, wavesurferRef]);
+  }, [applyScrollLeft, cancelJump, isTape, playheadRef, releaseUserPanHold, viewportRef, wavesurferRef]);
   const handleScroll = (0,external_react_.useCallback)(onUserPan => {
     const wavesurfer = wavesurferRef.current;
     if (!wavesurfer) {
@@ -5498,8 +5946,28 @@ function usePlayheadCamera({
       return;
     }
     viewportRef.current = getViewportAtScroll(viewportRef.current, scrollLeftPx);
-    const timeSec = readMediaTime();
     const playhead = playheadRef.current;
+    if (isTape()) {
+      if (playhead) {
+        playhead.style.left = getTapePinnedPlayheadLeft();
+      }
+      const pinTimeSec = Math.min(viewportRef.current.durationSec, Math.max(0, timeFromPositionPx(viewportRef.current.widthPx / 2, viewportRef.current)));
+      userIsScrollingRef.current = true;
+      window.clearTimeout(scrollSettleTimerRef.current);
+      scrollSettleTimerRef.current = window.setTimeout(() => {
+        userIsScrollingRef.current = false;
+        scrollSettleTimerRef.current = 0;
+        if (!mediaElRef.current || mediaElRef.current.paused) {
+          return;
+        }
+        applyRef.current?.(readMediaTime(), false);
+      }, constants/* WAVEFORM_FOLLOW_SCROLL_SETTLE_MS */.Zs);
+      cancelJump();
+      programmaticScrollRef.current = false;
+      onUserPan(pinTimeSec);
+      return;
+    }
+    const timeSec = readMediaTime();
     if (playhead) {
       playhead.style.left = timeLeftPercent(timeSec, viewportRef.current.durationSec, viewportRef.current);
     }
@@ -5518,7 +5986,7 @@ function usePlayheadCamera({
     isFollowPinnedRef.current = false;
     programmaticScrollRef.current = false;
     onUserPan(timeSec);
-  }, [cancelJump, isUserPan, mediaElRef, playheadRef, readMediaTime, viewportRef, wavesurferRef]);
+  }, [cancelJump, isTape, isUserPan, mediaElRef, playheadRef, readMediaTime, viewportRef, wavesurferRef]);
   (0,external_react_.useEffect)(() => () => {
     releaseUserPanHold();
     cancelJump();
@@ -5530,12 +5998,314 @@ function usePlayheadCamera({
     clearFollowPin,
     handleScroll,
     isFollowPinned,
+    isUserPanning,
     onSeek,
     onZoom,
     releaseUserPanHold,
     seekTo
   };
 }
+;// ./src/lib/viewers/media/waveform/WaveformRangeSelection.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/media/waveform/WaveformRangeSelection.tsx
+
+
+
+
+
+
+function offsetLeftCss(base, offsetPx) {
+  if (!offsetPx) {
+    return base;
+  }
+  const op = offsetPx < 0 ? '-' : '+';
+  return `calc(${base} ${op} ${Math.abs(offsetPx)}px)`;
+}
+function applyHandleLeft(el, timeSec, durationSec, viewport, collapsedOffsetPx = 0) {
+  if (!el) {
+    return;
+  }
+  el.style.left = offsetLeftCss(timeLeftPercent(timeSec, durationSec, viewport), collapsedOffsetPx);
+}
+function applyRegion(el, startSec, endSec, durationSec, viewport, collapsed) {
+  if (!el) {
+    return;
+  }
+  const start = timeLeftPercent(startSec, durationSec, viewport);
+  const halfLine = constants/* WAVEFORM_RANGE_HANDLE_LINE_PX */.h1 / 2;
+  if (collapsed) {
+    const extentPx = constants/* WAVEFORM_RANGE_COLLAPSED_OFFSET_PX */.BG + halfLine;
+    el.style.left = offsetLeftCss(start, -extentPx);
+    el.style.width = `${extentPx * 2}px`;
+    return;
+  }
+  const end = timeLeftPercent(endSec, durationSec, viewport);
+  el.style.left = offsetLeftCss(start, -halfLine);
+  el.style.width = `calc(${end} - ${start} + ${constants/* WAVEFORM_RANGE_HANDLE_LINE_PX */.h1}px)`;
+}
+const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(function WaveformRangeSelection({
+  currentTimeSec = 0,
+  durationSec,
+  getPlayheadSec,
+  interactive = true,
+  isHighlighted = false,
+  keepHighlight = true,
+  onDragChange,
+  onPreviewChange,
+  onRangeChange,
+  range,
+  viewport
+}, ref) {
+  const rootRef = (0,external_react_.useRef)(null);
+  const regionRef = (0,external_react_.useRef)(null);
+  const startHandleRef = (0,external_react_.useRef)(null);
+  const endHandleRef = (0,external_react_.useRef)(null);
+  const tooltipRef = (0,external_react_.useRef)(null);
+  const dragRef = (0,external_react_.useRef)(null);
+  const rangeRef = (0,external_react_.useRef)(range);
+  const displayedRef = (0,external_react_.useRef)(resolveRange(range, durationMsFromSec(durationSec)));
+  const viewportRef = (0,external_react_.useRef)(viewport);
+  const durationSecRef = (0,external_react_.useRef)(durationSec);
+  const onDragChangeRef = (0,external_react_.useRef)(onDragChange);
+  const onPreviewChangeRef = (0,external_react_.useRef)(onPreviewChange);
+  const onRangeChangeRef = (0,external_react_.useRef)(onRangeChange);
+  const getPlayheadSecRef = (0,external_react_.useRef)(getPlayheadSec);
+  const [dragRange, setDragRange] = (0,external_react_.useState)(null);
+  const [activeHandle, setActiveHandle] = (0,external_react_.useState)(null);
+  const activeHandleRef = (0,external_react_.useRef)(null);
+  rangeRef.current = range;
+  durationSecRef.current = durationSec;
+  onDragChangeRef.current = onDragChange;
+  onPreviewChangeRef.current = onPreviewChange;
+  onRangeChangeRef.current = onRangeChange;
+  getPlayheadSecRef.current = getPlayheadSec;
+  activeHandleRef.current = activeHandle;
+  const durationMs = durationMsFromSec(durationSec);
+  const displayed = dragRange ?? resolveRange(range, durationMs);
+  displayedRef.current = displayed;
+  const syncPositions = (0,external_react_.useCallback)((next, nextViewport, nextDurationSec) => {
+    displayedRef.current = next;
+    const collapsed = next.startMs === next.endMs;
+    applyRegion(regionRef.current, next.startMs / 1000, next.endMs / 1000, nextDurationSec, nextViewport, collapsed);
+    applyHandleLeft(startHandleRef.current, next.startMs / 1000, nextDurationSec, nextViewport, collapsed ? -constants/* WAVEFORM_RANGE_COLLAPSED_OFFSET_PX */.BG : 0);
+    applyHandleLeft(endHandleRef.current, next.endMs / 1000, nextDurationSec, nextViewport, collapsed ? constants/* WAVEFORM_RANGE_COLLAPSED_OFFSET_PX */.BG : 0);
+    const tooltip = tooltipRef.current;
+    if (tooltip) {
+      const tooltipHandle = activeHandleRef.current ?? 'end';
+      const tooltipMs = tooltipHandle === 'start' ? next.startMs : next.endMs;
+      tooltip.style.left = timeLeftPercent(tooltipMs / 1000, nextDurationSec, nextViewport);
+    }
+  }, []);
+  (0,external_react_.useImperativeHandle)(ref, () => ({
+    applyViewport: nextViewport => {
+      viewportRef.current = nextViewport;
+      syncPositions(displayedRef.current, nextViewport, durationSecRef.current);
+    }
+  }), [syncPositions]);
+  (0,external_react_.useLayoutEffect)(() => {
+    syncPositions(displayedRef.current, viewportRef.current, durationSec);
+  }, [activeHandle, displayed.endMs, displayed.startMs, durationSec, syncPositions]);
+  (0,external_react_.useLayoutEffect)(() => {
+    const next = createWaveformViewport({
+      durationSec: viewport.durationSec,
+      heightPx: viewport.heightPx,
+      maxZoom: viewport.maxZoom,
+      scrollLeftPx: viewportRef.current.scrollLeftPx,
+      widthPx: viewport.widthPx,
+      zoomLevel: viewport.zoomLevel
+    });
+    viewportRef.current = next;
+    syncPositions(displayedRef.current, next, durationSecRef.current);
+  }, [syncPositions, viewport.durationSec, viewport.heightPx, viewport.maxZoom, viewport.widthPx, viewport.zoomLevel]);
+  const endDrag = (0,external_react_.useCallback)(event => {
+    const drag = dragRef.current;
+    if (!drag || event.pointerId && drag.pointerId !== event.pointerId) {
+      return;
+    }
+    [startHandleRef.current, endHandleRef.current].forEach(handleEl => {
+      if (handleEl && handleEl.hasPointerCapture(event.pointerId)) {
+        handleEl.releasePointerCapture(event.pointerId);
+      }
+    });
+    dragRef.current = null;
+    setActiveHandle(null);
+    setDragRange(null);
+    onDragChangeRef.current?.(false);
+    const didChange = drag.range.startMs !== drag.originRange.startMs || drag.range.endMs !== drag.originRange.endMs;
+    if (!didChange) {
+      return;
+    }
+    const committed = commitRangeChange(drag.range);
+    if (committed) {
+      onRangeChangeRef.current?.(committed);
+    }
+  }, []);
+  const moveDrag = (0,external_react_.useCallback)(event => {
+    const drag = dragRef.current;
+    if (!drag || event.pointerId && drag.pointerId !== event.pointerId) {
+      return;
+    }
+    const root = rootRef.current;
+    if (!root) {
+      return;
+    }
+    const rect = root.getBoundingClientRect();
+    const pointerX = event.clientX - rect.left;
+    const vp = viewportRef.current;
+    const duration = durationMsFromSec(durationSecRef.current);
+    const playheadSec = getPlayheadSecRef.current?.() ?? currentTimeSec;
+    const pointerMs = snapTimeMs({
+      pixelsPerSecond: vp.pixelsPerSecond,
+      playheadMs: playheadSec * 1000,
+      timeMs: pointerTimeMs(pointerX, vp)
+    });
+    if (drag.originMs === drag.range.startMs && drag.originMs === drag.range.endMs && pointerMs === drag.originMs) {
+      return;
+    }
+    const next = dragRangeHandle({
+      durationMs: duration,
+      handle: drag.handle,
+      pointerMs,
+      range: {
+        endMs: drag.range.endMs,
+        startMs: drag.range.startMs
+      }
+    });
+    drag.handle = next.handle;
+    drag.range = next.range;
+    setActiveHandle(next.handle);
+    setDragRange(next.range);
+    syncPositions(next.range, vp, durationSecRef.current);
+    onPreviewChangeRef.current?.({
+      endMs: next.range.endMs,
+      startMs: next.range.startMs
+    });
+  }, [currentTimeSec, syncPositions]);
+  const startDrag = (0,external_react_.useCallback)((handle, event) => {
+    if (!interactive || event.button > 1 || event.ctrlKey || event.metaKey) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const resolved = resolveRange(rangeRef.current, durationMsFromSec(durationSecRef.current));
+    dragRef.current = {
+      handle,
+      originMs: handle === 'start' ? resolved.startMs : resolved.endMs,
+      originRange: {
+        endMs: resolved.endMs,
+        startMs: resolved.startMs
+      },
+      pointerId: event.pointerId,
+      range: resolved
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setActiveHandle(handle);
+    setDragRange(resolved);
+    onDragChangeRef.current?.(true);
+    onPreviewChangeRef.current?.({
+      endMs: isRangeCollapsed(rangeRef.current) ? null : resolved.endMs,
+      startMs: resolved.startMs
+    });
+  }, [interactive]);
+  const onHandlePointerDown = (0,external_react_.useCallback)(event => {
+    const root = rootRef.current;
+    if (!root) {
+      return;
+    }
+    const rect = root.getBoundingClientRect();
+    const pointerX = event.clientX - rect.left;
+    const vp = viewportRef.current;
+    const resolved = resolveRange(rangeRef.current, durationMsFromSec(durationSecRef.current));
+    const handle = pickRangeHandle({
+      endX: visualRangeHandlePx({
+        handle: 'end',
+        range: resolved,
+        viewport: vp
+      }),
+      pointerX,
+      startX: visualRangeHandlePx({
+        handle: 'start',
+        range: resolved,
+        viewport: vp
+      })
+    });
+    startDrag(handle, event);
+  }, [startDrag]);
+  (0,external_react_.useEffect)(() => {
+    const onMove = event => {
+      if (!dragRef.current) {
+        return;
+      }
+      event.preventDefault();
+      moveDrag(event);
+    };
+    const onUp = event => {
+      if (!dragRef.current) {
+        return;
+      }
+      endDrag(event);
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+    return () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+    };
+  }, [endDrag, moveDrag]);
+  (0,external_react_.useEffect)(() => {
+    return () => {
+      if (!dragRef.current) {
+        return;
+      }
+      dragRef.current = null;
+      onDragChangeRef.current?.(false);
+    };
+  }, []);
+  if (!(durationSec > 0) || !(durationMs >= 0)) {
+    return null;
+  }
+  const tooltipHandle = activeHandle ?? 'end';
+  const tooltipMs = tooltipHandle === 'start' ? displayed.startMs : displayed.endMs;
+  const collapsed = displayed.startMs === displayed.endMs;
+  const highlight = isHighlighted || collapsed;
+  return /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: rootRef,
+    className: `bp-WaveformRange${keepHighlight ? ' bp-WaveformRange--persist' : ''}${highlight ? ' bp-WaveformRange--highlight' : ''}`,
+    "data-collapsed": collapsed ? 'true' : 'false',
+    "data-highlighted": highlight ? 'true' : 'false',
+    "data-testid": "bp-waveform-range"
+  }, /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: regionRef,
+    className: "bp-WaveformRange-region",
+    "data-testid": "bp-waveform-range-region"
+  }), /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: startHandleRef,
+    className: `bp-WaveformRange-handle bp-WaveformRange-handle--start${activeHandle === 'start' ? ' bp-WaveformRange-handle--dragging' : ''}`,
+    "data-testid": "bp-waveform-range-handle-start",
+    onMouseMove: event => event.stopPropagation(),
+    onPointerDown: onHandlePointerDown
+  }, /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-WaveformRange-handleGrip"
+  })), /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: endHandleRef,
+    className: `bp-WaveformRange-handle bp-WaveformRange-handle--end${activeHandle === 'end' ? ' bp-WaveformRange-handle--dragging' : ''}`,
+    "data-testid": "bp-waveform-range-handle-end",
+    onMouseMove: event => event.stopPropagation(),
+    onPointerDown: onHandlePointerDown
+  }, /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-WaveformRange-handleGrip"
+  })), activeHandle && /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: tooltipRef,
+    className: "bp-WaveformRange-tooltip",
+    "data-testid": "bp-waveform-range-tooltip"
+  }, /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-WaveformRange-tooltipTime"
+  }, formatTime(tooltipMs / 1000))));
+});
+/* harmony default export */ const waveform_WaveformRangeSelection = (/*#__PURE__*/external_react_["default"].memo(WaveformRangeSelection));
 ;// ./src/lib/viewers/media/waveform/WaveformView.scss
 // extracted by mini-css-extract-plugin
 
@@ -5555,6 +6325,10 @@ function WaveformView_toPrimitive(t, r) { if ("object" != typeof t || !t) return
 
 
 
+
+
+
+
 /** Pointer X in the view and the media time under it; zoom keeps this point fixed. */
 
 /** CSS width × devicePixelRatio, for canvas gradient fills. */
@@ -5584,6 +6358,25 @@ function disableScrollOverscroll(container) {
   }
 }
 
+/** Half-view margins so t=0 and duration can sit under the center pin. */
+function applyWaveformGutters(wavesurfer, gutterPx) {
+  const wrapper = wavesurfer.getWrapper ? wavesurfer.getWrapper() : null;
+  if (!wrapper || !wrapper.style) {
+    return;
+  }
+  const pad = gutterPx > 0 ? `${gutterPx}px` : '';
+  wrapper.style.marginLeft = pad;
+  wrapper.style.marginRight = pad;
+  // WaveSurfer sets overflow-x:hidden when duration * minPxPerSec <= view width
+  // (tape 1x). Gutters live in these margins, so the scroller must stay pan-able.
+  const scroll = wrapper.parentElement;
+  if (scroll && scroll.style) {
+    const scrollStyle = scroll.style;
+    scrollStyle.overflowX = gutterPx > 0 ? 'auto' : '';
+    scrollStyle.scrollbarWidth = gutterPx > 0 ? 'none' : '';
+  }
+}
+
 /** Tint WaveSurfer's zoomed tiles with played/unplayed/hover/buffer colors. */
 function tintZoomedWaveform(wavesurfer, fills, replaceSnapshot = false) {
   const wrapper = wavesurfer.getWrapper ? wavesurfer.getWrapper() : null;
@@ -5597,6 +6390,15 @@ function tintZoomedWaveform(wavesurfer, fills, replaceSnapshot = false) {
     totalWidthCss: wrapper.clientWidth
   });
 }
+
+/** Touch (and the compatibility mouse events Chrome sends after a tap) must not drive hover fills. */
+function isTouchHoverInput(event) {
+  if (event.pointerType === 'touch') {
+    return true;
+  }
+  const native = event.nativeEvent;
+  return !!native.sourceCapabilities?.firesTouchEvents;
+}
 function touchDistance(touches) {
   if (touches.length < 2) {
     return 0;
@@ -5627,56 +6429,87 @@ function zoomOriginAtPointer(pointerX, wavesurfer, durationSec, fallbackWidth) {
  */
 function WaveformView({
   bufferedRange,
+  cameraMode = 'desktop',
   currentTime = 0,
   durationSec,
   height = constants/* WAVEFORM_HEIGHT */.oN,
   interactive = true,
+  isPlaying = false,
   mediaEl,
+  onPlayPause,
+  onRangeChange,
+  onRangeDragChange,
   onSeek,
   onViewportChange,
   onZoomChange,
   peaks,
+  range = null,
   zoomLevel: zoomLevelProp
 }) {
   // DOM / WaveSurfer
-  const containerRef = (0,external_react_.useRef)(null);
-  const trackRef = (0,external_react_.useRef)(null);
-  const playheadRef = (0,external_react_.useRef)(null);
-  const playheadAnimationRef = (0,external_react_.useRef)(0);
-  const wavesurferRef = (0,external_react_.useRef)(null);
+  const containerRef = (0,external_react_.useRef)(null); // WaveSurfer canvas host
+  const playheadAnimationRef = (0,external_react_.useRef)(0); // animation frame id while the playhead follows playback
+  const playheadRef = (0,external_react_.useRef)(null); // playhead element the camera positions
+  const trackRef = (0,external_react_.useRef)(null); // hover / tap target around the canvas
+  const wavesurferRef = (0,external_react_.useRef)(null); // WaveSurfer instance
+  const rangeLayerRef = (0,external_react_.useRef)(null);
 
   // Latest props for WaveSurfer + media listeners that must not re-subscribe each render.
-  const onSeekRef = (0,external_react_.useRef)(onSeek);
-  const interactiveRef = (0,external_react_.useRef)(interactive);
-  const hasZoomHandlersRef = (0,external_react_.useRef)(false);
-  const currentTimeRef = (0,external_react_.useRef)(currentTime);
-  const peaksRef = (0,external_react_.useRef)(peaks);
-  const durationSecRef = (0,external_react_.useRef)(durationSec);
-  const mediaElRef = (0,external_react_.useRef)(mediaEl);
-  const onViewportChangeRef = (0,external_react_.useRef)(onViewportChange);
-  const displayedPeaksRef = (0,external_react_.useRef)(null);
-  const peakTransitionAnimationRef = (0,external_react_.useRef)(0);
+  const cameraModeRef = (0,external_react_.useRef)(cameraMode); // latest tape/desktop; WaveSurfer create() deps stay empty
+  const currentTimeRef = (0,external_react_.useRef)(currentTime); // latest media time; zoom recenter reads this
+  const durationSecRef = (0,external_react_.useRef)(durationSec); // latest duration; click-to-seek reads this
+  const hasZoomHandlersRef = (0,external_react_.useRef)(false); // parent can zoom; wheel/pinch check this
+  const interactiveRef = (0,external_react_.useRef)(interactive); // latest interactive; WaveSurfer listeners read this
+  const isPlayingRef = (0,external_react_.useRef)(isPlaying); // latest isPlaying; tape tap toggles from this
+  const mediaElRef = (0,external_react_.useRef)(mediaEl); // latest <audio>/<video>; camera + playhead tick read this
+  const onPlayPauseRef = (0,external_react_.useRef)(onPlayPause); // latest play/pause; tape tap must not re-bind
+  const onSeekRef = (0,external_react_.useRef)(onSeek); // latest onSeek; click/scroll handlers must not re-bind
+  const onViewportChangeRef = (0,external_react_.useRef)(onViewportChange); // latest viewport callback; camera commits here
+  const peaksRef = (0,external_react_.useRef)(peaks); // latest peaks; WaveSurfer create() + morph read this
+
+  const displayedPeaksRef = (0,external_react_.useRef)(null); // peaks currently drawn (for morph)
+  const peakTransitionAnimationRef = (0,external_react_.useRef)(0); // animation frame id while peaks morph in
   // Zoom / pinch / tile tint (read from pointer + WaveSurfer handlers)
-  const zoomOriginRef = (0,external_react_.useRef)(null);
-  const pinchStartRef = (0,external_react_.useRef)(null);
-  const pointerZoomRef = (0,external_react_.useRef)(false);
-  const pointerZoomClearTimerRef = (0,external_react_.useRef)(0);
-  const applyZoomWindowRef = (0,external_react_.useRef)(null);
-  // WaveSurfer `setOptions` fires zoom/scroll before we apply the intended scroll.
-  const suppressViewportSyncRef = (0,external_react_.useRef)(false);
-  const bufferProgressRef = (0,external_react_.useRef)(0);
-  const hoverProgressRef = (0,external_react_.useRef)(null);
-  onSeekRef.current = onSeek;
-  interactiveRef.current = interactive;
+  const applyZoomWindowRef = (0,external_react_.useRef)(null); // latest applyZoomWindow; resize observer calls this
+  const bufferProgressRef = (0,external_react_.useRef)(0); // latest buffer fill; zoomed tile tint reads this
+  const hideScrubTimeChipTimerRef = (0,external_react_.useRef)(0); // hides the tape scrub time chip after scroll settles
+  const hoverProgressRef = (0,external_react_.useRef)(null); // latest hover fill; zoomed tile tint reads this
+  const lastObservedWidthRef = (0,external_react_.useRef)(0); // last ResizeObserver width; skip no-op resizes
+  const liveHeightRef = (0,external_react_.useRef)(height); // canvas height last applied to WaveSurfer
+  const pinchStartRef = (0,external_react_.useRef)(null); // two-finger distance and zoom at pinch start
+  const pointerZoomClearTimerRef = (0,external_react_.useRef)(0); // clears pointerZoomRef after WAVEFORM_ZOOM_DISMISS_MS
+  const pointerZoomRef = (0,external_react_.useRef)(false); // pinch/wheel in progress; skip play/pause and tape recenter
+  const queuedTapeSeekTimeSecRef = (0,external_react_.useRef)(null); // seek time waiting for the next animation frame
+  const rangeProgressRef = (0,external_react_.useRef)(null); // latest range progress; zoomed tile tint reads this
+  const suppressNextTapPlayPauseRef = (0,external_react_.useRef)(false); // swallow play/pause after a swipe or pinch
+  const suppressNextTapPlayPauseTimerRef = (0,external_react_.useRef)(0); // clears suppressNextTapPlayPauseRef
+  const suppressViewportSyncRef = (0,external_react_.useRef)(false); // ignore WaveSurfer zoom/scroll while we setOptions
+  const tapeSeekAnimationRef = (0,external_react_.useRef)(0); // coalesces swipe seeks to one seek per animation frame
+  const toggleTapePlaybackRef = (0,external_react_.useRef)(null); // latest tap play/pause; click/pointerup call this
+  const zoomOriginRef = (0,external_react_.useRef)(null); // pointer+time so zoom keeps that point fixed
+
+  cameraModeRef.current = cameraMode;
   currentTimeRef.current = currentTime;
-  peaksRef.current = peaks;
   durationSecRef.current = durationSec;
+  interactiveRef.current = interactive;
+  isPlayingRef.current = isPlaying;
   mediaElRef.current = mediaEl;
+  onPlayPauseRef.current = onPlayPause;
+  onSeekRef.current = onSeek;
   onViewportChangeRef.current = onViewportChange;
+  peaksRef.current = peaks;
   const [internalZoom, setInternalZoom] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
   const [hoverProgress, setHoverProgress] = (0,external_react_.useState)(null);
+  const [scrubPreviewTimeSec, setScrubPreviewTimeSec] = (0,external_react_.useState)(null);
+  const [overlayPortalHost, setOverlayPortalHost] = (0,external_react_.useState)(null);
   const [canvasWidthPx, setCanvasWidthPx] = (0,external_react_.useState)(0);
   const [scrollLeft, setScrollLeft] = (0,external_react_.useState)(0);
+  const [previewRange, setPreviewRange] = (0,external_react_.useState)(null);
+  const [isRangeDragging, setIsRangeDragging] = (0,external_react_.useState)(false);
+  const isRangeDraggingRef = (0,external_react_.useRef)(false);
+  const skipNextSeekRef = (0,external_react_.useRef)(false);
+  const lastSetTimeSecRef = (0,external_react_.useRef)(null);
+  const [isRangeHovered, setIsRangeHovered] = (0,external_react_.useState)(false);
   const isControlled = typeof zoomLevelProp === 'number';
   const maxZoom = getWaveformZoomMax({
     durationSec,
@@ -5687,21 +6520,41 @@ function WaveformView({
   const zoomLevel = clampWaveformZoom(isControlled ? zoomLevelProp : internalZoom, maxZoom);
   const zoomRef = (0,external_react_.useRef)(zoomLevel); // latest zoom for WaveSurfer redraw/zoom handlers
   zoomRef.current = zoomLevel;
-  const prevZoomRef = (0,external_react_.useRef)(null);
+  const prevZoomRef = (0,external_react_.useRef)(null); // last applied zoom; tape recenters only when this changes
+  const isTape = cameraMode === 'tape';
   const isZoomed = zoomLevel > constants/* WAVEFORM_ZOOM_MIN */.LW;
+  const isScrollableWindow = isZoomed || isTape;
   const bufferProgress = getBufferedProgress(bufferedRange, durationSec);
   bufferProgressRef.current = bufferProgress;
-  hoverProgressRef.current = hoverProgress;
+  hoverProgressRef.current = isRangeDragging ? null : hoverProgress;
+  const activeRange = isRangeDragging ? previewRange ?? range : range;
+  const activeRangeRef = (0,external_react_.useRef)(activeRange);
+  activeRangeRef.current = activeRange;
+  const durationMs = durationMsFromSec(durationSec);
+  const rangeStartMs = activeRange?.startMs;
+  const rangeEndMs = activeRange?.endMs;
+  const activeRangeProgress = (0,external_react_.useMemo)(() => {
+    if (rangeStartMs == null || !Number.isFinite(rangeStartMs)) {
+      return null;
+    }
+    return rangeProgress(resolveRange({
+      endMs: rangeEndMs ?? null,
+      startMs: rangeStartMs
+    }, durationMs), durationMs);
+  }, [durationMs, rangeEndMs, rangeStartMs]);
+  rangeProgressRef.current = activeRangeProgress;
   const viewport = (0,external_react_.useMemo)(() => createWaveformViewport({
     durationSec,
+    gutterPx: isTape ? getTapeGutterPx(canvasWidthPx) : 0,
     heightPx: height,
     maxZoom,
     scrollLeftPx: scrollLeft,
     widthPx: canvasWidthPx,
     zoomLevel
-  }), [canvasWidthPx, durationSec, height, maxZoom, scrollLeft, zoomLevel]);
+  }), [canvasWidthPx, durationSec, height, isTape, maxZoom, scrollLeft, zoomLevel]);
   const viewportRef = (0,external_react_.useRef)(viewport); // live scroll window; prefer this over render-state while the camera is moving
   const onViewportCommit = (0,external_react_.useCallback)((scrollLeftPx, nextViewport, commitReactState = true) => {
+    rangeLayerRef.current?.applyViewport(nextViewport);
     onViewportChangeRef.current?.(nextViewport);
     if (commitReactState) {
       setScrollLeft(scrollLeftPx);
@@ -5714,20 +6567,45 @@ function WaveformView({
     clearFollowPin,
     handleScroll: handleCameraScroll,
     isFollowPinned,
+    isUserPanning,
     onSeek: onPlayheadSeek,
     onZoom,
     releaseUserPanHold,
     seekTo
   } = usePlayheadCamera({
+    cameraMode,
     mediaElRef,
     onViewportCommit,
     playheadRef,
     viewportRef,
     wavesurferRef
   });
+  const toggleTapePlayback = (0,external_react_.useCallback)(() => {
+    if (!interactiveRef.current) {
+      return;
+    }
+    if (isUserPanning() || pointerZoomRef.current) {
+      return;
+    }
+    if (suppressNextTapPlayPauseRef.current) {
+      suppressNextTapPlayPauseRef.current = false;
+      window.clearTimeout(suppressNextTapPlayPauseTimerRef.current);
+      suppressNextTapPlayPauseTimerRef.current = 0;
+      return;
+    }
+    onPlayPauseRef.current?.(!isPlayingRef.current);
+    suppressNextTapPlayPauseRef.current = true;
+    window.clearTimeout(suppressNextTapPlayPauseTimerRef.current);
+    suppressNextTapPlayPauseTimerRef.current = window.setTimeout(() => {
+      suppressNextTapPlayPauseRef.current = false;
+      suppressNextTapPlayPauseTimerRef.current = 0;
+    }, constants/* WAVEFORM_TAPE_CLICK_SUPPRESS_MS */.fI);
+  }, [isUserPanning]);
+  toggleTapePlaybackRef.current = toggleTapePlayback;
   (0,external_react_.useLayoutEffect)(() => {
     viewportRef.current = createWaveformViewport({
       durationSec: viewport.durationSec,
+      gutterPx: viewport.gutterPx,
       heightPx: viewport.heightPx,
       maxZoom: viewport.maxZoom,
       scrollLeftPx: viewportRef.current.scrollLeftPx,
@@ -5750,6 +6628,41 @@ function WaveformView({
       pointerZoomClearTimerRef.current = 0;
     }, constants/* WAVEFORM_ZOOM_DISMISS_MS */.m6);
   }, []);
+
+  /**
+   * Seek the time under the pin (one seek per frame). Swallow the delayed iOS click;
+   * show the scrub chip until the swipe settles.
+   */
+  const handleTapeSwipe = (0,external_react_.useCallback)(timeSec => {
+    // Swallow the click WaveSurfer/iOS fires after a swipe or pinch.
+    suppressNextTapPlayPauseRef.current = true;
+    window.clearTimeout(suppressNextTapPlayPauseTimerRef.current);
+    suppressNextTapPlayPauseTimerRef.current = window.setTimeout(() => {
+      suppressNextTapPlayPauseRef.current = false;
+      suppressNextTapPlayPauseTimerRef.current = 0;
+    }, constants/* WAVEFORM_TAPE_CLICK_SUPPRESS_MS */.fI);
+    queuedTapeSeekTimeSecRef.current = timeSec;
+    if (!tapeSeekAnimationRef.current) {
+      // One seek per frame; later scrolls just update the queued time.
+      tapeSeekAnimationRef.current = window.requestAnimationFrame(() => {
+        tapeSeekAnimationRef.current = 0;
+        const next = queuedTapeSeekTimeSecRef.current;
+        queuedTapeSeekTimeSecRef.current = null;
+        if (next != null) {
+          onSeekRef.current?.(next);
+        }
+      });
+    }
+    if (interactiveRef.current) {
+      // Show the time under the pin; hide once scrolling has settled.
+      setScrubPreviewTimeSec(timeSec);
+      window.clearTimeout(hideScrubTimeChipTimerRef.current);
+      hideScrubTimeChipTimerRef.current = window.setTimeout(() => {
+        setScrubPreviewTimeSec(null);
+        hideScrubTimeChipTimerRef.current = 0;
+      }, constants/* WAVEFORM_FOLLOW_SCROLL_SETTLE_MS */.Zs);
+    }
+  }, []);
   const syncViewport = (0,external_react_.useCallback)(() => {
     const wavesurfer = wavesurferRef.current;
     if (!wavesurfer) {
@@ -5757,6 +6670,7 @@ function WaveformView({
     }
     const scrollLeftPx = WaveformView_getScrollLeft(wavesurfer);
     viewportRef.current = getViewportAtScroll(viewportRef.current, scrollLeftPx);
+    rangeLayerRef.current?.applyViewport(viewportRef.current);
     onViewportChangeRef.current?.(viewportRef.current);
     setScrollLeft(scrollLeftPx);
   }, []);
@@ -5765,14 +6679,18 @@ function WaveformView({
     if (!playhead) {
       return;
     }
-    if (!isFollowPinned()) {
+    if (isTape) {
+      playhead.style.left = getTapePinnedPlayheadLeft();
+    } else if (!isFollowPinned()) {
       playhead.style.left = timeLeftPercent(timeSec, durationSecRef.current, viewportRef.current);
     }
+    rangeLayerRef.current?.applyViewport(viewportRef.current);
     const wavesurfer = wavesurferRef.current;
-    if (wavesurfer && wavesurfer.setTime) {
+    if (wavesurfer && wavesurfer.setTime && lastSetTimeSecRef.current !== timeSec) {
+      lastSetTimeSecRef.current = timeSec;
       wavesurfer.setTime(timeSec);
     }
-  }, [isFollowPinned]);
+  }, [isFollowPinned, isTape]);
 
   // Same zoom-window body as the zoom effect; extracted so resize can call it too.
   const applyZoomWindow = (0,external_react_.useCallback)(() => {
@@ -5784,11 +6702,13 @@ function WaveformView({
     const viewWidthPx = wavesurfer.getWidth ? wavesurfer.getWidth() : container.clientWidth;
     const minPxPerSec = getZoomedPixelsPerSecond({
       durationSec,
+      isTape,
       maxZoom,
       viewWidthPx,
       zoomLevel
     });
-    const origin = zoomOriginRef.current;
+    const gutterPx = isTape ? getTapeGutterPx(viewWidthPx) : 0;
+    const origin = isTape ? null : zoomOriginRef.current;
     zoomOriginRef.current = null;
     const didZoomChange = prevZoomRef.current !== zoomLevel;
     if (origin || didZoomChange) {
@@ -5798,26 +6718,30 @@ function WaveformView({
     try {
       wavesurfer.setOptions(WaveformView_objectSpread({
         autoScroll: false,
+        fillParent: !isTape,
         minPxPerSec
-      }, zoomLevel > constants/* WAVEFORM_ZOOM_MIN */.LW ? {
-        progressColor: WAVEFORM_COLOR_PLAYED,
+      }, isScrollableWindow ? {
+        progressColor: getPlayedWaveformColor(isTape),
         waveColor: WAVEFORM_COLOR_UNPLAYED
       } : {}));
+      applyWaveformGutters(wavesurfer, gutterPx);
       if (minPxPerSec > 0) {
+        const windowViewport = createWaveformViewport({
+          durationSec,
+          gutterPx,
+          heightPx: liveHeightRef.current || height,
+          maxZoom,
+          scrollLeftPx: 0,
+          widthPx: viewWidthPx,
+          zoomLevel
+        });
         if (origin) {
-          applyScrollLeft(origin.timeSec * minPxPerSec - origin.pointerX, true);
-        } else if (didZoomChange && !pointerZoomRef.current) {
-          const zoomedViewport = createWaveformViewport({
-            durationSec,
-            heightPx: height,
-            maxZoom,
-            scrollLeftPx: 0,
-            widthPx: viewWidthPx,
-            zoomLevel
-          });
-          applyScrollLeft(Math.min(maxScrollLeft(zoomedViewport), Math.max(0, currentTimeRef.current * minPxPerSec - viewWidthPx / 2)), true);
+          applyScrollLeft(origin.timeSec * minPxPerSec + gutterPx - origin.pointerX, true);
+        } else if (didZoomChange && (isTape || !pointerZoomRef.current)) {
+          applyScrollLeft(getCenteredScrollLeft(currentTimeRef.current, windowViewport), true);
         }
       }
+      lastSetTimeSecRef.current = currentTimeRef.current;
       wavesurfer.setTime(currentTimeRef.current);
     } finally {
       suppressViewportSyncRef.current = false;
@@ -5825,13 +6749,17 @@ function WaveformView({
     }
     syncViewport();
     updatePlayheadPosition(currentTimeRef.current);
-  }, [applyScrollLeft, durationSec, height, maxZoom, onZoom, syncViewport, updatePlayheadPosition, zoomLevel]);
+  }, [applyScrollLeft, durationSec, height, isScrollableWindow, isTape, maxZoom, onZoom, syncViewport, updatePlayheadPosition, zoomLevel]);
   applyZoomWindowRef.current = applyZoomWindow;
   (0,external_react_.useEffect)(() => {
     const container = containerRef.current;
     if (!container) {
       return undefined;
     }
+    const measuredHeight = cameraModeRef.current === 'tape' && container.clientHeight > 0 ? Math.round(container.clientHeight) : height;
+    if (cameraModeRef.current === 'tape' && measuredHeight > 0) {
+      liveHeightRef.current = measuredHeight;
+    }
     const wavesurfer = w.create({
       autoScroll: false,
       barGap: constants/* WAVEFORM_BAR_GAP */.Lu,
@@ -5842,16 +6770,25 @@ function WaveformView({
       cursorWidth: 0,
       duration: durationSecRef.current,
       fillParent: true,
-      height,
+      height: measuredHeight,
       hideScrollbar: true,
-      interact: interactiveRef.current,
+      dragToSeek: false,
+      interact: interactiveRef.current && cameraModeRef.current !== 'tape',
       normalize: false,
       peaks: toChannels(peaksRef.current),
-      progressColor: WAVEFORM_COLOR_PLAYED,
+      progressColor: getPlayedWaveformColor(cameraModeRef.current === 'tape'),
       waveColor: WAVEFORM_COLOR_UNPLAYED
     });
     const unsubscribeClick = wavesurfer.on('click', relativeX => {
-      if (!interactiveRef.current) {
+      if (skipNextSeekRef.current) {
+        skipNextSeekRef.current = false;
+        return;
+      }
+      if (!interactiveRef.current || isRangeDraggingRef.current) {
+        return;
+      }
+      if (cameraModeRef.current === 'tape') {
+        toggleTapePlaybackRef.current?.();
         return;
       }
       onSeekRef.current?.(relativeX * durationSecRef.current);
@@ -5860,9 +6797,14 @@ function WaveformView({
       if (suppressViewportSyncRef.current) {
         return;
       }
-      handleCameraScroll(() => {
+      // User pan: map scroll to the time under the playhead, then tape seeks it.
+      handleCameraScroll(timeSec => {
+        if (cameraModeRef.current === 'tape' && !pointerZoomRef.current) {
+          handleTapeSwipe(timeSec);
+        }
         syncViewport();
       });
+      rangeLayerRef.current?.applyViewport(viewportRef.current);
     });
     const unsubscribeZoom = wavesurfer.on('zoom', () => {
       if (suppressViewportSyncRef.current) {
@@ -5871,22 +6813,28 @@ function WaveformView({
       syncViewport();
     });
     const unsubscribeRedraw = wavesurfer.on('redrawcomplete', () => {
-      if (!(zoomRef.current > constants/* WAVEFORM_ZOOM_MIN */.LW)) {
+      if (!(zoomRef.current > constants/* WAVEFORM_ZOOM_MIN */.LW) && cameraModeRef.current !== 'tape') {
         return;
       }
       tintZoomedWaveform(wavesurfer, getWaveformFills({
         bufferProgress: bufferProgressRef.current,
-        hoverProgress: hoverProgressRef.current
+        hoverProgress: cameraModeRef.current === 'tape' ? null : hoverProgressRef.current,
+        isTape: cameraModeRef.current === 'tape',
+        rangeProgress: rangeProgressRef.current
       }), true);
     });
     wavesurferRef.current = wavesurfer;
     displayedPeaksRef.current = peaksRef.current;
+    lastSetTimeSecRef.current = null;
     disableScrollOverscroll(container);
     syncViewport();
     applyZoomWindowRef.current?.();
     return () => {
       releaseUserPanHold();
       cancelJump();
+      window.clearTimeout(hideScrubTimeChipTimerRef.current);
+      window.clearTimeout(suppressNextTapPlayPauseTimerRef.current);
+      window.cancelAnimationFrame(tapeSeekAnimationRef.current);
       window.cancelAnimationFrame(peakTransitionAnimationRef.current);
       unsubscribeClick();
       unsubscribeScroll();
@@ -5895,19 +6843,41 @@ function WaveformView({
       wavesurfer.destroy();
       wavesurferRef.current = null;
       displayedPeaksRef.current = null;
+      lastSetTimeSecRef.current = null;
     };
-  }, [cancelJump, handleCameraScroll, height, releaseUserPanHold, syncViewport]);
+  }, [cancelJump, handleCameraScroll, handleTapeSwipe, height, isUserPanning, releaseUserPanHold, syncViewport]);
   (0,external_react_.useLayoutEffect)(() => {
     const el = containerRef.current;
     if (!el) {
       return undefined;
     }
     setCanvasWidthPx(el.clientWidth);
+    lastObservedWidthRef.current = el.clientWidth;
+    const mountedHeight = Math.round(el.clientHeight);
+    if (cameraModeRef.current === 'tape' && mountedHeight > 0) {
+      liveHeightRef.current = mountedHeight;
+    }
     const observer = new ResizeObserver(entries => {
       entries.forEach(entry => {
-        setCanvasWidthPx(entry.contentRect.width);
+        const nextWidth = entry.contentRect.width;
+        const widthChanged = nextWidth !== lastObservedWidthRef.current;
+        lastObservedWidthRef.current = nextWidth;
+        setCanvasWidthPx(nextWidth);
+        const nextHeight = Math.round(entry.contentRect.height);
+        if (cameraModeRef.current === 'tape' && Number.isFinite(nextHeight) && nextHeight > 0 && nextHeight !== liveHeightRef.current) {
+          liveHeightRef.current = nextHeight;
+          const wavesurfer = wavesurferRef.current;
+          if (wavesurfer && wavesurfer.setOptions) {
+            wavesurfer.setOptions({
+              height: nextHeight
+            });
+          }
+        }
+        syncViewport();
+        if (widthChanged) {
+          applyZoomWindowRef.current?.();
+        }
       });
-      syncViewport();
     });
     observer.observe(el);
     return () => observer.disconnect();
@@ -5932,7 +6902,7 @@ function WaveformView({
       return;
     }
     wavesurfer.setOptions({
-      interact: interactive
+      interact: interactive && cameraModeRef.current !== 'tape'
     });
   }, [interactive]);
   (0,external_react_.useLayoutEffect)(() => {
@@ -5963,13 +6933,17 @@ function WaveformView({
       window.cancelAnimationFrame(playheadAnimationRef.current);
       cancelJump();
       releaseUserPanHold();
-      clearFollowPin();
+      if (cameraModeRef.current !== 'tape') {
+        clearFollowPin();
+      }
       syncViewport();
       updatePlayheadPosition(media.currentTime);
     };
     const handleSeeked = () => {
       onPlayheadSeek(media.currentTime);
-      seekTo(media.currentTime);
+      if (!isUserPanning()) {
+        seekTo(media.currentTime);
+      }
       updatePlayheadPosition(media.currentTime);
     };
     if (!media.paused) {
@@ -5988,7 +6962,7 @@ function WaveformView({
       media.removeEventListener('pause', stopLoop);
       media.removeEventListener('seeked', handleSeeked);
     };
-  }, [applyPlayheadCamera, cancelJump, clearFollowPin, mediaEl, onPlayheadSeek, releaseUserPanHold, seekTo, syncViewport, updatePlayheadPosition]);
+  }, [applyPlayheadCamera, cancelJump, clearFollowPin, isUserPanning, mediaEl, onPlayheadSeek, releaseUserPanHold, seekTo, syncViewport, updatePlayheadPosition]);
   (0,external_react_.useEffect)(() => {
     const wavesurfer = wavesurferRef.current;
     if (!wavesurfer || !wavesurfer.setOptions || !(durationSec > 0)) {
@@ -6023,9 +6997,11 @@ function WaveformView({
     }
     const fills = getWaveformFills({
       bufferProgress,
-      hoverProgress
+      hoverProgress: isTape ? null : hoverProgress,
+      isTape,
+      rangeProgress: activeRangeProgress
     });
-    if (isZoomed) {
+    if (isScrollableWindow) {
       tintZoomedWaveform(wavesurfer, fills);
       return;
     }
@@ -6033,8 +7009,9 @@ function WaveformView({
       progressColor: toCanvasFill(fills.progressColor, devicePixelWidth(canvasWidthPx)),
       waveColor: toCanvasFill(fills.waveColor, devicePixelWidth(canvasWidthPx))
     });
+    lastSetTimeSecRef.current = currentTimeRef.current;
     wavesurfer.setTime(currentTimeRef.current);
-  }, [bufferProgress, canvasWidthPx, hoverProgress, isZoomed]);
+  }, [activeRangeProgress, bufferProgress, canvasWidthPx, hoverProgress, isRangeDragging, isScrollableWindow, isTape, isZoomed]);
   (0,external_react_.useEffect)(() => {
     const track = trackRef.current;
     if (!track) {
@@ -6115,11 +7092,11 @@ function WaveformView({
     };
   }, [durationSec, markPointerZoom, setZoomLevel]);
   const onHoverMove = (0,external_react_.useCallback)(event => {
-    if (!interactive) {
+    if (isTape || isTouchHoverInput(event)) {
       return;
     }
     const rect = event.currentTarget.getBoundingClientRect();
-    if (!(rect.width > 0) || !(durationSec > 0)) {
+    if (!(rect.width > 0)) {
       return;
     }
     const pointerX = event.clientX - rect.left;
@@ -6127,24 +7104,81 @@ function WaveformView({
       return;
     }
     const vp = viewportRef.current;
+    const draft = activeRangeRef.current;
+    setIsRangeHovered(!!draft && isPointerOverRange({
+      pointerX,
+      range: draft,
+      viewport: vp
+    }));
+    if (!interactive || isRangeDraggingRef.current || !(durationSec > 0)) {
+      return;
+    }
     if (vp.pixelsPerSecond > 0) {
       setHoverProgress(Math.min(1, Math.max(0, timeFromPositionPx(pointerX, vp) / durationSec)));
       return;
     }
     setHoverProgress(Math.min(1, Math.max(0, pointerX / rect.width)));
-  }, [durationSec, interactive]);
+  }, [durationSec, interactive, isTape]);
   const onHoverLeave = (0,external_react_.useCallback)(() => {
     setHoverProgress(null);
+    setIsRangeHovered(false);
+  }, []);
+  const handleRangeDragChange = (0,external_react_.useCallback)(isDragging => {
+    isRangeDraggingRef.current = isDragging;
+    setIsRangeDragging(isDragging);
+    if (isDragging) {
+      setHoverProgress(null);
+    } else {
+      skipNextSeekRef.current = true;
+      window.setTimeout(() => {
+        skipNextSeekRef.current = false;
+      }, 0);
+      setPreviewRange(null);
+    }
+    onRangeDragChange?.(isDragging);
+  }, [onRangeDragChange]);
+  const getPlayheadSec = (0,external_react_.useCallback)(() => {
+    return mediaElRef.current ? mediaElRef.current.currentTime : currentTimeRef.current;
+  }, []);
+  const bindOverlayPortalHost = (0,external_react_.useCallback)(node => {
+    const host = node?.parentElement ?? null;
+    setOverlayPortalHost(prev => prev === host ? prev : host);
   }, []);
-  const hoverLeft = hoverProgress == null ? null : timeLeftPercent(hoverProgress * durationSec, durationSec, viewportRef.current);
+  const hoverLeft = isRangeDragging || hoverProgress == null ? null : timeLeftPercent(hoverProgress * durationSec, durationSec, viewportRef.current);
+  const showRangeOverlay = Boolean(range) && (isRangeDragging || !isPlaying || !isRangeCollapsed(range));
+  const scrubTimeChip = isTape && scrubPreviewTimeSec != null ? /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-WaveformView-hover bp-WaveformView-hover--tape",
+    "data-testid": "bp-waveform-hover"
+  }, /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-WaveformView-hoverTime",
+    "data-testid": "bp-waveform-hover-time"
+  }, formatTime(scrubPreviewTimeSec))) : null;
   return /*#__PURE__*/external_react_["default"].createElement("div", {
-    className: `bp-WaveformView${interactive ? '' : ' bp-WaveformView--inert'}${isZoomed ? ' bp-WaveformView--zoomed' : ''}`,
+    ref: bindOverlayPortalHost,
+    className: classnames_default()('bp-WaveformView', {
+      'bp-WaveformView--inert': !interactive,
+      'bp-WaveformView--tape': isTape,
+      'bp-WaveformView--zoomed': isZoomed
+    }),
     "data-testid": "bp-waveform-view"
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: trackRef,
     className: "bp-WaveformView-track",
-    onMouseLeave: interactive ? onHoverLeave : undefined,
-    onMouseMove: interactive ? onHoverMove : undefined
+    onMouseLeave: interactive && !isTape ? onHoverLeave : undefined,
+    onMouseMove: interactive && !isTape ? onHoverMove : undefined,
+    onPointerMove: interactive && !isTape ? event => {
+      if (event.pointerType === 'touch') {
+        onHoverLeave();
+        return;
+      }
+      onHoverMove(event);
+    } : undefined,
+    onPointerUp: isTape ? event => {
+      if (event.button > 0) {
+        return;
+      }
+      toggleTapePlaybackRef.current?.();
+    } : undefined
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: containerRef,
     className: "bp-WaveformView-canvas"
@@ -6153,7 +7187,20 @@ function WaveformView({
     "aria-hidden": "true",
     className: "bp-WaveformView-playhead",
     "data-testid": "bp-waveform-playhead"
-  }), hoverLeft != null && hoverProgress != null && /*#__PURE__*/external_react_["default"].createElement("div", {
+  }), showRangeOverlay && range && /*#__PURE__*/external_react_["default"].createElement(waveform_WaveformRangeSelection, {
+    ref: rangeLayerRef,
+    currentTimeSec: currentTime,
+    durationSec: durationSec,
+    getPlayheadSec: getPlayheadSec,
+    interactive: interactive,
+    isHighlighted: isRangeDragging || isRangeHovered,
+    keepHighlight: true,
+    onDragChange: handleRangeDragChange,
+    onPreviewChange: setPreviewRange,
+    onRangeChange: interactive ? onRangeChange : undefined,
+    range: range,
+    viewport: viewport
+  }), hoverLeft != null && hoverProgress != null && !isRangeDragging && /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformView-hover",
     "data-testid": "bp-waveform-hover",
     style: {
@@ -6162,12 +7209,9 @@ function WaveformView({
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformView-hoverTime",
     "data-testid": "bp-waveform-hover-time"
-  }, formatTime(hoverProgress * durationSec)))));
+  }, formatTime(hoverProgress * durationSec)))), scrubTimeChip && overlayPortalHost ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_dom_7dac9eee_createPortal__(scrubTimeChip, overlayPortalHost) : null);
 }
 /* harmony default export */ const waveform_WaveformView = (/*#__PURE__*/external_react_["default"].memo(WaveformView));
-// EXTERNAL MODULE: ./node_modules/classnames/index.js
-var classnames = __webpack_require__(2485);
-var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 ;// ./src/lib/viewers/controls/icons/IconZoomIn24.tsx
 
 function IconZoomIn24() {
@@ -6253,11 +7297,14 @@ function WaveformZoomControl({
 }) {
   const [isHovered, setHovered] = (0,external_react_.useState)(false);
   const [isFocused, setFocused] = (0,external_react_.useState)(false);
-  const dismissTimerRef = (0,external_react_.useRef)(0);
+  const [isPinned, setPinned] = (0,external_react_.useState)(false);
+  const wasFlyoutOpenOnPointerDownRef = (0,external_react_.useRef)(true); // first tap on + pins the flyout instead of zooming
+  const zoomControlElRef = (0,external_react_.useRef)(null); // root; outside pointerdown unpins the flyout
+  const dismissTimerRef = (0,external_react_.useRef)(0); // delay before hover-close of the flyout
   const sliderId = `bp-waveform-zoom-slider${(0,external_react_.useId)()}`;
   const zoom = clampWaveformZoom(zoomLevel, maxZoom);
   const zoomValue = Math.round(sliderValueFromZoom(zoom, maxZoom));
-  const isOpen = isHovered || isFocused || isRevealed;
+  const isOpen = isHovered || isFocused || isRevealed || isPinned;
   const isAtMinZoom = zoomValue <= 0;
   const isAtMaxZoom = zoomValue >= constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh;
   const clearDismiss = (0,external_react_.useCallback)(() => {
@@ -6265,13 +7312,42 @@ function WaveformZoomControl({
     dismissTimerRef.current = 0;
   }, []);
   (0,external_react_.useEffect)(() => () => window.clearTimeout(dismissTimerRef.current), []);
+  (0,external_react_.useEffect)(() => {
+    if (!isPinned) {
+      return undefined;
+    }
+    const closeIfOutside = event => {
+      const zoomControlEl = zoomControlElRef.current;
+      if (!zoomControlEl || zoomControlEl.contains(event.target)) {
+        return;
+      }
+      setPinned(false);
+      setFocused(false);
+      setHovered(false);
+    };
+    document.addEventListener('pointerdown', closeIfOutside);
+    return () => document.removeEventListener('pointerdown', closeIfOutside);
+  }, [isPinned]);
   const handleSlider = (0,external_react_.useCallback)(newValue => {
     onZoomChange(zoomFromSliderValue(newValue, maxZoom));
   }, [maxZoom, onZoomChange]);
   const handleStep = (0,external_react_.useCallback)(delta => {
-    onZoomChange(zoomFromSliderValue(zoomValue + delta, maxZoom));
-  }, [maxZoom, onZoomChange, zoomValue]);
+    onZoomChange(stepWaveformZoom(zoom, maxZoom, delta));
+  }, [maxZoom, onZoomChange, zoom]);
+  const handleZoomInPointerDown = (0,external_react_.useCallback)(() => {
+    wasFlyoutOpenOnPointerDownRef.current = isHovered || isFocused || isRevealed || isPinned;
+  }, [isFocused, isHovered, isPinned, isRevealed]);
+  const handleZoomInClick = (0,external_react_.useCallback)(() => {
+    if (!wasFlyoutOpenOnPointerDownRef.current) {
+      setPinned(true);
+      return;
+    }
+    if (!isAtMaxZoom) {
+      handleStep(constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD);
+    }
+  }, [handleStep, isAtMaxZoom]);
   return /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: zoomControlElRef,
     "aria-label": "Zoom",
     className: classnames_default()('bp-WaveformZoomControl', {
       'bp-is-open': isOpen
@@ -6282,6 +7358,7 @@ function WaveformZoomControl({
         return;
       }
       setFocused(false);
+      setPinned(false);
     },
     onFocus: () => {
       clearDismiss();
@@ -6299,15 +7376,12 @@ function WaveformZoomControl({
     },
     role: "group"
   }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
-    "aria-disabled": isAtMaxZoom,
+    "aria-disabled": isOpen && isAtMaxZoom,
     className: "bp-WaveformZoomControl-button",
     "data-resin-target": "waveformZoomIn",
     "data-testid": "bp-waveform-zoom-in",
-    onClick: () => {
-      if (!isAtMaxZoom) {
-        handleStep(constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD);
-      }
-    },
+    onClick: handleZoomInClick,
+    onPointerDown: handleZoomInPointerDown,
     title: "Zoom in"
   }, /*#__PURE__*/external_react_["default"].createElement(icons_IconZoomIn24, null)), /*#__PURE__*/external_react_["default"].createElement("div", {
     "aria-hidden": !isOpen,
@@ -6361,6 +7435,7 @@ function WaveformZoomControl({
 
 
 
+
 const PLACEHOLDER_PEAKS = placeholderPeaks();
 function MP3ControlsV2({
   autoplay,
@@ -6368,7 +7443,10 @@ function MP3ControlsV2({
   commentMarkers,
   currentTime,
   durationTime,
+  hasStartedPlayback = false,
   isPlaying,
+  keyboardVolumeStep = 0,
+  keyboardZoomStep = 0,
   mediaEl,
   onAutoplayChange,
   onCommentMarkerClick,
@@ -6388,12 +7466,16 @@ function MP3ControlsV2({
   const [zoomLevel, setZoomLevel] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
   const [maxZoom, setMaxZoom] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
   const [isZoomRevealed, setIsZoomRevealed] = (0,external_react_.useState)(false);
-  const zoomRevealTimerRef = (0,external_react_.useRef)(0);
+  const zoomRevealTimerRef = (0,external_react_.useRef)(0); // hides the zoom flyout after WAVEFORM_ZOOM_DISMISS_MS
   const hasRealPeaks = !!(peaks && peaks.length);
   const waveformPeaks = hasRealPeaks ? peaks : PLACEHOLDER_PEAKS;
   const waveformDurationSec = hasWaveformDuration ? durationValue : PLACEHOLDER_DURATION_SEC;
-  const [playRequested, setPlayRequested] = (0,external_react_.useState)(false);
+  const [playRequested, setPlayRequested] = (0,external_react_.useState)(hasStartedPlayback);
   const [viewport, setViewport] = (0,external_react_.useState)(null);
+  const isTape = useTapeWaveform();
+  const hasAppliedTapeDefaultZoomRef = (0,external_react_.useRef)(false); // ~10s window applied; reset to 1× when leaving tape
+  const lastKeyboardZoomStepRef = (0,external_react_.useRef)(0); // last +/− step applied; skip re-step when maxZoom retriggers the effect
+  const userChangedTapeZoomRef = (0,external_react_.useRef)(false); // pinch/wheel zoom; skip re-applying the 10s default
   const handleViewportChange = (0,external_react_.useCallback)(next => {
     setMaxZoom(prev => prev === next.maxZoom ? prev : next.maxZoom);
     setViewport(prev => viewportEquals(prev, next) ? prev : next);
@@ -6407,18 +7489,52 @@ function MP3ControlsV2({
     }, constants/* WAVEFORM_ZOOM_DISMISS_MS */.m6);
   }, []);
   const handleWaveformZoom = (0,external_react_.useCallback)(nextZoom => {
+    userChangedTapeZoomRef.current = true;
     setZoomLevel(nextZoom);
     revealZoomControl();
   }, [revealZoomControl]);
+  (0,external_react_.useEffect)(() => {
+    const steps = keyboardZoomStep - lastKeyboardZoomStepRef.current;
+    if (!steps) {
+      return;
+    }
+    lastKeyboardZoomStepRef.current = keyboardZoomStep;
+    if (!(maxZoom > constants/* WAVEFORM_ZOOM_MIN */.LW)) {
+      return;
+    }
+    userChangedTapeZoomRef.current = true;
+    setZoomLevel(prev => stepWaveformZoom(prev, maxZoom, steps * constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD));
+    revealZoomControl();
+  }, [keyboardZoomStep, maxZoom, revealZoomControl]);
   (0,external_react_.useEffect)(() => {
     setZoomLevel(prev => clampWaveformZoom(prev, maxZoom));
   }, [maxZoom]);
+  (0,external_react_.useEffect)(() => {
+    if (!isTape) {
+      if (hasAppliedTapeDefaultZoomRef.current) {
+        hasAppliedTapeDefaultZoomRef.current = false;
+        userChangedTapeZoomRef.current = false;
+        setZoomLevel(constants/* WAVEFORM_ZOOM_MIN */.LW);
+      }
+      return;
+    }
+    if (!hasWaveformDuration || !hasRealPeaks || !viewport || !(viewport.widthPx > 0)) {
+      return;
+    }
+    if (userChangedTapeZoomRef.current) {
+      hasAppliedTapeDefaultZoomRef.current = true;
+      return;
+    }
+    const nextZoom = getTapeDefaultZoom(durationValue, Math.max(maxZoom, viewport.maxZoom));
+    hasAppliedTapeDefaultZoomRef.current = true;
+    setZoomLevel(prev => prev === nextZoom ? prev : nextZoom);
+  }, [durationValue, hasRealPeaks, hasWaveformDuration, isTape, maxZoom, viewport]);
   (0,external_react_.useEffect)(() => () => window.clearTimeout(zoomRevealTimerRef.current), []);
   (0,external_react_.useEffect)(() => {
-    if (isPlaying) {
+    if (isPlaying || hasStartedPlayback) {
       setPlayRequested(true);
     }
-  }, [isPlaying]);
+  }, [hasStartedPlayback, isPlaying]);
   const handlePlayOverlayClick = (0,external_react_.useCallback)(() => {
     setPlayRequested(true);
     onPlayPause(true);
@@ -6436,11 +7552,13 @@ function MP3ControlsV2({
     }
     onTimeChange(marker.time);
   }, [onCommentMarkerClick, onPlayPause, onTimeChange]);
-  const isWaveformInteractive = playRequested && hasMediaMetadata;
-  const isWaitingToPlay = playRequested && !hasMediaMetadata;
-  const showPlayOverlay = !playRequested && !isPlaying;
+  const hasStarted = playRequested || hasStartedPlayback;
+  const isWaveformInteractive = hasStarted && hasMediaMetadata;
+  const isWaitingToPlay = hasStarted && !hasMediaMetadata;
+  const showPlayOverlay = !hasStarted && !isPlaying;
   const hasZoomHandlers = hasRealPeaks && !showPlayOverlay;
   const hasZoomControl = hasZoomHandlers && hasMediaMetadata && maxZoom > constants/* WAVEFORM_ZOOM_MIN */.LW;
+  const waveformZoomLevel = isTape || hasZoomHandlers ? zoomLevel : constants/* WAVEFORM_ZOOM_MIN */.LW;
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2",
     "data-testid": "media-controls-wrapper-v2"
@@ -6450,18 +7568,22 @@ function MP3ControlsV2({
     className: "bp-MP3ControlsV2-waveform"
   }, /*#__PURE__*/external_react_["default"].createElement(waveform_WaveformView, {
     bufferedRange: bufferedRange,
+    cameraMode: isTape ? 'tape' : 'desktop',
     currentTime: currentTime,
     durationSec: waveformDurationSec,
     interactive: isWaveformInteractive,
+    isPlaying: isPlaying,
     mediaEl: mediaEl,
+    onPlayPause: isWaveformInteractive ? onPlayPause : undefined,
     onSeek: isWaveformInteractive ? onTimeChange : undefined,
     onViewportChange: hasRealPeaks ? handleViewportChange : undefined,
     onZoomChange: hasZoomHandlers ? handleWaveformZoom : undefined,
     peaks: waveformPeaks,
-    zoomLevel: hasZoomHandlers ? zoomLevel : constants/* WAVEFORM_ZOOM_MIN */.LW
+    zoomLevel: waveformZoomLevel
   }), /*#__PURE__*/external_react_["default"].createElement(WaveformCommentMarkers, {
     commentMarkers: waveformMarkers,
     durationSec: hasWaveformDuration ? durationValue : 0,
+    isTape: isTape,
     onCommentMarkerClick: handleCommentMarkerClick,
     selectedId: selectedMarkerId,
     viewport: viewport
@@ -6470,7 +7592,7 @@ function MP3ControlsV2({
   }, /*#__PURE__*/external_react_["default"].createElement(WaveformZoomControl, {
     isRevealed: isZoomRevealed,
     maxZoom: maxZoom,
-    onZoomChange: setZoomLevel,
+    onZoomChange: handleWaveformZoom,
     zoomLevel: zoomLevel
   })), showPlayOverlay && /*#__PURE__*/external_react_["default"].createElement("button", {
     className: "bp-MP3ControlsV2-playOverlay"
@@ -6504,7 +7626,8 @@ function MP3ControlsV2({
     durationTime: durationValue
   })), /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2-group"
-  }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.A, {
+  }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.Ay, {
+    keyboardVolumeStep: keyboardVolumeStep,
     onMuteChange: onMuteChange,
     onVolumeChange: onVolumeChange,
     volume: volume
@@ -6590,19 +7713,26 @@ function isFpsAvailable(player) {
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Av: () => (/* binding */ WAVEFORM_TAPE_DEFAULT_WINDOW_SEC),
+/* harmony export */   BG: () => (/* binding */ WAVEFORM_RANGE_COLLAPSED_OFFSET_PX),
 /* harmony export */   Bq: () => (/* binding */ WAVEFORM_PLAYHEAD_JUMP_MS),
 /* harmony export */   DY: () => (/* binding */ WAVEFORM_BAR_RADIUS),
 /* harmony export */   EB: () => (/* binding */ CLIENT_DECODE_MAX_COMPRESSED_BYTES),
 /* harmony export */   FY: () => (/* binding */ MAX_PEAK_COUNT),
 /* harmony export */   GQ: () => (/* binding */ DURATION_MISMATCH_TOLERANCE_SEC),
+/* harmony export */   IQ: () => (/* binding */ WAVEFORM_RANGE_SNAP_PX),
 /* harmony export */   Kl: () => (/* binding */ WAVEFORM_MIN_VIEW_WINDOW_SEC),
 /* harmony export */   LW: () => (/* binding */ WAVEFORM_ZOOM_MIN),
+/* harmony export */   Le: () => (/* binding */ TAPE_POINTER_MEDIA_QUERY),
 /* harmony export */   Lu: () => (/* binding */ WAVEFORM_BAR_GAP),
 /* harmony export */   NM: () => (/* binding */ WAVEFORM_FOLLOW_INSET_PX),
 /* harmony export */   QD: () => (/* binding */ WAVEFORM_ZOOM_BUTTON_STEP),
 /* harmony export */   XS: () => (/* binding */ WAVEFORM_BAR_MIN_HEIGHT),
 /* harmony export */   Zs: () => (/* binding */ WAVEFORM_FOLLOW_SCROLL_SETTLE_MS),
+/* harmony export */   bX: () => (/* binding */ WAVEFORM_RANGE_MIN_DURATION_MS),
 /* harmony export */   f3: () => (/* binding */ CLIENT_DECODE_PEAK_COUNT),
+/* harmony export */   fI: () => (/* binding */ WAVEFORM_TAPE_CLICK_SUPPRESS_MS),
+/* harmony export */   h1: () => (/* binding */ WAVEFORM_RANGE_HANDLE_LINE_PX),
 /* harmony export */   i8: () => (/* binding */ PEAK_UNIT_MAX),
 /* harmony export */   m6: () => (/* binding */ WAVEFORM_ZOOM_DISMISS_MS),
 /* harmony export */   mJ: () => (/* binding */ PEAK_UNIT_MIN),
@@ -6610,10 +7740,12 @@ function isFpsAvailable(player) {
 /* harmony export */   nh: () => (/* binding */ WAVEFORM_ZOOM_SLIDER_MAX),
 /* harmony export */   oN: () => (/* binding */ WAVEFORM_HEIGHT),
 /* harmony export */   qY: () => (/* binding */ MAX_PAYLOAD_BYTES),
+/* harmony export */   r0: () => (/* binding */ WAVEFORM_RANGE_HIT_AREA_PX),
 /* harmony export */   sh: () => (/* binding */ WAVEFORM_PAYLOAD_VERSION),
 /* harmony export */   tK: () => (/* binding */ WAVEFORM_ZOOM_MAX),
 /* harmony export */   zo: () => (/* binding */ WAVEFORM_BAR_WIDTH)
 /* harmony export */ });
+/* unused harmony exports WAVEFORM_RANGE_PLAYHEAD_GAP_PX, WAVEFORM_RANGE_GRIP_IN_MS, WAVEFORM_RANGE_GRIP_OUT_MS */
 /** Current waveform payload schema version. Bump only with a migration path. */
 const WAVEFORM_PAYLOAD_VERSION = 1;
 
@@ -6642,6 +7774,10 @@ const WAVEFORM_ZOOM_MIN = 1;
 const WAVEFORM_ZOOM_MAX = 24;
 /** Visible window never shorter than this. */
 const WAVEFORM_MIN_VIEW_WINDOW_SEC = 4;
+/** Tape (phone/tablet) default: seconds of audio visible in the viewport. */
+const WAVEFORM_TAPE_DEFAULT_WINDOW_SEC = 10;
+/** Primary pointer is a finger, not a mouse/trackpad. */
+const TAPE_POINTER_MEDIA_QUERY = '(hover: none) and (pointer: coarse)';
 const WAVEFORM_ZOOM_SLIDER_MAX = 100;
 /** One click on zoom in/out moves this many units on the 0–100 slider. */
 const WAVEFORM_ZOOM_BUTTON_STEP = 10;
@@ -6650,6 +7786,8 @@ const WAVEFORM_FOLLOW_INSET_PX = 200;
 const WAVEFORM_PLAYHEAD_JUMP_MS = 400;
 /** After the last user pan, wait this long before the camera may pin again. */
 const WAVEFORM_FOLLOW_SCROLL_SETTLE_MS = 150;
+/** Ignore a WaveSurfer click after a tape swipe (iOS delayed click). Must outlast the scrub-chip hide. */
+const WAVEFORM_TAPE_CLICK_SUPPRESS_MS = 200;
 const WAVEFORM_BAR_GAP = 2;
 const WAVEFORM_BAR_WIDTH = 2;
 const WAVEFORM_BAR_RADIUS = WAVEFORM_BAR_WIDTH / 2;
@@ -6657,6 +7795,24 @@ const WAVEFORM_BAR_RADIUS = WAVEFORM_BAR_WIDTH / 2;
 const WAVEFORM_BAR_MIN_HEIGHT = WAVEFORM_BAR_WIDTH;
 const WAVEFORM_HEIGHT = 140;
 
+/** Hit target centered on each range handle line. */
+const WAVEFORM_RANGE_HIT_AREA_PX = 24;
+/** Visible handle line and playhead width. */
+const WAVEFORM_RANGE_HANDLE_LINE_PX = 2;
+/** Screen gap between the playhead and each collapsed handle line. */
+const WAVEFORM_RANGE_PLAYHEAD_GAP_PX = 1;
+/**
+ * Offset of each collapsed handle from the timestamp/playhead center so the
+ * 2px lines sit 1px left and right of the 2px playhead.
+ */
+const WAVEFORM_RANGE_COLLAPSED_OFFSET_PX = WAVEFORM_RANGE_HANDLE_LINE_PX / 2 + WAVEFORM_RANGE_PLAYHEAD_GAP_PX + WAVEFORM_RANGE_HANDLE_LINE_PX / 2;
+/** Snap a dragging handle to the playhead when this close. */
+const WAVEFORM_RANGE_SNAP_PX = 8;
+/** Shortest committed range. Collapsed drafts (`endMs: null`) are exempt. */
+const WAVEFORM_RANGE_MIN_DURATION_MS = 250;
+const WAVEFORM_RANGE_GRIP_IN_MS = 150;
+const WAVEFORM_RANGE_GRIP_OUT_MS = 100;
+
 /***/ },
 
 /***/ 4971
@@ -6701,6 +7857,12 @@ function isWaveformErrorCode(value) {
 
 /** Visible slice of the timeline. Emitted whenever zoom, scroll, or width changes. */
 
+/** Navigator fields used to detect iPad, including iPadOS reporting itself as Mac. */
+
+/** Window bits needed to choose tape vs desktop (coarse pointer + iPad). */
+
+/** Desktop walks then pins near the right inset. Tape keeps the playhead at center. */
+
 /** One canvas linear-gradient stop. `offset` is 0–1 along the bar. */
 
 /**
@@ -14161,7 +15323,7 @@ var x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["default"]: () => (__WEBPACK_EXTERNAL_MODULE_react__["default"]), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useId"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useId), ["useLayoutEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect), ["useMemo"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useMemo), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
+module.exports = x({ ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["default"]: () => (__WEBPACK_EXTERNAL_MODULE_react__["default"]), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useId"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useId), ["useImperativeHandle"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle), ["useLayoutEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect), ["useMemo"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useMemo), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
 
 /***/ },
 
@@ -23055,7 +24217,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.90.0";
+const CLIENT_VERSION = "3.92.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -34434,10 +35596,9 @@ class MediaBaseViewer extends viewers_BaseViewer {
     const template = this.options.representation.content.url_template;
     this.mediaEl.addEventListener('error', this.errorHandler);
     this.mediaEl.setAttribute('title', this.options.file.name);
-    if (lib_Browser.isIOS()) {
-      // iOS doesn't fire loadeddata event until some data loads
-      // Adding autoplay prevents this but won't actually autoplay the video.
-      // https://webkit.org/blog/6784/new-video-policies-for-ios/
+    if (lib_Browser.isIOS() && this.mediaEl.tagName === 'VIDEO') {
+      // Unblocks loadeddata on iOS <video>. Do not set this on <audio>:
+      // after tap-to-open, Safari will start playback.
       this.mediaEl.autoplay = true;
     }
     const contentUrl = this.createContentUrlV2(template);
@@ -35693,7 +36854,7 @@ function MP3Controls({
     isPlaying: isPlaying,
     movePlayback: movePlayback,
     onPlayPause: onPlayPause
-  }), /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.A, {
+  }), /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.Ay, {
     onMuteChange: onMuteChange,
     onVolumeChange: onVolumeChange,
     volume: volume
@@ -35766,6 +36927,57 @@ function MP3Viewer_toPrimitive(t, r) { if ("object" != typeof t || !t) return t;
 
 
 const CSS_CLASS_MP3 = 'bp-media-mp3';
+const AUDIO_V2_SHUTTLE_RATES = [2, 4, 8, 16];
+const AUDIO_V2_SHUTTLE_TICK_MS = 50;
+const AUDIO_V2_SKIP_SEC = 1;
+const AUDIO_V2_SHIFT_SKIP_SEC = 5;
+
+/**
+ * Next J/L shuttle rate. Opposite direction starts at 2×.
+ *
+ * @param {number} currentRate
+ * @param {boolean} sameDirection
+ * @return {number} 2, 4, 8, or 16
+ */
+function nextShuttleRate(currentRate, sameDirection) {
+  if (!sameDirection) {
+    return AUDIO_V2_SHUTTLE_RATES[0];
+  }
+  const index = AUDIO_V2_SHUTTLE_RATES.indexOf(currentRate);
+  if (index < 0) {
+    return AUDIO_V2_SHUTTLE_RATES[0];
+  }
+  return AUDIO_V2_SHUTTLE_RATES[Math.min(index + 1, AUDIO_V2_SHUTTLE_RATES.length - 1)];
+}
+
+/**
+ * Next/previous comment marker for ↑/↓. Walks by id so same-time stacks each get a stop.
+ *
+ * @param {Array<Object>} markers
+ * @param {Object} options
+ * @param {number} options.direction -1 previous, 1 next
+ * @param {string|null} options.selectedId
+ * @param {number} options.time current playhead
+ * @return {Object|null} marker to select
+ */
+function nextCommentMarker(markers, {
+  direction,
+  selectedId,
+  time
+}) {
+  const sorted = (markers || []).filter(marker => Number.isFinite(marker.time)).sort((left, right) => left.time - right.time || String(left.id).localeCompare(String(right.id)));
+  if (!sorted.length) {
+    return null;
+  }
+  const selectedIndex = sorted.findIndex(marker => marker.id === selectedId);
+  if (selectedIndex >= 0) {
+    return sorted[Math.max(0, Math.min(sorted.length - 1, selectedIndex + direction))];
+  }
+  if (direction > 0) {
+    return sorted.find(marker => marker.time >= time) || sorted[sorted.length - 1];
+  }
+  return [...sorted].reverse().find(marker => marker.time <= time) || sorted[0];
+}
 function createLoadFailedError(message) {
   const error = new Error(message);
   error.name = 'LOAD_FAILED';
@@ -35778,6 +36990,7 @@ class MP3Viewer extends media_MediaBaseViewer {
      * @inheritdoc
      */
     MP3Viewer_defineProperty(this, "handlePlayRequest", () => {
+      this.exitShuttle();
       this.userRequestedPlay = true;
       this.togglePlay();
       if (this.shouldRaceClientWaveformDecode() && this.isWaveformDecodeRetryPending && !this.hasUsedWaveformDecodePlayRetry) {
@@ -35794,6 +37007,7 @@ class MP3Viewer extends media_MediaBaseViewer {
      * @return {void}
      */
     MP3Viewer_defineProperty(this, "handlePlayPause", shouldPlay => {
+      this.exitShuttle();
       if (shouldPlay) {
         this.handlePlayRequest();
         return;
@@ -35803,19 +37017,25 @@ class MP3Viewer extends media_MediaBaseViewer {
     MP3Viewer_defineProperty(this, "handleCommentMarkersUpdated", (markers = []) => {
       this.commentMarkers = markers;
       const selected = markers.find(marker => marker.isSelected);
-      const selectedId = selected ? selected.id : null;
-      if (selectedId !== this.hostSelectedMarkerId) {
-        this.hostSelectedMarkerId = selectedId;
-        if (selected && Number.isFinite(selected.time)) {
-          this.pendingHostSelectedSeek = selected;
-          this.applyPendingHostSelectedSeek();
-        } else {
-          this.pendingHostSelectedSeek = null;
+
+      // Host echoes often omit isSelected. Keep hostSelectedMarkerId so ↑/↓ can
+      // still walk other comments at the same time. Clear only when that id is gone.
+      if (selected) {
+        if (selected.id !== this.hostSelectedMarkerId) {
+          this.hostSelectedMarkerId = selected.id;
+          if (Number.isFinite(selected.time)) {
+            this.pendingHostSelectedSeek = selected;
+            this.applyPendingHostSelectedSeek();
+          }
         }
+      } else if (this.hostSelectedMarkerId && !markers.some(marker => marker.id === this.hostSelectedMarkerId)) {
+        this.hostSelectedMarkerId = null;
+        this.pendingHostSelectedSeek = null;
       }
       this.renderUI();
     });
     MP3Viewer_defineProperty(this, "handleCommentMarkerClick", marker => {
+      this.exitShuttle();
       this.hostSelectedMarkerId = marker.id;
       this.pendingHostSelectedSeek = marker;
       if (this.mediaEl) {
@@ -35869,6 +37089,12 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.mediaEl = this.mediaContainerEl.appendChild(document.createElement('audio'));
     this.mediaEl.setAttribute('preload', 'auto');
     this.commentMarkers = [];
+    this.hostSelectedMarkerId = null;
+    this.shuttleDirection = null;
+    this.shuttleRate = 0;
+    this.reverseShuttleTimer = 0;
+    this.keyboardVolumeStep = 0;
+    this.keyboardZoomStep = 0;
   }
   bindCommentMarkersListener() {
     if (!this.isAudioPlayerV2) {
@@ -35888,6 +37114,212 @@ class MP3Viewer extends media_MediaBaseViewer {
     return this.featureEnabled(constants/* AUDIO_PLAYER_V2 */.Ku) && this.useReactControls();
   }
 
+  /**
+   * V2 audio keymap. Flag off and video keep MediaBaseViewer.handleKeydownReact.
+   * Alt is not in Preview's key decoder — read it from the native event.
+   *
+   * @param {string} key
+   * @param {KeyboardEvent} [event]
+   * @return {boolean} consumed
+   */
+  onKeydown(key, event) {
+    if (this.isAudioPlayerV2 && this.handleKeydownAudioV2(key, event)) {
+      return true;
+    }
+    return super.onKeydown(key, event);
+  }
+  handleKeydownAudioV2(key, event) {
+    const decoded = (key || '').toLowerCase();
+    const altKey = !!(event && event.altKey);
+    switch (decoded) {
+      case 'space':
+        this.toggleV2Play();
+        return true;
+      case 'k':
+        this.exitShuttle();
+        this.pause(undefined, true);
+        return true;
+      case 'j':
+        this.shuttle('reverse');
+        return true;
+      case 'l':
+        this.shuttle('forward');
+        return true;
+      case 'arrowleft':
+        this.quickSeek(-AUDIO_V2_SKIP_SEC);
+        return true;
+      case 'arrowright':
+        this.quickSeek(AUDIO_V2_SKIP_SEC);
+        return true;
+      case ',':
+        this.frameStep('back');
+        return true;
+      case '.':
+        this.frameStep('forward');
+        return true;
+      case 'arrowup':
+        if (altKey || !(this.commentMarkers || []).some(marker => Number.isFinite(marker.time))) {
+          this.stepKeyboardVolume(1);
+          return true;
+        }
+        this.jumpToCommentMarker(-1);
+        return true;
+      case 'arrowdown':
+        if (altKey || !(this.commentMarkers || []).some(marker => Number.isFinite(marker.time))) {
+          this.stepKeyboardVolume(-1);
+          return true;
+        }
+        this.jumpToCommentMarker(1);
+        return true;
+      case 'end':
+        if (!this.mediaEl || !Number.isFinite(this.mediaEl.duration)) {
+          return false;
+        }
+        this.exitShuttle();
+        this.setMediaTime(this.mediaEl.duration);
+        return true;
+      case '0':
+      case 'home':
+        this.exitShuttle();
+        return false;
+      case 'shift+arrowleft':
+        this.quickSeek(-AUDIO_V2_SHIFT_SKIP_SEC);
+        return true;
+      case 'shift+arrowright':
+        this.quickSeek(AUDIO_V2_SHIFT_SKIP_SEC);
+        return true;
+      case 'i':
+      case 'o':
+      case '/':
+      case 'shift+l':
+        // Range UI is not on this branch yet. Consume so I/O/loop cannot
+        // fall through to shuttle or Preview navigation.
+        return true;
+      case 'shift++':
+      case '+':
+      case '=':
+        this.stepKeyboardZoom(1);
+        return true;
+      case '-':
+      case 'shift+_':
+        this.stepKeyboardZoom(-1);
+        return true;
+      default:
+        return false;
+    }
+  }
+  toggleV2Play() {
+    const reverseShuttle = this.shuttleDirection === 'reverse';
+    const wasPlaying = !!(this.mediaEl && !this.mediaEl.paused);
+    this.exitShuttle();
+    if (reverseShuttle || wasPlaying) {
+      this.pause(undefined, true);
+      return;
+    }
+    this.handlePlayRequest();
+  }
+  shuttle(direction) {
+    const sameDirection = this.shuttleDirection === direction;
+    const rate = nextShuttleRate(this.shuttleRate, sameDirection);
+    if (direction === 'forward') {
+      this.startForwardShuttle(rate);
+      return;
+    }
+    this.startReverseShuttle(rate);
+  }
+  startForwardShuttle(rate) {
+    this.stopReverseShuttle();
+    this.shuttleDirection = 'forward';
+    this.shuttleRate = rate;
+    this.userRequestedPlay = true;
+    const playPromise = this.play();
+    if (this.mediaEl) {
+      this.mediaEl.playbackRate = this.shuttleRate;
+    }
+    if (playPromise && typeof playPromise.then === 'function') {
+      playPromise.then(() => {
+        if (this.mediaEl && this.shuttleDirection === 'forward') {
+          this.mediaEl.playbackRate = this.shuttleRate;
+        }
+      }).catch(() => {});
+    }
+  }
+  startReverseShuttle(rate) {
+    this.stopReverseShuttle();
+    this.shuttleDirection = 'reverse';
+    this.shuttleRate = rate;
+    this.userRequestedPlay = true;
+    this.pause(undefined, true);
+    this.handleRate();
+    this.reverseShuttleTimer = window.setInterval(() => {
+      if (!this.mediaEl || this.mediaEl.currentTime <= 0) {
+        this.exitShuttle();
+        return;
+      }
+      this.quickSeek(-(this.shuttleRate * AUDIO_V2_SHUTTLE_TICK_MS / 1000));
+      if (this.mediaEl.currentTime <= 0) {
+        this.exitShuttle();
+      }
+    }, AUDIO_V2_SHUTTLE_TICK_MS);
+  }
+  stopReverseShuttle() {
+    if (this.reverseShuttleTimer) {
+      window.clearInterval(this.reverseShuttleTimer);
+      this.reverseShuttleTimer = 0;
+    }
+  }
+  exitShuttle() {
+    const wasShuttling = !!this.shuttleDirection;
+    this.stopReverseShuttle();
+    this.shuttleDirection = null;
+    this.shuttleRate = 0;
+    if (wasShuttling) {
+      this.handleRate();
+    }
+  }
+
+  /**
+   * Keep the settings rate unless forward shuttle owns playbackRate.
+   *
+   * @inheritdoc
+   */
+  handleRate() {
+    if (this.shuttleDirection === 'forward' && this.shuttleRate > 0 && this.mediaEl) {
+      this.mediaEl.playbackRate = this.shuttleRate;
+      if (this.controls) {
+        this.renderUI();
+      }
+      return;
+    }
+    super.handleRate();
+  }
+  jumpToCommentMarker(direction) {
+    if (!this.mediaEl) {
+      return;
+    }
+    const target = nextCommentMarker(this.commentMarkers, {
+      direction,
+      selectedId: this.hostSelectedMarkerId,
+      time: this.mediaEl.currentTime
+    });
+    if (!target || target.id === this.hostSelectedMarkerId) {
+      return;
+    }
+    this.handleCommentMarkerClick(target);
+  }
+  stepKeyboardVolume(direction) {
+    this.keyboardVolumeStep += 1;
+    if (direction > 0) {
+      this.increaseVolume();
+      return;
+    }
+    this.decreaseVolume();
+  }
+  stepKeyboardZoom(direction) {
+    this.keyboardZoomStep += direction;
+    this.renderUI();
+  }
+
   /**
    * Load v2 controls (and wavesurfer) only when the audio player v2 gate is on.
    *
@@ -35930,7 +37362,7 @@ class MP3Viewer extends media_MediaBaseViewer {
    * @return {Promise<{ default: Function }>} MP3ControlsV2 module
    */
   importV2Controls() {
-    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 6180));
+    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 7450));
   }
 
   /**
@@ -35953,6 +37385,9 @@ class MP3Viewer extends media_MediaBaseViewer {
    */
   destroy() {
     this.removeListener('comment_markers', this.handleCommentMarkersUpdated);
+    this.stopReverseShuttle();
+    this.shuttleDirection = null;
+    this.shuttleRate = 0;
     this.abortWaveformLoads();
     super.destroy();
   }
@@ -36328,6 +37763,7 @@ class MP3Viewer extends media_MediaBaseViewer {
       return;
     }
     this.pendingHostSelectedSeek = null;
+    this.exitShuttle();
     this.mediaEl.pause();
     if (this.mediaEl.currentTime !== marker.time) {
       this.mediaEl.currentTime = marker.time;
@@ -36370,6 +37806,9 @@ class MP3Viewer extends media_MediaBaseViewer {
       const Mp3ControlsV2 = this.MP3ControlsV2;
       this.controls.render(/*#__PURE__*/external_react_["default"].createElement(Mp3ControlsV2, MP3Viewer_extends({}, sharedProps, {
         commentMarkers: this.commentMarkers || [],
+        hasStartedPlayback: !!this.userRequestedPlay,
+        keyboardVolumeStep: this.keyboardVolumeStep,
+        keyboardZoomStep: this.keyboardZoomStep,
         mediaEl: this.mediaEl,
         onCommentMarkerClick: this.handleCommentMarkerClick,
         peaks: this.waveformPeaks
@@ -37968,7 +39407,7 @@ function VideoControls({
     onPlayPause: onPlayPause
   })), /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-VideoControls-group bp-VideoControls-group--media-controls"
-  }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.A, {
+  }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.Ay, {
     onMuteChange: onMuteChange,
     onVolumeChange: onVolumeChange,
     volume: volume
@@ -38527,7 +39966,7 @@ function VideoControlsV2({
     mediaEl: mediaEl
   })), /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-VideoControlsV2-group bp-VideoControlsV2-group--right"
-  }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.A, {
+  }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.Ay, {
     onMuteChange: onMuteChange,
     onVolumeChange: onVolumeChange,
     volume: volume