@jsenv/navi 0.30.5 → 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) {
@@ -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;
@@ -41773,12 +41781,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 +41788,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 +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;
@@ -42092,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 = () => {
@@ -42102,6 +42161,7 @@ const RouteTravel = ({
     }
     movementRef.current = null;
     row.removeAttribute("data-moving");
+    row.removeAttribute("data-route-row-taken");
     publishRouteRowMove(null);
     releaseHeldPage();
     if (liveRef.current) {
@@ -42169,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
@@ -42210,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;
@@ -42226,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;
@@ -42283,7 +42366,7 @@ const RouteTravel = ({
     };
     const onLand = () => {
       const movement = movementRef.current;
-      if (!movement) {
+      if (!movement || isClipped()) {
         return;
       }
       const panes = panesOf(row);
@@ -42312,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);
@@ -42441,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
@@ -58187,8 +58319,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 +58371,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 +69399,10 @@ const css$I = /* css */`@property --slide-travel-progress {
     overflow-y: auto;
   }
 
+  &[data-slide-row-taken] {
+    overflow: clip;
+  }
+
   &:focus {
     outline: none;
   }
@@ -69318,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
@@ -69334,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
@@ -69911,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).
@@ -70157,17 +70381,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 +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
@@ -70408,10 +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) {
-      // 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 +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.
@@ -70521,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);
@@ -70539,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();
@@ -70550,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
@@ -70579,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.
@@ -70642,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.
@@ -70691,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
       };
@@ -70716,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
@@ -71100,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,
@@ -71181,10 +71468,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 +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;
@@ -71425,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(" "));
@@ -71529,7 +71818,8 @@ const SlideContainer = ({
       "--slide-travel-progress": 0
     }], {
       duration: durationMs,
-      easing
+      easing,
+      fill: "backwards"
     }));
     progressAnimationsRef.current[0].finished.then(() => {
       progressAnimationsRef.current = [];
@@ -107995,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