@depict-ai/ui 1.3.5 → 1.3.7

package/dist/server/main.cjs

@@ -44,7 +44,7 @@ $parcel$export(module.exports, "defaultGridSpacing", () => $a3280f0aad997933$exp
 $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$export$c3834fa86c616831);
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
-/*! Depict.ai search and product listing SDK */ const $b757f75811f3261f$export$83d89fbfd8236492 = "1.3.5";
+/*! Depict.ai search and product listing SDK */ const $b757f75811f3261f$export$83d89fbfd8236492 = "1.3.7";
 
 
 
@@ -351,18 +351,30 @@ function $6e22b5314fb52f4c$var$history_state_change(signals, entries, state) {
 }
 
 
-function $26a56f6b44703084$export$9862539c89138352(get_default_values_, router_) {
-    const state = (0, $6e22b5314fb52f4c$export$e183a13865960371)(get_default_values_(), router_);
+function $26a56f6b44703084$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, $6e22b5314fb52f4c$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
     ];
 }
 
@@ -419,7 +431,8 @@ class $e1d6c0f3d89d531c$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) {
@@ -465,7 +478,8 @@ class $e1d6c0f3d89d531c$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;
     }
@@ -4130,10 +4144,8 @@ const $1ab22f2cd39b3061$var$operator_map = {
     "geq": "≥",
     "inrange": "\uD83D\uDD22"
 };
-const $1ab22f2cd39b3061$var$sorting_query_param = "sorting";
 const $1ab22f2cd39b3061$var$ascending_token = "\uD83D\uDCC8";
 const $1ab22f2cd39b3061$var$descending_token = "\uD83D\uDCC9";
-const $1ab22f2cd39b3061$var$filter_query_param_prefix = "filter_";
 const $1ab22f2cd39b3061$var$range_delimiter = "-";
 const $1ab22f2cd39b3061$var$string_item_delimiter = "‚"; // This is not a comma but a comma-like character that browsers will render in the URL bar.
 const $1ab22f2cd39b3061$var$array_item_delimiter = "‣"; // FIXME: decide on a character. Could theoretically be a double string delimiter.
@@ -4199,17 +4211,17 @@ function $1ab22f2cd39b3061$var$decode_filter_data(op, encoded_data) {
     }
     return null;
 }
-function $1ab22f2cd39b3061$export$58aa3f171519b6d7(filters, search_params) {
+function $1ab22f2cd39b3061$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 = $1ab22f2cd39b3061$var$encode_filter_data(op, data);
-        search_params.set($1ab22f2cd39b3061$var$filter_query_param_prefix + field + $1ab22f2cd39b3061$var$operator_map[op], encoded_data);
+        search_params.set(filter_query_param_prefix + field + $1ab22f2cd39b3061$var$operator_map[op], encoded_data);
     }
 }
-function $1ab22f2cd39b3061$export$f934fa24c3a86811(search_params) {
+function $1ab22f2cd39b3061$export$f934fa24c3a86811(search_params, filter_query_param_prefix) {
     const found_filters = [];
     for (const key of search_params.keys()){
-        if (!key.startsWith($1ab22f2cd39b3061$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($1ab22f2cd39b3061$var$operator_map)){
@@ -4217,7 +4229,7 @@ function $1ab22f2cd39b3061$export$f934fa24c3a86811(search_params) {
             if (!key.endsWith(token)) continue;
             const data = $1ab22f2cd39b3061$var$decode_filter_data(op, encoded_data);
             if (!data) continue;
-            const field = key.slice($1ab22f2cd39b3061$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,
@@ -4227,14 +4239,14 @@ function $1ab22f2cd39b3061$export$f934fa24c3a86811(search_params) {
     }
     return found_filters;
 }
-function $1ab22f2cd39b3061$export$62acb285a7579555(sorting, search_params) {
+function $1ab22f2cd39b3061$export$62acb285a7579555(sorting, search_params, sorting_query_param) {
     if (!sorting) return;
     const { field: field , order: order  } = sorting;
     const ascending = order === "asc";
-    search_params.set($1ab22f2cd39b3061$var$sorting_query_param, field + (ascending ? $1ab22f2cd39b3061$var$ascending_token : $1ab22f2cd39b3061$var$descending_token));
+    search_params.set(sorting_query_param, field + (ascending ? $1ab22f2cd39b3061$var$ascending_token : $1ab22f2cd39b3061$var$descending_token));
 }
-function $1ab22f2cd39b3061$export$766e9676e74997d3(search_params) {
-    const encoded_sorting = search_params.get($1ab22f2cd39b3061$var$sorting_query_param);
+function $1ab22f2cd39b3061$export$766e9676e74997d3(search_params, sorting_query_param_) {
+    const encoded_sorting = search_params.get(sorting_query_param_);
     if (!encoded_sorting) return;
     if (encoded_sorting.endsWith($1ab22f2cd39b3061$var$ascending_token)) return {
         field: encoded_sorting.slice(0, -$1ab22f2cd39b3061$var$ascending_token.length),
@@ -4247,22 +4259,22 @@ function $1ab22f2cd39b3061$export$766e9676e74997d3(search_params) {
     (0, $diwD4$depictaiutilishared.dlog)("Invalid sorting query param value", encoded_sorting);
     return;
 }
-function $1ab22f2cd39b3061$export$af4a870a0ee262c4(search_params) {
+function $1ab22f2cd39b3061$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($1ab22f2cd39b3061$var$filter_query_param_prefix) || key === $1ab22f2cd39b3061$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 $1ab22f2cd39b3061$export$cf5feb2102aec7f2 = "went_sideways_clear_filters";
-function $1ab22f2cd39b3061$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 $1ab22f2cd39b3061$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($1ab22f2cd39b3061$export$cf5feb2102aec7f2, "true");
-    if (from_search_params.has($1ab22f2cd39b3061$var$sorting_query_param)) searchParams.set($1ab22f2cd39b3061$var$sorting_query_param, from_search_params.get($1ab22f2cd39b3061$var$sorting_query_param));
-    for (const key of from_search_params.keys())if (key.startsWith($1ab22f2cd39b3061$var$filter_query_param_prefix)) searchParams.set(key, from_search_params.get(key));
+    if (set_clearing_flag_) searchParams.set($1ab22f2cd39b3061$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;
 }
@@ -4284,7 +4296,7 @@ const $e53b2e7e632ac4cb$var$_tmpl$ = [
     ' class="separator">',
     "</span>"
 ];
-function $e53b2e7e632ac4cb$export$5646050d516e06bc({ crumb_data_: get_api_crumb_data , router_: router_ , i18n_: i18n_  }) {
+function $e53b2e7e632ac4cb$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 = [
         ,
         ,
@@ -4300,7 +4312,11 @@ function $e53b2e7e632ac4cb$export$5646050d516e06bc({ crumb_data_: get_api_crumb_
                     return crumb_data();
                 },
                 children: (display_accessor, index)=>{
-                    const href = (0, $diwD4$solidjs.createMemo)(()=>(0, $1ab22f2cd39b3061$export$43cd1e747fecd42e)(display_accessor()?.page_url));
+                    const href = (0, $diwD4$solidjs.createMemo)(()=>(0, $1ab22f2cd39b3061$export$43cd1e747fecd42e)({
+                            to_url_: display_accessor()?.page_url,
+                            filter_query_param_prefix_: filter_query_param_prefix_,
+                            sorting_query_param_: sorting_query_param_
+                        }));
                     return [
                         (0, $diwD4$solidjsweb.createComponent)((0, $diwD4$solidjs.Show), {
                             get when () {
@@ -4357,7 +4373,7 @@ const $8cceb1d3a967f369$var$_tmpl$ = [
     ">",
     "</a>"
 ];
-function $8cceb1d3a967f369$export$466cdc317043f6cb({ quicklinks_data_: quicklinks_data_ , router_: router_ , current_query_id_: current_query_id_ , breadcrumb_data_: breadcrumb_data_ , i18n_: i18n_  }) {
+function $8cceb1d3a967f369$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;
@@ -4491,7 +4507,12 @@ function $8cceb1d3a967f369$export$466cdc317043f6cb({ quicklinks_data_: quicklink
                                 return quicklinks_data_()?.some(({ query_id: query_id  })=>query_id === current_id);
                             });
                             const href = (0, $diwD4$solidjs.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, $1ab22f2cd39b3061$export$43cd1e747fecd42e)(display_accessor()?.page_url, is_sibling()));
+                                (0, $1ab22f2cd39b3061$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 (0, $diwD4$solidjsweb.ssr)($8cceb1d3a967f369$var$_tmpl$3, (0, $diwD4$solidjsweb.ssrHydrationKey)(), `quicklink ${is_selected() ? "selected" : ""}`, (0, $diwD4$solidjsweb.ssrAttribute)("href", (0, $diwD4$solidjsweb.escape)(href(), true), false), (0, $diwD4$solidjsweb.escape)(display_accessor()?.title) || (0, $diwD4$solidjsweb.escape)((0, $diwD4$solidjsweb.createComponent)((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
                                 height: "1em",
                                 width: "10ch"
@@ -4795,7 +4816,7 @@ const $840d88a04b2d22a7$var$_tmpl$ = [
     "<!--/--><!--#-->",
     "<!--/--></div>"
 ];
-function $840d88a04b2d22a7$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 $840d88a04b2d22a7$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_;
@@ -4978,7 +4999,9 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ ,
                 return (0, $diwD4$solidjsweb.createComponent)((0, $e53b2e7e632ac4cb$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_
                 });
             }
         })), (0, $diwD4$solidjsweb.escape)((0, $diwD4$solidjsweb.createComponent)((0, $diwD4$solidjs.Show), {
@@ -4991,7 +5014,9 @@ function $840d88a04b2d22a7$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_
                 });
             }
         })), (0, $diwD4$solidjsweb.escape)(observed_results_filters_elements()), (0, $diwD4$solidjsweb.escape)(results_filters()), (0, $diwD4$solidjsweb.escape)((0, $diwD4$solidjsweb.createComponent)((0, $diwD4$solidjs.Show), {
@@ -5225,19 +5250,20 @@ function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
     const [get_current_href, set_current_href] = (0, $diwD4$solidjs.createSignal)(globalThis?.location?.href ?? "https://example.com");
     const history_change_handler = (0, $diwD4$depictaiutilishared.catchify)(()=>set_current_href(location.href));
     const owner = (0, $diwD4$solidjs.getOwner)() || (0, $diwD4$solidjs.createRoot)(()=>(0, $diwD4$solidjs.getOwner)());
+    const { sorting_query_param_: sorting_query_param_ , filter_query_param_prefix_: filter_query_param_prefix_  } = options;
     let writer_started = false;
     (0, $diwD4$depictaiutilishared.instant_exec_on_suspect_history_change).add(history_change_handler);
     (0, $diwD4$solidjs.onCleanup)(()=>(0, $diwD4$depictaiutilishared.instant_exec_on_suspect_history_change).delete(history_change_handler));
     (0, $diwD4$solidjs.createComputed)(()=>{
         const { searchParams: searchParams  } = new URL(get_current_href());
         (0, $diwD4$solidjs.batch)(()=>{
-            const found_sorting = (0, $1ab22f2cd39b3061$export$766e9676e74997d3)(searchParams);
+            const found_sorting = (0, $1ab22f2cd39b3061$export$766e9676e74997d3)(searchParams, sorting_query_param_);
             if (found_sorting) {
                 const current_sorting = (0, $diwD4$solidjs.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, $1ab22f2cd39b3061$export$f934fa24c3a86811)(searchParams);
+            const found_filters = (0, $1ab22f2cd39b3061$export$f934fa24c3a86811)(searchParams, filter_query_param_prefix_);
             const selected_filters = (0, $diwD4$solidjs.untrack)(get_selected_filters_);
             const found_filters_map = new Map(found_filters.map(({ field: field , op: op , data: data  })=>[
                     JSON.stringify([
@@ -5262,7 +5288,9 @@ function $c79fd10a3ab7d6e0$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;
             }
@@ -5281,7 +5309,7 @@ function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
 }
 /**
  * Writes the sorting and filters to the URL query parameters when they change.
- */ function $c79fd10a3ab7d6e0$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 $c79fd10a3ab7d6e0$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, $diwD4$solidjs.createEffect)((0, $diwD4$solidjs.on)([
         get_sorting_,
         get_selected_filters_,
@@ -5290,9 +5318,9 @@ function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
         const current_href = location.href;
         const url_object = new URL(current_href);
         const { searchParams: searchParams  } = url_object;
-        (0, $1ab22f2cd39b3061$export$af4a870a0ee262c4)(searchParams);
-        (0, $1ab22f2cd39b3061$export$62acb285a7579555)(sorting, searchParams);
-        (0, $1ab22f2cd39b3061$export$58aa3f171519b6d7)(filters, searchParams);
+        (0, $1ab22f2cd39b3061$export$916e6850778505f6)(searchParams, filter_query_param_prefix_, sorting_query_param_);
+        (0, $1ab22f2cd39b3061$export$62acb285a7579555)(sorting, searchParams, sorting_query_param_);
+        (0, $1ab22f2cd39b3061$export$58aa3f171519b6d7)(filters, searchParams, filter_query_param_prefix_);
         if (!has_sideways_filter_clearing_flag) $c79fd10a3ab7d6e0$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 = [
@@ -5323,6 +5351,8 @@ function $c79fd10a3ab7d6e0$var$delete_sideways_param_flag(searchParams) {
 class $e96dd13889871fc0$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");
@@ -5385,8 +5415,11 @@ class $e96dd13889871fc0$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, $diwD4$depictaiutilishared.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_,
@@ -5396,7 +5429,8 @@ class $e96dd13889871fc0$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;
     }
 }
@@ -5412,13 +5446,13 @@ const $48567ac5b39bac56$var$min_products_to_fetch_ = 20;
 const $48567ac5b39bac56$var$privately_shared_properties = /*@__PURE__*/ new WeakMap();
 const $48567ac5b39bac56$var$InExternalAreaDiv = ({ children: children  })=>(0, $diwD4$solidjsweb.ssr)($48567ac5b39bac56$var$_tmpl$, (0, $diwD4$solidjsweb.ssrHydrationKey)() + (0, $diwD4$solidjsweb.ssrAttribute)("id", (0, $diwD4$solidjsweb.escape)((0, $0b6e2070a98de347$export$44dad306455dddf).PLP_CATEGORY, true), false), (0, $diwD4$solidjsweb.escape)(children));
 class $48567ac5b39bac56$export$f34314aa9505732e {
-    #router = new (0, $e96dd13889871fc0$export$7e1297a3a19f10d8)("hard_navigation");
+    #router;
     #locale_signal = (0, $diwD4$solidjs.createSignal)();
     #merchant_signal = (0, $diwD4$solidjs.createSignal)();
     #market_signal = (0, $diwD4$solidjs.createSignal)();
     #query_id_signal = (0, $diwD4$solidjs.createSignal)("");
     #listing_type_signal = (0, $diwD4$solidjs.createSignal)();
-    static #has_been_constructed = false;
+    static #keys_constructed_with = [];
     get localization() {
         // allow reactive access
         return this.#locale_signal[0]();
@@ -5457,27 +5491,35 @@ class $48567ac5b39bac56$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, $diwD4$solidjs.getOwner)() || (0, $diwD4$solidjs.createRoot)(()=>(0, $diwD4$solidjs.getOwner)()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
         (0, $diwD4$solidjs.runWithOwner)(owner, ()=>{
-            if ($48567ac5b39bac56$export$f34314aa9505732e.#has_been_constructed && !(0, $diwD4$solidjsweb.isServer)) // on the server we can't write stuff to history.state anyway so can have multiple
+            if ($48567ac5b39bac56$export$f34314aa9505732e.#keys_constructed_with.includes(unique_instance_key_for_state) && !(0, $diwD4$solidjsweb.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");
-            $48567ac5b39bac56$export$f34314aa9505732e.#has_been_constructed = true;
             Object.assign(this, props_on_class); // set initial signal values
             (0, $d84fe647b84b5dc5$export$5162a71f252e6122)();
+            this.#router = new (0, $e96dd13889871fc0$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, $c79fd10a3ab7d6e0$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, $26a56f6b44703084$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, $26a56f6b44703084$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, $0785f4c9947d9b5f$export$f091cbac892643a4)(this.#locale_signal[0]);
             $48567ac5b39bac56$var$privately_shared_properties.set(this, {
                 state_: state_,
@@ -5491,8 +5533,11 @@ class $48567ac5b39bac56$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_
             });
+            $48567ac5b39bac56$export$f34314aa9505732e.#keys_constructed_with.push(unique_instance_key_for_state);
         });
     }
 }
@@ -5509,7 +5554,7 @@ function $48567ac5b39bac56$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, $diwD4$solidjs.onCleanup)(reset_history_state_);
         return (0, $840d88a04b2d22a7$export$f7d2f673fc2f091d)({
             tenant_: ()=>depict_category.merchant,
@@ -5538,24 +5583,28 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e(props) {
                     cols_at_size: (0, $4e04be41243c3d80$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 $48567ac5b39bac56$export$5b7c3ce0ebe51f86({ depict_category: depict_category  }) {
-    const { i18n_: i18n_ , breadcrumb_signal_: [crumb_data_] , router_: router_  } = $48567ac5b39bac56$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_  } = $48567ac5b39bac56$var$get_shared_properties(depict_category);
     return (0, $diwD4$solidjsweb.createComponent)($48567ac5b39bac56$var$InExternalAreaDiv, {
         get children () {
             return (0, $e53b2e7e632ac4cb$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 $48567ac5b39bac56$export$de035477d6fef996({ depict_category: depict_category  }) {
-    const { i18n_: i18n_ , quicklinks_signal_: [quicklinks_data_] , breadcrumb_signal_: [breadcrumb_data_] , router_: router_  } = $48567ac5b39bac56$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_  } = $48567ac5b39bac56$var$get_shared_properties(depict_category);
     return (0, $diwD4$solidjsweb.createComponent)($48567ac5b39bac56$var$InExternalAreaDiv, {
         get children () {
             return (0, $8cceb1d3a967f369$export$466cdc317043f6cb)({
@@ -5563,7 +5612,9 @@ function $48567ac5b39bac56$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_
             });
         }
     });
@@ -7627,31 +7678,39 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
     #merchant_signal = (0, $diwD4$solidjs.createSignal)();
     #market_signal = (0, $diwD4$solidjs.createSignal)();
     #modal_open_signal = (0, $diwD4$solidjs.createSignal)(false);
-    static #has_been_constructed = false;
+    static #keys_constructed_with = [];
     #router = new (0, $e96dd13889871fc0$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, $diwD4$solidjs.getOwner)() || (0, $diwD4$solidjs.createRoot)(()=>(0, $diwD4$solidjs.getOwner)()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
         (0, $diwD4$solidjs.runWithOwner)(owner, ()=>{
-            if ($2c61e4cd8229c49a$export$ac6237957a15b3f0.#has_been_constructed && !(0, $diwD4$solidjsweb.isServer)) // on the server we can't write stuff to history.state anyway so can have multiple
+            if ($2c61e4cd8229c49a$export$ac6237957a15b3f0.#keys_constructed_with.includes(unique_instance_key_for_state) && !(0, $diwD4$solidjsweb.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, $c79fd10a3ab7d6e0$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, $26a56f6b44703084$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, $fb29c6201c369e39$export$1c8c715550dc689d),
+                        scroll_restoration_data: []
+                    }),
+                router_: this.#router,
+                prefix_: "search" + unique_instance_key_for_state + "_"
             });
-            const [reset_history_state_, state_] = (0, $26a56f6b44703084$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, $fb29c6201c369e39$export$1c8c715550dc689d),
-                    search_scroll_restoration_data: []
-                }), this.#router);
             const search_query_updating_blocked_ = (0, $diwD4$solidjs.createSignal)(false);
             const [get_search_query_updating_blocked] = search_query_updating_blocked_;
             const get_search_query_ = (0, $diwD4$solidjs.createMemo)((previous_value)=>{
@@ -7662,10 +7721,10 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
                 page_url_creator: page_url_creator
             });
             const previous_searches = (0, $2b7a005a65221045$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, $fb29c6201c369e39$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, $f328bd45f8ede33c$export$e16630ecb9644a1c)({
                     on_submit_with_unchanged_value_: on_submit_with_unchanged_value_,
                     set_search_field_value_: set_search_field_value_,
@@ -7681,9 +7740,9 @@ class $2c61e4cd8229c49a$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
             });
             $2c61e4cd8229c49a$var$privately_shared_properties.set(this, {
                 search_query_url_param_name_: search_query_url_param_name_,
@@ -7707,7 +7766,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
                     (0, $diwD4$solidjs.onCleanup)(()=>this.modal_open = false);
                     return (0, $f40a47a30a358305$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,
@@ -7776,7 +7835,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
                 };
                 (0, $diwD4$solidjs.runWithOwner)(owner, ()=>(0, $diwD4$solidjs.createEffect)(modal_opening_effect));
             })();
-            $2c61e4cd8229c49a$export$ac6237957a15b3f0.#has_been_constructed = true;
+            $2c61e4cd8229c49a$export$ac6237957a15b3f0.#keys_constructed_with.push(unique_instance_key_for_state);
         });
     }
     get on_navigation() {
@@ -7850,8 +7909,8 @@ function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb(props) {
             market_: ()=>depict_search.market,
             depict_api_: shared_properties.depict_api_,
             min_products_to_fetch_: $2c61e4cd8229c49a$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,
@@ -7874,19 +7933,19 @@ function $2c61e4cd8229c49a$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, $dae23104ba8bb78c$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, $diwD4$solidjs.createMemo)(()=>({
                     cols_at_size: (0, $4e04be41243c3d80$export$6daf8749b65a1b77)(props.cols_at_size),
@@ -7910,7 +7969,7 @@ function $2c61e4cd8229c49a$export$316f6f283ae64765(props) {
         let input_element;
         const search_field = (0, $diwD4$solidjsweb.createComponent)((0, $66b8b9a9613c141d$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_;