@jsenv/navi 0.18.9 → 0.18.11

package/dist/jsenv_navi.js

@@ -1,6 +1,6 @@
 import { installImportMetaCss } from "./jsenv_navi_side_effects.js";
 import { isValidElement, createContext, toChildArray, render, createRef, cloneElement } from "preact";
-import { useErrorBoundary, useLayoutEffect, useEffect, useCallback, useRef, useState, useContext, useMemo, useImperativeHandle, useId } from "preact/hooks";
+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, initFocusGroup, elementIsFocusable, pickLightOrDark, resolveColorLuminance, dragAfterThreshold, getScrollContainer, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
@@ -2402,6 +2402,105 @@ const useRunOnMount = (action, Component) => {
   }, []);
 };
 
+const addIntoArray = (array, ...valuesToAdd) => {
+  if (valuesToAdd.length === 1) {
+    const [valueToAdd] = valuesToAdd;
+    const arrayWithThisValue = [];
+    for (const value of array) {
+      if (value === valueToAdd) {
+        return array;
+      }
+      arrayWithThisValue.push(value);
+    }
+    arrayWithThisValue.push(valueToAdd);
+    return arrayWithThisValue;
+  }
+
+  const existingValueSet = new Set();
+  const arrayWithTheseValues = [];
+  for (const existingValue of array) {
+    arrayWithTheseValues.push(existingValue);
+    existingValueSet.add(existingValue);
+  }
+  let hasNewValues = false;
+  for (const valueToAdd of valuesToAdd) {
+    if (existingValueSet.has(valueToAdd)) {
+      continue;
+    }
+    arrayWithTheseValues.push(valueToAdd);
+    hasNewValues = true;
+  }
+  return hasNewValues ? arrayWithTheseValues : array;
+};
+
+const removeFromArray = (array, ...valuesToRemove) => {
+  if (valuesToRemove.length === 1) {
+    const [valueToRemove] = valuesToRemove;
+    const arrayWithoutThisValue = [];
+    let found = false;
+    for (const value of array) {
+      if (value === valueToRemove) {
+        found = true;
+        continue;
+      }
+      arrayWithoutThisValue.push(value);
+    }
+    if (!found) {
+      return array;
+    }
+    return arrayWithoutThisValue;
+  }
+
+  const valuesToRemoveSet = new Set(valuesToRemove);
+  const arrayWithoutTheseValues = [];
+  let hasRemovedValues = false;
+  for (const value of array) {
+    if (valuesToRemoveSet.has(value)) {
+      hasRemovedValues = true;
+      continue;
+    }
+    arrayWithoutTheseValues.push(value);
+  }
+  return hasRemovedValues ? arrayWithoutTheseValues : array;
+};
+
+const useArraySignalMembership = (...args) => {
+  if (args.length < 2) {
+    throw new Error(
+      "useArraySignalMembership requires at least 2 arguments: [arraySignal, id]",
+    );
+  }
+
+  return useMemo(() => {
+    return arraySignalMembership(...args);
+  }, args);
+};
+
+const arraySignalMembership = (...args) => {
+  if (args.length < 2) {
+    throw new Error(
+      "arraySignalMemberShip requires at least 2 arguments: [arraySignal, id]",
+    );
+  }
+  const [arraySignal, id] = args;
+  const array = arraySignal.value;
+  const isMember = array.includes(id);
+
+  const add = () => {
+    const arrayWithId = addIntoArray(arraySignal.peek(), id);
+    arraySignal.value = arrayWithId;
+    return arrayWithId;
+  };
+
+  const remove = () => {
+    const arrayWithoutId = removeFromArray(arraySignal.peek(), id);
+    arraySignal.value = arrayWithoutId;
+    return arrayWithoutId;
+  };
+
+  return [isMember, add, remove];
+};
+
 const localStorageSignal = (key) => {
   const initialValue = localStorage.getItem(key);
 
@@ -4852,87 +4951,6 @@ const isProps = (value) => {
   return value !== null && typeof value === "object";
 };
 
-const addIntoArray = (array, ...valuesToAdd) => {
-  if (valuesToAdd.length === 1) {
-    const [valueToAdd] = valuesToAdd;
-    const arrayWithThisValue = [];
-    for (const value of array) {
-      if (value === valueToAdd) {
-        return array;
-      }
-      arrayWithThisValue.push(value);
-    }
-    arrayWithThisValue.push(valueToAdd);
-    return arrayWithThisValue;
-  }
-
-  const existingValueSet = new Set();
-  const arrayWithTheseValues = [];
-  for (const existingValue of array) {
-    arrayWithTheseValues.push(existingValue);
-    existingValueSet.add(existingValue);
-  }
-  let hasNewValues = false;
-  for (const valueToAdd of valuesToAdd) {
-    if (existingValueSet.has(valueToAdd)) {
-      continue;
-    }
-    arrayWithTheseValues.push(valueToAdd);
-    hasNewValues = true;
-  }
-  return hasNewValues ? arrayWithTheseValues : array;
-};
-
-const removeFromArray = (array, ...valuesToRemove) => {
-  if (valuesToRemove.length === 1) {
-    const [valueToRemove] = valuesToRemove;
-    const arrayWithoutThisValue = [];
-    let found = false;
-    for (const value of array) {
-      if (value === valueToRemove) {
-        found = true;
-        continue;
-      }
-      arrayWithoutThisValue.push(value);
-    }
-    if (!found) {
-      return array;
-    }
-    return arrayWithoutThisValue;
-  }
-
-  const valuesToRemoveSet = new Set(valuesToRemove);
-  const arrayWithoutTheseValues = [];
-  let hasRemovedValues = false;
-  for (const value of array) {
-    if (valuesToRemoveSet.has(value)) {
-      hasRemovedValues = true;
-      continue;
-    }
-    arrayWithoutTheseValues.push(value);
-  }
-  return hasRemovedValues ? arrayWithoutTheseValues : array;
-};
-
-const useArraySignalMembership = (arraySignal, id) => {
-  const array = arraySignal.value;
-  const isMember = array.includes(id);
-
-  const add = useCallback(() => {
-    const arrayWithId = addIntoArray(arraySignal.peek(), id);
-    arraySignal.value = arrayWithId;
-    return arrayWithId;
-  }, []);
-
-  const remove = useCallback(() => {
-    const arrayWithoutId = removeFromArray(arraySignal.peek(), id);
-    arraySignal.value = arrayWithoutId;
-    return arrayWithoutId;
-  }, []);
-
-  return [isMember, add, remove];
-};
-
 /**
  * Creates a signal that stays synchronized with an external value,
  * only updating the signal when the value actually changes.
@@ -14364,10 +14382,7 @@ const useAutoFocus = (
   autoFocus,
   { autoFocusVisible, autoSelect } = {},
 ) => {
-  useLayoutEffect(() => {
-    if (!autoFocus) {
-      return null;
-    }
+  const triggerAutofocus = () => {
     const activeElement = document.activeElement;
     const focusableElement = focusableElementRef.current;
     focusableElement.focus({ focusVisible: autoFocusVisible });
@@ -14418,7 +14433,14 @@ const useAutoFocus = (
 
       activeElement.focus();
     };
-  }, []);
+  };
+
+  useLayoutEffect(() => {
+    if (!autoFocus) {
+      return null;
+    }
+    return triggerAutofocus();
+  }, [autoFocus]);
 
   useEffect(() => {
     if (autoFocus) {
@@ -14426,6 +14448,8 @@ const useAutoFocus = (
       focusableElement.scrollIntoView({ inline: "nearest", block: "nearest" });
     }
   }, []);
+
+  return triggerAutofocus;
 };
 
 const CalloutCloseContext = createContext();
@@ -17738,7 +17762,7 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
 
   .navi_text_overflow_wrapper {
     display: flex;
-    width: 0;
+    width: 100%;
     flex-grow: 1;
     gap: 0.3em;
   }
@@ -17940,7 +17964,6 @@ const TextOverflow = ({
     preLine: rest.as === "p",
     ...rest,
     className: "navi_text_overflow",
-    expandX: true,
     spacing: "pre",
     children: jsxs("span", {
       className: "navi_text_overflow_wrapper",
@@ -20691,7 +20714,8 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       --link-outline-color: var(--navi-focus-outline-color);
       --link-loader-color: var(--navi-loader-color);
       --link-color: rgb(0, 0, 238);
-      --link-color-visited: light-dark(#6a1b9a, #ab47bc);
+      --link-color-visited: color-mix(in srgb, var(--link-color), black 40%);
+
       --link-color-active: red;
       --link-text-decoration: underline;
       --link-text-decoration-hover: var(--link-text-decoration);
@@ -20738,22 +20762,6 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       --x-link-color: var(--x-link-color-hover);
       --x-link-text-decoration: var(--x-link-text-decoration-hover);
     }
-    /* Current */
-    &[data-href-current] {
-      --x-link-color: var(--link-color-current);
-      --x-link-cursor: default;
-      &[data-anchor] {
-        /* For anchor links, we want to keep the pointer cursor to indicate interactivity */
-        /* as anchor link will still scroll to the section even if it's the current page */
-        --x-link-cursor: pointer;
-      }
-    }
-    /* Focus */
-    &[data-focus],
-    &[data-focus-visible] {
-      position: relative;
-      z-index: 1; /* Ensure focus outline is above other elements */
-    }
     &[data-focus-visible] {
       outline-width: 2px;
     }
@@ -20773,6 +20781,22 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       /* Redefine it otherwise [data-visited] prevails */
       --x-link-color: var(--x-link-color-active);
     }
+    /* Current */
+    &[data-href-current] {
+      --x-link-color: var(--link-color-current);
+      --x-link-cursor: default;
+      &[data-anchor] {
+        /* For anchor links, we want to keep the pointer cursor to indicate interactivity */
+        /* as anchor link will still scroll to the section even if it's the current page */
+        --x-link-cursor: pointer;
+      }
+    }
+    /* Focus */
+    &[data-focus],
+    &[data-focus-visible] {
+      position: relative;
+      z-index: 1; /* Ensure focus outline is above other elements */
+    }
     /* Readonly */
     &[data-readonly] > * {
       opacity: 0.5;
@@ -24471,8 +24495,21 @@ const Input = props => {
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   .navi_editable_wrapper {
+    --inset-top: 0px;
+    --inset-right: 0px;
+    --inset-bottom: 0px;
+    --inset-left: 0px;
+
     position: absolute;
-    inset: 0;
+    top: var(--inset-top);
+    right: var(--inset-right);
+    bottom: var(--inset-bottom);
+    left: var(--inset-left);
+
+    opacity: 0;
+    &[data-editing] {
+      opacity: 1;
+    }
   }
 `;
 const useEditionController = () => {
@@ -24562,7 +24599,7 @@ const Editable = props => {
     name: name,
     value: value,
     valueSignal: valueSignal,
-    autoFocus: true,
+    autoFocus: editing,
     autoFocusVisible: true,
     autoSelect: autoSelect,
     cancelOnEscape: true,
@@ -24607,12 +24644,32 @@ const Editable = props => {
       });
     }
   });
+  const wrapperRef = useRef();
+  useLayoutEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) {
+      return;
+    }
+    const parent = wrapper.parentElement;
+    const borderSizes = getBorderSizes(parent);
+    wrapper.style.setProperty("--inset-left", `-${borderSizes.left}px`);
+    wrapper.style.setProperty("--inset-top", `-${borderSizes.top}px`);
+    wrapper.style.setProperty("--inset-right", `-${borderSizes.right}px`);
+    wrapper.style.setProperty("--inset-bottom", `-${borderSizes.bottom}px`);
+  });
   return jsxs(Fragment, {
     children: [children || jsx("span", {
       children: value
-    }), editing && jsx(Box, {
+    }), jsx(Box, {
+      className: "navi_editable_wrapper",
+      ref: wrapperRef,
       ...wrapperProps,
-      baseClassName: "navi_editable_wrapper",
+      // inert ensure input while not editing that:
+      // - input not focusable (via keyboard or anything)
+      // - cannot be interacted with pointer (click, hover, etc)
+      // - is ignored by screen readers
+      inert: editing ? undefined : "",
+      "data-editing": editing ? "" : undefined,
       children: input
     })]
   });
@@ -29595,7 +29652,7 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       /* Semantic fill colors, matching native meter on Chrome/macOS */
       --fill-color-optimum: light-dark(#0f7c0f, #4caf50);
       --fill-color-suboptimum: light-dark(#fdb900, #ffc107);
-      --fill-color-subsuboptimum: light-dark(#d83b01, #f44336);
+      --fill-color-even-less-good: light-dark(#d83b01, #f44336);
     }
   }
 
@@ -29698,7 +29755,18 @@ const MeterStyleCSSVars = {
   height: "--height",
   width: "--width"
 };
-const MeterPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading"];
+const MeterPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading", ":-navi-meter-optimum", ":-navi-meter-suboptimum", ":-navi-meter-even-less-good"];
+Object.assign(PSEUDO_CLASSES, {
+  ":-navi-meter-optimum": {
+    attribute: "data-optimum"
+  },
+  ":-navi-meter-suboptimum": {
+    attribute: "data-suboptimum"
+  },
+  ":-navi-meter-even-less-good": {
+    attribute: "data-even-less-good"
+  }
+});
 const Meter = ({
   value = 0,
   min = 0,
@@ -29729,7 +29797,7 @@ const Meter = ({
     });
   }
   const level = getMeterLevel(clampedValue, min, max, low, high, optimum);
-  const fillColorVar = level === "optimum" ? "var(--fill-color-optimum)" : level === "suboptimum" ? "var(--fill-color-suboptimum)" : "var(--fill-color-subsuboptimum)";
+  const fillColorVar = level === "optimum" ? "var(--fill-color-optimum)" : level === "suboptimum" ? "var(--fill-color-suboptimum)" : "var(--fill-color-even-less-good)";
   reportDisabledToLabel(disabled);
   reportReadOnlyToLabel(readOnly);
   const trackContainerRef = useRef();
@@ -29764,7 +29832,10 @@ const Meter = ({
     basePseudoState: {
       ":read-only": readOnly,
       ":disabled": disabled,
-      ":-navi-loading": loading
+      ":-navi-loading": loading,
+      ":-navi-meter-optimum": level === "optimum",
+      ":-navi-meter-suboptimum": level === "suboptimum",
+      ":-navi-meter-even-less-good": level === "even-less-good"
     },
     pseudoClasses: MeterPseudoClasses,
     "data-has-caption": children !== undefined ? "" : undefined,
@@ -29815,7 +29886,7 @@ const getMeterLevel = (value, min, max, low, high, optimum) => {
   const distance = Math.abs(optimumRegion - valueRegion);
   if (distance === 0) return "optimum";
   if (distance === 1) return "suboptimum";
-  return "subsuboptimum";
+  return "even-less-good";
 };
 
 const Paragraph = props => {
@@ -30241,5 +30312,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, BadgeCount, Box, Button, ButtonCopyToClipboard, Caption, CheckSvg, Checkbox, CheckboxList, Code, Col, Colgroup, ConstructionSvg, Details, DialogLayout, Editable, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Form, Group, HeartSvg, HomeSvg, Icon, Image, Input, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, MessageBox, Meter, Paragraph, Radio, RadioList, Route, RouteLink, Routes, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, SearchSvg, Select, SelectionContext, Separator, SettingsSvg, StarSvg, Stat, SummaryMarker, Svg, Tab, TabList, Table, TableCell, Tbody, Text, Thead, Title, Tr, UITransition, UserSvg, ViewportLayout, actionIntegratedVia, actionRunEffect, addCustomMessage, compareTwoJsValues, createAction, createAvailableConstraint, createRequestCanceller, createSelectionKeyboardShortcuts, enableDebugActions, enableDebugOnDocumentLoading, forwardActionRequested, installCustomConstraintValidation, isCellSelected, isColumnSelected, isRowSelected, localStorageSignal, navBack, navForward, navTo, openCallout, rawUrlPart, reload, removeCustomMessage, requestAction, rerunActions, resource, route, routeAction, setBaseUrl, setupRoutes, stateSignal, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useArraySignalMembership, useCalloutClose, useCancelPrevious, useCellsAndColumns, useConstraintValidityState, useDependenciesDiff, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useMatchingRouteInfo, useNavState$1 as useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, useTitleLevel, useUrlSearchParam, valueInLocalStorage };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, BadgeCount, Box, Button, ButtonCopyToClipboard, Caption, CheckSvg, Checkbox, CheckboxList, Code, Col, Colgroup, ConstructionSvg, Details, DialogLayout, Editable, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Form, Group, HeartSvg, HomeSvg, Icon, Image, Input, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, MessageBox, Meter, Paragraph, Radio, RadioList, Route, RouteLink, Routes, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, SearchSvg, Select, SelectionContext, Separator, SettingsSvg, StarSvg, Stat, SummaryMarker, Svg, Tab, TabList, Table, TableCell, Tbody, Text, Thead, Title, Tr, UITransition, UserSvg, ViewportLayout, actionIntegratedVia, actionRunEffect, addCustomMessage, arraySignalMembership, compareTwoJsValues, createAction, createAvailableConstraint, createRequestCanceller, createSelectionKeyboardShortcuts, enableDebugActions, enableDebugOnDocumentLoading, forwardActionRequested, installCustomConstraintValidation, isCellSelected, isColumnSelected, isRowSelected, localStorageSignal, navBack, navForward, navTo, openCallout, rawUrlPart, reload, removeCustomMessage, requestAction, rerunActions, resource, route, routeAction, setBaseUrl, setupRoutes, stateSignal, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useArraySignalMembership, useCalloutClose, useCancelPrevious, useCellsAndColumns, useConstraintValidityState, useDependenciesDiff, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useMatchingRouteInfo, useNavState$1 as useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, useTitleLevel, useUrlSearchParam, valueInLocalStorage };
 //# sourceMappingURL=jsenv_navi.js.map