@jsenv/navi 0.29.150 → 0.29.152

package/dist/jsenv_navi.js

@@ -15,6 +15,45 @@ import { parseDuration, durationContainsNaN, compareTwoDurations, durationToSeco
 export { compareTwoDurations, durationContainsNaN, durationToHours, durationToISOString, durationToMinutes, durationToNumber, durationToSeconds, durationToString, parseDuration } from "@jsenv/validity";
 import { Suspense, createPortal, forwardRef } from "preact/compat";
 
+/**
+ * One page, one navi.
+ *
+ * navi keeps contexts, registries and singletons at module scope, so a second
+ * copy of the library in the same page is a second of each, and nothing
+ * crosses between them. Every symptom of that lands far from the cause and
+ * reads as an app bug: a <Loading> mounted by one copy is invisible to the
+ * hook reading the other's context and reports itself missing, an action
+ * registered in one is unknown to the other, focus and z-index each get a
+ * second owner. So the copies are detected here, when the second one is
+ * imported, and that import fails — the first thing that goes wrong says what
+ * is wrong.
+ *
+ * A copy is a module evaluation, which is what the object added to the set
+ * stands for; the urls are only there to tell the reader which two files to
+ * compare. Two urls for one file on disk is the usual shape (a dev server
+ * stamping a package version into specifiers, a bundle embedding navi next to
+ * a copy resolved separately); two versions installed in node_modules is the
+ * other.
+ *
+ * This module must stay in the entry chunk: the whole point is that it is
+ * evaluated once per copy of navi, and a shared chunk would be evaluated once
+ * for both.
+ */
+
+// Symbol.for so the set is the same one across copies — a copy cannot see the
+// other's module scope, which is the very thing being detected.
+const NAVI_INSTANCE_SET = Symbol.for("navi_instance_set");
+
+const instanceSet = globalThis[NAVI_INSTANCE_SET] || new Set();
+globalThis[NAVI_INSTANCE_SET] = instanceSet;
+instanceSet.add({ url: import.meta.url });
+if (instanceSet.size > 1) {
+  const urlList = Array.from(instanceSet, ({ url }) => `- ${url}`).join("\n");
+  throw new Error(`@jsenv/navi is loaded ${instanceSet.size} times in this page:
+${urlList}
+Each one builds its own contexts, stores and registries, so what one holds is invisible to the components using another.`);
+}
+
 installImportMetaCssBuild(import.meta);/**
  * Every z-index navi can be seen competing on, in one place, ordered.
  *
@@ -5596,8 +5635,19 @@ const CLICK_SELECTOR = selfInteractionSelector("click");
  * The closest element CLAIMING THE PRESS wins, not the closest one claiming
  * anything: an affordance that took only the drag is transparent here, exactly
  * as it is to the drag readers when it took only the click.
+ *
+ * @param {Event} event The gesture being arbitrated.
+ * @param {Element} controlHost The control asking whether the press is its own.
+ * @param {Element} [requester] Who asked this control to act, when someone did
+ *   — the source of a command, typically. The claim answers "was this press
+ *   yours or the affordance's"; it says nothing about a request that affordance
+ *   is making, and the answer there is always yes.
  */
-const isAimedAtSelfInteractionsBelow = (event, controlHost) => {
+const isAimedAtSelfInteractionsBelow = (
+  event,
+  controlHost,
+  requester,
+) => {
   const target = event?.target;
   if (!target || typeof target.closest !== "function") {
     return false;
@@ -5611,6 +5661,13 @@ const isAimedAtSelfInteractionsBelow = (event, controlHost) => {
   if (claimer === controlHost || claimer.contains(controlHost)) {
     return false;
   }
+  // The claimer is the one asking. Its claim took the press so IT would decide
+  // what the press means, and this is that decision arriving — a clear cross
+  // sending "--navi-clear" to the field it sits in. Stepping back here would be
+  // the control refusing the very request the claim exists to let through.
+  if (requester && (claimer === requester || claimer.contains(requester))) {
+    return false;
+  }
   // From the root rather than the host: a layered control (a picker holding an
   // input) has its gate on the input, and what the application drew sits beside
   // it, not in it.
@@ -9802,12 +9859,21 @@ const createControlInteraction = (
 
 const dispatchRequestInteraction = (
   element,
-  { event, name = "", prevented, allowed, always, ...detailRest } = {},
+  {
+    event,
+    name = "",
+    requester,
+    prevented,
+    allowed,
+    always,
+    ...detailRest
+  } = {},
 ) => {
   const controlHost = findControlHost(element) || element;
   return dispatchInternalCustomEvent(controlHost, "navi_request_interaction", {
     event,
     name,
+    requester,
     prevented,
     allowed,
     always,
@@ -9829,6 +9895,9 @@ const onRequestInteraction = (
     // through (see READONLY_CONSTRAINT).
     intent = "write",
     bypassInteractivity = false,
+    // Who asked, when the control is not answering the gesture on its own —
+    // the source of a command (see the self-interactions step-back below).
+    requester,
     prevented,
     allowed,
     always,
@@ -9862,7 +9931,9 @@ const onRequestInteraction = (
   // reaction never happened, so its `prevented`/`always` (an
   // `e.preventDefault()`, for most of them) have nothing to undo and would take
   // the press from the affordance itself.
-  if (isAimedAtSelfInteractionsBelow(event, controlHost)) {
+  // Unless that element is the one asking: what it took the press to decide is
+  // arriving here, and it is this control's to answer.
+  if (isAimedAtSelfInteractionsBelow(event, controlHost, requester)) {
     debugInteraction(
       event,
       `"${name}" is for a self-interactions element below`,
@@ -9947,6 +10018,11 @@ const dispatchRequestAction = (
   return dispatchRequestInteraction(element, {
     event,
     name,
+    // The gate needs it as much as the action does: the requester may be an
+    // affordance that claimed the press to ask for this very action, and the
+    // control must not read that claim as "this press was not for me" — see
+    // isAimedAtSelfInteractionsBelow.
+    requester: actionOptions.requester,
     prevented,
     allowed: () => {
       allowed?.();
@@ -30132,16 +30208,40 @@ const anyMatchingRouteSignal = (routes) => {
 };
 
 /**
+ * Runs a navi command from JS. It is the LAST RESORT: the attributes say the
+ * same thing declaratively and go through this very function, so a press that
+ * opens, closes, sends, updates or travels needs none of this.
+ *
+ * ```html
+ * <button command="--navi-open" commandfor="note-dialog" value="42">
+ * ```
+ *
+ * `command` names it (`--navi-x:argument` when it needs an argument),
+ * `commandfor` / `navi-command-target` says to whom, the source's own `value`
+ * says what it is about (`command-value` when the source has a value meaning
+ * something else). Reach for `triggerNaviCommand` only when what decides is not
+ * a press on the element carrying those attributes: a long press, the end of a
+ * drag, a double-click, a keyboard shortcut, a server answer, an observer.
+ *
  * @param {Element} element The element asking — the command's source, and the
  *   anchor a popup opens on unless `anchor` says otherwise.
  * @param {string} command
  * @param {Event} event What caused this. Mandatory: it is what makes a command
  *   traceable back to its origin — the debug panel groups everything a gesture
  *   set off under it, and the gates below read it to know whether the default
- *   was already prevented and which mouse button was pressed. When nothing was
- *   handed over — a timer firing, an action settling, a signal changing — build
- *   a `CustomEvent` that names what happened and chain it to whatever preceded
- *   it, rather than leaving the origin unsaid:
+ *   was already prevented and which mouse button was pressed.
+ *
+ *   **Forward the event you were handed**, down through every function between
+ *   the handler and this call, so what arrives here is the real gesture. Almost
+ *   every command has one: a person did something to the page, or the browser
+ *   did. Building a `CustomEvent` at the call site instead of taking `event` as
+ *   a parameter looks like it satisfies the requirement, and throws away
+ *   exactly what makes it useful — the chain a popup reads to give the focus
+ *   back, the button that was pressed, a default already prevented.
+ *
+ *   The `CustomEvent` is for the genuinely originless case — a timer firing, an
+ *   action settling, a signal changing — and even there it names what happened
+ *   and chains to whatever preceded it:
  *     const expiredEvent = new CustomEvent("session_expired");
  *     chainEvent(expiredEvent, causeEvent); // when something did precede it
  *     triggerNaviCommand(dialogEl, "--navi-open", expiredEvent);
@@ -30163,7 +30263,7 @@ const triggerNaviCommand = (
 ) => {
   if (!event) {
     throw new Error(
-      `"${command}" triggered without an event: it is mandatory, a command must say what caused it. Pass the gesture, or a CustomEvent naming the cause when no gesture did — see triggerNaviCommand's jsdoc.`,
+      `"${command}" triggered without an event: it is mandatory, a command must say what caused it. Forward the gesture that led here, or a CustomEvent naming the cause when no gesture did — see triggerNaviCommand's jsdoc.`,
     );
   }
   const naviCommand =
@@ -30404,6 +30504,9 @@ registerNaviCommand("--navi-update", (source, event, { argument }) => {
       dispatchRequestInteraction(target, {
         event,
         name: "--navi-update",
+        // The source may have claimed the press to send this very command — see
+        // the requester in onRequestInteraction.
+        requester: source,
         prevented: () => event.preventDefault(),
         allowed: () => {
           const commandValue = resolveCommandValue(source, event);
@@ -30442,6 +30545,9 @@ registerNaviCommand("--navi-clear", (source, event) => {
     dispatchRequestInteraction(target, {
       event: clearEvent,
       name: "--navi-clear",
+      // The source may have claimed the press to send this very command — see
+      // the requester in onRequestInteraction.
+      requester: source,
       prevented: () => clearEvent.preventDefault(),
       allowed: () => {
         // What the control holds, before it holds nothing: the clear is
@@ -30529,6 +30635,9 @@ registerNaviCommand("--navi-reset", (source, event) => {
       dispatchRequestInteraction(target, {
         event,
         name: "--navi-reset",
+        // The source may have claimed the press to send this very command — see
+        // the requester in onRequestInteraction.
+        requester: source,
         prevented: () => event.preventDefault(),
         allowed: () => dispatchRequestResetUIState(target, event),
       });
@@ -44206,7 +44315,7 @@ installImportMetaCssBuild(import.meta);const css$P = /* css */`@layer navi {
     --button-color: currentColor;
     --button-cursor: pointer;
     --button-font-size: var(--navi-control-font-size);
-    --button-font-family: var(--navi-control-font-family);
+    --button-font-family: var(--navi-control-font-family, inherit);
     --button-border-color-hover: color-mix(in srgb,
         var(--button-border-color) 70%,
         black);
@@ -44453,37 +44562,30 @@ a.navi_button {
   }
 
   &[data-cta] {
-    --x-button-background-color: var(--button-cta-background-color);
-    --x-button-border-color: var(--button-cta-background-color);
-    --x-button-color: white;
-
-    &[data-hover] {
-      --x-button-background-color: color-mix(in srgb,
-          var(--button-cta-background-color) 85%,
-          white);
-      --x-button-border-color: color-mix(in srgb,
-          var(--button-cta-background-color) 85%,
-          white);
-    }
-
-    &[data-readonly] {
-      --x-button-background-color: color-mix(in srgb,
-          var(--button-cta-background-color) 50%,
-          white);
-      --x-button-border-color: color-mix(in srgb,
-          var(--button-cta-background-color) 50%,
-          white);
-    }
-
-    &[data-disabled] {
-      --x-button-background-color: color-mix(in srgb,
-          var(--button-cta-background-color) 40%,
-          white);
-      --x-button-border-color: color-mix(in srgb,
-          var(--button-cta-background-color) 40%,
-          white);
-      --x-button-color: #fff9;
-    }
+    --button-background-color: var(--button-background, var(--button-cta-background-color));
+    --button-border-color: var(--button-cta-background-color);
+    --button-color: white;
+    --button-background-color-hover: color-mix(in srgb,
+        var(--button-background-color) 85%,
+        white);
+    --button-border-color-hover: color-mix(in srgb,
+        var(--button-border-color) 85%,
+        white);
+    --button-background-color-readonly: color-mix(in srgb,
+        var(--button-background-color) 50%,
+        white);
+    --button-border-color-readonly: color-mix(in srgb,
+        var(--button-border-color) 50%,
+        white);
+    --button-background-color-disabled: color-mix(in srgb,
+        var(--button-background-color) 40%,
+        white);
+    --button-border-color-disabled: color-mix(in srgb,
+        var(--button-border-color) 40%,
+        white);
+    --button-color-disabled: color-mix(in srgb,
+        var(--button-color) 60%,
+        transparent);
   }
 }
 `;
@@ -45426,7 +45528,7 @@ installImportMetaCssBuild(import.meta);const css$M = /* css */`@layer navi {
     --outline-color: var(--navi-focus-outline-color);
     --margin: 3px 3px 3px 4px;
     --font-size: var(--navi-control-font-size);
-    --font-family: var(--navi-control-font-family);
+    --font-family: var(--navi-control-font-family, inherit);
     --width: round(1em, 1px);
     --height: round(1em, 1px);
     --loader-color: var(--navi-loader-color);
@@ -46132,7 +46234,7 @@ installImportMetaCssBuild(import.meta);const css$K = /* css */`@layer navi {
     --border-color-checked: var(--accent-color);
     --cursor: pointer;
     --font-size: var(--navi-control-font-size);
-    --font-family: var(--navi-control-font-family);
+    --font-family: var(--navi-control-font-family, inherit);
     --border-color-hover: color-mix(in srgb, var(--border-color) 60%, black);
     --border-color-hover-checked: color-mix(in srgb,
         var(--border-color-checked) 80%,
@@ -46579,7 +46681,7 @@ installImportMetaCssBuild(import.meta);const css$J = /* css */`@layer navi {
     --thumb-border-radius: 100%;
     --thumb-cursor: pointer;
     --font-size: var(--navi-control-font-size);
-    --font-family: var(--navi-control-font-family);
+    --font-family: var(--navi-control-font-family, inherit);
     --loader-color: var(--navi-loader-color);
     --accent-color: var(--navi-control-accent-color);
     --color-mix-light: black;
@@ -46927,7 +47029,7 @@ const inputCss = /* css */`@layer navi {
     --outline-offset: calc(-.5 * var(--outline-width));
     --outline-color: var(--navi-focus-outline-color);
     --font-size: var(--navi-control-font-size);
-    --font-family: var(--navi-control-font-family);
+    --font-family: var(--navi-control-font-family, inherit);
     --loader-color: var(--navi-loader-color);
     --border-color: var(--navi-control-border-color);
     --background-color: var(--navi-surface-color);
@@ -47142,13 +47244,24 @@ const inputCss = /* css */`@layer navi {
   }
 
   &[data-variant="text"] {
-    --x-background-color: transparent;
-    --x-border-color: transparent;
+    --background-color: transparent;
+    --background-color-hover: var(--background-color);
+    --background-color-focus: var(--background-color);
+    --background-color-readonly: var(--background-color);
+    --background-color-disabled: var(--background-color);
+    --border-color: transparent;
+    --border-color-hover: var(--border-color);
+    --border-color-readonly: var(--border-color);
+    --border-color-disabled: var(--border-color);
     cursor: inherit;
   }
 
   &[data-variant="underline"] {
-    --x-background-color: transparent;
+    --background-color: transparent;
+    --background-color-hover: var(--background-color);
+    --background-color-focus: var(--background-color);
+    --background-color-readonly: var(--background-color);
+    --background-color-disabled: var(--background-color);
     border: none;
     border-radius: 0;
     padding-left: 0;
@@ -47170,12 +47283,7 @@ const inputCss = /* css */`@layer navi {
       position: absolute;
     }
 
-    &[data-hover] {
-      --x-background-color: transparent;
-    }
-
     &[data-focus-visible] {
-      --x-background-color: transparent;
       outline-style: none;
 
       & .navi_input_underline {
@@ -47183,10 +47291,6 @@ const inputCss = /* css */`@layer navi {
         height: 2px;
       }
     }
-
-    &[data-readonly], &[data-disabled] {
-      --x-background-color: transparent;
-    }
   }
 }
 `;
@@ -59395,7 +59499,12 @@ const PickerConfirmResolver = props => {
   return jsx(Next, {
     ...props,
     type: "navi_js",
-    allowNameless: true,
+    allowNameless: true
+    // No chevron, no clear cross, whatever variant the trigger is drawn in:
+    // both announce a value, and a question holds none.
+    ,
+
+    picksNothing: true,
     variant: variant,
     mode: mode,
     focusCapture: focusCapture,
@@ -60264,7 +60373,7 @@ installImportMetaCssBuild(import.meta);const css$y = /* css */`@layer navi {
     --x-list-item-cursor: default;
     --x-list-item-border-color: var(--list-item-border-color);
     font-size: var(--navi-control-font-size);
-    font-family: var(--navi-control-font-family);
+    font-family: var(--navi-control-font-family, inherit);
     line-height: var(--navi-control-line-height);
     position: relative;
   }
@@ -66707,7 +66816,7 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
     --picker-padding-x-default: var(--navi-picker-padding-x-default);
     --picker-padding-y-default: var(--navi-picker-padding-y-default);
     --picker-font-size: var(--navi-control-font-size);
-    --picker-font-family: var(--navi-control-font-family);
+    --picker-font-family: var(--navi-control-font-family, inherit);
     --picker-loader-color: var(--navi-loader-color);
     --picker-border-color: var(--navi-control-border-color);
     --picker-background-color: white;
@@ -66807,6 +66916,7 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
     padding-bottom: var(--x-picker-padding-bottom);
     padding-left: var(--x-picker-padding-left);
     justify-content: inherit;
+    text-align: var(--picker-align-x, var(--picker-text-align-default));
     pointer-events: none;
     user-select: none;
     flex-grow: 1;
@@ -66965,7 +67075,7 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
     --picker-background-color-hover: var(--picker-background-color);
     --picker-background-color-readonly: var(--picker-background-color);
     --picker-background-color-disabled: var(--picker-background-color);
-    --x-picker-icon-color: currentColor;
+    --picker-icon-color: currentColor;
 
     & .navi_picker_value {
       flex-grow: 0;
@@ -66998,7 +67108,7 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
     --picker-background-color-hover: var(--picker-background-color);
     --picker-background-color-readonly: var(--picker-background-color);
     --picker-background-color-disabled: var(--picker-background-color);
-    --x-picker-icon-color: currentColor;
+    --picker-icon-color: currentColor;
 
     & .navi_picker_box {
       z-index: -1;
@@ -67020,7 +67130,7 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
     --picker-background-color-hover: var(--picker-background-color);
     --picker-background-color-readonly: var(--picker-background-color);
     --picker-background-color-disabled: var(--picker-background-color);
-    --x-picker-icon-color: currentColor;
+    --picker-icon-color: currentColor;
     font-size: inherit;
     font-family: inherit;
     line-height: inherit;
@@ -67045,7 +67155,7 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
     --picker-border-color-disabled: var(--picker-border-color-readonly);
     --picker-background-color-disabled: var(--picker-background-color-readonly);
     --picker-color-disabled: var(--picker-color-readonly);
-    text-align: center;
+    --picker-text-align-default: center;
   }
 
   &[data-variant="text"] {
@@ -67111,6 +67221,11 @@ const PickerButton = props => {
     // not come back. The cross is then a confirm picker (see
     // picker_confirm.jsx), and the clear only goes out on yes.
     clearConfirm,
+    // Nothing is picked here: the popup asks a question rather than holding an
+    // answer, so the trigger draws a label and never a value. Set by the
+    // confirm resolver (see picker_confirm.jsx), which is the picker that is
+    // one — a caller whose popup is a menu of actions says it for themselves.
+    picksNothing,
     readOnly,
     error
   } = props;
@@ -67124,17 +67239,19 @@ const PickerButton = props => {
   const isSingleLine = maxLines === 1;
   // Same rule as the root: phrasing content inside a sentence.
   const ContentTag = variant === "text" ? "span" : "div";
-  // Which variants get the right slot — the chevron saying "this opens", and
-  // the cross replacing it once there is something to clear.
-  // Not the ones that draw no value beside it: an icon picker IS its icon, a
-  // headless one draws nothing, a button says what it opens with its label, a
+  // Who gets the right slot — the chevron saying "this opens", and the cross
+  // replacing it once there is something to clear. Both are about a value, so
+  // the slot follows the value and not the drawing: `picksNothing` has none to
+  // announce and none to take back, whatever variant it is drawn in.
+  // Then the variants that draw no value beside it: an icon picker IS its icon,
+  // a headless one draws nothing, a button says what it opens with its label, a
   // word in a sentence has no room for furniture. Nor a picker rendering the
   // browser's own control ("default").
   // Nor a bare one: the picker is that drawing's box to the pixel, so anything
   // navi adds beside it either grows the box or covers what the caller drew.
   // The pieces are the caller's to place there instead — a <Picker.Clear /> in
   // their own layout (see warnOnClearableWithoutSlot).
-  const hasRightSlot = variant !== "icon" && variant !== "headless" && variant !== "button" && variant !== "text" && variant !== "bare" && ui !== "default";
+  const hasRightSlot = !picksNothing && variant !== "icon" && variant !== "headless" && variant !== "button" && variant !== "text" && variant !== "bare" && ui !== "default";
   const inputRef = useRef(null);
   const [pickerRemainingProps, inputProps, facadeChildrenProps] = useControlFacadeProps({
     ...props,
@@ -67213,6 +67330,7 @@ const PickerButton = props => {
         rightSlotIconSize: undefined,
         rightSlot: undefined,
         clearConfirm: undefined,
+        picksNothing: undefined,
         openWhileReadOnly: undefined,
         ui: undefined,
         maxLines: undefined,
@@ -67765,7 +67883,7 @@ const css$s = /* css */`@layer navi {
   --x-picker-spin-padding-bottom: var(--picker-spin-padding-bottom, var(--picker-spin-padding-y, var(--picker-spin-padding, var(--picker-spin-padding-y-default))));
   --x-picker-spin-padding-left: var(--picker-spin-padding-left, var(--picker-spin-padding-x, var(--picker-spin-padding, var(--picker-spin-padding-x-default))));
   font-size: var(--navi-control-font-size);
-  font-family: var(--navi-control-font-family);
+  font-family: var(--navi-control-font-family, inherit);
   border: var(--navi-control-border-width) solid
       var(--navi-control-border-color);
   border-top-left-radius: var(--x-corner-top-left-radius, var(--navi-control-border-radius));
@@ -67915,7 +68033,7 @@ const css$s = /* css */`@layer navi {
 
 .navi_spin_group {
   font-size: var(--navi-control-font-size);
-  font-family: var(--navi-control-font-family);
+  font-family: var(--navi-control-font-family, inherit);
   border: var(--navi-control-border-width) solid
       var(--navi-control-border-color);
   border-top-left-radius: var(--x-corner-top-left-radius, var(--navi-control-border-radius));
@@ -70813,7 +70931,7 @@ const css$m = /* css */`.navi_wheel_container {
       transparent);
   color: var(--wheel-color);
   font-size: var(--navi-control-font-size);
-  font-family: var(--navi-control-font-family);
+  font-family: var(--navi-control-font-family, inherit);
   border: var(--navi-control-border-width) solid
       var(--navi-control-border-color);
   border-radius: var(--navi-control-border-radius);
@@ -71103,7 +71221,7 @@ const css$m = /* css */`.navi_wheel_container {
   color: var(--wheel-color, light-dark(#111, #eee));
   font-weight: 600;
   font-size: var(--navi-control-font-size);
-  font-family: var(--navi-control-font-family);
+  font-family: var(--navi-control-font-family, inherit);
   white-space: nowrap;
   user-select: none;
   justify-content: center;
@@ -75864,7 +75982,6 @@ const css$g = /* css */`.navi_table_root {
 
 .navi_table {
   --editing-border-color: #a8c7fa;
-  font-family: Arial;
   font-size: 16px;
 }