@depict-ai/ui 0.0.22 → 0.0.24

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export const embedded_num_products: ({ make_product_count_, set_observed_results
     middle_elements_: Accessor<JSX.Element>;
     on_filters_constructed_: () => void;
 };
-export const version = "0.0.22";
+export const version = "0.0.24";
 export function add_to_version_info(stuff_to_add: {
     [key: string]: string;
 }): void;

package/dist/main.js

@@ -168,7 +168,7 @@ const $93e94e7b0aa8ca88$export$824dde41348efed1 = /*@__PURE__*/ (()=>{
 
 
 
-const $b757f75811f3261f$export$83d89fbfd8236492 = "0.0.22";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "0.0.24";
 
 
 /**
@@ -2376,6 +2376,11 @@ function $0d0b172488865048$export$ef6006467f04ee41({ i18n_: i18n_ , expanded_hie
  */ const $aec24316ed262dc0$export$6c9030e511152266 = 30;
 
 
+function $fc23d7668ae0011d$export$a2cc176055f8f08() {
+    return document.createComment("Please try setting `colsAtSize` on `DepictProvider`/`DepictSearch` to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.");
+}
+
+
 const $fe76fb463cc60b89$var$_tmpl$ = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<div class="PLP-results"></div>`, 2), $fe76fb463cc60b89$var$_tmpl$2 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<div class="cards"></div>`, 2);
 let $fe76fb463cc60b89$var$cached_placeholder_element;
 function $fe76fb463cc60b89$export$3925f87b1545cfc6({ plp_results_: plp_results_ , depict_api_: depict_api_ , all_products_loaded_: all_products_loaded_ , min_products_to_fetch_: min_products_to_fetch_ , query_base_: query_base_ , first_result_in_viewport_: first_result_in_viewport_ , last_result_in_viewport_: last_result_in_viewport_ , scroll_restoration_data_: scroll_restoration_data_ , no_results_options_: no_results_options_ , desktop_filter_elements_: desktop_filter_elements_ , sort_or_filter_open_: sort_or_filter_open_ , rr_options_: rr_options_ , layout_options_: layout_options_ , tenant_object_: tenant_object_ , type_for_tracking_: type_for_tracking_ , id_currently_querying_for_: id_currently_querying_for_  }) {
@@ -2530,6 +2535,7 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({ plp_results_: plp_results_
                         i_o.observe(cards);
                     }));
                     return [
+                        (0, $fc23d7668ae0011d$export$a2cc176055f8f08)(),
                         cards,
                         style
                     ];
@@ -6459,6 +6465,7 @@ function $2f8c7dc07090fca9$export$ff21851bb5d30e15({ search_field_value_: search
 
 
 
+
 const $fb29c6201c369e39$var$_tmpl$ = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<div class="cards"></div>`, 2), $fb29c6201c369e39$var$_tmpl$2 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<div class="search-recs"><h3 class="search-recs-title"></h3></div>`, 4), $fb29c6201c369e39$var$_tmpl$3 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<button class="show-more major" type="button"></button>`, 2);
 const $fb29c6201c369e39$export$1c8c715550dc689d = 2;
 function $fb29c6201c369e39$export$7de92c4c2205ebf3({ depict_api_: depict_api_ , i18n_: i18n_ , tenant_object_: tenant_object_ , search_query_base_: search_query_base_ , rr_options_: rr_options_ , showing_recommendation_rows_: showing_recommendation_rows_ , view_more_button_: view_more_button_ = true , layout_options_: layout_options_  }) {
@@ -6468,6 +6475,7 @@ function $fb29c6201c369e39$export$7de92c4c2205ebf3({ depict_api_: depict_api_ ,
     const main_element = (()=>{
         const _el$2 = $fb29c6201c369e39$var$_tmpl$2.cloneNode(true), _el$3 = _el$2.firstChild;
         (0, $iBTHO$solidjsweb.insert)(_el$3, ()=>i18n_.search_recs_title_());
+        (0, $iBTHO$solidjsweb.insert)(_el$2, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), null);
         (0, $iBTHO$solidjsweb.insert)(_el$2, cards, null);
         return _el$2;
     })();
@@ -6720,10 +6728,18 @@ function $b7d0212db218bf0b$export$2542ffb77b620b02(params_to_default_value) {
 
 const $6ae613870d3380fc$var$_tmpl$ = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<span class="orig price"></span>`, 2), $6ae613870d3380fc$var$_tmpl$2 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<a class="instant-card"><div class="img-part"></div><div class="right-part"><div class="title-brand-tagline"><span class="brand"></span><span class="title"></span></div><div class="price-container"><span class="price"></span></div></div></a>`, 16), $6ae613870d3380fc$var$_tmpl$3 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<div class="tagline"></div>`, 2);
 const $6ae613870d3380fc$export$b05c0ae390cf3e06 = (display_or_variant_container, { i18n: i18n  })=>{
-    // Support for Spendrups displays, should probably be in the Spendrups script
     const display = (0, $iBTHO$solidjs.createMemo)(()=>{
         const display = display_or_variant_container();
+        // Support for backend's new display format
+        if ("variant_displays" in display) {
+            const actual_display = display.variant_displays[display.variant_index];
+            return {
+                image_url: actual_display.image_urls?.[0],
+                ...actual_display
+            };
+        }
         if (display.page_url) return display;
+        // Support for Spendrups displays, should probably be in the Spendrups script
         if (!display?.variants?.length) return;
         return display.variants.filter((v)=>v.product_id == display.product_id)[0];
     });
@@ -6731,6 +6747,7 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = (display_or_variant_container,
     const contained_image = (0, $iBTHO$solidjs.createMemo)(()=>(0, $iBTHO$depictaiutilishared.ContainedImage)({
             aspect_ratio: 1,
             alt: "",
+            rendering_options: {},
             // @ts-ignore
             "data-src": image_url(),
             srcset_opts: {

package/dist/module.js

@@ -117,7 +117,7 @@ const $a79d86d64fb64e8e$export$824dde41348efed1 = /*@__PURE__*/ (()=>{
 
 
 
-const $ec291e0010116877$export$83d89fbfd8236492 = "0.0.22";
+const $ec291e0010116877$export$83d89fbfd8236492 = "0.0.24";
 
 
 /**
@@ -2325,6 +2325,11 @@ function $598245ecfe38f34b$export$ef6006467f04ee41({ i18n_: i18n_ , expanded_hie
  */ const $7747fe1a8c5652e3$export$6c9030e511152266 = 30;
 
 
+function $a458486f22b22f63$export$a2cc176055f8f08() {
+    return document.createComment("Please try setting `colsAtSize` on `DepictProvider`/`DepictSearch` to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.");
+}
+
+
 const $2d25e42846eac370$var$_tmpl$ = /*#__PURE__*/ (0, $kyEB6$template)(`<div class="PLP-results"></div>`, 2), $2d25e42846eac370$var$_tmpl$2 = /*#__PURE__*/ (0, $kyEB6$template)(`<div class="cards"></div>`, 2);
 let $2d25e42846eac370$var$cached_placeholder_element;
 function $2d25e42846eac370$export$3925f87b1545cfc6({ plp_results_: plp_results_ , depict_api_: depict_api_ , all_products_loaded_: all_products_loaded_ , min_products_to_fetch_: min_products_to_fetch_ , query_base_: query_base_ , first_result_in_viewport_: first_result_in_viewport_ , last_result_in_viewport_: last_result_in_viewport_ , scroll_restoration_data_: scroll_restoration_data_ , no_results_options_: no_results_options_ , desktop_filter_elements_: desktop_filter_elements_ , sort_or_filter_open_: sort_or_filter_open_ , rr_options_: rr_options_ , layout_options_: layout_options_ , tenant_object_: tenant_object_ , type_for_tracking_: type_for_tracking_ , id_currently_querying_for_: id_currently_querying_for_  }) {
@@ -2479,6 +2484,7 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({ plp_results_: plp_results_
                         i_o.observe(cards);
                     }));
                     return [
+                        (0, $a458486f22b22f63$export$a2cc176055f8f08)(),
                         cards,
                         style
                     ];
@@ -6408,6 +6414,7 @@ function $857105c41ea47bee$export$ff21851bb5d30e15({ search_field_value_: search
 
 
 
+
 const $172e1b898d457050$var$_tmpl$ = /*#__PURE__*/ (0, $kyEB6$template)(`<div class="cards"></div>`, 2), $172e1b898d457050$var$_tmpl$2 = /*#__PURE__*/ (0, $kyEB6$template)(`<div class="search-recs"><h3 class="search-recs-title"></h3></div>`, 4), $172e1b898d457050$var$_tmpl$3 = /*#__PURE__*/ (0, $kyEB6$template)(`<button class="show-more major" type="button"></button>`, 2);
 const $172e1b898d457050$export$1c8c715550dc689d = 2;
 function $172e1b898d457050$export$7de92c4c2205ebf3({ depict_api_: depict_api_ , i18n_: i18n_ , tenant_object_: tenant_object_ , search_query_base_: search_query_base_ , rr_options_: rr_options_ , showing_recommendation_rows_: showing_recommendation_rows_ , view_more_button_: view_more_button_ = true , layout_options_: layout_options_  }) {
@@ -6417,6 +6424,7 @@ function $172e1b898d457050$export$7de92c4c2205ebf3({ depict_api_: depict_api_ ,
     const main_element = (()=>{
         const _el$2 = $172e1b898d457050$var$_tmpl$2.cloneNode(true), _el$3 = _el$2.firstChild;
         (0, $kyEB6$insert)(_el$3, ()=>i18n_.search_recs_title_());
+        (0, $kyEB6$insert)(_el$2, (0, $a458486f22b22f63$export$a2cc176055f8f08), null);
         (0, $kyEB6$insert)(_el$2, cards, null);
         return _el$2;
     })();
@@ -6669,10 +6677,18 @@ function $13e008d5237dbbee$export$2542ffb77b620b02(params_to_default_value) {
 
 const $e003be2a50d9e5bc$var$_tmpl$ = /*#__PURE__*/ (0, $kyEB6$template)(`<span class="orig price"></span>`, 2), $e003be2a50d9e5bc$var$_tmpl$2 = /*#__PURE__*/ (0, $kyEB6$template)(`<a class="instant-card"><div class="img-part"></div><div class="right-part"><div class="title-brand-tagline"><span class="brand"></span><span class="title"></span></div><div class="price-container"><span class="price"></span></div></div></a>`, 16), $e003be2a50d9e5bc$var$_tmpl$3 = /*#__PURE__*/ (0, $kyEB6$template)(`<div class="tagline"></div>`, 2);
 const $e003be2a50d9e5bc$export$b05c0ae390cf3e06 = (display_or_variant_container, { i18n: i18n  })=>{
-    // Support for Spendrups displays, should probably be in the Spendrups script
     const display = (0, $kyEB6$createMemo)(()=>{
         const display = display_or_variant_container();
+        // Support for backend's new display format
+        if ("variant_displays" in display) {
+            const actual_display = display.variant_displays[display.variant_index];
+            return {
+                image_url: actual_display.image_urls?.[0],
+                ...actual_display
+            };
+        }
         if (display.page_url) return display;
+        // Support for Spendrups displays, should probably be in the Spendrups script
         if (!display?.variants?.length) return;
         return display.variants.filter((v)=>v.product_id == display.product_id)[0];
     });
@@ -6680,6 +6696,7 @@ const $e003be2a50d9e5bc$export$b05c0ae390cf3e06 = (display_or_variant_container,
     const contained_image = (0, $kyEB6$createMemo)(()=>(0, $kyEB6$ContainedImage)({
             aspect_ratio: 1,
             alt: "",
+            rendering_options: {},
             // @ts-ignore
             "data-src": image_url(),
             srcset_opts: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -36,7 +36,7 @@
     }
   },
   "dependencies": {
-    "@depict-ai/utilishared": "^0.0.20",
+    "@depict-ai/utilishared": "^0.0.22",
     "solid-js": "^1.6.2"
   },
   "devDependencies": {