@depict-ai/ui 4.8.0 → 4.8.2

package/server/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.8.0";
+export const version = "4.8.2";
+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.

package/server/latest/index.js

@@ -1,13 +1,20 @@
 import { add_to_version_info as $i7OB2$add_to_version_info, queueMacroTask as $i7OB2$queueMacroTask, catchify as $i7OB2$catchify, findMostFrequentItem as $i7OB2$findMostFrequentItem, dwarn as $i7OB2$dwarn, observer as $i7OB2$observer, layout_media_query_header as $i7OB2$layout_media_query_header, javascript_media_query as $i7OB2$javascript_media_query, slider_fading_factory as $i7OB2$slider_fading_factory, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, dlog as $i7OB2$dlog1, camelCasifyObject as $i7OB2$camelCasifyObject, useExpandingContainer as $i7OB2$useExpandingContainer, fetch_retry as $i7OB2$fetch_retry, base_url as $i7OB2$base_url, slider_fractional_factory as $i7OB2$slider_fractional_factory, make_random_classname as $i7OB2$make_random_classname, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $i7OB2$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $i7OB2$layout_get_total_rec_amount_for_row, report as $i7OB2$report, standard_price_format as $i7OB2$standard_price_format, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ContainedImage as $i7OB2$ContainedImage, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, use_href_accessor as $i7OB2$use_href_accessor, get_session_id as $i7OB2$get_session_id, add_version_query_params as $i7OB2$add_version_query_params, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, snakeCasifyObject as $i7OB2$snakeCasifyObject, sort_obj as $i7OB2$sort_obj, make_url_with_query_params as $i7OB2$make_url_with_query_params, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
 import { createComponent as $i7OB2$createComponent, mergeProps as $i7OB2$mergeProps, insert as $i7OB2$insert, ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, ssrStyle as $i7OB2$ssrStyle, ssrAttribute as $i7OB2$ssrAttribute, escape as $i7OB2$escape, spread as $i7OB2$spread, isServer as $i7OB2$isServer, ssrElement as $i7OB2$ssrElement, ssrClassList as $i7OB2$ssrClassList, Dynamic as $i7OB2$Dynamic } from "solid-js/web";
-import { createSignal as $i7OB2$createSignal, getOwner as $i7OB2$getOwner, createEffect as $i7OB2$createEffect, runWithOwner as $i7OB2$runWithOwner, onCleanup as $i7OB2$onCleanup, createContext as $i7OB2$createContext, useContext as $i7OB2$useContext, createMemo as $i7OB2$createMemo, splitProps as $i7OB2$splitProps, mergeProps as $i7OB2$mergeProps1, untrack as $i7OB2$untrack, createRenderEffect as $i7OB2$createRenderEffect, Show as $i7OB2$Show, batch as $i7OB2$batch, createComputed as $i7OB2$createComputed, mapArray as $i7OB2$mapArray, createResource as $i7OB2$createResource, Suspense as $i7OB2$Suspense, createRoot as $i7OB2$createRoot, For as $i7OB2$For, Index as $i7OB2$Index, createUniqueId as $i7OB2$createUniqueId, ErrorBoundary as $i7OB2$ErrorBoundary, on as $i7OB2$on, createSelector as $i7OB2$createSelector, children as $i7OB2$children, createReaction as $i7OB2$createReaction } from "solid-js";
+import { createSignal as $i7OB2$createSignal, getOwner as $i7OB2$getOwner, createEffect as $i7OB2$createEffect, runWithOwner as $i7OB2$runWithOwner, onCleanup as $i7OB2$onCleanup, createContext as $i7OB2$createContext, useContext as $i7OB2$useContext, createMemo as $i7OB2$createMemo, splitProps as $i7OB2$splitProps, mergeProps as $i7OB2$mergeProps1, untrack as $i7OB2$untrack, createRenderEffect as $i7OB2$createRenderEffect, Show as $i7OB2$Show, batch as $i7OB2$batch, createComputed as $i7OB2$createComputed, mapArray as $i7OB2$mapArray, createResource as $i7OB2$createResource, Suspense as $i7OB2$Suspense, createRoot as $i7OB2$createRoot, For as $i7OB2$For, Index as $i7OB2$Index, createUniqueId as $i7OB2$createUniqueId, ErrorBoundary as $i7OB2$ErrorBoundary, on as $i7OB2$on, createSelector as $i7OB2$createSelector, children as $i7OB2$children, createReaction as $i7OB2$createReaction, Switch as $i7OB2$Switch, Match as $i7OB2$Match } from "solid-js";
 import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from "solid-js/store";
 import { dlog as $i7OB2$dlog, catchify as $i7OB2$catchify1, ListenableSet as $i7OB2$ListenableSet, use_href_accessor as $i7OB2$use_href_accessor1, queueMacroTask as $i7OB2$queueMacroTask1, report as $i7OB2$report1 } from "@depict-ai/utilishared/latest";
 
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.8.0";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.8.2";
+
+// 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 $a63fa9cb46ed211b$var$extraDisplayTransformers;
+const $a63fa9cb46ed211b$export$b2d94be4f02525b2 = () => $a63fa9cb46ed211b$var$extraDisplayTransformers;
+const $a63fa9cb46ed211b$export$f98b8d5ea7207a1 = displayTransformers => $a63fa9cb46ed211b$var$extraDisplayTransformers = displayTransformers;
 const $011607bdf658f807$var$ListingContext = /*@__PURE__*/$i7OB2$createContext();
 function $011607bdf658f807$export$e68cff63f76bd15b(props) {
   const our_object = {};
@@ -73,7 +80,11 @@ const $e8ffe11ed01df0fe$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingCo
 function $e8ffe11ed01df0fe$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] = $i7OB2$createSignal();
+  const [rAFSinceReturned, setRAFSinceReturned] = $i7OB2$createSignal(false);
   const sizeToUse = $i7OB2$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();
@@ -229,6 +240,7 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
       hasDecodedFastPath = true;
     });
   });
+  $i7OB2$createEffect(() => hasDecoded() && requestAnimationFrame($i7OB2$catchify(() => setRAFSinceReturned(prev => !prev))));
   return $i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
       return hasDecoded();
@@ -421,13 +433,6 @@ function $70bb27cc6be01fc7$export$140423fa4bfb6d63(props) {
     customUrls: $70bb27cc6be01fc7$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 $a63fa9cb46ed211b$var$extraDisplayTransformers;
-const $a63fa9cb46ed211b$export$b2d94be4f02525b2 = () => $a63fa9cb46ed211b$var$extraDisplayTransformers;
-const $a63fa9cb46ed211b$export$f98b8d5ea7207a1 = displayTransformers => $a63fa9cb46ed211b$var$extraDisplayTransformers = displayTransformers;
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $i7OB2$createSignal(false);
   $i7OB2$onCleanup($i7OB2$javascript_media_query(media_query, ({
@@ -7700,16 +7705,19 @@ async function $4b2134398dfa83fa$var$download_categories(merchant, market, local
 function $a8fa7302d6f93c0b$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 = $ca6f574bd8772184$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);
     }
@@ -8323,8 +8331,13 @@ class $961b5c64bef4662f$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 + "_"
       });
@@ -12262,73 +12275,117 @@ function $e7fce80abe608e01$var$clear_if_opened_new_tab_with_sideways_url_params_
   });
   tracking_function_for_plp_results(plp_results_);
 }
-var $f916989c4b1be9f7$var$_tmpl$ = ["<a", ' class="d-standard-content-wrapper"', "><video", ' muted="" autoplay="" playsinline="" loop class="d-standard-content"></video></a>'];
+var $f916989c4b1be9f7$var$_tmpl$ = ["<video", ' muted="" autoplay="" playsinline="" loop class="d-standard-content"></video>'];
 function $f916989c4b1be9f7$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] = $i7OB2$createSignal();
-    return $i7OB2$createComponent((0, $i7OB2$Dynamic), $i7OB2$mergeProps({
-      component: link ? "a" : "div",
-      "class": "d-standard-content-wrapper",
-      get onClick() {
-        return $i7OB2$catchify1(ev => link && router_.navigate_.go_to_({
-          new_url_: link,
-          is_replace_: false,
-          event_: ev
-        }));
-      }
-    }, link && {
-      href: link
-    }, {
-      get children() {
-        return $i7OB2$createComponent((0, $70bb27cc6be01fc7$export$140423fa4bfb6d63), {
-          size: () => wrapperSize()?.[0]?.() || 0,
-          sizeHeight: () => wrapperSize()?.[1]?.() || 0,
-          src: mediaUrl,
-          "class": "d-standard-content"
-        });
-      }
-    }));
-  }
-  if (type === "video") {
-    const pageVisible = $5e3d278ef4c80cd7$export$54299a3c81f5425();
-    return $i7OB2$ssr($f916989c4b1be9f7$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("href", $i7OB2$escape(link, true), false), $i7OB2$ssrAttribute("src", $i7OB2$escape(mediaUrl, true), false));
-  }
+  const [wrapperSize, setWrapperSize] = $i7OB2$createSignal();
+  const isImage = type_ === "image";
+  return $i7OB2$createComponent((0, $i7OB2$Dynamic), $i7OB2$mergeProps({
+    component: link_ ? "a" : "div",
+    "class": "d-standard-content-wrapper",
+    get style() {
+      return aspectRatioWhenAloneInRow_() ? `--media-aspect-ratio: ${aspectRatioWhenAloneInRow_()}` : "";
+    },
+    get onClick() {
+      return $i7OB2$catchify1(ev => link_ && router_.navigate_.go_to_({
+        new_url_: link_,
+        is_replace_: false,
+        event_: ev
+      }));
+    }
+  }, link_ && {
+    href: link_
+  }, {
+    get children() {
+      return $i7OB2$createComponent((0, $i7OB2$Switch), {
+        get children() {
+          return [$i7OB2$createComponent((0, $i7OB2$Match), {
+            when: isImage,
+            get children() {
+              return $i7OB2$createComponent((0, $70bb27cc6be01fc7$export$140423fa4bfb6d63), {
+                size: () => wrapperSize()?.[0]?.() || 0,
+                sizeHeight: () => wrapperSize()?.[1]?.() || 0,
+                src: mediaUrl_,
+                "class": "d-standard-content"
+              });
+            }
+          }), $i7OB2$createComponent((0, $i7OB2$Match), {
+            when: type_ === "video",
+            get children() {
+              return $i7OB2$ssr($f916989c4b1be9f7$var$_tmpl$, $i7OB2$ssrHydrationKey() + $i7OB2$ssrAttribute("src", $i7OB2$escape(mediaUrl_, true), false));
+            }
+          })];
+        }
+      });
+    }
+  }));
 }
 function $486360b09f0d5729$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();
   $i7OB2$createEffect(() => {
     const serverContentBlock = plp_meta()?.content_blocks;
-    if (serverContentBlock && JSON.stringify(serverContentBlock) !== JSON.stringify(historyContentBlocks())) setHistoryContentBlocks(serverContentBlock);
+    const currentHistory = $i7OB2$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 = $i7OB2$createMemo(() => {
     const developerProvided = content_blocks_by_row_();
-    const fromHistory = historyContentBlocks();
+    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 (!fromHistory?.length && !hasSeenContentBlock) return undefined;
+    if (!blocksFromHistory?.length && !hasSeenContentBlock) return;
     const content = [];
     hasSeenContentBlock = true;
-    fromHistory.forEach(row => {
+    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 = () => $i7OB2$createComponent((0, $f916989c4b1be9f7$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: () => $i7OB2$createComponent((0, $f916989c4b1be9f7$export$780a853d15174484), {
-          contentBlock_: row,
-          router_: router_
-        })
+        content: component
       };
       content[row.row] = contentBlock;
     });
@@ -12801,4 +12858,4 @@ function $442f32a4d80abbde$export$e2bf8ce7779e827e(props) {
   }, "Entire CategoryPage failed");
 }
 $i7OB2$add_to_version_info("ui", (0, $ec291e0010116877$export$83d89fbfd8236492));
-export { $70bb27cc6be01fc7$export$140423fa4bfb6d63 as ModernResponsiveImage, $a63fa9cb46ed211b$export$f98b8d5ea7207a1 as setExtraDisplayTransformers, $a63fa9cb46ed211b$export$b2d94be4f02525b2 as getExtraDisplayTransformers, $e7a7eb102ddc0c79$export$92aa5d691d588f3f as remap_blocks_to_index, $4eb0a704f8f30273$export$d4d96868197be50e as useMobileHover, $5e3d278ef4c80cd7$export$54299a3c81f5425 as useVisibilityState, $f32e14878e75af51$export$eaa625fb39439e37 as useSlidableInformation, $f091294da861020c$export$80bb7300ce6a8be3 as useProductCardIsVisible, $f091294da861020c$export$f223d69ed12f5fb7 as CurrentlyIntersectingContext, $24e27fab9c821b86$export$5bad61ecde080b1f as useExpandingContainerReactive, $07ef910e8ef6b783$export$2c9f9bf2092486aa as LooksSliderOrGrid, $e9d1d09be9e6471e$export$44809a8a3e867e30 as LookCard, $4fd2ba03703a7d92$export$7e1297a3a19f10d8 as PseudoRouter, $de6ccd37192b5fc2$export$83bb9af5671e1dbe as promiseSafeStructuredClone, $90980bd87c9960f9$export$5162a71f252e6122 as preserve_items_in_history_dot_state, $90980bd87c9960f9$export$3064e1e8c6513da3 as prefixes_to_preserve_in_history_dot_state, $a281666e5c15c2ec$export$29d28dadc2d6b631 as allowNativeNavigation, $66db7a014e20802e$export$1ea76ea778b880dd as modalVersionSymbol, $136f1d4d6c7ba6ac$export$e417c49320921907 as createDeparallelizedNoDropResource, $d8dbf52fea1773e2$export$f50b88e2a00918b5 as throw_globally, $42912431795f188e$export$9265e66f26f8e383 as ClassicSearchModal, $500a16dd18ee5a71$export$b0c55aa2e87c4be7 as SearchModalV2, $70bb27cc6be01fc7$export$9d4a4b669b1929ab as ModernResponsiveContainedImage, $024fbc0a2d796fad$export$3e41faf802a29e71 as Tab, $024fbc0a2d796fad$export$b2539bed5023c21c as Tabs, $8560c919ff763930$export$d4973c31938cbfd1 as ShopTheLookButton, $ca6f574bd8772184$export$e183a13865960371 as history_dot_state_to_state, $4147651646da990a$export$916e6850778505f6 as strip_encoded_filter_and_sort, $4147651646da990a$export$58aa3f171519b6d7 as encode_filters, $4147651646da990a$export$f934fa24c3a86811 as decode_filters, $4147651646da990a$export$62acb285a7579555 as encode_sorting, $4147651646da990a$export$766e9676e74997d3 as decode_sorting, $660070e2a394b3c3$export$d7b7ab832c20e2f4 as shopifyContainedImageContextSymbol, $011607bdf658f807$export$e68cff63f76bd15b as ListingProvider, $011607bdf658f807$export$8d0c4fdbb05a2f2e as useListing, $b6440e72ed83671a$export$11354f017ddc9790 as ProductCardIndexProvider, $b6440e72ed83671a$export$e3faf4d95300054f as useProductCardIndex, $660070e2a394b3c3$export$e4b984597b71e989 as ShopifyContainedImage, $f32e14878e75af51$export$6649caad96ef8870 as SlidableItems, $2449872a62a75a20$export$ebdc3711f7e02ccd as make_accurate_width_accessor, $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $b7436a6d1fd64e3b$export$240ecf5363d76c0f as ExtraSentryContextProvider, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $c8d5ff4524619fcd$export$445d8d3f5f706a40 as SolidLayoutWithProvidedElement, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $a0f0e923bad68a9b$export$58e808b1db15d3bc as fetchDepictRecommendations, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $4b2134398dfa83fa$export$c1a6b039e689a58e as get_listings, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b6d5529b253681aa$export$3f238c96c45e6cc6 as ALIGN_TOP, $b6d5529b253681aa$export$902f8b4a7dae5d78 as ALIGN_WIDTH_ON_MODAL, $b6d5529b253681aa$export$7895aadd1956b1c7 as ALIGN_LEFT, $b6d5529b253681aa$export$6060bc6bee850eb6 as SET_CENTERED_LEFT, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version, $58b3487626e85ece$export$316f6f283ae64765 as SearchField, $feffae76d8dc0135$export$5b7c3ce0ebe51f86 as BreadCrumbs, $feffae76d8dc0135$export$de035477d6fef996 as QuickLinks, $442f32a4d80abbde$export$e2bf8ce7779e827e as CategoryPage, $a444a52bafa0dacc$export$54c6d6ff54e72743 as makeSizeAccessors };
+export { $a63fa9cb46ed211b$export$f98b8d5ea7207a1 as setExtraDisplayTransformers, $a63fa9cb46ed211b$export$b2d94be4f02525b2 as getExtraDisplayTransformers, $70bb27cc6be01fc7$export$140423fa4bfb6d63 as ModernResponsiveImage, $e7a7eb102ddc0c79$export$92aa5d691d588f3f as remap_blocks_to_index, $4eb0a704f8f30273$export$d4d96868197be50e as useMobileHover, $5e3d278ef4c80cd7$export$54299a3c81f5425 as useVisibilityState, $f32e14878e75af51$export$eaa625fb39439e37 as useSlidableInformation, $f091294da861020c$export$80bb7300ce6a8be3 as useProductCardIsVisible, $f091294da861020c$export$f223d69ed12f5fb7 as CurrentlyIntersectingContext, $24e27fab9c821b86$export$5bad61ecde080b1f as useExpandingContainerReactive, $07ef910e8ef6b783$export$2c9f9bf2092486aa as LooksSliderOrGrid, $e9d1d09be9e6471e$export$44809a8a3e867e30 as LookCard, $4fd2ba03703a7d92$export$7e1297a3a19f10d8 as PseudoRouter, $de6ccd37192b5fc2$export$83bb9af5671e1dbe as promiseSafeStructuredClone, $90980bd87c9960f9$export$5162a71f252e6122 as preserve_items_in_history_dot_state, $90980bd87c9960f9$export$3064e1e8c6513da3 as prefixes_to_preserve_in_history_dot_state, $a281666e5c15c2ec$export$29d28dadc2d6b631 as allowNativeNavigation, $66db7a014e20802e$export$1ea76ea778b880dd as modalVersionSymbol, $136f1d4d6c7ba6ac$export$e417c49320921907 as createDeparallelizedNoDropResource, $d8dbf52fea1773e2$export$f50b88e2a00918b5 as throw_globally, $42912431795f188e$export$9265e66f26f8e383 as ClassicSearchModal, $500a16dd18ee5a71$export$b0c55aa2e87c4be7 as SearchModalV2, $70bb27cc6be01fc7$export$9d4a4b669b1929ab as ModernResponsiveContainedImage, $024fbc0a2d796fad$export$3e41faf802a29e71 as Tab, $024fbc0a2d796fad$export$b2539bed5023c21c as Tabs, $8560c919ff763930$export$d4973c31938cbfd1 as ShopTheLookButton, $ca6f574bd8772184$export$e183a13865960371 as history_dot_state_to_state, $4147651646da990a$export$916e6850778505f6 as strip_encoded_filter_and_sort, $4147651646da990a$export$58aa3f171519b6d7 as encode_filters, $4147651646da990a$export$f934fa24c3a86811 as decode_filters, $4147651646da990a$export$62acb285a7579555 as encode_sorting, $4147651646da990a$export$766e9676e74997d3 as decode_sorting, $660070e2a394b3c3$export$d7b7ab832c20e2f4 as shopifyContainedImageContextSymbol, $011607bdf658f807$export$e68cff63f76bd15b as ListingProvider, $011607bdf658f807$export$8d0c4fdbb05a2f2e as useListing, $b6440e72ed83671a$export$11354f017ddc9790 as ProductCardIndexProvider, $b6440e72ed83671a$export$e3faf4d95300054f as useProductCardIndex, $660070e2a394b3c3$export$e4b984597b71e989 as ShopifyContainedImage, $f32e14878e75af51$export$6649caad96ef8870 as SlidableItems, $2449872a62a75a20$export$ebdc3711f7e02ccd as make_accurate_width_accessor, $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $b7436a6d1fd64e3b$export$240ecf5363d76c0f as ExtraSentryContextProvider, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $c8d5ff4524619fcd$export$445d8d3f5f706a40 as SolidLayoutWithProvidedElement, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $a0f0e923bad68a9b$export$58e808b1db15d3bc as fetchDepictRecommendations, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $4b2134398dfa83fa$export$c1a6b039e689a58e as get_listings, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b6d5529b253681aa$export$3f238c96c45e6cc6 as ALIGN_TOP, $b6d5529b253681aa$export$902f8b4a7dae5d78 as ALIGN_WIDTH_ON_MODAL, $b6d5529b253681aa$export$7895aadd1956b1c7 as ALIGN_LEFT, $b6d5529b253681aa$export$6060bc6bee850eb6 as SET_CENTERED_LEFT, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version, $58b3487626e85ece$export$316f6f283ae64765 as SearchField, $feffae76d8dc0135$export$5b7c3ce0ebe51f86 as BreadCrumbs, $feffae76d8dc0135$export$de035477d6fef996 as QuickLinks, $442f32a4d80abbde$export$e2bf8ce7779e827e as CategoryPage };