@depict-ai/ui 1.3.2 → 1.3.4

package/dist/server/module.js

@@ -1,13 +1,181 @@
-import {add_to_version_info as $cV3wj$add_to_version_info, observer as $cV3wj$observer, catchify as $cV3wj$catchify, fetch_recs as $cV3wj$fetch_recs, snakeCasifyObject as $cV3wj$snakeCasifyObject, instant_exec_on_suspect_history_change as $cV3wj$instant_exec_on_suspect_history_change, base_url as $cV3wj$base_url, dlog as $cV3wj$dlog, get_depict_id as $cV3wj$get_depict_id, get_user_id as $cV3wj$get_user_id, get_session_id as $cV3wj$get_session_id, sort_obj as $cV3wj$sort_obj, fetch_retry as $cV3wj$fetch_retry, add_version_query_params as $cV3wj$add_version_query_params, dwarn as $cV3wj$dwarn, make_url_with_query_params as $cV3wj$make_url_with_query_params, report as $cV3wj$report, javascript_media_query as $cV3wj$javascript_media_query, standard_price_format as $cV3wj$standard_price_format, make_random_classname as $cV3wj$make_random_classname, n_col_styling_with_dist as $cV3wj$n_col_styling_with_dist, useExpandingContainer as $cV3wj$useExpandingContainer, Amazing_Slider as $cV3wj$Amazing_Slider, slider_snap_css as $cV3wj$slider_snap_css, slider_fading_factory as $cV3wj$slider_fading_factory, hsl_to_rgb as $cV3wj$hsl_to_rgb, relative_luminance_from_rgb as $cV3wj$relative_luminance_from_rgb, base64_encode_unicode as $cV3wj$base64_encode_unicode, base64_decode_unicode as $cV3wj$base64_decode_unicode, queueMacroTask as $cV3wj$queueMacroTask, Layout as $cV3wj$Layout, async_iterable_ipns as $cV3wj$async_iterable_ipns, make_asyncIterable_exiter as $cV3wj$make_asyncIterable_exiter, href_change_ipns as $cV3wj$href_change_ipns, ContainedImage as $cV3wj$ContainedImage, deparallelize_no_drop as $cV3wj$deparallelize_no_drop, insert_surfaces as $cV3wj$insert_surfaces} from "@depict-ai/utilishared";
-import {createRoot as $cV3wj$createRoot, createSignal as $cV3wj$createSignal, getOwner as $cV3wj$getOwner, runWithOwner as $cV3wj$runWithOwner, onCleanup as $cV3wj$onCleanup, createComputed as $cV3wj$createComputed, createRenderEffect as $cV3wj$createRenderEffect, createEffect as $cV3wj$createEffect, untrack as $cV3wj$untrack, batch as $cV3wj$batch, createResource as $cV3wj$createResource, createMemo as $cV3wj$createMemo, Show as $cV3wj$Show, createReaction as $cV3wj$createReaction, Suspense as $cV3wj$Suspense, on as $cV3wj$on, ErrorBoundary as $cV3wj$ErrorBoundary, For as $cV3wj$For, Index as $cV3wj$Index} from "solid-js";
-import {ssrElement as $cV3wj$ssrElement, ssr as $cV3wj$ssr, ssrHydrationKey as $cV3wj$ssrHydrationKey, ssrAttribute as $cV3wj$ssrAttribute, escape as $cV3wj$escape, isServer as $cV3wj$isServer, createComponent as $cV3wj$createComponent, ssrClassList as $cV3wj$ssrClassList, insert as $cV3wj$insert, ssrStyle as $cV3wj$ssrStyle, Dynamic as $cV3wj$Dynamic, mergeProps as $cV3wj$mergeProps} from "solid-js/web";
+import {add_to_version_info as $cV3wj$add_to_version_info, make_random_classname as $cV3wj$make_random_classname, n_col_styling_with_dist as $cV3wj$n_col_styling_with_dist, catchify as $cV3wj$catchify, layout_get_visible_recs_without_partial_rows as $cV3wj$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $cV3wj$layout_get_total_rec_amount_for_row, layout_media_query_header as $cV3wj$layout_media_query_header, report as $cV3wj$report, observer as $cV3wj$observer, fetch_recs as $cV3wj$fetch_recs, snakeCasifyObject as $cV3wj$snakeCasifyObject, instant_exec_on_suspect_history_change as $cV3wj$instant_exec_on_suspect_history_change, base_url as $cV3wj$base_url, dlog as $cV3wj$dlog, get_depict_id as $cV3wj$get_depict_id, get_user_id as $cV3wj$get_user_id, get_session_id as $cV3wj$get_session_id, sort_obj as $cV3wj$sort_obj, fetch_retry as $cV3wj$fetch_retry, add_version_query_params as $cV3wj$add_version_query_params, dwarn as $cV3wj$dwarn, make_url_with_query_params as $cV3wj$make_url_with_query_params, javascript_media_query as $cV3wj$javascript_media_query, standard_price_format as $cV3wj$standard_price_format, useExpandingContainer as $cV3wj$useExpandingContainer, Amazing_Slider as $cV3wj$Amazing_Slider, slider_snap_css as $cV3wj$slider_snap_css, slider_fading_factory as $cV3wj$slider_fading_factory, hsl_to_rgb as $cV3wj$hsl_to_rgb, relative_luminance_from_rgb as $cV3wj$relative_luminance_from_rgb, base64_encode_unicode as $cV3wj$base64_encode_unicode, base64_decode_unicode as $cV3wj$base64_decode_unicode, queueMacroTask as $cV3wj$queueMacroTask, make_asyncIterable_exiter as $cV3wj$make_asyncIterable_exiter, href_change_ipns as $cV3wj$href_change_ipns, ContainedImage as $cV3wj$ContainedImage, deparallelize_no_drop as $cV3wj$deparallelize_no_drop, insert_surfaces as $cV3wj$insert_surfaces} from "@depict-ai/utilishared";
+import {createComponent as $cV3wj$createComponent, ssrElement as $cV3wj$ssrElement, escape as $cV3wj$escape, ssr as $cV3wj$ssr, ssrHydrationKey as $cV3wj$ssrHydrationKey, ssrClassList as $cV3wj$ssrClassList, ssrAttribute as $cV3wj$ssrAttribute, isServer as $cV3wj$isServer, insert as $cV3wj$insert, ssrStyle as $cV3wj$ssrStyle, Dynamic as $cV3wj$Dynamic, mergeProps as $cV3wj$mergeProps} from "solid-js/web";
+import {createMemo as $cV3wj$createMemo, createSignal as $cV3wj$createSignal, createComputed as $cV3wj$createComputed, createRenderEffect as $cV3wj$createRenderEffect, untrack as $cV3wj$untrack, onCleanup as $cV3wj$onCleanup, ErrorBoundary as $cV3wj$ErrorBoundary, createRoot as $cV3wj$createRoot, getOwner as $cV3wj$getOwner, runWithOwner as $cV3wj$runWithOwner, createEffect as $cV3wj$createEffect, batch as $cV3wj$batch, createResource as $cV3wj$createResource, Show as $cV3wj$Show, createReaction as $cV3wj$createReaction, on as $cV3wj$on, Suspense as $cV3wj$Suspense, For as $cV3wj$For, Index as $cV3wj$Index} from "solid-js";
 
-/*! Depict.ai search and product listing SDK */ const $ec291e0010116877$export$83d89fbfd8236492 = "1.3.2";
+/*! Depict.ai search and product listing SDK */ const $ec291e0010116877$export$83d89fbfd8236492 = "1.3.4";
 
 
 
 
 
+
+
+
+
+
+
+function $a52235d12ccf9c88$export$2f0cbfbb4354bb52(elements) {
+    // FYI this probably doesn't work on hugely deep nestings or large amount of elements
+    return (0, $cV3wj$createMemo)(()=>$a52235d12ccf9c88$var$unwrapping_helper(elements));
+}
+function $a52235d12ccf9c88$var$unwrapping_helper(elements) {
+    const result = [];
+    if (Array.isArray(elements)) for(let i = 0; i < elements.length; i++){
+        const element = elements[i];
+        result.push(...$a52235d12ccf9c88$var$unwrapping_helper(element));
+    }
+    else if (typeof elements == "function") result.push(...$a52235d12ccf9c88$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 $4fd48cb976bf1789$export$e1d52e4f0c7557a1 extends Error {
+}
+class $4fd48cb976bf1789$export$aa14a9f43128f61f extends $4fd48cb976bf1789$export$e1d52e4f0c7557a1 {
+    constructor(templateError){
+        super("Uncaught error in product card template", {
+            cause: templateError
+        });
+    }
+}
+
+
+const $b7436a6d1fd64e3b$var$_tmpl$ = [
+    "<div",
+    ' class="',
+    '">',
+    "</div>"
+];
+function $b7436a6d1fd64e3b$export$b69d0d92862de18b(props) {
+    return (0, $cV3wj$ErrorBoundary)({
+        fallback (err, retry) {
+            const { message_: message_ , severity_: severity_  } = props;
+            let message = message_;
+            if (err instanceof (0, $4fd48cb976bf1789$export$aa14a9f43128f61f)) {
+                console.error(err.cause);
+                message = `${message}: ${err.message}`;
+            } else (0, $cV3wj$report)([
+                err,
+                message_
+            ], severity_);
+            props.on_error_?.(retry);
+            return (0, $cV3wj$ssr)($b7436a6d1fd64e3b$var$_tmpl$, (0, $cV3wj$ssrHydrationKey)(), (0, $cV3wj$ssrClassList)(Object.fromEntries(props.class_list_?.map((c)=>[
+                    c,
+                    true
+                ]) || [])), (0, $cV3wj$escape)(message));
+        },
+        get children () {
+            return props.children;
+        }
+    });
+}
+
+
+const $c8d5ff4524619fcd$var$_tmpl$ = [
+    "<div",
+    ' class="',
+    '">',
+    "</div>"
+], $c8d5ff4524619fcd$var$_tmpl$2 = [
+    "<style",
+    ' type="text/css">',
+    "</style>"
+];
+function $c8d5ff4524619fcd$export$d21e32dfedac04be(props) {
+    return (0, $cV3wj$createComponent)((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
+        get message_ () {
+            return "Failed calculating " + props.layout + " layout";
+        },
+        severity_: "error",
+        get children () {
+            return $c8d5ff4524619fcd$var$ActualSolidLayout(props);
+        }
+    });
+}
+function $c8d5ff4524619fcd$var$ActualSolidLayout(props) {
+    // Copy of Layout from utilishared but using solid-js signals instead of async iterable IPNS
+    const show_all_rows = (0, $cV3wj$createMemo)(()=>props.rows === "all");
+    const rows_or_empty_object = (0, $cV3wj$createMemo)(()=>show_all_rows() ? {} : props.rows);
+    const button_elements = (0, $a52235d12ccf9c88$export$2f0cbfbb4354bb52)((0, $cV3wj$createMemo)(()=>rows_or_empty_object().button));
+    const have_a_button = (0, $cV3wj$createMemo)(()=>{
+        const button = button_elements();
+        return !(!button || Array.isArray(button) && !button.length);
+    });
+    const [get_styling, set_styling] = (0, $cV3wj$createSignal)();
+    const container_class = (0, $cV3wj$make_random_classname)();
+    const selector_beginning = `.depict .${container_class}>`; // class so ppl can have id if needed
+    const container_element = (0, $cV3wj$ssrElement)("div", props.element_attributes, ()=>(0, $cV3wj$escape)(props.children), true);
+    const [get_children_count, set_children_count] = (0, $cV3wj$createSignal)(0);
+    const update_children_count = ()=>set_children_count(container_element.children.length);
+    const col_styling = (0, $cV3wj$createMemo)(()=>(0, $cV3wj$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, $cV3wj$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, $cV3wj$createMemo)(()=>rows_or_empty_object().currently_visible || default_currently_visible_signal);
+    const get_rows_visible = (0, $cV3wj$createMemo)(()=>rows_visible_signal()[0]());
+    const set_rows_visible = (0, $cV3wj$createMemo)(()=>rows_visible_signal()[1]);
+    const button_class = (0, $cV3wj$make_random_classname)();
+    const button_container = (0, $cV3wj$createMemo)(()=>have_a_button() && (0, $cV3wj$ssr)($c8d5ff4524619fcd$var$_tmpl$, (0, $cV3wj$ssrHydrationKey)(), "load-more-container " + (0, $cV3wj$escape)(button_class, true), (0, $cV3wj$escape)(rows_or_empty_object().button)));
+    container_element.classList.add(container_class);
+    (0, $cV3wj$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, $cV3wj$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, $cV3wj$untrack)(()=>set_rows_visible()(rows_or_empty_object().start_rows ?? 1));
+        update_children_count();
+        const mutation_observer = new MutationObserver((0, $cV3wj$catchify)(update_children_count));
+        mutation_observer.observe(container_element, {
+            childList: true
+        });
+        (0, $cV3wj$onCleanup)(()=>mutation_observer.disconnect());
+        set_styling(// this is needed because solid will think that the memo-accessor is a setter function otherwise
+        ()=>(0, $cV3wj$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, $cV3wj$layout_get_visible_recs_without_partial_rows)(rows_visible, children_count, options);
+                        const visible_recs_next_show_more = (0, $cV3wj$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, $cV3wj$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, $cV3wj$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,
+        button_container(),
+        (0, $cV3wj$ssr)($c8d5ff4524619fcd$var$_tmpl$2, (0, $cV3wj$ssrHydrationKey)(), get_styling)
+    ];
+}
+
+
+
+
 async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_opts) {
     const body = await (0, $cV3wj$observer).wait_for_element("body");
     let dispose_and_remove;
@@ -628,8 +796,6 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({ formatted_number_of_results
 
 
 
-
-
 const $598245ecfe38f34b$var$_tmpl$ = [
     "<a",
     ' class="hint" href="javascript:void(0)">',
@@ -666,70 +832,6 @@ function $a458486f22b22f63$export$a2cc176055f8f08() {
 
 
 
-
-
-// Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
-class $4fd48cb976bf1789$export$e1d52e4f0c7557a1 extends Error {
-}
-class $4fd48cb976bf1789$export$aa14a9f43128f61f extends $4fd48cb976bf1789$export$e1d52e4f0c7557a1 {
-    constructor(templateError){
-        super("Uncaught error in product card template", {
-            cause: templateError
-        });
-    }
-}
-
-
-const $b7436a6d1fd64e3b$var$_tmpl$ = [
-    "<div",
-    ' class="',
-    '">',
-    "</div>"
-];
-function $b7436a6d1fd64e3b$export$b69d0d92862de18b(props) {
-    return (0, $cV3wj$ErrorBoundary)({
-        fallback (err, retry) {
-            const { message_: message_ , severity_: severity_  } = props;
-            let message = message_;
-            if (err instanceof (0, $4fd48cb976bf1789$export$aa14a9f43128f61f)) {
-                console.error(err.cause);
-                message = `${message}: ${err.message}`;
-            } else (0, $cV3wj$report)([
-                err,
-                message_
-            ], severity_);
-            props.on_error_?.(retry);
-            return (0, $cV3wj$ssr)($b7436a6d1fd64e3b$var$_tmpl$, (0, $cV3wj$ssrHydrationKey)(), (0, $cV3wj$ssrClassList)(Object.fromEntries(props.class_list_?.map((c)=>[
-                    c,
-                    true
-                ]) || [])), (0, $cV3wj$escape)(message));
-        },
-        get children () {
-            return props.children;
-        }
-    });
-}
-
-
-
-
-function $a52235d12ccf9c88$export$2f0cbfbb4354bb52(elements) {
-    // FYI this probably doesn't work on hugely deep nestings or large amount of elements
-    return (0, $cV3wj$createMemo)(()=>$a52235d12ccf9c88$var$unwrapping_helper(elements));
-}
-function $a52235d12ccf9c88$var$unwrapping_helper(elements) {
-    const result = [];
-    if (Array.isArray(elements)) for(let i = 0; i < elements.length; i++){
-        const element = elements[i];
-        result.push(...$a52235d12ccf9c88$var$unwrapping_helper(element));
-    }
-    else if (typeof elements == "function") result.push(...$a52235d12ccf9c88$var$unwrapping_helper(elements()));
-    else if (elements != undefined && typeof elements != "boolean") result.push(elements);
-    return result;
-}
-
-
-
 let $6e41f1fde994db72$var$cached_placeholder_element;
 let $6e41f1fde994db72$var$rendering_cached_placeholder_element;
 function $6e41f1fde994db72$export$f33414a4df0afd3f({ product_card_template_: product_card_template_ , num_placeholders_: num_placeholders_  }) {
@@ -1043,21 +1145,13 @@ function $0449e7d49398c077$export$a1fd619a4743ca08({ plp_results_: plp_results_
 }
 
 
+
 const $2d25e42846eac370$var$_tmpl$ = [
     "<div",
     ' class="',
     '"><!--#-->',
     "<!--/--><!--#-->",
     "<!--/--></div>"
-], $2d25e42846eac370$var$_tmpl$2 = [
-    "<div",
-    ' class="cards"',
-    ">",
-    "</div>"
-], $2d25e42846eac370$var$_tmpl$3 = [
-    "<style",
-    ">",
-    "</style>"
 ];
 function $2d25e42846eac370$export$3925f87b1545cfc6({ plp_results_: plp_results_ , depict_api_: depict_api_ , all_products_loaded_: all_products_loaded_ , min_products_to_fetch_: min_products_to_fetch_ , query_base_: query_base_ , first_result_in_viewport_: first_result_in_viewport_ , last_result_in_viewport_: last_result_in_viewport_ , scroll_restoration_data_: [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
@@ -1099,9 +1193,6 @@ function $2d25e42846eac370$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, $cV3wj$make_random_classname)();
-                    const selector_beginning_ = `.depict.plp #${random_id}>`;
-                    const [get_styling, set_styling_] = (0, $cV3wj$createSignal)("");
                     const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = (0, $cV3wj$createSignal)(true);
                     const rendered_placeholders = (0, $cV3wj$createMemo)(()=>get_should_have_placeholders_rendered() ? (0, $6e41f1fde994db72$export$f33414a4df0afd3f)({
                             product_card_template_: product_card_template_,
@@ -1111,64 +1202,22 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({ plp_results_: plp_results_
                             })
                         }) : undefined);
                     const [get_suspense_is_blocked, set_suspense_is_blocked] = (0, $cV3wj$createSignal)(false);
+                    const modified_cols_at_size = $2d25e42846eac370$var$make_modified_cols_at_size({
+                        layout_options_: layout_options_,
+                        sort_or_filter_open_: sort_or_filter_open_
+                    });
                     (0, $cV3wj$createComputed)(()=>{
                         if (!is_loading_()) return;
                         set_should_have_placeholders_rendered(true);
                         set_suspense_is_blocked(false);
                         is_just_after_plp_results_update = true;
                     });
-                    $2d25e42846eac370$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, $cV3wj$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, $cV3wj$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, $cV3wj$createComponent)((0, $cV3wj$Suspense), {
-                            get fallback () {
-                                return (()=>{
-                                    fallback_is_alive = true;
-                                    (0, $cV3wj$onCleanup)(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
-                                    return (0, $cV3wj$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, $cV3wj$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, $0449e7d49398c077$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, $cV3wj$onCleanup)(()=>suspense_contents = undefined);
-                                    return suspense_contents;
-                                })();
-                            }
-                        }));
                     (0, $cV3wj$createEffect)((0, $cV3wj$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
@@ -1180,18 +1229,69 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({ plp_results_: plp_results_
                     }));
                     return [
                         (0, $a458486f22b22f63$export$a2cc176055f8f08)(),
-                        (0, $cV3wj$ssr)($2d25e42846eac370$var$_tmpl$2, (0, $cV3wj$ssrHydrationKey)(), (0, $cV3wj$ssrAttribute)("id", (0, $cV3wj$escape)(random_id, true), false), (0, $cV3wj$escape)((0, $cV3wj$createComponent)((0, $cV3wj$Show), {
-                            get when () {
-                                return !is_loading_();
+                        (0, $cV3wj$createComponent)((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), {
+                            get cols_at_size () {
+                                return modified_cols_at_size();
                             },
-                            get fallback () {
-                                return rendered_placeholders();
+                            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 non_placeholder_product_cards();
+                                return (0, $cV3wj$createComponent)((0, $cV3wj$Show), {
+                                    get when () {
+                                        return !is_loading_();
+                                    },
+                                    get fallback () {
+                                        return rendered_placeholders();
+                                    },
+                                    get children () {
+                                        return (0, $cV3wj$createComponent)((0, $cV3wj$Suspense), {
+                                            get fallback () {
+                                                return (()=>{
+                                                    fallback_is_alive = true;
+                                                    (0, $cV3wj$onCleanup)(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
+                                                    return (0, $cV3wj$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, $cV3wj$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, $0449e7d49398c077$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, $cV3wj$onCleanup)(()=>suspense_contents = undefined);
+                                                    return suspense_contents;
+                                                })();
+                                            }
+                                        });
+                                    }
+                                });
                             }
-                        }))),
-                        (0, $cV3wj$ssr)($2d25e42846eac370$var$_tmpl$3, (0, $cV3wj$ssrHydrationKey)(), get_styling())
+                        })
                     ];
                 }
             });
@@ -1199,13 +1299,14 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({ plp_results_: plp_results_
     })), (0, $cV3wj$escape)(desktop_filter_elements_()));
 }
 /**
- * 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 $2d25e42846eac370$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, $cV3wj$createRenderEffect)(()=>{
+ */ function $2d25e42846eac370$var$make_modified_cols_at_size({ layout_options_: layout_options_ , sort_or_filter_open_: sort_or_filter_open_  }) {
+    return (0, $cV3wj$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
@@ -1221,8 +1322,6 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({ plp_results_: plp_results_
             };
             return cloned_row;
         }) : when_filters_closed_cols;
-        const css = (0, $cV3wj$n_col_styling_with_dist)(selector_beginning_, layout_options_.grid_spacing, cols_at_size, "grid", layout_options_.override_vertical_spacing);
-        set_styling_(css);
     });
 }
 
@@ -5351,15 +5450,19 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
         });
     }
 }
-function $961b5c64bef4662f$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 $961b5c64bef4662f$export$e2bf8ce7779e827e(props) {
+    const { depict_category: depict_category , product_card_template: product_card_template , category_title: category_title  } = props;
     const shared_properties = $961b5c64bef4662f$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, $16b52438165aafe2$export$23fca46f3143581f)(()=>{
+        const grid_spacing_override = (0, $cV3wj$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, $cV3wj$onCleanup)(reset_history_state_);
         return (0, $df5d81d0fe61ff21$export$f7d2f673fc2f091d)({
@@ -5371,9 +5474,9 @@ function $961b5c64bef4662f$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, $cV3wj$createMemo)(()=>props.show_quicklinks ?? true),
             category_title_: category_title,
-            show_breadcrumbs_: show_breadcrumbs,
+            show_breadcrumbs_: (0, $cV3wj$createMemo)(()=>props.show_breadcrumbs ?? true),
             current_sorting_: current_sorting_,
             router_: router_,
             get_breadcrumb_accessor_: (accessor)=>(0, $cV3wj$createComputed)(()=>breadcrumb_signal_[1](accessor())),
@@ -5385,10 +5488,10 @@ function $961b5c64bef4662f$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, $b5cccc8ee7d24677$export$6daf8749b65a1b77)(cols_at_size),
-                ...grid_spacing_override
-            },
+            layout_options_: (0, $cV3wj$createMemo)(()=>({
+                    cols_at_size: (0, $b5cccc8ee7d24677$export$6daf8749b65a1b77)(props.cols_at_size),
+                    ...grid_spacing_override()
+                })),
             product_card_template_: product_card_template
         });
     }, "Entire CategoryPage failed");
@@ -5785,17 +5888,14 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({ search_field_value_: search
 
 
 
+
 const $172e1b898d457050$var$_tmpl$ = [
-    "<div",
-    ' class="cards">',
-    "</div>"
-], $172e1b898d457050$var$_tmpl$2 = [
     "<div",
     ' class="search-recs"><h3 class="search-recs-title">',
     "</h3><!--#-->",
     "<!--/--><!--#-->",
     "<!--/--></div>"
-], $172e1b898d457050$var$_tmpl$3 = [
+], $172e1b898d457050$var$_tmpl$2 = [
     "<button",
     ' class="show-more major" type="button">',
     "</button>"
@@ -5806,59 +5906,58 @@ function $172e1b898d457050$export$7de92c4c2205ebf3({ depict_api_: depict_api_ ,
     const rows_object = view_more_button_ ? $172e1b898d457050$var$make_state_saved_rows(showing_recommendation_rows_, i18n_) : "all";
     const [recommendations_resource] = (0, $cV3wj$createResource)(search_query_base_, (query)=>depict_api_.get_recommended(query).then((r)=>r.displays));
     const is_showing_something = (0, $cV3wj$createMemo)(()=>recommendations_resource.loading || recommendations_resource()?.length);
-    const num_placeholders_ = (0, $cV3wj$createMemo)(()=>(0, $7747fe1a8c5652e3$export$6c9030e511152266) + get_showing_recommendation_rows() * Math.max(...layout_options_.cols_at_size.map(([per_column])=>per_column)));
-    const cards = (0, $cV3wj$ssr)($172e1b898d457050$var$_tmpl$, (0, $cV3wj$ssrHydrationKey)(), (0, $cV3wj$escape)((0, $cV3wj$createComponent)((0, $cV3wj$Suspense), {
-        get fallback () {
-            return (0, $6e41f1fde994db72$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, $29ec7cddbe1d3484$export$7f8bd308237ab5a5)((0, $cV3wj$createMemo)(()=>recommendations_resource() || []));
-                return (0, $29ec7cddbe1d3484$export$43f0fb951fcb0c54)({
-                    displays_by_key_: displays_by_key_,
-                    merchant_: (0, $cV3wj$createMemo)(()=>search_query_base_().tenant),
-                    market_: (0, $cV3wj$createMemo)(()=>search_query_base_().market),
-                    product_card_template_: product_card_template_
-                });
-            })();
-        }
-    })));
-    const search_recs_elements = (0, $cV3wj$ssr)($172e1b898d457050$var$_tmpl$2, (0, $cV3wj$ssrHydrationKey)(), (0, $cV3wj$escape)(i18n_.search_recs_title_()), (0, $cV3wj$escape)((0, $a458486f22b22f63$export$a2cc176055f8f08)()), (0, $cV3wj$escape)(cards));
-    // the cards element must have a parent for Layout to work, therefore we're inserting it into a div above
-    (0, $cV3wj$Layout)({
-        container_element: cards,
-        layout: "grid",
-        rows: rows_object,
-        ...layout_options_
-    }).catch((e)=>(0, $cV3wj$report)([
-            e,
-            "Layout failed"
-        ], "error"));
+    const num_placeholders_ = (0, $cV3wj$createMemo)(()=>(0, $7747fe1a8c5652e3$export$6c9030e511152266) + get_showing_recommendation_rows() * Math.max(...layout_options_().cols_at_size.map(([per_column])=>per_column)));
     return (0, $cV3wj$createComponent)((0, $cV3wj$Show), {
         get when () {
             return is_showing_something();
         },
-        children: search_recs_elements
+        get children () {
+            return (0, $cV3wj$ssr)($172e1b898d457050$var$_tmpl$, (0, $cV3wj$ssrHydrationKey)(), (0, $cV3wj$escape)(i18n_.search_recs_title_()), (0, $cV3wj$escape)((0, $a458486f22b22f63$export$a2cc176055f8f08)()), (0, $cV3wj$escape)((0, $cV3wj$createComponent)((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), (0, $cV3wj$mergeProps)({
+                rows: rows_object,
+                layout: "grid",
+                element_attributes: {
+                    class: "cards"
+                }
+            }, layout_options_, {
+                get children () {
+                    return (0, $cV3wj$createComponent)((0, $cV3wj$Suspense), {
+                        get fallback () {
+                            return (0, $6e41f1fde994db72$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, $29ec7cddbe1d3484$export$7f8bd308237ab5a5)((0, $cV3wj$createMemo)(()=>recommendations_resource() || []));
+                                return (0, $29ec7cddbe1d3484$export$43f0fb951fcb0c54)({
+                                    displays_by_key_: displays_by_key_,
+                                    merchant_: (0, $cV3wj$createMemo)(()=>search_query_base_().tenant),
+                                    market_: (0, $cV3wj$createMemo)(()=>search_query_base_().market),
+                                    product_card_template_: product_card_template_
+                                });
+                            })();
+                        }
+                    });
+                }
+            }))));
+        }
     });
 }
 function $172e1b898d457050$var$make_state_saved_rows([get_showing_recommendation_rows, set_showing_recommendation_rows], i18n_) {
-    const ipns = (0, $cV3wj$async_iterable_ipns)();
+    const currently_visible = (0, $cV3wj$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, $cV3wj$untrack)(get_showing_recommendation_rows) ?? $172e1b898d457050$export$1c8c715550dc689d,
         rows_per_click: 3,
-        button: (0, $cV3wj$ssr)($172e1b898d457050$var$_tmpl$3, (0, $cV3wj$ssrHydrationKey)(), (0, $cV3wj$escape)(i18n_.view_more_()))
+        button: (0, $cV3wj$ssr)($172e1b898d457050$var$_tmpl$2, (0, $cV3wj$ssrHydrationKey)(), (0, $cV3wj$escape)(i18n_.view_more_()))
     };
-    (0, $cV3wj$catchify)(async ()=>{
-        for await (const number of ipns)set_showing_recommendation_rows(number);
-    })();
-    (0, $cV3wj$createComputed)((0, $cV3wj$on)(get_showing_recommendation_rows, (new_rows = $172e1b898d457050$export$1c8c715550dc689d)=>{
-        if (ipns.latest_call_value !== new_rows && ipns.state !== new_rows) ipns(new_rows);
-    }, {
+    (0, $cV3wj$createComputed)((0, $cV3wj$on)(get_currently_visible, (new_visible)=>set_showing_recommendation_rows(new_visible), {
+        defer: true
+    }));
+    (0, $cV3wj$createComputed)((0, $cV3wj$on)(get_showing_recommendation_rows, (new_rows = $172e1b898d457050$export$1c8c715550dc689d)=>set_currently_visible(new_rows), {
         defer: true
     }));
     return rows;
@@ -7158,7 +7257,7 @@ const $7097477c78a89208$var$_tmpl$ = [
     "<!--/--><!--#-->",
     "<!--/--></div>"
 ];
-function $7097477c78a89208$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 $7097477c78a89208$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, $cV3wj$createSignal)(false);
     const [get_all_products_loaded, set_all_products_loaded] = all_products_loaded_;
@@ -7394,7 +7493,9 @@ function $7097477c78a89208$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, $cV3wj$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_
@@ -7683,16 +7784,19 @@ function $806c97b931758897$var$get_shared_properties(depict_search) {
     return shared_properties;
 }
 function $806c97b931758897$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 = $806c97b931758897$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, $16b52438165aafe2$export$23fca46f3143581f)(()=>{
         const { state_: state_  } = shared_properties;
+        const grid_spacing_override = (0, $cV3wj$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, $cV3wj$onCleanup)(shared_properties.reset_history_state_);
         return (0, $7097477c78a89208$export$a54ec244c8863715)({
             input_modal_open_: ()=>!!depict_search.modal_open,
@@ -7738,19 +7842,23 @@ function $806c97b931758897$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, $b5cccc8ee7d24677$export$6daf8749b65a1b77)(cols_at_size),
-                ...grid_spacing_override
-            },
-            recommendations_layout_options_: extra_depict_options?.recommendations_cols_at_size ? {
-                cols_at_size: (0, $b5cccc8ee7d24677$export$6daf8749b65a1b77)(extra_depict_options.recommendations_cols_at_size),
-                ...grid_spacing_override
-            } : undefined,
+            layout_options_: (0, $cV3wj$createMemo)(()=>({
+                    cols_at_size: (0, $b5cccc8ee7d24677$export$6daf8749b65a1b77)(props.cols_at_size),
+                    ...grid_spacing_override()
+                })),
+            recommendations_layout_options_: (0, $cV3wj$createMemo)(()=>{
+                const { extra_depict_options: extra_depict_options  } = props;
+                return extra_depict_options?.recommendations_cols_at_size ? {
+                    cols_at_size: (0, $b5cccc8ee7d24677$export$6daf8749b65a1b77)(extra_depict_options.recommendations_cols_at_size),
+                    ...grid_spacing_override()
+                } : undefined;
+            }),
             product_card_template_: product_card_template
         });
     }, "Entire SearchPage failed");
 }
-function $806c97b931758897$export$316f6f283ae64765({ depict_search: depict_search , modal_dispose_handler: modal_dispose_handler , click_handler: click_handler , aligner_ref: aligner_ref  }) {
+function $806c97b931758897$export$316f6f283ae64765(props) {
+    const { depict_search: depict_search , modal_dispose_handler: modal_dispose_handler , click_handler: click_handler  } = props;
     const shared_properties = $806c97b931758897$var$get_shared_properties(depict_search);
     return (0, $16b52438165aafe2$export$23fca46f3143581f)(()=>{
         let input_element;
@@ -7779,7 +7887,7 @@ function $806c97b931758897$export$316f6f283ae64765({ depict_search: depict_searc
                         input_element.selectionStart,
                         input_element.selectionEnd
                     ];
-                    const { cleanup: cleanup  } = $806c97b931758897$var$align_field_modal(style_props_, search_field, aligner_ref);
+                    const { cleanup: cleanup  } = $806c97b931758897$var$align_field_modal(style_props_, search_field, ()=>props.aligner_ref);
                     const complete_modal_dispose_handler = ()=>{
                         modal_dispose_handler?.();
                         cleanup();
@@ -7803,23 +7911,21 @@ function $806c97b931758897$export$316f6f283ae64765({ depict_search: depict_searc
         ];
     }, "SearchField failed");
 }
-function $806c97b931758897$var$align_field_modal(style_props_, input, aligner_ref) {
+function $806c97b931758897$var$align_field_modal(style_props_, input, aligner_ref_accessor) {
     return (0, $cV3wj$createRoot)((dispose)=>{
-        if (aligner_ref) {
+        (0, $cV3wj$createComputed)(()=>{
+            const aligner_ref = aligner_ref_accessor?.();
+            if (!aligner_ref) {
+                (0, $b6d5529b253681aa$export$b3ad617e9036868)(style_props_, input);
+                return;
+            }
             const { cleanup: cleanup  } = (0, $4ca91518c9a35379$export$828dcdd425fd3231)(aligner_ref);
+            (0, $cV3wj$onCleanup)(cleanup);
             (0, $b6d5529b253681aa$export$b3ad617e9036868)(style_props_, aligner_ref, undefined, false, "top");
-            return {
-                cleanup: ()=>{
-                    cleanup();
-                    dispose();
-                }
-            };
-        } else {
-            (0, $b6d5529b253681aa$export$b3ad617e9036868)(style_props_, input);
-            return {
-                cleanup: dispose
-            };
-        }
+        });
+        return {
+            cleanup: dispose
+        };
     });
 }
 
@@ -8115,4 +8221,4 @@ const $4690a06c8489dcd0$export$7bf543b9d9be2c22 = (0, $e4615ecd1849548f$export$b
 (0, $cV3wj$add_to_version_info)("ui", (0, $ec291e0010116877$export$83d89fbfd8236492));
 
 
-export {$194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $c9312089e8983364$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version};
+export {$c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $c9312089e8983364$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version};