pageturn 0.1.0 → 0.2.0

package/dist/chunks/chunk-LM3XLSCW.js

@@ -0,0 +1,799 @@
+import {
+  arrival,
+  defineMove
+} from "./chunk-6FXXBNAF.js";
+import {
+  readSession,
+  removeSession,
+  writeSession
+} from "./chunk-JHM7F4CH.js";
+import {
+  afterDomContentLoaded,
+  giveFocusTo,
+  inBrowser,
+  navigationEntry,
+  notShownAnew,
+  reducesMotion
+} from "./chunk-AEOAXMU3.js";
+import {
+  isDeclined,
+  registry
+} from "./chunk-YAL4MNCU.js";
+
+// src/morph/end.ts
+var wait = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)), within = (promise, milliseconds) => Promise.race([promise, wait(milliseconds).then(() => null)]), isEnding = (animation) => Number.isFinite(animation.effect?.getComputedTiming().endTime), CORNERS = ["TopLeft", "TopRight", "BottomRight", "BottomLeft"], cornersOf = (radius) => typeof radius == "number" ? [radius, radius, radius, radius] : radius, radiusOf = (corners) => corners.every((corner) => corner === corners[0]) ? corners[0] : corners;
+function ownCorners(style, width, scale = 1) {
+  return radiusOf(
+    CORNERS.map((corner) => {
+      let value = style[`border${corner}Radius`], radius = Number.parseFloat(value) || 0;
+      return value.includes("%") ? radius / 100 * width : radius * scale;
+    })
+  );
+}
+var cornersCss = (radius, scale = 1) => cornersOf(radius).map((corner) => `${corner / scale}px`).join(" ");
+function seenCorners(element, box) {
+  let corners = [
+    ...cornersOf(ownCorners(getComputedStyle(element), box.width))
+  ], near = (one, other) => Math.abs(one - other) < 1;
+  for (let clip = element.parentElement; clip && clip !== document.body; clip = clip.parentElement) {
+    let style = getComputedStyle(clip);
+    if (style.overflow === "visible" && !/paint|strict|content/.test(style.contain))
+      continue;
+    let edge = clip.getBoundingClientRect(), left = edge.left + clip.clientLeft, top = edge.top + clip.clientTop, right = near(box.right, left + clip.clientWidth), bottom = near(box.bottom, top + clip.clientHeight), atLeft = near(box.left, left), atTop = near(box.top, top), radii = cornersOf(ownCorners(style, edge.width)), border = Math.max(clip.clientLeft, clip.clientTop);
+    [
+      atLeft && atTop,
+      right && atTop,
+      right && bottom,
+      atLeft && bottom
+    ].forEach((meets, index) => {
+      meets && (corners[index] = Math.max(
+        corners[index] ?? 0,
+        (radii[index] ?? 0) - border
+      ));
+    });
+  }
+  return radiusOf(corners);
+}
+function endOf(element) {
+  let rect = element.getBoundingClientRect(), { left, top, width, height } = rect, end = {
+    box: { left, top, width, height },
+    radius: seenCorners(element, rect)
+  }, picture2 = element.matches("img") ? element : element.querySelector("img");
+  return picture2?.sizes && (end.sizes = picture2.sizes), end;
+}
+var shifted = (end, x, y) => ({
+  ...end,
+  box: { ...end.box, left: end.box.left + x, top: end.box.top + y }
+}), looksSame = (one, other) => {
+  let drawn = (end) => [
+    end.box.left,
+    end.box.top,
+    end.box.width,
+    end.box.height,
+    ...cornersOf(end.radius),
+    end.rotate ?? 0,
+    end.text?.box.left ?? 0,
+    end.text?.box.top ?? 0,
+    Number.parseFloat(end.text?.type.fontSize ?? "0")
+  ], others = drawn(other);
+  return drawn(one).every(
+    (value, index) => Math.abs(value - (others[index] ?? 0)) < 0.5
+  ) && one.text?.color === other.text?.color && one.background === other.background;
+};
+function atTheirEnd(animations, read) {
+  let held = animations.filter(isEnding), times = held.map((animation) => animation.currentTime);
+  for (let animation of held)
+    animation.currentTime = animation.effect?.getComputedTiming().endTime;
+  try {
+    return read();
+  } finally {
+    held.forEach((animation, index) => {
+      animation.currentTime = times[index] ?? null;
+    });
+  }
+}
+
+// src/morph/layer.ts
+var LAYER_STYLE = "position:fixed;inset:auto;left:0;top:0;margin:0;border:0;padding:0;overflow:visible;background:none;color:inherit;pointer-events:none;z-index:2147483647;transform-origin:50% 50%;max-width:none;max-height:none", CONTENT_STYLE = "margin:0;max-width:none;max-height:none;box-sizing:border-box;visibility:visible;translate:none;rotate:none;scale:none;transform:none";
+function cloned(element) {
+  let copy = element.cloneNode(!0);
+  for (let named of [copy, ...copy.querySelectorAll("[id]")])
+    named.removeAttribute("id");
+  return copy;
+}
+var sizeOf = (layer) => [
+  Number.parseFloat(layer.style.width),
+  Number.parseFloat(layer.style.height)
+], centredOn = (box, width, height) => `${box.left + (box.width - width) / 2}px ${box.top + (box.height - height) / 2}px`, moveAt = (pose, end) => ({
+  ...pose.move,
+  opacity: end.opacity ?? 1
+});
+function standAt(layer, kind, end) {
+  let pose = kind.pose(layer)(end);
+  Object.assign(layer.style, moveAt(pose, end)), Object.assign(pose.on.style, pose.look), pose.inner && Object.assign(pose.inner.on.style, pose.inner.look);
+}
+function markup(layer) {
+  let copy = layer.cloneNode(!0);
+  for (let shot of copy.querySelectorAll("[data-turn-shot]")) shot.remove();
+  let drawn = layer.querySelectorAll("img");
+  copy.querySelectorAll("img").forEach((picture2, index) => {
+    let live = drawn[index], file = live?.complete && live.naturalWidth ? live.currentSrc : picture2.dataset.turnFile;
+    if (file) {
+      picture2.src = file, picture2.removeAttribute("srcset"), picture2.removeAttribute("sizes");
+      for (let source of picture2.parentElement?.querySelectorAll("source") ?? [])
+        source.remove();
+    }
+  });
+  for (let styled of [
+    copy,
+    ...copy.querySelectorAll("[style]")
+  ])
+    styled.dataset.turnStyle = styled.style.cssText, styled.removeAttribute("style");
+  return copy.outerHTML;
+}
+
+// src/morph/picture.ts
+var PICTURE_WAIT_MS = 250, MEDIA = "img,video,canvas";
+async function whenDrawn(element) {
+  let picture2 = element.matches("img") ? element : element.querySelector("img");
+  picture2 instanceof HTMLImageElement && await within(picture2.decode(), PICTURE_WAIT_MS).catch(() => {
+  });
+}
+function snapshot(shown, width, height, position) {
+  let { naturalWidth, naturalHeight } = shown;
+  if (!shown.complete || !naturalWidth || !naturalHeight) return null;
+  let canvas = document.createElement("canvas"), cover = Math.max(width / naturalWidth, height / naturalHeight), across = width / cover, down = height / cover, [x = 0.5, y = 0.5] = position.split(" ").map(
+    (share) => share.endsWith("%") ? Number.parseFloat(share) / 100 : 0.5
+  );
+  canvas.width = Math.round(across), canvas.height = Math.round(down);
+  try {
+    canvas.getContext("2d")?.drawImage(
+      shown,
+      (naturalWidth - across) * x,
+      (naturalHeight - down) * y,
+      across,
+      down,
+      0,
+      0,
+      canvas.width,
+      canvas.height
+    );
+  } catch {
+    return null;
+  }
+  return canvas.dataset.turnShot = "", canvas.style.cssText = "position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1", canvas;
+}
+function pictureOf(element) {
+  let inside = element.querySelectorAll(MEDIA);
+  return element.matches(MEDIA) ? element : inside.length === 1 ? inside[0] : null;
+}
+var picture = {
+  read(element, end) {
+    let inner = pictureOf(element);
+    if (!inner || inner === element) return;
+    let style = getComputedStyle(inner), own = new DOMMatrix(style.transform), zoom = Math.hypot(own.a, own.b) * (Number.parseFloat(style.scale) || 1);
+    Math.abs(zoom - 1) > 1e-3 && (end.zoom = zoom);
+  },
+  build(element, from, to) {
+    let layer = document.createElement("div"), media = pictureOf(element), content = cloned(
+      media ? media.closest("picture") ?? media : element
+    ), drawn = content.matches(MEDIA) ? content : (media && content.querySelector(MEDIA)) ?? content;
+    drawn !== content && (content.style.cssText = "display:contents"), content.dataset.turnContent = "", drawn.style.cssText += `;display:block;width:100%;height:100%;${CONTENT_STYLE}`, media && (drawn.style.objectFit = "cover", drawn.style.objectPosition = getComputedStyle(media).objectPosition);
+    let { width, height } = (to ?? from).box;
+    if (layer.style.cssText = `${LAYER_STYLE};width:${width}px;height:${height}px`, layer.append(content), drawn instanceof HTMLImageElement && media instanceof HTMLImageElement) {
+      if (drawn.loading = "eager", drawn.decoding = "sync", drawn.dataset.turnFile = media.currentSrc, to) {
+        let sizes = to.sizes ?? `${Math.ceil(width)}px`;
+        for (let sized of layer.querySelectorAll("img[srcset],source[srcset]"))
+          sized.sizes = sizes;
+      }
+      let shot = snapshot(media, width, height, drawn.style.objectPosition);
+      if (shot) {
+        layer.append(shot);
+        let drew = () => {
+          drawn.decode().then(
+            () => shot.remove(),
+            () => {
+            }
+          );
+        };
+        drawn.complete && drawn.naturalWidth ? drew() : drawn.addEventListener("load", drew, { once: !0 });
+      }
+    }
+    return layer;
+  },
+  pose(layer) {
+    let [width, height] = sizeOf(layer), held = layer.querySelector(MEDIA) ?? layer.firstElementChild;
+    return ({ box, rotate = 0, radius, zoom = 1 }) => {
+      let cover = Math.max(box.width / width, box.height / height);
+      return {
+        move: {
+          translate: centredOn(box, width, height),
+          rotate: `${rotate}deg`,
+          scale: `${cover}`
+        },
+        look: {
+          clipPath: `inset(${(height - box.height / cover) / 2}px ${(width - box.width / cover) / 2}px round ${cornersCss(radius, cover)})`
+        },
+        on: layer,
+        inner: { look: { scale: `${zoom}` }, on: held }
+      };
+    };
+  },
+  fit(layer, to) {
+    layer.style.width = `${to.box.width}px`, layer.style.height = `${to.box.height}px`;
+  }
+};
+
+// src/morph/place.ts
+var MORPH_KEY = "pageturn:morph", outsideLayer = (selector) => `:is(${selector}):not([data-turn-layer] *)`, onPage = (selector) => document.querySelector(outsideLayer(selector));
+function whenParsed(run) {
+  document.readyState === "loading" ? document.addEventListener("readystatechange", run, { once: !0 }) : run();
+}
+function putBack(selector, name, reopens = !1, kept = [], link) {
+  let root = document.documentElement;
+  root.dataset.turnRestoring = "", notShownAnew();
+  let around = [];
+  whenParsed(() => {
+    let origin = null;
+    try {
+      origin = selector ? onPage(selector) : null;
+    } catch {
+    }
+    origin?.setAttribute("data-turn-origin", name);
+    for (let [where, attribute, value] of kept)
+      try {
+        let element = document.querySelector(where);
+        value === null ? element?.removeAttribute(attribute) : element?.setAttribute(attribute, value);
+      } catch {
+      }
+    for (let within2 = origin?.parentElement?.closest("[popover]"); reopens && within2; within2 = within2.parentElement?.closest("[popover]"))
+      around.unshift(within2);
+    for (let popover of around)
+      try {
+        popover.showPopover();
+      } catch {
+      }
+  }), afterDomContentLoaded(
+    () => requestAnimationFrame(
+      () => requestAnimationFrame(() => {
+        link && giveFocusBack(link, around), delete root.dataset.turnRestoring;
+      })
+    )
+  );
+}
+var linkAt = (address, rank) => [...document.querySelectorAll("a[href]")].filter(
+  (anchor) => anchor.href === address
+)[rank];
+function giveFocusBack([address, rank, isShown], around) {
+  let focused = document.activeElement, target = linkAt(address, rank);
+  target && (!focused || focused === document.body || around.some((popover) => popover.contains(focused))) && giveFocusTo(target, {
+    preventScroll: !0,
+    focusVisible: isShown
+  });
+}
+function showLayer(layer) {
+  layer.setAttribute("aria-hidden", "true"), layer.setAttribute("popover", "manual"), layer.dataset.turnLayer = "", document.documentElement.append(layer);
+  try {
+    layer.showPopover();
+  } catch {
+  }
+}
+function placeHandedLayer() {
+  if (window.top !== window) {
+    try {
+      let fromName = JSON.parse(
+        window.name.split(`${MORPH_KEY}:`)[1] ?? ""
+      );
+      whenParsed(() => scrollTo(fromName.x, fromName.y)), putBack(fromName.p, fromName.o, fromName.v, fromName.w), window.pageturn && (window.pageturn.behind = { move: fromName.m, data: fromName.d });
+    } catch {
+    }
+    return null;
+  }
+  let flight = readSession(MORPH_KEY);
+  if (removeSession(MORPH_KEY), !flight || flight.n !== window.pageturn?.arrival?.move) return null;
+  let holder = document.createElement("div");
+  holder.innerHTML = flight.h;
+  let layer = holder.firstElementChild;
+  if (!(layer instanceof HTMLElement)) return null;
+  let sheet = null;
+  if (flight.s)
+    try {
+      let rule = new CSSStyleSheet();
+      rule.insertRule(`${outsideLayer(flight.s)}{visibility:hidden!important}`), document.adoptedStyleSheets = [...document.adoptedStyleSheets, rule], sheet = rule;
+    } catch {
+    }
+  for (let styled of [
+    layer,
+    ...layer.querySelectorAll("[data-turn-style]")
+  ])
+    styled.style.cssText = styled.dataset.turnStyle ?? "";
+  showLayer(layer);
+  let placed = { flight, layer, sheet, taken: !1 };
+  flight.b && (document.documentElement.dataset.turnBehind = "");
+  let { x = 0, y } = flight;
+  return y !== void 0 && whenParsed(() => scrollTo(x, y)), flight.o && putBack(flight.s, flight.o, flight.v, flight.w, flight.l), afterDomContentLoaded(
+    () => setTimeout(() => placed.taken || clearLayer(placed))
+  ), placed;
+}
+function clearLayer(placed) {
+  placed.taken = !0, document.querySelector("[data-turn-origin]")?.removeAttribute("data-turn-origin"), placed.layer.remove(), document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+    (sheet) => sheet !== placed.sheet
+  );
+}
+
+// src/morph/timing.ts
+var over = (timing, leg = {}) => ({
+  ...timing,
+  duration: leg.duration ?? timing.duration,
+  delay: leg.delay ?? timing.delay,
+  easing: leg.easing ?? timing.easing
+});
+
+// src/morph/define.ts
+var DURATION_MS = 500, EASING = "cubic-bezier(0.2, 0, 0, 1)", CORRECTION_MS = 300;
+function handedOver() {
+  return window.pageturnMorph === void 0 && (window.pageturnMorph = placeHandedLayer()), window.pageturnMorph;
+}
+var isHandingOver = !1, isLeaving = () => isHandingOver;
+function hide(element) {
+  let hidden = element;
+  return hidden.style.visibility = "hidden", hidden;
+}
+var defined = /* @__PURE__ */ new Set(), isDefined = (name) => defined.has(name);
+function defineMorph(name, morph) {
+  if (!inBrowser || window.top !== window || reducesMotion())
+    return () => {
+    };
+  defined.add(name);
+  let kind = morph.as ?? picture, finders = [morph.find ?? []].flat(), atRest = (element) => (
+    // An element of another document (a page peek() loaded) has none of this one's.
+    element.ownerDocument !== document ? stage.read(element) : atTheirEnd(
+      document.getAnimations().filter((animation) => {
+        let { effect } = animation;
+        return effect instanceof KeyframeEffect && effect.target?.contains(element);
+      }),
+      () => stage.read(element)
+    )
+  ), stage = {
+    name,
+    morph,
+    live: null,
+    endOf,
+    onLeave: [],
+    onStay: [],
+    onPlay: [],
+    onRemove: [],
+    siteAnimations: [],
+    atRest,
+    read(element) {
+      let end = stage.endOf(element);
+      return kind.read?.(element, end, element.matches(morph.to)), end;
+    },
+    timing: (leg) => over(
+      over(
+        { duration: DURATION_MS, delay: 0, easing: EASING, fill: "both" },
+        morph
+      ),
+      leg
+    ),
+    about: (link, back2) => ({
+      back: back2,
+      link,
+      decline: () => registry.f,
+      measure(element, at) {
+        let end = stage.read(element);
+        if (!at) return end;
+        let place = stage.read(at), own = end.text?.box ?? end.box, other = place.text?.box ?? place.box, across = other.left - own.left, down = other.top - own.top, there = shifted(end, across, down);
+        return there.text && (there.text = {
+          ...there.text,
+          box: {
+            ...there.text.box,
+            left: there.text.box.left + across,
+            top: there.text.box.top + down
+          }
+        }), there;
+      },
+      scroll: { x: scrollX, y: scrollY }
+    }),
+    layer(element, at, to) {
+      let layer = kind.build(element, at, to);
+      return standAt(layer, kind, at), layer;
+    },
+    async put(element, at, to) {
+      let layer = stage.layer(element, at, to);
+      return stage.live = { layer, hidden: hide(element) }, showLayer(layer), layer;
+    },
+    async travel(start, stop, about, timing, plays = !0, behind = null) {
+      let layer = stage.live?.layer;
+      if (!layer) return;
+      let pose = kind.pose(layer), first = pose(start), last = pose(stop);
+      layer.animate([moveAt(first, start), moveAt(last, stop)], timing), first.on.animate([first.look, last.look], timing), first.inner && last.inner && JSON.stringify(first.inner.look) !== JSON.stringify(last.inner.look) && first.inner.on.animate([first.inner.look, last.inner.look], timing);
+      let end = () => {
+      }, finished = new Promise((resolve) => {
+        end = resolve;
+      });
+      try {
+        kind.play?.(layer, start, stop, timing, about.back);
+        for (let play of stage.onPlay)
+          play(layer, start, stop, timing, finished);
+        plays && morph.during?.({
+          ...about,
+          layer,
+          content: layer.firstElementChild,
+          box: layer.querySelector("[data-turn-box]"),
+          words: layer.querySelector("[data-turn-words]"),
+          animate(element, keyframes, options) {
+            let animation = element.animate(keyframes, {
+              ...timing,
+              ...options
+            });
+            return stage.siteAnimations.push(animation), animation;
+          },
+          start,
+          stop,
+          timing,
+          behind,
+          finished,
+          atEnd: (read) => atTheirEnd(layer.getAnimations({ subtree: !0 }), read)
+        });
+      } catch (error) {
+        reportError(error);
+      }
+      behind && behind.getAnimations().length === 0 && behind.animate({ opacity: [0, 1] }, over(timing, stage.appear));
+      let playing = () => [
+        ...layer.getAnimations({ subtree: !0 }),
+        ...behind?.getAnimations() ?? []
+      ].filter(isEnding);
+      await Promise.all(
+        [...playing(), ...stage.siteAnimations.filter(isEnding)].map(
+          (animation) => animation.finished
+        )
+      ).catch(() => {
+      });
+      for (let animation of playing()) {
+        try {
+          animation.commitStyles();
+        } catch {
+        }
+        animation.cancel();
+      }
+      end();
+    },
+    hand(flight) {
+      isHandingOver = !0, writeSession(MORPH_KEY, flight);
+    },
+    async land(placed2, target, told, scroll = { x: scrollX, y: scrollY }, leg) {
+      let about = { ...told, scroll };
+      placed2.taken = !0;
+      let { flight, layer } = placed2;
+      try {
+        document.readyState === "loading" && await new Promise((parsed) => whenParsed(parsed));
+        let element = target();
+        if (!element) return;
+        stage.live = { layer, hidden: hide(element) };
+        let there = shifted(
+          atRest(element),
+          scrollX - scroll.x,
+          scrollY - scroll.y
+        );
+        if (flight.t) {
+          let ends = about.back ? { from: there, to: flight.f ?? null } : { from: flight.f ?? there, to: there };
+          flight.f && morph.ends?.(ends, about);
+          let stop = (about.back ? ends.from : ends.to) ?? there;
+          looksSame(flight.e, stop) || await stage.travel(
+            flight.e,
+            stop,
+            about,
+            { ...stage.timing(leg), delay: 0, duration: CORRECTION_MS },
+            !1
+          );
+        } else {
+          let ends = about.back ? { from: there, to: flight.e } : { from: flight.e, to: there };
+          if (!isDeclined(morph.ends?.(ends, about))) {
+            let start = (about.back ? ends.to : ends.from) ?? flight.e, stop = (about.back ? ends.from : ends.to) ?? there;
+            kind.fit?.(layer, stop), await stage.travel(start, stop, about, stage.timing(leg));
+          }
+        }
+        await whenDrawn(element);
+      } catch (error) {
+        reportError(error);
+      } finally {
+        stage.drop(), clearLayer(placed2);
+      }
+    },
+    drop() {
+      for (let animation of stage.siteAnimations.splice(0))
+        animation.cancel();
+      stage.live?.layer.remove(), stage.live?.hidden.style.removeProperty("visibility"), stage.live = null;
+    }
+  }, remove = defineMove(name, {
+    match: (visit) => morph.match ? morph.match(visit) : !!morph.from?.(visit.link),
+    async leave(turn) {
+      let element = morph.from?.(turn.link);
+      if (!element || !turn.canHandOver || stage.live) return turn.decline();
+      let about = stage.about(turn.link, !1), ends = {
+        from: stage.read(element),
+        to: null
+      };
+      for (let finder of finders)
+        try {
+          ends.to ??= await finder(turn.to, morph.to, atRest);
+        } catch (error) {
+          reportError(error);
+        }
+      if (isDeclined(morph.ends?.(ends, about))) return turn.decline();
+      let { from, to } = ends;
+      if (from.box.width === 0 || from.box.height === 0) return turn.decline();
+      let layer = await stage.put(element, from, to), leaving = turn.leaving();
+      to && await stage.travel(from, to, about, stage.timing()), await leaving, stage.hand({
+        n: morph.arriveAs ?? name,
+        m: name,
+        h: markup(layer),
+        e: to ?? from,
+        ...to ? { f: from } : {},
+        t: !!to,
+        s: morph.to
+      });
+      let handover = {
+        arriveAs: morph.arriveAs ?? name,
+        data: morph.data?.(turn) ?? null
+      };
+      for (let add of stage.onLeave)
+        handover = {
+          ...handover,
+          ...add(turn, element, from, handover.data)
+        };
+      return handover;
+    },
+    stay(turn, stay) {
+      isHandingOver = !1, stage.drop();
+      for (let tell of stage.onStay) tell(stay);
+      morph.stay?.(turn, stay);
+    }
+  });
+  for (let begin of [
+    ...finders.map((finder) => finder.start),
+    ...morph.use ?? []
+  ])
+    begin?.(stage);
+  let placed = handedOver();
+  return placed && !placed.taken && placed.flight.m === name && stage.land(placed, () => onPage(morph.to), stage.about(null, !1)), () => {
+    remove(), defined.delete(name);
+    for (let stop of stage.onRemove) stop();
+  };
+}
+
+// src/morph/way.ts
+var originKey = (name) => `${MORPH_KEY}:from:${name}`;
+function originOf(name) {
+  let from = readSession(originKey(name)), entry = navigationEntry();
+  return from && window.top === window && new URL(from.u).pathname === location.pathname && entry?.type === "navigate" && window.pageturn?.arrival?.move !== from.a ? (forgetWayOut(name), null) : from;
+}
+function forgetWayOut(name) {
+  !inBrowser || window.top !== window || removeSession(originKey(name));
+}
+var IN_VIEW = 0.25;
+function shareOnScreen({ left, top, width, height }) {
+  let across = Math.min(left + width, innerWidth) - Math.max(left, 0), down = Math.min(top + height, innerHeight) - Math.max(top, 0);
+  return Math.max(across, 0) * Math.max(down, 0) / (width * height || 1);
+}
+function pathOf(element) {
+  let path = "";
+  for (let node = element; node !== document.body && node.parentElement; node = node.parentElement) {
+    let rank = [...node.parentElement.children].indexOf(node) + 1;
+    path = `>${node.localName}:nth-child(${rank})${path}`;
+  }
+  return `body${path}`;
+}
+function elementNamedByAddress() {
+  try {
+    return document.getElementById(decodeURIComponent(location.hash.slice(1)));
+  } catch {
+    return null;
+  }
+}
+function scrollOfAddress() {
+  return elementNamedByAddress()?.scrollIntoView({ behavior: "instant" }), { x: scrollX, y: scrollY };
+}
+function isInAnOpenPopover(element) {
+  try {
+    return element.parentElement?.closest(":popover-open") != null;
+  } catch {
+    return !1;
+  }
+}
+var links = () => [
+  ...document.querySelectorAll("a[href]")
+], waysBack = /* @__PURE__ */ new WeakMap();
+function readKept(keep) {
+  let read = [];
+  for (let [selector, names] of Object.entries(keep)) {
+    let element = null;
+    try {
+      element = document.querySelector(selector);
+    } catch {
+    }
+    if (element)
+      for (let attribute of [names].flat())
+        read.push([selector, attribute, element.getAttribute(attribute)]);
+  }
+  return read;
+}
+function rankOf(link) {
+  let { href } = link, rank = 0;
+  for (let other of links()) {
+    if (other === link) return rank;
+    other.href === href && (rank += 1);
+  }
+  return -1;
+}
+var backFields = (from, name) => ({
+  s: from?.p ?? "",
+  ...from ? {
+    ...putBackFields(from, name),
+    l: [from.u, from.k, !!from.i]
+  } : {}
+}), putBackFields = (from, name) => ({
+  o: name,
+  v: from.v,
+  ...from.w?.length ? { w: from.w } : {}
+});
+function wayBackOf(stage) {
+  let known = waysBack.get(stage);
+  if (known) return known;
+  let key = originKey(stage.name), way = {
+    name: `${stage.name}-back`,
+    origin: () => originOf(stage.name),
+    keep: {}
+  };
+  waysBack.set(stage, way), stage.onLeave.push((turn, element, from, data) => {
+    writeSession(key, {
+      d: data,
+      a: stage.morph.arriveAs ?? stage.name,
+      f: location.pathname,
+      u: turn.link.href,
+      k: rankOf(turn.link),
+      p: pathOf(element),
+      v: isInAnOpenPopover(element),
+      w: readKept(way.keep),
+      // A click from the keyboard leaves the link with its ring; a mouse's, without.
+      i: turn.link.matches(":focus-visible"),
+      x: scrollX,
+      y: scrollY,
+      e: from
+    });
+  });
+  function startedHere() {
+    let from = way.origin();
+    return from?.f === location.pathname ? from : null;
+  }
+  function landBack(placed, isShown) {
+    let reached = arrival(), options = reached?.via === "history" ? way.byHistory : way.byLink;
+    if (!reached || !options) return;
+    let from = startedHere(), leading = links().filter((link2) => link2.pathname === reached.from), clicked = from ? linkAt(from.u, from.k) : void 0, link = clicked && leading.includes(clicked) ? clicked : leading.find((link2) => stage.morph.from?.(link2));
+    if (!link) return;
+    link !== clicked && (document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (sheet) => sheet !== placed.sheet
+    ));
+    let isByLink = reached.via === "link", { x = 0, y } = placed.flight;
+    y !== void 0 && scrollTo(x, y), stage.land(
+      placed,
+      () => stage.morph.from?.(link) ?? null,
+      stage.about(link, !0),
+      y !== void 0 ? { x, y } : from && !isByLink && !isShown ? (
+        // On a Back the browser brings the scroll back itself, sometimes after this.
+        { x: from.x, y: from.y }
+      ) : isByLink ? scrollOfAddress() : { x: scrollX, y: scrollY },
+      options
+    );
+  }
+  return queueMicrotask(() => {
+    let placed = handedOver();
+    placed && !placed.taken && placed.flight.m === way.name && landBack(placed, !1);
+  }), stage.onStay.push((stay) => {
+    if (stay.reason !== "returned" || !arrival()) return;
+    let placed = placeHandedLayer();
+    placed?.flight.m === way.name && (landBack(placed, !0), placed.taken || clearLayer(placed));
+  }), way;
+}
+function wayOut(name) {
+  let from = originOf(name);
+  return from && {
+    page: from.f,
+    scroll: { x: from.x, y: from.y },
+    data: from.d
+  };
+}
+
+// src/morph/back.ts
+function back(options = {}) {
+  return (stage) => {
+    let way = wayBackOf(stage);
+    way.byHistory = options, Object.assign(way.keep, options.keep), stage.onLeave.push((_turn, _element, _from, data) => ({
+      returnAs: way.name,
+      remember: data
+    }));
+    let said = () => {
+      if (isLeaving()) return;
+      let from = way.origin(), element = onPage(stage.morph.to), end = element && stage.read(element), store = window.pageturn?.j, report = { from: location.pathname, at: Date.now(), data: null };
+      if (!element || !end || shareOnScreen(end.box) < (options.inView ?? IN_VIEW)) {
+        from && new URL(from.u).pathname === location.pathname && store?.p({ ...report, none: !0 });
+        return;
+      }
+      store && !store.o() && store.p(report);
+      let layer = stage.layer(element, end, null);
+      writeSession(MORPH_KEY, {
+        n: way.name,
+        m: way.name,
+        h: markup(layer),
+        e: end,
+        t: !1,
+        ...backFields(from, stage.name)
+      });
+    };
+    addEventListener("pagehide", said), stage.onRemove.push(() => removeEventListener("pagehide", said));
+  };
+}
+
+// src/morph/finders.ts
+var SEEN_KEY = `${MORPH_KEY}:seen:`;
+function here() {
+  return (_to, selector, measure) => {
+    let element = onPage(selector);
+    return element && shifted(measure(element), scrollX, scrollY);
+  };
+}
+var seenKey = (selector) => `${SEEN_KEY}${selector}:${innerWidth}x${innerHeight}`, SEEN_PAGES = 20;
+function seen() {
+  let finder = (to, selector) => {
+    let pages = readSession(seenKey(selector)) ?? {}, others = Object.keys(pages).filter(
+      (path) => path !== location.pathname
+    );
+    return pages[to.pathname] ?? pages[others[others.length - 1] ?? ""] ?? null;
+  };
+  return finder.start = ({ morph, atRest }) => {
+    let say = () => {
+      let element = onPage(morph.to);
+      if (!element) return;
+      let end = atRest(element);
+      if (end.box.width > 0) {
+        let key = seenKey(morph.to), { [location.pathname]: _, ...pages } = readSession(key) ?? {}, kept = Object.entries(pages).slice(1 - SEEN_PAGES);
+        writeSession(key, {
+          ...Object.fromEntries(kept),
+          [location.pathname]: shifted(end, scrollX, scrollY)
+        });
+      }
+    };
+    document.readyState === "complete" ? say() : addEventListener("load", say, { once: !0 });
+  }, finder;
+}
+
+export {
+  within,
+  isEnding,
+  ownCorners,
+  cornersCss,
+  endOf,
+  atTheirEnd,
+  LAYER_STYLE,
+  CONTENT_STYLE,
+  cloned,
+  sizeOf,
+  centredOn,
+  markup,
+  MORPH_KEY,
+  onPage,
+  over,
+  isDefined,
+  defineMorph,
+  forgetWayOut,
+  IN_VIEW,
+  shareOnScreen,
+  backFields,
+  putBackFields,
+  wayBackOf,
+  wayOut,
+  back,
+  here,
+  seen
+};