@adecore/ui 0.24.0 → 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/dist/theme.css

@@ -501,12 +501,13 @@
     /* A strip that scrolls sideways fades out at the edge that still hides something, and only there,
        so a strip that fits keeps its first and last item sharp. The edges are set by whoever scrolls. */
     .scroll-fade-x {
+        --fade-size: 24px;
         --fade-start: 0px;
         --fade-end: 0px;
         mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
     }
-    .scroll-fade-x[data-fade-start] { --fade-start: 24px; }
-    .scroll-fade-x[data-fade-end] { --fade-end: 24px; }
+    .scroll-fade-x[data-fade-start] { --fade-start: var(--fade-size); }
+    .scroll-fade-x[data-fade-end] { --fade-end: var(--fade-size); }
     /* The same for a column under a fixed header: its top fades once something has scrolled under it. */
     .scroll-fade-top {
         --fade-start: 0px;

package/dist/workspace/TabStrip.js

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Icon } from '../Icon.js';
 import { IconButton } from '../IconButton.js';
 import { Tooltip } from '../Tooltip.js';
-import { tabGapAt } from './geometry.js';
+import { tabGapAt, tabRevealScrollLeft } from './geometry.js';
 /* Where an arrow, Home or End moves the selection from `index`, wrapping at either end; null for any other key. */
 function tabIndexForKey(key, index, count) {
     switch (key) {
@@ -62,20 +62,44 @@ export function TabStrip({ items, value, onValueChange, renderTab, focused = tru
             setInsertion(after?.offsetLeft ?? (last ? last.offsetLeft + last.offsetWidth : 0));
         }
     }, [insertAt]);
-    useLayoutEffect(measure);
+    // Stays set after the active tab changes, as its width can settle frames later; a person's own scroll ends it.
+    const revealing = useRef(false);
+    const reveal = () => {
+        const element = strip.current;
+        const selected = element?.querySelector('[aria-selected="true"]');
+        if (!revealing.current || !element || !selected) {
+            return;
+        }
+        const container = selected.closest('[data-document-tab]');
+        const tab = container && element.contains(container) ? container : selected;
+        const fade = parseFloat(getComputedStyle(element).getPropertyValue('--fade-size')) || 0;
+        const bounds = element.getBoundingClientRect();
+        const rect = tab.getBoundingClientRect();
+        const left = tabRevealScrollLeft(element, rect.left - bounds.left - element.clientLeft + element.scrollLeft, rect.width, fade);
+        if (left !== element.scrollLeft) {
+            element.scrollLeft = left;
+        }
+    };
+    useLayoutEffect(() => {
+        revealing.current = true;
+    }, [value]);
+    useLayoutEffect(() => {
+        reveal();
+        measure();
+    });
     useEffect(() => {
         const element = strip.current;
         if (!element || typeof ResizeObserver === 'undefined') {
             return;
         }
-        const observer = new ResizeObserver(measure);
+        const observer = new ResizeObserver(() => {
+            reveal();
+            measure();
+        });
         observer.observe(element);
         element.querySelectorAll('[data-document-tab]').forEach((tab) => observer.observe(tab));
         return () => observer.disconnect();
     });
-    useEffect(() => {
-        strip.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
-    }, [value]);
     const gap = (event) => {
         const rects = Array.from(event.currentTarget.querySelectorAll('[data-document-tab]'), (tab) => tab.getBoundingClientRect());
         return tabGapAt(rects, event.clientX);
@@ -110,10 +134,21 @@ export function TabStrip({ items, value, onValueChange, renderTab, focused = tru
             },
             onWheel: (event) => {
                 props.onWheel?.(event);
-                if (!event.defaultPrevented && !event.deltaX && event.deltaY) {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                revealing.current = false;
+                if (!event.deltaX && event.deltaY) {
                     event.currentTarget.scrollLeft += event.deltaY;
                 }
             },
+            onPointerDown: (event) => {
+                props.onPointerDown?.(event);
+                // A press on the strip itself grabs its scrollbar, and a touch may pan it.
+                if (event.target === event.currentTarget || event.pointerType === 'touch') {
+                    revealing.current = false;
+                }
+            },
             onDragOver: (event) => {
                 props.onDragOver?.(event);
                 if (!event.defaultPrevented) {

package/dist/workspace/geometry.d.ts

@@ -37,3 +37,14 @@ export declare function tabGapAt(rects: readonly {
     left: number;
     right: number;
 }[], x: number): number;
+export interface TabScrollView {
+    scrollLeft: number;
+    clientWidth: number;
+    scrollWidth: number;
+}
+/**
+ * The scrollLeft that brings a tab fully into view and clear of the edge fades, or the current one
+ * when it already is. The strip only fades an edge it can still scroll toward, so a fade is counted
+ * only where the scroll position leaves one. A tab wider than the room between the fades shows its start.
+ */
+export declare function tabRevealScrollLeft(view: TabScrollView, start: number, width: number, fade: number): number;

package/dist/workspace/geometry.js

@@ -151,3 +151,22 @@ export function tabGapAt(rects, x) {
     const index = rects.findIndex((rect) => x < (rect.left + rect.right) / 2);
     return index < 0 ? rects.length : index;
 }
+/**
+ * The scrollLeft that brings a tab fully into view and clear of the edge fades, or the current one
+ * when it already is. The strip only fades an edge it can still scroll toward, so a fade is counted
+ * only where the scroll position leaves one. A tab wider than the room between the fades shows its start.
+ */
+export function tabRevealScrollLeft(view, start, width, fade) {
+    const max = Math.max(0, view.scrollWidth - view.clientWidth);
+    const end = start + width;
+    const visibleStart = (left) => left + (left > 0 ? fade : 0);
+    const visibleEnd = (left) => left + view.clientWidth - (left < max - 1 ? fade : 0);
+    const clamp = (left) => Math.round(Math.min(max, Math.max(0, left)));
+    if (start >= visibleStart(view.scrollLeft) && end <= visibleEnd(view.scrollLeft)) {
+        return view.scrollLeft;
+    }
+    if (start < visibleStart(view.scrollLeft) || width > view.clientWidth - 2 * fade) {
+        return clamp(start - fade);
+    }
+    return clamp(end + fade - view.clientWidth);
+}

package/package.json

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

package/src/theme.css

@@ -501,12 +501,13 @@
     /* A strip that scrolls sideways fades out at the edge that still hides something, and only there,
        so a strip that fits keeps its first and last item sharp. The edges are set by whoever scrolls. */
     .scroll-fade-x {
+        --fade-size: 24px;
         --fade-start: 0px;
         --fade-end: 0px;
         mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
     }
-    .scroll-fade-x[data-fade-start] { --fade-start: 24px; }
-    .scroll-fade-x[data-fade-end] { --fade-end: 24px; }
+    .scroll-fade-x[data-fade-start] { --fade-start: var(--fade-size); }
+    .scroll-fade-x[data-fade-end] { --fade-end: var(--fade-size); }
     /* The same for a column under a fixed header: its top fades once something has scrolled under it. */
     .scroll-fade-top {
         --fade-start: 0px;

package/src/workspace/TabStrip.tsx

@@ -8,6 +8,7 @@ import {
     useState,
     type DragEvent,
     type MouseEvent,
+    type PointerEvent,
     type ReactNode,
     type UIEvent,
     type WheelEvent
@@ -19,7 +20,7 @@ import { useTranslation } from 'react-i18next';
 import { Icon } from '../Icon.tsx';
 import { IconButton, type IconButtonProps } from '../IconButton.tsx';
 import { Tooltip } from '../Tooltip.tsx';
-import { tabGapAt } from './geometry.ts';
+import { tabGapAt, tabRevealScrollLeft } from './geometry.ts';
 
 /* Where an arrow, Home or End moves the selection from `index`, wrapping at either end; null for any other key. */
 function tabIndexForKey(key: string, index: number, count: number): number | null {
@@ -123,20 +124,44 @@ export function TabStrip({
             setInsertion(after?.offsetLeft ?? (last ? last.offsetLeft + last.offsetWidth : 0));
         }
     }, [insertAt]);
-    useLayoutEffect(measure);
+    // Stays set after the active tab changes, as its width can settle frames later; a person's own scroll ends it.
+    const revealing = useRef(false);
+    const reveal = (): void => {
+        const element = strip.current;
+        const selected = element?.querySelector<HTMLElement>('[aria-selected="true"]');
+        if (!revealing.current || !element || !selected) {
+            return;
+        }
+        const container = selected.closest<HTMLElement>('[data-document-tab]');
+        const tab = container && element.contains(container) ? container : selected;
+        const fade = parseFloat(getComputedStyle(element).getPropertyValue('--fade-size')) || 0;
+        const bounds = element.getBoundingClientRect();
+        const rect = tab.getBoundingClientRect();
+        const left = tabRevealScrollLeft(element, rect.left - bounds.left - element.clientLeft + element.scrollLeft, rect.width, fade);
+        if (left !== element.scrollLeft) {
+            element.scrollLeft = left;
+        }
+    };
+    useLayoutEffect(() => {
+        revealing.current = true;
+    }, [value]);
+    useLayoutEffect(() => {
+        reveal();
+        measure();
+    });
     useEffect(() => {
         const element = strip.current;
         if (!element || typeof ResizeObserver === 'undefined') {
             return;
         }
-        const observer = new ResizeObserver(measure);
+        const observer = new ResizeObserver(() => {
+            reveal();
+            measure();
+        });
         observer.observe(element);
         element.querySelectorAll('[data-document-tab]').forEach((tab) => observer.observe(tab));
         return () => observer.disconnect();
     });
-    useEffect(() => {
-        strip.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
-    }, [value]);
     const gap = (event: DragEvent<HTMLDivElement>): number => {
         const rects = Array.from(event.currentTarget.querySelectorAll('[data-document-tab]'), (tab) => tab.getBoundingClientRect());
         return tabGapAt(rects, event.clientX);
@@ -171,10 +196,21 @@ export function TabStrip({
             },
             onWheel: (event: WheelEvent<HTMLDivElement>) => {
                 props.onWheel?.(event);
-                if (!event.defaultPrevented && !event.deltaX && event.deltaY) {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                revealing.current = false;
+                if (!event.deltaX && event.deltaY) {
                     event.currentTarget.scrollLeft += event.deltaY;
                 }
             },
+            onPointerDown: (event: PointerEvent<HTMLDivElement>) => {
+                props.onPointerDown?.(event);
+                // A press on the strip itself grabs its scrollbar, and a touch may pan it.
+                if (event.target === event.currentTarget || event.pointerType === 'touch') {
+                    revealing.current = false;
+                }
+            },
             onDragOver: (event: DragEvent<HTMLDivElement>) => {
                 props.onDragOver?.(event);
                 if (!event.defaultPrevented) {

package/src/workspace/geometry.ts

@@ -188,3 +188,29 @@ export function tabGapAt(rects: readonly { left: number; right: number }[], x: n
     const index = rects.findIndex((rect) => x < (rect.left + rect.right) / 2);
     return index < 0 ? rects.length : index;
 }
+
+export interface TabScrollView {
+    scrollLeft: number;
+    clientWidth: number;
+    scrollWidth: number;
+}
+
+/**
+ * The scrollLeft that brings a tab fully into view and clear of the edge fades, or the current one
+ * when it already is. The strip only fades an edge it can still scroll toward, so a fade is counted
+ * only where the scroll position leaves one. A tab wider than the room between the fades shows its start.
+ */
+export function tabRevealScrollLeft(view: TabScrollView, start: number, width: number, fade: number): number {
+    const max = Math.max(0, view.scrollWidth - view.clientWidth);
+    const end = start + width;
+    const visibleStart = (left: number): number => left + (left > 0 ? fade : 0);
+    const visibleEnd = (left: number): number => left + view.clientWidth - (left < max - 1 ? fade : 0);
+    const clamp = (left: number): number => Math.round(Math.min(max, Math.max(0, left)));
+    if (start >= visibleStart(view.scrollLeft) && end <= visibleEnd(view.scrollLeft)) {
+        return view.scrollLeft;
+    }
+    if (start < visibleStart(view.scrollLeft) || width > view.clientWidth - 2 * fade) {
+        return clamp(start - fade);
+    }
+    return clamp(end + fade - view.clientWidth);
+}