box-content-preview 3.108.0 → 3.112.0

package/dist/lib/index.js

@@ -26,6 +26,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import { default as __WEBPACK_EXTERNAL_MODULE_axios_default__ } from "axios";
 import { bdlBoxBlue as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlBoxBlue__, bdlGray65 as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__, bdlGreenLight as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGreenLight__, bdlGrimace as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGrimace__, bdlWatermelonRed as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlWatermelonRed__, bdlYellorange as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlYellorange__, bdlYellow as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlYellow__, white as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_white__ } from "box-ui-elements/es/styles/variables";
 import { createRoot as __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__ } from "react-dom/client";
+import { BlueprintProvider as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_BlueprintProvider__, Toolbar as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_Toolbar__, TooltipProvider as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_TooltipProvider__, useNoopTreatment as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_useNoopTreatment__ } from "@box/blueprint-web";
 import { default as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_components_tooltip_Tooltip_97b5ae91_default__ } from "box-ui-elements/es/components/tooltip/Tooltip";
 import { withTargetedClickThrough as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_features_targeting_hocs_e326fa91_withTargetedClickThrough__ } from "box-ui-elements/es/features/targeting/hocs";
 import { PreviewLoading as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_components_preview_386c8d2b_PreviewLoading__, getIcon as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_components_preview_386c8d2b_getIcon__ } from "box-ui-elements/es/components/preview";
@@ -355,6 +356,7 @@ class PreviewError extends Error {
 /* harmony export */   T2: () => (/* binding */ CLASS_BOX_PREVIEW_BUTTON),
 /* harmony export */   Td: () => (/* binding */ MIN_VIDEO_WIDTH_PX),
 /* harmony export */   U3: () => (/* binding */ CLASS_BOX_PREVIEW_TOGGLE_OVERLAY),
+/* harmony export */   Uj: () => (/* binding */ CLASS_BOX_PREVIEW_VERSION_BANNER_COMPARED),
 /* harmony export */   VC: () => (/* binding */ CLASS_IS_SELECTABLE),
 /* harmony export */   VF: () => (/* binding */ SELECTOR_BOX_PREVIEW_ICON),
 /* harmony export */   VL: () => (/* binding */ CLASS_MULTI_IMAGE_PAGE),
@@ -374,6 +376,7 @@ class PreviewError extends Error {
 /* harmony export */   cR: () => (/* binding */ TEXT_STATIC_ASSETS_VERSION),
 /* harmony export */   cZ: () => (/* binding */ CLASS_ANNOTATIONS_DISCOVERABLE),
 /* harmony export */   dR: () => (/* binding */ BLUEPRINT_MIGRATION_MEDIA_CONTROLS),
+/* harmony export */   dl: () => (/* binding */ AUDIO_PLAYER_V2_RESIN_FEATURE),
 /* harmony export */   eA: () => (/* binding */ SUBTITLES_OFF),
 /* harmony export */   eF: () => (/* binding */ CLASS_BOX_PREVIEW_PRELOAD_CONTENT),
 /* harmony export */   eM: () => (/* binding */ CLASS_BOX_PREVIEW_HAS_NAVIGATION),
@@ -394,6 +397,7 @@ class PreviewError extends Error {
 /* harmony export */   nC: () => (/* binding */ X_REP_HINT_DOC_THUMBNAIL),
 /* harmony export */   oK: () => (/* binding */ CLASS_BOX_PREVIEW_PRELOAD_PLACEHOLDER),
 /* harmony export */   oS: () => (/* binding */ CLASS_BOX_PREVIEW_BASE_HEADER),
+/* harmony export */   on: () => (/* binding */ CLASS_BOX_PREVIEW_VERSION_BANNER),
 /* harmony export */   pM: () => (/* binding */ VIDEO_FTUX_CURSOR_SEEN_KEY),
 /* harmony export */   pl: () => (/* binding */ X_REP_HINT_BASE),
 /* harmony export */   qL: () => (/* binding */ VIDEO_PLAYER_CONTROL_BAR_HEIGHT),
@@ -424,7 +428,7 @@ class PreviewError extends Error {
 /* harmony export */   zb: () => (/* binding */ CLASS_DOC_FIRST_IMAGE),
 /* harmony export */   ze: () => (/* binding */ STATUS_PENDING)
 /* harmony export */ });
-/* unused harmony exports CLASS_ACTIVE, CLASS_BOX_PREVIEW, CLASS_BOX_PREVIEW_CONTAINER, CLASS_BOX_PREVIEW_HEADER_CONTAINER, CLASS_BOX_PREVIEW_ICON, CLASS_BOX_PREVIEW_LOGO_CUSTOM, CLASS_BOX_PREVIEW_LOGO_DEFAULT, CLASS_BOX_PREVIEW_VERSION_BANNER, CLASS_BOX_PREVIEW_VERSION_BANNER_COMPARED, CLASS_PREFETCHED_IMAGE, SELECTOR_BOX_PREVIEW_VERSION_BANNER, SELECTOR_BOX_PREVIEW_HEADER, SELECTOR_BOX_PREVIEW_NOTIFICATION */
+/* unused harmony exports CLASS_ACTIVE, CLASS_BOX_PREVIEW, CLASS_BOX_PREVIEW_CONTAINER, CLASS_BOX_PREVIEW_HEADER_CONTAINER, CLASS_BOX_PREVIEW_ICON, CLASS_BOX_PREVIEW_LOGO_CUSTOM, CLASS_BOX_PREVIEW_LOGO_DEFAULT, CLASS_PREFETCHED_IMAGE, SELECTOR_BOX_PREVIEW_VERSION_BANNER, SELECTOR_BOX_PREVIEW_HEADER, SELECTOR_BOX_PREVIEW_NOTIFICATION */
 const CLASS_ACTIVE = 'bp-is-active';
 const CLASS_ANNOTATIONS_CREATE_DRAWING = 'bp-annotations-create--drawing';
 const CLASS_ANNOTATIONS_CREATE_HIGHLIGHT = 'bp-annotations-create--highlight';
@@ -532,6 +536,7 @@ const X_REP_HINT_VIDEO_MP4 = '[mp4]';
 const X_REP_HINT_WAVEFORM = '[waveform]';
 const AI_TRANSCRIPTION_FOR_VIDEO_SUBTITLES = 'aiTranscriptionForVideoSubtitles';
 const AUDIO_PLAYER_V2 = 'audioPlayerV2.enabled';
+const AUDIO_PLAYER_V2_RESIN_FEATURE = 'audioPlayerV2';
 
 // One per wave of the Blueprint migration. Each is reported as its own metric dimension so a
 // dashboard can compare a wave's timings with its flag on against the same wave with it off.
@@ -1032,7 +1037,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.108.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.112.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 = {};
@@ -5791,6 +5796,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   onPreviewChange,
   onRangeChange,
   onRangeClear,
+  onResinAction,
   range,
   readOnly = false,
   viewport
@@ -5963,6 +5969,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     }
     event.preventDefault();
     event.stopPropagation();
+    onResinAction?.('waveformRangeResize');
     const resolved = (0,waveform_range/* resolveRange */.Ss)(rangeRef.current, (0,waveform_range/* durationMsFromSec */.uH)(durationSecRef.current));
     dragRef.current = {
       handle,
@@ -5984,7 +5991,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
       endMs: (0,waveform_range/* isRangeCollapsed */.BT)(rangeRef.current) ? null : resolved.endMs,
       startMs: resolved.startMs
     });
-  }, [interactive, readOnly]);
+  }, [interactive, onResinAction, readOnly]);
   const onHandlePointerDown = (0,external_react_.useCallback)(event => {
     const root = rootRef.current;
     if (!root) {
@@ -6058,6 +6065,8 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
       ref: commentButtonRef,
       "aria-label": "Clear",
       className: "bp-WaveformRange-comment bp-WaveformRange-comment--clearOnly",
+      "data-resin-target": "waveformRangeClear",
+      "data-target-id": "Waveform-clearRange",
       "data-testid": "bp-waveform-range-clear",
       onClick: event => {
         stopRangeEvent(event);
@@ -6075,6 +6084,8 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     const commentAction = /*#__PURE__*/external_react_["default"].createElement("button", {
       ref: showClearControl ? undefined : commentButtonRef,
       className: showClearControl ? 'bp-WaveformRange-commentLabel' : 'bp-WaveformRange-comment',
+      "data-resin-target": "waveformRangeComment",
+      "data-target-id": "Waveform-commentOnRange",
       "data-testid": "bp-waveform-range-comment",
       onClick: event => {
         stopRangeEvent(event);
@@ -6096,6 +6107,8 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     }), /*#__PURE__*/external_react_["default"].createElement("button", {
       "aria-label": "Clear",
       className: "bp-WaveformRange-commentClear",
+      "data-resin-target": "waveformRangeClear",
+      "data-target-id": "Waveform-clearRange",
       "data-testid": "bp-waveform-range-clear",
       onClick: event => {
         stopRangeEvent(event);
@@ -6130,6 +6143,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     className: classnames_default()('bp-WaveformRange-handle', 'bp-WaveformRange-handle--start', {
       'bp-WaveformRange-handle--dragging': activeHandle === 'start'
     }),
+    "data-target-id": "Waveform-resizeRangeStart",
     "data-testid": "bp-waveform-range-handle-start",
     onMouseMove: event => event.stopPropagation(),
     onPointerDown: onHandlePointerDown
@@ -6140,6 +6154,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     className: classnames_default()('bp-WaveformRange-handle', 'bp-WaveformRange-handle--end', {
       'bp-WaveformRange-handle--dragging': activeHandle === 'end'
     }),
+    "data-target-id": "Waveform-resizeRangeEnd",
     "data-testid": "bp-waveform-range-handle-end",
     onMouseMove: event => event.stopPropagation(),
     onPointerDown: onHandlePointerDown
@@ -6177,6 +6192,13 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 
 
 
+function recordGestureSession(lastAtRef, target, record) {
+  const currentTime = Date.now();
+  if (currentTime - lastAtRef.current > constants/* WAVEFORM_RESIN_GESTURE_GAP_MS */.Uz) {
+    record?.(target);
+  }
+  lastAtRef.current = currentTime;
+}
 
 /** Pointer X in the view and the media time under it; zoom keeps this point fixed. */
 
@@ -6339,6 +6361,7 @@ function WaveformView({
   onRangeClear,
   onRangeDragCreate,
   onRangeDragChange,
+  onResinAction,
   onSeek,
   onViewportChange,
   onZoomChange,
@@ -6367,6 +6390,7 @@ function WaveformView({
   const onRangeChangeRef = (0,external_react_.useRef)(onRangeChange); // latest range commit; drag-create must not re-bind
   const onRangeClearRef = (0,external_react_.useRef)(onRangeClear); // latest click-outside clear; WaveSurfer click must not re-bind
   const onRangeDragChangeRef = (0,external_react_.useRef)(onRangeDragChange); // latest drag flag; unmount must not re-bind
+  const onResinActionRef = (0,external_react_.useRef)(onResinAction); // latest resin callback; gesture listeners must not re-bind
   const onSeekRef = (0,external_react_.useRef)(onSeek); // latest onSeek; click/scroll handlers must not re-bind
   const onViewportChangeRef = (0,external_react_.useRef)(onViewportChange); // latest viewport callback; camera commits here
   const peaksRef = (0,external_react_.useRef)(peaks); // latest peaks; WaveSurfer create() + morph read this
@@ -6381,6 +6405,8 @@ function WaveformView({
   const isPlayheadDraggingRef = (0,external_react_.useRef)(false); // playhead drag owns position until pointerup
   const lastObservedWidthRef = (0,external_react_.useRef)(0); // last ResizeObserver width; skip no-op resizes
   const liveHeightRef = (0,external_react_.useRef)(height); // canvas height last applied to WaveSurfer
+  const lastPinchResinAtRef = (0,external_react_.useRef)(0); // last pinch resin time; one zoomIn/zoomOut per WAVEFORM_RESIN_GESTURE_GAP_MS
+  const lastSwipeResinAtRef = (0,external_react_.useRef)(0); // last tape-swipe resin time; one waveformSwipe per burst
   const pinchStartRef = (0,external_react_.useRef)(null); // two-finger distance and zoom at pinch start
   const playheadDragRef = (0,external_react_.useRef)(null); // active playhead drag; pointerup seeks
   const playheadPinRef = (0,external_react_.useRef)(null); // dragged time until media/props catch up
@@ -6407,6 +6433,7 @@ function WaveformView({
   onRangeChangeRef.current = onRangeChange;
   onRangeClearRef.current = onRangeClear;
   onRangeDragChangeRef.current = onRangeDragChange;
+  onResinActionRef.current = onResinAction;
   onSeekRef.current = onSeek;
   onViewportChangeRef.current = onViewportChange;
   peaksRef.current = peaks;
@@ -6524,6 +6551,7 @@ function WaveformView({
       suppressNextTapPlayPauseTimerRef.current = 0;
       return;
     }
+    onResinActionRef.current?.('playPause');
     onPlayPauseRef.current?.(!isPlayingRef.current);
     suppressTapToPlayPause();
   }, [isUserPanning, suppressTapToPlayPause]);
@@ -6574,6 +6602,7 @@ function WaveformView({
    * show the scrub chip until the swipe settles.
    */
   const handleTapeSwipe = (0,external_react_.useCallback)(timeSec => {
+    recordGestureSession(lastSwipeResinAtRef, 'waveformSwipe', onResinActionRef.current);
     // Swallow the click WaveSurfer/iOS fires after a swipe or pinch.
     suppressNextTapPlayPauseRef.current = true;
     window.clearTimeout(suppressNextTapPlayPauseTimerRef.current);
@@ -6738,12 +6767,14 @@ function WaveformView({
           viewport: viewportRef.current
         })) {
           onRangeClearRef.current?.();
+          onResinActionRef.current?.('waveformRangeDismiss');
         }
       }
       if (cameraModeRef.current === 'tape') {
         toggleTapePlaybackRef.current?.();
         return;
       }
+      onResinActionRef.current?.('waveformSeek');
       onSeekRef.current?.(timeSec);
     });
     const unsubscribeScroll = wavesurfer.on('scroll', () => {
@@ -7024,6 +7055,7 @@ function WaveformView({
         return;
       }
       event.preventDefault();
+      recordGestureSession(lastPinchResinAtRef, event.deltaY > 0 ? 'zoomOut' : 'zoomIn', onResinActionRef.current);
       captureZoomOrigin(event.clientX);
       setZoomLevel(zoomRef.current * Math.exp(-event.deltaY * 0.01));
     };
@@ -7049,9 +7081,13 @@ function WaveformView({
         return;
       }
       event.preventDefault();
+      const distance = touchDistance(event.touches);
+      if (distance !== pinch.distance) {
+        recordGestureSession(lastPinchResinAtRef, distance > pinch.distance ? 'zoomIn' : 'zoomOut', onResinActionRef.current);
+      }
       zoomOriginRef.current = zoomOriginFromPinch(event.touches);
       markPointerZoom();
-      setZoomLevel(pinch.zoom * (touchDistance(event.touches) / pinch.distance));
+      setZoomLevel(pinch.zoom * (distance / pinch.distance));
     };
     const onTouchEnd = event => {
       if (event.touches.length < 2) {
@@ -7246,6 +7282,7 @@ function WaveformView({
       drag.range = drawnRangeFromMove(drag, moveEvent.clientX, moveTrack, viewportRef.current, playheadSec, durationSecRef.current);
       if (!drag.active) {
         drag.active = true;
+        onResinActionRef.current?.('waveformRangeCreate');
         handleRangeDragChange(true);
       }
       setCreateRange(drag.range);
@@ -7441,6 +7478,7 @@ function WaveformView({
     } catch {
       return; // Don't start a drag we cannot track after the pointer leaves.
     }
+    onResinActionRef.current?.('waveformPlayheadDrag');
     const fromSec = mediaElRef.current ? mediaElRef.current.currentTime : currentTimeRef.current;
     playheadDragRef.current = {
       fromSec,
@@ -7553,6 +7591,7 @@ function WaveformView({
     onPointerUp: onPlayheadPointerUp
   }, showPlayheadComment && /*#__PURE__*/external_react_["default"].createElement("button", {
     className: "bp-WaveformRange-comment bp-WaveformView-playheadComment",
+    "data-resin-target": "waveformPlayheadComment",
     "data-target-id": "Waveform-commentAtTime",
     "data-testid": "bp-waveform-playhead-comment",
     onClick: event => {
@@ -7579,6 +7618,7 @@ function WaveformView({
     onDragPointerX: clientX => {
       rangeDragPointerXRef.current = clientX;
     },
+    onResinAction: onResinAction,
     onPreviewChange: setPreviewRange,
     onRangeChange: interactive && !isOverlayReadOnly ? onRangeChange : undefined,
     onRangeClear: isTape && !isRangeDragging ? onRangeClear : undefined,
@@ -7859,6 +7899,7 @@ function MP3ControlsV2({
   onCommentRangeDragCreate,
   onCommentRangeDragChange,
   onPlayheadComment,
+  onResinAction,
   onMuteChange,
   onPlayPause,
   onPlayNextChange,
@@ -7985,11 +8026,12 @@ function MP3ControlsV2({
       if (!(target instanceof Element) || target.closest(RANGE_DISMISS_IGNORE)) {
         return;
       }
+      onResinAction?.('waveformRangeDismiss');
       onCommentRangeClear();
     };
     root.addEventListener('pointerdown', onPointerDown);
     return () => root.removeEventListener('pointerdown', onPointerDown);
-  }, [canDismissOpenRange, onCommentRangeClear]);
+  }, [canDismissOpenRange, onCommentRangeClear, onResinAction]);
   const isWaitingToPlay = hasStarted && !hasMediaMetadata;
   const showPlayOverlay = !hasStarted && !isPlaying;
   const hasZoomHandlers = hasRealPeaks && !showPlayOverlay;
@@ -8015,6 +8057,7 @@ function MP3ControlsV2({
     mediaEl: mediaEl,
     onPlayheadComment: isWaveformInteractive && !shuttleDirection ? onPlayheadComment : undefined,
     onPlayPause: isWaveformInteractive ? onPlayPause : undefined,
+    onResinAction: onResinAction,
     onRangeChange: isWaveformInteractive ? onCommentRangeChange : undefined,
     onRangeClear: isWaveformInteractive ? onCommentRangeClear : undefined,
     onRangeDragChange: onCommentRangeDragChange,
@@ -8052,6 +8095,8 @@ function MP3ControlsV2({
     dangerouslySetInnerHTML: {
       __html: play_48px
     },
+    "data-resin-target": "playOverlay",
+    "data-target-id": "MP3ControlsV2-play",
     "data-testid": "bp-MP3ControlsV2-play-overlay",
     onClick: handlePlayOverlayClick,
     onMouseDown: event => event.preventDefault(),
@@ -8183,6 +8228,7 @@ function isFpsAvailable(player) {
 /* harmony export */   Oe: () => (/* binding */ WAVEFORM_TAPE_RANGE_LONG_PRESS_CANCEL_PX),
 /* harmony export */   QD: () => (/* binding */ WAVEFORM_ZOOM_BUTTON_STEP),
 /* harmony export */   RQ: () => (/* binding */ WAVEFORM_TAPE_RANGE_LONG_PRESS_MS),
+/* harmony export */   Uz: () => (/* binding */ WAVEFORM_RESIN_GESTURE_GAP_MS),
 /* harmony export */   VS: () => (/* binding */ WAVEFORM_RANGE_EDGE_SCROLL_AUDIO_SEC_PER_SEC),
 /* harmony export */   XS: () => (/* binding */ WAVEFORM_BAR_MIN_HEIGHT),
 /* harmony export */   Zs: () => (/* binding */ WAVEFORM_FOLLOW_SCROLL_SETTLE_MS),
@@ -8246,6 +8292,8 @@ const WAVEFORM_PLAYHEAD_JUMP_MS = 400;
 const WAVEFORM_FOLLOW_SCROLL_SETTLE_MS = 150;
 /** Ignore a WaveSurfer click after a tape swipe (iOS delayed click). Must outlast the scrub-chip hide. */
 const WAVEFORM_TAPE_CLICK_SUPPRESS_MS = 200;
+/** One pinch or swipe burst. Same idle gap image, doc, text, and gallery use for pinch resin. */
+const WAVEFORM_RESIN_GESTURE_GAP_MS = 200;
 const WAVEFORM_BAR_GAP = 2;
 const WAVEFORM_BAR_WIDTH = 2;
 const WAVEFORM_BAR_RADIUS = WAVEFORM_BAR_WIDTH / 2;
@@ -25364,7 +25412,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.108.0";
+const CLIENT_VERSION = "3.112.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -26380,12 +26428,17 @@ class AnnotationModule {
 }
 ;// ./src/lib/featureChecking.ts
 
+
 const isFeatureEnabled = (features, featureName) => {
   return !!get_default()(features, featureName, false);
 };
 const getFeatureConfig = (features, featureName) => {
   return get_default()(features, featureName, {});
 };
+
+// Every React root gates Blueprint providers on this rather than on its own wave's flag, so a
+// Blueprint surface from any wave always has its providers, whichever root it renders in.
+const isBlueprintEnabled = features => [constants/* BLUEPRINT_MIGRATION_ARCHIVE */.cA, constants/* BLUEPRINT_MIGRATION_CONTROLS_BAR */.OQ, constants/* BLUEPRINT_MIGRATION_MEDIA_CONTROLS */.dR, constants/* BLUEPRINT_MIGRATION_SUPPORTING_UI */.Ed].some(feature => isFeatureEnabled(features, feature));
 ;// ./src/lib/viewers/BaseViewer.js
 function BaseViewer_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 BaseViewer_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? BaseViewer_ownKeys(Object(t), !0).forEach(function (r) { BaseViewer_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : BaseViewer_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -27778,6 +27831,15 @@ class BaseViewer extends (events_default()) {
     return isFeatureEnabled(this.options.features, feature);
   }
 
+  /**
+   * Whether any Blueprint migration wave is on, which is when React roots mount Blueprint providers
+   *
+   * @return {boolean}
+   */
+  isBlueprintEnabled() {
+    return isBlueprintEnabled(this.options.features);
+  }
+
   /**
    * Hides the preview mask element if it exists
    *
@@ -27915,6 +27977,22 @@ var external_react_ = __webpack_require__(1649);
 // EXTERNAL MODULE: ./node_modules/lodash/noop.js
 var noop = __webpack_require__(3950);
 var noop_default = /*#__PURE__*/__webpack_require__.n(noop);
+;// external "@box/blueprint-web"
+
+;// ./src/lib/BlueprintProviders.tsx
+
+
+// Preview has no Split client, so Blueprint's treatment-driven configuration resolves to its defaults.
+function BlueprintProviders({
+  children,
+  container
+}) {
+  return /*#__PURE__*/external_react_["default"].createElement(__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_BlueprintProvider__, {
+    useTreatment: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_useNoopTreatment__
+  }, /*#__PURE__*/external_react_["default"].createElement(__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_TooltipProvider__, {
+    container: container
+  }, children));
+}
 ;// ./src/lib/viewers/controls/controls-layer/ControlsLayerContext.ts
 
 
@@ -28034,12 +28112,14 @@ function ControlsRoot_toPrimitive(t, r) { if ("object" != typeof t || !t) return
 
 
 
+
 class ControlsRoot {
   constructor({
     className = 'bp-ControlsRoot',
     containerEl,
     fileExtension,
     fileId,
+    isBlueprintEnabled = false,
     onHide = (noop_default()),
     onShow = (noop_default())
   }) {
@@ -28052,6 +28132,7 @@ class ControlsRoot {
     });
     ControlsRoot_defineProperty(this, "handleHide", void 0);
     ControlsRoot_defineProperty(this, "handleShow", void 0);
+    ControlsRoot_defineProperty(this, "isBlueprintEnabled", void 0);
     ControlsRoot_defineProperty(this, "root", void 0);
     ControlsRoot_defineProperty(this, "handleMount", helpers => {
       this.controlsLayer = helpers;
@@ -28078,6 +28159,7 @@ class ControlsRoot {
     this.root = __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__(this.controlsEl);
     this.handleHide = onHide;
     this.handleShow = onShow;
+    this.isBlueprintEnabled = isBlueprintEnabled;
   }
   destroy() {
     this.root.unmount();
@@ -28094,11 +28176,14 @@ class ControlsRoot {
     this.controlsEl.classList.remove('bp-is-hidden');
   }
   render(controls) {
-    this.root.render(/*#__PURE__*/external_react_["default"].createElement(ControlsLayer, {
+    const layer = /*#__PURE__*/external_react_["default"].createElement(ControlsLayer, {
       onHide: this.handleHide,
       onMount: this.handleMount,
       onShow: this.handleShow
-    }, controls));
+    }, controls);
+    this.root.render(this.isBlueprintEnabled ? /*#__PURE__*/external_react_["default"].createElement(BlueprintProviders, {
+      container: this.containerEl
+    }, layer) : layer);
   }
 }
 ;// ./src/lib/viewers/image/ImageBaseViewer.js
@@ -28317,7 +28402,8 @@ class ImageBaseViewer extends viewers_BaseViewer {
     this.controls = new ControlsRoot({
       containerEl: this.containerEl,
       fileExtension: this.options.file.extension,
-      fileId: this.options.file.id
+      fileId: this.options.file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled()
     });
   }
 
@@ -32792,7 +32878,8 @@ class Image360Viewer extends box3d_Box3DViewer {
   createSubModules() {
     this.controls = this.getViewerOption('useReactControls') ? new ControlsRoot({
       containerEl: this.wrapperEl,
-      fileId: this.options.file.id
+      fileId: this.options.file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled()
     }) : new box3d_Box3DControls(this.wrapperEl);
     this.renderer = new image360_Image360Renderer(this.wrapperEl, this.boxSdk, {
       api: this.api
@@ -33768,7 +33855,8 @@ class TextBaseViewer extends viewers_BaseViewer {
     this.controls = new ControlsRoot({
       containerEl: this.containerEl,
       fileExtension: this.options.file.extension,
-      fileId: this.options.file.id
+      fileId: this.options.file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled()
     });
     this.bindDOMListeners();
     this.renderUI();
@@ -38125,18 +38213,32 @@ function MP3ControlsRoot_toPropertyKey(t) { var i = MP3ControlsRoot_toPrimitive(
 function MP3ControlsRoot_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); }
 
 
+
+
 class MP3ControlsRoot {
   constructor({
-    containerEl
+    containerEl,
+    fileExtension,
+    fileId,
+    isBlueprintEnabled = false,
+    resinFeature
   }) {
     MP3ControlsRoot_defineProperty(this, "containerEl", void 0);
     MP3ControlsRoot_defineProperty(this, "controlsEl", void 0);
+    MP3ControlsRoot_defineProperty(this, "isBlueprintEnabled", void 0);
     MP3ControlsRoot_defineProperty(this, "root", void 0);
     this.controlsEl = document.createElement('div');
     this.controlsEl.setAttribute('class', 'bp-MP3ControlsRoot');
     this.controlsEl.setAttribute('data-testid', 'bp-controls');
+    this.controlsEl.setAttribute('data-resin-component', 'toolbar');
+    if (resinFeature) {
+      this.controlsEl.setAttribute('data-resin-feature', resinFeature);
+    }
+    this.controlsEl.setAttribute('data-resin-fileid', fileId != null ? String(fileId) : '');
+    this.controlsEl.setAttribute('data-resin-fileextension', fileExtension || '');
     this.containerEl = containerEl;
     this.containerEl.appendChild(this.controlsEl);
+    this.isBlueprintEnabled = isBlueprintEnabled;
     this.root = __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__(this.controlsEl);
   }
   destroy() {
@@ -38146,7 +38248,9 @@ class MP3ControlsRoot {
     }
   }
   render(controls) {
-    this.root.render(controls);
+    this.root.render(this.isBlueprintEnabled ? /*#__PURE__*/external_react_["default"].createElement(BlueprintProviders, {
+      container: this.containerEl
+    }, controls) : controls);
   }
 }
 // EXTERNAL MODULE: ./src/lib/viewers/media/waveform/constants.ts
@@ -38164,6 +38268,8 @@ var validateWaveformPayload = __webpack_require__(1053);
 
 ;// ./src/lib/viewers/media/MP3Viewer.js
 function MP3Viewer_extends() { return MP3Viewer_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; }, MP3Viewer_extends.apply(null, arguments); }
+function MP3Viewer_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 MP3Viewer_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? MP3Viewer_ownKeys(Object(t), !0).forEach(function (r) { MP3Viewer_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : MP3Viewer_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function MP3Viewer_defineProperty(e, r, t) { return (r = MP3Viewer_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function MP3Viewer_toPropertyKey(t) { var i = MP3Viewer_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function MP3Viewer_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); }
@@ -38242,6 +38348,23 @@ function createLoadFailedError(message) {
 class MP3Viewer extends media_MediaBaseViewer {
   constructor(...args) {
     super(...args);
+    /**
+     * One toolbar resin event.
+     *
+     * @param {string} target
+     * @return {void}
+     */
+    MP3Viewer_defineProperty(this, "recordToolbarAction", target => {
+      const file = this.options.file || {};
+      this.options.resin?.recordAction({
+        action: 'programmatic',
+        component: 'toolbar',
+        feature: constants/* AUDIO_PLAYER_V2_RESIN_FEATURE */.dl,
+        target,
+        fileId: file.id,
+        fileExtension: file.extension
+      });
+    });
     /**
      * @inheritdoc
      */
@@ -38510,14 +38633,68 @@ class MP3Viewer extends media_MediaBaseViewer {
     }
     return super.onKeydown(key, event);
   }
+  /**
+   * Route slider and settings programmatic events through the audio v2 feature.
+   * Clicks pick the same feature up from data-resin-feature on the player root.
+   *
+   * @return {void}
+   */
+  bindAudioPlayerV2Resin() {
+    const host = this.options.resin;
+    if (!this.isAudioPlayerV2 || !host || typeof host.recordAction !== 'function' || this.audioPlayerV2ResinHost) {
+      return;
+    }
+    this.audioPlayerV2ResinHost = host;
+    const wrapped = {
+      recordAction: props => host.recordAction(MP3Viewer_objectSpread({
+        feature: constants/* AUDIO_PLAYER_V2_RESIN_FEATURE */.dl
+      }, props))
+    };
+    this.options.resin = wrapped;
+    if (window.Box?.Preview) {
+      window.Box.Preview.resin = wrapped;
+    }
+  }
+
+  /**
+   * @return {void}
+   */
+  unbindAudioPlayerV2Resin() {
+    const host = this.audioPlayerV2ResinHost;
+    if (!host) {
+      return;
+    }
+    this.options.resin = host;
+    if (window.Box?.Preview) {
+      window.Box.Preview.resin = host;
+    }
+    this.audioPlayerV2ResinHost = null;
+  }
+
+  /**
+   * @return {MP3ControlsRoot}
+   */
+  createControlsRoot() {
+    this.bindAudioPlayerV2Resin();
+    const file = this.options.file || {};
+    return new MP3ControlsRoot({
+      containerEl: this.mediaContainerEl,
+      fileExtension: file.extension || '',
+      fileId: file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled(),
+      resinFeature: this.isAudioPlayerV2 ? constants/* AUDIO_PLAYER_V2_RESIN_FEATURE */.dl : undefined
+    });
+  }
   handleKeydownAudioV2(key, event) {
     const decoded = (key || '').toLowerCase();
     const altKey = !!(event && event.altKey);
     switch (decoded) {
       case 'space':
+        this.recordToolbarAction('playPause');
         this.toggleV2Play();
         return true;
       case 'k':
+        this.recordToolbarAction('playPause');
         this.exitShuttle();
         this.pause(undefined, true);
         return true;
@@ -38528,15 +38705,19 @@ class MP3Viewer extends media_MediaBaseViewer {
         this.shuttle('forward');
         return true;
       case 'arrowleft':
+        this.recordToolbarAction('seekBackward');
         this.quickSeek(-AUDIO_V2_SKIP_SEC);
         return true;
       case 'arrowright':
+        this.recordToolbarAction('seekForward');
         this.quickSeek(AUDIO_V2_SKIP_SEC);
         return true;
       case ',':
+        this.recordToolbarAction('frameBackward');
         this.frameStep('back');
         return true;
       case '.':
+        this.recordToolbarAction('frameForward');
         this.frameStep('forward');
         return true;
       case 'arrowup':
@@ -38557,17 +38738,25 @@ class MP3Viewer extends media_MediaBaseViewer {
         if (!this.mediaEl || !Number.isFinite(this.mediaEl.duration)) {
           return false;
         }
+        this.recordToolbarAction('seekEnd');
         this.exitShuttle();
         this.setMediaTime(this.mediaEl.duration);
         return true;
       case '0':
       case 'home':
+        this.recordToolbarAction('seekStart');
         this.exitShuttle();
         return false;
+      case 'm':
+      case 'shift+m':
+        this.recordToolbarAction('volumeToggle');
+        return false;
       case 'shift+arrowleft':
+        this.recordToolbarAction('skipBackward');
         this.quickSeek(-AUDIO_V2_SHIFT_SKIP_SEC);
         return true;
       case 'shift+arrowright':
+        this.recordToolbarAction('skipForward');
         this.quickSeek(AUDIO_V2_SHIFT_SKIP_SEC);
         return true;
       case 'i':
@@ -38580,10 +38769,12 @@ class MP3Viewer extends media_MediaBaseViewer {
       case 'shift++':
       case '+':
       case '=':
+        this.recordToolbarAction('waveformZoomIn');
         this.stepKeyboardZoom(1);
         return true;
       case '-':
       case 'shift+_':
+        this.recordToolbarAction('waveformZoomOut');
         this.stepKeyboardZoom(-1);
         return true;
       default:
@@ -38604,6 +38795,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     if ((0,useTapeWaveform/* isTapeWaveformInput */.MQ)()) {
       return;
     }
+    this.recordToolbarAction(direction === 'forward' ? 'shuttleForward' : 'shuttleReverse');
     const sameDirection = this.shuttleDirection === direction;
     const rate = nextShuttleRate(this.shuttleRate, sameDirection);
     if (direction === 'forward') {
@@ -38697,9 +38889,11 @@ class MP3Viewer extends media_MediaBaseViewer {
     if (!target || target.id === this.hostSelectedMarkerId) {
       return;
     }
+    this.recordToolbarAction(direction < 0 ? 'commentMarkerPrevious' : 'commentMarkerNext');
     this.handleCommentMarkerClick(target);
   }
   stepKeyboardVolume(direction) {
+    this.recordToolbarAction('volumeSlider');
     this.keyboardVolumeStep += 1;
     if (direction > 0) {
       this.increaseVolume();
@@ -38741,6 +38935,10 @@ class MP3Viewer extends media_MediaBaseViewer {
    */
   fallbackToV1Controls() {
     this.isAudioPlayerV2 = false;
+    this.unbindAudioPlayerV2Resin();
+    if (this.controls && this.controls.controlsEl) {
+      this.controls.controlsEl.removeAttribute('data-resin-feature');
+    }
     this.abortWaveformLoads();
     if (this.wrapperEl) {
       this.wrapperEl.classList.remove('bp-media--v2');
@@ -38788,6 +38986,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.shuttleDirection = null;
     this.shuttleRate = 0;
     this.abortWaveformLoads();
+    this.unbindAudioPlayerV2Resin();
     super.destroy();
   }
 
@@ -38817,9 +39016,7 @@ class MP3Viewer extends media_MediaBaseViewer {
   showAudioLoadingShell() {
     this.showMedia();
     if (!this.controls) {
-      this.controls = new MP3ControlsRoot({
-        containerEl: this.mediaContainerEl
-      });
+      this.controls = this.createControlsRoot();
     }
     this.ensureV2Controls().then(Mp3ControlsV2 => {
       if (this.destroyed) {
@@ -39201,9 +39398,7 @@ class MP3Viewer extends media_MediaBaseViewer {
   loadUIReact() {
     super.loadUIReact();
     if (!this.controls) {
-      this.controls = new MP3ControlsRoot({
-        containerEl: this.mediaContainerEl
-      });
+      this.controls = this.createControlsRoot();
     }
     this.bindCommentMarkersListener();
     this.bindCommentRangeDraftListeners();
@@ -39461,6 +39656,7 @@ class MP3Viewer extends media_MediaBaseViewer {
         onCommentRangeDragChange: this.handleCommentRangeDragChange,
         onCommentRangeDragCreate: this.getCanCreateComment() ? this.handleCommentRangeDragCreate : undefined,
         onPlayheadComment: this.getCanCreateComment() ? this.handlePlayheadComment : undefined,
+        onResinAction: this.recordToolbarAction,
         onPlayNextChange: this.setPlayNext,
         peaks: this.waveformPeaks,
         playNext: this.isPlayNextEnabled(),
@@ -40457,6 +40653,7 @@ class VideoBaseViewer extends media_MediaBaseViewer {
       className: 'bp-VideoControlsRoot',
       containerEl: controlsContainerEl,
       fileId: this.options.file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled(),
       onHide: this.handleControlsHide,
       onShow: this.handleControlsShow
     });
@@ -44230,6 +44427,107 @@ function DocControls({
     onAnnotationColorChange: onAnnotationColorChange
   })));
 }
+;// ./src/lib/viewers/controls/controls-bar/ControlsBarV2.tsx
+const ControlsBarV2_excluded = ["children"];
+function ControlsBarV2_extends() { return ControlsBarV2_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; }, ControlsBarV2_extends.apply(null, arguments); }
+function ControlsBarV2_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = ControlsBarV2_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 ControlsBarV2_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 ControlsBarV2(_ref) {
+  let {
+      children
+    } = _ref,
+    rest = ControlsBarV2_objectWithoutProperties(_ref, ControlsBarV2_excluded);
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/external_react_["default"].createElement(__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_Toolbar__.Root, ControlsBarV2_extends({
+    "data-testid": "bp-ControlsBar"
+  }, rest), children);
+}
+;// ./src/lib/viewers/doc/DocControlsV2.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+function DocControlsV2({
+  annotationColor,
+  annotationMode,
+  experiences,
+  hasDrawing,
+  hasGalleryZoom = false,
+  hasHighlight,
+  hasRegion,
+  isGalleryOpen,
+  isThumbnailsOpen,
+  maxScale,
+  minScale,
+  onAnnotationColorChange,
+  onAnnotationModeClick,
+  onAnnotationModeEscape,
+  onFindBarToggle,
+  onFullscreenToggle,
+  onGalleryToggle,
+  onPageChange,
+  onPageSubmit,
+  onRotateLeft,
+  onThumbnailsToggle,
+  onZoomIn,
+  onZoomOut,
+  pageCount,
+  pageNumber,
+  scale
+}) {
+  return /*#__PURE__*/external_react_["default"].createElement(ExperiencesProvider, {
+    experiences: experiences
+  }, /*#__PURE__*/external_react_["default"].createElement(ControlsBarV2, null, !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(ThumbnailsToggle, {
+    isThumbnailsOpen: isThumbnailsOpen,
+    onThumbnailsToggle: onThumbnailsToggle
+  }), /*#__PURE__*/external_react_["default"].createElement(FindBarToggle, {
+    onFindBarToggle: onFindBarToggle
+  }), /*#__PURE__*/external_react_["default"].createElement(PageControls, {
+    onPageChange: onPageChange,
+    onPageSubmit: onPageSubmit,
+    pageCount: pageCount,
+    pageNumber: pageNumber
+  })), (!isGalleryOpen || hasGalleryZoom) && /*#__PURE__*/external_react_["default"].createElement(ZoomControls, {
+    maxScale: maxScale,
+    minScale: minScale,
+    onZoomIn: onZoomIn,
+    onZoomOut: onZoomOut,
+    resinTargetZoomIn: isGalleryOpen ? 'galleryZoomIn' : undefined,
+    resinTargetZoomOut: isGalleryOpen ? 'galleryZoomOut' : undefined,
+    scale: scale
+  }), !isGalleryOpen && onRotateLeft && /*#__PURE__*/external_react_["default"].createElement(RotateControl, {
+    onRotateLeft: onRotateLeft
+  }), /*#__PURE__*/external_react_["default"].createElement(GalleryToggle, {
+    isGalleryOpen: isGalleryOpen,
+    onGalleryToggle: onGalleryToggle
+  }), /*#__PURE__*/external_react_["default"].createElement(FullscreenToggle, {
+    onFullscreenToggle: onFullscreenToggle
+  }), !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(AnnotationsControls, {
+    annotationColor: annotationColor,
+    annotationMode: annotationMode,
+    hasDrawing: hasDrawing,
+    hasHighlight: hasHighlight,
+    hasRegion: hasRegion,
+    onAnnotationModeClick: onAnnotationModeClick,
+    onAnnotationModeEscape: onAnnotationModeEscape
+  })), !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(ControlsBar, null, /*#__PURE__*/external_react_["default"].createElement(DrawingControls, {
+    annotationColor: annotationColor,
+    annotationMode: annotationMode,
+    onAnnotationColorChange: onAnnotationColorChange
+  })));
+}
 ;// ./src/lib/icons/search.svg
 const search_namespaceObject = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 15 14\" focusable=\"false\">\n    <g fill=\"none\" fill-rule=\"evenodd\">\n        <path d=\"M-2-3h20v20H-2z\"/>\n        <path class=\"icon\" fill=\"#FFF\" d=\"M6.931 0a5.994 5.994 0 0 1 4.907 9.438l2.806 2.807a1 1 0 0 1 0 1.415l-.047.047a1 1 0 0 1-1.414 0L10.375 10.9A5.994 5.994 0 1 1 6.931 0zm0 1.998a3.996 3.996 0 1 0 0 7.992 3.996 3.996 0 0 0 0-7.992z\"/>\n    </g>\n</svg>\n";
 ;// ./src/lib/icons/arrow_drop_up.svg
@@ -47810,6 +48108,7 @@ function DocBaseViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) retur
 
 
 
+
 
 
 const DOC_FIRST_PAGES_ENABLED = 'docFirstPages.enabled';
@@ -49169,7 +49468,8 @@ class DocBaseViewer extends viewers_BaseViewer {
     this.controls = new ControlsRoot({
       containerEl: this.containerEl,
       fileExtension: this.options.file.extension,
-      fileId: this.options.file.id
+      fileId: this.options.file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled()
     });
     this.annotationControlsFSM.subscribe(() => this.renderUI());
     this.renderUI();
@@ -49207,7 +49507,8 @@ class DocBaseViewer extends viewers_BaseViewer {
     const canRotate = this.featureEnabled('rotate.enabled');
     const canGallery = !this.isMobile && this.galleryController.canRender(this.pdfViewer.pagesCount);
     const isGalleryZoomActive = this.galleryController.isOpen && this.galleryController.isEnhancedGalleryEnabled;
-    this.controls.render(/*#__PURE__*/external_react_["default"].createElement(DocControls, {
+    const Controls = this.featureEnabled(constants/* BLUEPRINT_MIGRATION_CONTROLS_BAR */.OQ) ? DocControlsV2 : DocControls;
+    this.controls.render(/*#__PURE__*/external_react_["default"].createElement(Controls, {
       annotationColor: this.annotationModule.getColor(),
       annotationMode: this.annotationControlsFSM.getMode(),
       experiences: this.experiences,
@@ -54113,7 +54414,8 @@ class Model3DViewer extends box3d_Box3DViewer {
   createSubModules() {
     this.controls = this.getViewerOption('useReactControls') ? new ControlsRoot({
       containerEl: this.wrapperEl,
-      fileId: this.options.file.id
+      fileId: this.options.file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled()
     }) : new model3d_Model3DControls(this.wrapperEl);
     this.renderer = new model3d_Model3DRenderer(this.wrapperEl, this.boxSdk, {
       api: this.api
@@ -55080,6 +55382,79 @@ office_OfficeLoader,
 doc_DocLoader,
 // should come after text
 swf_SWFLoader, video360_Video360Loader, media_MediaLoader, image360_Image360Loader, image_ImageLoader, model3d_Model3DLoader, iframe_IFrameLoader]);
+;// ./src/lib/ComparisonBanner.tsx
+function ComparisonBanner_defineProperty(e, r, t) { return (r = ComparisonBanner_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function ComparisonBanner_toPropertyKey(t) { var i = ComparisonBanner_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function ComparisonBanner_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 formatComparisonTimestamp(iso, locale) {
+  if (!iso) {
+    return '';
+  }
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+  return new Intl.DateTimeFormat(locale || 'en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit'
+  }).format(date);
+}
+function getComparisonBannerAuthor(file = {}) {
+  return file.modified_by?.name || file.created_by?.name || '';
+}
+function ComparisonBanner({
+  file = {},
+  isComparedPreview = false,
+  locale
+}) {
+  const versionNumber = file.version_number != null && file.version_number !== '' ? String(file.version_number) : '';
+  const timestamp = formatComparisonTimestamp(file.modified_at, locale);
+  const author = getComparisonBannerAuthor(file);
+  if (!versionNumber && !timestamp && !author) {
+    return null;
+  }
+  return /*#__PURE__*/external_react_["default"].createElement("div", {
+    "aria-label": isComparedPreview ? "Previous version" : "Current version",
+    className: isComparedPreview ? `${constants/* CLASS_BOX_PREVIEW_VERSION_BANNER */.on} ${constants/* CLASS_BOX_PREVIEW_VERSION_BANNER_COMPARED */.Uj}` : constants/* CLASS_BOX_PREVIEW_VERSION_BANNER */.on,
+    role: "status"
+  }, versionNumber && /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-version-banner-badge"
+  }, versionNumber), (timestamp || author) && /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-version-banner-info"
+  }, timestamp && /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-version-banner-time"
+  }, timestamp), author && /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-version-banner-author"
+  }, author)));
+}
+class ComparisonBannerRoot {
+  constructor(containerEl) {
+    ComparisonBanner_defineProperty(this, "hostEl", void 0);
+    ComparisonBanner_defineProperty(this, "root", void 0);
+    this.hostEl = document.createElement('div');
+    containerEl.insertBefore(this.hostEl, containerEl.firstChild);
+    this.root = __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__(this.hostEl);
+  }
+  render(file = {}, {
+    isComparedPreview = false,
+    locale
+  } = {}) {
+    this.root.render(/*#__PURE__*/external_react_["default"].createElement(ComparisonBanner, {
+      file: file,
+      isComparedPreview: isComparedPreview,
+      locale: locale
+    }));
+  }
+  destroy() {
+    this.root.unmount();
+    this.hostEl.remove();
+  }
+}
 ;// external "box-ui-elements/es/components/preview"
 
 ;// ./src/lib/viewers/error/ErrorIcon.tsx
@@ -55830,6 +56205,7 @@ function Preview_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; v
 
 
 
+
 const DEFAULT_DISABLED_VIEWERS = ['Office']; // viewers disabled by default
 const PREFETCH_COUNT = 4; // number of files to prefetch
 const MOUSEMOVE_THROTTLE_MS = 1500; // for showing or hiding the navigation icons
@@ -55898,6 +56274,8 @@ class Preview extends (events_default()) {
     Preview_defineProperty(this, "retryTimeout", void 0);
     /** @property {HTMLElement} - Preview DOM container */
     Preview_defineProperty(this, "container", void 0);
+    /** @property {ComparisonBannerRoot} - Version comparison banner */
+    Preview_defineProperty(this, "comparisonBannerRoot", void 0);
     /** @property {Function} - Throttled mousemove handler */
     Preview_defineProperty(this, "throttledMousemoveHandler", void 0);
     /** @property {Cache} - Preview's cache instance */
@@ -56037,6 +56415,7 @@ class Preview extends (events_default()) {
     if (this.perf) {
       this.perf.destroy();
     }
+    this.destroyComparisonBanner();
 
     // Clean the UI
     this.ui.cleanup();
@@ -56721,11 +57100,14 @@ class Preview extends (events_default()) {
    * @return {void}
    */
   setupUI() {
+    this.destroyComparisonBanner();
+
     // Setup the shell
     this.container = this.ui.setup(this.options, this.keydownHandler, this.navigateLeft, this.navigateRight, this.throttledMousemoveHandler);
 
     // Set up the notification
     this.ui.setupNotification();
+    this.updateComparisonBanner();
 
     // Update navigation
     this.ui.showNavigation(this.file.id, this.collection);
@@ -56739,6 +57121,67 @@ class Preview extends (events_default()) {
     lib_Timer.start(previewDurationTag);
   }
 
+  /**
+   * @public
+   * @param {Object} [mode]
+   * @param {boolean} [mode.isComparing] - This Preview is in a comparison (not “current pane”)
+   * @param {boolean} [mode.isComparedPreview] - Compared (previous version) pane; implies isComparing
+   * @return {void}
+   */
+  setComparisonMode(mode = {}) {
+    if ('isComparedPreview' in mode) {
+      this.options.isComparedPreview = !!mode.isComparedPreview;
+    }
+    if ('isComparing' in mode) {
+      this.options.isComparing = !!mode.isComparing;
+    }
+    if (this.options.isComparedPreview) {
+      this.options.isComparing = true;
+    }
+    this.updateComparisonBanner();
+  }
+
+  /**
+   * @private
+   * @return {void}
+   */
+  updateComparisonBanner() {
+    const {
+      comparisonBanner,
+      isComparing
+    } = this.options;
+    const isComparedPreview = !!this.options.isComparedPreview;
+    if (!isComparing && !isComparedPreview) {
+      this.destroyComparisonBanner();
+      return;
+    }
+    if (!this.container) {
+      return;
+    }
+    if (!this.comparisonBannerRoot) {
+      this.comparisonBannerRoot = new ComparisonBannerRoot(this.container);
+    }
+    const {
+      currentFileVersion,
+      previousFileVersion
+    } = comparisonBanner || {};
+    this.comparisonBannerRoot.render(isComparedPreview ? previousFileVersion : currentFileVersion, {
+      isComparedPreview,
+      locale: (0,util/* getProp */.GT)(this.location, 'locale')
+    });
+  }
+
+  /**
+   * @private
+   * @return {void}
+   */
+  destroyComparisonBanner() {
+    if (this.comparisonBannerRoot) {
+      this.comparisonBannerRoot.destroy();
+      this.comparisonBannerRoot = undefined;
+    }
+  }
+
   /**
    * Parses preview options.
    *
@@ -56866,6 +57309,11 @@ class Preview extends (events_default()) {
     // Options that are applicable to certain file ids
     this.options.fileOptions = options.fileOptions || {};
 
+    // isComparing = in a comparison; isComparedPreview = compared pane (implies isComparing)
+    this.options.comparisonBanner = options.comparisonBanner || {};
+    this.options.isComparedPreview = !!options.isComparedPreview;
+    this.options.isComparing = !!options.isComparing || this.options.isComparedPreview;
+
     // Option to enable use of thumbnails sidebar for document types
     this.options.enableThumbnailsSidebar = !!options.enableThumbnailsSidebar;