@jsenv/navi 0.29.427 → 0.29.429

package/dist/dev/jsenv_navi.js

@@ -26867,10 +26867,11 @@ const createRangeReader = (
     });
     return { byIndex, count: composition.count };
   };
-  // `replace` is a revalidation: the ranks that are not in what just came back
-  // stood for a composition that has moved on. Otherwise the ranks are merged,
-  // so two lists reading the same collection through their own windows add up
-  // to one composition instead of taking turns erasing each other.
+  // `replace` says the list dropped ranks it held (an item the collection moved
+  // elsewhere, ranks past its end): kept here, they would come back at the next
+  // mount. Otherwise the ranks are merged, so two lists reading the same
+  // collection through their own windows add up to one composition instead of
+  // taking turns erasing each other.
   readRange.writeComposition = ({ byIndex, count, replace }) => {
     const params = currentParams();
     let composition = findComposition(params);
@@ -39813,6 +39814,16 @@ const resolveAfterSend = (target, requester) => {
   }
   return undefined;
 };
+// What follows a send is caused by the send, not by the gesture: the send
+// answered the gesture and may have prevented it (an Enter must not also click
+// the submit button, nor activate the trigger of the popup it closed), and a
+// follow-up judged on that event is refused as a gesture someone cancelled.
+// Chained, so the gesture stays readable behind it.
+const createSentEvent = (event) => {
+  const sentEvent = new CustomEvent("sent", { detail: {} });
+  chainEvent(sentEvent, event);
+  return sentEvent;
+};
 
 registerNaviCommand("--navi-send", (source, event, { requester }) => {
   const expandable = resolveExpandableAround(source);
@@ -39845,7 +39856,9 @@ registerNaviCommand("--navi-send", (source, event, { requester }) => {
           source.getAttribute("data-after-send") ||
           target.getAttribute("data-after-send");
         if (afterSend) {
-          triggerNaviCommand(target, afterSend, event, { optional: true });
+          triggerNaviCommand(target, afterSend, createSentEvent(event), {
+            optional: true,
+          });
         }
         return result;
       },
@@ -39889,7 +39902,9 @@ registerNaviCommand("--navi-send", (source, event, { requester }) => {
         if (!afterSend) {
           return;
         }
-        triggerNaviCommand(source, afterSend, event, { optional: true });
+        triggerNaviCommand(source, afterSend, createSentEvent(event), {
+          optional: true,
+        });
       };
       const {
         result: sent,
@@ -74110,9 +74125,12 @@ const useListScrollSync = ({
   };
   const [renderWindow, setRenderWindow] = useState(() => {
     // Opening somewhere else than the beginning starts by framing there: the
-    // items the list will draw are the items it will ask for.
+    // items the list will draw are the items it will ask for. A named item is
+    // framed where it stood when it was written down, which is where holdWindow
+    // aims before anyone can say where it is.
     const openAt = scrolled ?? defaultScrolled;
-    const start = typeof openAt === "number" ? openAt - itemsAboveOpening(openAt, firstWindowItemCount) : 0;
+    const openIndex = typeof openAt === "number" ? openAt : openAt && typeof openAt === "object" && typeof openAt.index === "number" ? openAt.index : null;
+    const start = openIndex === null ? 0 : openIndex - itemsAboveOpening(openAt, firstWindowItemCount);
     const startClamped = start < 0 ? 0 : start;
     return {
       start: startClamped,
@@ -74239,14 +74257,11 @@ const useListScrollSync = ({
     if (wantedStart < 0) {
       wantedStart = 0;
     }
-    if (wantedStart === start) {
-      listItems.holdPending = false;
-      return;
-    }
-    renderWindowRef.current = {
-      start: wantedStart,
-      end: wantedStart + windowSize
-    };
+    // The window the hold frames goes into the state, not into this render
+    // alone: the next render starts from the state, and once the item stands
+    // inside the window the hold stops framing it — a window left where the
+    // state had it would draw around another place.
+    updateRenderWindow(wantedStart, wantedStart + windowSize, `held on item ${heldItem}`);
     listItems.holdPending = false;
   };
   const pendingScrollRef = useRef();
@@ -74395,6 +74410,13 @@ const useListScrollSync = ({
       return;
     }
     hasBeenDisplayedRef.current = true;
+    const place = startPlaceRef.current;
+    if (!place.userTookOver && place.wanted !== "start" && place.wanted !== undefined) {
+      // Held somewhere: where the list opens is the hold's to say (see
+      // placeWhereHeld). Scrolled here too, the list would go to the top or
+      // the selected item for as long as the hold takes to put it back.
+      return;
+    }
     const items = listItems.itemsSignal.peek();
     const firstSelected = items.find(i => {
       if (i.selected) {
@@ -75097,12 +75119,14 @@ const useListScrollSync = ({
     const spare = budget > screen ? budget - screen : 0;
     const behindSize = countsItems ? Math.floor(spare / 4) : spare / 4;
     const aheadSize = spare - behindSize;
-    if (stage === "steady" && !budgetWarnedRef.current && bandEnd > bandStart) {
-      const twoLines = (countsItems ? 2 : 2 * (bandTo - bandFrom) / (bandEnd - bandStart)) * itemsPerLineNow;
-      if (spare < twoLines) {
-        budgetWarnedRef.current = true;
-        console.warn(`List: renderBudget=${renderBudget.value}${renderBudget.unit} leaves less than two ${itemsPerLineNow > 1 ? "lines of items" : "items"} beyond what the screen shows (${bandEnd - bandStart} items): items will go blank as it scrolls. Give it room for a screen ahead or more — "300%" of the box that scrolls it, say.`);
-      }
+    // Said only when the budget holds nothing past the screen: the blank is
+    // then certain. Past the screen, whether a fling outruns the window is
+    // what the device and the rest of the main thread's work decide, and a
+    // number of items cannot tell it — two one-line items are 76 px, two
+    // cards a whole screen. That is measured on the list, not guessed here.
+    if (stage === "steady" && !budgetWarnedRef.current && bandEnd > bandStart && spare === 0) {
+      budgetWarnedRef.current = true;
+      console.warn(`List: renderBudget=${renderBudget.value}${renderBudget.unit} holds no more than what the screen shows (${bandEnd - bandStart} items on it): the screen goes blank past it as soon as the list scrolls. Give it more than a screen — "150%" of the box that scrolls it, say.`);
     }
     if (!force) {
       const roomAround = readRoomAround({
@@ -77673,19 +77697,57 @@ const useRunItems = (store, {
   // rebuilt as the window slides — a group holds the items of its day that are
   // currently drawn, which is exactly the span its label has to survive.
   let group = null;
+  // Two groups can still share a key (a failure band standing mid-group, data
+  // not sorted by group): the later ones are told apart by their rank among
+  // them, so the first keeps its element. A group keyed by where it starts
+  // would lose its element each time the window slides past its first item.
+  const groupCountByKey = new Map();
   const closeGroup = () => {
     if (!group) {
       return;
     }
+    const groupCount = (groupCountByKey.get(group.key) || 0) + 1;
+    groupCountByKey.set(group.key, groupCount);
     nodes.push(jsx(ListItemGroup, {
       label: group.label,
       labelProps: group.labelProps,
       children: group.children
-    }, `${ownerId}_group_${group.key}`));
+    }, groupCount === 1 ? `${ownerId}_group_${group.key}` : `${ownerId}_group_${group.key}_${groupCount}`));
     group = null;
   };
+  // An item not held has no group of its own. Between two items of the open
+  // group it is a line of that group whose content has not arrived: drawn
+  // outside, it would cut the group in two and show its label twice. A hole at
+  // a group's edge stays outside — nothing says which side it belongs to.
+  let holeTo = -1;
+  let holeGroupKey;
+  const groupKeyOfHole = itemIndex => {
+    if (itemIndex < holeTo) {
+      return holeGroupKey;
+    }
+    holeTo = itemIndex + 1;
+    while (holeTo < windowTo && holeTo !== failureFrom && getItemAt(holeTo) === undefined) {
+      holeTo++;
+    }
+    holeGroupKey = undefined;
+    if (group && holeTo < windowTo && holeTo !== failureFrom) {
+      const keyAfterHole = groupBy(getItemAt(holeTo), holeTo);
+      if (keyAfterHole === group.key) {
+        holeGroupKey = keyAfterHole;
+      }
+    }
+    return holeGroupKey;
+  };
   // Which group an item belongs to, or undefined when it belongs to none.
-  const groupKeyOf = (item, itemIndex) => groupBy && item !== undefined ? groupBy(item, itemIndex) : undefined;
+  const groupKeyOf = (item, itemIndex) => {
+    if (!groupBy) {
+      return undefined;
+    }
+    if (item === undefined) {
+      return groupKeyOfHole(itemIndex);
+    }
+    return groupBy(item, itemIndex);
+  };
   const pushItem = (itemNode, item, itemIndex, groupKey) => {
     if (groupKey === undefined) {
       closeGroup();
@@ -78022,10 +78084,15 @@ const useItemStore = ({
   }
   const pages = pagesRef.current;
   const [, setPageVersion] = useState(0);
-  // The items held are out of date and the run has not asked for the new ones
-  // yet. They stay on screen until the answer comes: what is drawn is from
-  // before, which is not the same thing as nothing to draw.
-  const staleRef = useRef(restored);
+  // The ranks whose item is from before: the run came back to the screen, or
+  // the source said the collection moved. They stay drawn until a page confirms
+  // or replaces them, rank by rank. A page covers what the window framed when it
+  // was asked for, and the window keeps growing meanwhile: dropping what the
+  // page did not cover empties items on screen.
+  const staleRanksRef = useRef(null);
+  if (staleRanksRef.current === null) {
+    staleRanksRef.current = restored ? new Set(pages.byIndex.keys()) : new Set();
+  }
   const [refreshing, setRefreshing] = useState(false);
   // A source that says when what it reads has moved (a resource range reader
   // does: see rerunOn.GET_RANGE) is heard here — a write deciding who belongs
@@ -78036,7 +78103,7 @@ const useItemStore = ({
   const invalidationRef = useRef(invalidation);
   if (invalidationRef.current !== invalidation) {
     invalidationRef.current = invalidation;
-    staleRef.current = true;
+    staleRanksRef.current = new Set(pages.byIndex.keys());
   }
   // The one request in flight, with the means to call it off: a page asked for
   // a window the list has left is work the server and the browser are doing for
@@ -78069,11 +78136,6 @@ const useItemStore = ({
   // It stands for a page of them: a list that is about to be filled looks
   // like items on their way, not like an empty list.
   const itemCount = pages.count ?? count ?? listItems.pageSize;
-  // A run that never received anything has nothing to keep on screen: asking
-  // again is its first ask, not a refresh.
-  if (staleRef.current && pages.count === undefined) {
-    staleRef.current = false;
-  }
   useLayoutEffect(() => {
     if (!refreshing) {
       return null;
@@ -78146,9 +78208,11 @@ const useItemStore = ({
       const keepFrom = windowFrom - ITEM_STORE_KEEP_AROUND;
       const keepTo = windowTo + ITEM_STORE_KEEP_AROUND;
       if (pages.byIndex.size > budget) {
+        const staleRanks = staleRanksRef.current;
         for (const index of pages.byIndex.keys()) {
           if (index < keepFrom || index > keepTo) {
             pages.byIndex.delete(index);
+            staleRanks.delete(index);
           }
         }
       }
@@ -78183,10 +78247,24 @@ const useItemStore = ({
       let start = missingStart;
       let end = missingEnd;
       let around;
-      // Items that are all there but out of date: the ask is the window itself,
-      // anchored on the item at its top — a source paginating by cursor gets an
-      // item to count from, and the reading position is what must survive.
-      const revalidating = staleRef.current;
+      // The window draws items from before: they are asked for again, and stay
+      // drawn meanwhile.
+      const staleRanks = staleRanksRef.current;
+      let staleFrom = -1;
+      let staleTo = -1;
+      if (staleRanks.size > 0) {
+        let rank = windowFrom;
+        while (rank < windowTo) {
+          if (staleRanks.has(rank)) {
+            if (staleFrom === -1) {
+              staleFrom = rank;
+            }
+            staleTo = rank;
+          }
+          rank++;
+        }
+      }
+      const revalidating = staleFrom !== -1;
       // The list is held on an item nothing on screen leads to: the items it holds
       // do not contain it, so no window it could draw will ever bring it. Only
       // asking for it by name does.
@@ -78203,18 +78281,36 @@ const useItemStore = ({
         start = from < 0 ? 0 : from;
         end = start + budget - 1;
       } else if (revalidating) {
-        start = windowFrom;
-        end = windowTo - 1;
-        if (end < start) {
-          // Nothing of this run is on screen (the window frames another one, or
-          // the list is scrolled past it): its own first items are what it will
-          // draw next.
-          start = 0;
-          end = budget - 1;
-        }
-        const firstHeld = pages.byIndex.get(windowFrom);
-        if (firstHeld && firstHeld.id !== undefined) {
-          around = firstHeld.id;
+        // The items from before that the window draws, and the missing ones
+        // with them: one ask.
+        if (start === -1 || staleFrom < start) {
+          start = staleFrom;
+        }
+        if (staleTo > end) {
+          end = staleTo;
+        }
+        // Grown over the items from before on either side, up to a page: the
+        // window grows past its first picture right after it is painted, and
+        // what it grows onto would otherwise be asked for once more.
+        while (end - start + 1 < budget) {
+          const staleBefore = staleRanks.has(start - 1);
+          const staleAfter = staleRanks.has(end + 1);
+          if (!staleBefore && !staleAfter) {
+            break;
+          }
+          if (staleBefore) {
+            start--;
+          }
+          if (staleAfter && end - start + 1 < budget) {
+            end++;
+          }
+        }
+        // Anchored on the first item from before on screen: a source
+        // paginating by cursor gets an item to count from, and the reading
+        // position is what must survive.
+        const firstStale = pages.byIndex.get(staleFrom);
+        if (firstStale && firstStale.id !== undefined) {
+          around = firstStale.id;
         }
       } else if (pages.count === undefined) {
         const scrolled = listItems.scrolled;
@@ -78268,7 +78364,8 @@ const useItemStore = ({
             debugAsk("already revalidating");
             return;
           }
-          // A page for a window that is about to be replaced wholesale.
+          // A page asked for before the items went stale answers for the
+          // collection as it was.
           request.controller?.abort();
           request.busy = false;
         }
@@ -78289,11 +78386,11 @@ const useItemStore = ({
           request.controller?.abort();
           request.busy = false;
         }
-        const held = pages.byIndex.size;
         // Asking again for a range that was already asked for, having received
-        // nothing since, can only produce the same answer. A revalidation is
-        // exactly the case where it produces another one.
-        if (!revalidating && request.start === start && request.end === end && request.held === held) {
+        // nothing since, can only produce the same answer — unless the
+        // collection moved since, which is what an invalidation says.
+        const held = `${pages.byIndex.size}/${staleRanks.size}/${invalidation}`;
+        if (request.start === start && request.end === end && request.held === held) {
           debugAsk("this range was asked for already");
           return;
         }
@@ -78329,7 +78426,6 @@ const useItemStore = ({
             request.revalidating = false;
             setFailure(null);
             if (revalidating) {
-              staleRef.current = false;
               setRefreshing(false);
             }
             publishRequestState();
@@ -78348,15 +78444,35 @@ const useItemStore = ({
           // Before the items land: what is on screen has to stay where it is,
           // and the DOM still shows the state to hold onto.
           listItems.captureAnchor();
-          if (revalidating) {
-            // The items held stood for a composition that has moved on; the
-            // ones outside the window are forgotten and asked for again if the
-            // user goes back to them.
-            pages.byIndex = new Map();
+          // An item from before is gone from where it stood when the page puts
+          // it at another rank (it would be drawn twice), or when its rank is
+          // past the end of the collection.
+          const staleRanksNow = staleRanksRef.current;
+          const pageEnd = pageStart + pageItems.length;
+          let dropped = false;
+          if (staleRanksNow.size > 0) {
+            const pageIds = new Set();
+            for (const pageItem of pageItems) {
+              if (pageItem && pageItem.id !== undefined) {
+                pageIds.add(pageItem.id);
+              }
+            }
+            for (const rank of staleRanksNow) {
+              if (rank >= pageStart && rank < pageEnd) {
+                continue;
+              }
+              const staleItem = pages.byIndex.get(rank);
+              if (rank >= pageCount || staleItem && pageIds.has(staleItem.id)) {
+                staleRanksNow.delete(rank);
+                pages.byIndex.delete(rank);
+                dropped = true;
+              }
+            }
           }
           let i = 0;
           while (i < pageItems.length) {
             pages.byIndex.set(pageStart + i, pageItems[i]);
+            staleRanksNow.delete(pageStart + i);
             i++;
           }
           pages.count = pageCount;
@@ -78366,7 +78482,7 @@ const useItemStore = ({
             itemsAction.writeComposition({
               byIndex: pages.byIndex,
               count: pageCount,
-              replace: revalidating
+              replace: dropped
             });
           }
           listItems.pagesSignal.value = listItems.pagesSignal.peek() + 1;
@@ -78381,9 +78497,14 @@ const useItemStore = ({
           request.revalidating = false;
           publishRequestState();
           if (revalidating) {
-            // The items from before stay: a revalidation that failed has
+            // The items from before stay, and are not asked for again until the
+            // source says the collection moved: a revalidation that failed has
             // nothing better to put in their place.
-            staleRef.current = false;
+            let rank = start;
+            while (rank <= end) {
+              staleRanksRef.current.delete(rank);
+              rank++;
+            }
             setRefreshing(false);
             return;
           }
@@ -78700,7 +78821,8 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   "Many rows"). The window keeps three quarters of what the screen leaves of
  *   it ahead of the scroll, and moves once that falls under half a screen; it
  *   has to hold more than the screen shows, with room for that lookahead — the
- *   list warns when it leaves less than two items beyond the screen.
+ *   list warns when it holds no more than the screen. How much more is
+ *   measured: fling the list on the slowest device it runs on.
  *
  *   `{ initial, after }` for a list whose first picture is taken as it is
  *   built — drawn in the click that opens a popup, or in the update callback