@depict-ai/ui 2.0.0 → 2.0.2

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 { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.0.0";
+export const version = "2.0.2";
 export type SDKGridSpacing = string | {
   horizontal: string;
   vertical: string;
@@ -117,6 +117,7 @@ type RecommendationGridBaseProps<T extends Display> = {
     start_rows?: number;
     rows_per_click?: number;
   };
+  max_rows?: number;
 };
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.

package/server/ES10/index.js

@@ -8,7 +8,7 @@ import $b8hua$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/def
 /*! 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.0.0";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.0.2";
 const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -634,9 +634,18 @@ function $b432b11321ad4c97$export$9756467d34d91cdb(props) {
   return $83e8cf2c0b87a58a$export$23fca46f3143581f(() => {
     const rows_object_ = $b8hua$createMemo(() => {
       var _view_more_button$row;
-      const view_more_button = props.view_more_button;
-      if (!view_more_button) return "all";
+      const {
+        view_more_button: view_more_button,
+        max_rows: max_rows
+      } = props;
+      if (!view_more_button) {
+        if (max_rows) return {
+          max_rows: max_rows
+        };
+        return "all";
+      }
       return {
+        max_rows: max_rows,
         start_rows: view_more_button.start_rows,
         rows_per_click: (_view_more_button$row = view_more_button.rows_per_click) !== null && _view_more_button$row !== void 0 ? _view_more_button$row : 2,
         button: $b8hua$ssr($b432b11321ad4c97$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape(view_more_button.text))
@@ -1061,9 +1070,9 @@ function $4711a82d08d2021b$export$fecbb157621501bd(_ref) {
   }));
   return outmost_element;
 }
-const $6b73914551534ea8$var$_tmpl$ = ["<span", ' class="count">', "</span>"],
-  $6b73914551534ea8$var$_tmpl$2 = ["<label", ' class="', '"', '><div class="left"><input type="checkbox"', "", "", '><span class="custom-indicator"></span><span class="text line-clamp">', "</span></div><!--#-->", "<!--/--></label>"];
-const $6b73914551534ea8$export$48513f6b9f8ce62d = props => {
+const $19e828709c7723a0$var$_tmpl$ = ["<span", ' class="count">', "</span>"],
+  $19e828709c7723a0$var$_tmpl$2 = ["<label", ' class="', '"', '><div class="left"><input type="checkbox"', "", "", '><span class="custom-indicator"></span><span class="text line-clamp">', "</span></div><!--#-->", "<!--/--></label>"];
+const $19e828709c7723a0$export$48513f6b9f8ce62d = props => {
   // It seems like there's no diffing without memos here (since we often just have computations in the getters above that update to the same result often because their dependencies change with unrelated changes often), so put memos here to avoid unneeded DOM changes
   const count = $b8hua$createMemo(() => props.count_);
   const label = $b8hua$createMemo(() => props.label_);
@@ -1071,12 +1080,12 @@ const $6b73914551534ea8$export$48513f6b9f8ce62d = props => {
   const value = $b8hua$createMemo(() => props.value_);
   const is_count_zero = $b8hua$createMemo(() => props.is_count_zero_ || count() === 0);
   const id = $b8hua$make_random_classname();
-  return (/* We can't use actual margin because ExpandingContainer gets messed up */$b8hua$ssr($6b73914551534ea8$var$_tmpl$2, $b8hua$ssrHydrationKey(), "input-row ".concat(is_count_zero() ? "count-0" : ""), $b8hua$ssrAttribute("for", $b8hua$escape(id, true), false), $b8hua$ssrAttribute("name", $b8hua$escape(value(), true), false) + $b8hua$ssrAttribute("id", $b8hua$escape(id, true), false), $b8hua$ssrAttribute("checked", checked(), true), $b8hua$ssrAttribute("disabled", !checked() && is_count_zero(), true), $b8hua$escape(label()) || $b8hua$escape(value()), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+  return (/* We can't use actual margin because ExpandingContainer gets messed up */$b8hua$ssr($19e828709c7723a0$var$_tmpl$2, $b8hua$ssrHydrationKey(), "input-row ".concat(is_count_zero() ? "count-0" : ""), $b8hua$ssrAttribute("for", $b8hua$escape(id, true), false), $b8hua$ssrAttribute("name", $b8hua$escape(value(), true), false) + $b8hua$ssrAttribute("id", $b8hua$escape(id, true), false), $b8hua$ssrAttribute("checked", checked(), true), $b8hua$ssrAttribute("disabled", !checked() && is_count_zero(), true), $b8hua$escape(label()) || $b8hua$escape(value()), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
       get when() {
         return count() != undefined;
       },
       get children() {
-        return $b8hua$ssr($6b73914551534ea8$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape(count()));
+        return $b8hua$ssr($19e828709c7723a0$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape(count()));
       }
     })))
   );
@@ -1135,7 +1144,7 @@ function $133484ef10e4e954$export$dd948f91abc3a1c4(_ref) {
   });
   const render_checkbox = checkbox => {
     // Checkbox always calls the getters in props, so we don't wrap these values into memos
-    return $b8hua$createComponent((0, $6b73914551534ea8$export$48513f6b9f8ce62d), {
+    return $b8hua$createComponent((0, $19e828709c7723a0$export$48513f6b9f8ce62d), {
       get value_() {
         return checkbox().value_;
       },
@@ -1643,7 +1652,7 @@ function $0ae614c5c7babb43$var$render_stuff(data, existing_filter, i18n_) {
             var _value;
             return !!Object.keys(((_value = value()) === null || _value === void 0 ? void 0 : _value.children_) || {}).length;
           });
-          return $b8hua$ssr($0ae614c5c7babb43$var$_tmpl$2, $b8hua$ssrHydrationKey(), "checkbox-details ".concat(has_expandable() ? "expandable" : ""), $b8hua$escape($b8hua$createComponent((0, $6b73914551534ea8$export$48513f6b9f8ce62d), {
+          return $b8hua$ssr($0ae614c5c7babb43$var$_tmpl$2, $b8hua$ssrHydrationKey(), "checkbox-details ".concat(has_expandable() ? "expandable" : ""), $b8hua$escape($b8hua$createComponent((0, $19e828709c7723a0$export$48513f6b9f8ce62d), {
             get value_() {
               var _value2;
               return JSON.stringify((_value2 = value()) === null || _value2 === void 0 ? void 0 : _value2.value_);
@@ -1914,9 +1923,26 @@ function $0ae614c5c7babb43$var$expand_until_choice(data_structure) {
     }
   });
 }
-const $830ea8efda59884e$var$_tmpl$ = ["<div", ' class="checkbox-grid">', "</div>"],
-  $830ea8efda59884e$var$_tmpl$2 = ["<span", ' class="count-wrapper"><span class="count">', "</span></span>"],
-  $830ea8efda59884e$var$_tmpl$3 = ["<button", "", ' class="', '"><!--#-->', "<!--/--><!--#-->", "<!--/--></button>"];
+
+/** @jsxImportSource solid-js */
+
+function $0dc044cffe1e825b$export$9f191182275e9ef(what_to_watch) {
+  const [size, setSize] = $b8hua$createSignal();
+  const resizeObserver = new ResizeObserver($b8hua$catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      var _records$j$borderBoxS, _records$j$borderBoxS2, _records$j$borderBoxS3;
+      const width = (_records$j$borderBoxS = (_records$j$borderBoxS2 = records[j].borderBoxSize) === null || _records$j$borderBoxS2 === void 0 ? void 0 : (_records$j$borderBoxS3 = _records$j$borderBoxS2[0]) === null || _records$j$borderBoxS3 === void 0 ? void 0 : _records$j$borderBoxS3.inlineSize) !== null && _records$j$borderBoxS !== void 0 ? _records$j$borderBoxS : what_to_watch.getBoundingClientRect().width;
+      setSize(width);
+    }
+  }));
+  resizeObserver.observe(what_to_watch);
+  $b8hua$onCleanup(() => resizeObserver.disconnect());
+  return size;
+}
+const $830ea8efda59884e$var$_tmpl$ = ["<div", ' class="checkbox-grid" style="position:absolute;z-index:-1;pointer-events:none;opacity:0">', "</div>"],
+  $830ea8efda59884e$var$_tmpl$2 = ["<span", ' class="count-wrapper"><span class="count">', "</span></span>"];
+const $830ea8efda59884e$var$gap_px = 5;
+const $830ea8efda59884e$var$max_columns = 3;
 const $830ea8efda59884e$export$414f6a19d38e655c = _ref => {
   let {
     filter_: filter_,
@@ -1946,26 +1972,144 @@ const $830ea8efda59884e$export$414f6a19d38e655c = _ref => {
       };
     });
   });
-  return $b8hua$ssr($830ea8efda59884e$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $b8hua$Index), {
-    get each() {
-      return buttons();
+  const [sizes_set, set_sizes_set] = $b8hua$createSignal(new Set(), {
+    equals: false
+  });
+  const [cols_at_size, set_cols_at_size] = $b8hua$createSignal([[1, "0px", ""]]);
+  const [container, set_container] = $b8hua$createSignal();
+  const container_width_accessor = $b8hua$createMemo(() => {
+    const element = container();
+    if (!element) return;
+    return $0dc044cffe1e825b$export$9f191182275e9ef(element);
+  });
+  const [shadow_children, set_shadow_children] = $b8hua$createSignal(new Set(), {
+    equals: false
+  });
+  const shadow_grid = $b8hua$ssr($830ea8efda59884e$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape([...shadow_children()])); // for getting the smallest possible sizes of all the items
+  $b8hua$createEffect(() => {
+    var _container_width_acce;
+    const container_width = (_container_width_acce = container_width_accessor()) === null || _container_width_acce === void 0 ? void 0 : _container_width_acce();
+    if (container_width == undefined) return;
+    $830ea8efda59884e$var$adjust_sizes(container_width, sizes_set(), set_cols_at_size);
+  });
+  return [shadow_grid, $b8hua$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), {
+    get cols_at_size() {
+      return cols_at_size();
     },
-    children: value => {
-      const is_selected = $b8hua$createMemo(() => {
-        var _existing_filter, _existing_filter$data;
-        return (_existing_filter = existing_filter()) === null || _existing_filter === void 0 ? void 0 : (_existing_filter$data = _existing_filter.data) === null || _existing_filter$data === void 0 ? void 0 : _existing_filter$data.includes(value().value_);
-      });
-      return $b8hua$ssr($830ea8efda59884e$var$_tmpl$3, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("disabled", value().count_ === 0 && !is_selected(), true), "".concat(!is_selected() ? "minor" : "", " ").concat(is_selected() ? "major" : "", "  major-minor-transition"), $b8hua$escape(value().value_), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
-        get when() {
-          return value().count_ != undefined;
+    grid_spacing: $830ea8efda59884e$var$gap_px + "px",
+    rows: "all",
+    layout: "grid",
+    element_attributes: {
+      class: "checkbox-grid",
+      ref: el => set_container(el)
+    },
+    get children() {
+      return $b8hua$createComponent((0, $b8hua$Index), {
+        get each() {
+          return buttons();
         },
-        get children() {
-          return $b8hua$ssr($830ea8efda59884e$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$escape(value().count_));
+        children: value => {
+          const is_selected = $b8hua$createMemo(() => {
+            var _existing_filter, _existing_filter$data;
+            return (_existing_filter = existing_filter()) === null || _existing_filter === void 0 ? void 0 : (_existing_filter$data = _existing_filter.data) === null || _existing_filter$data === void 0 ? void 0 : _existing_filter$data.includes(value().value_);
+          });
+          const MakeButton = attributes => $b8hua$ssrElement("button", () => ({
+            ...attributes,
+            "disabled": value().count_ === 0 && !is_selected(),
+            "classList": {
+              minor: !is_selected(),
+              major: is_selected(),
+              "major-minor-transition": true
+            }
+          }), () => ["<!--#-->", $b8hua$escape(value().value_), "<!--/-->", "<!--#-->", $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+            get when() {
+              return value().count_ != undefined;
+            },
+            get children() {
+              return $b8hua$ssr($830ea8efda59884e$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$escape(value().count_));
+            }
+          })), "<!--/-->"], true);
+          const invisible_size_button = $b8hua$createComponent(MakeButton, {});
+          const smallest_possible_size = $0dc044cffe1e825b$export$9f191182275e9ef(invisible_size_button); // create ResizeObserver for the invisible size button where the div hugs its content
+          const sizes_value = $b8hua$untrack(sizes_set);
+          const shadow_children_value = $b8hua$untrack(shadow_children);
+          sizes_value.add(smallest_possible_size);
+          set_sizes_set(sizes_value);
+          shadow_children_value.add(invisible_size_button);
+          set_shadow_children(shadow_children_value);
+          $b8hua$onCleanup(() => {
+            const sizes_value = $b8hua$untrack(sizes_set);
+            const shadow_children_value = $b8hua$untrack(shadow_children);
+            sizes_value.delete(smallest_possible_size);
+            set_sizes_set(sizes_value);
+            shadow_children_value.delete(invisible_size_button);
+            set_shadow_children(shadow_children_value);
+          });
+          // The actual button that will be visible
+          return $b8hua$createComponent(MakeButton, {});
         }
-      })));
+      });
     }
-  })));
+  })];
 };
+/**
+ * Calculate and apply cols_at_size overrides to fit as many items as possible in a row, evenly spaced
+ */
+function $830ea8efda59884e$var$adjust_sizes(container_width, sizes, set_cols_at_size) {
+  let current_row_index = 0;
+  let current_row_items = [];
+  const column_to_row_result = {};
+  const check_would_fit_evenly = (min_size_of_item, at_number_of_columnns) => {
+    const would_have_even_size = container_width / at_number_of_columnns - (at_number_of_columnns * 2 - 2) * ($830ea8efda59884e$var$gap_px / 2) / at_number_of_columnns; // What size would our element have (without gaps), given that now every column had the same width (equation from Layout.tsx)
+    return would_have_even_size >= min_size_of_item; // would this item still fit if we added another column? (probably what the caller has done with at_number_of_columns), given that every item has the same size
+  };
+
+  for (const size_item of sizes) {
+    const size = size_item();
+    if (size == undefined) return; // Only do stuff if we know all the sizes
+    const current_row_length = current_row_items.length;
+    const can_add_another_column_initial_val = current_row_length < $830ea8efda59884e$var$max_columns; // allow max 4 items per row
+    let can_add_another_column = can_add_another_column_initial_val;
+    if (can_add_another_column)
+      // can we actually? Since adding another column changes the size of all elements in the row we need to check all of them
+      for (let i = -1; i < current_row_length; i++) {
+        var _ref3;
+        // -1 is for the new item we're adding and every item is guaranteed to exist
+        const size_to_check = (_ref3 = current_row_items[i]) !== null && _ref3 !== void 0 ? _ref3 : size;
+        const would_have_columns = current_row_length + 1; // if we added another column
+        const would_fit_evenly = check_would_fit_evenly(size_to_check, would_have_columns); // see comments in check_would_fit_evenly
+        if (!would_fit_evenly) {
+          can_add_another_column = false;
+          break;
+        }
+      }
+    if (can_add_another_column) current_row_items.push(size);else {
+      column_to_row_result[++current_row_index] = current_row_length || 1; // overrides is indexed by 1 it seems, therefore ++curent_row_index
+      current_row_items = [size]; // save current item for next row
+    }
+  }
+
+  const items_left_to_add = current_row_items.length;
+  if (items_left_to_add) {
+    let num_columns = 1; // We want to have as close to max_columns as possible in the last row
+    let fits = true;
+    do
+    // Check if more columns would fit
+    for (let i = 0; i < items_left_to_add; i++) {
+      const item = current_row_items[i];
+      const would_fit_evenly = check_would_fit_evenly(item, num_columns + 1);
+      if (!would_fit_evenly) {
+        fits = false;
+        break;
+      }
+    } while (fits && ++num_columns < $830ea8efda59884e$var$max_columns);
+    column_to_row_result[++current_row_index] = num_columns; // Add last row that's left after loop finished
+  }
+
+  set_cols_at_size([[1, "0px", "", null, {
+    overrides: column_to_row_result
+  }]]);
+}
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $b8hua$createSignal(false);
   $b8hua$onCleanup($b8hua$javascript_media_query(media_query, _ref => {
@@ -2024,7 +2168,7 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
     });
     const rgb_color = $b8hua$createMemo(() => $b8hua$hex_to_rgb(hex_color()));
     const black_contrast_better = $b8hua$createMemo(() => rgb_color() ? $2cb856c297c53e6c$var$does_black_contrast_better(rgb_color()) : false);
-    const input_row = $b8hua$createComponent((0, $6b73914551534ea8$export$48513f6b9f8ce62d), {
+    const input_row = $b8hua$createComponent((0, $19e828709c7723a0$export$48513f6b9f8ce62d), {
       get value_() {
         return checkbox().value_;
       },

package/server/latest/index.cjs

@@ -60,7 +60,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.0";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.2";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -644,9 +644,18 @@ const $1f8dbf7e28b3eff2$var$_tmpl$ = ["<button", ' class="show-more major" type=
 function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
     const rows_object_ = $5vyXB$solidjs.createMemo(() => {
-      const view_more_button = props.view_more_button;
-      if (!view_more_button) return "all";
+      const {
+        view_more_button: view_more_button,
+        max_rows: max_rows
+      } = props;
+      if (!view_more_button) {
+        if (max_rows) return {
+          max_rows: max_rows
+        };
+        return "all";
+      }
       return {
+        max_rows: max_rows,
         start_rows: view_more_button.start_rows,
         rows_per_click: view_more_button.rows_per_click ?? 2,
         button: $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(view_more_button.text))
@@ -1052,9 +1061,9 @@ function $235a2771a44e28e9$export$fecbb157621501bd({
   }));
   return outmost_element;
 }
-const $b3cf6ca8dc0e9998$var$_tmpl$ = ["<span", ' class="count">', "</span>"],
-  $b3cf6ca8dc0e9998$var$_tmpl$2 = ["<label", ' class="', '"', '><div class="left"><input type="checkbox"', "", "", '><span class="custom-indicator"></span><span class="text line-clamp">', "</span></div><!--#-->", "<!--/--></label>"];
-const $b3cf6ca8dc0e9998$export$48513f6b9f8ce62d = props => {
+const $1c63082b2da848ad$var$_tmpl$ = ["<span", ' class="count">', "</span>"],
+  $1c63082b2da848ad$var$_tmpl$2 = ["<label", ' class="', '"', '><div class="left"><input type="checkbox"', "", "", '><span class="custom-indicator"></span><span class="text line-clamp">', "</span></div><!--#-->", "<!--/--></label>"];
+const $1c63082b2da848ad$export$48513f6b9f8ce62d = props => {
   // It seems like there's no diffing without memos here (since we often just have computations in the getters above that update to the same result often because their dependencies change with unrelated changes often), so put memos here to avoid unneeded DOM changes
   const count = $5vyXB$solidjs.createMemo(() => props.count_);
   const label = $5vyXB$solidjs.createMemo(() => props.label_);
@@ -1062,12 +1071,12 @@ const $b3cf6ca8dc0e9998$export$48513f6b9f8ce62d = props => {
   const value = $5vyXB$solidjs.createMemo(() => props.value_);
   const is_count_zero = $5vyXB$solidjs.createMemo(() => props.is_count_zero_ || count() === 0);
   const id = $5vyXB$depictaiutilishared.make_random_classname();
-  return (/* We can't use actual margin because ExpandingContainer gets messed up */$5vyXB$solidjsweb.ssr($b3cf6ca8dc0e9998$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `input-row ${is_count_zero() ? "count-0" : ""}`, $5vyXB$solidjsweb.ssrAttribute("for", $5vyXB$solidjsweb.escape(id, true), false), $5vyXB$solidjsweb.ssrAttribute("name", $5vyXB$solidjsweb.escape(value(), true), false) + $5vyXB$solidjsweb.ssrAttribute("id", $5vyXB$solidjsweb.escape(id, true), false), $5vyXB$solidjsweb.ssrAttribute("checked", checked(), true), $5vyXB$solidjsweb.ssrAttribute("disabled", !checked() && is_count_zero(), true), $5vyXB$solidjsweb.escape(label()) || $5vyXB$solidjsweb.escape(value()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+  return (/* We can't use actual margin because ExpandingContainer gets messed up */$5vyXB$solidjsweb.ssr($1c63082b2da848ad$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `input-row ${is_count_zero() ? "count-0" : ""}`, $5vyXB$solidjsweb.ssrAttribute("for", $5vyXB$solidjsweb.escape(id, true), false), $5vyXB$solidjsweb.ssrAttribute("name", $5vyXB$solidjsweb.escape(value(), true), false) + $5vyXB$solidjsweb.ssrAttribute("id", $5vyXB$solidjsweb.escape(id, true), false), $5vyXB$solidjsweb.ssrAttribute("checked", checked(), true), $5vyXB$solidjsweb.ssrAttribute("disabled", !checked() && is_count_zero(), true), $5vyXB$solidjsweb.escape(label()) || $5vyXB$solidjsweb.escape(value()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
       get when() {
         return count() != undefined;
       },
       get children() {
-        return $5vyXB$solidjsweb.ssr($b3cf6ca8dc0e9998$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(count()));
+        return $5vyXB$solidjsweb.ssr($1c63082b2da848ad$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(count()));
       }
     })))
   );
@@ -1118,7 +1127,7 @@ function $d94869c80e337a3d$export$dd948f91abc3a1c4({
   });
   const render_checkbox = checkbox => {
     // Checkbox always calls the getters in props, so we don't wrap these values into memos
-    return $5vyXB$solidjsweb.createComponent((0, $b3cf6ca8dc0e9998$export$48513f6b9f8ce62d), {
+    return $5vyXB$solidjsweb.createComponent((0, $1c63082b2da848ad$export$48513f6b9f8ce62d), {
       get value_() {
         return checkbox().value_;
       },
@@ -1592,7 +1601,7 @@ function $3bdc00a1353c1150$var$render_stuff(data, existing_filter, i18n_) {
           // for some reason the for thing doesn't dispose of us if the key no longer exists?? so I'm doing it with show instead
           const value = $5vyXB$solidjs.createMemo(() => data()[key]); // still sometimes get undefined here even though we have <Show>
           const has_expandable = $5vyXB$solidjs.createMemo(() => !!Object.keys(value()?.children_ || {}).length);
-          return $5vyXB$solidjsweb.ssr($3bdc00a1353c1150$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `checkbox-details ${has_expandable() ? "expandable" : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $b3cf6ca8dc0e9998$export$48513f6b9f8ce62d), {
+          return $5vyXB$solidjsweb.ssr($3bdc00a1353c1150$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `checkbox-details ${has_expandable() ? "expandable" : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $1c63082b2da848ad$export$48513f6b9f8ce62d), {
             get value_() {
               return JSON.stringify(value()?.value_);
             },
@@ -1832,9 +1841,25 @@ function $3bdc00a1353c1150$var$expand_until_choice(data_structure) {
     }
   });
 }
-const $0ef1681699140f1a$var$_tmpl$ = ["<div", ' class="checkbox-grid">', "</div>"],
-  $0ef1681699140f1a$var$_tmpl$2 = ["<span", ' class="count-wrapper"><span class="count">', "</span></span>"],
-  $0ef1681699140f1a$var$_tmpl$3 = ["<button", "", ' class="', '"><!--#-->', "<!--/--><!--#-->", "<!--/--></button>"];
+
+/** @jsxImportSource solid-js */
+
+function $e5f442fb78c98741$export$9f191182275e9ef(what_to_watch) {
+  const [size, setSize] = $5vyXB$solidjs.createSignal();
+  const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const width = records[j].borderBoxSize?.[0]?.inlineSize ?? what_to_watch.getBoundingClientRect().width;
+      setSize(width);
+    }
+  }));
+  resizeObserver.observe(what_to_watch);
+  $5vyXB$solidjs.onCleanup(() => resizeObserver.disconnect());
+  return size;
+}
+const $0ef1681699140f1a$var$_tmpl$ = ["<div", ' class="checkbox-grid" style="position:absolute;z-index:-1;pointer-events:none;opacity:0">', "</div>"],
+  $0ef1681699140f1a$var$_tmpl$2 = ["<span", ' class="count-wrapper"><span class="count">', "</span></span>"];
+const $0ef1681699140f1a$var$gap_px = 5;
+const $0ef1681699140f1a$var$max_columns = 3;
 const $0ef1681699140f1a$export$414f6a19d38e655c = ({
   filter_: filter_,
   selected_filters_: [get_selected_filters, set_selected_filters]
@@ -1857,23 +1882,139 @@ const $0ef1681699140f1a$export$414f6a19d38e655c = ({
       count_: meta.counts?.[index]
     }));
   });
-  return $5vyXB$solidjsweb.ssr($0ef1681699140f1a$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Index), {
-    get each() {
-      return buttons();
+  const [sizes_set, set_sizes_set] = $5vyXB$solidjs.createSignal(new Set(), {
+    equals: false
+  });
+  const [cols_at_size, set_cols_at_size] = $5vyXB$solidjs.createSignal([[1, "0px", ""]]);
+  const [container, set_container] = $5vyXB$solidjs.createSignal();
+  const container_width_accessor = $5vyXB$solidjs.createMemo(() => {
+    const element = container();
+    if (!element) return;
+    return $e5f442fb78c98741$export$9f191182275e9ef(element);
+  });
+  const [shadow_children, set_shadow_children] = $5vyXB$solidjs.createSignal(new Set(), {
+    equals: false
+  });
+  const shadow_grid = $5vyXB$solidjsweb.ssr($0ef1681699140f1a$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape([...shadow_children()])); // for getting the smallest possible sizes of all the items
+  $5vyXB$solidjs.createEffect(() => {
+    const container_width = container_width_accessor()?.();
+    if (container_width == undefined) return;
+    $0ef1681699140f1a$var$adjust_sizes(container_width, sizes_set(), set_cols_at_size);
+  });
+  return [shadow_grid, $5vyXB$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), {
+    get cols_at_size() {
+      return cols_at_size();
     },
-    children: value => {
-      const is_selected = $5vyXB$solidjs.createMemo(() => existing_filter()?.data?.includes(value().value_));
-      return $5vyXB$solidjsweb.ssr($0ef1681699140f1a$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("disabled", value().count_ === 0 && !is_selected(), true), `${!is_selected() ? "minor" : ""} ${is_selected() ? "major" : ""}  major-minor-transition`, $5vyXB$solidjsweb.escape(value().value_), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-        get when() {
-          return value().count_ != undefined;
+    grid_spacing: $0ef1681699140f1a$var$gap_px + "px",
+    rows: "all",
+    layout: "grid",
+    element_attributes: {
+      class: "checkbox-grid",
+      ref: el => set_container(el)
+    },
+    get children() {
+      return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Index), {
+        get each() {
+          return buttons();
         },
-        get children() {
-          return $5vyXB$solidjsweb.ssr($0ef1681699140f1a$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(value().count_));
+        children: value => {
+          const is_selected = $5vyXB$solidjs.createMemo(() => existing_filter()?.data?.includes(value().value_));
+          const MakeButton = attributes => $5vyXB$solidjsweb.ssrElement("button", () => ({
+            ...attributes,
+            "disabled": value().count_ === 0 && !is_selected(),
+            "classList": {
+              minor: !is_selected(),
+              major: is_selected(),
+              "major-minor-transition": true
+            }
+          }), () => ["<!--#-->", $5vyXB$solidjsweb.escape(value().value_), "<!--/-->", "<!--#-->", $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+            get when() {
+              return value().count_ != undefined;
+            },
+            get children() {
+              return $5vyXB$solidjsweb.ssr($0ef1681699140f1a$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(value().count_));
+            }
+          })), "<!--/-->"], true);
+          const invisible_size_button = $5vyXB$solidjsweb.createComponent(MakeButton, {});
+          const smallest_possible_size = $e5f442fb78c98741$export$9f191182275e9ef(invisible_size_button); // create ResizeObserver for the invisible size button where the div hugs its content
+          const sizes_value = $5vyXB$solidjs.untrack(sizes_set);
+          const shadow_children_value = $5vyXB$solidjs.untrack(shadow_children);
+          sizes_value.add(smallest_possible_size);
+          set_sizes_set(sizes_value);
+          shadow_children_value.add(invisible_size_button);
+          set_shadow_children(shadow_children_value);
+          $5vyXB$solidjs.onCleanup(() => {
+            const sizes_value = $5vyXB$solidjs.untrack(sizes_set);
+            const shadow_children_value = $5vyXB$solidjs.untrack(shadow_children);
+            sizes_value.delete(smallest_possible_size);
+            set_sizes_set(sizes_value);
+            shadow_children_value.delete(invisible_size_button);
+            set_shadow_children(shadow_children_value);
+          });
+          // The actual button that will be visible
+          return $5vyXB$solidjsweb.createComponent(MakeButton, {});
         }
-      })));
+      });
     }
-  })));
+  })];
 };
+/**
+ * Calculate and apply cols_at_size overrides to fit as many items as possible in a row, evenly spaced
+ */
+function $0ef1681699140f1a$var$adjust_sizes(container_width, sizes, set_cols_at_size) {
+  let current_row_index = 0;
+  let current_row_items = [];
+  const column_to_row_result = {};
+  const check_would_fit_evenly = (min_size_of_item, at_number_of_columnns) => {
+    const would_have_even_size = container_width / at_number_of_columnns - (at_number_of_columnns * 2 - 2) * ($0ef1681699140f1a$var$gap_px / 2) / at_number_of_columnns; // What size would our element have (without gaps), given that now every column had the same width (equation from Layout.tsx)
+    return would_have_even_size >= min_size_of_item; // would this item still fit if we added another column? (probably what the caller has done with at_number_of_columns), given that every item has the same size
+  };
+
+  for (const size_item of sizes) {
+    const size = size_item();
+    if (size == undefined) return; // Only do stuff if we know all the sizes
+    const current_row_length = current_row_items.length;
+    const can_add_another_column_initial_val = current_row_length < $0ef1681699140f1a$var$max_columns; // allow max 4 items per row
+    let can_add_another_column = can_add_another_column_initial_val;
+    if (can_add_another_column)
+      // can we actually? Since adding another column changes the size of all elements in the row we need to check all of them
+      for (let i = -1; i < current_row_length; i++) {
+        // -1 is for the new item we're adding and every item is guaranteed to exist
+        const size_to_check = current_row_items[i] ?? size;
+        const would_have_columns = current_row_length + 1; // if we added another column
+        const would_fit_evenly = check_would_fit_evenly(size_to_check, would_have_columns); // see comments in check_would_fit_evenly
+        if (!would_fit_evenly) {
+          can_add_another_column = false;
+          break;
+        }
+      }
+    if (can_add_another_column) current_row_items.push(size);else {
+      column_to_row_result[++current_row_index] = current_row_length || 1; // overrides is indexed by 1 it seems, therefore ++curent_row_index
+      current_row_items = [size]; // save current item for next row
+    }
+  }
+
+  const items_left_to_add = current_row_items.length;
+  if (items_left_to_add) {
+    let num_columns = 1; // We want to have as close to max_columns as possible in the last row
+    let fits = true;
+    do
+    // Check if more columns would fit
+    for (let i = 0; i < items_left_to_add; i++) {
+      const item = current_row_items[i];
+      const would_fit_evenly = check_would_fit_evenly(item, num_columns + 1);
+      if (!would_fit_evenly) {
+        fits = false;
+        break;
+      }
+    } while (fits && ++num_columns < $0ef1681699140f1a$var$max_columns);
+    column_to_row_result[++current_row_index] = num_columns; // Add last row that's left after loop finished
+  }
+
+  set_cols_at_size([[1, "0px", "", null, {
+    overrides: column_to_row_result
+  }]]);
+}
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $5vyXB$solidjs.createSignal(false);
   $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
@@ -1918,7 +2059,7 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
     const hex_color = $5vyXB$solidjs.createMemo(() => checkbox().value_.split(";")?.[1] || "");
     const rgb_color = $5vyXB$solidjs.createMemo(() => $5vyXB$depictaiutilishared.hex_to_rgb(hex_color()));
     const black_contrast_better = $5vyXB$solidjs.createMemo(() => rgb_color() ? $b51a2b8b9355e66c$var$does_black_contrast_better(rgb_color()) : false);
-    const input_row = $5vyXB$solidjsweb.createComponent((0, $b3cf6ca8dc0e9998$export$48513f6b9f8ce62d), {
+    const input_row = $5vyXB$solidjsweb.createComponent((0, $1c63082b2da848ad$export$48513f6b9f8ce62d), {
       get value_() {
         return checkbox().value_;
       },

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 { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.0.0";
+export const version = "2.0.2";
 export type SDKGridSpacing = string | {
   horizontal: string;
   vertical: string;
@@ -117,6 +117,7 @@ type RecommendationGridBaseProps<T extends Display> = {
     start_rows?: number;
     rows_per_click?: number;
   };
+  max_rows?: number;
 };
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.