pageturn 0.1.0 → 0.2.0

package/dist/chunks/chunk-WTHN3UIQ.js

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