@depict-ai/ui 2.1.2 → 2.1.4

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.2";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.4";
 const $a68b73fd7ba0853f$var$fallback_operator = "in";
 const $a68b73fd7ba0853f$var$fallback_token = "";
 const $a68b73fd7ba0853f$var$legacy_filter_prefix = "filter_";
@@ -5106,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_);
     }
@@ -5273,6 +5274,9 @@ function $f8f375d6245ffff2$var$remap_blocks_to_index(_ref2) {
     const cols_showing = n_cols_currently_showing_();
     // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
     const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+    if (!cols_showing)
+      // Nope out of here if we don't know how many columns are showing
+      return content_blocks_by_index;
     for (let i = 0; i < wrapped_blocks.length; i++) {
       // i = row to show at
       const block = wrapped_blocks[i];
@@ -5337,10 +5341,12 @@ function $f8f375d6245ffff2$var$remap_blocks_to_index(_ref2) {
 function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
   const get_wrapped_blocks = $52FdA$solidjs.mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
-    const get_span_columns = () => {
+    const final_span_columns = $52FdA$solidjs.createMemo(() => {
       var _max_span_columns;
       return Math.min(block.span_columns, (_max_span_columns = max_span_columns()) !== null && _max_span_columns !== void 0 ? _max_span_columns : Infinity);
-    };
+    });
+    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
+    const final_span_rows = $52FdA$solidjs.createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
     const [rendering_delayed, set_rendering_delayed_] = $52FdA$solidjs.createSignal(true);
     const content = $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
       get when() {
@@ -5355,10 +5361,10 @@ function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_s
         }));
         $52FdA$solidjsweb.effect(_p$ => {
           const _v$ = {
-              [(0, $830518481649feb1$export$c500183c31c2b22e)]: get_span_columns()
+              [(0, $830518481649feb1$export$c500183c31c2b22e)]: final_span_columns()
             },
-            _v$2 = "span ".concat(get_span_columns()),
-            _v$3 = "span ".concat(block.span_rows);
+            _v$2 = "span ".concat(final_span_columns()),
+            _v$3 = "span ".concat(final_span_rows());
           _p$._v$ = $52FdA$solidjsweb.style(_el$, _v$, _p$._v$);
           _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$.style.setProperty("grid-column", _v$2) : _el$.style.removeProperty("grid-column"));
           _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$.style.setProperty("grid-row", _v$3) : _el$.style.removeProperty("grid-row"));
@@ -5381,7 +5387,10 @@ function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
-        return get_span_columns();
+        return final_span_columns();
+      },
+      get span_rows() {
+        return final_span_rows();
       }
     });
   });

package/ES10/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.2";
+export const version = "2.1.4";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

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.2";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.4";
 const $2855bffe06ef7a03$var$fallback_operator = "in";
 const $2855bffe06ef7a03$var$fallback_token = "";
 const $2855bffe06ef7a03$var$legacy_filter_prefix = "filter_";
@@ -5039,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_);
     }
@@ -5206,6 +5207,9 @@ function $ff7feae4dddd6073$var$remap_blocks_to_index(_ref2) {
     const cols_showing = n_cols_currently_showing_();
     // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
     const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+    if (!cols_showing)
+      // Nope out of here if we don't know how many columns are showing
+      return content_blocks_by_index;
     for (let i = 0; i < wrapped_blocks.length; i++) {
       // i = row to show at
       const block = wrapped_blocks[i];
@@ -5270,10 +5274,12 @@ function $ff7feae4dddd6073$var$remap_blocks_to_index(_ref2) {
 function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
   const get_wrapped_blocks = $8tj43$mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
-    const get_span_columns = () => {
+    const final_span_columns = $8tj43$createMemo(() => {
       var _max_span_columns;
       return Math.min(block.span_columns, (_max_span_columns = max_span_columns()) !== null && _max_span_columns !== void 0 ? _max_span_columns : Infinity);
-    };
+    });
+    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
+    const final_span_rows = $8tj43$createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
     const [rendering_delayed, set_rendering_delayed_] = $8tj43$createSignal(true);
     const content = $8tj43$createComponent((0, $8tj43$Show), {
       get when() {
@@ -5288,10 +5294,10 @@ function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_s
         }));
         $8tj43$effect(_p$ => {
           const _v$ = {
-              [(0, $64d94dcaa058dc7b$export$c500183c31c2b22e)]: get_span_columns()
+              [(0, $64d94dcaa058dc7b$export$c500183c31c2b22e)]: final_span_columns()
             },
-            _v$2 = "span ".concat(get_span_columns()),
-            _v$3 = "span ".concat(block.span_rows);
+            _v$2 = "span ".concat(final_span_columns()),
+            _v$3 = "span ".concat(final_span_rows());
           _p$._v$ = $8tj43$style(_el$, _v$, _p$._v$);
           _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$.style.setProperty("grid-column", _v$2) : _el$.style.removeProperty("grid-column"));
           _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$.style.setProperty("grid-row", _v$3) : _el$.style.removeProperty("grid-row"));
@@ -5314,7 +5320,10 @@ function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
-        return get_span_columns();
+        return final_span_columns();
+      },
+      get span_rows() {
+        return final_span_rows();
       }
     });
   });

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.2";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.4";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -4762,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_);
     }
@@ -4919,6 +4920,9 @@ function $d92f338ba8f9da9b$var$remap_blocks_to_index({
     const cols_showing = n_cols_currently_showing_();
     // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
     const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+    if (!cols_showing)
+      // Nope out of here if we don't know how many columns are showing
+      return content_blocks_by_index;
     for (let i = 0; i < wrapped_blocks.length; i++) {
       // i = row to show at
       const block = wrapped_blocks[i];
@@ -4979,7 +4983,9 @@ function $d92f338ba8f9da9b$var$remap_blocks_to_index({
 function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
   const get_wrapped_blocks = $gVhhF$solidjs.mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
-    const get_span_columns = () => Math.min(block.span_columns, max_span_columns() ?? Infinity);
+    const final_span_columns = $gVhhF$solidjs.createMemo(() => Math.min(block.span_columns, max_span_columns() ?? Infinity));
+    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
+    const final_span_rows = $gVhhF$solidjs.createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
     const [rendering_delayed, set_rendering_delayed_] = $gVhhF$solidjs.createSignal(true);
     const content = $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
       get when() {
@@ -4994,10 +5000,10 @@ function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_s
         }));
         $gVhhF$solidjsweb.effect(_p$ => {
           const _v$ = {
-              [(0, $75777da1687ba3f6$export$c500183c31c2b22e)]: get_span_columns()
+              [(0, $75777da1687ba3f6$export$c500183c31c2b22e)]: final_span_columns()
             },
-            _v$2 = `span ${get_span_columns()}`,
-            _v$3 = `span ${block.span_rows}`;
+            _v$2 = `span ${final_span_columns()}`,
+            _v$3 = `span ${final_span_rows()}`;
           _p$._v$ = $gVhhF$solidjsweb.style(_el$, _v$, _p$._v$);
           _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$.style.setProperty("grid-column", _v$2) : _el$.style.removeProperty("grid-column"));
           _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$.style.setProperty("grid-row", _v$3) : _el$.style.removeProperty("grid-row"));
@@ -5020,7 +5026,10 @@ function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
-        return get_span_columns();
+        return final_span_columns();
+      },
+      get span_rows() {
+        return final_span_rows();
       }
     });
   });

package/latest/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.2";
+export const version = "2.1.4";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/latest/index.js

@@ -6,7 +6,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 = "2.1.2";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.4";
 const $4147651646da990a$var$fallback_operator = "in";
 const $4147651646da990a$var$fallback_token = "";
 const $4147651646da990a$var$legacy_filter_prefix = "filter_";
@@ -4698,25 +4698,26 @@ function $6dee9211e57ac31a$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 = $6dee9211e57ac31a$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $6dee9211e57ac31a$var$can_use_gap_for_unit(override_vertical_spacing_));
+    const can_use_gap = override_vertical_spacing_ ? $6dee9211e57ac31a$var$can_use_gap_for_unit(override_vertical_spacing_) : $6dee9211e57ac31a$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(${$6dee9211e57ac31a$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(${$6dee9211e57ac31a$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(${$6dee9211e57ac31a$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) * ${$6dee9211e57ac31a$var$strip_percent_unit(spacing_to_use)})`; // Width of the gaps
+      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$6dee9211e57ac31a$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 = $9HbP8$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_);
     }
@@ -4855,6 +4856,9 @@ function $e7a7eb102ddc0c79$var$remap_blocks_to_index({
     const cols_showing = n_cols_currently_showing_();
     // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
     const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+    if (!cols_showing)
+      // Nope out of here if we don't know how many columns are showing
+      return content_blocks_by_index;
     for (let i = 0; i < wrapped_blocks.length; i++) {
       // i = row to show at
       const block = wrapped_blocks[i];
@@ -4915,7 +4919,9 @@ function $e7a7eb102ddc0c79$var$remap_blocks_to_index({
 function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
   const get_wrapped_blocks = $9HbP8$mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
-    const get_span_columns = () => Math.min(block.span_columns, max_span_columns() ?? Infinity);
+    const final_span_columns = $9HbP8$createMemo(() => Math.min(block.span_columns, max_span_columns() ?? Infinity));
+    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
+    const final_span_rows = $9HbP8$createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
     const [rendering_delayed, set_rendering_delayed_] = $9HbP8$createSignal(true);
     const content = $9HbP8$createComponent((0, $9HbP8$Show), {
       get when() {
@@ -4930,10 +4936,10 @@ function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_s
         }));
         $9HbP8$effect(_p$ => {
           const _v$ = {
-              [(0, $6dee9211e57ac31a$export$c500183c31c2b22e)]: get_span_columns()
+              [(0, $6dee9211e57ac31a$export$c500183c31c2b22e)]: final_span_columns()
             },
-            _v$2 = `span ${get_span_columns()}`,
-            _v$3 = `span ${block.span_rows}`;
+            _v$2 = `span ${final_span_columns()}`,
+            _v$3 = `span ${final_span_rows()}`;
           _p$._v$ = $9HbP8$style(_el$, _v$, _p$._v$);
           _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$.style.setProperty("grid-column", _v$2) : _el$.style.removeProperty("grid-column"));
           _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$.style.setProperty("grid-row", _v$3) : _el$.style.removeProperty("grid-row"));
@@ -4956,7 +4962,10 @@ function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
-        return get_span_columns();
+        return final_span_columns();
+      },
+      get span_rows() {
+        return final_span_rows();
       }
     });
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "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",

package/server/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.2";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.4";
 const $a68b73fd7ba0853f$var$fallback_operator = "in";
 const $a68b73fd7ba0853f$var$fallback_token = "";
 const $a68b73fd7ba0853f$var$legacy_filter_prefix = "filter_";
@@ -4181,25 +4181,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 = $3hooq$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_);
     }
@@ -4348,6 +4349,9 @@ function $f8f375d6245ffff2$var$remap_blocks_to_index(_ref2) {
     const cols_showing = n_cols_currently_showing_();
     // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
     const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+    if (!cols_showing)
+      // Nope out of here if we don't know how many columns are showing
+      return content_blocks_by_index;
     for (let i = 0; i < wrapped_blocks.length; i++) {
       // i = row to show at
       const block = wrapped_blocks[i];
@@ -4412,17 +4416,19 @@ function $f8f375d6245ffff2$var$remap_blocks_to_index(_ref2) {
 function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
   const get_wrapped_blocks = $3hooq$solidjs.mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
-    const get_span_columns = () => {
+    const final_span_columns = $3hooq$solidjs.createMemo(() => {
       var _max_span_columns;
       return Math.min(block.span_columns, (_max_span_columns = max_span_columns()) !== null && _max_span_columns !== void 0 ? _max_span_columns : Infinity);
-    };
+    });
+    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
+    const final_span_rows = $3hooq$solidjs.createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
     const [rendering_delayed, set_rendering_delayed_] = $3hooq$solidjs.createSignal(true);
     const content = $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
       get when() {
         return !rendering_delayed();
       },
       get children() {
-        return $3hooq$solidjsweb.ssr($f8f375d6245ffff2$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "grid-column:" + "span ".concat($3hooq$solidjsweb.escape(get_span_columns(), true)) + (";grid-row:" + "span ".concat($3hooq$solidjsweb.escape(block.span_rows, true))) + (";spans_columns_variable_name:" + $3hooq$solidjsweb.escape(get_span_columns(), true)), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent($f8f375d6245ffff2$var$RenderContent, {
+        return $3hooq$solidjsweb.ssr($f8f375d6245ffff2$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "grid-column:" + "span ".concat($3hooq$solidjsweb.escape(final_span_columns(), true)) + (";grid-row:" + "span ".concat($3hooq$solidjsweb.escape(final_span_rows(), true))) + (";spans_columns_variable_name:" + $3hooq$solidjsweb.escape(final_span_columns(), true)), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent($f8f375d6245ffff2$var$RenderContent, {
           get content() {
             return block.content;
           }
@@ -4439,7 +4445,10 @@ function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
-        return get_span_columns();
+        return final_span_columns();
+      },
+      get span_rows() {
+        return final_span_rows();
       }
     });
   });

package/server/ES10/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.2";
+export const version = "2.1.4";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/server/ES10/index.js

@@ -9,7 +9,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$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.2";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.4";
 const $2855bffe06ef7a03$var$fallback_operator = "in";
 const $2855bffe06ef7a03$var$fallback_token = "";
 const $2855bffe06ef7a03$var$legacy_filter_prefix = "filter_";
@@ -4114,25 +4114,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 = $b8hua$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_);
     }
@@ -4281,6 +4282,9 @@ function $ff7feae4dddd6073$var$remap_blocks_to_index(_ref2) {
     const cols_showing = n_cols_currently_showing_();
     // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
     const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+    if (!cols_showing)
+      // Nope out of here if we don't know how many columns are showing
+      return content_blocks_by_index;
     for (let i = 0; i < wrapped_blocks.length; i++) {
       // i = row to show at
       const block = wrapped_blocks[i];
@@ -4345,17 +4349,19 @@ function $ff7feae4dddd6073$var$remap_blocks_to_index(_ref2) {
 function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
   const get_wrapped_blocks = $b8hua$mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
-    const get_span_columns = () => {
+    const final_span_columns = $b8hua$createMemo(() => {
       var _max_span_columns;
       return Math.min(block.span_columns, (_max_span_columns = max_span_columns()) !== null && _max_span_columns !== void 0 ? _max_span_columns : Infinity);
-    };
+    });
+    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
+    const final_span_rows = $b8hua$createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
     const [rendering_delayed, set_rendering_delayed_] = $b8hua$createSignal(true);
     const content = $b8hua$createComponent((0, $b8hua$Show), {
       get when() {
         return !rendering_delayed();
       },
       get children() {
-        return $b8hua$ssr($ff7feae4dddd6073$var$_tmpl$, $b8hua$ssrHydrationKey(), "grid-column:" + "span ".concat($b8hua$escape(get_span_columns(), true)) + (";grid-row:" + "span ".concat($b8hua$escape(block.span_rows, true))) + (";spans_columns_variable_name:" + $b8hua$escape(get_span_columns(), true)), $b8hua$escape($b8hua$createComponent($ff7feae4dddd6073$var$RenderContent, {
+        return $b8hua$ssr($ff7feae4dddd6073$var$_tmpl$, $b8hua$ssrHydrationKey(), "grid-column:" + "span ".concat($b8hua$escape(final_span_columns(), true)) + (";grid-row:" + "span ".concat($b8hua$escape(final_span_rows(), true))) + (";spans_columns_variable_name:" + $b8hua$escape(final_span_columns(), true)), $b8hua$escape($b8hua$createComponent($ff7feae4dddd6073$var$RenderContent, {
           get content() {
             return block.content;
           }
@@ -4372,7 +4378,10 @@ function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
-        return get_span_columns();
+        return final_span_columns();
+      },
+      get span_rows() {
+        return final_span_rows();
       }
     });
   });

package/server/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.2";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.4";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -3874,25 +3874,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 = $5vyXB$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_);
     }
@@ -4031,6 +4032,9 @@ function $d92f338ba8f9da9b$var$remap_blocks_to_index({
     const cols_showing = n_cols_currently_showing_();
     // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
     const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+    if (!cols_showing)
+      // Nope out of here if we don't know how many columns are showing
+      return content_blocks_by_index;
     for (let i = 0; i < wrapped_blocks.length; i++) {
       // i = row to show at
       const block = wrapped_blocks[i];
@@ -4091,14 +4095,16 @@ function $d92f338ba8f9da9b$var$remap_blocks_to_index({
 function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
   const get_wrapped_blocks = $5vyXB$solidjs.mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
-    const get_span_columns = () => Math.min(block.span_columns, max_span_columns() ?? Infinity);
+    const final_span_columns = $5vyXB$solidjs.createMemo(() => Math.min(block.span_columns, max_span_columns() ?? Infinity));
+    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
+    const final_span_rows = $5vyXB$solidjs.createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
     const [rendering_delayed, set_rendering_delayed_] = $5vyXB$solidjs.createSignal(true);
     const content = $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
       get when() {
         return !rendering_delayed();
       },
       get children() {
-        return $5vyXB$solidjsweb.ssr($d92f338ba8f9da9b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "grid-column:" + `span ${$5vyXB$solidjsweb.escape(get_span_columns(), true)}` + (";grid-row:" + `span ${$5vyXB$solidjsweb.escape(block.span_rows, true)}`) + (";spans_columns_variable_name:" + $5vyXB$solidjsweb.escape(get_span_columns(), true)), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent($d92f338ba8f9da9b$var$RenderContent, {
+        return $5vyXB$solidjsweb.ssr($d92f338ba8f9da9b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "grid-column:" + `span ${$5vyXB$solidjsweb.escape(final_span_columns(), true)}` + (";grid-row:" + `span ${$5vyXB$solidjsweb.escape(final_span_rows(), true)}`) + (";spans_columns_variable_name:" + $5vyXB$solidjsweb.escape(final_span_columns(), true)), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent($d92f338ba8f9da9b$var$RenderContent, {
           get content() {
             return block.content;
           }
@@ -4115,7 +4121,10 @@ function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
-        return get_span_columns();
+        return final_span_columns();
+      },
+      get span_rows() {
+        return final_span_rows();
       }
     });
   });

package/server/latest/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.2";
+export const version = "2.1.4";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/server/latest/index.js

@@ -6,7 +6,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 = "2.1.2";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.4";
 const $4147651646da990a$var$fallback_operator = "in";
 const $4147651646da990a$var$fallback_token = "";
 const $4147651646da990a$var$legacy_filter_prefix = "filter_";
@@ -3810,25 +3810,26 @@ function $6dee9211e57ac31a$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 = $6dee9211e57ac31a$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $6dee9211e57ac31a$var$can_use_gap_for_unit(override_vertical_spacing_));
+    const can_use_gap = override_vertical_spacing_ ? $6dee9211e57ac31a$var$can_use_gap_for_unit(override_vertical_spacing_) : $6dee9211e57ac31a$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(${$6dee9211e57ac31a$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(${$6dee9211e57ac31a$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(${$6dee9211e57ac31a$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) * ${$6dee9211e57ac31a$var$strip_percent_unit(spacing_to_use)})`; // Width of the gaps
+      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$6dee9211e57ac31a$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 = $i7OB2$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_);
     }
@@ -3967,6 +3968,9 @@ function $e7a7eb102ddc0c79$var$remap_blocks_to_index({
     const cols_showing = n_cols_currently_showing_();
     // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
     const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+    if (!cols_showing)
+      // Nope out of here if we don't know how many columns are showing
+      return content_blocks_by_index;
     for (let i = 0; i < wrapped_blocks.length; i++) {
       // i = row to show at
       const block = wrapped_blocks[i];
@@ -4027,14 +4031,16 @@ function $e7a7eb102ddc0c79$var$remap_blocks_to_index({
 function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
   const get_wrapped_blocks = $i7OB2$mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
-    const get_span_columns = () => Math.min(block.span_columns, max_span_columns() ?? Infinity);
+    const final_span_columns = $i7OB2$createMemo(() => Math.min(block.span_columns, max_span_columns() ?? Infinity));
+    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
+    const final_span_rows = $i7OB2$createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
     const [rendering_delayed, set_rendering_delayed_] = $i7OB2$createSignal(true);
     const content = $i7OB2$createComponent((0, $i7OB2$Show), {
       get when() {
         return !rendering_delayed();
       },
       get children() {
-        return $i7OB2$ssr($e7a7eb102ddc0c79$var$_tmpl$, $i7OB2$ssrHydrationKey(), "grid-column:" + `span ${$i7OB2$escape(get_span_columns(), true)}` + (";grid-row:" + `span ${$i7OB2$escape(block.span_rows, true)}`) + (";spans_columns_variable_name:" + $i7OB2$escape(get_span_columns(), true)), $i7OB2$escape($i7OB2$createComponent($e7a7eb102ddc0c79$var$RenderContent, {
+        return $i7OB2$ssr($e7a7eb102ddc0c79$var$_tmpl$, $i7OB2$ssrHydrationKey(), "grid-column:" + `span ${$i7OB2$escape(final_span_columns(), true)}` + (";grid-row:" + `span ${$i7OB2$escape(final_span_rows(), true)}`) + (";spans_columns_variable_name:" + $i7OB2$escape(final_span_columns(), true)), $i7OB2$escape($i7OB2$createComponent($e7a7eb102ddc0c79$var$RenderContent, {
           get content() {
             return block.content;
           }
@@ -4051,7 +4057,10 @@ function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
-        return get_span_columns();
+        return final_span_columns();
+      },
+      get span_rows() {
+        return final_span_rows();
       }
     });
   });