@jsenv/navi 0.29.426 → 0.29.427

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;
     }
 
@@ -44065,6 +44065,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 +44195,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 +46105,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 +46564,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 +55624,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 +73275,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 +73652,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 +73968,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 +73984,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 +74053,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 +74482,7 @@ const useListScrollSync = ({
           listEl: getListEl(),
           listItems,
           virtualItemSizeSignal,
+          itemsPerLine: itemsPerLineRef.current,
           renderWindowRef,
           horizontal
         });
@@ -74763,20 +74823,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 +74859,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 +75027,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 +75098,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 +75307,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 +75352,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 +76254,7 @@ const getScrollInfo = ({
   listEl,
   listItems,
   virtualItemSizeSignal,
+  itemsPerLine,
   renderWindowRef,
   horizontal
 }) => {
@@ -76187,7 +76292,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 +76350,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 +76375,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 +76439,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 +76460,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 +76481,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 +76630,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 +76659,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 +77542,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 +77652,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
@@ -77601,6 +77742,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 +77757,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 +77847,7 @@ const useRunItems = (store, {
     nodes.push(jsx(VirtualFiller, {
       edge: "after",
       itemCount: runEnd - windowTo,
+      itemsPerLine: itemsPerLine,
       findChunks: getFindChunks(windowTo, runEnd)
     }, "navi-list-filler-after"));
   }
@@ -78437,12 +78580,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 +78605,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 +78726,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"`