@depict-ai/ui 2.0.26 → 2.1.0

package/latest/index.cjs

@@ -1,6 +1,7 @@
 var $gVhhF$depictaiutilishared = require("@depict-ai/utilishared/latest");
 var $gVhhF$solidjsweb = require("solid-js/web");
 var $gVhhF$solidjs = require("solid-js");
+var $gVhhF$solidjsstore = require("solid-js/store");
 require("../multi_import_deduplicator.cjs").register_es_version("ui", "latest");
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {
@@ -69,7 +70,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.26";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.0";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -484,7 +485,7 @@ const $4e04be41243c3d80$export$6daf8749b65a1b77 = cols_at_size => {
   return $4e04be41243c3d80$var$transform_elements(sorted_cols_at_size);
 };
 function $fc23d7668ae0011d$export$a2cc176055f8f08() {
-  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+  const text = "Please try setting `columnsAtSize`/`gridSpacing` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
   return (0, $gVhhF$solidjsweb.isServer) ? {
     t: `<!-- ${text} -->`
   } : document.createComment(text);
@@ -505,12 +506,13 @@ let $0caf87eaa19079da$var$cached_placeholder_element;
 let $0caf87eaa19079da$var$rendering_cached_placeholder_element;
 function $0caf87eaa19079da$export$f33414a4df0afd3f({
   product_card_template_: product_card_template_,
-  num_placeholders_: num_placeholders_
+  num_placeholders_: num_placeholders_,
+  content_blocks_: content_blocks_
 }) {
-  const [get_elements, set_elements] = $gVhhF$solidjs.createSignal([]);
-  let existing_num = 0;
+  const [num_to_actually_show, set_num_to_actually_show] = $gVhhF$solidjs.createSignal($gVhhF$solidjs.untrack(num_placeholders_));
   if (0, $gVhhF$solidjsweb.isServer)
     // want to render simple placeholders on server, effects don't run there
+    // FIXME when adding proper SSR: also SSR content blocks
     return $gVhhF$solidjs.createMemo(() => Array.from({
       length: num_placeholders_()
     }).map(() => {
@@ -519,19 +521,30 @@ function $0caf87eaa19079da$export$f33414a4df0afd3f({
       if (typeof template_result?.then !== "function") return template_result;
     }));
   $gVhhF$solidjs.createRenderEffect(() => {
+    const existing_num = num_to_actually_show();
     const to_add = num_placeholders_() - existing_num;
     if (to_add <= 0) return;
     // Below comment is from when we used recommendation renderer and manual DOM manipulation for this, but I'm still scared to remove placeholders and mess up scroll restoration, so I'm keeping the way it worked. Otherwise, <Index> could be used which would be far more elegant.
     // We don't need to remove placeholders, only need to add. The reason for that is that chrome restores the scroll position once all tasks queued as reaction of the "popstate" events have been completed in the task queue. That means that we need to get the placeholders in fast, or we might lose scroll position if the previous site was shorter.
     // The query id and the amount might update in separate tasks because one comes from href_change_ipns and the other one from another "popstate" listener. Therefore, we need to be able to dynamically add more placeholders. I'm not entirely sure about this anymore though, since we have the scroll position on a per-id basis it might work anyway but THIS WORKS, and I've been working on this bug for 3 hours so let's just keep it this way.
-    set_elements(prev => [...prev, ...Array.from({
-      length: to_add
-    }).map(() => $0caf87eaa19079da$var$Placeholder({
-      product_card_template_: product_card_template_
-    }))]);
-    existing_num += to_add;
+    // Above comments were from when we added elements in this createRenderEffect. Now I changed it to just increment the number and render them from an <Index> instead, so I can add content blocks better
+    // Functionality should be the same
+    set_num_to_actually_show(existing_num + to_add);
+  });
+  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
+    get each() {
+      return Array.from({
+        length: num_to_actually_show()
+      });
+    },
+    children: (_item, index) => {
+      const possible_content_block = $gVhhF$solidjs.createMemo(() => content_blocks_?.()?.()?.[index]);
+      // Show content block before product card, so it's *at* that index
+      return [possible_content_block, $0caf87eaa19079da$var$Placeholder({
+        product_card_template_: product_card_template_
+      })]; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+    }
   });
-  return get_elements; // https://github.com/solidjs/solid/releases/tag/v1.7.0
 }
 /**
  * Get one placeholder element. It will be cloned for each placeholder for ultimate performance even when solid-js isn't rendering the placeholders.
@@ -616,7 +629,8 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
   merchant_: merchant_,
   market_: market_,
   product_card_template_: product_card_template_,
-  do_per_elements_: do_per_elements_
+  do_per_elements_: do_per_elements_,
+  content_blocks_: content_blocks_
 }) {
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.For), {
     get each() {
@@ -624,6 +638,7 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
     },
     children: (product_id, index) => {
       const owner = $gVhhF$solidjs.getOwner();
+      const possible_content_block = $gVhhF$solidjs.createMemo(() => content_blocks_?.()?.()?.[index()]);
       const display_accessor = $gVhhF$solidjs.createMemo(prev => {
         const new_display = displays_by_key_().get(product_id);
         if (prev && $a73063cc642f3e5f$var$deep_equal(prev, new_display))
@@ -676,7 +691,9 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
         }
         do_per_elements_?.(elements, index);
       });
-      return product_card_resource; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+      return [
+      // Show content block before product card, so it's *at* that index
+      possible_content_block, product_card_resource]; // https://github.com/solidjs/solid/releases/tag/v1.7.0
     }
   });
 }
@@ -4616,7 +4633,9 @@ function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
   min_products_to_fetch_: min_products_to_fetch_,
   query_base_: query_base_,
   depict_api_: depict_api_,
-  is_loading_: is_loading_
+  is_loading_: is_loading_,
+  content_blocks_: content_blocks_,
+  set_number_loaded_displays_: set_number_loaded_displays_
 }) {
   // The following sets up an intersection observer to determine which results are in the viewport, used for the ScrollStatus indicator and knowing when to load more
   const target_to_index_map = new Map();
@@ -4660,11 +4679,13 @@ function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
     query_base_: query_base_,
     depict_api_: depict_api_
   });
+  $gVhhF$solidjs.createComputed(() => set_number_loaded_displays_(displays_by_key_().size));
   return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
     displays_by_key_: displays_by_key_,
     merchant_: merchant_,
     market_: market_,
     product_card_template_: product_card_template_,
+    content_blocks_: content_blocks_,
     do_per_elements_: (elements, index_accessor) =>
     // Adds/removes elements from the "results in viewport" intersection observer above
     $gVhhF$solidjs.createEffect(() => {
@@ -4686,6 +4707,343 @@ function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
     })
   });
 }
+const $75777da1687ba3f6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div></div>`, 2),
+  $75777da1687ba3f6$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<style type="text/css"></style>`, 2);
+const $75777da1687ba3f6$export$c500183c31c2b22e = "--spans-columns";
+function $75777da1687ba3f6$export$ab6b147eec64fea5(props) {
+  const container_class = "x" + $gVhhF$solidjs.createUniqueId();
+  const container_element_ = (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($75777da1687ba3f6$var$_tmpl$);
+    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => props.element_attributes, {
+      "classList": {
+        [container_class]: true
+      }
+    }), false, true);
+    $gVhhF$solidjsweb.insert(_el$, () => props.children);
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$;
+  })(); // Don't want this in the error boundary below, it should only be for the actual layouting
+  return $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
+    message_: "Failed calculating css grid layout",
+    severity_: "error",
+    get children() {
+      return $75777da1687ba3f6$export$e2f22da34aaf310a(props, container_element_, false, container_class);
+    }
+  });
+}
+function $75777da1687ba3f6$export$e2f22da34aaf310a(props, container_element, insert_after_container = false, container_class) {
+  if (!container_class) {
+    // only try to add if it wasn't provided, so that we have a code path without classList when doing SSR
+    container_class = $gVhhF$depictaiutilishared.make_random_classname();
+    container_element.classList.add(container_class);
+  }
+  const container_selector = `.depict .${container_class}`; // class so ppl can have id if needed
+  const col_styling = $gVhhF$solidjs.createMemo(() => $75777da1687ba3f6$var$generate_media_queried_declarations({
+    container_selector_: container_selector,
+    default_grid_spacing_text: props.grid_spacing,
+    cols_at_size_: props.cols_at_size,
+    override_vertical_spacing_: props.override_vertical_spacing,
+    top_row_shortened_by_: props.top_row_shortened_by_()
+  }));
+  const base_styling = $gVhhF$solidjs.createMemo(() => {
+    return `${container_selector}{display:grid;}`;
+  });
+  const get_styling = $gVhhF$solidjs.createMemo(() => base_styling() + col_styling());
+  const style_element = (() => {
+    const _el$2 = $gVhhF$solidjsweb.getNextElement($75777da1687ba3f6$var$_tmpl$2);
+    $gVhhF$solidjsweb.insert(_el$2, get_styling);
+    return _el$2;
+  })(); // need to create this after set_styling has been called or else there will be no styling in the SSR'd output
+  if (insert_after_container) container_element.after(style_element);
+  return [container_element, style_element];
+}
+function $75777da1687ba3f6$var$generate_media_queried_declarations({
+  container_selector_: container_selector_,
+  default_grid_spacing_text: default_grid_spacing_text,
+  cols_at_size_: cols_at_size_,
+  override_vertical_spacing_: override_vertical_spacing_,
+  top_row_shortened_by_: top_row_shortened_by_
+}) {
+  return cols_at_size_.map(options => {
+    const [n_cols, min, max, grid_spacing_for_size] = options;
+    const spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    // See comment in else block below
+    const can_use_gap = $75777da1687ba3f6$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $75777da1687ba3f6$var$can_use_gap_for_unit(override_vertical_spacing_));
+    let spacing_styling;
+    let additional_styling = ""; // outside the media query
+    if (can_use_gap) spacing_styling = `gap:${spacing_to_use};${override_vertical_spacing_ ? `row-gap:${override_vertical_spacing_};` : ``}`;else {
+      // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
+      // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
+      // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
+      // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
+      const width_multiplier = `var(${$75777da1687ba3f6$export$c500183c31c2b22e}, 1)`; // How many cards wide the current item is (needed because content blocks)
+      const one_item_width_exclusing_gaps = `calc(calc(100 / ${n_cols}) - calc(calc(${n_cols * 2 - 2} * calc(${$75777da1687ba3f6$var$strip_percent_unit(spacing_to_use)} / 2)) / ${n_cols}))`; // Width of one item in percent of the whole
+      // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
+      const this_item_width_meat = `calc(${one_item_width_exclusing_gaps} * ${width_multiplier})`; // Width of just the card
+      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$75777da1687ba3f6$var$strip_percent_unit(spacing_to_use)})`; // Width of the gaps
+      const this_item_width = `calc(${this_item_width_meat} + ${this_item_width_gaps})`; // Width of this item including gaps
+      // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
+      const convert_top_spacing_to_item_width_percentage = spacing => `calc(calc(100 / ${this_item_width}) * ${spacing})`; // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
+      spacing_styling = `column-gap:${spacing_to_use};`; // Still use gaps in the horizontal direction because that works flawlessly
+      // Re-use old layout code to get the correct :nth-child declarations for the top margins
+      additional_styling = $gVhhF$depictaiutilishared.n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
+    }
+    const media_query_body = `${container_selector_}{${spacing_styling}grid-template-columns:repeat(${n_cols},minmax(0,1fr));}`;
+    return `${$gVhhF$depictaiutilishared.layout_media_query_header(min, max)}{${media_query_body}}${additional_styling}`;
+  }).join("");
+}
+function $75777da1687ba3f6$var$can_use_gap_for_unit(spacing) {
+  const trimmed_spacing = spacing.trim();
+  return !trimmed_spacing.includes("%");
+}
+function $75777da1687ba3f6$var$strip_percent_unit(css_value) {
+  return css_value.replaceAll("%", "");
+}
+function $738c3a81fc46a340$export$cb5808ba002cdeed({
+  layout_options_: layout_options_,
+  sort_or_filter_open_: sort_or_filter_open_
+}) {
+  return $gVhhF$solidjs.createMemo(() => {
+    const layout_options = layout_options_();
+    // Add grid styling that changes when filters get opened/closed
+    const when_filters_closed_cols = layout_options.cols_at_size;
+    return sort_or_filter_open_() ? when_filters_closed_cols.map(row => {
+      const [num_cols_default,,,, override_cols] = row;
+      const cloned_row = [...row];
+      // @ts-ignore
+      cloned_row[0] = num_cols_default - 1;
+      if (override_cols)
+        // @ts-ignore
+        cloned_row[4] = {
+          overrides: Object.fromEntries(Object.entries(override_cols.overrides).map(([row, column]) => [row, column - 1]))
+        };
+      return cloned_row;
+    }) : when_filters_closed_cols;
+  });
+}
+function $055384b985678603$export$a79e666719b3647c(cols_at_size_) {
+  const size_active = $gVhhF$solidjs.createMemo(() => cols_at_size_().map(([n_cols, min_width, max_width]) => {
+    const media_query = $gVhhF$depictaiutilishared.layout_media_query_header(min_width, max_width).replaceAll("@media", "");
+    const matches = $b54e6192d0caa293$export$d9f36cf74e24d595(media_query);
+    return [matches, n_cols];
+  }));
+  const n_cols_currently_showing = $gVhhF$solidjs.createMemo(() => {
+    try {
+      const [, n_cols_currently_showing] = size_active().find(([media_query]) => media_query());
+      return n_cols_currently_showing;
+    } catch (e) {
+      $gVhhF$depictaiutilishared.dwarn("No active size found in columnsAtSize - can't render content blocks");
+      return null;
+    }
+  });
+  return n_cols_currently_showing;
+}
+function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
+  const style = $gVhhF$solidjs.createMemo(() => {
+    const {
+      style: style,
+      height: height,
+      width: width,
+      aspectRatio: aspectRatio
+    } = props;
+    const is_image = aspectRatio != undefined;
+    const size_data = is_image ? {
+      width: "100%",
+      "padding-bottom": 1 / aspectRatio * 100 + "%"
+    } : {
+      width: width,
+      height: height
+    };
+    return {
+      display: "block",
+      ...(style || {}),
+      ...size_data
+    };
+  });
+  return $gVhhF$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
+    get style() {
+      return style();
+    },
+    get ["class"]() {
+      return props.class;
+    }
+  });
+}
+const $d92f338ba8f9da9b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="content-block-wrapper"></div>`, 2);
+function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
+  content_blocks_: incoming_content_blocks,
+  cols_at_size_: cols_at_size_,
+  number_of_items_shown_: number_of_items_shown_,
+  set_top_row_shortened_by_: set_top_row_shortened_by_
+}) {
+  // these are by row
+  const [content_blocks, set_content_blocks] = $gVhhF$solidjsstore.createStore([]);
+  const n_cols_currently_showing_ = $055384b985678603$export$a79e666719b3647c(cols_at_size_);
+  const products_to_rows = products => {
+    const cols_currently_showing = n_cols_currently_showing_();
+    if (cols_currently_showing === null) return 0;
+    return Math.ceil(products / cols_currently_showing);
+  };
+  const showing_rows = $gVhhF$solidjs.createMemo(() => products_to_rows(number_of_items_shown_()));
+  $gVhhF$solidjs.createEffect(() => {
+    const incoming_value = incoming_content_blocks();
+    if (!incoming_value) {
+      set_content_blocks([]);
+      return;
+    }
+    const capped_value = incoming_value.slice(0, showing_rows()); // Don't show more content blocks than we have rows
+    set_content_blocks($gVhhF$solidjsstore.reconcile(capped_value));
+  });
+  const get_wrapped_blocks_ = $d92f338ba8f9da9b$var$wrap_blocks_in_div(content_blocks, n_cols_currently_showing_);
+  $gVhhF$solidjs.createComputed(() => {
+    // Update our styling if a content block forces some items that should be in the top row into a lower one, so we can generate margin-top declarations for them
+    const top_row_block = get_wrapped_blocks_()[0];
+    const blocks_in_top_row_taken = top_row_block?.span_columns;
+    if (blocks_in_top_row_taken == undefined) {
+      // Fall back to zero if no content block in top row, since then no blocks in top row are taken
+      set_top_row_shortened_by_(0);
+      return;
+    }
+    set_top_row_shortened_by_(blocks_in_top_row_taken - 1); // minus one because the content block wrapper also is an element
+  });
+
+  return $d92f338ba8f9da9b$var$remap_blocks_to_index({
+    get_wrapped_blocks_: get_wrapped_blocks_,
+    n_cols_currently_showing_: n_cols_currently_showing_
+  });
+}
+/**
+ * Calculate where to put each of the finished wrapped content blocks. Also limit blocks' max width.
+ * @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
+ */
+function $d92f338ba8f9da9b$var$remap_blocks_to_index({
+  get_wrapped_blocks_: get_wrapped_blocks_,
+  n_cols_currently_showing_: n_cols_currently_showing_
+}) {
+  return $gVhhF$solidjs.createMemo(() => {
+    // This computation should be quite cheap since it just moves around things into an array
+    const content_blocks_by_index = [];
+    const constructed_block_arrays = new WeakSet();
+    const wrapped_blocks = get_wrapped_blocks_();
+    const cols_showing = n_cols_currently_showing_();
+    // 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
+    for (let i = 0; i < wrapped_blocks.length; i++) {
+      // i = row to show at
+      const block = wrapped_blocks[i];
+      if (!block) continue; // Array can have holes/not defined places
+      const index_of_first_item_in_row = i * cols_showing;
+      const index_of_last_item_in_row = index_of_first_item_in_row + cols_showing;
+      const {
+        span_rows: span_rows,
+        position: position,
+        span_columns: span_columns
+      } = block; // span columns is already capped in the block wrapping step (wrap_blocks_in_div)
+      let target_index;
+      if (position === "left") target_index = index_of_first_item_in_row;else if (position === "right") target_index = index_of_last_item_in_row - span_columns;else if (position === "center") target_index = index_of_first_item_in_row + Math.floor((cols_showing - span_columns) / 2);else throw new Error("Invalid position for content block - must be left, right or center: " + JSON.stringify(position));
+      // 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];
+        if (row === undefined) continue; // there were no blocks in this row
+        let items_in_row;
+        if (typeof row === "number") items_in_row = row;else {
+          items_in_row = row.filter(item => item).length;
+          displaced_products[j] = items_in_row;
+        }
+        displacement_by_added_blocks += 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++) if (displaced_products[i]?.[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 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) {
+        if (constructed_block_arrays.has(existing_block))
+          // Only push to arrays we have created to not create funky bugs when there's an array in JSX.Element
+          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;
+        }
+      } else content_blocks_by_index[final_target_index] = block_content;
+      // Update displacement
+      for (let j = 0; j < span_rows; j++) {
+        const row = displaced_products[i + j] ||= [];
+        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;
+  });
+}
+/**
+ * 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.
+ * Then renders the content and wraps it into a div with the correct styling.
+ * Also caps span_columns to max available columns
+ */
+function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
+  const get_wrapped_blocks = $gVhhF$solidjs.mapArray(() => rendered_content_blocks, block => {
+    if (!block) return;
+    const get_span_columns = () => Math.min(block.span_columns, max_span_columns() ?? Infinity);
+    return $gVhhF$solidjs.mergeProps(block, {
+      // Create content divs for the blocks with as much fine-grained diffing as possible?
+      content: (() => {
+        const _el$ = $gVhhF$solidjsweb.getNextElement($d92f338ba8f9da9b$var$_tmpl$);
+        $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent($d92f338ba8f9da9b$var$RenderContent, {
+          get content() {
+            return block.content;
+          }
+        }));
+        $gVhhF$solidjsweb.effect(_p$ => {
+          const _v$ = {
+              [(0, $75777da1687ba3f6$export$c500183c31c2b22e)]: get_span_columns()
+            },
+            _v$2 = `span ${get_span_columns()}`,
+            _v$3 = `span ${block.span_rows}`;
+          _p$._v$ = $gVhhF$solidjsweb.style(_el$, _v$, _p$._v$);
+          _v$2 !== _p$._v$2 && _el$.style.setProperty("grid-column", _p$._v$2 = _v$2);
+          _v$3 !== _p$._v$3 && _el$.style.setProperty("grid-row", _p$._v$3 = _v$3);
+          return _p$;
+        }, {
+          _v$: undefined,
+          _v$2: undefined,
+          _v$3: undefined
+        });
+        return _el$;
+      })(),
+      get span_columns() {
+        // Cap max width of block to the number of columns available, for everyone downstream
+        return get_span_columns();
+      }
+    });
+  });
+  return get_wrapped_blocks;
+}
+/**
+ * Basically adds support for async content block functions and shows a rudimentary placeholder if rendering is delayed. Required due to react having a rendering delay.
+ */
+function $d92f338ba8f9da9b$var$RenderContent(props) {
+  const [resource] = $gVhhF$solidjs.createResource(() => props.content,
+  // Could be reactive
+  fn => fn());
+  $gVhhF$solidjs.createEffect(() => {
+    if (resource.error) console.error("Error in content block rendering", resource.error);
+  });
+  // The suspense is for when there's an async content block (which we have to support due to react having a rendering delay) so that we can show some height while it's loading (should kinda never be visible)
+  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
+    get fallback() {
+      return $gVhhF$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
+        width: "100%",
+        height: "max(100%, 400px)"
+      });
+    },
+    children: resource
+  });
+}
 const $fe76fb463cc60b89$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="PLP-results"><!#><!/><!#><!/></div>`, 6);
 function $fe76fb463cc60b89$export$3925f87b1545cfc6({
   plp_results_: plp_results_,
@@ -4701,7 +5059,8 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
   sort_or_filter_open_: sort_or_filter_open_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
-  id_currently_querying_for_: id_currently_querying_for_
+  id_currently_querying_for_: id_currently_querying_for_,
+  content_blocks_by_row_: content_blocks_by_row_
 }) {
   // The plp_results_ resource will be delayed because we're using createBatchedMemo to not make triplicate API requests, but we need to show the placeholders before already to match Chrome and Firefox's "content has to be there, ready for scroll restoration, before all popstate tasks have been completed"-requirement
   const is_loading_ = $gVhhF$solidjs.createMemo(() => plp_results_.loading || query_base_.loading);
@@ -4748,20 +5107,33 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
             let is_just_after_plp_results_update = false;
             let fallback_is_alive = false;
             const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = $gVhhF$solidjs.createSignal(true);
+            const [top_row_shortened_by_, set_top_row_shortened_by_] = $gVhhF$solidjs.createSignal(0);
+            const [product_card_suspense_is_in_fallback, set_product_card_suspense_is_in_fallback] = $gVhhF$solidjs.createSignal(false);
+            const [number_loaded_displays, set_number_loaded_displays_] = $gVhhF$solidjs.createSignal(0);
+            const modified_cols_at_size = $738c3a81fc46a340$export$cb5808ba002cdeed({
+              layout_options_: layout_options_,
+              sort_or_filter_open_: sort_or_filter_open_
+            });
+            const num_placeholders_ = $gVhhF$solidjs.createMemo(() => {
+              // Can't use the data out of request_base for the id because request_base is too late, we need the correct amount of placeholders before the browser has restored the scroll state after processing all popstate events
+              return (0, $aec24316ed262dc0$export$6c9030e511152266) + (get_scroll_restoration_data().find(({
+                for_id: for_id
+              }) => for_id === id_currently_querying_for_())?.min_results_loaded ?? min_products_to_fetch_);
+            });
+            const number_of_items_shown_ = $gVhhF$solidjs.createMemo(() => is_loading_() || product_card_suspense_is_in_fallback() ? num_placeholders_() : number_loaded_displays());
+            const doesnt_have_content_blocks = $gVhhF$solidjs.createMemo(() => !content_blocks_by_row_());
+            const content_blocks_ = $gVhhF$solidjs.createMemo(() => doesnt_have_content_blocks() ? () => [] : $d92f338ba8f9da9b$export$791ef57e62e21c3f({
+              content_blocks_: content_blocks_by_row_,
+              cols_at_size_: modified_cols_at_size,
+              number_of_items_shown_: number_of_items_shown_,
+              set_top_row_shortened_by_: set_top_row_shortened_by_
+            }));
             const rendered_placeholders = $gVhhF$solidjs.createMemo(() => get_should_have_placeholders_rendered() ? $0caf87eaa19079da$export$f33414a4df0afd3f({
+              content_blocks_: content_blocks_,
               product_card_template_: product_card_template_,
-              num_placeholders_: $gVhhF$solidjs.createMemo(() => {
-                // Can't use the data out of request_base for the id because request_base is too late, we need the correct amount of placeholders before the browser has restored the scroll state after processing all popstate events
-                return (0, $aec24316ed262dc0$export$6c9030e511152266) + (get_scroll_restoration_data().find(({
-                  for_id: for_id
-                }) => for_id === id_currently_querying_for_())?.min_results_loaded ?? min_products_to_fetch_);
-              })
+              num_placeholders_: num_placeholders_
             }) : undefined);
             const [get_suspense_is_blocked, set_suspense_is_blocked] = $gVhhF$solidjs.createSignal(false);
-            const modified_cols_at_size = $fe76fb463cc60b89$var$make_modified_cols_at_size({
-              layout_options_: layout_options_,
-              sort_or_filter_open_: sort_or_filter_open_
-            });
             const block_suspense_if_needed = () => {
               if (!is_just_after_plp_results_update) return;
               is_just_after_plp_results_update = false;
@@ -4794,6 +5166,8 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                 return (() => {
                   fallback_is_alive = true;
                   $gVhhF$solidjs.onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
+                  set_product_card_suspense_is_in_fallback(true); // Here for the content block code that needs to know how many items we're displaying
+                  $gVhhF$solidjs.onCleanup(() => set_product_card_suspense_is_in_fallback(false));
                   return $gVhhF$solidjs.createMemo(() => {
                     // We need to be able to block the suspense since when async product cards are *rendering* we want to show the placeholders on initial load but not when loading more
                     // In future we could have individual suspense's for each product card, but that's too much for now
@@ -4818,37 +5192,64 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                     min_products_to_fetch_: min_products_to_fetch_,
                     query_base_: query_base_,
                     depict_api_: depict_api_,
-                    is_loading_: is_loading_
+                    is_loading_: is_loading_,
+                    content_blocks_: content_blocks_,
+                    set_number_loaded_displays_: set_number_loaded_displays_
                   });
                   $gVhhF$solidjs.onCleanup(() => suspense_contents = undefined);
                   return suspense_contents;
                 })();
               }
             });
-            return [$gVhhF$solidjsweb.memo((0, $fc23d7668ae0011d$export$a2cc176055f8f08)), $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), {
-              get cols_at_size() {
-                return modified_cols_at_size();
+            /* This Show is so that we show placeholders while query_base is loading and because it's cumbersome to ensure that everything that directly accesses the plp_results_ resource is within the <Suspense> boundary */
+            const listing_contents = $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+              get when() {
+                return !is_loading_();
               },
-              get override_vertical_spacing() {
-                return layout_options_().override_vertical_spacing;
+              get fallback() {
+                return rendered_placeholders();
               },
-              get grid_spacing() {
-                return layout_options_().grid_spacing;
+              children: product_cards_when_data
+            });
+            return [$gVhhF$solidjsweb.memo((0, $fc23d7668ae0011d$export$a2cc176055f8f08)), $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+              get when() {
+                return doesnt_have_content_blocks();
               },
-              rows: "all",
-              layout: "grid",
-              element_attributes: {
-                class: "cards"
+              get fallback() {
+                return $gVhhF$solidjsweb.createComponent((0, $75777da1687ba3f6$export$ab6b147eec64fea5), {
+                  get cols_at_size() {
+                    return modified_cols_at_size();
+                  },
+                  get override_vertical_spacing() {
+                    return layout_options_().override_vertical_spacing;
+                  },
+                  get grid_spacing() {
+                    return layout_options_().grid_spacing;
+                  },
+                  element_attributes: {
+                    class: "cards css-grid"
+                  },
+                  top_row_shortened_by_: top_row_shortened_by_,
+                  children: listing_contents
+                });
               },
               get children() {
-                return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-                  get when() {
-                    return !is_loading_();
+                return $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), {
+                  get cols_at_size() {
+                    return modified_cols_at_size();
+                  },
+                  get override_vertical_spacing() {
+                    return layout_options_().override_vertical_spacing;
                   },
-                  get fallback() {
-                    return rendered_placeholders();
+                  get grid_spacing() {
+                    return layout_options_().grid_spacing;
                   },
-                  children: product_cards_when_data
+                  rows: "all",
+                  layout: "grid",
+                  element_attributes: {
+                    class: "cards"
+                  },
+                  children: listing_contents
                 });
               }
             })];
@@ -4861,32 +5262,6 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
     return _el$;
   })();
 }
-/**
- * Changes cols_at_size depending on if filters are open or not so one card less is shown when the filters are open
- * This function is special to the actual PLPResults.
- */
-function $fe76fb463cc60b89$var$make_modified_cols_at_size({
-  layout_options_: layout_options_,
-  sort_or_filter_open_: sort_or_filter_open_
-}) {
-  return $gVhhF$solidjs.createMemo(() => {
-    const layout_options = layout_options_();
-    // Add grid styling that changes when filters get opened/closed
-    const when_filters_closed_cols = layout_options.cols_at_size;
-    return sort_or_filter_open_() ? when_filters_closed_cols.map(row => {
-      const [num_cols_default,,,, override_cols] = row;
-      const cloned_row = [...row];
-      // @ts-ignore
-      cloned_row[0] = num_cols_default - 1;
-      if (override_cols)
-        // @ts-ignore
-        cloned_row[4] = {
-          overrides: Object.fromEntries(Object.entries(override_cols.overrides).map(([row, column]) => [row, column - 1]))
-        };
-      return cloned_row;
-    }) : when_filters_closed_cols;
-  });
-}
 const $be89be42ce9ea60f$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="sorting-attributes"></div>`, 2),
   $be89be42ce9ea60f$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="sorting-direction"></div>`, 2),
   $be89be42ce9ea60f$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div><div class="input-row"><input type="radio"><span class="custom-indicator"></span><!#><!/></div></div>`, 9),
@@ -6420,7 +6795,8 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   product_card_template_: product_card_template_,
   sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
   sorting_query_param_: sorting_query_param_,
-  filter_query_param_prefix_: filter_query_param_prefix_
+  filter_query_param_prefix_: filter_query_param_prefix_,
+  content_blocks_by_row_: content_blocks_by_row_
 }) {
   let results_for;
   let only_show_filters_opener_;
@@ -6712,6 +7088,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
               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_,
               id_currently_querying_for_: query_id_,
               no_results_options_: {
                 selected_filters_: selected_filters_,
@@ -7221,6 +7598,7 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e(props) {
       expanded_hierarchical_filters_: expanded_hierarchical_filters_,
       selected_filters_: selected_filters_,
       sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
+      content_blocks_by_row_: () => props.content_blocks_by_row,
       scroll_restoration_data_: scroll_restoration_data_,
       layout_options_: $gVhhF$solidjs.createMemo(() => ({
         cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
@@ -7471,37 +7849,6 @@ async function $63b10c9f461e0ef6$var$download_categories(tenant, market, type) {
     return [];
   }
 }
-function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
-  const style = $gVhhF$solidjs.createMemo(() => {
-    const {
-      style: style,
-      height: height,
-      width: width,
-      aspectRatio: aspectRatio
-    } = props;
-    const is_image = aspectRatio != undefined;
-    const size_data = is_image ? {
-      width: "100%",
-      "padding-bottom": 1 / aspectRatio * 100 + "%"
-    } : {
-      width: width,
-      height: height
-    };
-    return {
-      display: "block",
-      ...(style || {}),
-      ...size_data
-    };
-  });
-  return $gVhhF$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
-    get style() {
-      return style();
-    },
-    get ["class"]() {
-      return props.class;
-    }
-  });
-}
 const $6f604560873e4f69$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="instant-card"><div class="img-part"></div><div class="right-part"><div class="title-brand-tagline"><span class="title"></span></div></div></div>`, 10);
 function $6f604560873e4f69$export$ee1733d9a8495996() {
   return (() => {
@@ -9927,7 +10274,8 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
   router_: router_,
   content_results_rows_: content_results_rows_,
   content_layout_options_: content_layout_options_,
-  content_search_enabled_: content_search_enabled_
+  content_search_enabled_: content_search_enabled_,
+  content_blocks_by_row_: content_blocks_by_row_
 }) {
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $gVhhF$solidjs.createSignal(false);
@@ -10206,6 +10554,7 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
               layout_options_: layout_options_,
               sort_or_filter_open_: sort_or_filter_open_,
               id_currently_querying_for_: get_search_query_,
+              content_blocks_by_row_: content_blocks_by_row_,
               no_results_options_: {
                 selected_filters_: selected_filters_,
                 expanded_hierarchical_filters_: expanded_hierarchical_filters_,
@@ -10651,6 +11000,7 @@ function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb(props) {
       search_sorting_open_: state_.sorting_open,
       expanded_filters_: state_.expanded_filters,
       content_results_rows_: state_.content_results_rows,
+      content_blocks_by_row_: () => props.content_blocks_by_row,
       router_: shared_properties.router_,
       make_category_suggestion_card_: shared_properties.enable_category_suggestions_ ? category_suggestion_ => {
         return $dae23104ba8bb78c$export$d757d54550ebfb3d({