@adecore/ui 0.14.0

package/dist/file-icon.d.ts

@@ -0,0 +1,4 @@
+import { type FileTreeIconConfig } from '@pierre/trees';
+export declare const FILE_TREE_ICONS: FileTreeIconConfig;
+export declare const fileIconFor: (path: string) => string;
+export declare const mountFileIconSprite: () => void;

package/dist/file-icon.js

@@ -0,0 +1,46 @@
+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';
+/* The glyphs are Seti's (`seti-icons.ts`), which knows far more file types than the sets the tree
+   ships with. The tree only colors its own sets, so every symbol carries its hue in its id and the
+   sprite brings the rules that color it. A tree takes all of it as configuration where everything
+   drawn beside it calls `fileIconFor`, so a tab, a picker row and a tree row never disagree about
+   what a file is. Hand this to the tree. */
+export const FILE_TREE_ICONS = {
+    set: 'none',
+    spriteSheet: SETI_SPRITE_SHEET,
+    remap: { 'file-tree-icon-file': SETI_DEFAULT_SYMBOL },
+    byFileName: SETI_BY_FILE_NAME,
+    byFileExtension: SETI_BY_FILE_EXTENSION,
+    byFileNameContains: SETI_BY_FILE_NAME_CONTAINS
+};
+let resolver = null;
+/* Built on the first icon rather than on import, so a bundle that never draws one never builds it. */
+const resolveIcon = (...args) => {
+    resolver ??= createFileTreeIconResolver(FILE_TREE_ICONS);
+    return resolver.resolveIcon(...args);
+};
+/*
+ * The id of the `<symbol>` the set gives a file, in the sprite `mountFileIconSprite` puts in the
+ * document. The path may be absolute or relative. Only the last segment decides, first by exact
+ * name (`package.json`, `.gitignore`), then by a part of the name (`Dockerfile.dev`), then by the
+ * longest extension that matches (`spec.ts` before `ts`). Anything the set does not know falls back
+ * to its generic file icon, and so does a directory. The tree marks a folder with the chevron that
+ * turns as it opens, not with a glyph of its own.
+ */
+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
+   icon next to it, so the document gets a copy of the same sheet to point `<use>` at. */
+export const mountFileIconSprite = () => {
+    if (document.getElementById(SPRITE_ELEMENT_ID) !== null) {
+        return;
+    }
+    const holder = document.createElement('div');
+    holder.innerHTML = SETI_SPRITE_SHEET;
+    const sprite = holder.firstElementChild;
+    if (sprite === null) {
+        return;
+    }
+    sprite.id = SPRITE_ELEMENT_ID;
+    (document.body ?? document.documentElement).append(sprite);
+};

package/dist/floating.d.ts

@@ -0,0 +1,5 @@
+export declare const isInFloatingLayer: (target: EventTarget | null) => boolean;
+export declare const cameThroughPortal: (event: {
+    currentTarget: Element;
+    target: EventTarget;
+}) => boolean;

package/dist/floating.js

@@ -0,0 +1,6 @@
+// Every popup, menu, tooltip and dialog of the library is portaled; these are the layers it draws them on.
+const FLOATING_LAYERS = '[data-base-ui-portal], .tooltip-popup, .dialog-popup, .dialog-backdrop';
+/* Whether an event landed in a popup rather than on the surface under it, which a canvas-like surface must not take as a click of its own. */
+export const isInFloatingLayer = (target) => target instanceof Element && target.closest(FLOATING_LAYERS) !== null;
+/* A popup is portaled out of its trigger's element but not out of React's tree, so its events still bubble to that trigger. */
+export const cameThroughPortal = (event) => !(event.target instanceof Node && event.currentTarget.contains(event.target));

package/dist/format/datetime.d.ts

@@ -0,0 +1,11 @@
+export declare const formatDateTime: (at: Date | number, options: Intl.DateTimeFormatOptions) => string;
+export declare const formatClock: (at: Date | number) => string;
+export declare const formatWeekdayClock: (at: Date | number) => string;
+export declare const formatHour: (at: Date | number) => string;
+export declare const formatDay: (at: Date | number) => string;
+export declare const formatDayWithYear: (at: Date | number) => string;
+export declare const formatWeekdayDay: (at: Date | number) => string;
+export declare const formatDayClock: (at: Date | number) => string;
+export declare const formatNumericDate: (at: Date | number) => string;
+export declare const isSameDay: (a: Date | number, b: Date | number) => boolean;
+export declare const formatMoment: (at: Date | number, now?: Date | number) => string;

package/dist/format/datetime.js

@@ -0,0 +1,50 @@
+import { dateFormatter, wordFormatter } from './locale.js';
+/* The parts that are a word rather than a number, and so come from the language and not the region. */
+const WORD_PARTS = new Set(['month', 'weekday', 'dayPeriod', 'era']);
+/*
+ * 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.
+ */
+export const formatDateTime = (at, options) => {
+    const date = typeof at === 'number' ? new Date(at) : at;
+    const parts = dateFormatter(options).formatToParts(date);
+    if (!parts.some((part) => WORD_PARTS.has(part.type))) {
+        return parts.map((part) => part.value).join('');
+    }
+    const english = wordFormatter(options).formatToParts(date);
+    return parts.map((part) => (WORD_PARTS.has(part.type) ? (english.find((word) => word.type === part.type)?.value ?? part.value) : part.value)).join('');
+};
+const CLOCK = { hour: '2-digit', minute: '2-digit' };
+const WEEKDAY_CLOCK = { weekday: 'short', hour: '2-digit', minute: '2-digit' };
+const HOUR = { hour: 'numeric' };
+const DAY = { month: 'short', day: 'numeric' };
+const DAY_WITH_YEAR = { month: 'short', day: 'numeric', year: 'numeric' };
+const WEEKDAY_DAY = { weekday: 'short', month: 'short', day: 'numeric' };
+const DAY_CLOCK = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
+const NUMERIC_DATE = { year: 'numeric', month: 'numeric', day: 'numeric' };
+/* `08:05`, or `08:05 AM` in a region that counts to twelve. */
+export const formatClock = (at) => formatDateTime(at, CLOCK);
+/* 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. */
+export const formatHour = (at) => formatDateTime(at, HOUR);
+/* `19 Sep`, the short date a row falls back to once "days ago" stops meaning anything. */
+export const formatDay = (at) => formatDateTime(at, DAY);
+/* The same date with the year, for anything older than the one we are in. */
+export const formatDayWithYear = (at) => formatDateTime(at, DAY_WITH_YEAR);
+/* `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) => formatDateTime(at, DAY_CLOCK);
+/* 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. */
+export const isSameDay = (a, b) => {
+    const left = typeof a === 'number' ? new Date(a) : a;
+    const right = typeof b === 'number' ? new Date(b) : b;
+    return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
+};
+export const formatMoment = (at, now = Date.now()) => (isSameDay(at, now) ? formatClock(at) : formatDayClock(at));

package/dist/format/duration.d.ts

@@ -0,0 +1,5 @@
+export declare const formatDuration: (ms: number) => string;
+export declare const formatCountdown: (ms: number) => string;
+export declare const formatElapsedShort: (ms: number) => string;
+export declare const formatClockDuration: (ms: number) => string;
+export declare const formatAgo: (ms: number) => string;

package/dist/format/duration.js

@@ -0,0 +1,76 @@
+import { relativeFormatter } from './locale.js';
+import { formatDecimal, formatNumber } from './number.js';
+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.
+ */
+export const formatDuration = (ms) => {
+    const seconds = Math.max(0, Math.round(ms / SECOND));
+    if (seconds < 60) {
+        return `${formatNumber(seconds)} s`;
+    }
+    const minutes = Math.round(seconds / 60);
+    if (minutes < 60) {
+        return `${formatNumber(minutes)} min`;
+    }
+    return `${formatDecimal(minutes / 60)} h`;
+};
+/* How long a window still has, tight enough for the end of a bar: `4d 3h`, `12h 8m`, `9m`. */
+export const formatCountdown = (ms) => {
+    const left = Math.max(0, ms);
+    if (left >= DAY) {
+        return `${formatNumber(Math.floor(left / DAY))}d ${formatNumber(Math.round((left % DAY) / HOUR))}h`;
+    }
+    if (left >= HOUR) {
+        return `${formatNumber(Math.floor(left / HOUR))}h ${formatNumber(Math.round((left % HOUR) / MINUTE))}m`;
+    }
+    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`.
+ */
+export const formatElapsedShort = (ms) => {
+    const seconds = ms <= 0 ? 0 : Math.max(1, Math.round(ms / SECOND));
+    if (seconds < 60) {
+        return `${formatNumber(seconds)}s`;
+    }
+    if (seconds < 3600) {
+        const rest = seconds % 60;
+        const minutes = Math.floor(seconds / 60);
+        return rest === 0 ? `${formatNumber(minutes)}m` : `${formatNumber(minutes)}m ${formatNumber(rest)}s`;
+    }
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    return minutes === 0 ? `${formatNumber(hours)}h` : `${formatNumber(hours)}h ${formatNumber(minutes)}m`;
+};
+/* A stopwatch that is watched while it runs: `00:14`, and `1:02:03` once it passes an hour. */
+export const formatClockDuration = (ms) => {
+    const seconds = Math.max(0, Math.floor(ms / SECOND));
+    const pad = (value) => String(value).padStart(2, '0');
+    const clock = `${pad(Math.floor((seconds % 3600) / 60))}:${pad(seconds % 60)}`;
+    const hours = Math.floor(seconds / 3600);
+    return hours > 0 ? `${formatNumber(hours)}:${clock}` : clock;
+};
+const AGO = { style: 'narrow', numeric: 'always' };
+const NOW = { style: 'narrow', numeric: 'auto' };
+/* How long ago something was, short enough for the right edge of a row: `3m ago`, `3 min. geleden`. */
+export const formatAgo = (ms) => {
+    const past = Math.max(0, ms);
+    if (past < MINUTE) {
+        return relativeFormatter(NOW).format(0, 'second');
+    }
+    if (past < HOUR) {
+        return relativeFormatter(AGO).format(-Math.floor(past / MINUTE), 'minute');
+    }
+    if (past < DAY) {
+        return relativeFormatter(AGO).format(-Math.floor(past / HOUR), 'hour');
+    }
+    return relativeFormatter(AGO).format(-Math.floor(past / DAY), 'day');
+};

package/dist/format/index.d.ts

@@ -0,0 +1,6 @@
+export { formatClock, formatDateTime, formatDay, formatDayClock, formatDayWithYear, formatHour, formatMoment, formatNumericDate, formatWeekdayClock, formatWeekdayDay, isSameDay } from './datetime.ts';
+export { formatAgo, formatClockDuration, formatCountdown, formatDuration, formatElapsedShort } from './duration.ts';
+export { FALLBACK_LOCALE, formatLocale, labelCollator, setFormatSource, systemLocale, useFormatLocale, type FormatSource } from './locale.ts';
+export { formatBytes, formatDecimal, formatMoney, formatNumber, formatPercent, formatTokens, formatUsdSignificant } from './number.ts';
+export { FORMAT_LANGUAGE, FORMAT_REGIONS, FORMAT_REGION_CHOICES, FORMAT_SYSTEM, formatRegionFrom, regionName } from './regions.ts';
+export { localTimeZone } from './time-zone.ts';

package/dist/format/index.js

@@ -0,0 +1,7 @@
+/* Every number, date, time and duration a person reads, written the way the language and the region they set ask for. */
+export { formatClock, formatDateTime, formatDay, formatDayClock, formatDayWithYear, formatHour, formatMoment, formatNumericDate, formatWeekdayClock, formatWeekdayDay, isSameDay } from './datetime.js';
+export { formatAgo, formatClockDuration, formatCountdown, formatDuration, formatElapsedShort } from './duration.js';
+export { FALLBACK_LOCALE, formatLocale, labelCollator, setFormatSource, systemLocale, useFormatLocale } from './locale.js';
+export { formatBytes, formatDecimal, formatMoney, formatNumber, formatPercent, formatTokens, formatUsdSignificant } from './number.js';
+export { FORMAT_LANGUAGE, FORMAT_REGIONS, FORMAT_REGION_CHOICES, FORMAT_SYSTEM, formatRegionFrom, regionName } from './regions.js';
+export { localTimeZone } from './time-zone.js';

package/dist/format/locale.d.ts

@@ -0,0 +1,17 @@
+export interface FormatSource {
+    language(): string;
+    region(): string;
+    systemLocale?(): string | undefined;
+    subscribe(onChange: () => void): () => void;
+}
+export declare const setFormatSource: (next: FormatSource) => FormatSource;
+export declare const FALLBACK_LOCALE = "en-US";
+export declare const wordLocale: () => string;
+export declare const systemLocale: () => string;
+export declare const formatLocale: () => string;
+export declare const useFormatLocale: () => string;
+export declare const numberFormatter: (options: Intl.NumberFormatOptions) => Intl.NumberFormat;
+export declare const dateFormatter: (options: Intl.DateTimeFormatOptions) => Intl.DateTimeFormat;
+export declare const wordFormatter: (options: Intl.DateTimeFormatOptions) => Intl.DateTimeFormat;
+export declare const relativeFormatter: (options: Intl.RelativeTimeFormatOptions) => Intl.RelativeTimeFormat;
+export declare const labelCollator: () => Intl.Collator;

package/dist/format/locale.js

@@ -0,0 +1,105 @@
+import { useSyncExternalStore } from 'react';
+import { FORMAT_LANGUAGE, FORMAT_SYSTEM } from './regions.js';
+let source = { language: () => 'en', region: () => FORMAT_LANGUAGE, subscribe: () => () => { } };
+/* Answers the source it replaced, so a test can put that one back. */
+export const setFormatSource = (next) => {
+    const previous = source;
+    source = next;
+    return previous;
+};
+/* Where a language comes from when nothing else says: the country most of its 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. */
+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. */
+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. */
+const usable = (tag) => {
+    if (tag === undefined || tag === '') {
+        return null;
+    }
+    try {
+        return Intl.DateTimeFormat.supportedLocalesOf([tag]).length > 0 ? tag : null;
+    }
+    catch {
+        return 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.
+ */
+export const systemLocale = () => {
+    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.
+ */
+const regionOfLanguage = () => {
+    const language = source.language();
+    const system = systemLocale();
+    return system.toLowerCase().startsWith(language) ? system : (LANGUAGE_REGIONS[language] ?? language);
+};
+const resolve = (region) => {
+    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. */
+export const formatLocale = () => resolve(source.region());
+/* 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. */
+const subscribe = (onChange) => source.subscribe(onChange);
+export const useFormatLocale = () => useSyncExternalStore(subscribe, formatLocale, formatLocale);
+const cacheFor = (store, options, locale, build) => {
+    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;
+};
+const numbers = new WeakMap();
+const dates = new WeakMap();
+const words = new WeakMap();
+const relatives = 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. */
+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));
+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.
+ */
+export const labelCollator = () => {
+    const locale = wordLocale();
+    const held = collators.get(locale);
+    if (held !== undefined) {
+        return held;
+    }
+    const collator = new Intl.Collator(locale, { sensitivity: 'base', numeric: true });
+    collators.set(locale, collator);
+    return collator;
+};

package/dist/format/number.d.ts

@@ -0,0 +1,8 @@
+export declare const formatNumber: (value: number) => string;
+export declare const formatDecimal: (value: number) => string;
+export declare const formatFixed: (value: number, decimals: number) => string;
+export declare const formatPercent: (value: number) => string;
+export declare const formatMoney: (value: number, currency: string, maximumFractionDigits?: number) => string;
+export declare const formatUsdSignificant: (value: number) => string;
+export declare const formatTokens: (value: number) => string;
+export declare const formatBytes: (bytes: number, whole?: boolean) => string;

package/dist/format/number.js

@@ -0,0 +1,72 @@
+import { numberFormatter } from './locale.js';
+const WHOLE = { maximumFractionDigits: 0 };
+const ONE_DECIMAL = { maximumFractionDigits: 1 };
+/* 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);
+const fixedSpecs = new Map();
+/* Always `decimals` places, so values that follow each other keep one width: `1,0` and `1,5`, never `1` and `1,5`. */
+export const formatFixed = (value, decimals) => {
+    let spec = fixedSpecs.get(decimals);
+    if (spec === undefined) {
+        spec = { minimumFractionDigits: decimals, maximumFractionDigits: decimals };
+        fixedSpecs.set(decimals, spec);
+    }
+    return numberFormatter(spec).format(value);
+};
+/* 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 = {
+        style: 'currency',
+        currency,
+        currencyDisplay: 'narrowSymbol',
+        ...(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);
+const SIGNIFICANT_MONEY = { style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol', maximumSignificantDigits: 3 };
+/* Dollars to three significant digits, for amounts that run from a fraction of a cent to tens of dollars in one list. */
+export const formatUsdSignificant = (value) => numberFormatter(SIGNIFICANT_MONEY).format(value);
+/* `1.2M`, `412K`, `640`: a token count is read as a size, not counted. */
+export const formatTokens = (value) => {
+    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);
+};
+const UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
+/*
+ * A size the way a person says it, with the number in the region's own notation: whole bytes up to
+ * a kilobyte, one decimal above that. `whole` is for a column that only has room for a round number.
+ */
+export const formatBytes = (bytes, whole = false) => {
+    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/dist/format/regions.d.ts

@@ -0,0 +1,6 @@
+export declare const FORMAT_LANGUAGE = "language";
+export declare const FORMAT_SYSTEM = "system";
+export declare const FORMAT_REGIONS: readonly ['nl-NL', 'en-US', 'en-GB', 'de-DE', 'fr-FR', 'es-ES', 'sv-SE', 'ja-JP'];
+export declare const FORMAT_REGION_CHOICES: readonly string[];
+export declare const regionName: (region: string, language: string) => string;
+export declare const formatRegionFrom: (stored: unknown) => string;

package/dist/format/regions.js

@@ -0,0 +1,15 @@
+/*
+ * 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. */
+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". */
+export const regionName = (region, language) => new Intl.DisplayNames([language], { type: 'region' }).of(region.slice(region.indexOf('-') + 1)) ?? region;
+/* A stored region, or the language's own for anything this version does not offer. */
+export const formatRegionFrom = (stored) => FORMAT_REGION_CHOICES.find((region) => region === stored) ?? FORMAT_LANGUAGE;

package/dist/format/time-zone.d.ts

@@ -0,0 +1 @@
+export declare const localTimeZone: () => string | null;

package/dist/format/time-zone.js

@@ -0,0 +1,2 @@
+/* The IANA time zone this machine is set to, or null when the runtime does not say. */
+export const localTimeZone = () => Intl.DateTimeFormat().resolvedOptions().timeZone || null;

package/dist/icon-button-size.d.ts

@@ -0,0 +1,3 @@
+export type IconButtonSize = 'md' | 'sm' | 'xs' | '2xs';
+export declare const ICON_BUTTON_CLASS: Record<IconButtonSize, string | undefined>;
+export declare const ICON_BUTTON_ICON_SIZE: Record<IconButtonSize, number>;

package/dist/icon-button-size.js

@@ -0,0 +1,3 @@
+/* The size decides the square and the radius (`.icon-btn` in `theme.css`) and the icon inside: 16 in 32, 14 in 28, 12 below. */
+export const ICON_BUTTON_CLASS = { md: undefined, sm: 'icon-btn-sm', xs: 'icon-btn-xs', '2xs': 'icon-btn-2xs' };
+export const ICON_BUTTON_ICON_SIZE = { md: 16, sm: 14, xs: 12, '2xs': 12 };

package/dist/icon-picker.d.ts

@@ -0,0 +1,23 @@
+import type { LucideIcon } from 'lucide-react';
+export interface IconPickerGroup {
+    id: string;
+    label: string;
+    icons: Readonly<Record<string, LucideIcon>>;
+}
+export type IconPickerIcons = Readonly<Record<string, LucideIcon>> | readonly IconPickerGroup[];
+export interface IconSection {
+    id: string;
+    label: string | null;
+    icons: readonly (readonly [name: string, glyph: LucideIcon])[];
+}
+export interface IconCellBox {
+    left: number;
+    top: number;
+    width: number;
+}
+export declare const isGrouped: (icons: IconPickerIcons) => icons is readonly IconPickerGroup[];
+export declare const sectionsOf: (icons: IconPickerIcons) => IconSection[];
+export declare const filterSections: (sections: readonly IconSection[], query: string, keywords?: Readonly<Record<string, readonly string[]>>) => IconSection[];
+export declare const tabStopOf: (visible: readonly string[], focused: string | null, value: string | null) => string | null;
+export declare const cellForKey: (key: string, boxes: readonly IconCellBox[], from: number) => number | null;
+export declare const escapeClearsSearch: (key: string, query: string) => boolean;

package/dist/icon-picker.js

@@ -0,0 +1,80 @@
+export const isGrouped = (icons) => Array.isArray(icons);
+export const sectionsOf = (icons) => isGrouped(icons)
+    ? icons.map((group) => ({ id: group.id, label: group.label, icons: Object.entries(group.icons) }))
+    : [{ id: '', label: null, icons: Object.entries(icons) }];
+/* The icons whose name, keywords or group label hold the query, case-insensitive. A group without one is left out. */
+export const filterSections = (sections, query, keywords = {}) => {
+    const needle = query.trim().toLowerCase();
+    if (needle === '') {
+        return [...sections];
+    }
+    const holds = (text) => 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, focused, value) => {
+    if (focused !== null && visible.includes(focused)) {
+        return focused;
+    }
+    if (value !== null && visible.includes(value)) {
+        return value;
+    }
+    return 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.
+ */
+export const cellForKey = (key, boxes, from) => {
+    const last = boxes.length - 1;
+    switch (key) {
+        case 'ArrowRight':
+            return Math.min(from + 1, last);
+        case 'ArrowLeft':
+            return Math.max(from - 1, 0);
+        case 'Home':
+            return 0;
+        case 'End':
+            return last;
+        case 'ArrowDown':
+        case 'ArrowUp':
+            break;
+        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. */
+export const escapeClearsSearch = (key, query) => key === 'Escape' && query !== '';