@jsenv/navi 0.29.342 → 0.29.344

package/dist/jsenv_navi.js

@@ -12,7 +12,7 @@ import { useErrorBoundary, useLayoutEffect, useContext, useCallback, useRef, use
 import { humanizeI18n, setRuntimeLangSource, formatDuration, formatMonth, formatDay, resolveTimeRangePrecision, formatDatePlaceholder, toDate, getRelativeDay, formatDayRelative, formatMonthPlaceholder, formatWeekPlaceholder, formatDatetimePlaceholder, formatDatetime, toTimeOfDay, formatTimeOfDay, formatTime, formatMinuteDuration, formatSecondDuration, formatHourDuration, formatTimeRelative, formatNumber, interpolateText, installInterpolateJsx } from "@jsenv/humanize";
 export { createI18n, formatDatetime, formatDay, formatDayRelative, formatDuration, formatHourDuration, formatMinuteDuration, formatMonth, formatNumber, formatSecondDuration, formatTime, formatTimeOfDay, formatTimeRange, formatTimeRelative, interpolateText } from "@jsenv/humanize";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
-import { TYPE_RULE, durationContainsNaN, compareTwoDurations, durationToSeconds, DISPLAYABLE_RULE, MAX_LINE_BREAKS_RULE, NO_EMOJI_RULE, SINGLE_SPACE_RULE, createValidity, resolveCharClass, getCharClassMessageKey, compileCharClassAnchored, compileCharClass, CHAR_CLASS_PRESETS, parseDuration, durationToISOString } from "@jsenv/validity";
+import { CHAR_CLASS_PRESETS, TYPE_RULE, durationContainsNaN, compareTwoDurations, durationToSeconds, DISPLAYABLE_RULE, MAX_LINE_BREAKS_RULE, NO_EMOJI_RULE, SINGLE_SPACE_RULE, createValidity, resolveCharClass, getCharClassMessageKey, compileCharClassAnchored, compileCharClass, parseDuration, durationToISOString } from "@jsenv/validity";
 export { compareTwoDurations, durationContainsNaN, durationToHours, durationToISOString, durationToMinutes, durationToNumber, durationToSeconds, durationToString, parseDuration } from "@jsenv/validity";
 import { Suspense, createPortal, forwardRef } from "preact/compat";
 
@@ -4578,565 +4578,1104 @@ const findControlRoot = (el) => {
   return null;
 };
 
-const dispatchRequestSetUIState = (element, value, detail) => {
-  const controlHost = findControlHost(element) || element;
-  return dispatchInternalCustomEvent(controlHost, "navi_set_ui_state", {
-    ...detail,
-    value,
-  });
-};
-const dispatchRequestClearUIState = (element, e) => {
-  const controlHost = findControlHost(element) || element;
-  return dispatchInternalCustomEvent(controlHost, "navi_clear_ui_state", {
-    event: e,
-  });
-};
-const dispatchRequestResetUIState = (element, e) => {
-  const controlHost = findControlHost(element) || element;
-  return dispatchInternalCustomEvent(controlHost, "navi_reset_ui_state", {
-    event: e,
-  });
-};
-/**
- * @param {Element} el
- * @param {{ own?: boolean }} [options] `own`: what the element holds BY ITSELF.
- *   Only a button ever answers differently — one with no value of its own
- *   inherits the value of the control around it, which is what makes
- *   `--navi-send` on a form's button be about that form. Something asking what
- *   THIS element says (a travel command reading what the travel is about) wants
- *   the own value and would otherwise be handed the surrounding control's.
- */
-const getUIStateFromElement = (el, { own } = {}) => {
-  let uiState;
-  dispatchInternalCustomEvent(el, "navi_get_ui_state", {
-    own,
-    respondWith: (v) => {
-      uiState = v;
-    },
-  });
-  return uiState;
-};
-
 /**
- * Converts a JS value into the form expected by the browser DOM property for a
- * given control type/input type combination.
- *
- * For example:
- * - `datetime-local` inputs expect a local datetime string without timezone
- * - `number`/`range` inputs expect a numeric string or number
- * - `color` inputs require a non-empty hex string (falls back to `#000000`)
- * - All other inputs receive the value as-is (undefined → "")
- *
- * Returns either the converted value directly, or a converter function when the
- * conversion depends on the runtime value (e.g. plain inputs return `asInputValue`).
- *
- * @param {any} value - The JS value to convert.
- * @param {{ controlType: string, type: string }} options
- * @returns {any} The DOM-compatible value or a converter function.
+ * Parses a time string into seconds.
+ * Accepts:
+ *   - number: returned as-is (already in seconds)
+ *   - "HH:MM" string: converted to seconds (e.g. "00:30" → 1800, "01:00" → 3600)
+ *   - undefined/null: returned as-is
  */
-const asControlHostValue = (
-  jsValue,
-  { controlType, type, inputMode, pad },
-) => {
-  if (controlType === "select") {
-    // A select holds one of its options, always a string; holding nothing is
-    // the empty option, which the element spells "".
-    return asInputValue(jsValue);
-  }
-  if (controlType === "input" || controlType === "picker") {
-    if (type === "datetime-local") {
-      return asDatetimeLocalString(jsValue);
-    }
-    if (
-      type === "number" ||
-      type === "range" ||
-      inputMode === "numeric" ||
-      inputMode === "decimal"
-    ) {
-      return asNumberString(jsValue, pad);
-    }
-    if (type === "color") {
-      return asColorString(jsValue);
-    }
-    return asInputValue(jsValue);
+const timeStringToSeconds = (timeString) => {
+  if (typeof timeString !== "string") {
+    return timeString;
   }
-  return jsValue;
-};
-// As explained in https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/datetime-local#setting_timezones
-// datetime-local does not support timezones
-const asDatetimeLocalString = (dateTimeString) => {
-  const date = new Date(dateTimeString);
-  if (isNaN(date.getTime())) {
-    return dateTimeString;
+  const colonIndex = timeString.indexOf(":");
+  if (colonIndex === -1) {
+    return Number(timeString);
   }
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  const hours = String(date.getHours()).padStart(2, "0");
-  const minutes = String(date.getMinutes()).padStart(2, "0");
-  const seconds = String(date.getSeconds()).padStart(2, "0");
-  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+  const hours = parseInt(timeString.slice(0, colonIndex), 10);
+  const minutes = parseInt(timeString.slice(colonIndex + 1), 10);
+  return (hours * 60 + minutes) * 60;
 };
-// `pad` is how many digits the number is WRITTEN on — an hour is held as 7 and
-// shown as "07". Held and shown are two things here, the way they are for a
-// datetime-local above: what the field says is derived from what the control
-// holds, and reading it back (readNumberFromInput) gives the number again.
-const asNumberString = (jsValue, pad) => {
-  if (jsValue === undefined) {
-    return "";
+
+const isToday = (value) => {
+  if (!value) {
+    return false;
   }
-  if (!pad || jsValue === "" || jsValue === null) {
-    return jsValue;
+  const now = new Date();
+  const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+  if (typeof value === "string") {
+    return value === todayStr;
   }
-  const number = Number(jsValue);
-  if (Number.isNaN(number)) {
-    return jsValue;
+  if (typeof value === "number") {
+    const d = new Date(value);
+    const s = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+    return s === todayStr;
   }
-  const negative = number < 0;
-  const digits = String(negative ? -number : number).padStart(Number(pad), "0");
-  return negative ? `-${digits}` : digits;
-};
-// Browser requires a non-empty value for <input type="color">.
-// When our logical value is empty we give it #000000 so it doesn't choke.
-// The UI uses the original (possibly empty) value to show the checkerboard.
-const asColorString = (jsValue) => {
-  return jsValue || "#000000";
-};
-const asInputValue = (jsValue) => {
-  if (jsValue === undefined) {
-    return "";
+  if (value instanceof Date) {
+    const s = `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+    return s === todayStr;
   }
-  return jsValue;
+  return false;
 };
 
 /**
- * Reads the current logical JS value from a control host DOM element.
+ * Returns the current time as "HH:MM", with an optional minute offset.
  *
- * Handles all navi control host element types:
- * - `<button>` — reads via `navi_get_value` custom event, falls back to `button.value`
- * - `<input type="number|range">` — parses as a number, returns `undefined` when empty
- * - `<input type="checkbox|radio">` — returns `undefined` when unchecked, otherwise reads
- *   via `navi_get_value` custom event (to preserve the original JS type of the value prop)
- * - `<input type="datetime-local">` — converts the local datetime string to an ISO 8601 string
- * - `<input type="navi_picker">` — delegates to the controller via `navi_get_ui_state`
- * - All other inputs — returns `input.value` as a string
+ * @param {number} [offsetMinutes=0] - Minutes to add (negative = subtract).
+ *   E.g. getNowHours(-5) returns "now minus 5 minutes".
  *
- * @param {HTMLElement} controlHost - The control host DOM element to read from.
- * @returns {any} The current logical value of the control.
+ * @example
+ * getNowHours()       // "14:30"
+ * getNowHours(-5)     // "14:25"
  */
-const readControlValue = (controlHost) => {
-  if (
-    controlHost.tagName === "BUTTON" ||
-    controlHost.getAttribute("role") === "button"
-  ) {
-    return readValueFromButton(controlHost);
-  }
-  if (controlHost.tagName === "INPUT") {
-    // important: input.type = "navi_js"; followed by input.type; returns "text"
-    // so use getAttribute
-    const type = controlHost.getAttribute("type");
-
-    if (
-      type === "number" ||
-      type === "range" ||
-      controlHost.inputMode === "numeric" ||
-      controlHost.inputMode === "decimal"
-    ) {
-      return readNumberFromInput(controlHost);
-    }
-    if (type === "color") {
-      return readValueFromControlHost(controlHost);
-    }
-    if (type === "checkbox" || type === "radio") {
-      return readValueFromCheckableInput(controlHost);
-    }
-    if (type === "datetime-local") {
-      return readDatetimeLocalFromInput(controlHost);
-    }
-    if (type === "navi_js") {
-      return getUIStateFromElement(controlHost);
-    }
-    return readValueFromInput(controlHost);
-  }
-  if (controlHost.hasAttribute("navi-control-host")) {
-    // Non-button, non-input navi controls (e.g. Badge.Button rendered as span)
-    return readValueFromControlHost(controlHost);
-  }
-  return readValueFromElement(controlHost);
-};
-const readValueFromControlHost = (controlHost) => {
-  return readValueFromNaviCustomEvent(controlHost, controlHost.value);
-};
-const readValueFromButton = (button) => {
-  return readValueFromControlHost(button);
+const getNowHours = (offsetMinutes = 0) => {
+  const now = new Date();
+  const totalMinutes = now.getHours() * 60 + now.getMinutes() + offsetMinutes;
+  const clamped =
+    totalMinutes < 0
+      ? 0
+      : totalMinutes > 23 * 60 + 59
+        ? 23 * 60 + 59
+        : totalMinutes;
+  const h = Math.floor(clamped / 60);
+  const m = clamped % 60;
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
 };
-const readDatetimeLocalFromInput = (input) => {
-  const localDateTimeString = input.value;
-  if (localDateTimeString === "") {
-    return "";
-  }
-  const localDate = new Date(localDateTimeString);
-  if (isNaN(localDate.getTime())) {
-    return localDateTimeString;
-  }
-  return localDate.toISOString();
+
+/**
+ * Returns the current time rounded up to the nearest step boundary,
+ * with an optional minute offset applied first.
+ *
+ * This is useful to compute a step-aligned `min` for a time picker:
+ * passing it ensures the first available slot is always on a step boundary.
+ *
+ * @param {number} stepMinutes - Step size in minutes (e.g. 30).
+ * @param {number} [offsetMinutes=0] - Minutes to add before rounding (negative = subtract).
+ *
+ * @example
+ * // At 9:32, step 30, offset -5 → raw = 9:27 → ceil to 30 → "09:30"
+ * // At 9:38, step 30, offset -5 → raw = 9:33 → ceil to 30 → "10:00"
+ * getNowHoursRoundedToStep(30, -5)
+ */
+const getNowHoursRoundedToStep = (stepMinutes, offsetMinutes = 0) => {
+  const now = new Date();
+  const totalMinutes = now.getHours() * 60 + now.getMinutes() + offsetMinutes;
+  const aligned = Math.ceil(totalMinutes / stepMinutes) * stepMinutes;
+  const clamped =
+    aligned < 0 ? 0 : aligned > 23 * 60 + 59 ? 23 * 60 + 59 : aligned;
+  const h = Math.floor(clamped / 60);
+  const m = clamped % 60;
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
 };
-const readNumberFromInput = (input) => {
-  const numberString = input.value;
-  if (numberString === "") {
-    return "";
+
+/**
+ * "HH:MM" and its two numbers, in both directions — what any control made of an
+ * hour beside a minute (fields, wheels) aggregates to and is placed from. Held
+ * as numbers, written on two digits: how they are shown is each control's own
+ * business.
+ */
+const parseTimeParts = (time) => {
+  if (typeof time !== "string") {
+    return null;
   }
-  const asNumber = Number(numberString);
-  if (isNaN(asNumber)) {
-    return numberString;
+  const match = /^(\d{1,2}):(\d{1,2})/.exec(time);
+  if (!match) {
+    return null;
   }
-  return asNumber;
+  return { hour: Number(match[1]), minute: Number(match[2]) };
 };
-const readValueFromCheckableInput = (input) => {
-  const checked = input.checked;
-  if (!checked) {
+
+// Half a time is not a time: a control holding one of the two and nothing in
+// the other has no value at all, and a form has nothing to send about it.
+const formatTimeParts = (hour, minute) => {
+  if (
+    hour === "" ||
+    hour === undefined ||
+    minute === "" ||
+    minute === undefined
+  ) {
     return undefined;
   }
-  return readValueFromControlHost(input);
-};
-const readValueFromInput = (input) => {
-  const value = input.value;
-  return value;
-};
-const readValueFromElement = (element) => {
-  const value = element.value;
-  return value;
+  return `${padTwo$1(hour)}:${padTwo$1(minute)}`;
 };
-const readValueFromNaviCustomEvent = (field, fallback) => {
-  // prefer the value given as prop (respect original type, browser would convert to string)
-  let responded;
-  let value;
-  dispatchCustomEvent(field, "navi_get_value", {
-    respondWith: (jsValue) => {
-      responded = true;
-      value = jsValue;
-    },
-  });
-  if (responded) {
-    return value;
+
+const minutesFromTime$1 = (time) => {
+  const parts = parseTimeParts(time);
+  if (!parts) {
+    return null;
   }
-  return fallback;
+  return parts.hour * 60 + parts.minute;
 };
 
-// In-memory registry of all mounted ui state controllers keyed by their id.
-// Allows direct controller access without dispatching DOM events — used by external
-// callers (e.g. selectable_list) to call setUIState by id instead of via the DOM.
-const controllersById = new Map();
+const timeFromMinutes = (minutes) => {
+  const inDay =
+    ((minutes % MINUTES_PER_DAY) + MINUTES_PER_DAY) % MINUTES_PER_DAY;
+  return `${padTwo$1(Math.floor(inDay / 60))}:${padTwo$1(inDay % 60)}`;
+};
 
-// In-memory registry for radio controllers, keyed by input name.
-// Allows radio sibling unchecking without querying the DOM — necessary when
-// items are virtualized and their DOM element may not exist at the time.
-// Form scoping is reproduced by comparing parentUIStateController references.
-const radioControllersByName = new Map();
+const MINUTES_PER_DAY = 24 * 60;
 
-// Registry for non-serializable JS values that cannot be written to DOM attributes as-is.
-// When a value is an object/array, we store it here and write a reference string to the DOM
-// instead of "[object Object]". Console-inspectable via window.__navi_js('id').
-// The controller id is used as key — if the controller has no id, the value is not registered.
-const naviJsRegistry = new Map();
+const padTwo$1 = (value) => String(value).padStart(2, "0");
 
-const getUIStateControllerById = (id) => controllersById.get(id);
-const getRadioSiblings = (radioUIStateController) => {
-  const siblings = radioControllersByName.get(radioUIStateController.name);
-  return siblings;
+// Maps validity type names → navi input type names.
+// Numeric signal types must not fall through to the native type="number"
+// (which adds spinner buttons and has poor UX) — they map to navi_number instead.
+const VALIDITY_TYPE_TO_INPUT_TYPE = {
+  boolean: "checkbox",
+  number: "navi_number",
+  integer: "navi_number",
+  percentage: "navi_percentage",
 };
 
-const toDomValue = (
-  jsValue,
-  { controlType, id, type, inputMode, pad },
-) => {
-  const domValue = asControlHostValue(jsValue, {
-    controlType,
-    type,
-    inputMode,
-    pad,
-  });
-  if (isSerializableAsDomValue(domValue)) {
-    return domValue;
-  }
-  naviJsRegistry.set(id, domValue);
-  return `window.__navi_js('${id}')`;
+// Conceptual navi types: defaults, plus the host type they resolve to.
+// `navi-input-type` keeps the type the caller asked for once the host has
+// become something plainer — it is what says the value is a number (see
+// isNumberInput), and what lets constraint messages use domain-specific
+// wording instead of the generic "Ce nombre doit être...".
+const NAVI_TYPE_DEFAULTS = {
+  navi_time: {
+    "type": "time",
+    "navi-input-type": "time",
+    "min": 0,
+    "max": 24 * 3600 - 1,
+    "step": 1,
+  },
+  navi_percentage: {
+    "type": "navi_number",
+    "navi-input-type": "percentage",
+    "min": 0,
+    "max": 100,
+    "step": 1,
+  },
+  navi_number: {
+    "type": "text",
+    "navi-input-type": "number",
+    "autoCorrect": "off",
+    "spellcheck": false,
+    "autoComplete": "off",
+  },
 };
 
-window.__navi_js = (id) => naviJsRegistry.get(id);
-const isSerializableAsDomValue = (value) => {
-  if (value === null || value === undefined) {
+// The navi input types whose value IS a number.
+const NUMBER_NAVI_INPUT_TYPE_SET = new Set([
+  "number",
+  "percentage",
+  "hour",
+  "minute",
+  "second",
+]);
+
+/**
+ * Whether the control holds a number — asked of what the control IS, never of
+ * `inputMode`. In HTML `inputmode` picks the on-screen keyboard and says
+ * nothing about the value: a licence number, a postal code or a card number
+ * with a check letter all want the digit keypad while staying strings. What a
+ * number field is spelled `type="number"`, or a navi type that resolves to a
+ * text host and leaves `navi-input-type` behind to say what it was.
+ */
+const isNumberInput = (type, naviInputType) => {
+  if (type === "number") {
     return true;
   }
-  const type = typeof value;
-  return type === "string" || type === "number" || type === "boolean";
+  return NUMBER_NAVI_INPUT_TYPE_SET.has(naviInputType);
 };
 
-const onUIStateControllerCreated = (uiStateController) => {
-  const { id, name, controlType } = uiStateController;
-  if (id) {
-    controllersById.set(id, uiStateController);
-  }
-  const proxyFor = uiStateController.props["navi-control-proxy-for"];
-  if (proxyFor) {
-    let proxySet = proxyControllersByRealInputId.get(proxyFor);
-    if (!proxySet) {
-      proxySet = new Set();
-      proxyControllersByRealInputId.set(proxyFor, proxySet);
-    }
-    proxySet.add(uiStateController);
-  }
-  if (
-    controlType === "input" &&
-    uiStateController.props.type === "radio" &&
-    name
-  ) {
-    let set = radioControllersByName.get(name);
-    if (!set) {
-      set = new Set();
-      radioControllersByName.set(name, set);
-    }
-    set.add(uiStateController);
-  }
-};
-const onUIStateControllerDestroyed = (uiStateController) => {
-  const { id, name, controlType } = uiStateController;
-  if (id) {
-    // Only the controller the id currently points at may take the entry away:
-    // when two controls share an id, the one leaving would otherwise unregister
-    // the one staying (see the warning in onUIStateControllerCreated), and the
-    // same holds while a control is being replaced by its successor, which
-    // registers during its render, before this cleanup runs.
-    if (controllersById.get(id) === uiStateController) {
-      controllersById.delete(id);
-      naviJsRegistry.delete(id);
-    }
+/**
+ * resolveInputProps — normalizes input-related props that are shared across
+ * `<Picker>`, `<Input>` (textual) and `<Range>`. Mutates the props object in place.
+ *
+ * Normalization is applied recursively: a navi type may resolve to another navi
+ * type (e.g. `navi_percentage` → `navi_number` → `text`), and each step applies its
+ * own formatters and defaults before moving to the next.
+ *
+ * Steps applied for each type:
+ * 1. Record the original navi type in `props["navi-input-type"]` (first call only).
+ * 2. Apply defaults for the current type (min, max, step, and any other props),
+ *    only when the prop is not already set.
+ * 3. Apply min/max formatters (e.g. HH:MM string → number for duration types,
+ *    Date → formatted string for date/time types).
+ * 4. Apply step formatter (same conversion rules).
+ * 5. Remap `props.type` to the target type defined by the current type's defaults,
+ *    then recurse.
+ *
+ * Supported navi types and their targets:
+ * - `navi_percentage` → `navi_number`  (0–100, step 1)
+ * - `navi_number`     → `text`         (inputMode="numeric", no spin buttons implied)
+ * - `navi_time`       → `time`         (step in seconds)
+ *
+ * Standard HTML input types with formatters:
+ * - `date`, `month`, `week`, `time`, `datetime-local`, `datetime`:
+ *   min/max accept `Date` instances or timestamps and are converted to the
+ *   string format expected by the native input.
+ * - `time`, `datetime-local`, `datetime`:
+ *   step accepts `"HH:MM"` and is converted to seconds.
+ */
+/**
+ * A bound signal that carries a default of its own says the same thing on every
+ * control: the control starts there and stays uncontrolled, which is what makes
+ * a form read the value shown as a SUGGESTION rather than as something it
+ * already holds. Uncontrolled here is about what the control HOLDS, not about
+ * whether it follows the signal — the binding stays two-way either way (see
+ * stateFromSignal in control_hooks.jsx). Written once and used by everything
+ * that takes a `signal`, so one signal cannot mean two different things
+ * depending on which control it was handed to.
+ */
+const seedDefaultValueFromSignal = (props) => {
+  const signalOptions = props.signal?.options;
+  if (!signalOptions) {
+    return;
   }
-  const proxyFor = uiStateController.props["navi-control-proxy-for"];
-  if (proxyFor) {
-    const proxySet = proxyControllersByRealInputId.get(proxyFor);
-    if (proxySet) {
-      proxySet.delete(uiStateController);
-      if (proxySet.size === 0) {
-        proxyControllersByRealInputId.delete(proxyFor);
-      }
-    }
+  if (Object.hasOwn(props, "defaultValue")) {
+    // explicit defaultValue prop prevails
+    return;
   }
-  if (
-    controlType === "input" &&
-    uiStateController.controlHostProps.type === "radio" &&
-    name
-  ) {
-    const set = radioControllersByName.get(name);
-    if (set) {
-      set.delete(uiStateController);
-      if (set.size === 0) {
-        radioControllersByName.delete(name);
-      }
-    }
+  // Snapshot the signal's current default so that resetUIState restores to the
+  // original default — not the value the signal had at the time of the last
+  // re-render.
+  const defaultValue = signalOptions.getDefaultValue(false);
+  if (defaultValue !== undefined) {
+    props.defaultValue = defaultValue;
   }
 };
 
-/**
- * Controller-based equivalent of findControlProxyTarget.
- * Given a proxy controller, returns the real control's controller.
- * Finds the target by walking the parent controller's children — no DOM queries.
- * Returns `null` when the controller is not a proxy or the target is not found.
- */
-const findControlProxyTargetController = (controller) => {
-  const proxyFor = controller.controlHostProps["navi-control-proxy-for"];
-  if (!proxyFor) {
-    return null;
+const resolveInputProps = (props, { controlType = "input" } = {}) => {
+  // `signal` carries a bound state signal. It is left on `props` on purpose:
+  // `createControlInfo` (control_hooks.jsx) reads it to seed the state and to
+  // follow it, and `onUIAction` (ui_state_controller.js) writes user
+  // interactions back into it. Here we only derive input defaults (type/min/max,
+  // defaultValue/defaultChecked) from the signal's `options`, so the control
+  // ends up uncontrolled-with-default while still bound to the signal.
+  const signal = props.signal;
+  if (signal) {
+    const signalOptions = signal.options;
+    if (signalOptions) {
+      for (const key of ["min", "max", "step"]) {
+        if (props[key] === undefined && signalOptions[key] !== undefined) {
+          props[key] = signalOptions[key];
+        }
+      }
+      if (props.type === undefined && signalOptions.type !== undefined) {
+        const typeFromSignal =
+          VALIDITY_TYPE_TO_INPUT_TYPE[signalOptions.type] ?? signalOptions.type;
+        // What a signal says is what its value IS; what a control's `type` says
+        // is what the control is. They usually agree — a date-typed signal wants
+        // a date field — but a boolean one maps to a checkbox, and a picker made
+        // into a checkbox is not a picker with a different look: it is another
+        // control, with no popup to open. A picker asked to hold a yes/no keeps
+        // its two rows and stays itself.
+        const wouldChangeWhatTheControlIs =
+          controlType === "picker" &&
+          (typeFromSignal === "checkbox" || typeFromSignal === "radio");
+        if (!wouldChangeWhatTheControlIs) {
+          props.type = typeFromSignal;
+        }
+      }
+    }
+
+    const isCheckable = props.type === "checkbox" || props.type === "radio";
+    if (isCheckable) {
+      if (Object.hasOwn(props, "defaultChecked")) ; else {
+        // If no explicit defaultChecked, derive it from the signal's default
+        // value so that resetUIState restores to the original default.
+        // Only a stateSignal carries a default of its own; a plain signal has
+        // no `options` at all, and asking it for one used to throw on mount —
+        // the same optional read every other branch here already does.
+        const defaultVal = signalOptions?.getDefaultValue(false);
+        if (defaultVal === undefined) ; else if (props.type === "radio") {
+          if (defaultVal === true) {
+            props.defaultChecked = true;
+          } else if (
+            Object.hasOwn(props, "value") &&
+            defaultVal === props.value
+          ) {
+            props.defaultChecked = true;
+          }
+        } else if (typeof defaultVal === "boolean") {
+          // Standalone checkbox bound to a boolean signal.
+          props.defaultChecked = defaultVal;
+        } else {
+          // Checkbox is a group member: defaultVal is the array of
+          // selected item values.
+          const checkboxValue = props.value;
+          props.defaultChecked =
+            Array.isArray(defaultVal) && defaultVal.includes(checkboxValue);
+        }
+      }
+      return;
+    }
+
+    seedDefaultValueFromSignal(props);
   }
-  return getUIStateControllerById(proxyFor) ?? null;
-};
 
-// Reverse-lookup map: real-input id → the proxy controllers that reference it
-// via `navi-control-proxy-for`. A single control can be represented by several
-// proxies (an "enable"/"disable" button pair for one radio, for instance), so
-// each id holds a set. Maintained on create/destroy so lookup is O(1).
-const proxyControllersByRealInputId = new Map();
-const findProxyControllers = (realInputId) => {
-  if (!realInputId) {
-    return null;
+  const currentType = props.type;
+  // Apply min/max/step formatters before anything else — this must run even for
+  // standard HTML types (date, time, etc.) that have no NAVI_TYPE_DEFAULTS entry.
+  const currentTypeMinMaxFormatter = MIN_MAX_FORMATTER_BY_TYPE[currentType];
+  const currentTypeStepFormatter = STEP_FORMATTER_BY_TYPE[currentType];
+  if (currentTypeMinMaxFormatter) {
+    props.min = currentTypeMinMaxFormatter(props.min);
+    props.max = currentTypeMinMaxFormatter(props.max);
+  }
+  if (currentTypeStepFormatter) {
+    props.step = currentTypeStepFormatter(props.step);
   }
-  return proxyControllersByRealInputId.get(realInputId) ?? null;
-};
 
-/**
- * The attributes constraints read, filled by each constraint module as it
- * evaluates. A constraint declares the attribute it wants (`"data-no-emoji"`)
- * and gets the prop for free: a control accepts the camelCase form
- * (`noEmoji`) and writes it on the control host under the attribute name — the
- * same conversion `element.dataset` does, so what a component is passed and
- * what ends up in the DOM read as one thing.
- */
+  // For navi_number: choose inputMode based on whether step/min/max suggest decimals.
+  // inputMode="numeric" (integer keyboard) vs "decimal" (keyboard with decimal separator).
+  if (currentType === "navi_number") {
+    if (props.inputMode === undefined) {
+      props.inputMode =
+        hasDecimalPlaces(props.step) ||
+        hasDecimalPlaces(props.min) ||
+        hasDecimalPlaces(props.max)
+          ? "decimal"
+          : "numeric";
+    }
+  }
 
-const CONSTRAINT_ATTRIBUTE_SET = new Set();
+  const { charGuard } = props;
+  if (charGuard) {
+    if (charGuard === true || charGuard === "auto") {
+      // Auto-resolve charGuard from context.
+      let charGuardResolved;
+      const inputMode = props.inputMode;
+      if (inputMode === "numeric") {
+        charGuardResolved = "numeric";
+      } else if (inputMode === "decimal") {
+        charGuardResolved = "decimal";
+      } else if (currentType === "tel") {
+        charGuardResolved = "tel";
+      } else if (currentType === "email") {
+        charGuardResolved = "email";
+      }
+      if (charGuardResolved !== undefined) {
+        props.charGuard = charGuardResolved;
+      }
+    }
+    // charGuard is now resolved: derive inputMode from it if not already set.
+    if (props.inputMode === undefined && props.charGuard) {
+      const autoMode = INPUT_MODE_FROM_CHAR_GUARD[props.charGuard];
+      if (autoMode) {
+        props.inputMode = autoMode;
+      }
+    }
+    // Build pattern from the resolved charGuard (preset name → class, or raw class passthrough).
+    if (props.pattern === undefined && props.charGuard) {
+      const charClass = CHAR_CLASS_PRESETS[props.charGuard] ?? props.charGuard;
+      props.pattern = `${charClass}*`;
+    }
+  }
 
-const dataAttributeCache = new Map();
-// A constraint imported lazily registers its attribute after controls have
-// already rendered, so an answer computed before it arrived must not survive it.
-let attributeCountWhenCached = 0;
-/**
- * The constraint attribute a prop stands for, `null` when it stands for none:
- * `"noEmoji"` → `"data-no-emoji"`.
- */
-const constraintAttributeFromProp = (key) => {
-  if (attributeCountWhenCached !== CONSTRAINT_ATTRIBUTE_SET.size) {
-    dataAttributeCache.clear();
-    attributeCountWhenCached = CONSTRAINT_ATTRIBUTE_SET.size;
+  // Compute maxLength from max when inputMode is numeric/decimal.
+  // Done here (after inputMode is set) so controller.props has the resolved value.
+  if (props.maxLength === undefined) {
+    if (props.inputMode === "numeric") {
+      const { min, max } = props;
+      if (max === undefined) ; else {
+        const canBeNegative = min === undefined ? max < 0 : min < 0;
+        const signCharCount = canBeNegative ? 1 : 0;
+        const integerDigitCount = String(Math.floor(Math.abs(max))).length;
+        props.maxLength = signCharCount + integerDigitCount;
+      }
+    } else if (props.inputMode === "decimal") {
+      const { min, max, step } = props;
+      if (max === undefined) ; else if (step === undefined) ; else {
+        const canBeNegative = min === undefined ? max < 0 : min < 0;
+        const signCharCount = canBeNegative ? 1 : 0;
+        const integerDigitCount = String(Math.floor(Math.abs(max))).length;
+        const stepStr = String(step);
+        const dotIndex = stepStr.indexOf(".");
+        // integer step + decimal inputMode is an unusual combo, but we stay consistent:
+        // no decimal part in maxLength since valid values are whole numbers anyway
+        const isIntegerStep = dotIndex === -1;
+        const decimalSignCharCount = isIntegerStep ? 0 : 1;
+        const decimalDigitCount = isIntegerStep
+          ? 0
+          : stepStr.length - dotIndex - 1;
+        props.maxLength =
+          signCharCount +
+          integerDigitCount +
+          decimalSignCharCount +
+          decimalDigitCount;
+      }
+    }
   }
-  const fromCache = dataAttributeCache.get(key);
-  if (fromCache !== undefined) {
-    return fromCache;
+
+  // Resolve maxLengthGuard boolean/auto → the computed maxLength number.
+  if (props.maxLengthGuard === true || props.maxLengthGuard === "auto") {
+    props.maxLengthGuard =
+      typeof props.maxLength === "number" ? props.maxLength : undefined;
   }
-  let attribute = null;
-  // An attribute is already written as one (`data-no-emoji`, `aria-label`) —
-  // there is nothing to convert, and the literal lookup has already happened.
-  if (!key.includes("-")) {
-    const candidate = `data-${key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`;
-    if (CONSTRAINT_ATTRIBUTE_SET.has(candidate)) {
-      attribute = candidate;
+
+  const currentTypeDefaults = NAVI_TYPE_DEFAULTS[currentType];
+  if (!currentTypeDefaults) {
+    return;
+  }
+
+  for (const key of Object.keys(currentTypeDefaults)) {
+    if (props[key] === undefined) {
+      props[key] = currentTypeDefaults[key];
     }
   }
-  dataAttributeCache.set(key, attribute);
-  return attribute;
+  const targetType = currentTypeDefaults.type;
+  props.type = targetType;
+  resolveInputProps(props);
 };
 
-/**
- * Whether a constraint attribute is on. Present means on — `""` is how HTML
- * writes a bare attribute — and only the values that say "passed, and off"
- * turn it off.
- */
-const isConstraintAttributeOn = (value) =>
-  value !== undefined && value !== null && value !== false;
+// Presets that imply a specific mobile keyboard inputMode.
+const INPUT_MODE_FROM_CHAR_GUARD = {
+  numeric: "numeric",
+  pin: "numeric",
+  card: "numeric",
+  tel: "tel",
+  decimal: "decimal",
+};
 
-const CONSTRAINT_NAME_TO_PROP = {
-  disabled: "disabledMessage",
-  required: "requiredMessage",
-  pattern: "patternMessage",
-  type_email: "typeMessage",
-  type_number: "typeMessage",
-  min_length: "minLengthMessage",
-  max_length: "maxLengthMessage",
-  min: "minMessage",
-  max: "maxMessage",
-  single_space: "singleSpaceMessage",
-  displayable: "displayableMessage",
-  max_line_breaks: "maxLineBreaksMessage",
-  no_emoji: "noEmojiMessage",
-  same_as: "sameAsMessage",
-  min_lower_letter: "minLowerLetterMessage",
-  min_upper_letter: "minUpperLetterMessage",
-  min_digit: "minDigitMessage",
-  min_special_char: "minSpecialCharMessage",
-  one_of: "oneOfMessage",
-  readonly: "readOnlyMessage",
-  busy: "busyMessage",
-  available: "availableMessage",
+const normalizeToDate = (value) => {
+  if (value === undefined || value === null) {
+    return null;
+  }
+  if (typeof value === "number") {
+    return new Date(value);
+  }
+  if (value instanceof Date) {
+    return value;
+  }
+  return null;
 };
 
-const CONSTRAINT_MESSAGE_PROP_NAME_SET = new Set(
-  Object.values(CONSTRAINT_NAME_TO_PROP),
-);
+const toInputDate = (value) => {
+  const date = normalizeToDate(value);
+  if (!date) {
+    return value;
+  }
+  const yyyy = date.getFullYear();
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const dd = String(date.getDate()).padStart(2, "0");
+  return `${yyyy}-${mm}-${dd}`;
+};
+const toInputMonth = (value) => {
+  const date = normalizeToDate(value);
+  if (!date) {
+    return value;
+  }
+  const yyyy = date.getFullYear();
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  return `${yyyy}-${mm}`;
+};
+const toInputWeek = (value) => {
+  const date = normalizeToDate(value);
+  if (!date) {
+    return value;
+  }
+  // ISO week number
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  d.setDate(d.getDate() + 3 - ((d.getDay() + 6) % 7));
+  const yearStart = new Date(d.getFullYear(), 0, 4);
+  const week =
+    Math.round(
+      ((d - yearStart) / 86400000 - 3 + ((yearStart.getDay() + 6) % 7)) / 7,
+    ) + 1;
+  return `${d.getFullYear()}-W${String(week).padStart(2, "0")}`;
+};
+const toInputTime = (value) => {
+  const date = normalizeToDate(value);
+  if (!date) {
+    return value;
+  }
+  const hh = String(date.getHours()).padStart(2, "0");
+  const mm = String(date.getMinutes()).padStart(2, "0");
+  return `${hh}:${mm}`;
+};
+const toInputDatetime = (value) => {
+  const date = normalizeToDate(value);
+  if (!date) {
+    return value;
+  }
+  const yyyy = date.getFullYear();
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const dd = String(date.getDate()).padStart(2, "0");
+  const hh = String(date.getHours()).padStart(2, "0");
+  const min = String(date.getMinutes()).padStart(2, "0");
+  return `${yyyy}-${mm}-${dd}T${hh}:${min}`;
+};
 
-const extractMessageAndRemainingProps = (props) => {
-  const ownMessages = {};
-  const remaining = {};
-  const keyToVisit = new Set(Object.keys(props));
-  for (const key of keyToVisit) {
-    if (CONSTRAINT_MESSAGE_PROP_NAME_SET.has(key)) {
-      ownMessages[key] = props[key];
-    } else {
-      remaining[key] = props[key];
-    }
+const MIN_MAX_FORMATTER_BY_TYPE = {
+  "date": toInputDate,
+  "month": toInputMonth,
+  "week": toInputWeek,
+  "time": toInputTime,
+  "datetime-local": toInputDatetime,
+  "datetime": toInputDatetime,
+};
+const STEP_FORMATTER_BY_TYPE = {
+  "time": timeStringToSeconds,
+  "datetime-local": timeStringToSeconds,
+  "datetime": timeStringToSeconds,
+};
+
+const hasDecimalPlaces = (value) => {
+  if (value === undefined || value === null) {
+    return false;
   }
-  return [ownMessages, remaining];
+  const num = Number(value);
+  return !isNaN(num) && !Number.isInteger(num);
 };
 
+const dispatchRequestSetUIState = (element, value, detail) => {
+  const controlHost = findControlHost(element) || element;
+  return dispatchInternalCustomEvent(controlHost, "navi_set_ui_state", {
+    ...detail,
+    value,
+  });
+};
+const dispatchRequestClearUIState = (element, e) => {
+  const controlHost = findControlHost(element) || element;
+  return dispatchInternalCustomEvent(controlHost, "navi_clear_ui_state", {
+    event: e,
+  });
+};
+const dispatchRequestResetUIState = (element, e) => {
+  const controlHost = findControlHost(element) || element;
+  return dispatchInternalCustomEvent(controlHost, "navi_reset_ui_state", {
+    event: e,
+  });
+};
 /**
- * The one-line form of a constraint message, or `undefined` when it has none.
- *
- * A message is not always a sentence: it can be an `Error`, or a whole element
- * (an `errorMapping` returning JSX to put a link inside the callout). Those
- * still render fine in the callout, but they have no one-line form, and
- * anything that needs one — a `title` attribute, a caller drawing its own
- * summary — must be given nothing rather than `String(message)`, which writes
- * "[object Object]" on the screen.
+ * @param {Element} el
+ * @param {{ own?: boolean }} [options] `own`: what the element holds BY ITSELF.
+ *   Only a button ever answers differently — one with no value of its own
+ *   inherits the value of the control around it, which is what makes
+ *   `--navi-send` on a form's button be about that form. Something asking what
+ *   THIS element says (a travel command reading what the travel is about) wants
+ *   the own value and would otherwise be handed the surrounding control's.
  */
-const getMessageString = (message) => {
-  if (typeof message === "string") {
-    return message;
-  }
-  if (Error.isError(message)) {
-    return message.message;
-  }
-  return undefined;
+const getUIStateFromElement = (el, { own } = {}) => {
+  let uiState;
+  dispatchInternalCustomEvent(el, "navi_get_ui_state", {
+    own,
+    respondWith: (v) => {
+      uiState = v;
+    },
+  });
+  return uiState;
 };
 
-const getConstraintMessage = (
-  controller,
-  constraint,
-  generatedMessage,
-  { requester },
+/**
+ * Converts a JS value into the form expected by the browser DOM property for a
+ * given control type/input type combination.
+ *
+ * For example:
+ * - `datetime-local` inputs expect a local datetime string without timezone
+ * - `number`/`range` inputs expect a numeric string or number
+ * - `color` inputs require a non-empty hex string (falls back to `#000000`)
+ * - All other inputs receive the value as-is (undefined → "")
+ *
+ * Returns either the converted value directly, or a converter function when the
+ * conversion depends on the runtime value (e.g. plain inputs return `asInputValue`).
+ *
+ * @param {any} value - The JS value to convert.
+ * @param {{ controlType: string, type: string }} options
+ * @returns {any} The DOM-compatible value or a converter function.
+ */
+const asControlHostValue = (
+  jsValue,
+  { controlType, type, naviInputType, pad },
 ) => {
-  const { name: constraintName } = constraint;
-  const propName = CONSTRAINT_NAME_TO_PROP[constraintName];
-
-  // 1. Search first on the requester (e.g. the <li> that was clicked),
-  //  then fall back to element (e.g. the hidden <input>).
-  if (requester) {
-    const requesterController = requester.__uiStateController__;
-    if (requesterController && requesterController !== controller) {
-      const requesterControllerMessage = requesterController.props[propName];
-      if (requesterControllerMessage) {
-        return {
-          message: requesterControllerMessage,
-          origin: "requester controller",
-        };
-      }
+  if (controlType === "select") {
+    // A select holds one of its options, always a string; holding nothing is
+    // the empty option, which the element spells "".
+    return asInputValue(jsValue);
+  }
+  if (controlType === "input" || controlType === "picker") {
+    if (type === "datetime-local") {
+      return asDatetimeLocalString(jsValue);
+    }
+    if (type === "range" || isNumberInput(type, naviInputType)) {
+      return asNumberString(jsValue, pad);
     }
+    if (type === "color") {
+      return asColorString(jsValue);
+    }
+    return asInputValue(jsValue);
   }
-
-  const controllerMessage = controller.props[propName];
-  if (controllerMessage) {
-    return {
-      message: controllerMessage,
-      origin: "controller",
-    };
+  return jsValue;
+};
+// As explained in https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/datetime-local#setting_timezones
+// datetime-local does not support timezones
+const asDatetimeLocalString = (dateTimeString) => {
+  const date = new Date(dateTimeString);
+  if (isNaN(date.getTime())) {
+    return dateTimeString;
   }
-
-  return {
-    message: generatedMessage,
-    origin: "generated message",
-  };
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
+  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
 };
-
-// prop that we'll set on the control.
-// CONSTRAINT_ATTRIBUTE_SET is consulted through controlAttributeFromProp()
-// rather than spread in here: a constraint registers into it when its own
-// module evaluates, so anything read at module-eval time reads a set that is
-// still filling up — and in a bundle, whichever constraint happens to evaluate
-// last would silently lose its attribute.
-const CONTROL_ATTRIBUTE_SET = new Set([
-  "ref",
-  "children",
-  "id",
-  "name",
-  "type",
-  "value",
-  "checked",
-  "placeholder",
-  "inputMode",
-  "autoComplete",
-  "spellcheck",
-  "autoCorrect",
-  "aria-controls",
-  // The name goes where the role is: the root box has none, so an aria-label
-  // left on it names nothing at all, while the host is what the user focuses
-  // and what a screen reader announces (and what getByRole({ name }) reads).
-  "aria-label",
+// `pad` is how many digits the number is WRITTEN on — an hour is held as 7 and
+// shown as "07". Held and shown are two things here, the way they are for a
+// datetime-local above: what the field says is derived from what the control
+// holds, and reading it back (readNumberFromInput) gives the number again.
+const asNumberString = (jsValue, pad) => {
+  if (jsValue === undefined) {
+    return "";
+  }
+  if (!pad || jsValue === "" || jsValue === null) {
+    return jsValue;
+  }
+  const number = Number(jsValue);
+  if (Number.isNaN(number)) {
+    return jsValue;
+  }
+  const negative = number < 0;
+  const digits = String(negative ? -number : number).padStart(Number(pad), "0");
+  return negative ? `-${digits}` : digits;
+};
+// Browser requires a non-empty value for <input type="color">.
+// When our logical value is empty we give it #000000 so it doesn't choke.
+// The UI uses the original (possibly empty) value to show the checkerboard.
+const asColorString = (jsValue) => {
+  return jsValue || "#000000";
+};
+const asInputValue = (jsValue) => {
+  if (jsValue === undefined) {
+    return "";
+  }
+  return jsValue;
+};
+
+/**
+ * Reads the current logical JS value from a control host DOM element.
+ *
+ * Handles all navi control host element types:
+ * - `<button>` — reads via `navi_get_value` custom event, falls back to `button.value`
+ * - `<input type="number|range">` — parses as a number, returns `undefined` when empty
+ * - `<input type="checkbox|radio">` — returns `undefined` when unchecked, otherwise reads
+ *   via `navi_get_value` custom event (to preserve the original JS type of the value prop)
+ * - `<input type="datetime-local">` — converts the local datetime string to an ISO 8601 string
+ * - `<input type="navi_picker">` — delegates to the controller via `navi_get_ui_state`
+ * - All other inputs — returns `input.value` as a string
+ *
+ * @param {HTMLElement} controlHost - The control host DOM element to read from.
+ * @returns {any} The current logical value of the control.
+ */
+const readControlValue = (controlHost) => {
+  if (
+    controlHost.tagName === "BUTTON" ||
+    controlHost.getAttribute("role") === "button"
+  ) {
+    return readValueFromButton(controlHost);
+  }
+  if (controlHost.tagName === "INPUT") {
+    // important: input.type = "navi_js"; followed by input.type; returns "text"
+    // so use getAttribute
+    const type = controlHost.getAttribute("type");
+
+    if (
+      type === "range" ||
+      isNumberInput(type, controlHost.getAttribute("navi-input-type"))
+    ) {
+      return readNumberFromInput(controlHost);
+    }
+    if (type === "color") {
+      return readValueFromControlHost(controlHost);
+    }
+    if (type === "checkbox" || type === "radio") {
+      return readValueFromCheckableInput(controlHost);
+    }
+    if (type === "datetime-local") {
+      return readDatetimeLocalFromInput(controlHost);
+    }
+    if (type === "navi_js") {
+      return getUIStateFromElement(controlHost);
+    }
+    return readValueFromInput(controlHost);
+  }
+  if (controlHost.hasAttribute("navi-control-host")) {
+    // Non-button, non-input navi controls (e.g. Badge.Button rendered as span)
+    return readValueFromControlHost(controlHost);
+  }
+  return readValueFromElement(controlHost);
+};
+const readValueFromControlHost = (controlHost) => {
+  return readValueFromNaviCustomEvent(controlHost, controlHost.value);
+};
+const readValueFromButton = (button) => {
+  return readValueFromControlHost(button);
+};
+const readDatetimeLocalFromInput = (input) => {
+  const localDateTimeString = input.value;
+  if (localDateTimeString === "") {
+    return "";
+  }
+  const localDate = new Date(localDateTimeString);
+  if (isNaN(localDate.getTime())) {
+    return localDateTimeString;
+  }
+  return localDate.toISOString();
+};
+const readNumberFromInput = (input) => {
+  const numberString = input.value;
+  if (numberString === "") {
+    return "";
+  }
+  const asNumber = Number(numberString);
+  if (isNaN(asNumber)) {
+    return numberString;
+  }
+  return asNumber;
+};
+const readValueFromCheckableInput = (input) => {
+  const checked = input.checked;
+  if (!checked) {
+    return undefined;
+  }
+  return readValueFromControlHost(input);
+};
+const readValueFromInput = (input) => {
+  const value = input.value;
+  return value;
+};
+const readValueFromElement = (element) => {
+  const value = element.value;
+  return value;
+};
+const readValueFromNaviCustomEvent = (field, fallback) => {
+  // prefer the value given as prop (respect original type, browser would convert to string)
+  let responded;
+  let value;
+  dispatchCustomEvent(field, "navi_get_value", {
+    respondWith: (jsValue) => {
+      responded = true;
+      value = jsValue;
+    },
+  });
+  if (responded) {
+    return value;
+  }
+  return fallback;
+};
+
+// In-memory registry of all mounted ui state controllers keyed by their id.
+// Allows direct controller access without dispatching DOM events — used by external
+// callers (e.g. selectable_list) to call setUIState by id instead of via the DOM.
+const controllersById = new Map();
+
+// In-memory registry for radio controllers, keyed by input name.
+// Allows radio sibling unchecking without querying the DOM — necessary when
+// items are virtualized and their DOM element may not exist at the time.
+// Form scoping is reproduced by comparing parentUIStateController references.
+const radioControllersByName = new Map();
+
+// Registry for non-serializable JS values that cannot be written to DOM attributes as-is.
+// When a value is an object/array, we store it here and write a reference string to the DOM
+// instead of "[object Object]". Console-inspectable via window.__navi_js('id').
+// The controller id is used as key — if the controller has no id, the value is not registered.
+const naviJsRegistry = new Map();
+
+const getUIStateControllerById = (id) => controllersById.get(id);
+const getRadioSiblings = (radioUIStateController) => {
+  const siblings = radioControllersByName.get(radioUIStateController.name);
+  return siblings;
+};
+
+const toDomValue = (
+  jsValue,
+  { controlType, id, type, naviInputType, pad },
+) => {
+  const domValue = asControlHostValue(jsValue, {
+    controlType,
+    type,
+    naviInputType,
+    pad,
+  });
+  if (isSerializableAsDomValue(domValue)) {
+    return domValue;
+  }
+  naviJsRegistry.set(id, domValue);
+  return `window.__navi_js('${id}')`;
+};
+
+window.__navi_js = (id) => naviJsRegistry.get(id);
+const isSerializableAsDomValue = (value) => {
+  if (value === null || value === undefined) {
+    return true;
+  }
+  const type = typeof value;
+  return type === "string" || type === "number" || type === "boolean";
+};
+
+const onUIStateControllerCreated = (uiStateController) => {
+  const { id, name, controlType } = uiStateController;
+  if (id) {
+    controllersById.set(id, uiStateController);
+  }
+  const proxyFor = uiStateController.props["navi-control-proxy-for"];
+  if (proxyFor) {
+    let proxySet = proxyControllersByRealInputId.get(proxyFor);
+    if (!proxySet) {
+      proxySet = new Set();
+      proxyControllersByRealInputId.set(proxyFor, proxySet);
+    }
+    proxySet.add(uiStateController);
+  }
+  if (
+    controlType === "input" &&
+    uiStateController.props.type === "radio" &&
+    name
+  ) {
+    let set = radioControllersByName.get(name);
+    if (!set) {
+      set = new Set();
+      radioControllersByName.set(name, set);
+    }
+    set.add(uiStateController);
+  }
+};
+const onUIStateControllerDestroyed = (uiStateController) => {
+  const { id, name, controlType } = uiStateController;
+  if (id) {
+    // Only the controller the id currently points at may take the entry away:
+    // when two controls share an id, the one leaving would otherwise unregister
+    // the one staying (see the warning in onUIStateControllerCreated), and the
+    // same holds while a control is being replaced by its successor, which
+    // registers during its render, before this cleanup runs.
+    if (controllersById.get(id) === uiStateController) {
+      controllersById.delete(id);
+      naviJsRegistry.delete(id);
+    }
+  }
+  const proxyFor = uiStateController.props["navi-control-proxy-for"];
+  if (proxyFor) {
+    const proxySet = proxyControllersByRealInputId.get(proxyFor);
+    if (proxySet) {
+      proxySet.delete(uiStateController);
+      if (proxySet.size === 0) {
+        proxyControllersByRealInputId.delete(proxyFor);
+      }
+    }
+  }
+  if (
+    controlType === "input" &&
+    uiStateController.controlHostProps.type === "radio" &&
+    name
+  ) {
+    const set = radioControllersByName.get(name);
+    if (set) {
+      set.delete(uiStateController);
+      if (set.size === 0) {
+        radioControllersByName.delete(name);
+      }
+    }
+  }
+};
+
+/**
+ * Controller-based equivalent of findControlProxyTarget.
+ * Given a proxy controller, returns the real control's controller.
+ * Finds the target by walking the parent controller's children — no DOM queries.
+ * Returns `null` when the controller is not a proxy or the target is not found.
+ */
+const findControlProxyTargetController = (controller) => {
+  const proxyFor = controller.controlHostProps["navi-control-proxy-for"];
+  if (!proxyFor) {
+    return null;
+  }
+  return getUIStateControllerById(proxyFor) ?? null;
+};
+
+// Reverse-lookup map: real-input id → the proxy controllers that reference it
+// via `navi-control-proxy-for`. A single control can be represented by several
+// proxies (an "enable"/"disable" button pair for one radio, for instance), so
+// each id holds a set. Maintained on create/destroy so lookup is O(1).
+const proxyControllersByRealInputId = new Map();
+const findProxyControllers = (realInputId) => {
+  if (!realInputId) {
+    return null;
+  }
+  return proxyControllersByRealInputId.get(realInputId) ?? null;
+};
+
+/**
+ * The attributes constraints read, filled by each constraint module as it
+ * evaluates. A constraint declares the attribute it wants (`"data-no-emoji"`)
+ * and gets the prop for free: a control accepts the camelCase form
+ * (`noEmoji`) and writes it on the control host under the attribute name — the
+ * same conversion `element.dataset` does, so what a component is passed and
+ * what ends up in the DOM read as one thing.
+ */
+
+const CONSTRAINT_ATTRIBUTE_SET = new Set();
+
+const dataAttributeCache = new Map();
+// A constraint imported lazily registers its attribute after controls have
+// already rendered, so an answer computed before it arrived must not survive it.
+let attributeCountWhenCached = 0;
+/**
+ * The constraint attribute a prop stands for, `null` when it stands for none:
+ * `"noEmoji"` → `"data-no-emoji"`.
+ */
+const constraintAttributeFromProp = (key) => {
+  if (attributeCountWhenCached !== CONSTRAINT_ATTRIBUTE_SET.size) {
+    dataAttributeCache.clear();
+    attributeCountWhenCached = CONSTRAINT_ATTRIBUTE_SET.size;
+  }
+  const fromCache = dataAttributeCache.get(key);
+  if (fromCache !== undefined) {
+    return fromCache;
+  }
+  let attribute = null;
+  // An attribute is already written as one (`data-no-emoji`, `aria-label`) —
+  // there is nothing to convert, and the literal lookup has already happened.
+  if (!key.includes("-")) {
+    const candidate = `data-${key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`;
+    if (CONSTRAINT_ATTRIBUTE_SET.has(candidate)) {
+      attribute = candidate;
+    }
+  }
+  dataAttributeCache.set(key, attribute);
+  return attribute;
+};
+
+/**
+ * Whether a constraint attribute is on. Present means on — `""` is how HTML
+ * writes a bare attribute — and only the values that say "passed, and off"
+ * turn it off.
+ */
+const isConstraintAttributeOn = (value) =>
+  value !== undefined && value !== null && value !== false;
+
+const CONSTRAINT_NAME_TO_PROP = {
+  disabled: "disabledMessage",
+  required: "requiredMessage",
+  pattern: "patternMessage",
+  type_email: "typeMessage",
+  type_number: "typeMessage",
+  min_length: "minLengthMessage",
+  max_length: "maxLengthMessage",
+  min: "minMessage",
+  max: "maxMessage",
+  single_space: "singleSpaceMessage",
+  displayable: "displayableMessage",
+  max_line_breaks: "maxLineBreaksMessage",
+  no_emoji: "noEmojiMessage",
+  same_as: "sameAsMessage",
+  min_lower_letter: "minLowerLetterMessage",
+  min_upper_letter: "minUpperLetterMessage",
+  min_digit: "minDigitMessage",
+  min_special_char: "minSpecialCharMessage",
+  one_of: "oneOfMessage",
+  readonly: "readOnlyMessage",
+  busy: "busyMessage",
+  available: "availableMessage",
+};
+
+const CONSTRAINT_MESSAGE_PROP_NAME_SET = new Set(
+  Object.values(CONSTRAINT_NAME_TO_PROP),
+);
+
+const extractMessageAndRemainingProps = (props) => {
+  const ownMessages = {};
+  const remaining = {};
+  const keyToVisit = new Set(Object.keys(props));
+  for (const key of keyToVisit) {
+    if (CONSTRAINT_MESSAGE_PROP_NAME_SET.has(key)) {
+      ownMessages[key] = props[key];
+    } else {
+      remaining[key] = props[key];
+    }
+  }
+  return [ownMessages, remaining];
+};
+
+/**
+ * The one-line form of a constraint message, or `undefined` when it has none.
+ *
+ * A message is not always a sentence: it can be an `Error`, or a whole element
+ * (an `errorMapping` returning JSX to put a link inside the callout). Those
+ * still render fine in the callout, but they have no one-line form, and
+ * anything that needs one — a `title` attribute, a caller drawing its own
+ * summary — must be given nothing rather than `String(message)`, which writes
+ * "[object Object]" on the screen.
+ */
+const getMessageString = (message) => {
+  if (typeof message === "string") {
+    return message;
+  }
+  if (Error.isError(message)) {
+    return message.message;
+  }
+  return undefined;
+};
+
+const getConstraintMessage = (
+  controller,
+  constraint,
+  generatedMessage,
+  { requester },
+) => {
+  const { name: constraintName } = constraint;
+  const propName = CONSTRAINT_NAME_TO_PROP[constraintName];
+
+  // 1. Search first on the requester (e.g. the <li> that was clicked),
+  //  then fall back to element (e.g. the hidden <input>).
+  if (requester) {
+    const requesterController = requester.__uiStateController__;
+    if (requesterController && requesterController !== controller) {
+      const requesterControllerMessage = requesterController.props[propName];
+      if (requesterControllerMessage) {
+        return {
+          message: requesterControllerMessage,
+          origin: "requester controller",
+        };
+      }
+    }
+  }
+
+  const controllerMessage = controller.props[propName];
+  if (controllerMessage) {
+    return {
+      message: controllerMessage,
+      origin: "controller",
+    };
+  }
+
+  return {
+    message: generatedMessage,
+    origin: "generated message",
+  };
+};
+
+// prop that we'll set on the control.
+// CONSTRAINT_ATTRIBUTE_SET is consulted through controlAttributeFromProp()
+// rather than spread in here: a constraint registers into it when its own
+// module evaluates, so anything read at module-eval time reads a set that is
+// still filling up — and in a bundle, whichever constraint happens to evaluate
+// last would silently lose its attribute.
+const CONTROL_ATTRIBUTE_SET = new Set([
+  "ref",
+  "children",
+  "id",
+  "name",
+  "type",
+  "value",
+  "checked",
+  "placeholder",
+  "inputMode",
+  "autoComplete",
+  "spellcheck",
+  "autoCorrect",
+  "aria-controls",
+  // The name goes where the role is: the root box has none, so an aria-label
+  // left on it names nothing at all, while the host is what the user focuses
+  // and what a screen reader announces (and what getByRole({ name }) reads).
+  "aria-label",
   "aria-labelledby",
   "tabIndex",
   "command",
@@ -8376,12 +8915,7 @@ const REQUIRED_CONSTRAINT = {
     if (type === "time") {
       return naviI18n("constraint.required.time");
     }
-    const inputMode = field.controlHostProps.inputMode;
-    if (
-      type === "number" ||
-      inputMode === "numeric" ||
-      inputMode === "decimal"
-    ) {
+    if (isNumberInput(type, field.controlHostProps["navi-input-type"])) {
       return naviI18n("constraint.required.number");
     }
     if (type === "datetime-local") {
@@ -8610,10 +9144,8 @@ const TYPE_NUMBER_CONSTRAINT = {
       return null;
     }
     const type = field.controlHostProps.type;
-    const inputMode = field.controlHostProps.inputMode;
-    const isNumber =
-      type === "number" || inputMode === "numeric" || inputMode === "decimal";
-    if (!isNumber) {
+    const naviType = field.controlHostProps["navi-input-type"];
+    if (!isNumberInput(type, naviType)) {
       return null;
     }
     const valueAsString =
@@ -8626,7 +9158,6 @@ const TYPE_NUMBER_CONSTRAINT = {
       return null;
     }
 
-    const naviType = field.controlHostProps["navi-input-type"];
     if (naviType === "hour") {
       return naviI18n(`constraint.type.hour.default`);
     }
@@ -8682,15 +9213,13 @@ const MIN_CONSTRAINT = {
       return null;
     }
     const type = field.controlHostProps.type;
-    const inputMode = field.controlHostProps.inputMode;
+    const naviInputType = field.controlHostProps["navi-input-type"];
     const valueAsString =
       field.uiState === undefined ? "" : String(field.uiState);
     if (!valueAsString) {
       return null;
     }
-    const isNumber =
-      type === "number" || inputMode === "numeric" || inputMode === "decimal";
-    if (isNumber) {
+    if (isNumberInput(type, naviInputType)) {
       const minNumber = parseFloat(minString);
       if (isNaN(minNumber)) {
         return null;
@@ -8700,7 +9229,6 @@ const MIN_CONSTRAINT = {
         return null;
       }
       if (numericValue < minNumber) {
-        const naviInputType = field.controlHostProps["navi-input-type"];
         if (naviInputType === "hour") {
           return naviI18n(`constraint.min.hour.default`, {
             min: minString,
@@ -8785,15 +9313,13 @@ const MAX_CONSTRAINT = {
       return null;
     }
     const type = field.controlHostProps.type;
-    const inputMode = field.controlHostProps.inputMode;
+    const naviInputType = field.controlHostProps["navi-input-type"];
     const valueAsString =
       field.uiState === undefined ? "" : String(field.uiState);
     if (!valueAsString) {
       return null;
     }
-    const isNumber =
-      type === "number" || inputMode === "numeric" || inputMode === "decimal";
-    if (isNumber) {
+    if (isNumberInput(type, naviInputType)) {
       const maxNumber = parseFloat(maxString);
       if (isNaN(maxNumber)) {
         return null;
@@ -8806,7 +9332,6 @@ const MAX_CONSTRAINT = {
         return null;
       }
 
-      const naviInputType = field.controlHostProps["navi-input-type"];
       if (naviInputType === "hour") {
         return naviI18n(`constraint.max.hour.default`, {
           max: maxString,
@@ -8913,10 +9438,9 @@ const STEP_CONSTRAINT = {
       return null;
     }
     const type = field.controlHostProps.type;
-    const inputMode = field.controlHostProps.inputMode;
-    const isNumericText =
-      type === "text" && (inputMode === "numeric" || inputMode === "decimal");
-    if (!isNumericText && !STEP_SUPPORTED_TYPE_SET.has(type)) {
+    const naviInputType = field.controlHostProps["navi-input-type"];
+    const isNumber = isNumberInput(type, naviInputType);
+    if (!isNumber && !STEP_SUPPORTED_TYPE_SET.has(type)) {
       return null;
     }
     const stepRaw = field.controlHostProps.step;
@@ -8930,7 +9454,6 @@ const STEP_CONSTRAINT = {
       return null;
     }
     const minString = field.controlHostProps.min;
-    const isNumber = type === "number" || isNumericText;
     if (isNumber) {
       const step = parseFloat(stepString);
       const base = minString ? parseFloat(minString) : 0;
@@ -8949,7 +9472,6 @@ const STEP_CONSTRAINT = {
       const after = before + step;
       const decimals = (stepString.split(".")[1] || "").length;
       const context = (() => {
-        const naviInputType = field.controlHostProps["navi-input-type"];
         if (naviInputType === "hour") {
           return `hour`;
         }
@@ -12097,8 +12619,8 @@ const TIME_RANGE_CONSTRAINT = {
       console.warn(`Time after constraint: no control with id "${after}"`);
       return null;
     }
-    const timeBefore = minutesFromTime$1(otherController.uiState);
-    const timeAfter = minutesFromTime$1(field.uiState);
+    const timeBefore = minutesFromTime(otherController.uiState);
+    const timeAfter = minutesFromTime(field.uiState);
     if (timeBefore === null || timeAfter === null) {
       return null;
     }
@@ -12123,7 +12645,7 @@ CONSTRAINT_ATTRIBUTE_SET.add("data-time-min-duration");
 
 // "HH:MM" as a number of minutes, which is what two times are compared and
 // subtracted as. Anything else is a time nobody has finished writing.
-const minutesFromTime$1 = (time) => {
+const minutesFromTime = (time) => {
   if (typeof time !== "string") {
     return null;
   }
@@ -34126,13 +34648,24 @@ const useOpenPropsEffectOnOpenController = (
   // subsequent `open` change is a real, later toggle and should animate
   // normally like any other interactive open/close.
   const isFirstRunRef = useRef(true);
-  // The mount-time open, from the first run below until the effect after it
-  // could schedule it.
+  // What `open` was on the previous run of the effect below. preact re-runs
+  // an effect for a change of its deps — or for none at all, when a
+  // `<Loading>` above the popup parked the subtree: preact/compat's Suspense
+  // runs every hook cleanup in it and clears the deps of every effect, so the
+  // next render of the parked component runs them all again. A run where
+  // `open` did not change is that second kind, never a toggle.
+  const lastRunOpenRef = useRef(undefined);
+  // An open the popup is owed but cannot be given yet: the mount-time one,
+  // from the first run below until the effect after it could schedule it, and
+  // the one put back after a park (see above), which the same effect serves
+  // once the element is in the document again.
   const mountOpenOwedRef = useRef(null);
 
   useLayoutEffect(() => {
     const isFirstRun = isFirstRunRef.current;
     isFirstRunRef.current = false;
+    const openChanged = open !== lastRunOpenRef.current;
+    lastRunOpenRef.current = open;
 
     if (isFirstRun) {
       const mountOpenReason = open || defaultOpen;
@@ -34163,6 +34696,22 @@ const useOpenPropsEffectOnOpenController = (
       return undefined;
     }
     if (open) {
+      if (!openChanged) {
+        // The subtree was parked while the popup was open: the controller
+        // closed when the element left the document (see useOpenController's
+        // safety net), and whoever holds the open state still says open. Not
+        // a toggle — an open owed until the dom is back in the page, where
+        // the effect below serves it. Silent, like a mount-time open: the
+        // popup was already shown, there is no closed state to enter from.
+        // Returned here rather than falling through: the signal write below
+        // would read the deferred open as a refused one and write the popup
+        // closed.
+        mountOpenOwedRef.current = () =>
+          openController.open(new CustomEvent("open_by_prop", { detail: {} }), {
+            silent: true,
+          });
+        return undefined;
+      }
       openController.open(new CustomEvent("open_by_prop", { detail: {} }));
     } else {
       openController.requestClose(
@@ -34192,14 +34741,14 @@ const useOpenPropsEffectOnOpenController = (
     return undefined;
   }, [open]);
 
-  // Schedules the owed mount-time open — on every render, until it can. It has
-  // to wait for the element to be IN THE DOCUMENT, and a mount does not
-  // guarantee that: a `<Loading>` above the popup parks a suspended subtree by
-  // moving its dom into a detached <div> while keeping its components alive
-  // (preact/compat), and a render there re-creates the hooks, so the first run
-  // above happens against dom that is not in the page — where showModal() and
-  // showPopover() throw. The boundary settling re-renders the subtree with its
-  // dom back, and that render is the one that schedules.
+  // Schedules the owed open — on every render, until it can. It has to wait
+  // for the element to be IN THE DOCUMENT, and a render does not guarantee
+  // that: a `<Loading>` above the popup parks a suspended subtree by moving
+  // its dom into a detached <div> while keeping its components alive
+  // (preact/compat), so a run of the effect above can happen against dom that
+  // is not in the page — where showModal() and showPopover() throw. The
+  // boundary settling re-renders the subtree with its dom back, and that
+  // render is the one that schedules.
   //
   // Deferred + batched (see scheduleMountOpen) rather than called directly,
   // so nested popups that both mount already-open end up stacked
@@ -35538,19 +36087,29 @@ const FormContext = createContext();
  */
 
 
-const isTypingIntent = (e) =>
-  getKeyboardEventDefaultAction(e) === "type";
+const isTypingIntent = (e) => getKeyboardEventDefaultAction(e) === "type";
+
+// The character a key puts into the field, or null when it puts none there.
+// A typing intent covers Backspace and Delete too: they change the text without
+// bringing a character in, and both guards answer for the character coming in.
+// Counted in code points: an astral character is one character typed, not two.
+const getCharBeingInserted = (e) => {
+  const key = e.key;
+  if (key === "Enter") {
+    // Reaching here means a field that takes a newline (a textarea): the line
+    // break lands in the value like any other character.
+    return "\n";
+  }
+  if ([...key].length !== 1) {
+    return null;
+  }
+  return key;
+};
 
 const s = (n) => (n > 1 ? "s" : "");
 
-// Keydown: block only single printable characters that don't match the class.
-// Multi-character key names (Delete, ArrowLeft…) are always allowed.
+// Keydown: block a character that doesn't match the class.
 const getInvalidCharMessage = (char, { charClass, messageKey }) => {
-  // Counted in code points: an astral character is one character typed, not two.
-  const codePointCount = [...char].length;
-  if (codePointCount !== 1) {
-    return null;
-  }
   if (compileCharClass(charClass).test(char)) return null;
   return naviI18nFromValidityMessage({ key: messageKey });
 };
@@ -35631,18 +36190,28 @@ const createControlGuard = (controller) => {
   /**
    * Called on every keydown. Returns true when the key should be blocked
    * (caller must call e.preventDefault()).
-   * Non-typing keys (Delete, Arrow…) are always allowed.
+   * Keys that write nothing into the field (Arrow…) and keys that only remove
+   * text (Backspace, Delete) are always allowed.
    */
   const checkKeydown = (e, el) => {
     if (!isTypingIntent(e)) {
       return false;
     }
+    const char = getCharBeingInserted(e);
+    if (char === null) {
+      // Backspace/Delete: the value gets shorter and no character lands in it.
+      // Neither the character class nor the length limit has anything to say
+      // about a key that only removes — and refusing one would leave a full
+      // field with no way to be shortened.
+      clear(e);
+      return false;
+    }
     const { charGuard, maxLengthGuard } = controller.props;
 
     if (charGuard) {
       const charClass = resolveCharClass(charGuard);
       const messageKey = getCharClassMessageKey(charGuard);
-      const charMsg = getInvalidCharMessage(e.key, { charClass, messageKey });
+      const charMsg = getInvalidCharMessage(char, { charClass, messageKey });
       if (charMsg) {
         show(charMsg, e);
         return true;
@@ -38359,7 +38928,7 @@ const useControlProps = (props, {
       controlType,
       id: props.id,
       type: props.type,
-      inputMode: props.inputMode,
+      naviInputType: props["navi-input-type"],
       // How the value is WRITTEN where it is held one way and shown another —
       // a number on two digits ("07" for 7). See asControlHostValue.
       pad: props["navi-value-pad"]
@@ -52238,881 +52807,362 @@ const useAutoSelectReadOnly = (props) => {
     if (!e.target.readOnly) {
       return;
     }
-    if (lastPointerTypeRef.current === "touch") {
-      return;
-    }
-    e.preventDefault();
-    e.target.select();
-  };
-
-  return { onFocus, onMouseDown, onPointerDown };
-};
-
-/**
- * Input component for all textual input types.
- *
- * Note pour plus tard: un jour on voudra un cas field-sizing: content;
- *
- *
- * Supports:
- * - text (default)
- * - password
- * - hidden
- * - email
- * - url
- * - search
- * - tel
- * - etc.
- *
- * For non-textual inputs, specialized components will be used:
- * - <InputCheckbox /> for type="checkbox"
- * - <InputRadio /> for type="radio"
- *
- * Guard props (immediate feedback instead of wait-for-submit):
- *
- * - charGuard — restricts which characters can be typed, pasted, or set externally.
- *   Accepts a preset name or a raw regex character class:
- *   "numeric"      → digits only, sets inputMode="numeric" + pattern auto
- *   "alpha"        → letters only
- *   "alphanumeric" → letters and digits
- *   "uppercase"    → uppercase letters only
- *   "tel"          → phone chars (digits, +, -, parens, space), sets inputMode="tel"
- *   "card"         → credit card (digits and spaces), sets inputMode="numeric"
- *   "hex"          → hexadecimal digits
- *   "pin"          → numeric PIN, sets inputMode="numeric"
- *   "postal"       → postal code (digits, letters, space, hyphen)
- *   "iban"         → IBAN (uppercase and digits)
- *   "slug"         → URL slug (lowercase, digits, hyphens)
- *   "noEmoji"      → anything but an emoji
- *   "[A-Z0-9]"     → any custom regex character class, compiled with the `u`
- *                    flag: `\p{...}` is available, and an emoji counts as one
- *                    character rather than two halves.
- *   inputMode and pattern are auto-derived from the preset when not explicitly set.
- *   The presets come from @jsenv/validity, so the same name names the class a
- *   server checks the value against (see docs/field_validation.md).
- *
- * - maxLengthGuard — combines maxLength + overflow guard in one prop.
- *   Blocks keydown when the limit is reached; truncates on paste/set with an info callout.
- *   The maxLength constraint remains active for form validation at submit.
- *   Use plain maxLength (without maxLengthGuard) for submit-only validation.
- *
- * Background color:
- * - backgroundColor="transparent" applies at rest and hover; a focused field
- *   turns solid (--navi-surface-color) so text is not typed over what sits behind.
- * - variant="discrete" drops background and border at rest; focus brings back
- *   a solid surface. variant="discrete-border" does the same but keeps the border.
- * - variant="discrete" + backgroundColor: the color applies at rest and hover,
- *   and the field goes transparent while focused.
- *
- * variant="text" is the odd one: it renders no <input> at all, just the value
- * as text — see InputTextualAsText below for what it is for and what it drops.
- */
-
-const InputHeadlessResolver = props => {
-  const Next = useNextResolver();
-  if (props.headless) {
-    return jsx(InputTextualHeadless, {
-      ...props
-    });
-  }
-  if (props.type === "hidden") {
-    return jsx(InputHidden, {
-      ...props
-    });
-  }
-  return jsx(Next, {
-    ...props
-  });
-};
-const InputHidden = props => {
-  const [inputRootProps, inputHostProps] = useInputTextualProps(props);
-  return jsx(RealInput, {
-    ...inputRootProps,
-    ...inputHostProps
-  });
-};
-const InputTextualHeadless = props => {
-  const [inputRootProps, inputHostProps] = useInputTextualProps(props);
-  return jsx(RealInput, {
-    "navi-visually-hidden": "",
-    "navi-focus-delegate": "",
-    "aria-hidden": "true",
-    ...inputRootProps,
-    ...inputHostProps
-  });
-};
-const useInputTextualProps = props => {
-  return useControlProps(props, {
-    controlType: "input"
-  });
-};
-const InputTextualUI = props => {
-  installInputCss();
-  const {
-    ui,
-    variant,
-    backgroundColor,
-    width = "maxLength"
-  } = props;
-  const [inputControlRootProps, inputControlHostProps, controlChildrenWrapperProps] = useInputTextualProps(props);
-  const {
-    id,
-    basePseudoState,
-    children
-  } = inputControlHostProps;
-  const {
-    uiStateController
-  } = controlChildrenWrapperProps;
-  const value = uiStateController.uiState;
-  const disabled = basePseudoState[":disabled"];
-  const readOnly = basePseudoState[":read-only"];
-  const loading = basePseudoState[":-navi-loading"];
-  const childrenWithContext = jsx(ControlChildrenWrapper, {
-    ...controlChildrenWrapperProps,
-    children: jsx(InputTextualContext.Provider, {
-      value: {
-        id,
-        readOnly,
-        disabled,
-        value
-      },
-      children: children || ui
-    })
-  });
-
-  // meant to end on input
-  // we have to use delete otherwise it could override width: undefined
-  // when remainingProps contains expandX which would try to set width to 100%
-  delete inputControlRootProps.width;
-  if (width === "maxLength") {
-    const widthFromMaxLength = resolveWidthFromMaxLength(inputControlHostProps.maxLength, props.inputMode);
-    if (widthFromMaxLength !== undefined) {
-      inputControlHostProps.width = widthFromMaxLength;
-    }
-  } else if (width === "content") {
-    inputControlHostProps.fieldSizing = "content";
-  } else {
-    inputControlHostProps.width = width;
-  }
-  return jsxs(Box, {
-    as: "span",
-    inline: true,
-    flex: true,
-    baseClassName: "navi_input",
-    ...inputControlRootProps,
-    basePseudoState: basePseudoState,
-    ui: undefined,
-    "data-variant": variant || undefined,
-    "data-background": backgroundColor !== undefined && backgroundColor !== "transparent" ? "" : undefined,
-    "data-background-transparent": backgroundColor === "transparent" ? "" : undefined,
-    styleCSSVars: InputStyleCSSVars,
-    pseudoStateSelector: ".navi_control_input",
-    pseudoClasses: InputPseudoClasses,
-    pseudoElements: InputPseudoElements
-    // input may have left/right icons and we want the anchor to target the input element
-    // which is where the interaction can happen
-    ,
-    "data-callout-anchor": ".navi_control_input",
-    children: [jsx(LoadingOutline, {
-      loading: loading,
-      color: "var(--loader-color)",
-      inset: -1
-    }), variant === "underline" ? jsxs("span", {
-      className: "navi_input_real_input_wrapper",
-      children: [jsx(RealInput, {
-        ...inputControlHostProps
-      }), jsx("span", {
-        className: "navi_input_underline"
-      })]
-    }) : jsx(RealInput, {
-      ...inputControlHostProps
-    }), childrenWithContext]
-  });
-};
-// How wide a field is when its width is left to what it accepts: a value that
-// cannot exceed maxLength characters needs no more room than that. Shared with
-// the text variant, which must land on the same number or the two would not be
-// the same box.
-const resolveWidthFromMaxLength = (maxLength, inputMode) => {
-  if (maxLength === undefined) {
-    return undefined;
-  }
-  if (inputMode === "numeric") {
-    return `${maxLength}ch`;
-  }
-  return `calc(${maxLength} * 1.5ch)`;
-};
-
-/**
- * variant="text" — the value, written where the field would be and taking
- * exactly its room: same paddings, same font, same line, and the border kept
- * but made invisible, so a value one only reads and the same value being
- * edited are one box. What it is for: an information that is sometimes known
- * (a name already on the profile) and sometimes asked for. Swapping the field
- * for its text must move nothing under it.
- *
- * It is text, and nothing else: no <input>, so nothing to focus, nothing in
- * the tab order, and nothing sent when the form is submitted — a value the
- * form must carry goes in an <Input type="hidden"> beside this one. Not a
- * disabled control either: `disabled`/`aria-disabled` would announce a field
- * one cannot use, where there is no field at all.
- *
- * The field's own props are dropped rather than half-honoured (placeholder,
- * the guards, the slots): they all describe an edition that does not happen
- * here. What is kept is what decides the box.
- */
-// Everything a field takes that a text does not: what the value is said with,
-// what the box is measured from (read below, then dropped too), and all the
-// rest — the guards, the slots, the constraints — which describe an edition
-// that does not happen here. What survives is what a Box understands: width,
-// spacing, colors, className, style.
-const INPUT_ONLY_PROPS = ["value", "defaultValue", "signal", "id", "maxLength", "inputMode", "width", "variant", "type", "name", "placeholder", "required", "readOnly", "disabled", "loading", "error", "min", "max", "step", "pattern", "autoComplete", "autoCorrect", "spellcheck", "charGuard", "maxLengthGuard", "list", "suggestions", "headless", "fieldSizing", "action", "uiAction", "ui", "children"];
-const InputTextualAsText = props => {
-  installInputCss();
-  // The id a Field handed down, which is what its Label points at.
-  const controlId = useContext(ControlIdContext);
-  const {
-    value,
-    defaultValue,
-    signal,
-    id,
-    maxLength,
-    inputMode,
-    width = "maxLength"
-  } = props;
-  const valueShown = signal ? signal.value : value ?? defaultValue;
-  const textWidth = width === "maxLength" ? resolveWidthFromMaxLength(maxLength, inputMode) : width === "content" ? undefined : width;
-  const boxProps = {
-    ...props
-  };
-  for (const inputOnlyProp of INPUT_ONLY_PROPS) {
-    delete boxProps[inputOnlyProp];
-  }
-  return jsx(Box, {
-    as: "span",
-    inline: true,
-    flex: true,
-    baseClassName: "navi_input",
-    "data-variant": "text",
-    styleCSSVars: InputStyleCSSVars,
-    ...boxProps,
-    children: jsx(Box, {
-      as: "span",
-      baseClassName: "navi_input_text",
-      id: id || controlId,
-      width: textWidth,
-      children: jsx("span", {
-        className: "navi_input_text_value",
-        children: valueShown
-      })
-    })
-  });
-};
-const InputTextualAsTextResolver = props => {
-  const Next = useNextResolver();
-  if (props.variant === "text") {
-    return jsx(InputTextualAsText, {
-      ...props
-    });
-  }
-  return jsx(Next, {
-    ...props
-  });
-};
-const InputTextualFirstResolver = props => {
-  const Next = useNextResolver();
-  const defaultRef = useRef(null);
-  props.ref = props.ref || defaultRef;
-  return jsx(Next, {
-    ...props
-  });
-};
-const InputTextual = /*#__PURE__*/createComponentResolver([InputTextualAsTextResolver, InputTextualFirstResolver, InputWithListResolver, InputWithSuggestionsResolver, InputTypeResolver, InputModeResolver, InputHeadlessResolver, InputTextualUI]);
-const RealInput = ({
-  maxLength,
-  ...domProps
-}) => {
-  const autoSelectReadOnlyProps = useAutoSelectReadOnly(domProps);
-  return jsx(Box, {
-    ...domProps,
-    as: "input",
-    baseClassName: "navi_control_input",
-    ...autoSelectReadOnlyProps,
-    // Never set native maxLength — our guard handles it. Omitting it entirely
-    // avoids a Preact quirk: setting maxLength={undefined} on a fresh DOM element
-    // (e.g. after a Suspense remount) causes Preact to run `el.maxLength = ""`
-    // which coerces to 0 (Number("") = 0), capping the input at 0 characters.
-    // see https://github.com/preactjs/preact/issues/2677
-    // The JS value stays accessible via the navi-max-length attribute and via
-    // inputControlHostProps (which the validation system reads directly).
-    "navi-max-length": maxLength
-  });
-};
-
-// Shared with textarea.jsx: a textarea is styled as a .navi_input box, so the
-// two read the same style props and pseudo states.
-const InputStyleCSSVars = {
-  "slotSpacing": ["--slot-spacing", "margin"],
-  "outlineWidth": "--outline-width",
-  "borderWidth": "--border-width",
-  "borderRadius": "--border-radius",
-  "padding": "--padding",
-  "paddingX": "--padding-x",
-  "paddingY": "--padding-y",
-  "paddingTop": "--padding-top",
-  "paddingRight": "--padding-right",
-  "paddingBottom": "--padding-bottom",
-  "paddingLeft": "--padding-left",
-  "background": "--background",
-  "backgroundColor": "--background-color",
-  "borderColor": "--border-color",
-  "color": "--color",
-  "fontSize": "--font-size",
-  ":hover": {
-    backgroundColor: "--background-color-hover",
-    borderColor: "--border-color-hover",
-    color: "--color-hover"
-  },
-  ":focus": {
-    backgroundColor: "--background-color-focus",
-    borderColor: "--border-color-focus"
-  },
-  ":active": {
-    backgroundColor: "--background-color-active",
-    borderColor: "--border-color-active"
-  },
-  ":read-only": {
-    backgroundColor: "--background-color-readonly",
-    borderColor: "--border-color-readonly",
-    color: "--color-readonly"
-  },
-  ":disabled": {
-    backgroundColor: "--background-color-disabled",
-    borderColor: "--border-color-disabled",
-    color: "--color-disabled"
-  }
-};
-const InputPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading", ":-navi-has-value"];
-const InputPseudoElements = ["::-navi-loader"];
-
-/**
- * Parses a time string into seconds.
- * Accepts:
- *   - number: returned as-is (already in seconds)
- *   - "HH:MM" string: converted to seconds (e.g. "00:30" → 1800, "01:00" → 3600)
- *   - undefined/null: returned as-is
- */
-const timeStringToSeconds = (timeString) => {
-  if (typeof timeString !== "string") {
-    return timeString;
-  }
-  const colonIndex = timeString.indexOf(":");
-  if (colonIndex === -1) {
-    return Number(timeString);
-  }
-  const hours = parseInt(timeString.slice(0, colonIndex), 10);
-  const minutes = parseInt(timeString.slice(colonIndex + 1), 10);
-  return (hours * 60 + minutes) * 60;
-};
-
-const isToday = (value) => {
-  if (!value) {
-    return false;
-  }
-  const now = new Date();
-  const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
-  if (typeof value === "string") {
-    return value === todayStr;
-  }
-  if (typeof value === "number") {
-    const d = new Date(value);
-    const s = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
-    return s === todayStr;
-  }
-  if (value instanceof Date) {
-    const s = `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-    return s === todayStr;
-  }
-  return false;
-};
-
-/**
- * Returns the current time as "HH:MM", with an optional minute offset.
- *
- * @param {number} [offsetMinutes=0] - Minutes to add (negative = subtract).
- *   E.g. getNowHours(-5) returns "now minus 5 minutes".
- *
- * @example
- * getNowHours()       // "14:30"
- * getNowHours(-5)     // "14:25"
- */
-const getNowHours = (offsetMinutes = 0) => {
-  const now = new Date();
-  const totalMinutes = now.getHours() * 60 + now.getMinutes() + offsetMinutes;
-  const clamped =
-    totalMinutes < 0
-      ? 0
-      : totalMinutes > 23 * 60 + 59
-        ? 23 * 60 + 59
-        : totalMinutes;
-  const h = Math.floor(clamped / 60);
-  const m = clamped % 60;
-  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
-};
-
-/**
- * Returns the current time rounded up to the nearest step boundary,
- * with an optional minute offset applied first.
- *
- * This is useful to compute a step-aligned `min` for a time picker:
- * passing it ensures the first available slot is always on a step boundary.
- *
- * @param {number} stepMinutes - Step size in minutes (e.g. 30).
- * @param {number} [offsetMinutes=0] - Minutes to add before rounding (negative = subtract).
- *
- * @example
- * // At 9:32, step 30, offset -5 → raw = 9:27 → ceil to 30 → "09:30"
- * // At 9:38, step 30, offset -5 → raw = 9:33 → ceil to 30 → "10:00"
- * getNowHoursRoundedToStep(30, -5)
- */
-const getNowHoursRoundedToStep = (stepMinutes, offsetMinutes = 0) => {
-  const now = new Date();
-  const totalMinutes = now.getHours() * 60 + now.getMinutes() + offsetMinutes;
-  const aligned = Math.ceil(totalMinutes / stepMinutes) * stepMinutes;
-  const clamped =
-    aligned < 0 ? 0 : aligned > 23 * 60 + 59 ? 23 * 60 + 59 : aligned;
-  const h = Math.floor(clamped / 60);
-  const m = clamped % 60;
-  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
-};
-
-/**
- * "HH:MM" and its two numbers, in both directions — what any control made of an
- * hour beside a minute (fields, wheels) aggregates to and is placed from. Held
- * as numbers, written on two digits: how they are shown is each control's own
- * business.
- */
-const parseTimeParts = (time) => {
-  if (typeof time !== "string") {
-    return null;
-  }
-  const match = /^(\d{1,2}):(\d{1,2})/.exec(time);
-  if (!match) {
-    return null;
-  }
-  return { hour: Number(match[1]), minute: Number(match[2]) };
-};
-
-// Half a time is not a time: a control holding one of the two and nothing in
-// the other has no value at all, and a form has nothing to send about it.
-const formatTimeParts = (hour, minute) => {
-  if (
-    hour === "" ||
-    hour === undefined ||
-    minute === "" ||
-    minute === undefined
-  ) {
-    return undefined;
-  }
-  return `${padTwo$1(hour)}:${padTwo$1(minute)}`;
-};
-
-const minutesFromTime = (time) => {
-  const parts = parseTimeParts(time);
-  if (!parts) {
-    return null;
-  }
-  return parts.hour * 60 + parts.minute;
-};
-
-const timeFromMinutes = (minutes) => {
-  const inDay =
-    ((minutes % MINUTES_PER_DAY) + MINUTES_PER_DAY) % MINUTES_PER_DAY;
-  return `${padTwo$1(Math.floor(inDay / 60))}:${padTwo$1(inDay % 60)}`;
-};
-
-const MINUTES_PER_DAY = 24 * 60;
-
-const padTwo$1 = (value) => String(value).padStart(2, "0");
-
-// Maps validity type names → navi input type names.
-// Numeric signal types must not fall through to the native type="number"
-// (which adds spinner buttons and has poor UX) — they map to navi_number instead.
-const VALIDITY_TYPE_TO_INPUT_TYPE = {
-  boolean: "checkbox",
-  number: "navi_number",
-  integer: "navi_number",
-  percentage: "navi_percentage",
-};
-
-// Conceptual number types: define defaults and map to native type="number".
-// The `data-navi-input-type` attribute is set so constraint messages can use
-// domain-specific wording instead of the generic "Ce nombre doit être...".
-const NAVI_TYPE_DEFAULTS = {
-  navi_time: {
-    "type": "time",
-    "navi-input-type": "time",
-    "min": 0,
-    "max": 24 * 3600 - 1,
-    "step": 1,
-  },
-  navi_percentage: {
-    "type": "navi_number",
-    "navi-input-type": "percentage",
-    "min": 0,
-    "max": 100,
-    "step": 1,
-  },
-  navi_number: {
-    type: "text",
-    autoCorrect: "off",
-    spellcheck: false,
-    autoComplete: "off",
-  },
-};
-
-/**
- * resolveInputProps — normalizes input-related props that are shared across
- * `<Picker>`, `<Input>` (textual) and `<Range>`. Mutates the props object in place.
- *
- * Normalization is applied recursively: a navi type may resolve to another navi
- * type (e.g. `navi_percentage` → `navi_number` → `text`), and each step applies its
- * own formatters and defaults before moving to the next.
- *
- * Steps applied for each type:
- * 1. Record the original navi type in `props["navi-input-type"]` (first call only).
- * 2. Apply defaults for the current type (min, max, step, and any other props),
- *    only when the prop is not already set.
- * 3. Apply min/max formatters (e.g. HH:MM string → number for duration types,
- *    Date → formatted string for date/time types).
- * 4. Apply step formatter (same conversion rules).
- * 5. Remap `props.type` to the target type defined by the current type's defaults,
- *    then recurse.
- *
- * Supported navi types and their targets:
- * - `navi_percentage` → `navi_number`  (0–100, step 1)
- * - `navi_number`     → `text`         (inputMode="numeric", no spin buttons implied)
- * - `navi_time`       → `time`         (step in seconds)
- *
- * Standard HTML input types with formatters:
- * - `date`, `month`, `week`, `time`, `datetime-local`, `datetime`:
- *   min/max accept `Date` instances or timestamps and are converted to the
- *   string format expected by the native input.
- * - `time`, `datetime-local`, `datetime`:
- *   step accepts `"HH:MM"` and is converted to seconds.
- */
-/**
- * A bound signal that carries a default of its own says the same thing on every
- * control: the control starts there and stays uncontrolled, which is what makes
- * a form read the value shown as a SUGGESTION rather than as something it
- * already holds. Uncontrolled here is about what the control HOLDS, not about
- * whether it follows the signal — the binding stays two-way either way (see
- * stateFromSignal in control_hooks.jsx). Written once and used by everything
- * that takes a `signal`, so one signal cannot mean two different things
- * depending on which control it was handed to.
- */
-const seedDefaultValueFromSignal = (props) => {
-  const signalOptions = props.signal?.options;
-  if (!signalOptions) {
-    return;
-  }
-  if (Object.hasOwn(props, "defaultValue")) {
-    // explicit defaultValue prop prevails
-    return;
-  }
-  // Snapshot the signal's current default so that resetUIState restores to the
-  // original default — not the value the signal had at the time of the last
-  // re-render.
-  const defaultValue = signalOptions.getDefaultValue(false);
-  if (defaultValue !== undefined) {
-    props.defaultValue = defaultValue;
-  }
-};
-
-const resolveInputProps = (props, { controlType = "input" } = {}) => {
-  // `signal` carries a bound state signal. It is left on `props` on purpose:
-  // `createControlInfo` (control_hooks.jsx) reads it to seed the state and to
-  // follow it, and `onUIAction` (ui_state_controller.js) writes user
-  // interactions back into it. Here we only derive input defaults (type/min/max,
-  // defaultValue/defaultChecked) from the signal's `options`, so the control
-  // ends up uncontrolled-with-default while still bound to the signal.
-  const signal = props.signal;
-  if (signal) {
-    const signalOptions = signal.options;
-    if (signalOptions) {
-      for (const key of ["min", "max", "step"]) {
-        if (props[key] === undefined && signalOptions[key] !== undefined) {
-          props[key] = signalOptions[key];
-        }
-      }
-      if (props.type === undefined && signalOptions.type !== undefined) {
-        const typeFromSignal =
-          VALIDITY_TYPE_TO_INPUT_TYPE[signalOptions.type] ?? signalOptions.type;
-        // What a signal says is what its value IS; what a control's `type` says
-        // is what the control is. They usually agree — a date-typed signal wants
-        // a date field — but a boolean one maps to a checkbox, and a picker made
-        // into a checkbox is not a picker with a different look: it is another
-        // control, with no popup to open. A picker asked to hold a yes/no keeps
-        // its two rows and stays itself.
-        const wouldChangeWhatTheControlIs =
-          controlType === "picker" &&
-          (typeFromSignal === "checkbox" || typeFromSignal === "radio");
-        if (!wouldChangeWhatTheControlIs) {
-          props.type = typeFromSignal;
-        }
-      }
-    }
-
-    const isCheckable = props.type === "checkbox" || props.type === "radio";
-    if (isCheckable) {
-      if (Object.hasOwn(props, "defaultChecked")) ; else {
-        // If no explicit defaultChecked, derive it from the signal's default
-        // value so that resetUIState restores to the original default.
-        // Only a stateSignal carries a default of its own; a plain signal has
-        // no `options` at all, and asking it for one used to throw on mount —
-        // the same optional read every other branch here already does.
-        const defaultVal = signalOptions?.getDefaultValue(false);
-        if (defaultVal === undefined) ; else if (props.type === "radio") {
-          if (defaultVal === true) {
-            props.defaultChecked = true;
-          } else if (
-            Object.hasOwn(props, "value") &&
-            defaultVal === props.value
-          ) {
-            props.defaultChecked = true;
-          }
-        } else if (typeof defaultVal === "boolean") {
-          // Standalone checkbox bound to a boolean signal.
-          props.defaultChecked = defaultVal;
-        } else {
-          // Checkbox is a group member: defaultVal is the array of
-          // selected item values.
-          const checkboxValue = props.value;
-          props.defaultChecked =
-            Array.isArray(defaultVal) && defaultVal.includes(checkboxValue);
-        }
-      }
-      return;
-    }
-
-    seedDefaultValueFromSignal(props);
-  }
-
-  const currentType = props.type;
-  // Apply min/max/step formatters before anything else — this must run even for
-  // standard HTML types (date, time, etc.) that have no NAVI_TYPE_DEFAULTS entry.
-  const currentTypeMinMaxFormatter = MIN_MAX_FORMATTER_BY_TYPE[currentType];
-  const currentTypeStepFormatter = STEP_FORMATTER_BY_TYPE[currentType];
-  if (currentTypeMinMaxFormatter) {
-    props.min = currentTypeMinMaxFormatter(props.min);
-    props.max = currentTypeMinMaxFormatter(props.max);
-  }
-  if (currentTypeStepFormatter) {
-    props.step = currentTypeStepFormatter(props.step);
-  }
-
-  // For navi_number: choose inputMode based on whether step/min/max suggest decimals.
-  // inputMode="numeric" (integer keyboard) vs "decimal" (keyboard with decimal separator).
-  if (currentType === "navi_number") {
-    if (props.inputMode === undefined) {
-      props.inputMode =
-        hasDecimalPlaces(props.step) ||
-        hasDecimalPlaces(props.min) ||
-        hasDecimalPlaces(props.max)
-          ? "decimal"
-          : "numeric";
-    }
-  }
-
-  const { charGuard } = props;
-  if (charGuard) {
-    if (charGuard === true || charGuard === "auto") {
-      // Auto-resolve charGuard from context.
-      let charGuardResolved;
-      const inputMode = props.inputMode;
-      if (inputMode === "numeric") {
-        charGuardResolved = "numeric";
-      } else if (inputMode === "decimal") {
-        charGuardResolved = "decimal";
-      } else if (currentType === "tel") {
-        charGuardResolved = "tel";
-      } else if (currentType === "email") {
-        charGuardResolved = "email";
-      }
-      if (charGuardResolved !== undefined) {
-        props.charGuard = charGuardResolved;
-      }
-    }
-    // charGuard is now resolved: derive inputMode from it if not already set.
-    if (props.inputMode === undefined && props.charGuard) {
-      const autoMode = INPUT_MODE_FROM_CHAR_GUARD[props.charGuard];
-      if (autoMode) {
-        props.inputMode = autoMode;
-      }
-    }
-    // Build pattern from the resolved charGuard (preset name → class, or raw class passthrough).
-    if (props.pattern === undefined && props.charGuard) {
-      const charClass = CHAR_CLASS_PRESETS[props.charGuard] ?? props.charGuard;
-      props.pattern = `${charClass}*`;
-    }
-  }
-
-  // Compute maxLength from max when inputMode is numeric/decimal.
-  // Done here (after inputMode is set) so controller.props has the resolved value.
-  if (props.maxLength === undefined) {
-    if (props.inputMode === "numeric") {
-      const { min, max } = props;
-      if (max === undefined) ; else {
-        const canBeNegative = min === undefined ? max < 0 : min < 0;
-        const signCharCount = canBeNegative ? 1 : 0;
-        const integerDigitCount = String(Math.floor(Math.abs(max))).length;
-        props.maxLength = signCharCount + integerDigitCount;
-      }
-    } else if (props.inputMode === "decimal") {
-      const { min, max, step } = props;
-      if (max === undefined) ; else if (step === undefined) ; else {
-        const canBeNegative = min === undefined ? max < 0 : min < 0;
-        const signCharCount = canBeNegative ? 1 : 0;
-        const integerDigitCount = String(Math.floor(Math.abs(max))).length;
-        const stepStr = String(step);
-        const dotIndex = stepStr.indexOf(".");
-        // integer step + decimal inputMode is an unusual combo, but we stay consistent:
-        // no decimal part in maxLength since valid values are whole numbers anyway
-        const isIntegerStep = dotIndex === -1;
-        const decimalSignCharCount = isIntegerStep ? 0 : 1;
-        const decimalDigitCount = isIntegerStep
-          ? 0
-          : stepStr.length - dotIndex - 1;
-        props.maxLength =
-          signCharCount +
-          integerDigitCount +
-          decimalSignCharCount +
-          decimalDigitCount;
-      }
-    }
-  }
-
-  // Resolve maxLengthGuard boolean/auto → the computed maxLength number.
-  if (props.maxLengthGuard === true || props.maxLengthGuard === "auto") {
-    props.maxLengthGuard =
-      typeof props.maxLength === "number" ? props.maxLength : undefined;
-  }
-
-  const currentTypeDefaults = NAVI_TYPE_DEFAULTS[currentType];
-  if (!currentTypeDefaults) {
-    return;
-  }
-
-  for (const key of Object.keys(currentTypeDefaults)) {
-    if (props[key] === undefined) {
-      props[key] = currentTypeDefaults[key];
+    if (lastPointerTypeRef.current === "touch") {
+      return;
     }
-  }
-  const targetType = currentTypeDefaults.type;
-  props.type = targetType;
-  resolveInputProps(props);
-};
+    e.preventDefault();
+    e.target.select();
+  };
 
-// Presets that imply a specific mobile keyboard inputMode.
-const INPUT_MODE_FROM_CHAR_GUARD = {
-  numeric: "numeric",
-  pin: "numeric",
-  card: "numeric",
-  tel: "tel",
-  decimal: "decimal",
+  return { onFocus, onMouseDown, onPointerDown };
 };
 
-const normalizeToDate = (value) => {
-  if (value === undefined || value === null) {
-    return null;
-  }
-  if (typeof value === "number") {
-    return new Date(value);
+/**
+ * Input component for all textual input types.
+ *
+ * Note pour plus tard: un jour on voudra un cas field-sizing: content;
+ *
+ *
+ * Supports:
+ * - text (default)
+ * - password
+ * - hidden
+ * - email
+ * - url
+ * - search
+ * - tel
+ * - etc.
+ *
+ * For non-textual inputs, specialized components will be used:
+ * - <InputCheckbox /> for type="checkbox"
+ * - <InputRadio /> for type="radio"
+ *
+ * Guard props (immediate feedback instead of wait-for-submit):
+ *
+ * - charGuard — restricts which characters can be typed, pasted, or set externally.
+ *   Accepts a preset name or a raw regex character class:
+ *   "numeric"      → digits only, sets inputMode="numeric" + pattern auto
+ *   "alpha"        → letters only
+ *   "alphanumeric" → letters and digits
+ *   "uppercase"    → uppercase letters only
+ *   "tel"          → phone chars (digits, +, -, parens, space), sets inputMode="tel"
+ *   "card"         → credit card (digits and spaces), sets inputMode="numeric"
+ *   "hex"          → hexadecimal digits
+ *   "pin"          → numeric PIN, sets inputMode="numeric"
+ *   "postal"       → postal code (digits, letters, space, hyphen)
+ *   "iban"         → IBAN (uppercase and digits)
+ *   "slug"         → URL slug (lowercase, digits, hyphens)
+ *   "noEmoji"      → anything but an emoji
+ *   "[A-Z0-9]"     → any custom regex character class, compiled with the `u`
+ *                    flag: `\p{...}` is available, and an emoji counts as one
+ *                    character rather than two halves.
+ *   inputMode and pattern are auto-derived from the preset when not explicitly set.
+ *   The presets come from @jsenv/validity, so the same name names the class a
+ *   server checks the value against (see docs/field_validation.md).
+ *
+ * - maxLengthGuard — combines maxLength + overflow guard in one prop.
+ *   Blocks keydown when the limit is reached; truncates on paste/set with an info callout.
+ *   The maxLength constraint remains active for form validation at submit.
+ *   Use plain maxLength (without maxLengthGuard) for submit-only validation.
+ *
+ * Background color:
+ * - backgroundColor="transparent" applies at rest and hover; a focused field
+ *   turns solid (--navi-surface-color) so text is not typed over what sits behind.
+ * - variant="discrete" drops background and border at rest; focus brings back
+ *   a solid surface. variant="discrete-border" does the same but keeps the border.
+ * - variant="discrete" + backgroundColor: the color applies at rest and hover,
+ *   and the field goes transparent while focused.
+ *
+ * variant="text" is the odd one: it renders no <input> at all, just the value
+ * as text — see InputTextualAsText below for what it is for and what it drops.
+ */
+
+const InputHeadlessResolver = props => {
+  const Next = useNextResolver();
+  if (props.headless) {
+    return jsx(InputTextualHeadless, {
+      ...props
+    });
   }
-  if (value instanceof Date) {
-    return value;
+  if (props.type === "hidden") {
+    return jsx(InputHidden, {
+      ...props
+    });
   }
-  return null;
+  return jsx(Next, {
+    ...props
+  });
+};
+const InputHidden = props => {
+  const [inputRootProps, inputHostProps] = useInputTextualProps(props);
+  return jsx(RealInput, {
+    ...inputRootProps,
+    ...inputHostProps
+  });
+};
+const InputTextualHeadless = props => {
+  const [inputRootProps, inputHostProps] = useInputTextualProps(props);
+  return jsx(RealInput, {
+    "navi-visually-hidden": "",
+    "navi-focus-delegate": "",
+    "aria-hidden": "true",
+    ...inputRootProps,
+    ...inputHostProps
+  });
+};
+const useInputTextualProps = props => {
+  return useControlProps(props, {
+    controlType: "input"
+  });
 };
+const InputTextualUI = props => {
+  installInputCss();
+  const {
+    ui,
+    variant,
+    backgroundColor,
+    width = "maxLength"
+  } = props;
+  const [inputControlRootProps, inputControlHostProps, controlChildrenWrapperProps] = useInputTextualProps(props);
+  const {
+    id,
+    basePseudoState,
+    children
+  } = inputControlHostProps;
+  const {
+    uiStateController
+  } = controlChildrenWrapperProps;
+  const value = uiStateController.uiState;
+  const disabled = basePseudoState[":disabled"];
+  const readOnly = basePseudoState[":read-only"];
+  const loading = basePseudoState[":-navi-loading"];
+  const childrenWithContext = jsx(ControlChildrenWrapper, {
+    ...controlChildrenWrapperProps,
+    children: jsx(InputTextualContext.Provider, {
+      value: {
+        id,
+        readOnly,
+        disabled,
+        value
+      },
+      children: children || ui
+    })
+  });
 
-const toInputDate = (value) => {
-  const date = normalizeToDate(value);
-  if (!date) {
-    return value;
+  // meant to end on input
+  // we have to use delete otherwise it could override width: undefined
+  // when remainingProps contains expandX which would try to set width to 100%
+  delete inputControlRootProps.width;
+  if (width === "maxLength") {
+    const widthFromMaxLength = resolveWidthFromMaxLength(inputControlHostProps.maxLength, props.inputMode);
+    if (widthFromMaxLength !== undefined) {
+      inputControlHostProps.width = widthFromMaxLength;
+    }
+  } else if (width === "content") {
+    inputControlHostProps.fieldSizing = "content";
+  } else {
+    inputControlHostProps.width = width;
   }
-  const yyyy = date.getFullYear();
-  const mm = String(date.getMonth() + 1).padStart(2, "0");
-  const dd = String(date.getDate()).padStart(2, "0");
-  return `${yyyy}-${mm}-${dd}`;
+  return jsxs(Box, {
+    as: "span",
+    inline: true,
+    flex: true,
+    baseClassName: "navi_input",
+    ...inputControlRootProps,
+    basePseudoState: basePseudoState,
+    ui: undefined,
+    "data-variant": variant || undefined,
+    "data-background": backgroundColor !== undefined && backgroundColor !== "transparent" ? "" : undefined,
+    "data-background-transparent": backgroundColor === "transparent" ? "" : undefined,
+    styleCSSVars: InputStyleCSSVars,
+    pseudoStateSelector: ".navi_control_input",
+    pseudoClasses: InputPseudoClasses,
+    pseudoElements: InputPseudoElements
+    // input may have left/right icons and we want the anchor to target the input element
+    // which is where the interaction can happen
+    ,
+    "data-callout-anchor": ".navi_control_input",
+    children: [jsx(LoadingOutline, {
+      loading: loading,
+      color: "var(--loader-color)",
+      inset: -1
+    }), variant === "underline" ? jsxs("span", {
+      className: "navi_input_real_input_wrapper",
+      children: [jsx(RealInput, {
+        ...inputControlHostProps
+      }), jsx("span", {
+        className: "navi_input_underline"
+      })]
+    }) : jsx(RealInput, {
+      ...inputControlHostProps
+    }), childrenWithContext]
+  });
 };
-const toInputMonth = (value) => {
-  const date = normalizeToDate(value);
-  if (!date) {
-    return value;
+// How wide a field is when its width is left to what it accepts: a value that
+// cannot exceed maxLength characters needs no more room than that. Shared with
+// the text variant, which must land on the same number or the two would not be
+// the same box.
+const resolveWidthFromMaxLength = (maxLength, inputMode) => {
+  if (maxLength === undefined) {
+    return undefined;
   }
-  const yyyy = date.getFullYear();
-  const mm = String(date.getMonth() + 1).padStart(2, "0");
-  return `${yyyy}-${mm}`;
-};
-const toInputWeek = (value) => {
-  const date = normalizeToDate(value);
-  if (!date) {
-    return value;
+  if (inputMode === "numeric") {
+    return `${maxLength}ch`;
   }
-  // ISO week number
-  const d = new Date(date);
-  d.setHours(0, 0, 0, 0);
-  d.setDate(d.getDate() + 3 - ((d.getDay() + 6) % 7));
-  const yearStart = new Date(d.getFullYear(), 0, 4);
-  const week =
-    Math.round(
-      ((d - yearStart) / 86400000 - 3 + ((yearStart.getDay() + 6) % 7)) / 7,
-    ) + 1;
-  return `${d.getFullYear()}-W${String(week).padStart(2, "0")}`;
+  return `calc(${maxLength} * 1.5ch)`;
 };
-const toInputTime = (value) => {
-  const date = normalizeToDate(value);
-  if (!date) {
-    return value;
+
+/**
+ * variant="text" — the value, written where the field would be and taking
+ * exactly its room: same paddings, same font, same line, and the border kept
+ * but made invisible, so a value one only reads and the same value being
+ * edited are one box. What it is for: an information that is sometimes known
+ * (a name already on the profile) and sometimes asked for. Swapping the field
+ * for its text must move nothing under it.
+ *
+ * It is text, and nothing else: no <input>, so nothing to focus, nothing in
+ * the tab order, and nothing sent when the form is submitted — a value the
+ * form must carry goes in an <Input type="hidden"> beside this one. Not a
+ * disabled control either: `disabled`/`aria-disabled` would announce a field
+ * one cannot use, where there is no field at all.
+ *
+ * The field's own props are dropped rather than half-honoured (placeholder,
+ * the guards, the slots): they all describe an edition that does not happen
+ * here. What is kept is what decides the box.
+ */
+// Everything a field takes that a text does not: what the value is said with,
+// what the box is measured from (read below, then dropped too), and all the
+// rest — the guards, the slots, the constraints — which describe an edition
+// that does not happen here. What survives is what a Box understands: width,
+// spacing, colors, className, style.
+const INPUT_ONLY_PROPS = ["value", "defaultValue", "signal", "id", "maxLength", "inputMode", "width", "variant", "type", "name", "placeholder", "required", "readOnly", "disabled", "loading", "error", "min", "max", "step", "pattern", "autoComplete", "autoCorrect", "spellcheck", "charGuard", "maxLengthGuard", "list", "suggestions", "headless", "fieldSizing", "action", "uiAction", "ui", "children"];
+const InputTextualAsText = props => {
+  installInputCss();
+  // The id a Field handed down, which is what its Label points at.
+  const controlId = useContext(ControlIdContext);
+  const {
+    value,
+    defaultValue,
+    signal,
+    id,
+    maxLength,
+    inputMode,
+    width = "maxLength"
+  } = props;
+  const valueShown = signal ? signal.value : value ?? defaultValue;
+  const textWidth = width === "maxLength" ? resolveWidthFromMaxLength(maxLength, inputMode) : width === "content" ? undefined : width;
+  const boxProps = {
+    ...props
+  };
+  for (const inputOnlyProp of INPUT_ONLY_PROPS) {
+    delete boxProps[inputOnlyProp];
   }
-  const hh = String(date.getHours()).padStart(2, "0");
-  const mm = String(date.getMinutes()).padStart(2, "0");
-  return `${hh}:${mm}`;
+  return jsx(Box, {
+    as: "span",
+    inline: true,
+    flex: true,
+    baseClassName: "navi_input",
+    "data-variant": "text",
+    styleCSSVars: InputStyleCSSVars,
+    ...boxProps,
+    children: jsx(Box, {
+      as: "span",
+      baseClassName: "navi_input_text",
+      id: id || controlId,
+      width: textWidth,
+      children: jsx("span", {
+        className: "navi_input_text_value",
+        children: valueShown
+      })
+    })
+  });
 };
-const toInputDatetime = (value) => {
-  const date = normalizeToDate(value);
-  if (!date) {
-    return value;
+const InputTextualAsTextResolver = props => {
+  const Next = useNextResolver();
+  if (props.variant === "text") {
+    return jsx(InputTextualAsText, {
+      ...props
+    });
   }
-  const yyyy = date.getFullYear();
-  const mm = String(date.getMonth() + 1).padStart(2, "0");
-  const dd = String(date.getDate()).padStart(2, "0");
-  const hh = String(date.getHours()).padStart(2, "0");
-  const min = String(date.getMinutes()).padStart(2, "0");
-  return `${yyyy}-${mm}-${dd}T${hh}:${min}`;
+  return jsx(Next, {
+    ...props
+  });
 };
-
-const MIN_MAX_FORMATTER_BY_TYPE = {
-  "date": toInputDate,
-  "month": toInputMonth,
-  "week": toInputWeek,
-  "time": toInputTime,
-  "datetime-local": toInputDatetime,
-  "datetime": toInputDatetime,
+const InputTextualFirstResolver = props => {
+  const Next = useNextResolver();
+  const defaultRef = useRef(null);
+  props.ref = props.ref || defaultRef;
+  return jsx(Next, {
+    ...props
+  });
 };
-const STEP_FORMATTER_BY_TYPE = {
-  "time": timeStringToSeconds,
-  "datetime-local": timeStringToSeconds,
-  "datetime": timeStringToSeconds,
+const InputTextual = /*#__PURE__*/createComponentResolver([InputTextualAsTextResolver, InputTextualFirstResolver, InputWithListResolver, InputWithSuggestionsResolver, InputTypeResolver, InputModeResolver, InputHeadlessResolver, InputTextualUI]);
+const RealInput = ({
+  maxLength,
+  ...domProps
+}) => {
+  const autoSelectReadOnlyProps = useAutoSelectReadOnly(domProps);
+  return jsx(Box, {
+    ...domProps,
+    as: "input",
+    baseClassName: "navi_control_input",
+    ...autoSelectReadOnlyProps,
+    // Never set native maxLength — our guard handles it. Omitting it entirely
+    // avoids a Preact quirk: setting maxLength={undefined} on a fresh DOM element
+    // (e.g. after a Suspense remount) causes Preact to run `el.maxLength = ""`
+    // which coerces to 0 (Number("") = 0), capping the input at 0 characters.
+    // see https://github.com/preactjs/preact/issues/2677
+    // The JS value stays accessible via the navi-max-length attribute and via
+    // inputControlHostProps (which the validation system reads directly).
+    "navi-max-length": maxLength
+  });
 };
 
-const hasDecimalPlaces = (value) => {
-  if (value === undefined || value === null) {
-    return false;
+// Shared with textarea.jsx: a textarea is styled as a .navi_input box, so the
+// two read the same style props and pseudo states.
+const InputStyleCSSVars = {
+  "slotSpacing": ["--slot-spacing", "margin"],
+  "outlineWidth": "--outline-width",
+  "borderWidth": "--border-width",
+  "borderRadius": "--border-radius",
+  "padding": "--padding",
+  "paddingX": "--padding-x",
+  "paddingY": "--padding-y",
+  "paddingTop": "--padding-top",
+  "paddingRight": "--padding-right",
+  "paddingBottom": "--padding-bottom",
+  "paddingLeft": "--padding-left",
+  "background": "--background",
+  "backgroundColor": "--background-color",
+  "borderColor": "--border-color",
+  "color": "--color",
+  "fontSize": "--font-size",
+  ":hover": {
+    backgroundColor: "--background-color-hover",
+    borderColor: "--border-color-hover",
+    color: "--color-hover"
+  },
+  ":focus": {
+    backgroundColor: "--background-color-focus",
+    borderColor: "--border-color-focus"
+  },
+  ":active": {
+    backgroundColor: "--background-color-active",
+    borderColor: "--border-color-active"
+  },
+  ":read-only": {
+    backgroundColor: "--background-color-readonly",
+    borderColor: "--border-color-readonly",
+    color: "--color-readonly"
+  },
+  ":disabled": {
+    backgroundColor: "--background-color-disabled",
+    borderColor: "--border-color-disabled",
+    color: "--color-disabled"
   }
-  const num = Number(value);
-  return !isNaN(num) && !Number.isInteger(num);
 };
+const InputPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading", ":-navi-has-value"];
+const InputPseudoElements = ["::-navi-loader"];
 
 const Input = props => {
   resolveInputProps(props);
@@ -65995,10 +66045,11 @@ const ItemTransitionContext = createContext(false);
 // that must reserve room for what is not rendered.
 const ListVirtualContext = createContext(null);
 // Set around each row a run of items renders (see ListItems): which row of the
-// collection it is, and where it stands among the rows the list holds. Carried
-// by context rather than injected into whatever vnode renderItem returned, so
-// that returning a component of one's own — instead of a bare <List.Item> —
-// works the same way.
+// collection it is, where it stands among the rows the list holds, and the
+// run's own account of which rows mount (see createRunRows) — what the row
+// draws its separator from. Carried by context rather than injected into
+// whatever vnode renderItem returned, so that returning a component of one's
+// own — instead of a bare <List.Item> — works the same way.
 const ListRowContext = createContext(null);
 // The slot a child of the list stands in, by id (see ListDeclaredChildren). A
 // row takes its place in the collection by slot: the place is then the list's
@@ -68741,22 +68792,12 @@ const ListItemRowResolver = props => {
       ...props
     });
   }
-  // eslint-disable-next-line no-unused-vars
-  const {
-    id,
-    index,
-    item,
-    rowMinHeight,
-    rowMinWidth,
-    ...rowProps
-  } = row;
   return jsx(Next, {
-    ...rowProps,
     ...props,
     id: props.id || row.id,
     index: row.index,
-    minHeight: props.minHeight === undefined ? rowMinHeight : props.minHeight,
-    minWidth: props.minWidth === undefined ? rowMinWidth : props.minWidth
+    minHeight: props.minHeight === undefined ? row.rowMinHeight : props.minHeight,
+    minWidth: props.minWidth === undefined ? row.rowMinWidth : props.minWidth
   });
 };
 const ListItemPresentationResolver = props => {
@@ -68834,8 +68875,8 @@ const ListItemUI = props => {
   const virtual = useContext(ListVirtualContext);
   const searchNoMatchMode = useContext(SearchNoMatchModeContext);
   // The run this row belongs to, when it comes from one (see ListItems): it
-  // registered the row, decided it is inside the render window, and placed its
-  // separator. All that is left here is to draw it.
+  // registered the row and decided it is inside the render window. Whether
+  // the row mounts is decided here, and told back to the run.
   const row = useContext(ListRowContext);
   const slotId = useContext(ListSlotContext);
   // There is no standalone match/matchScore/highlight prop — participation
@@ -68867,16 +68908,24 @@ const ListItemUI = props => {
   // name of this very component (idDefault, not the row's id): two components
   // may stand for the same row for a moment, one leaving as the other arrives,
   // and the one leaving must give back its own place, not the newcomer's.
-  if (!row) {
+  if (row) {
     if (props.filtered) {
-      virtual.drop(idDefault);
+      row.run.unmount(idDefault);
     } else {
-      props.index = virtual.take(idDefault, 1, slotId);
+      row.run.mount(idDefault, props.index, row.groupKey);
     }
+  } else if (props.filtered) {
+    virtual.drop(idDefault);
+  } else {
+    props.index = virtual.take(idDefault, 1, slotId);
   }
   useLayoutEffect(() => {
     return () => {
-      virtual.drop(idDefault);
+      if (row) {
+        row.run.unmount(idDefault);
+      } else {
+        virtual.drop(idDefault);
+      }
     };
   }, []);
   // Every row that is drawn registers itself, whether it was declared one by
@@ -68890,47 +68939,43 @@ const ListItemUI = props => {
   if (props.filtered) {
     return null;
   }
-  // html-hidden items: excluded from virtual scroll accounting but always in DOM
-  if (props.hidden) {
-    // Its separator stays too, and stays invisible with it: the point of
-    // keeping a row that matches nothing is that nothing moves, and a divider
-    // that leaves takes its own height away.
-    if (!separator || props.index === 0) {
-      return jsx(ListItemReal, {
-        ...props
-      });
-    }
-    return jsxs(Fragment, {
-      children: [cloneElement(resolveSeparatorVnode(separator, props.index - 1), {
-        style: VISIBILITY_HIDDEN_STYLE
-      }), jsx(ListItemReal, {
-        ...props
-      })]
-    });
-  }
-  if (row) {
-    return jsx(ListItemReal, {
-      ...props
-    });
-  }
-  const index = props.index;
   const listItemVnode = jsx(ListItemReal, {
     ...props
   });
-  // "Am I the first visible item?" is answered by the place the list handed
-  // out (virtual.take above), not by the tracker's visibleIndex: during a
-  // reorder render pass (items resorted by search score) the other items still
-  // carry stale keyToExplicitOrder values, the binary search reads them, no
-  // item comes out at 0 and a spurious separator appears at the top. Inside a
-  // group, each group has its own tracker and its items do not reorder, so
-  // groupVisibleIndex is reliable.
-  const isFirstInList = groupVisibleIndex === null ? index === 0 : groupVisibleIndex === 0;
-  if (!separator || isFirstInList) {
+  if (!separator) {
     return listItemVnode;
   }
-  // separatorIndex is only used as the function-form argument (gap index)
-  const separatorIndex = groupVisibleIndex === null ? index : groupVisibleIndex;
-  const separatorVnode = resolveSeparatorVnode(separator, separatorIndex - 1);
+  // The separator a row wears is the one at the gap above it, so the first row
+  // that mounts wears none. "Am I first?" is answered by whoever handed out
+  // the place — the run for its rows, the list's virtual for a declared one
+  // (virtual.take above) — not by the tracker's visibleIndex: during a reorder
+  // render pass (items resorted by search score) the other items still carry
+  // stale keyToExplicitOrder values, the binary search reads them, no item
+  // comes out at 0 and a spurious separator appears at the top. Inside a
+  // declared group, each group has its own tracker and its items do not
+  // reorder, so groupVisibleIndex is reliable there.
+  let isFirst;
+  if (row) {
+    isFirst = row.run.isFirst(props.index, row.groupKey);
+  } else if (groupVisibleIndex === null || props.hidden) {
+    isFirst = props.index === 0;
+  } else {
+    isFirst = groupVisibleIndex === 0;
+  }
+  if (isFirst) {
+    return listItemVnode;
+  }
+  // The gap index, only used as the function-form argument.
+  const gapIndex = row || groupVisibleIndex === null || props.hidden ? props.index - 1 : groupVisibleIndex - 1;
+  let separatorVnode = resolveSeparatorVnode(separator, gapIndex);
+  if (props.hidden) {
+    // A row kept in the DOM but hidden keeps its separator, hidden with it:
+    // the point of keeping a row that matches nothing is that nothing moves,
+    // and a divider that leaves takes its own height away.
+    separatorVnode = cloneElement(separatorVnode, {
+      style: VISIBILITY_HIDDEN_STYLE
+    });
+  }
   return jsxs(Fragment, {
     children: [separatorVnode, listItemVnode]
   });
@@ -69552,6 +69597,101 @@ const sameSlotIds = (left, right) => {
   return true;
 };
 
+// Which of a run's rows mount, and which of them comes first. A run draws
+// every row of its window, and only the row itself knows, once it renders,
+// that it renders nothing (filtered out by a search, see ListItemUI). The
+// separator a row wears is the one at the gap above it, so the first row that
+// mounts wears none — and "first" is read off the rows that mount, not off
+// the collection. Rows say so as they render, in order, and the answer is a
+// signal: a row rendered from a kept vnode is rendered again when the row
+// before it leaves or comes back. Grouped rows are counted per group, the gap
+// above a group's first row being the group wrapper's own.
+const createRunRows = () => {
+  // rowId → { index, groupKey }
+  const rowById = new Map();
+  // groupKey (undefined outside groups) → the index of the group's first
+  // mounted row, -1 when none.
+  const firstSignalByGroup = new Map();
+  // Where the window starts: a run cut by the window has rows above its first
+  // drawn one, and so does a run standing after declared rows.
+  const windowFromSignal = signal(0);
+  // Groups whose first row left: recounted on the next ask, or at the end of
+  // the frame, whichever comes first.
+  const staleGroupKeys = new Set();
+  const firstSignalOf = groupKey => {
+    let firstSignal = firstSignalByGroup.get(groupKey);
+    if (!firstSignal) {
+      firstSignal = signal(-1);
+      firstSignalByGroup.set(groupKey, firstSignal);
+    }
+    return firstSignal;
+  };
+  const refresh = groupKey => {
+    staleGroupKeys.delete(groupKey);
+    let first = -1;
+    for (const row of rowById.values()) {
+      if (row.groupKey === groupKey && (first === -1 || row.index < first)) {
+        first = row.index;
+      }
+    }
+    firstSignalOf(groupKey).value = first;
+  };
+  const leave = row => {
+    if (firstSignalOf(row.groupKey).peek() !== row.index) {
+      return;
+    }
+    staleGroupKeys.add(row.groupKey);
+    queueMicrotask(() => {
+      if (staleGroupKeys.has(row.groupKey)) {
+        refresh(row.groupKey);
+      }
+    });
+  };
+  return {
+    setWindowFrom: windowFrom => {
+      windowFromSignal.value = windowFrom;
+    },
+    mount: (rowId, index, groupKey) => {
+      const row = rowById.get(rowId);
+      if (row) {
+        if (row.index === index && row.groupKey === groupKey) {
+          return;
+        }
+        leave(row);
+        row.index = index;
+        row.groupKey = groupKey;
+      } else {
+        rowById.set(rowId, {
+          index,
+          groupKey
+        });
+      }
+      const firstSignal = firstSignalOf(groupKey);
+      const first = firstSignal.peek();
+      if (first === -1 || index < first) {
+        firstSignal.value = index;
+      }
+    },
+    unmount: rowId => {
+      const row = rowById.get(rowId);
+      if (!row) {
+        return;
+      }
+      rowById.delete(rowId);
+      leave(row);
+    },
+    isFirst: (index, groupKey) => {
+      if (staleGroupKeys.has(groupKey)) {
+        refresh(groupKey);
+      }
+      if (firstSignalOf(groupKey).value !== index) {
+        return false;
+      }
+      return groupKey !== undefined || windowFromSignal.value === 0;
+    }
+  };
+};
+
 // The walk that gives the list's children their places: a slot for each of
 // them, declared to the list's virtual all at once before any child renders,
 // and handed to the child through a provider of its own — which is what lets
@@ -69736,6 +69876,11 @@ const ListItems = ({
   const slotId = useContext(ListSlotContext);
   const renderWindow = useContext(RenderWindowContext);
   const separator = useContext(SeparatorContext);
+  const runRowsRef = useRef(null);
+  if (!runRowsRef.current) {
+    runRowsRef.current = createRunRows();
+  }
+  const runRows = runRowsRef.current;
   // The vnode drawn for a row, kept by item: a run rendering again (its window
   // moving, its first paint's budget giving way to the full one) hands preact
   // the same vnode for a row that has not changed, and preact leaves that
@@ -69744,10 +69889,9 @@ const ListItems = ({
   // row at the same index, in the same refreshing state: everything the
   // function is given.
   const rowVnodesRef = useRef(null);
-  if (!rowVnodesRef.current || rowVnodesRef.current.renderItem !== renderItem || rowVnodesRef.current.separator !== separator) {
+  if (!rowVnodesRef.current || rowVnodesRef.current.renderItem !== renderItem) {
     rowVnodesRef.current = {
       renderItem,
-      separator,
       byItem: new Map()
     };
   }
@@ -69796,6 +69940,7 @@ const ListItems = ({
   const windowFrom = renderWindow.start > runStart ? renderWindow.start : runStart;
   const windowTo = renderWindow.end < runEnd ? renderWindow.end : runEnd;
   store.forget(rankOf(windowFrom), rankOf(windowTo));
+  runRows.setWindowFrom(windowFrom);
 
   // The row answers to its own id when the item carries one — that is what
   // addresses it from outside (--navi-select, --navi-scroll, startAt) — and
@@ -69919,13 +70064,9 @@ const ListItems = ({
     }, `${ownerId}_group_${group.key}`));
     group = null;
   };
-  // Which group a row belongs to, or undefined when it belongs to none. Asked
-  // before the row is pushed as well as while pushing it: a row opening a
-  // group is the one row that must not wear a separator (see below).
+  // Which group a row belongs to, or undefined when it belongs to none.
   const groupKeyOf = (item, rowIndex) => groupBy && item !== undefined ? groupBy(item, rowIndex) : undefined;
-  const opensGroup = groupKey => groupKey !== undefined && (!group || group.key !== groupKey);
-  const pushRow = (rowNode, item, rowIndex) => {
-    const groupKey = groupKeyOf(item, rowIndex);
+  const pushRow = (rowNode, item, rowIndex, groupKey) => {
     if (groupKey === undefined) {
       closeGroup();
       rows.push(rowNode);
@@ -69980,78 +70121,72 @@ const ListItems = ({
     }
     const item = getItemAt(rowIndex);
     const key = item === undefined ? `${ownerId}_skeleton_${rowIndex}` : idOf(item, rowIndex);
+    const groupKey = groupKeyOf(item, rowIndex);
+    if (item === undefined) {
+      // A row on its way never reaches ListItemUI (see ListItemSkeletonResolver):
+      // it is stood among the rows that mount, and given its separator, here.
+      let rowVnode;
+      if (renderRowSkeleton === false) {
+        // The row must still take its room: without it the rows below would
+        // climb up and slide back down as the answer arrives.
+        rowVnode = jsx(ListItem, {
+          skeleton: true,
+          style: VISIBILITY_HIDDEN_STYLE
+        });
+      } else if (renderRowSkeleton) {
+        rowVnode = renderRowSkeleton(rowIndex);
+      } else {
+        rowVnode = jsx(ListItem, {
+          skeleton: true
+        });
+      }
+      if (rowVnode) {
+        pushRow(jsx(ListRunSkeletonRow, {
+          run: runRows,
+          row: {
+            id: key,
+            index: rowIndex,
+            ...getSkeletonRow()
+          },
+          groupKey: groupKey,
+          separator: separator,
+          children: rowVnode
+        }, key), item, rowIndex, groupKey);
+      }
+      rowIndex++;
+      continue;
+    }
     let rowVnode;
     let rowContextValue;
-    let rowKept = null;
-    if (item !== undefined) {
-      const rowVnodeKept = rowVnodesByItem.get(item);
-      if (rowVnodeKept && rowVnodeKept.rowIndex === rowIndex && rowVnodeKept.refreshing === renderItemState.refreshing) {
-        rowVnode = rowVnodeKept.vnode;
-        rowContextValue = rowVnodeKept.rowContextValue;
-        rowKept = rowVnodeKept;
-      } else {
-        rowVnode = renderItem(item, rowIndex, renderItemState);
-        // Kept with the vnode, for the same reason: a context value that is a
-        // fresh object on every render forces every consumer of it to render,
-        // which is the row's own chain — the vnode handed back unchanged would
-        // then buy nothing.
-        rowContextValue = {
-          id: key,
-          index: rowIndex,
-          item
-        };
-        rowKept = {
-          vnode: rowVnode,
-          rowContextValue,
-          rowIndex,
-          refreshing: renderItemState.refreshing,
-          separatorVnode: null
-        };
-        rowVnodesByItem.set(item, rowKept);
-      }
-    } else if (renderRowSkeleton === false) {
-      // The row must still take its room: without it the rows below would
-      // climb up and slide back down as the answer arrives.
-      rowVnode = jsx(ListItem, {
-        skeleton: true,
-        style: VISIBILITY_HIDDEN_STYLE
-      });
-    } else if (renderRowSkeleton) {
-      rowVnode = renderRowSkeleton(rowIndex);
+    const rowVnodeKept = rowVnodesByItem.get(item);
+    if (rowVnodeKept && rowVnodeKept.rowIndex === rowIndex && rowVnodeKept.refreshing === renderItemState.refreshing && rowVnodeKept.rowContextValue.groupKey === groupKey) {
+      rowVnode = rowVnodeKept.vnode;
+      rowContextValue = rowVnodeKept.rowContextValue;
     } else {
-      rowVnode = jsx(ListItem, {
-        skeleton: true
+      rowVnode = renderItem(item, rowIndex, renderItemState);
+      // Kept with the vnode, for the same reason: a context value that is a
+      // fresh object on every render forces every consumer of it to render,
+      // which is the row's own chain — the vnode handed back unchanged would
+      // then buy nothing.
+      rowContextValue = {
+        id: key,
+        index: rowIndex,
+        item,
+        run: runRows,
+        groupKey
+      };
+      rowVnodesByItem.set(item, {
+        vnode: rowVnode,
+        rowContextValue,
+        rowIndex,
+        refreshing: renderItemState.refreshing
       });
     }
     if (rowVnode) {
-      // The first row of a group wears no separator: the gap it sits at is the
-      // one between two groups, and that gap is the group wrapper's own — it
-      // is a row of the list like any other and draws its separator itself
-      // (see ListItemUI). Drawn here it would land inside the group instead,
-      // as a hairline under the label.
-      const drawSeparator = separator && rowIndex > 0 && !opensGroup(groupKeyOf(item, rowIndex));
-      if (drawSeparator) {
-        // Kept with the row too: a separator built again is a separator
-        // rendered again.
-        let separatorVnode = rowKept ? rowKept.separatorVnode : null;
-        if (!separatorVnode) {
-          separatorVnode = cloneElement(resolveSeparatorVnode(separator, rowIndex - 1), {
-            key: `${key}_separator`
-          });
-          if (rowKept) {
-            rowKept.separatorVnode = separatorVnode;
-          }
-        }
-        pushRow(separatorVnode, item, rowIndex);
-      }
       pushRow(jsx(ListRowContext.Provider, {
-        value: item === undefined ? {
-          id: key,
-          index: rowIndex,
-          ...getSkeletonRow()
-        } : rowContextValue,
+        value: rowContextValue,
         children: rowVnode
-      }, key), item, rowIndex);
+      }, key), item, rowIndex, groupKey);
     }
     rowIndex++;
   }
@@ -70065,6 +70200,35 @@ const ListItems = ({
   return rows;
 };
 
+// A run's row that has not arrived, standing where the real one will: it
+// mounts like any row (see createRunRows) and wears the separator of the gap
+// above it, the way a real row does in ListItemUI.
+const ListRunSkeletonRow = ({
+  run,
+  row,
+  groupKey,
+  separator,
+  children
+}) => {
+  const rowId = useId();
+  run.mount(rowId, row.index, groupKey);
+  useLayoutEffect(() => {
+    return () => {
+      run.unmount(rowId);
+    };
+  }, []);
+  const rowVnode = jsx(ListRowContext.Provider, {
+    value: row,
+    children: children
+  });
+  if (!separator || run.isFirst(row.index, groupKey)) {
+    return rowVnode;
+  }
+  return jsxs(Fragment, {
+    children: [resolveSeparatorVnode(separator, row.index - 1), rowVnode]
+  });
+};
+
 // What is drawn where rows were asked for and never came: the sentence and the
 // way out, in the row itself — the rest of the list is fine, so replacing all
 // of it (List's own `error`) would be a lie.
@@ -78720,7 +78884,7 @@ const TimeRangeWheel = ({
   // the moment this must run is precisely the moment the pair is INVALID —
   // an action-gated push would be refused by the very thing it fixes.
   const keepBoundsApart = (movedSide, movedTime, e) => {
-    const movedMinutes = minutesFromTime(movedTime);
+    const movedMinutes = minutesFromTime$1(movedTime);
     if (movedMinutes === null) {
       return;
     }
@@ -78728,7 +78892,7 @@ const TimeRangeWheel = ({
     if (!otherEl) {
       return;
     }
-    const otherMinutes = minutesFromTime(getUIStateFromElement(otherEl));
+    const otherMinutes = minutesFromTime$1(getUIStateFromElement(otherEl));
     if (otherMinutes === null) {
       return;
     }