@adecore/ui 0.31.12 → 0.32.0

package/dist/workspace/preview.js

@@ -6,43 +6,50 @@ export const BODY_RADIUS = 4;
 /* The stroke is centered on the path, so the path runs half of it inside the box to keep the outer edge on it. */
 export const DROP_STROKE = 2;
 function coordinate(value) {
-    return String(Math.round(value * 100) / 100 + 0);
+  return String(Math.round(value * 100) / 100 + 0);
 }
 /*
  * 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 rectDropPreview({ x, y, width, height }) {
-    return { x, y, width, height, barHeight: 0, tabLeft: x + BODY_RADIUS, tabWidth: 0, tabTop: y, radius: TAB_RADIUS };
+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 tabDropPreview(drop, origin) {
-    return {
-        x: origin.x,
-        y: origin.y,
-        width: drop.width,
-        height: drop.height,
-        barHeight: drop.barHeight,
-        tabLeft: origin.x + drop.left,
-        tabWidth: drop.tabWidth,
-        tabTop: origin.y + TAB_TOP_INSET,
-        radius: TAB_RADIUS
-    };
+  return {
+    x: origin.x,
+    y: origin.y,
+    width: drop.width,
+    height: drop.height,
+    barHeight: drop.barHeight,
+    tabLeft: origin.x + drop.left,
+    tabWidth: drop.tabWidth,
+    tabTop: origin.y + TAB_TOP_INSET,
+    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);
+  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
@@ -50,38 +57,31 @@ export function sameDropPreview(left, right) {
  * the browser can move one outline into another with a transition on `d`. `inset` is how far the
  * path runs inside the box, which is half the stroke, so the outer edge of the line is on the box.
  */
-export function dropPreviewPath({ x, y, width, height, barHeight, tabLeft, tabWidth, tabTop, radius }, inset = DROP_STROKE / 2) {
-    const left = inset;
-    const right = width - inset;
-    const bottom = height - inset;
-    const top = barHeight + inset;
-    const tabStart = Math.max(left, Math.min(tabLeft - x + inset, right));
-    const tabEnd = Math.max(tabStart, Math.min(tabLeft - x + tabWidth - inset, right));
-    const tabY = Math.min(tabTop - y + inset, top);
-    const tabCorner = Math.max(0, Math.min(radius - inset, (tabEnd - tabStart) / 2, top - tabY));
-    const bodyCorner = Math.max(0, BODY_RADIUS - inset);
-    // A tab flush with a side of the box continues that side, so the body has no corner there.
-    const cornerLeft = Math.min(bodyCorner, tabStart - left);
-    const cornerRight = Math.min(bodyCorner, right - tabEnd);
-    const cornerBottom = Math.max(0, Math.min(bodyCorner, (right - left) / 2, (bottom - top) / 2));
-    const at = (px, py) => `${coordinate(x + px)},${coordinate(y + py)}`;
-    const arc = (corner, px, py) => `A${coordinate(corner)},${coordinate(corner)} 0 0 1 ${at(px, py)}`;
-    return [
-        `M${at(left + cornerLeft, top)}`,
-        `H${coordinate(x + tabStart)}`,
-        `V${coordinate(y + tabY + tabCorner)}`,
-        arc(tabCorner, tabStart + tabCorner, tabY),
-        `H${coordinate(x + tabEnd - tabCorner)}`,
-        arc(tabCorner, tabEnd, tabY + tabCorner),
-        `V${coordinate(y + top)}`,
-        `H${coordinate(x + right - cornerRight)}`,
-        arc(cornerRight, right, top + cornerRight),
-        `V${coordinate(y + bottom - cornerBottom)}`,
-        arc(cornerBottom, right - cornerBottom, bottom),
-        `H${coordinate(x + left + cornerBottom)}`,
-        arc(cornerBottom, left, bottom - cornerBottom),
-        `V${coordinate(y + top + cornerLeft)}`,
-        arc(cornerLeft, left + cornerLeft, top),
-        'Z'
-    ].join(' ');
-}
+export function dropPreviewPath({
+  x,
+  y,
+  width,
+  height,
+  barHeight,
+  tabLeft,
+  tabWidth,
+  tabTop,
+  radius
+}, inset = DROP_STROKE / 2) {
+  const left = inset;
+  const right = width - inset;
+  const bottom = height - inset;
+  const top = barHeight + inset;
+  const tabStart = Math.max(left, Math.min(tabLeft - x + inset, right));
+  const tabEnd = Math.max(tabStart, Math.min(tabLeft - x + tabWidth - inset, right));
+  const tabY = Math.min(tabTop - y + inset, top);
+  const tabCorner = Math.max(0, Math.min(radius - inset, (tabEnd - tabStart) / 2, top - tabY));
+  const bodyCorner = Math.max(0, BODY_RADIUS - inset);
+  // A tab flush with a side of the box continues that side, so the body has no corner there.
+  const cornerLeft = Math.min(bodyCorner, tabStart - left);
+  const cornerRight = Math.min(bodyCorner, right - tabEnd);
+  const cornerBottom = Math.max(0, Math.min(bodyCorner, (right - left) / 2, (bottom - top) / 2));
+  const at = (px, py) => `${coordinate(x + px)},${coordinate(y + py)}`;
+  const arc = (corner, px, py) => `A${coordinate(corner)},${coordinate(corner)} 0 0 1 ${at(px, py)}`;
+  return [`M${at(left + cornerLeft, top)}`, `H${coordinate(x + tabStart)}`, `V${coordinate(y + tabY + tabCorner)}`, arc(tabCorner, tabStart + tabCorner, tabY), `H${coordinate(x + tabEnd - tabCorner)}`, arc(tabCorner, tabEnd, tabY + tabCorner), `V${coordinate(y + top)}`, `H${coordinate(x + right - cornerRight)}`, arc(cornerRight, right, top + cornerRight), `V${coordinate(y + bottom - cornerBottom)}`, arc(cornerBottom, right - cornerBottom, bottom), `H${coordinate(x + left + cornerBottom)}`, arc(cornerBottom, left, bottom - cornerBottom), `V${coordinate(y + top + cornerLeft)}`, arc(cornerLeft, left + cornerLeft, top), 'Z'].join(' ');
+}

package/dist/zoom.js

@@ -1,6 +1,6 @@
 /* The percentages a zoom menu offers when the app names none. */
 export const ZOOM_PRESETS = [25, 50, 75, 100, 150, 200];
 /* Compared on the rounded percent the readout shows, so 0.999 still ticks 100%. */
-export const activeZoomPreset = (zoom, presets) => presets.find((preset) => preset === Math.round(zoom * 100)) ?? null;
+export const activeZoomPreset = (zoom, presets) => presets.find(preset => preset === Math.round(zoom * 100)) ?? null;
 /* Ten percent a click, on the readout's own rounded percent, so + and - come back where they were. */
-export const steppedZoom = (zoom, by) => Math.round(zoom * 100 + by) / 100;
+export const steppedZoom = (zoom, by) => Math.round(zoom * 100 + by) / 100;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.31.12",
+  "version": "0.32.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/ErrorBoundary.tsx

@@ -10,7 +10,7 @@ import { Icon } from './Icon.tsx';
 import { IconButton } from './IconButton.tsx';
 
 export interface ErrorBoundaryProps {
-    /* What failed, as the first line of the message: "This view failed to render". */
+    /* What failed, as the first line of the message: "Could not show this view". */
     label: string;
     /* What the children draw from; the boundary tries again when one of them changes. */
     resetKeys?: ResetKeys;

package/src/Field.tsx

@@ -1,4 +1,4 @@
-import { useId, useMemo, type ReactNode, type Ref } from 'react';
+import { useId, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
 import { FieldContext } from './field-context.ts';
@@ -84,8 +84,9 @@ export function Field({ label, hint, error, group = false, orientation = 'vertic
     const hasLabel = label !== undefined;
     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]);
+    const lines = [hasHint ? `${id}-hint` : null, hasError ? `${id}-error` : null].filter((part) => part !== null);
+    const describedBy = lines.length > 0 ? lines.join(' ') : undefined;
+    const control = group ? null : { id: `${id}-control`, describedBy, invalid: hasError };
     return (
         <div
             ref={ref}

package/src/IconPicker.tsx

@@ -1,4 +1,4 @@
-import { useId, useLayoutEffect, useMemo, useRef, useState, type KeyboardEvent, type Ref } from 'react';
+import { useId, useLayoutEffect, useRef, useState, type KeyboardEvent, type Ref } from 'react';
 import clsx from 'clsx';
 import { Ban, Search, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -74,8 +74,8 @@ export function IconPicker({
     const [focused, setFocused] = useState<string | null>(null);
     const headed = isGrouped(icons);
     const framed = searchable || rows !== undefined;
-    const sections = useMemo(() => sectionsOf(icons), [icons]);
-    const shown = useMemo(() => filterSections(sections, query, keywords), [sections, query, keywords]);
+    const sections = sectionsOf(icons);
+    const shown = filterSections(sections, query, keywords);
     const tabStop = tabStopOf(
         shown.flatMap((section) => section.icons.map(([name]) => name)),
         focused,

package/src/LazyBoundary.tsx

@@ -12,6 +12,8 @@ export interface LazyBoundaryProps {
  * lands, so a chunk that takes 20 ms shows after 20 ms.
  */
 export function LazyBoundary({ fallback = null, children }: LazyBoundaryProps) {
+    // Compiled, the same boundary would come back and the landing would wait for React's own retry after all.
+    'use no memo';
     useSyncExternalStore(subscribeLandings, readLandings, readLandings);
     return <Suspense fallback={fallback}>{children}</Suspense>;
 }

package/src/MiddleTruncate.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useMemo, useState, type Ref } from 'react';
+import { useLayoutEffect, useState, type Ref } from 'react';
 import clsx from 'clsx';
 import { fitMiddle, type MiddleCut } from './middle-truncate.ts';
 import { mergeRefs } from './merge-refs.ts';
@@ -42,7 +42,7 @@ function sameCut(first: MiddleCut | null, second: MiddleCut | null): boolean {
 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]);
+    const rootRef = mergeRefs(setElement, ref);
 
     useLayoutEffect(() => {
         if (element === null) {

package/src/SegmentBar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, type Ref } from 'react';
+import { useEffect, useRef, useState, type Ref } from 'react';
 import clsx from 'clsx';
 import { mergeRefs } from './merge-refs.ts';
 import { Tooltip } from './Tooltip.tsx';
@@ -37,7 +37,7 @@ export interface SegmentBarProps {
    place; the gap between two parts that touch comes out of the one before. */
 export function SegmentBar({ parts, range, size = 'md', onSelect, label, className, ref }: SegmentBarProps) {
     const [measure, width] = useMeasuredWidth();
-    const rootRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);
+    const rootRef = mergeRefs(ref, measure);
     const labels = useRef<(HTMLSpanElement | null)[]>([]);
     const [cut, setCut] = useState<readonly boolean[]>([]);
 

package/src/Toasts.tsx

@@ -2,6 +2,7 @@ import { useState, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { CircleAlert, CircleCheck, Trash, X } from 'lucide-react';
+import { useStore } from 'zustand';
 import { Button } from './Button.tsx';
 import { Icon } from './Icon.tsx';
 import { IconButton } from './IconButton.tsx';
@@ -133,7 +134,8 @@ export interface ToastsProps<T extends Toast> {
  * a deletion after eight, and a failure waits to be read.
  */
 export function Toasts<T extends Toast>({ store, footer, className, ref }: ToastsProps<T>) {
-    const toasts = store((state) => state.toasts);
+    // Through `useStore`: the compiler takes a call of the prop itself for a plain function and would skip it on a later draw.
+    const toasts = useStore(store, (state) => state.toasts);
     // Stays mounted with nothing in it: a screen reader skips what a live region says the moment it is inserted.
     return (
         <div

package/src/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useCallback, type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
 import { Kbd } from './Kbd.tsx';
 import type { Shortcut } from './shortcut.ts';
@@ -37,15 +37,12 @@ export interface TooltipProps {
 /* A hint on hover and on keyboard focus. Every hint in an app is one of these, never a `title`. */
 export function Tooltip({ label, open, onOpenChange, anchor, kbd, side = 'top', sideOffset = 6, name = false, disabled = false, children }: TooltipProps) {
     // Held Cmd (Ctrl off macOS) prints this shortcut under the trigger (`ShortcutHints`).
-    const hintRef = useCallback(
-        (element: HTMLElement | null) => {
-            if (element === null || kbd === undefined || typeof kbd === 'string') {
-                return undefined;
-            }
-            return registerShortcutHint(element, kbd);
-        },
-        [kbd]
-    );
+    const hintRef = (element: HTMLElement | null) => {
+        if (element === null || kbd === undefined || typeof kbd === 'string') {
+            return undefined;
+        }
+        return registerShortcutHint(element, kbd);
+    };
 
     return (
         <BaseTooltip.Root disabled={disabled} open={open} onOpenChange={onOpenChange} disableHoverablePopup={children === undefined}>

package/src/Waveform.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, type KeyboardEvent, type PointerEvent, type Ref } from 'react';
+import { useRef, type KeyboardEvent, type PointerEvent, type Ref } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { formatClockDuration } from './format/duration.ts';
@@ -80,12 +80,12 @@ export function Waveform({
 }: WaveformProps) {
     const { t } = useTranslation('ui');
     const [measure, width] = useMeasuredWidth();
-    const rootRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);
+    const rootRef = mergeRefs(ref, measure);
     const dragged = useRef(0);
     const [from, to] = range ?? [0, duration];
     const span = to - from;
     const count = Math.floor(width / BAR_PITCH);
-    const bars = useMemo(() => barsOf(levels, duration, from, to, count), [levels, duration, from, to, count]);
+    const bars = barsOf(levels, duration, from, to, count);
 
     const positionOf = (time: number): number => (span > 0 ? (time - from) / span : 0);
     const inView = (time: number): boolean => positionOf(time) >= 0 && positionOf(time) <= 1;

package/src/file-tree/parts.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { useRender } from '@base-ui/react/use-render';
 import { FileTree as PierreFileTree, type FileTreeProps as PierreProps } from '@pierre/trees/react';
@@ -55,14 +55,11 @@ export function FileTreeRoot({
     const { t } = useTranslation('ui');
     const [frame, setFrame] = useState<HTMLDivElement | null>(null);
     const { attach, bar } = useFileTreeShift(model, resetKey);
-    const frameRef = useCallback(
-        (node: Element | null) => {
-            setFrame(node as HTMLDivElement | null);
-            attach(node as HTMLElement | null);
-            mergeRefs<Element>(ref)(node);
-        },
-        [ref, attach]
-    );
+    const frameRef = (node: Element | null) => {
+        setFrame(node as HTMLDivElement | null);
+        attach(node as HTMLElement | null);
+        mergeRefs<Element>(ref)(node);
+    };
     const slots = useFileTreeSlots(model, frame, label ?? t('tree.label'));
     const latestLoads = useRef({ onLoadChildren, onExpandedPathsChange });
     useLayoutEffect(() => {

package/src/file-tree/use-file-tree-shift.tsx

@@ -1,4 +1,4 @@
-import { useMemo, type ReactElement } from 'react';
+import { type ReactElement } from 'react';
 import type { FileTree } from '@pierre/trees';
 import { useTreeShift, type TreeShiftSource } from '../tree/use-tree-shift.tsx';
 import { shiftNeed } from '../tree/shift.ts';
@@ -40,13 +40,10 @@ function needOf(row: HTMLElement, shift: number, gap: number, range: Range): num
 
 /* The file tree draws its rows in a shadow root, and only the name slides: its decorations sit over the row. */
 export function useFileTreeShift(model: FileTree, resetKey?: string): { attach(node: HTMLElement | null): void; bar: ReactElement } {
-    const source = useMemo(
-        (): TreeShiftSource => ({
-            root: () => model.getFileTreeContainer()?.shadowRoot ?? null,
-            rows: (root) => [...root.querySelectorAll<HTMLElement>(ROWS)],
-            need: needOf
-        }),
-        [model]
-    );
+    const source: TreeShiftSource = {
+        root: () => model.getFileTreeContainer()?.shadowRoot ?? null,
+        rows: (root) => [...root.querySelectorAll<HTMLElement>(ROWS)],
+        need: needOf
+    };
     return useTreeShift(source, resetKey);
 }

package/src/lazy.tsx

@@ -79,6 +79,8 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name
     const Lazy = lazy(() => open(loaded));
     // Once `loaded` has it, `Lazy` never committed anything, so switching over remounts nothing.
     const LazyNamed = (props: ComponentProps<Module[Name]>) => {
+        // `loaded` fills in place; compiled, the element drawn before the module landed would stay.
+        'use no memo';
         const Component: ComponentType<any> = loaded.current ?? Lazy;
         return <Component {...props} />;
     };
@@ -114,6 +116,8 @@ export function lazyDialog<Module extends Record<Name, ComponentType>, Name exte
     const subscribe = (listener: () => void) => loaded.subscribe(listener);
     const isLoaded = () => loaded.current !== null;
     const LazyDialog = () => {
+        // As in `lazyNamed`: what `loaded` holds is read again on every render.
+        'use no memo';
         const opened = useOpenedOnce(useStore(isOpen));
         useSyncExternalStore(subscribe, isLoaded);
         const Loaded: ComponentType | null = loaded.current;

package/src/locales/en.ts

@@ -17,11 +17,11 @@ export default {
         section: 'Settings section',
         sections: 'Settings sections',
         close: 'Close settings',
-        failed: 'This settings page failed to render',
+        failed: 'Could not show this settings page',
         search: {
             placeholder: 'Search settings',
             clear: 'Clear search',
-            none: 'Nothing matches "{{query}}".',
+            none: 'No results for “{{query}}”',
             results: 'Search results',
             pane: 'Section'
         }
@@ -36,12 +36,12 @@ export default {
     },
     select: {
         search: 'Search',
-        noMatch: 'No option matches “{{query}}”'
+        noMatch: 'No match for “{{query}}”'
     },
     iconPicker: {
         label: 'Icon',
         none: 'No icon',
-        search: 'Find an icon',
+        search: 'Search icons',
         clear: 'Clear search',
         noMatch: 'No icon matches “{{query}}”'
     },

package/src/locales/nl.ts

@@ -17,11 +17,11 @@ export default {
         section: 'Onderdeel van de instellingen',
         sections: 'Onderdelen van de instellingen',
         close: 'Instellingen sluiten',
-        failed: 'Deze instellingenpagina kon niet worden getekend',
+        failed: 'Kon deze instellingenpagina niet tonen',
         search: {
             placeholder: 'Instellingen zoeken',
             clear: 'Zoekopdracht wissen',
-            none: 'Niets komt overeen met "{{query}}".',
+            none: 'Geen resultaten voor “{{query}}”',
             results: 'Zoekresultaten',
             pane: 'Onderdeel'
         }
@@ -36,12 +36,12 @@ export default {
     },
     select: {
         search: 'Zoeken',
-        noMatch: 'Geen optie past bij “{{query}}”'
+        noMatch: 'Geen resultaat voor “{{query}}”'
     },
     iconPicker: {
         label: 'Icoon',
         none: 'Geen icoon',
-        search: 'Zoek een icoon',
+        search: 'Iconen zoeken',
         clear: 'Zoekopdracht wissen',
         noMatch: 'Geen icoon past bij “{{query}}”'
     },
@@ -70,7 +70,7 @@ export default {
         collapse: 'Invouwen'
     },
     workspace: {
-        tabs: 'Open views',
+        tabs: 'Open weergaven',
         unsaved: 'Niet-opgeslagen wijzigingen',
         closeTab: 'Sluit {{name}}',
         resize: 'Panelen vergroten of verkleinen',

package/src/settings/SettingsDialog.tsx

@@ -239,7 +239,7 @@ export function SettingsDialog({
     useEffect(() => {
         latestShown.current = onTargetShown;
     });
-    const targetValue = useMemo(() => ({ target, shown: () => latestShown.current?.() }), [target]);
+    const targetValue = { target, shown: () => latestShown.current?.() };
 
     const labelOf = (id: string): string => sections.find((entry) => entry.id === id)?.label ?? id;
     const pick = (result: SettingsSearchResult): void => onNavigate({ section: result.section, target: result.id });

package/src/tree/parts.tsx

@@ -1,4 +1,4 @@
-import { useCallback, type MouseEvent } from 'react';
+import { type MouseEvent } from 'react';
 import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
 import { ChevronRight } from 'lucide-react';
@@ -25,13 +25,10 @@ export type TreeRootProps = useRender.ComponentProps<'div'> & {
 export function TreeRoot({ overflow = 'truncate', render, className, ref, children, ...props }: TreeRootProps) {
     const { attach, bar } = useTreeShift(TREE_ROWS);
     const scrolls = overflow === 'scroll';
-    const rootRef = useCallback(
-        (node: HTMLDivElement | null) => {
-            attach(scrolls ? node : null);
-            mergeRefs<HTMLDivElement>(ref)(node);
-        },
-        [scrolls, ref, attach]
-    );
+    const rootRef = (node: HTMLDivElement | null) => {
+        attach(scrolls ? node : null);
+        mergeRefs<HTMLDivElement>(ref)(node);
+    };
     return useRender({
         render,
         ref: rootRef,

package/src/useContentSize.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export interface ContentSize {
     width: number;
@@ -10,7 +10,7 @@ export function useContentSize(): [(node: HTMLElement | null) => void, ContentSi
     const [size, setSize] = useState<ContentSize>({ width: 0, height: 0 });
     const observer = useRef<ResizeObserver | null>(null);
     useEffect(() => () => observer.current?.disconnect(), []);
-    const measure = useCallback((node: HTMLElement | null): void => {
+    const measure = (node: HTMLElement | null): void => {
         observer.current?.disconnect();
         if (node === null) {
             return;
@@ -22,6 +22,6 @@ export function useContentSize(): [(node: HTMLElement | null) => void, ContentSi
         update(node.clientWidth, node.clientHeight);
         observer.current = new ResizeObserver(([entry]) => update(entry!.contentRect.width, entry!.contentRect.height));
         observer.current.observe(node);
-    }, []);
+    };
     return [measure, size];
 }

package/src/workspace/SplitView.tsx

@@ -287,13 +287,13 @@ export function SplitView({
     useLayoutEffect(() => {
         latest.current = { value, onValueChange };
     });
-    const dispatch = useCallback((command: SplitCommand): void => {
+    const dispatch = (command: SplitCommand): void => {
         const state = latest.current;
         const next = updateSplitLayout(state.value, command);
         if (next !== state.value) {
             state.onValueChange(next, command);
         }
-    }, []);
+    };
     const measure = useCallback((): void => {
         const element = root.current;
         if (!element) {

package/src/workspace/TabStrip.tsx

@@ -1,7 +1,6 @@
 import {
     createContext,
     useContext,
-    useCallback,
     useEffect,
     useLayoutEffect,
     useRef,
@@ -109,7 +108,7 @@ export function TabStrip({
     };
     const [edges, setEdges] = useState({ start: false, end: false });
     const [insertion, setInsertion] = useState(0);
-    const measure = useCallback((): void => {
+    const measure = (): void => {
         const element = strip.current;
         if (!element) {
             return;
@@ -123,7 +122,7 @@ export function TabStrip({
             const last = tabs.at(-1);
             setInsertion(after?.offsetLeft ?? (last ? last.offsetLeft + last.offsetWidth : 0));
         }
-    }, [insertAt]);
+    };
     // 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 = (): void => {

package/src/workspace/Workspace.tsx

@@ -1,4 +1,4 @@
-import { useMemo, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
 import { WorkspaceContext, type WorkspaceLayout } from './context.ts';
@@ -70,9 +70,6 @@ export function Workspace({
             )
         }
     });
-    const context = useMemo(
-        () => ({ layout, edges: { top: !hasToolbar, right: !rightOpen, bottom: true, left: !leftOpen } }),
-        [layout, hasToolbar, rightOpen, leftOpen]
-    );
+    const context = { layout, edges: { top: !hasToolbar, right: !rightOpen, bottom: true, left: !leftOpen } };
     return <WorkspaceContext value={context}>{element}</WorkspaceContext>;
 }