@jsenv/navi 0.29.433 → 0.29.435

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
@@ -11117,9 +11124,20 @@ 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
@@ -11220,11 +11238,12 @@ const holdDocumentScroll = () => {
 };
 
 let installed = false;
-const installScrollRestoration = () => {
+const installScrollRestoration = ({ readAddress }) => {
   if (installed) {
     return;
   }
   installed = true;
+  readRoutingAddress = readAddress;
   if (!("scrollRestoration" in window.history)) {
     return;
   }
@@ -11241,14 +11260,16 @@ const installScrollRestoration = () => {
       if (suspendCount) {
         return;
       }
-      positionByUrl.set(window.location.href, documentOffset);
+      positionByUrl.set(readShownUrl(), documentOffset);
     },
     { passive: true },
   );
-  const positionOnLoad = positionByUrl.get(window.location.href);
+  const urlOnLoad = readShownUrl();
+  const positionOnLoad = positionByUrl.get(urlOnLoad);
   if (!positionOnLoad) {
-    // The first page, where the browser landed it.
-    stayInPlace(window.location.href);
+    // 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;
   }
@@ -11343,11 +11366,13 @@ const startAtTop = (url, { from } = {}) => {
     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 }) => {
@@ -11361,21 +11386,51 @@ const isArrival = (url, { from }) => {
   return true;
 };
 
-// A url the document is shown under without moving: a replace, a push that
-// keeps the page (see startAtTop), the first page loaded. No scroll event says
-// where it stands, so it is written down here, or a return to it would find
-// nothing and keep the offset of the page being left. The offset the scroll
-// events last told, not read again: a read here would lay the page out in the
-// middle of a routing, once per address a settling param writes.
+// 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.
 //
-// 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).
+// 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) => {
-  if (documentOffset === null || suspendCount) {
-    return;
+  const href = new URL(url, window.location.href).href;
+  carryScrollersOnceRendered(href);
+  if (documentOffset !== null && !suspendCount) {
+    positionByUrl.set(href, documentOffset);
   }
-  positionByUrl.set(new URL(url, window.location.href).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
@@ -11418,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;
   }
@@ -11440,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);
@@ -11978,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
@@ -32492,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;
@@ -32504,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:
@@ -48480,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);
@@ -48747,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);
   }
@@ -53383,6 +53467,26 @@ const Expandable = props => {
     return stopRide;
   };
 
+  // A silent change is a state the page was already in (see openEffect): it
+  // lands at once. Not playing a reveal is not enough — the stylesheet's own
+  // transition plays it whenever the previous state's style was resolved
+  // before the render: an expandable mounted closed and measured in the same
+  // commit (a List sizing its items) before its deferred mount-time open, or
+  // one kept on screen across the page change.
+  const renderWithoutMovement = (contentContainer, render) => {
+    if (!animation || !contentContainer) {
+      flushSyncRendering(render);
+      return;
+    }
+    contentContainer.style.transitionProperty = "none";
+    flushSyncRendering(render);
+    // The new style must be resolved while transitions are off — re-enabled
+    // in the same recalc, the change would transition after all.
+    // eslint-disable-next-line no-unused-expressions
+    getComputedStyle(contentContainer).transitionProperty;
+    contentContainer.style.transitionProperty = "";
+  };
+
   // What opening LOOKS like here, and how to undo it — the one thing an
   // expandable owns that a popup does not (see open_controller.js). Reassigned
   // on every render so it always closes over the latest props.
@@ -53403,10 +53507,15 @@ const Expandable = props => {
     // reopening during a collapse — read while the DOM still says closed.
     const startRect = revealing ? contentContainer.getBoundingClientRect() : null;
     cancelSettleWatch();
-    flushSyncRendering(() => {
+    const renderOpened = () => {
       setOpened(true);
       setSettled(!revealing);
-    });
+    };
+    if (silent) {
+      renderWithoutMovement(contentContainer, renderOpened);
+    } else {
+      flushSyncRendering(renderOpened);
+    }
     if (hasAction) {
       runUnwatched(() => effectiveAction.run());
     }
@@ -53445,16 +53554,22 @@ const Expandable = props => {
       cancelSettleWatch();
       // `silent`: closed by the navigation that puts another page on screen,
       // which is its movement (see page_change.js).
-      const collapsing = animation && !closeEvent.detail.silent && Boolean(contentContainerAtClose);
+      const silentClose = Boolean(closeEvent.detail.silent);
+      const collapsing = animation && !silentClose && Boolean(contentContainerAtClose);
       if (collapsing) {
         // Now, while the content is still fully laid out — the collapsing
         // track uncovers a content frozen at that size.
         freezeContentSize();
       }
-      flushSyncRendering(() => {
+      const renderClosed = () => {
         setOpened(false);
         setSettled(!collapsing);
-      });
+      };
+      if (silentClose) {
+        renderWithoutMovement(contentContainerAtClose, renderClosed);
+      } else {
+        flushSyncRendering(renderClosed);
+      }
       if (restoreFocus) {
         restoreFocus(closeEvent);
       } else if (focusedBeforeClose && contentContainerAtClose && contentContainerAtClose.contains(focusedBeforeClose)) {
@@ -78086,9 +78201,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