@depict-ai/ui 4.0.7 → 4.0.8

package/server/ES10/index.js

@@ -1,7 +1,7 @@
-import { add_to_version_info as $b8hua$add_to_version_info, deparallelize_no_drop as $b8hua$deparallelize_no_drop, catchify as $b8hua$catchify, make_random_classname as $b8hua$make_random_classname, ContainedImage as $b8hua$ContainedImage, standard_price_format as $b8hua$standard_price_format, javascript_media_query as $b8hua$javascript_media_query, dlog as $b8hua$dlog, camelCasifyObject as $b8hua$camelCasifyObject, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, observer as $b8hua$observer, report as $b8hua$report, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, ListenableSet as $b8hua$ListenableSet, findMostFrequentItem as $b8hua$findMostFrequentItem, queueMacroTask as $b8hua$queueMacroTask, dwarn as $b8hua$dwarn, slider_fading_factory as $b8hua$slider_fading_factory, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, n_col_styling_with_dist as $b8hua$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $b8hua$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $b8hua$layout_get_total_rec_amount_for_row, layout_media_query_header as $b8hua$layout_media_query_header, use_href_accessor as $b8hua$use_href_accessor, get_session_id as $b8hua$get_session_id, add_version_query_params as $b8hua$add_version_query_params, base_url as $b8hua$base_url, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, slider_fractional_factory as $b8hua$slider_fractional_factory, useExpandingContainer as $b8hua$useExpandingContainer, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, snakeCasifyObject as $b8hua$snakeCasifyObject, fetch_retry as $b8hua$fetch_retry, make_url_with_query_params as $b8hua$make_url_with_query_params, sort_obj as $b8hua$sort_obj, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { createSignal as $b8hua$createSignal, createResource as $b8hua$createResource, createEffect as $b8hua$createEffect, untrack as $b8hua$untrack, createMemo as $b8hua$createMemo, onCleanup as $b8hua$onCleanup, Show as $b8hua$Show, createComputed as $b8hua$createComputed, For as $b8hua$For, getOwner as $b8hua$getOwner, runWithOwner as $b8hua$runWithOwner, on as $b8hua$on, Index as $b8hua$Index, batch as $b8hua$batch, ErrorBoundary as $b8hua$ErrorBoundary, createContext as $b8hua$createContext, useContext as $b8hua$useContext, mergeProps as $b8hua$mergeProps1, createUniqueId as $b8hua$createUniqueId, createRenderEffect as $b8hua$createRenderEffect, createSelector as $b8hua$createSelector, children as $b8hua$children, splitProps as $b8hua$splitProps, createRoot as $b8hua$createRoot, Suspense as $b8hua$Suspense, createReaction as $b8hua$createReaction, mapArray as $b8hua$mapArray } from "solid-js";
+import { add_to_version_info as $b8hua$add_to_version_info, deparallelize_no_drop as $b8hua$deparallelize_no_drop, catchify as $b8hua$catchify, make_random_classname as $b8hua$make_random_classname, ContainedImage as $b8hua$ContainedImage, standard_price_format as $b8hua$standard_price_format, javascript_media_query as $b8hua$javascript_media_query, dlog as $b8hua$dlog, camelCasifyObject as $b8hua$camelCasifyObject, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, observer as $b8hua$observer, report as $b8hua$report, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, queueMacroTask as $b8hua$queueMacroTask, findMostFrequentItem as $b8hua$findMostFrequentItem, dwarn as $b8hua$dwarn, slider_fading_factory as $b8hua$slider_fading_factory, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, n_col_styling_with_dist as $b8hua$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $b8hua$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $b8hua$layout_get_total_rec_amount_for_row, layout_media_query_header as $b8hua$layout_media_query_header, use_href_accessor as $b8hua$use_href_accessor, get_session_id as $b8hua$get_session_id, add_version_query_params as $b8hua$add_version_query_params, base_url as $b8hua$base_url, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, slider_fractional_factory as $b8hua$slider_fractional_factory, useExpandingContainer as $b8hua$useExpandingContainer, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, snakeCasifyObject as $b8hua$snakeCasifyObject, fetch_retry as $b8hua$fetch_retry, make_url_with_query_params as $b8hua$make_url_with_query_params, sort_obj as $b8hua$sort_obj, ListenableSet as $b8hua$ListenableSet1, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { createSignal as $b8hua$createSignal, createResource as $b8hua$createResource, createEffect as $b8hua$createEffect, untrack as $b8hua$untrack, createMemo as $b8hua$createMemo, onCleanup as $b8hua$onCleanup, Show as $b8hua$Show, createComputed as $b8hua$createComputed, For as $b8hua$For, getOwner as $b8hua$getOwner, runWithOwner as $b8hua$runWithOwner, createContext as $b8hua$createContext, useContext as $b8hua$useContext, on as $b8hua$on, Index as $b8hua$Index, batch as $b8hua$batch, ErrorBoundary as $b8hua$ErrorBoundary, mergeProps as $b8hua$mergeProps1, createUniqueId as $b8hua$createUniqueId, createRenderEffect as $b8hua$createRenderEffect, createSelector as $b8hua$createSelector, children as $b8hua$children, splitProps as $b8hua$splitProps, createRoot as $b8hua$createRoot, Suspense as $b8hua$Suspense, createReaction as $b8hua$createReaction, mapArray as $b8hua$mapArray } from "solid-js";
 import { ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, escape as $b8hua$escape, createComponent as $b8hua$createComponent, ssrAttribute as $b8hua$ssrAttribute, ssrClassList as $b8hua$ssrClassList, ssrStyle as $b8hua$ssrStyle, ssrElement as $b8hua$ssrElement, mergeProps as $b8hua$mergeProps, insert as $b8hua$insert, spread as $b8hua$spread, isServer as $b8hua$isServer, Dynamic as $b8hua$Dynamic } from "solid-js/web";
-import { ListenableSet as $b8hua$ListenableSet1, catchify as $b8hua$catchify1, use_href_accessor as $b8hua$use_href_accessor1, report as $b8hua$report1 } from "@depict-ai/utilishared/ES10";
+import { ListenableSet as $b8hua$ListenableSet, catchify as $b8hua$catchify1, use_href_accessor as $b8hua$use_href_accessor1, report as $b8hua$report1 } from "@depict-ai/utilishared/ES10";
 import $b8hua$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
 import $b8hua$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
 import $b8hua$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";
@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.7";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.8";
 function $a604a8ffa4e4c03f$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $b8hua$createSignal();
   const deparallelizedFetcher = $b8hua$deparallelize_no_drop(async dependencyValue => {
@@ -261,6 +261,20 @@ function $cb64b315b25cfc59$var$unwrapping_helper(elements) {
   } else if (typeof elements == "function") result.push(...$cb64b315b25cfc59$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
   return result;
 }
+const $1e69163caedaab4e$var$ProductCardIndexContext = /*@__PURE__*/$b8hua$createContext();
+function $1e69163caedaab4e$export$11354f017ddc9790(props) {
+  return $b8hua$createComponent($1e69163caedaab4e$var$ProductCardIndexContext.Provider, {
+    get value() {
+      return props.index_;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $1e69163caedaab4e$export$e3faf4d95300054f() {
+  return $b8hua$useContext($1e69163caedaab4e$var$ProductCardIndexContext);
+}
 let $2d7bad8684bc7f44$var$printedCloneError = false;
 function $2d7bad8684bc7f44$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $b8hua$createMemo(() => {
@@ -318,9 +332,22 @@ function $2d7bad8684bc7f44$export$43f0fb951fcb0c54(_ref) {
             $b8hua$dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
           }
         }
-        return product_card_template_(display, {
-          set_on_index_change: fn => $b8hua$runWithOwner(owner, () => $b8hua$createEffect(() => fn(index())))
+        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
+        $1e69163caedaab4e$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 => $b8hua$runWithOwner(owner, () => $b8hua$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 = $cb64b315b25cfc59$export$2f0cbfbb4354bb52(product_card_resource);
       $b8hua$createEffect(() => {
@@ -345,7 +372,8 @@ function $2d7bad8684bc7f44$export$43f0fb951fcb0c54(_ref) {
       });
       return [
       // Show content block before product card, so it's *at* that index
-      possible_content_block, product_card_resource]; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+      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
     }
   });
 }
@@ -1852,6 +1880,34 @@ var $801e8845d3fa3653$var$_tmpl$ = ["<div", ' class="', '" style="', '">', "</di
 function $801e8845d3fa3653$export$94026ee33dbabc26(props) {
   return $b8hua$ssr($801e8845d3fa3653$var$_tmpl$, $b8hua$ssrHydrationKey(), "".concat($b8hua$escape($b8hua$escape("s-image-container", true), true)).concat($b8hua$escape(props.class, true) || ""), $b8hua$ssrStyle("padding-bottom:calc(calc(1 / ".concat(props.aspectRatio, ") * 100%)")), $b8hua$escape(props.children));
 }
+let $6db93f70c2db1486$var$browserIsBugged = false;
+function $6db93f70c2db1486$export$2972b890694ced75(callback, _ref) {
+  let {
+    timeout: timeout
+  } = _ref;
+  if ($6db93f70c2db1486$var$browserIsBugged) timeout /= 4;
+  const cancel = () => {
+    cancelIdleCallback(idleHandle);
+    clearTimeout(racingTimeout);
+  };
+  const idleHandle = requestIdleCallback(deadline => {
+    cancel();
+    return callback(deadline);
+  }, {
+    timeout: timeout
+  });
+  const racingTimeout = setTimeout(() => {
+    $6db93f70c2db1486$var$browserIsBugged = true;
+    cancel();
+    callback({
+      didTimeout: false,
+      timeRemaining() {
+        return 500;
+      }
+    });
+  }, timeout + 1000);
+  return cancel;
+}
 function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $b8hua$createSignal(0);
   const resizeObserver = new ResizeObserver($b8hua$catchify(records => {
@@ -1879,6 +1935,7 @@ function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
 }
 const $56047603f9d212b6$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
 const $56047603f9d212b6$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
+const $56047603f9d212b6$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   // Enable reactive props
   const otherOptions = $b8hua$createMemo(() => {
@@ -1893,9 +1950,8 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     return cloned_props;
   });
   const src_options = $b8hua$createMemo(() => {
-    const src = new URL(props.src, location.origin);
-    const fallback_src = $56047603f9d212b6$var$generateImageUrl(src, 400);
-    const srcset = $56047603f9d212b6$var$make_srcset(src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const fallback_src = $56047603f9d212b6$var$generateImageUrl(props.src, 400);
+    const srcset = $56047603f9d212b6$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -1906,17 +1962,27 @@ function $56047603f9d212b6$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 [hasSetSize, setHasSetSize] = $b8hua$createSignal(false);
   const [hasDecoded, setHasDecoded] = $b8hua$createSignal(false);
+  const productCardIndexAccessor = $1e69163caedaab4e$export$e3faf4d95300054f();
   const sizePX = $b8hua$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 = $5441862cd2f5e111$export$8d0c4fdbb05a2f2e();
+  const isPrioritisedImage = $b8hua$createMemo(() => (productCardIndexAccessor === null || productCardIndexAccessor === void 0 ? void 0 : productCardIndexAccessor()) < 8);
+  const loadLazily = $b8hua$createMemo(() => {
+    const {
+      loading: loading
+    } = props;
+    if (loading === "force-lazy") return true;
+    return loading === "lazy" && !isPrioritisedImage();
+  });
   // 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 => {
     if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
+    if ($b8hua$untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately
     const existingStack = listingContext === null || listingContext === void 0 ? void 0 : listingContext[$56047603f9d212b6$var$onIdleFunctionsSymbol];
     if (existingStack) return existingStack.add(fn);
     const newStack = new Set([fn]);
     if (listingContext) listingContext[$56047603f9d212b6$var$onIdleFunctionsSymbol] = newStack;
-    const processStackWhenIdle = () => requestIdleCallback(deadline => {
+    const processStackWhenIdle = () => $6db93f70c2db1486$export$2972b890694ced75($b8hua$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) {
@@ -1931,7 +1997,7 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
       }
       // Stack is empty
       if (listingContext) delete listingContext[$56047603f9d212b6$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
     );
@@ -1945,7 +2011,8 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   img.classList.add("s-responsive-image");
   if (listingContext) {
     let prevValue;
-    const aspectRatios = listingContext[$56047603f9d212b6$export$f8945274f08a3105] || (listingContext[$56047603f9d212b6$export$f8945274f08a3105] = new (0, $b8hua$ListenableSet)());
+    const aspectRatios = listingContext[$56047603f9d212b6$export$f8945274f08a3105] || (listingContext[$56047603f9d212b6$export$f8945274f08a3105] = new Set());
+    const [, setMostPrevalentAspectRatio] = listingContext[$56047603f9d212b6$export$6066eb417ed2e9f7] || (listingContext[$56047603f9d212b6$export$6066eb417ed2e9f7] = $b8hua$createSignal());
     img.addEventListener("load", $b8hua$catchify(() => {
       // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2
       const aspectRatio_ = img.naturalWidth / img.naturalHeight;
@@ -1955,13 +2022,22 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
       } : 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 = $b8hua$findMostFrequentItem(asArray);
+      setMostPrevalentAspectRatio(mostPrevalentAspectRatio);
     }));
     $b8hua$onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $b8hua$onCleanup(() => gotCleanedUp = true);
   $b8hua$spread(img, $b8hua$mergeProps1(otherOptions), false, true);
   $b8hua$createEffect(() => {
-    if (!props.size()) return; // wait until we have a size
+    if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
     const handler = $b8hua$catchify(() => {
       if (gotCleanedUp) return;
@@ -1986,7 +2062,7 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     // 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 (props.loading === "lazy") {
+    if (loadLazily()) {
       // 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);
@@ -2013,9 +2089,10 @@ function $56047603f9d212b6$var$make_srcset(url, resolutions) {
   return resolutions.map(width => "".concat($56047603f9d212b6$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
 }
 function $56047603f9d212b6$var$generateImageUrl(url, width) {
-  // This function is quite slow, we maybe could do string concat with encodeURIComponent instead if shopify handles double width params well?
-  url.searchParams.set("width", width);
-  return url.href;
+  // 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 $4df489344a0f97c7$var$backupSizeSignal = /*@__PURE__*/$b8hua$createSignal();
 const $4df489344a0f97c7$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
@@ -2025,41 +2102,23 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     // create a signal that's the same for all items in this listing
     context[$4df489344a0f97c7$export$d7b7ab832c20e2f4] = $b8hua$createSignal();
   const [currentImageSize, setCurrentImageSize] = (context === null || context === void 0 ? void 0 : context[$4df489344a0f97c7$export$d7b7ab832c20e2f4]) || $4df489344a0f97c7$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
-  const aspectRatiosSet = context ? context[(0, $56047603f9d212b6$export$f8945274f08a3105)] || (context[(0, $56047603f9d212b6$export$f8945274f08a3105)] = new (0, $b8hua$ListenableSet)()) : undefined;
-  const [aspectRatios, setAspectRatios] = $b8hua$createSignal(aspectRatiosSet, {
-    equals: false
-  });
-  const aspectRatioToUse = $b8hua$createMemo(() => {
-    const aspectRatiosSet = aspectRatios(); // This signal "changes" to the same set every time the set changes, so we can use it as a dependency here
-    useMostPrevalentAspectRatio: {
-      if (!aspectRatiosSet || !props.autoAdjustAspectRatio) break useMostPrevalentAspectRatio;
-      // Get the aspect ratio that most of the loaded images inside the ListingProvider we are, load
-      const asArray = [...aspectRatiosSet].map(_ref => {
-        let {
-          aspectRatio_: aspectRatio_
-        } = _ref;
-        return aspectRatio_;
-      });
-      const mostPrevalentAspectRatio = $b8hua$findMostFrequentItem(asArray);
-      if (mostPrevalentAspectRatio) return "var(".concat((0, $5eaa00b951637e96$export$8a2234b5b1a5ebd4), ", ").concat(mostPrevalentAspectRatio, ")");
-    }
-    return props.aspectRatio;
-  });
-  const container = $b8hua$createComponent((0, $801e8845d3fa3653$export$94026ee33dbabc26), {
-    get aspectRatio() {
-      return aspectRatioToUse();
-    },
-    get ["class"]() {
+  const [mostPrevalentAspectRatio] = context ? context[(0, $56047603f9d212b6$export$6066eb417ed2e9f7)] || (context[(0, $56047603f9d212b6$export$6066eb417ed2e9f7)] = $b8hua$createSignal()) : [];
+  const container = $801e8845d3fa3653$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, $5eaa00b951637e96$export$8a2234b5b1a5ebd4), ", ").concat(targetRatio, ")");
+      }
+      return props.aspectRatio;
     }
   });
   const owner = $b8hua$getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
-  for (const event of ["add", "delete"]) {
-    aspectRatiosSet === null || aspectRatiosSet === void 0 || aspectRatiosSet.addEventListener(event, () => setAspectRatios(aspectRatiosSet));
-    $b8hua$onCleanup(() => aspectRatiosSet === null || aspectRatiosSet === void 0 ? void 0 : aspectRatiosSet.removeEventListener(event, () => setAspectRatios(aspectRatiosSet)));
-  }
   $b8hua$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
@@ -3032,7 +3091,7 @@ const $6a439680ae7e9ba3$var$TabsContext = /*@__PURE__*/$b8hua$createContext();
 const $6a439680ae7e9ba3$var$useTabs = () => $b8hua$useContext($6a439680ae7e9ba3$var$TabsContext);
 function $6a439680ae7e9ba3$export$b2539bed5023c21c(props) {
   return $b8hua$createComponent($6a439680ae7e9ba3$var$TabsContext.Provider, {
-    value: new (0, $b8hua$ListenableSet1)(),
+    value: new (0, $b8hua$ListenableSet)(),
     get children() {
       return $b8hua$createComponent($6a439680ae7e9ba3$var$ActualTabs, $b8hua$mergeProps(props, {
         get children() {
@@ -10960,7 +11019,7 @@ function $d53ebed6f63304e4$export$6d0c9c22f6652669(_ref) {
     number_: num_results,
     i18n_: i18n_
   });
-  const queries_without_content_results_ = new (0, $b8hua$ListenableSet)();
+  const queries_without_content_results_ = new (0, $b8hua$ListenableSet1)();
   const [check_query, set_check_query] = $b8hua$createSignal(false);
   const placeholders_enabled = $b8hua$createMemo(() => {
     // don't show placeholders when the user toggles filters
@@ -12617,4 +12676,4 @@ function $a3026fb727bc7550$var$align_field_modal(alignmentSignals, input, modalV
   });
 }
 $b8hua$add_to_version_info("ui", (0, $8db9a15135765c11$export$83d89fbfd8236492));
-export { $a604a8ffa4e4c03f$export$e417c49320921907 as createDeparallelizedNoDropResource, $01c33966d9ddb108$export$f50b88e2a00918b5 as throw_globally, $40411f2ec772c376$export$9265e66f26f8e383 as ClassicSearchModal, $06fcd2a345efd24d$export$b0c55aa2e87c4be7 as SearchModalV2, $7fbaab3d3dafb4f5$export$9d4a4b669b1929ab as ModernResponsiveContainedImage, $6a439680ae7e9ba3$export$3e41faf802a29e71 as Tab, $6a439680ae7e9ba3$export$b2539bed5023c21c as Tabs, $6b0fd8fd20df8ccf$export$d4973c31938cbfd1 as ShopTheLookButton, $972f6bce0f9d61be$export$e183a13865960371 as history_dot_state_to_state, $2855bffe06ef7a03$export$916e6850778505f6 as strip_encoded_filter_and_sort, $2855bffe06ef7a03$export$58aa3f171519b6d7 as encode_filters, $2855bffe06ef7a03$export$f934fa24c3a86811 as decode_filters, $2855bffe06ef7a03$export$62acb285a7579555 as encode_sorting, $2855bffe06ef7a03$export$766e9676e74997d3 as decode_sorting, $4df489344a0f97c7$export$d7b7ab832c20e2f4 as shopifyContainedImageContextSymbol, $5441862cd2f5e111$export$e68cff63f76bd15b as ListingProvider, $5441862cd2f5e111$export$8d0c4fdbb05a2f2e as useListing, $4df489344a0f97c7$export$e4b984597b71e989 as ShopifyContainedImage, $002f09d00aac50b2$export$6649caad96ef8870 as SlidableItems, $fc830a7ee59416ef$export$ebdc3711f7e02ccd as make_accurate_width_accessor, $d5d7e58c5c9d8db0$export$9574e176201e5e8d as RecommendationSlider, $b432b11321ad4c97$export$9756467d34d91cdb as RecommendationGrid, $56047603f9d212b6$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $56047603f9d212b6$export$e6fffe67d4cdd848 as makeSizeAccessor, $801e8845d3fa3653$export$94026ee33dbabc26 as ImageContainer, $74777e8fe65b3dcb$export$b69d0d92862de18b as SentryErrorBoundary, $ad371564683947ab$export$6c6d7a51fa9aa15d as ExpandingDetails, $e18ab2868df26f40$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $4711a82d08d2021b$export$fecbb157621501bd as SelectedFilters, $f6b0500577e1b210$export$3f1a388cc0d8fed7 as FilterBody, $44aa24b1bb793549$export$b288c38ae3fddb56 as create_modified_filters, $63f1f8dbcd07d3b0$export$d21e32dfedac04be as SolidLayout, $d5f1e6a0f9117286$export$79b1565500412d9b as general_modal_abstraction, $9783d437ad61594c$export$3b621d86b1566b2 as CrossIcon, $ca6ab5f08bd28bca$export$8be2714ec7f169ee as GenericSliderArrowButton, $50aebf5b445518eb$export$58e808b1db15d3bc as fetchDepictRecommendations, $f5f54892fd0c7d9f$export$de035477d6fef996 as QuickLinks, $f5f54892fd0c7d9f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $fa332ea03168857c$export$b91cec6bdc6b32a1 as CategoryTitle, $702d7656a373973e$export$824dde41348efed1 as embedded_num_products, $160ea2b55d8772d2$export$c1a6b039e689a58e as get_listings, $f5f54892fd0c7d9f$export$f34314aa9505732e as DepictCategory, $f5f54892fd0c7d9f$export$e2bf8ce7779e827e as CategoryPage, $eb064bc3350276c1$export$ac6237957a15b3f0 as DepictSearch, $eb064bc3350276c1$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $eb064bc3350276c1$export$f2dc7e4e4aa11abb as SearchPage, $f3b7124b76123e44$export$aa14a9f43128f61f as ProductCardError, $169c13c0531d91d2$export$d86a33413558014e as open_modal_with_alignment, $5eaa00b951637e96$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $1308a7816c3d4f2d$export$b3ad617e9036868 as align_field, $1308a7816c3d4f2d$export$3f238c96c45e6cc6 as ALIGN_TOP, $1308a7816c3d4f2d$export$902f8b4a7dae5d78 as ALIGN_WIDTH_ON_MODAL, $1308a7816c3d4f2d$export$7895aadd1956b1c7 as ALIGN_LEFT, $1308a7816c3d4f2d$export$6060bc6bee850eb6 as SET_CENTERED_LEFT, $a9c7ba6087881ac2$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $cc64aabf2c7a1f1a$export$1233ca167bf71f9a as styles_to_valid_css_string, $e56d241d0f33d459$export$fe334901e8bebd57 as disable_scrolling, $573c007c697a1831$export$d0596b5cae35ad4 as open_search_with_shift_slash, $284849364a6ef73a$export$e015ed2f2950f2e3 as DepictAPI, $00a5b94f0c11efbb$export$d9f36cf74e24d595 as media_query_to_accessor, $e60a76195ac6d408$export$689e204eadb33baf as setup_fast_leave, $a61a2051e15c8d7a$export$5196e4c01fa56fcb as show_toast, $60ec7a29849d81db$export$a71e92cfbb498adc as SolidFormatPrice, $37e8c97bb6876197$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $bc2337c9a05ecd18$export$acb3eaade4b23afd as BasePlaceholder, $ceafb6fb91c6f394$export$89c6019e4baa40b1 as TextPlaceholder, $3ab4aa97880fb88d$export$3f37af283f8fb843 as ImagePlaceholder, $f9fd3017c20b774a$export$3ccaa27d81dd8556 as PageReplacer, $d399250dfa491636$export$864d304a0bc46829 as defaultGridSpacing, $d399250dfa491636$export$c3834fa86c616831 as defaultColsAtSize, $d399250dfa491636$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $8db9a15135765c11$export$83d89fbfd8236492 as version, $a3026fb727bc7550$export$316f6f283ae64765 as SearchField };
+export { $a604a8ffa4e4c03f$export$e417c49320921907 as createDeparallelizedNoDropResource, $01c33966d9ddb108$export$f50b88e2a00918b5 as throw_globally, $40411f2ec772c376$export$9265e66f26f8e383 as ClassicSearchModal, $06fcd2a345efd24d$export$b0c55aa2e87c4be7 as SearchModalV2, $7fbaab3d3dafb4f5$export$9d4a4b669b1929ab as ModernResponsiveContainedImage, $6a439680ae7e9ba3$export$3e41faf802a29e71 as Tab, $6a439680ae7e9ba3$export$b2539bed5023c21c as Tabs, $6b0fd8fd20df8ccf$export$d4973c31938cbfd1 as ShopTheLookButton, $972f6bce0f9d61be$export$e183a13865960371 as history_dot_state_to_state, $2855bffe06ef7a03$export$916e6850778505f6 as strip_encoded_filter_and_sort, $2855bffe06ef7a03$export$58aa3f171519b6d7 as encode_filters, $2855bffe06ef7a03$export$f934fa24c3a86811 as decode_filters, $2855bffe06ef7a03$export$62acb285a7579555 as encode_sorting, $2855bffe06ef7a03$export$766e9676e74997d3 as decode_sorting, $4df489344a0f97c7$export$d7b7ab832c20e2f4 as shopifyContainedImageContextSymbol, $5441862cd2f5e111$export$e68cff63f76bd15b as ListingProvider, $5441862cd2f5e111$export$8d0c4fdbb05a2f2e as useListing, $1e69163caedaab4e$export$11354f017ddc9790 as ProductCardIndexProvider, $1e69163caedaab4e$export$e3faf4d95300054f as useProductCardIndex, $4df489344a0f97c7$export$e4b984597b71e989 as ShopifyContainedImage, $002f09d00aac50b2$export$6649caad96ef8870 as SlidableItems, $fc830a7ee59416ef$export$ebdc3711f7e02ccd as make_accurate_width_accessor, $d5d7e58c5c9d8db0$export$9574e176201e5e8d as RecommendationSlider, $b432b11321ad4c97$export$9756467d34d91cdb as RecommendationGrid, $56047603f9d212b6$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $56047603f9d212b6$export$e6fffe67d4cdd848 as makeSizeAccessor, $801e8845d3fa3653$export$94026ee33dbabc26 as ImageContainer, $74777e8fe65b3dcb$export$b69d0d92862de18b as SentryErrorBoundary, $ad371564683947ab$export$6c6d7a51fa9aa15d as ExpandingDetails, $e18ab2868df26f40$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $4711a82d08d2021b$export$fecbb157621501bd as SelectedFilters, $f6b0500577e1b210$export$3f1a388cc0d8fed7 as FilterBody, $44aa24b1bb793549$export$b288c38ae3fddb56 as create_modified_filters, $63f1f8dbcd07d3b0$export$d21e32dfedac04be as SolidLayout, $d5f1e6a0f9117286$export$79b1565500412d9b as general_modal_abstraction, $9783d437ad61594c$export$3b621d86b1566b2 as CrossIcon, $ca6ab5f08bd28bca$export$8be2714ec7f169ee as GenericSliderArrowButton, $50aebf5b445518eb$export$58e808b1db15d3bc as fetchDepictRecommendations, $f5f54892fd0c7d9f$export$de035477d6fef996 as QuickLinks, $f5f54892fd0c7d9f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $fa332ea03168857c$export$b91cec6bdc6b32a1 as CategoryTitle, $702d7656a373973e$export$824dde41348efed1 as embedded_num_products, $160ea2b55d8772d2$export$c1a6b039e689a58e as get_listings, $f5f54892fd0c7d9f$export$f34314aa9505732e as DepictCategory, $f5f54892fd0c7d9f$export$e2bf8ce7779e827e as CategoryPage, $eb064bc3350276c1$export$ac6237957a15b3f0 as DepictSearch, $eb064bc3350276c1$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $eb064bc3350276c1$export$f2dc7e4e4aa11abb as SearchPage, $f3b7124b76123e44$export$aa14a9f43128f61f as ProductCardError, $169c13c0531d91d2$export$d86a33413558014e as open_modal_with_alignment, $5eaa00b951637e96$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $1308a7816c3d4f2d$export$b3ad617e9036868 as align_field, $1308a7816c3d4f2d$export$3f238c96c45e6cc6 as ALIGN_TOP, $1308a7816c3d4f2d$export$902f8b4a7dae5d78 as ALIGN_WIDTH_ON_MODAL, $1308a7816c3d4f2d$export$7895aadd1956b1c7 as ALIGN_LEFT, $1308a7816c3d4f2d$export$6060bc6bee850eb6 as SET_CENTERED_LEFT, $a9c7ba6087881ac2$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $cc64aabf2c7a1f1a$export$1233ca167bf71f9a as styles_to_valid_css_string, $e56d241d0f33d459$export$fe334901e8bebd57 as disable_scrolling, $573c007c697a1831$export$d0596b5cae35ad4 as open_search_with_shift_slash, $284849364a6ef73a$export$e015ed2f2950f2e3 as DepictAPI, $00a5b94f0c11efbb$export$d9f36cf74e24d595 as media_query_to_accessor, $e60a76195ac6d408$export$689e204eadb33baf as setup_fast_leave, $a61a2051e15c8d7a$export$5196e4c01fa56fcb as show_toast, $60ec7a29849d81db$export$a71e92cfbb498adc as SolidFormatPrice, $37e8c97bb6876197$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $bc2337c9a05ecd18$export$acb3eaade4b23afd as BasePlaceholder, $ceafb6fb91c6f394$export$89c6019e4baa40b1 as TextPlaceholder, $3ab4aa97880fb88d$export$3f37af283f8fb843 as ImagePlaceholder, $f9fd3017c20b774a$export$3ccaa27d81dd8556 as PageReplacer, $d399250dfa491636$export$864d304a0bc46829 as defaultGridSpacing, $d399250dfa491636$export$c3834fa86c616831 as defaultColsAtSize, $d399250dfa491636$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $8db9a15135765c11$export$83d89fbfd8236492 as version, $a3026fb727bc7550$export$316f6f283ae64765 as SearchField };

package/server/latest/index.cjs

@@ -29,6 +29,8 @@ $parcel$export(module.exports, "decode_sorting", () => $1ab22f2cd39b3061$export$
 $parcel$export(module.exports, "shopifyContainedImageContextSymbol", () => $a33065cfed827fc0$export$d7b7ab832c20e2f4);
 $parcel$export(module.exports, "ListingProvider", () => $84798aaa863a4909$export$e68cff63f76bd15b);
 $parcel$export(module.exports, "useListing", () => $84798aaa863a4909$export$8d0c4fdbb05a2f2e);
+$parcel$export(module.exports, "ProductCardIndexProvider", () => $129b9b9c010039d0$export$11354f017ddc9790);
+$parcel$export(module.exports, "useProductCardIndex", () => $129b9b9c010039d0$export$e3faf4d95300054f);
 $parcel$export(module.exports, "ShopifyContainedImage", () => $a33065cfed827fc0$export$e4b984597b71e989);
 $parcel$export(module.exports, "SlidableItems", () => $a0e53f99354809d9$export$6649caad96ef8870);
 $parcel$export(module.exports, "make_accurate_width_accessor", () => $f13855d1b951b24a$export$ebdc3711f7e02ccd);
@@ -86,7 +88,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.7";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.8";
 function $53df95e470b2f8d2$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $5vyXB$solidjs.createSignal();
   const deparallelizedFetcher = $5vyXB$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -324,6 +326,20 @@ function $5f7d55c710fd1bc2$var$unwrapping_helper(elements) {
   } 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__*/$5vyXB$solidjs.createContext();
+function $129b9b9c010039d0$export$11354f017ddc9790(props) {
+  return $5vyXB$solidjsweb.createComponent($129b9b9c010039d0$var$ProductCardIndexContext.Provider, {
+    get value() {
+      return props.index_;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $129b9b9c010039d0$export$e3faf4d95300054f() {
+  return $5vyXB$solidjs.useContext($129b9b9c010039d0$var$ProductCardIndexContext);
+}
 let $a73063cc642f3e5f$var$printedCloneError = false;
 function $a73063cc642f3e5f$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $5vyXB$solidjs.createMemo(() => {
@@ -377,9 +393,22 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
             $5vyXB$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);
           }
         }
-        return product_card_template_(display, {
-          set_on_index_change: fn => $5vyXB$solidjs.runWithOwner(owner, () => $5vyXB$solidjs.createEffect(() => fn(index())))
+        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 => $5vyXB$solidjs.runWithOwner(owner, () => $5vyXB$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);
       $5vyXB$solidjs.createEffect(() => {
@@ -404,7 +433,8 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
       });
       return [
       // Show content block before product card, so it's *at* that index
-      possible_content_block, product_card_resource]; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+      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
     }
   });
 }
@@ -1841,6 +1871,33 @@ var $93304d59a9747aa6$var$_tmpl$ = ["<div", ' class="', '" style="', '">', "</di
 function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
   return $5vyXB$solidjsweb.ssr($93304d59a9747aa6$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `${$5vyXB$solidjsweb.escape($5vyXB$solidjsweb.escape("s-image-container", true), true)} ${$5vyXB$solidjsweb.escape(props.class, true) || ""}`, $5vyXB$solidjsweb.ssrStyle(`padding-bottom:calc(calc(1 / ${props.aspectRatio}) * 100%)`), $5vyXB$solidjsweb.escape(props.children));
 }
+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 racingTimeout = setTimeout(() => {
+    $3ea8e0af95b5b7d2$var$browserIsBugged = true;
+    cancel();
+    callback({
+      didTimeout: false,
+      timeRemaining() {
+        return 500;
+      }
+    });
+  }, timeout + 1000);
+  return cancel;
+}
 function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $5vyXB$solidjs.createSignal(0);
   const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => {
@@ -1865,6 +1922,7 @@ function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
 }
 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) {
   // Enable reactive props
   const otherOptions = $5vyXB$solidjs.createMemo(() => {
@@ -1879,9 +1937,8 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
     return cloned_props;
   });
   const src_options = $5vyXB$solidjs.createMemo(() => {
-    const src = new URL(props.src, location.origin);
-    const fallback_src = $19950faaac026e09$var$generateImageUrl(src, 400);
-    const srcset = $19950faaac026e09$var$make_srcset(src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const fallback_src = $19950faaac026e09$var$generateImageUrl(props.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]);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -1892,17 +1949,27 @@ 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 [hasSetSize, setHasSetSize] = $5vyXB$solidjs.createSignal(false);
   const [hasDecoded, setHasDecoded] = $5vyXB$solidjs.createSignal(false);
+  const productCardIndexAccessor = $129b9b9c010039d0$export$e3faf4d95300054f();
   const sizePX = $5vyXB$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 = $5vyXB$solidjs.createMemo(() => productCardIndexAccessor?.() < 8);
+  const loadLazily = $5vyXB$solidjs.createMemo(() => {
+    const {
+      loading: loading
+    } = props;
+    if (loading === "force-lazy") return true;
+    return loading === "lazy" && !isPrioritisedImage();
+  });
   // 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 => {
     if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
+    if ($5vyXB$solidjs.untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately
     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 = () => requestIdleCallback(deadline => {
+    const processStackWhenIdle = () => $3ea8e0af95b5b7d2$export$2972b890694ced75($5vyXB$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) {
@@ -1917,7 +1984,7 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
       }
       // 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
     );
@@ -1931,7 +1998,8 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   img.classList.add("s-responsive-image");
   if (listingContext) {
     let prevValue;
-    const aspectRatios = listingContext[$19950faaac026e09$export$f8945274f08a3105] ||= new (0, $5vyXB$depictaiutilishared.ListenableSet)();
+    const aspectRatios = listingContext[$19950faaac026e09$export$f8945274f08a3105] ||= new Set();
+    const [, setMostPrevalentAspectRatio] = listingContext[$19950faaac026e09$export$6066eb417ed2e9f7] ||= $5vyXB$solidjs.createSignal();
     img.addEventListener("load", $5vyXB$depictaiutilishared.catchify(() => {
       // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2
       const aspectRatio_ = img.naturalWidth / img.naturalHeight;
@@ -1941,13 +2009,19 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
       } : 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 = $5vyXB$depictaiutilishared.findMostFrequentItem(asArray);
+      setMostPrevalentAspectRatio(mostPrevalentAspectRatio);
     }));
     $5vyXB$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $5vyXB$solidjs.onCleanup(() => gotCleanedUp = true);
   $5vyXB$solidjsweb.spread(img, $5vyXB$solidjs.mergeProps(otherOptions), false, true);
   $5vyXB$solidjs.createEffect(() => {
-    if (!props.size()) return; // wait until we have a size
+    if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
     const handler = $5vyXB$depictaiutilishared.catchify(() => {
       if (gotCleanedUp) return;
@@ -1972,7 +2046,7 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
     // 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 (props.loading === "lazy") {
+    if (loadLazily()) {
       // 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);
@@ -1999,9 +2073,10 @@ function $19950faaac026e09$var$make_srcset(url, resolutions) {
   return resolutions.map(width => `${$19950faaac026e09$var$generateImageUrl(url, width)} ${width}w`).join(", ");
 }
 function $19950faaac026e09$var$generateImageUrl(url, width) {
-  // This function is quite slow, we maybe could do string concat with encodeURIComponent instead if shopify handles double width params well?
-  url.searchParams.set("width", width);
-  return url.href;
+  // 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__*/$5vyXB$solidjs.createSignal();
 const $a33065cfed827fc0$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
@@ -2011,40 +2086,25 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
     // create a signal that's the same for all items in this listing
     context[$a33065cfed827fc0$export$d7b7ab832c20e2f4] = $5vyXB$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 aspectRatiosSet = context ?
-  // If the context exists we have to create the set here as getting it here would be too late when it's created by ShopifyResponsiveImg below
-  context[(0, $19950faaac026e09$export$f8945274f08a3105)] ||= new (0, $5vyXB$depictaiutilishared.ListenableSet)() : undefined;
-  const [aspectRatios, setAspectRatios] = $5vyXB$solidjs.createSignal(aspectRatiosSet, {
-    equals: false
-  });
-  const aspectRatioToUse = $5vyXB$solidjs.createMemo(() => {
-    const aspectRatiosSet = aspectRatios(); // This signal "changes" to the same set every time the set changes, so we can use it as a dependency here
-    useMostPrevalentAspectRatio: {
-      if (!aspectRatiosSet || !props.autoAdjustAspectRatio) break useMostPrevalentAspectRatio;
-      // Get the aspect ratio that most of the loaded images inside the ListingProvider we are, load
-      const asArray = [...aspectRatiosSet].map(({
-        aspectRatio_: aspectRatio_
-      }) => aspectRatio_);
-      const mostPrevalentAspectRatio = $5vyXB$depictaiutilishared.findMostFrequentItem(asArray);
-      if (mostPrevalentAspectRatio) return `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, ${mostPrevalentAspectRatio})`;
-    }
-    return props.aspectRatio;
-  });
-  const container = $5vyXB$solidjsweb.createComponent((0, $93304d59a9747aa6$export$94026ee33dbabc26), {
-    get aspectRatio() {
-      return aspectRatioToUse();
-    },
-    get ["class"]() {
+  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)] ||= $5vyXB$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 = $5vyXB$solidjs.getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
-  for (const event of ["add", "delete"]) {
-    aspectRatiosSet?.addEventListener(event, () => setAspectRatios(aspectRatiosSet));
-    $5vyXB$solidjs.onCleanup(() => aspectRatiosSet?.removeEventListener(event, () => setAspectRatios(aspectRatiosSet)));
-  }
   $5vyXB$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