@depict-ai/ui 4.7.8 → 4.7.10

package/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.8";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.10";
 function $d6d51b09cb2116a6$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -746,25 +746,27 @@ function $9d19451330d04c3c$export$8be2714ec7f169ee() {
 }
 var $ad8ec7729fffeb9c$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div>`),
   $ad8ec7729fffeb9c$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict-slider depict"><button aria-label="Scroll left"class="left d-navbutton"type=button></button><button aria-label="Scroll right"class="right d-navbutton"type=button></button><div class=sliding>`);
-function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
-  let {
-    children: children,
+const $ad8ec7729fffeb9c$var$SlidableContext = /*@__PURE__*/$52FdA$solidjs.createContext();
+function $ad8ec7729fffeb9c$export$6649caad96ef8870(props) {
+  const {
     slider_ref_: slider_ref_,
     faded_opacity_ = 0.7,
     mutation_plugins_ = [],
     disable_fading_: disable_fading_,
-    arrow_width_: arrow_width_,
-    arrow_height_: arrow_height_,
     snapAlign_: snapAlign_,
     fadingThreshold_ = 0.96
-  } = _ref;
+  } = props;
   const [hasHydrated, setHasHydrated] = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.createEffect(() => setHasHydrated(true));
   const MakeButton = () => (() => {
     var _el$ = $52FdA$solidjsweb.getNextElement($ad8ec7729fffeb9c$var$_tmpl$);
     $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
-      height_: arrow_height_,
-      width_: arrow_width_
+      get height_() {
+        return props.arrow_height_;
+      },
+      get width_() {
+        return props.arrow_width_;
+      }
     }));
     return _el$;
   })();
@@ -784,12 +786,13 @@ function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
           _el$5 = _el$4.nextSibling;
         $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent(MakeButton, {}));
         $52FdA$solidjsweb.insert(_el$4, $52FdA$solidjsweb.createComponent(MakeButton, {}));
-        $52FdA$solidjsweb.insert(_el$5, children);
+        $52FdA$solidjsweb.insert(_el$5, () => props.children);
         return _el$2;
       })();
     },
     get children() {
       return (() => {
+        const [intersectionEntries_, setIntersectionEntries] = $52FdA$solidjs.createSignal([]);
         const fading_plugin = disable_fading_ ? undefined : $52FdA$depictaiutilishared.slider_fading_factory({
           threshold_: fadingThreshold_,
           faded_opacity_: faded_opacity_
@@ -802,9 +805,17 @@ function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
           constructor_plugins: [$52FdA$depictaiutilishared.slider_snap_css(0, {
             align: snapAlign_
           }).constructor_plugin, ...(fading_plugin ? [fading_plugin.constructor_plugin] : [])],
-          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_]
+          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_, entries => setIntersectionEntries(entries)]
         });
-        $52FdA$solidjsweb.insert(slider.insert_here, children);
+        $52FdA$solidjsweb.insert(slider.insert_here, () => $52FdA$solidjsweb.createComponent($ad8ec7729fffeb9c$var$SlidableContext.Provider, {
+          value: {
+            slider_: slider,
+            intersectionEntries_: intersectionEntries_
+          },
+          get children() {
+            return props.children;
+          }
+        }));
         $52FdA$solidjs.onCleanup(() => slider.observer.disconnect());
         slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
         return slider.container;
@@ -812,6 +823,9 @@ function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
     }
   });
 }
+function $ad8ec7729fffeb9c$export$eaa625fb39439e37() {
+  return $52FdA$solidjs.useContext($ad8ec7729fffeb9c$var$SlidableContext);
+}
 var $236a257ee52e5414$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<h2 class=recs-title>`);
 function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
   let {
@@ -1791,6 +1805,7 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $3e17e871e9d0911d$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
+  const index = $b54645378dfc7280$export$e3faf4d95300054f();
   const [containerWidth_, setContainerWidth] = $52FdA$solidjs.createSignal();
   const [containerHeight_, setContainerHeight] = $52FdA$solidjs.createSignal();
   const clickHandler = $52FdA$depictaiutilishared.catchify(_ref2 => {
@@ -1801,6 +1816,7 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
       // When clicking outside the look, close it
       setUserWantsExpanded(false);
   });
+  const slidableInformation = $ad8ec7729fffeb9c$export$eaa625fb39439e37();
   addEventListener("click", clickHandler);
   $52FdA$solidjs.onCleanup(() => removeEventListener("click", clickHandler));
   $52FdA$solidjs.createEffect(() => setExpandedLooks(prev => {
@@ -1812,6 +1828,25 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
     } else prev.delete(us);
     return prev;
   }));
+  if (slidableInformation) {
+    const ourVisiblityInSlider = $52FdA$solidjs.createMemo(() => {
+      var _slidableInformation$, _slidableInformation$2;
+      const currentCard = index === null || index === void 0 ? void 0 : index();
+      if (isNaN(currentCard)) return;
+      slidableInformation === null || slidableInformation === void 0 || slidableInformation.intersectionEntries_();
+      return slidableInformation === null || slidableInformation === void 0 ? void 0 : (_slidableInformation$ = slidableInformation.slider_.intersecting_items_object) === null || _slidableInformation$ === void 0 ? void 0 : (_slidableInformation$2 = _slidableInformation$[currentCard]) === null || _slidableInformation$2 === void 0 ? void 0 : _slidableInformation$2.intersectionRatio;
+    });
+    $52FdA$solidjs.createEffect(prevVisibility => {
+      // Have memo -> effect setup for diffing, so we do as little work as possible in unrelated cards
+      // as number is safe because undefined and NaN are both not < 0.5
+      const visibility = ourVisiblityInSlider();
+      if (visibility < 0.6 && (isNaN(prevVisibility) || visibility - prevVisibility < 0))
+        // When sliding this card completely into the background, collapse it
+        // Don't collapse it if we're about to put it more into visibility, to fix what's described at the end of https://www.loom.com/share/8796209c68764b18a0d565010929f594
+        setUserWantsExpanded(false);
+      return visibility;
+    });
+  }
   // Close us if another look expands
   $52FdA$solidjs.createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   return (() => {

package/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.8";
+export const version = "4.7.10";
 /**
  * Just like `useExpandingContainer` except that the children can be reactive solid-js signals, basically solid's JSX.Element instead of our JSX.Element
  */
@@ -121,17 +121,7 @@ export function GenericSliderArrowButton(props?: {
   width_?: number;
   height_?: number;
 }): SVGElement;
-export function SlidableItems({
-  children,
-  slider_ref_,
-  faded_opacity_,
-  mutation_plugins_,
-  disable_fading_,
-  arrow_width_,
-  arrow_height_,
-  snapAlign_,
-  fadingThreshold_
-}: {
+export function SlidableItems(props: {
   children?: JSX.Element;
   slider_ref_?: (slider: Amazing_Slider) => any;
   faded_opacity_?: number;

package/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.7.8";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.7.10";
 function $8e8b179489080711$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -652,25 +652,27 @@ function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
 }
 var $002f09d00aac50b2$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div>`),
   $002f09d00aac50b2$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class="depict-slider depict"><button aria-label="Scroll left"class="left d-navbutton"type=button></button><button aria-label="Scroll right"class="right d-navbutton"type=button></button><div class=sliding>`);
-function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
-  let {
-    children: children,
+const $002f09d00aac50b2$var$SlidableContext = /*@__PURE__*/$8tj43$createContext();
+function $002f09d00aac50b2$export$6649caad96ef8870(props) {
+  const {
     slider_ref_: slider_ref_,
     faded_opacity_ = 0.7,
     mutation_plugins_ = [],
     disable_fading_: disable_fading_,
-    arrow_width_: arrow_width_,
-    arrow_height_: arrow_height_,
     snapAlign_: snapAlign_,
     fadingThreshold_ = 0.96
-  } = _ref;
+  } = props;
   const [hasHydrated, setHasHydrated] = $8tj43$createSignal(false);
   $8tj43$createEffect(() => setHasHydrated(true));
   const MakeButton = () => (() => {
     var _el$ = $8tj43$getNextElement($002f09d00aac50b2$var$_tmpl$);
     $8tj43$insert(_el$, $8tj43$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {
-      height_: arrow_height_,
-      width_: arrow_width_
+      get height_() {
+        return props.arrow_height_;
+      },
+      get width_() {
+        return props.arrow_width_;
+      }
     }));
     return _el$;
   })();
@@ -690,12 +692,13 @@ function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
           _el$5 = _el$4.nextSibling;
         $8tj43$insert(_el$3, $8tj43$createComponent(MakeButton, {}));
         $8tj43$insert(_el$4, $8tj43$createComponent(MakeButton, {}));
-        $8tj43$insert(_el$5, children);
+        $8tj43$insert(_el$5, () => props.children);
         return _el$2;
       })();
     },
     get children() {
       return (() => {
+        const [intersectionEntries_, setIntersectionEntries] = $8tj43$createSignal([]);
         const fading_plugin = disable_fading_ ? undefined : $8tj43$slider_fading_factory({
           threshold_: fadingThreshold_,
           faded_opacity_: faded_opacity_
@@ -708,9 +711,17 @@ function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
           constructor_plugins: [$8tj43$slider_snap_css(0, {
             align: snapAlign_
           }).constructor_plugin, ...(fading_plugin ? [fading_plugin.constructor_plugin] : [])],
-          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_]
+          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_, entries => setIntersectionEntries(entries)]
         });
-        $8tj43$insert(slider.insert_here, children);
+        $8tj43$insert(slider.insert_here, () => $8tj43$createComponent($002f09d00aac50b2$var$SlidableContext.Provider, {
+          value: {
+            slider_: slider,
+            intersectionEntries_: intersectionEntries_
+          },
+          get children() {
+            return props.children;
+          }
+        }));
         $8tj43$onCleanup(() => slider.observer.disconnect());
         slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
         return slider.container;
@@ -718,6 +729,9 @@ function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
     }
   });
 }
+function $002f09d00aac50b2$export$eaa625fb39439e37() {
+  return $8tj43$useContext($002f09d00aac50b2$var$SlidableContext);
+}
 var $39ddb986053fb759$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<h2 class=recs-title>`);
 function $39ddb986053fb759$export$d41d19e89346fa2(_ref) {
   let {
@@ -1697,6 +1711,7 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $00a5b94f0c11efbb$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
+  const index = $1e69163caedaab4e$export$e3faf4d95300054f();
   const [containerWidth_, setContainerWidth] = $8tj43$createSignal();
   const [containerHeight_, setContainerHeight] = $8tj43$createSignal();
   const clickHandler = $8tj43$catchify(_ref2 => {
@@ -1707,6 +1722,7 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
       // When clicking outside the look, close it
       setUserWantsExpanded(false);
   });
+  const slidableInformation = $002f09d00aac50b2$export$eaa625fb39439e37();
   addEventListener("click", clickHandler);
   $8tj43$onCleanup(() => removeEventListener("click", clickHandler));
   $8tj43$createEffect(() => setExpandedLooks(prev => {
@@ -1718,6 +1734,25 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
     } else prev.delete(us);
     return prev;
   }));
+  if (slidableInformation) {
+    const ourVisiblityInSlider = $8tj43$createMemo(() => {
+      var _slidableInformation$, _slidableInformation$2;
+      const currentCard = index === null || index === void 0 ? void 0 : index();
+      if (isNaN(currentCard)) return;
+      slidableInformation === null || slidableInformation === void 0 || slidableInformation.intersectionEntries_();
+      return slidableInformation === null || slidableInformation === void 0 ? void 0 : (_slidableInformation$ = slidableInformation.slider_.intersecting_items_object) === null || _slidableInformation$ === void 0 ? void 0 : (_slidableInformation$2 = _slidableInformation$[currentCard]) === null || _slidableInformation$2 === void 0 ? void 0 : _slidableInformation$2.intersectionRatio;
+    });
+    $8tj43$createEffect(prevVisibility => {
+      // Have memo -> effect setup for diffing, so we do as little work as possible in unrelated cards
+      // as number is safe because undefined and NaN are both not < 0.5
+      const visibility = ourVisiblityInSlider();
+      if (visibility < 0.6 && (isNaN(prevVisibility) || visibility - prevVisibility < 0))
+        // When sliding this card completely into the background, collapse it
+        // Don't collapse it if we're about to put it more into visibility, to fix what's described at the end of https://www.loom.com/share/8796209c68764b18a0d565010929f594
+        setUserWantsExpanded(false);
+      return visibility;
+    });
+  }
   // Close us if another look expands
   $8tj43$createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   return (() => {

package/latest/index.cjs

@@ -98,7 +98,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.7.8";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.10";
 function $4b455f60dadde8b8$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -701,24 +701,27 @@ function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
 }
 var $a0e53f99354809d9$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
   $a0e53f99354809d9$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict-slider depict"><button aria-label="Scroll left"class="left d-navbutton"type=button></button><button aria-label="Scroll right"class="right d-navbutton"type=button></button><div class=sliding>`);
-function $a0e53f99354809d9$export$6649caad96ef8870({
-  children: children,
-  slider_ref_: slider_ref_,
-  faded_opacity_ = 0.7,
-  mutation_plugins_ = [],
-  disable_fading_: disable_fading_,
-  arrow_width_: arrow_width_,
-  arrow_height_: arrow_height_,
-  snapAlign_: snapAlign_,
-  fadingThreshold_ = 0.96
-}) {
+const $a0e53f99354809d9$var$SlidableContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
+function $a0e53f99354809d9$export$6649caad96ef8870(props) {
+  const {
+    slider_ref_: slider_ref_,
+    faded_opacity_ = 0.7,
+    mutation_plugins_ = [],
+    disable_fading_: disable_fading_,
+    snapAlign_: snapAlign_,
+    fadingThreshold_ = 0.96
+  } = props;
   const [hasHydrated, setHasHydrated] = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.createEffect(() => setHasHydrated(true));
   const MakeButton = () => (() => {
     var _el$ = $gVhhF$solidjsweb.getNextElement($a0e53f99354809d9$var$_tmpl$);
     $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
-      height_: arrow_height_,
-      width_: arrow_width_
+      get height_() {
+        return props.arrow_height_;
+      },
+      get width_() {
+        return props.arrow_width_;
+      }
     }));
     return _el$;
   })();
@@ -738,12 +741,13 @@ function $a0e53f99354809d9$export$6649caad96ef8870({
           _el$5 = _el$4.nextSibling;
         $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent(MakeButton, {}));
         $gVhhF$solidjsweb.insert(_el$4, $gVhhF$solidjsweb.createComponent(MakeButton, {}));
-        $gVhhF$solidjsweb.insert(_el$5, children);
+        $gVhhF$solidjsweb.insert(_el$5, () => props.children);
         return _el$2;
       })();
     },
     get children() {
       return (() => {
+        const [intersectionEntries_, setIntersectionEntries] = $gVhhF$solidjs.createSignal([]);
         const fading_plugin = disable_fading_ ? undefined : $gVhhF$depictaiutilishared.slider_fading_factory({
           threshold_: fadingThreshold_,
           faded_opacity_: faded_opacity_
@@ -756,9 +760,17 @@ function $a0e53f99354809d9$export$6649caad96ef8870({
           constructor_plugins: [$gVhhF$depictaiutilishared.slider_snap_css(0, {
             align: snapAlign_
           }).constructor_plugin, ...(fading_plugin ? [fading_plugin.constructor_plugin] : [])],
-          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_]
+          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_, entries => setIntersectionEntries(entries)]
         });
-        $gVhhF$solidjsweb.insert(slider.insert_here, children);
+        $gVhhF$solidjsweb.insert(slider.insert_here, () => $gVhhF$solidjsweb.createComponent($a0e53f99354809d9$var$SlidableContext.Provider, {
+          value: {
+            slider_: slider,
+            intersectionEntries_: intersectionEntries_
+          },
+          get children() {
+            return props.children;
+          }
+        }));
         $gVhhF$solidjs.onCleanup(() => slider.observer.disconnect());
         slider_ref_?.(slider);
         return slider.container;
@@ -766,6 +778,9 @@ function $a0e53f99354809d9$export$6649caad96ef8870({
     }
   });
 }
+function $a0e53f99354809d9$export$eaa625fb39439e37() {
+  return $gVhhF$solidjs.useContext($a0e53f99354809d9$var$SlidableContext);
+}
 var $363ce4d1d71041aa$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<h2 class=recs-title>`);
 function $363ce4d1d71041aa$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
@@ -1705,6 +1720,7 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $b54e6192d0caa293$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
+  const index = $129b9b9c010039d0$export$e3faf4d95300054f();
   const [containerWidth_, setContainerWidth] = $gVhhF$solidjs.createSignal();
   const [containerHeight_, setContainerHeight] = $gVhhF$solidjs.createSignal();
   const clickHandler = $gVhhF$depictaiutilishared.catchify(({
@@ -1714,6 +1730,7 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
       // When clicking outside the look, close it
       setUserWantsExpanded(false);
   });
+  const slidableInformation = $a0e53f99354809d9$export$eaa625fb39439e37();
   addEventListener("click", clickHandler);
   $gVhhF$solidjs.onCleanup(() => removeEventListener("click", clickHandler));
   $gVhhF$solidjs.createEffect(() => setExpandedLooks(prev => {
@@ -1725,6 +1742,24 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
     } else prev.delete(us);
     return prev;
   }));
+  if (slidableInformation) {
+    const ourVisiblityInSlider = $gVhhF$solidjs.createMemo(() => {
+      const currentCard = index?.();
+      if (isNaN(currentCard)) return;
+      slidableInformation?.intersectionEntries_();
+      return slidableInformation?.slider_.intersecting_items_object?.[currentCard]?.intersectionRatio;
+    });
+    $gVhhF$solidjs.createEffect(prevVisibility => {
+      // Have memo -> effect setup for diffing, so we do as little work as possible in unrelated cards
+      // as number is safe because undefined and NaN are both not < 0.5
+      const visibility = ourVisiblityInSlider();
+      if (visibility < 0.6 && (isNaN(prevVisibility) || visibility - prevVisibility < 0))
+        // When sliding this card completely into the background, collapse it
+        // Don't collapse it if we're about to put it more into visibility, to fix what's described at the end of https://www.loom.com/share/8796209c68764b18a0d565010929f594
+        setUserWantsExpanded(false);
+      return visibility;
+    });
+  }
   // Close us if another look expands
   $gVhhF$solidjs.createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   return (() => {

package/latest/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.8";
+export const version = "4.7.10";
 /**
  * Just like `useExpandingContainer` except that the children can be reactive solid-js signals, basically solid's JSX.Element instead of our JSX.Element
  */
@@ -121,17 +121,7 @@ export function GenericSliderArrowButton(props?: {
   width_?: number;
   height_?: number;
 }): SVGElement;
-export function SlidableItems({
-  children,
-  slider_ref_,
-  faded_opacity_,
-  mutation_plugins_,
-  disable_fading_,
-  arrow_width_,
-  arrow_height_,
-  snapAlign_,
-  fadingThreshold_
-}: {
+export function SlidableItems(props: {
   children?: JSX.Element;
   slider_ref_?: (slider: Amazing_Slider) => any;
   faded_opacity_?: number;

package/latest/index.js

@@ -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.8";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.7.10";
 function $24e27fab9c821b86$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -610,24 +610,27 @@ function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
 }
 var $f32e14878e75af51$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div>`),
   $f32e14878e75af51$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class="depict-slider depict"><button aria-label="Scroll left"class="left d-navbutton"type=button></button><button aria-label="Scroll right"class="right d-navbutton"type=button></button><div class=sliding>`);
-function $f32e14878e75af51$export$6649caad96ef8870({
-  children: children,
-  slider_ref_: slider_ref_,
-  faded_opacity_ = 0.7,
-  mutation_plugins_ = [],
-  disable_fading_: disable_fading_,
-  arrow_width_: arrow_width_,
-  arrow_height_: arrow_height_,
-  snapAlign_: snapAlign_,
-  fadingThreshold_ = 0.96
-}) {
+const $f32e14878e75af51$var$SlidableContext = /*@__PURE__*/$9HbP8$createContext();
+function $f32e14878e75af51$export$6649caad96ef8870(props) {
+  const {
+    slider_ref_: slider_ref_,
+    faded_opacity_ = 0.7,
+    mutation_plugins_ = [],
+    disable_fading_: disable_fading_,
+    snapAlign_: snapAlign_,
+    fadingThreshold_ = 0.96
+  } = props;
   const [hasHydrated, setHasHydrated] = $9HbP8$createSignal(false);
   $9HbP8$createEffect(() => setHasHydrated(true));
   const MakeButton = () => (() => {
     var _el$ = $9HbP8$getNextElement($f32e14878e75af51$var$_tmpl$);
     $9HbP8$insert(_el$, $9HbP8$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
-      height_: arrow_height_,
-      width_: arrow_width_
+      get height_() {
+        return props.arrow_height_;
+      },
+      get width_() {
+        return props.arrow_width_;
+      }
     }));
     return _el$;
   })();
@@ -647,12 +650,13 @@ function $f32e14878e75af51$export$6649caad96ef8870({
           _el$5 = _el$4.nextSibling;
         $9HbP8$insert(_el$3, $9HbP8$createComponent(MakeButton, {}));
         $9HbP8$insert(_el$4, $9HbP8$createComponent(MakeButton, {}));
-        $9HbP8$insert(_el$5, children);
+        $9HbP8$insert(_el$5, () => props.children);
         return _el$2;
       })();
     },
     get children() {
       return (() => {
+        const [intersectionEntries_, setIntersectionEntries] = $9HbP8$createSignal([]);
         const fading_plugin = disable_fading_ ? undefined : $9HbP8$slider_fading_factory({
           threshold_: fadingThreshold_,
           faded_opacity_: faded_opacity_
@@ -665,9 +669,17 @@ function $f32e14878e75af51$export$6649caad96ef8870({
           constructor_plugins: [$9HbP8$slider_snap_css(0, {
             align: snapAlign_
           }).constructor_plugin, ...(fading_plugin ? [fading_plugin.constructor_plugin] : [])],
-          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_]
+          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_, entries => setIntersectionEntries(entries)]
         });
-        $9HbP8$insert(slider.insert_here, children);
+        $9HbP8$insert(slider.insert_here, () => $9HbP8$createComponent($f32e14878e75af51$var$SlidableContext.Provider, {
+          value: {
+            slider_: slider,
+            intersectionEntries_: intersectionEntries_
+          },
+          get children() {
+            return props.children;
+          }
+        }));
         $9HbP8$onCleanup(() => slider.observer.disconnect());
         slider_ref_?.(slider);
         return slider.container;
@@ -675,6 +687,9 @@ function $f32e14878e75af51$export$6649caad96ef8870({
     }
   });
 }
+function $f32e14878e75af51$export$eaa625fb39439e37() {
+  return $9HbP8$useContext($f32e14878e75af51$var$SlidableContext);
+}
 var $c4492d24952ed731$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<h2 class=recs-title>`);
 function $c4492d24952ed731$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
@@ -1614,6 +1629,7 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $dc9262ef6f786812$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
+  const index = $b6440e72ed83671a$export$e3faf4d95300054f();
   const [containerWidth_, setContainerWidth] = $9HbP8$createSignal();
   const [containerHeight_, setContainerHeight] = $9HbP8$createSignal();
   const clickHandler = $9HbP8$catchify(({
@@ -1623,6 +1639,7 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
       // When clicking outside the look, close it
       setUserWantsExpanded(false);
   });
+  const slidableInformation = $f32e14878e75af51$export$eaa625fb39439e37();
   addEventListener("click", clickHandler);
   $9HbP8$onCleanup(() => removeEventListener("click", clickHandler));
   $9HbP8$createEffect(() => setExpandedLooks(prev => {
@@ -1634,6 +1651,24 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
     } else prev.delete(us);
     return prev;
   }));
+  if (slidableInformation) {
+    const ourVisiblityInSlider = $9HbP8$createMemo(() => {
+      const currentCard = index?.();
+      if (isNaN(currentCard)) return;
+      slidableInformation?.intersectionEntries_();
+      return slidableInformation?.slider_.intersecting_items_object?.[currentCard]?.intersectionRatio;
+    });
+    $9HbP8$createEffect(prevVisibility => {
+      // Have memo -> effect setup for diffing, so we do as little work as possible in unrelated cards
+      // as number is safe because undefined and NaN are both not < 0.5
+      const visibility = ourVisiblityInSlider();
+      if (visibility < 0.6 && (isNaN(prevVisibility) || visibility - prevVisibility < 0))
+        // When sliding this card completely into the background, collapse it
+        // Don't collapse it if we're about to put it more into visibility, to fix what's described at the end of https://www.loom.com/share/8796209c68764b18a0d565010929f594
+        setUserWantsExpanded(false);
+      return visibility;
+    });
+  }
   // Close us if another look expands
   $9HbP8$createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   return (() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.7.8",
+  "version": "4.7.10",
   "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,7 +236,7 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.4.3",
+    "@depict-ai/plp-styling": "^4.4.4",
     "@depict-ai/types": "^5.4.2",
     "@depict-ai/utilishared": "^2.4.3",
     "solid-js": "^1.8.12"

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.8";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.10";
 function $d6d51b09cb2116a6$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -687,23 +687,25 @@ function $9d19451330d04c3c$export$8be2714ec7f169ee() {
 }
 var $ad8ec7729fffeb9c$var$_tmpl$ = ["<div", ">", "</div>"],
   $ad8ec7729fffeb9c$var$_tmpl$2 = ["<div", ' class="depict-slider depict"><button aria-label="Scroll left" class="left d-navbutton" type="button">', '</button><button aria-label="Scroll right" class="right d-navbutton" type="button">', '</button><div class="sliding">', "</div></div>"];
-function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
-  let {
-    children: children,
+const $ad8ec7729fffeb9c$var$SlidableContext = /*@__PURE__*/$3hooq$solidjs.createContext();
+function $ad8ec7729fffeb9c$export$6649caad96ef8870(props) {
+  const {
     slider_ref_: slider_ref_,
     faded_opacity_ = 0.7,
     mutation_plugins_ = [],
     disable_fading_: disable_fading_,
-    arrow_width_: arrow_width_,
-    arrow_height_: arrow_height_,
     snapAlign_: snapAlign_,
     fadingThreshold_ = 0.96
-  } = _ref;
+  } = props;
   const [hasHydrated, setHasHydrated] = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.createEffect(() => setHasHydrated(true));
   const MakeButton = () => $3hooq$solidjsweb.ssr($ad8ec7729fffeb9c$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
-    height_: arrow_height_,
-    width_: arrow_width_
+    get height_() {
+      return props.arrow_height_;
+    },
+    get width_() {
+      return props.arrow_width_;
+    }
   })));
   // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
   // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
@@ -714,10 +716,11 @@ function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
       return hasHydrated() && !(0, $3hooq$solidjsweb.isServer);
     },
     get fallback() {
-      return $3hooq$solidjsweb.ssr($ad8ec7729fffeb9c$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(MakeButton, {})), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(MakeButton, {})), $3hooq$solidjsweb.escape(children));
+      return $3hooq$solidjsweb.ssr($ad8ec7729fffeb9c$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(MakeButton, {})), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(MakeButton, {})), $3hooq$solidjsweb.escape(props.children));
     },
     get children() {
       return (() => {
+        const [intersectionEntries_, setIntersectionEntries] = $3hooq$solidjs.createSignal([]);
         const fading_plugin = disable_fading_ ? undefined : $3hooq$depictaiutilishared.slider_fading_factory({
           threshold_: fadingThreshold_,
           faded_opacity_: faded_opacity_
@@ -730,9 +733,17 @@ function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
           constructor_plugins: [$3hooq$depictaiutilishared.slider_snap_css(0, {
             align: snapAlign_
           }).constructor_plugin, ...(fading_plugin ? [fading_plugin.constructor_plugin] : [])],
-          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_]
+          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_, entries => setIntersectionEntries(entries)]
         });
-        $3hooq$solidjsweb.insert(slider.insert_here, children);
+        $3hooq$solidjsweb.insert(slider.insert_here, () => $3hooq$solidjsweb.createComponent($ad8ec7729fffeb9c$var$SlidableContext.Provider, {
+          value: {
+            slider_: slider,
+            intersectionEntries_: intersectionEntries_
+          },
+          get children() {
+            return props.children;
+          }
+        }));
         $3hooq$solidjs.onCleanup(() => slider.observer.disconnect());
         slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
         return slider.container;
@@ -740,6 +751,9 @@ function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
     }
   });
 }
+function $ad8ec7729fffeb9c$export$eaa625fb39439e37() {
+  return $3hooq$solidjs.useContext($ad8ec7729fffeb9c$var$SlidableContext);
+}
 var $236a257ee52e5414$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
 function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
   let {
@@ -1573,6 +1587,7 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $3e17e871e9d0911d$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
+  const index = $b54645378dfc7280$export$e3faf4d95300054f();
   const [containerWidth_, setContainerWidth] = $3hooq$solidjs.createSignal();
   const [containerHeight_, setContainerHeight] = $3hooq$solidjs.createSignal();
   const clickHandler = $3hooq$depictaiutilishared.catchify(_ref2 => {
@@ -1583,6 +1598,7 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
       // When clicking outside the look, close it
       setUserWantsExpanded(false);
   });
+  const slidableInformation = $ad8ec7729fffeb9c$export$eaa625fb39439e37();
   addEventListener("click", clickHandler);
   $3hooq$solidjs.onCleanup(() => removeEventListener("click", clickHandler));
   $3hooq$solidjs.createEffect(() => setExpandedLooks(prev => {
@@ -1594,6 +1610,25 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
     } else prev.delete(us);
     return prev;
   }));
+  if (slidableInformation) {
+    const ourVisiblityInSlider = $3hooq$solidjs.createMemo(() => {
+      var _slidableInformation$, _slidableInformation$2;
+      const currentCard = index === null || index === void 0 ? void 0 : index();
+      if (isNaN(currentCard)) return;
+      slidableInformation === null || slidableInformation === void 0 || slidableInformation.intersectionEntries_();
+      return slidableInformation === null || slidableInformation === void 0 ? void 0 : (_slidableInformation$ = slidableInformation.slider_.intersecting_items_object) === null || _slidableInformation$ === void 0 ? void 0 : (_slidableInformation$2 = _slidableInformation$[currentCard]) === null || _slidableInformation$2 === void 0 ? void 0 : _slidableInformation$2.intersectionRatio;
+    });
+    $3hooq$solidjs.createEffect(prevVisibility => {
+      // Have memo -> effect setup for diffing, so we do as little work as possible in unrelated cards
+      // as number is safe because undefined and NaN are both not < 0.5
+      const visibility = ourVisiblityInSlider();
+      if (visibility < 0.6 && (isNaN(prevVisibility) || visibility - prevVisibility < 0))
+        // When sliding this card completely into the background, collapse it
+        // Don't collapse it if we're about to put it more into visibility, to fix what's described at the end of https://www.loom.com/share/8796209c68764b18a0d565010929f594
+        setUserWantsExpanded(false);
+      return visibility;
+    });
+  }
   // Close us if another look expands
   $3hooq$solidjs.createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   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), {

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.8";
+export const version = "4.7.10";
 /**
  * Just like `useExpandingContainer` except that the children can be reactive solid-js signals, basically solid's JSX.Element instead of our JSX.Element
  */
@@ -121,17 +121,7 @@ export function GenericSliderArrowButton(props?: {
   width_?: number;
   height_?: number;
 }): SVGElement;
-export function SlidableItems({
-  children,
-  slider_ref_,
-  faded_opacity_,
-  mutation_plugins_,
-  disable_fading_,
-  arrow_width_,
-  arrow_height_,
-  snapAlign_,
-  fadingThreshold_
-}: {
+export function SlidableItems(props: {
   children?: JSX.Element;
   slider_ref_?: (slider: Amazing_Slider) => any;
   faded_opacity_?: number;

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.7.8";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.7.10";
 function $8e8b179489080711$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -593,23 +593,25 @@ function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
 }
 var $002f09d00aac50b2$var$_tmpl$ = ["<div", ">", "</div>"],
   $002f09d00aac50b2$var$_tmpl$2 = ["<div", ' class="depict-slider depict"><button aria-label="Scroll left" class="left d-navbutton" type="button">', '</button><button aria-label="Scroll right" class="right d-navbutton" type="button">', '</button><div class="sliding">', "</div></div>"];
-function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
-  let {
-    children: children,
+const $002f09d00aac50b2$var$SlidableContext = /*@__PURE__*/$b8hua$createContext();
+function $002f09d00aac50b2$export$6649caad96ef8870(props) {
+  const {
     slider_ref_: slider_ref_,
     faded_opacity_ = 0.7,
     mutation_plugins_ = [],
     disable_fading_: disable_fading_,
-    arrow_width_: arrow_width_,
-    arrow_height_: arrow_height_,
     snapAlign_: snapAlign_,
     fadingThreshold_ = 0.96
-  } = _ref;
+  } = props;
   const [hasHydrated, setHasHydrated] = $b8hua$createSignal(false);
   $b8hua$createEffect(() => setHasHydrated(true));
   const MakeButton = () => $b8hua$ssr($002f09d00aac50b2$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {
-    height_: arrow_height_,
-    width_: arrow_width_
+    get height_() {
+      return props.arrow_height_;
+    },
+    get width_() {
+      return props.arrow_width_;
+    }
   })));
   // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
   // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
@@ -620,10 +622,11 @@ function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
       return hasHydrated() && !(0, $b8hua$isServer);
     },
     get fallback() {
-      return $b8hua$ssr($002f09d00aac50b2$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent(MakeButton, {})), $b8hua$escape($b8hua$createComponent(MakeButton, {})), $b8hua$escape(children));
+      return $b8hua$ssr($002f09d00aac50b2$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent(MakeButton, {})), $b8hua$escape($b8hua$createComponent(MakeButton, {})), $b8hua$escape(props.children));
     },
     get children() {
       return (() => {
+        const [intersectionEntries_, setIntersectionEntries] = $b8hua$createSignal([]);
         const fading_plugin = disable_fading_ ? undefined : $b8hua$slider_fading_factory({
           threshold_: fadingThreshold_,
           faded_opacity_: faded_opacity_
@@ -636,9 +639,17 @@ function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
           constructor_plugins: [$b8hua$slider_snap_css(0, {
             align: snapAlign_
           }).constructor_plugin, ...(fading_plugin ? [fading_plugin.constructor_plugin] : [])],
-          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_]
+          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_, entries => setIntersectionEntries(entries)]
         });
-        $b8hua$insert(slider.insert_here, children);
+        $b8hua$insert(slider.insert_here, () => $b8hua$createComponent($002f09d00aac50b2$var$SlidableContext.Provider, {
+          value: {
+            slider_: slider,
+            intersectionEntries_: intersectionEntries_
+          },
+          get children() {
+            return props.children;
+          }
+        }));
         $b8hua$onCleanup(() => slider.observer.disconnect());
         slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
         return slider.container;
@@ -646,6 +657,9 @@ function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
     }
   });
 }
+function $002f09d00aac50b2$export$eaa625fb39439e37() {
+  return $b8hua$useContext($002f09d00aac50b2$var$SlidableContext);
+}
 var $39ddb986053fb759$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
 function $39ddb986053fb759$export$d41d19e89346fa2(_ref) {
   let {
@@ -1479,6 +1493,7 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $00a5b94f0c11efbb$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
+  const index = $1e69163caedaab4e$export$e3faf4d95300054f();
   const [containerWidth_, setContainerWidth] = $b8hua$createSignal();
   const [containerHeight_, setContainerHeight] = $b8hua$createSignal();
   const clickHandler = $b8hua$catchify(_ref2 => {
@@ -1489,6 +1504,7 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
       // When clicking outside the look, close it
       setUserWantsExpanded(false);
   });
+  const slidableInformation = $002f09d00aac50b2$export$eaa625fb39439e37();
   addEventListener("click", clickHandler);
   $b8hua$onCleanup(() => removeEventListener("click", clickHandler));
   $b8hua$createEffect(() => setExpandedLooks(prev => {
@@ -1500,6 +1516,25 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
     } else prev.delete(us);
     return prev;
   }));
+  if (slidableInformation) {
+    const ourVisiblityInSlider = $b8hua$createMemo(() => {
+      var _slidableInformation$, _slidableInformation$2;
+      const currentCard = index === null || index === void 0 ? void 0 : index();
+      if (isNaN(currentCard)) return;
+      slidableInformation === null || slidableInformation === void 0 || slidableInformation.intersectionEntries_();
+      return slidableInformation === null || slidableInformation === void 0 ? void 0 : (_slidableInformation$ = slidableInformation.slider_.intersecting_items_object) === null || _slidableInformation$ === void 0 ? void 0 : (_slidableInformation$2 = _slidableInformation$[currentCard]) === null || _slidableInformation$2 === void 0 ? void 0 : _slidableInformation$2.intersectionRatio;
+    });
+    $b8hua$createEffect(prevVisibility => {
+      // Have memo -> effect setup for diffing, so we do as little work as possible in unrelated cards
+      // as number is safe because undefined and NaN are both not < 0.5
+      const visibility = ourVisiblityInSlider();
+      if (visibility < 0.6 && (isNaN(prevVisibility) || visibility - prevVisibility < 0))
+        // When sliding this card completely into the background, collapse it
+        // Don't collapse it if we're about to put it more into visibility, to fix what's described at the end of https://www.loom.com/share/8796209c68764b18a0d565010929f594
+        setUserWantsExpanded(false);
+      return visibility;
+    });
+  }
   // Close us if another look expands
   $b8hua$createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   return $b8hua$ssr($697d8713dc82b9ab$var$_tmpl$, $b8hua$ssrHydrationKey(), "look-card ".concat(!display_ ? "placeholder" : ""), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {

package/server/latest/index.cjs

@@ -98,7 +98,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.7.8";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.10";
 function $4b455f60dadde8b8$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -653,22 +653,25 @@ function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
 }
 var $a0e53f99354809d9$var$_tmpl$ = ["<div", ">", "</div>"],
   $a0e53f99354809d9$var$_tmpl$2 = ["<div", ' class="depict-slider depict"><button aria-label="Scroll left" class="left d-navbutton" type="button">', '</button><button aria-label="Scroll right" class="right d-navbutton" type="button">', '</button><div class="sliding">', "</div></div>"];
-function $a0e53f99354809d9$export$6649caad96ef8870({
-  children: children,
-  slider_ref_: slider_ref_,
-  faded_opacity_ = 0.7,
-  mutation_plugins_ = [],
-  disable_fading_: disable_fading_,
-  arrow_width_: arrow_width_,
-  arrow_height_: arrow_height_,
-  snapAlign_: snapAlign_,
-  fadingThreshold_ = 0.96
-}) {
+const $a0e53f99354809d9$var$SlidableContext = /*@__PURE__*/$5vyXB$solidjs.createContext();
+function $a0e53f99354809d9$export$6649caad96ef8870(props) {
+  const {
+    slider_ref_: slider_ref_,
+    faded_opacity_ = 0.7,
+    mutation_plugins_ = [],
+    disable_fading_: disable_fading_,
+    snapAlign_: snapAlign_,
+    fadingThreshold_ = 0.96
+  } = props;
   const [hasHydrated, setHasHydrated] = $5vyXB$solidjs.createSignal(false);
   $5vyXB$solidjs.createEffect(() => setHasHydrated(true));
   const MakeButton = () => $5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
-    height_: arrow_height_,
-    width_: arrow_width_
+    get height_() {
+      return props.arrow_height_;
+    },
+    get width_() {
+      return props.arrow_width_;
+    }
   })));
   // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
   // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
@@ -679,10 +682,11 @@ function $a0e53f99354809d9$export$6649caad96ef8870({
       return hasHydrated() && !(0, $5vyXB$solidjsweb.isServer);
     },
     get fallback() {
-      return $5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(MakeButton, {})), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(MakeButton, {})), $5vyXB$solidjsweb.escape(children));
+      return $5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(MakeButton, {})), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(MakeButton, {})), $5vyXB$solidjsweb.escape(props.children));
     },
     get children() {
       return (() => {
+        const [intersectionEntries_, setIntersectionEntries] = $5vyXB$solidjs.createSignal([]);
         const fading_plugin = disable_fading_ ? undefined : $5vyXB$depictaiutilishared.slider_fading_factory({
           threshold_: fadingThreshold_,
           faded_opacity_: faded_opacity_
@@ -695,9 +699,17 @@ function $a0e53f99354809d9$export$6649caad96ef8870({
           constructor_plugins: [$5vyXB$depictaiutilishared.slider_snap_css(0, {
             align: snapAlign_
           }).constructor_plugin, ...(fading_plugin ? [fading_plugin.constructor_plugin] : [])],
-          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_]
+          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_, entries => setIntersectionEntries(entries)]
         });
-        $5vyXB$solidjsweb.insert(slider.insert_here, children);
+        $5vyXB$solidjsweb.insert(slider.insert_here, () => $5vyXB$solidjsweb.createComponent($a0e53f99354809d9$var$SlidableContext.Provider, {
+          value: {
+            slider_: slider,
+            intersectionEntries_: intersectionEntries_
+          },
+          get children() {
+            return props.children;
+          }
+        }));
         $5vyXB$solidjs.onCleanup(() => slider.observer.disconnect());
         slider_ref_?.(slider);
         return slider.container;
@@ -705,6 +717,9 @@ function $a0e53f99354809d9$export$6649caad96ef8870({
     }
   });
 }
+function $a0e53f99354809d9$export$eaa625fb39439e37() {
+  return $5vyXB$solidjs.useContext($a0e53f99354809d9$var$SlidableContext);
+}
 var $363ce4d1d71041aa$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
 function $363ce4d1d71041aa$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
@@ -1499,6 +1514,7 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $b54e6192d0caa293$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
+  const index = $129b9b9c010039d0$export$e3faf4d95300054f();
   const [containerWidth_, setContainerWidth] = $5vyXB$solidjs.createSignal();
   const [containerHeight_, setContainerHeight] = $5vyXB$solidjs.createSignal();
   const clickHandler = $5vyXB$depictaiutilishared.catchify(({
@@ -1508,6 +1524,7 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
       // When clicking outside the look, close it
       setUserWantsExpanded(false);
   });
+  const slidableInformation = $a0e53f99354809d9$export$eaa625fb39439e37();
   addEventListener("click", clickHandler);
   $5vyXB$solidjs.onCleanup(() => removeEventListener("click", clickHandler));
   $5vyXB$solidjs.createEffect(() => setExpandedLooks(prev => {
@@ -1519,6 +1536,24 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
     } else prev.delete(us);
     return prev;
   }));
+  if (slidableInformation) {
+    const ourVisiblityInSlider = $5vyXB$solidjs.createMemo(() => {
+      const currentCard = index?.();
+      if (isNaN(currentCard)) return;
+      slidableInformation?.intersectionEntries_();
+      return slidableInformation?.slider_.intersecting_items_object?.[currentCard]?.intersectionRatio;
+    });
+    $5vyXB$solidjs.createEffect(prevVisibility => {
+      // Have memo -> effect setup for diffing, so we do as little work as possible in unrelated cards
+      // as number is safe because undefined and NaN are both not < 0.5
+      const visibility = ourVisiblityInSlider();
+      if (visibility < 0.6 && (isNaN(prevVisibility) || visibility - prevVisibility < 0))
+        // When sliding this card completely into the background, collapse it
+        // Don't collapse it if we're about to put it more into visibility, to fix what's described at the end of https://www.loom.com/share/8796209c68764b18a0d565010929f594
+        setUserWantsExpanded(false);
+      return visibility;
+    });
+  }
   // Close us if another look expands
   $5vyXB$solidjs.createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   return $5vyXB$solidjsweb.ssr($ad882bbe664dbd53$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `look-card ${!display_ ? "placeholder" : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {

package/server/latest/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.8";
+export const version = "4.7.10";
 /**
  * Just like `useExpandingContainer` except that the children can be reactive solid-js signals, basically solid's JSX.Element instead of our JSX.Element
  */
@@ -121,17 +121,7 @@ export function GenericSliderArrowButton(props?: {
   width_?: number;
   height_?: number;
 }): SVGElement;
-export function SlidableItems({
-  children,
-  slider_ref_,
-  faded_opacity_,
-  mutation_plugins_,
-  disable_fading_,
-  arrow_width_,
-  arrow_height_,
-  snapAlign_,
-  fadingThreshold_
-}: {
+export function SlidableItems(props: {
   children?: JSX.Element;
   slider_ref_?: (slider: Amazing_Slider) => any;
   faded_opacity_?: number;

package/server/latest/index.js

@@ -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.7.8";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.7.10";
 function $24e27fab9c821b86$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -562,22 +562,25 @@ function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
 }
 var $f32e14878e75af51$var$_tmpl$ = ["<div", ">", "</div>"],
   $f32e14878e75af51$var$_tmpl$2 = ["<div", ' class="depict-slider depict"><button aria-label="Scroll left" class="left d-navbutton" type="button">', '</button><button aria-label="Scroll right" class="right d-navbutton" type="button">', '</button><div class="sliding">', "</div></div>"];
-function $f32e14878e75af51$export$6649caad96ef8870({
-  children: children,
-  slider_ref_: slider_ref_,
-  faded_opacity_ = 0.7,
-  mutation_plugins_ = [],
-  disable_fading_: disable_fading_,
-  arrow_width_: arrow_width_,
-  arrow_height_: arrow_height_,
-  snapAlign_: snapAlign_,
-  fadingThreshold_ = 0.96
-}) {
+const $f32e14878e75af51$var$SlidableContext = /*@__PURE__*/$i7OB2$createContext();
+function $f32e14878e75af51$export$6649caad96ef8870(props) {
+  const {
+    slider_ref_: slider_ref_,
+    faded_opacity_ = 0.7,
+    mutation_plugins_ = [],
+    disable_fading_: disable_fading_,
+    snapAlign_: snapAlign_,
+    fadingThreshold_ = 0.96
+  } = props;
   const [hasHydrated, setHasHydrated] = $i7OB2$createSignal(false);
   $i7OB2$createEffect(() => setHasHydrated(true));
   const MakeButton = () => $i7OB2$ssr($f32e14878e75af51$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
-    height_: arrow_height_,
-    width_: arrow_width_
+    get height_() {
+      return props.arrow_height_;
+    },
+    get width_() {
+      return props.arrow_width_;
+    }
   })));
   // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
   // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
@@ -588,10 +591,11 @@ function $f32e14878e75af51$export$6649caad96ef8870({
       return hasHydrated() && !(0, $i7OB2$isServer);
     },
     get fallback() {
-      return $i7OB2$ssr($f32e14878e75af51$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent(MakeButton, {})), $i7OB2$escape($i7OB2$createComponent(MakeButton, {})), $i7OB2$escape(children));
+      return $i7OB2$ssr($f32e14878e75af51$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent(MakeButton, {})), $i7OB2$escape($i7OB2$createComponent(MakeButton, {})), $i7OB2$escape(props.children));
     },
     get children() {
       return (() => {
+        const [intersectionEntries_, setIntersectionEntries] = $i7OB2$createSignal([]);
         const fading_plugin = disable_fading_ ? undefined : $i7OB2$slider_fading_factory({
           threshold_: fadingThreshold_,
           faded_opacity_: faded_opacity_
@@ -604,9 +608,17 @@ function $f32e14878e75af51$export$6649caad96ef8870({
           constructor_plugins: [$i7OB2$slider_snap_css(0, {
             align: snapAlign_
           }).constructor_plugin, ...(fading_plugin ? [fading_plugin.constructor_plugin] : [])],
-          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_]
+          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_, entries => setIntersectionEntries(entries)]
         });
-        $i7OB2$insert(slider.insert_here, children);
+        $i7OB2$insert(slider.insert_here, () => $i7OB2$createComponent($f32e14878e75af51$var$SlidableContext.Provider, {
+          value: {
+            slider_: slider,
+            intersectionEntries_: intersectionEntries_
+          },
+          get children() {
+            return props.children;
+          }
+        }));
         $i7OB2$onCleanup(() => slider.observer.disconnect());
         slider_ref_?.(slider);
         return slider.container;
@@ -614,6 +626,9 @@ function $f32e14878e75af51$export$6649caad96ef8870({
     }
   });
 }
+function $f32e14878e75af51$export$eaa625fb39439e37() {
+  return $i7OB2$useContext($f32e14878e75af51$var$SlidableContext);
+}
 var $c4492d24952ed731$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
 function $c4492d24952ed731$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
@@ -1408,6 +1423,7 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $dc9262ef6f786812$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
+  const index = $b6440e72ed83671a$export$e3faf4d95300054f();
   const [containerWidth_, setContainerWidth] = $i7OB2$createSignal();
   const [containerHeight_, setContainerHeight] = $i7OB2$createSignal();
   const clickHandler = $i7OB2$catchify(({
@@ -1417,6 +1433,7 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
       // When clicking outside the look, close it
       setUserWantsExpanded(false);
   });
+  const slidableInformation = $f32e14878e75af51$export$eaa625fb39439e37();
   addEventListener("click", clickHandler);
   $i7OB2$onCleanup(() => removeEventListener("click", clickHandler));
   $i7OB2$createEffect(() => setExpandedLooks(prev => {
@@ -1428,6 +1445,24 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
     } else prev.delete(us);
     return prev;
   }));
+  if (slidableInformation) {
+    const ourVisiblityInSlider = $i7OB2$createMemo(() => {
+      const currentCard = index?.();
+      if (isNaN(currentCard)) return;
+      slidableInformation?.intersectionEntries_();
+      return slidableInformation?.slider_.intersecting_items_object?.[currentCard]?.intersectionRatio;
+    });
+    $i7OB2$createEffect(prevVisibility => {
+      // Have memo -> effect setup for diffing, so we do as little work as possible in unrelated cards
+      // as number is safe because undefined and NaN are both not < 0.5
+      const visibility = ourVisiblityInSlider();
+      if (visibility < 0.6 && (isNaN(prevVisibility) || visibility - prevVisibility < 0))
+        // When sliding this card completely into the background, collapse it
+        // Don't collapse it if we're about to put it more into visibility, to fix what's described at the end of https://www.loom.com/share/8796209c68764b18a0d565010929f594
+        setUserWantsExpanded(false);
+      return visibility;
+    });
+  }
   // Close us if another look expands
   $i7OB2$createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   return $i7OB2$ssr($28ee4f7db3cc44b8$var$_tmpl$, $i7OB2$ssrHydrationKey(), `look-card ${!display_ ? "placeholder" : ""}`, $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {