blacklight-gallery 6.0.0 → 6.1.0

data/app/assets/javascripts/blacklight_gallery/blacklight-gallery.esm.js

@@ -1,587 +1,1062 @@
-/*!
- * imagesLoaded PACKAGED v5.0.0
- * JavaScript is all like "You images are done yet or what?"
- * MIT License
- */
-
 /**
- * EvEmitter v2.1.1
- * Lil' event emitter
- * MIT License
+ * CSS Grid Lanes Polyfill
+ *
+ * Polyfills the new `display: grid-lanes` CSS feature for browsers
+ * that don't support it natively. Based on the WebKit implementation
+ * described at: https://webkit.org/blog/17660/introducing-css-grid-lanes/
+ *
+ * Features supported:
+ * - display: grid-lanes
+ * - grid-template-columns / grid-template-rows for lane definition
+ * - gap, column-gap, row-gap
+ * - --flow-tolerance for placement sensitivity
+ * - Spanning items (grid-column: span N)
+ * - Explicit placement (grid-column: N / M)
+ * - Responsive auto-fill/auto-fit with minmax()
+ * - Both waterfall (columns) and brick (rows) layouts
+ *
+ * Features that do not work:
+ * - fr units with grid-template-rows
+ *
+ * @version 1.0.0
+ * @author Simon Willison
+ * @author ninjamar
+ * @license MIT
  */
 
-( function( global, factory ) {
-  // universal module definition
-  if ( typeof module == 'object' && module.exports ) {
-    // CommonJS - Browserify, Webpack
-    module.exports = factory();
-  } else {
-    // Browser globals
-    global.EvEmitter = factory();
-  }
+// ============================================================================
+// CONSTANTS & STATE
+// ============================================================================
 
-}( typeof window != 'undefined' ? window : undefined, function() {
+const POLYFILL_NAME = "GridLanesPolyfill";
+const POLYFILL_ATTR = "data-grid-lanes-polyfilled";
+const DEFAULT_TOLERANCE = 16; // ~1em in pixels
 
-function EvEmitter() {}
+// Cache computed styles to reduce redundant calls
+let styleMap = new WeakMap(); // Not const because map has no clear meaning it has to be initialized later
 
-let proto = EvEmitter.prototype;
+// ============================================================================
+// FEATURE DETECTION
+// ============================================================================
 
-proto.on = function( eventName, listener ) {
-  if ( !eventName || !listener ) return this;
-
-  // set events hash
-  let events = this._events = this._events || {};
-  // set listeners array
-  let listeners = events[ eventName ] = events[ eventName ] || [];
-  // only add once
-  if ( !listeners.includes( listener ) ) {
-    listeners.push( listener );
+/**
+ * Check if the browser natively supports display: grid-lanes
+ */
+function supportsGridLanes() {
+  if (typeof CSS === "undefined" || !CSS.supports) {
+    return false
   }
+  return CSS.supports("display", "grid-lanes")
+}
 
-  return this;
-};
-
-proto.once = function( eventName, listener ) {
-  if ( !eventName || !listener ) return this;
-
-  // add event
-  this.on( eventName, listener );
-  // set once flag
-  // set onceEvents hash
-  let onceEvents = this._onceEvents = this._onceEvents || {};
-  // set onceListeners object
-  let onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
-  // set flag
-  onceListeners[ listener ] = true;
-
-  return this;
-};
+// ============================================================================
+// PARSING UTILITIES
+// ============================================================================
 
-proto.off = function( eventName, listener ) {
-  let listeners = this._events && this._events[ eventName ];
-  if ( !listeners || !listeners.length ) return this;
+/**
+ * Parse a CSS length value to pixels
+ */
+function parseLengthToPixels(
+  value,
+  containerSize,
+  fontSize = 16,
+  rootFontSize = 16
+) {
+  if (!value || value === "auto" || value === "none") return null
+
+  const num = parseFloat(value);
+  if (isNaN(num)) return null
+
+  if (value.endsWith("px")) return num
+  if (value.endsWith("rem")) return num * rootFontSize
+  if (value.endsWith("em")) return num * fontSize
+  if (value.endsWith("ch")) return num * fontSize * 0.5 // Approximate
+  if (value.endsWith("lh")) return num * fontSize * 1.2 // Approximate line-height
+  if (value.endsWith("%")) return (num / 100) * containerSize
+  if (value.endsWith("vw")) return (num / 100) * window.innerWidth
+  if (value.endsWith("vh")) return (num / 100) * window.innerHeight
+  if (value.endsWith("vmin"))
+    return (num / 100) * Math.min(window.innerWidth, window.innerHeight)
+  if (value.endsWith("vmax"))
+    return (num / 100) * Math.max(window.innerWidth, window.innerHeight)
+  if (value.endsWith("fr")) return null // Handled separately
+
+  // Unitless number treated as pixels
+  if (!isNaN(num) && value === String(num)) return num
+
+  return null
+}
 
-  let index = listeners.indexOf( listener );
-  if ( index != -1 ) {
-    listeners.splice( index, 1 );
+/**
+ * Parse minmax() function
+ */
+function parseMinMax(value) {
+  const match = value.match(/minmax\(\s*([^,]+)\s*,\s*([^)]+)\s*\)/);
+  if (!match) return null
+  return {
+    min: match[1].trim(),
+    max: match[2].trim()
   }
+}
 
-  return this;
-};
-
-proto.emitEvent = function( eventName, args ) {
-  let listeners = this._events && this._events[ eventName ];
-  if ( !listeners || !listeners.length ) return this;
-
-  // copy over to avoid interference if .off() in listener
-  listeners = listeners.slice( 0 );
-  args = args || [];
-  // once stuff
-  let onceListeners = this._onceEvents && this._onceEvents[ eventName ];
-
-  for ( let listener of listeners ) {
-    let isOnce = onceListeners && onceListeners[ listener ];
-    if ( isOnce ) {
-      // remove listener
-      // remove before trigger to prevent recursion
-      this.off( eventName, listener );
-      // unset once flag
-      delete onceListeners[ listener ];
-    }
-    // trigger listener
-    listener.apply( this, args );
+/**
+ * Parse repeat() function
+ */
+function parseRepeat(value) {
+  const match = value.match(/repeat\(\s*([^,]+)\s*,\s*(.+)\s*\)/);
+  if (!match) return null
+  return {
+    count: match[1].trim(),
+    pattern: match[2].trim()
   }
+}
 
-  return this;
-};
-
-proto.allOff = function() {
-  delete this._events;
-  delete this._onceEvents;
-  return this;
-};
-
-return EvEmitter;
-
-} ) );
-/*!
- * imagesLoaded v5.0.0
- * JavaScript is all like "You images are done yet or what?"
- * MIT License
+/**
+ * Tokenize a grid template string
  */
-
-( function( window, factory ) {
-  // universal module definition
-  if ( typeof module == 'object' && module.exports ) {
-    // CommonJS
-    module.exports = factory( window, require('ev-emitter') );
-  } else {
-    // browser global
-    window.imagesLoaded = factory( window, window.EvEmitter );
+function tokenizeTemplate(template) {
+  const tokens = [];
+  let current = "";
+  let parenDepth = 0;
+
+  for (let i = 0; i < template.length; i++) {
+    const char = template[i];
+
+    if (char === "(") {
+      parenDepth++;
+      current += char;
+    } else if (char === ")") {
+      parenDepth--;
+      current += char;
+    } else if (char === " " && parenDepth === 0) {
+      if (current.trim()) {
+        tokens.push(current.trim());
+      }
+      current = "";
+    } else {
+      current += char;
+    }
   }
 
-} )( typeof window !== 'undefined' ? window : undefined,
-    function factory( window, EvEmitter ) {
-
-let $ = window.jQuery;
-let console = window.console;
-
-// -------------------------- helpers -------------------------- //
-
-// turn element or nodeList into an array
-function makeArray( obj ) {
-  // use object if already an array
-  if ( Array.isArray( obj ) ) return obj;
-
-  let isArrayLike = typeof obj == 'object' && typeof obj.length == 'number';
-  // convert nodeList to array
-  if ( isArrayLike ) return [ ...obj ];
+  if (current.trim()) {
+    tokens.push(current.trim());
+  }
 
-  // array of single index
-  return [ obj ];
+  return tokens
 }
 
-// -------------------------- imagesLoaded -------------------------- //
-
 /**
- * @param {[Array, Element, NodeList, String]} elem
- * @param {[Object, Function]} options - if function, use as callback
- * @param {Function} onAlways - callback function
- * @returns {ImagesLoaded}
+ * Calculate lane sizes from grid-template-columns/rows
  */
-function ImagesLoaded( elem, options, onAlways ) {
-  // coerce ImagesLoaded() without new, to be new ImagesLoaded()
-  if ( !( this instanceof ImagesLoaded ) ) {
-    return new ImagesLoaded( elem, options, onAlways );
-  }
-  // use elem as selector string
-  let queryElem = elem;
-  if ( typeof elem == 'string' ) {
-    queryElem = document.querySelectorAll( elem );
-  }
-  // bail if bad element
-  if ( !queryElem ) {
-    console.error(`Bad element for imagesLoaded ${queryElem || elem}`);
-    return;
+function calculateLaneSizes(
+  template,
+  containerSize,
+  gap,
+  fontSize,
+  rootFontSize
+) {
+  if (!template || template === "none" || template === "auto") {
+    return null
   }
 
-  this.elements = makeArray( queryElem );
-  this.options = {};
-  // shift arguments if no options set
-  if ( typeof options == 'function' ) {
-    onAlways = options;
-  } else {
-    Object.assign( this.options, options );
-  }
+  const availableSpace = containerSize;
+  let lanes = [];
+  let totalFr = 0;
+  let fixedSpace = 0;
+
+  // Parse the template
+  const tokens = tokenizeTemplate(template);
+
+  for (const token of tokens) {
+    // Handle repeat()
+    const repeatInfo = parseRepeat(token);
+    if (repeatInfo) {
+      const { count, pattern } = repeatInfo;
+      const patternTokens = tokenizeTemplate(pattern);
+
+      if (count === "auto-fill" || count === "auto-fit") {
+        // Calculate how many repetitions fit
+        let minSize = 0;
+
+        for (const pt of patternTokens) {
+          const minmax = parseMinMax(pt);
+          if (minmax) {
+            const minVal = parseLengthToPixels(
+              minmax.min,
+              containerSize,
+              fontSize,
+              rootFontSize
+            );
+            if (minmax.min === "max-content" || minmax.min === "min-content") {
+              minSize += 100; // Fallback estimate
+            } else if (minVal !== null) {
+              minSize += minVal;
+            }
+          } else {
+            const size = parseLengthToPixels(
+              pt,
+              containerSize,
+              fontSize,
+              rootFontSize
+            );
+            if (size !== null) {
+              minSize += size;
+            } else if (pt.endsWith("fr")) {
+              minSize += 100; // Minimum fallback for fr units
+            }
+          }
+        }
+
+        // Calculate repetitions
+        const patternCount = patternTokens.length;
+        const gapCount = patternCount - 1;
+        const minPatternSize = minSize + gapCount * gap;
+
+        let reps = Math.max(
+          1,
+          Math.floor((availableSpace + gap) / (minPatternSize + gap))
+        );
+
+        // Expand pattern
+        for (let i = 0; i < reps; i++) {
+          for (const pt of patternTokens) {
+            const minmax = parseMinMax(pt);
+            if (minmax) {
+              const minVal = parseLengthToPixels(
+                minmax.min,
+                containerSize,
+                fontSize,
+                rootFontSize
+              );
+              const maxVal = minmax.max.endsWith("fr")
+                ? { fr: parseFloat(minmax.max) }
+                : parseLengthToPixels(
+                    minmax.max,
+                    containerSize,
+                    fontSize,
+                    rootFontSize
+                  );
+
+              lanes.push({
+                min: minVal || 0,
+                max: maxVal,
+                size: 0
+              });
+
+              if (typeof maxVal === "object" && maxVal.fr) {
+                totalFr += maxVal.fr;
+              } else {
+                // Only add to fixedSpace if max is NOT fr (non-flexible tracks)
+                fixedSpace += minVal || 0;
+              }
+            } else if (pt.endsWith("fr")) {
+              const fr = parseFloat(pt);
+              lanes.push({ min: 0, max: { fr }, size: 0 });
+              totalFr += fr;
+            } else {
+              const size =
+                parseLengthToPixels(
+                  pt,
+                  containerSize,
+                  fontSize,
+                  rootFontSize
+                ) || 0;
+              lanes.push({ min: size, max: size, size });
+              fixedSpace += size;
+            }
+          }
+        }
+      } else {
+        // Fixed repeat count
+        const reps = parseInt(count, 10);
+        for (let i = 0; i < reps; i++) {
+          for (const pt of patternTokens) {
+            const size = parseLengthToPixels(
+              pt,
+              containerSize,
+              fontSize,
+              rootFontSize
+            );
+            if (pt.endsWith("fr")) {
+              const fr = parseFloat(pt);
+              lanes.push({ min: 0, max: { fr }, size: 0 });
+              totalFr += fr;
+            } else if (size !== null) {
+              lanes.push({ min: size, max: size, size });
+              fixedSpace += size;
+            }
+          }
+        }
+      }
+      continue
+    }
 
-  if ( onAlways ) this.on( 'always', onAlways );
+    // Handle minmax()
+    const minmax = parseMinMax(token);
+    if (minmax) {
+      const minVal = parseLengthToPixels(
+        minmax.min,
+        containerSize,
+        fontSize,
+        rootFontSize
+      );
+      const maxVal = minmax.max.endsWith("fr")
+        ? { fr: parseFloat(minmax.max) }
+        : parseLengthToPixels(minmax.max, containerSize, fontSize, rootFontSize);
+
+      lanes.push({ min: minVal || 0, max: maxVal, size: 0 });
+      if (typeof maxVal === "object" && maxVal.fr) {
+        totalFr += maxVal.fr;
+      } else {
+        // Only add to fixedSpace if max is NOT fr (non-flexible tracks)
+        fixedSpace += minVal || 0;
+      }
+      continue
+    }
 
-  this.getImages();
-  // add jQuery Deferred object
-  if ( $ ) this.jqDeferred = new $.Deferred();
+    // Handle fr units
+    if (token.endsWith("fr")) {
+      const fr = parseFloat(token);
+      lanes.push({ min: 0, max: { fr }, size: 0 });
+      totalFr += fr;
+      continue
+    }
 
-  // HACK check async to allow time to bind listeners
-  setTimeout( this.check.bind( this ) );
-}
+    // Handle fixed sizes
+    const size = parseLengthToPixels(
+      token,
+      containerSize,
+      fontSize,
+      rootFontSize
+    );
+    if (size !== null) {
+      lanes.push({ min: size, max: size, size });
+      fixedSpace += size;
+    }
+  }
 
-ImagesLoaded.prototype = Object.create( EvEmitter.prototype );
+  // Calculate final sizes
+  const totalGaps = Math.max(0, lanes.length - 1) * gap;
+  const flexSpace = Math.max(0, availableSpace - fixedSpace - totalGaps);
+  const frUnit = totalFr > 0 ? flexSpace / totalFr : 0;
 
-ImagesLoaded.prototype.getImages = function() {
-  this.images = [];
+  for (const lane of lanes) {
+    if (typeof lane.max === "object" && lane.max.fr) {
+      lane.size = lane.min + frUnit * lane.max.fr;
+    } else {
+      lane.size = lane.min;
+    }
+  }
 
-  // filter & find items if we have an item selector
-  this.elements.forEach( this.addElementImages, this );
-};
+  return lanes.map(l => l.size)
+}
 
-const elementNodeTypes = [ 1, 9, 11 ];
+// ============================================================================
+// STYLE & ITEM UTILITIES
+// ============================================================================
 
 /**
- * @param {Node} elem
+ * Get computed styles for grid-lanes properties
  */
-ImagesLoaded.prototype.addElementImages = function( elem ) {
-  // filter siblings
-  if ( elem.nodeName === 'IMG' ) {
-    this.addImage( elem );
-  }
-  // get background image on element
-  if ( this.options.background === true ) {
-    this.addElementBackgroundImages( elem );
+function getGridLanesStyles(element) {
+  const computed = window.getComputedStyle(element);
+  const fontSize = parseFloat(computed.getPropertyValue("font-size")) || 16;
+  const rootFontSize =
+    parseFloat(
+      window
+        .getComputedStyle(document.documentElement)
+        .getPropertyValue("font-size")
+    ) || 16;
+
+  // Get gap values
+  let gap =
+    computed.getPropertyValue("gap") ||
+    computed.getPropertyValue("grid-gap") ||
+    "0px";
+  let columnGap =
+    computed.getPropertyValue("column-gap") ||
+    computed.getPropertyValue("grid-column-gap") ||
+    gap;
+  let rowGap =
+    computed.getPropertyValue("row-gap") ||
+    computed.getPropertyValue("grid-row-gap") ||
+    gap;
+
+  // Handle combined gap shorthand like "24px 16px"
+  if (gap.includes(" ")) {
+    const [rg, cg] = gap.split(/\s+/);
+    rowGap = rg;
+    columnGap = cg;
   }
 
-  // find children
-  // no non-element nodes, #143
-  let { nodeType } = elem;
-  if ( !nodeType || !elementNodeTypes.includes( nodeType ) ) return;
+  // Parse flow-tolerance
+  let tolerance = DEFAULT_TOLERANCE;
+  const toleranceValue = computed.getPropertyValue("--flow-tolerance").trim();
+
+  if (toleranceValue) {
+    const parsed = parseLengthToPixels(
+      toleranceValue,
+      0,
+      fontSize,
+      rootFontSize
+    );
+    if (parsed !== null) tolerance = parsed;
+  }
 
-  let childImgs = elem.querySelectorAll('img');
-  // concat childElems to filterFound array
-  for ( let img of childImgs ) {
-    this.addImage( img );
+  return {
+    gridTemplateColumns: computed.getPropertyValue("grid-template-columns"),
+    gridTemplateRows: computed.getPropertyValue("grid-template-rows"),
+    columnGap:
+      parseLengthToPixels(
+        String(columnGap).split(" ")[0],
+        0,
+        fontSize,
+        rootFontSize
+      ) || 0,
+    rowGap:
+      parseLengthToPixels(
+        String(rowGap).split(" ")[0],
+        0,
+        fontSize,
+        rootFontSize
+      ) || 0,
+    fontSize,
+    rootFontSize,
+    tolerance
   }
+}
 
-  // get child background images
-  if ( typeof this.options.background == 'string' ) {
-    let children = elem.querySelectorAll( this.options.background );
-    for ( let child of children ) {
-      this.addElementBackgroundImages( child );
+/**
+ * Get item placement properties
+ */
+function getItemStyles(element) {
+  const computed = window.getComputedStyle(element);
+  const gridColumn = computed.gridColumn || computed.gridColumnStart;
+  const gridRow = computed.gridRow || computed.gridRowStart;
+
+  let columnSpan = 1;
+  let columnStart = null;
+  let columnEnd = null;
+  let rowSpan = 1;
+  let rowStart = null;
+  let rowEnd = null;
+
+  // Parse grid-column
+  if (gridColumn && gridColumn !== "auto") {
+    const spanMatch = gridColumn.match(/span\s+(\d+)/);
+    if (spanMatch) {
+      columnSpan = parseInt(spanMatch[1], 10);
+    } else if (gridColumn.includes("/")) {
+      const [start, end] = gridColumn.split("/").map(s => s.trim());
+      columnStart = parseInt(start, 10);
+      columnEnd = parseInt(end, 10);
+      if (!isNaN(columnStart) && !isNaN(columnEnd)) {
+        columnSpan = Math.abs(columnEnd - columnStart);
+      }
+    } else {
+      const num = parseInt(gridColumn, 10);
+      if (!isNaN(num)) {
+        columnStart = num;
+      }
     }
   }
-};
-
-const reURL = /url\((['"])?(.*?)\1\)/gi;
 
-ImagesLoaded.prototype.addElementBackgroundImages = function( elem ) {
-  let style = getComputedStyle( elem );
-  // Firefox returns null if in a hidden iframe https://bugzil.la/548397
-  if ( !style ) return;
-
-  // get url inside url("...")
-  let matches = reURL.exec( style.backgroundImage );
-  while ( matches !== null ) {
-    let url = matches && matches[2];
-    if ( url ) {
-      this.addBackground( url, elem );
+  // Parse grid-row
+  if (gridRow && gridRow !== "auto") {
+    const spanMatch = gridRow.match(/span\s+(\d+)/);
+    if (spanMatch) {
+      rowSpan = parseInt(spanMatch[1], 10);
+    } else if (gridRow.includes("/")) {
+      const [start, end] = gridRow.split("/").map(s => s.trim());
+      rowStart = parseInt(start, 10);
+      rowEnd = parseInt(end, 10);
+      if (!isNaN(rowStart) && !isNaN(rowEnd)) {
+        rowSpan = Math.abs(rowEnd - rowStart);
+      }
+    } else {
+      const num = parseInt(gridRow, 10);
+      if (!isNaN(num)) {
+        rowStart = num;
+      }
     }
-    matches = reURL.exec( style.backgroundImage );
   }
-};
 
-/**
- * @param {Image} img
- */
-ImagesLoaded.prototype.addImage = function( img ) {
-  let loadingImage = new LoadingImage( img );
-  this.images.push( loadingImage );
-};
-
-ImagesLoaded.prototype.addBackground = function( url, elem ) {
-  let background = new Background( url, elem );
-  this.images.push( background );
-};
-
-ImagesLoaded.prototype.check = function() {
-  this.progressedCount = 0;
-  this.hasAnyBroken = false;
-  // complete if no images
-  if ( !this.images.length ) {
-    this.complete();
-    return;
+  return {
+    columnSpan,
+    columnStart,
+    columnEnd,
+    rowSpan,
+    rowStart,
+    rowEnd
   }
+}
 
-  /* eslint-disable-next-line func-style */
-  let onProgress = ( image, elem, message ) => {
-    // HACK - Chrome triggers event before object properties have changed. #83
-    setTimeout( () => {
-      this.progress( image, elem, message );
-    } );
-  };
+// ============================================================================
+// STYLE CACHE MANAGEMENT
+// ============================================================================
 
-  this.images.forEach( function( loadingImage ) {
-    loadingImage.once( 'progress', onProgress );
-    loadingImage.check();
-  } );
-};
-
-ImagesLoaded.prototype.progress = function( image, elem, message ) {
-  this.progressedCount++;
-  this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
-  // progress event
-  this.emitEvent( 'progress', [ this, image, elem ] );
-  if ( this.jqDeferred && this.jqDeferred.notify ) {
-    this.jqDeferred.notify( this, image );
-  }
-  // check if completed
-  if ( this.progressedCount === this.images.length ) {
-    this.complete();
+/**
+ * Get computed style with caching to reduce redundant calls
+ */
+function catchedGetComputedStyle(elem, useCatch = true) {
+  if (useCatch && styleMap.has(elem)) {
+    return styleMap.get(elem)
   }
+  const style = window.getComputedStyle(elem);
+  styleMap.set(elem, style);
+  return style
+}
 
-  if ( this.options.debug && console ) {
-    console.log( `progress: ${message}`, image, elem );
-  }
-};
-
-ImagesLoaded.prototype.complete = function() {
-  let eventName = this.hasAnyBroken ? 'fail' : 'done';
-  this.isComplete = true;
-  this.emitEvent( eventName, [ this ] );
-  this.emitEvent( 'always', [ this ] );
-  if ( this.jqDeferred ) {
-    let jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';
-    this.jqDeferred[ jqMethod ]( this );
-  }
-};
+/**
+ * Clear cached style for an element
+ */
+function removeCachedStyle(elem) {
+  styleMap.delete(elem);
+}
 
-// --------------------------  -------------------------- //
+// ============================================================================
+// DOM UTILITIES
+// ============================================================================
 
-function LoadingImage( img ) {
-  this.img = img;
+/**
+ * Check if element has the grid-lanes polyfill marker
+ */
+function hasGridLanesProperty(elem) {
+  return (
+    catchedGetComputedStyle(elem)
+      .getPropertyValue("--grid-lanes-polyfill")
+      .trim() === "1"
+  )
 }
 
-LoadingImage.prototype = Object.create( EvEmitter.prototype );
-
-LoadingImage.prototype.check = function() {
-  // If complete is true and browser supports natural sizes,
-  // try to check for image status manually.
-  let isComplete = this.getIsImageComplete();
-  if ( isComplete ) {
-    // report based on naturalWidth
-    this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
-    return;
+/**
+ * Find all elements with --grid-lanes-polyfill down to the granular level.
+ * Prefers children over parent elements. Note: nested grid-lanes are not
+ * supported because the custom property cascades to all descendants.
+ *
+ * Uses TreeWalker for efficient traversal and routes through hasGridLanesProperty()
+ * to leverage the catchedGetComputedStyle cache. Correctly handles subtree skipping.
+ */
+function findElements(root = document.body) {
+  const results = [];
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+
+  let node = walker.nextNode(); // start from first child, skip root itself
+  while (node) {
+    if (hasGridLanesProperty(node)) {
+      results.push(node);
+      // Skip the entire subtree of this match by finding the next
+      // node outside of it: try nextSibling, then bubble up ancestors.
+      let next = null;
+      let ancestor = node;
+      while (ancestor && ancestor !== root) {
+        walker.currentNode = ancestor;
+        next = walker.nextSibling();
+        if (next) break
+        ancestor = ancestor.parentElement;
+      }
+      node = next; // null means no more nodes in tree
+    } else {
+      node = walker.nextNode();
+    }
   }
+  return results
+}
 
-  // If none of the checks above matched, simulate loading on detached element.
-  this.proxyImage = new Image();
-  // add crossOrigin attribute. #204
-  if ( this.img.crossOrigin ) {
-    this.proxyImage.crossOrigin = this.img.crossOrigin;
-  }
-  this.proxyImage.addEventListener( 'load', this );
-  this.proxyImage.addEventListener( 'error', this );
-  // bind to image as well for Firefox. #191
-  this.img.addEventListener( 'load', this );
-  this.img.addEventListener( 'error', this );
-  this.proxyImage.src = this.img.currentSrc || this.img.src;
-};
-
-LoadingImage.prototype.getIsImageComplete = function() {
-  // check for non-zero, non-undefined naturalWidth
-  // fixes Safari+InfiniteScroll+Masonry bug infinite-scroll#671
-  return this.img.complete && this.img.naturalWidth;
-};
-
-LoadingImage.prototype.confirm = function( isLoaded, message ) {
-  this.isLoaded = isLoaded;
-  let { parentNode } = this.img;
-  // emit progress with parent <picture> or self <img>
-  let elem = parentNode.nodeName === 'PICTURE' ? parentNode : this.img;
-  this.emitEvent( 'progress', [ this, elem, message ] );
-};
-
-// ----- events ----- //
-
-// trigger specified handler for event type
-LoadingImage.prototype.handleEvent = function( event ) {
-  let method = 'on' + event.type;
-  if ( this[ method ] ) {
-    this[ method ]( event );
+/**
+ * Process a subtree for grid-lanes containers
+ */
+function processSubtree(root, instances, options) {
+  const containers = findElements(root);
+  for (const container of containers) {
+    if (!instances.has(container) && !container.hasAttribute(POLYFILL_ATTR)) {
+      instances.set(container, new GridLanesLayout(container, options));
+    }
   }
-};
-
-LoadingImage.prototype.onload = function() {
-  this.confirm( true, 'onload' );
-  this.unbindEvents();
-};
-
-LoadingImage.prototype.onerror = function() {
-  this.confirm( false, 'onerror' );
-  this.unbindEvents();
-};
-
-LoadingImage.prototype.unbindEvents = function() {
-  this.proxyImage.removeEventListener( 'load', this );
-  this.proxyImage.removeEventListener( 'error', this );
-  this.img.removeEventListener( 'load', this );
-  this.img.removeEventListener( 'error', this );
-};
-
-// -------------------------- Background -------------------------- //
-
-function Background( url, element ) {
-  this.url = url;
-  this.element = element;
-  this.img = new Image();
 }
 
-// inherit LoadingImage prototype
-Background.prototype = Object.create( LoadingImage.prototype );
-
-Background.prototype.check = function() {
-  this.img.addEventListener( 'load', this );
-  this.img.addEventListener( 'error', this );
-  this.img.src = this.url;
-  // check if image is already complete
-  let isComplete = this.getIsImageComplete();
-  if ( isComplete ) {
-    this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
-    this.unbindEvents();
-  }
-};
-
-Background.prototype.unbindEvents = function() {
-  this.img.removeEventListener( 'load', this );
-  this.img.removeEventListener( 'error', this );
-};
-
-Background.prototype.confirm = function( isLoaded, message ) {
-  this.isLoaded = isLoaded;
-  this.emitEvent( 'progress', [ this, this.element, message ] );
-};
-
-// -------------------------- jQuery -------------------------- //
-
-ImagesLoaded.makeJQueryPlugin = function( jQuery ) {
-  jQuery = jQuery || window.jQuery;
-  if ( !jQuery ) return;
-
-  // set local variable
-  $ = jQuery;
-  // $().imagesLoaded()
-  $.fn.imagesLoaded = function( options, onAlways ) {
-    let instance = new ImagesLoaded( this, options, onAlways );
-    return instance.jqDeferred.promise( $( this ) );
-  };
-};
-// try making plugin
-ImagesLoaded.makeJQueryPlugin();
+// ============================================================================
+// GRID LANES LAYOUT CLASS
+// ============================================================================
 
-// --------------------------  -------------------------- //
+/**
+ * Main Grid Lanes layout class
+ */
+class GridLanesLayout {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = options;
+    this.isVertical = true; // true = waterfall (columns), false = brick (rows)
+    this.lanes = [];
+    this.laneHeights = [];
+    this.resizeObserver = null;
+    this.mutationObserver = null;
 
-return ImagesLoaded;
+    this.init();
+  }
 
-} );
+  init() {
+    // Mark as polyfilled
+    this.container.setAttribute(POLYFILL_ATTR, "true");
 
-/*!
- * Masonry PACKAGED v4.2.2
- * Cascading grid layout library
- * https://masonry.desandro.com
- * MIT License
- * by David DeSandro
- */
+    // Set up container styles
+    this.container.style.position = "relative";
+    this.container.style.display = "block";
 
-!function(t,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("jquery")):t.jQueryBridget=e(t,t.jQuery);}(window,function(t,e){function i(i,r,a){function h(t,e,n){var o,r="$()."+i+'("'+e+'")';return t.each(function(t,h){var u=a.data(h,i);if(!u)return void s(i+" not initialized. Cannot call methods, i.e. "+r);var d=u[e];if(!d||"_"==e.charAt(0))return void s(r+" is not a valid method");var l=d.apply(u,n);o=void 0===o?l:o;}),void 0!==o?o:t}function u(t,e){t.each(function(t,n){var o=a.data(n,i);o?(o.option(e),o._init()):(o=new r(n,e),a.data(n,i,o));});}a=a||e||t.jQuery,a&&(r.prototype.option||(r.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(true,this.options,t));}),a.fn[i]=function(t){if("string"==typeof t){var e=o.call(arguments,1);return h(this,t,e)}return u(this,t),this},n(a));}function n(t){!t||t&&t.bridget||(t.bridget=i);}var o=Array.prototype.slice,r=t.console,s="undefined"==typeof r?function(){}:function(t){r.error(t);};return n(e||t.jQuery),i}),function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e();}("undefined"!=typeof window?window:undefined,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return  -1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=true,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return  -1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var n=this._onceEvents&&this._onceEvents[t],o=0;o<i.length;o++){var r=i[o],s=n&&n[r];s&&(this.off(t,r),delete n[r]),r.apply(this,e);}return this}},e.allOff=function(){delete this._events,delete this._onceEvents;},t}),function(t,e){"function"==typeof define&&define.amd?define("get-size/get-size",e):"object"==typeof module&&module.exports?module.exports=e():t.getSize=e();}(window,function(){function t(t){var e=parseFloat(t),i=-1==t.indexOf("%")&&!isNaN(e);return i&&e}function e(){}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0;u>e;e++){var i=h[e];t[i]=0;}return t}function n(t){var e=getComputedStyle(t);return e||a("Style returned "+e+". Are you running this code in a hidden iframe on Firefox? See https://bit.ly/getsizebug1"),e}function o(){if(!d){d=true;var e=document.createElement("div");e.style.width="200px",e.style.padding="1px 2px 3px 4px",e.style.borderStyle="solid",e.style.borderWidth="1px 2px 3px 4px",e.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(e);var o=n(e);s=200==Math.round(t(o.width)),r.isBoxSizeOuter=s,i.removeChild(e);}}function r(e){if(o(),"string"==typeof e&&(e=document.querySelector(e)),e&&"object"==typeof e&&e.nodeType){var r=n(e);if("none"==r.display)return i();var a={};a.width=e.offsetWidth,a.height=e.offsetHeight;for(var d=a.isBorderBox="border-box"==r.boxSizing,l=0;u>l;l++){var c=h[l],f=r[c],m=parseFloat(f);a[c]=isNaN(m)?0:m;}var p=a.paddingLeft+a.paddingRight,g=a.paddingTop+a.paddingBottom,y=a.marginLeft+a.marginRight,v=a.marginTop+a.marginBottom,_=a.borderLeftWidth+a.borderRightWidth,z=a.borderTopWidth+a.borderBottomWidth,E=d&&s,b=t(r.width);b!==false&&(a.width=b+(E?0:p+_));var x=t(r.height);return x!==false&&(a.height=x+(E?0:g+z)),a.innerWidth=a.width-(p+_),a.innerHeight=a.height-(g+z),a.outerWidth=a.width+y,a.outerHeight=a.height+v,a}}var s,a="undefined"==typeof console?e:function(t){console.error(t);},h=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],u=h.length,d=false;return r}),function(t,e){"function"==typeof define&&define.amd?define("desandro-matches-selector/matches-selector",e):"object"==typeof module&&module.exports?module.exports=e():t.matchesSelector=e();}(window,function(){var t=function(){var t=window.Element.prototype;if(t.matches)return "matches";if(t.matchesSelector)return "matchesSelector";for(var e=["webkit","moz","ms","o"],i=0;i<e.length;i++){var n=e[i],o=n+"MatchesSelector";if(t[o])return o}}();return function(e,i){return e[t](i)}}),function(t,e){"function"==typeof define&&define.amd?define("fizzy-ui-utils/utils",["desandro-matches-selector/matches-selector"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("desandro-matches-selector")):t.fizzyUIUtils=e(t,t.matchesSelector);}(window,function(t,e){var i={};i.extend=function(t,e){for(var i in e)t[i]=e[i];return t},i.modulo=function(t,e){return (t%e+e)%e};var n=Array.prototype.slice;i.makeArray=function(t){if(Array.isArray(t))return t;if(null===t||void 0===t)return [];var e="object"==typeof t&&"number"==typeof t.length;return e?n.call(t):[t]},i.removeFrom=function(t,e){var i=t.indexOf(e);-1!=i&&t.splice(i,1);},i.getParent=function(t,i){for(;t.parentNode&&t!=document.body;)if(t=t.parentNode,e(t,i))return t},i.getQueryElement=function(t){return "string"==typeof t?document.querySelector(t):t},i.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t);},i.filterFindElements=function(t,n){t=i.makeArray(t);var o=[];return t.forEach(function(t){if(t instanceof HTMLElement){if(!n)return void o.push(t);e(t,n)&&o.push(t);for(var i=t.querySelectorAll(n),r=0;r<i.length;r++)o.push(i[r]);}}),o},i.debounceMethod=function(t,e,i){i=i||100;var n=t.prototype[e],o=e+"Timeout";t.prototype[e]=function(){var t=this[o];clearTimeout(t);var e=arguments,r=this;this[o]=setTimeout(function(){n.apply(r,e),delete r[o];},i);};},i.docReady=function(t){var e=document.readyState;"complete"==e||"interactive"==e?setTimeout(t):document.addEventListener("DOMContentLoaded",t);},i.toDashed=function(t){return t.replace(/(.)([A-Z])/g,function(t,e,i){return e+"-"+i}).toLowerCase()};var o=t.console;return i.htmlInit=function(e,n){i.docReady(function(){var r=i.toDashed(n),s="data-"+r,a=document.querySelectorAll("["+s+"]"),h=document.querySelectorAll(".js-"+r),u=i.makeArray(a).concat(i.makeArray(h)),d=s+"-options",l=t.jQuery;u.forEach(function(t){var i,r=t.getAttribute(s)||t.getAttribute(d);try{i=r&&JSON.parse(r);}catch(a){return void(o&&o.error("Error parsing "+s+" on "+t.className+": "+a))}var h=new e(t,i);l&&l.data(t,n,h);});});},i}),function(t,e){"function"==typeof define&&define.amd?define("outlayer/item",["ev-emitter/ev-emitter","get-size/get-size"],e):"object"==typeof module&&module.exports?module.exports=e(require("ev-emitter"),require("get-size")):(t.Outlayer={},t.Outlayer.Item=e(t.EvEmitter,t.getSize));}(window,function(t,e){function i(t){for(var e in t)return  false;return e=null,true}function n(t,e){t&&(this.element=t,this.layout=e,this.position={x:0,y:0},this._create());}function o(t){return t.replace(/([A-Z])/g,function(t){return "-"+t.toLowerCase()})}var r=document.documentElement.style,s="string"==typeof r.transition?"transition":"WebkitTransition",a="string"==typeof r.transform?"transform":"WebkitTransform",h={WebkitTransition:"webkitTransitionEnd",transition:"transitionend"}[s],u={transform:a,transition:s,transitionDuration:s+"Duration",transitionProperty:s+"Property",transitionDelay:s+"Delay"},d=n.prototype=Object.create(t.prototype);d.constructor=n,d._create=function(){this._transn={ingProperties:{},clean:{},onEnd:{}},this.css({position:"absolute"});},d.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t);},d.getSize=function(){this.size=e(this.element);},d.css=function(t){var e=this.element.style;for(var i in t){var n=u[i]||i;e[n]=t[i];}},d.getPosition=function(){var t=getComputedStyle(this.element),e=this.layout._getOption("originLeft"),i=this.layout._getOption("originTop"),n=t[e?"left":"right"],o=t[i?"top":"bottom"],r=parseFloat(n),s=parseFloat(o),a=this.layout.size;-1!=n.indexOf("%")&&(r=r/100*a.width),-1!=o.indexOf("%")&&(s=s/100*a.height),r=isNaN(r)?0:r,s=isNaN(s)?0:s,r-=e?a.paddingLeft:a.paddingRight,s-=i?a.paddingTop:a.paddingBottom,this.position.x=r,this.position.y=s;},d.layoutPosition=function(){var t=this.layout.size,e={},i=this.layout._getOption("originLeft"),n=this.layout._getOption("originTop"),o=i?"paddingLeft":"paddingRight",r=i?"left":"right",s=i?"right":"left",a=this.position.x+t[o];e[r]=this.getXValue(a),e[s]="";var h=n?"paddingTop":"paddingBottom",u=n?"top":"bottom",d=n?"bottom":"top",l=this.position.y+t[h];e[u]=this.getYValue(l),e[d]="",this.css(e),this.emitEvent("layout",[this]);},d.getXValue=function(t){var e=this.layout._getOption("horizontal");return this.layout.options.percentPosition&&!e?t/this.layout.size.width*100+"%":t+"px"},d.getYValue=function(t){var e=this.layout._getOption("horizontal");return this.layout.options.percentPosition&&e?t/this.layout.size.height*100+"%":t+"px"},d._transitionTo=function(t,e){this.getPosition();var i=this.position.x,n=this.position.y,o=t==this.position.x&&e==this.position.y;if(this.setPosition(t,e),o&&!this.isTransitioning)return void this.layoutPosition();var r=t-i,s=e-n,a={};a.transform=this.getTranslate(r,s),this.transition({to:a,onTransitionEnd:{transform:this.layoutPosition},isCleaning:true});},d.getTranslate=function(t,e){var i=this.layout._getOption("originLeft"),n=this.layout._getOption("originTop");return t=i?t:-t,e=n?e:-e,"translate3d("+t+"px, "+e+"px, 0)"},d.goTo=function(t,e){this.setPosition(t,e),this.layoutPosition();},d.moveTo=d._transitionTo,d.setPosition=function(t,e){this.position.x=parseFloat(t),this.position.y=parseFloat(e);},d._nonTransition=function(t){this.css(t.to),t.isCleaning&&this._removeStyles(t.to);for(var e in t.onTransitionEnd)t.onTransitionEnd[e].call(this);},d.transition=function(t){if(!parseFloat(this.layout.options.transitionDuration))return void this._nonTransition(t);var e=this._transn;for(var i in t.onTransitionEnd)e.onEnd[i]=t.onTransitionEnd[i];for(i in t.to)e.ingProperties[i]=true,t.isCleaning&&(e.clean[i]=true);if(t.from){this.css(t.from);this.element.offsetHeight;}this.enableTransition(t.to),this.css(t.to),this.isTransitioning=true;};var l="opacity,"+o(a);d.enableTransition=function(){if(!this.isTransitioning){var t=this.layout.options.transitionDuration;t="number"==typeof t?t+"ms":t,this.css({transitionProperty:l,transitionDuration:t,transitionDelay:this.staggerDelay||0}),this.element.addEventListener(h,this,false);}},d.onwebkitTransitionEnd=function(t){this.ontransitionend(t);},d.onotransitionend=function(t){this.ontransitionend(t);};var c={"-webkit-transform":"transform"};d.ontransitionend=function(t){if(t.target===this.element){var e=this._transn,n=c[t.propertyName]||t.propertyName;if(delete e.ingProperties[n],i(e.ingProperties)&&this.disableTransition(),n in e.clean&&(this.element.style[t.propertyName]="",delete e.clean[n]),n in e.onEnd){var o=e.onEnd[n];o.call(this),delete e.onEnd[n];}this.emitEvent("transitionEnd",[this]);}},d.disableTransition=function(){this.removeTransitionStyles(),this.element.removeEventListener(h,this,false),this.isTransitioning=false;},d._removeStyles=function(t){var e={};for(var i in t)e[i]="";this.css(e);};var f={transitionProperty:"",transitionDuration:"",transitionDelay:""};return d.removeTransitionStyles=function(){this.css(f);},d.stagger=function(t){t=isNaN(t)?0:t,this.staggerDelay=t+"ms";},d.removeElem=function(){this.element.parentNode.removeChild(this.element),this.css({display:""}),this.emitEvent("remove",[this]);},d.remove=function(){return s&&parseFloat(this.layout.options.transitionDuration)?(this.once("transitionEnd",function(){this.removeElem();}),void this.hide()):void this.removeElem()},d.reveal=function(){delete this.isHidden,this.css({display:""});var t=this.layout.options,e={},i=this.getHideRevealTransitionEndProperty("visibleStyle");e[i]=this.onRevealTransitionEnd,this.transition({from:t.hiddenStyle,to:t.visibleStyle,isCleaning:true,onTransitionEnd:e});},d.onRevealTransitionEnd=function(){this.isHidden||this.emitEvent("reveal");},d.getHideRevealTransitionEndProperty=function(t){var e=this.layout.options[t];if(e.opacity)return "opacity";for(var i in e)return i},d.hide=function(){this.isHidden=true,this.css({display:""});var t=this.layout.options,e={},i=this.getHideRevealTransitionEndProperty("hiddenStyle");e[i]=this.onHideTransitionEnd,this.transition({from:t.visibleStyle,to:t.hiddenStyle,isCleaning:true,onTransitionEnd:e});},d.onHideTransitionEnd=function(){this.isHidden&&(this.css({display:"none"}),this.emitEvent("hide"));},d.destroy=function(){this.css({position:"",left:"",right:"",top:"",bottom:"",transition:"",transform:""});},n}),function(t,e){"function"==typeof define&&define.amd?define("outlayer/outlayer",["ev-emitter/ev-emitter","get-size/get-size","fizzy-ui-utils/utils","./item"],function(i,n,o,r){return e(t,i,n,o,r)}):"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter"),require("get-size"),require("fizzy-ui-utils"),require("./item")):t.Outlayer=e(t,t.EvEmitter,t.getSize,t.fizzyUIUtils,t.Outlayer.Item);}(window,function(t,e,i,n,o){function r(t,e){var i=n.getQueryElement(t);if(!i)return void(h&&h.error("Bad element for "+this.constructor.namespace+": "+(i||t)));this.element=i,u&&(this.$element=u(this.element)),this.options=n.extend({},this.constructor.defaults),this.option(e);var o=++l;this.element.outlayerGUID=o,c[o]=this,this._create();var r=this._getOption("initLayout");r&&this.layout();}function s(t){function e(){t.apply(this,arguments);}return e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e}function a(t){if("number"==typeof t)return t;var e=t.match(/(^\d*\.?\d*)(\w*)/),i=e&&e[1],n=e&&e[2];if(!i.length)return 0;i=parseFloat(i);var o=m[n]||1;return i*o}var h=t.console,u=t.jQuery,d=function(){},l=0,c={};r.namespace="outlayer",r.Item=o,r.defaults={containerStyle:{position:"relative"},initLayout:true,originLeft:true,originTop:true,resize:true,resizeContainer:true,transitionDuration:"0.4s",hiddenStyle:{opacity:0,transform:"scale(0.001)"},visibleStyle:{opacity:1,transform:"scale(1)"}};var f=r.prototype;n.extend(f,e.prototype),f.option=function(t){n.extend(this.options,t);},f._getOption=function(t){var e=this.constructor.compatOptions[t];return e&&void 0!==this.options[e]?this.options[e]:this.options[t]},r.compatOptions={initLayout:"isInitLayout",horizontal:"isHorizontal",layoutInstant:"isLayoutInstant",originLeft:"isOriginLeft",originTop:"isOriginTop",resize:"isResizeBound",resizeContainer:"isResizingContainer"},f._create=function(){this.reloadItems(),this.stamps=[],this.stamp(this.options.stamp),n.extend(this.element.style,this.options.containerStyle);var t=this._getOption("resize");t&&this.bindResize();},f.reloadItems=function(){this.items=this._itemize(this.element.children);},f._itemize=function(t){for(var e=this._filterFindItemElements(t),i=this.constructor.Item,n=[],o=0;o<e.length;o++){var r=e[o],s=new i(r,this);n.push(s);}return n},f._filterFindItemElements=function(t){return n.filterFindElements(t,this.options.itemSelector)},f.getItemElements=function(){return this.items.map(function(t){return t.element})},f.layout=function(){this._resetLayout(),this._manageStamps();var t=this._getOption("layoutInstant"),e=void 0!==t?t:!this._isLayoutInited;this.layoutItems(this.items,e),this._isLayoutInited=true;},f._init=f.layout,f._resetLayout=function(){this.getSize();},f.getSize=function(){this.size=i(this.element);},f._getMeasurement=function(t,e){var n,o=this.options[t];o?("string"==typeof o?n=this.element.querySelector(o):o instanceof HTMLElement&&(n=o),this[t]=n?i(n)[e]:o):this[t]=0;},f.layoutItems=function(t,e){t=this._getItemsForLayout(t),this._layoutItems(t,e),this._postLayout();},f._getItemsForLayout=function(t){return t.filter(function(t){return !t.isIgnored})},f._layoutItems=function(t,e){if(this._emitCompleteOnItems("layout",t),t&&t.length){var i=[];t.forEach(function(t){var n=this._getItemLayoutPosition(t);n.item=t,n.isInstant=e||t.isLayoutInstant,i.push(n);},this),this._processLayoutQueue(i);}},f._getItemLayoutPosition=function(){return {x:0,y:0}},f._processLayoutQueue=function(t){this.updateStagger(),t.forEach(function(t,e){this._positionItem(t.item,t.x,t.y,t.isInstant,e);},this);},f.updateStagger=function(){var t=this.options.stagger;return null===t||void 0===t?void(this.stagger=0):(this.stagger=a(t),this.stagger)},f._positionItem=function(t,e,i,n,o){n?t.goTo(e,i):(t.stagger(o*this.stagger),t.moveTo(e,i));},f._postLayout=function(){this.resizeContainer();},f.resizeContainer=function(){var t=this._getOption("resizeContainer");if(t){var e=this._getContainerSize();e&&(this._setContainerMeasure(e.width,true),this._setContainerMeasure(e.height,false));}},f._getContainerSize=d,f._setContainerMeasure=function(t,e){if(void 0!==t){var i=this.size;i.isBorderBox&&(t+=e?i.paddingLeft+i.paddingRight+i.borderLeftWidth+i.borderRightWidth:i.paddingBottom+i.paddingTop+i.borderTopWidth+i.borderBottomWidth),t=Math.max(t,0),this.element.style[e?"width":"height"]=t+"px";}},f._emitCompleteOnItems=function(t,e){function i(){o.dispatchEvent(t+"Complete",null,[e]);}function n(){s++,s==r&&i();}var o=this,r=e.length;if(!e||!r)return void i();var s=0;e.forEach(function(e){e.once(t,n);});},f.dispatchEvent=function(t,e,i){var n=e?[e].concat(i):i;if(this.emitEvent(t,n),u)if(this.$element=this.$element||u(this.element),e){var o=u.Event(e);o.type=t,this.$element.trigger(o,i);}else this.$element.trigger(t,i);},f.ignore=function(t){var e=this.getItem(t);e&&(e.isIgnored=true);},f.unignore=function(t){var e=this.getItem(t);e&&delete e.isIgnored;},f.stamp=function(t){t=this._find(t),t&&(this.stamps=this.stamps.concat(t),t.forEach(this.ignore,this));},f.unstamp=function(t){t=this._find(t),t&&t.forEach(function(t){n.removeFrom(this.stamps,t),this.unignore(t);},this);},f._find=function(t){return t?("string"==typeof t&&(t=this.element.querySelectorAll(t)),t=n.makeArray(t)):void 0},f._manageStamps=function(){this.stamps&&this.stamps.length&&(this._getBoundingRect(),this.stamps.forEach(this._manageStamp,this));},f._getBoundingRect=function(){var t=this.element.getBoundingClientRect(),e=this.size;this._boundingRect={left:t.left+e.paddingLeft+e.borderLeftWidth,top:t.top+e.paddingTop+e.borderTopWidth,right:t.right-(e.paddingRight+e.borderRightWidth),bottom:t.bottom-(e.paddingBottom+e.borderBottomWidth)};},f._manageStamp=d,f._getElementOffset=function(t){var e=t.getBoundingClientRect(),n=this._boundingRect,o=i(t),r={left:e.left-n.left-o.marginLeft,top:e.top-n.top-o.marginTop,right:n.right-e.right-o.marginRight,bottom:n.bottom-e.bottom-o.marginBottom};return r},f.handleEvent=n.handleEvent,f.bindResize=function(){t.addEventListener("resize",this),this.isResizeBound=true;},f.unbindResize=function(){t.removeEventListener("resize",this),this.isResizeBound=false;},f.onresize=function(){this.resize();},n.debounceMethod(r,"onresize",100),f.resize=function(){this.isResizeBound&&this.needsResizeLayout()&&this.layout();},f.needsResizeLayout=function(){var t=i(this.element),e=this.size&&t;return e&&t.innerWidth!==this.size.innerWidth},f.addItems=function(t){var e=this._itemize(t);return e.length&&(this.items=this.items.concat(e)),e},f.appended=function(t){var e=this.addItems(t);e.length&&(this.layoutItems(e,true),this.reveal(e));},f.prepended=function(t){var e=this._itemize(t);if(e.length){var i=this.items.slice(0);this.items=e.concat(i),this._resetLayout(),this._manageStamps(),this.layoutItems(e,true),this.reveal(e),this.layoutItems(i);}},f.reveal=function(t){if(this._emitCompleteOnItems("reveal",t),t&&t.length){var e=this.updateStagger();t.forEach(function(t,i){t.stagger(i*e),t.reveal();});}},f.hide=function(t){if(this._emitCompleteOnItems("hide",t),t&&t.length){var e=this.updateStagger();t.forEach(function(t,i){t.stagger(i*e),t.hide();});}},f.revealItemElements=function(t){var e=this.getItems(t);this.reveal(e);},f.hideItemElements=function(t){var e=this.getItems(t);this.hide(e);},f.getItem=function(t){for(var e=0;e<this.items.length;e++){var i=this.items[e];if(i.element==t)return i}},f.getItems=function(t){t=n.makeArray(t);var e=[];return t.forEach(function(t){var i=this.getItem(t);i&&e.push(i);},this),e},f.remove=function(t){var e=this.getItems(t);this._emitCompleteOnItems("remove",e),e&&e.length&&e.forEach(function(t){t.remove(),n.removeFrom(this.items,t);},this);},f.destroy=function(){var t=this.element.style;t.height="",t.position="",t.width="",this.items.forEach(function(t){t.destroy();}),this.unbindResize();var e=this.element.outlayerGUID;delete c[e],delete this.element.outlayerGUID,u&&u.removeData(this.element,this.constructor.namespace);},r.data=function(t){t=n.getQueryElement(t);var e=t&&t.outlayerGUID;return e&&c[e]},r.create=function(t,e){var i=s(r);return i.defaults=n.extend({},r.defaults),n.extend(i.defaults,e),i.compatOptions=n.extend({},r.compatOptions),i.namespace=t,i.data=r.data,i.Item=s(o),n.htmlInit(i,t),u&&u.bridget&&u.bridget(t,i),i};var m={ms:1,s:1e3};return r.Item=o,r}),function(t,e){"function"==typeof define&&define.amd?define(["outlayer/outlayer","get-size/get-size"],e):"object"==typeof module&&module.exports?module.exports=e(require("outlayer"),require("get-size")):t.Masonry=e(t.Outlayer,t.getSize);}(window,function(t,e){var i=t.create("masonry");i.compatOptions.fitWidth="isFitWidth";var n=i.prototype;return n._resetLayout=function(){this.getSize(),this._getMeasurement("columnWidth","outerWidth"),this._getMeasurement("gutter","outerWidth"),this.measureColumns(),this.colYs=[];for(var t=0;t<this.cols;t++)this.colYs.push(0);this.maxY=0,this.horizontalColIndex=0;},n.measureColumns=function(){if(this.getContainerWidth(),!this.columnWidth){var t=this.items[0],i=t&&t.element;this.columnWidth=i&&e(i).outerWidth||this.containerWidth;}var n=this.columnWidth+=this.gutter,o=this.containerWidth+this.gutter,r=o/n,s=n-o%n,a=s&&1>s?"round":"floor";r=Math[a](r),this.cols=Math.max(r,1);},n.getContainerWidth=function(){var t=this._getOption("fitWidth"),i=t?this.element.parentNode:this.element,n=e(i);this.containerWidth=n&&n.innerWidth;},n._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,i=e&&1>e?"round":"ceil",n=Math[i](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var o=this.options.horizontalOrder?"_getHorizontalColPosition":"_getTopColPosition",r=this[o](n,t),s={x:this.columnWidth*r.col,y:r.y},a=r.y+t.size.outerHeight,h=n+r.col,u=r.col;h>u;u++)this.colYs[u]=a;return s},n._getTopColPosition=function(t){var e=this._getTopColGroup(t),i=Math.min.apply(Math,e);return {col:e.indexOf(i),y:i}},n._getTopColGroup=function(t){if(2>t)return this.colYs;for(var e=[],i=this.cols+1-t,n=0;i>n;n++)e[n]=this._getColGroupY(n,t);return e},n._getColGroupY=function(t,e){if(2>e)return this.colYs[t];var i=this.colYs.slice(t,t+e);return Math.max.apply(Math,i)},n._getHorizontalColPosition=function(t,e){var i=this.horizontalColIndex%this.cols,n=t>1&&i+t>this.cols;i=n?0:i;var o=e.size.outerWidth&&e.size.outerHeight;return this.horizontalColIndex=o?i+t:this.horizontalColIndex,{col:i,y:this._getColGroupY(i,t)}},n._manageStamp=function(t){var i=e(t),n=this._getElementOffset(t),o=this._getOption("originLeft"),r=o?n.left:n.right,s=r+i.outerWidth,a=Math.floor(r/this.columnWidth);a=Math.max(0,a);var h=Math.floor(s/this.columnWidth);h-=s%this.columnWidth?0:1,h=Math.min(this.cols-1,h);for(var u=this._getOption("originTop"),d=(u?n.top:n.bottom)+i.outerHeight,l=a;h>=l;l++)this.colYs[l]=Math.max(d,this.colYs[l]);},n._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this._getOption("fitWidth")&&(t.width=this._getContainerFitWidth()),t},n._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return (this.cols-t)*this.columnWidth-this.gutter},n.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!=this.containerWidth},i});
+    // Initial layout
+    this.layout();
 
-(function($){
-  var Slideshow = function (element, options) {
-    this.$element = $(element);
-    this.options  = options;
-    this.paused   = false;
-    this.activeIndex = 0;
+    // Set up observers
+    this.setupObservers();
+  }
 
-    this.init = function() {
-      this.$items = this.$element.find('.item');
+  setupObservers() {
+    // Debounce layout calls to avoid excessive recalculations
+    let layoutTimeout = null;
+    const debouncedLayout = () => {
+      if (layoutTimeout) clearTimeout(layoutTimeout);
+      layoutTimeout = setTimeout(() => this.layout(), 16);
     };
 
-    this.attachEvents();
-    this.init();
-  };
-
-
-  Slideshow.prototype = {
+    // Resize observer for responsive layouts AND child size changes
+    this.resizeObserver = new ResizeObserver(entries => {
+      // Check if it's the container or a child that resized
+      for (const entry of entries) {
+        if (
+          entry.target === this.container ||
+          entry.target.parentElement === this.container
+        ) {
+          debouncedLayout();
+          break
+        }
+      }
+    });
+    this.resizeObserver.observe(this.container);
+
+    // Observe all direct children for size changes
+    for (const child of this.container.children) {
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        this.resizeObserver.observe(child);
+      }
+    }
 
-    slide: function(item) {
-      var $item     = $(item),
-          $frame    = $item.find('.frame');
+    // Mutation observer for dynamic content
+    this.mutationObserver = new MutationObserver(mutations => {
+      let shouldRelayout = false;
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          // Observe new children
+          for (const node of mutation.addedNodes) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              this.resizeObserver.observe(node);
+              // Also watch for images in new nodes
+              this.observeImages(node);
+            }
+          }
+          shouldRelayout = true;
+        } else if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "style"
+        ) {
+          shouldRelayout = true;
+        }
+      }
+      if (shouldRelayout) {
+        debouncedLayout();
+      }
+    });
+    this.mutationObserver.observe(this.container, {
+      childList: true,
+      subtree: false,
+      attributes: true,
+      attributeFilter: ["style", "class"]
+    });
+
+    // Observe all images for load events
+    this.observeImages(this.container);
+  }
 
-      this.$items.hide();
-      $item.show();
+  observeImages(root) {
+    const images = root.querySelectorAll("img");
+    for (const img of images) {
+      if (!img.complete) {
+        img.addEventListener("load", () => this.layout(), { once: true });
+        img.addEventListener("error", () => this.layout(), { once: true });
+      }
+    }
+  }
 
-      Math.round($item.height() - $frame.height())/2;
-      this.activeIndex = this.$items.index(item);
+  layout() {
+    const styles = getGridLanesStyles(this.container);
+    const containerRect = this.container.getBoundingClientRect();
+
+    // Determine direction based on which template is defined
+    const hasColumns =
+      styles.gridTemplateColumns &&
+      styles.gridTemplateColumns !== "none" &&
+      !styles.gridTemplateColumns.startsWith("auto");
+    const hasRows =
+      styles.gridTemplateRows &&
+      styles.gridTemplateRows !== "none" &&
+      !styles.gridTemplateRows.startsWith("auto");
+
+    this.isVertical = hasColumns || !hasRows;
+
+    // Calculate lane sizes
+    if (this.isVertical) {
+      this.lanes = calculateLaneSizes(
+        styles.gridTemplateColumns,
+        containerRect.width,
+        styles.columnGap,
+        styles.fontSize,
+        styles.rootFontSize
+      ) || [containerRect.width];
+    } else {
+      this.lanes = calculateLaneSizes(
+        styles.gridTemplateRows,
+        containerRect.height,
+        styles.rowGap,
+        styles.fontSize,
+        styles.rootFontSize
+      ) || [containerRect.height];
+    }
 
-      if (this.options.autoPlay && !this.paused) this.play();
+    // Initialize lane positions (heights for vertical, widths for horizontal)
+    this.laneHeights = new Array(this.lanes.length).fill(0);
+
+    // Get all direct children
+    const items = Array.from(this.container.children).filter(
+      el =>
+        el.nodeType === Node.ELEMENT_NODE &&
+        window.getComputedStyle(el).display !== "none"
+    );
+
+    // Separate explicitly placed items from auto-placed items
+    const explicitItems = [];
+    const autoItems = [];
+
+    for (const item of items) {
+      const itemStyles = getItemStyles(item);
+      if (this.isVertical && itemStyles.columnStart !== null) {
+        explicitItems.push({ element: item, styles: itemStyles });
+      } else if (!this.isVertical && itemStyles.rowStart !== null) {
+        explicitItems.push({ element: item, styles: itemStyles });
+      } else {
+        autoItems.push({ element: item, styles: itemStyles });
+      }
+    }
 
-      return this;
-    },
+    // Place explicitly positioned items first
+    for (const { element, styles: itemStyles } of explicitItems) {
+      this.placeExplicitItem(element, itemStyles, styles);
+    }
 
-    play: function() {
-      this.paused = false;
+    // Place auto-positioned items
+    for (const { element, styles: itemStyles } of autoItems) {
+      this.placeAutoItem(element, itemStyles, styles);
+    }
 
-      if (this.interval) clearInterval(this.interval);
-      this.interval = setInterval($.proxy(this.next, this), this.options.interval);
-    },
+    // Set container height
+    const containerHeight = Math.max(...this.laneHeights);
+    this.container.style.minHeight = `${containerHeight}px`;
+  }
 
-    pause: function() {
-      this.paused = true;
-      this.interval = clearInterval(this.interval);
+  placeExplicitItem(element, itemStyles, containerStyles) {
+    const gap = this.isVertical
+      ? containerStyles.columnGap
+      : containerStyles.rowGap;
+    const crossGap = this.isVertical
+      ? containerStyles.rowGap
+      : containerStyles.columnGap;
+
+    let laneIndex;
+    let span;
+
+    if (this.isVertical) {
+      // Handle negative indices
+      laneIndex = itemStyles.columnStart;
+      if (laneIndex < 0) {
+        laneIndex = this.lanes.length + laneIndex + 1;
+      }
+      laneIndex = Math.max(0, Math.min(laneIndex - 1, this.lanes.length - 1));
+      span = itemStyles.columnSpan;
+    } else {
+      laneIndex = itemStyles.rowStart;
+      if (laneIndex < 0) {
+        laneIndex = this.lanes.length + laneIndex + 1;
+      }
+      laneIndex = Math.max(0, Math.min(laneIndex - 1, this.lanes.length - 1));
+      span = itemStyles.rowSpan;
+    }
 
-      return this;
-    },
+    // Calculate position
+    let position = 0;
+    for (let i = 0; i < laneIndex; i++) {
+      position += this.lanes[i] + gap;
+    }
 
-    startAt: function(pos) {
-      this.to(pos);
-    },
+    // Calculate width (for spanning)
+    let size = 0;
+    const endLane = Math.min(laneIndex + span, this.lanes.length);
+    for (let i = laneIndex; i < endLane; i++) {
+      size += this.lanes[i];
+      if (i < endLane - 1) size += gap;
+    }
 
-    next: function() {
-      return this.to('next');
-    },
+    // Get the tallest lane in the span
+    let maxHeight = 0;
+    for (let i = laneIndex; i < endLane; i++) {
+      maxHeight = Math.max(maxHeight, this.laneHeights[i]);
+    }
 
-    to: function(pos) {
-      if (pos === 'next') pos = this.activeIndex + 1;
-      if (pos === 'prev') pos = this.activeIndex - 1;
+    // Position the element
+    element.style.position = "absolute";
+
+    if (this.isVertical) {
+      element.style.left = `${position}px`;
+      element.style.top = `${maxHeight > 0 ? maxHeight + crossGap : 0}px`;
+      element.style.width = `${size}px`;
+    } else {
+      element.style.top = `${position}px`;
+      element.style.left = `${maxHeight > 0 ? maxHeight + crossGap : 0}px`;
+      element.style.height = `${size}px`;
+      element.style.width = "";
+    }
 
-      return this.slide(this.$items[this.getValidIndex(pos)]);
-    },
+    // Update lane heights
+    const itemRect = element.getBoundingClientRect();
+    const itemSize = this.isVertical ? itemRect.height : itemRect.width;
+    const newHeight = maxHeight + (maxHeight > 0 ? crossGap : 0) + itemSize;
 
-    getValidIndex: function(index) {
-      if (typeof index === 'undefined' || index > (this.$items.length - 1)) index = 0;
-      if (index < 0) index = this.$items.length - 1;
+    for (let i = laneIndex; i < endLane; i++) {
+      this.laneHeights[i] = newHeight;
+    }
+  }
 
-      return index;
-    },
+  placeAutoItem(element, itemStyles, containerStyles) {
+    const gap = this.isVertical
+      ? containerStyles.columnGap
+      : containerStyles.rowGap;
+    const crossGap = this.isVertical
+      ? containerStyles.rowGap
+      : containerStyles.columnGap;
+    const tolerance = containerStyles.tolerance;
+    const span = Math.min(
+      this.isVertical ? itemStyles.columnSpan : itemStyles.rowSpan,
+      this.lanes.length
+    );
+
+    // Find the best lane(s) considering tolerance
+    let bestLane = 0;
+    let bestHeight = Infinity;
+
+    for (let i = 0; i <= this.lanes.length - span; i++) {
+      // Get the max height across the span
+      let maxHeight = 0;
+      for (let j = i; j < i + span; j++) {
+        maxHeight = Math.max(maxHeight, this.laneHeights[j]);
+      }
+
+      // Use tolerance to determine if this is meaningfully better
+      if (bestHeight - maxHeight > tolerance) {
+        bestHeight = maxHeight;
+        bestLane = i;
+      }
+      // Within tolerance: keep the current (earlier) bestLane — spec prefers earliest equivalent lane
+    }
 
-    attachEvents: function() {
-      this.$element.find('.frame img');
-          var _this = this;
+    // Calculate position
+    let position = 0;
+    for (let i = 0; i < bestLane; i++) {
+      position += this.lanes[i] + gap;
+    }
 
-      $(document).on('click', '[data-behavior="pause-slideshow"]', function(e) {
-        e.preventDefault();
+    // Calculate size (for spanning)
+    let size = 0;
+    const endLane = Math.min(bestLane + span, this.lanes.length);
+    for (let i = bestLane; i < endLane; i++) {
+      size += this.lanes[i];
+      if (i < endLane - 1) size += gap;
+    }
 
-        _this.pause();
-      });
+    // Position the element
+    element.style.position = "absolute";
+
+    if (this.isVertical) {
+      element.style.left = `${position}px`;
+      element.style.top = `${bestHeight > 0 ? bestHeight + crossGap : 0}px`;
+      element.style.width = `${size}px`;
+    } else {
+      element.style.top = `${position}px`;
+      element.style.left = `${bestHeight > 0 ? bestHeight + crossGap : 0}px`;
+      element.style.height = `${size}px`;
+      element.style.width = "";
+    }
 
-      $(document).on('click', '[data-behavior="start-slideshow"]', function(e) {
-        e.preventDefault();
+    // Update lane heights
+    const itemRect = element.getBoundingClientRect();
+    const itemSize = this.isVertical ? itemRect.height : itemRect.width;
+    const newHeight = bestHeight + (bestHeight > 0 ? crossGap : 0) + itemSize;
 
-        _this.play();
-      });
+    for (let i = bestLane; i < endLane; i++) {
+      this.laneHeights[i] = newHeight;
+    }
+  }
 
-      $(document).on('click', '[data-slide], [data-bs-slide], [data-slide-to], [data-bs-slide-to]', function(e) {
-        e.preventDefault();
+  destroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
 
-        const pos = parseInt($(this).attr('data-slide-to') || $(this).attr('data-bs-slide-to'), 10) ||
-                $(this).attr('data-slide') ||
-                $(this).attr('data-bs-slide');
+    this.container.removeAttribute(POLYFILL_ATTR);
+    this.container.style.position = "";
+    this.container.style.display = "";
+    this.container.style.minHeight = "";
+
+    // Reset item styles
+    for (const item of this.container.children) {
+      if (item.nodeType === Node.ELEMENT_NODE) {
+        item.style.position = "";
+        item.style.left = "";
+        item.style.top = "";
+        item.style.width = "";
+        item.style.height = "";
+      }
+    }
+  }
 
-        if (pos === 'next' || pos === 'prev') _this.pause();
-        _this.to(pos);
-      });
+  refresh() {
+    this.layout();
+  }
+}
 
-      // pause slideshow on modal close
-      $('#slideshow-modal').on('hidden.bs.modal', function() {
-        _this.pause();
-      });
-    }
-  };
+// ============================================================================
+// PUBLIC API
+// ============================================================================
 
+/**
+ * Initialize the polyfill on all grid-lanes elements in the document
+ */
+function init(options = {}) {
+  // Check if native support exists
+  if (supportsGridLanes() && !options.force) {
+    console.log(
+      `${POLYFILL_NAME}: Native support detected, polyfill not needed.`
+    );
+    return { supported: true, instances: [] }
+  }
 
-  Slideshow.DEFAULTS = {
-    autoPlay: false,
-    interval: 5000 // in milliseconds
-  };
+  const instances = new Map();
 
+  // Process existing containers
+  const containers = findElements();
 
-  $.fn.slideshow = function(option) {
-    return this.each(function() {
-      var $this = $(this);
-      var data  = $this.data('slideshow');
-      var options = $.extend({}, Slideshow.DEFAULTS, $this.data(), typeof option == 'object' && option);
+  for (const container of containers) {
+    if (!container.hasAttribute(POLYFILL_ATTR)) {
+      instances.set(container, new GridLanesLayout(container, options));
+    }
+  }
 
-      if (!data) $this.data('slideshow', (data = new Slideshow(this, options)));
-    })
+  // Watch for new stylesheets and elements
+  // Debounce for ancestor attribute changes to avoid excessive relayouts
+  let ancestorLayoutTimeout = null;
+  const pendingAncestorInstances = new Map();
+  const debouncedRelayoutAll = () => {
+    if (ancestorLayoutTimeout) clearTimeout(ancestorLayoutTimeout);
+    ancestorLayoutTimeout = setTimeout(() => {
+      for (const [container, instance] of pendingAncestorInstances) {
+        if (instances.has(container)) {
+          removeCachedStyle(container);
+          instance.refresh();
+        }
+      }
+      pendingAncestorInstances.clear();
+    }, 16);
   };
 
-})(jQuery);
-
-(function($){
-  $.fn.BlacklightMasonry = function() {
-    var container = this;
-    if(container.length > 0) {
-      container.imagesLoaded().progress(function(){
-        container.masonry($.fn.BlacklightMasonry.options);
-      });
+  const observer = new MutationObserver(mutations => {
+    for (const mutation of mutations) {
+      if (mutation.type === "attributes") {
+        removeCachedStyle(mutation.target);
+        // If the changed node is an ancestor of (or is) a container,
+        // cascaded/inherited styles on the container may have changed.
+        for (const [container] of instances) {
+          if (mutation.target.contains(container)) {
+            pendingAncestorInstances.set(container, instances.get(container));
+          }
+        }
+        if (pendingAncestorInstances.size > 0) {
+          debouncedRelayoutAll();
+        }
+      }
+
+      if (mutation.type === "childList") {
+        for (const node of mutation.addedNodes) {
+          if (node.nodeType !== node.ELEMENT_NODE) continue
+
+          processSubtree(node, instances, options);
+        }
+        for (const node of mutation.removedNodes) {
+          if (node.nodeType !== node.ELEMENT_NODE) continue
+          if (instances.has(node)) {
+            instances.get(node).destroy();
+            instances.delete(node);
+          }
+          styleMap.delete(node);
+        }
+      }
     }
-  };
+  });
+
+  observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["style", "class"]
+  });
+
+  console.log(
+    `${POLYFILL_NAME}: Initialized, ${instances.size} container(s) found.`
+  );
+
+  return {
+    supported: false,
+    instances,
+    observer,
+    refresh() {
+      for (const instance of instances.values()) {
+        instance.refresh();
+      }
+    },
+    destroy() {
+      observer.disconnect();
+      for (const instance of instances.values()) {
+        instance.destroy();
+      }
+      instances.clear();
+      // TODO: Ensure GC is triggered
+    }
+  }
+}
 
-  $.fn.BlacklightMasonry.options = { gutter: 8 };
-})(jQuery);
+document.addEventListener("DOMContentLoaded", () => {
+  if (!supportsGridLanes()) {
+    init({ force: true });
+  }
+});
+
+// When a thumbnail opens the slideshow modal, show the slide for that thumbnail.
+// Bootstrap's carousel reads the current slide from the DOM, so moving the
+// active class before the modal is shown is enough.
+document.addEventListener("show.bs.modal", (event) => {
+  const slideTo = event.relatedTarget?.dataset.bsSlideTo;
+  const items = event.target.querySelectorAll(".carousel-item");
+  if (slideTo === undefined || !items[slideTo]) return
+
+  items.forEach((item) => item.classList.remove("active"));
+  items[slideTo].classList.add("active");
+});
 //# sourceMappingURL=blacklight-gallery.esm.js.map