@depict-ai/ui 2.1.1 → 2.1.3

package/ES10/index.cjs

@@ -76,7 +76,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.1";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.3";
 const $a68b73fd7ba0853f$var$fallback_operator = "in";
 const $a68b73fd7ba0853f$var$fallback_token = "";
 const $a68b73fd7ba0853f$var$legacy_filter_prefix = "filter_";
@@ -4970,8 +4970,7 @@ function $0d3ee7000f047e67$export$a1fd619a4743ca08(_ref) {
     query_base_: query_base_,
     depict_api_: depict_api_,
     is_loading_: is_loading_,
-    content_blocks_: content_blocks_,
-    set_number_loaded_displays_: set_number_loaded_displays_
+    content_blocks_: content_blocks_
   } = _ref;
   // The following sets up an intersection observer to determine which results are in the viewport, used for the ScrollStatus indicator and knowing when to load more
   const target_to_index_map = new Map();
@@ -5018,7 +5017,6 @@ function $0d3ee7000f047e67$export$a1fd619a4743ca08(_ref) {
     query_base_: query_base_,
     depict_api_: depict_api_
   });
-  $52FdA$solidjs.createComputed(() => set_number_loaded_displays_(displays_by_key_().size));
   return $76012c4468a53d1f$export$43f0fb951fcb0c54({
     displays_by_key_: displays_by_key_,
     merchant_: merchant_,
@@ -5108,25 +5106,26 @@ function $830518481649feb1$var$generate_media_queried_declarations(_ref) {
   } = _ref;
   return cols_at_size_.map(options => {
     const [n_cols, min, max, grid_spacing_for_size] = options;
-    const spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
     // See comment in else block below
-    const can_use_gap = $830518481649feb1$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $830518481649feb1$var$can_use_gap_for_unit(override_vertical_spacing_));
+    const can_use_gap = override_vertical_spacing_ ? $830518481649feb1$var$can_use_gap_for_unit(override_vertical_spacing_) : $830518481649feb1$var$can_use_gap_for_unit(main_spacing_to_use);
     let spacing_styling;
     let additional_styling = ""; // outside the media query
-    if (can_use_gap) spacing_styling = "gap:".concat(spacing_to_use, ";").concat(override_vertical_spacing_ ? "row-gap:".concat(override_vertical_spacing_, ";") : "");else {
+    if (can_use_gap) spacing_styling = "gap:".concat(main_spacing_to_use, ";").concat(override_vertical_spacing_ ? "row-gap:".concat(override_vertical_spacing_, ";") : "");else {
       // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
       // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
       // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
       // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
+      const vertical_spacing_to_use = override_vertical_spacing_ !== null && override_vertical_spacing_ !== void 0 ? override_vertical_spacing_ : main_spacing_to_use;
       const width_multiplier = "var(".concat($830518481649feb1$export$c500183c31c2b22e, ", 1)"); // How many cards wide the current item is (needed because content blocks)
-      const one_item_width_exclusing_gaps = "calc(calc(100 / ".concat(n_cols, ") - calc(calc(").concat(n_cols * 2 - 2, " * calc(").concat($830518481649feb1$var$strip_percent_unit(spacing_to_use), " / 2)) / ").concat(n_cols, "))"); // Width of one item in percent of the whole
+      const one_item_width_exclusing_gaps = "calc(calc(100 / ".concat(n_cols, ") - calc(calc(").concat(n_cols * 2 - 2, " * calc(").concat($830518481649feb1$var$strip_percent_unit(vertical_spacing_to_use), " / 2)) / ").concat(n_cols, "))"); // Width of one item in percent of the whole
       // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
       const this_item_width_meat = "calc(".concat(one_item_width_exclusing_gaps, " * ").concat(width_multiplier, ")"); // Width of just the card
-      const this_item_width_gaps = "calc(calc(".concat(width_multiplier, " - 1) * ").concat($830518481649feb1$var$strip_percent_unit(spacing_to_use), ")"); // Width of the gaps
+      const this_item_width_gaps = "calc(calc(".concat(width_multiplier, " - 1) * ").concat($830518481649feb1$var$strip_percent_unit(vertical_spacing_to_use), ")"); // Width of the gaps
       const this_item_width = "calc(".concat(this_item_width_meat, " + ").concat(this_item_width_gaps, ")"); // Width of this item including gaps
       // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
       const convert_top_spacing_to_item_width_percentage = spacing => "calc(calc(100 / ".concat(this_item_width, ") * ").concat(spacing, ")"); // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
-      spacing_styling = "column-gap:".concat(spacing_to_use, ";"); // Still use gaps in the horizontal direction because that works flawlessly
+      spacing_styling = "column-gap:".concat(main_spacing_to_use, ";"); // Still use gaps in the horizontal direction because that works flawlessly
       // Re-use old layout code to get the correct :nth-child declarations for the top margins
       additional_styling = $52FdA$depictaiutilishared.n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
     }
@@ -5224,26 +5223,18 @@ function $f8f375d6245ffff2$export$791ef57e62e21c3f(_ref) {
   let {
     content_blocks_: incoming_content_blocks,
     cols_at_size_: cols_at_size_,
-    number_of_items_shown_: number_of_items_shown_,
     set_top_row_shortened_by_: set_top_row_shortened_by_
   } = _ref;
   // these are by row
   const [content_blocks, set_content_blocks] = $52FdA$solidjsstore.createStore([]);
   const n_cols_currently_showing_ = $85fcdab554c24789$export$a79e666719b3647c(cols_at_size_);
-  const products_to_rows = products => {
-    const cols_currently_showing = n_cols_currently_showing_();
-    if (cols_currently_showing === null) return 0;
-    return Math.ceil(products / cols_currently_showing);
-  };
-  const showing_rows = $52FdA$solidjs.createMemo(() => products_to_rows(number_of_items_shown_()));
   $52FdA$solidjs.createEffect(() => {
     const incoming_value = incoming_content_blocks();
     if (!incoming_value) {
       set_content_blocks([]);
       return;
     }
-    const capped_value = incoming_value.slice(0, showing_rows()); // Don't show more content blocks than we have rows
-    set_content_blocks($52FdA$solidjsstore.reconcile(capped_value, {
+    set_content_blocks($52FdA$solidjsstore.reconcile(incoming_value, {
       key: "content"
     })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
   });
@@ -5301,12 +5292,12 @@ function $f8f375d6245ffff2$var$remap_blocks_to_index(_ref2) {
       for (let j = 0; j < i; j++) {
         const row = displaced_products[j];
         if (row === undefined) continue; // there were no blocks in this row
-        let items_in_row;
-        if (typeof row === "number") items_in_row = row;else {
-          items_in_row = row.filter(item => item).length;
-          displaced_products[j] = items_in_row;
+        let displaced_items_in_row;
+        if (typeof row === "number") displaced_items_in_row = row;else {
+          displaced_items_in_row = row.filter(item => item).length;
+          displaced_products[j] = displaced_items_in_row;
         }
-        displacement_by_added_blocks += items_in_row;
+        displacement_by_added_blocks += displaced_items_in_row;
       }
       const index_of_us_in_row = target_index - index_of_first_item_in_row;
       for (let j = 0; j < index_of_us_in_row; j++) {
@@ -5351,9 +5342,12 @@ function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       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);
     };
-    return $52FdA$solidjs.mergeProps(block, {
-      // Create content divs for the blocks with as much fine-grained diffing as possible?
-      content: (() => {
+    const [rendering_delayed, set_rendering_delayed_] = $52FdA$solidjs.createSignal(true);
+    const content = $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
         const _el$ = $52FdA$solidjsweb.getNextElement($f8f375d6245ffff2$var$_tmpl$);
         $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent($f8f375d6245ffff2$var$RenderContent, {
           get content() {
@@ -5376,7 +5370,16 @@ function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_s
           _v$3: undefined
         });
         return _el$;
-      })(),
+      }
+    });
+    return $52FdA$solidjs.mergeProps(block, {
+      // Create content divs for the blocks with as much fine-grained diffing as possible?
+      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
+        set_rendering_delayed_(false);
+        return content;
+      },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
         return get_span_columns();
@@ -5473,8 +5476,7 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
             let fallback_is_alive = false;
             const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = $52FdA$solidjs.createSignal(true);
             const [top_row_shortened_by_, set_top_row_shortened_by_] = $52FdA$solidjs.createSignal(0);
-            const [product_card_suspense_is_in_fallback, set_product_card_suspense_is_in_fallback] = $52FdA$solidjs.createSignal(false);
-            const [number_loaded_displays, set_number_loaded_displays_] = $52FdA$solidjs.createSignal(0);
+            $52FdA$solidjs.createSignal(false);
             const modified_cols_at_size = $c749e60bca5000cb$export$cb5808ba002cdeed({
               layout_options_: layout_options_,
               sort_or_filter_open_: sort_or_filter_open_
@@ -5489,12 +5491,10 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
                 return for_id === id_currently_querying_for_();
               })) === null || _get_scroll_restorati2 === void 0 ? void 0 : _get_scroll_restorati2.min_results_loaded) !== null && _get_scroll_restorati !== void 0 ? _get_scroll_restorati : min_products_to_fetch_);
             });
-            const number_of_items_shown_ = $52FdA$solidjs.createMemo(() => is_loading_() || product_card_suspense_is_in_fallback() ? num_placeholders_() : number_loaded_displays());
             const doesnt_have_content_blocks = $52FdA$solidjs.createMemo(() => !content_blocks_by_row_());
             const content_blocks_ = $52FdA$solidjs.createMemo(() => doesnt_have_content_blocks() ? () => [] : $f8f375d6245ffff2$export$791ef57e62e21c3f({
               content_blocks_: content_blocks_by_row_,
               cols_at_size_: modified_cols_at_size,
-              number_of_items_shown_: number_of_items_shown_,
               set_top_row_shortened_by_: set_top_row_shortened_by_
             }));
             const rendered_placeholders = $52FdA$solidjs.createMemo(() => get_should_have_placeholders_rendered() ? $e3915574cfd3466c$export$f33414a4df0afd3f({
@@ -5534,8 +5534,6 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
               get fallback() {
                 fallback_is_alive = true;
                 $52FdA$solidjs.onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
-                set_product_card_suspense_is_in_fallback(true); // Here for the content block code that needs to know how many items we're displaying
-                $52FdA$solidjs.onCleanup(() => set_product_card_suspense_is_in_fallback(false));
                 return $52FdA$solidjs.createMemo(() => {
                   // We need to be able to block the suspense since when async product cards are *rendering* we want to show the placeholders on initial load but not when loading more
                   // In future we could have individual suspense's for each product card, but that's too much for now
@@ -5560,8 +5558,7 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
                     query_base_: query_base_,
                     depict_api_: depict_api_,
                     is_loading_: is_loading_,
-                    content_blocks_: content_blocks_,
-                    set_number_loaded_displays_: set_number_loaded_displays_
+                    content_blocks_: content_blocks_
                   });
                   $52FdA$solidjs.onCleanup(() => suspense_contents = undefined);
                   return suspense_contents;

package/ES10/index.d.ts

@@ -6,8 +6,8 @@ import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/ap
 import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/api/SearchSuggestionsResponse";
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
-import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.1.1";
+import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
+export const version = "2.1.3";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -55,7 +55,7 @@ export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlac
  * The interface for a content block.
  * Please make sure that you don't have content blocks overlap as that will cause undefined behavior.
  * The height of the content block will be the height of the tallest item in a row, so if there are no products in a row the content block needs to "bring its own height".
- * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so, to avoid layout shifts and ensure scroll restoration works correctly.
+ * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so (see `ImagePlaceholder`), to avoid layout shifts and ensure scroll restoration works correctly.
  *
  * - `span_columns`: How many columns the block should span. This will be capped to the number of columns available.
  * - `span_rows`: How many rows the block should span.
@@ -670,7 +670,7 @@ export class DepictAPI<InputDisplay extends Display, OutputDisplay extends Moder
   query(input_req: SearchRequest): Promise<SearchResponseAfterURLCreator & {
     failed?: true;
   }>;
-  list(input_req: ProductListingRequest): Promise<ProductListingResponseAfterURLCreator & {
+  list(input_req: ProductListingRequestV2): Promise<ProductListingResponseAfterURLCreator & {
     failed?: true;
   }>;
   get_recommended<T extends Display>(input_req: BaseSearchRequest): Promise<{

package/ES10/index.js

@@ -9,7 +9,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
 /*! 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 = "2.1.1";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.3";
 const $2855bffe06ef7a03$var$fallback_operator = "in";
 const $2855bffe06ef7a03$var$fallback_token = "";
 const $2855bffe06ef7a03$var$legacy_filter_prefix = "filter_";
@@ -4903,8 +4903,7 @@ function $45a8953d760b5e58$export$a1fd619a4743ca08(_ref) {
     query_base_: query_base_,
     depict_api_: depict_api_,
     is_loading_: is_loading_,
-    content_blocks_: content_blocks_,
-    set_number_loaded_displays_: set_number_loaded_displays_
+    content_blocks_: content_blocks_
   } = _ref;
   // The following sets up an intersection observer to determine which results are in the viewport, used for the ScrollStatus indicator and knowing when to load more
   const target_to_index_map = new Map();
@@ -4951,7 +4950,6 @@ function $45a8953d760b5e58$export$a1fd619a4743ca08(_ref) {
     query_base_: query_base_,
     depict_api_: depict_api_
   });
-  $8tj43$createComputed(() => set_number_loaded_displays_(displays_by_key_().size));
   return $2d7bad8684bc7f44$export$43f0fb951fcb0c54({
     displays_by_key_: displays_by_key_,
     merchant_: merchant_,
@@ -5041,25 +5039,26 @@ function $64d94dcaa058dc7b$var$generate_media_queried_declarations(_ref) {
   } = _ref;
   return cols_at_size_.map(options => {
     const [n_cols, min, max, grid_spacing_for_size] = options;
-    const spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
     // See comment in else block below
-    const can_use_gap = $64d94dcaa058dc7b$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $64d94dcaa058dc7b$var$can_use_gap_for_unit(override_vertical_spacing_));
+    const can_use_gap = override_vertical_spacing_ ? $64d94dcaa058dc7b$var$can_use_gap_for_unit(override_vertical_spacing_) : $64d94dcaa058dc7b$var$can_use_gap_for_unit(main_spacing_to_use);
     let spacing_styling;
     let additional_styling = ""; // outside the media query
-    if (can_use_gap) spacing_styling = "gap:".concat(spacing_to_use, ";").concat(override_vertical_spacing_ ? "row-gap:".concat(override_vertical_spacing_, ";") : "");else {
+    if (can_use_gap) spacing_styling = "gap:".concat(main_spacing_to_use, ";").concat(override_vertical_spacing_ ? "row-gap:".concat(override_vertical_spacing_, ";") : "");else {
       // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
       // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
       // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
       // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
+      const vertical_spacing_to_use = override_vertical_spacing_ !== null && override_vertical_spacing_ !== void 0 ? override_vertical_spacing_ : main_spacing_to_use;
       const width_multiplier = "var(".concat($64d94dcaa058dc7b$export$c500183c31c2b22e, ", 1)"); // How many cards wide the current item is (needed because content blocks)
-      const one_item_width_exclusing_gaps = "calc(calc(100 / ".concat(n_cols, ") - calc(calc(").concat(n_cols * 2 - 2, " * calc(").concat($64d94dcaa058dc7b$var$strip_percent_unit(spacing_to_use), " / 2)) / ").concat(n_cols, "))"); // Width of one item in percent of the whole
+      const one_item_width_exclusing_gaps = "calc(calc(100 / ".concat(n_cols, ") - calc(calc(").concat(n_cols * 2 - 2, " * calc(").concat($64d94dcaa058dc7b$var$strip_percent_unit(vertical_spacing_to_use), " / 2)) / ").concat(n_cols, "))"); // Width of one item in percent of the whole
       // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
       const this_item_width_meat = "calc(".concat(one_item_width_exclusing_gaps, " * ").concat(width_multiplier, ")"); // Width of just the card
-      const this_item_width_gaps = "calc(calc(".concat(width_multiplier, " - 1) * ").concat($64d94dcaa058dc7b$var$strip_percent_unit(spacing_to_use), ")"); // Width of the gaps
+      const this_item_width_gaps = "calc(calc(".concat(width_multiplier, " - 1) * ").concat($64d94dcaa058dc7b$var$strip_percent_unit(vertical_spacing_to_use), ")"); // Width of the gaps
       const this_item_width = "calc(".concat(this_item_width_meat, " + ").concat(this_item_width_gaps, ")"); // Width of this item including gaps
       // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
       const convert_top_spacing_to_item_width_percentage = spacing => "calc(calc(100 / ".concat(this_item_width, ") * ").concat(spacing, ")"); // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
-      spacing_styling = "column-gap:".concat(spacing_to_use, ";"); // Still use gaps in the horizontal direction because that works flawlessly
+      spacing_styling = "column-gap:".concat(main_spacing_to_use, ";"); // Still use gaps in the horizontal direction because that works flawlessly
       // Re-use old layout code to get the correct :nth-child declarations for the top margins
       additional_styling = $8tj43$n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
     }
@@ -5157,26 +5156,18 @@ function $ff7feae4dddd6073$export$791ef57e62e21c3f(_ref) {
   let {
     content_blocks_: incoming_content_blocks,
     cols_at_size_: cols_at_size_,
-    number_of_items_shown_: number_of_items_shown_,
     set_top_row_shortened_by_: set_top_row_shortened_by_
   } = _ref;
   // these are by row
   const [content_blocks, set_content_blocks] = $8tj43$createStore([]);
   const n_cols_currently_showing_ = $8244fdad249f8d5f$export$a79e666719b3647c(cols_at_size_);
-  const products_to_rows = products => {
-    const cols_currently_showing = n_cols_currently_showing_();
-    if (cols_currently_showing === null) return 0;
-    return Math.ceil(products / cols_currently_showing);
-  };
-  const showing_rows = $8tj43$createMemo(() => products_to_rows(number_of_items_shown_()));
   $8tj43$createEffect(() => {
     const incoming_value = incoming_content_blocks();
     if (!incoming_value) {
       set_content_blocks([]);
       return;
     }
-    const capped_value = incoming_value.slice(0, showing_rows()); // Don't show more content blocks than we have rows
-    set_content_blocks($8tj43$reconcile(capped_value, {
+    set_content_blocks($8tj43$reconcile(incoming_value, {
       key: "content"
     })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
   });
@@ -5234,12 +5225,12 @@ function $ff7feae4dddd6073$var$remap_blocks_to_index(_ref2) {
       for (let j = 0; j < i; j++) {
         const row = displaced_products[j];
         if (row === undefined) continue; // there were no blocks in this row
-        let items_in_row;
-        if (typeof row === "number") items_in_row = row;else {
-          items_in_row = row.filter(item => item).length;
-          displaced_products[j] = items_in_row;
+        let displaced_items_in_row;
+        if (typeof row === "number") displaced_items_in_row = row;else {
+          displaced_items_in_row = row.filter(item => item).length;
+          displaced_products[j] = displaced_items_in_row;
         }
-        displacement_by_added_blocks += items_in_row;
+        displacement_by_added_blocks += displaced_items_in_row;
       }
       const index_of_us_in_row = target_index - index_of_first_item_in_row;
       for (let j = 0; j < index_of_us_in_row; j++) {
@@ -5284,9 +5275,12 @@ function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       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);
     };
-    return $8tj43$mergeProps1(block, {
-      // Create content divs for the blocks with as much fine-grained diffing as possible?
-      content: (() => {
+    const [rendering_delayed, set_rendering_delayed_] = $8tj43$createSignal(true);
+    const content = $8tj43$createComponent((0, $8tj43$Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
         const _el$ = $8tj43$getNextElement($ff7feae4dddd6073$var$_tmpl$);
         $8tj43$insert(_el$, $8tj43$createComponent($ff7feae4dddd6073$var$RenderContent, {
           get content() {
@@ -5309,7 +5303,16 @@ function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_s
           _v$3: undefined
         });
         return _el$;
-      })(),
+      }
+    });
+    return $8tj43$mergeProps1(block, {
+      // Create content divs for the blocks with as much fine-grained diffing as possible?
+      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
+        set_rendering_delayed_(false);
+        return content;
+      },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
         return get_span_columns();
@@ -5406,8 +5409,7 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
             let fallback_is_alive = false;
             const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = $8tj43$createSignal(true);
             const [top_row_shortened_by_, set_top_row_shortened_by_] = $8tj43$createSignal(0);
-            const [product_card_suspense_is_in_fallback, set_product_card_suspense_is_in_fallback] = $8tj43$createSignal(false);
-            const [number_loaded_displays, set_number_loaded_displays_] = $8tj43$createSignal(0);
+            $8tj43$createSignal(false);
             const modified_cols_at_size = $b2dbaafb23d00c7f$export$cb5808ba002cdeed({
               layout_options_: layout_options_,
               sort_or_filter_open_: sort_or_filter_open_
@@ -5422,12 +5424,10 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
                 return for_id === id_currently_querying_for_();
               })) === null || _get_scroll_restorati2 === void 0 ? void 0 : _get_scroll_restorati2.min_results_loaded) !== null && _get_scroll_restorati !== void 0 ? _get_scroll_restorati : min_products_to_fetch_);
             });
-            const number_of_items_shown_ = $8tj43$createMemo(() => is_loading_() || product_card_suspense_is_in_fallback() ? num_placeholders_() : number_loaded_displays());
             const doesnt_have_content_blocks = $8tj43$createMemo(() => !content_blocks_by_row_());
             const content_blocks_ = $8tj43$createMemo(() => doesnt_have_content_blocks() ? () => [] : $ff7feae4dddd6073$export$791ef57e62e21c3f({
               content_blocks_: content_blocks_by_row_,
               cols_at_size_: modified_cols_at_size,
-              number_of_items_shown_: number_of_items_shown_,
               set_top_row_shortened_by_: set_top_row_shortened_by_
             }));
             const rendered_placeholders = $8tj43$createMemo(() => get_should_have_placeholders_rendered() ? $bdd80c7862246dc2$export$f33414a4df0afd3f({
@@ -5467,8 +5467,6 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
               get fallback() {
                 fallback_is_alive = true;
                 $8tj43$onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
-                set_product_card_suspense_is_in_fallback(true); // Here for the content block code that needs to know how many items we're displaying
-                $8tj43$onCleanup(() => set_product_card_suspense_is_in_fallback(false));
                 return $8tj43$createMemo(() => {
                   // We need to be able to block the suspense since when async product cards are *rendering* we want to show the placeholders on initial load but not when loading more
                   // In future we could have individual suspense's for each product card, but that's too much for now
@@ -5493,8 +5491,7 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
                     query_base_: query_base_,
                     depict_api_: depict_api_,
                     is_loading_: is_loading_,
-                    content_blocks_: content_blocks_,
-                    set_number_loaded_displays_: set_number_loaded_displays_
+                    content_blocks_: content_blocks_
                   });
                   $8tj43$onCleanup(() => suspense_contents = undefined);
                   return suspense_contents;

package/latest/index.cjs

@@ -70,7 +70,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.1";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.3";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -4632,8 +4632,7 @@ function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
   query_base_: query_base_,
   depict_api_: depict_api_,
   is_loading_: is_loading_,
-  content_blocks_: content_blocks_,
-  set_number_loaded_displays_: set_number_loaded_displays_
+  content_blocks_: content_blocks_
 }) {
   // The following sets up an intersection observer to determine which results are in the viewport, used for the ScrollStatus indicator and knowing when to load more
   const target_to_index_map = new Map();
@@ -4677,7 +4676,6 @@ function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
     query_base_: query_base_,
     depict_api_: depict_api_
   });
-  $gVhhF$solidjs.createComputed(() => set_number_loaded_displays_(displays_by_key_().size));
   return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
     displays_by_key_: displays_by_key_,
     merchant_: merchant_,
@@ -4764,25 +4762,26 @@ function $75777da1687ba3f6$var$generate_media_queried_declarations({
 }) {
   return cols_at_size_.map(options => {
     const [n_cols, min, max, grid_spacing_for_size] = options;
-    const spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
     // See comment in else block below
-    const can_use_gap = $75777da1687ba3f6$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $75777da1687ba3f6$var$can_use_gap_for_unit(override_vertical_spacing_));
+    const can_use_gap = override_vertical_spacing_ ? $75777da1687ba3f6$var$can_use_gap_for_unit(override_vertical_spacing_) : $75777da1687ba3f6$var$can_use_gap_for_unit(main_spacing_to_use);
     let spacing_styling;
     let additional_styling = ""; // outside the media query
-    if (can_use_gap) spacing_styling = `gap:${spacing_to_use};${override_vertical_spacing_ ? `row-gap:${override_vertical_spacing_};` : ``}`;else {
+    if (can_use_gap) spacing_styling = `gap:${main_spacing_to_use};${override_vertical_spacing_ ? `row-gap:${override_vertical_spacing_};` : ``}`;else {
       // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
       // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
       // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
       // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
+      const vertical_spacing_to_use = override_vertical_spacing_ ?? main_spacing_to_use;
       const width_multiplier = `var(${$75777da1687ba3f6$export$c500183c31c2b22e}, 1)`; // How many cards wide the current item is (needed because content blocks)
-      const one_item_width_exclusing_gaps = `calc(calc(100 / ${n_cols}) - calc(calc(${n_cols * 2 - 2} * calc(${$75777da1687ba3f6$var$strip_percent_unit(spacing_to_use)} / 2)) / ${n_cols}))`; // Width of one item in percent of the whole
+      const one_item_width_exclusing_gaps = `calc(calc(100 / ${n_cols}) - calc(calc(${n_cols * 2 - 2} * calc(${$75777da1687ba3f6$var$strip_percent_unit(vertical_spacing_to_use)} / 2)) / ${n_cols}))`; // Width of one item in percent of the whole
       // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
       const this_item_width_meat = `calc(${one_item_width_exclusing_gaps} * ${width_multiplier})`; // Width of just the card
-      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$75777da1687ba3f6$var$strip_percent_unit(spacing_to_use)})`; // Width of the gaps
+      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$75777da1687ba3f6$var$strip_percent_unit(vertical_spacing_to_use)})`; // Width of the gaps
       const this_item_width = `calc(${this_item_width_meat} + ${this_item_width_gaps})`; // Width of this item including gaps
       // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
       const convert_top_spacing_to_item_width_percentage = spacing => `calc(calc(100 / ${this_item_width}) * ${spacing})`; // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
-      spacing_styling = `column-gap:${spacing_to_use};`; // Still use gaps in the horizontal direction because that works flawlessly
+      spacing_styling = `column-gap:${main_spacing_to_use};`; // Still use gaps in the horizontal direction because that works flawlessly
       // Re-use old layout code to get the correct :nth-child declarations for the top margins
       additional_styling = $gVhhF$depictaiutilishared.n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
     }
@@ -4871,26 +4870,18 @@ const $d92f338ba8f9da9b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<d
 function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
   content_blocks_: incoming_content_blocks,
   cols_at_size_: cols_at_size_,
-  number_of_items_shown_: number_of_items_shown_,
   set_top_row_shortened_by_: set_top_row_shortened_by_
 }) {
   // these are by row
   const [content_blocks, set_content_blocks] = $gVhhF$solidjsstore.createStore([]);
   const n_cols_currently_showing_ = $055384b985678603$export$a79e666719b3647c(cols_at_size_);
-  const products_to_rows = products => {
-    const cols_currently_showing = n_cols_currently_showing_();
-    if (cols_currently_showing === null) return 0;
-    return Math.ceil(products / cols_currently_showing);
-  };
-  const showing_rows = $gVhhF$solidjs.createMemo(() => products_to_rows(number_of_items_shown_()));
   $gVhhF$solidjs.createEffect(() => {
     const incoming_value = incoming_content_blocks();
     if (!incoming_value) {
       set_content_blocks([]);
       return;
     }
-    const capped_value = incoming_value.slice(0, showing_rows()); // Don't show more content blocks than we have rows
-    set_content_blocks($gVhhF$solidjsstore.reconcile(capped_value, {
+    set_content_blocks($gVhhF$solidjsstore.reconcile(incoming_value, {
       key: "content"
     })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
   });
@@ -4947,12 +4938,12 @@ function $d92f338ba8f9da9b$var$remap_blocks_to_index({
       for (let j = 0; j < i; j++) {
         const row = displaced_products[j];
         if (row === undefined) continue; // there were no blocks in this row
-        let items_in_row;
-        if (typeof row === "number") items_in_row = row;else {
-          items_in_row = row.filter(item => item).length;
-          displaced_products[j] = items_in_row;
+        let displaced_items_in_row;
+        if (typeof row === "number") displaced_items_in_row = row;else {
+          displaced_items_in_row = row.filter(item => item).length;
+          displaced_products[j] = displaced_items_in_row;
         }
-        displacement_by_added_blocks += items_in_row;
+        displacement_by_added_blocks += displaced_items_in_row;
       }
       const index_of_us_in_row = target_index - index_of_first_item_in_row;
       for (let j = 0; j < index_of_us_in_row; j++) if (displaced_products[i]?.[j])
@@ -4990,9 +4981,12 @@ function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_s
   const get_wrapped_blocks = $gVhhF$solidjs.mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
     const get_span_columns = () => Math.min(block.span_columns, max_span_columns() ?? Infinity);
-    return $gVhhF$solidjs.mergeProps(block, {
-      // Create content divs for the blocks with as much fine-grained diffing as possible?
-      content: (() => {
+    const [rendering_delayed, set_rendering_delayed_] = $gVhhF$solidjs.createSignal(true);
+    const content = $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
         const _el$ = $gVhhF$solidjsweb.getNextElement($d92f338ba8f9da9b$var$_tmpl$);
         $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent($d92f338ba8f9da9b$var$RenderContent, {
           get content() {
@@ -5015,7 +5009,16 @@ function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_s
           _v$3: undefined
         });
         return _el$;
-      })(),
+      }
+    });
+    return $gVhhF$solidjs.mergeProps(block, {
+      // Create content divs for the blocks with as much fine-grained diffing as possible?
+      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
+        set_rendering_delayed_(false);
+        return content;
+      },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
         return get_span_columns();
@@ -5109,8 +5112,7 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
             let fallback_is_alive = false;
             const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = $gVhhF$solidjs.createSignal(true);
             const [top_row_shortened_by_, set_top_row_shortened_by_] = $gVhhF$solidjs.createSignal(0);
-            const [product_card_suspense_is_in_fallback, set_product_card_suspense_is_in_fallback] = $gVhhF$solidjs.createSignal(false);
-            const [number_loaded_displays, set_number_loaded_displays_] = $gVhhF$solidjs.createSignal(0);
+            $gVhhF$solidjs.createSignal(false);
             const modified_cols_at_size = $738c3a81fc46a340$export$cb5808ba002cdeed({
               layout_options_: layout_options_,
               sort_or_filter_open_: sort_or_filter_open_
@@ -5121,12 +5123,10 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                 for_id: for_id
               }) => for_id === id_currently_querying_for_())?.min_results_loaded ?? min_products_to_fetch_);
             });
-            const number_of_items_shown_ = $gVhhF$solidjs.createMemo(() => is_loading_() || product_card_suspense_is_in_fallback() ? num_placeholders_() : number_loaded_displays());
             const doesnt_have_content_blocks = $gVhhF$solidjs.createMemo(() => !content_blocks_by_row_());
             const content_blocks_ = $gVhhF$solidjs.createMemo(() => doesnt_have_content_blocks() ? () => [] : $d92f338ba8f9da9b$export$791ef57e62e21c3f({
               content_blocks_: content_blocks_by_row_,
               cols_at_size_: modified_cols_at_size,
-              number_of_items_shown_: number_of_items_shown_,
               set_top_row_shortened_by_: set_top_row_shortened_by_
             }));
             const rendered_placeholders = $gVhhF$solidjs.createMemo(() => get_should_have_placeholders_rendered() ? $0caf87eaa19079da$export$f33414a4df0afd3f({
@@ -5166,8 +5166,6 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
               get fallback() {
                 fallback_is_alive = true;
                 $gVhhF$solidjs.onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
-                set_product_card_suspense_is_in_fallback(true); // Here for the content block code that needs to know how many items we're displaying
-                $gVhhF$solidjs.onCleanup(() => set_product_card_suspense_is_in_fallback(false));
                 return $gVhhF$solidjs.createMemo(() => {
                   // We need to be able to block the suspense since when async product cards are *rendering* we want to show the placeholders on initial load but not when loading more
                   // In future we could have individual suspense's for each product card, but that's too much for now
@@ -5192,8 +5190,7 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                     query_base_: query_base_,
                     depict_api_: depict_api_,
                     is_loading_: is_loading_,
-                    content_blocks_: content_blocks_,
-                    set_number_loaded_displays_: set_number_loaded_displays_
+                    content_blocks_: content_blocks_
                   });
                   $gVhhF$solidjs.onCleanup(() => suspense_contents = undefined);
                   return suspense_contents;

package/latest/index.d.ts

@@ -6,8 +6,8 @@ import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/ap
 import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/api/SearchSuggestionsResponse";
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
-import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.1.1";
+import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
+export const version = "2.1.3";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -55,7 +55,7 @@ export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlac
  * The interface for a content block.
  * Please make sure that you don't have content blocks overlap as that will cause undefined behavior.
  * The height of the content block will be the height of the tallest item in a row, so if there are no products in a row the content block needs to "bring its own height".
- * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so, to avoid layout shifts and ensure scroll restoration works correctly.
+ * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so (see `ImagePlaceholder`), to avoid layout shifts and ensure scroll restoration works correctly.
  *
  * - `span_columns`: How many columns the block should span. This will be capped to the number of columns available.
  * - `span_rows`: How many rows the block should span.
@@ -670,7 +670,7 @@ export class DepictAPI<InputDisplay extends Display, OutputDisplay extends Moder
   query(input_req: SearchRequest): Promise<SearchResponseAfterURLCreator & {
     failed?: true;
   }>;
-  list(input_req: ProductListingRequest): Promise<ProductListingResponseAfterURLCreator & {
+  list(input_req: ProductListingRequestV2): Promise<ProductListingResponseAfterURLCreator & {
     failed?: true;
   }>;
   get_recommended<T extends Display>(input_req: BaseSearchRequest): Promise<{