box-content-preview 3.93.0 → 3.94.0

package/README.md

@@ -2,7 +2,7 @@
 [![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/box/box-content-preview&style=flat)](https://mergify.io)
 [![Styled With Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![build status](https://img.shields.io/travis/box/box-content-preview/master.svg?style=flat-square)](https://travis-ci.org/box/box-content-preview)
-[![version](https://img.shields.io/badge/version-v3.93.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
+[![version](https://img.shields.io/badge/version-v3.94.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
 [![npm version](https://img.shields.io/npm/v/box-ui-elements.svg?style=flat-square)](https://www.npmjs.com/package/box-ui-elements)
 
 # [Box Content Preview](https://developer.box.com/docs/box-content-preview)
@@ -22,11 +22,11 @@ We encourage all users to update their applications to utilize modern browsers f
 
 ## Current Version
 
-- Version: v3.93.0
+- Version: v3.94.0
 - Locale: en-US
 
-https://cdn01.boxcdn.net/platform/preview/3.93.0/en-US/preview.js
-https://cdn01.boxcdn.net/platform/preview/3.93.0/en-US/preview.css
+https://cdn01.boxcdn.net/platform/preview/3.94.0/en-US/preview.js
+https://cdn01.boxcdn.net/platform/preview/3.94.0/en-US/preview.css
 
 ## Supported Locales
 
@@ -52,10 +52,10 @@ You can self-host the Box Content Preview library or reference the versions avai
     <title>Box Content Preview Demo</title>
 
     <!-- Latest version of Preview SDK for your locale -->
-    <script src="https://cdn01.boxcdn.net/platform/preview/3.93.0/en-US/preview.js"></script>
+    <script src="https://cdn01.boxcdn.net/platform/preview/3.94.0/en-US/preview.js"></script>
     <link
       rel="stylesheet"
-      href="https://cdn01.boxcdn.net/platform/preview/3.93.0/en-US/preview.css"
+      href="https://cdn01.boxcdn.net/platform/preview/3.94.0/en-US/preview.css"
     />
   </head>
   <body>
@@ -76,7 +76,7 @@ To self-host the Box Content Preview library, follow these steps:
 
 1. Either fork the repo and check out the version you want to host or download the specific version as a zip:
 
-- Check out a specific version with `git checkout v3.93.0`
+- Check out a specific version with `git checkout v3.94.0`
 - Download a specific version as a zip from https://github.com/box/box-content-preview/releases
 
 2. Install dependencies and build the library with `yarn install && yarn build:i18n && yarn build:prod`

package/dist/lib/index.css

@@ -61,8 +61,8 @@
 .bp-MarkerAvatarStack{position:absolute;bottom:calc(100% + 4px);left:50%;display:flex;align-items:center;transform:translateX(-50%)}.bp-MarkerAvatarStack-item{position:relative;flex-shrink:0;box-sizing:content-box;width:20px;height:20px;padding:0;background:none;border:0;border-radius:50%;outline:none;overflow:visible;cursor:pointer;appearance:none;transition:margin 150ms}.bp-MarkerAvatarStack-item:focus,.bp-MarkerAvatarStack-item:focus-visible{outline:none}.bp-MarkerAvatarStack-item:not(:first-child){margin-left:var(--bp-marker-stack-overlap, -10px)}.bp-MarkerAvatarStack-item .bp-MarkerAvatar{position:absolute;top:50%;bottom:auto;left:50%;display:block;transform:translate(-50%, -50%);transform-origin:center center}.bp-MarkerAvatarStack-item:hover,.bp-MarkerAvatarStack-item:focus-visible{z-index:3}:is(.bp-WaveformCommentMarkers-marker--group,.bp-TimeControlsV2-marker--group,.bp-MarkerCluster):is(:hover,:has(.bp-MarkerAvatarStack-item:focus-visible)) .bp-MarkerAvatarStack-item:not(:first-child){margin-left:2px}.bp-MarkerAvatarStack-overflow{cursor:pointer}.bp-MarkerAvatarStack-overflowBadge{background-color:#383838;color:#fff}.bp-MarkerAvatarStack-overflowBadge .bp-MarkerAvatar-initial{color:#fff}
 .bp-WaveformCommentMarkers{position:absolute;top:-2px;right:0;left:0;z-index:4;box-sizing:border-box;height:24px;padding:0 60px;overflow:visible;pointer-events:auto}.bp-WaveformCommentMarkers--zoomed,.bp-WaveformCommentMarkers--tape{padding:0;overflow:clip visible}.bp-WaveformCommentMarkers--tape{top:auto;bottom:100%;margin-bottom:12px}.bp-WaveformCommentMarkers-track{position:relative;width:100%;height:100%;overflow:visible}.bp-WaveformCommentMarkers--zoomed .bp-WaveformCommentMarkers-track,.bp-WaveformCommentMarkers--tape .bp-WaveformCommentMarkers-track{overflow:clip visible}.bp-WaveformCommentMarkers-marker{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:auto;height:auto;padding:0;background:none;border:0;border-radius:50%;transform:translate(-50%, -50%);cursor:pointer;appearance:none;pointer-events:auto;overflow:visible;outline:none;transition:box-shadow 150ms}.bp-WaveformCommentMarkers-marker:focus,.bp-WaveformCommentMarkers-marker:focus-visible{outline:none}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar{overflow:visible;isolation:isolate;cursor:pointer}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar img{cursor:pointer}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar::after{position:absolute;z-index:1;inset:0;background:#000;border-radius:50%;opacity:.4;pointer-events:none;content:"";transition:opacity 150ms}.bp-WaveformCommentMarkers-marker>.bp-MarkerAvatar{position:relative;bottom:auto;left:auto;transform:none;transform-origin:center center}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar:not(.bp-MarkerAvatarStack-overflowBadge),.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack .bp-MarkerAvatar:not(.bp-MarkerAvatarStack-overflowBadge){background-color:#000}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack{position:relative;bottom:auto;left:auto;transform:none}.bp-WaveformCommentMarkers-marker--group{width:auto}.bp-WaveformView:hover~.bp-WaveformCommentMarkers .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers:hover .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers:has(:focus-visible) .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group).bp-WaveformCommentMarkers-marker--selected .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item--selected .bp-MarkerAvatar::after{opacity:0}.bp-WaveformCommentMarkers-marker--selected{z-index:3}.bp-WaveformCommentMarkers-marker:hover,.bp-WaveformCommentMarkers-marker:focus-within{z-index:4}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item{cursor:pointer;transition:margin 150ms}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:hover,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:focus-visible{z-index:3}@media(prefers-reduced-motion: reduce){.bp-WaveformCommentMarkers-marker,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item,.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar::after{transition:none}}
 .bp-WaveformGeneratingIndicator{display:flex;gap:4px;align-items:center;height:48px;padding:8px 16px 8px 12px;pointer-events:none}.bp-WaveformGeneratingIndicator-bars{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px}.bp-WaveformGeneratingIndicator-bar{width:2px;height:10px;background:rgba(255,255,255,.3);border-radius:6px;animation:bp-WaveformGeneratingIndicator-pulse .66s ease-in-out infinite}.bp-WaveformGeneratingIndicator-bar:nth-child(2){margin-left:2px;animation-delay:.1s}.bp-WaveformGeneratingIndicator-bar:last-child{margin-left:2px;animation-delay:.2s}.bp-WaveformGeneratingIndicator-label{color:#fff;font-weight:normal;font-size:14px;line-height:22px;white-space:nowrap}@keyframes bp-WaveformGeneratingIndicator-pulse{0%,80%,100%{background:rgba(255,255,255,.3);transform:scaleY(1.2)}40%{background:#fff;transform:scaleY(1.6)}}@media(prefers-reduced-motion: reduce){.bp-WaveformGeneratingIndicator-bar{animation:none;background:#fff;transform:none}}
-.bp-WaveformRange{position:absolute;inset:0;z-index:2;pointer-events:none}.bp-WaveformRange-region{position:absolute;top:50%;box-sizing:border-box;height:150px;pointer-events:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.4);border-radius:10px;box-shadow:0 0 0 1px #222;transform:translateY(-50%);transition:border-width 100ms ease,border-color 100ms ease}.bp-WaveformRange--highlight .bp-WaveformRange-region,.bp-WaveformRange:has(.bp-WaveformRange-handle:hover) .bp-WaveformRange-region,.bp-WaveformRange:has(.bp-WaveformRange-handle--dragging) .bp-WaveformRange-region{border-width:2px;border-color:#fff}.bp-WaveformRange-handle{position:absolute;top:50%;z-index:1;width:24px;height:150px;pointer-events:auto;cursor:ew-resize;touch-action:none;transform:translate(-50%, -50%)}.bp-WaveformRange-handle--end{z-index:2}.bp-WaveformRange-handleGrip{position:absolute;top:50%;left:50%;width:8px;height:20px;background:#fff;border:1px solid #222;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform:translate(-50%, -50%) scale(0.5);transition:opacity 100ms ease-in,transform 100ms ease-in}.bp-WaveformRange-handle:hover .bp-WaveformRange-handleGrip,.bp-WaveformRange-handle:focus-visible .bp-WaveformRange-handleGrip,.bp-WaveformRange-handle--dragging .bp-WaveformRange-handleGrip{opacity:1;transform:translate(-50%, -50%) scale(1);transition:opacity 150ms ease-out,transform 150ms ease-out}.bp-WaveformRange-tooltip{position:absolute;top:100%;z-index:3;margin-top:4px;pointer-events:none;transform:translateX(-50%)}.bp-WaveformRange-tooltipTime{padding:4px 10px;color:#fff;font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;white-space:nowrap;background:rgba(34,34,34,.92);border:1px solid rgba(255,255,255,.18);border-radius:8px}@media(prefers-reduced-motion: reduce){.bp-WaveformRange-region,.bp-WaveformRange-handleGrip{transition:none}}
-.bp-WaveformView{box-sizing:border-box;width:100%;height:206px;min-height:206px;padding:0 60px;overflow:visible;background:none;-webkit-tap-highlight-color:transparent}.bp-WaveformView.bp-WaveformView--zoomed,.bp-WaveformView.bp-WaveformView--tape{padding:0;touch-action:none}.bp-WaveformView.bp-WaveformView--zoomed .bp-WaveformView-canvas,.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas{overflow:hidden;mask-image:linear-gradient(to right, transparent, #000 92px, #000 calc(100% - 92px), transparent)}.bp-WaveformView.bp-WaveformView--zoomed .bp-WaveformView-canvas>*::part(scroll),.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas>*::part(scroll){overscroll-behavior-x:none}.bp-WaveformView.bp-WaveformView--tape{flex:1 1 auto;height:100%;min-height:0}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas{height:100%}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas>*::part(scroll){scrollbar-width:none}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-playhead,.bp-WaveformView.bp-WaveformView--tape .bp-WaveformRange-region,.bp-WaveformView.bp-WaveformView--tape .bp-WaveformRange-handle{height:calc(100% + 10px)}.bp-WaveformView-track{position:relative;display:flex;align-items:center;width:100%;height:100%;cursor:pointer}.bp-WaveformView-canvas{z-index:0;width:100%;height:140px}.bp-WaveformView-playhead{position:absolute;top:50%;left:0;z-index:1;width:2px;height:150px;pointer-events:none;background:linear-gradient(#2487ff, #006bed);border-radius:1px;box-shadow:0 0 0 1px #222,0 0 10px 0 rgba(36,135,255,.3);transform:translate(-50%, -50%)}.bp-WaveformView-hover{position:absolute;top:100%;z-index:2;margin-top:4px;pointer-events:none;transform:translateX(-50%)}.bp-WaveformView-hover--tape{top:-24px;left:50%;z-index:5;margin-top:0;transform:translate(-50%, -50%)}.bp-WaveformView-hoverTime{padding:4px 10px;color:#fff;font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;white-space:nowrap;background:rgba(34,34,34,.92);border:1px solid rgba(255,255,255,.18);border-radius:8px}.bp-WaveformView--inert{pointer-events:none}.bp-WaveformView--inert .bp-WaveformView-track{cursor:default}.bp-WaveformView--inert .bp-WaveformRange-handle{pointer-events:none;cursor:default}.bp-WaveformView:not(:hover) .bp-WaveformRange:not(.bp-WaveformRange--persist){opacity:.4}
+.bp-WaveformRange{position:absolute;inset:0;z-index:2;pointer-events:none}.bp-WaveformRange-region{position:absolute;top:50%;box-sizing:border-box;height:150px;pointer-events:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.4);border-radius:10px;box-shadow:0 0 0 1px #222;transform:translateY(-50%);transition:border-width 100ms ease,border-color 100ms ease}.bp-WaveformRange--highlight .bp-WaveformRange-region,.bp-WaveformRange:has(.bp-WaveformRange-handle:hover) .bp-WaveformRange-region,.bp-WaveformRange:has(.bp-WaveformRange-handle--dragging) .bp-WaveformRange-region{border-width:2px;border-color:#fff}.bp-WaveformRange-handle{position:absolute;top:50%;z-index:1;width:24px;height:150px;pointer-events:auto;cursor:ew-resize;touch-action:none;transform:translate(-50%, -50%)}.bp-WaveformRange-handle--end{z-index:2}.bp-WaveformRange-handleGrip{position:absolute;top:50%;left:50%;width:8px;height:20px;background:#fff;border:1px solid #222;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform:translate(-50%, -50%) scale(0.5);transition:opacity 100ms ease-in,transform 100ms ease-in}.bp-WaveformRange-handle:hover .bp-WaveformRange-handleGrip,.bp-WaveformRange-handle:focus-visible .bp-WaveformRange-handleGrip,.bp-WaveformRange-handle--dragging .bp-WaveformRange-handleGrip{opacity:1;transform:translate(-50%, -50%) scale(1);transition:opacity 150ms ease-out,transform 150ms ease-out}.bp-WaveformRange-comment{position:absolute;top:calc(50% - 75px);z-index:5;display:inline-flex;gap:8px;align-items:center;justify-content:center;box-sizing:border-box;height:48px;padding:8px 14px;color:rgba(255,255,255,.8);font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:22px;letter-spacing:.1px;white-space:nowrap;background:rgba(0,0,0,.8);border:0;backdrop-filter:blur(12px);border-radius:46px;box-shadow:0 2px 4px 0 rgba(0,0,0,.12);transform:translate(-50%, calc(-100% - 36px));cursor:pointer;appearance:none;pointer-events:auto}.bp-WaveformRange-commentIcon{display:block;flex:0 0 auto;width:20px;height:20px}.bp-WaveformView--tape .bp-WaveformRange-comment{top:calc(50% - (100% + 10px) / 2)}.bp-WaveformRange-tooltip{position:absolute;top:100%;z-index:3;margin-top:4px;pointer-events:none;transform:translateX(-50%)}.bp-WaveformRange-tooltipTime{padding:4px 10px;color:#fff;font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;white-space:nowrap;background:rgba(34,34,34,.92);border:1px solid rgba(255,255,255,.18);border-radius:8px}@media(prefers-reduced-motion: reduce){.bp-WaveformRange-region,.bp-WaveformRange-handleGrip{transition:none}}
+.bp-WaveformView{box-sizing:border-box;width:100%;height:206px;min-height:206px;padding:0 60px;overflow:visible;background:none;-webkit-tap-highlight-color:transparent}.bp-WaveformView.bp-WaveformView--zoomed,.bp-WaveformView.bp-WaveformView--tape{padding:0;touch-action:none}.bp-WaveformView.bp-WaveformView--zoomed .bp-WaveformView-canvas,.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas{overflow:hidden;mask-image:linear-gradient(to right, transparent, #000 92px, #000 calc(100% - 92px), transparent)}.bp-WaveformView.bp-WaveformView--zoomed .bp-WaveformView-canvas>*::part(scroll),.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas>*::part(scroll){overscroll-behavior-x:none}.bp-WaveformView.bp-WaveformView--tape{flex:1 1 auto;height:100%;min-height:0}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas{height:100%}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas>*::part(scroll){scrollbar-width:none}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-playhead,.bp-WaveformView.bp-WaveformView--tape .bp-WaveformRange-region,.bp-WaveformView.bp-WaveformView--tape .bp-WaveformRange-handle{height:calc(100% + 10px)}.bp-WaveformView-track{position:relative;display:flex;align-items:center;width:100%;height:100%;cursor:pointer}.bp-WaveformView-canvas{z-index:0;width:100%;height:140px}.bp-WaveformView-playhead{position:absolute;top:50%;left:0;z-index:1;width:2px;height:150px;pointer-events:none;background:linear-gradient(#2487ff, #006bed);border-radius:1px;box-shadow:0 0 0 1px #222,0 0 10px 0 rgba(36,135,255,.3);transform:translate(-50%, -50%)}.bp-WaveformView-hover{position:absolute;top:100%;z-index:2;margin-top:4px;pointer-events:none;transform:translateX(-50%)}.bp-WaveformView-hover--tape{top:-24px;left:50%;z-index:5;margin-top:0;transform:translate(-50%, -50%)}.bp-WaveformView-hoverTime{padding:4px 10px;color:#fff;font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;white-space:nowrap;background:rgba(34,34,34,.92);border:1px solid rgba(255,255,255,.18);border-radius:8px}.bp-WaveformView--inert{pointer-events:none}.bp-WaveformView--inert .bp-WaveformView-track{cursor:default}.bp-WaveformView--inert .bp-WaveformRange-handle,.bp-WaveformView--inert .bp-WaveformRange-comment{pointer-events:none;cursor:default}.bp-WaveformView:not(:hover) .bp-WaveformRange:not(.bp-WaveformRange--persist){opacity:.4}
 .bp-SliderControl{outline:0;position:relative;cursor:pointer}.bp-SliderControl:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-SliderControl:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-SliderControl:focus:not(:focus-visible){box-shadow:none}.bp-SliderControl-thumb{position:absolute;top:calc(50% - 6px);width:12px;height:12px;margin-left:-6px;background:#0061d5;border:0;border-radius:12px;cursor:pointer}.bp-SliderControl-track{position:absolute;inset:0;height:3px;margin:auto 3px;background:transparent linear-gradient(#fff, #fff) no-repeat center border-box}
 .bp-WaveformZoomControl{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:flex-end;width:48px;height:48px;padding:4px;overflow:hidden;background:rgba(255,255,255,.1);border-radius:32px;box-shadow:0 2px 12px rgba(0,0,0,.08);backdrop-filter:blur(60px);transition:width 150ms ease-out,gap 150ms ease-out}.bp-WaveformZoomControl.bp-has-multiplier{padding:4px 4px 4px 12px}.bp-WaveformZoomControl.bp-has-multiplier:not(.bp-is-open){width:88px}.bp-WaveformZoomControl.bp-is-open{gap:8px;width:207px}.bp-WaveformZoomControl.bp-is-open.bp-has-multiplier{width:264px}.bp-WaveformZoomControl-multiplier{display:flex;flex:0 0 32px;order:-3;align-items:center;justify-content:center;width:32px;height:32px;color:#fff;font-weight:500;font-size:14px;line-height:22px;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}.bp-WaveformZoomControl-divider{display:none;flex:0 0 1px;order:-2;width:1px;height:28px;background:rgba(255,255,255,.3)}.bp-WaveformZoomControl.bp-is-open.bp-has-multiplier .bp-WaveformZoomControl-divider{display:block}.bp-WaveformZoomControl-flyout{display:flex;flex:0 0 auto;order:-1;gap:8px;align-items:center;width:0;height:40px;overflow:hidden;transition:width 150ms ease-out}.bp-WaveformZoomControl-flyout.bp-is-open{width:151px}.bp-WaveformZoomControl-slider{width:103px;height:8px}.bp-WaveformZoomControl-slider .bp-SliderControl-track{height:8px;margin:0;background:rgba(255,255,255,.3);background-image:none;border-radius:20px}.bp-WaveformZoomControl-slider .bp-SliderControl-track::after{position:absolute;top:0;left:0;width:calc(8px + 95px * var(--bp-zoom-t, 0));height:8px;background:rgba(255,255,255,.9);border-radius:20px;content:""}.bp-WaveformZoomControl-slider .bp-SliderControl-thumb{display:none}.bp-WaveformZoomControl-button{position:relative;z-index:1;display:flex;flex:0 0 40px;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:#fff;background:transparent;border:0;border-radius:50%;cursor:pointer}.bp-WaveformZoomControl-button[aria-disabled=true]{cursor:default;opacity:.3}.bp-WaveformZoomControl-button svg{width:20px;height:20px;padding:0}@media(prefers-reduced-motion: reduce){.bp-WaveformZoomControl,.bp-WaveformZoomControl-flyout{transition:none}}
 .bp-MP3ControlsRoot:has(.bp-MP3ControlsV2){position:absolute;inset:0;width:100%;height:100%;transform:none;pointer-events:none}.bp-MP3ControlsV2{--bp-waveform-bar-min: 140px;position:relative;width:100%;max-width:none;height:100%;background:transparent;pointer-events:none}.bp-MP3ControlsV2-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:0;pointer-events:none}.bp-MP3ControlsV2-stage .bp-WaveformView,.bp-MP3ControlsV2-stage .bp-MP3ControlsV2-waveform,.bp-MP3ControlsV2-stage .bp-WaveformCommentMarkers{pointer-events:auto}.bp-MP3ControlsV2-waveform{position:relative;width:100%;overflow:visible}.bp-MP3ControlsV2-stage:has(.bp-WaveformView--tape) .bp-MP3ControlsV2-waveform{display:flex;flex-direction:column;height:max(var(--bp-waveform-bar-min, 140px), 25%);min-height:0}.bp-MP3ControlsV2-waveformZoom{position:absolute;top:48px;right:48px;z-index:6;pointer-events:none}.bp-MP3ControlsV2-waveformZoom .bp-WaveformZoomControl{pointer-events:auto}.bp-MP3ControlsV2-playOverlay{position:absolute;top:50%;left:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:80px;height:80px;padding:0;background:rgba(0,0,0,.5);border:0;border-radius:50%;transform:translate(-50%, -50%);cursor:pointer;pointer-events:auto}.bp-MP3ControlsV2-playOverlay svg{width:48px;height:48px;fill:#fff}.bp-MP3ControlsV2-stage .bp-media-buffering-spinner{z-index:2;pointer-events:none}.bp-MP3ControlsV2-bar{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;justify-content:space-between;min-height:32px;padding:30px 58px 25px;background:linear-gradient(to top, black, rgba(0, 0, 0, 0));pointer-events:auto}.bp-MP3ControlsV2-group{display:flex;gap:12px;align-items:center}.bp-MP3ControlsV2-divider{width:1px;height:24px;background-color:rgba(255,255,255,.1);border-radius:1px}.bp-MP3ControlsV2 .bp-MP3Controls-settings{position:relative}.bp-MP3ControlsV2 .bp-MP3Controls-settings .bp-SettingsFlyout{right:15px}.bp-MP3ControlsV2 .bp-MP3Controls-settings .bp-SettingsToggle-button{width:36px;height:40px}

package/dist/lib/index.js

@@ -1018,7 +1018,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
 const CLIENT_NAME_KEY = 'box_client_name';
 const CLIENT_VERSION_KEY = 'box_client_version';
-const CLIENT_VERSION = "3.93.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.94.0"; // eslint-disable-line no-undef
 const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
 const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
 const PROMISE_MAP = {};
@@ -4609,7 +4609,7 @@ function getPdfjsWorkerSrc() {
 
 /***/ },
 
-/***/ 673
+/***/ 8862
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 
@@ -5605,6 +5605,25 @@ function usePlayheadCamera({
     seekTo
   };
 }
+;// ./src/lib/viewers/controls/icons/IconComment24.tsx
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function IconComment24(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", _extends({
+    "data-testid": "IconComment24",
+    fill: "none",
+    focusable: false,
+    height: 24,
+    viewBox: "0 0 24 24",
+    width: 24
+  }, props), /*#__PURE__*/external_react_.createElement("path", {
+    clipRule: "evenodd",
+    d: "M4 11c0-2.297.683-3.999 1.926-5.138C7.18 4.712 9.155 4 12 4c2.845 0 4.819.711 6.074 1.862C19.317 7.001 20 8.702 20 11c0 2.297-.683 3.999-1.926 5.138C16.82 17.288 14.845 18 12 18h-.459a1.1 1.1 0 0 0-.774.318C9.665 19.41 8.243 20.048 7.16 20.2c-.553.078-.905.013-1.07-.065C6 20.09 6 20.084 6 20V20c0-.22.072-.347.361-.813.285-.458.665-1.104.685-2.104a1.1 1.1 0 0 0-.606-1.005C4.885 15.298 4 13.745 4 11Zm8-9c-3.155 0-5.681.789-7.426 2.388C2.817 5.999 2 8.298 2 11c0 2.938.91 5.227 2.966 6.539a2.79 2.79 0 0 1-.303.592l-.055.088C4.372 18.591 4 19.18 4 20c0 .912.496 1.59 1.23 1.94.657.313 1.453.345 2.205.24 1.428-.2 3.108-.95 4.464-2.18H12c3.155 0 5.681-.789 7.426-2.388C21.183 16.001 22 13.702 22 11c0-2.703-.817-5.001-2.574-6.612C17.68 2.788 15.155 2 12 2ZM8 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm5-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+}
+/* harmony default export */ const icons_IconComment24 = (IconComment24);
 ;// ./src/lib/viewers/media/waveform/WaveformRangeSelection.scss
 // extracted by mini-css-extract-plugin
 
@@ -5615,6 +5634,7 @@ function usePlayheadCamera({
 
 
 
+
 function offsetLeftCss(base, offsetPx) {
   if (!offsetPx) {
     return base;
@@ -5651,6 +5671,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   interactive = true,
   isHighlighted = false,
   keepHighlight = true,
+  onDragCreate,
   onDragChange,
   onPreviewChange,
   onRangeChange,
@@ -5662,6 +5683,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   const startHandleRef = (0,external_react_.useRef)(null);
   const endHandleRef = (0,external_react_.useRef)(null);
   const tooltipRef = (0,external_react_.useRef)(null);
+  const commentRef = (0,external_react_.useRef)(null);
   const dragRef = (0,external_react_.useRef)(null);
   const rangeRef = (0,external_react_.useRef)(range);
   const displayedRef = (0,external_react_.useRef)((0,waveform_range/* resolveRange */.Ss)(range, (0,waveform_range/* durationMsFromSec */.uH)(durationSec)));
@@ -5684,6 +5706,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   const durationMs = (0,waveform_range/* durationMsFromSec */.uH)(durationSec);
   const displayed = dragRange ?? (0,waveform_range/* resolveRange */.Ss)(range, durationMs);
   displayedRef.current = displayed;
+  const showCommentButton = Boolean(onDragCreate) && displayed.startMs !== displayed.endMs && activeHandle == null;
   const syncPositions = (0,external_react_.useCallback)((next, nextViewport, nextDurationSec) => {
     displayedRef.current = next;
     const collapsed = next.startMs === next.endMs;
@@ -5696,6 +5719,10 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
       const tooltipMs = tooltipHandle === 'start' ? next.startMs : next.endMs;
       tooltip.style.left = (0,waveform_viewport/* timeLeftPercent */.Mu)(tooltipMs / 1000, nextDurationSec, nextViewport);
     }
+    const comment = commentRef.current;
+    if (comment && next.startMs !== next.endMs) {
+      comment.style.left = (0,waveform_viewport/* timeLeftPercent */.Mu)((next.startMs + next.endMs) / 2000, nextDurationSec, nextViewport);
+    }
   }, []);
   (0,external_react_.useImperativeHandle)(ref, () => ({
     applyViewport: nextViewport => {
@@ -5705,7 +5732,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   }), [syncPositions]);
   (0,external_react_.useLayoutEffect)(() => {
     syncPositions(displayedRef.current, viewportRef.current, durationSec);
-  }, [activeHandle, displayed.endMs, displayed.startMs, durationSec, syncPositions]);
+  }, [activeHandle, displayed.endMs, displayed.startMs, durationSec, showCommentButton, syncPositions]);
   (0,external_react_.useLayoutEffect)(() => {
     const next = (0,waveform_viewport/* createWaveformViewport */.eq)({
       durationSec: viewport.durationSec,
@@ -5871,6 +5898,22 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   const tooltipMs = tooltipHandle === 'start' ? displayed.startMs : displayed.endMs;
   const collapsed = displayed.startMs === displayed.endMs;
   const highlight = isHighlighted || collapsed;
+  const commentButton = showCommentButton && onDragCreate ? /*#__PURE__*/external_react_["default"].createElement("button", {
+    ref: commentRef,
+    className: "bp-WaveformRange-comment",
+    "data-testid": "bp-waveform-range-comment",
+    onClick: event => {
+      event.stopPropagation();
+      onDragCreate();
+    },
+    onPointerDown: event => {
+      event.stopPropagation();
+    },
+    type: "button"
+  }, /*#__PURE__*/external_react_["default"].createElement(icons_IconComment24, {
+    "aria-hidden": "true",
+    className: "bp-WaveformRange-commentIcon"
+  }), "Comment") : null;
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: rootRef,
     className: `bp-WaveformRange${keepHighlight ? ' bp-WaveformRange--persist' : ''}${highlight ? ' bp-WaveformRange--highlight' : ''}`,
@@ -5903,7 +5946,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     "data-testid": "bp-waveform-range-tooltip"
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformRange-tooltipTime"
-  }, formatTime(tooltipMs / 1000))));
+  }, formatTime(tooltipMs / 1000))), commentButton);
 });
 /* harmony default export */ const waveform_WaveformRangeSelection = (/*#__PURE__*/external_react_["default"].memo(WaveformRangeSelection));
 ;// ./src/lib/viewers/media/waveform/WaveformView.scss
@@ -6023,6 +6066,46 @@ function zoomOriginAtPointer(pointerX, wavesurfer, durationSec, fallbackWidth) {
     timeSec: (WaveformView_getScrollLeft(wavesurfer) + pointerX) / fullWidth * durationSec
   };
 }
+/** Null when the press should stay a click-to-seek or is not on an empty span of the track. */
+function rangeCreateDragFromEvent(event, source) {
+  const {
+    track
+  } = source;
+  if (!track || !(source.durationSec > 0) || !Number.isFinite(event.clientX)) {
+    return null;
+  }
+  const rect = track.getBoundingClientRect();
+  if (!(rect.width > 0)) {
+    return null;
+  }
+  const pointerX = event.clientX - rect.left;
+  if (source.range && !(0,waveform_range/* isRangeCollapsed */.BT)(source.range) && (0,waveform_range/* isPointerOverRange */.H5)({
+    pointerX,
+    range: source.range,
+    viewport: source.viewport
+  })) {
+    return null;
+  }
+  return {
+    active: false,
+    originMs: (0,waveform_range/* clampTimeMs */.DL)((0,waveform_range/* pointerTimeMs */.v2)(pointerX, source.viewport), (0,waveform_range/* durationMsFromSec */.uH)(source.durationSec)),
+    originX: event.clientX,
+    pointerId: event.pointerId,
+    range: null
+  };
+}
+function drawnRangeFromMove(drag, clientX, track, viewport, playheadSec, durationSec) {
+  const pointerMs = (0,waveform_range/* snapTimeMs */.Mh)({
+    pixelsPerSecond: viewport.pixelsPerSecond,
+    playheadMs: playheadSec * 1000,
+    timeMs: (0,waveform_range/* pointerTimeMs */.v2)(clientX - track.getBoundingClientRect().left, viewport)
+  });
+  return (0,waveform_range/* rangeFromCreateDrag */.Qp)({
+    durationMs: (0,waveform_range/* durationMsFromSec */.uH)(durationSec),
+    originMs: drag.originMs,
+    pointerMs
+  });
+}
 
 /**
  * Renders V1 peaks with wavesurfer. Does not fetch audio or attach a media element.
@@ -6039,6 +6122,7 @@ function WaveformView({
   onPlayPause,
   onRangeChange,
   onRangeClear,
+  onRangeDragCreate,
   onRangeDragChange,
   onSeek,
   onViewportChange,
@@ -6065,7 +6149,9 @@ function WaveformView({
   const mediaElRef = (0,external_react_.useRef)(mediaEl); // latest <audio>/<video>; camera + playhead tick read this
   const onPlayPauseRef = (0,external_react_.useRef)(onPlayPause); // latest play/pause; tape tap must not re-bind
   const onSeekRef = (0,external_react_.useRef)(onSeek); // latest onSeek; click/scroll handlers must not re-bind
+  const onRangeChangeRef = (0,external_react_.useRef)(onRangeChange); // latest range commit; drag-create must not re-bind
   const onRangeClearRef = (0,external_react_.useRef)(onRangeClear); // latest click-outside clear; WaveSurfer click must not re-bind
+  const onRangeDragChangeRef = (0,external_react_.useRef)(onRangeDragChange); // latest drag flag; unmount must not re-bind
   const onViewportChangeRef = (0,external_react_.useRef)(onViewportChange); // latest viewport callback; camera commits here
   const peaksRef = (0,external_react_.useRef)(peaks); // latest peaks; WaveSurfer create() + morph read this
 
@@ -6098,7 +6184,9 @@ function WaveformView({
   mediaElRef.current = mediaEl;
   onPlayPauseRef.current = onPlayPause;
   onSeekRef.current = onSeek;
+  onRangeChangeRef.current = onRangeChange;
   onRangeClearRef.current = onRangeClear;
+  onRangeDragChangeRef.current = onRangeDragChange;
   onViewportChangeRef.current = onViewportChange;
   peaksRef.current = peaks;
   const [internalZoom, setInternalZoom] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
@@ -6108,8 +6196,12 @@ function WaveformView({
   const [canvasWidthPx, setCanvasWidthPx] = (0,external_react_.useState)(0);
   const [scrollLeft, setScrollLeft] = (0,external_react_.useState)(0);
   const [previewRange, setPreviewRange] = (0,external_react_.useState)(null);
+  const [createRange, setCreateRange] = (0,external_react_.useState)(null);
   const [isRangeDragging, setIsRangeDragging] = (0,external_react_.useState)(false);
   const isRangeDraggingRef = (0,external_react_.useRef)(false);
+  const rangeRef = (0,external_react_.useRef)(range); // latest committed draft; drag-create must not start on top of an open span
+  const createDragRef = (0,external_react_.useRef)(null);
+  const removeCreateDragListenersRef = (0,external_react_.useRef)(null);
   const skipNextSeekRef = (0,external_react_.useRef)(false);
   const lastSetTimeSecRef = (0,external_react_.useRef)(null);
   const [isRangeHovered, setIsRangeHovered] = (0,external_react_.useState)(false);
@@ -6130,7 +6222,8 @@ function WaveformView({
   const bufferProgress = getBufferedProgress(bufferedRange, durationSec);
   bufferProgressRef.current = bufferProgress;
   hoverProgressRef.current = isRangeDragging ? null : hoverProgress;
-  const activeRange = isRangeDragging ? previewRange ?? range : range;
+  rangeRef.current = range;
+  const activeRange = (isRangeDragging ? previewRange ?? createRange : createRange) ?? range;
   const activeRangeRef = (0,external_react_.useRef)(activeRange);
   activeRangeRef.current = activeRange;
   const durationMs = (0,waveform_range/* durationMsFromSec */.uH)(durationSec);
@@ -6755,12 +6848,104 @@ function WaveformView({
   const getPlayheadSec = (0,external_react_.useCallback)(() => {
     return mediaElRef.current ? mediaElRef.current.currentTime : currentTimeRef.current;
   }, []);
+  (0,external_react_.useEffect)(() => {
+    return () => {
+      removeCreateDragListenersRef.current?.();
+      if (createDragRef.current?.active) {
+        createDragRef.current = null;
+        onRangeDragChangeRef.current?.(false);
+      }
+    };
+  }, []);
+  (0,external_react_.useLayoutEffect)(() => {
+    if (isRangeDraggingRef.current) {
+      return;
+    }
+    setCreateRange(current => current == null ? current : null);
+  }, [range]);
+  const onTrackPointerDown = (0,external_react_.useCallback)(event => {
+    if (cameraModeRef.current === 'tape' || !interactiveRef.current || event.button > 0 || event.ctrlKey || event.metaKey || isRangeDraggingRef.current || createDragRef.current) {
+      return;
+    }
+    const {
+      target
+    } = event;
+    if (target instanceof Element && target.closest('[data-testid="bp-waveform-range-handle-start"], [data-testid="bp-waveform-range-handle-end"], [data-testid="bp-waveform-range-comment"]')) {
+      return;
+    }
+    const drag = rangeCreateDragFromEvent(event, {
+      durationSec: durationSecRef.current,
+      range: rangeRef.current,
+      track: trackRef.current,
+      viewport: viewportRef.current
+    });
+    if (!drag) {
+      return;
+    }
+    createDragRef.current = drag;
+    const onMove = moveEvent => {
+      if (createDragRef.current !== drag || moveEvent.pointerId !== drag.pointerId) {
+        return;
+      }
+      if (!Number.isFinite(moveEvent.clientX)) {
+        return;
+      }
+      if (!drag.active && Math.abs(moveEvent.clientX - drag.originX) < constants/* WAVEFORM_RANGE_CREATE_DRAG_PX */.B4) {
+        return;
+      }
+      const track = trackRef.current;
+      if (!track) {
+        return;
+      }
+      moveEvent.preventDefault();
+      const playheadSec = mediaElRef.current ? mediaElRef.current.currentTime : currentTimeRef.current;
+      drag.range = drawnRangeFromMove(drag, moveEvent.clientX, track, viewportRef.current, playheadSec, durationSecRef.current);
+      if (!drag.active) {
+        drag.active = true;
+        handleRangeDragChange(true);
+      }
+      setCreateRange(drag.range);
+      setPreviewRange(drag.range);
+    };
+    let onUp = () => undefined;
+    const removeListeners = () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      if (removeCreateDragListenersRef.current === removeListeners) {
+        removeCreateDragListenersRef.current = null;
+      }
+    };
+    onUp = upEvent => {
+      if (createDragRef.current !== drag || upEvent.pointerId && upEvent.pointerId !== drag.pointerId) {
+        return;
+      }
+      const wasActive = drag.active;
+      const drawn = drag.range;
+      createDragRef.current = null;
+      removeListeners();
+      if (!wasActive || !drawn) {
+        return;
+      }
+      const committed = (0,waveform_range/* commitRangeChange */.dG)(drawn);
+      if (committed) {
+        setCreateRange(committed);
+        onRangeChangeRef.current?.(committed);
+      }
+      handleRangeDragChange(false);
+    };
+    removeCreateDragListenersRef.current = removeListeners;
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+  }, [handleRangeDragChange]);
   const bindOverlayPortalHost = (0,external_react_.useCallback)(node => {
     const host = node?.parentElement ?? null;
     setOverlayPortalHost(prev => prev === host ? prev : host);
   }, []);
   const hoverLeft = isRangeDragging || hoverProgress == null ? null : (0,waveform_viewport/* timeLeftPercent */.Mu)(hoverProgress * durationSec, durationSec, viewportRef.current);
-  const showRangeOverlay = Boolean(range) && (isRangeDragging || !isPlaying || !(0,waveform_range/* isRangeCollapsed */.BT)(range));
+  const overlayRange = createRange ?? range;
+  const showRangeOverlay = Boolean(overlayRange) && (isRangeDragging || !isPlaying || !(0,waveform_range/* isRangeCollapsed */.BT)(overlayRange));
   const scrubTimeChip = isTape && scrubPreviewTimeSec != null ? /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformView-hover bp-WaveformView-hover--tape",
     "data-testid": "bp-waveform-hover"
@@ -6781,6 +6966,7 @@ function WaveformView({
     className: "bp-WaveformView-track",
     onMouseLeave: interactive && !isTape ? onHoverLeave : undefined,
     onMouseMove: interactive && !isTape ? onHoverMove : undefined,
+    onPointerDown: onTrackPointerDown,
     onPointerMove: interactive && !isTape ? event => {
       if (event.pointerType === 'touch') {
         onHoverLeave();
@@ -6802,7 +6988,7 @@ function WaveformView({
     "aria-hidden": "true",
     className: "bp-WaveformView-playhead",
     "data-testid": "bp-waveform-playhead"
-  }), showRangeOverlay && range && /*#__PURE__*/external_react_["default"].createElement(waveform_WaveformRangeSelection, {
+  }), showRangeOverlay && overlayRange && /*#__PURE__*/external_react_["default"].createElement(waveform_WaveformRangeSelection, {
     ref: rangeLayerRef,
     currentTimeSec: currentTime,
     durationSec: durationSec,
@@ -6811,9 +6997,10 @@ function WaveformView({
     isHighlighted: isRangeDragging || isRangeHovered,
     keepHighlight: true,
     onDragChange: handleRangeDragChange,
+    onDragCreate: interactive && !isRangeDragging ? onRangeDragCreate : undefined,
     onPreviewChange: setPreviewRange,
     onRangeChange: interactive ? onRangeChange : undefined,
-    range: range,
+    range: overlayRange,
     viewport: viewport
   }), hoverLeft != null && hoverProgress != null && !isRangeDragging && /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformView-hover",
@@ -7080,6 +7267,7 @@ function MP3ControlsV2({
   onCommentMarkerClick,
   onCommentRangeChange,
   onCommentRangeClear,
+  onCommentRangeDragCreate,
   onCommentRangeDragChange,
   onMuteChange,
   onPlayPause,
@@ -7212,6 +7400,7 @@ function MP3ControlsV2({
     onRangeChange: isWaveformInteractive ? onCommentRangeChange : undefined,
     onRangeClear: isWaveformInteractive ? onCommentRangeClear : undefined,
     onRangeDragChange: onCommentRangeDragChange,
+    onRangeDragCreate: isWaveformInteractive ? onCommentRangeDragCreate : undefined,
     onSeek: isWaveformInteractive ? onTimeChange : undefined,
     onViewportChange: hasRealPeaks ? handleViewportChange : undefined,
     onZoomChange: hasZoomHandlers ? handleWaveformZoom : undefined,
@@ -7354,6 +7543,7 @@ function isFpsAvailable(player) {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   Av: () => (/* binding */ WAVEFORM_TAPE_DEFAULT_WINDOW_SEC),
+/* harmony export */   B4: () => (/* binding */ WAVEFORM_RANGE_CREATE_DRAG_PX),
 /* harmony export */   BG: () => (/* binding */ WAVEFORM_RANGE_COLLAPSED_OFFSET_PX),
 /* harmony export */   Bq: () => (/* binding */ WAVEFORM_PLAYHEAD_JUMP_MS),
 /* harmony export */   DY: () => (/* binding */ WAVEFORM_BAR_RADIUS),
@@ -7450,6 +7640,8 @@ const WAVEFORM_RANGE_COLLAPSED_OFFSET_PX = WAVEFORM_RANGE_HANDLE_LINE_PX / 2 + W
 const WAVEFORM_RANGE_SNAP_PX = 8;
 /** Shortest committed range. Collapsed drafts (`endMs: null`) are exempt. */
 const WAVEFORM_RANGE_MIN_DURATION_MS = 250;
+/** Pointer travel before a waveform press becomes a new draft range. Shorter presses stay click-to-seek. */
+const WAVEFORM_RANGE_CREATE_DRAG_PX = 4;
 const WAVEFORM_RANGE_GRIP_IN_MS = 150;
 const WAVEFORM_RANGE_GRIP_OUT_MS = 100;
 
@@ -8013,17 +8205,18 @@ function loadPeaks(request) {
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   BT: () => (/* binding */ isRangeCollapsed),
 /* harmony export */   D$: () => (/* binding */ rangeProgress),
+/* harmony export */   DL: () => (/* binding */ clampTimeMs),
 /* harmony export */   Eh: () => (/* binding */ visualRangeHandlePx),
 /* harmony export */   H5: () => (/* binding */ isPointerOverRange),
 /* harmony export */   HG: () => (/* binding */ pickRangeHandle),
 /* harmony export */   Mh: () => (/* binding */ snapTimeMs),
 /* harmony export */   Mo: () => (/* binding */ dragRangeHandle),
+/* harmony export */   Qp: () => (/* binding */ rangeFromCreateDrag),
 /* harmony export */   Ss: () => (/* binding */ resolveRange),
 /* harmony export */   dG: () => (/* binding */ commitRangeChange),
 /* harmony export */   uH: () => (/* binding */ durationMsFromSec),
 /* harmony export */   v2: () => (/* binding */ pointerTimeMs)
 /* harmony export */ });
-/* unused harmony export clampTimeMs */
 /* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4929);
 /* harmony import */ var _viewport__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(772);
 
@@ -8210,6 +8403,28 @@ function commitRangeChange(range) {
     startMs: range.startMs
   };
 }
+
+/**
+ * Open a draft from a waveform drag. The press time stays anchored; the pointer
+ * chooses which edge moves. Enforces the minimum span once the drag leaves the point.
+ */
+function rangeFromCreateDrag({
+  durationMs,
+  originMs,
+  pointerMs
+}) {
+  const origin = clampTimeMs(originMs, durationMs);
+  const handle = pointerMs >= origin ? 'end' : 'start';
+  return dragRangeHandle({
+    durationMs,
+    handle,
+    pointerMs,
+    range: {
+      endMs: origin,
+      startMs: origin
+    }
+  }).range;
+}
 function rangeProgress(range, durationMs) {
   if (!(durationMs > 0) || range.endMs <= range.startMs) {
     return null;
@@ -24435,7 +24650,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.93.0";
+const CLIENT_VERSION = "3.94.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -33663,11 +33878,10 @@ class TextLoader extends viewers_AssetLoader {
 /* harmony default export */ const text_TextLoader = (new TextLoader());
 ;// ./src/lib/viewers/controls/media/types.ts
 /**
- * Draft range the activity sidebar is holding. Preview draws start/end handles
- * on the waveform until the sidebar sends `comment_range_draft_clear`.
- * The viewer emits `comment_range_draft_change` on pointer-up so the host
- * can persist the new timestamps, and `comment_range_draft_dismiss` when
- * the user clicks the waveform outside an open range. See media/README.md.
+ * Draft range drawn on the waveform. Sidebar sends `comment_range_draft`
+ * when checkbox is toggled on and Preview keeps the handles until
+ * `comment_range_draft_clear`. A waveform drag can also create a local draft
+ * before the timestamp toggle is on. See media/README.md.
  * `endMs: null` means a single timestamp — both handles sit on `startMs`.
  */
 
@@ -33679,12 +33893,22 @@ const EVENT_COMMENT_RANGE_DRAFT = 'comment_range_draft';
 /** Sidebar → viewer: hide the handles (toggle-off, post, version switch, unmount). */
 const EVENT_COMMENT_RANGE_DRAFT_CLEAR = 'comment_range_draft_clear';
 
-/** Viewer → sidebar: the user clicked the waveform outside an open draft range. */
+/** Viewer → sidebar: click outside an open range while the timestamp toggle is already on. */
 const EVENT_COMMENT_RANGE_DRAFT_DISMISS = 'comment_range_draft_dismiss';
 
-/** Viewer → sidebar: a handle drag finished. Emitted on pointer-up only. */
+/**
+ * Viewer → sidebar: a range edit finished while the timestamp toggle is already on.
+ * Pointer-up only. Not used to start commenting — that is `comment_range_compose`.
+ */
 const EVENT_COMMENT_RANGE_DRAFT_CHANGE = 'comment_range_draft_change';
 
+/**
+ * Viewer → sidebar: the user pressed Comment on a draft range.
+ * The host opens Activity if needed, checks the timestamp toggle, and adopts
+ * `{ startMs, endMs }` without echoing `comment_range_draft`.
+ */
+const EVENT_COMMENT_RANGE_DRAG_CREATE = 'comment_range_compose';
+
 /** True when a host draft can be shown. Collapsed drafts use `endMs: null`. */
 function isValidCommentRangeDraft(value) {
   if (!value || typeof value !== 'object') {
@@ -37342,6 +37566,22 @@ class MP3Viewer extends media_MediaBaseViewer {
       if (this.isCommentRangeDragging || !isValidCommentRangeDraft(draft)) {
         return;
       }
+      // Checkbox-on sends a collapsed playhead. A waveform-drawn span should
+      // become that timestamp value instead of collapsing back to the playhead.
+      const local = this.commentRangeDraft;
+      if (local && !(0,range/* isRangeCollapsed */.BT)(local) && draft.endMs == null) {
+        if (!this.isCommentRangeTimestampActive) {
+          this.isCommentRangeTimestampActive = true;
+          this.emit(EVENT_COMMENT_RANGE_DRAFT_CHANGE, {
+            endMs: local.endMs,
+            startMs: local.startMs
+          });
+        }
+        this.syncCommentRangeLoop();
+        this.renderUI();
+        return;
+      }
+      this.isCommentRangeTimestampActive = true;
       this.commentRangeDraft = {
         endMs: draft.endMs == null ? null : draft.endMs,
         startMs: draft.startMs
@@ -37352,6 +37592,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     MP3Viewer_defineProperty(this, "handleCommentRangeDraftClear", () => {
       this.commentRangeDraft = null;
       this.isCommentRangeDragging = false;
+      this.isCommentRangeTimestampActive = false;
       this.syncCommentRangeLoop();
       this.renderUI();
     });
@@ -37363,13 +37604,26 @@ class MP3Viewer extends media_MediaBaseViewer {
         endMs: range.endMs,
         startMs: range.startMs
       };
-      this.emit(EVENT_COMMENT_RANGE_DRAFT_CHANGE, {
-        endMs: range.endMs,
-        startMs: range.startMs
-      });
+      if (this.isCommentRangeTimestampActive) {
+        this.emit(EVENT_COMMENT_RANGE_DRAFT_CHANGE, {
+          endMs: range.endMs,
+          startMs: range.startMs
+        });
+      }
       this.syncCommentRangeLoop();
       this.renderUI();
     });
+    MP3Viewer_defineProperty(this, "handleCommentRangeDragCreate", () => {
+      const draft = this.commentRangeDraft;
+      if (!draft || (0,range/* isRangeCollapsed */.BT)(draft)) {
+        return;
+      }
+      this.isCommentRangeTimestampActive = true;
+      this.emit(EVENT_COMMENT_RANGE_DRAG_CREATE, {
+        endMs: draft.endMs,
+        startMs: draft.startMs
+      });
+    });
     MP3Viewer_defineProperty(this, "handleCommentRangeDragChange", isDragging => {
       this.isCommentRangeDragging = !!isDragging;
     });
@@ -37377,8 +37631,12 @@ class MP3Viewer extends media_MediaBaseViewer {
       if (!this.commentRangeDraft || this.commentRangeDraft.endMs == null) {
         return;
       }
+      const notifyHost = this.isCommentRangeTimestampActive;
       this.commentRangeDraft = null;
-      this.emit(EVENT_COMMENT_RANGE_DRAFT_DISMISS);
+      this.isCommentRangeTimestampActive = false;
+      if (notifyHost) {
+        this.emit(EVENT_COMMENT_RANGE_DRAFT_DISMISS);
+      }
       this.syncCommentRangeLoop();
       this.renderUI();
     });
@@ -37442,6 +37700,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.commentRangeDraft = null;
     this.hostSelectedMarkerId = null;
     this.isCommentRangeDragging = false;
+    this.isCommentRangeTimestampActive = false;
     this.shuttleDirection = null;
     this.shuttleRate = 0;
     this.reverseShuttleTimer = 0;
@@ -37729,7 +37988,7 @@ class MP3Viewer extends media_MediaBaseViewer {
    * @return {Promise<{ default: Function }>} MP3ControlsV2 module
    */
   importV2Controls() {
-    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 673));
+    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 8862));
   }
 
   /**
@@ -37757,6 +38016,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.removeListener(EVENT_COMMENT_RANGE_DRAFT_CLEAR, this.handleCommentRangeDraftClear);
     this.commentRangeDraft = null;
     this.isCommentRangeDragging = false;
+    this.isCommentRangeTimestampActive = false;
     this.stopReverseShuttle();
     this.shuttleDirection = null;
     this.shuttleRate = 0;
@@ -37772,6 +38032,7 @@ class MP3Viewer extends media_MediaBaseViewer {
       // A file-version switch is a clear, not a resync of the previous draft.
       this.commentRangeDraft = null;
       this.isCommentRangeDragging = false;
+      this.isCommentRangeTimestampActive = false;
       this.syncCommentRangeLoop();
       this.showAudioLoadingShell();
       this.startConversionWaveformLoad();
@@ -38396,6 +38657,7 @@ class MP3Viewer extends media_MediaBaseViewer {
         onCommentRangeChange: this.handleCommentRangeChange,
         onCommentRangeClear: this.handleCommentRangeClear,
         onCommentRangeDragChange: this.handleCommentRangeDragChange,
+        onCommentRangeDragCreate: this.handleCommentRangeDragCreate,
         onPlayNextChange: this.setPlayNext,
         peaks: this.waveformPeaks,
         playNext: this.isPlayNextEnabled()

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-content-preview",
-    "version": "3.93.0",
+    "version": "3.94.0",
     "description": "Box Content Preview UI Element",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",