@jsenv/navi 0.29.434 → 0.29.436

package/dist/dev/jsenv_navi.js

@@ -7,11 +7,11 @@ import { createPubSub, elementIsFocusable, createIterableWeakSet, dispatchIntern
 export { chainEvent, clickIsSuppressed, contrastColor, createDragGestureController, dragAfterIntent, findEvent, markDragSource, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, untracked, batch, useComputed, useSignal } from "@preact/signals";
 import { options, isValidElement, createContext, render 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 { useErrorBoundary, useLayoutEffect, useContext, useState, useMemo, useRef, useEffect, useReducer, useCallback, useId } from "preact/hooks";
 import { humanizeI18n, prefixFirstAndIndentRemainingLines, setRuntimeLangSource, formatDuration, formatMonth, formatDay, resolveTimeRangePrecision, formatDatePlaceholder, toDate, getRelativeDay, formatDayRelative, formatMonthPlaceholder, formatWeekPlaceholder, formatDatetimePlaceholder, formatDatetime, toTimeOfDay, formatTimeOfDay, formatTime, formatMinuteDuration, formatSecondDuration, formatHourDuration, formatTimeRelative, formatNumber, interpolateText, installInterpolateJsx } from "@jsenv/humanize";
 export { createI18n, formatDatetime, formatDay, formatDayRelative, formatDuration, formatHourDuration, formatMinuteDuration, formatMonth, formatNumber, formatSecondDuration, formatTime, formatTimeOfDay, formatTimeRange, formatTimeRelative, interpolateText } from "@jsenv/humanize";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
-import { CHAR_CLASS_PRESETS, createValidity, TYPE_RULE, durationContainsNaN, compareTwoDurations, durationToSeconds, DISPLAYABLE_RULE, MAX_LINE_BREAKS_RULE, NO_EMOJI_RULE, SINGLE_SPACE_RULE, resolveCharClass, getCharClassMessageKey, compileCharClassAnchored, compileCharClass, parseDuration, durationToISOString } from "@jsenv/validity";
+import { CHAR_CLASS_PRESETS, createValidity, durationContainsNaN, compareTwoDurations, TYPE_RULE, durationToSeconds, DISPLAYABLE_RULE, MAX_LINE_BREAKS_RULE, NO_EMOJI_RULE, SINGLE_SPACE_RULE, resolveCharClass, getCharClassMessageKey, compileCharClassAnchored, compileCharClass, parseDuration, durationToISOString } from "@jsenv/validity";
 export { compareTwoDurations, durationContainsNaN, durationToHours, durationToISOString, durationToMinutes, durationToNumber, durationToSeconds, durationToString, parseDuration } from "@jsenv/validity";
 import { Suspense, createPortal, forwardRef } from "preact/compat";
 
@@ -971,8 +971,10 @@ naviI18n.addAll({
   },
 });
 
-// Spin messages — the ends of what one steps through, said without naming
-// what it is made of: the same words fit days, months, pages or sizes.
+// Spin messages — the ends of what one steps through when the control holding
+// it has no sentence of its own for a bound (a day or a number says its
+// constraint.min/max one, see picker_spin.jsx): said without naming what it is
+// made of, so they fit pages, sizes or any list of items.
 naviI18n.addAll({
   "spin.previous": {
     en: "Previous",
@@ -11207,6 +11209,42 @@ const urlWithoutSearchAndHash = (url) => {
   return `${urlObject.origin}${urlObject.pathname}`;
 };
 
+/**
+ * What a component can learn about the page it is rendered in, from the route
+ * container rendering that page (see useContentKeepingLeavingPages in
+ * route.jsx). `null` outside of any route container.
+ *
+ * - `isShown()` — whether the container would still show the page. False as
+ *   soon as the address leads elsewhere: the page is about to be taken down, or
+ *   hidden until the route transition leaving it is over, and nothing it reads
+ *   is worth a render any more. False for good once it is kept while leaving: a
+ *   return to its route mounts the page anew. Asked outside any render — by a
+ *   subscription deciding whether to re-render — and it reads the routes
+ *   untracked, so asking subscribes nobody to them.
+ * - `leavingSignal` — true once the page is hidden and kept while its movement
+ *   plays: still mounted, so what it fills outside its own nodes (a slot in a
+ *   bar) steps out rather than showing with the page arriving.
+ */
+const RoutePageContext = createContext(null);
+
+/**
+ * A container has put its page on screen — or as much of it as it can.
+ *
+ * A route matching is a signal changing, and the page it selects reaches the
+ * DOM only once Preact has rendered — an unknown number of passes later, in an
+ * unknown number of microtasks. Anyone who needs the page as it IS rather than
+ * as it has been decided (a travel about to have its picture taken by the
+ * browser, see route_travel.jsx) waits for this instead of counting.
+ *
+ * A page waiting on data is announced too, by the boundary showing its loading
+ * state (see Loading in use_async_data.jsx): what the container could put on
+ * screen is what the browser is about to take a picture of, and a page that
+ * cannot render yet would otherwise be waited on until the transition dies of
+ * it. It lives in a module of its own for that: the async layer says it as much
+ * as the router does, and neither can import the other.
+ */
+const [publishRouteRender, observeRouteRender] = createPubSub();
+
 const documentStateSignal = signal(null);
 const useDocumentState = () => {
   return documentStateSignal.value;
@@ -11466,24 +11504,6 @@ const readTopInWindow = element => {
   return element.getBoundingClientRect().top;
 };
 
-/**
- * A container has put its page on screen — or as much of it as it can.
- *
- * A route matching is a signal changing, and the page it selects reaches the
- * DOM only once Preact has rendered — an unknown number of passes later, in an
- * unknown number of microtasks. Anyone who needs the page as it IS rather than
- * as it has been decided (a travel about to have its picture taken by the
- * browser, see route_travel.jsx) waits for this instead of counting.
- *
- * A page waiting on data is announced too, by the boundary showing its loading
- * state (see Loading in use_async_data.jsx): what the container could put on
- * screen is what the browser is about to take a picture of, and a page that
- * cannot render yet would otherwise be waited on until the transition dies of
- * it. It lives in a module of its own for that: the async layer says it as much
- * as the router does, and neither can import the other.
- */
-const [publishRouteRender, observeRouteRender] = createPubSub();
-
 /**
  * Where a page was left, given back when one comes back to it.
  *
@@ -12938,15 +12958,12 @@ const useNavStateWithWarnings = (id, options) => {
     ownerRef.current = {};
   }
   const owner = ownerRef.current;
-  // Claimed during render so warnAboutOrphanGeneratedKeys sees every id of
-  // the commit, including the ones whose effect has not run yet. The conflict
-  // is judged in the effect: when a screen replaces another in one commit,
-  // preact renders the new children before unmounting the old ones, so at
-  // render time the id may still be held by a component about to go.
-  if (id !== undefined && !idUsageMap.has(id)) {
-    idUsageMap.set(id, { owner, stackTrace: new Error().stack });
-  }
 
+  // Claimed in the effect, never during render: only the effect has a cleanup
+  // to give the id back, and a render is not always followed by its effects.
+  // A page parked by a Suspense boundary (every hook cleanup run), rendered
+  // again and taken down before the paint, leaves a render-time claim holding
+  // the id for nobody — and the next mount reads a conflict.
   useEffect(() => {
     if (id === undefined) {
       return undefined;
@@ -12960,12 +12977,9 @@ This can cause UI state conflicts and unexpected behavior.
 Consider using unique IDs for each component instance.`,
       );
     } else {
-      // Also set when absent: preact/compat's Suspense parks a subtree by
-      // running every hook cleanup in it, and the render resuming it carries
-      // the same id.
       idUsageMap.set(id, { owner, stackTrace: new Error().stack });
     }
-    warnAboutOrphanGeneratedKeys();
+    scheduleOrphanGeneratedKeysCheck();
     return () => {
       if (idUsageMap.get(id)?.owner === owner) {
         idUsageMap.delete(id);
@@ -12981,6 +12995,20 @@ Consider using unique IDs for each component instance.`,
 // and the mount coming back to the entry generates another id: the state is
 // there, and nothing reads it. Reported when a component mounting on the entry
 // finds such a key, the moment someone expected the state back.
+//
+// Checked once every effect of the flush has claimed its id: a component
+// whose effect comes later in the same flush is not an orphan.
+let orphanGeneratedKeysCheckScheduled = false;
+const scheduleOrphanGeneratedKeysCheck = () => {
+  if (orphanGeneratedKeysCheckScheduled) {
+    return;
+  }
+  orphanGeneratedKeysCheckScheduled = true;
+  queueMicrotask(() => {
+    orphanGeneratedKeysCheckScheduled = false;
+    warnAboutOrphanGeneratedKeys();
+  });
+};
 const warnAboutOrphanGeneratedKeys = () => {
   const state = browserIntegration.getDocumentState();
   if (!state) {
@@ -13003,6 +13031,7 @@ const warnAboutOrphanGeneratedKeys = () => {
 
 const NO_OP = () => {};
 const NO_ID_GIVEN = [undefined, NO_OP, NO_OP];
+const countRenders$1 = (count) => count + 1;
 // What the computed below answers for a key the document state does not hold:
 // key presence is the flag, and the value under a present key may be anything,
 // undefined included.
@@ -13031,7 +13060,36 @@ const useNavStateBasic = (
     [id],
   );
   const keyValue = keyValueComputed.value;
-  const keyInState = keyValue !== KEY_NOT_IN_STATE;
+  // A page the address has left keeps reading the entry it was shown on until
+  // it is taken down (kept hidden while a route transition plays): the new
+  // entry would close what was open there — a Picker as a cancel — where the
+  // same page taken down at once is only unmounted. Its render still happens:
+  // the state is written before the routes say the page is left.
+  const routePage = useContext(RoutePageContext);
+  const keyValueReadRef = useRef(keyValue);
+  const keyValueWithheld =
+    keyValue !== keyValueReadRef.current &&
+    routePage !== null &&
+    !routePage.isShown();
+  if (!keyValueWithheld) {
+    keyValueReadRef.current = keyValue;
+  }
+  const keyValueRead = keyValueReadRef.current;
+  // Owed rather than dropped, as in useAsyncData: the address can come back
+  // before the container renders (a redirect straight back), and the page then
+  // stays on screen.
+  const [, rerender] = useReducer(countRenders$1, 0);
+  useEffect(() => {
+    if (!keyValueWithheld) {
+      return undefined;
+    }
+    return observeRouteRender(() => {
+      if (routePage.isShown()) {
+        rerender();
+      }
+    });
+  }, [keyValueWithheld]);
+  const keyInState = keyValueRead !== KEY_NOT_IN_STATE;
   const onLeaveRef = useRef(onLeave);
   onLeaveRef.current = onLeave;
   const prevKeyInStateRef = useRef(keyInState);
@@ -13066,7 +13124,7 @@ const useNavStateBasic = (
     effectiveType = "replace";
   }
 
-  const currentValue = keyInState ? keyValue : defaultValue;
+  const currentValue = keyInState ? keyValueRead : defaultValue;
 
   if (debug) {
     console.debug(`useNavState(${id}) current value is ${currentValue}`);
@@ -13134,6 +13192,8 @@ const useNavStateBasic = (
 /**
  * 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).
+ * In a page the address has left — kept hidden while a route transition plays —
+ * the value stays the one of the entry that page was shown on.
  *
  * @param {string} id
  *   Unique key used to store the value in document state. Must be stable across renders.
@@ -20285,18 +20345,17 @@ const MIN_CONSTRAINT = {
       if (cmp === null || cmp >= 0) {
         return null;
       }
-
-      return naviI18n("constraint.min.duration.default", {
-        min: formatDuration(min),
-      });
+      return boundMessage(field, "min");
     }
     if (field.controlType !== "input" && field.controlType !== "picker") {
       return null;
     }
-    const minString = field.controlHostProps.min;
-    if (!minString) {
+    const min = field.controlHostProps.min;
+    // 0 is a bound like any other: only a bound nobody gave is skipped.
+    if (min === undefined || min === null || min === "") {
       return null;
     }
+    const minString = String(min);
     const type = field.controlHostProps.type;
     const naviInputType = field.controlHostProps["navi-input-type"];
     const valueAsString = uiStateAsText(field.uiState);
@@ -20312,40 +20371,16 @@ const MIN_CONSTRAINT = {
       if (isNaN(numericValue)) {
         return null;
       }
-      if (numericValue < minNumber) {
-        if (naviInputType === "hour") {
-          return naviI18n(`constraint.min.hour.default`, {
-            min: minString,
-          });
-        }
-        if (naviInputType === "minute") {
-          return naviI18n(`constraint.min.minute.default`, {
-            min: minString,
-          });
-        }
-        if (naviInputType === "second") {
-          return naviI18n(`constraint.min.second.default`, {
-            min: minString,
-          });
-        }
-        if (naviInputType === "percentage") {
-          return naviI18n(`constraint.min.percentage.default`, {
-            min: minString,
-          });
-        }
-        return naviI18n(`constraint.min.number.default`, {
-          min: minString,
-        });
+      if (numericValue >= minNumber) {
+        return null;
       }
-      return null;
+      return boundMessage(field, "min");
     }
     if (type === "time") {
       const [minHours, minMinutes] = minString.split(":").map(Number);
       const [hours, minutes] = valueAsString.split(":").map(Number);
       if (hours < minHours || (hours === minHours && minutes < minMinutes)) {
-        return naviI18n("constraint.min.time.default", {
-          min: minString,
-        });
+        return boundMessage(field, "min");
       }
       return null;
     }
@@ -20353,18 +20388,13 @@ const MIN_CONSTRAINT = {
     // so they never need a min/max validation message.
     if (DATE_INPUT_TYPE_SET.has(type)) {
       if (valueAsString < minString) {
-        const todayIso = getTodayIso(type);
-        if (minString === todayIso) {
-          return naviI18n("constraint.min.date.today.default");
-        }
-        return naviI18n("constraint.min.date.default", {
-          min: formatDateIso(minString, type),
-        });
+        return boundMessage(field, "min");
       }
       return null;
     }
     return null;
   },
+  messageAtBound: (field) => boundMessage(field, "min"),
 };
 CONSTRAINT_ATTRIBUTE_SET.add("min");
 
@@ -20384,18 +20414,17 @@ const MAX_CONSTRAINT = {
       if (cmp === null || cmp <= 0) {
         return null;
       }
-
-      return naviI18n("constraint.max.duration.default", {
-        max: formatDuration(max),
-      });
+      return boundMessage(field, "max");
     }
     if (field.controlType !== "input" && field.controlType !== "picker") {
       return null;
     }
-    const maxString = field.controlHostProps.max;
-    if (!maxString) {
+    const max = field.controlHostProps.max;
+    // 0 is a bound like any other: only a bound nobody gave is skipped.
+    if (max === undefined || max === null || max === "") {
       return null;
     }
+    const maxString = String(max);
     const type = field.controlHostProps.type;
     const naviInputType = field.controlHostProps["navi-input-type"];
     const valueAsString = uiStateAsText(field.uiState);
@@ -20414,38 +20443,13 @@ const MAX_CONSTRAINT = {
       if (numericValue <= maxNumber) {
         return null;
       }
-
-      if (naviInputType === "hour") {
-        return naviI18n(`constraint.max.hour.default`, {
-          max: maxString,
-        });
-      }
-      if (naviInputType === "minute") {
-        return naviI18n(`constraint.max.minute.default`, {
-          max: maxString,
-        });
-      }
-      if (naviInputType === "second") {
-        return naviI18n(`constraint.max.second.default`, {
-          max: maxString,
-        });
-      }
-      if (naviInputType === "percentage") {
-        return naviI18n(`constraint.max.percentage.default`, {
-          max: maxString,
-        });
-      }
-      return naviI18n(`constraint.max.number.default`, {
-        max: maxString,
-      });
+      return boundMessage(field, "max");
     }
     if (type === "time") {
       const [maxHours, maxMinutes] = maxString.split(":").map(Number);
       const [hours, minutes] = valueAsString.split(":").map(Number);
       if (hours > maxHours || (hours === maxHours && minutes > maxMinutes)) {
-        return naviI18n("constraint.max.time.default", {
-          max: maxString,
-        });
+        return boundMessage(field, "max");
       }
       return null;
     }
@@ -20453,17 +20457,11 @@ const MAX_CONSTRAINT = {
       if (valueAsString <= maxString) {
         return null;
       }
-
-      const todayIso = getTodayIso(type);
-      if (maxString === todayIso) {
-        return naviI18n("constraint.max.date.today.default");
-      }
-      return naviI18n("constraint.max.date.default", {
-        max: formatDateIso(maxString, type),
-      });
+      return boundMessage(field, "max");
     }
     return null;
   },
+  messageAtBound: (field) => boundMessage(field, "max"),
 };
 CONSTRAINT_ATTRIBUTE_SET.add("max");
 
@@ -20658,6 +20656,51 @@ const formatMsToTime = (ms, showSeconds) => {
   return `${hh}:${mm}:${ss}`;
 };
 
+// What a bound says, whatever the value: the sentence `check` gives a value
+// past it, and the one a spin gives when its chevron is refused there
+// (picker_spin.jsx) — one sentence, so the two refuse in the same words. null
+// for a type that has nothing to say about a bound.
+const boundMessage = (field, bound) => {
+  const boundValue = field.controlHostProps[bound];
+  if (field.controlType === "duration_group") {
+    return naviI18n(`constraint.${bound}.duration.default`, {
+      [bound]: formatDuration(boundValue),
+    });
+  }
+  const type = field.controlHostProps.type;
+  const naviInputType = field.controlHostProps["navi-input-type"];
+  if (isNumberInput(type, naviInputType)) {
+    const numberKind = NUMBER_BOUND_KIND_SET.has(naviInputType)
+      ? naviInputType
+      : "number";
+    return naviI18n(`constraint.${bound}.${numberKind}.default`, {
+      [bound]: String(boundValue),
+    });
+  }
+  if (type === "time") {
+    return naviI18n(`constraint.${bound}.time.default`, {
+      [bound]: boundValue,
+    });
+  }
+  if (DATE_INPUT_TYPE_SET.has(type)) {
+    if (boundValue === getTodayIso(type)) {
+      return naviI18n(`constraint.${bound}.date.today.default`);
+    }
+    return naviI18n(`constraint.${bound}.date.default`, {
+      [bound]: formatDateIso(boundValue, type),
+    });
+  }
+  return null;
+};
+// The numbers whose bound is said with what they count ("Max 23 heures");
+// any other is "Ce nombre".
+const NUMBER_BOUND_KIND_SET = new Set([
+  "hour",
+  "minute",
+  "second",
+  "percentage",
+]);
+
 const getTodayIso = (inputType) => {
   const now = new Date();
   const yyyy = now.getFullYear();
@@ -29150,24 +29193,6 @@ const TYPE_CONVERTERS = {
   },
 };
 
-/**
- * What a component can learn about the page it is rendered in, from the route
- * container rendering that page (see useContentKeepingLeavingPages in
- * route.jsx). `null` outside of any route container.
- *
- * - `isShown()` — whether the container would still show the page. False as
- *   soon as the address leads elsewhere: the page is about to be taken down, or
- *   hidden until the route transition leaving it is over, and nothing it reads
- *   is worth a render any more. False for good once it is kept while leaving: a
- *   return to its route mounts the page anew. Asked outside any render — by a
- *   subscription deciding whether to re-render — and it reads the routes
- *   untracked, so asking subscribes nobody to them.
- * - `leavingSignal` — true once the page is hidden and kept while its movement
- *   plays: still mounted, so what it fills outside its own nodes (a slot in a
- *   bar) steps out rather than showing with the page arriving.
- */
-const RoutePageContext = createContext(null);
-
 const promiseStateWeakMap = new WeakMap();
 const usePromiseAsyncData = (
   promise,
@@ -34068,11 +34093,17 @@ const useContentKeepingLeavingPages = (branch, readShownBranch, parentPage) => {
       }
     }
   });
+  // Also run when a Suspense boundary above parks this container — a page
+  // arriving that suspends to a `<Loading>` around both pages: every hook of
+  // the pages kept while leaving has then been cleaned up, which is all that
+  // keeping them saved. Dropped, so the render resuming the container takes
+  // them down, rather than re-running every effect of a hidden page.
   useLayoutEffect(() => {
     return () => {
       for (const entry of leavingRef.current) {
         entry.hold.containers.delete(rerender);
       }
+      leavingRef.current = [];
     };
   }, []);
   if (leaving.length === 0) {
@@ -54662,6 +54693,26 @@ const Expandable = props => {
     return stopRide;
   };
 
+  // A silent change is a state the page was already in (see openEffect): it
+  // lands at once. Not playing a reveal is not enough — the stylesheet's own
+  // transition plays it whenever the previous state's style was resolved
+  // before the render: an expandable mounted closed and measured in the same
+  // commit (a List sizing its items) before its deferred mount-time open, or
+  // one kept on screen across the page change.
+  const renderWithoutMovement = (contentContainer, render) => {
+    if (!animation || !contentContainer) {
+      flushSyncRendering(render);
+      return;
+    }
+    contentContainer.style.transitionProperty = "none";
+    flushSyncRendering(render);
+    // The new style must be resolved while transitions are off — re-enabled
+    // in the same recalc, the change would transition after all.
+    // eslint-disable-next-line no-unused-expressions
+    getComputedStyle(contentContainer).transitionProperty;
+    contentContainer.style.transitionProperty = "";
+  };
+
   // What opening LOOKS like here, and how to undo it — the one thing an
   // expandable owns that a popup does not (see open_controller.js). Reassigned
   // on every render so it always closes over the latest props.
@@ -54682,10 +54733,15 @@ const Expandable = props => {
     // reopening during a collapse — read while the DOM still says closed.
     const startRect = revealing ? contentContainer.getBoundingClientRect() : null;
     cancelSettleWatch();
-    flushSyncRendering(() => {
+    const renderOpened = () => {
       setOpened(true);
       setSettled(!revealing);
-    });
+    };
+    if (silent) {
+      renderWithoutMovement(contentContainer, renderOpened);
+    } else {
+      flushSyncRendering(renderOpened);
+    }
     if (hasAction) {
       runUnwatched(() => effectiveAction.run());
     }
@@ -54724,16 +54780,22 @@ const Expandable = props => {
       cancelSettleWatch();
       // `silent`: closed by the navigation that puts another page on screen,
       // which is its movement (see page_change.js).
-      const collapsing = animation && !closeEvent.detail.silent && Boolean(contentContainerAtClose);
+      const silentClose = Boolean(closeEvent.detail.silent);
+      const collapsing = animation && !silentClose && Boolean(contentContainerAtClose);
       if (collapsing) {
         // Now, while the content is still fully laid out — the collapsing
         // track uncovers a content frozen at that size.
         freezeContentSize();
       }
-      flushSyncRendering(() => {
+      const renderClosed = () => {
         setOpened(false);
         setSettled(!collapsing);
-      });
+      };
+      if (silentClose) {
+        renderWithoutMovement(contentContainerAtClose, renderClosed);
+      } else {
+        flushSyncRendering(renderClosed);
+      }
       if (restoreFocus) {
         restoreFocus(closeEvent);
       } else if (focusedBeforeClose && contentContainerAtClose && contentContainerAtClose.contains(focusedBeforeClose)) {
@@ -74651,6 +74713,45 @@ const LIST_STYLE_CSS_VARS = {
   backgroundColor: "--list-background-color"
 };
 const LIST_PSEUDO_CLASSES = [":hover", ":focus", ":focus-visible", ":focus-within", ":read-only", ":disabled", ":-navi-void", ":-navi-expanded"];
+// Two lists mounted at once under one `id` are one entry to the scroll memory:
+// each overwrites the other's position (see docs/scroll.md). Said the moment
+// the second one mounts, once per id — on a route transition, that is the page
+// arriving while the page being left is still mounted, hidden.
+const createSharedRememberedIdWarning = () => {
+  const mountedListsById = new Map();
+  const warnedIdSet = new Set();
+  return (listId, rememberScroll, ref) => {
+    useLayoutEffect(() => {
+      if (!rememberScroll) {
+        return undefined;
+      }
+      let mountedLists = mountedListsById.get(listId);
+      if (!mountedLists) {
+        mountedLists = new Set();
+        mountedListsById.set(listId, mountedLists);
+      }
+      const mounted = {
+        element: ref.current
+      };
+      if (mountedLists.size > 0 && !warnedIdSet.has(listId)) {
+        warnedIdSet.add(listId);
+        const [other] = mountedLists;
+        console.warn(`<List id="${listId}"> mounted while another list with this id is mounted. The position a list comes back to is kept under its id, so the two overwrite each other's: the one arriving can open where the other one was, or come back at its top. Lists are mounted together on one page, under a popup, in a bar every page keeps, and during a route transition, whose page being left stays mounted until the movement ends. Give each list an id naming it in the app (a component drawing a list on several pages takes its id from the page), or set scrollResetOnNavigation on a list with no use for coming back. See docs/scroll.md.`, {
+          list: mounted.element,
+          otherList: other.element
+        });
+      }
+      mountedLists.add(mounted);
+      return () => {
+        mountedLists.delete(mounted);
+        if (mountedLists.size === 0) {
+          mountedListsById.delete(listId);
+        }
+      };
+    }, [listId, rememberScroll]);
+  };
+};
+const useWarnSharedRememberedId = createSharedRememberedIdWarning() ;
 const useListScrollSync = ({
   ref,
   listItems,
@@ -75557,6 +75658,7 @@ const useListScrollSync = ({
       }
     };
   }, []);
+  useWarnSharedRememberedId(listId, rememberScroll, ref);
 
   // A list that gets narrower rewraps every item it holds, so everything below
   // moves and the reader loses their place — the very thing scrolling a long
@@ -83093,6 +83195,8 @@ const TRAVELS_NONE = [];
  *   name?: string,
  *   min?: any,
  *   max?: any,
+ *   minMessage?: any,
+ *   maxMessage?: any,
  *   step?: number,
  *   type?: string,
  *   editable?: boolean,
@@ -83131,7 +83235,15 @@ const TRAVELS_NONE = [];
  * @param {number} [step=1] How many steps a press covers.
  * @param {number} [duration=250] How long a travel takes, in milliseconds.
  * @param {any} [min] The first value one can reach; `max` is the last. Beyond
- *   them the travel simply does not happen and the chevron that way says so.
+ *   them the travel simply does not happen and the chevron that way says so,
+ *   in the words the control in the middle uses for a value past that end ("La
+ *   date doit être au plus tard le 2 avril 2027", "Max 5"). A value the control
+ *   has no such sentence for — what a plain `Spin` steps through — is "nothing
+ *   after this one".
+ * @param {any} [maxMessage] What is said at `max` instead: by the chevron
+ *   refused there, by a travel asked past it, and by the control in the middle
+ *   for a value past it (picked in the calendar, typed). `minMessage` is its
+ *   twin at `min`.
  * @param {string} [padding] The room around the value, `paddingX`/`paddingY`
  *   and the four sides included. It goes on what is inside the box rather than
  *   on the box: above and below it is taken by the value AND by the two
@@ -83161,6 +83273,8 @@ const Spin = ({
   name,
   min,
   max,
+  minMessage,
+  maxMessage,
   step = 1,
   duration = 250,
   type = "text",
@@ -83286,15 +83400,31 @@ const Spin = ({
   const readOnlyResolved = Boolean(readOnly || readOnlyFromAbove || loadingResolved);
   const disabledResolved = Boolean(disabled || disabledFromAbove);
 
+  // The end of what one may reach, said the way the control in the middle
+  // says it about a value past that end — its `minMessage`/`maxMessage`, or the
+  // sentence its type has for the bound — so a chevron, the calendar and a
+  // typed value refuse in the same words. Asked of the control at the press:
+  // it is not there yet on the first render. `goingNext` is towards the bigger
+  // values, whichever end of the box that is.
+  const boundMessage = goingNext => {
+    const constraint = goingNext ? MAX_CONSTRAINT : MIN_CONSTRAINT;
+    const controlEl = controlRef.current;
+    const controller = (findControlHost(controlEl) || controlEl).__uiStateController__;
+    const {
+      message
+    } = getConstraintMessage(controller, constraint, constraint.messageAtBound(controller), {});
+    return message ?? naviI18n(goingNext ? "spin.nothing_after" : "spin.nothing_before");
+  };
+
   // Why a chevron refuses, in its own words — and only when the reason is
   // ours: the end of what one may reach is something this control knows and
   // navi cannot guess. For everything else the reason belongs to the state the
   // whole control is in, and it is said about the control ("read-only",
   // "busy") rather than about the button, which is not what the user was
   // pressing.
-  const wayOutMessage = (allowed, endKey) => {
+  const wayOutMessage = (allowed, isNext) => {
     if (!allowed) {
-      return naviI18n(endKey);
+      return boundMessage(isNext);
     }
     if (loadingResolved) {
       return naviI18n("constraint.busy.default");
@@ -83406,7 +83536,7 @@ const Spin = ({
       // answer belongs.
       e.preventDefault();
       e.stopPropagation();
-      openCallout(naviI18n(goingNext ? "spin.nothing_after" : "spin.nothing_before"), {
+      openCallout(boundMessage(goingNext), {
         anchorElement: middleRef.current,
         status: "info",
         openingEvent: e.detail.event ?? e
@@ -83465,12 +83595,14 @@ const Spin = ({
   const valueDrawnAtEnd = travelPending?.area === "end" ? travelPending.value : valueAtEnd;
   const wayOut = atStart => {
     const isNext = atStart ? startIsNext : !startIsNext;
+    const allowed = atStart ? startAllowed : endAllowed;
     return jsx(WayOut, {
       atStart: atStart,
       onPointerDown: e => {
         wayOutPointerTypeRef.current = e.pointerType;
       },
-      unavailableMessage: wayOutMessage(atStart ? startAllowed : endAllowed, isNext ? "spin.nothing_after" : "spin.nothing_before"),
+      unavailable: !allowed || loadingResolved || readOnlyResolved,
+      unavailableMessage: () => wayOutMessage(allowed, isNext),
       label: isNext ? nextLabel ?? naviI18n("spin.next") : previousLabel ?? naviI18n("spin.previous"),
       onPress: e => {
         focusMiddle();
@@ -83517,6 +83649,8 @@ const Spin = ({
         ...valueProps,
         min: min,
         max: max,
+        minMessage: minMessage,
+        maxMessage: maxMessage,
         step: step,
         readOnly: readOnly,
         disabled: disabled,
@@ -83550,6 +83684,8 @@ const Spin = ({
           ...valueProps,
           min: min,
           max: max,
+          minMessage: minMessage,
+          maxMessage: maxMessage,
           readOnly: readOnly,
           disabled: disabled,
           loading: loading,
@@ -83660,6 +83796,7 @@ const Spin = ({
 const WayOut = ({
   atStart,
   commandFor,
+  unavailable,
   unavailableMessage,
   label,
   onPress,
@@ -83670,10 +83807,10 @@ const WayOut = ({
   // onPointerUp below).
   const pointerDownRef = useRef(null);
   const press = e => {
-    if (unavailableMessage) {
+    if (unavailable) {
       // Why it does nothing, said where one pressed: a control would have
       // done this through its own interaction gate, and this one has none.
-      openCallout(unavailableMessage, {
+      openCallout(unavailableMessage(), {
         anchorElement: e.currentTarget,
         status: "info",
         openingEvent: e
@@ -83700,8 +83837,8 @@ const WayOut = ({
     ,
     role: "button",
     "aria-label": label,
-    "aria-disabled": unavailableMessage ? "true" : undefined,
-    "data-unavailable": unavailableMessage ? "" : undefined
+    "aria-disabled": unavailable ? "true" : undefined,
+    "data-unavailable": unavailable ? "" : undefined
     // At the chevron, not beside it: a callout aims its arrow at where the
     // anchor's text starts, and there is no text here — only a glyph in the
     // middle of the box, which is what one pressed and what the answer is
@@ -83934,6 +84071,8 @@ SpinGroup.Separator = SpinGroupSeparator;
  *   defaultValue?: number|string,
  *   min?: number,
  *   max?: number,
+ *   minMessage?: any,
+ *   maxMessage?: any,
  *   step?: number,
  *   pad?: number,
  *   loop?: boolean,
@@ -84039,6 +84178,8 @@ const numberAtStep = (value, count, {
  *   name?: string,
  *   min?: string,
  *   max?: string,
+ *   minMessage?: any,
+ *   maxMessage?: any,
  *   step?: number,
  *   lang?: string,
  *   renderDay?: (day: string) => import("ignore:preact").ComponentChildren,