@depict-ai/ui 2.1.17 → 2.1.19

package/server/latest/index.cjs

@@ -70,7 +70,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.17";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.19";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -257,9 +257,9 @@ function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
 function $84798aaa863a4909$export$8d0c4fdbb05a2f2e() {
   return $5vyXB$solidjs.useContext($84798aaa863a4909$var$ListingContext);
 }
-const $93304d59a9747aa6$var$_tmpl$ = ["<div", ' style="', '"></div>'];
+const $93304d59a9747aa6$var$_tmpl$ = ["<div", ' style="', '"', "></div>"];
 function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
-  return $5vyXB$solidjsweb.ssr($93304d59a9747aa6$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrStyle(`position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`));
+  return $5vyXB$solidjsweb.ssr($93304d59a9747aa6$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrStyle(`position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`), $5vyXB$solidjsweb.ssrAttribute("class", $5vyXB$solidjsweb.escape(props.class, true), false));
 }
 function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $5vyXB$solidjs.createSignal(0);
@@ -418,6 +418,9 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
   const container = $5vyXB$solidjsweb.createComponent((0, $93304d59a9747aa6$export$94026ee33dbabc26), {
     get aspectRatio() {
       return props.aspectRatio;
+    },
+    get ["class"]() {
+      return props.class;
     }
   });
   const owner = $5vyXB$solidjs.getOwner();
@@ -922,16 +925,26 @@ function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, ins
   if (insert_after_container) container_element.after(style_element);
   return [container_element, view_more_button_container(), view_less_button_container(), style_element];
 }
+const $363ce4d1d71041aa$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
 function $363ce4d1d71041aa$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   merchant_: merchant_,
-  market_: market_
+  market_: market_,
+  title_: title_
 }) {
   const is_showing_something = $5vyXB$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $5vyXB$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const slider = $5vyXB$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
+  const slider = [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $5vyXB$solidjsweb.ssr($363ce4d1d71041aa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(title()));
+    }
+  }), $5vyXB$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
     arrow_height_: 25,
     arrow_width_: 12.5,
     disable_fading_: true,
@@ -970,7 +983,7 @@ function $363ce4d1d71041aa$export$d41d19e89346fa2({
         }
       });
     }
-  });
+  })];
   return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
       return is_showing_something();
@@ -1036,6 +1049,7 @@ function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
           recommendations_resource_: recommendations_resource_,
           market_: () => props.market,
           merchant_: () => props.merchant,
+          title_: () => props.title,
           layout_options_: $5vyXB$solidjs.createMemo(() => ({
             cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
             ...grid_spacing_override()
@@ -1045,18 +1059,28 @@ function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
     })));
   }, "RecommendationSlider failed");
 }
-const $b8e79813f4f7ebe4$var$_tmpl$ = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
+const $b8e79813f4f7ebe4$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"],
+  $b8e79813f4f7ebe4$var$_tmpl$2 = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
 function $b8e79813f4f7ebe4$export$7da560f849543dff({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   merchant_: merchant_,
   market_: market_,
-  rows_object_: rows_object_
+  rows_object_: rows_object_,
+  title_: title_
 }) {
   const is_showing_something = $5vyXB$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $5vyXB$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const elements = $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($fc23d7668ae0011d$export$a2cc176055f8f08()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $5vyXB$solidjsweb.mergeProps({
+  const elements = [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(title()));
+    }
+  }), $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($fc23d7668ae0011d$export$a2cc176055f8f08()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $5vyXB$solidjsweb.mergeProps({
     get rows() {
       return rows_object_();
     },
@@ -1087,7 +1111,7 @@ function $b8e79813f4f7ebe4$export$7da560f849543dff({
         }
       });
     }
-  }))));
+  }))))];
   return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
       return is_showing_something();
@@ -1137,6 +1161,7 @@ function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
           recommendations_resource_: recommendations_resource_,
           market_: () => props.market,
           merchant_: () => props.merchant,
+          title_: () => props.title,
           layout_options_: $5vyXB$solidjs.createMemo(() => ({
             cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
             ...grid_spacing_override()

package/server/latest/index.d.ts

@@ -1,13 +1,13 @@
 import { JSX, Accessor, Signal, Setter } from "solid-js";
 import { report, Display, Amazing_Slider, ColsAtSize, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
-import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
+import { SearchFilter, SearchRequestV2 } from "@depict-ai/types/api/SearchRequestV2";
 import { SearchFilter as _SearchFilter1, ContentLink, SearchResponse } from "@depict-ai/types/api/SearchResponse";
-import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
+import { BaseCategoryDisplay, ProductListingResponseV2 } from "@depict-ai/types/api/ProductListingResponseV2";
 import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/api/SearchSuggestionsResponse";
-import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
-import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
+import { BaseSearchRequestV2 } from "@depict-ai/types/api/BaseSearchRequestV2";
+import { SearchSuggestionsRequestV2 } from "@depict-ai/types/api/SearchSuggestionsRequestV2";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.17";
+export const version = "2.1.19";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -145,6 +145,7 @@ export function useListing(): Record<symbol, any> | undefined;
  */
 export function ImageContainer(props: {
   aspectRatio: number;
+  class?: string;
 }): HTMLDivElement;
 /**
  * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
@@ -173,10 +174,12 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
  * @property src image source
  * @property aspectRatio aspect ratio of the image
+ * @property class extra class to add to the container
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number;
+  class?: string;
 }): HTMLDivElement;
 /** @jsxImportSource solid-js */
 export function GenericSliderArrowButton(props?: {
@@ -242,6 +245,7 @@ type RecommendationSliderBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
   recommendations: Promise<T[]>;
+  title?: JSX.Element;
 };
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
@@ -260,6 +264,7 @@ export function RecommendationSlider<T extends Display>(props: {
 type RecommendationGridBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
+  title?: JSX.Element;
   recommendations: Promise<T[]>;
   view_more_button?: {
     text: string;
@@ -650,7 +655,7 @@ type ReplaceBaseCategoryDisplay<T> = T extends BaseCategoryDisplay ? BaseCategor
 type _AddPageUrlToDisplay1<T extends any[]> = (T[number] & {
   page_url: string;
 })[];
-type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponse]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponse[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponse[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponse[K]> : ProductListingResponse[K] };
+type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponseV2]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponseV2[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponseV2[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponseV2[K]> : ProductListingResponseV2[K] };
 type DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
   get_metadata?: () => Promise<{
     [k: string]: string;
@@ -667,16 +672,16 @@ export class DepictAPI<InputDisplay extends Display, OutputDisplay extends Moder
   page_url_creator: PageURLCreator<ModernDisplay, OutputDisplay> | undefined;
   display_transformers: DisplayTransformers<ModernDisplay, OutputDisplay> | undefined;
   constructor(options: DepictAPIConstructorOptions<InputDisplay, OutputDisplay>);
-  suggest(input_req: SearchSuggestionsRequest): Promise<SearchSuggestionsResponseAfterURLCreator & {
+  suggest(input_req: SearchSuggestionsRequestV2): Promise<SearchSuggestionsResponseAfterURLCreator & {
     failed?: true;
   }>;
-  query(input_req: SearchRequest): Promise<SearchResponseAfterURLCreator & {
+  query(input_req: SearchRequestV2): Promise<SearchResponseAfterURLCreator & {
     failed?: true;
   }>;
   list(input_req: ProductListingRequestV2): Promise<ProductListingResponseAfterURLCreator & {
     failed?: true;
   }>;
-  get_recommended<T extends Display>(input_req: BaseSearchRequest): Promise<{
+  get_recommended<T extends Display>(input_req: BaseSearchRequestV2): Promise<{
     displays: T[];
   } & {
     failed?: true | undefined;
@@ -1139,4 +1144,4 @@ export const defaultCategoryTitlePlugin: ({
   category_title_: import("solid-js").Accessor<string | undefined>;
   product_count_: import("solid-js").JSX.Element;
 }) => import("solid-js").JSX.Element;
-export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";
+export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV2";

package/server/latest/index.js

@@ -1,12 +1,12 @@
 import { add_to_version_info as $i7OB2$add_to_version_info, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, dlog as $i7OB2$dlog, queueMacroTask as $i7OB2$queueMacroTask, catchify as $i7OB2$catchify, is_safari as $i7OB2$is_safari, observer as $i7OB2$observer, dwarn as $i7OB2$dwarn, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, slider_fractional_factory as $i7OB2$slider_fractional_factory, camelCasifyObject as $i7OB2$camelCasifyObject, 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, layout_media_query_header as $i7OB2$layout_media_query_header, report as $i7OB2$report, useExpandingContainer as $i7OB2$useExpandingContainer, standard_price_format as $i7OB2$standard_price_format, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, fetch_recs as $i7OB2$fetch_recs, snakeCasifyObject as $i7OB2$snakeCasifyObject, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, base_url as $i7OB2$base_url, get_depict_id as $i7OB2$get_depict_id, get_user_id as $i7OB2$get_user_id, get_session_id as $i7OB2$get_session_id, sort_obj as $i7OB2$sort_obj, fetch_retry as $i7OB2$fetch_retry, add_version_query_params as $i7OB2$add_version_query_params, make_url_with_query_params as $i7OB2$make_url_with_query_params, edit_current_page_meta_tags as $i7OB2$edit_current_page_meta_tags, javascript_media_query as $i7OB2$javascript_media_query, use_href_accessor as $i7OB2$use_href_accessor, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, ContainedImage as $i7OB2$ContainedImage, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ListenableSet as $i7OB2$ListenableSet, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { createComponent as $i7OB2$createComponent, insert as $i7OB2$insert, ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, ssrStyle as $i7OB2$ssrStyle, spread as $i7OB2$spread, escape as $i7OB2$escape, ssrAttribute as $i7OB2$ssrAttribute, mergeProps as $i7OB2$mergeProps1, isServer as $i7OB2$isServer, ssrElement as $i7OB2$ssrElement, ssrClassList as $i7OB2$ssrClassList, Dynamic as $i7OB2$Dynamic } from "solid-js/web";
+import { createComponent as $i7OB2$createComponent, 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, mergeProps as $i7OB2$mergeProps1, 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, createMemo as $i7OB2$createMemo, createContext as $i7OB2$createContext, useContext as $i7OB2$useContext, mergeProps as $i7OB2$mergeProps, Show as $i7OB2$Show, createResource as $i7OB2$createResource, Suspense as $i7OB2$Suspense, untrack as $i7OB2$untrack, createRenderEffect as $i7OB2$createRenderEffect, Index as $i7OB2$Index, createRoot as $i7OB2$createRoot, For as $i7OB2$For, createUniqueId as $i7OB2$createUniqueId, createComputed as $i7OB2$createComputed, ErrorBoundary as $i7OB2$ErrorBoundary, batch as $i7OB2$batch, on as $i7OB2$on, createReaction as $i7OB2$createReaction, mapArray as $i7OB2$mapArray } from "solid-js";
 import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from "solid-js/store";
 
 /*! 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 = "2.1.17";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.19";
 const $4147651646da990a$var$fallback_operator = "in";
 const $4147651646da990a$var$fallback_token = "";
 const $4147651646da990a$var$legacy_filter_prefix = "filter_";
@@ -193,9 +193,9 @@ function $011607bdf658f807$export$e68cff63f76bd15b(props) {
 function $011607bdf658f807$export$8d0c4fdbb05a2f2e() {
   return $i7OB2$useContext($011607bdf658f807$var$ListingContext);
 }
-const $f18d425032111270$var$_tmpl$ = ["<div", ' style="', '"></div>'];
+const $f18d425032111270$var$_tmpl$ = ["<div", ' style="', '"', "></div>"];
 function $f18d425032111270$export$94026ee33dbabc26(props) {
-  return $i7OB2$ssr($f18d425032111270$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrStyle(`position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`));
+  return $i7OB2$ssr($f18d425032111270$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrStyle(`position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`), $i7OB2$ssrAttribute("class", $i7OB2$escape(props.class, true), false));
 }
 function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $i7OB2$createSignal(0);
@@ -354,6 +354,9 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
   const container = $i7OB2$createComponent((0, $f18d425032111270$export$94026ee33dbabc26), {
     get aspectRatio() {
       return props.aspectRatio;
+    },
+    get ["class"]() {
+      return props.class;
     }
   });
   const owner = $i7OB2$getOwner();
@@ -858,16 +861,26 @@ function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, ins
   if (insert_after_container) container_element.after(style_element);
   return [container_element, view_more_button_container(), view_less_button_container(), style_element];
 }
+const $c4492d24952ed731$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
 function $c4492d24952ed731$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   merchant_: merchant_,
-  market_: market_
+  market_: market_,
+  title_: title_
 }) {
   const is_showing_something = $i7OB2$createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $i7OB2$createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const slider = $i7OB2$createComponent((0, $f32e14878e75af51$export$6649caad96ef8870), {
+  const slider = [$i7OB2$createComponent((0, $i7OB2$Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $i7OB2$ssr($c4492d24952ed731$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape(title()));
+    }
+  }), $i7OB2$createComponent((0, $f32e14878e75af51$export$6649caad96ef8870), {
     arrow_height_: 25,
     arrow_width_: 12.5,
     disable_fading_: true,
@@ -906,7 +919,7 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
         }
       });
     }
-  });
+  })];
   return $i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
       return is_showing_something();
@@ -972,6 +985,7 @@ function $ee116da074deb002$export$9574e176201e5e8d(props) {
           recommendations_resource_: recommendations_resource_,
           market_: () => props.market,
           merchant_: () => props.merchant,
+          title_: () => props.title,
           layout_options_: $i7OB2$createMemo(() => ({
             cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77(props.cols_at_size),
             ...grid_spacing_override()
@@ -981,18 +995,28 @@ function $ee116da074deb002$export$9574e176201e5e8d(props) {
     })));
   }, "RecommendationSlider failed");
 }
-const $3da8afe3ed57cf34$var$_tmpl$ = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
+const $3da8afe3ed57cf34$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"],
+  $3da8afe3ed57cf34$var$_tmpl$2 = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
 function $3da8afe3ed57cf34$export$7da560f849543dff({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   merchant_: merchant_,
   market_: market_,
-  rows_object_: rows_object_
+  rows_object_: rows_object_,
+  title_: title_
 }) {
   const is_showing_something = $i7OB2$createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $i7OB2$createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const elements = $i7OB2$ssr($3da8afe3ed57cf34$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($a458486f22b22f63$export$a2cc176055f8f08()), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps1({
+  const elements = [$i7OB2$createComponent((0, $i7OB2$Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $i7OB2$ssr($3da8afe3ed57cf34$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape(title()));
+    }
+  }), $i7OB2$ssr($3da8afe3ed57cf34$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($a458486f22b22f63$export$a2cc176055f8f08()), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps1({
     get rows() {
       return rows_object_();
     },
@@ -1023,7 +1047,7 @@ function $3da8afe3ed57cf34$export$7da560f849543dff({
         }
       });
     }
-  }))));
+  }))))];
   return $i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
       return is_showing_something();
@@ -1073,6 +1097,7 @@ function $9ea5383493360761$export$9756467d34d91cdb(props) {
           recommendations_resource_: recommendations_resource_,
           market_: () => props.market,
           merchant_: () => props.merchant,
+          title_: () => props.title,
           layout_options_: $i7OB2$createMemo(() => ({
             cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77(props.cols_at_size),
             ...grid_spacing_override()