@depict-ai/react-ui 0.0.105 → 0.0.106

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import { BaseProductListingConfig, BaseProviderConfig, BaseSearchProviderConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholderProps, TextPlaceholderProps } from "@depict-ai/ui";
 import { Display } from "@depict-ai/utilishared";
 import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
+import { DPC } from "@depict-ai/dpc";
 import { Locale } from "@depict-ai/ui/locales";
-export const version = "0.0.105";
+export const version = "0.0.106";
 interface PLPConfig<T extends Display> extends BaseProductListingConfig {
     /**
      * The product card to use for rendering products.
@@ -20,6 +21,32 @@ export interface DepictProductCardProps<T extends Display> {
  * Depict product card to use for rendering products.
  */
 export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
+interface UsePerformanceClientReturn {
+    dpc: DPC;
+}
+/**
+ * Hook used to access the Depict Performance Client.
+ * Calls on the returned DPC instance can not be done server side.
+ * @example
+ * Send an add-to-cart event
+ * ```tsx
+ * import { useEffect } from "react";
+ * import { usePerformanceClient } from "@depict-ai/react-ui";
+ *
+ * const ProductPage = ({ productId }) => {
+ *   const { dpc } = usePerformanceClient();
+ *
+ *   useEffect(() => {
+ *     dpc.setProductId(productId);
+ *   }, [dpc]);
+ *
+ *   return <div>Showing product {productId}</div>;
+ * }
+ * ```
+ * @returns {UsePerformanceClientReturn}
+}
+ */
+export const usePerformanceClient: () => UsePerformanceClientReturn;
 /**
  * relativeUrl: The relative url to navigate to.
  * replace: Whether to replace the current url or push a new one.
@@ -322,7 +349,7 @@ interface UseSearchModalReturn {
  *   );
  * };
  * ```
- * @returns {JSX.Element}
+ * @returns {UseSearchModalReturn}
  */
 export function useSearchModal(params?: UseSearchModalParams): UseSearchModalReturn;
 interface SearchFieldProps {
@@ -380,7 +407,7 @@ interface UseSearchFieldReturn {
  *   );
  * };
  * ```
- * @returns {JSX.Element}
+ * @returns {UseSearchFieldReturn}
  */
 export const useSearchField: (props?: SearchFieldProps) => UseSearchFieldReturn;
 /**

package/dist/main.js

@@ -6,6 +6,8 @@ var $4GYXz$depictaiuilocales = require("@depict-ai/ui/locales");
 var $4GYXz$solidjsweb = require("solid-js/web");
 var $4GYXz$reactjsxruntime = require("react/jsx-runtime");
 var $4GYXz$reactdom = require("react-dom");
+var $4GYXz$solidjsstore = require("solid-js/store");
+var $4GYXz$depictaidpc = require("@depict-ai/dpc");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -21,6 +23,7 @@ $parcel$export(module.exports, "ImagePlaceholder", () => $df522c8a81ed5a01$expor
 $parcel$export(module.exports, "TextPlaceholder", () => $7c8b440edc188ad5$export$89c6019e4baa40b1);
 $parcel$export(module.exports, "useSearchModal", () => $ae73b15c325f1b21$export$912994940e660d32);
 $parcel$export(module.exports, "useSearchField", () => $913da7f4d0bc77f2$export$9bb30bbe003b82e0);
+$parcel$export(module.exports, "usePerformanceClient", () => $25c0a91312868994$export$38b98fae14bd1f64);
 $parcel$export(module.exports, "CategoryTitle", () => $b03e4eee8610ebbe$re_export$CategoryTitle);
 $parcel$export(module.exports, "EmbeddedNumProducts", () => $b03e4eee8610ebbe$re_export$EmbeddedNumProducts);
 $parcel$export(module.exports, "fetchDepictRecommendations", () => $b03e4eee8610ebbe$re_export$fetchDepictRecommendations);
@@ -28,7 +31,7 @@ $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fb
 $parcel$export(module.exports, "Navigation", () => $b742053c966024b4$export$b8a61e5c71402559);
 /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
 // Note, if you add an export here, also add one in src-server/main.ts
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.105";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.106";
 
 
 
@@ -37,67 +40,21 @@ const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.105";
 
 
 
-let $6319748b4f0426f0$var$set = false;
-let $6319748b4f0426f0$var$padding_animation;
-function $6319748b4f0426f0$export$6453cbc34515a94d(is_search_page) {
-    if ($6319748b4f0426f0$var$set) return; // Just being safe
-    $6319748b4f0426f0$var$set = true;
-    let should_use_old_scroll = false;
-    const old_scrollTo = window.scrollTo;
-    window.scrollTo = (...args)=>{
-        if (should_use_old_scroll || process.env.__NEXT_SCROLL_RESTORATION || !is_search_page(location)) return Reflect.apply(old_scrollTo, window, args);
-        else should_use_old_scroll = true;
-    };
-    addEventListener("popstate", (0, $4GYXz$depictaiutilishared.catchify)(()=>{
-        if (!is_search_page(location)) {
-            $6319748b4f0426f0$var$removeLotsOfPadding(); // Just making sure
-            return;
-        }
-        should_use_old_scroll = false;
-        $6319748b4f0426f0$var$addLotsOfPadding();
-        (0, $4GYXz$depictaiutilishared.observer).wait_for_element(".depict.plp .listing-page").then(()=>{
-            $6319748b4f0426f0$var$removeLotsOfPadding();
-        });
-    }));
-    (0, $4GYXz$depictaiutilishared.history_replacer)(()=>{
-        (0, $4GYXz$depictaiutilishared.queueMacroTask)(()=>{
-            $6319748b4f0426f0$var$removeLotsOfPadding();
-        });
-    }, false);
-    window?.next?.router?.events?.on("routeChangeStart", ()=>{
-        $6319748b4f0426f0$var$addLotsOfPadding();
-    });
-}
-/*
- Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
- The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
- */ function $6319748b4f0426f0$var$addLotsOfPadding() {
-    if ($6319748b4f0426f0$var$padding_animation) return; // We're already showing a bunch of padding
-    $6319748b4f0426f0$var$padding_animation = document.body.animate({
-        paddingBottom: (history.state?.search_scroll_restoration_data?.[0]?.min_results_loaded || 150) * 500 + "px",
-        offset: 0
-    }, 1);
-    $6319748b4f0426f0$var$padding_animation.pause();
-}
-function $6319748b4f0426f0$var$removeLotsOfPadding() {
-    if ($6319748b4f0426f0$var$padding_animation) {
-        $6319748b4f0426f0$var$padding_animation.play();
-        $6319748b4f0426f0$var$padding_animation = undefined;
-    }
-}
-
 
 
 const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
     search: null,
     category: null,
     api: null,
+    dpc: null,
     userId: undefined,
     sessionId: undefined,
     metaData: undefined,
-    category_path: null,
+    known_category_paths: new Set(),
     search_page_path_: (0, $4GYXz$solidjs.createSignal)(),
-    required_state_set_: (0, $4GYXz$solidjs.createSignal)(false)
+    required_state_set_: (0, $4GYXz$solidjs.createSignal)(false),
+    search_page_in_dom: (0, $4GYXz$solidjs.createSignal)(false),
+    category_page_in_dom: (0, $4GYXz$solidjs.createSignal)(false)
 };
 
 
@@ -107,7 +64,6 @@ const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
 
 
 
-
 let $b4d0d98857ed9934$var$run_on_href_change;
 let $b4d0d98857ed9934$var$old_href = location.href;
 function $b4d0d98857ed9934$export$74f3924c5027fe1d(cb) {
@@ -119,19 +75,19 @@ function $b4d0d98857ed9934$export$74f3924c5027fe1d(cb) {
     $b4d0d98857ed9934$var$run_on_href_change?.(href);
     $b4d0d98857ed9934$var$old_href = href;
 }));
-const $b4d0d98857ed9934$export$775e6b3892b5ad52 = (url)=>url.pathname == (0, $4GYXz$solidjs.untrack)((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
-const $b4d0d98857ed9934$export$92a8f8b3c630fa0d = (url)=>{
-    return $b4d0d98857ed9934$export$775e6b3892b5ad52(url) || url.pathname === (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category_path;
-};
-function $b4d0d98857ed9934$export$f6e64e17bd69eeef(solid_component, props, wrapper_type = "div", wrapper_style = {}, react_render_handler) {
+const $b4d0d98857ed9934$export$775e6b3892b5ad52 = (url = location)=>url.pathname == (0, $4GYXz$solidjs.untrack)((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
+const $b4d0d98857ed9934$export$30c8a12df09be0e4 = (url = location)=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).known_category_paths.has(url.pathname);
+function $b4d0d98857ed9934$export$f6e64e17bd69eeef(solid_component, props, wrapper_type = "div", wrapper_style = {}) {
     const [portals, set_portals] = (0, $4GYXz$react.useState)([]);
     const wrapper_element_ref = (0, $4GYXz$react.useRef)();
+    const [[store, write_store]] = (0, $4GYXz$react.useState)(()=>(0, $4GYXz$solidjsstore.createStore)(props));
+    // Update store when props change
+    write_store((0, $4GYXz$solidjsstore.reconcile)(props));
     (0, $4GYXz$react.useEffect)(()=>{
         const wrapper_element = wrapper_element_ref.current;
-        const dispose = (0, $4GYXz$solidjsweb.render)(()=>solid_component(props, set_portals), wrapper_element);
+        const dispose = (0, $4GYXz$solidjsweb.render)(()=>solid_component(store, set_portals), wrapper_element);
         return dispose;
     }, []);
-    react_render_handler?.(props);
     return (0, $4GYXz$react.createElement)(wrapper_type, {
         ref: wrapper_element_ref,
         style: wrapper_style
@@ -151,17 +107,14 @@ function $b4d0d98857ed9934$export$e5139bbbb9a05035(component, is_set = (0, $0b7c
     };
 }
 async function $b4d0d98857ed9934$export$79c79419c1ef0081({ display: display , component_portals: component_portals , set_portals: set_portals , react_template: react_template  }) {
+    let set_react_has_ran_hooks;
+    const react_has_ran_hooks = new Promise((r)=>set_react_has_ran_hooks = r);
     const solid_container = document.createElement("div");
-    const react_has_rendered = new Promise((r)=>{
-        const m_o = new MutationObserver(()=>{
-            m_o.disconnect();
-            r();
-        });
-        m_o.observe(solid_container, {
-            childList: true
-        });
-    });
-    const reactProductCard = (0, $4GYXz$reactjsxruntime.jsx)(react_template, {
+    const reactProductCard = (0, $4GYXz$reactjsxruntime.jsx)((props)=>{
+        // Sneak in a hook into their product card component
+        (0, $4GYXz$react.useEffect)(set_react_has_ran_hooks, []);
+        return react_template(props);
+    }, {
         display: display
     });
     const portal = $4GYXz$reactdom.createPortal(reactProductCard, solid_container);
@@ -176,23 +129,144 @@ async function $b4d0d98857ed9934$export$79c79419c1ef0081({ display: display , co
             ...component_portals
         ]);
     });
-    await react_has_rendered; // wait for react to have finish portaling the elements so that the placeholders get removed once we have an actual result and so that the PLP code knows it has a placeholder when this is a placeholder rendering
+    await react_has_ran_hooks; // After react has created elements it still takes some time to actually connect the refs and run the hooks. We don't want to replace placeholders before then.
     return [
         solid_container
     ];
 }
 
 
+
+
+let $6319748b4f0426f0$var$set = false;
+let $6319748b4f0426f0$var$padding_animation;
+function $6319748b4f0426f0$export$6453cbc34515a94d() {
+    const are_on_search_or_category_page = ()=>(0, $b4d0d98857ed9934$export$775e6b3892b5ad52)() || (0, $b4d0d98857ed9934$export$30c8a12df09be0e4)();
+    if ($6319748b4f0426f0$var$set) return; // Just being safe
+    $6319748b4f0426f0$var$set = true;
+    let should_use_old_scroll = false;
+    const old_scrollTo = window.scrollTo;
+    const next_router_event_target = $6319748b4f0426f0$var$make_next_router_event_target(); // So we can use once: true
+    window.scrollTo = (...args)=>{
+        if (should_use_old_scroll || process.env.__NEXT_SCROLL_RESTORATION || !are_on_search_or_category_page()) return Reflect.apply(old_scrollTo, window, args);
+        else should_use_old_scroll = true;
+    };
+    // When popping state, add padding in the same event as the "popstate" event (required) and then remove it once our stuff is in the DOM
+    addEventListener("popstate", (0, $4GYXz$depictaiutilishared.catchify)(()=>{
+        if (!are_on_search_or_category_page()) {
+            $6319748b4f0426f0$var$removeLotsOfPadding(); // Just making sure
+            return;
+        }
+        should_use_old_scroll = false;
+        const [get_search_page_in_dom] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_in_dom;
+        const [get_category_page_in_dom] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category_page_in_dom;
+        const search_page_in_dom = (0, $4GYXz$solidjs.untrack)(get_search_page_in_dom);
+        const category_page_in_dom = (0, $4GYXz$solidjs.untrack)(get_category_page_in_dom);
+        const new_is_search = (0, $b4d0d98857ed9934$export$775e6b3892b5ad52)();
+        const new_is_category = (0, $b4d0d98857ed9934$export$30c8a12df09be0e4)();
+        let accessor_to_wait_for;
+        if (search_page_in_dom && new_is_search || category_page_in_dom && new_is_category) {
+            // Already on the page we're going to
+            $6319748b4f0426f0$var$removeLotsOfPadding();
+            return;
+        }
+        $6319748b4f0426f0$var$addLotsOfPadding();
+        if (new_is_search && category_page_in_dom) accessor_to_wait_for = get_search_page_in_dom;
+        else if (new_is_category && search_page_in_dom) accessor_to_wait_for = get_category_page_in_dom;
+        else accessor_to_wait_for = new_is_search ? get_search_page_in_dom : get_category_page_in_dom;
+        (0, $4GYXz$solidjs.createRoot)((dispose)=>(0, $4GYXz$solidjs.createEffect)(()=>{
+                if (accessor_to_wait_for()) {
+                    $6319748b4f0426f0$var$removeLotsOfPadding();
+                    dispose();
+                }
+            }));
+    }));
+    window?.next?.router?.events?.on(// We have to use the actual next router here, if we'd use next_router_event_target for this window.event wouldn't be the popstate anymore
+    "routeChangeStart", (0, $4GYXz$depictaiutilishared.catchify)(()=>{
+        // this is for when we navigate to a new page (replaceState or pushState)
+        // We need to ensure that the page doesn't get shorter before the new history entry has been pushed
+        // There is beforeHistoryChange which fires literally the line of code before the history API is called, so we make the page long until a task after that
+        // The challenge is knowing on routeChangeStart if we're in a popstate (back/forward) or a pushState/replaceState
+        // We use the deprecated window.event property for that
+        // This is catchified, so we should see in sentry when it starts failing if browsers ever remove it???
+        if (window.event instanceof PopStateEvent) return;
+        $6319748b4f0426f0$var$addLotsOfPadding();
+        next_router_event_target.addEventListener("beforeHistoryChange", (0, $4GYXz$depictaiutilishared.catchify)(()=>(0, $4GYXz$depictaiutilishared.queueMacroTask)($6319748b4f0426f0$var$removeLotsOfPadding)), {
+            once: true
+        });
+    }));
+}
+/*
+ Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
+ The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
+ */ function $6319748b4f0426f0$var$addLotsOfPadding() {
+    if ($6319748b4f0426f0$var$padding_animation) return; // We're already showing a bunch of padding
+    $6319748b4f0426f0$var$padding_animation = document.body.animate({
+        paddingBottom: (history.state?.search_scroll_restoration_data?.[0]?.min_results_loaded || 150) * 500 + "px",
+        offset: 0
+    }, 1);
+    $6319748b4f0426f0$var$padding_animation.pause();
+}
+function $6319748b4f0426f0$var$removeLotsOfPadding() {
+    if ($6319748b4f0426f0$var$padding_animation) {
+        $6319748b4f0426f0$var$padding_animation.play();
+        $6319748b4f0426f0$var$padding_animation = undefined;
+    }
+}
+function $6319748b4f0426f0$var$make_next_router_event_target() {
+    const next_router_event_target = new EventTarget();
+    window?.next?.router?.events?.on("beforeHistoryChange", ()=>next_router_event_target.dispatchEvent(new CustomEvent("beforeHistoryChange")));
+    return next_router_event_target;
+}
+
+
+
+
 const $bc389476eeb2b615$export$599d4515591ef232 = (relativeUrl, isReplace)=>{
-    const shallow = (0, $b4d0d98857ed9934$export$92a8f8b3c630fa0d)(location);
+    let Page;
+    (function(Page) {
+        Page[Page["OTHER"] = 0] = "OTHER";
+        Page[Page["SEARCH"] = 1] = "SEARCH";
+        Page[Page["CATEGORY"] = 2] = "CATEGORY";
+    })(Page || (Page = {}));
+    const current_page = (0, $b4d0d98857ed9934$export$775e6b3892b5ad52)() ? Page.SEARCH : (0, $b4d0d98857ed9934$export$30c8a12df09be0e4)() ? Page.CATEGORY : Page.OTHER;
+    const target_u_o = new URL(relativeUrl, location.origin);
+    const target_page = (0, $b4d0d98857ed9934$export$775e6b3892b5ad52)(target_u_o) ? Page.SEARCH : (0, $b4d0d98857ed9934$export$30c8a12df09be0e4)(target_u_o) ? Page.CATEGORY : Page.OTHER;
     window.next.router[isReplace ? "replace" : "push"](relativeUrl, undefined, {
-        shallow: shallow,
+        shallow: current_page === target_page,
         scroll: true
     });
 };
 
 
 
+
+const $25c0a91312868994$export$38b98fae14bd1f64 = ()=>{
+    if (!(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).dpc) throw new Error("Depict tracking is not configured. Wrap your app in a DepictProvider.");
+    return {
+        dpc: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).dpc
+    };
+};
+const $25c0a91312868994$export$47e064413edabf36 = (merchant, market, userId, sessionId)=>{
+    if (!merchant) return;
+    try {
+        let { dpc: dpc  } = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e);
+        if (!dpc) dpc = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).dpc = new (0, $4GYXz$depictaidpc.DPC)(merchant, {
+            market: market
+        });
+        dpc.merchant = merchant;
+        dpc.market = market;
+        dpc.setUserId(userId);
+        dpc.setSessionId(sessionId);
+    } catch (e) {
+        // Make sure to not break the users app if we throw
+        queueMicrotask(()=>{
+            throw e;
+        });
+    }
+};
+
+
 function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
     const { children: children , navigateFunction: navigateFunction , market: market , merchant: merchant , locale: locale , metaData: metaData , userId: userId , sessionId: sessionId  } = props;
     const usedLocale = locale ?? (0, $4GYXz$depictaiuilocales.en);
@@ -201,13 +275,13 @@ function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
     (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).userId = userId;
     (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).sessionId = sessionId;
     (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).metaData = metaData;
+    (0, $25c0a91312868994$export$47e064413edabf36)(merchant, market, userId, sessionId);
     if (!market || !merchant) {
         (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](false);
         return (0, $4GYXz$react.createElement)((0, $4GYXz$react.Fragment), null, children);
     }
     try {
-        const { search: search , category: category , api: api  } = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e);
-        const [get_search_page_path, set_search_page_path] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_;
+        const { search: search , category: category , api: api , search_page_path_: [get_search_page_path, set_search_page_path]  } = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e);
         if (typeof window?.next?.router === "undefined" && !navigateFunction) throw new Error("You must provide a navigateFunction when not using Next.js.");
         const on_navigation = ({ is_replace: is_replace , new_url: new_url  })=>{
             const new_relative_url = new_url.origin === location.origin ? new_url.pathname + new_url.search + new_url.hash : new_url.href; // bail out of making URL relative if it's not possible
@@ -252,7 +326,7 @@ function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
             category.merchant = merchant;
             category.localization = usedLocale;
         }
-        (0, $6319748b4f0426f0$export$6453cbc34515a94d)((0, $b4d0d98857ed9934$export$92a8f8b3c630fa0d));
+        (0, $6319748b4f0426f0$export$6453cbc34515a94d)();
         (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](true);
     } catch (e) {
         // Make sure to not break the users app if we throw
@@ -298,6 +372,10 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
     const update_updating_blocked_signal = ()=>{
         set_search_query_updating_blocked_signal(!(0, $b4d0d98857ed9934$export$775e6b3892b5ad52)(location));
     };
+    const [, set_search_page_in_dom] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_in_dom;
+    // We should only get here once react already has a DOM node which means we should be in the DOM
+    set_search_page_in_dom(true);
+    (0, $4GYXz$solidjs.onCleanup)(()=>set_search_page_in_dom(false));
     // react is really slow with disposing components, we want to avoid a flash of another search query when you click on a product and navigate away
     (0, $b4d0d98857ed9934$export$74f3924c5027fe1d)(update_updating_blocked_signal); // if we navigate, re-check
     (0, $4GYXz$solidjs.createComputed)(()=>{
@@ -307,8 +385,8 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
     const component_portals = new Set();
     return (0, $4GYXz$depictaiui.SearchPage)({
         // Default config goes here
-        include_input_field: props.includeInputField ?? true,
-        cols_at_size: props.columnsAtSize ?? [
+        include_input_field: (0, $4GYXz$solidjs.untrack)(()=>props.includeInputField) ?? true,
+        cols_at_size: (0, $4GYXz$solidjs.untrack)(()=>props.columnsAtSize) ?? [
             [
                 4
             ],
@@ -321,11 +399,11 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
                 901
             ]
         ],
-        grid_spacing: props.gridSpacing ?? "2%",
+        grid_spacing: (0, $4GYXz$solidjs.untrack)(()=>props.gridSpacing) ?? "2%",
         depict_search: depict_search,
         product_card_template: (display)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
                 display: display,
-                react_template: props.productCard,
+                react_template: (0, $4GYXz$solidjs.untrack)(()=>props.productCard),
                 component_portals: component_portals,
                 set_portals: set_portals
             })
@@ -337,25 +415,30 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
 
 
 
-let $5aa5fcb9f8a2bebc$var$render_cb;
 function $5aa5fcb9f8a2bebc$export$f7d2f673fc2f091d(props) {
     return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)(// @ts-ignore
-    (0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($5aa5fcb9f8a2bebc$var$SolidCategoryPage), props, "div", {}, (props)=>$5aa5fcb9f8a2bebc$var$render_cb?.(props));
+    (0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($5aa5fcb9f8a2bebc$var$SolidCategoryPage), props, "div", {});
 }
 function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
     const depict_category = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category;
     if (!depict_category) throw Error("No depict_category instance when rendering SearchPage. Did you forget to wrap your app in DepictProvider?");
     const [category_state_set, set_category_state_set] = (0, $4GYXz$solidjs.createSignal)(false);
-    $5aa5fcb9f8a2bebc$var$render_cb = (props)=>{
-        depict_category.category_id = props.categoryId;
-        (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category_path = location.pathname;
-        if (props.categoryId) set_category_state_set(true);
-    };
-    $5aa5fcb9f8a2bebc$var$render_cb(props);
     const component_portals = new Set();
+    const [, set_category_page_in_dom] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category_page_in_dom;
+    // We should only get here once react already has a DOM node which means we should be in the DOM
+    set_category_page_in_dom(true);
+    (0, $4GYXz$solidjs.onCleanup)(()=>set_category_page_in_dom(false));
+    (0, $4GYXz$solidjs.createComputed)(()=>{
+        const { categoryId: categoryId  } = props;
+        depict_category.category_id = categoryId;
+        if (categoryId) {
+            set_category_state_set(true);
+            (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).known_category_paths.add(location.pathname);
+        }
+    });
     const category = ()=>(0, $4GYXz$depictaiui.CategoryPage)({
             depict_category: depict_category,
-            cols_at_size: props.columnsAtSize ?? [
+            cols_at_size: (0, $4GYXz$solidjs.untrack)(()=>props.columnsAtSize) ?? [
                 [
                     4
                 ],
@@ -368,13 +451,13 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
                     901
                 ]
             ],
-            grid_spacing: props.gridSpacing ?? "2%",
-            category_title: props.categoryTitlePlugin || (0, $4GYXz$depictaiui.CategoryTitle),
-            show_breadcrumbs: props.showBreadcrumbs === undefined ? true : props.showBreadcrumbs,
-            show_quicklinks: props.showQuicklinks === undefined ? true : props.showQuicklinks,
+            grid_spacing: (0, $4GYXz$solidjs.untrack)(()=>props.gridSpacing) ?? "2%",
+            category_title: (0, $4GYXz$solidjs.untrack)(()=>props.categoryTitlePlugin) || (0, $4GYXz$depictaiui.CategoryTitle),
+            show_breadcrumbs: (0, $4GYXz$solidjs.untrack)(()=>props.showBreadcrumbs === undefined ? true : props.showBreadcrumbs),
+            show_quicklinks: (0, $4GYXz$solidjs.untrack)(()=>props.showQuicklinks === undefined ? true : props.showQuicklinks),
             product_card_template: (display)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
                     display: display,
-                    react_template: props.productCard,
+                    react_template: (0, $4GYXz$solidjs.untrack)(()=>props.productCard),
                     component_portals: component_portals,
                     set_portals: set_portals
                 })
@@ -415,10 +498,11 @@ function $f16af0e861aff3d0$var$vanilla_quick_links() {
 
 
 
-const $df522c8a81ed5a01$export$3f37af283f8fb843 = ({ aspectRatio: aspectRatio  })=>{
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)(()=>(0, $4GYXz$depictaiutilishared.ContainedPlaceholderImage)({
-            aspect_ratio: aspectRatio
-        }), {}, "div", {
+
+const $df522c8a81ed5a01$export$3f37af283f8fb843 = (props)=>{
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((solid_props_store)=>(0, $4GYXz$solidjs.createMemo)(()=>(0, $4GYXz$depictaiutilishared.ContainedPlaceholderImage)({
+                aspect_ratio: solid_props_store.aspectRatio
+            })), props, "div", {
         "height": "100%"
     });
 };
@@ -498,10 +582,19 @@ const $913da7f4d0bc77f2$export$9bb30bbe003b82e0 = (props)=>{
 
 
 
+
 const $e387bd534de10acd$export$804fac5697cfbe35 = (router)=>(relativeUrl)=>{
-        const shallow = (0, $b4d0d98857ed9934$export$92a8f8b3c630fa0d)(location);
+        let Page;
+        (function(Page) {
+            Page[Page["OTHER"] = 0] = "OTHER";
+            Page[Page["SEARCH"] = 1] = "SEARCH";
+            Page[Page["CATEGORY"] = 2] = "CATEGORY";
+        })(Page || (Page = {}));
+        const current_page = (0, $b4d0d98857ed9934$export$775e6b3892b5ad52)() ? Page.SEARCH : (0, $b4d0d98857ed9934$export$30c8a12df09be0e4)() ? Page.CATEGORY : Page.OTHER;
+        const target_u_o = new URL(relativeUrl, location.origin);
+        const target_page = (0, $b4d0d98857ed9934$export$775e6b3892b5ad52)(target_u_o) ? Page.SEARCH : (0, $b4d0d98857ed9934$export$30c8a12df09be0e4)(target_u_o) ? Page.CATEGORY : Page.OTHER;
         router.push(relativeUrl, undefined, {
-            shallow: shallow,
+            shallow: current_page === target_page,
             scroll: true
         });
     };

package/dist/module.js

@@ -1,15 +1,17 @@
-import {add_to_version_info as $TZSbU$add_to_version_info, catchify as $TZSbU$catchify, observer as $TZSbU$observer, history_replacer as $TZSbU$history_replacer, queueMacroTask as $TZSbU$queueMacroTask, instant_exec_on_suspect_history_change as $TZSbU$instant_exec_on_suspect_history_change, ContainedPlaceholderImage as $TZSbU$ContainedPlaceholderImage, Placeholder as $TZSbU$Placeholder} from "@depict-ai/utilishared";
+import {add_to_version_info as $TZSbU$add_to_version_info, catchify as $TZSbU$catchify, queueMacroTask as $TZSbU$queueMacroTask, instant_exec_on_suspect_history_change as $TZSbU$instant_exec_on_suspect_history_change, ContainedPlaceholderImage as $TZSbU$ContainedPlaceholderImage, Placeholder as $TZSbU$Placeholder} from "@depict-ai/utilishared";
 import {CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, fetchDepictRecommendations as $43099132aad1ceb6$re_export$fetchDepictRecommendations, DepictAPI as $TZSbU$DepictAPI, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage, CategoryPage as $TZSbU$CategoryPage, BreadCrumbs as $TZSbU$BreadCrumbs, QuickLinks as $TZSbU$QuickLinks, open_modal_with_alignment as $TZSbU$open_modal_with_alignment, SearchField as $TZSbU$SearchField} from "@depict-ai/ui";
-import {createRoot as $TZSbU$createRoot, untrack as $TZSbU$untrack, createSignal as $TZSbU$createSignal, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, onCleanup as $TZSbU$onCleanup, createComputed as $TZSbU$createComputed} from "solid-js";
+import {createRoot as $TZSbU$createRoot, untrack as $TZSbU$untrack, createEffect as $TZSbU$createEffect, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, onCleanup as $TZSbU$onCleanup, createSignal as $TZSbU$createSignal, createComputed as $TZSbU$createComputed, createMemo as $TZSbU$createMemo} from "solid-js";
 import {createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment, useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, forwardRef as $TZSbU$forwardRef} from "react";
 import {en as $TZSbU$en} from "@depict-ai/ui/locales";
 import {render as $TZSbU$render} from "solid-js/web";
 import {jsx as $TZSbU$jsx} from "react/jsx-runtime";
 import {createPortal as $TZSbU$createPortal} from "react-dom";
+import {createStore as $TZSbU$createStore, reconcile as $TZSbU$reconcile} from "solid-js/store";
+import {DPC as $TZSbU$DPC} from "@depict-ai/dpc";
 
 /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
 // Note, if you add an export here, also add one in src-server/main.ts
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.105";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.106";
 
 
 
@@ -18,67 +20,21 @@ const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.105";
 
 
 
-let $8071251ee4e9ffa1$var$set = false;
-let $8071251ee4e9ffa1$var$padding_animation;
-function $8071251ee4e9ffa1$export$6453cbc34515a94d(is_search_page) {
-    if ($8071251ee4e9ffa1$var$set) return; // Just being safe
-    $8071251ee4e9ffa1$var$set = true;
-    let should_use_old_scroll = false;
-    const old_scrollTo = window.scrollTo;
-    window.scrollTo = (...args)=>{
-        if (should_use_old_scroll || process.env.__NEXT_SCROLL_RESTORATION || !is_search_page(location)) return Reflect.apply(old_scrollTo, window, args);
-        else should_use_old_scroll = true;
-    };
-    addEventListener("popstate", (0, $TZSbU$catchify)(()=>{
-        if (!is_search_page(location)) {
-            $8071251ee4e9ffa1$var$removeLotsOfPadding(); // Just making sure
-            return;
-        }
-        should_use_old_scroll = false;
-        $8071251ee4e9ffa1$var$addLotsOfPadding();
-        (0, $TZSbU$observer).wait_for_element(".depict.plp .listing-page").then(()=>{
-            $8071251ee4e9ffa1$var$removeLotsOfPadding();
-        });
-    }));
-    (0, $TZSbU$history_replacer)(()=>{
-        (0, $TZSbU$queueMacroTask)(()=>{
-            $8071251ee4e9ffa1$var$removeLotsOfPadding();
-        });
-    }, false);
-    window?.next?.router?.events?.on("routeChangeStart", ()=>{
-        $8071251ee4e9ffa1$var$addLotsOfPadding();
-    });
-}
-/*
- Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
- The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
- */ function $8071251ee4e9ffa1$var$addLotsOfPadding() {
-    if ($8071251ee4e9ffa1$var$padding_animation) return; // We're already showing a bunch of padding
-    $8071251ee4e9ffa1$var$padding_animation = document.body.animate({
-        paddingBottom: (history.state?.search_scroll_restoration_data?.[0]?.min_results_loaded || 150) * 500 + "px",
-        offset: 0
-    }, 1);
-    $8071251ee4e9ffa1$var$padding_animation.pause();
-}
-function $8071251ee4e9ffa1$var$removeLotsOfPadding() {
-    if ($8071251ee4e9ffa1$var$padding_animation) {
-        $8071251ee4e9ffa1$var$padding_animation.play();
-        $8071251ee4e9ffa1$var$padding_animation = undefined;
-    }
-}
-
 
 
 const $42858f023ef23dab$export$8e769ad4338a911e = {
     search: null,
     category: null,
     api: null,
+    dpc: null,
     userId: undefined,
     sessionId: undefined,
     metaData: undefined,
-    category_path: null,
+    known_category_paths: new Set(),
     search_page_path_: (0, $TZSbU$createSignal)(),
-    required_state_set_: (0, $TZSbU$createSignal)(false)
+    required_state_set_: (0, $TZSbU$createSignal)(false),
+    search_page_in_dom: (0, $TZSbU$createSignal)(false),
+    category_page_in_dom: (0, $TZSbU$createSignal)(false)
 };
 
 
@@ -88,7 +44,6 @@ const $42858f023ef23dab$export$8e769ad4338a911e = {
 
 
 
-
 let $c83ba9ab79386687$var$run_on_href_change;
 let $c83ba9ab79386687$var$old_href = location.href;
 function $c83ba9ab79386687$export$74f3924c5027fe1d(cb) {
@@ -100,19 +55,19 @@ function $c83ba9ab79386687$export$74f3924c5027fe1d(cb) {
     $c83ba9ab79386687$var$run_on_href_change?.(href);
     $c83ba9ab79386687$var$old_href = href;
 }));
-const $c83ba9ab79386687$export$775e6b3892b5ad52 = (url)=>url.pathname == (0, $TZSbU$untrack)((0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
-const $c83ba9ab79386687$export$92a8f8b3c630fa0d = (url)=>{
-    return $c83ba9ab79386687$export$775e6b3892b5ad52(url) || url.pathname === (0, $42858f023ef23dab$export$8e769ad4338a911e).category_path;
-};
-function $c83ba9ab79386687$export$f6e64e17bd69eeef(solid_component, props, wrapper_type = "div", wrapper_style = {}, react_render_handler) {
+const $c83ba9ab79386687$export$775e6b3892b5ad52 = (url = location)=>url.pathname == (0, $TZSbU$untrack)((0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
+const $c83ba9ab79386687$export$30c8a12df09be0e4 = (url = location)=>(0, $42858f023ef23dab$export$8e769ad4338a911e).known_category_paths.has(url.pathname);
+function $c83ba9ab79386687$export$f6e64e17bd69eeef(solid_component, props, wrapper_type = "div", wrapper_style = {}) {
     const [portals, set_portals] = (0, $TZSbU$useState)([]);
     const wrapper_element_ref = (0, $TZSbU$useRef)();
+    const [[store, write_store]] = (0, $TZSbU$useState)(()=>(0, $TZSbU$createStore)(props));
+    // Update store when props change
+    write_store((0, $TZSbU$reconcile)(props));
     (0, $TZSbU$useEffect)(()=>{
         const wrapper_element = wrapper_element_ref.current;
-        const dispose = (0, $TZSbU$render)(()=>solid_component(props, set_portals), wrapper_element);
+        const dispose = (0, $TZSbU$render)(()=>solid_component(store, set_portals), wrapper_element);
         return dispose;
     }, []);
-    react_render_handler?.(props);
     return (0, $TZSbU$createElement)(wrapper_type, {
         ref: wrapper_element_ref,
         style: wrapper_style
@@ -132,17 +87,14 @@ function $c83ba9ab79386687$export$e5139bbbb9a05035(component, is_set = (0, $4285
     };
 }
 async function $c83ba9ab79386687$export$79c79419c1ef0081({ display: display , component_portals: component_portals , set_portals: set_portals , react_template: react_template  }) {
+    let set_react_has_ran_hooks;
+    const react_has_ran_hooks = new Promise((r)=>set_react_has_ran_hooks = r);
     const solid_container = document.createElement("div");
-    const react_has_rendered = new Promise((r)=>{
-        const m_o = new MutationObserver(()=>{
-            m_o.disconnect();
-            r();
-        });
-        m_o.observe(solid_container, {
-            childList: true
-        });
-    });
-    const reactProductCard = (0, $TZSbU$jsx)(react_template, {
+    const reactProductCard = (0, $TZSbU$jsx)((props)=>{
+        // Sneak in a hook into their product card component
+        (0, $TZSbU$useEffect)(set_react_has_ran_hooks, []);
+        return react_template(props);
+    }, {
         display: display
     });
     const portal = $TZSbU$createPortal(reactProductCard, solid_container);
@@ -157,23 +109,144 @@ async function $c83ba9ab79386687$export$79c79419c1ef0081({ display: display , co
             ...component_portals
         ]);
     });
-    await react_has_rendered; // wait for react to have finish portaling the elements so that the placeholders get removed once we have an actual result and so that the PLP code knows it has a placeholder when this is a placeholder rendering
+    await react_has_ran_hooks; // After react has created elements it still takes some time to actually connect the refs and run the hooks. We don't want to replace placeholders before then.
     return [
         solid_container
     ];
 }
 
 
+
+
+let $8071251ee4e9ffa1$var$set = false;
+let $8071251ee4e9ffa1$var$padding_animation;
+function $8071251ee4e9ffa1$export$6453cbc34515a94d() {
+    const are_on_search_or_category_page = ()=>(0, $c83ba9ab79386687$export$775e6b3892b5ad52)() || (0, $c83ba9ab79386687$export$30c8a12df09be0e4)();
+    if ($8071251ee4e9ffa1$var$set) return; // Just being safe
+    $8071251ee4e9ffa1$var$set = true;
+    let should_use_old_scroll = false;
+    const old_scrollTo = window.scrollTo;
+    const next_router_event_target = $8071251ee4e9ffa1$var$make_next_router_event_target(); // So we can use once: true
+    window.scrollTo = (...args)=>{
+        if (should_use_old_scroll || process.env.__NEXT_SCROLL_RESTORATION || !are_on_search_or_category_page()) return Reflect.apply(old_scrollTo, window, args);
+        else should_use_old_scroll = true;
+    };
+    // When popping state, add padding in the same event as the "popstate" event (required) and then remove it once our stuff is in the DOM
+    addEventListener("popstate", (0, $TZSbU$catchify)(()=>{
+        if (!are_on_search_or_category_page()) {
+            $8071251ee4e9ffa1$var$removeLotsOfPadding(); // Just making sure
+            return;
+        }
+        should_use_old_scroll = false;
+        const [get_search_page_in_dom] = (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_in_dom;
+        const [get_category_page_in_dom] = (0, $42858f023ef23dab$export$8e769ad4338a911e).category_page_in_dom;
+        const search_page_in_dom = (0, $TZSbU$untrack)(get_search_page_in_dom);
+        const category_page_in_dom = (0, $TZSbU$untrack)(get_category_page_in_dom);
+        const new_is_search = (0, $c83ba9ab79386687$export$775e6b3892b5ad52)();
+        const new_is_category = (0, $c83ba9ab79386687$export$30c8a12df09be0e4)();
+        let accessor_to_wait_for;
+        if (search_page_in_dom && new_is_search || category_page_in_dom && new_is_category) {
+            // Already on the page we're going to
+            $8071251ee4e9ffa1$var$removeLotsOfPadding();
+            return;
+        }
+        $8071251ee4e9ffa1$var$addLotsOfPadding();
+        if (new_is_search && category_page_in_dom) accessor_to_wait_for = get_search_page_in_dom;
+        else if (new_is_category && search_page_in_dom) accessor_to_wait_for = get_category_page_in_dom;
+        else accessor_to_wait_for = new_is_search ? get_search_page_in_dom : get_category_page_in_dom;
+        (0, $TZSbU$createRoot)((dispose)=>(0, $TZSbU$createEffect)(()=>{
+                if (accessor_to_wait_for()) {
+                    $8071251ee4e9ffa1$var$removeLotsOfPadding();
+                    dispose();
+                }
+            }));
+    }));
+    window?.next?.router?.events?.on(// We have to use the actual next router here, if we'd use next_router_event_target for this window.event wouldn't be the popstate anymore
+    "routeChangeStart", (0, $TZSbU$catchify)(()=>{
+        // this is for when we navigate to a new page (replaceState or pushState)
+        // We need to ensure that the page doesn't get shorter before the new history entry has been pushed
+        // There is beforeHistoryChange which fires literally the line of code before the history API is called, so we make the page long until a task after that
+        // The challenge is knowing on routeChangeStart if we're in a popstate (back/forward) or a pushState/replaceState
+        // We use the deprecated window.event property for that
+        // This is catchified, so we should see in sentry when it starts failing if browsers ever remove it???
+        if (window.event instanceof PopStateEvent) return;
+        $8071251ee4e9ffa1$var$addLotsOfPadding();
+        next_router_event_target.addEventListener("beforeHistoryChange", (0, $TZSbU$catchify)(()=>(0, $TZSbU$queueMacroTask)($8071251ee4e9ffa1$var$removeLotsOfPadding)), {
+            once: true
+        });
+    }));
+}
+/*
+ Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
+ The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
+ */ function $8071251ee4e9ffa1$var$addLotsOfPadding() {
+    if ($8071251ee4e9ffa1$var$padding_animation) return; // We're already showing a bunch of padding
+    $8071251ee4e9ffa1$var$padding_animation = document.body.animate({
+        paddingBottom: (history.state?.search_scroll_restoration_data?.[0]?.min_results_loaded || 150) * 500 + "px",
+        offset: 0
+    }, 1);
+    $8071251ee4e9ffa1$var$padding_animation.pause();
+}
+function $8071251ee4e9ffa1$var$removeLotsOfPadding() {
+    if ($8071251ee4e9ffa1$var$padding_animation) {
+        $8071251ee4e9ffa1$var$padding_animation.play();
+        $8071251ee4e9ffa1$var$padding_animation = undefined;
+    }
+}
+function $8071251ee4e9ffa1$var$make_next_router_event_target() {
+    const next_router_event_target = new EventTarget();
+    window?.next?.router?.events?.on("beforeHistoryChange", ()=>next_router_event_target.dispatchEvent(new CustomEvent("beforeHistoryChange")));
+    return next_router_event_target;
+}
+
+
+
+
 const $7216ca4c8308a0f9$export$599d4515591ef232 = (relativeUrl, isReplace)=>{
-    const shallow = (0, $c83ba9ab79386687$export$92a8f8b3c630fa0d)(location);
+    let Page;
+    (function(Page) {
+        Page[Page["OTHER"] = 0] = "OTHER";
+        Page[Page["SEARCH"] = 1] = "SEARCH";
+        Page[Page["CATEGORY"] = 2] = "CATEGORY";
+    })(Page || (Page = {}));
+    const current_page = (0, $c83ba9ab79386687$export$775e6b3892b5ad52)() ? Page.SEARCH : (0, $c83ba9ab79386687$export$30c8a12df09be0e4)() ? Page.CATEGORY : Page.OTHER;
+    const target_u_o = new URL(relativeUrl, location.origin);
+    const target_page = (0, $c83ba9ab79386687$export$775e6b3892b5ad52)(target_u_o) ? Page.SEARCH : (0, $c83ba9ab79386687$export$30c8a12df09be0e4)(target_u_o) ? Page.CATEGORY : Page.OTHER;
     window.next.router[isReplace ? "replace" : "push"](relativeUrl, undefined, {
-        shallow: shallow,
+        shallow: current_page === target_page,
         scroll: true
     });
 };
 
 
 
+
+const $a00d8f27abd5d0b0$export$38b98fae14bd1f64 = ()=>{
+    if (!(0, $42858f023ef23dab$export$8e769ad4338a911e).dpc) throw new Error("Depict tracking is not configured. Wrap your app in a DepictProvider.");
+    return {
+        dpc: (0, $42858f023ef23dab$export$8e769ad4338a911e).dpc
+    };
+};
+const $a00d8f27abd5d0b0$export$47e064413edabf36 = (merchant, market, userId, sessionId)=>{
+    if (!merchant) return;
+    try {
+        let { dpc: dpc  } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
+        if (!dpc) dpc = (0, $42858f023ef23dab$export$8e769ad4338a911e).dpc = new (0, $TZSbU$DPC)(merchant, {
+            market: market
+        });
+        dpc.merchant = merchant;
+        dpc.market = market;
+        dpc.setUserId(userId);
+        dpc.setSessionId(sessionId);
+    } catch (e) {
+        // Make sure to not break the users app if we throw
+        queueMicrotask(()=>{
+            throw e;
+        });
+    }
+};
+
+
 function $5376eb2a386cd90d$export$9fac37a9c21c2f3b(props) {
     const { children: children , navigateFunction: navigateFunction , market: market , merchant: merchant , locale: locale , metaData: metaData , userId: userId , sessionId: sessionId  } = props;
     const usedLocale = locale ?? (0, $TZSbU$en);
@@ -182,13 +255,13 @@ function $5376eb2a386cd90d$export$9fac37a9c21c2f3b(props) {
     (0, $42858f023ef23dab$export$8e769ad4338a911e).userId = userId;
     (0, $42858f023ef23dab$export$8e769ad4338a911e).sessionId = sessionId;
     (0, $42858f023ef23dab$export$8e769ad4338a911e).metaData = metaData;
+    (0, $a00d8f27abd5d0b0$export$47e064413edabf36)(merchant, market, userId, sessionId);
     if (!market || !merchant) {
         (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](false);
         return (0, $TZSbU$createElement)((0, $TZSbU$Fragment), null, children);
     }
     try {
-        const { search: search , category: category , api: api  } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
-        const [get_search_page_path, set_search_page_path] = (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_;
+        const { search: search , category: category , api: api , search_page_path_: [get_search_page_path, set_search_page_path]  } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
         if (typeof window?.next?.router === "undefined" && !navigateFunction) throw new Error("You must provide a navigateFunction when not using Next.js.");
         const on_navigation = ({ is_replace: is_replace , new_url: new_url  })=>{
             const new_relative_url = new_url.origin === location.origin ? new_url.pathname + new_url.search + new_url.hash : new_url.href; // bail out of making URL relative if it's not possible
@@ -233,7 +306,7 @@ function $5376eb2a386cd90d$export$9fac37a9c21c2f3b(props) {
             category.merchant = merchant;
             category.localization = usedLocale;
         }
-        (0, $8071251ee4e9ffa1$export$6453cbc34515a94d)((0, $c83ba9ab79386687$export$92a8f8b3c630fa0d));
+        (0, $8071251ee4e9ffa1$export$6453cbc34515a94d)();
         (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](true);
     } catch (e) {
         // Make sure to not break the users app if we throw
@@ -279,6 +352,10 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
     const update_updating_blocked_signal = ()=>{
         set_search_query_updating_blocked_signal(!(0, $c83ba9ab79386687$export$775e6b3892b5ad52)(location));
     };
+    const [, set_search_page_in_dom] = (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_in_dom;
+    // We should only get here once react already has a DOM node which means we should be in the DOM
+    set_search_page_in_dom(true);
+    (0, $TZSbU$onCleanup)(()=>set_search_page_in_dom(false));
     // react is really slow with disposing components, we want to avoid a flash of another search query when you click on a product and navigate away
     (0, $c83ba9ab79386687$export$74f3924c5027fe1d)(update_updating_blocked_signal); // if we navigate, re-check
     (0, $TZSbU$createComputed)(()=>{
@@ -288,8 +365,8 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
     const component_portals = new Set();
     return (0, $TZSbU$SearchPage)({
         // Default config goes here
-        include_input_field: props.includeInputField ?? true,
-        cols_at_size: props.columnsAtSize ?? [
+        include_input_field: (0, $TZSbU$untrack)(()=>props.includeInputField) ?? true,
+        cols_at_size: (0, $TZSbU$untrack)(()=>props.columnsAtSize) ?? [
             [
                 4
             ],
@@ -302,11 +379,11 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
                 901
             ]
         ],
-        grid_spacing: props.gridSpacing ?? "2%",
+        grid_spacing: (0, $TZSbU$untrack)(()=>props.gridSpacing) ?? "2%",
         depict_search: depict_search,
         product_card_template: (display)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
                 display: display,
-                react_template: props.productCard,
+                react_template: (0, $TZSbU$untrack)(()=>props.productCard),
                 component_portals: component_portals,
                 set_portals: set_portals
             })
@@ -318,25 +395,30 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
 
 
 
-let $48d7f568740a317d$var$render_cb;
 function $48d7f568740a317d$export$f7d2f673fc2f091d(props) {
     return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)(// @ts-ignore
-    (0, $c83ba9ab79386687$export$e5139bbbb9a05035)($48d7f568740a317d$var$SolidCategoryPage), props, "div", {}, (props)=>$48d7f568740a317d$var$render_cb?.(props));
+    (0, $c83ba9ab79386687$export$e5139bbbb9a05035)($48d7f568740a317d$var$SolidCategoryPage), props, "div", {});
 }
 function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
     const depict_category = (0, $42858f023ef23dab$export$8e769ad4338a911e).category;
     if (!depict_category) throw Error("No depict_category instance when rendering SearchPage. Did you forget to wrap your app in DepictProvider?");
     const [category_state_set, set_category_state_set] = (0, $TZSbU$createSignal)(false);
-    $48d7f568740a317d$var$render_cb = (props)=>{
-        depict_category.category_id = props.categoryId;
-        (0, $42858f023ef23dab$export$8e769ad4338a911e).category_path = location.pathname;
-        if (props.categoryId) set_category_state_set(true);
-    };
-    $48d7f568740a317d$var$render_cb(props);
     const component_portals = new Set();
+    const [, set_category_page_in_dom] = (0, $42858f023ef23dab$export$8e769ad4338a911e).category_page_in_dom;
+    // We should only get here once react already has a DOM node which means we should be in the DOM
+    set_category_page_in_dom(true);
+    (0, $TZSbU$onCleanup)(()=>set_category_page_in_dom(false));
+    (0, $TZSbU$createComputed)(()=>{
+        const { categoryId: categoryId  } = props;
+        depict_category.category_id = categoryId;
+        if (categoryId) {
+            set_category_state_set(true);
+            (0, $42858f023ef23dab$export$8e769ad4338a911e).known_category_paths.add(location.pathname);
+        }
+    });
     const category = ()=>(0, $TZSbU$CategoryPage)({
             depict_category: depict_category,
-            cols_at_size: props.columnsAtSize ?? [
+            cols_at_size: (0, $TZSbU$untrack)(()=>props.columnsAtSize) ?? [
                 [
                     4
                 ],
@@ -349,13 +431,13 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
                     901
                 ]
             ],
-            grid_spacing: props.gridSpacing ?? "2%",
-            category_title: props.categoryTitlePlugin || (0, $43099132aad1ceb6$re_export$CategoryTitle),
-            show_breadcrumbs: props.showBreadcrumbs === undefined ? true : props.showBreadcrumbs,
-            show_quicklinks: props.showQuicklinks === undefined ? true : props.showQuicklinks,
+            grid_spacing: (0, $TZSbU$untrack)(()=>props.gridSpacing) ?? "2%",
+            category_title: (0, $TZSbU$untrack)(()=>props.categoryTitlePlugin) || (0, $43099132aad1ceb6$re_export$CategoryTitle),
+            show_breadcrumbs: (0, $TZSbU$untrack)(()=>props.showBreadcrumbs === undefined ? true : props.showBreadcrumbs),
+            show_quicklinks: (0, $TZSbU$untrack)(()=>props.showQuicklinks === undefined ? true : props.showQuicklinks),
             product_card_template: (display)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
                     display: display,
-                    react_template: props.productCard,
+                    react_template: (0, $TZSbU$untrack)(()=>props.productCard),
                     component_portals: component_portals,
                     set_portals: set_portals
                 })
@@ -396,10 +478,11 @@ function $b68a14248b7ef667$var$vanilla_quick_links() {
 
 
 
-const $f446a84f85ba06f6$export$3f37af283f8fb843 = ({ aspectRatio: aspectRatio  })=>{
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)(()=>(0, $TZSbU$ContainedPlaceholderImage)({
-            aspect_ratio: aspectRatio
-        }), {}, "div", {
+
+const $f446a84f85ba06f6$export$3f37af283f8fb843 = (props)=>{
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((solid_props_store)=>(0, $TZSbU$createMemo)(()=>(0, $TZSbU$ContainedPlaceholderImage)({
+                aspect_ratio: solid_props_store.aspectRatio
+            })), props, "div", {
         "height": "100%"
     });
 };
@@ -479,10 +562,19 @@ const $2b886cf548a4775c$export$9bb30bbe003b82e0 = (props)=>{
 
 
 
+
 const $a92aa2beb560b8af$export$804fac5697cfbe35 = (router)=>(relativeUrl)=>{
-        const shallow = (0, $c83ba9ab79386687$export$92a8f8b3c630fa0d)(location);
+        let Page;
+        (function(Page) {
+            Page[Page["OTHER"] = 0] = "OTHER";
+            Page[Page["SEARCH"] = 1] = "SEARCH";
+            Page[Page["CATEGORY"] = 2] = "CATEGORY";
+        })(Page || (Page = {}));
+        const current_page = (0, $c83ba9ab79386687$export$775e6b3892b5ad52)() ? Page.SEARCH : (0, $c83ba9ab79386687$export$30c8a12df09be0e4)() ? Page.CATEGORY : Page.OTHER;
+        const target_u_o = new URL(relativeUrl, location.origin);
+        const target_page = (0, $c83ba9ab79386687$export$775e6b3892b5ad52)(target_u_o) ? Page.SEARCH : (0, $c83ba9ab79386687$export$30c8a12df09be0e4)(target_u_o) ? Page.CATEGORY : Page.OTHER;
         router.push(relativeUrl, undefined, {
-            shallow: shallow,
+            shallow: current_page === target_page,
             scroll: true
         });
     };
@@ -496,4 +588,4 @@ const $97603d19204ec48d$export$b8a61e5c71402559 = {
 (0, $TZSbU$add_to_version_info)("react-ui", (0, $c9c4d066f9a5b51b$export$83d89fbfd8236492));
 
 
-export {$b68a14248b7ef667$export$466cdc317043f6cb as QuickLinks, $f866f7ed9f751af4$export$5646050d516e06bc as BreadCrumbs, $421f32789b6f111f$export$80e99ee6b29cadd2 as ComponentAligner, $5376eb2a386cd90d$export$9fac37a9c21c2f3b as DepictProvider, $48d7f568740a317d$export$f7d2f673fc2f091d as CategoryPage, $4a678f0c87b12e78$export$a54ec244c8863715 as SearchPage, $f446a84f85ba06f6$export$3f37af283f8fb843 as ImagePlaceholder, $cbd250061abf11cb$export$89c6019e4baa40b1 as TextPlaceholder, $70344e5e0d0fea06$export$912994940e660d32 as useSearchModal, $2b886cf548a4775c$export$9bb30bbe003b82e0 as useSearchField, $43099132aad1ceb6$re_export$CategoryTitle as CategoryTitle, $43099132aad1ceb6$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $43099132aad1ceb6$re_export$fetchDepictRecommendations as fetchDepictRecommendations, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation};
+export {$b68a14248b7ef667$export$466cdc317043f6cb as QuickLinks, $f866f7ed9f751af4$export$5646050d516e06bc as BreadCrumbs, $421f32789b6f111f$export$80e99ee6b29cadd2 as ComponentAligner, $5376eb2a386cd90d$export$9fac37a9c21c2f3b as DepictProvider, $48d7f568740a317d$export$f7d2f673fc2f091d as CategoryPage, $4a678f0c87b12e78$export$a54ec244c8863715 as SearchPage, $f446a84f85ba06f6$export$3f37af283f8fb843 as ImagePlaceholder, $cbd250061abf11cb$export$89c6019e4baa40b1 as TextPlaceholder, $70344e5e0d0fea06$export$912994940e660d32 as useSearchModal, $2b886cf548a4775c$export$9bb30bbe003b82e0 as useSearchField, $a00d8f27abd5d0b0$export$38b98fae14bd1f64 as usePerformanceClient, $43099132aad1ceb6$re_export$CategoryTitle as CategoryTitle, $43099132aad1ceb6$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $43099132aad1ceb6$re_export$fetchDepictRecommendations as fetchDepictRecommendations, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation};

package/dist-server/index.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from "react";
+import { DPC } from "@depict-ai/dpc";
 type OpenModal = () => void;
 interface UseSearchModalReturn {
     open: OpenModal;
@@ -9,7 +10,10 @@ interface UseSearchFieldReturn {
      */
     SearchField: () => ReactElement;
 }
-export const version = "0.0.105";
+interface UsePerformanceClientReturn {
+    dpc: DPC;
+}
+export const version = "0.0.106";
 export const fetchDepictRecommendations: any;
 export function DepictProvider(props: any): any;
 export function SearchPage(): any;
@@ -27,3 +31,4 @@ export function TextPlaceholder(): any;
 export function useSearchField(): UseSearchFieldReturn;
 export function openModal(): void;
 export function useSearchModal(): UseSearchModalReturn;
+export function usePerformanceClient(): UsePerformanceClientReturn;

package/dist-server/main.js

@@ -17,10 +17,11 @@ $parcel$export(module.exports, "TextPlaceholder", () => $41e7e5d85b5e0d49$export
 $parcel$export(module.exports, "useSearchField", () => $41e7e5d85b5e0d49$export$9bb30bbe003b82e0);
 $parcel$export(module.exports, "openModal", () => $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c);
 $parcel$export(module.exports, "useSearchModal", () => $41e7e5d85b5e0d49$export$912994940e660d32);
+$parcel$export(module.exports, "usePerformanceClient", () => $41e7e5d85b5e0d49$export$38b98fae14bd1f64);
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.105";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.106";
 
 
 const $41e7e5d85b5e0d49$export$58e808b1db15d3bc = ()=>{
@@ -80,5 +81,18 @@ function $41e7e5d85b5e0d49$export$912994940e660d32() {
         open: ()=>{}
     };
 }
+function $41e7e5d85b5e0d49$export$38b98fae14bd1f64() {
+    const mock = {
+        get: function(target, property) {
+            if (typeof target[property] === "undefined") return ()=>{
+                throw new Error("Depict Performance Client is currently not available on the server. Please wrap your call in a useEffect hook or user event handler.");
+            };
+            return target[property];
+        }
+    };
+    return {
+        dpc: new Proxy({}, mock)
+    };
+}
 
 

package/dist-server/module.js

@@ -3,7 +3,7 @@ import {jsx as $1RlIW$jsx} from "react/jsx-runtime";
 
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.105";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.106";
 
 
 const $2b1fdeb83610500f$export$58e808b1db15d3bc = ()=>{
@@ -63,6 +63,19 @@ function $2b1fdeb83610500f$export$912994940e660d32() {
         open: ()=>{}
     };
 }
+function $2b1fdeb83610500f$export$38b98fae14bd1f64() {
+    const mock = {
+        get: function(target, property) {
+            if (typeof target[property] === "undefined") return ()=>{
+                throw new Error("Depict Performance Client is currently not available on the server. Please wrap your call in a useEffect hook or user event handler.");
+            };
+            return target[property];
+        }
+    };
+    return {
+        dpc: new Proxy({}, mock)
+    };
+}
 
 
-export {$2b1fdeb83610500f$export$58e808b1db15d3bc as fetchDepictRecommendations, $2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$a54ec244c8863715 as SearchPage, $2b1fdeb83610500f$export$f7d2f673fc2f091d as CategoryPage, $2b1fdeb83610500f$export$5646050d516e06bc as BreadCrumbs, $2b1fdeb83610500f$export$466cdc317043f6cb as QuickLinks, $2b1fdeb83610500f$export$80e99ee6b29cadd2 as ComponentAligner, $2b1fdeb83610500f$export$3f37af283f8fb843 as ImagePlaceholder, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$9bb30bbe003b82e0 as useSearchField, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $2b1fdeb83610500f$export$912994940e660d32 as useSearchModal, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};
+export {$2b1fdeb83610500f$export$58e808b1db15d3bc as fetchDepictRecommendations, $2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$a54ec244c8863715 as SearchPage, $2b1fdeb83610500f$export$f7d2f673fc2f091d as CategoryPage, $2b1fdeb83610500f$export$5646050d516e06bc as BreadCrumbs, $2b1fdeb83610500f$export$466cdc317043f6cb as QuickLinks, $2b1fdeb83610500f$export$80e99ee6b29cadd2 as ComponentAligner, $2b1fdeb83610500f$export$3f37af283f8fb843 as ImagePlaceholder, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$9bb30bbe003b82e0 as useSearchField, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $2b1fdeb83610500f$export$912994940e660d32 as useSearchModal, $2b1fdeb83610500f$export$38b98fae14bd1f64 as usePerformanceClient, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.105",
+  "version": "0.0.106",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -96,9 +96,10 @@
     "/locales"
   ],
   "dependencies": {
-    "@depict-ai/plp-styling": "^1.0.1",
-    "@depict-ai/ui": "^1.0.1",
-    "@depict-ai/utilishared": "^1.0.1",
+    "@depict-ai/dpc": "^1.0.2",
+    "@depict-ai/plp-styling": "^1.0.2",
+    "@depict-ai/ui": "^1.0.2",
+    "@depict-ai/utilishared": "^1.0.2",
     "solid-js": "^1.7.3"
   },
   "peerDependencies": {
@@ -111,7 +112,7 @@
     "@babel/preset-typescript": "latest",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
-    "@depict-ai/plp-styling": "^1.0.1",
+    "@depict-ai/plp-styling": "^1.0.2",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",