@jsenv/navi 0.29.507 → 0.29.509

package/dist/jsenv_navi.js

@@ -8553,7 +8553,7 @@ const route = (pattern, options = {}) => {
     };
     route.redirectTo = (
       params,
-      { callReason, history = "replace", debounceUrl } = {},
+      { callReason, history = "replace", debounceUrl, isSignalChange } = {},
     ) => {
       if (!integration) {
         return Promise.resolve();
@@ -8563,6 +8563,7 @@ const route = (pattern, options = {}) => {
         replace: history !== "push",
         debounce: debounceUrl,
         callReason,
+        fromSignal: isSignalChange,
       });
     };
     route.replaceParams = (
@@ -8577,52 +8578,18 @@ const route = (pattern, options = {}) => {
         return null;
       }
 
-      // Find all matching routes and update their actions, then delegate to most specific (deeper = more specific)
-      let mostSpecificRoute = route;
-      const routePrivateProperties = getRoutePrivateProperties(route);
-      let maxDepth = routePrivateProperties.routePattern.depth;
-      for (const routeCandidate of routeSet) {
-        if (routeCandidate === route) {
-          continue;
-        }
-        if (!routeCandidate.matching) {
-          continue;
-        }
-        const matchingRoute = routeCandidate;
-        const matchingRoutePrivateProperties =
-          getRoutePrivateProperties(matchingRoute);
-        const depth = matchingRoutePrivateProperties.routePattern.depth;
-        if (depth > maxDepth) {
-          maxDepth = depth;
-          mostSpecificRoute = matchingRoute;
-        }
-      }
+      const mostSpecificRoute = findMostSpecificMatchingRoute(route, routeSet);
       const isMostSpecificRoute = mostSpecificRoute === route;
 
-      // If we found a more specific route, delegate to it; otherwise handle it ourselves
+      // If we found a more specific route, delegate to it; otherwise handle it ourselves.
+      // A signal change reaches this only when the more specific route does not
+      // carry the param (see writeValueInUrl): left to it, the change would be dropped.
       if (!isMostSpecificRoute) {
-        // For signal-originated calls, only skip delegation if the more specific route
-        // has its own signal connection for the same params — meaning its own effect will
-        // fire and handle the redirect. If it doesn't have the connection, the signal
-        // change would be silently dropped, so we must delegate anyway.
-        if (isSignalChange) {
-          const mostSpecificRoutePrivateProperties =
-            getRoutePrivateProperties(mostSpecificRoute);
-          const { pathConnectionMap, queryConnectionMap } =
-            mostSpecificRoutePrivateProperties.routePattern;
-          const willHandleItself = Object.keys(newParams).every(
-            (paramName) =>
-              pathConnectionMap.has(paramName) ||
-              queryConnectionMap.has(paramName),
-          );
-          if (willHandleItself) {
-            return null;
-          }
-        }
         return mostSpecificRoute.redirectTo(newParams, {
           callReason: `replaceParams delegation from ${route} to ${mostSpecificRoute} (original reason: ${callReason})`,
           history,
           debounceUrl,
+          isSignalChange,
         });
       }
 
@@ -8641,6 +8608,7 @@ const route = (pattern, options = {}) => {
         replace: history !== "push",
         debounce: debounceUrl,
         callReason,
+        fromSignal: isSignalChange,
       });
     };
     route.matchesParams = (providedParams) => {
@@ -8703,7 +8671,7 @@ const route = (pattern, options = {}) => {
   });
   // Signal -> URL sync: When signal changes, update URL to reflect meaningful state
   // Only sync non-default values to keep URLs clean (static fallbacks stay invisible)
-  registerSetup(() => {
+  registerSetup(({ routeSet }) => {
     const cleanupSignalUrlEffectSet = new Set();
     // important: read connections at setup time so it includes query connections
     // inherited from ancestor patterns
@@ -8742,6 +8710,24 @@ const route = (pattern, options = {}) => {
           // Route not matching, no URL sync needed
           return;
         }
+        // A param declared on an ancestor is carried by every route below it,
+        // each with its own connection: all of them hear the write, the most
+        // specific one makes it. The others step aside before the history is
+        // read — a stateSignalGroup's push goes to the first write reading it.
+        const mostSpecificRoute = findMostSpecificMatchingRoute(
+          route,
+          routeSet,
+        );
+        if (mostSpecificRoute !== route) {
+          const { pathConnectionMap, queryConnectionMap } =
+            getRoutePrivateProperties(mostSpecificRoute).routePattern;
+          if (
+            pathConnectionMap.has(paramName) ||
+            queryConnectionMap.has(paramName)
+          ) {
+            return;
+          }
+        }
         if (urlParamValue === undefined) {
           // No URL parameter exists - check if signal has meaningful value to add
           if (connection.isDefaultValue(value)) {
@@ -9515,6 +9501,27 @@ const urlWithoutSearchAndHash = (url) => {
   return `${urlObject.origin}${urlObject.pathname}`;
 };
 
+// Deeper is more specific: among the routes matching the address, the one a
+// params write lands on.
+const findMostSpecificMatchingRoute = (route, routeSet) => {
+  let mostSpecificRoute = route;
+  let maxDepth = getRoutePrivateProperties(route).routePattern.depth;
+  for (const routeCandidate of routeSet) {
+    if (routeCandidate === route) {
+      continue;
+    }
+    if (!routeCandidate.matching) {
+      continue;
+    }
+    const depth = getRoutePrivateProperties(routeCandidate).routePattern.depth;
+    if (depth > maxDepth) {
+      maxDepth = depth;
+      mostSpecificRoute = routeCandidate;
+    }
+  }
+  return mostSpecificRoute;
+};
+
 // Every route action, with whether it asks something of the address at the
 // moment: its route matches and its params getter returns something.
 const routeActionEntriesSignal = signal([]);
@@ -13890,11 +13897,15 @@ const setupBrowserIntegrationViaHistory = ({
     // browser answers — a before/after cycle here would be about a navigation
     // that never happens. A push with something of its own for its entry — a
     // state, what the press handed over (see carryByLinkNavigation) — is a
-    // new entry, never one standing there already.
+    // new entry, never one standing there already. So is a push a signal write
+    // makes: the writes after it in the same move (a layer, then what is open
+    // inside it) build on its address at once, and a traversal would only land
+    // after they went to the entry being left.
     if (
       options.navigationType === "push" &&
       options.state === undefined &&
       !options.pressWrites &&
+      !options.fromSignal &&
       url !== readAddress()
     ) {
       const delta = adjacentEntryDelta(url);
@@ -14317,12 +14328,23 @@ const setupBrowserIntegrationViaHistory = ({
 
   const navTo = async (
     url,
-    { replace, state, routeTransition, debounce, asReturn, open } = {},
+    {
+      replace,
+      state,
+      routeTransition,
+      debounce,
+      asReturn,
+      open,
+      fromSignal,
+    } = {},
   ) => {
     const routingOptions = {
       reason: `navTo called with "${url}"`,
       navigationType: replace ? "replace" : "push",
       state,
+      // Made by a signal written into the url (see route.js writeValueInUrl):
+      // such a push is never turned into a traversal (see handleRoutingTask).
+      fromSignal,
       // A push that lands where its address was last left (see
       // link_return.js).
       asReturn,
@@ -55951,6 +55973,10 @@ const css$$ = /* css */`@layer navi {
     --link-color: unset;
     --link-text-decoration: none;
   }
+
+  .navi_link[data-color-inherit] {
+    --link-color-visited: var(--navi-link-color-visited, var(--link-color));
+  }
 }
 
 .navi_link {
@@ -56767,6 +56793,7 @@ const LinkPlain = props => {
     // Visual
     ,
     "data-variant": variant,
+    "data-color-inherit": props.color === "inherit" ? "" : undefined,
     "data-current-effect-bold": currentEffectBoldTechnique,
     "data-current-effect-shadow": currentEffectShadow ? "" : undefined,
     "data-current-indicator-position": currentIndicatorPosition,
@@ -68838,7 +68865,7 @@ const SlideContainer = ({
     // A transfer waiting for a travel that never happened — a controlled
     // `current` the caller chose not to move: dropped, the focus has no
     // business going anywhere. The one for a travel that DID happen stays,
-    // and lands when the slide it is for says it is settled (see settleFocus).
+    // and lands once the slide it is for is final (see landFocusHandOver).
     if (focusHandOverRef.current && focusHandOverRef.current.area !== readArea(currentElement)) {
       focusHandOverRef.current = null;
     }
@@ -68992,6 +69019,11 @@ const SlideContainer = ({
         requestAnimationFrame(rollBack);
       }
     }
+    // The slide a transfer waits for is current (any other one was dropped
+    // above): it lands once the renders this commit sets off are over.
+    if (focusHandOverRef.current) {
+      landFocusHandOver();
+    }
     // The keyboard is on a slide about to go out of reach and nobody has moved
     // it: inert would drop it on the floor (document.body), so it is handed to
     // the slide on screen instead. No event to read — this travel was asked for
@@ -69009,9 +69041,10 @@ const SlideContainer = ({
     // Out of reach LAST, once the keyboard has already moved on: a browser
     // takes the focus off an element the moment it becomes inert, and on its
     // own schedule — doing this first would let that undo the landing above and
-    // leave the focus on nothing.
-    for (const slideElement of slideElements) {
-      slideElement.toggleAttribute("inert", slideElement !== currentElement);
+    // leave the focus on nothing. A transfer still on its way does it itself,
+    // once landed.
+    if (!focusHandOverRef.current) {
+      markOutOfReach(currentElement);
     }
     // What is on screen now, for the travel after this one to depart from.
     // While a travel is playing the stage is the one that knows (it holds the
@@ -69362,14 +69395,7 @@ const SlideContainer = ({
   // dialog is OPEN, not when it was asked to open). `prepareFocusTransfer` has
   // to read the interaction — which element a mousedown landed on, whether the
   // modality is the keyboard — while the event is still being dispatched. The
-  // landing waits for the slide to say its DOM is settled (settleFocus below),
-  // which is later than one would think: a travel hands the slide a value
-  // (useSlideValue) and that value reaches it through context, so Preact
-  // re-renders the slide in a flush of its own — the container's own layout
-  // effect runs BEFORE its children have seen the value. A screen keyed by it,
-  // a form whose uncontrolled fields must start again from a new prefill,
-  // replaces its whole subtree there. Landing before that took the focus to a
-  // node about to be thrown away, and the focus went to document.body with it.
+  // landing waits for the slide's DOM to be final (see landFocusHandOver).
   const handOverFocus = (slideElement, focusTransfer, event) => {
     focusTransfer.transferFocus(event, slideElement);
     // Asked of the SLIDE, not of this box: the box contains itself, so asking
@@ -69394,21 +69420,46 @@ const SlideContainer = ({
     }
   };
 
-  // A slide reporting that its DOM is settled (its own layout effect, see
-  // Slide) — the moment the transfer prepared in goToArea can land. Every
-  // slide reports on every commit; only the one a transfer is waiting for,
-  // and only while it is the current one, takes it.
-  const settleFocus = slideArea => {
+  // The transfer prepared in goToArea lands once the slide it is for is the
+  // current one AND everything the travel set off has rendered — which is
+  // later than this box's own commit. A travel hands the slide a value
+  // (useSlideValue), and what reads it below a component that skipped its own
+  // render is re-rendered by Preact in a commit of its own, after this one. A
+  // screen keyed by it, a form whose uncontrolled fields must start again from
+  // a new prefill, replaces its whole subtree there: a focus landed before it
+  // goes to document.body with the node. Nor can the slide say when it is done
+  // from its own layout effect: rendered in the same pass as this box, its
+  // effects run before this box has made it current.
+  // Preact drains its render queue in one go, the renders it cascades into
+  // included, so a microtask queued from this commit runs after all of them.
+  // Until then the slide being left stays within reach (see markOutOfReach):
+  // inert would take the keyboard off it first, and drop it on document.body.
+  const landFocusHandOver = () => {
     const focusHandOver = focusHandOverRef.current;
-    if (!focusHandOver || focusHandOver.area !== slideArea) {
-      return;
-    }
-    const slideElement = readMap().slideElements.find(slideElement => readArea(slideElement) === slideArea);
-    if (!slideElement || !slideElement.hasAttribute("data-current")) {
-      return;
+    queueMicrotask(() => {
+      // Already landed by an earlier commit of this cascade, given up on, or
+      // replaced by the transfer of a newer travel.
+      if (focusHandOverRef.current !== focusHandOver || !trackRef.current) {
+        return;
+      }
+      focusHandOverRef.current = null;
+      const currentElement = readMap().slideElements.find(slideElement => slideElement.hasAttribute("data-current"));
+      if (!currentElement) {
+        return;
+      }
+      if (readArea(currentElement) === focusHandOver.area) {
+        handOverFocus(currentElement, focusHandOver.focusTransfer, focusHandOver.event);
+      }
+      markOutOfReach(currentElement);
+    });
+  };
+
+  // Every slide but the one on screen out of reach — of the keyboard and of
+  // assistive technology alike.
+  const markOutOfReach = currentElement => {
+    for (const slideElement of readMap().slideElements) {
+      slideElement.toggleAttribute("inert", slideElement !== currentElement);
     }
-    focusHandOverRef.current = null;
-    handOverFocus(slideElement, focusHandOver.focusTransfer, focusHandOver.event);
   };
 
   /**
@@ -70596,7 +70647,6 @@ const SlideContainer = ({
             answeredAreas,
             done,
             valueByArea,
-            settleFocus,
             // What a slide reads to know whether its content is rendered yet
             // (see Slide's `mount`).
             mount,
@@ -70680,15 +70730,6 @@ const Slide = ({
   }), [nextIsLocked, preventNavPrevious]);
   // What the travel into this slide carried, if anything (see useSlideValue).
   const slideValue = container?.valueByArea?.[slideArea];
-  // This slide's DOM is settled — said after EVERY commit, no dependency
-  // array, because it is a fact about the render that just happened, not a
-  // reaction to a particular prop. The container is the one holding a focus
-  // transfer waiting for it (see settleFocus): a travel's value reaches this
-  // slide through context one flush after the container moved, and what it
-  // shows (a form keyed by a prefill) is only final here.
-  useLayoutEffect(() => {
-    container?.settleFocus?.(slideArea);
-  });
   return jsx(SlideContext.Provider, {
     value: locks,
     children: jsx(SlideValueContext.Provider, {