@jsenv/navi 0.0.1

package/src/components/loader/network_speed.js

@@ -0,0 +1,83 @@
+import { signal } from "@preact/signals";
+
+export const useNetworkSpeed = () => {
+  return networkSpeedSignal.value;
+};
+
+const connection =
+  window.navigator.connection ||
+  window.navigator.mozConnection ||
+  window.navigator.webkitConnection;
+
+const getNetworkSpeed = () => {
+  // ✅ Network Information API (support moderne)
+  if (!connection) {
+    return "3g";
+  }
+  if (connection) {
+    const effectiveType = connection.effectiveType;
+    if (effectiveType) {
+      return effectiveType; // "slow-2g", "2g", "3g", "4g", "5g"
+    }
+    const downlink = connection.downlink;
+    if (downlink) {
+      // downlink is in Mbps
+      if (downlink < 1) return "slow-2g"; // < 1 Mbps
+      if (downlink < 2.5) return "2g"; // 1-2.5 Mbps
+      if (downlink < 10) return "3g"; // 2.5-10 Mbps
+      return "4g"; // > 10 Mbps
+    }
+  }
+  return "3g";
+};
+
+const updateNetworkSpeed = () => {
+  networkSpeedSignal.value = getNetworkSpeed();
+};
+
+export const networkSpeedSignal = signal(getNetworkSpeed());
+
+const setupNetworkMonitoring = () => {
+  const cleanupFunctions = [];
+
+  // ✅ 1. Écouter les changements natifs
+
+  if (connection) {
+    connection.addEventListener("change", updateNetworkSpeed);
+    cleanupFunctions.push(() => {
+      connection.removeEventListener("change", updateNetworkSpeed);
+    });
+  }
+
+  // ✅ 2. Polling de backup (toutes les 60 secondes)
+  const pollInterval = setInterval(updateNetworkSpeed, 60000);
+  cleanupFunctions.push(() => clearInterval(pollInterval));
+
+  // ✅ 3. Vérifier lors de la reprise d'activité
+  const handleVisibilityChange = () => {
+    if (!document.hidden) {
+      updateNetworkSpeed();
+    }
+  };
+
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+  cleanupFunctions.push(() => {
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+  });
+
+  // ✅ 4. Vérifier lors de la reprise de connexion
+  const handleOnline = () => {
+    updateNetworkSpeed();
+  };
+
+  window.addEventListener("online", handleOnline);
+  cleanupFunctions.push(() => {
+    window.removeEventListener("online", handleOnline);
+  });
+
+  // Cleanup global
+  return () => {
+    cleanupFunctions.forEach((cleanup) => cleanup());
+  };
+};
+setupNetworkMonitoring();

package/src/components/loader/rectangle_loading.jsx

@@ -0,0 +1,225 @@
+/**
+ * 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 { useLayoutEffect, useRef, useState } from "preact/hooks";
+import { useNetworkSpeed } from "./network_speed.js";
+
+export const RectangleLoading = ({
+  color = "currentColor",
+  radius = 0,
+  size = 2,
+}) => {
+  const containerRef = useRef(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    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(() => {
+        for (const entry of entries) {
+          const { width, height } = entry.contentRect;
+          setDimensions({ width, height });
+        }
+      });
+    });
+
+    resizeObserver.observe(container);
+
+    // Initial measurement
+    setDimensions({
+      width: container.offsetWidth,
+      height: container.offsetHeight,
+    });
+
+    return () => {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <div name="rectangle_loading" ref={containerRef}>
+      {dimensions.width > 0 && dimensions.height > 0 && (
+        <RectangleLoadingSvg
+          radius={radius}
+          color={color}
+          width={dimensions.width}
+          height={dimensions.height}
+          strokeWidth={size}
+        />
+      )}
+    </div>
+  );
+};
+
+const RectangleLoadingSvg = ({
+  width,
+  height,
+  color,
+  radius,
+  trailColor = "transparent",
+  strokeWidth,
+}) => {
+  const margin = Math.max(2, Math.min(width, height) * 0.03);
+
+  // Calculate the drawable area
+  const drawableWidth = width - margin * 2;
+  const drawableHeight = height - margin * 2;
+
+  // ✅ Check if this should be a circle
+  const maxPossibleRadius = Math.min(drawableWidth, drawableHeight) / 2;
+  const actualRadius = Math.min(
+    radius || Math.min(drawableWidth, drawableHeight) * 0.05,
+    maxPossibleRadius, // ✅ Limité au radius maximum possible
+  );
+
+  // ✅ Determine if we're dealing with a circle
+  const isCircle = actualRadius >= maxPossibleRadius * 0.95; // 95% = virtually a circle
+
+  let pathLength;
+  let rectPath;
+
+  if (isCircle) {
+    // ✅ Circle: perimeter = 2πr
+    pathLength = 2 * Math.PI * actualRadius;
+
+    // ✅ Circle path centered in the drawable area
+    const centerX = margin + drawableWidth / 2;
+    const centerY = margin + drawableHeight / 2;
+
+    rectPath = `
+      M ${centerX + actualRadius},${centerY}
+      A ${actualRadius},${actualRadius} 0 1 1 ${centerX - actualRadius},${centerY}
+      A ${actualRadius},${actualRadius} 0 1 1 ${centerX + actualRadius},${centerY}
+    `;
+  } else {
+    // ✅ Rectangle: calculate perimeter properly
+    const straightEdges =
+      2 * (drawableWidth - 2 * actualRadius) +
+      2 * (drawableHeight - 2 * actualRadius);
+    const cornerArcs = actualRadius > 0 ? 2 * Math.PI * actualRadius : 0;
+    pathLength = straightEdges + cornerArcs;
+
+    rectPath = `
+      M ${margin + actualRadius},${margin}
+      L ${margin + drawableWidth - actualRadius},${margin}
+      A ${actualRadius},${actualRadius} 0 0 1 ${margin + drawableWidth},${margin + actualRadius}
+      L ${margin + drawableWidth},${margin + drawableHeight - actualRadius}
+      A ${actualRadius},${actualRadius} 0 0 1 ${margin + drawableWidth - actualRadius},${margin + drawableHeight}
+      L ${margin + actualRadius},${margin + drawableHeight}
+      A ${actualRadius},${actualRadius} 0 0 1 ${margin},${margin + drawableHeight - actualRadius}
+      L ${margin},${margin + actualRadius}
+      A ${actualRadius},${actualRadius} 0 0 1 ${margin + actualRadius},${margin}
+    `;
+  }
+
+  // Fixed segment size in pixels
+  const maxSegmentSize = 40;
+  const segmentLength = Math.min(maxSegmentSize, pathLength * 0.25);
+  const gapLength = pathLength - segmentLength;
+
+  // Vitesse constante en pixels par seconde
+  const networkSpeed = useNetworkSpeed();
+  const pixelsPerSecond =
+    {
+      "slow-2g": 40,
+      "2g": 60,
+      "3g": 80,
+      "4g": 120,
+    }[networkSpeed] || 80;
+  const animationDuration = Math.max(1.5, pathLength / pixelsPerSecond);
+
+  // ✅ Calculate correct offset based on actual segment size
+  const segmentRatio = segmentLength / pathLength;
+  const circleOffset = -animationDuration * segmentRatio;
+
+  return (
+    <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"
+    >
+      {/* Base outline - circle ou rectangle */}
+      {isCircle ? (
+        <circle
+          cx={margin + drawableWidth / 2}
+          cy={margin + drawableHeight / 2}
+          r={actualRadius}
+          fill="none"
+          stroke={trailColor}
+          strokeWidth={strokeWidth}
+        />
+      ) : (
+        <rect
+          x={margin}
+          y={margin}
+          width={drawableWidth}
+          height={drawableHeight}
+          fill="none"
+          stroke={trailColor}
+          strokeWidth={strokeWidth}
+          rx={actualRadius}
+        />
+      )}
+
+      {/* Progress segment that grows and moves */}
+      <path
+        d={rectPath}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeDasharray={`${segmentLength} ${gapLength}`}
+        pathLength={pathLength}
+      >
+        <animate
+          attributeName="stroke-dashoffset"
+          from={pathLength}
+          to="0"
+          dur={`${animationDuration}s`}
+          repeatCount="indefinite"
+          begin="0s"
+        />
+      </path>
+
+      {/* Leading dot that follows the path */}
+      <circle r={strokeWidth} fill={color}>
+        <animateMotion
+          path={rectPath}
+          dur={`${animationDuration}s`}
+          repeatCount="indefinite"
+          rotate="auto"
+          begin={`${circleOffset}s`}
+        />
+      </circle>
+    </svg>
+  );
+};

package/src/components/route.jsx

@@ -0,0 +1,15 @@
+import { useRouteStatus } from "../route/route.js";
+import { ActionRenderer } from "./action_renderer.jsx";
+
+export const Route = ({ route, children }) => {
+  if (!route.action) {
+    throw new Error(
+      "Route component requires a route with an action to render.",
+    );
+  }
+  const { active } = useRouteStatus(route);
+
+  return active ? (
+    <ActionRenderer action={route.action}>{children}</ActionRenderer>
+  ) : null;
+};

package/src/components/selection/selection.js

@@ -0,0 +1,5 @@
+export {
+  SelectionProvider,
+  useRegisterSelectionValue,
+  useSelectionContext,
+} from "./selection_context.jsx";

package/src/components/selection/selection_context.jsx

@@ -0,0 +1,262 @@
+import { canInterceptKeys } from "@jsenv/dom";
+import { createContext } from "preact";
+import { useContext, useLayoutEffect, useRef } from "preact/hooks";
+
+const SelectionContext = createContext(null);
+
+export const SelectionProvider = ({ value = [], onChange, children }) => {
+  const selection = value || [];
+  const registryRef = useRef([]); // Array<value>
+  const anchorRef = useRef(null);
+
+  const contextValue = {
+    selection,
+
+    register: (value) => {
+      const registry = registryRef.current;
+      const existingIndex = registry.indexOf(value);
+      if (existingIndex >= 0) {
+        console.warn(
+          `SelectionContext: Attempted to register an already registered value: ${value}. All values must be unique.`,
+        );
+        return;
+      }
+      registry.push(value);
+    },
+    unregister: (value) => {
+      const registry = registryRef.current;
+      const index = registry.indexOf(value);
+      if (index >= 0) {
+        registry.splice(index, 1);
+      }
+    },
+    setAnchor: (value) => {
+      anchorRef.current = value;
+    },
+    isSelected: (itemValue) => {
+      return selection.includes(itemValue);
+    },
+    getAllItems: () => {
+      return registryRef.current;
+    },
+    getRange: (fromValue, toValue) => {
+      const registry = registryRef.current;
+
+      // Find indices of fromValue and toValue
+      let fromIndex = -1;
+      let toIndex = -1;
+      let index = 0;
+      for (const valueCandidate of registry) {
+        if (valueCandidate === fromValue) {
+          fromIndex = index;
+        }
+        if (valueCandidate === toValue) {
+          toIndex = index;
+        }
+        index++;
+      }
+
+      if (fromIndex >= 0 && toIndex >= 0) {
+        // Select all items between fromIndex and toIndex (inclusive)
+        const start = Math.min(fromIndex, toIndex);
+        const end = Math.max(fromIndex, toIndex);
+        const valueInRangeArray = registry.slice(start, end + 1);
+        return valueInRangeArray;
+      }
+      return [];
+    },
+
+    // basic methods to manipulate selection
+    set: (newSelection, event = null) => {
+      if (
+        newSelection.length === selection.length &&
+        newSelection.every((value, index) => value === selection[index])
+      ) {
+        return;
+      }
+      onChange?.(newSelection, event);
+    },
+    add: (arrayOfValueToAddToSelection, event = null) => {
+      const selectionWithValues = [];
+      for (const value of selection) {
+        selectionWithValues.push(value);
+      }
+      let modified = false;
+      for (const valueToAdd of arrayOfValueToAddToSelection) {
+        if (selectionWithValues.includes(valueToAdd)) {
+          continue;
+        }
+        modified = true;
+        selectionWithValues.push(valueToAdd);
+      }
+      if (modified) {
+        onChange?.(selectionWithValues, event);
+      }
+    },
+    remove: (arrayOfValueToRemoveFromSelection, event = null) => {
+      let modified = false;
+      const selectionWithoutValues = [];
+      for (const value of selection) {
+        if (arrayOfValueToRemoveFromSelection.includes(value)) {
+          modified = true;
+          // If we're removing the last selected value, clear it
+          if (value === anchorRef.current) {
+            anchorRef.current = null;
+          }
+        } else {
+          selectionWithoutValues.push(value);
+        }
+      }
+
+      if (modified) {
+        onChange?.(selectionWithoutValues, event);
+      }
+    },
+
+    // Convenience method for multi-select: toggle, addFromLastSelectedTo
+    toggle: (value, event = null) => {
+      if (selection.includes(value)) {
+        contextValue.remove([value], event);
+      } else {
+        contextValue.add([value], event);
+      }
+    },
+    // Convenience method for shift-click: add range from last selected to target value
+    setFromAnchorTo: (value, event = null) => {
+      const anchorValue = anchorRef.current;
+
+      // Make sure the last selected value is still in the current selection
+      if (anchorValue && selection.includes(anchorValue)) {
+        const range = contextValue.getRange(anchorValue, value);
+        contextValue.set(range, event);
+      } else {
+        // No valid previous selection, just select this one
+        contextValue.set([value], event);
+      }
+    },
+
+    getValueAfter: (value) => {
+      const registry = registryRef.current;
+      const index = registry.indexOf(value);
+      if (index < 0 || index >= registry.length - 1) {
+        return null; // No next value
+      }
+      return registry[index + 1];
+    },
+    getValueBefore: (value) => {
+      const registry = registryRef.current;
+      const index = registry.indexOf(value);
+      if (index <= 0) {
+        return null; // No previous value
+      }
+      return registry[index - 1];
+    },
+  };
+
+  return (
+    <SelectionContext.Provider value={contextValue}>
+      {children}
+    </SelectionContext.Provider>
+  );
+};
+
+export const useSelectionContext = () => {
+  return useContext(SelectionContext);
+};
+
+export const useRegisterSelectionValue = (value) => {
+  const selectionContext = useSelectionContext();
+
+  useLayoutEffect(() => {
+    if (selectionContext) {
+      selectionContext.register(value);
+      return () => selectionContext.unregister(value);
+    }
+    return undefined;
+  }, [selectionContext, value]);
+};
+
+export const clickToSelect = (clickEvent, { selectionContext, value }) => {
+  if (clickEvent.defaultPrevented) {
+    // If the click was prevented by another handler, do not interfere
+    return;
+  }
+
+  const isMultiSelect = clickEvent.metaKey || clickEvent.ctrlKey;
+  const isShiftSelect = clickEvent.shiftKey;
+  const isSingleSelect = !isMultiSelect && !isShiftSelect;
+
+  if (isSingleSelect) {
+    // Single select - replace entire selection with just this item
+    selectionContext.set([value], clickEvent);
+    return;
+  }
+  if (isMultiSelect) {
+    // here no need to prevent nav on <a> but it means cmd + click will both multi select
+    // and open in a new tab
+    selectionContext.toggle(value, clickEvent);
+    return;
+  }
+  if (isShiftSelect) {
+    clickEvent.preventDefault(); // Prevent navigation
+    selectionContext.setFromAnchorTo(value, clickEvent);
+    return;
+  }
+};
+
+export const keydownToSelect = (keydownEvent, { selectionContext, value }) => {
+  if (!canInterceptKeys(keydownEvent)) {
+    return;
+  }
+
+  if (keydownEvent.key === "Shift") {
+    selectionContext.setAnchor(value);
+    return;
+  }
+
+  const isMultiSelect = keydownEvent.metaKey || keydownEvent.ctrlKey;
+  const isShiftSelect = keydownEvent.shiftKey;
+  const { key } = keydownEvent;
+  if (key === "a") {
+    if (!isMultiSelect) {
+      return;
+    }
+    keydownEvent.preventDefault(); // prevent default select all text behavior
+    selectionContext.set(selectionContext.getAllItems(), keydownEvent);
+    return;
+  }
+  if (key === "ArrowDown") {
+    const nextValue = selectionContext.getValueAfter(value);
+    if (!nextValue) {
+      return; // No next value to select
+    }
+    keydownEvent.preventDefault(); // Prevent default scrolling behavior
+    if (isShiftSelect) {
+      selectionContext.setFromAnchorTo(nextValue, keydownEvent);
+      return;
+    }
+    if (isMultiSelect) {
+      selectionContext.add([nextValue], keydownEvent);
+      return;
+    }
+    selectionContext.set([nextValue], keydownEvent);
+    return;
+  }
+  if (key === "ArrowUp") {
+    const previousValue = selectionContext.getValueBefore(value);
+    if (!previousValue) {
+      return; // No previous value to select
+    }
+    keydownEvent.preventDefault(); // Prevent default scrolling behavior
+    if (isShiftSelect) {
+      selectionContext.setFromAnchorTo(previousValue, keydownEvent);
+      return;
+    }
+    if (isMultiSelect) {
+      selectionContext.add([previousValue], keydownEvent);
+      return;
+    }
+    selectionContext.set([previousValue], keydownEvent);
+    return;
+  }
+};

package/src/components/shortcut/os.js

@@ -0,0 +1,9 @@
+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);
+};
+export const isMac = detectMac();