@depict-ai/ui 1.3.5 → 1.3.7

package/dist/client/module.js

@@ -2,7 +2,7 @@ import {add_to_version_info as $gco9i$add_to_version_info, make_random_classname
 import {template as $gco9i$template, createComponent as $gco9i$createComponent, getNextElement as $gco9i$getNextElement, spread as $gco9i$spread, mergeProps as $gco9i$mergeProps, insert as $gco9i$insert, runHydrationEvents as $gco9i$runHydrationEvents, addEventListener as $gco9i$addEventListener, className as $gco9i$className, memo as $gco9i$memo, delegateEvents as $gco9i$delegateEvents, effect as $gco9i$effect, classList as $gco9i$classList, setAttribute as $gco9i$setAttribute, isServer as $gco9i$isServer, getNextMarker as $gco9i$getNextMarker, use as $gco9i$use, style as $gco9i$style, Dynamic as $gco9i$Dynamic} from "solid-js/web";
 import {createMemo as $gco9i$createMemo, createSignal as $gco9i$createSignal, createComputed as $gco9i$createComputed, createRenderEffect as $gco9i$createRenderEffect, untrack as $gco9i$untrack, onCleanup as $gco9i$onCleanup, ErrorBoundary as $gco9i$ErrorBoundary, createRoot as $gco9i$createRoot, getOwner as $gco9i$getOwner, runWithOwner as $gco9i$runWithOwner, createEffect as $gco9i$createEffect, batch as $gco9i$batch, createResource as $gco9i$createResource, Show as $gco9i$Show, createReaction as $gco9i$createReaction, on as $gco9i$on, Suspense as $gco9i$Suspense, For as $gco9i$For, Index as $gco9i$Index} from "solid-js";
 
-/*! Depict.ai search and product listing SDK */ const $ec291e0010116877$export$83d89fbfd8236492 = "1.3.5";
+/*! Depict.ai search and product listing SDK */ const $ec291e0010116877$export$83d89fbfd8236492 = "1.3.7";
 
 
 
@@ -343,18 +343,30 @@ function $ca6f574bd8772184$var$history_state_change(signals, entries, state) {
 }
 
 
-function $a8fa7302d6f93c0b$export$9862539c89138352(get_default_values_, router_) {
-    const state = (0, $ca6f574bd8772184$export$e183a13865960371)(get_default_values_(), router_);
+function $a8fa7302d6f93c0b$export$9862539c89138352({ get_default_values_: get_default_values_ , router_: router_ , prefix_: prefix_  }) {
+    const get_prefixed_default_values_ = ()=>{
+        const default_values = get_default_values_();
+        return Object.fromEntries(Object.entries(default_values).map(([key, value])=>[
+                prefix_ + key,
+                value
+            ]));
+    };
+    const prefixed_state = (0, $ca6f574bd8772184$export$e183a13865960371)(get_prefixed_default_values_(), router_);
     const reset_state = ()=>{
-        const new_defaults = get_default_values_();
-        for(const key in state){
+        const new_defaults = get_prefixed_default_values_();
+        for(const key in prefixed_state){
             const new_value = new_defaults[key];
-            state[key][1](new_value);
+            prefixed_state[key][1](new_value);
         }
     };
+    let unprefixed_state;
+    unprefixed_state = Object.fromEntries(Object.entries(prefixed_state).map(([key, value])=>[
+            key.slice(prefix_.length),
+            value
+        ]));
     return [
         reset_state,
-        state
+        unprefixed_state
     ];
 }
 
@@ -411,7 +423,8 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
             ]
         });
         this.#guard_url_creator_length(category_suggestions, page_urls);
-        while(page_urls.length)Object.assign(category_suggestions.pop(), page_urls.pop());
+        while(page_urls.length)// Copy over getters so we sneakily can make this reactive
+        Object.defineProperties(category_suggestions.pop(), Object.getOwnPropertyDescriptors(page_urls.pop()));
         return response;
     }
     async #run_url_creator_for_rest(merchant1, market1, input_data) {
@@ -457,7 +470,8 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
                 ]
             });
             this.#guard_url_creator_length(category_display_array, page_urls);
-            for(let i = 0; i < category_display_array.length; i++)Object.assign(category_display_array[i], page_urls[i]);
+            for(let i = 0; i < category_display_array.length; i++)// Copy over getters so we sneakily can make this reactive
+            Object.defineProperties(category_display_array[i], Object.getOwnPropertyDescriptors(page_urls[i]));
         }
         return input_data;
     }
@@ -4840,10 +4854,8 @@ const $4147651646da990a$var$operator_map = {
     "geq": "≥",
     "inrange": "\uD83D\uDD22"
 };
-const $4147651646da990a$var$sorting_query_param = "sorting";
 const $4147651646da990a$var$ascending_token = "\uD83D\uDCC8";
 const $4147651646da990a$var$descending_token = "\uD83D\uDCC9";
-const $4147651646da990a$var$filter_query_param_prefix = "filter_";
 const $4147651646da990a$var$range_delimiter = "-";
 const $4147651646da990a$var$string_item_delimiter = "‚"; // This is not a comma but a comma-like character that browsers will render in the URL bar.
 const $4147651646da990a$var$array_item_delimiter = "‣"; // FIXME: decide on a character. Could theoretically be a double string delimiter.
@@ -4909,17 +4921,17 @@ function $4147651646da990a$var$decode_filter_data(op, encoded_data) {
     }
     return null;
 }
-function $4147651646da990a$export$58aa3f171519b6d7(filters, search_params) {
+function $4147651646da990a$export$58aa3f171519b6d7(filters, search_params, filter_query_param_prefix) {
     for (const filter of filters){
         const { field: field , op: op , data: data  } = filter;
         const encoded_data = $4147651646da990a$var$encode_filter_data(op, data);
-        search_params.set($4147651646da990a$var$filter_query_param_prefix + field + $4147651646da990a$var$operator_map[op], encoded_data);
+        search_params.set(filter_query_param_prefix + field + $4147651646da990a$var$operator_map[op], encoded_data);
     }
 }
-function $4147651646da990a$export$f934fa24c3a86811(search_params) {
+function $4147651646da990a$export$f934fa24c3a86811(search_params, filter_query_param_prefix) {
     const found_filters = [];
     for (const key of search_params.keys()){
-        if (!key.startsWith($4147651646da990a$var$filter_query_param_prefix)) continue;
+        if (!key.startsWith(filter_query_param_prefix)) continue;
         const encoded_data = search_params.get(key);
         if (!encoded_data) continue;
         for (const op of Object.keys($4147651646da990a$var$operator_map)){
@@ -4927,7 +4939,7 @@ function $4147651646da990a$export$f934fa24c3a86811(search_params) {
             if (!key.endsWith(token)) continue;
             const data = $4147651646da990a$var$decode_filter_data(op, encoded_data);
             if (!data) continue;
-            const field = key.slice($4147651646da990a$var$filter_query_param_prefix.length, -token.length);
+            const field = key.slice(filter_query_param_prefix.length, -token.length);
             found_filters.push({
                 field: field,
                 op: op,
@@ -4937,14 +4949,14 @@ function $4147651646da990a$export$f934fa24c3a86811(search_params) {
     }
     return found_filters;
 }
-function $4147651646da990a$export$62acb285a7579555(sorting, search_params) {
+function $4147651646da990a$export$62acb285a7579555(sorting, search_params, sorting_query_param) {
     if (!sorting) return;
     const { field: field , order: order  } = sorting;
     const ascending = order === "asc";
-    search_params.set($4147651646da990a$var$sorting_query_param, field + (ascending ? $4147651646da990a$var$ascending_token : $4147651646da990a$var$descending_token));
+    search_params.set(sorting_query_param, field + (ascending ? $4147651646da990a$var$ascending_token : $4147651646da990a$var$descending_token));
 }
-function $4147651646da990a$export$766e9676e74997d3(search_params) {
-    const encoded_sorting = search_params.get($4147651646da990a$var$sorting_query_param);
+function $4147651646da990a$export$766e9676e74997d3(search_params, sorting_query_param_) {
+    const encoded_sorting = search_params.get(sorting_query_param_);
     if (!encoded_sorting) return;
     if (encoded_sorting.endsWith($4147651646da990a$var$ascending_token)) return {
         field: encoded_sorting.slice(0, -$4147651646da990a$var$ascending_token.length),
@@ -4957,22 +4969,22 @@ function $4147651646da990a$export$766e9676e74997d3(search_params) {
     (0, $gco9i$dlog)("Invalid sorting query param value", encoded_sorting);
     return;
 }
-function $4147651646da990a$export$af4a870a0ee262c4(search_params) {
+function $4147651646da990a$export$916e6850778505f6(search_params, filter_query_param_prefix, sorting_query_param) {
     // We'll be modifying the URLSearchParams object, so we need to make a copy of the keys first
     const keys = [
         ...search_params.keys()
     ];
-    for (const key of keys)if (key.startsWith($4147651646da990a$var$filter_query_param_prefix) || key === $4147651646da990a$var$sorting_query_param) search_params.delete(key);
+    for (const key of keys)if (key.startsWith(filter_query_param_prefix) || key === sorting_query_param) search_params.delete(key);
 }
 const $4147651646da990a$export$cf5feb2102aec7f2 = "went_sideways_clear_filters";
-function $4147651646da990a$export$43cd1e747fecd42e(to_url, set_clearing_flag, from_search_params = new URLSearchParams(location.search)) {
-    if (!to_url) return to_url;
-    const was_url_object = to_url instanceof URL;
-    const url_object = was_url_object ? to_url : new URL(to_url, location.origin);
+function $4147651646da990a$export$43cd1e747fecd42e({ to_url_: to_url_ , set_clearing_flag_: set_clearing_flag_ , from_search_params_: from_search_params_ = new URLSearchParams(location.search) , sorting_query_param_: sorting_query_param_ , filter_query_param_prefix_: filter_query_param_prefix_  }) {
+    if (!to_url_) return to_url_;
+    const was_url_object = to_url_ instanceof URL;
+    const url_object = was_url_object ? to_url_ : new URL(to_url_, location.origin);
     const { searchParams: searchParams  } = url_object;
-    if (set_clearing_flag) searchParams.set($4147651646da990a$export$cf5feb2102aec7f2, "true");
-    if (from_search_params.has($4147651646da990a$var$sorting_query_param)) searchParams.set($4147651646da990a$var$sorting_query_param, from_search_params.get($4147651646da990a$var$sorting_query_param));
-    for (const key of from_search_params.keys())if (key.startsWith($4147651646da990a$var$filter_query_param_prefix)) searchParams.set(key, from_search_params.get(key));
+    if (set_clearing_flag_) searchParams.set($4147651646da990a$export$cf5feb2102aec7f2, "true");
+    if (from_search_params_.has(sorting_query_param_)) searchParams.set(sorting_query_param_, from_search_params_.get(sorting_query_param_));
+    for (const key of from_search_params_.keys())if (key.startsWith(filter_query_param_prefix_)) searchParams.set(key, from_search_params_.get(key));
     if (was_url_object) return url_object;
     return url_object.href;
 }
@@ -4980,7 +4992,7 @@ function $4147651646da990a$export$43cd1e747fecd42e(to_url, set_clearing_flag, fr
 
 
 const $dfa5b6f7c5e421df$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<nav class="crumbs"></nav>`, 2), $dfa5b6f7c5e421df$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<a class="crumb"></a>`, 2), $dfa5b6f7c5e421df$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<span class="separator"></span>`, 2);
-function $dfa5b6f7c5e421df$export$5646050d516e06bc({ crumb_data_: get_api_crumb_data , router_: router_ , i18n_: i18n_  }) {
+function $dfa5b6f7c5e421df$export$5646050d516e06bc({ crumb_data_: get_api_crumb_data , router_: router_ , i18n_: i18n_ , filter_query_param_prefix_: filter_query_param_prefix_ , sorting_query_param_: sorting_query_param_  }) {
     const placeholder_crumb_data = [
         ,
         ,
@@ -4997,7 +5009,11 @@ function $dfa5b6f7c5e421df$export$5646050d516e06bc({ crumb_data_: get_api_crumb_
                     return crumb_data();
                 },
                 children: (display_accessor, index)=>{
-                    const href = (0, $gco9i$createMemo)(()=>(0, $4147651646da990a$export$43cd1e747fecd42e)(display_accessor()?.page_url));
+                    const href = (0, $gco9i$createMemo)(()=>(0, $4147651646da990a$export$43cd1e747fecd42e)({
+                            to_url_: display_accessor()?.page_url,
+                            filter_query_param_prefix_: filter_query_param_prefix_,
+                            sorting_query_param_: sorting_query_param_
+                        }));
                     return [
                         (0, $gco9i$createComponent)((0, $gco9i$Show), {
                             get when () {
@@ -5062,7 +5078,7 @@ function $dfa5b6f7c5e421df$export$5646050d516e06bc({ crumb_data_: get_api_crumb_
 
 
 const $06edf3aec9073663$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<nav class="quicklinks"></nav>`, 2), $06edf3aec9073663$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div>QuickLinks failed</div>`, 2), $06edf3aec9073663$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<a class="quicklink"></a>`, 2);
-function $06edf3aec9073663$export$466cdc317043f6cb({ quicklinks_data_: quicklinks_data_ , router_: router_ , current_query_id_: current_query_id_ , breadcrumb_data_: breadcrumb_data_ , i18n_: i18n_  }) {
+function $06edf3aec9073663$export$466cdc317043f6cb({ quicklinks_data_: quicklinks_data_ , router_: router_ , current_query_id_: current_query_id_ , breadcrumb_data_: breadcrumb_data_ , i18n_: i18n_ , sorting_query_param_: sorting_query_param_ , filter_query_param_prefix_: filter_query_param_prefix_  }) {
     let scrolling_logic_ran_for_query_id = false;
     let last_scroll_position;
     let scroll_to_element_on_dom_insertion;
@@ -5197,7 +5213,12 @@ function $06edf3aec9073663$export$466cdc317043f6cb({ quicklinks_data_: quicklink
                                 return quicklinks_data_()?.some(({ query_id: query_id  })=>query_id === current_id);
                             });
                             const href = (0, $gco9i$createMemo)(()=>// We don't want these links to delete the sort and filter state by default, only if `clear_filters_when_going_sideways` explicitly clears them
-                                (0, $4147651646da990a$export$43cd1e747fecd42e)(display_accessor()?.page_url, is_sibling()));
+                                (0, $4147651646da990a$export$43cd1e747fecd42e)({
+                                    to_url_: display_accessor()?.page_url,
+                                    set_clearing_flag_: is_sibling(),
+                                    sorting_query_param_: sorting_query_param_,
+                                    filter_query_param_prefix_: filter_query_param_prefix_
+                                }));
                             return (()=>{
                                 const _el$3 = (0, $gco9i$getNextElement)($06edf3aec9073663$var$_tmpl$3);
                                 (0, $gco9i$addEventListener)(_el$3, "click", (0, $gco9i$catchify)((ev)=>{
@@ -5442,7 +5463,7 @@ function $e7fce80abe608e01$var$clear_if_opened_new_tab_with_sideways_url_params_
 
 
 
-const $9f5cb586f34c14e6$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div class="statement">No category ID specified, this is probably unintentional. Make sure to create (and insert) the CategoryPage *after* you have specified a category ID in your Depict Provider.</div>`, 2), $9f5cb586f34c14e6$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div class="buttons"><button class="ok major"></button></div>`, 4);
+const $9f5cb586f34c14e6$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div class="statement" style="white-space:pre-wrap">No category ID specified, this is probably unintentional. Make sure to create (and insert) the CategoryPage *after* you have specified a category ID in your Depict Provider.</div>`, 2), $9f5cb586f34c14e6$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div class="buttons"><button class="ok major"></button></div>`, 4);
 function $9f5cb586f34c14e6$export$d4fc5c0e68a52116(el, query_id_, i18n_) {
     if (!(0, $gco9i$is_debug)) return; // Just to make sure we don't show this in production
     const owner = (0, $gco9i$getOwner)();
@@ -5483,7 +5504,7 @@ const $4fb3a1cf207a7d5c$export$5c28802497c8a83c = /*@__PURE__*/ Symbol("category
 
 
 const $df5d81d0fe61ff21$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div class="product-count"><!#><!/> <!#><!/></div>`, 6), $df5d81d0fe61ff21$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div></div>`, 2), $df5d81d0fe61ff21$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div class="filter-results-for-one-row"><!#><!/><!#><!/></div>`, 6), $df5d81d0fe61ff21$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div class="depict plp category"><div class="listing-page"><!#><!/><!#><!/><!#><!/><!#><!/><!#><!/><!#><!/></div><!#><!/><!#><!/></div>`, 20);
-function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , listing_type_: listing_type_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , sideways_filter_clearing_flag_: sideways_filter_clearing_flag_  }) {
+function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , listing_type_: listing_type_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , sideways_filter_clearing_flag_: sideways_filter_clearing_flag_ , sorting_query_param_: sorting_query_param_ , filter_query_param_prefix_: filter_query_param_prefix_  }) {
     let results_for;
     let only_show_filters_opener_;
     let middle_elements_;
@@ -5679,7 +5700,9 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({ depict_api_: depict_api_ ,
                     return (0, $gco9i$createComponent)((0, $dfa5b6f7c5e421df$export$5646050d516e06bc), {
                         crumb_data_: crumb_data_,
                         router_: router_,
-                        i18n_: i18n_
+                        i18n_: i18n_,
+                        sorting_query_param_: sorting_query_param_,
+                        filter_query_param_prefix_: filter_query_param_prefix_
                     });
                 }
             }), _el$16, _co$5);
@@ -5693,7 +5716,9 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({ depict_api_: depict_api_ ,
                         current_query_id_: query_id_,
                         router_: router_,
                         breadcrumb_data_: crumb_data_,
-                        i18n_: i18n_
+                        i18n_: i18n_,
+                        sorting_query_param_: sorting_query_param_,
+                        filter_query_param_prefix_: filter_query_param_prefix_
                     });
                 }
             }), _el$18, _co$6);
@@ -5936,19 +5961,20 @@ function $ccd5db07a3a069c5$export$477caf01aecaeb2a(options) {
     const [get_current_href, set_current_href] = (0, $gco9i$createSignal)(globalThis?.location?.href ?? "https://example.com");
     const history_change_handler = (0, $gco9i$catchify)(()=>set_current_href(location.href));
     const owner = (0, $gco9i$getOwner)() || (0, $gco9i$createRoot)(()=>(0, $gco9i$getOwner)());
+    const { sorting_query_param_: sorting_query_param_ , filter_query_param_prefix_: filter_query_param_prefix_  } = options;
     let writer_started = false;
     (0, $gco9i$instant_exec_on_suspect_history_change).add(history_change_handler);
     (0, $gco9i$onCleanup)(()=>(0, $gco9i$instant_exec_on_suspect_history_change).delete(history_change_handler));
     (0, $gco9i$createComputed)(()=>{
         const { searchParams: searchParams  } = new URL(get_current_href());
         (0, $gco9i$batch)(()=>{
-            const found_sorting = (0, $4147651646da990a$export$766e9676e74997d3)(searchParams);
+            const found_sorting = (0, $4147651646da990a$export$766e9676e74997d3)(searchParams, sorting_query_param_);
             if (found_sorting) {
                 const current_sorting = (0, $gco9i$untrack)(get_sorting_);
                 // Do some diffing since we might assume in certain places of the code that if the signal changes it means the sorting has changed
                 if (current_sorting?.field !== found_sorting.field || current_sorting?.order !== found_sorting.order) set_sorting(found_sorting);
             } else set_sorting();
-            const found_filters = (0, $4147651646da990a$export$f934fa24c3a86811)(searchParams);
+            const found_filters = (0, $4147651646da990a$export$f934fa24c3a86811)(searchParams, filter_query_param_prefix_);
             const selected_filters = (0, $gco9i$untrack)(get_selected_filters_);
             const found_filters_map = new Map(found_filters.map(({ field: field , op: op , data: data  })=>[
                     JSON.stringify([
@@ -5973,7 +5999,9 @@ function $ccd5db07a3a069c5$export$477caf01aecaeb2a(options) {
                         get_sorting_: get_sorting_,
                         get_selected_filters_: get_selected_filters_,
                         router_: router_,
-                        get_has_sideways_filter_clearing_flag_: get_has_sideways_filter_clearing_flag_
+                        get_has_sideways_filter_clearing_flag_: get_has_sideways_filter_clearing_flag_,
+                        sorting_query_param_: sorting_query_param_,
+                        filter_query_param_prefix_: filter_query_param_prefix_
                     }));
                 writer_started = true;
             }
@@ -5992,7 +6020,7 @@ function $ccd5db07a3a069c5$export$477caf01aecaeb2a(options) {
 }
 /**
  * Writes the sorting and filters to the URL query parameters when they change.
- */ function $ccd5db07a3a069c5$var$start_href_writer({ get_sorting_: get_sorting_ , get_selected_filters_: get_selected_filters_ , router_: router_ , get_has_sideways_filter_clearing_flag_: get_has_sideways_filter_clearing_flag_  }) {
+ */ function $ccd5db07a3a069c5$var$start_href_writer({ get_sorting_: get_sorting_ , get_selected_filters_: get_selected_filters_ , router_: router_ , get_has_sideways_filter_clearing_flag_: get_has_sideways_filter_clearing_flag_ , sorting_query_param_: sorting_query_param_ , filter_query_param_prefix_: filter_query_param_prefix_  }) {
     (0, $gco9i$createEffect)((0, $gco9i$on)([
         get_sorting_,
         get_selected_filters_,
@@ -6001,9 +6029,9 @@ function $ccd5db07a3a069c5$export$477caf01aecaeb2a(options) {
         const current_href = location.href;
         const url_object = new URL(current_href);
         const { searchParams: searchParams  } = url_object;
-        (0, $4147651646da990a$export$af4a870a0ee262c4)(searchParams);
-        (0, $4147651646da990a$export$62acb285a7579555)(sorting, searchParams);
-        (0, $4147651646da990a$export$58aa3f171519b6d7)(filters, searchParams);
+        (0, $4147651646da990a$export$916e6850778505f6)(searchParams, filter_query_param_prefix_, sorting_query_param_);
+        (0, $4147651646da990a$export$62acb285a7579555)(sorting, searchParams, sorting_query_param_);
+        (0, $4147651646da990a$export$58aa3f171519b6d7)(filters, searchParams, filter_query_param_prefix_);
         if (!has_sideways_filter_clearing_flag) $ccd5db07a3a069c5$var$delete_sideways_param_flag(searchParams);
         // We can't just check if the URL is equal since sometimes the order of the parameters in the URL changes (randomly?) so we need to compare them one by one
         const unmodified_search_params = [
@@ -6034,6 +6062,8 @@ function $ccd5db07a3a069c5$var$delete_sideways_param_flag(searchParams) {
 class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
     /**
    * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
+   */ /**
+   * We store query_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
    */ #throwing_on_navigation(...args) {
         const { on_navigation_: on_navigation_  } = this;
         if (typeof on_navigation_ !== "function") throw new Error("on_navigation_ is not a function");
@@ -6096,8 +6126,11 @@ class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
             if (force_spa_navigation_ && wants_hard_navigation) {
                 // Don't allow hard navigation if we're forcing SPA navigation, which we do for things where PageReplacer can be used for performance
                 const new_state = history.state;
-                if (category_query_id_) // In JS-UI we need to know the query_id of the current category, therefore push it into state
-                new_state.category_current_query_id = category_query_id_;
+                if (category_query_id_) {
+                    // In JS-UI we need to know the query_id of the current category, therefore push it into state
+                    if (!this.query_id_state_key) (0, $gco9i$report)(new Error("query_id_state_key is not set"), "error");
+                    new_state[this.query_id_state_key] = category_query_id_;
+                }
                 history[is_replace_ ? "replaceState" : "pushState"](new_state, "", new_url_);
             } else this.#throwing_on_navigation.call(this, {
                 is_replace: is_replace_,
@@ -6107,7 +6140,8 @@ class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
             await promise;
         })
     };
-    constructor(on_navigation){
+    constructor(on_navigation, query_id_state_key){
+        this.query_id_state_key = query_id_state_key;
         this.on_navigation_ = on_navigation;
     }
 }
@@ -6124,13 +6158,13 @@ const $961b5c64bef4662f$var$InExternalAreaDiv = ({ children: children  })=>(()=>
         return _el$;
     })();
 class $961b5c64bef4662f$export$f34314aa9505732e {
-    #router = new (0, $4fd2ba03703a7d92$export$7e1297a3a19f10d8)("hard_navigation");
+    #router;
     #locale_signal = (0, $gco9i$createSignal)();
     #merchant_signal = (0, $gco9i$createSignal)();
     #market_signal = (0, $gco9i$createSignal)();
     #query_id_signal = (0, $gco9i$createSignal)("");
     #listing_type_signal = (0, $gco9i$createSignal)();
-    static #has_been_constructed = false;
+    static #keys_constructed_with = [];
     get localization() {
         // allow reactive access
         return this.#locale_signal[0]();
@@ -6169,27 +6203,35 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
     set on_navigation(new_function) {
         this.#router.on_navigation_ = new_function;
     }
-    constructor({ api: api , on_navigation: on_navigation , page_url_creator: page_url_creator , ...props_on_class }){
+    constructor({ api: api , on_navigation: on_navigation , page_url_creator: page_url_creator , unique_instance_key_for_state: unique_instance_key_for_state = "" , query_id_state_key: query_id_state_key , ...props_on_class }){
         const owner = (0, $gco9i$getOwner)() || (0, $gco9i$createRoot)(()=>(0, $gco9i$getOwner)()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
         (0, $gco9i$runWithOwner)(owner, ()=>{
-            if ($961b5c64bef4662f$export$f34314aa9505732e.#has_been_constructed && !(0, $gco9i$isServer)) // on the server we can't write stuff to history.state anyway so can have multiple
+            if ($961b5c64bef4662f$export$f34314aa9505732e.#keys_constructed_with.includes(unique_instance_key_for_state) && !(0, $gco9i$isServer)) // on the server we can't write stuff to history.state anyway so can have multiple
             throw new Error("You can only have one instance of DepictCategory due to state limitations");
-            $961b5c64bef4662f$export$f34314aa9505732e.#has_been_constructed = true;
             Object.assign(this, props_on_class); // set initial signal values
             (0, $90980bd87c9960f9$export$5162a71f252e6122)();
+            this.#router = new (0, $4fd2ba03703a7d92$export$7e1297a3a19f10d8)("hard_navigation", query_id_state_key);
             if (on_navigation) this.#router.on_navigation_ = on_navigation;
+            const sorting_query_param_ = "sorting" + unique_instance_key_for_state;
+            const filter_query_param_prefix_ = "filter" + unique_instance_key_for_state + "_";
             const { selected_filters_: selected_filters_ , current_sorting_: current_sorting_ , sideways_filter_clearing_flag_: sideways_filter_clearing_flag_  } = (0, $ccd5db07a3a069c5$export$477caf01aecaeb2a)({
-                router_: this.#router
+                router_: this.#router,
+                sorting_query_param_: sorting_query_param_,
+                filter_query_param_prefix_: filter_query_param_prefix_
+            });
+            const [reset_history_state_, state_] = (0, $a8fa7302d6f93c0b$export$9862539c89138352)({
+                get_default_values_: ()=>({
+                        filters_open: false,
+                        sorting_open: false,
+                        expanded_filters: [],
+                        // Please make sure that the signal created by below line always updates AFTER selected_filters_ updates on a "popstate" event. If the filter cache is popped before the selected filters are the code in create_modified_filters() is going to re-calculate search_local_filter_cache without knowing the real value of search_selected_filters, and we'll end up with too few filters in search_local_filter_cache in some cases
+                        local_filter_cache: [],
+                        expanded_hierarchical_filters: [],
+                        scroll_restoration_data: []
+                    }),
+                router_: this.#router,
+                prefix_: "category" + unique_instance_key_for_state + "_"
             });
-            const [reset_history_state_, state_] = (0, $a8fa7302d6f93c0b$export$9862539c89138352)(()=>({
-                    category_filters_open: false,
-                    category_sorting_open: false,
-                    category_expanded_filters: [],
-                    // Please make sure that the signal created by below line always updates AFTER selected_filters_ updates on a "popstate" event. If the filter cache is popped before the selected filters are the code in create_modified_filters() is going to re-calculate search_local_filter_cache without knowing the real value of search_selected_filters, and we'll end up with too few filters in search_local_filter_cache in some cases
-                    category_local_filter_cache: [],
-                    category_expanded_hierarchical_filters: [],
-                    category_scroll_restoration_data: []
-                }), this.#router);
             const i18n_ = (0, $c16e74cfe125bb05$export$f091cbac892643a4)(this.#locale_signal[0]);
             $961b5c64bef4662f$var$privately_shared_properties.set(this, {
                 state_: state_,
@@ -6203,8 +6245,11 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
                 router_: this.#router,
                 selected_filters_: selected_filters_,
                 current_sorting_: current_sorting_,
-                sideways_filter_clearing_flag_: sideways_filter_clearing_flag_
+                sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
+                sorting_query_param_: sorting_query_param_,
+                filter_query_param_prefix_: filter_query_param_prefix_
             });
+            $961b5c64bef4662f$export$f34314aa9505732e.#keys_constructed_with.push(unique_instance_key_for_state);
         });
     }
 }
@@ -6221,7 +6266,7 @@ function $961b5c64bef4662f$export$e2bf8ce7779e827e(props) {
                 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;
+        const { state_: { local_filter_cache: local_filter_cache_ , filters_open: category_filters_open_ , sorting_open: category_sorting_open_ , expanded_filters: expanded_filters_ , expanded_hierarchical_filters: expanded_hierarchical_filters_ , 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_ , sorting_query_param_: sorting_query_param_ , filter_query_param_prefix_: filter_query_param_prefix_  } = shared_properties;
         (0, $gco9i$onCleanup)(reset_history_state_);
         return (0, $df5d81d0fe61ff21$export$f7d2f673fc2f091d)({
             tenant_: ()=>depict_category.merchant,
@@ -6250,24 +6295,28 @@ function $961b5c64bef4662f$export$e2bf8ce7779e827e(props) {
                     cols_at_size: (0, $b5cccc8ee7d24677$export$6daf8749b65a1b77)(props.cols_at_size),
                     ...grid_spacing_override()
                 })),
-            product_card_template_: product_card_template
+            product_card_template_: product_card_template,
+            sorting_query_param_: sorting_query_param_,
+            filter_query_param_prefix_: filter_query_param_prefix_
         });
     }, "Entire CategoryPage failed");
 }
 function $961b5c64bef4662f$export$5b7c3ce0ebe51f86({ depict_category: depict_category  }) {
-    const { i18n_: i18n_ , breadcrumb_signal_: [crumb_data_] , router_: router_  } = $961b5c64bef4662f$var$get_shared_properties(depict_category);
+    const { i18n_: i18n_ , breadcrumb_signal_: [crumb_data_] , router_: router_ , sorting_query_param_: sorting_query_param_ , filter_query_param_prefix_: filter_query_param_prefix_  } = $961b5c64bef4662f$var$get_shared_properties(depict_category);
     return (0, $gco9i$createComponent)($961b5c64bef4662f$var$InExternalAreaDiv, {
         get children () {
             return (0, $dfa5b6f7c5e421df$export$5646050d516e06bc)({
                 i18n_: i18n_,
                 crumb_data_: crumb_data_,
-                router_: router_
+                router_: router_,
+                sorting_query_param_: sorting_query_param_,
+                filter_query_param_prefix_: filter_query_param_prefix_
             });
         }
     });
 }
 function $961b5c64bef4662f$export$de035477d6fef996({ depict_category: depict_category  }) {
-    const { i18n_: i18n_ , quicklinks_signal_: [quicklinks_data_] , breadcrumb_signal_: [breadcrumb_data_] , router_: router_  } = $961b5c64bef4662f$var$get_shared_properties(depict_category);
+    const { i18n_: i18n_ , quicklinks_signal_: [quicklinks_data_] , breadcrumb_signal_: [breadcrumb_data_] , router_: router_ , sorting_query_param_: sorting_query_param_ , filter_query_param_prefix_: filter_query_param_prefix_  } = $961b5c64bef4662f$var$get_shared_properties(depict_category);
     return (0, $gco9i$createComponent)($961b5c64bef4662f$var$InExternalAreaDiv, {
         get children () {
             return (0, $06edf3aec9073663$export$466cdc317043f6cb)({
@@ -6275,7 +6324,9 @@ function $961b5c64bef4662f$export$de035477d6fef996({ depict_category: depict_cat
                 quicklinks_data_: quicklinks_data_,
                 router_: router_,
                 current_query_id_: ()=>depict_category.category_id,
-                breadcrumb_data_: breadcrumb_data_
+                breadcrumb_data_: breadcrumb_data_,
+                sorting_query_param_: sorting_query_param_,
+                filter_query_param_prefix_: filter_query_param_prefix_
             });
         }
     });
@@ -8601,31 +8652,39 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
     #merchant_signal = (0, $gco9i$createSignal)();
     #market_signal = (0, $gco9i$createSignal)();
     #modal_open_signal = (0, $gco9i$createSignal)(false);
-    static #has_been_constructed = false;
+    static #keys_constructed_with = [];
     #router = new (0, $4fd2ba03703a7d92$export$7e1297a3a19f10d8)("hard_navigation");
-    constructor({ search_query_url_param_name: search_query_url_param_name_ = "query" , url_transformer: url_transformer , on_navigation: on_navigation , enable_category_suggestions: enable_category_suggestions = true , page_url_creator: page_url_creator , disable_scrolling_during_modal: // Stuff needed for non-standard customer deployments that we shouldn't actually expose
+    constructor({ unique_instance_key_for_state: unique_instance_key_for_state = "" , search_query_url_param_name: search_query_url_param_name_ = "query" + unique_instance_key_for_state , url_transformer: url_transformer , on_navigation: on_navigation , enable_category_suggestions: enable_category_suggestions = true , page_url_creator: page_url_creator , disable_scrolling_during_modal: // Stuff needed for non-standard customer deployments that we shouldn't actually expose
     disable_scrolling_during_modal = true , api: api , bottom_distance_under_modal: bottom_distance_under_modal , render_instant_card: render_instant_card , ...props_on_class }){
         const owner = (0, $gco9i$getOwner)() || (0, $gco9i$createRoot)(()=>(0, $gco9i$getOwner)()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
         (0, $gco9i$runWithOwner)(owner, ()=>{
-            if ($806c97b931758897$export$ac6237957a15b3f0.#has_been_constructed && !(0, $gco9i$isServer)) // on the server we can't write stuff to history.state anyway so can have multiple
+            if ($806c97b931758897$export$ac6237957a15b3f0.#keys_constructed_with.includes(unique_instance_key_for_state) && !(0, $gco9i$isServer)) // on the server we can't write stuff to history.state anyway so can have multiple
             throw new Error("You can only have one instance of DepictSearch");
             Object.assign(this, props_on_class);
             if (on_navigation) this.#router.on_navigation_ = on_navigation;
+            const sorting_query_param_ = "sorting" + unique_instance_key_for_state;
+            const filter_query_param_prefix_ = "filter" + unique_instance_key_for_state + "_";
             const { current_sorting_: current_sorting_ , selected_filters_: selected_filters_ , search_query_accessor_: raw_search_query_accessor  } = (0, $ccd5db07a3a069c5$export$477caf01aecaeb2a)({
                 search_query_url_param_name_: search_query_url_param_name_,
-                router_: this.#router
+                router_: this.#router,
+                sorting_query_param_: sorting_query_param_,
+                filter_query_param_prefix_: filter_query_param_prefix_
+            });
+            const [reset_history_state_, state_] = (0, $a8fa7302d6f93c0b$export$9862539c89138352)({
+                get_default_values_: ()=>({
+                        field_value: (globalThis?.location && new URLSearchParams(location.search).get(search_query_url_param_name_)) ?? "",
+                        filters_open: false,
+                        sorting_open: false,
+                        expanded_filters: [],
+                        // Please make sure that the signal created by below line always updates AFTER selected_filters_ updates on a "popstate" event. If the filter cache is popped before the selected filters are the code in create_modified_filters() is going to re-calculate search_local_filter_cache without knowing the real value of search_selected_filters, and we'll end up with too few filters in search_local_filter_cache in some cases
+                        local_filter_cache: [],
+                        expanded_hierarchical_filters: [],
+                        showing_recommendation_rows: (0, $172e1b898d457050$export$1c8c715550dc689d),
+                        scroll_restoration_data: []
+                    }),
+                router_: this.#router,
+                prefix_: "search" + unique_instance_key_for_state + "_"
             });
-            const [reset_history_state_, state_] = (0, $a8fa7302d6f93c0b$export$9862539c89138352)(()=>({
-                    search_field_value: (globalThis?.location && new URLSearchParams(location.search).get(search_query_url_param_name_)) ?? "",
-                    search_filters_open: false,
-                    search_sorting_open: false,
-                    search_expanded_filters: [],
-                    // Please make sure that the signal created by below line always updates AFTER selected_filters_ updates on a "popstate" event. If the filter cache is popped before the selected filters are the code in create_modified_filters() is going to re-calculate search_local_filter_cache without knowing the real value of search_selected_filters, and we'll end up with too few filters in search_local_filter_cache in some cases
-                    search_local_filter_cache: [],
-                    search_expanded_hierarchical_filters: [],
-                    search_showing_recommendation_rows: (0, $172e1b898d457050$export$1c8c715550dc689d),
-                    search_scroll_restoration_data: []
-                }), this.#router);
             const search_query_updating_blocked_ = (0, $gco9i$createSignal)(false);
             const [get_search_query_updating_blocked] = search_query_updating_blocked_;
             const get_search_query_ = (0, $gco9i$createMemo)((previous_value)=>{
@@ -8636,10 +8695,10 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
                 page_url_creator: page_url_creator
             });
             const previous_searches = (0, $21f51c14cb3f586f$export$84bba84a7b837187)(get_search_query_);
-            const [, set_search_showing_recommendation_rows] = state_.search_showing_recommendation_rows;
+            const [, set_search_showing_recommendation_rows] = state_.showing_recommendation_rows;
             const after_submit_ = ()=>set_search_showing_recommendation_rows((0, $172e1b898d457050$export$1c8c715550dc689d)); // do this every time after we have submitted a new query - otherwise there might already be a saved number of rows in the state
             const on_submit_with_unchanged_value_ = ()=>this.modal_open = false;
-            const [get_search_field_value_, set_search_field_value_] = state_.search_field_value;
+            const [get_search_field_value_, set_search_field_value_] = state_.field_value;
             const configured_submit_query_ = (new_query)=>(0, $bfd908d13d90934c$export$e16630ecb9644a1c)({
                     on_submit_with_unchanged_value_: on_submit_with_unchanged_value_,
                     set_search_field_value_: set_search_field_value_,
@@ -8655,9 +8714,9 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
                 selected_filters_: selected_filters_,
                 get_search_query_: get_search_query_,
                 current_sorting_: current_sorting_,
-                expanded_hierarchical_filters_: state_.search_expanded_hierarchical_filters,
+                expanded_hierarchical_filters_: state_.expanded_hierarchical_filters,
                 i18n_: i18n_,
-                local_filter_cache_: state_.search_local_filter_cache
+                local_filter_cache_: state_.local_filter_cache
             });
             $806c97b931758897$var$privately_shared_properties.set(this, {
                 search_query_url_param_name_: search_query_url_param_name_,
@@ -8681,7 +8740,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
                     (0, $gco9i$onCleanup)(()=>this.modal_open = false);
                     return (0, $fabfda1230351b1a$export$1c593cbd6f1e10bc)(...args);
                 }, {
-                    search_field_value_: state_.search_field_value,
+                    search_field_value_: state_.field_value,
                     get_search_query_: get_search_query_,
                     search_query_url_param_name_: search_query_url_param_name_,
                     previous_searches_: previous_searches,
@@ -8750,7 +8809,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
                 };
                 (0, $gco9i$runWithOwner)(owner, ()=>(0, $gco9i$createEffect)(modal_opening_effect));
             })();
-            $806c97b931758897$export$ac6237957a15b3f0.#has_been_constructed = true;
+            $806c97b931758897$export$ac6237957a15b3f0.#keys_constructed_with.push(unique_instance_key_for_state);
         });
     }
     get on_navigation() {
@@ -8824,8 +8883,8 @@ function $806c97b931758897$export$f2dc7e4e4aa11abb(props) {
             market_: ()=>depict_search.market,
             depict_api_: shared_properties.depict_api_,
             min_products_to_fetch_: $806c97b931758897$var$min_products_to_fetch_,
-            local_filter_cache_: state_.search_local_filter_cache,
-            search_field_value_: state_.search_field_value,
+            local_filter_cache_: state_.local_filter_cache,
+            search_field_value_: state_.field_value,
             get_search_query_: shared_properties.get_search_query_,
             clear_filters_on_next_submit_: shared_properties.clear_filters_on_next_submit_,
             open_modal_: (...args)=>depict_search.modal_open = args,
@@ -8848,19 +8907,19 @@ function $806c97b931758897$export$f2dc7e4e4aa11abb(props) {
                 });
             },
             current_sorting_: shared_properties.current_sorting_,
-            search_filters_open_: state_.search_filters_open,
-            search_sorting_open_: state_.search_sorting_open,
-            expanded_filters_: state_.search_expanded_filters,
+            search_filters_open_: state_.filters_open,
+            search_sorting_open_: state_.sorting_open,
+            expanded_filters_: state_.expanded_filters,
             make_category_suggestion_card_: shared_properties.enable_category_suggestions_ ? (category_suggestion_)=>{
                 return (0, $897bd4a76f611b38$export$d757d54550ebfb3d)({
                     category_suggestion_: category_suggestion_,
                     router_: shared_properties.router_
                 });
             } : false,
-            expanded_hierarchical_filters_: state_.search_expanded_hierarchical_filters,
+            expanded_hierarchical_filters_: state_.expanded_hierarchical_filters,
             selected_filters_: shared_properties.selected_filters_,
-            showing_recommendation_rows_: state_.search_showing_recommendation_rows,
-            scroll_restoration_data_: state_.search_scroll_restoration_data,
+            showing_recommendation_rows_: state_.showing_recommendation_rows,
+            scroll_restoration_data_: state_.scroll_restoration_data,
             include_input_field_: ()=>props.include_input_field,
             layout_options_: (0, $gco9i$createMemo)(()=>({
                     cols_at_size: (0, $b5cccc8ee7d24677$export$6daf8749b65a1b77)(props.cols_at_size),
@@ -8884,7 +8943,7 @@ function $806c97b931758897$export$316f6f283ae64765(props) {
         let input_element;
         const search_field = (0, $gco9i$createComponent)((0, $5285d2814d0fac0c$export$b94867ecbd698f21), {
             get search_field_value_ () {
-                return shared_properties.state_.search_field_value;
+                return shared_properties.state_.field_value;
             },
             get submit_query_ () {
                 return shared_properties.configured_submit_query_;