@depict-ai/ui 4.7.32 → 4.7.34

package/latest/index.cjs

@@ -12,6 +12,9 @@ function $parcel$export(e, n, v, s) {
     configurable: true
   });
 }
+$parcel$export(module.exports, "ModernResponsiveImage", () => $d212a67662c5cf38$export$140423fa4bfb6d63);
+$parcel$export(module.exports, "setExtraDisplayTransformers", () => $606c221d98ba4d92$export$f98b8d5ea7207a1);
+$parcel$export(module.exports, "getExtraDisplayTransformers", () => $606c221d98ba4d92$export$b2d94be4f02525b2);
 $parcel$export(module.exports, "remap_blocks_to_index", () => $d92f338ba8f9da9b$export$92aa5d691d588f3f);
 $parcel$export(module.exports, "useMobileHover", () => $8bf678c45948a297$export$d4d96868197be50e);
 $parcel$export(module.exports, "useVisibilityState", () => $55cbacb79d3e0cea$export$54299a3c81f5425);
@@ -52,7 +55,6 @@ $parcel$export(module.exports, "make_accurate_width_accessor", () => $f13855d1b9
 $parcel$export(module.exports, "RecommendationSlider", () => $72f96c4782db0b1b$export$9574e176201e5e8d);
 $parcel$export(module.exports, "RecommendationGrid", () => $1f8dbf7e28b3eff2$export$9756467d34d91cdb);
 $parcel$export(module.exports, "ShopifyResponsiveImg", () => $19950faaac026e09$export$6e5611bc7e57e477);
-$parcel$export(module.exports, "makeSizeAccessor", () => $19950faaac026e09$export$e6fffe67d4cdd848);
 $parcel$export(module.exports, "ImageContainer", () => $93304d59a9747aa6$export$94026ee33dbabc26);
 $parcel$export(module.exports, "SentryErrorBoundary", () => $edafe91daf3091d7$export$b69d0d92862de18b);
 $parcel$export(module.exports, "ExtraSentryContextProvider", () => $edafe91daf3091d7$export$240ecf5363d76c0f);
@@ -104,187 +106,32 @@ $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316
 $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7c3ce0ebe51f86);
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
+$parcel$export(module.exports, "makeSizeAccessors", () => $128302ab61dab8f1$export$54c6d6ff54e72743);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.32";
-function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
-  const signal = $gVhhF$solidjs.createSignal(false);
-  $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
-    matches: matches
-  }) => signal[1](matches)).remove);
-  return signal[0];
-}
-function $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_) {
-  const size_active = $gVhhF$solidjs.createMemo(() => cols_at_size_().map(([n_cols, min_width, max_width]) => {
-    const media_query = $gVhhF$depictaiutilishared.layout_media_query_header(min_width, max_width).replaceAll("@media", "");
-    const matches = $b54e6192d0caa293$export$d9f36cf74e24d595(media_query);
-    return [matches, n_cols];
-  }));
-  const n_cols_currently_showing = $gVhhF$solidjs.createMemo(() => {
-    try {
-      const [, n_cols_currently_showing] = size_active().find(([media_query]) => media_query());
-      return n_cols_currently_showing;
-    } catch (e) {
-      $gVhhF$depictaiutilishared.dwarn("No active size found in columnsAtSize - can't render content blocks or looks");
-      return null;
-    }
-  });
-  return n_cols_currently_showing;
-}
-
-// Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
-class $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 extends Error {}
-class $7dd1edb2ee2b43ad$export$aa14a9f43128f61f extends $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 {
-  constructor(templateError) {
-    super("Uncaught error in product card template", {
-      cause: templateError
-    });
-  }
-}
-var $edafe91daf3091d7$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div><!$><!/><!$><!/>`);
-const $edafe91daf3091d7$var$ExtraInfoContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
-function $edafe91daf3091d7$export$240ecf5363d76c0f(props) {
-  return $gVhhF$solidjsweb.createComponent($edafe91daf3091d7$var$ExtraInfoContext.Provider, {
-    get value() {
-      return props.getContext_;
-    },
-    get children() {
-      return props.children;
-    }
-  });
-}
-function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
-  const getContextFunction = $gVhhF$solidjs.useContext($edafe91daf3091d7$var$ExtraInfoContext);
-  return $gVhhF$solidjs.ErrorBoundary({
-    fallback(err, retry) {
-      const {
-        message_: message_,
-        severity_: severity_
-      } = props;
-      let message = message_;
-      if (err instanceof (0, $7dd1edb2ee2b43ad$export$aa14a9f43128f61f)) {
-        console.error(err.cause);
-        message = `${message}: ${err.message}`;
-      } else $gVhhF$depictaiutilishared.report([err, message_], severity_, getContextFunction?.());
-      return (() => {
-        var _el$ = $gVhhF$solidjsweb.getNextElement($edafe91daf3091d7$var$_tmpl$),
-          _el$2 = _el$.firstChild,
-          [_el$3, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$2.nextSibling),
-          _el$4 = _el$3.nextSibling,
-          [_el$5, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling);
-        $gVhhF$solidjsweb.insert(_el$, message, _el$3, _co$);
-        $gVhhF$solidjsweb.insert(_el$, () => props.on_error_?.(retry), _el$5, _co$2);
-        $gVhhF$solidjsweb.effect(_$p => $gVhhF$solidjsweb.classList(_el$, Object.fromEntries(props.class_list_?.map(c => [c, true]) || []), _$p));
-        return _el$;
-      })();
-    },
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.34";
+const $84798aaa863a4909$var$ListingContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
+function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
+  const our_object = {};
+  return $gVhhF$solidjsweb.createComponent($84798aaa863a4909$var$ListingContext.Provider, {
+    value: our_object,
     get children() {
       return props.children;
     }
   });
 }
-var $75777da1687ba3f6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
-  $75777da1687ba3f6$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<style type=text/css>`);
-const $75777da1687ba3f6$export$c500183c31c2b22e = "--spans-columns";
-function $75777da1687ba3f6$export$ab6b147eec64fea5(props) {
-  const container_class = "x" + $gVhhF$solidjs.createUniqueId();
-  const container_element_ = (() => {
-    var _el$ = $gVhhF$solidjsweb.getNextElement($75777da1687ba3f6$var$_tmpl$);
-    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => props.element_attributes, {
-      "classList": {
-        [container_class]: true
-      }
-    }), false, true);
-    $gVhhF$solidjsweb.insert(_el$, () => props.children);
-    $gVhhF$solidjsweb.runHydrationEvents();
-    return _el$;
-  })(); // Don't want this in the error boundary below, it should only be for the actual layouting
-  return $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
-    message_: "Failed calculating css grid layout",
-    severity_: "error",
-    get children() {
-      return $75777da1687ba3f6$export$e2f22da34aaf310a(props, container_element_, false, container_class);
-    }
-  });
-}
-function $75777da1687ba3f6$export$e2f22da34aaf310a(props, container_element, insert_after_container = false, container_class) {
-  if (!container_class) {
-    // only try to add if it wasn't provided, so that we have a code path without classList when doing SSR
-    container_class = $gVhhF$depictaiutilishared.make_random_classname();
-    container_element.classList.add(container_class);
-  }
-  const container_selector = `.depict .${container_class}`; // class so ppl can have id if needed
-  const col_styling = $gVhhF$solidjs.createMemo(() => $75777da1687ba3f6$var$generate_media_queried_declarations({
-    container_selector_: container_selector,
-    default_grid_spacing_text: props.grid_spacing,
-    cols_at_size_: props.cols_at_size,
-    override_vertical_spacing_: props.override_vertical_spacing,
-    top_row_shortened_by_: props.top_row_shortened_by_()
-  }));
-  const base_styling = $gVhhF$solidjs.createMemo(() => {
-    return `${container_selector}{display:grid;}`;
-  });
-  const get_styling = $gVhhF$solidjs.createMemo(() => base_styling() + col_styling());
-  const style_element = (() => {
-    var _el$2 = $gVhhF$solidjsweb.getNextElement($75777da1687ba3f6$var$_tmpl$2);
-    $gVhhF$solidjsweb.insert(_el$2, get_styling);
-    return _el$2;
-  })(); // need to create this after set_styling has been called or else there will be no styling in the SSR'd output
-  if (insert_after_container) container_element.after(style_element);
-  return [container_element, style_element];
-}
-function $75777da1687ba3f6$var$generate_media_queried_declarations({
-  container_selector_: container_selector_,
-  default_grid_spacing_text: default_grid_spacing_text,
-  cols_at_size_: cols_at_size_,
-  override_vertical_spacing_: override_vertical_spacing_,
-  top_row_shortened_by_: top_row_shortened_by_
-}) {
-  return cols_at_size_.map(options => {
-    const [n_cols, min, max, grid_spacing_for_size] = options;
-    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
-    // See comment in else block below
-    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:${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(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(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:${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_);
-    }
-    const media_query_body = `${container_selector_}{${spacing_styling}grid-template-columns:repeat(${n_cols},minmax(0,1fr));}`;
-    return `${$gVhhF$depictaiutilishared.layout_media_query_header(min, max)}{${media_query_body}}${additional_styling}`;
-  }).join("");
-}
-function $75777da1687ba3f6$var$can_use_gap_for_unit(spacing) {
-  const trimmed_spacing = spacing.trim();
-  return !trimmed_spacing.includes("%");
-}
-function $75777da1687ba3f6$var$strip_percent_unit(css_value) {
-  return css_value.replaceAll("%", "");
+function $84798aaa863a4909$export$8d0c4fdbb05a2f2e() {
+  return $gVhhF$solidjs.useContext($84798aaa863a4909$var$ListingContext);
 }
-var $9fe9883b1d8ecccc$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span>`);
-function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
-  // Work around https://github.com/solidjs/solid/issues/1980
+var $93304d59a9747aa6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`);
+function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
   return (() => {
-    var _el$ = $gVhhF$solidjsweb.getNextElement($9fe9883b1d8ecccc$var$_tmpl$);
+    var _el$ = $gVhhF$solidjsweb.getNextElement($93304d59a9747aa6$var$_tmpl$);
+    $gVhhF$solidjsweb.insert(_el$, () => props.children);
     $gVhhF$solidjsweb.effect(_p$ => {
-      var _v$ = `${props.class || ""} depict-placeholder`,
-        _v$2 = props.style;
-      _v$ !== _p$.e && $gVhhF$solidjsweb.className(_el$, _p$.e = _v$);
-      _p$.t = $gVhhF$solidjsweb.style(_el$, _v$2, _p$.t);
+      var _v$ = `padding-bottom:calc(calc(1 / ${props.aspectRatio}) * 100%)`,
+        _v$2 = "s-image-container" + (props.class ? " " + props.class : "");
+      _p$.e = $gVhhF$solidjsweb.style(_el$, _v$, _p$.e);
+      _v$2 !== _p$.t && $gVhhF$solidjsweb.className(_el$, _p$.t = _v$2);
       return _p$;
     }, {
       e: undefined,
@@ -293,59 +140,624 @@ function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
     return _el$;
   })();
 }
-function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
-  const style = $gVhhF$solidjs.createMemo(() => {
-    const {
-      style: style,
-      height: height,
-      width: width,
-      aspectRatio: aspectRatio
-    } = props;
-    const is_image = aspectRatio != undefined;
-    const size_data = is_image ? {
-      width: "100%",
-      "padding-bottom": `calc(calc(1 / ${aspectRatio}) * 100%)`
-    } : {
-      width: width,
-      height: height
-    };
-    return {
-      display: "block",
-      ...(style || {}),
-      ...size_data
-    };
-  });
-  return $gVhhF$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
-    get style() {
-      return style();
+const $129b9b9c010039d0$var$ProductCardIndexContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
+function $129b9b9c010039d0$export$11354f017ddc9790(props) {
+  return $gVhhF$solidjsweb.createComponent($129b9b9c010039d0$var$ProductCardIndexContext.Provider, {
+    get value() {
+      return props.index_;
     },
-    get ["class"]() {
-      return props.class;
+    get children() {
+      return props.children;
     }
   });
 }
-var $d92f338ba8f9da9b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=content-block-wrapper>`);
-function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
-  content_blocks_: incoming_content_blocks,
-  cols_at_size_: cols_at_size_,
-  set_top_row_shortened_by_: set_top_row_shortened_by_
+function $129b9b9c010039d0$export$e3faf4d95300054f() {
+  return $gVhhF$solidjs.useContext($129b9b9c010039d0$var$ProductCardIndexContext);
+}
+let $3ea8e0af95b5b7d2$var$browserIsBugged = false;
+function $3ea8e0af95b5b7d2$export$2972b890694ced75(callback, {
+  timeout: timeout
 }) {
-  // these are by row
-  const [content_blocks, set_content_blocks] = $gVhhF$solidjsstore.createStore([]);
-  const n_cols_currently_showing_ = $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_);
-  $gVhhF$solidjs.createEffect(() => {
-    const incoming_value = incoming_content_blocks();
-    if (!incoming_value) {
-      set_content_blocks([]);
-      return;
-    }
-    set_content_blocks($gVhhF$solidjsstore.reconcile(incoming_value, {
-      key: "content"
-    })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
+  if ($3ea8e0af95b5b7d2$var$browserIsBugged) timeout /= 4;
+  const cancel = () => {
+    cancelIdleCallback(idleHandle);
+    clearTimeout(racingTimeout);
+  };
+  const idleHandle = requestIdleCallback(deadline => {
+    cancel();
+    return callback(deadline);
+  }, {
+    timeout: timeout
   });
-
-  const get_wrapped_blocks_ = $d92f338ba8f9da9b$var$wrap_blocks_in_div(content_blocks, n_cols_currently_showing_);
-  $gVhhF$solidjs.createComputed(() => {
+  const racingTimeout = setTimeout(() => {
+    $gVhhF$depictaiutilishared.dwarn("Browser did not respect requestIdleCallback timeout");
+    $3ea8e0af95b5b7d2$var$browserIsBugged = true;
+    cancel();
+    callback({
+      didTimeout: false,
+      timeRemaining() {
+        return 500;
+      }
+    });
+  }, timeout + 1000);
+  return cancel;
+}
+const $19950faaac026e09$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
+const $19950faaac026e09$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
+const $19950faaac026e09$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
+function $19950faaac026e09$export$6e5611bc7e57e477(props) {
+  const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
+  const [ourRatioKeyed, setOurRatioKeyed] = $gVhhF$solidjs.createSignal();
+  const sizeToUse = $gVhhF$solidjs.createMemo(() => {
+    // props.size could be a getter that expects a cleanup so get it in this memo instead of where we set img.sizes (also we need to multiply, and it's good with some diffing here so people calling the comp don't have to)
+    const incomingSize = props.size();
+    const ratio = ourRatioKeyed();
+    const containerHeight = props.sizeHeight?.();
+    if (!incomingSize || !ratio || !containerHeight || getComputedStyle(img).objectFit !== "cover") return incomingSize;
+    const maybeCorrectedSize = ratio * containerHeight;
+    return Math.round(Math.max(incomingSize, maybeCorrectedSize));
+  });
+  const src_options = $gVhhF$solidjs.createMemo(() => {
+    const {
+      src: src,
+      customUrls: customUrls
+    } = props;
+    const fallback_src = (customUrls || $19950faaac026e09$export$1d6267828870adda)(src, 400);
+    const srcset = $19950faaac026e09$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customUrls);
+    // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
+    return {
+      srcset: srcset,
+      src: fallback_src
+    };
+  });
+  // Work around https://github.com/solidjs/solid/issues/1828
+  const [, otherAttributes] = $gVhhF$solidjs.splitProps(props, ["resolutions", "size", "src", "srcSet", "loading", "keyRatioUpdating", "sizeHeight", "customUrls" // Can't have properties ending on underscore because the property name mangling will get confused by this <-
+  ]);
+
+  const [hasSetSize, setHasSetSize] = $gVhhF$solidjs.createSignal(false);
+  const [hasDecoded, setHasDecoded] = $gVhhF$solidjs.createSignal(false);
+  const productCardIndexAccessor = $129b9b9c010039d0$export$e3faf4d95300054f();
+  const listingContext = $84798aaa863a4909$export$8d0c4fdbb05a2f2e();
+  const isPrioritisedImage = $gVhhF$solidjs.createMemo(() => productCardIndexAccessor?.() < 8);
+  const shouldActuallyEnableLazyLoading = $gVhhF$solidjs.createMemo(() => {
+    const {
+      loading: loading
+    } = props;
+    if (loading === "force-lazy") return true;
+    return loading === "lazy" && !isPrioritisedImage();
+  });
+  const modifiedOtherAttributes = $gVhhF$solidjs.mergeProps(otherAttributes, {
+    get loading() {
+      return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
+    }
+  });
+  // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
+  // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
+  const executeWhenIdleBatched = (fn, isSizesUpdate) => {
+    if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
+    if ((!isSizesUpdate || !sizeSetFastPath) && $gVhhF$solidjs.untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately (improves lighthouse metrics)
+    // unless we're just a `sizes` update after the initial sizes setting (this optimisation makes the looks animation a lot smoother on low-cpu devices)
+    const existingStack = listingContext?.[$19950faaac026e09$var$onIdleFunctionsSymbol];
+    if (existingStack) return existingStack.add(fn);
+    const newStack = new Set([fn]);
+    if (listingContext) listingContext[$19950faaac026e09$var$onIdleFunctionsSymbol] = newStack;
+    const processStackWhenIdle = () => $3ea8e0af95b5b7d2$export$2972b890694ced75($gVhhF$depictaiutilishared.catchify(deadline => {
+      const start = performance.now();
+      const thirdDeadlineTime = deadline.timeRemaining() / 3; // observers coming after this take up 2-3x the time so don't use all of it
+      for (const fn of newStack) {
+        newStack.delete(fn);
+        fn();
+        const timeTaken = performance.now() - start;
+        if ((!deadline.timeRemaining() || timeTaken > thirdDeadlineTime) && newStack.size) {
+          // There's still work to be done but no time, so schedule another idle callback
+          processStackWhenIdle();
+          return;
+        }
+      }
+      // Stack is empty
+      if (listingContext) delete listingContext[$19950faaac026e09$var$onIdleFunctionsSymbol];
+    }), {
+      timeout: 15000
+    } // long timeout, better to not have images than to freeze the browser. But also we don't want to confuse user why no iamges are loading
+    );
+
+    processStackWhenIdle();
+  };
+  let sizeSetFastPath = false;
+  let hasDecodedFastPath = false;
+  let timeoutSet = false;
+  let gotCleanedUp = false;
+  let srcJustChanged = true;
+  img.classList.add("s-responsive-image");
+  if (listingContext) {
+    let prevValue;
+    const aspectRatios = listingContext[$19950faaac026e09$export$f8945274f08a3105] ||= new Set();
+    const [, setMostPrevalentAspectRatio] = listingContext[$19950faaac026e09$export$6066eb417ed2e9f7] ||= $gVhhF$solidjs.createSignal();
+    img.addEventListener("load", $gVhhF$depictaiutilishared.catchify(() => {
+      const aspectRatio_ = img.naturalWidth / img.naturalHeight;
+      if (srcJustChanged)
+        // Always key object-fit-cover compensation to avoid loading-different-images-infinite-loop
+        setOurRatioKeyed(aspectRatio_);else if (props.keyRatioUpdating) return;
+      srcJustChanged = false;
+      // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2 and LookItem
+      if (prevValue) aspectRatios.delete(prevValue);
+      const newValue = !isNaN(aspectRatio_) ? {
+        aspectRatio_: aspectRatio_
+      } : undefined;
+      if (newValue) aspectRatios.add(newValue);
+      prevValue = newValue;
+      // Do all calculations resulting of an update directly, for performance
+      const asArray = [...aspectRatios].map(({
+        aspectRatio_: aspectRatio_
+      }) => aspectRatio_);
+      const mostPrevalentAspectRatio = $gVhhF$depictaiutilishared.findMostFrequentItem(asArray);
+      setMostPrevalentAspectRatio(mostPrevalentAspectRatio);
+    }));
+    $gVhhF$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
+  }
+  $gVhhF$solidjs.onCleanup(() => gotCleanedUp = true);
+  $gVhhF$solidjsweb.spread(img, $gVhhF$solidjs.mergeProps(modifiedOtherAttributes), false, true);
+  $gVhhF$solidjs.createRenderEffect(() => {
+    props.src;
+    srcJustChanged = true;
+  });
+  $gVhhF$solidjs.createEffect(() => {
+    if (!sizeToUse()) return; // wait until we have a size, run every time the size changes
+    if (timeoutSet) return;
+    const handler = $gVhhF$depictaiutilishared.catchify(() => {
+      if (gotCleanedUp) return;
+      img.sizes = `${sizeToUse()}px`; // use latest available value of size in case it has changed
+      if (!sizeSetFastPath) {
+        setHasSetSize(true);
+        sizeSetFastPath = true;
+      }
+      timeoutSet = false;
+    });
+    // Throttle the updating of sizes to avoid unnecessary image re-fetches during resize
+    // And also because we first set src after sizes has been set, wait with loading and decoding images until browser is idle
+    // This greatly improves performance when loading (more) products
+    // See https://depictaiworkspace.slack.com/archives/C05NJ0K3WRL/p1698220617663139
+    timeoutSet = true; // Important to set timeoutSet before the call to executeWhenIdleBatched since if this is an important image executeWhenIdleBatched will execute fn immediately
+    executeWhenIdleBatched(handler, true);
+  });
+  const dontLoadImageYet = $gVhhF$solidjs.createMemo(() => !sizeToUse() || !hasSetSize()); // Moving this condition into a memo saves us from re-setting src and srcset (expensive) if just props.size changes
+  $gVhhF$solidjs.createEffect(() => {
+    if (dontLoadImageYet()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
+    Object.assign(img, src_options());
+    // Add to DOM once decoded to not require/block any paints before image has completed loading and avoid showing broken image symbol
+    // We can do this because there has to be a container around us giving us a size
+    // No need to listen if we're already in the DOM
+    if (hasDecodedFastPath) return;
+    if (shouldActuallyEnableLazyLoading()) {
+      // For lazy loading there's no decoding to wait for as it only occurs when the image is visible
+      // Make sure src is set before we put the image into the DOM though so no broken image symbol is shown
+      setHasDecoded(true);
+      hasDecodedFastPath = true;
+      return;
+    }
+    img.decode().catch(e => $gVhhF$depictaiutilishared.dwarn("Failed to decode image", e, img)) // Display the image also if loading failed so webdev can debug and doesn't get "no image"
+    .then(async () => {
+      // Also wait with inserting image (i.e. paint) until browser is idle
+      await new Promise(r => executeWhenIdleBatched(r, false));
+      if (gotCleanedUp) return;
+      setHasDecoded(true);
+      hasDecodedFastPath = true;
+    });
+  });
+  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    get when() {
+      return hasDecoded();
+    },
+    children: img
+  });
+}
+function $19950faaac026e09$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => `${(customGenerateImageUrl_ || $19950faaac026e09$export$1d6267828870adda)(url, width)} ${width}w`).join(", ");
+}
+function $19950faaac026e09$export$1d6267828870adda(url, width) {
+  // Even just creating one `URL` object per image src and then setting the search parameter is quite slow (0.25ms to set the width param)
+  // We're making the assumptions that the url has already at least one query parameter and that the image resizing service will choose the last one out of a duplicate width parameter (shopify's does)
+  // That way we can just to string concatenation which is insanely fast
+  return url + "&width=" + encodeURIComponent(width);
+}
+var $9fe9883b1d8ecccc$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span>`);
+function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
+  // Work around https://github.com/solidjs/solid/issues/1980
+  return (() => {
+    var _el$ = $gVhhF$solidjsweb.getNextElement($9fe9883b1d8ecccc$var$_tmpl$);
+    $gVhhF$solidjsweb.effect(_p$ => {
+      var _v$ = `${props.class || ""} depict-placeholder`,
+        _v$2 = props.style;
+      _v$ !== _p$.e && $gVhhF$solidjsweb.className(_el$, _p$.e = _v$);
+      _p$.t = $gVhhF$solidjsweb.style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+}
+function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
+  const style = $gVhhF$solidjs.createMemo(() => {
+    const {
+      style: style,
+      height: height,
+      width: width,
+      aspectRatio: aspectRatio
+    } = props;
+    const is_image = aspectRatio != undefined;
+    const size_data = is_image ? {
+      width: "100%",
+      "padding-bottom": `calc(calc(1 / ${aspectRatio}) * 100%)`
+    } : {
+      width: width,
+      height: height
+    };
+    return {
+      display: "block",
+      ...(style || {}),
+      ...size_data
+    };
+  });
+  return $gVhhF$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
+    get style() {
+      return style();
+    },
+    get ["class"]() {
+      return props.class;
+    }
+  });
+}
+function $061ff5b4c3d36171$export$89c6019e4baa40b1(props) {
+  const style = $gVhhF$solidjs.createMemo(() => {
+    const {
+      style: style,
+      height: height,
+      width: width
+    } = props;
+    return {
+      ...(style || {}),
+      height: height ?? "1em",
+      ...(width && {
+        width: width
+      })
+    };
+  });
+  return $gVhhF$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
+    get style() {
+      return style();
+    },
+    get ["class"]() {
+      return props.class;
+    }
+  });
+}
+var $6f604560873e4f69$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=instant-card><div class=img-part></div><div class=right-part><div class=title-brand-tagline><span class=title></span></div><div class=price-container>`);
+const $6f604560873e4f69$export$8a2234b5b1a5ebd4 = "--image-aspect-ratio";
+function $6f604560873e4f69$export$ee1733d9a8495996() {
+  return (() => {
+    var _el$ = $gVhhF$solidjsweb.getNextElement($6f604560873e4f69$var$_tmpl$),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      _el$4 = _el$3.firstChild,
+      _el$5 = _el$4.firstChild,
+      _el$6 = _el$4.nextSibling;
+    $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
+      aspectRatio: `var(${$6f604560873e4f69$export$8a2234b5b1a5ebd4}, 1)`
+    }));
+    $gVhhF$solidjsweb.insert(_el$5, $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+      width: "20ch",
+      height: "1em"
+    }));
+    $gVhhF$solidjsweb.insert(_el$6, $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+      width: "5ch",
+      height: "1em",
+      "class": "price"
+    }));
+    return _el$;
+  })();
+}
+function $128302ab61dab8f1$export$54c6d6ff54e72743(whatToWatch) {
+  const [width, setWidth] = $gVhhF$solidjs.createSignal(0);
+  const [height, setHeight] = $gVhhF$solidjs.createSignal(0);
+  const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => $gVhhF$solidjs.batch(() => {
+    for (let j = 0; j < records.length; j++) {
+      const {
+        width: width,
+        height: height
+      } = records[j].contentRect;
+      // Padding hack makes that we can't use contentRect to get the height since that's apparently without padding
+      const definitiveHeight = height || whatToWatch.getBoundingClientRect().height;
+      if (definitiveHeight) setHeight(Math.ceil(definitiveHeight));
+      if (width) setWidth(Math.ceil(width));
+    }
+  })));
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $gVhhF$depictaiutilishared.observer).onexists(whatToWatch, ({
+    element: element
+  }) => requestAnimationFrame($gVhhF$depictaiutilishared.catchify(() => resizeObserver.observe(element))));
+  $gVhhF$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
+  return [width, height];
+}
+const $a33065cfed827fc0$var$backupSizeSignal = /*@__PURE__*/$gVhhF$solidjs.createSignal();
+const $a33065cfed827fc0$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
+function $a33065cfed827fc0$export$e4b984597b71e989(props) {
+  const context = $84798aaa863a4909$export$8d0c4fdbb05a2f2e();
+  if (context && !context[$a33065cfed827fc0$export$d7b7ab832c20e2f4])
+    // create a signal that's the same for all items in this listing
+    context[$a33065cfed827fc0$export$d7b7ab832c20e2f4] = $gVhhF$solidjs.createSignal();
+  const [currentImageSize, setCurrentImageSize] = context?.[$a33065cfed827fc0$export$d7b7ab832c20e2f4] || $a33065cfed827fc0$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
+  const [mostPrevalentAspectRatio] = context ?
+  // If the context exists we have to create the signal here as getting it here would be too late when it's created by ShopifyResponsiveImg below
+  context[(0, $19950faaac026e09$export$6066eb417ed2e9f7)] ||= $gVhhF$solidjs.createSignal() : [];
+  const container = $93304d59a9747aa6$export$94026ee33dbabc26({
+    // Write getters manually instead of using JSX, so we can do more complex logic in the aspectRatio getter without increasing bundle size
+    get class() {
+      return props.class;
+    },
+    get aspectRatio() {
+      if (props.autoAdjustAspectRatio) {
+        const targetRatio = mostPrevalentAspectRatio?.();
+        if (targetRatio != undefined) return `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, ${targetRatio})`;
+      }
+      return props.aspectRatio;
+    }
+  });
+  const owner = $gVhhF$solidjs.getOwner();
+  let createdSizeAccessor = false;
+  let wasCleanedUp = false;
+  $gVhhF$solidjs.createEffect(() => {
+    if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
+    // ensure we always have a size accessor
+    // what this whole thing does is set the sizes attribute to the actual size of one of the existing image containers, therefore the value doesn't have to manually be specified
+    createdSizeAccessor = true;
+    setCurrentImageSize(() => $gVhhF$solidjs.runWithOwner(owner, () => $128302ab61dab8f1$export$54c6d6ff54e72743(container)));
+  });
+  $gVhhF$solidjs.onCleanup(() => {
+    wasCleanedUp = true; // important to set this before the function call below and always, so the dead effects don't create dead size accessors
+    if (!createdSizeAccessor) return;
+    $gVhhF$depictaiutilishared.queueMacroTask(() => setCurrentImageSize()); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
+  });
+
+  $gVhhF$solidjsweb.insert(container, $gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), $gVhhF$solidjsweb.mergeProps({
+    size: () => currentImageSize()?.[0]?.() || 0,
+    sizeHeight: () => currentImageSize()?.[1]?.() || 0,
+    get src() {
+      return props.src;
+    }
+  }, () => props.imgProps, {
+    get style() {
+      return props.imgProps?.style;
+    }
+  })));
+  return container;
+}
+const $d212a67662c5cf38$var$customUrls = (url, width) => {
+  if (url?.startsWith?.("https://cdn.shopify.com"))
+    // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
+    // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
+    return $19950faaac026e09$export$1d6267828870adda(url, width);
+  // Use cloudflare image resizer instead of img.depict.ai because it's a lot faster (and also auto-chooses other formats if webp is not supported)
+  return `https://app.depict.ai/cdn-cgi/image/width=${width},format=auto/${url}`;
+};
+function $d212a67662c5cf38$export$9d4a4b669b1929ab(props) {
+  return $gVhhF$solidjsweb.createComponent((0, $a33065cfed827fc0$export$e4b984597b71e989), $gVhhF$solidjsweb.mergeProps(props, {
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customUrls: $d212a67662c5cf38$var$customUrls
+      };
+    }
+  }));
+}
+function $d212a67662c5cf38$export$140423fa4bfb6d63(props) {
+  return $gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), $gVhhF$solidjsweb.mergeProps(props, {
+    customUrls: $d212a67662c5cf38$var$customUrls
+  }));
+}
+
+// Value first so shopify merchants can set (extra) display transformers in the shopify app
+// Calling these functions normally doesn't do anything, but our shopify app respects them
+// Them being here is value first too because this can be easily imported in the product card editor
+let $606c221d98ba4d92$var$extraDisplayTransformers;
+const $606c221d98ba4d92$export$b2d94be4f02525b2 = () => $606c221d98ba4d92$var$extraDisplayTransformers;
+const $606c221d98ba4d92$export$f98b8d5ea7207a1 = displayTransformers => $606c221d98ba4d92$var$extraDisplayTransformers = displayTransformers;
+function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
+  const signal = $gVhhF$solidjs.createSignal(false);
+  $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
+    matches: matches
+  }) => signal[1](matches)).remove);
+  return signal[0];
+}
+function $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_) {
+  const size_active = $gVhhF$solidjs.createMemo(() => cols_at_size_().map(([n_cols, min_width, max_width]) => {
+    const media_query = $gVhhF$depictaiutilishared.layout_media_query_header(min_width, max_width).replaceAll("@media", "");
+    const matches = $b54e6192d0caa293$export$d9f36cf74e24d595(media_query);
+    return [matches, n_cols];
+  }));
+  const n_cols_currently_showing = $gVhhF$solidjs.createMemo(() => {
+    try {
+      const [, n_cols_currently_showing] = size_active().find(([media_query]) => media_query());
+      return n_cols_currently_showing;
+    } catch (e) {
+      $gVhhF$depictaiutilishared.dwarn("No active size found in columnsAtSize - can't render content blocks or looks");
+      return null;
+    }
+  });
+  return n_cols_currently_showing;
+}
+
+// Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
+class $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 extends Error {}
+class $7dd1edb2ee2b43ad$export$aa14a9f43128f61f extends $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 {
+  constructor(templateError) {
+    super("Uncaught error in product card template", {
+      cause: templateError
+    });
+  }
+}
+var $edafe91daf3091d7$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div><!$><!/><!$><!/>`);
+const $edafe91daf3091d7$var$ExtraInfoContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
+function $edafe91daf3091d7$export$240ecf5363d76c0f(props) {
+  return $gVhhF$solidjsweb.createComponent($edafe91daf3091d7$var$ExtraInfoContext.Provider, {
+    get value() {
+      return props.getContext_;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
+  const getContextFunction = $gVhhF$solidjs.useContext($edafe91daf3091d7$var$ExtraInfoContext);
+  return $gVhhF$solidjs.ErrorBoundary({
+    fallback(err, retry) {
+      const {
+        message_: message_,
+        severity_: severity_
+      } = props;
+      let message = message_;
+      if (err instanceof (0, $7dd1edb2ee2b43ad$export$aa14a9f43128f61f)) {
+        console.error(err.cause);
+        message = `${message}: ${err.message}`;
+      } else $gVhhF$depictaiutilishared.report([err, message_], severity_, getContextFunction?.());
+      return (() => {
+        var _el$ = $gVhhF$solidjsweb.getNextElement($edafe91daf3091d7$var$_tmpl$),
+          _el$2 = _el$.firstChild,
+          [_el$3, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$2.nextSibling),
+          _el$4 = _el$3.nextSibling,
+          [_el$5, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling);
+        $gVhhF$solidjsweb.insert(_el$, message, _el$3, _co$);
+        $gVhhF$solidjsweb.insert(_el$, () => props.on_error_?.(retry), _el$5, _co$2);
+        $gVhhF$solidjsweb.effect(_$p => $gVhhF$solidjsweb.classList(_el$, Object.fromEntries(props.class_list_?.map(c => [c, true]) || []), _$p));
+        return _el$;
+      })();
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+var $75777da1687ba3f6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
+  $75777da1687ba3f6$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<style type=text/css>`);
+const $75777da1687ba3f6$export$c500183c31c2b22e = "--spans-columns";
+function $75777da1687ba3f6$export$ab6b147eec64fea5(props) {
+  const container_class = "x" + $gVhhF$solidjs.createUniqueId();
+  const container_element_ = (() => {
+    var _el$ = $gVhhF$solidjsweb.getNextElement($75777da1687ba3f6$var$_tmpl$);
+    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => props.element_attributes, {
+      "classList": {
+        [container_class]: true
+      }
+    }), false, true);
+    $gVhhF$solidjsweb.insert(_el$, () => props.children);
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$;
+  })(); // Don't want this in the error boundary below, it should only be for the actual layouting
+  return $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
+    message_: "Failed calculating css grid layout",
+    severity_: "error",
+    get children() {
+      return $75777da1687ba3f6$export$e2f22da34aaf310a(props, container_element_, false, container_class);
+    }
+  });
+}
+function $75777da1687ba3f6$export$e2f22da34aaf310a(props, container_element, insert_after_container = false, container_class) {
+  if (!container_class) {
+    // only try to add if it wasn't provided, so that we have a code path without classList when doing SSR
+    container_class = $gVhhF$depictaiutilishared.make_random_classname();
+    container_element.classList.add(container_class);
+  }
+  const container_selector = `.depict .${container_class}`; // class so ppl can have id if needed
+  const col_styling = $gVhhF$solidjs.createMemo(() => $75777da1687ba3f6$var$generate_media_queried_declarations({
+    container_selector_: container_selector,
+    default_grid_spacing_text: props.grid_spacing,
+    cols_at_size_: props.cols_at_size,
+    override_vertical_spacing_: props.override_vertical_spacing,
+    top_row_shortened_by_: props.top_row_shortened_by_()
+  }));
+  const base_styling = $gVhhF$solidjs.createMemo(() => {
+    return `${container_selector}{display:grid;}`;
+  });
+  const get_styling = $gVhhF$solidjs.createMemo(() => base_styling() + col_styling());
+  const style_element = (() => {
+    var _el$2 = $gVhhF$solidjsweb.getNextElement($75777da1687ba3f6$var$_tmpl$2);
+    $gVhhF$solidjsweb.insert(_el$2, get_styling);
+    return _el$2;
+  })(); // need to create this after set_styling has been called or else there will be no styling in the SSR'd output
+  if (insert_after_container) container_element.after(style_element);
+  return [container_element, style_element];
+}
+function $75777da1687ba3f6$var$generate_media_queried_declarations({
+  container_selector_: container_selector_,
+  default_grid_spacing_text: default_grid_spacing_text,
+  cols_at_size_: cols_at_size_,
+  override_vertical_spacing_: override_vertical_spacing_,
+  top_row_shortened_by_: top_row_shortened_by_
+}) {
+  return cols_at_size_.map(options => {
+    const [n_cols, min, max, grid_spacing_for_size] = options;
+    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    // See comment in else block below
+    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:${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(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(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:${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_);
+    }
+    const media_query_body = `${container_selector_}{${spacing_styling}grid-template-columns:repeat(${n_cols},minmax(0,1fr));}`;
+    return `${$gVhhF$depictaiutilishared.layout_media_query_header(min, max)}{${media_query_body}}${additional_styling}`;
+  }).join("");
+}
+function $75777da1687ba3f6$var$can_use_gap_for_unit(spacing) {
+  const trimmed_spacing = spacing.trim();
+  return !trimmed_spacing.includes("%");
+}
+function $75777da1687ba3f6$var$strip_percent_unit(css_value) {
+  return css_value.replaceAll("%", "");
+}
+var $d92f338ba8f9da9b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=content-block-wrapper>`);
+function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
+  content_blocks_: incoming_content_blocks,
+  cols_at_size_: cols_at_size_,
+  set_top_row_shortened_by_: set_top_row_shortened_by_
+}) {
+  // these are by row
+  const [content_blocks, set_content_blocks] = $gVhhF$solidjsstore.createStore([]);
+  const n_cols_currently_showing_ = $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_);
+  $gVhhF$solidjs.createEffect(() => {
+    const incoming_value = incoming_content_blocks();
+    if (!incoming_value) {
+      set_content_blocks([]);
+      return;
+    }
+    set_content_blocks($gVhhF$solidjsstore.reconcile(incoming_value, {
+      key: "content"
+    })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
+  });
+
+  const get_wrapped_blocks_ = $d92f338ba8f9da9b$var$wrap_blocks_in_div(content_blocks, n_cols_currently_showing_);
+  $gVhhF$solidjs.createComputed(() => {
     // Update our styling if a content block forces some items that should be in the top row into a lower one, so we can generate margin-top declarations for them
     const top_row_block = get_wrapped_blocks_()[0];
     const blocks_in_top_row_taken = top_row_block?.span_columns;
@@ -656,1137 +1068,752 @@ function $a0e53f99354809d9$export$6649caad96ef8870(props) {
           }).constructor_plugin, ...(fading_plugin ? [fading_plugin.constructor_plugin] : [])],
           mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_, entries => setIntersectionEntries(entries)]
         });
-        $gVhhF$solidjsweb.insert(slider.insert_here, () => $gVhhF$solidjsweb.createComponent($a0e53f99354809d9$var$SlidableContext.Provider, {
-          value: {
-            slider_: slider,
-            intersectionEntries_: intersectionEntries_
-          },
-          get children() {
-            return props.children;
-          }
-        }));
-        $gVhhF$solidjs.onCleanup(() => slider.observer.disconnect());
-        slider_ref_?.(slider);
-        return slider.container;
-      })();
-    }
-  });
-}
-function $a0e53f99354809d9$export$eaa625fb39439e37() {
-  return $gVhhF$solidjs.useContext($a0e53f99354809d9$var$SlidableContext);
-}
-
-/**
- * Gets product_id (the thing we key the rendering on) from a display
- */
-function $a5871dacf261adf8$export$548d053aba053d79(display) {
-  if ("variant_index" in display) {
-    const actual_display = display.variant_displays[display.variant_index];
-    return actual_display.product_id;
-  }
-  if ("listing_id" in display) return display.listing_id;
-  return display.product_id;
-}
-function $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(elements) {
-  // FYI this probably doesn't work on hugely deep nestings or large amount of elements
-  return $gVhhF$solidjs.createMemo(() => $5f7d55c710fd1bc2$var$unwrapping_helper(elements));
-}
-function $5f7d55c710fd1bc2$var$unwrapping_helper(elements) {
-  const result = [];
-  if (Array.isArray(elements)) for (let i = 0; i < elements.length; i++) {
-    const element = elements[i];
-    result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(element));
-  } else if (typeof elements == "function") result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
-  return result;
-}
-const $129b9b9c010039d0$var$ProductCardIndexContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
-function $129b9b9c010039d0$export$11354f017ddc9790(props) {
-  return $gVhhF$solidjsweb.createComponent($129b9b9c010039d0$var$ProductCardIndexContext.Provider, {
-    get value() {
-      return props.index_;
-    },
-    get children() {
-      return props.children;
-    }
-  });
-}
-function $129b9b9c010039d0$export$e3faf4d95300054f() {
-  return $gVhhF$solidjs.useContext($129b9b9c010039d0$var$ProductCardIndexContext);
-}
-
-/**
- * This is a function that will safely clone an object that may contain promises.
- * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.
- * @param obj Anything to clone
- */
-function $ac946c6b782bb900$export$83bb9af5671e1dbe(obj) {
-  if (obj instanceof Promise) return obj;
-  // Extract all promises, keep a map of them, and then re-apply them to both the original object and the target object after cloning
-  const seen = new Set();
-  const keyStack = [[]];
-  const valueStack = [obj];
-  const promiseLocationStack = [];
-  while (valueStack.length) {
-    const value = valueStack.pop();
-    const keyPath = keyStack.pop();
-    // Promises can only be in objects and we don't need to check for objects we've already seen (like in circular references)
-    if (typeof value !== "object" || value === null || seen.has(value)) continue;
-    seen.add(value);
-    if (Array.isArray(value)) {
-      for (let i = 0; i < value.length; i++) {
-        const ourValue = value[i];
-        const valuesKeyPath = [...keyPath, i];
-        if (ourValue instanceof Promise) {
-          promiseLocationStack.push([valuesKeyPath, ourValue]);
-          delete value[i]; // This will leave a hole in the array, but it's fine since we'll put it back soon
-          // This way both the indexes will be correct when putting the value back and our for loop doesn't get messed up
-        } else {
-          keyStack.push(valuesKeyPath);
-          valueStack.push(ourValue);
-        }
-      }
-      continue;
-    }
-    for (const innerKey in value) {
-      const ourValue = value[innerKey];
-      const valuesKeyPath = [...keyPath, innerKey];
-      if (ourValue instanceof Promise) {
-        promiseLocationStack.push([valuesKeyPath, ourValue]);
-        delete value[innerKey];
-      } else {
-        keyStack.push(valuesKeyPath);
-        valueStack.push(ourValue);
-      }
-    }
-  }
-  let structuredClonedObject;
-  let error;
-  try {
-    structuredClonedObject = structuredClone(obj);
-  } catch (e) {
-    // We still need to put back the promises in the original object, even if we threw an error
-    error = e;
-  }
-  // Put back the promises in both the original object and the cloned object
-  while (promiseLocationStack.length) {
-    const [keyPath, promise] = promiseLocationStack.pop();
-    let targetInClone = structuredClonedObject;
-    let targetInOriginal = obj;
-    for (let i = 0; i < keyPath.length - 1; i++) {
-      if (!error) targetInClone = targetInClone[keyPath[i]];
-      targetInOriginal = targetInOriginal[keyPath[i]];
-    }
-    if (!error) targetInClone[keyPath[keyPath.length - 1]] = promise;
-    targetInOriginal[keyPath[keyPath.length - 1]] = promise;
-  }
-  if (error) throw error;
-  return structuredClonedObject;
-}
-let $a73063cc642f3e5f$var$printedCloneError = false;
-function $a73063cc642f3e5f$export$7f8bd308237ab5a5(get_displays_) {
-  const displays_by_key_ = $gVhhF$solidjs.createMemo(() => {
-    const displays = get_displays_();
-    // We key by product_id because that's what can be used to uniquely identify products
-    // This way <For> can optimize the rendering
-    const map = new Map();
-    for (let i = 0; i < displays.length; i++) {
-      const display = displays[i];
-      const product_id = $a5871dacf261adf8$export$548d053aba053d79(display);
-      map.set(product_id, display);
-    }
-    return map;
-  });
-  return displays_by_key_;
-}
-const $a73063cc642f3e5f$var$result_ids = ["search_result_id", "product_listing_result_id", "recommendation_id"];
-function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
-  displays_by_key_: displays_by_key_,
-  product_card_template_: product_card_template_,
-  do_per_elements_: do_per_elements_,
-  content_blocks_: content_blocks_
-}) {
-  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.For), {
-    get each() {
-      return [...displays_by_key_().keys()];
-    },
-    children: (product_id, index) => {
-      const owner = $gVhhF$solidjs.getOwner();
-      const possible_content_block = $gVhhF$solidjs.createMemo(() => content_blocks_?.()?.()?.[index()]);
-      const display_accessor = $gVhhF$solidjs.createMemo(prev => {
-        const new_display = displays_by_key_().get(product_id);
-        if (prev && $a73063cc642f3e5f$var$deep_equal(prev, new_display))
-          // If displays are identical, they haven't changed due to merchant/market changing OR we made a new query and the displays are the same. Return the old display (same object reference) to avoid re-rendering.
-          // This doesn't work if people mutate the displays from within the template but we hope they don't
-          // (We can't know if the display changing is due to merchant/market changing or a new query otherwise and don't want to run into https://gitlab.com/depict-ai/depict.ai/-/merge_requests/6890/diffs)
-          return prev;
-        return new_display;
-      });
-      const [product_card_resource] = $gVhhF$solidjs.createResource(display_accessor,
-      // re-render when the reference to the display object changes
-      display => {
-        // It's easy for merchants to accidentally mutate the display or some sub-object thereof
-        // We had a case on singular where they popped an image url and due to use caching after some time there was no image
-        // Attempt cloning the displays if possible (99.9% of the cases probably) and if not, just use the original display
-        try {
-          // Use promiseSafeStructuredClone so that:
-          // 1. When fetching for example prices from an API, one can start that API request
-          // 2. Add the promise to the display
-          // 3. Already render the product card with placeholders for prices while the price loads
-          // 4. When the price loads, re-render the display with the new price
-          display = $ac946c6b782bb900$export$83bb9af5671e1dbe(display);
-        } catch (e) {
-          if (!$a73063cc642f3e5f$var$printedCloneError) {
-            $a73063cc642f3e5f$var$printedCloneError = true;
-            $gVhhF$depictaiutilishared.dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
-          }
-        }
-        let renderingResult;
-        // Wrap the product card in a ProductCardIndexProvider so that the index is available to the product card
-        // This is wo we can do intelligent image loading in ShopifyContainedImage without shopify devs having to pass in the index
-        // We don't care about the return value of ProductCardIndexProvider because our rendering result might be a promise which solid doesn't support until it has gone through createResource
-        $129b9b9c010039d0$export$11354f017ddc9790({
-          index_: index,
-          get children() {
-            // This is the key - the functions called inside of the children getter of the provider are the one that have the context defined in their solid-internal Owner
-            renderingResult = product_card_template_(display, {
-              set_on_index_change: fn => $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.createEffect(() => fn(index())))
-            });
-            return undefined; // just to satisfy the typing
-          }
-        });
-        // renderingResult is guaranteed to be defined here (if rendering returned something) because the children getter of ProductCardIndexProvider is called synchronously (createRenderEffect is used solid-internally)
-        return renderingResult;
-      });
-      const node_accessor = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(product_card_resource);
-      $gVhhF$solidjs.createEffect(() => {
-        const product_card_nodes = node_accessor();
-        const display = display_accessor();
-        const elements = [];
-        for (let i = 0; i < product_card_nodes.length; i++) {
-          const element = product_card_nodes[i];
-          if (!(element instanceof Element)) continue;
-          elements.push(element);
-          // Add tracking ids
-          if (!(element instanceof HTMLElement)) continue; // Apparently only HTMLElements have dataset
-          for (let i = 0; i < $a73063cc642f3e5f$var$result_ids.length; i++) {
-            const id = $a73063cc642f3e5f$var$result_ids[i];
-            const value = display[id];
-            if (value) Object.assign(element.dataset, $gVhhF$depictaiutilishared.camelCasifyObject({
-              [id]: value
-            }));
+        $gVhhF$solidjsweb.insert(slider.insert_here, () => $gVhhF$solidjsweb.createComponent($a0e53f99354809d9$var$SlidableContext.Provider, {
+          value: {
+            slider_: slider,
+            intersectionEntries_: intersectionEntries_
+          },
+          get children() {
+            return props.children;
           }
-        }
-        do_per_elements_?.(elements, index);
-      });
-      return [
-      // Show content block before product card, so it's *at* that index
-      possible_content_block, node_accessor // Don't return product_card_resource as calling it could be creating the nodes which would mean we'd be double-creating the nodes,
-      ]; // Regarding the as unknown shenanigans: https://github.com/solidjs/solid/releases/tag/v1.7.0
+        }));
+        $gVhhF$solidjs.onCleanup(() => slider.observer.disconnect());
+        slider_ref_?.(slider);
+        return slider.container;
+      })();
     }
   });
 }
-// source: https://medium.com/@pancemarko/deep-equality-in-javascript-determining-if-two-objects-are-equal-bf98cf47e934
-// deeply diffs two objects
-// Modified by chatGPT to not be recursive, since stiga was getting a stack overflow just due to the size of their data
-// Modified futher to bias towards saying objects are equal non-primitive objects differ
-function $a73063cc642f3e5f$var$deep_equal(obj1, obj2) {
-  const stack = [[obj1, obj2]];
-  while (stack.length) {
-    const [currentObj1, currentObj2] = stack.pop();
-    if (currentObj1 === currentObj2) continue;
-    if (Array.isArray(currentObj1) && Array.isArray(currentObj2)) {
-      if (currentObj1.length !== currentObj2.length) return false;
-      for (let i = 0; i < currentObj1.length; i++) stack.push([currentObj1[i], currentObj2[i]]);
-    } else if (typeof currentObj1 === "object" && typeof currentObj2 === "object" && currentObj1 !== null && currentObj2 !== null) {
-      if (Array.isArray(currentObj1) || Array.isArray(currentObj2)) return false;
-      const keys1 = Object.keys(currentObj1);
-      const keys2 = Object.keys(currentObj2);
-      if (keys1.length !== keys2.length || !keys1.every(key => keys2.includes(key))) return false;
-      for (let key in currentObj1) {
-        if ($a73063cc642f3e5f$var$result_ids.includes(key)) continue; // ignore comparing values for keys we know are changing with every request
-        stack.push([currentObj1[key], currentObj2[key]]);
-      }
-    } else if (typeof currentObj1 !== "function" && typeof currentObj2 !== "function")
-      // Claim that all functions are equal, since the only way a function ends up here is because someone added it in the displayTransformer and that shouldn't force us to re-render, right?
-      return false;
+function $a0e53f99354809d9$export$eaa625fb39439e37() {
+  return $gVhhF$solidjs.useContext($a0e53f99354809d9$var$SlidableContext);
+}
+
+/**
+ * Gets product_id (the thing we key the rendering on) from a display
+ */
+function $a5871dacf261adf8$export$548d053aba053d79(display) {
+  if ("variant_index" in display) {
+    const actual_display = display.variant_displays[display.variant_index];
+    return actual_display.product_id;
   }
-  return true;
+  if ("listing_id" in display) return display.listing_id;
+  return display.product_id;
 }
-const $67155e1aeb7073f6$export$f223d69ed12f5fb7 = /*@__PURE__*/$gVhhF$solidjs.createContext();
-function $67155e1aeb7073f6$export$4a14175d33d81a96({
-  displays_by_key_: displays_by_key_,
-  product_card_template_: product_card_template_,
-  content_blocks_: content_blocks_,
-  alwaysObserveCards_: alwaysObserveCards_
-}) {
-  const targetToIndexMap_ = new Map();
-  const indexToTargetMap_ = new Map();
-  const [listenersForIntersecting, setListenersForIntersecting] = $gVhhF$solidjs.createSignal(0);
-  const [currentlyIntersecting, setCurrentlyIntersecting] = $gVhhF$solidjs.createSignal(new Set(), {
-    equals: false
-  });
-  if (0, $gVhhF$solidjsweb.isServer) return {
-    renderedDisplays_: $a73063cc642f3e5f$export$43f0fb951fcb0c54({
-      displays_by_key_: displays_by_key_,
-      product_card_template_: product_card_template_,
-      content_blocks_: content_blocks_
-    }),
-    indexToTargetMap_: indexToTargetMap_,
-    currentlyIntersecting: currentlyIntersecting
-  };
-  // The following sets up an intersection observer to determine which results are in the viewport, used for the ScrollStatus indicator, knowing when to load more and any other consumer of the useProductCardIsVisible hook.
-  const shouldObserve = $gVhhF$solidjs.createMemo(() => alwaysObserveCards_ || listenersForIntersecting() > 0);
-  const intersection_observer = new IntersectionObserver($gVhhF$depictaiutilishared.catchify(records => {
-    const intersectingValue = currentlyIntersecting();
-    for (let i = 0; i < records.length; i++) {
-      const record = records[i];
-      const {
-        target: target,
-        intersectionRatio: intersectionRatio
-      } = record;
-      const index_of_target = targetToIndexMap_.get(target);
-      if (index_of_target == undefined) return; // It seems like it can happen that we get IntersectionObserverEntries after the onCleanup function for a recommendation card has run, in Firefox. Probably a bug in Firefox? If I understood the bug correctly, this is a workaround.
-      const is_in_set = intersectingValue.has(index_of_target);
-      if (intersectionRatio > 0) {
-        if (!is_in_set) intersectingValue.add(index_of_target);
-      } else if (is_in_set) intersectingValue.delete(index_of_target);
-    }
-    setCurrentlyIntersecting(intersectingValue);
-  }, "renderDisplays IO failed"));
-  const renderedDisplays_ = $gVhhF$solidjsweb.createComponent($67155e1aeb7073f6$export$f223d69ed12f5fb7.Provider, {
-    value: {
-      currentlyIntersecting_: currentlyIntersecting,
-      setIsListening_: setListenersForIntersecting
-    },
-    get children() {
-      return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
-        displays_by_key_: displays_by_key_,
-        product_card_template_: product_card_template_,
-        content_blocks_: content_blocks_,
-        do_per_elements_: (elements, index_accessor) =>
-        // Adds/removes elements from the "results in viewport" intersection observer above
-        $gVhhF$solidjs.createEffect(() => {
-          if (!shouldObserve()) return;
-          const display_index = index_accessor();
-          // Nested createEffect because we only want to re-run this when the index changes (or we should/shouldn't observe)
-          // We need to save in a map which index the elements of this template are so that we can know that in the IntersectionObserver callback
-          for (let i = 0; i < elements.length; i++) {
-            const element = elements[i];
-            targetToIndexMap_.set(element, display_index);
-            intersection_observer.observe(element);
-            $gVhhF$solidjs.onCleanup(() => {
-              intersection_observer.unobserve(element);
-              targetToIndexMap_.delete(element);
-              const intersecting = $gVhhF$solidjs.untrack(currentlyIntersecting);
-              const wasDeleted = intersecting.delete(display_index);
-              if (wasDeleted) setCurrentlyIntersecting(intersecting);
-            });
-          }
-          indexToTargetMap_.set(display_index, elements);
-          $gVhhF$solidjs.onCleanup(() => indexToTargetMap_.delete(display_index));
-        })
-      });
-    }
-  });
-  return {
-    renderedDisplays_: renderedDisplays_,
-    indexToTargetMap_: indexToTargetMap_,
-    currentlyIntersecting: currentlyIntersecting
-  };
+function $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(elements) {
+  // FYI this probably doesn't work on hugely deep nestings or large amount of elements
+  return $gVhhF$solidjs.createMemo(() => $5f7d55c710fd1bc2$var$unwrapping_helper(elements));
 }
-function $67155e1aeb7073f6$export$80bb7300ce6a8be3() {
-  const {
-    setIsListening_: setIsListening_,
-    currentlyIntersecting_: currentlyIntersecting_
-  } = $gVhhF$solidjs.useContext($67155e1aeb7073f6$export$f223d69ed12f5fb7) || {};
-  const getOurIndex = $129b9b9c010039d0$export$e3faf4d95300054f();
-  const isVisible = $gVhhF$solidjs.createMemo(() => currentlyIntersecting_?.().has(getOurIndex?.()));
-  setIsListening_?.(prev => prev + 1);
-  $gVhhF$solidjs.onCleanup(() => setIsListening_?.(prev => prev + 1));
-  return isVisible;
+function $5f7d55c710fd1bc2$var$unwrapping_helper(elements) {
+  const result = [];
+  if (Array.isArray(elements)) for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+    result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(element));
+  } else if (typeof elements == "function") result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
+  return result;
 }
-function $4b455f60dadde8b8$export$5bad61ecde080b1f(...params) {
-  const {
-    collapse: collapse,
-    expand: expand,
-    ExpandingContainer: ExpandingContainer
-  } = $gVhhF$depictaiutilishared.useExpandingContainer(...params);
-  return {
-    collapse: collapse,
-    expand: expand,
-    ExpandingContainer: ({
-      children: children
-    }) => {
-      // get reactive signals/solid's jsx elements into `ExpandingContainer`
-      const fake_div = document.createElement("div");
-      const outer_expanding = $gVhhF$solidjsweb.createComponent(ExpandingContainer, {
-        children: [fake_div]
-      });
-      const parent = fake_div.parentElement;
-      fake_div.remove();
-      $gVhhF$solidjsweb.insert(parent, children);
-      return outer_expanding;
+
+/**
+ * This is a function that will safely clone an object that may contain promises.
+ * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.
+ * @param obj Anything to clone
+ */
+function $ac946c6b782bb900$export$83bb9af5671e1dbe(obj) {
+  if (obj instanceof Promise) return obj;
+  // Extract all promises, keep a map of them, and then re-apply them to both the original object and the target object after cloning
+  const seen = new Set();
+  const keyStack = [[]];
+  const valueStack = [obj];
+  const promiseLocationStack = [];
+  while (valueStack.length) {
+    const value = valueStack.pop();
+    const keyPath = keyStack.pop();
+    // Promises can only be in objects and we don't need to check for objects we've already seen (like in circular references)
+    if (typeof value !== "object" || value === null || seen.has(value)) continue;
+    seen.add(value);
+    if (Array.isArray(value)) {
+      for (let i = 0; i < value.length; i++) {
+        const ourValue = value[i];
+        const valuesKeyPath = [...keyPath, i];
+        if (ourValue instanceof Promise) {
+          promiseLocationStack.push([valuesKeyPath, ourValue]);
+          delete value[i]; // This will leave a hole in the array, but it's fine since we'll put it back soon
+          // This way both the indexes will be correct when putting the value back and our for loop doesn't get messed up
+        } else {
+          keyStack.push(valuesKeyPath);
+          valueStack.push(ourValue);
+        }
+      }
+      continue;
     }
-  };
-}
-const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
-  const cols_at_size = [];
-  for (let i = 0; i < sorted_cols_at_size.length; i++) {
-    const [nb_cols, width] = sorted_cols_at_size[i];
-    const next_width = sorted_cols_at_size[i + 1]?.[1];
-    const max_width = i === 0 ? "" : `${width}px`;
-    const min_width = next_width !== undefined ? `${next_width + 1}px` : "";
-    const col_at_size = [nb_cols, min_width, max_width];
-    cols_at_size.push(col_at_size);
+    for (const innerKey in value) {
+      const ourValue = value[innerKey];
+      const valuesKeyPath = [...keyPath, innerKey];
+      if (ourValue instanceof Promise) {
+        promiseLocationStack.push([valuesKeyPath, ourValue]);
+        delete value[innerKey];
+      } else {
+        keyStack.push(valuesKeyPath);
+        valueStack.push(ourValue);
+      }
+    }
+  }
+  let structuredClonedObject;
+  let error;
+  try {
+    structuredClonedObject = structuredClone(obj);
+  } catch (e) {
+    // We still need to put back the promises in the original object, even if we threw an error
+    error = e;
   }
-  return cols_at_size;
-};
-const $4e04be41243c3d80$export$6daf8749b65a1b77 = cols_at_size => {
-  // Check that every element is an array
-  const are_arrays = cols_at_size?.every?.(element => Array.isArray(element));
-  if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
-  // Check width duplicates
-  const widths = cols_at_size.map(([_, width]) => width);
-  const widths_set = new Set(widths);
-  if (widths_set.size < widths.length) throw new Error("There are duplicate widths in cols_at_size");
-  if (cols_at_size.length === 1) {
-    const [nb_cols, width] = cols_at_size[0];
-    const max_width = width !== undefined ? `${width}px` : "";
-    return [[nb_cols, "", max_width]];
+  // Put back the promises in both the original object and the cloned object
+  while (promiseLocationStack.length) {
+    const [keyPath, promise] = promiseLocationStack.pop();
+    let targetInClone = structuredClonedObject;
+    let targetInOriginal = obj;
+    for (let i = 0; i < keyPath.length - 1; i++) {
+      if (!error) targetInClone = targetInClone[keyPath[i]];
+      targetInOriginal = targetInOriginal[keyPath[i]];
+    }
+    if (!error) targetInClone[keyPath[keyPath.length - 1]] = promise;
+    targetInOriginal[keyPath[keyPath.length - 1]] = promise;
   }
-  // Sort widths in ascending order
-  const sorted_cols_at_size = [...cols_at_size].sort((a, b) => {
-    const [_b, width_A] = a;
-    const [_a, width_b] = b;
-    if (width_A === undefined) return -1;
-    if (width_b === undefined) return 1;
-    return width_b - width_A;
-  });
-  return $4e04be41243c3d80$var$transform_elements(sorted_cols_at_size);
-};
-function $fc23d7668ae0011d$export$a2cc176055f8f08(what = "grid") {
-  const text = "Please try setting `columnsAtSize`/`gridSpacing` on the `SearchPage`/`CategoryPage` components to change the " + what + " before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
-  return (0, $gVhhF$solidjsweb.isServer) ? {
-    t: `<!-- ${text} -->`
-  } : document.createComment(text);
+  if (error) throw error;
+  return structuredClonedObject;
 }
-const $0caf87eaa19079da$var$defaultCacheKey = /*@__PURE__*/Symbol();
-const $0caf87eaa19079da$var$cachedPlaceholderElements = {};
-const $0caf87eaa19079da$var$renderingCachedPlaceholderElement = {};
-function $0caf87eaa19079da$export$f33414a4df0afd3f({
-  product_card_template_: product_card_template_,
-  num_placeholders_: num_placeholders_,
-  content_blocks_: content_blocks_,
-  placeholderCacheKey_: placeholderCacheKey_
-}) {
-  const [num_to_actually_show, set_num_to_actually_show] = $gVhhF$solidjs.createSignal($gVhhF$solidjs.untrack(num_placeholders_));
-  if (0, $gVhhF$solidjsweb.isServer)
-    // want to render simple placeholders on server, effects don't run there
-    // FIXME when adding proper SSR: also SSR content blocks
-    return $gVhhF$solidjs.createMemo(() => Array.from({
-      length: num_placeholders_()
-    }).map(() => {
-      const template_result = product_card_template_(null, undefined);
-      // @ts-ignore
-      if (typeof template_result?.then !== "function") return template_result;
-    }));
-  $gVhhF$solidjs.createRenderEffect(() => {
-    const existing_num = num_to_actually_show();
-    const to_add = num_placeholders_() - existing_num;
-    if (to_add <= 0) return;
-    // Below comment is from when we used recommendation renderer and manual DOM manipulation for this, but I'm still scared to remove placeholders and mess up scroll restoration, so I'm keeping the way it worked. Otherwise, <Index> could be used which would be far more elegant.
-    // We don't need to remove placeholders, only need to add. The reason for that is that chrome restores the scroll position once all tasks queued as reaction of the "popstate" events have been completed in the task queue. That means that we need to get the placeholders in fast, or we might lose scroll position if the previous site was shorter.
-    // The query id and the amount might update in separate tasks because one comes from href_change_ipns and the other one from another "popstate" listener. Therefore, we need to be able to dynamically add more placeholders. I'm not entirely sure about this anymore though, since we have the scroll position on a per-id basis it might work anyway but THIS WORKS, and I've been working on this bug for 3 hours so let's just keep it this way.
-    // Above comments were from when we added elements in this createRenderEffect. Now I changed it to just increment the number and render them from an <Index> instead, so I can add content blocks better
-    // Functionality should be the same
-    set_num_to_actually_show(existing_num + to_add);
-  });
-  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
-    get each() {
-      return Array.from({
-        length: num_to_actually_show()
-      });
-    },
-    children: (_item, index) => {
-      const possible_content_block = $gVhhF$solidjs.createMemo(() => content_blocks_?.()?.()?.[index]);
-      // Show content block before product card, so it's *at* that index
-      return [possible_content_block, $0caf87eaa19079da$var$Placeholder({
-        product_card_template_: product_card_template_,
-        placeholderCacheKey_: placeholderCacheKey_
-      })]; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+let $a73063cc642f3e5f$var$printedCloneError = false;
+function $a73063cc642f3e5f$export$7f8bd308237ab5a5(get_displays_) {
+  const displays_by_key_ = $gVhhF$solidjs.createMemo(() => {
+    const displays = get_displays_();
+    // We key by product_id because that's what can be used to uniquely identify products
+    // This way <For> can optimize the rendering
+    const map = new Map();
+    for (let i = 0; i < displays.length; i++) {
+      const display = displays[i];
+      const product_id = $a5871dacf261adf8$export$548d053aba053d79(display);
+      map.set(product_id, display);
     }
+    return map;
   });
+  return displays_by_key_;
 }
-/**
- * Get one placeholder element. It will be cloned for each placeholder for ultimate performance even when solid-js isn't rendering the placeholders.
- */
-function $0caf87eaa19079da$var$Placeholder({
+const $a73063cc642f3e5f$var$result_ids = ["search_result_id", "product_listing_result_id", "recommendation_id"];
+function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+  displays_by_key_: displays_by_key_,
   product_card_template_: product_card_template_,
-  placeholderCacheKey_ = $0caf87eaa19079da$var$defaultCacheKey
+  do_per_elements_: do_per_elements_,
+  content_blocks_: content_blocks_
 }) {
-  const get_cloned_placeholders = (element_to_clone = $0caf87eaa19079da$var$cachedPlaceholderElements[placeholderCacheKey_]) => Array.isArray(element_to_clone) ? element_to_clone.map(el => el instanceof Node ? el.cloneNode(true) : el) : element_to_clone;
-  if ($0caf87eaa19079da$var$cachedPlaceholderElements[placeholderCacheKey_]) return get_cloned_placeholders();
-  let dispose_original_copy;
-  const get_unwrapped_element = $gVhhF$solidjs.createRoot(dispose => {
-    dispose_original_copy = dispose;
-    // if product_card_template_ is async and rejects the resource will take care of throwing upwards here in the solid-js error handling system
-    const [resource] = $gVhhF$solidjs.createResource(() => {
-      const rendering_cached_placeholder_element = $0caf87eaa19079da$var$renderingCachedPlaceholderElement[placeholderCacheKey_];
-      if (rendering_cached_placeholder_element) return rendering_cached_placeholder_element;
-      const return_value = product_card_template_(null, undefined);
-      if (typeof return_value === "object" && typeof return_value?.then === "function")
-        // Is Promise or promise-like object
-        $0caf87eaa19079da$var$renderingCachedPlaceholderElement[placeholderCacheKey_] = return_value;
-      return return_value;
-    });
-    return $gVhhF$solidjs.createMemo(() => {
-      if (resource.loading) return () => [];
-      return $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(resource);
-    });
-  });
-  $gVhhF$solidjs.onCleanup(() => {
-    const rendering = $0caf87eaa19079da$var$renderingCachedPlaceholderElement[placeholderCacheKey_];
-    if (rendering) {
-      // If we're still rendering in our separate root, let the rendering finish or other <Placeholder> components waiting for it might get an incomplete result
-      const unset_current_rendering = () => {
-        dispose_original_copy();
-        $0caf87eaa19079da$var$renderingCachedPlaceholderElement[placeholderCacheKey_] = undefined;
-      };
-      rendering?.then(unset_current_rendering, unset_current_rendering);
-    } else
-      // Otherwise, just make sure we've disposed our root
-      dispose_original_copy();
-  });
-  return $gVhhF$solidjs.createMemo(() => {
-    const unwrapped_array = get_unwrapped_element()();
-    if (!unwrapped_array?.length || !unwrapped_array.every(item => item))
-      // Haven't finished rendering yet in case of "async" rendering, so don't freeze the elements yet
-      return;
-    // placeholders have finished rendering, freeze the elements
-    // here we might receive the result of a promise that has already been received, tore down and put into cached_placeholder_element, so don't overwrite that more valid result if it's already set
-    $0caf87eaa19079da$var$cachedPlaceholderElements[placeholderCacheKey_] ||= get_cloned_placeholders(unwrapped_array); // Clone initial return value so that who gave us the elements can't mutate them, which has caused issues before with react
-    $0caf87eaa19079da$var$renderingCachedPlaceholderElement[placeholderCacheKey_] = undefined;
-    dispose_original_copy(); // So that this memo will never re-run and the placeholder rendering function can clean up
-    return get_cloned_placeholders(); // clone, just in case. If we wouldn't, someone could modify the copy in the DOM, and it would affect the cached version
-  });
-}
-
-var $f48d0fbb00835aaa$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
-  $f48d0fbb00835aaa$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<style type=text/css>`);
-function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
-  const container_class = "x" + $gVhhF$solidjs.createUniqueId();
-  const container_element_ = (() => {
-    var _el$ = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$);
-    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => props.element_attributes, {
-      "classList": {
-        [container_class]: true
-      }
-    }), false, true);
-    $gVhhF$solidjsweb.insert(_el$, () => props.children);
-    $gVhhF$solidjsweb.runHydrationEvents();
-    return _el$;
-  })(); // Don't want this in the error boundary below, it should only be for the actual layouting
-  return $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
-    get message_() {
-      return "Failed calculating " + props.layout + " layout";
+  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.For), {
+    get each() {
+      return [...displays_by_key_().keys()];
     },
-    severity_: "error",
-    get children() {
-      return $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element_, false, container_class);
+    children: (product_id, index) => {
+      const owner = $gVhhF$solidjs.getOwner();
+      const possible_content_block = $gVhhF$solidjs.createMemo(() => content_blocks_?.()?.()?.[index()]);
+      const display_accessor = $gVhhF$solidjs.createMemo(prev => {
+        const new_display = displays_by_key_().get(product_id);
+        if (prev && $a73063cc642f3e5f$var$deep_equal(prev, new_display))
+          // If displays are identical, they haven't changed due to merchant/market changing OR we made a new query and the displays are the same. Return the old display (same object reference) to avoid re-rendering.
+          // This doesn't work if people mutate the displays from within the template but we hope they don't
+          // (We can't know if the display changing is due to merchant/market changing or a new query otherwise and don't want to run into https://gitlab.com/depict-ai/depict.ai/-/merge_requests/6890/diffs)
+          return prev;
+        return new_display;
+      });
+      const [product_card_resource] = $gVhhF$solidjs.createResource(display_accessor,
+      // re-render when the reference to the display object changes
+      display => {
+        // It's easy for merchants to accidentally mutate the display or some sub-object thereof
+        // We had a case on singular where they popped an image url and due to use caching after some time there was no image
+        // Attempt cloning the displays if possible (99.9% of the cases probably) and if not, just use the original display
+        try {
+          // Use promiseSafeStructuredClone so that:
+          // 1. When fetching for example prices from an API, one can start that API request
+          // 2. Add the promise to the display
+          // 3. Already render the product card with placeholders for prices while the price loads
+          // 4. When the price loads, re-render the display with the new price
+          display = $ac946c6b782bb900$export$83bb9af5671e1dbe(display);
+        } catch (e) {
+          if (!$a73063cc642f3e5f$var$printedCloneError) {
+            $a73063cc642f3e5f$var$printedCloneError = true;
+            $gVhhF$depictaiutilishared.dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
+          }
+        }
+        let renderingResult;
+        // Wrap the product card in a ProductCardIndexProvider so that the index is available to the product card
+        // This is wo we can do intelligent image loading in ShopifyContainedImage without shopify devs having to pass in the index
+        // We don't care about the return value of ProductCardIndexProvider because our rendering result might be a promise which solid doesn't support until it has gone through createResource
+        $129b9b9c010039d0$export$11354f017ddc9790({
+          index_: index,
+          get children() {
+            // This is the key - the functions called inside of the children getter of the provider are the one that have the context defined in their solid-internal Owner
+            renderingResult = product_card_template_(display, {
+              set_on_index_change: fn => $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.createEffect(() => fn(index())))
+            });
+            return undefined; // just to satisfy the typing
+          }
+        });
+        // renderingResult is guaranteed to be defined here (if rendering returned something) because the children getter of ProductCardIndexProvider is called synchronously (createRenderEffect is used solid-internally)
+        return renderingResult;
+      });
+      const node_accessor = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(product_card_resource);
+      $gVhhF$solidjs.createEffect(() => {
+        const product_card_nodes = node_accessor();
+        const display = display_accessor();
+        const elements = [];
+        for (let i = 0; i < product_card_nodes.length; i++) {
+          const element = product_card_nodes[i];
+          if (!(element instanceof Element)) continue;
+          elements.push(element);
+          // Add tracking ids
+          if (!(element instanceof HTMLElement)) continue; // Apparently only HTMLElements have dataset
+          for (let i = 0; i < $a73063cc642f3e5f$var$result_ids.length; i++) {
+            const id = $a73063cc642f3e5f$var$result_ids[i];
+            const value = display[id];
+            if (value) Object.assign(element.dataset, $gVhhF$depictaiutilishared.camelCasifyObject({
+              [id]: value
+            }));
+          }
+        }
+        do_per_elements_?.(elements, index);
+      });
+      return [
+      // Show content block before product card, so it's *at* that index
+      possible_content_block, node_accessor // Don't return product_card_resource as calling it could be creating the nodes which would mean we'd be double-creating the nodes,
+      ]; // Regarding the as unknown shenanigans: https://github.com/solidjs/solid/releases/tag/v1.7.0
     }
   });
 }
-function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, insert_after_container = false, container_class) {
-  if (!container_class) {
-    // only try to add if it wasn't provided, so that we have a code path without classList when doing SSR
-    container_class = $gVhhF$depictaiutilishared.make_random_classname();
-    container_element.classList.add(container_class);
+// source: https://medium.com/@pancemarko/deep-equality-in-javascript-determining-if-two-objects-are-equal-bf98cf47e934
+// deeply diffs two objects
+// Modified by chatGPT to not be recursive, since stiga was getting a stack overflow just due to the size of their data
+// Modified futher to bias towards saying objects are equal non-primitive objects differ
+function $a73063cc642f3e5f$var$deep_equal(obj1, obj2) {
+  const stack = [[obj1, obj2]];
+  while (stack.length) {
+    const [currentObj1, currentObj2] = stack.pop();
+    if (currentObj1 === currentObj2) continue;
+    if (Array.isArray(currentObj1) && Array.isArray(currentObj2)) {
+      if (currentObj1.length !== currentObj2.length) return false;
+      for (let i = 0; i < currentObj1.length; i++) stack.push([currentObj1[i], currentObj2[i]]);
+    } else if (typeof currentObj1 === "object" && typeof currentObj2 === "object" && currentObj1 !== null && currentObj2 !== null) {
+      if (Array.isArray(currentObj1) || Array.isArray(currentObj2)) return false;
+      const keys1 = Object.keys(currentObj1);
+      const keys2 = Object.keys(currentObj2);
+      if (keys1.length !== keys2.length || !keys1.every(key => keys2.includes(key))) return false;
+      for (let key in currentObj1) {
+        if ($a73063cc642f3e5f$var$result_ids.includes(key)) continue; // ignore comparing values for keys we know are changing with every request
+        stack.push([currentObj1[key], currentObj2[key]]);
+      }
+    } else if (typeof currentObj1 !== "function" && typeof currentObj2 !== "function")
+      // Claim that all functions are equal, since the only way a function ends up here is because someone added it in the displayTransformer and that shouldn't force us to re-render, right?
+      return false;
   }
-  // Copy of Layout from utilishared but using solid-js signals instead of async iterable IPNS
-  const show_all_rows = $gVhhF$solidjs.createMemo(() => props.rows === "all");
-  const rows_or_empty_object = $gVhhF$solidjs.createMemo(() => show_all_rows() ? {} : props.rows);
-  const view_more_button_elements = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52($gVhhF$solidjs.createMemo(() => rows_or_empty_object().button));
-  const view_less_button_elements = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52($gVhhF$solidjs.createMemo(() => rows_or_empty_object().view_less_button));
-  const have_a_view_more_button = $gVhhF$solidjs.createMemo(() => {
-    const button = view_more_button_elements();
-    return !(!button || Array.isArray(button) && !button.length);
-  });
-  const have_a_view_less_button = $gVhhF$solidjs.createMemo(() => {
-    const button = view_less_button_elements();
-    return !(!button || Array.isArray(button) && !button.length);
-  });
-  const [get_styling, set_styling] = $gVhhF$solidjs.createSignal();
-  const selector_beginning = `.depict .${container_class}>`; // class so ppl can have id if needed
-  const [get_children_count, set_children_count] = $gVhhF$solidjs.createSignal(0);
-  const update_children_count = () => (0, $gVhhF$solidjsweb.isServer) ? 20 : set_children_count(container_element.children.length);
-  const col_styling = $gVhhF$solidjs.createMemo(() => $gVhhF$depictaiutilishared.n_col_styling_with_dist(selector_beginning, props.grid_spacing, props.cols_at_size, props.layout, props.override_vertical_spacing));
-  const default_currently_visible_signal = $gVhhF$solidjs.createSignal($gVhhF$solidjs.untrack(() => rows_or_empty_object().start_rows ?? 1)); // Keep this signal here, so it doesn't change when rows_or_empty_object and I think it's to be expected that the "internal default signal" stays the same
-  const rows_visible_signal = $gVhhF$solidjs.createMemo(() => rows_or_empty_object().currently_visible || default_currently_visible_signal);
-  const get_rows_visible = $gVhhF$solidjs.createMemo(() => rows_visible_signal()[0]());
-  const set_rows_visible = $gVhhF$solidjs.createMemo(() => rows_visible_signal()[1]);
-  const view_more_button_class = "m" + $gVhhF$solidjs.createUniqueId();
-  const view_less_button_class = "l" + $gVhhF$solidjs.createUniqueId(); //  https://github.com/solidjs/solid-docs/issues/263#issuecomment-1622388079
-  const view_more_button_container = $gVhhF$solidjs.createMemo(() => have_a_view_more_button() && (() => {
-    var _el$2 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$);
-    $gVhhF$solidjsweb.addEventListener(_el$2, "click", $gVhhF$depictaiutilishared.catchify(() => set_rows_visible()(prev => prev + (rows_or_empty_object().rows_per_click ?? 1))), true);
-    $gVhhF$solidjsweb.className(_el$2, `load-more-container ${view_more_button_class}`);
-    $gVhhF$solidjsweb.insert(_el$2, () => rows_or_empty_object().button);
-    $gVhhF$solidjsweb.runHydrationEvents();
-    return _el$2;
-  })());
-  // We need to have duplicate buttons because which ones is shown depends on the number of rows visible and therefore on the viewport size and therefore on the css media queries
-  const view_less_button_container = $gVhhF$solidjs.createMemo(() => have_a_view_less_button() && (() => {
-    var _el$3 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$);
-    $gVhhF$solidjsweb.addEventListener(_el$3, "click", $gVhhF$depictaiutilishared.catchify(() => set_rows_visible()(() => rows_or_empty_object().start_rows ?? 1)), true);
-    $gVhhF$solidjsweb.className(_el$3, `load-less-container ${view_less_button_class}`);
-    $gVhhF$solidjsweb.insert(_el$3, () => rows_or_empty_object().view_less_button);
-    $gVhhF$solidjsweb.runHydrationEvents();
-    return _el$3;
-  })());
-  const [force_style_update, set_force_style_update] = $gVhhF$solidjs.createSignal("");
-  $gVhhF$solidjs.createComputed(() => {
-    // Make sure we don't have more rows visible than max_rows (this could happen by max_rows being decreased)
-    const rows_visible = get_rows_visible();
-    const max_rows = rows_or_empty_object().max_rows;
-    if (!isNaN(max_rows) && max_rows >= 0 && rows_visible > max_rows) set_rows_visible()(max_rows);
-  });
-  $gVhhF$solidjs.createEffect(() => set_force_style_update(" ")); // force style update after hydration due to https://discord.com/channels/722131463138705510/722167424186843267/1151544212517552168
-  $gVhhF$solidjs.createRenderEffect(() => {
-    // Be careful to only read show_all_rows in here (ofc doesn't apply to nested effects)
-    if (show_all_rows()) {
-      // no view more functionality requested
-      set_styling(() => col_styling);
-      return;
-    }
-    update_children_count();
-    if (!(0, $gVhhF$solidjsweb.isServer)) {
-      const mutation_observer = new MutationObserver($gVhhF$depictaiutilishared.catchify(update_children_count));
-      mutation_observer.observe(container_element, {
-        childList: true
-      });
-      $gVhhF$solidjs.onCleanup(() => mutation_observer.disconnect());
-    }
-    set_styling(
-    // this is needed because solid will think that the memo-accessor is a setter function otherwise
-    () => $gVhhF$solidjs.createMemo(() => {
-      const {
-        rows_per_click: rows_per_click,
-        max_rows = -1,
-        start_rows: start_rows
-      } = rows_or_empty_object();
-      const rows_visible = get_rows_visible();
-      const children_count = get_children_count();
-      return force_style_update() + col_styling() + props.cols_at_size.map(options => {
-        const [recs_per_row, min, max] = options;
-        let should_hide_view_more_button;
-        let visible_recs;
-        if (props.disable_partial_rows) {
-          visible_recs = $gVhhF$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible, children_count, options);
-          const visible_recs_next_show_more = $gVhhF$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible + (rows_per_click || 0),
-          // Should this really be zero when we default rows_per_click to 1?
-          children_count, options);
-          should_hide_view_more_button = visible_recs === visible_recs_next_show_more;
-        } else {
-          visible_recs = $gVhhF$depictaiutilishared.layout_get_total_rec_amount_for_row(rows_visible, options);
-          should_hide_view_more_button = visible_recs >= children_count;
-        }
-        const should_hide_button_final = should_hide_view_more_button || max_rows !== -1 && rows_visible >= max_rows;
-        // I don't really understand the logic for when the view more button gets hidden so IDK if below is correct, but it works how it should for now
-        const should_hide_view_less_button = !should_hide_view_more_button || start_rows == undefined || rows_visible <= start_rows || children_count <= recs_per_row * start_rows;
-        return `${$gVhhF$depictaiutilishared.layout_media_query_header(min, max)}{${selector_beginning}:nth-child(n+${visible_recs + 1}){display:none}${props.layout == "slider" ? `${selector_beginning}:nth-child(n+${visible_recs}){margin-right:0}` : ""}${should_hide_button_final ? `.depict .${view_more_button_class}{display:none!important}` : ``}${should_hide_view_less_button ? `.depict .${view_less_button_class}{display:none!important}` : ``}}`;
-      }).join("");
-    }));
-  });
-  const style_element = (() => {
-    var _el$4 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$2);
-    $gVhhF$solidjsweb.insert(_el$4, get_styling);
-    return _el$4;
-  })(); // need to create this after set_styling has been called or else there will be no styling in the SSR'd output
-  if (insert_after_container) container_element.after(style_element);
-  return [container_element, $gVhhF$solidjsweb.memo(view_more_button_container), $gVhhF$solidjsweb.memo(view_less_button_container), style_element];
+  return true;
 }
-$gVhhF$solidjsweb.delegateEvents(["click"]);
-var $363ce4d1d71041aa$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<h2 class=recs-title>`);
-function $363ce4d1d71041aa$export$d41d19e89346fa2({
-  recommendations_resource_: recommendations_resource_,
+const $67155e1aeb7073f6$export$f223d69ed12f5fb7 = /*@__PURE__*/$gVhhF$solidjs.createContext();
+function $67155e1aeb7073f6$export$4a14175d33d81a96({
+  displays_by_key_: displays_by_key_,
   product_card_template_: product_card_template_,
-  layout_options_: layout_options_,
-  title_: title_,
-  NoResultsFallback_: NoResultsFallback_,
-  placeholderCacheKey_: placeholderCacheKey_
+  content_blocks_: content_blocks_,
+  alwaysObserveCards_: alwaysObserveCards_
 }) {
-  const is_showing_something = $gVhhF$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
-  const title = $gVhhF$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
-  const num_placeholders_ = () => 20;
-  const slider = [$gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-    get when() {
-      return title();
-    },
-    get children() {
-      var _el$ = $gVhhF$solidjsweb.getNextElement($363ce4d1d71041aa$var$_tmpl$);
-      $gVhhF$solidjsweb.insert(_el$, title);
-      return _el$;
-    }
-  }), $gVhhF$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
-    arrow_height_: 25,
-    arrow_width_: 12.5,
-    disable_fading_: true,
-    slider_ref_: slider => {
+  const targetToIndexMap_ = new Map();
+  const indexToTargetMap_ = new Map();
+  const [listenersForIntersecting, setListenersForIntersecting] = $gVhhF$solidjs.createSignal(0);
+  const [currentlyIntersecting, setCurrentlyIntersecting] = $gVhhF$solidjs.createSignal(new Set(), {
+    equals: false
+  });
+  if (0, $gVhhF$solidjsweb.isServer) return {
+    renderedDisplays_: $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+      displays_by_key_: displays_by_key_,
+      product_card_template_: product_card_template_,
+      content_blocks_: content_blocks_
+    }),
+    indexToTargetMap_: indexToTargetMap_,
+    currentlyIntersecting: currentlyIntersecting
+  };
+  // The following sets up an intersection observer to determine which results are in the viewport, used for the ScrollStatus indicator, knowing when to load more and any other consumer of the useProductCardIsVisible hook.
+  const shouldObserve = $gVhhF$solidjs.createMemo(() => alwaysObserveCards_ || listenersForIntersecting() > 0);
+  const intersection_observer = new IntersectionObserver($gVhhF$depictaiutilishared.catchify(records => {
+    const intersectingValue = currentlyIntersecting();
+    for (let i = 0; i < records.length; i++) {
+      const record = records[i];
       const {
-        insert_here: insert_here,
-        container: container
-      } = slider;
-      const Layout = props => $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, insert_here, true);
-      // Do like this, so we don't have to call mergeProps ourselves
-      $gVhhF$solidjsweb.createComponent(Layout, $gVhhF$solidjsweb.mergeProps({
-        rows: "all",
-        layout: "slider"
-      }, layout_options_));
-      $gVhhF$depictaiutilishared.slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
-      insert_here.before($fc23d7668ae0011d$export$a2cc176055f8f08());
-      container.classList.add("products");
+        target: target,
+        intersectionRatio: intersectionRatio
+      } = record;
+      const index_of_target = targetToIndexMap_.get(target);
+      if (index_of_target == undefined) return; // It seems like it can happen that we get IntersectionObserverEntries after the onCleanup function for a recommendation card has run, in Firefox. Probably a bug in Firefox? If I understood the bug correctly, this is a workaround.
+      const is_in_set = intersectingValue.has(index_of_target);
+      if (intersectionRatio > 0) {
+        if (!is_in_set) intersectingValue.add(index_of_target);
+      } else if (is_in_set) intersectingValue.delete(index_of_target);
+    }
+    setCurrentlyIntersecting(intersectingValue);
+  }, "renderDisplays IO failed"));
+  const renderedDisplays_ = $gVhhF$solidjsweb.createComponent($67155e1aeb7073f6$export$f223d69ed12f5fb7.Provider, {
+    value: {
+      currentlyIntersecting_: currentlyIntersecting,
+      setIsListening_: setListenersForIntersecting
     },
     get children() {
-      return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
-        get fallback() {
-          return $0caf87eaa19079da$export$f33414a4df0afd3f({
-            num_placeholders_: num_placeholders_,
-            product_card_template_: product_card_template_,
-            placeholderCacheKey_: placeholderCacheKey_
-          });
-        },
-        get children() {
-          return (() => {
-            // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
-            const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => recommendations_resource_() || []));
-            const {
-              renderedDisplays_: renderedDisplays_
-            } = $67155e1aeb7073f6$export$4a14175d33d81a96({
-              displays_by_key_: displays_by_key_,
-              product_card_template_: product_card_template_
+      return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+        displays_by_key_: displays_by_key_,
+        product_card_template_: product_card_template_,
+        content_blocks_: content_blocks_,
+        do_per_elements_: (elements, index_accessor) =>
+        // Adds/removes elements from the "results in viewport" intersection observer above
+        $gVhhF$solidjs.createEffect(() => {
+          if (!shouldObserve()) return;
+          const display_index = index_accessor();
+          // Nested createEffect because we only want to re-run this when the index changes (or we should/shouldn't observe)
+          // We need to save in a map which index the elements of this template are so that we can know that in the IntersectionObserver callback
+          for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            targetToIndexMap_.set(element, display_index);
+            intersection_observer.observe(element);
+            $gVhhF$solidjs.onCleanup(() => {
+              intersection_observer.unobserve(element);
+              targetToIndexMap_.delete(element);
+              const intersecting = $gVhhF$solidjs.untrack(currentlyIntersecting);
+              const wasDeleted = intersecting.delete(display_index);
+              if (wasDeleted) setCurrentlyIntersecting(intersecting);
             });
-            return renderedDisplays_;
-          })();
-        }
+          }
+          indexToTargetMap_.set(display_index, elements);
+          $gVhhF$solidjs.onCleanup(() => indexToTargetMap_.delete(display_index));
+        })
       });
     }
-  })];
-  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-    get when() {
-      return is_showing_something();
-    },
-    get fallback() {
-      return NoResultsFallback_?.();
-    },
-    children: slider
   });
-}
-function $95837413165cc2df$export$23fca46f3143581f(component, error_message) {
-  const component_in_error_boundary = do_with_elements => {
-    const error_boundary_wrapped = $edafe91daf3091d7$export$b69d0d92862de18b({
-      severity_: "error",
-      message_: error_message,
-      get children() {
-        const elements = component();
-        do_with_elements?.(elements);
-        return elements;
-      }
-    });
-    // This might return an accessor, in that case we need to "unwrap" it since our SDK consumers expect HTML elements or arrays thereof
-    if (typeof error_boundary_wrapped === "function")
-      // @ts-ignore
-      return error_boundary_wrapped();
-    // On the server it returns a string, so we just return that
-    return error_boundary_wrapped;
+  return {
+    renderedDisplays_: renderedDisplays_,
+    indexToTargetMap_: indexToTargetMap_,
+    currentlyIntersecting: currentlyIntersecting
   };
-  const owner = $gVhhF$solidjs.getOwner();
-  if (owner == null) return $gVhhF$solidjs.createRoot(dispose => {
-    // if we're not already run in a root, create a root and automatically dispose it when the first returned element is removed from the DOM
-    return component_in_error_boundary(elements => {
-      const have_multiple = Array.isArray(elements);
-      if (have_multiple ? !elements?.length : !elements) return;
-      (0, $gVhhF$depictaiutilishared.observer).onremoved(have_multiple ? elements[0] : elements, ({
-        element: element
-      }) => {
-        if (document.documentElement.contains(element)) return; // If element has instantly been re-inserted, don't dispose
-        // See https://depictaiworkspace.slack.com/archives/C050GHEPBTR/p1695809102791259?thread_ts=1695106805.459729&cid=C050GHEPBTR
-        dispose();
-      });
-    });
-  });else
-    // we're already in a root so cleanups are handled
-    return component_in_error_boundary();
-}
-const $84798aaa863a4909$var$ListingContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
-function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
-  const our_object = {};
-  return $gVhhF$solidjsweb.createComponent($84798aaa863a4909$var$ListingContext.Provider, {
-    value: our_object,
-    get children() {
-      return props.children;
-    }
-  });
 }
-function $84798aaa863a4909$export$8d0c4fdbb05a2f2e() {
-  return $gVhhF$solidjs.useContext($84798aaa863a4909$var$ListingContext);
+function $67155e1aeb7073f6$export$80bb7300ce6a8be3() {
+  const {
+    setIsListening_: setIsListening_,
+    currentlyIntersecting_: currentlyIntersecting_
+  } = $gVhhF$solidjs.useContext($67155e1aeb7073f6$export$f223d69ed12f5fb7) || {};
+  const getOurIndex = $129b9b9c010039d0$export$e3faf4d95300054f();
+  const isVisible = $gVhhF$solidjs.createMemo(() => currentlyIntersecting_?.().has(getOurIndex?.()));
+  setIsListening_?.(prev => prev + 1);
+  $gVhhF$solidjs.onCleanup(() => setIsListening_?.(prev => prev + 1));
+  return isVisible;
 }
-function $061ff5b4c3d36171$export$89c6019e4baa40b1(props) {
-  const style = $gVhhF$solidjs.createMemo(() => {
-    const {
-      style: style,
-      height: height,
-      width: width
-    } = props;
-    return {
-      ...(style || {}),
-      height: height ?? "1em",
-      ...(width && {
-        width: width
-      })
-    };
-  });
-  return $gVhhF$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
-    get style() {
-      return style();
-    },
-    get ["class"]() {
-      return props.class;
+function $4b455f60dadde8b8$export$5bad61ecde080b1f(...params) {
+  const {
+    collapse: collapse,
+    expand: expand,
+    ExpandingContainer: ExpandingContainer
+  } = $gVhhF$depictaiutilishared.useExpandingContainer(...params);
+  return {
+    collapse: collapse,
+    expand: expand,
+    ExpandingContainer: ({
+      children: children
+    }) => {
+      // get reactive signals/solid's jsx elements into `ExpandingContainer`
+      const fake_div = document.createElement("div");
+      const outer_expanding = $gVhhF$solidjsweb.createComponent(ExpandingContainer, {
+        children: [fake_div]
+      });
+      const parent = fake_div.parentElement;
+      fake_div.remove();
+      $gVhhF$solidjsweb.insert(parent, children);
+      return outer_expanding;
     }
-  });
-}
-var $6f604560873e4f69$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=instant-card><div class=img-part></div><div class=right-part><div class=title-brand-tagline><span class=title></span></div><div class=price-container>`);
-const $6f604560873e4f69$export$8a2234b5b1a5ebd4 = "--image-aspect-ratio";
-function $6f604560873e4f69$export$ee1733d9a8495996() {
-  return (() => {
-    var _el$ = $gVhhF$solidjsweb.getNextElement($6f604560873e4f69$var$_tmpl$),
-      _el$2 = _el$.firstChild,
-      _el$3 = _el$2.nextSibling,
-      _el$4 = _el$3.firstChild,
-      _el$5 = _el$4.firstChild,
-      _el$6 = _el$4.nextSibling;
-    $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
-      aspectRatio: `var(${$6f604560873e4f69$export$8a2234b5b1a5ebd4}, 1)`
-    }));
-    $gVhhF$solidjsweb.insert(_el$5, $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
-      width: "20ch",
-      height: "1em"
-    }));
-    $gVhhF$solidjsweb.insert(_el$6, $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
-      width: "5ch",
-      height: "1em",
-      "class": "price"
-    }));
-    return _el$;
-  })();
-}
-var $93304d59a9747aa6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`);
-function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
-  return (() => {
-    var _el$ = $gVhhF$solidjsweb.getNextElement($93304d59a9747aa6$var$_tmpl$);
-    $gVhhF$solidjsweb.insert(_el$, () => props.children);
-    $gVhhF$solidjsweb.effect(_p$ => {
-      var _v$ = `padding-bottom:calc(calc(1 / ${props.aspectRatio}) * 100%)`,
-        _v$2 = "s-image-container" + (props.class ? " " + props.class : "");
-      _p$.e = $gVhhF$solidjsweb.style(_el$, _v$, _p$.e);
-      _v$2 !== _p$.t && $gVhhF$solidjsweb.className(_el$, _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
-    return _el$;
-  })();
-}
-let $3ea8e0af95b5b7d2$var$browserIsBugged = false;
-function $3ea8e0af95b5b7d2$export$2972b890694ced75(callback, {
-  timeout: timeout
-}) {
-  if ($3ea8e0af95b5b7d2$var$browserIsBugged) timeout /= 4;
-  const cancel = () => {
-    cancelIdleCallback(idleHandle);
-    clearTimeout(racingTimeout);
   };
-  const idleHandle = requestIdleCallback(deadline => {
-    cancel();
-    return callback(deadline);
-  }, {
-    timeout: timeout
+}
+const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
+  const cols_at_size = [];
+  for (let i = 0; i < sorted_cols_at_size.length; i++) {
+    const [nb_cols, width] = sorted_cols_at_size[i];
+    const next_width = sorted_cols_at_size[i + 1]?.[1];
+    const max_width = i === 0 ? "" : `${width}px`;
+    const min_width = next_width !== undefined ? `${next_width + 1}px` : "";
+    const col_at_size = [nb_cols, min_width, max_width];
+    cols_at_size.push(col_at_size);
+  }
+  return cols_at_size;
+};
+const $4e04be41243c3d80$export$6daf8749b65a1b77 = cols_at_size => {
+  // Check that every element is an array
+  const are_arrays = cols_at_size?.every?.(element => Array.isArray(element));
+  if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
+  // Check width duplicates
+  const widths = cols_at_size.map(([_, width]) => width);
+  const widths_set = new Set(widths);
+  if (widths_set.size < widths.length) throw new Error("There are duplicate widths in cols_at_size");
+  if (cols_at_size.length === 1) {
+    const [nb_cols, width] = cols_at_size[0];
+    const max_width = width !== undefined ? `${width}px` : "";
+    return [[nb_cols, "", max_width]];
+  }
+  // Sort widths in ascending order
+  const sorted_cols_at_size = [...cols_at_size].sort((a, b) => {
+    const [_b, width_A] = a;
+    const [_a, width_b] = b;
+    if (width_A === undefined) return -1;
+    if (width_b === undefined) return 1;
+    return width_b - width_A;
   });
-  const racingTimeout = setTimeout(() => {
-    $gVhhF$depictaiutilishared.dwarn("Browser did not respect requestIdleCallback timeout");
-    $3ea8e0af95b5b7d2$var$browserIsBugged = true;
-    cancel();
-    callback({
-      didTimeout: false,
-      timeRemaining() {
-        return 500;
-      }
-    });
-  }, timeout + 1000);
-  return cancel;
+  return $4e04be41243c3d80$var$transform_elements(sorted_cols_at_size);
+};
+function $fc23d7668ae0011d$export$a2cc176055f8f08(what = "grid") {
+  const text = "Please try setting `columnsAtSize`/`gridSpacing` on the `SearchPage`/`CategoryPage` components to change the " + what + " before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+  return (0, $gVhhF$solidjsweb.isServer) ? {
+    t: `<!-- ${text} -->`
+  } : document.createComment(text);
 }
-function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
-  const [size, setSize] = $gVhhF$solidjs.createSignal(0);
-  const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => {
-    for (let j = 0; j < records.length; j++) {
-      const {
-        width: width
-      } = records[j].contentRect;
-      if (!width) continue;
-      setSize(Math.ceil(width));
+const $0caf87eaa19079da$var$defaultCacheKey = /*@__PURE__*/Symbol();
+const $0caf87eaa19079da$var$cachedPlaceholderElements = {};
+const $0caf87eaa19079da$var$renderingCachedPlaceholderElement = {};
+function $0caf87eaa19079da$export$f33414a4df0afd3f({
+  product_card_template_: product_card_template_,
+  num_placeholders_: num_placeholders_,
+  content_blocks_: content_blocks_,
+  placeholderCacheKey_: placeholderCacheKey_
+}) {
+  const [num_to_actually_show, set_num_to_actually_show] = $gVhhF$solidjs.createSignal($gVhhF$solidjs.untrack(num_placeholders_));
+  if (0, $gVhhF$solidjsweb.isServer)
+    // want to render simple placeholders on server, effects don't run there
+    // FIXME when adding proper SSR: also SSR content blocks
+    return $gVhhF$solidjs.createMemo(() => Array.from({
+      length: num_placeholders_()
+    }).map(() => {
+      const template_result = product_card_template_(null, undefined);
+      // @ts-ignore
+      if (typeof template_result?.then !== "function") return template_result;
+    }));
+  $gVhhF$solidjs.createRenderEffect(() => {
+    const existing_num = num_to_actually_show();
+    const to_add = num_placeholders_() - existing_num;
+    if (to_add <= 0) return;
+    // Below comment is from when we used recommendation renderer and manual DOM manipulation for this, but I'm still scared to remove placeholders and mess up scroll restoration, so I'm keeping the way it worked. Otherwise, <Index> could be used which would be far more elegant.
+    // We don't need to remove placeholders, only need to add. The reason for that is that chrome restores the scroll position once all tasks queued as reaction of the "popstate" events have been completed in the task queue. That means that we need to get the placeholders in fast, or we might lose scroll position if the previous site was shorter.
+    // The query id and the amount might update in separate tasks because one comes from href_change_ipns and the other one from another "popstate" listener. Therefore, we need to be able to dynamically add more placeholders. I'm not entirely sure about this anymore though, since we have the scroll position on a per-id basis it might work anyway but THIS WORKS, and I've been working on this bug for 3 hours so let's just keep it this way.
+    // Above comments were from when we added elements in this createRenderEffect. Now I changed it to just increment the number and render them from an <Index> instead, so I can add content blocks better
+    // Functionality should be the same
+    set_num_to_actually_show(existing_num + to_add);
+  });
+  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
+    get each() {
+      return Array.from({
+        length: num_to_actually_show()
+      });
+    },
+    children: (_item, index) => {
+      const possible_content_block = $gVhhF$solidjs.createMemo(() => content_blocks_?.()?.()?.[index]);
+      // Show content block before product card, so it's *at* that index
+      return [possible_content_block, $0caf87eaa19079da$var$Placeholder({
+        product_card_template_: product_card_template_,
+        placeholderCacheKey_: placeholderCacheKey_
+      })]; // https://github.com/solidjs/solid/releases/tag/v1.7.0
     }
-  }));
-  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
-  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
-  const disconnect = (0, $gVhhF$depictaiutilishared.observer).onexists(whatToWatch, ({
-    element: element
-  }) => requestAnimationFrame($gVhhF$depictaiutilishared.catchify(() => resizeObserver.observe(element))));
-  $gVhhF$solidjs.onCleanup(() => {
-    resizeObserver.disconnect();
-    disconnect();
   });
-  return size;
 }
-const $19950faaac026e09$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
-const $19950faaac026e09$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
-const $19950faaac026e09$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
-function $19950faaac026e09$export$6e5611bc7e57e477(props) {
-  const src_options = $gVhhF$solidjs.createMemo(() => {
-    const {
-      src: src,
-      customUrls: customUrls
-    } = props;
-    const fallback_src = (customUrls || $19950faaac026e09$export$1d6267828870adda)(src, 400);
-    const srcset = $19950faaac026e09$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customUrls);
-    // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
-    return {
-      srcset: srcset,
-      src: fallback_src
-    };
+/**
+ * Get one placeholder element. It will be cloned for each placeholder for ultimate performance even when solid-js isn't rendering the placeholders.
+ */
+function $0caf87eaa19079da$var$Placeholder({
+  product_card_template_: product_card_template_,
+  placeholderCacheKey_ = $0caf87eaa19079da$var$defaultCacheKey
+}) {
+  const get_cloned_placeholders = (element_to_clone = $0caf87eaa19079da$var$cachedPlaceholderElements[placeholderCacheKey_]) => Array.isArray(element_to_clone) ? element_to_clone.map(el => el instanceof Node ? el.cloneNode(true) : el) : element_to_clone;
+  if ($0caf87eaa19079da$var$cachedPlaceholderElements[placeholderCacheKey_]) return get_cloned_placeholders();
+  let dispose_original_copy;
+  const get_unwrapped_element = $gVhhF$solidjs.createRoot(dispose => {
+    dispose_original_copy = dispose;
+    // if product_card_template_ is async and rejects the resource will take care of throwing upwards here in the solid-js error handling system
+    const [resource] = $gVhhF$solidjs.createResource(() => {
+      const rendering_cached_placeholder_element = $0caf87eaa19079da$var$renderingCachedPlaceholderElement[placeholderCacheKey_];
+      if (rendering_cached_placeholder_element) return rendering_cached_placeholder_element;
+      const return_value = product_card_template_(null, undefined);
+      if (typeof return_value === "object" && typeof return_value?.then === "function")
+        // Is Promise or promise-like object
+        $0caf87eaa19079da$var$renderingCachedPlaceholderElement[placeholderCacheKey_] = return_value;
+      return return_value;
+    });
+    return $gVhhF$solidjs.createMemo(() => {
+      if (resource.loading) return () => [];
+      return $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(resource);
+    });
   });
-  // Work around https://github.com/solidjs/solid/issues/1828
-  const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
-  const [, otherAttributes] = $gVhhF$solidjs.splitProps(props, ["resolutions", "size", "src", "srcSet", "loading", "keyRatioUpdating", "customUrls" // Can't have properties ending on underscore because the property name mangling will get confused by this <-
-  ]);
-
-  const [hasSetSize, setHasSetSize] = $gVhhF$solidjs.createSignal(false);
-  const [hasDecoded, setHasDecoded] = $gVhhF$solidjs.createSignal(false);
-  const productCardIndexAccessor = $129b9b9c010039d0$export$e3faf4d95300054f();
-  const sizePX = $gVhhF$solidjs.createMemo(() => `${props.size()}px`); // props.size could be a getter that expects a cleanup so get it in this memo instead of where we set img.sizes
-  const listingContext = $84798aaa863a4909$export$8d0c4fdbb05a2f2e();
-  const isPrioritisedImage = $gVhhF$solidjs.createMemo(() => productCardIndexAccessor?.() < 8);
-  const shouldActuallyEnableLazyLoading = $gVhhF$solidjs.createMemo(() => {
-    const {
-      loading: loading
-    } = props;
-    if (loading === "force-lazy") return true;
-    return loading === "lazy" && !isPrioritisedImage();
+  $gVhhF$solidjs.onCleanup(() => {
+    const rendering = $0caf87eaa19079da$var$renderingCachedPlaceholderElement[placeholderCacheKey_];
+    if (rendering) {
+      // If we're still rendering in our separate root, let the rendering finish or other <Placeholder> components waiting for it might get an incomplete result
+      const unset_current_rendering = () => {
+        dispose_original_copy();
+        $0caf87eaa19079da$var$renderingCachedPlaceholderElement[placeholderCacheKey_] = undefined;
+      };
+      rendering?.then(unset_current_rendering, unset_current_rendering);
+    } else
+      // Otherwise, just make sure we've disposed our root
+      dispose_original_copy();
   });
-  const modifiedOtherAttributes = $gVhhF$solidjs.mergeProps(otherAttributes, {
-    get loading() {
-      return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
-    }
+  return $gVhhF$solidjs.createMemo(() => {
+    const unwrapped_array = get_unwrapped_element()();
+    if (!unwrapped_array?.length || !unwrapped_array.every(item => item))
+      // Haven't finished rendering yet in case of "async" rendering, so don't freeze the elements yet
+      return;
+    // placeholders have finished rendering, freeze the elements
+    // here we might receive the result of a promise that has already been received, tore down and put into cached_placeholder_element, so don't overwrite that more valid result if it's already set
+    $0caf87eaa19079da$var$cachedPlaceholderElements[placeholderCacheKey_] ||= get_cloned_placeholders(unwrapped_array); // Clone initial return value so that who gave us the elements can't mutate them, which has caused issues before with react
+    $0caf87eaa19079da$var$renderingCachedPlaceholderElement[placeholderCacheKey_] = undefined;
+    dispose_original_copy(); // So that this memo will never re-run and the placeholder rendering function can clean up
+    return get_cloned_placeholders(); // clone, just in case. If we wouldn't, someone could modify the copy in the DOM, and it would affect the cached version
   });
-  // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
-  // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
-  const executeWhenIdleBatched = (fn, isSizesUpdate) => {
-    if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
-    if ((!isSizesUpdate || !sizeSetFastPath) && $gVhhF$solidjs.untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately (improves lighthouse metrics)
-    // unless we're just a `sizes` update after the initial sizes setting (this optimisation makes the looks animation a lot smoother on low-cpu devices)
-    const existingStack = listingContext?.[$19950faaac026e09$var$onIdleFunctionsSymbol];
-    if (existingStack) return existingStack.add(fn);
-    const newStack = new Set([fn]);
-    if (listingContext) listingContext[$19950faaac026e09$var$onIdleFunctionsSymbol] = newStack;
-    const processStackWhenIdle = () => $3ea8e0af95b5b7d2$export$2972b890694ced75($gVhhF$depictaiutilishared.catchify(deadline => {
-      const start = performance.now();
-      const thirdDeadlineTime = deadline.timeRemaining() / 3; // observers coming after this take up 2-3x the time so don't use all of it
-      for (const fn of newStack) {
-        newStack.delete(fn);
-        fn();
-        const timeTaken = performance.now() - start;
-        if ((!deadline.timeRemaining() || timeTaken > thirdDeadlineTime) && newStack.size) {
-          // There's still work to be done but no time, so schedule another idle callback
-          processStackWhenIdle();
-          return;
-        }
-      }
-      // Stack is empty
-      if (listingContext) delete listingContext[$19950faaac026e09$var$onIdleFunctionsSymbol];
-    }), {
-      timeout: 15000
-    } // long timeout, better to not have images than to freeze the browser. But also we don't want to confuse user why no iamges are loading
-    );
+}
 
-    processStackWhenIdle();
-  };
-  let sizeSetFastPath = false;
-  let hasDecodedFastPath = false;
-  let timeoutSet = false;
-  let gotCleanedUp = false;
-  let srcJustChanged = true;
-  img.classList.add("s-responsive-image");
-  if (listingContext) {
-    let prevValue;
-    const aspectRatios = listingContext[$19950faaac026e09$export$f8945274f08a3105] ||= new Set();
-    const [, setMostPrevalentAspectRatio] = listingContext[$19950faaac026e09$export$6066eb417ed2e9f7] ||= $gVhhF$solidjs.createSignal();
-    img.addEventListener("load", $gVhhF$depictaiutilishared.catchify(() => {
-      if (props.keyRatioUpdating) {
-        if (!srcJustChanged) return;
-        srcJustChanged = false;
+var $f48d0fbb00835aaa$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
+  $f48d0fbb00835aaa$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<style type=text/css>`);
+function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
+  const container_class = "x" + $gVhhF$solidjs.createUniqueId();
+  const container_element_ = (() => {
+    var _el$ = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$);
+    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => props.element_attributes, {
+      "classList": {
+        [container_class]: true
       }
-      // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2 and LookItem
-      const aspectRatio_ = img.naturalWidth / img.naturalHeight;
-      if (prevValue) aspectRatios.delete(prevValue);
-      const newValue = !isNaN(aspectRatio_) ? {
-        aspectRatio_: aspectRatio_
-      } : undefined;
-      if (newValue) aspectRatios.add(newValue);
-      prevValue = newValue;
-      // Do all calculations resulting of an update directly, for performance
-      const asArray = [...aspectRatios].map(({
-        aspectRatio_: aspectRatio_
-      }) => aspectRatio_);
-      const mostPrevalentAspectRatio = $gVhhF$depictaiutilishared.findMostFrequentItem(asArray);
-      setMostPrevalentAspectRatio(mostPrevalentAspectRatio);
-    }));
-    $gVhhF$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
+    }), false, true);
+    $gVhhF$solidjsweb.insert(_el$, () => props.children);
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$;
+  })(); // Don't want this in the error boundary below, it should only be for the actual layouting
+  return $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
+    get message_() {
+      return "Failed calculating " + props.layout + " layout";
+    },
+    severity_: "error",
+    get children() {
+      return $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element_, false, container_class);
+    }
+  });
+}
+function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, insert_after_container = false, container_class) {
+  if (!container_class) {
+    // only try to add if it wasn't provided, so that we have a code path without classList when doing SSR
+    container_class = $gVhhF$depictaiutilishared.make_random_classname();
+    container_element.classList.add(container_class);
   }
-  $gVhhF$solidjs.onCleanup(() => gotCleanedUp = true);
-  $gVhhF$solidjsweb.spread(img, $gVhhF$solidjs.mergeProps(modifiedOtherAttributes), false, true);
-  $gVhhF$solidjs.createRenderEffect(() => {
-    props.src;
-    srcJustChanged = true;
+  // Copy of Layout from utilishared but using solid-js signals instead of async iterable IPNS
+  const show_all_rows = $gVhhF$solidjs.createMemo(() => props.rows === "all");
+  const rows_or_empty_object = $gVhhF$solidjs.createMemo(() => show_all_rows() ? {} : props.rows);
+  const view_more_button_elements = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52($gVhhF$solidjs.createMemo(() => rows_or_empty_object().button));
+  const view_less_button_elements = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52($gVhhF$solidjs.createMemo(() => rows_or_empty_object().view_less_button));
+  const have_a_view_more_button = $gVhhF$solidjs.createMemo(() => {
+    const button = view_more_button_elements();
+    return !(!button || Array.isArray(button) && !button.length);
   });
-  $gVhhF$solidjs.createEffect(() => {
-    if (!props.size()) return; // wait until we have a size, run every time the size changes
-    if (timeoutSet) return;
-    const handler = $gVhhF$depictaiutilishared.catchify(() => {
-      if (gotCleanedUp) return;
-      img.sizes = sizePX(); // use latest available value of props.size
-      if (!sizeSetFastPath) {
-        setHasSetSize(true);
-        sizeSetFastPath = true;
-      }
-      timeoutSet = false;
-    });
-    // Throttle the updating of sizes to avoid unnecessary image re-fetches during resize
-    // And also because we first set src after sizes has been set, wait with loading and decoding images until browser is idle
-    // This greatly improves performance when loading (more) products
-    // See https://depictaiworkspace.slack.com/archives/C05NJ0K3WRL/p1698220617663139
-    timeoutSet = true; // Important to set timeoutSet before the call to executeWhenIdleBatched since if this is an important image executeWhenIdleBatched will execute fn immediately
-    executeWhenIdleBatched(handler, true);
+  const have_a_view_less_button = $gVhhF$solidjs.createMemo(() => {
+    const button = view_less_button_elements();
+    return !(!button || Array.isArray(button) && !button.length);
+  });
+  const [get_styling, set_styling] = $gVhhF$solidjs.createSignal();
+  const selector_beginning = `.depict .${container_class}>`; // class so ppl can have id if needed
+  const [get_children_count, set_children_count] = $gVhhF$solidjs.createSignal(0);
+  const update_children_count = () => (0, $gVhhF$solidjsweb.isServer) ? 20 : set_children_count(container_element.children.length);
+  const col_styling = $gVhhF$solidjs.createMemo(() => $gVhhF$depictaiutilishared.n_col_styling_with_dist(selector_beginning, props.grid_spacing, props.cols_at_size, props.layout, props.override_vertical_spacing));
+  const default_currently_visible_signal = $gVhhF$solidjs.createSignal($gVhhF$solidjs.untrack(() => rows_or_empty_object().start_rows ?? 1)); // Keep this signal here, so it doesn't change when rows_or_empty_object and I think it's to be expected that the "internal default signal" stays the same
+  const rows_visible_signal = $gVhhF$solidjs.createMemo(() => rows_or_empty_object().currently_visible || default_currently_visible_signal);
+  const get_rows_visible = $gVhhF$solidjs.createMemo(() => rows_visible_signal()[0]());
+  const set_rows_visible = $gVhhF$solidjs.createMemo(() => rows_visible_signal()[1]);
+  const view_more_button_class = "m" + $gVhhF$solidjs.createUniqueId();
+  const view_less_button_class = "l" + $gVhhF$solidjs.createUniqueId(); //  https://github.com/solidjs/solid-docs/issues/263#issuecomment-1622388079
+  const view_more_button_container = $gVhhF$solidjs.createMemo(() => have_a_view_more_button() && (() => {
+    var _el$2 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$);
+    $gVhhF$solidjsweb.addEventListener(_el$2, "click", $gVhhF$depictaiutilishared.catchify(() => set_rows_visible()(prev => prev + (rows_or_empty_object().rows_per_click ?? 1))), true);
+    $gVhhF$solidjsweb.className(_el$2, `load-more-container ${view_more_button_class}`);
+    $gVhhF$solidjsweb.insert(_el$2, () => rows_or_empty_object().button);
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$2;
+  })());
+  // We need to have duplicate buttons because which ones is shown depends on the number of rows visible and therefore on the viewport size and therefore on the css media queries
+  const view_less_button_container = $gVhhF$solidjs.createMemo(() => have_a_view_less_button() && (() => {
+    var _el$3 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$);
+    $gVhhF$solidjsweb.addEventListener(_el$3, "click", $gVhhF$depictaiutilishared.catchify(() => set_rows_visible()(() => rows_or_empty_object().start_rows ?? 1)), true);
+    $gVhhF$solidjsweb.className(_el$3, `load-less-container ${view_less_button_class}`);
+    $gVhhF$solidjsweb.insert(_el$3, () => rows_or_empty_object().view_less_button);
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$3;
+  })());
+  const [force_style_update, set_force_style_update] = $gVhhF$solidjs.createSignal("");
+  $gVhhF$solidjs.createComputed(() => {
+    // Make sure we don't have more rows visible than max_rows (this could happen by max_rows being decreased)
+    const rows_visible = get_rows_visible();
+    const max_rows = rows_or_empty_object().max_rows;
+    if (!isNaN(max_rows) && max_rows >= 0 && rows_visible > max_rows) set_rows_visible()(max_rows);
   });
-  const dontLoadImageYet = $gVhhF$solidjs.createMemo(() => !props.size() || !hasSetSize()); // Moving this condition into a memo saves us from re-setting src and srcset (expensive) if just props.size changes
-  $gVhhF$solidjs.createEffect(() => {
-    if (dontLoadImageYet()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
-    Object.assign(img, src_options());
-    // Add to DOM once decoded to not require/block any paints before image has completed loading and avoid showing broken image symbol
-    // We can do this because there has to be a container around us giving us a size
-    // No need to listen if we're already in the DOM
-    if (hasDecodedFastPath) return;
-    if (shouldActuallyEnableLazyLoading()) {
-      // For lazy loading there's no decoding to wait for as it only occurs when the image is visible
-      // Make sure src is set before we put the image into the DOM though so no broken image symbol is shown
-      setHasDecoded(true);
-      hasDecodedFastPath = true;
+  $gVhhF$solidjs.createEffect(() => set_force_style_update(" ")); // force style update after hydration due to https://discord.com/channels/722131463138705510/722167424186843267/1151544212517552168
+  $gVhhF$solidjs.createRenderEffect(() => {
+    // Be careful to only read show_all_rows in here (ofc doesn't apply to nested effects)
+    if (show_all_rows()) {
+      // no view more functionality requested
+      set_styling(() => col_styling);
       return;
     }
-    img.decode().catch(e => $gVhhF$depictaiutilishared.dwarn("Failed to decode image", e, img)) // Display the image also if loading failed so webdev can debug and doesn't get "no image"
-    .then(async () => {
-      // Also wait with inserting image (i.e. paint) until browser is idle
-      await new Promise(r => executeWhenIdleBatched(r, false));
-      if (gotCleanedUp) return;
-      setHasDecoded(true);
-      hasDecodedFastPath = true;
-    });
+    update_children_count();
+    if (!(0, $gVhhF$solidjsweb.isServer)) {
+      const mutation_observer = new MutationObserver($gVhhF$depictaiutilishared.catchify(update_children_count));
+      mutation_observer.observe(container_element, {
+        childList: true
+      });
+      $gVhhF$solidjs.onCleanup(() => mutation_observer.disconnect());
+    }
+    set_styling(
+    // this is needed because solid will think that the memo-accessor is a setter function otherwise
+    () => $gVhhF$solidjs.createMemo(() => {
+      const {
+        rows_per_click: rows_per_click,
+        max_rows = -1,
+        start_rows: start_rows
+      } = rows_or_empty_object();
+      const rows_visible = get_rows_visible();
+      const children_count = get_children_count();
+      return force_style_update() + col_styling() + props.cols_at_size.map(options => {
+        const [recs_per_row, min, max] = options;
+        let should_hide_view_more_button;
+        let visible_recs;
+        if (props.disable_partial_rows) {
+          visible_recs = $gVhhF$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible, children_count, options);
+          const visible_recs_next_show_more = $gVhhF$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible + (rows_per_click || 0),
+          // Should this really be zero when we default rows_per_click to 1?
+          children_count, options);
+          should_hide_view_more_button = visible_recs === visible_recs_next_show_more;
+        } else {
+          visible_recs = $gVhhF$depictaiutilishared.layout_get_total_rec_amount_for_row(rows_visible, options);
+          should_hide_view_more_button = visible_recs >= children_count;
+        }
+        const should_hide_button_final = should_hide_view_more_button || max_rows !== -1 && rows_visible >= max_rows;
+        // I don't really understand the logic for when the view more button gets hidden so IDK if below is correct, but it works how it should for now
+        const should_hide_view_less_button = !should_hide_view_more_button || start_rows == undefined || rows_visible <= start_rows || children_count <= recs_per_row * start_rows;
+        return `${$gVhhF$depictaiutilishared.layout_media_query_header(min, max)}{${selector_beginning}:nth-child(n+${visible_recs + 1}){display:none}${props.layout == "slider" ? `${selector_beginning}:nth-child(n+${visible_recs}){margin-right:0}` : ""}${should_hide_button_final ? `.depict .${view_more_button_class}{display:none!important}` : ``}${should_hide_view_less_button ? `.depict .${view_less_button_class}{display:none!important}` : ``}}`;
+      }).join("");
+    }));
   });
+  const style_element = (() => {
+    var _el$4 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$2);
+    $gVhhF$solidjsweb.insert(_el$4, get_styling);
+    return _el$4;
+  })(); // need to create this after set_styling has been called or else there will be no styling in the SSR'd output
+  if (insert_after_container) container_element.after(style_element);
+  return [container_element, $gVhhF$solidjsweb.memo(view_more_button_container), $gVhhF$solidjsweb.memo(view_less_button_container), style_element];
+}
+$gVhhF$solidjsweb.delegateEvents(["click"]);
+var $363ce4d1d71041aa$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<h2 class=recs-title>`);
+function $363ce4d1d71041aa$export$d41d19e89346fa2({
+  recommendations_resource_: recommendations_resource_,
+  product_card_template_: product_card_template_,
+  layout_options_: layout_options_,
+  title_: title_,
+  NoResultsFallback_: NoResultsFallback_,
+  placeholderCacheKey_: placeholderCacheKey_
+}) {
+  const is_showing_something = $gVhhF$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $gVhhF$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
+  const num_placeholders_ = () => 20;
+  const slider = [$gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      var _el$ = $gVhhF$solidjsweb.getNextElement($363ce4d1d71041aa$var$_tmpl$);
+      $gVhhF$solidjsweb.insert(_el$, title);
+      return _el$;
+    }
+  }), $gVhhF$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
+    arrow_height_: 25,
+    arrow_width_: 12.5,
+    disable_fading_: true,
+    slider_ref_: slider => {
+      const {
+        insert_here: insert_here,
+        container: container
+      } = slider;
+      const Layout = props => $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, insert_here, true);
+      // Do like this, so we don't have to call mergeProps ourselves
+      $gVhhF$solidjsweb.createComponent(Layout, $gVhhF$solidjsweb.mergeProps({
+        rows: "all",
+        layout: "slider"
+      }, layout_options_));
+      $gVhhF$depictaiutilishared.slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
+      insert_here.before($fc23d7668ae0011d$export$a2cc176055f8f08());
+      container.classList.add("products");
+    },
+    get children() {
+      return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
+        get fallback() {
+          return $0caf87eaa19079da$export$f33414a4df0afd3f({
+            num_placeholders_: num_placeholders_,
+            product_card_template_: product_card_template_,
+            placeholderCacheKey_: placeholderCacheKey_
+          });
+        },
+        get children() {
+          return (() => {
+            // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
+            const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => recommendations_resource_() || []));
+            const {
+              renderedDisplays_: renderedDisplays_
+            } = $67155e1aeb7073f6$export$4a14175d33d81a96({
+              displays_by_key_: displays_by_key_,
+              product_card_template_: product_card_template_
+            });
+            return renderedDisplays_;
+          })();
+        }
+      });
+    }
+  })];
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
-      return hasDecoded();
+      return is_showing_something();
     },
-    children: img
+    get fallback() {
+      return NoResultsFallback_?.();
+    },
+    children: slider
   });
 }
-function $19950faaac026e09$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
-  return resolutions.map(width => `${(customGenerateImageUrl_ || $19950faaac026e09$export$1d6267828870adda)(url, width)} ${width}w`).join(", ");
-}
-function $19950faaac026e09$export$1d6267828870adda(url, width) {
-  // Even just creating one `URL` object per image src and then setting the search parameter is quite slow (0.25ms to set the width param)
-  // We're making the assumptions that the url has already at least one query parameter and that the image resizing service will choose the last one out of a duplicate width parameter (shopify's does)
-  // That way we can just to string concatenation which is insanely fast
-  return url + "&width=" + encodeURIComponent(width);
-}
-const $a33065cfed827fc0$var$backupSizeSignal = /*@__PURE__*/$gVhhF$solidjs.createSignal();
-const $a33065cfed827fc0$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
-function $a33065cfed827fc0$export$e4b984597b71e989(props) {
-  const context = $84798aaa863a4909$export$8d0c4fdbb05a2f2e();
-  if (context && !context[$a33065cfed827fc0$export$d7b7ab832c20e2f4])
-    // create a signal that's the same for all items in this listing
-    context[$a33065cfed827fc0$export$d7b7ab832c20e2f4] = $gVhhF$solidjs.createSignal();
-  const [currentImageSize, setCurrentImageSize] = context?.[$a33065cfed827fc0$export$d7b7ab832c20e2f4] || $a33065cfed827fc0$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
-  const [mostPrevalentAspectRatio] = context ?
-  // If the context exists we have to create the signal here as getting it here would be too late when it's created by ShopifyResponsiveImg below
-  context[(0, $19950faaac026e09$export$6066eb417ed2e9f7)] ||= $gVhhF$solidjs.createSignal() : [];
-  const container = $93304d59a9747aa6$export$94026ee33dbabc26({
-    // Write getters manually instead of using JSX, so we can do more complex logic in the aspectRatio getter without increasing bundle size
-    get class() {
-      return props.class;
-    },
-    get aspectRatio() {
-      if (props.autoAdjustAspectRatio) {
-        const targetRatio = mostPrevalentAspectRatio?.();
-        if (targetRatio != undefined) return `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, ${targetRatio})`;
+function $95837413165cc2df$export$23fca46f3143581f(component, error_message) {
+  const component_in_error_boundary = do_with_elements => {
+    const error_boundary_wrapped = $edafe91daf3091d7$export$b69d0d92862de18b({
+      severity_: "error",
+      message_: error_message,
+      get children() {
+        const elements = component();
+        do_with_elements?.(elements);
+        return elements;
       }
-      return props.aspectRatio;
-    }
-  });
+    });
+    // This might return an accessor, in that case we need to "unwrap" it since our SDK consumers expect HTML elements or arrays thereof
+    if (typeof error_boundary_wrapped === "function")
+      // @ts-ignore
+      return error_boundary_wrapped();
+    // On the server it returns a string, so we just return that
+    return error_boundary_wrapped;
+  };
   const owner = $gVhhF$solidjs.getOwner();
-  let createdSizeAccessor = false;
-  let wasCleanedUp = false;
-  $gVhhF$solidjs.createEffect(() => {
-    if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
-    // ensure we always have a size accessor
-    // what this whole thing does is set the sizes attribute to the actual size of one of the existing image containers, therefore the value doesn't have to manually be specified
-    createdSizeAccessor = true;
-    setCurrentImageSize(() => $gVhhF$solidjs.runWithOwner(owner, () => $19950faaac026e09$export$e6fffe67d4cdd848(container)));
-  });
-  $gVhhF$solidjs.onCleanup(() => {
-    wasCleanedUp = true; // important to set this before the function call below and always, so the dead effects don't create dead size accessors
-    if (!createdSizeAccessor) return;
-    $gVhhF$depictaiutilishared.queueMacroTask(() => setCurrentImageSize()); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
-  });
-
-  $gVhhF$solidjsweb.insert(container, $gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), $gVhhF$solidjsweb.mergeProps({
-    get size() {
-      return $gVhhF$solidjs.createMemo(() => currentImageSize()?.() || 0);
-    },
-    get src() {
-      return props.src;
-    }
-  }, () => props.imgProps, {
-    get style() {
-      return props.imgProps?.style;
-    }
-  })));
-  return container;
-}
-function $d212a67662c5cf38$export$9d4a4b669b1929ab(props) {
-  return $gVhhF$solidjsweb.createComponent((0, $a33065cfed827fc0$export$e4b984597b71e989), $gVhhF$solidjsweb.mergeProps(props, {
-    get imgProps() {
-      return {
-        ...props.imgProps,
-        customUrls: (url, width // Apparently don't have to encode url for CF's service
-        ) => {
-          if (url?.startsWith?.("https://cdn.shopify.com"))
-            // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
-            // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
-            return $19950faaac026e09$export$1d6267828870adda(url, width);
-          // Use cloudflare image resizer instead of img.depict.ai because it's a lot faster (and also auto-chooses other formats if webp is not supported)
-          return `https://app.depict.ai/cdn-cgi/image/width=${width},format=auto/${url}`;
-        }
-      };
-    }
-  }));
+  if (owner == null) return $gVhhF$solidjs.createRoot(dispose => {
+    // if we're not already run in a root, create a root and automatically dispose it when the first returned element is removed from the DOM
+    return component_in_error_boundary(elements => {
+      const have_multiple = Array.isArray(elements);
+      if (have_multiple ? !elements?.length : !elements) return;
+      (0, $gVhhF$depictaiutilishared.observer).onremoved(have_multiple ? elements[0] : elements, ({
+        element: element
+      }) => {
+        if (document.documentElement.contains(element)) return; // If element has instantly been re-inserted, don't dispose
+        // See https://depictaiworkspace.slack.com/archives/C050GHEPBTR/p1695809102791259?thread_ts=1695106805.459729&cid=C050GHEPBTR
+        dispose();
+      });
+    });
+  });else
+    // we're already in a root so cleanups are handled
+    return component_in_error_boundary();
 }
 function $d659702496cb72ea$export$a71e92cfbb498adc(props) {
   return $gVhhF$solidjs.createMemo(() => {
@@ -14907,7 +14934,7 @@ function $32c662f618f5d80d$export$780a853d15174484({
     return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjsweb.Dynamic), $gVhhF$solidjsweb.mergeProps({
       component: link ? "a" : "div",
       "class": "d-standard-content-wrapper",
-      ref: el => setWrapperSize(() => $19950faaac026e09$export$e6fffe67d4cdd848(el)),
+      ref: el => setWrapperSize(() => $128302ab61dab8f1$export$54c6d6ff54e72743(el)),
       get onClick() {
         return $gVhhF$depictaiutilisharedlatest.catchify(ev => link && router_.navigate_.go_to_({
           new_url_: link,
@@ -14919,10 +14946,9 @@ function $32c662f618f5d80d$export$780a853d15174484({
       href: link
     }, {
       get children() {
-        return $gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), {
-          get size() {
-            return $gVhhF$solidjs.createMemo(() => wrapperSize()?.() || 0);
-          },
+        return $gVhhF$solidjsweb.createComponent((0, $d212a67662c5cf38$export$140423fa4bfb6d63), {
+          size: () => wrapperSize()?.[0]?.() || 0,
+          sizeHeight: () => wrapperSize()?.[1]?.() || 0,
           src: mediaUrl,
           "class": "d-standard-content"
         });