@jsenv/navi 0.30.4 → 0.30.6

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) {
@@ -37756,9 +37756,23 @@ const collectRoutePages = children => {
  * Whether the next container down is a row a hand scrolls: every page has a
  * place on it from the start, and the browser moves between them (see
  * RouteTravel's `nativeScroll`). Told to one container, not to the pages it holds.
+ * False, or `{ renderNeighbour }`.
  */
 const RouteRowContext = createContext(false);
 
+/**
+ * What stands in the pane of a neighbour until its page does. A component of its
+ * own: what the application calls in there (a hook, a signal) answers to it, however
+ * many neighbours the row has at that moment.
+ */
+const RouteRowNeighbour = ({
+  renderNeighbour,
+  page
+}) => jsx("div", {
+  "data-route-row-neighbour": "",
+  children: renderNeighbour(page)
+});
+
 // A container as a row: one pane per leaf, in the order they are written. A page
 // still builds when its route first matches, since a route's actions only ask
 // while it does: before that its pane is empty. Once built it stays, with what
@@ -37771,6 +37785,9 @@ const RouteRowContext = createContext(false);
 const RouteRowContainer = ({
   children
 }) => {
+  const {
+    renderNeighbour
+  } = useContext(RouteRowContext);
   const {
     activeBranch,
     leaves
@@ -37819,16 +37836,19 @@ const RouteRowContainer = ({
       shown: true
     }, "fallback");
   }
-  return leaves.map(leaf => jsx(RouteRowPane, {
+  const shownIndex = activeBranch ? leaves.findIndex(leaf => leaf.id === activeBranch.id) : -1;
+  return leaves.map((leaf, index) => jsx(RouteRowPane, {
     branch: leaf,
     page: pageOf(leaf),
-    shown: activeBranch !== null && leaf.id === activeBranch.id
+    shown: index === shownIndex,
+    renderNeighbour: shownIndex !== -1 && (index === shownIndex - 1 || index === shownIndex + 1) ? renderNeighbour : undefined
   }, leaf.id));
 };
 const RouteRowPane = ({
   branch,
   page,
-  shown
+  shown,
+  renderNeighbour
 }) => {
   // The very vnode rendered last, while not on screen: Preact does not look into
   // it, and a page nobody can see costs nothing when the address moves.
@@ -37847,7 +37867,10 @@ const RouteRowPane = ({
     "data-route-row-pane": "",
     "data-built": contentRef.current ? "" : undefined,
     inert: !shown,
-    children: contentRef.current
+    children: contentRef.current || renderNeighbour && jsx(RouteRowNeighbour, {
+      renderNeighbour: renderNeighbour,
+      page: branchRoutePage(branch)
+    })
   });
 };
 
@@ -41570,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.
  */
@@ -41589,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;
@@ -41703,7 +41734,9 @@ const readRowStretch = (scroller, pages, page) => {
 /**
  * @param {Element} scroller
  * @param {object} options
- * @param {() => void} options.onScroll - the row moved.
+ * @param {(move: {finger: boolean}) => void} options.onScroll - the row moved.
+ *   `finger`: a touch has come since the row last stopped, so a lift will say where
+ *   it goes (`onLeftToSnap`). Without one (a trackpad, a wheel) nothing will.
  * @param {(event: Event|null) => void} options.onLand - the row may have stopped.
  *   Read `pageAtRest` to know whether it stopped on a page. Heard more than once
  *   for one landing, so what it does must find nothing to do the second time.
@@ -41719,11 +41752,13 @@ const watchRowScroll = (
 ) => {
   let stoppedTimeout = null;
   let touching = false;
+  let touchedSinceStop = false;
   let liftedAt = null;
   const landOnSilence = () => {
     liftedAt = null;
     // A finger holding the row still: nothing has stopped.
     if (!touching) {
+      touchedSinceStop = false;
       onLand(null);
     }
   };
@@ -41732,7 +41767,7 @@ const watchRowScroll = (
     stoppedTimeout = setTimeout(landOnSilence, STOPPED_SILENCE);
   };
   const onScrollEvent = () => {
-    onScroll();
+    onScroll({ finger: touchedSinceStop });
     armSilence();
     if (!liftedAt) {
       return;
@@ -41746,11 +41781,6 @@ const watchRowScroll = (
     liftedAt = null;
     onLeftToSnap?.(moved > 0);
   };
-  const onTouchStart = () => {
-    touching = true;
-    liftedAt = null;
-    clearTimeout(stoppedTimeout);
-  };
   const onTouchEnd = (touchEvent) => {
     touching = touchEvent.touches.length > 0;
     if (!touching) {
@@ -41758,23 +41788,38 @@ 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);
   };
 };
 
 installImportMetaCssBuild(import.meta);
 const css$16 = /* css */`.navi_route_travel {
+  flex-direction: column;
+  display: flex;
   position: relative;
 }
 
@@ -41805,6 +41850,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;
@@ -41826,6 +41884,15 @@ const css$16 = /* css */`.navi_route_travel {
     overflow: clip;
   }
 
+  & > [data-route-row-pane] > [data-route-row-neighbour] {
+    contain: layout paint;
+    visibility: visible;
+    flex-direction: column;
+    display: flex;
+    position: absolute;
+    inset: 0;
+  }
+
   & > [data-route-row-live] {
     flex-direction: column;
     grid-row: 1;
@@ -41858,6 +41925,7 @@ const SET_OFF_PULL = 16;
  *   routes?: Array<object|{route: object, params?: object}>,
  *   travelByDrag?: boolean,
  *   onTravel?: (detail: {route: object, params: object|undefined, cause: string}) => void|Promise<void>,
+ *   renderNeighbour?: (page: {route: object, params: object|undefined}) => import("preact").ComponentChildren,
  * }>}
  * @param {Array<object|{route: object, params?: object}>} [props.routes] - a window
  *   over something longer, in order. Read from the <Route> children by default,
@@ -41874,6 +41942,13 @@ const SET_OFF_PULL = 16;
  *   of the page under six entries. A tab pressed goes the way its <Link> says —
  *   `<Link replace>` for a row of tabs, so a press and a swipe towards the same
  *   neighbour write the same history.
+ * @param {(page: {route: object, params: object|undefined}) => import("preact").ComponentChildren} [props.renderNeighbour]
+ *   - what stands in the pane of a page next to the one on screen, until the hand
+ *   has pulled far enough to bring that page: its background, its skeleton, what the
+ *   list already knows. A `<Route>` page already built shows itself. Receives
+ *   `{ route, params }`, or the entry of `routes` as it was given, and is a column
+ *   the height of the row, as the page is. Its route does not match while it stands
+ *   there: what it reads is not asked for.
  *
  * 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
@@ -41889,6 +41964,7 @@ const RouteTravel = ({
     replace: true,
     routeTransition: "none"
   }),
+  renderNeighbour,
   className,
   children,
   ...rest
@@ -41949,9 +42025,7 @@ const RouteTravel = ({
       travelling: false,
       pictures: new Map(),
       resumeScrollRecording: null,
-      scrollsDocument: getScrollContainer(row.parentElement, {
-        includeHidden: true
-      }) === document.documentElement,
+      scrollsDocument: rowFollowsDocument(row),
       ...fields
     };
     movementRef.current = movement;
@@ -42046,6 +42120,37 @@ 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.
+  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, () => {
+        const pane = panesOf(row)[latestRef.current.currentIndex];
+        if (movementRef.current === movement && pane) {
+          row.scrollTo({
+            left: pane.offsetLeft,
+            behavior: "smooth"
+          });
+        }
+      });
+    });
+  };
+
   // 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 = () => {
@@ -42056,6 +42161,7 @@ const RouteTravel = ({
     }
     movementRef.current = null;
     row.removeAttribute("data-moving");
+    row.removeAttribute("data-route-row-taken");
     publishRouteRowMove(null);
     releaseHeldPage();
     if (liveRef.current) {
@@ -42123,16 +42229,23 @@ const RouteTravel = ({
       }
       return;
     }
-    beginMovement({
+    const movementBefore = movementRef.current;
+    const movement = beginMovement({
       travelling: true
     });
-    row.scrollTo({
-      left: pane.offsetLeft,
-      behavior: "smooth"
-    });
     // In this very commit: the tab pressed already wears its bar, and the first
     // scroll event is a frame away.
     sayRowMoves();
+    if (movementBefore?.byHand && !movementBefore.rowTaken) {
+      takeRowFromHand(movement);
+      return;
+    }
+    if (row.getAttribute("data-route-row-taken") !== "clip") {
+      row.scrollTo({
+        left: pane.offsetLeft,
+        behavior: "smooth"
+      });
+    }
   });
 
   // Somebody else is about to move the address to another page of a window: its
@@ -42164,14 +42277,17 @@ 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;
@@ -42180,11 +42296,24 @@ const RouteTravel = ({
         // 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
+        } = readRowStretch(row, panes, panes[0]);
+        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;
@@ -42237,7 +42366,7 @@ const RouteTravel = ({
     };
     const onLand = () => {
       const movement = movementRef.current;
-      if (!movement) {
+      if (!movement || isClipped()) {
         return;
       }
       const panes = panesOf(row);
@@ -42266,8 +42395,48 @@ const RouteTravel = ({
       onLand,
       onLeftToSnap
     });
+    // A hand back on a row taken from one: it is the hand's again, snapping included.
+    const onHandBack = () => {
+      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", onHandBack, {
+      passive: true
+    });
+    row.addEventListener("wheel", onHandBack, {
+      passive: true
+    });
+    document.addEventListener("click", onPress, {
+      capture: true
+    });
     return () => {
       stopWatching();
+      row.removeEventListener("touchstart", onHandBack);
+      row.removeEventListener("wheel", onHandBack);
+      document.removeEventListener("click", onPress, {
+        capture: true
+      });
       movementRef.current?.resumeScrollRecording?.();
       movementRef.current = null;
       publishRouteRowMove(null);
@@ -42287,6 +42456,30 @@ const RouteTravel = ({
       Promise.resolve().then(endMovement);
     }
   }, [currentIndex]);
+
+  // 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);
+  useLayoutEffect(() => {
+    if (!paintsNeighbours) {
+      return undefined;
+    }
+    const row = rowRef.current;
+    const onTouchStart = () => {
+      if (!movementRef.current && rowFollowsDocument(row)) {
+        row.style.setProperty("--navi-route-row-pin", `${pinOf(row)}px`);
+      }
+    };
+    row.addEventListener("touchstart", onTouchStart, {
+      passive: true
+    });
+    return () => {
+      row.removeEventListener("touchstart", onTouchStart);
+    };
+  }, [paintsNeighbours]);
+  const rowContext = useMemo(() => ({
+    renderNeighbour
+  }), [renderNeighbour]);
   const rowKind = pages.length < 2 && windowed ? "still" : travelByDrag ? "" : "code";
   return jsx("div", {
     ...rest,
@@ -42299,12 +42492,20 @@ const RouteTravel = ({
       ,
       "data-travel-by-drag": travelByDrag && rowKind !== "still" ? "x" : undefined,
       children: windowed ? jsxs(Fragment, {
-        children: [pages.map((page, index) => jsx("div", {
-          "data-route-row-pane": "",
-          style: {
-            gridColumn: index + 1
-          }
-        }, index)), jsx("div", {
+        children: [pages.map((page, index) => {
+          const holdsNeighbour = paintsNeighbours && isNeighbourPane(index, liveIndex, movementRef.current);
+          return jsx("div", {
+            "data-route-row-pane": "",
+            inert: holdsNeighbour,
+            style: {
+              gridColumn: index + 1
+            },
+            children: holdsNeighbour && jsx(RouteRowNeighbour, {
+              renderNeighbour: renderNeighbour,
+              page: page
+            })
+          }, index);
+        }), jsx("div", {
           ref: liveRef,
           "data-route-row-live": "",
           style: {
@@ -42316,13 +42517,25 @@ const RouteTravel = ({
           "data-route-row-pictures": ""
         })]
       }) : jsx(RouteRowContext.Provider, {
-        value: true,
+        value: rowContext,
         children: children
       })
     })
   });
 };
 
+// The panes on each side of the live page. Not one holding a picture of the page
+// left there: a page with no background of its own would show it through.
+const isNeighbourPane = (index, liveIndex, movement) => {
+  if (index !== liveIndex - 1 && index !== liveIndex + 1) {
+    return false;
+  }
+  return !movement || !movement.pictures.has(index);
+};
+const rowFollowsDocument = row => getScrollContainer(row.parentElement, {
+  includeHidden: true
+}) === document.documentElement;
+
 // How far down the row the reader is looking, for a page brought in: a page on
 // screen scrolls with the document, and one arriving has to start from there.
 const pinOf = row => {
@@ -42351,6 +42564,15 @@ const copyScrollPositions = (from, to) => {
 // 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
 // routes of their own — which is the same page with nothing to tell apart.
+const afterFrames = (count, callback) => {
+  if (count === 0) {
+    callback();
+    return;
+  }
+  requestAnimationFrame(() => {
+    afterFrames(count - 1, callback);
+  });
+};
 const normalizePage = page => page.isRoute ? {
   route: page,
   params: undefined
@@ -58059,6 +58281,10 @@ const SLIDE_TOWARD_ATTRIBUTE = "data-slide-travel-toward";
 // one: a hand on a row the browser scrolls can carry it past several slides, and
 // what follows it goes on between the two it is standing between.
 const SLIDE_BASE_ATTRIBUTE = "data-slide-travel-base";
+// The slide the row is on its way to while the current one has not changed yet,
+// because that only happens at rest: nothing is rendered and no address is written
+// under a snap, and what says where one is should not wait for it.
+const SLIDE_HEADING_ATTRIBUTE = "data-slide-heading";
 // Every way out that would DO something right now, in the words the commands
 // use: a direction ("left", "right", "up", "down") when there is a slide that
 // way, plus "first" and "last" when one is not already standing at that end of
@@ -58093,9 +58319,17 @@ const wordsOf = (element, attribute) => {
   return value ? value.split(" ") : NO_WAYS;
 };
 
+// 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) ??
+  undefined;
+
 const readSlideContainerState = (element) => ({
   known: true,
-  current: element.getAttribute(SLIDE_CURRENT_ATTRIBUTE) ?? undefined,
+  current: readSlideOnScreen(element),
   toward: element.getAttribute(SLIDE_TOWARD_ATTRIBUTE) ?? undefined,
   // In DOM order — which is the order of the WALK for a line, and not
   // necessarily for a map: there the order is the one the areas are written in
@@ -58133,11 +58367,13 @@ const sameSlideContainerState = (a, b) =>
  *   can: (wayOut: "left"|"right"|"up"|"down"|"first"|"last") => boolean,
  *   held: (wayOut: "left"|"right"|"up"|"down"|"first"|"last") => boolean,
  * }} where the box stands. `current` is the slide on screen — the one being
- *   travelled TO while a travel plays, because that is what one is looking at;
+ *   travelled TO while a travel plays, and the one the row is going to once a hand
+ *   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", `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
@@ -58991,7 +59227,7 @@ const Nav = ({
     }
     slideContainerElementRef.current = containerElement;
     const readContainer = () => {
-      setCurrentSlideArea(containerElement.getAttribute(SLIDE_CURRENT_ATTRIBUTE) ?? undefined);
+      setCurrentSlideArea(readSlideOnScreen(containerElement));
       paintIndicatorGeometryRef.current();
       scheduleTabScrollSyncRef.current();
     };
@@ -69163,6 +69399,10 @@ const css$I = /* css */`@property --slide-travel-progress {
     overflow-y: auto;
   }
 
+  &[data-slide-row-taken] {
+    overflow: clip;
+  }
+
   &:focus {
     outline: none;
   }
@@ -69214,6 +69454,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
@@ -69230,6 +69541,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
@@ -69807,6 +70131,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).
@@ -70051,6 +70379,26 @@ const SlideContainer = ({
   const paintCurrentArea = area => {
     containerRef.current?.setAttribute(SLIDE_CURRENT_ATTRIBUTE, area);
   };
+
+  // Where the row is going, for as long as the current slide has not changed:
+  // 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.
+    const heading = loop || area === null || area === containerEl.getAttribute(SLIDE_CURRENT_ATTRIBUTE) ? null : area;
+    if (heading === containerEl.getAttribute(SLIDE_HEADING_ATTRIBUTE)) {
+      return;
+    }
+    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);
     const rank = order.indexOf(area);
@@ -70216,6 +70564,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
@@ -70256,6 +70605,10 @@ const SlideContainer = ({
     slideElements[0];
     const currentArea = readArea(currentElement);
     paintCurrentArea(currentArea);
+    // In the commit the slide changes in, so nothing reads the slide left in between.
+    if (!handMovingRef.current) {
+      writeHeading(null);
+    }
     const realPlaceOf = area => placeOf.get(area) || {
       x: 0,
       y: 0
@@ -70286,8 +70639,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) {
+    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.
@@ -70372,9 +70743,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.
@@ -70397,6 +70775,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);
@@ -70415,10 +70796,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();
@@ -70426,15 +70807,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
@@ -70455,6 +70842,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.
@@ -70518,9 +70916,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.
@@ -70567,14 +70965,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
       };
@@ -70592,9 +70994,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
@@ -70976,7 +71387,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,
@@ -71054,11 +71465,13 @@ const SlideContainer = ({
   // Where a hand has the row, in the terms of --slide-travel-progress: from the
   // current slide while it stands next to it, and past that between the two it
   // stands between, as far as the hand carries it.
-  const paintNativeRow = () => {
-    if (trackAnimationRef.current?.playState === "running") {
+  const paintNativeRow = ({
+    finger
+  }) => {
+    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) {
@@ -71066,6 +71479,9 @@ const SlideContainer = ({
     }
     if (restsOn(containerEl, currentElement)) {
       if (handMovingRef.current) {
+        if (!finger) {
+          writeHeading(null);
+        }
         paintTravelProgress();
       }
       return;
@@ -71086,6 +71502,12 @@ const SlideContainer = ({
       }
       element.style.setProperty("--slide-travel-progress", forward ? -fraction : fraction);
     }
+    // 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 slide answers. A finger
+    // has a lift to wait for (headNativeRow), and until then the slide held stands.
+    if (!finger) {
+      writeHeading(fraction >= 0.5 && toward ? toward : base);
+    }
     paintTravelToward(toward ? readArea(toward) : null);
     // What the hand reaches ahead of the neighbours built at rest is asked for on
     // the way: an empty slide goes by otherwise.
@@ -71093,6 +71515,28 @@ const SlideContainer = ({
       alongside: true
     });
   };
+
+  // A finger has lifted and the row moves: on past the slide it stands after, or
+  // back to it. Already standing on one, it has arrived, whichever way it came.
+  const headNativeRow = movedForward => {
+    if (!handMovingRef.current || trackAnimationRef.current?.playState === "running") {
+      return;
+    }
+    const slideElements = Array.from(trackRef.current.children);
+    const currentElement = slideElements.find(slideElement => slideElement.hasAttribute("data-current"));
+    if (!currentElement) {
+      return;
+    }
+    const {
+      base,
+      toward,
+      fraction,
+      forward
+    } = readRowStretch(containerRef.current, slideElements, currentElement);
+    const goesOn = fraction > 0 && movedForward === forward;
+    writeHeading(goesOn && toward ? toward : base);
+    announceState();
+  };
   const landNativeRow = scrollEndEvent => {
     if (!handMovingRef.current) {
       return;
@@ -71107,13 +71551,15 @@ const SlideContainer = ({
       return;
     }
     handMovingRef.current = false;
-    paintTravelProgress();
     const area = readArea(landedElement);
     const currentArea = containerEl.getAttribute(SLIDE_CURRENT_ATTRIBUTE);
     if (area === currentArea) {
+      writeHeading(null);
+      paintTravelProgress();
       settleTravel();
       return;
     }
+    paintTravelProgress();
     const event = scrollEndEvent ?? new Event("scrollend");
     if (loop) {
       // A window does not change slide, it rolls: back at rest in the render the
@@ -71144,6 +71590,8 @@ const SlideContainer = ({
     }
     // Refused: the row is put back in view of the slide that stays.
     handLandedRef.current = null;
+    writeHeading(null);
+    announceState();
     const currentElement = slideElements.find(slideElement => slideElement.hasAttribute("data-current"));
     containerEl.scrollTo({
       left: currentElement.offsetLeft,
@@ -71157,11 +71605,13 @@ const SlideContainer = ({
   const nativeRowHandlersRef = useRef(null);
   nativeRowHandlersRef.current = {
     paintNativeRow,
+    headNativeRow,
     landNativeRow
   };
   useLayoutEffect(() => {
     return watchRowScroll(containerRef.current, {
-      onScroll: () => nativeRowHandlersRef.current.paintNativeRow(),
+      onScroll: move => nativeRowHandlersRef.current.paintNativeRow(move),
+      onLeftToSnap: forward => nativeRowHandlersRef.current.headNativeRow(forward),
       onLand: event => nativeRowHandlersRef.current.landNativeRow(event)
     });
   }, []);
@@ -71239,13 +71689,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;
@@ -71262,18 +71718,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(" "));
@@ -71366,7 +71818,8 @@ const SlideContainer = ({
       "--slide-travel-progress": 0
     }], {
       duration: durationMs,
-      easing
+      easing,
+      fill: "backwards"
     }));
     progressAnimationsRef.current[0].finished.then(() => {
       progressAnimationsRef.current = [];
@@ -107832,7 +108285,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