@adecore/ui 0.36.0 → 0.37.0

package/dist/command-palette/context.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from 'react';
+interface PaletteRefs {
+    input: RefObject<HTMLInputElement | null>;
+    list: RefObject<HTMLDivElement | null>;
+    highlight(row: Element): void;
+    virtualScroll: RefObject<((index: number, reason: string) => void) | null>;
+}
+export declare const PaletteRefsContext: import("react").Context<PaletteRefs | null>;
+export declare function useCommandPaletteVirtualScroll(): PaletteRefs['virtualScroll'] | null;
+export {};

package/dist/command-palette/context.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export const PaletteRefsContext = createContext(null);
+export function useCommandPaletteVirtualScroll() {
+  return useContext(PaletteRefsContext)?.virtualScroll ?? null;
+}

package/dist/command-palette/index.parts.d.ts

@@ -1,2 +1,3 @@
 export { ComboboxCollection as Collection, ComboboxEmpty as Empty, ComboboxGroup as Group, ComboboxGroupLabel as GroupLabel, ComboboxItem as Item, ComboboxStatus as Status } from '../combobox/parts.tsx';
 export { CommandPaletteFooter as Footer, CommandPaletteInput as Input, CommandPaletteList as List, CommandPalettePopup as Popup, CommandPaletteRoot as Root } from './parts.tsx';
+export { CommandPaletteVirtualList as VirtualList } from './virtual.tsx';

package/dist/command-palette/index.parts.js

@@ -1,3 +1,4 @@
 /* A command palette is a combobox in a dialog; its rows, groups and notes are the combobox's own. */
 export { ComboboxCollection as Collection, ComboboxEmpty as Empty, ComboboxGroup as Group, ComboboxGroupLabel as GroupLabel, ComboboxItem as Item, ComboboxStatus as Status } from "../combobox/parts.js";
-export { CommandPaletteFooter as Footer, CommandPaletteInput as Input, CommandPaletteList as List, CommandPalettePopup as Popup, CommandPaletteRoot as Root } from "./parts.js";
+export { CommandPaletteFooter as Footer, CommandPaletteInput as Input, CommandPaletteList as List, CommandPalettePopup as Popup, CommandPaletteRoot as Root } from "./parts.js";
+export { CommandPaletteVirtualList as VirtualList } from "./virtual.js";

package/dist/command-palette/parts.d.ts

@@ -13,7 +13,7 @@ type AutocompleteProps<ItemValue> = Omit<Autocomplete.Root.Props<ItemValue>, 'op
 };
 type DialogProps = Pick<ComponentProps<typeof DialogRoot>, 'open' | 'defaultOpen' | 'onOpenChange' | 'onOpenChangeComplete'>;
 export type CommandPaletteRootProps<ItemValue> = AutocompleteProps<ItemValue> & DialogProps;
-export declare function CommandPaletteRoot<ItemValue>({ open, defaultOpen, onOpenChange, onOpenChangeComplete, autoHighlight, keepHighlight, highlightItemOnHover, value, onValueChange, items, children, ...props }: CommandPaletteRootProps<ItemValue>): import("react").JSX.Element;
+export declare function CommandPaletteRoot<ItemValue>({ open, defaultOpen, onOpenChange, onOpenChangeComplete, autoHighlight, keepHighlight, highlightItemOnHover, value, onValueChange, items, onItemHighlighted, children, ...props }: CommandPaletteRootProps<ItemValue>): import("react").JSX.Element;
 export type CommandPalettePopupProps = Omit<DialogPopupProps, 'size'> & {
     size?: keyof typeof SIZE;
 };

package/dist/command-palette/parts.js

@@ -1,5 +1,5 @@
 import { c as _c } from "react/compiler-runtime";
-import { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';
+import { useContext, useLayoutEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import clsx from 'clsx';
 import { Search } from 'lucide-react';
@@ -12,8 +12,8 @@ import { Icon } from "../Icon.js";
 import { Kbd } from "../Kbd.js";
 import { mergeRefs } from '../merge-refs.js';
 import { KEY_SHORTCUTS } from '../shortcut.js';
+import { PaletteRefsContext } from './context.js';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const PaletteRefsContext = createContext(null);
 const NO_ITEMS = [];
 /* A palette asks for a few words and shows rows of one line; a search whose rows are lines of source needs the wider one. */
 const SIZE = {
@@ -36,11 +36,13 @@ export function CommandPaletteRoot({
   value,
   onValueChange,
   items,
+  onItemHighlighted,
   children,
   ...props
 }) {
   const inputRef = useRef(null);
   const listRef = useRef(null);
+  const virtualScroll = useRef(null);
   const [focusHighlight, setFocusHighlight] = useState(false);
   /*
    * Base UI moves the highlight to the first row for a typed query only. For a query the app sets,
@@ -89,7 +91,8 @@ export function CommandPaletteRoot({
       value: {
         input: inputRef,
         list: listRef,
-        highlight
+        highlight,
+        virtualScroll
       },
       children: /*#__PURE__*/_jsx(Autocomplete.Root, {
         ...props,
@@ -101,6 +104,12 @@ export function CommandPaletteRoot({
           onValueChange?.(next, details);
         },
         items: resetting ? NO_ITEMS : items,
+        onItemHighlighted: (item, details_0) => {
+          if (item !== undefined && virtualScroll.current !== null) {
+            queueMicrotask(() => virtualScroll.current?.(details_0.index, details_0.reason));
+          }
+          onItemHighlighted?.(item, details_0);
+        },
         inline: true,
         open: true,
         autoHighlight: autoHighlight,

package/dist/command-palette/virtual.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { CommandPaletteList } from './parts.tsx';
+export interface CommandPaletteVirtualItemProps {
+    index: number;
+    'aria-setsize': number;
+    'aria-posinset': number;
+}
+export type CommandPaletteVirtualListProps<ItemValue, Group extends {
+    items: readonly ItemValue[];
+} = {
+    items: readonly ItemValue[];
+}> = Omit<ComponentProps<typeof CommandPaletteList>, 'children'> & {
+    children(item: ItemValue, props: CommandPaletteVirtualItemProps): ReactNode;
+    groupLabel?(group: Group): ReactNode;
+};
+export declare function CommandPaletteVirtualList<ItemValue, Group extends {
+    items: readonly ItemValue[];
+} = {
+    items: readonly ItemValue[];
+}>({ children, groupLabel, ref, ...props }: CommandPaletteVirtualListProps<ItemValue, Group>): import("react").JSX.Element;

package/dist/command-palette/virtual.js

@@ -0,0 +1,155 @@
+import { Fragment, useLayoutEffect, useMemo, useRef } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { CommandPaletteList } from "./parts.js";
+import { useCommandPaletteVirtualScroll } from './context.js';
+import { MENU_LABEL } from "../menu/parts.js";
+import { mergeRefs } from '../merge-refs.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function virtualRowsOf(values, labelled) {
+  const groups = [];
+  const rows = [];
+  const itemRows = [];
+  let count = 0;
+  for (const value of values) {
+    const grouped = value !== null && typeof value === 'object' && 'items' in value && Array.isArray(value.items);
+    const group = grouped ? value : null;
+    if (group !== null && group.items.length === 0) {
+      continue;
+    }
+    const groupIndex = groups.length;
+    groups.push(group);
+    if (group !== null && labelled) {
+      rows.push({
+        group: groupIndex,
+        index: -1
+      });
+    }
+    for (const item of group === null ? [value] : group.items) {
+      itemRows.push(rows.length);
+      rows.push({
+        group: groupIndex,
+        index: count++,
+        item
+      });
+    }
+  }
+  return {
+    groups,
+    rows,
+    itemRows,
+    count
+  };
+}
+/* The root retains every value for keyboard navigation; only the visible rows need DOM elements. */
+export function CommandPaletteVirtualList({
+  children,
+  groupLabel,
+  ref,
+  ...props
+}) {
+  // The virtualizer keeps a mutable handle; every render reads its current window.
+  'use no memo';
+
+  const scroll = useCommandPaletteVirtualScroll();
+  const filtered = Autocomplete.useFilteredItems();
+  const scrollRef = useRef(null);
+  const labelled = groupLabel !== undefined;
+  const {
+    groups,
+    rows,
+    itemRows,
+    count
+  } = useMemo(() => virtualRowsOf(filtered, labelled), [filtered, labelled]);
+  // oxlint-disable-next-line react/incompatible-library
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: index => rows[index].index === -1 ? 28 : 32,
+    overscan: 8,
+    initialRect: {
+      width: 576,
+      height: 320
+    },
+    scrollPaddingStart: 6,
+    scrollPaddingEnd: 6
+  });
+  useLayoutEffect(() => {
+    if (scroll === null) {
+      return;
+    }
+    const highlight = (index_0, reason) => {
+      const row = itemRows[index_0];
+      if (row !== undefined && reason !== 'pointer') {
+        virtualizer.scrollToIndex(row, {
+          align: reason === 'none' ? 'start' : 'auto'
+        });
+      }
+    };
+    scroll.current = highlight;
+    return () => {
+      if (scroll.current === highlight) {
+        scroll.current = null;
+      }
+    };
+  }, [scroll, virtualizer, itemRows]);
+  const visible = virtualizer.getVirtualItems();
+  const visibleGroups = new Map();
+  for (const item of visible) {
+    const group = rows[item.index].group;
+    const current = visibleGroups.get(group);
+    if (current === undefined) {
+      visibleGroups.set(group, [item]);
+    } else {
+      current.push(item);
+    }
+  }
+  const renderRows = items => items.map(item_0 => {
+    const row_0 = rows[item_0.index];
+    const group_0 = groups[row_0.group];
+    return /*#__PURE__*/_jsx("div", {
+      role: "presentation",
+      "data-index": item_0.index,
+      ref: virtualizer.measureElement,
+      className: "absolute top-0 left-0 w-full",
+      style: {
+        transform: `translateY(${item_0.start}px)`
+      },
+      children: row_0.index === -1 && group_0 !== null && group_0 !== undefined ? /*#__PURE__*/_jsx(Autocomplete.GroupLabel, {
+        className: MENU_LABEL,
+        children: groupLabel?.(group_0)
+      }) : children(row_0.item, {
+        index: row_0.index,
+        'aria-posinset': row_0.index + 1,
+        'aria-setsize': count
+      })
+    }, item_0.key);
+  });
+  return /*#__PURE__*/_jsx(CommandPaletteList, {
+    ...props,
+    ref: mergeRefs(ref, scrollRef),
+    children: /*#__PURE__*/_jsx("div", {
+      role: "presentation",
+      className: "relative",
+      style: {
+        height: virtualizer.getTotalSize()
+      },
+      children: [...visibleGroups].map(([index_1, items_0]) => {
+        const group_1 = groups[index_1];
+        if (group_1 === null || group_1 === undefined) {
+          return /*#__PURE__*/_jsx(Fragment, {
+            children: renderRows(items_0)
+          }, index_1);
+        }
+        const labelVisible = items_0.some(item_1 => rows[item_1.index].index === -1);
+        return /*#__PURE__*/_jsxs(Autocomplete.Group, {
+          items: group_1.items,
+          children: [!labelVisible && groupLabel !== undefined && /*#__PURE__*/_jsx(Autocomplete.GroupLabel, {
+            className: "sr-only",
+            children: groupLabel(group_1)
+          }), renderRows(items_0)]
+        }, index_1);
+      })
+    })
+  });
+}

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

package/dist/index.d.ts

@@ -103,3 +103,4 @@ export { DropPreview, type DropPreviewProps } from './workspace/DropPreview.tsx'
 export { rectDropPreview, sameDropPreview, tabDropPreview, type DropPreviewShape, type TabDrop } from './workspace/preview.ts';
 export { createSplitLayout, updateSplitLayout, splitPanes, type SplitAxis, type SplitSide, type SplitPane, type SplitBranch, type SplitNode, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",
@@ -67,6 +67,7 @@
   "dependencies": {
     "@base-ui/react": "^1.9.0",
     "@pierre/trees": "1.0.0-beta.6",
+    "@tanstack/react-virtual": "^3.14.13",
     "clsx": "^2.1.1",
     "lucide-react": "^1.47.0",
     "zustand": "^5.0.15"

package/src/command-palette/context.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext, type RefObject } from 'react';
+
+interface PaletteRefs {
+    /* For the popup to put the focus in when it opens: a control before it would take it otherwise. */
+    input: RefObject<HTMLInputElement | null>;
+    /* For the root to scroll back to the top when the app sets the query. */
+    list: RefObject<HTMLDivElement | null>;
+    highlight(row: Element): void;
+    virtualScroll: RefObject<((index: number, reason: string) => void) | null>;
+}
+
+export const PaletteRefsContext = createContext<PaletteRefs | null>(null);
+
+export function useCommandPaletteVirtualScroll(): PaletteRefs['virtualScroll'] | null {
+    return useContext(PaletteRefsContext)?.virtualScroll ?? null;
+}

package/src/command-palette/index.parts.ts

@@ -14,3 +14,5 @@ export {
     CommandPalettePopup as Popup,
     CommandPaletteRoot as Root
 } from './parts.tsx';
+
+export { CommandPaletteVirtualList as VirtualList } from './virtual.tsx';

package/src/command-palette/parts.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode, type RefObject } from 'react';
+import { useContext, useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode } from 'react';
 import { flushSync } from 'react-dom';
 import clsx from 'clsx';
 import { Search } from 'lucide-react';
@@ -11,16 +11,7 @@ import { Icon } from '../Icon.tsx';
 import { Kbd } from '../Kbd.tsx';
 import { mergeRefs } from '../merge-refs.ts';
 import { KEY_SHORTCUTS } from '../shortcut.ts';
-
-interface PaletteRefs {
-    /* For the popup to put the focus in when it opens: a control before it would take it otherwise. */
-    input: RefObject<HTMLInputElement | null>;
-    /* For the root to scroll back to the top when the app sets the query. */
-    list: RefObject<HTMLDivElement | null>;
-    highlight(row: Element): void;
-}
-
-const PaletteRefsContext = createContext<PaletteRefs | null>(null);
+import { PaletteRefsContext } from './context.ts';
 
 const NO_ITEMS: readonly never[] = [];
 
@@ -58,11 +49,13 @@ export function CommandPaletteRoot<ItemValue>({
     value,
     onValueChange,
     items,
+    onItemHighlighted,
     children,
     ...props
 }: CommandPaletteRootProps<ItemValue>) {
     const inputRef = useRef<HTMLInputElement>(null);
     const listRef = useRef<HTMLDivElement>(null);
+    const virtualScroll = useRef<((index: number, reason: string) => void) | null>(null);
     const [focusHighlight, setFocusHighlight] = useState(false);
     /*
      * Base UI moves the highlight to the first row for a typed query only. For a query the app sets,
@@ -104,7 +97,7 @@ export function CommandPaletteRoot<ItemValue>({
 
     return (
         <DialogRoot open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} onOpenChangeComplete={onOpenChangeComplete}>
-            <PaletteRefsContext value={{ input: inputRef, list: listRef, highlight }}>
+            <PaletteRefsContext value={{ input: inputRef, list: listRef, highlight, virtualScroll }}>
                 {/* Its props take a flat list or groups; only its overloads split the two, which a generic caller cannot pick between. */}
                 <Autocomplete.Root<ItemValue>
                     {...props}
@@ -116,6 +109,12 @@ export function CommandPaletteRoot<ItemValue>({
                         onValueChange?.(next, details);
                     }}
                     items={(resetting ? NO_ITEMS : items) as readonly ItemValue[] | undefined}
+                    onItemHighlighted={(item, details) => {
+                        if (item !== undefined && virtualScroll.current !== null) {
+                            queueMicrotask(() => virtualScroll.current?.(details.index, details.reason));
+                        }
+                        onItemHighlighted?.(item, details);
+                    }}
                     inline
                     open
                     autoHighlight={autoHighlight}

package/src/command-palette/virtual.tsx

@@ -0,0 +1,147 @@
+import { Fragment, useLayoutEffect, useMemo, useRef, type ComponentProps, type ReactNode } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { CommandPaletteList } from './parts.tsx';
+import { useCommandPaletteVirtualScroll } from './context.ts';
+import { MENU_LABEL } from '../menu/parts.tsx';
+import { mergeRefs } from '../merge-refs.ts';
+
+export interface CommandPaletteVirtualItemProps {
+    index: number;
+    'aria-setsize': number;
+    'aria-posinset': number;
+}
+
+export type CommandPaletteVirtualListProps<ItemValue, Group extends { items: readonly ItemValue[] } = { items: readonly ItemValue[] }> = Omit<
+    ComponentProps<typeof CommandPaletteList>,
+    'children'
+> & {
+    children(item: ItemValue, props: CommandPaletteVirtualItemProps): ReactNode;
+    groupLabel?(group: Group): ReactNode;
+};
+
+interface VirtualPaletteRow<ItemValue> {
+    group: number;
+    index: number;
+    item?: ItemValue;
+}
+
+function virtualRowsOf<ItemValue, Group extends { items: readonly ItemValue[] }>(values: readonly (ItemValue | Group)[], labelled: boolean) {
+    const groups: (Group | null)[] = [];
+    const rows: VirtualPaletteRow<ItemValue>[] = [];
+    const itemRows: number[] = [];
+    let count = 0;
+    for (const value of values) {
+        const grouped = value !== null && typeof value === 'object' && 'items' in value && Array.isArray(value.items);
+        const group = grouped ? (value as Group) : null;
+        if (group !== null && group.items.length === 0) {
+            continue;
+        }
+        const groupIndex = groups.length;
+        groups.push(group);
+        if (group !== null && labelled) {
+            rows.push({ group: groupIndex, index: -1 });
+        }
+        for (const item of group === null ? [value as ItemValue] : group.items) {
+            itemRows.push(rows.length);
+            rows.push({ group: groupIndex, index: count++, item });
+        }
+    }
+    return { groups, rows, itemRows, count };
+}
+
+/* The root retains every value for keyboard navigation; only the visible rows need DOM elements. */
+export function CommandPaletteVirtualList<ItemValue, Group extends { items: readonly ItemValue[] } = { items: readonly ItemValue[] }>({
+    children,
+    groupLabel,
+    ref,
+    ...props
+}: CommandPaletteVirtualListProps<ItemValue, Group>) {
+    // The virtualizer keeps a mutable handle; every render reads its current window.
+    'use no memo';
+    const scroll = useCommandPaletteVirtualScroll();
+    const filtered = Autocomplete.useFilteredItems<ItemValue | Group>();
+    const scrollRef = useRef<HTMLDivElement | null>(null);
+    const labelled = groupLabel !== undefined;
+    const { groups, rows, itemRows, count } = useMemo(() => virtualRowsOf<ItemValue, Group>(filtered, labelled), [filtered, labelled]);
+    // oxlint-disable-next-line react/incompatible-library
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: (index) => (rows[index]!.index === -1 ? 28 : 32),
+        overscan: 8,
+        initialRect: { width: 576, height: 320 },
+        scrollPaddingStart: 6,
+        scrollPaddingEnd: 6
+    });
+    useLayoutEffect(() => {
+        if (scroll === null) {
+            return;
+        }
+        const highlight = (index: number, reason: string): void => {
+            const row = itemRows[index];
+            if (row !== undefined && reason !== 'pointer') {
+                virtualizer.scrollToIndex(row, { align: reason === 'none' ? 'start' : 'auto' });
+            }
+        };
+        scroll.current = highlight;
+        return () => {
+            if (scroll.current === highlight) {
+                scroll.current = null;
+            }
+        };
+    }, [scroll, virtualizer, itemRows]);
+    const visible = virtualizer.getVirtualItems();
+    const visibleGroups = new Map<number, typeof visible>();
+    for (const item of visible) {
+        const group = rows[item.index]!.group;
+        const current = visibleGroups.get(group);
+        if (current === undefined) {
+            visibleGroups.set(group, [item]);
+        } else {
+            current.push(item);
+        }
+    }
+    const renderRows = (items: typeof visible): ReactNode =>
+        items.map((item) => {
+            const row = rows[item.index]!;
+            const group = groups[row.group];
+            return (
+                <div
+                    key={item.key}
+                    role="presentation"
+                    data-index={item.index}
+                    ref={virtualizer.measureElement}
+                    className="absolute top-0 left-0 w-full"
+                    style={{ transform: `translateY(${item.start}px)` }}
+                >
+                    {row.index === -1 && group !== null && group !== undefined ? (
+                        <Autocomplete.GroupLabel className={MENU_LABEL}>{groupLabel?.(group)}</Autocomplete.GroupLabel>
+                    ) : (
+                        children(row.item as ItemValue, { index: row.index, 'aria-posinset': row.index + 1, 'aria-setsize': count })
+                    )}
+                </div>
+            );
+        });
+    return (
+        <CommandPaletteList {...props} ref={mergeRefs(ref, scrollRef)}>
+            <div role="presentation" className="relative" style={{ height: virtualizer.getTotalSize() }}>
+                {[...visibleGroups].map(([index, items]) => {
+                    const group = groups[index];
+                    if (group === null || group === undefined) {
+                        return <Fragment key={index}>{renderRows(items)}</Fragment>;
+                    }
+                    const labelVisible = items.some((item) => rows[item.index]!.index === -1);
+                    return (
+                        <Autocomplete.Group key={index} items={group.items}>
+                            {!labelVisible && groupLabel !== undefined && (
+                                <Autocomplete.GroupLabel className="sr-only">{groupLabel(group)}</Autocomplete.GroupLabel>
+                            )}
+                            {renderRows(items)}
+                        </Autocomplete.Group>
+                    );
+                })}
+            </div>
+        </CommandPaletteList>
+    );
+}

package/src/format/index.ts

@@ -17,7 +17,7 @@ export {
     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,

package/src/format/locale.ts

@@ -95,16 +95,17 @@ const subscribe = (onChange: () => void): (() => void) => source.subscribe(onCha
 export const useFormatLocale = (): string => useSyncExternalStore(subscribe, formatLocale, formatLocale);
 
 interface Cached<T> {
-    locale: string;
+    locale: string | undefined;
     formatter: T;
 }
 
-/*
- * 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.
- */
-const cacheFor = <O extends object, T>(store: WeakMap<O, Cached<T>>, options: O, locale: string, build: (locale: string, options: O) => T): T => {
+/* A module-level options object shares its formatter across rows; a changed locale replaces it. */
+const cacheFor = <O extends object, T>(
+    store: WeakMap<O, Cached<T>>,
+    options: O,
+    locale: string | undefined,
+    build: (locale: string | undefined, options: O) => T
+): T => {
     const hit = store.get(options);
     if (hit !== undefined && hit.locale === locale) {
         return hit.formatter;
@@ -118,6 +119,7 @@ const numbers = new WeakMap<Intl.NumberFormatOptions, Cached<Intl.NumberFormat>>
 const dates = new WeakMap<Intl.DateTimeFormatOptions, Cached<Intl.DateTimeFormat>>();
 const words = new WeakMap<Intl.DateTimeFormatOptions, Cached<Intl.DateTimeFormat>>();
 const relatives = new WeakMap<Intl.RelativeTimeFormatOptions, Cached<Intl.RelativeTimeFormat>>();
+const names = new WeakMap<Intl.CollatorOptions, Cached<Intl.Collator>>();
 
 export const numberFormatter = (options: Intl.NumberFormatOptions): Intl.NumberFormat =>
     cacheFor(numbers, options, formatLocale(), (locale, spec) => new Intl.NumberFormat(locale, spec));
@@ -134,6 +136,10 @@ export const wordFormatter = (options: Intl.DateTimeFormatOptions): Intl.DateTim
 export const relativeFormatter = (options: Intl.RelativeTimeFormatOptions): Intl.RelativeTimeFormat =>
     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: Intl.CollatorOptions): Intl.Collator =>
+    cacheFor(names, options, undefined, (locale, spec) => new Intl.Collator(locale, spec));
+
 const collators = new Map<string, Intl.Collator>();
 
 /*

package/src/index.ts

@@ -152,3 +152,5 @@ export {
     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';