@adecore/ui 0.21.1 → 0.22.0

package/dist/popover/parts.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Popover as BasePopover } from '@base-ui-components/react/popover';
 import { PreviewCard as BasePreviewCard } from '@base-ui-components/react/preview-card';
 import { withClass } from '../class-name.js';
+import { splitPlacement } from '../placement.js';
 import { renderPositioner } from '../popup-layer.js';
 /*
  * The surface a popup is drawn on. `menu` is the padded card menus use, `picker` a card whose
@@ -18,12 +19,14 @@ export const PopoverClose = BasePopover.Close;
 export const PopoverTitle = BasePopover.Title;
 export const PopoverDescription = BasePopover.Description;
 /* The portal, the positioner and the popup of a popover: under its trigger and lined up with its start unless it says otherwise. */
-export function PopoverPopup({ variant = 'menu', side = 'bottom', align = 'start', sideOffset = 8, alignOffset, collisionPadding, collisionBoundary, collisionAvoidance, anchor, sticky, positionMethod, className, ...props }) {
-    return (_jsx(BasePopover.Portal, { children: _jsx(BasePopover.Positioner, { className: "popup-positioner", render: renderPositioner, side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, collisionPadding: collisionPadding, collisionBoundary: collisionBoundary, collisionAvoidance: collisionAvoidance, anchor: anchor, sticky: sticky, positionMethod: positionMethod, children: _jsx(BasePopover.Popup, { className: withClass(POPUP_VARIANT[variant], className), ...props }) }) }));
+export function PopoverPopup({ variant = 'menu', side = 'bottom', align = 'start', sideOffset = 8, className, ...props }) {
+    const [placement, popupProps] = splitPlacement(props);
+    return (_jsx(BasePopover.Portal, { children: _jsx(BasePopover.Positioner, { className: "popup-positioner", render: renderPositioner, ...placement, side: side, align: align, sideOffset: sideOffset, children: _jsx(BasePopover.Popup, { className: withClass(POPUP_VARIANT[variant], className), ...popupProps }) }) }));
 }
 export const PreviewCardRoot = BasePreviewCard.Root;
 export const PreviewCardTrigger = BasePreviewCard.Trigger;
 /* A card that opens while the pointer rests on its trigger, drawn like a popover. */
-export function PreviewCardPopup({ variant = 'menu', side = 'bottom', align = 'start', sideOffset = 8, alignOffset, collisionPadding, collisionBoundary, collisionAvoidance, anchor, sticky, positionMethod, className, ...props }) {
-    return (_jsx(BasePreviewCard.Portal, { children: _jsx(BasePreviewCard.Positioner, { className: "z-(--z-popup)", side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, collisionPadding: collisionPadding, collisionBoundary: collisionBoundary, collisionAvoidance: collisionAvoidance, anchor: anchor, sticky: sticky, positionMethod: positionMethod, children: _jsx(BasePreviewCard.Popup, { className: withClass(POPUP_VARIANT[variant], className), ...props }) }) }));
+export function PreviewCardPopup({ variant = 'menu', side = 'bottom', align = 'start', sideOffset = 8, className, ...props }) {
+    const [placement, popupProps] = splitPlacement(props);
+    return (_jsx(BasePreviewCard.Portal, { children: _jsx(BasePreviewCard.Positioner, { className: "z-(--z-popup)", ...placement, side: side, align: align, sideOffset: sideOffset, children: _jsx(BasePreviewCard.Popup, { className: withClass(POPUP_VARIANT[variant], className), ...popupProps }) }) }));
 }

package/dist/shortcut.js

@@ -14,7 +14,13 @@ const PUNCTUATION_CODES = {
 const CHARACTER_KEYS = new Set(['+', '-', '=']);
 const NAMED_KEYS = new Set(['Enter', 'Escape', 'Backspace', 'Delete', 'Tab', 'Space', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);
 const FUNCTION_KEY = /^F([1-9]|1[0-2])$/;
-const MODIFIER_WORDS = ['Mod', 'Ctrl', 'Meta', 'Alt', 'Shift'];
+const MODIFIER_FIELDS = {
+    Mod: 'mod',
+    Ctrl: 'ctrl',
+    Meta: 'meta',
+    Alt: 'alt',
+    Shift: 'shift'
+};
 const isKey = (word) => /^[A-Za-z0-9]$/.test(word) || word in PUNCTUATION_CODES || CHARACTER_KEYS.has(word) || NAMED_KEYS.has(word) || FUNCTION_KEY.test(word);
 /**
  * Parses `Mod+Shift+K`. Throws on a word it does not know or on two keys, so a typo in a table fails
@@ -25,9 +31,8 @@ export const shortcut = (text) => {
     const words = text === '+' ? ['+'] : text.endsWith('++') ? [...text.slice(0, -2).split('+'), '+'] : text.split('+');
     const result = { mod: false, ctrl: false, meta: false, alt: false, shift: false, key: '' };
     for (const word of words) {
-        const modifier = MODIFIER_WORDS.find((candidate) => candidate === word);
-        if (modifier) {
-            result[modifier === 'Mod' ? 'mod' : modifier === 'Ctrl' ? 'ctrl' : modifier === 'Meta' ? 'meta' : modifier === 'Alt' ? 'alt' : 'shift'] = true;
+        if (Object.hasOwn(MODIFIER_FIELDS, word)) {
+            result[MODIFIER_FIELDS[word]] = true;
             continue;
         }
         if (!isKey(word)) {

package/dist/tabs/parts.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, createContext, isValidElement, useContext, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { ChevronDown, X } from 'lucide-react';
@@ -77,7 +77,8 @@ export function TabsList({ className, children, start, end, ...props }) {
     });
     const visible = shown === null ? tabs : shown.map((index) => tabs[index]);
     const hidden = shown === null ? [] : tabs.filter((_, index) => !shown.includes(index));
-    return (_jsxs("div", { ref: strip, className: clsx('relative flex items-center gap-4 border-b border-border', className), children: [start !== undefined && start !== null && (_jsx("div", { ref: head, className: "flex shrink-0 items-center gap-1", children: start })), _jsx(BaseTabs.List, { className: "flex min-w-0 items-end gap-4", ...props, children: visible }), hidden.length > 0 && (_jsxs(MenuRoot, { children: [_jsxs(MenuTrigger, { className: MORE, children: [t('tabs.more'), _jsx(Icon, { icon: ChevronDown, size: 14 })] }), _jsx(MenuPopup, { align: "end", className: "min-w-48", children: _jsx(InMenuContext, { value: true, children: hidden.map((tab) => (_jsx(MenuItem, { disabled: tab.props.disabled, onClick: () => select(tab.props.value), children: tab.props.children }, tab.key))) }) })] })), end !== undefined && end !== null && (_jsx("div", { ref: tail, className: clsx('flex shrink-0 items-center gap-1', hidden.length === 0 && 'ml-auto'), children: end })), _jsxs("div", { ref: measure, "aria-hidden": true, inert: true, className: "pointer-events-none invisible absolute top-0 left-0 flex gap-4", children: [tabs.map((tab) => (_jsxs("span", { className: TAB, children: [tab.props.children, tab.props.onClose !== undefined && _jsx("span", { className: "size-5 shrink-0" })] }, tab.key))), _jsxs("span", { className: MORE, children: [t('tabs.more'), _jsx(Icon, { icon: ChevronDown, size: 14 })] })] })] }));
+    const more = (_jsxs(_Fragment, { children: [t('tabs.more'), _jsx(Icon, { icon: ChevronDown, size: 14 })] }));
+    return (_jsxs("div", { ref: strip, className: clsx('relative flex items-center gap-4 border-b border-border', className), children: [start !== undefined && start !== null && (_jsx("div", { ref: head, className: "flex shrink-0 items-center gap-1", children: start })), _jsx(BaseTabs.List, { className: "flex min-w-0 items-end gap-4", ...props, children: visible }), hidden.length > 0 && (_jsxs(MenuRoot, { children: [_jsx(MenuTrigger, { className: MORE, children: more }), _jsx(MenuPopup, { align: "end", className: "min-w-48", children: _jsx(InMenuContext, { value: true, children: hidden.map((tab) => (_jsx(MenuItem, { disabled: tab.props.disabled, onClick: () => select(tab.props.value), children: tab.props.children }, tab.key))) }) })] })), end !== undefined && end !== null && (_jsx("div", { ref: tail, className: clsx('flex shrink-0 items-center gap-1', hidden.length === 0 && 'ml-auto'), children: end })), _jsxs("div", { ref: measure, "aria-hidden": true, inert: true, className: "pointer-events-none invisible absolute top-0 left-0 flex gap-4", children: [tabs.map((tab) => (_jsxs("span", { className: TAB, children: [tab.props.children, tab.props.onClose !== undefined && _jsx("span", { className: "size-5 shrink-0" })] }, tab.key))), _jsx("span", { className: MORE, children: more })] })] }));
 }
 /* The close button stays out of the tab order, so a closable tab is still one stop; the keys close it from the tab itself. */
 export function TabsTab({ className, onClose, children, ...props }) {

package/dist/tree/parts.js

@@ -9,6 +9,11 @@ import { Icon } from '../Icon.js';
 import { mergeRefs } from '../merge-refs.js';
 import { treeRowStyle } from './style.js';
 import { TREE_ROWS, useTreeShift } from './use-tree-shift.js';
+/* A handler that keeps the event to the control, so the row under it never sees the press. */
+const stopped = (handler) => (event) => {
+    event.stopPropagation();
+    handler?.(event);
+};
 export function TreeRoot({ overflow = 'truncate', render, className, ref, children, ...props }) {
     const { attach, bar } = useTreeShift(TREE_ROWS);
     const scrolls = overflow === 'scroll';
@@ -76,10 +81,7 @@ export function TreeChevron({ expanded, onExpandedChange, render, className, ref
                     onExpandedChange?.(!expanded);
                 }
             },
-            onDoubleClick: (event) => {
-                event.stopPropagation();
-                onDoubleClick?.(event);
-            },
+            onDoubleClick: stopped(onDoubleClick),
             children: _jsx(Icon, { icon: ChevronRight, size: 12, className: expanded ? 'rotate-90' : undefined })
         }
     });
@@ -99,22 +101,10 @@ export function TreeControl({ render, className, ref, onClick, onDoubleClick, on
             ...props,
             'data-tree-control': true,
             className: clsx('adecore-tree-control', className),
-            onClick: (event) => {
-                event.stopPropagation();
-                onClick?.(event);
-            },
-            onDoubleClick: (event) => {
-                event.stopPropagation();
-                onDoubleClick?.(event);
-            },
-            onKeyDown: (event) => {
-                event.stopPropagation();
-                onKeyDown?.(event);
-            },
-            onPointerDown: (event) => {
-                event.stopPropagation();
-                onPointerDown?.(event);
-            }
+            onClick: stopped(onClick),
+            onDoubleClick: stopped(onDoubleClick),
+            onKeyDown: stopped(onKeyDown),
+            onPointerDown: stopped(onPointerDown)
         }
     });
 }

package/dist/tree/use-tree-shift.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { clampShift, maxShift, SHIFT_PROPERTY, shiftNeed, shiftThumb, sidewaysDelta } from '../file-tree/shift.js';
+import { clampShift, maxShift, SHIFT_PROPERTY, shiftNeed, shiftThumb, sidewaysDelta } from './shift.js';
 const HIDE_AFTER = 900;
 const NEAR_BOTTOM = 16;
 /*

package/dist/workspace/SplitView.js

@@ -12,6 +12,11 @@ import { TabStrip } from './TabStrip.js';
 import { dropPreviewPath, rectPreview, tabPreview } 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. */
+function paneElement(container, attribute, paneId) {
+    const selector = attribute === 'splitPane' ? '[data-split-pane]' : '[data-split-header]';
+    return Array.from(container?.querySelectorAll(selector) ?? []).find((element) => element.dataset[attribute] === paneId);
+}
 function Divider({ divider, minimumResizeShare, onResize, onEqualize }) {
     const { t } = useTranslation('ui');
     const cleanup = useRef(null);
@@ -94,7 +99,7 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
             element &&
             (!previous.isConnected || previous.closest('[hidden]')) &&
             (!active || active === element.ownerDocument.body || active === previous)) {
-            const pane = Array.from(element.querySelectorAll('[data-split-pane]')).find((item) => item.dataset.splitPane === value.focused);
+            const pane = paneElement(element, 'splitPane', value.focused);
             const target = pane?.querySelector('[role="tab"][aria-selected="true"]') ?? pane;
             target?.focus({ preventScroll: true });
         }
@@ -177,6 +182,14 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
         .sort((left, right) => (left.viewId < right.viewId ? -1 : left.viewId > right.viewId ? 1 : 0));
     const visible = new Map(geometry.panes.map((pane) => [pane.pane.id, pane]));
     const radius = (rect) => paneRadius(rect, measurement.width, measurement.height, edges, layout === 'roomy' ? 8 : 0);
+    // A header squares off the top corners of the body under it.
+    const bodyRadius = (rect, header) => {
+        const corners = radius(rect).split(' ');
+        if (header > 0) {
+            corners[0] = corners[1] = '0px';
+        }
+        return corners.join(' ');
+    };
     const bounds = panes.flatMap((pane) => {
         const rect = visible.get(pane.id);
         const header = Math.min(barHeight, rect?.height ?? 0);
@@ -188,11 +201,8 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
                 height: Math.max(0, rect.height - header) * measurement.scaleY
             }
             : { x: 0, y: 0, width: 0, height: 0 };
-        const corners = rect ? radius(rect).split(' ') : ['0px', '0px', '0px', '0px'];
-        if (header > 0) {
-            corners[0] = corners[1] = '0px';
-        }
-        return pane.views.map((viewId) => ({ viewId, paneId: pane.id, active: !!rect && pane.active === viewId, rect: body, borderRadius: corners.join(' ') }));
+        const borderRadius = rect ? bodyRadius(rect, header) : '0px 0px 0px 0px';
+        return pane.views.map((viewId) => ({ viewId, paneId: pane.id, active: !!rect && pane.active === viewId, rect: body, borderRadius }));
     });
     const boundsKey = JSON.stringify(bounds);
     const reportedBounds = useRef('');
@@ -244,7 +254,7 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
             return null;
         }
         const header = Math.min(barHeight, rect.height);
-        const strip = Array.from(root.current?.querySelectorAll('[data-split-header]') ?? []).find((element) => element.dataset.splitHeader === rect.pane.id);
+        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 side = inHeader ? undefined : (splitSideAt(rect, x, y) ?? 'center');
@@ -304,7 +314,7 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
         const next = options[0];
         if (next) {
             dispatch({ type: 'focus', paneId: next.pane.id });
-            const element = Array.from(root.current?.querySelectorAll('[data-split-pane]') ?? []).find((pane) => pane.dataset.splitPane === next.pane.id);
+            const element = paneElement(root.current, 'splitPane', next.pane.id);
             element?.querySelector('[role="tab"][aria-selected="true"]')?.focus();
             if (!showTabs) {
                 element?.focus();
@@ -394,17 +404,13 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
                         const rect = visible.get(pane.id);
                         const active = !!rect && pane.active === viewId;
                         const header = Math.min(barHeight, rect?.height ?? 0);
-                        const corners = rect ? radius(rect).split(' ') : [];
-                        if (header > 0) {
-                            corners[0] = corners[1] = '0px';
-                        }
                         const position = rect
                             ? {
                                 left: rect.x,
                                 top: rect.y + header,
                                 width: rect.width,
                                 height: Math.max(0, rect.height - header),
-                                borderRadius: corners.join(' ')
+                                borderRadius: bodyRadius(rect, header)
                             }
                             : {};
                         return (_jsx("div", { id: id('view', viewId), role: "tabpanel", "aria-labelledby": showTabs && !renderPaneHeader ? id('tab', viewId) : undefined, "aria-label": !showTabs || renderPaneHeader ? (getTab?.(viewId).label ?? viewId) : undefined, className: "ade-split-content", "data-split-view-id": viewId, hidden: !active, inert: !active, tabIndex: 0, style: position, onFocusCapture: () => dispatch({ type: 'focus', paneId: pane.id }), onPointerDown: () => dispatch({ type: 'focus', paneId: pane.id }), children: renderView(viewId, { paneId: pane.id, active }) }, viewId));
@@ -413,7 +419,7 @@ export function SplitView({ value, onValueChange, renderView, getTab, renderPane
                                 type: 'equalizeAxis',
                                 axis: divider.axis,
                                 length: divider.axis === 'horizontal' ? measurement.width : measurement.height,
-                                gap: layout === 'roomy' ? 8 : 1
+                                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)}")` } }) }))] }))
         }

package/dist/workspace/TabStrip.js

@@ -8,6 +8,21 @@ import { Icon } from '../Icon.js';
 import { IconButton } from '../IconButton.js';
 import { Tooltip } from '../Tooltip.js';
 import { tabGapAt } 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) {
+        case 'ArrowRight':
+            return (index + 1) % count;
+        case 'ArrowLeft':
+            return (index + count - 1) % count;
+        case 'Home':
+            return 0;
+        case 'End':
+            return count - 1;
+        default:
+            return null;
+    }
+}
 export function TabStrip({ items, value, onValueChange, renderTab, focused = true, insertAt, onClose, onDoubleClick, onContextMenu, onDragStart, onDragEnd, onTabDragOver, onTabDrop, render, className, ref, ...props }) {
     const { t } = useTranslation('ui');
     const strip = useRef(null);
@@ -126,6 +141,7 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
     const { items, value, onValueChange } = context;
     const index = items.findIndex((candidate) => candidate.id === item.id);
     const close = () => context.close(item.id, onClose);
+    const closable = item.closable !== false && (onClose ?? context.onClose) !== undefined;
     return useRender({
         render,
         ref,
@@ -144,25 +160,17 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
                                 event.stopPropagation();
                                 (onDragStart ?? context.onDragStart)?.(item.id, event);
                             }, onDragEnd: onDragEnd ?? context.onDragEnd, onKeyDown: (event) => {
-                                const next = event.key === 'ArrowRight'
-                                    ? (index + 1) % items.length
-                                    : event.key === 'ArrowLeft'
-                                        ? (index + items.length - 1) % items.length
-                                        : event.key === 'Home'
-                                            ? 0
-                                            : event.key === 'End'
-                                                ? items.length - 1
-                                                : null;
+                                const next = tabIndexForKey(event.key, index, items.length);
                                 if (next !== null) {
                                     event.preventDefault();
                                     onValueChange(items[next].id);
                                     context.focus(next);
                                 }
-                                else if (event.key === 'Delete' && item.closable !== false && (onClose || context.onClose)) {
+                                else if (event.key === 'Delete' && closable) {
                                     event.preventDefault();
                                     close();
                                 }
-                            }, children: [item.icon, _jsx("span", { className: "truncate", children: item.label }), item.detail, item.attention, item.unsaved && (_jsx("span", { className: "ade-tab-unsaved", children: _jsx("span", { className: "sr-only", children: typeof item.unsaved === 'string' ? item.unsaved : t('workspace.unsaved') }) }))] }) }), item.pinned && _jsx(Icon, { icon: Pin, size: 12, className: "shrink-0 text-text-muted" }), item.closable !== false && (onClose || context.onClose) && (_jsx(IconButton, { icon: X, size: "2xs", label: t('workspace.closeTab', { name: item.label }), kbd: closeShortcut, className: "ade-document-tab-close", onClick: close }))] }))
+                            }, children: [item.icon, _jsx("span", { className: "truncate", children: item.label }), item.detail, item.attention, item.unsaved && (_jsx("span", { className: "ade-tab-unsaved", children: _jsx("span", { className: "sr-only", children: typeof item.unsaved === 'string' ? item.unsaved : t('workspace.unsaved') }) }))] }) }), item.pinned && _jsx(Icon, { icon: Pin, size: 12, className: "shrink-0 text-text-muted" }), closable && (_jsx(IconButton, { icon: X, size: "2xs", label: t('workspace.closeTab', { name: item.label }), kbd: closeShortcut, className: "ade-document-tab-close", onClick: close }))] }))
         }
     });
 }

package/dist/workspace/Workspace.js

@@ -2,12 +2,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import clsx from 'clsx';
 import { useRender } from '@base-ui-components/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 }) {
-    const hasSidebar = sidebar !== undefined && sidebar !== null && sidebar !== false;
-    const hasPanel = sidePanel !== undefined && sidePanel !== null && sidePanel !== false;
+    const hasSidebar = isPresent(sidebar);
+    const hasPanel = isPresent(sidePanel);
     const leftOpen = hasSidebar && (sidebarOpen ?? true);
     const rightOpen = hasPanel && (sidePanelOpen ?? true);
-    const hasToolbar = toolbar !== undefined && toolbar !== null && toolbar !== false;
+    const hasToolbar = isPresent(toolbar);
     const element = useRender({
         render,
         ref,

package/dist/workspace/model.js

@@ -188,6 +188,121 @@ function equalizeAxis(root, axis, length, gap) {
     };
     return distribute(root, length);
 }
+function addPane(layout, panes, pane, command) {
+    if (!pane || findSplitNode(layout.root, command.newPane.id) || findSplitNode(layout.root, command.splitId) || command.newPane.id === command.splitId) {
+        return layout;
+    }
+    const allViews = new Set(panes.flatMap((item) => item.views));
+    if (command.newPane.views.some((view) => allViews.has(view)) || new Set(command.newPane.views).size !== command.newPane.views.length) {
+        return layout;
+    }
+    const added = {
+        ...command.newPane,
+        active: command.newPane.views.includes(command.newPane.active ?? '') ? command.newPane.active : (command.newPane.views[0] ?? null)
+    };
+    return finish({ ...layout, maximized: null }, replace(layout.root, pane.id, () => beside(pane, added, command.side, command.splitId)), added.id);
+}
+function swapPanes(layout, panes, command) {
+    const source = panes.find((item) => item.id === command.sourceId);
+    const target = panes.find((item) => item.id === command.targetId);
+    if (!source || !target || source === target || source.views.length === 0 || (command.viewId !== undefined && !source.views.includes(command.viewId))) {
+        return layout;
+    }
+    if (command.viewId === undefined || source.views.length === 1) {
+        const exchange = (node) => {
+            if (node.id === source.id) {
+                return target;
+            }
+            if (node.id === target.id) {
+                return source;
+            }
+            return node.type === 'pane' ? node : { ...node, children: node.children.map(exchange) };
+        };
+        return finish({ ...layout, maximized: null }, exchange(layout.root), source.id);
+    }
+    const moving = command.viewId;
+    const displaced = target.active;
+    const sourceNext = displaced === null
+        ? without(source, [moving])
+        : {
+            ...source,
+            views: source.views.map((view) => (view === moving ? displaced : view)),
+            active: source.active === moving ? displaced : source.active
+        };
+    const targetNext = {
+        ...target,
+        views: displaced === null ? [moving] : target.views.map((view) => (view === displaced ? moving : view)),
+        active: moving
+    };
+    const root = replace(layout.root, source.id, () => sourceNext);
+    return finish({ ...layout, maximized: null }, replace(root, target.id, () => targetNext), target.id);
+}
+function moveViews(layout, panes, command) {
+    const source = panes.find((item) => item.id === command.sourceId);
+    const target = panes.find((item) => item.id === command.targetId);
+    if (!source || !target || (command.viewId !== undefined && !source.views.includes(command.viewId))) {
+        return layout;
+    }
+    const moving = command.viewId === undefined ? source.views : [command.viewId];
+    if (!moving.length || (source === target && (command.viewId === undefined || (command.side !== undefined && source.views.length === 1)))) {
+        return layout;
+    }
+    let added;
+    if (command.side) {
+        const id = command.viewId === undefined ? source.id : command.newPaneId;
+        if (!id ||
+            !command.splitId ||
+            id === command.splitId ||
+            findSplitNode(layout.root, command.splitId) ||
+            (findSplitNode(layout.root, id) && !(id === source.id && command.viewId === undefined))) {
+            return layout;
+        }
+        added = { type: 'pane', id, views: moving, active: command.viewId ?? source.active };
+    }
+    const remaining = without(source, moving);
+    const root = replace(layout.root, source.id, () => (remaining.views.length || source === target ? remaining : null));
+    if (!root) {
+        return layout;
+    }
+    const next = replace(root, target.id, (node) => {
+        if (node.type !== 'pane') {
+            return node;
+        }
+        if (added && command.side && command.splitId) {
+            return beside(node, added, command.side, command.splitId);
+        }
+        const gap = Math.max(0, Math.min(target.views.length, command.index ?? target.views.length));
+        const lifted = source === target ? target.views.slice(0, gap).filter((view) => moving.includes(view)).length : 0;
+        const views = [...node.views];
+        views.splice(gap - lifted, 0, ...moving);
+        return { ...node, views, active: command.viewId ?? source.active ?? views[0] ?? null };
+    });
+    return finish({ ...layout, maximized: null }, next, added?.id ?? target.id);
+}
+function resizeBranch(layout, command) {
+    const node = findSplitNode(layout.root, command.splitId);
+    if (!node || node.type !== 'split') {
+        return layout;
+    }
+    let sizes = [...node.sizes];
+    if (command.type === 'resize') {
+        if (command.sizes.length !== node.children.length || command.sizes.some((size) => !Number.isFinite(size) || size <= 0)) {
+            return layout;
+        }
+        sizes = shares(command.sizes, node.children.length);
+    }
+    else if (command.index === undefined) {
+        sizes = node.children.map(() => 1 / node.children.length);
+    }
+    else {
+        const index = command.index;
+        if (index < 0 || index >= sizes.length - 1) {
+            return layout;
+        }
+        sizes[index] = sizes[index + 1] = (sizes[index] + sizes[index + 1]) / 2;
+    }
+    return finish(layout, replace(layout.root, node.id, () => ({ ...node, sizes })));
+}
 /** Invalid or stale commands are no-ops. IDs for new nodes come from the caller. */
 export function updateSplitLayout(layout, command) {
     const panes = splitPanes(layout.root);
@@ -225,104 +340,12 @@ export function updateSplitLayout(layout, command) {
             views.splice(Math.max(0, Math.min(views.length, command.index ?? views.length)), 0, command.viewId);
             return finish(layout, replace(layout.root, pane.id, () => ({ ...pane, views, active: command.viewId })), pane.id);
         }
-        case 'split': {
-            if (!pane ||
-                findSplitNode(layout.root, command.newPane.id) ||
-                findSplitNode(layout.root, command.splitId) ||
-                command.newPane.id === command.splitId) {
-                return layout;
-            }
-            const allViews = new Set(panes.flatMap((item) => item.views));
-            if (command.newPane.views.some((view) => allViews.has(view)) || new Set(command.newPane.views).size !== command.newPane.views.length) {
-                return layout;
-            }
-            const added = {
-                ...command.newPane,
-                active: command.newPane.views.includes(command.newPane.active ?? '') ? command.newPane.active : (command.newPane.views[0] ?? null)
-            };
-            return finish({ ...layout, maximized: null }, replace(layout.root, pane.id, () => beside(pane, added, command.side, command.splitId)), added.id);
-        }
-        case 'swap': {
-            const source = panes.find((item) => item.id === command.sourceId);
-            const target = panes.find((item) => item.id === command.targetId);
-            if (!source ||
-                !target ||
-                source === target ||
-                source.views.length === 0 ||
-                (command.viewId !== undefined && !source.views.includes(command.viewId))) {
-                return layout;
-            }
-            if (command.viewId === undefined || source.views.length === 1) {
-                const exchange = (node) => {
-                    if (node.id === source.id) {
-                        return target;
-                    }
-                    if (node.id === target.id) {
-                        return source;
-                    }
-                    return node.type === 'pane' ? node : { ...node, children: node.children.map(exchange) };
-                };
-                return finish({ ...layout, maximized: null }, exchange(layout.root), source.id);
-            }
-            const moving = command.viewId;
-            const displaced = target.active;
-            const sourceNext = displaced === null
-                ? without(source, [moving])
-                : {
-                    ...source,
-                    views: source.views.map((view) => (view === moving ? displaced : view)),
-                    active: source.active === moving ? displaced : source.active
-                };
-            const targetNext = {
-                ...target,
-                views: displaced === null ? [moving] : target.views.map((view) => (view === displaced ? moving : view)),
-                active: moving
-            };
-            const root = replace(layout.root, source.id, () => sourceNext);
-            return finish({ ...layout, maximized: null }, replace(root, target.id, () => targetNext), target.id);
-        }
-        case 'move': {
-            const source = panes.find((item) => item.id === command.sourceId);
-            const target = panes.find((item) => item.id === command.targetId);
-            if (!source || !target || (command.viewId !== undefined && !source.views.includes(command.viewId))) {
-                return layout;
-            }
-            const moving = command.viewId === undefined ? source.views : [command.viewId];
-            if (!moving.length || (source === target && (command.viewId === undefined || (command.side !== undefined && source.views.length === 1)))) {
-                return layout;
-            }
-            let added;
-            if (command.side) {
-                const id = command.viewId === undefined ? source.id : command.newPaneId;
-                if (!id ||
-                    !command.splitId ||
-                    id === command.splitId ||
-                    findSplitNode(layout.root, command.splitId) ||
-                    (findSplitNode(layout.root, id) && !(id === source.id && command.viewId === undefined))) {
-                    return layout;
-                }
-                added = { type: 'pane', id, views: moving, active: command.viewId ?? source.active };
-            }
-            const remaining = without(source, moving);
-            const root = replace(layout.root, source.id, () => (remaining.views.length || source === target ? remaining : null));
-            if (!root) {
-                return layout;
-            }
-            const next = replace(root, target.id, (node) => {
-                if (node.type !== 'pane') {
-                    return node;
-                }
-                if (added && command.side && command.splitId) {
-                    return beside(node, added, command.side, command.splitId);
-                }
-                const gap = Math.max(0, Math.min(target.views.length, command.index ?? target.views.length));
-                const lifted = source === target ? target.views.slice(0, gap).filter((view) => moving.includes(view)).length : 0;
-                const views = [...node.views];
-                views.splice(gap - lifted, 0, ...moving);
-                return { ...node, views, active: command.viewId ?? source.active ?? views[0] ?? null };
-            });
-            return finish({ ...layout, maximized: null }, next, added?.id ?? target.id);
-        }
+        case 'split':
+            return addPane(layout, panes, pane, command);
+        case 'swap':
+            return swapPanes(layout, panes, command);
+        case 'move':
+            return moveViews(layout, panes, command);
         case 'equalizeAxis': {
             const length = command.length ?? 1;
             const gap = command.gap ?? 0;
@@ -332,29 +355,7 @@ export function updateSplitLayout(layout, command) {
             return finish(layout, equalizeAxis(layout.root, command.axis, length, gap));
         }
         case 'resize':
-        case 'equalize': {
-            const node = findSplitNode(layout.root, command.splitId);
-            if (!node || node.type !== 'split') {
-                return layout;
-            }
-            let sizes = [...node.sizes];
-            if (command.type === 'resize') {
-                if (command.sizes.length !== node.children.length || command.sizes.some((size) => !Number.isFinite(size) || size <= 0)) {
-                    return layout;
-                }
-                sizes = shares(command.sizes, node.children.length);
-            }
-            else if (command.index === undefined) {
-                sizes = node.children.map(() => 1 / node.children.length);
-            }
-            else {
-                const index = command.index;
-                if (index < 0 || index >= sizes.length - 1) {
-                    return layout;
-                }
-                sizes[index] = sizes[index + 1] = (sizes[index] + sizes[index + 1]) / 2;
-            }
-            return finish(layout, replace(layout.root, node.id, () => ({ ...node, sizes })));
-        }
+        case 'equalize':
+            return resizeBranch(layout, command);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.21.1",
+  "version": "0.22.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",
@@ -85,7 +85,6 @@
     "@types/react-dom": "^19.3.0",
     "i18next": "^26.4.2",
     "opentype.js": "2.0.0",
-    "oxc-parser": "^0.151.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15",

package/src/DisabledReason.tsx

@@ -1,16 +1,15 @@
 import type { ReactElement } from 'react';
 import { Tooltip } from './Tooltip.tsx';
 
-/*
- * Why a row cannot be picked, in a tooltip beside it rather than in the row itself. A reason is a
- * sentence, and a sentence in a menu row sets the width of the whole menu. A row with nothing in its
- * way is handed through untouched, so it carries no tooltip at all.
- */
 export interface DisabledReasonProps {
     reason: string | null;
     children: ReactElement<Record<string, unknown>>;
 }
 
+/*
+ * Why a row cannot be picked, in a tooltip beside it rather than in the row itself: a sentence in a menu
+ * row sets the width of the whole menu. A row with nothing in its way is handed through untouched.
+ */
 export function DisabledReason({ reason, children }: DisabledReasonProps) {
     if (reason === null) {
         return children;

package/src/Field.tsx

@@ -9,6 +9,8 @@ const ERROR = 'text-xs text-status-error';
 // Beside the control the label reads at the size of what is typed, on the middle of the control's first line however tall it grows.
 const LABEL_BESIDE = 'flex h-8 items-center self-start text-sm text-text-muted';
 
+const isShown = (line: ReactNode): boolean => line !== undefined && line !== null && line !== '';
+
 export type FieldHintProps = useRender.ComponentProps<'p'>;
 
 /* The line under a field that says what goes in it. */
@@ -80,8 +82,8 @@ export function Field({ label, hint, error, group = false, orientation = 'vertic
     const horizontal = orientation === 'horizontal';
     const id = useId();
     const hasLabel = label !== undefined;
-    const hasHint = hint !== undefined && hint !== null && hint !== '';
-    const hasError = error !== undefined && error !== null && error !== '';
+    const hasHint = isShown(hint);
+    const hasError = isShown(error);
     const describedBy = [hasHint ? `${id}-hint` : null, hasError ? `${id}-error` : null].filter((part) => part !== null).join(' ') || undefined;
     return (
         <div