@jsenv/navi 0.20.8 → 0.20.10

package/dist/jsenv_navi.js

@@ -9347,18 +9347,9 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
       ([, value]) => value === literalValue,
     );
 
-    // Check if any signal in the current pattern tree can provide this literal
-    // We traverse ancestors and descendants to find signals that could provide the literal
-    const getAncestorSignals = (pattern) => {
-      const signals = [];
-      let current = pattern;
-      while (current) {
-        signals.push(...current.connections);
-        current = current.parent;
-      }
-      return signals;
-    };
-
+    // Check if any descendant signal can provide this literal
+    // (ancestor signals are excluded since they operate on different path positions
+    // that the current pattern has already "passed")
     const getDescendantSignals = (pattern) => {
       const signals = [...pattern.connections];
       for (const child of pattern.children) {
@@ -9367,12 +9358,9 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
       return signals;
     };
 
-    const allRelevantSignals = [
-      ...getAncestorSignals(patternObject),
-      ...getDescendantSignals(patternObject),
-    ];
+    const descendantSignals = getDescendantSignals(patternObject);
 
-    const systemCanProvide = allRelevantSignals.some((conn) => {
+    const systemCanProvide = descendantSignals.some((conn) => {
       const signalValue = conn.signal.value;
       return signalValue === literalValue && conn.isCustomValue(signalValue);
     });
@@ -9956,8 +9944,12 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
 
       const parentPatternObj = currentPatternObj.parent;
 
-      // Add parent's signal parameters
+      // Add parent's signal parameters (query params only, not path params)
+      // Path params from ancestors are structural path segments, not inheritable
       for (const connection of parentPatternObj.connections) {
+        if (connection.paramType === "path") {
+          continue;
+        }
         const { paramName } = connection;
 
         // Skip if child route already handles this parameter
@@ -10934,7 +10926,12 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
     // Traverse up the parent chain to inherit parameters
     while (currentParent) {
       // Check parent's signal connections for non-default values to inherit
+      // Only inherit query (search) parameters, not path parameters
+      // Path parameters are structural and correspond to specific path segments
       for (const parentConnection of currentParent.connections) {
+        if (parentConnection.paramType === "path") {
+          continue;
+        }
         const { paramName } = parentConnection;
         if (paramName in finalParams) {
           continue; // Already have this parameter
@@ -19143,6 +19140,7 @@ const TextOverflow = ({
   const [OverflowPinnedElement, setOverflowPinnedElement] = useState(null);
   return jsx(Text, {
     flex: true,
+    block: true,
     as: "div",
     nowWrap: noWrap,
     pre: !noWrap
@@ -19722,6 +19720,9 @@ const RectangleLoadingSvg = ({
 
   // ✅ Check if this should be a circle - only if width and height are nearly equal
   const maxPossibleRadius = Math.min(drawableWidth, drawableHeight) / 2;
+  radius = resolveCSSSize(radius, {
+    availableSize: Math.min(width, height)
+  });
   const actualRadius = Math.min(radius || Math.min(drawableWidth, drawableHeight) * 0.05, maxPossibleRadius // ✅ Limité au radius maximum possible
   );
   const aspectRatio = Math.max(drawableWidth, drawableHeight) / Math.min(drawableWidth, drawableHeight);
@@ -19841,9 +19842,10 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     z-index: 1;
     opacity: 0;
     pointer-events: none;
-  }
-  .navi_loading_rectangle_wrapper[data-visible] {
-    opacity: 1;
+
+    &[data-visible] {
+      opacity: 1;
+    }
   }
 `;
 const LoaderBackground = ({
@@ -19852,6 +19854,7 @@ const LoaderBackground = ({
   targetSelector,
   color,
   inset = 0,
+  borderRadius = 0,
   spacingTop = 0,
   spacingLeft = 0,
   spacingBottom = 0,
@@ -19880,6 +19883,7 @@ const LoaderBackground = ({
     loading: loading,
     color: color,
     inset: inset,
+    borderRadius: borderRadius,
     spacingTop: spacingTop,
     spacingLeft: spacingLeft,
     spacingBottom: spacingBottom,
@@ -19892,6 +19896,7 @@ const LoaderBackgroundWithPortal = ({
   loading,
   color,
   inset,
+  borderRadius,
   spacingTop,
   spacingLeft,
   spacingBottom,
@@ -19917,7 +19922,8 @@ const LoaderBackgroundWithPortal = ({
         right: `${inset + spacingRight}px`
       },
       children: shouldShowSpinner && jsx(RectangleLoading, {
-        color: color
+        color: color,
+        radius: borderRadius
       })
     }), children]
   });
@@ -19926,100 +19932,25 @@ const LoaderBackgroundBasic = ({
   loading,
   targetSelector,
   color,
+  borderWidth = 0,
+  borderRadius = 0,
   spacingTop,
   spacingLeft,
   spacingBottom,
   spacingRight,
+  marginTop = 0,
+  marginLeft = 0,
+  marginBottom = 0,
+  marginRight = 0,
+  paddingTop = 0,
+  paddingLeft = 0,
+  paddingBottom = 0,
+  paddingRight = 0,
   inset,
   children
 }) => {
   const shouldShowSpinner = useDebounceTrue(loading, 300);
   const rectangleRef = useRef(null);
-  const [, setOutlineOffset] = useState(0);
-  const [borderRadius, setBorderRadius] = useState(0);
-  const [borderTopWidth, setBorderTopWidth] = useState(0);
-  const [borderLeftWidth, setBorderLeftWidth] = useState(0);
-  const [borderRightWidth, setBorderRightWidth] = useState(0);
-  const [borderBottomWidth, setBorderBottomWidth] = useState(0);
-  const [marginTop, setMarginTop] = useState(0);
-  const [marginBottom, setMarginBottom] = useState(0);
-  const [marginLeft, setMarginLeft] = useState(0);
-  const [marginRight, setMarginRight] = useState(0);
-  const [paddingTop, setPaddingTop] = useState(0);
-  const [paddingLeft, setPaddingLeft] = useState(0);
-  const [paddingRight, setPaddingRight] = useState(0);
-  const [paddingBottom, setPaddingBottom] = useState(0);
-  const [currentColor, setCurrentColor] = useState(color);
-  useLayoutEffect(() => {
-    let animationFrame;
-    const updateStyles = () => {
-      const rectangle = rectangleRef.current;
-      if (!rectangle) {
-        return;
-      }
-      const container = rectangle.parentElement;
-      const containedElement = rectangle.nextElementSibling;
-      const target = targetSelector ? container.querySelector(targetSelector) : containedElement;
-      if (target) {
-        const {
-          width,
-          height
-        } = target.getBoundingClientRect();
-        const containedComputedStyle = window.getComputedStyle(containedElement);
-        const targetComputedStyle = window.getComputedStyle(target);
-        const newBorderTopWidth = resolveCSSSize(targetComputedStyle.borderTopWidth);
-        const newBorderLeftWidth = resolveCSSSize(targetComputedStyle.borderLeftWidth);
-        const newBorderRightWidth = resolveCSSSize(targetComputedStyle.borderRightWidth);
-        const newBorderBottomWidth = resolveCSSSize(targetComputedStyle.borderBottomWidth);
-        const newBorderRadius = resolveCSSSize(targetComputedStyle.borderRadius, {
-          availableSize: Math.min(width, height)
-        });
-        const newOutlineColor = targetComputedStyle.outlineColor;
-        const newBorderColor = targetComputedStyle.borderColor;
-        const newDetectedColor = targetComputedStyle.color;
-        const newOutlineOffset = resolveCSSSize(targetComputedStyle.outlineOffset);
-        const newMarginTop = resolveCSSSize(targetComputedStyle.marginTop);
-        const newMarginBottom = resolveCSSSize(targetComputedStyle.marginBottom);
-        const newMarginLeft = resolveCSSSize(targetComputedStyle.marginLeft);
-        const newMarginRight = resolveCSSSize(targetComputedStyle.marginRight);
-        const paddingTop = resolveCSSSize(containedComputedStyle.paddingTop);
-        const paddingLeft = resolveCSSSize(containedComputedStyle.paddingLeft);
-        const paddingRight = resolveCSSSize(containedComputedStyle.paddingRight);
-        const paddingBottom = resolveCSSSize(containedComputedStyle.paddingBottom);
-        setBorderTopWidth(newBorderTopWidth);
-        setBorderLeftWidth(newBorderLeftWidth);
-        setBorderRightWidth(newBorderRightWidth);
-        setBorderBottomWidth(newBorderBottomWidth);
-        setBorderRadius(newBorderRadius);
-        setOutlineOffset(newOutlineOffset);
-        setMarginTop(newMarginTop);
-        setMarginBottom(newMarginBottom);
-        setMarginLeft(newMarginLeft);
-        setMarginRight(newMarginRight);
-        setPaddingTop(paddingTop);
-        setPaddingLeft(paddingLeft);
-        setPaddingRight(paddingRight);
-        setPaddingBottom(paddingBottom);
-        if (color) {
-          // const resolvedColor = resolveCSSColor(color, rectangle, "css");
-          //  console.log(resolvedColor);
-          setCurrentColor(color);
-        } else if (newOutlineColor && newOutlineColor !== "rgba(0, 0, 0, 0)" && (document.activeElement === containedElement || newBorderColor === "rgba(0, 0, 0, 0)")) {
-          setCurrentColor(newOutlineColor);
-        } else if (newBorderColor && newBorderColor !== "rgba(0, 0, 0, 0)") {
-          setCurrentColor(newBorderColor);
-        } else {
-          setCurrentColor(newDetectedColor);
-        }
-      }
-      // updateStyles is very cheap so we run it every frame
-      animationFrame = requestAnimationFrame(updateStyles);
-    };
-    updateStyles();
-    return () => {
-      cancelAnimationFrame(animationFrame);
-    };
-  }, [color, targetSelector]);
   spacingTop += inset;
   // spacingTop += outlineOffset;
   // spacingTop -= borderTopWidth;
@@ -20044,7 +19975,7 @@ const LoaderBackgroundBasic = ({
     spacingRight += paddingRight;
     spacingBottom += paddingBottom;
   }
-  const maxBorderWidth = Math.max(borderTopWidth, borderLeftWidth, borderRightWidth, borderBottomWidth);
+  const maxBorderWidth = Math.max(borderWidth);
   const halfMaxBorderSize = maxBorderWidth / 2;
   const size = halfMaxBorderSize < 2 ? 2 : halfMaxBorderSize;
   const lineHalfSize = size / 2;
@@ -20065,7 +19996,7 @@ const LoaderBackgroundBasic = ({
       },
       children: loading && jsx(RectangleLoading, {
         shouldShowSpinner: shouldShowSpinner,
-        color: currentColor,
+        color: color,
         radius: borderRadius,
         size: size
       })
@@ -24635,7 +24566,8 @@ const InputRadioBasic = props => {
       loading: innerLoading,
       inset: -1,
       targetSelector: ".navi_radio_field",
-      color: "var(--loader-color)"
+      color: "var(--loader-color)",
+      borderRadius: "50%"
     }), renderRadioMemoized, jsx("span", {
       className: "navi_radio_field",
       children: appearance === "radio" ? jsxs("svg", {