@depict-ai/ui 2.0.16 → 2.0.18

package/ES10/index.cjs

@@ -72,7 +72,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 = "2.0.16";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.0.18";
 const $d067f3a30f047b41$var$ListingContext = /*@__PURE__*/$52FdA$solidjs.createContext();
 function $d067f3a30f047b41$export$e68cff63f76bd15b(props) {
   const our_object = {};
@@ -182,6 +182,7 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
     // what this whole thing does is set the sizes attribute to the actual size of one of the existing image containers, therefore the value doesn't have to manually be specified
+    createdSizeAccessor = true;
     setCurrentImageSize(() => $52FdA$solidjs.runWithOwner(owner, () => $858fdcf73148519f$export$e6fffe67d4cdd848(container)));
   });
   $52FdA$solidjs.onCleanup(() => {
@@ -446,6 +447,7 @@ function $b85edfec41cd3989$export$548d053aba053d79(display) {
   }
   return display.product_id;
 }
+let $76012c4468a53d1f$var$printedCloneError = false;
 function $76012c4468a53d1f$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $52FdA$solidjs.createMemo(() => {
     const displays = get_displays_();
@@ -490,7 +492,17 @@ function $76012c4468a53d1f$export$43f0fb951fcb0c54(_ref) {
       // (We don't want to re-render if nothing has changed)
       _ref2 => {
         let [merchant, market, display] = _ref2;
-        // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+        // It's easy for merchants to accidentally mutate the display or some sub-object thereof
+        // We had a case on singular where they popped an image url and due to use caching after some time there was no image
+        // Attempt cloning the displays if possible (99.9% of the cases probably) and if not, just use the original display
+        try {
+          display = structuredClone(display);
+        } catch (e) {
+          if (!$76012c4468a53d1f$var$printedCloneError) {
+            $76012c4468a53d1f$var$printedCloneError = true;
+            $52FdA$depictaiutilishared.dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
+          }
+        }
         return product_card_template_(display, {
           set_on_index_change: fn => $52FdA$solidjs.runWithOwner(owner, () => $52FdA$solidjs.createEffect(() => fn(index()))),
           merchant: merchant,

package/ES10/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.0.16";
+export const version = "2.0.18";
 /**
  * Provider to wrap every listing (group of products) in
  * Used for example for deduplicating ResizeObservers for responsive images
@@ -47,10 +47,12 @@ export function ShopifyResponsiveImg(props: {
 }): HTMLImageElement;
 export const shopifyContainedImageContextSymbol: unique symbol;
 /**
- * Abstraction built on top of ShopifyResponsiveImg
- * @param src TODO
- * @param aspectRatio
- * @constructor
+ * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
+ * Will return a div of the provided aspect ratio that always has the same size, to avoid content layout shift. Will then put the image inside of the container once it loads.
+ * Also makes a responsive image without you having to do anything: uses shopify's CDN which picks the best image format to resize the image to the size of the first image container in a certain listing.
+ * This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
+ * @property src image source
+ * @property aspectRatio aspect ratio of the image
  */
 export function ShopifyContainedImage(props: {
   src: string;

package/ES10/index.js

@@ -1,4 +1,4 @@
-import { add_to_version_info as $8tj43$add_to_version_info, queueMacroTask as $8tj43$queueMacroTask, catchify as $8tj43$catchify, is_safari as $8tj43$is_safari, observer as $8tj43$observer, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, slider_fractional_factory as $8tj43$slider_fractional_factory, 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, report as $8tj43$report, useExpandingContainer as $8tj43$useExpandingContainer, standard_price_format as $8tj43$standard_price_format, dlog as $8tj43$dlog, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, javascript_media_query as $8tj43$javascript_media_query, fetch_recs as $8tj43$fetch_recs, snakeCasifyObject as $8tj43$snakeCasifyObject, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, base_url as $8tj43$base_url, get_depict_id as $8tj43$get_depict_id, get_user_id as $8tj43$get_user_id, get_session_id as $8tj43$get_session_id, make_url_with_query_params as $8tj43$make_url_with_query_params, fetch_retry as $8tj43$fetch_retry, add_version_query_params as $8tj43$add_version_query_params, dwarn as $8tj43$dwarn, sort_obj as $8tj43$sort_obj, edit_current_page_meta_tags as $8tj43$edit_current_page_meta_tags, use_href_accessor as $8tj43$use_href_accessor, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, ContainedImage as $8tj43$ContainedImage, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, ListenableSet as $8tj43$ListenableSet, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { add_to_version_info as $8tj43$add_to_version_info, queueMacroTask as $8tj43$queueMacroTask, catchify as $8tj43$catchify, is_safari as $8tj43$is_safari, observer as $8tj43$observer, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, slider_fractional_factory as $8tj43$slider_fractional_factory, dlog as $8tj43$dlog, 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, report as $8tj43$report, 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, javascript_media_query as $8tj43$javascript_media_query, fetch_recs as $8tj43$fetch_recs, snakeCasifyObject as $8tj43$snakeCasifyObject, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, base_url as $8tj43$base_url, get_depict_id as $8tj43$get_depict_id, get_user_id as $8tj43$get_user_id, get_session_id as $8tj43$get_session_id, make_url_with_query_params as $8tj43$make_url_with_query_params, fetch_retry as $8tj43$fetch_retry, add_version_query_params as $8tj43$add_version_query_params, dwarn as $8tj43$dwarn, sort_obj as $8tj43$sort_obj, edit_current_page_meta_tags as $8tj43$edit_current_page_meta_tags, use_href_accessor as $8tj43$use_href_accessor, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, ContainedImage as $8tj43$ContainedImage, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, ListenableSet as $8tj43$ListenableSet, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
 import { createComponent as $8tj43$createComponent, template as $8tj43$template, getNextElement as $8tj43$getNextElement, effect as $8tj43$effect, style as $8tj43$style, spread as $8tj43$spread, mergeProps as $8tj43$mergeProps, runHydrationEvents as $8tj43$runHydrationEvents, insert as $8tj43$insert, setAttribute as $8tj43$setAttribute, isServer as $8tj43$isServer, addEventListener as $8tj43$addEventListener, className as $8tj43$className, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, classList as $8tj43$classList, getNextMarker as $8tj43$getNextMarker, Dynamic as $8tj43$Dynamic, use as $8tj43$use } from "solid-js/web";
 import { createSignal as $8tj43$createSignal, getOwner as $8tj43$getOwner, createEffect as $8tj43$createEffect, runWithOwner as $8tj43$runWithOwner, onCleanup as $8tj43$onCleanup, createMemo as $8tj43$createMemo, createContext as $8tj43$createContext, useContext as $8tj43$useContext, createResource as $8tj43$createResource, Suspense as $8tj43$Suspense, Show as $8tj43$Show, createRenderEffect as $8tj43$createRenderEffect, createRoot as $8tj43$createRoot, For as $8tj43$For, createUniqueId as $8tj43$createUniqueId, untrack as $8tj43$untrack, createComputed as $8tj43$createComputed, ErrorBoundary as $8tj43$ErrorBoundary, Index as $8tj43$Index, on as $8tj43$on, batch as $8tj43$batch, createReaction as $8tj43$createReaction } from "solid-js";
 import $8tj43$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
@@ -8,7 +8,7 @@ import $8tj43$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/def
 /*! 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 = "2.0.16";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.0.18";
 const $5441862cd2f5e111$var$ListingContext = /*@__PURE__*/$8tj43$createContext();
 function $5441862cd2f5e111$export$e68cff63f76bd15b(props) {
   const our_object = {};
@@ -118,6 +118,7 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
     // what this whole thing does is set the sizes attribute to the actual size of one of the existing image containers, therefore the value doesn't have to manually be specified
+    createdSizeAccessor = true;
     setCurrentImageSize(() => $8tj43$runWithOwner(owner, () => $56047603f9d212b6$export$e6fffe67d4cdd848(container)));
   });
   $8tj43$onCleanup(() => {
@@ -382,6 +383,7 @@ function $6a4c7ed6d005505c$export$548d053aba053d79(display) {
   }
   return display.product_id;
 }
+let $2d7bad8684bc7f44$var$printedCloneError = false;
 function $2d7bad8684bc7f44$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $8tj43$createMemo(() => {
     const displays = get_displays_();
@@ -426,7 +428,17 @@ function $2d7bad8684bc7f44$export$43f0fb951fcb0c54(_ref) {
       // (We don't want to re-render if nothing has changed)
       _ref2 => {
         let [merchant, market, display] = _ref2;
-        // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+        // It's easy for merchants to accidentally mutate the display or some sub-object thereof
+        // We had a case on singular where they popped an image url and due to use caching after some time there was no image
+        // Attempt cloning the displays if possible (99.9% of the cases probably) and if not, just use the original display
+        try {
+          display = structuredClone(display);
+        } catch (e) {
+          if (!$2d7bad8684bc7f44$var$printedCloneError) {
+            $2d7bad8684bc7f44$var$printedCloneError = true;
+            $8tj43$dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
+          }
+        }
         return product_card_template_(display, {
           set_on_index_change: fn => $8tj43$runWithOwner(owner, () => $8tj43$createEffect(() => fn(index()))),
           merchant: merchant,

package/latest/index.cjs

@@ -66,7 +66,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 = "2.0.16";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.18";
 const $84798aaa863a4909$var$ListingContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
 function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
   const our_object = {};
@@ -173,6 +173,7 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
     // what this whole thing does is set the sizes attribute to the actual size of one of the existing image containers, therefore the value doesn't have to manually be specified
+    createdSizeAccessor = true;
     setCurrentImageSize(() => $gVhhF$solidjs.runWithOwner(owner, () => $19950faaac026e09$export$e6fffe67d4cdd848(container)));
   });
   $gVhhF$solidjs.onCleanup(() => {
@@ -417,6 +418,7 @@ function $a5871dacf261adf8$export$548d053aba053d79(display) {
   }
   return display.product_id;
 }
+let $a73063cc642f3e5f$var$printedCloneError = false;
 function $a73063cc642f3e5f$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $gVhhF$solidjs.createMemo(() => {
     const displays = get_displays_();
@@ -459,7 +461,17 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
       // re-render when the reference to the display object changes or the merchant or market changes
       // (We don't want to re-render if nothing has changed)
       ([merchant, market, display]) => {
-        // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+        // It's easy for merchants to accidentally mutate the display or some sub-object thereof
+        // We had a case on singular where they popped an image url and due to use caching after some time there was no image
+        // Attempt cloning the displays if possible (99.9% of the cases probably) and if not, just use the original display
+        try {
+          display = structuredClone(display);
+        } catch (e) {
+          if (!$a73063cc642f3e5f$var$printedCloneError) {
+            $a73063cc642f3e5f$var$printedCloneError = true;
+            $gVhhF$depictaiutilishared.dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
+          }
+        }
         return product_card_template_(display, {
           set_on_index_change: fn => $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.createEffect(() => fn(index()))),
           merchant: merchant,

package/latest/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.0.16";
+export const version = "2.0.18";
 /**
  * Provider to wrap every listing (group of products) in
  * Used for example for deduplicating ResizeObservers for responsive images
@@ -47,10 +47,12 @@ export function ShopifyResponsiveImg(props: {
 }): HTMLImageElement;
 export const shopifyContainedImageContextSymbol: unique symbol;
 /**
- * Abstraction built on top of ShopifyResponsiveImg
- * @param src TODO
- * @param aspectRatio
- * @constructor
+ * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
+ * Will return a div of the provided aspect ratio that always has the same size, to avoid content layout shift. Will then put the image inside of the container once it loads.
+ * Also makes a responsive image without you having to do anything: uses shopify's CDN which picks the best image format to resize the image to the size of the first image container in a certain listing.
+ * This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
+ * @property src image source
+ * @property aspectRatio aspect ratio of the image
  */
 export function ShopifyContainedImage(props: {
   src: string;

package/latest/index.js

@@ -1,11 +1,11 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, queueMacroTask as $9HbP8$queueMacroTask, catchify as $9HbP8$catchify, is_safari as $9HbP8$is_safari, observer as $9HbP8$observer, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, slider_fractional_factory as $9HbP8$slider_fractional_factory, 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, report as $9HbP8$report, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, dlog as $9HbP8$dlog, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, javascript_media_query as $9HbP8$javascript_media_query, fetch_recs as $9HbP8$fetch_recs, snakeCasifyObject as $9HbP8$snakeCasifyObject, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, base_url as $9HbP8$base_url, get_depict_id as $9HbP8$get_depict_id, get_user_id as $9HbP8$get_user_id, get_session_id as $9HbP8$get_session_id, sort_obj as $9HbP8$sort_obj, fetch_retry as $9HbP8$fetch_retry, add_version_query_params as $9HbP8$add_version_query_params, dwarn as $9HbP8$dwarn, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, use_href_accessor as $9HbP8$use_href_accessor, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { add_to_version_info as $9HbP8$add_to_version_info, queueMacroTask as $9HbP8$queueMacroTask, catchify as $9HbP8$catchify, is_safari as $9HbP8$is_safari, observer as $9HbP8$observer, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, slider_fractional_factory as $9HbP8$slider_fractional_factory, dlog as $9HbP8$dlog, 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, report as $9HbP8$report, 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, javascript_media_query as $9HbP8$javascript_media_query, fetch_recs as $9HbP8$fetch_recs, snakeCasifyObject as $9HbP8$snakeCasifyObject, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, base_url as $9HbP8$base_url, get_depict_id as $9HbP8$get_depict_id, get_user_id as $9HbP8$get_user_id, get_session_id as $9HbP8$get_session_id, sort_obj as $9HbP8$sort_obj, fetch_retry as $9HbP8$fetch_retry, add_version_query_params as $9HbP8$add_version_query_params, dwarn as $9HbP8$dwarn, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, use_href_accessor as $9HbP8$use_href_accessor, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
 import { createComponent as $9HbP8$createComponent, template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, effect as $9HbP8$effect, style as $9HbP8$style, spread as $9HbP8$spread, mergeProps as $9HbP8$mergeProps, runHydrationEvents as $9HbP8$runHydrationEvents, insert as $9HbP8$insert, setAttribute as $9HbP8$setAttribute, isServer as $9HbP8$isServer, addEventListener as $9HbP8$addEventListener, className as $9HbP8$className, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, classList as $9HbP8$classList, getNextMarker as $9HbP8$getNextMarker, Dynamic as $9HbP8$Dynamic, use as $9HbP8$use } from "solid-js/web";
 import { createSignal as $9HbP8$createSignal, getOwner as $9HbP8$getOwner, createEffect as $9HbP8$createEffect, runWithOwner as $9HbP8$runWithOwner, onCleanup as $9HbP8$onCleanup, createMemo as $9HbP8$createMemo, createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, Show as $9HbP8$Show, createRenderEffect as $9HbP8$createRenderEffect, createRoot as $9HbP8$createRoot, For as $9HbP8$For, createUniqueId as $9HbP8$createUniqueId, untrack as $9HbP8$untrack, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, Index as $9HbP8$Index, on as $9HbP8$on, batch as $9HbP8$batch, createReaction as $9HbP8$createReaction } from "solid-js";
 
 /*! 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 = "2.0.16";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.18";
 const $011607bdf658f807$var$ListingContext = /*@__PURE__*/$9HbP8$createContext();
 function $011607bdf658f807$export$e68cff63f76bd15b(props) {
   const our_object = {};
@@ -112,6 +112,7 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
     // what this whole thing does is set the sizes attribute to the actual size of one of the existing image containers, therefore the value doesn't have to manually be specified
+    createdSizeAccessor = true;
     setCurrentImageSize(() => $9HbP8$runWithOwner(owner, () => $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(container)));
   });
   $9HbP8$onCleanup(() => {
@@ -356,6 +357,7 @@ function $16351e4c87b90b3d$export$548d053aba053d79(display) {
   }
   return display.product_id;
 }
+let $29ec7cddbe1d3484$var$printedCloneError = false;
 function $29ec7cddbe1d3484$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $9HbP8$createMemo(() => {
     const displays = get_displays_();
@@ -398,7 +400,17 @@ function $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
       // re-render when the reference to the display object changes or the merchant or market changes
       // (We don't want to re-render if nothing has changed)
       ([merchant, market, display]) => {
-        // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+        // It's easy for merchants to accidentally mutate the display or some sub-object thereof
+        // We had a case on singular where they popped an image url and due to use caching after some time there was no image
+        // Attempt cloning the displays if possible (99.9% of the cases probably) and if not, just use the original display
+        try {
+          display = structuredClone(display);
+        } catch (e) {
+          if (!$29ec7cddbe1d3484$var$printedCloneError) {
+            $29ec7cddbe1d3484$var$printedCloneError = true;
+            $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()))),
           merchant: merchant,

package/package.json

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

@@ -72,7 +72,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 = "2.0.16";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.0.18";
 const $d067f3a30f047b41$var$ListingContext = /*@__PURE__*/$3hooq$solidjs.createContext();
 function $d067f3a30f047b41$export$e68cff63f76bd15b(props) {
   const our_object = {};
@@ -172,6 +172,7 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
     // what this whole thing does is set the sizes attribute to the actual size of one of the existing image containers, therefore the value doesn't have to manually be specified
+    createdSizeAccessor = true;
     setCurrentImageSize(() => $3hooq$solidjs.runWithOwner(owner, () => $858fdcf73148519f$export$e6fffe67d4cdd848(container)));
   });
   $3hooq$solidjs.onCleanup(() => {
@@ -415,6 +416,7 @@ function $b85edfec41cd3989$export$548d053aba053d79(display) {
   }
   return display.product_id;
 }
+let $76012c4468a53d1f$var$printedCloneError = false;
 function $76012c4468a53d1f$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $3hooq$solidjs.createMemo(() => {
     const displays = get_displays_();
@@ -459,7 +461,17 @@ function $76012c4468a53d1f$export$43f0fb951fcb0c54(_ref) {
       // (We don't want to re-render if nothing has changed)
       _ref2 => {
         let [merchant, market, display] = _ref2;
-        // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+        // It's easy for merchants to accidentally mutate the display or some sub-object thereof
+        // We had a case on singular where they popped an image url and due to use caching after some time there was no image
+        // Attempt cloning the displays if possible (99.9% of the cases probably) and if not, just use the original display
+        try {
+          display = structuredClone(display);
+        } catch (e) {
+          if (!$76012c4468a53d1f$var$printedCloneError) {
+            $76012c4468a53d1f$var$printedCloneError = true;
+            $3hooq$depictaiutilishared.dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
+          }
+        }
         return product_card_template_(display, {
           set_on_index_change: fn => $3hooq$solidjs.runWithOwner(owner, () => $3hooq$solidjs.createEffect(() => fn(index()))),
           merchant: merchant,

package/server/ES10/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.0.16";
+export const version = "2.0.18";
 /**
  * Provider to wrap every listing (group of products) in
  * Used for example for deduplicating ResizeObservers for responsive images
@@ -47,10 +47,12 @@ export function ShopifyResponsiveImg(props: {
 }): HTMLImageElement;
 export const shopifyContainedImageContextSymbol: unique symbol;
 /**
- * Abstraction built on top of ShopifyResponsiveImg
- * @param src TODO
- * @param aspectRatio
- * @constructor
+ * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
+ * Will return a div of the provided aspect ratio that always has the same size, to avoid content layout shift. Will then put the image inside of the container once it loads.
+ * Also makes a responsive image without you having to do anything: uses shopify's CDN which picks the best image format to resize the image to the size of the first image container in a certain listing.
+ * This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
+ * @property src image source
+ * @property aspectRatio aspect ratio of the image
  */
 export function ShopifyContainedImage(props: {
   src: string;

package/server/ES10/index.js

@@ -1,4 +1,4 @@
-import { add_to_version_info as $b8hua$add_to_version_info, queueMacroTask as $b8hua$queueMacroTask, catchify as $b8hua$catchify, is_safari as $b8hua$is_safari, observer as $b8hua$observer, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, slider_fading_factory as $b8hua$slider_fading_factory, slider_fractional_factory as $b8hua$slider_fractional_factory, 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, report as $b8hua$report, useExpandingContainer as $b8hua$useExpandingContainer, standard_price_format as $b8hua$standard_price_format, dlog as $b8hua$dlog, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, javascript_media_query as $b8hua$javascript_media_query, fetch_recs as $b8hua$fetch_recs, snakeCasifyObject as $b8hua$snakeCasifyObject, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, base_url as $b8hua$base_url, get_depict_id as $b8hua$get_depict_id, get_user_id as $b8hua$get_user_id, get_session_id as $b8hua$get_session_id, make_url_with_query_params as $b8hua$make_url_with_query_params, fetch_retry as $b8hua$fetch_retry, add_version_query_params as $b8hua$add_version_query_params, dwarn as $b8hua$dwarn, sort_obj as $b8hua$sort_obj, edit_current_page_meta_tags as $b8hua$edit_current_page_meta_tags, use_href_accessor as $b8hua$use_href_accessor, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, ContainedImage as $b8hua$ContainedImage, deparallelize_no_drop as $b8hua$deparallelize_no_drop, ListenableSet as $b8hua$ListenableSet, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { add_to_version_info as $b8hua$add_to_version_info, queueMacroTask as $b8hua$queueMacroTask, catchify as $b8hua$catchify, is_safari as $b8hua$is_safari, observer as $b8hua$observer, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, slider_fading_factory as $b8hua$slider_fading_factory, slider_fractional_factory as $b8hua$slider_fractional_factory, dlog as $b8hua$dlog, 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, report as $b8hua$report, 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, javascript_media_query as $b8hua$javascript_media_query, fetch_recs as $b8hua$fetch_recs, snakeCasifyObject as $b8hua$snakeCasifyObject, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, base_url as $b8hua$base_url, get_depict_id as $b8hua$get_depict_id, get_user_id as $b8hua$get_user_id, get_session_id as $b8hua$get_session_id, make_url_with_query_params as $b8hua$make_url_with_query_params, fetch_retry as $b8hua$fetch_retry, add_version_query_params as $b8hua$add_version_query_params, dwarn as $b8hua$dwarn, sort_obj as $b8hua$sort_obj, edit_current_page_meta_tags as $b8hua$edit_current_page_meta_tags, use_href_accessor as $b8hua$use_href_accessor, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, ContainedImage as $b8hua$ContainedImage, deparallelize_no_drop as $b8hua$deparallelize_no_drop, ListenableSet as $b8hua$ListenableSet, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
 import { createComponent as $b8hua$createComponent, ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, ssrStyle as $b8hua$ssrStyle, ssrElement as $b8hua$ssrElement, escape as $b8hua$escape, insert as $b8hua$insert, ssrAttribute as $b8hua$ssrAttribute, mergeProps as $b8hua$mergeProps, isServer as $b8hua$isServer, ssrClassList as $b8hua$ssrClassList, Dynamic as $b8hua$Dynamic } from "solid-js/web";
 import { createSignal as $b8hua$createSignal, getOwner as $b8hua$getOwner, createEffect as $b8hua$createEffect, runWithOwner as $b8hua$runWithOwner, onCleanup as $b8hua$onCleanup, createMemo as $b8hua$createMemo, createContext as $b8hua$createContext, useContext as $b8hua$useContext, createResource as $b8hua$createResource, Suspense as $b8hua$Suspense, Show as $b8hua$Show, createRenderEffect as $b8hua$createRenderEffect, createRoot as $b8hua$createRoot, For as $b8hua$For, createUniqueId as $b8hua$createUniqueId, untrack as $b8hua$untrack, createComputed as $b8hua$createComputed, ErrorBoundary as $b8hua$ErrorBoundary, Index as $b8hua$Index, on as $b8hua$on, batch as $b8hua$batch, createReaction as $b8hua$createReaction } from "solid-js";
 import $b8hua$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
@@ -8,7 +8,7 @@ import $b8hua$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/def
 /*! 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 = "2.0.16";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.0.18";
 const $5441862cd2f5e111$var$ListingContext = /*@__PURE__*/$b8hua$createContext();
 function $5441862cd2f5e111$export$e68cff63f76bd15b(props) {
   const our_object = {};
@@ -108,6 +108,7 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
     // what this whole thing does is set the sizes attribute to the actual size of one of the existing image containers, therefore the value doesn't have to manually be specified
+    createdSizeAccessor = true;
     setCurrentImageSize(() => $b8hua$runWithOwner(owner, () => $56047603f9d212b6$export$e6fffe67d4cdd848(container)));
   });
   $b8hua$onCleanup(() => {
@@ -351,6 +352,7 @@ function $6a4c7ed6d005505c$export$548d053aba053d79(display) {
   }
   return display.product_id;
 }
+let $2d7bad8684bc7f44$var$printedCloneError = false;
 function $2d7bad8684bc7f44$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $b8hua$createMemo(() => {
     const displays = get_displays_();
@@ -395,7 +397,17 @@ function $2d7bad8684bc7f44$export$43f0fb951fcb0c54(_ref) {
       // (We don't want to re-render if nothing has changed)
       _ref2 => {
         let [merchant, market, display] = _ref2;
-        // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+        // It's easy for merchants to accidentally mutate the display or some sub-object thereof
+        // We had a case on singular where they popped an image url and due to use caching after some time there was no image
+        // Attempt cloning the displays if possible (99.9% of the cases probably) and if not, just use the original display
+        try {
+          display = structuredClone(display);
+        } catch (e) {
+          if (!$2d7bad8684bc7f44$var$printedCloneError) {
+            $2d7bad8684bc7f44$var$printedCloneError = true;
+            $b8hua$dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
+          }
+        }
         return product_card_template_(display, {
           set_on_index_change: fn => $b8hua$runWithOwner(owner, () => $b8hua$createEffect(() => fn(index()))),
           merchant: merchant,

package/server/latest/index.cjs

@@ -66,7 +66,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 = "2.0.16";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.18";
 const $84798aaa863a4909$var$ListingContext = /*@__PURE__*/$5vyXB$solidjs.createContext();
 function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
   const our_object = {};
@@ -163,6 +163,7 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
     // what this whole thing does is set the sizes attribute to the actual size of one of the existing image containers, therefore the value doesn't have to manually be specified
+    createdSizeAccessor = true;
     setCurrentImageSize(() => $5vyXB$solidjs.runWithOwner(owner, () => $19950faaac026e09$export$e6fffe67d4cdd848(container)));
   });
   $5vyXB$solidjs.onCleanup(() => {
@@ -386,6 +387,7 @@ function $a5871dacf261adf8$export$548d053aba053d79(display) {
   }
   return display.product_id;
 }
+let $a73063cc642f3e5f$var$printedCloneError = false;
 function $a73063cc642f3e5f$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $5vyXB$solidjs.createMemo(() => {
     const displays = get_displays_();
@@ -428,7 +430,17 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
       // re-render when the reference to the display object changes or the merchant or market changes
       // (We don't want to re-render if nothing has changed)
       ([merchant, market, display]) => {
-        // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+        // It's easy for merchants to accidentally mutate the display or some sub-object thereof
+        // We had a case on singular where they popped an image url and due to use caching after some time there was no image
+        // Attempt cloning the displays if possible (99.9% of the cases probably) and if not, just use the original display
+        try {
+          display = structuredClone(display);
+        } catch (e) {
+          if (!$a73063cc642f3e5f$var$printedCloneError) {
+            $a73063cc642f3e5f$var$printedCloneError = true;
+            $5vyXB$depictaiutilishared.dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
+          }
+        }
         return product_card_template_(display, {
           set_on_index_change: fn => $5vyXB$solidjs.runWithOwner(owner, () => $5vyXB$solidjs.createEffect(() => fn(index()))),
           merchant: merchant,

package/server/latest/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.0.16";
+export const version = "2.0.18";
 /**
  * Provider to wrap every listing (group of products) in
  * Used for example for deduplicating ResizeObservers for responsive images
@@ -47,10 +47,12 @@ export function ShopifyResponsiveImg(props: {
 }): HTMLImageElement;
 export const shopifyContainedImageContextSymbol: unique symbol;
 /**
- * Abstraction built on top of ShopifyResponsiveImg
- * @param src TODO
- * @param aspectRatio
- * @constructor
+ * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
+ * Will return a div of the provided aspect ratio that always has the same size, to avoid content layout shift. Will then put the image inside of the container once it loads.
+ * Also makes a responsive image without you having to do anything: uses shopify's CDN which picks the best image format to resize the image to the size of the first image container in a certain listing.
+ * This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
+ * @property src image source
+ * @property aspectRatio aspect ratio of the image
  */
 export function ShopifyContainedImage(props: {
   src: string;

package/server/latest/index.js

@@ -1,11 +1,11 @@
-import { add_to_version_info as $i7OB2$add_to_version_info, queueMacroTask as $i7OB2$queueMacroTask, catchify as $i7OB2$catchify, is_safari as $i7OB2$is_safari, observer as $i7OB2$observer, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, slider_fractional_factory as $i7OB2$slider_fractional_factory, 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, report as $i7OB2$report, useExpandingContainer as $i7OB2$useExpandingContainer, standard_price_format as $i7OB2$standard_price_format, dlog as $i7OB2$dlog, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, javascript_media_query as $i7OB2$javascript_media_query, fetch_recs as $i7OB2$fetch_recs, snakeCasifyObject as $i7OB2$snakeCasifyObject, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, base_url as $i7OB2$base_url, get_depict_id as $i7OB2$get_depict_id, get_user_id as $i7OB2$get_user_id, get_session_id as $i7OB2$get_session_id, sort_obj as $i7OB2$sort_obj, fetch_retry as $i7OB2$fetch_retry, add_version_query_params as $i7OB2$add_version_query_params, dwarn as $i7OB2$dwarn, make_url_with_query_params as $i7OB2$make_url_with_query_params, edit_current_page_meta_tags as $i7OB2$edit_current_page_meta_tags, use_href_accessor as $i7OB2$use_href_accessor, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, ContainedImage as $i7OB2$ContainedImage, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ListenableSet as $i7OB2$ListenableSet, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { add_to_version_info as $i7OB2$add_to_version_info, queueMacroTask as $i7OB2$queueMacroTask, catchify as $i7OB2$catchify, is_safari as $i7OB2$is_safari, observer as $i7OB2$observer, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, slider_fractional_factory as $i7OB2$slider_fractional_factory, dlog as $i7OB2$dlog, 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, report as $i7OB2$report, 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, javascript_media_query as $i7OB2$javascript_media_query, fetch_recs as $i7OB2$fetch_recs, snakeCasifyObject as $i7OB2$snakeCasifyObject, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, base_url as $i7OB2$base_url, get_depict_id as $i7OB2$get_depict_id, get_user_id as $i7OB2$get_user_id, get_session_id as $i7OB2$get_session_id, sort_obj as $i7OB2$sort_obj, fetch_retry as $i7OB2$fetch_retry, add_version_query_params as $i7OB2$add_version_query_params, dwarn as $i7OB2$dwarn, make_url_with_query_params as $i7OB2$make_url_with_query_params, edit_current_page_meta_tags as $i7OB2$edit_current_page_meta_tags, use_href_accessor as $i7OB2$use_href_accessor, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, ContainedImage as $i7OB2$ContainedImage, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ListenableSet as $i7OB2$ListenableSet, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
 import { createComponent as $i7OB2$createComponent, ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, ssrStyle as $i7OB2$ssrStyle, ssrElement as $i7OB2$ssrElement, escape as $i7OB2$escape, insert as $i7OB2$insert, ssrAttribute as $i7OB2$ssrAttribute, mergeProps as $i7OB2$mergeProps, isServer as $i7OB2$isServer, ssrClassList as $i7OB2$ssrClassList, Dynamic as $i7OB2$Dynamic } from "solid-js/web";
 import { createSignal as $i7OB2$createSignal, getOwner as $i7OB2$getOwner, createEffect as $i7OB2$createEffect, runWithOwner as $i7OB2$runWithOwner, onCleanup as $i7OB2$onCleanup, createMemo as $i7OB2$createMemo, createContext as $i7OB2$createContext, useContext as $i7OB2$useContext, createResource as $i7OB2$createResource, Suspense as $i7OB2$Suspense, Show as $i7OB2$Show, createRenderEffect as $i7OB2$createRenderEffect, createRoot as $i7OB2$createRoot, For as $i7OB2$For, createUniqueId as $i7OB2$createUniqueId, untrack as $i7OB2$untrack, createComputed as $i7OB2$createComputed, ErrorBoundary as $i7OB2$ErrorBoundary, Index as $i7OB2$Index, on as $i7OB2$on, batch as $i7OB2$batch, createReaction as $i7OB2$createReaction } from "solid-js";
 
 /*! 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 = "2.0.16";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.18";
 const $011607bdf658f807$var$ListingContext = /*@__PURE__*/$i7OB2$createContext();
 function $011607bdf658f807$export$e68cff63f76bd15b(props) {
   const our_object = {};
@@ -102,6 +102,7 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
     // what this whole thing does is set the sizes attribute to the actual size of one of the existing image containers, therefore the value doesn't have to manually be specified
+    createdSizeAccessor = true;
     setCurrentImageSize(() => $i7OB2$runWithOwner(owner, () => $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(container)));
   });
   $i7OB2$onCleanup(() => {
@@ -325,6 +326,7 @@ function $16351e4c87b90b3d$export$548d053aba053d79(display) {
   }
   return display.product_id;
 }
+let $29ec7cddbe1d3484$var$printedCloneError = false;
 function $29ec7cddbe1d3484$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $i7OB2$createMemo(() => {
     const displays = get_displays_();
@@ -367,7 +369,17 @@ function $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
       // re-render when the reference to the display object changes or the merchant or market changes
       // (We don't want to re-render if nothing has changed)
       ([merchant, market, display]) => {
-        // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+        // It's easy for merchants to accidentally mutate the display or some sub-object thereof
+        // We had a case on singular where they popped an image url and due to use caching after some time there was no image
+        // Attempt cloning the displays if possible (99.9% of the cases probably) and if not, just use the original display
+        try {
+          display = structuredClone(display);
+        } catch (e) {
+          if (!$29ec7cddbe1d3484$var$printedCloneError) {
+            $29ec7cddbe1d3484$var$printedCloneError = true;
+            $i7OB2$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 => $i7OB2$runWithOwner(owner, () => $i7OB2$createEffect(() => fn(index()))),
           merchant: merchant,