@depict-ai/ui 3.0.19 → 3.0.21

package/ES10/index.cjs

@@ -83,7 +83,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.19";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.21";
 const $9d19451330d04c3c$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $9d19451330d04c3c$export$8be2714ec7f169ee() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -6327,7 +6327,8 @@ function $e03dec587b6e91e3$export$83fd5de5504a7a67(_ref) {
       of_: of_
     },
     get_scroll_position_ = () => scrollY,
-    listen_to_scroll_on_: listen_to_scroll_on_
+    listen_to_scroll_on_: listen_to_scroll_on_,
+    velocity_too_fast_ = 1.5
   } = _ref;
   if (0, $52FdA$solidjsweb.isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $52FdA$solidjs.createSignal(0);
@@ -6335,6 +6336,7 @@ function $e03dec587b6e91e3$export$83fd5de5504a7a67(_ref) {
   const [count_to_show, set_count_to_show] = $52FdA$solidjs.createSignal("");
   const [permitted_to_show, set_permitted_to_show] = $52FdA$solidjs.createSignal(false); // due to scroll speed
   const [show_triggered, set_show_triggered] = $52FdA$solidjs.createSignal(false); // signal to just switch between true/false to trigger a new animation which will persist the indicator
+  const [times_too_fast, set_times_too_fast] = $52FdA$solidjs.createSignal(0);
   const modified_price_formatting_ = $52FdA$solidjs.createMemo(() => ({
     ...price_formatting_(),
     places_after_comma_: 0
@@ -6344,25 +6346,27 @@ function $e03dec587b6e91e3$export$83fd5de5504a7a67(_ref) {
   let last_pos_time = +new Date();
   let last_pos = get_scroll_position_();
   let unpermit_when_possible = false;
-  let times_too_fast = 0;
   const handle_scrollpos_change = () => {
     if (animation) set_show_triggered(prev => !prev); // make sure that once we've decided to show the indicator it doesn't disappear before we stop scrolling
     const distance_travelled = Math.abs(get_scroll_position_() - last_pos);
     const now = +new Date();
     const age_of_distance = now - last_pos_time;
     const velocity = distance_travelled / age_of_distance; // pixels per millisecond
-    if (velocity > 1.5) {
-      times_too_fast++;
-      setTimeout(() => times_too_fast--, 1000);
+    if (velocity > velocity_too_fast_) {
+      set_times_too_fast(prev => prev + 1);
+      setTimeout(() => set_times_too_fast(prev => prev - 1), 1000);
     }
-    if (times_too_fast > 10) {
-      set_permitted_to_show(true);
-      unpermit_when_possible = false;
-    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
     last_pos = get_scroll_position_();
   };
   $1689794f03ba2554$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
+  $52FdA$solidjs.createComputed(() => {
+    // We need to set this reactively to ensure that it's forbidden to show even when times_too_fast has tapered off after a few seconds, see https://github.com/depict-org/depict/pull/82
+    if (times_too_fast() > 10) {
+      set_permitted_to_show(true);
+      unpermit_when_possible = false;
+    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
+  });
   $52FdA$solidjs.createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -7259,8 +7263,10 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
                           // Put scroll status into slider container, so it's centered relatively to the products
                           const rendered_scroll_status = ConfiguredScrollStatus({
                             get_scroll_position_: () => insert_here.scrollLeft,
-                            listen_to_scroll_on_: insert_here
+                            listen_to_scroll_on_: insert_here,
+                            velocity_too_fast_: 3 // Require twice as hard scrolling to show ScrollStatus in slider since it's easier to scroll fast there
                           });
+
                           const non_solid_nodes = [...container.childNodes];
                           // We have to use `insert` over Element.append, because ConfiguredScrollStatus is in an ErrorBoundary and therefore returns a function. `insert` will wipe all children, therefore save them first and then tell insert that the element should contain these elements + whatever ScrollStatus returns
                           $52FdA$solidjsweb.insert(container, $52FdA$solidjs.createMemo(() => [...non_solid_nodes, rendered_scroll_status]));

package/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "3.0.19";
+export const version = "3.0.21";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize

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 = "3.0.19";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "3.0.21";
 const $ca6ab5f08bd28bca$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -6254,7 +6254,8 @@ function $b69740fc6de9f17e$export$83fd5de5504a7a67(_ref) {
       of_: of_
     },
     get_scroll_position_ = () => scrollY,
-    listen_to_scroll_on_: listen_to_scroll_on_
+    listen_to_scroll_on_: listen_to_scroll_on_,
+    velocity_too_fast_ = 1.5
   } = _ref;
   if (0, $8tj43$isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $8tj43$createSignal(0);
@@ -6262,6 +6263,7 @@ function $b69740fc6de9f17e$export$83fd5de5504a7a67(_ref) {
   const [count_to_show, set_count_to_show] = $8tj43$createSignal("");
   const [permitted_to_show, set_permitted_to_show] = $8tj43$createSignal(false); // due to scroll speed
   const [show_triggered, set_show_triggered] = $8tj43$createSignal(false); // signal to just switch between true/false to trigger a new animation which will persist the indicator
+  const [times_too_fast, set_times_too_fast] = $8tj43$createSignal(0);
   const modified_price_formatting_ = $8tj43$createMemo(() => ({
     ...price_formatting_(),
     places_after_comma_: 0
@@ -6271,25 +6273,27 @@ function $b69740fc6de9f17e$export$83fd5de5504a7a67(_ref) {
   let last_pos_time = +new Date();
   let last_pos = get_scroll_position_();
   let unpermit_when_possible = false;
-  let times_too_fast = 0;
   const handle_scrollpos_change = () => {
     if (animation) set_show_triggered(prev => !prev); // make sure that once we've decided to show the indicator it doesn't disappear before we stop scrolling
     const distance_travelled = Math.abs(get_scroll_position_() - last_pos);
     const now = +new Date();
     const age_of_distance = now - last_pos_time;
     const velocity = distance_travelled / age_of_distance; // pixels per millisecond
-    if (velocity > 1.5) {
-      times_too_fast++;
-      setTimeout(() => times_too_fast--, 1000);
+    if (velocity > velocity_too_fast_) {
+      set_times_too_fast(prev => prev + 1);
+      setTimeout(() => set_times_too_fast(prev => prev - 1), 1000);
     }
-    if (times_too_fast > 10) {
-      set_permitted_to_show(true);
-      unpermit_when_possible = false;
-    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
     last_pos = get_scroll_position_();
   };
   $33e7d1906c93db7d$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
+  $8tj43$createComputed(() => {
+    // We need to set this reactively to ensure that it's forbidden to show even when times_too_fast has tapered off after a few seconds, see https://github.com/depict-org/depict/pull/82
+    if (times_too_fast() > 10) {
+      set_permitted_to_show(true);
+      unpermit_when_possible = false;
+    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
+  });
   $8tj43$createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -7186,8 +7190,10 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
                           // Put scroll status into slider container, so it's centered relatively to the products
                           const rendered_scroll_status = ConfiguredScrollStatus({
                             get_scroll_position_: () => insert_here.scrollLeft,
-                            listen_to_scroll_on_: insert_here
+                            listen_to_scroll_on_: insert_here,
+                            velocity_too_fast_: 3 // Require twice as hard scrolling to show ScrollStatus in slider since it's easier to scroll fast there
                           });
+
                           const non_solid_nodes = [...container.childNodes];
                           // We have to use `insert` over Element.append, because ConfiguredScrollStatus is in an ErrorBoundary and therefore returns a function. `insert` will wipe all children, therefore save them first and then tell insert that the element should contain these elements + whatever ScrollStatus returns
                           $8tj43$insert(container, $8tj43$createMemo(() => [...non_solid_nodes, rendered_scroll_status]));

package/README.md

@@ -9,4 +9,4 @@ Breaking changes:
 - 1.3.0 moved `depict-filter-sort-mobile-modal-container` from being a class to being an id
 - 1.4.0 Added `brand_` translation string to Locale.
 - 2.0.0 Made `enable_content_search` `true` by default. Redesigned filter counts.
-- 3.0.15 (first `latest` tagged release of version 3): Please see this [migration guide](https://docs.depict.ai/other-guides/sdk-migration-v2-v3)
+- 3.0.19 (first `latest` tagged release of version 3): Please see this [migration guide](https://docs.depict.ai/other-guides/sdk-migration-v2-v3)

package/latest/index.cjs

@@ -77,7 +77,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.19";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.21";
 const $0f313083912e447a$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
@@ -5918,7 +5918,8 @@ function $401aee5f33dca9e2$export$83fd5de5504a7a67({
     of_: of_
   },
   get_scroll_position_ = () => scrollY,
-  listen_to_scroll_on_: listen_to_scroll_on_
+  listen_to_scroll_on_: listen_to_scroll_on_,
+  velocity_too_fast_ = 1.5
 }) {
   if (0, $gVhhF$solidjsweb.isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $gVhhF$solidjs.createSignal(0);
@@ -5926,6 +5927,7 @@ function $401aee5f33dca9e2$export$83fd5de5504a7a67({
   const [count_to_show, set_count_to_show] = $gVhhF$solidjs.createSignal("");
   const [permitted_to_show, set_permitted_to_show] = $gVhhF$solidjs.createSignal(false); // due to scroll speed
   const [show_triggered, set_show_triggered] = $gVhhF$solidjs.createSignal(false); // signal to just switch between true/false to trigger a new animation which will persist the indicator
+  const [times_too_fast, set_times_too_fast] = $gVhhF$solidjs.createSignal(0);
   const modified_price_formatting_ = $gVhhF$solidjs.createMemo(() => ({
     ...price_formatting_(),
     places_after_comma_: 0
@@ -5935,25 +5937,27 @@ function $401aee5f33dca9e2$export$83fd5de5504a7a67({
   let last_pos_time = +new Date();
   let last_pos = get_scroll_position_();
   let unpermit_when_possible = false;
-  let times_too_fast = 0;
   const handle_scrollpos_change = () => {
     if (animation) set_show_triggered(prev => !prev); // make sure that once we've decided to show the indicator it doesn't disappear before we stop scrolling
     const distance_travelled = Math.abs(get_scroll_position_() - last_pos);
     const now = +new Date();
     const age_of_distance = now - last_pos_time;
     const velocity = distance_travelled / age_of_distance; // pixels per millisecond
-    if (velocity > 1.5) {
-      times_too_fast++;
-      setTimeout(() => times_too_fast--, 1000);
+    if (velocity > velocity_too_fast_) {
+      set_times_too_fast(prev => prev + 1);
+      setTimeout(() => set_times_too_fast(prev => prev - 1), 1000);
     }
-    if (times_too_fast > 10) {
-      set_permitted_to_show(true);
-      unpermit_when_possible = false;
-    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
     last_pos = get_scroll_position_();
   };
   $76b6ac05693f5c71$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
+  $gVhhF$solidjs.createComputed(() => {
+    // We need to set this reactively to ensure that it's forbidden to show even when times_too_fast has tapered off after a few seconds, see https://github.com/depict-org/depict/pull/82
+    if (times_too_fast() > 10) {
+      set_permitted_to_show(true);
+      unpermit_when_possible = false;
+    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
+  });
   $gVhhF$solidjs.createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -6815,8 +6819,10 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                           // Put scroll status into slider container, so it's centered relatively to the products
                           const rendered_scroll_status = ConfiguredScrollStatus({
                             get_scroll_position_: () => insert_here.scrollLeft,
-                            listen_to_scroll_on_: insert_here
+                            listen_to_scroll_on_: insert_here,
+                            velocity_too_fast_: 3 // Require twice as hard scrolling to show ScrollStatus in slider since it's easier to scroll fast there
                           });
+
                           const non_solid_nodes = [...container.childNodes];
                           // We have to use `insert` over Element.append, because ConfiguredScrollStatus is in an ErrorBoundary and therefore returns a function. `insert` will wipe all children, therefore save them first and then tell insert that the element should contain these elements + whatever ScrollStatus returns
                           $gVhhF$solidjsweb.insert(container, $gVhhF$solidjs.createMemo(() => [...non_solid_nodes, rendered_scroll_status]));

package/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "3.0.19";
+export const version = "3.0.21";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize

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 = "3.0.19";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.21";
 const $fbbadcb080ad1d4a$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
@@ -5848,7 +5848,8 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
     of_: of_
   },
   get_scroll_position_ = () => scrollY,
-  listen_to_scroll_on_: listen_to_scroll_on_
+  listen_to_scroll_on_: listen_to_scroll_on_,
+  velocity_too_fast_ = 1.5
 }) {
   if (0, $9HbP8$isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $9HbP8$createSignal(0);
@@ -5856,6 +5857,7 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
   const [count_to_show, set_count_to_show] = $9HbP8$createSignal("");
   const [permitted_to_show, set_permitted_to_show] = $9HbP8$createSignal(false); // due to scroll speed
   const [show_triggered, set_show_triggered] = $9HbP8$createSignal(false); // signal to just switch between true/false to trigger a new animation which will persist the indicator
+  const [times_too_fast, set_times_too_fast] = $9HbP8$createSignal(0);
   const modified_price_formatting_ = $9HbP8$createMemo(() => ({
     ...price_formatting_(),
     places_after_comma_: 0
@@ -5865,25 +5867,27 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
   let last_pos_time = +new Date();
   let last_pos = get_scroll_position_();
   let unpermit_when_possible = false;
-  let times_too_fast = 0;
   const handle_scrollpos_change = () => {
     if (animation) set_show_triggered(prev => !prev); // make sure that once we've decided to show the indicator it doesn't disappear before we stop scrolling
     const distance_travelled = Math.abs(get_scroll_position_() - last_pos);
     const now = +new Date();
     const age_of_distance = now - last_pos_time;
     const velocity = distance_travelled / age_of_distance; // pixels per millisecond
-    if (velocity > 1.5) {
-      times_too_fast++;
-      setTimeout(() => times_too_fast--, 1000);
+    if (velocity > velocity_too_fast_) {
+      set_times_too_fast(prev => prev + 1);
+      setTimeout(() => set_times_too_fast(prev => prev - 1), 1000);
     }
-    if (times_too_fast > 10) {
-      set_permitted_to_show(true);
-      unpermit_when_possible = false;
-    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
     last_pos = get_scroll_position_();
   };
   $8f9120a1ca151e6a$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
+  $9HbP8$createComputed(() => {
+    // We need to set this reactively to ensure that it's forbidden to show even when times_too_fast has tapered off after a few seconds, see https://github.com/depict-org/depict/pull/82
+    if (times_too_fast() > 10) {
+      set_permitted_to_show(true);
+      unpermit_when_possible = false;
+    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
+  });
   $9HbP8$createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -6745,8 +6749,10 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
                           // Put scroll status into slider container, so it's centered relatively to the products
                           const rendered_scroll_status = ConfiguredScrollStatus({
                             get_scroll_position_: () => insert_here.scrollLeft,
-                            listen_to_scroll_on_: insert_here
+                            listen_to_scroll_on_: insert_here,
+                            velocity_too_fast_: 3 // Require twice as hard scrolling to show ScrollStatus in slider since it's easier to scroll fast there
                           });
+
                           const non_solid_nodes = [...container.childNodes];
                           // We have to use `insert` over Element.append, because ConfiguredScrollStatus is in an ErrorBoundary and therefore returns a function. `insert` will wipe all children, therefore save them first and then tell insert that the element should contain these elements + whatever ScrollStatus returns
                           $9HbP8$insert(container, $9HbP8$createMemo(() => [...non_solid_nodes, rendered_scroll_status]));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "3.0.19",
+  "version": "3.0.21",
   "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": "^2.0.4",
+    "@depict-ai/plp-styling": "^2.0.6",
     "@depict-ai/types": "^5.0.3",
-    "@depict-ai/utilishared": "^2.0.7",
+    "@depict-ai/utilishared": "^2.0.8",
     "solid-js": "^1.8.1"
   },
   "type": "module",

package/server/ES10/index.cjs

@@ -83,7 +83,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.19";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.21";
 const $9d19451330d04c3c$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
 function $9d19451330d04c3c$export$8be2714ec7f169ee() {
   var _$escape2, _$escape3;
@@ -5242,7 +5242,8 @@ function $e03dec587b6e91e3$export$83fd5de5504a7a67(_ref) {
       of_: of_
     },
     get_scroll_position_ = () => scrollY,
-    listen_to_scroll_on_: listen_to_scroll_on_
+    listen_to_scroll_on_: listen_to_scroll_on_,
+    velocity_too_fast_ = 1.5
   } = _ref;
   if (0, $3hooq$solidjsweb.isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $3hooq$solidjs.createSignal(0);
@@ -5250,6 +5251,7 @@ function $e03dec587b6e91e3$export$83fd5de5504a7a67(_ref) {
   const [count_to_show, set_count_to_show] = $3hooq$solidjs.createSignal("");
   const [permitted_to_show, set_permitted_to_show] = $3hooq$solidjs.createSignal(false); // due to scroll speed
   const [show_triggered, set_show_triggered] = $3hooq$solidjs.createSignal(false); // signal to just switch between true/false to trigger a new animation which will persist the indicator
+  const [times_too_fast, set_times_too_fast] = $3hooq$solidjs.createSignal(0);
   const modified_price_formatting_ = $3hooq$solidjs.createMemo(() => ({
     ...price_formatting_(),
     places_after_comma_: 0
@@ -5259,25 +5261,27 @@ function $e03dec587b6e91e3$export$83fd5de5504a7a67(_ref) {
   let last_pos_time = +new Date();
   let last_pos = get_scroll_position_();
   let unpermit_when_possible = false;
-  let times_too_fast = 0;
   const handle_scrollpos_change = () => {
     if (animation) set_show_triggered(prev => !prev); // make sure that once we've decided to show the indicator it doesn't disappear before we stop scrolling
     const distance_travelled = Math.abs(get_scroll_position_() - last_pos);
     const now = +new Date();
     const age_of_distance = now - last_pos_time;
     const velocity = distance_travelled / age_of_distance; // pixels per millisecond
-    if (velocity > 1.5) {
-      times_too_fast++;
-      setTimeout(() => times_too_fast--, 1000);
+    if (velocity > velocity_too_fast_) {
+      set_times_too_fast(prev => prev + 1);
+      setTimeout(() => set_times_too_fast(prev => prev - 1), 1000);
     }
-    if (times_too_fast > 10) {
-      set_permitted_to_show(true);
-      unpermit_when_possible = false;
-    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
     last_pos = get_scroll_position_();
   };
   $1689794f03ba2554$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
+  $3hooq$solidjs.createComputed(() => {
+    // We need to set this reactively to ensure that it's forbidden to show even when times_too_fast has tapered off after a few seconds, see https://github.com/depict-org/depict/pull/82
+    if (times_too_fast() > 10) {
+      set_permitted_to_show(true);
+      unpermit_when_possible = false;
+    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
+  });
   $3hooq$solidjs.createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -6102,8 +6106,10 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
                         // Put scroll status into slider container, so it's centered relatively to the products
                         const rendered_scroll_status = ConfiguredScrollStatus({
                           get_scroll_position_: () => insert_here.scrollLeft,
-                          listen_to_scroll_on_: insert_here
+                          listen_to_scroll_on_: insert_here,
+                          velocity_too_fast_: 3 // Require twice as hard scrolling to show ScrollStatus in slider since it's easier to scroll fast there
                         });
+
                         const non_solid_nodes = [...container.childNodes];
                         // We have to use `insert` over Element.append, because ConfiguredScrollStatus is in an ErrorBoundary and therefore returns a function. `insert` will wipe all children, therefore save them first and then tell insert that the element should contain these elements + whatever ScrollStatus returns
                         $3hooq$solidjsweb.insert(container, $3hooq$solidjs.createMemo(() => [...non_solid_nodes, rendered_scroll_status]));

package/server/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "3.0.19";
+export const version = "3.0.21";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize

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 = "3.0.19";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "3.0.21";
 const $ca6ab5f08bd28bca$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
 function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
   var _$escape2, _$escape3;
@@ -5169,7 +5169,8 @@ function $b69740fc6de9f17e$export$83fd5de5504a7a67(_ref) {
       of_: of_
     },
     get_scroll_position_ = () => scrollY,
-    listen_to_scroll_on_: listen_to_scroll_on_
+    listen_to_scroll_on_: listen_to_scroll_on_,
+    velocity_too_fast_ = 1.5
   } = _ref;
   if (0, $b8hua$isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $b8hua$createSignal(0);
@@ -5177,6 +5178,7 @@ function $b69740fc6de9f17e$export$83fd5de5504a7a67(_ref) {
   const [count_to_show, set_count_to_show] = $b8hua$createSignal("");
   const [permitted_to_show, set_permitted_to_show] = $b8hua$createSignal(false); // due to scroll speed
   const [show_triggered, set_show_triggered] = $b8hua$createSignal(false); // signal to just switch between true/false to trigger a new animation which will persist the indicator
+  const [times_too_fast, set_times_too_fast] = $b8hua$createSignal(0);
   const modified_price_formatting_ = $b8hua$createMemo(() => ({
     ...price_formatting_(),
     places_after_comma_: 0
@@ -5186,25 +5188,27 @@ function $b69740fc6de9f17e$export$83fd5de5504a7a67(_ref) {
   let last_pos_time = +new Date();
   let last_pos = get_scroll_position_();
   let unpermit_when_possible = false;
-  let times_too_fast = 0;
   const handle_scrollpos_change = () => {
     if (animation) set_show_triggered(prev => !prev); // make sure that once we've decided to show the indicator it doesn't disappear before we stop scrolling
     const distance_travelled = Math.abs(get_scroll_position_() - last_pos);
     const now = +new Date();
     const age_of_distance = now - last_pos_time;
     const velocity = distance_travelled / age_of_distance; // pixels per millisecond
-    if (velocity > 1.5) {
-      times_too_fast++;
-      setTimeout(() => times_too_fast--, 1000);
+    if (velocity > velocity_too_fast_) {
+      set_times_too_fast(prev => prev + 1);
+      setTimeout(() => set_times_too_fast(prev => prev - 1), 1000);
     }
-    if (times_too_fast > 10) {
-      set_permitted_to_show(true);
-      unpermit_when_possible = false;
-    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
     last_pos = get_scroll_position_();
   };
   $33e7d1906c93db7d$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
+  $b8hua$createComputed(() => {
+    // We need to set this reactively to ensure that it's forbidden to show even when times_too_fast has tapered off after a few seconds, see https://github.com/depict-org/depict/pull/82
+    if (times_too_fast() > 10) {
+      set_permitted_to_show(true);
+      unpermit_when_possible = false;
+    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
+  });
   $b8hua$createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -6029,8 +6033,10 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
                         // Put scroll status into slider container, so it's centered relatively to the products
                         const rendered_scroll_status = ConfiguredScrollStatus({
                           get_scroll_position_: () => insert_here.scrollLeft,
-                          listen_to_scroll_on_: insert_here
+                          listen_to_scroll_on_: insert_here,
+                          velocity_too_fast_: 3 // Require twice as hard scrolling to show ScrollStatus in slider since it's easier to scroll fast there
                         });
+
                         const non_solid_nodes = [...container.childNodes];
                         // We have to use `insert` over Element.append, because ConfiguredScrollStatus is in an ErrorBoundary and therefore returns a function. `insert` will wipe all children, therefore save them first and then tell insert that the element should contain these elements + whatever ScrollStatus returns
                         $b8hua$insert(container, $b8hua$createMemo(() => [...non_solid_nodes, rendered_scroll_status]));

package/server/latest/index.cjs

@@ -77,7 +77,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.19";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.21";
 const $0f313083912e447a$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
 function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
   return $5vyXB$solidjsweb.ssr($0f313083912e447a$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("width", $5vyXB$solidjsweb.escape(props.width_, true) ?? 14, false) + $5vyXB$solidjsweb.ssrAttribute("height", $5vyXB$solidjsweb.escape(props.height_, true) ?? 26, false));
@@ -4876,7 +4876,8 @@ function $401aee5f33dca9e2$export$83fd5de5504a7a67({
     of_: of_
   },
   get_scroll_position_ = () => scrollY,
-  listen_to_scroll_on_: listen_to_scroll_on_
+  listen_to_scroll_on_: listen_to_scroll_on_,
+  velocity_too_fast_ = 1.5
 }) {
   if (0, $5vyXB$solidjsweb.isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $5vyXB$solidjs.createSignal(0);
@@ -4884,6 +4885,7 @@ function $401aee5f33dca9e2$export$83fd5de5504a7a67({
   const [count_to_show, set_count_to_show] = $5vyXB$solidjs.createSignal("");
   const [permitted_to_show, set_permitted_to_show] = $5vyXB$solidjs.createSignal(false); // due to scroll speed
   const [show_triggered, set_show_triggered] = $5vyXB$solidjs.createSignal(false); // signal to just switch between true/false to trigger a new animation which will persist the indicator
+  const [times_too_fast, set_times_too_fast] = $5vyXB$solidjs.createSignal(0);
   const modified_price_formatting_ = $5vyXB$solidjs.createMemo(() => ({
     ...price_formatting_(),
     places_after_comma_: 0
@@ -4893,25 +4895,27 @@ function $401aee5f33dca9e2$export$83fd5de5504a7a67({
   let last_pos_time = +new Date();
   let last_pos = get_scroll_position_();
   let unpermit_when_possible = false;
-  let times_too_fast = 0;
   const handle_scrollpos_change = () => {
     if (animation) set_show_triggered(prev => !prev); // make sure that once we've decided to show the indicator it doesn't disappear before we stop scrolling
     const distance_travelled = Math.abs(get_scroll_position_() - last_pos);
     const now = +new Date();
     const age_of_distance = now - last_pos_time;
     const velocity = distance_travelled / age_of_distance; // pixels per millisecond
-    if (velocity > 1.5) {
-      times_too_fast++;
-      setTimeout(() => times_too_fast--, 1000);
+    if (velocity > velocity_too_fast_) {
+      set_times_too_fast(prev => prev + 1);
+      setTimeout(() => set_times_too_fast(prev => prev - 1), 1000);
     }
-    if (times_too_fast > 10) {
-      set_permitted_to_show(true);
-      unpermit_when_possible = false;
-    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
     last_pos = get_scroll_position_();
   };
   $76b6ac05693f5c71$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
+  $5vyXB$solidjs.createComputed(() => {
+    // We need to set this reactively to ensure that it's forbidden to show even when times_too_fast has tapered off after a few seconds, see https://github.com/depict-org/depict/pull/82
+    if (times_too_fast() > 10) {
+      set_permitted_to_show(true);
+      unpermit_when_possible = false;
+    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
+  });
   $5vyXB$solidjs.createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -5701,8 +5705,10 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                         // Put scroll status into slider container, so it's centered relatively to the products
                         const rendered_scroll_status = ConfiguredScrollStatus({
                           get_scroll_position_: () => insert_here.scrollLeft,
-                          listen_to_scroll_on_: insert_here
+                          listen_to_scroll_on_: insert_here,
+                          velocity_too_fast_: 3 // Require twice as hard scrolling to show ScrollStatus in slider since it's easier to scroll fast there
                         });
+
                         const non_solid_nodes = [...container.childNodes];
                         // We have to use `insert` over Element.append, because ConfiguredScrollStatus is in an ErrorBoundary and therefore returns a function. `insert` will wipe all children, therefore save them first and then tell insert that the element should contain these elements + whatever ScrollStatus returns
                         $5vyXB$solidjsweb.insert(container, $5vyXB$solidjs.createMemo(() => [...non_solid_nodes, rendered_scroll_status]));

package/server/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "3.0.19";
+export const version = "3.0.21";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize

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 = "3.0.19";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.21";
 const $fbbadcb080ad1d4a$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
 function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
   return $i7OB2$ssr($fbbadcb080ad1d4a$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("width", $i7OB2$escape(props.width_, true) ?? 14, false) + $i7OB2$ssrAttribute("height", $i7OB2$escape(props.height_, true) ?? 26, false));
@@ -4806,7 +4806,8 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
     of_: of_
   },
   get_scroll_position_ = () => scrollY,
-  listen_to_scroll_on_: listen_to_scroll_on_
+  listen_to_scroll_on_: listen_to_scroll_on_,
+  velocity_too_fast_ = 1.5
 }) {
   if (0, $i7OB2$isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $i7OB2$createSignal(0);
@@ -4814,6 +4815,7 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
   const [count_to_show, set_count_to_show] = $i7OB2$createSignal("");
   const [permitted_to_show, set_permitted_to_show] = $i7OB2$createSignal(false); // due to scroll speed
   const [show_triggered, set_show_triggered] = $i7OB2$createSignal(false); // signal to just switch between true/false to trigger a new animation which will persist the indicator
+  const [times_too_fast, set_times_too_fast] = $i7OB2$createSignal(0);
   const modified_price_formatting_ = $i7OB2$createMemo(() => ({
     ...price_formatting_(),
     places_after_comma_: 0
@@ -4823,25 +4825,27 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
   let last_pos_time = +new Date();
   let last_pos = get_scroll_position_();
   let unpermit_when_possible = false;
-  let times_too_fast = 0;
   const handle_scrollpos_change = () => {
     if (animation) set_show_triggered(prev => !prev); // make sure that once we've decided to show the indicator it doesn't disappear before we stop scrolling
     const distance_travelled = Math.abs(get_scroll_position_() - last_pos);
     const now = +new Date();
     const age_of_distance = now - last_pos_time;
     const velocity = distance_travelled / age_of_distance; // pixels per millisecond
-    if (velocity > 1.5) {
-      times_too_fast++;
-      setTimeout(() => times_too_fast--, 1000);
+    if (velocity > velocity_too_fast_) {
+      set_times_too_fast(prev => prev + 1);
+      setTimeout(() => set_times_too_fast(prev => prev - 1), 1000);
     }
-    if (times_too_fast > 10) {
-      set_permitted_to_show(true);
-      unpermit_when_possible = false;
-    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
     last_pos = get_scroll_position_();
   };
   $8f9120a1ca151e6a$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
+  $i7OB2$createComputed(() => {
+    // We need to set this reactively to ensure that it's forbidden to show even when times_too_fast has tapered off after a few seconds, see https://github.com/depict-org/depict/pull/82
+    if (times_too_fast() > 10) {
+      set_permitted_to_show(true);
+      unpermit_when_possible = false;
+    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
+  });
   $i7OB2$createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -5631,8 +5635,10 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
                         // Put scroll status into slider container, so it's centered relatively to the products
                         const rendered_scroll_status = ConfiguredScrollStatus({
                           get_scroll_position_: () => insert_here.scrollLeft,
-                          listen_to_scroll_on_: insert_here
+                          listen_to_scroll_on_: insert_here,
+                          velocity_too_fast_: 3 // Require twice as hard scrolling to show ScrollStatus in slider since it's easier to scroll fast there
                         });
+
                         const non_solid_nodes = [...container.childNodes];
                         // We have to use `insert` over Element.append, because ConfiguredScrollStatus is in an ErrorBoundary and therefore returns a function. `insert` will wipe all children, therefore save them first and then tell insert that the element should contain these elements + whatever ScrollStatus returns
                         $i7OB2$insert(container, $i7OB2$createMemo(() => [...non_solid_nodes, rendered_scroll_status]));