@depict-ai/ui 1.4.24 → 2.0.0

package/server/latest/index.js

@@ -1,12 +1,11 @@
-import { add_to_version_info as $i7OB2$add_to_version_info, make_random_classname as $i7OB2$make_random_classname, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, catchify as $i7OB2$catchify, 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, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, is_safari as $i7OB2$is_safari, observer as $i7OB2$observer, useExpandingContainer as $i7OB2$useExpandingContainer, standard_price_format as $i7OB2$standard_price_format, dlog as $i7OB2$dlog, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, javascript_media_query as $i7OB2$javascript_media_query, 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, dwarn as $i7OB2$dwarn, make_url_with_query_params as $i7OB2$make_url_with_query_params, edit_current_page_meta_tags as $i7OB2$edit_current_page_meta_tags, use_href_accessor as $i7OB2$use_href_accessor, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, queueMacroTask as $i7OB2$queueMacroTask, 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, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { add_to_version_info as $i7OB2$add_to_version_info, 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, catchify as $i7OB2$catchify, 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, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, observer as $i7OB2$observer, is_safari as $i7OB2$is_safari, useExpandingContainer as $i7OB2$useExpandingContainer, standard_price_format as $i7OB2$standard_price_format, dlog as $i7OB2$dlog, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, javascript_media_query as $i7OB2$javascript_media_query, 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, dwarn as $i7OB2$dwarn, make_url_with_query_params as $i7OB2$make_url_with_query_params, edit_current_page_meta_tags as $i7OB2$edit_current_page_meta_tags, use_href_accessor as $i7OB2$use_href_accessor, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, queueMacroTask as $i7OB2$queueMacroTask, 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 { ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, escape as $i7OB2$escape, createComponent as $i7OB2$createComponent, mergeProps as $i7OB2$mergeProps, isServer as $i7OB2$isServer, ssrElement as $i7OB2$ssrElement, ssrClassList as $i7OB2$ssrClassList, insert as $i7OB2$insert, ssrAttribute as $i7OB2$ssrAttribute, ssrStyle as $i7OB2$ssrStyle, Dynamic as $i7OB2$Dynamic } from "solid-js/web";
-import { createMemo as $i7OB2$createMemo, createResource as $i7OB2$createResource, Suspense as $i7OB2$Suspense, Show as $i7OB2$Show, createSignal as $i7OB2$createSignal, createRenderEffect as $i7OB2$createRenderEffect, createRoot as $i7OB2$createRoot, onCleanup as $i7OB2$onCleanup, For as $i7OB2$For, getOwner as $i7OB2$getOwner, runWithOwner as $i7OB2$runWithOwner, createEffect as $i7OB2$createEffect, untrack as $i7OB2$untrack, createComputed as $i7OB2$createComputed, ErrorBoundary as $i7OB2$ErrorBoundary, Index as $i7OB2$Index, on as $i7OB2$on, batch as $i7OB2$batch, createReaction as $i7OB2$createReaction } from "solid-js";
-import { slider_fractional_factory as $i7OB2$slider_fractional_factory } from "@depict-ai/utilishared/latest/latest";
+import { createMemo as $i7OB2$createMemo, createResource as $i7OB2$createResource, Suspense as $i7OB2$Suspense, Show as $i7OB2$Show, createSignal as $i7OB2$createSignal, createRenderEffect as $i7OB2$createRenderEffect, createRoot as $i7OB2$createRoot, onCleanup as $i7OB2$onCleanup, For as $i7OB2$For, getOwner as $i7OB2$getOwner, runWithOwner as $i7OB2$runWithOwner, createEffect as $i7OB2$createEffect, untrack as $i7OB2$untrack, createUniqueId as $i7OB2$createUniqueId, createComputed as $i7OB2$createComputed, ErrorBoundary as $i7OB2$ErrorBoundary, Index as $i7OB2$Index, on as $i7OB2$on, batch as $i7OB2$batch, createReaction as $i7OB2$createReaction } from "solid-js";
 
 /*! 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 = "1.4.24";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.0";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -65,7 +64,9 @@ function $1848f7cca286fbab$export$ff7109b9b2b206ba(sdk_cols_at_size, min_width_f
 }
 function $a458486f22b22f63$export$a2cc176055f8f08() {
   const text = "Please try setting `colsAtSize` on the `SearchPage`/`CategoryPage` components 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.";
-  return (0, $i7OB2$isServer) ? `<!-- ${text} -->` : document.createComment(text);
+  return (0, $i7OB2$isServer) ? {
+    t: `<!-- ${text} -->`
+  } : document.createComment(text);
 }
 function $a52235d12ccf9c88$export$2f0cbfbb4354bb52(elements) {
   // FYI this probably doesn't work on hugely deep nestings or large amount of elements
@@ -272,21 +273,32 @@ function $b7436a6d1fd64e3b$export$b69d0d92862de18b(props) {
     }
   });
 }
-const $c8d5ff4524619fcd$var$_tmpl$ = ["<style", ' type="text/css">', "</style>"],
-  $c8d5ff4524619fcd$var$_tmpl$2 = ["<div", ' class="', '">', "</div>"];
+const $c8d5ff4524619fcd$var$_tmpl$ = ["<div", ' class="', '">', "</div>"],
+  $c8d5ff4524619fcd$var$_tmpl$2 = ["<style", ' type="text/css">', "</style>"];
 function $c8d5ff4524619fcd$export$d21e32dfedac04be(props) {
-  const container_element_ = $i7OB2$ssrElement("div", props.element_attributes, () => $i7OB2$escape(props.children), true); // Don't want this in the error boundary below, it should only be for the actual layouting
+  const container_class = "x" + $i7OB2$createUniqueId();
+  const container_element_ = $i7OB2$ssrElement("div", () => ({
+    ...props.element_attributes,
+    "classList": {
+      [container_class]: true
+    }
+  }), () => $i7OB2$escape(props.children), true); // Don't want this in the error boundary below, it should only be for the actual layouting
   return $i7OB2$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
     get message_() {
       return "Failed calculating " + props.layout + " layout";
     },
     severity_: "error",
     get children() {
-      return $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element_);
+      return $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element_, false, container_class);
     }
   });
 }
-function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, insert_after_container = false) {
+function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, insert_after_container = false, container_class) {
+  if (!container_class) {
+    // only try to add if it wasn't provided, so that we have a code path without classList when doing SSR
+    container_class = $i7OB2$make_random_classname();
+    container_element.classList.add(container_class);
+  }
   // Copy of Layout from utilishared but using solid-js signals instead of async iterable IPNS
   const show_all_rows = $i7OB2$createMemo(() => props.rows === "all");
   const rows_or_empty_object = $i7OB2$createMemo(() => show_all_rows() ? {} : props.rows);
@@ -301,28 +313,27 @@ function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, ins
     return !(!button || Array.isArray(button) && !button.length);
   });
   const [get_styling, set_styling] = $i7OB2$createSignal();
-  const container_class = $i7OB2$make_random_classname();
   const selector_beginning = `.depict .${container_class}>`; // class so ppl can have id if needed
   const [get_children_count, set_children_count] = $i7OB2$createSignal(0);
-  const update_children_count = () => set_children_count(container_element.children.length);
+  const update_children_count = () => (0, $i7OB2$isServer) ? 20 : set_children_count(container_element.children.length);
   const col_styling = $i7OB2$createMemo(() => $i7OB2$n_col_styling_with_dist(selector_beginning, props.grid_spacing, props.cols_at_size, props.layout, props.override_vertical_spacing));
   const default_currently_visible_signal = $i7OB2$createSignal($i7OB2$untrack(() => rows_or_empty_object().start_rows ?? 1)); // Keep this signal here, so it doesn't change when rows_or_empty_object and I think it's to be expected that the "internal default signal" stays the same
   const rows_visible_signal = $i7OB2$createMemo(() => rows_or_empty_object().currently_visible || default_currently_visible_signal);
   const get_rows_visible = $i7OB2$createMemo(() => rows_visible_signal()[0]());
   const set_rows_visible = $i7OB2$createMemo(() => rows_visible_signal()[1]);
-  const view_more_button_class = $i7OB2$make_random_classname();
-  const view_less_button_class = $i7OB2$make_random_classname();
-  const style_element = $i7OB2$ssr($c8d5ff4524619fcd$var$_tmpl$, $i7OB2$ssrHydrationKey(), get_styling);
-  const view_more_button_container = $i7OB2$createMemo(() => have_a_view_more_button() && $i7OB2$ssr($c8d5ff4524619fcd$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `load-more-container ${$i7OB2$escape(view_more_button_class, true)}`, $i7OB2$escape(rows_or_empty_object().button)));
+  const view_more_button_class = "m" + $i7OB2$createUniqueId();
+  const view_less_button_class = "l" + $i7OB2$createUniqueId(); //  https://github.com/solidjs/solid-docs/issues/263#issuecomment-1622388079
+  const view_more_button_container = $i7OB2$createMemo(() => have_a_view_more_button() && $i7OB2$ssr($c8d5ff4524619fcd$var$_tmpl$, $i7OB2$ssrHydrationKey(), `load-more-container ${$i7OB2$escape(view_more_button_class, true)}`, $i7OB2$escape(rows_or_empty_object().button)));
   // We need to have duplicate buttons because which ones is shown depends on the number of rows visible and therefore on the viewport size and therefore on the css media queries
-  const view_less_button_container = $i7OB2$createMemo(() => have_a_view_less_button() && $i7OB2$ssr($c8d5ff4524619fcd$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `load-less-container ${$i7OB2$escape(view_less_button_class, true)}`, $i7OB2$escape(rows_or_empty_object().view_less_button)));
-  container_element.classList.add(container_class);
+  const view_less_button_container = $i7OB2$createMemo(() => have_a_view_less_button() && $i7OB2$ssr($c8d5ff4524619fcd$var$_tmpl$, $i7OB2$ssrHydrationKey(), `load-less-container ${$i7OB2$escape(view_less_button_class, true)}`, $i7OB2$escape(rows_or_empty_object().view_less_button)));
+  const [force_style_update, set_force_style_update] = $i7OB2$createSignal("");
   $i7OB2$createComputed(() => {
     // Make sure we don't have more rows visible than max_rows (this could happen by max_rows being decreased)
     const rows_visible = get_rows_visible();
     const max_rows = rows_or_empty_object().max_rows;
     if (!isNaN(max_rows) && max_rows >= 0 && rows_visible > max_rows) set_rows_visible()(max_rows);
   });
+  $i7OB2$createEffect(() => set_force_style_update(" ")); // force style update after hydration due to https://discord.com/channels/722131463138705510/722167424186843267/1151544212517552168
   $i7OB2$createRenderEffect(() => {
     // Be careful to only read show_all_rows in here (ofc doesn't apply to nested effects)
     if (show_all_rows()) {
@@ -331,11 +342,13 @@ function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, ins
       return;
     }
     update_children_count();
-    const mutation_observer = new MutationObserver($i7OB2$catchify(update_children_count));
-    mutation_observer.observe(container_element, {
-      childList: true
-    });
-    $i7OB2$onCleanup(() => mutation_observer.disconnect());
+    if (!(0, $i7OB2$isServer)) {
+      const mutation_observer = new MutationObserver($i7OB2$catchify(update_children_count));
+      mutation_observer.observe(container_element, {
+        childList: true
+      });
+      $i7OB2$onCleanup(() => mutation_observer.disconnect());
+    }
     set_styling(
     // this is needed because solid will think that the memo-accessor is a setter function otherwise
     () => $i7OB2$createMemo(() => {
@@ -346,7 +359,7 @@ function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, ins
       } = rows_or_empty_object();
       const rows_visible = get_rows_visible();
       const children_count = get_children_count();
-      return col_styling() + props.cols_at_size.map(options => {
+      return force_style_update() + col_styling() + props.cols_at_size.map(options => {
         const [recs_per_row, min, max] = options;
         let should_hide_view_more_button;
         let visible_recs;
@@ -367,6 +380,7 @@ function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, ins
       }).join("");
     }));
   });
+  const style_element = $i7OB2$ssr($c8d5ff4524619fcd$var$_tmpl$2, $i7OB2$ssrHydrationKey(), get_styling); // need to create this after set_styling has been called or else there will be no styling in the SSR'd output
   if (insert_after_container) container_element.after(style_element);
   return [container_element, view_more_button_container(), view_less_button_container(), style_element];
 }
@@ -380,12 +394,20 @@ function $f32e14878e75af51$export$6649caad96ef8870({
   slider_ref_: slider_ref_,
   faded_opacity_ = 0.7,
   mutation_plugins_ = [],
-  disable_fading_: disable_fading_
+  disable_fading_: disable_fading_,
+  arrow_width_: arrow_width_,
+  arrow_height_: arrow_height_
 }) {
   const slider = new (0, $i7OB2$Amazing_Slider)({
     button_contents: {
-      left: [$i7OB2$ssr($f32e14878e75af51$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {})))],
-      right: [$i7OB2$ssr($f32e14878e75af51$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {})))]
+      left: [$i7OB2$ssr($f32e14878e75af51$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
+        height_: arrow_height_,
+        width_: arrow_width_
+      })))],
+      right: [$i7OB2$ssr($f32e14878e75af51$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
+        height_: arrow_height_,
+        width_: arrow_width_
+      })))]
     },
     constructor_plugins: [$i7OB2$slider_snap_css().constructor_plugin],
     mutation_plugins: [...(disable_fading_ ? [] : [$i7OB2$slider_fading_factory({
@@ -408,6 +430,8 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
   const is_showing_something = $i7OB2$createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
   const num_placeholders_ = () => 20;
   const slider = $i7OB2$createComponent((0, $f32e14878e75af51$export$6649caad96ef8870), {
+    arrow_height_: 25,
+    arrow_width_: 12.5,
     disable_fading_: true,
     slider_ref_: slider => {
       const {
@@ -452,30 +476,62 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
     children: slider
   });
 }
+function $16b52438165aafe2$export$23fca46f3143581f(component, error_message) {
+  const component_in_error_boundary = do_with_elements => {
+    const error_boundary_wrapped = $b7436a6d1fd64e3b$export$b69d0d92862de18b({
+      severity_: "error",
+      message_: error_message,
+      get children() {
+        const elements = component();
+        do_with_elements?.(elements);
+        return elements;
+      }
+    });
+    // This might return an accessor, in that case we need to "unwrap" it since our SDK consumers expect HTML elements or arrays thereof
+    if (typeof error_boundary_wrapped === "function")
+      // @ts-ignore
+      return error_boundary_wrapped();
+    // On the server it returns a string, so we just return that
+    return error_boundary_wrapped;
+  };
+  const owner = $i7OB2$getOwner();
+  if (owner == null) return $i7OB2$createRoot(dispose => {
+    // if we're not already run in a root, create a root and automatically dispose it when the first returned element is removed from the DOM
+    return component_in_error_boundary(elements => {
+      const have_multiple = Array.isArray(elements);
+      if (have_multiple ? !elements?.length : !elements) return;
+      (0, $i7OB2$observer).onremoved(have_multiple ? elements[0] : elements, dispose);
+    });
+  });else
+    // we're already in a root so cleanups are handled
+    return component_in_error_boundary();
+}
 const $ee116da074deb002$var$_tmpl$ = ["<div", ' class="depict recommendations">', "</div>"];
 function $ee116da074deb002$export$9574e176201e5e8d(props) {
-  const grid_spacing_override = $i7OB2$createMemo(() => {
-    const {
-      grid_spacing: grid_spacing
-    } = props; // can be reactive
-    return typeof grid_spacing === "string" ? {
-      grid_spacing: grid_spacing
-    } : {
-      override_vertical_spacing: grid_spacing.vertical,
-      grid_spacing: grid_spacing.horizontal
-    };
-  });
-  const [recommendations_resource_] = $i7OB2$createResource(() => props.recommendations, recs => recs);
-  return $i7OB2$ssr($ee116da074deb002$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($c4492d24952ed731$export$d41d19e89346fa2({
-    product_card_template_: (...args) => props.product_card_template(...args),
-    recommendations_resource_: recommendations_resource_,
-    market_: () => props.market,
-    merchant_: () => props.merchant,
-    layout_options_: $i7OB2$createMemo(() => ({
-      cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77($1848f7cca286fbab$export$ff7109b9b2b206ba(props.cols_at_size)),
-      ...grid_spacing_override()
-    }))
-  })));
+  return $16b52438165aafe2$export$23fca46f3143581f(() => {
+    const grid_spacing_override = $i7OB2$createMemo(() => {
+      const {
+        grid_spacing: grid_spacing
+      } = props; // can be reactive
+      return typeof grid_spacing === "string" ? {
+        grid_spacing: grid_spacing
+      } : {
+        override_vertical_spacing: grid_spacing.vertical,
+        grid_spacing: grid_spacing.horizontal
+      };
+    });
+    const [recommendations_resource_] = $i7OB2$createResource(() => props.recommendations, recs => recs);
+    return $i7OB2$ssr($ee116da074deb002$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($c4492d24952ed731$export$d41d19e89346fa2({
+      product_card_template_: (...args) => props.product_card_template(...args),
+      recommendations_resource_: recommendations_resource_,
+      market_: () => props.market,
+      merchant_: () => props.merchant,
+      layout_options_: $i7OB2$createMemo(() => ({
+        cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77($1848f7cca286fbab$export$ff7109b9b2b206ba(props.cols_at_size)),
+        ...grid_spacing_override()
+      }))
+    })));
+  }, "RecommendationSlider failed");
 }
 const $3da8afe3ed57cf34$var$_tmpl$ = ["<div", ' class="recommendation-grid"><!--#-->', "<!--/--><!--#-->", "<!--/--></div>"];
 function $3da8afe3ed57cf34$export$7da560f849543dff({
@@ -531,38 +587,40 @@ function $3da8afe3ed57cf34$export$7da560f849543dff({
 const $9ea5383493360761$var$_tmpl$ = ["<button", ' class="show-more major" type="button">', "</button>"],
   $9ea5383493360761$var$_tmpl$2 = ["<div", ' class="depict plp recommendations">', "</div>"];
 function $9ea5383493360761$export$9756467d34d91cdb(props) {
-  const rows_object_ = $i7OB2$createMemo(() => {
-    const view_more_button = props.view_more_button;
-    if (!view_more_button) return "all";
-    return {
-      start_rows: view_more_button.start_rows,
-      rows_per_click: view_more_button.rows_per_click,
-      button: $i7OB2$ssr($9ea5383493360761$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape(view_more_button.text))
-    };
-  });
-  const grid_spacing_override = $i7OB2$createMemo(() => {
-    const {
-      grid_spacing: grid_spacing
-    } = props; // can be reactive
-    return typeof grid_spacing === "string" ? {
-      grid_spacing: grid_spacing
-    } : {
-      override_vertical_spacing: grid_spacing.vertical,
-      grid_spacing: grid_spacing.horizontal
-    };
-  });
-  const [recommendations_resource_] = $i7OB2$createResource(() => props.recommendations, recs => recs);
-  return $i7OB2$ssr($9ea5383493360761$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($3da8afe3ed57cf34$export$7da560f849543dff({
-    rows_object_: rows_object_,
-    product_card_template_: (...args) => props.product_card_template(...args),
-    recommendations_resource_: recommendations_resource_,
-    market_: () => props.market,
-    merchant_: () => props.merchant,
-    layout_options_: $i7OB2$createMemo(() => ({
-      cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77($1848f7cca286fbab$export$ff7109b9b2b206ba(props.cols_at_size)),
-      ...grid_spacing_override()
-    }))
-  })));
+  return $16b52438165aafe2$export$23fca46f3143581f(() => {
+    const rows_object_ = $i7OB2$createMemo(() => {
+      const view_more_button = props.view_more_button;
+      if (!view_more_button) return "all";
+      return {
+        start_rows: view_more_button.start_rows,
+        rows_per_click: view_more_button.rows_per_click ?? 2,
+        button: $i7OB2$ssr($9ea5383493360761$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape(view_more_button.text))
+      };
+    });
+    const grid_spacing_override = $i7OB2$createMemo(() => {
+      const {
+        grid_spacing: grid_spacing
+      } = props; // can be reactive
+      return typeof grid_spacing === "string" ? {
+        grid_spacing: grid_spacing
+      } : {
+        override_vertical_spacing: grid_spacing.vertical,
+        grid_spacing: grid_spacing.horizontal
+      };
+    });
+    const [recommendations_resource_] = $i7OB2$createResource(() => props.recommendations, recs => recs);
+    return $i7OB2$ssr($9ea5383493360761$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($3da8afe3ed57cf34$export$7da560f849543dff({
+      rows_object_: rows_object_,
+      product_card_template_: (...args) => props.product_card_template(...args),
+      recommendations_resource_: recommendations_resource_,
+      market_: () => props.market,
+      merchant_: () => props.merchant,
+      layout_options_: $i7OB2$createMemo(() => ({
+        cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77($1848f7cca286fbab$export$ff7109b9b2b206ba(props.cols_at_size)),
+        ...grid_spacing_override()
+      }))
+    })));
+  }, "RecommendationGrid failed");
 }
 function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $i7OB2$createSignal(0);
@@ -940,16 +998,16 @@ function $1adfe60f3a14a1d7$export$fecbb157621501bd({
   return outmost_element;
 }
 const $87c712b5b33f24f7$var$_tmpl$ = ["<span", ' class="count">', "</span>"],
-  $87c712b5b33f24f7$var$_tmpl$2 = ["<label", ' class="', '"', '><div class="left"><input type="checkbox"', "", '><span class="custom-indicator"></span><span class="text line-clamp">', "</span></div><!--#-->", "<!--/--></label>"];
+  $87c712b5b33f24f7$var$_tmpl$2 = ["<label", ' class="', '"', '><div class="left"><input type="checkbox"', "", "", '><span class="custom-indicator"></span><span class="text line-clamp">', "</span></div><!--#-->", "<!--/--></label>"];
 const $87c712b5b33f24f7$export$48513f6b9f8ce62d = props => {
   // It seems like there's no diffing without memos here (since we often just have computations in the getters above that update to the same result often because their dependencies change with unrelated changes often), so put memos here to avoid unneeded DOM changes
   const count = $i7OB2$createMemo(() => props.count_);
   const label = $i7OB2$createMemo(() => props.label_);
   const checked = $i7OB2$createMemo(() => props.checked_);
   const value = $i7OB2$createMemo(() => props.value_);
-  const is_count_zero = $i7OB2$createMemo(() => props.is_count_zero_);
+  const is_count_zero = $i7OB2$createMemo(() => props.is_count_zero_ || count() === 0);
   const id = $i7OB2$make_random_classname();
-  return (/* We can't use actual margin because ExpandingContainer gets messed up */$i7OB2$ssr($87c712b5b33f24f7$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `input-row ${is_count_zero() || count() === 0 ? "count-0" : ""}`, $i7OB2$ssrAttribute("for", $i7OB2$escape(id, true), false), $i7OB2$ssrAttribute("name", $i7OB2$escape(value(), true), false) + $i7OB2$ssrAttribute("id", $i7OB2$escape(id, true), false), $i7OB2$ssrAttribute("checked", checked(), true), $i7OB2$escape(label()) || $i7OB2$escape(value()), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
+  return (/* We can't use actual margin because ExpandingContainer gets messed up */$i7OB2$ssr($87c712b5b33f24f7$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `input-row ${is_count_zero() ? "count-0" : ""}`, $i7OB2$ssrAttribute("for", $i7OB2$escape(id, true), false), $i7OB2$ssrAttribute("name", $i7OB2$escape(value(), true), false) + $i7OB2$ssrAttribute("id", $i7OB2$escape(id, true), false), $i7OB2$ssrAttribute("checked", checked(), true), $i7OB2$ssrAttribute("disabled", !checked() && is_count_zero(), true), $i7OB2$escape(label()) || $i7OB2$escape(value()), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
       get when() {
         return count() != undefined;
       },
@@ -1326,7 +1384,7 @@ function $0b6bc2f8309efa8a$export$e5c2828934226505({
 const $1c8cac76cb67e9af$var$_tmpl$ = ["<form", ' class="', '"><!--#-->', "<!--/--><!--#-->", "<!--/--></form>"],
   $1c8cac76cb67e9af$var$_tmpl$2 = ["<div", ' class="', '"><!--#-->', "<!--/--><!--#-->", "<!--/--></div>"],
   $1c8cac76cb67e9af$var$_tmpl$3 = ["<details", "></details>"],
-  $1c8cac76cb67e9af$var$_tmpl$4 = ["<summary", ' class="category-parent"><div class="summary"><span class="count">', "</span><!--#-->", "<!--/--></div></summary>"];
+  $1c8cac76cb67e9af$var$_tmpl$4 = ["<summary", ' class="category-parent"><div class="summary"><span class="', '">', "</span><!--#-->", "<!--/--></div></summary>"];
 const $1c8cac76cb67e9af$var$max_visible_without_collapsing = 15;
 const $1c8cac76cb67e9af$var$show_non_collapsible_when_collapsed = 4;
 function $1c8cac76cb67e9af$export$a32086fa6616eafd({
@@ -1528,7 +1586,7 @@ function $1c8cac76cb67e9af$var$render_stuff(data, existing_filter, i18n_) {
                   return $i7OB2$ssr($1c8cac76cb67e9af$var$_tmpl$3, $i7OB2$ssrHydrationKey());
                 },
                 get summary_() {
-                  return $i7OB2$ssr($1c8cac76cb67e9af$var$_tmpl$4, $i7OB2$ssrHydrationKey(), $i7OB2$escape(value()?.count_), $i7OB2$escape($i7OB2$createComponent((0, $0b6bc2f8309efa8a$export$e5c2828934226505), {
+                  return $i7OB2$ssr($1c8cac76cb67e9af$var$_tmpl$4, $i7OB2$ssrHydrationKey(), `count ${value()?.count_ === 0 ? "count-0" : ""}`, $i7OB2$escape(value()?.count_), $i7OB2$escape($i7OB2$createComponent((0, $0b6bc2f8309efa8a$export$e5c2828934226505), {
                     i18n_: i18n_,
                     get expanded_() {
                       return $i7OB2$createMemo(() => value()?.is_expanded_?.ui_should_show_expanded_?.() ?? false);
@@ -1720,7 +1778,8 @@ function $1c8cac76cb67e9af$var$expand_until_choice(data_structure) {
   });
 }
 const $93716a9ad0dea854$var$_tmpl$ = ["<div", ' class="checkbox-grid">', "</div>"],
-  $93716a9ad0dea854$var$_tmpl$2 = ["<button", ' class="', '">', "</button>"];
+  $93716a9ad0dea854$var$_tmpl$2 = ["<span", ' class="count-wrapper"><span class="count">', "</span></span>"],
+  $93716a9ad0dea854$var$_tmpl$3 = ["<button", "", ' class="', '"><!--#-->', "<!--/--><!--#-->", "<!--/--></button>"];
 const $93716a9ad0dea854$export$414f6a19d38e655c = ({
   filter_: filter_,
   selected_filters_: [get_selected_filters, set_selected_filters]
@@ -1749,7 +1808,14 @@ const $93716a9ad0dea854$export$414f6a19d38e655c = ({
     },
     children: value => {
       const is_selected = $i7OB2$createMemo(() => existing_filter()?.data?.includes(value().value_));
-      return $i7OB2$ssr($93716a9ad0dea854$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `${!is_selected() ? "minor" : ""} ${is_selected() ? "major" : ""}  major-minor-transition`, $i7OB2$escape(value().value_));
+      return $i7OB2$ssr($93716a9ad0dea854$var$_tmpl$3, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("disabled", value().count_ === 0 && !is_selected(), true), `${!is_selected() ? "minor" : ""} ${is_selected() ? "major" : ""}  major-minor-transition`, $i7OB2$escape(value().value_), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
+        get when() {
+          return value().count_ != undefined;
+        },
+        get children() {
+          return $i7OB2$ssr($93716a9ad0dea854$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape(value().count_));
+        }
+      })));
     }
   })));
 };
@@ -5013,35 +5079,6 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     }
   })))];
 }
-function $16b52438165aafe2$export$23fca46f3143581f(component, error_message) {
-  const component_in_error_boundary = do_with_elements => {
-    const error_boundary_wrapped = $b7436a6d1fd64e3b$export$b69d0d92862de18b({
-      severity_: "error",
-      message_: error_message,
-      get children() {
-        const elements = component();
-        do_with_elements?.(elements);
-        return elements;
-      }
-    });
-    // This might return an accessor, in that case we need to "unwrap" it since our SDK consumers expect HTML elements or arrays thereof
-    if (typeof error_boundary_wrapped === "function")
-      // @ts-ignore
-      return error_boundary_wrapped();
-    // On the server it returns a string, so we just return that
-    return error_boundary_wrapped;
-  };
-  const owner = $i7OB2$getOwner();
-  if (owner == null) return $i7OB2$createRoot(dispose => {
-    // if we're not already run in a root, create a root and automatically dispose it when the first returned element is removed from the DOM
-    return component_in_error_boundary(elements => {
-      if (!elements?.length) return;
-      (0, $i7OB2$observer).onremoved(elements[0], dispose);
-    });
-  });else
-    // we're already in a root so cleanups are handled
-    return component_in_error_boundary();
-}
 function $ccd5db07a3a069c5$export$477caf01aecaeb2a(options) {
   const router_ = options.router_;
   const search_query_url_param_name_ = "search_query_url_param_name_" in options ? options.search_query_url_param_name_ : undefined;
@@ -6337,7 +6374,7 @@ function $190927650b4840eb$export$605674723bcc715c(props = {}) {
 const $cea52f6b24092f05$var$_tmpl$ = ["<a", ' class="', '"', ">", "</a>"],
   $cea52f6b24092f05$var$_tmpl$2 = ["<div", ' class="search-icon">', "</div>"],
   $cea52f6b24092f05$var$_tmpl$3 = ["<span", ' class="type">', "</span>"],
-  $cea52f6b24092f05$var$_tmpl$4 = ["<div", "><!--#-->", '<!--/--><span class="value">', "</span></div>"],
+  $cea52f6b24092f05$var$_tmpl$4 = ["<div", ' class="with-parent-title"><!--#-->', '<!--/--><span class="value line-clamp">', "</span></div>"],
   $cea52f6b24092f05$var$_tmpl$5 = ["<div", ' class="with-icon"><!--#-->', "<!--/--><!--#-->", "<!--/--></div>"],
   $cea52f6b24092f05$var$_tmpl$6 = ["<h2", ' class="text">', "</h2>"],
   $cea52f6b24092f05$var$_tmpl$7 = ["<div", ' class="suggestion-container query"><!--#-->', "<!--/--><!--#-->", "<!--/--></div>"],
@@ -7450,7 +7487,9 @@ function $b2bf2cdcff8142d8$export$f631859cab12b342({
 }
 function $b26bdbd081f63e3f$export$9ff751cd77687edc({
   search_results_: search_results_,
-  router_: router_
+  router_: router_,
+  queries_without_content_results_: queries_without_content_results_,
+  get_search_query_: get_search_query_
 }) {
   const content_results = $i7OB2$createMemo(() => search_results_()?.content_search_links);
   const content_results_by_page_url = $i7OB2$createMemo(() => {
@@ -7463,6 +7502,10 @@ function $b26bdbd081f63e3f$export$9ff751cd77687edc({
     }
     return map;
   });
+  $i7OB2$createEffect(() => {
+    const results = content_results();
+    if (Array.isArray(results) && results.length === 0) queries_without_content_results_.add($i7OB2$untrack(get_search_query_));
+  });
   return $i7OB2$createComponent((0, $i7OB2$For), {
     get each() {
       return [...content_results_by_page_url().keys()];
@@ -7495,7 +7538,7 @@ function $9d5b3ed1fc91c672$export$4405d077f0a20494({
     children: () => $i7OB2$createComponent((0, $b2bf2cdcff8142d8$export$f631859cab12b342), {})
   });
 }
-const $49de9d31aeea1b5e$var$_tmpl$ = ["<div", ' class="', '" style="', '"><!--#-->', "<!--/--><!--#-->", "<!--/--></div>"],
+const $49de9d31aeea1b5e$var$_tmpl$ = ["<div", ' class="content-results" style="', '"><!--#-->', "<!--/--><!--#-->", "<!--/--></div>"],
   $49de9d31aeea1b5e$var$_tmpl$2 = ["<button", ' class="view-more">', "</button>"],
   $49de9d31aeea1b5e$var$_tmpl$3 = ["<button", ' class="view-less">', "</button>"];
 const $49de9d31aeea1b5e$export$70ceae36059a1036 = 1;
@@ -7515,9 +7558,16 @@ function $49de9d31aeea1b5e$export$6d0c9c22f6652669({
     number_: num_results,
     i18n_: i18n_
   });
-  const [is_showing_placeholders, set_is_showing_placeholders] = $i7OB2$createSignal(false);
+  const queries_without_content_results_ = new (0, $i7OB2$ListenableSet)();
+  const [check_query, set_check_query] = $i7OB2$createSignal(false);
+  const placeholders_enabled = $i7OB2$createMemo(() => {
+    // don't show placeholders when the user toggles filters
+    check_query();
+    return !queries_without_content_results_.has(get_search_query_());
+  });
   const rows_object = $49de9d31aeea1b5e$var$make_state_saved_rows(content_results_rows_, i18n_);
-  return $i7OB2$ssr($49de9d31aeea1b5e$var$_tmpl$, $i7OB2$ssrHydrationKey(), `content-results ${is_showing_placeholders() ? "loading" : ""}`, "display:" + (is_loading_() || content_results()?.length > 0 ? "" : "none"), $i7OB2$escape($i7OB2$createComponent((0, $f8c929beb82c512b$export$9dd50d35b9d94fdf), {
+  for (const ev of ["add", "delete"]) queries_without_content_results_.addEventListener(ev, () => set_check_query(prev => !prev));
+  return $i7OB2$ssr($49de9d31aeea1b5e$var$_tmpl$, $i7OB2$ssrHydrationKey(), "display:" + (is_loading_() && placeholders_enabled() || content_results()?.length > 0 ? "" : "none"), $i7OB2$escape($i7OB2$createComponent((0, $f8c929beb82c512b$export$9dd50d35b9d94fdf), {
     get_search_query_: get_search_query_,
     i18n_: i18n_,
     formatted_number_of_results_: formatted_number_of_results_,
@@ -7535,21 +7585,19 @@ function $49de9d31aeea1b5e$export$6d0c9c22f6652669({
     get children() {
       return $i7OB2$createComponent((0, $i7OB2$Suspense), {
         get fallback() {
-          return (() => {
-            set_is_showing_placeholders(true);
-            $i7OB2$onCleanup(() => set_is_showing_placeholders(false));
-            return $i7OB2$createComponent((0, $9d5b3ed1fc91c672$export$4405d077f0a20494), {
-              content_results_rows_: content_results_rows_,
-              get cols_at_size_() {
-                return $i7OB2$createMemo(() => layout_options_().cols_at_size);
-              }
-            });
-          })();
+          return $i7OB2$createComponent((0, $9d5b3ed1fc91c672$export$4405d077f0a20494), {
+            content_results_rows_: content_results_rows_,
+            get cols_at_size_() {
+              return $i7OB2$createMemo(() => layout_options_().cols_at_size);
+            }
+          });
         },
         get children() {
           return $i7OB2$createComponent((0, $b26bdbd081f63e3f$export$9ff751cd77687edc), {
             router_: router_,
-            search_results_: search_results_
+            search_results_: search_results_,
+            queries_without_content_results_: queries_without_content_results_,
+            get_search_query_: get_search_query_
           });
         }
       });
@@ -7938,7 +7986,7 @@ const $806c97b931758897$var$_tmpl$ = ["<div", ' class="depict plp search">', "</
     * Type for the private properties that are shared between the different exported search SDK wrapper functions. SDK users are not allowed to change/access these, they're an internal implementation detail.
     */
 const $806c97b931758897$var$privately_shared_properties = /*@__PURE__*/new WeakMap();
-const $806c97b931758897$var$content_search_default = false;
+const $806c97b931758897$var$content_search_default = true;
 const $806c97b931758897$var$min_products_to_fetch_ = 20;
 const $806c97b931758897$export$bde3eb976dfded9 = depict_search => $806c97b931758897$var$privately_shared_properties.get(depict_search)?.search_query_updating_blocked_;
 class $806c97b931758897$export$ac6237957a15b3f0 {