@depict-ai/ui 4.7.35 → 4.8.1

package/latest/index.cjs

@@ -12,9 +12,9 @@ function $parcel$export(e, n, v, s) {
     configurable: true
   });
 }
-$parcel$export(module.exports, "ModernResponsiveImage", () => $d212a67662c5cf38$export$140423fa4bfb6d63);
 $parcel$export(module.exports, "setExtraDisplayTransformers", () => $606c221d98ba4d92$export$f98b8d5ea7207a1);
 $parcel$export(module.exports, "getExtraDisplayTransformers", () => $606c221d98ba4d92$export$b2d94be4f02525b2);
+$parcel$export(module.exports, "ModernResponsiveImage", () => $d212a67662c5cf38$export$140423fa4bfb6d63);
 $parcel$export(module.exports, "remap_blocks_to_index", () => $d92f338ba8f9da9b$export$92aa5d691d588f3f);
 $parcel$export(module.exports, "useMobileHover", () => $8bf678c45948a297$export$d4d96868197be50e);
 $parcel$export(module.exports, "useVisibilityState", () => $55cbacb79d3e0cea$export$54299a3c81f5425);
@@ -106,9 +106,15 @@ $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316
 $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7c3ce0ebe51f86);
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
-$parcel$export(module.exports, "makeSizeAccessors", () => $128302ab61dab8f1$export$54c6d6ff54e72743);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.35";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.8.1";
+
+// Value first so shopify merchants can set (extra) display transformers in the shopify app
+// Calling these functions normally doesn't do anything, but our shopify app respects them
+// Them being here is value first too because this can be easily imported in the product card editor
+let $606c221d98ba4d92$var$extraDisplayTransformers;
+const $606c221d98ba4d92$export$b2d94be4f02525b2 = () => $606c221d98ba4d92$var$extraDisplayTransformers;
+const $606c221d98ba4d92$export$f98b8d5ea7207a1 = displayTransformers => $606c221d98ba4d92$var$extraDisplayTransformers = displayTransformers;
 const $84798aaa863a4909$var$ListingContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
 function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
   const our_object = {};
@@ -188,7 +194,11 @@ const $19950faaac026e09$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingCo
 function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
   const [ourRatioKeyed, setOurRatioKeyed] = $gVhhF$solidjs.createSignal();
+  const [rAFSinceReturned, setRAFSinceReturned] = $gVhhF$solidjs.createSignal(false);
   const sizeToUse = $gVhhF$solidjs.createMemo(() => {
+    // We first put the images into the DOM after they have been decoded. We can only get the correct object-fit value after the image is in the DOM.
+    // To avoid using an observer for knowing when the image is in the DOM (one of the most CPU intensive things when we did lighthouse optimisation) we just re-check an animationframe after we told <Show> to show the image, which seems to work reliably
+    rAFSinceReturned();
     // props.size could be a getter that expects a cleanup so get it in this memo instead of where we set img.sizes (also we need to multiply, and it's good with some diffing here so people calling the comp don't have to)
     const incomingSize = props.size();
     const ratio = ourRatioKeyed();
@@ -344,6 +354,7 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
       hasDecodedFastPath = true;
     });
   });
+  $gVhhF$solidjs.createEffect(() => hasDecoded() && requestAnimationFrame($gVhhF$depictaiutilishared.catchify(() => setRAFSinceReturned(prev => !prev))));
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
       return hasDecoded();
@@ -560,13 +571,6 @@ function $d212a67662c5cf38$export$140423fa4bfb6d63(props) {
     customUrls: $d212a67662c5cf38$var$customUrls
   }));
 }
-
-// Value first so shopify merchants can set (extra) display transformers in the shopify app
-// Calling these functions normally doesn't do anything, but our shopify app respects them
-// Them being here is value first too because this can be easily imported in the product card editor
-let $606c221d98ba4d92$var$extraDisplayTransformers;
-const $606c221d98ba4d92$export$b2d94be4f02525b2 = () => $606c221d98ba4d92$var$extraDisplayTransformers;
-const $606c221d98ba4d92$export$f98b8d5ea7207a1 = displayTransformers => $606c221d98ba4d92$var$extraDisplayTransformers = displayTransformers;
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -9907,16 +9911,19 @@ async function $6382a1b83da39674$var$download_categories(merchant, market, local
 function $26a56f6b44703084$export$9862539c89138352({
   get_default_values_: get_default_values_,
   router_: router_,
-  prefix_: prefix_
+  prefix_: prefix_,
+  preserveKeys_: preserveKeys_
 }) {
   const get_prefixed_default_values_ = () => {
     const default_values = get_default_values_();
     return Object.fromEntries(Object.entries(default_values).map(([key, value]) => [prefix_ + key, value]));
   };
   const prefixed_state = $6e22b5314fb52f4c$export$e183a13865960371(get_prefixed_default_values_(), router_);
+  const prefixedPreserveKeys = preserveKeys_?.map(key => prefix_ + key);
   const reset_state = () => {
     const new_defaults = get_prefixed_default_values_();
     for (const key in prefixed_state) {
+      if (prefixedPreserveKeys?.includes(key)) continue;
       const new_value = new_defaults[key];
       prefixed_state[key][1](new_value);
     }
@@ -10525,8 +10532,13 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
           local_filter_cache: [],
           expanded_hierarchical_filters: [],
           scroll_restoration_data: [],
-          history_content_blocks: []
+          history_content_blocks: {
+            blocks: [],
+            aspectRatios: {}
+          }
         }),
+        // Don't reset content block stuff when leaving category page as we need it for scroll restoration, same with scroll restoration data (actually a bit unsure if this is needed, I think it depends on if someone cleans up our elements before the location changes or after, and maybe some of the test flakyness we have seen is due to this not existing before?)
+        preserveKeys_: ["history_content_blocks", "scroll_restoration_data"],
         router_: this.#router,
         prefix_: "category" + unique_instance_key_for_state + "_"
       });
@@ -11444,8 +11456,15 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                 for_id: for_id
               }) => for_id === id_currently_querying_for_())?.min_results_loaded ?? min_products_to_fetch_);
             });
-            const doesnt_have_content_blocks = $gVhhF$solidjs.createMemo(() => !content_blocks_by_row_());
-            const content_blocks_ = $gVhhF$solidjs.createMemo(() => doesnt_have_content_blocks() ? () => [] : $d92f338ba8f9da9b$export$791ef57e62e21c3f({
+            const layout = $gVhhF$solidjs.createMemo(() => {
+              const incoming_layout = layout_options_().layout;
+              if (incoming_layout === "slider-without-filters") return "slider";
+              return incoming_layout || "grid";
+            });
+            const doesnt_have_content_blocks = $gVhhF$solidjs.createMemo(() => !content_blocks_by_row_() || layout() !== "grid");
+            const content_blocks_ = $gVhhF$solidjs.createMemo(() => doesnt_have_content_blocks() ?
+            // This bailing here is to not use proxy/stores and retain old browser compatibility when no content blocks are present
+            () => [] : $d92f338ba8f9da9b$export$791ef57e62e21c3f({
               content_blocks_: content_blocks_by_row_,
               cols_at_size_: modified_cols_at_size,
               set_top_row_shortened_by_: set_top_row_shortened_by_
@@ -11457,11 +11476,6 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                 num_placeholders_: num_placeholders_
               });
             });
-            const layout = $gVhhF$solidjs.createMemo(() => {
-              const incoming_layout = layout_options_().layout;
-              if (incoming_layout === "slider-without-filters") return "slider";
-              return incoming_layout || "grid";
-            });
             const [get_suspense_is_blocked, set_suspense_is_blocked] = $gVhhF$solidjs.createSignal(false);
             const block_suspense_if_needed = () => {
               if (!is_just_after_plp_results_update) return;
@@ -11484,7 +11498,6 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
             }, {
               defer: true
             }));
-            $gVhhF$solidjs.createEffect(() => layout() !== "grid" && !doesnt_have_content_blocks() && $gVhhF$depictaiutilishared.dwarn("Slider layout doesn't support content blocks"));
             /*
             This suspense ensures that if someone has async templates, we still show placeholders until the product cards actually have finished rendering (automagically since they're createResource's)
             We're creating it outside the <Show> so that we can benefit from <For>'s optimisation between changing results
@@ -14918,89 +14931,132 @@ function $bb9760b7a8acdc18$export$7af06a63c5a976c9(el, listing_id, i18n_) {
   $gVhhF$solidjs.onCleanup(disconnect);
 }
 $gVhhF$solidjsweb.delegateEvents(["click"]);
-var $32c662f618f5d80d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a class=d-standard-content-wrapper><video loop class=d-standard-content>`);
+var $32c662f618f5d80d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<video loop class=d-standard-content>`);
 function $32c662f618f5d80d$export$780a853d15174484({
-  contentBlock_: {
-    content: {
-      link: link,
-      type: type,
-      url: mediaUrl
-    }
-  },
-  router_: router_
+  link_: link_,
+  type_: type_,
+  router_: router_,
+  setAspectRatioWas_: setAspectRatioWas_,
+  mediaUrl_: mediaUrl_,
+  aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_
 }) {
-  if (type === "image") {
-    const [wrapperSize, setWrapperSize] = $gVhhF$solidjs.createSignal();
-    return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjsweb.Dynamic), $gVhhF$solidjsweb.mergeProps({
-      component: link ? "a" : "div",
-      "class": "d-standard-content-wrapper",
-      ref: el => setWrapperSize(() => $128302ab61dab8f1$export$54c6d6ff54e72743(el)),
-      get onClick() {
-        return $gVhhF$depictaiutilisharedlatest.catchify(ev => link && router_.navigate_.go_to_({
-          new_url_: link,
-          is_replace_: false,
-          event_: ev
-        }));
-      }
-    }, link && {
-      href: link
-    }, {
-      get children() {
-        return $gVhhF$solidjsweb.createComponent((0, $d212a67662c5cf38$export$140423fa4bfb6d63), {
-          size: () => wrapperSize()?.[0]?.() || 0,
-          sizeHeight: () => wrapperSize()?.[1]?.() || 0,
-          src: mediaUrl,
-          "class": "d-standard-content"
-        });
-      }
-    }));
-  }
-  if (type === "video") {
-    const pageVisible = $55cbacb79d3e0cea$export$54299a3c81f5425();
-    return (() => {
-      var _el$ = $gVhhF$solidjsweb.getNextElement($32c662f618f5d80d$var$_tmpl$),
-        _el$2 = _el$.firstChild;
-      $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$depictaiutilisharedlatest.catchify(ev => router_.navigate_.go_to_({
-        new_url_: link,
+  const [wrapperSize, setWrapperSize] = $gVhhF$solidjs.createSignal();
+  const isImage = type_ === "image";
+  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjsweb.Dynamic), $gVhhF$solidjsweb.mergeProps({
+    component: link_ ? "a" : "div",
+    "class": "d-standard-content-wrapper",
+    get style() {
+      return $gVhhF$solidjsweb.memo(() => !!aspectRatioWhenAloneInRow_())() ? `--media-aspect-ratio: ${aspectRatioWhenAloneInRow_()}` : "";
+    },
+    ref: el => isImage && setWrapperSize(() => $128302ab61dab8f1$export$54c6d6ff54e72743(el)),
+    get onClick() {
+      return $gVhhF$depictaiutilisharedlatest.catchify(ev => link_ && router_.navigate_.go_to_({
+        new_url_: link_,
         is_replace_: false,
         event_: ev
-      })), true);
-      $gVhhF$solidjsweb.setAttribute(_el$, "href", link);
-      $gVhhF$solidjsweb.use(element => $gVhhF$solidjs.createEffect(() => {
-        if (pageVisible()) element.play().catch(e => $gVhhF$depictaiutilishared.dlog("Failed to play", e));else element.pause();
-      }), _el$2);
-      $gVhhF$solidjsweb.setAttribute(_el$2, "src", mediaUrl);
-      $gVhhF$solidjsweb.setProperty(_el$2, "controls", false);
-      $gVhhF$solidjsweb.setProperty(_el$2, "muted", true);
-      $gVhhF$solidjsweb.setProperty(_el$2, "autoplay", true);
-      $gVhhF$solidjsweb.setProperty(_el$2, "playsinline", true);
-      $gVhhF$solidjsweb.runHydrationEvents();
-      return _el$;
-    })();
-  }
+      }));
+    }
+  }, link_ && {
+    href: link_
+  }, {
+    get children() {
+      return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Switch), {
+        get children() {
+          return [$gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Match), {
+            when: isImage,
+            get children() {
+              return $gVhhF$solidjsweb.createComponent((0, $d212a67662c5cf38$export$140423fa4bfb6d63), {
+                size: () => wrapperSize()?.[0]?.() || 0,
+                sizeHeight: () => wrapperSize()?.[1]?.() || 0,
+                src: mediaUrl_,
+                "class": "d-standard-content",
+                ref: el => el.addEventListener("load", $gVhhF$depictaiutilisharedlatest.catchify(() => setAspectRatioWas_(el.naturalWidth / el.naturalHeight)))
+              });
+            }
+          }), $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Match), {
+            when: type_ === "video",
+            get children() {
+              var _el$ = $gVhhF$solidjsweb.getNextElement($32c662f618f5d80d$var$_tmpl$);
+              $gVhhF$solidjsweb.use(element => {
+                const pageVisible = $55cbacb79d3e0cea$export$54299a3c81f5425();
+                element.addEventListener("loadedmetadata", $gVhhF$depictaiutilisharedlatest.catchify(() => setAspectRatioWas_(element.videoWidth / element.videoHeight)));
+                $gVhhF$solidjs.createEffect(() => {
+                  if (pageVisible()) element.play().catch(e => $gVhhF$depictaiutilishared.dlog("Failed to play", e));else element.pause();
+                });
+              }, _el$);
+              $gVhhF$solidjsweb.setAttribute(_el$, "src", mediaUrl_);
+              $gVhhF$solidjsweb.setProperty(_el$, "controls", false);
+              $gVhhF$solidjsweb.setProperty(_el$, "muted", true);
+              $gVhhF$solidjsweb.setProperty(_el$, "autoplay", true);
+              $gVhhF$solidjsweb.setProperty(_el$, "playsinline", true);
+              return _el$;
+            }
+          })];
+        }
+      });
+    }
+  }));
 }
-$gVhhF$solidjsweb.delegateEvents(["click"]);
 function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_) {
+  let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
+  const contentComponents = new Map();
   $gVhhF$solidjs.createEffect(() => {
     const serverContentBlock = plp_meta()?.content_blocks;
-    if (serverContentBlock && JSON.stringify(serverContentBlock) !== JSON.stringify(historyContentBlocks())) setHistoryContentBlocks(serverContentBlock);
+    const currentHistory = $gVhhF$solidjs.untrack(historyContentBlocks);
+    // Only write to the history if the content blocks have changed when a new backend results arrives (we have them in history so scroll restoration works when going back, even when running shopify without single page navigations where our script dies inbetween pages).
+    if (serverContentBlock && JSON.stringify(serverContentBlock) !== JSON.stringify(currentHistory.blocks)) setHistoryContentBlocks({
+      ...currentHistory,
+      blocks: serverContentBlock
+    });
   });
   const contentBlocksByRow = $gVhhF$solidjs.createMemo(() => {
     const developerProvided = content_blocks_by_row_();
-    const fromHistory = historyContentBlocks();
-    // If none come from backend/History, fall back to developer provided/what usually is undefined. layout="slider" and layout="slider-without-filters" is only supported if content blocks is undefined, so if we don't do that those layouts are broken.
-    if (developerProvided || !fromHistory.length) return developerProvided;
+    const {
+      blocks: blocksFromHistory
+    } = historyContentBlocks();
+    if (developerProvided) return developerProvided;
+    // If we didn't get any content blocks (backend always return empty array) and we haven't seen any content blocks yet, return undefined
+    // This is so the result rendering (PLPResults) will still use flexbox provided rendering on existing customers, so adding this isn't a breaking change
+    // We don't want to switch rendering method every time one switches between a collection that hasn't vs has content blocks though, so once we've seen one content block we'll switch to css-grid-based rendering
+    if (!blocksFromHistory?.length && !hasSeenContentBlock) return;
     const content = [];
-    fromHistory.forEach(row => {
+    hasSeenContentBlock = true;
+    blocksFromHistory.forEach(row => {
+      const {
+        content: {
+          link: link,
+          type: type,
+          url: url
+        }
+      } = row;
+      // Key the "content"-component by the link, type and url, so we can reuse the component (and later downstream the block elements) if it's the same
+      // This makes the block not flicker when going backwards/forwards if the content is the same on both pages
+      // Also it lets us rewrite the blocks state in the history based on the block aspect ratio without infinite looping
+      const componentCacheKey = JSON.stringify([link, type, url]);
+      let component = contentComponents.get(componentCacheKey);
+      if (!component) {
+        component = () => $gVhhF$solidjsweb.createComponent((0, $32c662f618f5d80d$export$780a853d15174484), {
+          link_: link,
+          type_: type,
+          mediaUrl_: url,
+          router_: router_,
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
+            ...prev,
+            aspectRatios: {
+              ...prev.aspectRatios,
+              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+            }
+          }))
+        });
+        contentComponents.set(componentCacheKey, component);
+      }
       const contentBlock = {
         span_columns: row.span_columns,
         span_rows: row.span_rows,
         position: row.position,
-        content: () => $gVhhF$solidjsweb.createComponent((0, $32c662f618f5d80d$export$780a853d15174484), {
-          contentBlock_: row,
-          router_: router_
-        })
+        content: component
       };
       content[row.row] = contentBlock;
     });

package/latest/index.d.ts

@@ -1,8 +1,8 @@
-import { JSX, Accessor, Setter, Signal } from "solid-js";
 import { Display, ModernDisplay, report, Amazing_Slider, useExpandingContainer, ColsAtSize, Elem, Node_Array } from "@depict-ai/utilishared/latest";
 import { ContentLink, SearchResponse, SearchFilter as _SearchFilter1 } from "@depict-ai/types/api/SearchResponse";
 import { Ancestors, ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
 import { ProductListing, GetListingResponse, ContentBlock as _ContentBlock1 } from "@depict-ai/types/api/GetListingResponse";
+import { JSX, Accessor, Setter, Signal } from "solid-js";
 import { SearchFilter, SearchRequestV3, SortModel } from "@depict-ai/types/api/SearchRequestV3";
 import { ProductListingResponseV3, SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/ProductListingResponseV3";
 import { SearchSuggestionsRequestV3 } from "@depict-ai/types/api/SearchSuggestionsRequestV3";
@@ -11,7 +11,61 @@ 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.35";
+export const version = "4.8.1";
+type DisplayTransformerAlwaysThereData = {
+  merchant: string;
+  market: string;
+  locale: string;
+};
+type CanBePromiseWrapped<T> = T | Promise<T>;
+export type ModernDisplayWithPageUrl<T extends ModernDisplay> = { [K in keyof T]: K extends "variant_displays" ? (T[K][number] & {
+  page_url: string;
+})[] : T[K] };
+/**
+ * A ProductListing with ancestors added in, this is what we pass to the display transformers as the ancestors might be required to construct the URL
+ */
+type ProductListingWithAncestors = ProductListing & {
+  ancestors: Ancestors;
+};
+/**
+ * The displayTransformer for categories does not only get a list of ListingSuggestions, when a search query has listing suggestions, but also their ancestors since we show breadcrumbs for the listing suggestions. To let the user differentiate (since the suggestion ones can be added/removed but not the ancestors) we add a boolean is_suggestion to the listing suggestions passed to the displayTransformer.
+ */
+type ListingSuggestionForTransformer = (ListingSuggestion & {
+  is_suggestion: true;
+}) | (Omit<ListingSuggestion, "suggestions_result_id"> & {
+  is_suggestion: false;
+});
+/**
+ * DisplayTransformers supersede pageURLCreator
+ * DisplayTransformers are functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
+ */
+export type DisplayTransformers<InputDisplay extends ModernDisplay, OutputDisplay extends ModernDisplay | never> = {
+  products?: (options: DisplayTransformerAlwaysThereData & {
+    displays: InputDisplay[];
+  }) => CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
+  categories?: <T extends ProductListingWithAncestors | ListingSuggestionForTransformer>(options: DisplayTransformerAlwaysThereData & {
+    data: T[];
+  }) => CanBePromiseWrapped<(T & {
+    page_url: string;
+  })[]>;
+  contentResults?: (options: DisplayTransformerAlwaysThereData & {
+    data: ContentLink[];
+  }) => CanBePromiseWrapped<ContentLink[]>;
+};
+export type SomethingTakingADisplayTransformers<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
+  display_transformers: DisplayTransformers<InputDisplay, OutputDisplay>;
+} : {
+  display_transformers: DisplayTransformers<InputDisplay, OutputDisplay>;
+} : {
+  page_url_creator?: never;
+  display_transformers?: never;
+};
+export const getExtraDisplayTransformers: () => DisplayTransformers<any, any> | undefined;
+/**
+ * When called from inside the shopify apps product card editor, this registers extra display transformers to be ran alongside Depict's default added ones. The ones for products and content will run after Depicts but the ones for categories will run before Depicts.
+ * @param displayTransformers
+ */
+export const setExtraDisplayTransformers: <InputDisplay extends ModernDisplay, OutputDisplay extends ModernDisplay = ModernDisplayWithPageUrl<InputDisplay>>(displayTransformers: DisplayTransformers<InputDisplay, OutputDisplay>) => DisplayTransformers<InputDisplay, OutputDisplay>;
 /**
  * Provider to wrap every listing (group of products) in
  * Used for example for deduplicating ResizeObservers for responsive images
@@ -115,10 +169,6 @@ export function TextPlaceholder(props: {
   class?: string;
 }): JSX.Element;
 export function DefaultInstantCardPlaceholder(): HTMLDivElement;
-/**
- * Returns two accessors (one width and one height) that will update when the size of the provided element changes, to be used with ResponsiveImg
- */
-export function makeSizeAccessors(whatToWatch: HTMLElement): [Accessor<number>, Accessor<number>];
 export const shopifyContainedImageContextSymbol: unique symbol;
 /**
  * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
@@ -147,60 +197,6 @@ export function ModernResponsiveContainedImage(props: Parameters<typeof ShopifyC
  * Wrapper around ShopifyResponsiveImg (component that just does an image, without wrapping in div). The wrapper allows ShopifyResponsiveImg to work both with shopify CDN URLs and arbitrary URLs, where the latter will be fed through Depict's cloudflare resizer.
  */
 export function ModernResponsiveImage(props: Parameters<typeof ShopifyResponsiveImg>[0]): import("solid-js").JSX.Element;
-type DisplayTransformerAlwaysThereData = {
-  merchant: string;
-  market: string;
-  locale: string;
-};
-type CanBePromiseWrapped<T> = T | Promise<T>;
-export type ModernDisplayWithPageUrl<T extends ModernDisplay> = { [K in keyof T]: K extends "variant_displays" ? (T[K][number] & {
-  page_url: string;
-})[] : T[K] };
-/**
- * A ProductListing with ancestors added in, this is what we pass to the display transformers as the ancestors might be required to construct the URL
- */
-type ProductListingWithAncestors = ProductListing & {
-  ancestors: Ancestors;
-};
-/**
- * The displayTransformer for categories does not only get a list of ListingSuggestions, when a search query has listing suggestions, but also their ancestors since we show breadcrumbs for the listing suggestions. To let the user differentiate (since the suggestion ones can be added/removed but not the ancestors) we add a boolean is_suggestion to the listing suggestions passed to the displayTransformer.
- */
-type ListingSuggestionForTransformer = (ListingSuggestion & {
-  is_suggestion: true;
-}) | (Omit<ListingSuggestion, "suggestions_result_id"> & {
-  is_suggestion: false;
-});
-/**
- * DisplayTransformers supersede pageURLCreator
- * DisplayTransformers are functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
- */
-export type DisplayTransformers<InputDisplay extends ModernDisplay, OutputDisplay extends ModernDisplay | never> = {
-  products?: (options: DisplayTransformerAlwaysThereData & {
-    displays: InputDisplay[];
-  }) => CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
-  categories?: <T extends ProductListingWithAncestors | ListingSuggestionForTransformer>(options: DisplayTransformerAlwaysThereData & {
-    data: T[];
-  }) => CanBePromiseWrapped<(T & {
-    page_url: string;
-  })[]>;
-  contentResults?: (options: DisplayTransformerAlwaysThereData & {
-    data: ContentLink[];
-  }) => CanBePromiseWrapped<ContentLink[]>;
-};
-export type SomethingTakingADisplayTransformers<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
-  display_transformers: DisplayTransformers<InputDisplay, OutputDisplay>;
-} : {
-  display_transformers: DisplayTransformers<InputDisplay, OutputDisplay>;
-} : {
-  page_url_creator?: never;
-  display_transformers?: never;
-};
-export const getExtraDisplayTransformers: () => DisplayTransformers<any, any> | undefined;
-/**
- *
- * @param displayTransformers
- */
-export const setExtraDisplayTransformers: <InputDisplay extends ModernDisplay, OutputDisplay extends ModernDisplay = ModernDisplayWithPageUrl<InputDisplay>>(displayTransformers: DisplayTransformers<InputDisplay, OutputDisplay>) => DisplayTransformers<InputDisplay, OutputDisplay>;
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -1315,6 +1311,10 @@ export const embedded_num_products: ({
  * Gets available listings for a given merchant, market and locale
  */
 export function get_listings(merchant: string, market: string, locale: string): Promise<import("@depict-ai/types/api/ListListingsResponseItem").ListListingsResponseItem1[]>;
+type ContentBlockHistoryState = {
+  blocks: _ContentBlock1[];
+  aspectRatios: Record<string, number>;
+};
 type GeneralCategoryListingOptions = {
   market: string;
   merchant: string;
@@ -1351,7 +1351,7 @@ export class DepictCategory<InputDisplay extends Display, OutputDisplay extends
       expanded_: boolean;
     }[]>;
     scroll_restoration_data: Signal<ScrollRestorationData>;
-    history_content_blocks: Signal<_ContentBlock1[]>;
+    history_content_blocks: Signal<ContentBlockHistoryState>;
   };
   /**
    * Signal representing the currently selected filters. Will update to always reflect the state of the current URL. Calling the setter triggers a navigation (replaceState) to an updated URL.