box-content-preview 3.92.0 → 3.94.0

package/dist/lib/index.js

@@ -620,8 +620,8 @@ const VIEWER_EVENT = {
   // When gallery view opens
   load: 'load',
   // Preview is finished loading.
-  mediaEndAutoplay: 'mediaendautoplay',
-  // Media playback has completed, with autoplay enabled.
+  mediaEndPlayNext: 'mediaEndPlayNext',
+  // Media playback has completed, with play-next enabled.
   metric: 'viewermetric',
   // A viewer metric.
   notificationHide: 'notificationhide',
@@ -1018,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.92.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.94.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 = {};
@@ -2143,7 +2143,7 @@ function DurationLabels({
 
 /***/ },
 
-/***/ 6929
+/***/ 9229
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 
@@ -2250,6 +2250,36 @@ function MediaSettingsMenuAutoplay({
 }
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaSettingsMenuGuides.tsx
 var MediaSettingsMenuGuides = __webpack_require__(4692);
+;// ./src/lib/viewers/controls/media/MediaSettingsMenuPlayNext.tsx
+
+
+function MediaSettingsMenuPlayNext({
+  playNext,
+  onPlayNextChange
+}) {
+  const {
+    setActiveMenu
+  } = external_react_["default"].useContext(Settings/* default */.A.Context);
+  const handleChange = value => {
+    setActiveMenu(SettingsContext/* Menu */.W.MAIN);
+    onPlayNextChange(value);
+  };
+  return /*#__PURE__*/external_react_["default"].createElement(Settings/* default */.A.Menu, {
+    name: SettingsContext/* Menu */.W.PLAY_NEXT
+  }, /*#__PURE__*/external_react_["default"].createElement(Settings/* default */.A.MenuBack, {
+    label: "Play next file"
+  }), /*#__PURE__*/external_react_["default"].createElement(Settings/* default */.A.RadioItem, {
+    isSelected: !playNext,
+    label: "Disabled",
+    onChange: handleChange,
+    value: false
+  }), /*#__PURE__*/external_react_["default"].createElement(Settings/* default */.A.RadioItem, {
+    isSelected: playNext,
+    label: "Enabled",
+    onChange: handleChange,
+    value: true
+  }));
+}
 ;// ./src/lib/viewers/controls/media/MediaSettingsMenuQuality.tsx
 
 
@@ -2402,6 +2432,7 @@ function MediaSettingsMenuSubtitles({
 
 
 
+
 function MediaSettings({
   audioTrack,
   audioTracks = [],
@@ -2416,7 +2447,9 @@ function MediaSettings({
   onGuideChange = (noop_default()),
   onQualityChange,
   onRateChange,
+  onPlayNextChange,
   onSubtitleChange,
+  playNext = false,
   quality,
   rate,
   subtitle,
@@ -2425,7 +2458,9 @@ function MediaSettings({
 }) {
   const subtitleDisplayLanguage = getDisplayLanguage(subtitle, subtitles);
   const autoValue = autoplay ? "Enabled" : "Disabled";
+  const playNextValue = playNext ? "Enabled" : "Disabled";
   const rateValue = rate === '1.0' || !rate ? "Normal" : rate;
+  const showPlayNext = typeof onPlayNextChange === 'function';
   const labelledAudioTracks = external_react_["default"].useMemo(() => addLabels(audioTracks), [audioTracks]);
   const hydratedSelectedAudioTrack = labelledAudioTracks.find(({
     id
@@ -2444,6 +2479,11 @@ function MediaSettings({
     label: "Autoplay",
     target: SettingsContext/* Menu */.W.AUTOPLAY,
     value: autoValue
+  }), showPlayNext && /*#__PURE__*/external_react_["default"].createElement(Settings/* default */.A.MenuItem, {
+    "data-testid": "bp-media-settings-play-next",
+    label: "Play next file",
+    target: SettingsContext/* Menu */.W.PLAY_NEXT,
+    value: playNextValue
   }), /*#__PURE__*/external_react_["default"].createElement(Settings/* default */.A.MenuItem, {
     "data-testid": "bp-media-settings-speed",
     label: "Speed",
@@ -2473,6 +2513,9 @@ function MediaSettings({
   })), /*#__PURE__*/external_react_["default"].createElement(MediaSettingsMenuAutoplay, {
     autoplay: autoplay,
     onAutoplayChange: onAutoplayChange
+  }), showPlayNext && onPlayNextChange && /*#__PURE__*/external_react_["default"].createElement(MediaSettingsMenuPlayNext, {
+    onPlayNextChange: onPlayNextChange,
+    playNext: playNext
   }), /*#__PURE__*/external_react_["default"].createElement(MediaSettingsMenuRate, {
     onRateChange: onRateChange,
     rate: rate
@@ -3069,6 +3112,13 @@ function VolumeSliderControl(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   const [isScrubbing, setIsScrubbing] = external_react_["default"].useState(false);
   const sliderElRef = external_react_["default"].useRef(null);
+  const recordScrub = () => {
+    window.Box?.Preview?.resin?.recordAction({
+      action: 'programmatic',
+      component: 'toolbar',
+      target: 'volumeSlider'
+    });
+  };
   const getPositionRelativeToSlider = external_react_["default"].useCallback(clientY => {
     const {
       current: sliderEl
@@ -3100,10 +3150,12 @@ function VolumeSliderControl(_ref) {
     const key = (0,util/* decodeKeydown */.wU)(event);
     if (key === 'ArrowDown') {
       event.stopPropagation(); // Prevents global key handling
+      recordScrub();
       onUpdate(Math.max(min, Math.min(value - step, max)));
     }
     if (key === 'ArrowUp') {
       event.stopPropagation(); // Prevents global key handling
+      recordScrub();
       onUpdate(Math.max(min, Math.min(value + step, max)));
     }
   };
@@ -3116,6 +3168,7 @@ function VolumeSliderControl(_ref) {
       clientY
     } = event;
     if (button > 1 || ctrlKey || metaKey) return;
+    recordScrub();
     onUpdate(getPositionValue(pageY, clientY));
     setIsScrubbing(true);
     // Prevent clicking on the slider from triggering the mouse down event on the parent slider track
@@ -3138,6 +3191,7 @@ function VolumeSliderControl(_ref) {
   const handleTouchStart = ({
     touches
   }) => {
+    recordScrub();
     onUpdate(getPositionValue(touches[0].pageY, touches[0].clientY));
     setIsScrubbing(true);
   };
@@ -4179,7 +4233,14 @@ function SettingsRadioItem(props, ref) {
     value
   } = props;
   const displayedValue = label || value.toString();
+  const recordAction = window.Box?.Preview?.resin?.recordAction;
+  const settingsRadioItemAction = {
+    action: 'programmatic',
+    component: 'toolbar',
+    target: 'settingsRadioItem'
+  };
   const handleClick = () => {
+    recordAction?.(settingsRadioItemAction);
     onChange(value);
   };
   const handleKeydown = event => {
@@ -4187,6 +4248,7 @@ function SettingsRadioItem(props, ref) {
     if (key !== 'ArrowLeft' && key !== 'Enter' && key !== 'Space') {
       return;
     }
+    recordAction?.(settingsRadioItemAction);
     onChange(value);
   };
   return /*#__PURE__*/external_react_["default"].createElement("div", {
@@ -4339,6 +4401,7 @@ let Menu = /*#__PURE__*/function (Menu) {
   Menu["AUDIO"] = "audio";
   Menu["AUTOPLAY"] = "autoplay";
   Menu["GUIDES"] = "guides";
+  Menu["PLAY_NEXT"] = "playnext";
   Menu["QUALITY"] = "quality";
   Menu["RATE"] = "rate";
   Menu["SUBTITLES"] = "subtitles";
@@ -4375,7 +4438,7 @@ var util = __webpack_require__(4410);
 // extracted by mini-css-extract-plugin
 
 ;// ./src/lib/viewers/controls/slider/SliderControl.tsx
-const _excluded = ["className", "max", "min", "onMove", "onUpdate", "step", "title", "track", "value"];
+const _excluded = ["className", "data-resin-target", "max", "min", "onMove", "onUpdate", "step", "title", "track", "value"];
 function _extends() { return _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; }, _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; }
@@ -4387,6 +4450,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 function SliderControl(_ref) {
   let {
       className,
+      'data-resin-target': resinTarget,
       max = 100,
       min = 0,
       onMove = (noop_default()),
@@ -4399,6 +4463,16 @@ function SliderControl(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   const [isScrubbing, setIsScrubbing] = external_react_["default"].useState(false);
   const sliderElRef = external_react_["default"].useRef(null);
+  const recordScrub = () => {
+    if (!resinTarget) {
+      return;
+    }
+    window.Box?.Preview?.resin?.recordAction({
+      action: 'programmatic',
+      component: 'toolbar',
+      target: resinTarget
+    });
+  };
   const getPosition = external_react_["default"].useCallback(pageX => {
     const {
       current: sliderEl
@@ -4425,10 +4499,12 @@ function SliderControl(_ref) {
     const key = (0,util/* decodeKeydown */.wU)(event);
     if (key === 'ArrowLeft') {
       event.stopPropagation(); // Prevents global key handling
+      recordScrub();
       onUpdate(Math.max(min, Math.min(value - step, max)));
     }
     if (key === 'ArrowRight') {
       event.stopPropagation(); // Prevents global key handling
+      recordScrub();
       onUpdate(Math.max(min, Math.min(value + step, max)));
     }
   };
@@ -4439,6 +4515,7 @@ function SliderControl(_ref) {
     pageX
   }) => {
     if (button > 1 || ctrlKey || metaKey) return;
+    recordScrub();
     onUpdate(getPositionValue(pageX));
     setIsScrubbing(true);
   };
@@ -4458,6 +4535,7 @@ function SliderControl(_ref) {
   const handleTouchStart = ({
     touches
   }) => {
+    recordScrub();
     onUpdate(getPositionValue(touches[0].pageX));
     setIsScrubbing(true);
   };
@@ -4495,6 +4573,7 @@ function SliderControl(_ref) {
     className: classnames_default()('bp-SliderControl', className, {
       'bp-is-scrubbing': isScrubbing
     }),
+    "data-resin-target": resinTarget,
     onKeyDown: handleKeydown,
     onMouseDown: handleMouseDown,
     onMouseMove: handleMouseMove,
@@ -4530,7 +4609,7 @@ function getPdfjsWorkerSrc() {
 
 /***/ },
 
-/***/ 7450
+/***/ 8862
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 
@@ -4546,8 +4625,8 @@ var external_react_ = __webpack_require__(1649);
 // EXTERNAL MODULE: ./node_modules/lodash/isFinite.js
 var lodash_isFinite = __webpack_require__(2297);
 var isFinite_default = /*#__PURE__*/__webpack_require__.n(lodash_isFinite);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaSettings.tsx + 5 modules
-var MediaSettings = __webpack_require__(6929);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaSettings.tsx + 6 modules
+var MediaSettings = __webpack_require__(9229);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseToggle.tsx + 1 modules
 var PlayPauseToggle = __webpack_require__(6321);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 1 modules
@@ -4654,321 +4733,8 @@ function morphPeaks(from, to, elapsedMs) {
   }
   return out;
 }
-;// ./src/lib/viewers/media/waveform/viewport.ts
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-
-/** Visible window: start/end times, pixels-per-second, and the current zoom. */
-function createWaveformViewport({
-  durationSec,
-  gutterPx = 0,
-  heightPx,
-  maxZoom,
-  scrollLeftPx,
-  widthPx,
-  zoomLevel
-}) {
-  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 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,
-    scrollLeftPx,
-    startSec,
-    widthPx,
-    zoomLevel: zoom
-  };
-}
-
-/** Same viewport with a different scroll, so start/end times update. */
-function getViewportAtScroll(viewport, scrollLeftPx) {
-  return createWaveformViewport(_objectSpread(_objectSpread({}, 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.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. */
-function positionPxFromTime(timeSec, viewport) {
-  return (timeSec - viewport.startSec) * viewport.pixelsPerSecond;
-}
-
-/** Media time under a point this many CSS pixels from the left of the visible window. */
-function timeFromPositionPx(positionPx, viewport) {
-  if (!(viewport.pixelsPerSecond > 0)) {
-    return viewport.startSec;
-  }
-  return viewport.startSec + positionPx / viewport.pixelsPerSecond;
-}
-
-/** True when this time sits inside the visible window. */
-function isTimeInView(timeSec, viewport) {
-  return timeSec >= viewport.startSec && timeSec <= viewport.endSec;
-}
-
-/** UI max zoom: 24×, ~1 peak per CSS pixel, and a minimum visible window. */
-function getWaveformZoomMax({
-  durationSec,
-  peakCount,
-  viewWidthPx
-}) {
-  if (!(peakCount > 0) || !(viewWidthPx > 0)) {
-    return constants/* WAVEFORM_ZOOM_MIN */.LW;
-  }
-  const peakLimitedMax = Math.floor(peakCount / viewWidthPx);
-  const durationLimitedMax = durationSec > 0 ? durationSec / constants/* WAVEFORM_MIN_VIEW_WINDOW_SEC */.Kl : constants/* WAVEFORM_ZOOM_MIN */.LW;
-  return Math.max(constants/* WAVEFORM_ZOOM_MIN */.LW, Math.min(constants/* WAVEFORM_ZOOM_MAX */.tK, peakLimitedMax, durationLimitedMax));
-}
-
-/** Keep zoom between 1× and this file's max. */
-function clampWaveformZoom(zoomLevel, maxZoom = constants/* WAVEFORM_ZOOM_MIN */.LW) {
-  const max = Math.max(constants/* WAVEFORM_ZOOM_MIN */.LW, maxZoom);
-  if (!Number.isFinite(zoomLevel)) {
-    return constants/* WAVEFORM_ZOOM_MIN */.LW;
-  }
-  return Math.min(max, Math.max(constants/* WAVEFORM_ZOOM_MIN */.LW, zoomLevel));
-}
-
-/** 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 (!(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);
-  const zoom = clampWaveformZoom(zoomLevel, max);
-  if (max <= constants/* WAVEFORM_ZOOM_MIN */.LW) {
-    return 0;
-  }
-  return (zoom - constants/* WAVEFORM_ZOOM_MIN */.LW) / (max - constants/* WAVEFORM_ZOOM_MIN */.LW) * constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh;
-}
-
-/** Inverse of sliderValueFromZoom. */
-function zoomFromSliderValue(value, maxZoom = constants/* WAVEFORM_ZOOM_MIN */.LW) {
-  const max = Math.max(constants/* WAVEFORM_ZOOM_MIN */.LW, maxZoom);
-  if (max <= constants/* WAVEFORM_ZOOM_MIN */.LW) {
-    return constants/* WAVEFORM_ZOOM_MIN */.LW;
-  }
-  const t = Math.min(constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh, Math.max(0, value)) / constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh;
-  return clampWaveformZoom(constants/* WAVEFORM_ZOOM_MIN */.LW + t * (max - constants/* WAVEFORM_ZOOM_MIN */.LW), max);
-}
-
-/** 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) {
-  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). */
-function clampScrollLeft(scrollLeftPx, viewport) {
-  if (!Number.isFinite(scrollLeftPx)) {
-    return 0;
-  }
-  return Math.min(maxScrollLeft(viewport), Math.max(0, scrollLeftPx));
-}
-
-/** Center this time in the view, clamped so the window still fills the canvas. */
-function getCenteredScrollLeft(timeSec, viewport) {
-  return clampScrollLeft(timeSec * viewport.pixelsPerSecond + (viewport.gutterPx || 0) - viewport.widthPx / 2, viewport);
-}
-
-/**
- * Host/media seek while zoomed: jump so the time (and its comment avatar) is on screen.
- * No-op at fit-to-width or when that time is already visible.
- */
-function getSeekCameraAction({
-  cameraMode = 'desktop',
-  timeSec,
-  viewport
-}) {
-  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'
-    };
-  }
-  if (isTimeInView(timeSec, viewport)) {
-    return {
-      type: 'none'
-    };
-  }
-  return {
-    type: 'jump',
-    scrollLeftPx: getCenteredScrollLeft(timeSec, viewport)
-  };
-}
-
-/** 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)) {
-    return 0;
-  }
-  return Math.min(Math.max(0, insetPx), widthPx / 3);
-}
-
-/** CSS left for a playhead pinned to the follow inset. */
-function getPinnedPlayheadLeft(widthPx, insetPx = constants/* WAVEFORM_FOLLOW_INSET_PX */.NM) {
-  const inset = getFollowInsetPx(widthPx, insetPx);
-  if (!(widthPx > 0)) {
-    return '0%';
-  }
-  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) {
-    return `${positionPxFromTime(timeSec, viewport) / viewport.widthPx * 100}%`;
-  }
-  const progress = durationSec > 0 ? Math.min(1, Math.max(0, timeSec / durationSec)) : 0;
-  return `${progress * 100}%`;
-}
-
-/**
- * Walk across the view until the playhead nears the right edge, then follow.
- * 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'
-    };
-  }
-  const inset = getFollowInsetPx(viewport.widthPx, insetPx);
-  const viewX = positionPxFromTime(timeSec, viewport);
-  const playheadCanvasX = timeSec * viewport.pixelsPerSecond;
-  const followX = viewport.widthPx - inset;
-  if (viewX < 0) {
-    if (!playJustStarted) {
-      return {
-        type: 'none'
-      };
-    }
-    return {
-      type: 'jump',
-      scrollLeftPx: clampScrollLeft(playheadCanvasX - inset, viewport)
-    };
-  }
-  if (viewX >= followX) {
-    const unclampedScroll = playheadCanvasX - followX;
-    const scrollLeftPx = clampScrollLeft(unclampedScroll, viewport);
-    if (playJustStarted && viewX > viewport.widthPx) {
-      return {
-        type: 'jump',
-        scrollLeftPx
-      };
-    }
-    return {
-      type: 'followRight',
-      isPlayheadPinned: unclampedScroll <= maxScrollLeft(viewport),
-      scrollLeftPx
-    };
-  }
-  return {
-    type: 'none'
-  };
-}
+// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/viewport.ts
+var waveform_viewport = __webpack_require__(772);
 ;// ./src/lib/viewers/media/waveform/useTapeWaveform.ts
 
 
@@ -5170,6 +4936,32 @@ function WaveformCommentMarkers({
     }));
   })));
 }
+;// ./src/lib/viewers/media/waveform/WaveformGeneratingIndicator.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/media/waveform/WaveformGeneratingIndicator.tsx
+
+
+function WaveformGeneratingIndicator() {
+  const label = "Generating waveform";
+  return /*#__PURE__*/external_react_["default"].createElement("div", {
+    "aria-live": "polite",
+    className: "bp-WaveformGeneratingIndicator",
+    "data-testid": "bp-waveform-generating",
+    role: "status"
+  }, /*#__PURE__*/external_react_["default"].createElement("span", {
+    "aria-hidden": "true",
+    className: "bp-WaveformGeneratingIndicator-bars"
+  }, /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-WaveformGeneratingIndicator-bar"
+  }), /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-WaveformGeneratingIndicator-bar"
+  }), /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-WaveformGeneratingIndicator-bar"
+  })), /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-WaveformGeneratingIndicator-label"
+  }, label));
+}
 ;// external "react-dom"
 
 ;// ./node_modules/wavesurfer.js/dist/wavesurfer.esm.js
@@ -5496,200 +5288,8 @@ 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
-  };
-}
+// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/range.ts
+var waveform_range = __webpack_require__(4253);
 ;// ./src/lib/viewers/media/waveform/usePlayheadCamera.ts
 
 
@@ -5783,7 +5383,7 @@ function usePlayheadCamera({
     wavesurfer.setScroll(scrollLeftPx);
     const appliedScrollLeft = getScrollLeft(wavesurfer, scrollLeftPx);
     lastCameraScrollRef.current = appliedScrollLeft;
-    viewportRef.current = getViewportAtScroll(viewportRef.current, appliedScrollLeft);
+    viewportRef.current = (0,waveform_viewport/* getViewportAtScroll */.NI)(viewportRef.current, appliedScrollLeft);
     window.requestAnimationFrame(() => {
       // Keep the flag through delayed `scroll` while the camera is driving.
       if (jumpAnimationRef.current || isFollowPinnedRef.current) {
@@ -5800,7 +5400,7 @@ function usePlayheadCamera({
     if (!playhead || !isPinned || !(viewport.widthPx > 0)) {
       return;
     }
-    playhead.style.left = isTape() ? getTapePinnedPlayheadLeft() : getPinnedPlayheadLeft(viewport.widthPx);
+    playhead.style.left = isTape() ? (0,waveform_viewport/* getTapePinnedPlayheadLeft */.yW)() : (0,waveform_viewport/* getPinnedPlayheadLeft */.gl)(viewport.widthPx);
   }, [isTape]);
   const apply = (0,external_react_.useCallback)((timeSec, playJustStarted = false) => {
     mediaTimeRef.current = timeSec;
@@ -5819,8 +5419,8 @@ function usePlayheadCamera({
     if (jumpAnimationRef.current && !playJustStarted) {
       return;
     }
-    const liveViewport = getViewportAtScroll(viewport, getScrollLeft(wavesurfer, viewport.scrollLeftPx));
-    const action = getPlayheadCameraAction({
+    const liveViewport = (0,waveform_viewport/* getViewportAtScroll */.NI)(viewport, getScrollLeft(wavesurfer, viewport.scrollLeftPx));
+    const action = (0,waveform_viewport/* getPlayheadCameraAction */.aJ)({
       cameraMode: cameraModeRef.current,
       isPlaying: true,
       playJustStarted,
@@ -5858,12 +5458,12 @@ function usePlayheadCamera({
     const start = (0,util/* getCurrentTimeMs */.RU)();
     const tick = now => {
       const t = Math.min(1, (now - start) / constants/* WAVEFORM_PLAYHEAD_JUMP_MS */.Bq);
-      const liveAction = getPlayheadCameraAction({
+      const liveAction = (0,waveform_viewport/* getPlayheadCameraAction */.aJ)({
         cameraMode: cameraModeRef.current,
         isPlaying: true,
         playJustStarted: true,
         timeSec: mediaTimeRef.current,
-        viewport: getViewportAtScroll(viewportRef.current, getScrollLeft(wavesurfer, from))
+        viewport: (0,waveform_viewport/* getViewportAtScroll */.NI)(viewportRef.current, getScrollLeft(wavesurfer, from))
       });
       const to = liveAction.type === 'none' ? action.scrollLeftPx : liveAction.scrollLeftPx;
       applyScrollLeft(from + (to - from) * (1 - (1 - t) * (1 - t)), false);
@@ -5886,7 +5486,7 @@ function usePlayheadCamera({
   const isUserPan = (0,external_react_.useCallback)(scrollLeftPx => {
     const isCameraOwnedScroll = programmaticScrollRef.current || jumpAnimationRef.current !== 0;
     const lastCameraScroll = lastCameraScrollRef.current;
-    const maxScroll = maxScrollLeft(viewportRef.current);
+    const maxScroll = (0,waveform_viewport/* maxScrollLeft */.d0)(viewportRef.current);
     const isClampedToMax = lastCameraScroll != null && scrollLeftPx >= maxScroll - 1 && lastCameraScroll >= maxScroll - 1;
     const isFollowCameraScroll = isFollowPinnedRef.current && lastCameraScroll != null && Math.abs(scrollLeftPx - lastCameraScroll) <= 1;
     return !(isCameraOwnedScroll && (jumpAnimationRef.current !== 0 || isFollowCameraScroll || isClampedToMax || !isFollowPinnedRef.current));
@@ -5902,8 +5502,8 @@ function usePlayheadCamera({
     if (!isTape()) {
       isFollowPinnedRef.current = false;
     }
-    const liveViewport = getViewportAtScroll(viewportRef.current, getScrollLeft(wavesurfer, viewportRef.current.scrollLeftPx));
-    const action = getSeekCameraAction({
+    const liveViewport = (0,waveform_viewport/* getViewportAtScroll */.NI)(viewportRef.current, getScrollLeft(wavesurfer, viewportRef.current.scrollLeftPx));
+    const action = (0,waveform_viewport/* getSeekCameraAction */.wA)({
       cameraMode: cameraModeRef.current,
       timeSec,
       viewport: liveViewport
@@ -5924,7 +5524,7 @@ function usePlayheadCamera({
       applyScrollLeft(from + (to - from) * (1 - (1 - t) * (1 - t)), false);
       const playhead = playheadRef.current;
       if (playhead) {
-        playhead.style.left = isTape() ? getTapePinnedPlayheadLeft() : timeLeftPercent(mediaTimeRef.current, viewportRef.current.durationSec, viewportRef.current);
+        playhead.style.left = isTape() ? (0,waveform_viewport/* getTapePinnedPlayheadLeft */.yW)() : (0,waveform_viewport/* timeLeftPercent */.Mu)(mediaTimeRef.current, viewportRef.current.durationSec, viewportRef.current);
       }
       if (t < 1) {
         jumpAnimationRef.current = window.requestAnimationFrame(tick);
@@ -5942,16 +5542,16 @@ function usePlayheadCamera({
     }
     const scrollLeftPx = getScrollLeft(wavesurfer);
     if (!isUserPan(scrollLeftPx)) {
-      viewportRef.current = getViewportAtScroll(viewportRef.current, scrollLeftPx);
+      viewportRef.current = (0,waveform_viewport/* getViewportAtScroll */.NI)(viewportRef.current, scrollLeftPx);
       return;
     }
-    viewportRef.current = getViewportAtScroll(viewportRef.current, scrollLeftPx);
+    viewportRef.current = (0,waveform_viewport/* getViewportAtScroll */.NI)(viewportRef.current, scrollLeftPx);
     const playhead = playheadRef.current;
     if (isTape()) {
       if (playhead) {
-        playhead.style.left = getTapePinnedPlayheadLeft();
+        playhead.style.left = (0,waveform_viewport/* getTapePinnedPlayheadLeft */.yW)();
       }
-      const pinTimeSec = Math.min(viewportRef.current.durationSec, Math.max(0, timeFromPositionPx(viewportRef.current.widthPx / 2, viewportRef.current)));
+      const pinTimeSec = Math.min(viewportRef.current.durationSec, Math.max(0, (0,waveform_viewport/* timeFromPositionPx */.lZ)(viewportRef.current.widthPx / 2, viewportRef.current)));
       userIsScrollingRef.current = true;
       window.clearTimeout(scrollSettleTimerRef.current);
       scrollSettleTimerRef.current = window.setTimeout(() => {
@@ -5969,7 +5569,7 @@ function usePlayheadCamera({
     }
     const timeSec = readMediaTime();
     if (playhead) {
-      playhead.style.left = timeLeftPercent(timeSec, viewportRef.current.durationSec, viewportRef.current);
+      playhead.style.left = (0,waveform_viewport/* timeLeftPercent */.Mu)(timeSec, viewportRef.current.durationSec, viewportRef.current);
     }
     userIsScrollingRef.current = true;
     holdFollowUntilInsetRef.current = true;
@@ -6005,6 +5605,25 @@ function usePlayheadCamera({
     seekTo
   };
 }
+;// ./src/lib/viewers/controls/icons/IconComment24.tsx
+function _extends() { return _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; }, _extends.apply(null, arguments); }
+
+function IconComment24(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", _extends({
+    "data-testid": "IconComment24",
+    fill: "none",
+    focusable: false,
+    height: 24,
+    viewBox: "0 0 24 24",
+    width: 24
+  }, props), /*#__PURE__*/external_react_.createElement("path", {
+    clipRule: "evenodd",
+    d: "M4 11c0-2.297.683-3.999 1.926-5.138C7.18 4.712 9.155 4 12 4c2.845 0 4.819.711 6.074 1.862C19.317 7.001 20 8.702 20 11c0 2.297-.683 3.999-1.926 5.138C16.82 17.288 14.845 18 12 18h-.459a1.1 1.1 0 0 0-.774.318C9.665 19.41 8.243 20.048 7.16 20.2c-.553.078-.905.013-1.07-.065C6 20.09 6 20.084 6 20V20c0-.22.072-.347.361-.813.285-.458.665-1.104.685-2.104a1.1 1.1 0 0 0-.606-1.005C4.885 15.298 4 13.745 4 11Zm8-9c-3.155 0-5.681.789-7.426 2.388C2.817 5.999 2 8.298 2 11c0 2.938.91 5.227 2.966 6.539a2.79 2.79 0 0 1-.303.592l-.055.088C4.372 18.591 4 19.18 4 20c0 .912.496 1.59 1.23 1.94.657.313 1.453.345 2.205.24 1.428-.2 3.108-.95 4.464-2.18H12c3.155 0 5.681-.789 7.426-2.388C21.183 16.001 22 13.702 22 11c0-2.703-.817-5.001-2.574-6.612C17.68 2.788 15.155 2 12 2ZM8 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm5-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+}
+/* harmony default export */ const icons_IconComment24 = (IconComment24);
 ;// ./src/lib/viewers/media/waveform/WaveformRangeSelection.scss
 // extracted by mini-css-extract-plugin
 
@@ -6015,6 +5634,7 @@ function usePlayheadCamera({
 
 
 
+
 function offsetLeftCss(base, offsetPx) {
   if (!offsetPx) {
     return base;
@@ -6026,13 +5646,13 @@ function applyHandleLeft(el, timeSec, durationSec, viewport, collapsedOffsetPx =
   if (!el) {
     return;
   }
-  el.style.left = offsetLeftCss(timeLeftPercent(timeSec, durationSec, viewport), collapsedOffsetPx);
+  el.style.left = offsetLeftCss((0,waveform_viewport/* timeLeftPercent */.Mu)(timeSec, durationSec, viewport), collapsedOffsetPx);
 }
 function applyRegion(el, startSec, endSec, durationSec, viewport, collapsed) {
   if (!el) {
     return;
   }
-  const start = timeLeftPercent(startSec, durationSec, viewport);
+  const start = (0,waveform_viewport/* timeLeftPercent */.Mu)(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;
@@ -6040,7 +5660,7 @@ function applyRegion(el, startSec, endSec, durationSec, viewport, collapsed) {
     el.style.width = `${extentPx * 2}px`;
     return;
   }
-  const end = timeLeftPercent(endSec, durationSec, viewport);
+  const end = (0,waveform_viewport/* timeLeftPercent */.Mu)(endSec, durationSec, viewport);
   el.style.left = offsetLeftCss(start, -halfLine);
   el.style.width = `calc(${end} - ${start} + ${constants/* WAVEFORM_RANGE_HANDLE_LINE_PX */.h1}px)`;
 }
@@ -6051,6 +5671,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   interactive = true,
   isHighlighted = false,
   keepHighlight = true,
+  onDragCreate,
   onDragChange,
   onPreviewChange,
   onRangeChange,
@@ -6062,9 +5683,10 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   const startHandleRef = (0,external_react_.useRef)(null);
   const endHandleRef = (0,external_react_.useRef)(null);
   const tooltipRef = (0,external_react_.useRef)(null);
+  const commentRef = (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 displayedRef = (0,external_react_.useRef)((0,waveform_range/* resolveRange */.Ss)(range, (0,waveform_range/* durationMsFromSec */.uH)(durationSec)));
   const viewportRef = (0,external_react_.useRef)(viewport);
   const durationSecRef = (0,external_react_.useRef)(durationSec);
   const onDragChangeRef = (0,external_react_.useRef)(onDragChange);
@@ -6081,9 +5703,10 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   onRangeChangeRef.current = onRangeChange;
   getPlayheadSecRef.current = getPlayheadSec;
   activeHandleRef.current = activeHandle;
-  const durationMs = durationMsFromSec(durationSec);
-  const displayed = dragRange ?? resolveRange(range, durationMs);
+  const durationMs = (0,waveform_range/* durationMsFromSec */.uH)(durationSec);
+  const displayed = dragRange ?? (0,waveform_range/* resolveRange */.Ss)(range, durationMs);
   displayedRef.current = displayed;
+  const showCommentButton = Boolean(onDragCreate) && displayed.startMs !== displayed.endMs && activeHandle == null;
   const syncPositions = (0,external_react_.useCallback)((next, nextViewport, nextDurationSec) => {
     displayedRef.current = next;
     const collapsed = next.startMs === next.endMs;
@@ -6094,7 +5717,11 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     if (tooltip) {
       const tooltipHandle = activeHandleRef.current ?? 'end';
       const tooltipMs = tooltipHandle === 'start' ? next.startMs : next.endMs;
-      tooltip.style.left = timeLeftPercent(tooltipMs / 1000, nextDurationSec, nextViewport);
+      tooltip.style.left = (0,waveform_viewport/* timeLeftPercent */.Mu)(tooltipMs / 1000, nextDurationSec, nextViewport);
+    }
+    const comment = commentRef.current;
+    if (comment && next.startMs !== next.endMs) {
+      comment.style.left = (0,waveform_viewport/* timeLeftPercent */.Mu)((next.startMs + next.endMs) / 2000, nextDurationSec, nextViewport);
     }
   }, []);
   (0,external_react_.useImperativeHandle)(ref, () => ({
@@ -6105,9 +5732,9 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   }), [syncPositions]);
   (0,external_react_.useLayoutEffect)(() => {
     syncPositions(displayedRef.current, viewportRef.current, durationSec);
-  }, [activeHandle, displayed.endMs, displayed.startMs, durationSec, syncPositions]);
+  }, [activeHandle, displayed.endMs, displayed.startMs, durationSec, showCommentButton, syncPositions]);
   (0,external_react_.useLayoutEffect)(() => {
-    const next = createWaveformViewport({
+    const next = (0,waveform_viewport/* createWaveformViewport */.eq)({
       durationSec: viewport.durationSec,
       heightPx: viewport.heightPx,
       maxZoom: viewport.maxZoom,
@@ -6136,7 +5763,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     if (!didChange) {
       return;
     }
-    const committed = commitRangeChange(drag.range);
+    const committed = (0,waveform_range/* commitRangeChange */.dG)(drag.range);
     if (committed) {
       onRangeChangeRef.current?.(committed);
     }
@@ -6153,17 +5780,17 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     const rect = root.getBoundingClientRect();
     const pointerX = event.clientX - rect.left;
     const vp = viewportRef.current;
-    const duration = durationMsFromSec(durationSecRef.current);
+    const duration = (0,waveform_range/* durationMsFromSec */.uH)(durationSecRef.current);
     const playheadSec = getPlayheadSecRef.current?.() ?? currentTimeSec;
-    const pointerMs = snapTimeMs({
+    const pointerMs = (0,waveform_range/* snapTimeMs */.Mh)({
       pixelsPerSecond: vp.pixelsPerSecond,
       playheadMs: playheadSec * 1000,
-      timeMs: pointerTimeMs(pointerX, vp)
+      timeMs: (0,waveform_range/* pointerTimeMs */.v2)(pointerX, vp)
     });
     if (drag.originMs === drag.range.startMs && drag.originMs === drag.range.endMs && pointerMs === drag.originMs) {
       return;
     }
-    const next = dragRangeHandle({
+    const next = (0,waveform_range/* dragRangeHandle */.Mo)({
       durationMs: duration,
       handle: drag.handle,
       pointerMs,
@@ -6188,7 +5815,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     }
     event.preventDefault();
     event.stopPropagation();
-    const resolved = resolveRange(rangeRef.current, durationMsFromSec(durationSecRef.current));
+    const resolved = (0,waveform_range/* resolveRange */.Ss)(rangeRef.current, (0,waveform_range/* durationMsFromSec */.uH)(durationSecRef.current));
     dragRef.current = {
       handle,
       originMs: handle === 'start' ? resolved.startMs : resolved.endMs,
@@ -6204,7 +5831,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     setDragRange(resolved);
     onDragChangeRef.current?.(true);
     onPreviewChangeRef.current?.({
-      endMs: isRangeCollapsed(rangeRef.current) ? null : resolved.endMs,
+      endMs: (0,waveform_range/* isRangeCollapsed */.BT)(rangeRef.current) ? null : resolved.endMs,
       startMs: resolved.startMs
     });
   }, [interactive]);
@@ -6216,15 +5843,15 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     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({
+    const resolved = (0,waveform_range/* resolveRange */.Ss)(rangeRef.current, (0,waveform_range/* durationMsFromSec */.uH)(durationSecRef.current));
+    const handle = (0,waveform_range/* pickRangeHandle */.HG)({
+      endX: (0,waveform_range/* visualRangeHandlePx */.Eh)({
         handle: 'end',
         range: resolved,
         viewport: vp
       }),
       pointerX,
-      startX: visualRangeHandlePx({
+      startX: (0,waveform_range/* visualRangeHandlePx */.Eh)({
         handle: 'start',
         range: resolved,
         viewport: vp
@@ -6271,6 +5898,22 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   const tooltipMs = tooltipHandle === 'start' ? displayed.startMs : displayed.endMs;
   const collapsed = displayed.startMs === displayed.endMs;
   const highlight = isHighlighted || collapsed;
+  const commentButton = showCommentButton && onDragCreate ? /*#__PURE__*/external_react_["default"].createElement("button", {
+    ref: commentRef,
+    className: "bp-WaveformRange-comment",
+    "data-testid": "bp-waveform-range-comment",
+    onClick: event => {
+      event.stopPropagation();
+      onDragCreate();
+    },
+    onPointerDown: event => {
+      event.stopPropagation();
+    },
+    type: "button"
+  }, /*#__PURE__*/external_react_["default"].createElement(icons_IconComment24, {
+    "aria-hidden": "true",
+    className: "bp-WaveformRange-commentIcon"
+  }), "Comment") : null;
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: rootRef,
     className: `bp-WaveformRange${keepHighlight ? ' bp-WaveformRange--persist' : ''}${highlight ? ' bp-WaveformRange--highlight' : ''}`,
@@ -6303,18 +5946,18 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     "data-testid": "bp-waveform-range-tooltip"
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformRange-tooltipTime"
-  }, formatTime(tooltipMs / 1000))));
+  }, formatTime(tooltipMs / 1000))), commentButton);
 });
 /* 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
 
 ;// ./src/lib/viewers/media/waveform/WaveformView.tsx
-function WaveformView_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function WaveformView_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? WaveformView_ownKeys(Object(t), !0).forEach(function (r) { WaveformView_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : WaveformView_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function WaveformView_defineProperty(e, r, t) { return (r = WaveformView_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function WaveformView_toPropertyKey(t) { var i = WaveformView_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function WaveformView_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 
 
 
@@ -6423,6 +6066,46 @@ function zoomOriginAtPointer(pointerX, wavesurfer, durationSec, fallbackWidth) {
     timeSec: (WaveformView_getScrollLeft(wavesurfer) + pointerX) / fullWidth * durationSec
   };
 }
+/** Null when the press should stay a click-to-seek or is not on an empty span of the track. */
+function rangeCreateDragFromEvent(event, source) {
+  const {
+    track
+  } = source;
+  if (!track || !(source.durationSec > 0) || !Number.isFinite(event.clientX)) {
+    return null;
+  }
+  const rect = track.getBoundingClientRect();
+  if (!(rect.width > 0)) {
+    return null;
+  }
+  const pointerX = event.clientX - rect.left;
+  if (source.range && !(0,waveform_range/* isRangeCollapsed */.BT)(source.range) && (0,waveform_range/* isPointerOverRange */.H5)({
+    pointerX,
+    range: source.range,
+    viewport: source.viewport
+  })) {
+    return null;
+  }
+  return {
+    active: false,
+    originMs: (0,waveform_range/* clampTimeMs */.DL)((0,waveform_range/* pointerTimeMs */.v2)(pointerX, source.viewport), (0,waveform_range/* durationMsFromSec */.uH)(source.durationSec)),
+    originX: event.clientX,
+    pointerId: event.pointerId,
+    range: null
+  };
+}
+function drawnRangeFromMove(drag, clientX, track, viewport, playheadSec, durationSec) {
+  const pointerMs = (0,waveform_range/* snapTimeMs */.Mh)({
+    pixelsPerSecond: viewport.pixelsPerSecond,
+    playheadMs: playheadSec * 1000,
+    timeMs: (0,waveform_range/* pointerTimeMs */.v2)(clientX - track.getBoundingClientRect().left, viewport)
+  });
+  return (0,waveform_range/* rangeFromCreateDrag */.Qp)({
+    durationMs: (0,waveform_range/* durationMsFromSec */.uH)(durationSec),
+    originMs: drag.originMs,
+    pointerMs
+  });
+}
 
 /**
  * Renders V1 peaks with wavesurfer. Does not fetch audio or attach a media element.
@@ -6438,6 +6121,8 @@ function WaveformView({
   mediaEl,
   onPlayPause,
   onRangeChange,
+  onRangeClear,
+  onRangeDragCreate,
   onRangeDragChange,
   onSeek,
   onViewportChange,
@@ -6464,6 +6149,9 @@ function WaveformView({
   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 onRangeChangeRef = (0,external_react_.useRef)(onRangeChange); // latest range commit; drag-create must not re-bind
+  const onRangeClearRef = (0,external_react_.useRef)(onRangeClear); // latest click-outside clear; WaveSurfer click must not re-bind
+  const onRangeDragChangeRef = (0,external_react_.useRef)(onRangeDragChange); // latest drag flag; unmount 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
 
@@ -6496,6 +6184,9 @@ function WaveformView({
   mediaElRef.current = mediaEl;
   onPlayPauseRef.current = onPlayPause;
   onSeekRef.current = onSeek;
+  onRangeChangeRef.current = onRangeChange;
+  onRangeClearRef.current = onRangeClear;
+  onRangeDragChangeRef.current = onRangeDragChange;
   onViewportChangeRef.current = onViewportChange;
   peaksRef.current = peaks;
   const [internalZoom, setInternalZoom] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
@@ -6505,19 +6196,23 @@ function WaveformView({
   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 [createRange, setCreateRange] = (0,external_react_.useState)(null);
   const [isRangeDragging, setIsRangeDragging] = (0,external_react_.useState)(false);
   const isRangeDraggingRef = (0,external_react_.useRef)(false);
+  const rangeRef = (0,external_react_.useRef)(range); // latest committed draft; drag-create must not start on top of an open span
+  const createDragRef = (0,external_react_.useRef)(null);
+  const removeCreateDragListenersRef = (0,external_react_.useRef)(null);
   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({
+  const maxZoom = (0,waveform_viewport/* getWaveformZoomMax */.by)({
     durationSec,
     peakCount: peaks.length,
     viewWidthPx: canvasWidthPx
   });
   hasZoomHandlersRef.current = maxZoom > constants/* WAVEFORM_ZOOM_MIN */.LW && (typeof onZoomChange === 'function' || typeof zoomLevelProp !== 'number');
-  const zoomLevel = clampWaveformZoom(isControlled ? zoomLevelProp : internalZoom, maxZoom);
+  const zoomLevel = (0,waveform_viewport/* clampWaveformZoom */.ii)(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); // last applied zoom; tape recenters only when this changes
@@ -6527,25 +6222,26 @@ function WaveformView({
   const bufferProgress = getBufferedProgress(bufferedRange, durationSec);
   bufferProgressRef.current = bufferProgress;
   hoverProgressRef.current = isRangeDragging ? null : hoverProgress;
-  const activeRange = isRangeDragging ? previewRange ?? range : range;
+  rangeRef.current = range;
+  const activeRange = (isRangeDragging ? previewRange ?? createRange : createRange) ?? range;
   const activeRangeRef = (0,external_react_.useRef)(activeRange);
   activeRangeRef.current = activeRange;
-  const durationMs = durationMsFromSec(durationSec);
+  const durationMs = (0,waveform_range/* durationMsFromSec */.uH)(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({
+    return (0,waveform_range/* rangeProgress */.D$)((0,waveform_range/* resolveRange */.Ss)({
       endMs: rangeEndMs ?? null,
       startMs: rangeStartMs
     }, durationMs), durationMs);
   }, [durationMs, rangeEndMs, rangeStartMs]);
   rangeProgressRef.current = activeRangeProgress;
-  const viewport = (0,external_react_.useMemo)(() => createWaveformViewport({
+  const viewport = (0,external_react_.useMemo)(() => (0,waveform_viewport/* createWaveformViewport */.eq)({
     durationSec,
-    gutterPx: isTape ? getTapeGutterPx(canvasWidthPx) : 0,
+    gutterPx: isTape ? (0,waveform_viewport/* getTapeGutterPx */.iA)(canvasWidthPx) : 0,
     heightPx: height,
     maxZoom,
     scrollLeftPx: scrollLeft,
@@ -6603,7 +6299,7 @@ function WaveformView({
   }, [isUserPanning]);
   toggleTapePlaybackRef.current = toggleTapePlayback;
   (0,external_react_.useLayoutEffect)(() => {
-    viewportRef.current = createWaveformViewport({
+    viewportRef.current = (0,waveform_viewport/* createWaveformViewport */.eq)({
       durationSec: viewport.durationSec,
       gutterPx: viewport.gutterPx,
       heightPx: viewport.heightPx,
@@ -6614,7 +6310,7 @@ function WaveformView({
     });
   }, [viewport]);
   const setZoomLevel = (0,external_react_.useCallback)(nextZoom => {
-    const zoom = clampWaveformZoom(nextZoom, maxZoom);
+    const zoom = (0,waveform_viewport/* clampWaveformZoom */.ii)(nextZoom, maxZoom);
     if (!isControlled) {
       setInternalZoom(zoom);
     }
@@ -6669,7 +6365,7 @@ function WaveformView({
       return;
     }
     const scrollLeftPx = WaveformView_getScrollLeft(wavesurfer);
-    viewportRef.current = getViewportAtScroll(viewportRef.current, scrollLeftPx);
+    viewportRef.current = (0,waveform_viewport/* getViewportAtScroll */.NI)(viewportRef.current, scrollLeftPx);
     rangeLayerRef.current?.applyViewport(viewportRef.current);
     onViewportChangeRef.current?.(viewportRef.current);
     setScrollLeft(scrollLeftPx);
@@ -6680,9 +6376,9 @@ function WaveformView({
       return;
     }
     if (isTape) {
-      playhead.style.left = getTapePinnedPlayheadLeft();
+      playhead.style.left = (0,waveform_viewport/* getTapePinnedPlayheadLeft */.yW)();
     } else if (!isFollowPinned()) {
-      playhead.style.left = timeLeftPercent(timeSec, durationSecRef.current, viewportRef.current);
+      playhead.style.left = (0,waveform_viewport/* timeLeftPercent */.Mu)(timeSec, durationSecRef.current, viewportRef.current);
     }
     rangeLayerRef.current?.applyViewport(viewportRef.current);
     const wavesurfer = wavesurferRef.current;
@@ -6700,14 +6396,14 @@ function WaveformView({
       return;
     }
     const viewWidthPx = wavesurfer.getWidth ? wavesurfer.getWidth() : container.clientWidth;
-    const minPxPerSec = getZoomedPixelsPerSecond({
+    const minPxPerSec = (0,waveform_viewport/* getZoomedPixelsPerSecond */.J$)({
       durationSec,
       isTape,
       maxZoom,
       viewWidthPx,
       zoomLevel
     });
-    const gutterPx = isTape ? getTapeGutterPx(viewWidthPx) : 0;
+    const gutterPx = isTape ? (0,waveform_viewport/* getTapeGutterPx */.iA)(viewWidthPx) : 0;
     const origin = isTape ? null : zoomOriginRef.current;
     zoomOriginRef.current = null;
     const didZoomChange = prevZoomRef.current !== zoomLevel;
@@ -6716,7 +6412,7 @@ function WaveformView({
     }
     suppressViewportSyncRef.current = true;
     try {
-      wavesurfer.setOptions(WaveformView_objectSpread({
+      wavesurfer.setOptions(_objectSpread({
         autoScroll: false,
         fillParent: !isTape,
         minPxPerSec
@@ -6726,7 +6422,7 @@ function WaveformView({
       } : {}));
       applyWaveformGutters(wavesurfer, gutterPx);
       if (minPxPerSec > 0) {
-        const windowViewport = createWaveformViewport({
+        const windowViewport = (0,waveform_viewport/* createWaveformViewport */.eq)({
           durationSec,
           gutterPx,
           heightPx: liveHeightRef.current || height,
@@ -6738,7 +6434,7 @@ function WaveformView({
         if (origin) {
           applyScrollLeft(origin.timeSec * minPxPerSec + gutterPx - origin.pointerX, true);
         } else if (didZoomChange && (isTape || !pointerZoomRef.current)) {
-          applyScrollLeft(getCenteredScrollLeft(currentTimeRef.current, windowViewport), true);
+          applyScrollLeft((0,waveform_viewport/* getCenteredScrollLeft */.b6)(currentTimeRef.current, windowViewport), true);
         }
       }
       lastSetTimeSecRef.current = currentTimeRef.current;
@@ -6787,11 +6483,23 @@ function WaveformView({
       if (!interactiveRef.current || isRangeDraggingRef.current) {
         return;
       }
+      const rangeDraft = activeRangeRef.current;
+      const timeSec = relativeX * durationSecRef.current;
+      if (rangeDraft && !(0,waveform_range/* isRangeCollapsed */.BT)(rangeDraft)) {
+        const pointerX = (0,waveform_viewport/* positionPxFromTime */.TO)(timeSec, viewportRef.current);
+        if (!(0,waveform_range/* isPointerOverRange */.H5)({
+          pointerX,
+          range: rangeDraft,
+          viewport: viewportRef.current
+        })) {
+          onRangeClearRef.current?.();
+        }
+      }
       if (cameraModeRef.current === 'tape') {
         toggleTapePlaybackRef.current?.();
         return;
       }
-      onSeekRef.current?.(relativeX * durationSecRef.current);
+      onSeekRef.current?.(timeSec);
     });
     const unsubscribeScroll = wavesurfer.on('scroll', () => {
       if (suppressViewportSyncRef.current) {
@@ -6884,7 +6592,7 @@ function WaveformView({
   }, [syncViewport]);
   (0,external_react_.useEffect)(() => {
     const rawZoom = isControlled ? zoomLevelProp : internalZoom;
-    const clamped = clampWaveformZoom(typeof rawZoom === 'number' ? rawZoom : constants/* WAVEFORM_ZOOM_MIN */.LW, maxZoom);
+    const clamped = (0,waveform_viewport/* clampWaveformZoom */.ii)(typeof rawZoom === 'number' ? rawZoom : constants/* WAVEFORM_ZOOM_MIN */.LW, maxZoom);
     if (clamped === rawZoom) {
       return;
     }
@@ -7104,17 +6812,17 @@ function WaveformView({
       return;
     }
     const vp = viewportRef.current;
-    const draft = activeRangeRef.current;
-    setIsRangeHovered(!!draft && isPointerOverRange({
+    const rangeDraft = activeRangeRef.current;
+    setIsRangeHovered(!!rangeDraft && (0,waveform_range/* isPointerOverRange */.H5)({
       pointerX,
-      range: draft,
+      range: rangeDraft,
       viewport: vp
     }));
     if (!interactive || isRangeDraggingRef.current || !(durationSec > 0)) {
       return;
     }
     if (vp.pixelsPerSecond > 0) {
-      setHoverProgress(Math.min(1, Math.max(0, timeFromPositionPx(pointerX, vp) / durationSec)));
+      setHoverProgress(Math.min(1, Math.max(0, (0,waveform_viewport/* timeFromPositionPx */.lZ)(pointerX, vp) / durationSec)));
       return;
     }
     setHoverProgress(Math.min(1, Math.max(0, pointerX / rect.width)));
@@ -7140,12 +6848,104 @@ function WaveformView({
   const getPlayheadSec = (0,external_react_.useCallback)(() => {
     return mediaElRef.current ? mediaElRef.current.currentTime : currentTimeRef.current;
   }, []);
+  (0,external_react_.useEffect)(() => {
+    return () => {
+      removeCreateDragListenersRef.current?.();
+      if (createDragRef.current?.active) {
+        createDragRef.current = null;
+        onRangeDragChangeRef.current?.(false);
+      }
+    };
+  }, []);
+  (0,external_react_.useLayoutEffect)(() => {
+    if (isRangeDraggingRef.current) {
+      return;
+    }
+    setCreateRange(current => current == null ? current : null);
+  }, [range]);
+  const onTrackPointerDown = (0,external_react_.useCallback)(event => {
+    if (cameraModeRef.current === 'tape' || !interactiveRef.current || event.button > 0 || event.ctrlKey || event.metaKey || isRangeDraggingRef.current || createDragRef.current) {
+      return;
+    }
+    const {
+      target
+    } = event;
+    if (target instanceof Element && target.closest('[data-testid="bp-waveform-range-handle-start"], [data-testid="bp-waveform-range-handle-end"], [data-testid="bp-waveform-range-comment"]')) {
+      return;
+    }
+    const drag = rangeCreateDragFromEvent(event, {
+      durationSec: durationSecRef.current,
+      range: rangeRef.current,
+      track: trackRef.current,
+      viewport: viewportRef.current
+    });
+    if (!drag) {
+      return;
+    }
+    createDragRef.current = drag;
+    const onMove = moveEvent => {
+      if (createDragRef.current !== drag || moveEvent.pointerId !== drag.pointerId) {
+        return;
+      }
+      if (!Number.isFinite(moveEvent.clientX)) {
+        return;
+      }
+      if (!drag.active && Math.abs(moveEvent.clientX - drag.originX) < constants/* WAVEFORM_RANGE_CREATE_DRAG_PX */.B4) {
+        return;
+      }
+      const track = trackRef.current;
+      if (!track) {
+        return;
+      }
+      moveEvent.preventDefault();
+      const playheadSec = mediaElRef.current ? mediaElRef.current.currentTime : currentTimeRef.current;
+      drag.range = drawnRangeFromMove(drag, moveEvent.clientX, track, viewportRef.current, playheadSec, durationSecRef.current);
+      if (!drag.active) {
+        drag.active = true;
+        handleRangeDragChange(true);
+      }
+      setCreateRange(drag.range);
+      setPreviewRange(drag.range);
+    };
+    let onUp = () => undefined;
+    const removeListeners = () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      if (removeCreateDragListenersRef.current === removeListeners) {
+        removeCreateDragListenersRef.current = null;
+      }
+    };
+    onUp = upEvent => {
+      if (createDragRef.current !== drag || upEvent.pointerId && upEvent.pointerId !== drag.pointerId) {
+        return;
+      }
+      const wasActive = drag.active;
+      const drawn = drag.range;
+      createDragRef.current = null;
+      removeListeners();
+      if (!wasActive || !drawn) {
+        return;
+      }
+      const committed = (0,waveform_range/* commitRangeChange */.dG)(drawn);
+      if (committed) {
+        setCreateRange(committed);
+        onRangeChangeRef.current?.(committed);
+      }
+      handleRangeDragChange(false);
+    };
+    removeCreateDragListenersRef.current = removeListeners;
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+  }, [handleRangeDragChange]);
   const bindOverlayPortalHost = (0,external_react_.useCallback)(node => {
     const host = node?.parentElement ?? null;
     setOverlayPortalHost(prev => prev === host ? prev : host);
   }, []);
-  const hoverLeft = isRangeDragging || hoverProgress == null ? null : timeLeftPercent(hoverProgress * durationSec, durationSec, viewportRef.current);
-  const showRangeOverlay = Boolean(range) && (isRangeDragging || !isPlaying || !isRangeCollapsed(range));
+  const hoverLeft = isRangeDragging || hoverProgress == null ? null : (0,waveform_viewport/* timeLeftPercent */.Mu)(hoverProgress * durationSec, durationSec, viewportRef.current);
+  const overlayRange = createRange ?? range;
+  const showRangeOverlay = Boolean(overlayRange) && (isRangeDragging || !isPlaying || !(0,waveform_range/* isRangeCollapsed */.BT)(overlayRange));
   const scrubTimeChip = isTape && scrubPreviewTimeSec != null ? /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformView-hover bp-WaveformView-hover--tape",
     "data-testid": "bp-waveform-hover"
@@ -7166,6 +6966,7 @@ function WaveformView({
     className: "bp-WaveformView-track",
     onMouseLeave: interactive && !isTape ? onHoverLeave : undefined,
     onMouseMove: interactive && !isTape ? onHoverMove : undefined,
+    onPointerDown: onTrackPointerDown,
     onPointerMove: interactive && !isTape ? event => {
       if (event.pointerType === 'touch') {
         onHoverLeave();
@@ -7187,7 +6988,7 @@ function WaveformView({
     "aria-hidden": "true",
     className: "bp-WaveformView-playhead",
     "data-testid": "bp-waveform-playhead"
-  }), showRangeOverlay && range && /*#__PURE__*/external_react_["default"].createElement(waveform_WaveformRangeSelection, {
+  }), showRangeOverlay && overlayRange && /*#__PURE__*/external_react_["default"].createElement(waveform_WaveformRangeSelection, {
     ref: rangeLayerRef,
     currentTimeSec: currentTime,
     durationSec: durationSec,
@@ -7196,9 +6997,10 @@ function WaveformView({
     isHighlighted: isRangeDragging || isRangeHovered,
     keepHighlight: true,
     onDragChange: handleRangeDragChange,
+    onDragCreate: interactive && !isRangeDragging ? onRangeDragCreate : undefined,
     onPreviewChange: setPreviewRange,
     onRangeChange: interactive ? onRangeChange : undefined,
-    range: range,
+    range: overlayRange,
     viewport: viewport
   }), hoverLeft != null && hoverProgress != null && !isRangeDragging && /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformView-hover",
@@ -7302,8 +7104,9 @@ function WaveformZoomControl({
   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 zoom = (0,waveform_viewport/* clampWaveformZoom */.ii)(zoomLevel, maxZoom);
+  const zoomValue = Math.round((0,waveform_viewport/* sliderValueFromZoom */.Iw)(zoom, maxZoom));
+  const zoomMultiplier = (0,waveform_viewport/* getWaveformZoomMultiplier */.gd)(zoom);
   const isOpen = isHovered || isFocused || isRevealed || isPinned;
   const isAtMinZoom = zoomValue <= 0;
   const isAtMaxZoom = zoomValue >= constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh;
@@ -7329,10 +7132,10 @@ function WaveformZoomControl({
     return () => document.removeEventListener('pointerdown', closeIfOutside);
   }, [isPinned]);
   const handleSlider = (0,external_react_.useCallback)(newValue => {
-    onZoomChange(zoomFromSliderValue(newValue, maxZoom));
+    onZoomChange((0,waveform_viewport/* zoomFromSliderValue */.eU)(newValue, maxZoom));
   }, [maxZoom, onZoomChange]);
   const handleStep = (0,external_react_.useCallback)(delta => {
-    onZoomChange(stepWaveformZoom(zoom, maxZoom, delta));
+    onZoomChange((0,waveform_viewport/* stepWaveformZoom */.xV)(zoom, maxZoom, delta));
   }, [maxZoom, onZoomChange, zoom]);
   const handleZoomInPointerDown = (0,external_react_.useCallback)(() => {
     wasFlyoutOpenOnPointerDownRef.current = isHovered || isFocused || isRevealed || isPinned;
@@ -7350,6 +7153,7 @@ function WaveformZoomControl({
     ref: zoomControlElRef,
     "aria-label": "Zoom",
     className: classnames_default()('bp-WaveformZoomControl', {
+      'bp-has-multiplier': zoomMultiplier,
       'bp-is-open': isOpen
     }),
     "data-testid": "bp-waveform-zoom",
@@ -7375,7 +7179,15 @@ function WaveformZoomControl({
       }, constants/* WAVEFORM_ZOOM_DISMISS_MS */.m6);
     },
     role: "group"
-  }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+  }, zoomMultiplier && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-WaveformZoomControl-multiplier",
+    "data-testid": "bp-waveform-zoom-multiplier",
+    title: "Current zoom level"
+  }, zoomMultiplier), /*#__PURE__*/external_react_["default"].createElement("span", {
+    "aria-hidden": "true",
+    className: "bp-WaveformZoomControl-divider",
+    "data-testid": "bp-waveform-zoom-divider"
+  })), /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
     "aria-disabled": isOpen && isAtMaxZoom,
     className: "bp-WaveformZoomControl-button",
     "data-resin-target": "waveformZoomIn",
@@ -7436,26 +7248,35 @@ function WaveformZoomControl({
 
 
 
+
 const PLACEHOLDER_PEAKS = placeholderPeaks();
 function MP3ControlsV2({
   autoplay,
   bufferedRange,
   commentMarkers,
+  commentRangeDraft = null,
   currentTime,
   durationTime,
   hasStartedPlayback = false,
+  isGeneratingWaveform = false,
   isPlaying,
   keyboardVolumeStep = 0,
   keyboardZoomStep = 0,
   mediaEl,
   onAutoplayChange,
   onCommentMarkerClick,
+  onCommentRangeChange,
+  onCommentRangeClear,
+  onCommentRangeDragCreate,
+  onCommentRangeDragChange,
   onMuteChange,
   onPlayPause,
+  onPlayNextChange,
   onRateChange,
   onTimeChange,
   onVolumeChange,
   peaks,
+  playNext,
   rate,
   volume
 }) {
@@ -7478,7 +7299,7 @@ function MP3ControlsV2({
   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);
+    setViewport(prev => (0,waveform_viewport/* viewportEquals */.KH)(prev, next) ? prev : next);
   }, []);
   const revealZoomControl = (0,external_react_.useCallback)(() => {
     setIsZoomRevealed(true);
@@ -7503,11 +7324,11 @@ function MP3ControlsV2({
       return;
     }
     userChangedTapeZoomRef.current = true;
-    setZoomLevel(prev => stepWaveformZoom(prev, maxZoom, steps * constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD));
+    setZoomLevel(prev => (0,waveform_viewport/* stepWaveformZoom */.xV)(prev, maxZoom, steps * constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD));
     revealZoomControl();
   }, [keyboardZoomStep, maxZoom, revealZoomControl]);
   (0,external_react_.useEffect)(() => {
-    setZoomLevel(prev => clampWaveformZoom(prev, maxZoom));
+    setZoomLevel(prev => (0,waveform_viewport/* clampWaveformZoom */.ii)(prev, maxZoom));
   }, [maxZoom]);
   (0,external_react_.useEffect)(() => {
     if (!isTape) {
@@ -7525,7 +7346,7 @@ function MP3ControlsV2({
       hasAppliedTapeDefaultZoomRef.current = true;
       return;
     }
-    const nextZoom = getTapeDefaultZoom(durationValue, Math.max(maxZoom, viewport.maxZoom));
+    const nextZoom = (0,waveform_viewport/* getTapeDefaultZoom */.lz)(durationValue, Math.max(maxZoom, viewport.maxZoom));
     hasAppliedTapeDefaultZoomRef.current = true;
     setZoomLevel(prev => prev === nextZoom ? prev : nextZoom);
   }, [durationValue, hasRealPeaks, hasWaveformDuration, isTape, maxZoom, viewport]);
@@ -7558,6 +7379,7 @@ function MP3ControlsV2({
   const showPlayOverlay = !hasStarted && !isPlaying;
   const hasZoomHandlers = hasRealPeaks && !showPlayOverlay;
   const hasZoomControl = hasZoomHandlers && hasMediaMetadata && maxZoom > constants/* WAVEFORM_ZOOM_MIN */.LW;
+  const showGeneratingWaveformIndicator = isGeneratingWaveform && !hasRealPeaks;
   const waveformZoomLevel = isTape || hasZoomHandlers ? zoomLevel : constants/* WAVEFORM_ZOOM_MIN */.LW;
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2",
@@ -7575,10 +7397,15 @@ function MP3ControlsV2({
     isPlaying: isPlaying,
     mediaEl: mediaEl,
     onPlayPause: isWaveformInteractive ? onPlayPause : undefined,
+    onRangeChange: isWaveformInteractive ? onCommentRangeChange : undefined,
+    onRangeClear: isWaveformInteractive ? onCommentRangeClear : undefined,
+    onRangeDragChange: onCommentRangeDragChange,
+    onRangeDragCreate: isWaveformInteractive ? onCommentRangeDragCreate : undefined,
     onSeek: isWaveformInteractive ? onTimeChange : undefined,
     onViewportChange: hasRealPeaks ? handleViewportChange : undefined,
     onZoomChange: hasZoomHandlers ? handleWaveformZoom : undefined,
     peaks: waveformPeaks,
+    range: commentRangeDraft,
     zoomLevel: waveformZoomLevel
   }), /*#__PURE__*/external_react_["default"].createElement(WaveformCommentMarkers, {
     commentMarkers: waveformMarkers,
@@ -7587,9 +7414,9 @@ function MP3ControlsV2({
     onCommentMarkerClick: handleCommentMarkerClick,
     selectedId: selectedMarkerId,
     viewport: viewport
-  })), hasZoomControl && /*#__PURE__*/external_react_["default"].createElement("div", {
+  })), (showGeneratingWaveformIndicator || hasZoomControl) && /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2-waveformZoom"
-  }, /*#__PURE__*/external_react_["default"].createElement(WaveformZoomControl, {
+  }, showGeneratingWaveformIndicator ? /*#__PURE__*/external_react_["default"].createElement(WaveformGeneratingIndicator, null) : /*#__PURE__*/external_react_["default"].createElement(WaveformZoomControl, {
     isRevealed: isZoomRevealed,
     maxZoom: maxZoom,
     onZoomChange: handleWaveformZoom,
@@ -7635,7 +7462,9 @@ function MP3ControlsV2({
     autoplay: autoplay,
     className: "bp-MP3Controls-settings",
     onAutoplayChange: onAutoplayChange,
+    onPlayNextChange: onPlayNextChange,
     onRateChange: onRateChange,
+    playNext: playNext,
     rate: rate
   }))));
 }
@@ -7714,6 +7543,7 @@ function isFpsAvailable(player) {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   Av: () => (/* binding */ WAVEFORM_TAPE_DEFAULT_WINDOW_SEC),
+/* harmony export */   B4: () => (/* binding */ WAVEFORM_RANGE_CREATE_DRAG_PX),
 /* harmony export */   BG: () => (/* binding */ WAVEFORM_RANGE_COLLAPSED_OFFSET_PX),
 /* harmony export */   Bq: () => (/* binding */ WAVEFORM_PLAYHEAD_JUMP_MS),
 /* harmony export */   DY: () => (/* binding */ WAVEFORM_BAR_RADIUS),
@@ -7810,6 +7640,8 @@ const WAVEFORM_RANGE_COLLAPSED_OFFSET_PX = WAVEFORM_RANGE_HANDLE_LINE_PX / 2 + W
 const WAVEFORM_RANGE_SNAP_PX = 8;
 /** Shortest committed range. Collapsed drafts (`endMs: null`) are exempt. */
 const WAVEFORM_RANGE_MIN_DURATION_MS = 250;
+/** Pointer travel before a waveform press becomes a new draft range. Shorter presses stay click-to-seek. */
+const WAVEFORM_RANGE_CREATE_DRAG_PX = 4;
 const WAVEFORM_RANGE_GRIP_IN_MS = 150;
 const WAVEFORM_RANGE_GRIP_OUT_MS = 100;
 
@@ -8367,6 +8199,244 @@ function loadPeaks(request) {
 
 /***/ },
 
+/***/ 4253
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   BT: () => (/* binding */ isRangeCollapsed),
+/* harmony export */   D$: () => (/* binding */ rangeProgress),
+/* harmony export */   DL: () => (/* binding */ clampTimeMs),
+/* harmony export */   Eh: () => (/* binding */ visualRangeHandlePx),
+/* harmony export */   H5: () => (/* binding */ isPointerOverRange),
+/* harmony export */   HG: () => (/* binding */ pickRangeHandle),
+/* harmony export */   Mh: () => (/* binding */ snapTimeMs),
+/* harmony export */   Mo: () => (/* binding */ dragRangeHandle),
+/* harmony export */   Qp: () => (/* binding */ rangeFromCreateDrag),
+/* harmony export */   Ss: () => (/* binding */ resolveRange),
+/* harmony export */   dG: () => (/* binding */ commitRangeChange),
+/* harmony export */   uH: () => (/* binding */ durationMsFromSec),
+/* harmony export */   v2: () => (/* binding */ pointerTimeMs)
+/* harmony export */ });
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4929);
+/* harmony import */ var _viewport__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(772);
+
+
+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 = (0,_viewport__WEBPACK_IMPORTED_MODULE_1__/* .positionPxFromTime */ .TO)(timeSec, viewport);
+  if (range.startMs !== range.endMs) {
+    return x;
+  }
+  return handle === 'start' ? x - _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_COLLAPSED_OFFSET_PX */ .BG : x + _constants__WEBPACK_IMPORTED_MODULE_0__/* .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__WEBPACK_IMPORTED_MODULE_0__/* .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__WEBPACK_IMPORTED_MODULE_0__/* .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__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX) {
+    if (nextHandle === 'end') {
+      endMs = clampTimeMs(startMs + _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX, duration);
+      if (endMs - startMs < _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX) {
+        startMs = clampTimeMs(endMs - _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX, duration);
+      }
+    } else {
+      startMs = clampTimeMs(endMs - _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX, duration);
+      if (endMs - startMs < _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX) {
+        endMs = clampTimeMs(startMs + _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX, duration);
+      }
+    }
+  }
+  return {
+    handle: nextHandle,
+    range: {
+      endMs,
+      startMs
+    }
+  };
+}
+function pointerTimeMs(pointerX, viewport) {
+  return Math.round((0,_viewport__WEBPACK_IMPORTED_MODULE_1__/* .timeFromPositionPx */ .lZ)(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
+  };
+}
+
+/**
+ * Open a draft from a waveform drag. The press time stays anchored; the pointer
+ * chooses which edge moves. Enforces the minimum span once the drag leaves the point.
+ */
+function rangeFromCreateDrag({
+  durationMs,
+  originMs,
+  pointerMs
+}) {
+  const origin = clampTimeMs(originMs, durationMs);
+  const handle = pointerMs >= origin ? 'end' : 'start';
+  return dragRangeHandle({
+    durationMs,
+    handle,
+    pointerMs,
+    range: {
+      endMs: origin,
+      startMs: origin
+    }
+  }).range;
+}
+function rangeProgress(range, durationMs) {
+  if (!(durationMs > 0) || range.endMs <= range.startMs) {
+    return null;
+  }
+  return {
+    end: range.endMs / durationMs,
+    start: range.startMs / durationMs
+  };
+}
+
+/***/ },
+
 /***/ 1053
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
@@ -8554,6 +8624,369 @@ function isRetryableWaveformError(code) {
 
 /***/ },
 
+/***/ 772
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Iw: () => (/* binding */ sliderValueFromZoom),
+/* harmony export */   J$: () => (/* binding */ getZoomedPixelsPerSecond),
+/* harmony export */   KH: () => (/* binding */ viewportEquals),
+/* harmony export */   Mu: () => (/* binding */ timeLeftPercent),
+/* harmony export */   NI: () => (/* binding */ getViewportAtScroll),
+/* harmony export */   TO: () => (/* binding */ positionPxFromTime),
+/* harmony export */   aJ: () => (/* binding */ getPlayheadCameraAction),
+/* harmony export */   b6: () => (/* binding */ getCenteredScrollLeft),
+/* harmony export */   by: () => (/* binding */ getWaveformZoomMax),
+/* harmony export */   d0: () => (/* binding */ maxScrollLeft),
+/* harmony export */   eU: () => (/* binding */ zoomFromSliderValue),
+/* harmony export */   eq: () => (/* binding */ createWaveformViewport),
+/* harmony export */   gd: () => (/* binding */ getWaveformZoomMultiplier),
+/* harmony export */   gl: () => (/* binding */ getPinnedPlayheadLeft),
+/* harmony export */   iA: () => (/* binding */ getTapeGutterPx),
+/* harmony export */   ii: () => (/* binding */ clampWaveformZoom),
+/* harmony export */   lZ: () => (/* binding */ timeFromPositionPx),
+/* harmony export */   lz: () => (/* binding */ getTapeDefaultZoom),
+/* harmony export */   wA: () => (/* binding */ getSeekCameraAction),
+/* harmony export */   xV: () => (/* binding */ stepWaveformZoom),
+/* harmony export */   yW: () => (/* binding */ getTapePinnedPlayheadLeft)
+/* harmony export */ });
+/* unused harmony exports isTimeInView, getTapeCameraAction, getFollowInsetPx */
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4929);
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+
+/** Visible window: start/end times, pixels-per-second, and the current zoom. */
+function createWaveformViewport({
+  durationSec,
+  gutterPx = 0,
+  heightPx,
+  maxZoom,
+  scrollLeftPx,
+  widthPx,
+  zoomLevel
+}) {
+  const zoom = Number.isFinite(zoomLevel) && zoomLevel > 0 ? zoomLevel : _constants__WEBPACK_IMPORTED_MODULE_0__/* .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 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,
+    scrollLeftPx,
+    startSec,
+    widthPx,
+    zoomLevel: zoom
+  };
+}
+
+/** Same viewport with a different scroll, so start/end times update. */
+function getViewportAtScroll(viewport, scrollLeftPx) {
+  return createWaveformViewport(_objectSpread(_objectSpread({}, 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.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. */
+function positionPxFromTime(timeSec, viewport) {
+  return (timeSec - viewport.startSec) * viewport.pixelsPerSecond;
+}
+
+/** Media time under a point this many CSS pixels from the left of the visible window. */
+function timeFromPositionPx(positionPx, viewport) {
+  if (!(viewport.pixelsPerSecond > 0)) {
+    return viewport.startSec;
+  }
+  return viewport.startSec + positionPx / viewport.pixelsPerSecond;
+}
+
+/** True when this time sits inside the visible window. */
+function isTimeInView(timeSec, viewport) {
+  return timeSec >= viewport.startSec && timeSec <= viewport.endSec;
+}
+
+/** UI max zoom: 24×, ~1 peak per CSS pixel, and a minimum visible window. */
+function getWaveformZoomMax({
+  durationSec,
+  peakCount,
+  viewWidthPx
+}) {
+  if (!(peakCount > 0) || !(viewWidthPx > 0)) {
+    return _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW;
+  }
+  const peakLimitedMax = Math.floor(peakCount / viewWidthPx);
+  const durationLimitedMax = durationSec > 0 ? durationSec / _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_MIN_VIEW_WINDOW_SEC */ .Kl : _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW;
+  return Math.max(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW, Math.min(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MAX */ .tK, peakLimitedMax, durationLimitedMax));
+}
+
+/** Keep zoom between 1× and this file's max. */
+function clampWaveformZoom(zoomLevel, maxZoom = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+  const max = Math.max(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW, maxZoom);
+  if (!Number.isFinite(zoomLevel)) {
+    return _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW;
+  }
+  return Math.min(max, Math.max(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW, zoomLevel));
+}
+
+/** Zoom badge: 1.1×–1.9× below 2×, then whole numbers. Omit at 1×. */
+function getWaveformZoomMultiplier(zoomLevel) {
+  if (!Number.isFinite(zoomLevel) || zoomLevel <= _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+    return null;
+  }
+  if (zoomLevel < 2) {
+    const tenths = Math.round(zoomLevel * 10) / 10;
+    if (tenths <= _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+      return null;
+    }
+    if (tenths >= 2) {
+      return '2x';
+    }
+    return `${tenths.toFixed(1)}x`;
+  }
+  return `${Math.floor(zoomLevel)}x`;
+}
+
+/** WaveSurfer zoom density. 0 = fit the whole file in the view. */
+function getZoomedPixelsPerSecond({
+  durationSec,
+  isTape = false,
+  maxZoom = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW,
+  viewWidthPx,
+  zoomLevel
+}) {
+  const zoom = clampWaveformZoom(zoomLevel, maxZoom);
+  if (!(durationSec > 0) || !(viewWidthPx > 0)) {
+    return 0;
+  }
+  if (!isTape && zoom <= _constants__WEBPACK_IMPORTED_MODULE_0__/* .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__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+  if (!(durationSec > 0)) {
+    return _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW;
+  }
+  return clampWaveformZoom(durationSec / _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_TAPE_DEFAULT_WINDOW_SEC */ .Av, maxZoom);
+}
+
+/** Map zoom (1…max) onto the 0–100 slider. */
+function sliderValueFromZoom(zoomLevel, maxZoom = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+  const max = Math.max(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW, maxZoom);
+  const zoom = clampWaveformZoom(zoomLevel, max);
+  if (max <= _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+    return 0;
+  }
+  return (zoom - _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) / (max - _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) * _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_SLIDER_MAX */ .nh;
+}
+
+/** Inverse of sliderValueFromZoom. */
+function zoomFromSliderValue(value, maxZoom = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+  const max = Math.max(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW, maxZoom);
+  if (max <= _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+    return _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW;
+  }
+  const t = Math.min(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_SLIDER_MAX */ .nh, Math.max(0, value)) / _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_SLIDER_MAX */ .nh;
+  return clampWaveformZoom(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW + t * (max - _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW), max);
+}
+
+/** 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) {
+  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). */
+function clampScrollLeft(scrollLeftPx, viewport) {
+  if (!Number.isFinite(scrollLeftPx)) {
+    return 0;
+  }
+  return Math.min(maxScrollLeft(viewport), Math.max(0, scrollLeftPx));
+}
+
+/** Center this time in the view, clamped so the window still fills the canvas. */
+function getCenteredScrollLeft(timeSec, viewport) {
+  return clampScrollLeft(timeSec * viewport.pixelsPerSecond + (viewport.gutterPx || 0) - viewport.widthPx / 2, viewport);
+}
+
+/**
+ * Host/media seek while zoomed: jump so the time (and its comment avatar) is on screen.
+ * No-op at fit-to-width or when that time is already visible.
+ */
+function getSeekCameraAction({
+  cameraMode = 'desktop',
+  timeSec,
+  viewport
+}) {
+  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__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+    return {
+      type: 'none'
+    };
+  }
+  if (isTimeInView(timeSec, viewport)) {
+    return {
+      type: 'none'
+    };
+  }
+  return {
+    type: 'jump',
+    scrollLeftPx: getCenteredScrollLeft(timeSec, viewport)
+  };
+}
+
+/** 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__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_FOLLOW_INSET_PX */ .NM) {
+  if (!(widthPx > 0)) {
+    return 0;
+  }
+  return Math.min(Math.max(0, insetPx), widthPx / 3);
+}
+
+/** CSS left for a playhead pinned to the follow inset. */
+function getPinnedPlayheadLeft(widthPx, insetPx = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_FOLLOW_INSET_PX */ .NM) {
+  const inset = getFollowInsetPx(widthPx, insetPx);
+  if (!(widthPx > 0)) {
+    return '0%';
+  }
+  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) {
+    return `${positionPxFromTime(timeSec, viewport) / viewport.widthPx * 100}%`;
+  }
+  const progress = durationSec > 0 ? Math.min(1, Math.max(0, timeSec / durationSec)) : 0;
+  return `${progress * 100}%`;
+}
+
+/**
+ * Walk across the view until the playhead nears the right edge, then follow.
+ * Off-screen at play start jumps in; off-screen right while playing keeps following.
+ */
+function getPlayheadCameraAction({
+  cameraMode = 'desktop',
+  insetPx = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_FOLLOW_INSET_PX */ .NM,
+  isPlaying,
+  playJustStarted,
+  timeSec,
+  viewport
+}) {
+  if (cameraMode === 'tape') {
+    return getTapeCameraAction({
+      timeSec,
+      viewport
+    });
+  }
+  if (!isPlaying || viewport.zoomLevel <= _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW || !(viewport.widthPx > 0) || !(viewport.pixelsPerSecond > 0)) {
+    return {
+      type: 'none'
+    };
+  }
+  const inset = getFollowInsetPx(viewport.widthPx, insetPx);
+  const viewX = positionPxFromTime(timeSec, viewport);
+  const playheadCanvasX = timeSec * viewport.pixelsPerSecond;
+  const followX = viewport.widthPx - inset;
+  if (viewX < 0) {
+    if (!playJustStarted) {
+      return {
+        type: 'none'
+      };
+    }
+    return {
+      type: 'jump',
+      scrollLeftPx: clampScrollLeft(playheadCanvasX - inset, viewport)
+    };
+  }
+  if (viewX >= followX) {
+    const unclampedScroll = playheadCanvasX - followX;
+    const scrollLeftPx = clampScrollLeft(unclampedScroll, viewport);
+    if (playJustStarted && viewX > viewport.widthPx) {
+      return {
+        type: 'jump',
+        scrollLeftPx
+      };
+    }
+    return {
+      type: 'followRight',
+      isPlayheadPinned: unclampedScroll <= maxScrollLeft(viewport),
+      scrollLeftPx
+    };
+  }
+  return {
+    type: 'none'
+  };
+}
+
+/***/ },
+
 /***/ 2485
 (module, exports) {
 
@@ -24217,7 +24650,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.92.0";
+const CLIENT_VERSION = "3.94.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -33443,6 +33876,53 @@ class TextLoader extends viewers_AssetLoader {
   }
 }
 /* harmony default export */ const text_TextLoader = (new TextLoader());
+;// ./src/lib/viewers/controls/media/types.ts
+/**
+ * Draft range drawn on the waveform. Sidebar sends `comment_range_draft`
+ * when checkbox is toggled on and Preview keeps the handles until
+ * `comment_range_draft_clear`. A waveform drag can also create a local draft
+ * before the timestamp toggle is on. See media/README.md.
+ * `endMs: null` means a single timestamp — both handles sit on `startMs`.
+ */
+
+/** Committed range after a handle drag. Always a real span (`endMs > startMs`). */
+
+/** Sidebar → viewer: show or update the draft handles. */
+const EVENT_COMMENT_RANGE_DRAFT = 'comment_range_draft';
+
+/** Sidebar → viewer: hide the handles (toggle-off, post, version switch, unmount). */
+const EVENT_COMMENT_RANGE_DRAFT_CLEAR = 'comment_range_draft_clear';
+
+/** Viewer → sidebar: click outside an open range while the timestamp toggle is already on. */
+const EVENT_COMMENT_RANGE_DRAFT_DISMISS = 'comment_range_draft_dismiss';
+
+/**
+ * Viewer → sidebar: a range edit finished while the timestamp toggle is already on.
+ * Pointer-up only. Not used to start commenting — that is `comment_range_compose`.
+ */
+const EVENT_COMMENT_RANGE_DRAFT_CHANGE = 'comment_range_draft_change';
+
+/**
+ * Viewer → sidebar: the user pressed Comment on a draft range.
+ * The host opens Activity if needed, checks the timestamp toggle, and adopts
+ * `{ startMs, endMs }` without echoing `comment_range_draft`.
+ */
+const EVENT_COMMENT_RANGE_DRAG_CREATE = 'comment_range_compose';
+
+/** True when a host draft can be shown. Collapsed drafts use `endMs: null`. */
+function isValidCommentRangeDraft(value) {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  const draft = value;
+  if (!Number.isFinite(draft.startMs)) {
+    return false;
+  }
+  if (draft.endMs != null && (!Number.isFinite(draft.endMs) || Number(draft.endMs) <= Number(draft.startMs))) {
+    return false;
+  }
+  return true;
+}
 // EXTERNAL MODULE: ./node_modules/lodash/isEmpty.js
 var isEmpty = __webpack_require__(2193);
 var isEmpty_default = /*#__PURE__*/__webpack_require__.n(isEmpty);
@@ -35412,6 +35892,7 @@ const CSS_CLASS_MEDIA_CONTAINER = 'bp-media-container';
 const DEFAULT_VOLUME = 1;
 const MEDIA_VOLUME_CACHE_KEY = 'media-volume';
 const MEDIA_AUTOPLAY_CACHE_KEY = 'media-autoplay';
+const MEDIA_PLAY_NEXT_CACHE_KEY = 'media-play-next';
 const MEDIA_SPEED_CACHE_KEY = 'media-speed';
 const MEDIA_VOLUME_INCREMENT = 0.05;
 const EMIT_WAIT_TIME_IN_MILLIS = 100;
@@ -35462,6 +35943,7 @@ class MediaBaseViewer extends viewers_BaseViewer {
     this.containerClickHandler = this.containerClickHandler.bind(this);
     this.errorHandler = this.errorHandler.bind(this);
     this.handleAutoplay = this.handleAutoplay.bind(this);
+    this.handlePlayNext = this.handlePlayNext.bind(this);
     this.handleRate = this.handleRate.bind(this);
     this.handleTimeupdateFromMediaControls = this.handleTimeupdateFromMediaControls.bind(this);
     this.loadeddataHandler = this.loadeddataHandler.bind(this);
@@ -35474,6 +35956,7 @@ class MediaBaseViewer extends viewers_BaseViewer {
     this.resetPlayIcon = this.resetPlayIcon.bind(this);
     this.seekHandler = this.seekHandler.bind(this);
     this.setAutoplay = this.setAutoplay.bind(this);
+    this.setPlayNext = this.setPlayNext.bind(this);
     this.setRate = this.setRate.bind(this);
     this.setTimeCode = this.setTimeCode.bind(this);
     this.setVolume = this.setVolume.bind(this);
@@ -35783,7 +36266,9 @@ class MediaBaseViewer extends viewers_BaseViewer {
    * @return {void}
    */
   handleRate() {
-    const speed = this.cache.get(MEDIA_SPEED_CACHE_KEY) - 0;
+    const cachedSpeed = this.cache.get(MEDIA_SPEED_CACHE_KEY) - 0;
+    // Default to 1x when cache is empty (v2 overlay play can run before loadUIReact).
+    const speed = Number.isFinite(cachedSpeed) ? cachedSpeed : 1;
     if (speed && this.mediaEl.playbackRate !== speed && this.mediaEl.playbackRate > 0) {
       this.emit('ratechange', speed);
     }
@@ -35831,6 +36316,20 @@ class MediaBaseViewer extends viewers_BaseViewer {
       this.renderUI();
     }
   }
+
+  /**
+   * Handler for play next
+   *
+   * @private
+   * @emits playnext
+   * @return {void}
+   */
+  handlePlayNext() {
+    this.emit('playnext', this.isPlayNextEnabled());
+    if (this.controls) {
+      this.renderUI();
+    }
+  }
   /**
    * Autoplay the media
    *
@@ -35857,6 +36356,16 @@ class MediaBaseViewer extends viewers_BaseViewer {
   isAutoplayEnabled() {
     return this.cache.get(MEDIA_AUTOPLAY_CACHE_KEY) === 'Enabled';
   }
+
+  /**
+   * Determines if play next is enabled
+   *
+   * @protected
+   * @return {boolean} Indicates if play next is enabled
+   */
+  isPlayNextEnabled() {
+    return this.cache.get(MEDIA_PLAY_NEXT_CACHE_KEY) === 'Enabled';
+  }
   /**
    * Loads the controls
    *
@@ -35879,6 +36388,9 @@ class MediaBaseViewer extends viewers_BaseViewer {
     if (!this.cache.has(MEDIA_AUTOPLAY_CACHE_KEY)) {
       this.cache.set(MEDIA_AUTOPLAY_CACHE_KEY, 'Disabled');
     }
+    if (!this.cache.has(MEDIA_PLAY_NEXT_CACHE_KEY)) {
+      this.cache.set(MEDIA_PLAY_NEXT_CACHE_KEY, 'Disabled');
+    }
     if (!this.cache.has(MEDIA_SPEED_CACHE_KEY)) {
       this.cache.set(MEDIA_SPEED_CACHE_KEY, '1.0');
     }
@@ -35973,6 +36485,18 @@ class MediaBaseViewer extends viewers_BaseViewer {
     this.handleAutoplay();
   }
 
+  /**
+   * Updates play next
+   *
+   * @protected
+   * @param {boolean} playNext - True if enabled
+   * @return {void}
+   */
+  setPlayNext(playNext) {
+    this.cache.set(MEDIA_PLAY_NEXT_CACHE_KEY, playNext ? 'Enabled' : 'Disabled', true);
+    this.handlePlayNext();
+  }
+
   /**
    * Updates play rate
    *
@@ -36074,17 +36598,17 @@ class MediaBaseViewer extends viewers_BaseViewer {
   }
 
   /**
-   * Emits the previewnextfile event if autoplay is enabled.
+   * Emits mediaEndPlayNext when play next is enabled.
    *
    * @private
-   * @emits previewnextfile
+   * @emits mediaEndPlayNext
    * @return {void}
    */
   mediaendHandler() {
     this.resetPlayIcon();
     this.processMetrics();
-    if (this.isAutoplayEnabled()) {
-      this.emit(lib_events/* VIEWER_EVENT */.Oi.mediaEndAutoplay);
+    if (this.isPlayNextEnabled()) {
+      this.emit(lib_events/* VIEWER_EVENT */.Oi.mediaEndPlayNext);
     }
   }
 
@@ -36660,8 +37184,8 @@ class MediaBaseViewer extends viewers_BaseViewer {
   }
 }
 /* harmony default export */ const media_MediaBaseViewer = (MediaBaseViewer);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaSettings.tsx + 5 modules
-var MediaSettings = __webpack_require__(6929);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaSettings.tsx + 6 modules
+var MediaSettings = __webpack_require__(9229);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseToggle.tsx + 1 modules
 var PlayPauseToggle = __webpack_require__(6321);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/DurationLabels.tsx + 1 modules
@@ -36905,6 +37429,8 @@ class MP3ControlsRoot {
 var waveform_constants = __webpack_require__(4929);
 // EXTERNAL MODULE: ./src/lib/viewers/media/waveform/createWaveformLoader.ts + 1 modules
 var createWaveformLoader = __webpack_require__(4971);
+// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/range.ts
+var range = __webpack_require__(4253);
 // EXTERNAL MODULE: ./src/lib/viewers/media/waveform/validateWaveformPayload.ts
 var validateWaveformPayload = __webpack_require__(1053);
 ;// ./src/lib/viewers/media/MP3.scss
@@ -36926,6 +37452,8 @@ 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;
@@ -37034,6 +37562,84 @@ class MP3Viewer extends media_MediaBaseViewer {
       }
       this.renderUI();
     });
+    MP3Viewer_defineProperty(this, "handleCommentRangeDraft", draft => {
+      if (this.isCommentRangeDragging || !isValidCommentRangeDraft(draft)) {
+        return;
+      }
+      // Checkbox-on sends a collapsed playhead. A waveform-drawn span should
+      // become that timestamp value instead of collapsing back to the playhead.
+      const local = this.commentRangeDraft;
+      if (local && !(0,range/* isRangeCollapsed */.BT)(local) && draft.endMs == null) {
+        if (!this.isCommentRangeTimestampActive) {
+          this.isCommentRangeTimestampActive = true;
+          this.emit(EVENT_COMMENT_RANGE_DRAFT_CHANGE, {
+            endMs: local.endMs,
+            startMs: local.startMs
+          });
+        }
+        this.syncCommentRangeLoop();
+        this.renderUI();
+        return;
+      }
+      this.isCommentRangeTimestampActive = true;
+      this.commentRangeDraft = {
+        endMs: draft.endMs == null ? null : draft.endMs,
+        startMs: draft.startMs
+      };
+      this.syncCommentRangeLoop();
+      this.renderUI();
+    });
+    MP3Viewer_defineProperty(this, "handleCommentRangeDraftClear", () => {
+      this.commentRangeDraft = null;
+      this.isCommentRangeDragging = false;
+      this.isCommentRangeTimestampActive = false;
+      this.syncCommentRangeLoop();
+      this.renderUI();
+    });
+    MP3Viewer_defineProperty(this, "handleCommentRangeChange", range => {
+      if (!range || !Number.isFinite(range.startMs) || !Number.isFinite(range.endMs) || range.endMs <= range.startMs) {
+        return;
+      }
+      this.commentRangeDraft = {
+        endMs: range.endMs,
+        startMs: range.startMs
+      };
+      if (this.isCommentRangeTimestampActive) {
+        this.emit(EVENT_COMMENT_RANGE_DRAFT_CHANGE, {
+          endMs: range.endMs,
+          startMs: range.startMs
+        });
+      }
+      this.syncCommentRangeLoop();
+      this.renderUI();
+    });
+    MP3Viewer_defineProperty(this, "handleCommentRangeDragCreate", () => {
+      const draft = this.commentRangeDraft;
+      if (!draft || (0,range/* isRangeCollapsed */.BT)(draft)) {
+        return;
+      }
+      this.isCommentRangeTimestampActive = true;
+      this.emit(EVENT_COMMENT_RANGE_DRAG_CREATE, {
+        endMs: draft.endMs,
+        startMs: draft.startMs
+      });
+    });
+    MP3Viewer_defineProperty(this, "handleCommentRangeDragChange", isDragging => {
+      this.isCommentRangeDragging = !!isDragging;
+    });
+    MP3Viewer_defineProperty(this, "handleCommentRangeClear", () => {
+      if (!this.commentRangeDraft || this.commentRangeDraft.endMs == null) {
+        return;
+      }
+      const notifyHost = this.isCommentRangeTimestampActive;
+      this.commentRangeDraft = null;
+      this.isCommentRangeTimestampActive = false;
+      if (notifyHost) {
+        this.emit(EVENT_COMMENT_RANGE_DRAFT_DISMISS);
+      }
+      this.syncCommentRangeLoop();
+      this.renderUI();
+    });
     MP3Viewer_defineProperty(this, "handleCommentMarkerClick", marker => {
       this.exitShuttle();
       this.hostSelectedMarkerId = marker.id;
@@ -37074,6 +37680,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.isAudioPlayerV2 = this.getIsAudioPlayerV2();
     this.waveformPeaks = [];
     this.waveformPeaksSource = null;
+    this.isWaveformConversionPolling = false;
     this.waveformDurationSec = 0;
     if (this.isAudioPlayerV2) {
       this.wrapperEl.classList.add('bp-media--v2');
@@ -37083,16 +37690,21 @@ class MP3Viewer extends media_MediaBaseViewer {
       // Listen on the loading shell. The waveform is on
       // screen before the audio blob is playable; getViewer() is still null.
       this.bindCommentMarkersListener();
+      this.bindCommentRangeDraftListeners();
     }
 
     // Audio element
     this.mediaEl = this.mediaContainerEl.appendChild(document.createElement('audio'));
     this.mediaEl.setAttribute('preload', 'auto');
     this.commentMarkers = [];
+    this.commentRangeDraft = null;
     this.hostSelectedMarkerId = null;
+    this.isCommentRangeDragging = false;
+    this.isCommentRangeTimestampActive = false;
     this.shuttleDirection = null;
     this.shuttleRate = 0;
     this.reverseShuttleTimer = 0;
+    this.commentRangeLoopTimer = 0;
     this.keyboardVolumeStep = 0;
     this.keyboardZoomStep = 0;
   }
@@ -37103,6 +37715,15 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.removeListener('comment_markers', this.handleCommentMarkersUpdated);
     this.addListener('comment_markers', this.handleCommentMarkersUpdated);
   }
+  bindCommentRangeDraftListeners() {
+    if (!this.isAudioPlayerV2) {
+      return;
+    }
+    this.removeListener(EVENT_COMMENT_RANGE_DRAFT, this.handleCommentRangeDraft);
+    this.removeListener(EVENT_COMMENT_RANGE_DRAFT_CLEAR, this.handleCommentRangeDraftClear);
+    this.addListener(EVENT_COMMENT_RANGE_DRAFT, this.handleCommentRangeDraft);
+    this.addListener(EVENT_COMMENT_RANGE_DRAFT_CLEAR, this.handleCommentRangeDraftClear);
+  }
 
   /**
    * Audio player v2 (waveform). Off unless the host enables `audioPlayerV2`
@@ -37241,8 +37862,10 @@ class MP3Viewer extends media_MediaBaseViewer {
         if (this.mediaEl && this.shuttleDirection === 'forward') {
           this.mediaEl.playbackRate = this.shuttleRate;
         }
+        this.scheduleCommentRangeLoopWrap();
       }).catch(() => {});
     }
+    this.scheduleCommentRangeLoopWrap(true);
   }
   startReverseShuttle(rate) {
     this.stopReverseShuttle();
@@ -37252,12 +37875,13 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.pause(undefined, true);
     this.handleRate();
     this.reverseShuttleTimer = window.setInterval(() => {
-      if (!this.mediaEl || this.mediaEl.currentTime <= 0) {
+      const floor = this.clampTimeToOpenCommentRange(0);
+      if (!this.mediaEl || this.mediaEl.currentTime <= floor) {
         this.exitShuttle();
         return;
       }
       this.quickSeek(-(this.shuttleRate * AUDIO_V2_SHUTTLE_TICK_MS / 1000));
-      if (this.mediaEl.currentTime <= 0) {
+      if (this.mediaEl.currentTime <= floor) {
         this.exitShuttle();
       }
     }, AUDIO_V2_SHUTTLE_TICK_MS);
@@ -37289,9 +37913,11 @@ class MP3Viewer extends media_MediaBaseViewer {
       if (this.controls) {
         this.renderUI();
       }
+      this.scheduleCommentRangeLoopWrap();
       return;
     }
     super.handleRate();
+    this.scheduleCommentRangeLoopWrap();
   }
   jumpToCommentMarker(direction) {
     if (!this.mediaEl) {
@@ -37362,7 +37988,7 @@ class MP3Viewer extends media_MediaBaseViewer {
    * @return {Promise<{ default: Function }>} MP3ControlsV2 module
    */
   importV2Controls() {
-    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 7450));
+    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 8862));
   }
 
   /**
@@ -37384,7 +38010,13 @@ class MP3Viewer extends media_MediaBaseViewer {
    * @inheritdoc
    */
   destroy() {
+    this.clearCommentRangeLoopTimer();
     this.removeListener('comment_markers', this.handleCommentMarkersUpdated);
+    this.removeListener(EVENT_COMMENT_RANGE_DRAFT, this.handleCommentRangeDraft);
+    this.removeListener(EVENT_COMMENT_RANGE_DRAFT_CLEAR, this.handleCommentRangeDraftClear);
+    this.commentRangeDraft = null;
+    this.isCommentRangeDragging = false;
+    this.isCommentRangeTimestampActive = false;
     this.stopReverseShuttle();
     this.shuttleDirection = null;
     this.shuttleRate = 0;
@@ -37397,6 +38029,11 @@ class MP3Viewer extends media_MediaBaseViewer {
    */
   load() {
     if (this.isAudioPlayerV2) {
+      // A file-version switch is a clear, not a resync of the previous draft.
+      this.commentRangeDraft = null;
+      this.isCommentRangeDragging = false;
+      this.isCommentRangeTimestampActive = false;
+      this.syncCommentRangeLoop();
       this.showAudioLoadingShell();
       this.startConversionWaveformLoad();
     }
@@ -37470,6 +38107,48 @@ class MP3Viewer extends media_MediaBaseViewer {
     return (0,validateWaveformPayload/* isPositiveFinite */.Ze)(compressedBytes) && compressedBytes <= waveform_constants/* CLIENT_DECODE_MAX_COMPRESSED_BYTES */.EB && (0,validateWaveformPayload/* isPositiveFinite */.Ze)(durationSec) && durationSec <= waveform_constants/* CLIENT_DECODE_MAX_DURATION_SEC */.nG;
   }
 
+  /**
+   * @return {Object|null} waveform conversion representation
+   */
+  getWaveformRepresentation() {
+    const {
+      file
+    } = this.options;
+    return file?.representations?.entries ? getRepresentation(file, constants/* WAVEFORM_REP_NAME */.u4) : null;
+  }
+
+  /**
+   * @return {string|null} conversion representation state
+   */
+  getWaveformConversionState() {
+    const conversionStatus = this.getWaveformRepresentation()?.status;
+    return conversionStatus && typeof conversionStatus === 'object' ? conversionStatus.state : null;
+  }
+
+  /**
+   * Conversion JSON is already (or about to be) fetchable.
+   *
+   * @return {boolean}
+   */
+  isConversionWaveformAvailable() {
+    const conversionState = this.getWaveformConversionState();
+    return conversionState === constants/* STATUS_SUCCESS */.$g || conversionState === constants/* STATUS_VIEWABLE */.Re;
+  }
+
+  /**
+   * Generating chip while conversion RepStatus is polling. Hidden when the
+   * rep is already success/viewable, when polling finishes, when conversion
+   * errors, and once any source applies peaks.
+   *
+   * @return {boolean}
+   */
+  isGeneratingWaveform() {
+    if (!this.isAudioPlayerV2 || this.destroyed || this.waveformPeaksSource) {
+      return false;
+    }
+    return !!this.isWaveformConversionPolling;
+  }
+
   /**
    * @param {number} durationSec
    * @return {boolean}
@@ -37506,30 +38185,40 @@ class MP3Viewer extends media_MediaBaseViewer {
     if (!this.isAudioPlayerV2 || this.destroyed) {
       return;
     }
-    const {
-      file
-    } = this.options;
-    const waveform = file?.representations?.entries ? getRepresentation(file, constants/* WAVEFORM_REP_NAME */.u4) : null;
+    const waveform = this.getWaveformRepresentation();
     const template = waveform?.content?.url_template;
-    const conversionStatus = waveform?.status;
-    const statusState = conversionStatus && typeof conversionStatus === 'object' ? conversionStatus.state : null;
-    if (!waveform || !template || !statusState || statusState === constants/* STATUS_ERROR */.uD) {
+    const conversionState = this.getWaveformConversionState();
+    if (!waveform || !template || !conversionState || conversionState === constants/* STATUS_ERROR */.uD) {
       this.startClientWaveformDecode();
+      this.renderUI();
       return;
     }
     this.abortConversionWaveformLoad();
     this.waveformStatus = this.getRepStatus(waveform);
     this.waveformStatus.removeListener('conversionpending', this.resetLoadTimeout);
     const status = this.waveformStatus;
+    const shouldPollConversion = !this.isConversionWaveformAvailable();
     try {
+      if (shouldPollConversion) {
+        this.isWaveformConversionPolling = true;
+        this.renderUI();
+      }
       await status.getPromise();
+      this.isWaveformConversionPolling = false;
       if (this.destroyed || this.waveformStatus !== status || this.waveformPeaksSource) {
         return;
       }
+      if (shouldPollConversion) {
+        this.renderUI();
+      }
       const result = await this.loadConversionWaveformPayload(template);
       this.handleConversionWaveformResult(result, status);
     } catch {
+      this.isWaveformConversionPolling = false;
       this.startClientWaveformDecode();
+      if (shouldPollConversion) {
+        this.renderUI();
+      }
     }
   }
 
@@ -37580,6 +38269,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     }
     this.waveformPeaks = payload.peaks;
     this.waveformPeaksSource = source;
+    this.isWaveformConversionPolling = false;
     this.isWaveformDecodeRetryPending = false;
     if (source === 'conversion') {
       this.waveformDurationSec = payload.durationSec;
@@ -37748,6 +38438,7 @@ class MP3Viewer extends media_MediaBaseViewer {
       });
     }
     this.bindCommentMarkersListener();
+    this.bindCommentRangeDraftListeners();
     this.renderUI();
   }
   /**
@@ -37764,11 +38455,161 @@ class MP3Viewer extends media_MediaBaseViewer {
     }
     this.pendingHostSelectedSeek = null;
     this.exitShuttle();
+    this.handleCommentRangeClear();
     this.mediaEl.pause();
     if (this.mediaEl.currentTime !== marker.time) {
       this.mediaEl.currentTime = marker.time;
     }
   }
+
+  /**
+   * Seconds of the open draft span, or null when collapsed / absent.
+   * Collapsed drafts (`endMs: null`) do not confine playback.
+   *
+   * @return {{endSec: number, startSec: number}|null}
+   */
+  getOpenCommentRangeSeconds() {
+    const draft = this.commentRangeDraft;
+    if ((0,range/* isRangeCollapsed */.BT)(draft) || !Number.isFinite(draft.startMs) || !Number.isFinite(draft.endMs)) {
+      return null;
+    }
+    return {
+      endSec: draft.endMs / 1000,
+      startSec: draft.startMs / 1000
+    };
+  }
+
+  /**
+   * Keep a seek inside the open draft. Waveform click-outside and host
+   * comment seeks dismiss first, then seek; clamp does not apply then.
+   *
+   * @param {number} time
+   * @return {number}
+   */
+  clampTimeToOpenCommentRange(time) {
+    const range = this.getOpenCommentRangeSeconds();
+    if (!range || !Number.isFinite(time)) {
+      return time;
+    }
+    return Math.min(Math.max(time, range.startSec), range.endSec);
+  }
+  clearCommentRangeLoopTimer() {
+    if (this.commentRangeLoopTimer) {
+      window.clearTimeout(this.commentRangeLoopTimer);
+      this.commentRangeLoopTimer = 0;
+    }
+  }
+
+  /**
+   * Wrap when the remaining time to end elapses. Recalculate after play, seek,
+   * rate change, or a draft resize.
+   *
+   * @param {boolean} [force] schedule even if the element still reports paused
+   * @return {void}
+   */
+  scheduleCommentRangeLoopWrap(force = false) {
+    this.clearCommentRangeLoopTimer();
+    const range = this.getOpenCommentRangeSeconds();
+    if (!range || !this.mediaEl || !force && this.mediaEl.paused) {
+      return;
+    }
+    const rate = this.mediaEl.playbackRate > 0 ? this.mediaEl.playbackRate : 1;
+    const remainingSec = range.endSec - this.mediaEl.currentTime;
+    this.commentRangeLoopTimer = window.setTimeout(() => {
+      this.commentRangeLoopTimer = 0;
+      const openRange = this.getOpenCommentRangeSeconds();
+      if (!openRange || !this.mediaEl || this.mediaEl.paused) {
+        return;
+      }
+      if (this.mediaEl.currentTime !== openRange.startSec) {
+        this.mediaEl.currentTime = openRange.startSec;
+      }
+      this.scheduleCommentRangeLoopWrap();
+    }, Math.max(0, remainingSec / rate * 1000));
+  }
+
+  /**
+   * Update the playback loop to match the current range after it arrives, resizes,
+   * or clears.
+   *
+   * @return {void}
+   */
+  syncCommentRangeLoop() {
+    this.clearCommentRangeLoopTimer();
+    const range = this.getOpenCommentRangeSeconds();
+    if (!range || !this.mediaEl || this.mediaEl.paused) {
+      return;
+    }
+    this.enforceCommentRangePlayback(range);
+  }
+
+  /**
+   * Keep playback inside the open span. A playhead outside [start, end) jumps
+   * to start, then the wrap timer is armed.
+   *
+   * @param {{endSec: number, startSec: number}} range Open draft in seconds
+   * @return {void}
+   */
+  enforceCommentRangePlayback(range) {
+    const {
+      endSec,
+      startSec
+    } = range;
+    const currPlayhead = this.mediaEl.currentTime;
+    const nextPlayhead = currPlayhead >= startSec && currPlayhead < endSec ? currPlayhead : startSec;
+    if (nextPlayhead !== currPlayhead) {
+      this.mediaEl.currentTime = nextPlayhead;
+    }
+    this.scheduleCommentRangeLoopWrap();
+  }
+
+  /**
+   * Play. An open draft loops that span: keep the playhead when it is already
+   * inside, otherwise jump to start. Does not use play(start, end) because
+   * that pauses at end.
+   *
+   * @inheritdoc
+   */
+  play(...args) {
+    const range = this.getOpenCommentRangeSeconds();
+    if (!range || !this.mediaEl) {
+      // Spread so an argument-less call stays argument-less; super.play() skips
+      // playback when it is handed an explicit undefined start.
+      return super.play(...args);
+    }
+    const requested = Number.isFinite(args[0]) ? args[0] : this.mediaEl.currentTime;
+    const next = requested >= range.startSec && requested < range.endSec ? requested : range.startSec;
+    if (this.mediaEl.currentTime !== next) {
+      this.mediaEl.currentTime = next;
+    }
+    const playPromise = super.play();
+    this.scheduleCommentRangeLoopWrap(true);
+    return playPromise;
+  }
+
+  /**
+   * Seek. Keyboard and in-range waveform seeks stay inside an open draft.
+   *
+   * @inheritdoc
+   */
+  setMediaTime(time) {
+    super.setMediaTime(this.clampTimeToOpenCommentRange(time));
+    this.scheduleCommentRangeLoopWrap();
+  }
+
+  /**
+   * If the range ends at file end, wrap instead of resetting the play icon.
+   *
+   * @inheritdoc
+   */
+  mediaendHandler() {
+    if (this.getOpenCommentRangeSeconds()) {
+      // `ended` fires after the element is paused; play() wraps and restarts.
+      this.play();
+      return;
+    }
+    super.mediaendHandler();
+  }
   /**
    * @inheritdoc
    */
@@ -37806,12 +38647,20 @@ class MP3Viewer extends media_MediaBaseViewer {
       const Mp3ControlsV2 = this.MP3ControlsV2;
       this.controls.render(/*#__PURE__*/external_react_["default"].createElement(Mp3ControlsV2, MP3Viewer_extends({}, sharedProps, {
         commentMarkers: this.commentMarkers || [],
+        commentRangeDraft: this.commentRangeDraft || null,
         hasStartedPlayback: !!this.userRequestedPlay,
+        isGeneratingWaveform: this.isGeneratingWaveform(),
         keyboardVolumeStep: this.keyboardVolumeStep,
         keyboardZoomStep: this.keyboardZoomStep,
         mediaEl: this.mediaEl,
         onCommentMarkerClick: this.handleCommentMarkerClick,
-        peaks: this.waveformPeaks
+        onCommentRangeChange: this.handleCommentRangeChange,
+        onCommentRangeClear: this.handleCommentRangeClear,
+        onCommentRangeDragChange: this.handleCommentRangeDragChange,
+        onCommentRangeDragCreate: this.handleCommentRangeDragCreate,
+        onPlayNextChange: this.setPlayNext,
+        peaks: this.waveformPeaks,
+        playNext: this.isPlayNextEnabled()
       })));
       return;
     }
@@ -39892,12 +40741,14 @@ function VideoControlsV2({
   onGuideChange,
   onMuteChange,
   onPlayPause,
+  onPlayNextChange,
   onQualityChange,
   onRateChange,
   onSubtitleChange,
   onSubtitlesToggle,
   onTimeChange,
   onVolumeChange,
+  playNext,
   quality,
   rate,
   subtitle,
@@ -39986,9 +40837,11 @@ function VideoControlsV2({
     onAudioTrackChange: onAudioTrackChange,
     onAutoplayChange: onAutoplayChange,
     onGuideChange: onGuideChange,
+    onPlayNextChange: onPlayNextChange,
     onQualityChange: onQualityChange,
     onRateChange: onRateChange,
     onSubtitleChange: onSubtitleChange,
+    playNext: playNext,
     quality: quality,
     rate: rate,
     subtitle: subtitle,
@@ -40146,7 +40999,10 @@ class MP4Viewer extends media_VideoBaseViewer {
       volume: this.mediaEl.volume
     };
     if (this.isVideoPlayerV2) {
-      this.controls.render(/*#__PURE__*/external_react_["default"].createElement(VideoControlsV2, sharedProps));
+      this.controls.render(/*#__PURE__*/external_react_["default"].createElement(VideoControlsV2, MP4Viewer_extends({}, sharedProps, {
+        onPlayNextChange: this.setPlayNext,
+        playNext: this.isPlayNextEnabled()
+      })));
       return;
     }
     this.controls.render(/*#__PURE__*/external_react_["default"].createElement(VideoControls, MP4Viewer_extends({}, sharedProps, {
@@ -41642,7 +42498,10 @@ class DashViewer extends media_VideoBaseViewer {
       this.controls.render(/*#__PURE__*/external_react_["default"].createElement(VideoControlsV2, DashViewer_extends({
         commentMarkers: this.commentMarkers,
         onCommentMarkerClick: this.handleCommentMarkerClick
-      }, sharedProps)));
+      }, sharedProps, {
+        onPlayNextChange: this.setPlayNext,
+        playNext: this.isPlayNextEnabled()
+      })));
       return;
     }
     this.controls.render(/*#__PURE__*/external_react_["default"].createElement(VideoControls, DashViewer_extends({}, sharedProps, {
@@ -54310,6 +55169,7 @@ class Preview extends (events_default()) {
       this.viewer.destroy();
     }
     this.viewer = undefined;
+    Preview.resin = null;
   }
 
   /**
@@ -55195,6 +56055,7 @@ class Preview extends (events_default()) {
 
     // Optional resin analytics instance for tracking user interactions
     this.options.resin = options.resin;
+    Preview.resin = options.resin;
 
     // Options that are applicable to certain file ids
     this.options.fileOptions = options.fileOptions || {};
@@ -55570,6 +56431,10 @@ class Preview extends (events_default()) {
         this.emit(data.event, data.data);
         this.emit(lib_events/* VIEWER_EVENT */.Oi.default, data);
         break;
+      case lib_events/* VIEWER_EVENT */.Oi.mediaEndPlayNext:
+        this.emit(data.event, data.data);
+        this.emit(lib_events/* VIEWER_EVENT */.Oi.default, data);
+        break;
       case lib_events/* VIEWER_EVENT */.Oi.error:
         // Do nothing since 'error' event was already caught, and will be emitted
         // as a 'preview_error' event