@jsenv/navi 0.29.43 → 0.29.45

package/dist/jsenv_navi.js

@@ -2,7 +2,7 @@
  * AI reading this file: read ../docs/AI_INSTRUCTIONS.md for context on
  * using @jsenv/navi as intended.
  */
-import { installImportMetaCssBuild, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, coarsePointerSignal } from "./jsenv_navi_side_effects.js";
+import { installImportMetaCssBuild, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, coarsePointerSignal } from "./jsenv_navi_side_effects.js";
 import { elementIsFocusable, createPubSub, dispatchInternalCustomEvent, dispatchCustomEvent, getElementSignature, findEvent, createValueEffect, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createIterableWeakSet, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, mergeTwoStyles, normalizeStyles, resolveCSSSize, hasCSSSizeUnit, resolveOklchLightness, contrastColor, closestOpenableAncestor, isAncestorOpen, observeAncestorOpenState, getAncestorOpenType, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, findBefore, findAfter, initFocusGroup, scrollIntoViewScoped, getScrollContainer, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, stringifyStyle as stringifyStyle$1 } from "@jsenv/dom";
 export { contrastColor, findEvent, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, batch, useSignal } from "@preact/signals";
@@ -17237,15 +17237,26 @@ const isSizeSpacingKey = (key) => {
 // "vvw"/"vvh" are navi's own: the *visual* viewport, which — unlike vw/dvw —
 // shrinks when the mobile virtual keyboard opens (see layout/responsive.js), so
 // they are what a popup meant to stay clear of the keyboard should use.
-const VIEWPORT_UNIT_SIGNALS = {
-  vvw: visualViewportWidthSignal,
-  vvh: visualViewportHeightSignal,
-  vw: windowWidthSignal,
-  vh: windowHeightSignal,
-  dvw: windowWidthSignal,
-  dvh: windowHeightSignal,
-};
-const VIEWPORT_LENGTH_REGEX = /^(-?\d+(?:\.\d+)?)(vvw|vvh|dvw|dvh|vw|vh)$/;
+// "appw"/"apph" are the same thing narrowed to the app's own screen: identical
+// to vvw/vvh until the app declares --navi-app-max-width, and a share of that
+// width afterwards. A gap meant to read as "a small margin" must use these —
+// 3vvw on a 1500px window is a 45px gap around a 600px app.
+// Functions rather than the signals themselves: appw/apph are not a signal to
+// read but a value to compute (a signal, then a CSS var read back). Reading the
+// signal inside still registers the same dependency for a caller doing this
+// during a render.
+const VIEWPORT_UNIT_VALUES = {
+  appw: getAppWidth,
+  apph: getAppHeight,
+  vvw: () => visualViewportWidthSignal.value,
+  vvh: () => visualViewportHeightSignal.value,
+  vw: () => windowWidthSignal.value,
+  vh: () => windowHeightSignal.value,
+  dvw: () => windowWidthSignal.value,
+  dvh: () => windowHeightSignal.value,
+};
+const VIEWPORT_LENGTH_REGEX =
+  /^(-?\d+(?:\.\d+)?)(appw|apph|vvw|vvh|dvw|dvh|vw|vh)$/;
 const resolveViewportLength = (size) => {
   if (typeof size !== "string") {
     return null;
@@ -17255,7 +17266,7 @@ const resolveViewportLength = (size) => {
     return null;
   }
   const [, amount, unit] = match;
-  return (parseFloat(amount) / 100) * VIEWPORT_UNIT_SIGNALS[unit].value;
+  return (parseFloat(amount) / 100) * VIEWPORT_UNIT_VALUES[unit]();
 };
 
 // "3cqw"/"2cqh" — a share of the container the given element lives in, the way
@@ -21546,6 +21557,564 @@ document.body.addEventListener(
   { capture: true },
 );
 
+const documentStateSignal = signal(null);
+const useDocumentState = () => {
+  return documentStateSignal.value;
+};
+const updateDocumentState = (value) => {
+  documentStateSignal.value = value;
+};
+
+/**
+ * A navigation is ABOUT to be applied — said before its very first write.
+ *
+ * Everything else a router says arrives once the change is made: a route
+ * announces that it matches, an action that it is running. That is too late for
+ * anyone who needs the page as it stands BEFORE, and the browser's view
+ * transitions are exactly that kind of reader — the picture they keep of the
+ * page being left is taken at the next frame, and a render answering a signal
+ * written a moment ago is already in the DOM by then (see route_travel.jsx).
+ *
+ * So this is the one moment where nothing has moved yet. It is published
+ * synchronously, from the top of the navigation, and whoever listens runs
+ * before the URL, the visited set, or any route has changed.
+ *
+ * The other end is published too, and for the same kind of reader: whoever
+ * held something across the change and has nobody to hand it to gets a moment
+ * to let go of it that does not depend on guessing how long the change takes.
+ */
+
+
+const [publishBeforeRouting, observeBeforeRouting] = createPubSub();
+const [publishAfterRouting, observeAfterRouting] = createPubSub();
+
+const setupBrowserIntegrationViaHistory = ({
+  applyActions,
+  applyRouting,
+  isRouting,
+}) => {
+  const { history } = window;
+
+  let globalAbortController = new AbortController();
+  const triggerGlobalAbort = (reason) => {
+    globalAbortController.abort(reason);
+    globalAbortController = new AbortController();
+  };
+
+  const dispatchActions = (params) => {
+    const { requestedResult } = applyActions({
+      globalAbortSignal: globalAbortController.signal,
+      abortSignal: new AbortController().signal,
+      ...params,
+    });
+    return requestedResult;
+  };
+  setActionDispatcher(dispatchActions);
+
+  const getDocumentState = () => {
+    return window.history.state ? { ...window.history.state } : null;
+  };
+
+  const historyStartAtStart = getDocumentState();
+  const visitedUrlSet = historyStartAtStart
+    ? new Set(historyStartAtStart.jsenv_visited_urls || [])
+    : new Set();
+
+  // Create a signal that tracks visited URLs for reactive updates
+  // Using a counter instead of the Set directly for better performance
+  // Links will check isVisited() when this signal changes
+  const visitedUrlsSignal = signal(0);
+
+  const isVisited = (url) => {
+    url = new URL(url, window.location.href).href;
+    return visitedUrlSet.has(url);
+  };
+  const markUrlAsVisited = (url) => {
+    if (visitedUrlSet.has(url)) {
+      return;
+    }
+    visitedUrlSet.add(url);
+    visitedUrlsSignal.value++;
+  };
+
+  let abortController = null;
+  const handleRoutingTask = (url, options) => {
+    // Before anything is written: the visited set, the URL and every route are
+    // about to change, and this is the last moment the page still stands as it
+    // was. And after, whichever way the change went out — so that whoever took
+    // something at the first announcement has a definite place to give it back.
+    publishBeforeRouting({ url, ...options });
+    try {
+      return applyRoutingTask(url, options);
+    } finally {
+      publishAfterRouting({ url, ...options });
+    }
+  };
+
+  const applyRoutingTask = (url, options) => {
+    const isSameUrl = url === window.location.href;
+    const {
+      reason,
+      navigationType, // "load", "reload", "replace", "push", "traverse"
+      state,
+    } = options;
+
+    if (navigationType === "push" || navigationType === "replace") {
+      markUrlAsVisited(url);
+      // undefined → inherit current state (link click, neutral navigation)
+      // null     → explicit reset (no nav-state keys carried over)
+      // {...}    → explicit state from enter()/leave(), already built from currentState
+      // When state is given it's responsability of the caller to ensure it inherits document state (or not, you want it 99% of the time)
+      let effectiveState;
+      const sharedState = {
+        jsenv_visited_urls: Array.from(visitedUrlSet),
+      };
+      if (state === undefined) {
+        effectiveState = {
+          ...(getDocumentState() || {}),
+          ...sharedState,
+        };
+      } else if (state === null) {
+        effectiveState = sharedState;
+      } else if (state) {
+        effectiveState = {
+          ...state,
+          ...sharedState,
+        };
+      }
+      if (navigationType === "push") {
+        window.history.pushState(effectiveState, null, url);
+      } else {
+        window.history.replaceState(effectiveState, null, url);
+      }
+      updateDocumentUrl(url);
+      updateDocumentState(effectiveState);
+    } else {
+      // traverse / reload: state comes from the history entry, no push/replace needed.
+      markUrlAsVisited(url);
+      updateDocumentUrl(url);
+      updateDocumentState(state);
+    }
+
+    // Skip route matching for state-only changes: push/replace to the same URL
+    // (e.g. useNavState updating document state without changing the route).
+    // Do NOT apply for "traverse" — window.location.href is already updated by
+    // the browser before the popstate handler runs, so isSameUrl is always true
+    // for back/forward navigation regardless of whether the URL actually changed.
+    if (
+      isSameUrl &&
+      (navigationType === "push" || navigationType === "replace")
+    ) {
+      return undefined;
+    }
+
+    if (abortController) {
+      abortController.abort(`navigating to ${url}`);
+    }
+    abortController = new AbortController();
+    const abortSignal = abortController.signal;
+    const { allResult, requestedResult } = applyRouting(url, {
+      globalAbortSignal: globalAbortController.signal,
+      abortSignal,
+      reason,
+      navigationType,
+      isVisited,
+      state,
+    });
+    executeWithCleanup(
+      () => allResult,
+      () => {
+        abortController = undefined;
+      },
+    );
+    return requestedResult;
+  };
+
+  // Browser event handlers
+  window.addEventListener(
+    "click",
+    (e) => {
+      if (e.button !== 0) {
+        // Ignore non-left clicks
+        return;
+      }
+      if (e.metaKey) {
+        // Ignore clicks with meta key (e.g. open in new tab)
+        return;
+      }
+      if (e.defaultPrevented) {
+        return;
+      }
+      const linkElement = e.target.closest("a");
+      if (!linkElement) {
+        return;
+      }
+      if (linkElement.hasAttribute("data-readonly")) {
+        return;
+      }
+      const href = linkElement.href;
+      const { isEmpty, isCurrent, isSameOrigin, isAnchor } =
+        getHrefTargetInfo(href);
+      if (isEmpty || !isSameOrigin) {
+        // Let link to other origins be handled by the browser
+        return;
+      }
+      if (isAnchor) {
+        // Fragment navigation belongs to the browser: it owns the indicated
+        // part of the document, and taking it over would cost `:target` and the
+        // focus handling that come with it.
+        if (isCurrent) {
+          // Except this one, which the browser answers with a scroll and
+          // nothing else: same pathname, same hash, so no event and no url
+          // change reaches whoever is waiting on the designated element.
+          rearmUrlTarget();
+        }
+        return;
+      }
+      // Nothing here declared a route, so there is nothing to route to: the
+      // page is a plain document and a link in it is a plain link. Taking it
+      // over anyway would push the url and then have nothing to show for it —
+      // the address bar moves and the page does not (see applyRouting's own
+      // "not called yet" branch, which is where that used to end up).
+      if (!isRouting()) {
+        return;
+      }
+      e.preventDefault();
+      handleRoutingTask(href, {
+        reason: `"click" on a[href="${href}"]`,
+        navigationType: "push",
+      });
+    },
+    { capture: true },
+  );
+
+  window.addEventListener(
+    "submit",
+    () => {
+      // Handle form submissions?
+      // Not needed yet
+    },
+    { capture: true },
+  );
+
+  window.addEventListener("popstate", (popstateEvent) => {
+    const url = window.location.href;
+    const state = popstateEvent.state;
+    handleRoutingTask(url, {
+      reason: `"popstate" event for ${url}`,
+      navigationType: "traverse",
+      state,
+    });
+  });
+
+  // A fragment navigation is left to the browser (see the click handler above):
+  // it owns the indicated part of the document, and taking it over would cost
+  // `:target` and the focus handling that come with it. The document url still
+  // has to follow it — nothing else here would notice that it moved.
+  window.addEventListener("hashchange", () => {
+    updateDocumentUrl(window.location.href);
+  });
+
+  const navTo = async (url, { replace, state } = {}) => {
+    handleRoutingTask(url, {
+      reason: `navTo called with "${url}"`,
+      navigationType: replace ? "replace" : "push",
+      state,
+    });
+  };
+
+  const stop = (reason = "stop called") => {
+    triggerGlobalAbort(reason);
+  };
+
+  const reload = () => {
+    const url = window.location.href;
+    const state = history.state;
+    handleRoutingTask(url, {
+      reason: "reload called",
+      navigationType: "reload",
+      state,
+    });
+  };
+
+  const navBack = () => {
+    window.history.back();
+  };
+
+  const navForward = () => {
+    window.history.forward();
+  };
+
+  const init = () => {
+    const url = window.location.href;
+    const state = history.state;
+    handleRoutingTask(url, {
+      reason: "routing initialization",
+      navigationType: "load",
+      state,
+    });
+  };
+
+  return {
+    integration: "browser_history_api",
+    init,
+    navTo,
+    stop,
+    reload,
+    navBack,
+    navForward,
+    getDocumentState,
+    isVisited,
+    visitedUrlsSignal,
+  };
+};
+
+let updateRoutes;
+
+const applyActions = (params) => {
+  const updateActionsResult = updateActions(params);
+  const { allResult, runningActionSet } = updateActionsResult;
+  const pendingTaskNameArray = [];
+  for (const runningAction of runningActionSet) {
+    pendingTaskNameArray.push(runningAction.name);
+  }
+  workingWhile(() => allResult, pendingTaskNameArray);
+  return updateActionsResult;
+};
+const applyRouting = (
+  url,
+  {
+    globalAbortSignal,
+    abortSignal,
+    // state
+    navigationType,
+    isVisited,
+    reason,
+  },
+) => {
+  if (!updateRoutes) {
+    // .init() not called yet
+    // likely because code does not uses routing at all
+    return {};
+  }
+  const {
+    loadSet,
+    reloadSet,
+    abortSignalMap,
+    routeLoadRequestedMap,
+    activeRouteSet,
+  } = updateRoutes(url, {
+    navigationType,
+    isVisited,
+    // state,
+  });
+  if (
+    (!loadSet || loadSet.size === 0) &&
+    (!reloadSet || reloadSet.size === 0)
+  ) {
+    return {
+      allResult: undefined,
+      requestedResult: undefined,
+      activeRouteSet: new Set(),
+    };
+  }
+  const updateActionsResult = updateActions({
+    globalAbortSignal,
+    abortSignal,
+    runSet: loadSet,
+    rerunSet: reloadSet,
+    abortSignalMap,
+    reason,
+    isReplace: navigationType === "replace",
+  });
+  const { allResult, runningActionSet } = updateActionsResult;
+  const pendingTaskNameArray = [];
+  for (const [route, routeAction] of routeLoadRequestedMap) {
+    if (runningActionSet.has(routeAction)) {
+      pendingTaskNameArray.push(`${route.relativeUrl} -> ${routeAction.name}`);
+    }
+  }
+  routingWhile(() => allResult, pendingTaskNameArray);
+  return { ...updateActionsResult, activeRouteSet };
+};
+
+const browserIntegration = setupBrowserIntegrationViaHistory({
+  applyActions,
+  applyRouting,
+  // Routes are declared by the consumer and registered through
+  // setOnAllRouteReady below, so "does this document route at all?" is only
+  // answerable once that has run — hence a function, read at click time rather
+  // than a value read at setup time.
+  isRouting: () => Boolean(updateRoutes),
+});
+
+setOnAllRouteReady((v) => {
+  updateRoutes = v;
+  browserIntegration.init();
+});
+setRouteIntegration(browserIntegration);
+
+const navIntegratedVia = browserIntegration.integration;
+const navTo = (target, options) => {
+  const url = new URL(target, window.location.href).href;
+  const currentUrl = documentUrlSignal.peek();
+  if (url === currentUrl) {
+    if (options?.state === undefined) {
+      return null;
+    }
+    // State-only update on same URL: skip if state is identical to current.
+    const currentState = browserIntegration.getDocumentState();
+    if (compareTwoJsValues(options.state, currentState)) {
+      return null;
+    }
+  }
+  return browserIntegration.navTo(url, options);
+};
+const stopLoad = (reason = "stopLoad() called") => {
+  const windowIsLoading = windowIsLoadingSignal.value;
+  if (windowIsLoading) {
+    window.stop();
+  }
+  const documentIsBusy = documentIsBusySignal.value;
+  if (documentIsBusy) {
+    browserIntegration.stop(reason);
+  }
+};
+const reload = browserIntegration.reload;
+const navBack = browserIntegration.navBack;
+const navForward = browserIntegration.navForward;
+const isVisited = browserIntegration.isVisited;
+const visitedUrlsSignal = browserIntegration.visitedUrlsSignal;
+browserIntegration.handleActionTask;
+
+// Preact's own useId() (see preact/hooks) returns "P<mask0>-<mask1>", where
+// the mask is derived from render order within the nearest root/async
+// boundary — stable across re-renders of the *same* mount, but not across a
+// reload (render order can differ) or even across two mounts on the same
+// page (two components hitting useId() in the same relative order get the
+// same string). Storing one of these under type: "push" bakes it into a
+// history entry: reload the page and the entry's key may now belong to a
+// completely different component (or none), silently auto-opening whatever
+// happens to render at that same position instead.
+const PREACT_GENERATED_ID_REGEX = /^P\d+-\d+/;
+const isLikelyPreactGeneratedId = (id) => PREACT_GENERATED_ID_REGEX.test(id);
+
+const NO_OP = () => {};
+const NO_ID_GIVEN = [undefined, NO_OP, NO_OP];
+const useNavStateBasic = (
+  id,
+  { debug, type = "replace", onLeave, defaultValue } = {},
+) => {
+  // Hooks must be called unconditionally — before the !id early return.
+  const state = documentStateSignal.value;
+  // Key presence is the flag — the value may be anything, including undefined.
+  const keyInState = Boolean(id && state && Object.hasOwn(state, id));
+  const onLeaveRef = useRef(onLeave);
+  onLeaveRef.current = onLeave;
+  const prevKeyInStateRef = useRef(keyInState);
+  // enteredRef tracks whether enter() was called without a matching leave() yet.
+  // It lets the effect distinguish an external disappearance (back button → fire onLeave)
+  // from a programmatic one (leave() already set it to false before the state updates).
+  const enteredRef = useRef(false);
+  useEffect(() => {
+    const prevKeyInState = prevKeyInStateRef.current;
+    prevKeyInStateRef.current = keyInState;
+    if (prevKeyInState && !keyInState && enteredRef.current) {
+      enteredRef.current = false;
+      onLeaveRef.current?.();
+    }
+  }, [keyInState]);
+
+  if (!id) {
+    return NO_ID_GIVEN;
+  }
+
+  let effectiveType = type;
+  if (type === "push" && isLikelyPreactGeneratedId(id)) {
+    effectiveType = "replace";
+  }
+
+  const currentValue = keyInState ? state[id] : defaultValue;
+
+  if (debug) {
+    console.debug(`useNavState(${id}) current value is ${currentValue}`);
+  }
+
+  // enter(value): navigate TO this state (push or replace depending on type).
+  // Calling enter() without a value stores "on" — the mere presence of the key
+  // in the document state is enough to match; the value just allows associating
+  // extra data with the entry when needed.
+  const enter = (value = "on") => {
+    enteredRef.current = true;
+    const currentStateCopy = browserIntegration.getDocumentState() || {};
+    if (Object.hasOwn(currentStateCopy, id) && currentStateCopy[id] === value) {
+      return;
+    }
+    currentStateCopy[id] = value;
+    navTo(window.location.href, {
+      replace: effectiveType !== "push",
+      state: currentStateCopy,
+    });
+  };
+
+  // leave(): navigate AWAY FROM this state (navBack in push mode, replace in replace mode).
+  // isBack: when true (cancel close in push mode), call history.back() to restore the
+  //   pre-open state — discards any in-progress edits.
+  //   When false (confirmed close), replace the pushed entry instead: preserves the
+  //   current URL state (e.g. a new picker value) while removing the popup key.
+  const leave = ({ isBack } = {}) => {
+    enteredRef.current = false;
+    const currentStateCopy = browserIntegration.getDocumentState() || {};
+    if (!Object.hasOwn(currentStateCopy, id)) {
+      return;
+    }
+    if (effectiveType === "push" && isBack) {
+      browserIntegration.navBack();
+    } else {
+      delete currentStateCopy[id];
+      navTo(window.location.href, {
+        replace: true,
+        state: currentStateCopy,
+      });
+    }
+  };
+
+  return [currentValue, enter, leave];
+};
+
+/**
+ * Stores a named value in the browser's document state and returns it reactively.
+ * The component re-renders whenever the value changes (navigation, back/forward button).
+ *
+ * @param {string} id
+ *   Unique key used to store the value in document state. Must be stable across renders.
+ *
+ * @param {object} [options]
+ * @param {"push"|"replace"} [options.type="replace"]
+ *   Controls how enter() adds the state to browser history.
+ *   - "push": creates a new history entry — pressing the back button removes it and calls onLeave.
+ *   - "replace": updates the current history entry — no extra history entry is created.
+ *   Silently downgraded to "replace" (with a dev-only console.warn) when `id`
+ *   looks auto-generated (e.g. preact's own useId()) — an unstable id baked
+ *   into a pushed history entry won't survive a reload correctly, and could
+ *   even collide with a different component's own auto-generated id. Pass a
+ *   stable, explicit id to actually get "push" behavior.
+ * @param {() => void} [options.onLeave]
+ *   Called when the state key disappears **externally** — e.g. the user presses the browser
+ *   back button. Not called when leave() is invoked programmatically.
+ * @param {*} [options.defaultValue]
+ *   Value returned when `id` is absent from document state. Defaults to `undefined`.
+ *
+ * @returns {[value, enter, leave]}
+ *   - `value`: current value from document state, or `defaultValue` when the key is absent.
+ *   - `enter(value = "on")`: navigate TO this state (stores `value` under `id`).
+ *     Calling without an argument stores `"on"` — the presence of the key is enough to match;
+ *     the value allows associating extra data when needed.
+ *   - `leave()`: navigate AWAY FROM this state (removes `id` from document state,
+ *     or goes back in history when `type` is "push").
+ */
+const useNavState = useNavStateBasic;
+
 /**
  * @param {Element} element The element asking — the command's source, and the
  *   anchor a popup opens on unless `anchor` says otherwise.
@@ -21953,15 +22522,21 @@ registerNaviCommand("--navi-send", (source, event) => {
           requester = firstButtonSubmitting;
         }
       }
-      // Read here rather than above: it depends on the requester, which is only
-      // known now — Enter in a field sends through the first submit button, and
-      // what follows the send is that button's answer.
-      const afterSend = resolveAfterSend(target, requester);
       // Nothing is committed when a constraint fails, so nothing is decided
       // and the popup must stay open — with the form still in front of the
       // user, showing what it is waiting for.
       let invalid = false;
+      // What follows the send is read at the moment it runs, never before it:
+      // it depends on the requester (Enter in a field sends through the first
+      // submit button, and what follows is that button's answer), and on
+      // anything the send itself decided — an action that learned where to go
+      // from the response writes it on the form while it runs
+      // (data-after-send), and this is what picks it up.
       const runAfterSend = () => {
+        const afterSend = resolveAfterSend(target, requester);
+        if (!afterSend) {
+          return;
+        }
         triggerNaviCommand(source, afterSend, event, { optional: true });
       };
       const {
@@ -21996,7 +22571,7 @@ registerNaviCommand("--navi-send", (source, event) => {
           requester,
         }),
       );
-      if (sent === false || invalid || !afterSend) {
+      if (sent === false || invalid) {
         return sent;
       }
       if (isRunning) {
@@ -22188,6 +22763,30 @@ registerNaviCommand("--navi-back", (source, event) => {
   };
 });
 
+// Where a press takes the user. The destination is the command's argument
+// because it says WHAT the command does — "--navi-nav-to:/games/42" — which is how
+// it can also be what follows a form submission: the form has answered its
+// question, and the answer to "what now" is a page.
+//
+// A destination fixed at the call site, so it is for a page known before the
+// send — which is what a form needs, since it must also know where to go when
+// the press had nothing to send. A destination the response decides (a
+// creation, whose id comes back with it) is the action's own business: it
+// navigates itself.
+registerNaviCommand("--navi-nav-to", (source, event, { argument }) => {
+  if (!argument) {
+    console.warn(
+      `[navi] "--navi-nav-to" needs a destination: --navi-nav-to:/the/url (relative to the current page, or absolute).`,
+    );
+    return undefined;
+  }
+  const target = resolveExplicitTarget(source) || source;
+  return {
+    target,
+    implementation: () => navTo(argument),
+  };
+});
+
 registerNaviCommand("--navi-toggle", (source, event, { anchor } = {}) => {
   const target =
     resolveExplicitTarget(source) || resolveClosestExpandable(source);
@@ -23758,9 +24357,9 @@ const useUIGroupStateController = (
   const delegatedChildrenRef = useRef(new Map());
 
   const groupIsRenderingRef = useRef(false);
-  const pendingChangeRef = useRef(false);
+  const pendingChangeRef = useRef(null);
   groupIsRenderingRef.current = true;
-  pendingChangeRef.current = false;
+  pendingChangeRef.current = null;
 
   const isMonitoringChild = (childUIStateController) => {
     if (childUIStateController.isProxy) return false;
@@ -23792,7 +24391,18 @@ const useUIGroupStateController = (
       // signals/pubsub without needing external refs.
       const onChange = (e, { notifyExternal }) => {
         if (groupIsRenderingRef.current) {
-          pendingChangeRef.current = true;
+          // Held until the layout effect below, WITH what it asked for: a child
+          // whose bound signal was written from the outside changes during the
+          // render that follows, and replaying that as a mount sync is what
+          // makes a group silently drift — its own state comes up to date while
+          // the form around it is never told anything moved. A real change
+          // deferred alongside a mount sync stays a real change.
+          const pendingChange = pendingChangeRef.current;
+          pendingChangeRef.current = {
+            e,
+            notifyExternal:
+              pendingChange?.notifyExternal === true ? true : notifyExternal,
+          };
           return;
         }
         const aggChildState = resolvedAggregateChildStates(
@@ -24256,12 +24866,17 @@ const useUIGroupStateController = (
 
   useLayoutEffect(() => {
     groupIsRenderingRef.current = false;
-    if (pendingChangeRef.current) {
-      pendingChangeRef.current = false;
-      scope._onChange(
-        new CustomEvent(`${controlType}_batched_ui_state_update`),
-        { notifyExternal: "silent" },
+    const pendingChange = pendingChangeRef.current;
+    if (pendingChange) {
+      pendingChangeRef.current = null;
+      const batchedEvent = new CustomEvent(
+        `${controlType}_batched_ui_state_update`,
+        { detail: {} },
       );
+      chainEvent(batchedEvent, pendingChange.e);
+      scope._onChange(batchedEvent, {
+        notifyExternal: pendingChange.notifyExternal,
+      });
     }
   });
 
@@ -24322,20 +24937,6 @@ const useUIFacadeStateController = (props, realUIStateController) => {
           // not be treated as the picker's synced child.
           return false;
         }
-        if (props.type === "form" && childController.controlType !== "form") {
-          // Only a form: what a type="form" picker syncs with is the form in
-          // its popup, not any control that happens to be in there (an input
-          // sitting outside the form, a ControlGroup — which is a way of
-          // grouping controls INSIDE a form, not a thing a picker talks to).
-          return false;
-        }
-        if (
-          props.type === "array" &&
-          childController.controlType !== "checkbox_group"
-        ) {
-          // only selectable list expose array, ignore others
-          return false;
-        }
         return true;
       };
 
@@ -24355,7 +24956,7 @@ const useUIFacadeStateController = (props, realUIStateController) => {
               `[navi] a second control ("${childType}"${child.name ? ` name="${child.name}"` : ""}) registered in the ${describePicker(props)} popup. ` +
                 `A picker talks to ONE control: the first one receives the picker's whole value and is the only one read back, ` +
                 `so this one is neither filled nor collected. ` +
-                `A popup holding several values needs one group around them — wrap them in a <ControlGroup>, name each control inside it, and give the picker type="form".`,
+                `A popup holding several values needs one group around them — wrap them in a <ControlGroup>, name each control inside it, and give the picker type="object".`,
               child,
             );
           } else {
@@ -28217,15 +28818,26 @@ const css$V = /* css */`
 
          Capping the *size* here rather than only offsetting the position is
          what makes a centered dialog follow the mobile virtual keyboard for
-         free: --navi-vvw/--navi-vvh track the visual viewport, so the browser
-         reflows the dialog itself as the keyboard opens. */
-      --x-dialog-container-spacing: 3vvw;
-
+         free: --navi-app-width/--navi-app-height track the visual viewport, so
+         the browser reflows the dialog itself as the keyboard opens.
+
+         A share of the app's own screen, not of the window (hence
+         --navi-app-width rather than 3vvw): the gap must read as a small
+         margin around the dialog, and 3% of a 1500px window is a 45px gap
+         around a 600px app. Identical to 3vvw until the app declares
+         --navi-app-max-width. */
+      --x-dialog-container-spacing: calc(0.03 * var(--navi-app-width));
+
+      /* --navi-app-width, not --navi-vvw: a top-layer dialog is calibrated on
+         the app's own screen, which is the viewport unless the app declared a
+         narrower one (see navi_css_vars.js). An app-width cap alone never
+         costs the gap below — it is subtracted from whichever of the two ends
+         up smaller. */
       --dialog-maxmax-width: calc(
-        var(--navi-vvw) - 2 * var(--x-dialog-container-spacing)
+        var(--navi-app-width) - 2 * var(--x-dialog-container-spacing)
       );
       --dialog-maxmax-height: calc(
-        var(--navi-vvh) - 2 * var(--x-dialog-container-spacing)
+        var(--navi-app-height) - 2 * var(--x-dialog-container-spacing)
       );
 
       --dialog-border-radius: var(--navi-popup-border-radius);
@@ -28584,13 +29196,15 @@ const css$V = /* css */`
  *   touch device.
  * @param {boolean} [props.expandY] - Same, vertically
  *   (`--dialog-maxmax-height`).
- * @param {string|number} [props.marginWithContainer="3vvw"] - Minimum gap kept
+ * @param {string|number} [props.marginWithContainer="3appw"] - Minimum gap kept
  *   between the dialog and the edges of its container, whatever its
  *   `positionArea`: it both caps the dialog's own size (via
  *   `--x-dialog-container-spacing`, written from this prop) and offsets a docked
  *   one from the edge it docks to. Accepts a spacing token ("s", "m"…), a
- *   number of pixels, or a viewport length — "vvw"/"vvh" being the visual
- *   viewport, which shrinks when the mobile keyboard opens. Pass 0 for a dialog
+ *   number of pixels, or a viewport length — "appw"/"apph" being the app's own
+ *   screen (the visual viewport, or the narrower one the app declared with
+ *   --navi-app-max-width) and "vvw"/"vvh" the visual viewport itself, which
+ *   shrinks when the mobile keyboard opens. Pass 0 for a dialog
  *   meant to sit flush (a side panel).
  * @param {"close"|"cancel"|"capture"|"none"} [props.pointerInteractionOutsideEffect="close"]
  *   - `"close"` closes the dialog on an outside click. `"capture"`/`"none"`
@@ -28891,11 +29505,12 @@ const useDialogProps = props => {
   const isDocked = dockedOnTouch && coarsePointerSignal.value;
   const positionArea = positionAreaProp ?? (isDocked ? DOCKED.positionArea : "center");
   const marginWithContainer = marginWithContainerProp ?? (isDocked ? DOCKED.marginWithContainer :
-  // A share of whatever holds the dialog: the viewport for a top-layer
-  // one — where vvw is exactly "3% of the container", the container being
-  // the viewport — and the positioned ancestor for a local one, where
-  // reading 3% of the viewport gives an absurd gap inside a small box.
-  isModal ? "3vvw" : "3cqw");
+  // A share of whatever holds the dialog: the app's own screen for a
+  // top-layer one — where appw is exactly "3% of the container", the
+  // container being that screen (the viewport, unless the app declared a
+  // narrower one) — and the positioned ancestor for a local one, where
+  // reading 3% of the screen gives an absurd gap inside a small box.
+  isModal ? "3appw" : "3cqw");
   // "expand || expandX", the shorthand semantics Popup used to apply before
   // handing them over — the docked default only applies when neither was said
   const expandXUnset = expand === undefined && expandXProp === undefined;
@@ -29132,7 +29747,7 @@ const useDialogProps = props => {
         // A value only CSS could evaluate (a spacing token resolving to a var(),
         // a percentage…) — the placement below needs a real number, and letting
         // it through would put the dialog at NaN.
-        console.warn(`Dialog: marginWithContainer="${marginWithContainer}" cannot be resolved to pixels. Use a number, a viewport length ("3vvw", "2vvh") or a container length ("3cqw", "2cqh").`);
+        console.warn(`Dialog: marginWithContainer="${marginWithContainer}" cannot be resolved to pixels. Use a number, a viewport length ("3appw", "3vvw", "2vvh") or a container length ("3cqw", "2cqh").`);
         marginWithContainerInPixels = 0;
       }
       // The size caps read the same gap in CSS as the placement below applies
@@ -29559,8 +30174,10 @@ const css$U = /* css */`
          rather than a value so an outer component can bridge its own prop into
          --popover-max-height without having to restate 300px (see picker). */
       --popover-max-height-default: 300px;
-      --popover-maxmax-height: calc(0.95 * var(--navi-vvh));
-      --popover-maxmax-width: calc(0.95 * var(--navi-vvw));
+      /* --navi-app-*, not --navi-vvw/vvh: the app's own screen, which is the
+         viewport unless the app declared a narrower one (navi_css_vars.js). */
+      --popover-maxmax-height: calc(0.95 * var(--navi-app-height));
+      --popover-maxmax-width: calc(0.95 * var(--navi-app-width));
 
       --popover-box-shadow: var(--navi-popup-box-shadow);
       --popover-border-radius: var(--navi-popup-border-radius);
@@ -32346,6 +32963,12 @@ const defaultRerunOn = {
   GET: false,
   GET_MANY: ["POST"],
 };
+// What makes a range reader stale (rerunOn.GET_RANGE overrides it). DELETE is
+// in there, unlike for GET_MANY: an action holds ids and the store drops the
+// deleted one out of every list holding it, while a list reading by slices
+// holds places — the row that left takes the ones after it one rank up, and
+// only the collection knows who fills the last one.
+const defaultInvalidateRangeOn = ["POST", "DELETE"];
 
 // This handles ALL resource lifecycle logic (rerun/reset) across all resources
 const createResourceLifecycleManager = () => {
@@ -32366,6 +32989,7 @@ const createResourceLifecycleManager = () => {
       paramScope,
       uniqueKeys,
       restActionSet: new Set(),
+      rangeReaderSet: new Set(),
     });
 
     // Register dependencies
@@ -32378,6 +33002,14 @@ const createResourceLifecycleManager = () => {
       }
     }
   };
+  // Only the reader the resource exposes is registered; the ones `bindParams`
+  // makes share its signal (see resource_range_reader.js).
+  const registerRangeReader = (resourceScope, rangeReader) => {
+    const config = registeredResources.get(resourceScope);
+    if (config) {
+      config.rangeReaderSet.add(rangeReader);
+    }
+  };
   const registerAction = (resourceScope, restAction) => {
     const config = registeredResources.get(resourceScope);
     if (config) {
@@ -32608,7 +33240,39 @@ const createResourceLifecycleManager = () => {
     };
   };
 
+  // Which readers hold slices of a collection the mutation just changed: the
+  // one of the resource itself, and the ones of the resources that said they
+  // depend on it.
+  const invalidateRangeReaders = (
+    triggeringAction,
+    triggeringActionContext,
+  ) => {
+    const triggerVerb = triggeringAction.meta.verb;
+    const triggerResourceScope = triggeringActionContext.resourceScope;
+    for (const [resourceScope, config] of registeredResources) {
+      if (config.rangeReaderSet.size === 0) {
+        continue;
+      }
+      const isSameResource = resourceScope === triggerResourceScope;
+      const isDependent = Boolean(
+        triggerResourceScope &&
+        resourceDependencies.get(triggerResourceScope)?.has(resourceScope),
+      );
+      if (!isSameResource && !isDependent) {
+        continue;
+      }
+      const invalidateOn = config.rerunOn.GET_RANGE ?? defaultInvalidateRangeOn;
+      if (!shouldRerunAfter(invalidateOn, triggerVerb)) {
+        continue;
+      }
+      for (const rangeReader of config.rangeReaderSet) {
+        rangeReader.invalidate();
+      }
+    }
+  };
+
   const onActionComplete = (restActionWhoJustCompleted, restActionContext) => {
+    invalidateRangeReaders(restActionWhoJustCompleted, restActionContext);
     const { actionsToRerun, actionsToReset, reasons } = findEffectOnActions(
       restActionWhoJustCompleted,
       restActionContext,
@@ -32627,6 +33291,7 @@ const createResourceLifecycleManager = () => {
   return {
     registerResource,
     registerAction,
+    registerRangeReader,
     onActionComplete,
     // Registers: when `triggerResource` fires, rerun `dependentResource`'s actions.
     // Used by scopedMany to make the parent GET rerun when a child mutation completes.
@@ -32704,13 +33369,20 @@ const getParamScope = (params) => {
  *
  * The reader is a function, so a list feeds on it the way it feeds on any other
  * source: `itemsAction={GAME.GET_RANGE.bindParams({ radar })}`.
+ *
+ * Keeping nothing does not mean hearing nothing: a mutation that decides who
+ * belongs to the collection (a POST, a DELETE, whatever `rerunOn.GET_RANGE`
+ * says) bumps `invalidationSignal`, and whoever reads slices through it goes
+ * and asks again — the counterpart, for a reader, of what a rerun is for an
+ * action. Every reader made by `bindParams` shares the signal of the one it
+ * comes from: the params say which slices are read, not which collection.
  */
 
 
 const createRangeReader = (
   actionName,
   callback,
-  { store, params: boundParams },
+  { store, params: boundParams, invalidationSignal = signal(0) },
 ) => {
   const readRange = async (range = {}) => {
     const { signal, ...rangeParams } = range;
@@ -32739,10 +33411,17 @@ const createRangeReader = (
   };
   Object.defineProperty(readRange, "name", { value: actionName });
   readRange.isRangeReader = true;
+  // Bumped when the collection this reads has moved: the slices anyone holds
+  // stand for a composition that is gone.
+  readRange.invalidationSignal = invalidationSignal;
+  readRange.invalidate = () => {
+    invalidationSignal.value = invalidationSignal.peek() + 1;
+  };
   readRange.bindParams = (paramsToBind) => {
     return createRangeReader(actionName, callback, {
       store,
       params: boundParams ? { ...boundParams, ...paramsToBind } : paramsToBind,
+      invalidationSignal,
     });
   };
   return readRange;
@@ -32809,9 +33488,11 @@ const debug$2 = (args) => {
  * - GET_MANY / POST_MANY / … → an array of item objects
  * - GET_RANGE                 → `{ items, start, count }`, one slice of the collection
  *
- * `GET_RANGE` is a reader rather than an action: it keeps no value and takes no place in
- * the rerun graph, so a `<List.Items>` can feed on it slice by slice
- * (`itemsAction={USER.GET_RANGE.bindParams({ team })}`).
+ * `GET_RANGE` is a reader rather than an action: it keeps no value and has nothing to
+ * rerun, so a `<List.Items>` can feed on it slice by slice
+ * (`itemsAction={USER.GET_RANGE.bindParams({ team })}`). A mutation listed in
+ * `rerunOn.GET_RANGE` (`["POST", "DELETE"]` by default) tells it the collection moved,
+ * and whoever holds slices reads them again.
  *
  * A sub-resource of the backend (`/games/:id/candidates`) must be modelled with a
  * relationship method, never as an `op`/`type` discriminator dispatched inside one
@@ -33991,13 +34672,18 @@ ${originalActionName} source location: ${locationInfo}`,
       continue;
     }
     if (restCallbackKey === "GET_RANGE") {
-      // A range is read, never kept: no action, no place in the rerun graph
+      // A range is read, never kept: no action, nothing to rerun — only a
+      // signal saying the slices anyone holds are out of date
       // (see resource_range_reader.js).
       stateFacade.GET_RANGE = createRangeReader(
         `${name}.GET_RANGE`,
         restCallback,
         { store, params },
       );
+      resourceLifecycleManager.registerRangeReader(
+        stateFacade,
+        stateFacade.GET_RANGE,
+      );
       continue;
     }
     const isMany = restCallbackKey.endsWith("_MANY");
@@ -35970,701 +36656,143 @@ const UITransition = ({
   alignX,
   alignY,
   ...props
-}) => {
-  const contentIdRef = useRef(contentId);
-  const updateContentId = () => {
-    const uiTransition = uiTransitionRef.current;
-    if (!uiTransition) {
-      return;
-    }
-    const value = contentIdRef.current;
-    uiTransition.updateContentId(value);
-  };
-  const uiTransitionContentIdContextValue = useMemo(() => {
-    const set = new Set();
-    const onSetChange = () => {
-      const value = Array.from(set).join("|");
-      contentIdRef.current = value;
-      updateContentId();
-    };
-    const update = (part, newPart) => {
-      if (!set.has(part)) {
-        if (set.size === 0) {
-          console.warn(`UITransition: content id update "${part}" -> "${newPart}" ignored because content id set is empty`);
-          return;
-        }
-        console.warn(`UITransition: content id update "${part}" -> "${newPart}" ignored because content id not found in set, only got [${Array.from(set).join(", ")}]`);
-        return;
-      }
-      set.delete(part);
-      set.add(newPart);
-      onSetChange();
-    };
-    const add = part => {
-      if (!part) {
-        return;
-      }
-      if (set.has(part)) {
-        return;
-      }
-      set.add(part);
-      onSetChange();
-    };
-    const remove = part => {
-      if (!part) {
-        return;
-      }
-      if (!set.has(part)) {
-        return;
-      }
-      set.delete(part);
-      onSetChange();
-    };
-    return {
-      add,
-      update,
-      remove
-    };
-  }, []);
-  const ref = useRef();
-  const uiTransitionRefDefault = useRef();
-  uiTransitionRef = uiTransitionRef || uiTransitionRefDefault;
-  useLayoutEffect(() => {
-    const uiTransition = createUITransitionController(ref.current, {
-      alignX,
-      alignY
-    });
-    uiTransitionRef.current = uiTransition;
-    return () => {
-      uiTransition.cleanup();
-    };
-  }, [disabled, alignX, alignY]);
-  return jsxs("div", {
-    ref: ref,
-    ...props,
-    className: "ui_transition",
-    "data-disabled": disabled ? "" : undefined,
-    "data-transition-type": type,
-    "data-transition-duration": duration,
-    "data-debug-detection": debugDetection ? "" : undefined,
-    "data-debug-size": debugSize ? "" : undefined,
-    "data-debug-content": debugContent ? "" : undefined,
-    children: [jsxs("div", {
-      className: "ui_transition_active_group",
-      children: [jsx("div", {
-        className: "ui_transition_target_slot",
-        "data-content-id": contentIdRef.current ? contentIdRef.current : undefined,
-        children: jsx(UITransitionContentIdContext.Provider, {
-          value: uiTransitionContentIdContextValue,
-          children: children
-        })
-      }), jsx("div", {
-        className: "ui_transition_outgoing_slot",
-        inert: true
-      })]
-    }), jsxs("div", {
-      className: "ui_transition_previous_group",
-      inert: true,
-      children: [jsx("div", {
-        className: "ui_transition_previous_target_slot"
-      }), jsx("div", {
-        className: "ui_transition_previous_outgoing_slot"
-      })]
-    })]
-  });
-};
-
-/**
- * The goal of this hook is to allow a component to set a "content key"
- * Meaning all content within the component is identified by that key
- *
- * When the key changes, UITransition will be able to detect that and consider the content
- * as changed even if the component is still the same
- *
- * This is used by <Route> to set the content key to the route path
- * When the route becomes inactive it will call useUITransitionContentId(undefined)
- * And if a sibling route becones active it will call useUITransitionContentId with its own path
- *
- */
-const useUITransitionContentId = value => {
-  const contentId = useContext(UITransitionContentIdContext);
-  const valueRef = useRef();
-  if (contentId !== undefined && valueRef.current !== value) {
-    const previousValue = valueRef.current;
-    valueRef.current = value;
-    if (previousValue === undefined) {
-      contentId.add(value);
-    } else {
-      contentId.update(previousValue, value);
-    }
-  }
-  useLayoutEffect(() => {
-    if (contentId === undefined) {
-      return null;
-    }
-    return () => {
-      contentId.remove(valueRef.current);
-    };
-  }, []);
-};
-
-const documentStateSignal = signal(null);
-const useDocumentState = () => {
-  return documentStateSignal.value;
-};
-const updateDocumentState = (value) => {
-  documentStateSignal.value = value;
-};
-
-/**
- * A navigation is ABOUT to be applied — said before its very first write.
- *
- * Everything else a router says arrives once the change is made: a route
- * announces that it matches, an action that it is running. That is too late for
- * anyone who needs the page as it stands BEFORE, and the browser's view
- * transitions are exactly that kind of reader — the picture they keep of the
- * page being left is taken at the next frame, and a render answering a signal
- * written a moment ago is already in the DOM by then (see route_travel.jsx).
- *
- * So this is the one moment where nothing has moved yet. It is published
- * synchronously, from the top of the navigation, and whoever listens runs
- * before the URL, the visited set, or any route has changed.
- *
- * The other end is published too, and for the same kind of reader: whoever
- * held something across the change and has nobody to hand it to gets a moment
- * to let go of it that does not depend on guessing how long the change takes.
- */
-
-
-const [publishBeforeRouting, observeBeforeRouting] = createPubSub();
-const [publishAfterRouting, observeAfterRouting] = createPubSub();
-
-const setupBrowserIntegrationViaHistory = ({
-  applyActions,
-  applyRouting,
-  isRouting,
-}) => {
-  const { history } = window;
-
-  let globalAbortController = new AbortController();
-  const triggerGlobalAbort = (reason) => {
-    globalAbortController.abort(reason);
-    globalAbortController = new AbortController();
-  };
-
-  const dispatchActions = (params) => {
-    const { requestedResult } = applyActions({
-      globalAbortSignal: globalAbortController.signal,
-      abortSignal: new AbortController().signal,
-      ...params,
-    });
-    return requestedResult;
-  };
-  setActionDispatcher(dispatchActions);
-
-  const getDocumentState = () => {
-    return window.history.state ? { ...window.history.state } : null;
-  };
-
-  const historyStartAtStart = getDocumentState();
-  const visitedUrlSet = historyStartAtStart
-    ? new Set(historyStartAtStart.jsenv_visited_urls || [])
-    : new Set();
-
-  // Create a signal that tracks visited URLs for reactive updates
-  // Using a counter instead of the Set directly for better performance
-  // Links will check isVisited() when this signal changes
-  const visitedUrlsSignal = signal(0);
-
-  const isVisited = (url) => {
-    url = new URL(url, window.location.href).href;
-    return visitedUrlSet.has(url);
-  };
-  const markUrlAsVisited = (url) => {
-    if (visitedUrlSet.has(url)) {
-      return;
-    }
-    visitedUrlSet.add(url);
-    visitedUrlsSignal.value++;
-  };
-
-  let abortController = null;
-  const handleRoutingTask = (url, options) => {
-    // Before anything is written: the visited set, the URL and every route are
-    // about to change, and this is the last moment the page still stands as it
-    // was. And after, whichever way the change went out — so that whoever took
-    // something at the first announcement has a definite place to give it back.
-    publishBeforeRouting({ url, ...options });
-    try {
-      return applyRoutingTask(url, options);
-    } finally {
-      publishAfterRouting({ url, ...options });
-    }
-  };
-
-  const applyRoutingTask = (url, options) => {
-    const isSameUrl = url === window.location.href;
-    const {
-      reason,
-      navigationType, // "load", "reload", "replace", "push", "traverse"
-      state,
-    } = options;
-
-    if (navigationType === "push" || navigationType === "replace") {
-      markUrlAsVisited(url);
-      // undefined → inherit current state (link click, neutral navigation)
-      // null     → explicit reset (no nav-state keys carried over)
-      // {...}    → explicit state from enter()/leave(), already built from currentState
-      // When state is given it's responsability of the caller to ensure it inherits document state (or not, you want it 99% of the time)
-      let effectiveState;
-      const sharedState = {
-        jsenv_visited_urls: Array.from(visitedUrlSet),
-      };
-      if (state === undefined) {
-        effectiveState = {
-          ...(getDocumentState() || {}),
-          ...sharedState,
-        };
-      } else if (state === null) {
-        effectiveState = sharedState;
-      } else if (state) {
-        effectiveState = {
-          ...state,
-          ...sharedState,
-        };
-      }
-      if (navigationType === "push") {
-        window.history.pushState(effectiveState, null, url);
-      } else {
-        window.history.replaceState(effectiveState, null, url);
-      }
-      updateDocumentUrl(url);
-      updateDocumentState(effectiveState);
-    } else {
-      // traverse / reload: state comes from the history entry, no push/replace needed.
-      markUrlAsVisited(url);
-      updateDocumentUrl(url);
-      updateDocumentState(state);
-    }
-
-    // Skip route matching for state-only changes: push/replace to the same URL
-    // (e.g. useNavState updating document state without changing the route).
-    // Do NOT apply for "traverse" — window.location.href is already updated by
-    // the browser before the popstate handler runs, so isSameUrl is always true
-    // for back/forward navigation regardless of whether the URL actually changed.
-    if (
-      isSameUrl &&
-      (navigationType === "push" || navigationType === "replace")
-    ) {
-      return undefined;
-    }
-
-    if (abortController) {
-      abortController.abort(`navigating to ${url}`);
-    }
-    abortController = new AbortController();
-    const abortSignal = abortController.signal;
-    const { allResult, requestedResult } = applyRouting(url, {
-      globalAbortSignal: globalAbortController.signal,
-      abortSignal,
-      reason,
-      navigationType,
-      isVisited,
-      state,
-    });
-    executeWithCleanup(
-      () => allResult,
-      () => {
-        abortController = undefined;
-      },
-    );
-    return requestedResult;
+}) => {
+  const contentIdRef = useRef(contentId);
+  const updateContentId = () => {
+    const uiTransition = uiTransitionRef.current;
+    if (!uiTransition) {
+      return;
+    }
+    const value = contentIdRef.current;
+    uiTransition.updateContentId(value);
   };
-
-  // Browser event handlers
-  window.addEventListener(
-    "click",
-    (e) => {
-      if (e.button !== 0) {
-        // Ignore non-left clicks
-        return;
-      }
-      if (e.metaKey) {
-        // Ignore clicks with meta key (e.g. open in new tab)
-        return;
-      }
-      if (e.defaultPrevented) {
-        return;
-      }
-      const linkElement = e.target.closest("a");
-      if (!linkElement) {
+  const uiTransitionContentIdContextValue = useMemo(() => {
+    const set = new Set();
+    const onSetChange = () => {
+      const value = Array.from(set).join("|");
+      contentIdRef.current = value;
+      updateContentId();
+    };
+    const update = (part, newPart) => {
+      if (!set.has(part)) {
+        if (set.size === 0) {
+          console.warn(`UITransition: content id update "${part}" -> "${newPart}" ignored because content id set is empty`);
+          return;
+        }
+        console.warn(`UITransition: content id update "${part}" -> "${newPart}" ignored because content id not found in set, only got [${Array.from(set).join(", ")}]`);
         return;
       }
-      if (linkElement.hasAttribute("data-readonly")) {
+      set.delete(part);
+      set.add(newPart);
+      onSetChange();
+    };
+    const add = part => {
+      if (!part) {
         return;
       }
-      const href = linkElement.href;
-      const { isEmpty, isCurrent, isSameOrigin, isAnchor } =
-        getHrefTargetInfo(href);
-      if (isEmpty || !isSameOrigin) {
-        // Let link to other origins be handled by the browser
+      if (set.has(part)) {
         return;
       }
-      if (isAnchor) {
-        // Fragment navigation belongs to the browser: it owns the indicated
-        // part of the document, and taking it over would cost `:target` and the
-        // focus handling that come with it.
-        if (isCurrent) {
-          // Except this one, which the browser answers with a scroll and
-          // nothing else: same pathname, same hash, so no event and no url
-          // change reaches whoever is waiting on the designated element.
-          rearmUrlTarget();
-        }
+      set.add(part);
+      onSetChange();
+    };
+    const remove = part => {
+      if (!part) {
         return;
       }
-      // Nothing here declared a route, so there is nothing to route to: the
-      // page is a plain document and a link in it is a plain link. Taking it
-      // over anyway would push the url and then have nothing to show for it —
-      // the address bar moves and the page does not (see applyRouting's own
-      // "not called yet" branch, which is where that used to end up).
-      if (!isRouting()) {
+      if (!set.has(part)) {
         return;
       }
-      e.preventDefault();
-      handleRoutingTask(href, {
-        reason: `"click" on a[href="${href}"]`,
-        navigationType: "push",
-      });
-    },
-    { capture: true },
-  );
-
-  window.addEventListener(
-    "submit",
-    () => {
-      // Handle form submissions?
-      // Not needed yet
-    },
-    { capture: true },
-  );
-
-  window.addEventListener("popstate", (popstateEvent) => {
-    const url = window.location.href;
-    const state = popstateEvent.state;
-    handleRoutingTask(url, {
-      reason: `"popstate" event for ${url}`,
-      navigationType: "traverse",
-      state,
-    });
-  });
-
-  // A fragment navigation is left to the browser (see the click handler above):
-  // it owns the indicated part of the document, and taking it over would cost
-  // `:target` and the focus handling that come with it. The document url still
-  // has to follow it — nothing else here would notice that it moved.
-  window.addEventListener("hashchange", () => {
-    updateDocumentUrl(window.location.href);
-  });
-
-  const navTo = async (url, { replace, state } = {}) => {
-    handleRoutingTask(url, {
-      reason: `navTo called with "${url}"`,
-      navigationType: replace ? "replace" : "push",
-      state,
-    });
-  };
-
-  const stop = (reason = "stop called") => {
-    triggerGlobalAbort(reason);
-  };
-
-  const reload = () => {
-    const url = window.location.href;
-    const state = history.state;
-    handleRoutingTask(url, {
-      reason: "reload called",
-      navigationType: "reload",
-      state,
-    });
-  };
-
-  const navBack = () => {
-    window.history.back();
-  };
-
-  const navForward = () => {
-    window.history.forward();
-  };
-
-  const init = () => {
-    const url = window.location.href;
-    const state = history.state;
-    handleRoutingTask(url, {
-      reason: "routing initialization",
-      navigationType: "load",
-      state,
-    });
-  };
-
-  return {
-    integration: "browser_history_api",
-    init,
-    navTo,
-    stop,
-    reload,
-    navBack,
-    navForward,
-    getDocumentState,
-    isVisited,
-    visitedUrlsSignal,
-  };
-};
-
-let updateRoutes;
-
-const applyActions = (params) => {
-  const updateActionsResult = updateActions(params);
-  const { allResult, runningActionSet } = updateActionsResult;
-  const pendingTaskNameArray = [];
-  for (const runningAction of runningActionSet) {
-    pendingTaskNameArray.push(runningAction.name);
-  }
-  workingWhile(() => allResult, pendingTaskNameArray);
-  return updateActionsResult;
-};
-const applyRouting = (
-  url,
-  {
-    globalAbortSignal,
-    abortSignal,
-    // state
-    navigationType,
-    isVisited,
-    reason,
-  },
-) => {
-  if (!updateRoutes) {
-    // .init() not called yet
-    // likely because code does not uses routing at all
-    return {};
-  }
-  const {
-    loadSet,
-    reloadSet,
-    abortSignalMap,
-    routeLoadRequestedMap,
-    activeRouteSet,
-  } = updateRoutes(url, {
-    navigationType,
-    isVisited,
-    // state,
-  });
-  if (
-    (!loadSet || loadSet.size === 0) &&
-    (!reloadSet || reloadSet.size === 0)
-  ) {
+      set.delete(part);
+      onSetChange();
+    };
     return {
-      allResult: undefined,
-      requestedResult: undefined,
-      activeRouteSet: new Set(),
+      add,
+      update,
+      remove
     };
-  }
-  const updateActionsResult = updateActions({
-    globalAbortSignal,
-    abortSignal,
-    runSet: loadSet,
-    rerunSet: reloadSet,
-    abortSignalMap,
-    reason,
-    isReplace: navigationType === "replace",
-  });
-  const { allResult, runningActionSet } = updateActionsResult;
-  const pendingTaskNameArray = [];
-  for (const [route, routeAction] of routeLoadRequestedMap) {
-    if (runningActionSet.has(routeAction)) {
-      pendingTaskNameArray.push(`${route.relativeUrl} -> ${routeAction.name}`);
-    }
-  }
-  routingWhile(() => allResult, pendingTaskNameArray);
-  return { ...updateActionsResult, activeRouteSet };
-};
-
-const browserIntegration = setupBrowserIntegrationViaHistory({
-  applyActions,
-  applyRouting,
-  // Routes are declared by the consumer and registered through
-  // setOnAllRouteReady below, so "does this document route at all?" is only
-  // answerable once that has run — hence a function, read at click time rather
-  // than a value read at setup time.
-  isRouting: () => Boolean(updateRoutes),
-});
-
-setOnAllRouteReady((v) => {
-  updateRoutes = v;
-  browserIntegration.init();
-});
-setRouteIntegration(browserIntegration);
-
-const navIntegratedVia = browserIntegration.integration;
-const navTo = (target, options) => {
-  const url = new URL(target, window.location.href).href;
-  const currentUrl = documentUrlSignal.peek();
-  if (url === currentUrl) {
-    if (options?.state === undefined) {
-      return null;
-    }
-    // State-only update on same URL: skip if state is identical to current.
-    const currentState = browserIntegration.getDocumentState();
-    if (compareTwoJsValues(options.state, currentState)) {
-      return null;
-    }
-  }
-  return browserIntegration.navTo(url, options);
-};
-const stopLoad = (reason = "stopLoad() called") => {
-  const windowIsLoading = windowIsLoadingSignal.value;
-  if (windowIsLoading) {
-    window.stop();
-  }
-  const documentIsBusy = documentIsBusySignal.value;
-  if (documentIsBusy) {
-    browserIntegration.stop(reason);
-  }
-};
-const reload = browserIntegration.reload;
-const navBack = browserIntegration.navBack;
-const navForward = browserIntegration.navForward;
-const isVisited = browserIntegration.isVisited;
-const visitedUrlsSignal = browserIntegration.visitedUrlsSignal;
-browserIntegration.handleActionTask;
-
-// Preact's own useId() (see preact/hooks) returns "P<mask0>-<mask1>", where
-// the mask is derived from render order within the nearest root/async
-// boundary — stable across re-renders of the *same* mount, but not across a
-// reload (render order can differ) or even across two mounts on the same
-// page (two components hitting useId() in the same relative order get the
-// same string). Storing one of these under type: "push" bakes it into a
-// history entry: reload the page and the entry's key may now belong to a
-// completely different component (or none), silently auto-opening whatever
-// happens to render at that same position instead.
-const PREACT_GENERATED_ID_REGEX = /^P\d+-\d+/;
-const isLikelyPreactGeneratedId = (id) => PREACT_GENERATED_ID_REGEX.test(id);
-
-const NO_OP = () => {};
-const NO_ID_GIVEN = [undefined, NO_OP, NO_OP];
-const useNavStateBasic = (
-  id,
-  { debug, type = "replace", onLeave, defaultValue } = {},
-) => {
-  // Hooks must be called unconditionally — before the !id early return.
-  const state = documentStateSignal.value;
-  // Key presence is the flag — the value may be anything, including undefined.
-  const keyInState = Boolean(id && state && Object.hasOwn(state, id));
-  const onLeaveRef = useRef(onLeave);
-  onLeaveRef.current = onLeave;
-  const prevKeyInStateRef = useRef(keyInState);
-  // enteredRef tracks whether enter() was called without a matching leave() yet.
-  // It lets the effect distinguish an external disappearance (back button → fire onLeave)
-  // from a programmatic one (leave() already set it to false before the state updates).
-  const enteredRef = useRef(false);
-  useEffect(() => {
-    const prevKeyInState = prevKeyInStateRef.current;
-    prevKeyInStateRef.current = keyInState;
-    if (prevKeyInState && !keyInState && enteredRef.current) {
-      enteredRef.current = false;
-      onLeaveRef.current?.();
-    }
-  }, [keyInState]);
-
-  if (!id) {
-    return NO_ID_GIVEN;
-  }
-
-  let effectiveType = type;
-  if (type === "push" && isLikelyPreactGeneratedId(id)) {
-    effectiveType = "replace";
-  }
-
-  const currentValue = keyInState ? state[id] : defaultValue;
-
-  if (debug) {
-    console.debug(`useNavState(${id}) current value is ${currentValue}`);
-  }
-
-  // enter(value): navigate TO this state (push or replace depending on type).
-  // Calling enter() without a value stores "on" — the mere presence of the key
-  // in the document state is enough to match; the value just allows associating
-  // extra data with the entry when needed.
-  const enter = (value = "on") => {
-    enteredRef.current = true;
-    const currentStateCopy = browserIntegration.getDocumentState() || {};
-    if (Object.hasOwn(currentStateCopy, id) && currentStateCopy[id] === value) {
-      return;
-    }
-    currentStateCopy[id] = value;
-    navTo(window.location.href, {
-      replace: effectiveType !== "push",
-      state: currentStateCopy,
+  }, []);
+  const ref = useRef();
+  const uiTransitionRefDefault = useRef();
+  uiTransitionRef = uiTransitionRef || uiTransitionRefDefault;
+  useLayoutEffect(() => {
+    const uiTransition = createUITransitionController(ref.current, {
+      alignX,
+      alignY
     });
-  };
-
-  // leave(): navigate AWAY FROM this state (navBack in push mode, replace in replace mode).
-  // isBack: when true (cancel close in push mode), call history.back() to restore the
-  //   pre-open state — discards any in-progress edits.
-  //   When false (confirmed close), replace the pushed entry instead: preserves the
-  //   current URL state (e.g. a new picker value) while removing the popup key.
-  const leave = ({ isBack } = {}) => {
-    enteredRef.current = false;
-    const currentStateCopy = browserIntegration.getDocumentState() || {};
-    if (!Object.hasOwn(currentStateCopy, id)) {
-      return;
-    }
-    if (effectiveType === "push" && isBack) {
-      browserIntegration.navBack();
-    } else {
-      delete currentStateCopy[id];
-      navTo(window.location.href, {
-        replace: true,
-        state: currentStateCopy,
-      });
-    }
-  };
-
-  return [currentValue, enter, leave];
+    uiTransitionRef.current = uiTransition;
+    return () => {
+      uiTransition.cleanup();
+    };
+  }, [disabled, alignX, alignY]);
+  return jsxs("div", {
+    ref: ref,
+    ...props,
+    className: "ui_transition",
+    "data-disabled": disabled ? "" : undefined,
+    "data-transition-type": type,
+    "data-transition-duration": duration,
+    "data-debug-detection": debugDetection ? "" : undefined,
+    "data-debug-size": debugSize ? "" : undefined,
+    "data-debug-content": debugContent ? "" : undefined,
+    children: [jsxs("div", {
+      className: "ui_transition_active_group",
+      children: [jsx("div", {
+        className: "ui_transition_target_slot",
+        "data-content-id": contentIdRef.current ? contentIdRef.current : undefined,
+        children: jsx(UITransitionContentIdContext.Provider, {
+          value: uiTransitionContentIdContextValue,
+          children: children
+        })
+      }), jsx("div", {
+        className: "ui_transition_outgoing_slot",
+        inert: true
+      })]
+    }), jsxs("div", {
+      className: "ui_transition_previous_group",
+      inert: true,
+      children: [jsx("div", {
+        className: "ui_transition_previous_target_slot"
+      }), jsx("div", {
+        className: "ui_transition_previous_outgoing_slot"
+      })]
+    })]
+  });
 };
 
 /**
- * Stores a named value in the browser's document state and returns it reactively.
- * The component re-renders whenever the value changes (navigation, back/forward button).
+ * The goal of this hook is to allow a component to set a "content key"
+ * Meaning all content within the component is identified by that key
  *
- * @param {string} id
- *   Unique key used to store the value in document state. Must be stable across renders.
+ * When the key changes, UITransition will be able to detect that and consider the content
+ * as changed even if the component is still the same
  *
- * @param {object} [options]
- * @param {"push"|"replace"} [options.type="replace"]
- *   Controls how enter() adds the state to browser history.
- *   - "push": creates a new history entry — pressing the back button removes it and calls onLeave.
- *   - "replace": updates the current history entry — no extra history entry is created.
- *   Silently downgraded to "replace" (with a dev-only console.warn) when `id`
- *   looks auto-generated (e.g. preact's own useId()) — an unstable id baked
- *   into a pushed history entry won't survive a reload correctly, and could
- *   even collide with a different component's own auto-generated id. Pass a
- *   stable, explicit id to actually get "push" behavior.
- * @param {() => void} [options.onLeave]
- *   Called when the state key disappears **externally** — e.g. the user presses the browser
- *   back button. Not called when leave() is invoked programmatically.
- * @param {*} [options.defaultValue]
- *   Value returned when `id` is absent from document state. Defaults to `undefined`.
+ * This is used by <Route> to set the content key to the route path
+ * When the route becomes inactive it will call useUITransitionContentId(undefined)
+ * And if a sibling route becones active it will call useUITransitionContentId with its own path
  *
- * @returns {[value, enter, leave]}
- *   - `value`: current value from document state, or `defaultValue` when the key is absent.
- *   - `enter(value = "on")`: navigate TO this state (stores `value` under `id`).
- *     Calling without an argument stores `"on"` — the presence of the key is enough to match;
- *     the value allows associating extra data when needed.
- *   - `leave()`: navigate AWAY FROM this state (removes `id` from document state,
- *     or goes back in history when `type` is "push").
  */
-const useNavState = useNavStateBasic;
+const useUITransitionContentId = value => {
+  const contentId = useContext(UITransitionContentIdContext);
+  const valueRef = useRef();
+  if (contentId !== undefined && valueRef.current !== value) {
+    const previousValue = valueRef.current;
+    valueRef.current = value;
+    if (previousValue === undefined) {
+      contentId.add(value);
+    } else {
+      contentId.update(previousValue, value);
+    }
+  }
+  useLayoutEffect(() => {
+    if (contentId === undefined) {
+      return null;
+    }
+    return () => {
+      contentId.remove(valueRef.current);
+    };
+  }, []);
+};
 
 const NEVER_SET = {};
 const useUrlSearchParam = (paramName, defaultValue) => {
@@ -47795,21 +47923,51 @@ const withoutEmptyFields = uiState => {
 // register themselves in their own effects, which run first — this is the
 // earliest moment the form knows what it holds. Everything after this baseline
 // is a real send moving it forward (see useFormGroup's own onnavi_action_end).
+//
+// Taken a second time at the end of the tick, because "the earliest moment" is
+// not always late enough: a field that re-renders on its own schedule rather
+// than with the form — a row whose value is computed from signals, sitting
+// behind a memo — brings its value in a render of its own, which lands after
+// these effects. A form measured before it would open already changed, and
+// would never take the reference again. Both takes are the same arrival, so the
+// second one costs a render only when it moves something.
 const useHeldUIStateAsSent = (uiStateController, pristineKey) => {
   // The render that brought a new pristineKey read `changed` against the
   // previous baseline, and nothing else is going to move: the button would stay
   // lit on a form that holds exactly what it was just given. So ask for the one
-  // render that reads the new baseline — the first one has nobody to tell,
-  // every field it is waiting for re-renders the form as it registers.
+  // render that reads the new baseline — the first take on mount has nobody to
+  // tell, every field it is waiting for re-renders the form as it registers.
   const [, rereadBaseline] = useState(0);
   const isFirstRef = useRef(true);
   useLayoutEffect(() => {
-    uiStateController.sentUIState = readHeldUIState(uiStateController);
-    if (isFirstRef.current) {
-      isFirstRef.current = false;
-      return;
-    }
-    rereadBaseline(count => count + 1);
+    const takeBaseline = () => {
+      const baselineBefore = uiStateController.sentUIState;
+      const baseline = readHeldUIState(uiStateController);
+      uiStateController.sentUIState = baseline;
+      return !compareTwoJsValues(baselineBefore, baseline);
+    };
+    const moved = takeBaseline();
+    const isFirst = isFirstRef.current;
+    isFirstRef.current = false;
+    if (moved && !isFirst) {
+      rereadBaseline(count => count + 1);
+    }
+    // A microtask, not a timeout: everything that belongs to this arrival —
+    // the renders preact still has queued, the state they push into the form —
+    // happens before the tick ends, and nothing a person does can land in
+    // between.
+    let abandoned = false;
+    queueMicrotask(() => {
+      if (abandoned) {
+        return;
+      }
+      if (takeBaseline()) {
+        rereadBaseline(count => count + 1);
+      }
+    });
+    return () => {
+      abandoned = true;
+    };
   }, [uiStateController, pristineKey]);
 };
 const useUnregisteredControlWarning = ref => {
@@ -54720,6 +54878,7 @@ const ListUI = props => {
     expand: expand,
     "navi-nothing-to-display": nothingToDisplay ? "" : undefined,
     "navi-loading": loading ? "" : undefined,
+    "navi-refreshing": virtual.refreshingSignal.value ? "" : undefined,
     "navi-error": error ? "" : undefined,
     styleCSSVars: LIST_STYLE_CSS_VARS,
     pseudoClasses: LIST_PSEUDO_CLASSES,
@@ -57044,6 +57203,10 @@ const createListVirtual = () => {
   // registers, nothing is drawn), and yet they are what it may have been
   // waiting for — the row it was told to open on, for one.
   const pagesSignal = signal(0);
+  // How many runs are re-reading rows they already show. The list wears it as
+  // an attribute: what is drawn is from before, and the app may want to say so
+  // without taking anything away.
+  const refreshingSignal = signal(0);
   const placeByOwner = new Map();
   const locatorByOwner = new Map();
   let passId = 0;
@@ -57051,6 +57214,7 @@ const createListVirtual = () => {
   const virtual = {
     totalSignal,
     pagesSignal,
+    refreshingSignal,
     // What a run needs to know about the list it lives in: how many rows the
     // list is willing to draw at once, which end it opens on, and how much
     // room one row is given — a row whose content has not arrived must take
@@ -57153,7 +57317,7 @@ const VISIBILITY_HIDDEN_STYLE = {
  * inside `<List.Group>`s; each takes its place in declaration order.
  *
  * @type {import("ignore:preact").FunctionComponent<{
- *   renderItem: (item: any, index: number) => import("ignore:preact").ComponentChildren,
+ *   renderItem: (item: any, index: number, state: {refreshing: boolean}) => import("ignore:preact").ComponentChildren,
  *   itemsAction: (range: {start: number, end: number, limit: number, before?: string, after?: string, around?: string, count?: number, signal: AbortSignal}) => any,
  *   count?: number,
  *   groupBy?: (item: any, index: number) => any,
@@ -57163,6 +57327,10 @@ const VISIBILITY_HIDDEN_STYLE = {
  *   renderSkeleton?: false | ((index: number) => import("ignore:preact").ComponentChildren),
  *   renderError?: (failure: {error: any, retry: () => void, start: number, end: number}) => import("ignore:preact").ComponentChildren,
  * }>}
+ * @param {(item: any, index: number, state: {refreshing: boolean}) => any} props.renderItem
+ *   What one row is, given the item and where it sits. `state.refreshing` says
+ *   the rows drawn are the ones from before while the run reads the collection
+ *   again — the list carries `navi-refreshing` for the same reason.
  * @param {(item: any, index: number) => any} [props.groupBy]
  *   What tells rows that belong together apart from the others — the day of a
  *   message, the month of a game. Consecutive rows sharing it are wrapped in a
@@ -57369,6 +57537,9 @@ const ListItems = ({
       virtualItemSize: virtualItemSize
     }, "navi-list-filler-before"));
   }
+  const renderItemState = {
+    refreshing: store.refreshing
+  };
   let rowIndex = windowFrom;
   while (rowIndex < windowTo) {
     if (rowIndex >= failureFrom && rowIndex <= failureTo) {
@@ -57396,7 +57567,7 @@ const ListItems = ({
     const key = item === undefined ? `${ownerId}_skeleton_${rowIndex}` : idOf(item, rowIndex);
     let rowVnode;
     if (item !== undefined) {
-      rowVnode = renderItem(item, rowIndex);
+      rowVnode = renderItem(item, rowIndex, renderItemState);
     } else if (renderRowSkeleton === false) {
       // The row must still take its room: without it the rows below would
       // climb up and slide back down as the answer arrives.
@@ -57497,6 +57668,22 @@ const useItemStore = ({
   }
   const pages = pagesRef.current;
   const [, setPageVersion] = useState(0);
+  // The rows held are out of date and the run has not asked for the new ones
+  // yet. They stay on screen until the answer comes: what is drawn is from
+  // before, which is not the same thing as nothing to draw.
+  const staleRef = useRef(false);
+  const [refreshing, setRefreshing] = useState(false);
+  // A source that says when what it reads has moved (a resource range reader
+  // does: see rerunOn.GET_RANGE) is heard here — a write deciding who belongs
+  // to the collection is exactly what a run cannot deduce from the rows it
+  // holds. A source that says nothing is read once and stays as it is.
+  const invalidationSignal = typeof itemsAction === "function" ? itemsAction.invalidationSignal : null;
+  const invalidation = invalidationSignal ? invalidationSignal.value : 0;
+  const invalidationRef = useRef(invalidation);
+  if (invalidationRef.current !== invalidation) {
+    invalidationRef.current = invalidation;
+    staleRef.current = true;
+  }
   // The one request in flight, with the means to call it off: a page asked for
   // a window the list has left is work the server and the browser are doing for
   // nothing.
@@ -57506,7 +57693,8 @@ const useItemStore = ({
     end: -1,
     held: -1,
     controller: null,
-    generation: 0
+    generation: 0,
+    revalidating: false
   });
   // The rows asked for that never came. Kept as a range so the list can say
   // where the hole is, and cleared by a retry — which is what makes the same
@@ -57517,9 +57705,24 @@ const useItemStore = ({
   // It stands for a windowful of them: a list that is about to be filled looks
   // like rows on their way, not like an empty list.
   const rowCount = pages.count ?? count ?? virtual.renderBudget;
+  // A run that never received anything has nothing to keep on screen: asking
+  // again is its first ask, not a refresh.
+  if (staleRef.current && pages.count === undefined) {
+    staleRef.current = false;
+  }
+  useLayoutEffect(() => {
+    if (!refreshing) {
+      return null;
+    }
+    virtual.refreshingSignal.value = virtual.refreshingSignal.peek() + 1;
+    return () => {
+      virtual.refreshingSignal.value = virtual.refreshingSignal.peek() - 1;
+    };
+  }, [refreshing]);
   const store = {
     rowCount,
     failure,
+    refreshing,
     // JS memory is cheap next to the DOM, but a long enough scroll accumulates
     // everything it ever went through. Rows far from what is on screen are
     // dropped and simply asked for again if the user goes back — the same
@@ -57560,7 +57763,25 @@ const useItemStore = ({
       let start = missingStart;
       let end = missingEnd;
       let around;
-      if (pages.count === undefined) {
+      // Rows that are all there but out of date: the ask is the window itself,
+      // anchored on the row at its top — a source paginating by cursor gets a
+      // row to count from, and the reading position is what must survive.
+      const revalidating = staleRef.current;
+      if (revalidating) {
+        start = windowFrom;
+        end = windowTo - 1;
+        if (end < start) {
+          // Nothing of this run is on screen (the window frames another one, or
+          // the list is scrolled past it): its own first rows are what it will
+          // draw next.
+          start = 0;
+          end = budget - 1;
+        }
+        const firstHeld = pages.byIndex.get(windowFrom);
+        if (firstHeld && firstHeld.id !== undefined) {
+          around = firstHeld.id;
+        }
+      } else if (pages.count === undefined) {
         const scrolled = virtual.scrolled;
         if (scrolled === "end") {
           // Counting back from the end, the way an HTTP range does: a list
@@ -57591,6 +57812,14 @@ const useItemStore = ({
           return;
         }
         const request = requestRef.current;
+        if (revalidating && request.busy) {
+          if (request.revalidating) {
+            return;
+          }
+          // A page for a window that is about to be replaced wholesale.
+          request.controller?.abort();
+          request.busy = false;
+        }
         if (request.busy) {
           // Still worth waiting for as long as what it went to fetch is still
           // what the list would draw. Once it is not, it is called off — and
@@ -57609,8 +57838,9 @@ const useItemStore = ({
         }
         const held = pages.byIndex.size;
         // Asking again for a range that was already asked for, having received
-        // nothing since, can only produce the same answer.
-        if (request.start === start && request.end === end && request.held === held) {
+        // nothing since, can only produce the same answer. A revalidation is
+        // exactly the case where it produces another one.
+        if (!revalidating && request.start === start && request.end === end && request.held === held) {
           return;
         }
         request.start = start;
@@ -57625,17 +57855,33 @@ const useItemStore = ({
           end,
           around,
           limit: end - start + 1,
-          before: cursor.before,
-          after: cursor.after,
+          // A cursor names a row of the collection as it was; a revalidation
+          // is asked precisely because that is what changed.
+          before: revalidating ? undefined : cursor.before,
+          after: revalidating ? undefined : cursor.after,
           count: pages.count,
           signal: controller.signal
         };
         request.busy = true;
+        request.revalidating = revalidating;
+        if (revalidating) {
+          setRefreshing(true);
+        }
         const done = page => {
           const current = generation === request.generation;
           if (current) {
             request.busy = false;
+            request.revalidating = false;
             setFailure(null);
+            if (revalidating) {
+              staleRef.current = false;
+              setRefreshing(false);
+            }
+          }
+          if (revalidating && !current) {
+            // Rows of a composition already superseded by a newer ask: keeping
+            // them would mix two states of the collection.
+            return;
           }
           if (!page) {
             return;
@@ -57646,6 +57892,12 @@ const useItemStore = ({
           // Before the rows land: what is on screen has to stay where it is,
           // and the DOM still shows the state to hold onto.
           virtual.captureAnchor();
+          if (revalidating) {
+            // The rows held stood for a composition that has moved on; the
+            // ones outside the window are forgotten and asked for again if the
+            // user goes back to them.
+            pages.byIndex = new Map();
+          }
           let i = 0;
           while (i < pageItems.length) {
             pages.byIndex.set(pageStart + i, pageItems[i]);
@@ -57661,6 +57913,14 @@ const useItemStore = ({
             return;
           }
           request.busy = false;
+          request.revalidating = false;
+          if (revalidating) {
+            // The rows from before stay: a revalidation that failed has
+            // nothing better to put in their place.
+            staleRef.current = false;
+            setRefreshing(false);
+            return;
+          }
           setFailure({
             start,
             end,
@@ -58265,8 +58525,8 @@ const PickerTypeResolver = props => {
       ...props
     });
   }
-  if (props.type === "form") {
-    return jsx(PickerForm, {
+  if (props.type === "object") {
+    return jsx(PickerObject, {
       ...props
     });
   }
@@ -58282,19 +58542,19 @@ const PickerText = props => {
   });
 };
 
-// The popup holds a group of named controls — a `<Form>`, or a `<ControlGroup>`
-// when the group is only a shape and has no submit — and this picker's value is
-// whatever that group aggregates. The popup itself holds nothing: it is a
-// surface (see dialog.jsx), so there is nothing to tell it about the shape.
-const PickerForm = props => {
+// The popup holds a group of named controls — a `<ControlGroup>`, or a `<Form>`
+// when that group is a question with a send of its own — and this picker's
+// value is the object that group aggregates. The popup itself holds nothing: it
+// is a surface (see dialog.jsx), so there is nothing to tell it about the shape.
+const PickerObject = props => {
   const Next = useNextResolver();
   return jsx(Next, {
-    ui: jsx(PickerFormUI, {}),
+    ui: jsx(PickerObjectUI, {}),
     ...props,
     type: "navi_js"
   });
 };
-const PickerFormUI = () => {
+const PickerObjectUI = () => {
   const {
     value,
     placeholder
@@ -59304,7 +59564,7 @@ Picker.UI.Week = PickerWeekUI;
 Picker.UI.Datetime = PickerDatetimeUI;
 Picker.UI.File = PickerFileUI;
 Picker.UI.Color = PickerColorUI;
-Picker.UI.Form = PickerFormUI;
+Picker.UI.Object = PickerObjectUI;
 Picker.UI.Multiple = PickerArrayUI;
 Picker.UI.PencilSvg = PencilSvg;
 Picker.UI.ChevronDownSvg = ChevronDownSvg$1;