@depict-ai/ui 4.7.33 → 4.7.34

package/server/ES10/index.cjs

@@ -18,6 +18,7 @@ function $parcel$export(e, n, v, s) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
+$parcel$export(module.exports, "ModernResponsiveImage", () => $f3db423dc84bc35d$export$140423fa4bfb6d63);
 $parcel$export(module.exports, "setExtraDisplayTransformers", () => $cc9aacef898ccc9a$export$f98b8d5ea7207a1);
 $parcel$export(module.exports, "getExtraDisplayTransformers", () => $cc9aacef898ccc9a$export$b2d94be4f02525b2);
 $parcel$export(module.exports, "remap_blocks_to_index", () => $f8f375d6245ffff2$export$92aa5d691d588f3f);
@@ -60,7 +61,6 @@ $parcel$export(module.exports, "make_accurate_width_accessor", () => $c387d7f1d9
 $parcel$export(module.exports, "RecommendationSlider", () => $2badc30d7c6610e1$export$9574e176201e5e8d);
 $parcel$export(module.exports, "RecommendationGrid", () => $41227f10ad680afd$export$9756467d34d91cdb);
 $parcel$export(module.exports, "ShopifyResponsiveImg", () => $858fdcf73148519f$export$6e5611bc7e57e477);
-$parcel$export(module.exports, "makeSizeAccessor", () => $858fdcf73148519f$export$e6fffe67d4cdd848);
 $parcel$export(module.exports, "ImageContainer", () => $ce467edb5343cfcd$export$94026ee33dbabc26);
 $parcel$export(module.exports, "SentryErrorBoundary", () => $1b3cf201cdd38687$export$b69d0d92862de18b);
 $parcel$export(module.exports, "ExtraSentryContextProvider", () => $1b3cf201cdd38687$export$240ecf5363d76c0f);
@@ -112,45 +112,250 @@ $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316
 $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7c3ce0ebe51f86);
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
+$parcel$export(module.exports, "makeSizeAccessors", () => $054b1113e4897051$export$54c6d6ff54e72743);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.33";
-
-// 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 $cc9aacef898ccc9a$var$extraDisplayTransformers;
-const $cc9aacef898ccc9a$export$b2d94be4f02525b2 = () => $cc9aacef898ccc9a$var$extraDisplayTransformers;
-const $cc9aacef898ccc9a$export$f98b8d5ea7207a1 = displayTransformers => $cc9aacef898ccc9a$var$extraDisplayTransformers = displayTransformers;
-function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
-  const signal = $3hooq$solidjs.createSignal(false);
-  $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
-    let {
-      matches: matches
-    } = _ref;
-    return signal[1](matches);
-  }).remove);
-  return signal[0];
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.34";
+const $d067f3a30f047b41$var$ListingContext = /*@__PURE__*/$3hooq$solidjs.createContext();
+function $d067f3a30f047b41$export$e68cff63f76bd15b(props) {
+  const our_object = {};
+  return $3hooq$solidjsweb.createComponent($d067f3a30f047b41$var$ListingContext.Provider, {
+    value: our_object,
+    get children() {
+      return props.children;
+    }
+  });
 }
-function $478e5a09664da64c$export$a79e666719b3647c(cols_at_size_) {
-  const size_active = $3hooq$solidjs.createMemo(() => cols_at_size_().map(_ref => {
-    let [n_cols, min_width, max_width] = _ref;
-    const media_query = $3hooq$depictaiutilishared.layout_media_query_header(min_width, max_width).replaceAll("@media", "");
-    const matches = $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query);
-    return [matches, n_cols];
-  }));
-  const n_cols_currently_showing = $3hooq$solidjs.createMemo(() => {
-    try {
-      const [, n_cols_currently_showing] = size_active().find(_ref2 => {
-        let [media_query] = _ref2;
-        return media_query();
+function $d067f3a30f047b41$export$8d0c4fdbb05a2f2e() {
+  return $3hooq$solidjs.useContext($d067f3a30f047b41$var$ListingContext);
+}
+var $ce467edb5343cfcd$var$_tmpl$ = ["<div", ' style="', '"', ">", "</div>"];
+function $ce467edb5343cfcd$export$94026ee33dbabc26(props) {
+  return $3hooq$solidjsweb.ssr($ce467edb5343cfcd$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrStyle("padding-bottom:calc(calc(1 / ".concat(props.aspectRatio, ") * 100%)")), $3hooq$solidjsweb.ssrAttribute("class", "s-image-container" + (props.class ? " " + $3hooq$solidjsweb.escape(props.class, true) : ""), false), $3hooq$solidjsweb.escape(props.children));
+}
+const $b54645378dfc7280$var$ProductCardIndexContext = /*@__PURE__*/$3hooq$solidjs.createContext();
+function $b54645378dfc7280$export$11354f017ddc9790(props) {
+  return $3hooq$solidjsweb.createComponent($b54645378dfc7280$var$ProductCardIndexContext.Provider, {
+    get value() {
+      return props.index_;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $b54645378dfc7280$export$e3faf4d95300054f() {
+  return $3hooq$solidjs.useContext($b54645378dfc7280$var$ProductCardIndexContext);
+}
+let $e4e98e5080f4386e$var$browserIsBugged = false;
+function $e4e98e5080f4386e$export$2972b890694ced75(callback, _ref) {
+  let {
+    timeout: timeout
+  } = _ref;
+  if ($e4e98e5080f4386e$var$browserIsBugged) timeout /= 4;
+  const cancel = () => {
+    cancelIdleCallback(idleHandle);
+    clearTimeout(racingTimeout);
+  };
+  const idleHandle = requestIdleCallback(deadline => {
+    cancel();
+    return callback(deadline);
+  }, {
+    timeout: timeout
+  });
+  const racingTimeout = setTimeout(() => {
+    $3hooq$depictaiutilishared.dwarn("Browser did not respect requestIdleCallback timeout");
+    $e4e98e5080f4386e$var$browserIsBugged = true;
+    cancel();
+    callback({
+      didTimeout: false,
+      timeRemaining() {
+        return 500;
+      }
+    });
+  }, timeout + 1000);
+  return cancel;
+}
+const $858fdcf73148519f$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
+const $858fdcf73148519f$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
+const $858fdcf73148519f$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
+function $858fdcf73148519f$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] = $3hooq$solidjs.createSignal();
+  const sizeToUse = $3hooq$solidjs.createMemo(() => {
+    var _props$sizeHeight;
+    // 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 = props.sizeHeight) === null || _props$sizeHeight === void 0 ? void 0 : _props$sizeHeight.call(props);
+    if (!incomingSize || !ratio || !containerHeight || getComputedStyle(img).objectFit !== "cover") return incomingSize;
+    const maybeCorrectedSize = ratio * containerHeight;
+    return Math.round(Math.max(incomingSize, maybeCorrectedSize));
+  });
+  const src_options = $3hooq$solidjs.createMemo(() => {
+    const {
+      src: src,
+      customUrls: customUrls
+    } = props;
+    const fallback_src = (customUrls || $858fdcf73148519f$export$1d6267828870adda)(src, 400);
+    const srcset = $858fdcf73148519f$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] = $3hooq$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] = $3hooq$solidjs.createSignal(false);
+  const [hasDecoded, setHasDecoded] = $3hooq$solidjs.createSignal(false);
+  const productCardIndexAccessor = $b54645378dfc7280$export$e3faf4d95300054f();
+  const listingContext = $d067f3a30f047b41$export$8d0c4fdbb05a2f2e();
+  const isPrioritisedImage = $3hooq$solidjs.createMemo(() => (productCardIndexAccessor === null || productCardIndexAccessor === void 0 ? void 0 : productCardIndexAccessor()) < 8);
+  const shouldActuallyEnableLazyLoading = $3hooq$solidjs.createMemo(() => {
+    const {
+      loading: loading
+    } = props;
+    if (loading === "force-lazy") return true;
+    return loading === "lazy" && !isPrioritisedImage();
+  });
+  const modifiedOtherAttributes = $3hooq$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) && $3hooq$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 === null || listingContext === void 0 ? void 0 : listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol];
+    if (existingStack) return existingStack.add(fn);
+    const newStack = new Set([fn]);
+    if (listingContext) listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol] = newStack;
+    const processStackWhenIdle = () => $e4e98e5080f4386e$export$2972b890694ced75($3hooq$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[$858fdcf73148519f$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[$858fdcf73148519f$export$f8945274f08a3105] || (listingContext[$858fdcf73148519f$export$f8945274f08a3105] = new Set());
+    const [, setMostPrevalentAspectRatio] = listingContext[$858fdcf73148519f$export$6066eb417ed2e9f7] || (listingContext[$858fdcf73148519f$export$6066eb417ed2e9f7] = $3hooq$solidjs.createSignal());
+    img.addEventListener("load", $3hooq$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(_ref => {
+        let {
+          aspectRatio_: aspectRatio_
+        } = _ref;
+        return aspectRatio_;
       });
-      return n_cols_currently_showing;
-    } catch (e) {
-      $3hooq$depictaiutilishared.dwarn("No active size found in columnsAtSize - can't render content blocks or looks");
-      return null;
+      const mostPrevalentAspectRatio = $3hooq$depictaiutilishared.findMostFrequentItem(asArray);
+      setMostPrevalentAspectRatio(mostPrevalentAspectRatio);
+    }));
+    $3hooq$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
+  }
+  $3hooq$solidjs.onCleanup(() => gotCleanedUp = true);
+  $3hooq$solidjsweb.spread(img, $3hooq$solidjs.mergeProps(modifiedOtherAttributes), false, true);
+  $3hooq$solidjs.createRenderEffect(() => {
+    props.src;
+    srcJustChanged = true;
+  });
+  $3hooq$solidjs.createEffect(() => {
+    if (!sizeToUse()) return; // wait until we have a size, run every time the size changes
+    if (timeoutSet) return;
+    const handler = $3hooq$depictaiutilishared.catchify(() => {
+      if (gotCleanedUp) return;
+      img.sizes = "".concat(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 = $3hooq$solidjs.createMemo(() => !sizeToUse() || !hasSetSize()); // Moving this condition into a memo saves us from re-setting src and srcset (expensive) if just props.size changes
+  $3hooq$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 => $3hooq$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 n_cols_currently_showing;
+  return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+    get when() {
+      return hasDecoded();
+    },
+    children: img
+  });
+}
+function $858fdcf73148519f$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => "".concat((customGenerateImageUrl_ || $858fdcf73148519f$export$1d6267828870adda)(url, width), " ").concat(width, "w")).join(", ");
+}
+function $858fdcf73148519f$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 $e3d733f899558f40$var$_tmpl$ = ["<span", ' class="', '" style="', '"></span>'];
 function $e3d733f899558f40$export$acb3eaade4b23afd(props) {
@@ -188,11 +393,198 @@ function $b8a8d61b3ec5f5ac$export$3f37af283f8fb843(props) {
     }
   });
 }
-var $f8f375d6245ffff2$var$_tmpl$ = ["<div", ' class="', '" style="', '">', "</div>"];
-function $f8f375d6245ffff2$export$791ef57e62e21c3f(_ref) {
-  let {
-    content_blocks_: incoming_content_blocks,
-    cols_at_size_: cols_at_size_,
+function $a7f7d416e6f61504$export$89c6019e4baa40b1(props) {
+  const style = $3hooq$solidjs.createMemo(() => {
+    const {
+      style: style,
+      height: height,
+      width: width
+    } = props;
+    return {
+      ...(style || {}),
+      height: height !== null && height !== void 0 ? height : "1em",
+      ...(width && {
+        width: width
+      })
+    };
+  });
+  return $3hooq$solidjsweb.createComponent((0, $e3d733f899558f40$export$acb3eaade4b23afd), {
+    get style() {
+      return style();
+    },
+    get ["class"]() {
+      return props.class;
+    }
+  });
+}
+var $c0cf6af094336798$var$_tmpl$ = ["<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">', "</div></div></div>"];
+const $c0cf6af094336798$export$8a2234b5b1a5ebd4 = "--image-aspect-ratio";
+function $c0cf6af094336798$export$ee1733d9a8495996() {
+  return $3hooq$solidjsweb.ssr($c0cf6af094336798$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $b8a8d61b3ec5f5ac$export$3f37af283f8fb843), {
+    aspectRatio: "var(".concat($c0cf6af094336798$export$8a2234b5b1a5ebd4, ", 1)")
+  })), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {
+    width: "20ch",
+    height: "1em"
+  })), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {
+    width: "5ch",
+    height: "1em",
+    "class": "price"
+  })));
+}
+function $054b1113e4897051$export$54c6d6ff54e72743(whatToWatch) {
+  const [width, setWidth] = $3hooq$solidjs.createSignal(0);
+  const [height, setHeight] = $3hooq$solidjs.createSignal(0);
+  const resizeObserver = new ResizeObserver($3hooq$depictaiutilishared.catchify(records => $3hooq$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, $3hooq$depictaiutilishared.observer).onexists(whatToWatch, _ref => {
+    let {
+      element: element
+    } = _ref;
+    return requestAnimationFrame($3hooq$depictaiutilishared.catchify(() => resizeObserver.observe(element)));
+  });
+  $3hooq$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
+  return [width, height];
+}
+const $28535bb7671c63d1$var$backupSizeSignal = /*@__PURE__*/$3hooq$solidjs.createSignal();
+const $28535bb7671c63d1$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
+function $28535bb7671c63d1$export$e4b984597b71e989(props) {
+  const context = $d067f3a30f047b41$export$8d0c4fdbb05a2f2e();
+  if (context && !context[$28535bb7671c63d1$export$d7b7ab832c20e2f4])
+    // create a signal that's the same for all items in this listing
+    context[$28535bb7671c63d1$export$d7b7ab832c20e2f4] = $3hooq$solidjs.createSignal();
+  const [currentImageSize, setCurrentImageSize] = (context === null || context === void 0 ? void 0 : context[$28535bb7671c63d1$export$d7b7ab832c20e2f4]) || $28535bb7671c63d1$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
+  const [mostPrevalentAspectRatio] = context ? context[(0, $858fdcf73148519f$export$6066eb417ed2e9f7)] || (context[(0, $858fdcf73148519f$export$6066eb417ed2e9f7)] = $3hooq$solidjs.createSignal()) : [];
+  const container = $ce467edb5343cfcd$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 === null || mostPrevalentAspectRatio === void 0 ? void 0 : mostPrevalentAspectRatio();
+        if (targetRatio != undefined) return "var(".concat((0, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(targetRatio, ")");
+      }
+      return props.aspectRatio;
+    }
+  });
+  const owner = $3hooq$solidjs.getOwner();
+  let createdSizeAccessor = false;
+  let wasCleanedUp = false;
+  $3hooq$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(() => $3hooq$solidjs.runWithOwner(owner, () => $054b1113e4897051$export$54c6d6ff54e72743(container)));
+  });
+  $3hooq$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;
+    $3hooq$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
+  });
+
+  $3hooq$solidjsweb.insert(container, $3hooq$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), $3hooq$solidjsweb.mergeProps({
+    size: () => {
+      var _currentImageSize, _currentImageSize$;
+      return ((_currentImageSize = currentImageSize()) === null || _currentImageSize === void 0 ? void 0 : (_currentImageSize$ = _currentImageSize[0]) === null || _currentImageSize$ === void 0 ? void 0 : _currentImageSize$.call(_currentImageSize)) || 0;
+    },
+    sizeHeight: () => {
+      var _currentImageSize2, _currentImageSize2$;
+      return ((_currentImageSize2 = currentImageSize()) === null || _currentImageSize2 === void 0 ? void 0 : (_currentImageSize2$ = _currentImageSize2[1]) === null || _currentImageSize2$ === void 0 ? void 0 : _currentImageSize2$.call(_currentImageSize2)) || 0;
+    },
+    get src() {
+      return props.src;
+    }
+  }, () => props.imgProps, {
+    get style() {
+      var _props$imgProps;
+      return (_props$imgProps = props.imgProps) === null || _props$imgProps === void 0 ? void 0 : _props$imgProps.style;
+    }
+  })));
+  return container;
+}
+const $f3db423dc84bc35d$var$customUrls = (url, width) => {
+  var _url$startsWith;
+  if (url !== null && url !== void 0 && (_url$startsWith = url.startsWith) !== null && _url$startsWith !== void 0 && _url$startsWith.call(url, "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 $858fdcf73148519f$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=".concat(width, ",format=auto/").concat(url);
+};
+function $f3db423dc84bc35d$export$9d4a4b669b1929ab(props) {
+  return $3hooq$solidjsweb.createComponent((0, $28535bb7671c63d1$export$e4b984597b71e989), $3hooq$solidjsweb.mergeProps(props, {
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customUrls: $f3db423dc84bc35d$var$customUrls
+      };
+    }
+  }));
+}
+function $f3db423dc84bc35d$export$140423fa4bfb6d63(props) {
+  return $3hooq$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), $3hooq$solidjsweb.mergeProps(props, {
+    customUrls: $f3db423dc84bc35d$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 $cc9aacef898ccc9a$var$extraDisplayTransformers;
+const $cc9aacef898ccc9a$export$b2d94be4f02525b2 = () => $cc9aacef898ccc9a$var$extraDisplayTransformers;
+const $cc9aacef898ccc9a$export$f98b8d5ea7207a1 = displayTransformers => $cc9aacef898ccc9a$var$extraDisplayTransformers = displayTransformers;
+function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
+  const signal = $3hooq$solidjs.createSignal(false);
+  $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
+    let {
+      matches: matches
+    } = _ref;
+    return signal[1](matches);
+  }).remove);
+  return signal[0];
+}
+function $478e5a09664da64c$export$a79e666719b3647c(cols_at_size_) {
+  const size_active = $3hooq$solidjs.createMemo(() => cols_at_size_().map(_ref => {
+    let [n_cols, min_width, max_width] = _ref;
+    const media_query = $3hooq$depictaiutilishared.layout_media_query_header(min_width, max_width).replaceAll("@media", "");
+    const matches = $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query);
+    return [matches, n_cols];
+  }));
+  const n_cols_currently_showing = $3hooq$solidjs.createMemo(() => {
+    try {
+      const [, n_cols_currently_showing] = size_active().find(_ref2 => {
+        let [media_query] = _ref2;
+        return media_query();
+      });
+      return n_cols_currently_showing;
+    } catch (e) {
+      $3hooq$depictaiutilishared.dwarn("No active size found in columnsAtSize - can't render content blocks or looks");
+      return null;
+    }
+  });
+  return n_cols_currently_showing;
+}
+var $f8f375d6245ffff2$var$_tmpl$ = ["<div", ' class="', '" style="', '">', "</div>"];
+function $f8f375d6245ffff2$export$791ef57e62e21c3f(_ref) {
+  let {
+    content_blocks_: incoming_content_blocks,
+    cols_at_size_: cols_at_size_,
     set_top_row_shortened_by_: set_top_row_shortened_by_
   } = _ref;
   // these are by row
@@ -528,20 +920,6 @@ function $e82d0d417fa613e8$var$unwrapping_helper(elements) {
   } else if (typeof elements == "function") result.push(...$e82d0d417fa613e8$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
   return result;
 }
-const $b54645378dfc7280$var$ProductCardIndexContext = /*@__PURE__*/$3hooq$solidjs.createContext();
-function $b54645378dfc7280$export$11354f017ddc9790(props) {
-  return $3hooq$solidjsweb.createComponent($b54645378dfc7280$var$ProductCardIndexContext.Provider, {
-    get value() {
-      return props.index_;
-    },
-    get children() {
-      return props.children;
-    }
-  });
-}
-function $b54645378dfc7280$export$e3faf4d95300054f() {
-  return $3hooq$solidjs.useContext($b54645378dfc7280$var$ProductCardIndexContext);
-}
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -1151,506 +1529,145 @@ function $6c2c739b113a8ddf$export$445d8d3f5f706a40(props, container_element) {
         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 = $3hooq$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible, children_count, options);
-          const visible_recs_next_show_more = $3hooq$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 = $3hooq$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 "".concat($3hooq$depictaiutilishared.layout_media_query_header(min, max), "{").concat(selector_beginning, ":nth-child(n+").concat(visible_recs + 1, "){display:none}").concat(props.layout == "slider" ? "".concat(selector_beginning, ":nth-child(n+").concat(visible_recs, "){margin-right:0}") : "").concat(should_hide_button_final ? ".depict .".concat(view_more_button_class, "{display:none!important}") : "").concat(should_hide_view_less_button ? ".depict .".concat(view_less_button_class, "{display:none!important}") : "", "}");
-      }).join("");
-    }));
-  });
-  const style_element = $3hooq$solidjsweb.ssr($6c2c739b113a8ddf$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), get_styling); // 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, view_more_button_container(), view_less_button_container(), style_element];
-}
-var $236a257ee52e5414$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
-function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
-  let {
-    recommendations_resource_: recommendations_resource_,
-    product_card_template_: product_card_template_,
-    layout_options_: layout_options_,
-    title_: title_,
-    NoResultsFallback_: NoResultsFallback_,
-    placeholderCacheKey_: placeholderCacheKey_
-  } = _ref;
-  const is_showing_something = $3hooq$solidjs.createMemo(() => {
-    var _recommendations_reso;
-    return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
-  });
-  const title = $3hooq$solidjs.createMemo(() => title_ === null || title_ === void 0 ? void 0 : title_()); // In case getter/accessor creates elements, don't create them twice
-  const num_placeholders_ = () => 20;
-  const slider = [$3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
-    get when() {
-      return title();
-    },
-    get children() {
-      return $3hooq$solidjsweb.ssr($236a257ee52e5414$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(title()));
-    }
-  }), $3hooq$solidjsweb.createComponent((0, $ad8ec7729fffeb9c$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 => $6c2c739b113a8ddf$export$445d8d3f5f706a40(props, insert_here, true);
-      // Do like this, so we don't have to call mergeProps ourselves
-      $3hooq$solidjsweb.createComponent(Layout, $3hooq$solidjsweb.mergeProps({
-        rows: "all",
-        layout: "slider"
-      }, layout_options_));
-      $3hooq$depictaiutilishared.slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
-      insert_here.before($8edd3cf30d1fd8b4$export$a2cc176055f8f08());
-      container.classList.add("products");
-    },
-    get children() {
-      return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Suspense), {
-        get fallback() {
-          return $e3915574cfd3466c$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_ = $76012c4468a53d1f$export$7f8bd308237ab5a5($3hooq$solidjs.createMemo(() => recommendations_resource_() || []));
-            const {
-              renderedDisplays_: renderedDisplays_
-            } = $a52942afacbced93$export$4a14175d33d81a96({
-              displays_by_key_: displays_by_key_,
-              product_card_template_: product_card_template_
-            });
-            return renderedDisplays_;
-          })();
-        }
-      });
-    }
-  })];
-  return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
-    get when() {
-      return is_showing_something();
-    },
-    get fallback() {
-      return NoResultsFallback_ === null || NoResultsFallback_ === void 0 ? void 0 : NoResultsFallback_();
-    },
-    children: slider
-  });
-}
-function $d05611ff6b8c8357$export$23fca46f3143581f(component, error_message) {
-  const component_in_error_boundary = do_with_elements => {
-    const error_boundary_wrapped = $1b3cf201cdd38687$export$b69d0d92862de18b({
-      severity_: "error",
-      message_: error_message,
-      get children() {
-        const elements = component();
-        do_with_elements === null || do_with_elements === void 0 || 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;
-  };
-  const owner = $3hooq$solidjs.getOwner();
-  if (owner == null) return $3hooq$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 !== null && elements !== void 0 && elements.length) : !elements) return;
-      (0, $3hooq$depictaiutilishared.observer).onremoved(have_multiple ? elements[0] : elements, _ref => {
-        let {
-          element: element
-        } = _ref;
-        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 $d067f3a30f047b41$var$ListingContext = /*@__PURE__*/$3hooq$solidjs.createContext();
-function $d067f3a30f047b41$export$e68cff63f76bd15b(props) {
-  const our_object = {};
-  return $3hooq$solidjsweb.createComponent($d067f3a30f047b41$var$ListingContext.Provider, {
-    value: our_object,
-    get children() {
-      return props.children;
-    }
-  });
-}
-function $d067f3a30f047b41$export$8d0c4fdbb05a2f2e() {
-  return $3hooq$solidjs.useContext($d067f3a30f047b41$var$ListingContext);
-}
-function $a7f7d416e6f61504$export$89c6019e4baa40b1(props) {
-  const style = $3hooq$solidjs.createMemo(() => {
-    const {
-      style: style,
-      height: height,
-      width: width
-    } = props;
-    return {
-      ...(style || {}),
-      height: height !== null && height !== void 0 ? height : "1em",
-      ...(width && {
-        width: width
-      })
-    };
-  });
-  return $3hooq$solidjsweb.createComponent((0, $e3d733f899558f40$export$acb3eaade4b23afd), {
-    get style() {
-      return style();
-    },
-    get ["class"]() {
-      return props.class;
-    }
-  });
-}
-var $c0cf6af094336798$var$_tmpl$ = ["<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">', "</div></div></div>"];
-const $c0cf6af094336798$export$8a2234b5b1a5ebd4 = "--image-aspect-ratio";
-function $c0cf6af094336798$export$ee1733d9a8495996() {
-  return $3hooq$solidjsweb.ssr($c0cf6af094336798$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $b8a8d61b3ec5f5ac$export$3f37af283f8fb843), {
-    aspectRatio: "var(".concat($c0cf6af094336798$export$8a2234b5b1a5ebd4, ", 1)")
-  })), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {
-    width: "20ch",
-    height: "1em"
-  })), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {
-    width: "5ch",
-    height: "1em",
-    "class": "price"
-  })));
-}
-var $ce467edb5343cfcd$var$_tmpl$ = ["<div", ' style="', '"', ">", "</div>"];
-function $ce467edb5343cfcd$export$94026ee33dbabc26(props) {
-  return $3hooq$solidjsweb.ssr($ce467edb5343cfcd$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrStyle("padding-bottom:calc(calc(1 / ".concat(props.aspectRatio, ") * 100%)")), $3hooq$solidjsweb.ssrAttribute("class", "s-image-container" + (props.class ? " " + $3hooq$solidjsweb.escape(props.class, true) : ""), false), $3hooq$solidjsweb.escape(props.children));
-}
-let $e4e98e5080f4386e$var$browserIsBugged = false;
-function $e4e98e5080f4386e$export$2972b890694ced75(callback, _ref) {
-  let {
-    timeout: timeout
-  } = _ref;
-  if ($e4e98e5080f4386e$var$browserIsBugged) timeout /= 4;
-  const cancel = () => {
-    cancelIdleCallback(idleHandle);
-    clearTimeout(racingTimeout);
-  };
-  const idleHandle = requestIdleCallback(deadline => {
-    cancel();
-    return callback(deadline);
-  }, {
-    timeout: timeout
-  });
-  const racingTimeout = setTimeout(() => {
-    $3hooq$depictaiutilishared.dwarn("Browser did not respect requestIdleCallback timeout");
-    $e4e98e5080f4386e$var$browserIsBugged = true;
-    cancel();
-    callback({
-      didTimeout: false,
-      timeRemaining() {
-        return 500;
-      }
-    });
-  }, timeout + 1000);
-  return cancel;
-}
-function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
-  const [size, setSize] = $3hooq$solidjs.createSignal(0);
-  const resizeObserver = new ResizeObserver($3hooq$depictaiutilishared.catchify(records => {
-    for (let j = 0; j < records.length; j++) {
-      const {
-        width: width
-      } = records[j].contentRect;
-      if (!width) continue;
-      setSize(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, $3hooq$depictaiutilishared.observer).onexists(whatToWatch, _ref => {
-    let {
-      element: element
-    } = _ref;
-    return requestAnimationFrame($3hooq$depictaiutilishared.catchify(() => resizeObserver.observe(element)));
-  });
-  $3hooq$solidjs.onCleanup(() => {
-    resizeObserver.disconnect();
-    disconnect();
-  });
-  return size;
-}
-const $858fdcf73148519f$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
-const $858fdcf73148519f$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
-const $858fdcf73148519f$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
-function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
-  const src_options = $3hooq$solidjs.createMemo(() => {
-    const {
-      src: src,
-      customUrls: customUrls
-    } = props;
-    const fallback_src = (customUrls || $858fdcf73148519f$export$1d6267828870adda)(src, 400);
-    const srcset = $858fdcf73148519f$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 img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
-  const [, otherAttributes] = $3hooq$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] = $3hooq$solidjs.createSignal(false);
-  const [hasDecoded, setHasDecoded] = $3hooq$solidjs.createSignal(false);
-  const productCardIndexAccessor = $b54645378dfc7280$export$e3faf4d95300054f();
-  const sizePX = $3hooq$solidjs.createMemo(() => "".concat(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 = $d067f3a30f047b41$export$8d0c4fdbb05a2f2e();
-  const isPrioritisedImage = $3hooq$solidjs.createMemo(() => (productCardIndexAccessor === null || productCardIndexAccessor === void 0 ? void 0 : productCardIndexAccessor()) < 8);
-  const shouldActuallyEnableLazyLoading = $3hooq$solidjs.createMemo(() => {
-    const {
-      loading: loading
-    } = props;
-    if (loading === "force-lazy") return true;
-    return loading === "lazy" && !isPrioritisedImage();
-  });
-  const modifiedOtherAttributes = $3hooq$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) && $3hooq$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 === null || listingContext === void 0 ? void 0 : listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol];
-    if (existingStack) return existingStack.add(fn);
-    const newStack = new Set([fn]);
-    if (listingContext) listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol] = newStack;
-    const processStackWhenIdle = () => $e4e98e5080f4386e$export$2972b890694ced75($3hooq$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[$858fdcf73148519f$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[$858fdcf73148519f$export$f8945274f08a3105] || (listingContext[$858fdcf73148519f$export$f8945274f08a3105] = new Set());
-    const [, setMostPrevalentAspectRatio] = listingContext[$858fdcf73148519f$export$6066eb417ed2e9f7] || (listingContext[$858fdcf73148519f$export$6066eb417ed2e9f7] = $3hooq$solidjs.createSignal());
-    img.addEventListener("load", $3hooq$depictaiutilishared.catchify(() => {
-      if (props.keyRatioUpdating) {
-        if (!srcJustChanged) 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
-      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(_ref2 => {
-        let {
-          aspectRatio_: aspectRatio_
-        } = _ref2;
-        return aspectRatio_;
-      });
-      const mostPrevalentAspectRatio = $3hooq$depictaiutilishared.findMostFrequentItem(asArray);
-      setMostPrevalentAspectRatio(mostPrevalentAspectRatio);
+      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 = $3hooq$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible, children_count, options);
+          const visible_recs_next_show_more = $3hooq$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 = $3hooq$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 "".concat($3hooq$depictaiutilishared.layout_media_query_header(min, max), "{").concat(selector_beginning, ":nth-child(n+").concat(visible_recs + 1, "){display:none}").concat(props.layout == "slider" ? "".concat(selector_beginning, ":nth-child(n+").concat(visible_recs, "){margin-right:0}") : "").concat(should_hide_button_final ? ".depict .".concat(view_more_button_class, "{display:none!important}") : "").concat(should_hide_view_less_button ? ".depict .".concat(view_less_button_class, "{display:none!important}") : "", "}");
+      }).join("");
     }));
-    $3hooq$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
-  }
-  $3hooq$solidjs.onCleanup(() => gotCleanedUp = true);
-  $3hooq$solidjsweb.spread(img, $3hooq$solidjs.mergeProps(modifiedOtherAttributes), false, true);
-  $3hooq$solidjs.createRenderEffect(() => {
-    props.src;
-    srcJustChanged = true;
   });
-  $3hooq$solidjs.createEffect(() => {
-    if (!props.size()) return; // wait until we have a size, run every time the size changes
-    if (timeoutSet) return;
-    const handler = $3hooq$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 style_element = $3hooq$solidjsweb.ssr($6c2c739b113a8ddf$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), get_styling); // 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, view_more_button_container(), view_less_button_container(), style_element];
+}
+var $236a257ee52e5414$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
+function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
+  let {
+    recommendations_resource_: recommendations_resource_,
+    product_card_template_: product_card_template_,
+    layout_options_: layout_options_,
+    title_: title_,
+    NoResultsFallback_: NoResultsFallback_,
+    placeholderCacheKey_: placeholderCacheKey_
+  } = _ref;
+  const is_showing_something = $3hooq$solidjs.createMemo(() => {
+    var _recommendations_reso;
+    return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
   });
-  const dontLoadImageYet = $3hooq$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
-  $3hooq$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;
+  const title = $3hooq$solidjs.createMemo(() => title_ === null || title_ === void 0 ? void 0 : title_()); // In case getter/accessor creates elements, don't create them twice
+  const num_placeholders_ = () => 20;
+  const slider = [$3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $3hooq$solidjsweb.ssr($236a257ee52e5414$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(title()));
     }
-    img.decode().catch(e => $3hooq$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;
-    });
-  });
+  }), $3hooq$solidjsweb.createComponent((0, $ad8ec7729fffeb9c$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 => $6c2c739b113a8ddf$export$445d8d3f5f706a40(props, insert_here, true);
+      // Do like this, so we don't have to call mergeProps ourselves
+      $3hooq$solidjsweb.createComponent(Layout, $3hooq$solidjsweb.mergeProps({
+        rows: "all",
+        layout: "slider"
+      }, layout_options_));
+      $3hooq$depictaiutilishared.slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
+      insert_here.before($8edd3cf30d1fd8b4$export$a2cc176055f8f08());
+      container.classList.add("products");
+    },
+    get children() {
+      return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Suspense), {
+        get fallback() {
+          return $e3915574cfd3466c$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_ = $76012c4468a53d1f$export$7f8bd308237ab5a5($3hooq$solidjs.createMemo(() => recommendations_resource_() || []));
+            const {
+              renderedDisplays_: renderedDisplays_
+            } = $a52942afacbced93$export$4a14175d33d81a96({
+              displays_by_key_: displays_by_key_,
+              product_card_template_: product_card_template_
+            });
+            return renderedDisplays_;
+          })();
+        }
+      });
+    }
+  })];
   return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {
-      return hasDecoded();
+      return is_showing_something();
     },
-    children: img
+    get fallback() {
+      return NoResultsFallback_ === null || NoResultsFallback_ === void 0 ? void 0 : NoResultsFallback_();
+    },
+    children: slider
   });
 }
-function $858fdcf73148519f$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
-  return resolutions.map(width => "".concat((customGenerateImageUrl_ || $858fdcf73148519f$export$1d6267828870adda)(url, width), " ").concat(width, "w")).join(", ");
-}
-function $858fdcf73148519f$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 $28535bb7671c63d1$var$backupSizeSignal = /*@__PURE__*/$3hooq$solidjs.createSignal();
-const $28535bb7671c63d1$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
-function $28535bb7671c63d1$export$e4b984597b71e989(props) {
-  const context = $d067f3a30f047b41$export$8d0c4fdbb05a2f2e();
-  if (context && !context[$28535bb7671c63d1$export$d7b7ab832c20e2f4])
-    // create a signal that's the same for all items in this listing
-    context[$28535bb7671c63d1$export$d7b7ab832c20e2f4] = $3hooq$solidjs.createSignal();
-  const [currentImageSize, setCurrentImageSize] = (context === null || context === void 0 ? void 0 : context[$28535bb7671c63d1$export$d7b7ab832c20e2f4]) || $28535bb7671c63d1$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
-  const [mostPrevalentAspectRatio] = context ? context[(0, $858fdcf73148519f$export$6066eb417ed2e9f7)] || (context[(0, $858fdcf73148519f$export$6066eb417ed2e9f7)] = $3hooq$solidjs.createSignal()) : [];
-  const container = $ce467edb5343cfcd$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 === null || mostPrevalentAspectRatio === void 0 ? void 0 : mostPrevalentAspectRatio();
-        if (targetRatio != undefined) return "var(".concat((0, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(targetRatio, ")");
+function $d05611ff6b8c8357$export$23fca46f3143581f(component, error_message) {
+  const component_in_error_boundary = do_with_elements => {
+    const error_boundary_wrapped = $1b3cf201cdd38687$export$b69d0d92862de18b({
+      severity_: "error",
+      message_: error_message,
+      get children() {
+        const elements = component();
+        do_with_elements === null || do_with_elements === void 0 || 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 = $3hooq$solidjs.getOwner();
-  let createdSizeAccessor = false;
-  let wasCleanedUp = false;
-  $3hooq$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(() => $3hooq$solidjs.runWithOwner(owner, () => $858fdcf73148519f$export$e6fffe67d4cdd848(container)));
-  });
-  $3hooq$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;
-    $3hooq$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
-  });
-
-  $3hooq$solidjsweb.insert(container, $3hooq$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), $3hooq$solidjsweb.mergeProps({
-    get size() {
-      return $3hooq$solidjs.createMemo(() => {
-        var _currentImageSize;
-        return ((_currentImageSize = currentImageSize()) === null || _currentImageSize === void 0 ? void 0 : _currentImageSize()) || 0;
+  if (owner == null) return $3hooq$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 !== null && elements !== void 0 && elements.length) : !elements) return;
+      (0, $3hooq$depictaiutilishared.observer).onremoved(have_multiple ? elements[0] : elements, _ref => {
+        let {
+          element: element
+        } = _ref;
+        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();
       });
-    },
-    get src() {
-      return props.src;
-    }
-  }, () => props.imgProps, {
-    get style() {
-      var _props$imgProps;
-      return (_props$imgProps = props.imgProps) === null || _props$imgProps === void 0 ? void 0 : _props$imgProps.style;
-    }
-  })));
-  return container;
-}
-const $f3db423dc84bc35d$var$customUrls = (url, width) => {
-  var _url$startsWith;
-  if (url !== null && url !== void 0 && (_url$startsWith = url.startsWith) !== null && _url$startsWith !== void 0 && _url$startsWith.call(url, "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 $858fdcf73148519f$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=".concat(width, ",format=auto/").concat(url);
-};
-function $f3db423dc84bc35d$export$9d4a4b669b1929ab(props) {
-  return $3hooq$solidjsweb.createComponent((0, $28535bb7671c63d1$export$e4b984597b71e989), $3hooq$solidjsweb.mergeProps(props, {
-    get imgProps() {
-      return {
-        ...props.imgProps,
-        customUrls: $f3db423dc84bc35d$var$customUrls
-      };
-    }
-  }));
-}
-function $f3db423dc84bc35d$export$140423fa4bfb6d63(props) {
-  return $3hooq$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), $3hooq$solidjsweb.mergeProps(props, {
-    customUrls: $f3db423dc84bc35d$var$customUrls
-  }));
+    });
+  });else
+    // we're already in a root so cleanups are handled
+    return component_in_error_boundary();
 }
 function $f38f2e64ebe2da86$export$a71e92cfbb498adc(props) {
   return $3hooq$solidjs.createMemo(() => {
@@ -13340,11 +13357,13 @@ function $c19709057a32b2e7$export$780a853d15174484(_ref) {
     }, {
       get children() {
         return $3hooq$solidjsweb.createComponent((0, $f3db423dc84bc35d$export$140423fa4bfb6d63), {
-          get size() {
-            return $3hooq$solidjs.createMemo(() => {
-              var _wrapperSize;
-              return ((_wrapperSize = wrapperSize()) === null || _wrapperSize === void 0 ? void 0 : _wrapperSize()) || 0;
-            });
+          size: () => {
+            var _wrapperSize, _wrapperSize$;
+            return ((_wrapperSize = wrapperSize()) === null || _wrapperSize === void 0 ? void 0 : (_wrapperSize$ = _wrapperSize[0]) === null || _wrapperSize$ === void 0 ? void 0 : _wrapperSize$.call(_wrapperSize)) || 0;
+          },
+          sizeHeight: () => {
+            var _wrapperSize2, _wrapperSize2$;
+            return ((_wrapperSize2 = wrapperSize()) === null || _wrapperSize2 === void 0 ? void 0 : (_wrapperSize2$ = _wrapperSize2[1]) === null || _wrapperSize2$ === void 0 ? void 0 : _wrapperSize2$.call(_wrapperSize2)) || 0;
           },
           src: mediaUrl,
           "class": "d-standard-content"