@depict-ai/ui 3.0.25 → 3.0.27

package/ES10/index.cjs

@@ -83,7 +83,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.25";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.27";
 const $9d19451330d04c3c$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $9d19451330d04c3c$export$8be2714ec7f169ee() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -2006,9 +2006,7 @@ function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
         width: width
       } = records[j].contentRect;
       if (!width) continue;
-      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
-      const new_size = width * 1.05 * ((0, $52FdA$depictaiutilishared.is_safari) ? 4 / 3 : 1);
-      setSize(Math.round(new_size));
+      setSize(Math.round(width));
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
@@ -2042,10 +2040,11 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   const src_options = $52FdA$solidjs.createMemo(() => {
     const src = new URL(props.src, location.origin);
     const fallback_src = $858fdcf73148519f$var$generateImageUrl(src, 400);
-    const srcset = $858fdcf73148519f$var$make_srcset(src, props.resolutions || [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const srcset = $858fdcf73148519f$var$make_srcset(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 {
-      src: fallback_src,
-      srcset: srcset
+      srcset: srcset,
+      src: fallback_src
     };
   });
   // Work around https://github.com/solidjs/solid/issues/1828
@@ -2179,7 +2178,7 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     $52FdA$depictaiutilishared.queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $52FdA$solidjsweb.insert(container, $52FdA$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), {
+  $52FdA$solidjsweb.insert(container, $52FdA$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), $52FdA$solidjsweb.mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $52FdA$solidjs.createMemo(() => {
@@ -2189,11 +2188,8 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

package/ES10/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 = "3.0.25";
+export const version = "3.0.27";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -559,12 +559,13 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * @property aspectRatio aspect ratio of the image
  * @property class extra class to add to the container
  * @property alt alt text for the image
+ * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number;
   class?: string;
-  alt?: string;
+  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
 }): HTMLDivElement;
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)

package/ES10/index.js

@@ -1,4 +1,4 @@
-import { add_to_version_info as $8tj43$add_to_version_info, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, get_session_id as $8tj43$get_session_id, add_version_query_params as $8tj43$add_version_query_params, base_url as $8tj43$base_url, dwarn as $8tj43$dwarn, catchify as $8tj43$catchify1, observer as $8tj43$observer, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, report as $8tj43$report, dlog as $8tj43$dlog, ContainedImage as $8tj43$ContainedImage, use_href_accessor as $8tj43$use_href_accessor1, camelCasifyObject as $8tj43$camelCasifyObject, make_random_classname as $8tj43$make_random_classname, 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, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, queueMacroTask as $8tj43$queueMacroTask, is_safari as $8tj43$is_safari, slider_fractional_factory as $8tj43$slider_fractional_factory, useExpandingContainer as $8tj43$useExpandingContainer, standard_price_format as $8tj43$standard_price_format, 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, javascript_media_query as $8tj43$javascript_media_query, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, ListenableSet as $8tj43$ListenableSet1, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { add_to_version_info as $8tj43$add_to_version_info, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, get_session_id as $8tj43$get_session_id, add_version_query_params as $8tj43$add_version_query_params, base_url as $8tj43$base_url, dwarn as $8tj43$dwarn, catchify as $8tj43$catchify1, observer as $8tj43$observer, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, report as $8tj43$report, dlog as $8tj43$dlog, ContainedImage as $8tj43$ContainedImage, use_href_accessor as $8tj43$use_href_accessor1, camelCasifyObject as $8tj43$camelCasifyObject, make_random_classname as $8tj43$make_random_classname, 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, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, queueMacroTask as $8tj43$queueMacroTask, slider_fractional_factory as $8tj43$slider_fractional_factory, useExpandingContainer as $8tj43$useExpandingContainer, standard_price_format as $8tj43$standard_price_format, 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, javascript_media_query as $8tj43$javascript_media_query, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, ListenableSet as $8tj43$ListenableSet1, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
 import { template as $8tj43$template, createComponent as $8tj43$createComponent, mergeProps as $8tj43$mergeProps, Dynamic as $8tj43$Dynamic, memo as $8tj43$memo, getNextElement as $8tj43$getNextElement, insert as $8tj43$insert, effect as $8tj43$effect, setAttribute as $8tj43$setAttribute, isServer as $8tj43$isServer, spread as $8tj43$spread, runHydrationEvents as $8tj43$runHydrationEvents, use as $8tj43$use, addEventListener as $8tj43$addEventListener, getNextMarker as $8tj43$getNextMarker, delegateEvents as $8tj43$delegateEvents, classList as $8tj43$classList, className as $8tj43$className, style as $8tj43$style, setProperty as $8tj43$setProperty } from "solid-js/web";
 import { createContext as $8tj43$createContext, useContext as $8tj43$useContext, createSignal as $8tj43$createSignal, createSelector as $8tj43$createSelector, getOwner as $8tj43$getOwner, runWithOwner as $8tj43$runWithOwner, Index as $8tj43$Index, createMemo as $8tj43$createMemo, children as $8tj43$children, onCleanup as $8tj43$onCleanup, createEffect as $8tj43$createEffect, untrack as $8tj43$untrack, Show as $8tj43$Show, createUniqueId as $8tj43$createUniqueId, mergeProps as $8tj43$mergeProps1, ErrorBoundary as $8tj43$ErrorBoundary, createResource as $8tj43$createResource, splitProps as $8tj43$splitProps, createRoot as $8tj43$createRoot, createRenderEffect as $8tj43$createRenderEffect, batch as $8tj43$batch, Suspense as $8tj43$Suspense, on as $8tj43$on, For as $8tj43$For, createComputed as $8tj43$createComputed, createReaction as $8tj43$createReaction, mapArray as $8tj43$mapArray } from "solid-js";
 import { ListenableSet as $8tj43$ListenableSet, catchify as $8tj43$catchify, use_href_accessor as $8tj43$use_href_accessor, report as $8tj43$report1 } from "@depict-ai/utilishared/ES10";
@@ -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 = "3.0.25";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "3.0.27";
 const $ca6ab5f08bd28bca$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -1933,9 +1933,7 @@ function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
         width: width
       } = records[j].contentRect;
       if (!width) continue;
-      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
-      const new_size = width * 1.05 * ((0, $8tj43$is_safari) ? 4 / 3 : 1);
-      setSize(Math.round(new_size));
+      setSize(Math.round(width));
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
@@ -1969,10 +1967,11 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(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, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    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]);
+    // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
-      src: fallback_src,
-      srcset: srcset
+      srcset: srcset,
+      src: fallback_src
     };
   });
   // Work around https://github.com/solidjs/solid/issues/1828
@@ -2106,7 +2105,7 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     $8tj43$queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $8tj43$insert(container, $8tj43$createComponent((0, $56047603f9d212b6$export$6e5611bc7e57e477), {
+  $8tj43$insert(container, $8tj43$createComponent((0, $56047603f9d212b6$export$6e5611bc7e57e477), $8tj43$mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $8tj43$createMemo(() => {
@@ -2116,11 +2115,8 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

package/latest/index.cjs

@@ -77,7 +77,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.25";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.27";
 const $0f313083912e447a$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
@@ -1902,9 +1902,7 @@ function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
         width: width
       } = records[j].contentRect;
       if (!width) continue;
-      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
-      const new_size = width * 1.05 * ((0, $gVhhF$depictaiutilishared.is_safari) ? 4 / 3 : 1);
-      setSize(Math.round(new_size));
+      setSize(Math.round(width));
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
@@ -1935,10 +1933,11 @@ function $19950faaac026e09$export$6e5611bc7e57e477(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, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    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]);
+    // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
-      src: fallback_src,
-      srcset: srcset
+      srcset: srcset,
+      src: fallback_src
     };
   });
   // Work around https://github.com/solidjs/solid/issues/1828
@@ -2072,18 +2071,15 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
     $gVhhF$depictaiutilishared.queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $gVhhF$solidjsweb.insert(container, $gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), {
+  $gVhhF$solidjsweb.insert(container, $gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), $gVhhF$solidjsweb.mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $gVhhF$solidjs.createMemo(() => currentImageSize()?.() || 0);
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

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 = "3.0.25";
+export const version = "3.0.27";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -559,12 +559,13 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * @property aspectRatio aspect ratio of the image
  * @property class extra class to add to the container
  * @property alt alt text for the image
+ * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number;
   class?: string;
-  alt?: string;
+  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
 }): HTMLDivElement;
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)

package/latest/index.js

@@ -1,4 +1,4 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, base_url as $9HbP8$base_url, dwarn as $9HbP8$dwarn, catchify as $9HbP8$catchify1, observer as $9HbP8$observer, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, report as $9HbP8$report, dlog as $9HbP8$dlog, ContainedImage as $9HbP8$ContainedImage, use_href_accessor as $9HbP8$use_href_accessor1, camelCasifyObject as $9HbP8$camelCasifyObject, make_random_classname as $9HbP8$make_random_classname, 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, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_safari as $9HbP8$is_safari, slider_fractional_factory as $9HbP8$slider_fractional_factory, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, 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, javascript_media_query as $9HbP8$javascript_media_query, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet1, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { add_to_version_info as $9HbP8$add_to_version_info, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, base_url as $9HbP8$base_url, dwarn as $9HbP8$dwarn, catchify as $9HbP8$catchify1, observer as $9HbP8$observer, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, report as $9HbP8$report, dlog as $9HbP8$dlog, ContainedImage as $9HbP8$ContainedImage, use_href_accessor as $9HbP8$use_href_accessor1, camelCasifyObject as $9HbP8$camelCasifyObject, make_random_classname as $9HbP8$make_random_classname, 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, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, slider_fractional_factory as $9HbP8$slider_fractional_factory, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, 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, javascript_media_query as $9HbP8$javascript_media_query, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet1, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
 import { template as $9HbP8$template, createComponent as $9HbP8$createComponent, mergeProps as $9HbP8$mergeProps, Dynamic as $9HbP8$Dynamic, memo as $9HbP8$memo, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, effect as $9HbP8$effect, setAttribute as $9HbP8$setAttribute, isServer as $9HbP8$isServer, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, use as $9HbP8$use, addEventListener as $9HbP8$addEventListener, getNextMarker as $9HbP8$getNextMarker, delegateEvents as $9HbP8$delegateEvents, classList as $9HbP8$classList, className as $9HbP8$className, style as $9HbP8$style, setProperty as $9HbP8$setProperty } from "solid-js/web";
 import { createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, createSignal as $9HbP8$createSignal, createSelector as $9HbP8$createSelector, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, Index as $9HbP8$Index, createMemo as $9HbP8$createMemo, children as $9HbP8$children, onCleanup as $9HbP8$onCleanup, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, Show as $9HbP8$Show, createUniqueId as $9HbP8$createUniqueId, mergeProps as $9HbP8$mergeProps1, ErrorBoundary as $9HbP8$ErrorBoundary, createResource as $9HbP8$createResource, splitProps as $9HbP8$splitProps, createRoot as $9HbP8$createRoot, createRenderEffect as $9HbP8$createRenderEffect, batch as $9HbP8$batch, Suspense as $9HbP8$Suspense, on as $9HbP8$on, For as $9HbP8$For, createComputed as $9HbP8$createComputed, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
 import { ListenableSet as $9HbP8$ListenableSet, catchify as $9HbP8$catchify, use_href_accessor as $9HbP8$use_href_accessor, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! 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 = "3.0.25";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.27";
 const $fbbadcb080ad1d4a$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
@@ -1832,9 +1832,7 @@ function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
         width: width
       } = records[j].contentRect;
       if (!width) continue;
-      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
-      const new_size = width * 1.05 * ((0, $9HbP8$is_safari) ? 4 / 3 : 1);
-      setSize(Math.round(new_size));
+      setSize(Math.round(width));
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
@@ -1865,10 +1863,11 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(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, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    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]);
+    // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
-      src: fallback_src,
-      srcset: srcset
+      srcset: srcset,
+      src: fallback_src
     };
   });
   // Work around https://github.com/solidjs/solid/issues/1828
@@ -2002,18 +2001,15 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
     $9HbP8$queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $9HbP8$insert(container, $9HbP8$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), {
+  $9HbP8$insert(container, $9HbP8$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), $9HbP8$mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $9HbP8$createMemo(() => currentImageSize()?.() || 0);
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "3.0.25",
+  "version": "3.0.27",
   "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",

package/server/ES10/index.cjs

@@ -83,7 +83,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.25";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.27";
 const $9d19451330d04c3c$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
 function $9d19451330d04c3c$export$8be2714ec7f169ee() {
   var _$escape2, _$escape3;
@@ -1753,9 +1753,7 @@ function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
         width: width
       } = records[j].contentRect;
       if (!width) continue;
-      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
-      const new_size = width * 1.05 * ((0, $3hooq$depictaiutilishared.is_safari) ? 4 / 3 : 1);
-      setSize(Math.round(new_size));
+      setSize(Math.round(width));
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
@@ -1789,10 +1787,11 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   const src_options = $3hooq$solidjs.createMemo(() => {
     const src = new URL(props.src, location.origin);
     const fallback_src = $858fdcf73148519f$var$generateImageUrl(src, 400);
-    const srcset = $858fdcf73148519f$var$make_srcset(src, props.resolutions || [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const srcset = $858fdcf73148519f$var$make_srcset(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 {
-      src: fallback_src,
-      srcset: srcset
+      srcset: srcset,
+      src: fallback_src
     };
   });
   // Work around https://github.com/solidjs/solid/issues/1828
@@ -1926,7 +1925,7 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     $3hooq$depictaiutilishared.queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $3hooq$solidjsweb.insert(container, $3hooq$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), {
+  $3hooq$solidjsweb.insert(container, $3hooq$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), $3hooq$solidjsweb.mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $3hooq$solidjs.createMemo(() => {
@@ -1936,11 +1935,8 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

package/server/ES10/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 = "3.0.25";
+export const version = "3.0.27";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -559,12 +559,13 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * @property aspectRatio aspect ratio of the image
  * @property class extra class to add to the container
  * @property alt alt text for the image
+ * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number;
   class?: string;
-  alt?: string;
+  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
 }): HTMLDivElement;
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)

package/server/ES10/index.js

@@ -1,4 +1,4 @@
-import { add_to_version_info as $b8hua$add_to_version_info, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, slider_fading_factory as $b8hua$slider_fading_factory, get_session_id as $b8hua$get_session_id, add_version_query_params as $b8hua$add_version_query_params, base_url as $b8hua$base_url, dwarn as $b8hua$dwarn, catchify as $b8hua$catchify1, observer as $b8hua$observer, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, report as $b8hua$report, dlog as $b8hua$dlog, ContainedImage as $b8hua$ContainedImage, use_href_accessor as $b8hua$use_href_accessor1, camelCasifyObject as $b8hua$camelCasifyObject, make_random_classname as $b8hua$make_random_classname, 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, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, queueMacroTask as $b8hua$queueMacroTask, is_safari as $b8hua$is_safari, slider_fractional_factory as $b8hua$slider_fractional_factory, useExpandingContainer as $b8hua$useExpandingContainer, standard_price_format as $b8hua$standard_price_format, 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, javascript_media_query as $b8hua$javascript_media_query, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, deparallelize_no_drop as $b8hua$deparallelize_no_drop, ListenableSet as $b8hua$ListenableSet1, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { add_to_version_info as $b8hua$add_to_version_info, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, slider_fading_factory as $b8hua$slider_fading_factory, get_session_id as $b8hua$get_session_id, add_version_query_params as $b8hua$add_version_query_params, base_url as $b8hua$base_url, dwarn as $b8hua$dwarn, catchify as $b8hua$catchify1, observer as $b8hua$observer, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, report as $b8hua$report, dlog as $b8hua$dlog, ContainedImage as $b8hua$ContainedImage, use_href_accessor as $b8hua$use_href_accessor1, camelCasifyObject as $b8hua$camelCasifyObject, make_random_classname as $b8hua$make_random_classname, 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, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, queueMacroTask as $b8hua$queueMacroTask, slider_fractional_factory as $b8hua$slider_fractional_factory, useExpandingContainer as $b8hua$useExpandingContainer, standard_price_format as $b8hua$standard_price_format, 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, javascript_media_query as $b8hua$javascript_media_query, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, deparallelize_no_drop as $b8hua$deparallelize_no_drop, ListenableSet as $b8hua$ListenableSet1, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
 import { createComponent as $b8hua$createComponent, mergeProps as $b8hua$mergeProps, Dynamic as $b8hua$Dynamic, ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, escape as $b8hua$escape, ssrAttribute as $b8hua$ssrAttribute, isServer as $b8hua$isServer, insert as $b8hua$insert, ssrElement as $b8hua$ssrElement, ssrClassList as $b8hua$ssrClassList, ssrStyle as $b8hua$ssrStyle, spread as $b8hua$spread } from "solid-js/web";
 import { createContext as $b8hua$createContext, useContext as $b8hua$useContext, createSignal as $b8hua$createSignal, createSelector as $b8hua$createSelector, getOwner as $b8hua$getOwner, runWithOwner as $b8hua$runWithOwner, Index as $b8hua$Index, createMemo as $b8hua$createMemo, children as $b8hua$children, onCleanup as $b8hua$onCleanup, createEffect as $b8hua$createEffect, untrack as $b8hua$untrack, Show as $b8hua$Show, createUniqueId as $b8hua$createUniqueId, mergeProps as $b8hua$mergeProps1, ErrorBoundary as $b8hua$ErrorBoundary, createResource as $b8hua$createResource, splitProps as $b8hua$splitProps, createRoot as $b8hua$createRoot, createRenderEffect as $b8hua$createRenderEffect, batch as $b8hua$batch, Suspense as $b8hua$Suspense, on as $b8hua$on, For as $b8hua$For, createComputed as $b8hua$createComputed, createReaction as $b8hua$createReaction, mapArray as $b8hua$mapArray } from "solid-js";
 import { ListenableSet as $b8hua$ListenableSet, catchify as $b8hua$catchify, use_href_accessor as $b8hua$use_href_accessor, report as $b8hua$report1 } from "@depict-ai/utilishared/ES10";
@@ -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 = "3.0.25";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "3.0.27";
 const $ca6ab5f08bd28bca$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
 function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
   var _$escape2, _$escape3;
@@ -1680,9 +1680,7 @@ function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
         width: width
       } = records[j].contentRect;
       if (!width) continue;
-      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
-      const new_size = width * 1.05 * ((0, $b8hua$is_safari) ? 4 / 3 : 1);
-      setSize(Math.round(new_size));
+      setSize(Math.round(width));
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
@@ -1716,10 +1714,11 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(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, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    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]);
+    // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
-      src: fallback_src,
-      srcset: srcset
+      srcset: srcset,
+      src: fallback_src
     };
   });
   // Work around https://github.com/solidjs/solid/issues/1828
@@ -1853,7 +1852,7 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     $b8hua$queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $b8hua$insert(container, $b8hua$createComponent((0, $56047603f9d212b6$export$6e5611bc7e57e477), {
+  $b8hua$insert(container, $b8hua$createComponent((0, $56047603f9d212b6$export$6e5611bc7e57e477), $b8hua$mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $b8hua$createMemo(() => {
@@ -1863,11 +1862,8 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

package/server/latest/index.cjs

@@ -77,7 +77,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.25";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.27";
 const $0f313083912e447a$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
 function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
   return $5vyXB$solidjsweb.ssr($0f313083912e447a$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("width", $5vyXB$solidjsweb.escape(props.width_, true) ?? 14, false) + $5vyXB$solidjsweb.ssrAttribute("height", $5vyXB$solidjsweb.escape(props.height_, true) ?? 26, false));
@@ -1664,9 +1664,7 @@ function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
         width: width
       } = records[j].contentRect;
       if (!width) continue;
-      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
-      const new_size = width * 1.05 * ((0, $5vyXB$depictaiutilishared.is_safari) ? 4 / 3 : 1);
-      setSize(Math.round(new_size));
+      setSize(Math.round(width));
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
@@ -1697,10 +1695,11 @@ function $19950faaac026e09$export$6e5611bc7e57e477(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, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    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]);
+    // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
-      src: fallback_src,
-      srcset: srcset
+      srcset: srcset,
+      src: fallback_src
     };
   });
   // Work around https://github.com/solidjs/solid/issues/1828
@@ -1834,18 +1833,15 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
     $5vyXB$depictaiutilishared.queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $5vyXB$solidjsweb.insert(container, $5vyXB$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), {
+  $5vyXB$solidjsweb.insert(container, $5vyXB$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), $5vyXB$solidjsweb.mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $5vyXB$solidjs.createMemo(() => currentImageSize()?.() || 0);
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

package/server/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 = "3.0.25";
+export const version = "3.0.27";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -559,12 +559,13 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * @property aspectRatio aspect ratio of the image
  * @property class extra class to add to the container
  * @property alt alt text for the image
+ * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number;
   class?: string;
-  alt?: string;
+  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
 }): HTMLDivElement;
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)

package/server/latest/index.js

@@ -1,4 +1,4 @@
-import { add_to_version_info as $i7OB2$add_to_version_info, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, get_session_id as $i7OB2$get_session_id, add_version_query_params as $i7OB2$add_version_query_params, base_url as $i7OB2$base_url, dwarn as $i7OB2$dwarn, catchify as $i7OB2$catchify1, observer as $i7OB2$observer, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, report as $i7OB2$report, dlog as $i7OB2$dlog, ContainedImage as $i7OB2$ContainedImage, use_href_accessor as $i7OB2$use_href_accessor1, camelCasifyObject as $i7OB2$camelCasifyObject, make_random_classname as $i7OB2$make_random_classname, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $i7OB2$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $i7OB2$layout_get_total_rec_amount_for_row, layout_media_query_header as $i7OB2$layout_media_query_header, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, queueMacroTask as $i7OB2$queueMacroTask, is_safari as $i7OB2$is_safari, slider_fractional_factory as $i7OB2$slider_fractional_factory, useExpandingContainer as $i7OB2$useExpandingContainer, standard_price_format as $i7OB2$standard_price_format, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, snakeCasifyObject as $i7OB2$snakeCasifyObject, fetch_retry as $i7OB2$fetch_retry, sort_obj as $i7OB2$sort_obj, make_url_with_query_params as $i7OB2$make_url_with_query_params, javascript_media_query as $i7OB2$javascript_media_query, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ListenableSet as $i7OB2$ListenableSet1, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { add_to_version_info as $i7OB2$add_to_version_info, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, get_session_id as $i7OB2$get_session_id, add_version_query_params as $i7OB2$add_version_query_params, base_url as $i7OB2$base_url, dwarn as $i7OB2$dwarn, catchify as $i7OB2$catchify1, observer as $i7OB2$observer, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, report as $i7OB2$report, dlog as $i7OB2$dlog, ContainedImage as $i7OB2$ContainedImage, use_href_accessor as $i7OB2$use_href_accessor1, camelCasifyObject as $i7OB2$camelCasifyObject, make_random_classname as $i7OB2$make_random_classname, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $i7OB2$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $i7OB2$layout_get_total_rec_amount_for_row, layout_media_query_header as $i7OB2$layout_media_query_header, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, queueMacroTask as $i7OB2$queueMacroTask, slider_fractional_factory as $i7OB2$slider_fractional_factory, useExpandingContainer as $i7OB2$useExpandingContainer, standard_price_format as $i7OB2$standard_price_format, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, snakeCasifyObject as $i7OB2$snakeCasifyObject, fetch_retry as $i7OB2$fetch_retry, sort_obj as $i7OB2$sort_obj, make_url_with_query_params as $i7OB2$make_url_with_query_params, javascript_media_query as $i7OB2$javascript_media_query, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ListenableSet as $i7OB2$ListenableSet1, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
 import { createComponent as $i7OB2$createComponent, mergeProps as $i7OB2$mergeProps, Dynamic as $i7OB2$Dynamic, ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, escape as $i7OB2$escape, ssrAttribute as $i7OB2$ssrAttribute, isServer as $i7OB2$isServer, insert as $i7OB2$insert, ssrElement as $i7OB2$ssrElement, ssrClassList as $i7OB2$ssrClassList, ssrStyle as $i7OB2$ssrStyle, spread as $i7OB2$spread } from "solid-js/web";
 import { createContext as $i7OB2$createContext, useContext as $i7OB2$useContext, createSignal as $i7OB2$createSignal, createSelector as $i7OB2$createSelector, getOwner as $i7OB2$getOwner, runWithOwner as $i7OB2$runWithOwner, Index as $i7OB2$Index, createMemo as $i7OB2$createMemo, children as $i7OB2$children, onCleanup as $i7OB2$onCleanup, createEffect as $i7OB2$createEffect, untrack as $i7OB2$untrack, Show as $i7OB2$Show, createUniqueId as $i7OB2$createUniqueId, mergeProps as $i7OB2$mergeProps1, ErrorBoundary as $i7OB2$ErrorBoundary, createResource as $i7OB2$createResource, splitProps as $i7OB2$splitProps, createRoot as $i7OB2$createRoot, createRenderEffect as $i7OB2$createRenderEffect, batch as $i7OB2$batch, Suspense as $i7OB2$Suspense, on as $i7OB2$on, For as $i7OB2$For, createComputed as $i7OB2$createComputed, createReaction as $i7OB2$createReaction, mapArray as $i7OB2$mapArray } from "solid-js";
 import { ListenableSet as $i7OB2$ListenableSet, catchify as $i7OB2$catchify, use_href_accessor as $i7OB2$use_href_accessor, report as $i7OB2$report1 } from "@depict-ai/utilishared/latest";
@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! 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 = "3.0.25";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.27";
 const $fbbadcb080ad1d4a$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
 function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
   return $i7OB2$ssr($fbbadcb080ad1d4a$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("width", $i7OB2$escape(props.width_, true) ?? 14, false) + $i7OB2$ssrAttribute("height", $i7OB2$escape(props.height_, true) ?? 26, false));
@@ -1594,9 +1594,7 @@ function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
         width: width
       } = records[j].contentRect;
       if (!width) continue;
-      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
-      const new_size = width * 1.05 * ((0, $i7OB2$is_safari) ? 4 / 3 : 1);
-      setSize(Math.round(new_size));
+      setSize(Math.round(width));
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
@@ -1627,10 +1625,11 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   const src_options = $i7OB2$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, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    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]);
+    // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
-      src: fallback_src,
-      srcset: srcset
+      srcset: srcset,
+      src: fallback_src
     };
   });
   // Work around https://github.com/solidjs/solid/issues/1828
@@ -1764,18 +1763,15 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
     $i7OB2$queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $i7OB2$insert(container, $i7OB2$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), {
+  $i7OB2$insert(container, $i7OB2$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), $i7OB2$mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $i7OB2$createMemo(() => currentImageSize()?.() || 0);
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }