@depict-ai/ui 4.0.7 → 4.0.9

package/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.7";
+export const version = "4.0.9";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;
@@ -388,6 +388,17 @@ export function ImageContainer(props: {
   class?: string;
   children?: JSX.Element;
 }): HTMLDivElement;
+/**
+ * Provider to wrap every product card that gets rendered in (in PLPResults rendering internals), enables using useProductCardIndex anywhere inside the product card to get the index of the product card.
+ */
+export function ProductCardIndexProvider(props: {
+  children: JSX.Element;
+  index_: Accessor<number>;
+}): JSX.Element;
+/**
+ * Use this to get an accessor containing the index of your product card.
+ */
+export function useProductCardIndex(): Accessor<number> | undefined;
 /**
  * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
  */
@@ -395,6 +406,7 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 /**
  * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
  * Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
+ * If ran within Depict product card rendering, within one of the first 8 product cards, those images will be loaded immediately and loading="lazy" will be ignored for them (unless you set it to "force-lazy").
  * This is used for our responsive images:
  * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
  * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
@@ -404,8 +416,9 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 export function ShopifyResponsiveImg(props: {
   resolutions?: number[];
   size: Accessor<number>;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading"> & {
   src: string;
+  loading?: "eager" | "lazy" | "force-lazy";
 }): JSX.Element;
 type ImagePlaceholderBaseOptions = {
   style?: JSX.CSSProperties;
@@ -1194,7 +1207,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared").Node_Array;
+}): import("@depict-ai/utilishared/latest").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1326,7 +1339,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

package/latest/index.js

@@ -1,13 +1,13 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, catchify as $9HbP8$catchify, make_random_classname as $9HbP8$make_random_classname, ContainedImage as $9HbP8$ContainedImage, standard_price_format as $9HbP8$standard_price_format, javascript_media_query as $9HbP8$javascript_media_query, dlog as $9HbP8$dlog, camelCasifyObject as $9HbP8$camelCasifyObject, buildThresholdList as $9HbP8$buildThresholdList, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, observer as $9HbP8$observer, report as $9HbP8$report, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, ListenableSet as $9HbP8$ListenableSet, findMostFrequentItem as $9HbP8$findMostFrequentItem, queueMacroTask as $9HbP8$queueMacroTask, dwarn as $9HbP8$dwarn, slider_fading_factory as $9HbP8$slider_fading_factory, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, use_href_accessor as $9HbP8$use_href_accessor, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, base_url as $9HbP8$base_url, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, slider_fractional_factory as $9HbP8$slider_fractional_factory, useExpandingContainer as $9HbP8$useExpandingContainer, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, fetch_retry as $9HbP8$fetch_retry, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, is_debug as $9HbP8$is_debug, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { createSignal as $9HbP8$createSignal, createResource as $9HbP8$createResource, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, createMemo as $9HbP8$createMemo, onCleanup as $9HbP8$onCleanup, Show as $9HbP8$Show, createComputed as $9HbP8$createComputed, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, on as $9HbP8$on, Index as $9HbP8$Index, batch as $9HbP8$batch, ErrorBoundary as $9HbP8$ErrorBoundary, createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, mergeProps as $9HbP8$mergeProps1, createUniqueId as $9HbP8$createUniqueId, createRenderEffect as $9HbP8$createRenderEffect, createSelector as $9HbP8$createSelector, children as $9HbP8$children, splitProps as $9HbP8$splitProps, createRoot as $9HbP8$createRoot, Suspense as $9HbP8$Suspense, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
+import { add_to_version_info as $9HbP8$add_to_version_info, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, catchify as $9HbP8$catchify, make_random_classname as $9HbP8$make_random_classname, ContainedImage as $9HbP8$ContainedImage, standard_price_format as $9HbP8$standard_price_format, javascript_media_query as $9HbP8$javascript_media_query, dlog as $9HbP8$dlog, camelCasifyObject as $9HbP8$camelCasifyObject, buildThresholdList as $9HbP8$buildThresholdList, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, observer as $9HbP8$observer, report as $9HbP8$report, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, findMostFrequentItem as $9HbP8$findMostFrequentItem, dwarn as $9HbP8$dwarn, slider_fading_factory as $9HbP8$slider_fading_factory, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, use_href_accessor as $9HbP8$use_href_accessor, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, base_url as $9HbP8$base_url, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, slider_fractional_factory as $9HbP8$slider_fractional_factory, useExpandingContainer as $9HbP8$useExpandingContainer, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, fetch_retry as $9HbP8$fetch_retry, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, is_debug as $9HbP8$is_debug, ListenableSet as $9HbP8$ListenableSet1, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { createSignal as $9HbP8$createSignal, createResource as $9HbP8$createResource, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, createMemo as $9HbP8$createMemo, onCleanup as $9HbP8$onCleanup, Show as $9HbP8$Show, createComputed as $9HbP8$createComputed, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, on as $9HbP8$on, Index as $9HbP8$Index, batch as $9HbP8$batch, ErrorBoundary as $9HbP8$ErrorBoundary, splitProps as $9HbP8$splitProps, mergeProps as $9HbP8$mergeProps1, createUniqueId as $9HbP8$createUniqueId, createRenderEffect as $9HbP8$createRenderEffect, createSelector as $9HbP8$createSelector, children as $9HbP8$children, createRoot as $9HbP8$createRoot, Suspense as $9HbP8$Suspense, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
 import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, addEventListener as $9HbP8$addEventListener, insert as $9HbP8$insert, memo as $9HbP8$memo, runHydrationEvents as $9HbP8$runHydrationEvents, createComponent as $9HbP8$createComponent, getNextMarker as $9HbP8$getNextMarker, use as $9HbP8$use, effect as $9HbP8$effect, classList as $9HbP8$classList, setAttribute as $9HbP8$setAttribute, delegateEvents as $9HbP8$delegateEvents, style as $9HbP8$style, className as $9HbP8$className, spread as $9HbP8$spread, mergeProps as $9HbP8$mergeProps, setProperty as $9HbP8$setProperty, isServer as $9HbP8$isServer, Dynamic as $9HbP8$Dynamic } from "solid-js/web";
-import { ListenableSet as $9HbP8$ListenableSet1, catchify as $9HbP8$catchify1, use_href_accessor as $9HbP8$use_href_accessor1, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
+import { ListenableSet as $9HbP8$ListenableSet, catchify as $9HbP8$catchify1, use_href_accessor as $9HbP8$use_href_accessor1, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
 import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from "solid-js/store";
 
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.7";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.9";
 function $136f1d4d6c7ba6ac$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $9HbP8$createSignal();
   const deparallelizedFetcher = $9HbP8$deparallelize_no_drop(async dependencyValue => {
@@ -350,6 +350,20 @@ function $a52235d12ccf9c88$var$unwrapping_helper(elements) {
   } else if (typeof elements == "function") result.push(...$a52235d12ccf9c88$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
   return result;
 }
+const $b6440e72ed83671a$var$ProductCardIndexContext = /*@__PURE__*/$9HbP8$createContext();
+function $b6440e72ed83671a$export$11354f017ddc9790(props) {
+  return $9HbP8$createComponent($b6440e72ed83671a$var$ProductCardIndexContext.Provider, {
+    get value() {
+      return props.index_;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $b6440e72ed83671a$export$e3faf4d95300054f() {
+  return $9HbP8$useContext($b6440e72ed83671a$var$ProductCardIndexContext);
+}
 let $29ec7cddbe1d3484$var$printedCloneError = false;
 function $29ec7cddbe1d3484$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $9HbP8$createMemo(() => {
@@ -403,9 +417,22 @@ function $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
             $9HbP8$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 => $9HbP8$runWithOwner(owner, () => $9HbP8$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
+        $b6440e72ed83671a$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 => $9HbP8$runWithOwner(owner, () => $9HbP8$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 = $a52235d12ccf9c88$export$2f0cbfbb4354bb52(product_card_resource);
       $9HbP8$createEffect(() => {
@@ -430,7 +457,8 @@ function $29ec7cddbe1d3484$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
     }
   });
 }
@@ -2321,6 +2349,33 @@ function $f18d425032111270$export$94026ee33dbabc26(props) {
     return _el$;
   })();
 }
+let $4ea56971d92eb0cd$var$browserIsBugged = false;
+function $4ea56971d92eb0cd$export$2972b890694ced75(callback, {
+  timeout: timeout
+}) {
+  if ($4ea56971d92eb0cd$var$browserIsBugged) timeout /= 4;
+  const cancel = () => {
+    cancelIdleCallback(idleHandle);
+    clearTimeout(racingTimeout);
+  };
+  const idleHandle = requestIdleCallback(deadline => {
+    cancel();
+    return callback(deadline);
+  }, {
+    timeout: timeout
+  });
+  const racingTimeout = setTimeout(() => {
+    $4ea56971d92eb0cd$var$browserIsBugged = true;
+    cancel();
+    callback({
+      didTimeout: false,
+      timeRemaining() {
+        return 500;
+      }
+    });
+  }, timeout + 1000);
+  return cancel;
+}
 function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $9HbP8$createSignal(0);
   const resizeObserver = new ResizeObserver($9HbP8$catchify(records => {
@@ -2345,23 +2400,11 @@ function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
 }
 const $e8ffe11ed01df0fe$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
 const $e8ffe11ed01df0fe$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
+const $e8ffe11ed01df0fe$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
-  // Enable reactive props
-  const otherOptions = $9HbP8$createMemo(() => {
-    const cloned_props = {
-      ...props
-    };
-    delete cloned_props.resolutions;
-    // @ts-ignore
-    delete cloned_props.size;
-    // @ts-ignore
-    delete cloned_props.src;
-    return cloned_props;
-  });
   const src_options = $9HbP8$createMemo(() => {
-    const src = new URL(props.src, location.origin);
-    const fallback_src = $e8ffe11ed01df0fe$var$generateImageUrl(src, 400);
-    const srcset = $e8ffe11ed01df0fe$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 = $e8ffe11ed01df0fe$var$generateImageUrl(props.src, 400);
+    const srcset = $e8ffe11ed01df0fe$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,
@@ -2370,19 +2413,35 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   });
   // Work around https://github.com/solidjs/solid/issues/1828
   const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
+  const [, otherAttributes] = $9HbP8$splitProps(props, ["resolutions", "size", "src", "srcSet", "loading"]);
   const [hasSetSize, setHasSetSize] = $9HbP8$createSignal(false);
   const [hasDecoded, setHasDecoded] = $9HbP8$createSignal(false);
+  const productCardIndexAccessor = $b6440e72ed83671a$export$e3faf4d95300054f();
   const sizePX = $9HbP8$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 = $011607bdf658f807$export$8d0c4fdbb05a2f2e();
+  const isPrioritisedImage = $9HbP8$createMemo(() => productCardIndexAccessor?.() < 8);
+  const shouldActuallyEnableLazyLoading = $9HbP8$createMemo(() => {
+    const {
+      loading: loading
+    } = props;
+    if (loading === "force-lazy") return true;
+    return loading === "lazy" && !isPrioritisedImage();
+  });
+  const modifiedOtherAttributes = $9HbP8$mergeProps1(otherAttributes, {
+    get loading() {
+      return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
+    }
+  });
   // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
   // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
   const executeWhenIdleBatched = fn => {
     if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
+    if ($9HbP8$untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately
     const existingStack = listingContext?.[$e8ffe11ed01df0fe$var$onIdleFunctionsSymbol];
     if (existingStack) return existingStack.add(fn);
     const newStack = new Set([fn]);
     if (listingContext) listingContext[$e8ffe11ed01df0fe$var$onIdleFunctionsSymbol] = newStack;
-    const processStackWhenIdle = () => requestIdleCallback(deadline => {
+    const processStackWhenIdle = () => $4ea56971d92eb0cd$export$2972b890694ced75($9HbP8$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) {
@@ -2397,7 +2456,7 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
       }
       // Stack is empty
       if (listingContext) delete listingContext[$e8ffe11ed01df0fe$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
     );
@@ -2411,7 +2470,8 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   img.classList.add("s-responsive-image");
   if (listingContext) {
     let prevValue;
-    const aspectRatios = listingContext[$e8ffe11ed01df0fe$export$f8945274f08a3105] ||= new (0, $9HbP8$ListenableSet)();
+    const aspectRatios = listingContext[$e8ffe11ed01df0fe$export$f8945274f08a3105] ||= new Set();
+    const [, setMostPrevalentAspectRatio] = listingContext[$e8ffe11ed01df0fe$export$6066eb417ed2e9f7] ||= $9HbP8$createSignal();
     img.addEventListener("load", $9HbP8$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;
@@ -2421,13 +2481,19 @@ function $e8ffe11ed01df0fe$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 = $9HbP8$findMostFrequentItem(asArray);
+      setMostPrevalentAspectRatio(mostPrevalentAspectRatio);
     }));
     $9HbP8$onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $9HbP8$onCleanup(() => gotCleanedUp = true);
-  $9HbP8$spread(img, $9HbP8$mergeProps1(otherOptions), false, true);
+  $9HbP8$spread(img, $9HbP8$mergeProps1(modifiedOtherAttributes), false, true);
   $9HbP8$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 = $9HbP8$catchify(() => {
       if (gotCleanedUp) return;
@@ -2452,7 +2518,7 @@ function $e8ffe11ed01df0fe$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 (shouldActuallyEnableLazyLoading()) {
       // For lazy loading there's no decoding to wait for as it only occurs when the image is visible
       // Make sure src is set before we put the image into the DOM though so no broken image symbol is shown
       setHasDecoded(true);
@@ -2479,9 +2545,10 @@ function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions) {
   return resolutions.map(width => `${$e8ffe11ed01df0fe$var$generateImageUrl(url, width)} ${width}w`).join(", ");
 }
 function $e8ffe11ed01df0fe$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 $660070e2a394b3c3$var$backupSizeSignal = /*@__PURE__*/$9HbP8$createSignal();
 const $660070e2a394b3c3$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
@@ -2491,40 +2558,25 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
     // create a signal that's the same for all items in this listing
     context[$660070e2a394b3c3$export$d7b7ab832c20e2f4] = $9HbP8$createSignal();
   const [currentImageSize, setCurrentImageSize] = context?.[$660070e2a394b3c3$export$d7b7ab832c20e2f4] || $660070e2a394b3c3$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, $e8ffe11ed01df0fe$export$f8945274f08a3105)] ||= new (0, $9HbP8$ListenableSet)() : undefined;
-  const [aspectRatios, setAspectRatios] = $9HbP8$createSignal(aspectRatiosSet, {
-    equals: false
-  });
-  const aspectRatioToUse = $9HbP8$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 = $9HbP8$findMostFrequentItem(asArray);
-      if (mostPrevalentAspectRatio) return `var(${(0, $bb15dfb548a7666e$export$8a2234b5b1a5ebd4)}, ${mostPrevalentAspectRatio})`;
-    }
-    return props.aspectRatio;
-  });
-  const container = $9HbP8$createComponent((0, $f18d425032111270$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, $e8ffe11ed01df0fe$export$6066eb417ed2e9f7)] ||= $9HbP8$createSignal() : [];
+  const container = $f18d425032111270$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, $bb15dfb548a7666e$export$8a2234b5b1a5ebd4)}, ${targetRatio})`;
+      }
+      return props.aspectRatio;
     }
   });
   const owner = $9HbP8$getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
-  for (const event of ["add", "delete"]) {
-    aspectRatiosSet?.addEventListener(event, () => setAspectRatios(aspectRatiosSet));
-    $9HbP8$onCleanup(() => aspectRatiosSet?.removeEventListener(event, () => setAspectRatios(aspectRatiosSet)));
-  }
   $9HbP8$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
@@ -3742,7 +3794,7 @@ const $024fbc0a2d796fad$var$TabsContext = /*@__PURE__*/$9HbP8$createContext();
 const $024fbc0a2d796fad$var$useTabs = () => $9HbP8$useContext($024fbc0a2d796fad$var$TabsContext);
 function $024fbc0a2d796fad$export$b2539bed5023c21c(props) {
   return $9HbP8$createComponent($024fbc0a2d796fad$var$TabsContext.Provider, {
-    value: new (0, $9HbP8$ListenableSet1)(),
+    value: new (0, $9HbP8$ListenableSet)(),
     get children() {
       return $9HbP8$createComponent($024fbc0a2d796fad$var$ActualTabs, $9HbP8$mergeProps(props, {
         get children() {
@@ -12558,7 +12610,7 @@ function $49de9d31aeea1b5e$export$6d0c9c22f6652669({
     number_: num_results,
     i18n_: i18n_
   });
-  const queries_without_content_results_ = new (0, $9HbP8$ListenableSet)();
+  const queries_without_content_results_ = new (0, $9HbP8$ListenableSet1)();
   const [check_query, set_check_query] = $9HbP8$createSignal(false);
   const placeholders_enabled = $9HbP8$createMemo(() => {
     // don't show placeholders when the user toggles filters
@@ -14071,4 +14123,4 @@ function $58b3487626e85ece$var$align_field_modal(alignmentSignals, input, modalV
   });
 }
 $9HbP8$add_to_version_info("ui", (0, $ec291e0010116877$export$83d89fbfd8236492));
-export { $136f1d4d6c7ba6ac$export$e417c49320921907 as createDeparallelizedNoDropResource, $d8dbf52fea1773e2$export$f50b88e2a00918b5 as throw_globally, $42912431795f188e$export$9265e66f26f8e383 as ClassicSearchModal, $500a16dd18ee5a71$export$b0c55aa2e87c4be7 as SearchModalV2, $4f16612bea257571$export$9d4a4b669b1929ab as ModernResponsiveContainedImage, $024fbc0a2d796fad$export$3e41faf802a29e71 as Tab, $024fbc0a2d796fad$export$b2539bed5023c21c as Tabs, $8560c919ff763930$export$d4973c31938cbfd1 as ShopTheLookButton, $ca6f574bd8772184$export$e183a13865960371 as history_dot_state_to_state, $4147651646da990a$export$916e6850778505f6 as strip_encoded_filter_and_sort, $4147651646da990a$export$58aa3f171519b6d7 as encode_filters, $4147651646da990a$export$f934fa24c3a86811 as decode_filters, $4147651646da990a$export$62acb285a7579555 as encode_sorting, $4147651646da990a$export$766e9676e74997d3 as decode_sorting, $660070e2a394b3c3$export$d7b7ab832c20e2f4 as shopifyContainedImageContextSymbol, $011607bdf658f807$export$e68cff63f76bd15b as ListingProvider, $011607bdf658f807$export$8d0c4fdbb05a2f2e as useListing, $660070e2a394b3c3$export$e4b984597b71e989 as ShopifyContainedImage, $f32e14878e75af51$export$6649caad96ef8870 as SlidableItems, $2449872a62a75a20$export$ebdc3711f7e02ccd as make_accurate_width_accessor, $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $e8ffe11ed01df0fe$export$e6fffe67d4cdd848 as makeSizeAccessor, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $a0f0e923bad68a9b$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $4b2134398dfa83fa$export$c1a6b039e689a58e as get_listings, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b6d5529b253681aa$export$3f238c96c45e6cc6 as ALIGN_TOP, $b6d5529b253681aa$export$902f8b4a7dae5d78 as ALIGN_WIDTH_ON_MODAL, $b6d5529b253681aa$export$7895aadd1956b1c7 as ALIGN_LEFT, $b6d5529b253681aa$export$6060bc6bee850eb6 as SET_CENTERED_LEFT, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version, $58b3487626e85ece$export$316f6f283ae64765 as SearchField };
+export { $136f1d4d6c7ba6ac$export$e417c49320921907 as createDeparallelizedNoDropResource, $d8dbf52fea1773e2$export$f50b88e2a00918b5 as throw_globally, $42912431795f188e$export$9265e66f26f8e383 as ClassicSearchModal, $500a16dd18ee5a71$export$b0c55aa2e87c4be7 as SearchModalV2, $4f16612bea257571$export$9d4a4b669b1929ab as ModernResponsiveContainedImage, $024fbc0a2d796fad$export$3e41faf802a29e71 as Tab, $024fbc0a2d796fad$export$b2539bed5023c21c as Tabs, $8560c919ff763930$export$d4973c31938cbfd1 as ShopTheLookButton, $ca6f574bd8772184$export$e183a13865960371 as history_dot_state_to_state, $4147651646da990a$export$916e6850778505f6 as strip_encoded_filter_and_sort, $4147651646da990a$export$58aa3f171519b6d7 as encode_filters, $4147651646da990a$export$f934fa24c3a86811 as decode_filters, $4147651646da990a$export$62acb285a7579555 as encode_sorting, $4147651646da990a$export$766e9676e74997d3 as decode_sorting, $660070e2a394b3c3$export$d7b7ab832c20e2f4 as shopifyContainedImageContextSymbol, $011607bdf658f807$export$e68cff63f76bd15b as ListingProvider, $011607bdf658f807$export$8d0c4fdbb05a2f2e as useListing, $b6440e72ed83671a$export$11354f017ddc9790 as ProductCardIndexProvider, $b6440e72ed83671a$export$e3faf4d95300054f as useProductCardIndex, $660070e2a394b3c3$export$e4b984597b71e989 as ShopifyContainedImage, $f32e14878e75af51$export$6649caad96ef8870 as SlidableItems, $2449872a62a75a20$export$ebdc3711f7e02ccd as make_accurate_width_accessor, $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $e8ffe11ed01df0fe$export$e6fffe67d4cdd848 as makeSizeAccessor, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $a0f0e923bad68a9b$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $4b2134398dfa83fa$export$c1a6b039e689a58e as get_listings, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b6d5529b253681aa$export$3f238c96c45e6cc6 as ALIGN_TOP, $b6d5529b253681aa$export$902f8b4a7dae5d78 as ALIGN_WIDTH_ON_MODAL, $b6d5529b253681aa$export$7895aadd1956b1c7 as ALIGN_LEFT, $b6d5529b253681aa$export$6060bc6bee850eb6 as SET_CENTERED_LEFT, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version, $58b3487626e85ece$export$316f6f283ae64765 as SearchField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.0.7",
+  "version": "4.0.9",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",