@adecore/ui 0.24.1 → 0.25.0

package/dist/Button.d.ts

@@ -1,9 +1,11 @@
 import type { ComponentProps } from 'react';
 export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'danger-outline' | 'positive' | 'inverse';
 export type ButtonSize = 'xs' | 'sm' | 'md';
+export type ButtonShape = 'default' | 'pill';
 export interface ButtonProps extends ComponentProps<'button'> {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    shape?: ButtonShape;
     href?: string;
 }
-export declare function Button({ variant, size, className, href, type, ref, ...rest }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, size, shape, className, href, type, ref, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/Button.js

@@ -18,9 +18,14 @@ const SIZE = {
     sm: 'h-7 px-2.5',
     md: 'h-8 px-3'
 };
+/* A pill is one size of its own, for a control that sits in a round row, so it takes the place of `size`. */
+const SHAPE = {
+    default: 'rounded-md text-xs',
+    pill: 'h-9 rounded-full px-3.5 text-sm'
+};
 /* Every button with a word in it. A button that is only an icon is an `IconButton`, which is a square, not a label. */
-export function Button({ variant = 'ghost', size = 'md', className, href, type = 'button', ref, ...rest }) {
-    const classes = clsx('inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md text-xs font-medium disabled:opacity-50', VARIANT[variant], SIZE[size], className);
+export function Button({ variant = 'ghost', size = 'md', shape = 'default', className, href, type = 'button', ref, ...rest }) {
+    const classes = clsx('inline-flex shrink-0 items-center justify-center gap-1.5 font-medium disabled:opacity-50', SHAPE[shape], VARIANT[variant], shape === 'default' && SIZE[size], className);
     if (href) {
         return (_jsx("a", { ref: ref, className: classes, href: href, target: "_blank", rel: "noreferrer", ...rest }));
     }

package/dist/EmptyState.d.ts

@@ -5,12 +5,10 @@ export interface EmptyStateProps {
         size?: number;
     }>;
     busy?: boolean;
-    /** @deprecated Turns a Lucide icon; use `busy`, which draws a `Spinner` in its place. */
-    spin?: boolean;
     title?: ReactNode;
     children: ReactNode;
     action?: ReactNode;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function EmptyState({ icon, busy, spin, title, children, action, className, ref }: EmptyStateProps): import("react").JSX.Element;
+export declare function EmptyState({ icon, busy, title, children, action, className, ref }: EmptyStateProps): import("react").JSX.Element;

package/dist/EmptyState.js

@@ -6,6 +6,6 @@ import { Spinner } from './Spinner.js';
 // One size in a panel, a card and a dialog alike, so no caller picks its own.
 const ICON_SIZE = 20;
 /* What a list, a canvas or a thread shows before it holds anything. */
-export function EmptyState({ icon, busy = false, spin = false, title, children, action, className, ref }) {
-    return (_jsxs("div", { ref: ref, className: clsx('flex flex-col items-center justify-center gap-2 px-6 py-8 text-center', className), children: [(busy || icon) && (_jsx("span", { className: "text-text-faint", children: busy ? (_jsx(Spinner, { size: ICON_SIZE })) : isValidElement(icon) ? (cloneElement(icon, { size: ICON_SIZE })) : (icon && _jsx(Icon, { icon: icon, size: ICON_SIZE, className: spin ? 'animate-spin' : undefined })) })), title && _jsx("p", { className: "text-sm font-medium text-text", children: title }), _jsx("p", { className: "max-w-[280px] text-xs leading-snug text-text-muted", children: children }), action && _jsx("div", { className: "mt-2", children: action })] }));
+export function EmptyState({ icon, busy = false, title, children, action, className, ref }) {
+    return (_jsxs("div", { ref: ref, className: clsx('flex flex-col items-center justify-center gap-2 px-6 py-8 text-center', className), children: [(busy || icon) && (_jsx("span", { className: "text-text-faint", children: busy ? (_jsx(Spinner, { size: ICON_SIZE })) : isValidElement(icon) ? (cloneElement(icon, { size: ICON_SIZE })) : (icon && _jsx(Icon, { icon: icon, size: ICON_SIZE })) })), title && _jsx("p", { className: "text-sm font-medium text-text", children: title }), _jsx("p", { className: "max-w-[280px] text-xs leading-snug text-text-muted", children: children }), action && _jsx("div", { className: "mt-2", children: action })] }));
 }

package/dist/IconButton.d.ts

@@ -14,10 +14,8 @@ export interface IconButtonProps extends Omit<ComponentProps<'button'>, 'childre
     size?: IconButtonSize;
     active?: boolean;
     busy?: boolean;
-    /** @deprecated Turns the icon; use `busy`, which draws a `Spinner` in its place. */
-    spin?: boolean;
     iconClassName?: string;
     children?: ReactNode;
     render?: useRender.RenderProp;
 }
-export declare function IconButton({ icon, label, tooltip, kbd, tooltipSide, size, active, busy, spin, iconClassName, render, className, ref, children, ...props }: IconButtonProps): import("react").JSX.Element;
+export declare function IconButton({ icon, label, tooltip, kbd, tooltipSide, size, active, busy, iconClassName, render, className, ref, children, ...props }: IconButtonProps): import("react").JSX.Element;

package/dist/IconButton.js

@@ -6,7 +6,7 @@ import { Spinner } from './Spinner.js';
 import { Tooltip } from './Tooltip.js';
 import { ICON_BUTTON_CLASS, ICON_BUTTON_ICON_SIZE } from './icon-button-size.js';
 /* Every button that is an icon and no word. A square, and the one place the icon inside it is sized. */
-export function IconButton({ icon, label, tooltip, kbd, tooltipSide, size = 'md', active = false, busy = false, spin = false, iconClassName, render, className, ref, children, ...props }) {
+export function IconButton({ icon, label, tooltip, kbd, tooltipSide, size = 'md', active = false, busy = false, iconClassName, render, className, ref, children, ...props }) {
     const button = useRender({
         render: render ?? _jsx("button", { type: "button" }),
         ref,
@@ -15,7 +15,7 @@ export function IconButton({ icon, label, tooltip, kbd, tooltipSide, size = 'md'
             'data-active': active ? 'true' : undefined,
             ...props,
             className: clsx('icon-btn', ICON_BUTTON_CLASS[size], className),
-            children: (_jsxs(_Fragment, { children: [busy ? (_jsx(Spinner, { size: ICON_BUTTON_ICON_SIZE[size], className: iconClassName })) : (icon !== undefined && _jsx(Icon, { icon: icon, size: ICON_BUTTON_ICON_SIZE[size], className: clsx(spin && 'animate-spin', iconClassName) })), children] }))
+            children: (_jsxs(_Fragment, { children: [busy ? (_jsx(Spinner, { size: ICON_BUTTON_ICON_SIZE[size], className: iconClassName })) : (icon !== undefined && _jsx(Icon, { icon: icon, size: ICON_BUTTON_ICON_SIZE[size], className: iconClassName })), children] }))
         }
     });
     if (tooltip === false) {

package/dist/LazyBoundary.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+export interface LazyBoundaryProps {
+    readonly fallback?: ReactNode;
+    readonly children?: ReactNode;
+}
+export declare function LazyBoundary({ fallback, children }: LazyBoundaryProps): import("react").JSX.Element;

package/dist/LazyBoundary.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, useSyncExternalStore } from 'react';
+import { readLandings, subscribeLandings } from './lazy-landings.js';
+/*
+ * `Suspense` for what `lazyNamed` loads. React holds content that comes in as a retry back until
+ * 300 ms after its fallback showed; this boundary draws again as an ordinary update once a module
+ * lands, so a chunk that takes 20 ms shows after 20 ms.
+ */
+export function LazyBoundary({ fallback = null, children }) {
+    useSyncExternalStore(subscribeLandings, readLandings, readLandings);
+    return _jsx(Suspense, { fallback: fallback, children: children });
+}

package/dist/PanelEmpty.d.ts

@@ -4,8 +4,6 @@ export interface PanelEmptyProps {
     header?: ReactNode;
     icon?: LucideIcon;
     busy?: boolean;
-    /** @deprecated Turns the icon; use `busy`, which draws a `Spinner` in its place. */
-    spin?: boolean;
     action?: ReactNode;
     sunken?: boolean;
     fill?: 'grow' | 'full';
@@ -13,4 +11,4 @@ export interface PanelEmptyProps {
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function PanelEmpty({ header, icon, busy, spin, action, sunken, fill, children, className, ref }: PanelEmptyProps): import("react").JSX.Element;
+export declare function PanelEmpty({ header, icon, busy, action, sunken, fill, children, className, ref }: PanelEmptyProps): import("react").JSX.Element;

package/dist/PanelEmpty.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { EmptyState } from './EmptyState.js';
 /* What a panel or a card shows while it holds nothing: a sentence, one icon, at most one button. */
-export function PanelEmpty({ header, icon, busy = false, spin = false, action, sunken = false, fill = 'grow', children, className, ref }) {
-    return (_jsxs("div", { ref: ref, className: clsx('grid min-h-0 place-items-center', fill === 'full' ? 'h-full' : 'grow', sunken && 'bg-surface-sunken', className), children: [header, _jsx(EmptyState, { icon: icon, busy: busy, spin: spin, action: action, children: children })] }));
+export function PanelEmpty({ header, icon, busy = false, action, sunken = false, fill = 'grow', children, className, ref }) {
+    return (_jsxs("div", { ref: ref, className: clsx('grid min-h-0 place-items-center', fill === 'full' ? 'h-full' : 'grow', sunken && 'bg-surface-sunken', className), children: [header, _jsx(EmptyState, { icon: icon, busy: busy, action: action, children: children })] }));
 }

package/dist/file-tree/helpers.js

@@ -1,3 +1,4 @@
+import { nameOrder } from '../format/locale.js';
 // Expanded folders can reveal more flattened rows; cap custom-key cycles.
 const EXPANSION_PASSES = 32;
 export function directoryHandle(model, path) {
@@ -126,8 +127,7 @@ export function compareRows(left, right) {
         if (leftIsDirectory !== rightIsDirectory) {
             return leftIsDirectory ? -1 : 1;
         }
-        // Case is not a reason to split two names apart; the raw compare only breaks a tie.
-        return leftSegment.localeCompare(rightSegment, undefined, { numeric: true, sensitivity: 'base' }) || leftSegment.localeCompare(rightSegment);
+        return nameOrder(leftSegment, rightSegment);
     }
     // One path is the head of the other, so the shorter one is the directory the longer one sits in.
     return left.segments.length - right.segments.length;

package/dist/format/datetime.d.ts

@@ -1,11 +1,12 @@
 export declare const formatDateTime: (at: Date | number, options: Intl.DateTimeFormatOptions) => string;
-export declare const formatClock: (at: Date | number) => string;
+export declare const formatClock: (at: Date | number, timeZone?: string) => 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 formatDay: (at: Date | number, timeZone?: string) => string;
+export declare const formatDayWithYear: (at: Date | number, timeZone?: string) => string;
 export declare const formatWeekdayDay: (at: Date | number) => string;
-export declare const formatDayClock: (at: Date | number) => string;
+export declare const formatDayClock: (at: Date | number, timeZone?: string) => string;
+export declare const formatDayClockWithYear: (at: Date | number, timeZone?: string) => 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

@@ -26,21 +26,27 @@ 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 DAY_CLOCK_WITH_YEAR = { month: 'short', day: 'numeric', year: '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);
+/*
+ * `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.
+ */
+export const formatClock = (at, timeZone) => formatDateTime(at, timeZone === undefined ? CLOCK : { ...CLOCK, timeZone });
 /* 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);
+export const formatDay = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY : { ...DAY, timeZone });
 /* The same date with the year, for anything older than the one we are in. */
-export const formatDayWithYear = (at) => formatDateTime(at, DAY_WITH_YEAR);
+export const formatDayWithYear = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY_WITH_YEAR : { ...DAY_WITH_YEAR, timeZone });
 /* `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);
+export const formatDayClock = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY_CLOCK : { ...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, timeZone) => formatDateTime(at, timeZone === undefined ? DAY_CLOCK_WITH_YEAR : { ...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) => formatDateTime(at, NUMERIC_DATE);
 /* Whether two instants fall on the same day of the same year, in the zone of whoever is reading. */

package/dist/format/index.d.ts

@@ -1,6 +1,6 @@
-export { formatAge, formatClock, formatDateTime, formatDay, formatDayClock, formatDayWithYear, formatHour, formatMoment, formatNumericDate, formatWeekdayClock, formatWeekdayDay, isSameDay } from './datetime.ts';
+export { formatAge, formatClock, formatDateTime, formatDay, formatDayClock, formatDayClockWithYear, 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, formatFixed, formatMoney, formatNumber, formatNumeral, formatPercent, formatRounded, formatTokens, formatUsdSignificant } from './number.ts';
+export { formatLocale, labelCollator, 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, formatDayWithYear, formatHour, formatMoment, formatNumericDate, formatWeekdayClock, formatWeekdayDay, isSameDay } from './datetime.js';
+export { formatAge, formatClock, formatDateTime, formatDay, formatDayClock, formatDayClockWithYear, 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, formatFixed, formatMoney, formatNumber, formatNumeral, formatPercent, formatRounded, formatTokens, formatUsdSignificant } from './number.js';
+export { formatLocale, labelCollator, 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

@@ -15,3 +15,4 @@ export declare const dateFormatter: (options: Intl.DateTimeFormatOptions) => Int
 export declare const wordFormatter: (options: Intl.DateTimeFormatOptions) => Intl.DateTimeFormat;
 export declare const relativeFormatter: (options: Intl.RelativeTimeFormatOptions) => Intl.RelativeTimeFormat;
 export declare const labelCollator: () => Intl.Collator;
+export declare const nameOrder: (left: string, right: string) => number;

package/dist/format/locale.js

@@ -108,3 +108,12 @@ export const labelCollator = () => {
     collators.set(locale, collator);
     return collator;
 };
+let nameCollators = null;
+/*
+ * The order of names that are no words, such as files: the runtime's own locale, numbers by value and
+ * case only to break a tie. It is what `localeCompare` did, which built a collator on every call.
+ */
+export const nameOrder = (left, right) => {
+    nameCollators ??= { loose: new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }), exact: new Intl.Collator() };
+    return nameCollators.loose.compare(left, right) || nameCollators.exact.compare(left, right);
+};

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export type { PopoverPopupProps, PopupVariant, PreviewCardPopupProps } from './p
 export type { TabsCountProps, TabsListProps, TabsRootProps, TabsTabProps, TabsValue, TabsVariant } from './tabs/parts.tsx';
 export { AccentSwatches, type AccentSwatchesProps } from './AccentSwatches.tsx';
 export { Banner, type BannerProps, type BannerTone } from './Banner.tsx';
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button.tsx';
+export { Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant } from './Button.tsx';
 export { ButtonGroup, type ButtonGroupProps } from './ButtonGroup.tsx';
 export { Checkbox, type CheckboxProps } from './Checkbox.tsx';
 export { ChoiceCards, type Choice, type ChoiceCardsProps } from './ChoiceCards.tsx';
@@ -56,7 +56,7 @@ export { Switch, type SwitchProps } from './Switch.tsx';
 export { TextMenu, type TextMenuProps } from './TextMenu.tsx';
 export { Tile, type TileProps } from './Tile.tsx';
 export { Toasts, type ToastsProps } from './Toasts.tsx';
-export { Tooltip, TooltipProvider, type TooltipProps, type TooltipSide } from './Tooltip.tsx';
+export { Tooltip, type TooltipProps, type TooltipSide } from './Tooltip.tsx';
 export { UIProvider, type UIProviderProps } from './UIProvider.tsx';
 export { Waveform, type WaveformProps } from './Waveform.tsx';
 export { Wipe, type WipeProps } from './Wipe.tsx';
@@ -67,19 +67,20 @@ export type { ResetKeys } from './error-boundary.ts';
 export { FILE_TREE_ICONS } from './file-icon.ts';
 export { cameThroughPortal, isInFloatingLayer } from './floating.ts';
 export { LoadedComponent, lazyDialog, lazyNamed, onLazyOpenError } from './lazy.tsx';
-export { UI_NAMESPACE, UI_RESOURCES, addUiResources } from './locales.ts';
-export { startInputModality } from './modality.ts';
+export type { LazyComponent } from './lazy.tsx';
+export { LazyBoundary } from './LazyBoundary.tsx';
+export type { LazyBoundaryProps } from './LazyBoundary.tsx';
+export { UI_NAMESPACE, UI_RESOURCES } from './locales.ts';
 export { isApplePlatform } from './platform.ts';
-export { Prefetcher, prefetcher, type Loader, type WhenIdle } from './prefetch.ts';
+export { prefetcher, type Loader, type WhenIdle } from './prefetch.ts';
 export { selectAllWithin, selectionWithin } from './selection.ts';
 export { EDIT_SHORTCUTS, KEY_SHORTCUTS, formatShortcut, isModHeld, matchesShortcut, shortcut, shortcutParts, type KeyLike, type Shortcut } from './shortcut.ts';
-export { SUCCESS_MS, UNDO_MS, createToastStore, elapsedOf, type Toast, type ToastAction, type ToastDeadline, type ToastInput, type ToastKind, type ToastPatch, type ToastStore, type ToastStoreHook } from './toast-store.ts';
+export { UNDO_MS, createToastStore, type Toast, type ToastAction, type ToastDeadline, type ToastInput, type ToastKind, type ToastPatch, type ToastStore, type ToastStoreHook } from './toast-store.ts';
 export { useAsyncAction, type AsyncAction } from './useAsyncAction.ts';
 export { clampColumnSize, useColumnResize, type ColumnEdge, type ColumnResize, type ColumnResizeOptions } from './useColumnResize.ts';
 export { useContentSize, type ContentSize } from './useContentSize.ts';
 export { useMeasuredWidth } from './useMeasuredWidth.ts';
 export { useNow, useTickingText } from './useNow.ts';
-export { ZOOM_PRESETS } from './zoom.ts';
 export { useFileTree, type FileTreeOptions } from './file-tree/use-file-tree.ts';
 export type { FileTreeRootProps } from './file-tree/parts.tsx';
 export type { FileTree as FileTreeModel, FileTreeVisibleRow, FileTreeDragAndDropConfig, FileTreeDropContext, FileTreeDropResult } from '@pierre/trees';
@@ -90,6 +91,6 @@ export type { WorkspaceLayout } from './workspace/context.ts';
 export { DocumentTab, TabStrip, type DocumentTabProps, type TabStripProps, type TabStripItem } from './workspace/TabStrip.tsx';
 export { SplitView, type SplitViewProps, type SplitViewInfo, type SplitViewBounds, type SplitDropTarget, type SplitDrag } from './workspace/SplitView.tsx';
 export { DropPreview, type DropPreviewProps } from './workspace/DropPreview.tsx';
-export { dropPreviewPath, rectDropPreview, sameDropPreview, tabDropPreview, type DropPreviewShape, type TabDrop } from './workspace/preview.ts';
-export { createSplitLayout, normalizeSplitLayout, updateSplitLayout, splitPanes, type SplitAxis, type SplitSide, type SplitPane, type SplitBranch, type SplitNode, type SplitLayout, type SplitCommand } from './workspace/model.ts';
+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';

package/dist/index.js

@@ -55,7 +55,7 @@ export { Switch } from './Switch.js';
 export { TextMenu } from './TextMenu.js';
 export { Tile } from './Tile.js';
 export { Toasts } from './Toasts.js';
-export { Tooltip, TooltipProvider } from './Tooltip.js';
+export { Tooltip } from './Tooltip.js';
 export { UIProvider } from './UIProvider.js';
 export { Waveform } from './Waveform.js';
 export { Wipe } from './Wipe.js';
@@ -65,24 +65,23 @@ export { messageOf } from './error-message.js';
 export { FILE_TREE_ICONS } from './file-icon.js';
 export { cameThroughPortal, isInFloatingLayer } from './floating.js';
 export { LoadedComponent, lazyDialog, lazyNamed, onLazyOpenError } from './lazy.js';
-export { UI_NAMESPACE, UI_RESOURCES, addUiResources } from './locales.js';
-export { startInputModality } from './modality.js';
+export { LazyBoundary } from './LazyBoundary.js';
+export { UI_NAMESPACE, UI_RESOURCES } from './locales.js';
 export { isApplePlatform } from './platform.js';
-export { Prefetcher, prefetcher } from './prefetch.js';
+export { prefetcher } from './prefetch.js';
 export { selectAllWithin, selectionWithin } from './selection.js';
 export { EDIT_SHORTCUTS, KEY_SHORTCUTS, formatShortcut, isModHeld, matchesShortcut, shortcut, shortcutParts } from './shortcut.js';
-export { SUCCESS_MS, UNDO_MS, createToastStore, elapsedOf } from './toast-store.js';
+export { UNDO_MS, createToastStore } from './toast-store.js';
 export { useAsyncAction } from './useAsyncAction.js';
 export { clampColumnSize, useColumnResize } from './useColumnResize.js';
 export { useContentSize } from './useContentSize.js';
 export { useMeasuredWidth } from './useMeasuredWidth.js';
 export { useNow, useTickingText } from './useNow.js';
-export { ZOOM_PRESETS } from './zoom.js';
 export { useFileTree } from './file-tree/use-file-tree.js';
 export { Workspace } from './workspace/Workspace.js';
 export { DocumentTab, TabStrip } from './workspace/TabStrip.js';
 export { SplitView } from './workspace/SplitView.js';
 export { DropPreview } from './workspace/DropPreview.js';
-export { dropPreviewPath, rectDropPreview, sameDropPreview, tabDropPreview } from './workspace/preview.js';
-export { createSplitLayout, normalizeSplitLayout, updateSplitLayout, splitPanes } from './workspace/model.js';
+export { rectDropPreview, sameDropPreview, tabDropPreview } from './workspace/preview.js';
+export { createSplitLayout, updateSplitLayout, splitPanes } from './workspace/model.js';
 export { tabGapAt } from './workspace/geometry.js';

package/dist/lazy-landings.d.ts

@@ -0,0 +1,3 @@
+export declare function noteLanding(): void;
+export declare function subscribeLandings(listener: () => void): () => void;
+export declare function readLandings(): number;

package/dist/lazy-landings.js

@@ -0,0 +1,18 @@
+let landings = 0;
+const listeners = new Set();
+/* Called once per module, when a `LoadedComponent` first has it. */
+export function noteLanding() {
+    landings += 1;
+    for (const listener of listeners) {
+        listener();
+    }
+}
+export function subscribeLandings(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+export function readLandings() {
+    return landings;
+}

package/dist/lazy.d.ts

@@ -8,5 +8,8 @@ export declare class LoadedComponent<Component> {
     subscribe(listener: () => void): () => void;
 }
 export declare function onLazyOpenError(listener: (error: unknown) => void): () => void;
-export declare function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name extends keyof Module>(load: () => Promise<Module>, name: Name): ComponentType<ComponentProps<Module[Name]>>;
+export type LazyComponent<Props> = ComponentType<Props> & {
+    readonly preload: () => Promise<void>;
+};
+export declare function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name extends keyof Module>(load: () => Promise<Module>, name: Name): LazyComponent<ComponentProps<Module[Name]>>;
 export declare function lazyDialog<Module extends Record<Name, ComponentType>, Name extends keyof Module, State>(load: () => Promise<Module>, name: Name, useStore: (select: (state: State) => boolean) => boolean, isOpen: (state: State) => boolean): ComponentType;

package/dist/lazy.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense, lazy, useState, useSyncExternalStore } from 'react';
+import { noteLanding } from './lazy-landings.js';
 import { prefetcher } from './prefetch.js';
 /*
  * A module's component, loaded once and kept. `React.lazy` suspends for a tick even on a module the
@@ -20,6 +21,7 @@ export class LoadedComponent {
             for (const listener of this.listeners) {
                 listener();
             }
+            noteLanding();
         }
         return component;
     }
@@ -68,7 +70,11 @@ export function lazyNamed(load, name) {
         const Component = loaded.current ?? Lazy;
         return _jsx(Component, { ...props });
     };
-    return LazyNamed;
+    return Object.assign(LazyNamed, {
+        preload: async () => {
+            await loaded.load();
+        }
+    });
 }
 /* Stays true after the first opening, so every close after it still has something mounted to animate. */
 function useOpenedOnce(open) {

package/dist/settings/SettingsDialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Tabs } from '@base-ui/react/tabs';
@@ -9,6 +9,7 @@ import { DialogDescription, DialogPopup, DialogRoot, DialogTitle } from '../dial
 import { ErrorBoundary } from '../ErrorBoundary.js';
 import { Icon } from '../Icon.js';
 import { IconButton } from '../IconButton.js';
+import { LazyBoundary } from '../LazyBoundary.js';
 import { Input } from '../Input.js';
 import { Select } from '../Select.js';
 import { SettingsTargetContext } from './target.js';
@@ -91,6 +92,6 @@ export function SettingsDialog({ open, onOpenChange, section, onNavigate, groups
                                                 const top = event.currentTarget.scrollTop;
                                                 event.currentTarget.toggleAttribute('data-fade-start', top > 0);
                                                 barFill.current?.style.setProperty('opacity', String(Math.min(top / BAR_FILL_DISTANCE, 1)));
-                                            }, children: _jsx(ErrorBoundary, { label: t('settings.failed'), className: "min-h-0 grow", children: _jsxs(Suspense, { fallback: null, children: [Hero && (_jsx("div", { className: "-mx-8 shrink-0 max-[960px]:-mx-4", children: _jsx(Hero, {}) })), _jsx(Pane, {})] }) }) }, entry.id));
+                                            }, children: _jsx(ErrorBoundary, { label: t('settings.failed'), className: "min-h-0 grow", children: _jsxs(LazyBoundary, { children: [Hero && (_jsx("div", { className: "-mx-8 shrink-0 max-[960px]:-mx-4", children: _jsx(Hero, {}) })), _jsx(Pane, {})] }) }) }, entry.id));
                                     }) })] })] }), _jsx(DialogDescription, { className: "sr-only", children: meta.description })] }) }));
 }

package/dist/workspace/model.d.ts

@@ -77,7 +77,5 @@ export type SplitCommand = {
 export declare function createSplitLayout(views?: string[], paneId?: string): SplitLayout;
 export declare function splitPanes(node: SplitNode): SplitPane[];
 export declare function findSplitNode(node: SplitNode, id: string): SplitNode | undefined;
-/** Repairs persisted data at the application boundary; view payloads never enter the layout. */
-export declare function normalizeSplitLayout(value: unknown): SplitLayout;
 /** Invalid or stale commands are no-ops. IDs for new nodes come from the caller. */
 export declare function updateSplitLayout(layout: SplitLayout, command: SplitCommand): SplitLayout;

package/dist/workspace/model.js

@@ -40,75 +40,6 @@ function flattenSplits(node) {
     }
     return { ...node, children, sizes: shares(sizes, children.length) };
 }
-/** Repairs persisted data at the application boundary; view payloads never enter the layout. */
-export function normalizeSplitLayout(value) {
-    const ids = new Set();
-    const views = new Set();
-    const seen = new Set();
-    let serial = 0;
-    const nextId = (candidate) => {
-        let id = typeof candidate === 'string' && candidate.length > 0 ? candidate : `pane-${serial++}`;
-        while (ids.has(id)) {
-            id = `pane-${serial++}`;
-        }
-        ids.add(id);
-        return id;
-    };
-    const read = (input, depth) => {
-        if (input === null || typeof input !== 'object' || seen.has(input) || depth > 64) {
-            return null;
-        }
-        seen.add(input);
-        const row = input;
-        if (row.type === 'pane') {
-            const items = Array.isArray(row.views)
-                ? row.views.filter((view) => {
-                    if (typeof view !== 'string' || view.length === 0 || views.has(view)) {
-                        return false;
-                    }
-                    views.add(view);
-                    return true;
-                })
-                : [];
-            return {
-                type: 'pane',
-                id: nextId(row.id),
-                views: items,
-                active: typeof row.active === 'string' && items.includes(row.active) ? row.active : (items[0] ?? null)
-            };
-        }
-        if (row.type !== 'split' || !Array.isArray(row.children)) {
-            return null;
-        }
-        const children = [];
-        const sizes = [];
-        row.children.forEach((child, i) => {
-            const result = read(child, depth + 1);
-            if (result) {
-                children.push(result);
-                sizes.push(Array.isArray(row.sizes) ? Number(row.sizes[i]) : 1);
-            }
-        });
-        if (children.length < 2) {
-            return children[0] ?? null;
-        }
-        return {
-            type: 'split',
-            id: nextId(row.id),
-            axis: row.axis === 'vertical' ? 'vertical' : 'horizontal',
-            children,
-            sizes: shares(sizes, children.length)
-        };
-    };
-    const input = value !== null && typeof value === 'object' ? value : {};
-    const root = flattenSplits(read(input.root, 0) ?? createSplitLayout().root);
-    const panes = splitPanes(root);
-    return {
-        root,
-        focused: panes.find((pane) => pane.id === input.focused)?.id ?? panes[0].id,
-        maximized: panes.find((pane) => pane.id === input.maximized)?.id ?? null
-    };
-}
 function replace(node, id, transform) {
     if (node.id === id) {
         return transform(node);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.24.1",
+  "version": "0.25.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",

package/src/Button.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'danger-outline' | 'positive' | 'inverse';
 export type ButtonSize = 'xs' | 'sm' | 'md';
+export type ButtonShape = 'default' | 'pill';
 
 const VARIANT: Record<ButtonVariant, string> = {
     // A filled button darkens under the pointer. Its color is the meaning, so no token of its own for hover.
@@ -24,19 +25,28 @@ const SIZE: Record<ButtonSize, string> = {
     md: 'h-8 px-3'
 };
 
+/* A pill is one size of its own, for a control that sits in a round row, so it takes the place of `size`. */
+const SHAPE: Record<ButtonShape, string> = {
+    default: 'rounded-md text-xs',
+    pill: 'h-9 rounded-full px-3.5 text-sm'
+};
+
 export interface ButtonProps extends ComponentProps<'button'> {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    /* `pill` is 36 pixels tall and fully rounded, and ignores `size`. */
+    shape?: ButtonShape;
     /* Makes it a link that looks like a button, a real anchor, so it opens the way links open. */
     href?: string;
 }
 
 /* Every button with a word in it. A button that is only an icon is an `IconButton`, which is a square, not a label. */
-export function Button({ variant = 'ghost', size = 'md', className, href, type = 'button', ref, ...rest }: ButtonProps) {
+export function Button({ variant = 'ghost', size = 'md', shape = 'default', className, href, type = 'button', ref, ...rest }: ButtonProps) {
     const classes = clsx(
-        'inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md text-xs font-medium disabled:opacity-50',
+        'inline-flex shrink-0 items-center justify-center gap-1.5 font-medium disabled:opacity-50',
+        SHAPE[shape],
         VARIANT[variant],
-        SIZE[size],
+        shape === 'default' && SIZE[size],
         className
     );
     if (href) {

package/src/EmptyState.tsx

@@ -12,8 +12,6 @@ export interface EmptyStateProps {
     icon?: LucideIcon | ReactElement<{ size?: number }>;
     /* A `Spinner` in place of the icon, for a state that is still loading. */
     busy?: boolean;
-    /** @deprecated Turns a Lucide icon; use `busy`, which draws a `Spinner` in its place. */
-    spin?: boolean;
     /* A heading above the sentence, for a state that is an outcome rather than a list with nothing in it. */
     title?: ReactNode;
     /* One sentence. What is missing, and what puts something there. */
@@ -25,7 +23,7 @@ export interface EmptyStateProps {
 }
 
 /* What a list, a canvas or a thread shows before it holds anything. */
-export function EmptyState({ icon, busy = false, spin = false, title, children, action, className, ref }: EmptyStateProps) {
+export function EmptyState({ icon, busy = false, title, children, action, className, ref }: EmptyStateProps) {
     return (
         <div ref={ref} className={clsx('flex flex-col items-center justify-center gap-2 px-6 py-8 text-center', className)}>
             {(busy || icon) && (
@@ -35,7 +33,7 @@ export function EmptyState({ icon, busy = false, spin = false, title, children,
                     ) : isValidElement(icon) ? (
                         cloneElement(icon, { size: ICON_SIZE })
                     ) : (
-                        icon && <Icon icon={icon} size={ICON_SIZE} className={spin ? 'animate-spin' : undefined} />
+                        icon && <Icon icon={icon} size={ICON_SIZE} />
                     )}
                 </span>
             )}

package/src/IconButton.tsx

@@ -24,8 +24,6 @@ export interface IconButtonProps extends Omit<ComponentProps<'button'>, 'childre
     active?: boolean;
     /* A `Spinner` in place of the icon, for a step that is running. */
     busy?: boolean;
-    /** @deprecated Turns the icon; use `busy`, which draws a `Spinner` in its place. */
-    spin?: boolean;
     /* Classes for the icon rather than the button: a tone of its own, a turn, a fill. The size stays the button's. */
     iconClassName?: string;
     /* Drawn after the icon: a count, or a word beside it together with `w-auto`. */
@@ -44,7 +42,6 @@ export function IconButton({
     size = 'md',
     active = false,
     busy = false,
-    spin = false,
     iconClassName,
     render,
     className,
@@ -65,7 +62,7 @@ export function IconButton({
                     {busy ? (
                         <Spinner size={ICON_BUTTON_ICON_SIZE[size]} className={iconClassName} />
                     ) : (
-                        icon !== undefined && <Icon icon={icon} size={ICON_BUTTON_ICON_SIZE[size]} className={clsx(spin && 'animate-spin', iconClassName)} />
+                        icon !== undefined && <Icon icon={icon} size={ICON_BUTTON_ICON_SIZE[size]} className={iconClassName} />
                     )}
                     {children}
                 </>

package/src/LazyBoundary.tsx

@@ -0,0 +1,17 @@
+import { Suspense, useSyncExternalStore, type ReactNode } from 'react';
+import { readLandings, subscribeLandings } from './lazy-landings.ts';
+
+export interface LazyBoundaryProps {
+    readonly fallback?: ReactNode;
+    readonly children?: ReactNode;
+}
+
+/*
+ * `Suspense` for what `lazyNamed` loads. React holds content that comes in as a retry back until
+ * 300 ms after its fallback showed; this boundary draws again as an ordinary update once a module
+ * lands, so a chunk that takes 20 ms shows after 20 ms.
+ */
+export function LazyBoundary({ fallback = null, children }: LazyBoundaryProps) {
+    useSyncExternalStore(subscribeLandings, readLandings, readLandings);
+    return <Suspense fallback={fallback}>{children}</Suspense>;
+}

package/src/PanelEmpty.tsx

@@ -9,8 +9,6 @@ export interface PanelEmptyProps {
     icon?: LucideIcon;
     /* A `Spinner` in place of the icon, for a panel that is still loading. */
     busy?: boolean;
-    /** @deprecated Turns the icon; use `busy`, which draws a `Spinner` in its place. */
-    spin?: boolean;
     action?: ReactNode;
     /* The sunken ground, for a box that has none behind it yet (a card on a canvas) rather than a panel that does. */
     sunken?: boolean;
@@ -25,11 +23,11 @@ export interface PanelEmptyProps {
 }
 
 /* What a panel or a card shows while it holds nothing: a sentence, one icon, at most one button. */
-export function PanelEmpty({ header, icon, busy = false, spin = false, action, sunken = false, fill = 'grow', children, className, ref }: PanelEmptyProps) {
+export function PanelEmpty({ header, icon, busy = false, action, sunken = false, fill = 'grow', children, className, ref }: PanelEmptyProps) {
     return (
         <div ref={ref} className={clsx('grid min-h-0 place-items-center', fill === 'full' ? 'h-full' : 'grow', sunken && 'bg-surface-sunken', className)}>
             {header}
-            <EmptyState icon={icon} busy={busy} spin={spin} action={action}>
+            <EmptyState icon={icon} busy={busy} action={action}>
                 {children}
             </EmptyState>
         </div>

package/src/file-tree/helpers.ts

@@ -1,4 +1,5 @@
 import type { FileTree, FileTreeDirectoryHandle, FileTreeVisibleRow } from '@pierre/trees';
+import { nameOrder } from '../format/locale.ts';
 
 // Expanded folders can reveal more flattened rows; cap custom-key cycles.
 const EXPANSION_PASSES = 32;
@@ -152,8 +153,7 @@ export function compareRows(left: SortRow, right: SortRow): number {
         if (leftIsDirectory !== rightIsDirectory) {
             return leftIsDirectory ? -1 : 1;
         }
-        // Case is not a reason to split two names apart; the raw compare only breaks a tie.
-        return leftSegment.localeCompare(rightSegment, undefined, { numeric: true, sensitivity: 'base' }) || leftSegment.localeCompare(rightSegment);
+        return nameOrder(leftSegment, rightSegment);
     }
     // One path is the head of the other, so the shorter one is the directory the longer one sits in.
     return left.segments.length - right.segments.length;

package/src/format/datetime.ts

@@ -30,10 +30,14 @@ const DAY: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric' };
 const DAY_WITH_YEAR: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' };
 const WEEKDAY_DAY: Intl.DateTimeFormatOptions = { weekday: 'short', month: 'short', day: 'numeric' };
 const DAY_CLOCK: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
+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' };
 
-/* `08:05`, or `08:05 AM` in a region that counts to twelve. */
-export const formatClock = (at: Date | number): string => formatDateTime(at, CLOCK);
+/*
+ * `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.
+ */
+export const formatClock = (at: Date | number, timeZone?: string): string => formatDateTime(at, timeZone === undefined ? CLOCK : { ...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);
@@ -42,16 +46,22 @@ export const formatWeekdayClock = (at: Date | number): string => formatDateTime(
 export const formatHour = (at: Date | number): string => formatDateTime(at, HOUR);
 
 /* `19 Sep`, the short date a row falls back to once "days ago" stops meaning anything. */
-export const formatDay = (at: Date | number): string => formatDateTime(at, DAY);
+export const formatDay = (at: Date | number, timeZone?: string): string => formatDateTime(at, timeZone === undefined ? DAY : { ...DAY, timeZone });
 
 /* The same date with the year, for anything older than the one we are in. */
-export const formatDayWithYear = (at: Date | number): string => formatDateTime(at, DAY_WITH_YEAR);
+export const formatDayWithYear = (at: Date | number, timeZone?: string): string =>
+    formatDateTime(at, timeZone === undefined ? DAY_WITH_YEAR : { ...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): string => formatDateTime(at, DAY_CLOCK);
+export const formatDayClock = (at: Date | number, timeZone?: string): string =>
+    formatDateTime(at, timeZone === undefined ? DAY_CLOCK : { ...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 });
 
 /* 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);

package/src/format/index.ts

@@ -6,6 +6,7 @@ export {
     formatDateTime,
     formatDay,
     formatDayClock,
+    formatDayClockWithYear,
     formatDayWithYear,
     formatHour,
     formatMoment,
@@ -15,11 +16,10 @@ export {
     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 { formatLocale, labelCollator, setFormatSource, systemLocale, useFormatLocale, type FormatSource } from './locale.ts';
 export {
     formatBytes,
     formatDecimal,
-    formatFixed,
     formatMoney,
     formatNumber,
     formatNumeral,

package/src/format/locale.ts

@@ -151,3 +151,14 @@ export const labelCollator = (): Intl.Collator => {
     collators.set(locale, collator);
     return collator;
 };
+
+let nameCollators: { loose: Intl.Collator; exact: Intl.Collator } | null = null;
+
+/*
+ * The order of names that are no words, such as files: the runtime's own locale, numbers by value and
+ * case only to break a tie. It is what `localeCompare` did, which built a collator on every call.
+ */
+export const nameOrder = (left: string, right: string): number => {
+    nameCollators ??= { loose: new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }), exact: new Intl.Collator() };
+    return nameCollators.loose.compare(left, right) || nameCollators.exact.compare(left, right);
+};

package/src/index.ts

@@ -29,7 +29,7 @@ export type { TabsCountProps, TabsListProps, TabsRootProps, TabsTabProps, TabsVa
 
 export { AccentSwatches, type AccentSwatchesProps } from './AccentSwatches.tsx';
 export { Banner, type BannerProps, type BannerTone } from './Banner.tsx';
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button.tsx';
+export { Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant } from './Button.tsx';
 export { ButtonGroup, type ButtonGroupProps } from './ButtonGroup.tsx';
 export { Checkbox, type CheckboxProps } from './Checkbox.tsx';
 export { ChoiceCards, type Choice, type ChoiceCardsProps } from './ChoiceCards.tsx';
@@ -71,7 +71,7 @@ export { Switch, type SwitchProps } from './Switch.tsx';
 export { TextMenu, type TextMenuProps } from './TextMenu.tsx';
 export { Tile, type TileProps } from './Tile.tsx';
 export { Toasts, type ToastsProps } from './Toasts.tsx';
-export { Tooltip, TooltipProvider, type TooltipProps, type TooltipSide } from './Tooltip.tsx';
+export { Tooltip, type TooltipProps, type TooltipSide } from './Tooltip.tsx';
 export { UIProvider, type UIProviderProps } from './UIProvider.tsx';
 export { Waveform, type WaveformProps } from './Waveform.tsx';
 export { Wipe, type WipeProps } from './Wipe.tsx';
@@ -83,17 +83,17 @@ export type { ResetKeys } from './error-boundary.ts';
 export { FILE_TREE_ICONS } from './file-icon.ts';
 export { cameThroughPortal, isInFloatingLayer } from './floating.ts';
 export { LoadedComponent, lazyDialog, lazyNamed, onLazyOpenError } from './lazy.tsx';
-export { UI_NAMESPACE, UI_RESOURCES, addUiResources } from './locales.ts';
-export { startInputModality } from './modality.ts';
+export type { LazyComponent } from './lazy.tsx';
+export { LazyBoundary } from './LazyBoundary.tsx';
+export type { LazyBoundaryProps } from './LazyBoundary.tsx';
+export { UI_NAMESPACE, UI_RESOURCES } from './locales.ts';
 export { isApplePlatform } from './platform.ts';
-export { Prefetcher, prefetcher, type Loader, type WhenIdle } from './prefetch.ts';
+export { prefetcher, type Loader, type WhenIdle } from './prefetch.ts';
 export { selectAllWithin, selectionWithin } from './selection.ts';
 export { EDIT_SHORTCUTS, KEY_SHORTCUTS, formatShortcut, isModHeld, matchesShortcut, shortcut, shortcutParts, type KeyLike, type Shortcut } from './shortcut.ts';
 export {
-    SUCCESS_MS,
     UNDO_MS,
     createToastStore,
-    elapsedOf,
     type Toast,
     type ToastAction,
     type ToastDeadline,
@@ -108,7 +108,6 @@ export { clampColumnSize, useColumnResize, type ColumnEdge, type ColumnResize, t
 export { useContentSize, type ContentSize } from './useContentSize.ts';
 export { useMeasuredWidth } from './useMeasuredWidth.ts';
 export { useNow, useTickingText } from './useNow.ts';
-export { ZOOM_PRESETS } from './zoom.ts';
 
 export { useFileTree, type FileTreeOptions } from './file-tree/use-file-tree.ts';
 export type { FileTreeRootProps } from './file-tree/parts.tsx';
@@ -130,10 +129,9 @@ export type { WorkspaceLayout } from './workspace/context.ts';
 export { DocumentTab, TabStrip, type DocumentTabProps, type TabStripProps, type TabStripItem } from './workspace/TabStrip.tsx';
 export { SplitView, type SplitViewProps, type SplitViewInfo, type SplitViewBounds, type SplitDropTarget, type SplitDrag } from './workspace/SplitView.tsx';
 export { DropPreview, type DropPreviewProps } from './workspace/DropPreview.tsx';
-export { dropPreviewPath, rectDropPreview, sameDropPreview, tabDropPreview, type DropPreviewShape, type TabDrop } from './workspace/preview.ts';
+export { rectDropPreview, sameDropPreview, tabDropPreview, type DropPreviewShape, type TabDrop } from './workspace/preview.ts';
 export {
     createSplitLayout,
-    normalizeSplitLayout,
     updateSplitLayout,
     splitPanes,
     type SplitAxis,

package/src/lazy-landings.ts

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

package/src/lazy.tsx

@@ -1,4 +1,5 @@
 import { Suspense, lazy, useState, useSyncExternalStore, type ComponentProps, type ComponentType } from 'react';
+import { noteLanding } from './lazy-landings.ts';
 import { prefetcher } from './prefetch.ts';
 
 /*
@@ -22,6 +23,7 @@ export class LoadedComponent<Component> {
             for (const listener of this.listeners) {
                 listener();
             }
+            noteLanding();
         }
         return component;
     }
@@ -60,6 +62,9 @@ async function open<Component>(loaded: LoadedComponent<Component>): Promise<{ de
     }
 }
 
+/* A lazy component, with `preload` to have its module before the first render, so that render never suspends. */
+export type LazyComponent<Props> = ComponentType<Props> & { readonly preload: () => Promise<void> };
+
 /*
  * `React.lazy` for a module that exports its component by name, `default` included. Every module
  * loaded through here, or through `lazyDialog`, registers with `prefetcher`, which loads it ahead of
@@ -68,7 +73,7 @@ async function open<Component>(loaded: LoadedComponent<Component>): Promise<{ de
 export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name extends keyof Module>(
     load: () => Promise<Module>,
     name: Name
-): ComponentType<ComponentProps<Module[Name]>> {
+): LazyComponent<ComponentProps<Module[Name]>> {
     const loaded = new LoadedComponent(async () => (await load())[name]);
     prefetcher.register(() => loaded.load());
     const Lazy = lazy(() => open(loaded));
@@ -77,7 +82,11 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name
         const Component: ComponentType<any> = loaded.current ?? Lazy;
         return <Component {...props} />;
     };
-    return LazyNamed;
+    return Object.assign(LazyNamed, {
+        preload: async () => {
+            await loaded.load();
+        }
+    });
 }
 
 /* Stays true after the first opening, so every close after it still has something mounted to animate. */

package/src/settings/SettingsDialog.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode, type Ref } from 'react';
+import { useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Tabs } from '@base-ui/react/tabs';
@@ -8,6 +8,7 @@ import { DialogDescription, DialogPopup, DialogRoot, DialogTitle } from '../dial
 import { ErrorBoundary } from '../ErrorBoundary.tsx';
 import { Icon } from '../Icon.tsx';
 import { IconButton } from '../IconButton.tsx';
+import { LazyBoundary } from '../LazyBoundary.tsx';
 import { Input } from '../Input.tsx';
 import { Select } from '../Select.tsx';
 import { SettingsTargetContext } from './target.ts';
@@ -18,7 +19,7 @@ export interface SettingsSectionEntry {
     label: string;
     /* One line under the pane title that says what the pane is about. */
     description: string;
-    /* Rendered in a Suspense, so a lazy component loads when its section is opened. */
+    /* Rendered in a `LazyBoundary`, so a lazy component loads when its section is opened. */
     pane: ComponentType;
     /* A list beside a detail that scrolls on its own (`MasterDetail`), instead of one padded column. */
     split?: boolean;
@@ -320,14 +321,14 @@ export function SettingsDialog({
                                         }}
                                     >
                                         <ErrorBoundary label={t('settings.failed')} className="min-h-0 grow">
-                                            <Suspense fallback={null}>
+                                            <LazyBoundary>
                                                 {Hero && (
                                                     <div className="-mx-8 shrink-0 max-[960px]:-mx-4">
                                                         <Hero />
                                                     </div>
                                                 )}
                                                 <Pane />
-                                            </Suspense>
+                                            </LazyBoundary>
                                         </ErrorBoundary>
                                     </Tabs.Panel>
                                 );

package/src/workspace/model.ts

@@ -84,76 +84,6 @@ function flattenSplits(node: SplitNode): SplitNode {
     return { ...node, children, sizes: shares(sizes, children.length) };
 }
 
-/** Repairs persisted data at the application boundary; view payloads never enter the layout. */
-export function normalizeSplitLayout(value: unknown): SplitLayout {
-    const ids = new Set<string>();
-    const views = new Set<string>();
-    const seen = new Set<object>();
-    let serial = 0;
-    const nextId = (candidate: unknown): string => {
-        let id = typeof candidate === 'string' && candidate.length > 0 ? candidate : `pane-${serial++}`;
-        while (ids.has(id)) {
-            id = `pane-${serial++}`;
-        }
-        ids.add(id);
-        return id;
-    };
-    const read = (input: unknown, depth: number): SplitNode | null => {
-        if (input === null || typeof input !== 'object' || seen.has(input) || depth > 64) {
-            return null;
-        }
-        seen.add(input);
-        const row = input as Record<string, unknown>;
-        if (row.type === 'pane') {
-            const items = Array.isArray(row.views)
-                ? row.views.filter((view): view is string => {
-                      if (typeof view !== 'string' || view.length === 0 || views.has(view)) {
-                          return false;
-                      }
-                      views.add(view);
-                      return true;
-                  })
-                : [];
-            return {
-                type: 'pane',
-                id: nextId(row.id),
-                views: items,
-                active: typeof row.active === 'string' && items.includes(row.active) ? row.active : (items[0] ?? null)
-            };
-        }
-        if (row.type !== 'split' || !Array.isArray(row.children)) {
-            return null;
-        }
-        const children: SplitNode[] = [];
-        const sizes: number[] = [];
-        row.children.forEach((child, i) => {
-            const result = read(child, depth + 1);
-            if (result) {
-                children.push(result);
-                sizes.push(Array.isArray(row.sizes) ? Number(row.sizes[i]) : 1);
-            }
-        });
-        if (children.length < 2) {
-            return children[0] ?? null;
-        }
-        return {
-            type: 'split',
-            id: nextId(row.id),
-            axis: row.axis === 'vertical' ? 'vertical' : 'horizontal',
-            children,
-            sizes: shares(sizes, children.length)
-        };
-    };
-    const input = value !== null && typeof value === 'object' ? (value as Record<string, unknown>) : {};
-    const root = flattenSplits(read(input.root, 0) ?? createSplitLayout().root);
-    const panes = splitPanes(root);
-    return {
-        root,
-        focused: panes.find((pane) => pane.id === input.focused)?.id ?? panes[0]!.id,
-        maximized: panes.find((pane) => pane.id === input.maximized)?.id ?? null
-    };
-}
-
 function replace(node: SplitNode, id: string, transform: (node: SplitNode) => SplitNode | null): SplitNode | null {
     if (node.id === id) {
         return transform(node);