@depict-ai/ui 4.10.17-0 → 4.10.18

package/ES10/index.cjs

@@ -115,7 +115,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.17-0";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.18";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -8252,7 +8252,8 @@ async function $8e8c89c02c16dc7b$export$5d2f6cd705125cd3() {
   $8e8c89c02c16dc7b$var$cachedHlsModule = hlsModule;
   return hlsModule;
 }
-var $c19709057a32b2e7$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<video class=d-standard-content>`);
+var $c19709057a32b2e7$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<video class=d-standard-content>`),
+  $c19709057a32b2e7$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<span class=d-standard-content-text>`);
 function $c19709057a32b2e7$export$780a853d15174484(_ref) {
   let {
     link_: link_,
@@ -8261,7 +8262,9 @@ function $c19709057a32b2e7$export$780a853d15174484(_ref) {
     setAspectRatioWas_: setAspectRatioWas_,
     mediaUrl_: mediaUrl_,
     aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-    imageResizer_: imageResizer_
+    imageResizer_: imageResizer_,
+    text_: text_,
+    textPosition_: textPosition_
   } = _ref;
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $52FdA$solidjs.createSignal();
@@ -8365,6 +8368,14 @@ function $c19709057a32b2e7$export$780a853d15174484(_ref) {
             }
           })];
         }
+      }), $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+        when: text_,
+        get children() {
+          var _el$2 = $52FdA$solidjsweb.getNextElement($c19709057a32b2e7$var$_tmpl$2);
+          $52FdA$solidjsweb.setAttribute(_el$2, "data-position", textPosition_ || "bottom-center");
+          $52FdA$solidjsweb.insert(_el$2, text_);
+          return _el$2;
+        }
       })];
     }
   }));
@@ -8404,13 +8415,17 @@ function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position
         }
       } = 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
+      // Key the "content"-component by its rendered inputs, 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]);
+      const componentCacheKey = JSON.stringify([link, type, url, text !== null && text !== void 0 ? text : null, text_position !== null && text_position !== void 0 ? text_position : null]);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $52FdA$solidjsweb.createComponent((0, $c19709057a32b2e7$export$780a853d15174484), {
@@ -8418,15 +8433,17 @@ function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position
         });
         contentComponents.set(componentCacheKey, component);
       }

package/ES10/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.17-0";
+export const version = "4.10.18";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/ES10/index.js

@@ -10,7 +10,7 @@ import $8tj43$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpe
 /*! 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.10.17-0";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.18";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $8tj43$createSignal(false);
   $8tj43$onCleanup($8tj43$javascript_media_query(media_query, _ref => {
@@ -8147,7 +8147,8 @@ async function $e92c154db502596d$export$5d2f6cd705125cd3() {
   $e92c154db502596d$var$cachedHlsModule = hlsModule;
   return hlsModule;
 }
-var $3b772ef9a35560fe$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<video class=d-standard-content>`);
+var $3b772ef9a35560fe$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<video class=d-standard-content>`),
+  $3b772ef9a35560fe$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<span class=d-standard-content-text>`);
 function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
   let {
     link_: link_,
@@ -8156,7 +8157,9 @@ function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
     setAspectRatioWas_: setAspectRatioWas_,
     mediaUrl_: mediaUrl_,
     aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-    imageResizer_: imageResizer_
+    imageResizer_: imageResizer_,
+    text_: text_,
+    textPosition_: textPosition_
   } = _ref;
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $8tj43$createSignal();
@@ -8260,6 +8263,14 @@ function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
             }
           })];
         }
+      }), $8tj43$createComponent((0, $8tj43$Show), {
+        when: text_,
+        get children() {
+          var _el$2 = $8tj43$getNextElement($3b772ef9a35560fe$var$_tmpl$2);
+          $8tj43$setAttribute(_el$2, "data-position", textPosition_ || "bottom-center");
+          $8tj43$insert(_el$2, text_);
+          return _el$2;
+        }
       })];
     }
   }));
@@ -8299,13 +8310,17 @@ function $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position
         }
       } = 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
+      // Key the "content"-component by its rendered inputs, 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]);
+      const componentCacheKey = JSON.stringify([link, type, url, text !== null && text !== void 0 ? text : null, text_position !== null && text_position !== void 0 ? text_position : null]);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $8tj43$createComponent((0, $3b772ef9a35560fe$export$780a853d15174484), {
@@ -8313,15 +8328,17 @@ function $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position
         });
         contentComponents.set(componentCacheKey, component);
       }

package/latest/index.cjs

@@ -109,7 +109,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.17-0";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.18";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -7815,7 +7815,8 @@ async function $20ff40266d725403$export$5d2f6cd705125cd3() {
   $20ff40266d725403$var$cachedHlsModule = hlsModule;
   return hlsModule;
 }
-var $32c662f618f5d80d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<video class=d-standard-content>`);
+var $32c662f618f5d80d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<video class=d-standard-content>`),
+  $32c662f618f5d80d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class=d-standard-content-text>`);
 function $32c662f618f5d80d$export$780a853d15174484({
   link_: link_,
   type_: type_,
@@ -7823,7 +7824,9 @@ function $32c662f618f5d80d$export$780a853d15174484({
   setAspectRatioWas_: setAspectRatioWas_,
   mediaUrl_: mediaUrl_,
   aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-  imageResizer_: imageResizer_
+  imageResizer_: imageResizer_,
+  text_: text_,
+  textPosition_: textPosition_
 }) {
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $gVhhF$solidjs.createSignal();
@@ -7921,6 +7924,14 @@ function $32c662f618f5d80d$export$780a853d15174484({
             }
           })];
         }
+      }), $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+        when: text_,
+        get children() {
+          var _el$2 = $gVhhF$solidjsweb.getNextElement($32c662f618f5d80d$var$_tmpl$2);
+          $gVhhF$solidjsweb.setAttribute(_el$2, "data-position", textPosition_ || "bottom-center");
+          $gVhhF$solidjsweb.insert(_el$2, text_);
+          return _el$2;
+        }
       })];
     }
   }));
@@ -7959,13 +7970,17 @@ function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position
         }
       } = 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
+      // Key the "content"-component by its rendered inputs, 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]);
+      const componentCacheKey = JSON.stringify([link, type, url, text ?? null, text_position ?? null]);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $gVhhF$solidjsweb.createComponent((0, $32c662f618f5d80d$export$780a853d15174484), {
@@ -7973,15 +7988,17 @@ function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position
         });
         contentComponents.set(componentCacheKey, component);
       }

package/latest/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.17-0";
+export const version = "4.10.18";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.17-0";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.18";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -7713,7 +7713,8 @@ async function $e422ea9eccb7892b$export$5d2f6cd705125cd3() {
   $e422ea9eccb7892b$var$cachedHlsModule = hlsModule;
   return hlsModule;
 }
-var $f916989c4b1be9f7$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<video class=d-standard-content>`);
+var $f916989c4b1be9f7$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<video class=d-standard-content>`),
+  $f916989c4b1be9f7$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<span class=d-standard-content-text>`);
 function $f916989c4b1be9f7$export$780a853d15174484({
   link_: link_,
   type_: type_,
@@ -7721,7 +7722,9 @@ function $f916989c4b1be9f7$export$780a853d15174484({
   setAspectRatioWas_: setAspectRatioWas_,
   mediaUrl_: mediaUrl_,
   aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-  imageResizer_: imageResizer_
+  imageResizer_: imageResizer_,
+  text_: text_,
+  textPosition_: textPosition_
 }) {
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $9HbP8$createSignal();
@@ -7819,6 +7822,14 @@ function $f916989c4b1be9f7$export$780a853d15174484({
             }
           })];
         }
+      }), $9HbP8$createComponent((0, $9HbP8$Show), {
+        when: text_,
+        get children() {
+          var _el$2 = $9HbP8$getNextElement($f916989c4b1be9f7$var$_tmpl$2);
+          $9HbP8$setAttribute(_el$2, "data-position", textPosition_ || "bottom-center");
+          $9HbP8$insert(_el$2, text_);
+          return _el$2;
+        }
       })];
     }
   }));
@@ -7857,13 +7868,17 @@ function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position
         }
       } = 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
+      // Key the "content"-component by its rendered inputs, 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]);
+      const componentCacheKey = JSON.stringify([link, type, url, text ?? null, text_position ?? null]);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $9HbP8$createComponent((0, $f916989c4b1be9f7$export$780a853d15174484), {
@@ -7871,15 +7886,17 @@ function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position
         });
         contentComponents.set(componentCacheKey, component);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.10.17-0",
+  "version": "4.10.18",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,13 +236,12 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "^7.22.6",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.6.9-0",
-    "@depict-ai/types": "^5.6.7-0",
-    "@depict-ai/utilishared": "^2.6.7-0",
+    "@depict-ai/plp-styling": "^4.6.10",
+    "@depict-ai/types": "^5.6.8",
+    "@depict-ai/utilishared": "^2.6.8",
     "solid-js": "^1.9.10"
   },
   "type": "module",
-  "stableVersion": "4.10.16",
   "types": "ES10/index.d.ts",
   "main": "ES10/index.cjs",
   "module": "ES10/index.js"

package/server/ES10/index.cjs

@@ -115,7 +115,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.17-0";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.18";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -6743,7 +6743,8 @@ function $f3db423dc84bc35d$export$140423fa4bfb6d63(props) {
     }
   }));
 }
-var $c19709057a32b2e7$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'];
+var $c19709057a32b2e7$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'],
+  $c19709057a32b2e7$var$_tmpl$2 = ["<span", ' class="d-standard-content-text"', ">", "</span>"];
 function $c19709057a32b2e7$export$780a853d15174484(_ref) {
   let {
     link_: link_,
@@ -6752,7 +6753,9 @@ function $c19709057a32b2e7$export$780a853d15174484(_ref) {
     setAspectRatioWas_: setAspectRatioWas_,
     mediaUrl_: mediaUrl_,
     aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-    imageResizer_: imageResizer_
+    imageResizer_: imageResizer_,
+    text_: text_,
+    textPosition_: textPosition_
   } = _ref;
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $3hooq$solidjs.createSignal();
@@ -6817,6 +6820,11 @@ function $c19709057a32b2e7$export$780a853d15174484(_ref) {
             }
           })];
         }
+      }), $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+        when: text_,
+        get children() {
+          return $3hooq$solidjsweb.ssr($c19709057a32b2e7$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("data-position", $3hooq$solidjsweb.escape(textPosition_, true) || "bottom-center", false), $3hooq$solidjsweb.escape(text_));
+        }
       })];
     }
   }));
@@ -6856,13 +6864,17 @@ function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position
         }
       } = 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
+      // Key the "content"-component by its rendered inputs, 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]);
+      const componentCacheKey = JSON.stringify([link, type, url, text !== null && text !== void 0 ? text : null, text_position !== null && text_position !== void 0 ? text_position : null]);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $3hooq$solidjsweb.createComponent((0, $c19709057a32b2e7$export$780a853d15174484), {
@@ -6870,15 +6882,17 @@ function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position
         });
         contentComponents.set(componentCacheKey, component);
       }

package/server/ES10/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.17-0";
+export const version = "4.10.18";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import $b8hua$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpe
 /*! 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.10.17-0";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.18";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $b8hua$createSignal(false);
   $b8hua$onCleanup($b8hua$javascript_media_query(media_query, _ref => {
@@ -6638,7 +6638,8 @@ function $98688279b9059f50$export$140423fa4bfb6d63(props) {
     }
   }));
 }
-var $3b772ef9a35560fe$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'];
+var $3b772ef9a35560fe$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'],
+  $3b772ef9a35560fe$var$_tmpl$2 = ["<span", ' class="d-standard-content-text"', ">", "</span>"];
 function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
   let {
     link_: link_,
@@ -6647,7 +6648,9 @@ function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
     setAspectRatioWas_: setAspectRatioWas_,
     mediaUrl_: mediaUrl_,
     aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-    imageResizer_: imageResizer_
+    imageResizer_: imageResizer_,
+    text_: text_,
+    textPosition_: textPosition_
   } = _ref;
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $b8hua$createSignal();
@@ -6712,6 +6715,11 @@ function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
             }
           })];
         }
+      }), $b8hua$createComponent((0, $b8hua$Show), {
+        when: text_,
+        get children() {
+          return $b8hua$ssr($3b772ef9a35560fe$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("data-position", $b8hua$escape(textPosition_, true) || "bottom-center", false), $b8hua$escape(text_));
+        }
       })];
     }
   }));
@@ -6751,13 +6759,17 @@ function $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position
         }
       } = 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
+      // Key the "content"-component by its rendered inputs, 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]);
+      const componentCacheKey = JSON.stringify([link, type, url, text !== null && text !== void 0 ? text : null, text_position !== null && text_position !== void 0 ? text_position : null]);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $b8hua$createComponent((0, $3b772ef9a35560fe$export$780a853d15174484), {
@@ -6765,15 +6777,17 @@ function $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position
         });
         contentComponents.set(componentCacheKey, component);
       }

package/server/latest/index.cjs

@@ -109,7 +109,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.17-0";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.18";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $5vyXB$solidjs.createSignal(false);
   $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
@@ -6362,7 +6362,8 @@ function $d212a67662c5cf38$export$140423fa4bfb6d63(props) {
     }
   }));
 }
-var $32c662f618f5d80d$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'];
+var $32c662f618f5d80d$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'],
+  $32c662f618f5d80d$var$_tmpl$2 = ["<span", ' class="d-standard-content-text"', ">", "</span>"];
 function $32c662f618f5d80d$export$780a853d15174484({
   link_: link_,
   type_: type_,
@@ -6370,7 +6371,9 @@ function $32c662f618f5d80d$export$780a853d15174484({
   setAspectRatioWas_: setAspectRatioWas_,
   mediaUrl_: mediaUrl_,
   aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-  imageResizer_: imageResizer_
+  imageResizer_: imageResizer_,
+  text_: text_,
+  textPosition_: textPosition_
 }) {
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $5vyXB$solidjs.createSignal();
@@ -6429,6 +6432,11 @@ function $32c662f618f5d80d$export$780a853d15174484({
             }
           })];
         }
+      }), $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+        when: text_,
+        get children() {
+          return $5vyXB$solidjsweb.ssr($32c662f618f5d80d$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("data-position", $5vyXB$solidjsweb.escape(textPosition_, true) || "bottom-center", false), $5vyXB$solidjsweb.escape(text_));
+        }
       })];
     }
   }));
@@ -6467,13 +6475,17 @@ function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position
         }
       } = 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
+      // Key the "content"-component by its rendered inputs, 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]);
+      const componentCacheKey = JSON.stringify([link, type, url, text ?? null, text_position ?? null]);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $5vyXB$solidjsweb.createComponent((0, $32c662f618f5d80d$export$780a853d15174484), {
@@ -6481,15 +6493,17 @@ function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position
         });
         contentComponents.set(componentCacheKey, component);
       }

package/server/latest/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.17-0";
+export const version = "4.10.18";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.17-0";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.18";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $i7OB2$createSignal(false);
   $i7OB2$onCleanup($i7OB2$javascript_media_query(media_query, ({
@@ -6260,7 +6260,8 @@ function $70bb27cc6be01fc7$export$140423fa4bfb6d63(props) {
     }
   }));
 }
-var $f916989c4b1be9f7$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'];
+var $f916989c4b1be9f7$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'],
+  $f916989c4b1be9f7$var$_tmpl$2 = ["<span", ' class="d-standard-content-text"', ">", "</span>"];
 function $f916989c4b1be9f7$export$780a853d15174484({
   link_: link_,
   type_: type_,
@@ -6268,7 +6269,9 @@ function $f916989c4b1be9f7$export$780a853d15174484({
   setAspectRatioWas_: setAspectRatioWas_,
   mediaUrl_: mediaUrl_,
   aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-  imageResizer_: imageResizer_
+  imageResizer_: imageResizer_,
+  text_: text_,
+  textPosition_: textPosition_
 }) {
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $i7OB2$createSignal();
@@ -6327,6 +6330,11 @@ function $f916989c4b1be9f7$export$780a853d15174484({
             }
           })];
         }
+      }), $i7OB2$createComponent((0, $i7OB2$Show), {
+        when: text_,
+        get children() {
+          return $i7OB2$ssr($f916989c4b1be9f7$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("data-position", $i7OB2$escape(textPosition_, true) || "bottom-center", false), $i7OB2$escape(text_));
+        }
       })];
     }
   }));
@@ -6365,13 +6373,17 @@ function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position
         }
       } = 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
+      // Key the "content"-component by its rendered inputs, 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]);
+      const componentCacheKey = JSON.stringify([link, type, url, text ?? null, text_position ?? null]);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $i7OB2$createComponent((0, $f916989c4b1be9f7$export$780a853d15174484), {
@@ -6379,15 +6391,17 @@ function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position
         });
         contentComponents.set(componentCacheKey, component);
       }