@jsenv/navi 0.30.1 → 0.30.3

package/dist/jsenv_navi.js

@@ -40261,6 +40261,73 @@ const publishRouteRowMove = (move) => {
   }
 };
 
+/**
+ * What a hand holding a row of routes leaves the address unable to say.
+ *
+ * A page not built yet builds by the address moving, so the address runs ahead of
+ * the hand. Nothing is decided while the hand holds the row: whatever says where the
+ * reader is answers from here until the hand lets go.
+ *
+ * Apart from route_travel.jsx so that every link can read it without bringing a row
+ * along.
+ */
+
+
+/**
+ * The page the reader is still on while a hand holds the row and the address has run
+ * ahead of it, `null` otherwise. A link to a page of the row answers from it by
+ * 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.
+ *
+ * One for the document. `route` says which row, for a page holding several boxes.
+ */
+const routeTravelSettledPageSignal = signal(null);
+
+// Where the address ran ahead to. A link has to tell it from any other link that
+// matches the address: an entry of a bottom bar whose route is a section around the
+// row stays lit.
+const headingPageSignal = signal(null);
+
+const holdPage = (page, headingPage) => {
+  headingPageSignal.value = headingPage;
+  if (routeTravelSettledPageSignal.peek() === null) {
+    routeTravelSettledPageSignal.value = page;
+  }
+};
+
+const releaseHeldPage = () => {
+  routeTravelSettledPageSignal.value = null;
+  headingPageSignal.value = null;
+};
+
+/**
+ * What a link to `route` with `params` answers because a hand holds a row.
+ *
+ * @returns {boolean|undefined} `undefined` when the hold says nothing about this
+ *   link, and the address answers.
+ */
+const readHeldLinkCurrent = (route, params) => {
+  const settledPage = routeTravelSettledPageSignal.value;
+  const headingPage = headingPageSignal.value;
+  if (!settledPage) {
+    return undefined;
+  }
+  // By address: a link may name fewer params than the page it leads to.
+  const leadsTo = (page) =>
+    page.route === route &&
+    route.buildUrl(params) === route.buildUrl(page.params);
+  if (leadsTo(settledPage)) {
+    return true;
+  }
+  if (leadsTo(headingPage)) {
+    return false;
+  }
+  return undefined;
+};
+
 /**
  * A row of pages the browser scrolls itself, and what is left to read from it.
  *
@@ -40349,12 +40416,21 @@ const readRowStretch = (scroller, pages, page) => {
  * @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.
+ * @param {(forward: boolean) => void} [options.onLeftToSnap] - a finger has lifted
+ *   and the row moves: snapping plays out what the browser has decided and does not
+ *   turn round, so this is where it is going. Heard once per lift, after `onScroll`.
+ *   A trackpad has no lift, and never says this.
  * @returns {() => void} stop listening.
  */
-const watchRowScroll = (scroller, { onScroll, onLand }) => {
+const watchRowScroll = (
+  scroller,
+  { onScroll, onLand, onLeftToSnap },
+) => {
   let stoppedTimeout = null;
   let touching = false;
+  let liftedAt = null;
   const landOnSilence = () => {
+    liftedAt = null;
     // A finger holding the row still: nothing has stopped.
     if (!touching) {
       onLand(null);
@@ -40367,14 +40443,27 @@ const watchRowScroll = (scroller, { onScroll, onLand }) => {
   const onScrollEvent = () => {
     onScroll();
     armSilence();
+    if (!liftedAt) {
+      return;
+    }
+    // A map moves along one axis at a time, so the two add up to the one it moves on.
+    const moved =
+      scroller.scrollLeft - liftedAt.left + (scroller.scrollTop - liftedAt.top);
+    if (Math.abs(moved) < AT_REST_DISTANCE) {
+      return;
+    }
+    liftedAt = null;
+    onLeftToSnap?.(moved > 0);
   };
   const onTouchStart = () => {
     touching = true;
+    liftedAt = null;
     clearTimeout(stoppedTimeout);
   };
   const onTouchEnd = (touchEvent) => {
     touching = touchEvent.touches.length > 0;
     if (!touching) {
+      liftedAt = { left: scroller.scrollLeft, top: scroller.scrollTop };
       armSilence();
     }
   };
@@ -40473,19 +40562,6 @@ const css$16 = /* css */`.navi_route_travel {
 // neither a navigation nor the requests of a page.
 const SET_OFF_PULL = 16;
 
-/**
- * What the URL says while a hand holds the row is where it is heading, for a page
- * not built yet: it builds by the address moving. A counter, a title or a
- * breadcrumb around the box must not move for a pull that is let go of: it reads
- * this first. The page the reader is still on while that lasts, and `null` when
- * the row has come to rest, which is when `scrollsnapchange` fires and a pager's
- * `settledPage` changes. 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.
- */
-const routeTravelSettledPageSignal = signal(null);
-
 /**
  * @type {import("preact").FunctionComponent<{
  *   routes?: Array<object|{route: object, params?: object}>,
@@ -40631,6 +40707,33 @@ const RouteTravel = ({
       cause: "drag"
     });
   };
+
+  // The page the row goes to, once nothing is left to the hand.
+  const askForPageOfRow = (index, movement) => {
+    const row = rowRef.current;
+    const page = latestRef.current.pages[index];
+    if (windowed && !movement.pictures.has(index)) {
+      leavePictureOfLive(movement);
+    }
+    Promise.resolve(askFor(page)).then(() => {
+      if (pageIsCurrent(page)) {
+        return;
+      }
+      // Refused, or sent elsewhere: the row says where the address is.
+      askedPageRef.current = null;
+      const {
+        currentIndex
+      } = latestRef.current;
+      const paneCurrent = panesOf(row)[currentIndex];
+      if (paneCurrent) {
+        movement.travelling = true;
+        row.scrollTo({
+          left: paneCurrent.offsetLeft,
+          behavior: "smooth"
+        });
+      }
+    });
+  };
   const sayRowMoves = () => {
     const row = rowRef.current;
     const panes = panesOf(row);
@@ -40663,7 +40766,7 @@ const RouteTravel = ({
     movementRef.current = null;
     row.removeAttribute("data-moving");
     publishRouteRowMove(null);
-    routeTravelSettledPageSignal.value = null;
+    releaseHeldPage();
     if (liveRef.current) {
       liveRef.current.style.top = "";
     }
@@ -40809,11 +40912,38 @@ const RouteTravel = ({
       } else if (paneTowards.hasAttribute("data-built")) {
         return;
       }
-      if (routeTravelSettledPageSignal.peek() === null) {
-        routeTravelSettledPageSignal.value = pages[currentIndex];
-      }
+      holdPage(pages[currentIndex], page);
       askFor(page);
     };
+    // The address, the tabs and what reads the held page all move here, the way they
+    // do for a tab pressed. If the row ends up elsewhere after all, onLand corrects
+    // the address when it rests.
+    const onLeftToSnap = forward => {
+      const movement = movementRef.current;
+      const {
+        pages,
+        travelByDrag
+      } = latestRef.current;
+      if (!movement || movement.travelling || !travelByDrag) {
+        return;
+      }
+      const panes = panesOf(row);
+      const {
+        base,
+        toward
+      } = readRowStretch(row, panes, panes[0]);
+      const index = panes.indexOf(forward && toward ? toward : base);
+      const page = pages[index];
+      if (!page) {
+        return;
+      }
+      if (!pageIsCurrent(page) && !samePage(askedPageRef.current, page)) {
+        askForPageOfRow(index, movement);
+      }
+      // After the address: a pull coming back to its page must not light the tab the
+      // address ran ahead to, even for a render.
+      releaseHeldPage();
+    };
     const onLand = () => {
       const movement = movementRef.current;
       if (!movement) {
@@ -40838,37 +40968,19 @@ const RouteTravel = ({
       if (samePage(askedPageRef.current, page)) {
         return;
       }
-      if (windowed && !movement.pictures.has(panes.indexOf(pane))) {
-        leavePictureOfLive(movement);
-      }
-      Promise.resolve(askFor(page)).then(() => {
-        if (pageIsCurrent(page)) {
-          return;
-        }
-        // Refused, or sent elsewhere: the row says where the address is.
-        askedPageRef.current = null;
-        const {
-          currentIndex
-        } = latestRef.current;
-        const paneCurrent = panesOf(row)[currentIndex];
-        if (paneCurrent) {
-          movement.travelling = true;
-          row.scrollTo({
-            left: paneCurrent.offsetLeft,
-            behavior: "smooth"
-          });
-        }
-      });
+      askForPageOfRow(panes.indexOf(pane), movement);
     };
     const stopWatching = watchRowScroll(row, {
       onScroll,
-      onLand
+      onLand,
+      onLeftToSnap
     });
     return () => {
       stopWatching();
       movementRef.current?.resumeScrollRecording?.();
       movementRef.current = null;
       publishRouteRowMove(null);
+      releaseHeldPage();
     };
   }, [windowed]);
 
@@ -55315,7 +55427,8 @@ const NavContext = createContext(null);
 
 /**
  * Whether the page one is on is `route` with `params` — what a link or a button
- * pointing at a route shows as current.
+ * pointing at a route shows as current. While a hand holds a row of routes, the
+ * page one is on is the one held, wherever the address has run ahead to.
  *
  * Read through a computed of that one answer, so the component reading it
  * re-renders when the answer flips, and not whenever the route's status moves:
@@ -55367,6 +55480,10 @@ const readRouteCurrent = (route, params, exceptRoutes, alsoRoutes) => {
       someAlsoMatching = true;
     }
   }
+  const heldAnswer = readHeldLinkCurrent(route, params);
+  if (heldAnswer !== undefined) {
+    return heldAnswer;
+  }
   if (someExceptMatching) {
     return false;
   }
@@ -73427,72 +73544,73 @@ const popupCss = /* css */ `
 `;
 
 /**
- * A modal dialog covered by another modal dialog is not in use, so it does not
- * answer the keyboard: a sheet raising one leaves what is behind it where it
- * is, under the keyboard like anything else behind that sheet.
- *
- * Two things make an open dialog follow the keyboard, and both are held here
- * for as long as it is covered:
- * - its ceiling (--dialog-maxmax-height), which CSS keeps tracking
- *   --navi-app-height. Written back resolved, inline. `freezeSize` cannot do it:
- *   a max-* wins over the width/height it writes;
+ * A popup covered by a modal dialog is not in use, so it does not answer the
+ * keyboard: a sheet raising one leaves what is behind it where it is, under the
+ * keyboard like anything else behind that sheet.
+ *
+ * Two things make an open popup follow the keyboard, and both are held here for
+ * as long as it is covered:
+ * - its ceiling (--dialog-maxmax-height, --popover-maxmax-height), which CSS keeps
+ *   tracking --navi-app-height. Written back resolved, inline. `freezeSize` cannot
+ *   do it: a max-* wins over the width/height it writes;
  * - its placement, which reads the live viewport. Deferred, see
  *   deferPlacementWhileCovered.
  *
- * A dialog back on top answers the screen as it is, at once, with one exception:
- * a keyboard on its way out. It is still counted for a while after the sheet
- * closes (the browser takes its time, then --navi-vvh waits for the resize to
- * settle, see responsive.js), and answering that makes the dialog jump up and
+ * A popup uncovered answers the screen as it is, at once, with one
+ * exception: a keyboard on its way out. It is still counted for a while after the
+ * sheet closes (the browser takes its time, then --navi-vvh waits for the resize
+ * to settle, see responsive.js), and answering that makes the popup jump up and
  * back down. A keyboard belongs to a focused field, so the focus says which case
  * this is: on a field the keyboard stays, anywhere else it is leaving and the
- * dialog waits for the viewport to change. No timer: how long a keyboard takes
- * to leave is unknown, and a duration would also delay a keyboard that stays.
+ * popup waits for the viewport to change. No timer: how long a keyboard takes to
+ * leave is unknown, and a duration would also delay a keyboard that stays.
  *
- * Only modal dialogs stack here. What sits under a non-modal one is still
- * usable, and keeps following the keyboard.
+ * Modal dialogs hold what is below them. What sits under a non-modal one is
+ * still usable, and keeps following the keyboard. A top-layer popover can be
+ * held and holds nothing: it follows its anchor, and that anchor may be inside
+ * the popup below, whose rising is what carries a field in the popover above the
+ * keyboard.
  */
 
 
-const CEILING = "--dialog-maxmax-height";
-
-const modalStack = [];
+const coverStack = [];
 
 /**
- * @param {HTMLDialogElement} dialogEl - The modal dialog being shown.
+ * @param {HTMLElement} popupEl - The popup being shown.
  * @param {object} params
- * @param {() => void} params.place - Places the dialog against the viewport as
- *   it is. Called on a dialog that was held once it answers the viewport again.
- * @returns {() => void} To call when the dialog closes.
+ * @param {string} params.ceiling - The custom property capping its height.
+ * @param {boolean} params.holdsBelow - Whether it covers what is below it.
+ * @param {() => void} params.place - Places the popup against the viewport as
+ *   it is. Called on a popup that was held once it answers the viewport again.
+ * @returns {() => void} To call when the popup closes.
  */
-const enterModalStack = (dialogEl, { place }) => {
-  const entry = { dialogEl, place, hold: null };
-  const entryBelow = modalStack.at(-1);
-  if (entryBelow) {
-    holdEntry(entryBelow);
+const enterCoverStack = (popupEl, { ceiling, holdsBelow, place }) => {
+  const entry = { popupEl, ceiling, holdsBelow, place, hold: null };
+  if (holdsBelow) {
+    // All of them: one under a popover was not held when that popover opened.
+    for (const entryBelow of coverStack) {
+      holdEntry(entryBelow);
+    }
   }
-  modalStack.push(entry);
+  coverStack.push(entry);
   return () => {
-    const index = modalStack.indexOf(entry);
-    const wasOnTop = index === modalStack.length - 1;
-    modalStack.splice(index, 1);
+    coverStack.splice(coverStack.indexOf(entry), 1);
     dropHold(entry);
-    if (wasOnTop && modalStack.length > 0) {
-      releaseBackOnTop(modalStack.at(-1), { closedDialogEl: dialogEl });
-    }
+    releaseUncovered({ closedPopupEl: popupEl });
   };
 };
 
 /**
- * Answers true when the dialog must not be placed right now, and remembers to
+ * Answers true when the popup must not be placed right now, and remembers to
  * place it on release.
  *
  * Only while the room differs from the one it was covered with: the placement
  * reads the live viewport whatever triggered it, so with the same room it lands
- * where the dialog already is, and content growing under the sheet is answered
+ * where the popup already is, and content growing under the sheet is answered
  * as usual.
  */
-const deferPlacementWhileCovered = (dialogEl) => {
-  const entry = modalStack.find((candidate) => candidate.dialogEl === dialogEl);
+const deferPlacementWhileCovered = (popupEl) => {
+  const entry = coverStack.find((candidate) => candidate.popupEl === popupEl);
   if (!entry || !entry.hold) {
     return false;
   }
@@ -73511,8 +73629,8 @@ const holdEntry = (entry) => {
     entry.hold.stopWaiting = null;
     return;
   }
-  const { dialogEl, place } = entry;
-  holdCeiling(dialogEl);
+  const { place } = entry;
+  holdCeiling(entry);
   entry.hold = {
     room: readRoom(),
     placementOwed: false,
@@ -73533,7 +73651,7 @@ const holdEntry = (entry) => {
       }
       hold.windowWidth = window.innerWidth;
       hold.windowHeight = window.innerHeight;
-      holdCeiling(dialogEl);
+      holdCeiling(entry);
       hold.room = readRoom();
       hold.placementOwed = false;
       place();
@@ -73541,18 +73659,33 @@ const holdEntry = (entry) => {
   };
 };
 
-const releaseBackOnTop = (entry, { closedDialogEl }) => {
+// From the top down to the first popup that holds what is below it: nothing
+// above covers any of these.
+const releaseUncovered = ({ closedPopupEl }) => {
+  for (let i = coverStack.length - 1; i >= 0; i--) {
+    const entry = coverStack[i];
+    releaseBackOnTop(entry, { closedPopupEl });
+    if (entry.holdsBelow) {
+      return;
+    }
+  }
+};
+
+const releaseBackOnTop = (entry, { closedPopupEl }) => {
   const { hold } = entry;
   if (!hold) {
     return;
   }
+  // Already waiting when a popover above it closes in turn: this close asks again.
+  hold.stopWaiting?.();
+  hold.stopWaiting = null;
   // Nothing taken away, or a keyboard that stays: the room read here is the
-  // screen as it is. A field in the dialog that closed is one still leaving: a
-  // dialog leaving the tree only gives the focus back after the commit.
+  // screen as it is. A field in the popup that closed is one still leaving: a
+  // popup leaving the tree only gives the focus back after the commit.
   const { activeElement } = document;
   if (
     readRoom() >= hold.room ||
-    (isEditableTarget(activeElement) && !closedDialogEl.contains(activeElement))
+    (isEditableTarget(activeElement) && !closedPopupEl.contains(activeElement))
   ) {
     release(entry);
     return;
@@ -73598,25 +73731,25 @@ const release = (entry) => {
 };
 
 const dropHold = (entry) => {
-  const { hold, dialogEl } = entry;
+  const { hold, popupEl, ceiling } = entry;
   if (!hold) {
     return;
   }
   hold.stopWaiting?.();
   hold.stopWatchingWindow();
-  dialogEl.style.removeProperty(CEILING);
+  popupEl.style.removeProperty(ceiling);
   entry.hold = null;
 };
 
 // The declared ceiling rather than the used max-height: it is the one cap that
 // follows the keyboard, and the other caps (maxHeight) keep their say. Its
 // computed value has every var() resolved, so it stops following once written
-// back. Registered with inherits: false, it does not reach a dialog nested
-// inside this one.
-const holdCeiling = (dialogEl) => {
-  dialogEl.style.removeProperty(CEILING);
-  const ceiling = getComputedStyle(dialogEl).getPropertyValue(CEILING);
-  dialogEl.style.setProperty(CEILING, ceiling);
+// back. Registered with inherits: false, it does not reach a popup nested inside
+// this one.
+const holdCeiling = ({ popupEl, ceiling }) => {
+  popupEl.style.removeProperty(ceiling);
+  const value = getComputedStyle(popupEl).getPropertyValue(ceiling);
+  popupEl.style.setProperty(ceiling, value);
 };
 
 // An overlaying keyboard leaves the viewport alone and arrives on its own.
@@ -75987,7 +76120,9 @@ const useDialogProps = props => {
     }
     rectEffect.observeSize(dialogEl);
     if (isModal) {
-      addCleanup(enterModalStack(dialogEl, {
+      addCleanup(enterCoverStack(dialogEl, {
+        ceiling: "--dialog-maxmax-height",
+        holdsBelow: true,
         // "resize": what it was held from is a viewport change, and it answers
         // the way it answers one, animated. Called directly because the
         // effect's dedup already saw that viewport go by.
@@ -76538,6 +76673,10 @@ const css$C = /* css */`
     syntax: "*";
     inherits: false;
   }
+  @property --popover-maxmax-height {
+    syntax: "*";
+    inherits: false;
+  }
   @property --x-popover-max-width {
     syntax: "*";
     inherits: false;
@@ -77899,27 +78038,37 @@ const usePopoverProps = props => {
         popoverEl.showPopover();
       }));
     }
-    const rectEffect = visibleRectEffect(effectiveAnchor, ({
-      visibilityRatio
-    }, {
-      event
-    }) => {
+    let anchorVisibilityRatio = 1;
+    const placeUnlessAnchorOutOfView = placeEvent => {
       // Only a real anchor can meaningfully go "out of view" — gating on
       // document.documentElement's own visibilityRatio (used for
       // anchorless/docked popups) would wrongly skip positioning on a
       // tall page, since its ratio is often low even when nothing's
       // hidden. hasAnchorElement is already false for the custom
       // renderer, so this never triggers for it either.
-      if (hasAnchorElement && visibilityRatio <= 0.2) {
+      if (hasAnchorElement && anchorVisibilityRatio <= 0.2) {
         popoverEl.setAttribute("data-anchor-out-of-view", "");
-        return;
+        return false;
       }
       popoverEl.removeAttribute("data-anchor-out-of-view");
-      positionPopover(event);
+      positionPopover(placeEvent);
+      return true;
+    };
+    const rectEffect = visibleRectEffect(effectiveAnchor, ({
+      visibilityRatio
+    }, {
+      event
+    }) => {
+      anchorVisibilityRatio = visibilityRatio;
+      // Before the out-of-view rule: a keyboard going over the anchor, behind
+      // the sheet that raised it, hides nothing.
+      if (deferPlacementWhileCovered(popoverEl)) {
+        return;
+      }
       // Same as Dialog's own — a popup with a scrolling body and a footer
       // swallows the field it just got shorter around. See
       // keepFocusedElementVisible's own doc in popup_shared.js.
-      if (mayHaveHiddenFocus(event)) {
+      if (placeUnlessAnchorOutOfView(event) && mayHaveHiddenFocus(event)) {
         keepFocusedElementVisible(popoverEl);
       }
     }, {
@@ -77932,6 +78081,21 @@ const usePopoverProps = props => {
     // while open (e.g. an expand/collapse toggle inside it) — not just when
     // the anchor itself moves/resizes/re-anchors.
     rectEffect.observeSize(popoverEl);
+    // Whatever its own backdrop: a modal dialog above leaves all of the page
+    // inert, a popover without a wall included. layer="local" is left out, its
+    // ceiling answers to its container.
+    if (isTopLayer) {
+      addCleanup(enterCoverStack(popoverEl, {
+        ceiling: "--popover-maxmax-height",
+        holdsBelow: false,
+        // "resize": see Dialog's own.
+        place: () => {
+          if (placeUnlessAnchorOutOfView(new CustomEvent("resize"))) {
+            keepFocusedElementVisible(popoverEl);
+          }
+        }
+      }));
+    }
     // Content that sizes itself once on screen (a shrink-wrapped BadgeList)
     // says so, after the placement read it: placed again on the spot, where
     // observeSize answers a frame late. Stopped here, since a popup further up
@@ -105858,10 +106022,10 @@ const css = /* css */`.navi_side_panel {
   height: var(--navi-side-panel-height, auto);
 
   &[data-layer="top"] {
-    --popover-max-height: var(--navi-app-height);
     --popover-maxmax-height: var(--navi-app-height);
+    --popover-max-height: var(--popover-maxmax-height);
     --popover-maxmax-width: var(--navi-app-width);
-    --dialog-maxmax-height: var(--navi-app-height);
+    --dialog-maxmax-height: var(--popover-maxmax-height);
     --dialog-maxmax-width: var(--navi-app-width);
 
     &[navi-side="left"], &[navi-side="right"] {