@adecore/ui 0.35.5 → 0.37.0

package/dist/file-tree/use-empty-lines.d.ts

@@ -0,0 +1,3 @@
+import type { FileTree } from '@pierre/trees';
+import { type FileTreeEmptyLabel } from './empty-lines.ts';
+export declare function useEmptyLines(model: FileTree, frame: HTMLElement | null, emptyLabel: FileTreeEmptyLabel | undefined): (event: KeyboardEvent) => void;

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

@@ -0,0 +1,176 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { emptyLineChanges, isEmptyLine, pastEmptyLine, skipEmptyLine } from './empty-lines.js';
+import { movesFocus, visibleRows } from './helpers.js';
+const POINTER_EVENTS = ['pointerdown', 'mousedown', 'click', 'dblclick', 'auxclick', 'contextmenu', 'dragstart'];
+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.
+ */
+export function useEmptyLines(model, frame, emptyLabel) {
+  const $ = _c(12);
+  const latest = useRef(emptyLabel);
+  const reconcile = useRef(undefined);
+  const lastKey = useRef("");
+  const enabled = emptyLabel !== undefined;
+  let t0;
+  let t1;
+  if ($[0] !== emptyLabel) {
+    t0 = () => {
+      latest.current = emptyLabel;
+      reconcile.current?.();
+    };
+    t1 = [emptyLabel];
+    $[0] = emptyLabel;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  useLayoutEffect(t0, t1);
+  let t2;
+  let t3;
+  if ($[3] !== enabled || $[4] !== model) {
+    t2 = () => {
+      if (!enabled) {
+        return;
+      }
+      const added = new Set();
+      let pending = false;
+      let disposed = false;
+      const run = () => {
+        pending = false;
+        const labelOf = latest.current;
+        if (disposed || labelOf === undefined) {
+          return;
+        }
+        const selectedLines = model.getSelectedPaths().filter(isEmptyLine);
+        for (const path of selectedLines) {
+          model.getItem(path)?.deselect();
+        }
+        const focused = skipEmptyLine(model, lastKey.current) ? model.getFocusedPath() : null;
+        if (focused !== null && selectedLines.length > 0) {
+          model.getItem(focused)?.select();
+        }
+        const {
+          add,
+          remove
+        } = emptyLineChanges(visibleRows(model), labelOf, path_0 => model.getItem(path_0) !== null, added);
+        for (const path_1 of remove) {
+          added.delete(path_1);
+        }
+        for (const path_2 of add) {
+          added.add(path_2);
+        }
+        if (add.length > 0 || remove.length > 0) {
+          model.batch([...remove.map(_temp), ...add.map(_temp2)]);
+        }
+      };
+      const schedule = () => {
+        if (!pending && !disposed) {
+          pending = true;
+          queueMicrotask(run);
+        }
+      };
+      reconcile.current = schedule;
+      const unsubscribe = model.subscribe(schedule);
+      run();
+      return () => {
+        disposed = true;
+        reconcile.current = undefined;
+        unsubscribe();
+        const left = [...added].filter(path_5 => model.getItem(path_5) !== null);
+        if (left.length > 0) {
+          model.batch(left.map(_temp3));
+        }
+      };
+    };
+    t3 = [model, enabled];
+    $[3] = enabled;
+    $[4] = model;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t2 = $[5];
+    t3 = $[6];
+  }
+  useEffect(t2, t3);
+  let t4;
+  let t5;
+  if ($[7] !== frame) {
+    t4 = () => {
+      if (frame === null) {
+        return;
+      }
+      const block = _temp4;
+      for (const type of POINTER_EVENTS) {
+        frame.addEventListener(type, block, true);
+      }
+      return () => {
+        for (const type_0 of POINTER_EVENTS) {
+          frame.removeEventListener(type_0, block, true);
+        }
+      };
+    };
+    t5 = [frame];
+    $[7] = frame;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t4 = $[8];
+    t5 = $[9];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[10] !== model) {
+    t6 = event_0 => {
+      lastKey.current = event_0.key;
+      const past = latest.current !== undefined && movesFocus(event_0) ? pastEmptyLine(model, event_0.key) : null;
+      if (past === null) {
+        return;
+      }
+      event_0.preventDefault();
+      event_0.stopPropagation();
+      if (past !== model.getFocusedPath()) {
+        model.scrollToPath(past, {
+          focus: true,
+          offset: "nearest"
+        });
+      }
+    };
+    $[10] = model;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  return t6;
+}
+function _temp4(event) {
+  if (onEmptyLine(event)) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+}
+function _temp3(path_6) {
+  return {
+    type: "remove",
+    path: path_6
+  };
+}
+function _temp2(path_4) {
+  return {
+    type: "add",
+    path: path_4
+  };
+}
+function _temp(path_3) {
+  return {
+    type: "remove",
+    path: path_3
+  };
+}

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

@@ -3,6 +3,7 @@ import { useFileTree as usePierreFileTree } from '@pierre/trees/react';
 import { useLayoutEffect, useRef } from 'react';
 import { FILE_TREE_ICONS } from '../file-icon.js';
 import { TREE_ROW_HEIGHT } from '../tree/style.js';
+import { isEmptyLine } from './empty-lines.js';
 import { compareRows } from './helpers.js';
 import { FILE_TREE_CSS } from './style.js';
 // Model options are initial; paths and status can subsequently change through the model's mutation methods.
@@ -37,7 +38,7 @@ export function useFileTree(options) {
   }
   let t3;
   if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = paths => latest.current?.(paths);
+    t3 = paths => latest.current?.(paths.some(isEmptyLine) ? paths.filter(_temp) : paths);
     $[4] = t3;
   } else {
     t3 = $[4];
@@ -65,4 +66,7 @@ export function useFileTree(options) {
     t5 = $[7];
   }
   return usePierreFileTree(t5);
+}
+function _temp(path) {
+  return !isEmptyLine(path);
 }

package/dist/file-tree/use-slots.d.ts

@@ -1,8 +1,11 @@
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+import type { LucideIcon } from 'lucide-react';
+import { type FileTreeEmptyLabel } from './empty-lines.ts';
 export interface RowSlot {
     row: FileTreeVisibleRow;
     control: HTMLElement;
     decoration: HTMLElement;
+    icon: HTMLElement | null;
 }
 export interface Port {
     rowElement: HTMLElement;
@@ -10,6 +13,17 @@ export interface Port {
     decoration: HTMLElement;
     lightControl: HTMLElement;
     lightDecoration: HTMLElement;
+    icon?: HTMLElement;
+    lightIcon?: HTMLElement;
+    unhover?(): void;
 }
-export declare function positionPorts(ports: Iterable<Port>): void;
-export declare function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, label: string): RowSlot[];
+export type FileTreeRowIcon = (row: FileTreeVisibleRow) => LucideIcon | undefined;
+export type FileTreeDecorationOrder = 'before-status' | 'after-status';
+export declare function positionPorts(ports: Iterable<Port>, order?: FileTreeDecorationOrder): void;
+export interface FileTreeSlotOptions {
+    order: FileTreeDecorationOrder;
+    rowIcon?: FileTreeRowIcon;
+    highlight: string;
+    emptyLabel?: FileTreeEmptyLabel;
+}
+export declare function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, label: string, { order, rowIcon, highlight, emptyLabel }: FileTreeSlotOptions): RowSlot[];

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

@@ -1,6 +1,8 @@
-import { useEffect, useId, useState } from 'react';
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
+import { directoryOfEmptyLine, isEmptyLine } from './empty-lines.js';
 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
@@ -24,38 +26,46 @@ function mountedRows(model, shadow, elements) {
  * 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.
  */
-export function positionPorts(ports) {
+export function positionPorts(ports, order = 'before-status') {
   const spaced = [...ports].map(port => ({
     port,
+    // Without a git column, after the column is right after the name.
+    status: order === 'after-status' ? port.rowElement.querySelector('[data-item-section="git"]') : null,
     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', decoration);
+    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 content = row.querySelector('[data-item-section="content"]');
+    const before = status ?? row.querySelector('[data-item-section="content"]');
     const icon = row.querySelector('[data-item-section="icon"]');
+    const iconLeft = row.offsetLeft + (icon?.offsetLeft ?? 4);
     return {
       port,
       top: `${row.offsetTop}px`,
-      controlLeft: `${row.offsetLeft + (icon?.offsetLeft ?? 4) - control}px`,
-      decorationLeft: `${row.offsetLeft + (content === null ? row.offsetWidth - decoration - 2 : content.offsetLeft + content.offsetWidth + 6)}px`
+      iconLeft: `${iconLeft}px`,
+      controlLeft: `${iconLeft - control}px`,
+      decorationLeft: `${row.offsetLeft + (before === null ? row.offsetWidth - decoration - 2 : before.offsetLeft + before.offsetWidth + 6)}px`
     };
   });
   for (const {
     port,
     top,
+    iconLeft,
     controlLeft,
     decorationLeft
   } of placed) {
@@ -63,6 +73,10 @@ export function positionPorts(ports) {
     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;
+    }
   }
 }
 // An unchanged space is left alone, so a pass that only scrolled measures once.
@@ -72,10 +86,47 @@ function setSpace(row, name, space) {
     row.style.setProperty(name, value);
   }
 }
+/* An empty line draws its directory's label in place of its name and is no item to point at or read out. */
+function markEmptyLine(element, label) {
+  element.dataset.emptyLine = 'true';
+  element.dataset.interactive = 'false';
+  element.setAttribute('aria-hidden', 'true');
+  const content = element.querySelector('[data-item-section="content"]');
+  if (content !== null && content.dataset.emptyLabel !== label) {
+    content.dataset.emptyLabel = label;
+  }
+}
+// The engine recycles row elements, so one that drew a line can come back as an ordinary row.
+function unmarkEmptyLine(element) {
+  if (element.dataset.emptyLine === undefined) {
+    return;
+  }
+  delete element.dataset.emptyLine;
+  element.removeAttribute('aria-hidden');
+  const content = element.querySelector('[data-item-section="content"]');
+  if (content !== null) {
+    delete content.dataset.emptyLabel;
+  }
+}
 // beta.6 owns button rows. Sibling slots keep real controls outside those buttons and in the app's stylesheet.
-export function useFileTreeSlots(model, frame, label) {
+export function useFileTreeSlots(model, frame, label, {
+  order,
+  rowIcon,
+  highlight,
+  emptyLabel
+}) {
   const prefix = useId().replaceAll(':', '');
   const [slots, setSlots] = useState([]);
+  const latestIcon = useRef(rowIcon);
+  const latestHighlight = useRef(highlight);
+  const latestEmpty = useRef(emptyLabel);
+  const rescan = useRef(undefined);
+  useLayoutEffect(() => {
+    latestIcon.current = rowIcon;
+    latestHighlight.current = highlight;
+    latestEmpty.current = emptyLabel;
+    rescan.current?.();
+  }, [rowIcon, highlight, emptyLabel]);
   useEffect(() => {
     if (frame === null) {
       return;
@@ -87,7 +138,21 @@ export function useFileTreeSlots(model, frame, label) {
     let disposed = false;
     let pending = false;
     let snapshot = null;
-    const position = () => positionPorts(ports.values());
+    let marked = [];
+    const mark = (rows, query) => {
+      const matches = matchHighlight();
+      if (matches === null) {
+        return;
+      }
+      for (const range of marked) {
+        matches.delete(range);
+      }
+      marked = rangesOfMatches(rows, query);
+      for (const range_0 of marked) {
+        matches.add(range_0);
+      }
+    };
+    const position = () => positionPorts(ports.values(), order);
     const resize = new ResizeObserver(position);
     const dropPort = port => {
       port.control.remove();
@@ -96,27 +161,74 @@ export function useFileTreeSlots(model, frame, label) {
       resize.unobserve(port.lightDecoration);
       port.lightControl.remove();
       port.lightDecoration.remove();
+      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');
+      delete port_0.rowElement.dataset.ownIcon;
+      dropPort(port_0);
+    };
+    const dropIcon = port_1 => {
+      port_1.unhover?.();
+      port_1.icon?.remove();
+      port_1.lightIcon?.remove();
+      port_1.icon = undefined;
+      port_1.lightIcon = undefined;
+      port_1.unhover = undefined;
     };
-    const makePort = (element, host, kind) => {
+    // The icon lets every pointer event through to the row under it, which then opens, folds or selects as it would.
+    const makeIcon = (port_2, host) => {
       const container = document.createElement('span');
-      container.dataset.treePort = kind;
+      container.dataset.treePort = 'icon';
+      container.dataset.itemPath = port_2.rowElement.dataset.itemPath;
       const slot = document.createElement('slot');
-      slot.name = `${prefix}-${kind}-${serial}`;
+      slot.name = `${prefix}-icon-${serial++}`;
       container.append(slot);
-      element.parentElement?.append(container);
+      port_2.rowElement.parentElement?.append(container);
       const target = document.createElement('span');
       target.slot = slot.name;
-      target.dataset.treeSlot = kind;
-      target.className = kind === 'control' ? 'adecore-tree-control' : 'adecore-tree-decoration';
+      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 = () => {
+        if (port_2.rowElement.dataset.itemType === 'folder') {
+          container.dataset.hover = 'true';
+        }
+      };
+      const hide = () => {
+        delete container.dataset.hover;
+      };
+      port_2.rowElement.addEventListener('pointerenter', show);
+      port_2.rowElement.addEventListener('pointerleave', hide);
+      port_2.icon = container;
+      port_2.lightIcon = target;
+      port_2.unhover = () => {
+        port_2.rowElement.removeEventListener('pointerenter', show);
+        port_2.rowElement.removeEventListener('pointerleave', hide);
+      };
+    };
+    const makePort = (element, host_0, kind) => {
+      const container_0 = document.createElement('span');
+      container_0.dataset.treePort = kind;
+      const slot_0 = document.createElement('slot');
+      slot_0.name = `${prefix}-${kind}-${serial}`;
+      container_0.append(slot_0);
+      element.parentElement?.append(container_0);
+      const target_0 = document.createElement('span');
+      target_0.slot = slot_0.name;
+      target_0.dataset.treeSlot = kind;
+      target_0.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());
+        target_0.addEventListener(type, event => event.stopPropagation());
       }
-      host.append(target);
-      resize.observe(target);
+      host_0.append(target_0);
+      resize.observe(target_0);
       return {
-        container,
-        target
+        container: container_0,
+        target: target_0
       };
     };
     const scan = () => {
@@ -148,63 +260,93 @@ export function useFileTreeSlots(model, frame, label) {
       }
       shadow.querySelector('[role="tree"]')?.setAttribute('aria-label', label);
       const elements = [...shadow.querySelectorAll('[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_0 => [row_0.index, row_0]));
+      const rows_0 = mountedRows(model, shadow, elements);
+      const byPath = new Map(rows_0.map(row => [pathOfRow(row), row]));
+      const byIndex = new Map(rows_0.map(row_0 => [row_0.index, row_0]));
       const live = new Set(elements);
-      for (const [element_0, port_0] of ports) {
+      for (const [element_0, port_3] of ports) {
         if (!live.has(element_0)) {
-          dropPort(port_0);
+          dropPort(port_3);
           ports.delete(element_0);
         }
       }
       const next = [];
+      const named = [];
       for (const element_1 of elements) {
         const path = element_1.dataset.itemPath;
         const row_1 = path === undefined ? undefined : byPath.get(path);
         if (row_1 === undefined) {
           continue;
         }
+        if (isEmptyLine(row_1.path)) {
+          const recycled = ports.get(element_1);
+          if (recycled !== undefined) {
+            clearPort(recycled);
+            ports.delete(element_1);
+          }
+          const directory = byPath.get(directoryOfEmptyLine(row_1.path));
+          markEmptyLine(element_1, (directory === undefined ? undefined : latestEmpty.current?.(directory)) ?? '');
+          continue;
+        }
+        unmarkEmptyLine(element_1);
+        named.push(element_1);
         element_1.dataset.interactive = 'true';
         element_1.dataset.joinedStart = String(row_1.isSelected && byIndex.get(row_1.index - 1)?.isSelected === true);
         element_1.dataset.joinedEnd = String(row_1.isSelected && byIndex.get(row_1.index + 1)?.isSelected === true);
-        let port_1 = ports.get(element_1);
-        if (port_1 === undefined) {
+        let port_4 = ports.get(element_1);
+        if (port_4 === undefined) {
           serial++;
           const control = makePort(element_1, current, 'control');
           const decoration = makePort(element_1, current, 'decoration');
-          port_1 = {
+          port_4 = {
             rowElement: element_1,
             control: control.container,
             decoration: decoration.container,
             lightControl: control.target,
             lightDecoration: decoration.target
           };
-          ports.set(element_1, port_1);
+          ports.set(element_1, port_4);
+        }
+        if (port_4.control.dataset.itemPath !== row_1.path) {
+          port_4.control.dataset.itemPath = row_1.path;
+        }
+        if (port_4.decoration.dataset.itemPath !== row_1.path) {
+          port_4.decoration.dataset.itemPath = row_1.path;
+        }
+        port_4.lightControl.dataset.itemPath = row_1.path;
+        port_4.lightDecoration.dataset.itemPath = row_1.path;
+        const ownIcon = latestIcon.current?.(row_1) !== undefined;
+        if (ownIcon && port_4.icon === undefined) {
+          makeIcon(port_4, current);
+        } else if (!ownIcon && port_4.icon !== undefined) {
+          dropIcon(port_4);
         }
-        if (port_1.control.dataset.itemPath !== row_1.path) {
-          port_1.control.dataset.itemPath = row_1.path;
+        if (port_4.icon !== undefined && port_4.icon.dataset.itemPath !== row_1.path) {
+          port_4.icon.dataset.itemPath = row_1.path;
         }
-        if (port_1.decoration.dataset.itemPath !== row_1.path) {
-          port_1.decoration.dataset.itemPath = row_1.path;
+        if (ownIcon) {
+          element_1.dataset.ownIcon = 'true';
+        } else if (element_1.dataset.ownIcon !== undefined) {
+          delete element_1.dataset.ownIcon;
         }
-        port_1.lightControl.dataset.itemPath = row_1.path;
-        port_1.lightDecoration.dataset.itemPath = row_1.path;
         next.push({
           row: row_1,
-          control: port_1.lightControl,
-          decoration: port_1.lightDecoration
+          control: port_4.lightControl,
+          decoration: port_4.lightDecoration,
+          icon: port_4.lightIcon ?? null
         });
       }
       const key = next.map(({
         row: row_2,
-        control: control_0
-      }) => `${control_0.slot}:${row_2.path}:${row_2.isSelected}:${row_2.isExpanded}:${row_2.isFocused}:${row_2.name}`).join('|');
+        control: control_0,
+        icon
+      }) => `${control_0.slot}:${row_2.path}:${row_2.isSelected}:${row_2.isExpanded}:${row_2.isFocused}:${row_2.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 = () => {
@@ -213,6 +355,7 @@ export function useFileTreeSlots(model, frame, label) {
         queueMicrotask(scan);
       }
     };
+    rescan.current = schedule;
     const shifts = new MutationObserver(position);
     shifts.observe(frame, {
       attributes: true,
@@ -227,17 +370,17 @@ export function useFileTreeSlots(model, frame, label) {
     schedule();
     return () => {
       disposed = true;
+      rescan.current = undefined;
       unsubscribe();
       changes.disconnect();
       shifts.disconnect();
       resize.disconnect();
       style?.remove();
-      for (const port_2 of ports.values()) {
-        port_2.rowElement.style.removeProperty('--adecore-tree-control-space');
-        port_2.rowElement.style.removeProperty('--adecore-tree-decoration-space');
-        dropPort(port_2);
+      mark([], '');
+      for (const port_5 of ports.values()) {
+        clearPort(port_5);
       }
     };
-  }, [frame, model, label, prefix]);
+  }, [frame, model, label, order, prefix]);
   return slots;
 }

package/dist/format/index.d.ts

@@ -1,6 +1,6 @@
 export { formatAge, formatClock, formatDateTime, formatDay, formatDayClock, formatDayClockWithYear, formatDayWithYear, formatHour, formatMoment, formatNumericDate, formatWeekday, formatWeekdayClock, formatWeekdayDay, isSameDay } from './datetime.ts';
 export { formatAgo, formatClockDuration, formatCountdown, formatDuration, formatElapsedShort, formatPreciseDuration } from './duration.ts';
-export { formatLocale, labelCollator, setFormatSource, systemLocale, useFormatLocale, type FormatSource } from './locale.ts';
+export { formatLocale, labelCollator, nameCollator, setFormatSource, systemLocale, useFormatLocale, type FormatSource } from './locale.ts';
 export { formatBytes, formatDecimal, formatMoney, formatNumber, formatNumeral, formatPercent, formatRounded, 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

@@ -1,7 +1,7 @@
 /* Every number, date, time and duration a person reads, written the way the language and the region they set ask for. */
 export { formatAge, formatClock, formatDateTime, formatDay, formatDayClock, formatDayClockWithYear, formatDayWithYear, formatHour, formatMoment, formatNumericDate, formatWeekday, formatWeekdayClock, formatWeekdayDay, isSameDay } from './datetime.js';
 export { formatAgo, formatClockDuration, formatCountdown, formatDuration, formatElapsedShort, formatPreciseDuration } from './duration.js';
-export { formatLocale, labelCollator, setFormatSource, systemLocale, useFormatLocale } from './locale.js';
+export { formatLocale, labelCollator, nameCollator, setFormatSource, systemLocale, useFormatLocale } from './locale.js';
 export { formatBytes, formatDecimal, formatMoney, formatNumber, formatNumeral, formatPercent, formatRounded, 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

@@ -14,5 +14,6 @@ export declare const numberFormatter: (options: Intl.NumberFormatOptions) => Int
 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 nameCollator: (options: Intl.CollatorOptions) => Intl.Collator;
 export declare const labelCollator: () => Intl.Collator;
 export declare const nameOrder: (left: string, right: string) => number;

package/dist/format/locale.js

@@ -75,11 +75,7 @@ const subscribe = onChange => source.subscribe(onChange);
 export const useFormatLocale = () => {
   return useSyncExternalStore(subscribe, formatLocale, formatLocale);
 };
-/*
- * A formatter per options object, keyed on the object itself, so a module-level spec builds its
- * formatter once and a list of a thousand rows constructs nothing. A region change throws the entry
- * away, since the locale is part of what was cached.
- */
+/* A module-level options object shares its formatter across rows; a changed locale replaces it. */
 const cacheFor = (store, options, locale, build) => {
   const hit = store.get(options);
   if (hit !== undefined && hit.locale === locale) {
@@ -96,6 +92,7 @@ const numbers = new WeakMap();
 const dates = new WeakMap();
 const words = new WeakMap();
 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,
@@ -103,6 +100,8 @@ export const dateFormatter = options => cacheFor(dates, options, formatLocale(),
 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