@jsenv/navi 0.21.9 → 0.22.1

package/dist/jsenv_navi.js

@@ -3,7 +3,7 @@ import { isValidElement, h, createContext, toChildArray, render, createRef, clon
 import { useErrorBoundary, useLayoutEffect, useEffect, useMemo, useRef, useState, useCallback, useContext, useImperativeHandle, useId } from "preact/hooks";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
 import { signal, effect, computed, batch, useSignal } from "@preact/signals";
-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, contrastColor, initFocusGroup, elementIsFocusable, resolveColorLuminance, dragAfterThreshold, getScrollContainer, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } 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, resolveCSSSize, activeElementSignal, canInterceptKeys, hasCSSSizeUnit, contrastColor, initFocusGroup, elementIsFocusable, resolveColorLuminance, dragAfterThreshold, getScrollContainer, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
 export { contrastColor } from "@jsenv/dom";
 import { prefixFirstAndIndentRemainingLines } from "@jsenv/humanize";
 import { createValidity } from "@jsenv/validity";
@@ -18734,2036 +18734,2178 @@ const useConstraints = (elementRef, props, { targetSelector } = {}) => {
   return remainingProps;
 };
 
-const useInitialTextSelection = (ref, textSelection) => {
-  const deps = [];
-  if (Array.isArray(textSelection)) {
-    deps.push(...textSelection);
-  } else {
-    deps.push(textSelection);
-  }
+const EmailSvg = () => {
+  return jsxs("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [jsx("path", {
+      d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2"
+    }), jsx("path", {
+      d: "m2 6 8 5 2 1.5 2-1.5 8-5",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    })]
+  });
+};
+
+const LinkBlankTargetSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsx("path", {
+      d: "M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11",
+      stroke: "currentColor",
+      fill: "none",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    })
+  });
+};
+const LinkAnchorSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsxs("g", {
+      children: [jsx("path", {
+        d: "M13.2218 3.32234C15.3697 1.17445 18.8521 1.17445 21 3.32234C23.1479 5.47022 23.1479 8.95263 21 11.1005L17.4645 14.636C15.3166 16.7839 11.8342 16.7839 9.6863 14.636C9.48752 14.4373 9.30713 14.2271 9.14514 14.0075C8.90318 13.6796 8.97098 13.2301 9.25914 12.9419C9.73221 12.4688 10.5662 12.6561 11.0245 13.1435C11.0494 13.1699 11.0747 13.196 11.1005 13.2218C12.4673 14.5887 14.6834 14.5887 16.0503 13.2218L19.5858 9.6863C20.9526 8.31947 20.9526 6.10339 19.5858 4.73655C18.219 3.36972 16.0029 3.36972 14.636 4.73655L13.5754 5.79721C13.1849 6.18774 12.5517 6.18774 12.1612 5.79721C11.7706 5.40669 11.7706 4.77352 12.1612 4.383L13.2218 3.32234Z",
+        fill: "currentColor"
+      }), jsx("path", {
+        d: "M6.85787 9.6863C8.90184 7.64233 12.2261 7.60094 14.3494 9.42268C14.7319 9.75083 14.7008 10.3287 14.3444 10.685C13.9253 11.1041 13.2317 11.0404 12.7416 10.707C11.398 9.79292 9.48593 9.88667 8.27209 11.1005L4.73655 14.636C3.36972 16.0029 3.36972 18.219 4.73655 19.5858C6.10339 20.9526 8.31947 20.9526 9.6863 19.5858L10.747 18.5251C11.1375 18.1346 11.7706 18.1346 12.1612 18.5251C12.5517 18.9157 12.5517 19.5488 12.1612 19.9394L11.1005 21C8.95263 23.1479 5.47022 23.1479 3.32234 21C1.17445 18.8521 1.17445 15.3697 3.32234 13.2218L6.85787 9.6863Z",
+        fill: "currentColor"
+      })]
+    })
+  });
+};
+const LinkSmsSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsx("path", {
+      d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z",
+      fill: "currentColor"
+    })
+  });
+};
+const LinkGithubSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsx("path", {
+      d: "M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z",
+      fill: "currentColor"
+    })
+  });
+};
+const LinkCurrentSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsx("path", {
+      d: "m 8 0 c -3.3125 0 -6 2.6875 -6 6 c 0.007812 0.710938 0.136719 1.414062 0.386719 2.078125 l -0.015625 -0.003906 c 0.636718 1.988281 3.78125 5.082031 5.625 6.929687 h 0.003906 v -0.003906 c 1.507812 -1.507812 3.878906 -3.925781 5.046875 -5.753906 c 0.261719 -0.414063 0.46875 -0.808594 0.585937 -1.171875 l -0.019531 0.003906 c 0.25 -0.664063 0.382813 -1.367187 0.386719 -2.078125 c 0 -3.3125 -2.683594 -6 -6 -6 z m 0 3.691406 c 1.273438 0 2.308594 1.035156 2.308594 2.308594 s -1.035156 2.308594 -2.308594 2.308594 c -1.273438 -0.003906 -2.304688 -1.035156 -2.304688 -2.308594 c -0.003906 -1.273438 1.03125 -2.304688 2.304688 -2.308594 z m 0 0",
+      fill: "currentColor"
+    })
+  });
+};
+
+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 useDebounceTrue = (value, delay = 300) => {
+  const [debouncedTrue, setDebouncedTrue] = useState(false);
+  const timerRef = useRef(null);
+
   useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el || !textSelection) {
-      return;
-    }
-    const range = document.createRange();
-    const selection = window.getSelection();
-    if (Array.isArray(textSelection)) {
-      if (textSelection.length === 2) {
-        const [start, end] = textSelection;
-        if (typeof start === "number" && typeof end === "number") {
-          // Format: [0, 10] - character indices
-          selectByCharacterIndices(el, range, start, end);
-        } else if (typeof start === "string" && typeof end === "string") {
-          // Format: ["Click on the", "button to return"] - text strings
-          selectByTextStrings(el, range, start, end);
-        }
+    // 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;
       }
-    } else if (typeof textSelection === "string") {
-      // Format: "some text" - select the entire string occurrence
-      selectSingleTextString(el, range, textSelection);
+      setDebouncedTrue(false);
     }
-    selection.removeAllRanges();
-    selection.addRange(range);
-  }, deps);
-};
-const selectByCharacterIndices = (element, range, startIndex, endIndex) => {
-  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
-  let currentIndex = 0;
-  let startNode = null;
-  let startOffset = 0;
-  let endNode = null;
-  let endOffset = 0;
-  while (walker.nextNode()) {
-    const textContent = walker.currentNode.textContent;
-    const nodeLength = textContent.length;
 
-    // Check if start position is in this text node
-    if (!startNode && currentIndex + nodeLength > startIndex) {
-      startNode = walker.currentNode;
-      startOffset = startIndex - currentIndex;
-    }
+    // Cleanup function
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [value, delay]);
 
-    // 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);
-  }
+  return debouncedTrue;
 };
-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 useNetworkSpeed = () => {
+  return networkSpeedSignal.value;
 };
-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;
+
+const connection =
+  window.navigator.connection ||
+  window.navigator.mozConnection ||
+  window.navigator.webkitConnection;
+
+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"
     }
-    if (foundStart && textContent.includes(endText)) {
-      endNode = walker.currentNode;
-      break;
+    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 (startNode && endNode) {
-    const startOffset = startNode.textContent.indexOf(startText);
-    const endOffset = endNode.textContent.indexOf(endText) + endText.length;
-    range.setStart(startNode, startOffset);
-    range.setEnd(endNode, endOffset);
-  }
+  return "3g";
 };
 
-installImportMetaCssBuild(import.meta);/* eslint-disable jsenv/no-unknown-params */
-const css$4 = /* css */`
-  @layer navi {
-    .navi_text {
-      &[data-skeleton] {
-        border-radius: 0.2em;
-      }
-    }
-  }
+const updateNetworkSpeed = () => {
+  networkSpeedSignal.value = getNetworkSpeed();
+};
 
-  *[data-navi-space] {
-    /* user-select: none; */
-    padding-left: 0.25em;
+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);
+    });
   }
 
-  .navi_text {
-    position: relative;
+  // ✅ 2. Polling de backup (toutes les 60 secondes)
+  const pollInterval = setInterval(updateNetworkSpeed, 60000);
+  cleanupFunctions.push(() => clearInterval(pollInterval));
 
-    /* There is a chrome specific bug that prevents text-transform: capitalize to be applied in nested DOM structure */
-    /* The CSS below ensure capitalize is propagated to the bold clones */
-    &[data-capitalize] {
-      &::first-letter {
-        text-transform: uppercase;
-      }
-      .navi_text_bold_clone::first-letter {
-        text-transform: uppercase;
-      }
-      .navi_text_bold_foreground::first-letter {
-        text-transform: uppercase;
-      }
-    }
-
-    .navi_text_bold_wrapper,
-    .navi_text_bold_clone,
-    .navi_text_bold_foreground {
-      display: inherit;
-      width: inherit;
-      min-width: inherit;
-      height: inherit;
-      min-height: inherit;
-      flex-grow: inherit;
-      align-items: inherit;
-      justify-content: inherit;
-      gap: inherit;
-      text-align: inherit;
-      border-radius: inherit;
-    }
-
-    &[data-text-overflow] {
-      min-width: 0;
-      flex-wrap: wrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-
-      .navi_text_overflow_wrapper {
-        display: flex;
-        width: 100%;
-        flex-grow: 1;
-        gap: 0.3em;
-
-        .navi_text_overflow_text {
-          max-width: 100%;
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
-      }
+  // ✅ 3. Vérifier lors de la reprise d'activité
+  const handleVisibilityChange = () => {
+    if (!document.hidden) {
+      updateNetworkSpeed();
     }
+  };
 
-    &[data-skeleton] {
-      /* Children stay in the DOM to preserve natural layout dimensions,
-         but are hidden so only the skeleton is visible. */
-      visibility: hidden;
-
-      /* When there are no children a placeholder "W" is injected (see JSX).
-         It must stretch to the full available width so the skeleton
-         fills the container rather than collapsing to a single character. */
-      .navi_text_skeleton_children_placeholder {
-        display: inline-flex;
-        width: 100%;
-      }
-
-      /* Three-level structure to respect padding AND border-radius:
-
-         1. navi_text_skeleton_container — absolutely fills the border box
-            (inset:0), then applies padding:inherit so its content box equals
-            the parent's content box. line-height:normal prevents the container
-            from inheriting a large line-height that would make it taller than
-            the border box. border-radius:inherit passes the radius down.
-            visibility:visible overrides the parent's visibility:hidden.
-
-         2. navi_text_skeleton_inset — a relative block that fills 100% of the
-            container's content box (= parent's content box). It is the
-            positioned ancestor for the absolutely placed skeleton bar.
-            border-radius:inherit chains the radius further down.
-
-         3. navi_text_skeleton — the visible gradient bar. position:absolute
-            inset:0 fills the inset box precisely. border-radius:inherit
-            finally applies the radius at this level, which is now correctly
-            sized to the content area. */
-      .navi_text_skeleton_container {
-        position: absolute;
-        inset: 0;
-        padding: inherit;
-        line-height: normal;
-        border-radius: inherit;
-        visibility: visible;
-      }
-
-      .navi_text_skeleton_inset {
-        position: relative;
-        display: inline-flex;
-        width: 100%;
-        height: 100%;
-        border-radius: inherit;
-      }
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+  cleanupFunctions.push(() => {
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+  });
 
-      .navi_text_skeleton {
-        position: absolute;
-        inset: 0;
-        background: linear-gradient(
-          90deg,
-          #e0e0e0 25%,
-          #f0f0f0 50%,
-          #e0e0e0 75%
-        );
-        background-size: 200% 100%;
-        border-radius: inherit;
-      }
+  // ✅ 4. Vérifier lors de la reprise de connexion
+  const handleOnline = () => {
+    updateNetworkSpeed();
+  };
 
-      &[data-loading] {
-        .navi_text_skeleton {
-          animation: navi_text_skeleton_shimmer 1.5s infinite;
-        }
-      }
-    }
-  }
+  window.addEventListener("online", handleOnline);
+  cleanupFunctions.push(() => {
+    window.removeEventListener("online", handleOnline);
+  });
 
-  @keyframes navi_text_skeleton_shimmer {
-    0% {
-      background-position: 200% 0;
-    }
-    100% {
-      background-position: -200% 0;
-    }
-  }
+  // Cleanup global
+  return () => {
+    cleanupFunctions.forEach((cleanup) => cleanup());
+  };
+};
+setupNetworkMonitoring();
 
-  .navi_text_bold_wrapper {
+installImportMetaCssBuild(import.meta);/**
+ * RectangleLoading Component
+ *
+ * A responsive loading indicator that dynamically adjusts to fit its container.
+ * Displays an animated outline with a traveling dot that follows the container's shape.
+ *
+ * Features:
+ * - Adapts to any container dimensions using ResizeObserver
+ * - Scales stroke width, margins and corner radius proportionally
+ * - Animates using native SVG animations for smooth performance
+ * - High-quality SVG rendering with proper path calculations
+ *
+ * @param {Object} props - Component props
+ * @param {string} [props.color="#383a36"] - Color of the loading indicator
+ * @param {number} [props.radius=0] - Corner radius of the rectangle (px)
+ */
+import.meta.css = [/* css */`
+  .navi_rectangle_loading {
     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;
+    display: flex;
+    width: 100%;
+    height: 100%;
     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;
-    }
+  .navi_rectangle_loading[data-visible] {
+    opacity: 1;
   }
-`;
-
-// We could use <span data-navi-space=""> </span>
-// but we prefer to use zero width space as it has the nice side effects of
-// not being underlined by the browser (very cool because we typically don't want spaces to be underlined in links)
-const REGULAR_SPACE = jsx("span", {
-  "data-navi-space": "",
-  children: "\u200B"
-});
-const CustomWidthSpace = ({
-  value
+`, "@jsenv/navi/src/graphic/loader/rectangle_loading.jsx"];
+const RectangleLoading = ({
+  shouldShowSpinner,
+  color = "currentColor",
+  radius = 0,
+  size = 2
 }) => {
-  return jsx("span", {
-    className: "navi_custom_space",
-    style: `padding-left: ${value}`,
-    children: "\u200B"
-  });
-};
-const applySpacingOnTextChildren = (children, spacing = REGULAR_SPACE) => {
-  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;
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return null;
     }
-  } else if (typeof spacing === "number") {
-    separator = jsx(CustomWidthSpace, {
-      value: `${spacing}px`
-    });
-  } else {
-    separator = spacing;
-  }
-  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 (!shouldInjectSpacingBetween(currentChild, nextChild)) {
-      continue;
-    }
-    childrenWithGap.push(separator);
-  }
-  return childrenWithGap;
-};
-const outsideTextFlowSet = new Set();
-const markAsOutsideTextFlow = jsxElement => {
-  outsideTextFlowSet.add(jsxElement);
-};
-const isMarkedAsOutsideTextFlow = jsxElement => {
-  return outsideTextFlowSet.has(jsxElement.type);
-};
-const isPreactNode = jsxChild => {
-  return jsxChild !== null && typeof jsxChild === "object" && jsxChild.type !== undefined;
-};
-const shouldInjectSpacingBetween = (left, right) => {
-  const leftIsNode = isPreactNode(left);
-  const rightIsNode = isPreactNode(right);
-  // only inject spacing when at least one side is a preact node
-  if (!leftIsNode && !rightIsNode) {
-    return false;
-  }
-  if (leftIsNode && isMarkedAsOutsideTextFlow(left)) {
-    return false;
-  }
-  if (rightIsNode && isMarkedAsOutsideTextFlow(right)) {
-    return false;
-  }
-  if (rightIsNode && right.props && right.props.overflowPinned) {
-    return false;
-  }
-  if (typeof left === "string" && /\s$/.test(left)) {
-    return false;
-  }
-  if (typeof right === "string" && /^\s/.test(right)) {
-    return false;
-  }
-  return true;
-};
-const OverflowPinnedElementContext = createContext(null);
-const Text = props => {
-  import.meta.css = [css$4, "@jsenv/navi/src/text/text.jsx"];
-  if (props.loading || props.skeleton) {
-    return jsx(TextSkeleton, {
-      ...props
-    });
-  }
-  if (props.overflowEllipsis) {
-    return jsx(TextOverflow, {
-      ...props
-    });
-  }
-  if (props.overflowPinned) {
-    return jsx(TextOverflowPinned, {
-      ...props
-    });
-  }
-  if (props.selectRange) {
-    return jsx(TextWithSelectRange, {
-      ...props
+    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);
+      });
     });
-  }
-  return jsx(TextBasic, {
-    ...props
-  });
-};
-const TextSkeleton = ({
-  loading,
-  children,
-  ...props
-}) => {
-  // Three-level structure — see CSS comment on [data-skeleton] for details.
-  const skeletonOverlay = jsx("span", {
-    className: "navi_text_skeleton_container",
-    "aria-hidden": "true",
-    children: jsx("span", {
-      className: "navi_text_skeleton_inset",
-      children: jsx("span", {
-        className: "navi_text_skeleton"
-      })
+    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
     })
   });
-  // When there are no children, inject a full-width placeholder so the element
-  // has measurable height driven by the current font-size/line-height, and the
-  // skeleton fills the available width instead of shrinking to a single char.
-  const hasChildren = children !== null && children !== undefined && children !== false;
-  const innerChildren = hasChildren ? children : jsx("span", {
-    className: "navi_text_skeleton_children_placeholder",
-    "aria-hidden": "true",
-    children: "W"
-  });
-  return jsx(Text, {
-    "data-skeleton": "",
-    "data-loading": loading ? "" : undefined,
-    ...props,
-    skeleton: undefined,
-    childrenOutsideFlow: skeletonOverlay,
-    children: innerChildren
-  });
 };
-const TextOverflow = ({
-  noWrap,
-  spacing,
-  children,
-  ...rest
+const RectangleLoadingSvg = ({
+  width,
+  height,
+  color,
+  radius,
+  trailColor = "transparent",
+  strokeWidth
 }) => {
-  const [OverflowPinnedElement, setOverflowPinnedElement] = useState(null);
-  return jsx(Text, {
-    flex: true,
-    block: true,
-    as: "div",
-    nowWrap: noWrap,
-    pre: !noWrap
-    // For paragraph we prefer to keep lines and only hide unbreakable long sections
-    ,
+  const margin = Math.max(2, Math.min(width, height) * 0.03);
 
-    preLine: rest.as === "p",
-    ...rest,
-    overflowEllipsis: undefined,
-    "data-text-overflow": "",
-    spacing: "pre",
-    children: jsxs("span", {
-      className: "navi_text_overflow_wrapper",
-      children: [jsx(OverflowPinnedElementContext.Provider, {
-        value: setOverflowPinnedElement,
-        children: jsx(Text, {
-          className: "navi_text_overflow_text",
-          spacing: spacing,
-          children: children
-        })
-      }), OverflowPinnedElement]
-    })
-  });
-};
-const TextOverflowPinned = ({
-  overflowPinned,
-  ...props
-}) => {
-  const setOverflowPinnedElement = useContext(OverflowPinnedElementContext);
-  const text = jsx(Text, {
-    ...props,
-    "data-overflow-pinned": ""
-  });
-  if (!setOverflowPinnedElement) {
-    console.warn("<Text overflowPinned> declared outside a <Text overflowEllipsis>");
-    return text;
-  }
-  if (overflowPinned) {
-    setOverflowPinnedElement(text);
-    return null;
-  }
-  setOverflowPinnedElement(null);
-  return text;
-};
-const TextWithSelectRange = ({
-  selectRange,
-  ...props
-}) => {
-  const defaultRef = useRef();
-  const ref = props.ref || defaultRef;
-  useInitialTextSelection(ref, selectRange);
-  return jsx(Text, {
-    ref: ref,
-    ...props
-  });
-};
-const TextBasic = ({
-  spacing = REGULAR_SPACE,
-  boldTransition,
-  boldStable,
-  preventBoldLayoutShift = boldTransition,
-  capitalize,
-  children,
-  childrenOutsideFlow,
-  ...rest
-}) => {
-  const boxProps = {
-    "as": "span",
-    "data-bold-transition": boldTransition ? "" : undefined,
-    "data-capitalize": capitalize ? "" : undefined,
-    ...rest,
-    "baseClassName": withPropsClassName("navi_text", rest.baseClassName)
-  };
-  const shouldPreserveSpacing = rest.as === "pre" || rest.flex || rest.grid;
-  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,
-      children: [jsx("span", {
-        className: "navi_text_bold_background",
-        "aria-hidden": "true",
-        children: children
-      }), children, childrenOutsideFlow]
-    });
-  }
-  if (preventBoldLayoutShift) {
-    const alignX = rest.alignX || rest.align || "start";
+  // Calculate the drawable area
+  const drawableWidth = width - margin * 2;
+  const drawableHeight = height - margin * 2;
 
-    // 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 seule ligne de texte (donc lorsque noWrap est actif)
-    // on pourrait auto-active cela sur une prop genre boldCanChange
-    return jsxs(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
-        })]
-      }), childrenOutsideFlow]
-    });
-  }
-  return jsxs(Box, {
-    ...boxProps,
-    children: [children, childrenOutsideFlow]
+  // ✅ Check if this should be a circle - only if width and height are nearly equal
+  const maxPossibleRadius = Math.min(drawableWidth, drawableHeight) / 2;
+  radius = resolveCSSSize(radius, {
+    availableSize: Math.min(width, height)
   });
-};
-
-installImportMetaCssBuild(import.meta);const css$3 = /* css */`
-  @layer navi {
-    /* Ensure data attributes from box.jsx can win to update display */
-    .navi_icon {
-      display: inline-block;
-      box-sizing: border-box;
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-
-  .navi_icon {
-    &[data-flow-inline] {
-      width: 1em;
-      height: 1em;
-    }
-    &[data-icon-char] {
-      flex-grow: 0 !important;
+  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;
 
-      svg,
-      img {
-        width: 100%;
-        height: 100%;
-      }
-      svg {
-        overflow: visible;
-      }
-    }
-    &[data-interactive] {
-      cursor: pointer;
-    }
+    // ✅ 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_char_slot {
-    opacity: 0;
-    cursor: default;
-    user-select: none;
-  }
-  .navi_text.navi_icon_foreground {
-    position: absolute;
-    inset: 0;
-    display: inline-flex;
+  // Fixed segment size in pixels
+  const maxSegmentSize = 40;
+  const segmentLength = Math.min(maxSegmentSize, pathLength * 0.25);
+  const gapLength = pathLength - segmentLength;
 
-    & > .navi_text {
-      display: flex;
-      aspect-ratio: 1 / 1;
-      min-width: 0;
-      height: 100%;
-      max-height: 1em;
-      align-items: center;
-      justify-content: center;
-    }
-  }
+  // 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);
 
-  .navi_icon > svg,
-  .navi_icon > img {
-    width: 100%;
-    height: 100%;
-    backface-visibility: hidden;
-  }
-  .navi_icon[data-width-fixed] > svg,
-  .navi_icon[data-width-fixed] > img {
-    width: 100%;
-    height: auto;
-  }
-  .navi_icon[data-height-fixed] > svg,
-  .navi_icon[data-height-fixed] > img {
-    width: auto;
-    height: 100%;
-  }
-  .navi_icon[data-width-fixed][data-height-fixed] > svg,
-  .navi_icon[data-width-fixed][data-height-fixed] > img {
-    width: 100%;
-    height: 100%;
-  }
-`;
-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
-}) => {
-  import.meta.css = [css$3, "@jsenv/navi/src/graphic/icon.jsx"];
-  const innerChildren = href ? jsx("svg", {
+  // ✅ Calculate correct offset based on actual segment size
+  const segmentRatio = segmentLength / pathLength;
+  const circleOffset = -animationDuration * segmentRatio;
+  return jsxs("svg", {
     width: "100%",
     height: "100%",
-    children: jsx("use", {
-      href: href
-    })
-  }) : children;
-  let {
-    flex,
-    grid,
-    width,
-    height
-  } = props;
-  if (width === "auto") {
-    width = undefined;
-  }
-  if (height === "auto") {
-    height = undefined;
-  }
-  const hasExplicitWidth = width !== undefined;
-  const hasExplicitHeight = height !== undefined;
-  const widthFixed = hasExplicitWidth || hasExplicitHeight && (props.square || props.circle || props.aspectRatio);
-  const heightFixed = hasExplicitHeight || hasExplicitWidth && (props.square || props.circle || props.aspectRatio);
-  if (widthFixed || heightFixed) {
-    if (flex === undefined) {
-      flex = "x";
-    }
-  } else if (decorative === undefined && !onClick) {
-    decorative = true;
-  }
-  const ariaProps = decorative ? {
-    "aria-hidden": "true"
-  } : {};
-  if (typeof children === "string") {
-    return jsx(Text, {
-      ...props,
-      ...ariaProps,
-      "data-icon-text": "",
-      children: children
-    });
-  }
-  if (flex || grid) {
-    return jsx(Box, {
-      square: true,
-      ...props,
-      ...ariaProps,
-      flex: flex,
-      baseClassName: "navi_icon",
-      "data-width-fixed": widthFixed ? "" : undefined,
-      "data-height-fixed": heightFixed ? "" : undefined,
-      "data-interactive": onClick ? "" : undefined,
-      onClick: onClick,
-      children: innerChildren
-    });
-  }
-  const invisibleText = baseChar.repeat(charWidth);
-  return jsxs(Text, {
-    ...props,
-    ...ariaProps,
-    className: withPropsClassName("navi_icon", props.className),
-    spacing: "pre",
-    "data-icon-char": "",
-    "data-width-fixed": widthFixed ? "" : undefined,
-    "data-height-fixed": heightFixed ? "" : undefined,
-    "data-interactive": onClick ? "" : undefined,
-    onClick: onClick,
-    children: [jsx("span", {
-      className: "navi_icon_char_slot",
-      "aria-hidden": "true",
-      children: invisibleText
-    }), jsx(Text, {
-      className: "navi_icon_foreground",
-      spacing: "pre",
-      children: innerChildren
-    })]
-  });
-};
-
-const EmailSvg = () => {
-  return jsxs("svg", {
-    viewBox: "0 0 24 24",
+    viewBox: `0 0 ${width} ${height}`,
+    preserveAspectRatio: "none",
+    style: "overflow: visible",
     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",
+    "shape-rendering": "geometricPrecision",
+    children: [isCircle ? jsx("circle", {
+      cx: margin + drawableWidth / 2,
+      cy: margin + drawableHeight / 2,
+      r: actualRadius,
       fill: "none",
-      stroke: "currentColor",
-      "stroke-width": "2"
+      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: "m2 6 8 5 2 1.5 2-1.5 8-5",
+      d: rectPath,
       fill: "none",
-      stroke: "currentColor",
-      "stroke-width": "2",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
+      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`
+      })
     })]
   });
 };
-
-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"
-      })]
-    })
-  });
-};
-const LinkSmsSvg = () => {
-  return jsx("svg", {
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: jsx("path", {
-      d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z",
-      fill: "currentColor"
-    })
-  });
-};
-const LinkGithubSvg = () => {
-  return jsx("svg", {
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: jsx("path", {
-      d: "M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z",
-      fill: "currentColor"
-    })
+
+installImportMetaCssBuild(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;
+
+    &[data-visible] {
+      opacity: 1;
+    }
+  }
+`, "@jsenv/navi/src/graphic/loader/loader_background.jsx"];
+const LoaderBackground = ({
+  loading,
+  containerRef,
+  targetSelector,
+  color,
+  inset = 0,
+  borderRadius = 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,
+    borderRadius: borderRadius,
+    spacingTop: spacingTop,
+    spacingLeft: spacingLeft,
+    spacingBottom: spacingBottom,
+    spacingRight: spacingRight,
+    children: children
   });
 };
-const LinkCurrentSvg = () => {
-  return jsx("svg", {
-    viewBox: "0 0 16 16",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: jsx("path", {
-      d: "m 8 0 c -3.3125 0 -6 2.6875 -6 6 c 0.007812 0.710938 0.136719 1.414062 0.386719 2.078125 l -0.015625 -0.003906 c 0.636718 1.988281 3.78125 5.082031 5.625 6.929687 h 0.003906 v -0.003906 c 1.507812 -1.507812 3.878906 -3.925781 5.046875 -5.753906 c 0.261719 -0.414063 0.46875 -0.808594 0.585937 -1.171875 l -0.019531 0.003906 c 0.25 -0.664063 0.382813 -1.367187 0.386719 -2.078125 c 0 -3.3125 -2.683594 -6 -6 -6 z m 0 3.691406 c 1.273438 0 2.308594 1.035156 2.308594 2.308594 s -1.035156 2.308594 -2.308594 2.308594 c -1.273438 -0.003906 -2.304688 -1.035156 -2.304688 -2.308594 c -0.003906 -1.273438 1.03125 -2.304688 2.304688 -2.308594 z m 0 0",
-      fill: "currentColor"
-    })
+const LoaderBackgroundWithPortal = ({
+  container,
+  loading,
+  color,
+  inset,
+  borderRadius,
+  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,
+        radius: borderRadius
+      })
+    }), children]
   });
 };
-
-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 LoaderBackgroundBasic = ({
+  loading,
+  targetSelector,
+  color,
+  borderWidth = 0,
+  borderRadius = 0,
+  spacingTop,
+  spacingLeft,
+  spacingBottom,
+  spacingRight,
+  marginTop = 0,
+  marginLeft = 0,
+  marginBottom = 0,
+  marginRight = 0,
+  paddingTop = 0,
+  paddingLeft = 0,
+  paddingBottom = 0,
+  paddingRight = 0,
+  inset,
+  children
+}) => {
+  const shouldShowSpinner = useDebounceTrue(loading, 300);
+  const rectangleRef = useRef(null);
+  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(borderWidth);
+  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: color,
+        radius: borderRadius,
+        size: size
+      })
+    }), children]
   });
 };
 
-const useDebounceTrue = (value, delay = 300) => {
-  const [debouncedTrue, setDebouncedTrue] = useState(false);
-  const timerRef = useRef(null);
+// used by form elements such as <input>, <select>, <textarea> to have their own action bound to a single parameter
+// when inside a <form> the form params are updated when the form element single param is updated
+const useActionBoundToOneParam = (action, externalValue) => {
+  const actionFirstArgSignal = useSignal(externalValue);
+  const boundAction = useBoundAction(action, actionFirstArgSignal);
+  const getValue = useCallback(() => actionFirstArgSignal.value, []);
+  const setValue = useCallback((value) => {
+    actionFirstArgSignal.value = value;
+  }, []);
+  const externalValueRef = useRef(externalValue);
+  if (externalValue !== externalValueRef.current) {
+    externalValueRef.current = externalValue;
+    setValue(externalValue);
+  }
 
-  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);
-    }
+  const value = getValue();
+  return [boundAction, value, setValue];
+};
+const useActionBoundToOneArrayParam = (
+  action,
+  name,
+  externalValue,
+  fallbackValue,
+  defaultValue,
+) => {
+  const [boundAction, value, setValue] = useActionBoundToOneParam(
+    action,
+    name);
 
-    // Cleanup function
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
-    };
-  }, [value, delay]);
+  const add = (valueToAdd, valueArray = value) => {
+    setValue(addIntoArray(valueArray, valueToAdd));
+  };
 
-  return debouncedTrue;
-};
+  const remove = (valueToRemove, valueArray = value) => {
+    setValue(removeFromArray(valueArray, valueToRemove));
+  };
 
-const useNetworkSpeed = () => {
-  return networkSpeedSignal.value;
+  const result = [boundAction, value, setValue];
+  result.add = add;
+  result.remove = remove;
+  return result;
+};
+// used by <details> to just call their action
+const useAction = (action, paramsSignal) => {
+  return useBoundAction(action, paramsSignal);
 };
 
-const connection =
-  window.navigator.connection ||
-  window.navigator.mozConnection ||
-  window.navigator.webkitConnection;
-
-const getNetworkSpeed = () => {
-  // ✅ Network Information API (support moderne)
-  if (!connection) {
-    return "3g";
+const useBoundAction = (action, actionParamsSignal) => {
+  const actionRef = useRef();
+  const actionCallbackRef = useRef();
+
+  if (!action) {
+    return null;
   }
-  if (connection) {
-    const effectiveType = connection.effectiveType;
-    if (effectiveType) {
-      return effectiveType; // "slow-2g", "2g", "3g", "4g", "5g"
+  if (isFunctionButNotAnActionFunction(action)) {
+    actionCallbackRef.current = action;
+    const existingAction = actionRef.current;
+    if (existingAction) {
+      return existingAction;
     }
-    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
+    const actionFromFunction = createAction(
+      (...args) => {
+        return actionCallbackRef.current?.(...args);
+      },
+      {
+        name: action.name,
+        // We don't want to give empty params by default
+        // we want to give undefined for regular functions
+        params: undefined,
+      },
+    );
+    if (!actionParamsSignal) {
+      actionRef.current = actionFromFunction;
+      return actionFromFunction;
     }
+    const actionBoundToParams =
+      actionFromFunction.bindParams(actionParamsSignal);
+    actionRef.current = actionBoundToParams;
+    return actionBoundToParams;
   }
-  return "3g";
+  if (actionParamsSignal) {
+    return action.bindParams(actionParamsSignal);
+  }
+  return action;
 };
 
-const updateNetworkSpeed = () => {
-  networkSpeedSignal.value = getNetworkSpeed();
+const isFunctionButNotAnActionFunction = (action) => {
+  return typeof action === "function" && !action.isAction;
 };
 
-const networkSpeedSignal = signal(getNetworkSpeed());
+const ErrorBoundaryContext = createContext(null);
 
-const setupNetworkMonitoring = () => {
-  const cleanupFunctions = [];
+const useResetErrorBoundary = () => {
+  const resetErrorBoundary = useContext(ErrorBoundaryContext);
+  return resetErrorBoundary;
+};
 
-  // ✅ 1. Écouter les changements natifs
+const addCustomMessage = (element, key, message, options) => {
+  const customConstraintValidation =
+    element.__validationInterface__ ||
+    (element.__validationInterface__ =
+      installCustomConstraintValidation(element));
 
-  if (connection) {
-    connection.addEventListener("change", updateNetworkSpeed);
-    cleanupFunctions.push(() => {
-      connection.removeEventListener("change", updateNetworkSpeed);
-    });
-  }
+  return customConstraintValidation.addCustomMessage(key, message, options);
+};
 
-  // ✅ 2. Polling de backup (toutes les 60 secondes)
-  const pollInterval = setInterval(updateNetworkSpeed, 60000);
-  cleanupFunctions.push(() => clearInterval(pollInterval));
+const removeCustomMessage = (element, key) => {
+  const customConstraintValidation = element.__validationInterface__;
+  if (!customConstraintValidation) {
+    return;
+  }
+  customConstraintValidation.removeCustomMessage(key);
+};
 
-  // ✅ 3. Vérifier lors de la reprise d'activité
-  const handleVisibilityChange = () => {
-    if (!document.hidden) {
-      updateNetworkSpeed();
+const useExecuteAction = (
+  elementRef,
+  {
+    errorEffect = "show_validation_message", // "show_validation_message" or "throw"
+    errorMapping,
+  } = {},
+) => {
+  // see https://medium.com/trabe/catching-asynchronous-errors-in-react-using-error-boundaries-5e8a5fd7b971
+  // and https://codepen.io/dmail/pen/XJJqeGp?editors=0010
+  // To change if https://github.com/preactjs/preact/issues/4754 lands
+  const [error, setError] = useState(null);
+  const resetErrorBoundary = useResetErrorBoundary();
+  useLayoutEffect(() => {
+    if (error) {
+      throw error;
     }
-  };
-
-  document.addEventListener("visibilitychange", handleVisibilityChange);
-  cleanupFunctions.push(() => {
-    document.removeEventListener("visibilitychange", handleVisibilityChange);
-  });
+  }, [error]);
 
-  // ✅ 4. Vérifier lors de la reprise de connexion
-  const handleOnline = () => {
-    updateNetworkSpeed();
+  const validationMessageTargetRef = useRef(null);
+  const addErrorMessage = (error) => {
+    let calloutAnchor = validationMessageTargetRef.current;
+    let message;
+    if (errorMapping) {
+      const errorMappingResult = errorMapping(error);
+      if (typeof errorMappingResult === "string") {
+        message = errorMappingResult;
+      } else if (Error.isError(errorMappingResult)) {
+        message = errorMappingResult;
+      } else if (isValidElement(errorMappingResult)) {
+        message = errorMappingResult;
+      } else if (
+        typeof errorMappingResult === "object" &&
+        errorMappingResult !== null
+      ) {
+        message = errorMappingResult.message || error.message;
+        calloutAnchor = errorMappingResult.target || calloutAnchor;
+      }
+    } else {
+      message = error;
+    }
+    addCustomMessage(calloutAnchor, "action_error", message, {
+      status: "error",
+      // This error should not prevent <form> submission
+      // so whenever user tries to submit the form the error is cleared
+      // (Hitting enter key, clicking on submit button, etc. would allow to re-submit the form in error state)
+      removeOnRequestAction: true,
+    });
   };
-
-  window.addEventListener("online", handleOnline);
-  cleanupFunctions.push(() => {
-    window.removeEventListener("online", handleOnline);
-  });
-
-  // Cleanup global
-  return () => {
-    cleanupFunctions.forEach((cleanup) => cleanup());
+  const removeErrorMessage = () => {
+    const validationMessageTarget = validationMessageTargetRef.current;
+    if (validationMessageTarget) {
+      removeCustomMessage(validationMessageTarget, "action_error");
+    }
   };
-};
-setupNetworkMonitoring();
 
-installImportMetaCssBuild(import.meta);/**
- * RectangleLoading Component
- *
- * A responsive loading indicator that dynamically adjusts to fit its container.
- * Displays an animated outline with a traveling dot that follows the container's shape.
- *
- * Features:
- * - Adapts to any container dimensions using ResizeObserver
- * - Scales stroke width, margins and corner radius proportionally
- * - Animates using native SVG animations for smooth performance
- * - High-quality SVG rendering with proper path calculations
- *
- * @param {Object} props - Component props
- * @param {string} [props.color="#383a36"] - Color of the loading indicator
- * @param {number} [props.radius=0] - Corner radius of the rectangle (px)
- */
-import.meta.css = [/* css */`
-  .navi_rectangle_loading {
-    position: relative;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-  }
-
-  .navi_rectangle_loading[data-visible] {
-    opacity: 1;
-  }
-`, "@jsenv/navi/src/graphic/loader/rectangle_loading.jsx"];
-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) {
+    const element = elementRef.current;
+    if (!element) {
       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);
+    const form = element.tagName === "FORM" ? element : element.form;
+    if (!form) {
+      return null;
+    }
+    const onReset = () => {
+      removeErrorMessage();
+    };
+    form.addEventListener("reset", onReset);
     return () => {
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
+      form.removeEventListener("reset", onReset);
+    };
+  });
+
+  // const errorEffectRef = useRef();
+  // errorEffectRef.current = errorEffect;
+  const executeAction = useCallback(
+    (actionEvent) => {
+      const { action, actionOrigin, requester, event, method } =
+        actionEvent.detail;
+      const sharedActionEventDetail = {
+        action,
+        actionOrigin,
+        requester,
+        event,
+        method,
+      };
+
+      const dispatchCustomEvent = (type, options) => {
+        const element = elementRef.current;
+        const customEvent = new CustomEvent(type, options);
+        element.dispatchEvent(customEvent);
+      };
+      if (resetErrorBoundary) {
+        resetErrorBoundary();
       }
-      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);
+      removeErrorMessage();
+      setError(null);
 
-  // Calculate the drawable area
-  const drawableWidth = width - margin * 2;
-  const drawableHeight = height - margin * 2;
+      const validationMessageTarget = requester || elementRef.current;
+      validationMessageTargetRef.current = validationMessageTarget;
 
-  // ✅ Check if this should be a circle - only if width and height are nearly equal
-  const maxPossibleRadius = Math.min(drawableWidth, drawableHeight) / 2;
-  radius = resolveCSSSize(radius, {
-    availableSize: Math.min(width, height)
-  });
-  const actualRadius = Math.min(radius || Math.min(drawableWidth, drawableHeight) * 0.05, maxPossibleRadius // ✅ Limité au radius maximum possible
-  );
-  const aspectRatio = Math.max(drawableWidth, drawableHeight) / Math.min(drawableWidth, drawableHeight);
-  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;
+      dispatchCustomEvent("actionstart", {
+        detail: sharedActionEventDetail,
+      });
 
-    // ✅ 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}
-    `;
-  }
+      return action[method]({
+        reason: `"${event.type}" event on ${(() => {
+          const target = event.target;
+          const tagName = target.tagName.toLowerCase();
 
-  // Fixed segment size in pixels
-  const maxSegmentSize = 40;
-  const segmentLength = Math.min(maxSegmentSize, pathLength * 0.25);
-  const gapLength = pathLength - segmentLength;
+          if (target.id) {
+            return `${tagName}#${target.id}`;
+          }
 
-  // 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);
+          const uiName = target.getAttribute("data-ui-name");
+          if (uiName) {
+            return `${tagName}[data-ui-name="${uiName}"]`;
+          }
 
-  // ✅ 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`
-      })
-    })]
-  });
+          return `<${tagName}>`;
+        })()}`,
+        onAbort: (reason) => {
+          if (
+            // at this stage the action side effect might have removed the <element> from the DOM
+            // (in theory no because action side effect are batched to happen after)
+            // but other side effects might do this
+            elementRef.current
+          ) {
+            dispatchCustomEvent("actionabort", {
+              detail: {
+                ...sharedActionEventDetail,
+                reason,
+              },
+            });
+          }
+        },
+        onError: (error) => {
+          if (
+            // at this stage the action side effect might have removed the <element> from the DOM
+            // (in theory no because action side effect are batched to happen after)
+            // but other side effects might do this
+            elementRef.current
+          ) {
+            dispatchCustomEvent("actionerror", {
+              detail: {
+                ...sharedActionEventDetail,
+                error,
+              },
+            });
+          }
+          if (errorEffect === "show_validation_message") {
+            addErrorMessage(error);
+          } else if (errorEffect === "throw") {
+            setError(error);
+          }
+        },
+        onComplete: (data) => {
+          if (
+            // at this stage the action side effect might have removed the <element> from the DOM
+            // (in theory no because action side effect are batched to happen after)
+            // but other side effects might do this
+            elementRef.current
+          ) {
+            dispatchCustomEvent("actionend", {
+              detail: {
+                ...sharedActionEventDetail,
+                data,
+              },
+            });
+          }
+        },
+      });
+    },
+    [errorEffect],
+  );
+
+  return executeAction;
 };
 
-installImportMetaCssBuild(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;
+const detectMac = () => {
+  // Modern way using User-Agent Client Hints API
+  if (window.navigator.userAgentData) {
+    return window.navigator.userAgentData.platform === "macOS";
+  }
+  // Fallback to userAgent string parsing
+  return /Mac|iPhone|iPad|iPod/.test(window.navigator.userAgent);
+};
+const isMac = detectMac();
+
+// Maps canonical browser key names to their user-friendly aliases.
+// Used for both event matching and ARIA normalization.
+const keyMapping = {
+  " ": { alias: ["space"] },
+  "escape": { alias: ["esc"] },
+  "arrowup": { alias: ["up"] },
+  "arrowdown": { alias: ["down"] },
+  "arrowleft": { alias: ["left"] },
+  "arrowright": { alias: ["right"] },
+  "delete": { alias: ["del"] },
+  // Platform-specific mappings
+  ...(isMac
+    ? { delete: { alias: ["backspace"] } }
+    : { backspace: { alias: ["delete"] } }),
+};
+
+const activeShortcutsSignal = signal([]);
+const shortcutsMap = new Map();
+
+const areShortcutsEqual = (shortcutA, shortcutB) => {
+  return (
+    shortcutA.key === shortcutB.key &&
+    shortcutA.description === shortcutB.description &&
+    shortcutA.enabled === shortcutB.enabled
+  );
+};
 
-    &[data-visible] {
-      opacity: 1;
-    }
+const areShortcutArraysEqual = (arrayA, arrayB) => {
+  if (arrayA.length !== arrayB.length) {
+    return false;
   }
-`, "@jsenv/navi/src/graphic/loader/loader_background.jsx"];
-const LoaderBackground = ({
-  loading,
-  containerRef,
-  targetSelector,
-  color,
-  inset = 0,
-  borderRadius = 0,
-  spacingTop = 0,
-  spacingLeft = 0,
-  spacingBottom = 0,
-  spacingRight = 0,
-  children
-}) => {
-  if (containerRef) {
-    const container = containerRef.current;
-    if (!container) {
-      return children;
+
+  for (let i = 0; i < arrayA.length; i++) {
+    if (!areShortcutsEqual(arrayA[i], arrayB[i])) {
+      return false;
     }
-    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,
-    borderRadius: borderRadius,
-    spacingTop: spacingTop,
-    spacingLeft: spacingLeft,
-    spacingBottom: spacingBottom,
-    spacingRight: spacingRight,
-    children: children
-  });
+
+  return true;
 };
-const LoaderBackgroundWithPortal = ({
-  container,
-  loading,
-  color,
-  inset,
-  borderRadius,
-  spacingTop,
-  spacingLeft,
-  spacingBottom,
-  spacingRight,
-  children
-}) => {
-  const shouldShowSpinner = useDebounceTrue(loading, 300);
-  if (!shouldShowSpinner) {
-    return children;
+
+const updateActiveShortcuts = () => {
+  const activeElement = activeElementSignal.peek();
+  const currentActiveShortcuts = activeShortcutsSignal.peek();
+  const activeShortcuts = [];
+  for (const [element, { shortcuts }] of shortcutsMap) {
+    if (element === activeElement || element.contains(activeElement)) {
+      activeShortcuts.push(...shortcuts);
+    }
   }
-  container.style.position = "relative";
-  let paddingTop = 0;
-  if (container.nodeName === "DETAILS") {
-    paddingTop = container.querySelector("summary").offsetHeight;
+
+  // Only update if shortcuts have actually changed
+  if (!areShortcutArraysEqual(currentActiveShortcuts, activeShortcuts)) {
+    activeShortcutsSignal.value = activeShortcuts;
   }
-  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,
-        radius: borderRadius
-      })
-    }), children]
-  });
 };
-const LoaderBackgroundBasic = ({
-  loading,
-  targetSelector,
-  color,
-  borderWidth = 0,
-  borderRadius = 0,
-  spacingTop,
-  spacingLeft,
-  spacingBottom,
-  spacingRight,
-  marginTop = 0,
-  marginLeft = 0,
-  marginBottom = 0,
-  marginRight = 0,
-  paddingTop = 0,
-  paddingLeft = 0,
-  paddingBottom = 0,
-  paddingRight = 0,
-  inset,
-  children
-}) => {
-  const shouldShowSpinner = useDebounceTrue(loading, 300);
-  const rectangleRef = useRef(null);
-  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;
+effect(() => {
+  // eslint-disable-next-line no-unused-expressions
+  activeElementSignal.value;
+  updateActiveShortcuts();
+});
+const addShortcuts = (element, shortcuts) => {
+  shortcutsMap.set(element, { shortcuts });
+  updateActiveShortcuts();
+};
+const removeShortcuts = (element) => {
+  shortcutsMap.delete(element);
+  updateActiveShortcuts();
+};
+
+const useKeyboardShortcuts = (
+  elementRef,
+  shortcuts,
+  {
+    onActionPrevented,
+    onActionStart,
+    onActionAbort,
+    onActionError,
+    onActionEnd,
+    allowConcurrentActions,
+  } = {},
+) => {
+  if (!elementRef) {
+    throw new Error(
+      "useKeyboardShortcuts requires an elementRef to attach shortcuts to.",
+    );
   }
-  const maxBorderWidth = Math.max(borderWidth);
-  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: color,
-        radius: borderRadius,
-        size: size
-      })
-    }), children]
+
+  const executeAction = useExecuteAction(elementRef);
+  const shortcutActionIsBusyRef = useRef(false);
+  useActionEvents(elementRef, {
+    actionOrigin: "keyboard_shortcut",
+    onPrevented: onActionPrevented,
+    onAction: (actionEvent) => {
+      const { shortcut } = actionEvent.detail.meta || {};
+      if (!shortcut) {
+        // not a shortcut (an other interaction triggered the action, don't request it again)
+        return;
+      }
+      // action can be a function or an action object, whem a function we must "wrap" it in a function returning that function
+      // otherwise setState would call that action immediately
+      // setAction(() => actionEvent.detail.action);
+      executeAction(actionEvent, {
+        requester: document.activeElement,
+      });
+    },
+    onStart: (e) => {
+      const { shortcut } = e.detail.meta || {};
+      if (!shortcut) {
+        return;
+      }
+      if (!allowConcurrentActions) {
+        shortcutActionIsBusyRef.current = true;
+      }
+      shortcut.onStart?.(e);
+      onActionStart?.(e);
+    },
+    onAbort: (e) => {
+      const { shortcut } = e.detail.meta || {};
+      if (!shortcut) {
+        return;
+      }
+      shortcutActionIsBusyRef.current = false;
+      shortcut.onAbort?.(e);
+      onActionAbort?.(e);
+    },
+    onError: (error, e) => {
+      const { shortcut } = e.detail.meta || {};
+      if (!shortcut) {
+        return;
+      }
+      shortcutActionIsBusyRef.current = false;
+      shortcut.onError?.(error, e);
+      onActionError?.(error, e);
+    },
+    onEnd: (e) => {
+      const { shortcut } = e.detail.meta || {};
+      if (!shortcut) {
+        return;
+      }
+      shortcutActionIsBusyRef.current = false;
+      shortcut.onEnd?.(e);
+      onActionEnd?.(e);
+    },
   });
-};
 
-// used by form elements such as <input>, <select>, <textarea> to have their own action bound to a single parameter
-// when inside a <form> the form params are updated when the form element single param is updated
-const useActionBoundToOneParam = (action, externalValue) => {
-  const actionFirstArgSignal = useSignal(externalValue);
-  const boundAction = useBoundAction(action, actionFirstArgSignal);
-  const getValue = useCallback(() => actionFirstArgSignal.value, []);
-  const setValue = useCallback((value) => {
-    actionFirstArgSignal.value = value;
-  }, []);
-  const externalValueRef = useRef(externalValue);
-  if (externalValue !== externalValueRef.current) {
-    externalValueRef.current = externalValue;
-    setValue(externalValue);
+  const shortcutDeps = [];
+  for (const shortcut of shortcuts) {
+    shortcutDeps.push(
+      shortcut.key,
+      shortcut.description,
+      shortcut.enabled,
+      shortcut.confirmMessage,
+    );
+    shortcut.action = useAction(shortcut.action);
   }
 
-  const value = getValue();
-  return [boundAction, value, setValue];
-};
-const useActionBoundToOneArrayParam = (
-  action,
-  name,
-  externalValue,
-  fallbackValue,
-  defaultValue,
-) => {
-  const [boundAction, value, setValue] = useActionBoundToOneParam(
-    action,
-    name);
-
-  const add = (valueToAdd, valueArray = value) => {
-    setValue(addIntoArray(valueArray, valueToAdd));
-  };
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return null;
+    }
+    const shortcutsCopy = [];
+    for (const shortcutCandidate of shortcuts) {
+      shortcutsCopy.push({
+        ...shortcutCandidate,
+        handler: (keyboardEvent) => {
+          if (shortcutCandidate.handler) {
+            return shortcutCandidate.handler(keyboardEvent);
+          }
+          if (shortcutActionIsBusyRef.current) {
+            return false;
+          }
+          const { action } = shortcutCandidate;
+          const actionWithEvent = action.bindParams(keyboardEvent);
+          return requestAction(element, actionWithEvent, {
+            actionOrigin: "keyboard_shortcut",
+            event: keyboardEvent,
+            requester: document.activeElement,
+            confirmMessage: shortcutCandidate.confirmMessage,
+            meta: {
+              shortcut: shortcutCandidate,
+            },
+          });
+        },
+      });
+    }
 
-  const remove = (valueToRemove, valueArray = value) => {
-    setValue(removeFromArray(valueArray, valueToRemove));
-  };
+    addShortcuts(element, shortcuts);
 
-  const result = [boundAction, value, setValue];
-  result.add = add;
-  result.remove = remove;
-  return result;
-};
-// used by <details> to just call their action
-const useAction = (action, paramsSignal) => {
-  return useBoundAction(action, paramsSignal);
+    const onKeydown = (event) => {
+      applyKeyboardShortcuts(shortcutsCopy, event);
+    };
+    element.addEventListener("keydown", onKeydown);
+    return () => {
+      element.removeEventListener("keydown", onKeydown);
+      removeShortcuts(element);
+    };
+  }, [shortcutDeps]);
 };
 
-const useBoundAction = (action, actionParamsSignal) => {
-  const actionRef = useRef();
-  const actionCallbackRef = useRef();
-
-  if (!action) {
+const applyKeyboardShortcuts = (shortcuts, keyboardEvent) => {
+  if (!canInterceptKeys(keyboardEvent)) {
     return null;
   }
-  if (isFunctionButNotAnActionFunction(action)) {
-    actionCallbackRef.current = action;
-    const existingAction = actionRef.current;
-    if (existingAction) {
-      return existingAction;
+  for (const shortcutCandidate of shortcuts) {
+    let { enabled = true, key } = shortcutCandidate;
+    if (!enabled) {
+      continue;
     }
-    const actionFromFunction = createAction(
-      (...args) => {
-        return actionCallbackRef.current?.(...args);
-      },
-      {
-        name: action.name,
-        // We don't want to give empty params by default
-        // we want to give undefined for regular functions
-        params: undefined,
-      },
-    );
-    if (!actionParamsSignal) {
-      actionRef.current = actionFromFunction;
-      return actionFromFunction;
+
+    if (typeof key === "function") {
+      const keyReturnValue = key(keyboardEvent);
+      if (!keyReturnValue) {
+        continue;
+      }
+      key = keyReturnValue;
+    }
+    if (!key) {
+      console.error(shortcutCandidate);
+      throw new TypeError(`key is required in keyboard shortcut, got ${key}`);
     }
-    const actionBoundToParams =
-      actionFromFunction.bindParams(actionParamsSignal);
-    actionRef.current = actionBoundToParams;
-    return actionBoundToParams;
-  }
-  if (actionParamsSignal) {
-    return action.bindParams(actionParamsSignal);
-  }
-  return action;
-};
 
-const isFunctionButNotAnActionFunction = (action) => {
-  return typeof action === "function" && !action.isAction;
-};
+    // Handle platform-specific combination objects
+    let actualCombination;
+    let crossPlatformCombination;
+    if (typeof key === "object" && key !== null) {
+      actualCombination = isMac ? key.mac : key.other;
+    } else {
+      actualCombination = key;
+      if (containsPlatformSpecificKeys(key)) {
+        crossPlatformCombination = generateCrossPlatformCombination(key);
+      }
+    }
 
-const ErrorBoundaryContext = createContext(null);
+    // Check both the actual combination and cross-platform combination
+    const matchesActual =
+      actualCombination &&
+      keyboardEventIsMatchingKeyCombination(keyboardEvent, actualCombination);
+    const matchesCrossPlatform =
+      crossPlatformCombination &&
+      crossPlatformCombination !== actualCombination &&
+      keyboardEventIsMatchingKeyCombination(
+        keyboardEvent,
+        crossPlatformCombination,
+      );
 
-const useResetErrorBoundary = () => {
-  const resetErrorBoundary = useContext(ErrorBoundaryContext);
-  return resetErrorBoundary;
+    if (!matchesActual && !matchesCrossPlatform) {
+      continue;
+    }
+    if (typeof enabled === "function" && !enabled(keyboardEvent)) {
+      continue;
+    }
+    const returnValue = shortcutCandidate.handler(keyboardEvent);
+    if (returnValue) {
+      keyboardEvent.preventDefault();
+    }
+    return shortcutCandidate;
+  }
+  return null;
 };
+const containsPlatformSpecificKeys = (combination) => {
+  const lowerCombination = combination.toLowerCase();
+  const macSpecificKeys = ["command", "cmd"];
 
-const addCustomMessage = (element, key, message, options) => {
-  const customConstraintValidation =
-    element.__validationInterface__ ||
-    (element.__validationInterface__ =
-      installCustomConstraintValidation(element));
-
-  return customConstraintValidation.addCustomMessage(key, message, options);
+  return macSpecificKeys.some((key) => lowerCombination.includes(key));
 };
+const generateCrossPlatformCombination = (combination) => {
+  let crossPlatform = combination;
 
-const removeCustomMessage = (element, key) => {
-  const customConstraintValidation = element.__validationInterface__;
-  if (!customConstraintValidation) {
-    return;
+  if (isMac) {
+    // No need to convert anything TO Windows/Linux-specific format since we're on Mac
+    return null;
   }
-  customConstraintValidation.removeCustomMessage(key);
-};
-
-const useExecuteAction = (
-  elementRef,
-  {
-    errorEffect = "show_validation_message", // "show_validation_message" or "throw"
-    errorMapping,
-  } = {},
-) => {
-  // see https://medium.com/trabe/catching-asynchronous-errors-in-react-using-error-boundaries-5e8a5fd7b971
-  // and https://codepen.io/dmail/pen/XJJqeGp?editors=0010
-  // To change if https://github.com/preactjs/preact/issues/4754 lands
-  const [error, setError] = useState(null);
-  const resetErrorBoundary = useResetErrorBoundary();
-  useLayoutEffect(() => {
-    if (error) {
-      throw error;
-    }
-  }, [error]);
-
-  const validationMessageTargetRef = useRef(null);
-  const addErrorMessage = (error) => {
-    let calloutAnchor = validationMessageTargetRef.current;
-    let message;
-    if (errorMapping) {
-      const errorMappingResult = errorMapping(error);
-      if (typeof errorMappingResult === "string") {
-        message = errorMappingResult;
-      } else if (Error.isError(errorMappingResult)) {
-        message = errorMappingResult;
-      } else if (isValidElement(errorMappingResult)) {
-        message = errorMappingResult;
-      } else if (
-        typeof errorMappingResult === "object" &&
-        errorMappingResult !== null
-      ) {
-        message = errorMappingResult.message || error.message;
-        calloutAnchor = errorMappingResult.target || calloutAnchor;
+  // If not on Mac but combination contains Mac-specific keys, generate Windows equivalent
+  crossPlatform = crossPlatform.replace(/\bcommand\b/gi, "control");
+  crossPlatform = crossPlatform.replace(/\bcmd\b/gi, "control");
+
+  return crossPlatform;
+};
+const keyboardEventIsMatchingKeyCombination = (event, keyCombination) => {
+  const keys = keyCombination.toLowerCase().split("+");
+
+  for (const key of keys) {
+    let modifierFound = false;
+
+    // Check if this key is a modifier
+    for (const [eventProperty, config] of Object.entries(modifierKeyMapping)) {
+      const allNames = [...config.names];
+
+      // Add Mac-specific names only if we're on Mac and they exist
+      if (isMac && config.macNames) {
+        allNames.push(...config.macNames);
       }
-    } else {
-      message = error;
-    }
-    addCustomMessage(calloutAnchor, "action_error", message, {
-      status: "error",
-      // This error should not prevent <form> submission
-      // so whenever user tries to submit the form the error is cleared
-      // (Hitting enter key, clicking on submit button, etc. would allow to re-submit the form in error state)
-      removeOnRequestAction: true,
-    });
-  };
-  const removeErrorMessage = () => {
-    const validationMessageTarget = validationMessageTargetRef.current;
-    if (validationMessageTarget) {
-      removeCustomMessage(validationMessageTarget, "action_error");
-    }
-  };
 
-  useLayoutEffect(() => {
-    const element = elementRef.current;
-    if (!element) {
-      return null;
+      if (allNames.includes(key)) {
+        // Check if the corresponding event property is pressed
+        if (!event[eventProperty]) {
+          return false;
+        }
+        modifierFound = true;
+        break;
+      }
     }
-    const form = element.tagName === "FORM" ? element : element.form;
-    if (!form) {
-      return null;
+    if (modifierFound) {
+      continue;
     }
-    const onReset = () => {
-      removeErrorMessage();
-    };
-    form.addEventListener("reset", onReset);
-    return () => {
-      form.removeEventListener("reset", onReset);
-    };
-  });
 
-  // const errorEffectRef = useRef();
-  // errorEffectRef.current = errorEffect;
-  const executeAction = useCallback(
-    (actionEvent) => {
-      const { action, actionOrigin, requester, event, method } =
-        actionEvent.detail;
-      const sharedActionEventDetail = {
-        action,
-        actionOrigin,
-        requester,
-        event,
-        method,
-      };
+    // Check if it's a range pattern like "a-z" or "0-9"
+    if (key.includes("-") && key.length === 3) {
+      const [startChar, dash, endChar] = key;
+      if (dash === "-") {
+        // Only check ranges for single alphanumeric characters
+        const eventKey = event.key.toLowerCase();
+        if (eventKey.length !== 1) {
+          return false; // Not a single character key
+        }
 
-      const dispatchCustomEvent = (type, options) => {
-        const element = elementRef.current;
-        const customEvent = new CustomEvent(type, options);
-        element.dispatchEvent(customEvent);
-      };
-      if (resetErrorBoundary) {
-        resetErrorBoundary();
-      }
-      removeErrorMessage();
-      setError(null);
+        // Only allow a-z and 0-9 ranges
+        const isValidRange =
+          (startChar >= "a" && endChar <= "z") ||
+          (startChar >= "0" && endChar <= "9");
 
-      const validationMessageTarget = requester || elementRef.current;
-      validationMessageTargetRef.current = validationMessageTarget;
+        if (!isValidRange) {
+          return false; // Invalid range pattern
+        }
 
-      dispatchCustomEvent("actionstart", {
-        detail: sharedActionEventDetail,
-      });
+        const eventKeyCode = eventKey.charCodeAt(0);
+        const startCode = startChar.charCodeAt(0);
+        const endCode = endChar.charCodeAt(0);
 
-      return action[method]({
-        reason: `"${event.type}" event on ${(() => {
-          const target = event.target;
-          const tagName = target.tagName.toLowerCase();
+        if (eventKeyCode >= startCode && eventKeyCode <= endCode) {
+          continue; // Range matched
+        }
+        return false; // Range not matched
+      }
+    }
 
-          if (target.id) {
-            return `${tagName}#${target.id}`;
-          }
+    // If it's not a modifier or range, check if it matches the actual key
+    if (!isSameKey(event.key, key)) {
+      return false;
+    }
+  }
+  return true;
+};
+// Configuration for mapping shortcut key names to browser event properties
+const modifierKeyMapping = {
+  metaKey: {
+    names: ["meta"],
+    macNames: ["command", "cmd"],
+  },
+  ctrlKey: {
+    names: ["control", "ctrl"],
+  },
+  shiftKey: {
+    names: ["shift"],
+  },
+  altKey: {
+    names: ["alt"],
+    macNames: ["option"],
+  },
+};
+const isSameKey = (browserEventKey, key) => {
+  browserEventKey = browserEventKey.toLowerCase();
+  key = key.toLowerCase();
 
-          const uiName = target.getAttribute("data-ui-name");
-          if (uiName) {
-            return `${tagName}[data-ui-name="${uiName}"]`;
-          }
+  if (browserEventKey === key) {
+    return true;
+  }
 
-          return `<${tagName}>`;
-        })()}`,
-        onAbort: (reason) => {
-          if (
-            // at this stage the action side effect might have removed the <element> from the DOM
-            // (in theory no because action side effect are batched to happen after)
-            // but other side effects might do this
-            elementRef.current
-          ) {
-            dispatchCustomEvent("actionabort", {
-              detail: {
-                ...sharedActionEventDetail,
-                reason,
-              },
-            });
-          }
-        },
-        onError: (error) => {
-          if (
-            // at this stage the action side effect might have removed the <element> from the DOM
-            // (in theory no because action side effect are batched to happen after)
-            // but other side effects might do this
-            elementRef.current
-          ) {
-            dispatchCustomEvent("actionerror", {
-              detail: {
-                ...sharedActionEventDetail,
-                error,
-              },
-            });
-          }
-          if (errorEffect === "show_validation_message") {
-            addErrorMessage(error);
-          } else if (errorEffect === "throw") {
-            setError(error);
-          }
-        },
-        onComplete: (data) => {
-          if (
-            // at this stage the action side effect might have removed the <element> from the DOM
-            // (in theory no because action side effect are batched to happen after)
-            // but other side effects might do this
-            elementRef.current
-          ) {
-            dispatchCustomEvent("actionend", {
-              detail: {
-                ...sharedActionEventDetail,
-                data,
-              },
-            });
-          }
-        },
-      });
-    },
-    [errorEffect],
-  );
+  // Check if either key is an alias for the other
+  for (const [canonicalKey, config] of Object.entries(keyMapping)) {
+    const allKeys = [canonicalKey, ...config.alias];
+    if (allKeys.includes(browserEventKey) && allKeys.includes(key)) {
+      return true;
+    }
+  }
 
-  return executeAction;
+  return false;
 };
 
-const detectMac = () => {
-  // Modern way using User-Agent Client Hints API
-  if (window.navigator.userAgentData) {
-    return window.navigator.userAgentData.platform === "macOS";
+installImportMetaCssBuild(import.meta);const css$7 = /* css */`
+  .navi_text_aligner_anchor {
+    vertical-align: baseline;
+    user-select: none;
+    overflow: hidden;
   }
-  // Fallback to userAgent string parsing
-  return /Mac|iPhone|iPad|iPod/.test(window.navigator.userAgent);
-};
-const isMac = detectMac();
+`;
 
-// Maps canonical browser key names to their user-friendly aliases.
-// Used for both event matching and ARIA normalization.
-const keyMapping = {
-  " ": { alias: ["space"] },
-  "escape": { alias: ["esc"] },
-  "arrowup": { alias: ["up"] },
-  "arrowdown": { alias: ["down"] },
-  "arrowleft": { alias: ["left"] },
-  "arrowright": { alias: ["right"] },
-  "delete": { alias: ["del"] },
-  // Platform-specific mappings
-  ...(isMac
-    ? { delete: { alias: ["backspace"] } }
-    : { backspace: { alias: ["delete"] } }),
+/**
+ * Positions children vertically relative to the surrounding text, correcting for font-size differences.
+ *
+ * Place this component around any inline element whose font-size differs from the surrounding text.
+ * It renders an invisible anchor that inherits the surrounding text's font metrics, then shifts
+ * the child so that its visual position matches the requested `align` value — regardless of
+ * font-size, display type (inline, inline-block, inline-flex…), or the active `vertical-align`.
+ *
+ * @param {"center"|"baseline"|"start"|"end"} [align="baseline"]
+ *   - `"center"`   — child is vertically centered on the surrounding text's ink bounds
+ *   - `"baseline"` — no correction applied; child sits wherever the browser places it (default)
+ *   - `"start"`    — child top aligns with the surrounding text's ink top
+ *   - `"end"`      — child bottom aligns with the surrounding text's ink bottom
+ * @param {import("ignore:preact").RefObject} childRef — ref on the child element to reposition
+ */
+const SurroundingTextAligner = ({
+  children,
+  align = "baseline",
+  childRef,
+  textSize,
+  size
+}) => {
+  import.meta.css = [css$7, "@jsenv/navi/src/text/surrounding_text_aligner.jsx"];
+  const anchorRef = useRef();
+  useLayoutEffect(() => {
+    const anchorEl = anchorRef.current;
+    const childEl = childRef.current;
+    if (!anchorEl || !childEl) {
+      return;
+    }
+    const topOffset = computeTopOffset({
+      anchorEl,
+      childEl,
+      align
+    });
+    if (topOffset) {
+      childEl.style.position = "relative";
+      childEl.style.top = `${topOffset}px`;
+    } else {
+      childEl.style.position = "";
+      childEl.style.top = "";
+    }
+  }, [size, textSize]);
+  return jsxs(Fragment, {
+    children: [children, jsx("span", {
+      ref: anchorRef,
+      className: "navi_text_aligner_anchor",
+      children: "\u200B"
+    })]
+  });
 };
-
-const activeShortcutsSignal = signal([]);
-const shortcutsMap = new Map();
-
-const areShortcutsEqual = (shortcutA, shortcutB) => {
-  return (
-    shortcutA.key === shortcutB.key &&
-    shortcutA.description === shortcutB.description &&
-    shortcutA.enabled === shortcutB.enabled
-  );
+const computeTopOffset = ({
+  anchorEl,
+  childEl,
+  align
+}) => {
+  if (align === "baseline") {
+    return 0;
+  }
+  // Only correct when the anchor lives in an inline formatting context.
+  // If the parent is a flex/grid container, inline layout rules don't apply
+  // and our font-metrics model is invalid.
+  const parentDisplay = getComputedStyle(anchorEl.parentElement).display;
+  if (parentDisplay !== "inline" && parentDisplay !== "inline-block" && parentDisplay !== "block") {
+    return 0;
+  }
+  const anchorStyle = getComputedStyle(anchorEl);
+  const anchorMetrics = measureFontAscDesc("M", anchorStyle);
+  const [anchorABA, anchorABD] = anchorMetrics.actual;
+  const anchorActH = anchorABA + anchorABD;
+  const [, anchorFBBD] = anchorMetrics.font;
+
+  // Estimate the baseline Y from the anchor's bounding rect.
+  // For an inline span, the font cell bottom is always at the element's bottom edge
+  // (regardless of vertical-align), so baseline = rect.bottom - fontBoundingBoxDescent.
+  const anchorRect = anchorEl.getBoundingClientRect();
+  const baselineY = anchorRect.bottom - anchorFBBD;
+  const anchorInkTopY = baselineY - anchorABA;
+
+  // Measure the child's current rect, then subtract any previously applied top correction
+  // to recover its natural position — avoiding a style reset + reflow.
+  const childRect = childEl.getBoundingClientRect();
+  const childH = childRect.height;
+  const previousTop = parseFloat(childEl.style.top) || 0;
+  const childNaturalTop = childRect.top - previousTop;
+
+  // Compute desired child top Y based on align intention.
+  let desiredChildTopY = 0;
+  if (align === "center") {
+    const anchorInkCenterY = anchorInkTopY + anchorActH / 2;
+    desiredChildTopY = anchorInkCenterY - childH / 2;
+  } else if (align === "start") {
+    desiredChildTopY = anchorInkTopY;
+  } else if (align === "end") {
+    desiredChildTopY = anchorInkTopY + anchorActH - childH;
+  }
+  return desiredChildTopY - childNaturalTop;
+};
+const canvas = document.createElement("canvas");
+const measureFontAscDesc = (text, computedStyle) => {
+  const ctx = canvas.getContext("2d");
+  ctx.font = `${computedStyle.fontWeight} ${computedStyle.fontSize} ${computedStyle.fontFamily}`;
+  const metrics = ctx.measureText(text);
+  return {
+    actual: [metrics.actualBoundingBoxAscent, metrics.actualBoundingBoxDescent],
+    font: [metrics.fontBoundingBoxAscent, metrics.fontBoundingBoxDescent]
+  };
 };
 
-const areShortcutArraysEqual = (arrayA, arrayB) => {
-  if (arrayA.length !== arrayB.length) {
-    return false;
+const useInitialTextSelection = (ref, textSelection) => {
+  const deps = [];
+  if (Array.isArray(textSelection)) {
+    deps.push(...textSelection);
+  } else {
+    deps.push(textSelection);
   }
-
-  for (let i = 0; i < arrayA.length; i++) {
-    if (!areShortcutsEqual(arrayA[i], arrayB[i])) {
-      return false;
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || !textSelection) {
+      return;
     }
-  }
-
-  return true;
+    const range = document.createRange();
+    const selection = window.getSelection();
+    if (Array.isArray(textSelection)) {
+      if (textSelection.length === 2) {
+        const [start, end] = textSelection;
+        if (typeof start === "number" && typeof end === "number") {
+          // Format: [0, 10] - character indices
+          selectByCharacterIndices(el, range, start, end);
+        } else if (typeof start === "string" && typeof end === "string") {
+          // Format: ["Click on the", "button to return"] - text strings
+          selectByTextStrings(el, range, start, end);
+        }
+      }
+    } else if (typeof textSelection === "string") {
+      // Format: "some text" - select the entire string occurrence
+      selectSingleTextString(el, range, textSelection);
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }, deps);
 };
+const selectByCharacterIndices = (element, range, startIndex, endIndex) => {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+  let currentIndex = 0;
+  let startNode = null;
+  let startOffset = 0;
+  let endNode = null;
+  let endOffset = 0;
+  while (walker.nextNode()) {
+    const textContent = walker.currentNode.textContent;
+    const nodeLength = textContent.length;
 
-const updateActiveShortcuts = () => {
-  const activeElement = activeElementSignal.peek();
-  const currentActiveShortcuts = activeShortcutsSignal.peek();
-  const activeShortcuts = [];
-  for (const [element, { shortcuts }] of shortcutsMap) {
-    if (element === activeElement || element.contains(activeElement)) {
-      activeShortcuts.push(...shortcuts);
+    // Check if start position is in this text node
+    if (!startNode && currentIndex + nodeLength > startIndex) {
+      startNode = walker.currentNode;
+      startOffset = startIndex - currentIndex;
     }
-  }
 
-  // Only update if shortcuts have actually changed
-  if (!areShortcutArraysEqual(currentActiveShortcuts, activeShortcuts)) {
-    activeShortcutsSignal.value = activeShortcuts;
+    // 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);
   }
 };
-effect(() => {
-  // eslint-disable-next-line no-unused-expressions
-  activeElementSignal.value;
-  updateActiveShortcuts();
-});
-const addShortcuts = (element, shortcuts) => {
-  shortcutsMap.set(element, { shortcuts });
-  updateActiveShortcuts();
+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 removeShortcuts = (element) => {
-  shortcutsMap.delete(element);
-  updateActiveShortcuts();
+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);
+  }
 };
 
-const useKeyboardShortcuts = (
-  elementRef,
-  shortcuts,
-  {
-    onActionPrevented,
-    onActionStart,
-    onActionAbort,
-    onActionError,
-    onActionEnd,
-    allowConcurrentActions,
-  } = {},
-) => {
-  if (!elementRef) {
-    throw new Error(
-      "useKeyboardShortcuts requires an elementRef to attach shortcuts to.",
-    );
+installImportMetaCssBuild(import.meta);/* eslint-disable jsenv/no-unknown-params */
+const css$6 = /* css */`
+  @layer navi {
+    .navi_text {
+      &[data-skeleton] {
+        border-radius: 0.2em;
+      }
+    }
   }
 
-  const executeAction = useExecuteAction(elementRef);
-  const shortcutActionIsBusyRef = useRef(false);
-  useActionEvents(elementRef, {
-    actionOrigin: "keyboard_shortcut",
-    onPrevented: onActionPrevented,
-    onAction: (actionEvent) => {
-      const { shortcut } = actionEvent.detail.meta || {};
-      if (!shortcut) {
-        // not a shortcut (an other interaction triggered the action, don't request it again)
-        return;
+  *[data-navi-space] {
+  }
+
+  .navi_text {
+    position: relative;
+
+    /* There is a chrome specific bug that prevents text-transform: capitalize to be applied in nested DOM structure */
+    /* The CSS below ensure capitalize is propagated to the bold clones */
+    &[data-capitalize] {
+      &::first-letter {
+        text-transform: uppercase;
       }
-      // action can be a function or an action object, whem a function we must "wrap" it in a function returning that function
-      // otherwise setState would call that action immediately
-      // setAction(() => actionEvent.detail.action);
-      executeAction(actionEvent, {
-        requester: document.activeElement,
-      });
-    },
-    onStart: (e) => {
-      const { shortcut } = e.detail.meta || {};
-      if (!shortcut) {
-        return;
+      .navi_text_bold_clone::first-letter {
+        text-transform: uppercase;
       }
-      if (!allowConcurrentActions) {
-        shortcutActionIsBusyRef.current = true;
+      .navi_text_bold_foreground::first-letter {
+        text-transform: uppercase;
       }
-      shortcut.onStart?.(e);
-      onActionStart?.(e);
-    },
-    onAbort: (e) => {
-      const { shortcut } = e.detail.meta || {};
-      if (!shortcut) {
-        return;
+    }
+
+    .navi_text_bold_wrapper,
+    .navi_text_bold_clone,
+    .navi_text_bold_foreground {
+      display: inherit;
+      width: inherit;
+      min-width: inherit;
+      height: inherit;
+      min-height: inherit;
+      flex-grow: inherit;
+      align-items: inherit;
+      justify-content: inherit;
+      gap: inherit;
+      text-align: inherit;
+      border-radius: inherit;
+    }
+
+    &[data-text-overflow] {
+      min-width: 0;
+      flex-wrap: wrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      .navi_text_overflow_wrapper {
+        display: flex;
+        width: 100%;
+        flex-grow: 1;
+        gap: 0.3em;
+
+        .navi_text_overflow_text {
+          max-width: 100%;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+    }
+
+    &[data-skeleton] {
+      /* Children stay in the DOM to preserve natural layout dimensions,
+         but are hidden so only the skeleton is visible. */
+      visibility: hidden;
+
+      /* When there are no children a placeholder "W" is injected (see JSX).
+         It must stretch to the full available width so the skeleton
+         fills the container rather than collapsing to a single character. */
+      .navi_text_skeleton_children_placeholder {
+        display: inline-flex;
+        width: 100%;
+      }
+
+      /* Three-level structure to respect padding AND border-radius:
+
+         1. navi_text_skeleton_container — absolutely fills the border box
+            (inset:0), then applies padding:inherit so its content box equals
+            the parent's content box. line-height:normal prevents the container
+            from inheriting a large line-height that would make it taller than
+            the border box. border-radius:inherit passes the radius down.
+            visibility:visible overrides the parent's visibility:hidden.
+
+         2. navi_text_skeleton_inset — a relative block that fills 100% of the
+            container's content box (= parent's content box). It is the
+            positioned ancestor for the absolutely placed skeleton bar.
+            border-radius:inherit chains the radius further down.
+
+         3. navi_text_skeleton — the visible gradient bar. position:absolute
+            inset:0 fills the inset box precisely. border-radius:inherit
+            finally applies the radius at this level, which is now correctly
+            sized to the content area. */
+      .navi_text_skeleton_container {
+        position: absolute;
+        inset: 0;
+        padding: inherit;
+        line-height: normal;
+        border-radius: inherit;
+        visibility: visible;
       }
-      shortcutActionIsBusyRef.current = false;
-      shortcut.onAbort?.(e);
-      onActionAbort?.(e);
-    },
-    onError: (error, e) => {
-      const { shortcut } = e.detail.meta || {};
-      if (!shortcut) {
-        return;
+
+      .navi_text_skeleton_inset {
+        position: relative;
+        display: inline-flex;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
       }
-      shortcutActionIsBusyRef.current = false;
-      shortcut.onError?.(error, e);
-      onActionError?.(error, e);
-    },
-    onEnd: (e) => {
-      const { shortcut } = e.detail.meta || {};
-      if (!shortcut) {
-        return;
+
+      .navi_text_skeleton {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+          90deg,
+          #e0e0e0 25%,
+          #f0f0f0 50%,
+          #e0e0e0 75%
+        );
+        background-size: 200% 100%;
+        border-radius: inherit;
       }
-      shortcutActionIsBusyRef.current = false;
-      shortcut.onEnd?.(e);
-      onActionEnd?.(e);
-    },
-  });
 
-  const shortcutDeps = [];
-  for (const shortcut of shortcuts) {
-    shortcutDeps.push(
-      shortcut.key,
-      shortcut.description,
-      shortcut.enabled,
-      shortcut.confirmMessage,
-    );
-    shortcut.action = useAction(shortcut.action);
+      &[data-loading] {
+        .navi_text_skeleton {
+          animation: navi_text_skeleton_shimmer 1.5s infinite;
+        }
+      }
+    }
   }
 
-  useEffect(() => {
-    const element = elementRef.current;
-    if (!element) {
-      return null;
+  @keyframes navi_text_skeleton_shimmer {
+    0% {
+      background-position: 200% 0;
     }
-    const shortcutsCopy = [];
-    for (const shortcutCandidate of shortcuts) {
-      shortcutsCopy.push({
-        ...shortcutCandidate,
-        handler: (keyboardEvent) => {
-          if (shortcutCandidate.handler) {
-            return shortcutCandidate.handler(keyboardEvent);
-          }
-          if (shortcutActionIsBusyRef.current) {
-            return false;
-          }
-          const { action } = shortcutCandidate;
-          const actionWithEvent = action.bindParams(keyboardEvent);
-          return requestAction(element, actionWithEvent, {
-            actionOrigin: "keyboard_shortcut",
-            event: keyboardEvent,
-            requester: document.activeElement,
-            confirmMessage: shortcutCandidate.confirmMessage,
-            meta: {
-              shortcut: shortcutCandidate,
-            },
-          });
-        },
-      });
+    100% {
+      background-position: -200% 0;
     }
+  }
 
-    addShortcuts(element, shortcuts);
+  .navi_text_bold_wrapper {
+    position: relative;
+    display: inline-block;
 
-    const onKeydown = (event) => {
-      applyKeyboardShortcuts(shortcutsCopy, event);
-    };
-    element.addEventListener("keydown", onKeydown);
-    return () => {
-      element.removeEventListener("keydown", onKeydown);
-      removeShortcuts(element);
-    };
-  }, [shortcutDeps]);
-};
+    .navi_text_bold_clone {
+      font-weight: bold;
+      opacity: 0;
+    }
+    .navi_text_bold_foreground {
+      position: absolute;
+      inset: 0;
+    }
+  }
 
-const applyKeyboardShortcuts = (shortcuts, keyboardEvent) => {
-  if (!canInterceptKeys(keyboardEvent)) {
-    return null;
+  .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;
   }
-  for (const shortcutCandidate of shortcuts) {
-    let { enabled = true, key } = shortcutCandidate;
-    if (!enabled) {
-      continue;
-    }
 
-    if (typeof key === "function") {
-      const keyReturnValue = key(keyboardEvent);
-      if (!keyReturnValue) {
-        continue;
-      }
-      key = keyReturnValue;
+  .navi_text[data-bold] {
+    .navi_text_bold_background {
+      opacity: 1;
     }
-    if (!key) {
-      console.error(shortcutCandidate);
-      throw new TypeError(`key is required in keyboard shortcut, got ${key}`);
+  }
+
+  .navi_text[data-bold-transition] {
+    .navi_text_bold_foreground {
+      transition-property: font-weight;
+      transition-duration: 0.3s;
+      transition-timing-function: ease;
     }
 
-    // Handle platform-specific combination objects
-    let actualCombination;
-    let crossPlatformCombination;
-    if (typeof key === "object" && key !== null) {
-      actualCombination = isMac ? key.mac : key.other;
+    .navi_text_bold_background {
+      transition-property: opacity;
+      transition-duration: 0.3s;
+      transition-timing-function: ease;
+    }
+  }
+`;
+const REGULAR_SPACE = jsx("span", {
+  "data-navi-space": "",
+  children: " "
+});
+// A space that uses padding-left instead of a real space character.
+// This avoids the underline that browsers draw under spaces inside links.
+const FAKE_SPACE = jsx("span", {
+  "data-navi-space": "",
+  style: "padding-left: 0.25em",
+  children: "\u200B"
+});
+const CustomWidthSpace = ({
+  value,
+  useRealSpaceChar
+}) => {
+  if (useRealSpaceChar) {
+    return jsxs("span", {
+      children: [jsx("span", {
+        style: "font-size: 0",
+        children: " "
+      }), jsx("span", {
+        style: `padding-left: ${value}`,
+        children: "\u200B"
+      })]
+    });
+  }
+  return jsx("span", {
+    style: `padding-left: ${value}`,
+    children: "\u200B"
+  });
+};
+const applySpacingOnTextChildren = (children, spacing, defaultSpace) => {
+  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;
+  }
+  const useRealSpaceChar = defaultSpace !== FAKE_SPACE;
+  let separator;
+  if (spacing === REGULAR_SPACE || spacing === FAKE_SPACE) {
+    separator = defaultSpace;
+  } else if (typeof spacing === "string") {
+    if (isSizeSpacingScaleKey(spacing) || hasCSSSizeUnit(spacing)) {
+      separator = jsx(CustomWidthSpace, {
+        value: resolveSpacingSize(spacing),
+        useRealSpaceChar: useRealSpaceChar
+      });
     } else {
-      actualCombination = key;
-      if (containsPlatformSpecificKeys(key)) {
-        crossPlatformCombination = generateCrossPlatformCombination(key);
-      }
+      separator = spacing;
     }
-
-    // Check both the actual combination and cross-platform combination
-    const matchesActual =
-      actualCombination &&
-      keyboardEventIsMatchingKeyCombination(keyboardEvent, actualCombination);
-    const matchesCrossPlatform =
-      crossPlatformCombination &&
-      crossPlatformCombination !== actualCombination &&
-      keyboardEventIsMatchingKeyCombination(
-        keyboardEvent,
-        crossPlatformCombination,
-      );
-
-    if (!matchesActual && !matchesCrossPlatform) {
-      continue;
+  } else if (typeof spacing === "number") {
+    separator = jsx(CustomWidthSpace, {
+      value: `${spacing}px`,
+      useRealSpaceChar: useRealSpaceChar
+    });
+  } else {
+    separator = spacing;
+  }
+  const childrenWithGap = [];
+  let i = 0;
+  while (true) {
+    const child = childArray[i];
+    childrenWithGap.push(child);
+    i++;
+    if (i === childCount) {
+      break;
     }
-    if (typeof enabled === "function" && !enabled(keyboardEvent)) {
+    const currentChild = childArray[i - 1];
+    const nextChild = childArray[i];
+    if (!shouldInjectSpacingBetween(currentChild, nextChild)) {
       continue;
     }
-    const returnValue = shortcutCandidate.handler(keyboardEvent);
-    if (returnValue) {
-      keyboardEvent.preventDefault();
-    }
-    return shortcutCandidate;
+    childrenWithGap.push(separator);
   }
-  return null;
+  return childrenWithGap;
 };
-const containsPlatformSpecificKeys = (combination) => {
-  const lowerCombination = combination.toLowerCase();
-  const macSpecificKeys = ["command", "cmd"];
-
-  return macSpecificKeys.some((key) => lowerCombination.includes(key));
+const outsideTextFlowSet = new Set();
+const markAsOutsideTextFlow = jsxElement => {
+  outsideTextFlowSet.add(jsxElement);
 };
-const generateCrossPlatformCombination = (combination) => {
-  let crossPlatform = combination;
+const isMarkedAsOutsideTextFlow = jsxElement => {
+  return outsideTextFlowSet.has(jsxElement.type);
+};
+const isPreactNode = jsxChild => {
+  return jsxChild !== null && typeof jsxChild === "object" && jsxChild.type !== undefined;
+};
+const shouldInjectSpacingBetween = (left, right) => {
+  const leftIsNode = isPreactNode(left);
+  const rightIsNode = isPreactNode(right);
+  // only inject spacing when at least one side is a preact node
+  if (!leftIsNode && !rightIsNode) {
+    return false;
+  }
+  if (leftIsNode && isMarkedAsOutsideTextFlow(left)) {
+    return false;
+  }
+  if (rightIsNode && isMarkedAsOutsideTextFlow(right)) {
+    return false;
+  }
+  if (rightIsNode && right.props && right.props.overflowPinned) {
+    return false;
+  }
+  if (typeof left === "string" && /\s$/.test(left)) {
+    return false;
+  }
+  if (typeof right === "string" && /^\s/.test(right)) {
+    return false;
+  }
+  return true;
+};
+const OverflowPinnedElementContext = createContext(null);
+const Text = props => {
+  import.meta.css = [css$6, "@jsenv/navi/src/text/text.jsx"];
+  if (props.loading || props.skeleton) {
+    return jsx(TextSkeleton, {
+      ...props
+    });
+  }
+  if (props.overflowEllipsis) {
+    return jsx(TextOverflow, {
+      ...props
+    });
+  }
+  if (props.overflowPinned) {
+    return jsx(TextOverflowPinned, {
+      ...props
+    });
+  }
+  if (props.selectRange) {
+    return jsx(TextWithSelectRange, {
+      ...props
+    });
+  }
+  return jsx(TextBasic, {
+    ...props
+  });
+};
+const TextSkeleton = ({
+  loading,
+  children,
+  ...props
+}) => {
+  // Three-level structure — see CSS comment on [data-skeleton] for details.
+  const skeletonOverlay = jsx("span", {
+    className: "navi_text_skeleton_container",
+    "aria-hidden": "true",
+    children: jsx("span", {
+      className: "navi_text_skeleton_inset",
+      children: jsx("span", {
+        className: "navi_text_skeleton"
+      })
+    })
+  });
+  // When there are no children, inject a full-width placeholder so the element
+  // has measurable height driven by the current font-size/line-height, and the
+  // skeleton fills the available width instead of shrinking to a single char.
+  const hasChildren = children !== null && children !== undefined && children !== false;
+  const innerChildren = hasChildren ? children : jsx("span", {
+    className: "navi_text_skeleton_children_placeholder",
+    "aria-hidden": "true",
+    children: "W"
+  });
+  return jsx(Text, {
+    "data-skeleton": "",
+    "data-loading": loading ? "" : undefined,
+    ...props,
+    skeleton: undefined,
+    childrenOutsideFlow: skeletonOverlay,
+    children: innerChildren
+  });
+};
+const TextOverflow = ({
+  noWrap,
+  spacing,
+  children,
+  ...rest
+}) => {
+  const [OverflowPinnedElement, setOverflowPinnedElement] = useState(null);
+  return jsx(Text, {
+    flex: true,
+    block: true,
+    as: "div",
+    nowWrap: noWrap,
+    pre: !noWrap
+    // For paragraph we prefer to keep lines and only hide unbreakable long sections
+    ,
 
-  if (isMac) {
-    // No need to convert anything TO Windows/Linux-specific format since we're on Mac
+    preLine: rest.as === "p",
+    ...rest,
+    overflowEllipsis: undefined,
+    "data-text-overflow": "",
+    spacing: "pre",
+    children: jsxs("span", {
+      className: "navi_text_overflow_wrapper",
+      children: [jsx(OverflowPinnedElementContext.Provider, {
+        value: setOverflowPinnedElement,
+        children: jsx(Text, {
+          className: "navi_text_overflow_text",
+          spacing: spacing,
+          children: children
+        })
+      }), OverflowPinnedElement]
+    })
+  });
+};
+const TextOverflowPinned = ({
+  overflowPinned,
+  ...props
+}) => {
+  const setOverflowPinnedElement = useContext(OverflowPinnedElementContext);
+  const text = jsx(Text, {
+    ...props,
+    "data-overflow-pinned": ""
+  });
+  if (!setOverflowPinnedElement) {
+    console.warn("<Text overflowPinned> declared outside a <Text overflowEllipsis>");
+    return text;
+  }
+  if (overflowPinned) {
+    setOverflowPinnedElement(text);
     return null;
   }
-  // If not on Mac but combination contains Mac-specific keys, generate Windows equivalent
-  crossPlatform = crossPlatform.replace(/\bcommand\b/gi, "control");
-  crossPlatform = crossPlatform.replace(/\bcmd\b/gi, "control");
-
-  return crossPlatform;
+  setOverflowPinnedElement(null);
+  return text;
 };
-const keyboardEventIsMatchingKeyCombination = (event, keyCombination) => {
-  const keys = keyCombination.toLowerCase().split("+");
-
-  for (const key of keys) {
-    let modifierFound = false;
-
-    // Check if this key is a modifier
-    for (const [eventProperty, config] of Object.entries(modifierKeyMapping)) {
-      const allNames = [...config.names];
+const TextWithSelectRange = ({
+  selectRange,
+  ...props
+}) => {
+  const defaultRef = useRef();
+  const ref = props.ref || defaultRef;
+  useInitialTextSelection(ref, selectRange);
+  return jsx(Text, {
+    ref: ref,
+    ...props
+  });
+};
+const TextBasic = ({
+  spacing,
+  preventSpaceUnderlines = false,
+  boldTransition,
+  boldStable,
+  preventBoldLayoutShift = boldTransition,
+  capitalize,
+  children,
+  childrenOutsideFlow,
+  ...rest
+}) => {
+  const defaultSpace = preventSpaceUnderlines ? FAKE_SPACE : REGULAR_SPACE;
+  const resolvedSpacing = spacing ?? defaultSpace;
+  const boxProps = {
+    "as": "span",
+    "data-bold-transition": boldTransition ? "" : undefined,
+    "data-capitalize": capitalize ? "" : undefined,
+    ...rest,
+    "baseClassName": withPropsClassName("navi_text", rest.baseClassName)
+  };
+  const shouldPreserveSpacing = rest.as === "pre" || rest.flex || rest.grid;
+  if (shouldPreserveSpacing) {
+    boxProps.spacing = resolvedSpacing;
+  } else {
+    children = applySpacingOnTextChildren(children, resolvedSpacing, defaultSpace);
+  }
+  if (boldStable) {
+    const {
+      bold
+    } = boxProps;
+    return jsxs(Box, {
+      ...boxProps,
+      bold: undefined,
+      "data-bold": bold ? "" : undefined,
+      children: [jsx("span", {
+        className: "navi_text_bold_background",
+        "aria-hidden": "true",
+        children: children
+      }), children, childrenOutsideFlow]
+    });
+  }
+  if (preventBoldLayoutShift) {
+    const alignX = rest.alignX || rest.align || "start";
 
-      // Add Mac-specific names only if we're on Mac and they exist
-      if (isMac && config.macNames) {
-        allNames.push(...config.macNames);
-      }
+    // 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 seule ligne de texte (donc lorsque noWrap est actif)
+    // on pourrait auto-active cela sur une prop genre boldCanChange
+    return jsxs(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
+        })]
+      }), childrenOutsideFlow]
+    });
+  }
+  return jsxs(Box, {
+    ...boxProps,
+    children: [children, childrenOutsideFlow]
+  });
+};
 
-      if (allNames.includes(key)) {
-        // Check if the corresponding event property is pressed
-        if (!event[eventProperty]) {
-          return false;
-        }
-        modifierFound = true;
-        break;
-      }
-    }
-    if (modifierFound) {
-      continue;
+installImportMetaCssBuild(import.meta);const css$5 = /* css */`
+  @layer navi {
+    /* Ensure data attributes from box.jsx can win to update display */
+    .navi_icon {
+      display: inline-block;
+      box-sizing: border-box;
+      max-width: 100%;
+      max-height: 100%;
     }
+  }
 
-    // Check if it's a range pattern like "a-z" or "0-9"
-    if (key.includes("-") && key.length === 3) {
-      const [startChar, dash, endChar] = key;
-      if (dash === "-") {
-        // Only check ranges for single alphanumeric characters
-        const eventKey = event.key.toLowerCase();
-        if (eventKey.length !== 1) {
-          return false; // Not a single character key
-        }
-
-        // Only allow a-z and 0-9 ranges
-        const isValidRange =
-          (startChar >= "a" && endChar <= "z") ||
-          (startChar >= "0" && endChar <= "9");
-
-        if (!isValidRange) {
-          return false; // Invalid range pattern
-        }
+  .navi_icon {
+    white-space: nowrap;
+    vertical-align: inherit;
 
-        const eventKeyCode = eventKey.charCodeAt(0);
-        const startCode = startChar.charCodeAt(0);
-        const endCode = endChar.charCodeAt(0);
+    &[data-flow-inline] {
+      width: 1em;
+      height: 1em;
+    }
+    &[data-icon-char] {
+      flex-grow: 0 !important;
 
-        if (eventKeyCode >= startCode && eventKeyCode <= endCode) {
-          continue; // Range matched
-        }
-        return false; // Range not matched
+      svg,
+      img {
+        width: 100%;
+        height: 100%;
+      }
+      svg {
+        overflow: visible;
       }
     }
-
-    // If it's not a modifier or range, check if it matches the actual key
-    if (!isSameKey(event.key, key)) {
-      return false;
+    &[data-interactive] {
+      cursor: pointer;
     }
   }
-  return true;
-};
-// Configuration for mapping shortcut key names to browser event properties
-const modifierKeyMapping = {
-  metaKey: {
-    names: ["meta"],
-    macNames: ["command", "cmd"],
-  },
-  ctrlKey: {
-    names: ["control", "ctrl"],
-  },
-  shiftKey: {
-    names: ["shift"],
-  },
-  altKey: {
-    names: ["alt"],
-    macNames: ["option"],
-  },
-};
-const isSameKey = (browserEventKey, key) => {
-  browserEventKey = browserEventKey.toLowerCase();
-  key = key.toLowerCase();
 
-  if (browserEventKey === key) {
-    return true;
+  .navi_icon_char_slot {
+    opacity: 0;
+    cursor: default;
+    user-select: none;
   }
+  .navi_text.navi_icon_foreground {
+    position: absolute;
+    inset: 0;
+    display: inline-flex;
 
-  // Check if either key is an alias for the other
-  for (const [canonicalKey, config] of Object.entries(keyMapping)) {
-    const allKeys = [canonicalKey, ...config.alias];
-    if (allKeys.includes(browserEventKey) && allKeys.includes(key)) {
-      return true;
+    & > .navi_text {
+      display: flex;
+      aspect-ratio: 1 / 1;
+      min-width: 0;
+      height: 100%;
+      max-height: 1em;
+      align-items: center;
+      justify-content: center;
     }
   }
 
-  return false;
+  .navi_icon > svg,
+  .navi_icon > img {
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+  }
+  .navi_icon[data-width-fixed] > svg,
+  .navi_icon[data-width-fixed] > img {
+    width: 100%;
+    height: auto;
+  }
+  .navi_icon[data-height-fixed] > svg,
+  .navi_icon[data-height-fixed] > img {
+    width: auto;
+    height: 100%;
+  }
+  .navi_icon[data-width-fixed][data-height-fixed] > svg,
+  .navi_icon[data-width-fixed][data-height-fixed] > img {
+    width: 100%;
+    height: 100%;
+  }
+`;
+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
+}) => {
+  import.meta.css = [css$5, "@jsenv/navi/src/text/icon.jsx"];
+  const innerChildren = href ? jsx("svg", {
+    width: "100%",
+    height: "100%",
+    children: jsx("use", {
+      href: href
+    })
+  }) : children;
+  let {
+    flex,
+    grid,
+    width,
+    height
+  } = props;
+  if (width === "auto") {
+    width = undefined;
+  }
+  if (height === "auto") {
+    height = undefined;
+  }
+  const hasExplicitWidth = width !== undefined;
+  const hasExplicitHeight = height !== undefined;
+  const widthFixed = hasExplicitWidth || hasExplicitHeight && (props.square || props.circle || props.aspectRatio);
+  const heightFixed = hasExplicitHeight || hasExplicitWidth && (props.square || props.circle || props.aspectRatio);
+  if (widthFixed || heightFixed) {
+    if (flex === undefined) {
+      flex = "x";
+    }
+  } else if (decorative === undefined && !onClick) {
+    decorative = true;
+  }
+  const ariaProps = decorative ? {
+    "aria-hidden": "true"
+  } : {};
+  const textRef = useRef();
+  if (typeof children === "string") {
+    return jsx(Text, {
+      ...props,
+      ...ariaProps,
+      "data-icon-text": "",
+      children: children
+    });
+  }
+  if (flex || grid) {
+    return jsx(Box, {
+      square: true,
+      ...props,
+      ...ariaProps,
+      flex: flex,
+      baseClassName: "navi_icon",
+      "data-width-fixed": widthFixed ? "" : undefined,
+      "data-height-fixed": heightFixed ? "" : undefined,
+      "data-interactive": onClick ? "" : undefined,
+      onClick: onClick,
+      children: innerChildren
+    });
+  }
+  const invisibleText = baseChar.repeat(charWidth);
+  return jsx(SurroundingTextAligner, {
+    align: "center",
+    childRef: textRef,
+    size: props.size,
+    textSize: props.textSize,
+    children: jsxs(Text, {
+      ...props,
+      ...ariaProps,
+      className: withPropsClassName("navi_icon", props.className),
+      spacing: "pre",
+      "data-icon-char": "",
+      "data-width-fixed": widthFixed ? "" : undefined,
+      "data-height-fixed": heightFixed ? "" : undefined,
+      "data-interactive": onClick ? "" : undefined,
+      onClick: onClick,
+      ref: textRef,
+      children: [jsx("span", {
+        className: "navi_icon_char_slot",
+        "aria-hidden": "true",
+        children: invisibleText
+      }), jsx(Text, {
+        className: "navi_icon_foreground",
+        spacing: "pre",
+        children: innerChildren
+      })]
+    })
+  });
 };
 
 const useFormEvents = (
@@ -21287,7 +21429,7 @@ const useUIState = (uiStateController) => {
   return trackedUIState;
 };
 
-installImportMetaCssBuild(import.meta);import.meta.css = [/* css */`
+installImportMetaCssBuild(import.meta);const css$4 = /* css */`
   @layer navi {
     .navi_button {
       --button-outline-width: 1px;
@@ -21413,6 +21555,7 @@ installImportMetaCssBuild(import.meta);import.meta.css = [/* css */`
       align-items: inherit;
       justify-content: inherit;
       color: var(--x-button-color);
+      vertical-align: inherit;
       background: var(--x-button-background);
       background-color: var(
         --x-button-background-color,
@@ -21536,8 +21679,9 @@ installImportMetaCssBuild(import.meta);import.meta.css = [/* css */`
       --x-button-border-color: var(--callout-color);
     }
   }
-`, "@jsenv/navi/src/field/button.jsx"];
+`;
 const Button = props => {
+  import.meta.css = [css$4, "@jsenv/navi/src/field/button.jsx"];
   return renderActionableComponent(props, {
     Basic: ButtonBasic,
     WithAction: ButtonWithAction,
@@ -21595,6 +21739,7 @@ const ButtonBasic = props => {
     icon,
     revealOnInteraction = icon,
     discrete = icon && !revealOnInteraction,
+    spacing,
     children,
     ...rest
   } = props;
@@ -21608,11 +21753,12 @@ const ButtonBasic = props => {
   const renderButtonContent = buttonProps => {
     return jsxs(Text, {
       ...buttonProps,
+      spacing: spacing,
       className: "navi_button_content",
       children: [children, jsx(ButtonShadow, {})]
     });
   };
-  const renderButtonContentMemoized = useCallback(renderButtonContent, [children]);
+  const renderButtonContentMemoized = useCallback(renderButtonContent, [children, spacing]);
   return jsxs(Box, {
     "data-readonly-silent": innerLoading ? "" : undefined,
     ...remainingProps,
@@ -22100,7 +22246,7 @@ const useDimColorWhen = (elementRef, shouldDim) => {
 };
 
 installImportMetaCssBuild(import.meta);/* eslint-disable jsenv/no-unknown-params */
-import.meta.css = [/* css */`
+const css$3 = /* css */`
   @layer navi {
     .navi_link {
       --link-border-radius: unset;
@@ -22372,7 +22518,7 @@ import.meta.css = [/* css */`
   .navi_title .navi_link[data-reveal-on-interaction] {
     top: 0.25em;
   }
-`, "@jsenv/navi/src/nav/link/link.jsx"];
+`;
 const LinkStyleCSSVars = {
   "outlineColor": "--link-outline-color",
   "borderRadius": "--link-border-radius",
@@ -22421,6 +22567,7 @@ Object.assign(PSEUDO_CLASSES, {
   }
 });
 const Link = props => {
+  import.meta.css = [css$3, "@jsenv/navi/src/nav/link/link.jsx"];
   return renderActionableComponent(props, {
     Basic: LinkBasic,
     WithAction: LinkWithAction
@@ -22569,6 +22716,7 @@ const LinkPlain = props => {
       e.detail.setValue(value);
     },
     preventBoldLayoutShift: currentEffectBold,
+    preventSpaceUnderlines: true,
     overflowEllipsis: overflowEllipsis
     // Visual
     ,
@@ -30403,6 +30551,8 @@ installImportMetaCssBuild(import.meta);const css = /* css */`
   @layer navi {
   }
   .navi_text.navi_badge_count {
+    /* Important to prevent anchor from breaking to a new line */
+    white-space: nowrap;
     --font-size: 0.7em;
     --x-background: var(--background);
     --x-background-color: var(--background-color, var(--x-background));
@@ -30411,9 +30561,9 @@ installImportMetaCssBuild(import.meta);const css = /* css */`
     --padding-x: 0.5em;
     --padding-y: 0.2em;
     position: relative;
-    display: inline-block;
     color: var(--x-color);
     font-size: var(--font-size);
+    vertical-align: inherit;
 
     &[data-dark-background] {
       --x-color-contrasting: var(--navi-color-white);
@@ -30443,11 +30593,12 @@ installImportMetaCssBuild(import.meta);const css = /* css */`
 
       /* For ellipse + single char force the circle aspect as it's prettier */
       &[data-single-char] {
+        display: inline-block;
         aspect-ratio: 1/1;
-        height: 1.5em;
+        height: 1.6em;
         padding: 0;
         text-align: center;
-        line-height: 1.5em;
+        line-height: 1.6em;
       }
     }
 
@@ -30467,19 +30618,19 @@ installImportMetaCssBuild(import.meta);const css = /* css */`
       border-radius: 50%;
 
       &[data-single-char] {
-        --x-radius: 1.5em;
+        --x-radius: 1.6em;
         --x-number-font-size: unset;
       }
       &[data-two-chars] {
-        --x-radius: 1.8em;
-        --x-number-font-size: 0.9em;
+        --x-radius: 2em;
+        --x-number-font-size: unset;
       }
       &[data-three-chars] {
         --x-radius: 2.4em;
         --x-number-font-size: 0.8em;
       }
       &[data-four-chars] {
-        --x-radius: 2.6em;
+        --x-radius: 2.4em;
         --x-number-font-size: 0.8em;
       }
 
@@ -30513,6 +30664,7 @@ const BadgeCount = ({
   // so that visually the interface do not suddently switch from circle to ellipse depending on the count
   circle,
   max = circle ? MAX_FOR_CIRCLE : Infinity,
+  textSize,
   integer,
   lang,
   loading,
@@ -30538,25 +30690,37 @@ const BadgeCount = ({
     circle = false;
   }
   if (circle) {
-    return jsxs(BadgeCountCircle, {
-      ...props,
-      loading: loading,
-      ref: ref,
-      hasOverflow: hasOverflow,
-      charCount: charCount,
-      children: [valueDisplayed, hasOverflow && maxElement]
+    return jsx(SurroundingTextAligner, {
+      align: "center",
+      childRef: ref,
+      size: props.size,
+      textSize: textSize,
+      children: jsxs(BadgeCountCircle, {
+        ...props,
+        loading: loading,
+        ref: ref,
+        hasOverflow: hasOverflow,
+        charCount: charCount,
+        children: [valueDisplayed, hasOverflow && maxElement]
+      })
     });
   }
   const valueFormatted = typeof valueDisplayed === "number" ? formatNumber(valueDisplayed, {
     lang
   }) : valueDisplayed;
-  return jsxs(BadgeCountEllipse, {
-    ...props,
-    loading: loading,
-    ref: ref,
-    hasOverflow: hasOverflow,
-    charCount: charCount,
-    children: [valueFormatted, hasOverflow && maxElement]
+  return jsx(SurroundingTextAligner, {
+    align: "center",
+    childRef: ref,
+    size: props.size,
+    textSize: textSize,
+    children: jsxs(BadgeCountEllipse, {
+      ...props,
+      loading: loading,
+      ref: ref,
+      hasOverflow: hasOverflow,
+      charCount: charCount,
+      children: [valueFormatted, hasOverflow && maxElement]
+    })
   });
 };
 const applyMaxToValue = (max, value) => {
@@ -30597,14 +30761,8 @@ const BadgeCountEllipse = ({
     spacing: "pre",
     children: loading ? jsx(Icon, {
       children: jsx(LoadingDots, {})
-    }) : jsxs(Fragment, {
-      children: [jsx("span", {
-        style: "user-select: none",
-        children: "\u200B"
-      }), children, jsx("span", {
-        style: "user-select: none",
-        children: "\u200B"
-      })]
+    }) : jsx(Fragment, {
+      children: children
     })
   });
 };
@@ -30633,17 +30791,11 @@ const BadgeCountCircle = ({
     spacing: "pre",
     children: loading ? jsx(Icon, {
       children: jsx(LoadingDots, {})
-    }) : jsxs(Fragment, {
-      children: [jsx("span", {
-        style: "user-select: none",
-        children: "\u200B"
-      }), jsx("span", {
+    }) : jsx(Fragment, {
+      children: jsx("span", {
         className: "navi_badge_count_text",
         children: children
-      }), jsx("span", {
-        style: "user-select: none",
-        children: "\u200B"
-      })]
+      })
     })
   });
 };