@adecore/ui 0.53.3 → 0.54.1

package/src/Stepper.tsx

@@ -1,6 +1,6 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
 import { Minus, Plus } from 'lucide-react';
+import type { Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ButtonGroup } from './ButtonGroup.tsx';
 import { formatFixed } from './format/number.ts';

package/src/Surface.tsx

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 
 const FLOAT = 'border border-border bg-[color-mix(in_srgb,var(--surface-raised)_88%,transparent)] shadow-float backdrop-blur-[14px]';
 

package/src/Switch.tsx

@@ -1,6 +1,6 @@
-import type { Ref } from 'react';
-import clsx from 'clsx';
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import clsx from 'clsx';
+import type { Ref } from 'react';
 
 export interface SwitchProps {
     checked: boolean;

package/src/TextMenu.tsx

@@ -1,11 +1,11 @@
-import { useRef, useState, type ComponentProps, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from 'react';
 import { Copy, Scan } from 'lucide-react';
+import { useRef, useState, type ComponentProps, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { copyText } from './clipboard.ts';
 import { Icon } from './Icon.tsx';
 import { Kbd } from './Kbd.tsx';
-import { mergeRefs } from './merge-refs.ts';
 import { ContextMenuRoot, ContextMenuTrigger, MenuItem, MenuPopup, MenuSeparator } from './menu/parts.tsx';
+import { mergeRefs } from './merge-refs.ts';
 import { isApplePlatform } from './platform.ts';
 import { selectAllWithin, selectionWithin } from './selection.ts';
 import { EDIT_SHORTCUTS, matchesShortcut } from './shortcut.ts';

package/src/Tile.tsx

@@ -1,5 +1,5 @@
-import type { ComponentProps, ReactNode } from 'react';
 import clsx from 'clsx';
+import type { ComponentProps, ReactNode } from 'react';
 import { Kbd } from './Kbd.tsx';
 import type { Shortcut } from './shortcut.ts';
 

package/src/Toasts.tsx

@@ -1,7 +1,7 @@
-import { useState, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
 import { CircleAlert, CircleCheck, Trash, X } from 'lucide-react';
+import { useState, type ReactNode, type Ref } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
 import { Button } from './Button.tsx';
 import { Icon } from './Icon.tsx';

package/src/Tooltip.tsx

@@ -1,8 +1,8 @@
-import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Kbd } from './Kbd.tsx';
-import type { Shortcut } from './shortcut.ts';
 import { registerShortcutHint } from './shortcut-hints.ts';
+import type { Shortcut } from './shortcut.ts';
 
 export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
 

package/src/UIProvider.tsx

@@ -1,5 +1,5 @@
-import { useLayoutEffect, useState, type ReactNode } from 'react';
 import type { i18n as I18n } from 'i18next';
+import { useLayoutEffect, useState, type ReactNode } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { setFormatSource, type FormatSource } from './format/locale.ts';
 import { addUiResources } from './locales.ts';

package/src/Waveform.tsx

@@ -1,5 +1,5 @@
-import { useRef, type KeyboardEvent, type PointerEvent, type Ref } from 'react';
 import clsx from 'clsx';
+import { useRef, type KeyboardEvent, type PointerEvent, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatClockDuration } from './format/duration.ts';
 import { mergeRefs } from './merge-refs.ts';

package/src/Wipe.tsx

@@ -1,8 +1,8 @@
-import { useRef, type KeyboardEvent, type PointerEvent, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
 import { ChevronsLeftRight } from 'lucide-react';
-import { Icon } from './Icon.tsx';
+import { useRef, type KeyboardEvent, type PointerEvent, type ReactNode, type Ref } from 'react';
 import { formatPercent } from './format/number.ts';
+import { Icon } from './Icon.tsx';
 import { mergeRefs } from './merge-refs.ts';
 import { splitAt, splitForKey } from './wipe-split.ts';
 

package/src/ZoomControls.tsx

@@ -1,6 +1,6 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
 import { Maximize, Minus, Plus, Scan, type LucideIcon } from 'lucide-react';
+import type { Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ButtonGroup } from './ButtonGroup.tsx';
 import { Icon } from './Icon.tsx';

package/src/combobox/parts.tsx

@@ -1,16 +1,18 @@
-import type { ComponentProps, ReactNode } from 'react';
+import { Autocomplete } from '@base-ui/react/autocomplete';
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react';
+import { useState, type ComponentProps, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Autocomplete } from '@base-ui/react/autocomplete';
 import { withClass } from '../class-name.ts';
 import { fieldControlProps, useFieldControl } from '../field-context.ts';
 import { Icon } from '../Icon.tsx';
 import { Kbd } from '../Kbd.tsx';
 import { MENU_LABEL } from '../menu/parts.tsx';
+import { mergeRefs } from '../merge-refs.ts';
 import { splitPlacement, type PlacementKey } from '../placement.ts';
 import { renderPositioner } from '../popup-layer.ts';
 import type { Shortcut } from '../shortcut.ts';
+import { useOverlayScrollbars } from '../useOverlayScrollbars.tsx';
 
 /* It takes no room while it has nothing to say. */
 const LIST_NOTE = 'text-center text-xs text-text-faint not-empty:px-3 not-empty:py-4';
@@ -63,13 +65,16 @@ type Placement = Pick<ComponentProps<typeof Autocomplete.Positioner>, PlacementK
 
 export type ComboboxPopupProps = ComponentProps<typeof Autocomplete.Popup> & Placement;
 
-export function ComboboxPopup({ side = 'bottom', align = 'start', sideOffset = 6, className, ...props }: ComboboxPopupProps) {
+export function ComboboxPopup({ side = 'bottom', align = 'start', sideOffset = 6, className, ref, ...props }: ComboboxPopupProps) {
     const [placement, popupProps] = splitPlacement(props);
+    const [popup, setPopup] = useState<HTMLDivElement | null>(null);
+    const scrollbars = useOverlayScrollbars(popup);
 
     return (
         <Autocomplete.Portal>
             <Autocomplete.Positioner className="popup-positioner" render={renderPositioner} {...placement} side={side} align={align} sideOffset={sideOffset}>
-                <Autocomplete.Popup className={withClass('menu-popup min-w-(--anchor-width)', className)} {...popupProps} />
+                <Autocomplete.Popup ref={mergeRefs(setPopup, ref)} className={withClass('menu-popup min-w-(--anchor-width)', className)} {...popupProps} />
+                {scrollbars}
             </Autocomplete.Positioner>
         </Autocomplete.Portal>
     );

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-icon.ts

@@ -30,12 +30,27 @@ const resolveIcon: ReturnType<typeof createFileTreeIconResolver>['resolveIcon']
 export const fileIconFor = (path: string): string => resolveIcon('file-tree-icon-file', path).name;
 
 let override: ((path: string) => string | null) | null = null;
+let overrideVersion = 0;
+const overrideListeners = new Set<() => void>();
 
 /* What an app knows better about a file's icon: the address of an svg, or null for the icon this set has. */
 export function setFileIconOverride(next: ((path: string) => string | null) | null): void {
     override = next;
+    overrideVersion++;
+    overrideListeners.forEach((listener) => listener());
 }
 
+export function subscribeFileIconOverride(onChange: () => void): () => void {
+    overrideListeners.add(onChange);
+
+    return () => {
+        overrideListeners.delete(onChange);
+    };
+}
+
+/* A mounted icon reads this so it draws again once the override changes. */
+export const fileIconOverrideVersion = (): number => overrideVersion;
+
 export function fileIconOverrideFor(path: string): string | null {
     return override?.(path) ?? null;
 }

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