@jsenv/navi 0.29.382 → 0.29.384

package/dist/dev/jsenv_navi.js

@@ -17917,6 +17917,11 @@ const generateSignalId = () => {
  *   `?level=3,4` becomes `[3, 4]` instead of `["3", "4"]`. Without it items stay strings.
  * @param {number} [options.step] - For number type: step size for precision. Values will be rounded to nearest multiple of step.
  * @param {Array} [options.oneOf] - Array of valid values for validation. Signal will be marked invalid if value is not in this array
+ * @param {boolean} [options.autoFix=false] - Hold the repaired value instead of the refused one: a number
+ *   clamped to `min`/`max` and rounded to `step`, a value outside `oneOf` replaced by the signal's
+ *   default value (an enumeration has no nearest value, and its order says nothing). Without it the
+ *   refused value is held as-is, marked invalid, and `validSignal` reads `undefined`. When the value
+ *   came from the address, the address is rewritten with the repaired one (a replace).
  * @param {boolean} [options.weak=false] - The param qualifies one visit, not the screen: it is written into a
  *   url only when explicitly named (`routeParams={{ edit: id }}`), never inherited from the signal's current
  *   value, and it goes back to the default value when the route stops matching. Use it for params like an
@@ -17951,11 +17956,11 @@ const generateSignalId = () => {
  * });
  *
  * @example
- * // Signal with validation and auto-fix
+ * // Signal with validation and auto-fix: an unknown tab falls back to "overview"
  * const tab = stateSignal("overview", {
  *   id: "current-tab",
  *   oneOf: ["overview", "details", "settings"],
- *   autoFix: () => "overview",
+ *   autoFix: true,
  *   persists: true
  * });
  *
@@ -18052,6 +18057,10 @@ const stateSignal = (defaultValue, options = {}) => {
     oneOf,
     localStorageRepresentation,
     autoFix,
+    // What a value no rule can repair falls back to: the default is what the
+    // state is when nothing says otherwise, read at repair time (from
+    // processValue, below) so a dynamic default is read where it stands.
+    fallback: () => getDefaultValue(false),
   });
   const readFromLocalStorage = persists
     ? () => {
@@ -27169,6 +27178,14 @@ This prevents cross-test pollution and ensures clean state.`,
       // Apply all signal updates in a batch
       const matchingRouteSet = new Set();
       const routeUpdateSet = new Set();
+      // Params the address gave and the state could not hold as written
+      // (autoFix): the address is rewritten with what the state holds, once
+      // the sync is over, so the repaired value is not left in the url to be
+      // replayed by a reload or a copied link.
+      const repairedParamsByRoute = new Map();
+      // A query connection is inherited by the child routes of the one
+      // declaring it: the first route to record a param answers for all.
+      const repairedParamNameSet = new Set();
       batch(() => {
         for (const {
           route,
@@ -27351,6 +27368,29 @@ This prevents cross-test pollution and ensures clean state.`,
               );
             }
             paramSignal.value = urlParamValue;
+            if (
+              paramSignal.validity?.autoFixed &&
+              !repairedParamNameSet.has(paramName)
+            ) {
+              repairedParamNameSet.add(paramName);
+              const repairedValue = paramSignal.peek();
+              if (debug) {
+                console.debug(
+                  `[route] URL->Signal: ${paramName}=${urlParamValue} repaired to ${repairedValue}, the url will be rewritten`,
+                );
+              }
+              let repairedParams = repairedParamsByRoute.get(route);
+              if (!repairedParams) {
+                repairedParams = {};
+                repairedParamsByRoute.set(route, repairedParams);
+              }
+              // A default is not written in an address (see the signal -> url sync)
+              repairedParams[paramName] = connection.isDefaultValue(
+                repairedValue,
+              )
+                ? undefined
+                : repairedValue;
+            }
             continue;
           }
         }
@@ -27361,6 +27401,12 @@ This prevents cross-test pollution and ensures clean state.`,
       // Reset flag after URL -> Signal synchronization is complete
       isUpdatingRoutesFromUrl = false;
       Object.assign(returnValue, { matchingRouteSet });
+      for (const [route, repairedParams] of repairedParamsByRoute) {
+        route.replaceParams(repairedParams, {
+          callReason: `url params repaired on ${route}: ${Object.keys(repairedParams).join(", ")}`,
+          history: "replace",
+        });
+      }
     }
 
     return returnValue;
@@ -61357,10 +61403,12 @@ let releaseLiftInProgress = null;
 // cancelled with the movement so a finished one cannot go on applying its
 // last values to the next movement's picture.
 let boxAnimationInProgress = null;
-// The page held still for the length of the movement. Its picture is frozen
-// anyway, and the browser keeps following the live anchor: a scroll would
-// carry the arriving box along under a page that does not move, and past the
-// clip to the room between the bars, computed where the boxes stood.
+// The page held still from the first read about it to the end of the
+// movement. Its picture is frozen anyway, and the browser keeps following the
+// live anchor: a scroll would carry the arriving box along under a page that
+// does not move, and past the clip to the room between the bars, computed
+// where the boxes stood — and read once, before the opening waits for its
+// target (see liftPopupFromAnchor).
 let releaseScrollHold = null;
 
 /**
@@ -61386,11 +61434,20 @@ const liftPopupFromAnchor = (
   releaseLiftInProgress?.();
 
   const elementLeaving = opened ? resolveAnchor() : resolveLiftTarget(popupEl);
-  // Read before the first write: the read brings the style up to date, and a
-  // write before it would make it bring it up to date once more.
+  // Everything read about the leaving side, before the first write. A read
+  // brings the style up to date, and the writes below land on the root — an
+  // attribute or an unregistered custom property there invalidates the
+  // computed style of every element — so a read placed after any of them is
+  // the whole document's style over again. Nothing on the leaving side moves
+  // before the movement, the page being held from here on.
+  releaseScrollHold = trapScrollInside(popupEl, { backdrop: true });
   const duration = getComputedStyle(popupEl)
     .getPropertyValue("--popup-animation-duration")
     .trim();
+  const cornersLeaving = readCorners(elementLeaving);
+  const room = measureRoomBetweenBars();
+  const boxLeaving = elementLeaving.getBoundingClientRect();
+  const paintLeaving = opened ? null : readBoxPaint(elementLeaving);
   const giveBackNameLeaving = wearLiftName(elementLeaving);
   const root = document.documentElement;
   root.setAttribute(ROOT_ATTRIBUTE, opened ? "opening" : "closing");
@@ -61401,11 +61458,10 @@ const liftPopupFromAnchor = (
     // browser's own pace.
     root.style.setProperty(DURATION_PROPERTY, duration);
   }
-  if (!opened) {
-    publishBoxPaint(elementLeaving);
-  }
-  const cornersLeaving = readCorners(elementLeaving);
   root.style.setProperty(BORDER_RADIUS_PROPERTY, cornersLeaving);
+  if (paintLeaving) {
+    publishBoxPaint(paintLeaving);
+  }
 
   let giveBackNameArriving = null;
   let stopWaitingForTarget = null;
@@ -61437,10 +61493,6 @@ const liftPopupFromAnchor = (
   releaseLiftInProgress = release;
 
   const startMovement = (change, resolveElementArriving) => {
-    releaseScrollHold?.();
-    releaseScrollHold = trapScrollInside(popupEl, { backdrop: true });
-    const room = measureRoomBetweenBars();
-    const boxLeaving = elementLeaving.getBoundingClientRect();
     let boxArriving = null;
     let cornersArriving = null;
     const viewTransition = startViewTransition(async () => {
@@ -61521,7 +61573,9 @@ const liftPopupFromAnchor = (
     if (lift === "box") {
       warnDrawingLiftedAsBox(target);
     }
-    publishBoxPaint(target);
+    // The last write before the transition: nothing reads between it and the
+    // style pass the browser makes on its own to take the first picture.
+    publishBoxPaint(readBoxPaint(target));
     startMovement(reveal, () => target);
   };
   const targetNow = findLiftTarget(popupEl);
@@ -61562,10 +61616,16 @@ const warnDrawingLiftedAsBox = (liftedElement) => {
   }
 };
 
-const publishBoxPaint = (liftedElement) => {
+// Read and published apart, so that a closing can read the paint with the
+// rest of what it reads and write it with the rest of what it writes.
+const readBoxPaint = (liftedElement) => {
   const { backgroundColor, backgroundImage } = getComputedStyle(
     findPaintedBox(liftedElement),
   );
+  return { backgroundColor, backgroundImage };
+};
+
+const publishBoxPaint = ({ backgroundColor, backgroundImage }) => {
   const root = document.documentElement;
   root.style.setProperty(BACKGROUND_COLOR_PROPERTY, backgroundColor);
   root.style.setProperty(BACKGROUND_IMAGE_PROPERTY, backgroundImage);