@jsenv/navi 0.29.508 → 0.29.510

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,
@@ -47077,7 +47099,7 @@ const useRenderScope = (init, update) => {
  * interface UIStateController {
  *   id: string;
  *   controlType: string;          // Used for debug logging
- *   uiStateSignal: Signal;        // Accessed by button children to inherit parent value
+ *   uiStateSignal: Signal | null; // What a button child with no value of its own inherits (null: nothing)
  *   registerChild(child): void;   // Called on child mount
  *   onChildUIAction(child, e, { stateChanged: boolean }): void; // Called when a child fires a UI action
  *   unregisterChild(child): void; // Called on child unmount
@@ -49447,7 +49469,12 @@ const useUIFacadeStateController = (props, realUIStateController) => {
         props,
         pushStateDownToChild,
         ref: realUIStateController.ref,
-        uiStateSignal: realUIStateController.uiStateSignal,
+        // Nothing for a button in the popup to inherit. The picker's value is
+        // what its one child holds, and a button is refused as that child
+        // (canRegisterAsFacadeChild): it answers for itself. Handed the value,
+        // its action would run with the picker's selection over the params it
+        // was bound with — a "refresh" in a sort picker sending the sort order.
+        uiStateSignal: null,
         controlHostProps: realUIStateController.controlHostProps,
         readOnlyWithoutRun: realUIStateController.readOnlyWithoutRun,
         registerChild: (child) => {
@@ -49577,7 +49604,6 @@ const useUIFacadeStateController = (props, realUIStateController) => {
     (s) => {
       s.controller.props = props;
       s.controller.ref = realUIStateController.ref;
-      s.controller.uiStateSignal = realUIStateController.uiStateSignal;
       s.controller.controlHostProps = realUIStateController.controlHostProps;
       s.controller.readOnlyWithoutRun =
         realUIStateController.readOnlyWithoutRun;
@@ -55229,18 +55255,69 @@ const TextShrinkWrap = props => {
     shrinkWrap: undefined
   });
 };
-// Whether the text is cut is read on the axis navi cuts it on: one line ends
-// in an ellipsis on the inline axis, n lines are clamped on the block one. The
-// 1px is the rounding of a box that exactly fits.
+// Whether the text is cut is read from its line boxes against the content box,
+// on the axis navi cuts it on: one line ends in an ellipsis on the inline axis,
+// n lines are clamped on the block one. Not from scrollWidth/scrollHeight: the
+// scroll extent holds the padding, so a text cut inside its end padding would
+// read as fitting.
 const isTextTruncated = (element, maxLines) => {
   if (maxLines === 1 || maxLines === "1") {
-    return element.scrollWidth - element.clientWidth > 1;
+    const content = getContentEdges(element);
+    // The ellipsis is painted over a line laid out at its full width. The
+    // 0.5px absorbs the rounding of a box that exactly fits.
+    return getLineRects(element).some(rect => rect.right - content.right > 0.5 || content.left - rect.left > 0.5);
   }
   if (maxLines > 1) {
-    return element.scrollHeight - element.clientHeight > 1;
+    const content = getContentEdges(element);
+    // A clamped line is still laid out, under the content box. Its middle is
+    // read, not its top: under a line-height of 1 or less the glyphs of the
+    // next line start above the bottom of the one before.
+    return getLineRects(element).some(rect => rect.top + rect.height / 2 > content.bottom);
   }
   return false;
 };
+// Read from the in-flow children: an overlay positioned over the box (a loading
+// skeleton) fills the padding and is not part of a line.
+const getLineRects = element => {
+  const range = document.createRange();
+  const rects = [];
+  for (const child of element.childNodes) {
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      const {
+        position
+      } = window.getComputedStyle(child);
+      if (position === "absolute" || position === "fixed") {
+        continue;
+      }
+    }
+    range.selectNode(child);
+    rects.push(...range.getClientRects());
+  }
+  return rects;
+};
+// In the coordinates of the line rects: a transformed ancestor (a pressed
+// button's scale) shrinks the rects and the box, not the computed paddings.
+const getContentEdges = element => {
+  const style = window.getComputedStyle(element);
+  const box = element.getBoundingClientRect();
+  const scaleX = scaleOf(box.width, element.offsetWidth);
+  const scaleY = scaleOf(box.height, element.offsetHeight);
+  const startX = parseFloat(style.borderLeftWidth) + parseFloat(style.paddingLeft);
+  const endX = parseFloat(style.borderRightWidth) + parseFloat(style.paddingRight);
+  const endY = parseFloat(style.borderBottomWidth) + parseFloat(style.paddingBottom);
+  return {
+    left: box.left + startX * scaleX,
+    right: box.right - endX * scaleX,
+    bottom: box.bottom - endY * scaleY
+  };
+};
+const scaleOf = (screenSize, layoutSize) => {
+  // A box with no size has no padding or border to scale either.
+  if (layoutSize === 0) {
+    return 1;
+  }
+  return screenSize / layoutSize;
+};
 const TextReportingTruncation = ({
   onTruncatedChange,
   ...props