@adecore/ui 0.53.3 → 0.54.1

package/dist/settings/SettingsDialog.js

@@ -1,20 +1,34 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useMemo, useRef, useState } 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 } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { CloseButton } from "../CloseButton.js";
 import { DialogDescription, DialogPopup, DialogRoot, DialogTitle } from "../dialog/parts.js";
 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 { LazyBoundary } from "../LazyBoundary.js";
+import { ScrollArea } from "../ScrollArea.js";
 import { Select } from "../Select.js";
 import { SettingsTargetContext } from './target.js';
-/* How far a pane with a hero scrolls before the title bar over it is filled in. */
+/* A pane that is not split scrolls as one column: the panel's own props land on the viewport, which stays the tab panel. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function renderScrollingPanel({
+  ref,
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(ScrollArea, {
+    ref: ref,
+    className: "min-h-0 min-w-0 grow",
+    viewportClassName: className,
+    ...props
+  });
+}
+/* How far a pane with a hero scrolls before the title bar over it is filled in. */
 const BAR_FILL_DISTANCE = 70;
 const NAV_ITEM = 'flex h-8 min-w-0 shrink-0 items-center gap-2.5 rounded-md px-2.5 text-sm focus-visible:-outline-offset-2 text-text-muted hover:bg-surface-hover hover:text-text data-active:bg-surface-active data-active:text-text';
 function NavTab(t0) {
@@ -121,9 +135,9 @@ function SettingsNav(t0) {
   }
   let t5;
   if ($[6] !== t4) {
-    t5 = /*#__PURE__*/_jsx("div", {
-      ref: list,
-      className: "scroll-fade-y flex min-h-0 flex-col gap-3.5 overflow-y-auto",
+    t5 = /*#__PURE__*/_jsx(ScrollArea, {
+      viewportRef: list,
+      viewportClassName: "scroll-fade-y flex flex-col gap-3.5",
       children: t4
     });
     $[6] = t4;
@@ -349,8 +363,9 @@ function SearchResults({
       })
     });
   }
-  return /*#__PURE__*/_jsx("ul", {
-    className: "flex min-h-0 flex-col gap-0.5 overflow-y-auto",
+  return /*#__PURE__*/_jsx(ScrollArea, {
+    render: /*#__PURE__*/_jsx("ul", {}),
+    viewportClassName: "flex flex-col gap-0.5",
     "aria-label": t('settings.search.results'),
     children: results.map(result => /*#__PURE__*/_jsx("li", {
       children: /*#__PURE__*/_jsxs("button", {
@@ -751,7 +766,8 @@ export function SettingsDialog(t0) {
       return /*#__PURE__*/_jsx(Tabs.Panel, {
         value: entry_2.id,
         keepMounted: false,
-        className: clsx("flex min-h-0 min-w-0 grow flex-col outline-none", !entry_2.split && "gap-7 overflow-y-auto px-8 pb-10 max-[960px]:px-4", !entry_2.split && !Hero && "scroll-fade-top pt-1"),
+        className: clsx("flex min-h-0 min-w-0 grow flex-col outline-none", !entry_2.split && "gap-7 px-8 pb-10 max-[960px]:px-4", !entry_2.split && !Hero && "scroll-fade-top pt-1"),
+        render: entry_2.split ? undefined : renderScrollingPanel,
         onScroll: event => {
           const top = event.currentTarget.scrollTop;
           event.currentTarget.toggleAttribute("data-fade-start", top > 0);

package/dist/settings/SettingsRow.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode, type Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import { type ReactNode, type Ref } from 'react';
 export interface SettingsRowProps {
     label: ReactNode;
     description?: ReactNode;

package/dist/settings/SettingsRow.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useRef } from 'react';
 import clsx from 'clsx';
+import { useEffect, useRef } from 'react';
 import { Icon } from "../Icon.js";
 import { mergeRefs } from '../merge-refs.js';
 import { useSettingsTarget } from './target.js';

package/dist/settings/SettingsSection.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode, Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import type { ReactNode, Ref } from 'react';
 export interface SettingsSectionProps {
     title?: string;
     description?: ReactNode;

package/dist/tabs/parts.d.ts

@@ -1,6 +1,6 @@
-import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 import { useRender } from '@base-ui/react/use-render';
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 export type TabsValue = BaseTabs.Tab.Value;
 export type TabsVariant = 'line' | 'pill';
 export type TabsRootProps = Omit<ComponentProps<typeof BaseTabs.Root>, 'onValueChange'> & {

package/dist/tabs/parts.js

@@ -1,10 +1,10 @@
 import { c as _c } from "react/compiler-runtime";
-import { Children, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+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, isValidElement, useContext, useEffect, useLayoutEffect, useRef, useState } from '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.js';
 import { formatNumber } from '../format/number.js';
 import { Icon } from "../Icon.js";

package/dist/testing/dedupe.js

@@ -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,
  * i18next or Base UI breaks every hook, word and compound part. Bun has no dedupe and its resolve hook

package/dist/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/dist/tree/parts.js

@@ -1,8 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
-import 'react';
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 import { ChevronRight } from 'lucide-react';
+import 'react';
 import { useTranslation } from 'react-i18next';
 import { Checkbox as UICheckbox } from "../Checkbox.js";
 import { Icon } from "../Icon.js";

package/dist/useOverlayScrollbars.d.ts

@@ -0,0 +1,7 @@
+import { type ReactElement } from 'react';
+export type ScrollAreaAxis = 'y' | 'x' | 'both';
+export interface OverlayScrollbarsOptions {
+    axis?: ScrollAreaAxis;
+}
+export declare const SCROLLBAR_LINGER_MS = 600;
+export declare function useOverlayScrollbars(viewport: HTMLElement | null, { axis }?: OverlayScrollbarsOptions): ReactElement;

package/dist/useOverlayScrollbars.js

@@ -0,0 +1,281 @@
+import { c as _c } from "react/compiler-runtime";
+import { useLayoutEffect, useState } from 'react';
+import { overflows, pageToward, scrollAfterDrag, thumbOf } from './scrollbar-geometry.js';
+/* How long the bars stay after the last scroll, or after the pointer left a bar. */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+/*
+ * 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, t0) {
+  const $ = _c(14);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === undefined ? {} : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const {
+    axis: t2
+  } = t1;
+  const axis = t2 === undefined ? "y" : t2;
+  const [vertical, setVertical] = useState(null);
+  const [horizontal, setHorizontal] = useState(null);
+  let t3;
+  let t4;
+  if ($[2] !== horizontal || $[3] !== vertical || $[4] !== viewport) {
+    t3 = () => {
+      if (viewport === null) {
+        return;
+      }
+      const bars = [vertical, horizontal].filter(_temp).map(element_0 => ({
+        element: element_0,
+        thumb: element_0.firstElementChild,
+        vertical: element_0 === vertical
+      }));
+      let overBar = false;
+      let dragging = false;
+      let lingering = false;
+      let lingerTimer = 0;
+      const metricsOf = bar => 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_0 => bar_0.vertical ? viewport.scrollTop : viewport.scrollLeft;
+      const show = () => {
+        const visible = overBar || dragging || lingering;
+        for (const bar_1 of bars) {
+          bar_1.element.toggleAttribute("data-visible", visible);
+        }
+      };
+      const layout = () => {
+        const overflowing = bars.map(bar_2 => bar_2.vertical ? overflows(viewport.clientHeight, viewport.scrollHeight) : overflows(viewport.clientWidth, viewport.scrollWidth));
+        const corner = overflowing.length === 2 && overflowing.every(Boolean);
+        bars.forEach((bar_3, index) => {
+          bar_3.element.toggleAttribute("data-overflow", overflowing[index]);
+          bar_3.element.toggleAttribute("data-corner", corner);
+        });
+        bars.forEach((bar_4, index_0) => {
+          if (!overflowing[index_0]) {
+            return;
+          }
+          const {
+            size,
+            offset
+          } = thumbOf(metricsOf(bar_4), positionOf(bar_4));
+          if (bar_4.vertical) {
+            bar_4.thumb.style.height = `${size}px`;
+            bar_4.thumb.style.translate = `0 ${offset}px`;
+          } else {
+            bar_4.thumb.style.width = `${size}px`;
+            bar_4.thumb.style.translate = `${offset}px 0`;
+          }
+        });
+      };
+      const linger = () => {
+        lingering = true;
+        window.clearTimeout(lingerTimer);
+        lingerTimer = window.setTimeout(() => {
+          lingering = false;
+          show();
+        }, SCROLLBAR_LINGER_MS);
+        show();
+      };
+      const onScroll = () => {
+        layout();
+        linger();
+      };
+      const onBarEnter = event => {
+        if (event.pointerType !== "touch") {
+          overBar = true;
+          show();
+        }
+      };
+      const onBarLeave = () => {
+        if (overBar) {
+          overBar = false;
+          linger();
+        }
+      };
+      const reducedMotion = _temp2;
+      const pressHandlers = bars.map(bar_5 => {
+        const onThumbDown = event_0 => {
+          if (event_0.button !== 0) {
+            return;
+          }
+          event_0.preventDefault();
+          event_0.stopPropagation();
+          bar_5.thumb.setPointerCapture(event_0.pointerId);
+          const metrics = metricsOf(bar_5);
+          const from = bar_5.vertical ? event_0.clientY : event_0.clientX;
+          const start = positionOf(bar_5);
+          dragging = true;
+          bar_5.element.setAttribute("data-dragging", "");
+          viewport.setAttribute("data-scrollbar-dragging", "");
+          show();
+          const onMove = move => {
+            const next = scrollAfterDrag(metrics, start, (bar_5.vertical ? move.clientY : move.clientX) - from);
+            if (bar_5.vertical) {
+              viewport.scrollTop = next;
+            } else {
+              viewport.scrollLeft = next;
+            }
+          };
+          const onEnd = () => {
+            bar_5.thumb.removeEventListener("pointermove", onMove);
+            bar_5.thumb.removeEventListener("pointerup", onEnd);
+            bar_5.thumb.removeEventListener("pointercancel", onEnd);
+            bar_5.thumb.removeEventListener("lostpointercapture", onEnd);
+            dragging = false;
+            bar_5.element.removeAttribute("data-dragging");
+            viewport.removeAttribute("data-scrollbar-dragging");
+            linger();
+          };
+          bar_5.thumb.addEventListener("pointermove", onMove);
+          bar_5.thumb.addEventListener("pointerup", onEnd);
+          bar_5.thumb.addEventListener("pointercancel", onEnd);
+          bar_5.thumb.addEventListener("lostpointercapture", onEnd);
+        };
+        const onThumbTouch = _temp3;
+        const onTrackDown = event_2 => {
+          if (event_2.button !== 0) {
+            return;
+          }
+          event_2.preventDefault();
+          const thumb = bar_5.thumb.getBoundingClientRect();
+          const delta = bar_5.vertical ? pageToward(event_2.clientY, thumb.top, thumb.bottom, viewport.clientHeight) : pageToward(event_2.clientX, thumb.left, thumb.right, viewport.clientWidth);
+          if (delta === 0) {
+            return;
+          }
+          const behavior = reducedMotion() ? "instant" : "smooth";
+          viewport.scrollBy(bar_5.vertical ? {
+            top: delta,
+            behavior
+          } : {
+            left: delta,
+            behavior
+          });
+        };
+        bar_5.thumb.addEventListener("pointerdown", onThumbDown);
+        bar_5.thumb.addEventListener("touchstart", onThumbTouch, {
+          passive: false
+        });
+        bar_5.element.addEventListener("pointerdown", onTrackDown);
+        bar_5.element.addEventListener("pointerenter", onBarEnter);
+        bar_5.element.addEventListener("pointerleave", onBarLeave);
+        return () => {
+          bar_5.thumb.removeEventListener("pointerdown", onThumbDown);
+          bar_5.thumb.removeEventListener("touchstart", onThumbTouch);
+          bar_5.element.removeEventListener("pointerdown", onTrackDown);
+          bar_5.element.removeEventListener("pointerenter", onBarEnter);
+          bar_5.element.removeEventListener("pointerleave", onBarLeave);
+        };
+      });
+      const sizes = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(layout);
+      sizes?.observe(viewport);
+      const observeContent = () => {
+        for (const child of viewport.children) {
+          sizes?.observe(child);
+        }
+      };
+      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);
+      };
+    };
+    t4 = [viewport, vertical, horizontal];
+    $[2] = horizontal;
+    $[3] = vertical;
+    $[4] = viewport;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t3 = $[5];
+    t4 = $[6];
+  }
+  useLayoutEffect(t3, t4);
+  let t5;
+  if ($[7] !== axis) {
+    t5 = axis !== "x" && /*#__PURE__*/_jsx("div", {
+      ref: setVertical,
+      "aria-hidden": true,
+      className: "ade-scrollbar",
+      "data-orientation": "vertical",
+      children: /*#__PURE__*/_jsx("div", {
+        className: "ade-scrollbar-thumb"
+      })
+    });
+    $[7] = axis;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== axis) {
+    t6 = axis !== "y" && /*#__PURE__*/_jsx("div", {
+      ref: setHorizontal,
+      "aria-hidden": true,
+      className: "ade-scrollbar",
+      "data-orientation": "horizontal",
+      children: /*#__PURE__*/_jsx("div", {
+        className: "ade-scrollbar-thumb"
+      })
+    });
+    $[9] = axis;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== t5 || $[12] !== t6) {
+    t7 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t5, t6]
+    });
+    $[11] = t5;
+    $[12] = t6;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  return t7;
+}
+function _temp3(event_1) {
+  event_1.preventDefault();
+}
+function _temp2() {
+  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+}
+function _temp(element) {
+  return element !== null;
+}

package/dist/workspace/PaneBar.js

@@ -1,8 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import clsx from 'clsx';
 import { MoreHorizontal } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { CloseButton } from "../CloseButton.js";
 import * as ContextMenu from '../context-menu/index.parts.js';

package/dist/workspace/SplitView.d.ts

@@ -1,5 +1,5 @@
-import { type DragEvent, type ReactNode } from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import { type DragEvent, type ReactNode } from 'react';
 import { type WorkspaceLayout } from './context.ts';
 import { type SplitEdges, type SplitMinimum, type SplitRect } from './geometry.ts';
 import { type SplitCommand, type SplitLayout, type SplitPane } from './model.ts';

package/dist/workspace/SplitView.js

@@ -1,16 +1,16 @@
 import { c as _c } from "react/compiler-runtime";
-import { useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import { GripVertical, Maximize2, Minimize2 } from 'lucide-react';
 import clsx from 'clsx';
+import { GripVertical, Maximize2, Minimize2 } from 'lucide-react';
+import { useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from "../IconButton.js";
 import { WorkspaceContext } from './context.js';
+import { DropPreview } from "./DropPreview.js";
 import { paneRadius, resizeSplit, splitGeometry, splitSideAt, tabGapAt } from './geometry.js';
 import { splitPanes, updateSplitLayout } from './model.js';
-import { TabStrip } from "./TabStrip.js";
-import { DropPreview } from "./DropPreview.js";
 import { rectDropPreview, sameDropPreview, tabDropPreview } from './preview.js';
+import { TabStrip } from "./TabStrip.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const ZERO = {
   width: 0,

package/dist/workspace/TabStrip.d.ts

@@ -1,5 +1,5 @@
-import { type DragEvent, type MouseEvent, type ReactNode } from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import { type DragEvent, type MouseEvent, type ReactNode } from 'react';
 import { type IconButtonProps } from '../IconButton.tsx';
 export interface TabStripItem {
     id: string;

package/dist/workspace/TabStrip.js

@@ -1,8 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
-import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import { Pin, X } from 'lucide-react';
 import clsx from 'clsx';
+import { Pin, X } from 'lucide-react';
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from "../Icon.js";
 import { IconButton } from "../IconButton.js";

package/dist/workspace/Workspace.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import { type ReactNode } from 'react';
 import { type WorkspaceLayout } from './context.ts';
 export interface WorkspaceProps extends useRender.ComponentProps<'div'> {
     layout?: WorkspaceLayout;

package/dist/workspace/Workspace.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
-import { useState } from 'react';
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { useState } from 'react';
 import { TopRowSlotContext, WorkspaceContext } from './context.js';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const isPresent = node => node !== undefined && node !== null && node !== false;

package/dist/workspace/WorkspaceRail.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
+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';
 /**
  * The column of buttons at the right edge of a `Workspace`, 48 pixels wide. Its first separator stands on
  * the top row's bottom line when one 32 pixel button comes before it. It makes no stacking context, so a

package/dist/workspace/WorkspaceTopRow.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { useContext } from 'react';
 import clsx from 'clsx';
+import { useContext } from 'react';
 import { TopRowSlotContext } from './context.js';
 /**
  * The 47 pixel band at the top of a `Workspace`'s sheet, as its `toolbar`: the project, and beside it the

package/package.json

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