@depict-ai/ui 1.4.24 → 2.0.0

package/server/latest/index.cjs

@@ -1,7 +1,6 @@
 var $5vyXB$depictaiutilishared = require("@depict-ai/utilishared/latest");
 var $5vyXB$solidjsweb = require("solid-js/web");
 var $5vyXB$solidjs = require("solid-js");
-var $5vyXB$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest/latest");
 require("../../multi_import_deduplicator.cjs").register_es_version("ui", "latest");
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {
@@ -61,7 +60,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 = "1.4.24";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.0";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -120,7 +119,9 @@ function $ab7c6c7911bae2f5$export$ff7109b9b2b206ba(sdk_cols_at_size, min_width_f
 }
 function $fc23d7668ae0011d$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, $5vyXB$solidjsweb.isServer) ? `<!-- ${text} -->` : document.createComment(text);
+  return (0, $5vyXB$solidjsweb.isServer) ? {
+    t: `<!-- ${text} -->`
+  } : document.createComment(text);
 }
 function $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(elements) {
   // FYI this probably doesn't work on hugely deep nestings or large amount of elements
@@ -327,21 +328,32 @@ function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
     }
   });
 }
-const $f48d0fbb00835aaa$var$_tmpl$ = ["<style", ' type="text/css">', "</style>"],
-  $f48d0fbb00835aaa$var$_tmpl$2 = ["<div", ' class="', '">', "</div>"];
+const $f48d0fbb00835aaa$var$_tmpl$ = ["<div", ' class="', '">', "</div>"],
+  $f48d0fbb00835aaa$var$_tmpl$2 = ["<style", ' type="text/css">', "</style>"];
 function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
-  const container_element_ = $5vyXB$solidjsweb.ssrElement("div", props.element_attributes, () => $5vyXB$solidjsweb.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" + $5vyXB$solidjs.createUniqueId();
+  const container_element_ = $5vyXB$solidjsweb.ssrElement("div", () => ({
+    ...props.element_attributes,
+    "classList": {
+      [container_class]: true
+    }
+  }), () => $5vyXB$solidjsweb.escape(props.children), true); // Don't want this in the error boundary below, it should only be for the actual layouting
   return $5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
     get message_() {
       return "Failed calculating " + props.layout + " layout";
     },
     severity_: "error",
     get children() {
-      return $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element_);
+      return $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element_, false, container_class);
     }
   });
 }
-function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, insert_after_container = false) {
+function $f48d0fbb00835aaa$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 = $5vyXB$depictaiutilishared.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 = $5vyXB$solidjs.createMemo(() => props.rows === "all");
   const rows_or_empty_object = $5vyXB$solidjs.createMemo(() => show_all_rows() ? {} : props.rows);
@@ -356,28 +368,27 @@ function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, ins
     return !(!button || Array.isArray(button) && !button.length);
   });
   const [get_styling, set_styling] = $5vyXB$solidjs.createSignal();
-  const container_class = $5vyXB$depictaiutilishared.make_random_classname();
   const selector_beginning = `.depict .${container_class}>`; // class so ppl can have id if needed
   const [get_children_count, set_children_count] = $5vyXB$solidjs.createSignal(0);
-  const update_children_count = () => set_children_count(container_element.children.length);
+  const update_children_count = () => (0, $5vyXB$solidjsweb.isServer) ? 20 : set_children_count(container_element.children.length);
   const col_styling = $5vyXB$solidjs.createMemo(() => $5vyXB$depictaiutilishared.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 = $5vyXB$solidjs.createSignal($5vyXB$solidjs.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 = $5vyXB$solidjs.createMemo(() => rows_or_empty_object().currently_visible || default_currently_visible_signal);
   const get_rows_visible = $5vyXB$solidjs.createMemo(() => rows_visible_signal()[0]());
   const set_rows_visible = $5vyXB$solidjs.createMemo(() => rows_visible_signal()[1]);
-  const view_more_button_class = $5vyXB$depictaiutilishared.make_random_classname();
-  const view_less_button_class = $5vyXB$depictaiutilishared.make_random_classname();
-  const style_element = $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), get_styling);
-  const view_more_button_container = $5vyXB$solidjs.createMemo(() => have_a_view_more_button() && $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `load-more-container ${$5vyXB$solidjsweb.escape(view_more_button_class, true)}`, $5vyXB$solidjsweb.escape(rows_or_empty_object().button)));
+  const view_more_button_class = "m" + $5vyXB$solidjs.createUniqueId();
+  const view_less_button_class = "l" + $5vyXB$solidjs.createUniqueId(); //  https://github.com/solidjs/solid-docs/issues/263#issuecomment-1622388079
+  const view_more_button_container = $5vyXB$solidjs.createMemo(() => have_a_view_more_button() && $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `load-more-container ${$5vyXB$solidjsweb.escape(view_more_button_class, true)}`, $5vyXB$solidjsweb.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 = $5vyXB$solidjs.createMemo(() => have_a_view_less_button() && $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `load-less-container ${$5vyXB$solidjsweb.escape(view_less_button_class, true)}`, $5vyXB$solidjsweb.escape(rows_or_empty_object().view_less_button)));
-  container_element.classList.add(container_class);
+  const view_less_button_container = $5vyXB$solidjs.createMemo(() => have_a_view_less_button() && $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `load-less-container ${$5vyXB$solidjsweb.escape(view_less_button_class, true)}`, $5vyXB$solidjsweb.escape(rows_or_empty_object().view_less_button)));
+  const [force_style_update, set_force_style_update] = $5vyXB$solidjs.createSignal("");
   $5vyXB$solidjs.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);
   });
+  $5vyXB$solidjs.createEffect(() => set_force_style_update(" ")); // force style update after hydration due to https://discord.com/channels/722131463138705510/722167424186843267/1151544212517552168
   $5vyXB$solidjs.createRenderEffect(() => {
     // Be careful to only read show_all_rows in here (ofc doesn't apply to nested effects)
     if (show_all_rows()) {
@@ -386,11 +397,13 @@ function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, ins
       return;
     }
     update_children_count();
-    const mutation_observer = new MutationObserver($5vyXB$depictaiutilishared.catchify(update_children_count));
-    mutation_observer.observe(container_element, {
-      childList: true
-    });
-    $5vyXB$solidjs.onCleanup(() => mutation_observer.disconnect());
+    if (!(0, $5vyXB$solidjsweb.isServer)) {
+      const mutation_observer = new MutationObserver($5vyXB$depictaiutilishared.catchify(update_children_count));
+      mutation_observer.observe(container_element, {
+        childList: true
+      });
+      $5vyXB$solidjs.onCleanup(() => mutation_observer.disconnect());
+    }
     set_styling(
     // this is needed because solid will think that the memo-accessor is a setter function otherwise
     () => $5vyXB$solidjs.createMemo(() => {
@@ -401,7 +414,7 @@ function $f48d0fbb00835aaa$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;
@@ -422,6 +435,7 @@ function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, ins
       }).join("");
     }));
   });
+  const style_element = $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$2, $5vyXB$solidjsweb.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];
 }
@@ -435,12 +449,20 @@ function $a0e53f99354809d9$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, $5vyXB$depictaiutilishared.Amazing_Slider)({
     button_contents: {
-      left: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {})))],
-      right: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {})))]
+      left: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
+        height_: arrow_height_,
+        width_: arrow_width_
+      })))],
+      right: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
+        height_: arrow_height_,
+        width_: arrow_width_
+      })))]
     },
     constructor_plugins: [$5vyXB$depictaiutilishared.slider_snap_css().constructor_plugin],
     mutation_plugins: [...(disable_fading_ ? [] : [$5vyXB$depictaiutilishared.slider_fading_factory({
@@ -463,6 +485,8 @@ function $363ce4d1d71041aa$export$d41d19e89346fa2({
   const is_showing_something = $5vyXB$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
   const num_placeholders_ = () => 20;
   const slider = $5vyXB$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
+    arrow_height_: 25,
+    arrow_width_: 12.5,
     disable_fading_: true,
     slider_ref_: slider => {
       const {
@@ -474,7 +498,7 @@ function $363ce4d1d71041aa$export$d41d19e89346fa2({
         rows: "all",
         layout: "slider"
       }, layout_options_));
-      $5vyXB$depictaiutilisharedlatest.slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
+      $5vyXB$depictaiutilishared.slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
       insert_here.before($fc23d7668ae0011d$export$a2cc176055f8f08());
     },
     get children() {
@@ -507,30 +531,62 @@ function $363ce4d1d71041aa$export$d41d19e89346fa2({
     children: slider
   });
 }
+function $95837413165cc2df$export$23fca46f3143581f(component, error_message) {
+  const component_in_error_boundary = do_with_elements => {
+    const error_boundary_wrapped = $edafe91daf3091d7$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 = $5vyXB$solidjs.getOwner();
+  if (owner == null) return $5vyXB$solidjs.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, $5vyXB$depictaiutilishared.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 $72f96c4782db0b1b$var$_tmpl$ = ["<div", ' class="depict recommendations">', "</div>"];
 function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
-  const grid_spacing_override = $5vyXB$solidjs.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_] = $5vyXB$solidjs.createResource(() => props.recommendations, recs => recs);
-  return $5vyXB$solidjsweb.ssr($72f96c4782db0b1b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($363ce4d1d71041aa$export$d41d19e89346fa2({
-    product_card_template_: (...args) => props.product_card_template(...args),
-    recommendations_resource_: recommendations_resource_,
-    market_: () => props.market,
-    merchant_: () => props.merchant,
-    layout_options_: $5vyXB$solidjs.createMemo(() => ({
-      cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77($ab7c6c7911bae2f5$export$ff7109b9b2b206ba(props.cols_at_size)),
-      ...grid_spacing_override()
-    }))
-  })));
+  return $95837413165cc2df$export$23fca46f3143581f(() => {
+    const grid_spacing_override = $5vyXB$solidjs.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_] = $5vyXB$solidjs.createResource(() => props.recommendations, recs => recs);
+    return $5vyXB$solidjsweb.ssr($72f96c4782db0b1b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($363ce4d1d71041aa$export$d41d19e89346fa2({
+      product_card_template_: (...args) => props.product_card_template(...args),
+      recommendations_resource_: recommendations_resource_,
+      market_: () => props.market,
+      merchant_: () => props.merchant,
+      layout_options_: $5vyXB$solidjs.createMemo(() => ({
+        cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77($ab7c6c7911bae2f5$export$ff7109b9b2b206ba(props.cols_at_size)),
+        ...grid_spacing_override()
+      }))
+    })));
+  }, "RecommendationSlider failed");
 }
 const $b8e79813f4f7ebe4$var$_tmpl$ = ["<div", ' class="recommendation-grid"><!--#-->', "<!--/--><!--#-->", "<!--/--></div>"];
 function $b8e79813f4f7ebe4$export$7da560f849543dff({
@@ -586,38 +642,40 @@ function $b8e79813f4f7ebe4$export$7da560f849543dff({
 const $1f8dbf7e28b3eff2$var$_tmpl$ = ["<button", ' class="show-more major" type="button">', "</button>"],
   $1f8dbf7e28b3eff2$var$_tmpl$2 = ["<div", ' class="depict plp recommendations">', "</div>"];
 function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
-  const rows_object_ = $5vyXB$solidjs.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: $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(view_more_button.text))
-    };
-  });
-  const grid_spacing_override = $5vyXB$solidjs.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_] = $5vyXB$solidjs.createResource(() => props.recommendations, recs => recs);
-  return $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($b8e79813f4f7ebe4$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_: $5vyXB$solidjs.createMemo(() => ({
-      cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77($ab7c6c7911bae2f5$export$ff7109b9b2b206ba(props.cols_at_size)),
-      ...grid_spacing_override()
-    }))
-  })));
+  return $95837413165cc2df$export$23fca46f3143581f(() => {
+    const rows_object_ = $5vyXB$solidjs.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: $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(view_more_button.text))
+      };
+    });
+    const grid_spacing_override = $5vyXB$solidjs.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_] = $5vyXB$solidjs.createResource(() => props.recommendations, recs => recs);
+    return $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($b8e79813f4f7ebe4$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_: $5vyXB$solidjs.createMemo(() => ({
+        cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77($ab7c6c7911bae2f5$export$ff7109b9b2b206ba(props.cols_at_size)),
+        ...grid_spacing_override()
+      }))
+    })));
+  }, "RecommendationGrid failed");
 }
 function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $5vyXB$solidjs.createSignal(0);
@@ -995,16 +1053,16 @@ function $235a2771a44e28e9$export$fecbb157621501bd({
   return outmost_element;
 }
 const $b3cf6ca8dc0e9998$var$_tmpl$ = ["<span", ' class="count">', "</span>"],
-  $b3cf6ca8dc0e9998$var$_tmpl$2 = ["<label", ' class="', '"', '><div class="left"><input type="checkbox"', "", '><span class="custom-indicator"></span><span class="text line-clamp">', "</span></div><!--#-->", "<!--/--></label>"];
+  $b3cf6ca8dc0e9998$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 $b3cf6ca8dc0e9998$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 = $5vyXB$solidjs.createMemo(() => props.count_);
   const label = $5vyXB$solidjs.createMemo(() => props.label_);
   const checked = $5vyXB$solidjs.createMemo(() => props.checked_);
   const value = $5vyXB$solidjs.createMemo(() => props.value_);
-  const is_count_zero = $5vyXB$solidjs.createMemo(() => props.is_count_zero_);
+  const is_count_zero = $5vyXB$solidjs.createMemo(() => props.is_count_zero_ || count() === 0);
   const id = $5vyXB$depictaiutilishared.make_random_classname();
-  return (/* We can't use actual margin because ExpandingContainer gets messed up */$5vyXB$solidjsweb.ssr($b3cf6ca8dc0e9998$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `input-row ${is_count_zero() || count() === 0 ? "count-0" : ""}`, $5vyXB$solidjsweb.ssrAttribute("for", $5vyXB$solidjsweb.escape(id, true), false), $5vyXB$solidjsweb.ssrAttribute("name", $5vyXB$solidjsweb.escape(value(), true), false) + $5vyXB$solidjsweb.ssrAttribute("id", $5vyXB$solidjsweb.escape(id, true), false), $5vyXB$solidjsweb.ssrAttribute("checked", checked(), true), $5vyXB$solidjsweb.escape(label()) || $5vyXB$solidjsweb.escape(value()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+  return (/* We can't use actual margin because ExpandingContainer gets messed up */$5vyXB$solidjsweb.ssr($b3cf6ca8dc0e9998$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `input-row ${is_count_zero() ? "count-0" : ""}`, $5vyXB$solidjsweb.ssrAttribute("for", $5vyXB$solidjsweb.escape(id, true), false), $5vyXB$solidjsweb.ssrAttribute("name", $5vyXB$solidjsweb.escape(value(), true), false) + $5vyXB$solidjsweb.ssrAttribute("id", $5vyXB$solidjsweb.escape(id, true), false), $5vyXB$solidjsweb.ssrAttribute("checked", checked(), true), $5vyXB$solidjsweb.ssrAttribute("disabled", !checked() && is_count_zero(), true), $5vyXB$solidjsweb.escape(label()) || $5vyXB$solidjsweb.escape(value()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
       get when() {
         return count() != undefined;
       },
@@ -1381,7 +1439,7 @@ function $7567511a7c3e4bd7$export$e5c2828934226505({
 const $3bdc00a1353c1150$var$_tmpl$ = ["<form", ' class="', '"><!--#-->', "<!--/--><!--#-->", "<!--/--></form>"],
   $3bdc00a1353c1150$var$_tmpl$2 = ["<div", ' class="', '"><!--#-->', "<!--/--><!--#-->", "<!--/--></div>"],
   $3bdc00a1353c1150$var$_tmpl$3 = ["<details", "></details>"],
-  $3bdc00a1353c1150$var$_tmpl$4 = ["<summary", ' class="category-parent"><div class="summary"><span class="count">', "</span><!--#-->", "<!--/--></div></summary>"];
+  $3bdc00a1353c1150$var$_tmpl$4 = ["<summary", ' class="category-parent"><div class="summary"><span class="', '">', "</span><!--#-->", "<!--/--></div></summary>"];
 const $3bdc00a1353c1150$var$max_visible_without_collapsing = 15;
 const $3bdc00a1353c1150$var$show_non_collapsible_when_collapsed = 4;
 function $3bdc00a1353c1150$export$a32086fa6616eafd({
@@ -1583,7 +1641,7 @@ function $3bdc00a1353c1150$var$render_stuff(data, existing_filter, i18n_) {
                   return $5vyXB$solidjsweb.ssr($3bdc00a1353c1150$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey());
                 },
                 get summary_() {
-                  return $5vyXB$solidjsweb.ssr($3bdc00a1353c1150$var$_tmpl$4, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(value()?.count_), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $7567511a7c3e4bd7$export$e5c2828934226505), {
+                  return $5vyXB$solidjsweb.ssr($3bdc00a1353c1150$var$_tmpl$4, $5vyXB$solidjsweb.ssrHydrationKey(), `count ${value()?.count_ === 0 ? "count-0" : ""}`, $5vyXB$solidjsweb.escape(value()?.count_), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $7567511a7c3e4bd7$export$e5c2828934226505), {
                     i18n_: i18n_,
                     get expanded_() {
                       return $5vyXB$solidjs.createMemo(() => value()?.is_expanded_?.ui_should_show_expanded_?.() ?? false);
@@ -1775,7 +1833,8 @@ function $3bdc00a1353c1150$var$expand_until_choice(data_structure) {
   });
 }
 const $0ef1681699140f1a$var$_tmpl$ = ["<div", ' class="checkbox-grid">', "</div>"],
-  $0ef1681699140f1a$var$_tmpl$2 = ["<button", ' class="', '">', "</button>"];
+  $0ef1681699140f1a$var$_tmpl$2 = ["<span", ' class="count-wrapper"><span class="count">', "</span></span>"],
+  $0ef1681699140f1a$var$_tmpl$3 = ["<button", "", ' class="', '"><!--#-->', "<!--/--><!--#-->", "<!--/--></button>"];
 const $0ef1681699140f1a$export$414f6a19d38e655c = ({
   filter_: filter_,
   selected_filters_: [get_selected_filters, set_selected_filters]
@@ -1804,7 +1863,14 @@ const $0ef1681699140f1a$export$414f6a19d38e655c = ({
     },
     children: value => {
       const is_selected = $5vyXB$solidjs.createMemo(() => existing_filter()?.data?.includes(value().value_));
-      return $5vyXB$solidjsweb.ssr($0ef1681699140f1a$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `${!is_selected() ? "minor" : ""} ${is_selected() ? "major" : ""}  major-minor-transition`, $5vyXB$solidjsweb.escape(value().value_));
+      return $5vyXB$solidjsweb.ssr($0ef1681699140f1a$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("disabled", value().count_ === 0 && !is_selected(), true), `${!is_selected() ? "minor" : ""} ${is_selected() ? "major" : ""}  major-minor-transition`, $5vyXB$solidjsweb.escape(value().value_), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+        get when() {
+          return value().count_ != undefined;
+        },
+        get children() {
+          return $5vyXB$solidjsweb.ssr($0ef1681699140f1a$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(value().count_));
+        }
+      })));
     }
   })));
 };
@@ -5068,35 +5134,6 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     }
   })))];
 }
-function $95837413165cc2df$export$23fca46f3143581f(component, error_message) {
-  const component_in_error_boundary = do_with_elements => {
-    const error_boundary_wrapped = $edafe91daf3091d7$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 = $5vyXB$solidjs.getOwner();
-  if (owner == null) return $5vyXB$solidjs.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, $5vyXB$depictaiutilishared.observer).onremoved(elements[0], dispose);
-    });
-  });else
-    // we're already in a root so cleanups are handled
-    return component_in_error_boundary();
-}
 function $c79fd10a3ab7d6e0$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;
@@ -6392,7 +6429,7 @@ function $c0125412b4ea0c93$export$605674723bcc715c(props = {}) {
 const $6b65ba8af12c5a26$var$_tmpl$ = ["<a", ' class="', '"', ">", "</a>"],
   $6b65ba8af12c5a26$var$_tmpl$2 = ["<div", ' class="search-icon">', "</div>"],
   $6b65ba8af12c5a26$var$_tmpl$3 = ["<span", ' class="type">', "</span>"],
-  $6b65ba8af12c5a26$var$_tmpl$4 = ["<div", "><!--#-->", '<!--/--><span class="value">', "</span></div>"],
+  $6b65ba8af12c5a26$var$_tmpl$4 = ["<div", ' class="with-parent-title"><!--#-->', '<!--/--><span class="value line-clamp">', "</span></div>"],
   $6b65ba8af12c5a26$var$_tmpl$5 = ["<div", ' class="with-icon"><!--#-->', "<!--/--><!--#-->", "<!--/--></div>"],
   $6b65ba8af12c5a26$var$_tmpl$6 = ["<h2", ' class="text">', "</h2>"],
   $6b65ba8af12c5a26$var$_tmpl$7 = ["<div", ' class="suggestion-container query"><!--#-->', "<!--/--><!--#-->", "<!--/--></div>"],
@@ -7505,7 +7542,9 @@ function $76227de40be817e5$export$f631859cab12b342({
 }
 function $8781fcec27b20709$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 = $5vyXB$solidjs.createMemo(() => search_results_()?.content_search_links);
   const content_results_by_page_url = $5vyXB$solidjs.createMemo(() => {
@@ -7518,6 +7557,10 @@ function $8781fcec27b20709$export$9ff751cd77687edc({
     }
     return map;
   });
+  $5vyXB$solidjs.createEffect(() => {
+    const results = content_results();
+    if (Array.isArray(results) && results.length === 0) queries_without_content_results_.add($5vyXB$solidjs.untrack(get_search_query_));
+  });
   return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.For), {
     get each() {
       return [...content_results_by_page_url().keys()];
@@ -7550,7 +7593,7 @@ function $c2f92eb265a14529$export$4405d077f0a20494({
     children: () => $5vyXB$solidjsweb.createComponent((0, $76227de40be817e5$export$f631859cab12b342), {})
   });
 }
-const $3716b8caf7f959e2$var$_tmpl$ = ["<div", ' class="', '" style="', '"><!--#-->', "<!--/--><!--#-->", "<!--/--></div>"],
+const $3716b8caf7f959e2$var$_tmpl$ = ["<div", ' class="content-results" style="', '"><!--#-->', "<!--/--><!--#-->", "<!--/--></div>"],
   $3716b8caf7f959e2$var$_tmpl$2 = ["<button", ' class="view-more">', "</button>"],
   $3716b8caf7f959e2$var$_tmpl$3 = ["<button", ' class="view-less">', "</button>"];
 const $3716b8caf7f959e2$export$70ceae36059a1036 = 1;
@@ -7570,9 +7613,16 @@ function $3716b8caf7f959e2$export$6d0c9c22f6652669({
     number_: num_results,
     i18n_: i18n_
   });
-  const [is_showing_placeholders, set_is_showing_placeholders] = $5vyXB$solidjs.createSignal(false);
+  const queries_without_content_results_ = new (0, $5vyXB$depictaiutilishared.ListenableSet)();
+  const [check_query, set_check_query] = $5vyXB$solidjs.createSignal(false);
+  const placeholders_enabled = $5vyXB$solidjs.createMemo(() => {
+    // don't show placeholders when the user toggles filters
+    check_query();
+    return !queries_without_content_results_.has(get_search_query_());
+  });
   const rows_object = $3716b8caf7f959e2$var$make_state_saved_rows(content_results_rows_, i18n_);
-  return $5vyXB$solidjsweb.ssr($3716b8caf7f959e2$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `content-results ${is_showing_placeholders() ? "loading" : ""}`, "display:" + (is_loading_() || content_results()?.length > 0 ? "" : "none"), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $65a0c4b1c2eb5d0b$export$9dd50d35b9d94fdf), {
+  for (const ev of ["add", "delete"]) queries_without_content_results_.addEventListener(ev, () => set_check_query(prev => !prev));
+  return $5vyXB$solidjsweb.ssr($3716b8caf7f959e2$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "display:" + (is_loading_() && placeholders_enabled() || content_results()?.length > 0 ? "" : "none"), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $65a0c4b1c2eb5d0b$export$9dd50d35b9d94fdf), {
     get_search_query_: get_search_query_,
     i18n_: i18n_,
     formatted_number_of_results_: formatted_number_of_results_,
@@ -7590,21 +7640,19 @@ function $3716b8caf7f959e2$export$6d0c9c22f6652669({
     get children() {
       return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
         get fallback() {
-          return (() => {
-            set_is_showing_placeholders(true);
-            $5vyXB$solidjs.onCleanup(() => set_is_showing_placeholders(false));
-            return $5vyXB$solidjsweb.createComponent((0, $c2f92eb265a14529$export$4405d077f0a20494), {
-              content_results_rows_: content_results_rows_,
-              get cols_at_size_() {
-                return $5vyXB$solidjs.createMemo(() => layout_options_().cols_at_size);
-              }
-            });
-          })();
+          return $5vyXB$solidjsweb.createComponent((0, $c2f92eb265a14529$export$4405d077f0a20494), {
+            content_results_rows_: content_results_rows_,
+            get cols_at_size_() {
+              return $5vyXB$solidjs.createMemo(() => layout_options_().cols_at_size);
+            }
+          });
         },
         get children() {
           return $5vyXB$solidjsweb.createComponent((0, $8781fcec27b20709$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_
           });
         }
       });
@@ -7993,7 +8041,7 @@ const $2c61e4cd8229c49a$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 $2c61e4cd8229c49a$var$privately_shared_properties = /*@__PURE__*/new WeakMap();
-const $2c61e4cd8229c49a$var$content_search_default = false;
+const $2c61e4cd8229c49a$var$content_search_default = true;
 const $2c61e4cd8229c49a$var$min_products_to_fetch_ = 20;
 const $2c61e4cd8229c49a$export$bde3eb976dfded9 = depict_search => $2c61e4cd8229c49a$var$privately_shared_properties.get(depict_search)?.search_query_updating_blocked_;
 class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {