@depict-ai/ui 0.0.65 → 0.0.67

package/dist/main.js

@@ -18,6 +18,7 @@ $parcel$export(module.exports, "DepictSearch", () => $79fbf145b15af988$export$ac
 $parcel$export(module.exports, "get_search_query_updating_blocked_signal", () => $79fbf145b15af988$export$bde3eb976dfded9);
 $parcel$export(module.exports, "SearchPage", () => $79fbf145b15af988$export$f2dc7e4e4aa11abb);
 $parcel$export(module.exports, "SearchField", () => $79fbf145b15af988$export$316f6f283ae64765);
+$parcel$export(module.exports, "ProductCardError", () => $99a365f2a6c66061$export$aa14a9f43128f61f);
 $parcel$export(module.exports, "open_modal_with_alignment", () => $9c5a1d57540c06e5$export$d86a33413558014e);
 $parcel$export(module.exports, "DefaultInstantCardPlaceholder", () => $17c49340edfdbb31$export$ee1733d9a8495996);
 $parcel$export(module.exports, "align_field", () => $67b60b572b7b7059$export$b3ad617e9036868);
@@ -34,7 +35,7 @@ $parcel$export(module.exports, "solid_format_price", () => $5fc9fc23df1591db$exp
 $parcel$export(module.exports, "connect_search_field_height_to_aligner_height", () => $246e3e89a097f014$export$828dcdd425fd3231);
 $parcel$export(module.exports, "PageReplacer", () => $37e96a5ebc768cc7$export$3ccaa27d81dd8556);
 $parcel$export(module.exports, "version", () => $ae93561d5649a847$export$83d89fbfd8236492);
-/*! Depict.ai search and product listing SDK */ const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.65";
+/*! Depict.ai search and product listing SDK */ const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.67";
 
 
 
@@ -819,6 +820,55 @@ function $8e863dc22b06b688$export$a2cc176055f8f08() {
 }
 
 
+
+
+
+
+
+
+// Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
+class $99a365f2a6c66061$export$e1d52e4f0c7557a1 extends Error {
+}
+class $99a365f2a6c66061$export$aa14a9f43128f61f extends $99a365f2a6c66061$export$e1d52e4f0c7557a1 {
+    constructor(templateError){
+        super("Uncaught error in product card template", {
+            cause: templateError
+        });
+    }
+}
+
+
+const $0f2f58dd60b11888$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div></div>`, 2);
+function $0f2f58dd60b11888$export$b69d0d92862de18b(props) {
+    return (0, $46MJV$solidjs.ErrorBoundary)({
+        fallback (err, retry) {
+            const { message_: message_ , severity_: severity_  } = props;
+            let message = message_;
+            if (err instanceof (0, $99a365f2a6c66061$export$aa14a9f43128f61f)) {
+                console.error(err.cause);
+                message = `${message}: ${err.message}`;
+            } else (0, $46MJV$depictaiutilishared.report)([
+                err,
+                message_
+            ], severity_);
+            props.on_error_?.(retry);
+            return (()=>{
+                const _el$ = $0f2f58dd60b11888$var$_tmpl$.cloneNode(true);
+                (0, $46MJV$solidjsweb.insert)(_el$, message);
+                (0, $46MJV$solidjsweb.effect)((_$p)=>(0, $46MJV$solidjsweb.classList)(_el$, Object.fromEntries(props.class_list_?.map((c)=>[
+                            c,
+                            true
+                        ]) || []), _$p));
+                return _el$;
+            })();
+        },
+        get children () {
+            return props.children;
+        }
+    });
+}
+
+
 const $8d94abc871e13baf$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="PLP-results"></div>`, 2), $8d94abc871e13baf$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="cards"></div>`, 2);
 let $8d94abc871e13baf$var$cached_placeholder_element;
 function $8d94abc871e13baf$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_: scroll_restoration_data_ , no_results_options_: no_results_options_ , desktop_filter_elements_: desktop_filter_elements_ , sort_or_filter_open_: sort_or_filter_open_ , rr_options_: rr_options_ , layout_options_: layout_options_ , tenant_object_: tenant_object_ , type_for_tracking_: type_for_tracking_ , id_currently_querying_for_: id_currently_querying_for_  }) {
@@ -855,8 +905,7 @@ function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_
             recs: current_results.displays,
             ...rr_options_,
             ...typeof rr_options_.template === "function" ? {
-                template: (...args)=>(0, $46MJV$solidjs.runWithOwner)(owner_for_cards, ()=>// give template the possibility to know when it gets removed from the DOM by using solid-js onCleanup
-                        rr_options_.template(...args))
+                template: $8d94abc871e13baf$var$wrap_template_to_throw_into_error_boundary(rr_options_.template, owner_for_cards)
             } : {},
             post_processors: [
                 ...rr_options_.post_processors || [],
@@ -901,86 +950,101 @@ function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_
                 return (0, $46MJV$solidjsweb.createComponent)((0, $2b4e3538e183d885$export$ef6006467f04ee41), no_results_options_);
             },
             get children () {
-                return (()=>{
-                    const random_id = (0, $46MJV$depictaiutilishared.make_random_classname)();
-                    const selector_beginning = `.depict.plp #${random_id}>`;
-                    const cards = (()=>{
-                        const _el$2 = $8d94abc871e13baf$var$_tmpl$2.cloneNode(true);
-                        (0, $46MJV$solidjsweb.setAttribute)(_el$2, "id", random_id);
-                        return _el$2;
-                    })();
-                    const style = document.createElement("style");
-                    (0, $46MJV$solidjs.createRenderEffect)(()=>{
-                        // 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 [num_cols_default, , , , override_cols] = row;
-                            const cloned_row = [
-                                ...row
-                            ];
-                            // @ts-ignore
-                            cloned_row[0] = num_cols_default - 1;
-                            if (override_cols) // @ts-ignore
-                            cloned_row[4] = {
-                                overrides: Object.fromEntries(Object.entries(override_cols.overrides).map(([row, column])=>[
-                                        row,
-                                        column - 1
-                                    ]))
-                            };
-                            return cloned_row;
-                        }) : when_filters_closed_cols;
-                        const css = (0, $46MJV$depictaiutilishared.n_col_styling_with_dist)(selector_beginning, layout_options_.grid_spacing, cols_at_size, "grid", layout_options_.override_vertical_spacing);
-                        style.replaceChildren(css);
-                    });
-                    (0, $46MJV$solidjs.createRenderEffect)(// render placeholders / product cards
-                    (0, $46MJV$depictaiutilishared.catchify)(async ()=>{
-                        const owner_ = (0, $46MJV$solidjs.getOwner)();
-                        if (is_loading()) await $8d94abc871e13baf$var$insert_placeholders({
-                            scroll_restoration_data_: scroll_restoration_data_,
-                            id_currently_querying_for_: id_currently_querying_for_,
-                            rr_options_: rr_options_,
-                            tenant_object_: tenant_object_,
-                            min_products_to_fetch_: min_products_to_fetch_,
-                            owner_: owner_,
-                            cards_element_: cards
-                        });
-                        else if (!has_no_results_or_failed()) {
-                            plp_results_(); // re-run render_and_insert_results when results change
-                            render_and_insert_results(cards, owner_);
-                        }
-                    }));
-                    // copied from RecommendationGrid
-                    // convoluted lazy loading that
-                    // when the elements are in the DOM starts IntersectionObserver on whole grid
-                    // when grid intersects starts Lazyfier
-                    // this is because Lazyfier is fucking stupid
-                    (0, $46MJV$depictaiutilishared.observer).wait_for_element(cards).then((0, $46MJV$depictaiutilishared.catchify)((element)=>{
-                        let start_lazy_loading;
-                        const lazy_loading_promise = new Promise((r)=>start_lazy_loading = r);
-                        const lf = new (0, $46MJV$depictaiutilishared.Lazyfier)({
-                            only_load_intersecting: true,
-                            wait_for_dominsertion: lazy_loading_promise,
-                            ignore_data_urls: true,
-                            lazyfinder: {
-                                unload () {}
-                            }
+                return (0, $0f2f58dd60b11888$export$b69d0d92862de18b)({
+                    severity_: "error",
+                    // More granular error handling
+                    // This _also_ fails when a product card rendering fails due to the runWithOwner with a root that was created inside the "root"/"context" of this ErrorBoundary
+                    on_error_: (retry)=>{
+                        // re-try / reset ErrorBoundary next time we're getting product cards
+                        const track = (0, $46MJV$solidjs.createReaction)(retry);
+                        track(plp_results_);
+                    },
+                    class_list_: [
+                        "cards"
+                    ],
+                    // So that the styling looks pretty when we've failed
+                    message_: "Result rendering failed",
+                    get children () {
+                        const random_id = (0, $46MJV$depictaiutilishared.make_random_classname)();
+                        const selector_beginning = `.depict.plp #${random_id}>`;
+                        const cards = (()=>{
+                            const _el$2 = $8d94abc871e13baf$var$_tmpl$2.cloneNode(true);
+                            (0, $46MJV$solidjsweb.setAttribute)(_el$2, "id", random_id);
+                            return _el$2;
+                        })();
+                        const style = document.createElement("style");
+                        (0, $46MJV$solidjs.createRenderEffect)(()=>{
+                            // 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 [num_cols_default, , , , override_cols] = row;
+                                const cloned_row = [
+                                    ...row
+                                ];
+                                // @ts-ignore
+                                cloned_row[0] = num_cols_default - 1;
+                                if (override_cols) // @ts-ignore
+                                cloned_row[4] = {
+                                    overrides: Object.fromEntries(Object.entries(override_cols.overrides).map(([row, column])=>[
+                                            row,
+                                            column - 1
+                                        ]))
+                                };
+                                return cloned_row;
+                            }) : when_filters_closed_cols;
+                            const css = (0, $46MJV$depictaiutilishared.n_col_styling_with_dist)(selector_beginning, layout_options_.grid_spacing, cols_at_size, "grid", layout_options_.override_vertical_spacing);
+                            style.replaceChildren(css);
                         });
-                        lf.start_observing_for_new_children_(element);
-                        const i_o = new IntersectionObserver((0, $46MJV$depictaiutilishared.catchify)((records)=>{
-                            for (const record of records)if (record.intersectionRatio > 0) {
-                                start_lazy_loading();
-                                i_o.disconnect();
-                                return;
+                        (0, $46MJV$solidjs.createRenderEffect)(// render placeholders / product cards
+                        (0, $46MJV$depictaiutilishared.catchify)(async ()=>{
+                            const owner_ = (0, $46MJV$solidjs.getOwner)();
+                            if (is_loading()) await $8d94abc871e13baf$var$insert_placeholders({
+                                scroll_restoration_data_: scroll_restoration_data_,
+                                id_currently_querying_for_: id_currently_querying_for_,
+                                rr_options_: rr_options_,
+                                tenant_object_: tenant_object_,
+                                min_products_to_fetch_: min_products_to_fetch_,
+                                owner_: owner_,
+                                cards_element_: cards
+                            });
+                            else if (!has_no_results_or_failed()) {
+                                plp_results_(); // re-run render_and_insert_results when results change
+                                render_and_insert_results(cards, owner_);
                             }
                         }));
-                        i_o.observe(cards);
-                    }));
-                    return [
-                        (0, $8e863dc22b06b688$export$a2cc176055f8f08)(),
-                        cards,
-                        style
-                    ];
-                })();
+                        // copied from RecommendationGrid
+                        // convoluted lazy loading that
+                        // when the elements are in the DOM starts IntersectionObserver on whole grid
+                        // when grid intersects starts Lazyfier
+                        // this is because Lazyfier is fucking stupid
+                        (0, $46MJV$depictaiutilishared.observer).wait_for_element(cards).then((0, $46MJV$depictaiutilishared.catchify)((element)=>{
+                            let start_lazy_loading;
+                            const lazy_loading_promise = new Promise((r)=>start_lazy_loading = r);
+                            const lf = new (0, $46MJV$depictaiutilishared.Lazyfier)({
+                                only_load_intersecting: true,
+                                wait_for_dominsertion: lazy_loading_promise,
+                                ignore_data_urls: true,
+                                lazyfinder: {
+                                    unload () {}
+                                }
+                            });
+                            lf.start_observing_for_new_children_(element);
+                            const i_o = new IntersectionObserver((0, $46MJV$depictaiutilishared.catchify)((records)=>{
+                                for (const record of records)if (record.intersectionRatio > 0) {
+                                    start_lazy_loading();
+                                    i_o.disconnect();
+                                    return;
+                                }
+                            }));
+                            i_o.observe(cards);
+                        }));
+                        return [
+                            (0, $8e863dc22b06b688$export$a2cc176055f8f08)(),
+                            cards,
+                            style
+                        ];
+                    }
+                });
             }
         }), null);
         (0, $46MJV$solidjsweb.insert)(_el$, desktop_filter_elements_, null);
@@ -997,19 +1061,18 @@ async function $8d94abc871e13baf$var$insert_placeholders({ scroll_restoration_da
     let existing_num = 0;
     let removed_old_children = false;
     if (!$8d94abc871e13baf$var$cached_placeholder_element) {
+        const [dispose_card, root_in_root] = (0, $46MJV$solidjs.createRoot)((dispose)=>[
+                dispose,
+                (0, $46MJV$solidjs.getOwner)()
+            ]);
         const { elements: elements  } = await (0, $46MJV$depictaiutilishared.default_rr)(tenant_object_, {
             ...rr_options_,
             type: "placeholder",
             pre_processors: [],
             post_processors: [],
             ...typeof rr_options_.template === "function" ? {
-                template: (...args)=>(0, $46MJV$solidjs.createRoot)(async (dispose)=>{
-                        try {
-                            return await rr_options_.template(...args);
-                        } finally{
-                            (0, $46MJV$depictaiutilishared.queueMacroTask)((0, $46MJV$depictaiutilishared.catchify)(dispose)); // we just want it cloned and dead
-                        }
-                    })
+                template: $8d94abc871e13baf$var$wrap_template_to_throw_into_error_boundary(rr_options_.template, root_in_root, ()=>(0, $46MJV$depictaiutilishared.queueMacroTask)((0, $46MJV$depictaiutilishared.catchify)(dispose_card)) // we just want it cloned and dead
+                )
             } : {},
             recs: [
                 {
@@ -1025,13 +1088,28 @@ async function $8d94abc871e13baf$var$insert_placeholders({ scroll_restoration_da
             const to_add = num_placeholders() - existing_num;
             if (to_add <= 0) return;
             // We don't need to remove placeholders, only need to add. The reason for that is that chrome restores the scroll position once all tasks queued as reaction of the "popstate" events have been completed in the task queue. That means that we need to get the placeholders in fast, or we might lose scroll position if the previous site was shorter.
-            // The query id and the amount might update in separate tasks because one comes from href_change_ipns and the other one from another "popstate" listener. Therefore, we need to be able to dynamically add more placeholders. I'm not entirely sure about this anymore though, since we have the scroll position on a per-id basis it might work anyways but THIS WORKS and I've been working on this bug for 3 hours so let's just keep it this way.
+            // The query id and the amount might update in separate tasks because one comes from href_change_ipns and the other one from another "popstate" listener. Therefore, we need to be able to dynamically add more placeholders. I'm not entirely sure about this anymore though, since we have the scroll position on a per-id basis it might work anyway but THIS WORKS, and I've been working on this bug for 3 hours so let's just keep it this way.
             cards_element_[removed_old_children ? "append" : (removed_old_children = true, "replaceChildren")](...Array.from({
                 length: to_add
             }).map(()=>$8d94abc871e13baf$var$cached_placeholder_element.cloneNode(true)));
             existing_num += to_add;
         }));
 }
+function $8d94abc871e13baf$var$wrap_template_to_throw_into_error_boundary(template, root_in_root, on_finally) {
+    return async (...args)=>{
+        try {
+            return await (0, $46MJV$solidjs.runWithOwner)(root_in_root, ()=>template(...args)) || [];
+        } catch (e) {
+            (0, $46MJV$solidjs.runWithOwner)(root_in_root, ()=>{
+                // Throw in case of promise rejection, ultimately into ErrorBoundary
+                throw e;
+            });
+            return [];
+        } finally{
+            on_finally?.();
+        }
+    };
+}
 
 
 
@@ -2667,7 +2745,7 @@ function $cd6cdf2099e918a4$export$82ed4b28ecb67608({ filter_: filter_ , selected
                         // lighten or darken (+/- 10) depending on it's over or under 50 lightness
                         // lighten under 25 lightness by 20
                         const target_lightness = is_hovered ? is_light ? lightness() - 10 : lightness() < 25 ? lightness() + 20 : lightness() + 10 : lightness();
-                        classList.toggle("check-dark", lightness() > 75); // dark checkmark for bright colors
+                        classList.toggle("check-dark", $cd6cdf2099e918a4$var$black_contrast_better(hue(), saturation(), lightness())); // Decide between black/white checkmark based on which one has better contrast according to WCAG contrast guidelines
                         style.backgroundColor = `hsl(${hue()}, ${saturation()}%, ${target_lightness}%)`;
                     }
                 });
@@ -2764,6 +2842,15 @@ function $cd6cdf2099e918a4$export$82ed4b28ecb67608({ filter_: filter_ , selected
         return _el$;
     })();
 }
+function $cd6cdf2099e918a4$var$black_contrast_better(hue, saturation, lightness) {
+    const as_rgb = (0, $46MJV$depictaiutilishared.hsl_to_rgb)(hue, saturation, lightness);
+    const luminance_color = (0, $46MJV$depictaiutilishared.relative_luminance_from_rgb)(...as_rgb);
+    const luminance_white = 1;
+    const luminance_black = 0;
+    const contrast_ratio_if_white = (luminance_white + 0.05) / (luminance_color + 0.05);
+    const contrast_ratio_if_black = (luminance_color + 0.05) / (luminance_black + 0.05);
+    return contrast_ratio_if_black > contrast_ratio_if_white;
+}
 
 
 var $6865c7388a79e957$export$2e2bcd8739ae039 = {
@@ -3045,31 +3132,6 @@ function $5804fd6cbfb7160f$export$ab34afce88557c0e(props) {
 
 
 
-
-
-const $0f2f58dd60b11888$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div></div>`, 2);
-function $0f2f58dd60b11888$export$b69d0d92862de18b(props) {
-    return (0, $46MJV$solidjs.ErrorBoundary)({
-        fallback (err) {
-            const { message_: message_ , severity_: severity_  } = props;
-            (0, $46MJV$depictaiutilishared.report)([
-                err,
-                message_
-            ], severity_);
-            return (()=>{
-                const _el$ = $0f2f58dd60b11888$var$_tmpl$.cloneNode(true);
-                (0, $46MJV$solidjsweb.insert)(_el$, message_);
-                return _el$;
-            })();
-        },
-        get children () {
-            return props.children;
-        }
-    });
-}
-
-
-
 const $1587765bd31f3722$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="filter-collapsible"></div>`, 2), $1587765bd31f3722$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<button class="clear-group"><span></span></button>`, 4), $1587765bd31f3722$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="view-more-clear"></div>`, 2), $1587765bd31f3722$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="filter-collapsible-body"><div class="filter-part"></div></div>`, 4), $1587765bd31f3722$var$_tmpl$5 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<details class="filter-collapsible"></details>`, 2), $1587765bd31f3722$var$_tmpl$6 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<summary class="filter-group-summary"><div class="summary"><span></span><div class="selected-w-sign"></div></div></summary>`, 8), $1587765bd31f3722$var$_tmpl$7 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="ungrouped"></div>`, 2), $1587765bd31f3722$var$_tmpl$8 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<button class="clear-all-filters major"></button>`, 2);
 function $1587765bd31f3722$export$3f1a388cc0d8fed7(props) {
     // Split like this to make placeholder wrapping more visible & this component is exported and used in MobileModal
@@ -5328,14 +5390,18 @@ function $67892c03cd3dfa66$export$d757d54550ebfb3d({ category_suggestion_: categ
 
 
 const $2989e355f64e18e1$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<button class="back" type="button"></button>`, 2), $2989e355f64e18e1$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="search-field"><div class="field"><input class="query" tabindex="0"><button type="button" class="clear"></button></div><button class="submit major" type="button"></button></div>`, 9);
-function $2989e355f64e18e1$export$b94867ecbd698f21({ search_field_value_: search_field_value_ , input_field_ref_: input_field_ref_ , field_element_ref_: field_element_ref_ , submit_query_: submit_query_ , override_on_enter_: override_on_enter_ , clear_filters_: clear_filters_ , disabled_: disabled_ = false , on_back_: on_back_ , i18n_: i18n_  }) {
-    let input_field;
+function $2989e355f64e18e1$export$b94867ecbd698f21({ search_field_value_: search_field_value_ , input_field_ref_: input_field_ref_ , field_element_ref_: field_element_ref_ , submit_query_: submit_query_ , override_on_enter_: override_on_enter_ , clear_filters_: clear_filters_ , disabled_: disabled_ = false , on_back_: on_back_ , i18n_: i18n_ , after_focusing_: after_focusing_  }) {
+    let input_element;
+    // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
+    let field_div;
     (0, $46MJV$solidjs.createEffect)((0, $46MJV$depictaiutilishared.catchify)(async ()=>{
         if (disabled_) return;
         // we aren't in DOM yet unfortunately, wouldn't even be with onMount
-        await (0, $46MJV$depictaiutilishared.observer).wait_for_element(input_field);
-        input_field.focus();
+        await (0, $46MJV$depictaiutilishared.observer).wait_for_element(input_element);
+        input_element.focus();
+        after_focusing_?.(input_element);
     })); // focus field on render
+    const owner_of_field_element = (0, $46MJV$solidjs.getOwner)();
     return (()=>{
         const _el$ = $2989e355f64e18e1$var$_tmpl$2.cloneNode(true), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$3.nextSibling;
         (0, $46MJV$solidjsweb.insert)(_el$, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Show), {
@@ -5348,38 +5414,47 @@ function $2989e355f64e18e1$export$b94867ecbd698f21({ search_field_value_: search
                 return _el$2;
             }
         }), _el$3);
-        (0, $46MJV$solidjsweb.use)((el)=>field_element_ref_?.(el), _el$3);
-        (0, $46MJV$solidjsweb.addEventListener)(_el$4, "select", (0, $46MJV$depictaiutilishared.catchify)((e)=>{
-            if (!disabled_) // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
-            {
-                if (input_field.selectionStart === 0 && input_field.selectionEnd === input_field.value.length) // everything was selected, clear filters on next submit on next input
-                input_field.addEventListener("input", (0, $46MJV$depictaiutilishared.catchify)(clear_filters_), {
+        (0, $46MJV$solidjsweb.use)((el)=>{
+            field_div = el;
+            field_element_ref_?.(el);
+        }, _el$3);
+        _el$4.$$pointerdown = ({ pointerType: pointerType  })=>{
+            // When selecting text with a mouse we want a SearchField to be focussed even when releasing the mouse outside the .field element (we assume the event listener which opens the modal is attached to that).
+            if (pointerType === "mouse") {
+                const handler = (0, $46MJV$depictaiutilishared.catchify)(({ pointerType: pointerType , target: target  })=>{
+                    if (pointerType !== "mouse" || !(target instanceof Node) || target === field_div || field_div.contains(target)) return;
+                    input_element.click();
+                });
+                window.addEventListener("pointerup", handler, {
                     once: true
                 });
+                if (owner_of_field_element) (0, $46MJV$solidjs.runWithOwner)(owner_of_field_element, ()=>(0, $46MJV$solidjs.onCleanup)(()=>window.removeEventListener("pointerup", handler)));
             }
+        };
+        (0, $46MJV$solidjsweb.addEventListener)(_el$4, "select", (0, $46MJV$depictaiutilishared.catchify)(()=>{
+            if (disabled_) // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
+            return;
+            if (input_element.selectionStart === 0 && input_element.selectionEnd === input_element.value.length) // everything was selected, clear filters on next submit on next input
+            input_element.addEventListener("input", (0, $46MJV$depictaiutilishared.catchify)(clear_filters_), {
+                once: true
+            });
         }));
         (0, $46MJV$solidjsweb.addEventListener)(_el$4, "input", (0, $46MJV$depictaiutilishared.catchify)(()=>{
-            const { value: value  } = input_field;
+            const { value: value  } = input_element;
             if (!disabled_ && !value.length) clear_filters_(); // if the user clears the whole field, reset filters on next submit
             search_field_value_[1](value);
         }), true);
         (0, $46MJV$solidjsweb.addEventListener)(_el$4, "keydown", (0, $46MJV$depictaiutilishared.catchify)((e)=>{
             if (disabled_) {
                 if (e.key !== "Tab" && e.key !== "Shift") // alow tab-selecting the input field and then open the modal when the user start writing but also to move past the field with tab
-                input_field.click();
+                input_element.click();
             } else if (e.key === "Enter") {
                 const dont_submit = override_on_enter_?.(e);
                 if (!dont_submit) submit_query_();
             }
         }), true);
-        (0, $46MJV$solidjsweb.addEventListener)(_el$4, "focus", (0, $46MJV$depictaiutilishared.catchify)(()=>{
-            if (disabled_) {
-                const last_pos = input_field.value.length;
-                input_field.setSelectionRange(last_pos, last_pos);
-            }
-        }));
         const _ref$ = (0, $46MJV$depictaiutilishared.catchify)((el)=>{
-            input_field = el;
+            input_element = el;
             input_field_ref_?.(el);
         });
         typeof _ref$ === "function" && (0, $46MJV$solidjsweb.use)(_ref$, _el$4);
@@ -5387,8 +5462,7 @@ function $2989e355f64e18e1$export$b94867ecbd698f21({ search_field_value_: search
         (0, $46MJV$solidjsweb.addEventListener)(_el$5, "click", (0, $46MJV$depictaiutilishared.catchify)(()=>{
             search_field_value_[1]("");
             clear_filters_();
-            if (disabled_) return;
-            input_field.focus();
+            if (!disabled_) input_element.focus();
         }), true);
         (0, $46MJV$solidjsweb.insert)(_el$5, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$depictaiutilishared.CrossIcon), {}));
         (0, $46MJV$solidjsweb.addEventListener)(_el$6, "click", (0, $46MJV$depictaiutilishared.catchify)(()=>submit_query_()), true);
@@ -5415,7 +5489,8 @@ function $2989e355f64e18e1$export$b94867ecbd698f21({ search_field_value_: search
 (0, $46MJV$solidjsweb.delegateEvents)([
     "click",
     "keydown",
-    "input"
+    "input",
+    "pointerdown"
 ]);
 
 
@@ -5767,7 +5842,7 @@ function $690220645373c65e$export$2542ffb77b620b02(params_to_default_value) {
 
 
 const $1bf0125991f2d39b$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<span class="orig price"></span>`, 2), $1bf0125991f2d39b$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<a class="instant-card"><div class="img-part"></div><div class="right-part"><div class="title-brand-tagline"><span class="brand"></span><span class="title"></span></div><div class="price-container"><span class="price"></span></div></div></a>`, 16), $1bf0125991f2d39b$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="tagline"></div>`, 2);
-const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container, { i18n: i18n  })=>{
+const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container, { i18n: i18n , market: market  })=>{
     const display = (0, $46MJV$solidjs.createMemo)(()=>{
         const display = display_or_variant_container();
         // Support for backend's new display format
@@ -5779,7 +5854,12 @@ const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container,
             };
         }
         if (display.page_url) return display;
-        // Support for Spendrups displays, should probably be in the Spendrups script
+        // Support for post-migration (but still old basic format) Stronger displays, with slug but without page_url
+        if (display.slug) {
+            display.page_url = `/${market}/` + display.slug;
+            return display;
+        }
+        // Support for Spendrups displays, used by our frontend script and Spendrups coming react-ui integration.
         if (!display?.variants?.length) return;
         return display.variants.filter((v)=>v.product_id == display.product_id)[0];
     });
@@ -6766,7 +6846,7 @@ function $4a976b492943589f$export$f021bdedd3ec901a(props) {
 
 
 const $121d25ca6af2898f$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="discover-more"><button class="major" type="button"></button></div>`, 4), $121d25ca6af2898f$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<b></b>`, 2), $121d25ca6af2898f$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="depict-search-modal"><div class="body"><div class="padded"></div></div></div>`, 6), $121d25ca6af2898f$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="depict plp search"><div class="depict-search-modal-backdrop"></div></div>`, 4);
-function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: search_field_value_ , search_query_: search_query_ , search_page_url_param_name_: search_page_url_param_name_ , previous_searches_: previous_searches_ , close_modal_: close_modal_ , style_props_: style_props_ = (0, $46MJV$solidjs.createSignal)({}) , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , submit_query_: submit_query_ , instant_results_options_: instant_results_options_ , register_closing_animation_: register_closing_animation_ , url_transformer_: url_transformer_ , closing_animation_: closing_animation_ , alternative_query_submitter_for_spas_: alternative_query_submitter_for_spas_ , clear_filters_: clear_filters_ , i18n_: i18n_ , disable_scrolling_: disable_scrolling_ = true , enable_category_suggestions_: enable_category_suggestions_ , class_list_: class_list_ , after_submit_: after_submit_ , bottom_distance_under_modal_: bottom_distance_under_modal_ , navigate_page_to_href_: navigate_page_to_href_ , on_submit_with_unchanged_value_: on_submit_with_unchanged_value_  }) {
+function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: search_field_value_ , search_query_: search_query_ , search_page_url_param_name_: search_page_url_param_name_ , previous_searches_: previous_searches_ , close_modal_: close_modal_ , style_props_: style_props_ = (0, $46MJV$solidjs.createSignal)({}) , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , submit_query_: submit_query_ , instant_results_options_: instant_results_options_ , register_closing_animation_: register_closing_animation_ , url_transformer_: url_transformer_ , closing_animation_: closing_animation_ , alternative_query_submitter_for_spas_: alternative_query_submitter_for_spas_ , clear_filters_: clear_filters_ , i18n_: i18n_ , disable_scrolling_: disable_scrolling_ = true , enable_category_suggestions_: enable_category_suggestions_ , class_list_: class_list_ , after_submit_: after_submit_ , bottom_distance_under_modal_: bottom_distance_under_modal_ , navigate_page_to_href_: navigate_page_to_href_ , on_submit_with_unchanged_value_: on_submit_with_unchanged_value_ , selected_text_range_: selected_text_range_  }) {
     let on_enter_in_search_field_function;
     const [input_field, set_input_field] = (0, $46MJV$solidjs.createSignal)();
     const [get_search_field_value_] = search_field_value_;
@@ -6828,7 +6908,14 @@ function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: search
         search_field_value_: search_field_value_,
         submit_query_: submit_query_,
         clear_filters_: clear_filters_,
-        i18n_: i18n_
+        i18n_: i18n_,
+        after_focusing_: (input_el)=>{
+            // Restore the selection range from the SearchField that was used to open the modal, if it was saved.
+            if (!selected_text_range_) return;
+            const [start, end] = selected_text_range_;
+            if (start === null || end === null) return;
+            input_el.setSelectionRange(start, end);
+        }
     });
     search_field.classList.add("in-modal");
     const modal_element = (()=>{
@@ -7098,28 +7185,38 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
             })));
     const available_filters_ = (0, $46MJV$solidjs.createMemo)(()=>search_results_()?.filters);
     const modal_body_style = (0, $46MJV$solidjs.createSignal)({});
-    let input_field;
+    let search_field;
     if (include_input_field_) {
         const SafeSearchField = (0, $46MJV$depictaiutilishared.catchify)((0, $2989e355f64e18e1$export$b94867ecbd698f21));
-        input_field = (0, $46MJV$solidjsweb.createComponent)(SafeSearchField, {
+        let input_element;
+        let div_with_field_class;
+        search_field = SafeSearchField({
             i18n_: i18n_,
-            disabled_: true,
             search_query_: search_query_,
             search_field_value_: search_field_value_,
             submit_query_: submit_query_,
-            clear_filters_: clear_filters_on_next_submit_
+            clear_filters_: clear_filters_on_next_submit_,
+            input_field_ref_: (el)=>input_element = el,
+            field_element_ref_: (el)=>div_with_field_class = el,
+            disabled_: true
         });
-        if (input_field) {
+        if (search_field) {
             opts?.modal_body_style_ref_?.(modal_body_style);
-            const align_position = (0, $46MJV$depictaiutilishared.catchify)((0, $67b60b572b7b7059$export$b3ad617e9036868))(modal_body_style, input_field, undefined, true);
-            input_field.addEventListener("click", (0, $46MJV$depictaiutilishared.catchify)((e)=>{
+            const align_position = (0, $46MJV$depictaiutilishared.catchify)((0, $67b60b572b7b7059$export$b3ad617e9036868))(modal_body_style, search_field, undefined, true);
+            div_with_field_class.addEventListener("click", (0, $46MJV$depictaiutilishared.catchify)((e)=>{
                 const target = e.target;
                 const sel = ".submit";
                 if (target?.matches?.(sel) || target?.closest?.(sel)) // the search button is just decor, don't do anything when clicked
                 return;
+                // When selecting text in the SearchField that's in the page we want the same selection to persist. It doesn't by itself, since the SearchModal has an entirely different SearchField. Therefore, we manually copy the selection over.
+                const selected_text_range_ = [
+                    input_element.selectionStart,
+                    input_element.selectionEnd
+                ];
                 align_position?.();
                 open_modal_({
-                    style_props_: modal_body_style
+                    style_props_: modal_body_style,
+                    selected_text_range_: selected_text_range_
                 }, ()=>include_input_field_?.on_close_?.());
                 include_input_field_?.on_open_?.();
             }));
@@ -7195,7 +7292,7 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
         document.createComment("Search page based on Depict SDK"),
         (()=>{
             const _el$2 = $93779a41dce11249$var$_tmpl$2.cloneNode(true), _el$3 = _el$2.firstChild;
-            (0, $46MJV$solidjsweb.insert)(_el$3, input_field, null);
+            (0, $46MJV$solidjsweb.insert)(_el$3, search_field, null);
             (0, $46MJV$solidjsweb.insert)(_el$3, make_category_suggestion_card_ ? (0, $46MJV$solidjsweb.createComponent)((0, $0f2f58dd60b11888$export$b69d0d92862de18b), {
                 severity_: "error",
                 message_: "Category suggestions failed",
@@ -7652,7 +7749,8 @@ function $79fbf145b15af988$export$f2dc7e4e4aa11abb({ depict_search: depict_searc
 function $79fbf145b15af988$export$316f6f283ae64765({ depict_search: depict_search , modal_dispose_handler: modal_dispose_handler , click_handler: click_handler , aligner_ref: aligner_ref  }) {
     const shared_properties = $79fbf145b15af988$var$get_shared_properties(depict_search);
     return (0, $f27b0b326e0a87e2$export$23fca46f3143581f)(()=>{
-        const input = (0, $46MJV$solidjsweb.createComponent)((0, $2989e355f64e18e1$export$b94867ecbd698f21), {
+        let input_element;
+        const search_field = (0, $46MJV$solidjsweb.createComponent)((0, $2989e355f64e18e1$export$b94867ecbd698f21), {
             get search_query_ () {
                 return shared_properties.search_query_signal_;
             },
@@ -7669,35 +7767,40 @@ function $79fbf145b15af988$export$316f6f283ae64765({ depict_search: depict_searc
                 return shared_properties.i18n_;
             },
             disabled_: true,
+            input_field_ref_: (el)=>input_element = el,
             field_element_ref_: (field)=>{
                 const style_props_ = (0, $46MJV$solidjs.createSignal)({
                     position: "fixed"
                 });
                 const defaultHandler = (0, $46MJV$depictaiutilishared.catchify)(()=>{
-                    const { cleanup: cleanup  } = $79fbf145b15af988$var$align_field_modal(style_props_, input, aligner_ref);
+                    // When selecting text in the SearchField that's in the page we want the same selection to persist. It doesn't by itself, since the SearchModal has an entirely different SearchField. Therefore, we manually copy the selection over.
+                    const selected_text_range_ = [
+                        input_element.selectionStart,
+                        input_element.selectionEnd
+                    ];
+                    const { cleanup: cleanup  } = $79fbf145b15af988$var$align_field_modal(style_props_, search_field, aligner_ref);
                     const complete_modal_dispose_handler = ()=>{
                         modal_dispose_handler?.();
                         cleanup();
                     };
                     depict_search.modal_open = [
                         {
-                            style_props_: style_props_
+                            style_props_: style_props_,
+                            selected_text_range_: selected_text_range_
                         },
                         complete_modal_dispose_handler
                     ];
                 });
                 const handler = click_handler ?? defaultHandler;
                 field.addEventListener("click", handler);
-                (0, $46MJV$solidjs.onCleanup)(()=>{
-                    field.removeEventListener("click", handler);
-                });
+                (0, $46MJV$solidjs.onCleanup)(()=>field.removeEventListener("click", handler));
             }
         });
         // We assume this to be an array containing exactly on div in js-ui
         return [
             (()=>{
                 const _el$ = $79fbf145b15af988$var$_tmpl$.cloneNode(true);
-                (0, $46MJV$solidjsweb.insert)(_el$, input);
+                (0, $46MJV$solidjsweb.insert)(_el$, search_field);
                 return _el$;
             })()
         ];
@@ -7727,6 +7830,7 @@ function $79fbf145b15af988$var$align_field_modal(style_props_, input, aligner_re
 
 
 
+
 const $9c5a1d57540c06e5$export$d86a33413558014e = (openModalParams)=>{
     const { search: search  } = openModalParams;
     openModalParams.location ||= "centered";