@adecore/ui 0.21.0 → 0.21.2

package/src/Input.tsx

@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react';
 import type { LucideIcon } from 'lucide-react';
 import clsx from 'clsx';
-import { useFieldControl } from './field-context.ts';
+import { fieldControlProps, useFieldControl } from './field-context.ts';
 import { Icon } from './Icon.tsx';
 
 export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
@@ -17,12 +17,7 @@ export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
 export function Input({ size = 'md', mono = false, icon, className, id, ...props }: InputProps) {
     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 <input {...control} className={clsx('field', small && 'field-sm', mono && 'font-mono text-code', className)} />;
@@ -62,9 +57,7 @@ export function TextArea({ size = 'md', resize = 'none', mono = false, className
     const field = useFieldControl();
     return (
         <textarea
-            id={id ?? field?.id}
-            aria-describedby={field?.describedBy}
-            aria-invalid={field?.invalid || undefined}
+            {...fieldControlProps(field, id)}
             {...props}
             className={clsx(
                 'field h-auto min-h-16 py-1.5',

package/src/Pill.tsx

@@ -48,7 +48,14 @@ export interface PillProps {
 /* The small rounded label in a header, a sidebar row or a settings line: a count, a branch, a status. */
 export function Pill({ icon, children, tone = 'muted', shape = 'pill', size = 'md', mono = false, onClick, pressed, disabled, className, ref }: PillProps) {
     // Never broken inside itself: in a row that wraps, a pill that does not fit moves to the next line whole.
-    const shared = clsx('inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-2xs', SHAPES[shape], PADDING[shape][size], TONES[tone], mono && 'font-mono', className);
+    const shared = clsx(
+        'inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-2xs',
+        SHAPES[shape],
+        PADDING[shape][size],
+        TONES[tone],
+        mono && 'font-mono',
+        className
+    );
     if (!onClick) {
         return (
             <span ref={ref} className={shared}>

package/src/SegmentBar.tsx

@@ -91,19 +91,12 @@ export function SegmentBar({ parts, range, size = 'md', onSelect, label, classNa
                         {part.label}
                     </span>
                 );
+                const look = { className: fill, style: { backgroundColor: part.color }, 'aria-current': part.current ? true : undefined };
                 const body =
                     onSelect === undefined ? (
-                        <span className={fill} style={{ backgroundColor: part.color }} aria-current={part.current ? true : undefined}>
-                            {text}
-                        </span>
+                        <span {...look}>{text}</span>
                     ) : (
-                        <button
-                            type="button"
-                            className={fill}
-                            style={{ backgroundColor: part.color }}
-                            aria-current={part.current ? true : undefined}
-                            onClick={() => onSelect(index)}
-                        >
+                        <button type="button" {...look} onClick={() => onSelect(index)}>
                             {text}
                         </button>
                     );

package/src/Separator.tsx

@@ -7,9 +7,8 @@ export interface SeparatorProps {
     ref?: Ref<HTMLSpanElement>;
 }
 
-/* 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 }: SeparatorProps) {
     return <span ref={ref} aria-hidden className={clsx(orientation === 'vertical' ? 'h-4 w-px' : 'h-px w-full', 'shrink-0 bg-border', className)} />;
 }

package/src/SlidingColumn.tsx

@@ -41,7 +41,7 @@ export interface SlidingColumnProps {
  * drag handle.
  */
 export function SlidingColumn({ open, width, gap = 0, bounds, onWidthChange, instant = false, body, className, ref, children }: SlidingColumnProps) {
-    /* 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/src/ZoomControls.tsx

@@ -1,5 +1,5 @@
 import type { Ref } from 'react';
-import { Maximize, Minus, Plus, Scan } from 'lucide-react';
+import { Maximize, Minus, Plus, Scan, type LucideIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { ButtonGroup } from './ButtonGroup.tsx';
 import { Icon } from './Icon.tsx';
@@ -42,6 +42,14 @@ export interface ZoomControlsProps {
     ref?: Ref<HTMLDivElement>;
 }
 
+function MenuIcon({ icon }: { icon: LucideIcon }) {
+    return (
+        <span className="grid h-4 w-4 place-items-center">
+            <Icon icon={icon} size={14} />
+        </span>
+    );
+}
+
 /* The zoom group of a dock: out, the readout with its presets, in, and fit everything. */
 export function ZoomControls({
     zoom,
@@ -77,16 +85,12 @@ export function ZoomControls({
                     </MenuRadioGroup>
                     <MenuSeparator />
                     <MenuItem onClick={onFitAll}>
-                        <span className="grid h-4 w-4 place-items-center">
-                            <Icon icon={Maximize} size={14} />
-                        </span>
+                        <MenuIcon icon={Maximize} />
                         {labels.fit ?? t('zoom.fit')} {shortcuts.fitAll && <Kbd shortcut={shortcuts.fitAll} />}
                     </MenuItem>
                     {selection && (
                         <MenuItem disabled={!selection.enabled} onClick={selection.onZoom}>
-                            <span className="grid h-4 w-4 place-items-center">
-                                <Icon icon={Scan} size={14} />
-                            </span>
+                            <MenuIcon icon={Scan} />
                             {selection.label} {selection.shortcut && <Kbd shortcut={selection.shortcut} />}
                         </MenuItem>
                     )}

package/src/field-context.ts

@@ -10,3 +10,10 @@ export const FieldContext = createContext<FieldControl | null>(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 = (): FieldControl | null => 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: FieldControl | null, id: string | undefined) => ({
+    id: id ?? field?.id,
+    'aria-describedby': field?.describedBy,
+    'aria-invalid': field?.invalid || undefined
+});

package/src/file-icon.ts

@@ -3,11 +3,10 @@ import { SETI_BY_FILE_EXTENSION, SETI_BY_FILE_NAME, SETI_BY_FILE_NAME_CONTAINS,
 
 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: FileTreeIconConfig = {
     set: 'none',
     spriteSheet: SETI_SPRITE_SHEET,
@@ -27,11 +26,10 @@ const resolveIcon: ReturnType<typeof createFileTreeIconResolver>['resolveIcon']
 
 /*
  * 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: string): string => resolveIcon('file-tree-icon-file', path).name;
 

package/src/file-tree/parts.tsx

@@ -26,8 +26,8 @@ export type FileTreeRootProps = useRender.ComponentProps<'div'> & {
     treeProps?: Omit<PierreProps, 'model'>;
 };
 
-function inSlot(event: { nativeEvent: Event }): boolean {
-    return event.nativeEvent.composedPath().some((node) => node instanceof HTMLElement && node.hasAttribute('data-tree-slot'));
+function inSlot(event: Event): boolean {
+    return event.composedPath().some((node) => node instanceof HTMLElement && node.hasAttribute('data-tree-slot'));
 }
 
 export function FileTreeRoot({
@@ -118,7 +118,7 @@ export function FileTreeRoot({
             return;
         }
         const onClickRow = (event: MouseEvent): void => {
-            if (event.defaultPrevented || inSlot({ nativeEvent: event }) || extendsSelection(event)) {
+            if (event.defaultPrevented || inSlot(event) || extendsSelection(event)) {
                 return;
             }
             const path = rowPathOf({ nativeEvent: event });
@@ -127,7 +127,7 @@ export function FileTreeRoot({
             }
         };
         const onKey = (event: KeyboardEvent): void => {
-            if (event.defaultPrevented || inSlot({ nativeEvent: event })) {
+            if (event.defaultPrevented || inSlot(event)) {
                 return;
             }
             if (movesFocus(event) && selectionFollowsFocus) {
@@ -149,24 +149,19 @@ export function FileTreeRoot({
                 }
             }
         };
-        const onContext = (event: MouseEvent): void => {
-            if (inSlot({ nativeEvent: event })) {
-                return;
-            }
-            const path = rowPathOf({ nativeEvent: event });
-            if (path !== null) {
-                onRowContextMenu?.(path, menuTargetsOf(path, model.getSelectedPaths()), event);
-            }
-        };
-        const onDrag = (event: DragEvent): void => {
-            if (inSlot({ nativeEvent: event })) {
-                return;
-            }
-            const path = rowPathOf({ nativeEvent: event });
-            if (path !== null) {
-                onRowDragStart?.(path, menuTargetsOf(path, model.getSelectedPaths()), event);
-            }
-        };
+        const withTargets =
+            <RowEvent extends Event>(handle?: (path: string, targets: readonly string[], event: RowEvent) => void) =>
+            (event: RowEvent): void => {
+                if (inSlot(event)) {
+                    return;
+                }
+                const path = rowPathOf({ nativeEvent: event });
+                if (path !== null) {
+                    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/src/file-tree/use-file-tree-shift.tsx

@@ -1,7 +1,7 @@
 import { useMemo, type ReactElement } from 'react';
 import type { FileTree } from '@pierre/trees';
 import { useTreeShift, type TreeShiftSource } from '../tree/use-tree-shift.tsx';
-import { shiftNeed } from './shift.ts';
+import { shiftNeed } from '../tree/shift.ts';
 
 const ROWS = '[data-type="item"]:not([data-item-parked="true"])';
 
@@ -11,6 +11,7 @@ function boxesOf(element: Element): Element[] {
 
 function limitOf(row: HTMLElement, content: Element, gap: number): number {
     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();
@@ -23,13 +24,9 @@ function limitOf(row: HTMLElement, content: Element, gap: number): number {
         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: HTMLElement, shift: number, gap: number, range: Range): number | null {

package/src/file-tree/use-slots.ts

@@ -54,6 +54,33 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
         };
 
         const resize = new ResizeObserver(position);
+        const dropPort = (port: Port): void => {
+            port.control.remove();
+            port.decoration.remove();
+            resize.unobserve(port.lightControl);
+            resize.unobserve(port.lightDecoration);
+            port.lightControl.remove();
+            port.lightDecoration.remove();
+        };
+        const makePort = (element: HTMLElement, host: HTMLElement, kind: 'control' | 'decoration'): { container: HTMLElement; target: HTMLElement } => {
+            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 = (): void => {
             pending = false;
             if (disposed) {
@@ -87,12 +114,7 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
             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);
                 }
             }
@@ -108,28 +130,9 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
                 element.dataset.joinedEnd = String(row.isSelected && rows[row.index + 1]?.isSelected === true);
                 let port = ports.get(element);
                 if (port === undefined) {
-                    const makePort = (kind: string): { container: HTMLElement; target: HTMLElement } => {
-                        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,
@@ -181,10 +184,7 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
             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/src/format/datetime.ts

@@ -3,6 +3,8 @@ import { dateFormatter, wordFormatter } from './locale.ts';
 /* 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<Intl.DateTimeFormatPartTypes>(['month', 'weekday', 'dayPeriod', 'era']);
 
+const toDate = (at: Date | number): Date => (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
@@ -11,13 +13,13 @@ const WORD_PARTS = new Set<Intl.DateTimeFormatPartTypes>(['month', 'weekday', 'd
  * region does not say AM.
  */
 export const formatDateTime = (at: Date | number, options: Intl.DateTimeFormatOptions): string => {
-    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: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit' };
@@ -55,8 +57,8 @@ export const formatNumericDate = (at: Date | number): string => formatDateTime(a
 
 /* Whether two instants fall on the same day of the same year, in the zone of whoever is reading. */
 export const isSameDay = (a: Date | number, b: Date | number): boolean => {
-    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();
 };
 

package/src/format/locale.ts

@@ -88,22 +88,22 @@ const resolve = (region: string): string => {
    plain function over the source rather than a hook. */
 export const formatLocale = (): string => resolve(source.region());
 
-/* 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: () => void): (() => void) => 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. */
 export const useFormatLocale = (): string => 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.
- */
 interface Cached<T> {
     locale: string;
     formatter: T;
 }
 
+/*
+ * 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 = <O extends object, T>(store: WeakMap<O, Cached<T>>, options: O, locale: string, build: (locale: string, options: O) => T): T => {
     const hit = store.get(options);
     if (hit !== undefined && hit.locale === locale) {

package/src/format/number.ts

@@ -9,31 +9,28 @@ export const formatNumber = (value: number): string => numberFormatter(WHOLE).fo
 /* The same, to one decimal, where the fraction is the part that means something. */
 export const formatDecimal = (value: number): string => numberFormatter(ONE_DECIMAL).format(value);
 
-const fixedSpecs = new Map<number, Intl.NumberFormatOptions>();
+/* One options object per key, so the formatter cached on it is built once (`numberFormatter`). */
+const specCache = <Key>(build: (key: Key) => Intl.NumberFormatOptions): ((key: Key) => Intl.NumberFormatOptions) => {
+    const specs = new Map<Key, Intl.NumberFormatOptions>();
+    return (key) => {
+        let spec = specs.get(key);
+        if (spec === undefined) {
+            spec = build(key);
+            specs.set(key, spec);
+        }
+        return spec;
+    };
+};
 
-/* 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: number, decimals: number): string => numberFormatter(fixedSpec(decimals)).format(value);
+const fixedSpec = specCache((decimals: number) => ({ minimumFractionDigits: decimals, maximumFractionDigits: decimals }));
 
-const fixedSpec = (decimals: number): Intl.NumberFormatOptions => {
-    let spec = fixedSpecs.get(decimals);
-    if (spec === undefined) {
-        spec = { minimumFractionDigits: decimals, maximumFractionDigits: decimals };
-        fixedSpecs.set(decimals, spec);
-    }
-    return spec;
-};
+const roundedSpec = specCache((decimals: number) => ({ maximumFractionDigits: decimals }));
 
-const roundedSpecs = new Map<number, Intl.NumberFormatOptions>();
+/* 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: number, decimals: number): string => numberFormatter(fixedSpec(decimals)).format(value);
 
 /* 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: number, decimals: number): string => {
-    let spec = roundedSpecs.get(decimals);
-    if (spec === undefined) {
-        spec = { maximumFractionDigits: decimals };
-        roundedSpecs.set(decimals, spec);
-    }
-    return numberFormatter(spec).format(value);
-};
+export const formatRounded = (value: number, decimals: number): string => numberFormatter(roundedSpec(decimals)).format(value);
 
 /* Intl takes at most this many fraction digits. */
 const MAX_FRACTION_DIGITS = 100;

package/src/menu/parts.tsx

@@ -8,6 +8,7 @@ import { useRender } from '@base-ui-components/react/use-render';
 import { withClass } from '../class-name.ts';
 import { Icon } from '../Icon.tsx';
 import { Tooltip } from '../Tooltip.tsx';
+import { splitPlacement, type PlacementKey } from '../placement.ts';
 import { renderPositioner } from '../popup-layer.ts';
 
 /* Where a popup opens from decides where it goes when a call site says nothing. */
@@ -17,10 +18,7 @@ const MenuKindContext = createContext<MenuKind>('menu');
 
 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>;
 
 /*
  * A menu hangs under its trigger, lined up with its start, unless there is no room. A context menu
@@ -78,38 +76,21 @@ export type MenuPopupProps = ComponentProps<typeof BaseMenu.Popup> & Placement;
  * 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
-}: MenuPopupProps) {
+export function MenuPopup({ className, ...props }: MenuPopupProps) {
     const defaults = PLACEMENT[useContext(MenuKindContext)];
+    const [placement, popupProps] = splitPlacement(props);
     return (
         <BaseMenu.Portal>
             <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}
+                {...placement}
+                side={placement.side ?? defaults.side}
+                align={placement.align ?? defaults.align}
+                sideOffset={placement.sideOffset ?? defaults.sideOffset}
+                alignOffset={placement.alignOffset ?? defaults.alignOffset}
             >
-                <BaseMenu.Popup className={withClass('menu-popup', className)} {...props} />
+                <BaseMenu.Popup className={withClass('menu-popup', className)} {...popupProps} />
             </BaseMenu.Positioner>
         </BaseMenu.Portal>
     );

package/src/modality.ts

@@ -11,11 +11,10 @@ const set = (modality: Modality): void => {
     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(): void {
     if (started) {
         return;

package/src/placement.ts

@@ -0,0 +1,26 @@
+/* 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'
+] as const;
+
+export type PlacementKey = (typeof PLACEMENT_KEYS)[number];
+
+/* Splits a popup part's props into what goes to the positioner and what goes to the popup. */
+export function splitPlacement<Props extends Partial<Record<PlacementKey, unknown>>>(props: Props): [Pick<Props, PlacementKey>, Omit<Props, PlacementKey>] {
+    const placement: Record<string, unknown> = {};
+    const rest: Record<string, unknown> = { ...props };
+    for (const key of PLACEMENT_KEYS) {
+        placement[key] = props[key];
+        delete rest[key];
+    }
+    return [placement as Pick<Props, PlacementKey>, rest as Omit<Props, PlacementKey>];
+}