@depict-ai/ui 4.3.1 → 4.3.3

package/latest/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.1";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.3";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1061,7 +1061,7 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   });
   // Work around https://github.com/solidjs/solid/issues/1828
   const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
-  const [, otherAttributes] = $gVhhF$solidjs.splitProps(props, ["resolutions", "size", "src", "srcSet", "loading", "customUrls" // Can't have properties ending on underscore because the property name mangling will get confused by this <-
+  const [, otherAttributes] = $gVhhF$solidjs.splitProps(props, ["resolutions", "size", "src", "srcSet", "loading", "keyRatioUpdating", "customUrls" // Can't have properties ending on underscore because the property name mangling will get confused by this <-
   ]);
 
   const [hasSetSize, setHasSetSize] = $gVhhF$solidjs.createSignal(false);
@@ -1117,13 +1117,18 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   let hasDecodedFastPath = false;
   let timeoutSet = false;
   let gotCleanedUp = false;
+  let srcJustChanged = true;
   img.classList.add("s-responsive-image");
   if (listingContext) {
     let prevValue;
     const aspectRatios = listingContext[$19950faaac026e09$export$f8945274f08a3105] ||= new Set();
     const [, setMostPrevalentAspectRatio] = listingContext[$19950faaac026e09$export$6066eb417ed2e9f7] ||= $gVhhF$solidjs.createSignal();
     img.addEventListener("load", $gVhhF$depictaiutilishared.catchify(() => {
-      // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2
+      if (props.keyRatioUpdating) {
+        if (!srcJustChanged) return;
+        srcJustChanged = false;
+      }
+      // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2 and LookItem
       const aspectRatio_ = img.naturalWidth / img.naturalHeight;
       if (prevValue) aspectRatios.delete(prevValue);
       const newValue = !isNaN(aspectRatio_) ? {
@@ -1142,6 +1147,10 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   }
   $gVhhF$solidjs.onCleanup(() => gotCleanedUp = true);
   $gVhhF$solidjsweb.spread(img, $gVhhF$solidjs.mergeProps(modifiedOtherAttributes), false, true);
+  $gVhhF$solidjs.createRenderEffect(() => {
+    props.src;
+    srcJustChanged = true;
+  });
   $gVhhF$solidjs.createEffect(() => {
     if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
@@ -1211,48 +1220,22 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
   const [mostPrevalentAspectRatio] = context ?
   // If the context exists we have to create the signal here as getting it here would be too late when it's created by ShopifyResponsiveImg below
   context[(0, $19950faaac026e09$export$6066eb417ed2e9f7)] ||= $gVhhF$solidjs.createSignal() : [];
-  const [aspectRatio, setAspectRatio] = $gVhhF$solidjs.createSignal($gVhhF$solidjs.untrack(() => props.aspectRatio));
   const container = $93304d59a9747aa6$export$94026ee33dbabc26({
     // Write getters manually instead of using JSX, so we can do more complex logic in the aspectRatio getter without increasing bundle size
     get class() {
       return props.class;
     },
     get aspectRatio() {
-      return aspectRatio();
+      if (props.autoAdjustAspectRatio) {
+        const targetRatio = mostPrevalentAspectRatio?.();
+        if (targetRatio != undefined) return `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, ${targetRatio})`;
+      }
+      return props.aspectRatio;
     }
   });
   const owner = $gVhhF$solidjs.getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
-  let timeout;
-  $gVhhF$solidjs.createEffect(() => {
-    const {
-      autoAdjustAspectRatio: autoAdjustAspectRatio
-    } = props;
-    if (autoAdjustAspectRatio) {
-      const targetRatio = mostPrevalentAspectRatio?.();
-      if (targetRatio != undefined) {
-        const targetValue = `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, ${targetRatio})`;
-        const updateAspectRatio = $gVhhF$depictaiutilishared.catchify(() => setAspectRatio(targetValue));
-        if (autoAdjustAspectRatio === "smoothed") {
-          if (!timeout)
-            // If we don't have a timeout yet, also update instantly. This is so that the aspect ratio does get set at the start of a transition, if it changes (when using smoothing).
-            updateAspectRatio();
-          clearTimeout(timeout);
-          timeout = setTimeout(() => {
-            timeout = undefined;
-            updateAspectRatio();
-          }, 500);
-          return;
-        }
-        return updateAspectRatio();
-      }
-    } else {
-      clearTimeout(timeout);
-      timeout = undefined;
-    }
-    setAspectRatio(props.aspectRatio);
-  });
   $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
@@ -1298,6 +1281,12 @@ function $d212a67662c5cf38$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
+function $d659702496cb72ea$export$a71e92cfbb498adc(props) {
+  return $gVhhF$solidjs.createMemo(() => {
+    const price_formatting = props.price_formatting_;
+    return $gVhhF$depictaiutilishared.standard_price_format(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
+  });
+}
 var $1ae437d7d388a66e$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=img-wrapper>`),
   $1ae437d7d388a66e$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class="d-price original">`),
   $1ae437d7d388a66e$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=right-part><div class=text-container><span class="d-title line-clamp"></span><span class=d-price></span><!$><!/></div><!$><!/>`),
@@ -1305,10 +1294,12 @@ var $1ae437d7d388a66e$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div
 function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
   display_: display_,
   FavoriteButton_: FavoriteButton_,
-  isExpanded_: isExpanded_,
+  userWantsExpandedSignal_: [userWantsExpanded, setUserWantsExpanded],
   textFadeInAnimationRunning_: textFadeInAnimationRunning_,
   outerRef_: outerRef_,
-  animationDuration_: animationDuration_
+  animationDuration_: animationDuration_,
+  priceFormatting_: priceFormatting_,
+  pseudoRouter_: pseudoRouter_
 }) {
   const variantToUse = $gVhhF$solidjs.createMemo(() => {
     const display = display_();
@@ -1316,11 +1307,13 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
   });
   const imageUrl = $gVhhF$solidjs.createMemo(() => variantToUse()?.image_urls?.[0]);
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
-  const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $gVhhF$solidjs.createSignal($gVhhF$solidjs.untrack(isExpanded_));
+  const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $gVhhF$solidjs.createSignal($gVhhF$solidjs.untrack(userWantsExpanded));
   const [animationEffectExists, setAnimationEffectExists] = $gVhhF$solidjs.createSignal(false);
   const [salePrice] = $gVhhF$solidjs.createResource(() => variantToUse()?.sale_price);
   const [originalPrice] = $gVhhF$solidjs.createResource(() => variantToUse()?.original_price);
-  const isOnSale = $gVhhF$solidjs.createMemo(() => salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense
+  const isOnSale = $gVhhF$solidjs.createMemo(() => !salePrice.loading && !originalPrice.loading && salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense after the initial load
+  const enableLink = $gVhhF$solidjs.createMemo(() => userWantsExpanded() && !animationIsRunning());
+  const href = $gVhhF$solidjs.createMemo(() => variantToUse()?.page_url);
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
   return (() => {
     var _el$ = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$4),
@@ -1330,9 +1323,24 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
       [_el$15, _co$4] = $gVhhF$solidjsweb.getNextMarker(_el$14.nextSibling);
     var _ref$ = outerRef_;
     typeof _ref$ === "function" ? $gVhhF$solidjsweb.use(_ref$, _el$) : outerRef_ = _el$;
-    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => isExpanded_() && !animationIsRunning() ? {
-      href: variantToUse()?.page_url
-    } : {}), false, true);
+    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => enableLink() ? {
+      href: href()
+    } : {}, {
+      get onClick() {
+        return $gVhhF$depictaiutilishared.catchify(event_ => {
+          if (enableLink()) {
+            pseudoRouter_.navigate_.go_to_({
+              new_url_: href(),
+              is_replace_: false,
+              event_: event_
+            });
+            if (event_.defaultPrevented)
+              // We single-page-navigated in this tab, close the look
+              setUserWantsExpanded(false);
+          }
+        });
+      }
+    }), false, true);
     $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
       when: imageUrl,
       get fallback() {
@@ -1357,10 +1365,13 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
                 return imageUrl();
               },
               get aspectRatio() {
-                return isExpanded_() ? 0.75 : 1;
+                return userWantsExpanded() ? 0.75 : 1;
               },
               get autoAdjustAspectRatio() {
-                return isExpanded_() ? "smoothed" : false;
+                return userWantsExpanded();
+              },
+              imgProps: {
+                keyRatioUpdating: true
               }
             });
           }
@@ -1370,7 +1381,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
     }), _el$13, _co$3);
     $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
       get when() {
-        return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
+        return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : userWantsExpanded()) || animationIsRunning();
       },
       get children() {
         var _el$3 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$3),
@@ -1397,7 +1408,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
             setAnimationIsRunning(true);
             $gVhhF$solidjs.runWithOwner(owner, () => {
               $gVhhF$solidjs.createRenderEffect(() => {
-                const expanded = isExpanded_();
+                const expanded = userWantsExpanded();
                 // Still glitches in chrome (probably not fixable) and sometimes the timing is off in Safari but fuck it, I couldn't massage the WAAPI to improve it in any way (without reading computed style) to make the reversing of animations glitch less
                 textContainerAnimation.pause();
                 textContainerAnimation.updatePlaybackRate(expanded ? 1 : -1);
@@ -1417,26 +1428,68 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
           height: "1em",
           width: "20ch"
         }));
-        $gVhhF$solidjsweb.insert(_el$6, (() => {
-          var _c$ = $gVhhF$solidjsweb.memo(() => !!(!variantToUse() || salePrice.loading));
-          return () => _c$() ? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
-            height: "1em",
-            width: "20ch"
-          }) : salePrice();
-        })());
+        $gVhhF$solidjsweb.insert(_el$6, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+          get when() {
+            return variantToUse() && !salePrice.loading;
+          },
+          get fallback() {
+            return $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+              height: "1em",
+              width: "20ch"
+            });
+          },
+          get children() {
+            return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+              get when() {
+                return salePrice.latest;
+              },
+              get children() {
+                return [$gVhhF$solidjsweb.memo(() => priceFormatting_().pre_), $gVhhF$solidjsweb.createComponent((0, $d659702496cb72ea$export$a71e92cfbb498adc), {
+                  get price_() {
+                    return salePrice();
+                  },
+                  get price_formatting_() {
+                    return priceFormatting_();
+                  }
+                }), $gVhhF$solidjsweb.memo(() => priceFormatting_().post_)];
+              }
+            });
+          }
+        }));
         $gVhhF$solidjsweb.insert(_el$4, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
           get when() {
             return isOnSale();
           },
           get children() {
             var _el$7 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$2);
-            $gVhhF$solidjsweb.insert(_el$7, (() => {
-              var _c$2 = $gVhhF$solidjsweb.memo(() => !!(!variantToUse() || originalPrice.loading));
-              return () => _c$2() ? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
-                height: "1em",
-                width: "20ch"
-              }) : originalPrice();
-            })());
+            $gVhhF$solidjsweb.insert(_el$7, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+              get when() {
+                return variantToUse() && !originalPrice.loading;
+              },
+              get fallback() {
+                return $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+                  height: "1em",
+                  width: "20ch"
+                });
+              },
+              get children() {
+                return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+                  get when() {
+                    return salePrice.latest;
+                  },
+                  get children() {
+                    return [$gVhhF$solidjsweb.memo(() => priceFormatting_().pre_), $gVhhF$solidjsweb.createComponent((0, $d659702496cb72ea$export$a71e92cfbb498adc), {
+                      get price_() {
+                        return originalPrice();
+                      },
+                      get price_formatting_() {
+                        return priceFormatting_();
+                      }
+                    }), $gVhhF$solidjsweb.memo(() => priceFormatting_().post_)];
+                  }
+                });
+              }
+            }));
             return _el$7;
           }
         }), _el$9, _co$);
@@ -1510,10 +1563,12 @@ var $905010a06f9aeae5$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div
 function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
   displays_: displays_,
   FavoriteButton_: FavoriteButton_,
-  userWantsExpandedSignal_: [userWantsExpanded, setUserWantsExpanded],
+  userWantsExpandedSignal_: userWantsExpandedSignal_,
   containerWidth_: containerWidth_,
   animationDuration_: animationDuration_,
-  supportsHover_: supportsHover_
+  supportsHover_: supportsHover_,
+  priceFormatting_: priceFormatting_,
+  pseudoRouter_: pseudoRouter_
 }) {
   let isAffectedByChromeBug = false;
   // If the user requests the drawer to be expanded or not
@@ -1522,6 +1577,7 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
   // The following three signals just contain the state if the animations are actually running and should only be set by the respective animation code
   const textFadeInAnimationRunning = $gVhhF$solidjs.createSignal(false);
   const [getSecondPartAnimationRunning] = textFadeInAnimationRunning;
+  const [userWantsExpanded, setUserWantsExpanded] = userWantsExpandedSignal_;
   $b9e830d616d01b31$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
   return $gVhhF$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
     get children() {
@@ -1567,11 +1623,13 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
             },
             children: (display, index) => {
               return $gVhhF$solidjsweb.createComponent((0, $1ae437d7d388a66e$export$b73ed90f0ee50dc3), {
+                pseudoRouter_: pseudoRouter_,
                 animationDuration_: animationDuration_,
                 display_: display,
                 FavoriteButton_: FavoriteButton_,
-                isExpanded_: userWantsExpanded,
+                userWantsExpandedSignal_: userWantsExpandedSignal_,
                 textFadeInAnimationRunning_: textFadeInAnimationRunning,
+                priceFormatting_: priceFormatting_,
                 outerRef_: el => $gVhhF$solidjs.createEffect(() => {
                   if (index !== 0) return;
                   const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
@@ -1614,10 +1672,10 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
   expandedLooksSignal_: [expandedLooks_, setExpandedLooks],
   FavoriteButton_: FavoriteButton_,
   placeholderImageAspectRatio_: placeholderImageAspectRatio_,
-  animationDuration_: animationDuration_
+  animationDuration_: animationDuration_,
+  priceFormatting_: priceFormatting_,
+  pseudoRouter_: pseudoRouter_
 }) {
-  // TODO: shopify, run displayTransformers to get dynamic prices
-  // TODO: format prices
   const [coverImage] = display_?.image_urls || [];
   const useWantsExpandedSignal_ = $gVhhF$solidjs.createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
@@ -1661,7 +1719,7 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
     when: display_,
     get fallback() {
       return $gVhhF$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
-        aspectRatio: placeholderImageAspectRatio_
+        aspectRatio: `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, ${placeholderImageAspectRatio_})`
       });
     },
     get children() {
@@ -1679,11 +1737,125 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
     containerWidth_: containerWidth_,
     animationDuration_: animationDuration_,
     supportsHover_: supportsHover_,
-    FavoriteButton_: FavoriteButton_
+    FavoriteButton_: FavoriteButton_,
+    priceFormatting_: priceFormatting_,
+    pseudoRouter_: pseudoRouter_
   })]);
   return container;
 }
 $gVhhF$solidjsweb.delegateEvents(["click"]);
+
+/**
+ * This function is used to determine if the user is trying to open a link in a new tab or window, and we therefore should not single page navigate
+ * @param clickEvent The click event that triggered the navigation
+ */
+function $747421cd28dec5b5$export$29d28dadc2d6b631(clickEvent) {
+  return clickEvent?.button ||
+  // if not zero it's a wheel click which opens in new tab
+  clickEvent?.metaKey ||
+  // if true, cmd button on macOS which opens in new tab
+  clickEvent?.ctrlKey ||
+  // if true, ctrl button on windows or linux which opens in new tab
+  clickEvent?.shiftKey // if true, shift button on windows, linux or macOS which opens in a new window
+  ;
+}
+
+class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
+  /**
+  * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
+  */ /**
+     * We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
+     */
+  #throwing_on_navigation(...args) {
+    const {
+      on_navigation_: on_navigation_
+    } = this;
+    if (typeof on_navigation_ !== "function") throw new Error("on_navigation_ is not a function");
+    // make sure that we don't accidentally catchify if the SDK consumer has fucked up
+    try {
+      return on_navigation_(...args);
+    } catch (e) {
+      queueMicrotask(() => {
+        throw e;
+      });
+    }
+  }
+  /**
+  * Vue has async router that needs to be awaited (it navigates after a microtask)
+  * This standardises waiting for all kinds of routers
+  */
+  #get_navigation_happened_promise(is_replace) {
+    return new Promise(resolve => {
+      const handler = what_happened => {
+        if (what_happened === (is_replace ? "replaceState" : "pushState")) {
+          resolve();
+          (0, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).delete(handler);
+        }
+      };
+      (0, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).add(handler);
+    });
+  }
+  navigate_ = {
+    /**
+    * Call this if you *just* want to replace the state object in history.state
+    */
+    replace_state_: new_state => {
+      // This doesn't break any router, so we just do this directly for now, since many don't expose an interface for changing the state
+      globalThis?.history?.replaceState(new_state, "");
+    },
+    /**
+    * Call this to change the URL
+    * @param new_url_ new URL to go to
+    * @param event_ event if you have this in a click handler, will not do anything on cmd/ctrl or non-left click then
+    * @param force_spa_navigation_ if you want to force SPA navigation even if on_navigation_ is set to "hard_navigation". You should only set this to true for inter-SDK-page navigations
+    * @param is_replace_ if you want to replace the current URL in history instead of pushing a new one
+    * @param listing_id_ If you are navigating to a category and know the listing_id of, please provide it. This is for making a better devEx in js-ui
+    */
+    go_to_: $gVhhF$depictaiutilishared.catchify(async ({
+      new_url_: raw_new_url,
+      event_: event_,
+      force_spa_navigation_: force_spa_navigation_,
+      is_replace_: is_replace_,
+      listing_query_: listing_query_,
+      scroll = true
+    }) => {
+      const new_url_ = raw_new_url instanceof URL ? raw_new_url : new URL(raw_new_url, location.origin);
+      const wants_hard_navigation = this.on_navigation_ === "hard_navigation";
+      if ($747421cd28dec5b5$export$29d28dadc2d6b631(event_)) return;
+      const different_origin = new_url_.origin !== location.origin;
+      if (wants_hard_navigation && (!force_spa_navigation_ || different_origin)) {
+        if (force_spa_navigation_ && different_origin)
+          // If we call history.pushState on a different origin, it will throw an error, so fallback to hard navigations
+          $gVhhF$depictaiutilishared.dwarn("Can't single page navigate to", new_url_.href, "due to different origin, this MIGHT mean you should fix the URLs");
+        if (!event_)
+          // If we haven't gotten an event, nothing will happen by not calling prevent default, so we need to change the URL
+          location.assign(new_url_);
+        return;
+      }
+      event_?.preventDefault();
+      const promise = this.#get_navigation_happened_promise(true);
+      if (force_spa_navigation_ && wants_hard_navigation) {
+        // Don't allow hard navigation if we're forcing SPA navigation, which we do for things where PageReplacer can be used for performance
+        const new_state = history.state;
+        if (listing_query_) {
+          // In JS-UI we need to know the listing_id of the current category, therefore push it into state
+          if (!this.listing_query_state_key) $gVhhF$depictaiutilishared.report(new Error("listing_query_state_key is not set"), "error");
+          new_state[this.listing_query_state_key] = listing_query_;
+        }
+        history[is_replace_ ? "replaceState" : "pushState"](new_state, "", new_url_);
+      } else this.#throwing_on_navigation.call(this, {
+        is_replace: is_replace_,
+        new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin),
+        scroll: scroll
+      });
+      await promise;
+    })
+  };
+  constructor(on_navigation, listing_query_state_key) {
+    this.listing_query_state_key = listing_query_state_key;
+    this.on_navigation_ = on_navigation;
+  }
+}
 var $072863633018e322$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict recommendations looks"style=--animation-duration:240ms>`);
 let $072863633018e322$var$expandedLooksSignal_;
 function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
@@ -1692,6 +1864,7 @@ function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
       equals: false
     });
     const expandingAnimationDuration = 240;
+    const pseudoRouter = new (0, $e96dd13889871fc0$export$7e1297a3a19f10d8)("hard_navigation");
     const grid_spacing_override = $gVhhF$solidjs.createMemo(() => {
       const {
         gridSpacing_: gridSpacing_
@@ -1717,21 +1890,37 @@ function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
       });
       const decoded = await response?.json?.().catch(() => false);
       if (!decoded)
-        // If network fails, make sure to return empty array adn SolidRecommendationSlider will remove its elements
+        // If network fails, make sure to return empty array and SolidRecommendationSlider will remove its elements
         return [];
-      return decoded.listings;
+      const {
+        listings: listings
+      } = decoded;
+      const baseData = {
+        merchant: merchant,
+        market: market,
+        locale: locale
+      };
+      return $072863633018e322$var$runDisplayTransformersForLooks(baseData, listings, props.displayTransformers_);
+    });
+    $gVhhF$solidjs.createEffect(() => {
+      const {
+        onNavigation_: onNavigation_
+      } = props;
+      if (onNavigation_) pseudoRouter.on_navigation_ = onNavigation_;
     });
     return (() => {
       var _el$ = $gVhhF$solidjsweb.getNextElement($072863633018e322$var$_tmpl$);
       $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
         get children() {
           return $363ce4d1d71041aa$export$d41d19e89346fa2({
-            product_card_template_: (display, info) => $ad882bbe664dbd53$export$44809a8a3e867e30({
+            product_card_template_: display => $ad882bbe664dbd53$export$44809a8a3e867e30({
               display_: display,
               FavoriteButton_: props.FavoriteButton_,
               placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
               animationDuration_: expandingAnimationDuration,
-              expandedLooksSignal_: $072863633018e322$var$expandedLooksSignal_
+              expandedLooksSignal_: $072863633018e322$var$expandedLooksSignal_,
+              priceFormatting_: () => props.priceFormatting_,
+              pseudoRouter_: pseudoRouter
             }),
             recommendations_resource_: looksResource,
             title_: () => props.title_,
@@ -1746,6 +1935,53 @@ function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
     })();
   }, "LookSlider failed");
 }
+async function $072863633018e322$var$runDisplayTransformersForLooks(baseData, listings, displayTransformers) {
+  try {
+    const {
+      products: productTransformer,
+      categories: providedListingTransformer
+    } = displayTransformers || {};
+    if (!productTransformer && !providedListingTransformer) return listings;
+    const listingTransformer = providedListingTransformer || (({
+      data: data
+    }) => data);
+    const displaysToTransform = [];
+    const displayIdsPerListingId = {};
+    const transformedListingsPromise = listingTransformer({
+      ...baseData,
+      data: listings.map(({
+        displays: displays,
+        ...listing
+      }) => {
+        // Populate our displays by id and displayIdToListings object in the .map where we add ancestors to the listings, for peak efficiency
+        for (let i = 0; i < displays.length; i++) {
+          const display = displays[i];
+          const uniqueIdOfDisplay = $a5871dacf261adf8$export$548d053aba053d79(display);
+          displaysToTransform.push(display);
+          (displayIdsPerListingId[listing.listing_id] ||= []).push(uniqueIdOfDisplay);
+        }
+        return {
+          ...listing,
+          ancestors: []
+        };
+      })
+    });
+    // This allows the person providing the displayTransformer to re-order and remove displays
+    const transformedProducts = productTransformer ? await productTransformer({
+      ...baseData,
+      displays: displaysToTransform
+    }) : displaysToTransform;
+    const transformedListings = await transformedListingsPromise;
+    const transformedDisplayById = Object.fromEntries(transformedProducts.map(display => [$a5871dacf261adf8$export$548d053aba053d79(display), display]));
+    return transformedListings.map(listing => $gVhhF$solidjs.mergeProps(listing, {
+      // use mergeProps because in preview browser we add getters in this object, that would be called too early otherwise
+      displays: (displayIdsPerListingId[listing.listing_id] || []).map(displayId => transformedDisplayById[displayId]).filter(v => v)
+    }));
+  } catch (e) {
+    $gVhhF$depictaiutilishared.dwarn("Displaytransformers threw", e);
+    return [];
+  }
+}
 const $d84fe647b84b5dc5$export$3064e1e8c6513da3 = new Set();
 let $d84fe647b84b5dc5$var$has_ran = false;
 function $d84fe647b84b5dc5$export$5162a71f252e6122() {
@@ -1786,21 +2022,6 @@ function $d84fe647b84b5dc5$var$starts_with_any_prefix(key) {
   }
 }
 
-/**
- * This function is used to determine if the user is trying to open a link in a new tab or window, and we therefore should not single page navigate
- * @param clickEvent The click event that triggered the navigation
- */
-function $747421cd28dec5b5$export$29d28dadc2d6b631(clickEvent) {
-  return clickEvent?.button ||
-  // if not zero it's a wheel click which opens in new tab
-  clickEvent?.metaKey ||
-  // if true, cmd button on macOS which opens in new tab
-  clickEvent?.ctrlKey ||
-  // if true, ctrl button on windows or linux which opens in new tab
-  clickEvent?.shiftKey // if true, shift button on windows, linux or macOS which opens in a new window
-  ;
-}
-
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
  */
@@ -1840,12 +2061,6 @@ function $deaaf04362a1bc71$export$f50b88e2a00918b5(fn) {
     }
   };
 }
-function $d659702496cb72ea$export$a71e92cfbb498adc(props) {
-  return $gVhhF$solidjs.createMemo(() => {
-    const price_formatting = props.price_formatting_;
-    return $gVhhF$depictaiutilishared.standard_price_format(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
-  });
-}
 function $f144ea315d9e4caa$export$fb40a80c530e5f2b(selectedIndex, groupIndex, indexInGroup) {
   const isSelected = $gVhhF$solidjs.createMemo(() => {
     const selectedValue = selectedIndex();
@@ -5043,102 +5258,6 @@ function $6e22b5314fb52f4c$var$history_state_change(signals, entries, state) {
     }
   });
 }
-class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
-  /**
-  * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
-  */ /**
-     * We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
-     */
-  #throwing_on_navigation(...args) {
-    const {
-      on_navigation_: on_navigation_
-    } = this;
-    if (typeof on_navigation_ !== "function") throw new Error("on_navigation_ is not a function");
-    // make sure that we don't accidentally catchify if the SDK consumer has fucked up
-    try {
-      return on_navigation_(...args);
-    } catch (e) {
-      queueMicrotask(() => {
-        throw e;
-      });
-    }
-  }
-  /**
-  * Vue has async router that needs to be awaited (it navigates after a microtask)
-  * This standardises waiting for all kinds of routers
-  */
-  #get_navigation_happened_promise(is_replace) {
-    return new Promise(resolve => {
-      const handler = what_happened => {
-        if (what_happened === (is_replace ? "replaceState" : "pushState")) {
-          resolve();
-          (0, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).delete(handler);
-        }
-      };
-      (0, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).add(handler);
-    });
-  }
-  navigate_ = {
-    /**
-    * Call this if you *just* want to replace the state object in history.state
-    */
-    replace_state_: new_state => {
-      // This doesn't break any router, so we just do this directly for now, since many don't expose an interface for changing the state
-      globalThis?.history?.replaceState(new_state, "");
-    },
-    /**
-    * Call this to change the URL
-    * @param new_url_ new URL to go to
-    * @param event_ event if you have this in a click handler, will not do anything on cmd/ctrl or non-left click then
-    * @param force_spa_navigation_ if you want to force SPA navigation even if on_navigation_ is set to "hard_navigation". You should only set this to true for inter-SDK-page navigations
-    * @param is_replace_ if you want to replace the current URL in history instead of pushing a new one
-    * @param listing_id_ If you are navigating to a category and know the listing_id of, please provide it. This is for making a better devEx in js-ui
-    */
-    go_to_: $gVhhF$depictaiutilishared.catchify(async ({
-      new_url_: raw_new_url,
-      event_: event_,
-      force_spa_navigation_: force_spa_navigation_,
-      is_replace_: is_replace_,
-      listing_query_: listing_query_,
-      scroll = true
-    }) => {
-      const new_url_ = raw_new_url instanceof URL ? raw_new_url : new URL(raw_new_url, location.origin);
-      const wants_hard_navigation = this.on_navigation_ === "hard_navigation";
-      if ($747421cd28dec5b5$export$29d28dadc2d6b631(event_)) return;
-      const different_origin = new_url_.origin !== location.origin;
-      if (wants_hard_navigation && (!force_spa_navigation_ || different_origin)) {
-        if (force_spa_navigation_ && different_origin)
-          // If we call history.pushState on a different origin, it will throw an error, so fallback to hard navigations
-          $gVhhF$depictaiutilishared.dwarn("Can't single page navigate to", new_url_.href, "due to different origin, this MIGHT mean you should fix the URLs");
-        if (!event_)
-          // If we haven't gotten an event, nothing will happen by not calling prevent default, so we need to change the URL
-          location.assign(new_url_);
-        return;
-      }
-      event_?.preventDefault();
-      const promise = this.#get_navigation_happened_promise(true);
-      if (force_spa_navigation_ && wants_hard_navigation) {
-        // Don't allow hard navigation if we're forcing SPA navigation, which we do for things where PageReplacer can be used for performance
-        const new_state = history.state;
-        if (listing_query_) {
-          // In JS-UI we need to know the listing_id of the current category, therefore push it into state
-          if (!this.listing_query_state_key) $gVhhF$depictaiutilishared.report(new Error("listing_query_state_key is not set"), "error");
-          new_state[this.listing_query_state_key] = listing_query_;
-        }
-        history[is_replace_ ? "replaceState" : "pushState"](new_state, "", new_url_);
-      } else this.#throwing_on_navigation.call(this, {
-        is_replace: is_replace_,
-        new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin),
-        scroll: scroll
-      });
-      await promise;
-    })
-  };
-  constructor(on_navigation, listing_query_state_key) {
-    this.listing_query_state_key = listing_query_state_key;
-    this.on_navigation_ = on_navigation;
-  }
-}
 var $bbe694fe824b9c78$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=image-container>`);
 function $bbe694fe824b9c78$export$41e1a079d40a0d58(props) {
   const [display] = $gVhhF$solidjs.createResource(() => ({