pageturn 0.1.1 → 0.2.0

package/dist/dev/morph.js

@@ -0,0 +1,457 @@
+import {
+  CONTENT_STYLE,
+  IN_VIEW,
+  LAYER_STYLE,
+  MORPH_KEY,
+  atTheirEnd,
+  back,
+  backFields,
+  centredOn,
+  cloned,
+  cornersCss,
+  defineMorph,
+  endOf,
+  forgetWayOut,
+  here,
+  isEnding,
+  markup,
+  onPage,
+  over,
+  ownCorners,
+  putBackFields,
+  seen,
+  shareOnScreen,
+  sizeOf,
+  wayBackOf,
+  wayOut,
+  within
+} from "./chunks/chunk-3SU4CIKL.js";
+import {
+  defineMove
+} from "./chunks/chunk-U3XN54YY.js";
+import "./chunks/chunk-3JAWIMHB.js";
+import {
+  isFocusGivenBack,
+  reducesMotion
+} from "./chunks/chunk-AEOAXMU3.js";
+import {
+  isDeclined
+} from "./chunks/chunk-YAL4MNCU.js";
+
+// src/morph/frame.ts
+var FRAME_STYLE = "position:fixed;top:0;border:0;margin:0;padding:0;max-width:none;max-height:none;pointer-events:none";
+function loadInFrame(address, style, name = "") {
+  return new Promise((resolve) => {
+    let frame = document.createElement("iframe");
+    frame.name = name, frame.setAttribute("aria-hidden", "true"), frame.tabIndex = -1, frame.inert = !0, frame.style.cssText = `${FRAME_STYLE};width:${document.documentElement.clientWidth}px;height:${innerHeight}px;${style}`;
+    let fail = () => {
+      frame.remove(), resolve(null);
+    };
+    frame.addEventListener("error", fail), frame.addEventListener("load", async () => {
+      try {
+        if (await frame.contentDocument?.fonts.ready, !frame.contentDocument?.body) throw new Error("no page");
+        resolve(frame);
+      } catch {
+        fail();
+      }
+    }), frame.src = address, document.documentElement.append(frame);
+  });
+}
+var INTENTS = ["pointerover", "focusin", "touchstart"];
+function onApproach(tell) {
+  let last = null, heard = (event) => {
+    let link = event.target instanceof Element ? event.target.closest("a[href]") : null;
+    link !== last && (last = link, link && !isFocusGivenBack(link) && !reducesMotion() && tell({
+      link,
+      via: "link",
+      from: new URL(location.href),
+      to: new URL(link.href),
+      canHandOver: !0
+    }));
+  };
+  for (let intent of INTENTS)
+    addEventListener(intent, heard, { passive: !0, capture: !0 });
+  return () => {
+    for (let intent of INTENTS)
+      removeEventListener(intent, heard, { capture: !0 });
+  };
+}
+
+// src/morph/behind.ts
+var BEHIND_WAIT_MS = 800;
+function behind(options = {}) {
+  return (stage) => {
+    let way = wayBackOf(stage);
+    stage.appear = options.appear;
+    let loading = null, dropFrame = () => {
+      loading?.frame.then((frame) => frame?.remove()), loading = null;
+    };
+    function showBehind(address, from) {
+      if (loading?.address !== address) {
+        dropFrame();
+        let frame = loadInFrame(
+          address,
+          // Just under the layer, above everything of the page's.
+          "left:0;opacity:0;z-index:2147483646",
+          `${MORPH_KEY}:${JSON.stringify({ x: from.x, y: from.y, m: way.name, d: from.d, p: from.p, ...putBackFields(from, stage.name) })}`
+        ).then((loaded) => {
+          let view = loaded?.contentWindow;
+          if (!loaded || !view) return null;
+          view.scrollTo(from.x, from.y);
+          let there = loaded.contentDocument?.querySelector(
+            from.p
+          );
+          return there && (there.style.visibility = "hidden"), new Promise(
+            (resolve) => view.requestAnimationFrame(
+              () => view.requestAnimationFrame(() => resolve(loaded))
+            )
+          );
+        });
+        loading = { address, frame };
+      }
+      return loading.frame;
+    }
+    way.aims = (from, end, about) => {
+      let ends = {
+        from: { ...from.e },
+        to: end
+      };
+      return isDeclined(stage.morph.ends?.(ends, about)) ? !1 : { stop: ends.from, end: ends.to ?? end };
+    }, way.frameBehind = (visit, from) => within(showBehind(visit.to.href, from), options.wait ?? BEHIND_WAIT_MS), way.dropFrame = dropFrame, stage.onRemove.push(
+      dropFrame,
+      onApproach((visit) => {
+        let from = way.origin();
+        from && way.leadsBack?.(visit) && showBehind(visit.to.href, from);
+      })
+    );
+  };
+}
+
+// src/morph/copy.ts
+function copy() {
+  return {
+    build(element) {
+      let layer = document.createElement("div"), content = cloned(element), own = element, drawn = own.offsetWidth && own.offsetHeight ? null : element.getBoundingClientRect(), width = own.offsetWidth || (drawn?.width ?? 0), height = own.offsetHeight || (drawn?.height ?? 0);
+      return content.style.cssText += `;width:${width}px;height:${height}px;${CONTENT_STYLE}`, content.dataset.turnContent = "", layer.style.cssText = `${LAYER_STYLE};width:${width}px;height:${height}px`, layer.append(content), layer;
+    },
+    pose(layer) {
+      let [width, height] = sizeOf(layer);
+      return ({ box, rotate = 0, radius }) => {
+        let x = box.width / width, y = box.height / height;
+        return {
+          move: {
+            translate: centredOn(box, width, height),
+            rotate: `${rotate}deg`,
+            scale: `${x} ${y}`
+          },
+          look: {
+            borderRadius: `${cornersCss(radius, x)} / ${cornersCss(radius, y)}`
+          },
+          on: layer.firstElementChild
+        };
+      };
+    }
+  };
+}
+
+// src/morph/link-back.ts
+function linkBack(options = {}) {
+  return (stage) => {
+    let way = wayBackOf(stage);
+    way.byLink = options, Object.assign(way.keep, options.keep);
+    let isMarked = (link) => link.getAttribute("data-turn-back") === stage.name;
+    way.leadsBack = (visit) => isMarked(visit.link) ? !0 : options.match ? options.match(visit) : visit.to.pathname === way.origin()?.f;
+    let started = way.origin();
+    for (let link of document.querySelectorAll(
+      "a[data-turn-back]"
+    ))
+      if (isMarked(link) && (link.dataset.turn = way.name, started && started.f !== link.pathname)) {
+        link.href = started.f;
+        let label = link.dataset.turnBackLabel;
+        label && link.setAttribute("aria-label", label);
+      }
+    stage.onRemove.push(
+      defineMove(way.name, {
+        match: way.leadsBack,
+        async leave(turn) {
+          let origin = way.origin(), from = origin?.f === turn.to.pathname ? origin : null, element = onPage(stage.morph.to);
+          if (!element || !turn.canHandOver || stage.live)
+            return turn.decline();
+          let about = stage.about(null, !0), end = stage.read(element), stop = null;
+          if (from && way.aims) {
+            let aimed = way.aims(from, end, about);
+            if (aimed === !1) return turn.decline();
+            ({ stop, end } = aimed);
+          }
+          if (shareOnScreen(end.box) < (options.inView ?? IN_VIEW))
+            return turn.decline();
+          let frame = from && stop ? await way.frameBehind?.(turn, from) ?? null : null, layer = await stage.put(element, end, stop), leaving = turn.leaving();
+          stop && await stage.travel(
+            end,
+            stop,
+            about,
+            stage.timing(options),
+            !0,
+            frame
+          ), await leaving;
+          let scrollsBack = from && (stop || options.scroll !== !1 && !turn.to.hash);
+          return stage.hand({
+            n: way.name,
+            m: way.name,
+            h: markup(layer),
+            e: stop ?? end,
+            ...stop ? { f: end } : {},
+            t: !!stop,
+            b: !!frame,
+            ...backFields(from, stage.name),
+            ...from && scrollsBack ? { x: from.x, y: from.y } : {}
+          }), { data: from?.d ?? null };
+        },
+        stay(turn, stay) {
+          stage.drop(), way.dropFrame?.(), stage.morph.stay?.(turn, stay);
+        }
+      })
+    );
+  };
+}
+
+// src/morph/peek.ts
+var PEEK_WAIT_MS = 1500;
+function peek(options = {}) {
+  let asked = /* @__PURE__ */ new Map(), measureThere = (to, selector, measure) => {
+    let key = `${to.href} ${selector} ${innerWidth}x${innerHeight}`, answer = asked.get(key);
+    return answer || (answer = loadInFrame(to.href, "left:-200vw;visibility:hidden").then(
+      (frame) => {
+        let page = frame?.contentDocument, element = page?.querySelector(selector);
+        for (let animation of page?.getAnimations() ?? [])
+          isEnding(animation) && animation.finish();
+        let end = element ? measure(element) : null;
+        return frame?.remove(), end || asked.delete(key), end;
+      }
+    ), asked.set(key, answer)), answer;
+  }, finder = (to, selector, measure) => within(measureThere(to, selector, measure), options.wait ?? PEEK_WAIT_MS);
+  return (options.warm ?? !0) && (finder.start = (stage) => {
+    stage.onRemove.push(
+      onApproach((visit) => {
+        let { match, from } = stage.morph;
+        (match ? match(visit) : from?.(visit.link)) && measureThere(visit.to, stage.morph.to, stage.read);
+      })
+    );
+  }), finder;
+}
+
+// src/morph/shadow.ts
+function asDropShadow(shadow2) {
+  if (/^[-\d.]/.test(shadow2)) return shadow2;
+  let [, color, x, y, blur] = /^(.*?\)|\S+) (\S+) (\S+) (\S+)/.exec(shadow2) ?? [];
+  return color && blur ? `${x} ${y} ${blur} ${color}` : void 0;
+}
+var dropShadow = (shadow2) => `drop-shadow(${shadow2})`;
+function shadow() {
+  return (stage) => {
+    let { read } = stage;
+    stage.read = (element) => {
+      let end = read(element), own = asDropShadow(getComputedStyle(element).boxShadow);
+      return own && (end.shadow = own), end;
+    }, stage.onPlay.push((layer, first, last, timing, finished) => {
+      let start = first.shadow && asDropShadow(first.shadow), stop = last.shadow && asDropShadow(last.shadow), one = start ?? stop;
+      if (!one) return;
+      let caster = document.createElement("div");
+      caster.setAttribute("aria-hidden", "true"), caster.dataset.turnShadow = "", caster.style.cssText = `position:fixed;left:0;top:0;z-index:2147483646;pointer-events:none;filter:${dropShadow(one)}`;
+      let shape = document.createElement("div");
+      shape.style.cssText = `background:#000;width:${layer.style.width};height:${layer.style.height}`;
+      for (let animation of layer.getAnimations()) {
+        let { effect } = animation;
+        effect instanceof KeyframeEffect && shape.animate(effect.getKeyframes(), timing);
+      }
+      caster.animate(
+        start && stop ? { filter: [dropShadow(start), dropShadow(stop)] } : { opacity: start ? [1, 0] : [0, 1] },
+        timing
+      ), caster.append(shape), layer.before(caster), finished.then(() => caster.remove());
+    });
+  };
+}
+
+// src/morph/text.ts
+var TYPE = [
+  "fontSize",
+  "fontWeight",
+  "fontStretch",
+  "letterSpacing",
+  "fontVariationSettings"
+], FACE = [
+  "fontFamily",
+  "fontStyle",
+  "textTransform",
+  "fontKerning",
+  "fontFeatureSettings"
+];
+function glyphs(element) {
+  let range = element.ownerDocument.createRange();
+  range.selectNodeContents(element);
+  let { left, top, width, height } = range.getBoundingClientRect();
+  return { left, top, width, height };
+}
+function splitDifference(one, other) {
+  let least = Math.min(one.length, other.length), head = 0;
+  for (; head < least && one[head] === other[head]; ) head++;
+  let tail = 0;
+  for (; tail < least - head && one[one.length - 1 - tail] === other[other.length - 1 - tail]; )
+    tail++;
+  return [
+    one.slice(0, head),
+    one.slice(head, one.length - tail),
+    other.slice(head, other.length - tail),
+    other.slice(other.length - tail)
+  ];
+}
+function text(options = {}) {
+  let pseudoOf = (isTo) => typeof options.box == "object" ? options.box[isTo ? "to" : "from"] : options.box, part = (layer, name) => layer.querySelector(`[data-turn-part="${name}"]`);
+  return {
+    read(element, end, isTo) {
+      let style = getComputedStyle(element), type = {};
+      for (let property of TYPE) type[property] = style[property];
+      type.letterSpacing === "normal" && (type.letterSpacing = "0px"), type.fontVariationSettings === "normal" && (type.fontVariationSettings = `"opsz" ${Number.parseFloat(style.fontSize)}`);
+      let box = glyphs(element), words = (element.textContent ?? "").replace(/\s+/g, " ").trim();
+      if (end.background = style.backgroundColor, element.getClientRects().length === 0) {
+        let copy2 = document.createElement("span");
+        copy2.style.cssText = "position:fixed;left:0;top:0;white-space:nowrap;line-height:1;font-optical-sizing:none;visibility:hidden";
+        for (let property of FACE) copy2.style[property] = style[property];
+        Object.assign(copy2.style, type), copy2.textContent = words, document.documentElement.append(copy2), box = glyphs(copy2), copy2.remove(), end.box = { ...box };
+      } else if (pseudoOf(isTo)) {
+        let drawn = getComputedStyle(element, pseudoOf(isTo)), [left, top, width, height] = [
+          drawn.left,
+          drawn.top,
+          drawn.width,
+          drawn.height
+        ].map(Number.parseFloat);
+        if (drawn.content !== "none" && [left, top, width, height].every(Number.isFinite)) {
+          let own = element.getBoundingClientRect();
+          end.box = {
+            left: own.left + element.clientLeft + (left ?? 0),
+            top: own.top + element.clientTop + (top ?? 0),
+            width: width ?? 0,
+            height: height ?? 0
+          }, end.radius = ownCorners(drawn, width ?? 0), end.background = drawn.backgroundColor;
+        }
+      }
+      end.text = {
+        box,
+        type,
+        color: style.color,
+        words
+      };
+    },
+    build(element, from) {
+      let layer = document.createElement("div"), content = document.createElement("span"), fill = document.createElement("span"), style = getComputedStyle(element), type = from.text?.type ?? {};
+      layer.style.cssText = `${LAYER_STYLE};width:0;height:0;white-space:nowrap;line-height:1;font-optical-sizing:none`;
+      for (let property of FACE) layer.style[property] = style[property];
+      return Object.assign(layer.style, type), content.style.cssText = "position:absolute;left:0;top:0", content.textContent = from.text?.words ?? "", content.dataset.turnContent = "", content.dataset.turnWords = "", fill.style.cssText = "position:absolute;z-index:-1", fill.dataset.turnBox = "", layer.append(content, fill), layer;
+    },
+    pose(layer) {
+      let fill = layer.lastElementChild, insetOf = (words) => {
+        let probe = layer.cloneNode(!1), line = document.createElement("span");
+        probe.removeAttribute("popover"), delete probe.dataset.turnLayer, Object.assign(probe.style, words.type, {
+          translate: "none",
+          rotate: "none",
+          visibility: "hidden"
+        }), line.style.cssText = "position:absolute;left:0;top:0", line.textContent = words.words, probe.append(line), document.documentElement.append(probe);
+        let corner = probe.getBoundingClientRect(), drawn = glyphs(line);
+        return probe.remove(), [drawn.left - corner.left, drawn.top - corner.top];
+      };
+      return ({ text: words, rotate = 0, box, radius, background }) => {
+        if (!words) throw new Error("pageturn/morph: an end has no text");
+        let [x, y] = insetOf(words), left = words.box.left - x, top = words.box.top - y;
+        return {
+          // By a translation, not `left` and `top`: Safari does not show those travel.
+          move: { translate: `${left}px ${top}px`, rotate: `${rotate}deg` },
+          look: {
+            ...words.type,
+            color: words.color,
+            // Around the middle of its box: a site that scales the layer (a button that
+            // gives under the press) scales it around what is seen.
+            transformOrigin: `${box.left - left + box.width / 2}px ${box.top - top + box.height / 2}px`
+          },
+          on: layer,
+          // The element's own box behind its words: a button's pill, a title's band. In
+          // pixels: a length in em inside a keyframe is not read at the animated font
+          // size by every browser.
+          inner: {
+            on: fill,
+            look: {
+              left: `${box.left - left}px`,
+              top: `${box.top - top}px`,
+              width: `${box.width}px`,
+              height: `${box.height}px`,
+              borderRadius: cornersCss(radius),
+              backgroundColor: background ?? "transparent"
+            }
+          }
+        };
+      };
+    },
+    play(layer, start, stop, timing, back2) {
+      let content = layer.firstElementChild, [from, to] = [start.text?.words ?? "", stop.text?.words ?? ""];
+      if (from === to || !to || content.firstElementChild) return;
+      let [head, leaving, arriving, rest] = splitDifference(from, to), swap = (typeof options.swap == "function" ? options.swap({ back: back2 }) : options.swap) ?? {}, span = (name, words, style) => `<span data-turn-part="${name}" style="${style}">${words.replace(/[&<]/g, (sign) => sign === "&" ? "&amp;" : "&lt;")}</span>`;
+      content.innerHTML = span("head", head, "") + `<span style="position:relative;display:inline-block">${span("arriving", arriving, "display:inline-block")}${span("leaving", leaving, "position:absolute;left:0;top:0")}</span><span data-turn-part="fit" style="display:inline-block">${span("rest", rest, "display:inline-block;white-space:pre")}</span>`;
+      let [fit, restPart, leavingPart, arrivingPart] = [
+        "fit",
+        "rest",
+        "leaving",
+        "arriving"
+      ].map((name) => part(layer, name)), slot = arrivingPart?.parentElement;
+      swap.clip && (slot.style.clipPath = swap.clip);
+      let widthOf = (element) => element?.getBoundingClientRect().width ?? 0, shareToClose = () => 100 * (widthOf(arrivingPart) - widthOf(leavingPart)) / (widthOf(restPart) || 1), atStart = shareToClose(), atStop = atTheirEnd(layer.getAnimations(), shareToClose), swapTiming = over(timing, swap);
+      fit?.animate({ translate: [`${-atStart}% 0`, `${-atStop}% 0`] }, timing), restPart?.animate({ translate: ["0% 0", `${atStop}% 0`] }, swapTiming), leavingPart?.animate(
+        swap.leave ?? [{ opacity: 1 }, { opacity: 0 }],
+        swapTiming
+      ), arrivingPart?.animate(
+        swap.arrive ?? [{ opacity: 0 }, { opacity: 1 }],
+        swapTiming
+      );
+    }
+  };
+}
+
+// src/morph/turned.ts
+function ownTransform(style) {
+  let [x = 1, y = x] = style.scale.split(" ").map(Number.parseFloat);
+  return new DOMMatrix().rotate(Number.parseFloat(style.rotate) || 0).scale(x || 1, y || 1).multiply(new DOMMatrix(style.transform));
+}
+function turned() {
+  return (stage) => {
+    stage.endOf = (element) => {
+      let end = endOf(element), matrix = new DOMMatrix();
+      for (let node = element; node; node = node.parentElement)
+        matrix = ownTransform(getComputedStyle(node)).multiply(matrix);
+      let rotate = Math.atan2(matrix.b, matrix.a) * 180 / Math.PI, scaleX = Math.hypot(matrix.a, matrix.b), own = element, isTurned = Math.abs(rotate) > 0.01 && own.offsetWidth > 0, { box } = end, width = isTurned ? own.offsetWidth * scaleX : box.width, height = isTurned ? own.offsetHeight * Math.hypot(matrix.c, matrix.d) : box.height;
+      return {
+        ...end,
+        box: {
+          left: box.left + (box.width - width) / 2,
+          top: box.top + (box.height - height) / 2,
+          width,
+          height
+        },
+        rotate,
+        radius: ownCorners(getComputedStyle(element), width, scaleX)
+      };
+    };
+  };
+}
+export {
+  back,
+  behind,
+  copy,
+  defineMorph,
+  forgetWayOut,
+  here,
+  linkBack,
+  peek,
+  seen,
+  shadow,
+  text,
+  turned,
+  wayOut
+};

package/dist/dev/native.js

@@ -0,0 +1,3 @@
+import "./chunks/chunk-C3T7BGNG.js";
+import "./chunks/chunk-AEOAXMU3.js";
+import "./chunks/chunk-YAL4MNCU.js";

package/dist/dev/next.js

@@ -0,0 +1,79 @@
+"use client";
+import "./chunks/chunk-U3XN54YY.js";
+import {
+  startNavigation
+} from "./chunks/chunk-I4SBUABE.js";
+import "./chunks/chunk-3JAWIMHB.js";
+import {
+  inBrowser
+} from "./chunks/chunk-AEOAXMU3.js";
+import "./chunks/chunk-YAL4MNCU.js";
+
+// src/next/next.ts
+import NextLink from "next/link.js";
+import { usePathname, useRouter, useSearchParams } from "next/navigation.js";
+import {
+  createElement,
+  Suspense,
+  useLayoutEffect,
+  useMemo,
+  useRef
+} from "react";
+var pending = null, shownAt = null;
+function go(router, href, how, link, options) {
+  let turn = startNavigation({
+    to: link ? link.href : new URL(href, location.href),
+    via: link ? "link" : "script",
+    link
+  });
+  pending = turn, router.prefetch(href), turn.left.then(() => {
+    pending === turn && router[how](href, options);
+  });
+}
+function Link(props) {
+  let router = useRouter(), anchor = useRef(null), { href, replace, scroll, onNavigate, ref } = props;
+  return createElement(NextLink, {
+    ...props,
+    ref(element) {
+      anchor.current = element, typeof ref == "function" ? ref(element) : ref && (ref.current = element);
+    },
+    onNavigate(event) {
+      let isStopped = !1;
+      onNavigate?.({
+        preventDefault() {
+          isStopped = !0, event.preventDefault();
+        }
+      }), !(isStopped || typeof href != "string" || !inBrowser) && (event.preventDefault(), go(router, href, replace ? "replace" : "push", anchor.current, {
+        scroll: scroll !== !1
+      }));
+    }
+  });
+}
+function usePageturnRouter() {
+  let router = useRouter();
+  return useMemo(
+    () => ({
+      ...router,
+      push: (href, options) => go(router, href, "push", null, options),
+      replace: (href, options) => go(router, href, "replace", null, options)
+    }),
+    [router]
+  );
+}
+function Watcher() {
+  let pathname = usePathname(), search = useSearchParams().toString();
+  return useLayoutEffect(() => {
+    let here = location.href, isFirst = shownAt === null;
+    if (shownAt = here, isFirst) return;
+    let turn = pending ?? startNavigation({ to: here, via: "history" });
+    pending = null, turn.swapped();
+  }, [pathname, search]), null;
+}
+function Pageturn() {
+  return createElement(Suspense, { fallback: null }, createElement(Watcher));
+}
+export {
+  Link,
+  Pageturn,
+  usePageturnRouter
+};

package/dist/dev/nuxt-plugin.js

@@ -0,0 +1,24 @@
+import {
+  pageturn
+} from "./chunks/chunk-Y6TD2T53.js";
+import "./chunks/chunk-U3XN54YY.js";
+import "./chunks/chunk-I4SBUABE.js";
+import "./chunks/chunk-3JAWIMHB.js";
+import "./chunks/chunk-AEOAXMU3.js";
+import "./chunks/chunk-YAL4MNCU.js";
+
+// src/nuxt/plugin.ts
+var SHOWN_MAX_MS = 4e3;
+function pageturnPlugin(nuxtApp) {
+  pageturn(nuxtApp.$router, {
+    whenShown(swap) {
+      let isDone = !1, once = () => {
+        isDone || (isDone = !0, swap());
+      };
+      nuxtApp.hooks.hookOnce("page:finish", once), setTimeout(once, SHOWN_MAX_MS);
+    }
+  });
+}
+export {
+  pageturnPlugin as default
+};

package/dist/dev/prefetch.js

@@ -0,0 +1,2 @@
+import "./chunks/chunk-FYSSNYA4.js";
+import "./chunks/chunk-YAL4MNCU.js";

package/dist/dev/react-router.js

@@ -0,0 +1,46 @@
+import "./chunks/chunk-U3XN54YY.js";
+import {
+  startNavigation
+} from "./chunks/chunk-I4SBUABE.js";
+import "./chunks/chunk-3JAWIMHB.js";
+import {
+  inBrowser
+} from "./chunks/chunk-AEOAXMU3.js";
+import "./chunks/chunk-YAL4MNCU.js";
+
+// src/react-router/react-router.ts
+import { useLayoutEffect } from "react";
+import { useLocation } from "react-router";
+var current = null, popped = !1, isMounted = !1;
+inBrowser && addEventListener(
+  "popstate",
+  () => {
+    popped = !0;
+  },
+  !0
+);
+var pageturnMiddleware = async ({ request }, next) => {
+  let via = popped ? "history" : "link";
+  if (popped = !1, !isMounted) return next();
+  let turn = startNavigation({ to: request.url, via });
+  current = turn, request.signal.addEventListener("abort", () => {
+    setTimeout(() => {
+      current === turn && (current = null, turn.cancelled());
+    });
+  });
+  let [result] = await Promise.all([next(), turn.left]);
+  return result;
+};
+function usePageturn() {
+  let { key } = useLocation();
+  useLayoutEffect(() => {
+    isMounted = !0;
+  }, []), useLayoutEffect(() => {
+    let turn = current;
+    current = null, turn?.swapped();
+  }, [key]);
+}
+export {
+  pageturnMiddleware,
+  usePageturn
+};

package/dist/dev/router.js

@@ -0,0 +1,9 @@
+import {
+  startNavigation
+} from "./chunks/chunk-I4SBUABE.js";
+import "./chunks/chunk-3JAWIMHB.js";
+import "./chunks/chunk-AEOAXMU3.js";
+import "./chunks/chunk-YAL4MNCU.js";
+export {
+  startNavigation
+};

package/dist/dev/sveltekit.js

@@ -0,0 +1,32 @@
+import "./chunks/chunk-U3XN54YY.js";
+import {
+  startNavigation
+} from "./chunks/chunk-I4SBUABE.js";
+import "./chunks/chunk-3JAWIMHB.js";
+import "./chunks/chunk-AEOAXMU3.js";
+import "./chunks/chunk-YAL4MNCU.js";
+
+// src/sveltekit/sveltekit.ts
+var started = null;
+function begin(navigation) {
+  if (!navigation.to || navigation.willUnload) return null;
+  let turn = startNavigation({
+    to: navigation.to.url,
+    via: navigation.type === "link" ? "link" : navigation.type === "popstate" ? "history" : "script"
+  });
+  return navigation.complete.catch(() => {
+    started === turn && (started = null), turn.cancelled();
+  }), turn;
+}
+function pageturn({ beforeNavigate, onNavigate }) {
+  beforeNavigate((navigation) => {
+    started = begin(navigation);
+  }), onNavigate(async (navigation) => {
+    let turn = started ?? begin(navigation);
+    if (started = null, !!turn)
+      return await turn.left, () => turn.swapped();
+  });
+}
+export {
+  pageturn
+};