@jsenv/navi 0.29.388 → 0.29.390

package/dist/jsenv_navi.js

@@ -527,7 +527,10 @@ effect(() => {
  * The active language is read from `languagesSignal` (see lang_signal.js —
  * combines the browser's own `navigator.languages`, an optional
  * `setPreferredLanguage()` user override, and an optional
- * `setSupportedLanguages()` app-wide allow-list), live on every lookup.
+ * `setSupportedLanguages()` app-wide allow-list), live on every lookup. Each
+ * key is looked up in those languages in order, then in English, which
+ * translates every key: a language shipped for part of the keys only (German
+ * has the `time.*` words) never shows a raw key.
  *
  * Built-in key namespaces, all overridable — the registrations below are the
  * exhaustive list, read them to find the exact key to override:
@@ -1447,19 +1450,25 @@ const isNetworkPolicyError = (error) => {
  * is already saying it in words the person understands.
  *
  * navi's own report leaves it alone (action_error_report.js). What is left is
- * the screen displaying it: it does so by throwing the error to a boundary, and
- * `preact/debug` re-emits on `window` every error a boundary caught — on
- * purpose, for React devtools compatibility. Uncancelled, that lands as an
- * uncaught error in the console, over a page calmly explaining why nothing was
- * asked. Cancelling the event is what says it is handled: the browser drops
+ * the error reaching `window` on its own — a run called by hand whose failure
+ * nobody catches, a render throw no boundary took — where it lands as an
+ * uncaught error in the console, about a request the app itself declared would
+ * not leave. Cancelling the event is what says it is handled: the browser drops
  * the console line, and the jsenv supervisor skips prevented events too.
  *
  * Both shapes a failure travels in are covered, since which one it is depends
  * on whether the resource callback happened to be async — the throw reaching
  * `window`, and the rejection nobody caught.
  *
- * Scoped to the policy's own error and to nothing else — every other error a
- * boundary caught, and every other rejection let go, stays exactly as loud as
+ * A boundary displaying it raises no event at all. In dev, `preact/debug` hands
+ * every error a boundary caught to `console.error`, after the boundary took it
+ * and before it rendered anything; it reads no option and no flag, so that line
+ * stays. Muting it from here is not done: wrapping `console.error` rewrites a
+ * global, and wrapping `options._catchError` reaches into preact's private
+ * hooks, both to hide one class of error.
+ *
+ * Scoped to the policy's own error and to nothing else — every other error
+ * thrown at window, and every other rejection let go, stays exactly as loud as
  * it is.
  */
 let networkPolicyErrorSilenced = false;
@@ -1620,8 +1629,8 @@ const markErrorAsStoppingRender = (error) => {
  * An error the network policy produced is never reported: the app declared the
  * state that produced it, the request never left, and there is nothing for a
  * developer to fix. It is data a screen shows, and it stays data whether or not
- * one does (see network_policy.js, which also keeps it out of the browser
- * console).
+ * one does (see network_policy.js, which also cancels it when it reaches
+ * window).
  */
 const errorIsAccountedFor = (error) => {
   return (
@@ -4785,14 +4794,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",
@@ -4854,7 +4860,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`:
@@ -12162,8 +12167,9 @@ defineInteractionDetector({
   name: "surface",
   claims: (type) =>
     type === PAN || type === ZOOM || type === GRAB || type === RELEASE,
-  // A press on the surface may be a tap, a hold or the beginning of a pan, and
-  // nothing may read it as the first until the pointer has said which.
+  // A press on the surface may be a tap, a hold or the first finger of a pan or
+  // a pinch, and nothing may read it as the first until the pointer has said
+  // which.
   disputesPress: true,
   setup: (element, trigger, { types, readConfig }) => {
     const canPan = types.includes(PAN);
@@ -15166,21 +15172,33 @@ const getActionResultProperties = (action) => {
   return actionResultPropertiesMap.get(action);
 };
 
-// PUT/PATCH results update the UI through the store, and DELETE resets the GET
-// instead of rerunning it, so a GET rerun would only ever cost a request.
-// A POST is the one case the client cannot decide alone: whether a new item
-// belongs to a list depends on filters/pagination the backend owns.
 // Rationale in full, plus when to override: docs/list_refresh.md
 const defaultRerunOn = {
+  // PUT/PATCH results update the UI through the store, and DELETE resets the
+  // GET rather than rerunning it, so a GET rerun would only ever cost a request.
   GET: false,
+  // A POST is the one case the client cannot decide alone: whether a new item
+  // belongs to a list depends on filters/pagination the backend owns.
   GET_MANY: ["POST"],
+  // DELETE is in there, unlike for GET_MANY: an action holds ids and the store
+  // drops the deleted one out of every list holding it, while a list reading
+  // by slices holds places — the row that left takes the ones after it one
+  // rank up, and only the collection knows who fills the last one.
+  GET_RANGE: ["POST", "DELETE"],
+};
+// A key a `rerunOn` leaves out keeps the value it would have had without it:
+// the default for a resource, the value of the resource it is declared on for
+// a withParams() scope or a relation.
+const resolveRerunOn = (rerunOn, inheritedRerunOn = defaultRerunOn) => {
+  if (!rerunOn) {
+    return inheritedRerunOn;
+  }
+  return {
+    GET: rerunOn.GET ?? inheritedRerunOn.GET,
+    GET_MANY: rerunOn.GET_MANY ?? inheritedRerunOn.GET_MANY,
+    GET_RANGE: rerunOn.GET_RANGE ?? inheritedRerunOn.GET_RANGE,
+  };
 };
-// What makes a range reader stale (rerunOn.GET_RANGE overrides it). DELETE is
-// in there, unlike for GET_MANY: an action holds ids and the store drops the
-// deleted one out of every list holding it, while a list reading by slices
-// holds places — the row that left takes the ones after it one rank up, and
-// only the collection knows who fills the last one.
-const defaultInvalidateRangeOn = ["POST", "DELETE"];
 
 // This handles ALL resource lifecycle logic (rerun/reset) across all resources
 const createResourceLifecycleManager = () => {
@@ -15190,7 +15208,7 @@ const createResourceLifecycleManager = () => {
 
   const registerResource = (resourceScope, config) => {
     const {
-      rerunOn = defaultRerunOn,
+      rerunOn,
       paramScope = null,
       dependencies = [],
       uniqueKeys = [],
@@ -15473,8 +15491,7 @@ const createResourceLifecycleManager = () => {
       if (!isSameResource && !isDependent) {
         continue;
       }
-      const invalidateOn = config.rerunOn.GET_RANGE ?? defaultInvalidateRangeOn;
-      if (!shouldRerunAfter(invalidateOn, triggerVerb)) {
+      if (!shouldRerunAfter(config.rerunOn.GET_RANGE, triggerVerb)) {
         continue;
       }
       for (const rangeReader of config.rangeReaderSet) {
@@ -15975,7 +15992,7 @@ const resource = (
     addItemSetup,
     createRestAction: createRestActionForRoot,
     paramScope: getParamScope(undefined),
-    rerunOn,
+    rerunOn: resolveRerunOn(rerunOn),
     dependencies,
   });
 };
@@ -15993,6 +16010,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;
@@ -16018,6 +16044,8 @@ const createResource = (
     // private but exposed for convenience
     store,
     addItemSetup,
+    ownerName,
+    getChildStore,
   };
 
   resourceLifecycleManager.registerResource(stateFacade, {
@@ -16026,6 +16054,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,
@@ -16038,8 +16077,12 @@ 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; left out, the scope inherits the resource's
+   * @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
    * @see docs/resource.md — what a scope isolates, and `dependencies`
    *
@@ -16063,7 +16106,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`);
     }
@@ -16071,11 +16113,6 @@ const createResource = (
       ? { ...params, ...paramsToInject }
       : paramsToInject;
     const resolvedParamScope = getParamScope(resolvedParams);
-    const createRestActionWithParams = createRestActionFactoryForRoot(name, {
-      idKey,
-      store,
-      declarationSite,
-    });
     return createResource(name, {
       idKey,
       uniqueKeys,
@@ -16083,10 +16120,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: withParamsRerunOn ?? rerunOn,
+      rerunOn: resolveRerunOn(withParamsRerunOn, rerunOn),
       dependencies: withParamsDeps ?? dependencies,
+      ownerName,
+      getChildStore,
+      ownerDependency,
     });
   };
   stateFacade.withParams = withParams;
@@ -16103,14 +16146,15 @@ const createResource = (
    * Callback return contracts:
    * - GET / PUT → the parent object with the relationship nested inside:
    *   `async ({ id }) => ({ id, session: { id: 10, token: "abc" } })`; `null` for no relationship
-   * - DELETE → the parent id; the property is set to `null`
+   * - DELETE → the parent id, or `{ id }`; the property is set to `null`
    *
    * The backend may also embed the child inline in a parent GET/POST response — the
    * setter on the property upserts the nested object into the child store.
    *
-   * Returns the relationship resource: its actions (`USER_SESSION.GET`, `.PUT`,
-   * `.DELETE`) write the parent's property. A relation of the child itself is
-   * declared on the child resource (`SESSION.one("device", DEVICE)`).
+   * Returns the relationship resource, itself chainable. Its items are the child
+   * resource's own, shared by every parent: `USER_SESSION.one("device", DEVICE)`
+   * adds a reactive `.device` property to every session, as
+   * `SESSION.one("device", DEVICE)` would.
    *
    * @param {string} propertyName - property holding the child on each parent item
    * @param {Object} childResource - the independent resource created by `resource()`
@@ -16130,6 +16174,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;
@@ -16190,14 +16241,18 @@ const createResource = (
       );
     });
 
-    const createRestActionForOne = (verb, callback, { onActionComplete }) => {
+    const createRestActionForOne = (
+      verb,
+      callback,
+      { onActionComplete, paramScope },
+    ) => {
       const applyResultToValue =
         verb === "DELETE"
-          ? (itemId) => {
-              const item = store.select(itemId);
+          ? (itemIdOrItemProps) => {
+              const item = store.select(itemIdOrItemProps);
               const childItemId = item[propertyName][childIdKey];
               store.upsert({
-                [idKey]: itemId,
+                [idKey]: item[idKey],
                 [propertyName]: null,
               });
               return childItemId;
@@ -16225,7 +16280,7 @@ const createResource = (
             if (!isProps(result) && !primitiveCanBeId(result)) {
               throwInvalidResult(
                 action.name,
-                `an object (that will be used to drop "${name}" resource)`,
+                `the "${name}" id, or { ${idKey} } (the item whose "${propertyName}" becomes null)`,
                 result,
               );
             }
@@ -16250,11 +16305,11 @@ const createResource = (
         PUT,
         DELETE,
       },
-      store,
-      addItemSetup,
+      store: childStore,
+      addItemSetup: childResource.addItemSetup,
       createRestAction: createRestActionForOne,
       paramScope,
-      rerunOn: oneRerunOn ?? rerunOn,
+      rerunOn: resolveRerunOn(oneRerunOn, rerunOn),
       dependencies: oneDependencies ?? dependencies,
     });
   };
@@ -16277,6 +16332,9 @@ const createResource = (
    * - DELETE → `[parentId, childId]`
    * - DELETE_MANY → `[parentId, [childId, childId, …]]`
    *
+   * Returns the relationship resource, itself chainable; its items are the child
+   * resource's own, as for `.one()`.
+   *
    * @param {string} propertyName - property holding the child array on each parent item
    * @param {Object} childResource - the independent resource created by `resource()`
    * @param {Object} [restCallbacks] - `{ rerunOn, dependencies, GET, GET_MANY, POST, POST_MANY, PUT, PUT_MANY, PATCH, PATCH_MANY, DELETE, DELETE_MANY }`
@@ -16302,6 +16360,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}`;
@@ -16333,21 +16398,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"
@@ -16410,7 +16477,7 @@ const createResource = (
     const createRestActionAffectingManyItems = (
       verb,
       callback,
-      { onActionComplete },
+      { onActionComplete, paramScope },
     ) => {
       const applyResultToValue =
         verb === "GET"
@@ -16512,11 +16579,11 @@ const createResource = (
         DELETE,
         DELETE_MANY,
       },
-      store,
-      addItemSetup,
+      store: childStore,
+      addItemSetup: childResource.addItemSetup,
       createRestAction: createRestActionForMany,
       paramScope,
-      rerunOn: manyRerunOn ?? rerunOn,
+      rerunOn: resolveRerunOn(manyRerunOn, rerunOn),
       dependencies: manyDependencies ?? dependencies,
     });
   };
@@ -16538,7 +16605,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 }`
@@ -16558,6 +16630,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,
@@ -16587,7 +16667,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]);
 
@@ -16599,7 +16684,7 @@ const createResource = (
     const createRestActionForScopedOne = (
       verb,
       callback,
-      { onActionComplete },
+      { onActionComplete, paramScope },
     ) => {
       const childActionName = `${childName}.${verb}`;
       return createAction(callback, {
@@ -16645,8 +16730,9 @@ const createResource = (
       addItemSetup: childAddItemSetup,
       createRestAction: createRestActionForScopedOne,
       paramScope,
-      rerunOn: scopedOneRerunOn ?? rerunOn,
+      rerunOn: resolveRerunOn(scopedOneRerunOn, rerunOn),
       dependencies: scopedOneDependencies ?? dependencies,
+      ownerName: name,
     });
   };
 
@@ -16674,7 +16760,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 }`
@@ -16699,6 +16792,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,
@@ -16720,37 +16832,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(
@@ -16788,7 +16905,7 @@ const createResource = (
     const createRestActionForScopedMany = (
       verb,
       callback,
-      { isMany, onActionComplete },
+      { isMany, onActionComplete, paramScope },
     ) => {
       const childActionName = `${childName}.${verb}`;
       return createAction(callback, {
@@ -16810,7 +16927,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") {
@@ -16880,20 +17001,19 @@ const createResource = (
       addItemSetup: childAddItemSetup,
       createRestAction: createRestActionForScopedMany,
       paramScope,
-      rerunOn: scopedManyRerunOn ?? rerunOn,
+      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;
   };
 
@@ -17114,7 +17234,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).
@@ -17135,6 +17255,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
@@ -17276,22 +17426,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`
  */
@@ -17301,8 +17457,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(() => {
@@ -19592,9 +19753,9 @@ const isSizeSpacingKey = (key) => {
 // "vvw"/"vvh" are navi's own: the *visual* viewport, which — unlike vw/dvw —
 // shrinks when the mobile virtual keyboard opens (see layout/responsive.js), so
 // they are what a popup meant to stay clear of the keyboard should use.
-// "appw"/"apph" are the same thing narrowed to the app's own screen: identical
-// to vvw/vvh until the app declares --navi-app-max-width, and a share of that
-// width afterwards. A gap meant to read as "a small margin" must use these —
+// "appw"/"apph" are the same thing narrowed to the app's own screen: the
+// visual viewport minus the app's bands (--navi-app-inset-*), so identical to
+// vvw/vvh until the app declares bands. A gap meant to read as "a small margin" must use these —
 // 3vvw on a 1500px window is a 45px gap around a 600px app.
 // Functions rather than the signals themselves: appw/apph are not a signal to
 // read but a value to compute (a signal, then a CSS var read back). Reading the
@@ -29288,7 +29449,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;
@@ -29296,8 +29457,8 @@ const TRANSITION_FURNITURE_CSS = /* css */ `.navi_fixed_bar[data-navi-transition
 }
 `;
 
-// Called from the render of whatever holds the pages, never at module scope:
-// a page that never travels between routes must not carry this sheet, and a
+// Called as a movement starts over a marked area, never at module scope: a
+// page that never travels between routes must not carry this sheet, and a
 // build that sees no caller drops the css with the function.
 const installTransitionFurnitureCss = () => {
   import.meta.css = [TRANSITION_FURNITURE_CSS, "@jsenv/navi/src/nav/transition_furniture.js"];
@@ -29433,10 +29594,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;
       }
@@ -29760,9 +29918,10 @@ const TRANSITION_WINDOW_CSS = /* css */ `@property --navi-transition-cover-top {
 }
 `;
 
-// Called from the render of whatever needs the window, never at module scope:
-// a page that never travels between routes must not carry this sheet, and a
-// build that sees no caller drops the css with the function.
+// Called by whatever needs the window — a render, or a movement starting —
+// never at module scope: a page that never travels between routes must not
+// carry this sheet, and a build that sees no caller drops the css with the
+// function.
 const installTransitionWindowCss = () => {
   import.meta.css = [TRANSITION_WINDOW_CSS, "@jsenv/navi/src/nav/transition_window.js"];
 };
@@ -30575,9 +30734,6 @@ const RouteTransitionArea = ({
   children,
   ...rest
 }) => {
-  import.meta.css = [css$12, "@jsenv/navi/src/nav/route_transition.jsx"];
-  installTransitionWindowCss();
-  installTransitionFurnitureCss();
   const props = {
     ...rest,
     [TRANSITION_AREA_ATTRIBUTE]: ""
@@ -30646,8 +30802,6 @@ const RouteTransitionArea = ({
  * @returns {() => void} remove this relation.
  */
 const defineRouteTransition = (from, to, transition) => {
-  import.meta.css = [css$12, "@jsenv/navi/src/nav/route_transition.jsx"];
-  installTransitionWindowCss();
   if (!to) {
     throw new TypeError(`defineRouteTransition needs a destination: "to" is ${to}. The page reached from anywhere is written defineRouteTransition(null, THAT_PAGE, ...) — there is no relation the other way round, a page LEFT for anywhere being the back half of that one.`);
   }
@@ -30687,8 +30841,6 @@ const defineRouteTransition = (from, to, transition) => {
  * @returns {() => void} remove this default.
  */
 const defineRouteDefaultTransition = transition => {
-  import.meta.css = [css$12, "@jsenv/navi/src/nav/route_transition.jsx"];
-  installTransitionWindowCss();
   const value = normalizeTransition(transition);
   defaultTransition = value;
   return () => {
@@ -31264,12 +31416,25 @@ 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).
   holdTransitionDestination(transition, url);
+  // Adopted by what starts a movement rather than by what declares one: a link
+  // or a navTo() asks for a movement in an app that declared none, and an app
+  // that never moves never carries the sheet.
+  import.meta.css = [css$12, "@jsenv/navi/src/nav/route_transition.jsx"];
   documentElement.setAttribute(TRANSITION_ATTRIBUTE, direction);
   if (type) {
     documentElement.setAttribute(TRANSITION_TYPE_ATTRIBUTE, type);
@@ -31291,6 +31456,10 @@ const beginTransition = ({
   // left (see transition_window.js).
   let areaStateBefore = null;
   if (areaElement) {
+    // The area is the application's element as often as <RouteTransitionArea>,
+    // so what a movement on it plays with is adopted here, where it is found.
+    installTransitionWindowCss();
+    installTransitionFurnitureCss();
     documentElement.setAttribute(TRANSITION_TARGET_ATTRIBUTE, "area");
     // Said before the picture is taken, like every name (see
     // transition_furniture.js): what the bars are wearing when the transition
@@ -31301,11 +31470,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 {
@@ -31366,8 +31534,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);
     }
@@ -31376,8 +31547,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
@@ -31389,16 +31561,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;
@@ -31406,6 +31569,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
@@ -44279,16 +44458,6 @@ const css$Z = /* css */`@layer navi {
       border-radius: .2em;
     }
 
-    &[data-capitalize] {
-      text-transform: capitalize;
-
-      & .navi_text_sizer {
-        & .navi_text {
-          display: inline-block;
-        }
-      }
-    }
-
     &[data-shrinkwrap] {
       display: inline-block;
     }
@@ -44311,12 +44480,6 @@ time.navi_text {
 }
 
 .navi_text {
-  &[data-capitalize] {
-    &:first-letter, & .navi_text_sizer_placeholder:first-letter, & .navi_text_sizer_overlay:first-letter {
-      text-transform: uppercase;
-    }
-  }
-
   & .navi_text_sizer, & .navi_text_sizer_placeholder, & .navi_text_sizer_overlay {
     display: inherit;
     width: inherit;
@@ -44764,7 +44927,9 @@ const shouldInjectSpacingBetween = (left, right) => {
  *   text block from being wider than its content when inside a flex/grid container.
  *
  * @param {boolean} [capitalize]
- *   Uppercases the first letter of the text content via CSS.
+ *   Uppercases the first letter of the text, and only that one: "lundi 11 mai"
+ *   reads "Lundi 11 mai". Applied to the string the text starts with; a text
+ *   starting with an element keeps its first letter as written.
  *
  * @param {string|[number,number]|[string,string]} [selectRange]
  *   Selects a portion of the text on mount. Pass a substring to search for, a
@@ -44884,11 +45049,13 @@ const TextUI = props => {
     shrinkWrap,
     ...rest
   } = props;
+  if (capitalize) {
+    children = capitalizeFirstLetter(children);
+  }
   const defaultSpace = preventSpaceUnderlines ? FAKE_SPACE : REGULAR_SPACE;
   const resolvedSpacing = spacing ?? defaultSpace;
   const boxProps = {
     "as": "span",
-    "data-capitalize": capitalize ? "" : undefined,
     "data-shrinkwrap": shrinkWrap ? "" : undefined,
     ...rest,
     ref,
@@ -45189,6 +45356,28 @@ const Icon = ({
   });
 };
 
+// On the string rather than with ::first-letter, which needs a block container:
+// an inline text made one is an atomic box, and the ellipsis of the line
+// holding it (a Picker's value) can then no longer cut it. The string is also
+// what every copy of the children (sizer, bold background) renders, so they
+// all read the same. Leading spaces and punctuation are skipped, and a text
+// starting with a digit is left as it is, as ::first-letter would.
+const capitalizeFirstLetter = children => {
+  if (typeof children === "string") {
+    return children.replace(FIRST_LOWERCASE_LETTER_REGEXP, (match, lead, letter) => `${lead}${letter.toLocaleUpperCase()}`);
+  }
+  if (Array.isArray(children) && children.length > 0) {
+    const first = children[0];
+    const firstCapitalized = capitalizeFirstLetter(first);
+    if (firstCapitalized === first) {
+      return children;
+    }
+    return [firstCapitalized, ...children.slice(1)];
+  }
+  return children;
+};
+const FIRST_LOWERCASE_LETTER_REGEXP = /^([\s\p{P}]*)(\p{Ll})/u;
+
 /**
  * Where a link leads, asked for when the pointer or the focus arrives on it:
  * the moment the user signals a destination, before the press. Only what the
@@ -60033,7 +60222,6 @@ const createSwipeToClose = (side, { grip } = {}) => {
       panelEl.style.transform = "";
       panelEl.style.clipPath = "";
       panelEl.style.transitionProperty = "";
-      panelEl.style.userSelect = "";
     };
     // The resting value is written first and the animation only covers the way
     // to it: both end on the same number, so nothing is seen changing when the
@@ -60077,10 +60265,6 @@ const createSwipeToClose = (side, { grip } = {}) => {
           return false;
         }
         panelEl.style.transitionProperty = "none";
-        panelEl.style.userSelect = "none";
-        // What the first pixels of the gesture may have started selecting is
-        // not a selection, it is the beginning of this travel.
-        window.getSelection().removeAllRanges();
         // The way out is the only way there is anything: pulling the other way
         // leans against a wall and comes back.
         return {
@@ -60751,7 +60935,7 @@ const css$E = /* css */`
          --navi-app-width rather than 3vvw): the gap must read as a small
          margin around the dialog, and 3% of a 1500px window is a 45px gap
          around a 600px app. Identical to 3vvw until the app declares
-         --navi-app-max-width. */
+         bands (--navi-app-max-width, or --navi-app-inset-* written by it). */
       --x-dialog-container-spacing: calc(0.03 * var(--navi-app-width));
 
       /* --navi-app-width, not --navi-vvw: a top-layer dialog is calibrated on
@@ -61488,8 +61672,8 @@ const css$E = /* css */`
  *   `positionArea`: it both caps the dialog's own size (via
  *   `--x-dialog-container-spacing`, written from this prop) and offsets a docked
  *   one from the edge it docks to. Accepts a number of pixels, a viewport
- *   length — "appw"/"apph" being the app's own screen (the visual viewport, or
- *   the narrower one the app declared with --navi-app-max-width) and
+ *   length — "appw"/"apph" being the app's own screen (the visual viewport
+ *   minus the app's bands, see docs/safe_area.md) and
  *   "vvw"/"vvh" the visual viewport itself, which shrinks when the mobile
  *   keyboard opens — or a container length ("3cqw", the `layer="local"`
  *   default). Pass 0 for a dialog meant to sit flush (a side panel).
@@ -64542,6 +64726,8 @@ const css$C = /* css */`@layer navi {
  *   `maxWidth` below.
  * @param {boolean} [props.sizeFromAnchor] - **Dialog-only**, same guard.
  * @param {"box"|"scene"} [props.lift] - **Dialog-only**, same guard.
+ * @param {Element|{current: Element}|string} [props.liftAnchor] -
+ *   **Dialog-only**, same guard.
  * @param {string} [props.positionArea] - Forwarded as-is — `Dialog` and
  *   `Popover` have different own defaults (`"center"` vs. `"bottom"`),
  *   deliberately not homogenized here (each reads best for its own typical
@@ -64575,8 +64761,13 @@ 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 {boolean|"auto"|"fading"|"scaling"|"sliding"|"expanding"|`slide-from-${string}`|`expand-${string}`} [props.animation]
- *   - Forwarded as-is.
+ * @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
+ *   `{ open, close: "lifting" }` are `Dialog`'s. A popover has no lift, so in
+ *   popover mode `"lifting"` plays no movement (what a dialog does with no
+ *   anchor to lift out of) and the object form opens with its `open`, which
+ *   the close plays backwards like every other kind.
  * @param {string} [props.animationDuration] - Forwarded as-is.
  * @param {string} [props.maxWidth] - Forwarded as-is to both; also read
  *   here directly to help decide the automatic `mode` (a fixed length under
@@ -64642,6 +64833,8 @@ const Popup = props => {
     // mode the automatic screen-size resolution happens to pick.
     pressOutside = "close",
     backdrop,
+    // A popover is handed only the values it understands (toPopoverAnimation).
+    animation,
     // Popover-only (see this component's own doc) — destructured out so
     // they're never part of ...rest, and therefore never forwarded to
     // Dialog below, where they'd otherwise leak onto the real <dialog>
@@ -64656,6 +64849,7 @@ const Popup = props => {
     dockedOnSmallTouchScreen,
     sizeFromAnchor,
     lift,
+    liftAnchor,
     ...rest
   } = props;
   const [mode] = useResolvedPopupMode(modeProp, maxWidth, {
@@ -64675,6 +64869,8 @@ const Popup = props => {
       dockedOnSmallTouchScreen: dockedOnSmallTouchScreen,
       sizeFromAnchor: sizeFromAnchor,
       lift: lift,
+      liftAnchor: liftAnchor,
+      animation: animation,
       maxWidth: maxWidth,
       pressOutside: pressOutside,
       backdrop: backdrop,
@@ -64688,6 +64884,7 @@ const Popup = props => {
   }
   return jsx(Popover, {
     ...rest,
+    animation: toPopoverAnimation(animation),
     maxWidth: maxWidth,
     pressOutside: pressOutside,
     backdrop: backdrop,
@@ -64705,6 +64902,18 @@ const Popup = props => {
 };
 Popup.Close = PopupClose;
 
+// What Dialog's own animation values mean to a popover, which has no lift
+// (see the `animation` doc above).
+const toPopoverAnimation = animation => {
+  if (animation === "lifting") {
+    return undefined;
+  }
+  if (animation !== null && typeof animation === "object") {
+    return animation.open;
+  }
+  return animation;
+};
+
 installImportMetaCssBuild(import.meta);
 const css$B = /* css */`.navi_picker_callout_dock > [data-picker-content] {
   display: none;
@@ -66015,9 +66224,14 @@ const PickerNaviMinute = props => {
     step,
     value
   } = props;
+
+  // resolveInputProps has already run (PickerFirstResolver), so the type
+  // handed on is one the picker renders as is — the text field a navi numeric
+  // type resolves to, told what its value is.
   return jsx(Next, {
     ...props,
-    type: "minute",
+    type: "text",
+    "navi-input-type": "minute",
     children: jsxs(Box, {
       flex: "y",
       spacing: "s",
@@ -72613,11 +72827,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",
@@ -75029,6 +75247,10 @@ const PickerFirstResolver = props => {
     ...props
   });
 };
+
+// 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,
@@ -86439,6 +86661,8 @@ const css$3 = /* css */`@layer navi {
 }
 
 .navi_card_layout {
+  box-sizing: border-box;
+  min-height: 100%;
   padding-top: var(--layout-margin-top, var(--layout-margin-y, var(--layout-margin)));
   padding-right: var(--layout-margin-right, var(--layout-margin-x, var(--layout-margin)));
   padding-bottom: var(--layout-margin-bottom, var(--layout-margin-y, var(--layout-margin)));
@@ -86480,6 +86704,11 @@ const CardLayoutStyleCSSVars = {
   minHeight: "--layout-min-height"
 };
 /**
+ * The card is centered in the area both ways and is as wide as its content,
+ * `minWidth` at least. Down the area, the layout takes at least the height of
+ * what holds it, so how tall that area is is up to the page around it, as for
+ * `ViewportLayout`.
+ *
  * @type {import("ignore:preact").FunctionComponent<{
  *   alignX?: string,
  *   alignY?: string,
@@ -86509,6 +86738,11 @@ const CardLayout = ({
 }) => {
   import.meta.css = [css$3, "@jsenv/navi/src/layout/card_layout.jsx"];
   return jsx(Box, {
+    flex: true
+    // The card's place in the area; alignX/alignY below are its content's.
+    ,
+    alignX: "center",
+    alignY: "center",
     baseClassName: "navi_card_layout",
     styleCSSVars: CardLayoutStyleCSSVars,
     visualSelector: ".navi_card",