@depict-ai/ui 1.3.2 → 1.3.4

package/dist/client/main.cjs

@@ -1,11 +1,12 @@
 var $57o7A$depictaiutilishared = require("@depict-ai/utilishared");
-var $57o7A$solidjs = require("solid-js");
 var $57o7A$solidjsweb = require("solid-js/web");
+var $57o7A$solidjs = require("solid-js");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
+$parcel$export(module.exports, "SolidLayout", () => $f48d0fbb00835aaa$export$d21e32dfedac04be);
 $parcel$export(module.exports, "general_modal_abstraction", () => $9abb0a35d4b60ed3$export$79b1565500412d9b);
 $parcel$export(module.exports, "CrossIcon", () => $c77c68e559a1506c$export$3b621d86b1566b2);
 $parcel$export(module.exports, "GenericSliderArrowButton", () => $0f313083912e447a$export$8be2714ec7f169ee);
@@ -43,12 +44,198 @@ $parcel$export(module.exports, "defaultGridSpacing", () => $a3280f0aad997933$exp
 $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$export$c3834fa86c616831);
 $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.3.2";
+/*! Depict.ai search and product listing SDK */ const $b757f75811f3261f$export$83d89fbfd8236492 = "1.3.4";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(elements) {
+    // FYI this probably doesn't work on hugely deep nestings or large amount of elements
+    return (0, $57o7A$solidjs.createMemo)(()=>$5f7d55c710fd1bc2$var$unwrapping_helper(elements));
+}
+function $5f7d55c710fd1bc2$var$unwrapping_helper(elements) {
+    const result = [];
+    if (Array.isArray(elements)) for(let i = 0; i < elements.length; i++){
+        const element = elements[i];
+        result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(element));
+    }
+    else if (typeof elements == "function") result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(elements()));
+    else if (elements != undefined && typeof elements != "boolean") result.push(elements);
+    return result;
+}
+
+
+
 
 
 
 
 
+
+// Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
+class $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 extends Error {
+}
+class $7dd1edb2ee2b43ad$export$aa14a9f43128f61f extends $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 {
+    constructor(templateError){
+        super("Uncaught error in product card template", {
+            cause: templateError
+        });
+    }
+}
+
+
+const $edafe91daf3091d7$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div></div>`, 2);
+function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
+    return (0, $57o7A$solidjs.ErrorBoundary)({
+        fallback (err, retry) {
+            const { message_: message_ , severity_: severity_  } = props;
+            let message = message_;
+            if (err instanceof (0, $7dd1edb2ee2b43ad$export$aa14a9f43128f61f)) {
+                console.error(err.cause);
+                message = `${message}: ${err.message}`;
+            } else (0, $57o7A$depictaiutilishared.report)([
+                err,
+                message_
+            ], severity_);
+            props.on_error_?.(retry);
+            return (()=>{
+                const _el$ = (0, $57o7A$solidjsweb.getNextElement)($edafe91daf3091d7$var$_tmpl$);
+                (0, $57o7A$solidjsweb.insert)(_el$, message);
+                (0, $57o7A$solidjsweb.effect)((_$p)=>(0, $57o7A$solidjsweb.classList)(_el$, Object.fromEntries(props.class_list_?.map((c)=>[
+                            c,
+                            true
+                        ]) || []), _$p));
+                return _el$;
+            })();
+        },
+        get children () {
+            return props.children;
+        }
+    });
+}
+
+
+const $f48d0fbb00835aaa$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div></div>`, 2), $f48d0fbb00835aaa$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<style type="text/css"></style>`, 2);
+function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
+    return (0, $57o7A$solidjsweb.createComponent)((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
+        get message_ () {
+            return "Failed calculating " + props.layout + " layout";
+        },
+        severity_: "error",
+        get children () {
+            return $f48d0fbb00835aaa$var$ActualSolidLayout(props);
+        }
+    });
+}
+function $f48d0fbb00835aaa$var$ActualSolidLayout(props) {
+    // Copy of Layout from utilishared but using solid-js signals instead of async iterable IPNS
+    const show_all_rows = (0, $57o7A$solidjs.createMemo)(()=>props.rows === "all");
+    const rows_or_empty_object = (0, $57o7A$solidjs.createMemo)(()=>show_all_rows() ? {} : props.rows);
+    const button_elements = (0, $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52)((0, $57o7A$solidjs.createMemo)(()=>rows_or_empty_object().button));
+    const have_a_button = (0, $57o7A$solidjs.createMemo)(()=>{
+        const button = button_elements();
+        return !(!button || Array.isArray(button) && !button.length);
+    });
+    const [get_styling, set_styling] = (0, $57o7A$solidjs.createSignal)();
+    const container_class = (0, $57o7A$depictaiutilishared.make_random_classname)();
+    const selector_beginning = `.depict .${container_class}>`; // class so ppl can have id if needed
+    const container_element = (()=>{
+        const _el$ = (0, $57o7A$solidjsweb.getNextElement)($f48d0fbb00835aaa$var$_tmpl$);
+        (0, $57o7A$solidjsweb.spread)(_el$, (0, $57o7A$solidjsweb.mergeProps)(()=>props.element_attributes), false, true);
+        (0, $57o7A$solidjsweb.insert)(_el$, ()=>props.children);
+        (0, $57o7A$solidjsweb.runHydrationEvents)();
+        return _el$;
+    })();
+    const [get_children_count, set_children_count] = (0, $57o7A$solidjs.createSignal)(0);
+    const update_children_count = ()=>set_children_count(container_element.children.length);
+    const col_styling = (0, $57o7A$solidjs.createMemo)(()=>(0, $57o7A$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 = (0, $57o7A$solidjs.createSignal)(0); // 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 = (0, $57o7A$solidjs.createMemo)(()=>rows_or_empty_object().currently_visible || default_currently_visible_signal);
+    const get_rows_visible = (0, $57o7A$solidjs.createMemo)(()=>rows_visible_signal()[0]());
+    const set_rows_visible = (0, $57o7A$solidjs.createMemo)(()=>rows_visible_signal()[1]);
+    const button_class = (0, $57o7A$depictaiutilishared.make_random_classname)();
+    const button_container = (0, $57o7A$solidjs.createMemo)(()=>have_a_button() && (()=>{
+            const _el$2 = (0, $57o7A$solidjsweb.getNextElement)($f48d0fbb00835aaa$var$_tmpl$);
+            (0, $57o7A$solidjsweb.addEventListener)(_el$2, "click", (0, $57o7A$depictaiutilishared.catchify)(()=>set_rows_visible()((prev)=>prev + (rows_or_empty_object().rows_per_click ?? 1))), true);
+            (0, $57o7A$solidjsweb.className)(_el$2, "load-more-container " + button_class);
+            (0, $57o7A$solidjsweb.insert)(_el$2, ()=>rows_or_empty_object().button);
+            (0, $57o7A$solidjsweb.runHydrationEvents)();
+            return _el$2;
+        })());
+    container_element.classList.add(container_class);
+    (0, $57o7A$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);
+    });
+    (0, $57o7A$solidjs.createRenderEffect)(()=>{
+        // Be careful to only read show_all_rows in here (ofc doesn't apply to nested effects)
+        if (show_all_rows()) {
+            // no view more functionality requested
+            set_styling(()=>col_styling);
+            return;
+        }
+        (0, $57o7A$solidjs.untrack)(()=>set_rows_visible()(rows_or_empty_object().start_rows ?? 1));
+        update_children_count();
+        const mutation_observer = new MutationObserver((0, $57o7A$depictaiutilishared.catchify)(update_children_count));
+        mutation_observer.observe(container_element, {
+            childList: true
+        });
+        (0, $57o7A$solidjs.onCleanup)(()=>mutation_observer.disconnect());
+        set_styling(// this is needed because solid will think that the memo-accessor is a setter function otherwise
+        ()=>(0, $57o7A$solidjs.createMemo)(()=>{
+                const { rows_per_click: rows_per_click , max_rows: max_rows = -1  } = 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)=>{
+                    const [, min, max] = options;
+                    let should_hide_button;
+                    let visible_recs;
+                    if (props.disable_partial_rows) {
+                        visible_recs = (0, $57o7A$depictaiutilishared.layout_get_visible_recs_without_partial_rows)(rows_visible, children_count, options);
+                        const visible_recs_next_show_more = (0, $57o7A$depictaiutilishared.layout_get_visible_recs_without_partial_rows)(rows_visible + (rows_per_click || 0), // Should this really be zero when we default rows_per_click to 1?
+                        children_count, options);
+                        should_hide_button = visible_recs === visible_recs_next_show_more;
+                    } else {
+                        visible_recs = (0, $57o7A$depictaiutilishared.layout_get_total_rec_amount_for_row)(rows_visible, options);
+                        should_hide_button = visible_recs >= children_count;
+                    }
+                    const should_hide_button_final = button_class && (should_hide_button || max_rows !== -1 && rows_visible >= max_rows);
+                    return `${(0, $57o7A$depictaiutilishared.layout_media_query_header)(min, max)}{${selector_beginning}:nth-child(n+${visible_recs + 1}){display:none}${props.layout == "slider" ? `${selector_beginning}:nth-child(n+${visible_recs}){margin-right:0}` : ""}${should_hide_button_final ? `.depict .${button_class}{display:none!important}` : ``}}`;
+                }).join("");
+            }));
+    });
+    return [
+        container_element,
+        (0, $57o7A$solidjsweb.memo)(button_container),
+        (()=>{
+            const _el$3 = (0, $57o7A$solidjsweb.getNextElement)($f48d0fbb00835aaa$var$_tmpl$2);
+            (0, $57o7A$solidjsweb.insert)(_el$3, get_styling);
+            return _el$3;
+        })()
+    ];
+}
+(0, $57o7A$solidjsweb.delegateEvents)([
+    "click"
+]);
+
+
+
+
 async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_opts) {
     const body = await (0, $57o7A$depictaiutilishared.observer).wait_for_element("body");
     let dispose_and_remove;
@@ -710,8 +897,6 @@ function $401aee5f33dca9e2$export$83fd5de5504a7a67({ formatted_number_of_results
 
 
 
-
-
 
 
 
@@ -948,71 +1133,6 @@ function $fc23d7668ae0011d$export$a2cc176055f8f08() {
 
 
 
-
-
-
-// Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
-class $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 extends Error {
-}
-class $7dd1edb2ee2b43ad$export$aa14a9f43128f61f extends $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 {
-    constructor(templateError){
-        super("Uncaught error in product card template", {
-            cause: templateError
-        });
-    }
-}
-
-
-const $edafe91daf3091d7$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div></div>`, 2);
-function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
-    return (0, $57o7A$solidjs.ErrorBoundary)({
-        fallback (err, retry) {
-            const { message_: message_ , severity_: severity_  } = props;
-            let message = message_;
-            if (err instanceof (0, $7dd1edb2ee2b43ad$export$aa14a9f43128f61f)) {
-                console.error(err.cause);
-                message = `${message}: ${err.message}`;
-            } else (0, $57o7A$depictaiutilishared.report)([
-                err,
-                message_
-            ], severity_);
-            props.on_error_?.(retry);
-            return (()=>{
-                const _el$ = (0, $57o7A$solidjsweb.getNextElement)($edafe91daf3091d7$var$_tmpl$);
-                (0, $57o7A$solidjsweb.insert)(_el$, message);
-                (0, $57o7A$solidjsweb.effect)((_$p)=>(0, $57o7A$solidjsweb.classList)(_el$, Object.fromEntries(props.class_list_?.map((c)=>[
-                            c,
-                            true
-                        ]) || []), _$p));
-                return _el$;
-            })();
-        },
-        get children () {
-            return props.children;
-        }
-    });
-}
-
-
-
-
-function $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(elements) {
-    // FYI this probably doesn't work on hugely deep nestings or large amount of elements
-    return (0, $57o7A$solidjs.createMemo)(()=>$5f7d55c710fd1bc2$var$unwrapping_helper(elements));
-}
-function $5f7d55c710fd1bc2$var$unwrapping_helper(elements) {
-    const result = [];
-    if (Array.isArray(elements)) for(let i = 0; i < elements.length; i++){
-        const element = elements[i];
-        result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(element));
-    }
-    else if (typeof elements == "function") result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(elements()));
-    else if (elements != undefined && typeof elements != "boolean") result.push(elements);
-    return result;
-}
-
-
-
 let $0caf87eaa19079da$var$cached_placeholder_element;
 let $0caf87eaa19079da$var$rendering_cached_placeholder_element;
 function $0caf87eaa19079da$export$f33414a4df0afd3f({ product_card_template_: product_card_template_ , num_placeholders_: num_placeholders_  }) {
@@ -1326,7 +1446,8 @@ function $ac167f6af6a48fc3$export$a1fd619a4743ca08({ plp_results_: plp_results_
 }
 
 
-const $fe76fb463cc60b89$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div class="PLP-results"><!#><!/><!#><!/></div>`, 6), $fe76fb463cc60b89$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div class="cards"></div>`, 2), $fe76fb463cc60b89$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<style></style>`, 2);
+
+const $fe76fb463cc60b89$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div class="PLP-results"><!#><!/><!#><!/></div>`, 6);
 function $fe76fb463cc60b89$export$3925f87b1545cfc6({ plp_results_: plp_results_ , depict_api_: depict_api_ , all_products_loaded_: all_products_loaded_ , min_products_to_fetch_: min_products_to_fetch_ , query_base_: query_base_ , first_result_in_viewport_: first_result_in_viewport_ , last_result_in_viewport_: last_result_in_viewport_ , scroll_restoration_data_: [get_scroll_restoration_data] , no_results_options_: no_results_options_ , desktop_filter_elements_: desktop_filter_elements_ , sort_or_filter_open_: sort_or_filter_open_ , product_card_template_: product_card_template_ , layout_options_: layout_options_ , id_currently_querying_for_: id_currently_querying_for_  }) {
     // The plp_results_ resource will be delayed because we're using createBatchedMemo to not make triplicate API requests, but we need to show the placeholders before already to match Chrome and Firefox's "content has to be there, ready for scroll restoration, before all popstate tasks have been completed"-requirement
     const is_loading_ = (0, $57o7A$solidjs.createMemo)(()=>plp_results_.loading || query_base_.loading);
@@ -1369,9 +1490,6 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({ plp_results_: plp_results_
                         let suspense_contents;
                         let is_just_after_plp_results_update = false;
                         let fallback_is_alive = false;
-                        const random_id = (0, $57o7A$depictaiutilishared.make_random_classname)();
-                        const selector_beginning_ = `.depict.plp #${random_id}>`;
-                        const [get_styling, set_styling_] = (0, $57o7A$solidjs.createSignal)("");
                         const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = (0, $57o7A$solidjs.createSignal)(true);
                         const rendered_placeholders = (0, $57o7A$solidjs.createMemo)(()=>get_should_have_placeholders_rendered() ? (0, $0caf87eaa19079da$export$f33414a4df0afd3f)({
                                 product_card_template_: product_card_template_,
@@ -1381,64 +1499,22 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({ plp_results_: plp_results_
                                 })
                             }) : undefined);
                         const [get_suspense_is_blocked, set_suspense_is_blocked] = (0, $57o7A$solidjs.createSignal)(false);
+                        const modified_cols_at_size = $fe76fb463cc60b89$var$make_modified_cols_at_size({
+                            layout_options_: layout_options_,
+                            sort_or_filter_open_: sort_or_filter_open_
+                        });
                         (0, $57o7A$solidjs.createComputed)(()=>{
                             if (!is_loading_()) return;
                             set_should_have_placeholders_rendered(true);
                             set_suspense_is_blocked(false);
                             is_just_after_plp_results_update = true;
                         });
-                        $fe76fb463cc60b89$var$results_grid_styling_generator({
-                            layout_options_: layout_options_,
-                            set_styling_: set_styling_,
-                            sort_or_filter_open_: sort_or_filter_open_,
-                            selector_beginning_: selector_beginning_
-                        });
-                        const has_at_least_one_display = (0, $57o7A$solidjs.createMemo)(()=>!!plp_results_()?.displays?.length); // Only de-construct below stuff if we get 0 displays. Important that this returns boolean so that below Suspense only gets re-created if it actually changes
                         const block_suspense_if_needed = ()=>{
                             if (!is_just_after_plp_results_update) return;
                             is_just_after_plp_results_update = false;
                             fallback_is_alive = false;
                             set_suspense_is_blocked(true);
                         };
-                        const non_placeholder_product_cards = (0, $57o7A$solidjs.createMemo)(()=>has_at_least_one_display() && // This suspense ensures that if someone has async templates, we still show placeholders until the product cards actually have finished rendering (automagically since they're createResource's)
-                            // We're creating it outside the <Show> so that we can benefit from <For>'s optimisation between changing results
-                            // (For the whole idea of the displays being cached to work we can't tear down and re-run ProductCards for every new result.
-                            // We have to keep ProductCards alive, but hidden, and feed them new data as soon as we had it)
-                            (0, $57o7A$solidjsweb.createComponent)((0, $57o7A$solidjs.Suspense), {
-                                get fallback () {
-                                    return (()=>{
-                                        fallback_is_alive = true;
-                                        (0, $57o7A$solidjs.onCleanup)(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
-                                        return (0, $57o7A$solidjs.createMemo)(()=>{
-                                            // We need to be able to block the suspense since when async product cards are *rendering* we want to show the placeholders on initial load but not when loading more
-                                            // In future we could have individual suspense's for each product card, but that's too much for now
-                                            if (get_suspense_is_blocked()) return suspense_contents;
-                                            set_should_have_placeholders_rendered(true); // just in case
-                                            (0, $57o7A$solidjs.onCleanup)(()=>set_should_have_placeholders_rendered(false));
-                                            return rendered_placeholders; // I lifted the placeholders into the memo since we don't want to re-render them when switching from <Show> to <Suspense>
-                                        });
-                                    })();
-                                },
-                                get children () {
-                                    return (()=>{
-                                        suspense_contents = (0, $ac167f6af6a48fc3$export$a1fd619a4743ca08)({
-                                            product_card_template_: product_card_template_,
-                                            plp_results_: plp_results_,
-                                            last_result_in_viewport_: last_result_in_viewport_,
-                                            first_result_in_viewport_: first_result_in_viewport_,
-                                            market_: market_,
-                                            merchant_: merchant_,
-                                            all_products_loaded_: all_products_loaded_,
-                                            min_products_to_fetch_: min_products_to_fetch_,
-                                            query_base_: query_base_,
-                                            depict_api_: depict_api_,
-                                            is_loading_: is_loading_
-                                        });
-                                        (0, $57o7A$solidjs.onCleanup)(()=>suspense_contents = undefined);
-                                        return suspense_contents;
-                                    })();
-                                }
-                            }));
                         (0, $57o7A$solidjs.createEffect)((0, $57o7A$solidjs.on)(plp_results_, ()=>{
                             if (!fallback_is_alive) {
                                 // if all product card rendering functions after the initial rendering are synchronous the suspense boundary will never go into the fallback, so we don't know when they have finished rendering, and we can't block the suspense. Therefore, we're just doing it with this effect
@@ -1450,27 +1526,69 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({ plp_results_: plp_results_
                         }));
                         return [
                             (0, $57o7A$solidjsweb.memo)((0, $fc23d7668ae0011d$export$a2cc176055f8f08)),
-                            (()=>{
-                                const _el$6 = (0, $57o7A$solidjsweb.getNextElement)($fe76fb463cc60b89$var$_tmpl$2);
-                                (0, $57o7A$solidjsweb.setAttribute)(_el$6, "id", random_id);
-                                (0, $57o7A$solidjsweb.insert)(_el$6, (0, $57o7A$solidjsweb.createComponent)((0, $57o7A$solidjs.Show), {
-                                    get when () {
-                                        return !is_loading_();
-                                    },
-                                    get fallback () {
-                                        return rendered_placeholders();
-                                    },
-                                    get children () {
-                                        return non_placeholder_product_cards();
-                                    }
-                                }));
-                                return _el$6;
-                            })(),
-                            (()=>{
-                                const _el$7 = (0, $57o7A$solidjsweb.getNextElement)($fe76fb463cc60b89$var$_tmpl$3);
-                                (0, $57o7A$solidjsweb.insert)(_el$7, get_styling);
-                                return _el$7;
-                            })()
+                            (0, $57o7A$solidjsweb.createComponent)((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), {
+                                get cols_at_size () {
+                                    return modified_cols_at_size();
+                                },
+                                get override_vertical_spacing () {
+                                    return layout_options_().override_vertical_spacing;
+                                },
+                                get grid_spacing () {
+                                    return layout_options_().grid_spacing;
+                                },
+                                rows: "all",
+                                layout: "grid",
+                                element_attributes: {
+                                    class: "cards"
+                                },
+                                get children () {
+                                    return (0, $57o7A$solidjsweb.createComponent)((0, $57o7A$solidjs.Show), {
+                                        get when () {
+                                            return !is_loading_();
+                                        },
+                                        get fallback () {
+                                            return rendered_placeholders();
+                                        },
+                                        get children () {
+                                            return (0, $57o7A$solidjsweb.createComponent)((0, $57o7A$solidjs.Suspense), {
+                                                get fallback () {
+                                                    return (()=>{
+                                                        fallback_is_alive = true;
+                                                        (0, $57o7A$solidjs.onCleanup)(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
+                                                        return (0, $57o7A$solidjs.createMemo)(()=>{
+                                                            // We need to be able to block the suspense since when async product cards are *rendering* we want to show the placeholders on initial load but not when loading more
+                                                            // In future we could have individual suspense's for each product card, but that's too much for now
+                                                            if (get_suspense_is_blocked()) return suspense_contents;
+                                                            set_should_have_placeholders_rendered(true); // just in case
+                                                            (0, $57o7A$solidjs.onCleanup)(()=>set_should_have_placeholders_rendered(false));
+                                                            return rendered_placeholders; // I lifted the placeholders into the memo since we don't want to re-render them when switching from <Show> to <Suspense>
+                                                        });
+                                                    })();
+                                                },
+                                                get children () {
+                                                    return (()=>{
+                                                        suspense_contents = (0, $ac167f6af6a48fc3$export$a1fd619a4743ca08)({
+                                                            product_card_template_: product_card_template_,
+                                                            plp_results_: plp_results_,
+                                                            last_result_in_viewport_: last_result_in_viewport_,
+                                                            first_result_in_viewport_: first_result_in_viewport_,
+                                                            market_: market_,
+                                                            merchant_: merchant_,
+                                                            all_products_loaded_: all_products_loaded_,
+                                                            min_products_to_fetch_: min_products_to_fetch_,
+                                                            query_base_: query_base_,
+                                                            depict_api_: depict_api_,
+                                                            is_loading_: is_loading_
+                                                        });
+                                                        (0, $57o7A$solidjs.onCleanup)(()=>suspense_contents = undefined);
+                                                        return suspense_contents;
+                                                    })();
+                                                }
+                                            });
+                                        }
+                                    });
+                                }
+                            })
                         ];
                     }
                 });
@@ -1482,13 +1600,14 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({ plp_results_: plp_results_
     })();
 }
 /**
- * Sets styling to styling generated by "Layout" (n_col_styling_with_dist) depending on if filters are open or not
+ * Changes cols_at_size depending on if filters are open or not so one card less is shown when the filters are open
  * This function is special to the actual PLPResults.
- */ function $fe76fb463cc60b89$var$results_grid_styling_generator({ layout_options_: layout_options_ , sort_or_filter_open_: sort_or_filter_open_ , set_styling_: set_styling_ , selector_beginning_: selector_beginning_  }) {
-    (0, $57o7A$solidjs.createRenderEffect)(()=>{
+ */ function $fe76fb463cc60b89$var$make_modified_cols_at_size({ layout_options_: layout_options_ , sort_or_filter_open_: sort_or_filter_open_  }) {
+    return (0, $57o7A$solidjs.createMemo)(()=>{
+        const layout_options = layout_options_();
         // Add grid styling that changes when filters get opened/closed
-        const when_filters_closed_cols = layout_options_.cols_at_size;
-        const cols_at_size = sort_or_filter_open_() ? when_filters_closed_cols.map((row)=>{
+        const when_filters_closed_cols = layout_options.cols_at_size;
+        return sort_or_filter_open_() ? when_filters_closed_cols.map((row)=>{
             const [num_cols_default, , , , override_cols] = row;
             const cloned_row = [
                 ...row
@@ -1504,8 +1623,6 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({ plp_results_: plp_results_
             };
             return cloned_row;
         }) : when_filters_closed_cols;
-        const css = (0, $57o7A$depictaiutilishared.n_col_styling_with_dist)(selector_beginning_, layout_options_.grid_spacing, cols_at_size, "grid", layout_options_.override_vertical_spacing);
-        set_styling_(css);
     });
 }
 
@@ -6129,15 +6246,19 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
         });
     }
 }
-function $48567ac5b39bac56$export$e2bf8ce7779e827e({ depict_category: depict_category , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , show_breadcrumbs: show_breadcrumbs = true , show_quicklinks: show_quicklinks = true , category_title: category_title  }) {
+function $48567ac5b39bac56$export$e2bf8ce7779e827e(props) {
+    const { depict_category: depict_category , product_card_template: product_card_template , category_title: category_title  } = props;
     const shared_properties = $48567ac5b39bac56$var$get_shared_properties(depict_category);
-    const grid_spacing_override = typeof grid_spacing === "string" ? {
-        grid_spacing: grid_spacing
-    } : {
-        override_vertical_spacing: grid_spacing.vertical,
-        grid_spacing: grid_spacing.horizontal
-    };
     return (0, $95837413165cc2df$export$23fca46f3143581f)(()=>{
+        const grid_spacing_override = (0, $57o7A$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 { state_: { category_local_filter_cache: local_filter_cache_ , category_filters_open: category_filters_open_ , category_sorting_open: category_sorting_open_ , category_expanded_filters: expanded_filters_ , category_expanded_hierarchical_filters: expanded_hierarchical_filters_ , category_scroll_restoration_data: scroll_restoration_data_  } , current_sorting_: current_sorting_ , selected_filters_: selected_filters_ , reset_history_state_: reset_history_state_ , depict_api_: depict_api_ , i18n_: i18n_ , router_: router_ , breadcrumb_signal_: breadcrumb_signal_ , quicklinks_signal_: quicklinks_signal_ , sideways_filter_clearing_flag_: sideways_filter_clearing_flag_  } = shared_properties;
         (0, $57o7A$solidjs.onCleanup)(reset_history_state_);
         return (0, $840d88a04b2d22a7$export$f7d2f673fc2f091d)({
@@ -6149,9 +6270,9 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e({ depict_category: depict_cat
             query_id_: ()=>depict_category.category_id,
             listing_type_: ()=>depict_category.listing_type,
             i18n_: i18n_,
-            show_quicklinks_: show_quicklinks,
+            show_quicklinks_: (0, $57o7A$solidjs.createMemo)(()=>props.show_quicklinks ?? true),
             category_title_: category_title,
-            show_breadcrumbs_: show_breadcrumbs,
+            show_breadcrumbs_: (0, $57o7A$solidjs.createMemo)(()=>props.show_breadcrumbs ?? true),
             current_sorting_: current_sorting_,
             router_: router_,
             get_breadcrumb_accessor_: (accessor)=>(0, $57o7A$solidjs.createComputed)(()=>breadcrumb_signal_[1](accessor())),
@@ -6163,10 +6284,10 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e({ depict_category: depict_cat
             selected_filters_: selected_filters_,
             sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
             scroll_restoration_data_: scroll_restoration_data_,
-            layout_options_: {
-                cols_at_size: (0, $4e04be41243c3d80$export$6daf8749b65a1b77)(cols_at_size),
-                ...grid_spacing_override
-            },
+            layout_options_: (0, $57o7A$solidjs.createMemo)(()=>({
+                    cols_at_size: (0, $4e04be41243c3d80$export$6daf8749b65a1b77)(props.cols_at_size),
+                    ...grid_spacing_override()
+                })),
             product_card_template_: product_card_template
         });
     }, "Entire CategoryPage failed");
@@ -6661,80 +6782,74 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({ search_field_value_: search
 
 
 
-const $fb29c6201c369e39$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div class="cards"></div>`, 2), $fb29c6201c369e39$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div class="search-recs"><h3 class="search-recs-title"></h3><!#><!/><!#><!/></div>`, 8), $fb29c6201c369e39$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<button class="show-more major" type="button"></button>`, 2);
+
+const $fb29c6201c369e39$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div class="search-recs"><h3 class="search-recs-title"></h3><!#><!/><!#><!/></div>`, 8), $fb29c6201c369e39$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<button class="show-more major" type="button"></button>`, 2);
 const $fb29c6201c369e39$export$1c8c715550dc689d = 2;
 function $fb29c6201c369e39$export$7de92c4c2205ebf3({ depict_api_: depict_api_ , i18n_: i18n_ , search_query_base_: search_query_base_ , product_card_template_: product_card_template_ , showing_recommendation_rows_: showing_recommendation_rows_ , view_more_button_: view_more_button_ = true , layout_options_: layout_options_  }) {
     const [get_showing_recommendation_rows] = showing_recommendation_rows_; // We reset this in after_submit in search.tsx FYI
     const rows_object = view_more_button_ ? $fb29c6201c369e39$var$make_state_saved_rows(showing_recommendation_rows_, i18n_) : "all";
     const [recommendations_resource] = (0, $57o7A$solidjs.createResource)(search_query_base_, (query)=>depict_api_.get_recommended(query).then((r)=>r.displays));
     const is_showing_something = (0, $57o7A$solidjs.createMemo)(()=>recommendations_resource.loading || recommendations_resource()?.length);
-    const num_placeholders_ = (0, $57o7A$solidjs.createMemo)(()=>(0, $aec24316ed262dc0$export$6c9030e511152266) + get_showing_recommendation_rows() * Math.max(...layout_options_.cols_at_size.map(([per_column])=>per_column)));
-    const cards = (()=>{
-        const _el$ = (0, $57o7A$solidjsweb.getNextElement)($fb29c6201c369e39$var$_tmpl$);
-        (0, $57o7A$solidjsweb.insert)(_el$, (0, $57o7A$solidjsweb.createComponent)((0, $57o7A$solidjs.Suspense), {
-            get fallback () {
-                return (0, $0caf87eaa19079da$export$f33414a4df0afd3f)({
-                    num_placeholders_: num_placeholders_,
-                    product_card_template_: product_card_template_
-                });
-            },
-            get children () {
-                return (()=>{
-                    // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
-                    const displays_by_key_ = (0, $a73063cc642f3e5f$export$7f8bd308237ab5a5)((0, $57o7A$solidjs.createMemo)(()=>recommendations_resource() || []));
-                    return (0, $a73063cc642f3e5f$export$43f0fb951fcb0c54)({
-                        displays_by_key_: displays_by_key_,
-                        merchant_: (0, $57o7A$solidjs.createMemo)(()=>search_query_base_().tenant),
-                        market_: (0, $57o7A$solidjs.createMemo)(()=>search_query_base_().market),
-                        product_card_template_: product_card_template_
-                    });
-                })();
-            }
-        }));
-        return _el$;
-    })();
-    const search_recs_elements = (()=>{
-        const _el$2 = (0, $57o7A$solidjsweb.getNextElement)($fb29c6201c369e39$var$_tmpl$2), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, [_el$5, _co$] = (0, $57o7A$solidjsweb.getNextMarker)(_el$4.nextSibling), _el$6 = _el$5.nextSibling, [_el$7, _co$2] = (0, $57o7A$solidjsweb.getNextMarker)(_el$6.nextSibling);
-        (0, $57o7A$solidjsweb.insert)(_el$3, ()=>i18n_.search_recs_title_());
-        (0, $57o7A$solidjsweb.insert)(_el$2, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$5, _co$);
-        (0, $57o7A$solidjsweb.insert)(_el$2, cards, _el$7, _co$2);
-        return _el$2;
-    })();
-    // the cards element must have a parent for Layout to work, therefore we're inserting it into a div above
-    (0, $57o7A$depictaiutilishared.Layout)({
-        container_element: cards,
-        layout: "grid",
-        rows: rows_object,
-        ...layout_options_
-    }).catch((e)=>(0, $57o7A$depictaiutilishared.report)([
-            e,
-            "Layout failed"
-        ], "error"));
+    const num_placeholders_ = (0, $57o7A$solidjs.createMemo)(()=>(0, $aec24316ed262dc0$export$6c9030e511152266) + get_showing_recommendation_rows() * Math.max(...layout_options_().cols_at_size.map(([per_column])=>per_column)));
     return (0, $57o7A$solidjsweb.createComponent)((0, $57o7A$solidjs.Show), {
         get when () {
             return is_showing_something();
         },
-        children: search_recs_elements
+        get children () {
+            const _el$ = (0, $57o7A$solidjsweb.getNextElement)($fb29c6201c369e39$var$_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, [_el$4, _co$] = (0, $57o7A$solidjsweb.getNextMarker)(_el$3.nextSibling), _el$5 = _el$4.nextSibling, [_el$6, _co$2] = (0, $57o7A$solidjsweb.getNextMarker)(_el$5.nextSibling);
+            (0, $57o7A$solidjsweb.insert)(_el$2, ()=>i18n_.search_recs_title_());
+            (0, $57o7A$solidjsweb.insert)(_el$, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$4, _co$);
+            (0, $57o7A$solidjsweb.insert)(_el$, (0, $57o7A$solidjsweb.createComponent)((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), (0, $57o7A$solidjsweb.mergeProps)({
+                rows: rows_object,
+                layout: "grid",
+                element_attributes: {
+                    class: "cards"
+                }
+            }, layout_options_, {
+                get children () {
+                    return (0, $57o7A$solidjsweb.createComponent)((0, $57o7A$solidjs.Suspense), {
+                        get fallback () {
+                            return (0, $0caf87eaa19079da$export$f33414a4df0afd3f)({
+                                num_placeholders_: num_placeholders_,
+                                product_card_template_: product_card_template_
+                            });
+                        },
+                        get children () {
+                            return (()=>{
+                                // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
+                                const displays_by_key_ = (0, $a73063cc642f3e5f$export$7f8bd308237ab5a5)((0, $57o7A$solidjs.createMemo)(()=>recommendations_resource() || []));
+                                return (0, $a73063cc642f3e5f$export$43f0fb951fcb0c54)({
+                                    displays_by_key_: displays_by_key_,
+                                    merchant_: (0, $57o7A$solidjs.createMemo)(()=>search_query_base_().tenant),
+                                    market_: (0, $57o7A$solidjs.createMemo)(()=>search_query_base_().market),
+                                    product_card_template_: product_card_template_
+                                });
+                            })();
+                        }
+                    });
+                }
+            })), _el$6, _co$2);
+            return _el$;
+        }
     });
 }
 function $fb29c6201c369e39$var$make_state_saved_rows([get_showing_recommendation_rows, set_showing_recommendation_rows], i18n_) {
-    const ipns = (0, $57o7A$depictaiutilishared.async_iterable_ipns)();
+    const currently_visible = (0, $57o7A$solidjs.createSignal)(0); // this number shouldn't matter for anything except typing
+    const [get_currently_visible, set_currently_visible] = currently_visible;
     const rows = {
-        ipns: ipns,
+        currently_visible: currently_visible,
         start_rows: (0, $57o7A$solidjs.untrack)(get_showing_recommendation_rows) ?? $fb29c6201c369e39$export$1c8c715550dc689d,
         rows_per_click: 3,
         button: (()=>{
-            const _el$8 = (0, $57o7A$solidjsweb.getNextElement)($fb29c6201c369e39$var$_tmpl$3);
-            (0, $57o7A$solidjsweb.insert)(_el$8, ()=>i18n_.view_more_());
-            return _el$8;
+            const _el$7 = (0, $57o7A$solidjsweb.getNextElement)($fb29c6201c369e39$var$_tmpl$2);
+            (0, $57o7A$solidjsweb.insert)(_el$7, ()=>i18n_.view_more_());
+            return _el$7;
         })()
     };
-    (0, $57o7A$depictaiutilishared.catchify)(async ()=>{
-        for await (const number of ipns)set_showing_recommendation_rows(number);
-    })();
-    (0, $57o7A$solidjs.createComputed)((0, $57o7A$solidjs.on)(get_showing_recommendation_rows, (new_rows = $fb29c6201c369e39$export$1c8c715550dc689d)=>{
-        if (ipns.latest_call_value !== new_rows && ipns.state !== new_rows) ipns(new_rows);
-    }, {
+    (0, $57o7A$solidjs.createComputed)((0, $57o7A$solidjs.on)(get_currently_visible, (new_visible)=>set_showing_recommendation_rows(new_visible), {
+        defer: true
+    }));
+    (0, $57o7A$solidjs.createComputed)((0, $57o7A$solidjs.on)(get_showing_recommendation_rows, (new_rows = $fb29c6201c369e39$export$1c8c715550dc689d)=>set_currently_visible(new_rows), {
         defer: true
     }));
     return rows;
@@ -8187,7 +8302,7 @@ function $2005eec80e40088f$export$41b4894022a3580f({ style_props_: style_props_
 
 
 const $f1d7cb69f839a526$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div class="filter-results-for-one-row"><!#><!/><!#><!/></div>`, 6), $f1d7cb69f839a526$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div class="depict plp search"><div class="listing-page"><!#><!/><!#><!/><!#><!/><!#><!/><!#><!/><!#><!/></div><!#><!/><!#><!/></div>`, 20);
-function $f1d7cb69f839a526$export$a54ec244c8863715({ depict_api_: depict_api_ , search_field_value_: search_field_value_ , get_search_query_: get_search_query_ , open_modal_: open_modal_ , submit_query_: submit_query_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , search_filters_open_: search_filters_open_ , search_sorting_open_: search_sorting_open_ , expanded_filters_: expanded_filters_ , input_modal_open_: input_modal_open_ , selected_filters_: selected_filters_ , i18n_: i18n_ , make_category_suggestion_card_: make_category_suggestion_card_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , clear_filters_on_next_submit_: clear_filters_on_next_submit_ , local_filter_cache_: local_filter_cache_ , include_input_field_: include_input_field_ , tenant_: tenant_ , market_: market_ , showing_recommendation_rows_: showing_recommendation_rows_ , search_recs_view_more_: search_recs_view_more_ , disable_search_recommendations_: disable_search_recommendations_ , layout_options_: layout_options_ , recommendations_layout_options_: recommendations_layout_options_ = layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , modal_body_style_ref_: modal_body_style_ref_  }) {
+function $f1d7cb69f839a526$export$a54ec244c8863715({ depict_api_: depict_api_ , search_field_value_: search_field_value_ , get_search_query_: get_search_query_ , open_modal_: open_modal_ , submit_query_: submit_query_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , search_filters_open_: search_filters_open_ , search_sorting_open_: search_sorting_open_ , expanded_filters_: expanded_filters_ , input_modal_open_: input_modal_open_ , selected_filters_: selected_filters_ , i18n_: i18n_ , make_category_suggestion_card_: make_category_suggestion_card_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , clear_filters_on_next_submit_: clear_filters_on_next_submit_ , local_filter_cache_: local_filter_cache_ , include_input_field_: include_input_field_ , tenant_: tenant_ , market_: market_ , showing_recommendation_rows_: showing_recommendation_rows_ , search_recs_view_more_: search_recs_view_more_ , disable_search_recommendations_: disable_search_recommendations_ , layout_options_: layout_options_ , recommendations_layout_options_: recommendations_layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , modal_body_style_ref_: modal_body_style_ref_  }) {
     const [get_sorting] = current_sorting_;
     const all_products_loaded_ = (0, $57o7A$solidjs.createSignal)(false);
     const [get_all_products_loaded, set_all_products_loaded] = all_products_loaded_;
@@ -8435,7 +8550,9 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({ depict_api_: depict_api_ ,
                                 depict_api_: depict_api_,
                                 i18n_: i18n_,
                                 search_query_base_: search_query_base_,
-                                layout_options_: recommendations_layout_options_,
+                                get layout_options_ () {
+                                    return (0, $57o7A$solidjs.createMemo)(()=>recommendations_layout_options_?.() ?? layout_options_());
+                                },
                                 showing_recommendation_rows_: showing_recommendation_rows_,
                                 view_more_button_: search_recs_view_more_,
                                 product_card_template_: product_card_template_
@@ -8725,16 +8842,19 @@ function $2c61e4cd8229c49a$var$get_shared_properties(depict_search) {
     return shared_properties;
 }
 function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb(props) {
-    const { depict_search: depict_search , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , extra_depict_options: extra_depict_options  } = props;
+    const { depict_search: depict_search , product_card_template: product_card_template  } = props;
     const shared_properties = $2c61e4cd8229c49a$var$get_shared_properties(depict_search);
-    const grid_spacing_override = typeof grid_spacing === "string" ? {
-        grid_spacing: grid_spacing
-    } : {
-        override_vertical_spacing: grid_spacing.vertical,
-        grid_spacing: grid_spacing.horizontal
-    };
     return (0, $95837413165cc2df$export$23fca46f3143581f)(()=>{
         const { state_: state_  } = shared_properties;
+        const grid_spacing_override = (0, $57o7A$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
+            };
+        });
         (0, $57o7A$solidjs.onCleanup)(shared_properties.reset_history_state_);
         return (0, $f1d7cb69f839a526$export$a54ec244c8863715)({
             input_modal_open_: ()=>!!depict_search.modal_open,
@@ -8780,19 +8900,23 @@ function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb(props) {
             showing_recommendation_rows_: state_.search_showing_recommendation_rows,
             scroll_restoration_data_: state_.search_scroll_restoration_data,
             include_input_field_: ()=>props.include_input_field,
-            layout_options_: {
-                cols_at_size: (0, $4e04be41243c3d80$export$6daf8749b65a1b77)(cols_at_size),
-                ...grid_spacing_override
-            },
-            recommendations_layout_options_: extra_depict_options?.recommendations_cols_at_size ? {
-                cols_at_size: (0, $4e04be41243c3d80$export$6daf8749b65a1b77)(extra_depict_options.recommendations_cols_at_size),
-                ...grid_spacing_override
-            } : undefined,
+            layout_options_: (0, $57o7A$solidjs.createMemo)(()=>({
+                    cols_at_size: (0, $4e04be41243c3d80$export$6daf8749b65a1b77)(props.cols_at_size),
+                    ...grid_spacing_override()
+                })),
+            recommendations_layout_options_: (0, $57o7A$solidjs.createMemo)(()=>{
+                const { extra_depict_options: extra_depict_options  } = props;
+                return extra_depict_options?.recommendations_cols_at_size ? {
+                    cols_at_size: (0, $4e04be41243c3d80$export$6daf8749b65a1b77)(extra_depict_options.recommendations_cols_at_size),
+                    ...grid_spacing_override()
+                } : undefined;
+            }),
             product_card_template_: product_card_template
         });
     }, "Entire SearchPage failed");
 }
-function $2c61e4cd8229c49a$export$316f6f283ae64765({ depict_search: depict_search , modal_dispose_handler: modal_dispose_handler , click_handler: click_handler , aligner_ref: aligner_ref  }) {
+function $2c61e4cd8229c49a$export$316f6f283ae64765(props) {
+    const { depict_search: depict_search , modal_dispose_handler: modal_dispose_handler , click_handler: click_handler  } = props;
     const shared_properties = $2c61e4cd8229c49a$var$get_shared_properties(depict_search);
     return (0, $95837413165cc2df$export$23fca46f3143581f)(()=>{
         let input_element;
@@ -8821,7 +8945,7 @@ function $2c61e4cd8229c49a$export$316f6f283ae64765({ depict_search: depict_searc
                         input_element.selectionStart,
                         input_element.selectionEnd
                     ];
-                    const { cleanup: cleanup  } = $2c61e4cd8229c49a$var$align_field_modal(style_props_, search_field, aligner_ref);
+                    const { cleanup: cleanup  } = $2c61e4cd8229c49a$var$align_field_modal(style_props_, search_field, ()=>props.aligner_ref);
                     const complete_modal_dispose_handler = ()=>{
                         modal_dispose_handler?.();
                         cleanup();
@@ -8849,23 +8973,21 @@ function $2c61e4cd8229c49a$export$316f6f283ae64765({ depict_search: depict_searc
         ];
     }, "SearchField failed");
 }
-function $2c61e4cd8229c49a$var$align_field_modal(style_props_, input, aligner_ref) {
+function $2c61e4cd8229c49a$var$align_field_modal(style_props_, input, aligner_ref_accessor) {
     return (0, $57o7A$solidjs.createRoot)((dispose)=>{
-        if (aligner_ref) {
+        (0, $57o7A$solidjs.createComputed)(()=>{
+            const aligner_ref = aligner_ref_accessor?.();
+            if (!aligner_ref) {
+                (0, $fd463ff0edb29915$export$b3ad617e9036868)(style_props_, input);
+                return;
+            }
             const { cleanup: cleanup  } = (0, $d8e94ea381ab57fa$export$828dcdd425fd3231)(aligner_ref);
+            (0, $57o7A$solidjs.onCleanup)(cleanup);
             (0, $fd463ff0edb29915$export$b3ad617e9036868)(style_props_, aligner_ref, undefined, false, "top");
-            return {
-                cleanup: ()=>{
-                    cleanup();
-                    dispose();
-                }
-            };
-        } else {
-            (0, $fd463ff0edb29915$export$b3ad617e9036868)(style_props_, input);
-            return {
-                cleanup: dispose
-            };
-        }
+        });
+        return {
+            cleanup: dispose
+        };
     });
 }