@jsenv/navi 0.30.5 → 0.30.7

package/dist/dev/jsenv_navi.js

@@ -25965,7 +25965,7 @@ defineInteractionDetector({
         const transitionAfter = peekLastViewTransition();
         const drawn =
           transitionAfter === transitionBefore
-            ? afterFrames(2)
+            ? afterFrames$1(2)
             : transitionAfter.finished.then(NOOP, NOOP);
         const write = {
           settled: false,
@@ -26265,7 +26265,7 @@ const warnWhenNothingToLandOn = (element, dropContainer, canLeave) => {
 
 const NOOP = () => {};
 
-const afterFrames = (count) =>
+const afterFrames$1 = (count) =>
   new Promise((resolve) => {
     const next = (remaining) => {
       if (remaining === 0) {
@@ -41593,8 +41593,9 @@ const publishRouteRowMove = (move) => {
  * itself; a counter, a title or a breadcrumb around the box reads it first.
  *
  * It goes back to `null` as soon as the hand has let go and the row moves. Nothing
- * says when the fingers leave a trackpad: there it lasts until the row has come to
- * rest. A travel no hand set off holds nothing: it goes where it goes.
+ * says when the fingers leave a trackpad: there it is the page nearest the row, until
+ * the row has come to rest. A travel no hand set off holds nothing: it goes where it
+ * goes.
  *
  * One for the document. `route` says which row, for a page holding several boxes.
  */
@@ -41612,6 +41613,13 @@ const holdPage = (page, headingPage) => {
   }
 };
 
+// A hand no browser says has let go: the page nearest the row is where the reader is,
+// and the address, wherever it stands, is not.
+const followPageOnScreen = (page, addressPage) => {
+  headingPageSignal.value = addressPage;
+  routeTravelSettledPageSignal.value = page;
+};
+
 const releaseHeldPage = () => {
   routeTravelSettledPageSignal.value = null;
   headingPageSignal.value = null;
@@ -41671,17 +41679,19 @@ const STOPPED_SILENCE = 150;
 const isOnRow = (page) =>
   page.offsetWidth > 0 && !page.hasAttribute("data-off-row");
 
-const restsOn = (scroller, page) =>
+// `sideways`: see readRowStretch.
+const restsOn = (scroller, page, { sideways } = {}) =>
   Math.abs(page.offsetLeft - scroller.scrollLeft) <= AT_REST_DISTANCE &&
-  Math.abs(page.offsetTop - scroller.scrollTop) <= AT_REST_DISTANCE;
+  (sideways ||
+    Math.abs(page.offsetTop - scroller.scrollTop) <= AT_REST_DISTANCE);
 
 /**
  * @returns {Element|undefined} the page the row rests on, nothing while it stands
  *   between two: a hand can pause midway, and an engine may call that the end of
  *   a scroll.
  */
-const pageAtRest = (scroller, pages) =>
-  pages.find((page) => isOnRow(page) && restsOn(scroller, page));
+const pageAtRest = (scroller, pages, options) =>
+  pages.find((page) => isOnRow(page) && restsOn(scroller, page, options));
 
 /**
  * Where the row stands between two neighbouring pages, on the side it has moved
@@ -41689,14 +41699,18 @@ const pageAtRest = (scroller, pages) =>
  * since is walked over. A map moves along one axis at a time, the one it has
  * moved furthest on.
  *
+ * @param {object} [options]
+ * @param {boolean} [options.sideways] - a row with one line, whatever `offsetTop` its
+ *   pages read: a page pinned with `top` is still on it.
  * @returns {{base: Element, toward: Element|undefined, fraction: number, forward: boolean}}
  *   the last page the row has passed (`page` itself until then), the one after,
  *   and how far between the two from 0 to 1. Nothing `toward` past the last.
  */
-const readRowStretch = (scroller, pages, page) => {
+const readRowStretch = (scroller, pages, page, { sideways } = {}) => {
   const alongX =
+    sideways ||
     Math.abs(scroller.scrollLeft - page.offsetLeft) >=
-    Math.abs(scroller.scrollTop - page.offsetTop);
+      Math.abs(scroller.scrollTop - page.offsetTop);
   const position = alongX ? "offsetLeft" : "offsetTop";
   const cross = alongX ? "offsetTop" : "offsetLeft";
   const scrolled = alongX ? scroller.scrollLeft : scroller.scrollTop;
@@ -41704,7 +41718,8 @@ const readRowStretch = (scroller, pages, page) => {
   const step = forward ? 1 : -1;
   const line = pages
     .filter(
-      (candidate) => isOnRow(candidate) && candidate[cross] === page[cross],
+      (candidate) =>
+        isOnRow(candidate) && (sideways || candidate[cross] === page[cross]),
     )
     .sort((pageA, pageB) => pageA[position] - pageB[position]);
   let index = line.indexOf(page);
@@ -41773,12 +41788,6 @@ const watchRowScroll = (
     liftedAt = null;
     onLeftToSnap?.(moved > 0);
   };
-  const onTouchStart = () => {
-    touching = true;
-    touchedSinceStop = true;
-    liftedAt = null;
-    clearTimeout(stoppedTimeout);
-  };
   const onTouchEnd = (touchEvent) => {
     touching = touchEvent.touches.length > 0;
     if (!touching) {
@@ -41786,18 +41795,31 @@ const watchRowScroll = (
       armSilence();
     }
   };
+  const onTouchStart = (touchEvent) => {
+    touching = true;
+    touchedSinceStop = true;
+    liftedAt = null;
+    clearTimeout(stoppedTimeout);
+    // Listened for on what the finger landed on, where the end of a touch is always
+    // told: a page changing under the finger may have taken it out of the document by
+    // then, and nothing comes up to the row from there.
+    const { target } = touchEvent;
+    const onEnd = (endEvent) => {
+      target.removeEventListener("touchend", onEnd);
+      target.removeEventListener("touchcancel", onEnd);
+      onTouchEnd(endEvent);
+    };
+    target.addEventListener("touchend", onEnd, { passive: true });
+    target.addEventListener("touchcancel", onEnd, { passive: true });
+  };
   scroller.addEventListener("scroll", onScrollEvent, { passive: true });
   scroller.addEventListener("scrollend", onLand);
   scroller.addEventListener("touchstart", onTouchStart, { passive: true });
-  scroller.addEventListener("touchend", onTouchEnd, { passive: true });
-  scroller.addEventListener("touchcancel", onTouchEnd, { passive: true });
   return () => {
     clearTimeout(stoppedTimeout);
     scroller.removeEventListener("scroll", onScrollEvent);
     scroller.removeEventListener("scrollend", onLand);
     scroller.removeEventListener("touchstart", onTouchStart);
-    scroller.removeEventListener("touchend", onTouchEnd);
-    scroller.removeEventListener("touchcancel", onTouchEnd);
   };
 };
 
@@ -41835,6 +41857,19 @@ const css$16 = /* css */`.navi_route_travel {
     overflow: visible;
   }
 
+  &[data-route-row-taken] {
+    scroll-snap-type: none;
+  }
+
+  &[data-route-row-taken="clip"] {
+    overflow: clip;
+
+    & > [data-route-row-pane], & > [data-route-row-live], & > [data-route-row-pictures] > * {
+      left: var(--navi-route-row-stand);
+      position: relative;
+    }
+  }
+
   & > [data-route-row-pane] {
     scroll-snap-align: start;
     scroll-snap-stop: always;
@@ -41891,6 +41926,11 @@ const css$16 = /* css */`.navi_route_travel {
 // there yet: past what a hand that only shook covers, so that a shake costs
 // neither a navigation nor the requests of a page.
 const SET_OFF_PULL = 16;
+// A row of routes is one line, whatever `offsetTop` its pinned panes read (see the pin
+// above): they are on it all the same.
+const ROW_READING = {
+  sideways: true
+};
 
 /**
  * @type {import("preact").FunctionComponent<{
@@ -42064,10 +42104,7 @@ const RouteTravel = ({
       const paneCurrent = panesOf(row)[currentIndex];
       if (paneCurrent) {
         movement.travelling = true;
-        row.scrollTo({
-          left: paneCurrent.offsetLeft,
-          behavior: "smooth"
-        });
+        travelRowTo(currentIndex, movement);
       }
     });
   };
@@ -42084,7 +42121,7 @@ const RouteTravel = ({
       base,
       toward,
       fraction
-    } = readRowStretch(row, panes, panes[0]);
+    } = readRowFrame(row, panes);
     publishRouteRowMove({
       basePath: pathOf(pages[panes.indexOf(base)]),
       towardPath: toward ? pathOf(pages[panes.indexOf(toward)]) : null,
@@ -42092,6 +42129,108 @@ 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.
+  const travelRowTo = (index, movement) => {
+    const row = rowRef.current;
+    const panes = panesOf(row);
+    const pane = panes[index];
+    if (!pane) {
+      return;
+    }
+    const {
+      base,
+      toward,
+      fraction
+    } = readRowFrame(row, panes);
+    const inFrame = toward && fraction > 0 ? [base, toward] : [base];
+    if (!inFrame.includes(pane)) {
+      // In a window, what the window put in a column moves with its pane.
+      const standingIn = paneIndex => {
+        const standing = [panes[paneIndex]];
+        if (windowed) {
+          const picture = movement.pictures.get(paneIndex);
+          if (picture) {
+            standing.push(picture);
+          }
+          if (paneIndex === latestRef.current.liveIndex) {
+            standing.push(liveRef.current);
+          }
+        }
+        return standing;
+      };
+      const columns = [...panes].sort((a, b) => a.offsetLeft - b.offsetLeft);
+      const first = columns.indexOf(inFrame[0]);
+      const last = columns.indexOf(inFrame[inFrame.length - 1]);
+      const from = columns.indexOf(pane);
+      columns.splice(from, 1);
+      columns.splice(from < first ? first - 1 : last + 1, 0, pane);
+      movement.placed ||= new Map();
+      columns.forEach((eachPane, column) => {
+        for (const element of standingIn(panes.indexOf(eachPane))) {
+          if (!movement.placed.has(element)) {
+            movement.placed.set(element, element.style.gridColumn);
+          }
+          element.style.gridColumn = String(column + 1);
+        }
+      });
+    }
+    row.scrollTo({
+      left: pane.offsetLeft,
+      behavior: "smooth"
+    });
+  };
+
+  // Every column back where the map says, and the row on the page of the address, in
+  // one go: that page stands at the same place on screen either way.
+  const putRowBack = movement => {
+    const row = rowRef.current;
+    if (movement.placed) {
+      for (const [element, column] of movement.placed) {
+        element.style.gridColumn = column;
+      }
+      movement.placed = null;
+    }
+    const pane = panesOf(row)[latestRef.current.currentIndex];
+    if (pane && !restsOn(row, pane, ROW_READING)) {
+      row.scrollTo({
+        left: pane.offsetLeft,
+        behavior: "instant"
+      });
+    }
+  };
+
+  // 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.
+  const takeRowFromHand = movement => {
+    const row = rowRef.current;
+    const position = row.scrollLeft;
+    movement.rowTaken = true;
+    // 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");
+    afterFrames(2, () => {
+      if (movementRef.current !== movement) {
+        return;
+      }
+      row.setAttribute("data-route-row-taken", "");
+      row.style.removeProperty("--navi-route-row-stand");
+      afterFrames(1, () => {
+        if (movementRef.current === movement) {
+          travelRowTo(latestRef.current.currentIndex, movement);
+        }
+      });
+    });
+  };
+
   // The row has stopped, on the page of the address: everything held for the
   // movement is let go of in one go, before anything paints.
   const endMovement = () => {
@@ -42101,7 +42240,9 @@ const RouteTravel = ({
       return;
     }
     movementRef.current = null;
+    putRowBack(movement);
     row.removeAttribute("data-moving");
+    row.removeAttribute("data-route-row-taken");
     publishRouteRowMove(null);
     releaseHeldPage();
     if (liveRef.current) {
@@ -42139,7 +42280,7 @@ const RouteTravel = ({
     const pane = panesOf(row)[currentIndex];
     const answered = answeredPageRef.current;
     if (samePage(answered, page)) {
-      if (pane && !movementRef.current && !restsOn(row, pane)) {
+      if (pane && !movementRef.current && !restsOn(row, pane, ROW_READING)) {
         row.scrollTo({
           left: pane.offsetLeft,
           behavior: "instant"
@@ -42155,13 +42296,13 @@ const RouteTravel = ({
     if (asked && samePage(asked, page)) {
       askedPageRef.current = null;
       // The hand landed before the address did.
-      if (movementRef.current?.landed && restsOn(row, pane)) {
+      if (movementRef.current?.landed && restsOn(row, pane, ROW_READING)) {
         Promise.resolve().then(endMovement);
       }
       return;
     }
-    if (!answered || restsOn(row, pane)) {
-      if (!restsOn(row, pane)) {
+    if (!answered || restsOn(row, pane, ROW_READING)) {
+      if (!restsOn(row, pane, ROW_READING)) {
         row.scrollTo({
           left: pane.offsetLeft,
           behavior: "instant"
@@ -42169,13 +42310,18 @@ const RouteTravel = ({
       }
       return;
     }
-    beginMovement({
+    const movementBefore = movementRef.current;
+    const movement = beginMovement({
       travelling: true
     });
-    row.scrollTo({
-      left: pane.offsetLeft,
-      behavior: "smooth"
-    });
+    if (movementBefore?.byHand && !movementBefore.rowTaken) {
+      sayRowMoves();
+      takeRowFromHand(movement);
+      return;
+    }
+    if (row.getAttribute("data-route-row-taken") !== "clip") {
+      travelRowTo(currentIndex, movement);
+    }
     // In this very commit: the tab pressed already wears its bar, and the first
     // scroll event is a frame away.
     sayRowMoves();
@@ -42210,27 +42356,43 @@ const RouteTravel = ({
   }, [windowed]);
   useLayoutEffect(() => {
     const row = rowRef.current;
-    const onScroll = () => {
+    const isClipped = () => row.getAttribute("data-route-row-taken") === "clip";
+    const onScroll = ({
+      finger
+    }) => {
       const {
         pages,
         currentIndex,
         travelByDrag
       } = latestRef.current;
       const panes = panesOf(row);
-      if (panes.length < 2) {
+      if (panes.length < 2 || isClipped()) {
         return;
       }
       const moving = movementRef.current;
       const pane = panes[currentIndex];
-      if (!moving && pane && restsOn(row, pane)) {
+      if (!moving && pane && restsOn(row, pane, ROW_READING)) {
         // Written by this box, at rest: nobody is moving anything.
         return;
       }
-      const movement = moving || beginMovement({});
+      const movement = moving || beginMovement({
+        byHand: true
+      });
       sayRowMoves();
       if (movement.travelling || !travelByDrag || !pane) {
         return;
       }
+      // Nothing will say when a trackpad's fingers leave, and a long stroke would keep
+      // the first tab lit for the whole trip: the nearest page answers. A finger has a
+      // lift to wait for (onLeftToSnap), and until then the page held stands.
+      if (!finger) {
+        const {
+          base,
+          toward,
+          fraction
+        } = readRowFrame(row, panes);
+        followPageOnScreen(pages[panes.indexOf(fraction >= 0.5 && toward ? toward : base)], askedPageRef.current || pages[currentIndex]);
+      }
       const pulled = row.scrollLeft - pane.offsetLeft;
       if (Math.abs(pulled) < SET_OFF_PULL) {
         return;
@@ -42268,7 +42430,7 @@ const RouteTravel = ({
       const {
         base,
         toward
-      } = readRowStretch(row, panes, panes[0]);
+      } = readRowFrame(row, panes);
       const index = panes.indexOf(forward && toward ? toward : base);
       const page = pages[index];
       if (!page) {
@@ -42283,12 +42445,22 @@ const RouteTravel = ({
     };
     const onLand = () => {
       const movement = movementRef.current;
-      if (!movement) {
+      if (!movement || isClipped()) {
         return;
       }
       const panes = panesOf(row);
-      const pane = pageAtRest(row, panes);
+      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;
@@ -42312,8 +42484,55 @@ const RouteTravel = ({
       onLand,
       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.
+    const onTouchOnTravel = () => {
+      if (movementRef.current?.travelling && !isClipped()) {
+        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.
+    const onPress = clickEvent => {
+      const movement = movementRef.current;
+      if (!movement?.byHand || movement.rowTaken) {
+        return;
+      }
+      const link = clickEvent.target.closest?.("a[href]");
+      const {
+        pages,
+        currentIndex
+      } = latestRef.current;
+      const page = pages[currentIndex];
+      if (!link || !page || new URL(link.href).pathname !== pathOf(page)) {
+        return;
+      }
+      movement.travelling = true;
+      takeRowFromHand(movement);
+    };
+    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?.();
       movementRef.current = null;
       publishRouteRowMove(null);
@@ -42329,7 +42548,7 @@ const RouteTravel = ({
       return;
     }
     const pane = panesOf(rowRef.current)[currentIndex];
-    if (pane && restsOn(rowRef.current, pane)) {
+    if (pane && restsOn(rowRef.current, pane, ROW_READING)) {
       Promise.resolve().then(endMovement);
     }
   }, [currentIndex]);
@@ -42437,6 +42656,18 @@ const copyScrollPositions = (from, to) => {
     }
   }
 };
+const afterFrames = (count, callback) => {
+  if (count === 0) {
+    callback();
+    return;
+  }
+  requestAnimationFrame(() => {
+    afterFrames(count - 1, callback);
+  });
+};
+
+// The two pages the row stands between.
+const readRowFrame = (row, panes) => readRowStretch(row, panes, panes[0], ROW_READING);
 
 // A page of the row: a route, and the params that say which of its tabs when
 // several of them share it. Written as a bare route by a caller whose tabs are
@@ -58187,8 +58418,9 @@ const wordsOf = (element, attribute) => {
   return value ? value.split(" ") : NO_WAYS;
 };
 
-// The slide to say one is on: for whatever tells the reader where they are, as
-// opposed to data-slide-current, which is what a travel departs from.
+// The slide one is on, for whatever tells the reader where they are or what a press
+// would do: the current one while a hand holds the row, where the row is going once
+// it has let go. data-slide-current only changes at rest.
 const readSlideOnScreen = (element) =>
   element.getAttribute(SLIDE_HEADING_ATTRIBUTE) ??
   element.getAttribute(SLIDE_CURRENT_ATTRIBUTE) ??
@@ -58238,10 +58470,9 @@ const sameSlideContainerState = (a, b) =>
  *   has let go, because that is what one is looking at. It can come before the
  *   slide's own signal and `onCurrentChange`, which wait for the row to rest.
  *   `toward` is the other slide in the frame while the picture is between two,
- *   and nothing at rest. `can` is "asking for it would do something", from the
- *   slide a travel would depart from, `held` is "it is there and this slide says
- *   no" — a way out is dead in both cases, and only the second is worth a word to
- *   the reader.
+ *   and nothing at rest. `can` is "asking for it would do something", from that
+ *   same slide, `held` is "it is there and this slide says no" — a way out is dead
+ *   in both cases, and only the second is worth a word to the reader.
  *   `known` is false until the box has been read: no box was named and none is
  *   above, the id names nothing, or — for one commit — this mounted before the
  *   box had painted. Until then `can` answers YES, because it is the answer that
@@ -69267,6 +69498,10 @@ const css$I = /* css */`@property --slide-travel-progress {
     overflow-y: auto;
   }
 
+  &[data-slide-row-taken] {
+    overflow: clip;
+  }
+
   &:focus {
     outline: none;
   }
@@ -69318,6 +69553,77 @@ const css$I = /* css */`@property --slide-travel-progress {
 }
 `;
 
+// What a row left moving shows when a travel is asked for over it, read before the
+// slides are written: the one or two slides in the frame, and how far the track has
+// to stand, in a box that is no scroller, for that frame not to move.
+const readRowStand = (containerEl, slideElements) => {
+  const restElement = slideElements.find(slideElement => slideElement.hasAttribute("data-current"));
+  if (!restElement) {
+    return null;
+  }
+  const {
+    base,
+    toward,
+    fraction
+  } = readRowStretch(containerEl, slideElements, restElement);
+  return {
+    base: readArea(base),
+    toward: toward && fraction > 0 ? readArea(toward) : null,
+    fraction,
+    offset: `${-containerEl.scrollLeft}px ${-containerEl.scrollTop}px`
+  };
+};
+// The stage of a travel asked for over a row left moving. What is in the frame stays
+// where it is, and the slide asked for comes one box past it, unless it is already
+// there: then what is left to make is a part of a box.
+const stageOverRow = (rowStand, area, realPlaceOf, stepAsked) => {
+  const {
+    base,
+    toward,
+    fraction
+  } = rowStand;
+  const basePlace = realPlaceOf(base);
+  const placeByArea = new Map([[base, basePlace]]);
+  const towardPlace = toward ? realPlaceOf(toward) : null;
+  if (toward) {
+    placeByArea.set(toward, towardPlace);
+  }
+  if (area === base || area === toward) {
+    const otherArea = area === base ? toward : base;
+    if (!otherArea) {
+      return {
+        placeByArea,
+        leaningArea: null,
+        progress: 0
+      };
+    }
+    const from = realPlaceOf(otherArea);
+    const to = realPlaceOf(area);
+    const sign = Math.sign(to.x - from.x) || Math.sign(to.y - from.y);
+    return {
+      placeByArea,
+      leaningArea: otherArea,
+      progress: sign * (area === base ? fraction : 1 - fraction)
+    };
+  }
+  const to = realPlaceOf(area);
+  const step = stepAsked || {
+    x: Math.sign(to.x - basePlace.x),
+    y: Math.sign(to.y - basePlace.y)
+  };
+  const pastToward = towardPlace && (towardPlace.x - basePlace.x) * step.x + (towardPlace.y - basePlace.y) * step.y > 0;
+  const side = pastToward ? towardPlace : basePlace;
+  placeByArea.set(area, {
+    x: side.x + step.x,
+    y: side.y + step.y
+  });
+  return {
+    placeByArea,
+    leaningArea: toward && fraction >= 0.5 ? toward : base,
+    progress: step.x || step.y
+  };
+};
+
 // How much of a travel is left to make, as a fraction of the travel that was
 // asked for: 1 for a move starting from rest, less for one picked up while the
 // track was already moving. Everything is measured in px against the track's
@@ -69334,6 +69640,19 @@ const ratioOfOneTravel = (track, from, to, targetBefore) => {
   const ratio = left / asked;
   return ratio > 1 ? 1 : ratio;
 };
+// The same for a travel taken over a row, which nobody asked for from anywhere in
+// particular: what is left, in boxes. Laid out sizes, like the scroll position that
+// `from` is read off: a row inside a popup still growing is not its transformed size.
+const ratioOfOneBox = (track, from, to) => {
+  const box = {
+    width: track.offsetWidth,
+    height: track.offsetHeight
+  };
+  const start = offsetToPx(from, box);
+  const end = offsetToPx(to, box);
+  const ratio = Math.abs(end.x - start.x) / box.width + Math.abs(end.y - start.y) / box.height;
+  return ratio > 1 ? 1 : ratio;
+};
 
 // A translate ("-100% 0%", "-260px 0px", "none") as two numbers of pixels.
 // Percentages are the size of the box, which is what a translate resolves them
@@ -69911,6 +70230,10 @@ const SlideContainer = ({
   // The slide a hand has just landed on, for the render it asks for: it is
   // already there, so there is nothing to play.
   const handLandedRef = useRef(null);
+  // The slide a row is being carried away from, pressed: it stays current, so only
+  // a render says the row has to come back to it (see goToArea).
+  const rowBackAskedRef = useRef(false);
+  const [, askRowBack] = useState(0);
   // Where the box rests on the row, and what the row starts from: a slide that
   // holds on to the user ends the row on that side, and a scroll range starts at
   // its first reachable slide (see writeRowAtRest).
@@ -70157,17 +70480,23 @@ const SlideContainer = ({
   };
 
   // Where the row is going, for as long as the current slide has not changed:
-  // anything saying where one is reads this first (see readSlideOnScreen). Left to
-  // the caller to announce, a landing having more to say in the same breath.
+  // anything saying where one is reads this first, and so does what a press would
+  // do from there (see readSlideOnScreen). Left to the caller to announce, a landing
+  // having more to say in the same breath.
   const writeHeading = headingElement => {
     const containerEl = containerRef.current;
     const area = headingElement ? readArea(headingElement) : null;
     // A window does not change slide, it rolls: it has nowhere to be heading.
-    if (loop || area === null || area === containerEl.getAttribute(SLIDE_CURRENT_ATTRIBUTE)) {
-      containerEl.removeAttribute(SLIDE_HEADING_ATTRIBUTE);
+    const heading = loop || area === null || area === containerEl.getAttribute(SLIDE_CURRENT_ATTRIBUTE) ? null : area;
+    if (heading === containerEl.getAttribute(SLIDE_HEADING_ATTRIBUTE)) {
       return;
     }
-    containerEl.setAttribute(SLIDE_HEADING_ATTRIBUTE, area);
+    if (heading === null) {
+      containerEl.removeAttribute(SLIDE_HEADING_ATTRIBUTE);
+    } else {
+      containerEl.setAttribute(SLIDE_HEADING_ATTRIBUTE, heading);
+    }
+    paintWays();
   };
   const markAnswered = area => {
     const order = readMap().slideElements.map(readArea);
@@ -70334,6 +70663,7 @@ const SlideContainer = ({
     offsetRef.current = "0% 0%";
     track.style.setProperty("--slide-container-offset", "0% 0%");
     containerRef.current.removeAttribute("data-slide-travelling");
+    containerRef.current.removeAttribute("data-slide-row-taken");
     sendRowToRest(currentElement);
     renderNear(currentArea, {
       alongside: true
@@ -70408,10 +70738,26 @@ const SlideContainer = ({
     // between the picture and the slide arriving, on the axis it walks.
     let travelStep = null;
     const drawnArea = stage ? stage.area : drawnAreaRef.current;
-    const travelStarts = !still && durationMs > 0 && drawnArea !== undefined && drawnArea !== currentArea && slideElements.some(slideElement => readArea(slideElement) === drawnArea);
-    if (travelStarts) {
-      // Asked for over a row still snapping: the travel is what one will see.
+    const rowBackAsked = rowBackAskedRef.current;
+    rowBackAskedRef.current = false;
+    // Asked for over a row a hand has left moving: the row belongs to what was asked
+    // for, and where the hand's snap would have ended decides nothing.
+    const rowTaken = handMovingRef.current && !handLanded && (drawnArea !== currentArea || rowBackAsked);
+    const rowStand = rowTaken ? readRowStand(containerRef.current, slideElements) : null;
+    if (rowTaken) {
+      handMovingRef.current = false;
       writeHeading(null);
+      paintTravelProgress();
+    }
+    const travelStarts = !still && durationMs > 0 && drawnArea !== undefined && (drawnArea !== currentArea || rowTaken) && slideElements.some(slideElement => readArea(slideElement) === drawnArea);
+    let overRow = null;
+    if (travelStarts && rowStand) {
+      overRow = stageOverRow(rowStand, currentArea, realPlaceOf, travelStepRef.current);
+      stage = stageRef.current = {
+        placeByArea: overRow.placeByArea,
+        area: currentArea
+      };
+    } else if (travelStarts) {
       // Where the slide being left IS — the place the stage gave it if a travel
       // was already playing (a press landing mid-travel departs from where the
       // eye is, not from the map), its own place otherwise.
@@ -70496,9 +70842,16 @@ const SlideContainer = ({
     }
     const track = trackRef.current;
     containerRef.current.toggleAttribute("data-slide-travelling", Boolean(stage));
-    // How far the track stands from where the scroll position rests: none at rest.
+    if (rowTaken) {
+      containerRef.current.setAttribute("data-slide-row-taken", "");
+    }
+    // How far the track stands from where the scroll position rests: none at rest. A
+    // box that is no scroller has no position, and the track says it all.
     const rowPlace = onRow(currentPlace);
-    const restPlace = restPlaceRef.current;
+    const restPlace = containerRef.current.hasAttribute("data-slide-row-taken") ? {
+      x: 0,
+      y: 0
+    } : restPlaceRef.current;
     const offset = `${(restPlace.x - rowPlace.x) * 100}% ${(restPlace.y - rowPlace.y) * 100}%`;
     // The travel that was ASKED for is still one box, whatever is left of it to
     // cover: what is left takes what is left of the duration.
@@ -70521,6 +70874,9 @@ const SlideContainer = ({
       const onScreenPx = trackOffsetPx(track, containerRef.current);
       offsetOnScreen = `${onScreenPx.x}px ${onScreenPx.y}px`;
     }
+    if (overRow) {
+      offsetOnScreen = rowStand.offset;
+    }
     const offsetBefore = offsetOnScreen ?? offsetRef.current;
     offsetRef.current = offset;
     track.style.setProperty("--slide-container-offset", offset);
@@ -70539,10 +70895,10 @@ const SlideContainer = ({
       // short distance for a full duration. One box in `duration` is the pace;
       // this only ever shortens it (a longer travel is not made slower, which
       // would make a two-box move drag).
-      const travelRatio = ratioOfOneTravel(track, offsetBefore, offset, offsetTargetBefore);
+      const travelRatio = overRow ? ratioOfOneBox(track, offsetBefore, offset) : ratioOfOneTravel(track, offsetBefore, offset, offsetTargetBefore);
       // Already moving, so there is no ease-in to play: it would stall the track
       // for an instant right where the eye is following it.
-      const easing = travelInFlight ? "ease-out" : "ease";
+      const easing = travelInFlight || overRow ? "ease-out" : "ease";
       // Cancelled rather than layered: two animations on the same property
       // would blend, and what one sees then is neither of the two moves.
       trackAnimationRef.current?.cancel();
@@ -70550,15 +70906,21 @@ const SlideContainer = ({
         translate: offsetBefore
       }, {
         translate: offset
-      }], {
+      }],
+      // Backwards: the first frame's clock can read a fraction of a millisecond
+      // before the start time Chrome gives the animation, which would show the
+      // travel already over.
+      {
         duration: durationMs * travelRatio,
-        easing
+        easing,
+        fill: "backwards"
       });
       // The trait travels with the slides, from a whole box away.
-      const progressFrom = travelStep ? travelStep.x || travelStep.y : 0;
+      const stepProgress = travelStep ? travelStep.x || travelStep.y : 0;
+      const progressFrom = overRow ? overRow.progress : stepProgress;
       // The slide the picture leans on for the length of it is the one being
       // LEFT: it is the second one in the frame until the travel is over.
-      animateTravelProgress(progressFrom, durationMs * travelRatio, easing, drawnArea);
+      animateTravelProgress(progressFrom, durationMs * travelRatio, easing, overRow ? overRow.leaningArea : drawnArea);
       // Presses still waiting behind this one: it is already late, so it is
       // sent home at once rather than played out at the pace of someone who
       // has stopped pressing. Someone pressing → four times is asking to be
@@ -70579,6 +70941,17 @@ const SlideContainer = ({
       // thing it was standing for is over.
       settleTravel();
     }
+    // The row taken with nothing playing to give it back (no duration, a page change
+    // carrying the slide): no scroller for as long as the compositor takes to hear it.
+    if (!stageRef.current && containerRef.current.hasAttribute("data-slide-row-taken")) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (trackAnimationRef.current?.playState !== "running") {
+            settleTravel();
+          }
+        });
+      });
+    }
     // A window waiting for its travel to be over (see goToArea's own loop
     // branch): the animation says when, and says it about the move that just
     // started rather than about a duration counted out beside it.
@@ -70642,9 +71015,9 @@ const SlideContainer = ({
       sendRowToRest(currentElement);
     }
     // Said last, and after data-current has been written: what a travel would do
-    // is read off the map from the slide that is now current, and off the locks
-    // that slide is wearing in this very commit.
-    paintWays(currentElement);
+    // is read off the map from the slide on screen, and off the locks that slide is
+    // wearing in this very commit.
+    paintWays();
     // …and once everything this commit had to write is written, the box says so
     // — a single announcement for a render that may have changed several of the
     // facts at once.
@@ -70691,14 +71064,18 @@ const SlideContainer = ({
       placeOf
     } = readMap();
     const currentElement = slideElements.find(slideElement => slideElement.hasAttribute("data-current")) || slideElements[0];
-    if (!area || area === readArea(currentElement)) {
+    if (!area) {
       return false;
     }
+    // What a press leaves is the slide on screen, which is what paintWays offers from.
+    // A landing is the row arriving there, and what it leaves is the current one.
+    const areaLeft = landed ? readArea(currentElement) : readSlideOnScreen(containerRef.current) ?? readArea(currentElement);
+    const elementLeft = slideElements.find(slideElement => readArea(slideElement) === areaLeft) || currentElement;
     if (forward === undefined) {
       // Asked for by name (--navi-go-to-slide, --navi-back) rather than by a
       // direction: which way it is is still a fact, read off the map, and it is
       // what says which of the two locks below applies.
-      const from = placeOf.get(readArea(currentElement)) || {
+      const from = placeOf.get(areaLeft) || {
         x: 0,
         y: 0
       };
@@ -70716,9 +71093,18 @@ const SlideContainer = ({
     // one departure the forward hold does not apply to. Said here rather than
     // by dropping the attribute, which stays the render's to write — a hold
     // meant to stay (an explicit preventNavNext) is still there on the way back.
-    if (forward ? !released && currentElement?.hasAttribute("data-prevent-nav-next") : currentElement?.hasAttribute("data-prevent-nav-previous")) {
+    if (area !== areaLeft && (forward ? !released && elementLeft.hasAttribute("data-prevent-nav-next") : elementLeft.hasAttribute("data-prevent-nav-previous"))) {
       return false;
     }
+    if (area === readArea(currentElement)) {
+      // Nowhere to go, unless a hand has left the row on its way off this slide.
+      if (!handMovingRef.current) {
+        return false;
+      }
+      rowBackAskedRef.current = true;
+      askRowBack(count => count + 1);
+      return true;
+    }
     // The focus moves here, while the event that asked for it is still in hand:
     // who pressed what, and whether they were on the keyboard, is knowable now
     // and gone a render later. The slide arriving is made reachable on the spot
@@ -71100,7 +71486,7 @@ const SlideContainer = ({
   const move = (dx, dy, event, {
     value,
     released
-  } = {}) => goToArea(areaTowards(dx, dy), {
+  } = {}) => goToArea(areaTowards(dx, dy, readSlideOnScreen(containerRef.current)), {
     forward: dx > 0 || dy > 0,
     event,
     value,
@@ -71181,10 +71567,10 @@ const SlideContainer = ({
   const paintNativeRow = ({
     finger
   }) => {
-    if (trackAnimationRef.current?.playState === "running") {
+    const containerEl = containerRef.current;
+    if (trackAnimationRef.current?.playState === "running" || containerEl.hasAttribute("data-slide-row-taken")) {
       return;
     }
-    const containerEl = containerRef.current;
     const slideElements = Array.from(trackRef.current.children);
     const currentElement = slideElements.find(slideElement => slideElement.hasAttribute("data-current"));
     if (!currentElement) {
@@ -71402,13 +71788,19 @@ const SlideContainer = ({
   // ([data-slide-ways~="right"]), or through useSlideContainer, which watches
   // them. Nothing is told, everything is read: it is what lets them sit
   // anywhere, and what lets a container nobody drives still be followed.
-  const paintWays = currentElement => {
+  const paintWays = () => {
     const ways = [];
     const held = [];
+    const {
+      slideElements,
+      order
+    } = readMap();
+    const areaOnScreen = readSlideOnScreen(containerRef.current);
+    const elementOnScreen = slideElements.find(slideElement => readArea(slideElement) === areaOnScreen);
     // Whether the slide being left says no, this way. The one gate again, read
     // exactly as goToArea reads it at the moment of the travel — so what is
     // published here and what would happen cannot disagree.
-    const holdsTowards = forward => currentElement?.hasAttribute(forward ? "data-prevent-nav-next" : "data-prevent-nav-previous");
+    const holdsTowards = forward => elementOnScreen?.hasAttribute(forward ? "data-prevent-nav-next" : "data-prevent-nav-previous");
     const say = (name, offered, forward) => {
       if (!offered) {
         return;
@@ -71425,18 +71817,14 @@ const SlideContainer = ({
         // would be saying it about every row on the page.
         continue;
       }
-      say(direction, Boolean(areaTowards(dx, dy)), dx > 0 || dy > 0);
+      say(direction, Boolean(areaTowards(dx, dy, areaOnScreen)), dx > 0 || dy > 0);
     }
     // The two ends are ways out like the others — "all the way that way", said
     // by the map's own order rather than by a direction (see goToEnd, and
     // SlideContainer.First / .Last). Offered while one is not already standing
     // there, and held by the same lock the direction they lie in would be.
-    const {
-      order
-    } = readMap();
-    const currentArea = currentElement ? readArea(currentElement) : undefined;
-    say("first", order.length > 0 && order[0] !== currentArea, false);
-    say("last", order.length > 0 && order[order.length - 1] !== currentArea, true);
+    say("first", order.length > 0 && order[0] !== areaOnScreen, false);
+    say("last", order.length > 0 && order[order.length - 1] !== areaOnScreen, true);
     for (const element of travelPainters()) {
       if (ways.length) {
         element.setAttribute(SLIDE_WAYS_ATTRIBUTE, ways.join(" "));
@@ -71529,7 +71917,8 @@ const SlideContainer = ({
       "--slide-travel-progress": 0
     }], {
       duration: durationMs,
-      easing
+      easing,
+      fill: "backwards"
     }));
     progressAnimationsRef.current[0].finished.then(() => {
       progressAnimationsRef.current = [];
@@ -78491,7 +78880,10 @@ const KEYBOARD_RAISING_CONTROL_SELECTOR = `
   [contenteditable]:not([contenteditable="false"])
 `;
 const warnBottomSheetHoldingKeyboardControl = dialogEl => {
-  const controlEl = dialogEl.querySelector(KEYBOARD_RAISING_CONTROL_SELECTOR);
+  // A popup opens inside its opener's subtree, so the sheet's subtree also
+  // holds the fields of popups opened from it. Those are typed into in that
+  // popup, and a nested Dialog docked to the bottom runs this check itself.
+  const controlEl = Array.from(dialogEl.querySelectorAll(KEYBOARD_RAISING_CONTROL_SELECTOR)).find(el => el.closest(`[navi-control="dialog"], [navi-control="popover"]`) === dialogEl);
   if (!controlEl) {
     return;
   }
@@ -107995,7 +108387,9 @@ const StepList = ({
     const read = () => {
       const currentArea = containerElement.getAttribute(SLIDE_CURRENT_ATTRIBUTE);
       const towardArea = containerElement.getAttribute(SLIDE_TOWARD_ATTRIBUTE);
-      setContainerCurrent(currentArea ?? undefined);
+      // Which step is lit follows the screen. The halo counts from the current slide,
+      // which is what the progress it draws with is measured against.
+      setContainerCurrent(readSlideOnScreen(containerElement));
       const currentIdx = currentArea === null ? -1 : indexOf(currentArea);
       if (currentIdx === -1) {
         // A slide no step names (a confirmation screen): the halo is not