@jsenv/navi 0.30.37 → 0.30.39

package/dist/dev/jsenv_navi.js

@@ -42632,7 +42632,17 @@ const watchRowScroll = (
 };
 
 installImportMetaCssBuild(import.meta);
-const css$16 = /* css */`.navi_route_travel {
+const css$16 = /* css */`@property --navi-route-row-pin {
+  syntax: "*";
+  inherits: false
+}
+
+@property --navi-route-row-stand {
+  syntax: "*";
+  inherits: false
+}
+
+.navi_route_travel {
   flex-direction: column;
   display: flex;
   position: relative;
@@ -42688,7 +42698,7 @@ const css$16 = /* css */`.navi_route_travel {
     display: flex;
   }
 
-  & > [data-route-row-pane][inert]:not([data-route-row-held]), &:has( > [data-route-row-held]) > [data-route-row-pane]:not([data-route-row-held]) {
+  & > [data-route-row-pane][inert]:not([data-route-row-held]), &[data-route-row-holding] > [data-route-row-pane]:not([data-route-row-held]) {
     top: var(--navi-route-row-pin, 0);
     contain: paint;
     max-height: 100dvh;
@@ -42860,11 +42870,25 @@ const RouteTravel = ({
   // when the row rests. Not what readers are told the page held is
   // (route_travel_hold.js): that follows the hand, and goes at its lift.
   const heldPaneRef = useRef(null);
-  const releasePaneAtRest = () => {
+  const releasePaneAtRest = row => {
     const heldPane = heldPaneRef.current;
     if (heldPane) {
       heldPaneRef.current = null;
       heldPane.removeAttribute("data-route-row-held");
+      row.removeAttribute("data-route-row-holding");
+    }
+  };
+
+  // How far down the reader is looking, on every pane, for those the CSS pins.
+  const pinPanes = row => {
+    const pin = `${pinOf(row)}px`;
+    for (const pane of panesOf(row)) {
+      pane.style.setProperty("--navi-route-row-pin", pin);
+    }
+  };
+  const unpinPanes = row => {
+    for (const pane of panesOf(row)) {
+      pane.style.removeProperty("--navi-route-row-pin");
     }
   };
 
@@ -42891,13 +42915,14 @@ const RouteTravel = ({
     if (!windowed && paneAtRest) {
       heldPaneRef.current = paneAtRest;
       paneAtRest.setAttribute("data-route-row-held", "");
+      row.setAttribute("data-route-row-holding", "");
     }
     if (movement.scrollsDocument) {
       // Whatever the browser does with the offset meanwhile (clamping it to a page
       // shorter than the trip) is not the reader scrolling, and the address it
       // would be written against may already be another page's.
       movement.resumeScrollRecording = suspendScrollRecording();
-      row.style.setProperty("--navi-route-row-pin", `${pinOf(row)}px`);
+      pinPanes(row);
     }
     return movement;
   };
@@ -43158,16 +43183,14 @@ const RouteTravel = ({
     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", "");
+    holdRowAt(row, position);
     afterFrames(2, () => {
       if (movementRef.current !== movement) {
         return;
       }
       // A scroller again, standing where no page does: not snapped meanwhile.
       row.setAttribute("data-route-row-travelling", "");
-      row.removeAttribute("data-route-row-taken");
-      row.style.removeProperty("--navi-route-row-stand");
+      releaseTakenRow(row);
       afterFrames(1, () => {
         if (movementRef.current === movement) {
           travelRowTo(latestRef.current.currentIndex, movement);
@@ -43187,10 +43210,10 @@ const RouteTravel = ({
     movementRef.current = null;
     letRowGo(movement);
     putRowBack(movement);
-    row.removeAttribute("data-route-row-taken");
+    releaseTakenRow(row);
     publishRouteRowMove(null);
     releaseHeldPage();
-    releasePaneAtRest();
+    releasePaneAtRest(row);
     if (liveRef.current) {
       liveRef.current.style.top = "";
     }
@@ -43198,7 +43221,7 @@ const RouteTravel = ({
       picture.remove();
     }
     if (movement.scrollsDocument) {
-      row.style.removeProperty("--navi-route-row-pin");
+      unpinPanes(row);
       const {
         pages,
         currentIndex
@@ -43503,7 +43526,7 @@ const RouteTravel = ({
       movementRef.current = null;
       publishRouteRowMove(null);
       releaseHeldPage();
-      releasePaneAtRest();
+      releasePaneAtRest(row);
     };
   }, [windowed]);
 
@@ -43567,7 +43590,7 @@ const RouteTravel = ({
     const row = rowRef.current;
     const onTouchStart = () => {
       if (!movementRef.current && rowFollowsDocument(row)) {
-        row.style.setProperty("--navi-route-row-pin", `${pinOf(row)}px`);
+        pinPanes(row);
       }
     };
     row.addEventListener("touchstart", onTouchStart, {
@@ -43665,6 +43688,22 @@ const copyScrollPositions = (from, to) => {
 // A tab pressed over a row a hand has left moving holds it still (takeRowFromHand):
 // what the row says meanwhile is not a hand moving it.
 const isRowTaken = row => row.hasAttribute("data-route-row-taken");
+
+// What the CSS offsets while the row is taken. A picture left meanwhile is a clone
+// of the live page, and takes its offset along.
+const STANDING_IN_ROW = ":scope > [data-route-row-pane], :scope > [data-route-row-live], :scope > [data-route-row-pictures] > *";
+const holdRowAt = (row, position) => {
+  for (const element of row.querySelectorAll(STANDING_IN_ROW)) {
+    element.style.setProperty("--navi-route-row-stand", `${-position}px`);
+  }
+  row.setAttribute("data-route-row-taken", "");
+};
+const releaseTakenRow = row => {
+  row.removeAttribute("data-route-row-taken");
+  for (const element of row.querySelectorAll(STANDING_IN_ROW)) {
+    element.style.removeProperty("--navi-route-row-stand");
+  }
+};
 const afterFrames = (count, callback) => {
   if (count === 0) {
     callback();
@@ -84371,9 +84410,15 @@ const PickerNaviMinute = props => {
  * element crossing the cursor — a dozen per wheel tick. Those hovers are noise:
  * the user asked to scroll, not to hover. Anything doing real work on hover (a
  * map highlight, a preview, a prefetch) then pays for that noise on the main
- * thread, exactly while a scroll animation is running. A rule matching
- * `[navi-scrolling] *` takes the rows out of hit-testing and the browser
- * suppresses it all, at no cost per element.
+ * thread, exactly while a scroll animation is running. A rule like
+ * `[navi-scrolling] .my_row { pointer-events: none }` takes the rows out of
+ * hit-testing and the browser suppresses it all.
+ *
+ * Such a rule must end on a class (or an id, a tag, an attribute) of what it
+ * styles: Chrome then restyles only those elements when the attribute comes and
+ * goes. One ending on `*`, including `.my_row:is([navi-scrolling] *)`, gives it
+ * nothing to narrow to, so it restyles everything under the scroller (the whole
+ * document when the page scrolls) at the start and at the end of every scroll.
  *
  * One capturing listener on the document sees them all: "scroll" does not
  * bubble, but it does propagate in the capture phase.
@@ -86758,7 +86803,7 @@ const css$w = /* css */`@property --list-group-label-height {
     }
   }
 
-  &:not([navi-hover-while-scrolling]) > .navi_list_scroll_container > .navi_list:is([navi-scrolling] *) {
+  [navi-scrolling] &:not([navi-hover-while-scrolling]) > .navi_list_scroll_container > .navi_list, &[navi-scrolling]:not([navi-hover-while-scrolling]) > .navi_list_scroll_container > .navi_list, &:not([navi-hover-while-scrolling]) > .navi_list_scroll_container[navi-scrolling] > .navi_list {
     pointer-events: none;
   }
 
@@ -88477,7 +88522,7 @@ const useListScrollSync = ({
         // where it lands.
         if (listItems.pagesSignal.peek() === 0) {
           if (typeof scrolledWanted.index === "number") {
-            placeItem(findItemElementAt(getListEl(), scrolledWanted.index), scrolledWanted.offset || 0);
+            placeItem(findItemElementAt(getListEl(), scrolledWanted.index), scrolledWanted.offset || 0, scrolledWanted.align);
           }
           return;
         }
@@ -88541,11 +88586,13 @@ const useListScrollSync = ({
     const itemRect = itemEl.getBoundingClientRect();
     const viewportSize = (horizontal ? viewportRect.width : viewportRect.height) / scale;
     const itemSize = (horizontal ? itemRect.width : itemRect.height) / scale;
-    const scrollInset = getItemScrollInset(scrollerEl, itemEl, horizontal);
-    // Centred in what the room at the start leaves of the view (a fixed bar,
-    // a sticky header), not in the whole of it.
-    const alignedOffset = align === "center" ? scrollInset + (viewportSize - scrollInset - itemSize) / 2 : align === "end" ? viewportSize - itemSize : scrollInset;
-    const offsetWanted = resolveOpenOffset(alignedOffset + offset, viewportSize, itemSize);
+    const offsetWanted = resolveHeldOffset({
+      align,
+      offset,
+      scrollInset: getItemScrollInset(scrollerEl, itemEl, horizontal),
+      viewportSize,
+      itemSize
+    });
     const offsetNow = (horizontal ? itemRect.left - viewportRect.left : itemRect.top - viewportRect.top) / scale;
     const scrollNow = horizontal ? scrollerEl.scrollLeft : scrollerEl.scrollTop;
     const delta = offsetNow - offsetWanted;
@@ -89284,6 +89331,7 @@ const useListScrollSync = ({
     }
     let index = null;
     let offset = 0;
+    let align;
     if (typeof wanted === "number") {
       index = wanted;
     } else if (wanted && wanted.id !== undefined) {
@@ -89292,6 +89340,7 @@ const useListScrollSync = ({
         index = wanted.index;
       }
       offset = wanted.offset || 0;
+      align = wanted.align;
     }
     if (index === null || index < 0 || index >= total) {
       return null;
@@ -89302,7 +89351,15 @@ const useListScrollSync = ({
       const rect = itemEl.getBoundingClientRect();
       itemSize = horizontal ? rect.width : rect.height;
     }
-    const above = resolveOpenOffset(getItemScrollInset(scrollerEl, itemEl, horizontal) + offset, screenSize, itemSize);
+    // Not drawn yet, the item weighs nothing and has no inset: centred, it
+    // stands half the screen down, which is where it will be put.
+    const above = resolveHeldOffset({
+      align,
+      offset,
+      scrollInset: getItemScrollInset(scrollerEl, itemEl, horizontal),
+      viewportSize: screenSize,
+      itemSize
+    });
     return {
       index,
       above
@@ -89974,6 +90031,21 @@ const resolveOpenOffset = (offset, viewportSize, itemSize) => {
   }
   return offset;
 };
+// How far from the start of the view an item held at `{ offset, align }`
+// stands: read the same way where the list is placed (placeItem) and where the
+// window is sized around it (readHold), or the window frames a screen the
+// item is not on. Centred in what the room at the start leaves of the view (a
+// fixed bar, a sticky header), not in the whole of it.
+const resolveHeldOffset = ({
+  align,
+  offset,
+  scrollInset,
+  viewportSize,
+  itemSize
+}) => {
+  const alignedOffset = align === "center" ? scrollInset + (viewportSize - scrollInset - itemSize) / 2 : align === "end" ? viewportSize - itemSize : scrollInset;
+  return resolveOpenOffset(alignedOffset + offset, viewportSize, itemSize);
+};
 
 // The room an item must be given at the top (or left) of the view: the
 // scroller's own scroll-padding — where a fixed bar publishes the space it