@adecore/ui 0.53.3 → 0.54.0

package/src/command-palette/parts.tsx

@@ -1,16 +1,17 @@
-import { useContext, useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode } from 'react';
-import { flushSync } from 'react-dom';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { useRender } from '@base-ui/react/use-render';
 import clsx from 'clsx';
 import { Search } from 'lucide-react';
+import { useContext, useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode } from 'react';
+import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import { Autocomplete } from '@base-ui/react/autocomplete';
-import { useRender } from '@base-ui/react/use-render';
 import { withClass } from '../class-name.ts';
 import { DialogPopup, DialogRoot, type DialogPopupProps } from '../dialog/parts.tsx';
 import { Icon } from '../Icon.tsx';
 import { Kbd } from '../Kbd.tsx';
 import { mergeRefs } from '../merge-refs.ts';
 import { KEY_SHORTCUTS } from '../shortcut.ts';
+import { useOverlayScrollbars } from '../useOverlayScrollbars.tsx';
 import { PaletteRefsContext } from './context.ts';
 
 const NO_ITEMS: readonly never[] = [];
@@ -188,25 +189,30 @@ export function CommandPaletteInput({ leading, trailing, escapeHint = true, mono
 export function CommandPaletteList({ className, ref, onFocus, ...props }: ComponentProps<typeof Autocomplete.List>) {
     const { t } = useTranslation('ui');
     const refs = useContext(PaletteRefsContext);
+    const [list, setList] = useState<HTMLDivElement | null>(null);
+    const scrollbars = useOverlayScrollbars(list);
 
     return (
-        <Autocomplete.List
-            ref={mergeRefs(ref, refs?.list)}
-            aria-label={t('palette.results')}
-            className={withClass('max-h-[50vh] min-h-0 overflow-y-auto overscroll-contain scroll-py-1.5 not-empty:p-1.5', className)}
-            {...props}
-            onFocus={(event) => {
-                onFocus?.(event);
-                const row = event.target.closest('[role="option"]');
+        <div className="relative flex min-h-0 flex-col">
+            <Autocomplete.List
+                ref={mergeRefs(ref, refs?.list, setList)}
+                aria-label={t('palette.results')}
+                className={withClass('max-h-[50vh] min-h-0 overflow-y-auto overscroll-contain scroll-py-1.5 not-empty:p-1.5', className)}
+                {...props}
+                onFocus={(event) => {
+                    onFocus?.(event);
+                    const row = event.target.closest('[role="option"]');
 
-                if (row === null || !event.currentTarget.contains(row) || refs?.input.current == null) {
-                    return;
-                }
+                    if (row === null || !event.currentTarget.contains(row) || refs?.input.current == null) {
+                        return;
+                    }
 
-                refs.highlight(row);
-                refs.input.current.focus({ preventScroll: true });
-            }}
-        />
+                    refs.highlight(row);
+                    refs.input.current.focus({ preventScroll: true });
+                }}
+            />
+            {scrollbars}
+        </div>
     );
 }
 

package/src/command-palette/virtual.tsx

@@ -1,10 +1,10 @@
-import { Fragment, useLayoutEffect, useMemo, useRef, type ComponentProps, type ReactNode } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
 import { Autocomplete } from '@base-ui/react/autocomplete';
-import { CommandPaletteList } from './parts.tsx';
-import { useCommandPaletteVirtualScroll } from './context.ts';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Fragment, useLayoutEffect, useMemo, useRef, type ComponentProps, type ReactNode } from 'react';
 import { MENU_LABEL } from '../menu/parts.tsx';
 import { mergeRefs } from '../merge-refs.ts';
+import { useCommandPaletteVirtualScroll } from './context.ts';
+import { CommandPaletteList } from './parts.tsx';
 
 export interface CommandPaletteVirtualItemProps {
     index: number;

package/src/dialog/parts.tsx

@@ -1,7 +1,7 @@
-import { createContext, useContext, useState, type ComponentProps } from 'react';
-import clsx from 'clsx';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { createContext, useContext, useState, type ComponentProps } from 'react';
 import { withClass } from '../class-name.ts';
 import { useDialogLayer } from '../dialog-layer.ts';
 

package/src/file-tree/parts.tsx

@@ -1,15 +1,15 @@
-import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
 import { useRender } from '@base-ui/react/use-render';
-import { FileTree as PierreFileTree, type FileTreeProps as PierreProps } from '@pierre/trees/react';
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
-import { useTranslation } from 'react-i18next';
-import type { LucideIcon } from 'lucide-react';
+import { FileTree as PierreFileTree, type FileTreeProps as PierreProps } from '@pierre/trees/react';
 import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
 import { Icon } from '../Icon.tsx';
 import { mergeRefs } from '../merge-refs.ts';
-import { directoryHandle, extendsSelection, followFocus, movesFocus, menuTargetsOf, rowPathOf, visibleRows } from './helpers.ts';
 import type { FileTreeEmptyLabel } from './empty-lines.ts';
+import { directoryHandle, extendsSelection, followFocus, movesFocus, menuTargetsOf, rowPathOf, visibleRows } from './helpers.ts';
 import { useEmptyLines } from './use-empty-lines.ts';
 import { useFileTreeShift } from './use-file-tree-shift.tsx';
 import { useFileTreeSlots, type FileTreeDecorationOrder } from './use-slots.ts';

package/src/file-tree/use-empty-lines.ts

@@ -1,5 +1,5 @@
-import { useEffect, useLayoutEffect, useRef } from 'react';
 import type { FileTree } from '@pierre/trees';
+import { useEffect, useLayoutEffect, useRef } from 'react';
 import { emptyLineChanges, isEmptyLine, pastEmptyLine, skipEmptyLine, type FileTreeEmptyLabel } from './empty-lines.ts';
 import { movesFocus, visibleRows } from './helpers.ts';
 

package/src/file-tree/use-file-tree-shift.tsx

@@ -1,7 +1,7 @@
-import { type ReactElement } from 'react';
 import type { FileTree } from '@pierre/trees';
-import { useTreeShift, type TreeShiftSource } from '../tree/use-tree-shift.tsx';
+import { type ReactElement } from 'react';
 import { shiftNeed } from '../tree/shift.ts';
+import { useTreeShift, type TreeShiftSource } from '../tree/use-tree-shift.tsx';
 
 const ROWS = '[data-type="item"]:not([data-item-parked="true"])';
 

package/src/file-tree/use-slots.ts

@@ -1,7 +1,7 @@
-import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
-import { flushSync } from 'react-dom';
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
 import type { LucideIcon } from 'lucide-react';
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
 import { directoryOfEmptyLine, isEmptyLine, type FileTreeEmptyLabel } from './empty-lines.ts';
 import { pathOfRow, visibleRows, visibleRowsAround } from './helpers.ts';
 import { matchHighlight, rangesOfMatches } from './highlight.ts';

package/src/index.ts

@@ -66,6 +66,7 @@ export { Pill, type PillProps } from './Pill.tsx';
 export { PromptDialog, type PromptDialogProps } from './PromptDialog.tsx';
 export { RelativeTime, type RelativeTimeProps } from './RelativeTime.tsx';
 export { ProjectSwitcher, ProjectSwitcherGroups, type ProjectSwitcherItem, type ProjectSwitcherProps } from './ProjectSwitcher.tsx';
+export { ScrollArea, type ScrollAreaProps } from './ScrollArea.tsx';
 export { SectionLabel, type SectionLabelProps } from './SectionLabel.tsx';
 export { SegmentBar, type SegmentBarPart, type SegmentBarProps } from './SegmentBar.tsx';
 export { Segmented, type SegmentedOption, type SegmentedProps } from './Segmented.tsx';
@@ -124,6 +125,7 @@ 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 { useOverlayScrollbars, type OverlayScrollbarsOptions, type ScrollAreaAxis } from './useOverlayScrollbars.tsx';
 
 export { useFileTree, type FileTreeOptions } from './file-tree/use-file-tree.ts';
 export type { FileTreeRootProps } from './file-tree/parts.tsx';

package/src/key-value-list/parts.tsx

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 
 export type KeyValueListRootProps = useRender.ComponentProps<'dl'> & {
     /* A hairline between rows, for a long list such as the headers of a message. Without it the rows sit close, for a few facts in a card. */

package/src/menu/parts.tsx

@@ -1,15 +1,17 @@
-import { createContext, useContext, type ComponentProps, type ReactNode, type Ref } from 'react';
-import clsx from 'clsx';
-import { Check, ChevronRight, type LucideIcon } from 'lucide-react';
 import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import { Separator as BaseSeparator } from '@base-ui/react/separator';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { Check, ChevronRight, type LucideIcon } from 'lucide-react';
+import { createContext, useContext, useState, type ComponentProps, type ReactNode, type Ref } from 'react';
 import { withClass } from '../class-name.ts';
 import { Icon } from '../Icon.tsx';
-import { Tooltip } from '../Tooltip.tsx';
+import { mergeRefs } from '../merge-refs.ts';
 import { splitPlacement, type PlacementKey } from '../placement.ts';
 import { renderPositioner } from '../popup-layer.ts';
+import { Tooltip } from '../Tooltip.tsx';
+import { useOverlayScrollbars } from '../useOverlayScrollbars.tsx';
 
 /* Where a popup opens from decides where it goes when a call site says nothing. */
 type MenuKind = 'menu' | 'context' | 'submenu';
@@ -66,9 +68,11 @@ export const ContextMenuTrigger = BaseContextMenu.Trigger;
 
 export type MenuPopupProps = ComponentProps<typeof BaseMenu.Popup> & Placement;
 
-export function MenuPopup({ className, ...props }: MenuPopupProps) {
+export function MenuPopup({ className, ref, ...props }: MenuPopupProps) {
     const defaults = PLACEMENT[useContext(MenuKindContext)];
     const [placement, popupProps] = splitPlacement(props);
+    const [popup, setPopup] = useState<HTMLDivElement | null>(null);
+    const scrollbars = useOverlayScrollbars(popup);
 
     return (
         <BaseMenu.Portal>
@@ -81,7 +85,8 @@ export function MenuPopup({ className, ...props }: MenuPopupProps) {
                 sideOffset={placement.sideOffset ?? defaults.sideOffset}
                 alignOffset={placement.alignOffset ?? defaults.alignOffset}
             >
-                <BaseMenu.Popup className={withClass('menu-popup', className)} {...popupProps} />
+                <BaseMenu.Popup ref={mergeRefs(setPopup, ref)} className={withClass('menu-popup', className)} {...popupProps} />
+                {scrollbars}
             </BaseMenu.Positioner>
         </BaseMenu.Portal>
     );

package/src/popover/parts.tsx

@@ -1,9 +1,11 @@
-import type { ComponentProps } from 'react';
 import { Popover as BasePopover } from '@base-ui/react/popover';
 import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { useState, type ComponentProps } from 'react';
 import { withClass } from '../class-name.ts';
+import { mergeRefs } from '../merge-refs.ts';
 import { splitPlacement, type PlacementKey } from '../placement.ts';
 import { renderPositioner } from '../popup-layer.ts';
+import { useOverlayScrollbars } from '../useOverlayScrollbars.tsx';
 
 /* `picker` is a card whose content runs to its edges, `plain` leaves the surface to the caller. */
 const POPUP_VARIANT = {
@@ -31,13 +33,16 @@ export type PopoverPopupProps = ComponentProps<typeof BasePopover.Popup> &
         variant?: PopupVariant;
     };
 
-export function PopoverPopup({ variant = 'menu', side = 'bottom', align = 'start', sideOffset = 8, className, ...props }: PopoverPopupProps) {
+export function PopoverPopup({ variant = 'menu', side = 'bottom', align = 'start', sideOffset = 8, className, ref, ...props }: PopoverPopupProps) {
     const [placement, popupProps] = splitPlacement(props);
+    const [popup, setPopup] = useState<HTMLDivElement | null>(null);
+    const scrollbars = useOverlayScrollbars(popup);
 
     return (
         <BasePopover.Portal>
             <BasePopover.Positioner className="popup-positioner" render={renderPositioner} {...placement} side={side} align={align} sideOffset={sideOffset}>
-                <BasePopover.Popup className={withClass(POPUP_VARIANT[variant], className)} {...popupProps} />
+                <BasePopover.Popup ref={mergeRefs(setPopup, ref)} className={withClass(POPUP_VARIANT[variant], className)} {...popupProps} />
+                {scrollbars}
             </BasePopover.Positioner>
         </BasePopover.Portal>
     );
@@ -53,13 +58,16 @@ export type PreviewCardPopupProps = ComponentProps<typeof BasePreviewCard.Popup>
     };
 
 /* A card that opens while the pointer rests on its trigger, drawn like a popover. */
-export function PreviewCardPopup({ variant = 'menu', side = 'bottom', align = 'start', sideOffset = 8, className, ...props }: PreviewCardPopupProps) {
+export function PreviewCardPopup({ variant = 'menu', side = 'bottom', align = 'start', sideOffset = 8, className, ref, ...props }: PreviewCardPopupProps) {
     const [placement, popupProps] = splitPlacement(props);
+    const [popup, setPopup] = useState<HTMLDivElement | null>(null);
+    const scrollbars = useOverlayScrollbars(popup);
 
     return (
         <BasePreviewCard.Portal>
             <BasePreviewCard.Positioner className="z-(--z-popup)" {...placement} side={side} align={align} sideOffset={sideOffset}>
-                <BasePreviewCard.Popup className={withClass(POPUP_VARIANT[variant], className)} {...popupProps} />
+                <BasePreviewCard.Popup ref={mergeRefs(setPopup, ref)} className={withClass(POPUP_VARIANT[variant], className)} {...popupProps} />
+                {scrollbars}
             </BasePreviewCard.Positioner>
         </BasePreviewCard.Portal>
     );

package/src/project-switcher-row.tsx

@@ -1,7 +1,7 @@
-import type { MouseEvent } from 'react';
 import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
 import { MoreHorizontal } from 'lucide-react';
+import type { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 import * as Menu from './menu/index.parts.ts';
 import type { ProjectSwitcherItem } from './ProjectSwitcher.tsx';
 import { Tooltip } from './Tooltip.tsx';

package/src/scrollbar-geometry.ts

@@ -0,0 +1,67 @@
+/* A thumb never gets shorter than this, so a long list keeps one a pointer can grab. */
+export const MIN_THUMB = 24;
+
+/* A press on the track moves this share of the visible length, so a line of the old view stays in sight. */
+export const PAGE_SHARE = 0.9;
+
+export interface ScrollMetrics {
+    /* The length of the bar the thumb moves along, in pixels. */
+    readonly track: number;
+
+    /* The visible length of the scroller (`clientHeight` or `clientWidth`). */
+    readonly view: number;
+
+    /* The full length of what scrolls (`scrollHeight` or `scrollWidth`). */
+    readonly content: number;
+}
+
+export interface Thumb {
+    readonly size: number;
+    readonly offset: number;
+}
+
+/* Whether an axis has anything to scroll; a pixel of rounding is not worth a bar. */
+export function overflows(view: number, content: number): boolean {
+    return content - view > 1;
+}
+
+/* The thumb's length and its distance from the start of the track, in whole pixels. */
+export function thumbOf({ track, view, content }: ScrollMetrics, position: number): Thumb {
+    const range = content - view;
+
+    if (range <= 0 || track <= 0) {
+        return { size: Math.max(0, Math.round(track)), offset: 0 };
+    }
+
+    const size = Math.min(Math.round(track), Math.max(MIN_THUMB, Math.round((track * view) / content)));
+    const progress = Math.min(1, Math.max(0, position / range));
+
+    return { size, offset: Math.round((track - size) * progress) };
+}
+
+/* The scroll position after the thumb moved `moved` pixels from where a drag started. */
+export function scrollAfterDrag(metrics: ScrollMetrics, start: number, moved: number): number {
+    const range = metrics.content - metrics.view;
+    const free = metrics.track - thumbOf(metrics, start).size;
+
+    if (range <= 0 || free <= 0) {
+        return start;
+    }
+
+    return Math.min(range, Math.max(0, start + (moved * range) / free));
+}
+
+/* How far a press on the track at `pointer` scrolls: a page toward the pointer, nothing on the thumb itself. */
+export function pageToward(pointer: number, thumbStart: number, thumbEnd: number, view: number): number {
+    const page = Math.round(view * PAGE_SHARE);
+
+    if (pointer < thumbStart) {
+        return -page;
+    }
+
+    if (pointer > thumbEnd) {
+        return page;
+    }
+
+    return 0;
+}

package/src/select-shared.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
 import clsx from 'clsx';
+import type { ReactNode } from 'react';
 
 export interface SelectItem<T extends string> {
     value: T;

package/src/settings/DetailHeader.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode, Ref } from 'react';
 import clsx from 'clsx';
+import type { ReactNode, Ref } from 'react';
 
 export interface DetailHeaderProps {
     mark: ReactNode;

package/src/settings/MasterDetail.tsx

@@ -1,5 +1,6 @@
-import type { ReactNode, Ref } from 'react';
 import clsx from 'clsx';
+import type { ReactNode, Ref } from 'react';
+import { ScrollArea } from '../ScrollArea.tsx';
 
 const LIST_WIDTHS = { 280: 'w-70', 320: 'w-80', 340: 'w-85' } as const;
 
@@ -18,18 +19,20 @@ export interface MasterDetailProps {
 export function MasterDetail({ list, listWidth, listLabel, detail, className, ref }: MasterDetailProps) {
     return (
         <div ref={ref} className={clsx('flex min-h-0 min-w-0 grow border-t border-border max-[640px]:flex-col', className)}>
-            <nav
+            <ScrollArea
+                render={<nav />}
                 aria-label={listLabel}
                 className={clsx(
-                    'flex shrink-0 flex-col gap-0.5 overflow-y-auto border-r border-border p-2 max-[640px]:max-h-60 max-[640px]:w-auto max-[640px]:border-r-0 max-[640px]:border-b',
+                    'shrink-0 border-r border-border max-[640px]:max-h-60 max-[640px]:w-auto max-[640px]:border-r-0 max-[640px]:border-b',
                     LIST_WIDTHS[listWidth]
                 )}
+                viewportClassName="flex flex-col gap-0.5 p-2"
             >
                 {list}
-            </nav>
-            <div className="min-h-0 min-w-0 grow overflow-y-auto">
+            </ScrollArea>
+            <ScrollArea className="grow">
                 <div className="flex min-w-0 flex-col gap-7 px-8 pt-6 pb-10 max-[960px]:px-4">{detail}</div>
-            </div>
+            </ScrollArea>
         </div>
     );
 }

package/src/settings/SettingsDialog.tsx

@@ -1,18 +1,24 @@
-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';
+import clsx from 'clsx';
 import { Search, X, type LucideIcon } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState, type ComponentProps, type ComponentType, type ReactNode, type Ref } from 'react';
+import { useTranslation } from 'react-i18next';
 import { CloseButton } from '../CloseButton.tsx';
 import { DialogDescription, DialogPopup, DialogRoot, DialogTitle } from '../dialog/parts.tsx';
 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 { LazyBoundary } from '../LazyBoundary.tsx';
+import { ScrollArea } from '../ScrollArea.tsx';
 import { Select } from '../Select.tsx';
 import { SettingsTargetContext } from './target.ts';
 
+/* A pane that is not split scrolls as one column: the panel's own props land on the viewport, which stays the tab panel. */
+function renderScrollingPanel({ ref, className, ...props }: ComponentProps<'div'>) {
+    return <ScrollArea ref={ref} className="min-h-0 min-w-0 grow" viewportClassName={className} {...props} />;
+}
+
 export interface SettingsSectionEntry {
     id: string;
     icon: LucideIcon;
@@ -125,7 +131,7 @@ function SettingsNav({ groups, footer, account }: Pick<SettingsDialogProps, 'gro
 
     return (
         <Tabs.List aria-label={t('settings.sections')} activateOnFocus className="flex min-h-0 grow flex-col">
-            <div ref={list} className="scroll-fade-y flex min-h-0 flex-col gap-3.5 overflow-y-auto">
+            <ScrollArea viewportRef={list} viewportClassName="scroll-fade-y flex flex-col gap-3.5">
                 {groups.map((group) => (
                     <div key={group.sections[0]!.id} className="flex flex-col gap-0.5">
                         {group.label !== null && <span className="px-2.5 pt-2.5 pb-1 text-xs font-medium text-text-faint">{group.label}</span>}
@@ -134,7 +140,7 @@ function SettingsNav({ groups, footer, account }: Pick<SettingsDialogProps, 'gro
                         ))}
                     </div>
                 ))}
-            </div>
+            </ScrollArea>
             {(footer?.length || account) && (
                 <div className="mt-auto flex flex-col gap-3 pt-3.5">
                     {footer?.map((section) => (
@@ -232,7 +238,7 @@ function SearchResults({ search, query, labelOf, onPick }: SearchResultsProps) {
     }
 
     return (
-        <ul className="flex min-h-0 flex-col gap-0.5 overflow-y-auto" aria-label={t('settings.search.results')}>
+        <ScrollArea render={<ul />} viewportClassName="flex flex-col gap-0.5" aria-label={t('settings.search.results')}>
             {results.map((result) => (
                 <li key={`${result.section}:${result.id ?? ''}`}>
                     <button
@@ -245,7 +251,7 @@ function SearchResults({ search, query, labelOf, onPick }: SearchResultsProps) {
                     </button>
                 </li>
             ))}
-        </ul>
+        </ScrollArea>
     );
 }
 
@@ -354,10 +360,11 @@ export function SettingsDialog({
                                         className={clsx(
                                             'flex min-h-0 min-w-0 grow flex-col outline-none',
                                             // A split pane scrolls each of its sides itself.
-                                            !entry.split && 'gap-7 overflow-y-auto px-8 pb-10 max-[960px]:px-4',
+                                            !entry.split && 'gap-7 px-8 pb-10 max-[960px]:px-4',
                                             // Under a hero the bar's fill marks the edge; a fade would wipe the hero out behind the clear bar.
                                             !entry.split && !Hero && 'scroll-fade-top pt-1'
                                         )}
+                                        render={entry.split ? undefined : renderScrollingPanel}
                                         onScroll={(event) => {
                                             const top = event.currentTarget.scrollTop;
                                             event.currentTarget.toggleAttribute('data-fade-start', top > 0);

package/src/settings/SettingsRow.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react';
+import { useEffect, useRef, type ReactNode, type Ref } from 'react';
 import { Icon } from '../Icon.tsx';
 import { mergeRefs } from '../merge-refs.ts';
 import { useSettingsTarget } from './target.ts';

package/src/settings/SettingsSection.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode, Ref } from 'react';
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react';
+import type { ReactNode, Ref } from 'react';
 import { Icon } from '../Icon.tsx';
 
 export interface SettingsSectionProps {

package/src/tabs/parts.tsx

@@ -1,3 +1,7 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { ChevronDown, X } from 'lucide-react';
 import {
     Children,
     createContext,
@@ -11,11 +15,7 @@ import {
     type ReactElement,
     type ReactNode
 } from 'react';
-import clsx from 'clsx';
-import { ChevronDown, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Tabs as BaseTabs } from '@base-ui/react/tabs';
-import { useRender } from '@base-ui/react/use-render';
 import { withClass } from '../class-name.ts';
 import { formatNumber } from '../format/number.ts';
 import { Icon } from '../Icon.tsx';

package/src/testing/dedupe.ts

@@ -1,6 +1,6 @@
+import { Glob, plugin } from 'bun';
 import { existsSync, readdirSync, readFileSync, realpathSync } from 'node:fs';
 import { dirname, join, sep } from 'node:path';
-import { Glob, plugin } from 'bun';
 
 /*
  * What `resolve.dedupe` does for Vite, for `bun test` in an app that links a checkout: a second React,

package/src/theme.css

@@ -11,6 +11,11 @@
     --surface-raised: #ffffff;
     --surface-sunken: #ececef;
     --track: rgb(0 0 0 / 0.09);
+    /* The overlay scrollbars (`ScrollArea`): alphas, so a bar takes the color of whatever it floats over. */
+    --scrollbar-thumb: rgb(0 0 0 / 0.22);
+    --scrollbar-thumb-hover: rgb(0 0 0 / 0.38);
+    --scrollbar-thumb-active: rgb(0 0 0 / 0.5);
+    --scrollbar-track: rgb(0 0 0 / 0.04);
     /* A bar that is not the one in focus: between the sunken page behind it and a focused bar, so it
        still reads as a bar. The toolbar of a cell in the grid that does not have the keyboard. */
     --surface-idle: color-mix(in srgb, var(--surface) 50%, var(--surface-sunken));
@@ -122,6 +127,10 @@
     --surface-raised: #18181c;
     --surface-sunken: #0b0b0e;
     --track: rgb(255 255 255 / 0.11);
+    --scrollbar-thumb: rgb(255 255 255 / 0.22);
+    --scrollbar-thumb-hover: rgb(255 255 255 / 0.38);
+    --scrollbar-thumb-active: rgb(255 255 255 / 0.5);
+    --scrollbar-track: rgb(255 255 255 / 0.04);
     --surface-hover: #202024;
     --surface-active: #28282e;
     /* Derived, so an app that tints its surfaces tints its fields along. */
@@ -811,7 +820,7 @@
         position: absolute;
         inset-block: 0;
         border-radius: 999px;
-        background: var(--text-faint);
+        background: var(--scrollbar-thumb);
     }
     @media (prefers-reduced-motion: reduce) {
         .adecore-tree-shift-track {
@@ -1083,3 +1092,84 @@
     /* The cut part stays in the text at no width, so a selection copies it and a find matches across the cut. */
     .middle-truncate-middle { display: inline-block; width: 0; overflow: hidden; vertical-align: top; }
 }
+
+@layer components {
+    /* `ScrollArea` and `useOverlayScrollbars`. The scroller stays native and hides its own bar; thin bars
+       float over the content, hidden at rest and shown while it scrolls. */
+    [data-overlay-scrollbars] { scrollbar-width: none; }
+    [data-overlay-scrollbars]::-webkit-scrollbar { display: none; }
+    /* A drag that strays over the content must not select it, nor may a long press on a bar. */
+    [data-overlay-scrollbars][data-scrollbar-dragging], .ade-scrollbar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+    .ade-scroll-area { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+    /* Its own stacking layer, so a sticky header with a z-index inside never covers the bars. */
+    /* `contain` lets the box bounce at its own end; the page's `overscroll-behavior: none` would take the bounce of a scroll chained up to it. */
+    .ade-scroll-viewport { flex: 1 1 auto; min-height: 0; overflow: auto; isolation: isolate; overscroll-behavior: contain; }
+    .ade-scroll-viewport[data-axis="y"] { overflow-x: hidden; }
+    .ade-scroll-viewport[data-axis="x"] { overflow-y: hidden; }
+    .ade-scrollbar {
+        --scrollbar-size: 12px;
+        position: absolute;
+        z-index: 1;
+        display: none;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 240ms ease;
+    }
+    .ade-scrollbar[data-overflow] { display: block; }
+    /* A popup's bars lie beside it in its positioner; the ends keep clear of its rounded corners. */
+    :is(.menu-popup, .picker-popup) ~ .ade-scrollbar { --scrollbar-inset: 4px; }
+    .ade-scrollbar[data-visible] { opacity: 1; pointer-events: auto; transition-duration: 120ms; }
+    /* `coveredBottom` lifts the bars of its own area only, never those of a scroller inside it. */
+    .ade-scroll-viewport { --scrollbar-covered-bottom: 0px; }
+    /* The two bars meet without overlapping: each stops a bar's width short of the corner. */
+    .ade-scrollbar[data-orientation="vertical"] { top: var(--scrollbar-inset, 2px); bottom: calc(var(--scrollbar-covered-bottom, 0px) + var(--scrollbar-inset, 2px)); right: 0; width: var(--scrollbar-size); }
+    .ade-scrollbar[data-orientation="vertical"][data-corner] { bottom: calc(var(--scrollbar-covered-bottom, 0px) + var(--scrollbar-size)); }
+    .ade-scrollbar[data-orientation="horizontal"] { left: var(--scrollbar-inset, 2px); right: var(--scrollbar-inset, 2px); bottom: var(--scrollbar-covered-bottom, 0px); height: var(--scrollbar-size); }
+    .ade-scrollbar[data-orientation="horizontal"][data-corner] { right: var(--scrollbar-size); }
+    .ade-scrollbar::before {
+        content: "";
+        position: absolute;
+        border-radius: 999px;
+        background: var(--scrollbar-track);
+        opacity: 0;
+        transition: opacity 120ms ease;
+    }
+    /* The track is as thick as the widened pill, also on touch where the hit area is wider. */
+    .ade-scrollbar[data-orientation="vertical"]::before { top: 0; bottom: 0; right: 2px; width: 8px; }
+    .ade-scrollbar[data-orientation="horizontal"]::before { left: 0; right: 0; bottom: 2px; height: 8px; }
+    /* The thumb spans the whole hit area across, so a press beside the pill still grabs it; the pill is its `::before`. */
+    .ade-scrollbar-thumb { position: absolute; top: 0; left: 0; touch-action: none; }
+    .ade-scrollbar[data-orientation="vertical"] .ade-scrollbar-thumb { right: 0; }
+    .ade-scrollbar[data-orientation="horizontal"] .ade-scrollbar-thumb { bottom: 0; }
+    .ade-scrollbar-thumb::before {
+        content: "";
+        position: absolute;
+        border-radius: 999px;
+        background: var(--scrollbar-thumb);
+        transition: background-color 120ms ease, width 120ms ease, height 120ms ease, right 120ms ease, bottom 120ms ease;
+    }
+    .ade-scrollbar[data-orientation="vertical"] .ade-scrollbar-thumb::before { top: 0; bottom: 0; right: 3px; width: 6px; }
+    .ade-scrollbar[data-orientation="horizontal"] .ade-scrollbar-thumb::before { left: 0; right: 0; bottom: 3px; height: 6px; }
+    .ade-scrollbar[data-dragging]::before { opacity: 1; }
+    .ade-scrollbar[data-dragging] .ade-scrollbar-thumb::before { background: var(--scrollbar-thumb-active); }
+    .ade-scrollbar[data-orientation="vertical"][data-dragging] .ade-scrollbar-thumb::before { right: 2px; width: 8px; }
+    .ade-scrollbar[data-orientation="horizontal"][data-dragging] .ade-scrollbar-thumb::before { bottom: 2px; height: 8px; }
+    @media (hover: hover) {
+        .ade-scrollbar:hover::before { opacity: 1; }
+        .ade-scrollbar:hover:not([data-dragging]) .ade-scrollbar-thumb::before { background: var(--scrollbar-thumb-hover); }
+        .ade-scrollbar[data-orientation="vertical"]:hover .ade-scrollbar-thumb::before { right: 2px; width: 8px; }
+        .ade-scrollbar[data-orientation="horizontal"]:hover .ade-scrollbar-thumb::before { bottom: 2px; height: 8px; }
+    }
+    /* A finger needs a wider target and a thicker pill. Only the thumb takes a touch, so a tap near the
+       edge still reaches the row under the bar. */
+    @media (pointer: coarse) {
+        .ade-scrollbar { --scrollbar-size: 20px; }
+        .ade-scrollbar[data-visible] { pointer-events: none; }
+        .ade-scrollbar[data-visible] .ade-scrollbar-thumb { pointer-events: auto; }
+        .ade-scrollbar[data-orientation="vertical"] .ade-scrollbar-thumb::before { right: 2px; width: 8px; }
+        .ade-scrollbar[data-orientation="horizontal"] .ade-scrollbar-thumb::before { bottom: 2px; height: 8px; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .ade-scrollbar, .ade-scrollbar::before, .ade-scrollbar-thumb::before { transition: none; }
+    }
+}