@depict-ai/ui 4.10.21 → 4.10.22

package/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.22";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -1284,8 +1284,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_ = $52FdA$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$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div>`),
   $6c2c739b113a8ddf$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<style type=text/css>`);
 function $6c2c739b113a8ddf$export$d21e32dfedac04be(props) {
@@ -1658,10 +1665,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 $52FdA$solidjs.createMemo(() => $f8f375d6245ffff2$export$92aa5d691d588f3f({
+  const remapped_ = $52FdA$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_ = $52FdA$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 {
@@ -1670,13 +1685,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
@@ -1724,6 +1742,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;
@@ -1733,9 +1752,46 @@ function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
   }
   return {
     content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_by_index_,
     displaced_products_: displaced_products_
   };
 }
+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;
+  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;
+    seen_products += Math.max(0, n_cols_currently_showing_ - taken_by_blocks);
+    if (seen_products >= product_count) break;
+    // 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] || [];
+    if (Array.isArray(block) && rows.length > 1) {
+      // Several blocks share this index (e.g. the end of one row and the start of the next): keep the ones in the last product's row
+      const in_last_row = block.filter((_, j) => rows[j] <= last_product_row);
+      if (in_last_row.length) trailing.push(in_last_row);
+      continue;
+    }
+    if (((_rows$ = rows[0]) !== null && _rows$ !== void 0 ? _rows$ : Infinity) > last_product_row) continue; // a row below the last product's row: keep it hidden
+    trailing.push(block);
+  }
+  return trailing;
+}
 /**
  * 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.
@@ -1788,6 +1844,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/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.22";
 /**
  * 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/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.10.21";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.22";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $8tj43$createSignal(false);
   $8tj43$onCleanup($8tj43$javascript_media_query(media_query, _ref => {
@@ -1179,8 +1179,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_ = $8tj43$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$ = /*#__PURE__*/$8tj43$template(`<div>`),
   $63f1f8dbcd07d3b0$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<style type=text/css>`);
 function $63f1f8dbcd07d3b0$export$d21e32dfedac04be(props) {
@@ -1553,10 +1560,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 $8tj43$createMemo(() => $ff7feae4dddd6073$export$92aa5d691d588f3f({
+  const remapped_ = $8tj43$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_ = $8tj43$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 {
@@ -1565,13 +1580,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
@@ -1619,6 +1637,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;
@@ -1628,9 +1647,46 @@ function $ff7feae4dddd6073$export$92aa5d691d588f3f(_ref2) {
   }
   return {
     content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_by_index_,
     displaced_products_: displaced_products_
   };
 }
+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;
+  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;
+    seen_products += Math.max(0, n_cols_currently_showing_ - taken_by_blocks);
+    if (seen_products >= product_count) break;
+    // 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] || [];
+    if (Array.isArray(block) && rows.length > 1) {
+      // Several blocks share this index (e.g. the end of one row and the start of the next): keep the ones in the last product's row
+      const in_last_row = block.filter((_, j) => rows[j] <= last_product_row);
+      if (in_last_row.length) trailing.push(in_last_row);
+      continue;
+    }
+    if (((_rows$ = rows[0]) !== null && _rows$ !== void 0 ? _rows$ : Infinity) > last_product_row) continue; // a row below the last product's row: keep it hidden
+    trailing.push(block);
+  }
+  return trailing;
+}
 /**
  * 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.
@@ -1683,6 +1739,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;
       },

package/latest/index.cjs

@@ -109,7 +109,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.21";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.22";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -1232,8 +1232,14 @@ function $ac167f6af6a48fc3$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_ = $gVhhF$solidjs.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 $f48d0fbb00835aaa$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
   $f48d0fbb00835aaa$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<style type=text/css>`);
 function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
@@ -1583,10 +1589,18 @@ function $d92f338ba8f9da9b$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 $gVhhF$solidjs.createMemo(() => $d92f338ba8f9da9b$export$92aa5d691d588f3f({
+  const remapped_ = $gVhhF$solidjs.createMemo(() => $d92f338ba8f9da9b$export$92aa5d691d588f3f({
     wrapped_blocks_: get_wrapped_blocks_(),
     n_cols_currently_showing_: n_cols_currently_showing_()
-  }).content_blocks_by_index_);
+  }));
+  const content_blocks_by_index_ = $gVhhF$solidjs.createMemo(() => remapped_().content_blocks_by_index_);
+  return Object.assign(content_blocks_by_index_, {
+    trailing_: product_count => $d92f338ba8f9da9b$export$b94605e5b3ce01c({
+      ...remapped_(),
+      n_cols_currently_showing_: n_cols_currently_showing_(),
+      product_count: product_count
+    })
+  });
 }
 function $d92f338ba8f9da9b$export$92aa5d691d588f3f({
   wrapped_blocks_: wrapped_blocks_,
@@ -1594,13 +1608,16 @@ function $d92f338ba8f9da9b$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
@@ -1645,6 +1662,7 @@ function $d92f338ba8f9da9b$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] ||= [];
@@ -1653,9 +1671,44 @@ function $d92f338ba8f9da9b$export$92aa5d691d588f3f({
   }
   return {
     content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_by_index_,
     displaced_products_: displaced_products_
   };
 }
+function $d92f338ba8f9da9b$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;
+  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;
+    seen_products += Math.max(0, n_cols_currently_showing_ - taken_by_blocks);
+    if (seen_products >= product_count) break;
+    // 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] || [];
+    if (Array.isArray(block) && rows.length > 1) {
+      // Several blocks share this index (e.g. the end of one row and the start of the next): keep the ones in the last product's row
+      const in_last_row = block.filter((_, j) => rows[j] <= last_product_row);
+      if (in_last_row.length) trailing.push(in_last_row);
+      continue;
+    }
+    if ((rows[0] ?? Infinity) > last_product_row) continue; // a row below the last product's row: keep it hidden
+    trailing.push(block);
+  }
+  return trailing;
+}
 /**
  * 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.
@@ -1705,6 +1758,7 @@ function $d92f338ba8f9da9b$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/latest/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.22";
 /**
  * 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/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.22";
 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,9 +1569,44 @@ function $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
   }
   return {
     content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_by_index_,
     displaced_products_: displaced_products_
   };
 }
+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;
+  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;
+    seen_products += Math.max(0, n_cols_currently_showing_ - taken_by_blocks);
+    if (seen_products >= product_count) break;
+    // 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] || [];
+    if (Array.isArray(block) && rows.length > 1) {
+      // Several blocks share this index (e.g. the end of one row and the start of the next): keep the ones in the last product's row
+      const in_last_row = block.filter((_, j) => rows[j] <= last_product_row);
+      if (in_last_row.length) trailing.push(in_last_row);
+      continue;
+    }
+    if ((rows[0] ?? Infinity) > last_product_row) continue; // a row below the last product's row: keep it hidden
+    trailing.push(block);
+  }
+  return trailing;
+}
 /**
  * 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.
@@ -1603,6 +1656,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,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.10.21",
+  "version": "4.10.22",
   "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 +236,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.14",
+    "@depict-ai/types": "^5.6.12",
+    "@depict-ai/utilishared": "^2.6.12",
     "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.22";
 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,9 +1459,46 @@ function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
   }
   return {
     content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_by_index_,
     displaced_products_: displaced_products_
   };
 }
+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;
+  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;
+    seen_products += Math.max(0, n_cols_currently_showing_ - taken_by_blocks);
+    if (seen_products >= product_count) break;
+    // 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] || [];
+    if (Array.isArray(block) && rows.length > 1) {
+      // Several blocks share this index (e.g. the end of one row and the start of the next): keep the ones in the last product's row
+      const in_last_row = block.filter((_, j) => rows[j] <= last_product_row);
+      if (in_last_row.length) trailing.push(in_last_row);
+      continue;
+    }
+    if (((_rows$ = rows[0]) !== null && _rows$ !== void 0 ? _rows$ : Infinity) > last_product_row) continue; // a row below the last product's row: keep it hidden
+    trailing.push(block);
+  }
+  return trailing;
+}
 /**
  * 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.
@@ -1475,6 +1531,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.22";
 /**
  * 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.22";
 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,9 +1354,46 @@ function $ff7feae4dddd6073$export$92aa5d691d588f3f(_ref2) {
   }
   return {
     content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_by_index_,
     displaced_products_: displaced_products_
   };
 }
+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;
+  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;
+    seen_products += Math.max(0, n_cols_currently_showing_ - taken_by_blocks);
+    if (seen_products >= product_count) break;
+    // 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] || [];
+    if (Array.isArray(block) && rows.length > 1) {
+      // Several blocks share this index (e.g. the end of one row and the start of the next): keep the ones in the last product's row
+      const in_last_row = block.filter((_, j) => rows[j] <= last_product_row);
+      if (in_last_row.length) trailing.push(in_last_row);
+      continue;
+    }
+    if (((_rows$ = rows[0]) !== null && _rows$ !== void 0 ? _rows$ : Infinity) > last_product_row) continue; // a row below the last product's row: keep it hidden
+    trailing.push(block);
+  }
+  return trailing;
+}
 /**
  * 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.
@@ -1370,6 +1426,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;
       },

package/server/latest/index.cjs

@@ -109,7 +109,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.21";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.22";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $5vyXB$solidjs.createSignal(false);
   $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
@@ -1001,8 +1001,14 @@ function $ac167f6af6a48fc3$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_ = $5vyXB$solidjs.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 $f48d0fbb00835aaa$var$_tmpl$ = ["<div", ' class="', '">', "</div>"],
   $f48d0fbb00835aaa$var$_tmpl$2 = ["<style", ' type="text/css">', "</style>"];
 function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
@@ -1303,10 +1309,18 @@ function $d92f338ba8f9da9b$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 $5vyXB$solidjs.createMemo(() => $d92f338ba8f9da9b$export$92aa5d691d588f3f({
+  const remapped_ = $5vyXB$solidjs.createMemo(() => $d92f338ba8f9da9b$export$92aa5d691d588f3f({
     wrapped_blocks_: get_wrapped_blocks_(),
     n_cols_currently_showing_: n_cols_currently_showing_()
-  }).content_blocks_by_index_);
+  }));
+  const content_blocks_by_index_ = $5vyXB$solidjs.createMemo(() => remapped_().content_blocks_by_index_);
+  return Object.assign(content_blocks_by_index_, {
+    trailing_: product_count => $d92f338ba8f9da9b$export$b94605e5b3ce01c({
+      ...remapped_(),
+      n_cols_currently_showing_: n_cols_currently_showing_(),
+      product_count: product_count
+    })
+  });
 }
 function $d92f338ba8f9da9b$export$92aa5d691d588f3f({
   wrapped_blocks_: wrapped_blocks_,
@@ -1314,13 +1328,16 @@ function $d92f338ba8f9da9b$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
@@ -1365,6 +1382,7 @@ function $d92f338ba8f9da9b$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] ||= [];
@@ -1373,9 +1391,44 @@ function $d92f338ba8f9da9b$export$92aa5d691d588f3f({
   }
   return {
     content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_by_index_,
     displaced_products_: displaced_products_
   };
 }
+function $d92f338ba8f9da9b$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;
+  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;
+    seen_products += Math.max(0, n_cols_currently_showing_ - taken_by_blocks);
+    if (seen_products >= product_count) break;
+    // 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] || [];
+    if (Array.isArray(block) && rows.length > 1) {
+      // Several blocks share this index (e.g. the end of one row and the start of the next): keep the ones in the last product's row
+      const in_last_row = block.filter((_, j) => rows[j] <= last_product_row);
+      if (in_last_row.length) trailing.push(in_last_row);
+      continue;
+    }
+    if ((rows[0] ?? Infinity) > last_product_row) continue; // a row below the last product's row: keep it hidden
+    trailing.push(block);
+  }
+  return trailing;
+}
 /**
  * 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.
@@ -1405,6 +1458,7 @@ function $d92f338ba8f9da9b$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/latest/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.22";
 /**
  * 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/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$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.22";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $i7OB2$createSignal(false);
   $i7OB2$onCleanup($i7OB2$javascript_media_query(media_query, ({
@@ -899,8 +899,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_ = $i7OB2$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$ = ["<div", ' class="', '">', "</div>"],
   $c8d5ff4524619fcd$var$_tmpl$2 = ["<style", ' type="text/css">', "</style>"];
 function $c8d5ff4524619fcd$export$d21e32dfedac04be(props) {
@@ -1201,10 +1207,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 $i7OB2$createMemo(() => $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
+  const remapped_ = $i7OB2$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_ = $i7OB2$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_,
@@ -1212,13 +1226,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
@@ -1263,6 +1280,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] ||= [];
@@ -1271,9 +1289,44 @@ function $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
   }
   return {
     content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_by_index_,
     displaced_products_: displaced_products_
   };
 }
+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;
+  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;
+    seen_products += Math.max(0, n_cols_currently_showing_ - taken_by_blocks);
+    if (seen_products >= product_count) break;
+    // 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] || [];
+    if (Array.isArray(block) && rows.length > 1) {
+      // Several blocks share this index (e.g. the end of one row and the start of the next): keep the ones in the last product's row
+      const in_last_row = block.filter((_, j) => rows[j] <= last_product_row);
+      if (in_last_row.length) trailing.push(in_last_row);
+      continue;
+    }
+    if ((rows[0] ?? Infinity) > last_product_row) continue; // a row below the last product's row: keep it hidden
+    trailing.push(block);
+  }
+  return trailing;
+}
 /**
  * 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.
@@ -1303,6 +1356,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;
       },