@jsenv/navi 0.29.431 → 0.29.432

package/dist/jsenv_navi.js

@@ -6,7 +6,7 @@ import { installImportMetaCssBuild, coarsePointerSignal, windowHeightSignal, win
 import { createPubSub, elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, findEvent, mergeOneStyle, findFocusable, getElementSignature, chainEvent, isTouchDrivenEvent, getKeyboardEventDefaultAction, isPressDrivenClick, ELEMENT_SIZE_CHANGE, getScrollContainer, scrollIntoViewScoped, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, createValueEffect, findFocusDelegateTarget, scrollIntoViewThroughScrollables, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, getScrollContainerSet, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, keepTouchRefusable, waitForTap, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, dragSourceThatStoodDown, markDragSource, refuseDragTo, startDragTo, installPanZoom, createInternalCustomEvent, activeElementSignal, normalizeStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, trapScrollInside, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, initFocusGroup, stringifyStyle as stringifyStyle$1, isScrollable, resolveOklchLightness, contrastColor, parsePositionArea, snapToPixel, trapFocusInside, onAncestorReopen, isPressDisputedByDrag, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, setVirtualKeyboardOverlaysContent, subscribeVirtualKeyboardGeometryChange, getVirtualKeyboardOverlayHeight } from "@jsenv/dom";
 export { chainEvent, clickIsSuppressed, contrastColor, createDragGestureController, dragAfterIntent, findEvent, markDragSource, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, untracked, batch, useComputed, useSignal } from "@preact/signals";
-import { options, isValidElement, createContext, render, h, toChildArray, createRef, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
+import { options, isValidElement, createContext, render as render$1, h, toChildArray, createRef, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
 import { useErrorBoundary, useLayoutEffect, useContext, useState, useMemo, useRef, useEffect, useCallback, useReducer, useId } from "preact/hooks";
 import { humanizeI18n, setRuntimeLangSource, formatDuration, formatMonth, formatDay, resolveTimeRangePrecision, formatDatePlaceholder, toDate, getRelativeDay, formatDayRelative, formatMonthPlaceholder, formatWeekPlaceholder, formatDatetimePlaceholder, formatDatetime, toTimeOfDay, formatTimeOfDay, formatTime, formatMinuteDuration, formatSecondDuration, formatHourDuration, formatTimeRelative, formatNumber, interpolateText, installInterpolateJsx } from "@jsenv/humanize";
 export { createI18n, formatDatetime, formatDay, formatDayRelative, formatDuration, formatHourDuration, formatMinuteDuration, formatMonth, formatNumber, formatSecondDuration, formatTime, formatTimeOfDay, formatTimeRange, formatTimeRelative, interpolateText } from "@jsenv/humanize";
@@ -11241,13 +11241,22 @@ const installScrollRestoration = () => {
     },
     { passive: true },
   );
+  const positionOnLoad = positionByUrl.get(window.location.href);
+  if (!positionOnLoad) {
+    // Where the browser landed the first page, written down for the reason
+    // startAtTop writes its top: no scroll event says so.
+    positionByUrl.set(window.location.href, {
+      x: window.scrollX,
+      y: window.scrollY,
+    });
+    return;
+  }
   // What a reload asks for, now that the browser has been told not to do it.
   // Once, and at the first render of a route: the position is only meaningful
   // once there is a page under it.
   // Written once the commit that rendered it has ended: said from inside it,
   // and what the offset shows may still have to be built (see scrollTo).
-  const positionOnLoad = positionByUrl.get(window.location.href);
-  if (positionOnLoad && (positionOnLoad.x || positionOnLoad.y)) {
+  if (positionOnLoad.x || positionOnLoad.y) {
     const stopListening = observeRouteRender(() => {
       stopListening();
       queueMicrotask(() => {
@@ -11333,6 +11342,11 @@ const startAtTop = (url, { from } = {}) => {
     return;
   }
   arrivalCount++;
+  // Written down as well as done: a document already at its top fires no
+  // scroll event, and a page left without ever being scrolled would have no
+  // position to come back to — the return would keep the offset of the page
+  // being left.
+  positionByUrl.set(new URL(url, window.location.href).href, { x: 0, y: 0 });
   window.scrollTo({ top: 0, left: 0, behavior: "instant" });
 };
 const isArrival = (url, { from }) => {
@@ -16346,7 +16360,7 @@ const renderIntoCallout = (jsx$1, calloutMessageElement, {
     },
     children: jsx$1
   });
-  render(calloutJsx, calloutMessageElement);
+  render$1(calloutJsx, calloutMessageElement);
 };
 
 // An HTML message is rendered through preact rather than innerHTML: what a
@@ -16369,7 +16383,7 @@ const renderHtmlIntoCallout = (html, calloutMessageElement, {
 // (a DOM node, an iframe); innerHTML alone would leave preact believing its
 // tree is still there.
 const clearCalloutMessage = calloutMessageElement => {
-  render(null, calloutMessageElement);
+  render$1(null, calloutMessageElement);
   calloutMessageElement.innerHTML = "";
 };
 const domToVNodes = node => {
@@ -32262,10 +32276,222 @@ const useUrlSearchParam = (paramName, defaultValue) => {
   return [value, setSearchParamValue];
 };
 
+/**
+ * The colour the browser paints around the page — Chrome's address bar on
+ * Android, the status bar of an installed app — read from
+ * `<meta name="theme-color">`. It sits right above the page's top edge, so it
+ * reads as part of whatever is drawn there, and two layers decide it:
+ *
+ * - What the page asks for: the theme-color metas a `<Head>` brings. The last
+ *   Head to arrive wins, whatever order they leave in — the title's rule, for
+ *   the title's reason (see head.jsx).
+ * - What the top layer lays over that edge: an open popup paints its backdrop
+ *   over what is under it, and its own surface too when it is flush with the
+ *   top edge. Popups sit above every Head, in opening order, and are painted
+ *   again from what is under them each time it changes — a page changing
+ *   under an open popup is dimmed by it all the same.
+ *
+ * The browser reads the first theme-color meta whose `media` matches, in tree
+ * order: a Head appending its meta after an earlier one would never be read.
+ * So navi writes the result into metas of its own placed before any other, and
+ * a meta written in the HTML is the bottom of the stack. A popup paints over
+ * every meta of the list, `media` kept, so whichever one the browser picks is
+ * the one it would have picked, painted over.
+ */
+
+const headEntries = [];
+const popupLayers = [];
+const ownMetas = [];
+
+/**
+ * @param {Array<{ content: string, media: string|null }>} themeColors
+ * @returns {() => void} Takes them away.
+ */
+const pushHeadThemeColors = (themeColors) => {
+  headEntries.push(themeColors);
+  queueRender();
+  return () => {
+    headEntries.splice(headEntries.indexOf(themeColors), 1);
+    queueRender();
+  };
+};
+
+/**
+ * @param {object} paint
+ * @param {string} [paint.themeColor] - Forces the colour, nothing is painted.
+ * @param {string|null} [paint.backdropColor] - Laid over the page's colour.
+ * @param {string|null} [paint.surfaceColor] - Laid over that, for a popup
+ *   flush with the top edge.
+ * @returns {() => void} Takes the layer away.
+ */
+const pushPopupThemeColor = ({
+  themeColor,
+  backdropColor,
+  surfaceColor,
+}) => {
+  let layer;
+  if (themeColor) {
+    layer = { color: themeColor };
+  } else {
+    const paints = [];
+    for (const color of [backdropColor, surfaceColor]) {
+      if (!color) {
+        continue;
+      }
+      const rgba = parseColor(color);
+      if (rgba[3] > 0) {
+        paints.push(rgba);
+      }
+    }
+    // Nothing laid over the edge: the colour under it stays, as it is.
+    if (paints.length === 0) {
+      return () => {};
+    }
+    layer = { paints };
+  }
+  popupLayers.push(layer);
+  queueRender();
+  return () => {
+    popupLayers.splice(popupLayers.indexOf(layer), 1);
+    queueRender();
+  };
+};
+
+let renderQueued = false;
+// Once per commit: a Head re-rendering leaves and arrives again in the same
+// commit, and the browser must not be handed the colour from in between.
+const queueRender = () => {
+  if (renderQueued) {
+    return;
+  }
+  renderQueued = true;
+  queueMicrotask(render);
+};
+
+const render = () => {
+  renderQueued = false;
+  const htmlMetas = Array.from(
+    document.head.querySelectorAll('meta[name="theme-color"]'),
+  ).filter((meta) => !ownMetas.includes(meta));
+  const htmlColors = htmlMetas.map((meta) => ({
+    content: meta.getAttribute("content"),
+    media: meta.getAttribute("media"),
+  }));
+  let colors = [];
+  for (let i = headEntries.length - 1; i >= 0; i--) {
+    colors.push(...headEntries[i]);
+  }
+  colors.push(...htmlColors);
+  for (const layer of popupLayers) {
+    colors = paintLayer(layer, colors);
+  }
+  // What the HTML metas say reaches the browser without a copy.
+  while (colors.length > 0 && htmlColors.includes(colors[colors.length - 1])) {
+    colors.pop();
+  }
+
+  while (ownMetas.length > colors.length) {
+    ownMetas.pop().remove();
+  }
+  colors.forEach(({ content, media }, index) => {
+    let meta = ownMetas[index];
+    if (!meta) {
+      meta = document.createElement("meta");
+      meta.setAttribute("name", "theme-color");
+      const previousMeta = ownMetas[index - 1];
+      if (previousMeta) {
+        previousMeta.after(meta);
+      } else if (htmlMetas.length > 0) {
+        htmlMetas[0].before(meta);
+      } else {
+        document.head.append(meta);
+      }
+      ownMetas.push(meta);
+    }
+    if (meta.getAttribute("content") !== content) {
+      meta.setAttribute("content", content);
+    }
+    if (meta.getAttribute("media") !== media) {
+      if (media === null) {
+        meta.removeAttribute("media");
+      } else {
+        meta.setAttribute("media", media);
+      }
+    }
+  });
+};
+
+const paintLayer = (layer, colors) => {
+  if (layer.color) {
+    return [{ content: layer.color, media: null }];
+  }
+  const underColors =
+    colors.length > 0 ? colors : [{ content: null, media: null }];
+  const painted = [];
+  for (const { content, media } of underColors) {
+    let rgba = content === null ? null : parseUnderColor(content);
+    for (const paint of layer.paints) {
+      rgba = rgba ? composite(paint, rgba) : paint;
+    }
+    // Over no colour at all the browser keeps one of its own, which a
+    // translucent paint cannot be laid over.
+    if (Math.round(rgba[3] * 255) === 255) {
+      painted.push({ content: toHex(rgba), media });
+    }
+  }
+  return painted;
+};
+
+// The browser shows a theme-color opaque, whatever alpha it was written with.
+const parseUnderColor = (color) => {
+  const rgba = parseColor(color);
+  if (rgba[3] === 0) {
+    return null;
+  }
+  return [rgba[0], rgba[1], rgba[2], 1];
+};
+
+// Source-over, the way the backdrop is drawn over the page.
+const composite = (over, under) => {
+  const [r1, g1, b1, a1] = over;
+  const [r2, g2, b2, a2] = under;
+  const alpha = a1 + a2 * (1 - a1);
+  const mix = (c1, c2) => (c1 * a1 + c2 * a2 * (1 - a1)) / alpha;
+  return [mix(r1, r2), mix(g1, g2), mix(b1, b2), alpha];
+};
+
+const toHex = ([r, g, b]) =>
+  `#${[r, g, b]
+    .map((channel) => Math.round(channel).toString(16).padStart(2, "0"))
+    .join("")}`;
+
+// A canvas reads every colour syntax the browser knows — oklch(), color(),
+// a keyword — and hands back sRGB bytes, which is what a theme-color meta is
+// sure to be understood in, whatever getComputedStyle answered with.
+let colorContext = null;
+const parseColor = (color) => {
+  if (!colorContext) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    colorContext = canvas.getContext("2d", { willReadFrequently: true });
+  }
+  colorContext.clearRect(0, 0, 1, 1);
+  // fillStyle ignores a colour it cannot parse: reset first, so that one draws
+  // nothing rather than the previous colour.
+  colorContext.fillStyle = "transparent";
+  colorContext.fillStyle = color;
+  colorContext.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = colorContext.getImageData(0, 0, 1, 1).data;
+  return [r, g, b, a / 255];
+};
+
 // The title belongs to the last Head to arrive, whatever order they leave in:
 // the page being left by a route transition is taken down AFTER the page
 // arriving is up (see keepLeavingPages in route.jsx), and putting back the
-// title it found would put its own page's title over the new one.
+// title it found would put its own page's title over the new one. A
+// theme-color meta follows the same rule, kept by theme_color.js, where the
+// popups of the top layer paint over it.
 const titleEntries = [];
 let titleWithoutHead = null;
 const Head = ({
@@ -32277,6 +32503,7 @@ const Head = ({
     }
     const childArray = Array.isArray(children) ? children : [children];
     const appendedElements = [];
+    const themeColors = [];
     let titleEntry = null;
     for (const child of childArray) {
       if (!child) {
@@ -32289,6 +32516,13 @@ const Head = ({
         };
         continue;
       }
+      if (child.type === "meta" && child.props.name === "theme-color") {
+        themeColors.push({
+          content: child.props.content,
+          media: child.props.media ?? null
+        });
+        continue;
+      }
       const el = document.createElement(child.type);
       const props = child.props || {};
       for (const [key, value] of Object.entries(props)) {
@@ -32304,7 +32538,9 @@ const Head = ({
       titleEntries.push(titleEntry);
       document.title = titleEntry.title;
     }
+    const removeThemeColors = themeColors.length > 0 ? pushHeadThemeColors(themeColors) : null;
     return () => {
+      removeThemeColors?.();
       if (titleEntry) {
         titleEntries.splice(titleEntries.indexOf(titleEntry), 1);
         const lastEntry = titleEntries[titleEntries.length - 1];
@@ -64607,9 +64843,17 @@ const css$E = /* css */`
        on its own, sharp, above the wall: any wall on that frame — even a
        half-strength wash and blur — is a flash on the anchor. So the wall
        arrives from nothing, over the movement: on that frame the page is
-       untouched, and the anchor with it. */
+       untouched, and the anchor with it.
+       Keyed on the aria-expanded flip, like the local wall: openEffect reads
+       the layout while the transitions are off, which spends @starting-style
+       with nothing armed. @starting-style stays for an opening that reads
+       nothing before the flip. A silent opening flips before the transitions
+       come back, hence the :not(): its wall lands at once. */
     &[data-lifting] {
-      &::backdrop {
+      &[aria-expanded="false"]::backdrop {
+        opacity: 0;
+      }
+      &[aria-expanded="true"]:not([navi-transitions-off])::backdrop {
         opacity: 1;
         transition-property: opacity;
         transition-duration: var(--navi-popup-lift-duration, 0.25s);
@@ -65069,6 +65313,16 @@ const css$E = /* css */`
  *   `saturate()`/`grayscale()` work too. How far what is behind withdraws is
  *   a question of paint, not of what an outside click does — a backdrop that
  *   closes can blur.
+ * @param {string|false} [props.themeColor] - The colour the browser paints
+ *   above the page (`<meta name="theme-color">`: Chrome's address bar on
+ *   Android, an installed app's status bar) while this dialog is open.
+ *   Left out, it is what the dialog lays over the top edge of the screen: its
+ *   backdrop over the colour the page asked for (`<Head>`), and its own
+ *   background over that when it is flush with the top edge
+ *   (`marginWithContainer={0}` with `expand`/`expandY` or a top
+ *   `positionArea`). A colour forces it, for a surface whose colour cannot be
+ *   read (an image, a gradient); `false` leaves the page's colour alone.
+ *   `layer="top"` only.
  * @param {boolean} [props.scrollCapture] - Traps scroll gestures inside the
  *   dialog so the page/container behind it can't scroll while it's open.
  *   A `layer="local"` dialog always locks its own positioned ancestor's
@@ -65590,6 +65844,9 @@ const useDialogProps = props => {
     // so both objects below get them (see this file's CSS).
     backdropColor,
     backdropFilter,
+    // Read at the opening, with the backdrop and the surface it would
+    // otherwise be worked out from (see openEffect).
+    themeColor,
     scrollCapture: scrollCaptureProp,
     // "auto" (default) → the dialog follows its content. "frozen" → measured
     // once, held at that size while open. See this prop's own JSDoc above.
@@ -66173,6 +66430,16 @@ const useDialogProps = props => {
         backdropEl.style.transitionProperty = "";
       }
     }
+    // What the browser paints above the page goes with what is laid over its
+    // top edge, from the start of the opening to the start of the closing: a
+    // local dialog lays nothing there.
+    if (isTopLayer && themeColor !== false) {
+      addCleanup(pushPopupThemeColor({
+        themeColor,
+        backdropColor: backdrop ? getComputedStyle(dialogEl, "::backdrop").backgroundColor : null,
+        surfaceColor: flushEdges.top ? getComputedStyle(dialogEl).backgroundColor : null
+      }));
+    }
     const cancelOpenInteractionSuppression = !silent && hasCssTransitionAnimation ? suppressPointerEventsDuringTransition(dialogEl) : null;
     // Handing the focus to a field is what raises the on-screen keyboard, and
     // the keyboard takes away the very room this dialog was just placed
@@ -66975,6 +67242,12 @@ const css$D = /* css */`
  *   `saturate()`/`grayscale()` work too. How far what is behind withdraws is
  *   a question of paint, not of what an outside click does — a backdrop that
  *   closes can blur.
+ * @param {string|false} [props.themeColor] - The colour the browser paints
+ *   above the page (`<meta name="theme-color">`: Chrome's address bar on
+ *   Android, an installed app's status bar) while this popover is open.
+ *   Left out, it is the backdrop laid over the colour the page asked for
+ *   (`<Head>`), and the page's colour when there is no backdrop. A colour
+ *   forces it; `false` leaves the page's colour alone. `layer="top"` only.
  * @param {boolean} [props.scrollCapture] - Traps scroll gestures inside the
  *   popover so the page/container behind it can't scroll while it's open.
  * @param {boolean} [props.focusCapture] - Traps Tab navigation inside the
@@ -67317,6 +67590,9 @@ const usePopoverProps = props => {
     // which is a sibling element (see this file's top comment).
     backdropColor,
     backdropFilter,
+    // Read at the opening, with the backdrop it would otherwise be worked out
+    // from (see openEffect).
+    themeColor,
     group,
     scrollCapture,
     focusCapture,
@@ -67921,6 +68197,15 @@ const usePopoverProps = props => {
         backdropEl.style.transitionProperty = "";
       }
     }
+    // What the browser paints above the page goes with what is laid over its
+    // top edge, from the start of the opening to the start of the closing: a
+    // local popover's backdrop stops at its container.
+    if (isTopLayer && themeColor !== false) {
+      addCleanup(pushPopupThemeColor({
+        themeColor,
+        backdropColor: backdropEl ? getComputedStyle(backdropEl).backgroundColor : null
+      }));
+    }
     const cancelOpenInteractionSuppression = !silent && hasCssTransitionAnimation ? suppressPointerEventsDuringTransition(popoverEl) : null;
     // autoFocus={false}: opening moves no focus at all — whoever has the
     // keyboard keeps it (combobox-style suggestions under an input being
@@ -68336,6 +68621,10 @@ const css$C = /* css */`@layer navi {
  *   identically): the wash the backdrop paints over what is behind.
  * @param {string} [props.backdropFilter] - Forwarded as-is: what that wash
  *   does to the picture underneath, `"blur(4px)"` and the like.
+ * @param {string|false} [props.themeColor] - Forwarded as-is: the colour the
+ *   browser paints above the page while the popup is open, worked out from
+ *   what it lays over the top edge when left out. A colour forces it, `false`
+ *   leaves the page's colour alone.
  * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|`slide-from-${string}`|"expanding"|`expand-${string}`|"lifting"|{open: boolean|"auto"|"fading"|"scaling"|"sliding"|`slide-from-${string}`, close: "lifting"}} [props.animation]
  *   - Forwarded to whichever renders — see either component's own doc.
  *   `"expanding"`/`"expand-*"` are `Popover`'s own; `"lifting"` and
@@ -69333,6 +69622,26 @@ const PickerCustom = props => {
             if (isWithinPickerContent(e.target)) {
               return null;
             }
+            // Still open at the click of a later press: that press brought no
+            // mousedown to close on (a drag source cancelled its pointerdown),
+            // so it closes here, as it opens here in that case. A mousedown
+            // that came has closed it already; the press that opened it is
+            // only ending.
+            if (openController.opened && !openedDuringThisPress(openController)) {
+              return {
+                name: "click to close picker",
+                intent: "read",
+                prevented: () => {
+                  e.preventDefault();
+                },
+                allowed: () => {
+                  requestClose(e, {
+                    isCancel: true
+                  });
+                  e.preventDefault();
+                }
+              };
+            }
             if (!opensOnPress) {
               // Neither the tap, nor the click a hold leaves behind: the press
               // is not what opens this picker.
@@ -69988,12 +70297,12 @@ const isScrolling = (element) => {
   if (element === undefined) {
     return scrollActivitySignal.peek();
   }
-  return asScroller(element).hasAttribute("navi-scrolling");
+  return asScroller$1(element).hasAttribute("navi-scrolling");
 };
 
 // The page scroll is dispatched on the document; the element carrying the
 // attribute is the one CSS can reach, document.scrollingElement.
-const asScroller = (eventTargetOrElement) => {
+const asScroller$1 = (eventTargetOrElement) => {
   if (eventTargetOrElement === document || eventTargetOrElement === window) {
     return document.scrollingElement;
   }
@@ -70004,7 +70313,7 @@ const idleTimeoutMap = new Map();
 document.addEventListener(
   "scroll",
   (e) => {
-    const scroller = asScroller(e.target);
+    const scroller = asScroller$1(e.target);
     const idleTimeout = idleTimeoutMap.get(scroller);
     if (idleTimeout !== undefined) {
       clearTimeout(idleTimeout);
@@ -70026,6 +70335,111 @@ document.addEventListener(
   { capture: true, passive: true },
 );
 
+/*
+ * Whether a scroller is gliding: moving on its own toward a place it was sent
+ * to, with no hand on it — a key (Home, PageDown, Space), a smooth `scrollTo`
+ * or `scrollIntoView`, the status bar tap on iOS. The other scrolls follow a
+ * hand: a finger on the screen, a wheel turning.
+ *
+ * It matters to whoever writes a scroll position while one plays: the write is
+ * an instant scroll, and the browser abandons the glide for it, short of where
+ * it was going. A hand is not abandoned: its next report moves the scroller on
+ * from wherever the write left it.
+ *
+ * A scroll is followed from its first "scroll" event to its "scrollend". It is
+ * a hand's when a finger was down as it started (the fling a finger leaves
+ * behind is still its own), when one is down now, or when a wheel turned
+ * around the time it started or since. A finger is down from its
+ * touchstart to its touchend, heard on what it touched: a list removes the
+ * items scrolled out of its window while the finger is still on one of them,
+ * and the touchend of a removed element never reaches the document.
+ *
+ * In a browser without "scrollend", nothing is said to glide: a scroll would
+ * never be seen ending.
+ */
+
+// The scroll a wheel turn causes starts in the frame the turn is read, or the
+// next one. A turn further from it moved nothing (a wheel at an edge) and is no
+// hand on a scroll that came from elsewhere.
+const WHEEL_REACH = 100;
+
+const flightMap = new WeakMap();
+let fingersDown = 0;
+let wheelTimeStamp = -Infinity;
+
+/**
+ * @param {Element} scrollerEl
+ * @returns {boolean}
+ */
+const isScrollGliding = (scrollerEl) => {
+  const flight = flightMap.get(scrollerEl);
+  if (!flight) {
+    return false;
+  }
+  if (flight.fingerDown || fingersDown > 0) {
+    return false;
+  }
+  if (wheelTimeStamp > flight.timeStamp - WHEEL_REACH) {
+    return false;
+  }
+  return true;
+};
+
+// The page scroll is dispatched on the document; the scroller asked about is
+// document.scrollingElement.
+const asScroller = (eventTarget) => {
+  if (eventTarget === document || eventTarget === window) {
+    return document.scrollingElement;
+  }
+  return eventTarget;
+};
+
+const onTouchEnd = (e) => {
+  fingersDown = e.touches.length;
+};
+
+if ("onscrollend" in window) {
+  // Capturing: "scroll" and "scrollend" do not bubble from an element.
+  document.addEventListener(
+    "scroll",
+    (e) => {
+      const scroller = asScroller(e.target);
+      if (flightMap.has(scroller)) {
+        return;
+      }
+      flightMap.set(scroller, {
+        timeStamp: e.timeStamp,
+        fingerDown: fingersDown > 0,
+      });
+    },
+    { capture: true, passive: true },
+  );
+  document.addEventListener(
+    "scrollend",
+    (e) => {
+      flightMap.delete(asScroller(e.target));
+    },
+    { capture: true, passive: true },
+  );
+  window.addEventListener(
+    "wheel",
+    (e) => {
+      wheelTimeStamp = e.timeStamp;
+    },
+    { capture: true, passive: true },
+  );
+  window.addEventListener(
+    "touchstart",
+    (e) => {
+      fingersDown = e.touches.length;
+      const touchedEl = e.composedPath()[0];
+      touchedEl.addEventListener("touchend", onTouchEnd, { passive: true });
+      touchedEl.addEventListener("touchcancel", onTouchEnd, { passive: true });
+    },
+    { capture: true, passive: true },
+  );
+}
+
 const LoadingDotsSvg = () => {
   return jsxs("svg", {
     viewBox: "0 0 200 200",
@@ -73109,7 +73523,9 @@ const useListScrollSync = ({
   const scrolledFallback = scrolled === undefined || scrolled === null ? "start" : defaultScrolled ?? "start";
   const startPlaceRef = useRef({
     userTookOver: false,
-    wanted: scrolledWanted
+    wanted: scrolledWanted,
+    way: null,
+    arrived: false
   });
   if (startPlaceRef.current.wanted !== scrolledWanted) {
     startPlaceRef.current.wanted = scrolledWanted;
@@ -73319,8 +73735,10 @@ const useListScrollSync = ({
   // keeps moving while the list is still finding out how many items it has and
   // how tall one is, so landing there once would land next to it. What ends the
   // hold is the user reaching for the list — a wheel, a finger, a key, a hand
-  // on the scrollbar — and not the scroll event itself, which the list provokes
-  // as much as the user does.
+  // on the scrollbar — or anything else moving it. A scroll event alone does
+  // not say which: the list provokes as many as the user does, so only one
+  // landing off the way of the list's own placement ends it (see
+  // sendHeldScroll).
   const placeWhereHeld = () => {
     if (scrolledWanted === "start" || scrolledWanted === undefined || startPlaceRef.current.userTookOver || !ref.current) {
       return;
@@ -73369,12 +73787,7 @@ const useListScrollSync = ({
     }
     const scrollerEl = getScroller();
     if (openAt === "end") {
-      anchorRef.current = null;
-      if (horizontal) {
-        scrollerEl.scrollLeft = scrollerEl.scrollWidth;
-      } else {
-        scrollerEl.scrollTop = scrollerEl.scrollHeight;
-      }
+      sendHeldScroll(horizontal ? scrollerEl.scrollWidth : scrollerEl.scrollHeight);
       return;
     }
     if (typeof openAt === "number") {
@@ -73398,15 +73811,45 @@ const useListScrollSync = ({
     const itemRect = itemEl.getBoundingClientRect();
     const offsetWanted = resolveOpenOffset(getItemScrollInset(scrollerEl, itemEl, horizontal) + offset, horizontal ? viewportRect.width : viewportRect.height, horizontal ? itemRect.width : itemRect.height);
     const offsetNow = horizontal ? itemRect.left - viewportRect.left : itemRect.top - viewportRect.top;
+    const scrollNow = horizontal ? scrollerEl.scrollLeft : scrollerEl.scrollTop;
     const delta = offsetNow - offsetWanted;
     if (delta > -0.5 && delta < 0.5) {
+      sendHeldScroll(scrollNow);
       return;
     }
+    sendHeldScroll(scrollNow + delta);
+  };
+  // Every placement goes through here, the ones that find the list in place
+  // too: it keeps the way from where the scroller was to where it is sent,
+  // which is how a scroll event tells the hold's own scrolls from anyone
+  // else's (see letGoUnlessHeldScroll). The whole way, not just its end: under
+  // `scroll-behavior: smooth` the write glides, and every position on the way
+  // is the list's until it gets there.
+  const sendHeldScroll = position => {
+    const scrollerEl = getScroller();
+    const from = horizontal ? scrollerEl.scrollLeft : scrollerEl.scrollTop;
+    const max = horizontal ? scrollerEl.scrollWidth - scrollerEl.clientWidth : scrollerEl.scrollHeight - scrollerEl.clientHeight;
+    let to = position;
+    if (to > max) {
+      to = max;
+    }
+    if (to < 0) {
+      to = 0;
+    }
     anchorRef.current = null;
+    const place = startPlaceRef.current;
+    place.way = {
+      from,
+      to
+    };
+    if (to === from) {
+      place.arrived = true;
+      return;
+    }
     if (horizontal) {
-      scrollerEl.scrollLeft += delta;
+      scrollerEl.scrollLeft = to;
     } else {
-      scrollerEl.scrollTop += delta;
+      scrollerEl.scrollTop = to;
     }
   };
   useLayoutEffect(placeWhereHeld);
@@ -73479,6 +73922,19 @@ const useListScrollSync = ({
     evaluateWindowRef.current("items resized");
     return false;
   };
+  // The box around a held list changing shape is the hold's to answer too: it
+  // places the list again, the way it writes every scroll of its own (see
+  // sendHeldScroll) — written any other way, the scroll would read as someone
+  // else moving the list, and end the hold.
+  const placeIfHeldRef = useRef(null);
+  placeIfHeldRef.current = () => {
+    // Read again: a scroll may have ended the hold since this render.
+    if (!heldSomewhere || startPlaceRef.current.userTookOver) {
+      return false;
+    }
+    placeWhereHeld();
+    return true;
+  };
   useLayoutEffect(() => {
     if (scrolledWanted === "start" || scrolledWanted === undefined || !ref.current) {
       return undefined;
@@ -73623,6 +74079,9 @@ const useListScrollSync = ({
       if (!entries.some(entry => entry.target === scrollerEl)) {
         return;
       }
+      if (placeIfHeldRef.current()) {
+        return;
+      }
       const position = positionRef.current;
       if (!position) {
         return;
@@ -73735,6 +74194,15 @@ const useListScrollSync = ({
       return;
     }
     anchorRef.current = null;
+    if (isScrollGliding(scrollerEl)) {
+      // Nobody is looking at items standing still: they are passing by, on
+      // their way somewhere the browser was asked to take them (a key, a smooth
+      // scrollTo, the status bar). The write would be an instant scroll, and
+      // the browser abandons the glide for it, short of where it was going.
+      // Left alone, the items drawn above push the rest by `drift` while all
+      // of it moves, and the glide lands.
+      return;
+    }
     scrolledByListRef.current = true;
     if (horizontal) {
       scrollerEl.scrollLeft += drift;
@@ -74062,9 +74530,44 @@ const useListScrollSync = ({
         reportPosition();
         return;
       }
+      letGoUnlessHeldScroll();
       reportPosition();
       evaluateWindowRef.current("scroll");
     };
+    // A scroll the hold did not write is someone else moving the list, which
+    // ends the hold like a wheel does — the ones that come with no input event
+    // at all: the status bar tap on iOS, find in page, a script.
+    // Only once the list has stood where it holds itself, though. Until then
+    // the page is still settling around it, and some of that is written after
+    // the list placed itself: a navigation holding the rendering for its
+    // transition takes the arriving page to its top once the page rendered
+    // (whenRenderingResumes), and the hold puts it back at its next commit.
+    const letGoUnlessHeldScroll = () => {
+      const place = startPlaceRef.current;
+      const way = place.way;
+      if (place.userTookOver || place.wanted === "start" || place.wanted === undefined || !way) {
+        return;
+      }
+      const position = horizontal ? scrollerEl.scrollLeft : scrollerEl.scrollTop;
+      if (position > way.to - 1 && position < way.to + 1) {
+        // From then on only that place is the list's, or a scroll back the
+        // way it came would pass for its own.
+        place.way = {
+          from: way.to,
+          to: way.to
+        };
+        place.arrived = true;
+        return;
+      }
+      if (!place.arrived) {
+        return;
+      }
+      const low = way.from < way.to ? way.from : way.to;
+      const high = way.from < way.to ? way.to : way.from;
+      if (position < low - 1 || position > high + 1) {
+        place.userTookOver = true;
+      }
+    };
     // A page-level scroller does not emit "scroll" on the element itself
     // (document.scrollingElement); the document does.
     const scrollEventTarget = scrollerEl === document.scrollingElement ? document : scrollerEl;
@@ -77453,7 +77956,8 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *
  *   In every form the list holds itself there while it is still finding out
  *   how many items there are and how tall one is, and lets go the moment the
- *   user reaches for the list.
+ *   user reaches for the list, or anything else scrolls it (a script, find in
+ *   page, the status bar tap on iOS).
  * @param {(scrolled: {id: string, index: number, offset: number, visibleCount: number}) => void} [props.onScrolledChange]
  *   Where the list is, as the user scrolls: the item at the top of the view and
  *   how far below the place an item lands on its own (see `defaultScrolled`) it