box-content-preview 3.52.0 → 3.54.0

package/dist/lib/index.js

@@ -9340,7 +9340,7 @@ function util_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
 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.52.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.54.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 = {};
@@ -11065,7 +11065,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const Logger_CLIENT_NAME = "box-content-preview";
-const Logger_CLIENT_VERSION = "3.52.0";
+const Logger_CLIENT_VERSION = "3.54.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -27650,6 +27650,57 @@ function TimestampControl(_ref) {
     }));
   })));
 }
+;// ./src/lib/viewers/controls/media/utils.ts
+const utils_round = value => {
+  return +value.toFixed(4);
+};
+const utils_percent = (value1, value2) => {
+  return utils_round(value1 / value2 * 100);
+};
+;// ./src/lib/viewers/controls/media/buildClusters.ts
+
+
+/** Max pixel distance between adjacent markers (sorted by time) for them to be grouped into a single cluster. */
+const CLUSTER_THRESHOLD_PX = 2;
+
+/** Converts a group of markers into a ClusterData object with computed positions and metadata. */
+function finalizeCluster(group, durationValue) {
+  const leftPercent = utils_percent(group[0].time, durationValue);
+  const rightPercent = utils_percent(group[group.length - 1].time, durationValue);
+  const isSinglePoint = leftPercent === rightPercent;
+  return {
+    id: group.map(m => m.id).join('|'),
+    isSinglePoint,
+    leftPercent,
+    markers: group,
+    rightPercent
+  };
+}
+
+/**
+ * Groups comment markers into clusters based on their pixel proximity on the scrubber track.
+ * Markers are sorted by time, then chained: each marker that is within CLUSTER_THRESHOLD_PX
+ * of its neighbor joins the same cluster. This means distant markers can end up in one cluster
+ * if intermediate markers bridge the gap.
+ */
+function buildClusters(markers, durationValue, trackWidth) {
+  if (durationValue <= 0 || markers.length === 0 || trackWidth <= 0) return [];
+  const sorted = [...markers].sort((a, b) => a.time - b.time);
+  const clusters = [];
+  let currentGroup = [sorted[0]];
+  for (let i = 1; i < sorted.length; i += 1) {
+    const prevPx = sorted[i - 1].time / durationValue * trackWidth;
+    const currPx = sorted[i].time / durationValue * trackWidth;
+    if (currPx - prevPx <= CLUSTER_THRESHOLD_PX) {
+      currentGroup.push(sorted[i]);
+    } else {
+      clusters.push(finalizeCluster(currentGroup, durationValue));
+      currentGroup = [sorted[i]];
+    }
+  }
+  clusters.push(finalizeCluster(currentGroup, durationValue));
+  return clusters;
+}
 ;// ./src/lib/viewers/controls/media/FilmstripV2.scss
 // extracted by mini-css-extract-plugin
 
@@ -27805,6 +27856,118 @@ function MarkerAvatar(_ref) {
     } : undefined
   }, avatar);
 }
+;// ./src/lib/viewers/controls/media/MarkerAvatarStack.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/media/MarkerAvatarStack.tsx
+
+
+
+const MAX_VISIBLE_AVATARS = 4;
+function MarkerAvatarStack(_ref) {
+  let {
+    markers,
+    onMarkerClick
+  } = _ref;
+  const hasOverflow = markers.length > MAX_VISIBLE_AVATARS;
+  const visibleMarkers = hasOverflow ? markers.slice(0, MAX_VISIBLE_AVATARS - 1) : markers;
+  return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
+    className: "bp-MarkerAvatarStack"
+  }, visibleMarkers.map(marker => /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
+    key: marker.id,
+    className: "bp-MarkerAvatarStack-item",
+    onClick: e => {
+      e.stopPropagation();
+      onMarkerClick?.(marker);
+    },
+    type: "button"
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatar, {
+    avatarUrl: marker.avatarUrl,
+    colorIndex: marker.colorIndex,
+    initial: marker.initial
+  }))), hasOverflow && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
+    className: "bp-MarkerAvatarStack-item bp-MarkerAvatarStack-overflow",
+    onClick: e => {
+      e.stopPropagation();
+      onMarkerClick?.(markers[MAX_VISIBLE_AVATARS - 1]);
+    },
+    type: "button"
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
+    className: "bp-MarkerAvatar bp-MarkerAvatarStack-overflowBadge"
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
+    className: "bp-MarkerAvatar-initial"
+  }, "+", markers.length - (MAX_VISIBLE_AVATARS - 1)))));
+}
+;// ./src/lib/viewers/controls/media/MarkerCluster.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/media/MarkerCluster.tsx
+
+
+
+function MarkerCluster(_ref) {
+  let {
+    cluster,
+    onMarkerClick
+  } = _ref;
+  const {
+    markers,
+    leftPercent,
+    rightPercent
+  } = cluster;
+  const style = {
+    left: `${leftPercent}%`,
+    width: `calc(${rightPercent - leftPercent}% + 4px)`
+  };
+  return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: "bp-MarkerCluster",
+    "data-testid": "bp-marker-cluster",
+    style: style
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
+    "aria-label": "Comment marker",
+    className: "bp-MarkerCluster-tick",
+    onClick: e => {
+      e.stopPropagation();
+      onMarkerClick?.(markers[0]);
+    },
+    type: "button"
+  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatarStack, {
+    markers: markers,
+    onMarkerClick: onMarkerClick
+  }));
+}
+;// ./src/lib/viewers/controls/media/MarkerTick.tsx
+
+
+
+function MarkerTick(_ref) {
+  let {
+    markers,
+    onMarkerClick,
+    position
+  } = _ref;
+  const isGroup = markers.length > 1;
+  return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
+    "aria-label": "Comment marker",
+    className: `bp-TimeControlsV2-marker${isGroup ? ' bp-TimeControlsV2-marker--group' : ''}`,
+    "data-testid": "bp-time-controls-marker",
+    onClick: e => {
+      e.stopPropagation();
+      onMarkerClick?.(markers[0]);
+    },
+    style: {
+      left: `${position}%`
+    },
+    type: "button"
+  }, isGroup ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatarStack, {
+    markers: markers,
+    onMarkerClick: onMarkerClick
+  }) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatar, {
+    avatarUrl: markers[0].avatarUrl,
+    colorIndex: markers[0].colorIndex,
+    initial: markers[0].initial
+  }));
+}
 ;// ./src/lib/viewers/controls/media/TimeControlsV2.scss
 // extracted by mini-css-extract-plugin
 
@@ -27817,12 +27980,9 @@ function MarkerAvatar(_ref) {
 
 
 
-const TimeControlsV2_round = value => {
-  return +value.toFixed(4);
-};
-const TimeControlsV2_percent = (value1, value2) => {
-  return TimeControlsV2_round(value1 / value2 * 100);
-};
+
+
+
 function TimeControlsV2(_ref) {
   let {
     aspectRatio,
@@ -27832,7 +27992,6 @@ function TimeControlsV2(_ref) {
     filmstripInterval,
     filmstripUrl,
     fps,
-    mediaEl,
     onCommentMarkerClick,
     onTimeChange
   } = _ref;
@@ -27840,26 +27999,45 @@ function TimeControlsV2(_ref) {
   const [hoverPosition, setHoverPosition] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
   const [hoverPositionMax, setHoverPositionMax] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
   const [hoverTime, setHoverTime] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
+  const [trackWidth, setTrackWidth] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
+  const scrubberRef = __WEBPACK_EXTERNAL_MODULE_react_default__.useRef(null);
   const currentValue = isFinite_default()(currentTime) ? currentTime : 0;
   const durationValue = isFinite_default()(durationTime) ? durationTime : 0;
-  const currentPercentage = TimeControlsV2_percent(currentValue, durationValue);
-  const markerTimesKey = commentMarkers.map(m => m.time).join('|');
+  const currentPercentage = utils_percent(currentValue, durationValue);
+  __WEBPACK_EXTERNAL_MODULE_react_default__.useLayoutEffect(() => {
+    const el = scrubberRef.current;
+    if (!el) return undefined;
+    setTrackWidth(el.clientWidth);
+    const observer = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        setTrackWidth(entry.contentRect.width);
+      });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const clusters = __WEBPACK_EXTERNAL_MODULE_react_default__.useMemo(() => buildClusters(commentMarkers, durationValue, trackWidth), [commentMarkers, durationValue, trackWidth]);
   const trackMask = __WEBPACK_EXTERNAL_MODULE_react_default__.useMemo(() => {
-    if (durationValue <= 0 || commentMarkers.length === 0) return undefined;
+    if (durationValue <= 0 || clusters.length === 0) return undefined;
     const HALF_GAP = 2;
     const stops = [];
-    const sorted = commentMarkers.map(m => TimeControlsV2_percent(m.time, durationValue)).sort((a, b) => a - b);
     stops.push('black 0%');
-    sorted.forEach(pos => {
-      stops.push(`black calc(${pos}% - ${HALF_GAP}px)`);
-      stops.push(`transparent calc(${pos}% - ${HALF_GAP}px)`);
-      stops.push(`transparent calc(${pos}% + ${HALF_GAP}px)`);
-      stops.push(`black calc(${pos}% + ${HALF_GAP}px)`);
+    clusters.forEach(_ref2 => {
+      let {
+        leftPercent,
+        rightPercent
+      } = _ref2;
+      const isRange = leftPercent !== rightPercent;
+      const leftPad = isRange ? HALF_GAP + 1 : HALF_GAP;
+      const rightPad = isRange ? HALF_GAP + 1 : HALF_GAP;
+      stops.push(`black calc(${leftPercent}% - ${leftPad}px)`);
+      stops.push(`transparent calc(${leftPercent}% - ${leftPad}px)`);
+      stops.push(`transparent calc(${rightPercent}% + ${rightPad}px)`);
+      stops.push(`black calc(${rightPercent}% + ${rightPad}px)`);
     });
     stops.push('black 100%');
     return `linear-gradient(to right, ${stops.join(', ')})`;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [markerTimesKey, durationValue]);
+  }, [durationValue, clusters]);
   const handleMouseMove = (newTime, newPosition, width) => {
     setHoverPosition(newPosition);
     setHoverPositionMax(width);
@@ -27878,6 +28056,7 @@ function TimeControlsV2(_ref) {
     positionMax: hoverPositionMax,
     time: hoverTime
   }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    ref: scrubberRef,
     className: "bp-TimeControlsV2-scrubber",
     style: trackMask ? {
       '--bp-track-mask': trackMask
@@ -27897,24 +28076,16 @@ function TimeControlsV2(_ref) {
     title: "Media Slider",
     track: `linear-gradient(to right, ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_white__} calc(${currentPercentage}% - 2.5px), transparent calc(${currentPercentage}% - 2.5px), transparent calc(${currentPercentage}% + 2.5px), ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__} calc(${currentPercentage}% + 2.5px), ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__} 100%)`,
     value: currentValue
-  }), durationValue > 0 && commentMarkers.map(marker => /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
-    key: marker.id,
-    "aria-label": "Comment marker",
-    className: "bp-TimeControlsV2-marker",
-    "data-testid": "bp-time-controls-marker",
-    onClick: e => {
-      e.stopPropagation();
-      onCommentMarkerClick?.(marker);
-    },
-    style: {
-      left: `${TimeControlsV2_percent(marker.time, durationValue)}%`
-    },
-    type: "button"
-  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatar, {
-    avatarUrl: marker.avatarUrl,
-    colorIndex: marker.colorIndex,
-    initial: marker.initial
-  })))));
+  }), durationValue > 0 && clusters.map(cluster => cluster.isSinglePoint ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerTick, {
+    key: cluster.id,
+    markers: cluster.markers,
+    onMarkerClick: onCommentMarkerClick,
+    position: cluster.leftPercent
+  }) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerCluster, {
+    key: cluster.id,
+    cluster: cluster,
+    onMarkerClick: onCommentMarkerClick
+  }))));
 }
 ;// ./src/lib/viewers/controls/media/VideoFullscreenButton.scss
 // extracted by mini-css-extract-plugin
@@ -28068,7 +28239,6 @@ function VideoControlsV2(_ref) {
     filmstripInterval: filmstripInterval,
     filmstripUrl: filmstripUrl,
     fps: fps,
-    mediaEl: mediaEl,
     onCommentMarkerClick: onCommentMarkerClick,
     onTimeChange: onTimeChange
   }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
@@ -30951,116 +31121,557 @@ class DocFindBar extends (events_default()) {
   }
 }
 /* harmony default export */ const doc_DocFindBar = (DocFindBar);
-;// ./src/lib/viewers/gallery/GalleryGrid.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/lib/viewers/gallery/GalleryGrid.tsx
-function GalleryGrid_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 GalleryGrid_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? GalleryGrid_ownKeys(Object(t), !0).forEach(function (r) { GalleryGrid_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : GalleryGrid_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function GalleryGrid_defineProperty(e, r, t) { return (r = GalleryGrid_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function GalleryGrid_toPropertyKey(t) { var i = GalleryGrid_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function GalleryGrid_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); }
+;// ./src/lib/Cache.js
 
+class Cache {
+  //--------------------------------------------------------------------------
+  // Public
+  //--------------------------------------------------------------------------
 
+  /**
+   * [constructor]
+   *
+   * @return {Cache} Cache instance
+   */
+  constructor() {
+    this.cache = {};
+  }
 
-const GALLERY_THUMB_MAX_WIDTH = 440;
-const INITIAL_LOAD_BUFFER = 40;
-const CONCURRENT_LOADS = 4;
-const SCROLL_THROTTLE_MS = 200;
-function GalleryGrid(_ref) {
-  let {
-    pageCount,
-    currentPage,
-    onClose,
-    onFocusChange,
-    onPageNavigate,
-    thumbnail
-  } = _ref;
-  const [loadedImages, setLoadedImages] = __WEBPACK_EXTERNAL_MODULE_react_useState__({});
-  const [focusedPage, setFocusedPage] = __WEBPACK_EXTERNAL_MODULE_react_useState__(currentPage);
-  const gridRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(null);
-  const queueRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__([]);
-  const isProcessingRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(false);
-  const isMountedRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(true);
-  const initialLoadDoneRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(false);
-  const initialLoadCountRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(0);
-  function processQueue() {
-    if (!isMountedRef.current || !thumbnail || queueRef.current.length === 0) {
-      isProcessingRef.current = false;
-      return;
+  /**
+   * Caches a simple object in memory and in localStorage if specified.
+   * Note that objects cached in localStorage will be stringified.
+   *
+   * @public
+   * @param {string} key - The cache key
+   * @param {*} value - The cache value
+   * @param {boolean} useLocalStorage - Whether or not to use localStorage
+   * @return {void}
+   */
+  set(key, value, useLocalStorage) {
+    this.cache[key] = value;
+    if (useLocalStorage && this.isLocalStorageAvailable()) {
+      localStorage.setItem(this.generateKey(key), JSON.stringify(value));
     }
-    const batchSize = initialLoadDoneRef.current ? CONCURRENT_LOADS : 1;
-    const batch = queueRef.current.slice(0, batchSize);
-    queueRef.current = queueRef.current.slice(batchSize);
-    requestAnimationFrame(() => {
-      if (!isMountedRef.current || !thumbnail) {
-        isProcessingRef.current = false;
-        return;
-      }
-      let completed = 0;
-      const onComplete = () => {
-        completed += 1;
-        if (completed < batch.length) return;
-        if (!isMountedRef.current) {
-          isProcessingRef.current = false;
-          return;
-        }
-        if (!initialLoadDoneRef.current) {
-          initialLoadCountRef.current += batch.length;
-          if (initialLoadCountRef.current >= INITIAL_LOAD_BUFFER) {
-            initialLoadDoneRef.current = true;
-            isProcessingRef.current = false;
-            return;
-          }
-        }
-        processQueue();
-      };
-      batch.forEach(pageNum => {
-        thumbnail.createThumbnailImage(pageNum - 1, {
-          createImgTag: true,
-          thumbMaxWidth: GALLERY_THUMB_MAX_WIDTH
-        }).then(imageEl => {
-          if (isMountedRef.current && imageEl && imageEl.src) {
-            setLoadedImages(prev => GalleryGrid_objectSpread(GalleryGrid_objectSpread({}, prev), {}, {
-              [pageNum]: imageEl.src
-            }));
-          }
-          onComplete();
-        }).catch(() => {
-          onComplete();
-        });
-      });
-    });
   }
-  function startProcessing() {
-    if (!isProcessingRef.current && queueRef.current.length > 0) {
-      isProcessingRef.current = true;
-      processQueue();
+
+  /**
+   * Deletes object from in-memory cache and localStorage.
+   *
+   * @public
+   * @param {string} key - The cache key
+   * @return {void}
+   */
+  unset(key) {
+    if (this.isLocalStorageAvailable()) {
+      localStorage.removeItem(this.generateKey(key));
     }
+    delete this.cache[key];
   }
-  function getUnloadedNearViewport() {
-    const grid = gridRef.current;
-    if (!grid) return [];
-    const {
-      scrollTop,
-      clientHeight
-    } = grid;
-    const bufferZone = clientHeight * 3;
-    const viewportTop = scrollTop - bufferZone;
-    const viewportBottom = scrollTop + clientHeight + bufferZone;
-    const nearbyUnloaded = [];
-    const tiles = grid.querySelectorAll('[data-page]');
-    tiles.forEach(tile => {
-      const el = tile;
-      if (!el.dataset.page) return;
-      const pageNum = parseInt(el.dataset.page, 10);
-      const tileTop = el.offsetTop;
-      const tileBottom = tileTop + el.offsetHeight;
-      if (tileBottom > viewportTop && tileTop < viewportBottom && !el.querySelector('img')) {
-        nearbyUnloaded.push(pageNum);
-      }
-    });
-    return nearbyUnloaded;
+
+  /**
+   * Checks if cache has provided key.
+   *
+   * @public
+   * @param {string} key - The cache key
+   * @return {boolean} Whether the cache has key
+   */
+  has(key) {
+    return this.inCache(key) || this.inLocalStorage(key);
+  }
+
+  /**
+   * Fetches a cached object from in-memory cache if available. Otherwise
+   * tries to fetch from localStorage. If fetched from localStorage, object
+   * will be a JSON parsed object.
+   *
+   * @public
+   * @param {string} key - Key of cached object
+   * @return {Object} Cached object
+   */
+  get(key) {
+    if (this.inCache(key)) {
+      return this.cache[key];
+    }
+
+    // If localStorage is available, try to fetch from there and set it
+    // in in-memory cache if found
+    if (this.inLocalStorage(key)) {
+      let value = localStorage.getItem(this.generateKey(key));
+      if (value) {
+        value = JSON.parse(value);
+        this.cache[key] = value;
+        return value;
+      }
+    }
+    return undefined;
+  }
+
+  //--------------------------------------------------------------------------
+  // Private
+  //--------------------------------------------------------------------------
+
+  /**
+   * Checks if memory cache has provided key.
+   *
+   * @private
+   * @param {string} key - The cache key
+   * @return {boolean} Whether the cache has key
+   */
+  inCache(key) {
+    return {}.hasOwnProperty.call(this.cache, key);
+  }
+
+  /**
+   * Checks if memory cache has provided key.
+   *
+   * @private
+   * @param {string} key - The cache key
+   * @return {boolean} Whether the cache has key
+   */
+  inLocalStorage(key) {
+    if (!this.isLocalStorageAvailable()) {
+      return false;
+    }
+    return !!localStorage.getItem(this.generateKey(key));
+  }
+
+  /**
+   * Checks whether localStorage is available.
+   *
+   * @NOTE(tjin): This check is cached to not have to write/read from disk
+   * every time this check is needed, but this will not catch instances where
+   * localStorage was available the first time this is called, but becomes
+   * unavailable at a later time.
+   *
+   * @private
+   * @return {boolean} Whether or not localStorage is available or not.
+   */
+  isLocalStorageAvailable() {
+    if (this.available === undefined) {
+      this.available = isLocalStorageAvailable();
+    }
+    return this.available;
+  }
+
+  /**
+   * Generates a key to use for localStorage from the provided key. This
+   * should prevent name collisions.
+   *
+   * @private
+   * @param {string} key - Generate key from this key
+   * @return {string} Generated key for localStorage
+   */
+  generateKey(key) {
+    return `bp-${key}`;
+  }
+}
+/* harmony default export */ const lib_Cache = (Cache);
+;// ./src/lib/BoundedCache.js
+function BoundedCache_defineProperty(e, r, t) { return (r = BoundedCache_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function BoundedCache_toPropertyKey(t) { var i = BoundedCache_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function BoundedCache_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 BoundedCache extends lib_Cache {
+  /**
+   * [constructor]
+   *
+   * @param {number} [maxEntries] - Override the maximum number of cache entries
+   */
+  constructor(maxEntries) {
+    super();
+    /** @property {Array} - Maintains the list of cache keys in order in which they were added to the cache */
+    BoundedCache_defineProperty(this, "cacheQueue", void 0);
+    /** @property {number} - The maximum number of entries in the cache */
+    BoundedCache_defineProperty(this, "maxEntries", void 0);
+    this.maxEntries = maxEntries || 500;
+    this.cache = {};
+    this.cacheQueue = [];
+  }
+
+  /**
+   * Destroys the bounded cache
+   *
+   * @return {void}
+   */
+  destroy() {
+    this.cache = null;
+    this.cacheQueue = null;
+  }
+
+  /**
+   * Caches a simple object in memory. If the number of cache entries
+   * then exceeds the maxEntries value, then the earliest key in cacheQueue
+   * will be removed from the cache.
+   *
+   * @param {string} key - The cache key
+   * @param {*} value - The cache value
+   * @return {void}
+   */
+  set(key, value) {
+    // If this key is not already in the cache, then add it
+    // to the cacheQueue. This avoids adding the same key to
+    // the cacheQueue multiple times if the cache entry gets updated
+    if (!this.inCache(key)) {
+      this.cacheQueue.push(key);
+    }
+    super.set(key, value);
+
+    // If the cacheQueue exceeds the maxEntries then remove the first
+    // key from the front of the cacheQueue and unset that entry
+    // from the cache
+    if (this.cacheQueue.length > this.maxEntries) {
+      const deleteKey = this.cacheQueue.shift();
+      this.unset(deleteKey);
+    }
+  }
+}
+/* harmony default export */ const lib_BoundedCache = (BoundedCache);
+;// ./src/lib/Thumbnail.js
+function Thumbnail_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 Thumbnail_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? Thumbnail_ownKeys(Object(t), !0).forEach(function (r) { Thumbnail_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Thumbnail_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function Thumbnail_defineProperty(e, r, t) { return (r = Thumbnail_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function Thumbnail_toPropertyKey(t) { var i = Thumbnail_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function Thumbnail_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+
+
+const CLASS_BOX_PREVIEW_THUMBNAIL_IMAGE = 'bp-thumbnail-image';
+const THUMBNAIL_TOTAL_WIDTH = 150; // 190px sidebar width - 40px margins
+const THUMBNAIL_IMAGE_WIDTH = THUMBNAIL_TOTAL_WIDTH * 2; // Multiplied by a scaling factor so that we render the image at a higher resolution
+
+class Thumbnail {
+  /**
+   * [constructor]
+   *
+   * @param {PDFViewer} pdfViewer - the PDFJS viewer
+   */
+  constructor(pdfViewer, preloader) {
+    /** @property {PDfViewer} - The PDFJS viewer instance */
+    Thumbnail_defineProperty(this, "pdfViewer", void 0);
+    /** @property {Object} - Cache for the thumbnail image elements */
+    Thumbnail_defineProperty(this, "thumbnailImageCache", void 0);
+    Thumbnail_defineProperty(this, "preloader", void 0);
+    this.preloader = preloader;
+    this.createImageEl = this.createImageEl.bind(this);
+    this.createThumbnailImage = this.createThumbnailImage.bind(this);
+    this.getThumbnailDataURL = this.getThumbnailDataURL.bind(this);
+    this.pdfViewer = pdfViewer;
+    this.thumbnailImageCache = new lib_BoundedCache();
+  }
+
+  /**
+   * Destroys the thumbnails sidebar
+   *
+   * @return {void}
+   */
+  destroy() {
+    if (this.thumbnailImageCache) {
+      this.thumbnailImageCache.destroy();
+      this.thumbnailImageCache = null;
+    }
+    this.pdfViewer = null;
+    this.preloader = null;
+  }
+
+  /**
+   * Initializes the Thumbnails Sidebar
+   *
+   * @return {Promise}
+   */
+  init() {
+    // Get the first page of the document, and use its dimensions
+    // to set the thumbnails size of the thumbnails sidebar
+
+    if (this.preloader?.imageDimensions) {
+      const {
+        width,
+        height
+      } = this.preloader.imageDimensions;
+      this.scale = THUMBNAIL_TOTAL_WIDTH / width;
+      this.pageRatio = width / height;
+      this.thumbnailHeight = Math.ceil(height * this.scale);
+      return Promise.resolve(this.thumbnailHeight);
+    }
+    const pdfDocument = this.pdfViewer?.pdfDocument;
+    if (!pdfDocument) {
+      return Promise.resolve(null);
+    }
+    return pdfDocument.getPage(1).then(page => {
+      const rotation = ((this.pdfViewer.pagesRotation || 0) + page.rotate) % 360;
+      const viewport = page.getViewport({
+        scale: 1,
+        rotation
+      });
+      if (!viewport) {
+        return Promise.resolve(null);
+      }
+      const {
+        width,
+        height
+      } = viewport;
+
+      // If the dimensions of the page are invalid then don't proceed further
+      if (!(isFinite_default()(width) && width > 0 && isFinite_default()(height) && height > 0)) {
+        // eslint-disable-next-line
+        console.error('Page dimensions invalid when initializing the thumbnails sidebar');
+        return Promise.resolve(null);
+      }
+
+      // Amount to scale down from full-size to thumbnail size
+      this.scale = THUMBNAIL_TOTAL_WIDTH / width;
+      // Width : Height ratio of the page
+      this.pageRatio = width / height;
+      const scaledViewport = page.getViewport({
+        scale: this.scale,
+        rotation
+      });
+      this.thumbnailHeight = Math.ceil(scaledViewport.height);
+      return Promise.resolve(this.thumbnailHeight);
+    });
+  }
+
+  /**
+   * Creates the image element
+   * @param {string} dataUrl - The image data URL for the thumbnail
+   * @return {HTMLElement} - The image element
+   */
+  createImageEl(dataUrl, thumbOptions) {
+    const imageEl = thumbOptions && thumbOptions.createImgTag ? document.createElement('img') : document.createElement('div');
+    if (thumbOptions && thumbOptions.createImgTag) {
+      imageEl.src = `${dataUrl}`;
+      return imageEl;
+    }
+    imageEl.classList.add(CLASS_BOX_PREVIEW_THUMBNAIL_IMAGE);
+    imageEl.style.backgroundImage = `url('${dataUrl}')`;
+
+    // Add the height and width to the image to be the same as the thumbnail
+    // so that the css `background-image` rules will work
+    imageEl.style.width = `${THUMBNAIL_TOTAL_WIDTH}px`;
+    imageEl.style.height = `${this.thumbnailHeight}px`;
+    return imageEl;
+  }
+
+  /**
+   * Make a thumbnail image element
+   *
+   * @param {number} itemIndex - the item index for the overall list (0 indexed)
+   * @return {Promise} - promise reolves with the image HTMLElement or null if generation is in progress
+   */
+  createThumbnailImage(itemIndex, thumbOptions) {
+    const cacheEntry = this.getImageFromCache(itemIndex);
+    // If this thumbnail has already been cached, use it
+    if (cacheEntry && cacheEntry.image) {
+      return Promise.resolve(cacheEntry.image);
+    }
+
+    // If this thumbnail has already been requested, resolve with null
+    if (cacheEntry && cacheEntry.inProgress) {
+      return Promise.resolve(null);
+    }
+
+    // Update the cache entry to be in progress
+    this.thumbnailImageCache.set(itemIndex, Thumbnail_objectSpread(Thumbnail_objectSpread({}, cacheEntry), {}, {
+      inProgress: true
+    }));
+    return this.getThumbnailDataURL(itemIndex + 1, thumbOptions).then(dataUrl => {
+      return this.createImageEl(dataUrl, thumbOptions);
+    }).then(imageEl => {
+      // Cache this image element for future use
+      this.thumbnailImageCache.set(itemIndex, {
+        inProgress: false,
+        image: imageEl
+      });
+      return imageEl;
+    }).catch(() => {
+      this.thumbnailImageCache.set(itemIndex, Thumbnail_objectSpread(Thumbnail_objectSpread({}, this.getImageFromCache(itemIndex)), {}, {
+        inProgress: false
+      }));
+      throw new Error('Thumbnail generation failed');
+    });
+  }
+
+  /**
+   * Make a thumbnail image element
+   *
+   * @param {number} itemIndex - the item index for the overall list (0 indexed)
+   * @return {Promise} - promise reolves with the image HTMLElement or null if generation is in progress
+   */
+  getImageFromCache(itemIndex) {
+    return this.thumbnailImageCache.get(itemIndex);
+  }
+
+  /**
+   * Given a page number, generates the image data URL for the image of the page
+   * @param {number} pageNum  - The page number of the document
+   * @return {string} The data URL of the page image
+   */
+  getThumbnailDataURL(pageNum, thumbOptions) {
+    if (this.preloader?.preloadedImages?.[pageNum]) {
+      return Promise.resolve(this.preloader.preloadedImages[pageNum]);
+    }
+    const pdfDocument = this.pdfViewer?.pdfDocument;
+    if (!pdfDocument) {
+      return Promise.reject(new Error('PDF document not ready'));
+    }
+    const canvas = document.createElement('canvas');
+    const thumbnailImageWidth = thumbOptions && thumbOptions.thumbMaxWidth ? thumbOptions.thumbMaxWidth : THUMBNAIL_IMAGE_WIDTH;
+    return pdfDocument.getPage(pageNum).then(page => {
+      const rotation = ((this.pdfViewer.pagesRotation || 0) + page.rotate) % 360;
+      const viewport = page.getViewport({
+        scale: 1,
+        rotation
+      });
+      if (!viewport || !isFinite_default()(viewport.width) || !isFinite_default()(viewport.height)) {
+        return Promise.reject(new Error('Invalid page viewport'));
+      }
+      const {
+        width,
+        height
+      } = viewport;
+      // Get the current page w:h ratio in case it differs from the first page
+      const curPageRatio = width / height;
+
+      // Handle the case where the current page's w:h ratio is less than the
+      // `pageRatio` which means that this page is probably more portrait than
+      // landscape
+      if (curPageRatio < this.pageRatio) {
+        // Set the canvas height to that of the thumbnail max height
+        canvas.height = Math.ceil(thumbnailImageWidth / this.pageRatio);
+        // Find the canvas width based on the current page ratio
+        canvas.width = canvas.height * curPageRatio;
+      } else {
+        // In case the current page ratio is same as the first page
+        // or in case it's larger (which means that it's wider), keep
+        // the width at the max thumbnail width
+        canvas.width = thumbnailImageWidth;
+        // Find the height based on the current page ratio
+        canvas.height = Math.ceil(thumbnailImageWidth / curPageRatio);
+      }
+      // The amount for which to scale down the current page
+      const {
+        width: canvasWidth
+      } = canvas;
+      const scale = canvasWidth / width;
+      return page.render({
+        canvasContext: canvas.getContext('2d'),
+        viewport: page.getViewport({
+          scale,
+          rotation
+        })
+      }).promise;
+    }).then(() => canvas.toDataURL());
+  }
+}
+/* harmony default export */ const lib_Thumbnail = (Thumbnail);
+;// ./src/lib/viewers/gallery/GalleryGrid.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/gallery/GalleryGrid.tsx
+function GalleryGrid_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 GalleryGrid_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? GalleryGrid_ownKeys(Object(t), !0).forEach(function (r) { GalleryGrid_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : GalleryGrid_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function GalleryGrid_defineProperty(e, r, t) { return (r = GalleryGrid_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function GalleryGrid_toPropertyKey(t) { var i = GalleryGrid_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function GalleryGrid_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+
+
+
+const GALLERY_THUMB_MAX_WIDTH = 440;
+const INITIAL_LOAD_BUFFER = 40;
+const CONCURRENT_LOADS = 4;
+const SCROLL_THROTTLE_MS = 200;
+function GalleryGrid(_ref) {
+  let {
+    pageCount,
+    currentPage,
+    onClose,
+    onFocusChange,
+    onPageNavigate,
+    thumbnail
+  } = _ref;
+  const [loadedImages, setLoadedImages] = __WEBPACK_EXTERNAL_MODULE_react_useState__({});
+  const [focusedPage, setFocusedPage] = __WEBPACK_EXTERNAL_MODULE_react_useState__(currentPage);
+  const gridRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(null);
+  const queueRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__([]);
+  const isProcessingRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(false);
+  const isMountedRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(true);
+  const initialLoadDoneRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(false);
+  const initialLoadCountRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(0);
+  function processQueue() {
+    if (!isMountedRef.current || !thumbnail || queueRef.current.length === 0) {
+      isProcessingRef.current = false;
+      return;
+    }
+    const batchSize = initialLoadDoneRef.current ? CONCURRENT_LOADS : 1;
+    const batch = queueRef.current.slice(0, batchSize);
+    queueRef.current = queueRef.current.slice(batchSize);
+    requestAnimationFrame(() => {
+      if (!isMountedRef.current || !thumbnail) {
+        isProcessingRef.current = false;
+        return;
+      }
+      let completed = 0;
+      const onComplete = () => {
+        completed += 1;
+        if (completed < batch.length) return;
+        if (!isMountedRef.current) {
+          isProcessingRef.current = false;
+          return;
+        }
+        if (!initialLoadDoneRef.current) {
+          initialLoadCountRef.current += batch.length;
+          if (initialLoadCountRef.current >= INITIAL_LOAD_BUFFER) {
+            initialLoadDoneRef.current = true;
+            isProcessingRef.current = false;
+            return;
+          }
+        }
+        processQueue();
+      };
+      batch.forEach(pageNum => {
+        thumbnail.createThumbnailImage(pageNum - 1, {
+          createImgTag: true,
+          thumbMaxWidth: GALLERY_THUMB_MAX_WIDTH
+        }).then(imageEl => {
+          if (isMountedRef.current && imageEl && imageEl.src) {
+            setLoadedImages(prev => GalleryGrid_objectSpread(GalleryGrid_objectSpread({}, prev), {}, {
+              [pageNum]: imageEl.src
+            }));
+          }
+          onComplete();
+        }).catch(() => {
+          onComplete();
+        });
+      });
+    });
+  }
+  function startProcessing() {
+    if (!isProcessingRef.current && queueRef.current.length > 0) {
+      isProcessingRef.current = true;
+      processQueue();
+    }
+  }
+  function getUnloadedNearViewport() {
+    const grid = gridRef.current;
+    if (!grid) return [];
+    const {
+      scrollTop,
+      clientHeight
+    } = grid;
+    const bufferZone = clientHeight * 3;
+    const viewportTop = scrollTop - bufferZone;
+    const viewportBottom = scrollTop + clientHeight + bufferZone;
+    const nearbyUnloaded = [];
+    const tiles = grid.querySelectorAll('[data-page]');
+    tiles.forEach(tile => {
+      const el = tile;
+      if (!el.dataset.page) return;
+      const pageNum = parseInt(el.dataset.page, 10);
+      const tileTop = el.offsetTop;
+      const tileBottom = tileTop + el.offsetHeight;
+      if (tileBottom > viewportTop && tileTop < viewportBottom && !el.querySelector('img')) {
+        nearbyUnloaded.push(pageNum);
+      }
+    });
+    return nearbyUnloaded;
   }
   const handleScrollRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(throttle_default()(() => {
     const nearbyUnloaded = getUnloadedNearViewport();
@@ -31132,51 +31743,229 @@ function GalleryGrid(_ref) {
       onClose();
       return;
     }
-    if (event.key === 'Tab' && gridRef.current) {
-      const buttons = gridRef.current.querySelectorAll('button');
-      const first = buttons[0];
-      const last = buttons[buttons.length - 1];
-      if (event.shiftKey && document.activeElement === first) {
-        event.preventDefault();
-        last.focus();
-      } else if (!event.shiftKey && document.activeElement === last) {
-        event.preventDefault();
-        first.focus();
-      }
+    if (event.key === 'Tab' && gridRef.current) {
+      const buttons = gridRef.current.querySelectorAll('button');
+      const first = buttons[0];
+      const last = buttons[buttons.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  }, [onClose]);
+  const tiles = [];
+  for (let i = 1; i <= pageCount; i += 1) {
+    const isFocused = i === focusedPage;
+    tiles.push( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
+      key: i,
+      "aria-label": `Page ${i}${isFocused ? ', current page' : ''}`,
+      className: `bp-gallery-tile${isFocused ? ' bp-gallery-tile--selected' : ''}`,
+      "data-page": i,
+      onClick: () => onPageNavigate(i),
+      onFocus: () => handleTileFocus(i),
+      type: "button"
+    }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
+      className: "bp-gallery-tile-badge"
+    }, i), loadedImages[i] ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("img", {
+      alt: `Page ${i}`,
+      src: loadedImages[i]
+    }) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
+      className: "bp-gallery-tile-placeholder"
+    })));
+  }
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    __WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+      ref: gridRef,
+      className: "bp-gallery-grid",
+      onFocus: handleGridFocus,
+      onKeyDown: handleGridKeyDown,
+      onScroll: handleScrollRef.current,
+      tabIndex: -1
+    }, tiles)
+  );
+}
+;// ./src/lib/viewers/gallery/GalleryController.tsx
+function GalleryController_defineProperty(e, r, t) { return (r = GalleryController_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function GalleryController_toPropertyKey(t) { var i = GalleryController_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function GalleryController_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); }
+// Doc-viewer-bound: this controller talks to PDF.js (pdfViewer, Thumbnail) and
+// the doc-specific ThumbnailsSidebar. If a non-doc viewer ever needs gallery,
+// the dependencies below must be abstracted first.
+
+
+
+
+
+
+
+// Controller-owned shape: GalleryGrid only sees the read surface (GalleryThumbnail),
+// but the controller also needs destroy() to invalidate the cache on rotate/teardown.
+
+const GALLERY_MAX_PAGES = 200; // Hide gallery toggle for files above this page count, will increase in V2
+const THUMBNAILS_SIDEBAR_TRANSITION_TIME = 301; // ms
+
+// Minimal local shapes for untyped peer modules (pdfjs is JS-only, sidebar is JS-only).
+// Only the members the controller actually uses are declared — extend as needed.
+
+// The preloader is opaque to the controller; we only forward it into Thumbnail's constructor.
+// Type-alias what the Thumbnail constructor expects so the two sides stay in sync.
+
+class GalleryController {
+  constructor(opts) {
+    GalleryController_defineProperty(this, "containerEl", void 0);
+    GalleryController_defineProperty(this, "features", void 0);
+    GalleryController_defineProperty(this, "getPdfViewer", void 0);
+    GalleryController_defineProperty(this, "getPreloader", void 0);
+    GalleryController_defineProperty(this, "getThumbnailsSidebar", void 0);
+    GalleryController_defineProperty(this, "setPage", void 0);
+    GalleryController_defineProperty(this, "toggleThumbnails", void 0);
+    GalleryController_defineProperty(this, "requestUiUpdate", void 0);
+    GalleryController_defineProperty(this, "galleryRoot", null);
+    GalleryController_defineProperty(this, "galleryEl", null);
+    GalleryController_defineProperty(this, "galleryThumbnail", null);
+    GalleryController_defineProperty(this, "galleryFocusedPage", null);
+    GalleryController_defineProperty(this, "galleryMountTimeoutId", null);
+    GalleryController_defineProperty(this, "gallerySidebarTimeoutId", null);
+    GalleryController_defineProperty(this, "sidebarWasOpen", false);
+    GalleryController_defineProperty(this, "isGalleryOpen", false);
+    GalleryController_defineProperty(this, "toggle", () => {
+      this.isGalleryOpen = !this.isGalleryOpen;
+      if (this.isGalleryOpen) {
+        if (this.gallerySidebarTimeoutId !== null) {
+          clearTimeout(this.gallerySidebarTimeoutId);
+          this.gallerySidebarTimeoutId = null;
+        }
+        const sidebar = this.getThumbnailsSidebar();
+        this.sidebarWasOpen = !!(sidebar && sidebar.isOpen);
+        if (this.sidebarWasOpen) {
+          this.toggleThumbnails();
+          this.galleryMountTimeoutId = setTimeout(() => {
+            this.galleryMountTimeoutId = null;
+            this.mountGrid();
+          }, THUMBNAILS_SIDEBAR_TRANSITION_TIME / 2);
+        } else {
+          this.mountGrid();
+        }
+      } else {
+        if (this.galleryMountTimeoutId !== null) {
+          clearTimeout(this.galleryMountTimeoutId);
+          this.galleryMountTimeoutId = null;
+        }
+        const pdfViewer = this.getPdfViewer();
+        const navigateToPage = this.galleryFocusedPage && this.galleryFocusedPage !== pdfViewer.currentPageNumber ? this.galleryFocusedPage : null;
+        if (this.galleryRoot) {
+          this.galleryRoot.unmount();
+          this.galleryRoot = null;
+        }
+        if (this.galleryEl) {
+          this.galleryEl.remove();
+          this.galleryEl = null;
+        }
+        this.galleryFocusedPage = null;
+        const sidebar = this.getThumbnailsSidebar();
+        if (this.sidebarWasOpen && sidebar && !sidebar.isOpen) {
+          this.toggleThumbnails();
+        }
+        if (navigateToPage) {
+          this.setPage(navigateToPage);
+          if (this.sidebarWasOpen && sidebar) {
+            this.gallerySidebarTimeoutId = setTimeout(() => {
+              this.gallerySidebarTimeoutId = null;
+              sidebar.setCurrentPage(navigateToPage);
+            }, THUMBNAILS_SIDEBAR_TRANSITION_TIME);
+          }
+        }
+      }
+      this.requestUiUpdate();
+    });
+    GalleryController_defineProperty(this, "handleGalleryNavigate", pageNum => {
+      this.galleryFocusedPage = pageNum;
+      this.toggle();
+    });
+    GalleryController_defineProperty(this, "handleFocusChange", pageNum => {
+      this.galleryFocusedPage = pageNum;
+    });
+    this.containerEl = opts.containerEl;
+    this.features = opts.features;
+    this.getPdfViewer = opts.getPdfViewer;
+    this.getPreloader = opts.getPreloader;
+    this.getThumbnailsSidebar = opts.getThumbnailsSidebar;
+    this.setPage = opts.setPage;
+    this.toggleThumbnails = opts.toggleThumbnails;
+    this.requestUiUpdate = opts.requestUiUpdate;
+  }
+  get isOpen() {
+    return this.isGalleryOpen;
+  }
+  canRender(pageCount) {
+    return isFeatureEnabled(this.features, 'galleryView.enabled') && pageCount > 1 && pageCount <= GALLERY_MAX_PAGES;
+  }
+  handleEscape() {
+    if (!this.isGalleryOpen) return false;
+    this.toggle();
+    return true;
+  }
+  handleRotate() {
+    if (this.galleryThumbnail) {
+      this.galleryThumbnail.destroy();
+      this.galleryThumbnail = null;
+    }
+  }
+  destroy() {
+    if (this.galleryMountTimeoutId !== null) {
+      clearTimeout(this.galleryMountTimeoutId);
+      this.galleryMountTimeoutId = null;
+    }
+    if (this.gallerySidebarTimeoutId !== null) {
+      clearTimeout(this.gallerySidebarTimeoutId);
+      this.gallerySidebarTimeoutId = null;
+    }
+    if (this.galleryRoot) {
+      this.galleryRoot.unmount();
+      this.galleryRoot = null;
+    }
+    if (this.galleryEl) {
+      this.galleryEl.remove();
+      this.galleryEl = null;
+    }
+    if (this.galleryThumbnail) {
+      this.galleryThumbnail.destroy();
+      this.galleryThumbnail = null;
+    }
+
+    // Reset state so isOpen is honest even after teardown.
+    this.isGalleryOpen = false;
+    this.sidebarWasOpen = false;
+    this.galleryFocusedPage = null;
+  }
+  mountGrid() {
+    if (this.galleryRoot) {
+      return;
+    }
+    const pdfViewer = this.getPdfViewer();
+    if (!this.galleryThumbnail) {
+      // Thumbnail is a JS class; cast to the typed interface used by the controller + grid.
+      this.galleryThumbnail = new lib_Thumbnail(pdfViewer, this.getPreloader());
     }
-  }, [onClose]);
-  const tiles = [];
-  for (let i = 1; i <= pageCount; i += 1) {
-    const isFocused = i === focusedPage;
-    tiles.push( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
-      key: i,
-      "aria-label": `Page ${i}${isFocused ? ', current page' : ''}`,
-      className: `bp-gallery-tile${isFocused ? ' bp-gallery-tile--selected' : ''}`,
-      "data-page": i,
-      onClick: () => onPageNavigate(i),
-      onFocus: () => handleTileFocus(i),
-      type: "button"
-    }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
-      className: "bp-gallery-tile-badge"
-    }, i), loadedImages[i] ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("img", {
-      alt: `Page ${i}`,
-      src: loadedImages[i]
-    }) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
-      className: "bp-gallery-tile-placeholder"
-    })));
+    const thumbnail = this.galleryThumbnail;
+    this.galleryEl = document.createElement('div');
+    this.containerEl.appendChild(this.galleryEl);
+    this.galleryRoot = __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__(this.galleryEl);
+    this.galleryFocusedPage = pdfViewer.currentPageNumber;
+    this.galleryRoot.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryGrid, {
+      currentPage: pdfViewer.currentPageNumber,
+      onClose: this.toggle,
+      onFocusChange: this.handleFocusChange,
+      onPageNavigate: this.handleGalleryNavigate,
+      pageCount: pdfViewer.pagesCount,
+      thumbnail: thumbnail
+    }));
   }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    __WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
-      ref: gridRef,
-      className: "bp-gallery-grid",
-      onFocus: handleGridFocus,
-      onKeyDown: handleGridKeyDown,
-      onScroll: handleScrollRef.current,
-      tabIndex: -1
-    }, tiles)
-  );
 }
 ;// ./src/lib/logUtils.js
 
@@ -31603,232 +32392,27 @@ class PageTracker extends (events_default()) {
   /**
    *  Update content insights options
    *
-   * @private
-   * @param {Object} options - Content Insights options
-   * @return {void}
-   */
-  updateOptions() {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    // Set User and file information
-    const prevActiveState = this.isAdvancedInsightsActive;
-    this.setOptions(options);
-    if (prevActiveState !== this.isAdvancedInsightsActive) {
-      // If ACI was deactivated, stop tracking user events
-      if (!this.isAdvancedInsightsActive) {
-        this.stopTracking();
-        this.unbindIdleUserEvents();
-      } else {
-        this.init();
-      }
-    }
-  }
-}
-/* harmony default export */ const lib_PageTracker = (PageTracker);
-;// ./src/lib/Cache.js
-
-class Cache {
-  //--------------------------------------------------------------------------
-  // Public
-  //--------------------------------------------------------------------------
-
-  /**
-   * [constructor]
-   *
-   * @return {Cache} Cache instance
-   */
-  constructor() {
-    this.cache = {};
-  }
-
-  /**
-   * Caches a simple object in memory and in localStorage if specified.
-   * Note that objects cached in localStorage will be stringified.
-   *
-   * @public
-   * @param {string} key - The cache key
-   * @param {*} value - The cache value
-   * @param {boolean} useLocalStorage - Whether or not to use localStorage
-   * @return {void}
-   */
-  set(key, value, useLocalStorage) {
-    this.cache[key] = value;
-    if (useLocalStorage && this.isLocalStorageAvailable()) {
-      localStorage.setItem(this.generateKey(key), JSON.stringify(value));
-    }
-  }
-
-  /**
-   * Deletes object from in-memory cache and localStorage.
-   *
-   * @public
-   * @param {string} key - The cache key
-   * @return {void}
-   */
-  unset(key) {
-    if (this.isLocalStorageAvailable()) {
-      localStorage.removeItem(this.generateKey(key));
-    }
-    delete this.cache[key];
-  }
-
-  /**
-   * Checks if cache has provided key.
-   *
-   * @public
-   * @param {string} key - The cache key
-   * @return {boolean} Whether the cache has key
-   */
-  has(key) {
-    return this.inCache(key) || this.inLocalStorage(key);
-  }
-
-  /**
-   * Fetches a cached object from in-memory cache if available. Otherwise
-   * tries to fetch from localStorage. If fetched from localStorage, object
-   * will be a JSON parsed object.
-   *
-   * @public
-   * @param {string} key - Key of cached object
-   * @return {Object} Cached object
-   */
-  get(key) {
-    if (this.inCache(key)) {
-      return this.cache[key];
-    }
-
-    // If localStorage is available, try to fetch from there and set it
-    // in in-memory cache if found
-    if (this.inLocalStorage(key)) {
-      let value = localStorage.getItem(this.generateKey(key));
-      if (value) {
-        value = JSON.parse(value);
-        this.cache[key] = value;
-        return value;
-      }
-    }
-    return undefined;
-  }
-
-  //--------------------------------------------------------------------------
-  // Private
-  //--------------------------------------------------------------------------
-
-  /**
-   * Checks if memory cache has provided key.
-   *
-   * @private
-   * @param {string} key - The cache key
-   * @return {boolean} Whether the cache has key
-   */
-  inCache(key) {
-    return {}.hasOwnProperty.call(this.cache, key);
-  }
-
-  /**
-   * Checks if memory cache has provided key.
-   *
-   * @private
-   * @param {string} key - The cache key
-   * @return {boolean} Whether the cache has key
-   */
-  inLocalStorage(key) {
-    if (!this.isLocalStorageAvailable()) {
-      return false;
-    }
-    return !!localStorage.getItem(this.generateKey(key));
-  }
-
-  /**
-   * Checks whether localStorage is available.
-   *
-   * @NOTE(tjin): This check is cached to not have to write/read from disk
-   * every time this check is needed, but this will not catch instances where
-   * localStorage was available the first time this is called, but becomes
-   * unavailable at a later time.
-   *
-   * @private
-   * @return {boolean} Whether or not localStorage is available or not.
-   */
-  isLocalStorageAvailable() {
-    if (this.available === undefined) {
-      this.available = isLocalStorageAvailable();
-    }
-    return this.available;
-  }
-
-  /**
-   * Generates a key to use for localStorage from the provided key. This
-   * should prevent name collisions.
-   *
-   * @private
-   * @param {string} key - Generate key from this key
-   * @return {string} Generated key for localStorage
-   */
-  generateKey(key) {
-    return `bp-${key}`;
-  }
-}
-/* harmony default export */ const lib_Cache = (Cache);
-;// ./src/lib/BoundedCache.js
-function BoundedCache_defineProperty(e, r, t) { return (r = BoundedCache_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function BoundedCache_toPropertyKey(t) { var i = BoundedCache_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function BoundedCache_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 BoundedCache extends lib_Cache {
-  /**
-   * [constructor]
-   *
-   * @param {number} [maxEntries] - Override the maximum number of cache entries
-   */
-  constructor(maxEntries) {
-    super();
-    /** @property {Array} - Maintains the list of cache keys in order in which they were added to the cache */
-    BoundedCache_defineProperty(this, "cacheQueue", void 0);
-    /** @property {number} - The maximum number of entries in the cache */
-    BoundedCache_defineProperty(this, "maxEntries", void 0);
-    this.maxEntries = maxEntries || 500;
-    this.cache = {};
-    this.cacheQueue = [];
-  }
-
-  /**
-   * Destroys the bounded cache
-   *
-   * @return {void}
-   */
-  destroy() {
-    this.cache = null;
-    this.cacheQueue = null;
-  }
-
-  /**
-   * Caches a simple object in memory. If the number of cache entries
-   * then exceeds the maxEntries value, then the earliest key in cacheQueue
-   * will be removed from the cache.
-   *
-   * @param {string} key - The cache key
-   * @param {*} value - The cache value
+   * @private
+   * @param {Object} options - Content Insights options
    * @return {void}
    */
-  set(key, value) {
-    // If this key is not already in the cache, then add it
-    // to the cacheQueue. This avoids adding the same key to
-    // the cacheQueue multiple times if the cache entry gets updated
-    if (!this.inCache(key)) {
-      this.cacheQueue.push(key);
-    }
-    super.set(key, value);
-
-    // If the cacheQueue exceeds the maxEntries then remove the first
-    // key from the front of the cacheQueue and unset that entry
-    // from the cache
-    if (this.cacheQueue.length > this.maxEntries) {
-      const deleteKey = this.cacheQueue.shift();
-      this.unset(deleteKey);
+  updateOptions() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    // Set User and file information
+    const prevActiveState = this.isAdvancedInsightsActive;
+    this.setOptions(options);
+    if (prevActiveState !== this.isAdvancedInsightsActive) {
+      // If ACI was deactivated, stop tracking user events
+      if (!this.isAdvancedInsightsActive) {
+        this.stopTracking();
+        this.unbindIdleUserEvents();
+      } else {
+        this.init();
+      }
     }
   }
 }
-/* harmony default export */ const lib_BoundedCache = (BoundedCache);
+/* harmony default export */ const lib_PageTracker = (PageTracker);
 // EXTERNAL MODULE: ./node_modules/lodash/isFunction.js
 var isFunction = __webpack_require__(1882);
 var isFunction_default = /*#__PURE__*/__webpack_require__.n(isFunction);
@@ -32164,365 +32748,129 @@ class VirtualScroller {
     if (!listEl || start < 0 || end < 0) {
       return;
     }
-    const listItems = Array.prototype.slice.call(listEl.children, start, end);
-    listItems.forEach(listItem => listEl.removeChild(listItem));
-  }
-
-  /**
-   * Render a single item
-   *
-   * @param {number} rowIndex - The index of the item to be rendered
-   * @return {HTMLElement} The newly created row item
-   */
-  renderItem(rowIndex) {
-    const rowEl = document.createElement('li');
-    const topPosition = (this.itemHeight + this.margin) * rowIndex + this.margin;
-    let renderedThumbnail;
-    try {
-      renderedThumbnail = this.renderItemFn.call(this, rowIndex);
-    } catch (err) {
-      // eslint-disable-next-line
-      console.error(`Error rendering thumbnail - ${err}`);
-    }
-    rowEl.style.top = `${topPosition}px`;
-    rowEl.style.height = `${this.itemHeight}px`;
-    rowEl.classList.add('bp-vs-list-item');
-    rowEl.dataset.bpVsRowIndex = rowIndex;
-    if (renderedThumbnail) {
-      rowEl.appendChild(renderedThumbnail);
-    }
-    return rowEl;
-  }
-
-  /**
-   * Utility to create the list element
-   *
-   * @return {HTMLElement} The list element
-   */
-  createListElement() {
-    const newListEl = document.createElement('ol');
-    newListEl.className = 'bp-vs-list';
-    newListEl.style.height = `${this.totalItems * (this.itemHeight + this.margin) + this.margin}px`;
-    return newListEl;
-  }
-
-  /**
-   * Scrolls the provided row index into view.
-   * @param {number} rowIndex - the index of the row in the overall list
-   * @return {void}
-   */
-  scrollIntoView(rowIndex) {
-    if (!this.scrollingEl || rowIndex < 0 || rowIndex >= this.totalItems) {
-      return;
-    }
-
-    // See if the list item indexed by `rowIndex` is already present
-    const foundItem = this.getListItems().find(listItem => {
-      const {
-        bpVsRowIndex
-      } = listItem.dataset;
-      const parsedRowIndex = parseInt(bpVsRowIndex, 10);
-      return parsedRowIndex === rowIndex;
-    });
-    if (foundItem) {
-      // If it is already present and visible, do nothing, but if not visible
-      // then scroll it into view
-      if (!this.isVisible(foundItem)) {
-        foundItem.scrollIntoView({
-          block: 'nearest'
-        });
-      }
-    } else {
-      // If it is not present, then adjust the scrollTop so that the list item
-      // will get rendered.
-      const topPosition = (this.itemHeight + this.margin) * rowIndex;
-      this.scrollingEl.scrollTop = topPosition;
-      // Some browsers don't fire the scroll event when setting scrollTop
-      // (IE11 & Firefox) so we need to manually dispatch the event
-      // in order to trigger `onScrollHandler` to render the items
-      this.scrollingEl.dispatchEvent(new Event('scroll'));
-    }
-  }
-
-  /**
-   * Checks to see whether the provided list item element is currently visible
-   * @param {HTMLElement} listItemEl - the list item elment
-   * @return {boolean} Returns true if the list item is visible, false otherwise
-   */
-  isVisible(listItemEl) {
-    if (!this.scrollingEl || !listItemEl) {
-      return false;
-    }
-    const {
-      scrollTop
-    } = this.scrollingEl;
-    const {
-      offsetTop
-    } = listItemEl;
-
-    // Ensure that the offsetTop and entire height of the listItemEl are inside the visible window
-    return scrollTop <= offsetTop && offsetTop + this.itemHeight <= scrollTop + this.containerHeight;
-  }
-
-  /**
-   * Gets the currently visible list items
-   * @return {Array<HTMLElement>} - the list of current visible list items
-   */
-  getVisibleItems() {
-    if (!this.listEl) {
-      return [];
-    }
-    return this.getListItems().filter(itemEl => this.isVisible(itemEl)).map(itemEl => itemEl && itemEl.children && itemEl.children[0]);
-  }
-
-  /**
-   * Gets the list items of this.listEl as an array
-   * @return {Array<HTMLElement>} - the list items
-   */
-  getListItems() {
-    if (!this.listEl) {
-      return [];
-    }
-    return Array.prototype.slice.call(this.listEl.children);
-  }
-}
-/* harmony default export */ const lib_VirtualScroller = (VirtualScroller);
-;// ./src/lib/Thumbnail.js
-function Thumbnail_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 Thumbnail_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? Thumbnail_ownKeys(Object(t), !0).forEach(function (r) { Thumbnail_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Thumbnail_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function Thumbnail_defineProperty(e, r, t) { return (r = Thumbnail_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function Thumbnail_toPropertyKey(t) { var i = Thumbnail_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function Thumbnail_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-
-
-const CLASS_BOX_PREVIEW_THUMBNAIL_IMAGE = 'bp-thumbnail-image';
-const THUMBNAIL_TOTAL_WIDTH = 150; // 190px sidebar width - 40px margins
-const THUMBNAIL_IMAGE_WIDTH = THUMBNAIL_TOTAL_WIDTH * 2; // Multiplied by a scaling factor so that we render the image at a higher resolution
-
-class Thumbnail {
-  /**
-   * [constructor]
-   *
-   * @param {PDFViewer} pdfViewer - the PDFJS viewer
-   */
-  constructor(pdfViewer, preloader) {
-    /** @property {PDfViewer} - The PDFJS viewer instance */
-    Thumbnail_defineProperty(this, "pdfViewer", void 0);
-    /** @property {Object} - Cache for the thumbnail image elements */
-    Thumbnail_defineProperty(this, "thumbnailImageCache", void 0);
-    Thumbnail_defineProperty(this, "preloader", void 0);
-    this.preloader = preloader;
-    this.createImageEl = this.createImageEl.bind(this);
-    this.createThumbnailImage = this.createThumbnailImage.bind(this);
-    this.getThumbnailDataURL = this.getThumbnailDataURL.bind(this);
-    this.pdfViewer = pdfViewer;
-    this.thumbnailImageCache = new lib_BoundedCache();
-  }
-
-  /**
-   * Destroys the thumbnails sidebar
-   *
-   * @return {void}
-   */
-  destroy() {
-    if (this.thumbnailImageCache) {
-      this.thumbnailImageCache.destroy();
-      this.thumbnailImageCache = null;
-    }
-    this.pdfViewer = null;
-    this.preloader = null;
-  }
-
-  /**
-   * Initializes the Thumbnails Sidebar
-   *
-   * @return {Promise}
-   */
-  init() {
-    // Get the first page of the document, and use its dimensions
-    // to set the thumbnails size of the thumbnails sidebar
-
-    if (this.preloader?.imageDimensions) {
-      const {
-        width,
-        height
-      } = this.preloader.imageDimensions;
-      this.scale = THUMBNAIL_TOTAL_WIDTH / width;
-      this.pageRatio = width / height;
-      this.thumbnailHeight = Math.ceil(height * this.scale);
-      return Promise.resolve(this.thumbnailHeight);
-    }
-    const pdfDocument = this.pdfViewer?.pdfDocument;
-    if (!pdfDocument) {
-      return Promise.resolve(null);
-    }
-    return pdfDocument.getPage(1).then(page => {
-      const rotation = ((this.pdfViewer.pagesRotation || 0) + page.rotate) % 360;
-      const viewport = page.getViewport({
-        scale: 1,
-        rotation
-      });
-      if (!viewport) {
-        return Promise.resolve(null);
-      }
-      const {
-        width,
-        height
-      } = viewport;
-
-      // If the dimensions of the page are invalid then don't proceed further
-      if (!(isFinite_default()(width) && width > 0 && isFinite_default()(height) && height > 0)) {
-        // eslint-disable-next-line
-        console.error('Page dimensions invalid when initializing the thumbnails sidebar');
-        return Promise.resolve(null);
-      }
-
-      // Amount to scale down from full-size to thumbnail size
-      this.scale = THUMBNAIL_TOTAL_WIDTH / width;
-      // Width : Height ratio of the page
-      this.pageRatio = width / height;
-      const scaledViewport = page.getViewport({
-        scale: this.scale,
-        rotation
-      });
-      this.thumbnailHeight = Math.ceil(scaledViewport.height);
-      return Promise.resolve(this.thumbnailHeight);
-    });
+    const listItems = Array.prototype.slice.call(listEl.children, start, end);
+    listItems.forEach(listItem => listEl.removeChild(listItem));
   }
 
   /**
-   * Creates the image element
-   * @param {string} dataUrl - The image data URL for the thumbnail
-   * @return {HTMLElement} - The image element
+   * Render a single item
+   *
+   * @param {number} rowIndex - The index of the item to be rendered
+   * @return {HTMLElement} The newly created row item
    */
-  createImageEl(dataUrl, thumbOptions) {
-    const imageEl = thumbOptions && thumbOptions.createImgTag ? document.createElement('img') : document.createElement('div');
-    if (thumbOptions && thumbOptions.createImgTag) {
-      imageEl.src = `${dataUrl}`;
-      return imageEl;
+  renderItem(rowIndex) {
+    const rowEl = document.createElement('li');
+    const topPosition = (this.itemHeight + this.margin) * rowIndex + this.margin;
+    let renderedThumbnail;
+    try {
+      renderedThumbnail = this.renderItemFn.call(this, rowIndex);
+    } catch (err) {
+      // eslint-disable-next-line
+      console.error(`Error rendering thumbnail - ${err}`);
     }
-    imageEl.classList.add(CLASS_BOX_PREVIEW_THUMBNAIL_IMAGE);
-    imageEl.style.backgroundImage = `url('${dataUrl}')`;
-
-    // Add the height and width to the image to be the same as the thumbnail
-    // so that the css `background-image` rules will work
-    imageEl.style.width = `${THUMBNAIL_TOTAL_WIDTH}px`;
-    imageEl.style.height = `${this.thumbnailHeight}px`;
-    return imageEl;
+    rowEl.style.top = `${topPosition}px`;
+    rowEl.style.height = `${this.itemHeight}px`;
+    rowEl.classList.add('bp-vs-list-item');
+    rowEl.dataset.bpVsRowIndex = rowIndex;
+    if (renderedThumbnail) {
+      rowEl.appendChild(renderedThumbnail);
+    }
+    return rowEl;
   }
 
   /**
-   * Make a thumbnail image element
+   * Utility to create the list element
    *
-   * @param {number} itemIndex - the item index for the overall list (0 indexed)
-   * @return {Promise} - promise reolves with the image HTMLElement or null if generation is in progress
+   * @return {HTMLElement} The list element
    */
-  createThumbnailImage(itemIndex, thumbOptions) {
-    const cacheEntry = this.getImageFromCache(itemIndex);
-    // If this thumbnail has already been cached, use it
-    if (cacheEntry && cacheEntry.image) {
-      return Promise.resolve(cacheEntry.image);
-    }
+  createListElement() {
+    const newListEl = document.createElement('ol');
+    newListEl.className = 'bp-vs-list';
+    newListEl.style.height = `${this.totalItems * (this.itemHeight + this.margin) + this.margin}px`;
+    return newListEl;
+  }
 
-    // If this thumbnail has already been requested, resolve with null
-    if (cacheEntry && cacheEntry.inProgress) {
-      return Promise.resolve(null);
+  /**
+   * Scrolls the provided row index into view.
+   * @param {number} rowIndex - the index of the row in the overall list
+   * @return {void}
+   */
+  scrollIntoView(rowIndex) {
+    if (!this.scrollingEl || rowIndex < 0 || rowIndex >= this.totalItems) {
+      return;
     }
 
-    // Update the cache entry to be in progress
-    this.thumbnailImageCache.set(itemIndex, Thumbnail_objectSpread(Thumbnail_objectSpread({}, cacheEntry), {}, {
-      inProgress: true
-    }));
-    return this.getThumbnailDataURL(itemIndex + 1, thumbOptions).then(dataUrl => {
-      return this.createImageEl(dataUrl, thumbOptions);
-    }).then(imageEl => {
-      // Cache this image element for future use
-      this.thumbnailImageCache.set(itemIndex, {
-        inProgress: false,
-        image: imageEl
-      });
-      return imageEl;
-    }).catch(() => {
-      this.thumbnailImageCache.set(itemIndex, Thumbnail_objectSpread(Thumbnail_objectSpread({}, this.getImageFromCache(itemIndex)), {}, {
-        inProgress: false
-      }));
-      throw new Error('Thumbnail generation failed');
+    // See if the list item indexed by `rowIndex` is already present
+    const foundItem = this.getListItems().find(listItem => {
+      const {
+        bpVsRowIndex
+      } = listItem.dataset;
+      const parsedRowIndex = parseInt(bpVsRowIndex, 10);
+      return parsedRowIndex === rowIndex;
     });
+    if (foundItem) {
+      // If it is already present and visible, do nothing, but if not visible
+      // then scroll it into view
+      if (!this.isVisible(foundItem)) {
+        foundItem.scrollIntoView({
+          block: 'nearest'
+        });
+      }
+    } else {
+      // If it is not present, then adjust the scrollTop so that the list item
+      // will get rendered.
+      const topPosition = (this.itemHeight + this.margin) * rowIndex;
+      this.scrollingEl.scrollTop = topPosition;
+      // Some browsers don't fire the scroll event when setting scrollTop
+      // (IE11 & Firefox) so we need to manually dispatch the event
+      // in order to trigger `onScrollHandler` to render the items
+      this.scrollingEl.dispatchEvent(new Event('scroll'));
+    }
   }
 
   /**
-   * Make a thumbnail image element
-   *
-   * @param {number} itemIndex - the item index for the overall list (0 indexed)
-   * @return {Promise} - promise reolves with the image HTMLElement or null if generation is in progress
+   * Checks to see whether the provided list item element is currently visible
+   * @param {HTMLElement} listItemEl - the list item elment
+   * @return {boolean} Returns true if the list item is visible, false otherwise
    */
-  getImageFromCache(itemIndex) {
-    return this.thumbnailImageCache.get(itemIndex);
+  isVisible(listItemEl) {
+    if (!this.scrollingEl || !listItemEl) {
+      return false;
+    }
+    const {
+      scrollTop
+    } = this.scrollingEl;
+    const {
+      offsetTop
+    } = listItemEl;
+
+    // Ensure that the offsetTop and entire height of the listItemEl are inside the visible window
+    return scrollTop <= offsetTop && offsetTop + this.itemHeight <= scrollTop + this.containerHeight;
   }
 
   /**
-   * Given a page number, generates the image data URL for the image of the page
-   * @param {number} pageNum  - The page number of the document
-   * @return {string} The data URL of the page image
+   * Gets the currently visible list items
+   * @return {Array<HTMLElement>} - the list of current visible list items
    */
-  getThumbnailDataURL(pageNum, thumbOptions) {
-    if (this.preloader?.preloadedImages?.[pageNum]) {
-      return Promise.resolve(this.preloader.preloadedImages[pageNum]);
-    }
-    const pdfDocument = this.pdfViewer?.pdfDocument;
-    if (!pdfDocument) {
-      return Promise.reject(new Error('PDF document not ready'));
+  getVisibleItems() {
+    if (!this.listEl) {
+      return [];
     }
-    const canvas = document.createElement('canvas');
-    const thumbnailImageWidth = thumbOptions && thumbOptions.thumbMaxWidth ? thumbOptions.thumbMaxWidth : THUMBNAIL_IMAGE_WIDTH;
-    return pdfDocument.getPage(pageNum).then(page => {
-      const rotation = ((this.pdfViewer.pagesRotation || 0) + page.rotate) % 360;
-      const viewport = page.getViewport({
-        scale: 1,
-        rotation
-      });
-      if (!viewport || !isFinite_default()(viewport.width) || !isFinite_default()(viewport.height)) {
-        return Promise.reject(new Error('Invalid page viewport'));
-      }
-      const {
-        width,
-        height
-      } = viewport;
-      // Get the current page w:h ratio in case it differs from the first page
-      const curPageRatio = width / height;
+    return this.getListItems().filter(itemEl => this.isVisible(itemEl)).map(itemEl => itemEl && itemEl.children && itemEl.children[0]);
+  }
 
-      // Handle the case where the current page's w:h ratio is less than the
-      // `pageRatio` which means that this page is probably more portrait than
-      // landscape
-      if (curPageRatio < this.pageRatio) {
-        // Set the canvas height to that of the thumbnail max height
-        canvas.height = Math.ceil(thumbnailImageWidth / this.pageRatio);
-        // Find the canvas width based on the current page ratio
-        canvas.width = canvas.height * curPageRatio;
-      } else {
-        // In case the current page ratio is same as the first page
-        // or in case it's larger (which means that it's wider), keep
-        // the width at the max thumbnail width
-        canvas.width = thumbnailImageWidth;
-        // Find the height based on the current page ratio
-        canvas.height = Math.ceil(thumbnailImageWidth / curPageRatio);
-      }
-      // The amount for which to scale down the current page
-      const {
-        width: canvasWidth
-      } = canvas;
-      const scale = canvasWidth / width;
-      return page.render({
-        canvasContext: canvas.getContext('2d'),
-        viewport: page.getViewport({
-          scale,
-          rotation
-        })
-      }).promise;
-    }).then(() => canvas.toDataURL());
+  /**
+   * Gets the list items of this.listEl as an array
+   * @return {Array<HTMLElement>} - the list items
+   */
+  getListItems() {
+    if (!this.listEl) {
+      return [];
+    }
+    return Array.prototype.slice.call(this.listEl.children);
   }
 }
-/* harmony default export */ const lib_Thumbnail = (Thumbnail);
+/* harmony default export */ const lib_VirtualScroller = (VirtualScroller);
 ;// ./src/lib/ThumbnailsSidebar.js
 function ThumbnailsSidebar_defineProperty(e, r, t) { return (r = ThumbnailsSidebar_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function ThumbnailsSidebar_toPropertyKey(t) { var i = ThumbnailsSidebar_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -32991,7 +33339,6 @@ function DocBaseViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) retur
 
 
 
-
 
 
 const DOC_FIRST_PAGES_ENABLED = 'docFirstPages.enabled';
@@ -33026,8 +33373,7 @@ const RANGE_CHUNK_SIZE_US = 1048576; // 1MB
 const RANGE_REQUEST_MINIMUM_SIZE = 26214400; // 25MB
 const SAFARI_PRINT_TIMEOUT_MS = 1000; // Wait 1s before trying to print
 const SCROLL_EVENT_THROTTLE_INTERVAL = 200;
-const GALLERY_MAX_PAGES = 200; // Hide gallery toggle for files above this page count, will increase in V2
-const THUMBNAILS_SIDEBAR_TRANSITION_TIME = 301; // 301ms
+const DocBaseViewer_THUMBNAILS_SIDEBAR_TRANSITION_TIME = 301; // 301ms
 const THUMBNAILS_SIDEBAR_TOGGLED_MAP_KEY = 'doc-thumbnails-toggled-map';
 const MAX_OPERATIONS = 320000; // Block PDFs with more than 320,000 drawing operations
 const MAX_OPERATION_PAGES = 5; // Check only the first 5 pages
@@ -33056,18 +33402,8 @@ class DocBaseViewer extends viewers_BaseViewer {
     //--------------------------------------------------------------------------
     /** @property {Thumbnail} - Thumbnail reference */
     DocBaseViewer_defineProperty(this, "advancedInsightsThumbs", void 0);
-    /** @property {number} - Page focused in gallery via Tab */
-    DocBaseViewer_defineProperty(this, "galleryFocusedPage", null);
-    /** @property {number} - Pending setTimeout ID for delayed gallery mount */
-    DocBaseViewer_defineProperty(this, "galleryMountTimeoutId", null);
-    /** @property {number} - Pending setTimeout ID for delayed sidebar setCurrentPage after gallery exit */
-    DocBaseViewer_defineProperty(this, "gallerySidebarTimeoutId", null);
-    /** @property {Thumbnail} - Dedicated gallery thumbnail instance (persists between opens) */
-    DocBaseViewer_defineProperty(this, "galleryThumbnail", void 0);
-    /** @property {boolean} - Whether gallery mode is active */
-    DocBaseViewer_defineProperty(this, "isGalleryOpen", false);
-    /** @property {boolean} - Whether sidebar was open before entering gallery */
-    DocBaseViewer_defineProperty(this, "sidebarWasOpen", false);
+    /** @property {GalleryController} - Owns gallery-view state, lifecycle, and toolbar gating */
+    DocBaseViewer_defineProperty(this, "galleryController", void 0);
     /** @property {PageTracker} - PageTracker instance */
     DocBaseViewer_defineProperty(this, "pageTracker", void 0);
     DocBaseViewer_defineProperty(this, "doc", void 0);
@@ -33088,7 +33424,6 @@ class DocBaseViewer extends viewers_BaseViewer {
     this.handleAnnotationCreateEvent = this.handleAnnotationCreateEvent.bind(this);
     this.handleAnnotationCreatorChangeEvent = this.handleAnnotationCreatorChangeEvent.bind(this);
     this.handleDocElKeydown = this.handleDocElKeydown.bind(this);
-    this.handleGalleryNavigate = this.handleGalleryNavigate.bind(this);
     this.handlePageSubmit = this.handlePageSubmit.bind(this);
     this.onThumbnailSelectHandler = this.onThumbnailSelectHandler.bind(this);
     this.pagechangingHandler = this.pagechangingHandler.bind(this);
@@ -33103,7 +33438,6 @@ class DocBaseViewer extends viewers_BaseViewer {
     this.setPage = this.setPage.bind(this);
     this.throttledScrollHandler = this.getScrollHandler().bind(this);
     this.toggleFindBar = this.toggleFindBar.bind(this);
-    this.toggleGallery = this.toggleGallery.bind(this);
     this.toggleThumbnails = this.toggleThumbnails.bind(this);
     this.updateExperiences = this.updateExperiences.bind(this);
     this.updateDiscoverabilityResinTag = this.updateDiscoverabilityResinTag.bind(this);
@@ -33158,6 +33492,16 @@ class DocBaseViewer extends viewers_BaseViewer {
     if (isFeatureEnabled(this.options.features, 'advancedContentInsights.enabled')) {
       this.pageTracker = new lib_PageTracker(advancedContentInsightsConfig, this.options.file);
     }
+    this.galleryController = new GalleryController({
+      containerEl: this.containerEl,
+      features: this.options.features,
+      getPdfViewer: () => this.pdfViewer,
+      getPreloader: () => this.preloader,
+      getThumbnailsSidebar: () => this.thumbnailsSidebar,
+      setPage: n => this.setPage(n),
+      toggleThumbnails: () => this.toggleThumbnails(),
+      requestUiUpdate: () => this.renderUI()
+    });
   }
 
   /**
@@ -33183,26 +33527,9 @@ class DocBaseViewer extends viewers_BaseViewer {
       this.findBar.destroy();
     }
 
-    // Cancel any pending gallery setTimeouts so they don't fire after teardown
-    if (this.galleryMountTimeoutId !== null) {
-      clearTimeout(this.galleryMountTimeoutId);
-      this.galleryMountTimeoutId = null;
-    }
-    if (this.gallerySidebarTimeoutId !== null) {
-      clearTimeout(this.gallerySidebarTimeoutId);
-      this.gallerySidebarTimeoutId = null;
-    }
-    if (this.galleryRoot) {
-      this.galleryRoot.unmount();
-      this.galleryRoot = null;
-    }
-    if (this.galleryEl) {
-      this.galleryEl.remove();
-      this.galleryEl = null;
-    }
-    if (this.galleryThumbnail) {
-      this.galleryThumbnail.destroy();
-      this.galleryThumbnail = null;
+    // Must run before pdfViewer teardown — galleryController holds Thumbnail render promises against pdfViewer
+    if (this.galleryController) {
+      this.galleryController.destroy();
     }
 
     // Clean up PDF network requests
@@ -33810,9 +34137,8 @@ class DocBaseViewer extends viewers_BaseViewer {
     if (this.thumbnailsSidebar) {
       this.thumbnailsSidebar.refresh();
     }
-    if (this.galleryThumbnail) {
-      this.galleryThumbnail.destroy();
-      this.galleryThumbnail = null;
+    if (this.galleryController) {
+      this.galleryController.handleRotate();
     }
     this.renderUI();
 
@@ -34378,7 +34704,7 @@ class DocBaseViewer extends viewers_BaseViewer {
     const canDownload = checkPermission(this.options.file, PERMISSION_DOWNLOAD);
     const isAnnotationsMode = this.currentAnnotatorViewMode === ANNOTATOR_VIEW_MODES.ANNOTATIONS;
     const canRotate = this.featureEnabled('rotate.enabled');
-    const canGallery = isFeatureEnabled(this.options.features, 'galleryView.enabled') && this.pdfViewer.pagesCount > 1 && this.pdfViewer.pagesCount <= GALLERY_MAX_PAGES;
+    const canGallery = this.galleryController.canRender(this.pdfViewer.pagesCount);
     this.controls.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(DocControls, {
       annotationColor: this.annotationModule.getColor(),
       annotationMode: this.annotationControlsFSM.getMode(),
@@ -34386,7 +34712,7 @@ class DocBaseViewer extends viewers_BaseViewer {
       hasDrawing: canAnnotate && showAnnotationsDrawingCreate && isAnnotationsMode,
       hasHighlight: canAnnotate && canDownload && isAnnotationsMode,
       hasRegion: canAnnotate && isAnnotationsMode,
-      isGalleryOpen: this.isGalleryOpen,
+      isGalleryOpen: this.galleryController.isOpen,
       isThumbnailsOpen: this.thumbnailsSidebar && this.thumbnailsSidebar.isOpen,
       maxScale: DocBaseViewer_MAX_SCALE,
       minScale: DocBaseViewer_MIN_SCALE,
@@ -34395,7 +34721,7 @@ class DocBaseViewer extends viewers_BaseViewer {
       onAnnotationModeEscape: this.handleAnnotationControlsEscape,
       onFindBarToggle: !this.isFindDisabled() ? this.toggleFindBar : undefined,
       onFullscreenToggle: this.toggleFullscreen,
-      onGalleryToggle: canGallery ? this.toggleGallery : undefined,
+      onGalleryToggle: canGallery ? this.galleryController.toggle : undefined,
       onPageChange: this.setPage,
       onPageSubmit: this.handlePageSubmit,
       onRotateLeft: canRotate ? this.rotateLeft : undefined,
@@ -34629,8 +34955,7 @@ class DocBaseViewer extends viewers_BaseViewer {
    */
   handleDocElKeydown(event) {
     const key = decodeKeydown(event);
-    if (key === 'Escape' && this.isGalleryOpen) {
-      this.toggleGallery();
+    if (key === 'Escape' && this.galleryController.handleEscape()) {
       return;
     }
     if (event.altKey && key.includes('Arrow')) {
@@ -34881,80 +35206,7 @@ class DocBaseViewer extends viewers_BaseViewer {
       // Remove the active classes to allow the container to be transitioned properly
       this.rootEl.classList.remove(CLASS_BOX_PREVIEW_THUMBNAILS_CLOSE_ACTIVE);
       this.rootEl.classList.remove(CLASS_BOX_PREVIEW_THUMBNAILS_OPEN_ACTIVE);
-    }, THUMBNAILS_SIDEBAR_TRANSITION_TIME);
-  }
-  mountGalleryGrid() {
-    if (this.galleryRoot) {
-      return;
-    }
-    if (!this.galleryThumbnail) {
-      this.galleryThumbnail = new lib_Thumbnail(this.pdfViewer, this.preloader);
-    }
-    this.galleryEl = document.createElement('div');
-    this.containerEl.appendChild(this.galleryEl);
-    this.galleryRoot = __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__(this.galleryEl);
-    this.galleryFocusedPage = this.pdfViewer.currentPageNumber;
-    this.galleryRoot.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryGrid, {
-      currentPage: this.pdfViewer.currentPageNumber,
-      onClose: this.toggleGallery,
-      onFocusChange: pageNum => {
-        this.galleryFocusedPage = pageNum;
-      },
-      onPageNavigate: this.handleGalleryNavigate,
-      pageCount: this.pdfViewer.pagesCount,
-      thumbnail: this.galleryThumbnail
-    }));
-  }
-  toggleGallery() {
-    this.isGalleryOpen = !this.isGalleryOpen;
-    if (this.isGalleryOpen) {
-      if (this.gallerySidebarTimeoutId !== null) {
-        clearTimeout(this.gallerySidebarTimeoutId);
-        this.gallerySidebarTimeoutId = null;
-      }
-      this.sidebarWasOpen = !!(this.thumbnailsSidebar && this.thumbnailsSidebar.isOpen);
-      if (this.sidebarWasOpen) {
-        this.toggleThumbnails();
-        this.galleryMountTimeoutId = setTimeout(() => {
-          this.galleryMountTimeoutId = null;
-          this.mountGalleryGrid();
-        }, THUMBNAILS_SIDEBAR_TRANSITION_TIME / 2);
-      } else {
-        this.mountGalleryGrid();
-      }
-    } else {
-      if (this.galleryMountTimeoutId !== null) {
-        clearTimeout(this.galleryMountTimeoutId);
-        this.galleryMountTimeoutId = null;
-      }
-      const navigateToPage = this.galleryFocusedPage && this.galleryFocusedPage !== this.pdfViewer.currentPageNumber ? this.galleryFocusedPage : null;
-      if (this.galleryRoot) {
-        this.galleryRoot.unmount();
-        this.galleryRoot = null;
-      }
-      if (this.galleryEl) {
-        this.galleryEl.remove();
-        this.galleryEl = null;
-      }
-      this.galleryFocusedPage = null;
-      if (this.sidebarWasOpen && this.thumbnailsSidebar && !this.thumbnailsSidebar.isOpen) {
-        this.toggleThumbnails();
-      }
-      if (navigateToPage) {
-        this.setPage(navigateToPage);
-        if (this.sidebarWasOpen && this.thumbnailsSidebar) {
-          this.gallerySidebarTimeoutId = setTimeout(() => {
-            this.gallerySidebarTimeoutId = null;
-            this.thumbnailsSidebar.setCurrentPage(navigateToPage);
-          }, THUMBNAILS_SIDEBAR_TRANSITION_TIME);
-        }
-      }
-    }
-    this.renderUI();
-  }
-  handleGalleryNavigate(pageNum) {
-    this.galleryFocusedPage = pageNum;
-    this.toggleGallery();
+    }, DocBaseViewer_THUMBNAILS_SIDEBAR_TRANSITION_TIME);
   }
 
   /**