@depict-ai/ui 4.2.0 → 4.2.1

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.2.0";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.2.1";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1208,21 +1208,24 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
   outerRef_: outerRef_,
   animationDuration_: animationDuration_
 }) {
-  const variantToUse = display_?.variant_displays[display_?.variant_index];
-  const imageUrls = variantToUse?.image_urls;
-  const imageUrl = imageUrls?.[0];
-  const secondaryImageUrl = imageUrls?.[1];
+  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 [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 [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 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
+    href: variantToUse()?.page_url
   } : {}), () => ["<!--$-->", $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     when: imageUrl,
     get fallback() {
@@ -1231,19 +1234,37 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
       });
     },
     get children() {
-      return $5vyXB$solidjsweb.ssr($1ae437d7d388a66e$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
-        src: imageUrl,
-        get aspectRatio() {
-          return isExpanded_() ? 0.75 : 1;
+      return $5vyXB$solidjsweb.ssr($1ae437d7d388a66e$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+        get when() {
+          return imageUrl();
+        },
+        get fallback() {
+          return $5vyXB$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
+            aspectRatio: 1
+          });
         },
-        get autoAdjustAspectRatio() {
-          return isExpanded_() ? "smoothed" : false;
+        get children() {
+          return $5vyXB$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
+            get src() {
+              return imageUrl();
+            },
+            get aspectRatio() {
+              return isExpanded_() ? 0.75 : 1;
+            },
+            get autoAdjustAspectRatio() {
+              return isExpanded_() ? "smoothed" : false;
+            }
+          });
         }
       })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-        when: secondaryImageUrl,
+        get when() {
+          return secondaryImageUrl();
+        },
         get children() {
           return $5vyXB$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
-            src: secondaryImageUrl,
+            get src() {
+              return secondaryImageUrl();
+            },
             get aspectRatio() {
               return isExpanded_() ? 0.75 : 1;
             },
@@ -1260,10 +1281,10 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
       return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
     },
     get children() {
-      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), {
+      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), {
+      })), `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), {
@@ -1271,7 +1292,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
           return isOnSale();
         },
         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), {
+          return $5vyXB$solidjsweb.ssr($1ae437d7d388a66e$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), !variantToUse() || originalPrice.loading ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
           })) : $5vyXB$solidjsweb.escape(originalPrice()));
@@ -1329,7 +1350,7 @@ async function $b9e830d616d01b31$var$checkIfIsAffectedByChromeBug326498383() {
     // Passive to make it more likely to run the callback before our timeout if the browser is under high load during the test
     {
       once: true,
-      passive: true
+      passive: false
     });
     await timeoutPromise;
   } catch (e) {
@@ -1337,7 +1358,7 @@ async function $b9e830d616d01b31$var$checkIfIsAffectedByChromeBug326498383() {
   }
   return isAffected;
 }
-var $905010a06f9aeae5$var$_tmpl$ = ["<div", ' class="scroll-padding"><div class="', '" style="', '">', "</div></div>"];
+var $905010a06f9aeae5$var$_tmpl$ = ["<div", ' class="scroll-padding">', "</div>"];
 function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
   displays_: displays_,
   FavoriteButton_: FavoriteButton_,
@@ -1353,31 +1374,42 @@ 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 = $5vyXB$solidjs.createSignal(false);
   const [getSecondPartAnimationRunning] = textFadeInAnimationRunning;
-  // These expanded variables are what's used to trigger the second and first phase animations
   $b9e830d616d01b31$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
   return $5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
     get children() {
       return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
         get when() {
-          return containerWidth_();
+          return containerWidth_() || !displays_;
         },
         get children() {
-          return $5vyXB$solidjsweb.ssr($905010a06f9aeae5$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `look-overlay ${userWantsExpanded() ? "expanded" : ""} ${!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""}`, $5vyXB$solidjsweb.ssrStyle(`--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.For), {
-            each: displays_,
-            children: (display, index) => $5vyXB$solidjsweb.createComponent((0, $1ae437d7d388a66e$export$b73ed90f0ee50dc3), {
-              animationDuration_: animationDuration_,
-              display_: display,
-              FavoriteButton_: FavoriteButton_,
-              isExpanded_: userWantsExpanded,
-              textFadeInAnimationRunning_: textFadeInAnimationRunning,
-              outerRef_: el => $5vyXB$solidjs.createEffect(() => {
-                if (index() !== 0) return;
-                const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
-                resizeObserver.observe(el);
-                $5vyXB$solidjs.onCleanup(() => resizeObserver.disconnect());
-              })
-            })
-          })));
+          return $5vyXB$solidjsweb.ssr($905010a06f9aeae5$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrElement("div", $5vyXB$solidjsweb.mergeProps({
+            get ["class"]() {
+              return `look-overlay ${userWantsExpanded() ? "expanded" : ""} ${!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""}`;
+            }
+          }, () => displays_ && {
+            style: `--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`
+          }), () => $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Index), {
+            get each() {
+              return displays_ || Array.from({
+                length: 4
+              });
+            },
+            children: (display, index) => {
+              return $5vyXB$solidjsweb.createComponent((0, $1ae437d7d388a66e$export$b73ed90f0ee50dc3), {
+                animationDuration_: animationDuration_,
+                display_: display,
+                FavoriteButton_: FavoriteButton_,
+                isExpanded_: userWantsExpanded,
+                textFadeInAnimationRunning_: textFadeInAnimationRunning,
+                outerRef_: el => $5vyXB$solidjs.createEffect(() => {
+                  if (index !== 0) return;
+                  const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
+                  resizeObserver.observe(el);
+                  $5vyXB$solidjs.onCleanup(() => resizeObserver.disconnect());
+                })
+              });
+            }
+          })), false));
         }
       });
     }
@@ -1403,18 +1435,22 @@ function $905010a06f9aeae5$var$scrollingFunctionForChrome(element, targetScrollY
   // Bootstrap our animation - it will get called right before next frame shall be rendered.
   requestAnimationFrame(step);
 }
-var $ad882bbe664dbd53$var$_tmpl$ = ["<div", ' class="look-card" style="', '"></div>'];
-function $ad882bbe664dbd53$export$44809a8a3e867e30(display, info, FavoriteButton_) {
+var $ad882bbe664dbd53$var$_tmpl$ = ["<div", ' class="', '"></div>'];
+function $ad882bbe664dbd53$export$44809a8a3e867e30({
+  display_: display_,
+  expandedLooksSignal_: [expandedLooks_, setExpandedLooks],
+  FavoriteButton_: FavoriteButton_,
+  placeholderImageAspectRatio_: placeholderImageAspectRatio_,
+  animationDuration_: animationDuration_
+}) {
   // TODO: shopify, run displayTransformers to get dynamic prices
   // TODO: format prices
-  const animationDuration_ = 300;
-  const [coverImage] = display?.image_urls || [];
+  const [coverImage] = display_?.image_urls || [];
   const useWantsExpandedSignal_ = $5vyXB$solidjs.createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
-  const [expandedLooks_, setExpandedLooks] = info?.expandedLooksSignal_ || [];
   const supportsHover_ = $b54e6192d0caa293$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
-  const container = $5vyXB$solidjsweb.ssr($ad882bbe664dbd53$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrStyle(`--animation-duration: ${animationDuration_}ms`));
+  const container = $5vyXB$solidjsweb.ssr($ad882bbe664dbd53$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `look-card ${!display_ ? "placeholder" : ""}`);
   const containerWidth_ = $f13855d1b951b24a$export$ebdc3711f7e02ccd(container);
   const clickHandler = $5vyXB$depictaiutilishared.catchify(({
     target: target
@@ -1425,7 +1461,7 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30(display, info, FavoriteButton
   });
   addEventListener("click", clickHandler);
   $5vyXB$solidjs.onCleanup(() => removeEventListener("click", clickHandler));
-  $5vyXB$solidjs.createEffect(() => setExpandedLooks?.(prev => {
+  $5vyXB$solidjs.createEffect(() => setExpandedLooks(prev => {
     if (userWantsExpanded()) {
       // Close the other expanded looks
       prev.clear();
@@ -1435,41 +1471,41 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30(display, info, FavoriteButton
     return prev;
   }));
   // Close us if another look expands
-  $5vyXB$solidjs.createEffect(() => expandedLooks_ && !expandedLooks_().has(us) && setUserWantsExpanded(false));
-  $5vyXB$solidjsweb.insert(container, () => $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-    when: display,
+  $5vyXB$solidjs.createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
+  $5vyXB$solidjsweb.insert(container, () => [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    when: display_,
     get fallback() {
       return $5vyXB$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
-        width: "100%",
-        height: "100%"
+        aspectRatio: placeholderImageAspectRatio_
       });
     },
     get children() {
-      return [$5vyXB$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
+      return $5vyXB$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
         src: coverImage,
-        aspectRatio: 0.75,
+        aspectRatio: placeholderImageAspectRatio_,
         autoAdjustAspectRatio: true
-      }), $5vyXB$solidjsweb.createComponent((0, $905010a06f9aeae5$export$ebf0b1d4f90c09ae), {
-        get displays_() {
-          return display?.displays;
-        },
-        userWantsExpandedSignal_: useWantsExpandedSignal_,
-        containerWidth_: containerWidth_,
-        animationDuration_: animationDuration_,
-        supportsHover_: supportsHover_,
-        FavoriteButton_: FavoriteButton_
-      })];
+      });
     }
-  }));
+  }), $5vyXB$solidjsweb.createComponent((0, $905010a06f9aeae5$export$ebf0b1d4f90c09ae), {
+    get displays_() {
+      return display_?.displays;
+    },
+    userWantsExpandedSignal_: useWantsExpandedSignal_,
+    containerWidth_: containerWidth_,
+    animationDuration_: animationDuration_,
+    supportsHover_: supportsHover_,
+    FavoriteButton_: FavoriteButton_
+  })]);
   return container;
 }
-var $072863633018e322$var$_tmpl$ = ["<div", ' class="depict recommendations looks">', "</div>"];
+var $072863633018e322$var$_tmpl$ = ["<div", ' class="depict recommendations looks" style="', '">', "</div>"];
 let $072863633018e322$var$expandedLooksSignal_;
 function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
     $072863633018e322$var$expandedLooksSignal_ ||= $5vyXB$solidjs.createSignal(new Set(), {
       equals: false
     });
+    const expandingAnimationDuration = 240;
     const grid_spacing_override = $5vyXB$solidjs.createMemo(() => {
       const {
         gridSpacing_: gridSpacing_
@@ -1499,13 +1535,16 @@ function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
         return [];
       return decoded.listings;
     });
-    return $5vyXB$solidjsweb.ssr($072863633018e322$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+    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(display, info ? {
-            ...info,
+          product_card_template_: (display, info) => $ad882bbe664dbd53$export$44809a8a3e867e30({
+            display_: display,
+            FavoriteButton_: props.FavoriteButton_,
+            placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
+            animationDuration_: expandingAnimationDuration,
             expandedLooksSignal_: $072863633018e322$var$expandedLooksSignal_
-          } : info, props.FavoriteButton_),
+          }),
           recommendations_resource_: looksResource,
           title_: () => props.title_,
           layout_options_: $5vyXB$solidjs.createMemo(() => ({

package/server/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.2.0";
+export const version = "4.2.1";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -249,6 +249,7 @@ export function LooksSlider(props: {
   merchant_: string;
   market_: string;
   locale_: string;
+  imagePlaceholderAspectRatio_: number | string;
   title_?: JSX.Element;
   FavoriteButton_?: (props: {
     display_: ModernDisplay | null | undefined;

package/server/latest/index.js

@@ -1,5 +1,5 @@
 import { add_to_version_info as $i7OB2$add_to_version_info, fetch_retry as $i7OB2$fetch_retry, base_url as $i7OB2$base_url, slider_fractional_factory as $i7OB2$slider_fractional_factory, dlog as $i7OB2$dlog, camelCasifyObject as $i7OB2$camelCasifyObject, make_random_classname as $i7OB2$make_random_classname, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, catchify as $i7OB2$catchify, layout_get_visible_recs_without_partial_rows as $i7OB2$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $i7OB2$layout_get_total_rec_amount_for_row, layout_media_query_header as $i7OB2$layout_media_query_header, report as $i7OB2$report, slider_fading_factory as $i7OB2$slider_fading_factory, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, observer as $i7OB2$observer, javascript_media_query as $i7OB2$javascript_media_query, queueMacroTask as $i7OB2$queueMacroTask, findMostFrequentItem as $i7OB2$findMostFrequentItem, dwarn as $i7OB2$dwarn, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ContainedImage as $i7OB2$ContainedImage, standard_price_format as $i7OB2$standard_price_format, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, use_href_accessor as $i7OB2$use_href_accessor, get_session_id as $i7OB2$get_session_id, add_version_query_params as $i7OB2$add_version_query_params, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, useExpandingContainer as $i7OB2$useExpandingContainer, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, snakeCasifyObject as $i7OB2$snakeCasifyObject, sort_obj as $i7OB2$sort_obj, make_url_with_query_params as $i7OB2$make_url_with_query_params, ListenableSet as $i7OB2$ListenableSet1, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, escape as $i7OB2$escape, createComponent as $i7OB2$createComponent, mergeProps as $i7OB2$mergeProps, isServer as $i7OB2$isServer, ssrElement as $i7OB2$ssrElement, ssrClassList as $i7OB2$ssrClassList, insert as $i7OB2$insert, ssrAttribute as $i7OB2$ssrAttribute, ssrStyle as $i7OB2$ssrStyle, spread as $i7OB2$spread, Dynamic as $i7OB2$Dynamic } from "solid-js/web";
+import { ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, ssrStyle as $i7OB2$ssrStyle, escape as $i7OB2$escape, createComponent as $i7OB2$createComponent, mergeProps as $i7OB2$mergeProps, isServer as $i7OB2$isServer, ssrElement as $i7OB2$ssrElement, ssrClassList as $i7OB2$ssrClassList, insert as $i7OB2$insert, ssrAttribute as $i7OB2$ssrAttribute, spread as $i7OB2$spread, Dynamic as $i7OB2$Dynamic } from "solid-js/web";
 import { createSignal as $i7OB2$createSignal, createMemo as $i7OB2$createMemo, createResource as $i7OB2$createResource, Show as $i7OB2$Show, Suspense as $i7OB2$Suspense, untrack as $i7OB2$untrack, createRenderEffect as $i7OB2$createRenderEffect, Index as $i7OB2$Index, createRoot as $i7OB2$createRoot, onCleanup as $i7OB2$onCleanup, For as $i7OB2$For, getOwner as $i7OB2$getOwner, runWithOwner as $i7OB2$runWithOwner, createEffect as $i7OB2$createEffect, createContext as $i7OB2$createContext, useContext as $i7OB2$useContext, createUniqueId as $i7OB2$createUniqueId, createComputed as $i7OB2$createComputed, ErrorBoundary as $i7OB2$ErrorBoundary, splitProps as $i7OB2$splitProps, mergeProps as $i7OB2$mergeProps1, on as $i7OB2$on, batch as $i7OB2$batch, createSelector as $i7OB2$createSelector, children as $i7OB2$children, createReaction as $i7OB2$createReaction, mapArray as $i7OB2$mapArray } from "solid-js";
 import { ListenableSet as $i7OB2$ListenableSet, catchify as $i7OB2$catchify1, use_href_accessor as $i7OB2$use_href_accessor1, report as $i7OB2$report1 } from "@depict-ai/utilishared/latest";
 import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from "solid-js/store";
@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! 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 = "4.2.0";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.2.1";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1121,21 +1121,24 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
   outerRef_: outerRef_,
   animationDuration_: animationDuration_
 }) {
-  const variantToUse = display_?.variant_displays[display_?.variant_index];
-  const imageUrls = variantToUse?.image_urls;
-  const imageUrl = imageUrls?.[0];
-  const secondaryImageUrl = imageUrls?.[1];
+  const variantToUse = $i7OB2$createMemo(() => {
+    const display = display_();
+    return display?.variant_displays[display?.variant_index];
+  });
+  const imageUrls = () => variantToUse()?.image_urls;
+  const imageUrl = $i7OB2$createMemo(() => imageUrls()?.[0]);
+  const secondaryImageUrl = $i7OB2$createMemo(() => imageUrls()?.[1]);
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $i7OB2$createSignal($i7OB2$untrack(isExpanded_));
   const [animationEffectExists, setAnimationEffectExists] = $i7OB2$createSignal(false);
-  const [salePrice] = $i7OB2$createResource(() => variantToUse?.sale_price);
-  const [originalPrice] = $i7OB2$createResource(() => variantToUse?.original_price);
+  const [salePrice] = $i7OB2$createResource(() => variantToUse()?.sale_price);
+  const [originalPrice] = $i7OB2$createResource(() => variantToUse()?.original_price);
   const isOnSale = $i7OB2$createMemo(() => salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
   return $i7OB2$ssrElement("a", $i7OB2$mergeProps({
     "class": "look-item"
   }, () => isExpanded_() && !animationIsRunning() ? {
-    href: variantToUse?.page_url
+    href: variantToUse()?.page_url
   } : {}), () => ["<!--$-->", $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
     when: imageUrl,
     get fallback() {
@@ -1144,19 +1147,37 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
       });
     },
     get children() {
-      return $i7OB2$ssr($5a6c386e1bde5665$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $70bb27cc6be01fc7$export$9d4a4b669b1929ab), {
-        src: imageUrl,
-        get aspectRatio() {
-          return isExpanded_() ? 0.75 : 1;
+      return $i7OB2$ssr($5a6c386e1bde5665$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
+        get when() {
+          return imageUrl();
+        },
+        get fallback() {
+          return $i7OB2$createComponent((0, $7f60f09116a3fe61$export$3f37af283f8fb843), {
+            aspectRatio: 1
+          });
         },
-        get autoAdjustAspectRatio() {
-          return isExpanded_() ? "smoothed" : false;
+        get children() {
+          return $i7OB2$createComponent((0, $70bb27cc6be01fc7$export$9d4a4b669b1929ab), {
+            get src() {
+              return imageUrl();
+            },
+            get aspectRatio() {
+              return isExpanded_() ? 0.75 : 1;
+            },
+            get autoAdjustAspectRatio() {
+              return isExpanded_() ? "smoothed" : false;
+            }
+          });
         }
       })), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
-        when: secondaryImageUrl,
+        get when() {
+          return secondaryImageUrl();
+        },
         get children() {
           return $i7OB2$createComponent((0, $70bb27cc6be01fc7$export$9d4a4b669b1929ab), {
-            src: secondaryImageUrl,
+            get src() {
+              return secondaryImageUrl();
+            },
             get aspectRatio() {
               return isExpanded_() ? 0.75 : 1;
             },
@@ -1173,10 +1194,10 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
       return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
     },
     get children() {
-      return $i7OB2$ssr($5a6c386e1bde5665$var$_tmpl$3, $i7OB2$ssrHydrationKey(), $i7OB2$escape(variantToUse?.title) ?? $i7OB2$escape($i7OB2$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
+      return $i7OB2$ssr($5a6c386e1bde5665$var$_tmpl$3, $i7OB2$ssrHydrationKey(), $i7OB2$escape(variantToUse()?.title) ?? $i7OB2$escape($i7OB2$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
         height: "1em",
         width: "20ch"
-      })), `d-price ${isOnSale() ? "sale" : ""}`, !variantToUse || salePrice.loading ? $i7OB2$escape($i7OB2$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
+      })), `d-price ${isOnSale() ? "sale" : ""}`, !variantToUse() || salePrice.loading ? $i7OB2$escape($i7OB2$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
         height: "1em",
         width: "20ch"
       })) : $i7OB2$escape(salePrice()), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
@@ -1184,7 +1205,7 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
           return isOnSale();
         },
         get children() {
-          return $i7OB2$ssr($5a6c386e1bde5665$var$_tmpl$2, $i7OB2$ssrHydrationKey(), !variantToUse || originalPrice.loading ? $i7OB2$escape($i7OB2$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
+          return $i7OB2$ssr($5a6c386e1bde5665$var$_tmpl$2, $i7OB2$ssrHydrationKey(), !variantToUse() || originalPrice.loading ? $i7OB2$escape($i7OB2$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
           })) : $i7OB2$escape(originalPrice()));
@@ -1242,7 +1263,7 @@ async function $62a8f670f8464532$var$checkIfIsAffectedByChromeBug326498383() {
     // Passive to make it more likely to run the callback before our timeout if the browser is under high load during the test
     {
       once: true,
-      passive: true
+      passive: false
     });
     await timeoutPromise;
   } catch (e) {
@@ -1250,7 +1271,7 @@ async function $62a8f670f8464532$var$checkIfIsAffectedByChromeBug326498383() {
   }
   return isAffected;
 }
-var $7555dcad3b8a4632$var$_tmpl$ = ["<div", ' class="scroll-padding"><div class="', '" style="', '">', "</div></div>"];
+var $7555dcad3b8a4632$var$_tmpl$ = ["<div", ' class="scroll-padding">', "</div>"];
 function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
   displays_: displays_,
   FavoriteButton_: FavoriteButton_,
@@ -1266,31 +1287,42 @@ function $7555dcad3b8a4632$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 = $i7OB2$createSignal(false);
   const [getSecondPartAnimationRunning] = textFadeInAnimationRunning;
-  // These expanded variables are what's used to trigger the second and first phase animations
   $62a8f670f8464532$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
   return $i7OB2$createComponent((0, $011607bdf658f807$export$e68cff63f76bd15b), {
     get children() {
       return $i7OB2$createComponent((0, $i7OB2$Show), {
         get when() {
-          return containerWidth_();
+          return containerWidth_() || !displays_;
         },
         get children() {
-          return $i7OB2$ssr($7555dcad3b8a4632$var$_tmpl$, $i7OB2$ssrHydrationKey(), `look-overlay ${userWantsExpanded() ? "expanded" : ""} ${!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""}`, $i7OB2$ssrStyle(`--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$For), {
-            each: displays_,
-            children: (display, index) => $i7OB2$createComponent((0, $5a6c386e1bde5665$export$b73ed90f0ee50dc3), {
-              animationDuration_: animationDuration_,
-              display_: display,
-              FavoriteButton_: FavoriteButton_,
-              isExpanded_: userWantsExpanded,
-              textFadeInAnimationRunning_: textFadeInAnimationRunning,
-              outerRef_: el => $i7OB2$createEffect(() => {
-                if (index() !== 0) return;
-                const resizeObserver = new ResizeObserver($i7OB2$catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
-                resizeObserver.observe(el);
-                $i7OB2$onCleanup(() => resizeObserver.disconnect());
-              })
-            })
-          })));
+          return $i7OB2$ssr($7555dcad3b8a4632$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrElement("div", $i7OB2$mergeProps({
+            get ["class"]() {
+              return `look-overlay ${userWantsExpanded() ? "expanded" : ""} ${!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""}`;
+            }
+          }, () => displays_ && {
+            style: `--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`
+          }), () => $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Index), {
+            get each() {
+              return displays_ || Array.from({
+                length: 4
+              });
+            },
+            children: (display, index) => {
+              return $i7OB2$createComponent((0, $5a6c386e1bde5665$export$b73ed90f0ee50dc3), {
+                animationDuration_: animationDuration_,
+                display_: display,
+                FavoriteButton_: FavoriteButton_,
+                isExpanded_: userWantsExpanded,
+                textFadeInAnimationRunning_: textFadeInAnimationRunning,
+                outerRef_: el => $i7OB2$createEffect(() => {
+                  if (index !== 0) return;
+                  const resizeObserver = new ResizeObserver($i7OB2$catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
+                  resizeObserver.observe(el);
+                  $i7OB2$onCleanup(() => resizeObserver.disconnect());
+                })
+              });
+            }
+          })), false));
         }
       });
     }
@@ -1316,18 +1348,22 @@ function $7555dcad3b8a4632$var$scrollingFunctionForChrome(element, targetScrollY
   // Bootstrap our animation - it will get called right before next frame shall be rendered.
   requestAnimationFrame(step);
 }
-var $28ee4f7db3cc44b8$var$_tmpl$ = ["<div", ' class="look-card" style="', '"></div>'];
-function $28ee4f7db3cc44b8$export$44809a8a3e867e30(display, info, FavoriteButton_) {
+var $28ee4f7db3cc44b8$var$_tmpl$ = ["<div", ' class="', '"></div>'];
+function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
+  display_: display_,
+  expandedLooksSignal_: [expandedLooks_, setExpandedLooks],
+  FavoriteButton_: FavoriteButton_,
+  placeholderImageAspectRatio_: placeholderImageAspectRatio_,
+  animationDuration_: animationDuration_
+}) {
   // TODO: shopify, run displayTransformers to get dynamic prices
   // TODO: format prices
-  const animationDuration_ = 300;
-  const [coverImage] = display?.image_urls || [];
+  const [coverImage] = display_?.image_urls || [];
   const useWantsExpandedSignal_ = $i7OB2$createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
-  const [expandedLooks_, setExpandedLooks] = info?.expandedLooksSignal_ || [];
   const supportsHover_ = $dc9262ef6f786812$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
-  const container = $i7OB2$ssr($28ee4f7db3cc44b8$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrStyle(`--animation-duration: ${animationDuration_}ms`));
+  const container = $i7OB2$ssr($28ee4f7db3cc44b8$var$_tmpl$, $i7OB2$ssrHydrationKey(), `look-card ${!display_ ? "placeholder" : ""}`);
   const containerWidth_ = $2449872a62a75a20$export$ebdc3711f7e02ccd(container);
   const clickHandler = $i7OB2$catchify(({
     target: target
@@ -1338,7 +1374,7 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30(display, info, FavoriteButton
   });
   addEventListener("click", clickHandler);
   $i7OB2$onCleanup(() => removeEventListener("click", clickHandler));
-  $i7OB2$createEffect(() => setExpandedLooks?.(prev => {
+  $i7OB2$createEffect(() => setExpandedLooks(prev => {
     if (userWantsExpanded()) {
       // Close the other expanded looks
       prev.clear();
@@ -1348,41 +1384,41 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30(display, info, FavoriteButton
     return prev;
   }));
   // Close us if another look expands
-  $i7OB2$createEffect(() => expandedLooks_ && !expandedLooks_().has(us) && setUserWantsExpanded(false));
-  $i7OB2$insert(container, () => $i7OB2$createComponent((0, $i7OB2$Show), {
-    when: display,
+  $i7OB2$createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
+  $i7OB2$insert(container, () => [$i7OB2$createComponent((0, $i7OB2$Show), {
+    when: display_,
     get fallback() {
       return $i7OB2$createComponent((0, $7f60f09116a3fe61$export$3f37af283f8fb843), {
-        width: "100%",
-        height: "100%"
+        aspectRatio: placeholderImageAspectRatio_
       });
     },
     get children() {
-      return [$i7OB2$createComponent((0, $70bb27cc6be01fc7$export$9d4a4b669b1929ab), {
+      return $i7OB2$createComponent((0, $70bb27cc6be01fc7$export$9d4a4b669b1929ab), {
         src: coverImage,
-        aspectRatio: 0.75,
+        aspectRatio: placeholderImageAspectRatio_,
         autoAdjustAspectRatio: true
-      }), $i7OB2$createComponent((0, $7555dcad3b8a4632$export$ebf0b1d4f90c09ae), {
-        get displays_() {
-          return display?.displays;
-        },
-        userWantsExpandedSignal_: useWantsExpandedSignal_,
-        containerWidth_: containerWidth_,
-        animationDuration_: animationDuration_,
-        supportsHover_: supportsHover_,
-        FavoriteButton_: FavoriteButton_
-      })];
+      });
     }
-  }));
+  }), $i7OB2$createComponent((0, $7555dcad3b8a4632$export$ebf0b1d4f90c09ae), {
+    get displays_() {
+      return display_?.displays;
+    },
+    userWantsExpandedSignal_: useWantsExpandedSignal_,
+    containerWidth_: containerWidth_,
+    animationDuration_: animationDuration_,
+    supportsHover_: supportsHover_,
+    FavoriteButton_: FavoriteButton_
+  })]);
   return container;
 }
-var $f577edfe2240eec1$var$_tmpl$ = ["<div", ' class="depict recommendations looks">', "</div>"];
+var $f577edfe2240eec1$var$_tmpl$ = ["<div", ' class="depict recommendations looks" style="', '">', "</div>"];
 let $f577edfe2240eec1$var$expandedLooksSignal_;
 function $f577edfe2240eec1$export$1935e6bdfc5ed8ce(props) {
   return $16b52438165aafe2$export$23fca46f3143581f(() => {
     $f577edfe2240eec1$var$expandedLooksSignal_ ||= $i7OB2$createSignal(new Set(), {
       equals: false
     });
+    const expandingAnimationDuration = 240;
     const grid_spacing_override = $i7OB2$createMemo(() => {
       const {
         gridSpacing_: gridSpacing_
@@ -1412,13 +1448,16 @@ function $f577edfe2240eec1$export$1935e6bdfc5ed8ce(props) {
         return [];
       return decoded.listings;
     });
-    return $i7OB2$ssr($f577edfe2240eec1$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $011607bdf658f807$export$e68cff63f76bd15b), {
+    return $i7OB2$ssr($f577edfe2240eec1$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrStyle(`--animation-duration: ${expandingAnimationDuration}ms`), $i7OB2$escape($i7OB2$createComponent((0, $011607bdf658f807$export$e68cff63f76bd15b), {
       get children() {
         return $c4492d24952ed731$export$d41d19e89346fa2({
-          product_card_template_: (display, info) => $28ee4f7db3cc44b8$export$44809a8a3e867e30(display, info ? {
-            ...info,
+          product_card_template_: (display, info) => $28ee4f7db3cc44b8$export$44809a8a3e867e30({
+            display_: display,
+            FavoriteButton_: props.FavoriteButton_,
+            placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
+            animationDuration_: expandingAnimationDuration,
             expandedLooksSignal_: $f577edfe2240eec1$var$expandedLooksSignal_
-          } : info, props.FavoriteButton_),
+          }),
           recommendations_resource_: looksResource,
           title_: () => props.title_,
           layout_options_: $i7OB2$createMemo(() => ({