@jsenv/navi 0.29.389 → 0.29.391

package/dist/dev/jsenv_navi.js

@@ -4955,14 +4955,11 @@ const CONTROL_TYPE_BY_SIGNAL_TYPE = {
 // become something plainer — it is what says the value is a number (see
 // isNumberInput), and what lets constraint messages use domain-specific
 // wording instead of the generic "Ce nombre doit être...".
+// A type a picker preset draws (navi_time, navi_minute: see picker_preset.jsx)
+// has no row: resolveInputProps runs before the preset resolver, and a row
+// would turn the type into its host before the preset resolver reads it. The
+// preset hands the host type on itself.
 const NAVI_TYPE_DEFAULTS = {
-  navi_time: {
-    "type": "time",
-    "navi-input-type": "time",
-    "min": 0,
-    "max": 24 * 3600 - 1,
-    "step": 1,
-  },
   navi_percentage: {
     "type": "navi_number",
     "navi-input-type": "percentage",
@@ -5024,7 +5021,6 @@ const isNumberInput = (type, naviInputType) => {
  * Supported navi types and their targets:
  * - `navi_percentage` → `navi_number`  (0–100, step 1)
  * - `navi_number`     → `text`         (inputMode="numeric", no spin buttons implied)
- * - `navi_time`       → `time`         (step in seconds)
  *
  * Standard HTML input types with formatters:
  * - `date`, `month`, `week`, `time`, `datetime-local`, `datetime`:
@@ -16611,6 +16607,15 @@ const createResource = (
     paramScope,
     rerunOn,
     dependencies,
+    // Set on a scoped child: the resource owning each of its items, which
+    // live in one store per owner (`store` is the owner's).
+    ownerName,
+    // Set on a scopedMany child: its per-owner store looked up by owner key,
+    // and the owner whose GET embeds the collection. Options rather than
+    // properties added afterwards, so every facade of the relation — the one
+    // scopedMany returns and each withParams() of it — carries both.
+    getChildStore,
+    ownerDependency,
   },
 ) => {
   const params = paramScope.params;
@@ -16636,6 +16641,8 @@ const createResource = (
     // private but exposed for convenience
     store,
     addItemSetup,
+    ownerName,
+    getChildStore,
   };
 
   resourceLifecycleManager.registerResource(stateFacade, {
@@ -16644,6 +16651,17 @@ const createResource = (
     dependencies,
     uniqueKeys,
   });
+  if (ownerDependency) {
+    // A child collection mutated (POST etc.) makes the owner GET re-fetch:
+    // the owner embeds the child array and only the backend knows the new
+    // ordering. Registered per facade, since the rerun is looked up by the
+    // facade whose action completed.
+    resourceLifecycleManager.addDependency(
+      stateFacade,
+      ownerDependency.owner,
+      ownerDependency.propertyName,
+    );
+  }
   const onActionComplete = (actionCompleted) => {
     resourceLifecycleManager.onActionComplete(actionCompleted, {
       resourceScope: stateFacade,
@@ -16656,6 +16674,10 @@ const createResource = (
    * Actions from parameterized resources only trigger rerun/reset for other actions with
    * identical parameters, preventing cross-contamination between different parameter sets.
    *
+   * The actions are the resource's own kind: on a relation they keep its callback return
+   * contract and write where it writes (`TABLE_COLUMNS.withParams(…).GET_MANY` returns
+   * `[ownerId, items]` and replaces that owner's collection).
+   *
    * @param {Object} params - Parameters to bind to all actions of this resource (required)
    * @param {{ rerunOn?: Object, dependencies?: Object[] }} [options] - reruns of that scope; a `rerunOn` key left out keeps the resource's value, and `dependencies` left out are the resource's
    * @returns {Object} A new resource instance with parameter-bound actions and isolated lifecycle
@@ -16681,7 +16703,6 @@ const createResource = (
     paramsToInject,
     { dependencies: withParamsDeps, rerunOn: withParamsRerunOn } = {},
   ) => {
-    const declarationSite = getDeclarationSite();
     if (!paramsToInject || Object.keys(paramsToInject).length === 0) {
       throw new Error(`resource(${name}).withParams() requires parameters`);
     }
@@ -16689,11 +16710,6 @@ const createResource = (
       ? { ...params, ...paramsToInject }
       : paramsToInject;
     const resolvedParamScope = getParamScope(resolvedParams);
-    const createRestActionWithParams = createRestActionFactoryForRoot(name, {
-      idKey,
-      store,
-      declarationSite,
-    });
     return createResource(name, {
       idKey,
       uniqueKeys,
@@ -16701,10 +16717,16 @@ const createResource = (
       restCallbacks,
       store,
       addItemSetup,
-      createRestAction: createRestActionWithParams,
+      // The actions of this resource's kind: a relation applies its results to
+      // its relation (a scoped child to the per-owner stores), never as root
+      // items of `store`.
+      createRestAction,
       paramScope: resolvedParamScope,
       rerunOn: resolveRerunOn(withParamsRerunOn, rerunOn),
       dependencies: withParamsDeps ?? dependencies,
+      ownerName,
+      getChildStore,
+      ownerDependency,
     });
   };
   stateFacade.withParams = withParams;
@@ -16749,6 +16771,13 @@ const createResource = (
     } = {},
   ) => {
     const declarationSite = getDeclarationSite();
+    if (ownerName) {
+      refuseCallbacksNamingScopedItem(
+        `${name}.one("${propertyName}")`,
+        { GET, PUT, DELETE },
+        { name, ownerName, propertyName, declarationSite },
+      );
+    }
     const childName = `${name}.${propertyName}`;
     const childIdKey = childResource.idKey;
     const childStore = childResource.store;
@@ -16809,7 +16838,11 @@ const createResource = (
       );
     });
 
-    const createRestActionForOne = (verb, callback, { onActionComplete }) => {
+    const createRestActionForOne = (
+      verb,
+      callback,
+      { onActionComplete, paramScope },
+    ) => {
       const applyResultToValue =
         verb === "DELETE"
           ? (itemIdOrItemProps) => {
@@ -16924,6 +16957,13 @@ const createResource = (
     } = {},
   ) => {
     const declarationSite = getDeclarationSite();
+    if (ownerName) {
+      refuseCallbacksNamingScopedItem(
+        `${name}.many("${propertyName}")`,
+        { GET_MANY, DELETE, DELETE_MANY },
+        { name, ownerName, propertyName, declarationSite },
+      );
+    }
     const childStore = childResource.store;
     const childIdKey = childResource.idKey;
     const childName = `${name}.${propertyName}`;
@@ -16955,21 +16995,23 @@ const createResource = (
     const createRestActionForMany = (
       verb,
       callback,
-      { isMany, onActionComplete },
+      { isMany, onActionComplete, paramScope },
     ) => {
       if (!isMany) {
         return createRestActionAffectingOneItem(verb, callback, {
           onActionComplete,
+          paramScope,
         });
       }
       return createRestActionAffectingManyItems(verb, callback, {
         onActionComplete,
+        paramScope,
       });
     };
     const createRestActionAffectingOneItem = (
       verb,
       callback,
-      { onActionComplete },
+      { onActionComplete, paramScope },
     ) => {
       const applyResultToValue =
         verb === "DELETE"
@@ -17032,7 +17074,7 @@ const createResource = (
     const createRestActionAffectingManyItems = (
       verb,
       callback,
-      { onActionComplete },
+      { onActionComplete, paramScope },
     ) => {
       const applyResultToValue =
         verb === "GET"
@@ -17160,7 +17202,12 @@ const createResource = (
    * Mutations apply directly to the owner's signal, so the parent GET is never rerun.
    *
    * Returns the child relationship resource, itself chainable:
-   * `USER_PROFILE.one("theme", THEME)` adds a reactive `.theme` property on each profile.
+   * `USER_PROFILE.one("theme", THEME)` adds a reactive `.theme` property on each profile,
+   * fed by what this resource's callbacks embed (`[id, { bio, theme: { id: 3 } }]`). A
+   * profile exists only inside its user, so the chained relation declares none of the
+   * callbacks whose result names a profile (`.one()` GET/PUT/DELETE, `.many()`
+   * GET_MANY/DELETE/DELETE_MANY, any `.scopedOne()`/`.scopedMany()` callback): such a
+   * result cannot say which user holds it, and the declaration throws.
    *
    * @param {string} propertyName - property holding the sub-object on each owner item
    * @param {Object} [restCallbacks] - `{ idKey, rerunOn, dependencies, GET, POST, PUT, PATCH, DELETE }`
@@ -17180,6 +17227,14 @@ const createResource = (
       DELETE,
     } = {},
   ) => {
+    const declarationSite = getDeclarationSite();
+    if (ownerName) {
+      refuseCallbacksNamingScopedItem(
+        `${name}.scopedOne("${propertyName}")`,
+        { GET, POST, PUT, PATCH, DELETE },
+        { name, ownerName, propertyName, declarationSite },
+      );
+    }
     const childName = `${name}.${propertyName}`;
 
     // Callbacks added by chained .one()/.many() on the child resource,
@@ -17209,7 +17264,12 @@ const createResource = (
           childSignal.value = childItem; // first activation: null → childItem
         }
       };
-      applyPropsMap.set(ownerId, applyProps);
+      if (!ownerName) {
+        // Declared on a scoped child, an owner id is only unique inside its
+        // own owner and no callback addresses it (see
+        // refuseCallbacksNamingScopedItem): nothing is looked up by it.
+        applyPropsMap.set(ownerId, applyProps);
+      }
 
       applyProps(ownerItem[propertyName]);
 
@@ -17221,7 +17281,7 @@ const createResource = (
     const createRestActionForScopedOne = (
       verb,
       callback,
-      { onActionComplete },
+      { onActionComplete, paramScope },
     ) => {
       const childActionName = `${childName}.${verb}`;
       return createAction(callback, {
@@ -17269,6 +17329,7 @@ const createResource = (
       paramScope,
       rerunOn: resolveRerunOn(scopedOneRerunOn, rerunOn),
       dependencies: scopedOneDependencies ?? dependencies,
+      ownerName: name,
     });
   };
 
@@ -17296,7 +17357,14 @@ const createResource = (
    * `propertyName`), and the child's own GET_MANY reruns per its `rerunOn`.
    *
    * Returns the child relationship resource, itself chainable:
-   * `TABLE_COLUMNS.one("dataType", DATA_TYPE)` adds a reactive `.dataType` property on each column.
+   * `TABLE_COLUMNS.one("dataType", DATA_TYPE)` adds a reactive `.dataType` property on each column,
+   * fed by what this resource's callbacks embed (`[id, [{ name, dataType: { id: 2 } }]]`). A
+   * column exists only inside its table — two tables can each have an `email` — so the chained
+   * relation declares none of the callbacks whose result names a column (`.one()`
+   * GET/PUT/DELETE, `.many()` GET_MANY/DELETE/DELETE_MANY, any `.scopedOne()`/`.scopedMany()`
+   * callback): such a result cannot say which table holds it, and the declaration throws.
+   * A `.scopedMany()` chained on it keeps one collection per column: `users.email` and
+   * `admins.email` never share one.
    *
    * @param {string} propertyName - property holding the collection on each owner item
    * @param {Object} [restCallbacks] - `{ idKey, rerunOn, dependencies, GET, GET_MANY, POST, POST_MANY, PUT, PUT_MANY, PATCH, PATCH_MANY, DELETE, DELETE_MANY }`
@@ -17321,6 +17389,25 @@ const createResource = (
       DELETE_MANY,
     } = {},
   ) => {
+    const declarationSite = getDeclarationSite();
+    if (ownerName) {
+      refuseCallbacksNamingScopedItem(
+        `${name}.scopedMany("${propertyName}")`,
+        {
+          GET,
+          GET_MANY,
+          POST,
+          POST_MANY,
+          PUT,
+          PUT_MANY,
+          PATCH,
+          PATCH_MANY,
+          DELETE,
+          DELETE_MANY,
+        },
+        { name, ownerName, propertyName, declarationSite },
+      );
+    }
     const childName = `${name}.${propertyName}`;
 
     // Callbacks added by chained .one()/.many() on the child resource,
@@ -17342,37 +17429,42 @@ const createResource = (
           return childItem;
         },
       });
-      const scope = { childStore, idArraySignal: signal([]) };
-      scopeMap.set(ownerKey, scope);
-      return scope;
+      return { childStore, idArraySignal: signal([]) };
     };
     addItemSetup((item) => {
       const ownerId = item[idKey];
-
-      // Reuse an existing scope if one was already created under a uniqueKey
-      // value (e.g. rows were fetched by tablename before the full table was loaded).
-      let scope = scopeMap.get(ownerId);
-      if (!scope) {
+      let scope;
+      if (ownerName) {
+        // The owner is itself a scoped child: its id is only unique inside its
+        // own owner, so the scope is the item's alone, never looked up by id
+        // (no callback addresses it, see refuseCallbacksNamingScopedItem).
+        scope = createScope(ownerId);
+      } else {
+        // Reuse an existing scope if one was already created under a uniqueKey
+        // value (e.g. rows were fetched by tablename before the full table was loaded).
+        scope = scopeMap.get(ownerId);
+        if (!scope) {
+          for (const uniqueKey of uniqueKeys) {
+            const uniqueKeyValue = item[uniqueKey];
+            if (uniqueKeyValue !== undefined && scopeMap.has(uniqueKeyValue)) {
+              scope = scopeMap.get(uniqueKeyValue);
+              break;
+            }
+          }
+        }
+        if (!scope) {
+          scope = createScope(ownerId);
+        }
+        // Register the scope under the id and every uniqueKey value so that
+        // resolveOwnerId can address it whichever key a callback returns.
+        scopeMap.set(ownerId, scope);
         for (const uniqueKey of uniqueKeys) {
           const uniqueKeyValue = item[uniqueKey];
-          if (uniqueKeyValue !== undefined && scopeMap.has(uniqueKeyValue)) {
-            scope = scopeMap.get(uniqueKeyValue);
-            break;
+          if (uniqueKeyValue !== undefined) {
+            scopeMap.set(uniqueKeyValue, scope);
           }
         }
       }
-      if (!scope) {
-        scope = createScope(ownerId);
-      }
-      // Register the scope under the id and every uniqueKey value so that
-      // resolveOwnerId can address it whichever key a callback returns.
-      scopeMap.set(ownerId, scope);
-      for (const uniqueKey of uniqueKeys) {
-        const uniqueKeyValue = item[uniqueKey];
-        if (uniqueKeyValue !== undefined) {
-          scopeMap.set(uniqueKeyValue, scope);
-        }
-      }
 
       const { childStore, idArraySignal } = scope;
       const updateChildItemIdArray = createChildIdArrayUpdater(
@@ -17410,7 +17502,7 @@ const createResource = (
     const createRestActionForScopedMany = (
       verb,
       callback,
-      { isMany, onActionComplete },
+      { isMany, onActionComplete, paramScope },
     ) => {
       const childActionName = `${childName}.${verb}`;
       return createAction(callback, {
@@ -17432,7 +17524,11 @@ const createResource = (
           );
           // Owner not in store yet: create the scope so actions can run before
           // the parent item has been loaded (e.g. rows fetched before their table).
-          const scope = scopeMap.get(ownerId) || createScope(ownerId);
+          let scope = scopeMap.get(ownerId);
+          if (!scope) {
+            scope = createScope(ownerId);
+            scopeMap.set(ownerId, scope);
+          }
           const { childStore, idArraySignal } = scope;
 
           if (verb === "DELETE") {
@@ -17504,18 +17600,17 @@ const createResource = (
       paramScope,
       rerunOn: resolveRerunOn(scopedManyRerunOn, rerunOn),
       dependencies: scopedManyDependencies ?? dependencies,
+      ownerName: name,
+      // Declared on a scoped child, the scopes are kept per item and never
+      // registered by id (see addItemSetup above): there is no owner key to
+      // find one by.
+      getChildStore: ownerName
+        ? undefined
+        : (ownerKey) => scopeMap.get(ownerKey)?.childStore,
+      // scopedOne needs no such dependency: its mutation result carries the
+      // updated object directly.
+      ownerDependency: { owner: stateFacade, propertyName },
     });
-    // When a scoped child collection is mutated (POST etc.), the parent GET must
-    // re-fetch: the parent embeds the child array and only the backend knows the
-    // new ordering. (scopedOne does not need this: the mutation result contains
-    // the updated object directly.)
-    resourceLifecycleManager.addDependency(
-      childResource,
-      stateFacade,
-      propertyName,
-    );
-    childResource.getChildStore = (ownerKey) =>
-      scopeMap.get(ownerKey)?.childStore;
     return childResource;
   };
 
@@ -17736,7 +17831,7 @@ const getLastGetItemId = (action) => {
 };
 
 // Captures the "file:line:column" of the user code that invoked the public
-// function (resource(), .one(), .many(), withParams, …), so invalid-result
+// function (resource(), .one(), .many(), .scopedOne(), …), so invalid-result
 // errors can point at where the callbacks were declared, not at this file.
 // Must be called directly from the public function: the stack offset accounts
 // for exactly two frames (getCallerInfo → getDeclarationSite → public fn → user code).
@@ -17757,6 +17852,36 @@ ${originalActionName} source location: ${declarationSite}`,
   };
 };
 
+// A scoped child's item exists only inside its owner: two owners can each hold
+// one with the same id. The callbacks of a relation chained on it whose result
+// names that item do so by its id alone — `.one()`/`.many()` as the parent
+// object or id, `.scopedOne()`/`.scopedMany()` as the `ownerId` of
+// `[ownerId, …]` — so applied they would write the owner's store (`store` of a
+// scoped child) or the scope of another owner's item. They are refused rather
+// than routed: routing needs the owner in the result, a contract none of them
+// has.
+const refuseCallbacksNamingScopedItem = (
+  relationLabel,
+  callbacks,
+  { name, ownerName, propertyName, declarationSite },
+) => {
+  const declaredKeys = [];
+  for (const key of Object.keys(callbacks)) {
+    if (callbacks[key]) {
+      declaredKeys.push(key);
+    }
+  }
+  if (declaredKeys.length === 0) {
+    return;
+  }
+  const declared = declaredKeys.join(", ");
+  throw new Error(
+    `${relationLabel} cannot declare ${declared}: a "${name}" item exists only inside its "${ownerName}", and the result of ${declared} names it without saying which "${ownerName}" holds it.
+Return "${propertyName}" embedded in what the "${name}" callbacks return ([ownerId, { …, ${propertyName} }]): those say which "${ownerName}".
+${relationLabel} source location: ${declarationSite}`,
+  );
+};
+
 // Shared by .many() and .scopedMany(): converts a raw relationship value (an
 // array of child props/ids, or anything else meaning "empty") into an array of
 // child ids, upserting each entry into the child store. The id array signal is
@@ -17898,22 +18023,28 @@ Received an object with keys: ${keys.join(", ")}.`,
  * // which in turn triggers the route Signal->URL sync and updates the browser URL.
  */
 const syncResourceToSignals = (resource, propertyToSignalMap) => {
-  if (resource.getChildStore) {
+  if (resource.ownerName) {
+    // A scoped child's `store` is its owner's: watching it would sync the
+    // owner items' properties, not the child's.
     throw new Error(
-      `syncResourceToSignals: "${resource.name}" is a scoped resource (scopedMany/scopedOne). Use syncOwnedResourceToSignals instead.`,
+      `syncResourceToSignals: "${resource.name}" lives inside each "${resource.ownerName}", so it has no store of its own to watch.${resource.getChildStore ? " Use syncOwnedResourceToSignals instead." : ""}`,
     );
   }
   syncStoreToSignals(resource.store, propertyToSignalMap);
 };
 
 /**
- * The same, for a `scopedOne`/`scopedMany` resource: its items live in one store
- * per owner, so the store to watch is the one of the owner `ownerSignal` names
- * (by id or by any unique key), and it is switched when the signal changes.
- * Nothing is synced while `ownerSignal` holds `null`/`undefined` or names an
- * owner nothing has been loaded for yet.
+ * The same, for a `scopedMany` resource (or a `withParams()` of one): its items
+ * live in one store per owner, so the store to watch is the one of the owner
+ * `ownerSignal` names (by id or by any unique key), and it is switched when the
+ * signal changes. Nothing is synced while `ownerSignal` holds `null`/`undefined`
+ * or names an owner nothing has been loaded for yet.
  *
- * @param {Object} resource - a resource made by `.scopedOne()` / `.scopedMany()`
+ * A `scopedOne` child has no store (each owner holds its one item), and a
+ * `scopedMany` declared on a scoped child is kept per item with no owner key to
+ * find it by: both are refused.
+ *
+ * @param {Object} resource - a resource made by `.scopedMany()`
  * @param {import("@preact/signals").Signal} ownerSignal - the owner whose children are watched
  * @param {Object} propertyToSignalMap - `{ [propertyName]: signal }`, as for `syncResourceToSignals`
  */
@@ -17923,8 +18054,13 @@ const syncOwnedResourceToSignals = (
   propertyToSignalMap,
 ) => {
   if (!resource.getChildStore) {
+    if (!resource.ownerName) {
+      throw new Error(
+        `syncOwnedResourceToSignals: "${resource.name}" is not a scoped resource. Use syncResourceToSignals instead.`,
+      );
+    }
     throw new Error(
-      `syncOwnedResourceToSignals: "${resource.name}" is not a scoped resource (scopedMany/scopedOne). Use syncResourceToSignals instead.`,
+      `syncOwnedResourceToSignals: "${resource.name}" has no store per "${resource.ownerName}" to watch: a scopedOne child is held by each owner, and a scopedMany declared on a scoped child has no owner key to find its store by.`,
     );
   }
   effect(() => {
@@ -30219,7 +30355,7 @@ const TRANSITION_FURNITURE_CSS = /* css */ `.navi_fixed_bar[data-navi-transition
   clip-path: var(--wall-holes-arriving, var(--wall-holes));
 }
 
-:root[data-navi-route-transition] {
+:root[data-navi-route-transition-target="area"] {
   & .navi_dialog::backdrop, & .navi_popover_backdrop {
     backdrop-filter: none;
     background: none;
@@ -30364,10 +30500,7 @@ const nameFurnitureAround = (areaElement) => {
     if (!name) {
       // A name the application wrote itself answers for that element, and it
       // is saying something navi is not: it wants that bar moved on the pages'
-      // clock, by its own CSS. Asked only of a bar navi has never named — a
-      // bar wearing one of ITS names is one this movement inherited from the
-      // one it interrupted, and taking it for the application's would leave it
-      // named for the rest of the document's life.
+      // clock, by its own CSS.
       if (getComputedStyle(element).viewTransitionName !== "none") {
         continue;
       }
@@ -32189,8 +32322,17 @@ const beginTransition = ({
     url: absoluteUrl(url),
     decision: navigationDecision,
     walkHome: null,
-    releaseReverting: null
+    releaseReverting: null,
+    restoreDuration: null
   };
+  // The document wears one transition at a time, and the one this interrupts
+  // ends only after this one has begun — too late to take off what it wears
+  // (see end). Taking over therefore starts by taking it off, so that what is
+  // put on below describes this transition alone, including what it leaves
+  // unset: a type, an area, a duration.
+  if (currentTransition) {
+    releaseTransitionRoot(currentTransition);
+  }
   currentTransition = transition;
   // Said before the picture is taken: whoever names something for a movement
   // between two pages decides on it now (see transition_destination.js).
@@ -32234,11 +32376,10 @@ const beginTransition = ({
   // A duration of this relation's own, worn for the length of the transition —
   // and whatever the application had written inline put back afterwards, not
   // erased.
-  let restoreDuration = null;
   if (duration !== undefined) {
     const durationBefore = documentElement.style.getPropertyValue(TRANSITION_DURATION_PROPERTY);
     documentElement.style.setProperty(TRANSITION_DURATION_PROPERTY, typeof duration === "number" ? `${duration}ms` : duration);
-    restoreDuration = () => {
+    transition.restoreDuration = () => {
       if (durationBefore) {
         documentElement.style.setProperty(TRANSITION_DURATION_PROPERTY, durationBefore);
       } else {
@@ -32299,8 +32440,11 @@ const beginTransition = ({
       renderWait.stop();
     }
     // The page arriving is in the DOM and the transition has not started
-    // playing: the one moment both states of the area can be known.
-    if (areaElement) {
+    // playing: the one moment both states of the area can be known. The
+    // browser runs this callback even for a transition skipped before its
+    // first picture — the next one starting skips it — and a transition
+    // replaced holds nothing: what it wore was taken off at the takeover.
+    if (areaElement && currentTransition === transition) {
       holdTransitionFurniture(transition, areaElement);
       holdTransitionWindow(transition, areaElement, areaStateBefore);
     }
@@ -32309,8 +32453,9 @@ const beginTransition = ({
     // Whatever ends it — played out, skipped by another transition starting,
     // failed before its callback ever ran — the hold is given back and the
     // document is handed back to the application. Both are idempotent, and
-    // the attributes belong to the LAST transition begun: an earlier one
-    // ending late must not strip what a later one is wearing.
+    // the document is handed back only by the LAST transition begun: an
+    // earlier one ending late was taken off by the one that replaced it, and
+    // must not strip what that one is wearing.
     renderWait.stop();
     releaseRendering();
     // The hold a way back took, when it is still standing: the pictures were
@@ -32322,16 +32467,7 @@ const beginTransition = ({
     }
     if (currentTransition === transition) {
       currentTransition = null;
-      documentElement.removeAttribute(TRANSITION_ATTRIBUTE);
-      documentElement.removeAttribute(TRANSITION_TYPE_ATTRIBUTE);
-      documentElement.removeAttribute(TRANSITION_TARGET_ATTRIBUTE);
-      releaseTransitionWindow(transition);
-      releaseTransitionDestination(transition);
-      releaseTransitionFurniture(transition);
-      releaseTransitionPress(transition);
-      if (restoreDuration) {
-        restoreDuration();
-      }
+      releaseTransitionRoot(transition);
     }
   };
   transition.viewTransition = viewTransition;
@@ -32339,6 +32475,22 @@ const beginTransition = ({
   viewTransition.finished.then(end, end);
 };
 
+// Everything a transition wears on the document for its length, taken off by
+// its own end or by the transition taking over from it.
+const releaseTransitionRoot = transition => {
+  const documentElement = document.documentElement;
+  documentElement.removeAttribute(TRANSITION_ATTRIBUTE);
+  documentElement.removeAttribute(TRANSITION_TYPE_ATTRIBUTE);
+  documentElement.removeAttribute(TRANSITION_TARGET_ATTRIBUTE);
+  releaseTransitionWindow(transition);
+  releaseTransitionDestination(transition);
+  releaseTransitionFurniture(transition);
+  releaseTransitionPress(transition);
+  if (transition.restoreDuration) {
+    transition.restoreDuration();
+  }
+};
+
 /**
  * The movement playing, turned round rather than replaced: this navigation is
  * exactly the way back of the one on screen — the door pressed again while the
@@ -50186,10 +50338,10 @@ const css$R = /* css */`.navi_expandable {
   }
 
   & > .navi_expandable_content_container {
-    clip-path: inset(-9999px -9999px 0);
     grid-template-rows: 0fr;
     display: grid;
     position: relative;
+    overflow-y: clip;
 
     & > .navi_expandable_content_sizer {
       min-height: 0;
@@ -50202,7 +50354,6 @@ const css$R = /* css */`.navi_expandable {
   }
 
   &[data-open-direction="up"] > .navi_expandable_content_container {
-    clip-path: inset(0 -9999px -9999px);
     align-content: end;
 
     & > .navi_expandable_content_sizer {
@@ -50224,9 +50375,9 @@ const css$R = /* css */`.navi_expandable {
     }
 
     & > .navi_expandable_content_container {
-      clip-path: inset(-9999px 0 0 -9999px);
       grid-template-rows: 0fr;
       grid-template-columns: 0fr;
+      overflow: clip;
 
       & > .navi_expandable_content_sizer {
         min-width: 0;
@@ -50244,7 +50395,6 @@ const css$R = /* css */`.navi_expandable {
     }
 
     &[data-open-direction="left"] > .navi_expandable_content_container {
-      clip-path: inset(-9999px -9999px 0 0);
       justify-content: end;
 
       & > .navi_expandable_content_sizer {
@@ -50266,11 +50416,10 @@ const css$R = /* css */`.navi_expandable {
   }
 
   &[aria-expanded="true"][data-settled] > .navi_expandable_content_container {
-    clip-path: none;
+    overflow: visible;
   }
 
   &:not([aria-expanded="true"])[data-settled] > .navi_expandable_content_container {
-    clip-path: none;
     overflow: clip;
   }
 
@@ -50367,11 +50516,12 @@ const useExpandableContext = partName => {
  *   that can scroll so the content revealed past its edge is on screen: an
  *   expandable opening at the bottom of a list otherwise grows below the
  *   fold, and the user sees the row grow but not what it grew with. Measured
- *   on the open layout and done once per opening, alongside the reveal
- *   (smoothly when `animation` plays, at once otherwise). An expandable
- *   taller than the scroller keeps its UI part on screen and the content
- *   follows as far as it fits. Only the nearest scroller moves — a popup or
- *   a page around it stays where it is.
+ *   on the open layout, once per opening; when `animation` plays the
+ *   scroller rides along with the reveal, at the track's own progress, and
+ *   otherwise it goes there at once. A `scroll-margin` on the expandable is
+ *   honored. An expandable taller than the scroller keeps its UI part on
+ *   screen and the content follows as far as it fits. Only the nearest
+ *   scroller moves — a popup or a page around it stays where it is.
  * @param maxContentHeight - Caps the content height; taller content scrolls
  *   inside the expandable instead of growing it.
  * @param mount - When the content is built and thrown away, a popup's own
@@ -50494,15 +50644,27 @@ const Expandable = props => {
     cancelSettleWatchRef.current?.();
     cancelSettleWatchRef.current = null;
   };
-  const watchSettle = () => {
+  // `stopRide`, when the scroller rides along with the reveal (keepInView):
+  // the ride is part of the movement, so it ends with it — settled or
+  // cancelled — and never on its own clock.
+  const watchSettle = stopRide => {
     const contentContainer = contentContainerRef.current;
     const contentElement = contentContainer.firstElementChild.firstElementChild;
-    cancelSettleWatchRef.current = whenTransitionSettles(contentContainer, () => {
+    const cancelWatch = whenTransitionSettles(contentContainer, () => {
       cancelSettleWatchRef.current = null;
+      if (stopRide) {
+        stopRide();
+      }
       contentElement.style.width = "";
       contentElement.style.height = "";
       setSettled(true);
     });
+    cancelSettleWatchRef.current = () => {
+      if (stopRide) {
+        stopRide();
+      }
+      cancelWatch();
+    };
   };
 
   // The reveal needs the content at its final size before the track starts
@@ -50521,17 +50683,22 @@ const Expandable = props => {
     } else {
       contentElement.style.height = `${finalRect.height}px`;
     }
+    let stopRide = null;
     if (keepInView) {
-      // Here and not once the reveal settles: the layout is the open one at
-      // this point, so where the content ends is known before the movement
-      // starts, and the scroll can travel along with it. The frozen content
-      // overflowing the collapsed track is still scrollable overflow (the
-      // one-sided clip-path, see the CSS), so the scroller can reach that
-      // position from the first frame.
-      scrollExpandableIntoView(rootRef.current, {
-        revealDirection,
-        behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
-      });
+      // Measured here and not once the reveal settles: the layout is the open
+      // one at this point, so where the content ends is known before the
+      // movement starts. The scroll then rides the movement rather than
+      // running ahead of it (see rideScrollerAlongReveal).
+      const revealScroll = measureRevealScroll(rootRef.current, revealDirection);
+      if (revealScroll) {
+        const finalContainerRect = contentContainer.getBoundingClientRect();
+        stopRide = rideScrollerAlongReveal(revealScroll, {
+          contentContainer,
+          axis: isColumn ? "x" : "y",
+          startSize: isColumn ? startRect.width : startRect.height,
+          finalSize: isColumn ? finalContainerRect.width : finalContainerRect.height
+        });
+      }
     }
     // Put the tracks back where the last paint left them and let the
     // transition play from there. In fr — px does not interpolate with fr.
@@ -50554,6 +50721,7 @@ const Expandable = props => {
     contentContainer.style.transitionProperty = "";
     contentContainer.style.gridTemplateColumns = "";
     contentContainer.style.gridTemplateRows = "";
+    return stopRide;
   };
 
   // What opening LOOKS like here, and how to undo it — the one thing an
@@ -50585,12 +50753,17 @@ const Expandable = props => {
     // transfer there is nothing to restore on close either.
     const restoreFocus = autoFocus && !silent && contentContainer ? openController.transferFocusOnOpen(contentContainer) : null;
     if (revealing) {
-      armReveal(startRect);
-      watchSettle();
+      const stopRide = armReveal(startRect);
+      watchSettle(stopRide);
     } else if (keepInView && !silent && contentContainer) {
-      scrollExpandableIntoView(rootRef.current, {
-        revealDirection
-      });
+      const revealScroll = measureRevealScroll(rootRef.current, revealDirection);
+      if (revealScroll) {
+        // No behavior: the scroller's own scroll-behavior decides.
+        revealScroll.scrollerEl.scrollTo({
+          left: revealScroll.left,
+          top: revealScroll.top
+        });
+      }
     }
     if (!silent) {
       rootRef.current.dispatchEvent(createToggleEvent(true));
@@ -50632,7 +50805,7 @@ const Expandable = props => {
         }
       }
       if (collapsing) {
-        watchSettle();
+        watchSettle(null);
       }
       rootRef.current.dispatchEvent(createToggleEvent(false));
     };
@@ -50972,16 +51145,14 @@ Expandable.Content = ExpandableContent;
 // the one exception, excluded at the call site.
 const UI_INTERACTIVE_SELECTOR = ["a[href]", "button", "input", "select", "textarea", "label", "[role='button']", "[contenteditable='']", "[contenteditable='true']", "audio[controls]", "video[controls]"].join(", ");
 
-// Scrolls the nearest scroller that can scroll so the whole expandable — UI
-// part and revealed content — is in view. Measured on the layout as it stands,
-// so the caller calls it while the open layout is the one laid out (see
-// openEffect). A root taller than the view is aligned on its UI side instead:
-// what the user pressed stays on screen, and the content follows as far as it
-// fits. One scroller only — a popup or a page around it is left where it is.
-const scrollExpandableIntoView = (rootEl, {
-  revealDirection,
-  behavior
-}) => {
+// Where the nearest scroller that can scroll would have to be for the whole
+// expandable — UI part and revealed content — to be in view. Measured on the
+// layout as it stands, so the caller measures while the open layout is the
+// one laid out (see openEffect). A root taller than the view is aligned on
+// its UI side instead: what the user pressed stays on screen, and the content
+// follows as far as it fits. One scroller only — a popup or a page around it
+// is left where it is. Null when there is no scroller, or nothing to scroll.
+const measureRevealScroll = (rootEl, revealDirection) => {
   let scrollerEl = null;
   for (const scrollContainer of getScrollContainerSet(rootEl)) {
     if (isScrollable(scrollContainer)) {
@@ -50990,7 +51161,7 @@ const scrollExpandableIntoView = (rootEl, {
     }
   }
   if (!scrollerEl) {
-    return;
+    return null;
   }
   const rootRect = rootEl.getBoundingClientRect();
   let block = "nearest";
@@ -51002,12 +51173,74 @@ const scrollExpandableIntoView = (rootEl, {
   } else if (rootRect.width > scrollerEl.clientWidth) {
     inline = revealDirection === "right" ? "start" : "end";
   }
-  scrollIntoViewScoped(rootEl, {
+  const {
+    left,
+    top
+  } = getScrollIntoViewScopedOffsets(rootEl, {
     container: scrollerEl,
     block,
-    inline,
-    behavior
+    inline
   });
+  if (left === scrollerEl.scrollLeft && top === scrollerEl.scrollTop) {
+    return null;
+  }
+  return {
+    scrollerEl,
+    left,
+    top
+  };
+};
+
+// Moves the scroller toward where the reveal ends at the pace of the reveal
+// itself: every frame the track's progress is read from the container's size
+// and the scroll stands the same fraction of its own way. The scroll cannot
+// run ahead of the track: only the box's own growth extends the scroller's
+// range, and what the target adds around the box (a parent's padding, a
+// scroll-margin) becomes reachable as the track grows — a scroll started at
+// once would be clamped short of it. One clock, the transition's, so the
+// content never waits below the fold either. Returns what stops the ride.
+const rideScrollerAlongReveal = ({
+  scrollerEl,
+  left,
+  top
+}, {
+  contentContainer,
+  axis,
+  startSize,
+  finalSize
+}) => {
+  const startLeft = scrollerEl.scrollLeft;
+  const startTop = scrollerEl.scrollTop;
+  const leftDelta = left - startLeft;
+  const topDelta = top - startTop;
+  let frameId;
+  const tick = () => {
+    const rect = contentContainer.getBoundingClientRect();
+    const size = axis === "x" ? rect.width : rect.height;
+    let progress = 1;
+    if (finalSize !== startSize) {
+      progress = (size - startSize) / (finalSize - startSize);
+      if (progress < 0) {
+        progress = 0;
+      } else if (progress > 1) {
+        progress = 1;
+      }
+    }
+    scrollerEl.scrollTo({
+      left: startLeft + leftDelta * progress,
+      top: startTop + topDelta * progress,
+      // Driven frame by frame: a smooth scroll-behavior on the scroller is
+      // for a scroll that lands, not for one that is held.
+      behavior: "instant"
+    });
+    if (progress < 1) {
+      frameId = requestAnimationFrame(tick);
+    }
+  };
+  frameId = requestAnimationFrame(tick);
+  return () => {
+    cancelAnimationFrame(frameId);
+  };
 };
 const createToggleEvent = open => {
   const newState = open ? "open" : "closed";
@@ -74139,11 +74372,15 @@ const PickerNaviTime = props => {
     max = "23:30",
     step
   } = props;
-  const stepSeconds = timeStringToSeconds(step) ?? 1800;
+  // resolveInputProps has already run (PickerFirstResolver) and left navi_time
+  // as written: what is handed on is a time input, whose step is in seconds.
+  const hostStep = timeStringToSeconds(step);
+  const stepSeconds = hostStep ?? 1800;
   const slots = useMemo(() => generateTimeSlots(min, max, stepSeconds), [min, max, stepSeconds]);
   return jsx(Next, {
     ...props,
     type: "time",
+    step: hostStep,
     children: jsx(List, {
       selectable: true,
       command: "--navi-send",
@@ -77189,6 +77426,10 @@ const warnOnUnknownPickerType = props => {
   pickerTypeWarnedSet.add(type);
   console.warn(`[navi] <Picker type="${type}"> — "${type}" is not a picker type. ` + `The picker holds a single text value instead, so an object given to it is written as "[object Object]". ` + `Types are: date, month, week, time, datetime, duration, color, file, text, array, object, confirm — ` + `"object" being the one for a popup holding several named controls.`);
 };
+
+// PickerFirstResolver comes before the presets so a preset reads the
+// min/max/step a bound signal fills in (resolveInputProps); a preset type
+// therefore has no row in NAVI_TYPE_DEFAULTS (resolve_input_props.js).
 const PickerResolved = /*#__PURE__*/createComponentResolver([PickerFirstResolver, PickerPresetResolver, PickerConfirmResolver, PickerCustomResolver, PickerTypeResolver, PickerButton]);
 const PickerUI = /*#__PURE__*/Object.assign(PickerDefaultUI, {
   Date: PickerDateUI,