@depict-ai/ui 0.0.50 → 0.0.52

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestions
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
 import { ProductListingResponse, BaseCategoryDisplay } from "@depict-ai/types/api/ProductListingResponse";
 import { JSX as _JSX1 } from "solid-js/types/jsx";
-export const version = "0.0.50";
+export const version = "0.0.52";
 type ExclusiveId = {
     categoryId: string;
     productId?: undefined;
@@ -227,7 +227,7 @@ type DepictCategoryConstructorOptions = {
     market: string;
     merchant: string;
     localization: category_i18n;
-    on_navigation?: (relative_url: string, ev: MouseEvent, display: BaseCategoryDisplay) => unknown;
+    on_navigation: (relative_url: string, ev: MouseEvent, display: BaseCategoryDisplay) => unknown;
     api?: DepictAPI;
 };
 export class DepictCategory {
@@ -349,6 +349,25 @@ interface SearchFieldParams {
     aligner_ref?: HTMLElement | null;
 }
 export function SearchField({ depict_search, modal_dispose_handler, click_handler, aligner_ref, }: SearchFieldParams): Node_Array;
+type CenteredLocation = {
+    location?: "centered";
+};
+type AlignedLocation = {
+    location: "aligned";
+    element: HTMLElement;
+};
+/**
+ * How the modal should be opened.
+ */
+type ModalLocation = AlignedLocation | CenteredLocation;
+type OpenModalParams<T extends Display> = ModalLocation & {
+    search: DepictSearch<T>;
+};
+/**
+ * Open the modal with support for alignment.
+ * @returns {void}
+ */
+export const open_modal_with_alignment: <T extends Display>(openModalParams: OpenModalParams<T>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
     readonly render_: (is_prerendering: boolean) => Node_Array;
@@ -361,7 +380,9 @@ export class PageReplacer extends EventTarget {
     #private;
     get open_(): boolean;
     destroy_(): void;
-    constructor(options: Omit<PageReplacer, "destroy_" | "addEventListener" | "removeEventListener" | "dispatchEvent" | "open_">);
+    constructor({ is_spa_, ...options }: Omit<PageReplacer, "destroy_" | "addEventListener" | "removeEventListener" | "dispatchEvent" | "open_"> & {
+        is_spa_?: boolean;
+    });
 }
 /**
  * makes so that links to the previous page close the search instead of closing the search and reloading the page (to be used with non-spas)

package/dist/main.js

@@ -18,6 +18,7 @@ $parcel$export(module.exports, "DepictSearch", () => $79fbf145b15af988$export$ac
 $parcel$export(module.exports, "get_search_query_updating_blocked_signal", () => $79fbf145b15af988$export$bde3eb976dfded9);
 $parcel$export(module.exports, "SearchPage", () => $79fbf145b15af988$export$f2dc7e4e4aa11abb);
 $parcel$export(module.exports, "SearchField", () => $79fbf145b15af988$export$316f6f283ae64765);
+$parcel$export(module.exports, "open_modal_with_alignment", () => $9c5a1d57540c06e5$export$d86a33413558014e);
 $parcel$export(module.exports, "DefaultInstantCardPlaceholder", () => $17c49340edfdbb31$export$ee1733d9a8495996);
 $parcel$export(module.exports, "align_field", () => $67b60b572b7b7059$export$b3ad617e9036868);
 $parcel$export(module.exports, "styles_to_valid_css_string", () => $d3c94b3b96557917$export$1233ca167bf71f9a);
@@ -32,7 +33,7 @@ $parcel$export(module.exports, "solid_format_price", () => $5fc9fc23df1591db$exp
 $parcel$export(module.exports, "connect_search_field_height_to_aligner_height", () => $246e3e89a097f014$export$828dcdd425fd3231);
 $parcel$export(module.exports, "PageReplacer", () => $37e96a5ebc768cc7$export$3ccaa27d81dd8556);
 $parcel$export(module.exports, "version", () => $ae93561d5649a847$export$83d89fbfd8236492);
-/*! Depict.ai search and product listing SDK */ const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.50";
+/*! Depict.ai search and product listing SDK */ const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.52";
 
 
 
@@ -4122,7 +4123,7 @@ function $495e9998757c5d32$export$5646050d516e06bc({ crumb_data_: get_api_crumb_
                             },
                             get children () {
                                 const _el$2 = $495e9998757c5d32$var$_tmpl$2.cloneNode(true);
-                                (0, $46MJV$solidjsweb.addEventListener)(_el$2, "click", (0, $46MJV$depictaiutilishared.catchify)((ev)=>on_crumb_click_?.(ev, display_accessor())), true);
+                                (0, $46MJV$solidjsweb.addEventListener)(_el$2, "click", (0, $46MJV$depictaiutilishared.catchify)((ev)=>on_crumb_click_(ev, display_accessor())), true);
                                 (0, $46MJV$solidjsweb.insert)(_el$2, ()=>display_accessor().title);
                                 (0, $46MJV$solidjsweb.effect)(()=>(0, $46MJV$solidjsweb.setAttribute)(_el$2, "href", display_accessor().page_url));
                                 return _el$2;
@@ -4289,7 +4290,7 @@ function $cdc2c00c0a7da86e$export$466cdc317043f6cb({ quicklinks_data_: quicklink
                                 const _el$3 = $cdc2c00c0a7da86e$var$_tmpl$3.cloneNode(true);
                                 (0, $46MJV$solidjsweb.addEventListener)(_el$3, "click", (0, $46MJV$depictaiutilishared.catchify)((ev)=>{
                                     if (is_selected() && !ev.metaKey && !ev.ctrlKey && !ev.button) ev.preventDefault();
-                                    else if (display_accessor()) on_link_click_?.(ev, display_accessor());
+                                    else if (display_accessor()) on_link_click_(ev, display_accessor());
                                 }), true);
                                 (0, $46MJV$solidjsweb.insert)(_el$3, ()=>display_accessor()?.title || (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$depictaiutilishared.Placeholder), {
                                         height: "1em",
@@ -4957,7 +4958,7 @@ class $068a627cc18f7bb6$export$f34314aa9505732e {
                 category_scroll_restoration_data: []
             }));
         const i18n_ = (0, $623202ae203e9e59$export$f091cbac892643a4)(this.#locale_signal[0]);
-        const on_category_link_click_ = on_navigation && ((e, d)=>{
+        const on_category_link_click_ = (e, d)=>{
             if (e.button || e.metaKey || e.ctrlKey) // Not single page navigating because button is not 0 or ctrl/command click
             return;
             try {
@@ -4971,7 +4972,7 @@ class $068a627cc18f7bb6$export$f34314aa9505732e {
                     throw e;
                 });
             }
-        });
+        };
         $068a627cc18f7bb6$var$privately_shared_properties.set(this, {
             state_: state_,
             breadcrumb_signal_: (0, $46MJV$solidjs.createSignal)(),
@@ -7721,6 +7722,47 @@ function $79fbf145b15af988$var$align_field_modal(style_props_, input, aligner_re
 
 
 
+const $9c5a1d57540c06e5$export$d86a33413558014e = (openModalParams)=>{
+    const { search: search  } = openModalParams;
+    openModalParams.location ||= "centered";
+    if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
+    if (openModalParams.location !== "aligned") {
+        // Open centered modal
+        search.modal_open = true;
+        return;
+    }
+    const alignment_height = openModalParams.element?.clientHeight;
+    if (isNaN(alignment_height)) {
+        // Open centered modal
+        search.modal_open = true;
+        return;
+    }
+    const { cleanup: cleanup  } = (0, $246e3e89a097f014$export$828dcdd425fd3231)(openModalParams.element);
+    let dispose_aligner;
+    /**
+   * Setting position to fixed is important to make the modal work with align_field.
+   */ const style_props_ = (0, $46MJV$solidjs.createSignal)({
+        position: "fixed"
+    });
+    (0, $46MJV$solidjs.createRoot)((dispose)=>{
+        dispose_aligner = ()=>{
+            cleanup();
+            dispose();
+        };
+        (0, $67b60b572b7b7059$export$b3ad617e9036868)(style_props_, openModalParams.element, undefined, false, "top");
+    });
+    search.modal_open = [
+        {
+            style_props_: style_props_
+        },
+        dispose_aligner
+    ];
+};
+
+
+
+
+
 
 
 function $308e64f91bb9f839$export$d0596b5cae35ad4(open_search) {
@@ -7776,16 +7818,28 @@ function $d589470b68ce5b67$export$689e204eadb33baf(pr) {
 
 
 
+
 class $37e96a5ebc768cc7$export$3ccaa27d81dd8556 extends EventTarget {
     #stop_listening;
     #disconnect_observer;
     #revert_fns = [];
     #is_open = false;
+    static #reverting_permitted = true;
+    static #visited_urls = (()=>{
+        // Keep track of all URLs that have been visited since the document that was initially loaded (loaded means the process where the browser creates a new `document` and `window` object).
+        (0, $46MJV$depictaiutilishared.catchify)(async ()=>{
+            // Static initialization blocks aren't supported in MobileSafari yet, otherwise this would be one.
+            // I don't think we want to ship a library that users are *forced* to transpile, it should run in the newest version of all major browsers. So we'll just use a function wrapper for now (adding "last 1 ios version" to the build target does a bunch of other unneeded transpilations).
+            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks
+            for await (const href of (0, $46MJV$depictaiutilishared.href_change_ipns))$37e96a5ebc768cc7$export$3ccaa27d81dd8556.#visited_urls.add($37e96a5ebc768cc7$var$clean_url(href));
+        })();
+        return new Set();
+    })();
     get open_() {
         // make this "readonly" from the outside, the only way to open is by making the url change so that is_page_ returns true
         return this.#is_open;
     }
-    #listen = (0, $46MJV$depictaiutilishared.deparallelize)(async ()=>{
+    async #listen() {
         const [exit_ipns, exitable_ipns] = (0, $46MJV$depictaiutilishared.make_asyncIterable_exiter)((0, $46MJV$depictaiutilishared.href_change_ipns));
         this.#stop_listening = exit_ipns;
         const caught_page_check_fn = (0, $46MJV$depictaiutilishared.catchify)(this.is_page_, "page check failed");
@@ -7800,7 +7854,7 @@ class $37e96a5ebc768cc7$export$3ccaa27d81dd8556 extends EventTarget {
             if (!els?.length) continue;
             this.#load(els);
         }
-    });
+    }
     #get_rendered_recs() {
         return (0, $46MJV$solidjs.createRoot)((dispose)=>{
             this.addEventListener("close", dispose, {
@@ -7812,7 +7866,7 @@ class $37e96a5ebc768cc7$export$3ccaa27d81dd8556 extends EventTarget {
     #unload = (0, $46MJV$depictaiutilishared.catchify)(()=>{
         if (!this.#is_open) return;
         this.#disconnect_observer?.();
-        while(this.#revert_fns.length)this.#revert_fns.pop()?.();
+        if ($37e96a5ebc768cc7$export$3ccaa27d81dd8556.#reverting_permitted) while(this.#revert_fns.length)this.#revert_fns.pop()?.();
         this.#is_open = false;
         this.dispatchEvent(new CustomEvent("close"));
     }, "failed to close page");
@@ -7856,21 +7910,65 @@ class $37e96a5ebc768cc7$export$3ccaa27d81dd8556 extends EventTarget {
             document.title = this.title_;
             this.#revert_fns.push(()=>document.title = title);
         }
+        this.#empty_page_bugfix();
         this.dispatchEvent(new CustomEvent("open")); // we dispatch this once it's actually open
     }, "failed to open page");
+    #empty_page_bugfix() {
+        // Called when a "page" is "opened" using PageReplacer
+        const on_popstate = ()=>{
+            const cleaned_current_url = $37e96a5ebc768cc7$var$clean_url(location.href);
+            if (!$37e96a5ebc768cc7$export$3ccaa27d81dd8556.#visited_urls.has(cleaned_current_url)) {
+                /*
+        What does this check do? Well, there's a bug without it where people end up on a page that they shouldn't see (i.e. a somewhat blank page).
+        The culprit of that bug is: the browser remembers where to make "hard"-navigations (i.e. a full document rebuild with a new `document` and `window` object) when going back and forwards in the history and where to just change the url. What it doesn't always correctly remember (observed in at least chrome and firefox), is *what document to hard-navigate to*. Therefore, we have to jump in and take care of that.
+        The reproduction is this:
+          Spendrups has set up a search page for us under /start/search. We don't want to hard-reload the page though to get there.
+          1. Go to a product page like https://ehandel.spendrups.se/Product/1104201
+          2. Make a search
+          We use PageReplacer to just replace the current page (and the url in the address bar) with the search page. The thing is though, that when going back now the URL just updates but the browser doesn't actually navigate - that's fine, PageReplacer will just restore the old page contents
+          3. Try going back just for fun
+          Everything works as expected
+          4. Go forwards again (just for fun, skip this if you skipped 3)
+          Now the trouble comes when we introduce "hard" navigation.
+          5. Click on a search result. The browser will now "hard" navigate to a new page.
+          6. Click "back"
+          What happens now, is that the browser hard-navigates to /start/search.
+          7. Click "back" again
+          What happens now, is that the browser "soft-navigates" (just changes the URL) to https://ehandel.spendrups.se/Product/1104201
+          PageReplacer unload itself and reveals the original document - it is expected to be the one under https://ehandel.spendrups.se/Product/1104201, but actually it is the one under /start/search - a white page.
+           The fix: is to remember all pages that we have visited since the creation of `window` (we do that by having a static property on PageReplacer since we assume the PageReplacer source code will only exist once on the page and will be loaded at page load, the latter assumption might be wrong, but I hope not). If we get a "popstate" event (meaning back or forwards button, not new page being pushed) to an unknown page we reload.
+            */ (0, $46MJV$depictaiutilishared.dlog)("PageReplacer: ", cleaned_current_url, " hasn't been visited since document was created, reloading since we won't be able to show this page otherwise");
+                location.reload();
+                $37e96a5ebc768cc7$export$3ccaa27d81dd8556.#reverting_permitted = false; // Disallow any reverting since we can't - it would flash a white page until the reload has finished.
+                this.#unload(); // Call unload to "kill" the solid-js stuff quicker so that it stops updating - the user is expecting the next thing that happens to be a navigation to the actual page the URL says they're on.
+            }
+        };
+        (0, $46MJV$depictaiutilishared.instant_exec_on_popstate_before_ipns_update).add(on_popstate);
+        this.#revert_fns.push(()=>(0, $46MJV$depictaiutilishared.instant_exec_on_popstate_before_ipns_update).delete(on_popstate)); // Don't run the bugfixer if there isn't a PageReplacer page open since I assume the bug only happens when going back from a PageReplace'd page
+    }
     destroy_() {
         this.#unload();
         this.#stop_listening?.();
     }
-    constructor(options){
+    constructor({ is_spa_: is_spa_ , ...options }){
         super();
         Object.assign(this, options);
         this.#listen().catch((e)=>(0, $46MJV$depictaiutilishared.report)([
                 e,
                 "Error listening to URL change"
             ], "error"));
+        if (!is_spa_) (0, $d589470b68ce5b67$export$689e204eadb33baf)(this); // Make so that clicking on links to the previous page work instantly
     }
 }
+/**
+ * Remove hash from URL
+ */ function $37e96a5ebc768cc7$var$clean_url(url) {
+    // Would want to have this a static private function on PageReplacer, but that's not supported in MobileSafari yet
+    // remove hash, all other params *could* trigger a re-request
+    const url_object = new URL(url);
+    url_object.hash = "";
+    return url_object.href;
+}
 
 
 (0, $46MJV$depictaiutilishared.add_to_version_info)("ui", (0, $ae93561d5649a847$export$83d89fbfd8236492));

package/dist/module.js

@@ -1,8 +1,8 @@
-import {add_to_version_info as $g9l4l$add_to_version_info, fetch_recs as $g9l4l$fetch_recs, snakeCasifyObject as $g9l4l$snakeCasifyObject, GenericSliderArrowButton as $g9l4l$GenericSliderArrowButton, catchify as $g9l4l$catchify, base_url as $g9l4l$base_url, get_depict_id as $g9l4l$get_depict_id, get_user_id as $g9l4l$get_user_id, get_session_id as $g9l4l$get_session_id, dlog as $g9l4l$dlog, make_url_with_query_params as $g9l4l$make_url_with_query_params, fetch_retry as $g9l4l$fetch_retry, add_version_query_params as $g9l4l$add_version_query_params, sort_obj as $g9l4l$sort_obj, Tenant as $g9l4l$Tenant, Placeholder as $g9l4l$Placeholder, report as $g9l4l$report, javascript_media_query as $g9l4l$javascript_media_query, standard_price_format as $g9l4l$standard_price_format, deparallelize_no_drop as $g9l4l$deparallelize_no_drop, default_rr as $g9l4l$default_rr, make_random_classname as $g9l4l$make_random_classname, n_col_styling_with_dist as $g9l4l$n_col_styling_with_dist, observer as $g9l4l$observer, Lazyfier as $g9l4l$Lazyfier, queueMacroTask as $g9l4l$queueMacroTask, deparallelize as $g9l4l$deparallelize, Rec_Renderer as $g9l4l$Rec_Renderer, CrossIcon as $g9l4l$CrossIcon, useExpandingContainer as $g9l4l$useExpandingContainer, Amazing_Slider as $g9l4l$Amazing_Slider, slider_snap_css as $g9l4l$slider_snap_css, slider_fading_factory as $g9l4l$slider_fading_factory, MinusIcon as $g9l4l$MinusIcon, FilterIcon as $g9l4l$FilterIcon, SortIconAsc as $g9l4l$SortIconAsc, SortIconDesc as $g9l4l$SortIconDesc, PlusIcon as $g9l4l$PlusIcon, TickIcon as $g9l4l$TickIcon, ArrowUp as $g9l4l$ArrowUp, normal_get_product_id as $g9l4l$normal_get_product_id, ContainedPlaceholderImage as $g9l4l$ContainedPlaceholderImage, BackIcon as $g9l4l$BackIcon, SearchIcon as $g9l4l$SearchIcon, Layout as $g9l4l$Layout, make_placeholder_rr as $g9l4l$make_placeholder_rr, async_iterable_ipns as $g9l4l$async_iterable_ipns, make_asyncIterable_exiter as $g9l4l$make_asyncIterable_exiter, href_change_ipns as $g9l4l$href_change_ipns, depict_click as $g9l4l$depict_click, impression_track_element as $g9l4l$impression_track_element, add_new_tab_listener as $g9l4l$add_new_tab_listener, ContainedImage as $g9l4l$ContainedImage, buildThresholdList as $g9l4l$buildThresholdList, PreviousSearchIcon as $g9l4l$PreviousSearchIcon, insert_surfaces as $g9l4l$insert_surfaces} from "@depict-ai/utilishared";
+import {add_to_version_info as $g9l4l$add_to_version_info, fetch_recs as $g9l4l$fetch_recs, snakeCasifyObject as $g9l4l$snakeCasifyObject, GenericSliderArrowButton as $g9l4l$GenericSliderArrowButton, catchify as $g9l4l$catchify, base_url as $g9l4l$base_url, get_depict_id as $g9l4l$get_depict_id, get_user_id as $g9l4l$get_user_id, get_session_id as $g9l4l$get_session_id, dlog as $g9l4l$dlog, make_url_with_query_params as $g9l4l$make_url_with_query_params, fetch_retry as $g9l4l$fetch_retry, add_version_query_params as $g9l4l$add_version_query_params, sort_obj as $g9l4l$sort_obj, Tenant as $g9l4l$Tenant, Placeholder as $g9l4l$Placeholder, report as $g9l4l$report, javascript_media_query as $g9l4l$javascript_media_query, standard_price_format as $g9l4l$standard_price_format, deparallelize_no_drop as $g9l4l$deparallelize_no_drop, default_rr as $g9l4l$default_rr, make_random_classname as $g9l4l$make_random_classname, n_col_styling_with_dist as $g9l4l$n_col_styling_with_dist, observer as $g9l4l$observer, Lazyfier as $g9l4l$Lazyfier, queueMacroTask as $g9l4l$queueMacroTask, deparallelize as $g9l4l$deparallelize, Rec_Renderer as $g9l4l$Rec_Renderer, CrossIcon as $g9l4l$CrossIcon, useExpandingContainer as $g9l4l$useExpandingContainer, Amazing_Slider as $g9l4l$Amazing_Slider, slider_snap_css as $g9l4l$slider_snap_css, slider_fading_factory as $g9l4l$slider_fading_factory, MinusIcon as $g9l4l$MinusIcon, FilterIcon as $g9l4l$FilterIcon, SortIconAsc as $g9l4l$SortIconAsc, SortIconDesc as $g9l4l$SortIconDesc, PlusIcon as $g9l4l$PlusIcon, TickIcon as $g9l4l$TickIcon, ArrowUp as $g9l4l$ArrowUp, normal_get_product_id as $g9l4l$normal_get_product_id, ContainedPlaceholderImage as $g9l4l$ContainedPlaceholderImage, BackIcon as $g9l4l$BackIcon, SearchIcon as $g9l4l$SearchIcon, Layout as $g9l4l$Layout, make_placeholder_rr as $g9l4l$make_placeholder_rr, async_iterable_ipns as $g9l4l$async_iterable_ipns, make_asyncIterable_exiter as $g9l4l$make_asyncIterable_exiter, href_change_ipns as $g9l4l$href_change_ipns, depict_click as $g9l4l$depict_click, impression_track_element as $g9l4l$impression_track_element, add_new_tab_listener as $g9l4l$add_new_tab_listener, ContainedImage as $g9l4l$ContainedImage, buildThresholdList as $g9l4l$buildThresholdList, PreviousSearchIcon as $g9l4l$PreviousSearchIcon, insert_surfaces as $g9l4l$insert_surfaces, instant_exec_on_popstate_before_ipns_update as $g9l4l$instant_exec_on_popstate_before_ipns_update} from "@depict-ai/utilishared";
 import {template as $g9l4l$template, insert as $g9l4l$insert, effect as $g9l4l$effect, setAttribute as $g9l4l$setAttribute, createComponent as $g9l4l$createComponent, use as $g9l4l$use, addEventListener as $g9l4l$addEventListener, delegateEvents as $g9l4l$delegateEvents, spread as $g9l4l$spread, memo as $g9l4l$memo, style as $g9l4l$style, mergeProps as $g9l4l$mergeProps, classList as $g9l4l$classList, className as $g9l4l$className} from "solid-js/web";
 import {createSignal as $g9l4l$createSignal, onCleanup as $g9l4l$onCleanup, createComputed as $g9l4l$createComputed, createEffect as $g9l4l$createEffect, untrack as $g9l4l$untrack, batch as $g9l4l$batch, createResource as $g9l4l$createResource, createMemo as $g9l4l$createMemo, Show as $g9l4l$Show, createRenderEffect as $g9l4l$createRenderEffect, runWithOwner as $g9l4l$runWithOwner, createRoot as $g9l4l$createRoot, getOwner as $g9l4l$getOwner, on as $g9l4l$on, Index as $g9l4l$Index, For as $g9l4l$For, ErrorBoundary as $g9l4l$ErrorBoundary} from "solid-js";
 
-/*! Depict.ai search and product listing SDK */ const $18bf1d29fb889cca$export$83d89fbfd8236492 = "0.0.50";
+/*! Depict.ai search and product listing SDK */ const $18bf1d29fb889cca$export$83d89fbfd8236492 = "0.0.52";
 
 
 
@@ -4092,7 +4092,7 @@ function $1b5a927e48d892a1$export$5646050d516e06bc({ crumb_data_: get_api_crumb_
                             },
                             get children () {
                                 const _el$2 = $1b5a927e48d892a1$var$_tmpl$2.cloneNode(true);
-                                (0, $g9l4l$addEventListener)(_el$2, "click", (0, $g9l4l$catchify)((ev)=>on_crumb_click_?.(ev, display_accessor())), true);
+                                (0, $g9l4l$addEventListener)(_el$2, "click", (0, $g9l4l$catchify)((ev)=>on_crumb_click_(ev, display_accessor())), true);
                                 (0, $g9l4l$insert)(_el$2, ()=>display_accessor().title);
                                 (0, $g9l4l$effect)(()=>(0, $g9l4l$setAttribute)(_el$2, "href", display_accessor().page_url));
                                 return _el$2;
@@ -4259,7 +4259,7 @@ function $6af87e1502f04aa3$export$466cdc317043f6cb({ quicklinks_data_: quicklink
                                 const _el$3 = $6af87e1502f04aa3$var$_tmpl$3.cloneNode(true);
                                 (0, $g9l4l$addEventListener)(_el$3, "click", (0, $g9l4l$catchify)((ev)=>{
                                     if (is_selected() && !ev.metaKey && !ev.ctrlKey && !ev.button) ev.preventDefault();
-                                    else if (display_accessor()) on_link_click_?.(ev, display_accessor());
+                                    else if (display_accessor()) on_link_click_(ev, display_accessor());
                                 }), true);
                                 (0, $g9l4l$insert)(_el$3, ()=>display_accessor()?.title || (0, $g9l4l$createComponent)((0, $g9l4l$Placeholder), {
                                         height: "1em",
@@ -4927,7 +4927,7 @@ class $ec52ef1e6c117813$export$f34314aa9505732e {
                 category_scroll_restoration_data: []
             }));
         const i18n_ = (0, $0466953901b38f18$export$f091cbac892643a4)(this.#locale_signal[0]);
-        const on_category_link_click_ = on_navigation && ((e, d)=>{
+        const on_category_link_click_ = (e, d)=>{
             if (e.button || e.metaKey || e.ctrlKey) // Not single page navigating because button is not 0 or ctrl/command click
             return;
             try {
@@ -4941,7 +4941,7 @@ class $ec52ef1e6c117813$export$f34314aa9505732e {
                     throw e;
                 });
             }
-        });
+        };
         $ec52ef1e6c117813$var$privately_shared_properties.set(this, {
             state_: state_,
             breadcrumb_signal_: (0, $g9l4l$createSignal)(),
@@ -7691,6 +7691,47 @@ function $540e930c58500cbe$var$align_field_modal(style_props_, input, aligner_re
 
 
 
+const $7cbfd6122dbaf087$export$d86a33413558014e = (openModalParams)=>{
+    const { search: search  } = openModalParams;
+    openModalParams.location ||= "centered";
+    if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
+    if (openModalParams.location !== "aligned") {
+        // Open centered modal
+        search.modal_open = true;
+        return;
+    }
+    const alignment_height = openModalParams.element?.clientHeight;
+    if (isNaN(alignment_height)) {
+        // Open centered modal
+        search.modal_open = true;
+        return;
+    }
+    const { cleanup: cleanup  } = (0, $a79ffb1cbfbd2a09$export$828dcdd425fd3231)(openModalParams.element);
+    let dispose_aligner;
+    /**
+   * Setting position to fixed is important to make the modal work with align_field.
+   */ const style_props_ = (0, $g9l4l$createSignal)({
+        position: "fixed"
+    });
+    (0, $g9l4l$createRoot)((dispose)=>{
+        dispose_aligner = ()=>{
+            cleanup();
+            dispose();
+        };
+        (0, $079defea521d5e2a$export$b3ad617e9036868)(style_props_, openModalParams.element, undefined, false, "top");
+    });
+    search.modal_open = [
+        {
+            style_props_: style_props_
+        },
+        dispose_aligner
+    ];
+};
+
+
+
+
+
 
 
 function $a3e81b85527bc866$export$d0596b5cae35ad4(open_search) {
@@ -7746,16 +7787,28 @@ function $36316d7b4c897a03$export$689e204eadb33baf(pr) {
 
 
 
+
 class $ba6c9609228edf6b$export$3ccaa27d81dd8556 extends EventTarget {
     #stop_listening;
     #disconnect_observer;
     #revert_fns = [];
     #is_open = false;
+    static #reverting_permitted = true;
+    static #visited_urls = (()=>{
+        // Keep track of all URLs that have been visited since the document that was initially loaded (loaded means the process where the browser creates a new `document` and `window` object).
+        (0, $g9l4l$catchify)(async ()=>{
+            // Static initialization blocks aren't supported in MobileSafari yet, otherwise this would be one.
+            // I don't think we want to ship a library that users are *forced* to transpile, it should run in the newest version of all major browsers. So we'll just use a function wrapper for now (adding "last 1 ios version" to the build target does a bunch of other unneeded transpilations).
+            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks
+            for await (const href of (0, $g9l4l$href_change_ipns))$ba6c9609228edf6b$export$3ccaa27d81dd8556.#visited_urls.add($ba6c9609228edf6b$var$clean_url(href));
+        })();
+        return new Set();
+    })();
     get open_() {
         // make this "readonly" from the outside, the only way to open is by making the url change so that is_page_ returns true
         return this.#is_open;
     }
-    #listen = (0, $g9l4l$deparallelize)(async ()=>{
+    async #listen() {
         const [exit_ipns, exitable_ipns] = (0, $g9l4l$make_asyncIterable_exiter)((0, $g9l4l$href_change_ipns));
         this.#stop_listening = exit_ipns;
         const caught_page_check_fn = (0, $g9l4l$catchify)(this.is_page_, "page check failed");
@@ -7770,7 +7823,7 @@ class $ba6c9609228edf6b$export$3ccaa27d81dd8556 extends EventTarget {
             if (!els?.length) continue;
             this.#load(els);
         }
-    });
+    }
     #get_rendered_recs() {
         return (0, $g9l4l$createRoot)((dispose)=>{
             this.addEventListener("close", dispose, {
@@ -7782,7 +7835,7 @@ class $ba6c9609228edf6b$export$3ccaa27d81dd8556 extends EventTarget {
     #unload = (0, $g9l4l$catchify)(()=>{
         if (!this.#is_open) return;
         this.#disconnect_observer?.();
-        while(this.#revert_fns.length)this.#revert_fns.pop()?.();
+        if ($ba6c9609228edf6b$export$3ccaa27d81dd8556.#reverting_permitted) while(this.#revert_fns.length)this.#revert_fns.pop()?.();
         this.#is_open = false;
         this.dispatchEvent(new CustomEvent("close"));
     }, "failed to close page");
@@ -7826,24 +7879,68 @@ class $ba6c9609228edf6b$export$3ccaa27d81dd8556 extends EventTarget {
             document.title = this.title_;
             this.#revert_fns.push(()=>document.title = title);
         }
+        this.#empty_page_bugfix();
         this.dispatchEvent(new CustomEvent("open")); // we dispatch this once it's actually open
     }, "failed to open page");
+    #empty_page_bugfix() {
+        // Called when a "page" is "opened" using PageReplacer
+        const on_popstate = ()=>{
+            const cleaned_current_url = $ba6c9609228edf6b$var$clean_url(location.href);
+            if (!$ba6c9609228edf6b$export$3ccaa27d81dd8556.#visited_urls.has(cleaned_current_url)) {
+                /*
+        What does this check do? Well, there's a bug without it where people end up on a page that they shouldn't see (i.e. a somewhat blank page).
+        The culprit of that bug is: the browser remembers where to make "hard"-navigations (i.e. a full document rebuild with a new `document` and `window` object) when going back and forwards in the history and where to just change the url. What it doesn't always correctly remember (observed in at least chrome and firefox), is *what document to hard-navigate to*. Therefore, we have to jump in and take care of that.
+        The reproduction is this:
+          Spendrups has set up a search page for us under /start/search. We don't want to hard-reload the page though to get there.
+          1. Go to a product page like https://ehandel.spendrups.se/Product/1104201
+          2. Make a search
+          We use PageReplacer to just replace the current page (and the url in the address bar) with the search page. The thing is though, that when going back now the URL just updates but the browser doesn't actually navigate - that's fine, PageReplacer will just restore the old page contents
+          3. Try going back just for fun
+          Everything works as expected
+          4. Go forwards again (just for fun, skip this if you skipped 3)
+          Now the trouble comes when we introduce "hard" navigation.
+          5. Click on a search result. The browser will now "hard" navigate to a new page.
+          6. Click "back"
+          What happens now, is that the browser hard-navigates to /start/search.
+          7. Click "back" again
+          What happens now, is that the browser "soft-navigates" (just changes the URL) to https://ehandel.spendrups.se/Product/1104201
+          PageReplacer unload itself and reveals the original document - it is expected to be the one under https://ehandel.spendrups.se/Product/1104201, but actually it is the one under /start/search - a white page.
+           The fix: is to remember all pages that we have visited since the creation of `window` (we do that by having a static property on PageReplacer since we assume the PageReplacer source code will only exist once on the page and will be loaded at page load, the latter assumption might be wrong, but I hope not). If we get a "popstate" event (meaning back or forwards button, not new page being pushed) to an unknown page we reload.
+            */ (0, $g9l4l$dlog)("PageReplacer: ", cleaned_current_url, " hasn't been visited since document was created, reloading since we won't be able to show this page otherwise");
+                location.reload();
+                $ba6c9609228edf6b$export$3ccaa27d81dd8556.#reverting_permitted = false; // Disallow any reverting since we can't - it would flash a white page until the reload has finished.
+                this.#unload(); // Call unload to "kill" the solid-js stuff quicker so that it stops updating - the user is expecting the next thing that happens to be a navigation to the actual page the URL says they're on.
+            }
+        };
+        (0, $g9l4l$instant_exec_on_popstate_before_ipns_update).add(on_popstate);
+        this.#revert_fns.push(()=>(0, $g9l4l$instant_exec_on_popstate_before_ipns_update).delete(on_popstate)); // Don't run the bugfixer if there isn't a PageReplacer page open since I assume the bug only happens when going back from a PageReplace'd page
+    }
     destroy_() {
         this.#unload();
         this.#stop_listening?.();
     }
-    constructor(options){
+    constructor({ is_spa_: is_spa_ , ...options }){
         super();
         Object.assign(this, options);
         this.#listen().catch((e)=>(0, $g9l4l$report)([
                 e,
                 "Error listening to URL change"
             ], "error"));
+        if (!is_spa_) (0, $36316d7b4c897a03$export$689e204eadb33baf)(this); // Make so that clicking on links to the previous page work instantly
     }
 }
+/**
+ * Remove hash from URL
+ */ function $ba6c9609228edf6b$var$clean_url(url) {
+    // Would want to have this a static private function on PageReplacer, but that's not supported in MobileSafari yet
+    // remove hash, all other params *could* trigger a re-request
+    const url_object = new URL(url);
+    url_object.hash = "";
+    return url_object.href;
+}
 
 
 (0, $g9l4l$add_to_version_info)("ui", (0, $18bf1d29fb889cca$export$83d89fbfd8236492));
 
 
-export {$e95f1855a5e3864f$export$58e808b1db15d3bc as fetchDepictRecommendations, $ec52ef1e6c117813$export$de035477d6fef996 as QuickLinks, $ec52ef1e6c117813$export$5b7c3ce0ebe51f86 as BreadCrumbs, $6340962f8bafd049$export$b91cec6bdc6b32a1 as CategoryTitle, $9b693ea3ff420de6$export$824dde41348efed1 as embedded_num_products, $80a49d3809ecb080$export$643598a327b5833e as get_categories, $ec52ef1e6c117813$export$f34314aa9505732e as DepictCategory, $ec52ef1e6c117813$export$e2bf8ce7779e827e as CategoryPage, $540e930c58500cbe$export$ac6237957a15b3f0 as DepictSearch, $540e930c58500cbe$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $540e930c58500cbe$export$f2dc7e4e4aa11abb as SearchPage, $540e930c58500cbe$export$316f6f283ae64765 as SearchField, $aaacfac0064e97d9$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $079defea521d5e2a$export$b3ad617e9036868 as align_field, $246aa49a8f85c7f3$export$1233ca167bf71f9a as styles_to_valid_css_string, $a1123c5ed9b0ee29$export$fe334901e8bebd57 as disable_scrolling, $a3e81b85527bc866$export$d0596b5cae35ad4 as open_search_with_shift_slash, $972ebf2641490830$export$26df08e242fe83a3 as push_state_with_query_param_value, $3846bb34098c738f$export$e015ed2f2950f2e3 as DepictAPI, $fefe7683325039b3$export$d9f36cf74e24d595 as media_query_to_accessor, $36316d7b4c897a03$export$689e204eadb33baf as setup_fast_leave, $886fa987db4f3805$export$5196e4c01fa56fcb as show_toast, $5178263ed1e394ca$export$469c7af753d08925 as solid_format_price, $a79ffb1cbfbd2a09$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $ba6c9609228edf6b$export$3ccaa27d81dd8556 as PageReplacer, $18bf1d29fb889cca$export$83d89fbfd8236492 as version};
+export {$e95f1855a5e3864f$export$58e808b1db15d3bc as fetchDepictRecommendations, $ec52ef1e6c117813$export$de035477d6fef996 as QuickLinks, $ec52ef1e6c117813$export$5b7c3ce0ebe51f86 as BreadCrumbs, $6340962f8bafd049$export$b91cec6bdc6b32a1 as CategoryTitle, $9b693ea3ff420de6$export$824dde41348efed1 as embedded_num_products, $80a49d3809ecb080$export$643598a327b5833e as get_categories, $ec52ef1e6c117813$export$f34314aa9505732e as DepictCategory, $ec52ef1e6c117813$export$e2bf8ce7779e827e as CategoryPage, $540e930c58500cbe$export$ac6237957a15b3f0 as DepictSearch, $540e930c58500cbe$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $540e930c58500cbe$export$f2dc7e4e4aa11abb as SearchPage, $540e930c58500cbe$export$316f6f283ae64765 as SearchField, $7cbfd6122dbaf087$export$d86a33413558014e as open_modal_with_alignment, $aaacfac0064e97d9$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $079defea521d5e2a$export$b3ad617e9036868 as align_field, $246aa49a8f85c7f3$export$1233ca167bf71f9a as styles_to_valid_css_string, $a1123c5ed9b0ee29$export$fe334901e8bebd57 as disable_scrolling, $a3e81b85527bc866$export$d0596b5cae35ad4 as open_search_with_shift_slash, $972ebf2641490830$export$26df08e242fe83a3 as push_state_with_query_param_value, $3846bb34098c738f$export$e015ed2f2950f2e3 as DepictAPI, $fefe7683325039b3$export$d9f36cf74e24d595 as media_query_to_accessor, $36316d7b4c897a03$export$689e204eadb33baf as setup_fast_leave, $886fa987db4f3805$export$5196e4c01fa56fcb as show_toast, $5178263ed1e394ca$export$469c7af753d08925 as solid_format_price, $a79ffb1cbfbd2a09$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $ba6c9609228edf6b$export$3ccaa27d81dd8556 as PageReplacer, $18bf1d29fb889cca$export$83d89fbfd8236492 as version};