@adecore/ui 0.39.0 → 0.40.1

package/src/format/locale.ts

@@ -1,18 +1,16 @@
 import { useSyncExternalStore } from 'react';
 import { FORMAT_LANGUAGE, FORMAT_SYSTEM } from './regions.ts';
 
-/*
- * Where the formatters read what a person set. The app owns both settings and hands them over once,
- * before the first render; the language writes the words and the region writes the notation.
- */
+/* The app hands it over once, before the first render; the language writes the words and the region writes the notation. */
 export interface FormatSource {
-    /* The language the interface is written in right now, such as `en` or `nl`. */
     language(): string;
+
     /* A region tag such as `nl-NL`, or `FORMAT_LANGUAGE` or `FORMAT_SYSTEM`. */
     region(): string;
+
     /* The system's own locale when a shell can read it; a browser tab falls back on `navigator`. */
     systemLocale?(): string | undefined;
-    /* Calls back whenever the language or the region may have changed. */
+
     subscribe(onChange: () => void): () => void;
 }
 
@@ -22,26 +20,25 @@ let source: FormatSource = { language: () => 'en', region: () => FORMAT_LANGUAGE
 export const setFormatSource = (next: FormatSource): FormatSource => {
     const previous = source;
     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: Record<string, string> = { 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 = (): string => 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: string | undefined): string | null => {
     if (tag === undefined || tag === '') {
         return null;
     }
+
     try {
         return Intl.DateTimeFormat.supportedLocalesOf([tag]).length > 0 ? tag : null;
     } catch {
@@ -50,30 +47,28 @@ const usable = (tag: string | undefined): string | null => {
 };
 
 /*
- * 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 = (): string => {
     const fromShell = usable(source.systemLocale?.());
+
     if (fromShell !== null) {
         return fromShell;
     }
+
     if (typeof navigator === 'undefined') {
         return FALLBACK_LOCALE;
     }
+
     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 = (): string => {
     const language = source.language();
     const system = systemLocale();
+
     return system.toLowerCase().startsWith(language) ? system : (LANGUAGE_REGIONS[language] ?? language);
 };
 
@@ -81,17 +76,16 @@ const resolve = (region: string): string => {
     if (region === FORMAT_LANGUAGE) {
         return regionOfLanguage();
     }
+
     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 = (): string => resolve(source.region());
 
 const subscribe = (onChange: () => void): (() => void) => 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 = (): string => useSyncExternalStore(subscribe, formatLocale, formatLocale);
 
 interface Cached<T> {
@@ -107,11 +101,14 @@ const cacheFor = <O extends object, T>(
     build: (locale: string | undefined, options: O) => T
 ): T => {
     const hit = store.get(options);
+
     if (hit !== undefined && hit.locale === locale) {
         return hit.formatter;
     }
+
     const formatter = build(locale, options);
     store.set(options, { locale, formatter });
+
     return formatter;
 };
 
@@ -127,8 +124,7 @@ export const numberFormatter = (options: Intl.NumberFormatOptions): Intl.NumberF
 export const dateFormatter = (options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat =>
     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: Intl.DateTimeFormatOptions): Intl.DateTimeFormat =>
     cacheFor(words, options, wordLocale(), (locale, spec) => new Intl.DateTimeFormat(locale, spec));
 
@@ -142,29 +138,24 @@ export const nameCollator = (options: Intl.CollatorOptions): Intl.Collator =>
 
 const collators = new Map<string, Intl.Collator>();
 
-/*
- * 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 = (): Intl.Collator => {
     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: { loose: Intl.Collator; exact: Intl.Collator } | null = 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: string, right: string): number => {
     nameCollators ??= { loose: new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }), exact: new Intl.Collator() };
+
     return nameCollators.loose.compare(left, right) || nameCollators.exact.compare(left, right);
 };

package/src/format/number.ts

@@ -6,18 +6,20 @@ const ONE_DECIMAL: Intl.NumberFormatOptions = { maximumFractionDigits: 1 };
 /* A count as a region groups one: `1,234,567` there, `1.234.567` here. */
 export const formatNumber = (value: number): string => numberFormatter(WHOLE).format(Math.round(value));
 
-/* The same, to one decimal, where the fraction is the part that means something. */
 export const formatDecimal = (value: number): string => numberFormatter(ONE_DECIMAL).format(value);
 
 /* One options object per key, so the formatter cached on it is built once (`numberFormatter`). */
 const specCache = <Key>(build: (key: Key) => Intl.NumberFormatOptions): ((key: Key) => Intl.NumberFormatOptions) => {
     const specs = new Map<Key, Intl.NumberFormatOptions>();
+
     return (key) => {
         let spec = specs.get(key);
+
         if (spec === undefined) {
             spec = build(key);
             specs.set(key, spec);
         }
+
         return spec;
     };
 };
@@ -38,17 +40,19 @@ 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: string | number): string => {
     const text = typeof numeral === 'number' ? String(numeral) : numeral.trim();
     const match = NUMERAL.exec(text);
+
     if (match === null) {
         return text;
     }
+
     const decimals = Math.min(match[1]?.length ?? 0, MAX_FRACTION_DIGITS);
+
     // A string goes to Intl as it is, so it formats the exact decimal and not the nearest double.
     return numberFormatter(fixedSpec(decimals)).format(text as Intl.StringNumericLiteral);
 };
@@ -56,33 +60,17 @@ export const formatNumeral = (numeral: string | number): string => {
 /* Percent as Activity Monitor writes it: a decimal under ten, where the difference still shows. */
 export const formatPercent = (value: number): string => `${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<string, Intl.NumberFormatOptions>();
+/* Narrow, or a Dutch region writes a dollar amount as `US$ 5.480,96`. */
+const moneySpec = specCache((key: `${string}|${number | ''}`) => {
+    const [currency, digits] = key.split('|');
+    const maximumFractionDigits = Number(digits);
 
-const moneySpec = (currency: string, maximumFractionDigits: number | undefined): Intl.NumberFormatOptions => {
-    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: Intl.NumberFormatOptions = {
-        style: 'currency',
-        currency,
-        currencyDisplay: 'narrowSymbol',
-        ...(maximumFractionDigits ? { maximumFractionDigits } : {})
-    };
-    moneySpecs.set(key, spec);
-    return spec;
-};
+    return { style: 'currency', currency, currencyDisplay: 'narrowSymbol', ...(maximumFractionDigits ? { maximumFractionDigits } : {}) };
+});
 
 /* An amount in the currency it is already in, as a bank statement would print it. */
 export const formatMoney = (value: number, currency: string, maximumFractionDigits?: number): string =>
-    numberFormatter(moneySpec(currency, maximumFractionDigits)).format(value);
+    numberFormatter(moneySpec(`${currency}|${maximumFractionDigits ?? ''}`)).format(value);
 
 const SIGNIFICANT_MONEY: Intl.NumberFormatOptions = { style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol', maximumSignificantDigits: 3 };
 
@@ -92,12 +80,15 @@ export const formatUsdSignificant = (value: number): string => numberFormatter(S
 /* `1.2M`, `412K`, `640`: a token count is read as a size, not counted. */
 export const formatTokens = (value: number): string => {
     const rounded = Math.round(value);
+
     if (rounded >= 1_000_000) {
         return `${formatDecimal(rounded >= 10_000_000 ? Math.round(rounded / 1_000_000) : rounded / 1_000_000)}M`;
     }
+
     if (rounded >= 1_000) {
         return `${formatDecimal(rounded >= 10_000 ? Math.round(rounded / 1_000) : rounded / 1_000)}K`;
     }
+
     return formatNumber(rounded);
 };
 
@@ -110,10 +101,13 @@ const UNITS = ['B', 'KB', 'MB', 'GB', 'TB'] as const;
 export const formatBytes = (bytes: number, whole = false): string => {
     let value = Math.max(0, bytes);
     let unit = 0;
+
     while (value >= 1024 && unit < UNITS.length - 1) {
         value /= 1024;
         unit++;
     }
+
     const decimals = unit > 0 && !whole && value < 10;
+
     return `${decimals ? formatDecimal(value) : formatNumber(value)} ${UNITS[unit]}`;
 };

package/src/format/regions.ts

@@ -1,13 +1,10 @@
-/*
- * 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'] as const;
 
 export const FORMAT_REGION_CHOICES: readonly string[] = [FORMAT_LANGUAGE, FORMAT_SYSTEM, ...FORMAT_REGIONS];

package/src/icon-picker.ts

@@ -9,14 +9,14 @@ export interface IconPickerGroup {
 
 export type IconPickerIcons = Readonly<Record<string, LucideIcon>> | readonly IconPickerGroup[];
 
-/* A group as the grid draws it: a flat set of icons is one group without a heading. */
+/* A flat set of icons is one section without a heading. */
 export interface IconSection {
     id: string;
     label: string | null;
     icons: readonly (readonly [name: string, glyph: LucideIcon])[];
 }
 
-/* Where a cell sits on the screen, in the units of `getBoundingClientRect`. */
+/* In the units of `getBoundingClientRect`. */
 export interface IconCellBox {
     left: number;
     top: number;
@@ -33,40 +33,38 @@ export const sectionsOf = (icons: IconPickerIcons): IconSection[] =>
 /* The icons whose name, keywords or group label hold the query, case-insensitive. A group without one is left out. */
 export const filterSections = (sections: readonly IconSection[], query: string, keywords: Readonly<Record<string, readonly string[]>> = {}): IconSection[] => {
     const needle = query.trim().toLowerCase();
+
     if (needle === '') {
         return [...sections];
     }
+
     const holds = (text: string): boolean => text.toLowerCase().includes(needle);
+
     return sections.flatMap((section) => {
         if (section.label !== null && holds(section.label)) {
             return [section];
         }
+
         const icons = section.icons.filter(([name]) => holds(name) || (keywords[name] ?? []).some(holds));
+
         return icons.length > 0 ? [{ ...section, icons }] : [];
     });
 };
 
-/* The one icon the grid's tab stop sits on: the one last focused, else the chosen one, else the first, as long as the search shows it. */
-export const tabStopOf = (visible: readonly string[], focused: string | null, value: string | null): string | null => {
-    if (focused !== null && visible.includes(focused)) {
-        return focused;
-    }
-    if (value !== null && visible.includes(value)) {
-        return value;
-    }
-    return visible[0] ?? null;
-};
+/* The one last focused, else the chosen one, else the first, as long as the search shows it. */
+export const tabStopOf = (visible: readonly string[], focused: string | null, value: string | null): string | null =>
+    [focused, value].find((name) => name !== null && visible.includes(name)) ?? visible[0] ?? null;
 
 /* Rows lie a few pixels apart at least, so a rounding difference between two cells of one row is no new row. */
 const SAME_ROW = 2;
 
 /*
- * The cell a key moves the focus to, or null for a key the grid leaves alone. Up and down go by what
- * the eye sees: the nearest cell in the next row drawn, which may belong to another group. At an edge
- * the focus stays, so the key never scrolls the grid instead.
+ * Null for a key the grid leaves alone. Up and down go to the nearest cell in the next row drawn, which
+ * may belong to another group. At an edge the focus stays, so the key never scrolls the grid instead.
  */
 export const cellForKey = (key: string, boxes: readonly IconCellBox[], from: number): number | null => {
     const last = boxes.length - 1;
+
     switch (key) {
         case 'ArrowRight':
             return Math.min(from + 1, last);
@@ -82,31 +80,40 @@ export const cellForKey = (key: string, boxes: readonly IconCellBox[], from: num
         default:
             return null;
     }
+
     const current = boxes[from];
+
     if (current === undefined) {
         return null;
     }
+
     const down = key === 'ArrowDown';
     const tops = boxes.map((box) => box.top).filter((top) => (down ? top > current.top + SAME_ROW : top < current.top - SAME_ROW));
+
     if (tops.length === 0) {
         return from;
     }
+
     const row = down ? Math.min(...tops) : Math.max(...tops);
     const center = current.left + current.width / 2;
     let nearest = from;
     let distance = Number.POSITIVE_INFINITY;
+
     boxes.forEach((box, index) => {
         if (Math.abs(box.top - row) > SAME_ROW) {
             return;
         }
+
         const gap = Math.abs(box.left + box.width / 2 - center);
+
         if (gap < distance) {
             nearest = index;
             distance = gap;
         }
     });
+
     return nearest;
 };
 
-/* Escape empties a search that holds text and goes no further; on an empty one it is left to whatever else hears it, such as a dialog. */
+/* On an empty search Escape is left to whatever else hears it, such as a dialog. */
 export const escapeClearsSearch = (key: string, query: string): boolean => key === 'Escape' && query !== '';

package/src/index.ts

@@ -4,6 +4,7 @@
  */
 
 export * as Combobox from './combobox/index.parts.ts';
+
 export * as CommandPalette from './command-palette/index.parts.ts';
 export * as ContextMenu from './context-menu/index.parts.ts';
 export * as FileTree from './file-tree/index.parts.ts';
@@ -18,6 +19,7 @@ export * as Tabs from './tabs/index.parts.ts';
 export type { ComboboxInputProps, ComboboxItemProps, ComboboxPopupProps } from './combobox/parts.tsx';
 export type { CommandPaletteFooterProps, CommandPaletteInputProps, CommandPalettePopupProps, CommandPaletteRootProps } from './command-palette/parts.tsx';
 export type { DialogDescriptionProps, DialogFooterProps, DialogPopupProps, DialogTextProps, DialogTitleProps } from './dialog/parts.tsx';
+
 export type {
     MenuCheckProps,
     MenuHintProps,
@@ -27,6 +29,7 @@ export type {
     MenuRowProps,
     MenuRowSubmenuTriggerProps
 } from './menu/parts.tsx';
+
 export type { KeyValueListItemProps, KeyValueListNameProps, KeyValueListRootProps, KeyValueListValueProps } from './key-value-list/parts.tsx';
 export type { PopoverPopupProps, PopupVariant, PreviewCardPopupProps } from './popover/parts.tsx';
 export type { TabsCountProps, TabsListProps, TabsRootProps, TabsTabProps, TabsValue, TabsVariant } from './tabs/parts.tsx';
@@ -101,6 +104,7 @@ export { prefetcher, type Loader, type WhenIdle } from './prefetch.ts';
 export { tintStyle } from './tint.ts';
 export { selectAllWithin, selectionWithin } from './selection.ts';
 export { EDIT_SHORTCUTS, KEY_SHORTCUTS, formatShortcut, isModHeld, matchesShortcut, shortcut, shortcutParts, type KeyLike, type Shortcut } from './shortcut.ts';
+
 export {
     UNDO_MS,
     createToastStore,
@@ -113,6 +117,7 @@ export {
     type ToastStore,
     type ToastStoreHook
 } from './toast-store.ts';
+
 export { useAsyncAction, type AsyncAction } from './useAsyncAction.ts';
 export { clampColumnSize, useColumnResize, type ColumnEdge, type ColumnResize, type ColumnResizeOptions } from './useColumnResize.ts';
 export { useContentSize, type ContentSize } from './useContentSize.ts';
@@ -123,6 +128,7 @@ export { useFileTree, type FileTreeOptions } from './file-tree/use-file-tree.ts'
 export type { FileTreeRootProps } from './file-tree/parts.tsx';
 export type { FileTree as FileTreeModel, FileTreeVisibleRow, FileTreeDragAndDropConfig, FileTreeDropContext, FileTreeDropResult } from '@pierre/trees';
 export type { FoldKeyOf, SortRow } from './file-tree/helpers.ts';
+
 export type {
     TreeRootProps,
     TreeRowProps,
@@ -140,6 +146,7 @@ export { DocumentTab, TabStrip, type DocumentTabProps, type TabStripProps, type
 export { SplitView, type SplitViewProps, type SplitViewInfo, type SplitViewBounds, type SplitDropTarget, type SplitDrag } from './workspace/SplitView.tsx';
 export { DropPreview, type DropPreviewProps } from './workspace/DropPreview.tsx';
 export { rectDropPreview, sameDropPreview, tabDropPreview, type DropPreviewShape, type TabDrop } from './workspace/preview.ts';
+
 export {
     createSplitLayout,
     updateSplitLayout,
@@ -152,6 +159,7 @@ export {
     type SplitLayout,
     type SplitCommand
 } from './workspace/model.ts';
+
 export { tabGapAt, type SplitRect, type SplitEdges, type SplitMinimum } from './workspace/geometry.ts';
 
 export type { CommandPaletteVirtualListProps, CommandPaletteVirtualItemProps } from './command-palette/virtual.tsx';

package/src/key-value-list/parts.tsx

@@ -6,11 +6,7 @@ export type KeyValueListRootProps = useRender.ComponentProps<'dl'> & {
     divided?: boolean;
 };
 
-/*
- * The names take the width of the widest one, up to two fifths of the list, and a longer name wraps
- * there. Every item is a subgrid of the list, so the names line up across rows and a hairline runs
- * under both columns.
- */
+/* Every item is a subgrid of the list, so the names line up across rows and a hairline runs under both columns. */
 export function KeyValueListRoot({ divided = false, render, className, ref, ...props }: KeyValueListRootProps) {
     return useRender({
         render,

package/src/lazy-landings.ts

@@ -4,6 +4,7 @@ const listeners = new Set<() => void>();
 /* Called once per module, when a `LoadedComponent` first has it. */
 export function noteLanding(): void {
     landings += 1;
+
     for (const listener of listeners) {
         listener();
     }
@@ -11,6 +12,7 @@ export function noteLanding(): void {
 
 export function subscribeLandings(listener: () => void): () => void {
     listeners.add(listener);
+
     return () => {
         listeners.delete(listener);
     };

package/src/lazy.tsx

@@ -2,11 +2,7 @@ import { Suspense, lazy, useState, useSyncExternalStore, type ComponentProps, ty
 import { noteLanding } from './lazy-landings.ts';
 import { prefetcher } from './prefetch.ts';
 
-/*
- * A module's component, loaded once and kept. `React.lazy` suspends for a tick even on a module the
- * prefetcher already has, which shows the fallback and mounts a dialog already open; a component
- * that is here is drawn straight away instead.
- */
+/* `React.lazy` suspends for a tick even on a module the prefetcher already has, which mounts a dialog already open; a component here draws at once. */
 export class LoadedComponent<Component> {
     current: Component | null = null;
     private readonly listeners = new Set<() => void>();
@@ -18,18 +14,23 @@ export class LoadedComponent<Component> {
 
     async load(): Promise<Component> {
         const component = await this.loader();
+
         if (this.current === null) {
             this.current = component;
+
             for (const listener of this.listeners) {
                 listener();
             }
+
             noteLanding();
         }
+
         return component;
     }
 
     subscribe(listener: () => void): () => void {
         this.listeners.add(listener);
+
         return () => {
             this.listeners.delete(listener);
         };
@@ -38,13 +39,10 @@ export class LoadedComponent<Component> {
 
 const openErrorListeners = new Set<(error: unknown) => void>();
 
-/*
- * Tells `listener` when a module that `lazyNamed` or `lazyDialog` loads for a render fails to load,
- * which is a load a person waits on. A failed prefetch never reaches it, not even one of the same
- * module at the same moment, so an app can answer the one without being woken by the other.
- */
+/* Only a load for a render, which a person waits on; a failed prefetch never reaches it, not even one of the same module at the same moment. */
 export function onLazyOpenError(listener: (error: unknown) => void): () => void {
     openErrorListeners.add(listener);
+
     return () => {
         openErrorListeners.delete(listener);
     };
@@ -58,6 +56,7 @@ async function open<Component>(loaded: LoadedComponent<Component>): Promise<{ de
         for (const listener of openErrorListeners) {
             listener(error);
         }
+
         throw error;
     }
 }
@@ -65,11 +64,7 @@ async function open<Component>(loaded: LoadedComponent<Component>): Promise<{ de
 /* A lazy component, with `preload` to have its module before the first render, so that render never suspends. */
 export type LazyComponent<Props> = ComponentType<Props> & { readonly preload: () => Promise<void> };
 
-/*
- * `React.lazy` for a module that exports its component by name, `default` included. Every module
- * loaded through here, or through `lazyDialog`, registers with `prefetcher`, which loads it ahead of
- * its first opening once the app calls `prefetcher.prefetchEverything()`.
- */
+/* Registers with `prefetcher`, like `lazyDialog`, so `prefetcher.prefetchEverything()` loads it ahead of its first opening. */
 export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name extends keyof Module>(
     load: () => Promise<Module>,
     name: Name
@@ -77,13 +72,16 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name
     const loaded = new LoadedComponent(async () => (await load())[name]);
     prefetcher.register(() => loaded.load());
     const Lazy = lazy(() => open(loaded));
+
     // Once `loaded` has it, `Lazy` never committed anything, so switching over remounts nothing.
     const LazyNamed = (props: ComponentProps<Module[Name]>) => {
         // `loaded` fills in place; compiled, the element drawn before the module landed would stay.
         'use no memo';
         const Component: ComponentType<any> = loaded.current ?? Lazy;
+
         return <Component {...props} />;
     };
+
     return Object.assign(LazyNamed, {
         preload: async () => {
             await loaded.load();
@@ -94,16 +92,15 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name
 /* Stays true after the first opening, so every close after it still has something mounted to animate. */
 function useOpenedOnce(open: boolean): boolean {
     const [opened, setOpened] = useState(open);
+
     if (open && !opened) {
         setOpened(true);
     }
+
     return opened || open;
 }
 
-/*
- * A dialog that keeps its own open state. Once its module is here, prefetched or opened, it stays
- * mounted closed, so its first opening animates like every other; before that, opening loads it.
- */
+/* Once its module is here it stays mounted closed, so its first opening animates like every other. */
 export function lazyDialog<Module extends Record<Name, ComponentType>, Name extends keyof Module, State>(
     load: () => Promise<Module>,
     name: Name,
@@ -113,25 +110,32 @@ export function lazyDialog<Module extends Record<Name, ComponentType>, Name exte
     const loaded = new LoadedComponent(async (): Promise<ComponentType> => (await load())[name]);
     prefetcher.register(() => loaded.load());
     const Dialog = lazy(() => open(loaded));
+
     const subscribe = (listener: () => void) => loaded.subscribe(listener);
+
     const isLoaded = () => loaded.current !== null;
+
     const LazyDialog = () => {
         // As in `lazyNamed`: what `loaded` holds is read again on every render.
         'use no memo';
         const opened = useOpenedOnce(useStore(isOpen));
         useSyncExternalStore(subscribe, isLoaded);
         const Loaded: ComponentType | null = loaded.current;
+
         if (Loaded) {
             return <Loaded />;
         }
+
         if (!opened) {
             return null;
         }
+
         return (
             <Suspense fallback={null}>
                 <Dialog />
             </Suspense>
         );
     };
+
     return LazyDialog;
 }