@adecore/ui 0.38.0 → 0.40.0

package/dist/combobox/parts.js

@@ -9,12 +9,11 @@ import { Kbd } from "../Kbd.js";
 import { MENU_LABEL } from "../menu/parts.js";
 import { splitPlacement } from '../placement.js';
 import { renderPositioner } from '../popup-layer.js';
-/* A line in the list instead of rows: nothing found, a search still running. It takes no room while it has nothing to say. */
+/* It takes no room while it has nothing to say. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LIST_NOTE = 'text-center text-xs text-text-faint not-empty:px-3 not-empty:py-4';
 /* The field keeps free text: Base UI's autocomplete, whose suggestions only offer text, rather than its combobox, which holds a value. */
 export const ComboboxRoot = Autocomplete.Root;
-/* The field the suggestions open under, drawn as the library's `Input`. */
 export function ComboboxInput(t0) {
   const $ = _c(39);
   let className;
@@ -172,7 +171,6 @@ export function ComboboxInput(t0) {
   }
   return t15;
 }
-/* The portal, the positioner and the menu surface of the suggestions: under the field and at least as wide as it. */
 export function ComboboxPopup(t0) {
   const $ = _c(17);
   let align;
@@ -278,11 +276,7 @@ export function ComboboxList(props) {
   }
   return t1;
 }
-/*
- * One suggestion. Its children are the label. `onClick` runs for a click and for Enter on the
- * highlighted row; Base UI clicks the row for Enter, so a modifier held with Enter is read in the
- * field's `onKeyDown` instead.
- */
+/* Base UI clicks the row for Enter, so a modifier held with Enter is read in the field's `onKeyDown` instead. */
 export function ComboboxItem(t0) {
   const $ = _c(36);
   let children;
@@ -515,7 +509,7 @@ export function ComboboxEmpty(t0) {
   }
   return t2;
 }
-/* A line read out as it changes, such as a search that is still running or how many it found. It stays mounted; only its children come and go. */
+/* Read out as it changes. It stays mounted; only its children come and go. */
 export function ComboboxStatus(t0) {
   const $ = _c(8);
   let className;

package/dist/command-palette/parts.js

@@ -20,11 +20,7 @@ const SIZE = {
   md: 'w-[576px]',
   lg: 'w-[760px]'
 };
-/*
- * A dialog around a list that is always open. `open` and its handlers are the dialog's; the rest
- * is Base UI's autocomplete, so the query, the items and their filter work as in a combobox. The
- * first row is highlighted and stays so while the pointer leaves the list, which is what Enter runs.
- */
+/* `open` and its handlers are the dialog's; the rest is Base UI's autocomplete. The first row stays highlighted while the pointer leaves the list, which is what Enter runs. */
 export function CommandPaletteRoot({
   open,
   defaultOpen,
@@ -46,8 +42,7 @@ export function CommandPaletteRoot({
   const [focusHighlight, setFocusHighlight] = useState(false);
   /*
    * Base UI moves the highlight to the first row for a typed query only. For a query the app sets,
-   * the list is empty for one commit that is never painted: Base UI drops the highlight then and
-   * puts it on the first row of what comes back.
+   * the list is empty for one unpainted commit, so Base UI highlights the first row of what comes back.
    */
   const [settledValue, setSettledValue] = useState(value);
   const resetting = value !== undefined && value !== settledValue;
@@ -120,10 +115,7 @@ export function CommandPaletteRoot({
     })
   });
 }
-/*
- * The dialog's surface. It hangs from a fixed line near the top instead of the middle: the list
- * changes height with every key, and a centered popup would walk up and down the screen.
- */
+/* It hangs from a fixed line near the top: the list changes height with every key, and a centered popup would walk up and down. */
 export function CommandPalettePopup(t0) {
   const $ = _c(15);
   let className;
@@ -189,7 +181,7 @@ export function CommandPalettePopup(t0) {
   }
   return t5;
 }
-/* The field across the top. It keeps the keys while the arrows move the highlight; a control beside it should not take the focus on a click. */
+/* It keeps the keys while the arrows move the highlight; a control beside it should not take the focus on a click. */
 export function CommandPaletteInput(t0) {
   const $ = _c(29);
   let className;
@@ -312,7 +304,7 @@ export function CommandPaletteInput(t0) {
   }
   return t11;
 }
-/* The rows. It scrolls on its own, so the field and the footer stay put. */
+/* It scrolls on its own, so the field and the footer stay put. */
 export function CommandPaletteList(t0) {
   const $ = _c(21);
   let className;
@@ -406,7 +398,6 @@ export function CommandPaletteList(t0) {
   }
   return t6;
 }
-/* Under the list: the keys that work here, a count, an action that leaves the palette. */
 export function CommandPaletteFooter(t0) {
   const $ = _c(14);
   let className;

package/dist/dialog/parts.js

@@ -5,10 +5,9 @@ import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import { useRender } from '@base-ui/react/use-render';
 import { withClass } from '../class-name.js';
 import { useDialogLayer } from '../dialog-layer.js';
-/* Whether the dialog is open, for its popup to decide whether it stacks over another one. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DialogOpenContext = createContext(false);
-/* A question or a form of a few fields. Every one is as wide as the others, whatever it asks. */
+/* Every question is as wide as the others, whatever it asks. */
 const SIZE = {
   sm: 'w-[420px] p-5'
 };
@@ -83,11 +82,7 @@ export function DialogRoot(t0) {
 }
 export const DialogTrigger = BaseDialog.Trigger;
 export const DialogClose = BaseDialog.Close;
-/*
- * The portal, the backdrop and the popup of a dialog in one part. A dialog that opens while another
- * one is up, such as one from the menu bar over a settings dialog, takes the nested steps and a
- * backdrop of its own, or the one underneath stays on top and keeps taking clicks.
- */
+/* The portal, the backdrop and the popup of a dialog in one part; `useDialogLayer` says whether it stacks. */
 export function DialogPopup(t0) {
   const $ = _c(23);
   let backdropClassName;
@@ -225,7 +220,7 @@ const DESCRIPTION = {
   sm: 'text-sm text-text-muted',
   xs: 'text-xs text-text-muted'
 };
-/* The sentence under the title, which is also what a screen reader reads as the dialog's description. It carries no margin. */
+/* What a screen reader reads as the dialog's description. It carries no margin. */
 export function DialogDescription(t0) {
   const $ = _c(10);
   let className;
@@ -271,7 +266,7 @@ export function DialogDescription(t0) {
   }
   return t4;
 }
-/* A further line in the style of the description that is not the dialog's description: a warning, a note under a choice. */
+/* Styled as the description without being the dialog's description. */
 export function DialogText(t0) {
   const $ = _c(16);
   let className;
@@ -340,7 +335,7 @@ export function DialogText(t0) {
   }
   return useRender(t5);
 }
-/* The buttons at the foot of a dialog, the main action last and so on the right. */
+/* The main action goes last, and so on the right. */
 export function DialogFooter(t0) {
   const $ = _c(14);
   let className;

package/dist/dialog-layer.js

@@ -3,9 +3,8 @@ import { useLayoutEffect, useRef, useState } from 'react';
 // The app-level dialogs open right now. Each one is its own root, so Base UI does not see them as nested.
 const open = new Set();
 /*
- * Whether a dialog opened while another app-level dialog was already up, such as one opened from the
- * menu bar over a settings dialog. Such a dialog takes the nested steps (`dialog-backdrop-nested`,
- * `dialog-popup-nested`, a forced backdrop), or the one underneath stays on top and keeps taking clicks.
+ * Whether a dialog opened over another app-level dialog. Such a dialog takes the nested steps
+ * (`dialog-backdrop-nested`, `dialog-popup-nested`, a forced backdrop), or the one underneath stays on top and keeps taking clicks.
  */
 export function useDialogLayer(isOpen) {
   const $ = _c(5);

package/dist/error-boundary.js

@@ -1,12 +1,5 @@
-/*
- * The pure half of `ErrorBoundary`: when a failed subtree gets another try, and what a person copies
- * out of the message. Kept apart so it can be tested without a DOM.
- */
-/*
- * Whether a boundary that holds an error should draw its children again. Only a boundary that
- * failed resets. Comparing keys while the children are fine would remount a terminal or an embedded
- * page every time the data under it changes.
- */
+/* The pure half of `ErrorBoundary`, kept apart so it can be tested without a DOM. */
+/* Only a failed boundary resets: comparing keys while the children are fine would remount a terminal or an embedded page on every change. */
 export const shouldReset = (failed, previous, next) => {
   if (!failed) {
     return false;
@@ -17,18 +10,9 @@ export const shouldReset = (failed, previous, next) => {
   return previous.some((key, i) => !Object.is(key, next[i]));
 };
 /* A thrown value is not always an Error, and the message has to say something either way. */
-export const errorMessageOf = error => {
-  if (error instanceof Error) {
-    return error.message || error.name;
-  }
-  return typeof error === 'string' ? error : String(error);
-};
+export const errorMessageOf = error => error instanceof Error ? error.message || error.name : String(error);
 /* The text behind the copy button: what a bug report needs, the component stack included. */
 export const errorReport = (label, error, componentStack) => {
   const stack = error instanceof Error && error.stack ? error.stack : errorMessageOf(error);
-  const parts = [label, stack];
-  if (componentStack) {
-    parts.push(`Component stack:${componentStack}`);
-  }
-  return parts.join('\n\n');
+  return [label, stack, ...(componentStack ? [`Component stack:${componentStack}`] : [])].join('\n\n');
 };

package/dist/file-icon.js

@@ -1,10 +1,8 @@
 import { createFileTreeIconResolver } from '@pierre/trees';
 import { SETI_BY_FILE_EXTENSION, SETI_BY_FILE_NAME, SETI_BY_FILE_NAME_CONTAINS, SETI_DEFAULT_SYMBOL, SETI_SPRITE_SHEET } from './seti-icons.js';
 const SPRITE_ELEMENT_ID = 'adecore-ui-file-icon-sprite';
-/* Hand this to the tree. The glyphs are Seti's (`seti-icons.ts`), which knows far more file types than
-   the tree's own sets. The tree colors only those, so every symbol carries its hue in its id and the
-   sprite brings the rules that color it. Everything drawn beside a tree calls `fileIconFor`, so a tab,
-   a picker row and a tree row never disagree about what a file is. */
+/* Seti knows far more file types than the tree's own sets. The tree colors only those, so every symbol
+   carries its hue in its id and the sprite brings the rules that color it. */
 export const FILE_TREE_ICONS = {
   set: 'none',
   spriteSheet: SETI_SPRITE_SHEET,
@@ -22,11 +20,8 @@ const resolveIcon = (...args) => {
   return resolver.resolveIcon(...args);
 };
 /*
- * The id of the `<symbol>` the set gives a file, in the sprite `mountFileIconSprite` puts in the
- * document. Only the last segment of the path decides, first by exact name (`package.json`), then by
- * a part of the name (`Dockerfile.dev`), then by the longest extension that matches (`spec.ts` before
- * `ts`). Anything else falls back to the generic file icon, a directory included: the tree marks a
- * folder with its chevron, not a glyph.
+ * The id of a `<symbol>` in the sprite `mountFileIconSprite` puts in the document. A directory gets the
+ * generic file icon: the tree marks a folder with its chevron, not a glyph.
  */
 export const fileIconFor = path => resolveIcon('file-tree-icon-file', path).name;
 /* The tree carries the sprite into its own shadow root, out of reach of anything that draws an

package/dist/file-tree/empty-lines.js

@@ -13,10 +13,7 @@ export function isEmptyLine(path) {
 export function directoryOfEmptyLine(path) {
   return path.slice(0, -EMPTY_LINE_NAME.length);
 }
-/*
- * The lines to add and the ones to take away: an open directory whose label is not undefined and
- * that holds nothing besides its own line gets one, every other line the wrapper added goes.
- */
+/* An open, labeled directory that holds nothing besides its own line gets one; every other line the wrapper added goes. */
 export function emptyLineChanges(rows, labelOf, has, added) {
   const wanted = new Set();
   rows.forEach((row, index) => {
@@ -38,10 +35,7 @@ export function emptyLineChanges(rows, labelOf, has, added) {
     remove: [...added].filter(line => !wanted.has(line) && has(line))
   };
 }
-/*
- * Where an arrow, Home or End goes instead when the row it would land on is a line: past it, or
- * nowhere (the focused path itself) where nothing lies past it. Null when no line is in the way.
- */
+/* Past the line the key would land on, or the focused path itself where nothing lies past it. Null when no line is in the way. */
 export function pastEmptyLine(model, key) {
   const index = model.getFocusedIndex();
   const focused = model.getFocusedPath();

package/dist/file-tree/use-empty-lines.js

@@ -6,11 +6,7 @@ const POINTER_EVENTS = ['pointerdown', 'mousedown', 'click', 'dblclick', 'auxcli
 function onEmptyLine(event) {
   return event.composedPath().some(node => node instanceof HTMLElement && node.dataset.emptyLine === 'true');
 }
-/*
- * Keeps a line under every open directory that is known to be empty, and keeps the line out of
- * reach: a pointer on it does nothing and a key passes it. Returns what to call with every key the
- * tree hears, after anything that notes where focus was.
- */
+/* A pointer on a line does nothing and a key passes it. Call what it returns with every key the tree hears, after anything that notes where focus was. */
 export function useEmptyLines(model, frame, emptyLabel) {
   const $ = _c(12);
   const latest = useRef(emptyLabel);

package/dist/file-tree/use-slots.js

@@ -5,9 +5,8 @@ import { pathOfRow, visibleRows, visibleRowsAround } from './helpers.js';
 import { matchHighlight, rangesOfMatches } from './highlight.js';
 import { FILE_TREE_CSS } from './style.js';
 /*
- * The rows of the mounted window, read from the spacer beta.6 puts above it (its first index times the
- * row height), so a scroll frame copies those and not every visible row. The whole list stands in when
- * the spacer is missing or the model already moved past what is mounted.
+ * Read from the spacer beta.6 puts above the mounted window, so a scroll frame copies those rows and not
+ * every visible one. The whole list stands in when the spacer is missing or the model moved past it.
  */
 function mountedRows(model, shadow, elements) {
   const spacer = shadow.querySelector('[data-file-tree-virtualized-sticky-offset]');
@@ -22,10 +21,7 @@ function mountedRows(model, shadow, elements) {
   const paths = new Set(rows.map(row => row.path));
   return elements.every(element => element.dataset.itemPath === undefined || paths.has(element.dataset.itemPath)) ? rows : visibleRows(model);
 }
-/*
- * Lines the ports up with their rows: every size first, then the spaces they reserve, then every offset,
- * then the ports, so a pass forces two layouts at most however many rows are mounted.
- */
+/* Every size first, then the spaces, then every offset, then the ports, so a pass forces two layouts at most. */
 export function positionPorts(ports, order = 'before-status') {
   const spaced = [...ports].map(port => ({
     port,
@@ -164,9 +160,9 @@ export function useFileTreeSlots(model, frame, label, {
       dropIcon(port);
     };
     const clearPort = port_0 => {
-      port_0.rowElement.style.removeProperty('--adecore-tree-control-space');
-      port_0.rowElement.style.removeProperty('--adecore-tree-decoration-space');
-      port_0.rowElement.style.removeProperty('--adecore-tree-status-space');
+      for (const name of ['--adecore-tree-control-space', '--adecore-tree-decoration-space', '--adecore-tree-status-space']) {
+        port_0.rowElement.style.removeProperty(name);
+      }
       delete port_0.rowElement.dataset.ownIcon;
       dropPort(port_0);
     };

package/dist/format/datetime.js

@@ -4,11 +4,8 @@ import { dateFormatter, wordFormatter } from './locale.js';
 const WORD_PARTS = new Set(['month', 'weekday', 'dayPeriod', 'era']);
 const toDate = at => typeof at === 'number' ? new Date(at) : at;
 /*
- * A date written the way the region writes one, with its words in the language the interface is in.
- * Both formatters get the same options and the same instant, so every part the region asks for has
- * one to lift the word from, whatever order the two put them in: `19 Sep` in English against a Dutch
- * region, `19 sep` once the interface is Dutch too, and a clock that reads `08:05` wherever the
- * region does not say AM.
+ * The region's notation with the language's words: `19 Sep` in English against a Dutch region. Both
+ * formatters get the same options and instant, so every word part has one to lift, whatever the order.
  */
 export const formatDateTime = (at, options) => {
   const date = toDate(at);
@@ -69,14 +66,32 @@ const NUMERIC_DATE = {
   month: 'numeric',
   day: 'numeric'
 };
+const zonedSpecs = new WeakMap();
+/* One options object per zone, so the formatter cached on it is built once (`dateFormatter`). */
+const zoned = (options, timeZone) => {
+  if (timeZone === undefined) {
+    return options;
+  }
+  let byZone = zonedSpecs.get(options);
+  if (byZone === undefined) {
+    byZone = new Map();
+    zonedSpecs.set(options, byZone);
+  }
+  let spec = byZone.get(timeZone);
+  if (spec === undefined) {
+    spec = {
+      ...options,
+      timeZone
+    };
+    byZone.set(timeZone, spec);
+  }
+  return spec;
+};
 /*
- * `08:05`, or `08:05 AM` in a region that counts to twelve. The clock functions below take the `timeZone`
- * to write in, such as `UTC` for a moment whose parts are given and mean the same wall clock anywhere.
+ * `08:05`, or `08:05 AM` in a region that counts to twelve. A `timeZone` such as `UTC` writes a moment
+ * whose parts are given and mean the same wall clock anywhere.
  */
-export const formatClock = (at, timeZone) => formatDateTime(at, timeZone === undefined ? CLOCK : {
-  ...CLOCK,
-  timeZone
-});
+export const formatClock = (at, timeZone) => formatDateTime(at, zoned(CLOCK, timeZone));
 /* A time far enough off that its day is part of the answer: `Sat 08:05`. */
 export const formatWeekdayClock = at => formatDateTime(at, WEEKDAY_CLOCK);
 /* An hour of the day on its own, for the foot of a chart: `08`, or `8 AM` where that is the clock. */
@@ -84,30 +99,18 @@ export const formatHour = at => formatDateTime(at, HOUR);
 /* The day of the week on its own, for the side of a grid by weekday: `Sat`, or `Saturday` when `long`. */
 export const formatWeekday = (at, width = 'short') => formatDateTime(at, width === 'long' ? WEEKDAY_LONG : WEEKDAY);
 /* `19 Sep`, the short date a row falls back to once "days ago" stops meaning anything. */
-export const formatDay = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY : {
-  ...DAY,
-  timeZone
-});
+export const formatDay = (at, timeZone) => formatDateTime(at, zoned(DAY, timeZone));
 /* The same date with the year, for anything older than the one we are in. */
-export const formatDayWithYear = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY_WITH_YEAR : {
-  ...DAY_WITH_YEAR,
-  timeZone
-});
+export const formatDayWithYear = (at, timeZone) => formatDateTime(at, zoned(DAY_WITH_YEAR, timeZone));
 /* `Sat 19 Sep`. */
 export const formatWeekdayDay = at => formatDateTime(at, WEEKDAY_DAY);
 /* `19 Sep, 08:05`: a moment that is not today, to the minute. */
-export const formatDayClock = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY_CLOCK : {
-  ...DAY_CLOCK,
-  timeZone
-});
-/* `19 Sep 2026, 08:05`: the same moment with the year, for one that is not in the year we are in. */
-export const formatDayClockWithYear = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY_CLOCK_WITH_YEAR : {
-  ...DAY_CLOCK_WITH_YEAR,
-  timeZone
-});
+export const formatDayClock = (at, timeZone) => formatDateTime(at, zoned(DAY_CLOCK, timeZone));
+/* `19 Sep 2026, 08:05`: the same moment with the year. */
+export const formatDayClockWithYear = (at, timeZone) => formatDateTime(at, zoned(DAY_CLOCK_WITH_YEAR, timeZone));
 /* All numbers, as a form would print it: `19-9-2026` here, `9/19/2026` in the United States. */
 export const formatNumericDate = at => formatDateTime(at, NUMERIC_DATE);
-/* Whether two instants fall on the same day of the same year, in the zone of whoever is reading. */
+/* In the zone of whoever is reading. */
 export const isSameDay = (a, b) => {
   const left = toDate(a);
   const right = toDate(b);

package/dist/format/duration.js

@@ -4,11 +4,7 @@ const SECOND = 1000;
 const MINUTE = 60 * SECOND;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
-/*
- * How long something took, at the coarsest unit that still says something. The units are English
- * abbreviations, the way the rest of the interface is written; only the number bends to the region,
- * which is what `1,5 h` against `1.5 h` is about.
- */
+/* At the coarsest unit that still says something. The units stay English; only the number bends to the region (`1,5 h`). */
 export const formatDuration = ms => {
   const seconds = Math.max(0, Math.round(ms / SECOND));
   if (seconds < 60) {
@@ -54,11 +50,7 @@ export const formatCountdown = ms => {
   }
   return `${formatNumber(Math.max(1, Math.round(left / MINUTE)))}m`;
 };
-/*
- * How long something has been running, to two units and no space to spare: `12s`, `2m 5s`, `3h 20m`.
- * A call that took a fraction of a second still took some, so anything above zero reads as at least
- * `1s`; only a clock that runs ahead of the start comes out as `0s`.
- */
+/* `12s`, `2m 5s`, `3h 20m`. Anything above zero reads as at least `1s`; only a clock that runs ahead of the start comes out as `0s`. */
 export const formatElapsedShort = ms => {
   const seconds = ms <= 0 ? 0 : Math.max(1, Math.round(ms / SECOND));
   if (seconds < 60) {

package/dist/format/locale.js

@@ -11,19 +11,16 @@ export const setFormatSource = next => {
   source = next;
   return previous;
 };
-/* Where a language comes from when nothing else says: the country most of its speakers are in. */
+/* The country most of a language's speakers are in. */
 const LANGUAGE_REGIONS = {
   en: 'en-US',
   nl: 'nl-NL'
 };
-/* The one locale to fall back on, so a format never depends on which machine ran the test. */
+/* So a format never depends on which machine ran the test. */
 export const FALLBACK_LOCALE = 'en-US';
-/* A month and a weekday are words, so they come from the language the interface is in, while the
-   order, the separators and the clock come from the region. English words in a Dutch notation is
-   what a Dutch Mac running an English app should read like, and both halves are a person's to set. */
+/* A month and a weekday are words, so they come from the language; the order, the separators and the clock come from the region. */
 export const wordLocale = () => source.language();
-/* A tag `Intl` will take, or nothing. macOS hands out locales with overrides attached, and a
-   formatter built on one it does not know throws where a number was meant to go. */
+/* macOS hands out locales with overrides attached, and a formatter built on one `Intl` does not know throws. */
 const usable = tag => {
   if (tag === undefined || tag === '') {
     return null;
@@ -35,10 +32,8 @@ const usable = tag => {
   }
 };
 /*
- * What the operating system was set to read numbers and dates in. In a desktop shell Chromium's own
- * locale is the language of the app bundle, so an English bundle on a Dutch Mac would still hand back
- * `en-US` and write `08:00 AM`; the shell reads the system's region instead and passes it in
- * (`systemLocale`). A browser has no such thing, so there the language is the best there is.
+ * In a desktop shell Chromium's locale is the language of the app bundle, so an English bundle on a
+ * Dutch Mac would write `08:00 AM`; the shell passes the system's region in instead (`systemLocale`).
  */
 export const systemLocale = () => {
   const fromShell = usable(source.systemLocale?.());
@@ -50,11 +45,7 @@ export const systemLocale = () => {
   }
   return usable(navigator.languages?.[0] ?? navigator.language) ?? FALLBACK_LOCALE;
 };
-/*
- * The region a language brings with it. The system's own when it already speaks that language, so
- * Dutch in Belgium keeps writing dates the Belgian way, and the country the language is most spoken
- * in when it does not.
- */
+/* The system's own region when it already speaks the language, so Dutch in Belgium keeps writing dates the Belgian way. */
 const regionOfLanguage = () => {
   const language = source.language();
   const system = systemLocale();
@@ -66,12 +57,10 @@ const resolve = region => {
   }
   return region === FORMAT_SYSTEM ? systemLocale() : region;
 };
-/* The locale every formatter in this folder is built on. Read outside React as well, so it is a
-   plain function over the source rather than a hook. */
+/* Read outside React as well, so it is a plain function rather than a hook. */
 export const formatLocale = () => resolve(source.region());
 const subscribe = onChange => source.subscribe(onChange);
-/* What a component calls to draw again once the region changes. The value is the locale, which a
-   caller may use or ignore; subscribing is the point. */
+/* Subscribing is the point: a component draws again once the region changes. */
 export const useFormatLocale = () => {
   return useSyncExternalStore(subscribe, formatLocale, formatLocale);
 };
@@ -95,37 +84,28 @@ const relatives = new WeakMap();
 const names = new WeakMap();
 export const numberFormatter = options => cacheFor(numbers, options, formatLocale(), (locale, spec) => new Intl.NumberFormat(locale, spec));
 export const dateFormatter = options => cacheFor(dates, options, formatLocale(), (locale, spec) => new Intl.DateTimeFormat(locale, spec));
-/* The same date, written in the language the words come from. Never shown whole: only its month,
-   weekday, era and day period are lifted out of it. */
+/* Never shown whole: only its month, weekday, era and day period are lifted out of it. */
 export const wordFormatter = options => cacheFor(words, options, wordLocale(), (locale, spec) => new Intl.DateTimeFormat(locale, spec));
 /* `3 min. geleden` is words as much as a number, so the language writes it, the way it writes a month. */
 export const relativeFormatter = options => cacheFor(relatives, options, wordLocale(), (locale, spec) => new Intl.RelativeTimeFormat(locale, spec));
 /* Proper names keep the runtime locale; a shared options object reuses its collator. */
 export const nameCollator = options => cacheFor(names, options, undefined, (locale, spec) => new Intl.Collator(locale, spec));
 const collators = new Map();
-/*
- * How two labels a person reads are put in order. Labels are words, so the language writes them and
- * the language sorts them: Dutch puts Tekening after Terminal where English puts Drawing before it.
- * Keyed on the locale rather than on an options object, since there are no options to key on.
- */
+/* Labels are words, so the language sorts them: Dutch puts Tekening after Terminal where English puts Drawing before it. */
 export const labelCollator = () => {
   const locale = wordLocale();
-  const held = collators.get(locale);
-  if (held !== undefined) {
-    return held;
+  let collator = collators.get(locale);
+  if (collator === undefined) {
+    collator = new Intl.Collator(locale, {
+      sensitivity: 'base',
+      numeric: true
+    });
+    collators.set(locale, collator);
   }
-  const collator = new Intl.Collator(locale, {
-    sensitivity: 'base',
-    numeric: true
-  });
-  collators.set(locale, collator);
   return collator;
 };
 let nameCollators = null;
-/*
- * The order of names that are no words, such as files: the runtime's own locale, numbers by value and
- * case only to break a tie. It is what `localeCompare` did, which built a collator on every call.
- */
+/* For names that are no words, such as files: what `localeCompare` did, without a collator built on every call. */
 export const nameOrder = (left, right) => {
   nameCollators ??= {
     loose: new Intl.Collator(undefined, {

package/dist/format/number.js

@@ -7,7 +7,6 @@ const ONE_DECIMAL = {
 };
 /* A count as a region groups one: `1,234,567` there, `1.234.567` here. */
 export const formatNumber = value => numberFormatter(WHOLE).format(Math.round(value));
-/* The same, to one decimal, where the fraction is the part that means something. */
 export const formatDecimal = value => numberFormatter(ONE_DECIMAL).format(value);
 /* One options object per key, so the formatter cached on it is built once (`numberFormatter`). */
 const specCache = build => {
@@ -36,9 +35,8 @@ export const formatRounded = (value, decimals) => numberFormatter(roundedSpec(de
 const MAX_FRACTION_DIGITS = 100;
 const NUMERAL = /^[+-]?\d+(?:\.(\d+))?$/;
 /*
- * A numeral as a database writes it (`12900`, `-0.50`, `9007199254740993`), in the region's notation
- * with every digit kept: a decimal or a big integer arrives as text, and a float would round it.
- * Text that is no plain numeral, such as `NaN` or `1e999`, comes back as it is.
+ * A numeral as a database writes it (`12900`, `-0.50`, `9007199254740993`) with every digit kept: a
+ * decimal or a big integer arrives as text, and a float would round it. Anything else comes back as it is.
  */
 export const formatNumeral = numeral => {
   const text = typeof numeral === 'number' ? String(numeral) : numeral.trim();
@@ -52,20 +50,11 @@ export const formatNumeral = numeral => {
 };
 /* Percent as Activity Monitor writes it: a decimal under ten, where the difference still shows. */
 export const formatPercent = value => `${value < 10 ? formatDecimal(value) : formatNumber(value)}%`;
-/*
- * The option objects a money formatter is cached on, one per currency and precision. The cache is
- * keyed on the object itself, so building a fresh one per call would build a fresh formatter too.
- */
-const moneySpecs = new Map();
-const moneySpec = (currency, maximumFractionDigits) => {
-  const key = `${currency}|${maximumFractionDigits ?? ''}`;
-  const known = moneySpecs.get(key);
-  if (known !== undefined) {
-    return known;
-  }
-  // Narrow, or a Dutch region writes a dollar amount as `US$ 5.480,96`, which is a currency lesson
-  // nobody asked for in a table of prices.
-  const spec = {
+/* Narrow, or a Dutch region writes a dollar amount as `US$ 5.480,96`. */
+const moneySpec = specCache(key => {
+  const [currency, digits] = key.split('|');
+  const maximumFractionDigits = Number(digits);
+  return {
     style: 'currency',
     currency,
     currencyDisplay: 'narrowSymbol',
@@ -73,11 +62,9 @@ const moneySpec = (currency, maximumFractionDigits) => {
       maximumFractionDigits
     } : {})
   };
-  moneySpecs.set(key, spec);
-  return spec;
-};
+});
 /* An amount in the currency it is already in, as a bank statement would print it. */
-export const formatMoney = (value, currency, maximumFractionDigits) => numberFormatter(moneySpec(currency, maximumFractionDigits)).format(value);
+export const formatMoney = (value, currency, maximumFractionDigits) => numberFormatter(moneySpec(`${currency}|${maximumFractionDigits ?? ''}`)).format(value);
 const SIGNIFICANT_MONEY = {
   style: 'currency',
   currency: 'USD',

package/dist/format/regions.js

@@ -1,12 +1,9 @@
-/*
- * The regions a person can read this app in, beside the one its language comes with and the one the
- * operating system was set to. The list is short on purpose. It is here for a machine whose region
- * reads nothing like the person in front of it, not as a country picker.
- */
 export const FORMAT_LANGUAGE = 'language';
 export const FORMAT_SYSTEM = 'system';
-/* Only the tags. A country names itself in the language the interface is in (`Intl.DisplayNames`),
-   so no translation file ever carries a list of countries. */
+/*
+ * Short on purpose: for a machine whose region reads nothing like the person in front of it, not a
+ * country picker. A country names itself through `Intl.DisplayNames`, so no translation file lists them.
+ */
 export const FORMAT_REGIONS = ['nl-NL', 'en-US', 'en-GB', 'de-DE', 'fr-FR', 'es-ES', 'sv-SE', 'ja-JP'];
 export const FORMAT_REGION_CHOICES = [FORMAT_LANGUAGE, FORMAT_SYSTEM, ...FORMAT_REGIONS];
 /* The country of a region tag, named in `language`: `nl-NL` in English is "Netherlands". */