@depict-ai/ui 4.10.21 → 4.10.24

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.21";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.24";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -1130,8 +1130,14 @@ function $0449e7d49398c077$export$a1fd619a4743ca08({
     setFirstResultInViewport(Math.min(...intersecting) + 1); // +1 because we want to start counting at 1
     setLastResultsInViewport(Math.max(...intersecting) + 1);
   });
-  return renderedDisplays_;
+  // Content blocks placed after the last product (but still in its row) have no product card to render in front of, so render them after the cards once there are no more products to load
+  const trailingContentBlocks_ = $9HbP8$createMemo(() => {
+    if (!all_products_loaded_[0]()) return [];
+    return content_blocks_?.()?.trailing_?.(displays_by_key_().size) || [];
+  });
+  return [renderedDisplays_, trailingContentBlocks_]; // Regarding the as unknown: https://github.com/solidjs/solid/releases/tag/v1.7.0
 }
+
 var $c8d5ff4524619fcd$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div>`),
   $c8d5ff4524619fcd$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<style type=text/css>`);
 function $c8d5ff4524619fcd$export$d21e32dfedac04be(props) {
@@ -1481,10 +1487,18 @@ function $e7a7eb102ddc0c79$export$791ef57e62e21c3f({
     set_top_row_shortened_by_(blocks_in_top_row_taken - 1); // minus one because the content block wrapper also is an element
   });
 
-  return $9HbP8$createMemo(() => $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
+  const remapped_ = $9HbP8$createMemo(() => $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
     wrapped_blocks_: get_wrapped_blocks_(),
     n_cols_currently_showing_: n_cols_currently_showing_()
-  }).content_blocks_by_index_);
+  }));
+  const content_blocks_by_index_ = $9HbP8$createMemo(() => remapped_().content_blocks_by_index_);
+  return Object.assign(content_blocks_by_index_, {
+    trailing_: product_count => $e7a7eb102ddc0c79$export$b94605e5b3ce01c({
+      ...remapped_(),
+      n_cols_currently_showing_: n_cols_currently_showing_(),
+      product_count: product_count
+    })
+  });
 }
 function $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
   wrapped_blocks_: wrapped_blocks_,
@@ -1492,13 +1506,16 @@ function $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
 }) {
   // This computation should be quite cheap since it just moves around things into an array
   const content_blocks_by_index_ = [];
+  const rows_by_index_ = []; // the row of each block at each index of content_blocks_by_index_, in the same order
   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
   if (!n_cols_currently_showing_)
     // Nope out of here if we don't know how many columns are showing
     return {
-      content_blocks_by_index_: content_blocks_by_index_
+      content_blocks_by_index_: content_blocks_by_index_,
+      rows_by_index_: rows_by_index_,
+      displaced_products_: displaced_products_
     };
   for (let i = 0; i < wrapped_blocks_.length; i++) {
     // i = row to show at
@@ -1543,6 +1560,7 @@ function $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
         content_blocks_by_index_[final_target_index] = array;
       }
     } else content_blocks_by_index_[final_target_index] = block_content;
+    (rows_by_index_[final_target_index] ||= []).push(i);
     // Update displacement
     for (let j = 0; j < span_rows; j++) {
       const row = displaced_products_[i + j] ||= [];
@@ -1551,20 +1569,65 @@ function $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
   }
   return {
     content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_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.
- * Then renders the content and wraps it into a div with the correct styling.
- * Also caps span_columns to max available columns
- */
+function $e7a7eb102ddc0c79$export$b94605e5b3ce01c({
+  content_blocks_by_index_: content_blocks_by_index_,
+  rows_by_index_: rows_by_index_,
+  displaced_products_: displaced_products_,
+  n_cols_currently_showing_: n_cols_currently_showing_,
+  product_count: product_count
+}) {
+  const trailing = [];
+  if (!n_cols_currently_showing_ || product_count <= 0) return trailing;
+  // Find the row the last product lands in: each row has room for the columns that blocks don't take up
+  let last_product_row = 0;
+  let last_product_row_is_full = false;
+  for (let seen_products = 0;; last_product_row++) {
+    const row = displaced_products_[last_product_row];
+    const taken_by_blocks = typeof row === "number" ? row : row ? row.filter(item => item).length : 0;
+    const product_slots_in_row = Math.max(0, n_cols_currently_showing_ - taken_by_blocks);
+    if (seen_products + product_slots_in_row >= product_count) {
+      last_product_row_is_full = seen_products + product_slots_in_row === product_count;
+      break;
+    }
+    seen_products += product_slots_in_row;
+    // Rows past the ones blocks take up all have room for products, so we're done by then at the latest
+    if (last_product_row >= displaced_products_.length + product_count) break;
+  }
+  for (let i = product_count; i < content_blocks_by_index_.length; i++) {
+    const block = content_blocks_by_index_[i];
+    if (block === undefined) continue;
+    const rows = rows_by_index_[i] || [];
+    const last_allowed_row = last_product_row + (last_product_row_is_full ? 1 : 0);
+    if (Array.isArray(block) && rows.length > 1) {
+      // Several blocks can share this index. Keep only blocks in allowed trailing rows.
+      const in_trailing_rows = block.filter((_, j) => rows[j] <= last_allowed_row);
+      if (in_trailing_rows.length) trailing.push(in_trailing_rows);
+      continue;
+    }
+    if ((rows[0] ?? Infinity) > last_allowed_row) continue; // Keep cards meant for later rows hidden after filtering.
+    trailing.push(block);
+  }
+  return trailing;
+}
+function $e7a7eb102ddc0c79$export$911278b0390ae36e(block, max_span_columns) {
+  const span_columns = Math.min(block.span_columns, max_span_columns ?? Infinity);
+  const spans_whole_row = span_columns === max_span_columns;
+  return {
+    span_columns: span_columns,
+    span_rows: spans_whole_row ? 1 : block.span_rows,
+    spans_whole_row: spans_whole_row
+  };
+}
 function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
   const get_wrapped_blocks = $9HbP8$mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
-    const final_span_columns = $9HbP8$createMemo(() => Math.min(block.span_columns, max_span_columns() ?? Infinity));
-    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
-    const final_span_rows = $9HbP8$createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
+    const final_spans = $9HbP8$createMemo(() => $e7a7eb102ddc0c79$export$911278b0390ae36e(block, max_span_columns()));
+    const final_span_columns = $9HbP8$createMemo(() => final_spans().span_columns);
+    const final_span_rows = $9HbP8$createMemo(() => final_spans().span_rows);
     const [rendering_delayed, set_rendering_delayed_] = $9HbP8$createSignal(true);
     const content = $9HbP8$createComponent((0, $9HbP8$Show), {
       get when() {
@@ -1578,7 +1641,7 @@ function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_s
           }
         }));
         $9HbP8$effect(_p$ => {
-          var _v$ = !!(final_span_columns() === max_span_columns()),
+          var _v$ = !!final_spans().spans_whole_row,
             _v$2 = {
               [(0, $6dee9211e57ac31a$export$c500183c31c2b22e)]: final_span_columns()
             },
@@ -1603,6 +1666,7 @@ function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       content: () => {
         // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
         // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
+        // (or, once all products have loaded, ResultsProductCards renders the blocks placed after the last product)
         set_rendering_delayed_(false);
         return content;
       },

package/package.json

@@ -1,6 +1,11 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.10.21",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/depict-org/depict-ui.git",
+    "directory": "browser-tags-v2/packages/ui"
+  },
+  "version": "4.10.24",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,9 +241,9 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "^7.22.6",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.6.13",
-    "@depict-ai/types": "^5.6.11",
-    "@depict-ai/utilishared": "^2.6.11",
+    "@depict-ai/plp-styling": "^4.6.15",
+    "@depict-ai/types": "^5.6.13",
+    "@depict-ai/utilishared": "^2.6.13",
     "solid-js": "^1.9.10"
   },
   "type": "module",

package/server/ES10/index.cjs

@@ -115,7 +115,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.10.21";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.24";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -1046,8 +1046,15 @@ function $0d3ee7000f047e67$export$a1fd619a4743ca08(_ref) {
     setFirstResultInViewport(Math.min(...intersecting) + 1); // +1 because we want to start counting at 1
     setLastResultsInViewport(Math.max(...intersecting) + 1);
   });
-  return renderedDisplays_;
+  // Content blocks placed after the last product (but still in its row) have no product card to render in front of, so render them after the cards once there are no more products to load
+  const trailingContentBlocks_ = $3hooq$solidjs.createMemo(() => {
+    var _content_blocks_, _content_blocks_$trai;
+    if (!all_products_loaded_[0]()) return [];
+    return (content_blocks_ === null || content_blocks_ === void 0 ? void 0 : (_content_blocks_ = content_blocks_()) === null || _content_blocks_ === void 0 ? void 0 : (_content_blocks_$trai = _content_blocks_.trailing_) === null || _content_blocks_$trai === void 0 ? void 0 : _content_blocks_$trai.call(_content_blocks_, displays_by_key_().size)) || [];
+  });
+  return [renderedDisplays_, trailingContentBlocks_]; // Regarding the as unknown: https://github.com/solidjs/solid/releases/tag/v1.7.0
 }
+
 var $6c2c739b113a8ddf$var$_tmpl$ = ["<div", ' class="', '">', "</div>"],
   $6c2c739b113a8ddf$var$_tmpl$2 = ["<style", ' type="text/css">', "</style>"];
 function $6c2c739b113a8ddf$export$d21e32dfedac04be(props) {
@@ -1365,10 +1372,18 @@ function $f8f375d6245ffff2$export$791ef57e62e21c3f(_ref) {
     set_top_row_shortened_by_(blocks_in_top_row_taken - 1); // minus one because the content block wrapper also is an element
   });
 
-  return $3hooq$solidjs.createMemo(() => $f8f375d6245ffff2$export$92aa5d691d588f3f({
+  const remapped_ = $3hooq$solidjs.createMemo(() => $f8f375d6245ffff2$export$92aa5d691d588f3f({
     wrapped_blocks_: get_wrapped_blocks_(),
     n_cols_currently_showing_: n_cols_currently_showing_()
-  }).content_blocks_by_index_);
+  }));
+  const content_blocks_by_index_ = $3hooq$solidjs.createMemo(() => remapped_().content_blocks_by_index_);
+  return Object.assign(content_blocks_by_index_, {
+    trailing_: product_count => $f8f375d6245ffff2$export$b94605e5b3ce01c({
+      ...remapped_(),
+      n_cols_currently_showing_: n_cols_currently_showing_(),
+      product_count: product_count
+    })
+  });
 }
 function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
   let {
@@ -1377,13 +1392,16 @@ function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
   } = _ref2;
   // This computation should be quite cheap since it just moves around things into an array
   const content_blocks_by_index_ = [];
+  const rows_by_index_ = []; // the row of each block at each index of content_blocks_by_index_, in the same order
   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
   if (!n_cols_currently_showing_)
     // Nope out of here if we don't know how many columns are showing
     return {
-      content_blocks_by_index_: content_blocks_by_index_
+      content_blocks_by_index_: content_blocks_by_index_,
+      rows_by_index_: rows_by_index_,
+      displaced_products_: displaced_products_
     };
   for (let i = 0; i < wrapped_blocks_.length; i++) {
     // i = row to show at
@@ -1431,6 +1449,7 @@ function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
         content_blocks_by_index_[final_target_index] = array;
       }
     } else content_blocks_by_index_[final_target_index] = block_content;
+    (rows_by_index_[final_target_index] || (rows_by_index_[final_target_index] = [])).push(i);
     // Update displacement
     for (let j = 0; j < span_rows; j++) {
       var _ref3;
@@ -1440,30 +1459,74 @@ function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
   }
   return {
     content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_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.
- * Then renders the content and wraps it into a div with the correct styling.
- * Also caps span_columns to max available columns
- */
+function $f8f375d6245ffff2$export$b94605e5b3ce01c(_ref4) {
+  let {
+    content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_by_index_,
+    displaced_products_: displaced_products_,
+    n_cols_currently_showing_: n_cols_currently_showing_,
+    product_count: product_count
+  } = _ref4;
+  const trailing = [];
+  if (!n_cols_currently_showing_ || product_count <= 0) return trailing;
+  // Find the row the last product lands in: each row has room for the columns that blocks don't take up
+  let last_product_row = 0;
+  let last_product_row_is_full = false;
+  for (let seen_products = 0;; last_product_row++) {
+    const row = displaced_products_[last_product_row];
+    const taken_by_blocks = typeof row === "number" ? row : row ? row.filter(item => item).length : 0;
+    const product_slots_in_row = Math.max(0, n_cols_currently_showing_ - taken_by_blocks);
+    if (seen_products + product_slots_in_row >= product_count) {
+      last_product_row_is_full = seen_products + product_slots_in_row === product_count;
+      break;
+    }
+    seen_products += product_slots_in_row;
+    // Rows past the ones blocks take up all have room for products, so we're done by then at the latest
+    if (last_product_row >= displaced_products_.length + product_count) break;
+  }
+  for (let i = product_count; i < content_blocks_by_index_.length; i++) {
+    var _rows$;
+    const block = content_blocks_by_index_[i];
+    if (block === undefined) continue;
+    const rows = rows_by_index_[i] || [];
+    const last_allowed_row = last_product_row + (last_product_row_is_full ? 1 : 0);
+    if (Array.isArray(block) && rows.length > 1) {
+      // Several blocks can share this index. Keep only blocks in allowed trailing rows.
+      const in_trailing_rows = block.filter((_, j) => rows[j] <= last_allowed_row);
+      if (in_trailing_rows.length) trailing.push(in_trailing_rows);
+      continue;
+    }
+    if (((_rows$ = rows[0]) !== null && _rows$ !== void 0 ? _rows$ : Infinity) > last_allowed_row) continue; // Keep cards meant for later rows hidden after filtering.
+    trailing.push(block);
+  }
+  return trailing;
+}
+function $f8f375d6245ffff2$export$911278b0390ae36e(block, max_span_columns) {
+  const span_columns = Math.min(block.span_columns, max_span_columns !== null && max_span_columns !== void 0 ? max_span_columns : Infinity);
+  const spans_whole_row = span_columns === max_span_columns;
+  return {
+    span_columns: span_columns,
+    span_rows: spans_whole_row ? 1 : block.span_rows,
+    spans_whole_row: spans_whole_row
+  };
+}
 function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
   const get_wrapped_blocks = $3hooq$solidjs.mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
-    const final_span_columns = $3hooq$solidjs.createMemo(() => {
-      var _max_span_columns;
-      return Math.min(block.span_columns, (_max_span_columns = max_span_columns()) !== null && _max_span_columns !== void 0 ? _max_span_columns : Infinity);
-    });
-    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
-    const final_span_rows = $3hooq$solidjs.createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
+    const final_spans = $3hooq$solidjs.createMemo(() => $f8f375d6245ffff2$export$911278b0390ae36e(block, max_span_columns()));
+    const final_span_columns = $3hooq$solidjs.createMemo(() => final_spans().span_columns);
+    const final_span_rows = $3hooq$solidjs.createMemo(() => final_spans().span_rows);
     const [rendering_delayed, set_rendering_delayed_] = $3hooq$solidjs.createSignal(true);
     const content = $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
       get when() {
         return !rendering_delayed();
       },
       get children() {
-        return $3hooq$solidjsweb.ssr($f8f375d6245ffff2$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "content-block-wrapper ".concat(final_span_columns() === max_span_columns() ? "spans-whole-row" : ""), "grid-column:" + "span ".concat($3hooq$solidjsweb.escape(final_span_columns(), true)) + (";grid-row:" + "span ".concat($3hooq$solidjsweb.escape(final_span_rows(), true))) + (";spans_columns_variable_name:" + $3hooq$solidjsweb.escape(final_span_columns(), true)), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent($f8f375d6245ffff2$var$RenderContent, {
+        return $3hooq$solidjsweb.ssr($f8f375d6245ffff2$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "content-block-wrapper ".concat(final_spans().spans_whole_row ? "spans-whole-row" : ""), "grid-column:" + "span ".concat($3hooq$solidjsweb.escape(final_span_columns(), true)) + (";grid-row:" + "span ".concat($3hooq$solidjsweb.escape(final_span_rows(), true))) + (";spans_columns_variable_name:" + $3hooq$solidjsweb.escape(final_span_columns(), true)), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent($f8f375d6245ffff2$var$RenderContent, {
           get content() {
             return block.content;
           }
@@ -1475,6 +1538,7 @@ function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       content: () => {
         // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
         // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
+        // (or, once all products have loaded, ResultsProductCards renders the blocks placed after the last product)
         set_rendering_delayed_(false);
         return content;
       },

package/server/ES10/index.d.ts

@@ -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.10.21";
+export const version = "4.10.24";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -425,10 +425,8 @@ export function remap_blocks_to_index<T = () => JSX.Element | Promise<JSX.Elemen
   })[];
   n_cols_currently_showing_: number | null;
 }): {
-  content_blocks_by_index_: (Awaited<T> | T[])[];
-  readonly displaced_products_?: undefined;
-} | {
   readonly content_blocks_by_index_: (Awaited<T> | T[])[];
+  readonly rows_by_index_: number[][];
   readonly displaced_products_: (number | (true | undefined)[])[];
 };
 /** @jsxImportSource solid-js */

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import $b8hua$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.10.21";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.24";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $b8hua$createSignal(false);
   $b8hua$onCleanup($b8hua$javascript_media_query(media_query, _ref => {
@@ -941,8 +941,15 @@ function $45a8953d760b5e58$export$a1fd619a4743ca08(_ref) {
     setFirstResultInViewport(Math.min(...intersecting) + 1); // +1 because we want to start counting at 1
     setLastResultsInViewport(Math.max(...intersecting) + 1);
   });
-  return renderedDisplays_;
+  // Content blocks placed after the last product (but still in its row) have no product card to render in front of, so render them after the cards once there are no more products to load
+  const trailingContentBlocks_ = $b8hua$createMemo(() => {
+    var _content_blocks_, _content_blocks_$trai;
+    if (!all_products_loaded_[0]()) return [];
+    return (content_blocks_ === null || content_blocks_ === void 0 ? void 0 : (_content_blocks_ = content_blocks_()) === null || _content_blocks_ === void 0 ? void 0 : (_content_blocks_$trai = _content_blocks_.trailing_) === null || _content_blocks_$trai === void 0 ? void 0 : _content_blocks_$trai.call(_content_blocks_, displays_by_key_().size)) || [];
+  });
+  return [renderedDisplays_, trailingContentBlocks_]; // Regarding the as unknown: https://github.com/solidjs/solid/releases/tag/v1.7.0
 }
+
 var $63f1f8dbcd07d3b0$var$_tmpl$ = ["<div", ' class="', '">', "</div>"],
   $63f1f8dbcd07d3b0$var$_tmpl$2 = ["<style", ' type="text/css">', "</style>"];
 function $63f1f8dbcd07d3b0$export$d21e32dfedac04be(props) {
@@ -1260,10 +1267,18 @@ function $ff7feae4dddd6073$export$791ef57e62e21c3f(_ref) {
     set_top_row_shortened_by_(blocks_in_top_row_taken - 1); // minus one because the content block wrapper also is an element
   });
 
-  return $b8hua$createMemo(() => $ff7feae4dddd6073$export$92aa5d691d588f3f({
+  const remapped_ = $b8hua$createMemo(() => $ff7feae4dddd6073$export$92aa5d691d588f3f({
     wrapped_blocks_: get_wrapped_blocks_(),
     n_cols_currently_showing_: n_cols_currently_showing_()
-  }).content_blocks_by_index_);
+  }));
+  const content_blocks_by_index_ = $b8hua$createMemo(() => remapped_().content_blocks_by_index_);
+  return Object.assign(content_blocks_by_index_, {
+    trailing_: product_count => $ff7feae4dddd6073$export$b94605e5b3ce01c({
+      ...remapped_(),
+      n_cols_currently_showing_: n_cols_currently_showing_(),
+      product_count: product_count
+    })
+  });
 }
 function $ff7feae4dddd6073$export$92aa5d691d588f3f(_ref2) {
   let {
@@ -1272,13 +1287,16 @@ function $ff7feae4dddd6073$export$92aa5d691d588f3f(_ref2) {
   } = _ref2;
   // This computation should be quite cheap since it just moves around things into an array
   const content_blocks_by_index_ = [];
+  const rows_by_index_ = []; // the row of each block at each index of content_blocks_by_index_, in the same order
   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
   if (!n_cols_currently_showing_)
     // Nope out of here if we don't know how many columns are showing
     return {
-      content_blocks_by_index_: content_blocks_by_index_
+      content_blocks_by_index_: content_blocks_by_index_,
+      rows_by_index_: rows_by_index_,
+      displaced_products_: displaced_products_
     };
   for (let i = 0; i < wrapped_blocks_.length; i++) {
     // i = row to show at
@@ -1326,6 +1344,7 @@ function $ff7feae4dddd6073$export$92aa5d691d588f3f(_ref2) {
         content_blocks_by_index_[final_target_index] = array;
       }
     } else content_blocks_by_index_[final_target_index] = block_content;
+    (rows_by_index_[final_target_index] || (rows_by_index_[final_target_index] = [])).push(i);
     // Update displacement
     for (let j = 0; j < span_rows; j++) {
       var _ref3;
@@ -1335,30 +1354,74 @@ function $ff7feae4dddd6073$export$92aa5d691d588f3f(_ref2) {
   }
   return {
     content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_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.
- * Then renders the content and wraps it into a div with the correct styling.
- * Also caps span_columns to max available columns
- */
+function $ff7feae4dddd6073$export$b94605e5b3ce01c(_ref4) {
+  let {
+    content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_by_index_,
+    displaced_products_: displaced_products_,
+    n_cols_currently_showing_: n_cols_currently_showing_,
+    product_count: product_count
+  } = _ref4;
+  const trailing = [];
+  if (!n_cols_currently_showing_ || product_count <= 0) return trailing;
+  // Find the row the last product lands in: each row has room for the columns that blocks don't take up
+  let last_product_row = 0;
+  let last_product_row_is_full = false;
+  for (let seen_products = 0;; last_product_row++) {
+    const row = displaced_products_[last_product_row];
+    const taken_by_blocks = typeof row === "number" ? row : row ? row.filter(item => item).length : 0;
+    const product_slots_in_row = Math.max(0, n_cols_currently_showing_ - taken_by_blocks);
+    if (seen_products + product_slots_in_row >= product_count) {
+      last_product_row_is_full = seen_products + product_slots_in_row === product_count;
+      break;
+    }
+    seen_products += product_slots_in_row;
+    // Rows past the ones blocks take up all have room for products, so we're done by then at the latest
+    if (last_product_row >= displaced_products_.length + product_count) break;
+  }
+  for (let i = product_count; i < content_blocks_by_index_.length; i++) {
+    var _rows$;
+    const block = content_blocks_by_index_[i];
+    if (block === undefined) continue;
+    const rows = rows_by_index_[i] || [];
+    const last_allowed_row = last_product_row + (last_product_row_is_full ? 1 : 0);
+    if (Array.isArray(block) && rows.length > 1) {
+      // Several blocks can share this index. Keep only blocks in allowed trailing rows.
+      const in_trailing_rows = block.filter((_, j) => rows[j] <= last_allowed_row);
+      if (in_trailing_rows.length) trailing.push(in_trailing_rows);
+      continue;
+    }
+    if (((_rows$ = rows[0]) !== null && _rows$ !== void 0 ? _rows$ : Infinity) > last_allowed_row) continue; // Keep cards meant for later rows hidden after filtering.
+    trailing.push(block);
+  }
+  return trailing;
+}
+function $ff7feae4dddd6073$export$911278b0390ae36e(block, max_span_columns) {
+  const span_columns = Math.min(block.span_columns, max_span_columns !== null && max_span_columns !== void 0 ? max_span_columns : Infinity);
+  const spans_whole_row = span_columns === max_span_columns;
+  return {
+    span_columns: span_columns,
+    span_rows: spans_whole_row ? 1 : block.span_rows,
+    spans_whole_row: spans_whole_row
+  };
+}
 function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
   const get_wrapped_blocks = $b8hua$mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
-    const final_span_columns = $b8hua$createMemo(() => {
-      var _max_span_columns;
-      return Math.min(block.span_columns, (_max_span_columns = max_span_columns()) !== null && _max_span_columns !== void 0 ? _max_span_columns : Infinity);
-    });
-    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
-    const final_span_rows = $b8hua$createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
+    const final_spans = $b8hua$createMemo(() => $ff7feae4dddd6073$export$911278b0390ae36e(block, max_span_columns()));
+    const final_span_columns = $b8hua$createMemo(() => final_spans().span_columns);
+    const final_span_rows = $b8hua$createMemo(() => final_spans().span_rows);
     const [rendering_delayed, set_rendering_delayed_] = $b8hua$createSignal(true);
     const content = $b8hua$createComponent((0, $b8hua$Show), {
       get when() {
         return !rendering_delayed();
       },
       get children() {
-        return $b8hua$ssr($ff7feae4dddd6073$var$_tmpl$, $b8hua$ssrHydrationKey(), "content-block-wrapper ".concat(final_span_columns() === max_span_columns() ? "spans-whole-row" : ""), "grid-column:" + "span ".concat($b8hua$escape(final_span_columns(), true)) + (";grid-row:" + "span ".concat($b8hua$escape(final_span_rows(), true))) + (";spans_columns_variable_name:" + $b8hua$escape(final_span_columns(), true)), $b8hua$escape($b8hua$createComponent($ff7feae4dddd6073$var$RenderContent, {
+        return $b8hua$ssr($ff7feae4dddd6073$var$_tmpl$, $b8hua$ssrHydrationKey(), "content-block-wrapper ".concat(final_spans().spans_whole_row ? "spans-whole-row" : ""), "grid-column:" + "span ".concat($b8hua$escape(final_span_columns(), true)) + (";grid-row:" + "span ".concat($b8hua$escape(final_span_rows(), true))) + (";spans_columns_variable_name:" + $b8hua$escape(final_span_columns(), true)), $b8hua$escape($b8hua$createComponent($ff7feae4dddd6073$var$RenderContent, {
           get content() {
             return block.content;
           }
@@ -1370,6 +1433,7 @@ function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       content: () => {
         // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
         // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
+        // (or, once all products have loaded, ResultsProductCards renders the blocks placed after the last product)
         set_rendering_delayed_(false);
         return content;
       },