@jsenv/navi 0.29.8 → 0.29.10

package/dist/jsenv_navi.js

@@ -1663,6 +1663,11 @@ const generateSignalId = () => {
  * @param {"string" | "number" | "boolean" | "object"} [options.type="string"] - Type for localStorage serialization/deserialization
  * @param {number} [options.step] - For number type: step size for precision. Values will be rounded to nearest multiple of step.
  * @param {Array} [options.oneOf] - Array of valid values for validation. Signal will be marked invalid if value is not in this array
+ * @param {boolean} [options.weak=false] - The param qualifies one visit, not the screen: it is written into a
+ *   url only when explicitly named (`routeParams={{ edit: id }}`), never inherited from the signal's current
+ *   value, and it goes back to the default value when the route stops matching. Use it for params like an
+ *   "edit this one" id, where every other link to the screen must lead to the plain screen.
+ *   Incompatible with `persists` (throws).
  * @param {boolean} [options.debug=false] - Enable debug logging for this signal's operations
  * @returns {import("@preact/signals").Signal} A signal that can be synchronized with a source signal and/or persisted in localStorage. The signal includes a `validity` property for validation state.
  *
@@ -1735,8 +1740,15 @@ const stateSignal = (defaultValue, options = {}) => {
     default: staticFallback,
     ignoreArrayOrder,
     autoFix,
+    weak = false,
   } = options;
 
+  if (weak && persists) {
+    throw new TypeError(
+      `stateSignal "${id}": weak and persists are contradictory — a weak param qualifies one visit, it cannot be restored from a previous session.`,
+    );
+  }
+
   // Check if defaultValue is a signal (dynamic default) or static value
   const isDynamicDefault =
     defaultValue &&
@@ -2099,6 +2111,23 @@ setBaseUrl(
     : window.location.origin,
 );
 
+/**
+ * The single place where "this param was not provided, take the signal value"
+ * happens while building a url. A weak param qualifies one visit, not the
+ * screen: it enters a url only when the caller names it (or when it is already
+ * in the url being preserved), so here it always reads as absent.
+ * Not reading the signal also keeps the built url from depending on it.
+ */
+const readSignalForUrlBuild = (connection) => {
+  if (!connection || !connection.signal) {
+    return undefined;
+  }
+  if (connection.weak) {
+    return undefined;
+  }
+  return connection.signal.value;
+};
+
 /**
  * Creates a custom route pattern matcher
  */
@@ -2173,7 +2202,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
         // Parameter was explicitly provided - always respect explicit parameters
         continue;
       }
-      const signalValue = connection.signal.value;
+      const signalValue = readSignalForUrlBuild(connection);
       if (signalValue !== undefined) {
         // Parameter was not provided, check signal value
         resolvedParams[paramName] = signalValue;
@@ -2186,7 +2215,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
         // Parameter was explicitly provided - always respect explicit parameters
         continue;
       }
-      const signalValue = connection.signal.value;
+      const signalValue = readSignalForUrlBuild(connection);
       if (signalValue !== undefined) {
         // Parameter was not provided, check signal value
         resolvedParams[paramName] = signalValue;
@@ -2229,7 +2258,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
           continue;
         }
 
-        const ancestorSignalValue = ancestorConnection.signal.value;
+        const ancestorSignalValue = readSignalForUrlBuild(ancestorConnection);
         if (
           ancestorSignalValue !== undefined &&
           ancestorSignalValue !== ancestorConnection.getDefaultValue()
@@ -2307,7 +2336,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
           if (childParam in resolvedParams) {
             continue;
           }
-          const childSignalValue = childConnection.signal.value;
+          const childSignalValue = readSignalForUrlBuild(childConnection);
           // Only include if not already resolved and is non-default
           if (
             childSignalValue !== undefined &&
@@ -2349,7 +2378,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
         }
       } else {
         // Parameter not provided but signal has a value
-        const signalValue = connection.signal.value;
+        const signalValue = readSignalForUrlBuild(connection);
         if (connection.isCustomValue(signalValue)) {
           // Only include custom values
           filtered[paramName] = signalValue;
@@ -2368,7 +2397,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
         }
       } else {
         // Parameter not provided but signal has a value
-        const signalValue = connection.signal.value;
+        const signalValue = readSignalForUrlBuild(connection);
         if (connection.isCustomValue(signalValue)) {
           // Only include custom values
           filtered[paramName] = signalValue;
@@ -2385,7 +2414,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
   const canReachLiteralValue = (literalValue, params, literalPosition) => {
     // Check parent's own parameters (signals and user params)
     const parentCanProvide = connections.some((conn) => {
-      const signalValue = conn.signal.value;
+      const signalValue = readSignalForUrlBuild(conn);
       const userValue = params[conn.paramName];
       const effectiveValue = userValue !== undefined ? userValue : signalValue;
       return (
@@ -2414,7 +2443,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
       return false;
     }
     return connsAtPosition.some((conn) => {
-      const signalValue = conn.signal.value;
+      const signalValue = readSignalForUrlBuild(conn);
       return signalValue === literalValue && conn.isCustomValue(signalValue);
     });
   };
@@ -2469,7 +2498,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
               pathConnectionMap.get(paramName) ||
               queryConnectionMap.get(paramName);
             if (parentConnection) {
-              parentParamValue = parentConnection.signal.value;
+              parentParamValue = readSignalForUrlBuild(parentConnection);
             }
           }
 
@@ -2554,7 +2583,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
       paramValue = item.userValue;
     } else {
       paramName = item.paramName;
-      paramValue = item.signal.value;
+      paramValue = readSignalForUrlBuild(item);
       // Only include custom parent signal values (not using defaults)
       if (paramValue === undefined || !item.isCustomValue(paramValue)) {
         return { isCompatible: true, shouldInclude: false };
@@ -2661,7 +2690,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
         if (!siblingConnection) {
           continue;
         }
-        const siblingSignalValue = siblingConnection.signal.value;
+        const siblingSignalValue = readSignalForUrlBuild(siblingConnection);
         if (siblingSignalValue === undefined) {
           continue;
         }
@@ -2705,7 +2734,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
         const explicitValue = params[paramName];
         const connection =
           pathConnectionMap.get(paramName) || queryConnectionMap.get(paramName);
-        const signalValue = connection ? connection.signal.value : undefined;
+        const signalValue = readSignalForUrlBuild(connection);
 
         // Check if the parameter has the required value
         if (
@@ -2759,7 +2788,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
           hasActiveParams = true;
         }
       } else {
-        const signalValue = connection.signal.value;
+        const signalValue = readSignalForUrlBuild(connection);
         if (signalValue !== undefined) {
           // No explicit override - use signal value
           childParams[paramName] = signalValue;
@@ -2976,7 +3005,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
         }
         // If explicitly undefined, don't include it (which means don't use child route)
       } else {
-        const signalValue = connection.signal.value;
+        const signalValue = readSignalForUrlBuild(connection);
         if (
           signalValue !== undefined &&
           connection.isCustomValue(signalValue)
@@ -3016,7 +3045,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
           continue; // Already have this parameter
         }
 
-        const signalValue = connection.signal.value;
+        const signalValue = readSignalForUrlBuild(connection);
         // Only include custom signal values (not using defaults)
         if (
           signalValue !== undefined &&
@@ -3198,7 +3227,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
           paramName,
           connection,
         ] of childPatternObj.pathConnectionMap) {
-          const signalValue = connection.signal.value;
+          const signalValue = readSignalForUrlBuild(connection);
           if (
             signalValue !== undefined &&
             connection.isCustomValue(signalValue)
@@ -3220,7 +3249,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
           paramName,
           connection,
         ] of childPatternObj.queryConnectionMap) {
-          const signalValue = connection.signal.value;
+          const signalValue = readSignalForUrlBuild(connection);
           if (
             signalValue !== undefined &&
             connection.isCustomValue(signalValue)
@@ -3840,7 +3869,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
       );
       for (const conn of targetAncestor.connections) {
         console.debug(
-          `[${pattern}] tryDirectOptimization: Target connection ${conn.paramName}: value=${conn.signal.value}, isCustom=${conn.isCustomValue(conn.signal.value)}`,
+          `[${pattern}] tryDirectOptimization: Target connection ${conn.paramName}: value=${readSignalForUrlBuild(conn)}, isCustom=${conn.isCustomValue(readSignalForUrlBuild(conn))}`,
         );
       }
     }
@@ -3857,7 +3886,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
       }
 
       // Only include if not already processed and has custom value (not default)
-      const signalValue = connection.signal.value;
+      const signalValue = readSignalForUrlBuild(connection);
       if (signalValue !== undefined) {
         // Don't include path parameters that correspond to literal segments we're optimizing away
         const targetParam = targetParams.find((p) => p.name === paramName);
@@ -3903,7 +3932,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
         }
 
         // Only inherit custom values (not defaults) that we don't already have
-        const signalValue = connection.signal.value;
+        const signalValue = readSignalForUrlBuild(connection);
         if (
           signalValue !== undefined &&
           connection.isCustomValue(signalValue)
@@ -3989,7 +4018,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
         }
 
         // Only inherit if we don't have this param and parent has custom value (not default)
-        const parentSignalValue = parentConnection.signal.value;
+        const parentSignalValue = readSignalForUrlBuild(parentConnection);
         if (
           parentSignalValue !== undefined &&
           parentConnection.isCustomValue(parentSignalValue)
@@ -4075,7 +4104,36 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
   // search params are updated. When buildMostPreciseUrl performs an ancestor
   // optimisation (e.g. "/map/isochrone/compare" → "/map/isochrone") it is trusted
   // as-is because the built pathname will differ from the route's own base pathname.
+  // Weak params are never inherited from their signal, but a url that already
+  // carries one keeps it: staying on the same screen while another param
+  // changes must not end the visit this param qualifies.
+  const carryOverWeakParams = (currentUrl, params) => {
+    let paramsWithWeak = params;
+    for (const [paramName, connection] of [
+      ...pathConnectionMap,
+      ...queryConnectionMap,
+    ]) {
+      if (!connection.weak || paramName in paramsWithWeak) {
+        continue;
+      }
+      const currentValue = connection.signal.peek();
+      if (currentValue === undefined) {
+        continue;
+      }
+      const currentParams = applyOn(currentUrl);
+      if (!currentParams || currentParams[paramName] === undefined) {
+        continue;
+      }
+      if (paramsWithWeak === params) {
+        paramsWithWeak = { ...params };
+      }
+      paramsWithWeak[paramName] = currentParams[paramName];
+    }
+    return paramsWithWeak;
+  };
+
   const buildUrlPreservingPath = (currentUrl, params = {}) => {
+    params = carryOverWeakParams(currentUrl, params);
     const relativeBuiltUrl = buildMostPreciseUrl(params);
     if (!currentUrl) {
       return resolveRouteUrl(relativeBuiltUrl);
@@ -4332,7 +4390,7 @@ const parsePattern = (pattern, { pathConnectionMap, queryConnectionMap }) => {
         if (
           connection &&
           connection.signal &&
-          connection.signal.value === undefined &&
+          readSignalForUrlBuild(connection) === undefined &&
           !hasDefault
         ) {
           isOptional = true;
@@ -5516,7 +5574,10 @@ const route = (pattern, { searchParams } = {}) => {
       });
     };
     route.matchesParams = (providedParams) => {
-      const currentParams = route.params;
+      // paramsSignal (not route.params) so a component calling this during render
+      // subscribes to param changes: a navigation from /games/me/a to /games/me/b
+      // leaves matchingSignal untouched, only the params change.
+      const currentParams = route.paramsSignal.value;
       const resolvedParams = routePattern.resolveParams({
         ...currentParams,
         ...providedParams,
@@ -5883,6 +5944,22 @@ This prevents cross-test pollution and ensures clean state.`,
                 }
               }
 
+              // A weak param qualifies one visit: leaving the route ends it,
+              // whatever the family and whatever the default. Coming back by a
+              // url that does not carry the param comes back to a blank screen.
+              if (connection.weak) {
+                if (!parameterExtractedByMatchingRoute) {
+                  const defaultValue = connection.getDefaultValue();
+                  if (debug) {
+                    console.debug(
+                      `[route] weak param ${paramName}: route no longer matching, back to ${defaultValue}`,
+                    );
+                  }
+                  paramSignal.value = defaultValue;
+                }
+                continue;
+              }
+
               // Only reset signal if:
               // 1. We're navigating within the same route family (not to completely unrelated routes)
               // 2. AND no matching route extracts this parameter from URL
@@ -31360,6 +31437,15 @@ const useActionAsyncData = (action, {
     return [staleData, true, undefined];
   }
 
+  // An action without params has nothing to run and no one to start it: this is
+  // where a route action lands when its params getter returns false. It is not a
+  // load in progress, so there is nothing to wait for — suspending here would
+  // throw a promise that never settles, and the whole <Loading> subtree would
+  // stay hidden for good, silently.
+  if (runningState !== RUNNING && action.paramsSignal.peek() === undefined) {
+    return [action.dataSignal.peek(), false, undefined];
+  }
+
   // IDLE or RUNNING with loadingEffect: "delegate" — suspend
   const reason = runningState === RUNNING ? "loading" : "idle";
   loadingRef.current = {
@@ -33534,11 +33620,12 @@ const collectBranches = children => {
         type: "container",
         node: child
       };
+      const guardMatching = route ? route.matchingSignal.value : false;
       if (!matchingBranch) {
         if (matchingChild) {
           // Real leaf match inside — always select this container
           matchingBranch = branch;
-        } else if (route && route.matchingSignal.value) {
+        } else if (guardMatching) {
           // No leaf match but an explicit route guard matches — select this
           // container so it can render its own fallback inside its layout
           matchingBranch = branch;
@@ -33556,7 +33643,12 @@ const collectBranches = children => {
         type: "leaf",
         node: child
       };
-      if (!matchingBranch && route.matchingSignal.value && (!routeParams || route.matchesParams(routeParams))) {
+      // every signal is read even once a match is found: reading is what
+      // subscribes the container to it, and a branch that is skipped today is
+      // the one that must wake the container up tomorrow
+      const matching = route.matchingSignal.value;
+      const paramsMatching = routeParams ? route.matchesParams(routeParams) : true;
+      if (!matchingBranch && matching && paramsMatching) {
         matchingBranch = branch;
       }
     }
@@ -51959,25 +52051,30 @@ installImportMetaCssBuild(import.meta);/**
  * A value one steps through, one press at a time: what is chosen sits between
  * the way back and the way on, and the two of them are the whole control.
  *
- * Days for now — DaySpin below — but nothing here is about days except how
- * one is written and what "one step" adds. The name says where this is going:
- * a picker whose value is stepped rather than typed (a month, a page, a size),
- * shown as the picker it is.
+ * `Spin` knows nothing about what it steps through. It is handed how to move
+ * one step (`valueAtStep`), how to tell two values apart (`compareValues`) and
+ * what to write for one (`renderValue`); everything else — the frame, the two
+ * ways out, the ends one cannot go past, the value a form carries — is the
+ * same whatever the value is. `DaySpin` and `NumberSpin` at the bottom are two
+ * of those answers, and a caller can write a third.
+ *
+ * The middle is one of two things, and that is the only real fork here:
+ *
+ * - a value one PICKS (`DaySpin`): a headless picker holds it, pressing the
+ *   middle opens it, and the three slides of a looping container show the one
+ *   before, this one and the one after — a window over a row with no end.
+ * - a value one TYPES (`editable`, `NumberSpin`): the middle IS the field.
+ *   Nothing travels — one cannot slide what is being typed into — and the
+ *   arrows step the value where the caret already is.
  *
  * A picker, so it lives here: what one presses in the middle IS a picker, and
  * the stepping is a way of showing it. It is headless and behind the three
  * slides — there is one value being chosen, so there is one picker for it.
  *
- * Three slides for a row with no end, kept by a looping slide container: a
- * press travels by one, then the window comes back to the middle while the
- * value moves one step under it (see its `loop`/`onLoop`). So the three are
- * only ever "the one before, this one, the one after".
- *
- * Two things take the keyboard and no more: the container (arrows step,
- * Enter/Space open the picker) and the two chevrons. What is in the middle is
- * not a control — a click on the container opens the picker by command — which
- * is what keeps the focus where the travel happens instead of moving it into a
- * slide that is about to leave.
+ * Two things take the keyboard and no more: the middle (the container in the
+ * picking case, the field in the typing one) and nothing else — the chevrons
+ * refuse it on purpose, which is what keeps the focus where the travel happens
+ * instead of moving it into a slide that is about to leave.
  */
 const css$p = /* css */`
   @layer navi {
@@ -51991,7 +52088,7 @@ const css$p = /* css */`
 
   .navi_picker_spin {
     /* The padding is written on what is inside the box rather than on the box
-       — the day takes all four sides, the two chevrons only the vertical ones
+       — the value takes all four sides, the two chevrons only the vertical ones
        — so the four sides are resolved once here, in the side-then-axis-then
        -shorthand order a Box resolves them in. What writes them: the padding
        props, through PICKER_SPIN_STYLE_CSS_VARS below. */
@@ -52025,7 +52122,7 @@ const css$p = /* css */`
     );
     /* What the loading outline is drawn around. */
     position: relative;
-    /* Written in the control font, like the picker it wraps: the day and its
+    /* Written in the control font, like the picker it wraps: the value and its
        two chevrons are a control, not running text. */
     font-size: var(--navi-control-font-size);
     font-family: var(--navi-control-font-family);
@@ -52042,17 +52139,24 @@ const css$p = /* css */`
        keyboard here (see navi-focus-delegate below). */
     outline-color: var(--navi-focus-outline-color);
     outline-offset: 0px;
+    /* No grey flash under a finger: what a press does is said by the chevron's
+       own background, and the browser's rectangle is drawn square over corners
+       that are round. Inherited, so the three pieces inside get it too. */
+    -webkit-tap-highlight-color: var(--navi-control-tap-highlight-color);
   }
-  /* The days hold the keyboard, and this box wears their ring: the container
-     fills it, so its own ring would be drawn a pixel inside this border and
-     two rings that close together read as a mistake. Same offer a dialog and a
-     popover answer (data-focus-outline-delegate, see slide_container.jsx), and
-     the same reply — the delegate stands down.
+  /* The middle holds the keyboard, and this box wears its ring: whatever is in
+     there fills it, so a ring of its own would be drawn a pixel inside this
+     border and two rings that close together read as a mistake. Same offer a
+     dialog and a popover answer (data-focus-outline-delegate, see
+     slide_container.jsx), and the same reply — the delegate stands down; a
+     field says it with an outline of zero width instead (see Spin's own
+     outlineWidth below).
      Said on this box too (the first selector): nothing focuses it for real —
-     it is the container that takes the keyboard — but it is where the ring is
+     it is the middle that takes the keyboard — but it is where the ring is
      drawn, so a demo can hold it there and show what it looks like. */
   .navi_picker_spin[data-focus-visible],
-  .navi_picker_spin:has([data-focus-outline-delegate][data-focus-visible]) {
+  .navi_picker_spin:has([data-focus-outline-delegate][data-focus-visible]),
+  .navi_picker_spin:has(.navi_input[data-focus-visible]) {
     outline-style: solid;
   }
   .navi_picker_spin [data-focus-outline-delegate] {
@@ -52103,6 +52207,14 @@ const css$p = /* css */`
     width: min(100%, var(--picker-spin-picker-width, 12ch));
     translate: -50% 0;
   }
+  /* A middle one types into is the field itself: it takes the whole room
+     between the chevrons rather than sitting in the centre of it, so the
+     caret is where the value is and a click anywhere in the middle lands in
+     the field. */
+  .navi_picker_spin_middle > .navi_input {
+    min-width: 0;
+    flex: 1 1 auto;
+  }
   /* Where the padding lands: all four sides on the value, the two vertical
      ones on the chevrons below — the same number above and below is what makes
      the three one line rather than three boxes, while sideways it is the room
@@ -52128,9 +52240,9 @@ const css$p = /* css */`
   .navi_picker_spin[data-disabled] [data-slide-container] {
     cursor: default;
   }
-  /* Kept inside its own slide: the three days share one cell, so anything
-     sticking out would be written across the two beside it. A day too long for
-     the box simply wraps — the box grows, and the words are all there; say
+  /* Kept inside its own slide: the three values share one cell, so anything
+     sticking out would be written across the two beside it. A value too long
+     for the box simply wraps — the box grows, and the words are all there; say
      maxLines to cut it instead, which the text itself knows how to do. */
   .navi_picker_spin [data-slide] > * {
     max-width: 100%;
@@ -52157,7 +52269,12 @@ const css$p = /* css */`
     border-radius: 0;
     cursor: pointer;
   }
-  .navi_picker_spin > .navi_picker_spin_way_out:hover {
+  /* Said as data-hover rather than :hover: a touch browser synthesizes the
+     enter and never the leave, so a CSS :hover would stay grey under the last
+     chevron pressed until something else was touched. What tracks it (see
+     pseudo_styles.js) knows there is no hover on such a device and simply does
+     not set the attribute. */
+  .navi_picker_spin > .navi_picker_spin_way_out[data-hover] {
     background: color-mix(in srgb, currentColor 8%, transparent);
   }
   /* Nothing that way: still there, still pressable — pressing it is how one
@@ -52183,22 +52300,28 @@ const css$p = /* css */`
      of a rounded spin is rounded there too, and nowhere else — the two corners
      it does not own stay at the 0 above. Said with inherit rather than clipped
      away with overflow, which would cut the focus ring of the very button it
-     rounds. */
+     rounds.
+     Which chevron is which is asked of the chevron itself (data-way-out) rather
+     than of its place among its siblings: the loading outline is a <span> too
+     and it is written first, so :first-of-type named IT and the chevron at the
+     start went unrounded. */
   .navi_picker_spin:not([data-vertical])
-    > .navi_picker_spin_way_out:first-of-type {
+    > .navi_picker_spin_way_out[data-way-out="start"] {
     border-start-start-radius: inherit;
     border-end-start-radius: inherit;
   }
   .navi_picker_spin:not([data-vertical])
-    > .navi_picker_spin_way_out:last-of-type {
+    > .navi_picker_spin_way_out[data-way-out="end"] {
     border-start-end-radius: inherit;
     border-end-end-radius: inherit;
   }
-  .navi_picker_spin[data-vertical] > .navi_picker_spin_way_out:first-of-type {
+  .navi_picker_spin[data-vertical]
+    > .navi_picker_spin_way_out[data-way-out="start"] {
     border-start-start-radius: inherit;
     border-start-end-radius: inherit;
   }
-  .navi_picker_spin[data-vertical] > .navi_picker_spin_way_out:last-of-type {
+  .navi_picker_spin[data-vertical]
+    > .navi_picker_spin_way_out[data-way-out="end"] {
     border-end-end-radius: inherit;
     border-end-start-radius: inherit;
   }
@@ -52206,53 +52329,73 @@ const css$p = /* css */`
 
 /**
  * @type {import("ignore:preact").FunctionComponent<{
- *   value?: string,
- *   defaultValue?: string,
- *   signal?: import("@preact/signals").Signal<string>,
+ *   value?: any,
+ *   defaultValue?: any,
+ *   signal?: import("@preact/signals").Signal<any>,
  *   name?: string,
- *   min?: string,
- *   max?: string,
+ *   min?: any,
+ *   max?: any,
  *   step?: number,
+ *   type?: string,
+ *   editable?: boolean,
+ *   growsUpward?: boolean,
+ *   fallbackValue?: any,
+ *   valueAtStep: (value: any, count: number) => any,
+ *   compareValues?: (a: any, b: any) => number,
+ *   renderValue?: (value: any) => import("ignore:preact").ComponentChildren,
+ *   controlProps?: object,
  *   duration?: number,
- *   lang?: string,
- *   renderDay?: (day: string) => import("ignore:preact").ComponentChildren,
+ *   vertical?: boolean,
  *   previousLabel?: string,
  *   nextLabel?: string,
  *   [key: string]: any,
  * }>}
- * @param {string} [value] The day shown, as "YYYY-MM-DD". Held from above:
- *   `uiAction` says when it should move. Say `signal` for a two-way binding
- *   instead, or `defaultValue` to let the spin hold the day itself.
- * @param {number} [step=1] How many days a press covers — 7 for a week at a
- *   time, and the label then names the day one lands on, as it always does.
+ * @param {any} [value] The value shown. Held from above: `uiAction` says when
+ *   it should move. Say `signal` for a two-way binding instead, or
+ *   `defaultValue` to let the spin hold the value itself.
+ * @param {(value: any, count: number) => any} valueAtStep What is `count` steps
+ *   away from `value` — the whole of what a spin has to know about what it
+ *   steps through. Called with -1 and +1 (times `step`) for the two ways out.
+ * @param {(a: any, b: any) => number} [compareValues] Which of two values comes
+ *   first, the way a sort comparator answers. Only `min`/`max` need it, and the
+ *   default compares them as they compare with `<` — which is what an ISO date
+ *   wants and what a number does not.
+ * @param {any} [fallbackValue] What is shown when nobody said anything: a spin
+ *   always shows a value, so there is always one to fall back on.
+ * @param {string} [type="text"] What kind of value it is, handed to the control
+ *   holding it — a picker's `type` ("date", "time"…) or an input's.
+ * @param {boolean} [editable] The middle is typed into rather than pressed:
+ *   the field IS the middle, and nothing travels. Without it the value is
+ *   picked — a headless picker behind three slides that travel one step at a
+ *   press.
+ * @param {object} [controlProps] Anything else the control in the middle takes
+ *   (`inputMode`, `maxLength`, `placeholder`…).
+ * @param {number} [step=1] How many steps a press covers.
  * @param {number} [duration=250] How long a travel takes, in milliseconds.
- * @param {string} [min] The first day one can reach, as "YYYY-MM-DD"; `max` is
- *   the last. Beyond them the travel simply does not happen and the chevron
- *   that way says so.
- * @param {"long"|"short"|"numeric"} [format="long"] How the date is written.
- *   Long by default, since this is a control one reads rather than a column
- *   one scans; `short` where the room is not there.
+ * @param {any} [min] The first value one can reach; `max` is the last. Beyond
+ *   them the travel simply does not happen and the chevron that way says so.
  * @param {string} [padding] The room around the value, `paddingX`/`paddingY`
  *   and the four sides included. It goes on what is inside the box rather than
- *   on the box: above and below it is taken by the day AND by the two chevrons,
- *   which is what makes the three the same height; sideways it is the room
- *   between the day and the chevron beside it. Left unsaid it is the padding
- *   every picker takes (`--navi-picker-padding-x-default` and its `-y` twin),
- *   so a theme that spaces its fields spaces this one with them.
- * @param {number} [maxLines] How many lines the day may take before it is cut
- *   with an ellipsis — `maxLines={1}` keeps it on one line. Without it a day
+ *   on the box: above and below it is taken by the value AND by the two
+ *   chevrons, which is what makes the three the same height; sideways it is the
+ *   room between the value and the chevron beside it. Left unsaid it is the
+ *   padding every picker takes (`--navi-picker-padding-x-default` and its `-y`
+ *   twin), so a theme that spaces its fields spaces this one with them.
+ * @param {number} [maxLines] How many lines the value may take before it is cut
+ *   with an ellipsis — `maxLines={1}` keeps it on one line. Without it a value
  *   too long for the box wraps, and the box grows.
  * @param {boolean} [vertical] The same control standing up: the ways out above
- *   and below rather than left and right, and the days travelling upwards.
+ *   and below rather than left and right.
+ * @param {boolean} [growsUpward] Which end of a standing spin holds the value
+ *   one steps up to. Off by default — what one walks through comes from below,
+ *   the way the next line of a list does. On for a quantity: pressing ▲ has to
+ *   mean a bigger number. Nothing to say about a spin lying down, where the way
+ *   on is always to the right.
  * Everything a box takes is taken here too — `width`, `borderWidth`,
  * `borderRadius`, `backgroundColor`: this IS a box, and its corners are passed
  * on to the chevrons sitting in them.
- * @param {(day: string) => import("ignore:preact").ComponentChildren} [renderDay] What
- *   to write for a day. Defaults to the date plus what it is to today when
- *   there is a word for it ("samedi 8 août (demain)"), since a day near now is
- *   read as a distance from now before it is read as a date.
  */
-const DaySpin = ({
+const Spin = ({
   value,
   defaultValue,
   uiAction,
@@ -52262,76 +52405,77 @@ const DaySpin = ({
   max,
   step = 1,
   duration = 250,
-  lang,
-  format = "long",
+  type = "text",
+  editable,
+  growsUpward,
+  fallbackValue,
+  valueAtStep,
+  compareValues = compareValuesDefault,
+  renderValue = renderValueDefault,
+  controlProps,
   vertical,
   readOnly,
   disabled,
   loading,
   maxLines,
-  renderDay = renderDayDefault,
   previousLabel,
   nextLabel,
   ...rest
 }) => {
   import.meta.css = [css$p, "@jsenv/navi/src/control/picker/picker_spin.jsx"];
   const id = useId();
-  const containerId = `${id}_days`;
-  const pickerId = `${id}_picker`;
-  // The picker holds the day, and it is asked rather than shadowed: `value`,
-  // `defaultValue` and `signal` are handed to it untouched (see below), it
-  // settles which of them wins — and what a form makes of each — and this reads
-  // the answer back. Nothing of that story is told twice.
-  const pickerRef = useRef();
-  const dayFallback = firstDayAllowed({
-    min,
-    max,
-    step
-  });
-  const day = useControlUIState(pickerRef, value ?? defaultValue ?? signalProp?.peek()) ?? dayFallback;
+  const containerId = `${id}_values`;
+  const controlId = `${id}_control`;
+  // The control holds the value, and it is asked rather than shadowed:
+  // `value`, `defaultValue` and `signal` are handed to it untouched (see
+  // below), it settles which of them wins — and what a form makes of each —
+  // and this reads the answer back. Nothing of that story is told twice.
+  const controlRef = useRef();
+  const middleRef = useRef();
+  const valueShown = useControlUIState(controlRef, value ?? defaultValue ?? signalProp?.peek()) ?? fallbackValue;
 
   // …and the other way round when a signal was handed over: a bound signal is
-  // the day, wherever it is moved from — the url, a back/forward, a button
-  // elsewhere on the page — and the control follows it. A picker seeded from a
+  // the value, wherever it is moved from — the url, a back/forward, a button
+  // elsewhere on the page — and the control follows it. A control seeded from a
   // signal only writes back into it (see resolveInputProps), which is enough
-  // for a field one only ever types into and not for a day that is also moved
-  // from outside. Undefined is not a day: the signal has nothing to say, so the
-  // control goes back to what it started on.
-  const signalDay = signalProp ? signalProp.value : undefined;
-  // The day as of the render this effect belongs to, and not one the closure
+  // for a field one only ever types into and not for a value that is also moved
+  // from outside. Undefined is not a value: the signal has nothing to say, so
+  // the control goes back to what it started on.
+  const signalValue = signalProp ? signalProp.value : undefined;
+  // The value as of the render this effect belongs to, and not one the closure
   // captured a while ago: a step writes the signal, the signal brings us back
-  // here, and comparing against a stale day would set it a second time — one
+  // here, and comparing against a stale value would set it a second time — one
   // uiAction per step becoming two.
-  const dayRef = useRef(day);
-  dayRef.current = day;
+  const valueRef = useRef(valueShown);
+  valueRef.current = valueShown;
   useLayoutEffect(() => {
-    const pickerEl = pickerRef.current;
-    if (!signalProp || !pickerEl) {
+    const controlEl = controlRef.current;
+    if (!signalProp || !controlEl) {
       return;
     }
-    if (signalDay === undefined) {
-      dispatchRequestResetUIState(pickerEl);
+    if (signalValue === undefined) {
+      dispatchRequestResetUIState(controlEl);
       return;
     }
-    if (signalDay !== dayRef.current) {
-      dispatchRequestSetUIState(pickerEl, signalDay, {});
+    if (signalValue !== valueRef.current) {
+      dispatchRequestSetUIState(controlEl, signalValue, {});
     }
-  }, [signalDay]);
+  }, [signalValue]);
 
-  // A step is a change made to the picker, not beside it: it goes in the way a
+  // A step is a change made to the control, not beside it: it goes in the way a
   // paste or a pick from the calendar goes in, so the signal, the form and
   // `uiAction` all learn about it from the same place — and the event that
   // asked for it travels with it, which is how `uiAction` can tell a chevron
   // from the calendar.
-  // What asked for the day being set, while it is being set: the picker
+  // What asked for the value being set, while it is being set: the control
   // announces the change as its own input event, which says nothing of what
   // started it — so it is held here for the length of the dispatch and handed
-  // to uiAction below. That is how a caller tells a chevron from the calendar.
+  // to uiAction below.
   const stepEventRef = useRef(null);
-  const setDay = (dayNext, event) => {
+  const setValue = (valueNext, event) => {
     stepEventRef.current = event;
     try {
-      dispatchRequestSetUIState(pickerRef.current, dayNext, {
+      dispatchRequestSetUIState(controlRef.current, valueNext, {
         event
       });
     } finally {
@@ -52340,29 +52484,29 @@ const DaySpin = ({
   };
 
   // Passed through rather than defaulted here: a prop nobody wrote must not
-  // reach the picker at all (it reads the presence of `value`, not its
+  // reach the control at all (it reads the presence of `value`, not its
   // content), so each is added only if it was given.
-  const dayProps = {};
+  const valueProps = {};
   if (value !== undefined) {
-    dayProps.value = value;
+    valueProps.value = value;
   } else {
     if (signalProp) {
-      dayProps.signal = signalProp;
+      valueProps.signal = signalProp;
     }
-    // A day is always shown, so the picker always HOLDS one: what was named, or
-    // what the signal starts on, or today (the nearest day a min/max/step
-    // leaves reachable). Said as a default rather than as a value, so a form
-    // reads the day shown as an answer one can send rather than as something it
-    // already holds — and said even when a signal is bound, because a signal
-    // with nothing in it would otherwise leave the picker empty while the
-    // spin shows a day, and a form has nothing to send about an empty field.
-    dayProps.defaultValue = defaultValue ?? signalProp?.options?.getDefaultValue?.(false) ?? dayFallback;
+    // A value is always shown, so the control always HOLDS one: what was named,
+    // or what the signal starts on, or the fallback. Said as a default rather
+    // than as a value, so a form reads what is shown as an answer one can send
+    // rather than as something it already holds — and said even when a signal
+    // is bound, because a signal with nothing in it would otherwise leave the
+    // control empty while the spin shows a value, and a form has nothing to
+    // send about an empty field.
+    valueProps.defaultValue = defaultValue ?? signalProp?.options?.getDefaultValue?.(false) ?? fallbackValue;
   }
 
   // Told from above as often as said here: a form running its action puts
   // every control inside it out of service (that is how the chevrons grey out
-  // by themselves), and the day they sit around must fade with them — it is one
-  // control, not a box with three moods.
+  // by themselves), and the value they sit around must fade with them — it is
+  // one control, not a box with three moods.
   const readOnlyFromAbove = useContext(ReadOnlyContext);
   const loadingFromAbove = useContext(LoadingContext$1);
   const disabledFromAbove = useContext(DisabledContext);
@@ -52388,15 +52532,55 @@ const DaySpin = ({
     }
     return undefined;
   };
-  const dayTextProps = {
-    lang,
-    format,
-    maxLines
+  const valuePrevious = valueAtStep(valueShown, -step);
+  const valueNext = valueAtStep(valueShown, step);
+  const hasMin = min !== undefined && min !== "";
+  const hasMax = max !== undefined && max !== "";
+  const previousAllowed = !hasMin || compareValues(valuePrevious, min) >= 0;
+  const nextAllowed = !hasMax || compareValues(valueNext, max) <= 0;
+
+  // Where the keyboard is put back after a press on a chevron: whatever holds
+  // it in this spin, so one can keep going with the keys where one was. Found
+  // in the middle rather than by id — a field's id lands on the box around it,
+  // and what takes the keyboard is the input inside.
+  const focusMiddle = () => {
+    const target = editable ? middleRef.current?.querySelector(".navi_control_input") : document.getElementById(containerId);
+    target?.focus({
+      preventScroll: true
+    });
+  };
+
+  // Which end of a standing spin holds the value one steps UP to. A quantity
+  // grows upwards — pressing ▲ on a number means a bigger number, and anything
+  // else is read as a bug. What one walks through does the opposite: the day
+  // after today arrives from below, the way the next line of a list does.
+  const startIsNext = vertical && growsUpward;
+  const valueAtStart = startIsNext ? valueNext : valuePrevious;
+  const valueAtEnd = startIsNext ? valuePrevious : valueNext;
+  const startAllowed = startIsNext ? nextAllowed : previousAllowed;
+  const endAllowed = startIsNext ? previousAllowed : nextAllowed;
+  const wayOut = atStart => {
+    const isNext = atStart ? startIsNext : !startIsNext;
+    return jsx(WayOut, {
+      atStart: atStart,
+      unavailableMessage: wayOutMessage(atStart ? startAllowed : endAllowed, isNext ? "spin.nothing_after" : "spin.nothing_before"),
+      label: isNext ? nextLabel ?? naviI18n("spin.next") : previousLabel ?? naviI18n("spin.previous"),
+      onPress: e => {
+        focusMiddle();
+        if (editable) {
+          setValue(atStart ? valueAtStart : valueAtEnd, e);
+          return;
+        }
+        // A direction on the map, not a value: the slides are laid out from
+        // start to end (see below), so the way out at the start walks
+        // backwards through them whichever value sits there.
+        const command = atStart ? vertical ? "--navi-up" : "--navi-left" : vertical ? "--navi-down" : "--navi-right";
+        triggerNaviCommand(e.currentTarget, command, e);
+      },
+      commandFor: editable ? undefined : containerId,
+      children: atStart ? vertical ? jsx(ChevronUpSvg, {}) : jsx(ChevronLeftSvg, {}) : vertical ? jsx(ChevronDownSvg, {}) : jsx(ChevronRightSvg, {})
+    });
   };
-  const dayPrevious = addDays(day, -step);
-  const dayNext = addDays(day, step);
-  const previousAllowed = !min || dayPrevious >= min;
-  const nextAllowed = !max || dayNext <= max;
   return jsxs(Box, {
     ...rest,
     baseClassName: "navi_picker_spin",
@@ -52415,132 +52599,167 @@ const DaySpin = ({
       loading: loading,
       color: "var(--navi-loader-color)",
       inset: -2
-    }), jsx(WayOut, {
-      command: vertical ? "--navi-up" : "--navi-left",
-      containerId: containerId,
-      unavailableMessage: wayOutMessage(previousAllowed, "spin.nothing_before"),
-      label: previousLabel ?? naviI18n("spin.previous"),
-      children: vertical ? jsx(ChevronUpSvg, {}) : jsx(ChevronLeftSvg, {})
-    }), jsxs("div", {
+    }), wayOut(true), jsx("div", {
       className: "navi_picker_spin_middle",
-      children: [jsx(Picker, {
-        ref: pickerRef,
-        id: pickerId,
-        type: "date",
-        variant: "headless",
-        name: name
-        // Whatever was said about the day, said to the picker: a `value` it
-        // holds, a `signal` it follows, a `defaultValue` it merely starts on —
-        // including what a form makes of the difference (it HOLDS a value and
-        // has nothing to send back, where a default is a suggestion and
-        // confirming it is an answer). A day is always shown, so there is
-        // always a default: today, when nobody named one.
-        ,
-
-        ...dayProps,
+      ref: middleRef,
+      children: editable ? jsx(Input, {
+        ref: controlRef,
+        type: type,
+        name: name,
+        ...controlProps,
+        ...valueProps,
         min: min,
         max: max,
+        step: step,
         readOnly: readOnly,
         disabled: disabled,
-        loading: loading,
-        uiAction: (dayNext, event) => {
-          uiAction?.(dayNext, stepEventRef.current ?? event);
-        }
-      }), jsxs(SlideContainer, {
-        id: containerId,
-        layout: vertical ? "column" : "row"
-        // What is left beside the two chevrons, whatever the days it holds are
-        // long: a control that resizes as one steps through it is a control one
-        // has to aim at twice.
+        loading: loading
+        // No frame of its own inside a frame, and no ring of its own
+        // either: the spin draws both (see the CSS above), and an outline
+        // of zero width is how a field stands down without its focus
+        // state being touched.
         ,
 
+        variant: "discrete",
+        outlineWidth: "0",
+        textAlign: "center",
         expandX: true,
-        defaultCurrent: "current",
-        duration: `${duration}ms`
-        // The three days are a window over an endless row: the container plays
-        // the travel and comes back to the middle, and the day moves one step
-        // here, in onLoop, as it lands.
-        ,
+        uiAction: (valueNext, event) => {
+          uiAction?.(valueNext, stepEventRef.current ?? event);
+        }
+      }) : jsxs(Fragment$1, {
+        children: [jsx(Picker, {
+          ref: controlRef,
+          id: controlId,
+          type: type,
+          variant: "headless",
+          name: name,
+          ...controlProps,
+          ...valueProps,
+          min: min,
+          max: max,
+          readOnly: readOnly,
+          disabled: disabled,
+          loading: loading,
+          uiAction: (valueNext, event) => {
+            uiAction?.(valueNext, stepEventRef.current ?? event);
+          }
+        }), jsxs(SlideContainer, {
+          id: containerId,
+          layout: vertical ? "column" : "row"
+          // What is left beside the two chevrons, whatever the values it
+          // holds are long: a control that resizes as one steps through it
+          // is a control one has to aim at twice.
+          ,
 
-        loop: true,
-        onLoop: ({
-          dx,
-          dy,
-          event
-        }) => {
-          // One step, whichever axis it came from: the map is a line, so only
-          // one of the two is ever anything but zero. The event goes with it —
-          // it is what says a chevron (or an arrow key) asked for this day.
-          setDay(addDays(day, (dx || dy) * step), event);
-        }
-        // The whole middle opens the calendar — a command, like the chevrons
-        // send one, and no button of its own: the day would then be one more
-        // Tab stop, and the focus would follow it out of the box as it travels.
-        ,
+          expandX: true,
+          defaultCurrent: "current",
+          duration: `${duration}ms`
+          // The three values are a window over an endless row: the
+          // container plays the travel and comes back to the middle, and
+          // the value moves one step here, in onLoop, as it lands.
+          ,
 
-        commandFor: pickerId
-        // Sent whatever state the control is in: the picker is the one that
-        // knows it cannot be opened right now, and refusing there is what says
-        // so out loud (read-only, busy). Refusing here would be a press that
-        // does nothing and explains nothing.
-        // preventDefault, because a <Label> around the whole control forwards
-        // a click to what it labels — the picker — and that would open the
-        // calendar a second time, right after this command did.
-        ,
+          loop: true,
+          onLoop: ({
+            dx,
+            dy,
+            event
+          }) => {
+            // One step, whichever axis it came from: the map is a line, so
+            // only one of the two is ever anything but zero. Towards the
+            // end of the line is a step forward, unless the line was laid
+            // out the other way round (startIsNext). The event goes with
+            // it — it is what says a chevron (or an arrow key) asked for
+            // this value.
+            const towardsEnd = dx || dy;
+            setValue(valueAtStep(valueShown, (startIsNext ? -towardsEnd : towardsEnd) * step), event);
+          }
+          // The whole middle opens the picker — a command, like the
+          // chevrons send one, and no button of its own: the value would
+          // then be one more Tab stop, and the focus would follow it out of
+          // the box as it travels.
+          ,
 
-        onClick: e => {
-          e.preventDefault();
-          triggerNaviCommand(e.currentTarget, "--navi-open", e);
-        },
-        children: [jsx(Slide, {
-          area: "previous",
-          flex: true,
-          align: "center",
-          children: renderDay(dayPrevious, dayTextProps)
-        }), jsx(Slide, {
-          area: "current",
-          flex: true,
-          align: "center"
-          // The days a min/max leaves out are simply not reachable: the way out
-          // is closed on the slide being left, so a key, a chevron and a
-          // command are all stopped by the same thing.
+          commandFor: controlId
+          // Sent whatever state the control is in: the picker is the one
+          // that knows it cannot be opened right now, and refusing there is
+          // what says so out loud (read-only, busy). Refusing here would be
+          // a press that does nothing and explains nothing.
+          // preventDefault, because a <Label> around the whole control
+          // forwards a click to what it labels — the picker — and that
+          // would open the calendar a second time, right after this command
+          // did.
           ,
 
-          preventNavPrevious: !previousAllowed,
-          preventNavNext: !nextAllowed,
-          children: renderDay(day, dayTextProps)
-        }), jsx(Slide, {
-          area: "next",
-          flex: true,
-          align: "center",
-          children: renderDay(dayNext, dayTextProps)
+          onClick: e => {
+            e.preventDefault();
+            triggerNaviCommand(e.currentTarget, "--navi-open", e);
+          },
+          children: [jsx(Slide, {
+            area: "start",
+            flex: true,
+            align: "center",
+            children: renderValue(valueAtStart, {
+              maxLines
+            })
+          }), jsx(Slide, {
+            area: "current",
+            flex: true,
+            align: "center"
+            // The values a min/max leaves out are simply not reachable: the
+            // way out is closed on the slide being left, so a key, a
+            // chevron and a command are all stopped by the same thing.
+            ,
+
+            preventNavPrevious: !startAllowed,
+            preventNavNext: !endAllowed,
+            children: renderValue(valueShown, {
+              maxLines
+            })
+          }), jsx(Slide, {
+            area: "end",
+            flex: true,
+            align: "center",
+            children: renderValue(valueAtEnd, {
+              maxLines
+            })
+          })]
         })]
-      })]
-    }), jsx(WayOut, {
-      command: vertical ? "--navi-down" : "--navi-right",
-      containerId: containerId,
-      unavailableMessage: wayOutMessage(nextAllowed, "spin.nothing_after"),
-      label: nextLabel ?? naviI18n("spin.next"),
-      children: vertical ? jsx(ChevronDownSvg, {}) : jsx(ChevronRightSvg, {})
-    })]
+      })
+    }), wayOut(false)]
   });
 };
 
 // A way out is a place one presses, not a control: no <button>, on purpose.
 // A <button> is labelable, so a <Label> wrapping the whole spin would bind
-// to the first chevron instead of to the picker — the thing that actually holds
-// the value — and a form would carry two more controls that answer for nothing.
-// It is not focusable either: the keyboard walks the days on the container (see
-// its own tabIndex), where the arrows already mean this.
+// to the first chevron instead of to the control — the thing that actually
+// holds the value — and a form would carry two more controls that answer for
+// nothing.
+// It is not focusable either: the keyboard walks the values on the middle (see
+// the container's own tabIndex, or the field's), where the arrows already mean
+// this.
 const WayOut = ({
-  command,
-  containerId,
+  atStart,
+  commandFor,
   unavailableMessage,
   label,
+  onPress,
   children
 }) => jsx(Box, {
   as: "span",
   baseClassName: "navi_picker_spin_way_out"
+  // Which end of the box it sits in, said by the chevron rather than read
+  // from its place among its siblings: that is what the corners it is
+  // rounded by are keyed on (see the CSS above).
+  ,
+
+  "data-way-out": atStart ? "start" : "end"
+  // Tracked rather than left to CSS :hover, which stays on after a tap on a
+  // touch device (see the CSS above).
+  ,
+
+  pseudoClasses: WAY_OUT_PSEUDO_CLASSES
   // Announced as a button because that is what it is to whoever cannot see
   // the chevron — and marked unavailable rather than removed when there is
   // nothing that way, so it keeps its place.
@@ -52560,49 +52779,44 @@ const WayOut = ({
   // Read by triggerNaviCommand below the same way it reads a button's own.
   ,
 
-  commandfor: containerId,
+  commandfor: commandFor,
   flex: true,
   align: "center"
   // A press, answered where it starts: mousedown rather than click, which is
   // what makes holding one feel immediate — and the click after it is stopped
   // below, so a <Label> wrapping the whole control does not forward it to the
-  // picker and open the calendar on the way past.
+  // control and open the calendar on the way past.
   ,
 
   onClick: e => {
     e.preventDefault();
   },
   onMouseDown: e => {
-    // No focus, no text selection: the keyboard is put on the days below.
+    // No focus, no text selection: the keyboard is put on the middle below.
     e.preventDefault();
-    const wayOutElement = e.currentTarget;
     if (unavailableMessage) {
       // Why it does nothing, said where one pressed: a control would have
       // done this through its own interaction gate, and this one has none.
       openCallout(unavailableMessage, {
-        anchorElement: wayOutElement,
+        anchorElement: e.currentTarget,
         status: "info",
         openingEvent: e
       });
       return;
     }
-    // The keyboard follows the press: the days are where the arrows work, so
-    // pressing a chevron leaves one able to keep going with the keys.
-    document.getElementById(containerId)?.focus({
-      preventScroll: true
-    });
-    triggerNaviCommand(wayOutElement, command, e);
+    onPress(e);
   },
   children: jsx(Icon, {
     children: children
   })
 });
 const PICKER_SPIN_PSEUDO_CLASSES = [":hover", ":focus-visible"];
+const WAY_OUT_PSEUDO_CLASSES = [":hover"];
 
 // A padding written on this box would sit between its border and the chevrons,
 // which are meant to reach the corners they are rounded by — so each padding
-// prop becomes a variable instead, and the CSS above hands it to the day and to
-// the chevrons themselves. Same trick, and same var chain, as Picker's.
+// prop becomes a variable instead, and the CSS above hands it to the value and
+// to the chevrons themselves. Same trick, and same var chain, as Picker's.
 const PICKER_SPIN_STYLE_CSS_VARS = {
   padding: "--picker-spin-padding",
   paddingX: "--picker-spin-padding-x",
@@ -52613,6 +52827,138 @@ const PICKER_SPIN_STYLE_CSS_VARS = {
   paddingLeft: "--picker-spin-padding-left"
 };
 
+// Two values compared the way `<` compares them: right for an ISO day, a time
+// or anything else written so that its order IS its alphabetical order. A
+// number is the exception, and NumberSpin below says so.
+const compareValuesDefault = (a, b) => {
+  if (a < b) {
+    return -1;
+  }
+  if (a > b) {
+    return 1;
+  }
+  return 0;
+};
+const renderValueDefault = value => String(value ?? "");
+
+/**
+ * A whole number one steps through and types into: the field IS the middle, so
+ * the value can be typed as readily as stepped, and the two chevrons stand
+ * above and below it by default — sideways they would be where the caret
+ * moves — with the bigger number up top.
+ *
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   value?: number|string,
+ *   defaultValue?: number|string,
+ *   min?: number,
+ *   max?: number,
+ *   step?: number,
+ *   [key: string]: any,
+ * }>}
+ * @param {number} [min=0] The lowest number one can reach; `max` is the
+ *   highest. They also bound what typing can produce, and how wide the field
+ *   is asked to be (see `maxLength`).
+ */
+const NumberSpin = ({
+  min = 0,
+  max,
+  step = 1,
+  vertical = true,
+  growsUpward = true,
+  controlProps,
+  ...rest
+}) => jsx(Spin, {
+  type: "navi_number",
+  editable: true,
+  growsUpward: growsUpward,
+  min: min,
+  max: max,
+  step: step,
+  vertical: vertical,
+  fallbackValue: min,
+  valueAtStep: (value, count) => numberAtStep(value, count, min),
+  compareValues: (a, b) => Number(a) - Number(b),
+  controlProps: {
+    // The numeric keypad on a phone, and — through
+    // input_resolver_mode — the "this field is full" event a group of
+    // fields moves along on (see useInputGroup).
+    inputMode: "numeric",
+    maxLength: max === undefined ? undefined : String(max).length,
+    ...controlProps
+  },
+  ...rest
+});
+
+// One step away, bounds included: a step past `max` is a real number that
+// simply is not allowed, and Spin is the one that reads it as "nothing that
+// way" — clamping here would answer the chevron before it had a chance to say
+// so. A field mid-edit holding nothing (or nothing numeric) starts from `min`.
+const numberAtStep = (value, count, min) => {
+  const number = Number(value);
+  if (value === "" || value === undefined || Number.isNaN(number)) {
+    return min;
+  }
+  return number + count;
+};
+
+/**
+ * A day one steps through: the date plus what it is to today when there is a
+ * word for it, and a calendar behind it for the day that is far from here.
+ *
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   value?: string,
+ *   defaultValue?: string,
+ *   signal?: import("@preact/signals").Signal<string>,
+ *   name?: string,
+ *   min?: string,
+ *   max?: string,
+ *   step?: number,
+ *   lang?: string,
+ *   renderDay?: (day: string) => import("ignore:preact").ComponentChildren,
+ *   [key: string]: any,
+ * }>}
+ * @param {string} [value] The day shown, as "YYYY-MM-DD".
+ * @param {number} [step=1] How many days a press covers — 7 for a week at a
+ *   time, and the label then names the day one lands on, as it always does.
+ * @param {string} [min] The first day one can reach, as "YYYY-MM-DD"; `max` is
+ *   the last.
+ * @param {"long"|"short"|"numeric"} [format="long"] How the date is written.
+ *   Long by default, since this is a control one reads rather than a column
+ *   one scans; `short` where the room is not there.
+ * @param {(day: string) => import("ignore:preact").ComponentChildren} [renderDay] What
+ *   to write for a day. Defaults to the date plus what it is to today when
+ *   there is a word for it ("samedi 8 août (demain)"), since a day near now is
+ *   read as a distance from now before it is read as a date.
+ */
+const DaySpin = ({
+  min,
+  max,
+  step = 1,
+  lang,
+  format = "long",
+  renderDay = renderDayDefault,
+  ...rest
+}) => jsx(Spin, {
+  type: "date",
+  min: min,
+  max: max,
+  step: step,
+  fallbackValue: firstDayAllowed({
+    min,
+    max,
+    step
+  }),
+  valueAtStep: addDays,
+  renderValue: (day, {
+    maxLines
+  }) => renderDay(day, {
+    lang,
+    format,
+    maxLines
+  }),
+  ...rest
+});
+
 // The date, and what it is to today when that is something one has a word for:
 // "samedi 8 août (demain)" says both where one is and how far that is, and only
 // the second is read at a glance.
@@ -54565,6 +54911,15 @@ const css$k = /* css */`
       --wheel-window-inset: calc((100% - var(--wheel-item-height)) / 2);
       --wheel-band-inset: calc((100% - var(--wheel-emphasis-size)) / 2);
 
+      /* As wide as the rows ON SCREEN, which is not the same as "as wide as
+         the widest value": the rows are a handful of recycled slots, so a wheel
+         whose labels are not all the same width resizes as one scrolls — "9"
+         becoming "10" widens it mid-glide, and whatever holds it (a popup)
+         moves under the finger. Give such a wheel a width and the question is
+         settled once; the per-row padding stays where it is, inside it, and
+         stays scrollable. Digits are the case where this does not arise on its
+         own: data-wheel-type="integer" makes them tabular above, so they all
+         advance the same — until one of them takes a digit more. */
       width: fit-content;
 
       .navi_wheel_viewport {
@@ -54649,6 +55004,9 @@ const css$k = /* css */`
       --wheel-window-inset: calc((100% - var(--wheel-item-width)) / 2);
       --wheel-band-inset: calc((100% - var(--wheel-emphasis-size)) / 2);
 
+      /* The cross axis follows the rows on screen — same story as the vertical
+         branch above, and the same answer: say a height when the rows are not
+         all as tall as each other. */
       height: fit-content;
 
       .navi_wheel_viewport {
@@ -62425,5 +62783,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, StarSvg, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, coarsePointerSignal, compareTwoJsValues, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineNaviConfirmPopupOptions, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isToday, languagesSignal, localStorageSignal, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setupRoutes, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutRequestClose, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, StarSvg, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, coarsePointerSignal, compareTwoJsValues, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineNaviConfirmPopupOptions, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isToday, languagesSignal, localStorageSignal, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setupRoutes, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutRequestClose, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map