pageturn 0.1.0 → 0.2.0

package/dist/morph.js

@@ -25,70 +25,55 @@ import {
   wayBackOf,
   wayOut,
   within
-} from "./chunks/chunk-WTHN3UIQ.js";
+} from "./chunks/chunk-LM3XLSCW.js";
 import {
   defineMove
-} from "./chunks/chunk-7LMNJ25V.js";
+} from "./chunks/chunk-6FXXBNAF.js";
+import "./chunks/chunk-JHM7F4CH.js";
 import {
   isFocusGivenBack,
   reducesMotion
-} from "./chunks/chunk-YBAP3PHO.js";
+} from "./chunks/chunk-AEOAXMU3.js";
 import {
   isDeclined
-} from "./chunks/chunk-QJ7GGFM4.js";
+} 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) => {
-    const frame = document.createElement("iframe");
-    frame.name = name;
-    frame.setAttribute("aria-hidden", "true");
-    frame.tabIndex = -1;
-    frame.inert = true;
-    frame.style.cssText = `${FRAME_STYLE};width:${document.documentElement.clientWidth}px;height:${innerHeight}px;${style}`;
-    const fail = () => {
-      frame.remove();
-      resolve(null);
+    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 () => {
+    frame.addEventListener("error", fail), frame.addEventListener("load", async () => {
       try {
-        await frame.contentDocument?.fonts.ready;
-        if (!frame.contentDocument?.body) throw new Error("no page");
+        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);
+    }), frame.src = address, document.documentElement.append(frame);
   });
 }
 var INTENTS = ["pointerover", "focusin", "touchstart"];
 function onApproach(tell) {
-  let last = null;
-  const heard = (event) => {
-    const link = event.target instanceof Element ? event.target.closest("a[href]") : null;
-    if (link === last) return;
-    last = link;
-    if (link && !isFocusGivenBack(link) && !reducesMotion()) {
-      tell({
-        link,
-        via: "link",
-        from: new URL(location.href),
-        to: new URL(link.href),
-        canHandOver: true
-      });
-    }
+  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 (const intent of INTENTS) {
-    addEventListener(intent, heard, { passive: true, capture: true });
-  }
+  for (let intent of INTENTS)
+    addEventListener(intent, heard, { passive: !0, capture: !0 });
   return () => {
-    for (const intent of INTENTS) {
-      removeEventListener(intent, heard, { capture: true });
-    }
+    for (let intent of INTENTS)
+      removeEventListener(intent, heard, { capture: !0 });
   };
 }
 
@@ -96,30 +81,27 @@ function onApproach(tell) {
 var BEHIND_WAIT_MS = 800;
 function behind(options = {}) {
   return (stage) => {
-    const way = wayBackOf(stage);
+    let way = wayBackOf(stage);
     stage.appear = options.appear;
-    let loading = null;
-    const dropFrame = () => {
-      loading?.frame.then((frame) => frame?.remove());
-      loading = null;
+    let loading = null, dropFrame = () => {
+      loading?.frame.then((frame) => frame?.remove()), loading = null;
     };
     function showBehind(address, from) {
       if (loading?.address !== address) {
         dropFrame();
-        const frame = loadInFrame(
+        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) => {
-          const view = loaded?.contentWindow;
+          let view = loaded?.contentWindow;
           if (!loaded || !view) return null;
           view.scrollTo(from.x, from.y);
-          const there = loaded.contentDocument?.querySelector(
+          let there = loaded.contentDocument?.querySelector(
             from.p
           );
-          if (there) there.style.visibility = "hidden";
-          return new Promise(
+          return there && (there.style.visibility = "hidden"), new Promise(
             (resolve) => view.requestAnimationFrame(
               () => view.requestAnimationFrame(() => resolve(loaded))
             )
@@ -130,20 +112,16 @@ function behind(options = {}) {
       return loading.frame;
     }
     way.aims = (from, end, about) => {
-      const ends = {
+      let ends = {
         from: { ...from.e },
         to: end
       };
-      if (isDeclined(stage.morph.ends?.(ends, about))) return false;
-      return { 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(
+      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) => {
-        const from = way.origin();
-        if (from && way.leadsBack?.(visit)) showBehind(visit.to.href, from);
+        let from = way.origin();
+        from && way.leadsBack?.(visit) && showBehind(visit.to.href, from);
       })
     );
   };
@@ -153,23 +131,13 @@ function behind(options = {}) {
 function copy() {
   return {
     build(element) {
-      const layer = document.createElement("div");
-      const content = cloned(element);
-      const own = element;
-      const drawn = own.offsetWidth && own.offsetHeight ? null : element.getBoundingClientRect();
-      const width = own.offsetWidth || (drawn?.width ?? 0);
-      const height = own.offsetHeight || (drawn?.height ?? 0);
-      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);
-      return layer;
+      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) {
-      const [width, height] = sizeOf(layer);
+      let [width, height] = sizeOf(layer);
       return ({ box, rotate = 0, radius }) => {
-        const x = box.width / width;
-        const y = box.height / height;
+        let x = box.width / width, y = box.height / height;
         return {
           move: {
             translate: centredOn(box, width, height),
@@ -189,79 +157,58 @@ function copy() {
 // src/morph/link-back.ts
 function linkBack(options = {}) {
   return (stage) => {
-    const way = wayBackOf(stage);
-    way.byLink = options;
-    Object.assign(way.keep, options.keep);
-    const isMarked = (link) => link.getAttribute("data-turn-back") === stage.name;
-    way.leadsBack = (visit) => {
-      if (isMarked(visit.link)) return true;
-      return options.match ? options.match(visit) : visit.to.pathname === way.origin()?.f;
-    };
-    const started = way.origin();
-    for (const link of document.querySelectorAll(
+    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)) continue;
-      link.dataset.turn = way.name;
-      if (started && started.f !== link.pathname) {
+    ))
+      if (isMarked(link) && (link.dataset.turn = way.name, started && started.f !== link.pathname)) {
         link.href = started.f;
-        const label = link.dataset.turnBackLabel;
-        if (label) link.setAttribute("aria-label", label);
+        let label = link.dataset.turnBackLabel;
+        label && link.setAttribute("aria-label", label);
       }
-    }
     stage.onRemove.push(
       defineMove(way.name, {
         match: way.leadsBack,
         async leave(turn) {
-          const origin = way.origin();
-          const from = origin?.f === turn.to.pathname ? origin : null;
-          const element = onPage(stage.morph.to);
-          if (!element || !turn.canHandOver || stage.live) {
+          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();
-          }
-          const about = stage.about(null, true);
-          let end = stage.read(element);
-          let stop = null;
+          let about = stage.about(null, !0), end = stage.read(element), stop = null;
           if (from && way.aims) {
-            const aimed = way.aims(from, end, about);
-            if (aimed === false) return turn.decline();
+            let aimed = way.aims(from, end, about);
+            if (aimed === !1) return turn.decline();
             ({ stop, end } = aimed);
           }
-          if (shareOnScreen(end.box) < (options.inView ?? IN_VIEW)) {
+          if (shareOnScreen(end.box) < (options.inView ?? IN_VIEW))
             return turn.decline();
-          }
-          const frame = from && stop ? await way.frameBehind?.(turn, from) ?? null : null;
-          const layer = await stage.put(element, end, stop);
-          const leaving = turn.leaving();
-          if (stop) {
-            await stage.travel(
-              end,
-              stop,
-              about,
-              stage.timing(options),
-              true,
-              frame
-            );
-          }
-          await leaving;
-          const scrollsBack = from && (stop || options.scroll !== false && !turn.to.hash);
-          stage.hand({
+          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: Boolean(stop),
-            b: Boolean(frame),
+            t: !!stop,
+            b: !!frame,
             ...backFields(from, stage.name),
             ...from && scrollsBack ? { x: from.x, y: from.y } : {}
-          });
-          return { data: from?.d ?? null };
+          }), { data: from?.d ?? null };
         },
         stay(turn, stay) {
-          stage.drop();
-          way.dropFrame?.();
-          stage.morph.stay?.(turn, stay);
+          stage.drop(), way.dropFrame?.(), stage.morph.stay?.(turn, stay);
         }
       })
     );
@@ -271,84 +218,56 @@ function linkBack(options = {}) {
 // src/morph/peek.ts
 var PEEK_WAIT_MS = 1500;
 function peek(options = {}) {
-  const asked = /* @__PURE__ */ new Map();
-  const measureThere = (to, selector, measure) => {
-    const key = `${to.href} ${selector} ${innerWidth}x${innerHeight}`;
-    let answer = asked.get(key);
-    if (!answer) {
-      answer = loadInFrame(to.href, "left:-200vw;visibility:hidden").then(
-        (frame) => {
-          const page = frame?.contentDocument;
-          const element = page?.querySelector(selector);
-          for (const animation of page?.getAnimations() ?? []) {
-            if (isEnding(animation)) animation.finish();
-          }
-          const end = element ? measure(element) : null;
-          frame?.remove();
-          if (!end) asked.delete(key);
-          return end;
-        }
-      );
-      asked.set(key, answer);
-    }
-    return answer;
-  };
-  const finder = (to, selector, measure) => within(measureThere(to, selector, measure), options.wait ?? PEEK_WAIT_MS);
-  if (options.warm ?? true) {
-    finder.start = (stage) => {
-      stage.onRemove.push(
-        onApproach((visit) => {
-          const { match, from } = stage.morph;
-          if (match ? match(visit) : from?.(visit.link)) {
-            measureThere(visit.to, stage.morph.to, stage.read);
-          }
-        })
-      );
-    };
-  }
-  return finder;
+  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;
-  const [, color, x, y, blur] = /^(.*?\)|\S+) (\S+) (\S+) (\S+)/.exec(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) => {
-    const { read } = stage;
+    let { read } = stage;
     stage.read = (element) => {
-      const end = read(element);
-      const own = asDropShadow(getComputedStyle(element).boxShadow);
-      if (own) end.shadow = own;
-      return end;
-    };
-    stage.onPlay.push((layer, first, last, timing, finished) => {
-      const start = first.shadow && asDropShadow(first.shadow);
-      const stop = last.shadow && asDropShadow(last.shadow);
-      const one = start ?? stop;
+      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;
-      const 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)}`;
-      const shape = document.createElement("div");
+      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 (const animation of layer.getAnimations()) {
-        const { effect } = animation;
-        if (effect instanceof KeyframeEffect) {
-          shape.animate(effect.getKeyframes(), timing);
-        }
+      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());
+      ), caster.append(shape), layer.before(caster), finished.then(() => caster.remove());
     });
   };
 }
@@ -360,8 +279,7 @@ var TYPE = [
   "fontStretch",
   "letterSpacing",
   "fontVariationSettings"
-];
-var FACE = [
+], FACE = [
   "fontFamily",
   "fontStyle",
   "textTransform",
@@ -369,19 +287,17 @@ var FACE = [
   "fontFeatureSettings"
 ];
 function glyphs(element) {
-  const range = element.ownerDocument.createRange();
+  let range = element.ownerDocument.createRange();
   range.selectNodeContents(element);
-  const { left, top, width, height } = range.getBoundingClientRect();
+  let { left, top, width, height } = range.getBoundingClientRect();
   return { left, top, width, height };
 }
 function splitDifference(one, other) {
-  const least = Math.min(one.length, other.length);
-  let head = 0;
-  while (head < least && one[head] === other[head]) head++;
+  let least = Math.min(one.length, other.length), head = 0;
+  for (; head < least && one[head] === other[head]; ) head++;
   let tail = 0;
-  while (tail < least - head && one[one.length - 1 - tail] === other[other.length - 1 - tail]) {
+  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),
@@ -390,48 +306,33 @@ function splitDifference(one, other) {
   ];
 }
 function text(options = {}) {
-  const pseudoOf = (isTo) => typeof options.box === "object" ? options.box[isTo ? "to" : "from"] : options.box;
-  const part = (layer, name) => layer.querySelector(`[data-turn-part="${name}"]`);
+  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) {
-      const style = getComputedStyle(element);
-      const type = {};
-      for (const property of TYPE) type[property] = style[property];
-      if (type.letterSpacing === "normal") type.letterSpacing = "0px";
-      if (type.fontVariationSettings === "normal") {
-        type.fontVariationSettings = `"opsz" ${Number.parseFloat(style.fontSize)}`;
-      }
-      let box = glyphs(element);
-      const words = (element.textContent ?? "").replace(/\s+/g, " ").trim();
-      end.background = style.backgroundColor;
-      if (element.getClientRects().length === 0) {
-        const copy2 = document.createElement("span");
+      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 (const 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 };
+        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)) {
-        const drawn = getComputedStyle(element, pseudoOf(isTo));
-        const [left, top, width, height] = [
+        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)) {
-          const own = element.getBoundingClientRect();
+          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.radius = ownCorners(drawn, width ?? 0), end.background = drawn.backgroundColor;
         }
       }
       end.text = {
@@ -442,49 +343,25 @@ function text(options = {}) {
       };
     },
     build(element, from) {
-      const layer = document.createElement("div");
-      const content = document.createElement("span");
-      const fill = document.createElement("span");
-      const style = getComputedStyle(element);
-      const type = from.text?.type ?? {};
+      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 (const property of FACE) layer.style[property] = style[property];
-      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);
-      return layer;
+      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) {
-      const fill = layer.lastElementChild;
-      const insetOf = (words) => {
-        const probe = layer.cloneNode(false);
-        const line = document.createElement("span");
-        probe.removeAttribute("popover");
-        delete probe.dataset.turnLayer;
-        Object.assign(probe.style, words.type, {
+      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);
-        const corner = probe.getBoundingClientRect();
-        const drawn = glyphs(line);
-        probe.remove();
-        return [drawn.left - corner.left, drawn.top - corner.top];
+        }), 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");
-        const [x, y] = insetOf(words);
-        const left = words.box.left - x;
-        const top = words.box.top - y;
+        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` },
@@ -514,33 +391,22 @@ function text(options = {}) {
       };
     },
     play(layer, start, stop, timing, back2) {
-      const content = layer.firstElementChild;
-      const [from, to] = [start.text?.words ?? "", stop.text?.words ?? ""];
+      let content = layer.firstElementChild, [from, to] = [start.text?.words ?? "", stop.text?.words ?? ""];
       if (from === to || !to || content.firstElementChild) return;
-      const [head, leaving, arriving, rest] = splitDifference(from, to);
-      const swap = (typeof options.swap === "function" ? options.swap({ back: back2 }) : options.swap) ?? {};
-      const span = (name, words, style) => `<span data-turn-part="${name}" style="${style}">${words.replace(/[&<]/g, (sign) => sign === "&" ? "&amp;" : "&lt;")}</span>`;
+      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>`;
-      const [fit, restPart, leavingPart, arrivingPart] = [
+      let [fit, restPart, leavingPart, arrivingPart] = [
         "fit",
         "rest",
         "leaving",
         "arriving"
-      ].map((name) => part(layer, name));
-      const slot = arrivingPart?.parentElement;
-      if (swap.clip) slot.style.clipPath = swap.clip;
-      const widthOf = (element) => element?.getBoundingClientRect().width ?? 0;
-      const shareToClose = () => 100 * (widthOf(arrivingPart) - widthOf(leavingPart)) / (widthOf(restPart) || 1);
-      const atStart = shareToClose();
-      const atStop = atTheirEnd(layer.getAnimations(), shareToClose);
-      const swapTiming = over(timing, swap);
-      fit?.animate({ translate: [`${-atStart}% 0`, `${-atStop}% 0`] }, timing);
-      restPart?.animate({ translate: ["0% 0", `${atStop}% 0`] }, swapTiming);
-      leavingPart?.animate(
+      ].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(
+      ), arrivingPart?.animate(
         swap.arrive ?? [{ opacity: 0 }, { opacity: 1 }],
         swapTiming
       );
@@ -550,24 +416,16 @@ function text(options = {}) {
 
 // src/morph/turned.ts
 function ownTransform(style) {
-  const [x = 1, y = x] = style.scale.split(" ").map(Number.parseFloat);
+  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) => {
-      const end = endOf(element);
-      let matrix = new DOMMatrix();
-      for (let node = element; node; node = node.parentElement) {
+      let end = endOf(element), matrix = new DOMMatrix();
+      for (let node = element; node; node = node.parentElement)
         matrix = ownTransform(getComputedStyle(node)).multiply(matrix);
-      }
-      const rotate = Math.atan2(matrix.b, matrix.a) * 180 / Math.PI;
-      const scaleX = Math.hypot(matrix.a, matrix.b);
-      const own = element;
-      const isTurned = Math.abs(rotate) > 0.01 && own.offsetWidth > 0;
-      const { box } = end;
-      const width = isTurned ? own.offsetWidth * scaleX : box.width;
-      const height = isTurned ? own.offsetHeight * Math.hypot(matrix.c, matrix.d) : box.height;
+      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: {

package/dist/native.js

@@ -1,2 +1,3 @@
-import "./chunks/chunk-237GNQNZ.js";
-import "./chunks/chunk-QJ7GGFM4.js";
+import "./chunks/chunk-C3T7BGNG.js";
+import "./chunks/chunk-AEOAXMU3.js";
+import "./chunks/chunk-YAL4MNCU.js";