@depict-ai/ui 4.3.0 → 4.3.2

package/server/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.0";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.2";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -960,7 +960,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] = $5vyXB$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] = $5vyXB$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] = $5vyXB$solidjs.createSignal(false);
@@ -1016,13 +1016,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] ||= $5vyXB$solidjs.createSignal();
     img.addEventListener("load", $5vyXB$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_) ? {
@@ -1041,6 +1046,10 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   }
   $5vyXB$solidjs.onCleanup(() => gotCleanedUp = true);
   $5vyXB$solidjsweb.spread(img, $5vyXB$solidjs.mergeProps(modifiedOtherAttributes), false, true);
+  $5vyXB$solidjs.createRenderEffect(() => {
+    props.src;
+    srcJustChanged = true;
+  });
   $5vyXB$solidjs.createEffect(() => {
     if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
@@ -1110,48 +1119,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)] ||= $5vyXB$solidjs.createSignal() : [];
-  const [aspectRatio, setAspectRatio] = $5vyXB$solidjs.createSignal($5vyXB$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 = $5vyXB$solidjs.getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
-  let timeout;
-  $5vyXB$solidjs.createEffect(() => {
-    const {
-      autoAdjustAspectRatio: autoAdjustAspectRatio
-    } = props;
-    if (autoAdjustAspectRatio) {
-      const targetRatio = mostPrevalentAspectRatio?.();
-      if (targetRatio != undefined) {
-        const targetValue = `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, ${targetRatio})`;
-        const updateAspectRatio = $5vyXB$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);
-  });
   $5vyXB$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
@@ -1197,7 +1180,13 @@ function $d212a67662c5cf38$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
-var $1ae437d7d388a66e$var$_tmpl$ = ["<div", ' class="img-wrapper"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
+function $d659702496cb72ea$export$a71e92cfbb498adc(props) {
+  return $5vyXB$solidjs.createMemo(() => {
+    const price_formatting = props.price_formatting_;
+    return $5vyXB$depictaiutilishared.standard_price_format(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
+  });
+}
+var $1ae437d7d388a66e$var$_tmpl$ = ["<div", ' class="img-wrapper">', "</div>"],
   $1ae437d7d388a66e$var$_tmpl$2 = ["<span", ' class="d-price original">', "</span>"],
   $1ae437d7d388a66e$var$_tmpl$3 = ["<div", ' class="right-part"><div class="text-container"><span class="d-title line-clamp">', '</span><span class="', '">', "</span><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"];
 function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
@@ -1206,26 +1195,28 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
   isExpanded_: isExpanded_,
   textFadeInAnimationRunning_: textFadeInAnimationRunning_,
   outerRef_: outerRef_,
-  animationDuration_: animationDuration_
+  animationDuration_: animationDuration_,
+  priceFormatting_: priceFormatting_,
+  pseudoRouter_: pseudoRouter_
 }) {
   const variantToUse = $5vyXB$solidjs.createMemo(() => {
     const display = display_();
     return display?.variant_displays[display?.variant_index];
   });
-  const imageUrls = () => variantToUse()?.image_urls;
-  const imageUrl = $5vyXB$solidjs.createMemo(() => imageUrls()?.[0]);
-  const secondaryImageUrl = $5vyXB$solidjs.createMemo(() => imageUrls()?.[1]);
+  const imageUrl = $5vyXB$solidjs.createMemo(() => variantToUse()?.image_urls?.[0]);
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $5vyXB$solidjs.createSignal($5vyXB$solidjs.untrack(isExpanded_));
   const [animationEffectExists, setAnimationEffectExists] = $5vyXB$solidjs.createSignal(false);
   const [salePrice] = $5vyXB$solidjs.createResource(() => variantToUse()?.sale_price);
   const [originalPrice] = $5vyXB$solidjs.createResource(() => variantToUse()?.original_price);
-  const isOnSale = $5vyXB$solidjs.createMemo(() => salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense
+  const isOnSale = $5vyXB$solidjs.createMemo(() => !salePrice.loading && !originalPrice.loading && salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense after the initial load
+  const enableLink = $5vyXB$solidjs.createMemo(() => isExpanded_() && !animationIsRunning());
+  const href = $5vyXB$solidjs.createMemo(() => variantToUse()?.page_url);
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
   return $5vyXB$solidjsweb.ssrElement("a", $5vyXB$solidjsweb.mergeProps({
     "class": "look-item"
-  }, () => isExpanded_() && !animationIsRunning() ? {
-    href: variantToUse()?.page_url
+  }, () => enableLink() ? {
+    href: href()
   } : {}), () => ["<!--$-->", $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     when: imageUrl,
     get fallback() {
@@ -1252,25 +1243,10 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
               return isExpanded_() ? 0.75 : 1;
             },
             get autoAdjustAspectRatio() {
-              return isExpanded_() ? "smoothed" : false;
-            }
-          });
-        }
-      })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-        get when() {
-          return secondaryImageUrl();
-        },
-        get children() {
-          return $5vyXB$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
-            get src() {
-              return secondaryImageUrl();
+              return isExpanded_();
             },
-            get aspectRatio() {
-              return isExpanded_() ? 0.75 : 1;
-            },
-            "class": "secondary",
-            get autoAdjustAspectRatio() {
-              return isExpanded_() ? "smoothed" : false;
+            imgProps: {
+              keyRatioUpdating: true
             }
           });
         }
@@ -1284,18 +1260,66 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
       return $5vyXB$solidjsweb.ssr($1ae437d7d388a66e$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(variantToUse()?.title) ?? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
         height: "1em",
         width: "20ch"
-      })), `d-price ${isOnSale() ? "sale" : ""}`, !variantToUse() || salePrice.loading ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
-        height: "1em",
-        width: "20ch"
-      })) : $5vyXB$solidjsweb.escape(salePrice()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+      })), `d-price ${isOnSale() ? "sale" : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
         get when() {
-          return isOnSale();
+          return variantToUse() && !salePrice.loading;
         },
-        get children() {
-          return $5vyXB$solidjsweb.ssr($1ae437d7d388a66e$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), !variantToUse() || originalPrice.loading ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+        get fallback() {
+          return $5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
-          })) : $5vyXB$solidjsweb.escape(originalPrice()));
+          });
+        },
+        get children() {
+          return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+            get when() {
+              return salePrice.latest;
+            },
+            get children() {
+              return [priceFormatting_().pre_, $5vyXB$solidjsweb.createComponent((0, $d659702496cb72ea$export$a71e92cfbb498adc), {
+                get price_() {
+                  return salePrice();
+                },
+                get price_formatting_() {
+                  return priceFormatting_();
+                }
+              }), priceFormatting_().post_];
+            }
+          });
+        }
+      })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+        get when() {
+          return isOnSale();
+        },
+        get children() {
+          return $5vyXB$solidjsweb.ssr($1ae437d7d388a66e$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+            get when() {
+              return variantToUse() && !originalPrice.loading;
+            },
+            get fallback() {
+              return $5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+                height: "1em",
+                width: "20ch"
+              });
+            },
+            get children() {
+              return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+                get when() {
+                  return salePrice.latest;
+                },
+                get children() {
+                  return [priceFormatting_().pre_, $5vyXB$solidjsweb.createComponent((0, $d659702496cb72ea$export$a71e92cfbb498adc), {
+                    get price_() {
+                      return originalPrice();
+                    },
+                    get price_formatting_() {
+                      return priceFormatting_();
+                    }
+                  }), priceFormatting_().post_];
+                }
+              });
+            }
+          })));
         }
       })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
         when: FavoriteButton_,
@@ -1365,7 +1389,9 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
   userWantsExpandedSignal_: [userWantsExpanded, setUserWantsExpanded],
   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
@@ -1396,11 +1422,13 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
             },
             children: (display, index) => {
               return $5vyXB$solidjsweb.createComponent((0, $1ae437d7d388a66e$export$b73ed90f0ee50dc3), {
+                pseudoRouter_: pseudoRouter_,
                 animationDuration_: animationDuration_,
                 display_: display,
                 FavoriteButton_: FavoriteButton_,
                 isExpanded_: userWantsExpanded,
                 textFadeInAnimationRunning_: textFadeInAnimationRunning,
+                priceFormatting_: priceFormatting_,
                 outerRef_: el => $5vyXB$solidjs.createEffect(() => {
                   if (index !== 0) return;
                   const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
@@ -1441,10 +1469,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_ = $5vyXB$solidjs.createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
@@ -1476,7 +1504,7 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
     when: display_,
     get fallback() {
       return $5vyXB$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
-        aspectRatio: placeholderImageAspectRatio_
+        aspectRatio: `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, ${placeholderImageAspectRatio_})`
       });
     },
     get children() {
@@ -1494,10 +1522,124 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
     containerWidth_: containerWidth_,
     animationDuration_: animationDuration_,
     supportsHover_: supportsHover_,
-    FavoriteButton_: FavoriteButton_
+    FavoriteButton_: FavoriteButton_,
+    priceFormatting_: priceFormatting_,
+    pseudoRouter_: pseudoRouter_
   })]);
   return container;
 }
+
+/**
+ * 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, $5vyXB$depictaiutilishared.instant_exec_on_suspect_history_change).delete(handler);
+        }
+      };
+      (0, $5vyXB$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_: $5vyXB$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
+          $5vyXB$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) $5vyXB$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$ = ["<div", ' class="depict recommendations looks" style="', '">', "</div>"];
 let $072863633018e322$var$expandedLooksSignal_;
 function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
@@ -1506,6 +1648,7 @@ function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
       equals: false
     });
     const expandingAnimationDuration = 240;
+    const pseudoRouter = new (0, $e96dd13889871fc0$export$7e1297a3a19f10d8)("hard_navigation");
     const grid_spacing_override = $5vyXB$solidjs.createMemo(() => {
       const {
         gridSpacing_: gridSpacing_
@@ -1531,19 +1674,35 @@ 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_);
+    });
+    $5vyXB$solidjs.createEffect(() => {
+      const {
+        onNavigation_: onNavigation_
+      } = props;
+      if (onNavigation_) pseudoRouter.on_navigation_ = onNavigation_;
     });
     return $5vyXB$solidjsweb.ssr($072863633018e322$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrStyle(`--animation-duration: ${expandingAnimationDuration}ms`), $5vyXB$solidjsweb.escape($5vyXB$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_,
@@ -1556,6 +1715,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 => $5vyXB$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) {
+    $5vyXB$depictaiutilishared.dwarn("Displaytransformers threw", e);
+    return [];
+  }
+}
 const $d84fe647b84b5dc5$export$3064e1e8c6513da3 = new Set();
 let $d84fe647b84b5dc5$var$has_ran = false;
 function $d84fe647b84b5dc5$export$5162a71f252e6122() {
@@ -1596,21 +1802,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
  */
@@ -1650,12 +1841,6 @@ function $deaaf04362a1bc71$export$f50b88e2a00918b5(fn) {
     }
   };
 }
-function $d659702496cb72ea$export$a71e92cfbb498adc(props) {
-  return $5vyXB$solidjs.createMemo(() => {
-    const price_formatting = props.price_formatting_;
-    return $5vyXB$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 = $5vyXB$solidjs.createMemo(() => {
     const selectedValue = selectedIndex();
@@ -4080,102 +4265,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, $5vyXB$depictaiutilishared.instant_exec_on_suspect_history_change).delete(handler);
-        }
-      };
-      (0, $5vyXB$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_: $5vyXB$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
-          $5vyXB$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) $5vyXB$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$ = ["<div", ' class="image-container">', "</div>"];
 function $bbe694fe824b9c78$export$41e1a079d40a0d58(props) {
   const [display] = $5vyXB$solidjs.createResource(() => ({