box-content-preview 3.82.0 → 3.84.0

package/dist/lib/index.js

@@ -955,6 +955,7 @@ __webpack_require__.d(__webpack_exports__, {
   wU: () => (/* binding */ decodeKeydown),
   Is: () => (/* binding */ findScriptLocation),
   kd: () => (/* binding */ getClosestPageToPinch),
+  RU: () => (/* binding */ getCurrentTimeMs),
   Yf: () => (/* binding */ getDistance),
   dJ: () => (/* binding */ getHeaders),
   t9: () => (/* binding */ getMidpoint),
@@ -1009,7 +1010,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.82.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.84.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 = {};
@@ -1617,6 +1618,16 @@ function getDistance(x1, y1, x2, y2) {
   return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
 }
 
+/**
+ * Monotonic clock in milliseconds. Falls back to wall time when performance is missing.
+ *
+ * @public
+ * @return {number} Current time in milliseconds
+ */
+function getCurrentTimeMs() {
+  return typeof performance !== 'undefined' ? performance.now() : Date.now();
+}
+
 /**
  * Returns the closest visible page to a pinch event
  *
@@ -3929,6 +3940,172 @@ let Menu = /*#__PURE__*/function (Menu) {
 
 /***/ },
 
+/***/ 4937
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ SliderControl)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(1649);
+// EXTERNAL MODULE: ./node_modules/classnames/index.js
+var classnames = __webpack_require__(2485);
+var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
+// EXTERNAL MODULE: ./node_modules/lodash/noop.js
+var noop = __webpack_require__(3950);
+var noop_default = /*#__PURE__*/__webpack_require__.n(noop);
+// EXTERNAL MODULE: ./src/lib/util.js + 1 modules
+var util = __webpack_require__(4410);
+;// ./src/lib/viewers/controls/slider/SliderControl.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/slider/SliderControl.tsx
+const _excluded = ["className", "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; }
+
+
+
+
+
+function SliderControl(_ref) {
+  let {
+      className,
+      max = 100,
+      min = 0,
+      onMove = (noop_default()),
+      onUpdate = (noop_default()),
+      step = 1,
+      title,
+      track,
+      value
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const [isScrubbing, setIsScrubbing] = external_react_["default"].useState(false);
+  const sliderElRef = external_react_["default"].useRef(null);
+  const getPosition = external_react_["default"].useCallback(pageX => {
+    const {
+      current: sliderEl
+    } = sliderElRef;
+    if (!sliderEl) return 0;
+    const {
+      left: sliderLeft,
+      width: sliderWidth
+    } = sliderEl.getBoundingClientRect();
+    return Math.max(0, Math.min(pageX - sliderLeft, sliderWidth));
+  }, []);
+  const getPositionValue = external_react_["default"].useCallback(pageX => {
+    const {
+      current: sliderEl
+    } = sliderElRef;
+    if (!sliderEl) return 0;
+    const {
+      width: sliderWidth
+    } = sliderEl.getBoundingClientRect();
+    const newValue = getPosition(pageX) / sliderWidth * max;
+    return Math.max(min, Math.min(newValue, max));
+  }, [getPosition, max, min]);
+  const handleKeydown = event => {
+    const key = (0,util/* decodeKeydown */.wU)(event);
+    if (key === 'ArrowLeft') {
+      event.stopPropagation(); // Prevents global key handling
+      onUpdate(Math.max(min, Math.min(value - step, max)));
+    }
+    if (key === 'ArrowRight') {
+      event.stopPropagation(); // Prevents global key handling
+      onUpdate(Math.max(min, Math.min(value + step, max)));
+    }
+  };
+  const handleMouseDown = ({
+    button,
+    ctrlKey,
+    metaKey,
+    pageX
+  }) => {
+    if (button > 1 || ctrlKey || metaKey) return;
+    onUpdate(getPositionValue(pageX));
+    setIsScrubbing(true);
+  };
+  const handleMouseMove = ({
+    pageX
+  }) => {
+    const {
+      current: sliderEl
+    } = sliderElRef;
+    const {
+      width: sliderWidth
+    } = sliderEl ? sliderEl.getBoundingClientRect() : {
+      width: 0
+    };
+    onMove(getPositionValue(pageX), getPosition(pageX), sliderWidth);
+  };
+  const handleTouchStart = ({
+    touches
+  }) => {
+    onUpdate(getPositionValue(touches[0].pageX));
+    setIsScrubbing(true);
+  };
+  external_react_["default"].useEffect(() => {
+    const handleDocumentMoveStop = () => setIsScrubbing(false);
+    const handleDocumentMouseMove = event => {
+      if (!isScrubbing || event.button > 1 || event.ctrlKey || event.metaKey) return;
+      event.preventDefault();
+      onUpdate(getPositionValue(event.pageX));
+    };
+    const handleDocumentTouchMove = event => {
+      if (!isScrubbing || !event.touches || !event.touches[0]) return;
+      event.preventDefault();
+      onUpdate(getPositionValue(event.touches[0].pageX));
+    };
+    if (isScrubbing) {
+      document.addEventListener('mousemove', handleDocumentMouseMove);
+      document.addEventListener('mouseup', handleDocumentMoveStop);
+      document.addEventListener('touchend', handleDocumentMoveStop);
+      document.addEventListener('touchmove', handleDocumentTouchMove);
+    }
+    return () => {
+      document.removeEventListener('mousemove', handleDocumentMouseMove);
+      document.removeEventListener('mouseup', handleDocumentMoveStop);
+      document.removeEventListener('touchend', handleDocumentMoveStop);
+      document.removeEventListener('touchmove', handleDocumentTouchMove);
+    };
+  }, [isScrubbing, getPositionValue, onUpdate]);
+  return /*#__PURE__*/external_react_["default"].createElement("div", _extends({
+    ref: sliderElRef,
+    "aria-label": title,
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    "aria-valuenow": value,
+    className: classnames_default()('bp-SliderControl', className, {
+      'bp-is-scrubbing': isScrubbing
+    }),
+    onKeyDown: handleKeydown,
+    onMouseDown: handleMouseDown,
+    onMouseMove: handleMouseMove,
+    onTouchStart: handleTouchStart,
+    role: "slider",
+    tabIndex: 0
+  }, rest), /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-SliderControl-track",
+    "data-testid": "bp-slider-control-track",
+    style: {
+      backgroundImage: track
+    }
+  }), /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-SliderControl-thumb",
+    "data-testid": "bp-slider-control-thumb",
+    style: {
+      left: `${value / max * 100}%`
+    }
+  }));
+}
+
+/***/ },
+
 /***/ 9974
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
@@ -3941,7 +4118,7 @@ function getPdfjsWorkerSrc() {
 
 /***/ },
 
-/***/ 7893
+/***/ 3845
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 
@@ -3967,6 +4144,8 @@ var TimestampControl = __webpack_require__(3904);
 var VolumeControls = __webpack_require__(3945);
 // EXTERNAL MODULE: ./src/lib/icons/play_48px.svg
 var play_48px = __webpack_require__(3493);
+// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/constants.ts
+var constants = __webpack_require__(4929);
 ;// ./src/lib/viewers/media/waveform/peaks.ts
 const PLACEHOLDER_PEAK_AMPLITUDE = 0;
 const PLACEHOLDER_PEAK_COUNT = 2000;
@@ -4063,10 +4242,126 @@ 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); }
+
+function createWaveformViewport({
+  durationSec,
+  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 maxStartSec = Math.max(0, durationSec - viewDurationSec); // last start that still fills the window
+  const startSec = pixelsPerSecond > 0 ? Math.min(maxStartSec, Math.max(0, scrollLeftPx / pixelsPerSecond)) : 0;
+  return {
+    durationSec,
+    endSec: startSec + viewDurationSec,
+    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
+  }));
+}
+
+/** 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,
+  maxZoom = constants/* WAVEFORM_ZOOM_MIN */.LW,
+  viewWidthPx,
+  zoomLevel
+}) {
+  const zoom = clampWaveformZoom(zoomLevel, maxZoom);
+  if (zoom <= constants/* WAVEFORM_ZOOM_MIN */.LW || !(durationSec > 0) || !(viewWidthPx > 0)) {
+    return 0;
+  }
+  return viewWidthPx / durationSec * zoom;
+}
+
+/** 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);
+}
 ;// ./node_modules/wavesurfer.js/dist/wavesurfer.esm.js
 function t(t,e,i,n){return new(i||(i=Promise))((function(s,r){function o(t){try{l(n.next(t))}catch(t){r(t)}}function a(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?s(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(o,a)}l((n=n.apply(t,e||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class e{constructor(){this.listeners={}}on(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),null==i?void 0:i.once){const i=(...n)=>{this.un(t,i),e(...n)};return this.listeners[t].add(i),()=>this.un(t,i)}return this.listeners[t].add(e),()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}const i={decode:function(e,i){return t(this,void 0,void 0,(function*(){const t=new AudioContext({sampleRate:i});try{return yield t.decodeAudioData(e)}finally{"closed"!==t.state&&(yield t.close().catch((()=>{})))}}))},createBuffer:function(t,e){if(!t||0===t.length)throw new Error("channelData must be a non-empty array");if(e<=0)throw new Error("duration must be greater than 0");if("number"==typeof t[0]&&(t=[t]),!t[0]||0===t[0].length)throw new Error("channelData must contain non-empty channel arrays");!function(t){const e=t[0];if(e.some((t=>t>1||t<-1))){const i=e.length;let n=0;for(let t=0;t<i;t++){const i=Math.abs(e[t]);i>n&&(n=i)}for(const e of t)for(let t=0;t<i;t++)e[t]/=n}}(t);const i=t.map((t=>t instanceof Float32Array?t:Float32Array.from(t)));return{duration:e,length:i[0].length,sampleRate:i[0].length/e,numberOfChannels:i.length,getChannelData:t=>{const e=i[t];if(!e)throw new Error(`Channel ${t} not found`);return e},copyFromChannel:AudioBuffer.prototype.copyFromChannel,copyToChannel:AudioBuffer.prototype.copyToChannel}}};function n(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,s]of Object.entries(e))if("children"===t&&s)for(const[t,e]of Object.entries(s))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(n(t,e));else"style"===t?Object.assign(i.style,s):"textContent"===t?i.textContent=s:i.setAttribute(t,s.toString());return i}function s(t,e,i){const s=n(t,e||{});return null==i||i.appendChild(s),s}function r(t){return t instanceof HTMLElement||"object"==typeof t&&null!==t&&t.nodeType===Node.ELEMENT_NODE&&"object"==typeof t.style}var o=Object.freeze({__proto__:null,createElement:s,default:s,isHTMLElement:r});const a={fetchBlob:function(e,i,n){return t(this,void 0,void 0,(function*(){var s;const r=yield fetch(e,n);if(r.status>=400)throw new Error(`Failed to fetch ${e}: ${r.status} (${r.statusText})`);return function(e,i,n){t(this,void 0,void 0,(function*(){var t;if(!e.body||!e.headers)return;const s=e.body.getReader(),r=Number(e.headers.get("Content-Length"))||0;let o=0;const a=()=>{s.cancel()};if(n){if(n.aborted)return void s.cancel();n.addEventListener("abort",a,{once:!0})}try{for(;;){const e=yield s.read();if(e.done)break;if(o+=(null===(t=e.value)||void 0===t?void 0:t.length)||0,r>0){const t=Math.round(o/r*100);i(t)}}}catch(t){if(t instanceof DOMException&&"AbortError"===t.name)return;console.warn("Progress tracking error:",t)}finally{n&&n.removeEventListener("abort",a)}}))}(r.clone(),i,null!==(s=null==n?void 0:n.signal)&&void 0!==s?s:void 0),r.blob()}))}};function l(t){let e=t;const i=new Set;return{get value(){return e},set(t){Object.is(e,t)||(e=t,i.forEach((t=>t(e))))},update(t){this.set(t(e))},subscribe:t=>(i.add(t),()=>i.delete(t))}}function h(t,e){const i=l(t());return e.forEach((e=>e.subscribe((()=>{const e=t();Object.is(i.value,e)||i.set(e)})))),{get value(){return i.value},subscribe:t=>i.subscribe(t)}}function c(t,e){let i;const n=()=>{i&&(i(),i=void 0),i=t()},s=e.map((t=>t.subscribe(n)));return n(),()=>{i&&(i(),i=void 0),s.forEach((t=>t()))}}class u extends e{get isPlayingSignal(){return this._isPlaying}get currentTimeSignal(){return this._currentTime}get durationSignal(){return this._duration}get volumeSignal(){return this._volume}get mutedSignal(){return this._muted}get playbackRateSignal(){return this._playbackRate}get seekingSignal(){return this._seeking}constructor(t){super(),this.isExternalMedia=!1,this._ownBlobUrl=null,this.reactiveMediaEventCleanups=[],t.media?(this.media=t.media,this.isExternalMedia=!0):this.media=document.createElement("audio"),this._isPlaying=l(!1),this._currentTime=l(0),this._duration=l(0),this._volume=l(this.media.volume),this._muted=l(this.media.muted),this._playbackRate=l(this.media.playbackRate||1),this._seeking=l(!1),this.setupReactiveMediaEvents(),t.mediaControls&&(this.media.controls=!0),t.autoplay&&(this.media.autoplay=!0),null!=t.playbackRate&&this.onMediaEvent("canplay",(()=>{null!=t.playbackRate&&(this.media.playbackRate=t.playbackRate)}),{once:!0})}setupReactiveMediaEvents(){this.reactiveMediaEventCleanups.push(this.onMediaEvent("play",(()=>{this._isPlaying.set(!0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("pause",(()=>{this._isPlaying.set(!1)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("ended",(()=>{this._isPlaying.set(!1)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("timeupdate",(()=>{this._currentTime.set(this.media.currentTime)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("durationchange",(()=>{this._duration.set(this.media.duration||0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("loadedmetadata",(()=>{this._duration.set(this.media.duration||0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("seeking",(()=>{this._seeking.set(!0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("seeked",(()=>{this._seeking.set(!1)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("volumechange",(()=>{this._volume.set(this.media.volume),this._muted.set(this.media.muted)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("ratechange",(()=>{this._playbackRate.set(this.media.playbackRate)})))}onMediaEvent(t,e,i){return this.media.addEventListener(t,e,i),()=>this.media.removeEventListener(t,e,i)}getSrc(){return this.media.currentSrc||this.media.src||""}revokeSrc(){this._ownBlobUrl&&(URL.revokeObjectURL(this._ownBlobUrl),this._ownBlobUrl=null)}canPlayType(t){return""!==this.media.canPlayType(t)}setSrc(t,e){const i=this.getSrc();if(t&&i===t)return;this.revokeSrc();const n=e instanceof Blob&&(this.canPlayType(e.type)||!t)?URL.createObjectURL(e):t;if(n!==t&&(this._ownBlobUrl=n),i&&this.media.removeAttribute("src"),n||t)try{this.media.src=n}catch(e){this.media.src=t}}destroy(){this.reactiveMediaEventCleanups.forEach((t=>t())),this.reactiveMediaEventCleanups=[],this.revokeSrc(),this.unAll(),this.isExternalMedia||(this.media.pause(),this.media.removeAttribute("src"),this.media.load(),this.media.remove())}setMediaElement(t){this.reactiveMediaEventCleanups.forEach((t=>t())),this.reactiveMediaEventCleanups=[],this.media=t,this.setupReactiveMediaEvents()}play(){return t(this,void 0,void 0,(function*(){try{return yield this.media.play()}catch(t){if(t instanceof DOMException&&"AbortError"===t.name)return;throw t}}))}pause(){this.media.pause()}isPlaying(){return!this.media.paused&&!this.media.ended}setTime(t){this.media.currentTime=Math.max(0,Math.min(t,this.getDuration()))}getDuration(){return this.media.duration}getCurrentTime(){return this.media.currentTime}getVolume(){return this.media.volume}setVolume(t){this.media.volume=t}getMuted(){return this.media.muted}setMuted(t){this.media.muted=t}getPlaybackRate(){return this.media.playbackRate}isSeeking(){return this.media.seeking}setPlaybackRate(t,e){null!=e&&(this.media.preservesPitch=e),this.media.playbackRate=t}getMediaElement(){return this.media}setSinkId(t){return this.media.setSinkId(t)}}function d({maxTop:t,maxBottom:e,halfHeight:i,vScale:n,barMinHeight:s=0,barAlign:r}){let o=Math.round(t*i*n);let a=o+Math.round(e*i*n)||1;return a<s&&(a=s,r||(o=a/2)),{topHeight:o,totalHeight:a}}function p({barAlign:t,halfHeight:e,topHeight:i,totalHeight:n,canvasHeight:s}){return"top"===t?0:"bottom"===t?s-n:e-i}function m(t,e,i){const n=e-t.left,s=i-t.top;return[n/t.width,s/t.height]}function g(t){return Boolean(t.barWidth||t.barGap||t.barAlign)}function f(t,e){if(!g(e))return t;const i=e.barWidth||.5,n=i+(e.barGap||i/2);return 0===n?t:Math.floor(t/n)*n}function v({scrollLeft:t,totalWidth:e,numCanvases:i}){if(0===e)return[0];const n=t/e,s=Math.floor(n*i);return[s-1,s,s+1]}function b(t){const e=t._cleanup;"function"==typeof e&&e()}function y(t){const e=l({scrollLeft:t.scrollLeft,scrollWidth:t.scrollWidth,clientWidth:t.clientWidth}),i=h((()=>function(t){const{scrollLeft:e,scrollWidth:i,clientWidth:n}=t;if(0===i)return{startX:0,endX:1};const s=e/i,r=(e+n)/i;return{startX:Math.max(0,Math.min(1,s)),endX:Math.max(0,Math.min(1,r))}}(e.value)),[e]),n=h((()=>function(t){return{left:t.scrollLeft,right:t.scrollLeft+t.clientWidth}}(e.value)),[e]),s=()=>{e.set({scrollLeft:t.scrollLeft,scrollWidth:t.scrollWidth,clientWidth:t.clientWidth})};t.addEventListener("scroll",s,{passive:!0});return{scrollData:e,percentages:i,bounds:n,cleanup:()=>{t.removeEventListener("scroll",s),b(e)}}}class C extends e{constructor(t,e){super(),this.timeouts=[],this.isScrollable=!1,this.audioData=null,this.resizeObserver=null,this.lastContainerWidth=0,this.isDragging=!1,this.subscriptions=[],this.unsubscribeOnScroll=[],this.dragStream=null,this.scrollStream=null,this.containerInlinePadding=0,this.onClickWrapper=t=>{const e=this.wrapper.getBoundingClientRect(),[i,n]=m(e,t.clientX,t.clientY);this.emit("click",i,n)},this.onDblClickWrapper=t=>{const e=this.wrapper.getBoundingClientRect(),[i,n]=m(e,t.clientX,t.clientY);this.emit("dblclick",i,n)},this.subscriptions=[],this.options=t;const i=this.parentFromOptionsContainer(t.container);this.parent=i;const[n,s]=this.initHtml();i.appendChild(n),this.container=n,this.scrollContainer=s.querySelector(".scroll"),this.wrapper=s.querySelector(".wrapper"),this.canvasWrapper=s.querySelector(".canvases"),this.progressWrapper=s.querySelector(".progress"),this.cursor=s.querySelector(".cursor"),this.calculateInlinePadding(),e&&s.appendChild(e),this.initEvents()}parentFromOptionsContainer(t){let e;if("string"==typeof t?e=document.querySelector(t):r(t)&&(e=t),!e)throw new Error("Container not found");return e}initEvents(){this.wrapper.addEventListener("click",this.onClickWrapper),this.wrapper.addEventListener("dblclick",this.onDblClickWrapper),!0!==this.options.dragToSeek&&"object"!=typeof this.options.dragToSeek||this.initDrag(),this.scrollStream=y(this.scrollContainer);const t=c((()=>{const{startX:t,endX:e}=this.scrollStream.percentages.value,{left:i,right:n}=this.scrollStream.bounds.value;this.emit("scroll",t,e,i,n)}),[this.scrollStream.percentages,this.scrollStream.bounds]);if(this.subscriptions.push(t),"function"==typeof ResizeObserver){const t=this.createDelay(100);this.resizeObserver=new ResizeObserver((()=>{t().then((()=>this.onContainerResize())).catch((()=>{}))})),this.resizeObserver.observe(this.scrollContainer)}}onContainerResize(){const t=this.parent.clientWidth;this.calculateInlinePadding(),t===this.lastContainerWidth&&"auto"!==this.options.height||(this.lastContainerWidth=t,this.reRender(),this.emit("resize"))}initDrag(){if(this.dragStream)return;this.dragStream=function(t,e={}){const{threshold:i=3,mouseButton:n=0,touchDelay:s=100}=e,r=l(null),o=new Map,a=matchMedia("(pointer: coarse)").matches;let h=()=>{};const c=e=>{if(e.button!==n)return;if(o.has(e.pointerId))return;if(o.set(e.pointerId,e),o.size>1)return;const l=e.pointerId;let c=e.clientX,u=e.clientY,d=!1;const p=Date.now(),m=t.getBoundingClientRect(),{left:g,top:f}=m,v=t=>{if(t.pointerId!==l)return;if(t.defaultPrevented||o.size>1)return;if(a&&Date.now()-p<s)return;const e=t.clientX,n=t.clientY,h=e-c,m=n-u;(d||Math.abs(h)>i||Math.abs(m)>i)&&(t.preventDefault(),t.stopPropagation(),d||(r.set({type:"start",x:c-g,y:u-f}),d=!0),r.set({type:"move",x:e-g,y:n-f,deltaX:h,deltaY:m}),c=e,u=n)},b=t=>{if(o.delete(t.pointerId)){if(t.pointerId===l&&d){const e=t.clientX,i=t.clientY;r.set({type:"end",x:e-g,y:i-f})}0===o.size&&h()}},y=t=>{t.relatedTarget&&t.relatedTarget!==document.documentElement||b(t)},C=t=>{d&&(t.stopPropagation(),t.preventDefault())},S=t=>{t.defaultPrevented||o.size>1||d&&t.preventDefault()};document.addEventListener("pointermove",v),document.addEventListener("pointerup",b),document.addEventListener("pointerout",y),document.addEventListener("pointercancel",y),document.addEventListener("touchmove",S,{passive:!1}),document.addEventListener("click",C,{capture:!0}),h=()=>{document.removeEventListener("pointermove",v),document.removeEventListener("pointerup",b),document.removeEventListener("pointerout",y),document.removeEventListener("pointercancel",y),document.removeEventListener("touchmove",S),setTimeout((()=>{document.removeEventListener("click",C,{capture:!0})}),10)}};return t.addEventListener("pointerdown",c),{signal:r,cleanup:()=>{h(),t.removeEventListener("pointerdown",c),o.clear(),b(r)}}}(this.wrapper);const t=c((()=>{const t=this.dragStream.signal.value;if(!t)return;const e=this.wrapper.getBoundingClientRect().width,i=(n=t.x/e)<0?0:n>1?1:n;var n;"start"===t.type?(this.isDragging=!0,this.emit("dragstart",i)):"move"===t.type?this.emit("drag",i):"end"===t.type&&(this.isDragging=!1,this.emit("dragend",i))}),[this.dragStream.signal]);this.subscriptions.push(t)}calculateInlinePadding(){const{paddingLeft:t,paddingRight:e}=getComputedStyle(this.scrollContainer),i=parseFloat(t)+parseFloat(e);this.containerInlinePadding=Number.isNaN(i)?0:i}initHtml(){const t=document.createElement("div"),e=t.attachShadow({mode:"open"}),i=this.options.cspNonce&&"string"==typeof this.options.cspNonce?this.options.cspNonce.replace(/"/g,""):"";return e.innerHTML=`\n      <style${i?` nonce="${i}"`:""}>\n        :host {\n          user-select: none;\n          min-width: 1px;\n        }\n        :host audio {\n          display: block;\n          width: 100%;\n        }\n        :host .scroll {\n          overflow-x: auto;\n          overflow-y: hidden;\n          width: 100%;\n          position: relative;\n        }\n        :host .noScrollbar {\n          scrollbar-color: transparent;\n          scrollbar-width: none;\n        }\n        :host .noScrollbar::-webkit-scrollbar {\n          display: none;\n          -webkit-appearance: none;\n        }\n        :host .wrapper {\n          position: relative;\n          overflow: visible;\n          z-index: 2;\n        }\n        :host .canvases {\n          min-height: ${this.getHeight(this.options.height,this.options.splitChannels)}px;\n          pointer-events: none;\n        }\n        :host .canvases > div {\n          position: relative;\n        }\n        :host canvas {\n          display: block;\n          position: absolute;\n          top: 0;\n          image-rendering: pixelated;\n        }\n        :host .progress {\n          pointer-events: none;\n          position: absolute;\n          z-index: 2;\n          top: 0;\n          left: 0;\n          width: 0;\n          height: 100%;\n          overflow: hidden;\n        }\n        :host .progress > div {\n          position: relative;\n        }\n        :host .cursor {\n          pointer-events: none;\n          position: absolute;\n          z-index: 5;\n          top: 0;\n          left: 0;\n          height: 100%;\n          border-radius: 2px;\n        }\n      </style>\n\n      <div class="scroll" part="scroll">\n        <div class="wrapper" part="wrapper">\n          <div class="canvases" part="canvases"></div>\n          <div class="progress" part="progress"></div>\n          <div class="cursor" part="cursor"></div>\n        </div>\n      </div>\n    `,[t,e]}setOptions(t){var e;if(this.options.container!==t.container){const e=this.parentFromOptionsContainer(t.container);e.appendChild(this.container),this.parent=e}!0===t.dragToSeek||"object"==typeof this.options.dragToSeek?this.initDrag():(null===(e=this.dragStream)||void 0===e||e.cleanup(),this.dragStream=null),this.options=t,this.reRender()}getWrapper(){return this.wrapper}getWidth(){return this.scrollContainer.clientWidth-this.containerInlinePadding}getScroll(){return this.scrollContainer.scrollLeft}setScroll(t){this.scrollContainer.scrollLeft=t}setScrollPercentage(t){const{scrollWidth:e}=this.scrollContainer,i=e*t;this.setScroll(i)}destroy(){var t;this.wrapper.removeEventListener("click",this.onClickWrapper),this.wrapper.removeEventListener("dblclick",this.onDblClickWrapper),this.timeouts.forEach((t=>t())),this.timeouts=[],this.subscriptions.forEach((t=>t())),this.container.remove(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),null===(t=this.unsubscribeOnScroll)||void 0===t||t.forEach((t=>t())),this.unsubscribeOnScroll=[],this.dragStream&&(this.dragStream.cleanup(),this.dragStream=null),this.scrollStream&&(this.scrollStream.cleanup(),this.scrollStream=null)}createDelay(t=10){let e,i;const n=()=>{e&&(clearTimeout(e),e=void 0),i&&(i(),i=void 0)};return this.timeouts.push(n),()=>new Promise(((s,r)=>{n(),i=r,e=setTimeout((()=>{e=void 0,i=void 0,s()}),t)}))}getHeight(t,e){var i;const n=(null===(i=this.audioData)||void 0===i?void 0:i.numberOfChannels)||1;return function({optionsHeight:t,optionsSplitChannels:e,parentHeight:i,numberOfChannels:n,defaultHeight:s=128}){if(null==t)return s;const r=Number(t);if(!isNaN(r))return r;if("auto"===t){const t=i||s;return(null==e?void 0:e.every((t=>!t.overlay)))?t/n:t}return s}({optionsHeight:t,optionsSplitChannels:e,parentHeight:this.parent.clientHeight,numberOfChannels:n,defaultHeight:128})}convertColorValues(t,e){return function(t,e,i){if(!Array.isArray(t))return t||"";if(0===t.length)return"#999";if(t.length<2)return t[0]||"";const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return t[0]||"";const r=i||n.height*e,o=s.createLinearGradient(0,0,0,r),a=1/(t.length-1);return t.forEach(((t,e)=>{o.addColorStop(e*a,t)})),o}(t,this.getPixelRatio(),null==e?void 0:e.canvas.height)}getPixelRatio(){return t=window.devicePixelRatio,Math.max(1,t||1);// removed by dead control flow
  var t; }renderBarWaveform(t,e,i,n){const{width:s,height:r}=i.canvas,{halfHeight:o,barWidth:a,barRadius:l,barIndexScale:h,barSpacing:c,barMinHeight:u}=function({width:t,height:e,length:i,options:n,pixelRatio:s}){const r=e/2,o=n.barWidth?n.barWidth*s:1,a=n.barGap?n.barGap*s:n.barWidth?o/2:0,l=o+a||1;return{halfHeight:r,barWidth:o,barGap:a,barRadius:n.barRadius||0,barMinHeight:n.barMinHeight?n.barMinHeight*s:0,barIndexScale:i>0?t/l/i:0,barSpacing:l}}({width:s,height:r,length:(t[0]||[]).length,options:e,pixelRatio:this.getPixelRatio()}),m=function({channelData:t,barIndexScale:e,barSpacing:i,barWidth:n,halfHeight:s,vScale:r,canvasHeight:o,barAlign:a,barMinHeight:l}){const h=t[0]||[],c=t[1]||h,u=h.length,m=[];let g=0,f=0,v=0;for(let t=0;t<=u;t++){const u=Math.round(t*e);if(u>g){const{topHeight:t,totalHeight:e}=d({maxTop:f,maxBottom:v,halfHeight:s,vScale:r,barMinHeight:l,barAlign:a}),h=p({barAlign:a,halfHeight:s,topHeight:t,totalHeight:e,canvasHeight:o});m.push({x:g*i,y:h,width:n,height:e}),g=u,f=0,v=0}const b=Math.abs(h[t]||0),y=Math.abs(c[t]||0);b>f&&(f=b),y>v&&(v=y)}return m}({channelData:t,barIndexScale:h,barSpacing:c,barWidth:a,halfHeight:o,vScale:n,canvasHeight:r,barAlign:e.barAlign,barMinHeight:u});i.beginPath();for(const t of m)l&&"roundRect"in i?i.roundRect(t.x,t.y,t.width,t.height,l):i.rect(t.x,t.y,t.width,t.height);i.fill(),i.closePath()}renderLineWaveform(t,e,i,n){const{width:s,height:r}=i.canvas,o=function({channelData:t,width:e,height:i,vScale:n}){const s=i/2,r=t[0]||[];return[r,t[1]||r].map(((t,i)=>{const r=t.length,o=r?e/r:0,a=s,l=0===i?-1:1,h=[{x:0,y:a}];let c=0,u=0;for(let e=0;e<=r;e++){const i=Math.round(e*o);if(i>c){const t=a+(Math.round(u*s*n)||1)*l;h.push({x:c,y:t}),c=i,u=0}const r=Math.abs(t[e]||0);r>u&&(u=r)}return h.push({x:c,y:a}),h}))}({channelData:t,width:s,height:r,vScale:n});i.beginPath();for(const t of o)if(t.length){i.moveTo(t[0].x,t[0].y);for(let e=1;e<t.length;e++){const n=t[e];i.lineTo(n.x,n.y)}}i.fill(),i.closePath()}renderWaveform(t,e,i){if(i.fillStyle=this.convertColorValues(e.waveColor,i),e.renderFunction)return void e.renderFunction(t,i);const n=function({channelData:t,barHeight:e,normalize:i,maxPeak:n}){var s;const r=e||1;if(!i)return r;const o=t[0];if(!o||0===o.length)return r;let a=null!=n?n:0;if(!n)for(let t=0;t<o.length;t++){const e=null!==(s=o[t])&&void 0!==s?s:0,i=Math.abs(e);i>a&&(a=i)}return a?r/a:r}({channelData:t,barHeight:e.barHeight,normalize:e.normalize,maxPeak:e.maxPeak});g(e)?this.renderBarWaveform(t,e,i,n):this.renderLineWaveform(t,e,i,n)}renderSingleCanvas(t,e,i,n,s,r,o){const a=this.getPixelRatio(),l=document.createElement("canvas");l.width=Math.round(i*a),l.height=Math.round(n*a),l.style.width=`${i}px`,l.style.height=`${n}px`,l.style.left=`${Math.round(s)}px`,r.appendChild(l);const h=l.getContext("2d");if(e.renderFunction?(h.fillStyle=this.convertColorValues(e.waveColor,h),e.renderFunction(t,h)):this.renderWaveform(t,e,h),l.width>0&&l.height>0){const t=l.cloneNode(),i=t.getContext("2d");i.drawImage(l,0,0),i.globalCompositeOperation="source-in",i.fillStyle=this.convertColorValues(e.progressColor,i),i.fillRect(0,0,l.width,l.height),o.appendChild(t)}}renderMultiCanvas(t,e,i,n,s,r){const o=this.getPixelRatio(),{clientWidth:a}=this.scrollContainer,l=i/o,h=function({clientWidth:t,totalWidth:e,options:i}){return f(Math.min(8e3,t,e),i)}({clientWidth:a,totalWidth:l,options:e});let c={};if(0===h)return;const u=i=>{if(i<0||i>=d)return;if(c[i])return;c[i]=!0;const o=i*h;let a=Math.min(l-o,h);if(a=f(a,e),a<=0)return;const u=function({channelData:t,offset:e,clampedWidth:i,totalWidth:n}){return t.map((t=>{const s=Math.floor(e/n*t.length),r=Math.floor((e+i)/n*t.length);return t.slice(s,r)}))}({channelData:t,offset:o,clampedWidth:a,totalWidth:l});this.renderSingleCanvas(u,e,a,n,o,s,r)},d=Math.ceil(l/h);if(!this.isScrollable){for(let t=0;t<d;t++)u(t);return}if(v({scrollLeft:this.scrollContainer.scrollLeft,totalWidth:l,numCanvases:d}).forEach((t=>u(t))),d>1){const t=this.on("scroll",(()=>{const{scrollLeft:t}=this.scrollContainer;Object.keys(c).length>10&&(s.innerHTML="",r.innerHTML="",c={}),v({scrollLeft:t,totalWidth:l,numCanvases:d}).forEach((t=>u(t)))}));this.unsubscribeOnScroll.push(t)}}renderChannel(t,e,i,n){var{overlay:s}=e,r=function(t,e){var i={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(i[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(t);s<n.length;s++)e.indexOf(n[s])<0&&Object.prototype.propertyIsEnumerable.call(t,n[s])&&(i[n[s]]=t[n[s]])}return i}(e,["overlay"]);const o=document.createElement("div"),a=this.getHeight(r.height,r.splitChannels);o.style.height=`${a}px`,s&&n>0&&(o.style.marginTop=`-${a}px`),this.canvasWrapper.style.minHeight=`${a}px`,this.canvasWrapper.appendChild(o);const l=o.cloneNode();this.progressWrapper.appendChild(l),this.renderMultiCanvas(t,r,i,a,o,l)}render(e){return t(this,void 0,void 0,(function*(){var t;this.timeouts.forEach((t=>t())),this.timeouts=[],this.unsubscribeOnScroll.forEach((t=>t())),this.unsubscribeOnScroll=[],this.canvasWrapper.innerHTML="",this.progressWrapper.innerHTML="",null!=this.options.width&&(this.scrollContainer.style.width="number"==typeof this.options.width?`${this.options.width}px`:this.options.width);const i=this.getPixelRatio(),n=this.scrollContainer.clientWidth-this.containerInlinePadding,{scrollWidth:s,isScrollable:r,useParentWidth:o,width:a}=function({duration:t,minPxPerSec:e=0,parentWidth:i,fillParent:n,pixelRatio:s}){const r=Math.ceil(t*e),o=r>i,a=Boolean(n&&!o);return{scrollWidth:r,isScrollable:o,useParentWidth:a,width:(a?i:r)*s}}({duration:e.duration,minPxPerSec:this.options.minPxPerSec||0,parentWidth:n,fillParent:this.options.fillParent,pixelRatio:i});if(this.isScrollable=r,this.wrapper.style.width=o?"100%":`${s}px`,this.scrollContainer.style.overflowX=this.isScrollable?"auto":"hidden",this.scrollContainer.classList.toggle("noScrollbar",!!this.options.hideScrollbar),this.cursor.style.backgroundColor=`${this.options.cursorColor||this.options.progressColor}`,this.cursor.style.width=`${this.options.cursorWidth}px`,this.audioData=e,this.emit("render"),this.options.splitChannels)for(let i=0;i<e.numberOfChannels;i++){const n=Object.assign(Object.assign({},this.options),null===(t=this.options.splitChannels)||void 0===t?void 0:t[i]);this.renderChannel([e.getChannelData(i)],n,a,i)}else{const t=[e.getChannelData(0)];e.numberOfChannels>1&&t.push(e.getChannelData(1)),this.renderChannel(t,this.options,a,0)}Promise.resolve().then((()=>this.emit("rendered")))}))}reRender(){if(this.unsubscribeOnScroll.forEach((t=>t())),this.unsubscribeOnScroll=[],!this.audioData)return;const{scrollWidth:t}=this.scrollContainer,{right:e}=this.progressWrapper.getBoundingClientRect();if(this.render(this.audioData),!this.isScrollable&&this.scrollContainer.scrollLeft)this.scrollContainer.scrollLeft=0;else if(this.isScrollable&&t!==this.scrollContainer.scrollWidth){const{right:t}=this.progressWrapper.getBoundingClientRect(),i=function(t){const e=2*t;return(e<0?Math.floor(e):Math.ceil(e))/2}(t-e);this.scrollContainer.scrollLeft+=i}}zoom(t){this.options.minPxPerSec=t,this.reRender()}scrollIntoView(t,e=!1){var i;const{scrollLeft:n,scrollWidth:s,clientWidth:r}=this.scrollContainer,o=t*s,a=n,l=n+r,h=r/2;if(this.isDragging){const t=30;o+t>l?this.scrollContainer.scrollLeft+=t:o-t<a&&(this.scrollContainer.scrollLeft-=t)}else{(o<a||o>l)&&(this.scrollContainer.scrollLeft=o-(this.options.autoCenter?h:0));const t=o-n-h;if(e&&this.options.autoCenter&&t>0){const e=null===(i=this.audioData)||void 0===i?void 0:i.duration;if(void 0===e||e<=0)return void(this.scrollContainer.scrollLeft+=t);const n=s/e;this.scrollContainer.scrollLeft+=n<=600?Math.min(t,10):t}}}renderProgress(t,e){if(isNaN(t))return;const i=100*t;this.canvasWrapper.style.clipPath=`polygon(${i}% 0%, 100% 0%, 100% 100%, ${i}% 100%)`,this.progressWrapper.style.width=`${i}%`,this.cursor.style.left=`${i}%`,this.cursor.style.transform=this.options.cursorWidth?`translateX(-${t*this.options.cursorWidth}px)`:"",this.isScrollable&&this.options.autoScroll&&this.audioData&&this.audioData.duration>0&&this.scrollIntoView(t,e)}exportImage(e,i,n){return t(this,void 0,void 0,(function*(){const t=this.canvasWrapper.querySelectorAll("canvas");if(!t.length)throw new Error("No waveform data");if("dataURL"===n){const n=Array.from(t).map((t=>t.toDataURL(e,i)));return Promise.resolve(n)}return Promise.all(Array.from(t).map((t=>new Promise(((n,s)=>{t.toBlob((t=>{t?n(t):s(new Error("Could not export image"))}),e,i)})))))}))}}class S extends e{constructor(){super(...arguments),this.animationFrameId=null,this.isRunning=!1}start(){if(this.isRunning)return;this.isRunning=!0;const t=()=>{this.isRunning&&(this.emit("tick"),this.animationFrameId=requestAnimationFrame(t))};t()}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}destroy(){this.stop(),this.unAll()}}class E extends e{constructor(t){super(),this.bufferNode=null,this.playStartTime=0,this.playbackPosition=0,this._muted=!1,this._playbackRate=1,this._duration=void 0,this.buffer=null,this.currentSrc="",this.paused=!0,this.crossOrigin=null,this.seeking=!1,this.autoplay=!1,this.addEventListener=this.on,this.removeEventListener=this.un,this._destroyed=!1,function(){const t=globalThis.navigator;if(null==t?void 0:t.audioSession)try{t.audioSession.type="playback"}catch(t){console.warn("Setting navigator.audioSession.type failed:",t)}}(),this.audioContext=t||new AudioContext,this.gainNode=this.audioContext.createGain(),this.gainNode.connect(this.audioContext.destination)}load(){return t(this,void 0,void 0,(function*(){}))}remove(){this.destroy()}destroy(){if(!this._destroyed){if(this._destroyed=!0,this.currentSrc="",this.bufferNode){this.bufferNode.onended=null;try{this.bufferNode.stop()}catch(t){}this.bufferNode.disconnect(),this.bufferNode=null}this.gainNode.disconnect(),"function"==typeof this.audioContext.close&&Promise.resolve(this.audioContext.close.call(this.audioContext)).catch((()=>{})),this.buffer=null,this.unAll()}}get src(){return this.currentSrc}set src(t){if(this.currentSrc=t,this._duration=void 0,!t)return this.buffer=null,void this.emit("emptied");fetch(t).then((e=>{if(e.status>=400)throw new Error(`Failed to fetch ${t}: ${e.status} (${e.statusText})`);return e.arrayBuffer()})).then((e=>this.currentSrc!==t?null:this.audioContext.decodeAudioData(e))).then((e=>{this.currentSrc===t&&(this.buffer=e,this.emit("loadedmetadata"),this.emit("canplay"),this.autoplay&&this.play())})).catch((t=>{console.error("WebAudioPlayer load error:",t)}))}_play(){if(!this.paused)return;this.paused=!1,this.bufferNode&&(this.bufferNode.onended=null,this.bufferNode.disconnect()),this.bufferNode=this.audioContext.createBufferSource(),this.buffer&&(this.bufferNode.buffer=this.buffer),this.bufferNode.playbackRate.value=this._playbackRate,this.bufferNode.connect(this.gainNode);let t=this.playbackPosition;(t>=this.duration||t<0)&&(t=0,this.playbackPosition=0),this.bufferNode.start(this.audioContext.currentTime,t),this.playStartTime=this.audioContext.currentTime,this.bufferNode.onended=()=>{!this.paused&&this.duration-this.currentTime<.01&&(this.pause(),this.emit("ended"))}}_pause(){if(this.paused=!0,this.bufferNode){this.bufferNode.onended=null;try{this.bufferNode.stop()}catch(t){}}this.playbackPosition+=(this.audioContext.currentTime-this.playStartTime)*this._playbackRate}play(){return t(this,void 0,void 0,(function*(){this.paused&&(this._play(),this.emit("play"))}))}pause(){this.paused||(this._pause(),this.emit("pause"))}stopAt(t){const e=(t-this.currentTime)/this._playbackRate,i=this.bufferNode;null==i||i.stop(this.audioContext.currentTime+e),null==i||i.addEventListener("ended",(()=>{i===this.bufferNode&&(this.bufferNode=null,this.pause(),this.playbackPosition=Math.min(t,this.duration),this.emit("timeupdate"))}),{once:!0})}setSinkId(e){return t(this,void 0,void 0,(function*(){return this.audioContext.setSinkId(e)}))}get playbackRate(){return this._playbackRate}set playbackRate(t){const e=!this.paused;e&&this._pause(),this._playbackRate=t,e&&this._play(),this.bufferNode&&(this.bufferNode.playbackRate.value=t)}get currentTime(){return this.paused?this.playbackPosition:this.playbackPosition+(this.audioContext.currentTime-this.playStartTime)*this._playbackRate}set currentTime(t){const e=!this.paused;e&&this._pause(),this.playbackPosition=t,e&&this._play(),this.emit("seeking"),this.emit("timeupdate")}get duration(){var t,e;return null!==(t=this._duration)&&void 0!==t?t:(null===(e=this.buffer)||void 0===e?void 0:e.duration)||0}set duration(t){this._duration=t}get volume(){return this.gainNode.gain.value}set volume(t){this.gainNode.gain.value=t,this.emit("volumechange")}get muted(){return this._muted}set muted(t){this._muted!==t&&(this._muted=t,this._muted?this.gainNode.disconnect():this.gainNode.connect(this.audioContext.destination))}canPlayType(t){return/^(audio|video)\//.test(t)}getGainNode(){return this.gainNode}getChannelData(){const t=[];if(!this.buffer)return t;const e=this.buffer.numberOfChannels;for(let i=0;i<e;i++)t.push(this.buffer.getChannelData(i));return t}removeAttribute(t){switch(t){case"src":this.src="";break;case"playbackRate":this.playbackRate=0;break;case"currentTime":this.currentTime=0;break;case"duration":this.duration=0;break;case"volume":this.volume=0;break;case"muted":this.muted=!1}}}const P={waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interact:!0,dragToSeek:!1,autoScroll:!0,autoCenter:!0,sampleRate:8e3};class w extends u{static create(t){return new w(t)}getState(){return this.wavesurferState}getRenderer(){return this.renderer}constructor(t){const e=t.media||("WebAudio"===t.backend?new E:void 0);super({media:e,mediaControls:t.mediaControls,autoplay:t.autoplay,playbackRate:t.audioRate}),this.plugins=[],this.decodedData=null,this.stopAtPosition=null,this.subscriptions=[],this.mediaSubscriptions=[],this.abortController=null,this._isDestroyed=!1,this._loadVersion=0,this.reactiveCleanups=[],this.options=Object.assign({},P,t);const{state:i,actions:n}=function(t){var e,i,n,s,r,o;const a=null!==(e=null==t?void 0:t.currentTime)&&void 0!==e?e:l(0),c=null!==(i=null==t?void 0:t.duration)&&void 0!==i?i:l(0),u=null!==(n=null==t?void 0:t.isPlaying)&&void 0!==n?n:l(!1),d=null!==(s=null==t?void 0:t.isSeeking)&&void 0!==s?s:l(!1),p=null!==(r=null==t?void 0:t.volume)&&void 0!==r?r:l(1),m=null!==(o=null==t?void 0:t.playbackRate)&&void 0!==o?o:l(1),g=l(null),f=l(null),v=l(""),b=l(0),y=l(0),C=h((()=>!u.value),[u]),S=h((()=>null!==g.value),[g]),E=h((()=>S.value&&c.value>0),[S,c]),P=h((()=>a.value),[a]),w=h((()=>c.value>0?a.value/c.value:0),[a,c]);return{state:{currentTime:a,duration:c,isPlaying:u,isPaused:C,isSeeking:d,volume:p,playbackRate:m,audioBuffer:g,peaks:f,url:v,zoom:b,scrollPosition:y,canPlay:S,isReady:E,progress:P,progressPercent:w},actions:{setCurrentTime:t=>{const e=Math.max(0,Math.min(c.value||1/0,t));a.set(e)},setDuration:t=>{c.set(Math.max(0,t))},setPlaying:t=>{u.set(t)},setSeeking:t=>{d.set(t)},setVolume:t=>{const e=Math.max(0,Math.min(1,t));p.set(e)},setPlaybackRate:t=>{const e=Math.max(.1,Math.min(16,t));m.set(e)},setAudioBuffer:t=>{g.set(t),t&&c.set(t.duration)},setPeaks:t=>{f.set(t)},setUrl:t=>{v.set(t)},setZoom:t=>{b.set(Math.max(0,t))},setScrollPosition:t=>{y.set(Math.max(0,t))}}}}({isPlaying:this.isPlayingSignal,currentTime:this.currentTimeSignal,duration:this.durationSignal,volume:this.volumeSignal,playbackRate:this.playbackRateSignal,isSeeking:this.seekingSignal});this.wavesurferState=i,this.wavesurferActions=n,this.timer=new S;const s=e?void 0:this.getMediaElement();this.renderer=new C(this.options,s),this.initPlayerEvents(),this.initRendererEvents(),this.initTimerEvents(),this.initReactiveState(),this.initPlugins();const r=this.options.url||this.getSrc()||"";Promise.resolve().then((()=>{this.emit("init");const{peaks:t,duration:e}=this.options;(r||t&&e)&&this.load(r,t,e).catch((()=>{}))}))}updateProgress(t=this.getCurrentTime()){return this.renderer.renderProgress(t/this.getDuration(),this.isPlaying()),t}initTimerEvents(){this.subscriptions.push(this.timer.on("tick",(()=>{if(!this.isSeeking()){const t=this.updateProgress();if(this.emit("timeupdate",t),this.emit("audioprocess",t),null!=this.stopAtPosition&&this.isPlaying()&&t>=this.stopAtPosition){const t=this.stopAtPosition;this.pause(),this.setTime(t)}}})))}initReactiveState(){this.reactiveCleanups.push(function(t,e){const i=[];i.push(c((()=>{const i=t.isPlaying.value;e.emit(i?"play":"pause")}),[t.isPlaying])),i.push(c((()=>{const i=t.currentTime.value;e.emit("timeupdate",i),t.isPlaying.value&&e.emit("audioprocess",i)}),[t.currentTime,t.isPlaying])),i.push(c((()=>{t.isSeeking.value&&e.emit("seeking",t.currentTime.value)}),[t.isSeeking,t.currentTime]));let n=!1;i.push(c((()=>{t.isReady.value&&!n&&(n=!0,e.emit("ready",t.duration.value))}),[t.isReady,t.duration])),i.push(c((()=>{null===t.audioBuffer.value&&(n=!1)}),[t.audioBuffer]));let s=!1;return i.push(c((()=>{const i=t.isPlaying.value,n=t.currentTime.value,r=t.duration.value,o=r>0&&n>=r;s&&!i&&o&&e.emit("finish"),s=i&&o}),[t.isPlaying,t.currentTime,t.duration])),i.push(c((()=>{const i=t.zoom.value;i>0&&e.emit("zoom",i)}),[t.zoom])),()=>{i.forEach((t=>t()))}}(this.wavesurferState,{emit:this.emit.bind(this)}))}initPlayerEvents(){this.isPlaying()&&(this.emit("play"),this.timer.start()),this.mediaSubscriptions.push(this.onMediaEvent("timeupdate",(()=>{const t=this.updateProgress();this.emit("timeupdate",t)})),this.onMediaEvent("play",(()=>{this.emit("play"),this.timer.start()})),this.onMediaEvent("pause",(()=>{this.emit("pause"),this.timer.stop(),this.stopAtPosition=null})),this.onMediaEvent("emptied",(()=>{this.timer.stop(),this.stopAtPosition=null})),this.onMediaEvent("ended",(()=>{this.emit("timeupdate",this.getDuration()),this.emit("finish"),this.stopAtPosition=null})),this.onMediaEvent("seeking",(()=>{this.emit("seeking",this.getCurrentTime())})),this.onMediaEvent("error",(()=>{var t;this.emit("error",null!==(t=this.getMediaElement().error)&&void 0!==t?t:new Error("Media error")),this.stopAtPosition=null})))}initRendererEvents(){this.subscriptions.push(this.renderer.on("click",((t,e)=>{this.options.interact&&(this.seekTo(t),this.emit("interaction",t*this.getDuration()),this.emit("click",t,e))})),this.renderer.on("dblclick",((t,e)=>{this.emit("dblclick",t,e)})),this.renderer.on("scroll",((t,e,i,n)=>{const s=this.getDuration();this.emit("scroll",t*s,e*s,i,n)})),this.renderer.on("render",(()=>{this.emit("redraw")})),this.renderer.on("rendered",(()=>{this.emit("redrawcomplete")})),this.renderer.on("dragstart",(t=>{this.emit("dragstart",t)})),this.renderer.on("dragend",(t=>{this.emit("dragend",t)})),this.renderer.on("resize",(()=>{this.emit("resize")})));{let t;const e=this.renderer.on("drag",(e=>{var i;if(!this.options.interact)return;this.renderer.renderProgress(e),clearTimeout(t);let n=0;const s=this.options.dragToSeek;this.isPlaying()?n=0:!0===s?n=200:s&&"object"==typeof s&&(n=null!==(i=s.debounceTime)&&void 0!==i?i:200),t=setTimeout((()=>{this.seekTo(e)}),n),this.emit("interaction",e*this.getDuration()),this.emit("drag",e)}));this.subscriptions.push((()=>{clearTimeout(t),e()}))}}initPlugins(){var t;(null===(t=this.options.plugins)||void 0===t?void 0:t.length)&&this.options.plugins.forEach((t=>{this.registerPlugin(t)}))}unsubscribePlayerEvents(){this.mediaSubscriptions.forEach((t=>t())),this.mediaSubscriptions=[]}setOptions(t){this.options=Object.assign({},this.options,t),t.duration&&!t.peaks&&(this.decodedData=i.createBuffer(this.exportPeaks(),t.duration)),t.peaks&&t.duration&&(this.decodedData=i.createBuffer(t.peaks,t.duration)),this.renderer.setOptions(this.options),t.audioRate&&this.setPlaybackRate(t.audioRate),null!=t.mediaControls&&(this.getMediaElement().controls=t.mediaControls)}registerPlugin(t){if(this.plugins.includes(t))return t;t._init(this),this.plugins.push(t);const e=t.once("destroy",(()=>{this.plugins=this.plugins.filter((e=>e!==t)),this.subscriptions=this.subscriptions.filter((t=>t!==e))}));return this.subscriptions.push(e),t}unregisterPlugin(t){this.plugins=this.plugins.filter((e=>e!==t)),t.destroy()}getWrapper(){return this.renderer.getWrapper()}getWidth(){return this.renderer.getWidth()}getScroll(){return this.renderer.getScroll()}setScroll(t){return this.renderer.setScroll(t)}setScrollTime(t){const e=t/this.getDuration();this.renderer.setScrollPercentage(e)}getActivePlugins(){return this.plugins}loadAudio(e,n,s,r){return t(this,void 0,void 0,(function*(){var t;const o=++this._loadVersion;if(this._isDestroyed=!1,this.emit("load",e),!this.options.media&&this.isPlaying()&&this.pause(),this.decodedData=null,this.stopAtPosition=null,null===(t=this.abortController)||void 0===t||t.abort(),this.abortController=null,!n&&!s){const t=this.options.fetchParams||{};window.AbortController&&!t.signal&&(this.abortController=new AbortController,t.signal=this.abortController.signal);const i=t=>this.emit("loading",t);if(n=yield a.fetchBlob(e,i,t),this._isDestroyed||o!==this._loadVersion)return;const s=this.options.blobMimeType;s&&(n=new Blob([n],{type:s}))}if(this._isDestroyed||o!==this._loadVersion)return;this.setSrc(e,n);const l=yield new Promise((t=>{const e=r||this.getDuration();e?t(e):this.mediaSubscriptions.push(this.onMediaEvent("loadedmetadata",(()=>t(this.getDuration())),{once:!0}))}));if(!this._isDestroyed&&o===this._loadVersion){if(!e&&!n){const t=this.getMediaElement();t instanceof E&&(t.duration=l)}if(s)this.decodedData=i.createBuffer(s,l||0);else if(n){const t=yield n.arrayBuffer();if(this._isDestroyed||o!==this._loadVersion)return;this.decodedData=yield i.decode(t,this.options.sampleRate)}this._isDestroyed||o!==this._loadVersion||(this.decodedData&&(this.emit("decode",this.getDuration()),this.renderer.render(this.decodedData)),this.emit("ready",this.getDuration()))}}))}load(e,i,n){return t(this,void 0,void 0,(function*(){try{return yield this.loadAudio(e,void 0,i,n)}catch(t){throw this.emit("error",t),t}}))}loadBlob(e,i,n){return t(this,void 0,void 0,(function*(){try{return yield this.loadAudio("",e,i,n)}catch(t){throw this.emit("error",t),t}}))}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(t),this.emit("zoom",t)}getDecodedData(){return this.decodedData}exportPeaks({channels:t=2,maxLength:e=8e3,precision:i=1e4}={}){if(!this.decodedData)throw new Error("The audio has not been decoded yet");const n=Math.min(t,this.decodedData.numberOfChannels),s=[];for(let t=0;t<n;t++){const n=this.decodedData.getChannelData(t),r=[],o=n.length/e;for(let t=0;t<e;t++){const e=n.slice(Math.floor(t*o),Math.ceil((t+1)*o));let s=0;for(let t=0;t<e.length;t++){const i=e[t];Math.abs(i)>Math.abs(s)&&(s=i)}r.push(Math.round(s*i)/i)}s.push(r)}return s}getDuration(){let t=super.getDuration()||0;return 0!==t&&t!==1/0||!this.decodedData||(t=this.decodedData.duration),t}toggleInteraction(t){this.options.interact=t}setTime(t){this.stopAtPosition=null,super.setTime(t),this.updateProgress(t),this.emit("timeupdate",t)}seekTo(t){const e=this.getDuration()*t;this.setTime(e)}play(e,i){const n=Object.create(null,{play:{get:()=>super.play}});return t(this,void 0,void 0,(function*(){null!=e&&this.setTime(e);const t=yield n.play.call(this);return null!=i&&(this.media instanceof E?this.media.stopAt(i):this.stopAtPosition=i),t}))}playPause(){return t(this,void 0,void 0,(function*(){return this.isPlaying()?this.pause():this.play()}))}stop(){this.pause(),this.setTime(0)}skip(t){this.setTime(this.getCurrentTime()+t)}empty(){this.load("",[[0]],.001)}setMediaElement(t){this.unsubscribePlayerEvents(),super.setMediaElement(t),this.initPlayerEvents()}exportImage(){return t(this,arguments,void 0,(function*(t="image/png",e=1,i="dataURL"){return this.renderer.exportImage(t,e,i)}))}destroy(){var t;this._isDestroyed=!0,this.emit("destroy"),null===(t=this.abortController)||void 0===t||t.abort(),this.plugins.forEach((t=>t.destroy())),this.subscriptions.forEach((t=>t())),this.unsubscribePlayerEvents(),this.reactiveCleanups.forEach((t=>t())),this.reactiveCleanups=[],this.timer.destroy(),this.renderer.destroy(),super.destroy()}}w.BasePlugin=class extends e{constructor(t){super(),this.subscriptions=[],this.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}},w.dom=o;
 
+// EXTERNAL MODULE: ./src/lib/util.js + 1 modules
+var util = __webpack_require__(4410);
 ;// ./src/lib/viewers/media/waveform/colors.ts
 /**
  * Figma Audio Player waveform tokens as opaque fills.
@@ -4085,14 +4380,6 @@ const WAVEFORM_COLOR_HOVER_PLAYED = whiteOnBlack(0.9);
 const WAVEFORM_COLOR_HOVER_AREA = whiteOnBlack(0.6);
 const WAVEFORM_COLOR_HOVER_UNPLAYED = whiteOnBlack(0.3);
 const WAVEFORM_COLOR_HOVER_BUFFER = whiteOnBlack(0.16);
-
-/** One canvas linear-gradient stop. `offset` is 0–1 along the bar. */
-
-/**
- * Wavesurfer's two paints: left of the playhead (`progressColor`) and right of it (`waveColor`).
- * A string is a solid fill; a stop list is a left-to-right step gradient.
- */
-
 /** Pin a value to the closed interval [0, 1]. */
 function clampTo0And1(value) {
   if (!Number.isFinite(value) || value < 0) {
@@ -4227,29 +4514,144 @@ function toCanvasFill(color, widthPx) {
   });
   return gradient;
 }
+
+/** Untinted bar pixels for each WaveSurfer tile, so hover can re-tint without stacking. */
+const tileBarSnapshots = new WeakMap();
+
+/** Restore the last bar snapshot, or take a new one after WaveSurfer redraws. */
+function restoreOrSnapshotTile(canvas, context, replaceSnapshot) {
+  if (!(canvas.width > 0) || !(canvas.height > 0) || !context.getImageData) {
+    return;
+  }
+  const stored = tileBarSnapshots.get(canvas);
+  if (!replaceSnapshot && stored && context.putImageData) {
+    context.putImageData(stored, 0, 0);
+    return;
+  }
+  try {
+    tileBarSnapshots.set(canvas, context.getImageData(0, 0, canvas.width, canvas.height));
+  } catch {
+    // Tainted or zero-size canvases cannot snapshot; tint in place.
+  }
+}
+
+/** CSS width of a tile canvas (style.width, then clientWidth, then bitmap width). */
+function tileWidthCss(canvas) {
+  const styled = parseFloat(canvas.style.width);
+  if (styled > 0) {
+    return styled;
+  }
+  if (canvas.clientWidth > 0) {
+    return canvas.clientWidth;
+  }
+  return canvas.width;
+}
+
+/** Solid color, or a gradient aligned to the full waveform and shifted to this tile. */
+function fillForTile(context, color, totalWidthCss, offsetCss, canvas) {
+  if (typeof color === 'string') {
+    return color;
+  }
+  const cssWidth = tileWidthCss(canvas);
+  const scale = cssWidth > 0 ? canvas.width / cssWidth : 1;
+  if (!(totalWidthCss > 0) || !(scale > 0)) {
+    return color[0] ? color[0].color : WAVEFORM_COLOR_UNPLAYED;
+  }
+  const x0 = -offsetCss * scale || 0;
+  const x1 = (totalWidthCss - offsetCss) * scale;
+  const gradient = context.createLinearGradient(x0, 0, x1, 0);
+  let lastOffset = -1;
+  color.forEach(stop => {
+    let offset = clampTo0And1(stop.offset);
+    if (offset <= lastOffset) {
+      offset = Math.min(1, lastOffset + 1e-6);
+    }
+    lastOffset = offset;
+    gradient.addColorStop(offset, stop.color);
+  });
+  return gradient;
+}
+
+/**
+ * Wavesurfer splits a zoomed waveform into viewport-sized tiles and paints each
+ * from x=0. Re-tint with a gradient in global waveform space so hover/buffer
+ * colors do not repeat on the last tile.
+ */
+function tintWaveformTiles({
+  fills,
+  host,
+  replaceSnapshot = false,
+  totalWidthCss
+}) {
+  if (!(totalWidthCss > 0) || !host.querySelectorAll) {
+    return;
+  }
+  const groups = [{
+    canvases: host.querySelectorAll('.canvases canvas'),
+    color: fills.waveColor
+  }, {
+    canvases: host.querySelectorAll('.progress canvas'),
+    color: fills.progressColor
+  }];
+  groups.forEach(({
+    canvases,
+    color
+  }) => {
+    canvases.forEach(canvas => {
+      const context = canvas.getContext('2d');
+      if (!context) {
+        return;
+      }
+      restoreOrSnapshotTile(canvas, context, replaceSnapshot);
+      const offsetCss = parseFloat(canvas.style.left) || 0;
+      context.save();
+      context.globalCompositeOperation = 'source-in';
+      context.fillStyle = fillForTile(context, color, totalWidthCss, offsetCss, canvas);
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      context.restore();
+    });
+  });
+}
 ;// ./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); }
 
 
 
 
 
-const WAVEFORM_BAR_GAP = 2;
-const WAVEFORM_BAR_WIDTH = 2;
-const WAVEFORM_BAR_RADIUS = WAVEFORM_BAR_WIDTH / 2;
-/** Total bar height so the top and bottom radii meet as a circle on the mirror. */
-const WAVEFORM_BAR_MIN_HEIGHT = WAVEFORM_BAR_WIDTH;
-const WAVEFORM_HEIGHT = 140;
-function leftPercent(timeSec, durationSec) {
-  const progress = durationSec > 0 ? Math.min(1, Math.max(0, timeSec / durationSec)) : 0;
-  return `${progress * 100}%`;
-}
-function fillWidth(widthCssPx) {
+
+
+
+
+/** Pointer X in the view and the media time under it; zoom keeps this point fixed. */
+
+/** CSS width × devicePixelRatio, for canvas gradient fills. */
+function devicePixelWidth(widthCssPx) {
   const pixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
   return widthCssPx * pixelRatio;
 }
+function prefersReducedMotion() {
+  return typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function getScrollLeft(wavesurfer, fallback = 0) {
+  return wavesurfer && wavesurfer.getScroll ? wavesurfer.getScroll() : fallback;
+}
+
+/** 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}%`;
+}
 function applyPeaks(wavesurfer, peaks, durationSec) {
   if (!wavesurfer.load) {
     return;
@@ -4257,6 +4659,44 @@ function applyPeaks(wavesurfer, peaks, durationSec) {
   wavesurfer.load('', toChannels(peaks), durationSec);
 }
 
+/** Tint WaveSurfer's zoomed tiles with played/unplayed/hover/buffer colors. */
+function tintZoomedWaveform(wavesurfer, fills, replaceSnapshot = false) {
+  const wrapper = wavesurfer.getWrapper ? wavesurfer.getWrapper() : null;
+  if (!wrapper || !(wrapper.clientWidth > 0)) {
+    return;
+  }
+  tintWaveformTiles({
+    fills,
+    host: wrapper,
+    replaceSnapshot,
+    totalWidthCss: wrapper.clientWidth
+  });
+}
+function touchDistance(touches) {
+  if (touches.length < 2) {
+    return 0;
+  }
+  const dx = touches[0].clientX - touches[1].clientX;
+  const dy = touches[0].clientY - touches[1].clientY;
+  return Math.hypot(dx, dy);
+}
+
+/** Time under the pointer, plus its X in the view, so zoom can keep that point fixed. */
+function zoomOriginAtPointer(pointerX, wavesurfer, durationSec, fallbackWidth) {
+  if (!(fallbackWidth > 0) || !(durationSec > 0) || !Number.isFinite(pointerX)) {
+    return null;
+  }
+  const wrapper = wavesurfer && wavesurfer.getWrapper ? wavesurfer.getWrapper() : null;
+  const fullWidth = wrapper && wrapper.clientWidth ? wrapper.clientWidth : fallbackWidth;
+  if (!(fullWidth > 0)) {
+    return null;
+  }
+  return {
+    pointerX,
+    timeSec: (getScrollLeft(wavesurfer) + pointerX) / fullWidth * durationSec
+  };
+}
+
 /**
  * Renders V1 peaks with wavesurfer. Does not fetch audio or attach a media element.
  */
@@ -4264,42 +4704,114 @@ function WaveformView({
   bufferedRange,
   currentTime = 0,
   durationSec,
-  height = WAVEFORM_HEIGHT,
+  height = constants/* WAVEFORM_HEIGHT */.oN,
   interactive = true,
   mediaEl,
   onSeek,
-  peaks
+  onViewportChange,
+  onZoomChange,
+  peaks,
+  zoomLevel: zoomLevelProp
 }) {
   const containerRef = (0,external_react_.useRef)(null);
+  const trackRef = (0,external_react_.useRef)(null);
   const playheadRef = (0,external_react_.useRef)(null);
-  const playheadRafRef = (0,external_react_.useRef)(0);
+  const playheadAnimationRef = (0,external_react_.useRef)(0);
   const wavesurferRef = (0,external_react_.useRef)(null);
   const onSeekRef = (0,external_react_.useRef)(onSeek);
   const interactiveRef = (0,external_react_.useRef)(interactive);
+  const hasZoomHandlersRef = (0,external_react_.useRef)(false);
   const currentTimeRef = (0,external_react_.useRef)(currentTime);
   const peaksRef = (0,external_react_.useRef)(peaks);
   const displayedPeaksRef = (0,external_react_.useRef)(null);
-  const peakTransitionRafRef = (0,external_react_.useRef)(0);
+  const peakTransitionAnimationRef = (0,external_react_.useRef)(0);
   const durationSecRef = (0,external_react_.useRef)(durationSec);
+  const zoomOriginRef = (0,external_react_.useRef)(null);
+  const pinchStartRef = (0,external_react_.useRef)(null);
+  const bufferProgressRef = (0,external_react_.useRef)(0);
+  const hoverProgressRef = (0,external_react_.useRef)(null);
+  const programmaticScrollRef = (0,external_react_.useRef)(false);
+  const onViewportChangeRef = (0,external_react_.useRef)(onViewportChange);
   onSeekRef.current = onSeek;
   interactiveRef.current = interactive;
   currentTimeRef.current = currentTime;
   peaksRef.current = peaks;
   durationSecRef.current = durationSec;
+  onViewportChangeRef.current = onViewportChange;
+  const [internalZoom, setInternalZoom] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
   const [hoverProgress, setHoverProgress] = (0,external_react_.useState)(null);
   const [canvasWidthPx, setCanvasWidthPx] = (0,external_react_.useState)(0);
+  const [scrollLeft, setScrollLeft] = (0,external_react_.useState)(0);
+  const isControlled = typeof zoomLevelProp === 'number';
+  const maxZoom = getWaveformZoomMax({
+    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 zoomRef = (0,external_react_.useRef)(zoomLevel);
+  zoomRef.current = zoomLevel;
+  const prevZoomRef = (0,external_react_.useRef)(null);
+  const isZoomed = zoomLevel > constants/* WAVEFORM_ZOOM_MIN */.LW;
   const bufferProgress = getBufferedProgress(bufferedRange, durationSec);
+  bufferProgressRef.current = bufferProgress;
+  hoverProgressRef.current = hoverProgress;
+  const viewport = (0,external_react_.useMemo)(() => createWaveformViewport({
+    durationSec,
+    heightPx: height,
+    maxZoom,
+    scrollLeftPx: scrollLeft,
+    widthPx: canvasWidthPx,
+    zoomLevel
+  }), [canvasWidthPx, durationSec, height, maxZoom, scrollLeft, zoomLevel]);
+  const viewportRef = (0,external_react_.useRef)(viewport);
+  viewportRef.current = viewport;
+  const setZoomLevel = (0,external_react_.useCallback)(nextZoom => {
+    const zoom = clampWaveformZoom(nextZoom, maxZoom);
+    if (!isControlled) {
+      setInternalZoom(zoom);
+    }
+    onZoomChange?.(zoom);
+  }, [isControlled, maxZoom, onZoomChange]);
+  const syncViewport = (0,external_react_.useCallback)(() => {
+    const wavesurfer = wavesurferRef.current;
+    if (!wavesurfer) {
+      return;
+    }
+    const scrollLeftPx = getScrollLeft(wavesurfer);
+    viewportRef.current = getViewportAtScroll(viewportRef.current, scrollLeftPx);
+    onViewportChangeRef.current?.(viewportRef.current);
+    setScrollLeft(scrollLeftPx);
+  }, []);
   const updatePlayheadPosition = (0,external_react_.useCallback)(timeSec => {
     const playhead = playheadRef.current;
     if (!playhead) {
       return;
     }
-    playhead.style.left = leftPercent(timeSec, durationSecRef.current);
+    playhead.style.left = timeLeftPercent(timeSec, durationSecRef.current, viewportRef.current);
     const wavesurfer = wavesurferRef.current;
     if (wavesurfer && wavesurfer.setTime) {
       wavesurfer.setTime(timeSec);
     }
   }, []);
+  const applyScrollLeft = (0,external_react_.useCallback)((scrollLeftPx, shouldCommitState) => {
+    const wavesurfer = wavesurferRef.current;
+    if (!wavesurfer || !wavesurfer.setScroll) {
+      return;
+    }
+    programmaticScrollRef.current = true;
+    wavesurfer.setScroll(scrollLeftPx);
+    viewportRef.current = getViewportAtScroll(viewportRef.current, getScrollLeft(wavesurfer, scrollLeftPx));
+    window.requestAnimationFrame(() => {
+      // Keep the flag through delayed `scroll` after a zoom setScroll.
+      programmaticScrollRef.current = false;
+    });
+    if (shouldCommitState) {
+      onViewportChangeRef.current?.(viewportRef.current);
+      setScrollLeft(getScrollLeft(wavesurfer, scrollLeftPx));
+    }
+  }, []);
   (0,external_react_.useEffect)(() => {
     const container = containerRef.current;
     if (!container) {
@@ -4307,10 +4819,10 @@ function WaveformView({
     }
     const wavesurfer = w.create({
       autoScroll: false,
-      barGap: WAVEFORM_BAR_GAP,
-      barMinHeight: WAVEFORM_BAR_MIN_HEIGHT,
-      barRadius: WAVEFORM_BAR_RADIUS,
-      barWidth: WAVEFORM_BAR_WIDTH,
+      barGap: constants/* WAVEFORM_BAR_GAP */.Lu,
+      barMinHeight: constants/* WAVEFORM_BAR_MIN_HEIGHT */.XS,
+      barRadius: constants/* WAVEFORM_BAR_RADIUS */.DY,
+      barWidth: constants/* WAVEFORM_BAR_WIDTH */.zo,
       container,
       cursorWidth: 0,
       duration: durationSecRef.current,
@@ -4329,16 +4841,39 @@ function WaveformView({
       }
       onSeekRef.current?.(relativeX * durationSecRef.current);
     });
+    const unsubscribeScroll = wavesurfer.on('scroll', () => {
+      if (programmaticScrollRef.current) {
+        viewportRef.current = getViewportAtScroll(viewportRef.current, getScrollLeft(wavesurfer));
+        return;
+      }
+      syncViewport();
+    });
+    const unsubscribeZoom = wavesurfer.on('zoom', () => {
+      syncViewport();
+    });
+    const unsubscribeRedraw = wavesurfer.on('redrawcomplete', () => {
+      if (!(zoomRef.current > constants/* WAVEFORM_ZOOM_MIN */.LW)) {
+        return;
+      }
+      tintZoomedWaveform(wavesurfer, getWaveformFills({
+        bufferProgress: bufferProgressRef.current,
+        hoverProgress: hoverProgressRef.current
+      }), true);
+    });
     wavesurferRef.current = wavesurfer;
     displayedPeaksRef.current = peaksRef.current;
+    syncViewport();
     return () => {
-      window.cancelAnimationFrame(peakTransitionRafRef.current);
+      window.cancelAnimationFrame(peakTransitionAnimationRef.current);
       unsubscribeClick();
+      unsubscribeScroll();
+      unsubscribeZoom();
+      unsubscribeRedraw();
       wavesurfer.destroy();
       wavesurferRef.current = null;
       displayedPeaksRef.current = null;
     };
-  }, [height]);
+  }, [height, syncViewport]);
   (0,external_react_.useLayoutEffect)(() => {
     const el = containerRef.current;
     if (!el) {
@@ -4349,10 +4884,24 @@ function WaveformView({
       entries.forEach(entry => {
         setCanvasWidthPx(entry.contentRect.width);
       });
+      syncViewport();
     });
     observer.observe(el);
     return () => observer.disconnect();
-  }, []);
+  }, [syncViewport]);
+  (0,external_react_.useEffect)(() => {
+    const rawZoom = isControlled ? zoomLevelProp : internalZoom;
+    const clamped = clampWaveformZoom(typeof rawZoom === 'number' ? rawZoom : constants/* WAVEFORM_ZOOM_MIN */.LW, maxZoom);
+    if (clamped === rawZoom) {
+      return;
+    }
+    if (!isControlled) {
+      setInternalZoom(clamped);
+    }
+  }, [internalZoom, isControlled, maxZoom, zoomLevelProp]);
+  (0,external_react_.useEffect)(() => {
+    onViewportChange?.(viewport);
+  }, [onViewportChange, viewport]);
   (0,external_react_.useEffect)(() => {
     const wavesurfer = wavesurferRef.current;
     if (!wavesurfer || !wavesurfer.setOptions) {
@@ -4362,13 +4911,48 @@ function WaveformView({
       interact: interactive
     });
   }, [interactive]);
+  (0,external_react_.useEffect)(() => {
+    const wavesurfer = wavesurferRef.current;
+    const container = containerRef.current;
+    if (!wavesurfer || !wavesurfer.setOptions || !container) {
+      return;
+    }
+    const viewWidthPx = wavesurfer.getWidth ? wavesurfer.getWidth() : container.clientWidth;
+    const minPxPerSec = getZoomedPixelsPerSecond({
+      durationSec,
+      maxZoom,
+      viewWidthPx,
+      zoomLevel
+    });
+    wavesurfer.setOptions(WaveformView_objectSpread({
+      autoScroll: false,
+      minPxPerSec
+    }, zoomLevel > constants/* WAVEFORM_ZOOM_MIN */.LW ? {
+      progressColor: WAVEFORM_COLOR_PLAYED,
+      waveColor: WAVEFORM_COLOR_UNPLAYED
+    } : {}));
+    const origin = zoomOriginRef.current;
+    zoomOriginRef.current = null;
+    const didZoomChange = prevZoomRef.current !== zoomLevel;
+    prevZoomRef.current = zoomLevel;
+    if (minPxPerSec > 0) {
+      if (origin) {
+        applyScrollLeft(origin.timeSec * minPxPerSec - origin.pointerX, true);
+      } else if (didZoomChange) {
+        const maxScroll = Math.max(0, durationSec * minPxPerSec - viewWidthPx);
+        applyScrollLeft(Math.min(maxScroll, Math.max(0, currentTimeRef.current * minPxPerSec - viewWidthPx / 2)), true);
+      }
+    }
+    wavesurfer.setTime(currentTimeRef.current);
+    syncViewport();
+  }, [applyScrollLeft, durationSec, maxZoom, syncViewport, zoomLevel]);
   (0,external_react_.useLayoutEffect)(() => {
     if (mediaEl && !mediaEl.paused) {
       updatePlayheadPosition(mediaEl.currentTime);
       return;
     }
     updatePlayheadPosition(currentTime);
-  }, [currentTime, durationSec, mediaEl, updatePlayheadPosition]);
+  }, [currentTime, durationSec, mediaEl, updatePlayheadPosition, viewport]);
   (0,external_react_.useEffect)(() => {
     const media = mediaEl;
     if (!media) {
@@ -4378,14 +4962,14 @@ function WaveformView({
       if (!media.paused) {
         updatePlayheadPosition(media.currentTime);
       }
-      playheadRafRef.current = window.requestAnimationFrame(tick);
+      playheadAnimationRef.current = window.requestAnimationFrame(tick);
     };
     const startLoop = () => {
-      window.cancelAnimationFrame(playheadRafRef.current);
-      playheadRafRef.current = window.requestAnimationFrame(tick);
+      window.cancelAnimationFrame(playheadAnimationRef.current);
+      playheadAnimationRef.current = window.requestAnimationFrame(tick);
     };
     const stopLoop = () => {
-      window.cancelAnimationFrame(playheadRafRef.current);
+      window.cancelAnimationFrame(playheadAnimationRef.current);
       updatePlayheadPosition(media.currentTime);
     };
     const handleSeeked = () => {
@@ -4395,11 +4979,13 @@ function WaveformView({
       startLoop();
     }
     media.addEventListener('play', startLoop);
+    media.addEventListener('playing', startLoop);
     media.addEventListener('pause', stopLoop);
     media.addEventListener('seeked', handleSeeked);
     return () => {
-      window.cancelAnimationFrame(playheadRafRef.current);
+      window.cancelAnimationFrame(playheadAnimationRef.current);
       media.removeEventListener('play', startLoop);
+      media.removeEventListener('playing', startLoop);
       media.removeEventListener('pause', stopLoop);
       media.removeEventListener('seeked', handleSeeked);
     };
@@ -4409,28 +4995,27 @@ function WaveformView({
     if (!wavesurfer || !wavesurfer.setOptions || !(durationSec > 0)) {
       return undefined;
     }
+    window.cancelAnimationFrame(peakTransitionAnimationRef.current);
     const fromPeaks = displayedPeaksRef.current;
-    const reduceMotion = typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    window.cancelAnimationFrame(peakTransitionRafRef.current);
-    if (!fromPeaks || fromPeaks === peaks || reduceMotion) {
+    if (!fromPeaks || fromPeaks === peaks || prefersReducedMotion()) {
       displayedPeaksRef.current = peaks;
       applyPeaks(wavesurfer, peaks, durationSec);
       return undefined;
     }
-    const start = typeof performance !== 'undefined' ? performance.now() : Date.now();
+    const start = (0,util/* getCurrentTimeMs */.RU)();
     const tick = now => {
       const elapsedMs = now - start;
       const framePeaks = morphPeaks(fromPeaks, peaks, elapsedMs);
       displayedPeaksRef.current = framePeaks;
       applyPeaks(wavesurfer, framePeaks, durationSec);
       if (elapsedMs < WAVEFORM_PEAK_TRANSITION_MS) {
-        peakTransitionRafRef.current = window.requestAnimationFrame(tick);
+        peakTransitionAnimationRef.current = window.requestAnimationFrame(tick);
       } else {
         displayedPeaksRef.current = peaks;
       }
     };
-    peakTransitionRafRef.current = window.requestAnimationFrame(tick);
-    return () => window.cancelAnimationFrame(peakTransitionRafRef.current);
+    peakTransitionAnimationRef.current = window.requestAnimationFrame(tick);
+    return () => window.cancelAnimationFrame(peakTransitionAnimationRef.current);
   }, [durationSec, peaks]);
   (0,external_react_.useEffect)(() => {
     const wavesurfer = wavesurferRef.current;
@@ -4441,12 +5026,91 @@ function WaveformView({
       bufferProgress,
       hoverProgress
     });
+    if (isZoomed) {
+      tintZoomedWaveform(wavesurfer, fills);
+      return;
+    }
     wavesurfer.setOptions({
-      progressColor: toCanvasFill(fills.progressColor, fillWidth(canvasWidthPx)),
-      waveColor: toCanvasFill(fills.waveColor, fillWidth(canvasWidthPx))
+      progressColor: toCanvasFill(fills.progressColor, devicePixelWidth(canvasWidthPx)),
+      waveColor: toCanvasFill(fills.waveColor, devicePixelWidth(canvasWidthPx))
     });
     wavesurfer.setTime(currentTimeRef.current);
-  }, [bufferProgress, canvasWidthPx, hoverProgress]);
+  }, [bufferProgress, canvasWidthPx, hoverProgress, isZoomed]);
+  (0,external_react_.useEffect)(() => {
+    const track = trackRef.current;
+    if (!track) {
+      return undefined;
+    }
+
+    /** Remember the time under this pointer so pinch/wheel zoom stays anchored. */
+    const captureZoomOrigin = clientX => {
+      const rect = track.getBoundingClientRect();
+      zoomOriginRef.current = zoomOriginAtPointer(clientX - rect.left, wavesurferRef.current, durationSec, rect.width);
+    };
+
+    /** Zoom origin at the midpoint of a two-finger pinch. */
+    const zoomOriginFromPinch = touches => {
+      if (touches.length < 2) {
+        return null;
+      }
+      const rect = track.getBoundingClientRect();
+      const pointerX = (touches[0].clientX + touches[1].clientX) / 2 - rect.left;
+      return zoomOriginAtPointer(pointerX, wavesurferRef.current, durationSec, rect.width);
+    };
+
+    /** Ctrl/meta + wheel zooms around the pointer. */
+    const onZoomWheel = event => {
+      if (!interactiveRef.current || !hasZoomHandlersRef.current || !event.ctrlKey && !event.metaKey) {
+        return;
+      }
+      event.preventDefault();
+      captureZoomOrigin(event.clientX);
+      setZoomLevel(zoomRef.current * Math.exp(-event.deltaY * 0.01));
+    };
+    const onTouchStart = event => {
+      if (!interactiveRef.current || !hasZoomHandlersRef.current || event.touches.length !== 2) {
+        pinchStartRef.current = null;
+        return;
+      }
+      zoomOriginRef.current = zoomOriginFromPinch(event.touches);
+      pinchStartRef.current = {
+        distance: touchDistance(event.touches),
+        zoom: zoomRef.current
+      };
+    };
+    const onTouchMove = event => {
+      const pinch = pinchStartRef.current;
+      if (!interactiveRef.current || !hasZoomHandlersRef.current || !pinch || event.touches.length !== 2 || !(pinch.distance > 0)) {
+        return;
+      }
+      event.preventDefault();
+      zoomOriginRef.current = zoomOriginFromPinch(event.touches);
+      setZoomLevel(pinch.zoom * (touchDistance(event.touches) / pinch.distance));
+    };
+    const onTouchEnd = event => {
+      if (event.touches.length < 2) {
+        pinchStartRef.current = null;
+      }
+    };
+    track.addEventListener('wheel', onZoomWheel, {
+      passive: false
+    });
+    track.addEventListener('touchstart', onTouchStart, {
+      passive: true
+    });
+    track.addEventListener('touchmove', onTouchMove, {
+      passive: false
+    });
+    track.addEventListener('touchend', onTouchEnd);
+    track.addEventListener('touchcancel', onTouchEnd);
+    return () => {
+      track.removeEventListener('wheel', onZoomWheel);
+      track.removeEventListener('touchstart', onTouchStart);
+      track.removeEventListener('touchmove', onTouchMove);
+      track.removeEventListener('touchend', onTouchEnd);
+      track.removeEventListener('touchcancel', onTouchEnd);
+    };
+  }, [durationSec, setZoomLevel]);
   const onHoverMove = (0,external_react_.useCallback)(event => {
     if (!interactive) {
       return;
@@ -4455,20 +5119,26 @@ function WaveformView({
     if (!(rect.width > 0) || !(durationSec > 0)) {
       return;
     }
-    const x = event.clientX - rect.left;
-    if (!Number.isFinite(x)) {
+    const pointerX = event.clientX - rect.left;
+    if (!Number.isFinite(pointerX)) {
       return;
     }
-    setHoverProgress(Math.min(1, Math.max(0, x / rect.width)));
+    const vp = viewportRef.current;
+    if (vp.pixelsPerSecond > 0) {
+      setHoverProgress(Math.min(1, Math.max(0, timeFromPositionPx(pointerX, vp) / durationSec)));
+      return;
+    }
+    setHoverProgress(Math.min(1, Math.max(0, pointerX / rect.width)));
   }, [durationSec, interactive]);
   const onHoverLeave = (0,external_react_.useCallback)(() => {
     setHoverProgress(null);
   }, []);
-  const hoverLeft = hoverProgress == null ? null : `${hoverProgress * 100}%`;
+  const hoverLeft = hoverProgress == null ? null : timeLeftPercent(hoverProgress * durationSec, durationSec, viewportRef.current);
   return /*#__PURE__*/external_react_["default"].createElement("div", {
-    className: `bp-WaveformView${interactive ? '' : ' bp-WaveformView--inert'}`,
+    className: `bp-WaveformView${interactive ? '' : ' bp-WaveformView--inert'}${isZoomed ? ' bp-WaveformView--zoomed' : ''}`,
     "data-testid": "bp-waveform-view"
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: trackRef,
     className: "bp-WaveformView-track",
     onMouseLeave: interactive ? onHoverLeave : undefined,
     onMouseMove: interactive ? onHoverMove : undefined
@@ -4491,6 +5161,139 @@ function WaveformView({
     "data-testid": "bp-waveform-hover-time"
   }, formatTime(hoverProgress * durationSec)))));
 }
+// EXTERNAL MODULE: ./node_modules/classnames/index.js
+var classnames = __webpack_require__(2485);
+var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
+;// ./src/lib/viewers/controls/icons/IconZoom24.tsx
+
+function IconZoom24() {
+  return /*#__PURE__*/external_react_.createElement("svg", {
+    focusable: false,
+    height: 24,
+    viewBox: "0 0 24 24",
+    width: 24
+  }, /*#__PURE__*/external_react_.createElement("path", {
+    d: "M2 12h20M6 8l-4 4 4 4M18 8l4 4-4 4",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "2"
+  }));
+}
+/* harmony default export */ const icons_IconZoom24 = (IconZoom24);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaToggle.tsx
+var MediaToggle = __webpack_require__(8997);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/slider/SliderControl.tsx + 1 modules
+var SliderControl = __webpack_require__(4937);
+;// ./src/lib/viewers/media/waveform/WaveformZoomControl.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/media/waveform/WaveformZoomControl.tsx
+
+
+
+
+
+
+
+
+function WaveformZoomControl({
+  isRevealed = false,
+  maxZoom,
+  onZoomChange,
+  zoomLevel
+}) {
+  const [isHovered, setHovered] = (0,external_react_.useState)(false);
+  const [isFocused, setFocused] = (0,external_react_.useState)(false);
+  const dismissTimerRef = (0,external_react_.useRef)(0);
+  const flyoutRef = (0,external_react_.useRef)(null);
+  const shouldFocusSliderRef = (0,external_react_.useRef)(false);
+  const sliderId = `bp-waveform-zoom-slider${(0,external_react_.useId)()}`;
+  const zoom = clampWaveformZoom(zoomLevel, maxZoom);
+  const zoomValue = Math.round(sliderValueFromZoom(zoom, maxZoom));
+  const isOpen = isHovered || isFocused || isRevealed;
+  const clearDismiss = (0,external_react_.useCallback)(() => {
+    window.clearTimeout(dismissTimerRef.current);
+    dismissTimerRef.current = 0;
+  }, []);
+  (0,external_react_.useEffect)(() => () => window.clearTimeout(dismissTimerRef.current), []);
+  (0,external_react_.useLayoutEffect)(() => {
+    if (!isOpen || !shouldFocusSliderRef.current) {
+      return;
+    }
+    shouldFocusSliderRef.current = false;
+    flyoutRef.current?.querySelector('[role="slider"]')?.focus();
+  }, [isOpen]);
+  const handleSlider = (0,external_react_.useCallback)(newValue => {
+    onZoomChange(zoomFromSliderValue(newValue, maxZoom));
+  }, [maxZoom, onZoomChange]);
+  const handleToggleClick = (0,external_react_.useCallback)(() => {
+    clearDismiss();
+    if (isOpen) {
+      shouldFocusSliderRef.current = false;
+      setFocused(false);
+      setHovered(false);
+      return;
+    }
+    shouldFocusSliderRef.current = true;
+    setFocused(true);
+  }, [clearDismiss, isOpen]);
+  return /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: classnames_default()('bp-WaveformZoomControl', {
+      'bp-is-open': isOpen
+    }),
+    "data-testid": "bp-waveform-zoom",
+    onBlur: event => {
+      if (event.currentTarget.contains(event.relatedTarget)) {
+        return;
+      }
+      setFocused(false);
+    },
+    onFocus: () => {
+      clearDismiss();
+      setFocused(true);
+    },
+    onMouseEnter: () => {
+      clearDismiss();
+      setHovered(true);
+    },
+    onMouseLeave: () => {
+      clearDismiss();
+      dismissTimerRef.current = window.setTimeout(() => {
+        setHovered(false);
+      }, constants/* WAVEFORM_ZOOM_DISMISS_MS */.m6);
+    }
+  }, /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: flyoutRef,
+    "aria-hidden": !isOpen,
+    className: classnames_default()('bp-WaveformZoomControl-flyout', {
+      'bp-is-open': isOpen
+    })
+  }, /*#__PURE__*/external_react_["default"].createElement(SliderControl/* default */.A, {
+    "aria-hidden": !isOpen,
+    className: "bp-WaveformZoomControl-slider",
+    "data-resin-target": "waveformZoomSlider",
+    id: sliderId,
+    max: constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh,
+    min: 0,
+    onUpdate: handleSlider,
+    step: 1,
+    style: {
+      '--bp-zoom-t': zoomValue / constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh
+    },
+    tabIndex: isOpen ? 0 : -1,
+    title: "Zoom Slider",
+    value: zoomValue
+  })), /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+    "aria-controls": sliderId,
+    "aria-expanded": isOpen,
+    className: "bp-WaveformZoomControl-toggle",
+    "data-resin-target": "waveformZoom",
+    onClick: handleToggleClick,
+    title: "Zoom"
+  }, /*#__PURE__*/external_react_["default"].createElement(icons_IconZoom24, null)));
+}
 ;// ./src/lib/viewers/media/MP3ControlsV2.scss
 // extracted by mini-css-extract-plugin
 
@@ -4505,6 +5308,9 @@ function WaveformView({
 
 
 
+
+
+
 const PLACEHOLDER_PEAKS = placeholderPeaks();
 function MP3ControlsV2({
   autoplay,
@@ -4524,11 +5330,34 @@ function MP3ControlsV2({
   volume
 }) {
   const durationValue = typeof durationTime === 'number' && isFinite_default()(durationTime) ? durationTime : 0;
+  const [zoomLevel, setZoomLevel] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
+  const [maxZoom, setMaxZoom] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
+  const [isZoomRevealed, setIsZoomRevealed] = (0,external_react_.useState)(false);
+  const zoomRevealTimerRef = (0,external_react_.useRef)(0);
   const hasRealPeaks = !!(peaks && peaks.length);
   const waveformPeaks = hasRealPeaks ? peaks : PLACEHOLDER_PEAKS;
   const hasMetadata = durationValue > 0;
   const waveformDurationSec = hasMetadata ? durationValue : PLACEHOLDER_DURATION_SEC;
   const [playRequested, setPlayRequested] = (0,external_react_.useState)(false);
+  const handleViewportChange = (0,external_react_.useCallback)(viewport => {
+    setMaxZoom(viewport.maxZoom);
+  }, []);
+  const revealZoomControl = (0,external_react_.useCallback)(() => {
+    setIsZoomRevealed(true);
+    window.clearTimeout(zoomRevealTimerRef.current);
+    zoomRevealTimerRef.current = window.setTimeout(() => {
+      setIsZoomRevealed(false);
+      zoomRevealTimerRef.current = 0;
+    }, constants/* WAVEFORM_ZOOM_DISMISS_MS */.m6);
+  }, []);
+  const handleWaveformZoom = (0,external_react_.useCallback)(nextZoom => {
+    setZoomLevel(nextZoom);
+    revealZoomControl();
+  }, [revealZoomControl]);
+  (0,external_react_.useEffect)(() => {
+    setZoomLevel(prev => clampWaveformZoom(prev, maxZoom));
+  }, [maxZoom]);
+  (0,external_react_.useEffect)(() => () => window.clearTimeout(zoomRevealTimerRef.current), []);
   (0,external_react_.useEffect)(() => {
     if (isPlaying) {
       setPlayRequested(true);
@@ -4541,6 +5370,8 @@ function MP3ControlsV2({
   const isWaveformInteractive = playRequested && hasMetadata;
   const isWaitingToPlay = playRequested && !hasMetadata;
   const showPlayOverlay = !playRequested && !isPlaying;
+  const hasZoomHandlers = hasRealPeaks && !showPlayOverlay;
+  const hasZoomControl = hasZoomHandlers && hasMetadata && maxZoom > constants/* WAVEFORM_ZOOM_MIN */.LW;
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2",
     "data-testid": "media-controls-wrapper-v2"
@@ -4553,8 +5384,18 @@ function MP3ControlsV2({
     interactive: isWaveformInteractive,
     mediaEl: mediaEl,
     onSeek: isWaveformInteractive ? onTimeChange : undefined,
-    peaks: waveformPeaks
-  }), showPlayOverlay && /*#__PURE__*/external_react_["default"].createElement("button", {
+    onViewportChange: hasRealPeaks ? handleViewportChange : undefined,
+    onZoomChange: hasZoomHandlers ? handleWaveformZoom : undefined,
+    peaks: waveformPeaks,
+    zoomLevel: hasZoomHandlers ? zoomLevel : constants/* WAVEFORM_ZOOM_MIN */.LW
+  }), hasZoomControl && /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-MP3ControlsV2-waveformZoom"
+  }, /*#__PURE__*/external_react_["default"].createElement(WaveformZoomControl, {
+    isRevealed: isZoomRevealed,
+    maxZoom: maxZoom,
+    onZoomChange: setZoomLevel,
+    zoomLevel: zoomLevel
+  })), showPlayOverlay && /*#__PURE__*/external_react_["default"].createElement("button", {
     className: "bp-MP3ControlsV2-playOverlay"
     // Static SVG from the icons module, same asset video uses for the overlay.
     // eslint-disable-next-line react/no-danger
@@ -4667,6 +5508,780 @@ function isFpsAvailable(player) {
 
 /***/ },
 
+/***/ 4929
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   DY: () => (/* binding */ WAVEFORM_BAR_RADIUS),
+/* harmony export */   EB: () => (/* binding */ CLIENT_DECODE_MAX_COMPRESSED_BYTES),
+/* harmony export */   FY: () => (/* binding */ MAX_PEAK_COUNT),
+/* harmony export */   GQ: () => (/* binding */ DURATION_MISMATCH_TOLERANCE_SEC),
+/* harmony export */   Kl: () => (/* binding */ WAVEFORM_MIN_VIEW_WINDOW_SEC),
+/* harmony export */   LW: () => (/* binding */ WAVEFORM_ZOOM_MIN),
+/* harmony export */   Lu: () => (/* binding */ WAVEFORM_BAR_GAP),
+/* harmony export */   XS: () => (/* binding */ WAVEFORM_BAR_MIN_HEIGHT),
+/* harmony export */   f3: () => (/* binding */ CLIENT_DECODE_PEAK_COUNT),
+/* harmony export */   i8: () => (/* binding */ PEAK_UNIT_MAX),
+/* harmony export */   m6: () => (/* binding */ WAVEFORM_ZOOM_DISMISS_MS),
+/* harmony export */   mJ: () => (/* binding */ PEAK_UNIT_MIN),
+/* harmony export */   nG: () => (/* binding */ CLIENT_DECODE_MAX_DURATION_SEC),
+/* harmony export */   nh: () => (/* binding */ WAVEFORM_ZOOM_SLIDER_MAX),
+/* harmony export */   oN: () => (/* binding */ WAVEFORM_HEIGHT),
+/* harmony export */   qY: () => (/* binding */ MAX_PAYLOAD_BYTES),
+/* harmony export */   sh: () => (/* binding */ WAVEFORM_PAYLOAD_VERSION),
+/* harmony export */   tK: () => (/* binding */ WAVEFORM_ZOOM_MAX),
+/* harmony export */   zo: () => (/* binding */ WAVEFORM_BAR_WIDTH)
+/* harmony export */ });
+/** Current waveform payload schema version. Bump only with a migration path. */
+const WAVEFORM_PAYLOAD_VERSION = 1;
+
+/** Maximum peaks in a single tier (overview or detail). */
+const MAX_PEAK_COUNT = 16384;
+
+/** Hard limit on serialized JSON body size for a waveform payload (bytes). */
+const MAX_PAYLOAD_BYTES = 512 * 1024;
+
+/** Allowed delta between payload duration and caller-supplied media duration (seconds). */
+const DURATION_MISMATCH_TOLERANCE_SEC = 1;
+
+/** Peak values must live in this closed interval when peakScale is "unit". */
+const PEAK_UNIT_MIN = 0;
+const PEAK_UNIT_MAX = 1;
+
+/** Skip client decode when the compressed file is larger than this. */
+const CLIENT_DECODE_MAX_COMPRESSED_BYTES = 6 * 1024 * 1024;
+
+/** Skip client decode when media duration is longer than this. */
+const CLIENT_DECODE_MAX_DURATION_SEC = 5 * 60;
+
+/** Default overview resolution for client-generated peaks. */
+const CLIENT_DECODE_PEAK_COUNT = 16384;
+const WAVEFORM_ZOOM_MIN = 1;
+const WAVEFORM_ZOOM_MAX = 24;
+/** Visible window never shorter than this. */
+const WAVEFORM_MIN_VIEW_WINDOW_SEC = 4;
+const WAVEFORM_ZOOM_SLIDER_MAX = 100;
+const WAVEFORM_ZOOM_DISMISS_MS = 250;
+const WAVEFORM_BAR_GAP = 2;
+const WAVEFORM_BAR_WIDTH = 2;
+const WAVEFORM_BAR_RADIUS = WAVEFORM_BAR_WIDTH / 2;
+/** Total bar height so the top and bottom radii meet as a circle on the mirror. */
+const WAVEFORM_BAR_MIN_HEIGHT = WAVEFORM_BAR_WIDTH;
+const WAVEFORM_HEIGHT = 140;
+
+/***/ },
+
+/***/ 546
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  decodeToPeaks: () => (/* binding */ decodeToPeaks),
+  extractPeaks: () => (/* binding */ extractPeaks),
+  getDecodeDecision: () => (/* binding */ getDecodeDecision),
+  loadPeaks: () => (/* binding */ loadPeaks),
+  runClientDecode: () => (/* binding */ runClientDecode)
+});
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXTERNAL MODULE: ./src/lib/util.js + 1 modules
+var util = __webpack_require__(4410);
+// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/constants.ts
+var constants = __webpack_require__(4929);
+;// ./src/lib/viewers/media/waveform/types.ts
+/**
+ * Box V1 is the in-viewer form: unsigned mono peaks in [0, 1] (peak envelope, mono_max).
+ * Wire JSON only requires version, durationSec, and peaks. Policy fields default.
+ * Conversion or wavesurfer payloads should be adapted at the edge, not stored as-is.
+ */
+
+/** Who produced peaks */
+
+/**
+ * Viewer-normalized waveform JSON (version 1).
+ * Required: version, durationSec, peaks. Everything else is optional and defaulted.
+ */
+
+/** Validated, runtime-friendly peak data passed to renderers. */
+
+const WAVEFORM_ERROR_CODES = ['INVALID_PAYLOAD', 'UNSUPPORTED_VERSION', 'INVALID_DURATION', 'DURATION_MISMATCH', 'PEAK_COUNT_EXCEEDED', 'PAYLOAD_TOO_LARGE', 'NON_FINITE_PEAK', 'PEAK_OUT_OF_RANGE', 'EMPTY_PEAKS', 'CAP_EXCEEDED', 'LOAD_FAILED', 'DECODE_FAILED', 'CANCELLED', 'UNAVAILABLE'];
+const WAVEFORM_ERROR_CODE_SET = new Set(WAVEFORM_ERROR_CODES);
+function isWaveformErrorCode(value) {
+  return WAVEFORM_ERROR_CODE_SET.has(value);
+}
+
+/**
+ * Async boundary for waveform data. Implementations may fetch fixtures, decode client-side,
+ * or load Conversion reps — callers only observe WaveformLoadState.
+ */
+
+/** Visible slice of the timeline. Emitted whenever zoom, scroll, or width changes. */
+
+/** One canvas linear-gradient stop. `offset` is 0–1 along the bar. */
+
+/**
+ * Wavesurfer's two paints: left of the playhead (`progressColor`) and right of it (`waveColor`).
+ * A string is a solid fill; a stop list is a left-to-right step gradient.
+ */
+;// ./src/lib/viewers/media/waveform/createWaveformLoader.ts
+/* unused harmony import specifier */ var isRetryableWaveformError;
+/* unused harmony import specifier */ var validateWaveformPayload;
+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); }
+
+
+/** Typed throw from fetchPayload (e.g. client decode). `error.name` fallback still works. */
+class WaveformLoadError extends Error {
+  constructor(code, message) {
+    super(message);
+    _defineProperty(this, "code", void 0);
+    this.name = code;
+    this.code = code;
+  }
+}
+function isAbortError(error) {
+  return typeof DOMException !== 'undefined' && error instanceof DOMException && error.name === 'AbortError' || error instanceof Error && error.name === 'AbortError';
+}
+function errorFromUnknown(error, fallbackCode = 'LOAD_FAILED') {
+  if (error instanceof WaveformLoadError) {
+    return {
+      code: error.code,
+      message: error.message
+    };
+  }
+  if (error instanceof SyntaxError) {
+    return {
+      code: 'INVALID_PAYLOAD',
+      message: error.message
+    };
+  }
+  if (error instanceof Error && isWaveformErrorCode(error.name)) {
+    return {
+      code: error.name,
+      message: error.message
+    };
+  }
+  const message = error instanceof Error ? error.message : 'Waveform load failed';
+  return {
+    code: fallbackCode,
+    message
+  };
+}
+function failedLoadState(error) {
+  return {
+    status: 'failed',
+    error,
+    retryable: isRetryableWaveformError(error.code)
+  };
+}
+function readyLoadState(payload) {
+  return {
+    status: 'ready',
+    payload
+  };
+}
+
+/**
+ * Wraps an async payload fetch with abort + stale-result suppression.
+ * Playback must not depend on this completing — callers treat unavailable/failed as degrade paths.
+ * abort() cancels an in-flight load only; a successful ready state is left intact.
+ */
+function createWaveformLoader(fetchPayload, options = {}) {
+  let state = {
+    status: 'unavailable'
+  };
+  let generation = 0;
+  let abortController = null;
+  const setState = next => {
+    state = next;
+  };
+  const settle = next => {
+    setState(next);
+    return next;
+  };
+  const startLoad = () => {
+    if (abortController) {
+      abortController.abort();
+    }
+    generation += 1;
+    abortController = new AbortController();
+    setState({
+      status: 'pending'
+    });
+    return {
+      id: generation,
+      signal: abortController.signal
+    };
+  };
+  const cancelledIfStale = request => {
+    if (!request.signal.aborted && generation === request.id) {
+      return null;
+    }
+    if (generation === request.id) {
+      setState({
+        status: 'cancelled'
+      });
+    }
+    return {
+      status: 'cancelled'
+    };
+  };
+  const settleValidation = validation => {
+    if (!validation.ok) {
+      return settle(failedLoadState(validation.error));
+    }
+    return settle(readyLoadState(validation.payload));
+  };
+  const settleFetchError = (error, request) => {
+    if (request.signal.aborted || generation !== request.id || isAbortError(error)) {
+      if (generation === request.id) {
+        return settle({
+          status: 'cancelled'
+        });
+      }
+      return {
+        status: 'cancelled'
+      };
+    }
+    return settle(failedLoadState(errorFromUnknown(error)));
+  };
+  const load = async () => {
+    const request = startLoad();
+    try {
+      const raw = await fetchPayload(request.signal);
+      const staleAfterFetch = cancelledIfStale(request);
+      if (staleAfterFetch) {
+        return staleAfterFetch;
+      }
+      const validation = validateWaveformPayload(raw, options);
+      const staleAfterValidate = cancelledIfStale(request);
+      if (staleAfterValidate) {
+        return staleAfterValidate;
+      }
+      return settleValidation(validation);
+    } catch (error) {
+      return settleFetchError(error, request);
+    } finally {
+      if (generation === request.id) {
+        abortController = null;
+      }
+    }
+  };
+  const abort = () => {
+    if (!abortController) {
+      return;
+    }
+    generation += 1;
+    abortController.abort();
+    abortController = null;
+    setState({
+      status: 'cancelled'
+    });
+  };
+  return {
+    load,
+    abort,
+    getState: () => state
+  };
+}
+
+/** Returns capped state when media exceeds client decode size or duration limits. */
+function createCappedWaveformState(message) {
+  return {
+    status: 'capped',
+    error: {
+      code: 'CAP_EXCEEDED',
+      message
+    }
+  };
+}
+;// ./src/lib/viewers/media/waveform/validateWaveformPayload.ts
+
+const DEFAULT_PEAK_SCALE = 'unit';
+const DEFAULT_CHANNEL_POLICY = 'mono_max';
+const DEFAULT_ENVELOPE = 'peak';
+function fail(code, message, retryable = false) {
+  return {
+    ok: false,
+    error: {
+      code,
+      message
+    },
+    retryable
+  };
+}
+function isPlainObject(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function payloadByteLength(raw) {
+  try {
+    const serialized = JSON.stringify(raw);
+    if (typeof Buffer !== 'undefined') {
+      return Buffer.byteLength(serialized, 'utf8');
+    }
+    if (typeof TextEncoder !== 'undefined') {
+      return new TextEncoder().encode(serialized).length;
+    }
+    return serialized.length;
+  } catch {
+    return Number.MAX_SAFE_INTEGER;
+  }
+}
+function readOptionalPolicy(raw, key, allowed) {
+  if (!(key in raw) || raw[key] === undefined) {
+    return undefined;
+  }
+  return raw[key] === allowed ? allowed : null;
+}
+function asWaveformPayloadV1(raw) {
+  const {
+    version,
+    durationSec,
+    peaks
+  } = raw;
+  if (version !== constants/* WAVEFORM_PAYLOAD_VERSION */.sh || typeof durationSec !== 'number' || !Array.isArray(peaks)) {
+    return null;
+  }
+  const peakScale = readOptionalPolicy(raw, 'peakScale', DEFAULT_PEAK_SCALE);
+  const channelPolicy = readOptionalPolicy(raw, 'channelPolicy', DEFAULT_CHANNEL_POLICY);
+  const envelope = readOptionalPolicy(raw, 'envelope', DEFAULT_ENVELOPE);
+  if (peakScale === null || channelPolicy === null || envelope === null) {
+    return null;
+  }
+  if ('channels' in raw && raw.channels !== undefined && raw.channels !== 1) {
+    return null;
+  }
+  return {
+    version: constants/* WAVEFORM_PAYLOAD_VERSION */.sh,
+    durationSec,
+    peaks: peaks,
+    peakScale: peakScale ?? DEFAULT_PEAK_SCALE,
+    channelPolicy: channelPolicy ?? DEFAULT_CHANNEL_POLICY,
+    envelope: envelope ?? DEFAULT_ENVELOPE,
+    channels: 1
+  };
+}
+function readPayloadObject(raw, maxPayloadBytes, isPayloadByteCheckSkipped = false) {
+  if (raw === null || raw === undefined) {
+    return fail('INVALID_PAYLOAD', 'Payload is null or undefined');
+  }
+  if (!isPayloadByteCheckSkipped) {
+    const byteLength = payloadByteLength(raw);
+    if (byteLength > maxPayloadBytes) {
+      return fail('PAYLOAD_TOO_LARGE', `Payload size ${byteLength} exceeds limit ${maxPayloadBytes}`);
+    }
+  }
+  if (!isPlainObject(raw)) {
+    return fail('INVALID_PAYLOAD', 'Payload must be an object');
+  }
+  return {
+    ok: true,
+    value: raw
+  };
+}
+function checkVersion(raw) {
+  if (raw.version === constants/* WAVEFORM_PAYLOAD_VERSION */.sh) {
+    return null;
+  }
+  const {
+    version
+  } = raw;
+  if (typeof version === 'number' && version > constants/* WAVEFORM_PAYLOAD_VERSION */.sh) {
+    return fail('UNSUPPORTED_VERSION', `Unsupported waveform version ${version}; max supported is ${constants/* WAVEFORM_PAYLOAD_VERSION */.sh}`);
+  }
+  return fail('INVALID_PAYLOAD', 'Missing or invalid version field');
+}
+function checkDuration(payload, expectedDurationSec) {
+  if (!Number.isFinite(payload.durationSec) || payload.durationSec <= 0) {
+    return fail('INVALID_DURATION', 'durationSec must be a positive finite number');
+  }
+  if (expectedDurationSec !== undefined && Number.isFinite(expectedDurationSec) && Math.abs(payload.durationSec - expectedDurationSec) > constants/* DURATION_MISMATCH_TOLERANCE_SEC */.GQ) {
+    return fail('DURATION_MISMATCH', `Payload duration ${payload.durationSec}s differs from media duration ${expectedDurationSec}s`, true);
+  }
+  return null;
+}
+function normalizePeaks(peaks, maxPeakCount) {
+  if (peaks.length === 0) {
+    return fail('EMPTY_PEAKS', 'peaks array must not be empty');
+  }
+  if (peaks.length > maxPeakCount) {
+    return fail('PEAK_COUNT_EXCEEDED', `peaks length ${peaks.length} exceeds max ${maxPeakCount}`);
+  }
+  const normalized = new Float32Array(peaks.length);
+  for (let i = 0; i < peaks.length; i += 1) {
+    const value = peaks[i];
+    if (!Number.isFinite(value)) {
+      return fail('NON_FINITE_PEAK', `Peak at index ${i} is not finite`);
+    }
+    if (value < constants/* PEAK_UNIT_MIN */.mJ || value > constants/* PEAK_UNIT_MAX */.i8) {
+      return fail('PEAK_OUT_OF_RANGE', `Peak at index ${i} is outside [${constants/* PEAK_UNIT_MIN */.mJ}, ${constants/* PEAK_UNIT_MAX */.i8}]`);
+    }
+    normalized[i] = value;
+  }
+  return {
+    ok: true,
+    peaks: normalized
+  };
+}
+
+/**
+ * Validates a version-1 waveform payload and returns normalized peaks for rendering.
+ * Wire JSON requires version, durationSec, and peaks. sampleCount and source are ignored.
+ */
+function validateWaveformPayload_validateWaveformPayload(raw, options = {}) {
+  const maxPeakCount = options.maxPeakCount ?? constants/* MAX_PEAK_COUNT */.FY;
+  const maxPayloadBytes = options.maxPayloadBytes ?? constants/* MAX_PAYLOAD_BYTES */.qY;
+  const objectResult = readPayloadObject(raw, maxPayloadBytes, options.isPayloadByteCheckSkipped === true);
+  if (!objectResult.ok) {
+    return objectResult;
+  }
+  const versionFailure = checkVersion(objectResult.value);
+  if (versionFailure) {
+    return versionFailure;
+  }
+  const payload = asWaveformPayloadV1(objectResult.value);
+  if (!payload) {
+    return fail('INVALID_PAYLOAD', 'Payload failed structural validation');
+  }
+  const durationFailure = checkDuration(payload, options.expectedDurationSec);
+  if (durationFailure) {
+    return durationFailure;
+  }
+  const peaksResult = normalizePeaks(payload.peaks, maxPeakCount);
+  if (!peaksResult.ok) {
+    return peaksResult;
+  }
+  return {
+    ok: true,
+    payload: {
+      version: constants/* WAVEFORM_PAYLOAD_VERSION */.sh,
+      durationSec: payload.durationSec,
+      peaks: peaksResult.peaks,
+      peakScale: payload.peakScale ?? DEFAULT_PEAK_SCALE,
+      channelPolicy: payload.channelPolicy ?? DEFAULT_CHANNEL_POLICY,
+      envelope: payload.envelope ?? DEFAULT_ENVELOPE
+    }
+  };
+}
+
+/** Maps validation / load failures to retry policy for loaders. */
+function validateWaveformPayload_isRetryableWaveformError(code) {
+  return code === 'DURATION_MISMATCH' || code === 'DECODE_FAILED' || code === 'LOAD_FAILED';
+}
+;// ./src/lib/viewers/media/waveform/decode.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) { decode_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 decode_defineProperty(e, r, t) { return (r = decode_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function decode_toPropertyKey(t) { var i = decode_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function decode_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); }
+
+
+
+
+const EMPTY_TIMINGS = {
+  attemptMs: null,
+  extractMs: null
+};
+function createAbortError() {
+  return new DOMException('Aborted', 'AbortError');
+}
+function isPositiveFinite(value) {
+  return typeof value === 'number' && Number.isFinite(value) && value > 0;
+}
+function getAudioContextConstructor() {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+  const {
+    AudioContext,
+    webkitAudioContext
+  } = window;
+  return AudioContext || webkitAudioContext;
+}
+function getDecodeSkipMessage(reason) {
+  if (reason === 'compressed_size') {
+    return 'Compressed size exceeds client decode limit';
+  }
+  if (reason === 'duration') {
+    return 'Duration exceeds client decode limit';
+  }
+  return 'Compressed size or duration is missing; skipping client decode';
+}
+function createSkippedDecodeResult(reason) {
+  if (reason === 'missing_metadata') {
+    return {
+      status: 'unavailable',
+      error: {
+        code: 'UNAVAILABLE',
+        message: getDecodeSkipMessage(reason)
+      },
+      isDecodeSkipped: true,
+      timings: EMPTY_TIMINGS,
+      reason
+    };
+  }
+  return _objectSpread(_objectSpread({}, createCappedWaveformState(getDecodeSkipMessage(reason))), {}, {
+    isDecodeSkipped: true,
+    timings: EMPTY_TIMINGS,
+    reason
+  });
+}
+function decodeWithContext(context, buffer, signal) {
+  return new Promise((resolve, reject) => {
+    let isSettled = false;
+    let onAbort = () => undefined;
+    const onSuccess = decoded => {
+      if (isSettled) {
+        return;
+      }
+      isSettled = true;
+      signal?.removeEventListener('abort', onAbort);
+      resolve(decoded);
+    };
+    const onFailure = error => {
+      if (isSettled) {
+        return;
+      }
+      isSettled = true;
+      signal?.removeEventListener('abort', onAbort);
+      if (isAbortError(error)) {
+        reject(error instanceof DOMException ? error : createAbortError());
+        return;
+      }
+      reject(error instanceof WaveformLoadError ? error : new WaveformLoadError('DECODE_FAILED', 'decodeAudioData failed'));
+    };
+    onAbort = () => onFailure(createAbortError());
+    if (signal?.aborted) {
+      onFailure(createAbortError());
+      return;
+    }
+    signal?.addEventListener('abort', onAbort, {
+      once: true
+    });
+    try {
+      const maybePromise = context.decodeAudioData(buffer, onSuccess, onFailure);
+      if (maybePromise && typeof maybePromise.then === 'function') {
+        maybePromise.then(onSuccess, onFailure);
+      }
+    } catch (error) {
+      onFailure(error);
+    }
+  });
+}
+
+/**
+ * Decide whether to run decodeAudioData. Either cap failing, or unknown size/duration,
+ * skips decode so playback is never blocked by expanding the full audio buffer.
+ */
+function getDecodeDecision(media, caps = {}) {
+  const maxCompressedBytes = caps.maxCompressedBytes ?? constants/* CLIENT_DECODE_MAX_COMPRESSED_BYTES */.EB;
+  const maxDurationSec = caps.maxDurationSec ?? constants/* CLIENT_DECODE_MAX_DURATION_SEC */.nG;
+  const {
+    compressedBytes,
+    durationSec
+  } = media;
+  if (!isPositiveFinite(compressedBytes) || !isPositiveFinite(durationSec)) {
+    return {
+      isAllowed: false,
+      reason: 'missing_metadata'
+    };
+  }
+  if (compressedBytes > maxCompressedBytes) {
+    return {
+      isAllowed: false,
+      reason: 'compressed_size'
+    };
+  }
+  if (durationSec > maxDurationSec) {
+    return {
+      isAllowed: false,
+      reason: 'duration'
+    };
+  }
+  return {
+    isAllowed: true
+  };
+}
+
+/**
+ * Collapse audio channels to one unsigned peak per time bucket (max abs, then clamp to unit).
+ * Accepts an AudioBuffer so callers can extract before closing the AudioContext.
+ */
+function extractPeaks(audio, peakCount = constants/* CLIENT_DECODE_PEAK_COUNT */.f3) {
+  const channels = Array.isArray(audio) ? audio : Array.from({
+    length: audio.numberOfChannels
+  }, (_, channelIndex) => audio.getChannelData(channelIndex));
+  if (peakCount <= 0 || channels.length === 0) {
+    return [];
+  }
+  const sampleCount = channels[0].length;
+  if (sampleCount === 0) {
+    return [];
+  }
+  const peaks = new Array(peakCount);
+  const bucketWidth = sampleCount / peakCount;
+  for (let i = 0; i < peakCount; i += 1) {
+    const start = Math.floor(i * bucketWidth);
+    const end = Math.max(start + 1, Math.floor((i + 1) * bucketWidth));
+    let maxAbs = 0;
+    for (let sampleIndex = start; sampleIndex < end && sampleIndex < sampleCount; sampleIndex += 1) {
+      for (let channelIndex = 0; channelIndex < channels.length; channelIndex += 1) {
+        const value = Math.abs(channels[channelIndex][sampleIndex]);
+        if (value > maxAbs) {
+          maxAbs = value;
+        }
+      }
+    }
+    peaks[i] = Math.min(constants/* PEAK_UNIT_MAX */.i8, Math.max(constants/* PEAK_UNIT_MIN */.mJ, maxAbs));
+  }
+  return peaks;
+}
+
+/**
+ * Decode compressed audio and extract unit peaks while the AudioBuffer is live.
+ * Does not attach a media element or fetch a URL. Does not copy channel data.
+ */
+async function decodeToPeaks(arrayBuffer, signal, peakCount = constants/* CLIENT_DECODE_PEAK_COUNT */.f3) {
+  if (signal?.aborted) {
+    throw createAbortError();
+  }
+  const AudioContextConstructor = getAudioContextConstructor();
+  if (!AudioContextConstructor) {
+    throw new WaveformLoadError('DECODE_FAILED', 'AudioContext is not available');
+  }
+  const context = new AudioContextConstructor();
+  try {
+    const audioBuffer = await decodeWithContext(context, arrayBuffer.slice(0), signal);
+    if (signal?.aborted) {
+      throw createAbortError();
+    }
+    const extractStarted = (0,util/* getCurrentTimeMs */.RU)();
+    const peaks = extractPeaks(audioBuffer, peakCount);
+    return {
+      durationSec: audioBuffer.duration,
+      peaks,
+      extractMs: (0,util/* getCurrentTimeMs */.RU)() - extractStarted
+    };
+  } catch (error) {
+    if (signal?.aborted || isAbortError(error)) {
+      throw createAbortError();
+    }
+    throw error;
+  } finally {
+    try {
+      await context.close();
+    } catch {
+      // Context may already be closed.
+    }
+  }
+}
+
+/**
+ * Run a client-decode attempt against the V1 waveform contract.
+ * Decode is not invoked when size or duration is over the cap (or unknown).
+ */
+async function runClientDecode(options) {
+  const decision = getDecodeDecision({
+    compressedBytes: options.compressedBytes,
+    durationSec: options.durationSec
+  }, options.caps);
+  if (!decision.isAllowed) {
+    return createSkippedDecodeResult(decision.reason);
+  }
+  if (options.signal?.aborted) {
+    return {
+      status: 'cancelled',
+      isDecodeSkipped: true,
+      timings: EMPTY_TIMINGS
+    };
+  }
+  const signal = options.signal ?? new AbortController().signal;
+  const decodeStarted = (0,util/* getCurrentTimeMs */.RU)();
+  let decodeOutput;
+  try {
+    decodeOutput = await options.decode(signal);
+  } catch (error) {
+    if (signal.aborted || isAbortError(error)) {
+      return {
+        status: 'cancelled',
+        isDecodeSkipped: false,
+        timings: EMPTY_TIMINGS
+      };
+    }
+    const waveformError = errorFromUnknown(error, 'DECODE_FAILED');
+    return {
+      status: 'failed',
+      error: waveformError,
+      retryable: validateWaveformPayload_isRetryableWaveformError(waveformError.code),
+      isDecodeSkipped: false,
+      timings: {
+        attemptMs: (0,util/* getCurrentTimeMs */.RU)() - decodeStarted,
+        extractMs: null
+      }
+    };
+  }
+  const attemptMs = (0,util/* getCurrentTimeMs */.RU)() - decodeStarted;
+  if (signal.aborted) {
+    return {
+      status: 'cancelled',
+      isDecodeSkipped: false,
+      timings: {
+        attemptMs,
+        extractMs: null
+      }
+    };
+  }
+  const validation = validateWaveformPayload_validateWaveformPayload({
+    version: constants/* WAVEFORM_PAYLOAD_VERSION */.sh,
+    durationSec: options.durationSec ?? decodeOutput.durationSec,
+    peaks: decodeOutput.peaks
+  }, {
+    isPayloadByteCheckSkipped: true
+  });
+  if (!validation.ok) {
+    return {
+      status: 'failed',
+      error: validation.error,
+      retryable: validateWaveformPayload_isRetryableWaveformError(validation.error.code),
+      isDecodeSkipped: false,
+      timings: {
+        attemptMs,
+        extractMs: decodeOutput.extractMs
+      }
+    };
+  }
+  return {
+    status: 'ready',
+    payload: validation.payload,
+    isDecodeSkipped: false,
+    timings: {
+      attemptMs,
+      extractMs: decodeOutput.extractMs
+    }
+  };
+}
+
+/**
+ * Gate, fetch, decode, and extract in-viewer peaks. Skips decode when over cap.
+ * Playback must not await this.
+ */
+function loadPeaks(request) {
+  return runClientDecode({
+    compressedBytes: request.compressedBytes,
+    durationSec: request.durationSec,
+    signal: request.signal,
+    decode: async signal => {
+      const arrayBuffer = await request.fetchArrayBuffer(signal);
+      return decodeToPeaks(arrayBuffer, signal);
+    }
+  });
+}
+
+/***/ },
+
 /***/ 2485
 (module, exports) {
 
@@ -11436,7 +13051,7 @@ var x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["default"]: () => (__WEBPACK_EXTERNAL_MODULE_react__["default"]), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useLayoutEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
+module.exports = x({ ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["default"]: () => (__WEBPACK_EXTERNAL_MODULE_react__["default"]), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useId"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useId), ["useLayoutEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect), ["useMemo"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useMemo), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
 
 /***/ },
 
@@ -20330,7 +21945,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.82.0";
+const CLIENT_VERSION = "3.84.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -32844,150 +34459,8 @@ function Filmstrip({
     "data-testid": "bp-Filmstrip-time"
   }, (0,DurationLabels/* formatTime */.f)(time)));
 }
-;// ./src/lib/viewers/controls/slider/SliderControl.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/lib/viewers/controls/slider/SliderControl.tsx
-const SliderControl_excluded = ["className", "max", "min", "onMove", "onUpdate", "step", "title", "track", "value"];
-function SliderControl_extends() { return SliderControl_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; }, SliderControl_extends.apply(null, arguments); }
-function SliderControl_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = SliderControl_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 SliderControl_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; }
-
-
-
-
-
-function SliderControl(_ref) {
-  let {
-      className,
-      max = 100,
-      min = 0,
-      onMove = (noop_default()),
-      onUpdate = (noop_default()),
-      step = 1,
-      title,
-      track,
-      value
-    } = _ref,
-    rest = SliderControl_objectWithoutProperties(_ref, SliderControl_excluded);
-  const [isScrubbing, setIsScrubbing] = external_react_["default"].useState(false);
-  const sliderElRef = external_react_["default"].useRef(null);
-  const getPosition = external_react_["default"].useCallback(pageX => {
-    const {
-      current: sliderEl
-    } = sliderElRef;
-    if (!sliderEl) return 0;
-    const {
-      left: sliderLeft,
-      width: sliderWidth
-    } = sliderEl.getBoundingClientRect();
-    return Math.max(0, Math.min(pageX - sliderLeft, sliderWidth));
-  }, []);
-  const getPositionValue = external_react_["default"].useCallback(pageX => {
-    const {
-      current: sliderEl
-    } = sliderElRef;
-    if (!sliderEl) return 0;
-    const {
-      width: sliderWidth
-    } = sliderEl.getBoundingClientRect();
-    const newValue = getPosition(pageX) / sliderWidth * max;
-    return Math.max(min, Math.min(newValue, max));
-  }, [getPosition, max, min]);
-  const handleKeydown = event => {
-    const key = (0,util/* decodeKeydown */.wU)(event);
-    if (key === 'ArrowLeft') {
-      event.stopPropagation(); // Prevents global key handling
-      onUpdate(Math.max(min, Math.min(value - step, max)));
-    }
-    if (key === 'ArrowRight') {
-      event.stopPropagation(); // Prevents global key handling
-      onUpdate(Math.max(min, Math.min(value + step, max)));
-    }
-  };
-  const handleMouseDown = ({
-    button,
-    ctrlKey,
-    metaKey,
-    pageX
-  }) => {
-    if (button > 1 || ctrlKey || metaKey) return;
-    onUpdate(getPositionValue(pageX));
-    setIsScrubbing(true);
-  };
-  const handleMouseMove = ({
-    pageX
-  }) => {
-    const {
-      current: sliderEl
-    } = sliderElRef;
-    const {
-      width: sliderWidth
-    } = sliderEl ? sliderEl.getBoundingClientRect() : {
-      width: 0
-    };
-    onMove(getPositionValue(pageX), getPosition(pageX), sliderWidth);
-  };
-  const handleTouchStart = ({
-    touches
-  }) => {
-    onUpdate(getPositionValue(touches[0].pageX));
-    setIsScrubbing(true);
-  };
-  external_react_["default"].useEffect(() => {
-    const handleDocumentMoveStop = () => setIsScrubbing(false);
-    const handleDocumentMouseMove = event => {
-      if (!isScrubbing || event.button > 1 || event.ctrlKey || event.metaKey) return;
-      event.preventDefault();
-      onUpdate(getPositionValue(event.pageX));
-    };
-    const handleDocumentTouchMove = event => {
-      if (!isScrubbing || !event.touches || !event.touches[0]) return;
-      event.preventDefault();
-      onUpdate(getPositionValue(event.touches[0].pageX));
-    };
-    if (isScrubbing) {
-      document.addEventListener('mousemove', handleDocumentMouseMove);
-      document.addEventListener('mouseup', handleDocumentMoveStop);
-      document.addEventListener('touchend', handleDocumentMoveStop);
-      document.addEventListener('touchmove', handleDocumentTouchMove);
-    }
-    return () => {
-      document.removeEventListener('mousemove', handleDocumentMouseMove);
-      document.removeEventListener('mouseup', handleDocumentMoveStop);
-      document.removeEventListener('touchend', handleDocumentMoveStop);
-      document.removeEventListener('touchmove', handleDocumentTouchMove);
-    };
-  }, [isScrubbing, getPositionValue, onUpdate]);
-  return /*#__PURE__*/external_react_["default"].createElement("div", SliderControl_extends({
-    ref: sliderElRef,
-    "aria-label": title,
-    "aria-valuemax": max,
-    "aria-valuemin": min,
-    "aria-valuenow": value,
-    className: classnames_default()('bp-SliderControl', className, {
-      'bp-is-scrubbing': isScrubbing
-    }),
-    onKeyDown: handleKeydown,
-    onMouseDown: handleMouseDown,
-    onMouseMove: handleMouseMove,
-    onTouchStart: handleTouchStart,
-    role: "slider",
-    tabIndex: 0
-  }, rest), /*#__PURE__*/external_react_["default"].createElement("div", {
-    className: "bp-SliderControl-track",
-    "data-testid": "bp-slider-control-track",
-    style: {
-      backgroundImage: track
-    }
-  }), /*#__PURE__*/external_react_["default"].createElement("div", {
-    className: "bp-SliderControl-thumb",
-    "data-testid": "bp-slider-control-thumb",
-    style: {
-      left: `${value / max * 100}%`
-    }
-  }));
-}
+// EXTERNAL MODULE: ./src/lib/viewers/controls/slider/SliderControl.tsx + 1 modules
+var SliderControl = __webpack_require__(4937);
 ;// ./src/lib/viewers/controls/media/TimeControls.scss
 // extracted by mini-css-extract-plugin
 
@@ -33047,7 +34520,7 @@ function TimeControls({
     durationTime: durationTime,
     fps: fps,
     mediaEl: mediaEl
-  }), /*#__PURE__*/external_react_["default"].createElement(SliderControl, {
+  }), /*#__PURE__*/external_react_["default"].createElement(SliderControl/* default */.A, {
     className: "bp-TimeControls-slider",
     "data-resin-target": "timeScrubber",
     max: durationValue,
@@ -33172,6 +34645,11 @@ function MP3Viewer_toPrimitive(t, r) { if ("object" != typeof t || !t) return t;
 
 
 const CSS_CLASS_MP3 = 'bp-media-mp3';
+function createLoadFailedError(message) {
+  const error = new Error(message);
+  error.name = 'LOAD_FAILED';
+  return error;
+}
 class MP3Viewer extends media_MediaBaseViewer {
   constructor(...args) {
     super(...args);
@@ -33181,6 +34659,11 @@ class MP3Viewer extends media_MediaBaseViewer {
     MP3Viewer_defineProperty(this, "handlePlayRequest", () => {
       this.userRequestedPlay = true;
       this.togglePlay();
+      if (this.isWaveformDecodeRetryPending && !this.hasUsedWaveformDecodePlayRetry) {
+        this.hasUsedWaveformDecodePlayRetry = true;
+        this.isWaveformDecodeRetryPending = false;
+        this.startClientWaveformDecode();
+      }
     });
     /**
      * Auto-play was prevented, pause the audio
@@ -33210,6 +34693,7 @@ class MP3Viewer extends media_MediaBaseViewer {
       this.wrapperEl.classList.add('bp-media--v2');
       this.mediaContainerEl.classList.add('bp-media-container--v2');
       this.ensureV2Controls();
+      this.importWaveformDecode();
     }
 
     // Audio element
@@ -33268,7 +34752,30 @@ class MP3Viewer extends media_MediaBaseViewer {
    * @return {Promise<{ default: Function }>} MP3ControlsV2 module
    */
   importV2Controls() {
-    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 7893));
+    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 3845));
+  }
+
+  /**
+   * @return {Promise<{ loadPeaks: Function }>} client-decode helpers
+   */
+  async importWaveformDecode() {
+    if (!this.waveformDecodeImport) {
+      this.waveformDecodeImport = Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 546));
+    }
+    try {
+      return await this.waveformDecodeImport;
+    } catch (error) {
+      this.waveformDecodeImport = null;
+      throw error;
+    }
+  }
+
+  /**
+   * @inheritdoc
+   */
+  destroy() {
+    this.abortClientWaveformDecode();
+    super.destroy();
   }
 
   /**
@@ -33315,10 +34822,126 @@ class MP3Viewer extends media_MediaBaseViewer {
    */
   loadeddataHandler() {
     super.loadeddataHandler();
-    if (this.isAudioPlayerV2 && this.userRequestedPlay) {
+    if (!this.isAudioPlayerV2) {
+      return;
+    }
+
+    // Play first so Safari has a user gesture before AudioContext is created.
+    if (this.userRequestedPlay) {
       this.play();
     }
+    this.startClientWaveformDecode();
   }
+  /**
+   * Fetch compressed audio bytes for client decode. Prefers an already-fetched blob URL.
+   *
+   * @param {AbortSignal} signal
+   * @return {Promise<ArrayBuffer>}
+   */
+  async fetchAudioArrayBuffer(signal) {
+    if (this.mediaBlobUrl) {
+      const response = await fetch(this.mediaBlobUrl, {
+        signal
+      });
+      if (!response.ok) {
+        throw createLoadFailedError(`Waveform fetch failed (${response.status})`);
+      }
+      return response.arrayBuffer();
+    }
+    const template = this.options.representation && this.options.representation.content && this.options.representation.content.url_template;
+    if (!template) {
+      throw createLoadFailedError('Waveform fetch URL is missing');
+    }
+    const data = await this.api.get(this.createContentUrlV2(template), {
+      headers: this.appendAuthHeader(),
+      signal,
+      type: 'arraybuffer'
+    });
+    if (data instanceof ArrayBuffer) {
+      return data;
+    }
+    throw createLoadFailedError('Waveform fetch did not return binary data');
+  }
+  abortClientWaveformDecode() {
+    if (!this.waveformDecodeController) {
+      return;
+    }
+    this.waveformDecodeController.abort();
+    this.waveformDecodeController = null;
+  }
+
+  /**
+   * Decode peaks in the background when the file is under size and duration caps.
+   * Does not block playback. Capped or failed decode keeps the placeholder waveform.
+   *
+   * @return {Promise<void>}
+   */
+  async startClientWaveformDecode() {
+    if (!this.isAudioPlayerV2 || this.destroyed) {
+      return;
+    }
+    this.abortClientWaveformDecode();
+    const controller = new AbortController();
+    this.waveformDecodeController = controller;
+    const {
+      signal
+    } = controller;
+    try {
+      const decodeModule = await this.importWaveformDecode();
+      if (this.destroyed || signal.aborted || this.waveformDecodeController !== controller) {
+        return;
+      }
+      const result = await decodeModule.loadPeaks({
+        compressedBytes: this.options.file && this.options.file.size,
+        durationSec: this.mediaEl && this.mediaEl.duration,
+        fetchArrayBuffer: fetchSignal => this.fetchAudioArrayBuffer(fetchSignal),
+        signal
+      });
+      this.handleClientWaveformDecodeResult(result, controller, signal);
+    } catch (error) {
+      if (error && error.name === 'AbortError') {
+        this.handleClientWaveformDecodeResult({
+          status: 'cancelled'
+        }, controller, signal);
+        return;
+      }
+      this.handleClientWaveformDecodeResult({
+        error: {
+          code: 'LOAD_FAILED',
+          message: error instanceof Error ? error.message : 'Waveform decode failed'
+        },
+        retryable: true,
+        status: 'failed'
+      }, controller, signal);
+    }
+  }
+
+  /**
+   * Apply peaks, or record a retryable failure for overlay play.
+   *
+   * @param {import('./waveform/types').ClientDecodeResult} result
+   * @param {AbortController} controller in-flight controller for this attempt
+   * @param {AbortSignal} signal
+   * @return {void}
+   */
+  handleClientWaveformDecodeResult(result, controller, signal) {
+    if (!result || this.destroyed || signal.aborted || this.waveformDecodeController !== controller) {
+      return;
+    }
+    if (result.status === 'ready') {
+      this.waveformPeaks = result.payload.peaks;
+      this.isWaveformDecodeRetryPending = false;
+      this.renderUI();
+      return;
+    }
+    if (result.status === 'cancelled') {
+      return;
+    }
+    if (result.status === 'failed' && result.retryable && !this.hasUsedWaveformDecodePlayRetry) {
+      this.isWaveformDecodeRetryPending = true;
+    }
+  }
+
   /**
    * @inheritdoc
    */
@@ -35425,7 +37048,7 @@ function TimeControlsV2({
     style: trackMask ? {
       '--bp-track-mask': trackMask
     } : undefined
-  }, /*#__PURE__*/external_react_["default"].createElement(SliderControl, {
+  }, /*#__PURE__*/external_react_["default"].createElement(SliderControl/* default */.A, {
     className: "bp-TimeControlsV2-slider",
     "data-resin-target": "timeScrubber",
     max: durationValue,