A tour that crosses a page load

A plain link loads a new page, and the tour carries on there from the first step of the story the last page named.

The story

// The storefront's last step waits for this, and only a real navigation
// makes it true: a plain `<a href>` with the query string changed is a
// cross-document load in every engine, so nothing here is a hash trick.
const CHECKOUT_URL = /[?&]page=checkout(?:[&#]|$)/

const storefront = {
  id: 'storefront',
  next: () => checkout,
  steps: [
    {
      id: 'look',
      target: '[data-storefront-heading]',
      message: 'Two documents. Nothing on this page will be on the next one.',
    },
    {
      id: 'go',
      target: { elements: '[data-checkout-link]', interactive: true },
      message:
        'Press this. The page it lands on is a new document — this story’s ' +
        '‘next’ is what that document runs.',
      awaits: { url: CHECKOUT_URL },
    },
  ],
} satisfies LekoStory

const checkout = {
  id: 'checkout',
  steps: [
    {
      id: 'summary',
      target: '[data-summary]',
      message:
        'The successor starts here, at its first step. Nothing crosses ' +
        'with it but its id — no index, no visual continuity with what ' +
        'ran before it. The readout says which of this page’s two ways ' +
        'in actually ran it.',
    },
    {
      id: 'back',
      target: { elements: '[data-back-link]', interactive: true },
      message:
        'Nothing is handed on from here — this step waits for no URL — ' +
        'so the storefront loads with no tour on it, and a reload of this ' +
        'page starts nothing either.',
    },
  ],
} satisfies LekoStory