@depict-ai/ui 4.7.30 → 4.7.32

package/ES10/index.cjs

@@ -111,7 +111,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.30";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.32";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -383,7 +383,7 @@ function $f8f375d6245ffff2$export$791ef57e62e21c3f(_ref) {
   return $52FdA$solidjs.createMemo(() => $f8f375d6245ffff2$export$92aa5d691d588f3f({
     wrapped_blocks_: get_wrapped_blocks_(),
     n_cols_currently_showing_: n_cols_currently_showing_()
-  }));
+  }).content_blocks_by_index_);
 }
 function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
   let {
@@ -391,13 +391,15 @@ function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
     n_cols_currently_showing_: n_cols_currently_showing_
   } = _ref2;
   // This computation should be quite cheap since it just moves around things into an array
-  const content_blocks_by_index = [];
+  const content_blocks_by_index_ = [];
   const constructed_block_arrays = new WeakSet();
   // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
-  const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+  const displaced_products_ = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
   if (!n_cols_currently_showing_)
     // Nope out of here if we don't know how many columns are showing
-    return content_blocks_by_index;
+    return {
+      content_blocks_by_index_: content_blocks_by_index_
+    };
   for (let i = 0; i < wrapped_blocks_.length; i++) {
     // i = row to show at
     const block = wrapped_blocks_[i];
@@ -414,25 +416,25 @@ function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
     // Calculate displacement of us by content blocks above us
     let displacement_by_added_blocks = 0;
     for (let j = 0; j < i; j++) {
-      const row = displaced_products[j];
+      const row = displaced_products_[j];
       if (row === undefined) continue; // there were no blocks in this row
       let displaced_items_in_row;
       if (typeof row === "number") displaced_items_in_row = row;else {
         displaced_items_in_row = row.filter(item => item).length;
-        displaced_products[j] = displaced_items_in_row;
+        displaced_products_[j] = displaced_items_in_row;
       }
       displacement_by_added_blocks += displaced_items_in_row;
     }
     const index_of_us_in_row = target_index - index_of_first_item_in_row;
     for (let j = 0; j < index_of_us_in_row; j++) {
-      var _displaced_products$i;
-      if ((_displaced_products$i = displaced_products[i]) !== null && _displaced_products$i !== void 0 && _displaced_products$i[j])
+      var _displaced_products_$;
+      if ((_displaced_products_$ = displaced_products_[i]) !== null && _displaced_products_$ !== void 0 && _displaced_products_$[j])
         // Add blocks in our *current* row to the displacement, but only the ones to our left
         displacement_by_added_blocks++;
     }
     // Add block to output array at the correct index
     const final_target_index = target_index - displacement_by_added_blocks;
-    const existing_block = content_blocks_by_index[final_target_index];
+    const existing_block = content_blocks_by_index_[final_target_index];
     const block_content = block.content;
     // If two blocks want to exist at the same location (can happen, for example if one block wants to be at the end of a row and the other one at the start of the next row) add an array with both
     if (existing_block) {
@@ -441,17 +443,20 @@ function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
         existing_block.push(block_content);else {
         const array = [existing_block, block_content];
         constructed_block_arrays.add(array);
-        content_blocks_by_index[final_target_index] = array;
+        content_blocks_by_index_[final_target_index] = array;
       }
-    } else content_blocks_by_index[final_target_index] = block_content;
+    } else content_blocks_by_index_[final_target_index] = block_content;
     // Update displacement
     for (let j = 0; j < span_rows; j++) {
       var _ref3;
-      const row = displaced_products[_ref3 = i + j] || (displaced_products[_ref3] = []);
+      const row = displaced_products_[_ref3 = i + j] || (displaced_products_[_ref3] = []);
       for (let k = index_of_us_in_row; k < index_of_us_in_row + span_columns; k++) row[k] = true;
     }
   }
-  return content_blocks_by_index;
+  return {
+    content_blocks_by_index_: content_blocks_by_index_,
+    displaced_products_: displaced_products_
+  };
 }
 /**
  * Takes a store that contains an array from where index is number of row and value is the result of executing the content block rendering function.
@@ -480,19 +485,22 @@ function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_s
           }
         }));
         $52FdA$solidjsweb.effect(_p$ => {
-          var _v$ = {
+          var _v$ = !!(final_span_columns() === max_span_columns()),
+            _v$2 = {
               [(0, $830518481649feb1$export$c500183c31c2b22e)]: final_span_columns()
             },
-            _v$2 = "span ".concat(final_span_columns()),
-            _v$3 = "span ".concat(final_span_rows());
-          _p$.e = $52FdA$solidjsweb.style(_el$, _v$, _p$.e);
-          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("grid-column", _v$2) : _el$.style.removeProperty("grid-column"));
-          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("grid-row", _v$3) : _el$.style.removeProperty("grid-row"));
+            _v$3 = "span ".concat(final_span_columns()),
+            _v$4 = "span ".concat(final_span_rows());
+          _v$ !== _p$.e && _el$.classList.toggle("spans-whole-row", _p$.e = _v$);
+          _p$.t = $52FdA$solidjsweb.style(_el$, _v$2, _p$.t);
+          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("grid-column", _v$3) : _el$.style.removeProperty("grid-column"));
+          _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$.style.setProperty("grid-row", _v$4) : _el$.style.removeProperty("grid-row"));
           return _p$;
         }, {
           e: undefined,
           t: undefined,
-          a: undefined
+          a: undefined,
+          o: undefined
         });
         return _el$;
       }
@@ -10645,7 +10653,8 @@ class $e270e9f953fcbc58$export$e015ed2f2950f2e3 {
         breadcrumbs: [],
         quick_links: [],
         image_urls: [],
-        failed: true
+        failed: true,
+        content_blocks: []
       }),
       method_: "GET"
     });
@@ -11131,7 +11140,8 @@ class $9cbefc32b9dab36d$export$f34314aa9505732e {
           // Please make sure that the signal created by below line always updates AFTER selected_filters_ updates on a "popstate" event. If the filter cache is popped before the selected filters are the code in create_modified_filters() is going to re-calculate search_local_filter_cache without knowing the real value of search_selected_filters, and we'll end up with too few filters in search_local_filter_cache in some cases
           local_filter_cache: [],
           expanded_hierarchical_filters: [],
-          scroll_restoration_data: []
+          scroll_restoration_data: [],
+          history_content_blocks: []
         }),
         router_: $parcel$interopDefault($52FdA$babelruntimehelpersclassPrivateFieldGet)(this, $9cbefc32b9dab36d$var$_router),
         prefix_: "category" + unique_instance_key_for_state + "_"
@@ -15919,6 +15929,99 @@ function $c3a7faae6f2b93c9$export$7af06a63c5a976c9(el, listing_id, i18n_) {
   $52FdA$solidjs.onCleanup(disconnect);
 }
 $52FdA$solidjsweb.delegateEvents(["click"]);
+var $c19709057a32b2e7$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<a class=d-standard-content-wrapper><video loop class=d-standard-content>`);
+function $c19709057a32b2e7$export$780a853d15174484(_ref) {
+  let {
+    contentBlock_: {
+      content: {
+        link: link,
+        type: type,
+        url: mediaUrl
+      }
+    },
+    router_: router_
+  } = _ref;
+  if (type === "image") {
+    const [wrapperSize, setWrapperSize] = $52FdA$solidjs.createSignal();
+    return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjsweb.Dynamic), $52FdA$solidjsweb.mergeProps({
+      component: link ? "a" : "div",
+      "class": "d-standard-content-wrapper",
+      ref: el => setWrapperSize(() => $858fdcf73148519f$export$e6fffe67d4cdd848(el)),
+      get onClick() {
+        return $52FdA$depictaiutilisharedlatest.catchify(ev => link && router_.navigate_.go_to_({
+          new_url_: link,
+          is_replace_: false,
+          event_: ev
+        }));
+      }
+    }, link && {
+      href: link
+    }, {
+      get children() {
+        return $52FdA$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), {
+          get size() {
+            return $52FdA$solidjs.createMemo(() => {
+              var _wrapperSize;
+              return ((_wrapperSize = wrapperSize()) === null || _wrapperSize === void 0 ? void 0 : _wrapperSize()) || 0;
+            });
+          },
+          src: mediaUrl,
+          "class": "d-standard-content"
+        });
+      }
+    }));
+  }
+  if (type === "video") {
+    const pageVisible = $e7a7d2fe8a8217d8$export$54299a3c81f5425();
+    return (() => {
+      var _el$ = $52FdA$solidjsweb.getNextElement($c19709057a32b2e7$var$_tmpl$),
+        _el$2 = _el$.firstChild;
+      $52FdA$solidjsweb.addEventListener(_el$, "click", $52FdA$depictaiutilisharedlatest.catchify(ev => router_.navigate_.go_to_({
+        new_url_: link,
+        is_replace_: false,
+        event_: ev
+      })), true);
+      $52FdA$solidjsweb.setAttribute(_el$, "href", link);
+      $52FdA$solidjsweb.use(element => $52FdA$solidjs.createEffect(() => {
+        if (pageVisible()) element.play().catch(e => $52FdA$depictaiutilishared.dlog("Failed to play", e));else element.pause();
+      }), _el$2);
+      $52FdA$solidjsweb.setAttribute(_el$2, "src", mediaUrl);
+      $52FdA$solidjsweb.setProperty(_el$2, "controls", false);
+      $52FdA$solidjsweb.setProperty(_el$2, "muted", true);
+      $52FdA$solidjsweb.setProperty(_el$2, "autoplay", true);
+      $52FdA$solidjsweb.setProperty(_el$2, "playsinline", true);
+      $52FdA$solidjsweb.runHydrationEvents();
+      return _el$;
+    })();
+  }
+}
+$52FdA$solidjsweb.delegateEvents(["click"]);
+function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_) {
+  const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
+  $52FdA$solidjs.createEffect(() => {
+    var _plp_meta;
+    const serverContentBlock = (_plp_meta = plp_meta()) === null || _plp_meta === void 0 ? void 0 : _plp_meta.content_blocks;
+    if (serverContentBlock && JSON.stringify(serverContentBlock) !== JSON.stringify(historyContentBlocks())) setHistoryContentBlocks(serverContentBlock);
+  });
+  const contentBlocksByRow = $52FdA$solidjs.createMemo(() => {
+    if (content_blocks_by_row_()) return content_blocks_by_row_();
+    const content = [];
+    historyContentBlocks().forEach(row => {
+      const contentBlock = {
+        span_columns: row.span_columns,
+        span_rows: row.span_rows,
+        position: row.position,
+        content: () => $52FdA$solidjsweb.createComponent((0, $c19709057a32b2e7$export$780a853d15174484), {
+          contentBlock_: row,
+          router_: router_
+        })
+      };
+      content[row.row] = contentBlock;
+    });
+    return content;
+  });
+  return contentBlocksByRow;
+}
 var $ede6c70ecdca46fe$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=product-count><!$><!/> <!$><!/>`),
   $ede6c70ecdca46fe$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div>`),
   $ede6c70ecdca46fe$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=filter-results-for-one-row><!$><!/><!$><!/>`),
@@ -15947,6 +16050,7 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
     show_breadcrumbs_: show_breadcrumbs_,
     layout_options_: layout_options_,
     scroll_restoration_data_: scroll_restoration_data_,
+    history_content_blocks_: history_content_blocks_,
     product_card_template_: product_card_template_,
     sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
     sorting_query_param_: sorting_query_param_,
@@ -16015,6 +16119,7 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
   }));
   // Make "Get Listing" request to get quicklinks, breadcrumbs, title, etc
   const [plp_meta] = $52FdA$solidjs.createResource(meta_query_base, $52FdA$depictaiutilisharedlatest.catchify(query => depict_api_.get_listing(query)));
+  const contentBlocksByRow = $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_);
   const available_sortings_ = $52FdA$solidjs.createMemo(() => {
     var _plp_products_, _plp_products_$sorts;
     return (_plp_products_ = plp_products_()) === null || _plp_products_ === void 0 ? void 0 : (_plp_products_$sorts = _plp_products_.sorts) === null || _plp_products_$sorts === void 0 ? void 0 : _plp_products_$sorts.map(sort => {
@@ -16303,7 +16408,7 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
               product_card_template_: product_card_template_,
               sort_or_filter_open_: sort_or_filter_open_,
               desktop_filter_elements_: desktop_filter_elements_,
-              content_blocks_by_row_: content_blocks_by_row_,
+              content_blocks_by_row_: contentBlocksByRow,
               ConfiguredScrollStatus_: ConfiguredScrollStatus_,
               id_currently_querying_for_: id_to_query_for_,
               no_results_options_: {
@@ -16399,7 +16504,8 @@ function $c10e33c4681f8c9b$export$e2bf8ce7779e827e(props) {
       sorting_open: category_sorting_open_,
       expanded_filters: expanded_filters_,
       expanded_hierarchical_filters: expanded_hierarchical_filters_,
-      scroll_restoration_data: scroll_restoration_data_
+      scroll_restoration_data: scroll_restoration_data_,
+      history_content_blocks: history_content_blocks_
     } = depict_category.historyStateSignals_;
     const {
       current_sorting_: current_sorting_,
@@ -16451,6 +16557,7 @@ function $c10e33c4681f8c9b$export$e2bf8ce7779e827e(props) {
       sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
       content_blocks_by_row_: () => props.content_blocks_by_row,
       scroll_restoration_data_: scroll_restoration_data_,
+      history_content_blocks_: history_content_blocks_,
       layout_options_: $52FdA$solidjs.createMemo(() => ({
         cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(props.cols_at_size),
         ...grid_spacing_override(),

package/ES10/index.d.ts

@@ -3,7 +3,7 @@ import { report, Amazing_Slider, Display, useExpandingContainer, ColsAtSize, Ele
 import { SearchFilter, SearchRequestV3, SortModel } from "@depict-ai/types/api/SearchRequestV3";
 import { ContentLink, SearchResponse, SearchFilter as _SearchFilter1 } from "@depict-ai/types/api/SearchResponse";
 import { Ancestors, ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
-import { ProductListing, GetListingResponse } from "@depict-ai/types/api/GetListingResponse";
+import { ProductListing, GetListingResponse, ContentBlock as _ContentBlock1 } from "@depict-ai/types/api/GetListingResponse";
 import { ProductListingResponseV3, SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/ProductListingResponseV3";
 import { SearchSuggestionsRequestV3 } from "@depict-ai/types/api/SearchSuggestionsRequestV3";
 import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequestV3";
@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.7.30";
+export const version = "4.7.32";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -93,7 +93,8 @@ export type ContentBlocksByRow = (undefined | ContentBlock)[];
 /**
  * Does pure calculations where to put each of the finished wrapped content blocks in the elements in the grid (input is by row). You need to cap span_columns of the blocks to the columns available before passing them to this function.
  * Also used in the portal in react.
- * @returns an array where index is index of the blocks in the "displays array" and value is the content block (elements) to show at that index
+ * @returns content_blocks_by_index_: an array where index is index of the blocks in the "displays array" and value is the content block (elements) to show at that index.
+ * displaced_products_: internal state that can be used to figure out if there's parts of a content block on a row, see the comment inside this function
  */
 export function remap_blocks_to_index<T = () => JSX.Element | Promise<JSX.Element>>({
   wrapped_blocks_,
@@ -106,7 +107,13 @@ export function remap_blocks_to_index<T = () => JSX.Element | Promise<JSX.Elemen
     content: T;
   })[];
   n_cols_currently_showing_: number | null;
-}): JSX.Element[];
+}): {
+  content_blocks_by_index_: (Awaited<T> | T[])[];
+  readonly displaced_products_?: undefined;
+} | {
+  readonly content_blocks_by_index_: (Awaited<T> | T[])[];
+  readonly displaced_products_: (number | (true | undefined)[])[];
+};
 /**
  * Returns a set containing the element where every element currently touching the screen started touching it.
  */
@@ -1327,6 +1334,7 @@ export class DepictCategory<InputDisplay extends Display, OutputDisplay extends
       expanded_: boolean;
     }[]>;
     scroll_restoration_data: Signal<ScrollRestorationData>;
+    history_content_blocks: Signal<_ContentBlock1[]>;
   };
   /**
    * Signal representing the currently selected filters. Will update to always reflect the state of the current URL. Calling the setter triggers a navigation (replaceState) to an updated URL.

package/ES10/index.js

@@ -10,7 +10,7 @@ import $8tj43$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpe
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.7.30";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.7.32";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $8tj43$createSignal(false);
   $8tj43$onCleanup($8tj43$javascript_media_query(media_query, _ref => {
@@ -282,7 +282,7 @@ function $ff7feae4dddd6073$export$791ef57e62e21c3f(_ref) {
   return $8tj43$createMemo(() => $ff7feae4dddd6073$export$92aa5d691d588f3f({
     wrapped_blocks_: get_wrapped_blocks_(),
     n_cols_currently_showing_: n_cols_currently_showing_()
-  }));
+  }).content_blocks_by_index_);
 }
 function $ff7feae4dddd6073$export$92aa5d691d588f3f(_ref2) {
   let {
@@ -290,13 +290,15 @@ function $ff7feae4dddd6073$export$92aa5d691d588f3f(_ref2) {
     n_cols_currently_showing_: n_cols_currently_showing_
   } = _ref2;
   // This computation should be quite cheap since it just moves around things into an array
-  const content_blocks_by_index = [];
+  const content_blocks_by_index_ = [];
   const constructed_block_arrays = new WeakSet();
   // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
-  const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+  const displaced_products_ = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
   if (!n_cols_currently_showing_)
     // Nope out of here if we don't know how many columns are showing
-    return content_blocks_by_index;
+    return {
+      content_blocks_by_index_: content_blocks_by_index_
+    };
   for (let i = 0; i < wrapped_blocks_.length; i++) {
     // i = row to show at
     const block = wrapped_blocks_[i];
@@ -313,25 +315,25 @@ function $ff7feae4dddd6073$export$92aa5d691d588f3f(_ref2) {
     // Calculate displacement of us by content blocks above us
     let displacement_by_added_blocks = 0;
     for (let j = 0; j < i; j++) {
-      const row = displaced_products[j];
+      const row = displaced_products_[j];
       if (row === undefined) continue; // there were no blocks in this row
       let displaced_items_in_row;
       if (typeof row === "number") displaced_items_in_row = row;else {
         displaced_items_in_row = row.filter(item => item).length;
-        displaced_products[j] = displaced_items_in_row;
+        displaced_products_[j] = displaced_items_in_row;
       }
       displacement_by_added_blocks += displaced_items_in_row;
     }
     const index_of_us_in_row = target_index - index_of_first_item_in_row;
     for (let j = 0; j < index_of_us_in_row; j++) {
-      var _displaced_products$i;
-      if ((_displaced_products$i = displaced_products[i]) !== null && _displaced_products$i !== void 0 && _displaced_products$i[j])
+      var _displaced_products_$;
+      if ((_displaced_products_$ = displaced_products_[i]) !== null && _displaced_products_$ !== void 0 && _displaced_products_$[j])
         // Add blocks in our *current* row to the displacement, but only the ones to our left
         displacement_by_added_blocks++;
     }
     // Add block to output array at the correct index
     const final_target_index = target_index - displacement_by_added_blocks;
-    const existing_block = content_blocks_by_index[final_target_index];
+    const existing_block = content_blocks_by_index_[final_target_index];
     const block_content = block.content;
     // If two blocks want to exist at the same location (can happen, for example if one block wants to be at the end of a row and the other one at the start of the next row) add an array with both
     if (existing_block) {
@@ -340,17 +342,20 @@ function $ff7feae4dddd6073$export$92aa5d691d588f3f(_ref2) {
         existing_block.push(block_content);else {
         const array = [existing_block, block_content];
         constructed_block_arrays.add(array);
-        content_blocks_by_index[final_target_index] = array;
+        content_blocks_by_index_[final_target_index] = array;
       }
-    } else content_blocks_by_index[final_target_index] = block_content;
+    } else content_blocks_by_index_[final_target_index] = block_content;
     // Update displacement
     for (let j = 0; j < span_rows; j++) {
       var _ref3;
-      const row = displaced_products[_ref3 = i + j] || (displaced_products[_ref3] = []);
+      const row = displaced_products_[_ref3 = i + j] || (displaced_products_[_ref3] = []);
       for (let k = index_of_us_in_row; k < index_of_us_in_row + span_columns; k++) row[k] = true;
     }
   }
-  return content_blocks_by_index;
+  return {
+    content_blocks_by_index_: content_blocks_by_index_,
+    displaced_products_: displaced_products_
+  };
 }
 /**
  * Takes a store that contains an array from where index is number of row and value is the result of executing the content block rendering function.
@@ -379,19 +384,22 @@ function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_s
           }
         }));
         $8tj43$effect(_p$ => {
-          var _v$ = {
+          var _v$ = !!(final_span_columns() === max_span_columns()),
+            _v$2 = {
               [(0, $64d94dcaa058dc7b$export$c500183c31c2b22e)]: final_span_columns()
             },
-            _v$2 = "span ".concat(final_span_columns()),
-            _v$3 = "span ".concat(final_span_rows());
-          _p$.e = $8tj43$style(_el$, _v$, _p$.e);
-          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("grid-column", _v$2) : _el$.style.removeProperty("grid-column"));
-          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("grid-row", _v$3) : _el$.style.removeProperty("grid-row"));
+            _v$3 = "span ".concat(final_span_columns()),
+            _v$4 = "span ".concat(final_span_rows());
+          _v$ !== _p$.e && _el$.classList.toggle("spans-whole-row", _p$.e = _v$);
+          _p$.t = $8tj43$style(_el$, _v$2, _p$.t);
+          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("grid-column", _v$3) : _el$.style.removeProperty("grid-column"));
+          _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$.style.setProperty("grid-row", _v$4) : _el$.style.removeProperty("grid-row"));
           return _p$;
         }, {
           e: undefined,
           t: undefined,
-          a: undefined
+          a: undefined,
+          o: undefined
         });
         return _el$;
       }
@@ -10544,7 +10552,8 @@ class $284849364a6ef73a$export$e015ed2f2950f2e3 {
         breadcrumbs: [],
         quick_links: [],
         image_urls: [],
-        failed: true
+        failed: true,
+        content_blocks: []
       }),
       method_: "GET"
     });
@@ -11030,7 +11039,8 @@ class $f5f54892fd0c7d9f$export$f34314aa9505732e {
           // Please make sure that the signal created by below line always updates AFTER selected_filters_ updates on a "popstate" event. If the filter cache is popped before the selected filters are the code in create_modified_filters() is going to re-calculate search_local_filter_cache without knowing the real value of search_selected_filters, and we'll end up with too few filters in search_local_filter_cache in some cases
           local_filter_cache: [],
           expanded_hierarchical_filters: [],
-          scroll_restoration_data: []
+          scroll_restoration_data: [],
+          history_content_blocks: []
         }),
         router_: $8tj43$babelruntimehelpersclassPrivateFieldGet(this, $f5f54892fd0c7d9f$var$_router),
         prefix_: "category" + unique_instance_key_for_state + "_"
@@ -15818,6 +15828,99 @@ function $1145661fd3ca5519$export$7af06a63c5a976c9(el, listing_id, i18n_) {
   $8tj43$onCleanup(disconnect);
 }
 $8tj43$delegateEvents(["click"]);
+var $3b772ef9a35560fe$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<a class=d-standard-content-wrapper><video loop class=d-standard-content>`);
+function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
+  let {
+    contentBlock_: {
+      content: {
+        link: link,
+        type: type,
+        url: mediaUrl
+      }
+    },
+    router_: router_
+  } = _ref;
+  if (type === "image") {
+    const [wrapperSize, setWrapperSize] = $8tj43$createSignal();
+    return $8tj43$createComponent((0, $8tj43$Dynamic), $8tj43$mergeProps1({
+      component: link ? "a" : "div",
+      "class": "d-standard-content-wrapper",
+      ref: el => setWrapperSize(() => $56047603f9d212b6$export$e6fffe67d4cdd848(el)),
+      get onClick() {
+        return $8tj43$catchify(ev => link && router_.navigate_.go_to_({
+          new_url_: link,
+          is_replace_: false,
+          event_: ev
+        }));
+      }
+    }, link && {
+      href: link
+    }, {
+      get children() {
+        return $8tj43$createComponent((0, $56047603f9d212b6$export$6e5611bc7e57e477), {
+          get size() {
+            return $8tj43$createMemo(() => {
+              var _wrapperSize;
+              return ((_wrapperSize = wrapperSize()) === null || _wrapperSize === void 0 ? void 0 : _wrapperSize()) || 0;
+            });
+          },
+          src: mediaUrl,
+          "class": "d-standard-content"
+        });
+      }
+    }));
+  }
+  if (type === "video") {
+    const pageVisible = $a35e6f680c5bbc60$export$54299a3c81f5425();
+    return (() => {
+      var _el$ = $8tj43$getNextElement($3b772ef9a35560fe$var$_tmpl$),
+        _el$2 = _el$.firstChild;
+      $8tj43$addEventListener(_el$, "click", $8tj43$catchify(ev => router_.navigate_.go_to_({
+        new_url_: link,
+        is_replace_: false,
+        event_: ev
+      })), true);
+      $8tj43$setAttribute(_el$, "href", link);
+      $8tj43$use(element => $8tj43$createEffect(() => {
+        if (pageVisible()) element.play().catch(e => $8tj43$dlog1("Failed to play", e));else element.pause();
+      }), _el$2);
+      $8tj43$setAttribute(_el$2, "src", mediaUrl);
+      $8tj43$setProperty(_el$2, "controls", false);
+      $8tj43$setProperty(_el$2, "muted", true);
+      $8tj43$setProperty(_el$2, "autoplay", true);
+      $8tj43$setProperty(_el$2, "playsinline", true);
+      $8tj43$runHydrationEvents();
+      return _el$;
+    })();
+  }
+}
+$8tj43$delegateEvents(["click"]);
+function $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_) {
+  const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
+  $8tj43$createEffect(() => {
+    var _plp_meta;
+    const serverContentBlock = (_plp_meta = plp_meta()) === null || _plp_meta === void 0 ? void 0 : _plp_meta.content_blocks;
+    if (serverContentBlock && JSON.stringify(serverContentBlock) !== JSON.stringify(historyContentBlocks())) setHistoryContentBlocks(serverContentBlock);
+  });
+  const contentBlocksByRow = $8tj43$createMemo(() => {
+    if (content_blocks_by_row_()) return content_blocks_by_row_();
+    const content = [];
+    historyContentBlocks().forEach(row => {
+      const contentBlock = {
+        span_columns: row.span_columns,
+        span_rows: row.span_rows,
+        position: row.position,
+        content: () => $8tj43$createComponent((0, $3b772ef9a35560fe$export$780a853d15174484), {
+          contentBlock_: row,
+          router_: router_
+        })
+      };
+      content[row.row] = contentBlock;
+    });
+    return content;
+  });
+  return contentBlocksByRow;
+}
 var $4b4b262708b516ee$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=product-count><!$><!/> <!$><!/>`),
   $4b4b262708b516ee$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div>`),
   $4b4b262708b516ee$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=filter-results-for-one-row><!$><!/><!$><!/>`),
@@ -15846,6 +15949,7 @@ function $4b4b262708b516ee$export$f7d2f673fc2f091d(_ref) {
     show_breadcrumbs_: show_breadcrumbs_,
     layout_options_: layout_options_,
     scroll_restoration_data_: scroll_restoration_data_,
+    history_content_blocks_: history_content_blocks_,
     product_card_template_: product_card_template_,
     sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
     sorting_query_param_: sorting_query_param_,
@@ -15914,6 +16018,7 @@ function $4b4b262708b516ee$export$f7d2f673fc2f091d(_ref) {
   }));
   // Make "Get Listing" request to get quicklinks, breadcrumbs, title, etc
   const [plp_meta] = $8tj43$createResource(meta_query_base, $8tj43$catchify(query => depict_api_.get_listing(query)));
+  const contentBlocksByRow = $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_);
   const available_sortings_ = $8tj43$createMemo(() => {
     var _plp_products_, _plp_products_$sorts;
     return (_plp_products_ = plp_products_()) === null || _plp_products_ === void 0 ? void 0 : (_plp_products_$sorts = _plp_products_.sorts) === null || _plp_products_$sorts === void 0 ? void 0 : _plp_products_$sorts.map(sort => {
@@ -16202,7 +16307,7 @@ function $4b4b262708b516ee$export$f7d2f673fc2f091d(_ref) {
               product_card_template_: product_card_template_,
               sort_or_filter_open_: sort_or_filter_open_,
               desktop_filter_elements_: desktop_filter_elements_,
-              content_blocks_by_row_: content_blocks_by_row_,
+              content_blocks_by_row_: contentBlocksByRow,
               ConfiguredScrollStatus_: ConfiguredScrollStatus_,
               id_currently_querying_for_: id_to_query_for_,
               no_results_options_: {
@@ -16298,7 +16403,8 @@ function $8821a19349c36651$export$e2bf8ce7779e827e(props) {
       sorting_open: category_sorting_open_,
       expanded_filters: expanded_filters_,
       expanded_hierarchical_filters: expanded_hierarchical_filters_,
-      scroll_restoration_data: scroll_restoration_data_
+      scroll_restoration_data: scroll_restoration_data_,
+      history_content_blocks: history_content_blocks_
     } = depict_category.historyStateSignals_;
     const {
       current_sorting_: current_sorting_,
@@ -16350,6 +16456,7 @@ function $8821a19349c36651$export$e2bf8ce7779e827e(props) {
       sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
       content_blocks_by_row_: () => props.content_blocks_by_row,
       scroll_restoration_data_: scroll_restoration_data_,
+      history_content_blocks_: history_content_blocks_,
       layout_options_: $8tj43$createMemo(() => ({
         cols_at_size: $a9c7ba6087881ac2$export$6daf8749b65a1b77(props.cols_at_size),
         ...grid_spacing_override(),