@jsenv/navi 0.30.14 → 0.30.16

package/dist/jsenv_navi.js

@@ -14034,12 +14034,18 @@ const setupBrowserIntegrationViaHistory = ({
       url !== readAddress()
     ) {
       const delta = adjacentEntryDelta(url);
-      if (delta === -1) {
-        window.history.back();
-        return undefined;
-      }
-      if (delta === 1) {
-        window.history.forward();
+      if (delta !== 0) {
+        // The press is still the press: what it asks of a route transition is
+        // about this crossing, and the traversal is announced with it.
+        elidedPressPending = {
+          element: options.element,
+          routeTransition: options.routeTransition,
+        };
+        if (delta === -1) {
+          window.history.back();
+        } else {
+          window.history.forward();
+        }
         return undefined;
       }
     }
@@ -14427,6 +14433,8 @@ const setupBrowserIntegrationViaHistory = ({
     const state = popstateEvent.state;
     const landOn = landOnPending;
     landOnPending = null;
+    const elidedPress = elidedPressPending;
+    elidedPressPending = null;
     if (landOn) {
       handleRoutingTask(landOn.url, {
         reason: `"popstate" event for ${url}, landing on ${landOn.url}`,
@@ -14440,6 +14448,7 @@ const setupBrowserIntegrationViaHistory = ({
       reason: `"popstate" event for ${url}`,
       navigationType: "traverse",
       state,
+      ...elidedPress,
     });
   });
 
@@ -14507,6 +14516,10 @@ const setupBrowserIntegrationViaHistory = ({
   // asked for it (see navBack's `landOn`). Read by the popstate listener,
   // which is the one place the landing is applied.
   let landOnPending = null;
+  // The press a push to the entry next door was made by, when it was taken as
+  // a traversal (see handleRoutingTask): announced with the "popstate" that
+  // answers it, which has no press of its own.
+  let elidedPressPending = null;
   // The back navBack asked for, from history.back() to the "popstate" that
   // answers it. Meanwhile the document still reads the entry being left (see
   // whenBackLanded).
@@ -16342,11 +16355,12 @@ PSEUDO_CLASSES[":-navi-has-value"] = {
 };
 {
   // How long a press stays drawn, at least, from the frame that first painted
-  // it (Android's PRESSED_STATE_DURATION). An ordinary tap lasts 30 to 80ms,
-  // and its pointerup can be handled right after its pointerdown when the main
-  // thread was busy: released at once, a press shows on 0 to 3 frames, which
-  // is no press at all to the eye.
-  const PRESS_SHOWN_AT_LEAST = 64;
+  // it. An ordinary tap lasts 30 to 80ms, and its pointerup can be handled
+  // right after its pointerdown when the main thread was busy: released at
+  // once, a press shows on 0 to 3 frames, which is no press at all to the eye.
+  // 140ms is the Button's shrink (button_ui.jsx): 100ms down, then 40ms at
+  // the bottom before it goes back up, whatever the length of the tap.
+  const PRESS_SHOWN_AT_LEAST = 140;
   // element → the press going on there, until the element stops being drawn
   // pressed. Keyed by the element, not held by its tracker: Box re-runs its
   // tracking whenever the element's state changes, which is what pressing it
@@ -26879,7 +26893,9 @@ const arraySignalStore = (
     name,
   };
 
-  const createItemFromProps = (props) => {
+  // `answer`: the props come from an answer, see upsertAnswer. createItem
+  // hands it to the relations, which write the children inside the props.
+  const createItemFromProps = (props, answer) => {
     if (props === null || typeof props !== "object") {
       return props;
     }
@@ -26891,7 +26907,7 @@ const arraySignalStore = (
         `${name || "store"}: an item arrived without "${idKey}" (it has ${Object.keys(props).join(", ")}) — declare its key with idKey, or give a single item an id of its own ({ id: "me", … })`,
       );
     }
-    const item = createItem(props);
+    const item = createItem(props, answer);
     return item;
   };
 
@@ -27117,7 +27133,12 @@ ${[idKey, ...uniqueKeys].join(", ")}`,
   const valueChangedByWrite = (newValue, oldValue) => newValue !== oldValue;
   const valueChangedByAnswer = (newValue, oldValue) =>
     newValue !== oldValue && !compareTwoJsValues(newValue, oldValue);
-  const upsertWith = (args, valueChanged) => {
+  // One write, however many stores its relations reach: an effect reading the
+  // rows (a render, the page kept for the next document) runs once the whole
+  // write is in, rather than once per child written, half of it still to come.
+  const upsertWith = (args, answer) => batch(() => upsertWithNow(args, answer));
+  const upsertWithNow = (args, answer) => {
+    const valueChanged = answer ? valueChangedByAnswer : valueChangedByWrite;
     const mutationsMap = new Map(); // Map<itemId, propertyMutations>
     const triggerPropertyMutations = () => {
       for (const itemPropertiesObserver of itemPropertiesObserverSet) {
@@ -27186,11 +27207,12 @@ ${[idKey, ...uniqueKeys].join(", ")}`,
             // A relation (.one(), .many() and their scoped forms in
             // resource_graph.js): the row holds which children it points to,
             // the children live in their own store, and whoever reads them
-            // follows them there. Its setter writes them and says whether the
-            // row points elsewhere now. Compared as a value instead, the
-            // children received are never the object the row hands out, and
-            // every write naming the relation would replace the row.
-            if (set.call(itemWithProps, newValue)) {
+            // follows them there. Its setter writes them, compared as this
+            // write compares (`answer`), and says whether the row points
+            // elsewhere now. Compared as a value instead, the children
+            // received are never the object the row hands out, and every
+            // write naming the relation would replace the row.
+            if (set.call(itemWithProps, newValue, answer)) {
               hasChanges = true;
               propertyMutations[key] = {
                 oldValue,
@@ -27238,7 +27260,7 @@ ${[idKey, ...uniqueKeys].join(", ")}`,
       if (array.length === 0) {
         const arrayAllCreated = [];
         for (const props of propsArray) {
-          const item = createItemFromProps(props);
+          const item = createItemFromProps(props, answer);
           arrayAllCreated.push(item);
         }
         arraySignal.value = arrayAllCreated;
@@ -27275,7 +27297,7 @@ ${[idKey, ...uniqueKeys].join(", ")}`,
           arrayWithOnlyAffectedItems.push(itemWithPropsOrItem);
         } else {
           hasNew = true;
-          const item = createItemFromProps(props);
+          const item = createItemFromProps(props, answer);
           arraySomeUpdated.push(item);
           arrayWithOnlyAffectedItems.push(item);
         }
@@ -27347,23 +27369,24 @@ ${[idKey, ...uniqueKeys].join(", ")}`,
       triggerPropertyMutations();
       return updatedItem;
     }
-    const item = createItemFromProps(props);
+    const item = createItemFromProps(props, answer);
     arraySomeUpdated.push(item);
     arraySignal.value = arraySomeUpdated;
     triggerPropertyMutations();
     return item;
   };
-  const upsert = (...args) => upsertWith(args, valueChangedByWrite);
+  const upsert = (...args) => upsertWith(args, false);
   /**
    * Writes what the server sent — a callback's answer, a pushed message (a
    * websocket's, a server-sent event's) — into the store. Takes what `upsert`
    * takes and returns the same: a row equal in depth to the one held stays
    * the one held, and its readers stay still, where `upsert` compares by
-   * reference and JSON makes every nested object a new one. A new row joins no
+   * reference and JSON makes every nested object a new one. The children its
+   * relations carry into their own stores are compared the same way. A new row joins no
    * `GET_MANY` and no `GET_RANGE` composition: read again what it belongs to
    * (docs/resource.md).
    */
-  const upsertAnswer = (...args) => upsertWith(args, valueChangedByAnswer);
+  const upsertAnswer = (...args) => upsertWith(args, true);
   const drop = (...args) => {
     const removedItemArray = [];
     const triggerRemovedMutations = () => {
@@ -29159,7 +29182,7 @@ const resource = (name, restCallbacks = {}) => {
   const store = arraySignalStore([], idKey, {
     uniqueKeys,
     name: `${name} store`,
-    createItem: (props) => {
+    createItem: (props, answer) => {
       const item = Object.create(itemPrototype);
       Object.assign(item, props);
       Object.defineProperty(item, SYMBOL_IDENTITY, {
@@ -29169,7 +29192,7 @@ const resource = (name, restCallbacks = {}) => {
         configurable: false,
       });
       for (const setupCallback of setupCallbackSet) {
-        setupCallback(item);
+        setupCallback(item, answer);
       }
       return item;
     },
@@ -29499,9 +29522,9 @@ const createResource = (
     const childName = `${name}.${propertyName}`;
     const childIdKey = childResource.idKey;
     const childStore = childResource.store;
-    addItemSetup((item) => {
+    addItemSetup((item, answer) => {
       const childItemIdSignal = signal();
-      const updateChildItemId = (value) => {
+      const updateChildItemId = (value, answer) => {
         const currentChildItemId = childItemIdSignal.peek();
         let childItemProps;
         if (isProps(value)) {
@@ -29515,7 +29538,9 @@ const createResource = (
           childItemIdSignal.value = undefined;
           return true;
         }
-        const childItem = childStore.upsert(childItemProps);
+        const childItem = answer
+          ? childStore.upsertAnswer(childItemProps)
+          : childStore.upsert(childItemProps);
         const childItemId = childItem[childIdKey];
         if (currentChildItemId === childItemId) {
           return false;
@@ -29523,7 +29548,7 @@ const createResource = (
         childItemIdSignal.value = childItemId;
         return true;
       };
-      updateChildItemId(item[propertyName]);
+      updateChildItemId(item[propertyName], answer);
       const childItemSignal = computed(() =>
         childStore.select(childItemIdSignal.value),
       );
@@ -29708,14 +29733,14 @@ Return the child alone, and "${propertyName}" embedded in what the "${name}" cal
 ${name}.many("${propertyName}") source location: ${declarationSite}`,
       );
     };
-    addItemSetup((item) => {
+    addItemSetup((item, answer) => {
       const childItemIdArraySignal = signal([]);
       const updateChildItemIdArray = createChildIdArrayUpdater(
         childStore,
         childIdKey,
         childItemIdArraySignal,
       );
-      updateChildItemIdArray(item[propertyName]);
+      updateChildItemIdArray(item[propertyName], answer);
       const childItemArraySignal = computed(() => {
         const idArray = childItemIdArraySignal.value;
         const arr = childStore.selectAll(idArray);
@@ -30051,7 +30076,7 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
     const childSetupCallbackSet = new Set();
     const childAddItemSetup = (callback) => childSetupCallbackSet.add(callback);
     const applyPropsMap = new Map(); // ownerId → applyProps(props | null)
-    addItemSetup((ownerItem) => {
+    addItemSetup((ownerItem, answer) => {
       const ownerId = ownerItem[idKey];
       // A stable child object, mutated in place: reactive getters/setters from
       // chained .one() etc. are defined on it once and survive prop updates.
@@ -30069,8 +30094,10 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
       // relation, `owner[propertyName] = …` — whoever reads the child sees it.
       const childVersionSignal = signal(0);
       // Returns whether the child changed — what the store asks a relation
-      // (see assign in array_signal_store.js).
-      const applyProps = (props) => {
+      // (see assign in array_signal_store.js). `answer`: the props come from
+      // an answer, and a value equal in depth to the one held is no change
+      // (see upsertAnswer).
+      const applyProps = (props, answer) => {
         if (props === undefined) {
           return false;
         }
@@ -30087,13 +30114,20 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
         for (const [key, value] of Object.entries(props)) {
           const descriptor = Object.getOwnPropertyDescriptor(childItem, key);
           if (descriptor && descriptor.set) {
-            if (descriptor.set.call(childItem, value)) {
+            if (descriptor.set.call(childItem, value, answer)) {
               changed = true;
             }
-          } else if (childItem[key] !== value) {
-            childItem[key] = value;
-            changed = true;
+            continue;
           }
+          const held = childItem[key];
+          if (held === value) {
+            continue;
+          }
+          if (answer && compareTwoJsValues(held, value)) {
+            continue;
+          }
+          childItem[key] = value;
+          changed = true;
         }
         if (childSignal.peek() !== childItem) {
           childSignal.value = childItem; // first activation
@@ -30111,7 +30145,7 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
         applyPropsMap.set(ownerId, applyProps);
       }
 
-      applyProps(ownerItem[propertyName]);
+      applyProps(ownerItem[propertyName], answer);
 
       Object.defineProperty(ownerItem, propertyName, {
         get: () => {
@@ -30154,7 +30188,7 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
           // brings its child.
           const applyProps = applyPropsMap.get(ownerId);
           if (applyProps) {
-            applyProps(props);
+            applyProps(props, true);
           }
           return [ownerId, props];
         },
@@ -30284,18 +30318,18 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
     const createScope = (ownerKey) => {
       const childStore = arraySignalStore([], childIdKey, {
         name: `${childName}#${ownerKey} store`,
-        createItem: (props) => {
+        createItem: (props, answer) => {
           const childItem = {};
           Object.assign(childItem, props);
           for (const childSetup of childSetupCallbackSet) {
-            childSetup(childItem);
+            childSetup(childItem, answer);
           }
           return childItem;
         },
       });
       return { childStore, idArraySignal: signal([]) };
     };
-    addItemSetup((item) => {
+    addItemSetup((item, answer) => {
       const ownerId = item[idKey];
       let scope;
       if (ownerName) {
@@ -30342,7 +30376,7 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
       // untouched — children may have been fetched by uniqueKey before the
       // parent was loaded. Only an explicit value replaces the collection.
       if (item[propertyName] !== undefined) {
-        updateChildItemIdArray(item[propertyName]);
+        updateChildItemIdArray(item[propertyName], answer);
       }
 
       // When an id is renamed (PUT/PATCH changes the idKey), patch the id array.
@@ -30966,7 +31000,8 @@ ${relationLabel} source location: ${declarationSite}`,
 // child ids, upserting each entry into the child store. The id array signal is
 // only touched when the resulting ids actually differ.
 // Returns whether the children the row points to changed — what the store asks
-// a relation (see assign in array_signal_store.js).
+// a relation (see assign in array_signal_store.js). `answer`: the children come
+// from an answer, and are written as one (see upsertAnswer).
 // `wholeChildren` (.scopedMany()): each child received is the whole child, see
 // toWholeScopedChild.
 const createChildIdArrayUpdater = (
@@ -30975,7 +31010,7 @@ const createChildIdArrayUpdater = (
   idArraySignal,
   { wholeChildren = false } = {},
 ) => {
-  return (valueArray) => {
+  return (valueArray, answer) => {
     const currentIdArray = idArraySignal.peek();
     if (!Array.isArray(valueArray)) {
       if (currentIdArray.length > 0) {
@@ -30997,7 +31032,9 @@ const createChildIdArrayUpdater = (
       } else {
         continue;
       }
-      const childItem = childStore.upsert(childItemProps);
+      const childItem = answer
+        ? childStore.upsertAnswer(childItemProps)
+        : childStore.upsert(childItemProps);
       const childItemId = childItem[childIdKey];
       if (currentIdArray[idArray.length] !== childItemId) {
         modified = true;
@@ -38785,7 +38822,8 @@ const TRANSITION_COVERED_ATTRIBUTE = "data-navi-route-transition-covered";
 const TRANSITION_AREA_ATTRIBUTE = "data-navi-route-transition-area";
 const TRANSITION_TARGET_ATTRIBUTE = "data-navi-route-transition-target";
 // What a history entry remembers of the crossing that created it, in the
-// entry's own state: `{ from, type, direction, duration }` (see recordCrossing).
+// entry's own state: `{ fromDepth, type, direction, duration }` (see
+// recordCrossing).
 const CROSSING_STATE_KEY = "jsenv_route_transition";
 const AREA_NAME = "navi-route-transition";
 // The pictures carrying the movement, among everything else it takes along —
@@ -39442,51 +39480,35 @@ const normalizeRequest = transition => {
  * What a TRAVERSAL asks for: the crossing it retraces.
  *
  * The entry a push creates remembers the crossing that created it (see
- * recordCrossing). A back onto the page that crossing came from undoes it —
+ * recordCrossing). A back onto the entry that crossing came from undoes it —
  * the same movement, the other way — and a forward onto an entry whose
- * crossing came from the page being left plays it again as it was. Both
+ * crossing came from the entry being left plays it again as it was. Both
  * entries are read because each side is the only one that knows its case: the
  * entry being LEFT says how it was reached (a back), the entry being REACHED
  * says how it was reached (a forward).
  *
- * Both can be true at once — A, B, A again: leaving the second A for B is the
- * way back of A → B and the way in of B → A. The entries' depths in the stack
- * tell them apart; without a depth on both, a back is assumed, the traversal
- * by far the most often made.
+ * An entry is named by its depth in the stack, never by its url: a replace
+ * keeps the entry and its state while it rewrites the address — a param of
+ * the page settling, a list writing where it stands — and the crossing is
+ * still between the same two entries. A crossing always comes from below the
+ * entry it is recorded on, so at most one of the two cases matches.
  *
  * Answers in the shape of readNavigationRequest, with every field said, so
- * that the relations have nothing left to answer for — and marked as a replay,
- * because one relation still outranks it: the one written for the exact way
- * travelled (see the watcher's onMove).
+ * that the relations have nothing left to answer for — except the one written
+ * for the exact way travelled, which outranks it (see the watcher's onMove).
  */
-const readTraversalReplay = ({
-  url,
-  state
-}, {
-  fromUrl,
-  fromState
-}) => {
-  const to = absoluteUrl(url);
-  const from = absoluteUrl(fromUrl);
-  if (!to || !from) {
+const readTraversalReplay = (state, fromState) => {
+  const depthIn = navDepthOf(state);
+  const depthOut = navDepthOf(fromState);
+  if (depthIn === undefined || depthOut === undefined) {
     return null;
   }
   const crossingIn = crossingRecordedOn(state);
-  const crossingOut = crossingRecordedOn(fromState);
-  const isForward = crossingIn !== null && crossingIn.from === from;
-  const isBack = crossingOut !== null && crossingOut.from === to;
-  if (isForward && isBack) {
-    const depthIn = navDepthOf(state);
-    const depthOut = navDepthOf(fromState);
-    if (depthIn !== undefined && depthOut !== undefined && depthIn > depthOut) {
-      return replayOf(crossingIn);
-    }
-    return replayOf(reverseCrossing(crossingOut));
-  }
-  if (isForward) {
+  if (crossingIn !== null && crossingIn.fromDepth === depthOut) {
     return replayOf(crossingIn);
   }
-  if (isBack) {
+  const crossingOut = crossingRecordedOn(fromState);
+  if (crossingOut !== null && crossingOut.fromDepth === depthIn) {
     return replayOf(reverseCrossing(crossingOut));
   }
   return null;
@@ -39496,7 +39518,7 @@ const crossingRecordedOn = state => {
     return null;
   }
   const crossing = state[CROSSING_STATE_KEY];
-  if (!crossing || typeof crossing.from !== "string") {
+  if (!crossing || typeof crossing.fromDepth !== "number") {
     return null;
   }
   return crossing;
@@ -39506,8 +39528,7 @@ const crossingRecordedOn = state => {
  * Which way the history says a navigation goes, for a default that reads it
  * (see defineRouteDefaultTransition): a push is one level deeper, a traversal
  * goes where the depth of the entry it lands on puts it — back when that is
- * not known, as in readTraversalReplay —, and anything else (a replace) stays
- * on its level: null.
+ * not known —, and anything else (a replace) stays on its level: null.
  */
 const readHistoryDirection = (navigationType, {
   state,
@@ -39558,8 +39579,25 @@ const replayOf = ({
     type,
     typeSaid: true,
     duration,
-    direction,
-    replay: true
+    direction
+  };
+};
+
+// What a press asked, field by field, over the crossing its traversal
+// retraces: a press naming only a direction keeps the movement retraced and
+// turns it round, as it would a relation's (see readNavigationRequest).
+const layerRequest = (request, replay) => {
+  if (!replay) {
+    return request;
+  }
+  if (!request) {
+    return replay;
+  }
+  return {
+    type: request.typeSaid ? request.type : replay.type,
+    typeSaid: true,
+    duration: request.duration === undefined ? replay.duration : request.duration,
+    direction: request.direction === undefined ? replay.direction : request.direction
   };
 };
 
@@ -39645,9 +39683,10 @@ const rebuildWatcher = () => {
     // reverse of a pair, a page from anywhere — and not over a relation
     // written for this exact way: that line is the author's one tool for
     // breaking reciprocity, and the back button is the way back it has to
-    // reach. A request made by a link or a navTo() is never dropped: it is
-    // about this one crossing, and a written relation is about every one.
-    const request = navigationRequest && navigationRequest.replay && found && found.written ? null : navigationRequest;
+    // reach. A request made by a link or a navTo() is never dropped, not even
+    // when its push was taken as a traversal: it is about this one crossing,
+    // and a written relation is about every one.
+    const request = layerRequest(navigationRequest, found && found.written ? null : navigationReplay);
     if (!found && !request) {
       // No relation says anything about these two and this navigation asked
       // for nothing: they are side by side, and silence is the fact — not a
@@ -39698,6 +39737,10 @@ const rebuildWatcher = () => {
 // start of every navigation, so they are always about the latest one.
 let defaultTransition = null;
 let navigationRequest = null;
+// The crossing a traversal retraces (see readTraversalReplay), kept apart from
+// what was asked: a relation written for the exact way drops the one and never
+// the other.
+let navigationReplay = null;
 let navigationUrl = null;
 // Where the document stands as the navigation begins — the other end of the
 // crossing, and what lets the NEXT navigation be recognised as this one's way
@@ -39705,6 +39748,9 @@ let navigationUrl = null;
 // on a browser without the Navigation API is announced from "popstate", where
 // the address has already moved and location would answer with the destination.
 let navigationFromUrl = null;
+// Where the entry being left stands in the stack: what a push's crossing names
+// as the entry it came from (see recordCrossing).
+let navigationFromDepth;
 let navigationAnimated = false;
 // "push", "replace", "traverse", … — a push is the one navigation that creates
 // the entry a crossing is recorded on.
@@ -39733,17 +39779,18 @@ observeBeforeRouting(details => {
   // Read before the document state moves, so the state peeked is the entry
   // being left.
   const fromState = documentStateSignal.peek();
-  // A traversal has no element and no call to ask anything: what it asks is
-  // the crossing it retraces — reversed for a back, as it was for a forward.
-  navigationRequest = navigationType === "traverse" ? readTraversalReplay(details, {
-    fromUrl: navigationFromUrl,
-    fromState
-  }) : readNavigationRequest(details);
+  navigationFromDepth = navDepthOf(fromState);
+  // A traversal is asked something only when a push to the entry next door
+  // was taken as one, and then carries its press (see the integrations). What
+  // else it asks is the crossing it retraces — reversed for a back, as it was
+  // for a forward.
+  navigationRequest = readNavigationRequest(details);
+  navigationReplay = navigationType === "traverse" ? readTraversalReplay(details.state, fromState) : null;
   navigationHistoryDirection = defaultTransition && defaultTransition.readsHistory ? readHistoryDirection(navigationType, {
     state: details.state,
     fromState
   }) : undefined;
-  if (relations.length === 0 && !defaultTransition && !navigationRequest) {
+  if (relations.length === 0 && !defaultTransition && !navigationRequest && !navigationReplay) {
     return;
   }
   holdRenderingForRouting();
@@ -39756,16 +39803,19 @@ observeBeforeRouting(details => {
   }
 });
 observeAfterRouting(() => {
-  const request = navigationRequest;
+  const request = layerRequest(navigationRequest, navigationReplay);
   const url = navigationUrl;
   const fromUrl = navigationFromUrl;
+  const fromDepth = navigationFromDepth;
   const type = navigationType;
   const historyDirection = navigationHistoryDirection;
   // Read here and dropped here: a request answers for the navigation it was
   // made on, and the next one is back to the relations.
   navigationRequest = null;
+  navigationReplay = null;
   navigationUrl = null;
   navigationFromUrl = null;
+  navigationFromDepth = undefined;
   navigationType = null;
   navigationHistoryDirection = undefined;
   // A default reading the history plays between two pages a level apart: not
@@ -39804,7 +39854,7 @@ observeAfterRouting(() => {
   if (type === "push") {
     recordCrossing({
       url,
-      fromUrl,
+      fromDepth,
       decision: navigationDecision
     });
   }
@@ -39822,15 +39872,14 @@ observeAfterRouting(() => {
 // reached by one keeps the crossing that led to where it stands.
 const recordCrossing = ({
   url,
-  fromUrl,
+  fromDepth,
   decision
 }) => {
-  if (!decision) {
+  if (!decision || fromDepth === undefined) {
     return;
   }
   const to = absoluteUrl(url);
-  const from = absoluteUrl(fromUrl);
-  if (!to || !from) {
+  if (!to) {
     return;
   }
   if (documentUrlSignal.peek() !== to) {
@@ -39838,7 +39887,7 @@ const recordCrossing = ({
     return;
   }
   const crossing = {
-    from
+    fromDepth
   };
   if (decision.type !== undefined) {
     crossing.type = decision.type;
@@ -44871,15 +44920,16 @@ const armOutsidePressClose = (
  * follows a new `defaultValue` on its own (see followDefaultValue in
  * ui_state_controller.js) — and this is what throws that edit away.
  *
- * On top of whichever value is picked, intent on the anchor warms the content:
- * a pointer entering the popup's anchor, or focus landing in it, builds the
- * content ahead of the click that will open it. Deferring the build to the
- * opening puts its whole cost in the frame right after the click — the frame
- * where a delay is felt hardest — while the ~100-300ms between hovering a
- * trigger and pressing it are free. The warming render starts at the frame
- * after the one that follows the intent: nothing here needs the content in the
- * DOM before the click, only before the open that follows it, and a build
- * started at once would hold back the frame that shows the hover or the focus.
+ * On top of whichever value is picked, intent warms the content: a press on
+ * what opens the popup, and but for "while-opened" a pointer entering the
+ * popup's anchor or focus landing in it, builds the content ahead of the click
+ * that will open it. Deferring the build to the opening puts its whole cost in
+ * the frame right after the click — the frame where a delay is felt hardest —
+ * while the ~100-300ms between hovering a trigger and pressing it are free.
+ * The warming render starts at the frame after the one that follows the
+ * intent: nothing here needs the content in the DOM before the click, only
+ * before the open that follows it, and a build started at once would hold
+ * back the frame that shows the hover or the focus.
  *
  * Under a finger, `pointerover` is not an intent yet: it arrives with the
  * `pointerdown` of every touch, the ones starting a scroll included, and at
@@ -44899,7 +44949,12 @@ const armOutsidePressClose = (
  * press does not open (`data-open-on`: a picker opened by a hold, or only by a
  * command) says nothing; the keyboard still opens it, so focus there warms.
  *
- * "while-opened" content is warmed by an opening press, never by a hover or a
+ * An opening press warms whatever the value. A popup with no anchor — a sheet,
+ * a side panel, a layer opened by a button — has nothing else saying it is
+ * about to open, and under a finger the ~100ms a tap is held are as free as a
+ * hover.
+ *
+ * "while-opened" content is warmed by that press only, never by a hover or a
  * focus. That mode promises content built fresh for the gesture that opens
  * it, and mounted only while that gesture and its opening last: callers lean
  * on it (several pickers sharing one set of content ids, because only one
@@ -44916,15 +44971,16 @@ const armOutsidePressClose = (
  * The press builds the content when it starts, a touch once it has been held
  * as above: the announcement carries the pointerdown that made it. A press
  * released before its build leaves the building to the open its click asks
- * for. The press ending without an open throws the content away — its click
- * reaching the document with the popup still closed, no
+ * for. A press ending without an open keeps what it built, as a hover does:
+ * the next press finds it there. Under "while-opened" it throws the content
+ * away — its click reaching the document with the popup still closed, no
  * click coming after the release, the browser taking the gesture
  * (`pointercancel`), or the next press starting, before any of its own
  * handlers run: one press at a time holds a content. A keyboard opening builds
  * at open time. A "while-opened" popup with an `onOpen` is not warmed by the
  * press: that callback runs before the content is built (see
  * open_controller.js), and a content seeding itself from what it writes must
- * be built after it. Hover and focus warming, for the other values, builds
+ * be built after it. For the other values, a press, a hover and a focus build
  * ahead of `onOpen` all the same.
  */
 
@@ -44961,11 +45017,14 @@ const cancelIdle = (id) =>
     ? cancelIdleCallback(id)
     : clearTimeout(id);
 
-// How long a finger rests on an anchor before it warms it: past the ~35ms at
-// which the browser takes a touch moving at reading speed for a scroll, short
-// of the ~100ms a tap is held, so a deliberate tap is warmed before its
-// release.
-const TOUCH_WARM_HOLD_MS = 80;
+// How long a finger rests on an anchor or an opener before it warms it: just
+// past the ~35ms at which the browser takes a touch moving at reading speed
+// for a scroll. A tap is held ~100ms, and the hold ends at a frame, which a
+// phone's busy main thread runs late: at 80ms a 100ms tap on 2v2's settings
+// wheel (CPU 6x) lifted before that frame 5 times out of 7 and was warmed by
+// nothing. The price is a scroll that starts slowly enough to be taken past
+// 40ms: it builds what the open would have built.
+const TOUCH_WARM_HOLD_MS = 40;
 
 const usePopupContentMount = (
   openController,
@@ -45128,9 +45187,9 @@ const usePopupContentMount = (
       anchorElement.removeEventListener("focusin", onFocusIn);
     };
   }, [contentMounted, anchor, mount]);
-  // Warm on an opening press, for "while-opened" (see the top comment). Told
-  // by the popup's own element, which hears the announcement where it hears
-  // the opening request: `onnavi_open_press` beside each `onnavi_request_open`.
+  // Warm on an opening press (see the top comment). Told by the popup's own
+  // element, which hears the announcement where it hears the opening request:
+  // `onnavi_open_press` beside each `onnavi_request_open`.
   const stopPressWarmRef = useRef(null);
   openController.onOpeningPress =
     mount === "while-opened"
@@ -45156,7 +45215,21 @@ const usePopupContentMount = (
             stopWatching();
           };
         }
-      : null;
+      : (openPressEvent) => {
+          // Two fingers on two of its openers are one build.
+          if (contentMountedRef.current || stopPressWarmRef.current) {
+            return;
+          }
+          stopPressWarmRef.current = requestBuildOnPress(openPressEvent, {
+            onBuild: () => {
+              stopPressWarmRef.current = null;
+              setContentMounted(true);
+            },
+            onGiveUp: () => {
+              stopPressWarmRef.current = null;
+            },
+          });
+        };
   useEffect(() => {
     return () => {
       stopPressWarmRef.current?.();
@@ -61648,8 +61721,8 @@ a.navi_button {
     outline-color: var(--button-outline-color);
     outline-offset: var(--button-outline-offset);
     transition-property: transform;
-    transition-duration: .15s;
-    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    transition-duration: .25s;
+    transition-timing-function: cubic-bezier(.2, 0, 0, 1);
     position: relative;
 
     & .navi_button_shadow {
@@ -61692,7 +61765,7 @@ a.navi_button {
 
   &[data-pressed] {
     & .navi_button_content {
-      transition-duration: 0s;
+      transition-duration: .1s;
       transform: scale(.9);
     }
   }
@@ -73769,10 +73842,12 @@ const giveUpOnControlsHoldingPopup = (controlsHolding, reason) => {
  * itself on it (navi_open_press), --navi-toggle reads its aria-expanded. The
  * popup proper — its open controller, its box, its backdrop, its focus and
  * pseudo-class wiring — is built at the first request: an open, a press about
- * to open it, its signal or its `open` saying open. A list whose rows each hold
- * a few popups mounts hundreds of them, and would pay for every one at every
- * mount, for openings that mostly never come. Built once, the popup stays: the
- * next opening finds it there.
+ * to open it, its signal or its `open` saying open. A press builds what the
+ * popup holds along with it, as it warms the content of a popup already built
+ * (see popup_content_mount.js): the click that follows only opens. A list
+ * whose rows each hold a few popups mounts hundreds of them, and would pay for
+ * every one at every mount, for openings that mostly never come. Built once,
+ * the popup stays: the next opening finds it there.
  *
  * Nothing about where the popup goes is needed at rest: a popover reads its
  * anchor at the opening, from the request.
@@ -76168,6 +76243,11 @@ const DialogStandIn = props => {
       ...props,
       ref: dialogRef,
       defaultOpen: builtReason === "interaction" ? "interaction" : props.defaultOpen
+      // Built by a press on what opens it: the content comes with it, and
+      // stays, as a "from-first-open" content does once built (see
+      // popup_stand_in.js).
+      ,
+      mount: builtReason === "press" ? "always" : props.mount
     });
   }
   return jsx("dialog", {
@@ -78133,6 +78213,11 @@ const PopoverStandIn = props => {
       ...props,
       ref: popoverRef,
       defaultOpen: builtReason === "interaction" ? "interaction" : props.defaultOpen
+      // Built by a press on what opens it: the content comes with it, and
+      // stays, as a "from-first-open" content does once built (see
+      // popup_stand_in.js).
+      ,
+      mount: builtReason === "press" ? "always" : props.mount
     });
   }
   return jsx("div", {
@@ -89179,6 +89264,13 @@ const useRunItems = (store, {
     if (askEnd > runEnd - 1) {
       askEnd = runEnd - 1;
     }
+    // Only the item before the window's first one says whether that one opens
+    // its group (see whereGroupContinues). Asked for with it, the first item
+    // lands with its group known, not guessed: a wrong guess changes the room
+    // above it, label and scroll inset, once the item before comes.
+    if (groupBy && askStart === windowFrom && windowFrom > runStart && !store.holds(rankOf(windowFrom - 1)) && (!groupOfMissing || groupOfMissing(windowFrom - 1) === undefined)) {
+      askStart = windowFrom - 1;
+    }
   }
   // The item the missing ones hang from, when there is one: a source paginating
   // by cursor ("the 50 before this one") needs an item to count from, and an