@depict-ai/ui 4.0.7 → 4.0.8

package/ES10/index.js

@@ -1,7 +1,7 @@
-import { add_to_version_info as $8tj43$add_to_version_info, deparallelize_no_drop as $8tj43$deparallelize_no_drop, catchify as $8tj43$catchify, make_random_classname as $8tj43$make_random_classname, ContainedImage as $8tj43$ContainedImage, standard_price_format as $8tj43$standard_price_format, javascript_media_query as $8tj43$javascript_media_query, dlog as $8tj43$dlog, camelCasifyObject as $8tj43$camelCasifyObject, buildThresholdList as $8tj43$buildThresholdList, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, observer as $8tj43$observer, report as $8tj43$report, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, ListenableSet as $8tj43$ListenableSet, findMostFrequentItem as $8tj43$findMostFrequentItem, queueMacroTask as $8tj43$queueMacroTask, dwarn as $8tj43$dwarn, slider_fading_factory as $8tj43$slider_fading_factory, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, n_col_styling_with_dist as $8tj43$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $8tj43$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $8tj43$layout_get_total_rec_amount_for_row, layout_media_query_header as $8tj43$layout_media_query_header, use_href_accessor as $8tj43$use_href_accessor, get_session_id as $8tj43$get_session_id, add_version_query_params as $8tj43$add_version_query_params, base_url as $8tj43$base_url, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, slider_fractional_factory as $8tj43$slider_fractional_factory, useExpandingContainer as $8tj43$useExpandingContainer, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, snakeCasifyObject as $8tj43$snakeCasifyObject, fetch_retry as $8tj43$fetch_retry, make_url_with_query_params as $8tj43$make_url_with_query_params, sort_obj as $8tj43$sort_obj, is_debug as $8tj43$is_debug, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { createSignal as $8tj43$createSignal, createResource as $8tj43$createResource, createEffect as $8tj43$createEffect, untrack as $8tj43$untrack, createMemo as $8tj43$createMemo, onCleanup as $8tj43$onCleanup, Show as $8tj43$Show, createComputed as $8tj43$createComputed, For as $8tj43$For, getOwner as $8tj43$getOwner, runWithOwner as $8tj43$runWithOwner, on as $8tj43$on, Index as $8tj43$Index, batch as $8tj43$batch, ErrorBoundary as $8tj43$ErrorBoundary, createContext as $8tj43$createContext, useContext as $8tj43$useContext, mergeProps as $8tj43$mergeProps1, createUniqueId as $8tj43$createUniqueId, createRenderEffect as $8tj43$createRenderEffect, createSelector as $8tj43$createSelector, children as $8tj43$children, splitProps as $8tj43$splitProps, createRoot as $8tj43$createRoot, Suspense as $8tj43$Suspense, createReaction as $8tj43$createReaction, mapArray as $8tj43$mapArray } from "solid-js";
+import { add_to_version_info as $8tj43$add_to_version_info, deparallelize_no_drop as $8tj43$deparallelize_no_drop, catchify as $8tj43$catchify, make_random_classname as $8tj43$make_random_classname, ContainedImage as $8tj43$ContainedImage, standard_price_format as $8tj43$standard_price_format, javascript_media_query as $8tj43$javascript_media_query, dlog as $8tj43$dlog, camelCasifyObject as $8tj43$camelCasifyObject, buildThresholdList as $8tj43$buildThresholdList, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, observer as $8tj43$observer, report as $8tj43$report, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, queueMacroTask as $8tj43$queueMacroTask, findMostFrequentItem as $8tj43$findMostFrequentItem, dwarn as $8tj43$dwarn, slider_fading_factory as $8tj43$slider_fading_factory, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, n_col_styling_with_dist as $8tj43$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $8tj43$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $8tj43$layout_get_total_rec_amount_for_row, layout_media_query_header as $8tj43$layout_media_query_header, use_href_accessor as $8tj43$use_href_accessor, get_session_id as $8tj43$get_session_id, add_version_query_params as $8tj43$add_version_query_params, base_url as $8tj43$base_url, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, slider_fractional_factory as $8tj43$slider_fractional_factory, useExpandingContainer as $8tj43$useExpandingContainer, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, snakeCasifyObject as $8tj43$snakeCasifyObject, fetch_retry as $8tj43$fetch_retry, make_url_with_query_params as $8tj43$make_url_with_query_params, sort_obj as $8tj43$sort_obj, is_debug as $8tj43$is_debug, ListenableSet as $8tj43$ListenableSet1, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { createSignal as $8tj43$createSignal, createResource as $8tj43$createResource, createEffect as $8tj43$createEffect, untrack as $8tj43$untrack, createMemo as $8tj43$createMemo, onCleanup as $8tj43$onCleanup, Show as $8tj43$Show, createComputed as $8tj43$createComputed, For as $8tj43$For, getOwner as $8tj43$getOwner, runWithOwner as $8tj43$runWithOwner, createContext as $8tj43$createContext, useContext as $8tj43$useContext, on as $8tj43$on, Index as $8tj43$Index, batch as $8tj43$batch, ErrorBoundary as $8tj43$ErrorBoundary, mergeProps as $8tj43$mergeProps1, createUniqueId as $8tj43$createUniqueId, createRenderEffect as $8tj43$createRenderEffect, createSelector as $8tj43$createSelector, children as $8tj43$children, splitProps as $8tj43$splitProps, createRoot as $8tj43$createRoot, Suspense as $8tj43$Suspense, createReaction as $8tj43$createReaction, mapArray as $8tj43$mapArray } from "solid-js";
 import { template as $8tj43$template, getNextElement as $8tj43$getNextElement, addEventListener as $8tj43$addEventListener, insert as $8tj43$insert, memo as $8tj43$memo, runHydrationEvents as $8tj43$runHydrationEvents, createComponent as $8tj43$createComponent, getNextMarker as $8tj43$getNextMarker, use as $8tj43$use, effect as $8tj43$effect, classList as $8tj43$classList, setAttribute as $8tj43$setAttribute, delegateEvents as $8tj43$delegateEvents, style as $8tj43$style, className as $8tj43$className, spread as $8tj43$spread, mergeProps as $8tj43$mergeProps, setProperty as $8tj43$setProperty, isServer as $8tj43$isServer, Dynamic as $8tj43$Dynamic } from "solid-js/web";
-import { ListenableSet as $8tj43$ListenableSet1, catchify as $8tj43$catchify1, use_href_accessor as $8tj43$use_href_accessor1, report as $8tj43$report1 } from "@depict-ai/utilishared/ES10";
+import { ListenableSet as $8tj43$ListenableSet, catchify as $8tj43$catchify1, use_href_accessor as $8tj43$use_href_accessor1, report as $8tj43$report1 } from "@depict-ai/utilishared/ES10";
 import $8tj43$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
 import $8tj43$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
 import $8tj43$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";
@@ -10,7 +10,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.7";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.8";
 function $a604a8ffa4e4c03f$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $8tj43$createSignal();
   const deparallelizedFetcher = $8tj43$deparallelize_no_drop(async dependencyValue => {
@@ -369,6 +369,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__*/$8tj43$createContext();
+function $1e69163caedaab4e$export$11354f017ddc9790(props) {
+  return $8tj43$createComponent($1e69163caedaab4e$var$ProductCardIndexContext.Provider, {
+    get value() {
+      return props.index_;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $1e69163caedaab4e$export$e3faf4d95300054f() {
+  return $8tj43$useContext($1e69163caedaab4e$var$ProductCardIndexContext);
+}
 let $2d7bad8684bc7f44$var$printedCloneError = false;
 function $2d7bad8684bc7f44$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $8tj43$createMemo(() => {
@@ -426,9 +440,22 @@ function $2d7bad8684bc7f44$export$43f0fb951fcb0c54(_ref) {
             $8tj43$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 => $8tj43$runWithOwner(owner, () => $8tj43$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 => $8tj43$runWithOwner(owner, () => $8tj43$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);
       $8tj43$createEffect(() => {
@@ -453,7 +480,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
     }
   });
 }
@@ -2425,6 +2453,34 @@ function $801e8845d3fa3653$export$94026ee33dbabc26(props) {
     return _el$;
   })();
 }
+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] = $8tj43$createSignal(0);
   const resizeObserver = new ResizeObserver($8tj43$catchify(records => {
@@ -2452,6 +2508,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 = $8tj43$createMemo(() => {
@@ -2466,9 +2523,8 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     return cloned_props;
   });
   const src_options = $8tj43$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,
@@ -2479,17 +2535,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] = $8tj43$createSignal(false);
   const [hasDecoded, setHasDecoded] = $8tj43$createSignal(false);
+  const productCardIndexAccessor = $1e69163caedaab4e$export$e3faf4d95300054f();
   const sizePX = $8tj43$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 = $8tj43$createMemo(() => (productCardIndexAccessor === null || productCardIndexAccessor === void 0 ? void 0 : productCardIndexAccessor()) < 8);
+  const loadLazily = $8tj43$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 ($8tj43$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($8tj43$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) {
@@ -2504,7 +2570,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
     );
@@ -2518,7 +2584,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, $8tj43$ListenableSet)());
+    const aspectRatios = listingContext[$56047603f9d212b6$export$f8945274f08a3105] || (listingContext[$56047603f9d212b6$export$f8945274f08a3105] = new Set());
+    const [, setMostPrevalentAspectRatio] = listingContext[$56047603f9d212b6$export$6066eb417ed2e9f7] || (listingContext[$56047603f9d212b6$export$6066eb417ed2e9f7] = $8tj43$createSignal());
     img.addEventListener("load", $8tj43$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;
@@ -2528,13 +2595,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 = $8tj43$findMostFrequentItem(asArray);
+      setMostPrevalentAspectRatio(mostPrevalentAspectRatio);
     }));
     $8tj43$onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $8tj43$onCleanup(() => gotCleanedUp = true);
   $8tj43$spread(img, $8tj43$mergeProps1(otherOptions), false, true);
   $8tj43$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 = $8tj43$catchify(() => {
       if (gotCleanedUp) return;
@@ -2559,7 +2635,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);
@@ -2586,9 +2662,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__*/$8tj43$createSignal();
 const $4df489344a0f97c7$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
@@ -2598,41 +2675,23 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     // create a signal that's the same for all items in this listing
     context[$4df489344a0f97c7$export$d7b7ab832c20e2f4] = $8tj43$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, $8tj43$ListenableSet)()) : undefined;
-  const [aspectRatios, setAspectRatios] = $8tj43$createSignal(aspectRatiosSet, {
-    equals: false
-  });
-  const aspectRatioToUse = $8tj43$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 = $8tj43$findMostFrequentItem(asArray);
-      if (mostPrevalentAspectRatio) return "var(".concat((0, $5eaa00b951637e96$export$8a2234b5b1a5ebd4), ", ").concat(mostPrevalentAspectRatio, ")");
-    }
-    return props.aspectRatio;
-  });
-  const container = $8tj43$createComponent((0, $801e8845d3fa3653$export$94026ee33dbabc26), {
-    get aspectRatio() {
-      return aspectRatioToUse();
-    },
-    get ["class"]() {
+  const [mostPrevalentAspectRatio] = context ? context[(0, $56047603f9d212b6$export$6066eb417ed2e9f7)] || (context[(0, $56047603f9d212b6$export$6066eb417ed2e9f7)] = $8tj43$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 = $8tj43$getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
-  for (const event of ["add", "delete"]) {
-    aspectRatiosSet === null || aspectRatiosSet === void 0 || aspectRatiosSet.addEventListener(event, () => setAspectRatios(aspectRatiosSet));
-    $8tj43$onCleanup(() => aspectRatiosSet === null || aspectRatiosSet === void 0 ? void 0 : aspectRatiosSet.removeEventListener(event, () => setAspectRatios(aspectRatiosSet)));
-  }
   $8tj43$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
@@ -3908,7 +3967,7 @@ const $6a439680ae7e9ba3$var$TabsContext = /*@__PURE__*/$8tj43$createContext();
 const $6a439680ae7e9ba3$var$useTabs = () => $8tj43$useContext($6a439680ae7e9ba3$var$TabsContext);
 function $6a439680ae7e9ba3$export$b2539bed5023c21c(props) {
   return $8tj43$createComponent($6a439680ae7e9ba3$var$TabsContext.Provider, {
-    value: new (0, $8tj43$ListenableSet1)(),
+    value: new (0, $8tj43$ListenableSet)(),
     get children() {
       return $8tj43$createComponent($6a439680ae7e9ba3$var$ActualTabs, $8tj43$mergeProps(props, {
         get children() {
@@ -13373,7 +13432,7 @@ function $d53ebed6f63304e4$export$6d0c9c22f6652669(_ref) {
     number_: num_results,
     i18n_: i18n_
   });
-  const queries_without_content_results_ = new (0, $8tj43$ListenableSet)();
+  const queries_without_content_results_ = new (0, $8tj43$ListenableSet1)();
   const [check_query, set_check_query] = $8tj43$createSignal(false);
   const placeholders_enabled = $8tj43$createMemo(() => {
     // don't show placeholders when the user toggles filters
@@ -15100,4 +15159,4 @@ function $a3026fb727bc7550$var$align_field_modal(alignmentSignals, input, modalV
   });
 }
 $8tj43$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/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] = $gVhhF$solidjs.createSignal();
   const deparallelizedFetcher = $gVhhF$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -429,6 +431,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__*/$gVhhF$solidjs.createContext();
+function $129b9b9c010039d0$export$11354f017ddc9790(props) {
+  return $gVhhF$solidjsweb.createComponent($129b9b9c010039d0$var$ProductCardIndexContext.Provider, {
+    get value() {
+      return props.index_;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $129b9b9c010039d0$export$e3faf4d95300054f() {
+  return $gVhhF$solidjs.useContext($129b9b9c010039d0$var$ProductCardIndexContext);
+}
 let $a73063cc642f3e5f$var$printedCloneError = false;
 function $a73063cc642f3e5f$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $gVhhF$solidjs.createMemo(() => {
@@ -482,9 +498,22 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
             $gVhhF$depictaiutilishared.dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
           }
         }
-        return product_card_template_(display, {
-          set_on_index_change: fn => $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$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 => $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.createEffect(() => fn(index())))
+            });
+            return undefined; // just to satisfy the typing
+          }
         });
+        // renderingResult is guaranteed to be defined here (if rendering returned something) because the children getter of ProductCardIndexProvider is called synchronously (createRenderEffect is used solid-internally)
+        return renderingResult;
       });
       const node_accessor = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(product_card_resource);
       $gVhhF$solidjs.createEffect(() => {
@@ -509,7 +538,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
     }
   });
 }
@@ -2400,6 +2430,33 @@ function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
     return _el$;
   })();
 }
+let $3ea8e0af95b5b7d2$var$browserIsBugged = false;
+function $3ea8e0af95b5b7d2$export$2972b890694ced75(callback, {
+  timeout: timeout
+}) {
+  if ($3ea8e0af95b5b7d2$var$browserIsBugged) timeout /= 4;
+  const cancel = () => {
+    cancelIdleCallback(idleHandle);
+    clearTimeout(racingTimeout);
+  };
+  const idleHandle = requestIdleCallback(deadline => {
+    cancel();
+    return callback(deadline);
+  }, {
+    timeout: timeout
+  });
+  const 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] = $gVhhF$solidjs.createSignal(0);
   const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => {
@@ -2424,6 +2481,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 = $gVhhF$solidjs.createMemo(() => {
@@ -2438,9 +2496,8 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
     return cloned_props;
   });
   const src_options = $gVhhF$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,
@@ -2451,17 +2508,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] = $gVhhF$solidjs.createSignal(false);
   const [hasDecoded, setHasDecoded] = $gVhhF$solidjs.createSignal(false);
+  const productCardIndexAccessor = $129b9b9c010039d0$export$e3faf4d95300054f();
   const sizePX = $gVhhF$solidjs.createMemo(() => `${props.size()}px`); // props.size could be a getter that expects a cleanup so get it in this memo instead of where we set img.sizes
   const listingContext = $84798aaa863a4909$export$8d0c4fdbb05a2f2e();
+  const isPrioritisedImage = $gVhhF$solidjs.createMemo(() => productCardIndexAccessor?.() < 8);
+  const loadLazily = $gVhhF$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 ($gVhhF$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($gVhhF$depictaiutilishared.catchify(deadline => {
       const start = performance.now();
       const thirdDeadlineTime = deadline.timeRemaining() / 3; // observers coming after this take up 2-3x the time so don't use all of it
       for (const fn of newStack) {
@@ -2476,7 +2543,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
     );
@@ -2490,7 +2557,8 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   img.classList.add("s-responsive-image");
   if (listingContext) {
     let prevValue;
-    const aspectRatios = listingContext[$19950faaac026e09$export$f8945274f08a3105] ||= new (0, $gVhhF$depictaiutilishared.ListenableSet)();
+    const aspectRatios = listingContext[$19950faaac026e09$export$f8945274f08a3105] ||= new Set();
+    const [, setMostPrevalentAspectRatio] = listingContext[$19950faaac026e09$export$6066eb417ed2e9f7] ||= $gVhhF$solidjs.createSignal();
     img.addEventListener("load", $gVhhF$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;
@@ -2500,13 +2568,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 = $gVhhF$depictaiutilishared.findMostFrequentItem(asArray);
+      setMostPrevalentAspectRatio(mostPrevalentAspectRatio);
     }));
     $gVhhF$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $gVhhF$solidjs.onCleanup(() => gotCleanedUp = true);
   $gVhhF$solidjsweb.spread(img, $gVhhF$solidjs.mergeProps(otherOptions), false, true);
   $gVhhF$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 = $gVhhF$depictaiutilishared.catchify(() => {
       if (gotCleanedUp) return;
@@ -2531,7 +2605,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);
@@ -2558,9 +2632,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__*/$gVhhF$solidjs.createSignal();
 const $a33065cfed827fc0$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
@@ -2570,40 +2645,25 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
     // create a signal that's the same for all items in this listing
     context[$a33065cfed827fc0$export$d7b7ab832c20e2f4] = $gVhhF$solidjs.createSignal();
   const [currentImageSize, setCurrentImageSize] = context?.[$a33065cfed827fc0$export$d7b7ab832c20e2f4] || $a33065cfed827fc0$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
-  const 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, $gVhhF$depictaiutilishared.ListenableSet)() : undefined;
-  const [aspectRatios, setAspectRatios] = $gVhhF$solidjs.createSignal(aspectRatiosSet, {
-    equals: false
-  });
-  const aspectRatioToUse = $gVhhF$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 = $gVhhF$depictaiutilishared.findMostFrequentItem(asArray);
-      if (mostPrevalentAspectRatio) return `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, ${mostPrevalentAspectRatio})`;
-    }
-    return props.aspectRatio;
-  });
-  const container = $gVhhF$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)] ||= $gVhhF$solidjs.createSignal() : [];
+  const container = $93304d59a9747aa6$export$94026ee33dbabc26({
+    // Write getters manually instead of using JSX, so we can do more complex logic in the aspectRatio getter without increasing bundle size
+    get class() {
       return props.class;
+    },
+    get aspectRatio() {
+      if (props.autoAdjustAspectRatio) {
+        const targetRatio = mostPrevalentAspectRatio?.();
+        if (targetRatio != undefined) return `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, ${targetRatio})`;
+      }
+      return props.aspectRatio;
     }
   });
   const owner = $gVhhF$solidjs.getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
-  for (const event of ["add", "delete"]) {
-    aspectRatiosSet?.addEventListener(event, () => setAspectRatios(aspectRatiosSet));
-    $gVhhF$solidjs.onCleanup(() => aspectRatiosSet?.removeEventListener(event, () => setAspectRatios(aspectRatiosSet)));
-  }
   $gVhhF$solidjs.createEffect(() => {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor