@jsenv/navi 0.29.425 → 0.29.427

package/dist/dev/jsenv_navi.js

@@ -7,7 +7,7 @@ import { createPubSub, elementIsFocusable, createIterableWeakSet, dispatchIntern
 export { chainEvent, clickIsSuppressed, contrastColor, createDragGestureController, dragAfterIntent, findEvent, markDragSource, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, untracked, batch, useComputed, useSignal } from "@preact/signals";
 import { options, isValidElement, createContext, render, h, toChildArray, createRef, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
-import { useErrorBoundary, useLayoutEffect, useContext, useMemo, useRef, useEffect, useCallback, useState, useReducer, useId } from "preact/hooks";
+import { useErrorBoundary, useLayoutEffect, useContext, useState, useMemo, useRef, useEffect, useCallback, useReducer, useId } from "preact/hooks";
 import { humanizeI18n, prefixFirstAndIndentRemainingLines, setRuntimeLangSource, formatDuration, formatMonth, formatDay, resolveTimeRangePrecision, formatDatePlaceholder, toDate, getRelativeDay, formatDayRelative, formatMonthPlaceholder, formatWeekPlaceholder, formatDatetimePlaceholder, formatDatetime, toTimeOfDay, formatTimeOfDay, formatTime, formatMinuteDuration, formatSecondDuration, formatHourDuration, formatTimeRelative, formatNumber, interpolateText, installInterpolateJsx } from "@jsenv/humanize";
 export { createI18n, formatDatetime, formatDay, formatDayRelative, formatDuration, formatHourDuration, formatMinuteDuration, formatMonth, formatNumber, formatSecondDuration, formatTime, formatTimeOfDay, formatTimeRange, formatTimeRelative, interpolateText } from "@jsenv/humanize";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
@@ -11240,6 +11240,179 @@ const dropGeneratedIdKeys = (state) => {
   return stateWithoutGeneratedIdKeys;
 };
 
+const FRAME_TIMEOUT_MS = 100;
+
+/**
+ * Calls back once the browser has painted what is committed now.
+ *
+ * The callbacks of the next frame run before that frame paints, so the call is
+ * made from a task queued from inside one — the same way preact schedules
+ * useEffect. Unlike an effect, nothing runs this early: preact flushes a
+ * component's pending effects as soon as that component renders again, and a
+ * re-render before the paint is exactly what a caller waiting for the paint
+ * has to survive. A frame not coming at all (a background tab) still answers,
+ * late, through the timeout.
+ *
+ * @param {() => void} callback
+ * @returns {() => void} cancel
+ */
+const afterPaint = (callback) => {
+  let called = false;
+  let timeoutId;
+  let frameId;
+  const onFrame = () => {
+    if (called) {
+      return;
+    }
+    called = true;
+    clearTimeout(timeoutId);
+    cancelAnimationFrame(frameId);
+    timeoutId = setTimeout(callback, 0);
+  };
+  timeoutId = setTimeout(onFrame, FRAME_TIMEOUT_MS);
+  frameId = requestAnimationFrame(onFrame);
+  return () => {
+    called = true;
+    clearTimeout(timeoutId);
+    cancelAnimationFrame(frameId);
+  };
+};
+
+/**
+ * Runs `fn` and commits whatever it re-renders before returning, instead of
+ * letting Preact batch it into the next microtask. Layout effects of what gets
+ * mounted run inside the call too, exactly as they would on any other commit.
+ *
+ * For the caller that has to read the DOM it just asked for — measuring an
+ * element whose content it mounts in the same breath — and cannot wait a tick
+ * to do it, because what comes after is a browser event still in flight
+ * (preventDefault, focus placement) that no longer accepts being answered late.
+ *
+ * `options.debounceRendering` is Preact's own hook for deciding *when* the
+ * render queue drains; swapping it for "right now" for the duration of the call
+ * is exactly how preact/compat implements React's flushSync. Reserve it for the
+ * case above: rendering synchronously in the middle of an event gives up the
+ * batching that makes several state changes one commit.
+ */
+const flushSyncRendering = (fn) => {
+  const debounceRenderingPrevious = options.debounceRendering;
+  options.debounceRendering = (drainRenderQueue) => {
+    drainRenderQueue();
+  };
+  try {
+    fn();
+  } finally {
+    options.debounceRendering = debounceRenderingPrevious;
+  }
+};
+
+/**
+ * The content of a `<Box mount="after-paint">`: built right after the first
+ * frame that shows the box, unless that frame would show it.
+ *
+ * The browser paints nothing until the render that builds a page has ended, and
+ * what lies below the first screen weighs in that render as much as what is on
+ * it. A box marked this way is left empty in that render, then built once the
+ * frame is painted — the page-level twin of a list's render window (see
+ * `renderBudget` in list.jsx), for a page made of sections.
+ *
+ * Which boxes lie below the screen is measured, not taken from the caller. The
+ * caller cannot know: a taller phone, a profile with nothing in its first
+ * section, and the box it marked is on screen. So each box looks where it
+ * stands in the animation callbacks of its first frame — laid out, not yet
+ * painted — and one the frame would show, or one above it, is built there:
+ * content appearing on screen is a pop-in, and content growing ABOVE what is
+ * read pushes it down. Marking too much costs a second render in that frame,
+ * never a wrong picture.
+ *
+ * The document put back where it was read is the other frame that shows it.
+ * That offset is written by navi (see scroll_restoration.js), and written into
+ * a document still missing its bottom it is clamped: the page opens higher than
+ * it was left, and the bottom arrives under a page that has already jumped. So
+ * whoever writes an arrival's offset builds first the boxes that offset shows
+ * (buildDeferredBoxesAbove), in the same task — synchronously, since what comes
+ * right after it (the offset, a route travel measuring its window) reads the
+ * layout.
+ */
+
+const deferredBoxes = new Set();
+const MountAfterPaint = ({
+  boxRef,
+  children
+}) => {
+  const [built, setBuilt] = useState(false);
+  useLayoutEffect(() => {
+    let frame;
+    let cancelAfterPaint;
+    const stopWaiting = () => {
+      deferredBoxes.delete(deferredBox);
+      cancelAnimationFrame(frame);
+      cancelAfterPaint();
+    };
+    // The first of the three that come — the offset of an arrival, the frame
+    // finding the box on screen, the paint — builds it and cancels the others.
+    const deferredBox = {
+      getElement: () => boxRef.current,
+      build: () => {
+        stopWaiting();
+        setBuilt(true);
+      }
+    };
+    deferredBoxes.add(deferredBox);
+    // Requested before afterPaint's own frame callback, so the box is looked at
+    // before that one turns the paint into a build.
+    frame = requestAnimationFrame(() => {
+      const top = readTopInWindow(boxRef.current);
+      if (top !== null && top < window.innerHeight) {
+        deferredBox.build();
+      }
+    });
+    cancelAfterPaint = afterPaint(deferredBox.build);
+    return stopWaiting;
+  }, []);
+  return built ? children : null;
+};
+
+/**
+ * Builds, now, every box still waiting whose top is above `bottom` (in the
+ * document's coordinates): what the document will show once scrolled so that
+ * `bottom` is the bottom of the screen. Boxes built push those below them
+ * further down, so the ones measured above `bottom` are all the ones that can
+ * be shown there, and a few more at worst.
+ *
+ * Renders synchronously, so it must be called outside a Preact commit: a render
+ * flushed from a layout effect runs inside the commit still walking the tree.
+ */
+const buildDeferredBoxesAbove = bottom => {
+  if (deferredBoxes.size === 0) {
+    return;
+  }
+  const toBuild = [];
+  for (const deferredBox of deferredBoxes) {
+    const top = readTopInWindow(deferredBox.getElement());
+    if (top !== null && top + window.scrollY < bottom) {
+      toBuild.push(deferredBox);
+    }
+  }
+  if (toBuild.length === 0) {
+    return;
+  }
+  flushSyncRendering(() => {
+    for (const deferredBox of toBuild) {
+      deferredBox.build();
+    }
+  });
+};
+
+// null for a box nothing draws (a closed popup, a hidden tab): no frame shows
+// it, wherever the document is.
+const readTopInWindow = element => {
+  if (!element || element.getClientRects().length === 0) {
+    return null;
+  }
+  return element.getBoundingClientRect().top;
+};
+
 /**
  * A container has put its page on screen — or as much of it as it can.
  *
@@ -11295,7 +11468,9 @@ const [publishRouteRender, observeRouteRender] = createPubSub();
  * What is NOT covered, and cannot be from here: a page whose height depends on
  * something still loading. Its content is not there at the moment it is put
  * back, so a position beyond what has arrived is clamped as before. Only the
- * page knows when it is whole.
+ * page knows when it is whole. What navi itself leaves out of a first render
+ * is the exception — a `<Box mount="after-paint">` — and is built before the
+ * offset that shows it is written (see mount_after_paint.jsx).
  *
  * WHEN a page is arrived at is not decided here either. A document navigation
  * lands where its kind says (see via_history.js), and one scrollport can be
@@ -11444,14 +11619,18 @@ const installScrollRestoration = () => {
   // What a reload asks for, now that the browser has been told not to do it.
   // Once, and at the first render of a route: the position is only meaningful
   // once there is a page under it.
+  // Written once the commit that rendered it has ended: said from inside it,
+  // and what the offset shows may still have to be built (see scrollTo).
   const positionOnLoad = positionByUrl.get(window.location.href);
   if (positionOnLoad && (positionOnLoad.x || positionOnLoad.y)) {
     const stopListening = observeRouteRender(() => {
       stopListening();
-      if (documentHoldCount) {
-        return;
-      }
-      scrollTo(positionOnLoad);
+      queueMicrotask(() => {
+        if (documentHoldCount) {
+          return;
+        }
+        scrollTo(positionOnLoad);
+      });
     });
   }
 };
@@ -11558,14 +11737,25 @@ const forgetScrollersOnArrival = (url, { from } = {}) => {
 // last read. Where this one was read, and its top when it never was — leaving
 // the offset alone would seat the reader wherever the neighbour happened to
 // be, so here "nothing recorded" and "stay" are not the same thing.
+//
+// Called outside a Preact commit only, like scrollTo: a row of tabs measures
+// its window right after, so what the top shows is built first here rather
+// than in the frame (see mount_after_paint.jsx).
 const arriveAtScrollPosition = (url) => {
   if (restoreScrollPosition(url)) {
     return;
   }
+  buildDeferredBoxesAbove(window.innerHeight);
   startAtTop(url);
 };
 
+// What the offset shows is built first: written into a document still missing
+// a deferred box, the offset is clamped (see mount_after_paint.jsx). That build
+// is a render of its own, so this is never called from inside a commit — a
+// caller that learns the page is there from a layout effect (observeRouteRender)
+// writes once that commit has ended.
 const scrollTo = ({ x, y }) => {
+  buildDeferredBoxesAbove(y + window.innerHeight);
   window.scrollTo({ top: y, left: x, behavior: "instant" });
 };
 
@@ -16691,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.
@@ -16923,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
@@ -16978,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(
@@ -19294,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 };
     }
@@ -20341,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;
     }
 
@@ -30928,6 +31118,7 @@ const PSEUDO_STATE_CHILD_PROP_SET = new Set(["tabIndex", "tabindex"]);
  *   footer?: boolean,
  *   body?: boolean,
  *   sticky?: boolean,
+ *   mount?: "always" | "after-paint",
  *   children?: import("ignore:preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
@@ -30976,6 +31167,16 @@ const PSEUDO_STATE_CHILD_PROP_SET = new Set(["tabIndex", "tabindex"]);
  *   (see docs/interactions.md). A plain box has no wiring of its own: it does
  *   nothing with `action` (that is a control's prop), so a click on it is
  *   declared here like any other interaction: `interactions={{ click: fn }}`.
+ * @param {"always"|"after-paint"} [mount="always"] When `children` are built.
+ *   `"after-paint"` leaves the box empty in the render that first mounts it and
+ *   builds them right after the first frame that shows the page, then keeps
+ *   them: for the sections of a page that lie below its first screen. navi
+ *   measures where the box stands before that frame, and one the frame would
+ *   show (or where the document is put back, on a return) is built before the
+ *   paint all the same. Until built, what is inside is not in the document:
+ *   no id there is found, no named control there is there to hear its own
+ *   `signal` (see docs/control_object.md). Only for content nothing reaches
+ *   before the first frame (see docs/scroll.md).
  */
 const Box = props => {
   const {
@@ -30983,6 +31184,7 @@ const Box = props => {
     children,
     separator,
     interactions,
+    mount,
     ...computeProps
   } = props;
   const parentBoxFlow = useContext(BoxFlowContext);
@@ -31060,6 +31262,12 @@ const Box = props => {
       children: innerChildren
     });
   }
+  if (mount === "after-paint") {
+    innerChildren = jsx(MountAfterPaint, {
+      boxRef: finalRef,
+      children: innerChildren
+    });
+  }
   return jsx(TagName, {
     ref: finalRef,
     className: innerClassName,
@@ -34630,6 +34838,13 @@ const OLD_BAND_TOP_PROPERTY = "--navi-transition-old-band-top";
 const OLD_BAND_RIGHT_PROPERTY = "--navi-transition-old-band-right";
 const OLD_BAND_BOTTOM_PROPERTY = "--navi-transition-old-band-bottom";
 const OLD_BAND_LEFT_PROPERTY = "--navi-transition-old-band-left";
+const VIEWPORT_TOP_PROPERTY = "--navi-transition-viewport-top";
+const VIEWPORT_LEFT_PROPERTY = "--navi-transition-viewport-left";
+// Worn by the root once the group is held at the window by our numbers alone
+// (see placeTransitionWindow): the group rule of each movement is written on
+// it. Read by rules on pseudo-elements only, so wearing it restyles nothing
+// the document inherits.
+const WINDOW_PLACED_ATTRIBUTE = "data-navi-transition-window-placed";
 const WINDOW_PROPERTIES = [
   WINDOW_TOP_PROPERTY,
   WINDOW_LEFT_PROPERTY,
@@ -34643,6 +34858,8 @@ const WINDOW_PROPERTIES = [
   OLD_BAND_RIGHT_PROPERTY,
   OLD_BAND_BOTTOM_PROPERTY,
   OLD_BAND_LEFT_PROPERTY,
+  VIEWPORT_TOP_PROPERTY,
+  VIEWPORT_LEFT_PROPERTY,
 ];
 
 // Whose numbers are currently published. The window belongs to the movement
@@ -34650,6 +34867,8 @@ const WINDOW_PROPERTIES = [
 // after another has replaced it must not wipe numbers the new one is standing
 // on.
 let windowOwner = null;
+// The element the box is captured as, for as long as the window is held.
+let windowElement = null;
 // Stops re-reading the arriving state's corner, when a movement is on.
 let unfollowArrivingState = null;
 
@@ -34705,6 +34924,10 @@ const holdTransitionWindow = (
   const right =
     rectBefore.right > rectAfter.right ? rectBefore.right : rectAfter.right;
   windowOwner = owner;
+  windowElement = element;
+  // Pictures of a movement this one took over from are placed by the browser
+  // until this one's own pictures exist.
+  document.documentElement.removeAttribute(WINDOW_PLACED_ATTRIBUTE);
   setTransitionValue(WINDOW_TOP_PROPERTY, `${top}px`);
   setTransitionValue(WINDOW_LEFT_PROPERTY, `${left}px`);
   setTransitionValue(WINDOW_WIDTH_PROPERTY, `${right - left}px`);
@@ -34729,6 +34952,33 @@ const holdTransitionWindow = (
   });
 };
 
+/**
+ * Called once the pictures exist — the view transition's `ready` — with the
+ * name the box was captured under. Where the viewport's corner stands in the
+ * space the pictures are drawn in is the browser's placement of the group
+ * minus our reading of the same element, both taken in this one instant; the
+ * group is held at the window with it from then on (see the top of the file).
+ * A browser that does not hand the group's placement back leaves the group
+ * where it places it, moved to the window by the arriving corner.
+ */
+const placeTransitionWindow = (owner, groupName) => {
+  if (owner !== windowOwner) {
+    return;
+  }
+  const { transform } = getComputedStyle(
+    document.documentElement,
+    `::view-transition-group(${groupName})`,
+  );
+  if (!transform || transform === "none") {
+    return;
+  }
+  const placement = new DOMMatrixReadOnly(transform);
+  const rect = windowElement.getBoundingClientRect();
+  setTransitionValue(VIEWPORT_TOP_PROPERTY, `${placement.m42 - rect.top}px`);
+  setTransitionValue(VIEWPORT_LEFT_PROPERTY, `${placement.m41 - rect.left}px`);
+  document.documentElement.setAttribute(WINDOW_PLACED_ATTRIBUTE, "");
+};
+
 // The live layout takes the box back. A discontinuity by construction — the
 // window stands at the held height, the box is at its own — and an invisible
 // one: the page arriving is fully in place, and the strip below it that the
@@ -34738,20 +34988,22 @@ const releaseTransitionWindow = (owner) => {
     return;
   }
   windowOwner = null;
+  windowElement = null;
   if (unfollowArrivingState) {
     unfollowArrivingState();
   }
+  document.documentElement.removeAttribute(WINDOW_PLACED_ATTRIBUTE);
   for (const property of WINDOW_PROPERTIES) {
     removeTransitionValue(property);
   }
 };
 
-// The arriving state's corner, re-read every frame — as often as the browser
-// refreshes the group's placement from the same element (see the top of the
-// file) — and with it the offset outside the box, which carries the window
-// and the corner of the state being left along. Requested, never awaited: the
-// first call runs inside the update callback, where a frame cannot come.
-// Written only when it moved: every write restyles the pictures.
+// The arriving state's corner, re-read every frame — as often as anything can
+// move the page arriving (see the top of the file) — and with it the offset
+// outside the box, which carries the window and the corner of the state being
+// left along. Requested, never awaited: the first call runs inside the update
+// callback, where a frame cannot come. Written only when it moved: every write
+// restyles the pictures.
 const followArrivingState = (element, rectAtHold, heldAt) => {
   if (unfollowArrivingState) {
     unfollowArrivingState();
@@ -35256,6 +35508,13 @@ const css$12 = /* css */`@property --navi-route-transition-leave {
     animation-name: none;
   }
 
+  &[data-navi-transition-window-placed]::view-transition-group(navi-route-transition) {
+    top: calc(var(--navi-transition-window-top) + var(--navi-transition-viewport-top));
+    left: calc(var(--navi-transition-window-left) +
+          var(--navi-transition-viewport-left));
+    transform: none;
+  }
+
   &::view-transition-old(navi-route-transition) {
     top: calc(var(--navi-transition-window-old-top) - var(--navi-transition-window-top));
     left: calc(var(--navi-transition-window-old-left) - var(--navi-transition-window-left));
@@ -36303,6 +36562,8 @@ const beginTransition = ({
   // the only place the silent misconfigurations show. They are all about the
   // same thing — a movement playing on pictures that are not the pages.
   const viewTransitionReady = () => {
+    // Read before anything below writes to the document.
+    placeTransitionWindow(transition, AREA_NAME);
     startTransitionFurniture(transition, {
       duration: transition.duration
     });
@@ -36814,6 +37075,13 @@ const css$11 = /* css */`.navi_route_travel {
     animation-duration: var(--navi-route-travel-duration, .3s);
     animation-name: none;
   }
+
+  &[data-navi-transition-window-placed]::view-transition-group(navi-route-travel) {
+    top: calc(var(--navi-transition-window-top) + var(--navi-transition-viewport-top));
+    left: calc(var(--navi-transition-window-left) +
+          var(--navi-transition-viewport-left));
+    transform: none;
+  }
 }
 
 :root[data-navi-route-travel-held] {
@@ -37192,6 +37460,10 @@ const RouteTravel = ({
       });
     });
     travel.viewTransition = viewTransition;
+    // Subscribed first, so it reads before the scrub below writes anything.
+    viewTransition.ready.then(() => {
+      placeTransitionWindow(travel, TRAVEL_NAME);
+    }, ignoreSkipped);
     if (scrub) {
       // Said only now: the release has to have something to let go of, and the
       // transition did not exist a line above.
@@ -37391,16 +37663,20 @@ const RouteTravel = ({
           // what makes the document tall enough to hold that offset again —
           // and the recording stays deaf until then, over the clamp the swap
           // back makes on the way. Its own deafness rather than the travel's:
-          // the travel ends here, and this outlives it by a render.
+          // the travel ends here, and this outlives it by a render. Written
+          // once the commit that says so has ended, as arriveAtScrollPosition
+          // asks.
           const resumeScrollRecording = suspendScrollRecording();
           const stopWatchingRender = observeRouteRender(() => {
             stopWatchingRender();
-            const {
-              route,
-              params
-            } = travel.fromPage;
-            arriveAtScrollPosition(route.buildUrl(params));
-            resumeScrollRecording();
+            queueMicrotask(() => {
+              const {
+                route,
+                params
+              } = travel.fromPage;
+              arriveAtScrollPosition(route.buildUrl(params));
+              resumeScrollRecording();
+            });
           });
         }
         releaseRendering();
@@ -40184,34 +40460,6 @@ registerNaviCommand("--navi-unselect", (source, event) => {
   };
 });
 
-/**
- * Runs `fn` and commits whatever it re-renders before returning, instead of
- * letting Preact batch it into the next microtask. Layout effects of what gets
- * mounted run inside the call too, exactly as they would on any other commit.
- *
- * For the caller that has to read the DOM it just asked for — measuring an
- * element whose content it mounts in the same breath — and cannot wait a tick
- * to do it, because what comes after is a browser event still in flight
- * (preventDefault, focus placement) that no longer accepts being answered late.
- *
- * `options.debounceRendering` is Preact's own hook for deciding *when* the
- * render queue drains; swapping it for "right now" for the duration of the call
- * is exactly how preact/compat implements React's flushSync. Reserve it for the
- * case above: rendering synchronously in the middle of an event gives up the
- * batching that makes several state changes one commit.
- */
-const flushSyncRendering = (fn) => {
-  const debounceRenderingPrevious = options.debounceRendering;
-  options.debounceRendering = (drainRenderQueue) => {
-    drainRenderQueue();
-  };
-  try {
-    fn();
-  } finally {
-    options.debounceRendering = debounceRenderingPrevious;
-  }
-};
-
 /**
  * When a popup builds what it holds, and when it throws it away.
  *
@@ -42534,6 +42782,65 @@ const keptOrFirstDefinedChildUIState = (children, fallbackState, kept) => {
   }
   return kept;
 };
+// The same claim, for an object: a key whose control is not there cannot be
+// contradicted by it — a slide not built yet (SlideContainer mount="near"), a
+// row scrolled out, a page parked. A key of `kept` stays until a control of
+// that name, there, says otherwise; a value put ON the group replaces the
+// whole object, which is how a key is dropped on purpose.
+const keptAndNamedChildUIStates = (children, fallbackState, kept) => {
+  const groupValues =
+    kept !== null && typeof kept === "object" && !Array.isArray(kept)
+      ? { ...kept }
+      : {};
+  return Object.assign(
+    groupValues,
+    readNamedChildUIStates(children, { warnNameless: true }),
+  );
+};
+// What the named controls among `children` say, one key each. A nameless
+// GROUP is a grouping, not a value: it exists to hold its children together
+// (a WheelGroup sharing navigation, a fieldset-ish cluster) without claiming a
+// key of its own, so what its controls say is written as if they were here.
+// Naming it is what turns the same group into one key — see ControlGroup's
+// `name`. Only what its CONTROLS say: such a grouping is handed the whole
+// object around it (see distributeChildUIState below) and keeps what they do
+// not answer for, so merged whole it would carry its siblings' keys back up,
+// stale.
+const readNamedChildUIStates = (children, { warnNameless }) => {
+  const values = {};
+  for (const child of children) {
+    const { name, emptyUIState } = child;
+    // A control holding nothing writes its own empty, not a hole: the key is in
+    // the object either way, and what is read from it keeps the shape the
+    // reader was promised (see resolveEmptyUIState).
+    const uiState =
+      child.uiState === undefined && emptyUIState !== undefined
+        ? emptyUIState
+        : child.uiState;
+    if (!name) {
+      if (isNamelessGrouping(child, uiState)) {
+        Object.assign(
+          values,
+          child.keepsUnansweredKeys
+            ? readNamedChildUIStates(child.getChildControllers(), {
+                warnNameless: false,
+              })
+            : uiState,
+        );
+        continue;
+      }
+      if (warnNameless) {
+        console.warn(
+          "A group child is missing a name property, its state won't be included in the group state",
+          child,
+        );
+      }
+      continue;
+    }
+    values[name] = uiState;
+  }
+  return values;
+};
 
 // Default aggregate/distribute implementations keyed by controlType or stateType.
 // Looked up in useUIGroupStateController to fill in omitted aggregateChildStates /
@@ -42603,37 +42910,7 @@ const GROUP_DEFAULTS = {
     childControlFilter: (child) => {
       return child.controlType !== "button" && child.controlType !== "link";
     },
-    aggregateChildStates: (children) => {
-      const groupValues = {};
-      for (const child of children) {
-        const { name, emptyUIState } = child;
-        // A control holding nothing writes its own empty, not a hole: the key
-        // is in the object either way, and what is read from it keeps the shape
-        // the reader was promised (see resolveEmptyUIState).
-        const uiState =
-          child.uiState === undefined && emptyUIState !== undefined
-            ? emptyUIState
-            : child.uiState;
-        if (!name) {
-          // A nameless GROUP is a grouping, not a value: it exists to hold its
-          // children together (a WheelGroup sharing navigation, a fieldset-ish
-          // cluster) without claiming a key of its own, so what it holds is
-          // merged in as if its children had been written here. Naming it is
-          // what turns the same group into one key — see ControlGroup's `name`.
-          if (isNamelessGrouping(child, uiState)) {
-            Object.assign(groupValues, uiState);
-            continue;
-          }
-          console.warn(
-            "A group child is missing a name property, its state won't be included in the group state",
-            child,
-          );
-          continue;
-        }
-        groupValues[name] = uiState;
-      }
-      return groupValues;
-    },
+    aggregateChildStates: keptAndNamedChildUIStates,
     distributeChildUIState: (newUIState, child) => {
       const childName = child.name;
       if (
@@ -42657,7 +42934,8 @@ const GROUP_DEFAULTS = {
         return childUIState;
       }
       // Merged in on the way up (see above), so on the way down it takes the
-      // whole object and picks out its own keys — the same value it produced.
+      // whole object: its controls pick out their own keys, and it keeps the
+      // rest for those of its controls that are not there yet.
       // Only for a child with no name of its own: the same condition the
       // aggregate applies before merging. A NAMED child holding an object (a
       // `type="object"` picker, say) answers for one key, and the object it is
@@ -43145,6 +43423,11 @@ const useUIGroupStateController = (
         // a picker filling its popup, a value prop) rather than worked out from
         // its children. What it protects is read in onChange.
         stateGivenFromAbove: hasValueProp || hasDefaultValueProp,
+        // Its value carries keys none of its controls answers for (see
+        // keptAndNamedChildUIStates): a group merging it as a nameless
+        // grouping reads its controls instead of its value.
+        keepsUnansweredKeys:
+          resolvedAggregateChildStates === keptAndNamedChildUIStates,
         uiStateSignal,
         wantRequesterButtonState,
         ref,
@@ -43782,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;
@@ -43911,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;
 
@@ -45819,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.
@@ -46273,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
@@ -53746,7 +54037,8 @@ const useExpandableContext = partName => {
  *   other three, intent on the UI part (pointer entering it, focus landing in
  *   it) builds the content ahead of the click; `"while-opened"` content is
  *   built by a press on it only, and thrown away if that press does not
- *   expand it.
+ *   expand it. Named controls in content not built are kept by the group
+ *   around them (docs/control_object.md, "A control that is not there").
  */
 const Expandable = props => {
   import.meta.css = [css$R, "@jsenv/navi/src/control/expandable/expandable.jsx"];
@@ -55332,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);
       }
     },
@@ -60837,12 +61149,19 @@ const readArea = slideElement => slideElement.getAttribute("data-slide-area") ||
  *   would bring alongside (neighbours on the map, along the axes
  *   `travelByDrag` opens, the other end of a `loop` included) — and kept from
  *   then on. For slides that are costly to build (a grid of a few hundred
- *   controls each): opening builds the slide shown and its neighbours rather
+ *   items each): opening builds the slide shown and its neighbours rather
  *   than all of them, and a jump to a far slide builds that one and none of
  *   those in between, which a travel never shows. The box is then as large as
  *   the largest slide BUILT so far (see `sizing`), so it grows as a larger one
  *   is reached: give it a size of its own when the slides differ.
  *   `<Slide mount>` says it for one slide — a heavy one among light ones.
+ *   A slide not built has no controls, and a group around the container keeps
+ *   their keys for them: what it was handed reaches them once built. What is
+ *   shared between slides is written through that group (its `signal`, a
+ *   `--navi-update` aimed at it), never into one control's own `signal`, which
+ *   nobody reads while that control is not built; and nothing validates a
+ *   field before its slide is built. See docs/control_object.md, "A control
+ *   that is not there".
  */
 const SlideContainer = ({
   layout = "row",
@@ -70926,44 +71245,6 @@ document.addEventListener(
   { capture: true, passive: true },
 );
 
-const FRAME_TIMEOUT_MS = 100;
-
-/**
- * Calls back once the browser has painted what is committed now.
- *
- * The callbacks of the next frame run before that frame paints, so the call is
- * made from a task queued from inside one — the same way preact schedules
- * useEffect. Unlike an effect, nothing runs this early: preact flushes a
- * component's pending effects as soon as that component renders again, and a
- * re-render before the paint is exactly what a caller waiting for the paint
- * has to survive. A frame not coming at all (a background tab) still answers,
- * late, through the timeout.
- *
- * @param {() => void} callback
- * @returns {() => void} cancel
- */
-const afterPaint = (callback) => {
-  let called = false;
-  let timeoutId;
-  let frameId;
-  const onFrame = () => {
-    if (called) {
-      return;
-    }
-    called = true;
-    clearTimeout(timeoutId);
-    cancelAnimationFrame(frameId);
-    timeoutId = setTimeout(callback, 0);
-  };
-  timeoutId = setTimeout(onFrame, FRAME_TIMEOUT_MS);
-  frameId = requestAnimationFrame(onFrame);
-  return () => {
-    called = true;
-    clearTimeout(timeoutId);
-    cancelAnimationFrame(frameId);
-  };
-};
-
 const LoadingDotsSvg = () => {
   return jsxs("svg", {
     viewBox: "0 0 200 200",
@@ -72994,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;
 }
 
@@ -73371,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
@@ -73686,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
@@ -73701,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
@@ -73769,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,
@@ -74170,6 +74482,7 @@ const useListScrollSync = ({
           listEl: getListEl(),
           listItems,
           virtualItemSizeSignal,
+          itemsPerLine: itemsPerLineRef.current,
           renderWindowRef,
           horizontal
         });
@@ -74510,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;
@@ -74552,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);
@@ -74707,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;
@@ -74775,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) {
@@ -74984,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
@@ -75010,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
@@ -75897,6 +76254,7 @@ const getScrollInfo = ({
   listEl,
   listItems,
   virtualItemSizeSignal,
+  itemsPerLine,
   renderWindowRef,
   horizontal
 }) => {
@@ -75934,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;
     }
@@ -75990,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) {
@@ -76013,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
@@ -76063,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) {
@@ -76084,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);
     }
@@ -76105,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;
@@ -76254,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
@@ -76280,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",
@@ -77163,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));
@@ -77270,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
@@ -77348,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"));
   }
@@ -77362,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,
@@ -77452,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"));
   }
@@ -78184,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
@@ -78205,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
@@ -78325,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"`