blacklight-gallery 6.0.0 → 6.1.0

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

@@ -3,592 +3,1067 @@
   factory();
 })((function () { 'use strict';
 
-  /*!
-   * 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.js.map