@adecore/ui 0.23.1 → 0.24.1

package/dist/workspace/SplitView.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { GripVertical, Maximize2, Minimize2 } from 'lucide-react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -9,7 +9,8 @@ import { WorkspaceContext } from './context.js';
 import { paneRadius, resizeSplit, splitGeometry, splitSideAt, tabGapAt } from './geometry.js';
 import { splitPanes, updateSplitLayout } from './model.js';
 import { TabStrip } from './TabStrip.js';
-import { dropPreviewPath, rectPreview, tabPreview } from './preview.js';
+import { DropPreview } from './DropPreview.js';
+import { rectDropPreview, sameDropPreview, tabDropPreview } from './preview.js';
 const ZERO = { width: 0, height: 0, left: 0, top: 0, scaleX: 1, scaleY: 1 };
 const MINIMUM = { width: 120, height: 80 };
 /* The pane's section or header under `container`, found by its data attribute rather than a selector, so no id needs escaping. */
@@ -47,6 +48,7 @@ function Divider({ divider, minimumResizeShare, onResize, onEqualize }) {
             event.preventDefault();
             cleanup.current?.();
             const element = event.currentTarget;
+            const view = element.ownerDocument.defaultView;
             const pointerId = event.pointerId;
             const start = horizontal ? event.clientX : event.clientY;
             const parent = element.parentElement;
@@ -54,16 +56,47 @@ function Divider({ divider, minimumResizeShare, onResize, onEqualize }) {
             const scale = horizontal ? (rect?.width ?? 1) / (parent?.clientWidth || 1) : (rect?.height ?? 1) / (parent?.clientHeight || 1);
             element.dataset.resizing = '';
             element.focus();
+            // A pointer reports more often than the screen draws; one resize per frame is all that shows.
+            let frame = 0;
+            let pending = null;
+            const apply = () => {
+                frame = 0;
+                const next = pending;
+                pending = null;
+                if (next) {
+                    const delta = ((horizontal ? next.clientX : next.clientY) - start) / (scale || 1);
+                    onResize(resizeSplit(divider, delta, next.altKey, 8 / (scale || 1), minimumResizeShare));
+                }
+            };
             const move = (next) => {
                 if (next.pointerId !== pointerId) {
                     return;
                 }
-                const delta = ((horizontal ? next.clientX : next.clientY) - start) / (scale || 1);
-                onResize(resizeSplit(divider, delta, next.altKey, 8 / (scale || 1), minimumResizeShare));
+                pending = next;
+                if (frame !== 0) {
+                    return;
+                }
+                if (view) {
+                    frame = view.requestAnimationFrame(apply);
+                }
+                else {
+                    apply();
+                }
+            };
+            const release = () => {
+                if (frame !== 0) {
+                    view?.cancelAnimationFrame(frame);
+                    apply();
+                }
+                end();
             };
             const end = () => {
+                if (frame !== 0) {
+                    view?.cancelAnimationFrame(frame);
+                    frame = 0;
+                }
                 element.removeEventListener('pointermove', move);
-                element.removeEventListener('pointerup', end);
+                element.removeEventListener('pointerup', release);
                 element.removeEventListener('pointercancel', end);
                 element.removeEventListener('lostpointercapture', end);
                 element.ownerDocument.defaultView?.removeEventListener('blur', end);
@@ -76,7 +109,7 @@ function Divider({ divider, minimumResizeShare, onResize, onEqualize }) {
             cleanup.current = end;
             element.setPointerCapture(pointerId);
             element.addEventListener('pointermove', move);
-            element.addEventListener('pointerup', end);
+            element.addEventListener('pointerup', release);
             element.addEventListener('pointercancel', end);
             element.addEventListener('lostpointercapture', end);
             element.ownerDocument.defaultView?.addEventListener('blur', end);
@@ -108,6 +141,14 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
     const [dragging, setDragging] = useState(false);
     const drag = useRef(null);
     const [preview, setPreview] = useState(null);
+    // A dragover fires many times a second; only a different shape is worth a render.
+    const shownPreview = useRef(null);
+    const showPreview = useCallback((shape) => {
+        if (!sameDropPreview(shownPreview.current, shape)) {
+            shownPreview.current = shape;
+            setPreview(shape);
+        }
+    }, []);
     const latest = useRef({ value, onValueChange });
     useLayoutEffect(() => {
         latest.current = { value, onValueChange };
@@ -155,8 +196,8 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
     const stopDrag = useCallback(() => {
         drag.current = null;
         setDragging(false);
-        setPreview(null);
-    }, []);
+        showPreview(null);
+    }, [showPreview]);
     useEffect(() => {
         if (!dragging) {
             return;
@@ -254,9 +295,9 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
             return null;
         }
         const header = Math.min(barHeight, rect.height);
-        const strip = paneElement(root.current, 'splitHeader', rect.pane.id);
-        const tabRects = Array.from(strip?.querySelectorAll('[data-document-tab]') ?? [], (element) => element.getBoundingClientRect());
         const inHeader = y < rect.y + header;
+        const strip = inHeader ? paneElement(root.current, 'splitHeader', rect.pane.id) : undefined;
+        const tabRects = Array.from(strip?.querySelectorAll('[data-document-tab]') ?? [], (element) => element.getBoundingClientRect());
         const side = inHeader ? undefined : (splitSideAt(rect, x, y) ?? 'center');
         const index = inHeader ? tabGapAt(tabRects, event.clientX) : undefined;
         const target = { paneId: rect.pane.id, side, index };
@@ -270,7 +311,7 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
             return null;
         }
         if (side === 'center') {
-            return { target, shape: rectPreview(rect) };
+            return { target, shape: rectDropPreview(rect) };
         }
         if (side) {
             const horizontal = side === 'left' || side === 'right';
@@ -278,7 +319,7 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
             const height = horizontal ? rect.height : Math.max(0, (rect.height - gap) / 2);
             return {
                 target,
-                shape: rectPreview({
+                shape: rectDropPreview({
                     x: side === 'right' ? rect.x + rect.width - width : rect.x,
                     y: side === 'bottom' ? rect.y + rect.height - height : rect.y,
                     width,
@@ -287,7 +328,7 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
             };
         }
         if (header === 0) {
-            return { target, shape: rectPreview(rect) };
+            return { target, shape: rectDropPreview(rect) };
         }
         const tabWidth = Math.min(rect.width, (drag.current?.width ?? 128) / (measurement.scaleX || 1));
         const next = tabRects[index ?? tabRects.length];
@@ -295,7 +336,7 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
         const relative = Math.max(0, Math.min(rect.width - tabWidth, (left - measurement.left) / (measurement.scaleX || 1) - rect.x));
         return {
             target,
-            shape: tabPreview({ gap: index ?? rect.pane.views.length, left: relative, tabWidth, width: rect.width, height: rect.height, barHeight: header }, { x: rect.x, y: rect.y })
+            shape: tabDropPreview({ gap: index ?? rect.pane.views.length, left: relative, tabWidth, width: rect.width, height: rect.height, barHeight: header }, { x: rect.x, y: rect.y })
         };
     };
     const focusDirection = (key) => {
@@ -350,11 +391,11 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
             onDragOver: (event) => {
                 props.onDragOver?.(event);
                 if (event.defaultPrevented) {
-                    setPreview(null);
+                    showPreview(null);
                     return;
                 }
                 const drop = locateDrop(event);
-                setPreview(drop?.shape ?? null);
+                showPreview(drop?.shape ?? null);
                 if (drop) {
                     event.preventDefault();
                     event.dataTransfer.dropEffect = drag.current ? 'move' : 'copy';
@@ -363,7 +404,7 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
             onDragLeave: (event) => {
                 props.onDragLeave?.(event);
                 if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) {
-                    setPreview(null);
+                    showPreview(null);
                 }
             },
             onDrop: (event) => {
@@ -421,7 +462,7 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
                                 length: divider.axis === 'horizontal' ? measurement.width : measurement.height,
                                 gap
                             }
-                            : { type: 'equalize', splitId: divider.splitId, index: divider.index }) }, `${divider.splitId}:${divider.index}`))), preview && (_jsx("svg", { className: "ade-split-preview", width: "100%", height: "100%", "aria-hidden": "true", children: _jsx("path", { style: { d: `path("${dropPreviewPath(preview)}")` } }) }))] }))
+                            : { type: 'equalize', splitId: divider.splitId, index: divider.index }) }, `${divider.splitId}:${divider.index}`))), _jsx(DropPreview, { shape: preview })] }))
         }
     });
 }

package/dist/workspace/TabStrip.d.ts

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

package/dist/workspace/TabStrip.js

@@ -1,13 +1,13 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { useRender } from '@base-ui-components/react/use-render';
+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.js';
 import { IconButton } from '../IconButton.js';
 import { Tooltip } from '../Tooltip.js';
-import { tabGapAt } from './geometry.js';
+import { tabGapAt, tabRevealScrollLeft } from './geometry.js';
 /* Where an arrow, Home or End moves the selection from `index`, wrapping at either end; null for any other key. */
 function tabIndexForKey(key, index, count) {
     switch (key) {
@@ -62,20 +62,44 @@ export function TabStrip({ items, value, onValueChange, renderTab, focused = tru
             setInsertion(after?.offsetLeft ?? (last ? last.offsetLeft + last.offsetWidth : 0));
         }
     }, [insertAt]);
-    useLayoutEffect(measure);
+    // Stays set after the active tab changes, as its width can settle frames later; a person's own scroll ends it.
+    const revealing = useRef(false);
+    const reveal = () => {
+        const element = strip.current;
+        const selected = element?.querySelector('[aria-selected="true"]');
+        if (!revealing.current || !element || !selected) {
+            return;
+        }
+        const container = selected.closest('[data-document-tab]');
+        const tab = container && element.contains(container) ? container : selected;
+        const fade = parseFloat(getComputedStyle(element).getPropertyValue('--fade-size')) || 0;
+        const bounds = element.getBoundingClientRect();
+        const rect = tab.getBoundingClientRect();
+        const left = tabRevealScrollLeft(element, rect.left - bounds.left - element.clientLeft + element.scrollLeft, rect.width, fade);
+        if (left !== element.scrollLeft) {
+            element.scrollLeft = left;
+        }
+    };
+    useLayoutEffect(() => {
+        revealing.current = true;
+    }, [value]);
+    useLayoutEffect(() => {
+        reveal();
+        measure();
+    });
     useEffect(() => {
         const element = strip.current;
         if (!element || typeof ResizeObserver === 'undefined') {
             return;
         }
-        const observer = new ResizeObserver(measure);
+        const observer = new ResizeObserver(() => {
+            reveal();
+            measure();
+        });
         observer.observe(element);
         element.querySelectorAll('[data-document-tab]').forEach((tab) => observer.observe(tab));
         return () => observer.disconnect();
     });
-    useEffect(() => {
-        strip.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
-    }, [value]);
     const gap = (event) => {
         const rects = Array.from(event.currentTarget.querySelectorAll('[data-document-tab]'), (tab) => tab.getBoundingClientRect());
         return tabGapAt(rects, event.clientX);
@@ -110,10 +134,21 @@ export function TabStrip({ items, value, onValueChange, renderTab, focused = tru
             },
             onWheel: (event) => {
                 props.onWheel?.(event);
-                if (!event.defaultPrevented && !event.deltaX && event.deltaY) {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                revealing.current = false;
+                if (!event.deltaX && event.deltaY) {
                     event.currentTarget.scrollLeft += event.deltaY;
                 }
             },
+            onPointerDown: (event) => {
+                props.onPointerDown?.(event);
+                // A press on the strip itself grabs its scrollbar, and a touch may pan it.
+                if (event.target === event.currentTarget || event.pointerType === 'touch') {
+                    revealing.current = false;
+                }
+            },
             onDragOver: (event) => {
                 props.onDragOver?.(event);
                 if (!event.defaultPrevented) {

package/dist/workspace/Workspace.d.ts

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

package/dist/workspace/Workspace.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import clsx from 'clsx';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { WorkspaceContext } from './context.js';
 const isPresent = (node) => node !== undefined && node !== null && node !== false;
 export function Workspace({ layout = 'standard', toolbar, sidebar, sidePanel, sidebarWidth = 248, sidePanelWidth = 320, sidebarOpen, sidePanelOpen, children, className, ref, render, style, ...props }) {
@@ -24,5 +25,6 @@ export function Workspace({ layout = 'standard', toolbar, sidebar, sidePanel, si
             children: (_jsxs(_Fragment, { children: [hasSidebar && (_jsx("aside", { className: "ade-workspace-sidebar", "data-auto": sidebarWidth === 'auto' || undefined, style: { width: sidebarWidth }, children: sidebar })), _jsxs("div", { className: "ade-workspace-center", children: [hasToolbar && _jsx("div", { className: "ade-workspace-toolbar", children: toolbar }), _jsx("div", { className: "ade-workspace-content", children: children })] }), hasPanel && (_jsx("aside", { className: "ade-workspace-side-panel", "data-auto": sidePanelWidth === 'auto' || undefined, style: { width: sidePanelWidth }, children: sidePanel }))] }))
         }
     });
-    return _jsx(WorkspaceContext, { value: { layout, edges: { top: !hasToolbar, right: !rightOpen, bottom: true, left: !leftOpen } }, children: element });
+    const context = useMemo(() => ({ layout, edges: { top: !hasToolbar, right: !rightOpen, bottom: true, left: !leftOpen } }), [layout, hasToolbar, rightOpen, leftOpen]);
+    return _jsx(WorkspaceContext, { value: context, children: element });
 }

package/dist/workspace/geometry.d.ts

@@ -37,3 +37,14 @@ export declare function tabGapAt(rects: readonly {
     left: number;
     right: number;
 }[], x: number): number;
+export interface TabScrollView {
+    scrollLeft: number;
+    clientWidth: number;
+    scrollWidth: number;
+}
+/**
+ * The scrollLeft that brings a tab fully into view and clear of the edge fades, or the current one
+ * when it already is. The strip only fades an edge it can still scroll toward, so a fade is counted
+ * only where the scroll position leaves one. A tab wider than the room between the fades shows its start.
+ */
+export declare function tabRevealScrollLeft(view: TabScrollView, start: number, width: number, fade: number): number;

package/dist/workspace/geometry.js

@@ -151,3 +151,22 @@ export function tabGapAt(rects, x) {
     const index = rects.findIndex((rect) => x < (rect.left + rect.right) / 2);
     return index < 0 ? rects.length : index;
 }
+/**
+ * The scrollLeft that brings a tab fully into view and clear of the edge fades, or the current one
+ * when it already is. The strip only fades an edge it can still scroll toward, so a fade is counted
+ * only where the scroll position leaves one. A tab wider than the room between the fades shows its start.
+ */
+export function tabRevealScrollLeft(view, start, width, fade) {
+    const max = Math.max(0, view.scrollWidth - view.clientWidth);
+    const end = start + width;
+    const visibleStart = (left) => left + (left > 0 ? fade : 0);
+    const visibleEnd = (left) => left + view.clientWidth - (left < max - 1 ? fade : 0);
+    const clamp = (left) => Math.round(Math.min(max, Math.max(0, left)));
+    if (start >= visibleStart(view.scrollLeft) && end <= visibleEnd(view.scrollLeft)) {
+        return view.scrollLeft;
+    }
+    if (start < visibleStart(view.scrollLeft) || width > view.clientWidth - 2 * fade) {
+        return clamp(start - fade);
+    }
+    return clamp(end + fade - view.clientWidth);
+}

package/dist/workspace/preview.d.ts

@@ -1,3 +1,4 @@
+import type { SplitRect } from './geometry.ts';
 export declare const TAB_TOP_INSET = 4;
 export declare const TAB_RADIUS = 6;
 export declare const BODY_RADIUS = 4;
@@ -13,17 +14,12 @@ export interface DropPreviewShape {
     tabTop: number;
     radius: number;
 }
-export interface PreviewRect {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-export declare function rectPreview({ x, y, width, height }: PreviewRect): DropPreviewShape;
-export declare function tabPreview(drop: TabDrop, origin: {
+export declare function rectDropPreview({ x, y, width, height }: SplitRect): DropPreviewShape;
+export declare function tabDropPreview(drop: TabDrop, origin: {
     x: number;
     y: number;
 }): DropPreviewShape;
+export declare function sameDropPreview(left: DropPreviewShape | null, right: DropPreviewShape | null): boolean;
 export declare function dropPreviewPath({ x, y, width, height, barHeight, tabLeft, tabWidth, tabTop, radius }: DropPreviewShape, inset?: number): string;
 export interface TabDrop {
     gap: number;

package/dist/workspace/preview.js

@@ -12,11 +12,11 @@ function coordinate(value) {
  * The preview for a split or a trade: the rectangle as a tab with no height, parked just inside its
  * top left corner so the corner keeps its radius. It is where a tab target grows out of the rectangle.
  */
-export function rectPreview({ x, y, width, height }) {
+export function rectDropPreview({ x, y, width, height }) {
     return { x, y, width, height, barHeight: 0, tabLeft: x + BODY_RADIUS, tabWidth: 0, tabTop: y, radius: TAB_RADIUS };
 }
 /* The preview for a tab: the tab and the body of the cell it lands in, `origin` being the cell's top left in the grid. */
-export function tabPreview(drop, origin) {
+export function tabDropPreview(drop, origin) {
     return {
         x: origin.x,
         y: origin.y,
@@ -29,6 +29,21 @@ export function tabPreview(drop, origin) {
         radius: TAB_RADIUS
     };
 }
+/* Two shapes that draw the same outline, so a drag that stays in one place can skip a render. */
+export function sameDropPreview(left, right) {
+    if (left === null || right === null) {
+        return left === right;
+    }
+    return (left.x === right.x &&
+        left.y === right.y &&
+        left.width === right.width &&
+        left.height === right.height &&
+        left.barHeight === right.barHeight &&
+        left.tabLeft === right.tabLeft &&
+        left.tabWidth === right.tabWidth &&
+        left.tabTop === right.tabTop &&
+        left.radius === right.radius);
+}
 /*
  * The outline of a tab grown into the body under it, as one closed path so no line runs between the
  * two. The commands are the same whatever the numbers are (an arc of radius 0 is a straight line), so

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.23.1",
+  "version": "0.24.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",
@@ -65,7 +65,7 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@base-ui-components/react": "^1.0.0-rc.0",
+    "@base-ui/react": "^1.9.0",
     "@pierre/trees": "1.0.0-beta.6",
     "clsx": "^2.1.1",
     "lucide-react": "^1.47.0",

package/src/ButtonGroup.tsx

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

package/src/Checkbox.tsx

@@ -1,7 +1,7 @@
 import type { Ref } from 'react';
 import clsx from 'clsx';
 import { Check, Minus } from 'lucide-react';
-import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 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-components/react/radio';
-import { RadioGroup } from '@base-ui-components/react/radio-group';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup } from '@base-ui/react/radio-group';
 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-components/react/dialog';
+import { Dialog } from '@base-ui/react/dialog';
 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 clsx from 'clsx';
 import { Check } from 'lucide-react';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 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/ErrorBoundary.tsx

@@ -75,18 +75,18 @@ function ErrorFallback({ label, error, componentStack, compact, reload, classNam
  * resets only while it holds an error: `resetKeys` for what the children draw from.
  */
 export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-    state: ErrorBoundaryState = CLEAR;
+    override state: ErrorBoundaryState = CLEAR;
 
     static getDerivedStateFromError(error: unknown): Partial<ErrorBoundaryState> {
         return { error, failed: true };
     }
 
-    componentDidCatch(error: unknown, info: ErrorInfo): void {
+    override componentDidCatch(error: unknown, info: ErrorInfo): void {
         console.error(`${this.props.label}:`, error, info.componentStack);
         this.setState({ componentStack: info.componentStack ?? null });
     }
 
-    componentDidUpdate(previous: ErrorBoundaryProps): void {
+    override componentDidUpdate(previous: ErrorBoundaryProps): void {
         if (shouldReset(this.state.failed, previous.resetKeys ?? [], this.props.resetKeys ?? [])) {
             this.reset();
         }
@@ -96,7 +96,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
         this.setState(CLEAR);
     }
 
-    render(): ReactNode {
+    override render(): ReactNode {
         if (!this.state.failed) {
             return this.props.children;
         }

package/src/Field.tsx

@@ -1,6 +1,6 @@
-import { useId, type ReactNode, type Ref } from 'react';
+import { useId, useMemo, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { FieldContext } from './field-context.ts';
 import { SectionLabel } from './SectionLabel.tsx';
 
@@ -85,6 +85,7 @@ export function Field({ label, hint, error, group = false, orientation = 'vertic
     const hasHint = isShown(hint);
     const hasError = isShown(error);
     const describedBy = [hasHint ? `${id}-hint` : null, hasError ? `${id}-error` : null].filter((part) => part !== null).join(' ') || undefined;
+    const control = useMemo(() => (group ? null : { id: `${id}-control`, describedBy, invalid: hasError }), [group, id, describedBy, hasError]);
     return (
         <div
             ref={ref}
@@ -99,9 +100,7 @@ export function Field({ label, hint, error, group = false, orientation = 'vertic
                 </FieldLabel>
             )}
             {/* A group describes itself, so an input inside it stays unconnected rather than taking an id nothing points at. */}
-            <FieldContext value={group ? null : { id: `${id}-control`, describedBy, invalid: hasError }}>
-                {horizontal ? <div className="col-start-2 min-w-0">{children}</div> : children}
-            </FieldContext>
+            <FieldContext value={control}>{horizontal ? <div className="col-start-2 min-w-0">{children}</div> : children}</FieldContext>
             {/* The stack already puts 6px above each line, so neither takes the margin a standalone hint has. */}
             {hasHint && (
                 <p id={`${id}-hint`} className={clsx(HINT, horizontal && 'col-start-2')}>

package/src/IconButton.tsx

@@ -1,7 +1,7 @@
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { Icon } from './Icon.tsx';
 import type { Shortcut } from './shortcut.ts';
 import { Spinner } from './Spinner.tsx';

package/src/ListRow.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 
 const VARIANT = {
     /* A row of a list that reads as a table and fills the width of its panel: commits, processes,

package/src/MiddleTruncate.tsx

@@ -0,0 +1,84 @@
+import { useLayoutEffect, useMemo, useState, type Ref } from 'react';
+import clsx from 'clsx';
+import { fitMiddle, type MiddleCut } from './middle-truncate.ts';
+import { mergeRefs } from './merge-refs.ts';
+import { Tooltip } from './Tooltip.tsx';
+
+export interface MiddleTruncateProps {
+    text: string;
+    /* The whole text on hover and focus while it is cut. Off where the caller's own tooltip already says it. */
+    tooltip?: boolean;
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+
+let canvas: HTMLCanvasElement | null = null;
+
+/* How wide a text is drawn in the face of `element`, or null where the page cannot tell (no canvas). */
+function textMeasure(element: HTMLElement): ((text: string) => number) | null {
+    const view = element.ownerDocument.defaultView;
+    canvas ??= element.ownerDocument.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (context === null || view === null) {
+        return null;
+    }
+    const style = view.getComputedStyle(element);
+    context.font = style.font || `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+    if ('letterSpacing' in context) {
+        context.letterSpacing = style.letterSpacing === 'normal' ? '0px' : style.letterSpacing;
+    }
+    return (text) => context.measureText(text).width;
+}
+
+function sameCut(first: MiddleCut | null, second: MiddleCut | null): boolean {
+    return first?.head === second?.head && first?.tail === second?.tail;
+}
+
+/*
+ * A path or a branch name on one line that keeps its start and its end and cuts the middle. It asks
+ * for the width of the whole text and measures what it gets. The part it cuts stays in the element
+ * at no width, so selecting, copying and finding read the whole text.
+ */
+export function MiddleTruncate({ text, tooltip = true, className, ref }: MiddleTruncateProps) {
+    const [element, setElement] = useState<HTMLSpanElement | null>(null);
+    const [cut, setCut] = useState<MiddleCut | null>(null);
+    const rootRef = useMemo(() => mergeRefs(setElement, ref), [ref]);
+
+    useLayoutEffect(() => {
+        if (element === null) {
+            return;
+        }
+        const update = (): void => {
+            const measure = textMeasure(element);
+            // Layout rounds what a canvas measures, so a text a fraction wider than its box still fits.
+            const next = measure === null ? null : fitMiddle(text, element.getBoundingClientRect().width + 0.5, measure);
+            setCut((current) => (sameCut(current, next) ? current : next));
+        };
+        update();
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(update);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [element, text]);
+
+    const content = (
+        <span ref={rootRef} className={clsx('middle-truncate', className)} data-text={text}>
+            {cut === null ? (
+                text
+            ) : (
+                <>
+                    <span className="middle-truncate-head">{cut.head}</span>
+                    <span className="middle-truncate-middle">{cut.middle}</span>
+                    {cut.tail}
+                </>
+            )}
+        </span>
+    );
+    // Only a cut text has more to say, and a long list of whole ones keeps no hover handlers.
+    if (cut === null || !tooltip) {
+        return content;
+    }
+    return <Tooltip label={text}>{content}</Tooltip>;
+}