@jsenv/navi 0.29.436 → 0.29.438

package/dist/dev/jsenv_navi.js

@@ -2975,6 +2975,41 @@ const setActionPrivateProperties = (action, properties) => {
   actionPrivatePropertiesWeakMap.set(action, properties);
 };
 
+/*
+ * Where an action that declares no provisionalValue of its own finds one: the
+ * value the page kept from the previous document, for a route action that is
+ * not a resource read (see keepPageOnScreen in nav/page_kept.js). routeAction
+ * adds the source when it binds the action; a run asks for it at its start,
+ * like it asks provisionalValue (actions.js).
+ *
+ * A registry beside actions.js rather than an import of the kept reads: those
+ * know about stores and params keys, which import actions.js.
+ */
+
+const keptValueSourcesWeakMap = new WeakMap();
+const addKeptValueSource = (rootAction, source) => {
+  let sources = keptValueSourcesWeakMap.get(rootAction);
+  if (!sources) {
+    sources = [];
+    keptValueSourcesWeakMap.set(rootAction, sources);
+  }
+  sources.push(source);
+};
+const takeKeptValue = (action, params) => {
+  const rootAction = action.rootAction || action;
+  const sources = keptValueSourcesWeakMap.get(rootAction);
+  if (!sources) {
+    return undefined;
+  }
+  for (const source of sources) {
+    const value = source(params);
+    if (value !== undefined) {
+      return value;
+    }
+  }
+  return undefined;
+};
+
 /*
  * Actions: async callbacks wrapped in reactive state.
  *
@@ -3696,8 +3731,11 @@ const actionWeakMap = new WeakMap();
  *   than a first load (data_states.md). Called at the start of every run whose
  *   value is undefined; the answer replaces it as usual, and `undefined` means
  *   "nothing known". A resource `GET` uses it to draw the row its store holds.
- *   An action declaring it is asked for it by a binding moving to new params,
- *   rather than handed the previous params' answer (see inheritData).
+ * @param {boolean} [rootOptions.inheritData=true] - `false`: a binding moving
+ *   to new params starts the new instance without the previous params' answer
+ *   (see createActionProxyFromSignal). For an answer that would say something
+ *   false about the new params (a `GET` drawing another row), not for one that
+ *   stands in while the next one comes (a list of search results).
  * @param {{ ms?: number, max?: number }} [rootOptions.keep] - how long an
  *   answer stays good once it has landed. Without it an answer lives exactly as
  *   long as something references it: the screen that asked goes away, and
@@ -3740,6 +3778,7 @@ const createAction = (callback, rootOptions = {}) => {
       resultToValue,
       valueToData,
       provisionalValue,
+      inheritData = true,
       dataDefault,
       data = dataDefault,
 
@@ -4206,8 +4245,12 @@ const createAction = (callback, rootOptions = {}) => {
         actionAbortMap.set(action, abort);
 
         batch(() => {
-          if (provisionalValue && valueSignal.peek() === undefined) {
-            const provisional = provisionalValue(params, action);
+          if (valueSignal.peek() === undefined) {
+            // An action saying nothing of its own may still have a value the
+            // page kept from the previous document (see kept_values.js).
+            const provisional = provisionalValue
+              ? provisionalValue(params, action)
+              : takeKeptValue(action, params);
             if (provisional !== undefined) {
               valueSignal.value = provisional;
             }
@@ -4416,6 +4459,7 @@ const createAction = (callback, rootOptions = {}) => {
       const privateProperties = {
         valueInitial,
         provisionalValue,
+        inheritData,
 
         performRun,
         performReset,
@@ -4448,7 +4492,7 @@ const createAction = (callback, rootOptions = {}) => {
  *   a list of filters changes, providing real-time results without user interaction.
  * @param {boolean} options.inheritData - When false, each new target action starts fresh with no inherited state.
  *   By default (true), the proxy carries over the previous target's value and error into the new action —
- *   unless the action declares a `provisionalValue`, which then says what the new one holds.
+ *   unless the action itself declares `inheritData: false` (createAction), which a resource `GET` does.
  *   This keeps the facade in sync with the latest known data: `action.dataSignal.value` only changes when a
  *   new action completes, not when it starts loading. Code that needs to distinguish loading state can still
  *   check `action.runningState`, while code that just reads `action.data` always sees the most recent
@@ -4495,12 +4539,12 @@ const createActionProxyFromSignal = (
   let currentActionPrivateProperties = getActionPrivateProperties(action);
   let actionTargetPreviousWeakRef = null;
 
-  // An action saying for itself what it holds for params it has not answered
-  // (provisionalValue: a resource GET draws the row its store holds) is not
-  // handed the previous params' answer — an answer about another row. What it
-  // does not know stays unknown: a skeleton, never a different row.
+  // An action whose answer for other params would be false for these (a
+  // resource GET: another row) says so itself, and is not handed it. What it
+  // does not know stays unknown: a skeleton, or its provisionalValue, never a
+  // different row.
   const inheritsAnswer =
-    inheritData && !getActionPrivateProperties(action).provisionalValue;
+    inheritData && getActionPrivateProperties(action).inheritData;
   const createTarget = (params) => {
     if (inheritsAnswer) {
       const previousActionTarget = actionTargetPreviousWeakRef?.deref();
@@ -10651,6 +10695,9 @@ const paramsTargetCanPlace = (redirectRoute, urlParams) => {
 
 let setupRoutesCalled = false;
 let activeRouteSet = null;
+// True once the routes have been matched against an address. Before that, no
+// route matching says nothing about the page: nothing has been asked yet.
+const routedSignal = signal(false);
 
 const routePreloadMap = new WeakMap();
 const registerRoutePreload = (route, preload) => {
@@ -11075,6 +11122,7 @@ This prevents cross-test pollution and ensures clean state.`,
       }
       // Reset flag after URL -> Signal synchronization is complete
       isUpdatingRoutesFromUrl = false;
+      routedSignal.value = true;
       Object.assign(returnValue, { matchingRouteSet });
       for (const [route, repairedParams] of repairedParamsByRoute) {
         route.replaceParams(repairedParams, {
@@ -11124,6 +11172,7 @@ This prevents cross-test pollution and ensures clean state.`,
     droppingRouteSet = null;
     setupRoutesCalled = false;
     activeRouteSet = null;
+    routedSignal.value = false;
   };
   return {
     updateRoutes,
@@ -15628,6 +15677,13 @@ const createOpenController = (
     change();
   };
   const runChange = (change, { opened, event }) => {
+    // What the controller answers about itself is the decision, written before
+    // the change runs, whatever runs it. Whoever asks meanwhile reads it: the
+    // render an opening forces (onOpen, mountContent) reads the open state
+    // the caller holds, and an onOpen writing the popup's own `signal` has
+    // useOpenPropsEffectOnOpenController asking for this very opening — a
+    // second one, nested in the first, if `opened` still said closed.
+    controller.opened = opened;
     const applyChange = () => {
       // Recorded with the change itself: what the DOM shows is what a render
       // landing between the ask and the picture must draw (see `openedInDom`).
@@ -15643,12 +15699,8 @@ const createOpenController = (
       applyChange();
       return;
     }
-    // What the controller answers about itself does not wait for the picture:
-    // whoever just asked reads `opened` on the spot (see
-    // useOpenPropsEffectOnOpenController, which writes it back into the
-    // caller's own signal), and a request arriving before the change lands
-    // runs it first rather than reading a DOM that disagrees.
-    controller.opened = opened;
+    // A request arriving before the change lands runs it first rather than
+    // reading a DOM that disagrees.
     changeAwaitingTransition = applyChange;
     transitionChange(
       () => {
@@ -15661,7 +15713,6 @@ const createOpenController = (
   };
 
   const performClose = (closeEvent) => {
-    controller.opened = false;
     // Read before any close effect touches the DOM: closing a native <dialog>
     // hands the focus back to whatever held it at showModal() time, so by the
     // time the close cleanup runs, the popup's content has already lost the
@@ -15929,7 +15980,6 @@ const createOpenController = (
           // told it opened right after (see popup_content_mount.js and
           // use_displayed_layout_effect.js).
           controller.openedInDom = true;
-          controller.opened = true;
           // Which press it opened during, so the release of that press is not
           // read as somebody dismissing it (see openedDuringThisPress).
           controller.pressCountAtOpen = pressCount;
@@ -16374,8 +16424,10 @@ const useOpenPropsEffectOnOpenController = (
       return undefined;
     }
     // Skip when the controller is already in the desired state.
-    // openController.opened tracks actual open/close (updated by onopen/onclose,
-    // not by renders) so it is the authoritative check against feedback loops.
+    // openController.opened is what the controller decided, written before an
+    // opening renders anything (see runChange), so it is the authoritative
+    // check against feedback loops — the popup's own onOpen writing its
+    // `signal` included.
     if (open === openController.opened) {
       return undefined;
     }
@@ -26725,6 +26777,172 @@ const isOwnerReadBy = (childResource, childAction, ownerGetAction) => {
   return childStore !== undefined && childStore === getChildStore(ownerId);
 };
 
+/*
+ * What a previous document kept of the page it was on (see keepPageOnScreen in
+ * nav/page_kept.js), waiting for the reads that draw it again, and what those
+ * reads are made of on the way out: rows with their relations inline.
+ *
+ * A kept read is found by the read's name and the params it was asked with
+ * (getKeptReadKey). It is handed out once: the first run of the read draws it
+ * while its request is out, and from then on the store holds the rows. Handed
+ * out again, after a reset say, it would write the previous document's rows
+ * over a fresher answer.
+ *
+ * This module is the half the reads see: `resource()` and the range reader
+ * take from it and say which of their reads are kept as rows, routeAction takes
+ * from it for any other action (through action/kept_values.js). Which reads are
+ * on the page on screen, and what the slot is written into, is page_kept.js.
+ */
+
+// key → what the read answered in the previous document, not handed out yet
+const offeredReadMap = new Map();
+const offerKeptReads = (entryMap) => {
+  offeredReadMap.clear();
+  for (const [key, entry] of entryMap) {
+    offeredReadMap.set(key, entry);
+  }
+};
+const withdrawKeptReads = () => {
+  offeredReadMap.clear();
+};
+const takeKeptRead = (key) => {
+  const entry = offeredReadMap.get(key);
+  if (entry === undefined) {
+    return undefined;
+  }
+  offeredReadMap.delete(key);
+  return entry;
+};
+
+// The root actions whose answer is rows of a store: a resource's GET and
+// GET_MANY. They are kept as rows, since their value (ids) names rows a new
+// document's store does not hold. Any other route action is kept by its value
+// (see page_kept.js).
+const keepableReadWeakSet = new WeakSet();
+const markKeepableRead = (rootAction) => {
+  keepableReadWeakSet.add(rootAction);
+};
+const isKeepableRead = (action) => {
+  const rootAction = action.rootAction || action;
+  return keepableReadWeakSet.has(rootAction);
+};
+
+// The range readers a <List.Items> on screen reads through, each with the number
+// of lists reading it: the reads of the page a route action does not cover.
+const shownRangeReadersSignal = signal(new Map());
+const showRangeReader = (reader) => {
+  const shownMap = new Map(shownRangeReadersSignal.peek());
+  shownMap.set(reader, (shownMap.get(reader) || 0) + 1);
+  shownRangeReadersSignal.value = shownMap;
+  return () => {
+    const shownMapNow = new Map(shownRangeReadersSignal.peek());
+    const count = shownMapNow.get(reader);
+    if (count === 1) {
+      shownMapNow.delete(reader);
+    } else {
+      shownMapNow.set(reader, count - 1);
+    }
+    shownRangeReadersSignal.value = shownMapNow;
+  };
+};
+
+// A row already in the store is the fresher one: the kept copy only stands in
+// for rows nothing has answered yet. Its relations are written as they were
+// kept, which a real answer corrects like any other.
+const upsertKeptItem = (store, keptItem) => {
+  const id = keptItem[store.idKey];
+  if (id !== undefined) {
+    const existing = store.select(id);
+    if (existing) {
+      return existing;
+    }
+  }
+  return store.upsert(keptItem);
+};
+
+const getKeptReadKey = (name, params) => {
+  return `${name}|${getParamsKey(params)}`;
+};
+// `true` is what a route action without params is bound to (see routeAction),
+// and a key holding undefined says nothing a missing one does not.
+const getParamsKey = (params) => {
+  if (params === undefined || params === NO_PARAMS || params === true) {
+    return "";
+  }
+  if (isPlainParams(params)) {
+    const keys = Object.keys(params).filter((key) => params[key] !== undefined);
+    if (keys.length === 0) {
+      return "";
+    }
+  }
+  return stableStringify(params);
+};
+const isPlainParams = (value) => {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+};
+const stableStringify = (value) => {
+  if (value === null || typeof value !== "object") {
+    return JSON.stringify(value);
+  }
+  if (Array.isArray(value)) {
+    return `[${value.map(stableStringify).join(",")}]`;
+  }
+  const keys = Object.keys(value)
+    .filter((key) => value[key] !== undefined)
+    .sort();
+  const parts = [];
+  for (const key of keys) {
+    parts.push(`${JSON.stringify(key)}:${stableStringify(value[key])}`);
+  }
+  return `{${parts.join(",")}}`;
+};
+
+// What a read's data is made of, ready to be written: a row, or the rows of a
+// list, each with its relations inline.
+const serializeData = (data) => {
+  if (Array.isArray(data)) {
+    return data.map((item) => serializeItem(item, new Set()));
+  }
+  return serializeItem(data, new Set());
+};
+// The item with its relations inline: a relation value stands for what its
+// signal holds (the child row, the child rows, or nothing), a row reached
+// twice on the same path is written as its id — the setters accept both.
+const serializeItem = (item, ancestorSet) => {
+  ancestorSet.add(item);
+  const serialized = {};
+  for (const key of Object.keys(item)) {
+    serialized[key] = serializeValue(item[key], ancestorSet);
+  }
+  ancestorSet.delete(item);
+  return serialized;
+};
+const serializeValue = (value, ancestorSet) => {
+  if (value === null || typeof value !== "object") {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value.map((entry) => serializeValue(entry, ancestorSet));
+  }
+  const objectSignal = value[SYMBOL_OBJECT_SIGNAL];
+  if (objectSignal) {
+    const held = objectSignal.value;
+    if (held === undefined || held === null) {
+      return null;
+    }
+    return serializeValue(held, ancestorSet);
+  }
+  if (typeof value.toJSON === "function") {
+    return value;
+  }
+  if (ancestorSet.has(value)) {
+    return Object.hasOwn(value, SYMBOL_IDENTITY)
+      ? value[SYMBOL_IDENTITY]
+      : null;
+  }
+  return serializeItem(value, ancestorSet);
+};
+
 const paramScopeWeakSet = createIterableWeakSet();
 let paramScopeIdCounter = 0;
 const getParamScope = (params) => {
@@ -26895,66 +27113,6 @@ const createResourcePersistence = (
   };
 };
 
-const getParamsKey = (params) => {
-  if (params === undefined || params === NO_PARAMS) {
-    return "";
-  }
-  return stableStringify(params);
-};
-
-const stableStringify = (value) => {
-  if (value === null || typeof value !== "object") {
-    return JSON.stringify(value);
-  }
-  if (Array.isArray(value)) {
-    return `[${value.map(stableStringify).join(",")}]`;
-  }
-  const keys = Object.keys(value).sort();
-  const parts = [];
-  for (const key of keys) {
-    parts.push(`${JSON.stringify(key)}:${stableStringify(value[key])}`);
-  }
-  return `{${parts.join(",")}}`;
-};
-
-// The item with its relations inline: a relation value stands for what its
-// signal holds (the child row, the child rows, or nothing), a row reached
-// twice on the same path is written as its id — the setters accept both.
-const serializeItem = (item, ancestorSet) => {
-  ancestorSet.add(item);
-  const serialized = {};
-  for (const key of Object.keys(item)) {
-    serialized[key] = serializeValue(item[key], ancestorSet);
-  }
-  ancestorSet.delete(item);
-  return serialized;
-};
-const serializeValue = (value, ancestorSet) => {
-  if (value === null || typeof value !== "object") {
-    return value;
-  }
-  if (Array.isArray(value)) {
-    return value.map((entry) => serializeValue(entry, ancestorSet));
-  }
-  const objectSignal = value[SYMBOL_OBJECT_SIGNAL];
-  if (objectSignal) {
-    const held = objectSignal.value;
-    if (held === undefined || held === null) {
-      return null;
-    }
-    return serializeValue(held, ancestorSet);
-  }
-  if (typeof value.toJSON === "function") {
-    return value;
-  }
-  if (ancestorSet.has(value)) {
-    return Object.hasOwn(value, SYMBOL_IDENTITY)
-      ? value[SYMBOL_IDENTITY]
-      : null;
-  }
-  return serializeItem(value, ancestorSet);
-};
-
 /*
  * GET_RANGE: reading a resource one slice at a time, for a list that draws its
  * rows as it goes (`<List.Items itemsAction>`).
@@ -26991,9 +27149,23 @@ const serializeValue = (value, ancestorSet) => {
  * of what a rerun is for an action. Every reader made by `bindParams` shares
  * the signal and the compositions of the one it comes from: the params say
  * which slices are read, not which collection.
+ *
+ * A composition also outlives the document when a list on the page on screen
+ * reads it (see keepPageOnScreen): the ranks around the window it draws are
+ * written with their rows, and the first read of the next document finds them
+ * as a composition left by a list that went away — the same return, after a
+ * longer absence.
  */
 
 
+// The ranks kept of a composition for the next document: the window a list
+// draws, widened by at least one step on each side, and snapped to steps so a
+// scroll within one draws the same ranks and writes nothing.
+const KEPT_RANK_STEP = 20;
+// Counts the answers every composition took, so that one landing can be told
+// from one seen before (see readKept).
+let answerSequence = 0;
+
 const createRangeReader = (
   actionName,
   callback,
@@ -27002,6 +27174,9 @@ const createRangeReader = (
     params: boundParams,
     invalidationSignal = signal(0),
     compositionSet = new Set(),
+    // Bumped whenever what is kept of a composition for the next document
+    // changes (see readKept); shared like the compositions themselves.
+    keptVersionSignal = signal(0),
   },
 ) => {
   // Which composition this reader is about: the values its params hold, not its
@@ -27018,6 +27193,40 @@ const createRangeReader = (
     }
     return null;
   };
+  const keptKeyOf = (params) => getKeptReadKey(actionName, params);
+  const bumpKeptVersion = () => {
+    keptVersionSignal.value = keptVersionSignal.peek() + 1;
+  };
+  // The composition the previous document kept for these params, entering the
+  // store and the compositions as if a list had just left it.
+  const restoreKeptComposition = (params) => {
+    const kept = takeKeptRead(keptKeyOf(params));
+    if (!kept || typeof kept.count !== "number" || !kept.items) {
+      return null;
+    }
+    const composition = {
+      params,
+      idByIndex: new Map(),
+      count: kept.count,
+      keptFrom: undefined,
+      keptTo: undefined,
+      answeredAt: 0,
+    };
+    for (const rank of Object.keys(kept.items)) {
+      const index = Number(rank);
+      const item = upsertKeptItem(store, kept.items[rank]);
+      composition.idByIndex.set(index, item[store.idKey]);
+      if (composition.keptFrom === undefined || index < composition.keptFrom) {
+        composition.keptFrom = index;
+      }
+      if (composition.keptTo === undefined || index + 1 > composition.keptTo) {
+        composition.keptTo = index + 1;
+      }
+    }
+    compositionSet.add(composition);
+    bumpKeptVersion();
+    return composition;
+  };
   const readRange = async (range = {}) => {
     const { signal, ...rangeParams } = range;
     const paramsResolved = { ...resolveParams(boundParams), ...rangeParams };
@@ -27051,11 +27260,15 @@ const createRangeReader = (
   readRange.invalidate = () => {
     compositionSet.clear();
     invalidationSignal.value = invalidationSignal.peek() + 1;
+    bumpKeptVersion();
   };
   // The rows of a composition, drawn from the store: a rank whose row is gone
   // from the store resolves to nothing and is asked for again.
   readRange.readComposition = () => {
-    const composition = findComposition(currentParams());
+    const params = currentParams();
+    const composition = untracked(
+      () => findComposition(params) || restoreKeptComposition(params),
+    );
     if (!composition) {
       return null;
     }
@@ -27079,18 +27292,85 @@ const createRangeReader = (
     const params = currentParams();
     let composition = findComposition(params);
     if (!composition) {
-      composition = { params, idByIndex: new Map(), count };
+      composition = {
+        params,
+        idByIndex: new Map(),
+        count,
+        keptFrom: undefined,
+        keptTo: undefined,
+        answeredAt: 0,
+      };
       compositionSet.add(composition);
     } else if (replace) {
       composition.idByIndex = new Map();
     }
     composition.count = count;
+    answerSequence++;
+    composition.answeredAt = answerSequence;
     for (const [index, item] of byIndex) {
       const id = item ? item[store.idKey] : undefined;
       if (id !== undefined) {
         composition.idByIndex.set(index, id);
       }
     }
+    bumpKeptVersion();
+  };
+  // The ranks [windowFrom, windowTo) a list draws of this composition: what is
+  // kept of it for the next document is around them (see readKept).
+  readRange.frameComposition = (windowFrom, windowTo) => {
+    const composition = findComposition(currentParams());
+    if (!composition) {
+      return;
+    }
+    let keptFrom =
+      Math.floor((windowFrom - KEPT_RANK_STEP) / KEPT_RANK_STEP) *
+      KEPT_RANK_STEP;
+    if (keptFrom < 0) {
+      keptFrom = 0;
+    }
+    const keptTo =
+      Math.ceil((windowTo + KEPT_RANK_STEP) / KEPT_RANK_STEP) * KEPT_RANK_STEP;
+    if (composition.keptFrom === keptFrom && composition.keptTo === keptTo) {
+      return;
+    }
+    composition.keptFrom = keptFrom;
+    composition.keptTo = keptTo;
+    bumpKeptVersion();
+  };
+  // What a document keeps of the composition these params read, for the
+  // next one (see keepPageOnScreen): the count, and the ranks around the
+  // window last drawn with their rows inline. Read inside an effect, it
+  // follows the composition and the rows. `answeredAt` grows with every answer
+  // the composition takes (0: none in this document, restored from a kept one).
+  readRange.readKept = () => {
+    // eslint-disable-next-line no-unused-expressions
+    keptVersionSignal.value;
+    const params = resolveParams(boundParams);
+    const key = keptKeyOf(params);
+    const composition = findComposition(params);
+    if (!composition || composition.count === undefined) {
+      return { key, answeredAt: 0, readEntry: () => undefined };
+    }
+    const readEntry = () => {
+      const items = {};
+      for (const [index, id] of composition.idByIndex) {
+        if (
+          composition.keptFrom !== undefined &&
+          index < composition.keptFrom
+        ) {
+          continue;
+        }
+        if (composition.keptTo !== undefined && index >= composition.keptTo) {
+          continue;
+        }
+        const item = store.select(id);
+        if (item) {
+          items[index] = serializeItem(item, new Set());
+        }
+      }
+      return { count: composition.count, items };
+    };
+    return { key, answeredAt: composition.answeredAt, readEntry };
   };
   // The same trade a list makes with the rows it holds, applied to what is kept
   // for the next mount. Two lists on one collection each trim by their own
@@ -27101,11 +27381,16 @@ const createRangeReader = (
     if (!composition || composition.idByIndex.size <= budget) {
       return;
     }
+    let trimmed = false;
     for (const index of composition.idByIndex.keys()) {
       if (index < keepFrom || index > keepTo) {
         composition.idByIndex.delete(index);
+        trimmed = true;
       }
     }
+    if (trimmed) {
+      bumpKeptVersion();
+    }
   };
   // Memoized for the reasons an action's bindParams is (see actions.js): params
   // and the reader they make have synchronized lifetimes, and params equal in
@@ -27121,6 +27406,7 @@ const createRangeReader = (
       params: boundParams ? { ...boundParams, ...paramsToBind } : paramsToBind,
       invalidationSignal,
       compositionSet,
+      keptVersionSignal,
     });
     readerByParams.set(paramsToBind, reader);
     return reader;
@@ -28555,7 +28841,7 @@ const createRestActionFactoryForRoot = (
       `${name}.${verb}`,
       declarationSite,
     );
-    return createAction(callback, {
+    const action = createAction(callback, {
       name: `${name}.${verb}`,
       meta: { verb, isMany: false, paramScope },
       resultToValue: (result, action) => {
@@ -28591,17 +28877,33 @@ const createRestActionFactoryForRoot = (
       },
       valueToData: (itemId) => store.select(itemId),
       // While the request is out, the row the store already holds for these
-      // params is drawn: the action starts on the "refresh over a known
+      // params is drawn, or the row the page kept from the previous document
+      // (kept_reads.js): the action starts on the "refresh over a known
       // answer" line of data_states.md rather than the first-load one.
       provisionalValue:
         verb === "GET"
-          ? (params) => {
-              const item = untracked(() => findItemForGet(params));
+          ? (params, action) => {
+              const item = untracked(() => {
+                const itemForGet = findItemForGet(params);
+                if (itemForGet) {
+                  return itemForGet;
+                }
+                const keptItem = takeKeptRead(
+                  getKeptReadKey(action.name, params),
+                );
+                return keptItem ? upsertKeptItem(store, keptItem) : null;
+              });
               return item ? item[idKey] : undefined;
             }
           : undefined,
+      // Another params' answer is another row.
+      inheritData: verb !== "GET",
       completeSideEffect: onActionComplete,
     });
+    if (verb === "GET") {
+      markKeepableRead(action);
+    }
+    return action;
   };
   const createActionAffectingManyItems = (
     verb,
@@ -28616,7 +28918,7 @@ const createRestActionFactoryForRoot = (
             return itemArray.map((item) => item[idKey]);
           };
 
-    return createAction(callback, {
+    const action = createAction(callback, {
       meta: { verb, isMany: true, paramScope },
       name: `${name}.${verb}_MANY`,
       resultToValue: applyResultToValue,
@@ -28624,6 +28926,25 @@ const createRestActionFactoryForRoot = (
       // undefined so a screen can tell "not asked yet" from "answered: none".
       valueToData: (idArray) =>
         idArray === undefined ? undefined : store.selectAll(idArray),
+      // The rows the page kept from the previous document (kept_reads.js),
+      // drawn while the request is out. A binding moving to new params still
+      // hands over the previous answer when there are none: a list standing
+      // in for the next one beats a skeleton.
+      provisionalValue:
+        verb === "GET"
+          ? (params, action) =>
+              untracked(() => {
+                const keptItems = takeKeptRead(
+                  getKeptReadKey(action.name, params),
+                );
+                if (!Array.isArray(keptItems)) {
+                  return undefined;
+                }
+                return keptItems.map(
+                  (keptItem) => upsertKeptItem(store, keptItem)[idKey],
+                );
+              })
+          : undefined,
       completeSideEffect: (actionCompleted) => {
         onActionComplete(actionCompleted);
         if (
@@ -28639,6 +28960,10 @@ const createRestActionFactoryForRoot = (
         return syncIdArrayOnRename(store, idKey, actionCompleted.valueSignal);
       },
     });
+    if (verb === "GET") {
+      markKeepableRead(action);
+    }
+    return action;
   };
 
   return createActionForRoot;
@@ -28649,10 +28974,12 @@ const createRestActionFactoryForRoot = (
 // NetworkPolicyError carrying the policy's reason. A read is called or not depending
 // on where the policy answers reads from. Answered from the store, a GET of a
 // root resource completes with the row the store holds for it (see
-// findItemInStore) — handing the item back is an upsert without effect, so the
-// action completes with what it had and nothing is asked; a relationship GET
-// has no row of its own to answer with and settles with the same error. A
-// completed GET asked to rerun never gets here (actions.js holds it).
+// findItemInStore), and a root GET or GET_MANY holding rows for these params
+// (the kept page, drawn while the request is out) with those — handing them
+// back is an upsert without effect, so the action completes with what it had
+// and nothing is asked. A relationship GET has no row of its own to answer
+// with and settles with the same error. A completed GET asked to rerun never
+// gets here (actions.js holds it).
 const applyNetworkPolicy = (
   restCallback,
   { verb, isMany, findItemInStore },
@@ -28666,6 +28993,12 @@ const applyNetworkPolicy = (
       if (!policy.readsFromStore) {
         return restCallback(params, context);
       }
+      if (isKeepableRead(context.action)) {
+        const dataHeld = context.action.dataSignal.peek();
+        if (dataHeld !== undefined) {
+          return dataHeld;
+        }
+      }
       if (!isMany && findItemInStore) {
         const item = findItemInStore(params, context.action);
         if (item) {
@@ -38915,6 +39248,46 @@ const writeCover = (edge, element, size) => {
   style.setProperty(property, value);
 };
 
+// Every route action, with whether it asks something of the address at the
+// moment: its route matches and its params getter returns something.
+const routeActionEntriesSignal = signal([]);
+// What a route action is called in the page kept for the next document (see
+// keepPageOnScreen): its place among the route actions declared, which the
+// next document of the same build declares in the same order. A resource read
+// has a name of its own and is kept by it; an action made from a callback is
+// most often "anonymous", and several of them read the same page.
+const keptNameWeakMap = new WeakMap();
+const getRouteActionKeptName = (routeAction) => {
+  return keptNameWeakMap.get(routeAction);
+};
+let activeRouteActionsPrevious = new Set();
+/**
+ * The route actions asking something for the page on screen: their route
+ * matches and their params getter returns something — the running ones, not
+ * every matching one, so an action bound to every page that asks only when a
+ * popup is open over it counts while it is open. Read to rerun what the page
+ * reads (the app back from the background), and by `keepPageOnScreen`.
+ * The set is handed out again only when its members change.
+ *
+ * A page's code is declared as a route action too; `action.meta.verb` says
+ * which ones read data.
+ *
+ * @type {import("@preact/signals").ReadonlySignal<Set<object>>}
+ */
+const activeRouteActionsSignal = computed(() => {
+  const active = new Set();
+  for (const { routeAction, askingSignal } of routeActionEntriesSignal.value) {
+    if (askingSignal.value) {
+      active.add(routeAction);
+    }
+  }
+  if (haveSameMembers(active, activeRouteActionsPrevious)) {
+    return activeRouteActionsPrevious;
+  }
+  activeRouteActionsPrevious = active;
+  return active;
+});
+
 /**
  * Binds an action to a route: it runs when the route matches, with the params
  * the effect reads off the address, runs again on a `reload()`, and is aborted
@@ -38971,7 +39344,23 @@ const routeAction = (
     }
     return params;
   };
+  const rootAction = rootActionOf(action);
+  const keptName = `route_action#${routeActionEntriesSignal.peek().length} ${rootAction.name}`;
+  if (!isKeepableRead(rootAction)) {
+    // Before the effect below: it may run the action at once.
+    addKeptValueSource(rootAction, (params) =>
+      takeKeptRead(getKeptReadKey(keptName, params)),
+    );
+  }
   const actionBoundToRoute = actionRunEffect(action, readParamsAsked, options);
+  keptNameWeakMap.set(actionBoundToRoute, keptName);
+  routeActionEntriesSignal.value = [
+    ...routeActionEntriesSignal.peek(),
+    {
+      routeAction: actionBoundToRoute,
+      askingSignal: computed(() => Boolean(readParamsAsked())),
+    },
+  ];
   for (const route of routes) {
     // Asked of the route's params as they are, like the effect asks them.
     registerRouteReload(route, () =>
@@ -39055,6 +39444,416 @@ const anyMatchingRouteSignal = (routes) => {
   return anyMatchingSignal;
 };
 
+const rootActionOf = (action) => {
+  if (action.isProxy) {
+    return rootActionOf(getActionPrivateProperties(action).currentAction);
+  }
+  return action.rootAction || action;
+};
+
+const haveSameMembers = (setA, setB) => {
+  if (setA.size !== setB.size) {
+    return false;
+  }
+  for (const value of setA) {
+    if (!setB.has(value)) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/*
+ * The page on screen, kept for the next document: what its reads answered,
+ * written into a signal the app hands over, and drawn again by the same reads
+ * in a document opening on the same page (a reload, a tab the system
+ * discarded). The read side is state/rest/kept_reads.js; this is what decides
+ * which reads are the page, and when the slot is written.
+ *
+ * The unit is the page, not the resource. One resource is read by several
+ * screens — a search, someone's games, a game opened from anywhere — and kept
+ * per resource it would keep every row ever opened. The page's reads are what
+ * navi already runs for it: the route actions asking something for the page
+ * (activeRouteActionsSignal) and the compositions the lists on screen read
+ * (shownRangeReadersSignal). A search typed on the page is neither, and is not
+ * kept.
+ *
+ * What a read is made of on the way out depends on what it holds. A resource
+ * read holds ids, which name rows a new document's store does not have: its
+ * rows are written, and re-enter the store. Any other route action holds its
+ * value, written as it is when JSON brings it back as it was — a page's code
+ * (a function), a Date built by the callback, a Map, are not, and are left
+ * out. Such an action is recognized in the next document by its place among
+ * the route actions declared (see getRouteActionKeptName), not by a name the
+ * app would have to give every action made from a callback.
+ *
+ * A read is written once it has answered in this document. Before that it
+ * keeps what the previous document kept for it, never what it shows meanwhile:
+ * an answer handed over from other params (a list standing in for the next
+ * one) says nothing about these.
+ *
+ * The write waits for the page to settle and is flushed when the document is
+ * hidden. A navigation goes through pages half there — the route matched, its
+ * list not mounted yet, the page left still drawn under a transition — and
+ * each would otherwise be written out in full. Hidden is the moment the system
+ * may discard the document, so nothing is lost by waiting until then.
+ *
+ * The signal turning `undefined` from outside (sign-out) forgets the page, and
+ * nothing is written until a read lands again: written at once, the page still
+ * on screen would put back the account just left.
+ */
+
+const WRITE_DELAY = 1000;
+const NOTHING_PENDING = {};
+let stopKeepingCurrent = null;
+
+/**
+ * Keeps what the page on screen reads, so that a new document opening on it —
+ * a reload, a pull-to-refresh, a tab the system discarded in the background —
+ * draws it again while its reads go out, rather than skeletons.
+ *
+ * What the page reads is what navi runs for it: the route actions asking
+ * something for it (see `activeRouteActionsSignal`), and the `GET_RANGE`
+ * compositions the `<List.Items>` on screen read, around the window they draw.
+ * A resource read keeps its rows; any other route action keeps its value when
+ * JSON brings it back as it was. A navigation replaces the slot with the next
+ * page's reads, and the page left is dropped. In the next document, the first
+ * run of the same read with the same params draws the kept answer as its
+ * provisional value: `data` set while `loading` is `true`, the answer replacing
+ * it. Under a network policy answering reads from the store, a resource read
+ * completes with it. The copy follows the store: a `PUT` on a row rewrites it.
+ *
+ * Call it before the routes start: the first runs are the ones that look. And
+ * declare the route actions where the app starts: one that is not a resource
+ * read is recognized by its place among them.
+ *
+ * @param {object} options
+ * @param {import("@preact/signals").Signal} options.signal - where the slot is
+ *   written: a `stateSignal` with `persists: true` and `type: "object"`, its
+ *   `id` holding whatever makes a kept page unusable (the deployed version).
+ *   Writing `undefined` into it (sign-out) forgets the page, and nothing is
+ *   written again until a read lands.
+ * @param {() => boolean} [options.when] - read whenever the slot is about to be
+ *   read or written: `false` reads nothing, writes nothing, and empties the
+ *   signal (a tab viewing as someone else). A function, so it can read a signal.
+ * @param {object[]} [options.always] - routes whose reads stay kept once the
+ *   page is left, until it is visited again: the page an app opens on when it
+ *   is launched rather than reloaded.
+ * @returns {() => void} stops keeping the page.
+ * @see docs/resource.md — what is kept and what is not, what stays the app's
+ */
+const keepPageOnScreen = ({
+  signal: keptSignal,
+  when,
+  always = [],
+} = {}) => {
+  if (!isSignal(keptSignal)) {
+    throw new TypeError(
+      `keepPageOnScreen() needs a signal to write the page into, received ${keptSignal}`,
+    );
+  }
+  if (stopKeepingCurrent) {
+    stopKeepingCurrent();
+  }
+  const isAllowed = () => {
+    return when ? Boolean(when()) : true;
+  };
+  const alwaysMatchingSignal = anyMatchingRouteSignal(always);
+
+  // What the signal held when it was read: the previous document's page.
+  let loadedEntryMap = new Map();
+  let loadedAlwaysKeys = [];
+  // Which reads answered in this document (since the last forget): only
+  // those write what they show.
+  let answeredActionWeakSet = new WeakSet();
+  let answeredRangeKeySet = new Set();
+  // The state each action was last seen in, and the last answer seen of each
+  // range reader: a read lands when they move, and not because the slot looks
+  // again at something that had answered before a forget.
+  const stateSeenWeakMap = new WeakMap();
+  const answeredAtSeenWeakMap = new WeakMap();
+  // Forgotten: nothing is written until a read lands.
+  let paused = false;
+  // The reads of the always-kept page, as they were the last time it was on
+  // screen in this document; null until then.
+  let alwaysReads = null;
+
+  const forget = () => {
+    loadedEntryMap = new Map();
+    loadedAlwaysKeys = [];
+    answeredActionWeakSet = new WeakSet();
+    answeredRangeKeySet = new Set();
+    alwaysReads = null;
+    paused = true;
+    withdrawKeptReads();
+  };
+
+  let lastWritten;
+  let pendingWrite = NOTHING_PENDING;
+  let writeTimeout;
+  const flush = () => {
+    clearTimeout(writeTimeout);
+    if (pendingWrite === NOTHING_PENDING) {
+      return;
+    }
+    const value = pendingWrite;
+    pendingWrite = NOTHING_PENDING;
+    if (compareTwoJsValues(value, lastWritten)) {
+      return;
+    }
+    lastWritten = value;
+    keptSignal.value = value;
+  };
+  const scheduleWrite = (value) => {
+    pendingWrite = value;
+    clearTimeout(writeTimeout);
+    writeTimeout = setTimeout(flush, WRITE_DELAY);
+  };
+  const onVisibilityChange = () => {
+    if (document.visibilityState === "hidden") {
+      flush();
+    }
+  };
+  document.addEventListener("visibilitychange", onVisibilityChange);
+  window.addEventListener("pagehide", flush);
+
+  // Runs at once with what the signal already holds (the slot read from
+  // storage), then on every write — the slot's own ones are recognized and
+  // left alone.
+  const unsubscribe = keptSignal.subscribe((value) => {
+    if (value === lastWritten) {
+      return;
+    }
+    lastWritten = value;
+    pendingWrite = NOTHING_PENDING;
+    clearTimeout(writeTimeout);
+    if (
+      value === undefined ||
+      value === null ||
+      typeof value !== "object" ||
+      !isAllowed()
+    ) {
+      forget();
+      return;
+    }
+    const entries =
+      value.entries && typeof value.entries === "object" ? value.entries : {};
+    loadedEntryMap = new Map(Object.entries(entries));
+    loadedAlwaysKeys = Array.isArray(value.always)
+      ? value.always.filter((key) => loadedEntryMap.has(key))
+      : [];
+    alwaysReads = null;
+    paused = false;
+    offerKeptReads(loadedEntryMap);
+  });
+
+  const actionReadWeakMap = new WeakMap();
+  const actionReadOf = (action, keptName, readEntryOf) => {
+    let read = actionReadWeakMap.get(action);
+    if (read) {
+      return read;
+    }
+    read = () => {
+      const state = action.runningStateSignal.value;
+      const stateSeen = stateSeenWeakMap.get(action);
+      stateSeenWeakMap.set(action, state);
+      const landed = state === COMPLETED && stateSeen !== COMPLETED;
+      if (landed) {
+        answeredActionWeakSet.add(action);
+      }
+      return {
+        key: getKeptReadKey(keptName, action.params),
+        answered: answeredActionWeakSet.has(action),
+        landed,
+        readEntry: () => readEntryOf(action),
+      };
+    };
+    actionReadWeakMap.set(action, read);
+    return read;
+  };
+  const rangeReadWeakMap = new WeakMap();
+  const rangeReadOf = (reader) => {
+    let read = rangeReadWeakMap.get(reader);
+    if (read) {
+      return read;
+    }
+    read = () => {
+      const { key, answeredAt, readEntry } = reader.readKept();
+      const answeredAtSeen = answeredAtSeenWeakMap.get(reader) || 0;
+      answeredAtSeenWeakMap.set(reader, answeredAt);
+      const landed = answeredAt > answeredAtSeen;
+      if (landed) {
+        answeredRangeKeySet.add(key);
+      }
+      return {
+        key,
+        answered: answeredRangeKeySet.has(key),
+        landed,
+        readEntry,
+      };
+    };
+    rangeReadWeakMap.set(reader, read);
+    return read;
+  };
+  const readsOnScreen = () => {
+    const reads = [];
+    for (const routeAction of activeRouteActionsSignal.value) {
+      // The instance is what is kept, so that a page left keeps what it read.
+      // The binding's callSource names that instance and is rewritten once the
+      // binding has moved to another one: read, it brings the slot along.
+      // eslint-disable-next-line no-unused-expressions
+      routeAction.callSource;
+      const action = getActionPrivateProperties(routeAction).currentAction;
+      if (action.params === NO_PARAMS) {
+        continue;
+      }
+      if (isKeepableRead(action)) {
+        reads.push(actionReadOf(action, action.name, readRows));
+      } else {
+        reads.push(
+          actionReadOf(
+            action,
+            getRouteActionKeptName(routeAction),
+            readPlainValue,
+          ),
+        );
+      }
+    }
+    for (const reader of shownRangeReadersSignal.value.keys()) {
+      reads.push(rangeReadOf(reader));
+    }
+    return reads;
+  };
+
+  const stopEffect = effect(() => {
+    const allowed = isAllowed();
+    const routed = routedSignal.value;
+    const alwaysMatching = alwaysMatchingSignal.value;
+    if (!allowed) {
+      forget();
+      pendingWrite = undefined;
+      flush();
+      return;
+    }
+    if (!routed) {
+      // No page yet: the slot is what the first reads will draw.
+      return;
+    }
+    const screenReads = readsOnScreen();
+    if (alwaysMatching) {
+      alwaysReads = screenReads;
+    }
+    const entries = {};
+    let landed = false;
+    const collect = (reads) => {
+      const keys = [];
+      for (const read of reads) {
+        const result = read();
+        if (result.landed) {
+          landed = true;
+        }
+        const entry = result.answered
+          ? result.readEntry()
+          : loadedEntryMap.get(result.key);
+        if (entry === undefined) {
+          continue;
+        }
+        entries[result.key] = entry;
+        keys.push(result.key);
+      }
+      return keys;
+    };
+    const screenKeys = collect(screenReads);
+    let alwaysKeys;
+    if (alwaysReads === screenReads) {
+      alwaysKeys = screenKeys;
+    } else if (alwaysReads) {
+      alwaysKeys = collect(alwaysReads);
+    } else {
+      alwaysKeys = loadedAlwaysKeys;
+      for (const key of alwaysKeys) {
+        entries[key] = loadedEntryMap.get(key);
+      }
+    }
+    if (paused) {
+      if (!landed) {
+        return;
+      }
+      paused = false;
+    }
+    if (screenKeys.length === 0 && alwaysKeys.length === 0) {
+      scheduleWrite(undefined);
+      return;
+    }
+    scheduleWrite({ entries, screen: screenKeys, always: alwaysKeys });
+  });
+
+  const stop = () => {
+    flush();
+    stopEffect();
+    unsubscribe();
+    document.removeEventListener("visibilitychange", onVisibilityChange);
+    window.removeEventListener("pagehide", flush);
+    withdrawKeptReads();
+    if (stopKeepingCurrent === stop) {
+      stopKeepingCurrent = null;
+    }
+  };
+  stopKeepingCurrent = stop;
+  return stop;
+};
+
+const readRows = (action) => {
+  const data = action.dataSignal.value;
+  if (data === undefined || data === null) {
+    return undefined;
+  }
+  return serializeData(data);
+};
+const readPlainValue = (action) => {
+  const value = action.valueSignal.value;
+  if (value === undefined || !isPlainData(value, new Set())) {
+    return undefined;
+  }
+  return value;
+};
+// What JSON writes and reads back as it was. `undefined` inside is accepted:
+// JSON drops the key, which reads the same.
+const isPlainData = (value, ancestorSet) => {
+  if (value === null || value === undefined) {
+    return true;
+  }
+  const type = typeof value;
+  if (type === "string" || type === "boolean") {
+    return true;
+  }
+  if (type === "number") {
+    return Number.isFinite(value);
+  }
+  if (type !== "object") {
+    return false;
+  }
+  if (ancestorSet.has(value)) {
+    return false;
+  }
+  const isArray = Array.isArray(value);
+  if (!isArray) {
+    const proto = Object.getPrototypeOf(value);
+    if (proto !== Object.prototype && proto !== null) {
+      return false;
+    }
+  }
+  ancestorSet.add(value);
+  const entries = isArray ? value : Object.values(value);
+  for (const entry of entries) {
+    if (!isPlainData(entry, ancestorSet)) {
+      return false;
+    }
+  }
+  ancestorSet.delete(value);
+  return true;
+};
+
 /**
  * A popup that is the anchor, brought to the front.
  *
@@ -66417,7 +67216,7 @@ const css$E = /* css */`
     /* A plain div, unlike dialogEl itself (a real <dialog>, natively hidden
        by default until .show()/.showModal() adds [open]) — needs its own
        starting-hidden mechanism. [navi-hidden] is set from useDialogProps'
-       own backdropProps (recomputed from openController.opened on every
+       own backdropProps (recomputed from openController.openedInDom on every
        render, present from the very first one), then toggled by plain
        removeAttribute/setAttribute in openEffect/close, never an explicit
        display override — removing the attribute just lets this rule stop
@@ -68077,7 +68876,7 @@ const useDialogProps = props => {
     "navi-out-of-flow": "",
     "baseClassName": "navi_dialog_backdrop",
     "aria-hidden": "true",
-    // Recomputed fresh on every render from openController.opened (not
+    // Recomputed fresh on every render from openController.openedInDom (not
     // driven through a mount-time layout effect, unlike this file's own
     // imperative open/close toggling below) — present in the DOM
     // synchronously from the very first commit, matching this file's own
@@ -68087,7 +68886,7 @@ const useDialogProps = props => {
     // needs — see popover.jsx's own identical prop for the full reasoning.
     "aria-expanded": openController.openedInDom ? "true" : "false",
     // Present from this very first render (recomputed fresh on every one
-    // from openController.opened, not a frozen mount-time constant) so
+    // from openController.openedInDom, not a frozen mount-time constant) so
     // there's no gap for the browser to ever paint this plain-div backdrop
     // visible before anything has actually opened it — see popover.jsx's
     // own identical prop for the full reasoning, and this file's own CSS
@@ -68107,7 +68906,7 @@ const useDialogProps = props => {
     // (kept once, not repeated here).
     "aria-expanded": openController.openedInDom ? "true" : "false",
     // Present from the very first render (recomputed fresh from
-    // openController.opened every time, not a frozen mount-time constant —
+    // openController.openedInDom every time, not a frozen mount-time constant —
     // see popover.jsx's own identical prop for the full reasoning) so a
     // consumer whose own CSS also sets display (e.g. Popup's flex prop)
     // can't silently defeat showModal()/close()'s native open/close — see
@@ -68510,7 +69309,7 @@ const css$D = /* css */`
        without this it would flash visible for one frame on mount, before
        openEffect's own JS ever gets a chance to hide it. [navi-hidden] is
        set from usePopoverProps' own contentProps (recomputed from
-       openController.opened on every render, present from the very first
+       openController.openedInDom on every render, present from the very first
        one — see there for why), then toggled by plain
        removeAttribute/setAttribute in openEffect/close, never an explicit
        display override: removing the attribute just lets this rule stop
@@ -69875,7 +70674,7 @@ const usePopoverProps = props => {
     "navi-out-of-flow": "",
     "baseClassName": "navi_popover_backdrop",
     "aria-hidden": "true",
-    // Recomputed fresh on every render from openController.opened (not a
+    // Recomputed fresh on every render from openController.openedInDom (not a
     // frozen mount-time constant, same pattern as navi-hidden just below)
     // rather than driven through a mount-time layout effect — its own
     // actual open/close toggling is still done entirely imperatively
@@ -69950,7 +70749,7 @@ const usePopoverProps = props => {
     // starting-hidden default) — present from this very first render so
     // there's no gap for the browser to ever paint it visible before
     // anything has actually opened it. Recomputed fresh on every render from
-    // openController.opened (not a frozen mount-time constant) — Preact
+    // openController.openedInDom (not a frozen mount-time constant) — Preact
     // only touches the DOM for a prop whose value actually changed since
     // the last render, so as long as this always reflects the *current*
     // truth, it never fights the imperative
@@ -74390,7 +75189,6 @@ const ListUI = props => {
   // What the runs ask for and stand for, in items: a source paginates in items,
   // and asks for the first picture's items and the rest in one round trip.
   listItems.pageSize = PAGE_SIZE_DEFAULT;
-  listItems.scrolled = scrolled ?? defaultScrolled;
   const {
     virtualItemSizeSignal,
     renderWindow,
@@ -74769,6 +75567,45 @@ const useListScrollSync = ({
   columns
 }) => {
   const debugScroll = useDebugScroll();
+  // Where the list must be: what the caller holds it at (`scrolled`), or where
+  // it opens and then lets go (`defaultScrolled`). A `scrolled` that changes is
+  // the caller moving the list, so the hold is armed again — that is what makes
+  // it controlled. A `defaultScrolled` that changes is where the list opens,
+  // read again from something that answered again (a count fresher than the
+  // one kept from the previous visit): followed for as long as nobody has
+  // moved the list, and compared by value, since it is said at every render.
+  // Nothing to hold it at (a position not saved yet) is not a position: the
+  // list opens where it opens.
+  const startPlaceRef = useRef(null);
+  if (startPlaceRef.current === null) {
+    startPlaceRef.current = {
+      userTookOver: false,
+      wanted: scrolled ?? defaultScrolled,
+      scrolled,
+      defaultScrolled,
+      way: null,
+      arrived: false
+    };
+  } else {
+    const place = startPlaceRef.current;
+    if (place.scrolled !== scrolled) {
+      place.scrolled = scrolled;
+      place.defaultScrolled = defaultScrolled;
+      place.wanted = scrolled ?? defaultScrolled;
+      place.userTookOver = false;
+    } else if ((scrolled === undefined || scrolled === null) && !compareTwoJsValues(place.defaultScrolled, defaultScrolled)) {
+      place.defaultScrolled = defaultScrolled;
+      if (!place.userTookOver) {
+        place.wanted = defaultScrolled;
+        // Placed again from where it stands: the way to the previous place
+        // says nothing about whose the next scrolls are.
+        place.way = null;
+        place.arrived = false;
+      }
+    }
+  }
+  const scrolledWanted = startPlaceRef.current.wanted;
+  listItems.scrolled = scrolledWanted;
   // The items drawn, [start, end) among the list's own. A ref as well as a
   // state: the render moves it where the list is held (holdWindow) without a
   // commit of its own.
@@ -74783,7 +75620,7 @@ const useListScrollSync = ({
   const virtualItemSizeSignal = useVirtualItemSizeSignal(ref, virtualItemSize, horizontal, {
     inLines: Boolean(columns),
     windowLeavesItemsOut,
-    scrolledWanted: scrolled ?? defaultScrolled,
+    scrolledWanted,
     // The fillers hold the room of items above the screen at this size: a
     // size that changes moves what is on screen, like items landing above it.
     beforeSizeChange: () => listItems.captureAnchor()
@@ -75116,25 +75953,7 @@ const useListScrollSync = ({
     const newEnd = newStart + windowSize;
     updateRenderWindow(newStart, newEnd, `item to scroll (at ${index}) is out of render window`);
   };
-
-  // Where the list must be: what the caller holds it at (`scrolled`), or where
-  // it opens and then lets go (`defaultScrolled`). A `scrolled` that changes is
-  // the caller moving the list, so the hold is armed again — that is what makes
-  // it controlled.
-  // Nothing to hold it at (a position not saved yet) is not a position: the
-  // list opens where it opens.
-  const scrolledWanted = scrolled ?? defaultScrolled;
   const scrolledFallback = scrolled === undefined || scrolled === null ? "start" : defaultScrolled ?? "start";
-  const startPlaceRef = useRef({
-    userTookOver: false,
-    wanted: scrolledWanted,
-    way: null,
-    arrived: false
-  });
-  if (startPlaceRef.current.wanted !== scrolledWanted) {
-    startPlaceRef.current.wanted = scrolledWanted;
-    startPlaceRef.current.userTookOver = false;
-  }
   // Only one thing owns the scroll at a time: while the list is holding itself
   // somewhere, the anchoring stays out of it (holding an item still is precisely
   // not being at the end anymore once what is above it shrinks).
@@ -78962,6 +79781,17 @@ const useItemStore = ({
   }
   const pages = pagesRef.current;
   const [, setPageVersion] = useState(0);
+  // A list on screen is part of what the page reads: the composition it reads
+  // is kept with the page for the next document (see keepPageOnScreen).
+  useLayoutEffect(() => {
+    if (inMemory || typeof itemsAction !== "function") {
+      return undefined;
+    }
+    if (!itemsAction.isRangeReader) {
+      return undefined;
+    }
+    return showRangeReader(itemsAction);
+  }, [inMemory, itemsAction]);
   // The ranks whose item is from before: the run came back to the screen, or
   // the source said the collection moved. They stay drawn until a page confirms
   // or replaces them, rank by rank. A page covers what the window framed when it
@@ -79095,6 +79925,7 @@ const useItemStore = ({
         }
       }
       if (typeof itemsAction === "function" && itemsAction.trimComposition) {
+        itemsAction.frameComposition(windowFrom, windowTo);
         itemsAction.trimComposition(keepFrom, keepTo, budget);
       }
     },
@@ -79664,6 +80495,9 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   room has to be restated as a number by whoever asks. The `index` and
  *   `visibleCount` it also hands out say where to aim before the item is found,
  *   and how many items to draw before the first paint (see `renderBudget`).
+ *   A value that changes before anyone has moved the list is followed (a place
+ *   read from a count that answered again): it is compared by value, so it can
+ *   be computed at every render.
  * @param {"start"|"end"|number|{id: string, index?: number, offset?: number, visibleCount?: number}} [props.scrolled]
  *   The same, but held: the list goes back there every time this changes, even
  *   after the user has scrolled — the caller owns where the list is (see
@@ -95758,5 +96592,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NetworkPolicyError, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, dispatchRequestSetUIState, enableDebugActions, enableDebugOnDocumentLoading, enableVirtualKeyboardOverlay, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, getNowHours, getNowHoursRoundedToStep, isCellSelected, isColumnSelected, isNetworkPolicyError, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markAsOutsideTextFlow, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, preloadUrl, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, routeFallback, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useNetworkPolicyReason, useOrderedColumns, usePickerState, usePopupMode, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useTransitionCover, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NetworkPolicyError, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, activeRouteActionsSignal, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, dispatchRequestSetUIState, enableDebugActions, enableDebugOnDocumentLoading, enableVirtualKeyboardOverlay, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, getNowHours, getNowHoursRoundedToStep, isCellSelected, isColumnSelected, isNetworkPolicyError, isRowSelected, isScrolling, isToday, keepPageOnScreen, languagesSignal, localStorageSignal, markAsOutsideTextFlow, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, preloadUrl, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, routeFallback, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useNetworkPolicyReason, useOrderedColumns, usePickerState, usePopupMode, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useTransitionCover, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map