@adecore/ui 0.53.2 → 0.54.0

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.2",
+  "version": "0.54.0",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/AccentSwatches.tsx

@@ -1,6 +1,6 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
 import { Ellipsis } from 'lucide-react';
+import type { Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ColorSwatch } from './ColorSwatch.tsx';
 import { Icon } from './Icon.tsx';

package/src/Banner.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';
 import { Surface } from './Surface.tsx';
 

package/src/Button.tsx

@@ -1,5 +1,5 @@
-import type { AnchorHTMLAttributes, ComponentProps, Ref } from 'react';
 import clsx from 'clsx';
+import type { AnchorHTMLAttributes, ComponentProps, Ref } from 'react';
 import { buttonClass, type ButtonShape, type ButtonSize, type ButtonVariant } from './button-class.ts';
 
 export type { ButtonShape, ButtonSize, ButtonVariant } from './button-class.ts';

package/src/ButtonGroup.tsx

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 
 export type ButtonGroupProps = useRender.ComponentProps<'div'>;
 

package/src/Checkbox.tsx

@@ -1,7 +1,7 @@
-import type { Ref } from 'react';
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import clsx from 'clsx';
 import { Check, Minus } from 'lucide-react';
-import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import type { Ref } from 'react';
 import { Icon } from './Icon.tsx';
 
 export interface CheckboxProps {

package/src/ChoiceCards.tsx

@@ -1,8 +1,8 @@
-import { Fragment, useId, type ReactNode, type Ref } from 'react';
-import clsx from 'clsx';
-import type { LucideIcon } from 'lucide-react';
 import { Radio } from '@base-ui/react/radio';
 import { RadioGroup } from '@base-ui/react/radio-group';
+import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import { Fragment, useId, type ReactNode, type Ref } from 'react';
 import { Icon } from './Icon.tsx';
 
 export interface Choice<Value extends string | number> {

package/src/CloseButton.tsx

@@ -1,6 +1,6 @@
-import type { Ref } from 'react';
-import { X } from 'lucide-react';
 import { Dialog } from '@base-ui/react/dialog';
+import { X } from 'lucide-react';
+import type { Ref } from 'react';
 import { IconButton, type IconButtonSize } from './IconButton.tsx';
 import type { Shortcut } from './shortcut.ts';
 

package/src/ColorSwatch.tsx

@@ -1,7 +1,7 @@
-import type { ComponentProps } from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import clsx from 'clsx';
 import { Check } from 'lucide-react';
-import { useRender } from '@base-ui/react/use-render';
+import type { ComponentProps } from 'react';
 import { Icon } from './Icon.tsx';
 
 /* `focus-ring` for the swatch that is a menu item rather than a button, which the keyboard reaches all the same. */

package/src/ColorWheelPicker.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useId, useRef, useState, type KeyboardEvent, type Ref } from 'react';
 import { ChevronDown } from 'lucide-react';
+import { useEffect, useId, useRef, useState, type KeyboardEvent, type Ref } from 'react';
 import { ColorSwatch } from './ColorSwatch.tsx';
 import { Icon } from './Icon.tsx';
 import { PopoverPopup, PopoverRoot, PopoverTrigger } from './popover/parts.tsx';

package/src/ColumnResizeHandle.tsx

@@ -1,5 +1,5 @@
-import type { CSSProperties, PointerEvent as ReactPointerEvent, Ref } from 'react';
 import clsx from 'clsx';
+import type { CSSProperties, PointerEvent as ReactPointerEvent, Ref } from 'react';
 import type { ColumnEdge } from './useColumnResize.ts';
 
 export interface ColumnResizeHandleProps {

package/src/CopyButton.tsx

@@ -1,6 +1,6 @@
+import { Check, Copy } from 'lucide-react';
 import { useEffect, useState, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Check, Copy } from 'lucide-react';
 import { Button, type ButtonSize, type ButtonVariant } from './Button.tsx';
 import { copyText } from './clipboard.ts';
 import { Icon } from './Icon.tsx';

package/src/DockShell.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState, type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
+import { useEffect, useRef, useState, type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import { Surface } from './Surface.tsx';
 
 /* How close to the bottom of the window the pointer has to come before a hidden dock slides back. */

package/src/EmptyState.tsx

@@ -1,6 +1,6 @@
-import { cloneElement, isValidElement, type ReactElement, type ReactNode, type Ref } from 'react';
-import type { LucideIcon } from 'lucide-react';
 import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import { cloneElement, isValidElement, type ReactElement, type ReactNode, type Ref } from 'react';
 import { Icon } from './Icon.tsx';
 import { Spinner } from './Spinner.tsx';