@adecore/ui 0.38.0 → 0.40.0

package/src/file-tree/use-slots.ts

@@ -11,6 +11,7 @@ export interface RowSlot {
     row: FileTreeVisibleRow;
     control: HTMLElement;
     decoration: HTMLElement;
+
     /* Where a row's own icon goes in place of the engine's glyph; null when the row keeps that glyph. */
     icon: HTMLElement | null;
 }
@@ -29,31 +30,30 @@ export interface Port {
 export type FileTreeRowIcon = (row: FileTreeVisibleRow) => LucideIcon | undefined;
 
 /*
- * 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: FileTree, shadow: ShadowRoot, elements: readonly HTMLElement[]): FileTreeVisibleRow[] {
     const spacer = shadow.querySelector<HTMLElement>('[data-file-tree-virtualized-sticky-offset]');
     const offset = spacer === null ? Number.NaN : Number.parseFloat(spacer.style.height);
     const itemHeight = model.getItemHeight();
+
     if (!Number.isFinite(offset) || itemHeight <= 0) {
         return visibleRows(model);
     }
+
     // A folder pinned to the top leaves the flow, but still takes its index in the window.
     const pinned = shadow.querySelectorAll('[data-file-tree-sticky-row="true"]').length;
     const rows = visibleRowsAround(model, Math.round(offset / itemHeight), elements.length + pinned);
     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);
 }
 
-/* Where a row's own decoration goes: between the name and the engine's git status column, or after that column. */
+/* Relative to the engine's git status column. */
 export type FileTreeDecorationOrder = 'before-status' | 'after-status';
 
-/*
- * 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: Iterable<Port>, order: FileTreeDecorationOrder = 'before-status'): void {
     const spaced = [...ports].map((port) => ({
         port,
@@ -62,16 +62,19 @@ export function positionPorts(ports: Iterable<Port>, order: FileTreeDecorationOr
         control: port.lightControl.childNodes.length > 0 ? Math.ceil(port.lightControl.getBoundingClientRect().width) + 6 : 0,
         decoration: port.lightDecoration.childNodes.length > 0 ? Math.ceil(port.lightDecoration.getBoundingClientRect().width) + 6 : 0
     }));
+
     for (const { port, status, control, decoration } of spaced) {
         setSpace(port.rowElement, '--adecore-tree-control-space', control);
         setSpace(port.rowElement, '--adecore-tree-decoration-space', status === null ? decoration : 0);
         setSpace(port.rowElement, '--adecore-tree-status-space', status === null ? 0 : decoration);
     }
+
     const placed = spaced.map(({ port, status, control, decoration }) => {
         const row = port.rowElement;
         const before = status ?? row.querySelector<HTMLElement>('[data-item-section="content"]');
         const icon = row.querySelector<HTMLElement>('[data-item-section="icon"]');
         const iconLeft = row.offsetLeft + (icon?.offsetLeft ?? 4);
+
         return {
             port,
             top: `${row.offsetTop}px`,
@@ -80,11 +83,13 @@ export function positionPorts(ports: Iterable<Port>, order: FileTreeDecorationOr
             decorationLeft: `${row.offsetLeft + (before === null ? row.offsetWidth - decoration - 2 : before.offsetLeft + before.offsetWidth + 6)}px`
         };
     });
+
     for (const { port, top, iconLeft, controlLeft, decorationLeft } of placed) {
         port.control.style.top = top;
         port.control.style.left = controlLeft;
         port.decoration.style.top = top;
         port.decoration.style.left = decorationLeft;
+
         if (port.icon !== undefined) {
             port.icon.style.top = top;
             port.icon.style.left = iconLeft;
@@ -95,6 +100,7 @@ export function positionPorts(ports: Iterable<Port>, order: FileTreeDecorationOr
 // An unchanged space is left alone, so a pass that only scrolled measures once.
 function setSpace(row: HTMLElement, name: string, space: number): void {
     const value = `${space}px`;
+
     if (row.style.getPropertyValue(name) !== value) {
         row.style.setProperty(name, value);
     }
@@ -103,8 +109,10 @@ function setSpace(row: HTMLElement, name: string, space: number): void {
 export interface FileTreeSlotOptions {
     order: FileTreeDecorationOrder;
     rowIcon?: FileTreeRowIcon;
-    /* What to mark in every name; empty marks nothing. */
+
+    /* Empty marks nothing. */
     highlight: string;
+
     emptyLabel?: FileTreeEmptyLabel;
 }
 
@@ -114,6 +122,7 @@ function markEmptyLine(element: HTMLElement, label: string): void {
     element.dataset.interactive = 'false';
     element.setAttribute('aria-hidden', 'true');
     const content = element.querySelector<HTMLElement>('[data-item-section="content"]');
+
     if (content !== null && content.dataset.emptyLabel !== label) {
         content.dataset.emptyLabel = label;
     }
@@ -124,9 +133,11 @@ function unmarkEmptyLine(element: HTMLElement): void {
     if (element.dataset.emptyLine === undefined) {
         return;
     }
+
     delete element.dataset.emptyLine;
     element.removeAttribute('aria-hidden');
     const content = element.querySelector<HTMLElement>('[data-item-section="content"]');
+
     if (content !== null) {
         delete content.dataset.emptyLabel;
     }
@@ -152,6 +163,7 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
         if (frame === null) {
             return;
         }
+
         const ports = new Map<HTMLElement, Port>();
         let shadow: ShadowRoot | null = null;
         let style: HTMLStyleElement | null = null;
@@ -163,13 +175,17 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
 
         const mark = (rows: readonly HTMLElement[], query: string): void => {
             const matches = matchHighlight();
+
             if (matches === null) {
                 return;
             }
+
             for (const range of marked) {
                 matches.delete(range);
             }
+
             marked = rangesOfMatches(rows, query);
+
             for (const range of marked) {
                 matches.add(range);
             }
@@ -178,6 +194,7 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
         const position = (): void => positionPorts(ports.values(), order);
 
         const resize = new ResizeObserver(position);
+
         const dropPort = (port: Port): void => {
             port.control.remove();
             port.decoration.remove();
@@ -187,13 +204,16 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
             port.lightDecoration.remove();
             dropIcon(port);
         };
+
         const clearPort = (port: Port): void => {
-            port.rowElement.style.removeProperty('--adecore-tree-control-space');
-            port.rowElement.style.removeProperty('--adecore-tree-decoration-space');
-            port.rowElement.style.removeProperty('--adecore-tree-status-space');
+            for (const name of ['--adecore-tree-control-space', '--adecore-tree-decoration-space', '--adecore-tree-status-space']) {
+                port.rowElement.style.removeProperty(name);
+            }
+
             delete port.rowElement.dataset.ownIcon;
             dropPort(port);
         };
+
         const dropIcon = (port: Port): void => {
             port.unhover?.();
             port.icon?.remove();
@@ -202,6 +222,7 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
             port.lightIcon = undefined;
             port.unhover = undefined;
         };
+
         // The icon lets every pointer event through to the row under it, which then opens, folds or selects as it would.
         const makeIcon = (port: Port, host: HTMLElement): void => {
             const container = document.createElement('span');
@@ -215,24 +236,29 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
             target.slot = slot.name;
             target.className = 'adecore-tree-icon';
             host.append(target);
+
             // A folder under the pointer gives its chevron back, so the row still says it opens.
             const show = (): void => {
                 if (port.rowElement.dataset.itemType === 'folder') {
                     container.dataset.hover = 'true';
                 }
             };
+
             const hide = (): void => {
                 delete container.dataset.hover;
             };
+
             port.rowElement.addEventListener('pointerenter', show);
             port.rowElement.addEventListener('pointerleave', hide);
             port.icon = container;
             port.lightIcon = target;
+
             port.unhover = () => {
                 port.rowElement.removeEventListener('pointerenter', show);
                 port.rowElement.removeEventListener('pointerleave', hide);
             };
         };
+
         const makePort = (element: HTMLElement, host: HTMLElement, kind: 'control' | 'decoration'): { container: HTMLElement; target: HTMLElement } => {
             const container = document.createElement('span');
             container.dataset.treePort = kind;
@@ -244,80 +270,104 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
             target.slot = slot.name;
             target.dataset.treeSlot = kind;
             target.className = kind === 'control' ? 'adecore-tree-control' : 'adecore-tree-decoration';
+
             // React delegates to this portal target before the event reaches the engine's shadow tree.
             for (const type of ['click', 'dblclick', 'keydown', 'keyup', 'pointerdown', 'dragstart']) {
                 target.addEventListener(type, (event) => event.stopPropagation());
             }
+
             host.append(target);
             resize.observe(target);
+
             return { container, target };
         };
+
         const scan = (): void => {
             pending = false;
+
             if (disposed) {
                 return;
             }
+
             const current = model.getFileTreeContainer();
+
             if (!current?.shadowRoot) {
                 return;
             }
+
             if (shadow !== current.shadowRoot) {
                 shadow = current.shadowRoot;
                 style = document.createElement('style');
                 style.dataset.adecoreTreeStyle = 'true';
                 style.textContent = FILE_TREE_CSS;
                 shadow.append(style);
+
                 changes.observe(shadow, {
                     childList: true,
                     subtree: true,
                     attributes: true,
                     attributeFilter: ['data-item-path', 'aria-selected', 'aria-expanded']
                 });
+
                 changes.observe(current, { childList: true, subtree: true });
                 resize.observe(current);
             }
+
             shadow.querySelector('[role="tree"]')?.setAttribute('aria-label', label);
+
             const elements = [
                 ...shadow.querySelectorAll<HTMLElement>('[data-type="item"]:not([data-item-parked="true"]):not([data-file-tree-sticky-row="true"])')
             ];
+
             const rows = mountedRows(model, shadow, elements);
             const byPath = new Map(rows.map((row) => [pathOfRow(row), row]));
             const byIndex = new Map(rows.map((row) => [row.index, row]));
             const live = new Set(elements);
+
             for (const [element, port] of ports) {
                 if (!live.has(element)) {
                     dropPort(port);
                     ports.delete(element);
                 }
             }
+
             const next: RowSlot[] = [];
             const named: HTMLElement[] = [];
+
             for (const element of elements) {
                 const path = element.dataset.itemPath;
                 const row = path === undefined ? undefined : byPath.get(path);
+
                 if (row === undefined) {
                     continue;
                 }
+
                 if (isEmptyLine(row.path)) {
                     const recycled = ports.get(element);
+
                     if (recycled !== undefined) {
                         clearPort(recycled);
                         ports.delete(element);
                     }
+
                     const directory = byPath.get(directoryOfEmptyLine(row.path));
                     markEmptyLine(element, (directory === undefined ? undefined : latestEmpty.current?.(directory)) ?? '');
+
                     continue;
                 }
+
                 unmarkEmptyLine(element);
                 named.push(element);
                 element.dataset.interactive = 'true';
                 element.dataset.joinedStart = String(row.isSelected && byIndex.get(row.index - 1)?.isSelected === true);
                 element.dataset.joinedEnd = String(row.isSelected && byIndex.get(row.index + 1)?.isSelected === true);
                 let port = ports.get(element);
+
                 if (port === undefined) {
                     serial++;
                     const control = makePort(element, current, 'control');
                     const decoration = makePort(element, current, 'decoration');
+
                     port = {
                         rowElement: element,
                         control: control.container,
@@ -325,52 +375,65 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
                         lightControl: control.target,
                         lightDecoration: decoration.target
                     };
+
                     ports.set(element, port);
                 }
+
                 if (port.control.dataset.itemPath !== row.path) {
                     port.control.dataset.itemPath = row.path;
                 }
+
                 if (port.decoration.dataset.itemPath !== row.path) {
                     port.decoration.dataset.itemPath = row.path;
                 }
+
                 port.lightControl.dataset.itemPath = row.path;
                 port.lightDecoration.dataset.itemPath = row.path;
                 const ownIcon = latestIcon.current?.(row) !== undefined;
+
                 if (ownIcon && port.icon === undefined) {
                     makeIcon(port, current);
                 } else if (!ownIcon && port.icon !== undefined) {
                     dropIcon(port);
                 }
+
                 if (port.icon !== undefined && port.icon.dataset.itemPath !== row.path) {
                     port.icon.dataset.itemPath = row.path;
                 }
+
                 if (ownIcon) {
                     element.dataset.ownIcon = 'true';
                 } else if (element.dataset.ownIcon !== undefined) {
                     delete element.dataset.ownIcon;
                 }
+
                 next.push({ row, control: port.lightControl, decoration: port.lightDecoration, icon: port.lightIcon ?? null });
             }
+
             const key = next
                 .map(
                     ({ row, control, icon }) =>
                         `${control.slot}:${row.path}:${row.isSelected}:${row.isExpanded}:${row.isFocused}:${row.name}:${icon?.slot ?? ''}`
                 )
                 .join('|');
+
             if (snapshot !== key) {
                 snapshot = key;
                 // Recycled rows must paint with their new portal contents in the same frame.
                 flushSync(() => setSlots(next));
             }
+
             mark(named, latestHighlight.current);
             position();
         };
+
         const schedule = (): void => {
             if (!pending && !disposed) {
                 pending = true;
                 queueMicrotask(scan);
             }
         };
+
         rescan.current = schedule;
         const shifts = new MutationObserver(position);
         shifts.observe(frame, { attributes: true, attributeFilter: ['style'] });
@@ -378,6 +441,7 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
         changes.observe(frame, { childList: true, subtree: true });
         const unsubscribe = model.subscribe(schedule);
         schedule();
+
         return () => {
             disposed = true;
             rescan.current = undefined;
@@ -387,6 +451,7 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
             resize.disconnect();
             style?.remove();
             mark([], '');
+
             for (const port of ports.values()) {
                 clearPort(port);
             }

package/src/format/datetime.ts

@@ -7,19 +7,19 @@ const WORD_PARTS = new Set<Intl.DateTimeFormatPartTypes>(['month', 'weekday', 'd
 const toDate = (at: Date | number): Date => (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: Date | number, options: Intl.DateTimeFormatOptions): string => {
     const date = toDate(at);
     const parts = dateFormatter(options).formatToParts(date);
+
     if (!parts.some((part) => WORD_PARTS.has(part.type))) {
         return parts.map((part) => part.value).join('');
     }
+
     const words = wordFormatter(options).formatToParts(date);
+
     return parts.map((part) => (WORD_PARTS.has(part.type) ? (words.find((word) => word.type === part.type)?.value ?? part.value) : part.value)).join('');
 };
 
@@ -35,11 +35,36 @@ const DAY_CLOCK: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric',
 const DAY_CLOCK_WITH_YEAR: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' };
 const NUMERIC_DATE: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'numeric', day: 'numeric' };
 
+const zonedSpecs = new WeakMap<Intl.DateTimeFormatOptions, Map<string, Intl.DateTimeFormatOptions>>();
+
+/* One options object per zone, so the formatter cached on it is built once (`dateFormatter`). */
+const zoned = (options: Intl.DateTimeFormatOptions, timeZone: string | undefined): Intl.DateTimeFormatOptions => {
+    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: Date | number, timeZone?: string): string => formatDateTime(at, timeZone === undefined ? CLOCK : { ...CLOCK, timeZone });
+export const formatClock = (at: Date | number, timeZone?: string): string => 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: Date | number): string => formatDateTime(at, WEEKDAY_CLOCK);
@@ -51,30 +76,28 @@ export const formatHour = (at: Date | number): string => formatDateTime(at, HOUR
 export const formatWeekday = (at: Date | number, width: 'short' | 'long' = 'short'): string => 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: Date | number, timeZone?: string): string => formatDateTime(at, timeZone === undefined ? DAY : { ...DAY, timeZone });
+export const formatDay = (at: Date | number, timeZone?: string): string => formatDateTime(at, zoned(DAY, timeZone));
 
 /* The same date with the year, for anything older than the one we are in. */
-export const formatDayWithYear = (at: Date | number, timeZone?: string): string =>
-    formatDateTime(at, timeZone === undefined ? DAY_WITH_YEAR : { ...DAY_WITH_YEAR, timeZone });
+export const formatDayWithYear = (at: Date | number, timeZone?: string): string => formatDateTime(at, zoned(DAY_WITH_YEAR, timeZone));
 
 /* `Sat 19 Sep`. */
 export const formatWeekdayDay = (at: Date | number): string => formatDateTime(at, WEEKDAY_DAY);
 
 /* `19 Sep, 08:05`: a moment that is not today, to the minute. */
-export const formatDayClock = (at: Date | number, timeZone?: string): string =>
-    formatDateTime(at, timeZone === undefined ? DAY_CLOCK : { ...DAY_CLOCK, timeZone });
+export const formatDayClock = (at: Date | number, timeZone?: string): string => formatDateTime(at, zoned(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: Date | number, timeZone?: string): string =>
-    formatDateTime(at, timeZone === undefined ? DAY_CLOCK_WITH_YEAR : { ...DAY_CLOCK_WITH_YEAR, timeZone });
+/* `19 Sep 2026, 08:05`: the same moment with the year. */
+export const formatDayClockWithYear = (at: Date | number, timeZone?: string): string => 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: Date | number): string => 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: Date | number, b: Date | number): boolean => {
     const left = toDate(a);
     const right = toDate(b);
+
     return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
 };
 
@@ -90,8 +113,10 @@ export const formatAge = (at: Date | number, now: Date | number = Date.now()): s
     const date = toDate(at);
     const today = toDate(now);
     const past = today.getTime() - date.getTime();
+
     if (past < WEEK) {
         return formatAgo(past);
     }
+
     return date.getFullYear() === today.getFullYear() ? formatDay(date) : formatDayWithYear(date);
 };

package/src/format/duration.ts

@@ -6,20 +6,20 @@ 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: number): string => {
     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`;
 };
 
@@ -30,61 +30,75 @@ export const formatDuration = (ms: number): string => {
 export const formatPreciseDuration = (ms: number): string => {
     const value = Math.max(0, ms);
     const tenths = Math.round(value * 10) / 10;
+
     if (tenths < 10) {
         return `${formatRounded(tenths, 1)} ms`;
     }
+
     if (Math.round(value) < SECOND) {
         return `${formatNumber(Math.round(value))} ms`;
     }
+
     const hundredths = Math.round(value / 10) / 100;
+
     if (hundredths < 10) {
         return `${formatRounded(hundredths, 2)} s`;
     }
+
     const seconds = Math.round(value / 100) / 10;
+
     if (seconds < 60) {
         return `${formatRounded(seconds, 1)} s`;
     }
+
     return formatDuration(value);
 };
 
 /* How long a window still has, tight enough for the end of a bar: `4d 3h`, `12h 8m`, `9m`. */
 export const formatCountdown = (ms: number): string => {
     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`.
- */
+/* `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: number): string => {
     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: number): string => {
     const seconds = Math.max(0, Math.floor(ms / SECOND));
+
     const pad = (value: number): string => 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;
 };
 
@@ -94,14 +108,18 @@ const NOW: Intl.RelativeTimeFormatOptions = { 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: number): string => {
     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/src/format/index.ts

@@ -16,8 +16,10 @@ export {
     formatWeekdayDay,
     isSameDay
 } from './datetime.ts';
+
 export { formatAgo, formatClockDuration, formatCountdown, formatDuration, formatElapsedShort, formatPreciseDuration } from './duration.ts';
 export { formatLocale, labelCollator, nameCollator, setFormatSource, systemLocale, useFormatLocale, type FormatSource } from './locale.ts';
+
 export {
     formatBytes,
     formatDecimal,
@@ -29,5 +31,6 @@ export {
     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';