@adecore/ui 0.21.0 → 0.21.2

package/README.md

@@ -54,6 +54,10 @@ From there, every component is ready to use:
 
 [Getting started](https://adecore.dev/ui/guide/getting-started) covers the rest: the format source, a third language, the optional pieces and how to work on a local checkout.
 
+## Workspaces
+
+`Workspace` lays out a toolbar, side regions and content in a standard or a roomy layout. `SplitView` nests resizable panels with document tabs, and `TabStrip` draws the tabs. A view stays mounted when it moves to another panel. The app keeps the documents' state, decides whether a tab may close and saves the layout. The [workspace guide](https://adecore.dev/ui/layout/workspace) covers the controlled layout model, with demos.
+
 ## Entry points
 
 | Import | What it holds |
@@ -81,7 +85,3 @@ Nothing else is public. No module does work on import, so a bundler keeps only w
 ## License
 
 FSL-1.1-MIT, see [LICENSE](./LICENSE).
-
-## Workspaces
-
-`Workspace`, `SplitView` and `TabStrip` provide standard or roomy layouts, nested resizable panels and open document tabs. Views stay mounted when they move between panels. Applications own document state, close approval and persistence. See the [workspace guide](https://adecore.dev/ui/layout/workspace) for the controlled layout model and demos.

package/dist/DisabledReason.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from './Tooltip.js';
+/*
+ * 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 }) {
     if (reason === null) {
         return children;

package/dist/Field.js

@@ -8,6 +8,7 @@ const HINT = 'text-xs text-text-muted';
 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) => line !== undefined && line !== null && line !== '';
 /* The line under a field that says what goes in it. */
 export function FieldHint({ render, className, ref, ...props }) {
     return useRender({
@@ -41,8 +42,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 (_jsxs("div", { ref: ref, role: group ? 'group' : undefined, "aria-labelledby": group && hasLabel ? `${id}-label` : undefined, "aria-describedby": group ? describedBy : undefined, className: clsx(horizontal ? 'grid grid-cols-[112px_minmax(0,1fr)] gap-x-3 gap-y-1.5' : 'flex flex-col gap-1.5', className), children: [hasLabel && (_jsx(FieldLabel, { id: id, group: group, horizontal: horizontal, children: label })), _jsx(FieldContext, { value: group ? null : { id: `${id}-control`, describedBy, invalid: hasError }, children: horizontal ? _jsx("div", { className: "col-start-2 min-w-0", children: children }) : children }), hasHint && (_jsx("p", { id: `${id}-hint`, className: clsx(HINT, horizontal && 'col-start-2'), children: hint })), hasError && (_jsx("p", { id: `${id}-error`, role: "alert", className: clsx(ERROR, 'break-words', horizontal && 'col-start-2'), children: error }))] }));
 }

package/dist/Input.js

@@ -1,17 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { useFieldControl } from './field-context.js';
+import { fieldControlProps, useFieldControl } from './field-context.js';
 import { Icon } from './Icon.js';
 /* The one text input: one border and one focus ring at the one height or the compact one. */
 export function Input({ size = 'md', mono = false, icon, className, id, ...props }) {
     const field = useFieldControl();
     const small = size === 'sm';
-    const control = {
-        id: id ?? field?.id,
-        'aria-describedby': field?.describedBy,
-        'aria-invalid': field?.invalid || undefined,
-        ...props
-    };
+    const control = { ...fieldControlProps(field, id), ...props };
     if (icon === undefined) {
         return _jsx("input", { ...control, className: clsx('field', small && 'field-sm', mono && 'font-mono text-code', className) });
     }
@@ -21,5 +16,5 @@ export function Input({ size = 'md', mono = false, icon, className, id, ...props
 /* A field of a few lines: a commit message, the body of a pull request, a note. At least 64px tall; `rows` makes it taller. */
 export function TextArea({ size = 'md', resize = 'none', mono = false, className, id, ...props }) {
     const field = useFieldControl();
-    return (_jsx("textarea", { id: id ?? field?.id, "aria-describedby": field?.describedBy, "aria-invalid": field?.invalid || undefined, ...props, className: clsx('field h-auto min-h-16 py-1.5', size === 'sm' && 'field-sm', resize === 'vertical' ? 'resize-y' : 'resize-none', mono && 'font-mono text-code', className) }));
+    return (_jsx("textarea", { ...fieldControlProps(field, id), ...props, className: clsx('field h-auto min-h-16 py-1.5', size === 'sm' && 'field-sm', resize === 'vertical' ? 'resize-y' : 'resize-none', mono && 'font-mono text-code', className) }));
 }

package/dist/SegmentBar.js

@@ -38,7 +38,8 @@ export function SegmentBar({ parts, range, size = 'md', onSelect, label, classNa
             const text = (_jsx("span", { ref: (element) => {
                     labels.current[i] = element;
                 }, className: size === 'sm' ? 'sr-only' : 'min-w-0 truncate', children: part.label }));
-            const body = onSelect === undefined ? (_jsx("span", { className: fill, style: { backgroundColor: part.color }, "aria-current": part.current ? true : undefined, children: text })) : (_jsx("button", { type: "button", className: fill, style: { backgroundColor: part.color }, "aria-current": part.current ? true : undefined, onClick: () => onSelect(index), children: text }));
+            const look = { className: fill, style: { backgroundColor: part.color }, 'aria-current': part.current ? true : undefined };
+            const body = onSelect === undefined ? (_jsx("span", { ...look, children: text })) : (_jsx("button", { type: "button", ...look, onClick: () => onSelect(index), children: text }));
             return (_jsx("li", { className: clsx('absolute inset-y-0 focus-within:z-10', touches && 'pr-0.5'), style: { left: `${left * 100}%`, width: `${(right - left) * 100}%` }, children: part.label === undefined ? (body) : (_jsx(Tooltip, { label: part.label, disabled: size === 'md' && !cut[i], children: body })) }, index));
         }) }));
 }

package/dist/Separator.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
-/* A hairline between two groups of controls in a toolbar-like row. It carries no margin of its own.
-   The row's gap puts 8px on either side of it, which is what makes the line read as a divider and
-   not as a group of its own. Between two groups of menu rows it is `Menu.Separator`. */
+/* A hairline between two groups of controls in a toolbar-like row. No margin of its own: the row's gap
+   puts 8px on either side, which makes it read as a divider. Between groups of menu rows it is `Menu.Separator`. */
 export function Separator({ orientation = 'vertical', className, ref }) {
     return _jsx("span", { ref: ref, "aria-hidden": true, className: clsx(orientation === 'vertical' ? 'h-4 w-px' : 'h-px w-full', 'shrink-0 bg-border', className) });
 }

package/dist/SlidingColumn.js

@@ -13,7 +13,7 @@ const TRANSITION_MS = 200;
  * drag handle.
  */
 export function SlidingColumn({ open, width, gap = 0, bounds, onWidthChange, instant = false, body, className, ref, children }) {
-    /* Closed and done animating. Until then the contents stay mounted, so a close plays out. */
+    /* Closed and done animating. */
     const [settled, setSettled] = useState(!open);
     /* A width that lands without a transition fires no `transitionend`, so the motion it would have
        ended is over in the same commit that starts it. */

package/dist/ZoomControls.js

@@ -8,9 +8,12 @@ import { Kbd } from './Kbd.js';
 import { MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger } from './menu/parts.js';
 import { Tooltip } from './Tooltip.js';
 import { activeZoomPreset, steppedZoom, ZOOM_PRESETS } from './zoom.js';
+function MenuIcon({ icon }) {
+    return (_jsx("span", { className: "grid h-4 w-4 place-items-center", children: _jsx(Icon, { icon: icon, size: 14 }) }));
+}
 /* The zoom group of a dock: out, the readout with its presets, in, and fit everything. */
 export function ZoomControls({ zoom, onZoomChange, onFitAll, presets = ZOOM_PRESETS, labels = {}, shortcuts = {}, selection, className, ref }) {
     const { t } = useTranslation('ui');
     const preset = activeZoomPreset(zoom, presets);
-    return (_jsxs(ButtonGroup, { ref: ref, className: className, children: [_jsx(IconButton, { icon: Minus, label: labels.out ?? t('zoom.out'), onClick: () => onZoomChange(steppedZoom(zoom, -10)) }), _jsxs(MenuRoot, { children: [_jsx(Tooltip, { label: labels.presets ?? t('zoom.presets'), children: _jsxs(MenuTrigger, { className: "h-8 min-w-14 rounded-lg px-1 text-xs text-text-muted tabular-nums hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text", children: [Math.round(zoom * 100), "%"] }) }), _jsxs(MenuPopup, { side: "top", sideOffset: 10, align: "center", className: "min-w-44", children: [_jsx(MenuRadioGroup, { value: preset, onValueChange: (value) => onZoomChange(value / 100), children: presets.map((percent) => (_jsxs(MenuRadioItem, { value: percent, children: [_jsxs("span", { className: "tabular-nums", children: [percent, "%"] }), percent === 100 && shortcuts.zoomReset && _jsx(Kbd, { shortcut: shortcuts.zoomReset })] }, percent))) }), _jsx(MenuSeparator, {}), _jsxs(MenuItem, { onClick: onFitAll, children: [_jsx("span", { className: "grid h-4 w-4 place-items-center", children: _jsx(Icon, { icon: Maximize, size: 14 }) }), labels.fit ?? t('zoom.fit'), " ", shortcuts.fitAll && _jsx(Kbd, { shortcut: shortcuts.fitAll })] }), selection && (_jsxs(MenuItem, { disabled: !selection.enabled, onClick: selection.onZoom, children: [_jsx("span", { className: "grid h-4 w-4 place-items-center", children: _jsx(Icon, { icon: Scan, size: 14 }) }), selection.label, " ", selection.shortcut && _jsx(Kbd, { shortcut: selection.shortcut })] }))] })] }), _jsx(IconButton, { icon: Plus, label: labels.in ?? t('zoom.in'), onClick: () => onZoomChange(steppedZoom(zoom, 10)) }), _jsx(IconButton, { icon: Maximize, label: labels.fitEverything ?? t('zoom.fitEverything'), kbd: shortcuts.fitAll, onClick: onFitAll })] }));
+    return (_jsxs(ButtonGroup, { ref: ref, className: className, children: [_jsx(IconButton, { icon: Minus, label: labels.out ?? t('zoom.out'), onClick: () => onZoomChange(steppedZoom(zoom, -10)) }), _jsxs(MenuRoot, { children: [_jsx(Tooltip, { label: labels.presets ?? t('zoom.presets'), children: _jsxs(MenuTrigger, { className: "h-8 min-w-14 rounded-lg px-1 text-xs text-text-muted tabular-nums hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text", children: [Math.round(zoom * 100), "%"] }) }), _jsxs(MenuPopup, { side: "top", sideOffset: 10, align: "center", className: "min-w-44", children: [_jsx(MenuRadioGroup, { value: preset, onValueChange: (value) => onZoomChange(value / 100), children: presets.map((percent) => (_jsxs(MenuRadioItem, { value: percent, children: [_jsxs("span", { className: "tabular-nums", children: [percent, "%"] }), percent === 100 && shortcuts.zoomReset && _jsx(Kbd, { shortcut: shortcuts.zoomReset })] }, percent))) }), _jsx(MenuSeparator, {}), _jsxs(MenuItem, { onClick: onFitAll, children: [_jsx(MenuIcon, { icon: Maximize }), labels.fit ?? t('zoom.fit'), " ", shortcuts.fitAll && _jsx(Kbd, { shortcut: shortcuts.fitAll })] }), selection && (_jsxs(MenuItem, { disabled: !selection.enabled, onClick: selection.onZoom, children: [_jsx(MenuIcon, { icon: Scan }), selection.label, " ", selection.shortcut && _jsx(Kbd, { shortcut: selection.shortcut })] }))] })] }), _jsx(IconButton, { icon: Plus, label: labels.in ?? t('zoom.in'), onClick: () => onZoomChange(steppedZoom(zoom, 10)) }), _jsx(IconButton, { icon: Maximize, label: labels.fitEverything ?? t('zoom.fitEverything'), kbd: shortcuts.fitAll, onClick: onFitAll })] }));
 }

package/dist/field-context.d.ts

@@ -5,3 +5,8 @@ export interface FieldControl {
 }
 export declare const FieldContext: import("react").Context<FieldControl | null>;
 export declare const useFieldControl: () => FieldControl | null;
+export declare const fieldControlProps: (field: FieldControl | null, id: string | undefined) => {
+    id: string | undefined;
+    'aria-describedby': string | undefined;
+    'aria-invalid': true | undefined;
+};

package/dist/field-context.js

@@ -2,3 +2,9 @@ import { createContext, useContext } from 'react';
 export const FieldContext = createContext(null);
 /* What an `Input` or a `TextArea` inside a `Field` takes over: the id its label points at, the hint and the error it is described by. */
 export const useFieldControl = () => useContext(FieldContext);
+/* The attributes that connect a control to its field; an `id` the caller sets wins over the field's. */
+export const fieldControlProps = (field, id) => ({
+    id: id ?? field?.id,
+    'aria-describedby': field?.describedBy,
+    'aria-invalid': field?.invalid || undefined
+});

package/dist/file-icon.js

@@ -1,11 +1,10 @@
 import { createFileTreeIconResolver } from '@pierre/trees';
 import { SETI_BY_FILE_EXTENSION, SETI_BY_FILE_NAME, SETI_BY_FILE_NAME_CONTAINS, SETI_DEFAULT_SYMBOL, SETI_SPRITE_SHEET } from './seti-icons.js';
 const SPRITE_ELEMENT_ID = 'adecore-ui-file-icon-sprite';
-/* The glyphs are Seti's (`seti-icons.ts`), which knows far more file types than the sets the tree
-   ships with. The tree only colors its own sets, so every symbol carries its hue in its id and the
-   sprite brings the rules that color it. A tree takes all of it as configuration where everything
-   drawn beside it calls `fileIconFor`, so a tab, a picker row and a tree row never disagree about
-   what a file is. Hand this to the tree. */
+/* Hand this to the tree. The glyphs are Seti's (`seti-icons.ts`), which knows far more file types than
+   the tree's own sets. The tree colors only those, so every symbol carries its hue in its id and the
+   sprite brings the rules that color it. Everything drawn beside a tree calls `fileIconFor`, so a tab,
+   a picker row and a tree row never disagree about what a file is. */
 export const FILE_TREE_ICONS = {
     set: 'none',
     spriteSheet: SETI_SPRITE_SHEET,
@@ -22,11 +21,10 @@ const resolveIcon = (...args) => {
 };
 /*
  * The id of the `<symbol>` the set gives a file, in the sprite `mountFileIconSprite` puts in the
- * document. The path may be absolute or relative. Only the last segment decides, first by exact
- * name (`package.json`, `.gitignore`), then by a part of the name (`Dockerfile.dev`), then by the
- * longest extension that matches (`spec.ts` before `ts`). Anything the set does not know falls back
- * to its generic file icon, and so does a directory. The tree marks a folder with the chevron that
- * turns as it opens, not with a glyph of its own.
+ * document. Only the last segment of the path decides, first by exact name (`package.json`), then by
+ * a part of the name (`Dockerfile.dev`), then by the longest extension that matches (`spec.ts` before
+ * `ts`). Anything else falls back to the generic file icon, a directory included: the tree marks a
+ * folder with its chevron, not a glyph.
  */
 export const fileIconFor = (path) => resolveIcon('file-tree-icon-file', path).name;
 /* The tree carries the sprite into its own shadow root, out of reach of anything that draws an

package/dist/file-tree/parts.js

@@ -10,7 +10,7 @@ import { directoryHandle, extendsSelection, followFocus, movesFocus, menuTargets
 import { useFileTreeShift } from './use-file-tree-shift.js';
 import { useFileTreeSlots } from './use-slots.js';
 function inSlot(event) {
-    return event.nativeEvent.composedPath().some((node) => node instanceof HTMLElement && node.hasAttribute('data-tree-slot'));
+    return event.composedPath().some((node) => node instanceof HTMLElement && node.hasAttribute('data-tree-slot'));
 }
 export function FileTreeRoot({ model, label, resetKey, selectionFollowsFocus = true, onActivate, onFocusMove, onLoadChildren, onExpandedPathsChange, onRowContextMenu, onRowDragStart, renderControl, renderDecoration, treeProps, render, className, ref, children, onClick, onKeyDownCapture, ...props }) {
     const { t } = useTranslation('ui');
@@ -73,7 +73,7 @@ export function FileTreeRoot({ model, label, resetKey, selectionFollowsFocus = t
             return;
         }
         const onClickRow = (event) => {
-            if (event.defaultPrevented || inSlot({ nativeEvent: event }) || extendsSelection(event)) {
+            if (event.defaultPrevented || inSlot(event) || extendsSelection(event)) {
                 return;
             }
             const path = rowPathOf({ nativeEvent: event });
@@ -82,7 +82,7 @@ export function FileTreeRoot({ model, label, resetKey, selectionFollowsFocus = t
             }
         };
         const onKey = (event) => {
-            if (event.defaultPrevented || inSlot({ nativeEvent: event })) {
+            if (event.defaultPrevented || inSlot(event)) {
                 return;
             }
             if (movesFocus(event) && selectionFollowsFocus) {
@@ -106,24 +106,17 @@ export function FileTreeRoot({ model, label, resetKey, selectionFollowsFocus = t
                 }
             }
         };
-        const onContext = (event) => {
-            if (inSlot({ nativeEvent: event })) {
+        const withTargets = (handle) => (event) => {
+            if (inSlot(event)) {
                 return;
             }
             const path = rowPathOf({ nativeEvent: event });
             if (path !== null) {
-                onRowContextMenu?.(path, menuTargetsOf(path, model.getSelectedPaths()), event);
-            }
-        };
-        const onDrag = (event) => {
-            if (inSlot({ nativeEvent: event })) {
-                return;
-            }
-            const path = rowPathOf({ nativeEvent: event });
-            if (path !== null) {
-                onRowDragStart?.(path, menuTargetsOf(path, model.getSelectedPaths()), event);
+                handle?.(path, menuTargetsOf(path, model.getSelectedPaths()), event);
             }
         };
+        const onContext = withTargets(onRowContextMenu);
+        const onDrag = withTargets(onRowDragStart);
         frame.addEventListener('click', onClickRow);
         frame.addEventListener('keydown', onKey, true);
         frame.addEventListener('contextmenu', onContext);

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

@@ -1,12 +1,13 @@
 import { useMemo } from 'react';
 import { useTreeShift } from '../tree/use-tree-shift.js';
-import { shiftNeed } from './shift.js';
+import { shiftNeed } from '../tree/shift.js';
 const ROWS = '[data-type="item"]:not([data-item-parked="true"])';
 function boxesOf(element) {
     return element.getClientRects().length > 0 ? [element] : [...element.children].flatMap((child) => boxesOf(child));
 }
 function limitOf(row, content, gap) {
     const start = content.getBoundingClientRect().left;
+    const contentMargin = Number.parseFloat(getComputedStyle(content).marginInlineEnd) || 0;
     let limit = Number.POSITIVE_INFINITY;
     for (const part of [...row.children].filter((child) => child !== content).flatMap((child) => boxesOf(child))) {
         const rect = part.getBoundingClientRect();
@@ -19,11 +20,9 @@ function limitOf(row, content, gap) {
         limit = Math.min(limit, rect.left - gap);
     }
     if (limit !== Number.POSITIVE_INFINITY) {
-        return limit - (Number.parseFloat(getComputedStyle(content).marginInlineEnd) || 0);
+        return limit - contentMargin;
     }
-    return (row.getBoundingClientRect().right -
-        Number.parseFloat(getComputedStyle(row).paddingInlineEnd) -
-        (Number.parseFloat(getComputedStyle(content).marginInlineEnd) || 0));
+    return row.getBoundingClientRect().right - Number.parseFloat(getComputedStyle(row).paddingInlineEnd) - contentMargin;
 }
 function needOf(row, shift, gap, range) {
     const content = row.querySelector(':scope > [data-item-section="content"]');

package/dist/file-tree/use-slots.js

@@ -35,6 +35,33 @@ export function useFileTreeSlots(model, frame, label) {
             }
         };
         const resize = new ResizeObserver(position);
+        const dropPort = (port) => {
+            port.control.remove();
+            port.decoration.remove();
+            resize.unobserve(port.lightControl);
+            resize.unobserve(port.lightDecoration);
+            port.lightControl.remove();
+            port.lightDecoration.remove();
+        };
+        const makePort = (element, host, kind) => {
+            const container = document.createElement('span');
+            container.dataset.treePort = kind;
+            const slot = document.createElement('slot');
+            slot.name = `${prefix}-${kind}-${serial}`;
+            container.append(slot);
+            element.parentElement?.append(container);
+            const target = document.createElement('span');
+            target.slot = slot.name;
+            target.dataset.treeSlot = kind;
+            target.className = kind === 'control' ? 'adecore-tree-control' : 'adecore-tree-decoration';
+            // React delegates to this portal target before the event reaches the engine's shadow tree.
+            for (const type of ['click', 'dblclick', 'keydown', 'keyup', 'pointerdown', 'dragstart']) {
+                target.addEventListener(type, (event) => event.stopPropagation());
+            }
+            host.append(target);
+            resize.observe(target);
+            return { container, target };
+        };
         const scan = () => {
             pending = false;
             if (disposed) {
@@ -68,12 +95,7 @@ export function useFileTreeSlots(model, frame, label) {
             const live = new Set(elements);
             for (const [element, port] of ports) {
                 if (!live.has(element)) {
-                    port.control.remove();
-                    port.decoration.remove();
-                    resize.unobserve(port.lightControl);
-                    resize.unobserve(port.lightDecoration);
-                    port.lightControl.remove();
-                    port.lightDecoration.remove();
+                    dropPort(port);
                     ports.delete(element);
                 }
             }
@@ -89,28 +111,9 @@ export function useFileTreeSlots(model, frame, label) {
                 element.dataset.joinedEnd = String(row.isSelected && rows[row.index + 1]?.isSelected === true);
                 let port = ports.get(element);
                 if (port === undefined) {
-                    const makePort = (kind) => {
-                        const container = document.createElement('span');
-                        container.dataset.treePort = kind;
-                        const slot = document.createElement('slot');
-                        slot.name = `${prefix}-${kind}-${serial}`;
-                        container.append(slot);
-                        element.parentElement?.append(container);
-                        const target = document.createElement('span');
-                        target.slot = slot.name;
-                        target.dataset.treeSlot = kind;
-                        target.className = kind === 'control' ? 'adecore-tree-control' : 'adecore-tree-decoration';
-                        // React delegates to this portal target before the event reaches the engine's shadow tree.
-                        for (const type of ['click', 'dblclick', 'keydown', 'keyup', 'pointerdown', 'dragstart']) {
-                            target.addEventListener(type, (event) => event.stopPropagation());
-                        }
-                        current.append(target);
-                        resize.observe(target);
-                        return { container, target };
-                    };
                     serial++;
-                    const control = makePort('control');
-                    const decoration = makePort('decoration');
+                    const control = makePort(element, current, 'control');
+                    const decoration = makePort(element, current, 'decoration');
                     port = {
                         rowElement: element,
                         control: control.container,
@@ -162,10 +165,7 @@ export function useFileTreeSlots(model, frame, label) {
             for (const port of ports.values()) {
                 port.rowElement.style.removeProperty('--adecore-tree-control-space');
                 port.rowElement.style.removeProperty('--adecore-tree-decoration-space');
-                port.control.remove();
-                port.decoration.remove();
-                port.lightControl.remove();
-                port.lightDecoration.remove();
+                dropPort(port);
             }
         };
     }, [frame, model, label, prefix]);

package/dist/format/datetime.js

@@ -1,6 +1,7 @@
 import { dateFormatter, wordFormatter } from './locale.js';
 /* The parts that are a word rather than a number, and so come from the language and not the region. */
 const WORD_PARTS = new Set(['month', 'weekday', 'dayPeriod', 'era']);
+const toDate = (at) => (typeof at === 'number' ? new Date(at) : at);
 /*
  * A date written the way the region writes one, with its words in the language the interface is in.
  * Both formatters get the same options and the same instant, so every part the region asks for has
@@ -9,13 +10,13 @@ const WORD_PARTS = new Set(['month', 'weekday', 'dayPeriod', 'era']);
  * region does not say AM.
  */
 export const formatDateTime = (at, options) => {
-    const date = typeof at === 'number' ? new Date(at) : at;
+    const date = toDate(at);
     const parts = dateFormatter(options).formatToParts(date);
     if (!parts.some((part) => WORD_PARTS.has(part.type))) {
         return parts.map((part) => part.value).join('');
     }
-    const english = wordFormatter(options).formatToParts(date);
-    return parts.map((part) => (WORD_PARTS.has(part.type) ? (english.find((word) => word.type === part.type)?.value ?? part.value) : part.value)).join('');
+    const words = wordFormatter(options).formatToParts(date);
+    return parts.map((part) => (WORD_PARTS.has(part.type) ? (words.find((word) => word.type === part.type)?.value ?? part.value) : part.value)).join('');
 };
 const CLOCK = { hour: '2-digit', minute: '2-digit' };
 const WEEKDAY_CLOCK = { weekday: 'short', hour: '2-digit', minute: '2-digit' };
@@ -43,8 +44,8 @@ export const formatDayClock = (at) => formatDateTime(at, DAY_CLOCK);
 export const formatNumericDate = (at) => formatDateTime(at, NUMERIC_DATE);
 /* Whether two instants fall on the same day of the same year, in the zone of whoever is reading. */
 export const isSameDay = (a, b) => {
-    const left = typeof a === 'number' ? new Date(a) : a;
-    const right = typeof b === 'number' ? new Date(b) : b;
+    const left = toDate(a);
+    const right = toDate(b);
     return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
 };
 export const formatMoment = (at, now = Date.now()) => (isSameDay(at, now) ? formatClock(at) : formatDayClock(at));

package/dist/format/locale.js

@@ -63,10 +63,15 @@ const resolve = (region) => {
 /* The locale every formatter in this folder is built on. Read outside React as well, so it is a
    plain function over the source rather than a hook. */
 export const formatLocale = () => resolve(source.region());
+const subscribe = (onChange) => source.subscribe(onChange);
 /* What a component calls to draw again once the region changes. The value is the locale, which a
    caller may use or ignore; subscribing is the point. */
-const subscribe = (onChange) => source.subscribe(onChange);
 export const useFormatLocale = () => useSyncExternalStore(subscribe, formatLocale, formatLocale);
+/*
+ * A formatter per options object, keyed on the object itself, so a module-level spec builds its
+ * formatter once and a list of a thousand rows constructs nothing. A region change throws the entry
+ * away, since the locale is part of what was cached.
+ */
 const cacheFor = (store, options, locale, build) => {
     const hit = store.get(options);
     if (hit !== undefined && hit.locale === locale) {

package/dist/format/number.js

@@ -5,27 +5,24 @@ const ONE_DECIMAL = { maximumFractionDigits: 1 };
 export const formatNumber = (value) => numberFormatter(WHOLE).format(Math.round(value));
 /* The same, to one decimal, where the fraction is the part that means something. */
 export const formatDecimal = (value) => numberFormatter(ONE_DECIMAL).format(value);
-const fixedSpecs = new Map();
+/* One options object per key, so the formatter cached on it is built once (`numberFormatter`). */
+const specCache = (build) => {
+    const specs = new Map();
+    return (key) => {
+        let spec = specs.get(key);
+        if (spec === undefined) {
+            spec = build(key);
+            specs.set(key, spec);
+        }
+        return spec;
+    };
+};
+const fixedSpec = specCache((decimals) => ({ minimumFractionDigits: decimals, maximumFractionDigits: decimals }));
+const roundedSpec = specCache((decimals) => ({ maximumFractionDigits: decimals }));
 /* Always `decimals` places, so values that follow each other keep one width: `1,0` and `1,5`, never `1` and `1,5`. */
 export const formatFixed = (value, decimals) => numberFormatter(fixedSpec(decimals)).format(value);
-const fixedSpec = (decimals) => {
-    let spec = fixedSpecs.get(decimals);
-    if (spec === undefined) {
-        spec = { minimumFractionDigits: decimals, maximumFractionDigits: decimals };
-        fixedSpecs.set(decimals, spec);
-    }
-    return spec;
-};
-const roundedSpecs = new Map();
 /* At most `decimals` places, trailing zeros dropped, for a figure whose fraction may or may not be there: `39`, `1,95`. */
-export const formatRounded = (value, decimals) => {
-    let spec = roundedSpecs.get(decimals);
-    if (spec === undefined) {
-        spec = { maximumFractionDigits: decimals };
-        roundedSpecs.set(decimals, spec);
-    }
-    return numberFormatter(spec).format(value);
-};
+export const formatRounded = (value, decimals) => numberFormatter(roundedSpec(decimals)).format(value);
 /* Intl takes at most this many fraction digits. */
 const MAX_FRACTION_DIGITS = 100;
 const NUMERAL = /^[+-]?\d+(?:\.(\d+))?$/;

package/dist/menu/parts.d.ts

@@ -4,8 +4,9 @@ import { ContextMenu as BaseContextMenu } from '@base-ui-components/react/contex
 import { Menu as BaseMenu } from '@base-ui-components/react/menu';
 import { Separator as BaseSeparator } from '@base-ui-components/react/separator';
 import { useRender } from '@base-ui-components/react/use-render';
+import { type PlacementKey } from '../placement.ts';
 type PositionerProps = ComponentProps<typeof BaseMenu.Positioner>;
-type Placement = Pick<PositionerProps, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'collisionPadding' | 'collisionBoundary' | 'collisionAvoidance' | 'anchor' | 'sticky' | 'positionMethod'>;
+type Placement = Pick<PositionerProps, PlacementKey>;
 export declare const MENU_LABEL = "px-2.5 pt-1.5 pb-0.5 text-xs/[inherit] text-text-faint";
 export declare function MenuRoot(props: ComponentProps<typeof BaseMenu.Root>): import("react").JSX.Element;
 export declare function ContextMenuRoot(props: ComponentProps<typeof BaseContextMenu.Root>): import("react").JSX.Element;
@@ -13,7 +14,7 @@ export declare function MenuSubmenuRoot(props: ComponentProps<typeof BaseMenu.Su
 export declare const MenuTrigger: BaseMenu.Trigger;
 export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<import("@base-ui-components/react/context-menu").ContextMenuTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
 export type MenuPopupProps = ComponentProps<typeof BaseMenu.Popup> & Placement;
-export declare function MenuPopup({ side, align, sideOffset, alignOffset, collisionPadding, collisionBoundary, collisionAvoidance, anchor, sticky, positionMethod, className, ...props }: MenuPopupProps): import("react").JSX.Element;
+export declare function MenuPopup({ className, ...props }: MenuPopupProps): import("react").JSX.Element;
 type ItemLook = {
     unstyled?: boolean;
 };

package/dist/menu/parts.js

@@ -9,6 +9,7 @@ import { useRender } from '@base-ui-components/react/use-render';
 import { withClass } from '../class-name.js';
 import { Icon } from '../Icon.js';
 import { Tooltip } from '../Tooltip.js';
+import { splitPlacement } from '../placement.js';
 import { renderPositioner } from '../popup-layer.js';
 const MenuKindContext = createContext('menu');
 /*
@@ -44,9 +45,10 @@ export const ContextMenuTrigger = BaseContextMenu.Trigger;
  * decided once. The popup scrolls inside the room the window leaves it; `className` adds a minimum
  * width or a layout of its own, such as a grid of swatches.
  */
-export function MenuPopup({ side, align, sideOffset, alignOffset, collisionPadding, collisionBoundary, collisionAvoidance, anchor, sticky, positionMethod, className, ...props }) {
+export function MenuPopup({ className, ...props }) {
     const defaults = PLACEMENT[useContext(MenuKindContext)];
-    return (_jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { className: "popup-positioner", render: renderPositioner, side: side ?? defaults.side, align: align ?? defaults.align, sideOffset: sideOffset ?? defaults.sideOffset, alignOffset: alignOffset ?? defaults.alignOffset, collisionPadding: collisionPadding, collisionBoundary: collisionBoundary, collisionAvoidance: collisionAvoidance, anchor: anchor, sticky: sticky, positionMethod: positionMethod, children: _jsx(BaseMenu.Popup, { className: withClass('menu-popup', className), ...props }) }) }));
+    const [placement, popupProps] = splitPlacement(props);
+    return (_jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { className: "popup-positioner", render: renderPositioner, ...placement, side: placement.side ?? defaults.side, align: placement.align ?? defaults.align, sideOffset: placement.sideOffset ?? defaults.sideOffset, alignOffset: placement.alignOffset ?? defaults.alignOffset, children: _jsx(BaseMenu.Popup, { className: withClass('menu-popup', className), ...popupProps }) }) }));
 }
 export function MenuItem({ unstyled = false, className, ...props }) {
     return _jsx(BaseMenu.Item, { className: unstyled ? className : withClass('menu-item', className), ...props });

package/dist/modality.js

@@ -7,11 +7,10 @@ const set = (modality) => {
     current = modality;
     document.documentElement.dataset.modality = modality;
 };
-/* Which device the app was last driven with, on the root element as `data-modality`. A ring that
-   only belongs to keyboard navigation cannot ask `:focus-visible` alone. Focus that a script moves
-   (Base UI does that for the hovered menu item) keeps matching it while the browser's own keyboard
-   flag is up, which a single keystroke anywhere, a terminal included, leaves on. Once per page;
-   `UIProvider` starts it, and a second call does nothing. */
+/* Which device the app was last driven with, as `data-modality` on the root. `:focus-visible` alone
+   cannot tell: focus a script moves (Base UI's hovered menu item) keeps matching it once a single
+   keystroke anywhere, a terminal included, raised the browser's keyboard flag. `UIProvider` starts
+   it; a second call does nothing. */
 export function startInputModality() {
     if (started) {
         return;

package/dist/placement.d.ts

@@ -0,0 +1,4 @@
+declare const PLACEMENT_KEYS: readonly ['side', 'align', 'sideOffset', 'alignOffset', 'collisionPadding', 'collisionBoundary', 'collisionAvoidance', 'anchor', 'sticky', 'positionMethod'];
+export type PlacementKey = (typeof PLACEMENT_KEYS)[number];
+export declare function splitPlacement<Props extends Partial<Record<PlacementKey, unknown>>>(props: Props): [Pick<Props, PlacementKey>, Omit<Props, PlacementKey>];
+export {};

package/dist/placement.js

@@ -0,0 +1,23 @@
+/* The positioner props a popup part takes beside its own, so a caller places a popup on the one element it renders. */
+const PLACEMENT_KEYS = [
+    'side',
+    'align',
+    'sideOffset',
+    'alignOffset',
+    'collisionPadding',
+    'collisionBoundary',
+    'collisionAvoidance',
+    'anchor',
+    'sticky',
+    'positionMethod'
+];
+/* Splits a popup part's props into what goes to the positioner and what goes to the popup. */
+export function splitPlacement(props) {
+    const placement = {};
+    const rest = { ...props };
+    for (const key of PLACEMENT_KEYS) {
+        placement[key] = props[key];
+        delete rest[key];
+    }
+    return [placement, rest];
+}

package/dist/popover/parts.d.ts

@@ -1,13 +1,14 @@
 import type { ComponentProps } from 'react';
 import { Popover as BasePopover } from '@base-ui-components/react/popover';
 import { PreviewCard as BasePreviewCard } from '@base-ui-components/react/preview-card';
+import { type PlacementKey } from '../placement.ts';
 declare const POPUP_VARIANT: {
     readonly menu: 'menu-popup';
     readonly picker: 'picker-popup';
     readonly plain: '';
 };
 export type PopupVariant = keyof typeof POPUP_VARIANT;
-type Placement = Pick<ComponentProps<typeof BasePopover.Positioner>, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'collisionPadding' | 'collisionBoundary' | 'collisionAvoidance' | 'anchor' | 'sticky' | 'positionMethod'>;
+type Placement = Pick<ComponentProps<typeof BasePopover.Positioner>, PlacementKey>;
 export declare const PopoverRoot: typeof BasePopover.Root;
 export declare const PopoverTrigger: BasePopover.Trigger;
 export declare const PopoverClose: import("react").ForwardRefExoticComponent<import("@base-ui-components/react/popover").PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -16,11 +17,11 @@ export declare const PopoverDescription: import("react").ForwardRefExoticCompone
 export type PopoverPopupProps = ComponentProps<typeof BasePopover.Popup> & Placement & {
     variant?: PopupVariant;
 };
-export declare function PopoverPopup({ variant, side, align, sideOffset, alignOffset, collisionPadding, collisionBoundary, collisionAvoidance, anchor, sticky, positionMethod, className, ...props }: PopoverPopupProps): import("react").JSX.Element;
+export declare function PopoverPopup({ variant, side, align, sideOffset, className, ...props }: PopoverPopupProps): import("react").JSX.Element;
 export declare const PreviewCardRoot: typeof BasePreviewCard.Root;
 export declare const PreviewCardTrigger: import("react").ForwardRefExoticComponent<import("@base-ui-components/react/preview-card").PreviewCardTriggerProps & import("react").RefAttributes<HTMLAnchorElement>>;
 export type PreviewCardPopupProps = ComponentProps<typeof BasePreviewCard.Popup> & Placement & {
     variant?: PopupVariant;
 };
-export declare function PreviewCardPopup({ variant, side, align, sideOffset, alignOffset, collisionPadding, collisionBoundary, collisionAvoidance, anchor, sticky, positionMethod, className, ...props }: PreviewCardPopupProps): import("react").JSX.Element;
+export declare function PreviewCardPopup({ variant, side, align, sideOffset, className, ...props }: PreviewCardPopupProps): import("react").JSX.Element;
 export {};