@depict-ai/ui 2.0.14 → 2.0.16

package/latest/index.cjs

@@ -10,6 +10,10 @@ function $parcel$export(e, n, v, s) {
     configurable: true
   });
 }
+$parcel$export(module.exports, "shopifyContainedImageContextSymbol", () => $a33065cfed827fc0$export$d7b7ab832c20e2f4);
+$parcel$export(module.exports, "ListingProvider", () => $84798aaa863a4909$export$e68cff63f76bd15b);
+$parcel$export(module.exports, "useListing", () => $84798aaa863a4909$export$8d0c4fdbb05a2f2e);
+$parcel$export(module.exports, "ShopifyContainedImage", () => $a33065cfed827fc0$export$e4b984597b71e989);
 $parcel$export(module.exports, "SlidableItems", () => $a0e53f99354809d9$export$6649caad96ef8870);
 $parcel$export(module.exports, "make_accurate_size_accessor", () => $e5f442fb78c98741$export$9f191182275e9ef);
 $parcel$export(module.exports, "RecommendationSlider", () => $72f96c4782db0b1b$export$9574e176201e5e8d);
@@ -62,7 +66,132 @@ $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.14";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.16";
+const $84798aaa863a4909$var$ListingContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
+function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
+  const our_object = {};
+  return $gVhhF$solidjsweb.createComponent($84798aaa863a4909$var$ListingContext.Provider, {
+    value: our_object,
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $84798aaa863a4909$export$8d0c4fdbb05a2f2e() {
+  return $gVhhF$solidjs.useContext($84798aaa863a4909$var$ListingContext);
+}
+const $93304d59a9747aa6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div></div>`, 2);
+function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
+  return (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($93304d59a9747aa6$var$_tmpl$);
+    $gVhhF$solidjsweb.effect(_$p => $gVhhF$solidjsweb.style(_el$, `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`, _$p));
+    return _el$;
+  })();
+}
+const $19950faaac026e09$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<img>`, 1);
+function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $gVhhF$solidjs.createSignal(0);
+  const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const {
+        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));
+    }
+  }));
+  // 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.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $gVhhF$depictaiutilishared.observer).onexists(whatToWatch, ({
+    element: element
+  }) => requestAnimationFrame($gVhhF$depictaiutilishared.catchify(() => resizeObserver.observe(element))));
+  $gVhhF$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
+  return size;
+}
+function $19950faaac026e09$export$6e5611bc7e57e477(props) {
+  // Enable reactive props
+  const otherOptions = $gVhhF$solidjs.createMemo(() => {
+    const cloned_props = {
+      ...props
+    };
+    delete cloned_props.resolutions;
+    // @ts-ignore
+    delete cloned_props.size;
+    // @ts-ignore
+    delete cloned_props.src;
+    return cloned_props;
+  });
+  const src_options = $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, 4096]);
+    return {
+      src: fallback_src,
+      srcset: srcset
+    };
+  });
+  return (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($19950faaac026e09$var$_tmpl$);
+    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(otherOptions, src_options, {
+      get sizes() {
+        return props.size() + "px";
+      }
+    }), false, false);
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$;
+  })();
+}
+function $19950faaac026e09$var$make_srcset(url, resolutions) {
+  return resolutions.map(width => `${$19950faaac026e09$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+}
+function $19950faaac026e09$var$generateImageUrl(url, width) {
+  url.searchParams.set("width", width);
+  return url.href;
+}
+const $a33065cfed827fc0$var$backupSizeSignal = /*@__PURE__*/$gVhhF$solidjs.createSignal();
+const $a33065cfed827fc0$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
+function $a33065cfed827fc0$export$e4b984597b71e989(props) {
+  const context = $84798aaa863a4909$export$8d0c4fdbb05a2f2e();
+  if (context && !context[$a33065cfed827fc0$export$d7b7ab832c20e2f4])
+    // create a signal that's the same for all items in this listing
+    context[$a33065cfed827fc0$export$d7b7ab832c20e2f4] = $gVhhF$solidjs.createSignal();
+  const [currentImageSize, setCurrentImageSize] = context?.[$a33065cfed827fc0$export$d7b7ab832c20e2f4] || $a33065cfed827fc0$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
+  const container = $gVhhF$solidjsweb.createComponent((0, $93304d59a9747aa6$export$94026ee33dbabc26), {
+    get aspectRatio() {
+      return props.aspectRatio;
+    }
+  });
+  const owner = $gVhhF$solidjs.getOwner();
+  let createdSizeAccessor = false;
+  let wasCleanedUp = false;
+  $gVhhF$solidjs.createEffect(() => {
+    if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
+    // ensure we always have a size accessor
+    // 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
+    setCurrentImageSize(() => $gVhhF$solidjs.runWithOwner(owner, () => $19950faaac026e09$export$e6fffe67d4cdd848(container)));
+  });
+  $gVhhF$solidjs.onCleanup(() => {
+    wasCleanedUp = true; // important to set this before the function call below and always, so the dead effects don't create dead size accessors
+    if (!createdSizeAccessor) return;
+    $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
+  });
+
+  container.append($gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), {
+    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;
+    }
+  }));
+  return container;
+}
 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"></path></svg>`, 4);
 function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
@@ -660,15 +789,19 @@ function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
     const [recommendations_resource_] = $gVhhF$solidjs.createResource(() => props.recommendations, recs => recs);
     return (() => {
       const _el$ = $gVhhF$solidjsweb.getNextElement($72f96c4782db0b1b$var$_tmpl$);
-      $gVhhF$solidjsweb.insert(_el$, () => $363ce4d1d71041aa$export$d41d19e89346fa2({
-        product_card_template_: (...args) => props.product_card_template(...args),
-        recommendations_resource_: recommendations_resource_,
-        market_: () => props.market,
-        merchant_: () => props.merchant,
-        layout_options_: $gVhhF$solidjs.createMemo(() => ({
-          cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
-          ...grid_spacing_override()
-        }))
+      $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+        get children() {
+          return $363ce4d1d71041aa$export$d41d19e89346fa2({
+            product_card_template_: (...args) => props.product_card_template(...args),
+            recommendations_resource_: recommendations_resource_,
+            market_: () => props.market,
+            merchant_: () => props.merchant,
+            layout_options_: $gVhhF$solidjs.createMemo(() => ({
+              cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
+              ...grid_spacing_override()
+            }))
+          });
+        }
       }));
       return _el$;
     })();
@@ -773,83 +906,25 @@ function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
     const [recommendations_resource_] = $gVhhF$solidjs.createResource(() => props.recommendations, recs => recs);
     return (() => {
       const _el$2 = $gVhhF$solidjsweb.getNextElement($1f8dbf7e28b3eff2$var$_tmpl$2);
-      $gVhhF$solidjsweb.insert(_el$2, () => $b8e79813f4f7ebe4$export$7da560f849543dff({
-        rows_object_: rows_object_,
-        product_card_template_: (...args) => props.product_card_template(...args),
-        recommendations_resource_: recommendations_resource_,
-        market_: () => props.market,
-        merchant_: () => props.merchant,
-        layout_options_: $gVhhF$solidjs.createMemo(() => ({
-          cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
-          ...grid_spacing_override()
-        }))
+      $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+        get children() {
+          return $b8e79813f4f7ebe4$export$7da560f849543dff({
+            rows_object_: rows_object_,
+            product_card_template_: (...args) => props.product_card_template(...args),
+            recommendations_resource_: recommendations_resource_,
+            market_: () => props.market,
+            merchant_: () => props.merchant,
+            layout_options_: $gVhhF$solidjs.createMemo(() => ({
+              cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
+              ...grid_spacing_override()
+            }))
+          });
+        }
       }));
       return _el$2;
     })();
   }, "RecommendationGrid failed");
 }
-const $19950faaac026e09$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<img>`, 1);
-function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
-  const [size, setSize] = $gVhhF$solidjs.createSignal(0);
-  const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => {
-    for (let j = 0; j < records.length; j++) {
-      const {
-        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));
-    }
-  }));
-  // 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.
-  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
-  const disconnect = (0, $gVhhF$depictaiutilishared.observer).onexists(whatToWatch, ({
-    element: element
-  }) => requestAnimationFrame($gVhhF$depictaiutilishared.catchify(() => resizeObserver.observe(element))));
-  $gVhhF$solidjs.onCleanup(() => {
-    resizeObserver.disconnect();
-    disconnect();
-  });
-  return size;
-}
-function $19950faaac026e09$export$6e5611bc7e57e477({
-  src: raw_src,
-  size: size,
-  resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
-  ...otherOptions
-}) {
-  const src = new URL(raw_src, location.origin);
-  const fallbackSrc = $19950faaac026e09$var$generateImageUrl(src, 400);
-  const srcset = $19950faaac026e09$var$make_srcset(src, resolutions);
-  return (() => {
-    const _el$ = $gVhhF$solidjsweb.getNextElement($19950faaac026e09$var$_tmpl$);
-    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(otherOptions, {
-      "src": fallbackSrc,
-      "srcset": srcset,
-      get sizes() {
-        return size() + "px";
-      }
-    }), false, false);
-    $gVhhF$solidjsweb.runHydrationEvents();
-    return _el$;
-  })();
-}
-function $19950faaac026e09$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => `${$19950faaac026e09$var$generateImageUrl(url, width)} ${width}w`).join(", ");
-}
-function $19950faaac026e09$var$generateImageUrl(url, width) {
-  url.searchParams.set("width", width);
-  return url.href;
-}
-const $93304d59a9747aa6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div></div>`, 2);
-function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
-  return (() => {
-    const _el$ = $gVhhF$solidjsweb.getNextElement($93304d59a9747aa6$var$_tmpl$);
-    $gVhhF$solidjsweb.effect(_$p => $gVhhF$solidjsweb.style(_el$, `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`, _$p));
-    return _el$;
-  })();
-}
 function $4b455f60dadde8b8$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -6541,26 +6616,30 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
       severity_: "error",
       message_: "Showing results failed",
       get children() {
-        return $fe76fb463cc60b89$export$3925f87b1545cfc6({
-          min_products_to_fetch_:
-          // if you want to get if all products have been loaded you can add an optional signal here, see SearchPage
-          min_products_to_fetch_,
-          query_base_: query_base_,
-          plp_results_: plp_results_,
-          depict_api_: depict_api_,
-          first_result_in_viewport_: first_result_in_viewport_,
-          last_result_in_viewport_: last_result_in_viewport_,
-          scroll_restoration_data_: scroll_restoration_data_,
-          layout_options_: layout_options_,
-          product_card_template_: product_card_template_,
-          sort_or_filter_open_: sort_or_filter_open_,
-          desktop_filter_elements_: desktop_filter_elements_,
-          id_currently_querying_for_: query_id_,
-          no_results_options_: {
-            selected_filters_: selected_filters_,
-            expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-            i18n_: i18n_,
-            local_filter_cache_: local_filter_cache_
+        return $gVhhF$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+          get children() {
+            return $fe76fb463cc60b89$export$3925f87b1545cfc6({
+              min_products_to_fetch_:
+              // if you want to get if all products have been loaded you can add an optional signal here, see SearchPage
+              min_products_to_fetch_,
+              query_base_: query_base_,
+              plp_results_: plp_results_,
+              depict_api_: depict_api_,
+              first_result_in_viewport_: first_result_in_viewport_,
+              last_result_in_viewport_: last_result_in_viewport_,
+              scroll_restoration_data_: scroll_restoration_data_,
+              layout_options_: layout_options_,
+              product_card_template_: product_card_template_,
+              sort_or_filter_open_: sort_or_filter_open_,
+              desktop_filter_elements_: desktop_filter_elements_,
+              id_currently_querying_for_: query_id_,
+              no_results_options_: {
+                selected_filters_: selected_filters_,
+                expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+                i18n_: i18n_,
+                local_filter_cache_: local_filter_cache_
+              }
+            });
           }
         });
       }
@@ -7562,8 +7641,10 @@ function $fb29c6201c369e39$export$7de92c4c2205ebf3({
 }) {
   const [get_showing_recommendation_rows] = showing_recommendation_rows_; // We reset this in after_submit in search.tsx FYI
   const rows_object = view_more_button_ ? $fb29c6201c369e39$var$make_state_saved_rows(showing_recommendation_rows_, i18n_) : "all";
-  const [recommendations_resource] = $gVhhF$solidjs.createResource(search_query_base_, query => depict_api_.get_recommended(query).then(r => r.displays));
-  const is_showing_something = $gVhhF$solidjs.createMemo(() => recommendations_resource.loading || recommendations_resource()?.length);
+  const [recommendations_resource] = $gVhhF$solidjs.createResource(() => all_products_loaded_() && search_query_base_(),
+  // only fetch/refetch if all products are loaded
+  query => query && depict_api_.get_recommended(query).then(r => r.displays));
+  const should_show = $gVhhF$solidjs.createMemo(() => !!((recommendations_resource.loading || recommendations_resource()?.length) && all_products_loaded_()));
   const num_placeholders_ = $gVhhF$solidjs.createMemo(() => (0, $aec24316ed262dc0$export$6c9030e511152266) + get_showing_recommendation_rows() * Math.max(...layout_options_().cols_at_size.map(([per_column]) => per_column)));
   // Don't tear down elements every time one updates the page - don't put them within <Show>
   const elements = (() => {
@@ -7593,7 +7674,10 @@ function $fb29c6201c369e39$export$7de92c4c2205ebf3({
           get children() {
             return (() => {
               // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
-              const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => recommendations_resource() || []));
+              const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(prev => {
+                if (!should_show() && prev) return prev; // When we're invisible, don't update what we're rendering to be possibly undefined to preserve the same products if possible
+                return recommendations_resource() || [];
+              }));
               return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
                 displays_by_key_: displays_by_key_,
                 merchant_: $gVhhF$solidjs.createMemo(() => search_query_base_().tenant),
@@ -7609,7 +7693,7 @@ function $fb29c6201c369e39$export$7de92c4c2205ebf3({
   })();
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
-      return $gVhhF$solidjsweb.memo(() => !!is_showing_something())() && all_products_loaded_();
+      return should_show();
     },
     children: elements
   });
@@ -9067,17 +9151,21 @@ function $f40a47a30a358305$export$1c593cbd6f1e10bc({
       severity_: "error",
       message_: "Instant results failed",
       get children() {
-        return $6ae556e536054e87$export$62f101a8aa597bf8({
-          search_field_value_: search_field_value_,
-          depict_api_: depict_api_,
-          tenant_: tenant_,
-          i18n_: i18n_,
-          market_: market_,
-          set_total_num_results_accessor_: set_total_num_results_accessor_,
-          router_: router_,
-          set_modal_search_results_: set_modal_search_results_,
-          content_search_enabled_: content_search_enabled_,
-          ...instant_results_options_
+        return $gVhhF$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+          get children() {
+            return $6ae556e536054e87$export$62f101a8aa597bf8({
+              search_field_value_: search_field_value_,
+              depict_api_: depict_api_,
+              tenant_: tenant_,
+              i18n_: i18n_,
+              market_: market_,
+              set_total_num_results_accessor_: set_total_num_results_accessor_,
+              router_: router_,
+              set_modal_search_results_: set_modal_search_results_,
+              content_search_enabled_: content_search_enabled_,
+              ...instant_results_options_
+            });
+          }
         });
       }
     }), _el$10, _co$2);
@@ -9978,14 +10066,18 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
             return content_search_enabled_();
           },
           get children() {
-            return $gVhhF$solidjsweb.createComponent((0, $3716b8caf7f959e2$export$6d0c9c22f6652669), {
-              content_results_rows_: content_results_rows_,
-              search_results_: search_results_,
-              i18n_: i18n_,
-              get_search_query_: get_search_query_,
-              layout_options_: content_layout_options_,
-              router_: router_,
-              query_base_: search_query_base_
+            return $gVhhF$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+              get children() {
+                return $gVhhF$solidjsweb.createComponent((0, $3716b8caf7f959e2$export$6d0c9c22f6652669), {
+                  content_results_rows_: content_results_rows_,
+                  search_results_: search_results_,
+                  i18n_: i18n_,
+                  get_search_query_: get_search_query_,
+                  layout_options_: content_layout_options_,
+                  router_: router_,
+                  query_base_: search_query_base_
+                });
+              }
             });
           }
         });
@@ -10019,28 +10111,32 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
       severity_: "error",
       message_: "Search results failed",
       get children() {
-        return $fe76fb463cc60b89$export$3925f87b1545cfc6({
-          all_products_loaded_: all_products_loaded_,
-          min_products_to_fetch_: min_products_to_fetch_,
-          query_base_: search_query_base_,
-          plp_results_: search_results_,
-          depict_api_: depict_api_,
-          first_result_in_viewport_: first_result_in_viewport_,
-          last_result_in_viewport_: last_result_in_viewport_,
-          scroll_restoration_data_: scroll_restoration_data_,
-          desktop_filter_elements_: desktop_filter_elements_,
-          product_card_template_: product_card_template_,
-          layout_options_: layout_options_,
-          sort_or_filter_open_: sort_or_filter_open_,
-          id_currently_querying_for_: get_search_query_,
-          no_results_options_: {
-            selected_filters_: selected_filters_,
-            expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-            local_filter_cache_: local_filter_cache_,
-            i18n_: {
-              ...i18n_,
-              no_results_text_: no_results_text_
-            }
+        return $gVhhF$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+          get children() {
+            return $fe76fb463cc60b89$export$3925f87b1545cfc6({
+              all_products_loaded_: all_products_loaded_,
+              min_products_to_fetch_: min_products_to_fetch_,
+              query_base_: search_query_base_,
+              plp_results_: search_results_,
+              depict_api_: depict_api_,
+              first_result_in_viewport_: first_result_in_viewport_,
+              last_result_in_viewport_: last_result_in_viewport_,
+              scroll_restoration_data_: scroll_restoration_data_,
+              desktop_filter_elements_: desktop_filter_elements_,
+              product_card_template_: product_card_template_,
+              layout_options_: layout_options_,
+              sort_or_filter_open_: sort_or_filter_open_,
+              id_currently_querying_for_: get_search_query_,
+              no_results_options_: {
+                selected_filters_: selected_filters_,
+                expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+                local_filter_cache_: local_filter_cache_,
+                i18n_: {
+                  ...i18n_,
+                  no_results_text_: no_results_text_
+                }
+              }
+            });
           }
         });
       }
@@ -10053,17 +10149,21 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
           severity_: "error",
           message_: "Search recommendations failed",
           get children() {
-            return $gVhhF$solidjsweb.createComponent((0, $fb29c6201c369e39$export$7de92c4c2205ebf3), {
-              depict_api_: depict_api_,
-              i18n_: i18n_,
-              search_query_base_: search_query_base_,
-              get layout_options_() {
-                return $gVhhF$solidjs.createMemo(() => recommendations_layout_options_?.() ?? layout_options_());
-              },
-              showing_recommendation_rows_: showing_recommendation_rows_,
-              view_more_button_: search_recs_view_more_,
-              product_card_template_: product_card_template_,
-              all_products_loaded_: get_all_products_loaded
+            return $gVhhF$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+              get children() {
+                return $gVhhF$solidjsweb.createComponent((0, $fb29c6201c369e39$export$7de92c4c2205ebf3), {
+                  depict_api_: depict_api_,
+                  i18n_: i18n_,
+                  search_query_base_: search_query_base_,
+                  get layout_options_() {
+                    return $gVhhF$solidjs.createMemo(() => recommendations_layout_options_?.() ?? layout_options_());
+                  },
+                  showing_recommendation_rows_: showing_recommendation_rows_,
+                  view_more_button_: search_recs_view_more_,
+                  product_card_template_: product_card_template_,
+                  all_products_loaded_: get_all_products_loaded
+                });
+              }
             });
           }
         });

package/latest/index.d.ts

@@ -1,4 +1,4 @@
-import { JSX, Signal, Accessor, Setter } from "solid-js";
+import { JSX, Accessor, Signal, Setter } from "solid-js";
 import { Amazing_Slider, Display, ColsAtSize, report, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
 import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
 import { SearchFilter as _SearchFilter1, ContentLink, SearchResponse } from "@depict-ai/types/api/SearchResponse";
@@ -7,7 +7,55 @@ 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.14";
+export const version = "2.0.16";
+/**
+ * Provider to wrap every listing (group of products) in
+ * Used for example for deduplicating ResizeObservers for responsive images
+ */
+export function ListingProvider(props: {
+  children: JSX.Element;
+}): JSX.Element;
+/**
+ * Use this to get the context object if your component is within a ListingProvider
+ */
+export function useListing(): Record<symbol, any> | undefined;
+/** @jsxImportSource solid-js */
+/**
+ * ImageContainer for using the padding hack to set the aspect ratio of an image
+ * Put this around an <img> or <ResponsiveImg> to give it a container that always has the same size as the image. This prevents CLS and enables ResponsiveImg to work (the browser to load the correct image size)
+ * (Not using the CSS aspect-ratio property yet here due to browser support)
+ */
+export function ImageContainer(props: {
+  aspectRatio: number;
+}): HTMLDivElement;
+/**
+ * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
+ */
+export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
+/**
+ * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
+ * This is used for our responsive images:
+ * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
+ * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
+ * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
+ */
+export function ShopifyResponsiveImg(props: {
+  resolutions?: number[];
+  size: Accessor<number>;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
+  src: string;
+}): HTMLImageElement;
+export const shopifyContainedImageContextSymbol: unique symbol;
+/**
+ * Abstraction built on top of ShopifyResponsiveImg
+ * @param src TODO
+ * @param aspectRatio
+ * @constructor
+ */
+export function ShopifyContainedImage(props: {
+  src: string;
+  aspectRatio: number;
+}): HTMLDivElement;
 /** @jsxImportSource solid-js */
 export function GenericSliderArrowButton(props?: {
   width_?: number;
@@ -154,37 +202,6 @@ export function RecommendationGrid<T extends Display>(props: {
   merchant?: never;
   market?: never;
 } & RecommendationGridBaseProps<T>): HTMLDivElement;
-/**
- * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
- */
-export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
-/**
- * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
- * This is used for our responsive images:
- * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
- * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
- * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
- */
-export function ShopifyResponsiveImg({
-  src: raw_src,
-  size,
-  resolutions,
-  ...otherOptions
-}: {
-  resolutions?: number[];
-  size: Accessor<number>;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
-  src: string;
-}): HTMLImageElement;
-/** @jsxImportSource solid-js */
-/**
- * ImageContainer for using the padding hack to set the aspect ratio of an image
- * Put this around an <img> or <ResponsiveImg> to give it a container that always has the same size as the image. This prevents CLS and enables ResponsiveImg to work (the browser to load the correct image size)
- * (Not using the CSS aspect-ratio property yet here due to browser support)
- */
-export function ImageContainer(props: {
-  aspectRatio: number;
-}): HTMLDivElement;
 export function ExpandingDetails(props: {
   details_: HTMLDetailsElement;
   summary_: HTMLElement;