@depict-ai/ui 2.0.14 → 2.0.16

package/latest/index.js

@@ -1,11 +1,136 @@
-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, catchify as $9HbP8$catchify, observer as $9HbP8$observer, 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, is_safari as $9HbP8$is_safari, 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, queueMacroTask as $9HbP8$queueMacroTask, 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 { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, createComponent as $9HbP8$createComponent, effect as $9HbP8$effect, setAttribute as $9HbP8$setAttribute, mergeProps as $9HbP8$mergeProps, isServer as $9HbP8$isServer, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, className as $9HbP8$className, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, classList as $9HbP8$classList, getNextMarker as $9HbP8$getNextMarker, style as $9HbP8$style, Dynamic as $9HbP8$Dynamic, use as $9HbP8$use } from "solid-js/web";
-import { onCleanup as $9HbP8$onCleanup, createSignal as $9HbP8$createSignal, createMemo as $9HbP8$createMemo, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, Show as $9HbP8$Show, createRenderEffect as $9HbP8$createRenderEffect, createRoot as $9HbP8$createRoot, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createEffect as $9HbP8$createEffect, 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";
+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 { 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.14";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.16";
+const $011607bdf658f807$var$ListingContext = /*@__PURE__*/$9HbP8$createContext();
+function $011607bdf658f807$export$e68cff63f76bd15b(props) {
+  const our_object = {};
+  return $9HbP8$createComponent($011607bdf658f807$var$ListingContext.Provider, {
+    value: our_object,
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $011607bdf658f807$export$8d0c4fdbb05a2f2e() {
+  return $9HbP8$useContext($011607bdf658f807$var$ListingContext);
+}
+const $f18d425032111270$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div></div>`, 2);
+function $f18d425032111270$export$94026ee33dbabc26(props) {
+  return (() => {
+    const _el$ = $9HbP8$getNextElement($f18d425032111270$var$_tmpl$);
+    $9HbP8$effect(_$p => $9HbP8$style(_el$, `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`, _$p));
+    return _el$;
+  })();
+}
+const $e8ffe11ed01df0fe$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<img>`, 1);
+function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $9HbP8$createSignal(0);
+  const resizeObserver = new ResizeObserver($9HbP8$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, $9HbP8$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, $9HbP8$observer).onexists(whatToWatch, ({
+    element: element
+  }) => requestAnimationFrame($9HbP8$catchify(() => resizeObserver.observe(element))));
+  $9HbP8$onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
+  return size;
+}
+function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
+  // Enable reactive props
+  const otherOptions = $9HbP8$createMemo(() => {
+    const cloned_props = {
+      ...props
+    };
+    delete cloned_props.resolutions;
+    // @ts-ignore
+    delete cloned_props.size;
+    // @ts-ignore
+    delete cloned_props.src;
+    return cloned_props;
+  });
+  const src_options = $9HbP8$createMemo(() => {
+    const src = new URL(props.src, location.origin);
+    const fallback_src = $e8ffe11ed01df0fe$var$generateImageUrl(src, 400);
+    const srcset = $e8ffe11ed01df0fe$var$make_srcset(src, props.resolutions || [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096]);
+    return {
+      src: fallback_src,
+      srcset: srcset
+    };
+  });
+  return (() => {
+    const _el$ = $9HbP8$getNextElement($e8ffe11ed01df0fe$var$_tmpl$);
+    $9HbP8$spread(_el$, $9HbP8$mergeProps(otherOptions, src_options, {
+      get sizes() {
+        return props.size() + "px";
+      }
+    }), false, false);
+    $9HbP8$runHydrationEvents();
+    return _el$;
+  })();
+}
+function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions) {
+  return resolutions.map(width => `${$e8ffe11ed01df0fe$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+}
+function $e8ffe11ed01df0fe$var$generateImageUrl(url, width) {
+  url.searchParams.set("width", width);
+  return url.href;
+}
+const $660070e2a394b3c3$var$backupSizeSignal = /*@__PURE__*/$9HbP8$createSignal();
+const $660070e2a394b3c3$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
+function $660070e2a394b3c3$export$e4b984597b71e989(props) {
+  const context = $011607bdf658f807$export$8d0c4fdbb05a2f2e();
+  if (context && !context[$660070e2a394b3c3$export$d7b7ab832c20e2f4])
+    // create a signal that's the same for all items in this listing
+    context[$660070e2a394b3c3$export$d7b7ab832c20e2f4] = $9HbP8$createSignal();
+  const [currentImageSize, setCurrentImageSize] = context?.[$660070e2a394b3c3$export$d7b7ab832c20e2f4] || $660070e2a394b3c3$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
+  const container = $9HbP8$createComponent((0, $f18d425032111270$export$94026ee33dbabc26), {
+    get aspectRatio() {
+      return props.aspectRatio;
+    }
+  });
+  const owner = $9HbP8$getOwner();
+  let createdSizeAccessor = false;
+  let wasCleanedUp = false;
+  $9HbP8$createEffect(() => {
+    if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
+    // ensure we always have a size accessor
+    // 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(() => $9HbP8$runWithOwner(owner, () => $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(container)));
+  });
+  $9HbP8$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;
+    $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
+  });
+
+  container.append($9HbP8$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), {
+    style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
+    get size() {
+      return $9HbP8$createMemo(() => currentImageSize()?.() || 0);
+    },
+    get src() {
+      return props.src;
+    }
+  }));
+  return container;
+}
 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"></path></svg>`, 4);
 function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
@@ -603,15 +728,19 @@ function $ee116da074deb002$export$9574e176201e5e8d(props) {
     const [recommendations_resource_] = $9HbP8$createResource(() => props.recommendations, recs => recs);
     return (() => {
       const _el$ = $9HbP8$getNextElement($ee116da074deb002$var$_tmpl$);
-      $9HbP8$insert(_el$, () => $c4492d24952ed731$export$d41d19e89346fa2({
-        product_card_template_: (...args) => props.product_card_template(...args),
-        recommendations_resource_: recommendations_resource_,
-        market_: () => props.market,
-        merchant_: () => props.merchant,
-        layout_options_: $9HbP8$createMemo(() => ({
-          cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77(props.cols_at_size),
-          ...grid_spacing_override()
-        }))
+      $9HbP8$insert(_el$, $9HbP8$createComponent((0, $011607bdf658f807$export$e68cff63f76bd15b), {
+        get children() {
+          return $c4492d24952ed731$export$d41d19e89346fa2({
+            product_card_template_: (...args) => props.product_card_template(...args),
+            recommendations_resource_: recommendations_resource_,
+            market_: () => props.market,
+            merchant_: () => props.merchant,
+            layout_options_: $9HbP8$createMemo(() => ({
+              cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77(props.cols_at_size),
+              ...grid_spacing_override()
+            }))
+          });
+        }
       }));
       return _el$;
     })();
@@ -716,83 +845,25 @@ function $9ea5383493360761$export$9756467d34d91cdb(props) {
     const [recommendations_resource_] = $9HbP8$createResource(() => props.recommendations, recs => recs);
     return (() => {
       const _el$2 = $9HbP8$getNextElement($9ea5383493360761$var$_tmpl$2);
-      $9HbP8$insert(_el$2, () => $3da8afe3ed57cf34$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_: $9HbP8$createMemo(() => ({
-          cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77(props.cols_at_size),
-          ...grid_spacing_override()
-        }))
+      $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $011607bdf658f807$export$e68cff63f76bd15b), {
+        get children() {
+          return $3da8afe3ed57cf34$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_: $9HbP8$createMemo(() => ({
+              cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77(props.cols_at_size),
+              ...grid_spacing_override()
+            }))
+          });
+        }
       }));
       return _el$2;
     })();
   }, "RecommendationGrid failed");
 }
-const $e8ffe11ed01df0fe$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<img>`, 1);
-function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
-  const [size, setSize] = $9HbP8$createSignal(0);
-  const resizeObserver = new ResizeObserver($9HbP8$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, $9HbP8$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, $9HbP8$observer).onexists(whatToWatch, ({
-    element: element
-  }) => requestAnimationFrame($9HbP8$catchify(() => resizeObserver.observe(element))));
-  $9HbP8$onCleanup(() => {
-    resizeObserver.disconnect();
-    disconnect();
-  });
-  return size;
-}
-function $e8ffe11ed01df0fe$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 = $e8ffe11ed01df0fe$var$generateImageUrl(src, 400);
-  const srcset = $e8ffe11ed01df0fe$var$make_srcset(src, resolutions);
-  return (() => {
-    const _el$ = $9HbP8$getNextElement($e8ffe11ed01df0fe$var$_tmpl$);
-    $9HbP8$spread(_el$, $9HbP8$mergeProps(otherOptions, {
-      "src": fallbackSrc,
-      "srcset": srcset,
-      get sizes() {
-        return size() + "px";
-      }
-    }), false, false);
-    $9HbP8$runHydrationEvents();
-    return _el$;
-  })();
-}
-function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => `${$e8ffe11ed01df0fe$var$generateImageUrl(url, width)} ${width}w`).join(", ");
-}
-function $e8ffe11ed01df0fe$var$generateImageUrl(url, width) {
-  url.searchParams.set("width", width);
-  return url.href;
-}
-const $f18d425032111270$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div></div>`, 2);
-function $f18d425032111270$export$94026ee33dbabc26(props) {
-  return (() => {
-    const _el$ = $9HbP8$getNextElement($f18d425032111270$var$_tmpl$);
-    $9HbP8$effect(_$p => $9HbP8$style(_el$, `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`, _$p));
-    return _el$;
-  })();
-}
 function $24e27fab9c821b86$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -6484,26 +6555,30 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
       severity_: "error",
       message_: "Showing results failed",
       get children() {
-        return $2d25e42846eac370$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 $9HbP8$createComponent((0, $011607bdf658f807$export$e68cff63f76bd15b), {
+          get children() {
+            return $2d25e42846eac370$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_
+              }
+            });
           }
         });
       }
@@ -7505,8 +7580,10 @@ function $172e1b898d457050$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_ ? $172e1b898d457050$var$make_state_saved_rows(showing_recommendation_rows_, i18n_) : "all";
-  const [recommendations_resource] = $9HbP8$createResource(search_query_base_, query => depict_api_.get_recommended(query).then(r => r.displays));
-  const is_showing_something = $9HbP8$createMemo(() => recommendations_resource.loading || recommendations_resource()?.length);
+  const [recommendations_resource] = $9HbP8$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 = $9HbP8$createMemo(() => !!((recommendations_resource.loading || recommendations_resource()?.length) && all_products_loaded_()));
   const num_placeholders_ = $9HbP8$createMemo(() => (0, $7747fe1a8c5652e3$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 = (() => {
@@ -7536,7 +7613,10 @@ function $172e1b898d457050$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_ = $29ec7cddbe1d3484$export$7f8bd308237ab5a5($9HbP8$createMemo(() => recommendations_resource() || []));
+              const displays_by_key_ = $29ec7cddbe1d3484$export$7f8bd308237ab5a5($9HbP8$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 $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
                 displays_by_key_: displays_by_key_,
                 merchant_: $9HbP8$createMemo(() => search_query_base_().tenant),
@@ -7552,7 +7632,7 @@ function $172e1b898d457050$export$7de92c4c2205ebf3({
   })();
   return $9HbP8$createComponent((0, $9HbP8$Show), {
     get when() {
-      return $9HbP8$memo(() => !!is_showing_something())() && all_products_loaded_();
+      return should_show();
     },
     children: elements
   });
@@ -9010,17 +9090,21 @@ function $fabfda1230351b1a$export$1c593cbd6f1e10bc({
       severity_: "error",
       message_: "Instant results failed",
       get children() {
-        return $eea41f703612261b$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 $9HbP8$createComponent((0, $011607bdf658f807$export$e68cff63f76bd15b), {
+          get children() {
+            return $eea41f703612261b$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);
@@ -9921,14 +10005,18 @@ function $7097477c78a89208$export$a54ec244c8863715({
             return content_search_enabled_();
           },
           get children() {
-            return $9HbP8$createComponent((0, $49de9d31aeea1b5e$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 $9HbP8$createComponent((0, $011607bdf658f807$export$e68cff63f76bd15b), {
+              get children() {
+                return $9HbP8$createComponent((0, $49de9d31aeea1b5e$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_
+                });
+              }
             });
           }
         });
@@ -9962,28 +10050,32 @@ function $7097477c78a89208$export$a54ec244c8863715({
       severity_: "error",
       message_: "Search results failed",
       get children() {
-        return $2d25e42846eac370$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 $9HbP8$createComponent((0, $011607bdf658f807$export$e68cff63f76bd15b), {
+          get children() {
+            return $2d25e42846eac370$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_
+                }
+              }
+            });
           }
         });
       }
@@ -9996,17 +10088,21 @@ function $7097477c78a89208$export$a54ec244c8863715({
           severity_: "error",
           message_: "Search recommendations failed",
           get children() {
-            return $9HbP8$createComponent((0, $172e1b898d457050$export$7de92c4c2205ebf3), {
-              depict_api_: depict_api_,
-              i18n_: i18n_,
-              search_query_base_: search_query_base_,
-              get layout_options_() {
-                return $9HbP8$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 $9HbP8$createComponent((0, $011607bdf658f807$export$e68cff63f76bd15b), {
+              get children() {
+                return $9HbP8$createComponent((0, $172e1b898d457050$export$7de92c4c2205ebf3), {
+                  depict_api_: depict_api_,
+                  i18n_: i18n_,
+                  search_query_base_: search_query_base_,
+                  get layout_options_() {
+                    return $9HbP8$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
+                });
+              }
             });
           }
         });
@@ -10783,4 +10879,4 @@ const $4690a06c8489dcd0$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
 const $4690a06c8489dcd0$export$864d304a0bc46829 = "2%";
 const $4690a06c8489dcd0$export$7bf543b9d9be2c22 = (0, $e4615ecd1849548f$export$b91cec6bdc6b32a1);
 $9HbP8$add_to_version_info("ui", (0, $ec291e0010116877$export$83d89fbfd8236492));
-export { $f32e14878e75af51$export$6649caad96ef8870 as SlidableItems, $0fdb37d8ddabef25$export$9f191182275e9ef as make_accurate_size_accessor, $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $e8ffe11ed01df0fe$export$e6fffe67d4cdd848 as makeSizeAccessor, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $c9312089e8983364$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version };
+export { $660070e2a394b3c3$export$d7b7ab832c20e2f4 as shopifyContainedImageContextSymbol, $011607bdf658f807$export$e68cff63f76bd15b as ListingProvider, $011607bdf658f807$export$8d0c4fdbb05a2f2e as useListing, $660070e2a394b3c3$export$e4b984597b71e989 as ShopifyContainedImage, $f32e14878e75af51$export$6649caad96ef8870 as SlidableItems, $0fdb37d8ddabef25$export$9f191182275e9ef as make_accurate_size_accessor, $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $e8ffe11ed01df0fe$export$e6fffe67d4cdd848 as makeSizeAccessor, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $c9312089e8983364$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version };

package/package.json

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