modal_stack 0.4.1 → 0.4.3

data/app/assets/stylesheets/modal_stack/tailwind_v3.css

@@ -359,6 +359,41 @@ body[data-modal-stack-locked] {
   display: none;
 }
 
+/* --- Header slot ------------------------------------------------- */
+
+.modal-stack__panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.modal-stack__panel-title {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.modal-stack__panel-close {
+  font: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.55;
+  line-height: 1;
+  font-size: 1.4em;
+  flex-shrink: 0;
+  transition: opacity 150ms ease;
+}
+.modal-stack__panel-close:hover { opacity: 1; }
+.modal-stack__panel-close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
 /* --- Reduced motion ---------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {

data/app/assets/stylesheets/modal_stack/tailwind_v4.css

@@ -360,6 +360,41 @@ body[data-modal-stack-locked] {
   display: none;
 }
 
+/* --- Header slot ------------------------------------------------- */
+
+.modal-stack__panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.modal-stack__panel-title {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.modal-stack__panel-close {
+  font: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.55;
+  line-height: 1;
+  font-size: 1.4em;
+  flex-shrink: 0;
+  transition: opacity 150ms ease;
+}
+.modal-stack__panel-close:hover { opacity: 1; }
+.modal-stack__panel-close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
 /* --- Reduced motion ---------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {

data/app/assets/stylesheets/modal_stack/vanilla.css

@@ -326,6 +326,41 @@ body[data-modal-stack-locked] {
   display: none;
 }
 
+/* --- Header slot ------------------------------------------------- */
+
+.modal-stack__panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.modal-stack__panel-title {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.modal-stack__panel-close {
+  font: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.55;
+  line-height: 1;
+  font-size: 1.4em;
+  flex-shrink: 0;
+  transition: opacity 150ms ease;
+}
+.modal-stack__panel-close:hover { opacity: 1; }
+.modal-stack__panel-close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   #modal-stack-root,
   #modal-stack-root::backdrop,

data/app/javascript/modal_stack/controllers/modal_stack_controller.js

@@ -1,6 +1,7 @@
 import { Controller } from "@hotwired/stimulus";
 import { Orchestrator } from "../orchestrator.js";
 import { BrowserRuntime } from "../runtime.js";
+import { restore } from "../state.js";
 
 export class ModalStackController extends Controller {
   static values = {
@@ -10,33 +11,56 @@ export class ModalStackController extends Controller {
     maxDepthStrategy: { type: String, default: "warn" },
   };
 
+  #restoring = false;
+
   connect() {
-    const stackId = this.stackIdValue || generateLayerId();
     const baseUrl = this.baseUrlValue || window.location.href;
 
     this.runtime = new BrowserRuntime({ dialog: this.element });
-    const snapshot = this.runtime.readSnapshot();
+    // Restore frame HTML cache before reading snapshot so wizard frames
+    // saved in sessionStorage are available during #restoreSnapshot.
+    this.runtime.restoreFrameCacheFromStorage();
+    const savedSnapshot = this.runtime.readSnapshot();
+
+    // Peek at the snapshot (without stackId filter) to reuse the saved
+    // stackId across page reloads — otherwise a randomly generated stackId
+    // would never match the one saved in sessionStorage.
+    const snapshotState = savedSnapshot ? restore(savedSnapshot) : null;
+    const stackId =
+      this.stackIdValue || snapshotState?.stackId || generateLayerId();
 
     this.orchestrator = new Orchestrator({
       runtime: this.runtime,
       stackId,
       baseUrl,
-      restoreFrom: snapshot,
+      // Restoration is handled below via push() so each layer gets a
+      // phantom history entry and the back button closes them one by one.
+      restoreFrom: null,
       // Stimulus Number values default to 0, but state.js treats null as
       // "no cap" — so map 0/missing to null here.
       maxDepth: this.maxDepthValue > 0 ? this.maxDepthValue : null,
       maxDepthStrategy: this.maxDepthStrategyValue || "warn",
     });
 
-    this._onPopstate = (event) =>
+    this._onPopstate = (event) => {
+      // Run in capture phase so we fire before Turbo's bubble-phase popstate
+      // handler. When the popstate was triggered by our own historyBack
+      // (expectedPopstates > 0), stop propagation immediately after processing
+      // so Turbo never sees the event and cannot start a restoration visit
+      // (which shows the loading bar and replaces the body).
+      const isOwn = this.orchestrator.expectedPopstates > 0;
       this.orchestrator.onPopstate({
         historyState: event.state,
         locationHref: window.location.href,
       });
-    window.addEventListener("popstate", this._onPopstate);
+      if (isOwn) event.stopImmediatePropagation();
+    };
+    window.addEventListener("popstate", this._onPopstate, true);
 
     this._onCancel = (event) => {
       event.preventDefault();
+      if (!this.element.open) return;
+      if (this.#restoring) return;
       const top = this.#topLayer();
       if (!top || top.dismissible === false) return;
       this.orchestrator.pop();
@@ -45,22 +69,98 @@ export class ModalStackController extends Controller {
 
     this._onBackdropClick = (event) => {
       if (event.target !== this.element) return;
+      if (!this.element.open) return;
+      if (this.#restoring) return;
       const top = this.#topLayer();
       if (!top || top.dismissible === false) return;
       this.orchestrator.pop();
     };
     this.element.addEventListener("click", this._onBackdropClick);
 
+    // After any Turbo render (restoration, morph, stream-driven page update),
+    // re-check scroll lock. A snapshot cached while a modal was open can
+    // restore data-modal-stack-locked on body even after the modal has closed.
+    // turbo:before-cache strips the attribute before caching; this is the
+    // safety net for renders that fire from an already-stale cache.
+    this._onTurboRender = () => {
+      if (this.orchestrator.depth === 0) this.runtime.unlockScroll();
+    };
+    document.addEventListener("turbo:render", this._onTurboRender);
+
     this.#registerStreamActions();
+
+    if (snapshotState?.layers?.length > 0) {
+      this.#restoring = true;
+      this.#restoreSnapshot(snapshotState.layers)
+        .catch((err) =>
+          console.warn("[modal_stack] snapshot restore failed:", err),
+        )
+        .finally(() => {
+          this.#restoring = false;
+        });
+    }
+
     this.element.dispatchEvent(
-      new CustomEvent("modal_stack:ready", { bubbles: true, detail: { stackId } }),
+      new CustomEvent("modal_stack:ready", {
+        bubbles: true,
+        detail: { stackId },
+      }),
     );
   }
 
+  async #restoreSnapshot(layers) {
+    // Always open each layer from its first frame URL (accessible via GET).
+    const baseUrls = layers.map((l) => l.frames?.[0]?.url ?? l.url);
+
+    // Pre-fetch base frames in parallel so the push loop runs without any
+    // network await between iterations, eliminating the race window where
+    // Escape fires while this.state lags behind (only partial stack).
+    const baseFragments = await Promise.all(
+      baseUrls.map((url) => this.orchestrator.prefetch(url).catch(() => null)),
+    );
+
+    for (let i = 0; i < layers.length; i++) {
+      const layer = layers[i];
+      await this.orchestrator.push(
+        {
+          id: layer.id,
+          url: baseUrls[i],
+          variant: layer.variant,
+          dismissible: layer.dismissible,
+          size: layer.size,
+          side: layer.side,
+          width: layer.width,
+          height: layer.height,
+        },
+        { fragment: baseFragments[i] },
+      );
+
+      // Restore additional wizard frames using HTML saved to sessionStorage
+      // on the previous visit. Each frame may be a POST-only step that 404s
+      // on a direct GET — we use the cached HTML instead of re-fetching.
+      const extraFrames = (layer.frames ?? []).slice(1);
+      for (let fi = 0; fi < extraFrames.length; fi++) {
+        const frame = extraFrames[fi];
+        const frameIndex = fi + 1;
+        const cached = this.runtime.getFrameFragment(layer.id, frameIndex);
+        if (!cached) break; // Can't restore beyond this frame — stop here
+        // Warm the orchestrator's fragment cache so forward re-navigation
+        // after a back doesn't attempt a failing GET for this URL.
+        this.orchestrator.setFragmentCache(frame.url, cached.cloneNode(true));
+        await this.orchestrator.pathTo(
+          { url: frame.url, stale: frame.stale },
+          { fragment: cached.cloneNode(true) },
+        );
+      }
+    }
+  }
+
   disconnect() {
-    window.removeEventListener("popstate", this._onPopstate);
+    window.removeEventListener("popstate", this._onPopstate, true);
     this.element.removeEventListener("cancel", this._onCancel);
     this.element.removeEventListener("click", this._onBackdropClick);
+    document.removeEventListener("turbo:render", this._onTurboRender);
+    this.runtime.destroy?.();
   }
 
   push(layer, opts) {
@@ -207,7 +307,10 @@ function layerPatchFromStreamElement(el) {
 }
 
 function generateLayerId() {
-  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+  if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.randomUUID === "function"
+  ) {
     return crypto.randomUUID();
   }
   return `ms-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;

data/app/javascript/modal_stack/orchestrator.js

@@ -71,6 +71,10 @@ export class Orchestrator {
     return this.state.layers.length;
   }
 
+  get expectedPopstates() {
+    return this.#expectedPopstates;
+  }
+
   /**
    * Push a layer. When `html`/`fragment` are absent, the orchestrator
    * pre-fetches the URL so `mountLayer` is a sync DOM append (no flash).
@@ -194,6 +198,18 @@ export class Orchestrator {
     this.#fragmentCache.clear();
   }
 
+  // Seed the fragment cache with a known fragment for a URL. Used during
+  // snapshot restore to ensure forward re-navigation to a POST-only wizard
+  // step reuses the cached HTML rather than attempting a failing GET fetch.
+  setFragmentCache(url, fragment) {
+    if (!url || !fragment) return;
+    this.#fragmentCache.set(url, {
+      fragment: cloneFragment(fragment),
+      stale: false,
+      ts: Date.now(),
+    });
+  }
+
   // Warm the prefetch cache for `url` without mutating the stack. Safe
   // to call repeatedly for the same URL (deduped via #inflight) and from
   // hover/focus handlers; failures are swallowed since this is best-effort.
@@ -217,9 +233,7 @@ export class Orchestrator {
     // A popstate arriving while we have prefetches in flight means the
     // user navigated away from any URL we were preloading; drop them.
     this.#invalidatePrefetch();
-    return this.#dispatch(
-      handlePopstate(this.state, { historyState, locationHref }),
-    );
+    return this.#dispatch(handlePopstate(this.state, { historyState, locationHref }));
   }
 
   async #dispatch({ state, commands }, payload = {}) {

data/app/javascript/modal_stack/orchestrator.test.js

@@ -299,12 +299,12 @@ describe("closeAll", () => {
     const types = runtime._calls.map((c) => c.type);
     expect(types).toEqual([
       "closeDialog",
+      "clearSnapshot",
       "unmountAllLayers",
       "clearFrameCache",
       "clearFrameCache",
       "unlockScroll",
       "historyBack",
-      "clearSnapshot",
     ]);
 
     runtime._calls.length = 0;
@@ -561,10 +561,10 @@ describe("onPopstate", () => {
     const types = runtime._calls.map((c) => c.type);
     expect(types).toEqual([
       "closeDialog",
+      "clearSnapshot",
       "unmountAllLayers",
       "clearFrameCache",
       "unlockScroll",
-      "clearSnapshot",
     ]);
     expect(types).not.toContain("historyBack");
   });

data/app/javascript/modal_stack/runtime.js

@@ -1,4 +1,5 @@
 export const SNAPSHOT_KEY = "modalStackSnapshot";
+export const FRAME_HTML_KEY = "modalStackFrameHtml";
 export const FRAGMENT_HEADER = "X-Modal-Stack-Request";
 // Server response header that flags the just-rendered frame as stale —
 // the runtime will refetch instead of restoring from the in-memory cache
@@ -27,11 +28,17 @@ const LEAVE_TIMEOUT_FALLBACK_MS = 600;
  * `orchestrator.test.js` for an in-memory fake).
  */
 export class BrowserRuntime {
+  // Counter: incremented per historyBack call, decremented per Turbo visit
+  // cancelled. Guards every popstate that lands on a Turbo-owned entry.
+  #suppressTurboVisitCount = 0;
+  #suppressTurboVisitTimer = null;
+
   /**
    * @param {Object} options
    * @param {HTMLDialogElement} options.dialog
    * @param {HTMLElement} [options.body]
    * @param {History} [options.history]
+   * @param {Location} [options.location]
    * @param {typeof fetch} [options.fetcher]
    * @param {Storage} [options.store]
    * @param {Document} [options.documentRef]
@@ -40,6 +47,7 @@ export class BrowserRuntime {
     dialog,
     body = globalThis.document?.body,
     history = globalThis.history,
+    location = globalThis.location,
     fetcher = globalThis.fetch?.bind(globalThis),
     store = globalThis.sessionStorage,
     documentRef = globalThis.document,
@@ -50,6 +58,7 @@ export class BrowserRuntime {
     this.dialog = dialog;
     this.body = body;
     this.history = history;
+    this.location = location;
     this.fetcher = fetcher;
     this.store = store;
     this.document = documentRef;
@@ -57,6 +66,44 @@ export class BrowserRuntime {
     // Populated by mountFrame on the way forward, drained by unmountFrame on
     // the way back, purged on layer teardown via clearFrameCache.
     this._frameCache = new Map();
+
+    // When our historyBack() navigates back to the original page-load history
+    // entry, that entry carries Turbo's restorationIdentifier. Turbo sees it on
+    // popstate and starts a restoration visit which replaces the body — including
+    // restoring a cached snapshot that had data-modal-stack-locked baked in,
+    // leaving the page scroll-locked after the modal closes.
+    //
+    // We intercept turbo:before-visit and cancel the *one* restoration triggered
+    // by our own historyBack. The flag is armed in historyBack and consumed (or
+    // timed out) immediately so it cannot suppress a user-initiated navigation.
+    this.#suppressTurboVisitCount = 0;
+    this._turboVisitGuard = (event) => {
+      if (this.#suppressTurboVisitCount <= 0) return;
+      this.#suppressTurboVisitCount -= 1;
+      if (this.#suppressTurboVisitCount === 0) clearTimeout(this.#suppressTurboVisitTimer);
+      event.preventDefault();
+    };
+    documentRef.addEventListener?.("turbo:before-visit", this._turboVisitGuard);
+
+    // Turbo caches a page snapshot before navigating away. If the modal is
+    // open at cache time, data-modal-stack-locked is baked into the snapshot.
+    // When Turbo later restores or morphs from that snapshot, the attribute
+    // is re-applied to body, leaving the page scroll-locked even though no
+    // modal is open. Stripping the lock before cache keeps snapshots clean.
+    this._turboBeforeCache = () => {
+      if (!this.body) return;
+      delete this.body.dataset.modalStackLocked;
+      const root = this.document?.documentElement;
+      if (root) root.style.removeProperty(SCROLLBAR_WIDTH_VAR);
+    };
+    documentRef.addEventListener?.("turbo:before-cache", this._turboBeforeCache);
+  }
+
+  // Called by the Stimulus controller on disconnect so the global listener
+  // is cleaned up if the element leaves the DOM (e.g. full page navigation).
+  destroy() {
+    this.document?.removeEventListener?.("turbo:before-visit", this._turboVisitGuard);
+    this.document?.removeEventListener?.("turbo:before-cache", this._turboBeforeCache);
   }
 
   showDialog() {
@@ -130,6 +177,10 @@ export class BrowserRuntime {
     // animateOut below operates on the wrapper, which we'll throw away.
     const oldFrame = this.#findFrame(layer, fromFrameIndex);
     if (oldFrame) {
+      // Fire before detach so listeners can still read live form values.
+      this.#dispatchFrameEvent("modal_stack:frame-leave", {
+        layerId, frameIndex: fromFrameIndex, direction: "forward",
+      });
       const cached = this.document.createDocumentFragment();
       cached.append(...oldFrame.childNodes);
       this._frameCache.set(this.#frameKey(layerId, fromFrameIndex), cached);
@@ -140,6 +191,13 @@ export class BrowserRuntime {
     layer.appendChild(newFrame);
     this.#applyFrameDepth(layer, toFrameIndex);
 
+    // Persist the incoming frame's HTML so it can be restored across page
+    // reloads. Frame 0 is always the layer's initial mount (accessible via
+    // GET); frames 1+ may be POST-only wizard steps that 404 on direct fetch.
+    if (toFrameIndex > 0) {
+      this.#persistFrameHtml(layerId, toFrameIndex, newFrame.innerHTML);
+    }
+
     // Old frame is removed synchronously. Entering frames carry
     // data-transition + data-direction so host CSS can drive the *enter*
     // animation via @starting-style; the leaving frame would need its own
@@ -147,6 +205,11 @@ export class BrowserRuntime {
     // which we leave to the host CSS preset.
     if (oldFrame) oldFrame.remove();
 
+    // Fire after mount so listeners can read/populate the new frame's DOM.
+    this.#dispatchFrameEvent("modal_stack:frame-enter", {
+      layerId, frameIndex: toFrameIndex, direction: "forward",
+    });
+
     // Remove transition attrs once the animation completes so the :has()
     // rule that clips overflow doesn't persist indefinitely.
     if (transition) this.#cleanupFrameTransition(newFrame);
@@ -156,6 +219,11 @@ export class BrowserRuntime {
     const layer = this.#findLayer(layerId);
     if (!layer) return;
 
+    // Fire before detach so listeners can still read live form values.
+    this.#dispatchFrameEvent("modal_stack:frame-leave", {
+      layerId, frameIndex: fromFrameIndex, direction: "back",
+    });
+
     const cacheKey = this.#frameKey(layerId, toFrameIndex);
     let restored = stale ? null : this._frameCache.get(cacheKey) ?? null;
     if (!restored) {
@@ -181,6 +249,11 @@ export class BrowserRuntime {
     const oldFrame = this.#findFrame(layer, fromFrameIndex);
     if (oldFrame) oldFrame.remove();
 
+    // Fire after mount so listeners can restore data into the returned frame.
+    this.#dispatchFrameEvent("modal_stack:frame-enter", {
+      layerId, frameIndex: toFrameIndex, direction: "back",
+    });
+
     if (transition) this.#cleanupFrameTransition(newFrame);
   }
 
@@ -189,6 +262,7 @@ export class BrowserRuntime {
     for (const key of [...this._frameCache.keys()]) {
       if (key.startsWith(prefix)) this._frameCache.delete(key);
     }
+    this.#removeFrameHtmlForLayer(layerId);
   }
 
   async unmountTopLayer() {
@@ -203,15 +277,25 @@ export class BrowserRuntime {
     await Promise.all(layers.map((l) => animateOut(l, timeout)));
   }
 
-  pushHistory({ url, historyState }) {
-    this.history.pushState(historyState, "", url);
+  pushHistory({ historyState }) {
+    this.history.pushState(historyState, "", this.location?.href ?? "");
   }
 
-  replaceHistory({ url, historyState }) {
-    this.history.replaceState(historyState, "", url);
+  replaceHistory({ historyState }) {
+    this.history.replaceState(historyState, "", this.location?.href ?? "");
   }
 
   historyBack({ n }) {
+    // Arm the guard before calling history.go so turbo:before-visit (which
+    // fires synchronously inside Turbo's popstate handler) can cancel the
+    // restoration visit. A safety timeout clears the flag if the popstate
+    // never triggers a Turbo visit (i.e. we landed on one of our own phantom
+    // entries that lack Turbo's restorationIdentifier).
+    this.#suppressTurboVisitCount += 1;
+    clearTimeout(this.#suppressTurboVisitTimer);
+    this.#suppressTurboVisitTimer = setTimeout(() => {
+      this.#suppressTurboVisitCount = 0;
+    }, 1000);
     this.history.go(-n);
   }
 
@@ -235,6 +319,7 @@ export class BrowserRuntime {
     if (!this.store) return;
     try {
       this.store.removeItem(SNAPSHOT_KEY);
+      this.store.removeItem(FRAME_HTML_KEY);
     } catch {
       // ignore
     }
@@ -249,6 +334,60 @@ export class BrowserRuntime {
     }
   }
 
+  // Preloads _frameCache from sessionStorage so wizard frames saved across
+  // reloads can be restored via pathTo without re-fetching their URLs.
+  restoreFrameCacheFromStorage() {
+    const map = this.#readFrameHtmlMap();
+    for (const [key, html] of Object.entries(map)) {
+      this._frameCache.set(key, parseFragment(html, this.document));
+    }
+  }
+
+  // Returns the cached fragment for a specific frame (used during restoration).
+  getFrameFragment(layerId, frameIndex) {
+    return this._frameCache.get(this.#frameKey(layerId, frameIndex)) ?? null;
+  }
+
+  #persistFrameHtml(layerId, frameIndex, html) {
+    if (!this.store) return;
+    try {
+      const map = this.#readFrameHtmlMap();
+      map[`${layerId}#${frameIndex}`] = html;
+      this.store.setItem(FRAME_HTML_KEY, JSON.stringify(map));
+    } catch {
+      // sessionStorage full or unavailable — best effort
+    }
+  }
+
+  #readFrameHtmlMap() {
+    try {
+      const raw = this.store?.getItem(FRAME_HTML_KEY);
+      return raw ? JSON.parse(raw) : {};
+    } catch {
+      return {};
+    }
+  }
+
+  #removeFrameHtmlForLayer(layerId) {
+    if (!this.store) return;
+    try {
+      const map = this.#readFrameHtmlMap();
+      const prefix = `${layerId}#`;
+      let changed = false;
+      for (const key of Object.keys(map)) {
+        if (key.startsWith(prefix)) { delete map[key]; changed = true; }
+      }
+      if (!changed) return;
+      if (Object.keys(map).length === 0) {
+        this.store.removeItem(FRAME_HTML_KEY);
+      } else {
+        this.store.setItem(FRAME_HTML_KEY, JSON.stringify(map));
+      }
+    } catch {
+      // ignore
+    }
+  }
+
   // Reads --modal-stack-duration from the dialog's computed style and
   // returns 1.5× that as the safety timeout (in ms). Cached after the
   // first successful read since the variable is host-CSS-defined and
@@ -293,6 +432,12 @@ export class BrowserRuntime {
     return `${layerId}#${frameIndex}`;
   }
 
+  #dispatchFrameEvent(name, detail) {
+    this.dialog.dispatchEvent(
+      new CustomEvent(name, { bubbles: true, detail }),
+    );
+  }
+
   #purgeFrameCacheAbove(layerId, frameIndex) {
     const prefix = `${layerId}#`;
     for (const key of [...this._frameCache.keys()]) {

data/app/javascript/modal_stack/runtime.test.js

@@ -97,20 +97,21 @@ describe("snapshot storage", () => {
 });
 
 describe("history wiring", () => {
-  test("pushHistory / replaceHistory / historyBack delegate to history", () => {
+  test("pushHistory / replaceHistory always use current location.href, ignoring the modal url", () => {
     const calls = [];
     const history = {
       pushState: (s, t, u) => calls.push(["push", s, t, u]),
       replaceState: (s, t, u) => calls.push(["replace", s, t, u]),
       go: (n) => calls.push(["go", n]),
     };
-    const rt = new BrowserRuntime(noopRuntimeArgs({ history }));
-    rt.pushHistory({ url: "/a", historyState: { x: 1 } });
-    rt.replaceHistory({ url: "/b", historyState: { y: 2 } });
+    const location = { href: "http://example.com/origin" };
+    const rt = new BrowserRuntime(noopRuntimeArgs({ history, location }));
+    rt.pushHistory({ url: "/modal-a", historyState: { x: 1 } });
+    rt.replaceHistory({ url: "/modal-b", historyState: { y: 2 } });
     rt.historyBack({ n: 3 });
     expect(calls).toEqual([
-      ["push", { x: 1 }, "", "/a"],
-      ["replace", { y: 2 }, "", "/b"],
+      ["push", { x: 1 }, "", "http://example.com/origin"],
+      ["replace", { y: 2 }, "", "http://example.com/origin"],
       ["go", -3],
     ]);
   });