@adecore/ui 0.53.3 → 0.54.1

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

package/src/tree/parts.tsx

@@ -1,7 +1,7 @@
-import { type MouseEvent } from 'react';
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 import { ChevronRight } from 'lucide-react';
+import { type MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Checkbox as UICheckbox, type CheckboxProps } from '../Checkbox.tsx';
 import { Icon } from '../Icon.tsx';

package/src/useOverlayScrollbars.tsx

@@ -0,0 +1,263 @@
+import { useLayoutEffect, useState, type ReactElement } from 'react';
+import { overflows, pageToward, scrollAfterDrag, thumbOf, type ScrollMetrics } from './scrollbar-geometry.ts';
+
+export type ScrollAreaAxis = 'y' | 'x' | 'both';
+
+export interface OverlayScrollbarsOptions {
+    /* The directions that get a bar. */
+    axis?: ScrollAreaAxis;
+}
+
+/* How long the bars stay after the last scroll, or after the pointer left a bar. */
+export const SCROLLBAR_LINGER_MS = 600;
+
+/* The theme hides the native bar of a scroller that carries this attribute. */
+const OVERLAY_ATTRIBUTE = 'data-overlay-scrollbars';
+
+interface Bar {
+    readonly element: HTMLElement;
+    readonly thumb: HTMLElement;
+    readonly vertical: boolean;
+}
+
+/*
+ * Draws thin bars over `viewport`, a scroller that stays native, so wheel, keys, `scrollIntoView` and
+ * a virtualizer keep working on it. Put the returned element in a positioned ancestor whose box is
+ * the viewport's: the bars lie along its right and bottom edges.
+ */
+export function useOverlayScrollbars(viewport: HTMLElement | null, { axis = 'y' }: OverlayScrollbarsOptions = {}): ReactElement {
+    const [vertical, setVertical] = useState<HTMLDivElement | null>(null);
+    const [horizontal, setHorizontal] = useState<HTMLDivElement | null>(null);
+
+    useLayoutEffect(() => {
+        if (viewport === null) {
+            return;
+        }
+
+        const bars: Bar[] = [vertical, horizontal]
+            .filter((element) => element !== null)
+            .map((element) => ({ element, thumb: element.firstElementChild as HTMLElement, vertical: element === vertical }));
+
+        let overBar = false;
+        let dragging = false;
+        let lingering = false;
+        let lingerTimer = 0;
+
+        const metricsOf = (bar: Bar): ScrollMetrics =>
+            bar.vertical
+                ? { track: bar.element.clientHeight, view: viewport.clientHeight, content: viewport.scrollHeight }
+                : { track: bar.element.clientWidth, view: viewport.clientWidth, content: viewport.scrollWidth };
+
+        const positionOf = (bar: Bar): number => (bar.vertical ? viewport.scrollTop : viewport.scrollLeft);
+
+        const show = (): void => {
+            const visible = overBar || dragging || lingering;
+
+            for (const bar of bars) {
+                bar.element.toggleAttribute('data-visible', visible);
+            }
+        };
+
+        const layout = (): void => {
+            const overflowing = bars.map((bar) =>
+                bar.vertical ? overflows(viewport.clientHeight, viewport.scrollHeight) : overflows(viewport.clientWidth, viewport.scrollWidth)
+            );
+
+            const corner = overflowing.length === 2 && overflowing.every(Boolean);
+
+            bars.forEach((bar, index) => {
+                bar.element.toggleAttribute('data-overflow', overflowing[index]);
+                bar.element.toggleAttribute('data-corner', corner);
+            });
+
+            bars.forEach((bar, index) => {
+                if (!overflowing[index]) {
+                    return;
+                }
+
+                const { size, offset } = thumbOf(metricsOf(bar), positionOf(bar));
+
+                if (bar.vertical) {
+                    bar.thumb.style.height = `${size}px`;
+                    bar.thumb.style.translate = `0 ${offset}px`;
+                } else {
+                    bar.thumb.style.width = `${size}px`;
+                    bar.thumb.style.translate = `${offset}px 0`;
+                }
+            });
+        };
+
+        const linger = (): void => {
+            lingering = true;
+            window.clearTimeout(lingerTimer);
+
+            lingerTimer = window.setTimeout(() => {
+                lingering = false;
+                show();
+            }, SCROLLBAR_LINGER_MS);
+
+            show();
+        };
+
+        const onScroll = (): void => {
+            layout();
+            linger();
+        };
+
+        // Only a scroll brings the bars; a bar the pointer reached while they showed keeps them, since a hidden one takes no pointer.
+        const onBarEnter = (event: PointerEvent): void => {
+            if (event.pointerType !== 'touch') {
+                overBar = true;
+                show();
+            }
+        };
+
+        const onBarLeave = (): void => {
+            if (overBar) {
+                overBar = false;
+                linger();
+            }
+        };
+
+        const reducedMotion = (): boolean => window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+
+        const pressHandlers = bars.map((bar) => {
+            const onThumbDown = (event: PointerEvent): void => {
+                if (event.button !== 0) {
+                    return;
+                }
+
+                // The press belongs to the thumb: no text selection, no page from the track under it.
+                event.preventDefault();
+                event.stopPropagation();
+                bar.thumb.setPointerCapture(event.pointerId);
+
+                const metrics = metricsOf(bar);
+                const from = bar.vertical ? event.clientY : event.clientX;
+                const start = positionOf(bar);
+                dragging = true;
+                bar.element.setAttribute('data-dragging', '');
+                viewport.setAttribute('data-scrollbar-dragging', '');
+                show();
+
+                const onMove = (move: PointerEvent): void => {
+                    const next = scrollAfterDrag(metrics, start, (bar.vertical ? move.clientY : move.clientX) - from);
+
+                    if (bar.vertical) {
+                        viewport.scrollTop = next;
+                    } else {
+                        viewport.scrollLeft = next;
+                    }
+                };
+
+                const onEnd = (): void => {
+                    bar.thumb.removeEventListener('pointermove', onMove);
+                    bar.thumb.removeEventListener('pointerup', onEnd);
+                    bar.thumb.removeEventListener('pointercancel', onEnd);
+                    bar.thumb.removeEventListener('lostpointercapture', onEnd);
+                    dragging = false;
+                    bar.element.removeAttribute('data-dragging');
+                    viewport.removeAttribute('data-scrollbar-dragging');
+                    linger();
+                };
+
+                bar.thumb.addEventListener('pointermove', onMove);
+                bar.thumb.addEventListener('pointerup', onEnd);
+                bar.thumb.addEventListener('pointercancel', onEnd);
+                bar.thumb.addEventListener('lostpointercapture', onEnd);
+            };
+
+            // WebKit on iOS starts a text selection on a long press whatever the pointer events do; only the touch itself can be refused.
+            const onThumbTouch = (event: TouchEvent): void => {
+                event.preventDefault();
+            };
+
+            const onTrackDown = (event: PointerEvent): void => {
+                if (event.button !== 0) {
+                    return;
+                }
+
+                event.preventDefault();
+                const thumb = bar.thumb.getBoundingClientRect();
+
+                const delta = bar.vertical
+                    ? pageToward(event.clientY, thumb.top, thumb.bottom, viewport.clientHeight)
+                    : pageToward(event.clientX, thumb.left, thumb.right, viewport.clientWidth);
+
+                if (delta === 0) {
+                    return;
+                }
+
+                const behavior = reducedMotion() ? 'instant' : 'smooth';
+                viewport.scrollBy(bar.vertical ? { top: delta, behavior } : { left: delta, behavior });
+            };
+
+            bar.thumb.addEventListener('pointerdown', onThumbDown);
+            bar.thumb.addEventListener('touchstart', onThumbTouch, { passive: false });
+            bar.element.addEventListener('pointerdown', onTrackDown);
+            bar.element.addEventListener('pointerenter', onBarEnter);
+            bar.element.addEventListener('pointerleave', onBarLeave);
+
+            return () => {
+                bar.thumb.removeEventListener('pointerdown', onThumbDown);
+                bar.thumb.removeEventListener('touchstart', onThumbTouch);
+                bar.element.removeEventListener('pointerdown', onTrackDown);
+                bar.element.removeEventListener('pointerenter', onBarEnter);
+                bar.element.removeEventListener('pointerleave', onBarLeave);
+            };
+        });
+
+        // A document without layout, such as a test's, has no observers; the bars then follow the scroll alone.
+        const sizes = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(layout);
+        sizes?.observe(viewport);
+
+        const observeContent = (): void => {
+            for (const child of viewport.children) {
+                sizes?.observe(child);
+            }
+        };
+
+        // A row added to the content changes what scrolls without resizing the rows already observed.
+        const content =
+            typeof MutationObserver === 'undefined'
+                ? null
+                : new MutationObserver(() => {
+                      observeContent();
+                      layout();
+                  });
+
+        content?.observe(viewport, { childList: true });
+        observeContent();
+        viewport.setAttribute(OVERLAY_ATTRIBUTE, '');
+        viewport.addEventListener('scroll', onScroll, { passive: true });
+        layout();
+
+        return () => {
+            for (const release of pressHandlers) {
+                release();
+            }
+
+            sizes?.disconnect();
+            content?.disconnect();
+            window.clearTimeout(lingerTimer);
+            viewport.removeAttribute(OVERLAY_ATTRIBUTE);
+            viewport.removeAttribute('data-scrollbar-dragging');
+            viewport.removeEventListener('scroll', onScroll);
+        };
+    }, [viewport, vertical, horizontal]);
+
+    return (
+        <>
+            {axis !== 'x' && (
+                <div ref={setVertical} aria-hidden className="ade-scrollbar" data-orientation="vertical">
+                    <div className="ade-scrollbar-thumb" />
+                </div>
+            )}
+            {axis !== 'y' && (
+                <div ref={setHorizontal} aria-hidden className="ade-scrollbar" data-orientation="horizontal">
+                    <div className="ade-scrollbar-thumb" />
+                </div>
+            )}
+        </>
+    );
+}

package/src/workspace/DropPreview.tsx

@@ -1,5 +1,5 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
+import type { Ref } from 'react';
 import { dropPreviewPath, type DropPreviewShape } from './preview.ts';
 
 export interface DropPreviewProps {

package/src/workspace/PaneBar.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState, type ComponentProps, type DragEvent, type ReactNode, type RefObject } from 'react';
-import { createPortal } from 'react-dom';
 import clsx from 'clsx';
 import { MoreHorizontal } from 'lucide-react';
+import { useEffect, useRef, useState, type ComponentProps, type DragEvent, type ReactNode, type RefObject } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { CloseButton } from '../CloseButton.tsx';
 import * as ContextMenu from '../context-menu/index.parts.ts';

package/src/workspace/SplitView.tsx

@@ -1,3 +1,6 @@
+import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { GripVertical, Maximize2, Minimize2 } from 'lucide-react';
 import {
     useCallback,
     useContext,
@@ -12,12 +15,10 @@ import {
     type KeyboardEvent,
     type ReactNode
 } from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { GripVertical, Maximize2, Minimize2 } from 'lucide-react';
-import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from '../IconButton.tsx';
 import { WorkspaceContext, type WorkspaceLayout } from './context.ts';
+import { DropPreview } from './DropPreview.tsx';
 import {
     paneRadius,
     resizeSplit,
@@ -30,9 +31,8 @@ import {
     type SplitRect
 } from './geometry.ts';
 import { splitPanes, updateSplitLayout, type SplitCommand, type SplitLayout, type SplitPane } from './model.ts';
-import { TabStrip, type TabStripItem, type TabStripProps } from './TabStrip.tsx';
-import { DropPreview } from './DropPreview.tsx';
 import { rectDropPreview, sameDropPreview, tabDropPreview, type DropPreviewShape } from './preview.ts';
+import { TabStrip, type TabStripItem, type TabStripProps } from './TabStrip.tsx';
 
 export interface SplitViewInfo {
     paneId: string;

package/src/workspace/TabStrip.tsx

@@ -1,3 +1,6 @@
+import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { Pin, X } from 'lucide-react';
 import {
     createContext,
     useContext,
@@ -12,9 +15,6 @@ import {
     type UIEvent,
     type WheelEvent
 } from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { Pin, X } from 'lucide-react';
-import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Icon } from '../Icon.tsx';
 import { IconButton, type IconButtonProps } from '../IconButton.tsx';

package/src/workspace/Workspace.tsx

@@ -1,6 +1,6 @@
-import { useState, type ReactNode } from 'react';
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { useState, type ReactNode } from 'react';
 import { TopRowSlotContext, WorkspaceContext, type WorkspaceLayout } from './context.ts';
 
 export interface WorkspaceProps extends useRender.ComponentProps<'div'> {

package/src/workspace/WorkspaceRail.tsx

@@ -1,6 +1,6 @@
+import { useRender } from '@base-ui/react/use-render';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { useRender } from '@base-ui/react/use-render';
 
 export type WorkspaceRailProps = useRender.ComponentProps<'nav'>;
 

package/src/workspace/WorkspaceTopRow.tsx

@@ -1,5 +1,5 @@
-import { useContext, type ComponentProps, type ReactNode } from 'react';
 import clsx from 'clsx';
+import { useContext, type ComponentProps, type ReactNode } from 'react';
 import { TopRowSlotContext } from './context.ts';
 
 export interface WorkspaceTopRowProps extends Omit<ComponentProps<'header'>, 'children'> {