@depict-ai/ui 4.7.6 → 4.7.8

package/latest/index.js

@@ -1,5 +1,5 @@
 import { add_to_version_info as $9HbP8$add_to_version_info, useExpandingContainer as $9HbP8$useExpandingContainer, fetch_retry as $9HbP8$fetch_retry, base_url as $9HbP8$base_url, dwarn as $9HbP8$dwarn, slider_fractional_factory as $9HbP8$slider_fractional_factory, dlog as $9HbP8$dlog, camelCasifyObject as $9HbP8$camelCasifyObject, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, catchify as $9HbP8$catchify, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, report as $9HbP8$report, slider_fading_factory as $9HbP8$slider_fading_factory, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, observer as $9HbP8$observer, javascript_media_query as $9HbP8$javascript_media_query, queueMacroTask as $9HbP8$queueMacroTask, findMostFrequentItem as $9HbP8$findMostFrequentItem, standard_price_format as $9HbP8$standard_price_format, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, use_href_accessor as $9HbP8$use_href_accessor, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, insert_surfaces as $9HbP8$insert_surfaces, is_debug as $9HbP8$is_debug } from "@depict-ai/utilishared/latest";
-import { createComponent as $9HbP8$createComponent, insert as $9HbP8$insert, template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, mergeProps as $9HbP8$mergeProps, effect as $9HbP8$effect, className as $9HbP8$className, isServer as $9HbP8$isServer, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, getNextMarker as $9HbP8$getNextMarker, classList as $9HbP8$classList, setAttribute as $9HbP8$setAttribute, style as $9HbP8$style, use as $9HbP8$use, setProperty as $9HbP8$setProperty, Dynamic as $9HbP8$Dynamic } from "solid-js/web";
+import { createComponent as $9HbP8$createComponent, insert as $9HbP8$insert, template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, mergeProps as $9HbP8$mergeProps, effect as $9HbP8$effect, className as $9HbP8$className, isServer as $9HbP8$isServer, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, getNextMarker as $9HbP8$getNextMarker, classList as $9HbP8$classList, setAttribute as $9HbP8$setAttribute, use as $9HbP8$use, style as $9HbP8$style, setProperty as $9HbP8$setProperty, Dynamic as $9HbP8$Dynamic } from "solid-js/web";
 import { createSignal as $9HbP8$createSignal, createMemo as $9HbP8$createMemo, createResource as $9HbP8$createResource, createEffect as $9HbP8$createEffect, Show as $9HbP8$Show, mergeProps as $9HbP8$mergeProps1, Suspense as $9HbP8$Suspense, untrack as $9HbP8$untrack, createRenderEffect as $9HbP8$createRenderEffect, Index as $9HbP8$Index, createRoot as $9HbP8$createRoot, onCleanup as $9HbP8$onCleanup, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, createUniqueId as $9HbP8$createUniqueId, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, splitProps as $9HbP8$splitProps, on as $9HbP8$on, batch as $9HbP8$batch, createSelector as $9HbP8$createSelector, children as $9HbP8$children, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
 import { ListenableSet as $9HbP8$ListenableSet, catchify as $9HbP8$catchify1, use_href_accessor as $9HbP8$use_href_accessor1, queueMacroTask as $9HbP8$queueMacroTask1, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
 import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from "solid-js/store";
@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$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.7.6";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.7.8";
 function $24e27fab9c821b86$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -850,34 +850,6 @@ function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   }) => signal[1](matches)).remove);
   return signal[0];
 }
-
-/** @jsxImportSource solid-js */
-
-function $2449872a62a75a20$export$ebdc3711f7e02ccd(what_to_watch) {
-  const [width, setWidth] = $9HbP8$createSignal();
-  const resizeObserver = new ResizeObserver($9HbP8$catchify(records => {
-    for (let j = 0; j < records.length; j++) {
-      const width = records[j].borderBoxSize?.[0]?.inlineSize ?? what_to_watch.getBoundingClientRect().width;
-      setWidth(width);
-    }
-  }));
-  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
-  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
-  const disconnect = (0, $9HbP8$observer).onexists(what_to_watch, ({
-    element: element
-  }) => requestAnimationFrame($9HbP8$catchify(() => {
-    const current_size = what_to_watch.getBoundingClientRect().width;
-    if (current_size)
-      // If element has size, set signal to that. ResizeObserver only triggers when the content is visible in some cases, but it might already have a size. This reduces size filter expanding animation jank in chrome.
-      setWidth(current_size);
-    resizeObserver.observe(element);
-  })));
-  $9HbP8$onCleanup(() => {
-    resizeObserver.disconnect();
-    disconnect();
-  });
-  return width;
-}
 function $d134eae24341b4a1$export$89c6019e4baa40b1(props) {
   const style = $9HbP8$createMemo(() => {
     const {
@@ -1037,9 +1009,10 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   });
   // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
   // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
-  const executeWhenIdleBatched = fn => {
+  const executeWhenIdleBatched = (fn, isSizesUpdate) => {
     if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
-    if ($9HbP8$untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately
+    if ((!isSizesUpdate || !sizeSetFastPath) && $9HbP8$untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately (improves lighthouse metrics)
+    // unless we're just a `sizes` update after the initial sizes setting (this optimisation makes the looks animation a lot smoother on low-cpu devices)
     const existingStack = listingContext?.[$e8ffe11ed01df0fe$var$onIdleFunctionsSymbol];
     if (existingStack) return existingStack.add(fn);
     const newStack = new Set([fn]);
@@ -1121,10 +1094,11 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     // This greatly improves performance when loading (more) products
     // See https://depictaiworkspace.slack.com/archives/C05NJ0K3WRL/p1698220617663139
     timeoutSet = true; // Important to set timeoutSet before the call to executeWhenIdleBatched since if this is an important image executeWhenIdleBatched will execute fn immediately
-    executeWhenIdleBatched(handler);
+    executeWhenIdleBatched(handler, true);
   });
+  const dontLoadImageYet = $9HbP8$createMemo(() => !props.size() || !hasSetSize()); // Moving this condition into a memo saves us from re-setting src and srcset (expensive) if just props.size changes
   $9HbP8$createEffect(() => {
-    if (!props.size() || !hasSetSize()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
+    if (dontLoadImageYet()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
     Object.assign(img, src_options());
     // Add to DOM once decoded to not require/block any paints before image has completed loading and avoid showing broken image symbol
     // We can do this because there has to be a container around us giving us a size
@@ -1140,7 +1114,7 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     img.decode().catch(e => $9HbP8$dwarn("Failed to decode image", e, img)) // Display the image also if loading failed so webdev can debug and doesn't get "no image"
     .then(async () => {
       // Also wait with inserting image (i.e. paint) until browser is idle
-      await new Promise(r => executeWhenIdleBatched(r));
+      await new Promise(r => executeWhenIdleBatched(r, false));
       if (gotCleanedUp) return;
       setHasDecoded(true);
       hasDecodedFastPath = true;
@@ -1471,7 +1445,7 @@ var $62a8f670f8464532$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div style=posi
 let $62a8f670f8464532$var$cachedValue;
 async function $62a8f670f8464532$export$7b9a0e99f0aeb2f3() {
   if ($62a8f670f8464532$var$cachedValue != undefined) return $62a8f670f8464532$var$cachedValue;
-  return $62a8f670f8464532$var$cachedValue = await $62a8f670f8464532$var$checkIfIsAffectedByChromeBug326498383();
+  return $62a8f670f8464532$var$cachedValue = $62a8f670f8464532$var$checkIfIsAffectedByChromeBug326498383();
 }
 async function $62a8f670f8464532$var$checkIfIsAffectedByChromeBug326498383() {
   let isAffected = true;
@@ -1484,7 +1458,7 @@ async function $62a8f670f8464532$var$checkIfIsAffectedByChromeBug326498383() {
       setTimeout($9HbP8$catchify(() => {
         r();
         div.remove();
-      }), 200);
+      }), 500);
     });
     const {
       style: style
@@ -1526,7 +1500,8 @@ function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
   animationDuration_: animationDuration_,
   supportsHover_: supportsHover_,
   priceFormatting_: priceFormatting_,
-  pseudoRouter_: pseudoRouter_
+  pseudoRouter_: pseudoRouter_,
+  containerHeight_: containerHeight_
 }) {
   let isAffectedByChromeBug = false;
   // If the user requests the drawer to be expanded or not
@@ -1546,6 +1521,8 @@ function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
         get children() {
           var _el$ = $9HbP8$getNextElement($7555dcad3b8a4632$var$_tmpl$),
             _el$2 = _el$.firstChild;
+          $9HbP8$addEventListener(_el$2, "mouseleave", $9HbP8$catchify(() => supportsHover_() && setUserWantsExpanded(false)));
+          $9HbP8$addEventListener(_el$2, "mouseenter", $9HbP8$catchify(() => supportsHover_() && setUserWantsExpanded(true)));
           $9HbP8$use(el => $9HbP8$createEffect(() => {
             if (userWantsExpanded()) return;
             if (isAffectedByChromeBug) {
@@ -1557,22 +1534,6 @@ function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
               behavior: "smooth"
             });
           }), _el$2);
-          $9HbP8$spread(_el$2, $9HbP8$mergeProps({
-            get classList() {
-              return {
-                expanded: userWantsExpanded(),
-                "resting-fully-expanded": !getSecondPartAnimationRunning() && userWantsExpanded()
-              };
-            },
-            get onMouseEnter() {
-              return $9HbP8$catchify(() => supportsHover_() && setUserWantsExpanded(true));
-            },
-            get onMouseLeave() {
-              return $9HbP8$catchify(() => supportsHover_() && setUserWantsExpanded(false));
-            }
-          }, () => displays_() && {
-            style: `--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`
-          }), false, true);
           $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Index), {
             get each() {
               return displays_() || Array.from({
@@ -1597,7 +1558,21 @@ function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
               });
             }
           }));
-          $9HbP8$runHydrationEvents();
+          $9HbP8$effect(_p$ => {
+            var _v$ = !!userWantsExpanded(),
+              _v$2 = !!(!getSecondPartAnimationRunning() && userWantsExpanded()),
+              _v$3 = displays_() &&
+              // The styling is written like this to eke out animation smoothness on low CPU devices, git blame for previous, more readable versions.
+              `--look-card-width:${containerWidth_()}px;--look-card-height:${containerHeight_()}px;--look-item-height:${lookItemHeight() || 200}px`;
+            _v$ !== _p$.e && _el$2.classList.toggle("expanded", _p$.e = _v$);
+            _v$2 !== _p$.t && _el$2.classList.toggle("resting-fully-expanded", _p$.t = _v$2);
+            _p$.a = $9HbP8$style(_el$2, _v$3, _p$.a);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined
+          });
           return _el$;
         }
       });
@@ -1624,7 +1599,7 @@ 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$ = /*#__PURE__*/$9HbP8$template(`<div class=look-card>`);
+var $28ee4f7db3cc44b8$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=look-card><!$><!/><!$><!/>`);
 function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   display_: display_,
   expandedLooksSignal_: [expandedLooks_, setExpandedLooks],
@@ -1634,20 +1609,13 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   priceFormatting_: priceFormatting_,
   pseudoRouter_: pseudoRouter_
 }) {
+  let container;
   const useWantsExpandedSignal_ = $9HbP8$createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $dc9262ef6f786812$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
-  const container = (() => {
-    var _el$ = $9HbP8$getNextElement($28ee4f7db3cc44b8$var$_tmpl$);
-    $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify(({
-      target: target
-    }) => setUserWantsExpanded(prev => !prev)), true);
-    $9HbP8$effect(() => _el$.classList.toggle("placeholder", !display_()));
-    $9HbP8$runHydrationEvents();
-    return _el$;
-  })();
-  const containerWidth_ = $2449872a62a75a20$export$ebdc3711f7e02ccd(container);
+  const [containerWidth_, setContainerWidth] = $9HbP8$createSignal();
+  const [containerHeight_, setContainerHeight] = $9HbP8$createSignal();
   const clickHandler = $9HbP8$catchify(({
     target: target
   }) => {
@@ -1668,35 +1636,62 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   }));
   // Close us if another look expands
   $9HbP8$createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
-  $9HbP8$insert(container, () => [$9HbP8$createComponent((0, $9HbP8$Show), {
-    get when() {
-      return display_();
-    },
-    get fallback() {
-      return $9HbP8$createComponent((0, $7f60f09116a3fe61$export$3f37af283f8fb843), {
-        aspectRatio: `var(${(0, $bb15dfb548a7666e$export$8a2234b5b1a5ebd4)}, ${placeholderImageAspectRatio_})`
-      });
-    },
-    get children() {
-      return $9HbP8$createComponent((0, $70bb27cc6be01fc7$export$9d4a4b669b1929ab), {
-        get src() {
-          return display_()?.image_urls?.[0];
-        },
-        aspectRatio: placeholderImageAspectRatio_,
-        autoAdjustAspectRatio: true
-      });
-    }
-  }), $9HbP8$createComponent((0, $7555dcad3b8a4632$export$ebf0b1d4f90c09ae), {
-    displays_: () => display_()?.displays,
-    userWantsExpandedSignal_: useWantsExpandedSignal_,
-    containerWidth_: containerWidth_,
-    animationDuration_: animationDuration_,
-    supportsHover_: supportsHover_,
-    FavoriteButton_: FavoriteButton_,
-    priceFormatting_: priceFormatting_,
-    pseudoRouter_: pseudoRouter_
-  })]);
-  return container;
+  return (() => {
+    var _el$ = $9HbP8$getNextElement($28ee4f7db3cc44b8$var$_tmpl$),
+      _el$2 = _el$.firstChild,
+      [_el$3, _co$] = $9HbP8$getNextMarker(_el$2.nextSibling),
+      _el$4 = _el$3.nextSibling,
+      [_el$5, _co$2] = $9HbP8$getNextMarker(_el$4.nextSibling);
+    $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify(() => setUserWantsExpanded(prev => !prev)), true);
+    $9HbP8$use(el => {
+      container = el;
+      const ro = new ResizeObserver($9HbP8$catchify(records => {
+        const last = records.at(-1);
+        if (!last) return;
+        const {
+          width: width,
+          height: height
+        } = last.contentRect;
+        setContainerWidth(width);
+        setContainerHeight(height);
+      }));
+      ro.observe(el);
+      $9HbP8$onCleanup(() => ro.disconnect());
+    }, _el$);
+    _el$.classList.toggle("placeholder", !!!display_);
+    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $9HbP8$Show), {
+      get when() {
+        return display_();
+      },
+      get fallback() {
+        return $9HbP8$createComponent((0, $7f60f09116a3fe61$export$3f37af283f8fb843), {
+          aspectRatio: `var(${(0, $bb15dfb548a7666e$export$8a2234b5b1a5ebd4)}, ${placeholderImageAspectRatio_})`
+        });
+      },
+      get children() {
+        return $9HbP8$createComponent((0, $70bb27cc6be01fc7$export$9d4a4b669b1929ab), {
+          get src() {
+            return display_()?.image_urls?.[0];
+          },
+          aspectRatio: placeholderImageAspectRatio_,
+          autoAdjustAspectRatio: true
+        });
+      }
+    }), _el$3, _co$);
+    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $7555dcad3b8a4632$export$ebf0b1d4f90c09ae), {
+      displays_: () => display_()?.displays,
+      userWantsExpandedSignal_: useWantsExpandedSignal_,
+      containerWidth_: containerWidth_,
+      animationDuration_: animationDuration_,
+      supportsHover_: supportsHover_,
+      FavoriteButton_: FavoriteButton_,
+      priceFormatting_: priceFormatting_,
+      pseudoRouter_: pseudoRouter_,
+      containerHeight_: containerHeight_
+    }), _el$5, _co$2);
+    $9HbP8$runHydrationEvents();
+    return _el$;
+  })();
 }
 $9HbP8$delegateEvents(["click"]);
 
@@ -3360,6 +3355,34 @@ let $f86ba724282f6690$export$44dad306455dddf;
   DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($f86ba724282f6690$export$44dad306455dddf || ($f86ba724282f6690$export$44dad306455dddf = {}));
+
+/** @jsxImportSource solid-js */
+
+function $2449872a62a75a20$export$ebdc3711f7e02ccd(what_to_watch) {
+  const [width, setWidth] = $9HbP8$createSignal();
+  const resizeObserver = new ResizeObserver($9HbP8$catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const width = records[j].borderBoxSize?.[0]?.inlineSize ?? what_to_watch.getBoundingClientRect().width;
+      setWidth(width);
+    }
+  }));
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $9HbP8$observer).onexists(what_to_watch, ({
+    element: element
+  }) => requestAnimationFrame($9HbP8$catchify(() => {
+    const current_size = what_to_watch.getBoundingClientRect().width;
+    if (current_size)
+      // If element has size, set signal to that. ResizeObserver only triggers when the content is visible in some cases, but it might already have a size. This reduces size filter expanding animation jank in chrome.
+      setWidth(current_size);
+    resizeObserver.observe(element);
+  })));
+  $9HbP8$onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
+  return width;
+}
 var $081752ca508a876f$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<svg xmlns=http://www.w3.org/2000/svg width=21 height=20 viewBox="0 0 21 20"fill=none><path fill-rule=evenodd d="M9.563 3.438c-3.107 0-5.625 2.518-5.625 5.625s2.518 5.625 5.625 5.625 5.625-2.518 5.625-5.625-2.518-5.625-5.625-5.625zm-7.5 5.625a7.5 7.5 0 1 1 15 0c0 1.733-.588 3.329-1.575 4.599l3.176 3.176a.94.94 0 0 1 0 1.326.94.94 0 0 1-1.326 0l-3.176-3.176a7.47 7.47 0 0 1-4.599 1.575 7.5 7.5 0 0 1-7.5-7.5z"fill=#0f0f0f>`);
 function $081752ca508a876f$export$f7658c347b037c3f(props = {}) {
   return (() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.7.6",
+  "version": "4.7.8",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,9 +236,9 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.4.1",
-    "@depict-ai/types": "^5.4.0",
-    "@depict-ai/utilishared": "^2.4.0",
+    "@depict-ai/plp-styling": "^4.4.3",
+    "@depict-ai/types": "^5.4.2",
+    "@depict-ai/utilishared": "^2.4.3",
     "solid-js": "^1.8.12"
   },
   "type": "module",

package/server/ES10/index.cjs

@@ -104,7 +104,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.6";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.8";
 function $d6d51b09cb2116a6$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -908,38 +908,6 @@ function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   }).remove);
   return signal[0];
 }
-
-/** @jsxImportSource solid-js */
-
-function $c387d7f1d9fb66c0$export$ebdc3711f7e02ccd(what_to_watch) {
-  const [width, setWidth] = $3hooq$solidjs.createSignal();
-  const resizeObserver = new ResizeObserver($3hooq$depictaiutilishared.catchify(records => {
-    for (let j = 0; j < records.length; j++) {
-      var _records$j$borderBoxS, _records$j$borderBoxS2, _records$j$borderBoxS3;
-      const width = (_records$j$borderBoxS = (_records$j$borderBoxS2 = records[j].borderBoxSize) === null || _records$j$borderBoxS2 === void 0 ? void 0 : (_records$j$borderBoxS3 = _records$j$borderBoxS2[0]) === null || _records$j$borderBoxS3 === void 0 ? void 0 : _records$j$borderBoxS3.inlineSize) !== null && _records$j$borderBoxS !== void 0 ? _records$j$borderBoxS : what_to_watch.getBoundingClientRect().width;
-      setWidth(width);
-    }
-  }));
-  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
-  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
-  const disconnect = (0, $3hooq$depictaiutilishared.observer).onexists(what_to_watch, _ref => {
-    let {
-      element: element
-    } = _ref;
-    return requestAnimationFrame($3hooq$depictaiutilishared.catchify(() => {
-      const current_size = what_to_watch.getBoundingClientRect().width;
-      if (current_size)
-        // If element has size, set signal to that. ResizeObserver only triggers when the content is visible in some cases, but it might already have a size. This reduces size filter expanding animation jank in chrome.
-        setWidth(current_size);
-      resizeObserver.observe(element);
-    }));
-  });
-  $3hooq$solidjs.onCleanup(() => {
-    resizeObserver.disconnect();
-    disconnect();
-  });
-  return width;
-}
 function $a7f7d416e6f61504$export$89c6019e4baa40b1(props) {
   const style = $3hooq$solidjs.createMemo(() => {
     const {
@@ -1078,9 +1046,10 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   });
   // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
   // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
-  const executeWhenIdleBatched = fn => {
+  const executeWhenIdleBatched = (fn, isSizesUpdate) => {
     if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
-    if ($3hooq$solidjs.untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately
+    if ((!isSizesUpdate || !sizeSetFastPath) && $3hooq$solidjs.untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately (improves lighthouse metrics)
+    // unless we're just a `sizes` update after the initial sizes setting (this optimisation makes the looks animation a lot smoother on low-cpu devices)
     const existingStack = listingContext === null || listingContext === void 0 ? void 0 : listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol];
     if (existingStack) return existingStack.add(fn);
     const newStack = new Set([fn]);
@@ -1165,10 +1134,11 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
     // This greatly improves performance when loading (more) products
     // See https://depictaiworkspace.slack.com/archives/C05NJ0K3WRL/p1698220617663139
     timeoutSet = true; // Important to set timeoutSet before the call to executeWhenIdleBatched since if this is an important image executeWhenIdleBatched will execute fn immediately
-    executeWhenIdleBatched(handler);
+    executeWhenIdleBatched(handler, true);
   });
+  const dontLoadImageYet = $3hooq$solidjs.createMemo(() => !props.size() || !hasSetSize()); // Moving this condition into a memo saves us from re-setting src and srcset (expensive) if just props.size changes
   $3hooq$solidjs.createEffect(() => {
-    if (!props.size() || !hasSetSize()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
+    if (dontLoadImageYet()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
     Object.assign(img, src_options());
     // Add to DOM once decoded to not require/block any paints before image has completed loading and avoid showing broken image symbol
     // We can do this because there has to be a container around us giving us a size
@@ -1184,7 +1154,7 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
     img.decode().catch(e => $3hooq$depictaiutilishared.dwarn("Failed to decode image", e, img)) // Display the image also if loading failed so webdev can debug and doesn't get "no image"
     .then(async () => {
       // Also wait with inserting image (i.e. paint) until browser is idle
-      await new Promise(r => executeWhenIdleBatched(r));
+      await new Promise(r => executeWhenIdleBatched(r, false));
       if (gotCleanedUp) return;
       setHasDecoded(true);
       hasDecodedFastPath = true;
@@ -1461,7 +1431,7 @@ var $dfa95866b27a2a53$var$_tmpl$ = ["<div", ' style="position:absolute;width:10p
 let $dfa95866b27a2a53$var$cachedValue;
 async function $dfa95866b27a2a53$export$7b9a0e99f0aeb2f3() {
   if ($dfa95866b27a2a53$var$cachedValue != undefined) return $dfa95866b27a2a53$var$cachedValue;
-  return $dfa95866b27a2a53$var$cachedValue = await $dfa95866b27a2a53$var$checkIfIsAffectedByChromeBug326498383();
+  return $dfa95866b27a2a53$var$cachedValue = $dfa95866b27a2a53$var$checkIfIsAffectedByChromeBug326498383();
 }
 async function $dfa95866b27a2a53$var$checkIfIsAffectedByChromeBug326498383() {
   let isAffected = true;
@@ -1474,7 +1444,7 @@ async function $dfa95866b27a2a53$var$checkIfIsAffectedByChromeBug326498383() {
       setTimeout($3hooq$depictaiutilishared.catchify(() => {
         r();
         div.remove();
-      }), 200);
+      }), 500);
     });
     const {
       style: style
@@ -1507,7 +1477,7 @@ async function $dfa95866b27a2a53$var$checkIfIsAffectedByChromeBug326498383() {
   }
   return isAffected;
 }
-var $e0b3f1f332b6863b$var$_tmpl$ = ["<div", ' class="scroll-padding">', "</div>"];
+var $e0b3f1f332b6863b$var$_tmpl$ = ["<div", ' class="scroll-padding"><div class="', '" style="', '">', "</div></div>"];
 function $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae(_ref) {
   let {
     displays_: displays_,
@@ -1517,7 +1487,8 @@ function $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae(_ref) {
     animationDuration_: animationDuration_,
     supportsHover_: supportsHover_,
     priceFormatting_: priceFormatting_,
-    pseudoRouter_: pseudoRouter_
+    pseudoRouter_: pseudoRouter_,
+    containerHeight_: containerHeight_
   } = _ref;
   let isAffectedByChromeBug = false;
   // If the user requests the drawer to be expanded or not
@@ -1535,13 +1506,9 @@ function $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae(_ref) {
           return containerWidth_() || !displays_();
         },
         get children() {
-          return $3hooq$solidjsweb.ssr($e0b3f1f332b6863b$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrElement("div", $3hooq$solidjsweb.mergeProps({
-            get ["class"]() {
-              return "look-overlay ".concat(userWantsExpanded() ? "expanded" : "", " ").concat(!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : "");
-            }
-          }, () => displays_() && {
-            style: "--look-card-width:".concat(containerWidth_(), "px;--look-item-height:").concat(lookItemHeight() || 200, "px")
-          }), () => $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Index), {
+          return $3hooq$solidjsweb.ssr($e0b3f1f332b6863b$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "look-overlay ".concat(userWantsExpanded() ? "expanded" : "", " ").concat(!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""), $3hooq$solidjsweb.ssrStyle(displays_() &&
+          // The styling is written like this to eke out animation smoothness on low CPU devices, git blame for previous, more readable versions.
+          "--look-card-width:".concat(containerWidth_(), "px;--look-card-height:").concat(containerHeight_(), "px;--look-item-height:").concat(lookItemHeight() || 200, "px")), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Index), {
             get each() {
               return displays_() || Array.from({
                 length: 4
@@ -1564,7 +1531,7 @@ function $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae(_ref) {
                 })
               });
             }
-          })), false));
+          })));
         }
       });
     }
@@ -1590,7 +1557,7 @@ function $e0b3f1f332b6863b$var$scrollingFunctionForChrome(element, targetScrollY
   // Bootstrap our animation - it will get called right before next frame shall be rendered.
   requestAnimationFrame(step);
 }
-var $47e3c3102c78121b$var$_tmpl$ = ["<div", ' class="', '"></div>'];
+var $47e3c3102c78121b$var$_tmpl$ = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
 function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
   let {
     display_: display_,
@@ -1601,12 +1568,13 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
     priceFormatting_: priceFormatting_,
     pseudoRouter_: pseudoRouter_
   } = _ref;
+  let container;
   const useWantsExpandedSignal_ = $3hooq$solidjs.createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $3e17e871e9d0911d$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
-  const container = $3hooq$solidjsweb.ssr($47e3c3102c78121b$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "look-card ".concat(!display_() ? "placeholder" : ""));
-  const containerWidth_ = $c387d7f1d9fb66c0$export$ebdc3711f7e02ccd(container);
+  const [containerWidth_, setContainerWidth] = $3hooq$solidjs.createSignal();
+  const [containerHeight_, setContainerHeight] = $3hooq$solidjs.createSignal();
   const clickHandler = $3hooq$depictaiutilishared.catchify(_ref2 => {
     let {
       target: target
@@ -1628,7 +1596,7 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
   }));
   // Close us if another look expands
   $3hooq$solidjs.createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
-  $3hooq$solidjsweb.insert(container, () => [$3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+  return $3hooq$solidjsweb.ssr($47e3c3102c78121b$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "look-card ".concat(!display_ ? "placeholder" : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {
       return display_();
     },
@@ -1647,7 +1615,7 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
         autoAdjustAspectRatio: true
       });
     }
-  }), $3hooq$solidjsweb.createComponent((0, $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae), {
+  })), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae), {
     displays_: () => {
       var _display_2;
       return (_display_2 = display_()) === null || _display_2 === void 0 ? void 0 : _display_2.displays;
@@ -1658,9 +1626,9 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
     supportsHover_: supportsHover_,
     FavoriteButton_: FavoriteButton_,
     priceFormatting_: priceFormatting_,
-    pseudoRouter_: pseudoRouter_
-  })]);
-  return container;
+    pseudoRouter_: pseudoRouter_,
+    containerHeight_: containerHeight_
+  })));
 }
 
 /**
@@ -3103,6 +3071,38 @@ let $c95c6dd9e93acd82$export$44dad306455dddf;
   DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($c95c6dd9e93acd82$export$44dad306455dddf || ($c95c6dd9e93acd82$export$44dad306455dddf = {}));
+
+/** @jsxImportSource solid-js */
+
+function $c387d7f1d9fb66c0$export$ebdc3711f7e02ccd(what_to_watch) {
+  const [width, setWidth] = $3hooq$solidjs.createSignal();
+  const resizeObserver = new ResizeObserver($3hooq$depictaiutilishared.catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      var _records$j$borderBoxS, _records$j$borderBoxS2, _records$j$borderBoxS3;
+      const width = (_records$j$borderBoxS = (_records$j$borderBoxS2 = records[j].borderBoxSize) === null || _records$j$borderBoxS2 === void 0 ? void 0 : (_records$j$borderBoxS3 = _records$j$borderBoxS2[0]) === null || _records$j$borderBoxS3 === void 0 ? void 0 : _records$j$borderBoxS3.inlineSize) !== null && _records$j$borderBoxS !== void 0 ? _records$j$borderBoxS : what_to_watch.getBoundingClientRect().width;
+      setWidth(width);
+    }
+  }));
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $3hooq$depictaiutilishared.observer).onexists(what_to_watch, _ref => {
+    let {
+      element: element
+    } = _ref;
+    return requestAnimationFrame($3hooq$depictaiutilishared.catchify(() => {
+      const current_size = what_to_watch.getBoundingClientRect().width;
+      if (current_size)
+        // If element has size, set signal to that. ResizeObserver only triggers when the content is visible in some cases, but it might already have a size. This reduces size filter expanding animation jank in chrome.
+        setWidth(current_size);
+      resizeObserver.observe(element);
+    }));
+  });
+  $3hooq$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
+  return width;
+}
 var $34934309832515dc$var$_tmpl$ = '<path fill-rule="evenodd" d="M9.563 3.438c-3.107 0-5.625 2.518-5.625 5.625s2.518 5.625 5.625 5.625 5.625-2.518 5.625-5.625-2.518-5.625-5.625-5.625zm-7.5 5.625a7.5 7.5 0 1 1 15 0c0 1.733-.588 3.329-1.575 4.599l3.176 3.176a.94.94 0 0 1 0 1.326.94.94 0 0 1-1.326 0l-3.176-3.176a7.47 7.47 0 0 1-4.599 1.575 7.5 7.5 0 0 1-7.5-7.5z" fill="#0f0f0f"></path>';
 function $34934309832515dc$export$f7658c347b037c3f() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/server/ES10/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.7.6";
+export const version = "4.7.8";
 /**
  * Just like `useExpandingContainer` except that the children can be reactive solid-js signals, basically solid's JSX.Element instead of our JSX.Element
  */
@@ -185,10 +185,6 @@ export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlac
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
 export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
-/**
- * Returns accessor with the size of the provided element, including padding and border (I think)
- */
-export function make_accurate_width_accessor(what_to_watch: HTMLElement): import("solid-js").Accessor<number | undefined>;
 /**
  * A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
  * If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
@@ -515,6 +511,10 @@ export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGEleme
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
  */
 export const modalVersionSymbol: unique symbol;
+/**
+ * Returns accessor with the size of the provided element, including padding and border (I think)
+ */
+export function make_accurate_width_accessor(what_to_watch: HTMLElement): import("solid-js").Accessor<number | undefined>;
 /**
  * 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
@@ -902,7 +902,7 @@ export function LookCard({
   expandedLooksSignal_: Signal<Set<symbol>>;
   priceFormatting_: Accessor<plp_shared_i18n["price_formatting_"]>;
   pseudoRouter_: PseudoRouter;
-}): HTMLDivElement;
+}): JSX.Element;
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
  */