@jsenv/navi 0.30.29 → 0.30.31

package/dist/jsenv_navi.js

@@ -36896,6 +36896,28 @@ const pageIsCurrent = ({ route, params }) => {
   return params ? route.matchesParams(params) : true;
 };
 
+// The same question about an address the router does not have yet (a navigation
+// about to be routed, a link pressed): its path, and every param the page names at
+// the value the page gives it. The same path under another search param is another
+// page — a person opened from another list — and a param the page does not name is
+// state on top of it, as it is for matchesParams.
+const pageIsAt = ({ route, params }, url) => {
+  const destination = new URL(url, window.location.href);
+  const own = new URL(route.buildUrl(params), window.location.href);
+  if (own.pathname !== destination.pathname) {
+    return false;
+  }
+  if (!params) {
+    return true;
+  }
+  for (const name of Object.keys(params)) {
+    if (own.searchParams.get(name) !== destination.searchParams.get(name)) {
+      return false;
+    }
+  }
+  return true;
+};
+
 /**
  * The page a <Route> container shows when none of its branches matched, given
  * a name.
@@ -39091,6 +39113,45 @@ const readBand = () => {
   };
 };
 
+/**
+ * CSS durations and easing curves, for a movement played from JS that has to look
+ * like one played by CSS: a row scrolled frame by frame next to a track animated by
+ * the browser, a view transition walked back from where its curve has it.
+ */
+
+// A CSS duration read as a number of milliseconds.
+const durationToMs = (duration) => {
+  const number = parseFloat(duration);
+  if (Number.isNaN(number)) {
+    return 0;
+  }
+  return String(duration).trimEnd().endsWith("ms") ? number : number * 1000;
+};
+
+const CSS_EASE = [0.25, 0.1, 0.25, 1];
+const CSS_EASE_OUT = [0, 0, 0.58, 1];
+
+// A cubic-bezier curve, evaluated: time in, distance out. Solved numerically
+// because the curve is parametric — two cubics sharing a parameter, with no closed
+// form for one against the other. Twenty halvings put the answer well under a pixel
+// of a screen-wide movement.
+const easedProgress = (x, [x1, y1, x2, y2]) => {
+  let low = 0;
+  let high = 1;
+  for (let i = 0; i < 20; i++) {
+    const mid = (low + high) / 2;
+    if (bezierAxis(mid, x1, x2) < x) {
+      low = mid;
+    } else {
+      high = mid;
+    }
+  }
+  return bezierAxis((low + high) / 2, y1, y2);
+};
+
+const bezierAxis = (s, a, b) =>
+  3 * (1 - s) * (1 - s) * s * a + 3 * (1 - s) * s * s * b + s * s * s;
+
 /**
  * A view transition already playing, walked back to where it started.
  *
@@ -39120,6 +39181,7 @@ const readBand = () => {
  * there while the clock counts down.
  */
 
+
 const viewTransitionAnimations = () => {
   const animations = [];
   for (const animation of document.getAnimations()) {
@@ -39244,27 +39306,6 @@ const whenPicturesArrived = (animations) => {
   );
 };
 
-// CSS `ease`, evaluated: time in, distance out. Solved numerically because the
-// curve is parametric — two cubics sharing a parameter, with no closed form for
-// one against the other. Twenty halvings put the answer well under a pixel of a
-// screen-wide movement.
-const CSS_EASE = [0.25, 0.1, 0.25, 1];
-const bezierAxis = (s, a, b) =>
-  3 * (1 - s) * (1 - s) * s * a + 3 * (1 - s) * s * s * b + s * s * s;
-const easedProgress = (x, [x1, y1, x2, y2]) => {
-  let low = 0;
-  let high = 1;
-  for (let i = 0; i < 20; i++) {
-    const mid = (low + high) / 2;
-    if (bezierAxis(mid, x1, x2) < x) {
-      low = mid;
-    } else {
-      high = mid;
-    }
-  }
-  return bezierAxis((low + high) / 2, y1, y2);
-};
-
 installImportMetaCssBuild(import.meta);
 const startViewTransition = ensureDocumentStartViewTransition();
 const TRANSITION_ATTRIBUTE = "data-navi-route-transition";
@@ -41294,11 +41335,11 @@ const css$16 = /* css */`.navi_route_travel {
     overflow: visible;
   }
 
-  &[data-route-row-taken] {
+  &[data-route-row-travelling] {
     scroll-snap-type: none;
   }
 
-  &[data-route-row-taken="clip"] {
+  &[data-route-row-taken] {
     overflow: clip;
 
     & > [data-route-row-pane], & > [data-route-row-live], & > [data-route-row-pictures] > * {
@@ -41317,12 +41358,9 @@ const css$16 = /* css */`.navi_route_travel {
     display: flex;
   }
 
-  &:not([data-moving]) > [data-route-row-pane][inert] {
-    visibility: hidden;
-  }
-
   & > [data-route-row-pane][inert] {
     top: var(--navi-route-row-pin, 0);
+    contain: paint;
     max-height: 100dvh;
     position: relative;
     overflow: clip;
@@ -41330,7 +41368,6 @@ const css$16 = /* css */`.navi_route_travel {
 
   & > [data-route-row-pane] > [data-route-row-neighbour] {
     contain: layout paint;
-    visibility: visible;
     flex-direction: column;
     display: flex;
     position: absolute;
@@ -41368,6 +41405,9 @@ const SET_OFF_PULL = 16;
 const ROW_READING = {
   sideways: true
 };
+// How far a scroll position written can read back from what was written: rounded to
+// the device's pixels.
+const WRITE_ROUNDING = 1;
 
 /**
  * @type {import("preact").FunctionComponent<{
@@ -41376,6 +41416,7 @@ const ROW_READING = {
  *   onTravel?: (detail: {route: object, params: object|undefined, cause: string}) => void|Promise<void>,
  *   renderNeighbour?: (page: {route: object, params: object|undefined}) => import("preact").ComponentChildren,
  *   prefetch?: boolean,
+ *   duration?: string,
  * }>}
  * @param {Array<object|{route: object, params?: object}>} [props.routes] - a window
  *   over something longer, in order. Read from the <Route> children by default,
@@ -41405,6 +41446,9 @@ const ROW_READING = {
  *   `route.preload(params)`. A swipe then builds a page whose answers are already
  *   there, with no wait to show. Off by default: every page one stops on costs the
  *   reads of two more.
+ * @param {string} [props.duration="300ms"] - how long a travel asked for takes: a
+ *   tab pressed, the back button. One box, on the curve a SlideContainer plays, so
+ *   two rows of tabs in one app move alike. A hand goes at its own pace.
  *
  * Every other prop lands on the box itself (`id`, `data-testid`, `className`, …).
  * The box has to outlive every page of its row: around those <Route>s, or around
@@ -41422,6 +41466,7 @@ const RouteTravel = ({
   }),
   renderNeighbour,
   prefetch = false,
+  duration = "300ms",
   className,
   children,
   ...rest
@@ -41462,7 +41507,8 @@ const RouteTravel = ({
     currentIndex,
     liveIndex,
     onTravel,
-    travelByDrag
+    travelByDrag,
+    durationMs: durationToMs(duration)
   };
 
   // The page this box asked for: routing lands later, and read back as somebody
@@ -41482,9 +41528,9 @@ const RouteTravel = ({
       Object.assign(movementRef.current, fields);
       return movementRef.current;
     }
-    row.setAttribute("data-moving", "");
     const movement = {
       travelling: false,
+      playing: null,
       pictures: new Map(),
       resumeScrollRecording: null,
       scrollsDocument: rowFollowsDocument(row),
@@ -41580,11 +41626,11 @@ const RouteTravel = ({
   };
 
   // A travel no hand set off is one box long however far the page is, as in a
-  // SlideContainer: the browser's smooth scroll would fly past every page in between.
-  // So the page asked for takes the column next to what is in the frame, on the side
-  // it already stands, which moves nothing on screen, and endMovement puts the columns
-  // back. Columns rather than offsets: every page stays a place to snap to, and none
-  // has to be hidden.
+  // SlideContainer: a scroll to where the page stands would fly past every page in
+  // between. So the page asked for takes the column next to what is in the frame, on
+  // the side it already stands, which moves nothing on screen, and endMovement puts
+  // the columns back. Columns rather than offsets: every page stays a place to snap
+  // to, and none has to be hidden.
   const travelRowTo = (index, movement) => {
     const row = rowRef.current;
     const panes = panesOf(row);
@@ -41629,10 +41675,76 @@ const RouteTravel = ({
         }
       });
     }
-    row.scrollTo({
-      left: pane.offsetLeft,
-      behavior: "smooth"
-    });
+    playTravel(pane, movement);
+  };
+
+  // A travel asked for, in `duration`, on SlideContainer's curve. Not the browser's
+  // smooth scroll, which has no duration to ask for and a curve of its own (Chrome's
+  // hesitates, then peaks at 1.65 times this one's speed): two rows of tabs in one
+  // app would not move alike. The scroll position is written at every frame, so the
+  // row stays a scroller all the way: what follows it (a Nav's bar) reads it as it
+  // reads a hand, and a finger landing finds it where it is. The clock starts at the
+  // first frame, after what the press itself costs, as an animation's does.
+  const playTravel = (pane, movement) => {
+    const row = rowRef.current;
+    // Already moving, so there is no ease-in to play: it would stall the row for an
+    // instant right where the eye is following it.
+    const inFlight = Boolean(movement.playing) || Boolean(movement.rowTaken);
+    if (movement.playing) {
+      movement.playing.stop();
+    }
+    const from = row.scrollLeft;
+    const {
+      durationMs
+    } = latestRef.current;
+    // One box in `duration` is the pace: what is left of a travel picked up on the
+    // way takes what is left of the time. Never slower: two boxes are not made to drag.
+    const boxes = Math.abs(pane.offsetLeft - from) / row.clientWidth;
+    const travelMs = boxes < 1 ? durationMs * boxes : durationMs;
+    if (!travelMs) {
+      row.scrollLeft = pane.offsetLeft;
+      // A write that changes nothing is followed by no scroll event to say the row
+      // stopped. After the commit that asked, which goes on to say the row moves.
+      Promise.resolve().then(landRow);
+      return;
+    }
+    const curve = inFlight ? CSS_EASE_OUT : CSS_EASE;
+    let start = null;
+    let frame = null;
+    const playing = {
+      // Where this travel put the row, for a scroll event to tell it from a hand.
+      written: from,
+      stop: () => {
+        cancelAnimationFrame(frame);
+        if (movement.playing === playing) {
+          movement.playing = null;
+          row.removeAttribute("data-route-row-travelling");
+        }
+      }
+    };
+    const step = now => {
+      if (start === null) {
+        start = now;
+      }
+      const elapsed = (now - start) / travelMs;
+      // Read at every frame: the layout may move under the travel (a scrollbar
+      // coming in narrows the row), and it goes where the page stands.
+      const to = pane.offsetLeft;
+      const arrived = elapsed >= 1;
+      playing.written = arrived ? to : from + (to - from) * easedProgress(elapsed, curve);
+      row.scrollLeft = playing.written;
+      if (!arrived) {
+        frame = requestAnimationFrame(step);
+        return;
+      }
+      playing.stop();
+      // Said here rather than waited for: the last frames of a curve can move the row
+      // by less than a pixel, and nothing then says it has stopped.
+      landRow();
+    };
+    movement.playing = playing;
+    row.setAttribute("data-route-row-travelling", "");
+    frame = requestAnimationFrame(step);
   };
 
   // Every column back where the map says, and the row on the page of the address, in
@@ -41656,9 +41768,8 @@ const RouteTravel = ({
 
   // A tab pressed over a row a hand has left moving, which the browser plays on and
   // overwrites a travel with once that travel is over: the snap is ended first. Given
-  // back, the row stands where it stood. A frame later, because until then WebKit still
-  // starts from where a box that is no scroller stood: a smooth scroll to the first page
-  // sees nothing to do.
+  // back, the row stands where it stood. The travel a frame later, because until then
+  // WebKit still has the row where a box that is no scroller stood, at 0.
   const takeRowFromHand = movement => {
     const row = rowRef.current;
     const position = row.scrollLeft;
@@ -41666,12 +41777,14 @@ const RouteTravel = ({
     // A travel no hand set off holds nothing: it goes where it goes.
     releaseHeldPage();
     row.style.setProperty("--navi-route-row-stand", `${-position}px`);
-    row.setAttribute("data-route-row-taken", "clip");
+    row.setAttribute("data-route-row-taken", "");
     afterFrames(2, () => {
       if (movementRef.current !== movement) {
         return;
       }
-      row.setAttribute("data-route-row-taken", "");
+      // A scroller again, standing where no page does: not snapped meanwhile.
+      row.setAttribute("data-route-row-travelling", "");
+      row.removeAttribute("data-route-row-taken");
       row.style.removeProperty("--navi-route-row-stand");
       afterFrames(1, () => {
         if (movementRef.current === movement) {
@@ -41690,8 +41803,11 @@ const RouteTravel = ({
       return;
     }
     movementRef.current = null;
+    if (movement.playing) {
+      movement.playing.stop();
+    }
     putRowBack(movement);
-    row.removeAttribute("data-moving");
+    row.removeAttribute("data-route-row-travelling");
     row.removeAttribute("data-route-row-taken");
     publishRouteRowMove(null);
     releaseHeldPage();
@@ -41720,6 +41836,45 @@ const RouteTravel = ({
     render();
   };
 
+  // The row may have stopped: on the page of the address, the movement is over; on
+  // another, a hand put it there and the address follows.
+  const landRow = () => {
+    const row = rowRef.current;
+    const movement = movementRef.current;
+    // A travel playing says itself when it is over.
+    if (!movement || movement.playing || isRowTaken(row)) {
+      return;
+    }
+    const panes = panesOf(row);
+    const pane = pageAtRest(row, panes, ROW_READING);
+    if (!pane) {
+      // A travel a hand took over (a trackpad, a wheel) and left between two pages:
+      // sent again, the row then rests.
+      const {
+        currentIndex
+      } = latestRef.current;
+      if (movement.travelling && panes[currentIndex]) {
+        travelRowTo(currentIndex, movement);
+      }
+      return;
+    }
+    movement.landed = true;
+    const {
+      pages
+    } = latestRef.current;
+    const page = pages[panes.indexOf(pane)];
+    if (!page || pageIsCurrent(page)) {
+      if (!askedPageRef.current || samePage(askedPageRef.current, page)) {
+        endMovement();
+      }
+      return;
+    }
+    if (samePage(askedPageRef.current, page)) {
+      return;
+    }
+    askForPageOfRow(panes.indexOf(pane), movement);
+  };
+
   // The address and the row, in step. The opening and a row given again around the
   // page on screen have nothing to show for it; somebody else moving the address
   // (a tab pressed, the back button) is a travel.
@@ -41740,6 +41895,13 @@ const RouteTravel = ({
     }
     answeredPageRef.current = page;
     if (!page || !pane) {
+      // The address left the row while a travel nobody's hand is on was playing (a
+      // link to a page off the row): there is nothing left to travel to, and the
+      // landing would send the address back to the page the row rests on.
+      const movement = movementRef.current;
+      if (!page && movement?.travelling && !movement.byHand) {
+        Promise.resolve().then(endMovement);
+      }
       return;
     }
     const asked = askedPageRef.current;
@@ -41769,7 +41931,7 @@ const RouteTravel = ({
       takeRowFromHand(movement);
       return;
     }
-    if (row.getAttribute("data-route-row-taken") !== "clip") {
+    if (!row.hasAttribute("data-route-row-taken")) {
       travelRowTo(currentIndex, movement);
     }
     // In this very commit: the tab pressed already wears its bar, and the first
@@ -41794,8 +41956,7 @@ const RouteTravel = ({
       if (asked || currentIndex === -1) {
         return;
       }
-      const path = new URL(url, window.location.href).pathname;
-      if (pathOf(pages[currentIndex]) === path || !pages.some(page => pathOf(page) === path)) {
+      if (pageIsAt(pages[currentIndex], url) || !pages.some(page => pageIsAt(page, url))) {
         return;
       }
       const movement = beginMovement({
@@ -41806,7 +41967,6 @@ const RouteTravel = ({
   }, [windowed]);
   useLayoutEffect(() => {
     const row = rowRef.current;
-    const isClipped = () => row.getAttribute("data-route-row-taken") === "clip";
     const onScroll = ({
       finger,
       lifted
@@ -41817,10 +41977,15 @@ const RouteTravel = ({
         travelByDrag
       } = latestRef.current;
       const panes = panesOf(row);
-      if (panes.length < 2 || isClipped()) {
+      if (panes.length < 2 || isRowTaken(row)) {
         return;
       }
       const moving = movementRef.current;
+      // Not where the travel put it: a hand has taken the row (a trackpad, a wheel),
+      // and the travel lets it go, snapping included, as the browser's own scroll does.
+      if (moving?.playing && Math.abs(row.scrollLeft - moving.playing.written) > WRITE_ROUNDING) {
+        moving.playing.stop();
+      }
       const pane = panes[currentIndex];
       if (!moving && pane && restsOn(row, pane, ROW_READING)) {
         // Written by this box, at rest: nobody is moving anything.
@@ -41900,60 +42065,20 @@ const RouteTravel = ({
       // address ran ahead to, even for a render.
       releaseHeldPage();
     };
-    const onLand = () => {
-      const movement = movementRef.current;
-      if (!movement || isClipped()) {
-        return;
-      }
-      const panes = panesOf(row);
-      const pane = pageAtRest(row, panes, ROW_READING);
-      if (!pane) {
-        // A travel stopped short of its page: the layout moved under it (a scrollbar
-        // coming in narrows the row), and where it was sent is not where the page
-        // stands. Sent again: the row then rests, or does not move and is not heard.
-        const target = panes[latestRef.current.currentIndex];
-        if (movement.travelling && !isClipped() && target) {
-          row.scrollTo({
-            left: target.offsetLeft,
-            behavior: "smooth"
-          });
-        }
-        return;
-      }
-      movement.landed = true;
-      const {
-        pages
-      } = latestRef.current;
-      const page = pages[panes.indexOf(pane)];
-      if (!page || pageIsCurrent(page)) {
-        if (!askedPageRef.current || samePage(askedPageRef.current, page)) {
-          endMovement();
-        }
-        return;
-      }
-      if (samePage(askedPageRef.current, page)) {
-        return;
-      }
-      askForPageOfRow(panes.indexOf(pane), movement);
-    };
     const stopWatching = watchRowScroll(row, {
       onScroll,
-      onLand,
+      onLand: landRow,
       onLeftToSnap
     });
     // A finger on a travel still playing: the row is the finger's from here, and it
-    // stands where the travel was going, as in a SlideContainer. A wheel only gives the
-    // row its snapping back: a page scrolled vertically over it is no hand on it.
+    // stands where the travel was going, as in a SlideContainer. Not a wheel: a page
+    // scrolled vertically over the row is no hand on it, and one scrolling it sideways
+    // is told apart by the travel itself (onScroll).
     const onTouchOnTravel = () => {
-      if (movementRef.current?.travelling && !isClipped()) {
+      if (movementRef.current?.travelling && !isRowTaken(row)) {
         endMovement();
       }
     };
-    const onWheelOnTravel = () => {
-      if (row.getAttribute("data-route-row-taken") === "") {
-        row.removeAttribute("data-route-row-taken");
-      }
-    };
     // A press for the page the address is already on changes nothing the router can
     // tell, and a stroke no lift ends leaves the address where it was: it is heard here,
     // the way a tab says which page it is through its address.
@@ -41968,7 +42093,7 @@ const RouteTravel = ({
         currentIndex
       } = latestRef.current;
       const page = pages[currentIndex];
-      if (!link || !page || new URL(link.href).pathname !== pathOf(page)) {
+      if (!link || !page || !pageIsAt(page, link.href)) {
         return;
       }
       movement.travelling = true;
@@ -41977,20 +42102,20 @@ const RouteTravel = ({
     row.addEventListener("touchstart", onTouchOnTravel, {
       passive: true
     });
-    row.addEventListener("wheel", onWheelOnTravel, {
-      passive: true
-    });
     document.addEventListener("click", onPress, {
       capture: true
     });
     return () => {
       stopWatching();
       row.removeEventListener("touchstart", onTouchOnTravel);
-      row.removeEventListener("wheel", onWheelOnTravel);
       document.removeEventListener("click", onPress, {
         capture: true
       });
-      movementRef.current?.resumeScrollRecording?.();
+      const movement = movementRef.current;
+      if (movement) {
+        movement.playing?.stop();
+        movement.resumeScrollRecording?.();
+      }
       movementRef.current = null;
       publishRouteRowMove(null);
       releaseHeldPage();
@@ -42050,12 +42175,10 @@ const RouteTravel = ({
   }, [prefetch, neighbours, restCount]);
 
   // A neighbour shows from the first frame the compositor moves the row, before
-  // any scroll event: a finger landing is the last word before that.
-  const paintsNeighbours = Boolean(renderNeighbour);
+  // any scroll event, so it has to stand where the reader is looking by then: a
+  // finger landing is the last word before that. A trackpad says nothing first, and
+  // the pin comes with its first scroll event (beginMovement).
   useLayoutEffect(() => {
-    if (!paintsNeighbours) {
-      return undefined;
-    }
     const row = rowRef.current;
     const onTouchStart = () => {
       if (!movementRef.current && rowFollowsDocument(row)) {
@@ -42068,7 +42191,8 @@ const RouteTravel = ({
     return () => {
       row.removeEventListener("touchstart", onTouchStart);
     };
-  }, [paintsNeighbours]);
+  }, []);
+  const paintsNeighbours = Boolean(renderNeighbour);
   const rowContext = useMemo(() => ({
     renderNeighbour
   }), [renderNeighbour]);
@@ -42152,6 +42276,10 @@ const copyScrollPositions = (from, to) => {
     }
   }
 };
+
+// A tab pressed over a row a hand has left moving holds it still (takeRowFromHand):
+// what the row says meanwhile is not a hand moving it.
+const isRowTaken = row => row.hasAttribute("data-route-row-taken");
 const afterFrames = (count, callback) => {
   if (count === 0) {
     callback();
@@ -69174,15 +69302,6 @@ const lineAreas = (slideElements, layout) => {
   return parseAreas(layout === "column" ? names : [names.join(" ")]);
 };
 
-// A CSS duration read as a number, so a window knows when its travel is over.
-const durationToMs = duration => {
-  const number = parseFloat(duration);
-  if (Number.isNaN(number)) {
-    return 0;
-  }
-  return String(duration).trimEnd().endsWith("ms") ? number : number * 1000;
-};
-
 // What asked for a travel, read off the event that carried it: the hand said
 // "somewhere over there" (a gesture one browses with), or it said a name (a tab
 // pressed, a key, a command — a place aimed at). Nothing at all when the travel