animate-text-weight 0.1.0 → 1.1.0

package/dist/index.js

@@ -18,6 +18,7 @@
  * narrower, never reflow. Runs again on resize, from the original content,
  * which is kept aside.
  */
+import { entered, left, settled, target, } from "./waves.js";
 /** Class of one rendered line, styled by animateTextWeight.css. */
 export const LINE = "animate-text-weight-line";
 /** Class of whatever animates: the line, or one character inside it. */
@@ -39,8 +40,8 @@ const sources = new WeakMap();
  * The weight range set in CSS, or null when the element does not animate.
  * --animate-weight-from is optional: the element's font-weight is the from weight.
  */
-export function range(el) {
-    const cs = getComputedStyle(el);
+export function range(element) {
+    const cs = getComputedStyle(element);
     const from = Number(cs.getPropertyValue("--animate-weight-from")) || Number(cs.fontWeight);
     const to = Number(cs.getPropertyValue("--animate-weight-to"));
     if (!from || !to || from === to)
@@ -51,46 +52,46 @@ export function range(el) {
 /** Elements under root that carry a weight range and hold text directly. */
 export function findAll(root = document) {
     const out = [];
-    for (const el of root.querySelectorAll("*")) {
-        if (el.classList.contains(LINE))
+    for (const element of root.querySelectorAll("*")) {
+        if (element.classList.contains(LINE))
             continue;
-        const hasText = [...el.childNodes].some((n) => n.nodeType === Node.TEXT_NODE && /\S/.test(n.textContent ?? ""));
-        if (hasText && range(el))
-            out.push(el);
+        const hasText = [...element.childNodes].some((child) => child.nodeType === Node.TEXT_NODE && /\S/.test(child.textContent ?? ""));
+        if (hasText && range(element))
+            out.push(element);
     }
     return out;
 }
 /** Words of the live element grouped by rendered line. */
-export function readLines(el) {
-    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+export function readLines(element) {
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
     const lines = [];
     const rangeOf = document.createRange();
     for (let node = walker.nextNode(); node; node = walker.nextNode()) {
         const text = node.textContent ?? "";
         const re = /\S+/g;
-        for (let m = re.exec(text); m; m = re.exec(text)) {
-            rangeOf.setStart(node, m.index);
-            rangeOf.setEnd(node, m.index + m[0].length);
+        for (let word = re.exec(text); word; word = re.exec(text)) {
+            rangeOf.setStart(node, word.index);
+            rangeOf.setEnd(node, word.index + word[0].length);
             const rect = rangeOf.getBoundingClientRect();
-            const line = lines.find((l) => Math.abs(l.top - rect.top) < 1);
+            const line = lines.find((candidate) => Math.abs(candidate.top - rect.top) < 1);
             if (line)
-                line.words.push(m[0]);
+                line.words.push(word[0]);
             else
-                lines.push({ top: rect.top, words: [m[0]] });
+                lines.push({ top: rect.top, words: [word[0]] });
         }
     }
-    return lines.sort((a, b) => a.top - b.top).map((l) => l.words.join(" "));
+    return lines.sort((above, below) => above.top - below.top).map((line) => line.words.join(" "));
 }
 /**
  * Put the original content back, so lines can be read afresh. Content that
  * is not split any more was replaced from outside: that is the new source.
  */
-function restore(el) {
-    const source = sources.get(el);
-    if (source && el.querySelector(`.${LINE}`))
-        el.replaceChildren(...source.map((n) => n.cloneNode(true)));
+function restore(element) {
+    const source = sources.get(element);
+    if (source && element.querySelector(`.${LINE}`))
+        element.replaceChildren(...source.map((child) => child.cloneNode(true)));
     else
-        sources.set(el, [...el.childNodes].map((n) => n.cloneNode(true)));
+        sources.set(element, [...element.childNodes].map((child) => child.cloneNode(true)));
 }
 /**
  * One value per stop, as --atw-<name>-<stop>.
@@ -98,7 +99,7 @@ function restore(el) {
  * Three decimals. More makes Firefox shimmer, fewer leaves 0.04px gaps.
  */
 function values(span, name, list) {
-    list.forEach((v, k) => span.style.setProperty(`--atw-${name}-${k}`, `${v.toFixed(3)}px`));
+    list.forEach((value, stop) => span.style.setProperty(`--atw-${name}-${stop}`, `${value.toFixed(3)}px`));
 }
 /** Switch a span on: the weights it moves between, and its place in the wave. */
 function unit(span, from, to, delayCount) {
@@ -112,7 +113,7 @@ function graphemes(text) {
     if (typeof Intl.Segmenter !== "function")
         return null;
     const parts = new Intl.Segmenter(undefined, { granularity: "grapheme" }).segment(text);
-    return [...parts].map((p) => p.segment);
+    return [...parts].map((part) => part.segment);
 }
 /**
  * How far each part of a text node sits from the one before it, kerning and
@@ -170,7 +171,7 @@ function slots(span, rest, width) {
 function fit(advances, target) {
     // At least one unit: splitChars returns early on a line that has none.
     const count = advances.length;
-    const widths = (advances[0] ?? []).map((_, k) => advances.reduce((sum, a) => sum + (a[k] ?? 0), 0));
+    const widths = (advances[0] ?? []).map((_, stop) => advances.reduce((sum, own) => sum + (own[stop] ?? 0), 0));
     const widest = advances.reduce((sum, own) => sum + Math.max(...own), 0);
     const reserve = Math.max(widest - target, 0) / count;
     return { boxes: advances.map((own) => own.map((advance) => advance - reserve)), widths };
@@ -208,67 +209,490 @@ function splitChars(line, text, weights, from, to, base, target) {
     // counts as no advance is measured against that. The grouping is decided at
     // the from state and holds for every stop.
     const units = [];
-    (perStop[0] ?? []).forEach((advance, i) => {
+    (perStop[0] ?? []).forEach((advance, index) => {
         const open = units.at(-1);
         if (open && advance - base < 0.01) {
-            open.text += parts[i] ?? "";
+            open.text += parts[index] ?? "";
             open.parts += 1;
         }
         else
-            units.push({ text: parts[i] ?? "", start: i, parts: 1 });
+            units.push({ text: parts[index] ?? "", start: index, parts: 1 });
     });
     if (!units.length)
         return null;
     // A unit's advance is its graphemes', added up.
-    const kerned = units.map((unit) => perStop.map((row) => row.slice(unit.start, unit.start + unit.parts).reduce((sum, a) => sum + a, 0)));
+    const kerned = units.map((unit) => perStop.map((row) => row.slice(unit.start, unit.start + unit.parts).reduce((sum, advance) => sum + advance, 0)));
     const { boxes, widths } = fit(kerned, target);
     let count = -1;
-    const made = units.map((u, i) => {
+    const made = units.map((group, index) => {
         const span = document.createElement("span");
         span.className = CHAR;
-        span.textContent = u.text;
+        span.textContent = group.text;
         // A space keeps the count of the letter before it, so the wave holds its
         // beat across a word gap instead of stalling on something invisible.
-        const delayCount = /\S/.test(u.text) ? ++count : Math.max(count, 0);
-        values(span, "w", boxes[i] ?? []);
+        const delayCount = /\S/.test(group.text) ? ++count : Math.max(count, 0);
+        values(span, "w", boxes[index] ?? []);
         unit(span, from, to, delayCount);
-        return { span, out: { text: u.text, target: kerned[i]?.[0] ?? 0, boxes: boxes[i] ?? [], delayCount } };
+        return { span, out: { text: group.text, target: kerned[index]?.[0] ?? 0, boxes: boxes[index] ?? [], delayCount } };
     });
     // The width the line is held at, and the only thing that decides it.
     line.style.setProperty("--atw-width", `${target.toFixed(3)}px`);
-    line.replaceChildren(...made.map((m) => m.span));
-    return { units: made.map((m) => m.out), widths };
+    // The far end of this line's wave, for a direction that counts from there.
+    line.style.setProperty("--atw-delay-total", String(Math.max(...made.map((piece) => piece.out.delayCount))));
+    line.replaceChildren(...made.map((piece) => piece.span));
+    return { units: made.map((piece) => piece.out), widths };
 }
-/** Split one element into its lines, then its units, and write their values. */
-export function calibrate(el) {
-    const r = range(el);
-    if (!r)
+/**
+ * What the element asked its direction to follow, if it asked for anything.
+ *
+ * A list, because an element can follow both. Each watcher writes the same
+ * one end, so whichever moved last has the say: scroll the page under a
+ * resting pointer and the page decides, cross the element and the pointer
+ * does.
+ */
+function follows(element) {
+    const asked = getComputedStyle(element).getPropertyValue("--animate-weight-direction").trim();
+    return new Set(asked ? asked.split(/\s+/) : []);
+}
+/** The other one of the two. */
+const OTHER_END = { start: "end", end: "start" };
+/**
+ * What a flip reads as for a given end, which is inverted while the pair of
+ * waves is running back down.
+ *
+ * A wave climbing 0 to 1 lets go of the unit with the shortest wait first; the
+ * same wave falling 1 to 0 lets go of the longest wait first, so it crosses
+ * the text the other way. The flip has to invert with it, or a visit that runs
+ * the pair home would put its band on backwards.
+ */
+const flipFor = (element, side) => (side === "end") !== (target(waves(element).way) === "0") ? "1" : "0";
+/**
+ * Point a wave at one of its ends, for animateTextWeight.css to read.
+ *
+ * A flip rather than a word, because that is what the units count from, and
+ * they inherit it straight off this element. A word the stylesheet had to turn
+ * into a flip would go through a style container query, which settles one pass
+ * later than an inherited value does.
+ */
+function aim(element, wave, side) {
+    const name = `--atw-flip-${wave}`;
+    const flip = flipFor(element, side);
+    // The same end again would still throw the element's style away and have it
+    // worked out afresh, for nothing.
+    if (element.style.getPropertyValue(name) === flip)
+        return;
+    element.style.setProperty(name, flip);
+}
+/** The end one of an element's waves points at. Nothing written is a flip of 0. */
+function aimed(element, wave = "in") {
+    const flip = element.style.getPropertyValue(`--atw-flip-${wave}`) || "0";
+    return flip === flipFor(element, "end") ? "end" : "start";
+}
+/**
+ * An element's waves that are still on their way somewhere, either the leading
+ * one or both.
+ */
+function running(element, which) {
+    const wanted = which === "in" ? "--atw-wave-in" : "--atw-wave";
+    return element
+        .getAnimations({ subtree: true })
+        .filter((run) => String(run.transitionProperty).startsWith(wanted));
+}
+/**
+ * Whether one of an element's waves is parked at an end on every line, which
+ * is the only place its own flip may be moved.
+ *
+ * Parked, every unit reads that wave as the same number, so counting it from
+ * the other end changes nothing. Anywhere in between the units disagree, and
+ * the flip re-sorts the line in a single frame.
+ */
+function parked(element, which) {
+    return [...element.querySelectorAll(`.${LINE}`)].every((line) => {
+        const wave = Number(getComputedStyle(line).getPropertyValue(`--atw-wave-${which}`));
+        // Not 0 and 1 exactly: a crossing can land a frame after the wave left an
+        // end, and that early the units still nearly agree.
+        return wave < 0.02 || wave > 0.98;
+    });
+}
+/** The end each element's leading wave is to point at, once it may be moved. */
+const turning = new WeakMap();
+/**
+ * Point an element's leading wave at one of its ends, as soon as it may be.
+ *
+ * Every unit works its own share out of the flip live, so moving the flip
+ * under a running wave re-sorts the whole line in a single frame: the letters
+ * the wave has reached and the ones it has not trade places on the spot.
+ * Parked at either end the units all agree, and only there is the flip free.
+ * So a turn that lands mid-wave waits for the wave to arrive somewhere.
+ *
+ * The leading wave only, and never the trailing one. This end is the one the
+ * rise counts from, so what it costs is decided by where the rise is and by
+ * nothing else. Waiting on a trailing wave as well would hold the end back for
+ * a whole further crossing, and it would land in the middle of the next one.
+ */
+function turn(element, side) {
+    if (aimed(element) === side)
+        return void turning.delete(element);
+    turning.set(element, side);
+    const later = () => {
+        // A turn since has asked for something else, and it does the waiting.
+        if (turning.get(element) !== side)
+            return;
+        const waves = running(element, "in");
+        // Parked, or nothing left to arrive because a wave was dropped where it
+        // stood: either way the flip is as cheap now as it will ever be.
+        if (parked(element, "in") || !waves.length) {
+            turning.delete(element);
+            return aim(element, "in", side);
+        }
+        // allSettled, because a wave turned round on the way rejects rather than
+        // resolves. Either way it is nearer an end than it was, so look again.
+        void Promise.allSettled(waves.map((run) => run.finished)).then(later);
+    };
+    later();
+}
+/**
+ * Where an element's waves were last sent, off its own inline style. Nothing
+ * written reads as a fresh element: both waves home, running up from the start.
+ */
+function waves(element) {
+    const end = (name) => element.style.getPropertyValue(name) === "1" ? "1" : "0";
+    const way = element.style.getPropertyValue("--atw-way") === "-1" ? "-1" : "1";
+    return { in: end("--atw-in"), out: end("--atw-out"), way };
+}
+/**
+ * Send an element's waves where a crossing says. All three every time: one
+ * already in place writes nothing new, and saying only the half that changed
+ * would mean guessing which half that is.
+ */
+function send(element, sent) {
+    element.style.setProperty("--atw-in", sent.in);
+    element.style.setProperty("--atw-out", sent.out);
+    element.style.setProperty("--atw-way", sent.way);
+}
+/**
+ * Wait for a band to come off the text, then turn the pair round ready for the
+ * next one.
+ *
+ * Nothing is put back. The waves finish a visit at the end they were sent to,
+ * and the next visit runs them home again; --atw-way is the sign that keeps
+ * the gap between them the right way up either way round. Putting them back
+ * instead would mean a whole further crossing of nothing to look at, and any
+ * crossing that landed in it would find both waves mid-flight, where neither
+ * end may be moved.
+ *
+ * Worked out from where the waves were sent rather than turned over, so that
+ * saying it twice says the same thing: a pointer that comes and goes during
+ * one band leaves a wait behind for every leaving, and they all finish on the
+ * same answer. And only where the two were sent to the same end, which is what
+ * a band that came off leaves behind and the only state this may read. A
+ * pointer sitting on the text has them at opposite ends holding it at full
+ * weight, and turning the pair round under that would let go of all of it.
+ */
+function settle(element) {
+    const runs = running(element, "both");
+    if (runs.length) {
+        void Promise.allSettled(runs.map((run) => run.finished)).then(() => settle(element));
+        return;
+    }
+    // A flip means an end only for the way the pair is running, so turning the
+    // pair round writes both again for the ends they meant. Left alone, a page
+    // that switches the text on next would send it from the wrong end.
+    const ends = { in: aimed(element, "in"), out: aimed(element, "out") };
+    send(element, settled(waves(element)));
+    aim(element, "in", ends.in);
+    aim(element, "out", ends.out);
+}
+/** Elements whose wave follows the page. */
+const scrollers = new Set();
+/** The end the page last moved toward, which is what a new scroller starts at. */
+let scrolledToward = "start";
+/**
+ * The order things happened in: each one takes the next number. A switch can
+ * be flipped by the pointer or by the page, and which moved last says which.
+ */
+let clock = 0;
+/** When the page last scrolled, on that clock. */
+let scrolledAt = 0;
+let watchingScroll = false;
+/**
+ * Watch the page, once, for all of them. An element no longer in the document
+ * is dropped, not turned.
+ */
+function watchScroll() {
+    if (watchingScroll)
+        return;
+    watchingScroll = true;
+    let at = scrollY;
+    addEventListener("scroll", () => {
+        const moved = scrollY - at;
+        at = scrollY;
+        if (!moved)
+            return;
+        scrolledAt = ++clock;
+        // Down the page reads the way the text does, from the start; back up
+        // reads from the end. Only a turn is worth writing.
+        const now = moved > 0 ? "start" : "end";
+        if (now === scrolledToward)
+            return;
+        scrolledToward = now;
+        for (const element of scrollers) {
+            if (!element.isConnected)
+                forget(element);
+            else if (follows(element).has("scroll"))
+                turn(element, now);
+        }
+    }, { passive: true });
+}
+/**
+ * Elements whose waves the script sends, what takes their listeners down, and
+ * whether the pointer is one of the things they follow.
+ */
+const sending = new Map();
+/**
+ * Follow the pointer across one element: a wave in after it and one out
+ * behind it.
+ *
+ * Going in points the leading wave at the end the pointer crossed, so the
+ * weight runs after the pointer. Coming out sends the trailing wave from the
+ * far end, so the weight lets go behind it. Cross a word left to right and one
+ * band of weight travels left to right; turn back at the edge you came in by
+ * and the band comes back with you.
+ *
+ * Writing this on the crossing itself only works because no tween starts on a
+ * crossing any more. The units read the flips in the open, every frame, so a
+ * wave that is already running turns round when one does. The browser is
+ * welcome to switch :hover on before it says a word about it.
+ *
+ * One band at a time, and the waves themselves say which one. Both at rest is
+ * a fresh visit, where either end may be moved. Anything else is the last band
+ * still coming off, and a switch that comes back on then turns the trailing
+ * wave round rather than starting a second: no end moves, nothing jumps, and
+ * the weight fills back in behind the pointer in the order it let go.
+ *
+ * The pointer only aims. What sends the waves is the page's switch, heard
+ * through --atw-on, because a hover is only one of the things that hold it: a
+ * nav link the page marks as current stays bold after the pointer has been
+ * and gone, and goes light when the page lets go of it, from the end the page
+ * scrolled toward.
+ *
+ * So an element that follows only the page hears the switch the same way, with
+ * no pointer to aim for it. Left to the stylesheet, its two waves would run
+ * together, and a switch that a jump by End flips on and off again a frame
+ * later would show nothing at all; sent from here, it gets the least band.
+ */
+function cross(element, signal, pointer) {
+    // On the clock, so the switch can tell which of them flipped it.
+    let enteredAt = 0;
+    let leftAt = 0;
+    let onAt = 0;
+    // When the switch last came on, in ms: how long the band has had.
+    let arrived = 0;
+    // The end the trailing wave is to come off from, if the pointer lets go.
+    let exit = "start";
+    const near = (event) => {
+        const box = element.getBoundingClientRect();
+        // Line by line the wave runs top to bottom, so the height the pointer
+        // crossed at is what says which end it is nearest.
+        if (!element.querySelector(`.${CHAR}`))
+            return event.clientY < box.top + box.height / 2 ? "start" : "end";
+        // Along a line, the left half is the start unless the text runs the other way.
+        const rtl = getComputedStyle(element).direction === "rtl";
+        return event.clientX < box.left + box.width / 2 !== rtl ? "start" : "end";
+    };
+    // Taken down when the element is dropped: one that comes back gets a fresh
+    // set, never a second one on top.
+    if (pointer) {
+        element.addEventListener("pointerenter", (event) => {
+            enteredAt = ++clock;
+            // Only where the leading wave is parked: every unit reads it as the same
+            // number there, so counting it from the other end changes nothing.
+            if (parked(element, "in"))
+                aim(element, "in", near(event));
+        }, { signal });
+        element.addEventListener("pointerleave", (event) => {
+            leftAt = ++clock;
+            exit = OTHER_END[near(event)];
+        }, { signal });
+    }
+    /*
+     * The doorbell rings on transitionrun. A switch that flips back before the
+     * browser has drawn a frame, which a jump by Home or End does to every
+     * section it passes, finds the doorbell still at its old value: the browser
+     * cancels it rather than running it again. The cancel is the same news.
+     */
+    const hear = (event) => {
+        // One per line, and the first speaks for all of them.
+        if (event.propertyName !== "--atw-on" || event.target !== element.querySelector(`.${LINE}`))
+            return;
+        const scroll = scrollers.has(element);
+        if (switchedOn(element)) {
+            onAt = ++clock;
+            arrived = event.timeStamp;
+            // The page switched it on, not the pointer: from the end it scrolled
+            // toward, whatever the last pointer to pass left behind.
+            if (scroll && scrolledAt > enteredAt && parked(element, "in"))
+                aim(element, "in", scrolledToward);
+            // Leading wave to the far end, trailing wave home again, every time. On a
+            // fresh visit the trailing one is already home and only the leading one
+            // moves, which opens the band; mid-band the leading one has already
+            // arrived and only the trailing one moves, which sends the weight back in
+            // in the order it let go. Saying both either way is what stops this
+            // being a no-op, which is a switch that does nothing at all.
+            element.style.removeProperty("--atw-out-wait");
+            send(element, entered(waves(element)));
+            return;
+        }
+        // Only where the trailing wave is parked: one sent home again mid-band
+        // keeps the end it had, and an end moved mid-crossing re-sorts the line.
+        // The pointer's end if leaving is what let go, else the page's.
+        const end = leftAt > Math.max(onAt, scrolledAt) ? exit : scroll ? scrolledToward : aimed(element);
+        if (parked(element, "out"))
+            aim(element, "out", end);
+        // How far the trailing wave follows the leading one by: however long the
+        // switch was on, and never less than --atw-wave-min-delay. Brush a link in
+        // a moment and the band would otherwise be a letter wide and show nothing.
+        // The subtraction is left to CSS, which knows what that floor is.
+        element.style.setProperty("--atw-out-wait", `max(0s, calc(var(--atw-wave-min-delay) - ${Math.round(event.timeStamp - arrived)}ms))`);
+        send(element, left(waves(element)));
+        settle(element);
+    };
+    element.addEventListener("transitionrun", hear, { signal });
+    element.addEventListener("transitioncancel", hear, { signal });
+}
+/** Whether the page's switch is on for an element right now. */
+const switchedOn = (element) => getComputedStyle(element).getPropertyValue("--animate-weight").trim() === "true";
+/**
+ * Follow whatever the element asked its direction to follow. Both watchers
+ * write one end and nothing else, so the wave can turn round at any moment
+ * and nothing is measured again.
+ *
+ * Each is joined on its own, and an element told to follow something else
+ * later is simply dropped from the one it left.
+ */
+function watch(element) {
+    const modes = follows(element);
+    const pointer = modes.has("pointer");
+    const scroll = modes.has("scroll");
+    if (scroll) {
+        watchScroll();
+        scrollers.add(element);
+        turn(element, scrolledToward);
+    }
+    else {
+        scrollers.delete(element);
+    }
+    // Calibration runs again on every resize; the listeners stay for as long as
+    // the element follows the same things, so they are hung once for that.
+    const had = sending.get(element);
+    if (had && had.pointer !== pointer) {
+        had.off.abort();
+        sending.delete(element);
+    }
+    if ((pointer || scroll) && !sending.has(element)) {
+        const off = new AbortController();
+        sending.set(element, { off, pointer });
+        cross(element, off.signal, pointer);
+        // Already on, and nothing flips it to say so: send the waves where the
+        // switch would have, so the first time it goes off has a band to lift.
+        if (switchedOn(element))
+            send(element, entered(waves(element)));
+    }
+    if (!pointer && !scroll) {
+        sending.get(element)?.off.abort();
+        sending.delete(element);
+        // The waves were the script's to send. Left where it last sent them, they
+        // would hold the text there, whatever the page's switch says after.
+        for (const name of ["--atw-in", "--atw-out", "--atw-out-wait", "--atw-way"])
+            element.style.removeProperty(name);
+        // A fixed end again: drop what the script last wrote, or the stylesheet
+        // would still be read through it. The waiting turn first, or it would put
+        // an end back after the rest had gone.
+        turning.delete(element);
+        element.style.removeProperty("--atw-flip-in");
+        element.style.removeProperty("--atw-flip-out");
+    }
+}
+/** Elements calibrated again when the page changes width. */
+const resized = new Set();
+let watchingResize = false;
+/** Let go of an element that has left the document, listeners and all. */
+function forget(element) {
+    resized.delete(element);
+    scrollers.delete(element);
+    sending.get(element)?.off.abort();
+    sending.delete(element);
+}
+/**
+ * Watch the page width, once, for all of them. An element no longer in the
+ * document is dropped, not calibrated.
+ */
+function watchResize() {
+    if (watchingResize)
+        return;
+    watchingResize = true;
+    let width = innerWidth;
+    let pending = 0;
+    // A line is laid out once per stop, and character mode reads every character
+    // out of each of those, so a dragged window edge must not recalibrate on
+    // every event it fires.
+    addEventListener("resize", () => {
+        if (innerWidth === width)
+            return;
+        width = innerWidth;
+        clearTimeout(pending);
+        pending = setTimeout(() => {
+            for (const element of resized) {
+                if (element.isConnected)
+                    calibrate(element);
+                else
+                    forget(element);
+            }
+        }, 150);
+    });
+}
+/**
+ * Split one element into its lines, then its units, and write their values.
+ * Done again after each resize, for as long as the element is in the document.
+ */
+export function calibrate(element) {
+    const asked = range(element);
+    if (!asked)
         return null;
-    const { from, to } = r;
-    const weights = Array.from({ length: STOPS }, (_, k) => from + ((to - from) * k) / (STOPS - 1));
+    for (const old of resized)
+        if (!old.isConnected)
+            forget(old);
+    resized.add(element);
+    watchResize();
+    watch(element);
+    const { from, to } = asked;
+    const weights = Array.from({ length: STOPS }, (_, stop) => from + ((to - from) * stop) / (STOPS - 1));
     // The element's own spacing is the from state; every stop adds to it.
-    const base = parseFloat(getComputedStyle(el).letterSpacing) || 0;
+    const base = parseFloat(getComputedStyle(element).letterSpacing) || 0;
     // Lines break at the from weight, so the element must sit there.
-    if (Number(getComputedStyle(el).fontWeight) !== from)
-        el.style.fontWeight = String(from);
-    restore(el);
-    const texts = readLines(el);
+    if (Number(getComputedStyle(element).fontWeight) !== from)
+        element.style.fontWeight = String(from);
+    restore(element);
+    const texts = readLines(element);
     const spans = texts.map((text) => {
         const span = document.createElement("span");
         span.className = LINE;
         span.textContent = text;
         return span;
     });
-    el.replaceChildren(...spans.flatMap((s, i) => (i ? [document.createElement("br"), s] : [s])));
+    element.replaceChildren(...spans.flatMap((span, index) => (index ? [document.createElement("br"), span] : [span])));
+    // The far end of a line-by-line wave. A line split into characters sets its
+    // own, which is the one its characters then see.
+    element.style.setProperty("--atw-delay-total", String(spans.length - 1));
     // Falls back to whole lines if a line cannot be split into characters.
-    let by = r.by;
+    let by = asked.by;
     // Measure in place, before the next paint, with the tween switched off.
-    const lines = spans.map((span, i) => {
-        const text = texts[i] ?? "";
+    const lines = spans.map((span, index) => {
+        const text = texts[index] ?? "";
         span.style.transition = "none";
         span.style.letterSpacing = `${base}px`;
-        const widthAt = (w) => {
-            span.style.fontWeight = String(w);
+        const widthAt = (weight) => {
+            span.style.fontWeight = String(weight);
             return span.getBoundingClientRect().width;
         };
         const target = widthAt(from);
@@ -291,38 +715,26 @@ export function calibrate(el) {
         // depend on the weight.
         const widths = [];
         const counts = [];
-        for (const w of weights) {
-            const width = widthAt(w);
+        for (const weight of weights) {
+            const width = widthAt(weight);
             widths.push(width);
             counts.push(slots(span, base, width));
         }
-        const spacing = widths.map((w, k) => base + (target - w) / (counts[k] ?? 1));
+        const spacing = widths.map((width, stop) => base + (target - width) / (counts[stop] ?? 1));
         values(span, "ls", spacing);
         // One line, one delay: the block arrives line by line.
-        unit(span, from, to, i);
+        unit(span, from, to, index);
         span.style.removeProperty("font-weight");
         done();
-        return { text, target, widths, spacing, delayCount: i, units: [] };
+        return { text, target, widths, spacing, delayCount: index, units: [] };
     });
     return { from, to, by, weights, lines };
 }
 /** Calibrate every animated element under root, now and after each resize. */
 export function calibrateAll(root = document) {
-    const els = findAll(root);
-    els.forEach((el) => calibrate(el));
-    let width = innerWidth;
-    let pending = 0;
-    // A line is laid out once per stop, and character mode reads every character
-    // out of each of those, so a dragged window edge must not recalibrate on
-    // every event it fires.
-    addEventListener("resize", () => {
-        if (innerWidth === width)
-            return;
-        width = innerWidth;
-        clearTimeout(pending);
-        pending = setTimeout(() => els.forEach((el) => calibrate(el)), 150);
-    });
-    return els;
+    const elements = findAll(root);
+    elements.forEach((element) => calibrate(element));
+    return elements;
 }
 /** Wait for the fonts, then calibrate the page. */
 export function init(root = document) {