@jsenv/navi 0.29.458 → 0.29.460

package/dist/jsenv_navi.js

@@ -1895,6 +1895,27 @@ const markErrorAsTakenByRender = (error) => {
   }
 };
 
+/**
+ * A prerun's failure is owed to no screen: nothing on screen asked for that
+ * run, so the component that owns the read asks again rather than show a
+ * failure from before it existed (see `run` in use_async_data.jsx). Taken
+ * once, so the run asking again fails as its own even when it fails with the
+ * same error object. Held by the error, it lasts as long as the failure stays
+ * on the action: a later run replaces it, whether or not an owner ever came.
+ */
+const prerunFailureSet = new WeakSet();
+const markErrorAsPrerunFailure = (error) => {
+  if (error && typeof error === "object") {
+    prerunFailureSet.add(error);
+  }
+};
+const takePrerunFailure = (error) => {
+  if (!error || typeof error !== "object") {
+    return false;
+  }
+  return prerunFailureSet.delete(error);
+};
+
 /**
  * When the answer "nobody took it" is final.
  *
@@ -4194,6 +4215,9 @@ const createAction = (callback, rootOptions = {}) => {
             return error;
           }
           error.action = action;
+          if (isPrerun) {
+            markErrorAsPrerunFailure(error);
+          }
           batch(() => {
             errorSignal.value = error;
             runningStateSignal.value = FAILED;
@@ -4767,6 +4791,25 @@ const runUnwatched = (startRun) => {
   return result;
 };
 
+/**
+ * Starts a prerun navi has nobody to await. Its failure is not reported:
+ * nothing on screen asked for it. It stays on the action, marked as a
+ * prerun's (see markErrorAsPrerunFailure), where whatever owns the read asks
+ * again.
+ */
+const prerunUnwatched = (startPrerun) => {
+  let result;
+  try {
+    result = startPrerun();
+  } catch {
+    return undefined;
+  }
+  if (result && typeof result.catch === "function") {
+    result.catch(() => {});
+  }
+  return result;
+};
+
 /**
  * Reactively runs an action whenever the params derived from signals change.
  *
@@ -10882,27 +10925,29 @@ const updateDocumentState = (value) => {
  * `state`:
  * - `undefined` — a neutral navigation: a link click, a `replaceUrl` writing a
  *   search param. A **replace** stays on the entry the document is already on,
- *   so what that entry holds stays with it. A **push** opens a NEW entry, and
- *   what was written for the one being left — an open dialog, an expanded
- *   picker (see `useNavState`) — describes that entry alone: carried forward it
- *   would reopen on the next screen, and on the one after that, until something
- *   mounting the same id opens out of nowhere.
+ *   so what that entry holds stays with it. A **push** opens a NEW entry. One
+ *   arriving at another page (`isArrival`, see scroll_restoration.js) starts
+ *   empty: what was written for the entry being left — an open dialog, an
+ *   expanded picker (see `useNavState`) — describes that entry alone, and
+ *   carried forward it would reopen on the next screen, and on the one after
+ *   that, until something mounting the same id opens out of nowhere. A push
+ *   that keeps the page (a layer bound to a search param, opened over it)
+ *   carries the state: whatever holds it is still mounted under the new
+ *   address, and an empty entry would close it there — an expanded row
+ *   collapsing under the layer, expanding again when the back takes it away.
  * - `null` — an explicit reset.
  * - an object — built by the caller (`enter()`/`leave()` copy the current state
  *   themselves), taken as given.
  *
- * `sharedState` always wins: it describes the document, not the entry.
- *
- * The push/replace split is the Navigation API's own rule for a `navigate()`
- * carrying no state — which is why via_navigation.js gets it from the browser
- * and via_history.js has to spell it out to say the same thing.
+ * `currentState` is what the entry being left holds. `sharedState` always
+ * wins: it describes the document, not the entry.
  */
 const resolveEffectiveDocumentState = (
   state,
-  { navigationType, currentState, sharedState },
+  { navigationType, isArrival, currentState, sharedState },
 ) => {
   if (state === undefined) {
-    if (navigationType === "push") {
+    if (navigationType === "push" && isArrival) {
       return sharedState;
     }
     return { ...(currentState || {}), ...sharedState };
@@ -11446,6 +11491,8 @@ const startAtTop = (url, { from } = {}) => {
   positionByUrl.set(href, { x: 0, y: 0 });
   window.scrollTo({ top: 0, left: 0, behavior: "instant" });
 };
+// Also what decides whether a push carries the state of the page it keeps
+// (see resolveEffectiveDocumentState).
 const isArrival = (url, { from }) => {
   if (
     from !== undefined &&
@@ -11881,7 +11928,8 @@ const setupBrowserIntegrationViaHistory = ({
 
   const applyRoutingTask = (url, options) => {
     // Read before the history is written: the url the reader is being taken
-    // away from, which is what decides where a push lands (see startAtTop).
+    // away from, which is what decides where a push lands (see startAtTop) and
+    // whether it carries the state (see resolveEffectiveDocumentState).
     const urlLeft = readAddress();
     const {
       reason,
@@ -11901,6 +11949,7 @@ const setupBrowserIntegrationViaHistory = ({
       markUrlAsVisited(url);
       const effectiveState = resolveEffectiveDocumentState(state, {
         navigationType,
+        isArrival: isArrival(url, { from: urlLeft }),
         currentState: getDocumentState(),
         sharedState: {
           jsenv_visited_urls: Array.from(visitedUrlSet),
@@ -25567,10 +25616,24 @@ const resolveRerunOn = (rerunOn, inheritedRerunOn = defaultRerunOn) => {
   };
 };
 
+// What a `dependencies` entry names are callbacks, not verbs (`rerunOn` names
+// verbs, where `PATCH` covers `PATCH_MANY`): one callback of a resource can be
+// the write that creates (a move into a new item) while its sibling only edits.
+const WRITE_CALLBACK_NAMES = [
+  "POST",
+  "POST_MANY",
+  "PUT",
+  "PUT_MANY",
+  "PATCH",
+  "PATCH_MANY",
+  "DELETE",
+  "DELETE_MANY",
+];
+
 // This handles ALL resource lifecycle logic (rerun/reset) across all resources
 const createResourceLifecycleManager = () => {
   const registeredResources = new Map(); // Map<resourceInstance, lifecycleConfig>
-  const resourceDependencies = new Map(); // Map<resourceInstance, Set<dependentResources>> — user-configured
+  const resourceDependencies = new Map(); // Map<resourceInstance, Map<dependentResource, Set<writeCallbackName>>> — user-configured
   const scopedManyParents = new Map(); // Map<childResource, Set<{resource, propertyName}>> — auto from scopedMany
 
   const registerResource = (resourceScope, config) => {
@@ -25589,16 +25652,38 @@ const createResourceLifecycleManager = () => {
       rangeReaderSet: new Set(),
     });
 
-    // Register dependencies
-    if (dependencies.length > 0) {
-      for (const dependency of dependencies) {
-        if (!resourceDependencies.has(dependency)) {
-          resourceDependencies.set(dependency, new Set());
-        }
-        resourceDependencies.get(dependency).add(resourceScope);
+    for (const dependency of dependencies) {
+      const [dependencyScope, writeNames] = resolveDependency(
+        dependency,
+        resourceScope,
+      );
+      let dependentMap = resourceDependencies.get(dependencyScope);
+      if (!dependentMap) {
+        dependentMap = new Map();
+        resourceDependencies.set(dependencyScope, dependentMap);
+      }
+      let writeNameSet = dependentMap.get(resourceScope);
+      if (!writeNameSet) {
+        writeNameSet = new Set();
+        dependentMap.set(resourceScope, writeNameSet);
+      }
+      for (const writeName of writeNames) {
+        writeNameSet.add(writeName);
       }
     }
   };
+  // Whether `resourceScope` listed the facade that wrote, with this write
+  // among the ones that count.
+  const isWriteHeardBy = (resourceScope, triggeringAction, triggerScope) => {
+    const writeNameSet = resourceDependencies
+      .get(triggerScope)
+      ?.get(resourceScope);
+    if (!writeNameSet) {
+      return false;
+    }
+    const { verb, isMany } = triggeringAction.meta;
+    return writeNameSet.has(isMany ? `${verb}_MANY` : verb);
+  };
   // Only the reader the resource exposes is registered; the ones `bindParams`
   // makes share its signal (see resource_range_reader.js).
   const registerRangeReader = (resourceScope, rangeReader) => {
@@ -25639,17 +25724,18 @@ const createResourceLifecycleManager = () => {
           triggerVerb === "PATCH") &&
         config.uniqueKeys.length > 0;
 
-      const isKnownDependency =
-        triggerResourceScope !== null &&
-        triggerResourceScope !== undefined &&
-        resourceDependencies.get(triggerResourceScope)?.has(resourceScope);
+      const isHeardDependency = isWriteHeardBy(
+        resourceScope,
+        triggeringAction,
+        triggerResourceScope,
+      );
 
       if (
         !shouldRerunGetMany &&
         !shouldRerunGet &&
         triggerVerb !== "DELETE" &&
         !hasUniqueKeyAutorerun &&
-        !isKnownDependency
+        !isHeardDependency
       ) {
         continue;
       }
@@ -25770,21 +25856,10 @@ const createResourceLifecycleManager = () => {
           }
 
           // Cross-resource dependency effects: rerun dependent GET / GET_MANY
-          // Fires on any mutating verb — user-configured dependencies express
-          // "this resource depends on another resource's data", so any mutation
-          // (POST, PUT, PATCH, DELETE) on the dependency should trigger a rerun.
+          // after a write the dependency counts — every write for a resource
+          // listed bare, the callbacks named in `on` otherwise.
           {
-            if (
-              triggerResourceScope &&
-              resourceDependencies
-                .get(triggerResourceScope)
-                ?.has(resourceScope) &&
-              (triggerVerb === "POST" ||
-                triggerVerb === "PUT" ||
-                triggerVerb === "PATCH" ||
-                triggerVerb === "DELETE") &&
-              candidateVerb === "GET"
-            ) {
+            if (isHeardDependency && candidateVerb === "GET") {
               actionsToRerun.add(actionCandidate);
               reasonSet.add("dependency autorerun");
               continue;
@@ -25861,9 +25936,10 @@ const createResourceLifecycleManager = () => {
         continue;
       }
       const isSameResource = resourceScope === triggerResourceScope;
-      const isDependent = Boolean(
-        triggerResourceScope &&
-        resourceDependencies.get(triggerResourceScope)?.has(resourceScope),
+      const isDependent = isWriteHeardBy(
+        resourceScope,
+        triggeringAction,
+        triggerResourceScope,
       );
       if (!isSameResource && !isDependent) {
         continue;
@@ -25928,6 +26004,35 @@ const shouldRerunAfter = (rerunConfig, verb) => {
   }
   return false;
 };
+// A `dependencies` entry: a resource (every write counts), or
+// `{ resource, on }` naming the write callbacks that do. A name that cannot
+// fire throws here: a dependency that never fires leaves a read on its old
+// value with nothing to say so.
+const resolveDependency = (dependency, dependentScope) => {
+  if (!Object.hasOwn(dependency, "resource")) {
+    return [dependency, WRITE_CALLBACK_NAMES];
+  }
+  const { resource: dependencyScope, on } = dependency;
+  const where = `resource(${dependentScope.name}) dependency on ${dependencyScope.name}`;
+  if (!Array.isArray(on) || on.length === 0) {
+    throw new Error(
+      `${where}: "on" lists the writes that count, e.g. on: ["POST", "DELETE"] — list the resource itself for every write`,
+    );
+  }
+  for (const writeName of on) {
+    if (!WRITE_CALLBACK_NAMES.includes(writeName)) {
+      throw new Error(
+        `${where}: "${writeName}" is not a write, "on" takes ${WRITE_CALLBACK_NAMES.join(", ")}`,
+      );
+    }
+    if (!dependencyScope[writeName]) {
+      throw new Error(
+        `${where}: ${dependencyScope.name} has no ${writeName}, so it would never rerun ${dependentScope.name}`,
+      );
+    }
+  }
+  return [dependencyScope, on];
+};
 const isParamSubset = (parentParams, childParams) => {
   if (!parentParams || !childParams) {
     return false;
@@ -26676,6 +26781,10 @@ const debug$2 = (...args) => {
  * @param {Object} restCallbacks - `{ idKey, uniqueKeys, rerunOn, dependencies, GET, GET_MANY, GET_RANGE, POST, POST_MANY, PUT, PUT_MANY, PATCH, PATCH_MANY, DELETE, DELETE_MANY }`
  * @param {string} [restCallbacks.idKey] - primary key property, defaults to `"id"`
  * @param {string[]} [restCallbacks.uniqueKeys] - alternate keys the store can find an item by (e.g. `"username"`)
+ * @param {Array<Object | { resource: Object, on: string[] }>} [restCallbacks.dependencies] -
+ *   resources whose writes rerun this one's reads: one listed bare counts every
+ *   write, `{ resource, on: ["PATCH_MANY", "DELETE"] }` only the callbacks it
+ *   names (`PATCH` is not `PATCH_MANY`)
  * @param {{ signal: import("@preact/signals").Signal, when?: () => boolean }} [restCallbacks.persist] -
  *   mirrors the rows `GET` lands with into `signal` — a `stateSignal` with
  *   `persists: true` and `type: "object"` keeps them across a reload, whose
@@ -28766,6 +28875,7 @@ const useAsyncData = (promiseOrAction, {
   loading = "delegate",
   error = "delegate",
   run,
+  prerun,
   onLoad
 } = {}) => {
   // The request this component owns, as a function: one action per instance,
@@ -28791,6 +28901,7 @@ const useAsyncData = (promiseOrAction, {
       loadingEffect: loading,
       errorEffect: error,
       run,
+      prerun,
       onLoad
     });
   }
@@ -28822,8 +28933,14 @@ const useActionAsyncData = (action, {
   loadingEffect,
   errorEffect,
   run,
+  prerun,
   onLoad
 }) => {
+  if (prerun) {
+    // A head start draws none of what it starts, so it has no wait to
+    // delegate.
+    loadingEffect = "use";
+  }
   const loadingRef = useContext(LoadingContext);
   // The boundary is where a suspension lands, so only the delegating path needs
   // one: `loading: true` draws the wait itself and never suspends.
@@ -28839,13 +28956,18 @@ const useActionAsyncData = (action, {
   // no-op — which is what makes starting it while rendering sound. From there
   // the wait is the ordinary one: suspended into <Loading>, or drawn by the
   // component under `loading: true`, exactly as for data someone else ran.
-  if (run && action.runningStateSignal.peek() === IDLE && action.paramsSignal.peek() !== undefined) {
+  if (run && action.paramsSignal.peek() !== undefined && runIsOwed(action)) {
     // Nothing waits on this run: the failure is held by the action, and this
     // hook is what reads it back.
     runUnwatched(() => action.run({
       reason: "useAsyncData({ run: true })"
     }));
   }
+  if (prerun && action.runningStateSignal.peek() === IDLE && action.paramsSignal.peek() !== undefined) {
+    prerunUnwatched(() => action.prerun({
+      reason: "useAsyncData({ prerun: true })"
+    }));
+  }
 
   // Use peek() instead of .value to avoid subscribing this component to the signal.
   // Reading .value would make Preact re-render the component reactively when the state
@@ -28954,6 +29076,11 @@ const useActionAsyncData = (action, {
     return [action.dataSignal.peek(), false, undefined];
   }
   if (runningState === FAILED) {
+    if (prerun) {
+      // Neither shown nor reported from a head start: the failure is the
+      // owner's to ask again (see runIsOwed).
+      return [action.dataSignal.peek(), false, undefined];
+    }
     if (dismissedActionWeakSet.has(action)) {
       // Dismissing removes the error and nothing else: what is handed back is
       // the action's state without it — the data it holds, and no run in
@@ -29059,6 +29186,21 @@ const useActionAsyncData = (action, {
   throw pendingPromise;
 };
 
+// What `run: true` starts from: an action nobody ran, or one a prerun failed.
+// Any other failure stays — a render retrying it would loop while the network
+// is down — but nothing on screen asked for a prerun, so its failure is asked
+// again, once: the mark is taken here, and the run started fails as its own.
+const runIsOwed = action => {
+  const runningState = action.runningStateSignal.peek();
+  if (runningState === IDLE) {
+    return true;
+  }
+  if (runningState === FAILED) {
+    return takePrerunFailure(action.errorSignal.peek());
+  }
+  return false;
+};
+
 // What a screen does with the data once, when it becomes known (see onLoad in
 // the JSDoc above). Kept apart because the two questions it answers are not the
 // ones the hook around it answers: WHEN — a layout effect, so a form taking its
@@ -38595,15 +38737,7 @@ const prefetchAsIf = (action, readParams, values) => {
 // the arrival focuses the link, or is the one that asked), and a reset
 // landing after that would pull the answer from under the page reading it.
 const prerunAhead = (instance) => {
-  let result;
-  try {
-    result = instance.prerun({ reason: "intent" });
-  } catch {
-    return;
-  }
-  if (result && typeof result.catch === "function") {
-    result.catch(() => {});
-  }
+  prerunUnwatched(() => instance.prerun({ reason: "intent" }));
 };
 
 // I delibrately prefer the term "any" and avoid "some" so dev are not tempted to think
@@ -40640,7 +40774,7 @@ registerNaviCommand("--navi-open", (source, event, { anchor, value } = {}) => {
  * The target is found the way --navi-open finds it, but silently: nothing
  * runs here, and a source with no target says so at the release.
  */
-const announceOpeningPress = (source, command) => {
+const announceOpeningPress = (source, command, pointerdownEvent) => {
   if (command !== "--navi-open" && command !== "--navi-toggle") {
     return;
   }
@@ -40651,7 +40785,7 @@ const announceOpeningPress = (source, command) => {
   if (!target) {
     return;
   }
-  dispatchCustomEvent(target, "navi_open_press");
+  dispatchCustomEvent(target, "navi_open_press", { event: pointerdownEvent });
 };
 // "--navi-close:all" closes every expandable above the source, nearest first —
 // a link leaving from a badge shown over a sheet leaves both. A surface that
@@ -40924,11 +41058,18 @@ registerNaviCommand("--navi-unselect", (source, event) => {
  * where a delay is felt hardest — while the ~100-300ms between hovering a
  * trigger and pressing it are free. The warming render starts at the frame
  * after the one that follows the intent: nothing here needs the content in the
- * DOM before the click, only before the open that follows it, and on a touch
- * screen `pointerover` arrives together with the `pointerdown` — a build
- * started there would hold back the frame that shows the press. Two animation
- * frames, never a timeout: browsers hold timers back while a finger is down,
- * and a timeout started by the press fires at its release, on top of the click.
+ * DOM before the click, only before the open that follows it, and a build
+ * started at once would hold back the frame that shows the hover or the focus.
+ *
+ * Under a finger, `pointerover` is not an intent yet: it arrives with the
+ * `pointerdown` of every touch, the ones starting a scroll included, and at
+ * reading speed the browser decides a touch is a scroll about 35ms in — a
+ * build started then holds that scroll start back. So a touch warms once it has been held
+ * TOUCH_WARM_HOLD_MS without the browser taking it (`pointercancel`) or the
+ * finger lifting; a quicker tap builds at the open, like a click with no hover
+ * before it. Counted in animation frames, never a timeout: browsers hold timers
+ * back while a finger is down, and a timeout started by the press fires at its
+ * release, on top of the click.
  *
  * The anchor only says where the popup is placed, so intent inside it is read
  * off the control it is aimed at, the nearest one around the target. A control
@@ -40952,8 +41093,11 @@ registerNaviCommand("--navi-unselect", (source, event) => {
  * anchor: it says where the popup is placed, not what opens it — a card
  * opened by a hold is pressed all day by taps meant for what it holds.
  *
- * The press builds the content, and the press ending without an open throws
- * it away — its click reaching the document with the popup still closed, no
+ * The press builds the content when it starts, a touch once it has been held
+ * as above: the announcement carries the pointerdown that made it. A press
+ * released before its build leaves the building to the open its click asks
+ * for. The press ending without an open throws the content away — its click
+ * reaching the document with the popup still closed, no
  * click coming after the release, the browser taking the gesture
  * (`pointercancel`), or the next press starting, before any of its own
  * handlers run: one press at a time holds a content. A keyboard opening builds
@@ -40997,6 +41141,12 @@ const cancelIdle = (id) =>
     ? cancelIdleCallback(id)
     : clearTimeout(id);
 
+// How long a finger rests on an anchor before it warms it: past the ~35ms at
+// which the browser takes a touch moving at reading speed for a scroll, short
+// of the ~100ms a tap is held, so a deliberate tap is warmed before its
+// release.
+const TOUCH_WARM_HOLD_MS = 80;
+
 const usePopupContentMount = (
   openController,
   ref,
@@ -41087,14 +41237,35 @@ const usePopupContentMount = (
       return undefined;
     }
     let cancelWarm = null;
+    let warmIsTouchHold = false;
     const warm = () => {
       if (cancelWarm) {
         return;
       }
+      warmIsTouchHold = false;
       cancelWarm = requestFrameAfterNext(() => {
         setContentMounted(true);
       });
     };
+    const warmAfterTouchHold = () => {
+      if (cancelWarm) {
+        return;
+      }
+      warmIsTouchHold = true;
+      cancelWarm = requestFrameAfterDuration(TOUCH_WARM_HOLD_MS, () => {
+        setContentMounted(true);
+      });
+    };
+    // A touch leaves the anchor when the finger lifts or the browser takes the
+    // touch: either way, before the hold said anything.
+    const onPointerLeave = () => {
+      if (!warmIsTouchHold) {
+        return;
+      }
+      cancelWarm();
+      cancelWarm = null;
+      warmIsTouchHold = false;
+    };
     // The anchor itself when it is a control (a Popover anchored on the button
     // opening it), or the one the popup is written in (a picker's trigger).
     const isOwnControl = (control) =>
@@ -41114,6 +41285,10 @@ const usePopupContentMount = (
           return;
         }
       }
+      if (pointeroverEvent.pointerType === "touch") {
+        warmAfterTouchHold();
+        return;
+      }
       warm();
     };
     const onFocusIn = (focusinEvent) => {
@@ -41124,10 +41299,12 @@ const usePopupContentMount = (
       warm();
     };
     anchorElement.addEventListener("pointerover", onPointerOver);
+    anchorElement.addEventListener("pointerleave", onPointerLeave);
     anchorElement.addEventListener("focusin", onFocusIn);
     return () => {
       cancelWarm?.();
       anchorElement.removeEventListener("pointerover", onPointerOver);
+      anchorElement.removeEventListener("pointerleave", onPointerLeave);
       anchorElement.removeEventListener("focusin", onFocusIn);
     };
   }, [contentMounted, anchor, mount]);
@@ -41137,12 +41314,14 @@ const usePopupContentMount = (
   const stopPressWarmRef = useRef(null);
   openController.onOpeningPress =
     mount === "while-opened"
-      ? () => {
+      ? (openPressEvent) => {
           if (contentMountedRef.current || openController.onOpen) {
             return;
           }
-          const cancelBuild = requestFrameAfterNext(() => {
-            setContentMounted(true);
+          const cancelBuild = requestBuildOnPress(openPressEvent, {
+            onBuild: () => {
+              setContentMounted(true);
+            },
           });
           const stopWatching = watchPressEnd(() => {
             stopPressWarmRef.current = null;
@@ -41204,6 +41383,64 @@ const requestFrameAfterNext = (callback) => {
   };
 };
 
+// What an opening press builds, it builds at the frame after the next one, so
+// the pressed trigger is painted first — under a finger, once the touch has
+// been held TOUCH_WARM_HOLD_MS (see the top comment). Released or taken by the
+// browser before then, the press builds nothing: the open its click asks for
+// builds, when one comes. Called from the press's own pointerdown, through its
+// navi_open_press: the capture listeners below only hear what follows.
+const requestBuildOnPress = (openPressEvent, { onBuild, onGiveUp }) => {
+  const pointerdownEvent = openPressEvent.detail.event;
+  const cancelFrame =
+    pointerdownEvent.pointerType === "touch"
+      ? requestFrameAfterDuration(TOUCH_WARM_HOLD_MS, () => {
+          stopListening();
+          onBuild();
+        })
+      : requestFrameAfterNext(() => {
+          stopListening();
+          onBuild();
+        });
+  const onPressEnd = (pointerEvent) => {
+    if (pointerEvent.pointerId !== pointerdownEvent.pointerId) {
+      return;
+    }
+    cancel();
+    onGiveUp?.();
+  };
+  const stopListening = () => {
+    document.removeEventListener("pointerup", onPressEnd, { capture: true });
+    document.removeEventListener("pointercancel", onPressEnd, {
+      capture: true,
+    });
+  };
+  const cancel = () => {
+    cancelFrame();
+    stopListening();
+  };
+  document.addEventListener("pointerup", onPressEnd, { capture: true });
+  document.addEventListener("pointercancel", onPressEnd, { capture: true });
+  return cancel;
+};
+
+// The first frame at least `ms` after the call, read off the frames' own
+// timestamps: a 120Hz screen waits as long as a 60Hz one.
+const requestFrameAfterDuration = (ms, callback) => {
+  const start = performance.now();
+  let frame;
+  const onFrame = (timestamp) => {
+    if (timestamp - start >= ms) {
+      callback();
+      return;
+    }
+    frame = requestAnimationFrame(onFrame);
+  };
+  frame = requestAnimationFrame(onFrame);
+  return () => {
+    cancelAnimationFrame(frame);
+  };
+};
+
 // How long the click of a released press may take to arrive. Nothing tells a
 // page that a release brings no click — a press that became a drag has its
 // click swallowed (suppressClickAfterGesture in @jsenv/dom) — so past this the
@@ -50245,7 +50482,7 @@ const usePreloadOpeningOnPress = (ref, command, prefetch = true) => {
       if (pointerdownEvent.button !== 0) {
         return;
       }
-      announceOpeningPress(element, command);
+      announceOpeningPress(element, command, pointerdownEvent);
     };
     element.addEventListener("pointerdown", onPointerDown);
     return () => {
@@ -54421,7 +54658,9 @@ const Expandable = props => {
     // its own (see announceOpeningPress in commands.js) — unless aimed at a
     // control inside the UI part, whose click does not toggle (see onUIClick).
     if (pointerdownEvent.button === 0 && !openController.opened && !isAimedAtControlInsideUI(pointerdownEvent.target)) {
-      dispatchCustomEvent(rootRef.current, "navi_open_press");
+      dispatchCustomEvent(rootRef.current, "navi_open_press", {
+        event: pointerdownEvent
+      });
     }
   };
 
@@ -54842,7 +55081,7 @@ const Expandable = props => {
     ,
     onnavi_open_press: e => {
       rest.onnavi_open_press?.(e);
-      openController.onOpeningPress?.();
+      openController.onOpeningPress?.(e);
     },
     onnavi_request_close: e => {
       rest.onnavi_request_close?.(e);
@@ -54922,8 +55161,8 @@ const ExpandableUI = ({
     onnavi_request_open: e => {
       openController.open(e);
     },
-    onnavi_open_press: () => {
-      openController.onOpeningPress?.();
+    onnavi_open_press: e => {
+      openController.onOpeningPress?.(e);
     },
     onnavi_request_close: e => {
       openController.requestClose(e, {
@@ -66976,10 +67215,10 @@ const DialogStandIn = props => {
     }
     // eslint-disable-next-line react/no-unknown-property
     ,
-    onnavi_open_press: () => {
+    onnavi_open_press: e => {
       // What the opening will read is asked for at once, as the dialog
-      // proper does (see open_controller.js); the dialog itself two frames
-      // later, so the pressed trigger is painted first — the click that
+      // proper does (see open_controller.js); the dialog itself once the
+      // press is taken for one (see requestBuildOnPress) — the click that
       // follows opens it built, or builds it itself when it comes sooner.
       if (signal) {
         preloadState(signal, readOpenValue(value));
@@ -66987,9 +67226,14 @@ const DialogStandIn = props => {
       if (warmRef.current) {
         return;
       }
-      warmRef.current = requestFrameAfterNext(() => {
-        warmRef.current = null;
-        build("press");
+      warmRef.current = requestBuildOnPress(e, {
+        onBuild: () => {
+          warmRef.current = null;
+          build("press");
+        },
+        onGiveUp: () => {
+          warmRef.current = null;
+        }
       });
     }
   });
@@ -67068,8 +67312,8 @@ const UncontrolledDialog = props => {
     // The press announcing that request (see announceOpeningPress in
     // commands.js), heard where the request is.
     ,
-    onnavi_open_press: () => {
-      openController.onOpeningPress?.();
+    onnavi_open_press: e => {
+      openController.onOpeningPress?.(e);
     },
     onnavi_request_close: e => {
       const closing = openController.requestClose(e, {
@@ -68870,8 +69114,8 @@ const UncontrolledPopover = props => {
     // The press announcing that request (see announceOpeningPress in
     // commands.js), heard where the request is.
     ,
-    onnavi_open_press: () => {
-      openController.onOpeningPress?.();
+    onnavi_open_press: e => {
+      openController.onOpeningPress?.(e);
     },
     onnavi_request_close: e => {
       const closing = openController.requestClose(e, {
@@ -70276,15 +70520,15 @@ const css$B = /* css */`.navi_picker_callout_dock > [data-picker-content] {
     display: flex;
   }
 
+  &:has( > .navi_list_container:not([data-scroller], [data-overflow-visible])) {
+    overflow: visible;
+  }
+
   & .navi_list_container {
     --list-border-radius: max(0px,
         var(--popover-border-radius) - var(--popover-border-width));
     overscroll-behavior: none;
     width: 100%;
-
-    &:not([data-overflow-visible]) {
-      overflow: auto;
-    }
   }
 }
 
@@ -70303,15 +70547,15 @@ const css$B = /* css */`.navi_picker_callout_dock > [data-picker-content] {
     flex-direction: column;
   }
 
+  &:has( > .navi_list_container:not([data-scroller], [data-overflow-visible])) {
+    overflow: visible;
+  }
+
   & .navi_list_container {
     --list-border-radius: max(0px,
         var(--dialog-border-radius) - var(--dialog-border-width));
     overscroll-behavior: none;
     width: 100%;
-
-    &:not([data-overflow-visible]) {
-      overflow: auto;
-    }
   }
 }
 `;
@@ -70757,8 +71001,8 @@ const PickerCustom = props => {
       },
       // And the press announcing that request (see announceOpeningPress in
       // commands.js), for the popup's content to be built on it.
-      "onnavi_open_press": () => {
-        dispatchCustomEvent(popupRef.current, "navi_open_press");
+      "onnavi_open_press": e => {
+        dispatchCustomEvent(popupRef.current, "navi_open_press", e.detail);
       },
       "onnavi_request_close": e => {
         const closing = dispatchCustomEvent(popupRef.current, "navi_request_close", e.detail);
@@ -70821,8 +71065,8 @@ const PickerCustom = props => {
       // The press announcing that request (see announceOpeningPress in
       // commands.js), heard where the request is — here too for the same
       // reason. Nothing to gate: the announcer asked before saying it.
-      onnavi_open_press: () => {
-        openController.onOpeningPress?.();
+      onnavi_open_press: e => {
+        openController.onOpeningPress?.(e);
       },
       onnavi_request_close: e => {
         requestInteraction({
@@ -70975,7 +71219,9 @@ const PickerCustom = props => {
           })) {
             return;
           }
-          dispatchCustomEvent(pickerEl, "navi_open_press");
+          dispatchCustomEvent(pickerEl, "navi_open_press", {
+            event: pointerdownEvent
+          });
         };
       }
       let interactions = props.interactions;
@@ -73800,15 +74046,13 @@ const css$x = /* css */`@property --list-group-label-height {
   flex-direction: column;
   transition: opacity .2s;
   display: flex;
-  overflow: hidden;
 
-  &[data-borderless] {
-    --x-list-border-radius: 0px;
-    overflow: visible;
+  &:not([data-borderless], [data-overflow-visible], [data-scroller]) {
+    min-height: 0;
   }
 
-  &[data-overflow-visible="both"] {
-    overflow: visible;
+  &[data-borderless] {
+    --x-list-border-radius: 0px;
   }
 
   &[data-overflow-visible="x"] {