@jsenv/navi 0.29.109 → 0.29.111

package/dist/jsenv_navi.js

@@ -4,14 +4,14 @@
  */
 import { installImportMetaCssBuild, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, coarsePointerSignal, smallTouchScreenSignal } from "./jsenv_navi_side_effects.js";
 export { disableVirtualKeyboardOverlay } from "./jsenv_navi_side_effects.js";
-import { elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, createPubSub, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, closestOpenableAncestor, isAncestorOpen, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, initFocusGroup, scrollIntoViewScoped, stringifyStyle as stringifyStyle$1, resolveOklchLightness, contrastColor, isTouchDrivenEvent, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, getScrollContainer, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
+import { elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, createPubSub, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, initFocusGroup, scrollIntoViewScoped, stringifyStyle as stringifyStyle$1, resolveOklchLightness, contrastColor, isTouchDrivenEvent, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, getScrollContainer, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
 export { clickIsSuppressed, contrastColor, findEvent, startDragTo } from "@jsenv/dom";
-import { signal, computed, effect, batch, untracked, useSignal } from "@preact/signals";
+import { signal, computed, effect, batch, useComputed, untracked, useSignal } from "@preact/signals";
 import { isValidElement, createContext, render, h, Fragment, toChildArray, options, cloneElement } from "preact";
 import { useErrorBoundary, useLayoutEffect, useContext, useCallback, useRef, useState, useEffect, useMemo, useId } from "preact/hooks";
 import { jsxs, jsx, Fragment as Fragment$1 } from "preact/jsx-runtime";
 import { prefixFirstAndIndentRemainingLines } from "@jsenv/humanize";
-import { parseDuration, durationContainsNaN, compareTwoDurations, durationToSeconds, createValidity, durationToISOString } from "@jsenv/validity";
+import { parseDuration, durationContainsNaN, compareTwoDurations, durationToSeconds, DISPLAYABLE_RULE, MAX_LINE_BREAKS_RULE, NO_EMOJI_RULE, SINGLE_SPACE_RULE, createValidity, resolveCharClass, getCharClassMessageKey, compileCharClassAnchored, compileCharClass, CHAR_CLASS_PRESETS, durationToISOString } from "@jsenv/validity";
 export { compareTwoDurations, durationContainsNaN, durationToHours, durationToISOString, durationToMinutes, durationToNumber, durationToSeconds, durationToString, parseDuration } from "@jsenv/validity";
 import { Suspense, createPortal, forwardRef } from "preact/compat";
 
@@ -3676,8 +3676,55 @@ const findProxyControllers = (realInputId) => {
   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",
@@ -3689,6 +3736,9 @@ const CONSTRAINT_NAME_TO_PROP = {
   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",
@@ -3755,10 +3805,13 @@ const getConstraintMessage = (
   };
 };
 
-// prop that we'll set on the control
+// 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([
-  ...CONSTRAINT_ATTRIBUTE_SET,
-
   "ref",
   "children",
   "id",
@@ -3800,7 +3853,6 @@ const CONTROL_ATTRIBUTE_SET = new Set([
 ]);
 // prop concerning control but that won't end up in the DOM if not inside CONTROL_ATTRIBUTE_SET
 const CONTROL_PROP_SET = new Set([
-  ...CONTROL_ATTRIBUTE_SET,
   ...CONSTRAINT_MESSAGE_PROP_NAME_SET,
 
   "action",
@@ -3820,6 +3872,11 @@ const CONTROL_PROP_SET = new Set([
 
   "loading",
   "basePseudoState",
+  // App constraints this control must satisfy, on top of the ones navi ships:
+  // `constraints={[MY_CONSTRAINT]}`. A constraint is an object, so it carries
+  // its own parameters — nothing has to travel through an attribute. Read on
+  // every check in control_validation.js; `registerGlobalConstraint` is the
+  // same thing for every control at once.
   "constraints",
 
   // A real target inside a zone that belongs to another control — see
@@ -3857,6 +3914,21 @@ const CONTROL_PROP_SET = new Set([
   "maxLengthGuard",
 ]);
 
+/**
+ * The attribute a prop must be written as on the control host, `null` when the
+ * prop is not one. A constraint attribute may be passed either way — as the
+ * attribute itself (`data-no-emoji`) or as the prop it stands for (`noEmoji`).
+ */
+const controlAttributeFromProp = (key) => {
+  if (CONTROL_ATTRIBUTE_SET.has(key) || CONSTRAINT_ATTRIBUTE_SET.has(key)) {
+    return key;
+  }
+  return constraintAttributeFromProp(key);
+};
+
+const isControlProp = (key) =>
+  CONTROL_PROP_SET.has(key) || controlAttributeFromProp(key) !== null;
+
 const MessagePropsRefContext = createContext();
 
 const ControlIdContext = createContext();
@@ -7233,18 +7305,48 @@ naviI18n.addAll({
     fr: "L'heure doit être <strong>[max]</strong> ou moins.",
     en: "The time must be <strong>[max]</strong> or earlier.",
   },
-  "constraint.single_space.start.default": {
+  "constraint.single_space.start": {
     fr: "Ce champ ne doit pas commencer par un espace.",
     en: "This field must not start with a space.",
   },
-  "constraint.single_space.end.default": {
+  "constraint.single_space.end": {
     fr: "Ce champ ne doit pas finir par un espace.",
     en: "This field must not end with a space.",
   },
-  "constraint.single_space.consecutive.default": {
+  "constraint.single_space.consecutive": {
     fr: "Ce champ ne doit pas contenir plusieurs espaces consécutifs.",
     en: "This field must not contain consecutive spaces.",
   },
+  // [sample] is the offending character with its marks — a stack is invisible
+  // as a description and obvious as a sample.
+  "constraint.displayable.stacked_marks.singular": {
+    fr: "Ce champ contient un caractère qui empile plus de <strong>[max]</strong> signes : « [sample] ».",
+    en: "This field contains a character stacking more than <strong>[max]</strong> marks: “[sample]”.",
+  },
+  "constraint.displayable.stacked_marks.plural": {
+    fr: "Ce champ contient [count] caractères qui empilent plus de <strong>[max]</strong> signes (tel que « [sample] »).",
+    en: "This field contains [count] characters stacking more than <strong>[max]</strong> marks (such as “[sample]”).",
+  },
+  "constraint.displayable.invisible": {
+    fr: "Ce champ doit contenir au moins un caractère visible.",
+    en: "This field must contain at least one visible character.",
+  },
+  "constraint.displayable.blank_lines": {
+    fr: "Ce champ ne doit pas contenir plusieurs lignes vides consécutives.",
+    en: "This field must not contain consecutive blank lines.",
+  },
+  "constraint.displayable.dangling_joiner": {
+    fr: "Ce champ contient un caractère de liaison invisible qui ne relie rien.",
+    en: "This field contains an invisible joiner that joins nothing.",
+  },
+  "constraint.no_emoji.default": {
+    fr: "Ce champ ne doit pas contenir d'emoji.",
+    en: "This field must not contain emoji.",
+  },
+  "constraint.max_line_breaks.default": {
+    fr: "Ce champ ne doit pas contenir plus de [max] retour[s] à la ligne.",
+    en: "This field must not contain more than [max] line break[s].",
+  },
   "constraint.min_lower_letter.password.singular": {
     fr: "Ce mot de passe doit contenir au moins une lettre minuscule.",
     en: "This password must contain at least one lowercase letter.",
@@ -7311,35 +7413,42 @@ naviI18n.addAll({
   },
 });
 
-// charGuard / maxLengthGuard callout messages
+// Character class and maxLengthGuard messages. The char class keys are
+// @jsenv/validity's own ("char_class.slug"), prefixed with "constraint." —
+// the same sentence refuses a keystroke in a callout and a whole value in a
+// constraint, so there is one key for both.
 naviI18n.addAll({
   // Preset-specific char messages — more informative than the generic fallback
-  "constraint.guard.number": {
+  "constraint.char_class.numeric": {
     fr: "Ce champ ne peut contenir que des chiffres.",
     en: "This field can only contain digits.",
   },
-  "constraint.guard.alpha": {
+  "constraint.char_class.alpha": {
     fr: "Ce champ ne peut contenir que des lettres.",
     en: "This field can only contain letters.",
   },
-  "constraint.guard.alphanumeric": {
+  "constraint.char_class.alphanumeric": {
     fr: "Ce champ ne peut contenir que des lettres et des chiffres.",
     en: "This field can only contain letters and digits.",
   },
-  "constraint.guard.uppercase": {
+  "constraint.char_class.uppercase": {
     fr: "Ce champ ne peut contenir que des lettres majuscules.",
     en: "This field can only contain uppercase letters.",
   },
-  "constraint.guard.hex": {
+  "constraint.char_class.hex": {
     fr: "Ce champ ne peut contenir que des chiffres hexadécimaux (0-9, A-F).",
     en: "This field can only contain hexadecimal digits (0-9, A-F).",
   },
-  "constraint.guard.slug": {
+  "constraint.char_class.slug": {
     fr: "Ce champ ne peut contenir que des lettres minuscules, des chiffres et des tirets.",
     en: "This field can only contain lowercase letters, digits, and hyphens.",
   },
   // Generic fallback for custom char classes and other presets (tel, card, postal, iban…)
-  "constraint.guard.chars": {
+  "constraint.char_class.no_emoji": {
+    fr: "Ce champ ne peut pas contenir d'emoji.",
+    en: "This field cannot contain emoji.",
+  },
+  "constraint.char_class.default": {
     fr: "Ce champ ne peut contenir que les caractères autorisés.",
     en: "This field can only contain allowed characters.",
   },
@@ -8487,7 +8596,11 @@ const PATTERN_CONSTRAINT = {
     if (!valueAsString) {
       return null;
     }
-    const regex = new RegExp(`^(?:${pattern})$`);
+    // The `u` flag is how the platform compiles this same attribute, and what
+    // lets a pattern speak about characters: `\p{...}` is only recognized under
+    // it, and a range covers whole code points rather than the two halves an
+    // astral character is made of.
+    const regex = new RegExp(`^(?:${pattern})$`, "u");
     if (regex.test(valueAsString)) {
       return null;
     }
@@ -10969,6 +11082,177 @@ const isFunctionButNotAnActionFunction = (action) => {
   return typeof action === "function" && !action.isAction;
 };
 
+/**
+ * Where navi meets @jsenv/validity.
+ *
+ * validity names a refusal with a key and its parameters rather than a
+ * sentence, so that a field and a server can refuse in the same words in the
+ * language of the person reading. navi is one of those two callers: it says the
+ * sentence, in the browser, through `naviI18n`. The keys line up on purpose —
+ * validity's `"single_space.start"` is navi's `"constraint.single_space.start"`
+ * — so overriding a message is looking up one key, not going through a
+ * translation table.
+ *
+ * The other direction is `constraintFromValidityRule`: a rule an app wrote for
+ * its server, worn by a control as a constraint.
+ */
+
+
+/**
+ * Turns a @jsenv/validity rule into a constraint a control can wear, so an app
+ * rule written once — in the package its server reads too — is checked on both
+ * sides instead of being written twice.
+ *
+ * @param {object} rule
+ *   `{ name, applyOn(ruleValue, value, ruleConfig) }`, the same object passed
+ *   to `createValidity({ rules })`.
+ * @param {object} [ruleConfig]
+ *   What parameterizes the rule, under its own name — `{ maxWords: 40 }` for a
+ *   rule named `maxWords`. Pass `formatMessage` here to say the refusal through
+ *   the app's own i18n; without it the key is looked up in `naviI18n` under
+ *   `constraint.<key>`, and a rule answering with a finished sentence is shown
+ *   as-is.
+ *
+ * Call it once, at module level: a constraint rebuilt on every render is a new
+ * object on every check.
+ */
+const constraintFromValidityRule = (rule, ruleConfig = {}) => {
+  const { formatMessage, ...ruleParams } = ruleConfig;
+  return {
+    name: rule.name,
+    check: (field) => {
+      const result = rule.applyOn(
+        ruleParams[rule.name],
+        field.uiState,
+        ruleParams,
+      );
+      if (!result) {
+        return null;
+      }
+      if (typeof result === "string") {
+        return result;
+      }
+      if (formatMessage) {
+        return formatMessage(result.key, result.params);
+      }
+      return naviI18nFromValidityMessage(result);
+    },
+  };
+};
+
+const naviI18nFromValidityMessage = ({ key, params }) => {
+  if (params && typeof params.max === "number") {
+    // Lets a template pluralize on the bound it names: "[max] retour[s]".
+    return naviI18n(`constraint.${key}`, {
+      ...params,
+      s: params.max > 1 ? "s" : "",
+    });
+  }
+  return naviI18n(`constraint.${key}`, params);
+};
+
+/**
+ * `data-displayable` — the value must be something the layout can actually
+ * draw. What it refuses and why lives in @jsenv/validity's DISPLAYABLE_RULE:
+ * these are display rules, not app rules, so a server re-checking the value
+ * asks the exact same question and gets the exact same refusal.
+ *
+ * `data-max-stacked-marks` raises how many marks may stack on one base
+ * character, for a language that needs more than the default.
+ */
+
+
+const DISPLAYABLE_CONSTRAINT = {
+  name: "displayable",
+  messageAttribute: "data-displayable-message",
+  check: (field) => {
+    const displayable = field.controlHostProps["data-displayable"];
+    if (!isConstraintAttributeOn(displayable)) {
+      return null;
+    }
+    const valueAsString =
+      field.uiState === undefined ? "" : String(field.uiState);
+    const maxStackedMarksAttribute =
+      field.controlHostProps["data-max-stacked-marks"];
+    const result = DISPLAYABLE_RULE.applyOn(true, valueAsString, {
+      maxStackedMarks:
+        maxStackedMarksAttribute === undefined
+          ? undefined
+          : parseInt(maxStackedMarksAttribute, 10),
+    });
+    if (!result) {
+      return null;
+    }
+    return naviI18nFromValidityMessage(result);
+  },
+};
+CONSTRAINT_ATTRIBUTE_SET.add("data-displayable");
+CONSTRAINT_ATTRIBUTE_SET.add("data-max-stacked-marks");
+
+/**
+ * `data-max-line-breaks` — how many line breaks the value may hold. Counted in
+ * breaks rather than in lines because how many lines a value renders as depends
+ * on wrapping, which is the layout's answer, not the value's.
+ *
+ * The rule is @jsenv/validity's MAX_LINE_BREAKS_RULE — a textarea in the
+ * browser and a server receiving the value both ask it.
+ */
+
+
+const MAX_LINE_BREAKS_CONSTRAINT = {
+  name: "max_line_breaks",
+  messageAttribute: "data-max-line-breaks-message",
+  check: (field) => {
+    const maxLineBreaksAttribute =
+      field.controlHostProps["data-max-line-breaks"];
+    if (!isConstraintAttributeOn(maxLineBreaksAttribute)) {
+      return null;
+    }
+    const maxLineBreaks = parseInt(maxLineBreaksAttribute, 10);
+    if (isNaN(maxLineBreaks)) {
+      return null;
+    }
+    const valueAsString =
+      field.uiState === undefined ? "" : String(field.uiState);
+    const result = MAX_LINE_BREAKS_RULE.applyOn(maxLineBreaks, valueAsString);
+    if (!result) {
+      return null;
+    }
+    return naviI18nFromValidityMessage(result);
+  },
+};
+CONSTRAINT_ATTRIBUTE_SET.add("data-max-line-breaks");
+
+/**
+ * `data-no-emoji` — an app is free with emoji or it is not, and that is not the
+ * layout's call: a row survives an emoji, a legal name, an identifier or a
+ * title may still not want one. So it is its own switch rather than a part of
+ * `data-displayable`.
+ *
+ * The rule is @jsenv/validity's NO_EMOJI_RULE. To refuse the keystroke instead
+ * of the value, `charGuard="noEmoji"` is the same knowledge on the other side.
+ */
+
+
+const NO_EMOJI_CONSTRAINT = {
+  name: "no_emoji",
+  messageAttribute: "data-no-emoji-message",
+  check: (field) => {
+    const noEmoji = field.controlHostProps["data-no-emoji"];
+    if (!isConstraintAttributeOn(noEmoji)) {
+      return null;
+    }
+    const valueAsString =
+      field.uiState === undefined ? "" : String(field.uiState);
+    const result = NO_EMOJI_RULE.applyOn(true, valueAsString);
+    if (!result) {
+      return null;
+    }
+    return naviI18nFromValidityMessage(result);
+  },
+};
+CONSTRAINT_ATTRIBUTE_SET.add("data-no-emoji");
+
 const MIN_LOWER_LETTER_CONSTRAINT = {
   name: "min_lower_letter",
   messageAttribute: "data-min-lower-letter-message",
@@ -11238,30 +11522,28 @@ const SAME_AS_CONSTRAINT = {
 };
 CONSTRAINT_ATTRIBUTE_SET.add("data-same-as");
 
+/**
+ * `data-single-space` — no leading or trailing space, never two in a row.
+ * The rule itself is @jsenv/validity's SINGLE_SPACE_RULE, so a server checking
+ * the value again refuses it for the same reason and in the same words.
+ */
+
+
 const SINGLE_SPACE_CONSTRAINT = {
   name: "single_space",
   messageAttribute: "data-single-space-message",
   check: (field) => {
     const singleSpace = field.controlHostProps["data-single-space"];
-    if (singleSpace === undefined) {
+    if (!isConstraintAttributeOn(singleSpace)) {
       return null;
     }
-
     const valueAsString =
       field.uiState === undefined ? "" : String(field.uiState);
-    const hasLeadingSpace = valueAsString.startsWith(" ");
-    const hasTrailingSpace = valueAsString.endsWith(" ");
-    const hasDoubleSpace = valueAsString.includes("  ");
-    if (!hasLeadingSpace && !hasTrailingSpace && !hasDoubleSpace) {
+    const result = SINGLE_SPACE_RULE.applyOn(true, valueAsString);
+    if (!result) {
       return null;
     }
-    if (hasLeadingSpace) {
-      return naviI18n("constraint.single_space.start.default");
-    }
-    if (hasTrailingSpace) {
-      return naviI18n("constraint.single_space.end.default");
-    }
-    return naviI18n("constraint.single_space.consecutive.default");
+    return naviI18nFromValidityMessage(result);
   },
 };
 CONSTRAINT_ATTRIBUTE_SET.add("data-single-space");
@@ -11386,6 +11668,9 @@ const STANDARD_CONSTRAINT_SET = new Set([
 const NAVI_CONSTRAINT_SET = new Set([
   MIN_SPECIAL_CHAR_CONSTRAINT,
   SINGLE_SPACE_CONSTRAINT,
+  DISPLAYABLE_CONSTRAINT,
+  MAX_LINE_BREAKS_CONSTRAINT,
+  NO_EMOJI_CONSTRAINT,
   MIN_DIGIT_CONSTRAINT,
   MIN_UPPER_LETTER_CONSTRAINT,
   MIN_LOWER_LETTER_CONSTRAINT,
@@ -11398,8 +11683,29 @@ const DEFAULT_CONSTRAINT_SET = new Set([
   ...NAVI_CONSTRAINT_SET,
 ]);
 const registerGlobalConstraint = (customConstraint) => {
-  NAVI_CONSTRAINT_SET.add(customConstraint);
-  DEFAULT_CONSTRAINT_SET.add(customConstraint);
+  const constraint = normalizeConstraint(customConstraint);
+  NAVI_CONSTRAINT_SET.add(constraint);
+  DEFAULT_CONSTRAINT_SET.add(constraint);
+};
+
+// A constraint may be written as a bare check function; the rest of the code
+// wants the object shape. The wrapper is cached so a function passed on every
+// render keeps one identity across checks.
+const constraintFromFunctionMap = new WeakMap();
+const normalizeConstraint = (constraint) => {
+  if (typeof constraint !== "function") {
+    return constraint;
+  }
+  const existing = constraintFromFunctionMap.get(constraint);
+  if (existing) {
+    return existing;
+  }
+  const constraintObject = {
+    name: constraint.name || "custom_function",
+    check: constraint,
+  };
+  constraintFromFunctionMap.set(constraint, constraintObject);
+  return constraintObject;
 };
 
 const createControlValidation = (
@@ -11415,15 +11721,10 @@ const createControlValidation = (
   const dynamicConstraintSet = new Set();
   {
     controlValidity.registerConstraint = (constraint) => {
-      if (typeof constraint === "function") {
-        constraint = {
-          name: constraint.name || "custom_function",
-          check: constraint,
-        };
-      }
-      dynamicConstraintSet.add(constraint);
+      const constraintObject = normalizeConstraint(constraint);
+      dynamicConstraintSet.add(constraintObject);
       return () => {
-        dynamicConstraintSet.delete(constraint);
+        dynamicConstraintSet.delete(constraintObject);
       };
     };
   }
@@ -11480,6 +11781,16 @@ const createControlValidation = (
       ...DEFAULT_CONSTRAINT_SET,
       ...dynamicConstraintSet,
     ]);
+    // An app constraint declared at the call site: `constraints={[MY_CONSTRAINT]}`.
+    // Read from the raw props on every check so a constraint whose parameters
+    // are closed over is re-created freely, and last so the constraints navi
+    // ships are the ones reported first (see pickConstraintFailureInfo).
+    const constraintsFromProps = controller.props.constraints;
+    if (constraintsFromProps) {
+      for (const constraintFromProps of constraintsFromProps) {
+        constraintSet.add(normalizeConstraint(constraintFromProps));
+      }
+    }
     const elementSig = getElementSignature(controller.ref.current);
     // Not logged: every control checks its constraints on every interaction and
     // almost always passes, so this line alone was most of the debug output —
@@ -11531,6 +11842,13 @@ const createControlValidation = (
       }
     }
 
+    // Several constraints can fail at once and only one sentence is shown —
+    // naming it here lets whoever draws its own summary of the failures say the
+    // same thing as the callout instead of picking a second one.
+    newConstraintValidityState.reported = failedConstraintInfo
+      ? failedConstraintInfo.name
+      : null;
+
     const activeFailedConstraintInfo = failedConstraintInfo;
     if (activeFailedConstraintInfo) {
       const titleLess = controller.controlHostProps.title === undefined;
@@ -12807,12 +13125,18 @@ const useArraySignalMembership = (...args) => {
       "useArraySignalMembership requires at least 2 arguments: [arraySignal, id]",
     );
   }
+  const [arraySignal, id] = args;
 
-  return useMemo(() => {
-    const [useIsMember, add, remove] = arraySignalMembership(...args);
-    const isMember = useIsMember();
-    return [isMember, add, remove];
-  }, args);
+  // Through a computed so the component re-renders when its own membership
+  // changes, not every time anything else is added to or removed from the
+  // array: a list of 200 rows each watching the same array would otherwise all
+  // re-render (and each re-scan the array) when one row is toggled.
+  const isMember = useComputed(() => arraySignal.value.includes(id)).value;
+  const [, add, remove] = useMemo(
+    () => arraySignalMembership(arraySignal, id),
+    [arraySignal, id],
+  );
+  return [isMember, add, remove];
 };
 
 const arraySignalMembership = (...args) => {
@@ -14169,7 +14493,7 @@ const createRangeReader = (
   // dropped here is one that gets asked for again after a remount.
   readRange.trimComposition = (keepFrom, keepTo, budget) => {
     const composition = findComposition(currentParams());
-    if (!composition || !budget || composition.idByIndex.size <= budget) {
+    if (!composition || composition.idByIndex.size <= budget) {
       return;
     }
     for (const index of composition.idByIndex.keys()) {
@@ -19726,6 +20050,21 @@ import.meta.css = [/* css */`
     }
   }
 
+  /* A corner claim travels down (see group.jsx) because the member joined to
+     its neighbours is not always the thing that draws the frame: it can be a
+     bare wrapper, a tooltip, a link, and the control inside is what has to
+     square. That only holds while the wrapper adds nothing of its own. A box
+     that paints a background or a border, or that insets what it holds, IS the
+     frame at that spot — what is inside it sits on padding or on that
+     background, never on the corner the group squared — so the claim stops
+     here, exactly as a control stops it once it has answered. */
+  [navi-box-frame] > * {
+    --x-corner-top-left-radius: initial;
+    --x-corner-top-right-radius: initial;
+    --x-corner-bottom-right-radius: initial;
+    --x-corner-bottom-left-radius: initial;
+  }
+
   @layer navi {
     /*
     When using square/circle/aspectRatio prop we expect box to respect the aspect ratio.
@@ -20012,10 +20351,27 @@ const computeBox = (props, parentBoxFlow) => {
     rest["data-body"] = "";
     // Padding is what decides whether the content reaches the body's own
     // corners — see the corner claims in this file's CSS.
-    if (!PADDING_PROP_NAMES.some(name => isNonZeroSpacing(rest[name]))) {
+    let flush = true;
+    for (const name of PADDING_PROP_SET) {
+      if (declaresSomething(rest[name])) {
+        flush = false;
+        break;
+      }
+    }
+    if (flush) {
       rest["data-body-flush"] = "";
     }
   }
+  // A box that paints something of its own, or that insets what it holds, is
+  // the frame at that spot: the corner claims coming from a Group are about
+  // ITS corners and nothing inside reaches them, so they stop here — see this
+  // file's CSS.
+  for (const name of FRAME_PROP_SET) {
+    if (declaresSomething(rest[name])) {
+      rest["navi-box-frame"] = "";
+      break;
+    }
+  }
   const defaultDisplay = getDefaultDisplay(TagName);
   let {
     inline,
@@ -20446,8 +20802,14 @@ const shouldInjectSeparatorBetween = (left, right) => {
   }
   return true;
 };
-const PADDING_PROP_NAMES = ["padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft"];
-const isNonZeroSpacing = value => {
+const PADDING_PROP_SET = new Set(["padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft"]);
+/* What makes a box the frame at its spot: what it paints of its own, and the
+   padding holding its content away from its corners. Deliberately without the
+   radius props: a radius alone paints nothing — it only says how a background
+   or a border already there is cut — so a box carrying just a radius is still
+   a wrapper around whatever draws. */
+const FRAME_PROP_SET = new Set(["background", "backgroundColor", "backgroundImage", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "borderWidth", "borderColor", "borderStyle", ...PADDING_PROP_SET]);
+const declaresSomething = value => {
   if (value === undefined || value === null || value === false) {
     return false;
   }
@@ -30042,6 +30404,13 @@ registerNaviCommand("--navi-unselect", (source, event) => {
  *     observeAncestorOpenState for exactly how that's detected, and why it
  *     matters that it happens before the browser paints.
  *   - Inside an open ancestor → runs on mount AND every subsequent open.
+ *   - Inside the always-on-screen part of a *closed* one — a picker's façade,
+ *     an expandable's header, a <summary>: those elements are displayed the
+ *     whole time their ancestor reads as closed (aria-expanded on a trigger
+ *     describes the popup it controls, not its own contents). They run on
+ *     mount like anything else on screen, and the ancestor opening later
+ *     reveals nothing about them, so it does not re-run them either. See
+ *     isDisplayedDespiteClosedAncestor in @jsenv/dom.
  *
  * The callback's second argument is always a `navi_displayed` CustomEvent,
  * with `detail: { ancestor, ancestorType, becauseAncestorOpened }`:
@@ -30074,6 +30443,10 @@ const useDisplayedLayoutEffect = (ref, callback, deps) => {
   const callbackRef = useRef(callback);
   callbackRef.current = callback;
 
+  // Set by the mount effect below for an element that lives in its openable
+  // ancestor's façade rather than in what that ancestor opens.
+  const displayedWhileAncestorClosedRef = useRef(false);
+
   // Run on mount (or when deps change) — but only if the element is visible.
   useLayoutEffect(() => {
     const el = ref.current;
@@ -30086,9 +30459,16 @@ const useDisplayedLayoutEffect = (ref, callback, deps) => {
       return;
     }
     if (!isAncestorOpen(ancestor)) {
-      // Ancestor is closed — skip now; the observeAncestorOpenState call
-      // below will fire once it opens.
-      return;
+      if (!isDisplayedDespiteClosedAncestor(el)) {
+        // Ancestor is closed and took this element off screen with it — skip
+        // now; the observeAncestorOpenState call below will fire once it
+        // opens.
+        return;
+      }
+      // Closed, yet on screen: the ancestor is the trigger of what is
+      // closed, not the thing itself, and this element belongs to the façade
+      // it keeps showing.
+      displayedWhileAncestorClosedRef.current = true;
     }
     callbackRef.current(el, createDisplayedEvent(ancestor, false));
   }, deps);
@@ -30107,6 +30487,12 @@ const useDisplayedLayoutEffect = (ref, callback, deps) => {
       if (!isOpen) {
         return;
       }
+      if (displayedWhileAncestorClosedRef.current) {
+        // Façade content: on screen the whole time, so this opening reveals
+        // nothing here — and `becauseAncestorOpened: true` about it would be
+        // false in a way consumers act on (see use_auto_focus.js).
+        return;
+      }
       const lastEl = ref.current;
       callbackRef.current(lastEl, createDisplayedEvent(ancestor, true));
     });
@@ -30896,59 +31282,20 @@ const subscribeToControlState = (controlId, callback) => {
 
 const FormContext = createContext();
 
-/**
- * Named presets for the `charGuard` prop.
- * Each value is a regex character class (including the [ ] delimiters).
- */
-const CHAR_CLASS_PRESETS = {
-  numeric: "[0-9]", // digits only
-  alpha: "[A-Za-z]", // letters only
-  alphanumeric: "[0-9A-Za-z]", // letters and digits
-  decimal: "[-0-9.,]", // digits, minus, dot, comma
-  uppercase: "[A-Z]", // uppercase letters only
-  tel: "[-0-9+() ]", // phone: digits, +, -, parens, space
-  email: "[a-zA-Z0-9._%+@-]", // email characters
-  card: "[0-9 ]", // credit card: digits and spaces
-  hex: "[0-9A-Fa-f]", // hexadecimal digits
-  pin: "[0-9]", // numeric PIN
-  postal: "[0-9A-Za-z -]", // postal code (FR, UK, US)
-  iban: "[0-9A-Z]", // IBAN: uppercase and digits
-  slug: "[a-z0-9-]", // URL slug
-};
-
-// Specific i18n keys per preset — more informative than the generic fallback
-const MESSAGE_KEY_FROM_PRESET = {
-  numeric: "constraint.guard.number",
-  pin: "constraint.guard.number",
-  alpha: "constraint.guard.alpha",
-  alphanumeric: "constraint.guard.alphanumeric",
-  uppercase: "constraint.guard.uppercase",
-  hex: "constraint.guard.hex",
-  slug: "constraint.guard.slug",
-  // tel, card, postal, iban, custom → generic fallback
-};
-
-/**
- * Returns the regex character class for a preset name, or the raw value as-is
- * if it's not a known preset (allows custom classes like "[A-Z0-9_]").
- */
-const resolveCharClass = (value) => {
-  if (!value) return null;
-  return CHAR_CLASS_PRESETS[value] ?? value;
-};
-
-/**
- * Returns the i18n key for the char guard rejection message.
- * Falls back to the generic "constraint.guard.chars" for custom classes and
- * presets without a specific message.
- */
-const getCharGuardMessageKey = (value) => {
-  return MESSAGE_KEY_FROM_PRESET[value] ?? "constraint.guard.chars";
-};
-
 /**
  * Input guard — enforces character and length constraints during typing, paste,
- * and external value sets.
+ * and external value sets. What a character class holds and which sentence
+ * refuses it comes from @jsenv/validity; the guard is what only a field can do,
+ * blocking the keystroke before the value exists.
+ *
+ * The guard answers for the GESTURE, never for what the control already holds.
+ * A value can arrive already outside the class or already too long — a
+ * `defaultValue`, a signal, a value written from elsewhere — and refusing the
+ * next keystroke over it would blame the person for a character they did not
+ * type. So a change is refused only when it makes the value worse: one more
+ * character outside the class, or one more character over the limit. What is
+ * already there is the `charClass`/`maxLength` constraint's business, and it
+ * says so at submit.
  *
  * The guard owns a single callout token (shared across all rejection reasons) so
  * successive rejections update the same callout rather than stacking.
@@ -30969,9 +31316,13 @@ 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.
 const getInvalidCharMessage = (char, { charClass, messageKey }) => {
-  if (char.length !== 1) return null;
-  if (new RegExp(charClass).test(char)) return null;
-  return naviI18n(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 });
 };
 
 // Keydown: block when inserting one char would exceed maxLength.
@@ -30987,18 +31338,41 @@ const getMaxLengthInsertionMessage = (el, { maxLength }) => {
   });
 };
 
-// Paste / set: block when value contains disallowed chars.
-const getInvalidCharsMessage = (uiState, { charClass, messageKey }) => {
+const countCharsOutsideClass = (str, charClass) => {
+  const regex = compileCharClass(charClass);
+  let count = 0;
+  for (const char of str) {
+    if (!regex.test(char)) {
+      count++;
+    }
+  }
+  return count;
+};
+
+// Paste / set: block when the gesture brings in a character the class refuses.
+const getInvalidCharsMessage = (
+  uiState,
+  { charClass, messageKey, uiStateNow },
+) => {
   const str = uiState === undefined ? "" : String(uiState);
-  if (new RegExp(`^(?:${charClass})*$`).test(str)) return null;
-  return naviI18n(messageKey);
+  if (compileCharClassAnchored(charClass).test(str)) return null;
+  const strNow = uiStateNow === undefined ? "" : String(uiStateNow);
+  if (
+    countCharsOutsideClass(str, charClass) <=
+    countCharsOutsideClass(strNow, charClass)
+  ) {
+    return null;
+  }
+  return naviI18nFromValidityMessage({ key: messageKey });
 };
 
-// Paste / set: truncate when value exceeds maxLength.
-const getLengthOverflowResult = (uiState, { maxLength }) => {
+// Paste / set: truncate what the gesture adds beyond the limit.
+const getLengthOverflowResult = (uiState, { maxLength, uiStateNow }) => {
   if (maxLength === undefined) return null;
   const str = uiState === undefined ? "" : String(uiState);
   if (str.length <= maxLength) return null;
+  const strNow = uiStateNow === undefined ? "" : String(uiStateNow);
+  if (str.length <= strNow.length) return null;
   return {
     fixedValue: str.slice(0, maxLength),
     message: naviI18n("constraint.guard.max_length.value", {
@@ -31037,7 +31411,7 @@ const createControlGuard = (controller) => {
 
     if (charGuard) {
       const charClass = resolveCharClass(charGuard);
-      const messageKey = getCharGuardMessageKey(charGuard);
+      const messageKey = getCharClassMessageKey(charGuard);
       const charMsg = getInvalidCharMessage(e.key, { charClass, messageKey });
       if (charMsg) {
         show(charMsg, e);
@@ -31067,13 +31441,17 @@ const createControlGuard = (controller) => {
    */
   const checkUIState = (uiState, e) => {
     const { charGuard, maxLengthGuard } = controller.props;
+    // What the control holds right now — setUIState has not written the new
+    // value yet, and the paste path computes it without applying it.
+    const uiStateNow = controller.uiState;
 
     if (charGuard) {
       const charClass = resolveCharClass(charGuard);
-      const messageKey = getCharGuardMessageKey(charGuard);
+      const messageKey = getCharClassMessageKey(charGuard);
       const charsMsg = getInvalidCharsMessage(uiState, {
         charClass,
         messageKey,
+        uiStateNow,
       });
       if (charsMsg) {
         show(charsMsg, e);
@@ -31084,6 +31462,7 @@ const createControlGuard = (controller) => {
     if (maxLengthGuard !== undefined) {
       const lengthResult = getLengthOverflowResult(uiState, {
         maxLength: maxLengthGuard,
+        uiStateNow,
       });
       if (lengthResult) {
         show(lengthResult.message, e);
@@ -35111,13 +35490,15 @@ const splitControlProps = props => {
   };
   const controlRootProps = {};
   for (const key of Object.keys(props)) {
-    if (CONTROL_PROP_SET.has(key)) {
-      if (CONTROL_ATTRIBUTE_SET.has(key)) {
-        controlHostProps[key] = props[key];
-      }
-    } else {
-      controlRootProps[key] = props[key];
+    const attributeName = controlAttributeFromProp(key);
+    if (attributeName) {
+      controlHostProps[attributeName] = props[key];
+      continue;
+    }
+    if (isControlProp(key)) {
+      continue;
     }
+    controlRootProps[key] = props[key];
   }
   return [controlRootProps, controlHostProps];
 };
@@ -37217,6 +37598,7 @@ const TextAnchor = ({
       ref: anchorRef,
       className: "navi_text_anchor",
       "aria-hidden": "true",
+      hidden: true,
       children: "\u200B"
     })]
   });
@@ -37884,8 +38266,10 @@ const shouldInjectSpacingBetween = (left, right) => {
  * @param {boolean} [emojiAsIcon]
  *   Renders every emoji found in the string children as an `Icon`, so it sits
  *   in the line like a character and never makes the line taller than the
- *   text. For free text a user typed (a message, a description) — the only
- *   place an emoji is expected; see `docs/typography.md`.
+ *   text. For free text a user typed (a message, a description); see
+ *   `docs/typography.md`. Only the strings this `Text` receives are rewritten —
+ *   a string a child component renders is out of reach, and that component
+ *   calls `renderEmojiAsIcon()` itself instead.
  *
  * @param {boolean} [preventSpaceUnderlines]
  *   Replaces real space characters between children with padding-based spaces.
@@ -42702,7 +43086,16 @@ const createToggleEvent = open => {
   return toggleEvent;
 };
 
-const DEFAULT_VALIDITY_STATE = { valid: true };
+const DEFAULT_VALIDITY_STATE = { valid: true, reported: null };
+
+/**
+ * The control's constraint validity, re-read whenever it changes:
+ * `{ valid, reported, [constraintName]: null | failureInfo }`.
+ *
+ * `reported` names the constraint whose message the callout shows — the one
+ * navi picks when several fail at once. A failure info carries `messageString`,
+ * the sentence itself.
+ */
 const useConstraintValidityState = (ref) => {
   const checkValue = () => {
     const element = ref.current;
@@ -46380,8 +46773,13 @@ installImportMetaCssBuild(import.meta);/**
  *   "postal"       → postal code (digits, letters, space, hyphen)
  *   "iban"         → IBAN (uppercase and digits)
  *   "slug"         → URL slug (lowercase, digits, hyphens)
- *   "[A-Z0-9]"     → any custom regex character class
+ *   "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.
@@ -59043,10 +59441,11 @@ const PendingScrollRefContext = createContext(null);
 //   "muted"               — keep in DOM, visible but opacified and still interactive
 const SearchNoMatchModeContext = createContext("remove");
 
-// When total rendered items exceeds renderBudget, a render window [start, end)
-// is activated to cap the number of DOM nodes. Items outside the window return
-// null. The window slides as the user scrolls, using actual DOM positions
-// (getBoundingClientRect) to find the first visible item — no height estimation.
+// How many rows the list draws at once. Past that, a render window [start, end)
+// caps the number of DOM nodes: the window slides as the user scrolls, using
+// actual DOM positions (getBoundingClientRect) to find the first visible item —
+// no height estimation. It frames the rows a run draws (see ListItems); items
+// declared one by one (<List.Item>) are all drawn, whatever the budget.
 const RENDER_BUDGET_DEFAULT = 100;
 
 // Attribute used on <li> elements rendered by ListItemReal so the scroll listener
@@ -59055,8 +59454,9 @@ const REAL_LIST_ITEM_SELECTOR = `[navi-list-item-real]`;
 // Rows standing in for content that has not arrived (see List's renderSkeleton).
 const SKELETON_LIST_ITEM_CLASS = "navi_list_item_skeleton";
 
-// Carries the render window {start, end} (or null = render all) from
-// List down to each ListItem.
+// Carries the render window {start, end} from List down to the runs of rows
+// inside it (see ListItems): a run draws the rows it frames and holds the room
+// of the others.
 const RenderWindowContext = createContext(null);
 // Carries List's own `columns` prop (a grid-template-columns value, e.g.
 // "1fr auto auto") down to each ListItem/filler/fallback so they can render
@@ -59893,12 +60293,46 @@ const ListUI = props => {
     searchText,
     horizontal
   });
+
+  // renderBudget frames the rows of a run; a list whose items are all declared
+  // one by one draws every one of them, and the prop looks exactly like it is
+  // doing something. Said once per list, when there is something drawn to
+  // judge it on — a run mounting later (rows behind a loading state) is not a
+  // list without one.
+  const renderBudgetWarnedRef = useRef(false);
+  useLayoutEffect(() => {
+    if (props.renderBudget === undefined || renderBudgetWarnedRef.current) {
+      return;
+    }
+    if (virtual.hasRuns() || tracker.itemsSignal.peek().length === 0) {
+      return;
+    }
+    renderBudgetWarnedRef.current = true;
+    console.warn(`List: renderBudget=${renderBudget} has no effect here. The render window frames the rows a run draws (<List.Items itemsAction>); items declared one by one (<List.Item>) are all rendered. Move the items to <List.Items> to cap the number of DOM nodes, or drop the prop.`);
+  });
   virtual.captureAnchor = captureAnchor;
   virtual.virtualItemSizeSignal = virtualItemSizeSignal;
   virtual.horizontal = Boolean(horizontal);
   virtual.renderSkeleton = renderSkeleton;
+
+  // A row is addressed by id from outside (--navi-scroll, --navi-select): the
+  // ones drawn have registered themselves with the tracker, and the ones a run
+  // holds without drawing are known only to that run (see List.Items' row
+  // locator). Both answer here, so a row is reachable whether or not the
+  // window happens to frame it.
   const getItemById = itemId => {
-    return tracker.itemsSignal.peek().find(item => item.id === itemId);
+    const itemDrawn = tracker.itemsSignal.peek().find(item => item.id === itemId);
+    if (itemDrawn) {
+      return itemDrawn;
+    }
+    const rowIndex = virtual.locateRow(itemId);
+    if (rowIndex === null) {
+      return undefined;
+    }
+    return {
+      id: itemId,
+      index: rowIndex
+    };
   };
   const noMatchCount = tracker.noMatchCountSignal.value;
   // What the list stands for, which is not always what it holds: a run saying
@@ -62438,6 +62872,9 @@ const createListVirtual = () => {
       passId++;
       nextIndex = 0;
     },
+    // Whether any run of rows lives in this list: what makes a render window
+    // mean anything (see List's renderBudget).
+    hasRuns: () => locatorByOwner.size > 0,
     setRowLocator: (ownerId, locate) => {
       locatorByOwner.set(ownerId, locate);
     },
@@ -62484,12 +62921,17 @@ const VISIBILITY_HIDDEN_STYLE = {
  * for them — which is what makes an infinitely scrolled list nothing more than
  * a list that says how many rows it has.
  *
- * The rows come from `itemsAction(range)`: the run asks for what it is about to
- * draw and keeps what it gets. The range says the same thing three ways, so a
- * source can read it however it paginates — `{ start, end }` (places in the
- * collection, a negative `start` counting back from the end like
- * `Range: items=-25`, which is what a list opening on its last rows asks for
- * before it knows how many there are), `limit` (how many rows), and
+ * A collection held in memory is given whole: `items={rows}`. The run holds all
+ * of them from the first render and never asks for anything — it is still the
+ * render window that decides how many are drawn.
+ *
+ * A collection read a slice at a time comes from `itemsAction(range)`: the run
+ * asks for what it is about to draw and keeps what it gets. The range says the
+ * same thing three ways, so a source can read it however it paginates —
+ * `{ start, end }` (places in the collection, a negative `start` counting back
+ * from the end like `Range: items=-25`, which is what a list opening on its
+ * last rows asks for before it knows how many there are), `limit` (how many
+ * rows), and
  * `before`/`after`/`around` (the id of a row to count from, for a source
  * paginating by cursor). Answer with the rows (an array — that is all of
  * them), or with a range the way a Content-Range does: `{ items, start, count }`
@@ -62503,11 +62945,11 @@ const VISIBILITY_HIDDEN_STYLE = {
  * copies of the JSON. The list holds the slices, the store holds the objects
  * (see docs/resource.md).
  *
- * A collection held in memory answers synchronously: `itemsAction={() => rows}`.
- * What it gives back is kept, so a collection that changes as a whole (a search
- * reordering it) is a different collection: give the run a `key` that changes
- * with it, the way one does for anything else that is not the same thing
- * anymore.
+ * A collection that changes as a whole (a search reordering it) is a different
+ * collection: with `items`, another array is another collection and the run
+ * draws it from its first row; with `itemsAction`, give the run a `key` that
+ * changes with it, the way one does for anything else that is not the same
+ * thing anymore.
  *
  * A row says what it is where it is drawn: `renderItem` returns a
  * `<List.Item>` carrying its own props (`selectable`, `value`, `selected`…),
@@ -62519,7 +62961,8 @@ const VISIBILITY_HIDDEN_STYLE = {
  *
  * @type {import("ignore:preact").FunctionComponent<{
  *   renderItem: (item: any, index: number, state: {refreshing: boolean}) => import("ignore:preact").ComponentChildren,
- *   itemsAction: (range: {start: number, end: number, limit: number, before?: string, after?: string, around?: string, count?: number, signal: AbortSignal}) => any,
+ *   items?: any[],
+ *   itemsAction?: (range: {start: number, end: number, limit: number, before?: string, after?: string, around?: string, count?: number, signal: AbortSignal}) => any,
  *   count?: number,
  *   groupBy?: (item: any, index: number) => any,
  *   renderGroupLabel?: (item: any, index: number) => import("ignore:preact").ComponentChildren,
@@ -62534,6 +62977,13 @@ const VISIBILITY_HIDDEN_STYLE = {
  *   What one row is, given the item and where it sits. `state.refreshing` says
  *   the rows drawn are the ones from before while the run reads the collection
  *   again — the list carries `navi-refreshing` for the same reason.
+ * @param {any[]} [props.items]
+ *   The collection, when it is held in memory: all of it, in order. Nothing is
+ *   ever asked for — `itemsAction`, `count`, `pageSize` and `memoryBudget` have
+ *   no part to play, and no row is ever a skeleton.
+ * @param {(range: object) => any} [props.itemsAction]
+ *   Where the rows come from when the collection is read a slice at a time:
+ *   a resource's range reader (`RESOURCE.GET_RANGE.bindParams(...)`).
  * @param {(item: any, index: number) => any} [props.groupBy]
  *   What tells rows that belong together apart from the others — the day of a
  *   message, the month of a game. Consecutive rows sharing it are wrapped in a
@@ -62556,7 +63006,8 @@ const VISIBILITY_HIDDEN_STYLE = {
  *   How many rows the run keeps in memory. Past that, the ones far from what is
  *   on screen are dropped (and asked for again if the user goes back) — the
  *   same trade the render window makes with the DOM, one order of magnitude
- *   further out. `0` keeps everything.
+ *   further out. `Infinity` keeps every row the run ever received; `0` keeps
+ *   only the ones around the window.
  * @param {false|(index: number) => any} [props.renderSkeleton]
  *   What to draw for a row the run does not hold. Defaults to List's own
  *   `renderSkeleton`, then to a bare `<List.Item skeleton>`; `false` leaves the
@@ -62577,6 +63028,7 @@ const VISIBILITY_HIDDEN_STYLE = {
  */
 const ListItems = ({
   renderItem,
+  items,
   itemsAction,
   count,
   pageSize,
@@ -62593,6 +63045,7 @@ const ListItems = ({
   const renderWindow = useContext(RenderWindowContext);
   const separator = useContext(SeparatorContext);
   const store = useItemStore({
+    items,
     count,
     itemsAction,
     memoryBudget,
@@ -62883,11 +63336,17 @@ const rangeIsSame = (a, b) => {
 // are in all is enough to place it, so the pages need not be contiguous nor
 // arrive in order.
 const useItemStore = ({
+  items,
   count,
   itemsAction,
   memoryBudget,
   onRequestStateChange
 }) => {
+  // A collection given whole (`items`) is held from the first render: nothing
+  // to ask for, nothing to keep across mounts, nothing to invalidate. The rest
+  // of the store then never has a hole to fill, so it stays inert on its own —
+  // the asking below finds nothing missing.
+  const inMemory = items !== undefined;
   // The run's asking, on the same channel as the window it asks for — they are
   // one subject: what the list is about to draw is what it goes to fetch (see
   // `useRequestMissing`, and `updateRenderWindow` which logs the other half).
@@ -62909,8 +63368,28 @@ const useItemStore = ({
   // the reader holds for it (see resource_range_reader.js).
   useRef(false);
   const pagesRef = useRef(null);
+  const itemsRef = useRef(items);
+  const itemsHeldRef = useRef(false);
   let restored = false;
-  if (!pagesRef.current) {
+  if (inMemory) {
+    // The array as a whole is the collection: another array is another
+    // collection, drawn from its first row (which is also why a run reading a
+    // collection that changes as a whole takes a key).
+    if (!pagesRef.current || itemsRef.current !== items) {
+      itemsRef.current = items;
+      const byIndex = new Map();
+      let index = 0;
+      while (index < items.length) {
+        byIndex.set(index, items[index]);
+        index++;
+      }
+      pagesRef.current = {
+        byIndex,
+        count: items.length
+      };
+      itemsHeldRef.current = false;
+    }
+  } else if (!pagesRef.current) {
     const composition = typeof itemsAction === "function" && itemsAction.readComposition ? itemsAction.readComposition() : null;
     if (composition && composition.count !== undefined) {
       pagesRef.current = composition;
@@ -62957,6 +63436,16 @@ const useItemStore = ({
   // range askable again (see the request memory just above).
   const [failure, setFailure] = useState(null);
   const virtual = useContext(ListVirtualContext);
+  // The rows are there, which is what the list waits for to place itself on the
+  // row it is held at (see placeWhereHeld). Said from an effect: a signal read
+  // during this very render must not be written during it.
+  useLayoutEffect(() => {
+    if (!inMemory || itemsHeldRef.current) {
+      return;
+    }
+    itemsHeldRef.current = true;
+    virtual.pagesSignal.value = virtual.pagesSignal.peek() + 1;
+  });
   // Before the first answer a run does not know how many rows it stands for.
   // It stands for a windowful of them: a list that is about to be filled looks
   // like rows on their way, not like an empty list.
@@ -63029,10 +63518,12 @@ const useItemStore = ({
     // dropped and simply asked for again if the user goes back — the same
     // trade the render window makes, one order of magnitude further out.
     forget: (windowFrom, windowTo) => {
-      const budget = memoryBudget === undefined ? ITEM_STORE_MAX_DEFAULT : memoryBudget;
-      if (!budget) {
+      if (inMemory) {
+        // Dropping a row here would drop it for good: there is no source to
+        // ask it back from.
         return;
       }
+      const budget = memoryBudget === undefined ? ITEM_STORE_MAX_DEFAULT : memoryBudget;
       const keepFrom = windowFrom - ITEM_STORE_KEEP_AROUND;
       const keepTo = windowTo + ITEM_STORE_KEEP_AROUND;
       if (pages.byIndex.size > budget) {
@@ -67469,11 +67960,18 @@ const css$r = /* css */`
          99999 fallback means "no cap" without needing a conditional rule. */
       max-height: calc(var(--textarea-max-rows, 99999) * 1lh);
       field-sizing: content;
-      /* Explicit, never normal: minRows/maxRows are lengths in lh, and with
-         line-height normal the lh unit resolves to a theoretical value that
-         does not match the real rendered line — the box then jumps by a few
-         pixels the moment the first character replaces the theory with a real
-         line. One number for both keeps every row count exact. */
+      /* Explicit, never normal, for two independent reasons.
+         minRows/maxRows are lengths in lh, and with line-height normal the lh
+         unit resolves to a theoretical value that does not match the real
+         rendered line — the box then jumps by a few pixels the moment the first
+         character replaces the theory with a real line.
+         And a line box under "normal" takes the height of the tallest font it
+         holds, so the one line carrying an emoji stands taller than the ones
+         around it — here, where the text is typed and no glyph can be wrapped
+         the way emojiAsIcon wraps one, the line height is the only lever.
+         1.5 is also tall enough to contain an emoji's own box, so it is not
+         clipped either; a tighter value would keep the rows even and cut the
+         glyph. See docs/typography.md. */
       line-height: 1.5;
       /* The control grows itself; resizable below hands the handle back. */
       resize: none;
@@ -78739,5 +79237,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, renderEmojiAsIcon, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, renderEmojiAsIcon, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map