@adecore/ui 0.24.1 → 0.24.2

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/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/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

@@ -67,6 +67,9 @@ 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 type { LazyComponent } from './lazy.tsx';
+export { LazyBoundary } from './LazyBoundary.tsx';
+export type { LazyBoundaryProps } from './LazyBoundary.tsx';
 export { UI_NAMESPACE, UI_RESOURCES, addUiResources } from './locales.ts';
 export { startInputModality } from './modality.ts';
 export { isApplePlatform } from './platform.ts';

package/dist/index.js

@@ -65,6 +65,7 @@ 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 { LazyBoundary } from './LazyBoundary.js';
 export { UI_NAMESPACE, UI_RESOURCES, addUiResources } from './locales.js';
 export { startInputModality } from './modality.js';
 export { isApplePlatform } from './platform.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/package.json

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

@@ -83,6 +83,9 @@ 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 type { LazyComponent } from './lazy.tsx';
+export { LazyBoundary } from './LazyBoundary.tsx';
+export type { LazyBoundaryProps } from './LazyBoundary.tsx';
 export { UI_NAMESPACE, UI_RESOURCES, addUiResources } from './locales.ts';
 export { startInputModality } from './modality.ts';
 export { isApplePlatform } from './platform.ts';

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>
                                 );