@jsenv/navi 0.29.426 → 0.29.428

package/dist/dev/jsenv_navi.js

@@ -16881,9 +16881,9 @@ const armOutsidePressClose = (
  * `font-family` is deliberately absent: a surface keeps the face of what
  * opened it, so a section written in a display font gets its tooltips in that
  * font. `color`, `font-size` and `font-weight` are absent too — each surface
- * answers those its own way (a popup writes in --navi-popup-color and follows
- * the size of what opened it; a callout reverts to the document's ink and
- * size).
+ * answers those its own way (a popup and a callout write in
+ * --navi-popup-color; a popup follows the size of what opened it, a callout
+ * resets to the document's size).
  *
  * In `@layer navi` so an app that wants one of these back says so on the
  * surface and wins, without having to out-specify anything.
@@ -17113,8 +17113,7 @@ const css$14 = /* css */ `
       --callout-error-color: var(--navi-callout-error-color);
       --callout-neutral-color: var(--navi-callout-neutral-color);
 
-      --callout-background-color: white;
-      --callout-icon-color: black;
+      --callout-background-color: var(--navi-popup-background-color);
       --callout-padding: 8px;
       --callout-z-index: var(--navi-z-index-callout);
       /* The page's line, said here rather than inherited: the icon and the
@@ -17168,11 +17167,11 @@ const css$14 = /* css */ `
     height: auto; /* User agent reset */
     margin: 0;
     padding: 0; /* User agent reset */
-    /* The UA's ink for a [popover] element (CanvasText), not the element's:
-       a callout sits inside the element but writes on its own paper. The
-       color keywords are re-declared against that same ink in
-       navi_css_vars.js (.navi_callout). */
-    color: revert;
+    /* A callout sits inside the element but writes on its own paper: the
+       popup's ink, paired with the popup's paper it is drawn on, so the two
+       follow color-scheme and the theme together. The color keywords are
+       re-declared against that same ink in navi_css_vars.js. */
+    color: var(--navi-popup-color);
     font-weight: initial; /* Callout fells disconnected from the element, font weight should be predictible and stable */
     font-size: initial; /* Callout fells disconnected from the element, font size should be predictible and stable */
     line-height: var(
@@ -19484,16 +19483,18 @@ const findBusySource = (field) => {
   // a new interaction is queued behind the run (see the action queue in
   // control_hooks.jsx) rather than refused.
   if (!field.optimistic && boundAction) {
-    // The INSTANCE the proxy resolves to right now, not the proxy's own
-    // signal: that one is a MIRROR, synced by an effect the settling batch
-    // defers — read mid-batch (a state echo carrying the user's event back
-    // down, an automatic follow-up), it still says RUNNING for an action
-    // that is already over, and the gate would refuse — callout included —
-    // for nothing. The resolved instance is the live truth: at that echo it
-    // is the instance that just settled, already COMPLETED. And it IS the
-    // running one whenever one runs — a non-optimistic control's state
-    // cannot move mid-run, this very gate blocks it.
-    const liveAction = boundAction.getCurrentAction?.() ?? boundAction;
+    // The instance the run in flight uses, as the render reads it (see
+    // runningActionSignal in control_hooks.jsx): the state a proxy follows can
+    // move mid-run — a popup content unmounting takes the group's value — and
+    // the proxy would resolve to an idle instance. With no run out, the
+    // instance the proxy resolves to right now, never the proxy's own signal:
+    // a MIRROR synced by an effect the settling batch defers, which still says
+    // RUNNING mid-batch (a state echo, an automatic follow-up) for an action
+    // already over. An instance is COMPLETED the moment it settles.
+    const liveAction =
+      field.runningActionSignal.value ??
+      boundAction.getCurrentAction?.() ??
+      boundAction;
     if (liveAction.runningStateSignal.value === RUNNING) {
       return { field, action: liveAction };
     }
@@ -20531,11 +20532,10 @@ const READONLY_CONSTRAINT = {
   name: "readonly",
   messageAttribute: "data-readonly-message",
   check: (field, { intent } = {}) => {
-    const readOnly = Boolean(
-      field.controlHostProps.readOnly ||
-      field.controlHostProps["aria-readonly"] === "true",
-    );
-    if (!readOnly) {
+    // Not off the rendered `readOnly`/`aria-readonly`: they also carry the run
+    // of the control's own action, a frame behind (see readOnlyWithoutRun in
+    // control_hooks.jsx). That run is BUSY_CONSTRAINT's, which reads it live.
+    if (!field.readOnlyWithoutRun) {
       return null;
     }
 
@@ -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);
@@ -44065,6 +44066,7 @@ const useUIFacadeStateController = (props, realUIStateController) => {
         ref: realUIStateController.ref,
         uiStateSignal: realUIStateController.uiStateSignal,
         controlHostProps: realUIStateController.controlHostProps,
+        readOnlyWithoutRun: realUIStateController.readOnlyWithoutRun,
         registerChild: (child) => {
           if (!canRegisterAsFacadeChild(child)) {
             return;
@@ -44194,6 +44196,8 @@ const useUIFacadeStateController = (props, realUIStateController) => {
       s.controller.ref = realUIStateController.ref;
       s.controller.uiStateSignal = realUIStateController.uiStateSignal;
       s.controller.controlHostProps = realUIStateController.controlHostProps;
+      s.controller.readOnlyWithoutRun =
+        realUIStateController.readOnlyWithoutRun;
       realUIStateController.pushStateDownToFacadeChild =
         s.controller.pushStateDownToChild;
 
@@ -46102,6 +46106,11 @@ const useInteractiveProps = (props, {
     const actionLoading = optimistic ? false : actionRunning;
     const loadingResolved = loadingBase || actionLoading;
     const readOnlyResolved = readOnlyBase || actionLoading;
+    // What READONLY_CONSTRAINT refuses for. The run of the control's own action
+    // is BUSY_CONSTRAINT's, read live: readOnlyResolved is a render snapshot,
+    // still read-only in the tick the run settles — the tick a form's
+    // after-send `--navi-reset` asks the form to empty itself.
+    uiStateController.readOnlyWithoutRun = Boolean(readOnlyBase);
     // Read-only, and what this control opens still opens: reading what is in
     // there changes nothing. Read by READONLY_CONSTRAINT, which lets an
     // interaction that only reads through on it.
@@ -46556,10 +46565,10 @@ const useInteractiveProps = (props, {
     });
   }
   // controlHostProps is a curated subset of props with resolved values applied
-  // (e.g. readOnly resolved from context + action loading). The interaction system
-  // reads off uiStateController.controlHostProps at runtime (e.g. READONLY_CONSTRAINT
-  // checks controlHostProps.readOnly), so pointing the controller at controlHostProps
-  // keeps those reads current without any extra bookkeeping.
+  // (e.g. readOnly resolved from context + action loading). The constraints
+  // read off uiStateController.controlHostProps at runtime (e.g. DISABLED_CONSTRAINT,
+  // the readonly reason), so pointing the controller at controlHostProps keeps
+  // those reads current without any extra bookkeeping.
   const firstRender = uiStateController.controlHostProps === undefined;
   uiStateController.controlHostProps = controlHostProps;
   // The action itself, not just what the last render made of it: its running
@@ -55616,14 +55625,34 @@ const ButtonConfirm = ({
   }
   return jsxs("span", {
     className: "navi_button_confirm",
-    ref: askingRef,
+    ref: askingRef
+    // A place for the focus, so a press anywhere in the question keeps it
+    // inside: WebKit does not focus a pressed button, and a press on
+    // "Confirmer" would otherwise blur toward <body> — a focusout with no
+    // relatedTarget, read below as the person leaving. The callout answers
+    // the same ambiguity the same way.
+    ,
+    tabIndex: -1
+    // "not me, unless you have nothing else": the ladder in the effect above
+    // walks past the question to what it holds.
+    // eslint-disable-next-line react/no-unknown-property
+    ,
+    "navi-autofocus": "last-resort",
     onKeyDown: e => {
       if (e.key === "Escape") {
         cancel(true);
       }
     },
     onFocusOut: e => {
-      if (!askingRef.current.contains(e.relatedTarget)) {
+      // Chrome also fires this from the question's own removal, once preact
+      // has cleared the ref: nobody left, and cancel(false) would undo the
+      // focus the answer gives back. That focus cannot go back before the
+      // removal: the button it lands on is mounted by the same commit.
+      const askingEl = askingRef.current;
+      if (!askingEl) {
+        return;
+      }
+      if (!askingEl.contains(e.relatedTarget)) {
         cancel(false);
       }
     },
@@ -73247,7 +73276,7 @@ const css$x = /* css */`@property --list-group-label-height {
   }
 }
 
-.navi_list[navi-box-flow="grid"] > .navi_list_virtual_filler, .navi_list[navi-box-flow="grid"] > .navi_separator {
+.navi_list[navi-box-flow="grid"] > .navi_list_virtual_filler, .navi_list[navi-box-flow="grid"] > .navi_list_failed_items, .navi_list[navi-box-flow="grid"] > .navi_separator {
   grid-column: 1 / -1;
 }
 
@@ -73624,7 +73653,8 @@ const ListUI = props => {
     listId: rest.id,
     scroller,
     searchText,
-    horizontal
+    horizontal,
+    columns
   });
 
   // renderBudget frames the items of a run; a list whose items are all declared
@@ -73939,7 +73969,8 @@ const useListScrollSync = ({
   listId,
   scroller,
   searchText,
-  horizontal
+  horizontal,
+  columns
 }) => {
   const debugScroll = useDebugScroll();
   // The items drawn, [start, end) among the list's own. A ref as well as a
@@ -73954,6 +73985,7 @@ const useListScrollSync = ({
     return renderWindow.start > 0 || renderWindow.end < listItems.totalSignal.peek();
   };
   const virtualItemSizeSignal = useVirtualItemSizeSignal(ref, virtualItemSize, horizontal, {
+    inLines: Boolean(columns),
     windowLeavesItemsOut,
     scrolledWanted: scrolled ?? defaultScrolled,
     // The fillers hold the room of items above the screen at this size: a
@@ -74022,6 +74054,34 @@ const useListScrollSync = ({
     });
   };
 
+  // How many items share a line: the tracks a grid of items (`columns`)
+  // resolves to, one otherwise. A layout result under auto-fill, so it is read
+  // off the list once laid out, at each commit and each resize — for the runs
+  // alone, which draw in lines: items declared one by one are all drawn. A
+  // line of another length rewraps every item drawn: the item at the top of
+  // the view is held where it is across it.
+  const itemsPerLineRef = useRef(1);
+  const [itemsPerLine, setItemsPerLine] = useState(1);
+  const updateItemsPerLine = () => {
+    if (!ref.current) {
+      return;
+    }
+    const itemsPerLineNow = columns && listItems.hasRuns() ? readItemsPerLine(getListEl()) : 1;
+    if (itemsPerLineNow === null || itemsPerLineNow === itemsPerLineRef.current) {
+      return;
+    }
+    captureAnchor();
+    itemsPerLineRef.current = itemsPerLineNow;
+    setItemsPerLine(itemsPerLineNow);
+  };
+  const updateItemsPerLineRef = useRef(null);
+  updateItemsPerLineRef.current = updateItemsPerLine;
+  useLayoutEffect(() => {
+    if (columns || itemsPerLineRef.current !== 1) {
+      updateItemsPerLine();
+    }
+  });
+
   // What the window holds goes through three stages (see settleWindow):
   // - "first": the first commit, a count of items since nothing is laid out
   //   yet to measure a size with — `initial` or the budget when they are one,
@@ -74423,6 +74483,7 @@ const useListScrollSync = ({
           listEl: getListEl(),
           listItems,
           virtualItemSizeSignal,
+          itemsPerLine: itemsPerLineRef.current,
           renderWindowRef,
           horizontal
         });
@@ -74763,20 +74824,14 @@ const useListScrollSync = ({
     }
     const scrollerEl = getScroller();
     const listEl = getListEl();
-    const observer = new ResizeObserver(entries => {
-      // A box that grows may be a box that starts to scroll — the scroller is
-      // resolved again before anything is done about the resize, so that a
-      // list which has outgrown a bounded ancestor stops holding on to the
-      // page.
-      resolveScroller();
-      rememberPosition();
-      // Two things resize here, and they call for opposite answers. The LIST
-      // growing is its own content settling: only a list holding itself
-      // somewhere cares (the end it aims at has moved), and a list the user is
-      // reading must not be touched — its items are held still by the anchoring,
-      // which this would undo. The SCROLLER resizing is the window around it
-      // changing shape, and then the item that was at the top goes back where it
-      // was.
+    // Two things resize here, and they call for opposite answers. The LIST
+    // growing is its own content settling: only a list holding itself
+    // somewhere cares (the end it aims at has moved), and a list the user is
+    // reading must not be touched — its items are held still by the anchoring,
+    // which this would undo. The SCROLLER resizing is the window around it
+    // changing shape, and then the item that was at the top goes back where it
+    // was.
+    const putTopItemBack = entries => {
       const listResized = entries.some(entry => entry.target === listEl);
       if (listResized && onGeometryChangeRef.current()) {
         return;
@@ -74805,6 +74860,19 @@ const useListScrollSync = ({
       } else {
         scrollerEl.scrollTop += delta;
       }
+    };
+    const observer = new ResizeObserver(entries => {
+      // A box that grows may be a box that starts to scroll — the scroller is
+      // resolved again before anything is done about the resize, so that a
+      // list which has outgrown a bounded ancestor stops holding on to the
+      // page.
+      resolveScroller();
+      rememberPosition();
+      putTopItemBack(entries);
+      // Once the top item is back where it was: that is the place a line of
+      // another length has to keep, and putting it back drops any anchor
+      // captured before.
+      updateItemsPerLineRef.current();
     });
     observer.observe(scrollerEl);
     observer.observe(listEl);
@@ -74960,7 +75028,10 @@ const useListScrollSync = ({
       start,
       end
     } = renderWindowRef.current;
-    const itemSize = virtualItemSizeSignal.peek();
+    // What an item not drawn weighs: its share of a line, which the items side
+    // by side on it take together.
+    const itemsPerLineNow = itemsPerLineRef.current;
+    const itemSize = virtualItemSizeSignal.peek() / itemsPerLineNow;
     const pixelsOf = createItemSizeReader(items, start, end, itemSize);
     const walkBefore = (from, sizeWanted, sizeOf) => {
       let index = from;
@@ -75028,10 +75099,10 @@ const useListScrollSync = ({
     const behindSize = countsItems ? Math.floor(spare / 4) : spare / 4;
     const aheadSize = spare - behindSize;
     if (stage === "steady" && !budgetWarnedRef.current && bandEnd > bandStart) {
-      const twoItems = countsItems ? 2 : 2 * (bandTo - bandFrom) / (bandEnd - bandStart);
-      if (spare < twoItems) {
+      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 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.`);
+        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.`);
       }
     }
     if (!force) {
@@ -75237,9 +75308,28 @@ const useListScrollSync = ({
       ifChanged: true
     });
   }, [windowStart, windowEnd]);
+  // What the runs draw: the window widened to whole lines. The window itself
+  // moves an item at a time, and a grid lays the first item drawn in its first
+  // column — started anywhere but on a line, every item drawn would sit in the
+  // column of another. Started on one, an item is in the column its place says
+  // whatever the window frames. The same object while the numbers hold, so the
+  // runs are not told about a window that did not move.
+  const windowDrawnRef = useRef(null);
+  const drawnStart = windowStart - windowStart % itemsPerLine;
+  const endPastLine = windowEnd % itemsPerLine;
+  const drawnEnd = endPastLine === 0 ? windowEnd : windowEnd + itemsPerLine - endPastLine;
+  let windowDrawn = windowDrawnRef.current;
+  if (!windowDrawn || windowDrawn.start !== drawnStart || windowDrawn.end !== drawnEnd || windowDrawn.itemsPerLine !== itemsPerLine) {
+    windowDrawn = {
+      start: drawnStart,
+      end: drawnEnd,
+      itemsPerLine
+    };
+    windowDrawnRef.current = windowDrawn;
+  }
   return {
     virtualItemSizeSignal,
-    renderWindow: renderWindowRef.current,
+    renderWindow: windowDrawn,
     pendingScrollRef,
     scrollToItem,
     captureAnchor
@@ -75263,6 +75353,21 @@ const getScrollerViewportRect = scrollerEl => {
   }
   return scrollerEl.getBoundingClientRect();
 };
+// The tracks a grid resolved its template to, as its computed
+// grid-template-columns lists them once laid out: "150px 150px [end] 150px".
+// Not laid out (a closed popup), that is the template as written, which says
+// nothing yet under auto-fill: `null`.
+const readItemsPerLine = listEl => {
+  const tracks = getComputedStyle(listEl).gridTemplateColumns;
+  if (tracks === "none" || tracks.includes("(")) {
+    return null;
+  }
+  const sizes = tracks.replace(/\[[^\]]*\]/g, " ").trim();
+  if (!sizes) {
+    return null;
+  }
+  return sizes.split(/\s+/).length;
+};
 // A window that cannot move is the one failure of a virtualized list that
 // looks like nothing: the items outside it are fillers holding their room, so
 // the list simply ends on blank space, at exactly the height of the items never
@@ -76150,6 +76255,7 @@ const getScrollInfo = ({
   listEl,
   listItems,
   virtualItemSizeSignal,
+  itemsPerLine,
   renderWindowRef,
   horizontal
 }) => {
@@ -76187,7 +76293,9 @@ const getScrollInfo = ({
   // mean we don't know the real on-screen index, only the scroll position,
   // so estimate from it rather than assume nothing changed.
   const estimateFromScrollPos = reasonPrefix => {
-    const virtualItemSize = virtualItemSizeSignal.peek();
+    // An item's share of its line: the items side by side on it take it
+    // together.
+    const virtualItemSize = virtualItemSizeSignal.peek() / itemsPerLine;
     if (virtualItemSize === 0) {
       return null;
     }
@@ -76243,8 +76351,10 @@ const getScrollInfo = ({
 const VIRTUAL_ITEM_SIZE_EPSILON = 0.5;
 // Measures the items currently in the DOM, edge to edge: what a filler stands in
 // for is the room a run of items takes together — separators and group labels
-// included — not the height of one <li>.
-const measureItemSize = (listEl, horizontal) => {
+// included — not the height of one <li>. The size of a line of them: one item
+// in a list, the items side by side in a grid (`inLines`), counted where a new
+// line starts.
+const measureItemSize = (listEl, horizontal, inLines) => {
   let fromSkeletons = false;
   let itemEls = listEl.querySelectorAll(REAL_LIST_ITEM_SELECTOR);
   if (itemEls.length === 0) {
@@ -76266,13 +76376,27 @@ const measureItemSize = (listEl, horizontal) => {
   if (span <= 0) {
     return null;
   }
+  let lineCount = itemEls.length;
+  if (inLines) {
+    lineCount = 0;
+    let lineFrom = -Infinity;
+    for (const itemEl of itemEls) {
+      const rect = itemEl.getBoundingClientRect();
+      const from = horizontal ? rect.left : rect.top;
+      if (from > lineFrom + 0.5) {
+        lineCount++;
+        lineFrom = from;
+      }
+    }
+  }
   return {
-    size: span / itemEls.length,
-    itemCount: itemEls.length,
+    size: span / lineCount,
+    lineCount,
     fromSkeletons
   };
 };
 const useVirtualItemSizeSignal = (ref, virtualItemSizeProp = 0, horizontal, {
+  inLines,
   windowLeavesItemsOut,
   scrolledWanted,
   beforeSizeChange
@@ -76316,8 +76440,8 @@ const useVirtualItemSizeSignal = (ref, virtualItemSizeProp = 0, horizontal, {
         return;
       }
     }
-    samples.sum += measure.size * measure.itemCount;
-    samples.count += measure.itemCount;
+    samples.sum += measure.size * measure.lineCount;
+    samples.count += measure.lineCount;
     const next = samples.sum / samples.count;
     const current = virtualSizeSignal.peek();
     if (Math.abs(next - current) > VIRTUAL_ITEM_SIZE_EPSILON) {
@@ -76337,7 +76461,7 @@ const useVirtualItemSizeSignal = (ref, virtualItemSizeProp = 0, horizontal, {
   const itemsHeldOffScreen = windowLeavesItemsOut();
   if (!virtualItemSizeProp && sizeAlreadyKnown && itemsHeldOffScreen && ref.current) {
     const listEl = ref.current.querySelector(".navi_list");
-    const measure = listEl ? measureItemSize(listEl, horizontal) : null;
+    const measure = listEl ? measureItemSize(listEl, horizontal, inLines) : null;
     if (measure) {
       feedSample(measure);
     }
@@ -76358,11 +76482,11 @@ const useVirtualItemSizeSignal = (ref, virtualItemSizeProp = 0, horizontal, {
     if (!listEl) {
       return undefined;
     }
-    const measure = measureItemSize(listEl, horizontal);
+    const measure = measureItemSize(listEl, horizontal, inLines);
     if (measure) {
       const samples = samplesRef.current;
-      samples.sum = measure.size * measure.itemCount;
-      samples.count = measure.itemCount;
+      samples.sum = measure.size * measure.lineCount;
+      samples.count = measure.lineCount;
       samples.fromSkeletons = measure.fromSkeletons;
       virtualSizeSignal.value = measure.size;
       return undefined;
@@ -76507,14 +76631,17 @@ const Fallback = ({
 // Reads the item size itself: it is what the size is for, and a run holding
 // every item it draws must not be redrawn — every item of it — because the size
 // settled after the first commit.
+// It holds lines: the items side by side on one take its room together, and a
+// last line left short takes it all the same.
 const VirtualFiller = ({
   edge,
   itemCount,
+  itemsPerLine,
   findChunks
 }) => {
   const listItems = useContext(ListItemsContext);
-  const virtualItemSize = listItems.virtualItemSizeSignal.value;
-  const sizeToFill = itemCount * virtualItemSize;
+  const lineSize = listItems.virtualItemSizeSignal.value;
+  const sizeToFill = Math.ceil(itemCount / itemsPerLine) * lineSize;
   // A filler resizing moves what stands below it — the items on screen, when it
   // holds the room of items above them — and it resizes in a commit of its own
   // when the item size settles after the list has rendered: the list puts its
@@ -76533,7 +76660,7 @@ const VirtualFiller = ({
     "aria-hidden": true,
     style: {
       "--size-to-fill": `${sizeToFill}px`,
-      "--x-find-line-size": findChunks ? `${virtualItemSize}px` : undefined
+      "--x-find-line-size": findChunks ? `${lineSize / itemsPerLine}px` : undefined
     },
     children: findChunks && findChunks.map(chunk => jsx("div", {
       className: "navi_list_find_stand_in",
@@ -77416,6 +77543,9 @@ const useRunItems = (store, {
   const rankOf = itemIndex => itemIndex - runStart;
   const indexOfRank = rank => rank + runStart;
   const getItemAt = itemIndex => store.getItem(rankOf(itemIndex));
+  const {
+    itemsPerLine
+  } = renderWindow;
   const windowFrom = renderWindow.start > runStart ? renderWindow.start : runStart;
   const windowTo = renderWindow.end < runEnd ? renderWindow.end : runEnd;
   store.forget(rankOf(windowFrom), rankOf(windowTo));
@@ -77523,8 +77653,20 @@ const useRunItems = (store, {
   // band is drawn among the items. A negative start is not a rank but a count
   // back from the end (the very first ask, before the count is known) — there
   // is no item to convert it to, and the band falls back to the window.
-  const failureFrom = store.failure === null ? -1 : store.failure.start < 0 || indexOfRank(store.failure.start) < windowFrom ? windowFrom : indexOfRank(store.failure.start);
-  const failureTo = store.failure === null ? -1 : store.failure.end < 0 || indexOfRank(store.failure.end) > windowTo - 1 ? windowTo - 1 : indexOfRank(store.failure.end);
+  let failureFrom = store.failure === null ? -1 : store.failure.start < 0 || indexOfRank(store.failure.start) < windowFrom ? windowFrom : indexOfRank(store.failure.start);
+  let failureTo = store.failure === null ? -1 : store.failure.end < 0 || indexOfRank(store.failure.end) > windowTo - 1 ? windowTo - 1 : indexOfRank(store.failure.end);
+  if (store.failure !== null && itemsPerLine > 1) {
+    // In a grid the band takes whole lines, like the window: begun mid-line,
+    // it would push every item after it into another column.
+    failureFrom -= failureFrom % itemsPerLine;
+    if (failureFrom < windowFrom) {
+      failureFrom = windowFrom;
+    }
+    failureTo += itemsPerLine - 1 - failureTo % itemsPerLine;
+    if (failureTo > windowTo - 1) {
+      failureTo = windowTo - 1;
+    }
+  }
   const nodes = [];
   // Items that belong together, as the data says (a day of messages, a month of
   // games): consecutive items sharing a group key are wrapped in one group, so
@@ -77532,19 +77674,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();
@@ -77601,6 +77781,7 @@ const useRunItems = (store, {
     nodes.push(jsx(VirtualFiller, {
       edge: "before",
       itemCount: windowFrom - runStart,
+      itemsPerLine: itemsPerLine,
       findChunks: getFindChunks(runStart, windowFrom)
     }, "navi-list-filler-before"));
   }
@@ -77615,7 +77796,7 @@ const useRunItems = (store, {
       nodes.push(jsx("li", {
         className: "navi_list_failed_items",
         style: {
-          "--size-to-fill": `${failedItemCount * listItems.virtualItemSizeSignal.value}px`
+          "--size-to-fill": `${Math.ceil(failedItemCount / itemsPerLine) * listItems.virtualItemSizeSignal.value}px`
         },
         children: renderError ? renderError({
           error: store.failure.error,
@@ -77705,6 +77886,7 @@ const useRunItems = (store, {
     nodes.push(jsx(VirtualFiller, {
       edge: "after",
       itemCount: runEnd - windowTo,
+      itemsPerLine: itemsPerLine,
       findChunks: getFindChunks(windowTo, runEnd)
     }, "navi-list-filler-after"));
   }
@@ -77879,10 +78061,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
@@ -77893,7 +78080,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
@@ -77926,11 +78113,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;
@@ -78003,9 +78185,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);
           }
         }
       }
@@ -78040,10 +78224,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.
@@ -78060,18 +78258,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;
@@ -78125,7 +78341,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;
         }
@@ -78146,11 +78363,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;
         }
@@ -78186,7 +78403,6 @@ const useItemStore = ({
             request.revalidating = false;
             setFailure(null);
             if (revalidating) {
-              staleRef.current = false;
               setRefreshing(false);
             }
             publishRequestState();
@@ -78205,15 +78421,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;
@@ -78223,7 +78459,7 @@ const useItemStore = ({
             itemsAction.writeComposition({
               byIndex: pages.byIndex,
               count: pageCount,
-              replace: revalidating
+              replace: dropped
             });
           }
           listItems.pagesSignal.value = listItems.pagesSignal.peek() + 1;
@@ -78238,9 +78474,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;
           }
@@ -78437,12 +78678,16 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  * @param {string} [props.columns]
  *   The list's own columns: a `grid-template-columns` value the ITEMS are laid
  *   into — a sheet of icons (`repeat(auto-fill, minmax(2.5rem, 1fr))`), a row of
- *   choices (`repeat(3, minmax(0, 1fr))`). Each item takes one cell, and an item
- *   meant to take a whole line says so for itself
- *   (`style={{ gridColumn: "1 / -1" }}`). Several items to a line is a shape the
- *   list cannot virtualize — its render window and the room it holds for the
- *   items it does not draw both count one item per line — so it is for a set of
- *   items the caller renders whole, not for a `<List.Items>` collection.
+ *   choices (`repeat(3, minmax(0, 1fr))`), a feed of covers
+ *   (`repeat(auto-fill, minmax(150px, 1fr))` over a `<List.Items>`). Each item
+ *   takes one cell, and an item meant to take a whole line says so for itself
+ *   (`style={{ gridColumn: "1 / -1" }}`). A `<List.Items>` run is drawn in whole
+ *   lines — as many items to a line as the template resolves to, read again
+ *   when the list's width changes: its window starts and ends on a line, so an
+ *   item is always in the column its place says, and the fillers hold the room
+ *   of the lines it does not draw (`virtualItemSize` is then a line's size).
+ *   That count holds only while every item of the run takes one cell: an item
+ *   spanning a line, or a `groupBy`, puts the ones after it in other columns.
  * @param {string} [props.itemColumns]
  *   The columns inside an ITEM: a `grid-template-columns` value each item fills
  *   with its own children, a table whose cells line up down the list. Every item
@@ -78458,8 +78703,9 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   scroll box, which fills it and has nothing to arrange.
  * @param {boolean} [props.flexWrap]
  *   Lets a horizontal list's items fall to the next line instead of running
- *   past the edge — a row of choices under a `maxWidth`, say. Same caveat as
- *   `columns` above: a line holding several items is not virtualizable.
+ *   past the edge — a row of choices under a `maxWidth`, say. A wrapped line
+ *   holding several items is not virtualizable: a long collection laid several
+ *   to a line goes in `columns`.
  * @param {string} [props.overflow]
  *   `"visible"` lets the items paint outside the list — a check in an item's
  *   corner, a badge crossing the edge. A list clips by default, which is what
@@ -78578,7 +78824,8 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   one-line size) — an item guessed too small builds one more, an item
  *   guessed too big leaves a blank (see docs/scroll.md, "What the list knows,
  *   and what it guesses"). The items drawn are measured either way: the render
- *   window is sized on them.
+ *   window is sized on them. In a grid (`columns`), the size is a line's: a
+ *   card's, which the items side by side on it share.
  * @param {"self"|"parent"|"document"|Element|{current: Element}} [props.scroller="self"]
  *   Which box scrolls — and with it, which box the render window follows and
  *   which box a scroll position is read from (`onScrolledChange`). `"self"`