@jsenv/navi 0.16.57 → 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];
@@ -6306,7 +6307,7 @@ const Box = props => {
     // then we'll track ":hover" state changes even for basic elements like <div>
     const pseudoClassesFromStyleSet = new Set();
     boxPseudoNamedStyles = {};
-    const assignStyle = (value, name, styleContext, boxStylesTarget, styleOrigin) => {
+    const visitProp = (value, name, styleContext, boxStylesTarget, styleOrigin) => {
       const isPseudoElement = name.startsWith("::");
       const isPseudoClass = name.startsWith(":");
       if (isPseudoElement || isPseudoClass) {
@@ -6324,14 +6325,14 @@ const Box = props => {
         if (isPseudoElement) {
           const pseudoElementStyles = {};
           for (const key of pseudoStyleKeys) {
-            assignStyle(value[key], key, pseudoStyleContext, pseudoElementStyles, "pseudo_style");
+            visitProp(value[key], key, pseudoStyleContext, pseudoElementStyles, "pseudo_style");
           }
           boxPseudoNamedStyles[name] = pseudoElementStyles;
           return;
         }
         const pseudoClassStyles = {};
         for (const key of pseudoStyleKeys) {
-          assignStyle(value[key], key, pseudoStyleContext, pseudoClassStyles, "pseudo_style");
+          visitProp(value[key], key, pseudoStyleContext, pseudoClassStyles, "pseudo_style");
           boxPseudoNamedStyles[name] = pseudoClassStyles;
         }
         return;
@@ -6395,23 +6396,28 @@ const Box = props => {
     if (baseStyle) {
       for (const key of baseStyle) {
         const value = baseStyle[key];
-        assignStyle(value, key, styleContext, boxStyles, "baseStyle");
+        visitProp(value, key, styleContext, boxStyles, "baseStyle");
       }
     }
     for (const propName of remainingPropKeySet) {
       const propValue = rest[propName];
-      assignStyle(propValue, propName, styleContext, boxStyles, "prop");
+      const isDataAttribute = propName.startsWith("data-");
+      if (isDataAttribute) {
+        selfForwardedProps[propName] = propValue;
+        continue;
+      }
+      visitProp(propValue, propName, styleContext, boxStyles, "prop");
     }
     if (typeof style === "string") {
       const styleObject = normalizeStyles(style, "css");
       for (const styleName of Object.keys(styleObject)) {
         const styleValue = styleObject[styleName];
-        assignStyle(styleValue, styleName, styleContext, boxStyles, "style");
+        visitProp(styleValue, styleName, styleContext, boxStyles, "style");
       }
     } else if (style && typeof style === "object") {
       for (const styleName of Object.keys(style)) {
         const styleValue = style[styleName];
-        assignStyle(styleValue, styleName, styleContext, boxStyles, "style");
+        visitProp(styleValue, styleName, styleContext, boxStyles, "style");
       }
     }
     const updateStyle = useCallback(state => {
@@ -12097,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;
@@ -16761,24 +16217,58 @@ const installCustomConstraintValidation = (
       if (keydownEvent.key !== "Enter") {
         return;
       }
-      if (element.hasAttribute("data-action")) {
-        if (wouldKeydownSubmitForm(keydownEvent)) {
-          keydownEvent.preventDefault();
-        }
-        dispatchActionRequestedCustomEvent(element, {
-          event: keydownEvent,
-          requester: element,
-        });
+      const elementWithAction = closestElementWithAction(element);
+      if (!elementWithAction) {
         return;
       }
-      const { form } = element;
-      if (!form) {
-        return;
+
+      const determineClosestFormSubmitTargetForEnterKeyEvent = () => {
+        if (keydownEvent.defaultPrevented) {
+          return null;
+        }
+        const keydownTarget = keydownEvent.target;
+        const { form } = keydownTarget;
+        if (!form) {
+          return null;
+        }
+        if (keydownTarget.tagName === "BUTTON") {
+          if (
+            keydownTarget.type !== "submit" &&
+            keydownTarget.type !== "image"
+          ) {
+            return null;
+          }
+          return keydownTarget;
+        }
+        if (keydownTarget.tagName === "INPUT") {
+          if (
+            ![
+              "text",
+              "email",
+              "password",
+              "search",
+              "number",
+              "url",
+              "tel",
+            ].includes(keydownTarget.type)
+          ) {
+            return null;
+          }
+          // when present, we use first button submitting the form as the requester
+          // not the input, it aligns with browser behavior where
+          // hitting Enter in a text input triggers the first submit button of the form, not the input itself
+          return getFirstButtonSubmittingForm(keydownTarget) || keydownTarget;
+        }
+        return null;
+      };
+      const formSubmitTarget =
+        determineClosestFormSubmitTargetForEnterKeyEvent();
+      if (formSubmitTarget) {
+        keydownEvent.preventDefault();
       }
-      keydownEvent.preventDefault();
-      dispatchActionRequestedCustomEvent(form, {
+      dispatchActionRequestedCustomEvent(elementWithAction, {
         event: keydownEvent,
-        requester: getFirstButtonSubmittingForm(form) || element,
+        requester: formSubmitTarget || element,
       });
     };
     element.addEventListener("keydown", onkeydown);
@@ -16795,29 +16285,44 @@ const installCustomConstraintValidation = (
       if (element.tagName !== "BUTTON") {
         return;
       }
-      if (element.hasAttribute("data-action")) {
-        if (wouldButtonClickSubmitForm(element, clickEvent)) {
-          clickEvent.preventDefault();
-        }
-        dispatchActionRequestedCustomEvent(element, {
-          event: clickEvent,
-          requester: element,
-        });
-        return;
-      }
-      const { form } = element;
-      if (!form) {
-        return;
-      }
-      if (element.type === "reset") {
+      const button = element;
+      const elementWithAction = closestElementWithAction(button);
+      if (!elementWithAction) {
         return;
       }
-      if (wouldButtonClickSubmitForm(element, clickEvent)) {
+      const determineClosestFormSubmitTargetForClickEvent = () => {
+        if (clickEvent.defaultPrevented) {
+          return null;
+        }
+        const clickTarget = clickEvent.target;
+        const { form } = clickTarget;
+        if (!form) {
+          return null;
+        }
+        const wouldSubmitFormByType =
+          button.type === "submit" || button.type === "image";
+        if (wouldSubmitFormByType) {
+          return button;
+        }
+        if (button.type) {
+          // "reset", "button" or any other non submit type, it won't submit the form
+          return null;
+        }
+        const firstButtonSubmittingForm = getFirstButtonSubmittingForm(form);
+        if (button !== firstButtonSubmittingForm) {
+          // an other button is explicitly submitting the form, this one would not submit it
+          return null;
+        }
+        // this is the only button inside the form without type attribute, so it defaults to type="submit"
+        return button;
+      };
+      const formSubmitTarget = determineClosestFormSubmitTargetForClickEvent();
+      if (formSubmitTarget) {
         clickEvent.preventDefault();
       }
-      dispatchActionRequestedCustomEvent(form, {
+      dispatchActionRequestedCustomEvent(elementWithAction, {
         event: clickEvent,
-        requester: element,
+        requester: formSubmitTarget || button,
       });
     };
     element.addEventListener("click", onclick);
@@ -16833,13 +16338,14 @@ const installCustomConstraintValidation = (
       break request_on_input_change;
     }
     const stop = listenInputChange(element, (e) => {
-      if (element.hasAttribute("data-action")) {
-        dispatchActionRequestedCustomEvent(element, {
-          event: e,
-          requester: element,
-        });
+      const elementWithAction = closestElementWithAction(element);
+      if (!elementWithAction) {
         return;
       }
+      dispatchActionRequestedCustomEvent(elementWithAction, {
+        event: e,
+        requester: element,
+      });
     });
     addTeardown(() => {
       stop();
@@ -16937,6 +16443,31 @@ const installCustomConstraintValidation = (
   return validationInterface;
 };
 
+// When interacting with an element we want to find the closest element
+// eventually handling the action
+// 1. <button> itself has an action
+// 2. <button> is inside a <form> with an action
+// 3. <button> is inside a wrapper <div> with an action (data-action is not necessarly on the interactive element itself, it can be on a wrapper, we want to support that)
+// 4. <button> is inside a <fieldset> or any element that catches the action like a <form> would
+// In examples above <button> can also be <input> etc..
+const closestElementWithAction = (el) => {
+  if (el.hasAttribute("data-action")) {
+    return el;
+  }
+  const closestDataActionElement = el.closest("[data-action]");
+  if (!closestDataActionElement) {
+    return null;
+  }
+  const visualSelector = closestDataActionElement.getAttribute(
+    "data-visual-selector",
+  );
+  if (!visualSelector) {
+    return closestDataActionElement;
+  }
+  const visualElement = closestDataActionElement.querySelector(visualSelector);
+  return visualElement;
+};
+
 const pickConstraint = (a, b) => {
   const aPrio = getConstraintPriority(a);
   const bPrio = getConstraintPriority(b);
@@ -16955,60 +16486,14 @@ const getConstraintPriority = (constraint) => {
   return 1;
 };
 
-const wouldButtonClickSubmitForm = (button, clickEvent) => {
-  if (clickEvent.defaultPrevented) {
-    return false;
-  }
-  const { form } = button;
-  if (!form) {
-    return false;
-  }
-  if (!button) {
-    return false;
-  }
-  const wouldSubmitFormByType =
-    button.type === "submit" || button.type === "image";
-  if (wouldSubmitFormByType) {
-    return true;
-  }
-  if (button.type) {
-    return false;
-  }
-  if (getFirstButtonSubmittingForm(form)) {
-    // an other button is explicitly submitting the form, this one would not submit it
-    return false;
-  }
-  // this is the only button inside the form without type attribute, so it defaults to type="submit"
-  return true;
-};
 const getFirstButtonSubmittingForm = (form) => {
   return form.querySelector(
     `button[type="submit"], input[type="submit"], input[type="image"]`,
   );
 };
 
-const wouldKeydownSubmitForm = (keydownEvent) => {
-  if (keydownEvent.defaultPrevented) {
-    return false;
-  }
-  const keydownTarget = keydownEvent.target;
-  const { form } = keydownTarget;
-  if (!form) {
-    return false;
-  }
-  if (keydownEvent.key !== "Enter") {
-    return false;
-  }
-  const isTextInput =
-    keydownTarget.tagName === "INPUT" || keydownTarget.tagName === "TEXTAREA";
-  if (!isTextInput) {
-    return false;
-  }
-  return true;
-};
-
 const dispatchActionRequestedCustomEvent = (
-  fieldOrForm,
+  elementWithAction,
   { actionOrigin = "action_prop", event, requester },
 ) => {
   const actionRequestedCustomEvent = new CustomEvent("actionrequested", {
@@ -17019,7 +16504,7 @@ const dispatchActionRequestedCustomEvent = (
       requester,
     },
   });
-  fieldOrForm.dispatchEvent(actionRequestedCustomEvent);
+  elementWithAction.dispatchEvent(actionRequestedCustomEvent);
 };
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation
 const requestSubmit = HTMLFormElement.prototype.requestSubmit;
@@ -17321,553 +16806,1133 @@ const selectByCharacterIndices = (element, range, startIndex, endIndex) => {
       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;
+
+    // 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;
     }
-    currentIndex += nodeLength;
+    const currentChild = childArray[i - 1];
+    const nextChild = childArray[i];
+    if (endsWithWhitespace(currentChild)) {
+      continue;
+    }
+    if (startsWithWhitespace(nextChild)) {
+      continue;
+    }
+    childrenWithGap.push(separator);
   }
-  if (startNode && endNode) {
-    range.setStart(startNode, startOffset);
-    range.setEnd(endNode, endOffset);
+  return childrenWithGap;
+};
+const endsWithWhitespace = jsxChild => {
+  if (typeof jsxChild === "string") {
+    return /\s$/.test(jsxChild);
   }
+  return false;
 };
-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 startsWithWhitespace = jsxChild => {
+  if (typeof jsxChild === "string") {
+    return /^\s/.test(jsxChild);
   }
+  return false;
 };
-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;
-    }
+const OverflowPinnedElementContext = createContext(null);
+const Text = props => {
+  const {
+    overflowEllipsis,
+    ...rest
+  } = props;
+  if (overflowEllipsis) {
+    return jsx(TextOverflow, {
+      ...rest
+    });
   }
-  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);
+  if (props.overflowPinned) {
+    return jsx(TextOverflowPinned, {
+      ...props
+    });
+  }
+  if (props.selectRange) {
+    return jsx(TextWithSelectRange, {
+      ...props
+    });
   }
+  return jsx(TextBasic, {
+    ...props
+  });
 };
-
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  *[data-navi-space] {
-    /* user-select: none; */
+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;
   }
-
-  .navi_text {
-    position: relative;
-    color: inherit;
-
-    &[data-has-absolute-child] {
-      display: inline-block;
-    }
+  if (overflowPinned) {
+    setOverflowPinnedElement(text);
+    return null;
   }
-
-  .navi_text_overflow {
-    flex-wrap: wrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  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";
 
-  .navi_text_overflow_wrapper {
-    display: flex;
-    width: 0;
-    flex-grow: 1;
-    gap: 0.3em;
+    // 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
+  });
+};
 
-  .navi_text_overflow_text {
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  .navi_icon {
+    display: inline-block;
+    box-sizing: border-box;
     max-width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
+    max-height: 100%;
 
-  .navi_custom_space {
+    &[data-flow-inline] {
+      width: 1em;
+      height: 1em;
+    }
+    &[data-icon-char] {
+      flex-grow: 0 !important;
+      line-height: normal;
+    }
   }
 
-  .navi_text_bold_wrapper {
-    position: relative;
-    display: inline-block;
+  .navi_icon[data-interactive] {
+    cursor: pointer;
   }
-  .navi_text_bold_clone {
-    font-weight: bold;
+
+  .navi_icon_char_slot {
     opacity: 0;
+    cursor: default;
+    user-select: none;
   }
-  .navi_text_bold_foreground {
+  .navi_icon_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_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_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;
+  .navi_icon > svg,
+  .navi_icon > img {
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
   }
-  const childArray = toChildArray(children);
-  const childCount = childArray.length;
-  if (childCount <= 1) {
-    return children;
+  .navi_icon[data-has-width] > svg,
+  .navi_icon[data-has-width] > img {
+    width: 100%;
+    height: auto;
   }
-  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;
+  .navi_icon[data-has-height] > svg,
+  .navi_icon[data-has-height] > img {
+    width: auto;
+    height: 100%;
   }
-  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 (startsWithWhitespace(nextChild)) {
-      continue;
-    }
-    childrenWithGap.push(separator);
+  .navi_icon[data-has-width][data-has-height] > svg,
+  .navi_icon[data-has-width][data-has-height] > img {
+    width: 100%;
+    height: 100%;
   }
-  return childrenWithGap;
-};
-const endsWithWhitespace = jsxChild => {
-  if (typeof jsxChild === "string") {
-    return /\s$/.test(jsxChild);
+
+  .navi_icon[data-icon-char] svg,
+  .navi_icon[data-icon-char] img {
+    width: 100%;
+    height: 100%;
   }
-  return false;
-};
-const startsWithWhitespace = jsxChild => {
-  if (typeof jsxChild === "string") {
-    return /^\s/.test(jsxChild);
+  .navi_icon[data-icon-char] svg {
+    overflow: visible;
   }
-  return false;
-};
-const OverflowPinnedElementContext = createContext(null);
-const Text = props => {
-  const {
-    overflowEllipsis,
-    ...rest
+`;
+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 (overflowEllipsis) {
-    return jsx(TextOverflow, {
-      ...rest
-    });
+  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;
   }
-  if (props.overflowPinned) {
-    return jsx(TextOverflowPinned, {
-      ...props
+  const ariaProps = decorative ? {
+    "aria-hidden": "true"
+  } : {};
+  if (typeof children === "string") {
+    return jsx(Text, {
+      ...props,
+      ...ariaProps,
+      "data-icon-text": "",
+      children: children
     });
   }
-  if (props.selectRange) {
-    return jsx(TextWithSelectRange, {
-      ...props
+  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
     });
   }
-  return jsx(TextBasic, {
-    ...props
+  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 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 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 TextOverflowPinned = ({
-  overflowPinned,
-  ...props
-}) => {
-  const setOverflowPinnedElement = useContext(OverflowPinnedElementContext);
-  const text = jsx(Text, {
-    ...props
+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"
+      })]
+    })
   });
-  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 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 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);
+
+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;
+};
+
+const useNetworkSpeed = () => {
+  return networkSpeedSignal.value;
+};
+
+const connection =
+  window.navigator.connection ||
+  window.navigator.mozConnection ||
+  window.navigator.webkitConnection;
+
+const getNetworkSpeed = () => {
+  // ✅ Network Information API (support moderne)
+  if (!connection) {
+    return "3g";
   }
-  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 (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
+    }
   }
-  if (preventBoldLayoutShift) {
-    const alignX = rest.alignX || rest.align || "start";
+  return "3g";
+};
 
-    // 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
-        })]
-      })
+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);
     });
   }
-  return jsx(Box, {
-    ...boxProps,
-    children: children
+
+  // ✅ 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);
   });
-};
 
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_icon {
-    display: inline-block;
-    box-sizing: border-box;
-    max-width: 100%;
-    max-height: 100%;
+  // ✅ 4. Vérifier lors de la reprise de connexion
+  const handleOnline = () => {
+    updateNetworkSpeed();
+  };
 
-    &[data-flow-inline] {
-      width: 1em;
-      height: 1em;
-    }
-    &[data-icon-char] {
-      flex-grow: 0 !important;
-      line-height: normal;
-    }
-  }
+  window.addEventListener("online", handleOnline);
+  cleanupFunctions.push(() => {
+    window.removeEventListener("online", handleOnline);
+  });
 
-  .navi_icon[data-interactive] {
-    cursor: pointer;
-  }
+  // Cleanup global
+  return () => {
+    cleanupFunctions.forEach((cleanup) => cleanup());
+  };
+};
+setupNetworkMonitoring();
 
-  .navi_icon_char_slot {
-    opacity: 0;
-    cursor: default;
-    user-select: none;
-  }
-  .navi_icon_foreground {
-    position: absolute;
-    inset: 0;
-  }
-  .navi_icon_foreground > .navi_text {
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  .navi_rectangle_loading {
+    position: relative;
     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;
+    opacity: 0;
   }
-  .navi_icon[data-has-height] > svg,
-  .navi_icon[data-has-height] > img {
-    width: auto;
-    height: 100%;
+
+  .navi_rectangle_loading[data-visible] {
+    opacity: 1;
   }
-  .navi_icon[data-has-width][data-has-height] > svg,
-  .navi_icon[data-has-width][data-has-height] > img {
-    width: 100%;
-    height: 100%;
+`;
+const RectangleLoading = ({
+  shouldShowSpinner,
+  color = "currentColor",
+  radius = 0,
+  size = 2
+}) => {
+  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 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}
+    `;
   }
 
-  .navi_icon[data-icon-char] svg,
-  .navi_icon[data-icon-char] img {
-    width: 100%;
-    height: 100%;
+  // 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_icon[data-icon-char] svg {
-    overflow: visible;
+  .navi_loading_rectangle_wrapper[data-visible] {
+    opacity: 1;
   }
 `;
-const Icon = ({
-  href,
-  children,
-  className,
-  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) {
-      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
-    });
+    }), container);
   }
-  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
-    });
+  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 invisibleText = baseChar.repeat(charWidth);
-  return jsxs(Text, {
-    ...props,
-    ...ariaProps,
-    className: withPropsClassName("navi_icon", className),
-    spacing: "pre",
-    "data-icon-char": "",
-    "data-has-width": hasExplicitWidth ? "" : undefined,
-    "data-has-height": hasExplicitHeight ? "" : undefined,
-    "data-interactive": onClick ? "" : undefined,
-    onClick: onClick,
+  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", {
-      className: "navi_icon_char_slot",
-      "aria-hidden": "true",
-      children: invisibleText
-    }), jsx(Text, {
-      className: "navi_icon_foreground",
-      spacing: "pre",
-      children: innerChildren
-    })]
-  });
-};
-
-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"
-      })]
-    })
+      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]
   });
 };
 
@@ -20036,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",
@@ -20056,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",
@@ -22451,6 +22487,15 @@ const InputRangeWithAction = props => {
   });
 };
 
+const SearchSvg = () => jsx("svg", {
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: jsx("path", {
+    d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z",
+    fill: "currentColor"
+  })
+});
+
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   @layer navi {
     .navi_input {
@@ -22514,29 +22559,73 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     --x-background-color: var(--background-color);
     --x-color: var(--color);
     --x-placeholder-color: var(--placeholder-color);
-  }
 
-  .navi_input .navi_native_input {
-    box-sizing: border-box;
-    padding-top: var(--padding-top, var(--padding-y, var(--padding, 1px)));
-    padding-right: var(--padding-right, var(--padding-x, var(--padding, 2px)));
-    padding-bottom: var(
-      --padding-bottom,
-      var(--padding-y, var(--padding, 1px))
-    );
-    padding-left: var(--padding-left, var(--padding-x, var(--padding, 2px)));
-    color: var(--x-color);
-    background-color: var(--x-background-color);
-    border-width: var(--x-outer-width);
-    border-width: var(--x-outer-width);
-    border-style: solid;
-    border-color: transparent;
-    border-radius: var(--x-border-radius);
-    outline-width: var(--x-border-width);
-    outline-style: solid;
-    outline-color: var(--x-border-color);
-    outline-offset: calc(-1 * (var(--x-border-width)));
+    .navi_native_input {
+      box-sizing: border-box;
+      padding-top: var(--padding-top, var(--padding-y, var(--padding, 1px)));
+      padding-right: var(
+        --padding-right,
+        var(--padding-x, var(--padding, 2px))
+      );
+      padding-bottom: var(
+        --padding-bottom,
+        var(--padding-y, var(--padding, 1px))
+      );
+      padding-left: var(--padding-left, var(--padding-x, var(--padding, 2px)));
+      color: var(--x-color);
+      background-color: var(--x-background-color);
+      border-width: var(--x-outer-width);
+      border-width: var(--x-outer-width);
+      border-style: solid;
+      border-color: transparent;
+      border-radius: var(--x-border-radius);
+      outline-width: var(--x-border-width);
+      outline-style: solid;
+      outline-color: var(--x-border-color);
+      outline-offset: calc(-1 * (var(--x-border-width)));
+
+      &[type="search"] {
+        -webkit-appearance: textfield;
+
+        &::-webkit-search-cancel-button {
+          display: none;
+        }
+      }
+    }
+
+    .navi_start_icon_label {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0.25em;
+    }
+    .navi_end_icon_label {
+      position: absolute;
+      top: 0;
+      right: 0.25em;
+      bottom: 0;
+      opacity: 0;
+      pointer-events: none;
+    }
+    &[data-has-value] {
+      .navi_end_icon_label {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+
+    &[data-start-icon] {
+      .navi_native_input {
+        padding-left: 20px;
+      }
+    }
+    &[data-end-icon] {
+      .navi_native_input {
+        padding-right: 20px;
+      }
+    }
   }
+
   .navi_input .navi_native_input::placeholder {
     color: var(--x-placeholder-color);
   }
@@ -22615,7 +22704,52 @@ const InputStyleCSSVars = {
     color: "--color-disabled"
   }
 };
-const InputPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading"];
+const InputPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading", ":navi-has-value"];
+Object.assign(PSEUDO_CLASSES, {
+  ":navi-has-value": {
+    attribute: "data-has-value",
+    setup: (el, callback) => {
+      const onValueChange = () => {
+        callback();
+      };
+
+      // Standard user input (typing)
+      el.addEventListener("input", onValueChange);
+      // Autocomplete, programmatic changes, form restoration
+      el.addEventListener("change", onValueChange);
+      // Form reset - need to check the form
+      const form = el.form;
+      const onFormReset = () => {
+        // Form reset happens asynchronously, check value after reset completes
+        setTimeout(onValueChange, 0);
+      };
+      if (form) {
+        form.addEventListener("reset", onFormReset);
+      }
+
+      // Paste events (some browsers need special handling)
+      el.addEventListener("paste", onValueChange);
+      // Focus events to catch programmatic changes that don't fire other events
+      // (like when value is set before user interaction)
+      el.addEventListener("focus", onValueChange);
+      return () => {
+        el.removeEventListener("input", onValueChange);
+        el.removeEventListener("change", onValueChange);
+        el.removeEventListener("paste", onValueChange);
+        el.removeEventListener("focus", onValueChange);
+        if (form) {
+          form.removeEventListener("reset", onFormReset);
+        }
+      };
+    },
+    test: el => {
+      if (el.value === "") {
+        return false;
+      }
+      return true;
+    }
+  }
+});
 const InputPseudoElements = ["::-navi-loader"];
 const InputTextualBasic = props => {
   const contextReadOnly = useContext(ReadOnlyContext);
@@ -22634,6 +22768,8 @@ const InputTextualBasic = props => {
     autoFocus,
     autoFocusVisible,
     autoSelect,
+    icon,
+    cancelButton = type === "search",
     ...rest
   } = props;
   const defaultRef = useRef();
@@ -22650,10 +22786,13 @@ const InputTextualBasic = props => {
   });
   const remainingProps = useConstraints(ref, rest);
   const innerOnInput = useStableCallback(onInput);
+  const autoId = useId();
+  const innerId = rest.id || autoId;
   const renderInput = inputProps => {
     return jsx(Box, {
       ...inputProps,
       as: "input",
+      id: innerId,
       ref: ref,
       type: type,
       "data-value": uiState,
@@ -22684,7 +22823,19 @@ const InputTextualBasic = props => {
       baseClassName: "navi_native_input"
     });
   };
-  const renderInputMemoized = useCallback(renderInput, [type, uiState, innerValue, innerOnInput]);
+  const renderInputMemoized = useCallback(renderInput, [type, uiState, innerValue, innerOnInput, innerId]);
+  let innerIcon;
+  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;
+  }
   return jsxs(Box, {
     as: "span",
     box: true,
@@ -22700,13 +22851,37 @@ const InputTextualBasic = props => {
     pseudoClasses: InputPseudoClasses,
     pseudoElements: InputPseudoElements,
     hasChildFunction: true,
+    "data-start-icon": innerIcon ? "" : undefined,
+    "data-end-icon": cancelButton ? "" : undefined,
     ...remainingProps,
     ref: undefined,
     children: [jsx(LoaderBackground, {
       loading: innerLoading,
       color: "var(--loader-color)",
       inset: -1
-    }), renderInputMemoized]
+    }), innerIcon && jsx(Icon, {
+      as: "label",
+      htmlFor: innerId,
+      className: "navi_start_icon_label",
+      alignY: "center",
+      color: "rgba(28, 43, 52, 0.5)",
+      children: innerIcon
+    }), renderInputMemoized, cancelButton && jsx(Icon, {
+      as: "label",
+      htmlFor: innerId,
+      className: "navi_end_icon_label",
+      alignY: "center",
+      color: "rgba(28, 43, 52, 0.5)",
+      onMousedown: e => {
+        e.preventDefault(); // keep focus on the button
+      },
+      onClick: () => {
+        uiStateController.setUIState("", {
+          trigger: "cancel_button"
+        });
+      },
+      children: jsx(CloseSvg, {})
+    })]
   });
 };
 const InputTextualWithAction = props => {
@@ -27221,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) => {
@@ -27388,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": "",
@@ -27403,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 = ({
@@ -28496,15 +28737,6 @@ const HomeSvg = () => jsx("svg", {
   })
 });
 
-const SearchSvg = () => jsx("svg", {
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg",
-  children: jsx("path", {
-    d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z",
-    fill: "currentColor"
-  })
-});
-
 const SettingsSvg = () => jsx("svg", {
   viewBox: "0 0 24 24",
   xmlns: "http://www.w3.org/2000/svg",