@depict-ai/ui 4.7.21 → 4.7.23

package/server/ES10/index.d.ts

@@ -1,5 +1,5 @@
-import { JSX, Accessor, Setter, Signal } from "solid-js";
-import { Display, useExpandingContainer, ColsAtSize, report, Amazing_Slider, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/ES10";
+import { Accessor, JSX, Setter, Signal } from "solid-js";
+import { Amazing_Slider, Display, useExpandingContainer, ColsAtSize, report, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/ES10";
 import { SearchFilter, SearchRequestV3, SortModel } from "@depict-ai/types/api/SearchRequestV3";
 import { ContentLink, SearchResponse, SearchFilter as _SearchFilter1 } from "@depict-ai/types/api/SearchResponse";
 import { Ancestors, ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
@@ -11,7 +11,34 @@ 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.21";
+export const version = "4.7.23";
+/**
+ * Returns if the current tab is visible
+ */
+export function useVisibilityState(): import("solid-js").Accessor<boolean>;
+/** @jsxImportSource solid-js */
+export function GenericSliderArrowButton(props?: {
+  width_?: number;
+  height_?: number;
+}): SVGElement;
+export function SlidableItems(props: {
+  children?: JSX.Element;
+  slider_ref_?: (slider: Amazing_Slider) => any;
+  faded_opacity_?: number;
+  disable_fading_?: boolean;
+  snapAlign_?: "start" | "end" | "center";
+  fadingThreshold_?: number;
+  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
+  arrow_width_?: number;
+  arrow_height_?: number;
+}): JSX.Element;
+/**
+ * Use this inside the children of a <SlidableItems> component to get the slider instance and a signal that contains the latest intersection obsrever entries (note they are accessible on the slider instance in a processed format already at the time this acessor updates)
+ */
+export function useSlidableInformation(): {
+  slider_: Amazing_Slider;
+  intersectionEntries_: Accessor<IntersectionObserverEntry[]>;
+} | undefined;
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -129,22 +156,6 @@ export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
  * When using insert_after_container, view more and view less buttons are not currently supported.
  */
 export function SolidLayoutWithProvidedElement(props: Omit<SolidLayoutOptions, "children" | "element_attributes">, container_element: HTMLDivElement, insert_after_container?: boolean, container_class?: string): JSX.Element;
-/** @jsxImportSource solid-js */
-export function GenericSliderArrowButton(props?: {
-  width_?: number;
-  height_?: number;
-}): SVGElement;
-export function SlidableItems(props: {
-  children?: JSX.Element;
-  slider_ref_?: (slider: Amazing_Slider) => any;
-  faded_opacity_?: number;
-  disable_fading_?: boolean;
-  snapAlign_?: "start" | "end" | "center";
-  fadingThreshold_?: number;
-  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
-  arrow_width_?: number;
-  arrow_height_?: number;
-}): JSX.Element;
 /**
  * Provider to wrap every listing (group of products) in
  * Used for example for deduplicating ResizeObservers for responsive images

package/server/ES10/index.js

@@ -1,6 +1,6 @@
-import { add_to_version_info as $b8hua$add_to_version_info, catchify as $b8hua$catchify, dlog as $b8hua$dlog, camelCasifyObject as $b8hua$camelCasifyObject, useExpandingContainer as $b8hua$useExpandingContainer, fetch_retry as $b8hua$fetch_retry, base_url as $b8hua$base_url, dwarn as $b8hua$dwarn, slider_fractional_factory as $b8hua$slider_fractional_factory, make_random_classname as $b8hua$make_random_classname, n_col_styling_with_dist as $b8hua$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $b8hua$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $b8hua$layout_get_total_rec_amount_for_row, layout_media_query_header as $b8hua$layout_media_query_header, report as $b8hua$report, slider_fading_factory as $b8hua$slider_fading_factory, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, observer as $b8hua$observer, javascript_media_query as $b8hua$javascript_media_query, queueMacroTask as $b8hua$queueMacroTask, findMostFrequentItem as $b8hua$findMostFrequentItem, standard_price_format as $b8hua$standard_price_format, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, deparallelize_no_drop as $b8hua$deparallelize_no_drop, ContainedImage as $b8hua$ContainedImage, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, use_href_accessor as $b8hua$use_href_accessor, get_session_id as $b8hua$get_session_id, add_version_query_params as $b8hua$add_version_query_params, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, snakeCasifyObject as $b8hua$snakeCasifyObject, make_url_with_query_params as $b8hua$make_url_with_query_params, sort_obj as $b8hua$sort_obj, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { isServer as $b8hua$isServer, createComponent as $b8hua$createComponent, insert as $b8hua$insert, ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, escape as $b8hua$escape, ssrStyle as $b8hua$ssrStyle, mergeProps as $b8hua$mergeProps, ssrElement as $b8hua$ssrElement, ssrClassList as $b8hua$ssrClassList, ssrAttribute as $b8hua$ssrAttribute, spread as $b8hua$spread, Dynamic as $b8hua$Dynamic } from "solid-js/web";
-import { createContext as $b8hua$createContext, createSignal as $b8hua$createSignal, createMemo as $b8hua$createMemo, createEffect as $b8hua$createEffect, onCleanup as $b8hua$onCleanup, untrack as $b8hua$untrack, useContext as $b8hua$useContext, For as $b8hua$For, getOwner as $b8hua$getOwner, createResource as $b8hua$createResource, runWithOwner as $b8hua$runWithOwner, Show as $b8hua$Show, mergeProps as $b8hua$mergeProps1, Suspense as $b8hua$Suspense, createRenderEffect as $b8hua$createRenderEffect, Index as $b8hua$Index, createRoot as $b8hua$createRoot, createUniqueId as $b8hua$createUniqueId, createComputed as $b8hua$createComputed, ErrorBoundary as $b8hua$ErrorBoundary, splitProps as $b8hua$splitProps, on as $b8hua$on, batch as $b8hua$batch, createSelector as $b8hua$createSelector, children as $b8hua$children, createReaction as $b8hua$createReaction, mapArray as $b8hua$mapArray } from "solid-js";
+import { add_to_version_info as $b8hua$add_to_version_info, slider_fading_factory as $b8hua$slider_fading_factory, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, catchify as $b8hua$catchify, dlog as $b8hua$dlog, camelCasifyObject as $b8hua$camelCasifyObject, useExpandingContainer as $b8hua$useExpandingContainer, fetch_retry as $b8hua$fetch_retry, base_url as $b8hua$base_url, dwarn as $b8hua$dwarn, slider_fractional_factory as $b8hua$slider_fractional_factory, make_random_classname as $b8hua$make_random_classname, n_col_styling_with_dist as $b8hua$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $b8hua$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $b8hua$layout_get_total_rec_amount_for_row, layout_media_query_header as $b8hua$layout_media_query_header, report as $b8hua$report, observer as $b8hua$observer, javascript_media_query as $b8hua$javascript_media_query, queueMacroTask as $b8hua$queueMacroTask, findMostFrequentItem as $b8hua$findMostFrequentItem, standard_price_format as $b8hua$standard_price_format, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, deparallelize_no_drop as $b8hua$deparallelize_no_drop, ContainedImage as $b8hua$ContainedImage, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, use_href_accessor as $b8hua$use_href_accessor, get_session_id as $b8hua$get_session_id, add_version_query_params as $b8hua$add_version_query_params, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, snakeCasifyObject as $b8hua$snakeCasifyObject, make_url_with_query_params as $b8hua$make_url_with_query_params, sort_obj as $b8hua$sort_obj, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { createSignal as $b8hua$createSignal, onCleanup as $b8hua$onCleanup, createContext as $b8hua$createContext, createEffect as $b8hua$createEffect, Show as $b8hua$Show, useContext as $b8hua$useContext, createMemo as $b8hua$createMemo, untrack as $b8hua$untrack, For as $b8hua$For, getOwner as $b8hua$getOwner, createResource as $b8hua$createResource, runWithOwner as $b8hua$runWithOwner, mergeProps as $b8hua$mergeProps1, Suspense as $b8hua$Suspense, createRenderEffect as $b8hua$createRenderEffect, Index as $b8hua$Index, createRoot as $b8hua$createRoot, createUniqueId as $b8hua$createUniqueId, createComputed as $b8hua$createComputed, ErrorBoundary as $b8hua$ErrorBoundary, splitProps as $b8hua$splitProps, on as $b8hua$on, batch as $b8hua$batch, createSelector as $b8hua$createSelector, children as $b8hua$children, createReaction as $b8hua$createReaction, mapArray as $b8hua$mapArray } from "solid-js";
+import { ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, escape as $b8hua$escape, createComponent as $b8hua$createComponent, isServer as $b8hua$isServer, insert as $b8hua$insert, ssrAttribute as $b8hua$ssrAttribute, ssrStyle as $b8hua$ssrStyle, mergeProps as $b8hua$mergeProps, ssrElement as $b8hua$ssrElement, ssrClassList as $b8hua$ssrClassList, spread as $b8hua$spread, Dynamic as $b8hua$Dynamic } from "solid-js/web";
 import $b8hua$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
 import { ListenableSet as $b8hua$ListenableSet, catchify as $b8hua$catchify1, use_href_accessor as $b8hua$use_href_accessor1, queueMacroTask as $b8hua$queueMacroTask1, report as $b8hua$report1 } from "@depict-ai/utilishared/ES10";
 import $b8hua$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
@@ -10,7 +10,90 @@ 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.21";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.7.23";
+function $a35e6f680c5bbc60$export$54299a3c81f5425() {
+  const d = document;
+  const [isVisible, setIsVisible] = $b8hua$createSignal(d.visibilityState !== "hidden");
+  const handleVisibilityChange = () => setIsVisible(d.visibilityState !== "hidden");
+  d.addEventListener("visibilitychange", handleVisibilityChange);
+  $b8hua$onCleanup(() => d.removeEventListener("visibilitychange", handleVisibilityChange));
+  return isVisible;
+}
+var $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;
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return $b8hua$ssr($ca6ab5f08bd28bca$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("width", (_$escape2 = $b8hua$escape(props.width_, true)) !== null && _$escape2 !== void 0 ? _$escape2 : 14, false) + $b8hua$ssrAttribute("height", (_$escape3 = $b8hua$escape(props.height_, true)) !== null && _$escape3 !== void 0 ? _$escape3 : 26, false));
+}
+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>"];
+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_,
+    snapAlign_: snapAlign_,
+    fadingThreshold_ = 0.96
+  } = 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), {
+    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
+  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
+  // Once we have hydrated, we construct and insert the actual slider
+  return $b8hua$createComponent((0, $b8hua$Show), {
+    get when() {
+      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(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_
+        });
+        const slider = new (0, $b8hua$Amazing_Slider)({
+          button_contents: {
+            left: [MakeButton()],
+            right: [MakeButton()]
+          },
+          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_, entries => setIntersectionEntries(entries)]
+        });
+        $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;
+      })();
+    }
+  });
+}
+function $002f09d00aac50b2$export$eaa625fb39439e37() {
+  return $b8hua$useContext($002f09d00aac50b2$var$SlidableContext);
+}
 
 /**
  * Gets product_id (the thing we key the rendering on) from a display
@@ -684,81 +767,6 @@ function $63f1f8dbcd07d3b0$export$445d8d3f5f706a40(props, container_element) {
   if (insert_after_container) container_element.after(style_element);
   return [container_element, view_more_button_container(), view_less_button_container(), style_element];
 }
-var $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;
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return $b8hua$ssr($ca6ab5f08bd28bca$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("width", (_$escape2 = $b8hua$escape(props.width_, true)) !== null && _$escape2 !== void 0 ? _$escape2 : 14, false) + $b8hua$ssrAttribute("height", (_$escape3 = $b8hua$escape(props.height_, true)) !== null && _$escape3 !== void 0 ? _$escape3 : 26, false));
-}
-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>"];
-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_,
-    snapAlign_: snapAlign_,
-    fadingThreshold_ = 0.96
-  } = 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), {
-    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
-  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
-  // Once we have hydrated, we construct and insert the actual slider
-  return $b8hua$createComponent((0, $b8hua$Show), {
-    get when() {
-      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(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_
-        });
-        const slider = new (0, $b8hua$Amazing_Slider)({
-          button_contents: {
-            left: [MakeButton()],
-            right: [MakeButton()]
-          },
-          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_, entries => setIntersectionEntries(entries)]
-        });
-        $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;
-      })();
-    }
-  });
-}
-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 {
@@ -1451,17 +1459,17 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
     }
   })), "<!--/-->"], true);
 }
-var $72017ebd8b9df947$var$_tmpl$ = ["<div", ' style="position:absolute;width:10px;height:10px;overflow:hidden"></div>'];
-let $72017ebd8b9df947$var$cachedValue;
-async function $72017ebd8b9df947$export$7b9a0e99f0aeb2f3() {
-  if ($72017ebd8b9df947$var$cachedValue != undefined) return $72017ebd8b9df947$var$cachedValue;
-  return $72017ebd8b9df947$var$cachedValue = $72017ebd8b9df947$var$checkIfIsAffectedByChromeBug326498383();
+var $c4103af154850e50$var$_tmpl$ = ["<div", ' style="position:absolute;width:10px;height:10px;overflow:hidden"></div>'];
+let $c4103af154850e50$var$cachedValue;
+async function $c4103af154850e50$export$7b9a0e99f0aeb2f3() {
+  if ($c4103af154850e50$var$cachedValue != undefined) return $c4103af154850e50$var$cachedValue;
+  return $c4103af154850e50$var$cachedValue = $c4103af154850e50$var$checkIfIsAffectedByChromeBug326498383();
 }
-async function $72017ebd8b9df947$var$checkIfIsAffectedByChromeBug326498383() {
+async function $c4103af154850e50$var$checkIfIsAffectedByChromeBug326498383() {
   let isAffected = true;
   let resolveTimeoutPromise;
   try {
-    const div = $b8hua$ssr($72017ebd8b9df947$var$_tmpl$, $b8hua$ssrHydrationKey());
+    const div = $b8hua$ssr($c4103af154850e50$var$_tmpl$, $b8hua$ssrHydrationKey());
     const waitAFrame = () => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
     const timeoutPromise = new Promise(r => {
       resolveTimeoutPromise = r;
@@ -1474,7 +1482,7 @@ async function $72017ebd8b9df947$var$checkIfIsAffectedByChromeBug326498383() {
       style: style
     } = div;
     // Just to get a long string
-    div.append($72017ebd8b9df947$export$7b9a0e99f0aeb2f3 + "");
+    div.append($c4103af154850e50$export$7b9a0e99f0aeb2f3 + "");
     document.documentElement.append(div);
     style.overflow = "auto";
     await waitAFrame();
@@ -1522,7 +1530,7 @@ function $4089a7972a508539$export$ebf0b1d4f90c09ae(_ref) {
   const textFadeInAnimationRunning = $b8hua$createSignal(false);
   const [getSecondPartAnimationRunning] = textFadeInAnimationRunning;
   const [userWantsExpanded, setUserWantsExpanded] = userWantsExpandedSignal_;
-  $72017ebd8b9df947$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
+  $c4103af154850e50$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
   return $b8hua$createComponent((0, $5441862cd2f5e111$export$e68cff63f76bd15b), {
     get children() {
       return $b8hua$createComponent((0, $b8hua$Show), {
@@ -13626,4 +13634,4 @@ function $8821a19349c36651$export$e2bf8ce7779e827e(props) {
   }, "Entire CategoryPage failed");
 }
 $b8hua$add_to_version_info("ui", (0, $8db9a15135765c11$export$83d89fbfd8236492));
-export { $618bd53ea0a41cd4$export$80bb7300ce6a8be3 as useProductCardIsVisible, $618bd53ea0a41cd4$export$f223d69ed12f5fb7 as CurrentlyIntersectingContext, $8e8b179489080711$export$5bad61ecde080b1f as useExpandingContainerReactive, $bb34cd283e904784$export$2c9f9bf2092486aa as LooksSliderOrGrid, $697d8713dc82b9ab$export$44809a8a3e867e30 as LookCard, $ac571292d606f30b$export$7e1297a3a19f10d8 as PseudoRouter, $6d75ec14f537c37f$export$83bb9af5671e1dbe as promiseSafeStructuredClone, $68e6625c8d51f847$export$5162a71f252e6122 as preserve_items_in_history_dot_state, $68e6625c8d51f847$export$3064e1e8c6513da3 as prefixes_to_preserve_in_history_dot_state, $9b35d1384e31813a$export$29d28dadc2d6b631 as allowNativeNavigation, $b026fa9c9c904a98$export$1ea76ea778b880dd as modalVersionSymbol, $a604a8ffa4e4c03f$export$e417c49320921907 as createDeparallelizedNoDropResource, $01c33966d9ddb108$export$f50b88e2a00918b5 as throw_globally, $40411f2ec772c376$export$9265e66f26f8e383 as ClassicSearchModal, $06fcd2a345efd24d$export$b0c55aa2e87c4be7 as SearchModalV2, $98688279b9059f50$export$9d4a4b669b1929ab as ModernResponsiveContainedImage, $6a439680ae7e9ba3$export$3e41faf802a29e71 as Tab, $6a439680ae7e9ba3$export$b2539bed5023c21c as Tabs, $6b0fd8fd20df8ccf$export$d4973c31938cbfd1 as ShopTheLookButton, $972f6bce0f9d61be$export$e183a13865960371 as history_dot_state_to_state, $2855bffe06ef7a03$export$916e6850778505f6 as strip_encoded_filter_and_sort, $2855bffe06ef7a03$export$58aa3f171519b6d7 as encode_filters, $2855bffe06ef7a03$export$f934fa24c3a86811 as decode_filters, $2855bffe06ef7a03$export$62acb285a7579555 as encode_sorting, $2855bffe06ef7a03$export$766e9676e74997d3 as decode_sorting, $4df489344a0f97c7$export$d7b7ab832c20e2f4 as shopifyContainedImageContextSymbol, $5441862cd2f5e111$export$e68cff63f76bd15b as ListingProvider, $5441862cd2f5e111$export$8d0c4fdbb05a2f2e as useListing, $1e69163caedaab4e$export$11354f017ddc9790 as ProductCardIndexProvider, $1e69163caedaab4e$export$e3faf4d95300054f as useProductCardIndex, $4df489344a0f97c7$export$e4b984597b71e989 as ShopifyContainedImage, $002f09d00aac50b2$export$6649caad96ef8870 as SlidableItems, $fc830a7ee59416ef$export$ebdc3711f7e02ccd as make_accurate_width_accessor, $d5d7e58c5c9d8db0$export$9574e176201e5e8d as RecommendationSlider, $b432b11321ad4c97$export$9756467d34d91cdb as RecommendationGrid, $56047603f9d212b6$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $56047603f9d212b6$export$e6fffe67d4cdd848 as makeSizeAccessor, $801e8845d3fa3653$export$94026ee33dbabc26 as ImageContainer, $74777e8fe65b3dcb$export$b69d0d92862de18b as SentryErrorBoundary, $74777e8fe65b3dcb$export$240ecf5363d76c0f as ExtraSentryContextProvider, $ad371564683947ab$export$6c6d7a51fa9aa15d as ExpandingDetails, $e18ab2868df26f40$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $4711a82d08d2021b$export$fecbb157621501bd as SelectedFilters, $f6b0500577e1b210$export$3f1a388cc0d8fed7 as FilterBody, $44aa24b1bb793549$export$b288c38ae3fddb56 as create_modified_filters, $63f1f8dbcd07d3b0$export$d21e32dfedac04be as SolidLayout, $63f1f8dbcd07d3b0$export$445d8d3f5f706a40 as SolidLayoutWithProvidedElement, $d5f1e6a0f9117286$export$79b1565500412d9b as general_modal_abstraction, $9783d437ad61594c$export$3b621d86b1566b2 as CrossIcon, $ca6ab5f08bd28bca$export$8be2714ec7f169ee as GenericSliderArrowButton, $50aebf5b445518eb$export$58e808b1db15d3bc as fetchDepictRecommendations, $fa332ea03168857c$export$b91cec6bdc6b32a1 as CategoryTitle, $702d7656a373973e$export$824dde41348efed1 as embedded_num_products, $160ea2b55d8772d2$export$c1a6b039e689a58e as get_listings, $f5f54892fd0c7d9f$export$f34314aa9505732e as DepictCategory, $eb064bc3350276c1$export$ac6237957a15b3f0 as DepictSearch, $eb064bc3350276c1$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $eb064bc3350276c1$export$f2dc7e4e4aa11abb as SearchPage, $f3b7124b76123e44$export$aa14a9f43128f61f as ProductCardError, $169c13c0531d91d2$export$d86a33413558014e as open_modal_with_alignment, $5eaa00b951637e96$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $1308a7816c3d4f2d$export$b3ad617e9036868 as align_field, $1308a7816c3d4f2d$export$3f238c96c45e6cc6 as ALIGN_TOP, $1308a7816c3d4f2d$export$902f8b4a7dae5d78 as ALIGN_WIDTH_ON_MODAL, $1308a7816c3d4f2d$export$7895aadd1956b1c7 as ALIGN_LEFT, $1308a7816c3d4f2d$export$6060bc6bee850eb6 as SET_CENTERED_LEFT, $a9c7ba6087881ac2$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $cc64aabf2c7a1f1a$export$1233ca167bf71f9a as styles_to_valid_css_string, $e56d241d0f33d459$export$fe334901e8bebd57 as disable_scrolling, $573c007c697a1831$export$d0596b5cae35ad4 as open_search_with_shift_slash, $284849364a6ef73a$export$e015ed2f2950f2e3 as DepictAPI, $00a5b94f0c11efbb$export$d9f36cf74e24d595 as media_query_to_accessor, $e60a76195ac6d408$export$689e204eadb33baf as setup_fast_leave, $a61a2051e15c8d7a$export$5196e4c01fa56fcb as show_toast, $60ec7a29849d81db$export$a71e92cfbb498adc as SolidFormatPrice, $37e8c97bb6876197$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $bc2337c9a05ecd18$export$acb3eaade4b23afd as BasePlaceholder, $ceafb6fb91c6f394$export$89c6019e4baa40b1 as TextPlaceholder, $3ab4aa97880fb88d$export$3f37af283f8fb843 as ImagePlaceholder, $f9fd3017c20b774a$export$3ccaa27d81dd8556 as PageReplacer, $d399250dfa491636$export$864d304a0bc46829 as defaultGridSpacing, $d399250dfa491636$export$c3834fa86c616831 as defaultColsAtSize, $d399250dfa491636$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $8db9a15135765c11$export$83d89fbfd8236492 as version, $a3026fb727bc7550$export$316f6f283ae64765 as SearchField, $62a8813a51fbd22f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $62a8813a51fbd22f$export$de035477d6fef996 as QuickLinks, $8821a19349c36651$export$e2bf8ce7779e827e as CategoryPage };
+export { $a35e6f680c5bbc60$export$54299a3c81f5425 as useVisibilityState, $002f09d00aac50b2$export$eaa625fb39439e37 as useSlidableInformation, $618bd53ea0a41cd4$export$80bb7300ce6a8be3 as useProductCardIsVisible, $618bd53ea0a41cd4$export$f223d69ed12f5fb7 as CurrentlyIntersectingContext, $8e8b179489080711$export$5bad61ecde080b1f as useExpandingContainerReactive, $bb34cd283e904784$export$2c9f9bf2092486aa as LooksSliderOrGrid, $697d8713dc82b9ab$export$44809a8a3e867e30 as LookCard, $ac571292d606f30b$export$7e1297a3a19f10d8 as PseudoRouter, $6d75ec14f537c37f$export$83bb9af5671e1dbe as promiseSafeStructuredClone, $68e6625c8d51f847$export$5162a71f252e6122 as preserve_items_in_history_dot_state, $68e6625c8d51f847$export$3064e1e8c6513da3 as prefixes_to_preserve_in_history_dot_state, $9b35d1384e31813a$export$29d28dadc2d6b631 as allowNativeNavigation, $b026fa9c9c904a98$export$1ea76ea778b880dd as modalVersionSymbol, $a604a8ffa4e4c03f$export$e417c49320921907 as createDeparallelizedNoDropResource, $01c33966d9ddb108$export$f50b88e2a00918b5 as throw_globally, $40411f2ec772c376$export$9265e66f26f8e383 as ClassicSearchModal, $06fcd2a345efd24d$export$b0c55aa2e87c4be7 as SearchModalV2, $98688279b9059f50$export$9d4a4b669b1929ab as ModernResponsiveContainedImage, $6a439680ae7e9ba3$export$3e41faf802a29e71 as Tab, $6a439680ae7e9ba3$export$b2539bed5023c21c as Tabs, $6b0fd8fd20df8ccf$export$d4973c31938cbfd1 as ShopTheLookButton, $972f6bce0f9d61be$export$e183a13865960371 as history_dot_state_to_state, $2855bffe06ef7a03$export$916e6850778505f6 as strip_encoded_filter_and_sort, $2855bffe06ef7a03$export$58aa3f171519b6d7 as encode_filters, $2855bffe06ef7a03$export$f934fa24c3a86811 as decode_filters, $2855bffe06ef7a03$export$62acb285a7579555 as encode_sorting, $2855bffe06ef7a03$export$766e9676e74997d3 as decode_sorting, $4df489344a0f97c7$export$d7b7ab832c20e2f4 as shopifyContainedImageContextSymbol, $5441862cd2f5e111$export$e68cff63f76bd15b as ListingProvider, $5441862cd2f5e111$export$8d0c4fdbb05a2f2e as useListing, $1e69163caedaab4e$export$11354f017ddc9790 as ProductCardIndexProvider, $1e69163caedaab4e$export$e3faf4d95300054f as useProductCardIndex, $4df489344a0f97c7$export$e4b984597b71e989 as ShopifyContainedImage, $002f09d00aac50b2$export$6649caad96ef8870 as SlidableItems, $fc830a7ee59416ef$export$ebdc3711f7e02ccd as make_accurate_width_accessor, $d5d7e58c5c9d8db0$export$9574e176201e5e8d as RecommendationSlider, $b432b11321ad4c97$export$9756467d34d91cdb as RecommendationGrid, $56047603f9d212b6$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $56047603f9d212b6$export$e6fffe67d4cdd848 as makeSizeAccessor, $801e8845d3fa3653$export$94026ee33dbabc26 as ImageContainer, $74777e8fe65b3dcb$export$b69d0d92862de18b as SentryErrorBoundary, $74777e8fe65b3dcb$export$240ecf5363d76c0f as ExtraSentryContextProvider, $ad371564683947ab$export$6c6d7a51fa9aa15d as ExpandingDetails, $e18ab2868df26f40$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $4711a82d08d2021b$export$fecbb157621501bd as SelectedFilters, $f6b0500577e1b210$export$3f1a388cc0d8fed7 as FilterBody, $44aa24b1bb793549$export$b288c38ae3fddb56 as create_modified_filters, $63f1f8dbcd07d3b0$export$d21e32dfedac04be as SolidLayout, $63f1f8dbcd07d3b0$export$445d8d3f5f706a40 as SolidLayoutWithProvidedElement, $d5f1e6a0f9117286$export$79b1565500412d9b as general_modal_abstraction, $9783d437ad61594c$export$3b621d86b1566b2 as CrossIcon, $ca6ab5f08bd28bca$export$8be2714ec7f169ee as GenericSliderArrowButton, $50aebf5b445518eb$export$58e808b1db15d3bc as fetchDepictRecommendations, $fa332ea03168857c$export$b91cec6bdc6b32a1 as CategoryTitle, $702d7656a373973e$export$824dde41348efed1 as embedded_num_products, $160ea2b55d8772d2$export$c1a6b039e689a58e as get_listings, $f5f54892fd0c7d9f$export$f34314aa9505732e as DepictCategory, $eb064bc3350276c1$export$ac6237957a15b3f0 as DepictSearch, $eb064bc3350276c1$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $eb064bc3350276c1$export$f2dc7e4e4aa11abb as SearchPage, $f3b7124b76123e44$export$aa14a9f43128f61f as ProductCardError, $169c13c0531d91d2$export$d86a33413558014e as open_modal_with_alignment, $5eaa00b951637e96$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $1308a7816c3d4f2d$export$b3ad617e9036868 as align_field, $1308a7816c3d4f2d$export$3f238c96c45e6cc6 as ALIGN_TOP, $1308a7816c3d4f2d$export$902f8b4a7dae5d78 as ALIGN_WIDTH_ON_MODAL, $1308a7816c3d4f2d$export$7895aadd1956b1c7 as ALIGN_LEFT, $1308a7816c3d4f2d$export$6060bc6bee850eb6 as SET_CENTERED_LEFT, $a9c7ba6087881ac2$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $cc64aabf2c7a1f1a$export$1233ca167bf71f9a as styles_to_valid_css_string, $e56d241d0f33d459$export$fe334901e8bebd57 as disable_scrolling, $573c007c697a1831$export$d0596b5cae35ad4 as open_search_with_shift_slash, $284849364a6ef73a$export$e015ed2f2950f2e3 as DepictAPI, $00a5b94f0c11efbb$export$d9f36cf74e24d595 as media_query_to_accessor, $e60a76195ac6d408$export$689e204eadb33baf as setup_fast_leave, $a61a2051e15c8d7a$export$5196e4c01fa56fcb as show_toast, $60ec7a29849d81db$export$a71e92cfbb498adc as SolidFormatPrice, $37e8c97bb6876197$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $bc2337c9a05ecd18$export$acb3eaade4b23afd as BasePlaceholder, $ceafb6fb91c6f394$export$89c6019e4baa40b1 as TextPlaceholder, $3ab4aa97880fb88d$export$3f37af283f8fb843 as ImagePlaceholder, $f9fd3017c20b774a$export$3ccaa27d81dd8556 as PageReplacer, $d399250dfa491636$export$864d304a0bc46829 as defaultGridSpacing, $d399250dfa491636$export$c3834fa86c616831 as defaultColsAtSize, $d399250dfa491636$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $8db9a15135765c11$export$83d89fbfd8236492 as version, $a3026fb727bc7550$export$316f6f283ae64765 as SearchField, $62a8813a51fbd22f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $62a8813a51fbd22f$export$de035477d6fef996 as QuickLinks, $8821a19349c36651$export$e2bf8ce7779e827e as CategoryPage };

package/server/latest/index.cjs

@@ -1,6 +1,6 @@
 var $5vyXB$depictaiutilishared = require("@depict-ai/utilishared/latest");
-var $5vyXB$solidjsweb = require("solid-js/web");
 var $5vyXB$solidjs = require("solid-js");
+var $5vyXB$solidjsweb = require("solid-js/web");
 var $5vyXB$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest");
 var $5vyXB$solidjsstore = require("solid-js/store");
 require("../../multi_import_deduplicator.cjs").register_es_version("ui", "latest");
@@ -12,6 +12,8 @@ function $parcel$export(e, n, v, s) {
     configurable: true
   });
 }
+$parcel$export(module.exports, "useVisibilityState", () => $55cbacb79d3e0cea$export$54299a3c81f5425);
+$parcel$export(module.exports, "useSlidableInformation", () => $a0e53f99354809d9$export$eaa625fb39439e37);
 $parcel$export(module.exports, "useProductCardIsVisible", () => $67155e1aeb7073f6$export$80bb7300ce6a8be3);
 $parcel$export(module.exports, "CurrentlyIntersectingContext", () => $67155e1aeb7073f6$export$f223d69ed12f5fb7);
 $parcel$export(module.exports, "useExpandingContainerReactive", () => $4b455f60dadde8b8$export$5bad61ecde080b1f);
@@ -101,7 +103,88 @@ $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.21";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.23";
+function $55cbacb79d3e0cea$export$54299a3c81f5425() {
+  const d = document;
+  const [isVisible, setIsVisible] = $5vyXB$solidjs.createSignal(d.visibilityState !== "hidden");
+  const handleVisibilityChange = () => setIsVisible(d.visibilityState !== "hidden");
+  d.addEventListener("visibilitychange", handleVisibilityChange);
+  $5vyXB$solidjs.onCleanup(() => d.removeEventListener("visibilitychange", handleVisibilityChange));
+  return isVisible;
+}
+var $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));
+}
+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>"];
+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), {
+    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
+  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
+  // Once we have hydrated, we construct and insert the actual slider
+  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      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(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_
+        });
+        const slider = new (0, $5vyXB$depictaiutilishared.Amazing_Slider)({
+          button_contents: {
+            left: [MakeButton()],
+            right: [MakeButton()]
+          },
+          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_, entries => setIntersectionEntries(entries)]
+        });
+        $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;
+      })();
+    }
+  });
+}
+function $a0e53f99354809d9$export$eaa625fb39439e37() {
+  return $5vyXB$solidjs.useContext($a0e53f99354809d9$var$SlidableContext);
+}
 
 /**
  * Gets product_id (the thing we key the rendering on) from a display
@@ -749,79 +832,6 @@ function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, ins
   if (insert_after_container) container_element.after(style_element);
   return [container_element, view_more_button_container(), view_less_button_container(), style_element];
 }
-var $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));
-}
-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>"];
-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), {
-    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
-  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
-  // Once we have hydrated, we construct and insert the actual slider
-  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-    get when() {
-      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(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_
-        });
-        const slider = new (0, $5vyXB$depictaiutilishared.Amazing_Slider)({
-          button_contents: {
-            left: [MakeButton()],
-            right: [MakeButton()]
-          },
-          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_, entries => setIntersectionEntries(entries)]
-        });
-        $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;
-      })();
-    }
-  });
-}
-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_,
@@ -1477,17 +1487,17 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
     }
   })), "<!--/-->"], true);
 }
-var $b9e830d616d01b31$var$_tmpl$ = ["<div", ' style="position:absolute;width:10px;height:10px;overflow:hidden"></div>'];
-let $b9e830d616d01b31$var$cachedValue;
-async function $b9e830d616d01b31$export$7b9a0e99f0aeb2f3() {
-  if ($b9e830d616d01b31$var$cachedValue != undefined) return $b9e830d616d01b31$var$cachedValue;
-  return $b9e830d616d01b31$var$cachedValue = $b9e830d616d01b31$var$checkIfIsAffectedByChromeBug326498383();
+var $4f38102efa525ee0$var$_tmpl$ = ["<div", ' style="position:absolute;width:10px;height:10px;overflow:hidden"></div>'];
+let $4f38102efa525ee0$var$cachedValue;
+async function $4f38102efa525ee0$export$7b9a0e99f0aeb2f3() {
+  if ($4f38102efa525ee0$var$cachedValue != undefined) return $4f38102efa525ee0$var$cachedValue;
+  return $4f38102efa525ee0$var$cachedValue = $4f38102efa525ee0$var$checkIfIsAffectedByChromeBug326498383();
 }
-async function $b9e830d616d01b31$var$checkIfIsAffectedByChromeBug326498383() {
+async function $4f38102efa525ee0$var$checkIfIsAffectedByChromeBug326498383() {
   let isAffected = true;
   let resolveTimeoutPromise;
   try {
-    const div = $5vyXB$solidjsweb.ssr($b9e830d616d01b31$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey());
+    const div = $5vyXB$solidjsweb.ssr($4f38102efa525ee0$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey());
     const waitAFrame = () => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
     const timeoutPromise = new Promise(r => {
       resolveTimeoutPromise = r;
@@ -1500,7 +1510,7 @@ async function $b9e830d616d01b31$var$checkIfIsAffectedByChromeBug326498383() {
       style: style
     } = div;
     // Just to get a long string
-    div.append($b9e830d616d01b31$export$7b9a0e99f0aeb2f3 + "");
+    div.append($4f38102efa525ee0$export$7b9a0e99f0aeb2f3 + "");
     document.documentElement.append(div);
     style.overflow = "auto";
     await waitAFrame();
@@ -1547,7 +1557,7 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
   const textFadeInAnimationRunning = $5vyXB$solidjs.createSignal(false);
   const [getSecondPartAnimationRunning] = textFadeInAnimationRunning;
   const [userWantsExpanded, setUserWantsExpanded] = userWantsExpandedSignal_;
-  $b9e830d616d01b31$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
+  $4f38102efa525ee0$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
   return $5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
     get children() {
       return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {

package/server/latest/index.d.ts

@@ -1,5 +1,5 @@
-import { JSX, Accessor, Setter, Signal } from "solid-js";
-import { Display, useExpandingContainer, ColsAtSize, report, Amazing_Slider, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
+import { Accessor, JSX, Setter, Signal } from "solid-js";
+import { Amazing_Slider, Display, useExpandingContainer, ColsAtSize, report, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
 import { SearchFilter, SearchRequestV3, SortModel } from "@depict-ai/types/api/SearchRequestV3";
 import { ContentLink, SearchResponse, SearchFilter as _SearchFilter1 } from "@depict-ai/types/api/SearchResponse";
 import { Ancestors, ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
@@ -11,7 +11,34 @@ 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.21";
+export const version = "4.7.23";
+/**
+ * Returns if the current tab is visible
+ */
+export function useVisibilityState(): import("solid-js").Accessor<boolean>;
+/** @jsxImportSource solid-js */
+export function GenericSliderArrowButton(props?: {
+  width_?: number;
+  height_?: number;
+}): SVGElement;
+export function SlidableItems(props: {
+  children?: JSX.Element;
+  slider_ref_?: (slider: Amazing_Slider) => any;
+  faded_opacity_?: number;
+  disable_fading_?: boolean;
+  snapAlign_?: "start" | "end" | "center";
+  fadingThreshold_?: number;
+  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
+  arrow_width_?: number;
+  arrow_height_?: number;
+}): JSX.Element;
+/**
+ * Use this inside the children of a <SlidableItems> component to get the slider instance and a signal that contains the latest intersection obsrever entries (note they are accessible on the slider instance in a processed format already at the time this acessor updates)
+ */
+export function useSlidableInformation(): {
+  slider_: Amazing_Slider;
+  intersectionEntries_: Accessor<IntersectionObserverEntry[]>;
+} | undefined;
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -129,22 +156,6 @@ export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
  * When using insert_after_container, view more and view less buttons are not currently supported.
  */
 export function SolidLayoutWithProvidedElement(props: Omit<SolidLayoutOptions, "children" | "element_attributes">, container_element: HTMLDivElement, insert_after_container?: boolean, container_class?: string): JSX.Element;
-/** @jsxImportSource solid-js */
-export function GenericSliderArrowButton(props?: {
-  width_?: number;
-  height_?: number;
-}): SVGElement;
-export function SlidableItems(props: {
-  children?: JSX.Element;
-  slider_ref_?: (slider: Amazing_Slider) => any;
-  faded_opacity_?: number;
-  disable_fading_?: boolean;
-  snapAlign_?: "start" | "end" | "center";
-  fadingThreshold_?: number;
-  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
-  arrow_width_?: number;
-  arrow_height_?: number;
-}): JSX.Element;
 /**
  * Provider to wrap every listing (group of products) in
  * Used for example for deduplicating ResizeObservers for responsive images