@jsenv/navi 0.29.160 → 0.29.162

package/dist/jsenv_navi.js

@@ -565,1882 +565,847 @@ effect(() => {
 });
 
 /**
- * Where an action error goes when nothing displays it.
+ * Interpolates a template string, replacing `[key]` placeholders with values.
  *
- * An action that fails writes the error into its `errorSignal` and stops there.
- * It cannot know whether a screen is going to show it: at the instant it fails,
- * the screen that will is often not even mounted — a route action runs before
- * its page renders, which is precisely the case a guess made at failure time
- * gets wrong. So nothing is guessed. The error is let go, and whoever displays
- * it SAYS so by marking it; what nobody ever took is reported as unhandled.
+ * Usable on its own — no i18n instance required — whenever a sentence should
+ * stay readable as one string instead of being cut into JSX expressions or
+ * concatenations. `<Interpolate>` is the JSX form of this function, and
+ * `createI18n` runs every translation through it. See `docs/i18n.md`.
  *
- * The mark is `__handled_by__`, the same one the jsenv supervisor reads to stay
- * out of the way of an error the app is already showing — one mark, one meaning:
- * "this is on screen somewhere".
+ * `[]` was chosen as the placeholder delimiter (rather than `{}` or `{{}}`)
+ * because it does not conflict with JSX syntax, JavaScript template literals,
+ * or common punctuation in translated strings.
  *
- * The whole picture, control errors and validation included: docs/error_handling.md
+ * @param {string} template
+ *   e.g. `"Hello [name], you have [count] messages"`. A non-string is returned
+ *   untouched, as is any template when `replacements` is missing.
+ * @param {object} [replacements]
+ *   Values keyed by placeholder name. A key can be:
+ *   - a direct name — `[name]` ← `{ name: "Alice" }`
+ *   - a dot-path — `[item.label]` ← `{ item: { label: "Book" } }` (a literal
+ *     `"item.label"` key wins over the path)
+ *
+ *   A value that is a function is called at that point, so an expensive or
+ *   lazily-known replacement is only computed when the placeholder is actually
+ *   present in this language's template.
+ *
+ *   A placeholder with no matching value is left in the output as-is
+ *   (`"[name]"`), making the gap visible rather than silently empty.
+ * @param {object} [options]
+ * @param {boolean} [options.allowJsx=false]
+ *   Allow VNode replacements (what `<Interpolate>` passes). Without it, a VNode
+ *   value warns and is coerced to a string.
+ * @returns {string|import("preact").VNode}
+ *   A plain string when every replacement is a string, a Preact fragment when
+ *   at least one VNode was interpolated with `allowJsx`.
  */
+const interpolateText = (
+  template,
+  replacements,
+  { allowJsx = false } = {},
+) => {
+  if (!replacements || typeof template !== "string") {
+    return template;
+  }
+  const parts = template.split(/(\[[^\]]+\])/);
+  let hasVnode = false;
+  const resolved = [];
+  for (const part of parts) {
+    const match = part.match(/^\[([^\]]+)\]$/);
+    if (!match) {
+      resolved.push(part);
+      continue;
+    }
+    const key = match[1];
+    let value = resolveValue(replacements, key, part);
+    if (typeof value === "function") {
+      value = value();
+    }
+    if (isValidElement(value)) {
+      if (allowJsx) {
+        hasVnode = true;
+      } else {
+        console.warn(
+          `interpolateText: VNode passed for placeholder [${match[1]}] but allowJsx is false — value coerced to string`,
+        );
+      }
+    }
+    resolved.push(value);
+  }
+  if (!hasVnode) {
+    return resolved.join("");
+  }
+  // h(Fragment) instead of JSX (<>{resolved}</>) to keep this file as .js
+  return h(Fragment, null, resolved);
+};
 
-const markErrorAsDisplayedBy = (error, by) => {
-  if (error && typeof error === "object") {
-    error.__handled_by__ = by;
+// Resolves a placeholder key against the replacements object.
+// 1. Direct lookup: replacements["item.name"]
+// 2. Dot-path lookup: replacements["item"]["name"]
+// 3. Fallback: the original placeholder string (e.g. "[item.name]")
+const resolveValue = (replacements, key, fallback) => {
+  if (key in replacements) {
+    return replacements[key];
+  }
+  const dotIndex = key.indexOf(".");
+  if (dotIndex !== -1) {
+    const head = key.slice(0, dotIndex);
+    const tail = key.slice(dotIndex + 1);
+    const parent = replacements[head];
+    if (parent && typeof parent === "object") {
+      const nested = parent[tail];
+      if (nested !== undefined) {
+        return nested;
+      }
+    }
   }
+  return fallback;
 };
 
-const errorIsDisplayed = (error) => {
-  return Boolean(error && error.__handled_by__);
+const DEFAULT_LANG = "en";
+
+/**
+ * The browser's own language preferences, most preferred first — read from
+ * `navigator.languages` (falling back to the single `navigator.language`,
+ * then to DEFAULT_LANG when neither is available, e.g. during SSR). Kept as
+ * its own signal, independent from what this app actually supports — see
+ * `supportedLanguagesSignal` below for the allow-list that filters it, and
+ * `languagesSignal` for the final, ready-to-use combination of the two (plus
+ * `preferredLanguageSignal`).
+ */
+const getRuntimeLanguages = () => {
+  if (typeof window === "undefined") {
+    return [DEFAULT_LANG];
+  }
+  const { navigator } = window;
+  if (typeof navigator === "undefined") {
+    return [DEFAULT_LANG];
+  }
+  const { languages } = navigator;
+  if (Array.isArray(languages) && languages.length > 0) {
+    return languages;
+  }
+  const { language } = navigator;
+  if (typeof language === "string") {
+    return [language];
+  }
+  return [DEFAULT_LANG];
 };
 
+const runtimeLanguagesSignal = signal(getRuntimeLanguages());
+
+if (typeof window !== "undefined") {
+  window.addEventListener("languagechange", () => {
+    runtimeLanguagesSignal.value = getRuntimeLanguages();
+  });
+}
+
 /**
- * A render has read this error — it is now the render tree's business, not this
- * module's, and there is nothing left to report.
+ * The languages this app actually offers, e.g. `["en", "fr"]` — an allow-list
+ * `languagesSignal` below filters everything else against (runtime languages the
+ * browser reports, and `preferredLanguageSignal`'s own override), so a site
+ * that only supports English/French never ends up resolving to German just
+ * because that happens to be the browser's or the user's own preference.
  *
- * Whatever the reader does with it is already covered without any deadline: it
- * displays it (and marks it), or it throws it, and a thrown error either finds a
- * boundary that displays it or reaches window on its own — `preact/debug`
- * re-throws every error a boundary caught, and an unbounded one aborts the
- * render loudly. Reporting it here as well would be a second voice saying the
- * same thing, always the wrong one, since this module cannot see which of those
- * happened.
+ * `null` (the default) means no restriction at all: every language the
+ * browser/user prefers is allowed through.
  */
-const errorTakenByRenderSet = new WeakSet();
-const markErrorAsTakenByRender = (error) => {
-  if (error && typeof error === "object") {
-    errorTakenByRenderSet.add(error);
-  }
+const supportedLanguagesSignal = signal(null);
+
+/**
+ * @param {string[]|null} languages - e.g. `["en", "fr"]`. Pass `null`/`[]`
+ *   to lift the restriction again (allow everything).
+ */
+const setSupportedLanguages = (languages) => {
+  supportedLanguagesSignal.value =
+    languages && languages.length ? languages : null;
 };
 
 /**
- * When the answer "nobody took it" is final.
+ * A single language the user explicitly chose (e.g. via an in-app language
+ * picker), overriding whatever the browser itself reports — takes priority
+ * over `runtimeLanguagesSignal` in `languagesSignal` below, but is still subject
+ * to `supportedLanguagesSignal`'s own allow-list.
  *
- * The floor is one macrotask: every render that could take the error — Preact's
- * queue, a Suspense boundary settling on the failure, the boundary above it —
- * happens in microtasks.
+ * Deliberately a single language, not an ordered list: reordering *among*
+ * several preferred languages is real complexity real users essentially
+ * never want — the practical need `languagesSignal` needs to serve is "let this
+ * one user pick their one preferred language instead of the browser's",
+ * nothing more.
+ */
+const preferredLanguageSignal = signal(null);
+
+/**
+ * @param {string|null} language - BCP 47 tag, e.g. "fr". Pass `null` to
+ *   go back to following the browser's own language.
+ */
+const setPreferredLanguage = (language) => {
+  preferredLanguageSignal.value = language || null;
+};
+
+const getPrimarySubtag = (lang) => lang.split("-")[0];
+
+const isLanguageSupported = (lang, supportedLanguages) => {
+  const primarySubtag = getPrimarySubtag(lang);
+  return supportedLanguages.some(
+    (supportedLanguage) =>
+      getPrimarySubtag(supportedLanguage) === primarySubtag,
+  );
+};
+
+/**
+ * The ordered, ready-to-use language preference list every navi
+ * component/util defaults to (naviI18n, formatNumber, the Time components,
+ * validation messages…), live on every read. Combines, in priority order:
  *
- * That floor is enough for an action failing under a page that is already on
- * screen, and far too early for a route action: it fails ON the url change,
- * before its page exists, and that page cannot render until the routing that
- * asked for the data is over. Measured on an offline navigation, the screen
- * displaying the error arrived ~12ms after this deadline — so the app was told
- * it had displayed nothing while it was displaying it.
+ * 1. `preferredLanguageSignal` (the user's own explicit pick, if any)
+ * 2. `runtimeLanguagesSignal` (the browser's own ordered preferences)
  *
- * The browser integration knows when the document has stopped moving and hands
- * that over here (see installReportDeadlineExtension); nothing else does, and
- * this module stays free of the DOM. Waiting longer costs nothing now that a
- * read is enough to call this off: what still reaches the report was read by no
- * render at all, and a late report about that is as good as a prompt one.
+ * then filters the result through `supportedLanguagesSignal` (if set) so
+ * only languages this app actually offers ever come out — e.g. a browser
+ * preferring `["de", "fr", "en"]` on a site that only supports `["en",
+ * "fr"]` resolves to `["fr", "en"]`, never touching German. If filtering
+ * would leave nothing at all (none of the browser's/user's preferences are
+ * supported), falls back to `supportedLanguagesSignal` itself so callers
+ * still get *something* usable rather than an empty array.
+ *
+ * Consumers that accept either a single lang or an ordered array (this
+ * package's own `matchBestLang`/`createI18n`, and native `Intl.NumberFormat`/
+ * `Intl.DateTimeFormat`) can pass this straight through: anything not
+ * covered by the first entry falls through to the next, rather than
+ * jumping straight to an unrelated default like "en".
  */
-let waitForDocumentSettled = null;
-const installReportDeadlineExtension = (fn) => {
-  waitForDocumentSettled = fn;
-};
+const languagesSignal = computed(() => {
+  const preferredLanguage = preferredLanguageSignal.value;
+  const runtimeLanguages = runtimeLanguagesSignal.value;
+  const supportedLanguages = supportedLanguagesSignal.value;
+
+  const orderedLanguages = preferredLanguage
+    ? [preferredLanguage, ...runtimeLanguages]
+    : runtimeLanguages;
+  const dedupedLanguages = [...new Set(orderedLanguages)];
+
+  if (!supportedLanguages) {
+    return dedupedLanguages;
+  }
+  const filteredLanguages = dedupedLanguages.filter((lang) =>
+    isLanguageSupported(lang, supportedLanguages),
+  );
+  return filteredLanguages.length > 0 ? filteredLanguages : supportedLanguages;
+});
 
 /**
- * Rethrown rather than logged: an error nobody took is an unhandled error, and
- * the runtime already knows what to do with those (window "error" event, jsenv
- * overlay in dev). Same trick preact/debug uses for the same reason.
+ * Creates a lightweight i18n instance: a central place where an app declares
+ * its texts once and reads them back translated into the active language.
+ *
+ * Worth using even in a single-language app — one registry beats strings
+ * scattered across components, and adding a second language later becomes a
+ * data change instead of a refactor. See `docs/i18n.md` for how to choose
+ * between the two key styles below and how this relates to `naviI18n`.
+ *
+ * @param {object} [options]
+ * @param {string} [options.keyLang]
+ *   When set, each key also serves as its own translation for `keyLang`.
+ *   This allows writing keys directly in that language (typically the language
+ *   the app is written in) so only *other* languages need registering:
+ *
+ *   ```js
+ *   const i18n = createI18n({ keyLang: "en" });
+ *   i18n.add("Hello [name]!", { fr: "Bonjour [name] !" });
+ *   i18n("Hello [name]!", { name: "Alice" }, { lang: "en" }); // "Hello Alice!"
+ *   i18n("Hello [name]!", { name: "Alice" }, { lang: "fr" }); // "Bonjour Alice !"
+ *   ```
+ *
+ *   `keyLang` only applies to keys passed to `add()`/`addAll()`; a key never
+ *   registered stays opaque and comes back as-is.
+ *
+ *   Without `keyLang`, keys are opaque identifiers and every language
+ *   (including the one the app was written in) must be registered explicitly:
+ *
+ *   ```js
+ *   const i18n = createI18n();
+ *   i18n.add("greeting", { en: "Hello [name]!", fr: "Bonjour [name] !" });
+ *   i18n("greeting", { name: "Alice" }, { lang: "en" }); // "Hello Alice!"
+ *   ```
+ *
+ * @param {string} [options.fallbackLang]
+ *   Language consulted when the active language has no translation for a key
+ *   — per key, not per language: a partially translated language falls through
+ *   to `fallbackLang` only for the keys it is missing. Without it, a missing
+ *   translation returns the key itself.
+ *
+ * @param {string|string[]} [options.runtimeLang]
+ *   The active language (BCP 47 tag or ordered array of tags) — named
+ *   "runtime" rather than "system" because there is no actual access to the
+ *   OS/user's system language from a browser, only `navigator.languages` (or
+ *   an explicit override) at runtime. Defaults to `languagesSignal.value`, read
+ *   fresh on every `format()`/`has()` call (not frozen at creation time) —
+ *   so overriding the language app-wide via `setPreferredLanguage()`/
+ *   `setSupportedLanguages()` (see lang_signal.js) is picked up here too.
+ *   Passing an explicit `runtimeLang` opts out of that and stays fixed for
+ *   this instance's whole lifetime.
+ *
+ * ---
+ *
+ * ## Registration
+ *
+ * **`i18n.add(key, { lang: "translation" })`** — one key, multiple languages.
+ *
+ * **`i18n.addAll({ key: { lang: "translation" }, ... })`** — multiple keys at once.
+ *
+ * **`i18n.addLangKeys(lang, { key: "translation", ... })`** — full language pack
+ * (useful when loading a JSON translation file).
+ *
+ * All three accumulate: registering a key that already exists overwrites that
+ * one key and leaves the rest of the language untouched. This is what lets an
+ * app override a single built-in navi text without redeclaring the others.
+ *
+ * A regional variant (e.g. `"fr-CA"`) automatically inherits all keys from its
+ * parent (`"fr"`) that it does not explicitly override:
+ * ```js
+ * i18n.addLangKeys("fr", { hello: "Bonjour !" });
+ * i18n.addLangKeys("fr-CA", { hello: "Allo !" }); // other "fr" keys inherited
+ * ```
+ * Inheritance is resolved at registration time, so register the parent first.
+ *
+ * ---
+ *
+ * ## Reading
+ *
+ * **`i18n(key, values?, { lang? })`** — the translation for `key`, with
+ * `[placeholder]` occurrences replaced from `values` (see `interpolateText`).
+ * Returns `key` itself when nothing matches, so an untranslated string still
+ * renders something readable. `i18n.format` is an alias of this call.
+ *
+ * **`i18n.has(key, { lang? })`** — whether a translation genuinely exists,
+ * i.e. how to tell "no translation" apart from "translation equal to the key".
+ *
+ * @returns {Function & { add, addAll, addLangKeys, has, format, languageMap }}
  */
-const errorReportedSet = new WeakSet();
-const reportErrorIfNobodyDisplaysIt = (error, { action } = {}) => {
-  const decide = () => {
-    if (errorIsDisplayed(error) || errorTakenByRenderSet.has(error)) {
-      return;
+const createI18n = ({ keyLang, fallbackLang, runtimeLang } = {}) => {
+  const languageMap = new Map();
+  // Bumped by addLangKeys — the only thing besides the active lang itself
+  // that could change what getActiveLang()/getResolvedFallbackLang() below
+  // resolve to, so it's what invalidates their own small caches.
+  let languageMapVersion = 0;
+
+  // Without an explicit runtimeLang, languagesSignal.value is re-read fresh on
+  // every call rather than frozen here via languagesSignal.peek() — freezing it
+  // would silently ignore setPreferredLanguage()/setSupportedLanguages() (see
+  // lang_signal.js) for the rest of this instance's life.
+  const hasExplicitRuntimeLang = runtimeLang !== undefined;
+
+  // matchBestLang does real work (a Map lookup per candidate, a possible
+  // "fr-CA" → "fr" split-and-retry loop) — worth skipping on every single
+  // format()/has() call in the common case, since what it resolves to only
+  // ever changes when languageMap itself changes (addLangKeys) or, for the
+  // non-explicit case, when languagesSignal.value itself changes (preferred
+  // language, supported languages, or "languagechange" — see lang_signal.js,
+  // languagesSignal is a computed() so its reference is stable when none of its
+  // own dependencies actually changed) — comparing those two cheaply
+  // (===) is enough to know the cached result below is still valid.
+  let cachedActiveLang;
+  let cachedActiveLangRuntimeLang;
+  let cachedActiveLangVersion = -1;
+  const getActiveLang = () => {
+    const currentRuntimeLang = hasExplicitRuntimeLang
+      ? runtimeLang
+      : languagesSignal.value;
+    if (
+      cachedActiveLangVersion === languageMapVersion &&
+      cachedActiveLangRuntimeLang === currentRuntimeLang
+    ) {
+      return cachedActiveLang;
     }
-    if (error && typeof error === "object") {
-      // The same error can reach here from more than one direction (the run
-      // that produced it, the routing promise carrying it): it is one error and
-      // it is reported once.
-      if (errorReportedSet.has(error)) {
-        return;
-      }
-      errorReportedSet.add(error);
+    cachedActiveLang = matchBestLang(currentRuntimeLang, languageMap);
+    cachedActiveLangVersion = languageMapVersion;
+    cachedActiveLangRuntimeLang = currentRuntimeLang;
+    return cachedActiveLang;
+  };
+
+  // fallbackLang is a plain, never-reactive option set once at creation —
+  // its own resolution only ever needs recomputing when languageMap does.
+  let cachedResolvedFallbackLang;
+  let cachedResolvedFallbackLangVersion = -1;
+  const getResolvedFallbackLang = () => {
+    if (!fallbackLang) {
+      return null;
     }
-    if (action && error && typeof error === "object" && !error.action) {
-      error.action = action;
+    if (cachedResolvedFallbackLangVersion === languageMapVersion) {
+      return cachedResolvedFallbackLang;
     }
-    throw error;
+    cachedResolvedFallbackLang = matchBestLang(fallbackLang, languageMap);
+    cachedResolvedFallbackLangVersion = languageMapVersion;
+    return cachedResolvedFallbackLang;
   };
 
-  setTimeout(() => {
-    if (errorIsDisplayed(error) || errorTakenByRenderSet.has(error)) {
-      // Already taken within the microtasks that followed the failure: the
-      // common case, and there is nothing to wait for.
-      return;
+  const addLangKeys = (lang, translations) => {
+    // Accumulate: merge with any existing translations for this lang
+    const existing = languageMap.get(lang);
+    if (existing) {
+      translations = { ...existing, ...translations };
     }
-    if (waitForDocumentSettled) {
-      waitForDocumentSettled(decide);
-      return;
+    // A regional variant inherits all keys not explicitly overridden
+    // e.g. "fr-CA" inherits from "fr"
+    const dashIndex = lang.indexOf("-");
+    if (dashIndex !== -1) {
+      const parentLang = lang.slice(0, dashIndex);
+      const parentTranslations = languageMap.get(parentLang);
+      if (parentTranslations) {
+        translations = { ...parentTranslations, ...translations };
+      }
     }
-    decide();
-  });
-};
-
-const actionPrivatePropertiesWeakMap = new WeakMap();
-const getActionPrivateProperties = (action) => {
-  const actionPrivateProperties = actionPrivatePropertiesWeakMap.get(action);
-  if (!actionPrivateProperties) {
-    throw new Error(`Cannot find action private properties for "${action}"`);
-  }
-  return actionPrivateProperties;
-};
-const setActionPrivateProperties = (action, properties) => {
-  actionPrivatePropertiesWeakMap.set(action, properties);
-};
-
-const IDLE = { id: "idle" };
-const RUNNING = { id: "running" };
-const ABORTED = { id: "aborted" };
-const FAILED = { id: "failed" };
-const COMPLETED = { id: "completed" };
+    languageMap.set(lang, translations);
+    languageMapVersion++;
+  };
 
-const useActionStatus = (action) => {
-  if (!action) {
-    return {
-      params: undefined,
-      runningState: IDLE,
-      isPrerun: false,
-      idle: true,
-      loading: false,
-      aborted: false,
-      error: null,
-      completed: false,
-      data: undefined,
-    };
-  }
-  const {
-    paramsSignal,
-    runningStateSignal,
-    isPrerunSignal,
-    errorSignal,
-    dataSignal,
-  } = action;
-  const params = paramsSignal.value;
-  const isPrerun = isPrerunSignal.value;
-  const runningState = runningStateSignal.value;
-  const idle = runningState === IDLE;
-  const aborted = runningState === ABORTED;
-  const error = errorSignal.value;
-  const loading = runningState === RUNNING;
-  const completed = runningState === COMPLETED;
-  const data = dataSignal.value;
+  const add = (key, langTranslations) => {
+    if (keyLang && !(keyLang in langTranslations)) {
+      // Auto-register the key itself as the translation for keyLang
+      addLangKeys(keyLang, { [key]: key });
+    }
+    for (const [lang, value] of Object.entries(langTranslations)) {
+      addLangKeys(lang, { [key]: value });
+    }
+  };
 
-  return {
-    params,
-    runningState,
-    isPrerun,
-    idle,
-    loading,
-    aborted,
-    error,
-    completed,
-    data,
+  const addAll = (keyMap) => {
+    for (const [key, langTranslations] of Object.entries(keyMap)) {
+      add(key, langTranslations);
+    }
   };
-};
 
-installImportMetaCssBuild(import.meta);const css$14 = /* css */`.action_error {
-  background: #fdd;
-  border: 1px solid red;
-  margin-top: 0;
-  margin-bottom: 20px;
-  padding: 20px;
-}
-`;
-const renderIdleDefault = () => null;
-const renderLoadingDefault = () => null;
-const renderAbortedDefault = () => null;
-const renderErrorDefault = error => {
-  let routeErrorText = error && error.message ? error.message : error;
-  return jsxs("p", {
-    className: "action_error",
-    children: ["An error occured: ", routeErrorText]
-  });
-};
-const renderCompletedDefault = () => null;
-const ActionRenderer = ({
-  action,
-  children,
-  disabled
-}) => {
-  import.meta.css = [css$14, "@jsenv/navi/src/action/action_renderer.jsx"];
-  if (action === undefined) {
-    throw new Error("ActionRenderer requires an action to render, but none was provided.");
-  }
-  let renderBranches;
-  if (typeof children === "function") {
-    renderBranches = {
-      completed: children
-    };
-  } else if (isValidElement(children)) {
-    renderBranches = {
-      always: () => children
-    };
-  } else if (isPlainObject$2(children)) {
-    renderBranches = children;
-  } else {
-    renderBranches = {
-      completed: children
-    };
-  }
-  const {
-    idle: renderIdle = renderIdleDefault,
-    loading: renderLoading = renderLoadingDefault,
-    aborted: renderAborted = renderAbortedDefault,
-    error: renderError = renderErrorDefault,
-    completed: renderCompleted,
-    always: renderAlways
-  } = renderBranches;
-  const {
-    idle,
-    loading,
-    aborted,
-    error,
-    completed,
-    data
-  } = useActionStatus(action);
-  const UIRenderedPromise = useUIRenderedPromise(action);
-  const [errorBoundary, resetErrorBoundary] = useErrorBoundary();
-  useLayoutEffect(() => {
-    resetErrorBoundary();
-  }, [action, loading, idle, resetErrorBoundary]);
-  useLayoutEffect(() => {
-    UIRenderedPromise.resolve();
-    return () => {
-      actionUIRenderedPromiseWeakMap.delete(action);
-    };
-  }, [action]);
-  if (disabled) {
-    return null;
-  }
-  // If renderAlways is provided, it wins and handles all rendering
-  if (renderAlways) {
-    return renderAlways({
-      idle,
-      loading,
-      aborted,
-      completed,
-      error,
-      data
-    });
-  }
-  if (idle) {
-    return renderIdle(action);
-  }
-  if (errorBoundary) {
-    // Displaying it is what makes it handled (see action_error_report.js)
-    markErrorAsDisplayedBy(errorBoundary, "<ActionRenderer>");
-    return renderError(errorBoundary, "ui_error", action);
-  }
-  if (aborted) {
-    return renderAborted(action);
-  }
-  let renderCompletedSafe;
-  if (renderCompleted) {
-    renderCompletedSafe = renderCompleted;
-  } else {
-    const {
-      ui
-    } = getActionPrivateProperties(action);
-    if (ui.renderCompleted) {
-      renderCompletedSafe = ui.renderCompleted;
-    } else {
-      renderCompletedSafe = renderCompletedDefault;
+  const _getTemplate = (key, lang) => {
+    // matchBestLang, not matchLang directly: lang can be an array (e.g.
+    // languagesSignal.value is always an ordered array — see lang_signal.js) and
+    // matchLang alone assumes a plain string, throwing
+    // on .split() otherwise.
+    const resolvedLang = lang ? matchBestLang(lang, languageMap) : null;
+    if (resolvedLang) {
+      const translations = languageMap.get(resolvedLang);
+      const translated = translations[key];
+      if (translated !== undefined) {
+        return translated;
+      }
     }
-  }
-  if (loading) {
-    if (action.canDisplayOldData && data !== undefined) {
-      return renderCompletedSafe(data, action);
+    const resolvedFallbackLang = getResolvedFallbackLang();
+    if (resolvedFallbackLang) {
+      const fallbackTranslations = languageMap.get(resolvedFallbackLang);
+      const fallbackTranslated = fallbackTranslations[key];
+      if (fallbackTranslated !== undefined) {
+        return fallbackTranslated;
+      }
     }
-    return renderLoading(action);
-  }
-  if (error) {
-    markErrorAsDisplayedBy(error, "<ActionRenderer>");
-    return renderError(error, "action_error", action);
-  }
-  return renderCompletedSafe(data, action);
-};
-const defaultPromise = Promise.resolve();
-defaultPromise.resolve = () => {};
-const actionUIRenderedPromiseWeakMap = new WeakMap();
-const useUIRenderedPromise = action => {
-  if (!action) {
-    return defaultPromise;
-  }
-  const actionUIRenderedPromise = actionUIRenderedPromiseWeakMap.get(action);
-  if (actionUIRenderedPromise) {
-    return actionUIRenderedPromise;
-  }
-  let resolve;
-  const promise = new Promise(res => {
-    resolve = res;
-  });
-  promise.resolve = resolve;
-  actionUIRenderedPromiseWeakMap.set(action, promise);
-  return promise;
-};
-const isPlainObject$2 = obj => {
-  if (typeof obj !== "object" || obj === null) {
-    return false;
-  }
-  let proto = obj;
-  while (Object.getPrototypeOf(proto) !== null) {
-    proto = Object.getPrototypeOf(proto);
-  }
-  return Object.getPrototypeOf(obj) === proto || Object.getPrototypeOf(obj) === null;
-};
-
-const isSignal = (value) => {
-  return getSignalType(value) !== null;
-};
+    // No translation found — return key as-is (opaque fallback)
+    return key;
+  };
 
-const BRAND_SYMBOL = Symbol.for("preact-signals");
-const getSignalType = (value) => {
-  if (!value || typeof value !== "object") {
-    return null;
-  }
+  const format = (key, values, { lang = getActiveLang() } = {}) => {
+    const template = _getTemplate(key, lang);
+    return interpolateText(template, values);
+  };
 
-  if (value.brand !== BRAND_SYMBOL) {
-    return null;
-  }
+  const has = (key, { lang = getActiveLang() } = {}) => {
+    const resolvedLang = lang ? matchBestLang(lang, languageMap) : null;
+    if (resolvedLang) {
+      const translations = languageMap.get(resolvedLang);
+      if (translations && key in translations) {
+        return true;
+      }
+    }
+    const resolvedFallbackLang = getResolvedFallbackLang();
+    if (resolvedFallbackLang) {
+      const fallbackTranslations = languageMap.get(resolvedFallbackLang);
+      if (fallbackTranslations && key in fallbackTranslations) {
+        return true;
+      }
+    }
+    return false;
+  };
 
-  if (typeof value._fn === "function") {
-    return "computed";
-  }
+  // The i18n instance is itself a callable function
+  const i18n = (key, values, opts) => format(key, values, opts);
+  i18n.add = add;
+  i18n.addAll = addAll;
+  i18n.addLangKeys = addLangKeys;
+  i18n.has = has;
+  i18n.format = format;
+  i18n.languageMap = languageMap;
 
-  return "signal";
+  return i18n;
 };
 
-const MAX_ENTRIES = 5;
-
-const stringifyForDisplay = (
-  value,
-  maxDepth = 2,
-  currentDepth = 0,
-  options = {},
-) => {
-  const { asFunctionArgs = false } = options;
-  const indent = "  ".repeat(currentDepth);
-  const nextIndent = "  ".repeat(currentDepth + 1);
-
-  if (currentDepth >= maxDepth) {
-    return typeof value === "object" && value !== null
-      ? "[Object]"
-      : String(value);
-  }
-
-  if (value === null) {
-    return "null";
-  }
-  if (value === undefined) {
-    return "undefined";
-  }
-  if (typeof value === "string") {
-    return `"${value}"`;
-  }
-  if (typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-  if (typeof value === "function") {
-    return `[Function ${value.name || "anonymous"}]`;
-  }
-  if (value instanceof Date) {
-    return `Date(${value.toISOString()})`;
-  }
-  if (value instanceof RegExp) {
-    return value.toString();
+// Walk "fr-CA-variant" → "fr-CA" → "fr" until a registered lang is found
+const matchLang = (lang, languageMap) => {
+  if (languageMap.has(lang)) {
+    return lang;
   }
-
-  if (Array.isArray(value)) {
-    const openBracket = asFunctionArgs ? "(" : "[";
-    const closeBracket = asFunctionArgs ? ")" : "]";
-
-    if (value.length === 0) return `${openBracket}${closeBracket}`;
-
-    // Display arrays with only one element on a single line
-    if (value.length === 1) {
-      const item = stringifyForDisplay(
-        value[0],
-        maxDepth,
-        currentDepth + 1,
-        // Remove asFunctionArgs for nested calls
-        { ...options, asFunctionArgs: false },
-      );
-      return `${openBracket}${item}${closeBracket}`;
-    }
-
-    if (value.length > MAX_ENTRIES) {
-      const preview = value
-        .slice(0, MAX_ENTRIES)
-        .map(
-          (v) =>
-            `${nextIndent}${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
-        );
-      return `${openBracket}\n${preview.join(",\n")},\n${nextIndent}...${value.length - MAX_ENTRIES} more\n${indent}${closeBracket}`;
+  const parts = lang.split("-");
+  while (parts.length > 1) {
+    parts.pop();
+    const candidate = parts.join("-");
+    if (languageMap.has(candidate)) {
+      return candidate;
     }
-
-    const items = value.map(
-      (v) =>
-        `${nextIndent}${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
-    );
-    return `${openBracket}\n${items.join(",\n")}\n${indent}${closeBracket}`;
   }
+  return null;
+};
 
-  if (typeof value === "object") {
-    const signalType = getSignalType(value);
-    if (signalType) {
-      const signalValue = value.peek();
-      const prefix = signalType === "computed" ? "computed" : "signal";
-      return `${prefix}(${stringifyForDisplay(signalValue, maxDepth, currentDepth, { ...options, asFunctionArgs: false })})`;
-    }
-
-    const entries = Object.entries(value);
-    if (entries.length === 0) return "{}";
-
-    // ✅ Inclure les clés avec valeurs undefined/null
-    const allEntries = [];
-    for (const [key, val] of entries) {
-      allEntries.push([key, val]);
-    }
-
-    // Ajouter les clés avec undefined (que Object.entries omet)
-    const descriptor = Object.getOwnPropertyDescriptors(value);
-    for (const [key, desc] of Object.entries(descriptor)) {
-      if (desc.value === undefined && !entries.some(([k]) => k === key)) {
-        allEntries.push([key, undefined]);
-      }
-    }
-
-    // Display objects with only one key on a single line
-    if (allEntries.length === 1) {
-      const [key, val] = allEntries[0];
-      const valueStr = stringifyForDisplay(val, maxDepth, currentDepth + 1, {
-        ...options,
-        asFunctionArgs: false,
-      });
-      return `{ ${key}: ${valueStr} }`;
-    }
-
-    if (allEntries.length > MAX_ENTRIES) {
-      const preview = allEntries
-        .slice(0, MAX_ENTRIES)
-        .map(
-          ([k, v]) =>
-            `${nextIndent}${k}: ${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
-        );
-      return `{\n${preview.join(",\n")},\n${nextIndent}...${allEntries.length - MAX_ENTRIES} more\n${indent}}`;
+// lang can be a string or an ordered array of preference strings
+const matchBestLang = (lang, languageMap) => {
+  if (!lang) {
+    return null;
+  }
+  const candidates = Array.isArray(lang) ? lang : [lang];
+  for (const candidate of candidates) {
+    const match = matchLang(candidate, languageMap);
+    if (match) {
+      return match;
     }
-
-    const pairs = allEntries.map(
-      ([k, v]) =>
-        `${nextIndent}${k}: ${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
-    );
-    return `{\n${pairs.join(",\n")}\n${indent}}`;
   }
-
-  return String(value);
+  return null;
 };
 
-/*
- * Deep structural equality for arbitrary JS values — what `===` can't do but this
- * codebase constantly needs: memoization cache keys ({ id: 1 } equal to { id: 1 }),
- * effect/memo dependency checks, signal/store change detection, and action
- * parameter deduplication.
+/**
+ * The shared i18n instance holding every text @jsenv/navi components display
+ * on their own — validation messages, button labels, empty-list messages,
+ * relative time wording…
  *
- * Beyond recursive object/array comparison it covers the edge cases `===` gets
- * "wrong" for equality purposes: NaN equals NaN, Date compared by time value,
- * cycles don't loop (a set of the pairs being compared guards circular refs),
- * and same-type is required
- * before descending. Functions, signals, and objects with nothing enumerable to
- * compare (a Set, a Map, an element, a URL), are equal by reference only —
- * nothing in them says whether two are "the same". Cheap paths run first: reference
- * equality, then the identity short-circuit below, then array length before
- * element-by-element.
+ * It is navi's texts, not the application's: an app registers its own texts in
+ * its own `createI18n()` instance and reaches for `naviI18n` only to change
+ * what navi itself says, or to add a language navi does not ship. Keys here are
+ * opaque identifiers (`"list.empty"`), never the English sentence — the
+ * opposite of what an app is advised to do. `docs/i18n.md` explains why.
  *
- * SYMBOL_IDENTITY. Two *different* object instances can be declared "conceptually
- * the same" by sharing a SYMBOL_IDENTITY value; the comparison then treats them as
- * equal with no deep walk. This is what lets a spread copy ({ ...params, extra })
- * still count as the same params as the original, and lets objects reconstructed
- * across a serialization boundary be recognized as one entity — the cases where a
- * content comparison would be too slow, or too strict to see them as equal. Use
- * Symbol.for() so the marker is the same symbol across modules/contexts:
+ * The active language is read from `languagesSignal` (see lang_signal.js —
+ * combines the browser's own `navigator.languages`, an optional
+ * `setPreferredLanguage()` user override, and an optional
+ * `setSupportedLanguages()` app-wide allow-list), live on every lookup.
  *
- *   const id = Symbol.for("params");
- *   a[SYMBOL_IDENTITY] = id;
- *   b[SYMBOL_IDENTITY] = id;
- *   compareTwoJsValues(a, b); // true immediately, no property walk
+ * Built-in key namespaces, all overridable — the registrations below are the
+ * exhaustive list, read them to find the exact key to override:
+ *   - `"button.*"`     — Clear, Reset, Send, Open, Close, Cancel, Confirm…
+ *   - `"time.*"`       — relative time wording, duration unit symbols, date field placeholders
+ *   - `"spin.*"`       — the ends of a steppable range
+ *   - `"list.*"`       — empty/no-match/failed-rows messages
+ *   - `"badge_list.*"` — the "+[count] more" overflow badge
+ *   - `"constraint.*"` — every field validation message
+ *   - `"network_policy.*"` — what an action settles with when the policy kept it from the network
+ *
+ * Unit names get two derived keys, both optional: `<unit>__plural` and
+ * `<unit>__short`. `<Unit>`/`<Quantity>` fall back to the singular when the
+ * derived key is missing, and to `Intl.NumberFormat` when the unit itself is
+ * not registered at all — so only units Intl gets wrong need registering.
+ *
+ * @example
+ * import { naviI18n } from "@jsenv/navi";
+ *
+ * // Override a built-in text:
+ * naviI18n.add("time.ongoing", { fr: "En cours…" });
+ *
+ * // Teach navi a language it does not ship:
+ * naviI18n.addLangKeys("ja", { "list.empty": "項目がありません。" });
+ *
+ * // Register unit translations used by <Quantity>/<Unit>:
+ * naviI18n.addAll({
+ *   ticket:         { en: "ticket",  fr: "billet"  },
+ *   ticket__plural: { en: "tickets", fr: "billets" },
+ * });
  */
+const naviI18n = createI18n();
 
+naviI18n.addAll({
+  "button.clear": {
+    en: "Clear",
+    fr: "Effacer",
+  },
+  "button.reset": {
+    en: "Reset",
+    fr: "Réinitialiser",
+  },
+  "button.send": {
+    en: "Send",
+    fr: "Envoyer",
+  },
+  "button.open": {
+    en: "Open",
+    fr: "Ouvrir",
+  },
+  "button.close": {
+    en: "Close",
+    fr: "Fermer",
+  },
+  "button.cancel": {
+    en: "Cancel",
+    fr: "Annuler",
+  },
+  "button.define": {
+    en: "Define",
+    fr: "Définir",
+  },
+  "button.confirm": {
+    en: "Confirm",
+    fr: "Confirmer",
+  },
+  "confirm.message": {
+    en: "Are you sure you want to do this?",
+    fr: "Êtes-vous sûr de vouloir faire cette action ?",
+  },
+  "button.more_actions": {
+    en: "More actions",
+    fr: "Autres actions",
+  },
+  "button.remove": {
+    en: "Remove",
+    fr: "Retirer",
+  },
+});
 
-// Marks objects with a conceptual identity that transcends reference equality —
-// see the file comment. Symbol.for keeps it one shared symbol across modules.
-const SYMBOL_IDENTITY = Symbol.for("navi_object_identity");
-
-/**
- * Deeply compares two values for structural equality.
- *
- * @param {any} rootA - First value.
- * @param {any} rootB - Second value.
- * @param {object} [options]
- * @param {(a: any, b: any, keyOrIndex: any, recurse: (a: any, b: any) => boolean) => boolean} [options.keyComparator]
- *   Custom comparator for object properties / array elements. Receives the internal
- *   `compare` as its last argument so it can defer to the default behavior.
- * @param {boolean} [options.ignoreArrayOrder=false] - Compare arrays as multisets:
- *   equal when they contain the same elements regardless of order.
- * @param {Iterable<string>} [options.lightKeySet] - Object keys to compare first —
- *   cheaper or likelier-to-differ ones — to short-circuit before the remaining keys.
- * @returns {boolean} true if the values are deeply equal.
- */
-const compareTwoJsValues = (
-  rootA,
-  rootB,
-  { keyComparator, ignoreArrayOrder = false, lightKeySet } = {},
-) => {
-  const seenSet = new Set();
-  const compare = (a, b) => {
-    if (a === b) {
-      return true;
-    }
-    const aIsIsTruthy = Boolean(a);
-    const bIsTruthy = Boolean(b);
-    if (aIsIsTruthy && !bIsTruthy) {
-      return false;
-    }
-    if (!aIsIsTruthy && !bIsTruthy) {
-      // null, undefined, 0, false, NaN
-      if (isNaN(a) && isNaN(b)) {
-        return true;
-      }
-      return a === b;
-    }
-    const aType = typeof a;
-    const bType = typeof b;
-    if (aType !== bType) {
-      return false;
-    }
-    if (aType === "function") {
-      // Not the same function (reference equality came first), and nothing in
-      // a function says whether two of them do the same thing.
-      return false;
-    }
-    const aIsPrimitive =
-      a === null || (aType !== "object" && aType !== "function");
-    const bIsPrimitive =
-      b === null || (bType !== "object" && bType !== "function");
-    if (aIsPrimitive !== bIsPrimitive) {
-      return false;
-    }
-    if (aIsPrimitive && bIsPrimitive) {
-      return a === b;
-    }
-    // Back on something still being compared: a cycle. No loop, and no answer
-    // either — equal by a route that never ends is not equal.
-    if (seenSet.has(a) || seenSet.has(b)) {
-      return false;
-    }
-    // Held only while a and b are being compared, not for the rest of the
-    // walk: the same object is rightly met again elsewhere — in an unordered
-    // array every element of a is tried against every element of b.
-    seenSet.add(a);
-    seenSet.add(b);
-    const result = compareComposite(a, b);
-    seenSet.delete(a);
-    seenSet.delete(b);
-    return result;
-  };
-  const compareComposite = (a, b) => {
-    const aIsArray = Array.isArray(a);
-    const bIsArray = Array.isArray(b);
-    if (aIsArray !== bIsArray) {
-      return false;
-    }
-    if (aIsArray) {
-      // compare arrays
-      if (a.length !== b.length) {
-        return false;
-      }
-      if (ignoreArrayOrder) {
-        // Unordered array comparison: each element in 'a' must have a match in 'b'
-        const usedIndices = new Set();
-        for (let i = 0; i < a.length; i++) {
-          const aValue = a[i];
-          let foundMatch = false;
-
-          for (let j = 0; j < b.length; j++) {
-            if (usedIndices.has(j)) {
-              continue; // Already matched with another element
-            }
-            const bValue = b[j];
-            if (compareAt(aValue, bValue, i)) {
-              foundMatch = true;
-              usedIndices.add(j);
-              break;
-            }
-          }
-          if (!foundMatch) {
-            return false;
-          }
-        }
-        return true;
-      }
-      // Ordered array comparison (original behavior)
-      let i = 0;
-      while (i < a.length) {
-        const aValue = a[i];
-        const bValue = b[i];
-        if (!compareAt(aValue, bValue, i)) {
-          return false;
-        }
-        i++;
-      }
-      return true;
-    }
-    // compare objects
-    const aIdentity = a[SYMBOL_IDENTITY];
-    const bIdentity = b[SYMBOL_IDENTITY];
-    if (
-      aIdentity === bIdentity &&
-      SYMBOL_IDENTITY in a &&
-      SYMBOL_IDENTITY in b
-    ) {
-      return true;
-    }
-    // Date objects must be compared by time value, not by enumerable keys (which are empty)
-    const aIsDate = a instanceof Date;
-    const bIsDate = b instanceof Date;
-    if (aIsDate !== bIsDate) {
-      return false;
-    }
-    if (aIsDate) {
-      return a.getTime() === b.getTime();
-    }
-    // A signal is a source of truth, not a value: two of them holding the same
-    // thing right now say nothing about the next tick, and one may change while
-    // the other does not. Their internals (the current value, a version
-    // counter) are enumerable, so without this they would be walked and two
-    // unrelated signals would pass for one — a params signal owned by one
-    // screen would then be handed the action bound to another's.
-    if (isSignal(a) || isSignal(b)) {
-      return false;
-    }
-    const aKeys = Object.keys(a);
-    const bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length) {
-      return false;
-    }
-    if (aKeys.length === 0 && (!isPlainObject$1(a) || !isPlainObject$1(b))) {
-      // A Set, a Map, an element, a URL: nothing enumerable to tell two of them
-      // apart, so they are the same one or they are not — and they are not,
-      // reference equality came first.
-      return false;
-    }
-    if (lightKeySet) {
-      // compare light keys first, then remaining keys
-      // (optimization for cases where some keys are more likely to differ and/or faster to compare)
-      const keySet = new Set(aKeys);
-      for (const lightKey of lightKeySet) {
-        const aValue = a[lightKey];
-        const bValue = b[lightKey];
-        if (!compareAt(aValue, bValue, lightKey)) {
-          return false;
-        }
-        keySet.delete(lightKey);
-      }
-      for (const key of keySet) {
-        const aValue = a[key];
-        const bValue = b[key];
-        if (!compareAt(aValue, bValue, key)) {
-          return false;
-        }
-      }
-    } else {
-      for (const key of aKeys) {
-        const aValue = a[key];
-        const bValue = b[key];
-        if (!compareAt(aValue, bValue, key)) {
-          return false;
-        }
-      }
-    }
-    return true;
-  };
-  const compareAt = keyComparator
-    ? (a, b, keyOrArrayIndex) => keyComparator(a, b, keyOrArrayIndex, compare)
-    : compare;
-
-  return compare(rootA, rootB);
-};
-
-const isPlainObject$1 = (value) => {
-  const prototype = Object.getPrototypeOf(value);
-  return prototype === Object.prototype || prototype === null;
-};
-
-const debounceSignal = (
-  signalToDebounce,
-  { delay = 300, deepCompare = true } = {},
-) => {
-  let timeoutId;
-  let latestValue = signalToDebounce.peek();
-  const debouncedSignal = signal(latestValue);
-
-  effect(() => {
-    const value = signalToDebounce.value;
-    const debouncedValue = debouncedSignal.peek();
-    if (
-      deepCompare
-        ? compareTwoJsValues(value, debouncedValue)
-        : value === debouncedValue
-    ) {
-      return;
-    }
-    clearTimeout(timeoutId);
-    latestValue = value;
-    timeoutId = setTimeout(() => {
-      debouncedSignal.value = latestValue;
-    }, delay);
-  });
-
-  debouncedSignal.flush = () => {
-    clearTimeout(timeoutId);
-    debouncedSignal.value = latestValue;
-  };
-  // Whoever reads the debounced value gets the previous one during the delay,
-  // with nothing saying a newer one is on its way. This says it.
-  debouncedSignal.settlingSignal = computed(() => {
-    return !compareTwoJsValues(signalToDebounce.value, debouncedSignal.value);
-  });
-
-  return debouncedSignal;
-};
-
-const debouncedSignalCache = new WeakMap();
-
-/**
- * The one debounced signal for a given source and delay.
- *
- * Two callers asking the same question of the same signal must wait on the same
- * answer: a debounced signal per caller is a timer per caller, and the actions
- * derived from them are then several instances of what is one request.
- */
-const getDebouncedSignal = (signalToDebounce, delay) => {
-  let byDelay = debouncedSignalCache.get(signalToDebounce);
-  if (!byDelay) {
-    byDelay = new Map();
-    debouncedSignalCache.set(signalToDebounce, byDelay);
-  }
-  const existing = byDelay.get(delay);
-  if (existing) {
-    return existing;
-  }
-  const debouncedSignal = debounceSignal(signalToDebounce, { delay });
-  byDelay.set(delay, debouncedSignal);
-  return debouncedSignal;
-};
-
-/**
- * jsenv/navi - createJsValueWeakMap
- *
- * Key/value cache with true ephemeron behavior and deep equality support.
- *
- * Features:
- * - Mutual retention: key keeps value alive, value keeps key alive
- * - Deep equality: different objects with same content are treated as identical keys
- * - Automatic GC: entries are eligible for collection when unreferenced
- * - Iteration support: can iterate over live entries for deep equality lookup
- *
- * Implementation:
- * - Dual WeakMap (key->value, value->key) provides ephemeron behavior
- * - WeakRef registry enables iteration without preventing GC
- * - Primitives stored in Map (permanent retention - avoid for keys)
- *
- * Use case: Action caching where params (key) and action (value) should have
- * synchronized lifetimes while allowing natural garbage collection.
- */
-
+// Default built-in translations — apps can override any key via add()
+naviI18n.addAll({
+  "time.less_than_minute": {
+    en: "in less than a minute",
+    fr: "dans moins d'une minute",
+    de: "in weniger als einer Minute",
+    es: "en menos de un minuto",
+    it: "in meno di un minuto",
+    pt: "em menos de um minuto",
+    nl: "over minder dan een minuut",
+  },
+  "time.ongoing": {
+    en: "Ongoing",
+    fr: "En cours",
+    de: "Laufend",
+    es: "En curso",
+    it: "In corso",
+    pt: "Em andamento",
+    nl: "Bezig",
+  },
+  // [day] and [time] are replaced at runtime with the localized day/time strings
+  "time.tomorrow_at": {
+    en: "[day] at [time]",
+    fr: "[day] à [time]",
+    de: "[day] um [time]",
+    es: "[day] a las [time]",
+    it: "[day] alle [time]",
+    pt: "[day] às [time]",
+    nl: "[day] om [time]",
+  },
+  // [duration] is replaced at runtime with the formatted duration string (e.g. "1h30", "45 min")
+  "time.in_duration": {
+    en: "in [duration]",
+    fr: "dans [duration]",
+    de: "in [duration]",
+    es: "en [duration]",
+    it: "tra [duration]",
+    pt: "em [duration]",
+    nl: "over [duration]",
+  },
+  // Substituted in place of the "0 heure(s)" part of an Intl-generated
+  // duration string when <Time type="time" format="long"> renders midnight
+  // — see time.jsx's own TimeTime for why midnight can't just fall through
+  // to formatMinuteDuration like every other hour does, and how this word
+  // gets spliced in (formatToParts, not string concatenation) so the rest
+  // of the sentence (conjunction, minutes) still comes out in whatever
+  // grammar/word order this language's own Intl.DurationFormat produces.
+  // Languages without an entry here fall back to that language's own
+  // literal "0 heure(s)" wording instead (see TimeTime), never to this key.
+  "time.midnight": {
+    en: "midnight",
+    fr: "minuit",
+    de: "Mitternacht",
+    es: "medianoche",
+    it: "mezzanotte",
+    pt: "meia-noite",
+    nl: "middernacht",
+  },
+  // What <TimeRange> writes between the two bounds of a span — "8h–10h",
+  // "11 mai – 14 mai". An en dash, the mark for a span, not a hyphen.
+  "time.range_separator": {
+    en: "–",
+    fr: "–",
+    de: "–",
+    es: "–",
+    it: "–",
+    pt: "–",
+    nl: "–",
+  },
+  // Compact duration unit symbols used in "1h30", "45min", "2d", etc.
+  "time.duration.year_symbol": {
+    en: "y",
+    fr: "a",
+    de: "J",
+    es: "a",
+    it: "a",
+    pt: "a",
+    nl: "j",
+    ja: "年",
+    zh: "年",
+    ko: "년",
+  },
+  "time.duration.month_symbol": {
+    en: "mo",
+    fr: "mo",
+    de: "Mo",
+    es: "mo",
+    it: "mo",
+    pt: "mo",
+    nl: "mo",
+    ja: "月",
+    zh: "月",
+    ko: "월",
+  },
+  "time.duration.week_symbol": {
+    en: "w",
+    fr: "sem",
+    de: "W",
+    es: "sem",
+    it: "sett",
+    pt: "sem",
+    nl: "w",
+    ja: "週",
+    zh: "周",
+    ko: "주",
+  },
+  "time.duration.day_symbol": {
+    en: "d",
+    fr: "j",
+    de: "T",
+    es: "d",
+    it: "g",
+    pt: "d",
+    nl: "d",
+    ja: "日",
+    zh: "天",
+    ko: "일",
+  },
+  "time.duration.hour_symbol": {
+    en: "h",
+    fr: "h",
+    de: "h",
+    es: "h",
+    it: "h",
+    pt: "h",
+    nl: "u",
+    ja: "時間",
+    zh: "小时",
+    ko: "시간",
+  },
+  "time.duration.minute_symbol": {
+    en: "min",
+    fr: "min",
+    de: "min",
+    es: "min",
+    it: "min",
+    pt: "min",
+    nl: "min",
+    ja: "分",
+    zh: "分",
+    ko: "분",
+  },
+  "time.duration.second_symbol": {
+    en: "s",
+    fr: "s",
+    de: "s",
+    es: "s",
+    it: "s",
+    pt: "s",
+    nl: "s",
+    ja: "秒",
+    zh: "秒",
+    ko: "초",
+  },
+  "time.duration.millisecond_symbol": {
+    en: "ms",
+    fr: "ms",
+    de: "ms",
+    es: "ms",
+    it: "ms",
+    pt: "ms",
+    nl: "ms",
+    ja: "ms",
+    zh: "ms",
+    ko: "ms",
+  },
+});
 
-const createJsValueWeakMap = () => {
-  // Core ephemeron maps for mutual retention
-  const keyToValue = new WeakMap(); // key -> value
-  const valueToKey = new WeakMap(); // value -> key
+// Spin messages — the ends of what one steps through, said without naming
+// what it is made of: the same words fit days, months, pages or sizes.
+naviI18n.addAll({
+  "spin.previous": {
+    en: "Previous",
+    fr: "Précédent",
+  },
+  "spin.next": {
+    en: "Next",
+    fr: "Suivant",
+  },
+  "spin.nothing_before": {
+    en: "No item before this one.",
+    fr: "Pas d'élément avant celui-ci.",
+  },
+  "spin.nothing_after": {
+    en: "No item after this one.",
+    fr: "Pas d'élément après celui-ci.",
+  },
+});
 
-  // Registry for iteration/deep equality (holds WeakRefs)
-  const keyRegistry = new Set(); // Set of WeakRef(key)
+// Time spin messages — what a clock writes between an hour and its minutes,
+// and how the two ends of a span are named.
+naviI18n.addAll({
+  "time.hour_separator": {
+    en: ":",
+    fr: "h",
+  },
+  "time.hour_label": {
+    en: "Hours",
+    fr: "Heures",
+  },
+  "time.minute_label": {
+    en: "Minutes",
+    fr: "Minutes",
+  },
+  "time_range.from": {
+    en: "From",
+    fr: "De",
+  },
+  "time_range.to": {
+    en: "to",
+    fr: "à",
+  },
+});
 
-  // Primitive cache
-  const primitiveCache = new Map();
+// List messages — override any key to customize list messages
+naviI18n.addAll({
+  "list.empty": {
+    en: "No items in this list.",
+    fr: "Aucun élément dans cette liste.",
+  },
+  "list.no_match": {
+    en: "No item matches this search.",
+    fr: "Aucun élément ne correspond à cette recherche.",
+  },
+  "list.no_match_rest_shown": {
+    en: "No item matches this search. The rest is shown below.",
+    fr: "Aucun élément ne correspond à cette recherche. Le reste est affiché ci-dessous.",
+  },
+  "list.rows_failed": {
+    en: "These elements could not be loaded.",
+    fr: "Ces élements n'ont pas pu être chargées.",
+  },
+  "list.rows_retry": {
+    en: "Retry",
+    fr: "Réessayer",
+  },
+});
 
-  function cleanupKeyRegistry() {
-    for (const keyRef of keyRegistry) {
-      if (keyRef.deref() === undefined) {
-        keyRegistry.delete(keyRef);
-      }
-    }
-  }
-
-  return {
-    *[Symbol.iterator]() {
-      cleanupKeyRegistry();
-      for (const keyRef of keyRegistry) {
-        const key = keyRef.deref();
-        if (key && keyToValue.has(key)) {
-          yield [key, keyToValue.get(key)];
-        }
-      }
-      for (const [k, v] of primitiveCache) {
-        yield [k, v];
-      }
-    },
-
-    get(key) {
-      const isObject =
-        key && (typeof key === "object" || typeof key === "function");
-      if (isObject) {
-        // Fast path: exact key match
-        if (keyToValue.has(key)) {
-          return keyToValue.get(key);
-        }
-
-        // Slow path: deep equality search
-        cleanupKeyRegistry();
-        for (const keyRef of keyRegistry) {
-          const existingKey = keyRef.deref();
-          if (existingKey && compareTwoJsValues(existingKey, key)) {
-            return keyToValue.get(existingKey);
-          }
-        }
-        return undefined;
-      }
-      return primitiveCache.get(key);
-    },
-
-    set(key, value) {
-      const isObject =
-        key && (typeof key === "object" || typeof key === "function");
-      if (isObject) {
-        cleanupKeyRegistry();
-
-        // Remove existing deep-equal key
-        for (const keyRef of keyRegistry) {
-          const existingKey = keyRef.deref();
-          if (existingKey && compareTwoJsValues(existingKey, key)) {
-            const existingValue = keyToValue.get(existingKey);
-            keyToValue.delete(existingKey);
-            valueToKey.delete(existingValue);
-            keyRegistry.delete(keyRef);
-            break;
-          }
-        }
-
-        // Set ephemeron pair
-        keyToValue.set(key, value);
-        valueToKey.set(value, key);
-        keyRegistry.add(new WeakRef(key));
-      } else {
-        primitiveCache.set(key, value);
-      }
-    },
-
-    delete(key) {
-      const isObject =
-        key && (typeof key === "object" || typeof key === "function");
-      if (isObject) {
-        cleanupKeyRegistry();
-
-        // Try exact match first
-        if (keyToValue.has(key)) {
-          const value = keyToValue.get(key);
-          keyToValue.delete(key);
-          valueToKey.delete(value);
-
-          // Remove from registry
-          for (const keyRef of keyRegistry) {
-            if (keyRef.deref() === key) {
-              keyRegistry.delete(keyRef);
-              break;
-            }
-          }
-          return true;
-        }
-
-        // Try deep equality
-        for (const keyRef of keyRegistry) {
-          const existingKey = keyRef.deref();
-          if (existingKey && compareTwoJsValues(existingKey, key)) {
-            const value = keyToValue.get(existingKey);
-            keyToValue.delete(existingKey);
-            valueToKey.delete(value);
-            keyRegistry.delete(keyRef);
-            return true;
-          }
-        }
-        return false;
-      }
-      return primitiveCache.delete(key);
-    },
-
-    getStats: () => {
-      cleanupKeyRegistry();
-      const aliveKeys = Array.from(keyRegistry).filter((ref) =>
-        ref.deref(),
-      ).length;
-
-      return {
-        ephemeronPairs: {
-          total: keyRegistry.size,
-          alive: aliveKeys,
-          note: "True ephemeron: key ↔ value mutual retention via dual WeakMap",
-        },
-        primitive: {
-          total: primitiveCache.size,
-          note: "Primitive keys never GC'd",
-        },
-      };
-    },
-  };
-};
-
-const MERGE_AS_PRIMITIVE_SYMBOL = Symbol("navi_merge_as_primitive");
-
-const mergeTwoJsValues = (firstValue, secondValue) => {
-  const firstIsPrimitive =
-    firstValue === null ||
-    typeof firstValue !== "object" ||
-    MERGE_AS_PRIMITIVE_SYMBOL in firstValue;
-
-  if (firstIsPrimitive) {
-    return secondValue;
-  }
-  const secondIsPrimitive =
-    secondValue === null ||
-    typeof secondValue !== "object" ||
-    MERGE_AS_PRIMITIVE_SYMBOL in secondValue;
-  if (secondIsPrimitive) {
-    return secondValue;
-  }
-  const objectMerge = {};
-  const firstKeys = Object.keys(firstValue);
-  const secondKeys = Object.keys(secondValue);
-  let hasChanged = false;
-
-  // First loop: check for keys in first object and recursively merge with second
-  for (const key of firstKeys) {
-    const firstValueForKey = firstValue[key];
-    const secondHasKey = secondKeys.includes(key);
-
-    if (secondHasKey) {
-      const secondValueForKey = secondValue[key];
-      const mergedValue = mergeTwoJsValues(firstValueForKey, secondValueForKey);
-      objectMerge[key] = mergedValue;
-      if (mergedValue !== firstValueForKey) {
-        hasChanged = true;
-      }
-    } else {
-      objectMerge[key] = firstValueForKey;
-    }
-  }
-
-  for (const key of secondKeys) {
-    if (firstKeys.includes(key)) {
-      continue;
-    }
-    objectMerge[key] = secondValue[key];
-    hasChanged = true;
-  }
-
-  if (!hasChanged) {
-    return firstValue;
-  }
-  return objectMerge;
-};
-
-/**
- * Creates an effect that uses WeakRef to prevent garbage collection of referenced values.
- *
- * This utility is useful when you want to create reactive effects that watch objects
- * without preventing those objects from being garbage collected. If any of the referenced
- * values is collected, the effect automatically disposes itself.
- *
- * @param {Array} values - Array of values to create weak references for
- * @param {Function} callback - Function to call when the effect runs, receives dereferenced values as arguments
- * @returns {Function} dispose - Function to manually dispose the effect
- *
- * @example
- * ```js
- * const objectA = { name: "A" };
- * const objectB = { name: "B" };
- * const prefixSignal = signal('demo');
- *
- * const dispose = weakEffect([objectA, objectB], (a, b) => {
- *   const prefix = prefixSignal.value
- *   console.log(prefix, a.name, b.name);
- * });
- *
- * // Effect will auto-dispose if objectA or objectB where garbage collected
- * // or can be manually disposed:
- * dispose();
- * ```
- */
-const weakEffect = (values, callback) => {
-  const weakRefSet = new Set();
-  for (const value of values) {
-    weakRefSet.add(new WeakRef(value));
-  }
-  const dispose = effect(() => {
-    const values = [];
-    for (const weakRef of weakRefSet) {
-      const value = weakRef.deref();
-      if (value === undefined) {
-        dispose();
-        return;
-      }
-      values.push(value);
-    }
-    callback(...values);
-  });
-  return dispose;
-};
-
-/**
- * Interpolates a template string, replacing `[key]` placeholders with values.
- *
- * Usable on its own — no i18n instance required — whenever a sentence should
- * stay readable as one string instead of being cut into JSX expressions or
- * concatenations. `<Interpolate>` is the JSX form of this function, and
- * `createI18n` runs every translation through it. See `docs/i18n.md`.
- *
- * `[]` was chosen as the placeholder delimiter (rather than `{}` or `{{}}`)
- * because it does not conflict with JSX syntax, JavaScript template literals,
- * or common punctuation in translated strings.
- *
- * @param {string} template
- *   e.g. `"Hello [name], you have [count] messages"`. A non-string is returned
- *   untouched, as is any template when `replacements` is missing.
- * @param {object} [replacements]
- *   Values keyed by placeholder name. A key can be:
- *   - a direct name — `[name]` ← `{ name: "Alice" }`
- *   - a dot-path — `[item.label]` ← `{ item: { label: "Book" } }` (a literal
- *     `"item.label"` key wins over the path)
- *
- *   A value that is a function is called at that point, so an expensive or
- *   lazily-known replacement is only computed when the placeholder is actually
- *   present in this language's template.
- *
- *   A placeholder with no matching value is left in the output as-is
- *   (`"[name]"`), making the gap visible rather than silently empty.
- * @param {object} [options]
- * @param {boolean} [options.allowJsx=false]
- *   Allow VNode replacements (what `<Interpolate>` passes). Without it, a VNode
- *   value warns and is coerced to a string.
- * @returns {string|import("preact").VNode}
- *   A plain string when every replacement is a string, a Preact fragment when
- *   at least one VNode was interpolated with `allowJsx`.
- */
-const interpolateText = (
-  template,
-  replacements,
-  { allowJsx = false } = {},
-) => {
-  if (!replacements || typeof template !== "string") {
-    return template;
-  }
-  const parts = template.split(/(\[[^\]]+\])/);
-  let hasVnode = false;
-  const resolved = [];
-  for (const part of parts) {
-    const match = part.match(/^\[([^\]]+)\]$/);
-    if (!match) {
-      resolved.push(part);
-      continue;
-    }
-    const key = match[1];
-    let value = resolveValue(replacements, key, part);
-    if (typeof value === "function") {
-      value = value();
-    }
-    if (isValidElement(value)) {
-      if (allowJsx) {
-        hasVnode = true;
-      } else {
-        console.warn(
-          `interpolateText: VNode passed for placeholder [${match[1]}] but allowJsx is false — value coerced to string`,
-        );
-      }
-    }
-    resolved.push(value);
-  }
-  if (!hasVnode) {
-    return resolved.join("");
-  }
-  // h(Fragment) instead of JSX (<>{resolved}</>) to keep this file as .js
-  return h(Fragment, null, resolved);
-};
-
-// Resolves a placeholder key against the replacements object.
-// 1. Direct lookup: replacements["item.name"]
-// 2. Dot-path lookup: replacements["item"]["name"]
-// 3. Fallback: the original placeholder string (e.g. "[item.name]")
-const resolveValue = (replacements, key, fallback) => {
-  if (key in replacements) {
-    return replacements[key];
-  }
-  const dotIndex = key.indexOf(".");
-  if (dotIndex !== -1) {
-    const head = key.slice(0, dotIndex);
-    const tail = key.slice(dotIndex + 1);
-    const parent = replacements[head];
-    if (parent && typeof parent === "object") {
-      const nested = parent[tail];
-      if (nested !== undefined) {
-        return nested;
-      }
-    }
-  }
-  return fallback;
-};
-
-const DEFAULT_LANG = "en";
-
-/**
- * The browser's own language preferences, most preferred first — read from
- * `navigator.languages` (falling back to the single `navigator.language`,
- * then to DEFAULT_LANG when neither is available, e.g. during SSR). Kept as
- * its own signal, independent from what this app actually supports — see
- * `supportedLanguagesSignal` below for the allow-list that filters it, and
- * `languagesSignal` for the final, ready-to-use combination of the two (plus
- * `preferredLanguageSignal`).
- */
-const getRuntimeLanguages = () => {
-  if (typeof window === "undefined") {
-    return [DEFAULT_LANG];
-  }
-  const { navigator } = window;
-  if (typeof navigator === "undefined") {
-    return [DEFAULT_LANG];
-  }
-  const { languages } = navigator;
-  if (Array.isArray(languages) && languages.length > 0) {
-    return languages;
-  }
-  const { language } = navigator;
-  if (typeof language === "string") {
-    return [language];
-  }
-  return [DEFAULT_LANG];
-};
-
-const runtimeLanguagesSignal = signal(getRuntimeLanguages());
-
-if (typeof window !== "undefined") {
-  window.addEventListener("languagechange", () => {
-    runtimeLanguagesSignal.value = getRuntimeLanguages();
-  });
-}
-
-/**
- * The languages this app actually offers, e.g. `["en", "fr"]` — an allow-list
- * `languagesSignal` below filters everything else against (runtime languages the
- * browser reports, and `preferredLanguageSignal`'s own override), so a site
- * that only supports English/French never ends up resolving to German just
- * because that happens to be the browser's or the user's own preference.
- *
- * `null` (the default) means no restriction at all: every language the
- * browser/user prefers is allowed through.
- */
-const supportedLanguagesSignal = signal(null);
-
-/**
- * @param {string[]|null} languages - e.g. `["en", "fr"]`. Pass `null`/`[]`
- *   to lift the restriction again (allow everything).
- */
-const setSupportedLanguages = (languages) => {
-  supportedLanguagesSignal.value =
-    languages && languages.length ? languages : null;
-};
-
-/**
- * A single language the user explicitly chose (e.g. via an in-app language
- * picker), overriding whatever the browser itself reports — takes priority
- * over `runtimeLanguagesSignal` in `languagesSignal` below, but is still subject
- * to `supportedLanguagesSignal`'s own allow-list.
- *
- * Deliberately a single language, not an ordered list: reordering *among*
- * several preferred languages is real complexity real users essentially
- * never want — the practical need `languagesSignal` needs to serve is "let this
- * one user pick their one preferred language instead of the browser's",
- * nothing more.
- */
-const preferredLanguageSignal = signal(null);
-
-/**
- * @param {string|null} language - BCP 47 tag, e.g. "fr". Pass `null` to
- *   go back to following the browser's own language.
- */
-const setPreferredLanguage = (language) => {
-  preferredLanguageSignal.value = language || null;
-};
-
-const getPrimarySubtag = (lang) => lang.split("-")[0];
-
-const isLanguageSupported = (lang, supportedLanguages) => {
-  const primarySubtag = getPrimarySubtag(lang);
-  return supportedLanguages.some(
-    (supportedLanguage) =>
-      getPrimarySubtag(supportedLanguage) === primarySubtag,
-  );
-};
-
-/**
- * The ordered, ready-to-use language preference list every navi
- * component/util defaults to (naviI18n, formatNumber, the Time components,
- * validation messages…), live on every read. Combines, in priority order:
- *
- * 1. `preferredLanguageSignal` (the user's own explicit pick, if any)
- * 2. `runtimeLanguagesSignal` (the browser's own ordered preferences)
- *
- * then filters the result through `supportedLanguagesSignal` (if set) so
- * only languages this app actually offers ever come out — e.g. a browser
- * preferring `["de", "fr", "en"]` on a site that only supports `["en",
- * "fr"]` resolves to `["fr", "en"]`, never touching German. If filtering
- * would leave nothing at all (none of the browser's/user's preferences are
- * supported), falls back to `supportedLanguagesSignal` itself so callers
- * still get *something* usable rather than an empty array.
- *
- * Consumers that accept either a single lang or an ordered array (this
- * package's own `matchBestLang`/`createI18n`, and native `Intl.NumberFormat`/
- * `Intl.DateTimeFormat`) can pass this straight through: anything not
- * covered by the first entry falls through to the next, rather than
- * jumping straight to an unrelated default like "en".
- */
-const languagesSignal = computed(() => {
-  const preferredLanguage = preferredLanguageSignal.value;
-  const runtimeLanguages = runtimeLanguagesSignal.value;
-  const supportedLanguages = supportedLanguagesSignal.value;
-
-  const orderedLanguages = preferredLanguage
-    ? [preferredLanguage, ...runtimeLanguages]
-    : runtimeLanguages;
-  const dedupedLanguages = [...new Set(orderedLanguages)];
-
-  if (!supportedLanguages) {
-    return dedupedLanguages;
-  }
-  const filteredLanguages = dedupedLanguages.filter((lang) =>
-    isLanguageSupported(lang, supportedLanguages),
-  );
-  return filteredLanguages.length > 0 ? filteredLanguages : supportedLanguages;
-});
-
-/**
- * Creates a lightweight i18n instance: a central place where an app declares
- * its texts once and reads them back translated into the active language.
- *
- * Worth using even in a single-language app — one registry beats strings
- * scattered across components, and adding a second language later becomes a
- * data change instead of a refactor. See `docs/i18n.md` for how to choose
- * between the two key styles below and how this relates to `naviI18n`.
- *
- * @param {object} [options]
- * @param {string} [options.keyLang]
- *   When set, each key also serves as its own translation for `keyLang`.
- *   This allows writing keys directly in that language (typically the language
- *   the app is written in) so only *other* languages need registering:
- *
- *   ```js
- *   const i18n = createI18n({ keyLang: "en" });
- *   i18n.add("Hello [name]!", { fr: "Bonjour [name] !" });
- *   i18n("Hello [name]!", { name: "Alice" }, { lang: "en" }); // "Hello Alice!"
- *   i18n("Hello [name]!", { name: "Alice" }, { lang: "fr" }); // "Bonjour Alice !"
- *   ```
- *
- *   `keyLang` only applies to keys passed to `add()`/`addAll()`; a key never
- *   registered stays opaque and comes back as-is.
- *
- *   Without `keyLang`, keys are opaque identifiers and every language
- *   (including the one the app was written in) must be registered explicitly:
- *
- *   ```js
- *   const i18n = createI18n();
- *   i18n.add("greeting", { en: "Hello [name]!", fr: "Bonjour [name] !" });
- *   i18n("greeting", { name: "Alice" }, { lang: "en" }); // "Hello Alice!"
- *   ```
- *
- * @param {string} [options.fallbackLang]
- *   Language consulted when the active language has no translation for a key
- *   — per key, not per language: a partially translated language falls through
- *   to `fallbackLang` only for the keys it is missing. Without it, a missing
- *   translation returns the key itself.
- *
- * @param {string|string[]} [options.runtimeLang]
- *   The active language (BCP 47 tag or ordered array of tags) — named
- *   "runtime" rather than "system" because there is no actual access to the
- *   OS/user's system language from a browser, only `navigator.languages` (or
- *   an explicit override) at runtime. Defaults to `languagesSignal.value`, read
- *   fresh on every `format()`/`has()` call (not frozen at creation time) —
- *   so overriding the language app-wide via `setPreferredLanguage()`/
- *   `setSupportedLanguages()` (see lang_signal.js) is picked up here too.
- *   Passing an explicit `runtimeLang` opts out of that and stays fixed for
- *   this instance's whole lifetime.
- *
- * ---
- *
- * ## Registration
- *
- * **`i18n.add(key, { lang: "translation" })`** — one key, multiple languages.
- *
- * **`i18n.addAll({ key: { lang: "translation" }, ... })`** — multiple keys at once.
- *
- * **`i18n.addLangKeys(lang, { key: "translation", ... })`** — full language pack
- * (useful when loading a JSON translation file).
- *
- * All three accumulate: registering a key that already exists overwrites that
- * one key and leaves the rest of the language untouched. This is what lets an
- * app override a single built-in navi text without redeclaring the others.
- *
- * A regional variant (e.g. `"fr-CA"`) automatically inherits all keys from its
- * parent (`"fr"`) that it does not explicitly override:
- * ```js
- * i18n.addLangKeys("fr", { hello: "Bonjour !" });
- * i18n.addLangKeys("fr-CA", { hello: "Allo !" }); // other "fr" keys inherited
- * ```
- * Inheritance is resolved at registration time, so register the parent first.
- *
- * ---
- *
- * ## Reading
- *
- * **`i18n(key, values?, { lang? })`** — the translation for `key`, with
- * `[placeholder]` occurrences replaced from `values` (see `interpolateText`).
- * Returns `key` itself when nothing matches, so an untranslated string still
- * renders something readable. `i18n.format` is an alias of this call.
- *
- * **`i18n.has(key, { lang? })`** — whether a translation genuinely exists,
- * i.e. how to tell "no translation" apart from "translation equal to the key".
- *
- * @returns {Function & { add, addAll, addLangKeys, has, format, languageMap }}
- */
-const createI18n = ({ keyLang, fallbackLang, runtimeLang } = {}) => {
-  const languageMap = new Map();
-  // Bumped by addLangKeys — the only thing besides the active lang itself
-  // that could change what getActiveLang()/getResolvedFallbackLang() below
-  // resolve to, so it's what invalidates their own small caches.
-  let languageMapVersion = 0;
-
-  // Without an explicit runtimeLang, languagesSignal.value is re-read fresh on
-  // every call rather than frozen here via languagesSignal.peek() — freezing it
-  // would silently ignore setPreferredLanguage()/setSupportedLanguages() (see
-  // lang_signal.js) for the rest of this instance's life.
-  const hasExplicitRuntimeLang = runtimeLang !== undefined;
-
-  // matchBestLang does real work (a Map lookup per candidate, a possible
-  // "fr-CA" → "fr" split-and-retry loop) — worth skipping on every single
-  // format()/has() call in the common case, since what it resolves to only
-  // ever changes when languageMap itself changes (addLangKeys) or, for the
-  // non-explicit case, when languagesSignal.value itself changes (preferred
-  // language, supported languages, or "languagechange" — see lang_signal.js,
-  // languagesSignal is a computed() so its reference is stable when none of its
-  // own dependencies actually changed) — comparing those two cheaply
-  // (===) is enough to know the cached result below is still valid.
-  let cachedActiveLang;
-  let cachedActiveLangRuntimeLang;
-  let cachedActiveLangVersion = -1;
-  const getActiveLang = () => {
-    const currentRuntimeLang = hasExplicitRuntimeLang
-      ? runtimeLang
-      : languagesSignal.value;
-    if (
-      cachedActiveLangVersion === languageMapVersion &&
-      cachedActiveLangRuntimeLang === currentRuntimeLang
-    ) {
-      return cachedActiveLang;
-    }
-    cachedActiveLang = matchBestLang(currentRuntimeLang, languageMap);
-    cachedActiveLangVersion = languageMapVersion;
-    cachedActiveLangRuntimeLang = currentRuntimeLang;
-    return cachedActiveLang;
-  };
-
-  // fallbackLang is a plain, never-reactive option set once at creation —
-  // its own resolution only ever needs recomputing when languageMap does.
-  let cachedResolvedFallbackLang;
-  let cachedResolvedFallbackLangVersion = -1;
-  const getResolvedFallbackLang = () => {
-    if (!fallbackLang) {
-      return null;
-    }
-    if (cachedResolvedFallbackLangVersion === languageMapVersion) {
-      return cachedResolvedFallbackLang;
-    }
-    cachedResolvedFallbackLang = matchBestLang(fallbackLang, languageMap);
-    cachedResolvedFallbackLangVersion = languageMapVersion;
-    return cachedResolvedFallbackLang;
-  };
-
-  const addLangKeys = (lang, translations) => {
-    // Accumulate: merge with any existing translations for this lang
-    const existing = languageMap.get(lang);
-    if (existing) {
-      translations = { ...existing, ...translations };
-    }
-    // A regional variant inherits all keys not explicitly overridden
-    // e.g. "fr-CA" inherits from "fr"
-    const dashIndex = lang.indexOf("-");
-    if (dashIndex !== -1) {
-      const parentLang = lang.slice(0, dashIndex);
-      const parentTranslations = languageMap.get(parentLang);
-      if (parentTranslations) {
-        translations = { ...parentTranslations, ...translations };
-      }
-    }
-    languageMap.set(lang, translations);
-    languageMapVersion++;
-  };
-
-  const add = (key, langTranslations) => {
-    if (keyLang && !(keyLang in langTranslations)) {
-      // Auto-register the key itself as the translation for keyLang
-      addLangKeys(keyLang, { [key]: key });
-    }
-    for (const [lang, value] of Object.entries(langTranslations)) {
-      addLangKeys(lang, { [key]: value });
-    }
-  };
-
-  const addAll = (keyMap) => {
-    for (const [key, langTranslations] of Object.entries(keyMap)) {
-      add(key, langTranslations);
-    }
-  };
-
-  const _getTemplate = (key, lang) => {
-    // matchBestLang, not matchLang directly: lang can be an array (e.g.
-    // languagesSignal.value is always an ordered array — see lang_signal.js) and
-    // matchLang alone assumes a plain string, throwing
-    // on .split() otherwise.
-    const resolvedLang = lang ? matchBestLang(lang, languageMap) : null;
-    if (resolvedLang) {
-      const translations = languageMap.get(resolvedLang);
-      const translated = translations[key];
-      if (translated !== undefined) {
-        return translated;
-      }
-    }
-    const resolvedFallbackLang = getResolvedFallbackLang();
-    if (resolvedFallbackLang) {
-      const fallbackTranslations = languageMap.get(resolvedFallbackLang);
-      const fallbackTranslated = fallbackTranslations[key];
-      if (fallbackTranslated !== undefined) {
-        return fallbackTranslated;
-      }
-    }
-    // No translation found — return key as-is (opaque fallback)
-    return key;
-  };
-
-  const format = (key, values, { lang = getActiveLang() } = {}) => {
-    const template = _getTemplate(key, lang);
-    return interpolateText(template, values);
-  };
-
-  const has = (key, { lang = getActiveLang() } = {}) => {
-    const resolvedLang = lang ? matchBestLang(lang, languageMap) : null;
-    if (resolvedLang) {
-      const translations = languageMap.get(resolvedLang);
-      if (translations && key in translations) {
-        return true;
-      }
-    }
-    const resolvedFallbackLang = getResolvedFallbackLang();
-    if (resolvedFallbackLang) {
-      const fallbackTranslations = languageMap.get(resolvedFallbackLang);
-      if (fallbackTranslations && key in fallbackTranslations) {
-        return true;
-      }
-    }
-    return false;
-  };
-
-  // The i18n instance is itself a callable function
-  const i18n = (key, values, opts) => format(key, values, opts);
-  i18n.add = add;
-  i18n.addAll = addAll;
-  i18n.addLangKeys = addLangKeys;
-  i18n.has = has;
-  i18n.format = format;
-  i18n.languageMap = languageMap;
-
-  return i18n;
-};
-
-// Walk "fr-CA-variant" → "fr-CA" → "fr" until a registered lang is found
-const matchLang = (lang, languageMap) => {
-  if (languageMap.has(lang)) {
-    return lang;
-  }
-  const parts = lang.split("-");
-  while (parts.length > 1) {
-    parts.pop();
-    const candidate = parts.join("-");
-    if (languageMap.has(candidate)) {
-      return candidate;
-    }
-  }
-  return null;
-};
-
-// lang can be a string or an ordered array of preference strings
-const matchBestLang = (lang, languageMap) => {
-  if (!lang) {
-    return null;
-  }
-  const candidates = Array.isArray(lang) ? lang : [lang];
-  for (const candidate of candidates) {
-    const match = matchLang(candidate, languageMap);
-    if (match) {
-      return match;
-    }
-  }
-  return null;
-};
-
-/**
- * The shared i18n instance holding every text @jsenv/navi components display
- * on their own — validation messages, button labels, empty-list messages,
- * relative time wording…
- *
- * It is navi's texts, not the application's: an app registers its own texts in
- * its own `createI18n()` instance and reaches for `naviI18n` only to change
- * what navi itself says, or to add a language navi does not ship. Keys here are
- * opaque identifiers (`"list.empty"`), never the English sentence — the
- * opposite of what an app is advised to do. `docs/i18n.md` explains why.
- *
- * The active language is read from `languagesSignal` (see lang_signal.js —
- * combines the browser's own `navigator.languages`, an optional
- * `setPreferredLanguage()` user override, and an optional
- * `setSupportedLanguages()` app-wide allow-list), live on every lookup.
- *
- * Built-in key namespaces, all overridable — the registrations below are the
- * exhaustive list, read them to find the exact key to override:
- *   - `"button.*"`     — Clear, Reset, Send, Open, Close, Cancel, Confirm…
- *   - `"time.*"`       — relative time wording, duration unit symbols, date field placeholders
- *   - `"spin.*"`       — the ends of a steppable range
- *   - `"list.*"`       — empty/no-match/failed-rows messages
- *   - `"badge_list.*"` — the "+[count] more" overflow badge
- *   - `"constraint.*"` — every field validation message
- *   - `"network_policy.*"` — what an action settles with when the policy kept it from the network
- *
- * Unit names get two derived keys, both optional: `<unit>__plural` and
- * `<unit>__short`. `<Unit>`/`<Quantity>` fall back to the singular when the
- * derived key is missing, and to `Intl.NumberFormat` when the unit itself is
- * not registered at all — so only units Intl gets wrong need registering.
- *
- * @example
- * import { naviI18n } from "@jsenv/navi";
- *
- * // Override a built-in text:
- * naviI18n.add("time.ongoing", { fr: "En cours…" });
- *
- * // Teach navi a language it does not ship:
- * naviI18n.addLangKeys("ja", { "list.empty": "項目がありません。" });
- *
- * // Register unit translations used by <Quantity>/<Unit>:
- * naviI18n.addAll({
- *   ticket:         { en: "ticket",  fr: "billet"  },
- *   ticket__plural: { en: "tickets", fr: "billets" },
- * });
- */
-const naviI18n = createI18n();
-
-naviI18n.addAll({
-  "button.clear": {
-    en: "Clear",
-    fr: "Effacer",
-  },
-  "button.reset": {
-    en: "Reset",
-    fr: "Réinitialiser",
-  },
-  "button.send": {
-    en: "Send",
-    fr: "Envoyer",
-  },
-  "button.open": {
-    en: "Open",
-    fr: "Ouvrir",
-  },
-  "button.close": {
-    en: "Close",
-    fr: "Fermer",
-  },
-  "button.cancel": {
-    en: "Cancel",
-    fr: "Annuler",
-  },
-  "button.define": {
-    en: "Define",
-    fr: "Définir",
-  },
-  "button.confirm": {
-    en: "Confirm",
-    fr: "Confirmer",
-  },
-  "confirm.message": {
-    en: "Are you sure you want to do this?",
-    fr: "Êtes-vous sûr de vouloir faire cette action ?",
-  },
-  "button.more_actions": {
-    en: "More actions",
-    fr: "Autres actions",
-  },
-  "button.remove": {
-    en: "Remove",
-    fr: "Retirer",
-  },
-});
-
-// Default built-in translations — apps can override any key via add()
-naviI18n.addAll({
-  "time.less_than_minute": {
-    en: "in less than a minute",
-    fr: "dans moins d'une minute",
-    de: "in weniger als einer Minute",
-    es: "en menos de un minuto",
-    it: "in meno di un minuto",
-    pt: "em menos de um minuto",
-    nl: "over minder dan een minuut",
-  },
-  "time.ongoing": {
-    en: "Ongoing",
-    fr: "En cours",
-    de: "Laufend",
-    es: "En curso",
-    it: "In corso",
-    pt: "Em andamento",
-    nl: "Bezig",
-  },
-  // [day] and [time] are replaced at runtime with the localized day/time strings
-  "time.tomorrow_at": {
-    en: "[day] at [time]",
-    fr: "[day] à [time]",
-    de: "[day] um [time]",
-    es: "[day] a las [time]",
-    it: "[day] alle [time]",
-    pt: "[day] às [time]",
-    nl: "[day] om [time]",
-  },
-  // [duration] is replaced at runtime with the formatted duration string (e.g. "1h30", "45 min")
-  "time.in_duration": {
-    en: "in [duration]",
-    fr: "dans [duration]",
-    de: "in [duration]",
-    es: "en [duration]",
-    it: "tra [duration]",
-    pt: "em [duration]",
-    nl: "over [duration]",
-  },
-  // Substituted in place of the "0 heure(s)" part of an Intl-generated
-  // duration string when <Time type="time" format="long"> renders midnight
-  // — see time.jsx's own TimeTime for why midnight can't just fall through
-  // to formatMinuteDuration like every other hour does, and how this word
-  // gets spliced in (formatToParts, not string concatenation) so the rest
-  // of the sentence (conjunction, minutes) still comes out in whatever
-  // grammar/word order this language's own Intl.DurationFormat produces.
-  // Languages without an entry here fall back to that language's own
-  // literal "0 heure(s)" wording instead (see TimeTime), never to this key.
-  "time.midnight": {
-    en: "midnight",
-    fr: "minuit",
-    de: "Mitternacht",
-    es: "medianoche",
-    it: "mezzanotte",
-    pt: "meia-noite",
-    nl: "middernacht",
-  },
-  // What <TimeRange> writes between the two bounds of a span — "8h–10h",
-  // "11 mai – 14 mai". An en dash, the mark for a span, not a hyphen.
-  "time.range_separator": {
-    en: "–",
-    fr: "–",
-    de: "–",
-    es: "–",
-    it: "–",
-    pt: "–",
-    nl: "–",
-  },
-  // Compact duration unit symbols used in "1h30", "45min", "2d", etc.
-  "time.duration.year_symbol": {
-    en: "y",
-    fr: "a",
-    de: "J",
-    es: "a",
-    it: "a",
-    pt: "a",
-    nl: "j",
-    ja: "年",
-    zh: "年",
-    ko: "년",
-  },
-  "time.duration.month_symbol": {
-    en: "mo",
-    fr: "mo",
-    de: "Mo",
-    es: "mo",
-    it: "mo",
-    pt: "mo",
-    nl: "mo",
-    ja: "月",
-    zh: "月",
-    ko: "월",
-  },
-  "time.duration.week_symbol": {
-    en: "w",
-    fr: "sem",
-    de: "W",
-    es: "sem",
-    it: "sett",
-    pt: "sem",
-    nl: "w",
-    ja: "週",
-    zh: "周",
-    ko: "주",
-  },
-  "time.duration.day_symbol": {
-    en: "d",
-    fr: "j",
-    de: "T",
-    es: "d",
-    it: "g",
-    pt: "d",
-    nl: "d",
-    ja: "日",
-    zh: "天",
-    ko: "일",
-  },
-  "time.duration.hour_symbol": {
-    en: "h",
-    fr: "h",
-    de: "h",
-    es: "h",
-    it: "h",
-    pt: "h",
-    nl: "u",
-    ja: "時間",
-    zh: "小时",
-    ko: "시간",
-  },
-  "time.duration.minute_symbol": {
-    en: "min",
-    fr: "min",
-    de: "min",
-    es: "min",
-    it: "min",
-    pt: "min",
-    nl: "min",
-    ja: "分",
-    zh: "分",
-    ko: "분",
-  },
-  "time.duration.second_symbol": {
-    en: "s",
-    fr: "s",
-    de: "s",
-    es: "s",
-    it: "s",
-    pt: "s",
-    nl: "s",
-    ja: "秒",
-    zh: "秒",
-    ko: "초",
-  },
-  "time.duration.millisecond_symbol": {
-    en: "ms",
-    fr: "ms",
-    de: "ms",
-    es: "ms",
-    it: "ms",
-    pt: "ms",
-    nl: "ms",
-    ja: "ms",
-    zh: "ms",
-    ko: "ms",
-  },
-});
-
-// Spin messages — the ends of what one steps through, said without naming
-// what it is made of: the same words fit days, months, pages or sizes.
-naviI18n.addAll({
-  "spin.previous": {
-    en: "Previous",
-    fr: "Précédent",
-  },
-  "spin.next": {
-    en: "Next",
-    fr: "Suivant",
-  },
-  "spin.nothing_before": {
-    en: "No item before this one.",
-    fr: "Pas d'élément avant celui-ci.",
-  },
-  "spin.nothing_after": {
-    en: "No item after this one.",
-    fr: "Pas d'élément après celui-ci.",
-  },
-});
-
-// Time spin messages — what a clock writes between an hour and its minutes,
-// and how the two ends of a span are named.
-naviI18n.addAll({
-  "time.hour_separator": {
-    en: ":",
-    fr: "h",
-  },
-  "time.hour_label": {
-    en: "Hours",
-    fr: "Heures",
-  },
-  "time.minute_label": {
-    en: "Minutes",
-    fr: "Minutes",
-  },
-  "time_range.from": {
-    en: "From",
-    fr: "De",
-  },
-  "time_range.to": {
-    en: "to",
-    fr: "à",
-  },
-});
-
-// List messages — override any key to customize list messages
-naviI18n.addAll({
-  "list.empty": {
-    en: "No items in this list.",
-    fr: "Aucun élément dans cette liste.",
-  },
-  "list.no_match": {
-    en: "No item matches this search.",
-    fr: "Aucun élément ne correspond à cette recherche.",
-  },
-  "list.no_match_rest_shown": {
-    en: "No item matches this search. The rest is shown below.",
-    fr: "Aucun élément ne correspond à cette recherche. Le reste est affiché ci-dessous.",
-  },
-  "list.rows_failed": {
-    en: "These elements could not be loaded.",
-    fr: "Ces élements n'ont pas pu être chargées.",
-  },
-  "list.rows_retry": {
-    en: "Retry",
-    fr: "Réessayer",
-  },
-});
-
-// Badge list messages
-naviI18n.addAll({
-  "badge_list.more": {
-    en: "+[count] more",
-    fr: "+[count] de plus",
-  },
-});
+// Badge list messages
+naviI18n.addAll({
+  "badge_list.more": {
+    en: "+[count] more",
+    fr: "+[count] de plus",
+  },
+});
 
 // Constraint validation messages — override any key to customize error messages
 naviI18n.addAll({
@@ -2916,241 +1881,1377 @@ naviI18n.addAll({
   },
 });
 
-// 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.char_class.numeric": {
-    fr: "Ce champ ne peut contenir que des chiffres.",
-    en: "This field can only contain digits.",
-  },
-  "constraint.char_class.alpha": {
-    fr: "Ce champ ne peut contenir que des lettres.",
-    en: "This field can only contain letters.",
-  },
-  "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.char_class.uppercase": {
-    fr: "Ce champ ne peut contenir que des lettres majuscules.",
-    en: "This field can only contain uppercase letters.",
-  },
-  "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.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.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.",
-  },
-  // maxLength: keydown blocked (one character would exceed the limit)
-  "constraint.guard.max_length.typing": {
-    fr: "Longueur maximale de [max] caractère[s] atteinte.",
-    en: "Maximum length of [max] character[s] reached.",
-  },
-  // maxLength: paste/set truncated to maxLength (autofix always applied)
-  "constraint.guard.max_length.value": {
-    fr: "Ce champ ne peut pas contenir plus de [max] caractère[s], une partie a été tronquée.",
-    en: "This field cannot contain more than [max] character[s]; the value was truncated.",
-  },
-  // maxLengthGuard on a multiple selection: one more item would exceed the limit
-  "constraint.guard.max_length.selection": {
-    fr: "[max] max.",
-    en: "[max] max.",
-  },
-});
+// 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.char_class.numeric": {
+    fr: "Ce champ ne peut contenir que des chiffres.",
+    en: "This field can only contain digits.",
+  },
+  "constraint.char_class.alpha": {
+    fr: "Ce champ ne peut contenir que des lettres.",
+    en: "This field can only contain letters.",
+  },
+  "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.char_class.uppercase": {
+    fr: "Ce champ ne peut contenir que des lettres majuscules.",
+    en: "This field can only contain uppercase letters.",
+  },
+  "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.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.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.",
+  },
+  // maxLength: keydown blocked (one character would exceed the limit)
+  "constraint.guard.max_length.typing": {
+    fr: "Longueur maximale de [max] caractère[s] atteinte.",
+    en: "Maximum length of [max] character[s] reached.",
+  },
+  // maxLength: paste/set truncated to maxLength (autofix always applied)
+  "constraint.guard.max_length.value": {
+    fr: "Ce champ ne peut pas contenir plus de [max] caractère[s], une partie a été tronquée.",
+    en: "This field cannot contain more than [max] character[s]; the value was truncated.",
+  },
+  // maxLengthGuard on a multiple selection: one more item would exceed the limit
+  "constraint.guard.max_length.selection": {
+    fr: "[max] max.",
+    en: "[max] max.",
+  },
+});
+
+// Date/time placeholder tokens — shown when no value is selected
+// Override any key to adapt to your language conventions
+naviI18n.addAll({
+  "time.placeholder.day": {
+    fr: "jj",
+    en: "dd",
+    de: "TT",
+    es: "dd",
+    it: "gg",
+    pt: "dd",
+    nl: "dd",
+  },
+  "time.placeholder.month": {
+    fr: "mm",
+    en: "mm",
+    de: "MM",
+    es: "mm",
+    it: "mm",
+    pt: "mm",
+    nl: "mm",
+  },
+  "time.placeholder.year": {
+    fr: "aaaa",
+    en: "yyyy",
+    de: "JJJJ",
+    es: "aaaa",
+    it: "aaaa",
+    pt: "aaaa",
+    nl: "jjjj",
+  },
+  "time.placeholder.hour": {
+    fr: "hh",
+    en: "hh",
+    de: "hh",
+    es: "hh",
+    it: "hh",
+    pt: "hh",
+    nl: "uu",
+  },
+  "time.placeholder.minute": {
+    fr: "mm",
+    en: "mm",
+    de: "mm",
+    es: "mm",
+    it: "mm",
+    pt: "mm",
+    nl: "mm",
+  },
+  "time.placeholder.week": {
+    fr: "sem.",
+    en: "wk",
+    de: "KW",
+    es: "sem.",
+    it: "sett.",
+    pt: "sem.",
+    nl: "wk",
+  },
+});
+
+const isSignal = (value) => {
+  return getSignalType(value) !== null;
+};
+
+const BRAND_SYMBOL = Symbol.for("preact-signals");
+const getSignalType = (value) => {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+
+  if (value.brand !== BRAND_SYMBOL) {
+    return null;
+  }
+
+  if (typeof value._fn === "function") {
+    return "computed";
+  }
+
+  return "signal";
+};
+
+/*
+ * The network policy: one declaration saying whether a request may go out,
+ * read by the action layer rather than by every callback.
+ *
+ * Under a policy (a truthy reason):
+ * - a resource GET answers with the row its store holds for it — named by its
+ *   params, or the one it last completed with — and asks nothing
+ *   (resource_graph.js, applyNetworkPolicy); a completed read
+ *   asked to rerun stays completed (actions.js, handleActionRequest);
+ *   anything else settles with an OfflineError carrying the reason;
+ * - a control bound to a write — or inside a form bound to one — is read-only
+ *   and says why (control_hooks.jsx, readonly_constraint.js).
+ *
+ * The reason is a value rather than a boolean because "no network" and
+ * "offline mode" are not said the same way to the user: the error and the
+ * read-only message both carry it, and the app decides the words.
+ *
+ * Only actions declaring a verb (`meta.verb`, which every resource action
+ * has) are subject to the policy: a plain `createAction` may not touch the
+ * network at all, and navi has no way to tell.
+ */
+
+const WRITE_VERB_SET = new Set(["POST", "PUT", "PATCH", "DELETE"]);
+
+const networkPolicySignal = signal({
+  source: null,
+  readOnlyMessage: undefined,
+});
+
+/**
+ * Declares whether requests may go out.
+ *
+ * @param {import("@preact/signals").Signal | Function | any} source - where the
+ *   reason is read from: a signal (followed live), a function (called on each
+ *   read), or a plain value. A falsy reason means "go to the network"; any
+ *   truthy value means "do not", and is handed to the `OfflineError` an action
+ *   settles with (`error.reason`) so a screen can say which kind of offline it is.
+ * @param {Object} [options]
+ * @param {string | ((reason: any) => string)} [options.readOnlyMessage] - what a
+ *   control held back by the policy answers when pressed; defaults to navi's
+ *   `constraint.readonly.network_policy` text.
+ * @see docs/offline.md
+ *
+ * @example
+ * const offlineReasonSignal = computed(() =>
+ *   offlineChosenSignal.value ? "chosen" : deviceOfflineSignal.value ? "device" : null,
+ * );
+ * setNetworkPolicy(offlineReasonSignal, {
+ *   readOnlyMessage: (reason) =>
+ *     reason === "device" ? "No network: this cannot be sent." : "Offline mode: this cannot be sent.",
+ * });
+ */
+const setNetworkPolicy = (source, { readOnlyMessage } = {}) => {
+  silenceOfflineErrors();
+  networkPolicySignal.value = { source, readOnlyMessage };
+};
+
+/**
+ * The policy's reason, `null` when requests may go out. Read in a component
+ * render, it follows the policy as it changes.
+ */
+const useNetworkPolicyReason = () => {
+  return readReason(networkPolicySignal.value.source);
+};
+
+// For the action layer: the same answer without subscribing whoever asks.
+const peekNetworkPolicyReason = () => {
+  return untracked(() => readReason(networkPolicySignal.peek().source));
+};
+
+const isRerunHeldByNetworkPolicy = (action) => {
+  return action.meta.verb === "GET" && peekNetworkPolicyReason() !== null;
+};
+
+const isWriteAction = (action) => {
+  return WRITE_VERB_SET.has(action.meta.verb);
+};
+
+const getNetworkPolicyReadOnlyMessage = () => {
+  const { readOnlyMessage } = networkPolicySignal.peek();
+  if (typeof readOnlyMessage === "function") {
+    return readOnlyMessage(peekNetworkPolicyReason());
+  }
+  if (readOnlyMessage) {
+    return readOnlyMessage;
+  }
+  return naviI18n("constraint.readonly.network_policy");
+};
+
+/**
+ * The error of a request that never left: the policy said not to.
+ * `reason` is the policy's value at that moment.
+ */
+class OfflineError extends Error {
+  constructor(reason, message = naviI18n("network_policy.offline")) {
+    super(message);
+    this.name = "OfflineError";
+    this.reason = reason;
+    // A flag beside the class: the error crosses layers that may copy it, and
+    // instanceof does not survive a copy.
+    this.offline = true;
+  }
+}
+
+const isOfflineError = (error) => {
+  return Boolean(error && error.offline);
+};
+
+/**
+ * An offline error is not one, and nobody is to be told about it as if it were.
+ *
+ * It says "run with what you have, ask nothing" — a state the app itself
+ * declared, about a request that never left. There is no bug to point at, no
+ * stack worth reading, and a screen is already saying it in words the person
+ * understands.
+ *
+ * navi's own report leaves it alone (action_error_report.js). What is left is
+ * the screen displaying it: it does so by throwing the error to a boundary, and
+ * `preact/debug` re-emits on `window` every error a boundary caught — on
+ * purpose, for React devtools compatibility. Uncancelled, that lands as an
+ * uncaught error in the console, over a page calmly explaining there is no
+ * network. Cancelling the event is what says it is handled: the browser drops
+ * the console line, and the jsenv supervisor skips prevented events too.
+ *
+ * Both shapes a failure travels in are covered, since which one it is depends
+ * on whether the resource callback happened to be async — the throw reaching
+ * `window`, and the rejection nobody caught.
+ *
+ * Scoped to the policy's own error and to nothing else — every other error a
+ * boundary caught, and every other rejection let go, stays exactly as loud as
+ * it is.
+ */
+let offlineErrorSilenced = false;
+const silenceOfflineErrors = () => {
+  if (offlineErrorSilenced || typeof window === "undefined") {
+    return;
+  }
+  offlineErrorSilenced = true;
+  window.addEventListener("error", (errorEvent) => {
+    if (isOfflineError(errorEvent.error)) {
+      errorEvent.preventDefault();
+    }
+  });
+  window.addEventListener("unhandledrejection", (rejectionEvent) => {
+    if (isOfflineError(rejectionEvent.reason)) {
+      rejectionEvent.preventDefault();
+    }
+  });
+};
+
+const readReason = (source) => {
+  if (!source) {
+    return null;
+  }
+  let reason;
+  if (isSignal(source)) {
+    reason = source.value;
+  } else if (typeof source === "function") {
+    reason = source();
+  } else {
+    reason = source;
+  }
+  return reason || null;
+};
+
+/**
+ * Where an action error goes when nothing displays it.
+ *
+ * An action that fails writes the error into its `errorSignal` and stops there.
+ * It cannot know whether a screen is going to show it: at the instant it fails,
+ * the screen that will is often not even mounted — a route action runs before
+ * its page renders, which is precisely the case a guess made at failure time
+ * gets wrong. So nothing is guessed. The error is let go, and whoever displays
+ * it SAYS so by marking it; what nobody ever took is reported as unhandled.
+ *
+ * The mark is `__handled_by__`, the same one the jsenv supervisor reads to stay
+ * out of the way of an error the app is already showing — one mark, one meaning:
+ * "this is on screen somewhere".
+ *
+ * The whole picture, control errors and validation included: docs/error_handling.md
+ */
+
+
+const markErrorAsDisplayedBy = (error, by) => {
+  if (error && typeof error === "object") {
+    error.__handled_by__ = by;
+  }
+};
+
+const errorIsDisplayed = (error) => {
+  return Boolean(error && error.__handled_by__);
+};
+
+/**
+ * A render has read this error — it is now the render tree's business, not this
+ * module's, and there is nothing left to report.
+ *
+ * Whatever the reader does with it is already covered without any deadline: it
+ * displays it (and marks it), or it throws it, and a thrown error either finds a
+ * boundary that displays it or reaches window on its own — `preact/debug`
+ * re-throws every error a boundary caught, and an unbounded one aborts the
+ * render loudly. Reporting it here as well would be a second voice saying the
+ * same thing, always the wrong one, since this module cannot see which of those
+ * happened.
+ */
+const errorTakenByRenderSet = new WeakSet();
+const markErrorAsTakenByRender = (error) => {
+  if (error && typeof error === "object") {
+    errorTakenByRenderSet.add(error);
+  }
+};
+
+/**
+ * When the answer "nobody took it" is final.
+ *
+ * The floor is one macrotask: every render that could take the error — Preact's
+ * queue, a Suspense boundary settling on the failure, the boundary above it —
+ * happens in microtasks.
+ *
+ * That floor is enough for an action failing under a page that is already on
+ * screen, and far too early for a route action: it fails ON the url change,
+ * before its page exists, and that page cannot render until the routing that
+ * asked for the data is over. Measured on an offline navigation, the screen
+ * displaying the error arrived ~12ms after this deadline — so the app was told
+ * it had displayed nothing while it was displaying it.
+ *
+ * The browser integration knows when the document has stopped moving and hands
+ * that over here (see installReportDeadlineExtension); nothing else does, and
+ * this module stays free of the DOM. Waiting longer costs nothing now that a
+ * read is enough to call this off: what still reaches the report was read by no
+ * render at all, and a late report about that is as good as a prompt one.
+ */
+let waitForDocumentSettled = null;
+const installReportDeadlineExtension = (fn) => {
+  waitForDocumentSettled = fn;
+};
+
+/**
+ * The failures of one moment: reported, still waiting to know whether anything
+ * took them. A url change fails its route actions together, so they wait here
+ * together — which is what lets the throw below say something about the others.
+ */
+const errorPendingDecisionSet = new Set();
+
+/**
+ * A render stopped mid-way cannot read what came after it.
+ *
+ * `useAsyncData` delegates a failure by throwing it out of the render — that is
+ * how the error reaches the boundary that displays it. The render ends on that
+ * line, so every action the component reads BELOW it is never read, including
+ * one that was going to display its own error. "Nobody read it" is still true
+ * of those, but the reason is no longer that the app forgot: nothing COULD read
+ * them. Left alone, the order of two hook calls decides whether an app is told
+ * it has a bug — a rule nobody can see.
+ *
+ * So the throw says it for them: the failures waiting for the same answer at
+ * that instant are failures no render could reach, and the report has nothing
+ * to say about them. What is on screen is the failure the render was stopped
+ * at, which is the same story.
+ *
+ * This is about the failures that already exist when the render is cut short.
+ * An action of the same page failing LATER — after the page was replaced by
+ * what displays the first failure — is not covered and is still reported: at
+ * that point nothing distinguishes it from an action nobody reads.
+ */
+const errorNoRenderCouldReachSet = new WeakSet();
+const markErrorAsStoppingRender = (error) => {
+  for (const errorPendingDecision of errorPendingDecisionSet) {
+    if (errorPendingDecision !== error) {
+      errorNoRenderCouldReachSet.add(errorPendingDecision);
+    }
+  }
+};
+
+/**
+ * An offline error is never reported: the app declared the state that produced
+ * it, the request never left, and there is nothing for a developer to fix. It
+ * is data a screen shows, and it stays data whether or not one does (see
+ * network_policy.js, which also keeps it out of the browser console).
+ */
+const errorIsAccountedFor = (error) => {
+  return (
+    errorIsDisplayed(error) ||
+    errorTakenByRenderSet.has(error) ||
+    errorNoRenderCouldReachSet.has(error) ||
+    isOfflineError(error)
+  );
+};
+
+/**
+ * Rethrown rather than logged: an error nobody took is an unhandled error, and
+ * the runtime already knows what to do with those (window "error" event, jsenv
+ * overlay in dev). Same trick preact/debug uses for the same reason.
+ */
+const errorReportedSet = new WeakSet();
+const reportErrorIfNobodyDisplaysIt = (error, { action } = {}) => {
+  if (error && typeof error === "object") {
+    errorPendingDecisionSet.add(error);
+  }
+  const decide = () => {
+    errorPendingDecisionSet.delete(error);
+    if (errorIsAccountedFor(error)) {
+      return;
+    }
+    if (error && typeof error === "object") {
+      // The same error can reach here from more than one direction (the run
+      // that produced it, the routing promise carrying it): it is one error and
+      // it is reported once.
+      if (errorReportedSet.has(error)) {
+        return;
+      }
+      errorReportedSet.add(error);
+    }
+    if (action && error && typeof error === "object" && !error.action) {
+      error.action = action;
+    }
+    throw error;
+  };
+
+  setTimeout(() => {
+    if (errorIsAccountedFor(error)) {
+      // Already taken within the microtasks that followed the failure: the
+      // common case, and there is nothing to wait for.
+      errorPendingDecisionSet.delete(error);
+      return;
+    }
+    if (waitForDocumentSettled) {
+      waitForDocumentSettled(decide);
+      return;
+    }
+    decide();
+  });
+};
+
+const actionPrivatePropertiesWeakMap = new WeakMap();
+const getActionPrivateProperties = (action) => {
+  const actionPrivateProperties = actionPrivatePropertiesWeakMap.get(action);
+  if (!actionPrivateProperties) {
+    throw new Error(`Cannot find action private properties for "${action}"`);
+  }
+  return actionPrivateProperties;
+};
+const setActionPrivateProperties = (action, properties) => {
+  actionPrivatePropertiesWeakMap.set(action, properties);
+};
+
+const IDLE = { id: "idle" };
+const RUNNING = { id: "running" };
+const ABORTED = { id: "aborted" };
+const FAILED = { id: "failed" };
+const COMPLETED = { id: "completed" };
+
+const useActionStatus = (action) => {
+  if (!action) {
+    return {
+      params: undefined,
+      runningState: IDLE,
+      isPrerun: false,
+      idle: true,
+      loading: false,
+      aborted: false,
+      error: null,
+      completed: false,
+      data: undefined,
+    };
+  }
+  const {
+    paramsSignal,
+    runningStateSignal,
+    isPrerunSignal,
+    errorSignal,
+    dataSignal,
+  } = action;
+  const params = paramsSignal.value;
+  const isPrerun = isPrerunSignal.value;
+  const runningState = runningStateSignal.value;
+  const idle = runningState === IDLE;
+  const aborted = runningState === ABORTED;
+  const error = errorSignal.value;
+  const loading = runningState === RUNNING;
+  const completed = runningState === COMPLETED;
+  const data = dataSignal.value;
+
+  return {
+    params,
+    runningState,
+    isPrerun,
+    idle,
+    loading,
+    aborted,
+    error,
+    completed,
+    data,
+  };
+};
+
+installImportMetaCssBuild(import.meta);const css$14 = /* css */`.action_error {
+  background: #fdd;
+  border: 1px solid red;
+  margin-top: 0;
+  margin-bottom: 20px;
+  padding: 20px;
+}
+`;
+const renderIdleDefault = () => null;
+const renderLoadingDefault = () => null;
+const renderAbortedDefault = () => null;
+const renderErrorDefault = error => {
+  let routeErrorText = error && error.message ? error.message : error;
+  return jsxs("p", {
+    className: "action_error",
+    children: ["An error occured: ", routeErrorText]
+  });
+};
+const renderCompletedDefault = () => null;
+const ActionRenderer = ({
+  action,
+  children,
+  disabled
+}) => {
+  import.meta.css = [css$14, "@jsenv/navi/src/action/action_renderer.jsx"];
+  if (action === undefined) {
+    throw new Error("ActionRenderer requires an action to render, but none was provided.");
+  }
+  let renderBranches;
+  if (typeof children === "function") {
+    renderBranches = {
+      completed: children
+    };
+  } else if (isValidElement(children)) {
+    renderBranches = {
+      always: () => children
+    };
+  } else if (isPlainObject$2(children)) {
+    renderBranches = children;
+  } else {
+    renderBranches = {
+      completed: children
+    };
+  }
+  const {
+    idle: renderIdle = renderIdleDefault,
+    loading: renderLoading = renderLoadingDefault,
+    aborted: renderAborted = renderAbortedDefault,
+    error: renderError = renderErrorDefault,
+    completed: renderCompleted,
+    always: renderAlways
+  } = renderBranches;
+  const {
+    idle,
+    loading,
+    aborted,
+    error,
+    completed,
+    data
+  } = useActionStatus(action);
+  const UIRenderedPromise = useUIRenderedPromise(action);
+  const [errorBoundary, resetErrorBoundary] = useErrorBoundary();
+  useLayoutEffect(() => {
+    resetErrorBoundary();
+  }, [action, loading, idle, resetErrorBoundary]);
+  useLayoutEffect(() => {
+    UIRenderedPromise.resolve();
+    return () => {
+      actionUIRenderedPromiseWeakMap.delete(action);
+    };
+  }, [action]);
+  if (disabled) {
+    return null;
+  }
+  // If renderAlways is provided, it wins and handles all rendering
+  if (renderAlways) {
+    return renderAlways({
+      idle,
+      loading,
+      aborted,
+      completed,
+      error,
+      data
+    });
+  }
+  if (idle) {
+    return renderIdle(action);
+  }
+  if (errorBoundary) {
+    // Displaying it is what makes it handled (see action_error_report.js)
+    markErrorAsDisplayedBy(errorBoundary, "<ActionRenderer>");
+    return renderError(errorBoundary, "ui_error", action);
+  }
+  if (aborted) {
+    return renderAborted(action);
+  }
+  let renderCompletedSafe;
+  if (renderCompleted) {
+    renderCompletedSafe = renderCompleted;
+  } else {
+    const {
+      ui
+    } = getActionPrivateProperties(action);
+    if (ui.renderCompleted) {
+      renderCompletedSafe = ui.renderCompleted;
+    } else {
+      renderCompletedSafe = renderCompletedDefault;
+    }
+  }
+  if (loading) {
+    if (action.canDisplayOldData && data !== undefined) {
+      return renderCompletedSafe(data, action);
+    }
+    return renderLoading(action);
+  }
+  if (error) {
+    markErrorAsDisplayedBy(error, "<ActionRenderer>");
+    return renderError(error, "action_error", action);
+  }
+  return renderCompletedSafe(data, action);
+};
+const defaultPromise = Promise.resolve();
+defaultPromise.resolve = () => {};
+const actionUIRenderedPromiseWeakMap = new WeakMap();
+const useUIRenderedPromise = action => {
+  if (!action) {
+    return defaultPromise;
+  }
+  const actionUIRenderedPromise = actionUIRenderedPromiseWeakMap.get(action);
+  if (actionUIRenderedPromise) {
+    return actionUIRenderedPromise;
+  }
+  let resolve;
+  const promise = new Promise(res => {
+    resolve = res;
+  });
+  promise.resolve = resolve;
+  actionUIRenderedPromiseWeakMap.set(action, promise);
+  return promise;
+};
+const isPlainObject$2 = obj => {
+  if (typeof obj !== "object" || obj === null) {
+    return false;
+  }
+  let proto = obj;
+  while (Object.getPrototypeOf(proto) !== null) {
+    proto = Object.getPrototypeOf(proto);
+  }
+  return Object.getPrototypeOf(obj) === proto || Object.getPrototypeOf(obj) === null;
+};
+
+const MAX_ENTRIES = 5;
+
+const stringifyForDisplay = (
+  value,
+  maxDepth = 2,
+  currentDepth = 0,
+  options = {},
+) => {
+  const { asFunctionArgs = false } = options;
+  const indent = "  ".repeat(currentDepth);
+  const nextIndent = "  ".repeat(currentDepth + 1);
+
+  if (currentDepth >= maxDepth) {
+    return typeof value === "object" && value !== null
+      ? "[Object]"
+      : String(value);
+  }
+
+  if (value === null) {
+    return "null";
+  }
+  if (value === undefined) {
+    return "undefined";
+  }
+  if (typeof value === "string") {
+    return `"${value}"`;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (typeof value === "function") {
+    return `[Function ${value.name || "anonymous"}]`;
+  }
+  if (value instanceof Date) {
+    return `Date(${value.toISOString()})`;
+  }
+  if (value instanceof RegExp) {
+    return value.toString();
+  }
+
+  if (Array.isArray(value)) {
+    const openBracket = asFunctionArgs ? "(" : "[";
+    const closeBracket = asFunctionArgs ? ")" : "]";
+
+    if (value.length === 0) return `${openBracket}${closeBracket}`;
+
+    // Display arrays with only one element on a single line
+    if (value.length === 1) {
+      const item = stringifyForDisplay(
+        value[0],
+        maxDepth,
+        currentDepth + 1,
+        // Remove asFunctionArgs for nested calls
+        { ...options, asFunctionArgs: false },
+      );
+      return `${openBracket}${item}${closeBracket}`;
+    }
+
+    if (value.length > MAX_ENTRIES) {
+      const preview = value
+        .slice(0, MAX_ENTRIES)
+        .map(
+          (v) =>
+            `${nextIndent}${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
+        );
+      return `${openBracket}\n${preview.join(",\n")},\n${nextIndent}...${value.length - MAX_ENTRIES} more\n${indent}${closeBracket}`;
+    }
+
+    const items = value.map(
+      (v) =>
+        `${nextIndent}${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
+    );
+    return `${openBracket}\n${items.join(",\n")}\n${indent}${closeBracket}`;
+  }
+
+  if (typeof value === "object") {
+    const signalType = getSignalType(value);
+    if (signalType) {
+      const signalValue = value.peek();
+      const prefix = signalType === "computed" ? "computed" : "signal";
+      return `${prefix}(${stringifyForDisplay(signalValue, maxDepth, currentDepth, { ...options, asFunctionArgs: false })})`;
+    }
+
+    const entries = Object.entries(value);
+    if (entries.length === 0) return "{}";
+
+    // ✅ Inclure les clés avec valeurs undefined/null
+    const allEntries = [];
+    for (const [key, val] of entries) {
+      allEntries.push([key, val]);
+    }
+
+    // Ajouter les clés avec undefined (que Object.entries omet)
+    const descriptor = Object.getOwnPropertyDescriptors(value);
+    for (const [key, desc] of Object.entries(descriptor)) {
+      if (desc.value === undefined && !entries.some(([k]) => k === key)) {
+        allEntries.push([key, undefined]);
+      }
+    }
+
+    // Display objects with only one key on a single line
+    if (allEntries.length === 1) {
+      const [key, val] = allEntries[0];
+      const valueStr = stringifyForDisplay(val, maxDepth, currentDepth + 1, {
+        ...options,
+        asFunctionArgs: false,
+      });
+      return `{ ${key}: ${valueStr} }`;
+    }
+
+    if (allEntries.length > MAX_ENTRIES) {
+      const preview = allEntries
+        .slice(0, MAX_ENTRIES)
+        .map(
+          ([k, v]) =>
+            `${nextIndent}${k}: ${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
+        );
+      return `{\n${preview.join(",\n")},\n${nextIndent}...${allEntries.length - MAX_ENTRIES} more\n${indent}}`;
+    }
+
+    const pairs = allEntries.map(
+      ([k, v]) =>
+        `${nextIndent}${k}: ${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
+    );
+    return `{\n${pairs.join(",\n")}\n${indent}}`;
+  }
+
+  return String(value);
+};
+
+/*
+ * Deep structural equality for arbitrary JS values — what `===` can't do but this
+ * codebase constantly needs: memoization cache keys ({ id: 1 } equal to { id: 1 }),
+ * effect/memo dependency checks, signal/store change detection, and action
+ * parameter deduplication.
+ *
+ * Beyond recursive object/array comparison it covers the edge cases `===` gets
+ * "wrong" for equality purposes: NaN equals NaN, Date compared by time value,
+ * cycles don't loop (a set of the pairs being compared guards circular refs),
+ * and same-type is required
+ * before descending. Functions, signals, and objects with nothing enumerable to
+ * compare (a Set, a Map, an element, a URL), are equal by reference only —
+ * nothing in them says whether two are "the same". Cheap paths run first: reference
+ * equality, then the identity short-circuit below, then array length before
+ * element-by-element.
+ *
+ * SYMBOL_IDENTITY. Two *different* object instances can be declared "conceptually
+ * the same" by sharing a SYMBOL_IDENTITY value; the comparison then treats them as
+ * equal with no deep walk. This is what lets a spread copy ({ ...params, extra })
+ * still count as the same params as the original, and lets objects reconstructed
+ * across a serialization boundary be recognized as one entity — the cases where a
+ * content comparison would be too slow, or too strict to see them as equal. Use
+ * Symbol.for() so the marker is the same symbol across modules/contexts:
+ *
+ *   const id = Symbol.for("params");
+ *   a[SYMBOL_IDENTITY] = id;
+ *   b[SYMBOL_IDENTITY] = id;
+ *   compareTwoJsValues(a, b); // true immediately, no property walk
+ */
+
+
+// Marks objects with a conceptual identity that transcends reference equality —
+// see the file comment. Symbol.for keeps it one shared symbol across modules.
+const SYMBOL_IDENTITY = Symbol.for("navi_object_identity");
+
+/**
+ * Deeply compares two values for structural equality.
+ *
+ * @param {any} rootA - First value.
+ * @param {any} rootB - Second value.
+ * @param {object} [options]
+ * @param {(a: any, b: any, keyOrIndex: any, recurse: (a: any, b: any) => boolean) => boolean} [options.keyComparator]
+ *   Custom comparator for object properties / array elements. Receives the internal
+ *   `compare` as its last argument so it can defer to the default behavior.
+ * @param {boolean} [options.ignoreArrayOrder=false] - Compare arrays as multisets:
+ *   equal when they contain the same elements regardless of order.
+ * @param {Iterable<string>} [options.lightKeySet] - Object keys to compare first —
+ *   cheaper or likelier-to-differ ones — to short-circuit before the remaining keys.
+ * @returns {boolean} true if the values are deeply equal.
+ */
+const compareTwoJsValues = (
+  rootA,
+  rootB,
+  { keyComparator, ignoreArrayOrder = false, lightKeySet } = {},
+) => {
+  const seenSet = new Set();
+  const compare = (a, b) => {
+    if (a === b) {
+      return true;
+    }
+    const aIsIsTruthy = Boolean(a);
+    const bIsTruthy = Boolean(b);
+    if (aIsIsTruthy && !bIsTruthy) {
+      return false;
+    }
+    if (!aIsIsTruthy && !bIsTruthy) {
+      // null, undefined, 0, false, NaN
+      if (isNaN(a) && isNaN(b)) {
+        return true;
+      }
+      return a === b;
+    }
+    const aType = typeof a;
+    const bType = typeof b;
+    if (aType !== bType) {
+      return false;
+    }
+    if (aType === "function") {
+      // Not the same function (reference equality came first), and nothing in
+      // a function says whether two of them do the same thing.
+      return false;
+    }
+    const aIsPrimitive =
+      a === null || (aType !== "object" && aType !== "function");
+    const bIsPrimitive =
+      b === null || (bType !== "object" && bType !== "function");
+    if (aIsPrimitive !== bIsPrimitive) {
+      return false;
+    }
+    if (aIsPrimitive && bIsPrimitive) {
+      return a === b;
+    }
+    // Back on something still being compared: a cycle. No loop, and no answer
+    // either — equal by a route that never ends is not equal.
+    if (seenSet.has(a) || seenSet.has(b)) {
+      return false;
+    }
+    // Held only while a and b are being compared, not for the rest of the
+    // walk: the same object is rightly met again elsewhere — in an unordered
+    // array every element of a is tried against every element of b.
+    seenSet.add(a);
+    seenSet.add(b);
+    const result = compareComposite(a, b);
+    seenSet.delete(a);
+    seenSet.delete(b);
+    return result;
+  };
+  const compareComposite = (a, b) => {
+    const aIsArray = Array.isArray(a);
+    const bIsArray = Array.isArray(b);
+    if (aIsArray !== bIsArray) {
+      return false;
+    }
+    if (aIsArray) {
+      // compare arrays
+      if (a.length !== b.length) {
+        return false;
+      }
+      if (ignoreArrayOrder) {
+        // Unordered array comparison: each element in 'a' must have a match in 'b'
+        const usedIndices = new Set();
+        for (let i = 0; i < a.length; i++) {
+          const aValue = a[i];
+          let foundMatch = false;
+
+          for (let j = 0; j < b.length; j++) {
+            if (usedIndices.has(j)) {
+              continue; // Already matched with another element
+            }
+            const bValue = b[j];
+            if (compareAt(aValue, bValue, i)) {
+              foundMatch = true;
+              usedIndices.add(j);
+              break;
+            }
+          }
+          if (!foundMatch) {
+            return false;
+          }
+        }
+        return true;
+      }
+      // Ordered array comparison (original behavior)
+      let i = 0;
+      while (i < a.length) {
+        const aValue = a[i];
+        const bValue = b[i];
+        if (!compareAt(aValue, bValue, i)) {
+          return false;
+        }
+        i++;
+      }
+      return true;
+    }
+    // compare objects
+    const aIdentity = a[SYMBOL_IDENTITY];
+    const bIdentity = b[SYMBOL_IDENTITY];
+    if (
+      aIdentity === bIdentity &&
+      SYMBOL_IDENTITY in a &&
+      SYMBOL_IDENTITY in b
+    ) {
+      return true;
+    }
+    // Date objects must be compared by time value, not by enumerable keys (which are empty)
+    const aIsDate = a instanceof Date;
+    const bIsDate = b instanceof Date;
+    if (aIsDate !== bIsDate) {
+      return false;
+    }
+    if (aIsDate) {
+      return a.getTime() === b.getTime();
+    }
+    // A signal is a source of truth, not a value: two of them holding the same
+    // thing right now say nothing about the next tick, and one may change while
+    // the other does not. Their internals (the current value, a version
+    // counter) are enumerable, so without this they would be walked and two
+    // unrelated signals would pass for one — a params signal owned by one
+    // screen would then be handed the action bound to another's.
+    if (isSignal(a) || isSignal(b)) {
+      return false;
+    }
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) {
+      return false;
+    }
+    if (aKeys.length === 0 && (!isPlainObject$1(a) || !isPlainObject$1(b))) {
+      // A Set, a Map, an element, a URL: nothing enumerable to tell two of them
+      // apart, so they are the same one or they are not — and they are not,
+      // reference equality came first.
+      return false;
+    }
+    if (lightKeySet) {
+      // compare light keys first, then remaining keys
+      // (optimization for cases where some keys are more likely to differ and/or faster to compare)
+      const keySet = new Set(aKeys);
+      for (const lightKey of lightKeySet) {
+        const aValue = a[lightKey];
+        const bValue = b[lightKey];
+        if (!compareAt(aValue, bValue, lightKey)) {
+          return false;
+        }
+        keySet.delete(lightKey);
+      }
+      for (const key of keySet) {
+        const aValue = a[key];
+        const bValue = b[key];
+        if (!compareAt(aValue, bValue, key)) {
+          return false;
+        }
+      }
+    } else {
+      for (const key of aKeys) {
+        const aValue = a[key];
+        const bValue = b[key];
+        if (!compareAt(aValue, bValue, key)) {
+          return false;
+        }
+      }
+    }
+    return true;
+  };
+  const compareAt = keyComparator
+    ? (a, b, keyOrArrayIndex) => keyComparator(a, b, keyOrArrayIndex, compare)
+    : compare;
 
-// Date/time placeholder tokens — shown when no value is selected
-// Override any key to adapt to your language conventions
-naviI18n.addAll({
-  "time.placeholder.day": {
-    fr: "jj",
-    en: "dd",
-    de: "TT",
-    es: "dd",
-    it: "gg",
-    pt: "dd",
-    nl: "dd",
-  },
-  "time.placeholder.month": {
-    fr: "mm",
-    en: "mm",
-    de: "MM",
-    es: "mm",
-    it: "mm",
-    pt: "mm",
-    nl: "mm",
-  },
-  "time.placeholder.year": {
-    fr: "aaaa",
-    en: "yyyy",
-    de: "JJJJ",
-    es: "aaaa",
-    it: "aaaa",
-    pt: "aaaa",
-    nl: "jjjj",
-  },
-  "time.placeholder.hour": {
-    fr: "hh",
-    en: "hh",
-    de: "hh",
-    es: "hh",
-    it: "hh",
-    pt: "hh",
-    nl: "uu",
-  },
-  "time.placeholder.minute": {
-    fr: "mm",
-    en: "mm",
-    de: "mm",
-    es: "mm",
-    it: "mm",
-    pt: "mm",
-    nl: "mm",
-  },
-  "time.placeholder.week": {
-    fr: "sem.",
-    en: "wk",
-    de: "KW",
-    es: "sem.",
-    it: "sett.",
-    pt: "sem.",
-    nl: "wk",
-  },
-});
+  return compare(rootA, rootB);
+};
 
-/*
- * The network policy: one declaration saying whether a request may go out,
- * read by the action layer rather than by every callback.
- *
- * Under a policy (a truthy reason):
- * - a resource GET answers with the row its store holds for it — named by its
- *   params, or the one it last completed with — and asks nothing
- *   (resource_graph.js, applyNetworkPolicy); a completed read
- *   asked to rerun stays completed (actions.js, handleActionRequest);
- *   anything else settles with an OfflineError carrying the reason;
- * - a control bound to a write — or inside a form bound to one — is read-only
- *   and says why (control_hooks.jsx, readonly_constraint.js).
- *
- * The reason is a value rather than a boolean because "no network" and
- * "offline mode" are not said the same way to the user: the error and the
- * read-only message both carry it, and the app decides the words.
- *
- * Only actions declaring a verb (`meta.verb`, which every resource action
- * has) are subject to the policy: a plain `createAction` may not touch the
- * network at all, and navi has no way to tell.
- */
+const isPlainObject$1 = (value) => {
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+};
 
-const WRITE_VERB_SET = new Set(["POST", "PUT", "PATCH", "DELETE"]);
+const debounceSignal = (
+  signalToDebounce,
+  { delay = 300, deepCompare = true } = {},
+) => {
+  let timeoutId;
+  let latestValue = signalToDebounce.peek();
+  const debouncedSignal = signal(latestValue);
 
-const networkPolicySignal = signal({
-  source: null,
-  readOnlyMessage: undefined,
-});
+  effect(() => {
+    const value = signalToDebounce.value;
+    const debouncedValue = debouncedSignal.peek();
+    if (
+      deepCompare
+        ? compareTwoJsValues(value, debouncedValue)
+        : value === debouncedValue
+    ) {
+      return;
+    }
+    clearTimeout(timeoutId);
+    latestValue = value;
+    timeoutId = setTimeout(() => {
+      debouncedSignal.value = latestValue;
+    }, delay);
+  });
+
+  debouncedSignal.flush = () => {
+    clearTimeout(timeoutId);
+    debouncedSignal.value = latestValue;
+  };
+  // Whoever reads the debounced value gets the previous one during the delay,
+  // with nothing saying a newer one is on its way. This says it.
+  debouncedSignal.settlingSignal = computed(() => {
+    return !compareTwoJsValues(signalToDebounce.value, debouncedSignal.value);
+  });
+
+  return debouncedSignal;
+};
+
+const debouncedSignalCache = new WeakMap();
 
 /**
- * Declares whether requests may go out.
- *
- * @param {import("@preact/signals").Signal | Function | any} source - where the
- *   reason is read from: a signal (followed live), a function (called on each
- *   read), or a plain value. A falsy reason means "go to the network"; any
- *   truthy value means "do not", and is handed to the `OfflineError` an action
- *   settles with (`error.reason`) so a screen can say which kind of offline it is.
- * @param {Object} [options]
- * @param {string | ((reason: any) => string)} [options.readOnlyMessage] - what a
- *   control held back by the policy answers when pressed; defaults to navi's
- *   `constraint.readonly.network_policy` text.
- * @see docs/offline.md
+ * The one debounced signal for a given source and delay.
  *
- * @example
- * const offlineReasonSignal = computed(() =>
- *   offlineChosenSignal.value ? "chosen" : deviceOfflineSignal.value ? "device" : null,
- * );
- * setNetworkPolicy(offlineReasonSignal, {
- *   readOnlyMessage: (reason) =>
- *     reason === "device" ? "No network: this cannot be sent." : "Offline mode: this cannot be sent.",
- * });
+ * Two callers asking the same question of the same signal must wait on the same
+ * answer: a debounced signal per caller is a timer per caller, and the actions
+ * derived from them are then several instances of what is one request.
  */
-const setNetworkPolicy = (source, { readOnlyMessage } = {}) => {
-  networkPolicySignal.value = { source, readOnlyMessage };
+const getDebouncedSignal = (signalToDebounce, delay) => {
+  let byDelay = debouncedSignalCache.get(signalToDebounce);
+  if (!byDelay) {
+    byDelay = new Map();
+    debouncedSignalCache.set(signalToDebounce, byDelay);
+  }
+  const existing = byDelay.get(delay);
+  if (existing) {
+    return existing;
+  }
+  const debouncedSignal = debounceSignal(signalToDebounce, { delay });
+  byDelay.set(delay, debouncedSignal);
+  return debouncedSignal;
 };
 
 /**
- * The policy's reason, `null` when requests may go out. Read in a component
- * render, it follows the policy as it changes.
+ * jsenv/navi - createJsValueWeakMap
+ *
+ * Key/value cache with true ephemeron behavior and deep equality support.
+ *
+ * Features:
+ * - Mutual retention: key keeps value alive, value keeps key alive
+ * - Deep equality: different objects with same content are treated as identical keys
+ * - Automatic GC: entries are eligible for collection when unreferenced
+ * - Iteration support: can iterate over live entries for deep equality lookup
+ *
+ * Implementation:
+ * - Dual WeakMap (key->value, value->key) provides ephemeron behavior
+ * - WeakRef registry enables iteration without preventing GC
+ * - Primitives stored in Map (permanent retention - avoid for keys)
+ *
+ * Use case: Action caching where params (key) and action (value) should have
+ * synchronized lifetimes while allowing natural garbage collection.
  */
-const useNetworkPolicyReason = () => {
-  return readReason(networkPolicySignal.value.source);
-};
 
-// For the action layer: the same answer without subscribing whoever asks.
-const peekNetworkPolicyReason = () => {
-  return untracked(() => readReason(networkPolicySignal.peek().source));
-};
 
-const isRerunHeldByNetworkPolicy = (action) => {
-  return action.meta.verb === "GET" && peekNetworkPolicyReason() !== null;
-};
+const createJsValueWeakMap = () => {
+  // Core ephemeron maps for mutual retention
+  const keyToValue = new WeakMap(); // key -> value
+  const valueToKey = new WeakMap(); // value -> key
 
-const isWriteAction = (action) => {
-  return WRITE_VERB_SET.has(action.meta.verb);
+  // Registry for iteration/deep equality (holds WeakRefs)
+  const keyRegistry = new Set(); // Set of WeakRef(key)
+
+  // Primitive cache
+  const primitiveCache = new Map();
+
+  function cleanupKeyRegistry() {
+    for (const keyRef of keyRegistry) {
+      if (keyRef.deref() === undefined) {
+        keyRegistry.delete(keyRef);
+      }
+    }
+  }
+
+  return {
+    *[Symbol.iterator]() {
+      cleanupKeyRegistry();
+      for (const keyRef of keyRegistry) {
+        const key = keyRef.deref();
+        if (key && keyToValue.has(key)) {
+          yield [key, keyToValue.get(key)];
+        }
+      }
+      for (const [k, v] of primitiveCache) {
+        yield [k, v];
+      }
+    },
+
+    get(key) {
+      const isObject =
+        key && (typeof key === "object" || typeof key === "function");
+      if (isObject) {
+        // Fast path: exact key match
+        if (keyToValue.has(key)) {
+          return keyToValue.get(key);
+        }
+
+        // Slow path: deep equality search
+        cleanupKeyRegistry();
+        for (const keyRef of keyRegistry) {
+          const existingKey = keyRef.deref();
+          if (existingKey && compareTwoJsValues(existingKey, key)) {
+            return keyToValue.get(existingKey);
+          }
+        }
+        return undefined;
+      }
+      return primitiveCache.get(key);
+    },
+
+    set(key, value) {
+      const isObject =
+        key && (typeof key === "object" || typeof key === "function");
+      if (isObject) {
+        cleanupKeyRegistry();
+
+        // Remove existing deep-equal key
+        for (const keyRef of keyRegistry) {
+          const existingKey = keyRef.deref();
+          if (existingKey && compareTwoJsValues(existingKey, key)) {
+            const existingValue = keyToValue.get(existingKey);
+            keyToValue.delete(existingKey);
+            valueToKey.delete(existingValue);
+            keyRegistry.delete(keyRef);
+            break;
+          }
+        }
+
+        // Set ephemeron pair
+        keyToValue.set(key, value);
+        valueToKey.set(value, key);
+        keyRegistry.add(new WeakRef(key));
+      } else {
+        primitiveCache.set(key, value);
+      }
+    },
+
+    delete(key) {
+      const isObject =
+        key && (typeof key === "object" || typeof key === "function");
+      if (isObject) {
+        cleanupKeyRegistry();
+
+        // Try exact match first
+        if (keyToValue.has(key)) {
+          const value = keyToValue.get(key);
+          keyToValue.delete(key);
+          valueToKey.delete(value);
+
+          // Remove from registry
+          for (const keyRef of keyRegistry) {
+            if (keyRef.deref() === key) {
+              keyRegistry.delete(keyRef);
+              break;
+            }
+          }
+          return true;
+        }
+
+        // Try deep equality
+        for (const keyRef of keyRegistry) {
+          const existingKey = keyRef.deref();
+          if (existingKey && compareTwoJsValues(existingKey, key)) {
+            const value = keyToValue.get(existingKey);
+            keyToValue.delete(existingKey);
+            valueToKey.delete(value);
+            keyRegistry.delete(keyRef);
+            return true;
+          }
+        }
+        return false;
+      }
+      return primitiveCache.delete(key);
+    },
+
+    getStats: () => {
+      cleanupKeyRegistry();
+      const aliveKeys = Array.from(keyRegistry).filter((ref) =>
+        ref.deref(),
+      ).length;
+
+      return {
+        ephemeronPairs: {
+          total: keyRegistry.size,
+          alive: aliveKeys,
+          note: "True ephemeron: key ↔ value mutual retention via dual WeakMap",
+        },
+        primitive: {
+          total: primitiveCache.size,
+          note: "Primitive keys never GC'd",
+        },
+      };
+    },
+  };
 };
 
-const getNetworkPolicyReadOnlyMessage = () => {
-  const { readOnlyMessage } = networkPolicySignal.peek();
-  if (typeof readOnlyMessage === "function") {
-    return readOnlyMessage(peekNetworkPolicyReason());
+const MERGE_AS_PRIMITIVE_SYMBOL = Symbol("navi_merge_as_primitive");
+
+const mergeTwoJsValues = (firstValue, secondValue) => {
+  const firstIsPrimitive =
+    firstValue === null ||
+    typeof firstValue !== "object" ||
+    MERGE_AS_PRIMITIVE_SYMBOL in firstValue;
+
+  if (firstIsPrimitive) {
+    return secondValue;
   }
-  if (readOnlyMessage) {
-    return readOnlyMessage;
+  const secondIsPrimitive =
+    secondValue === null ||
+    typeof secondValue !== "object" ||
+    MERGE_AS_PRIMITIVE_SYMBOL in secondValue;
+  if (secondIsPrimitive) {
+    return secondValue;
   }
-  return naviI18n("constraint.readonly.network_policy");
-};
+  const objectMerge = {};
+  const firstKeys = Object.keys(firstValue);
+  const secondKeys = Object.keys(secondValue);
+  let hasChanged = false;
 
-/**
- * The error of a request that never left: the policy said not to.
- * `reason` is the policy's value at that moment.
- */
-class OfflineError extends Error {
-  constructor(reason, message = naviI18n("network_policy.offline")) {
-    super(message);
-    this.name = "OfflineError";
-    this.reason = reason;
-    // A flag beside the class: the error crosses layers that may copy it, and
-    // instanceof does not survive a copy.
-    this.offline = true;
+  // First loop: check for keys in first object and recursively merge with second
+  for (const key of firstKeys) {
+    const firstValueForKey = firstValue[key];
+    const secondHasKey = secondKeys.includes(key);
+
+    if (secondHasKey) {
+      const secondValueForKey = secondValue[key];
+      const mergedValue = mergeTwoJsValues(firstValueForKey, secondValueForKey);
+      objectMerge[key] = mergedValue;
+      if (mergedValue !== firstValueForKey) {
+        hasChanged = true;
+      }
+    } else {
+      objectMerge[key] = firstValueForKey;
+    }
   }
-}
 
-const isOfflineError = (error) => {
-  return Boolean(error && error.offline);
-};
+  for (const key of secondKeys) {
+    if (firstKeys.includes(key)) {
+      continue;
+    }
+    objectMerge[key] = secondValue[key];
+    hasChanged = true;
+  }
 
-const readReason = (source) => {
-  if (!source) {
-    return null;
+  if (!hasChanged) {
+    return firstValue;
   }
-  let reason;
-  if (isSignal(source)) {
-    reason = source.value;
-  } else if (typeof source === "function") {
-    reason = source();
-  } else {
-    reason = source;
+  return objectMerge;
+};
+
+/**
+ * Creates an effect that uses WeakRef to prevent garbage collection of referenced values.
+ *
+ * This utility is useful when you want to create reactive effects that watch objects
+ * without preventing those objects from being garbage collected. If any of the referenced
+ * values is collected, the effect automatically disposes itself.
+ *
+ * @param {Array} values - Array of values to create weak references for
+ * @param {Function} callback - Function to call when the effect runs, receives dereferenced values as arguments
+ * @returns {Function} dispose - Function to manually dispose the effect
+ *
+ * @example
+ * ```js
+ * const objectA = { name: "A" };
+ * const objectB = { name: "B" };
+ * const prefixSignal = signal('demo');
+ *
+ * const dispose = weakEffect([objectA, objectB], (a, b) => {
+ *   const prefix = prefixSignal.value
+ *   console.log(prefix, a.name, b.name);
+ * });
+ *
+ * // Effect will auto-dispose if objectA or objectB where garbage collected
+ * // or can be manually disposed:
+ * dispose();
+ * ```
+ */
+const weakEffect = (values, callback) => {
+  const weakRefSet = new Set();
+  for (const value of values) {
+    weakRefSet.add(new WeakRef(value));
   }
-  return reason || null;
+  const dispose = effect(() => {
+    const values = [];
+    for (const weakRef of weakRefSet) {
+      const value = weakRef.deref();
+      if (value === undefined) {
+        dispose();
+        return;
+      }
+      values.push(value);
+    }
+    callback(...values);
+  });
+  return dispose;
 };
 
 const SYMBOL_OBJECT_SIGNAL = Symbol.for("navi_object_signal");
@@ -17659,6 +17760,12 @@ const useActionAsyncData = (action, {
     }
     // Not marked: nothing is displayed yet — the boundary that catches this is
     // what says so, and only if it has something to show.
+    //
+    // And this render ends here: an action read further down — the one that was
+    // going to display its own error — is never reached. Said out loud, so the
+    // report does not blame the app for a failure nothing could take (see
+    // action_error_report.js).
+    markErrorAsStoppingRender(actionError);
     throw actionError;
   }
 
@@ -38892,7 +38999,7 @@ const TextAnchor = ({
       className: "navi_text_anchor",
       "aria-hidden": "true",
       hidden: true,
-      children: "\u200B"
+      children: "​"
     })]
   });
 };
@@ -39301,7 +39408,7 @@ const REGULAR_SPACE = jsx("span", {
 const FAKE_SPACE = jsx("span", {
   "data-navi-space": "",
   style: "padding-left: 0.25em",
-  children: "\u200B"
+  children: "​"
 });
 const CustomWidthSpace = ({
   value,
@@ -39324,13 +39431,13 @@ const CustomWidthSpace = ({
         children: " "
       }), jsx("span", {
         style: `padding-left: ${value}`,
-        children: "\u200B"
+        children: "​"
       })]
     });
   }
   return jsx("span", {
     style: `padding-left: ${value}`,
-    children: "\u200B"
+    children: "​"
   });
 };
 
@@ -39929,7 +40036,7 @@ const Icon = ({
       ref: textRef,
       children: [jsx("span", {
         style: "user-select:none",
-        children: "\u200B"
+        children: "​"
       }), innerChildren]
     })
   });
@@ -54026,7 +54133,7 @@ const TimeRelative = ({
   if (children === undefined) {
     return jsx(TimeText, {
       ...props,
-      children: "\u2013"
+      children: "–"
     });
   }
   const date = toDate(children);
@@ -61821,6 +61928,7 @@ const css$x = /* css */`@layer navi {
     --x-corner-top-right-radius: initial;
     --x-corner-bottom-right-radius: initial;
     --x-corner-bottom-left-radius: initial;
+    box-sizing: border-box;
     width: inherit;
     min-width: inherit;
     max-width: var(--list-max-width, inherit);
@@ -62143,6 +62251,14 @@ const css$x = /* css */`@layer navi {
   animation: none;
 }
 `;
+
+/* A padding on a list is space between its frame and its rows, so it belongs on
+   the scroll box and not on the frame around it: on the frame it insets the
+   scroll box as a whole, and the scrollbar — which is drawn at the edge of what
+   scrolls — comes off the list's edge by that same amount, floating in the
+   middle of the padding. On the scroll box the scrollbar stays against the
+   border and the padding is what separates the rows from it. */
+const LIST_PADDING_PROP_SET = new Set(["padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft"]);
 const ListUI = props => {
   import.meta.css = [css$x, "@jsenv/navi/src/control/list/list.jsx"];
   const {
@@ -62184,6 +62300,13 @@ const ListUI = props => {
     virtual,
     ...rest
   } = props;
+  const scrollBoxPaddingProps = {};
+  for (const name of LIST_PADDING_PROP_SET) {
+    if (name in rest) {
+      scrollBoxPaddingProps[name] = rest[name];
+      delete rest[name];
+    }
+  }
   // Accept a string (e.g. from an HTML attribute: renderBudget="50") the
   // same way a bare number would work — arithmetic below (renderBudget / 2,
   // start + renderBudget, etc.) would silently misbehave on a raw string
@@ -62338,7 +62461,7 @@ const ListUI = props => {
       children: [jsx("span", {
         className: "navi_list_error_icon",
         "aria-hidden": "true",
-        children: "\u26A0"
+        children: "⚠"
       }), jsx("span", {
         children: error === true ? "Something went wrong." : error
       })]
@@ -62441,6 +62564,7 @@ const ListUI = props => {
       overflow: overflow,
       overflowX: overflowX,
       overflowY: overflowY,
+      scrollBoxPaddingProps: scrollBoxPaddingProps,
       children: content
     })
   });
@@ -62678,6 +62802,7 @@ const ListContent = ({
   overflow,
   overflowX,
   overflowY,
+  scrollBoxPaddingProps,
   children
 }) => {
   const listProps = useContext(BoxForwardedPropsContext);
@@ -62686,6 +62811,7 @@ const ListContent = ({
     overflow: overflow,
     overflowX: overflowX,
     overflowY: overflowY,
+    ...scrollBoxPaddingProps,
     children: jsx(UnorderedList, {
       role: role,
       fallback: fallback,
@@ -64703,7 +64829,7 @@ const ListItemReal = props => {
       children: [jsx("span", {
         className: "navi_list_error_icon",
         "aria-hidden": "true",
-        children: "\u26A0"
+        children: "⚠"
       }), jsx("span", {
         className: "navi_list_item_error_message",
         children: error === true ? "Something went wrong." : error
@@ -65586,7 +65712,7 @@ const ListItemsFailure = ({
     children: [jsx("span", {
       className: "navi_list_error_icon",
       "aria-hidden": "true",
-      children: "\u26A0"
+      children: "⚠"
     }), jsx("span", {
       className: "navi_list_item_error_message",
       children: error && error.message ? error.message : naviI18n("list.rows_failed")
@@ -77747,7 +77873,7 @@ const ButtonCopyToClipboard = ({
       className: "navi_copied_notif",
       "aria-hidden": copied ? "false" : "true",
       opacity: copied ? 1 : 0,
-      children: "Copi\xE9 !"
+      children: "Copié !"
     }), jsx(Button, {
       className: "navi_copy_button",
       flex: "y",