@depict-ai/ui 3.0.3 → 3.0.5

package/latest/index.js

@@ -1,13 +1,13 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, base_url as $9HbP8$base_url, dwarn as $9HbP8$dwarn, catchify as $9HbP8$catchify1, observer as $9HbP8$observer, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, report as $9HbP8$report, dlog as $9HbP8$dlog, ContainedImage as $9HbP8$ContainedImage, use_href_accessor as $9HbP8$use_href_accessor1, camelCasifyObject as $9HbP8$camelCasifyObject, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_safari as $9HbP8$is_safari, slider_fractional_factory as $9HbP8$slider_fractional_factory, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, fetch_retry as $9HbP8$fetch_retry, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, javascript_media_query as $9HbP8$javascript_media_query, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet1, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { add_to_version_info as $9HbP8$add_to_version_info, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, base_url as $9HbP8$base_url, dwarn as $9HbP8$dwarn, catchify as $9HbP8$catchify1, observer as $9HbP8$observer, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, report as $9HbP8$report, dlog as $9HbP8$dlog, ContainedImage as $9HbP8$ContainedImage, use_href_accessor as $9HbP8$use_href_accessor1, camelCasifyObject as $9HbP8$camelCasifyObject, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_safari as $9HbP8$is_safari, slider_fractional_factory as $9HbP8$slider_fractional_factory, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, fetch_retry as $9HbP8$fetch_retry, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, javascript_media_query as $9HbP8$javascript_media_query, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet1, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
 import { template as $9HbP8$template, createComponent as $9HbP8$createComponent, mergeProps as $9HbP8$mergeProps, Dynamic as $9HbP8$Dynamic, memo as $9HbP8$memo, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, effect as $9HbP8$effect, setAttribute as $9HbP8$setAttribute, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, use as $9HbP8$use, addEventListener as $9HbP8$addEventListener, getNextMarker as $9HbP8$getNextMarker, delegateEvents as $9HbP8$delegateEvents, classList as $9HbP8$classList, className as $9HbP8$className, style as $9HbP8$style, isServer as $9HbP8$isServer, setProperty as $9HbP8$setProperty } from "solid-js/web";
 import { createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, createSignal as $9HbP8$createSignal, createSelector as $9HbP8$createSelector, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, Index as $9HbP8$Index, createMemo as $9HbP8$createMemo, children as $9HbP8$children, onCleanup as $9HbP8$onCleanup, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, Show as $9HbP8$Show, createUniqueId as $9HbP8$createUniqueId, mergeProps as $9HbP8$mergeProps1, ErrorBoundary as $9HbP8$ErrorBoundary, createResource as $9HbP8$createResource, splitProps as $9HbP8$splitProps, createRoot as $9HbP8$createRoot, createRenderEffect as $9HbP8$createRenderEffect, batch as $9HbP8$batch, Suspense as $9HbP8$Suspense, on as $9HbP8$on, For as $9HbP8$For, createComputed as $9HbP8$createComputed, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
-import { ListenableSet as $9HbP8$ListenableSet, catchify as $9HbP8$catchify, use_href_accessor as $9HbP8$use_href_accessor } from "@depict-ai/utilishared/latest";
+import { ListenableSet as $9HbP8$ListenableSet, catchify as $9HbP8$catchify, use_href_accessor as $9HbP8$use_href_accessor, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
 import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from "solid-js/store";
 
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.3";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.5";
 const $fbbadcb080ad1d4a$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
@@ -418,7 +418,7 @@ class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
       event_: event_,
       force_spa_navigation_: force_spa_navigation_,
       is_replace_: is_replace_,
-      listing_id_: listing_id_,
+      listing_query_: listing_query_,
       scroll = true
     }) => {
       const new_url_ = raw_new_url instanceof URL ? raw_new_url : new URL(raw_new_url, location.origin);
@@ -439,10 +439,10 @@ 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 (listing_id_) {
+        if (listing_query_) {
           // In JS-UI we need to know the listing_id of the current category, therefore push it into state
-          if (!this.listing_id_state_key) $9HbP8$report(new Error("listing_id_state_key is not set"), "error");
-          new_state[this.listing_id_state_key] = listing_id_;
+          if (!this.listing_query_state_key) $9HbP8$report(new Error("listing_query_state_key is not set"), "error");
+          new_state[this.listing_query_state_key] = listing_query_;
         }
         history[is_replace_ ? "replaceState" : "pushState"](new_state, "", new_url_);
       } else this.#throwing_on_navigation.call(this, {
@@ -453,8 +453,8 @@ class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
       await promise;
     })
   };
-  constructor(on_navigation, listing_id_state_key) {
-    this.listing_id_state_key = listing_id_state_key;
+  constructor(on_navigation, listing_query_state_key) {
+    this.listing_query_state_key = listing_query_state_key;
     this.on_navigation_ = on_navigation;
   }
 }
@@ -910,27 +910,31 @@ function $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
   });
 }
 // source: https://medium.com/@pancemarko/deep-equality-in-javascript-determining-if-two-objects-are-equal-bf98cf47e934
+// deeply diffs two objects
+// Modified by chatGPT to not be recursive, since stiga was getting a stack overflow just due to the size of their data
+// Modified futher to bias towards saying objects are equal non-primitive objects differ
 function $29ec7cddbe1d3484$var$deep_equal(obj1, obj2) {
-  if (obj1 === obj2) return true;
-  if (Array.isArray(obj1) && Array.isArray(obj2)) {
-    if (obj1.length !== obj2.length) return false;
-    return obj1.every((elem, index) => {
-      return $29ec7cddbe1d3484$var$deep_equal(elem, obj2[index]);
-    });
-  }
-  if (typeof obj1 === "object" && typeof obj2 === "object" && obj1 !== null && obj2 !== null) {
-    if (Array.isArray(obj1) || Array.isArray(obj2)) return false;
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-    if (keys1.length !== keys2.length || !keys1.every(key => keys2.includes(key))) return false;
-    for (const key in obj1) {
-      if ($29ec7cddbe1d3484$var$result_ids.includes(key)) continue; // ignore keys changing with every request
-      const isEqual = $29ec7cddbe1d3484$var$deep_equal(obj1[key], obj2[key]);
-      if (!isEqual) return false;
-    }
-    return true;
+  const stack = [[obj1, obj2]];
+  while (stack.length > 0) {
+    const [currentObj1, currentObj2] = stack.pop();
+    if (currentObj1 === currentObj2) continue;
+    if (Array.isArray(currentObj1) && Array.isArray(currentObj2)) {
+      if (currentObj1.length !== currentObj2.length) return false;
+      for (let i = 0; i < currentObj1.length; i++) stack.push([currentObj1[i], currentObj2[i]]);
+    } else if (typeof currentObj1 === "object" && typeof currentObj2 === "object" && currentObj1 !== null && currentObj2 !== null) {
+      if (Array.isArray(currentObj1) || Array.isArray(currentObj2)) return false;
+      const keys1 = Object.keys(currentObj1);
+      const keys2 = Object.keys(currentObj2);
+      if (keys1.length !== keys2.length || !keys1.every(key => keys2.includes(key))) return false;
+      for (let key in currentObj1) {
+        if ($29ec7cddbe1d3484$var$result_ids.includes(key)) continue; // ignore comparing values for keys we know are changing with every request
+        stack.push([currentObj1[key], currentObj2[key]]);
+      }
+    } else if (typeof currentObj1 !== "function" && typeof currentObj2 !== "function")
+      // Claim that all functions are equal, since the only way a function ends up here is because someone added it in the displayTransformer and that shouldn't force us to re-render, right?
+      return false;
   }
-  return false;
+  return true;
 }
 const $c8d5ff4524619fcd$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div>`),
   $c8d5ff4524619fcd$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<style type=text/css>`);
@@ -5422,6 +5426,11 @@ function $e5014ccd0b76d9f4$export$967e966fca9515e(api_response) {
   }
   return api_response;
 }
+
+// Minifiable and tree-shakable enum
+// Why not use const enum? See https://gitlab.com/depict-ai/depict.ai/-/merge_requests/9223#note_1675965260
+const $c20599a0d81d953a$export$74ee7529ce0f8a00 = "listingId";
+const $c20599a0d81d953a$export$5aae649db1b959fc = "externalId";
 const $7fa23e2a0079eca4$var$v3_base_url = (0, $9HbP8$base_url) + "/v3/";
 const $7fa23e2a0079eca4$var$search_base_url = $7fa23e2a0079eca4$var$v3_base_url + "search/";
 class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
@@ -5451,7 +5460,7 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
     const category_transformer = this.display_transformers?.categories;
     if (!category_transformer) return response;
     // find category suggestions, run thing with them, and then replace them
-    const category_suggestions = response.suggestions.filter(suggestion => suggestion.type === "category");
+    const category_suggestions = response.suggestions.filter(suggestion => suggestion.type === "listing");
     const transformed_category_suggestions = await category_transformer({
       market: market,
       merchant: merchant,
@@ -5501,8 +5510,7 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
     endpoint_: endpoint_,
     input_req_: input_req_,
     fallback_response_: fallback_response_,
-    method_ = "POST",
-    delete_key_before_sending_: delete_key_before_sending_ // only supported for GET requests
+    method_ = "POST"
   }) {
     const cache_obj = this.#get_cache_obj_for_endpoint(endpoint_);
     const with_ids = this.#add_ids_to_request(input_req_);
@@ -5520,7 +5528,6 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
     cache_obj.in_progress_[body] = new Promise(r => resolve_in_progress = r);
     try {
       const is_post = method_ === "POST";
-      if (!is_post && delete_key_before_sending_) delete sorted_request[delete_key_before_sending_];
       const url_to_request = is_post ? endpoint_ : $9HbP8$make_url_with_query_params(endpoint_, sorted_request);
       const api_response = await $9HbP8$fetch_retry($9HbP8$add_version_query_params(url_to_request), {
         method: method_,
@@ -5608,9 +5615,13 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
       })
     });
   }
-  async get_listing(input_req) {
+  async get_listing({
+    id_type_: id_type_,
+    id_to_query_for_: id_to_query_for_,
+    ...input_req
+  }) {
     return await this.#cached_request({
-      endpoint_: $7fa23e2a0079eca4$var$v3_base_url + "listings/" + encodeURIComponent(input_req.listing_id),
+      endpoint_: $7fa23e2a0079eca4$var$v3_base_url + "listings/" + (id_type_ === $c20599a0d81d953a$export$5aae649db1b959fc ? "external_id/" : "") + encodeURIComponent(id_to_query_for_),
       input_req_: input_req,
       fallback_response_: () => ({
         listing_id: "",
@@ -5624,20 +5635,17 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
         "quick_links": [],
         failed: true
       }),
-      method_: "GET",
-      delete_key_before_sending_: "listing_id" // this goes into the path, but we still need to have it in the request object until the last second as we want to include it as a key when caching requests
+      method_: "GET"
     });
   }
-
-  async get_listing_products(input_req) {
-    const listing_id = input_req.listing_id; // listing_id goes into the path
-    const cloned_request = {
-      ...input_req
-    };
-    delete cloned_request["listing_id"];
+  async get_listing_products({
+    id_to_query_for_: id_to_query_for_,
+    id_type_: id_type_,
+    ...input_req_
+  }) {
     return await this.#cached_request({
-      endpoint_: $7fa23e2a0079eca4$var$v3_base_url + "listings/" + encodeURIComponent(listing_id) + "/products",
-      input_req_: input_req,
+      endpoint_: $7fa23e2a0079eca4$var$v3_base_url + "listings/" + (id_type_ === $c20599a0d81d953a$export$5aae649db1b959fc ? "external_id/" : "") + encodeURIComponent(id_to_query_for_) + "/products",
+      input_req_: input_req_,
       fallback_response_: () => ({
         "n_hits": 0,
         "displays": [],
@@ -5976,7 +5984,7 @@ function $056f6ac0a6caa919$export$5e4aed86c12acdd9({
     // After first load, always just load 20 since people might just be browsing the top ones still
     min_products_to_fetch_ : now - last_loaded < 10000 ? min_products_to_fetch_ * 5 : min_products_to_fetch_;
     // dlog("loading ", number_of_results_to_load, "products, because it was", now - last_loaded, "ms since last load");
-    const api_response = await depict_api_["listing_id" in base_part ? "get_listing_products" : "query"]({
+    const api_response = await depict_api_["query" in base_part ? "query" : "get_listing_products"]({
       cursor: get_last_cursor(),
       limit: number_of_results_to_load,
       ...base_part
@@ -7618,7 +7626,10 @@ function $dfa5b6f7c5e421df$export$5646050d516e06bc({
                 is_replace_: false,
                 event_: ev,
                 force_spa_navigation_: true,
-                listing_id_: display_accessor()?.listing_id
+                listing_query_: {
+                  id: display_accessor().listing_id,
+                  type: $c20599a0d81d953a$export$74ee7529ce0f8a00
+                }
               })), true);
               $9HbP8$insert(_el$2, () => display_accessor().title);
               $9HbP8$effect(() => $9HbP8$setAttribute(_el$2, "href", href()));
@@ -7649,11 +7660,12 @@ const $06edf3aec9073663$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<nav class=qu
 function $06edf3aec9073663$export$466cdc317043f6cb({
   quicklinks_data_: quicklinks_data_,
   router_: router_,
-  current_listing_id_: current_listing_id_,
+  id_to_query_for_: id_to_query_for_,
   breadcrumb_data_: breadcrumb_data_,
   i18n_: i18n_,
   sorting_query_param_: sorting_query_param_,
-  filter_query_param_prefix_: filter_query_param_prefix_
+  filter_query_param_prefix_: filter_query_param_prefix_,
+  id_type_: id_type_
 }) {
   let scrolling_logic_ran_for_listing_id = false;
   let last_scroll_position;
@@ -7661,11 +7673,11 @@ function $06edf3aec9073663$export$466cdc317043f6cb({
   let last_was_placeholder = false;
   let sliding_element;
   $9HbP8$createComputed(() => {
-    current_listing_id_();
+    id_to_query_for_();
     scrolling_logic_ran_for_listing_id = false;
   });
   const place_holdey_quicklinks_data = $9HbP8$createMemo(() => quicklinks_data_() || [,,,]);
-  const selected_index = $9HbP8$createMemo(() => quicklinks_data_()?.findIndex(item => item.listing_id === current_listing_id_())); // this will be -1 when viewing child categories
+  const selected_index = $9HbP8$createMemo(() => quicklinks_data_()?.findIndex(item => item[id_type_() === $c20599a0d81d953a$export$5aae649db1b959fc ? "external_id" : "listing_id"] === id_to_query_for_())); // this will be -1 when viewing child categories
   const scrollpos_per_listing_id = {};
   const mutation_plugins = [function () {
     if (!scrolling_logic_ran_for_listing_id) return;
@@ -7674,7 +7686,7 @@ function $06edf3aec9073663$export$466cdc317043f6cb({
     } = this.insert_here;
     if (scrollLeft > 0) {
       last_scroll_position = scrollLeft;
-      const current_id = $9HbP8$untrack(current_listing_id_);
+      const current_id = $9HbP8$untrack(id_to_query_for_);
       // make sure to not save position where selected item isn't in viewport
       const current_selected_index = $9HbP8$untrack(selected_index);
       const intersecting_thing = this.intersecting_items_object[current_selected_index];
@@ -7737,7 +7749,7 @@ function $06edf3aec9073663$export$466cdc317043f6cb({
             equals: false
           }), new_data => {
             const quicklinks_data = quicklinks_data_(); // this signal should have updated by now since this is a createEffect
-            const current_id = current_listing_id_();
+            const current_id = id_to_query_for_();
             if (!new_data || !quicklinks_data || !current_id) return;
             const owner = $9HbP8$getOwner();
             queueMicrotask(() => {
@@ -7785,10 +7797,9 @@ function $06edf3aec9073663$export$466cdc317043f6cb({
               // Problem: When you don't open a link in a new tab, we don't display the filter cleared toast
               // Solution: instead of not adding the state to the url, add a flag to the link if it's a sibling and then display the toast on load if the flag is set
               const is_sibling = $9HbP8$createMemo(() => {
-                const current_id = current_listing_id_();
-                return quicklinks_data_()?.some(({
-                  listing_id: listing_id
-                }) => listing_id === current_id);
+                const current_id = id_to_query_for_();
+                const lookForId = id_type_() === $c20599a0d81d953a$export$5aae649db1b959fc ? "external_id" : "listing_id";
+                return quicklinks_data_()?.some(quickLink => quickLink[lookForId] === current_id);
               });
               const href = $9HbP8$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
@@ -7809,7 +7820,10 @@ function $06edf3aec9073663$export$466cdc317043f6cb({
                     is_replace_: false,
                     event_: ev,
                     force_spa_navigation_: true,
-                    listing_id_: display_accessor()?.listing_id
+                    listing_query_: {
+                      id: display_accessor().listing_id,
+                      type: $c20599a0d81d953a$export$74ee7529ce0f8a00
+                    }
                   });
                 }), true);
                 $9HbP8$insert(_el$3, () => display_accessor()?.title || $9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
@@ -7966,13 +7980,14 @@ let $f86ba724282f6690$export$44dad306455dddf;
 })($f86ba724282f6690$export$44dad306455dddf || ($f86ba724282f6690$export$44dad306455dddf = {}));
 function $e7fce80abe608e01$export$3945d6db2dfd3d12({
   crumb_data_: crumb_data_,
-  listing_id_: listing_id_,
+  id_to_query_for_: id_to_query_for_,
   i18n_: i18n_,
   selected_filters_: selected_filters_,
   local_filter_cache_: local_filter_cache_,
   expanded_hierarchical_filters_: expanded_hierarchical_filters_,
   plp_results_: plp_results_,
-  sideways_filter_clearing_flag_: sideways_filter_clearing_flag_
+  sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
+  id_type_: id_type_
 }) {
   // If we just got opened in a new tab, clear filters instantly and remove the flag
   $e7fce80abe608e01$var$clear_if_opened_new_tab_with_sideways_url_params_flag({
@@ -7983,17 +7998,21 @@ function $e7fce80abe608e01$export$3945d6db2dfd3d12({
     i18n_: i18n_,
     sideways_filter_clearing_flag_: sideways_filter_clearing_flag_
   });
-  // Code below is for when we're already open and the user navigates to a new category
+  // The code below is for when we're already open and the user navigates to a new category
   let previous_crumb_data = $9HbP8$untrack(crumb_data_);
-  let listing_id_when_we_got_previous_data = $9HbP8$untrack(listing_id_);
+  let id_when_we_got_previous_data = {
+    id_: $9HbP8$untrack(id_to_query_for_),
+    type_: $9HbP8$untrack(id_type_)
+  };
   let allow_filter_clearing = true; // set to false when going backwards/forwards
   // temporarily disable filter clearing when going backwards/forwards
   const handler = () => allow_filter_clearing = false;
   window.addEventListener("popstate", handler); // popstate only gets called when using back/forwards button of browser or the history navigate to achieve the same, but not on pushState or replaceState
   $9HbP8$onCleanup(() => window.removeEventListener("popstate", handler));
   $9HbP8$createEffect($9HbP8$on(crumb_data_, $9HbP8$catchify1(new_crumb_data => {
-    const listing_id_of_new_data = listing_id_();
-    if (allow_filter_clearing && previous_crumb_data && new_crumb_data && listing_id_of_new_data !== listing_id_when_we_got_previous_data) {
+    const id_of_new_data = id_to_query_for_();
+    const type_of_id_of_new_data = id_type_();
+    if (allow_filter_clearing && previous_crumb_data && new_crumb_data && (id_of_new_data !== id_when_we_got_previous_data.id_ || type_of_id_of_new_data !== id_when_we_got_previous_data.type_)) {
       const previous_length = previous_crumb_data.length;
       const new_length = new_crumb_data.length;
       const went_upwards = new_length < previous_length;
@@ -8016,7 +8035,10 @@ function $e7fce80abe608e01$export$3945d6db2dfd3d12({
         sideways_filter_clearing_flag_[1](false);
       }
     }
-    listing_id_when_we_got_previous_data = listing_id_of_new_data;
+    id_when_we_got_previous_data = {
+      id_: id_of_new_data,
+      type_: type_of_id_of_new_data
+    };
     previous_crumb_data = new_crumb_data;
     if (!allow_filter_clearing) allow_filter_clearing = true;
   })));
@@ -8048,7 +8070,7 @@ function $e7fce80abe608e01$var$clear_if_opened_new_tab_with_sideways_url_params_
   });
   tracking_function_for_plp_results(plp_results_);
 }
-const $cc6f5b69378cd164$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=statement style=white-space:pre-wrap>No listingId specified, this is probably unintentional. Make sure to create (and insert) the CategoryPage *after* you have specified a listingId.`),
+const $cc6f5b69378cd164$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=statement style=white-space:pre-wrap>No \`id\` specified in \`listingQuery\`, this is probably unintentional. Make sure to create (and insert) the CategoryPage *after* you have specified a listingQuery.`),
   $cc6f5b69378cd164$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class=buttons><button class="ok major">`);
 function $cc6f5b69378cd164$export$7af06a63c5a976c9(el, listing_id, i18n_) {
   if (!(0, $9HbP8$is_debug)) return; // Just to make sure we don't show this in production
@@ -8058,7 +8080,7 @@ function $cc6f5b69378cd164$export$7af06a63c5a976c9(el, listing_id, i18n_) {
   }) => $9HbP8$runWithOwner(owner, () => $9HbP8$createEffect(() => {
     if (!document.documentElement.contains(element)) return;
     if (!listing_id()) {
-      const warning = "No listingId specified, this is probably unintentional. Make sure to create (and insert) the CategoryPage *after* you have specified a listingId.";
+      const warning = "No `id` specified in `listingQuery`, this is probably unintentional. Make sure to create (and insert) the CategoryPage *after* you have specified a listingQuery.";
       $9HbP8$dwarn(warning);
       const {
         close_toast_: close_toast_
@@ -8113,8 +8135,8 @@ const $df5d81d0fe61ff21$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=pr
   $df5d81d0fe61ff21$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class="depict plp category"><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/><!$><!/>`);
 function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
   depict_api_: depict_api_,
-  listing_id_: listing_id_,
-  meta_title_suffix_: meta_title_suffix_,
+  id_to_query_for_: id_to_query_for_,
+  id_type_: id_type_,
   current_sorting_: current_sorting_,
   min_products_to_fetch_: min_products_to_fetch_,
   category_filters_open_: category_filters_open_,
@@ -8167,7 +8189,8 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
       merchant: merchant_(),
       market: market_(),
       locale: backend_locale_(),
-      listing_id: listing_id_(),
+      id_to_query_for_: id_to_query_for_(),
+      id_type_: id_type_(),
       ...(f.length ? {
         filters: f
       } : {}),
@@ -8179,8 +8202,8 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
   // Make "Get products in listing" request to get products in listing
   const [plp_products_] = $9HbP8$createResource(products_query_base_,
   // only first page of results, unless the history state says we should load more (can't do that in load more thing, I tested, they need to be added at once for the browser to not give up scroll restoration)
-  $9HbP8$catchify1(base_query => $641bba2917fe862b$export$cc42dd29bf655ab6({
-    id_: $9HbP8$untrack(listing_id_),
+  $9HbP8$catchify(base_query => $641bba2917fe862b$export$cc42dd29bf655ab6({
+    id_: $9HbP8$untrack(id_to_query_for_),
     scroll_restoration_data_: scroll_restoration_data_,
     min_products_to_fetch_: min_products_to_fetch_,
     make_request_: (limit, cursor) => depict_api_.get_listing_products({
@@ -8195,10 +8218,11 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     merchant: merchant_(),
     market: market_(),
     locale: backend_locale_(),
-    listing_id: listing_id_()
+    id_to_query_for_: id_to_query_for_(),
+    id_type_: id_type_()
   }));
   // Make "Get Listing" request to get quicklinks, breadcrumbs, title, etc
-  const [plp_meta] = $9HbP8$createResource(meta_query_base, $9HbP8$catchify1(query => depict_api_.get_listing(query)));
+  const [plp_meta] = $9HbP8$createResource(meta_query_base, $9HbP8$catchify(query => depict_api_.get_listing(query)));
   const available_sortings_ = $9HbP8$createMemo(() => plp_products_()?.sorts?.map(sort => ({
     ...sort,
     order: sort.order ?? "desc"
@@ -8207,13 +8231,6 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
   const title = $9HbP8$createMemo(() => plp_meta()?.title);
   const crumb_data_ = $df5d81d0fe61ff21$var$add_us_to_crumbs(plp_meta, title);
   const quicklinks_data_ = $9HbP8$createMemo(() => plp_meta()?.quick_links);
-  const meta_tag_data_ = $9HbP8$createMemo(() => {
-    if (plp_meta()?.replace_meta_tags) return {
-      title: plp_meta()?.title + (meta_title_suffix_() || ""),
-      description: plp_meta()?.description
-    };
-  });
-  $9HbP8$edit_current_page_meta_tags(meta_tag_data_);
   const [sort_or_filter_open_, set_sort_or_filter_open_] = $9HbP8$createSignal(false);
   const [desktop_filter_elements_, set_desktop_filter_elements] = $9HbP8$createSignal();
   const formatted_number_of_results_ = $511cc0abd9a64ce8$export$92f2da32c6e7e7ee({
@@ -8283,7 +8300,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     }));
     results_for = make_product_count_();
   } else {
-    $9HbP8$report(new Error("Unrecognised category_title_type, UI will look messed up"), "error");
+    $9HbP8$report1(new Error("Unrecognised category_title_type, UI will look messed up"), "error");
     results_for = $9HbP8$getNextElement($df5d81d0fe61ff21$var$_tmpl$2);
   }
   const filters_opener = $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
@@ -8305,17 +8322,17 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
     ...extra_sort_and_filter_args_
   });
-  $9HbP8$catchify1((0, $641bba2917fe862b$export$6e49da55e449af7c))({
+  $9HbP8$catchify((0, $641bba2917fe862b$export$6e49da55e449af7c))({
     scroll_restoration_data_: scroll_restoration_data_,
     last_result_in_viewport_: last_result_in_viewport_,
-    id_: listing_id_,
+    id_: id_to_query_for_,
     can_write_scroll_restoration_: can_write_scroll_restoration_
   });
   on_filters_constructed_?.();
   $9HbP8$createComputed(() => {
     if (plp_products_.loading) set_can_write_scroll_restoration(false);else if (plp_products_()) set_can_write_scroll_restoration(true);
   });
-  $9HbP8$createRenderEffect($9HbP8$catchify1(async () => {
+  $9HbP8$createRenderEffect($9HbP8$catchify(async () => {
     const slim = is_slim_();
     const only_show_filters_opener = only_show_filters_opener_?.();
     const owner = $9HbP8$getOwner();
@@ -8337,14 +8354,15 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     available_filters_: available_filters_
   });
   $e7fce80abe608e01$export$3945d6db2dfd3d12({
-    listing_id_: listing_id_,
+    id_to_query_for_: id_to_query_for_,
     crumb_data_: crumb_data_,
     i18n_: i18n_,
     selected_filters_: selected_filters_,
     local_filter_cache_: local_filter_cache_,
     expanded_hierarchical_filters_: expanded_hierarchical_filters_,
     plp_results_: plp_products_,
-    sideways_filter_clearing_flag_: sideways_filter_clearing_flag_
+    sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
+    id_type_: id_type_
   });
   get_breadcrumb_accessor_?.(crumb_data_);
   get_quicklinks_accessor_?.(quicklinks_data_);
@@ -8367,7 +8385,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
       [_el$28, _co$11] = $9HbP8$getNextMarker(_el$27.nextSibling),
       _el$29 = _el$28.nextSibling,
       [_el$30, _co$12] = $9HbP8$getNextMarker(_el$29.nextSibling);
-    $9HbP8$use(el => process.env.NODE_ENV === "development" && $cc6f5b69378cd164$export$7af06a63c5a976c9(el, listing_id_, i18n_), _el$13);
+    $9HbP8$use(el => process.env.NODE_ENV === "development" && $cc6f5b69378cd164$export$7af06a63c5a976c9(el, id_to_query_for_, i18n_), _el$13);
     $9HbP8$insert(_el$14, $9HbP8$createComponent((0, $9HbP8$Show), {
       get when() {
         return show_breadcrumbs_();
@@ -8389,7 +8407,8 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
       get children() {
         return $9HbP8$createComponent((0, $06edf3aec9073663$export$466cdc317043f6cb), {
           quicklinks_data_: quicklinks_data_,
-          current_listing_id_: listing_id_,
+          id_to_query_for_: id_to_query_for_,
+          id_type_: id_type_,
           router_: router_,
           breadcrumb_data_: crumb_data_,
           i18n_: i18n_,
@@ -8443,7 +8462,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
               sort_or_filter_open_: sort_or_filter_open_,
               desktop_filter_elements_: desktop_filter_elements_,
               content_blocks_by_row_: content_blocks_by_row_,
-              id_currently_querying_for_: listing_id_,
+              id_currently_querying_for_: id_to_query_for_,
               no_results_options_: {
                 selected_filters_: selected_filters_,
                 expanded_hierarchical_filters_: expanded_hierarchical_filters_,
@@ -8489,7 +8508,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
  * Adds the current page as last breadcrumb to the breadcrumb trail
  */
 function $df5d81d0fe61ff21$var$add_us_to_crumbs(plp_meta, title) {
-  const href_accessor = $9HbP8$use_href_accessor1();
+  const href_accessor = $9HbP8$use_href_accessor();
   return $9HbP8$createMemo(() => {
     const api_value = plp_meta()?.breadcrumbs;
     if (!api_value) return api_value;
@@ -8505,6 +8524,12 @@ function $df5d81d0fe61ff21$var$add_us_to_crumbs(plp_meta, title) {
       },
       get slug() {
         return plp_meta().slug;
+      },
+      get listing_type() {
+        return plp_meta().listing_type;
+      },
+      get external_id() {
+        return plp_meta().external_id;
       }
     }];
   });
@@ -8677,8 +8702,7 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
   #localization_signal = $9HbP8$createSignal();
   #merchant_signal = $9HbP8$createSignal();
   #market_signal = $9HbP8$createSignal();
-  #listing_id_signal = $9HbP8$createSignal("");
-  #meta_title_suffix_ = $9HbP8$createSignal();
+  #listing_query_signal = $9HbP8$createSignal({});
   #disable_override_listing_id = $9HbP8$createSignal();
   static #keys_constructed_with = /*@__PURE__*/new Set();
   get localization() {
@@ -8688,11 +8712,11 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
   set localization(locale_obj) {
     this.#localization_signal[1](locale_obj);
   }
-  get listing_id() {
-    return this.#listing_id_signal[0]();
+  get listing_query() {
+    return this.#listing_query_signal[0]();
   }
-  set listing_id(id) {
-    this.#listing_id_signal[1](id);
+  set listing_query(query) {
+    this.#listing_query_signal[1](query);
   }
   get merchant() {
     return this.#merchant_signal[0]();
@@ -8706,12 +8730,6 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
   set market(market) {
     this.#market_signal[1](market);
   }
-  get meta_title_suffix() {
-    return this.#meta_title_suffix_[0]();
-  }
-  set meta_title_suffix(new_suffix) {
-    this.#meta_title_suffix_[1](new_suffix);
-  }
   get disable_override_listing_id() {
     return this.#disable_override_listing_id[0]();
   }
@@ -8730,7 +8748,7 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
     on_navigation: on_navigation,
     display_transformers: display_transformers,
     unique_instance_key_for_state = "",
-    listing_id_state_key: listing_id_state_key,
+    listing_query_state_key: listing_query_state_key,
     ...props_on_class
   }) {
     const owner = $9HbP8$getOwner() || $9HbP8$createRoot(() => $9HbP8$getOwner()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
@@ -8740,7 +8758,7 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
         throw new Error("You can only have one instance of DepictCategory with the same uniqueInstanceKeyForState");
       Object.assign(this, props_on_class); // set initial signal values
       $90980bd87c9960f9$export$5162a71f252e6122();
-      this.#router = new (0, $4fd2ba03703a7d92$export$7e1297a3a19f10d8)("hard_navigation", listing_id_state_key);
+      this.#router = new (0, $4fd2ba03703a7d92$export$7e1297a3a19f10d8)("hard_navigation", listing_query_state_key);
       if (on_navigation) this.#router.on_navigation_ = on_navigation;
       const override_listing_id_query_param_names_ = ["listing_id_" + unique_instance_key_for_state, "listing_id"]; // If you're wondering why this is an array https://gitlab.com/depict-ai/depict.ai/-/merge_requests/7958#note_1511700842
       const sorting_query_param_ = "sorting" + unique_instance_key_for_state;
@@ -8800,14 +8818,16 @@ function $961b5c64bef4662f$export$e2bf8ce7779e827e(props) {
     category_title: category_title
   } = props;
   const shared_properties = $961b5c64bef4662f$var$get_shared_properties(depict_category);
+  const diffableListingQuery = $9HbP8$createMemo(() => Object.values(depict_category.listing_query || {}).join(""));
   return $16b52438165aafe2$export$23fca46f3143581f(() => {
     $9HbP8$createEffect(prev => {
       // this is here (and not on DepictCategory) so that people also know when PageReplacer removes the page, it's intended to help people replace their own content when a depict page is navigated, see https://depictaiworkspace.slack.com/archives/C04M8MGCF3K/p1691670636155369
-      const id = depict_category.listing_id; // <- this is a reactive getter
-      $d8dbf52fea1773e2$export$f50b88e2a00918b5(props.on_listing_id_change)(id, prev);
-      return id;
+      diffableListingQuery(); // Only re-run this effect when the listing query *actually* changes (not just the object reference)
+      const newId = $9HbP8$untrack(() => depict_category.listing_query);
+      $d8dbf52fea1773e2$export$f50b88e2a00918b5(props.on_listing_query_change)(newId, prev);
+      return newId;
     });
-    $9HbP8$onCleanup(() => $d8dbf52fea1773e2$export$f50b88e2a00918b5(props.on_listing_id_change)());
+    $9HbP8$onCleanup(() => $d8dbf52fea1773e2$export$f50b88e2a00918b5(props.on_listing_query_change)());
     const grid_spacing_override = $9HbP8$createMemo(() => {
       const {
         grid_spacing: grid_spacing
@@ -8848,8 +8868,11 @@ function $961b5c64bef4662f$export$e2bf8ce7779e827e(props) {
       depict_api_: depict_api_,
       min_products_to_fetch_: $961b5c64bef4662f$var$min_products_to_fetch_,
       local_filter_cache_: local_filter_cache_,
-      listing_id_: $9HbP8$createMemo(() => !depict_category.disable_override_listing_id && override_listing_id_accessor_() || depict_category.listing_id),
-      meta_title_suffix_: () => depict_category.meta_title_suffix,
+      id_to_query_for_: $9HbP8$createMemo(() => !depict_category.disable_override_listing_id && override_listing_id_accessor_() || depict_category.listing_query.id),
+      id_type_: $9HbP8$createMemo(() => {
+        if (!depict_category.disable_override_listing_id && override_listing_id_accessor_()) return $c20599a0d81d953a$export$74ee7529ce0f8a00;
+        return depict_category.listing_query.type;
+      }),
       i18n_: i18n_,
       show_quicklinks_: $9HbP8$createMemo(() => props.show_quicklinks ?? true),
       category_title_: category_title,
@@ -8909,13 +8932,16 @@ function $961b5c64bef4662f$export$de035477d6fef996({
     sorting_query_param_: sorting_query_param_,
     filter_query_param_prefix_: filter_query_param_prefix_
   } = $961b5c64bef4662f$var$get_shared_properties(depict_category);
+  const id_to_query_for_ = $9HbP8$createMemo(() => depict_category.listing_query.id);
+  const id_type_ = $9HbP8$createMemo(() => depict_category.listing_query.type);
   return $9HbP8$createComponent($961b5c64bef4662f$var$InExternalAreaDiv, {
     get children() {
       return $06edf3aec9073663$export$466cdc317043f6cb({
         i18n_: i18n_,
         quicklinks_data_: quicklinks_data_,
         router_: router_,
-        current_listing_id_: () => depict_category.listing_id,
+        id_type_: id_type_,
+        id_to_query_for_: id_to_query_for_,
         breadcrumb_data_: breadcrumb_data_,
         sorting_query_param_: sorting_query_param_,
         filter_query_param_prefix_: filter_query_param_prefix_
@@ -10047,7 +10073,7 @@ function $cea52f6b24092f05$export$e872e2339fb04a7f({
           const _el$3 = $9HbP8$getNextElement($cea52f6b24092f05$var$_tmpl$3);
           $9HbP8$insert(_el$3, $9HbP8$createMemo(() => {
             if (input_obj().type === "content") return i18n_.content_();
-            if (input_obj().category_type === "brand") return i18n_.brand_();
+            if (input_obj().listing_type === "brand") return i18n_.brand_();
             return i18n_.category_();
           }));
           return _el$3;
@@ -10307,7 +10333,7 @@ function $15f380f0ce2812cc$var$actual_navigation_working_on_fake_data({
         url.searchParams.set(search_query_param_name_, title);
         return $92a48aea6a9364d8$export$1efe1013da60d0e4(e, url.href);
       }));
-    } else if (selected_entry?.type == "category" || selected_entry?.type === "content") $9HbP8$runWithOwner(owner, () => override_on_enter_for_this_entry(e => {
+    } else if (selected_entry?.type == "listing" || selected_entry?.type === "content") $9HbP8$runWithOwner(owner, () => override_on_enter_for_this_entry(e => {
       const {
         page_url: page_url
       } = selected_entry;
@@ -10832,7 +10858,7 @@ function $793905995512612d$export$c05a196222ba1302({
   suggestions_: suggestions_,
   children: children
 }) {
-  const category_suggestions_ = $9HbP8$createMemo(() => suggestions_()?.suggestions.filter(s => s.type === "category"));
+  const category_suggestions_ = $9HbP8$createMemo(() => suggestions_()?.suggestions.filter(s => s.type === "listing"));
   return $9HbP8$createComponent((0, $9HbP8$Show), {
     get when() {
       return category_suggestions_()?.length || suggestions_.loading;