@jsenv/navi 0.16.58 → 0.16.59

package/dist/jsenv_navi.js

@@ -1,7 +1,7 @@
 import { installImportMetaCss } from "./jsenv_navi_side_effects.js";
 import { useErrorBoundary, useLayoutEffect, useEffect, useCallback, useRef, useState, useContext, useMemo, useImperativeHandle, useId } from "preact/hooks";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
-import { createIterableWeakSet, mergeOneStyle, stringifyStyle, createPubSub, mergeTwoStyles, normalizeStyles, createGroupTransitionController, getElementSignature, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, resolveCSSSize, findBefore, findAfter, createValueEffect, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, allowWheelThrough, resolveCSSColor, createStyleController, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, hasCSSSizeUnit, activeElementSignal, canInterceptKeys, pickLightOrDark, resolveColorLuminance, initFocusGroup, dragAfterThreshold, getScrollContainer, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, elementIsFocusable } from "@jsenv/dom";
+import { createIterableWeakSet, mergeOneStyle, stringifyStyle, createPubSub, mergeTwoStyles, normalizeStyles, createGroupTransitionController, getElementSignature, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, findBefore, findAfter, createValueEffect, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, allowWheelThrough, resolveCSSColor, createStyleController, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, hasCSSSizeUnit, resolveCSSSize, activeElementSignal, canInterceptKeys, pickLightOrDark, resolveColorLuminance, initFocusGroup, dragAfterThreshold, getScrollContainer, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, elementIsFocusable } from "@jsenv/dom";
 import { prefixFirstAndIndentRemainingLines } from "@jsenv/humanize";
 import { effect, signal, computed, batch, useSignal } from "@preact/signals";
 import { createValidity } from "@jsenv/validity";
@@ -1448,6 +1448,7 @@ const createAction = (callback, rootOptions = {}) => {
           for (const key of keyArray) {
             const signalForThisKey = signalMap.get(key);
             if (signalForThisKey) {
+              // eslint-disable-next-line signals/no-conditional-value-read
               params[key] = signalForThisKey.value;
             } else {
               params[key] = staticParams[key];
@@ -12102,691 +12103,141 @@ const renderActionableComponent = (props, {
   });
 };
 
-const useDebounceTrue = (value, delay = 300) => {
-  const [debouncedTrue, setDebouncedTrue] = useState(false);
-  const timerRef = useRef(null);
-
-  useLayoutEffect(() => {
-    // If value is true or becomes true, start a timer
-    if (value) {
-      timerRef.current = setTimeout(() => {
-        setDebouncedTrue(true);
-      }, delay);
-    } else {
-      // If value becomes false, clear any pending timer and immediately set to false
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-      setDebouncedTrue(false);
-    }
-
-    // Cleanup function
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
-    };
-  }, [value, delay]);
-
-  return debouncedTrue;
-};
+/**
+ * Custom hook creating a stable callback that doesn't trigger re-renders.
+ *
+ * PROBLEM: Parent components often forget to use useCallback, causing library
+ * components to re-render unnecessarily when receiving callback props.
+ *
+ * SOLUTION: Library components can use this hook to create stable callback
+ * references internally, making them defensive against parents who don't
+ * optimize their callbacks. This ensures library components don't force
+ * consumers to think about useCallback.
+ *
+ * USAGE:
+ * ```js
+ * // Parent component (consumer) - no useCallback needed
+ * const Parent = () => {
+ *   const [count, setCount] = useState(0);
+ *
+ *   // Parent naturally creates new function reference each render
+ *   // (forgetting useCallback is common and shouldn't break performance)
+ *   return <LibraryButton onClick={(e) => setCount(count + 1)} />;
+ * };
+ *
+ * // Library component - defensive against changing callbacks
+ * const LibraryButton = ({ onClick }) => {
+ *   // ✅ Create stable reference from parent's potentially changing callback
+ *   const stableClick = useStableCallback(onClick);
+ *
+ *   // Internal expensive components won't re-render when parent updates
+ *   return <ExpensiveInternalButton onClick={stableClick} />;
+ * };
+ *
+ * // Deep internal component gets stable reference
+ * const ExpensiveInternalButton = memo(({ onClick }) => {
+ *   // This won't re-render when Parent's count changes
+ *   // But onClick will always call the latest Parent callback
+ *   return <button onClick={onClick}>Click me</button>;
+ * });
+ * ```
+ *
+ * Perfect for library components that need performance without burdening consumers.
+ */
 
-const useNetworkSpeed = () => {
-  return networkSpeedSignal.value;
-};
 
-const connection =
-  window.navigator.connection ||
-  window.navigator.mozConnection ||
-  window.navigator.webkitConnection;
+const useStableCallback = (callback, mapper) => {
+  const callbackRef = useRef();
+  callbackRef.current = callback;
+  const stableCallbackRef = useRef();
 
-const getNetworkSpeed = () => {
-  // ✅ Network Information API (support moderne)
-  if (!connection) {
-    return "3g";
-  }
-  if (connection) {
-    const effectiveType = connection.effectiveType;
-    if (effectiveType) {
-      return effectiveType; // "slow-2g", "2g", "3g", "4g", "5g"
-    }
-    const downlink = connection.downlink;
-    if (downlink) {
-      // downlink is in Mbps
-      if (downlink < 1) return "slow-2g"; // < 1 Mbps
-      if (downlink < 2.5) return "2g"; // 1-2.5 Mbps
-      if (downlink < 10) return "3g"; // 2.5-10 Mbps
-      return "4g"; // > 10 Mbps
-    }
+  // Return original falsy value directly when callback is not a function
+  if (!callback) {
+    return callback;
   }
-  return "3g";
-};
-
-const updateNetworkSpeed = () => {
-  networkSpeedSignal.value = getNetworkSpeed();
-};
-
-const networkSpeedSignal = signal(getNetworkSpeed());
-
-const setupNetworkMonitoring = () => {
-  const cleanupFunctions = [];
-
-  // ✅ 1. Écouter les changements natifs
 
-  if (connection) {
-    connection.addEventListener("change", updateNetworkSpeed);
-    cleanupFunctions.push(() => {
-      connection.removeEventListener("change", updateNetworkSpeed);
-    });
+  const existingStableCallback = stableCallbackRef.current;
+  if (existingStableCallback) {
+    return existingStableCallback;
   }
-
-  // ✅ 2. Polling de backup (toutes les 60 secondes)
-  const pollInterval = setInterval(updateNetworkSpeed, 60000);
-  cleanupFunctions.push(() => clearInterval(pollInterval));
-
-  // ✅ 3. Vérifier lors de la reprise d'activité
-  const handleVisibilityChange = () => {
-    if (!document.hidden) {
-      updateNetworkSpeed();
-    }
-  };
-
-  document.addEventListener("visibilitychange", handleVisibilityChange);
-  cleanupFunctions.push(() => {
-    document.removeEventListener("visibilitychange", handleVisibilityChange);
-  });
-
-  // ✅ 4. Vérifier lors de la reprise de connexion
-  const handleOnline = () => {
-    updateNetworkSpeed();
-  };
-
-  window.addEventListener("online", handleOnline);
-  cleanupFunctions.push(() => {
-    window.removeEventListener("online", handleOnline);
-  });
-
-  // Cleanup global
-  return () => {
-    cleanupFunctions.forEach((cleanup) => cleanup());
+  const stableCallback = (...args) => {
+    const currentCallback = callbackRef.current;
+    return currentCallback(...args);
   };
+  stableCallbackRef.current = stableCallback;
+  return stableCallback;
 };
-setupNetworkMonitoring();
-
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_rectangle_loading {
-    position: relative;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-  }
 
-  .navi_rectangle_loading[data-visible] {
-    opacity: 1;
+const DEBUG = {
+  registration: false,
+  // Element registration/unregistration
+  interaction: false,
+  // Click and keyboard interactions
+  selection: false,
+  // Selection state changes (set, add, remove, toggle)
+  navigation: false,
+  // Arrow key navigation and element finding
+  valueExtraction: false // Value extraction from elements
+};
+const debug = (category, ...args) => {
+  if (DEBUG[category]) {
+    console.debug(`[selection:${category}]`, ...args);
   }
-`;
-const RectangleLoading = ({
-  shouldShowSpinner,
-  color = "currentColor",
-  radius = 0,
-  size = 2
+};
+const SelectionContext = createContext();
+const useSelectionController = ({
+  elementRef,
+  layout,
+  value,
+  onChange,
+  multiple,
+  selectAllName
 }) => {
-  const containerRef = useRef(null);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [containerHeight, setContainerHeight] = useState(0);
+  if (!elementRef) {
+    throw new Error("useSelectionController: elementRef is required");
+  }
+  onChange = useStableCallback(onChange);
+  const currentValueRef = useRef(value);
+  currentValueRef.current = value;
+  const lastInternalValueRef = useRef(null);
+  const selectionController = useMemo(() => {
+    const innerOnChange = (newValue, ...args) => {
+      lastInternalValueRef.current = newValue;
+      onChange?.(newValue, ...args);
+    };
+    const getCurrentValue = () => currentValueRef.current;
+    if (layout === "grid") {
+      return createGridSelectionController({
+        getCurrentValue,
+        onChange: innerOnChange,
+        enabled: Boolean(onChange),
+        multiple,
+        selectAllName
+      });
+    }
+    return createLinearSelectionController({
+      getCurrentValue,
+      onChange: innerOnChange,
+      layout,
+      elementRef,
+      multiple,
+      enabled: Boolean(onChange),
+      selectAllName
+    });
+  }, [layout, multiple, elementRef]);
+  useEffect(() => {
+    selectionController.element = elementRef.current;
+  }, [selectionController]);
   useLayoutEffect(() => {
-    const container = containerRef.current;
-    if (!container) {
-      return null;
-    }
-    const {
-      width,
-      height
-    } = container.getBoundingClientRect();
-    setContainerWidth(width);
-    setContainerHeight(height);
-    let animationFrameId = null;
-    // Create a resize observer to detect changes in the container's dimensions
-    const resizeObserver = new ResizeObserver(entries => {
-      // Use requestAnimationFrame to debounce updates
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
-      }
-      animationFrameId = requestAnimationFrame(() => {
-        const [containerEntry] = entries;
-        const {
-          width,
-          height
-        } = containerEntry.contentRect;
-        setContainerWidth(width);
-        setContainerHeight(height);
-      });
-    });
-    resizeObserver.observe(container);
-    return () => {
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
-      }
-      resizeObserver.disconnect();
-    };
-  }, []);
-  return jsx("span", {
-    ref: containerRef,
-    className: "navi_rectangle_loading",
-    "data-visible": shouldShowSpinner ? "" : undefined,
-    children: containerWidth > 0 && containerHeight > 0 && jsx(RectangleLoadingSvg, {
-      radius: radius,
-      color: color,
-      width: containerWidth,
-      height: containerHeight,
-      strokeWidth: size
-    })
-  });
-};
-const RectangleLoadingSvg = ({
-  width,
-  height,
-  color,
-  radius,
-  trailColor = "transparent",
-  strokeWidth
-}) => {
-  const margin = Math.max(2, Math.min(width, height) * 0.03);
-
-  // Calculate the drawable area
-  const drawableWidth = width - margin * 2;
-  const drawableHeight = height - margin * 2;
-
-  // ✅ Check if this should be a circle - only if width and height are nearly equal
-  const maxPossibleRadius = Math.min(drawableWidth, drawableHeight) / 2;
-  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);
-  const isNearlySquare = aspectRatio <= 1.2; // Allow some tolerance for nearly square shapes
-  const isCircle = isNearlySquare && actualRadius >= maxPossibleRadius * 0.95;
-  let pathLength;
-  let rectPath;
-  if (isCircle) {
-    // ✅ Circle: perimeter = 2πr
-    pathLength = 2 * Math.PI * actualRadius;
-
-    // ✅ Circle path centered in the drawable area
-    const centerX = margin + drawableWidth / 2;
-    const centerY = margin + drawableHeight / 2;
-    rectPath = `
-      M ${centerX + actualRadius},${centerY}
-      A ${actualRadius},${actualRadius} 0 1 1 ${centerX - actualRadius},${centerY}
-      A ${actualRadius},${actualRadius} 0 1 1 ${centerX + actualRadius},${centerY}
-    `;
-  } else {
-    // ✅ Rectangle: calculate perimeter properly
-    const straightEdges = 2 * (drawableWidth - 2 * actualRadius) + 2 * (drawableHeight - 2 * actualRadius);
-    const cornerArcs = actualRadius > 0 ? 2 * Math.PI * actualRadius : 0;
-    pathLength = straightEdges + cornerArcs;
-    rectPath = `
-      M ${margin + actualRadius},${margin}
-      L ${margin + drawableWidth - actualRadius},${margin}
-      A ${actualRadius},${actualRadius} 0 0 1 ${margin + drawableWidth},${margin + actualRadius}
-      L ${margin + drawableWidth},${margin + drawableHeight - actualRadius}
-      A ${actualRadius},${actualRadius} 0 0 1 ${margin + drawableWidth - actualRadius},${margin + drawableHeight}
-      L ${margin + actualRadius},${margin + drawableHeight}
-      A ${actualRadius},${actualRadius} 0 0 1 ${margin},${margin + drawableHeight - actualRadius}
-      L ${margin},${margin + actualRadius}
-      A ${actualRadius},${actualRadius} 0 0 1 ${margin + actualRadius},${margin}
-    `;
-  }
-
-  // Fixed segment size in pixels
-  const maxSegmentSize = 40;
-  const segmentLength = Math.min(maxSegmentSize, pathLength * 0.25);
-  const gapLength = pathLength - segmentLength;
-
-  // Vitesse constante en pixels par seconde
-  const networkSpeed = useNetworkSpeed();
-  const pixelsPerSecond = {
-    "slow-2g": 40,
-    "2g": 60,
-    "3g": 80,
-    "4g": 120
-  }[networkSpeed] || 80;
-  const animationDuration = Math.max(1.5, pathLength / pixelsPerSecond);
-
-  // ✅ Calculate correct offset based on actual segment size
-  const segmentRatio = segmentLength / pathLength;
-  const circleOffset = -animationDuration * segmentRatio;
-  return jsxs("svg", {
-    width: "100%",
-    height: "100%",
-    viewBox: `0 0 ${width} ${height}`,
-    preserveAspectRatio: "none",
-    style: "overflow: visible",
-    xmlns: "http://www.w3.org/2000/svg",
-    "shape-rendering": "geometricPrecision",
-    children: [isCircle ? jsx("circle", {
-      cx: margin + drawableWidth / 2,
-      cy: margin + drawableHeight / 2,
-      r: actualRadius,
-      fill: "none",
-      stroke: trailColor,
-      strokeWidth: strokeWidth
-    }) : jsx("rect", {
-      x: margin,
-      y: margin,
-      width: drawableWidth,
-      height: drawableHeight,
-      fill: "none",
-      stroke: trailColor,
-      strokeWidth: strokeWidth,
-      rx: actualRadius
-    }), jsx("path", {
-      d: rectPath,
-      fill: "none",
-      stroke: color,
-      strokeWidth: strokeWidth,
-      strokeLinecap: "round",
-      strokeDasharray: `${segmentLength} ${gapLength}`,
-      pathLength: pathLength,
-      children: jsx("animate", {
-        attributeName: "stroke-dashoffset",
-        from: pathLength,
-        to: "0",
-        dur: `${animationDuration}s`,
-        repeatCount: "indefinite",
-        begin: "0s"
-      })
-    }), jsx("circle", {
-      r: strokeWidth,
-      fill: color,
-      children: jsx("animateMotion", {
-        path: rectPath,
-        dur: `${animationDuration}s`,
-        repeatCount: "indefinite",
-        rotate: "auto",
-        begin: `${circleOffset}s`
-      })
-    })]
-  });
-};
-
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_loading_rectangle_wrapper {
-    position: absolute;
-    top: var(--rectangle-top, 0);
-    right: var(--rectangle-right, 0);
-    bottom: var(--rectangle-bottom, 0);
-    left: var(--rectangle-left, 0);
-    z-index: 1;
-    opacity: 0;
-    pointer-events: none;
-  }
-  .navi_loading_rectangle_wrapper[data-visible] {
-    opacity: 1;
-  }
-`;
-const LoaderBackground = ({
-  loading,
-  containerRef,
-  targetSelector,
-  color,
-  inset = 0,
-  spacingTop = 0,
-  spacingLeft = 0,
-  spacingBottom = 0,
-  spacingRight = 0,
-  children
-}) => {
-  if (containerRef) {
-    const container = containerRef.current;
-    if (!container) {
-      return children;
-    }
-    return createPortal(jsx(LoaderBackgroundWithPortal, {
-      container: container,
-      loading: loading,
-      color: color,
-      inset: inset,
-      spacingTop: spacingTop,
-      spacingLeft: spacingLeft,
-      spacingBottom: spacingBottom,
-      spacingRight: spacingRight,
-      children: children
-    }), container);
-  }
-  return jsx(LoaderBackgroundBasic, {
-    targetSelector: targetSelector,
-    loading: loading,
-    color: color,
-    inset: inset,
-    spacingTop: spacingTop,
-    spacingLeft: spacingLeft,
-    spacingBottom: spacingBottom,
-    spacingRight: spacingRight,
-    children: children
-  });
-};
-const LoaderBackgroundWithPortal = ({
-  container,
-  loading,
-  color,
-  inset,
-  spacingTop,
-  spacingLeft,
-  spacingBottom,
-  spacingRight,
-  children
-}) => {
-  const shouldShowSpinner = useDebounceTrue(loading, 300);
-  if (!shouldShowSpinner) {
-    return children;
-  }
-  container.style.position = "relative";
-  let paddingTop = 0;
-  if (container.nodeName === "DETAILS") {
-    paddingTop = container.querySelector("summary").offsetHeight;
-  }
-  return jsxs(Fragment, {
-    children: [jsx("div", {
-      style: {
-        position: "absolute",
-        top: `${inset + paddingTop + spacingTop}px`,
-        bottom: `${inset + spacingBottom}px`,
-        left: `${inset + spacingLeft}px`,
-        right: `${inset + spacingRight}px`
-      },
-      children: shouldShowSpinner && jsx(RectangleLoading, {
-        color: color
-      })
-    }), children]
-  });
-};
-const LoaderBackgroundBasic = ({
-  loading,
-  targetSelector,
-  color,
-  spacingTop,
-  spacingLeft,
-  spacingBottom,
-  spacingRight,
-  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;
-  spacingTop += marginTop;
-  spacingLeft += inset;
-  // spacingLeft += outlineOffset;
-  // spacingLeft -= borderLeftWidth;
-  spacingLeft += marginLeft;
-  spacingRight += inset;
-  // spacingRight += outlineOffset;
-  // spacingRight -= borderRightWidth;
-  spacingRight += marginRight;
-  spacingBottom += inset;
-  // spacingBottom += outlineOffset;
-  // spacingBottom -= borderBottomWidth;
-  spacingBottom += marginBottom;
-  if (targetSelector) {
-    // oversimplification that actually works
-    // (simplified because it assumes the targeted element is a direct child of the contained element which may have padding)
-    spacingTop += paddingTop;
-    spacingLeft += paddingLeft;
-    spacingRight += paddingRight;
-    spacingBottom += paddingBottom;
-  }
-  const maxBorderWidth = Math.max(borderTopWidth, borderLeftWidth, borderRightWidth, borderBottomWidth);
-  const halfMaxBorderSize = maxBorderWidth / 2;
-  const size = halfMaxBorderSize < 2 ? 2 : halfMaxBorderSize;
-  const lineHalfSize = size / 2;
-  spacingTop -= lineHalfSize;
-  spacingLeft -= lineHalfSize;
-  spacingRight -= lineHalfSize;
-  spacingBottom -= lineHalfSize;
-  return jsxs(Fragment, {
-    children: [jsx("span", {
-      ref: rectangleRef,
-      className: "navi_loading_rectangle_wrapper",
-      "data-visible": shouldShowSpinner ? "" : undefined,
-      style: {
-        "--rectangle-top": `${spacingTop}px`,
-        "--rectangle-left": `${spacingLeft}px`,
-        "--rectangle-bottom": `${spacingBottom}px`,
-        "--rectangle-right": `${spacingRight}px`
-      },
-      children: loading && jsx(RectangleLoading, {
-        shouldShowSpinner: shouldShowSpinner,
-        color: currentColor,
-        radius: borderRadius,
-        size: size
-      })
-    }), children]
-  });
-};
-
-/**
- * Custom hook creating a stable callback that doesn't trigger re-renders.
- *
- * PROBLEM: Parent components often forget to use useCallback, causing library
- * components to re-render unnecessarily when receiving callback props.
- *
- * SOLUTION: Library components can use this hook to create stable callback
- * references internally, making them defensive against parents who don't
- * optimize their callbacks. This ensures library components don't force
- * consumers to think about useCallback.
- *
- * USAGE:
- * ```js
- * // Parent component (consumer) - no useCallback needed
- * const Parent = () => {
- *   const [count, setCount] = useState(0);
- *
- *   // Parent naturally creates new function reference each render
- *   // (forgetting useCallback is common and shouldn't break performance)
- *   return <LibraryButton onClick={(e) => setCount(count + 1)} />;
- * };
- *
- * // Library component - defensive against changing callbacks
- * const LibraryButton = ({ onClick }) => {
- *   // ✅ Create stable reference from parent's potentially changing callback
- *   const stableClick = useStableCallback(onClick);
- *
- *   // Internal expensive components won't re-render when parent updates
- *   return <ExpensiveInternalButton onClick={stableClick} />;
- * };
- *
- * // Deep internal component gets stable reference
- * const ExpensiveInternalButton = memo(({ onClick }) => {
- *   // This won't re-render when Parent's count changes
- *   // But onClick will always call the latest Parent callback
- *   return <button onClick={onClick}>Click me</button>;
- * });
- * ```
- *
- * Perfect for library components that need performance without burdening consumers.
- */
-
-
-const useStableCallback = (callback, mapper) => {
-  const callbackRef = useRef();
-  callbackRef.current = callback;
-  const stableCallbackRef = useRef();
-
-  // Return original falsy value directly when callback is not a function
-  if (!callback) {
-    return callback;
-  }
-
-  const existingStableCallback = stableCallbackRef.current;
-  if (existingStableCallback) {
-    return existingStableCallback;
-  }
-  const stableCallback = (...args) => {
-    const currentCallback = callbackRef.current;
-    return currentCallback(...args);
-  };
-  stableCallbackRef.current = stableCallback;
-  return stableCallback;
-};
-
-const DEBUG = {
-  registration: false,
-  // Element registration/unregistration
-  interaction: false,
-  // Click and keyboard interactions
-  selection: false,
-  // Selection state changes (set, add, remove, toggle)
-  navigation: false,
-  // Arrow key navigation and element finding
-  valueExtraction: false // Value extraction from elements
-};
-const debug = (category, ...args) => {
-  if (DEBUG[category]) {
-    console.debug(`[selection:${category}]`, ...args);
-  }
-};
-const SelectionContext = createContext();
-const useSelectionController = ({
-  elementRef,
-  layout,
-  value,
-  onChange,
-  multiple,
-  selectAllName
-}) => {
-  if (!elementRef) {
-    throw new Error("useSelectionController: elementRef is required");
-  }
-  onChange = useStableCallback(onChange);
-  const currentValueRef = useRef(value);
-  currentValueRef.current = value;
-  const lastInternalValueRef = useRef(null);
-  const selectionController = useMemo(() => {
-    const innerOnChange = (newValue, ...args) => {
-      lastInternalValueRef.current = newValue;
-      onChange?.(newValue, ...args);
-    };
-    const getCurrentValue = () => currentValueRef.current;
-    if (layout === "grid") {
-      return createGridSelectionController({
-        getCurrentValue,
-        onChange: innerOnChange,
-        enabled: Boolean(onChange),
-        multiple,
-        selectAllName
-      });
-    }
-    return createLinearSelectionController({
-      getCurrentValue,
-      onChange: innerOnChange,
-      layout,
-      elementRef,
-      multiple,
-      enabled: Boolean(onChange),
-      selectAllName
-    });
-  }, [layout, multiple, elementRef]);
-  useEffect(() => {
-    selectionController.element = elementRef.current;
-  }, [selectionController]);
-  useLayoutEffect(() => {
-    selectionController.enabled = Boolean(onChange);
-  }, [selectionController, onChange]);
-
-  // Smart sync: only update selection when value changes externally
-  useEffect(() => {
-    // Check if this is an external change (not from our internal onChange)
-    const isExternalChange = !compareTwoJsValues(value, lastInternalValueRef.current);
-    if (isExternalChange) {
-      selectionController.update(value);
+    selectionController.enabled = Boolean(onChange);
+  }, [selectionController, onChange]);
+
+  // Smart sync: only update selection when value changes externally
+  useEffect(() => {
+    // Check if this is an external change (not from our internal onChange)
+    const isExternalChange = !compareTwoJsValues(value, lastInternalValueRef.current);
+    if (isExternalChange) {
+      selectionController.update(value);
     }
   }, [value, selectionController]);
   return selectionController;
@@ -17271,636 +16722,1217 @@ const useConstraints = (elementRef, props, { targetSelector } = {}) => {
     if (minLowerLetterMessage) {
       setupCustomEvent(el, "min-lower-letter", minLowerLetterMessage);
     }
-    if (minUpperLetterMessage) {
-      setupCustomEvent(el, "min-upper-letter", minUpperLetterMessage);
+    if (minUpperLetterMessage) {
+      setupCustomEvent(el, "min-upper-letter", minUpperLetterMessage);
+    }
+    if (minSpecialCharMessage) {
+      setupCustomEvent(el, "min-special-char", minSpecialCharMessage);
+    }
+    if (availableMessage) {
+      setupCustomEvent(el, "available", availableMessage);
+    }
+    return () => {
+      for (const cleanupCallback of cleanupCallbackSet) {
+        cleanupCallback();
+      }
+    };
+  }, [
+    disabledMessage,
+    requiredMessage,
+    patternMessage,
+    minLengthMessage,
+    maxLengthMessage,
+    typeMessage,
+    minMessage,
+    maxMessage,
+    singleSpaceMessage,
+    sameAsMessage,
+    minDigitMessage,
+    minLowerLetterMessage,
+    minUpperLetterMessage,
+    minSpecialCharMessage,
+    availableMessage,
+  ]);
+
+  return remainingProps;
+};
+
+const useInitialTextSelection = (ref, textSelection) => {
+  const deps = [];
+  if (Array.isArray(textSelection)) {
+    deps.push(...textSelection);
+  } else {
+    deps.push(textSelection);
+  }
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || !textSelection) {
+      return;
+    }
+    const range = document.createRange();
+    const selection = window.getSelection();
+    if (Array.isArray(textSelection)) {
+      if (textSelection.length === 2) {
+        const [start, end] = textSelection;
+        if (typeof start === "number" && typeof end === "number") {
+          // Format: [0, 10] - character indices
+          selectByCharacterIndices(el, range, start, end);
+        } else if (typeof start === "string" && typeof end === "string") {
+          // Format: ["Click on the", "button to return"] - text strings
+          selectByTextStrings(el, range, start, end);
+        }
+      }
+    } else if (typeof textSelection === "string") {
+      // Format: "some text" - select the entire string occurrence
+      selectSingleTextString(el, range, textSelection);
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }, deps);
+};
+const selectByCharacterIndices = (element, range, startIndex, endIndex) => {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+  let currentIndex = 0;
+  let startNode = null;
+  let startOffset = 0;
+  let endNode = null;
+  let endOffset = 0;
+  while (walker.nextNode()) {
+    const textContent = walker.currentNode.textContent;
+    const nodeLength = textContent.length;
+
+    // Check if start position is in this text node
+    if (!startNode && currentIndex + nodeLength > startIndex) {
+      startNode = walker.currentNode;
+      startOffset = startIndex - currentIndex;
+    }
+
+    // Check if end position is in this text node
+    if (currentIndex + nodeLength >= endIndex) {
+      endNode = walker.currentNode;
+      endOffset = endIndex - currentIndex;
+      break;
+    }
+    currentIndex += nodeLength;
+  }
+  if (startNode && endNode) {
+    range.setStart(startNode, startOffset);
+    range.setEnd(endNode, endOffset);
+  }
+};
+const selectSingleTextString = (element, range, text) => {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+  while (walker.nextNode()) {
+    const textContent = walker.currentNode.textContent;
+    const index = textContent.indexOf(text);
+    if (index !== -1) {
+      range.setStart(walker.currentNode, index);
+      range.setEnd(walker.currentNode, index + text.length);
+      return;
+    }
+  }
+};
+const selectByTextStrings = (element, range, startText, endText) => {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+  let startNode = null;
+  let endNode = null;
+  let foundStart = false;
+  while (walker.nextNode()) {
+    const textContent = walker.currentNode.textContent;
+    if (!foundStart && textContent.includes(startText)) {
+      startNode = walker.currentNode;
+      foundStart = true;
+    }
+    if (foundStart && textContent.includes(endText)) {
+      endNode = walker.currentNode;
+      break;
+    }
+  }
+  if (startNode && endNode) {
+    const startOffset = startNode.textContent.indexOf(startText);
+    const endOffset = endNode.textContent.indexOf(endText) + endText.length;
+    range.setStart(startNode, startOffset);
+    range.setEnd(endNode, endOffset);
+  }
+};
+
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  *[data-navi-space] {
+    /* user-select: none; */
+  }
+
+  .navi_text {
+    position: relative;
+    color: inherit;
+
+    &[data-has-absolute-child] {
+      display: inline-block;
+    }
+  }
+
+  .navi_text_overflow {
+    flex-wrap: wrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .navi_text_overflow_wrapper {
+    display: flex;
+    width: 0;
+    flex-grow: 1;
+    gap: 0.3em;
+  }
+
+  .navi_text_overflow_text {
+    max-width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .navi_custom_space {
+  }
+
+  .navi_text_bold_wrapper {
+    position: relative;
+    display: inline-block;
+  }
+  .navi_text_bold_clone {
+    font-weight: bold;
+    opacity: 0;
+  }
+  .navi_text_bold_foreground {
+    position: absolute;
+    inset: 0;
+  }
+
+  .navi_text_bold_background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: currentColor;
+    font-weight: normal;
+    background: currentColor;
+    background-clip: text;
+    -webkit-background-clip: text;
+    transform-origin: center;
+    -webkit-text-fill-color: transparent;
+    opacity: 0;
+  }
+
+  .navi_text[data-bold] {
+    .navi_text_bold_background {
+      opacity: 1;
+    }
+  }
+
+  .navi_text[data-bold-transition] {
+    .navi_text_bold_foreground {
+      transition-property: font-weight;
+      transition-duration: 0.3s;
+      transition-timing-function: ease;
+    }
+
+    .navi_text_bold_background {
+      transition-property: opacity;
+      transition-duration: 0.3s;
+      transition-timing-function: ease;
+    }
+  }
+`;
+const REGULAR_SPACE = jsx("span", {
+  "data-navi-space": "",
+  children: " "
+});
+const CustomWidthSpace = ({
+  value
+}) => {
+  return jsx("span", {
+    className: "navi_custom_space",
+    style: `padding-left: ${value}`,
+    children: "\u200B"
+  });
+};
+const applySpacingOnTextChildren = (children, spacing) => {
+  if (spacing === "pre" || spacing === "0" || spacing === 0) {
+    return children;
+  }
+  if (!children) {
+    return children;
+  }
+  const childArray = toChildArray(children);
+  const childCount = childArray.length;
+  if (childCount <= 1) {
+    return children;
+  }
+  let separator;
+  if (spacing === undefined) {
+    spacing = REGULAR_SPACE;
+  } else if (typeof spacing === "string") {
+    if (isSizeSpacingScaleKey(spacing)) {
+      separator = jsx(CustomWidthSpace, {
+        value: resolveSpacingSize(spacing)
+      });
+    } else if (hasCSSSizeUnit(spacing)) {
+      separator = jsx(CustomWidthSpace, {
+        value: resolveSpacingSize(spacing)
+      });
+    } else {
+      separator = spacing;
+    }
+  } else if (typeof spacing === "number") {
+    separator = jsx(CustomWidthSpace, {
+      value: spacing
+    });
+  } else {
+    separator = spacing;
+  }
+  const childrenWithGap = [];
+  let i = 0;
+  while (true) {
+    const child = childArray[i];
+    childrenWithGap.push(child);
+    i++;
+    if (i === childCount) {
+      break;
     }
-    if (minSpecialCharMessage) {
-      setupCustomEvent(el, "min-special-char", minSpecialCharMessage);
+    const currentChild = childArray[i - 1];
+    const nextChild = childArray[i];
+    if (endsWithWhitespace(currentChild)) {
+      continue;
     }
-    if (availableMessage) {
-      setupCustomEvent(el, "available", availableMessage);
+    if (startsWithWhitespace(nextChild)) {
+      continue;
     }
-    return () => {
-      for (const cleanupCallback of cleanupCallbackSet) {
-        cleanupCallback();
-      }
-    };
-  }, [
-    disabledMessage,
-    requiredMessage,
-    patternMessage,
-    minLengthMessage,
-    maxLengthMessage,
-    typeMessage,
-    minMessage,
-    maxMessage,
-    singleSpaceMessage,
-    sameAsMessage,
-    minDigitMessage,
-    minLowerLetterMessage,
-    minUpperLetterMessage,
-    minSpecialCharMessage,
-    availableMessage,
-  ]);
-
-  return remainingProps;
+    childrenWithGap.push(separator);
+  }
+  return childrenWithGap;
 };
-
-const useInitialTextSelection = (ref, textSelection) => {
-  const deps = [];
-  if (Array.isArray(textSelection)) {
-    deps.push(...textSelection);
-  } else {
-    deps.push(textSelection);
+const endsWithWhitespace = jsxChild => {
+  if (typeof jsxChild === "string") {
+    return /\s$/.test(jsxChild);
   }
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el || !textSelection) {
-      return;
-    }
-    const range = document.createRange();
-    const selection = window.getSelection();
-    if (Array.isArray(textSelection)) {
-      if (textSelection.length === 2) {
-        const [start, end] = textSelection;
-        if (typeof start === "number" && typeof end === "number") {
-          // Format: [0, 10] - character indices
-          selectByCharacterIndices(el, range, start, end);
-        } else if (typeof start === "string" && typeof end === "string") {
-          // Format: ["Click on the", "button to return"] - text strings
-          selectByTextStrings(el, range, start, end);
-        }
-      }
-    } else if (typeof textSelection === "string") {
-      // Format: "some text" - select the entire string occurrence
-      selectSingleTextString(el, range, textSelection);
-    }
-    selection.removeAllRanges();
-    selection.addRange(range);
-  }, deps);
+  return false;
+};
+const startsWithWhitespace = jsxChild => {
+  if (typeof jsxChild === "string") {
+    return /^\s/.test(jsxChild);
+  }
+  return false;
+};
+const OverflowPinnedElementContext = createContext(null);
+const Text = props => {
+  const {
+    overflowEllipsis,
+    ...rest
+  } = props;
+  if (overflowEllipsis) {
+    return jsx(TextOverflow, {
+      ...rest
+    });
+  }
+  if (props.overflowPinned) {
+    return jsx(TextOverflowPinned, {
+      ...props
+    });
+  }
+  if (props.selectRange) {
+    return jsx(TextWithSelectRange, {
+      ...props
+    });
+  }
+  return jsx(TextBasic, {
+    ...props
+  });
+};
+const TextOverflow = ({
+  noWrap,
+  children,
+  ...rest
+}) => {
+  const [OverflowPinnedElement, setOverflowPinnedElement] = useState(null);
+  return jsx(Text, {
+    column: true,
+    as: "div",
+    nowWrap: noWrap,
+    pre: !noWrap
+    // For paragraph we prefer to keep lines and only hide unbreakable long sections
+    ,
+    preLine: rest.as === "p",
+    ...rest,
+    className: "navi_text_overflow",
+    expandX: true,
+    spacing: "pre",
+    children: jsxs("span", {
+      className: "navi_text_overflow_wrapper",
+      children: [jsx(OverflowPinnedElementContext.Provider, {
+        value: setOverflowPinnedElement,
+        children: jsx(Text, {
+          className: "navi_text_overflow_text",
+          children: children
+        })
+      }), OverflowPinnedElement]
+    })
+  });
+};
+const TextOverflowPinned = ({
+  overflowPinned,
+  ...props
+}) => {
+  const setOverflowPinnedElement = useContext(OverflowPinnedElementContext);
+  const text = jsx(Text, {
+    ...props
+  });
+  if (!setOverflowPinnedElement) {
+    console.warn("<Text overflowPinned> declared outside a <Text overflowEllipsis>");
+    return text;
+  }
+  if (overflowPinned) {
+    setOverflowPinnedElement(text);
+    return null;
+  }
+  setOverflowPinnedElement(null);
+  return text;
+};
+const TextWithSelectRange = ({
+  selectRange,
+  ...props
+}) => {
+  const defaultRef = useRef();
+  const ref = props.ref || defaultRef;
+  useInitialTextSelection(ref, selectRange);
+  return jsx(Text, {
+    ref: ref,
+    ...props
+  });
+};
+const TextBasic = ({
+  spacing = " ",
+  boldTransition,
+  boldStable,
+  preventBoldLayoutShift = boldTransition,
+  children,
+  ...rest
+}) => {
+  const boxProps = {
+    "as": "span",
+    "data-bold-transition": boldTransition ? "" : undefined,
+    ...rest,
+    "baseClassName": withPropsClassName("navi_text", rest.baseClassName)
+  };
+  const shouldPreserveSpacing = rest.as === "pre" || rest.box || rest.column || rest.row;
+  if (shouldPreserveSpacing) {
+    boxProps.spacing = spacing;
+  } else {
+    children = applySpacingOnTextChildren(children, spacing);
+  }
+  if (boldStable) {
+    const {
+      bold
+    } = boxProps;
+    return jsxs(Box, {
+      ...boxProps,
+      bold: undefined,
+      "data-bold": bold ? "" : undefined,
+      "data-has-absolute-child": "",
+      children: [jsx("span", {
+        className: "navi_text_bold_background",
+        "aria-hidden": "true",
+        children: children
+      }), children]
+    });
+  }
+  if (preventBoldLayoutShift) {
+    const alignX = rest.alignX || rest.align || "start";
+
+    // La technique consiste a avoid un double gras qui force une taille
+    // et la version light par dessus en position absolute
+    // on la centre aussi pour donner l'impression que le gras s'applique depuis le centre
+    // ne fonctionne que sur une seul ligne de texte (donc lorsque noWrap est actif)
+    // on pourrait auto-active cela sur une prop genre boldCanChange
+    return jsx(Box, {
+      ...boxProps,
+      children: jsxs("span", {
+        className: "navi_text_bold_wrapper",
+        children: [jsx("span", {
+          className: "navi_text_bold_clone",
+          "aria-hidden": "true",
+          children: children
+        }), jsx("span", {
+          className: "navi_text_bold_foreground",
+          "data-align": alignX,
+          children: children
+        })]
+      })
+    });
+  }
+  return jsx(Box, {
+    ...boxProps,
+    children: children
+  });
 };
-const selectByCharacterIndices = (element, range, startIndex, endIndex) => {
-  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
-  let currentIndex = 0;
-  let startNode = null;
-  let startOffset = 0;
-  let endNode = null;
-  let endOffset = 0;
-  while (walker.nextNode()) {
-    const textContent = walker.currentNode.textContent;
-    const nodeLength = textContent.length;
 
-    // Check if start position is in this text node
-    if (!startNode && currentIndex + nodeLength > startIndex) {
-      startNode = walker.currentNode;
-      startOffset = startIndex - currentIndex;
-    }
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  .navi_icon {
+    display: inline-block;
+    box-sizing: border-box;
+    max-width: 100%;
+    max-height: 100%;
 
-    // Check if end position is in this text node
-    if (currentIndex + nodeLength >= endIndex) {
-      endNode = walker.currentNode;
-      endOffset = endIndex - currentIndex;
-      break;
+    &[data-flow-inline] {
+      width: 1em;
+      height: 1em;
+    }
+    &[data-icon-char] {
+      flex-grow: 0 !important;
+      line-height: normal;
     }
-    currentIndex += nodeLength;
   }
-  if (startNode && endNode) {
-    range.setStart(startNode, startOffset);
-    range.setEnd(endNode, endOffset);
+
+  .navi_icon[data-interactive] {
+    cursor: pointer;
   }
-};
-const selectSingleTextString = (element, range, text) => {
-  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
-  while (walker.nextNode()) {
-    const textContent = walker.currentNode.textContent;
-    const index = textContent.indexOf(text);
-    if (index !== -1) {
-      range.setStart(walker.currentNode, index);
-      range.setEnd(walker.currentNode, index + text.length);
-      return;
-    }
+
+  .navi_icon_char_slot {
+    opacity: 0;
+    cursor: default;
+    user-select: none;
   }
-};
-const selectByTextStrings = (element, range, startText, endText) => {
-  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
-  let startNode = null;
-  let endNode = null;
-  let foundStart = false;
-  while (walker.nextNode()) {
-    const textContent = walker.currentNode.textContent;
-    if (!foundStart && textContent.includes(startText)) {
-      startNode = walker.currentNode;
-      foundStart = true;
-    }
-    if (foundStart && textContent.includes(endText)) {
-      endNode = walker.currentNode;
-      break;
-    }
+  .navi_icon_foreground {
+    position: absolute;
+    inset: 0;
   }
-  if (startNode && endNode) {
-    const startOffset = startNode.textContent.indexOf(startText);
-    const endOffset = endNode.textContent.indexOf(endText) + endText.length;
-    range.setStart(startNode, startOffset);
-    range.setEnd(endNode, endOffset);
+  .navi_icon_foreground > .navi_text {
+    display: flex;
+    aspect-ratio: 1 / 1;
+    min-width: 0;
+    height: 100%;
+    max-height: 1em;
+    align-items: center;
+    justify-content: center;
   }
-};
 
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  *[data-navi-space] {
-    /* user-select: none; */
+  .navi_icon > svg,
+  .navi_icon > img {
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+  }
+  .navi_icon[data-has-width] > svg,
+  .navi_icon[data-has-width] > img {
+    width: 100%;
+    height: auto;
+  }
+  .navi_icon[data-has-height] > svg,
+  .navi_icon[data-has-height] > img {
+    width: auto;
+    height: 100%;
+  }
+  .navi_icon[data-has-width][data-has-height] > svg,
+  .navi_icon[data-has-width][data-has-height] > img {
+    width: 100%;
+    height: 100%;
   }
 
-  .navi_text {
-    position: relative;
-    color: inherit;
-
-    &[data-has-absolute-child] {
-      display: inline-block;
+  .navi_icon[data-icon-char] svg,
+  .navi_icon[data-icon-char] img {
+    width: 100%;
+    height: 100%;
+  }
+  .navi_icon[data-icon-char] svg {
+    overflow: visible;
+  }
+`;
+const Icon = ({
+  href,
+  children,
+  charWidth = 1,
+  // 0 (zéro) is the real char width
+  // but 2 zéros gives too big icons
+  // while 1 "W" gives a nice result
+  baseChar = "W",
+  decorative,
+  onClick,
+  ...props
+}) => {
+  const innerChildren = href ? jsx("svg", {
+    width: "100%",
+    height: "100%",
+    children: jsx("use", {
+      href: href
+    })
+  }) : children;
+  let {
+    box,
+    width,
+    height
+  } = props;
+  if (width === "auto") width = undefined;
+  if (height === "auto") height = undefined;
+  const hasExplicitWidth = width !== undefined;
+  const hasExplicitHeight = height !== undefined;
+  if (!hasExplicitWidth && !hasExplicitHeight) {
+    if (decorative === undefined && !onClick) {
+      decorative = true;
     }
+  } else {
+    box = true;
   }
-
-  .navi_text_overflow {
-    flex-wrap: wrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  const ariaProps = decorative ? {
+    "aria-hidden": "true"
+  } : {};
+  if (typeof children === "string") {
+    return jsx(Text, {
+      ...props,
+      ...ariaProps,
+      "data-icon-text": "",
+      children: children
+    });
+  }
+  if (box) {
+    return jsx(Box, {
+      square: true,
+      ...props,
+      ...ariaProps,
+      box: box,
+      baseClassName: "navi_icon",
+      "data-has-width": hasExplicitWidth ? "" : undefined,
+      "data-has-height": hasExplicitHeight ? "" : undefined,
+      "data-interactive": onClick ? "" : undefined,
+      onClick: onClick,
+      children: innerChildren
+    });
   }
+  const invisibleText = baseChar.repeat(charWidth);
+  return jsxs(Text, {
+    ...props,
+    ...ariaProps,
+    className: withPropsClassName("navi_icon", props.className),
+    spacing: "pre",
+    "data-icon-char": "",
+    "data-has-width": hasExplicitWidth ? "" : undefined,
+    "data-has-height": hasExplicitHeight ? "" : undefined,
+    "data-interactive": onClick ? "" : undefined,
+    onClick: onClick,
+    children: [jsx("span", {
+      className: "navi_icon_char_slot",
+      "aria-hidden": "true",
+      children: invisibleText
+    }), jsx(Text, {
+      className: "navi_icon_foreground",
+      spacing: "pre",
+      children: innerChildren
+    })]
+  });
+};
+
+const EmailSvg = () => {
+  return jsxs("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [jsx("path", {
+      d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2"
+    }), jsx("path", {
+      d: "m2 6 8 5 2 1.5 2-1.5 8-5",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    })]
+  });
+};
+
+const LinkBlankTargetSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsx("path", {
+      d: "M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11",
+      stroke: "currentColor",
+      fill: "none",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    })
+  });
+};
+const LinkAnchorSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsxs("g", {
+      children: [jsx("path", {
+        d: "M13.2218 3.32234C15.3697 1.17445 18.8521 1.17445 21 3.32234C23.1479 5.47022 23.1479 8.95263 21 11.1005L17.4645 14.636C15.3166 16.7839 11.8342 16.7839 9.6863 14.636C9.48752 14.4373 9.30713 14.2271 9.14514 14.0075C8.90318 13.6796 8.97098 13.2301 9.25914 12.9419C9.73221 12.4688 10.5662 12.6561 11.0245 13.1435C11.0494 13.1699 11.0747 13.196 11.1005 13.2218C12.4673 14.5887 14.6834 14.5887 16.0503 13.2218L19.5858 9.6863C20.9526 8.31947 20.9526 6.10339 19.5858 4.73655C18.219 3.36972 16.0029 3.36972 14.636 4.73655L13.5754 5.79721C13.1849 6.18774 12.5517 6.18774 12.1612 5.79721C11.7706 5.40669 11.7706 4.77352 12.1612 4.383L13.2218 3.32234Z",
+        fill: "currentColor"
+      }), jsx("path", {
+        d: "M6.85787 9.6863C8.90184 7.64233 12.2261 7.60094 14.3494 9.42268C14.7319 9.75083 14.7008 10.3287 14.3444 10.685C13.9253 11.1041 13.2317 11.0404 12.7416 10.707C11.398 9.79292 9.48593 9.88667 8.27209 11.1005L4.73655 14.636C3.36972 16.0029 3.36972 18.219 4.73655 19.5858C6.10339 20.9526 8.31947 20.9526 9.6863 19.5858L10.747 18.5251C11.1375 18.1346 11.7706 18.1346 12.1612 18.5251C12.5517 18.9157 12.5517 19.5488 12.1612 19.9394L11.1005 21C8.95263 23.1479 5.47022 23.1479 3.32234 21C1.17445 18.8521 1.17445 15.3697 3.32234 13.2218L6.85787 9.6863Z",
+        fill: "currentColor"
+      })]
+    })
+  });
+};
 
-  .navi_text_overflow_wrapper {
-    display: flex;
-    width: 0;
-    flex-grow: 1;
-    gap: 0.3em;
-  }
+const PhoneSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsx("path", {
+      d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z",
+      fill: "currentColor"
+    })
+  });
+};
 
-  .navi_text_overflow_text {
-    max-width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
+const useDebounceTrue = (value, delay = 300) => {
+  const [debouncedTrue, setDebouncedTrue] = useState(false);
+  const timerRef = useRef(null);
 
-  .navi_custom_space {
-  }
+  useLayoutEffect(() => {
+    // If value is true or becomes true, start a timer
+    if (value) {
+      timerRef.current = setTimeout(() => {
+        setDebouncedTrue(true);
+      }, delay);
+    } else {
+      // If value becomes false, clear any pending timer and immediately set to false
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      setDebouncedTrue(false);
+    }
 
-  .navi_text_bold_wrapper {
-    position: relative;
-    display: inline-block;
-  }
-  .navi_text_bold_clone {
-    font-weight: bold;
-    opacity: 0;
-  }
-  .navi_text_bold_foreground {
-    position: absolute;
-    inset: 0;
-  }
+    // Cleanup function
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [value, delay]);
 
-  .navi_text_bold_background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    color: currentColor;
-    font-weight: normal;
-    background: currentColor;
-    background-clip: text;
-    -webkit-background-clip: text;
-    transform-origin: center;
-    -webkit-text-fill-color: transparent;
-    opacity: 0;
-  }
+  return debouncedTrue;
+};
 
-  .navi_text[data-bold] {
-    .navi_text_bold_background {
-      opacity: 1;
-    }
-  }
+const useNetworkSpeed = () => {
+  return networkSpeedSignal.value;
+};
 
-  .navi_text[data-bold-transition] {
-    .navi_text_bold_foreground {
-      transition-property: font-weight;
-      transition-duration: 0.3s;
-      transition-timing-function: ease;
-    }
+const connection =
+  window.navigator.connection ||
+  window.navigator.mozConnection ||
+  window.navigator.webkitConnection;
 
-    .navi_text_bold_background {
-      transition-property: opacity;
-      transition-duration: 0.3s;
-      transition-timing-function: ease;
-    }
-  }
-`;
-const REGULAR_SPACE = jsx("span", {
-  "data-navi-space": "",
-  children: " "
-});
-const CustomWidthSpace = ({
-  value
-}) => {
-  return jsx("span", {
-    className: "navi_custom_space",
-    style: `padding-left: ${value}`,
-    children: "\u200B"
-  });
-};
-const applySpacingOnTextChildren = (children, spacing) => {
-  if (spacing === "pre" || spacing === "0" || spacing === 0) {
-    return children;
-  }
-  if (!children) {
-    return children;
-  }
-  const childArray = toChildArray(children);
-  const childCount = childArray.length;
-  if (childCount <= 1) {
-    return children;
-  }
-  let separator;
-  if (spacing === undefined) {
-    spacing = REGULAR_SPACE;
-  } else if (typeof spacing === "string") {
-    if (isSizeSpacingScaleKey(spacing)) {
-      separator = jsx(CustomWidthSpace, {
-        value: resolveSpacingSize(spacing)
-      });
-    } else if (hasCSSSizeUnit(spacing)) {
-      separator = jsx(CustomWidthSpace, {
-        value: resolveSpacingSize(spacing)
-      });
-    } else {
-      separator = spacing;
-    }
-  } else if (typeof spacing === "number") {
-    separator = jsx(CustomWidthSpace, {
-      value: spacing
-    });
-  } else {
-    separator = spacing;
+const getNetworkSpeed = () => {
+  // ✅ Network Information API (support moderne)
+  if (!connection) {
+    return "3g";
   }
-  const childrenWithGap = [];
-  let i = 0;
-  while (true) {
-    const child = childArray[i];
-    childrenWithGap.push(child);
-    i++;
-    if (i === childCount) {
-      break;
-    }
-    const currentChild = childArray[i - 1];
-    const nextChild = childArray[i];
-    if (endsWithWhitespace(currentChild)) {
-      continue;
+  if (connection) {
+    const effectiveType = connection.effectiveType;
+    if (effectiveType) {
+      return effectiveType; // "slow-2g", "2g", "3g", "4g", "5g"
     }
-    if (startsWithWhitespace(nextChild)) {
-      continue;
+    const downlink = connection.downlink;
+    if (downlink) {
+      // downlink is in Mbps
+      if (downlink < 1) return "slow-2g"; // < 1 Mbps
+      if (downlink < 2.5) return "2g"; // 1-2.5 Mbps
+      if (downlink < 10) return "3g"; // 2.5-10 Mbps
+      return "4g"; // > 10 Mbps
     }
-    childrenWithGap.push(separator);
-  }
-  return childrenWithGap;
-};
-const endsWithWhitespace = jsxChild => {
-  if (typeof jsxChild === "string") {
-    return /\s$/.test(jsxChild);
-  }
-  return false;
-};
-const startsWithWhitespace = jsxChild => {
-  if (typeof jsxChild === "string") {
-    return /^\s/.test(jsxChild);
   }
-  return false;
+  return "3g";
 };
-const OverflowPinnedElementContext = createContext(null);
-const Text = props => {
-  const {
-    overflowEllipsis,
-    ...rest
-  } = props;
-  if (overflowEllipsis) {
-    return jsx(TextOverflow, {
-      ...rest
-    });
-  }
-  if (props.overflowPinned) {
-    return jsx(TextOverflowPinned, {
-      ...props
-    });
-  }
-  if (props.selectRange) {
-    return jsx(TextWithSelectRange, {
-      ...props
-    });
-  }
-  return jsx(TextBasic, {
-    ...props
-  });
+
+const updateNetworkSpeed = () => {
+  networkSpeedSignal.value = getNetworkSpeed();
 };
-const TextOverflow = ({
-  noWrap,
-  children,
-  ...rest
-}) => {
-  const [OverflowPinnedElement, setOverflowPinnedElement] = useState(null);
-  return jsx(Text, {
-    column: true,
-    as: "div",
-    nowWrap: noWrap,
-    pre: !noWrap
-    // For paragraph we prefer to keep lines and only hide unbreakable long sections
-    ,
-    preLine: rest.as === "p",
-    ...rest,
-    className: "navi_text_overflow",
-    expandX: true,
-    spacing: "pre",
-    children: jsxs("span", {
-      className: "navi_text_overflow_wrapper",
-      children: [jsx(OverflowPinnedElementContext.Provider, {
-        value: setOverflowPinnedElement,
-        children: jsx(Text, {
-          className: "navi_text_overflow_text",
-          children: children
-        })
-      }), OverflowPinnedElement]
-    })
+
+const networkSpeedSignal = signal(getNetworkSpeed());
+
+const setupNetworkMonitoring = () => {
+  const cleanupFunctions = [];
+
+  // ✅ 1. Écouter les changements natifs
+
+  if (connection) {
+    connection.addEventListener("change", updateNetworkSpeed);
+    cleanupFunctions.push(() => {
+      connection.removeEventListener("change", updateNetworkSpeed);
+    });
+  }
+
+  // ✅ 2. Polling de backup (toutes les 60 secondes)
+  const pollInterval = setInterval(updateNetworkSpeed, 60000);
+  cleanupFunctions.push(() => clearInterval(pollInterval));
+
+  // ✅ 3. Vérifier lors de la reprise d'activité
+  const handleVisibilityChange = () => {
+    if (!document.hidden) {
+      updateNetworkSpeed();
+    }
+  };
+
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+  cleanupFunctions.push(() => {
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
   });
-};
-const TextOverflowPinned = ({
-  overflowPinned,
-  ...props
-}) => {
-  const setOverflowPinnedElement = useContext(OverflowPinnedElementContext);
-  const text = jsx(Text, {
-    ...props
+
+  // ✅ 4. Vérifier lors de la reprise de connexion
+  const handleOnline = () => {
+    updateNetworkSpeed();
+  };
+
+  window.addEventListener("online", handleOnline);
+  cleanupFunctions.push(() => {
+    window.removeEventListener("online", handleOnline);
   });
-  if (!setOverflowPinnedElement) {
-    console.warn("<Text overflowPinned> declared outside a <Text overflowEllipsis>");
-    return text;
+
+  // Cleanup global
+  return () => {
+    cleanupFunctions.forEach((cleanup) => cleanup());
+  };
+};
+setupNetworkMonitoring();
+
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  .navi_rectangle_loading {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
   }
-  if (overflowPinned) {
-    setOverflowPinnedElement(text);
-    return null;
+
+  .navi_rectangle_loading[data-visible] {
+    opacity: 1;
   }
-  setOverflowPinnedElement(null);
-  return text;
-};
-const TextWithSelectRange = ({
-  selectRange,
-  ...props
+`;
+const RectangleLoading = ({
+  shouldShowSpinner,
+  color = "currentColor",
+  radius = 0,
+  size = 2
 }) => {
-  const defaultRef = useRef();
-  const ref = props.ref || defaultRef;
-  useInitialTextSelection(ref, selectRange);
-  return jsx(Text, {
-    ref: ref,
-    ...props
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return null;
+    }
+    const {
+      width,
+      height
+    } = container.getBoundingClientRect();
+    setContainerWidth(width);
+    setContainerHeight(height);
+    let animationFrameId = null;
+    // Create a resize observer to detect changes in the container's dimensions
+    const resizeObserver = new ResizeObserver(entries => {
+      // Use requestAnimationFrame to debounce updates
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      animationFrameId = requestAnimationFrame(() => {
+        const [containerEntry] = entries;
+        const {
+          width,
+          height
+        } = containerEntry.contentRect;
+        setContainerWidth(width);
+        setContainerHeight(height);
+      });
+    });
+    resizeObserver.observe(container);
+    return () => {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return jsx("span", {
+    ref: containerRef,
+    className: "navi_rectangle_loading",
+    "data-visible": shouldShowSpinner ? "" : undefined,
+    children: containerWidth > 0 && containerHeight > 0 && jsx(RectangleLoadingSvg, {
+      radius: radius,
+      color: color,
+      width: containerWidth,
+      height: containerHeight,
+      strokeWidth: size
+    })
   });
 };
-const TextBasic = ({
-  spacing = " ",
-  boldTransition,
-  boldStable,
-  preventBoldLayoutShift = boldTransition,
-  children,
-  ...rest
+const RectangleLoadingSvg = ({
+  width,
+  height,
+  color,
+  radius,
+  trailColor = "transparent",
+  strokeWidth
 }) => {
-  const boxProps = {
-    "as": "span",
-    "data-bold-transition": boldTransition ? "" : undefined,
-    ...rest,
-    "baseClassName": withPropsClassName("navi_text", rest.baseClassName)
-  };
-  const shouldPreserveSpacing = rest.as === "pre" || rest.box || rest.column || rest.row;
-  if (shouldPreserveSpacing) {
-    boxProps.spacing = spacing;
+  const margin = Math.max(2, Math.min(width, height) * 0.03);
+
+  // Calculate the drawable area
+  const drawableWidth = width - margin * 2;
+  const drawableHeight = height - margin * 2;
+
+  // ✅ Check if this should be a circle - only if width and height are nearly equal
+  const maxPossibleRadius = Math.min(drawableWidth, drawableHeight) / 2;
+  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);
+  const isNearlySquare = aspectRatio <= 1.2; // Allow some tolerance for nearly square shapes
+  const isCircle = isNearlySquare && actualRadius >= maxPossibleRadius * 0.95;
+  let pathLength;
+  let rectPath;
+  if (isCircle) {
+    // ✅ Circle: perimeter = 2πr
+    pathLength = 2 * Math.PI * actualRadius;
+
+    // ✅ Circle path centered in the drawable area
+    const centerX = margin + drawableWidth / 2;
+    const centerY = margin + drawableHeight / 2;
+    rectPath = `
+      M ${centerX + actualRadius},${centerY}
+      A ${actualRadius},${actualRadius} 0 1 1 ${centerX - actualRadius},${centerY}
+      A ${actualRadius},${actualRadius} 0 1 1 ${centerX + actualRadius},${centerY}
+    `;
   } else {
-    children = applySpacingOnTextChildren(children, spacing);
-  }
-  if (boldStable) {
-    const {
-      bold
-    } = boxProps;
-    return jsxs(Box, {
-      ...boxProps,
-      bold: undefined,
-      "data-bold": bold ? "" : undefined,
-      "data-has-absolute-child": "",
-      children: [jsx("span", {
-        className: "navi_text_bold_background",
-        "aria-hidden": "true",
-        children: children
-      }), children]
-    });
+    // ✅ Rectangle: calculate perimeter properly
+    const straightEdges = 2 * (drawableWidth - 2 * actualRadius) + 2 * (drawableHeight - 2 * actualRadius);
+    const cornerArcs = actualRadius > 0 ? 2 * Math.PI * actualRadius : 0;
+    pathLength = straightEdges + cornerArcs;
+    rectPath = `
+      M ${margin + actualRadius},${margin}
+      L ${margin + drawableWidth - actualRadius},${margin}
+      A ${actualRadius},${actualRadius} 0 0 1 ${margin + drawableWidth},${margin + actualRadius}
+      L ${margin + drawableWidth},${margin + drawableHeight - actualRadius}
+      A ${actualRadius},${actualRadius} 0 0 1 ${margin + drawableWidth - actualRadius},${margin + drawableHeight}
+      L ${margin + actualRadius},${margin + drawableHeight}
+      A ${actualRadius},${actualRadius} 0 0 1 ${margin},${margin + drawableHeight - actualRadius}
+      L ${margin},${margin + actualRadius}
+      A ${actualRadius},${actualRadius} 0 0 1 ${margin + actualRadius},${margin}
+    `;
   }
-  if (preventBoldLayoutShift) {
-    const alignX = rest.alignX || rest.align || "start";
 
-    // La technique consiste a avoid un double gras qui force une taille
-    // et la version light par dessus en position absolute
-    // on la centre aussi pour donner l'impression que le gras s'applique depuis le centre
-    // ne fonctionne que sur une seul ligne de texte (donc lorsque noWrap est actif)
-    // on pourrait auto-active cela sur une prop genre boldCanChange
-    return jsx(Box, {
-      ...boxProps,
-      children: jsxs("span", {
-        className: "navi_text_bold_wrapper",
-        children: [jsx("span", {
-          className: "navi_text_bold_clone",
-          "aria-hidden": "true",
-          children: children
-        }), jsx("span", {
-          className: "navi_text_bold_foreground",
-          "data-align": alignX,
-          children: children
-        })]
+  // Fixed segment size in pixels
+  const maxSegmentSize = 40;
+  const segmentLength = Math.min(maxSegmentSize, pathLength * 0.25);
+  const gapLength = pathLength - segmentLength;
+
+  // Vitesse constante en pixels par seconde
+  const networkSpeed = useNetworkSpeed();
+  const pixelsPerSecond = {
+    "slow-2g": 40,
+    "2g": 60,
+    "3g": 80,
+    "4g": 120
+  }[networkSpeed] || 80;
+  const animationDuration = Math.max(1.5, pathLength / pixelsPerSecond);
+
+  // ✅ Calculate correct offset based on actual segment size
+  const segmentRatio = segmentLength / pathLength;
+  const circleOffset = -animationDuration * segmentRatio;
+  return jsxs("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: `0 0 ${width} ${height}`,
+    preserveAspectRatio: "none",
+    style: "overflow: visible",
+    xmlns: "http://www.w3.org/2000/svg",
+    "shape-rendering": "geometricPrecision",
+    children: [isCircle ? jsx("circle", {
+      cx: margin + drawableWidth / 2,
+      cy: margin + drawableHeight / 2,
+      r: actualRadius,
+      fill: "none",
+      stroke: trailColor,
+      strokeWidth: strokeWidth
+    }) : jsx("rect", {
+      x: margin,
+      y: margin,
+      width: drawableWidth,
+      height: drawableHeight,
+      fill: "none",
+      stroke: trailColor,
+      strokeWidth: strokeWidth,
+      rx: actualRadius
+    }), jsx("path", {
+      d: rectPath,
+      fill: "none",
+      stroke: color,
+      strokeWidth: strokeWidth,
+      strokeLinecap: "round",
+      strokeDasharray: `${segmentLength} ${gapLength}`,
+      pathLength: pathLength,
+      children: jsx("animate", {
+        attributeName: "stroke-dashoffset",
+        from: pathLength,
+        to: "0",
+        dur: `${animationDuration}s`,
+        repeatCount: "indefinite",
+        begin: "0s"
       })
-    });
-  }
-  return jsx(Box, {
-    ...boxProps,
-    children: children
+    }), jsx("circle", {
+      r: strokeWidth,
+      fill: color,
+      children: jsx("animateMotion", {
+        path: rectPath,
+        dur: `${animationDuration}s`,
+        repeatCount: "indefinite",
+        rotate: "auto",
+        begin: `${circleOffset}s`
+      })
+    })]
   });
 };
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_icon {
-    display: inline-block;
-    box-sizing: border-box;
-    max-width: 100%;
-    max-height: 100%;
-
-    &[data-flow-inline] {
-      width: 1em;
-      height: 1em;
-    }
-    &[data-icon-char] {
-      flex-grow: 0 !important;
-      line-height: normal;
-    }
-  }
-
-  .navi_icon[data-interactive] {
-    cursor: pointer;
-  }
-
-  .navi_icon_char_slot {
-    opacity: 0;
-    cursor: default;
-    user-select: none;
-  }
-  .navi_icon_foreground {
+  .navi_loading_rectangle_wrapper {
     position: absolute;
-    inset: 0;
-  }
-  .navi_icon_foreground > .navi_text {
-    display: flex;
-    aspect-ratio: 1 / 1;
-    min-width: 0;
-    height: 100%;
-    max-height: 1em;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .navi_icon > svg,
-  .navi_icon > img {
-    width: 100%;
-    height: 100%;
-    backface-visibility: hidden;
-  }
-  .navi_icon[data-has-width] > svg,
-  .navi_icon[data-has-width] > img {
-    width: 100%;
-    height: auto;
-  }
-  .navi_icon[data-has-height] > svg,
-  .navi_icon[data-has-height] > img {
-    width: auto;
-    height: 100%;
-  }
-  .navi_icon[data-has-width][data-has-height] > svg,
-  .navi_icon[data-has-width][data-has-height] > img {
-    width: 100%;
-    height: 100%;
-  }
-
-  .navi_icon[data-icon-char] svg,
-  .navi_icon[data-icon-char] img {
-    width: 100%;
-    height: 100%;
+    top: var(--rectangle-top, 0);
+    right: var(--rectangle-right, 0);
+    bottom: var(--rectangle-bottom, 0);
+    left: var(--rectangle-left, 0);
+    z-index: 1;
+    opacity: 0;
+    pointer-events: none;
   }
-  .navi_icon[data-icon-char] svg {
-    overflow: visible;
+  .navi_loading_rectangle_wrapper[data-visible] {
+    opacity: 1;
   }
 `;
-const Icon = ({
-  href,
-  children,
-  charWidth = 1,
-  // 0 (zéro) is the real char width
-  // but 2 zéros gives too big icons
-  // while 1 "W" gives a nice result
-  baseChar = "W",
-  decorative,
-  onClick,
-  ...props
+const LoaderBackground = ({
+  loading,
+  containerRef,
+  targetSelector,
+  color,
+  inset = 0,
+  spacingTop = 0,
+  spacingLeft = 0,
+  spacingBottom = 0,
+  spacingRight = 0,
+  children
 }) => {
-  const innerChildren = href ? jsx("svg", {
-    width: "100%",
-    height: "100%",
-    children: jsx("use", {
-      href: href
-    })
-  }) : children;
-  let {
-    box,
-    width,
-    height
-  } = props;
-  if (width === "auto") width = undefined;
-  if (height === "auto") height = undefined;
-  const hasExplicitWidth = width !== undefined;
-  const hasExplicitHeight = height !== undefined;
-  if (!hasExplicitWidth && !hasExplicitHeight) {
-    if (decorative === undefined && !onClick) {
-      decorative = true;
+  if (containerRef) {
+    const container = containerRef.current;
+    if (!container) {
+      return children;
     }
-  } else {
-    box = true;
-  }
-  const ariaProps = decorative ? {
-    "aria-hidden": "true"
-  } : {};
-  if (typeof children === "string") {
-    return jsx(Text, {
-      ...props,
-      ...ariaProps,
-      "data-icon-text": "",
+    return createPortal(jsx(LoaderBackgroundWithPortal, {
+      container: container,
+      loading: loading,
+      color: color,
+      inset: inset,
+      spacingTop: spacingTop,
+      spacingLeft: spacingLeft,
+      spacingBottom: spacingBottom,
+      spacingRight: spacingRight,
       children: children
-    });
-  }
-  if (box) {
-    return jsx(Box, {
-      square: true,
-      ...props,
-      ...ariaProps,
-      box: box,
-      baseClassName: "navi_icon",
-      "data-has-width": hasExplicitWidth ? "" : undefined,
-      "data-has-height": hasExplicitHeight ? "" : undefined,
-      "data-interactive": onClick ? "" : undefined,
-      onClick: onClick,
-      children: innerChildren
-    });
+    }), container);
   }
-  const invisibleText = baseChar.repeat(charWidth);
-  return jsxs(Text, {
-    ...props,
-    ...ariaProps,
-    className: withPropsClassName("navi_icon", props.className),
-    spacing: "pre",
-    "data-icon-char": "",
-    "data-has-width": hasExplicitWidth ? "" : undefined,
-    "data-has-height": hasExplicitHeight ? "" : undefined,
-    "data-interactive": onClick ? "" : undefined,
-    onClick: onClick,
-    children: [jsx("span", {
-      className: "navi_icon_char_slot",
-      "aria-hidden": "true",
-      children: invisibleText
-    }), jsx(Text, {
-      className: "navi_icon_foreground",
-      spacing: "pre",
-      children: innerChildren
-    })]
+  return jsx(LoaderBackgroundBasic, {
+    targetSelector: targetSelector,
+    loading: loading,
+    color: color,
+    inset: inset,
+    spacingTop: spacingTop,
+    spacingLeft: spacingLeft,
+    spacingBottom: spacingBottom,
+    spacingRight: spacingRight,
+    children: children
   });
 };
-
-const LinkBlankTargetSvg = () => {
-  return jsx("svg", {
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: jsx("path", {
-      d: "M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11",
-      stroke: "currentColor",
-      fill: "none",
-      "stroke-width": "2",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
-    })
+const LoaderBackgroundWithPortal = ({
+  container,
+  loading,
+  color,
+  inset,
+  spacingTop,
+  spacingLeft,
+  spacingBottom,
+  spacingRight,
+  children
+}) => {
+  const shouldShowSpinner = useDebounceTrue(loading, 300);
+  if (!shouldShowSpinner) {
+    return children;
+  }
+  container.style.position = "relative";
+  let paddingTop = 0;
+  if (container.nodeName === "DETAILS") {
+    paddingTop = container.querySelector("summary").offsetHeight;
+  }
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      style: {
+        position: "absolute",
+        top: `${inset + paddingTop + spacingTop}px`,
+        bottom: `${inset + spacingBottom}px`,
+        left: `${inset + spacingLeft}px`,
+        right: `${inset + spacingRight}px`
+      },
+      children: shouldShowSpinner && jsx(RectangleLoading, {
+        color: color
+      })
+    }), children]
   });
 };
-const LinkAnchorSvg = () => {
-  return jsx("svg", {
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: jsxs("g", {
-      children: [jsx("path", {
-        d: "M13.2218 3.32234C15.3697 1.17445 18.8521 1.17445 21 3.32234C23.1479 5.47022 23.1479 8.95263 21 11.1005L17.4645 14.636C15.3166 16.7839 11.8342 16.7839 9.6863 14.636C9.48752 14.4373 9.30713 14.2271 9.14514 14.0075C8.90318 13.6796 8.97098 13.2301 9.25914 12.9419C9.73221 12.4688 10.5662 12.6561 11.0245 13.1435C11.0494 13.1699 11.0747 13.196 11.1005 13.2218C12.4673 14.5887 14.6834 14.5887 16.0503 13.2218L19.5858 9.6863C20.9526 8.31947 20.9526 6.10339 19.5858 4.73655C18.219 3.36972 16.0029 3.36972 14.636 4.73655L13.5754 5.79721C13.1849 6.18774 12.5517 6.18774 12.1612 5.79721C11.7706 5.40669 11.7706 4.77352 12.1612 4.383L13.2218 3.32234Z",
-        fill: "currentColor"
-      }), jsx("path", {
-        d: "M6.85787 9.6863C8.90184 7.64233 12.2261 7.60094 14.3494 9.42268C14.7319 9.75083 14.7008 10.3287 14.3444 10.685C13.9253 11.1041 13.2317 11.0404 12.7416 10.707C11.398 9.79292 9.48593 9.88667 8.27209 11.1005L4.73655 14.636C3.36972 16.0029 3.36972 18.219 4.73655 19.5858C6.10339 20.9526 8.31947 20.9526 9.6863 19.5858L10.747 18.5251C11.1375 18.1346 11.7706 18.1346 12.1612 18.5251C12.5517 18.9157 12.5517 19.5488 12.1612 19.9394L11.1005 21C8.95263 23.1479 5.47022 23.1479 3.32234 21C1.17445 18.8521 1.17445 15.3697 3.32234 13.2218L6.85787 9.6863Z",
-        fill: "currentColor"
-      })]
-    })
+const LoaderBackgroundBasic = ({
+  loading,
+  targetSelector,
+  color,
+  spacingTop,
+  spacingLeft,
+  spacingBottom,
+  spacingRight,
+  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;
+  spacingTop += marginTop;
+  spacingLeft += inset;
+  // spacingLeft += outlineOffset;
+  // spacingLeft -= borderLeftWidth;
+  spacingLeft += marginLeft;
+  spacingRight += inset;
+  // spacingRight += outlineOffset;
+  // spacingRight -= borderRightWidth;
+  spacingRight += marginRight;
+  spacingBottom += inset;
+  // spacingBottom += outlineOffset;
+  // spacingBottom -= borderBottomWidth;
+  spacingBottom += marginBottom;
+  if (targetSelector) {
+    // oversimplification that actually works
+    // (simplified because it assumes the targeted element is a direct child of the contained element which may have padding)
+    spacingTop += paddingTop;
+    spacingLeft += paddingLeft;
+    spacingRight += paddingRight;
+    spacingBottom += paddingBottom;
+  }
+  const maxBorderWidth = Math.max(borderTopWidth, borderLeftWidth, borderRightWidth, borderBottomWidth);
+  const halfMaxBorderSize = maxBorderWidth / 2;
+  const size = halfMaxBorderSize < 2 ? 2 : halfMaxBorderSize;
+  const lineHalfSize = size / 2;
+  spacingTop -= lineHalfSize;
+  spacingLeft -= lineHalfSize;
+  spacingRight -= lineHalfSize;
+  spacingBottom -= lineHalfSize;
+  return jsxs(Fragment, {
+    children: [jsx("span", {
+      ref: rectangleRef,
+      className: "navi_loading_rectangle_wrapper",
+      "data-visible": shouldShowSpinner ? "" : undefined,
+      style: {
+        "--rectangle-top": `${spacingTop}px`,
+        "--rectangle-left": `${spacingLeft}px`,
+        "--rectangle-bottom": `${spacingBottom}px`,
+        "--rectangle-right": `${spacingRight}px`
+      },
+      children: loading && jsx(RectangleLoading, {
+        shouldShowSpinner: shouldShowSpinner,
+        color: currentColor,
+        radius: borderRadius,
+        size: size
+      })
+    }), children]
   });
 };
 
@@ -20069,16 +20101,6 @@ const LinkPlain = props => {
     })]
   });
 };
-const PhoneSvg = () => {
-  return jsx("svg", {
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: jsx("path", {
-      d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z",
-      fill: "currentColor"
-    })
-  });
-};
 const SmsSvg = () => {
   return jsx("svg", {
     viewBox: "0 0 24 24",
@@ -20089,25 +20111,6 @@ const SmsSvg = () => {
     })
   });
 };
-const EmailSvg = () => {
-  return jsxs("svg", {
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [jsx("path", {
-      d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z",
-      fill: "none",
-      stroke: "currentColor",
-      "stroke-width": "2"
-    }), jsx("path", {
-      d: "m2 6 8 5 2 1.5 2-1.5 8-5",
-      fill: "none",
-      stroke: "currentColor",
-      "stroke-width": "2",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
-    })]
-  });
-};
 const GithubSvg = () => {
   return jsx("svg", {
     viewBox: "0 0 24 24",
@@ -22825,6 +22828,10 @@ const InputTextualBasic = props => {
   if (icon === undefined) {
     if (type === "search") {
       innerIcon = jsx(SearchSvg, {});
+    } else if (type === "email") {
+      innerIcon = jsx(EmailSvg, {});
+    } else if (type === "tel") {
+      innerIcon = jsx(PhoneSvg, {});
     }
   } else {
     innerIcon = icon;
@@ -27389,6 +27396,69 @@ const Address = ({
   });
 };
 
+const LoadingDots = ({
+  color = "FF156D"
+}) => {
+  return jsxs("svg", {
+    viewBox: "0 0 200 200",
+    width: "100%",
+    height: "100%",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [jsx("rect", {
+      fill: color,
+      stroke: color,
+      "stroke-width": "15",
+      width: "30",
+      height: "30",
+      x: "25",
+      y: "85",
+      children: jsx("animate", {
+        attributeName: "opacity",
+        calcMode: "spline",
+        dur: "2",
+        values: "1;0;1;",
+        keySplines: ".5 0 .5 1;.5 0 .5 1",
+        repeatCount: "indefinite",
+        begin: "-.4"
+      })
+    }), jsx("rect", {
+      fill: color,
+      stroke: color,
+      "stroke-width": "15",
+      width: "30",
+      height: "30",
+      x: "85",
+      y: "85",
+      children: jsx("animate", {
+        attributeName: "opacity",
+        calcMode: "spline",
+        dur: "2",
+        values: "1;0;1;",
+        keySplines: ".5 0 .5 1;.5 0 .5 1",
+        repeatCount: "indefinite",
+        begin: "-.2"
+      })
+    }), jsx("rect", {
+      fill: color,
+      stroke: color,
+      "stroke-width": "15",
+      width: "30",
+      height: "30",
+      x: "145",
+      y: "85",
+      children: jsx("animate", {
+        attributeName: "opacity",
+        calcMode: "spline",
+        dur: "2",
+        values: "1;0;1;",
+        keySplines: ".5 0 .5 1;.5 0 .5 1",
+        repeatCount: "indefinite",
+        begin: "0"
+      })
+    })]
+  });
+};
+
 const CSS_VAR_NAME = "--x-color-contrasting";
 
 const useContrastingColor = (ref, backgroundElementSelector) => {
@@ -27556,10 +27626,11 @@ const BadgeCountCircle = ({
   ref,
   charCount,
   hasOverflow,
+  loading,
   children,
   ...props
 }) => {
-  return jsxs(Text, {
+  return jsx(Text, {
     ref: ref,
     className: "navi_badge_count",
     "data-circle": "",
@@ -27571,18 +27642,20 @@ const BadgeCountCircle = ({
     ...props,
     styleCSSVars: BadgeStyleCSSVars,
     spacing: "pre",
-    children: [jsx("span", {
-      style: "user-select: none",
-      children: "\u200B"
-    }), jsx("span", {
-      className: "navi_badge_count_frame"
-    }), jsx("span", {
-      className: "navi_badge_count_text",
-      children: children
-    }), jsx("span", {
-      style: "user-select: none",
-      children: "\u200B"
-    })]
+    children: loading ? jsx(LoadingDots, {}) : jsxs(Fragment, {
+      children: [jsx("span", {
+        style: "user-select: none",
+        children: "\u200B"
+      }), jsx("span", {
+        className: "navi_badge_count_frame"
+      }), jsx("span", {
+        className: "navi_badge_count_text",
+        children: children
+      }), jsx("span", {
+        style: "user-select: none",
+        children: "\u200B"
+      })]
+    })
   });
 };
 const BadgeCountEllipse = ({