@jsenv/navi 0.29.432 → 0.29.434

package/dist/jsenv_navi.js

@@ -11086,9 +11086,16 @@ const [publishRouteRender, observeRouteRender] = createPubSub();
  * (recallScrollerPosition). What a push means for them is what it means for
  * the document — an arrival opens at the top (see startAtTop): the page
  * arrived at has its named positions dropped before its lists render, so a
- * list recalls only on the way back. A scroller that goes while its page
- * stays — a popup closing over the same address — has nothing to come back
- * to, and says so as it leaves (forgetScrollerUnlessPageLeft).
+ * list recalls only on the way back. A scroller that outlives a navigation —
+ * its page stays under a new address, or it lives outside the page that
+ * changed — is shown under the new address too, and is carried to it (see
+ * carryScrollersOnceRendered). A scroller that goes while its page stays — a
+ * popup closing over the same address — has nothing to come back to, and says
+ * so as it leaves (forgetScrollerUnlessPageLeft).
+ *
+ * Every position is kept under the address the routing shows, which can be
+ * ahead of the browser's: a replace waiting for its state to settle has moved
+ * the page and not yet `window.location` (see readShownUrl).
  *
  * What is NOT covered, and cannot be from here: a page whose height depends on
  * something still loading. Its content is not there at the moment it is put
@@ -11109,12 +11116,28 @@ const [publishRouteRender, observeRouteRender] = createPubSub();
 const STORAGE_KEY = "navi_scroll_positions";
 
 const positionByUrl = new Map();
+// Where the document stands, as its scroll events last said, whoever it
+// belongs to: what a url shown without the document moving is given (see
+// stayInPlace). Null until the restoration is installed — nothing is recorded
+// before.
+let documentOffset = null;
 // url -> (scroller name -> position). The position is whatever the scroller
 // handed in: what it can put itself back on, in its own terms.
 const scrollerPositionsByUrl = new Map();
-// The url each named scroller last spoke under: what tells a scroller leaving
-// a page that stays from one leaving with its page.
-const urlByScrollerName = new Map();
+// What each named scroller still mounted last said: its position and the url
+// it said it under. What tells a scroller leaving a page that stays from one
+// leaving with its page, and what one outliving a navigation is carried with.
+const saidByScrollerName = new Map();
+
+// The address the page is shown under, as the routing knows it (see
+// installScrollRestoration): `window.location` lags behind a replace waiting
+// for its state to settle (replaceAddressWhenSettled in either integration),
+// and a scroll keyed by it meanwhile is written for the address being left.
+// Resolved, as an address handed to navTo can be kept as it was given.
+let readRoutingAddress = () => window.location.href;
+const readShownUrl = () => {
+  return new URL(readRoutingAddress(), window.location.href).href;
+};
 
 // Read once, the first time anyone needs the positions: the document's
 // restoration is installed by the routing, and a list remembering itself may
@@ -11215,40 +11238,38 @@ const holdDocumentScroll = () => {
 };
 
 let installed = false;
-const installScrollRestoration = () => {
+const installScrollRestoration = ({ readAddress }) => {
   if (installed) {
     return;
   }
   installed = true;
+  readRoutingAddress = readAddress;
   if (!("scrollRestoration" in window.history)) {
     return;
   }
   window.history.scrollRestoration = "manual";
   loadStore();
+  documentOffset = { x: window.scrollX, y: window.scrollY };
   // Read as it happens rather than when leaving: a traverse changes the url
   // before anything here is told, so a position read then would be read for
   // the wrong page.
   window.addEventListener(
     "scroll",
     () => {
+      documentOffset = { x: window.scrollX, y: window.scrollY };
       if (suspendCount) {
         return;
       }
-      positionByUrl.set(window.location.href, {
-        x: window.scrollX,
-        y: window.scrollY,
-      });
+      positionByUrl.set(readShownUrl(), documentOffset);
     },
     { passive: true },
   );
-  const positionOnLoad = positionByUrl.get(window.location.href);
+  const urlOnLoad = readShownUrl();
+  const positionOnLoad = positionByUrl.get(urlOnLoad);
   if (!positionOnLoad) {
-    // Where the browser landed the first page, written down for the reason
-    // startAtTop writes its top: no scroll event says so.
-    positionByUrl.set(window.location.href, {
-      x: window.scrollX,
-      y: window.scrollY,
-    });
+    // The first page, where the browser landed it: no scroll event says so
+    // (see stayInPlace).
+    positionByUrl.set(urlOnLoad, documentOffset);
     return;
   }
   // What a reload asks for, now that the browser has been told not to do it.
@@ -11301,7 +11322,9 @@ const restoreScrollPosition = (url) => {
 // clamp is a scroll recorded under the url already returned to.
 const restoreScrollPositionOnReturn = (url) => {
   const arrival = ++arrivalCount;
-  const position = positionByUrl.get(new URL(url, window.location.href).href);
+  const href = new URL(url, window.location.href).href;
+  carryScrollersOnceRendered(href);
+  const position = positionByUrl.get(href);
   if (!position) {
     return;
   }
@@ -11339,14 +11362,17 @@ const restoreScrollPositionOnReturn = (url) => {
 // app that scrolls an element of its own scrolls it itself.
 const startAtTop = (url, { from } = {}) => {
   if (!isArrival(url, { from })) {
+    stayInPlace(url);
     return;
   }
   arrivalCount++;
+  const href = new URL(url, window.location.href).href;
+  carryScrollersOnceRendered(href);
   // Written down as well as done: a document already at its top fires no
   // scroll event, and a page left without ever being scrolled would have no
   // position to come back to — the return would keep the offset of the page
   // being left.
-  positionByUrl.set(new URL(url, window.location.href).href, { x: 0, y: 0 });
+  positionByUrl.set(href, { x: 0, y: 0 });
   window.scrollTo({ top: 0, left: 0, behavior: "instant" });
 };
 const isArrival = (url, { from }) => {
@@ -11360,6 +11386,53 @@ const isArrival = (url, { from }) => {
   return true;
 };
 
+// A url the page is shown under without changing: a replace, a push that
+// keeps the page (see startAtTop). Nothing scrolls, so nothing says where the
+// document stands under it — written down here, or a return to it would find
+// nothing and keep the offset of the page being left.
+//
+// The offset as its scroll events last told it, not read again: a read here
+// would lay the page out in the middle of a routing, once per address a
+// settling param writes. Deaf with the recording: a row of tabs replaces the
+// url as it travels, and the offset belongs to nobody until the row says where
+// its tab lands (see arriveAtScrollPosition).
+const stayInPlace = (url) => {
+  const href = new URL(url, window.location.href).href;
+  carryScrollersOnceRendered(href);
+  if (documentOffset !== null && !suspendCount) {
+    positionByUrl.set(href, documentOffset);
+  }
+};
+
+// A scroller that outlives a navigation — its page stays under the new url, or
+// it lives outside the page that changed (a sidebar list kept by every page) —
+// is shown under that url as well, and says nothing there unless it moves: a
+// return to it would find no position and open the list at its top. So it is
+// carried, with the position it last said.
+//
+// Told apart once the navigation has rendered: until then a list about to be
+// swapped out is as mounted as one that stays, and carried, its position is
+// what a list of the same name arriving would read. By then one that left has
+// said so (forgetScrollerUnlessPageLeft), and one that arrived has read its
+// own and speaks under this url. One still mounted on its way out (a page kept
+// hidden while its route transition plays) is carried, and forgets the copy as
+// it unmounts under this url.
+const carryScrollersOnceRendered = (url) => {
+  whenPageRendered(() => {
+    if (readShownUrl() !== url) {
+      // Another navigation came first: what is mounted is shown under its url,
+      // and its own carry says so.
+      return;
+    }
+    for (const [name, said] of saidByScrollerName) {
+      if (said.url === url) {
+        continue;
+      }
+      writeScrollerPosition(url, name, said.position);
+    }
+  });
+};
+
 // The same arrival, for the page's own scrollers. The document is scrolled to
 // its top once the page is there; a list opens where it decides to in its
 // first render, so what it must not find is dropped before the routing
@@ -11400,19 +11473,21 @@ const scrollTo = ({ x, y }) => {
 
 const rememberScrollerPosition = (name, position) => {
   loadStore();
-  const url = window.location.href;
+  writeScrollerPosition(readShownUrl(), name, position);
+};
+const writeScrollerPosition = (url, name, position) => {
   let positionByName = scrollerPositionsByUrl.get(url);
   if (!positionByName) {
     positionByName = new Map();
     scrollerPositionsByUrl.set(url, positionByName);
   }
   positionByName.set(name, position);
-  urlByScrollerName.set(name, url);
+  saidByScrollerName.set(name, { url, position });
 };
 
 const recallScrollerPosition = (name) => {
   loadStore();
-  const positionByName = scrollerPositionsByUrl.get(window.location.href);
+  const positionByName = scrollerPositionsByUrl.get(readShownUrl());
   if (!positionByName) {
     return undefined;
   }
@@ -11422,17 +11497,18 @@ const recallScrollerPosition = (name) => {
 // Said by a scroller as it unmounts. Its page is being left when the url is
 // already another one — the history is written before the page it names is
 // taken down — and then its position is kept for the way back. The url still
-// being the one it spoke under means the page stays and the scroller alone
-// goes (a popup closing, a section folding): there is no coming back to a
-// place that was not left, and a position kept would greet the next mount
+// being the one it was last kept under means the page stays and the scroller
+// alone goes (a popup closing, a section folding): there is no coming back to
+// a place that was not left, and a position kept would greet the next mount
 // under this address as a return.
 const forgetScrollerUnlessPageLeft = (name) => {
-  const url = urlByScrollerName.get(name);
-  if (url === undefined) {
+  const said = saidByScrollerName.get(name);
+  if (said === undefined) {
     return;
   }
-  urlByScrollerName.delete(name);
-  if (url !== window.location.href) {
+  saidByScrollerName.delete(name);
+  const { url } = said;
+  if (url !== readShownUrl()) {
     return;
   }
   const positionByName = scrollerPositionsByUrl.get(url);
@@ -11835,14 +11911,18 @@ const setupBrowserIntegrationViaHistory = ({
     // also waits for the page it returns to: an offset is clamped to whatever
     // page the document holds when it is written.
     //
-    // A replace gets neither: it is the same place said differently — a param
-    // settling, a state written — and moving the reader for it would throw
-    // them out of a page they never left. A push that keeps the pathname is
-    // read the same way, by startAtTop itself. The one replace that IS an
-    // arrival is a row of tabs travelling, and the row says so for itself (see
-    // route_travel.jsx).
+    // A replace leaves the document where it is: it is the same place said
+    // differently — a param settling, a state written — and moving the reader
+    // for it would throw them out of a page they never left. Where they stay
+    // is written down for the new address (see stayInPlace). A push that keeps
+    // the pathname is read the same way, by startAtTop itself. The one replace
+    // that IS an arrival is a row of tabs travelling, and the row says so for
+    // itself (see route_travel.jsx) — from inside the routing above, which is
+    // why the replace is written down after it.
     if (navigationType === "push") {
       whenRenderingResumes(() => startAtTop(url, { from: urlLeft }));
+    } else if (navigationType === "replace") {
+      stayInPlace(url);
     } else if (navigationType === "traverse") {
       restoreScrollPositionOnReturn(url);
     }
@@ -11956,7 +12036,7 @@ const setupBrowserIntegrationViaHistory = ({
   // The browser's own scroll restoration is taken over here rather than left
   // to whoever navigates: it is a decision about the document, and the entry
   // being left must be recorded from the first pixel scrolled.
-  installScrollRestoration();
+  installScrollRestoration({ readAddress });
 
   // The document is leaving, or may be killed in the background: what the
   // entry says about it has to be what the document says (see
@@ -32470,6 +32550,20 @@ const toHex = ([r, g, b]) =>
 // sure to be understood in, whatever getComputedStyle answered with.
 let colorContext = null;
 const parseColor = (color) => {
+  const [r, g, b, a] = drawColor(color);
+  if (a === 0 || a === 255) {
+    return [r, g, b, a / 255];
+  }
+  // The canvas keeps a pixel premultiplied by its alpha, in bytes: the
+  // channels of a translucent colour come back rounded at that alpha —
+  // rgba(12, 23, 44, 0.45) reads 11, 22, 44. Made opaque, they read whole.
+  const [rOpaque, gOpaque, bOpaque] = drawColor(
+    `color(from ${color} srgb r g b / 1)`,
+  );
+  return [rOpaque, gOpaque, bOpaque, a / 255];
+};
+
+const drawColor = (color) => {
   if (!colorContext) {
     const canvas = document.createElement("canvas");
     canvas.width = 1;
@@ -32482,8 +32576,7 @@ const parseColor = (color) => {
   colorContext.fillStyle = "transparent";
   colorContext.fillStyle = color;
   colorContext.fillRect(0, 0, 1, 1);
-  const [r, g, b, a] = colorContext.getImageData(0, 0, 1, 1).data;
-  return [r, g, b, a / 255];
+  return colorContext.getImageData(0, 0, 1, 1).data;
 };
 
 // The title belongs to the last Head to arrive, whatever order they leave in:
@@ -48458,6 +48551,15 @@ const applySpacingOnTextChildren = (children, spacing, defaultSpace) => {
   }
   return childrenWithGap;
 };
+const isSpacingWidth = spacing => {
+  if (typeof spacing === "number") {
+    return true;
+  }
+  if (typeof spacing !== "string") {
+    return false;
+  }
+  return isSizeSpacingKey(spacing) || hasCSSSizeUnit(spacing) || spacing.startsWith("var(");
+};
 const outsideTextFlowSet = new Set();
 const markAsOutsideTextFlow = jsxElement => {
   outsideTextFlowSet.add(jsxElement);
@@ -48725,7 +48827,11 @@ const TextUI = props => {
   }
   const shouldPreserveSpacing = rest.as === "pre" || rest.flex || rest.grid;
   if (shouldPreserveSpacing) {
-    boxProps.spacing = resolvedSpacing;
+    // Between flex/grid items spacing is a gap, so only a width carries over: a
+    // separator (the default space, a text, an element) or "pre" has no gap.
+    if (isSpacingWidth(spacing)) {
+      boxProps.spacing = spacing;
+    }
   } else {
     children = applySpacingOnTextChildren(children, resolvedSpacing, defaultSpace);
   }
@@ -70336,32 +70442,43 @@ document.addEventListener(
 );
 
 /*
- * Whether a scroller is gliding: moving on its own toward a place it was sent
- * to, with no hand on it — a key (Home, PageDown, Space), a smooth `scrollTo`
- * or `scrollIntoView`, the status bar tap on iOS. The other scrolls follow a
- * hand: a finger on the screen, a wheel turning.
- *
- * It matters to whoever writes a scroll position while one plays: the write is
- * an instant scroll, and the browser abandons the glide for it, short of where
- * it was going. A hand is not abandoned: its next report moves the scroller on
- * from wherever the write left it.
- *
- * A scroll is followed from its first "scroll" event to its "scrollend". It is
- * a hand's when a finger was down as it started (the fling a finger leaves
- * behind is still its own), when one is down now, or when a wheel turned
- * around the time it started or since. A finger is down from its
- * touchstart to its touchend, heard on what it touched: a list removes the
- * items scrolled out of its window while the finger is still on one of them,
- * and the touchend of a removed element never reaches the document.
- *
- * In a browser without "scrollend", nothing is said to glide: a scroll would
- * never be seen ending.
+ * Whether writing a scroll position now would cost the user the scroll in
+ * progress. A write is an instant scroll, and the browser abandons for it any
+ * scroll it is playing on its own, short of where that one was going: a key
+ * (Home, PageDown, Space), a smooth `scrollTo` or `scrollIntoView`, the status
+ * bar tap on iOS, the fling a finger leaves behind once it lifts. A scroll
+ * following a hand is not abandoned: the wheel's next turn carries on, and on
+ * most engines a finger keeps dragging from wherever the write left it.
+ *
+ * Not on iOS. Its finger places the content from where the drag began, so a
+ * write under it is undone at the finger's next move — or, when the finger
+ * lifts first, lands after the lift and stops the fling dead. And a fling
+ * stops on any write during its momentum, as the status bar's scroll to the
+ * top does (Safari 26.5 on the simulator: flings of 1700px stopped 130 to 340px
+ * after the lift, 3 in 3; a write 50ms before the lift stopped 2 flings in 3).
+ * No finger there is a hand a write could hold to. Chrome flings on through a
+ * write, and loses nothing by not getting one.
+ *
+ * A scroll is followed from its first "scroll" event to its "scrollend", and
+ * is a hand's while a finger is down, or when a wheel turned around the time it
+ * started or since. A finger is down from its touchstart to its touchend,
+ * heard on what it touched: a list removes the items scrolled out of its window
+ * while the finger is still on one of them, and the touchend of a removed
+ * element never reaches the document.
+ *
+ * In a browser without "scrollend", no write is said to interrupt anything: a
+ * scroll would never be seen ending.
  */
 
 // The scroll a wheel turn causes starts in the frame the turn is read, or the
 // next one. A turn further from it moved nothing (a wheel at an edge) and is no
 // hand on a scroll that came from elsewhere.
 const WHEEL_REACH = 100;
+// iOS's touch handling, the one engine whose finger drops writes (see above).
+const FINGER_KEEPS_WRITES = !window.CSS.supports(
+  "-webkit-touch-callout",
+  "none",
+);
 
 const flightMap = new WeakMap();
 let fingersDown = 0;
@@ -70371,13 +70488,13 @@ let wheelTimeStamp = -Infinity;
  * @param {Element} scrollerEl
  * @returns {boolean}
  */
-const isScrollGliding = (scrollerEl) => {
+const wouldInterruptScroll = (scrollerEl) => {
   const flight = flightMap.get(scrollerEl);
   if (!flight) {
     return false;
   }
-  if (flight.fingerDown || fingersDown > 0) {
-    return false;
+  if (fingersDown > 0) {
+    return !FINGER_KEEPS_WRITES;
   }
   if (wheelTimeStamp > flight.timeStamp - WHEEL_REACH) {
     return false;
@@ -70407,10 +70524,7 @@ if ("onscrollend" in window) {
       if (flightMap.has(scroller)) {
         return;
       }
-      flightMap.set(scroller, {
-        timeStamp: e.timeStamp,
-        fingerDown: fingersDown > 0,
-      });
+      flightMap.set(scroller, { timeStamp: e.timeStamp });
     },
     { capture: true, passive: true },
   );
@@ -74097,6 +74211,13 @@ const useListScrollSync = ({
       if (delta > -0.5 && delta < 0.5) {
         return;
       }
+      if (wouldInterruptScroll(scrollerEl)) {
+        // As the anchoring's write would (see holdAnchorStill). The document's
+        // box is the scroller of a list scrolling the page, and it resizes with
+        // every item drawn taller than its filler: while the page scrolls, that
+        // is at every window move.
+        return;
+      }
       anchorRef.current = null;
       if (horizontal) {
         scrollerEl.scrollLeft += delta;
@@ -74194,13 +74315,12 @@ const useListScrollSync = ({
       return;
     }
     anchorRef.current = null;
-    if (isScrollGliding(scrollerEl)) {
+    if (wouldInterruptScroll(scrollerEl)) {
       // Nobody is looking at items standing still: they are passing by, on
-      // their way somewhere the browser was asked to take them (a key, a smooth
-      // scrollTo, the status bar). The write would be an instant scroll, and
-      // the browser abandons the glide for it, short of where it was going.
-      // Left alone, the items drawn above push the rest by `drift` while all
-      // of it moves, and the glide lands.
+      // their way somewhere the browser takes them (a key, a smooth scrollTo,
+      // the status bar, a fling). The write would stop that scroll short of
+      // where it was going. Left alone, the items drawn above push the rest by
+      // `drift` while all of it moves, and the scroll lands.
       return;
     }
     scrolledByListRef.current = true;
@@ -78050,9 +78170,11 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   does, and for a list that scrolls itself the page's own restoration cannot
  *   see. The position is kept under the list's `id` and the page's url, for
  *   the session (a reload comes back too); a list without an `id` of its own
- *   has nothing to be remembered by. A fresh arrival at the page opens at
- *   `defaultScrolled` either way, and so does a list the caller holds through
- *   `scrolled`.
+ *   has nothing to be remembered by, and two lists mounted at once under one
+ *   `id` — a popup over the page, the page a route transition is leaving —
+ *   overwrite each other (see docs/scroll.md). A fresh arrival at the page
+ *   opens at `defaultScrolled` either way, and so does a list the caller holds
+ *   through `scrolled`.
  * @param {boolean} [props.deselectable]
  *   A single-select list allowed to hold nothing: the selected item, pressed
  *   again, lets go. Without it the list is a radio group — a choice, once