@adecore/ui 0.17.0-beta.2 → 0.18.0

package/dist/Kbd.d.ts

@@ -10,14 +10,16 @@ export interface KbdProps {
 export declare function Kbd({ shortcut, children, variant, className, ref }: KbdProps): import("react").JSX.Element;
 export interface KeyCapProps {
     children: ReactNode;
+    size?: 'md' | 'sm';
     className?: string;
     ref?: Ref<HTMLElement>;
 }
-export declare function KeyCap({ children, className, ref }: KeyCapProps): import("react").JSX.Element;
+export declare function KeyCap({ children, size, className, ref }: KeyCapProps): import("react").JSX.Element;
 export interface KeysProps {
     shortcut: Shortcut;
     then?: string;
+    size?: 'md' | 'sm';
     className?: string;
     ref?: Ref<HTMLSpanElement>;
 }
-export declare function Keys({ shortcut, then, className, ref }: KeysProps): import("react").JSX.Element;
+export declare function Keys({ shortcut, then, size, className, ref }: KeysProps): import("react").JSX.Element;

package/dist/Kbd.js

@@ -5,16 +5,18 @@ import { formatShortcut, shortcutParts } from './shortcut.js';
 /* A shortcut chip on the surface it sits on: in a tooltip, in a palette's footer, in a line of help. */
 const INLINE_KBD = 'rounded-sm bg-surface-sunken px-[5px] py-px font-sans text-xs/[inherit] text-text-muted';
 /* One key, drawn as a cap. A settings page prints a shortcut key by key, so a gesture can stand beside it. */
-const KEY_CAP = 'inline-grid h-6 min-w-6 place-items-center rounded-md border border-b-2 border-border-strong bg-surface-hover bg-clip-padding px-1.5 font-sans text-xs text-text';
+const KEY_CAP = 'inline-grid place-items-center rounded-md border border-b-2 border-border-strong bg-surface-hover bg-clip-padding font-sans text-text';
+/* `sm` fits inside a small field, as the hint of the key that focuses it. */
+const KEY_CAP_SIZES = { md: 'h-6 min-w-6 px-1.5 text-xs', sm: 'h-5 min-w-5 px-1 text-2xs' };
 /* A shortcut as this platform prints it: `⌘K` on macOS, `Ctrl+K` elsewhere. */
 export function Kbd({ shortcut, children, variant = 'menu', className, ref }) {
     return (_jsx("kbd", { ref: ref, className: clsx(variant === 'inline' && INLINE_KBD, className), children: shortcut !== undefined ? formatShortcut(shortcut, isApplePlatform()) : children }));
 }
-export function KeyCap({ children, className, ref }) {
-    return (_jsx("kbd", { ref: ref, className: clsx(KEY_CAP, className), children: children }));
+export function KeyCap({ children, size = 'md', className, ref }) {
+    return (_jsx("kbd", { ref: ref, className: clsx(KEY_CAP, KEY_CAP_SIZES[size], className), children: children }));
 }
 /* A shortcut as one cap per key, `⌘` and `K`, plus the pointer gesture it goes with. */
-export function Keys({ shortcut, then, className, ref }) {
+export function Keys({ shortcut, then, size = 'md', className, ref }) {
     const parts = [...shortcutParts(shortcut, isApplePlatform()), ...(then ? [then] : [])];
-    return (_jsx("span", { ref: ref, className: clsx('flex items-center gap-1', className), children: parts.map((part, index) => (_jsx(KeyCap, { children: part }, `${part}-${index}`))) }));
+    return (_jsx("span", { ref: ref, className: clsx('flex items-center', size === 'sm' ? 'gap-0.5' : 'gap-1', className), children: parts.map((part, index) => (_jsx(KeyCap, { size: size, children: part }, `${part}-${index}`))) }));
 }

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

@@ -1,9 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { clampShift, maxShift, SHIFT_PROPERTY, shiftNeed, shiftThumb, sidewaysDelta } from './shift.js';
+import { useMemo } from 'react';
+import { useTreeShift } from '../tree/use-tree-shift.js';
+import { shiftNeed } from './shift.js';
 const ROWS = '[data-type="item"]:not([data-item-parked="true"])';
-const HIDE_AFTER = 900;
-const NEAR_BOTTOM = 16;
 function boxesOf(element) {
     return element.getClientRects().length > 0 ? [element] : [...element.children].flatMap((child) => boxesOf(child));
 }
@@ -35,108 +33,12 @@ function needOf(row, shift, gap, range) {
     range.selectNodeContents(content);
     return shiftNeed(range.getBoundingClientRect().right, limitOf(row, content, gap), shift);
 }
+/* The file tree draws its rows in a shadow root, and only the name slides: its decorations sit over the row. */
 export function useFileTreeShift(model, resetKey) {
-    const [frame, setFrame] = useState(null);
-    const [track, setTrack] = useState(null);
-    const [thumb, setThumb] = useState(null);
-    useEffect(() => {
-        if (frame === null || track === null || thumb === null) {
-            return;
-        }
-        const range = document.createRange();
-        let root = null;
-        let exact = 0;
-        let drawn = 0;
-        let max = 0;
-        let pending = 0;
-        let hideTimer = 0;
-        let scrolling = false;
-        let near = false;
-        const draw = () => {
-            const shift = Math.round(exact);
-            if (shift !== drawn) {
-                drawn = shift;
-                frame.style.setProperty(SHIFT_PROPERTY, `${shift}px`);
-            }
-            const { left, width } = shiftThumb(shift, max, track.clientWidth, frame.clientWidth);
-            thumb.style.left = `${left}px`;
-            thumb.style.width = `${width}px`;
-            track.toggleAttribute('data-visible', max > 0 && (scrolling || near));
-        };
-        const measure = () => {
-            pending = 0;
-            if (root === null) {
-                root = model.getFileTreeContainer()?.shadowRoot ?? null;
-                if (root === null) {
-                    return;
-                }
-                rows.observe(root, { childList: true, subtree: true, characterData: true });
-            }
-            const drawnRows = [...root.querySelectorAll(ROWS)];
-            const gap = drawnRows.length === 0 ? 0 : Number.parseFloat(getComputedStyle(drawnRows[0]).columnGap) || 0;
-            max = maxShift(drawnRows.map((row) => needOf(row, drawn, gap, range)).filter((need) => need !== null));
-            exact = clampShift(exact, max);
-            draw();
-        };
-        const schedule = () => {
-            if (pending === 0) {
-                pending = requestAnimationFrame(measure);
-            }
-        };
-        const rows = new MutationObserver(schedule);
-        const mounts = new MutationObserver(schedule);
-        mounts.observe(frame, { childList: true, subtree: true });
-        const sizes = new ResizeObserver(schedule);
-        sizes.observe(frame);
-        const onWheel = (event) => {
-            const delta = sidewaysDelta(event, frame.clientWidth);
-            if (delta === 0 || max === 0) {
-                return;
-            }
-            scrolling = true;
-            window.clearTimeout(hideTimer);
-            hideTimer = window.setTimeout(() => {
-                scrolling = false;
-                draw();
-            }, HIDE_AFTER);
-            const next = clampShift(exact + delta, max);
-            if (next !== exact) {
-                event.preventDefault();
-                exact = next;
-            }
-            draw();
-        };
-        const onPointerMove = (event) => {
-            const bottom = track.getBoundingClientRect().bottom;
-            const isNear = event.clientY >= bottom - NEAR_BOTTOM;
-            if (isNear !== near) {
-                near = isNear;
-                draw();
-            }
-        };
-        const onPointerLeave = () => {
-            if (near) {
-                near = false;
-                draw();
-            }
-        };
-        frame.addEventListener('wheel', onWheel, { passive: false });
-        frame.addEventListener('pointermove', onPointerMove);
-        frame.addEventListener('pointerleave', onPointerLeave);
-        schedule();
-        return () => {
-            frame.removeEventListener('wheel', onWheel);
-            frame.removeEventListener('pointermove', onPointerMove);
-            frame.removeEventListener('pointerleave', onPointerLeave);
-            rows.disconnect();
-            mounts.disconnect();
-            sizes.disconnect();
-            cancelAnimationFrame(pending);
-            window.clearTimeout(hideTimer);
-            frame.style.removeProperty(SHIFT_PROPERTY);
-            track.removeAttribute('data-visible');
-        };
-    }, [frame, track, thumb, model, resetKey]);
-    const bar = (_jsx("div", { "aria-hidden": true, className: "adecore-tree-shift", children: _jsx("div", { ref: setTrack, className: "adecore-tree-shift-track", children: _jsx("div", { ref: setThumb, className: "adecore-tree-shift-thumb" }) }) }));
-    return { attach: setFrame, bar };
+    const source = useMemo(() => ({
+        root: () => model.getFileTreeContainer()?.shadowRoot ?? null,
+        rows: (root) => [...root.querySelectorAll(ROWS)],
+        need: needOf
+    }), [model]);
+    return useTreeShift(source, resetKey);
 }

package/dist/tabs/parts.d.ts

@@ -8,9 +8,10 @@ export type TabsRootProps = Omit<ComponentProps<typeof BaseTabs.Root>, 'onValueC
 export declare function TabsRoot({ value, defaultValue, onValueChange, ...props }: TabsRootProps): import("react").JSX.Element;
 export type TabsListProps = Omit<ComponentProps<typeof BaseTabs.List>, 'className'> & {
     className?: string;
+    start?: ReactNode;
     end?: ReactNode;
 };
-export declare function TabsList({ className, children, end, ...props }: TabsListProps): import("react").JSX.Element;
+export declare function TabsList({ className, children, start, end, ...props }: TabsListProps): import("react").JSX.Element;
 type TabProps = ComponentProps<typeof BaseTabs.Tab>;
 export type TabsTabProps = TabProps & {
     onClose?(): void;

package/dist/tabs/parts.js

@@ -37,11 +37,12 @@ const sameIndices = (left, right) => left !== null && left.length === right.leng
  * in a row nobody sees, so the strip knows what fits before it draws. The tabs are the direct children,
  * since the menu repeats what a tab holds.
  */
-export function TabsList({ className, children, end, ...props }) {
+export function TabsList({ className, children, start, end, ...props }) {
     const { t } = useTranslation('ui');
     const { value, select } = useContext(SelectionContext);
     const strip = useRef(null);
     const measure = useRef(null);
+    const head = useRef(null);
     const tail = useRef(null);
     // Null until the first measure, which runs before the first paint.
     const [shown, setShown] = useState(null);
@@ -56,7 +57,7 @@ export function TabsList({ className, children, end, ...props }) {
         const fit = () => {
             const style = getComputedStyle(host);
             const gap = parseFloat(style.columnGap) || 0;
-            const taken = tail.current === null ? 0 : tail.current.getBoundingClientRect().width + gap;
+            const taken = [head.current, tail.current].reduce((sum, part) => (part === null ? sum : sum + part.getBoundingClientRect().width + gap), 0);
             const room = host.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - taken;
             const cells = [...row.children].map((cell) => cell.getBoundingClientRect().width);
             const more = cells.pop() ?? 0;
@@ -67,14 +68,16 @@ export function TabsList({ className, children, end, ...props }) {
         const observer = new ResizeObserver(fit);
         observer.observe(host);
         observer.observe(row);
-        if (tail.current !== null) {
-            observer.observe(tail.current);
+        for (const part of [head.current, tail.current]) {
+            if (part !== null) {
+                observer.observe(part);
+            }
         }
         return () => observer.disconnect();
     });
     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: [_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 })] })] })] }));
+    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 })] })] })] }));
 }
 /* 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/theme.css

@@ -134,6 +134,13 @@
     --file-icon-mauve: #79697b;
 }
 
+/* Code a person reads as code (an editor, a grid of values, a statement) at one size the app may set on
+   `<html>`, apart from the interface's own type. Left alone it is `--text-code`. */
+:root {
+    --code-font-size: var(--text-code);
+    --code-line-height: var(--text-code--line-height);
+}
+
 /* Who floats over whom. Whole numbers in one place, so a new popup cannot guess. */
 :root {
     --z-dialog-backdrop: 80;
@@ -628,6 +635,39 @@
     .adecore-tree-decoration {
         font-variant-numeric: tabular-nums;
     }
+    /* A tree whose rows slide sideways: every part of a row keeps its width and moves with the shift. */
+    .adecore-tree[data-overflow="scroll"] .adecore-tree-row {
+        overflow: clip;
+    }
+    .adecore-tree[data-overflow="scroll"] .adecore-tree-row > * {
+        flex-shrink: 0;
+    }
+    .adecore-tree[data-overflow="scroll"] .adecore-tree-row::after {
+        content: "";
+        flex: none;
+        order: -100;
+        margin-inline: calc(var(--adecore-tree-shift, 0px) * -1) calc(var(--tree-row-gap) * -1);
+    }
+    .adecore-tree[data-overflow="scroll"] .adecore-tree-guide {
+        translate: calc(var(--adecore-tree-shift, 0px) * -1) 0;
+    }
+    .adecore-tree[data-overflow="scroll"] .adecore-tree-label {
+        overflow: visible;
+    }
+    /* The bar keeps to the bottom of the tree however few rows there are: a column whose rows keep their
+       height, and the bar after them pushed down. Its own room is the space under the last row, so the
+       bar sits as far from the bottom edge mid-scroll as at the end. */
+    .adecore-tree[data-overflow="scroll"] {
+        display: flex;
+        flex-direction: column;
+    }
+    .adecore-tree[data-overflow="scroll"] > * {
+        flex-shrink: 0;
+    }
+    .adecore-tree[data-overflow="scroll"] > .adecore-tree-shift {
+        margin-top: auto;
+        height: 8px;
+    }
     .adecore-file-tree {
         position: relative;
         min-height: 0;

package/dist/tree/parts.d.ts

@@ -1,7 +1,9 @@
 import { useRender } from '@base-ui-components/react/use-render';
 import { type CheckboxProps } from '../Checkbox.tsx';
-export type TreeRootProps = useRender.ComponentProps<'div'>;
-export declare function TreeRoot({ render, className, ref, children, ...props }: TreeRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeRootProps = useRender.ComponentProps<'div'> & {
+    overflow?: 'truncate' | 'scroll';
+};
+export declare function TreeRoot({ overflow, render, className, ref, children, ...props }: TreeRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type TreeRowProps = useRender.ComponentProps<'div'> & {
     level?: number;
     selected?: boolean;

package/dist/tree/parts.js

@@ -1,21 +1,31 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import clsx from 'clsx';
 import { useRender } from '@base-ui-components/react/use-render';
 import { ChevronRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Checkbox as UICheckbox } from '../Checkbox.js';
 import { Icon } from '../Icon.js';
+import { mergeRefs } from '../merge-refs.js';
 import { treeRowStyle } from './style.js';
-export function TreeRoot({ render, className, ref, children, ...props }) {
+import { TREE_ROWS, useTreeShift } from './use-tree-shift.js';
+export function TreeRoot({ overflow = 'truncate', render, className, ref, children, ...props }) {
+    const { attach, bar } = useTreeShift(TREE_ROWS);
+    const scrolls = overflow === 'scroll';
+    const rootRef = useCallback((node) => {
+        attach(scrolls ? node : null);
+        mergeRefs(ref)(node);
+    }, [scrolls, ref, attach]);
     return useRender({
         render,
-        ref,
+        ref: rootRef,
         defaultTagName: 'div',
         props: {
             role: 'tree',
             ...props,
+            'data-overflow': overflow,
             className: clsx('adecore-tree', className),
-            children: (_jsxs(_Fragment, { children: [_jsx("style", { children: treeRowStyle('.adecore-tree-row') }), children] }))
+            children: (_jsxs(_Fragment, { children: [_jsx("style", { children: treeRowStyle('.adecore-tree-row') }), children, scrolls && bar] }))
         }
     });
 }

package/dist/tree/use-tree-shift.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement } from 'react';
+export interface TreeShiftSource {
+    root(frame: HTMLElement): ParentNode | null;
+    rows(root: ParentNode): readonly HTMLElement[];
+    need(row: HTMLElement, shift: number, gap: number, range: Range): number | null;
+}
+export declare function useTreeShift(source: TreeShiftSource, resetKey?: string): {
+    attach(node: HTMLElement | null): void;
+    bar: ReactElement;
+};
+export declare const TREE_ROWS: TreeShiftSource;

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

@@ -0,0 +1,133 @@
+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';
+const HIDE_AFTER = 900;
+const NEAR_BOTTOM = 16;
+/*
+ * Rows that are wider than the tree slide sideways together, by a shift every row reads from the
+ * frame's `--adecore-tree-shift`, with a thin bar that shows while a person scrolls or nears it. A
+ * shift instead of a scroll keeps every row's background and the vertical scroll where they are.
+ */
+export function useTreeShift(source, resetKey) {
+    const [frame, setFrame] = useState(null);
+    const [track, setTrack] = useState(null);
+    const [thumb, setThumb] = useState(null);
+    useEffect(() => {
+        if (frame === null || track === null || thumb === null) {
+            return;
+        }
+        const range = document.createRange();
+        let root = null;
+        let exact = 0;
+        let drawn = 0;
+        let max = 0;
+        let pending = 0;
+        let hideTimer = 0;
+        let scrolling = false;
+        let near = false;
+        const draw = () => {
+            const shift = Math.round(exact);
+            if (shift !== drawn) {
+                drawn = shift;
+                frame.style.setProperty(SHIFT_PROPERTY, `${shift}px`);
+            }
+            const { left, width } = shiftThumb(shift, max, track.clientWidth, frame.clientWidth);
+            thumb.style.left = `${left}px`;
+            thumb.style.width = `${width}px`;
+            track.toggleAttribute('data-visible', max > 0 && (scrolling || near));
+        };
+        const measure = () => {
+            pending = 0;
+            if (root === null) {
+                root = source.root(frame);
+                if (root === null) {
+                    return;
+                }
+                rows.observe(root, { childList: true, subtree: true, characterData: true });
+            }
+            const drawnRows = source.rows(root);
+            const gap = drawnRows.length === 0 ? 0 : Number.parseFloat(getComputedStyle(drawnRows[0]).columnGap) || 0;
+            max = maxShift(drawnRows.map((row) => source.need(row, drawn, gap, range)).filter((need) => need !== null));
+            exact = clampShift(exact, max);
+            draw();
+        };
+        const schedule = () => {
+            if (pending === 0) {
+                pending = requestAnimationFrame(measure);
+            }
+        };
+        const rows = new MutationObserver(schedule);
+        const mounts = new MutationObserver(schedule);
+        mounts.observe(frame, { childList: true, subtree: true });
+        const sizes = new ResizeObserver(schedule);
+        sizes.observe(frame);
+        const onWheel = (event) => {
+            const delta = sidewaysDelta(event, frame.clientWidth);
+            if (delta === 0 || max === 0) {
+                return;
+            }
+            scrolling = true;
+            window.clearTimeout(hideTimer);
+            hideTimer = window.setTimeout(() => {
+                scrolling = false;
+                draw();
+            }, HIDE_AFTER);
+            const next = clampShift(exact + delta, max);
+            if (next !== exact) {
+                event.preventDefault();
+                exact = next;
+            }
+            draw();
+        };
+        const onPointerMove = (event) => {
+            const bottom = track.getBoundingClientRect().bottom;
+            const isNear = event.clientY >= bottom - NEAR_BOTTOM;
+            if (isNear !== near) {
+                near = isNear;
+                draw();
+            }
+        };
+        const onPointerLeave = () => {
+            if (near) {
+                near = false;
+                draw();
+            }
+        };
+        frame.addEventListener('wheel', onWheel, { passive: false });
+        frame.addEventListener('pointermove', onPointerMove);
+        frame.addEventListener('pointerleave', onPointerLeave);
+        schedule();
+        return () => {
+            frame.removeEventListener('wheel', onWheel);
+            frame.removeEventListener('pointermove', onPointerMove);
+            frame.removeEventListener('pointerleave', onPointerLeave);
+            rows.disconnect();
+            mounts.disconnect();
+            sizes.disconnect();
+            cancelAnimationFrame(pending);
+            window.clearTimeout(hideTimer);
+            frame.style.removeProperty(SHIFT_PROPERTY);
+            track.removeAttribute('data-visible');
+        };
+    }, [frame, track, thumb, source, resetKey]);
+    const bar = (_jsx("div", { "aria-hidden": true, className: "adecore-tree-shift", children: _jsx("div", { ref: setTrack, className: "adecore-tree-shift-track", children: _jsx("div", { ref: setThumb, className: "adecore-tree-shift-thumb" }) }) }));
+    return { attach: setFrame, bar };
+}
+/* The rows of `Tree.Root`: everything a row holds slides, so a row reaches as far as its last part. */
+export const TREE_ROWS = {
+    root: (frame) => frame,
+    rows: (root) => [...root.querySelectorAll('.adecore-tree-row')],
+    need: (row, shift) => {
+        const box = row.getBoundingClientRect();
+        if (box.width === 0) {
+            return null;
+        }
+        const parts = [...row.children].filter((child) => !child.classList.contains('adecore-tree-guide'));
+        if (parts.length === 0) {
+            return null;
+        }
+        const reach = Math.max(...parts.map((part) => part.getBoundingClientRect().right));
+        const limit = box.right - (Number.parseFloat(getComputedStyle(row).paddingInlineEnd) || 0);
+        return shiftNeed(reach, limit, shift);
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.17.0-beta.2",
+  "version": "0.18.0",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/Kbd.tsx

@@ -7,8 +7,10 @@ import { formatShortcut, shortcutParts, type Shortcut } from './shortcut.ts';
 const INLINE_KBD = 'rounded-sm bg-surface-sunken px-[5px] py-px font-sans text-xs/[inherit] text-text-muted';
 
 /* One key, drawn as a cap. A settings page prints a shortcut key by key, so a gesture can stand beside it. */
-const KEY_CAP =
-    'inline-grid h-6 min-w-6 place-items-center rounded-md border border-b-2 border-border-strong bg-surface-hover bg-clip-padding px-1.5 font-sans text-xs text-text';
+const KEY_CAP = 'inline-grid place-items-center rounded-md border border-b-2 border-border-strong bg-surface-hover bg-clip-padding font-sans text-text';
+
+/* `sm` fits inside a small field, as the hint of the key that focuses it. */
+const KEY_CAP_SIZES = { md: 'h-6 min-w-6 px-1.5 text-xs', sm: 'h-5 min-w-5 px-1 text-2xs' } as const;
 
 export interface KbdProps {
     /* Printed the way this platform writes it. Without one, the children are printed as they are (`↑`, `Esc`). */
@@ -34,13 +36,14 @@ export function Kbd({ shortcut, children, variant = 'menu', className, ref }: Kb
 
 export interface KeyCapProps {
     children: ReactNode;
+    size?: 'md' | 'sm';
     className?: string;
     ref?: Ref<HTMLElement>;
 }
 
-export function KeyCap({ children, className, ref }: KeyCapProps) {
+export function KeyCap({ children, size = 'md', className, ref }: KeyCapProps) {
     return (
-        <kbd ref={ref} className={clsx(KEY_CAP, className)}>
+        <kbd ref={ref} className={clsx(KEY_CAP, KEY_CAP_SIZES[size], className)}>
             {children}
         </kbd>
     );
@@ -50,17 +53,20 @@ export interface KeysProps {
     shortcut: Shortcut;
     /* The pointer gesture the keys go with, such as "drag", as one more cap. */
     then?: string;
+    size?: 'md' | 'sm';
     className?: string;
     ref?: Ref<HTMLSpanElement>;
 }
 
 /* A shortcut as one cap per key, `⌘` and `K`, plus the pointer gesture it goes with. */
-export function Keys({ shortcut, then, className, ref }: KeysProps) {
+export function Keys({ shortcut, then, size = 'md', className, ref }: KeysProps) {
     const parts = [...shortcutParts(shortcut, isApplePlatform()), ...(then ? [then] : [])];
     return (
-        <span ref={ref} className={clsx('flex items-center gap-1', className)}>
+        <span ref={ref} className={clsx('flex items-center', size === 'sm' ? 'gap-0.5' : 'gap-1', className)}>
             {parts.map((part, index) => (
-                <KeyCap key={`${part}-${index}`}>{part}</KeyCap>
+                <KeyCap key={`${part}-${index}`} size={size}>
+                    {part}
+                </KeyCap>
             ))}
         </span>
     );

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

@@ -1,13 +1,10 @@
-import { useEffect, useState, type ReactElement } from 'react';
+import { useMemo, type ReactElement } from 'react';
 import type { FileTree } from '@pierre/trees';
-import { clampShift, maxShift, SHIFT_PROPERTY, shiftNeed, shiftThumb, sidewaysDelta } from './shift.ts';
+import { useTreeShift, type TreeShiftSource } from '../tree/use-tree-shift.tsx';
+import { shiftNeed } from './shift.ts';
 
 const ROWS = '[data-type="item"]:not([data-item-parked="true"])';
 
-const HIDE_AFTER = 900;
-
-const NEAR_BOTTOM = 16;
-
 function boxesOf(element: Element): Element[] {
     return element.getClientRects().length > 0 ? [element] : [...element.children].flatMap((child) => boxesOf(child));
 }
@@ -44,126 +41,15 @@ function needOf(row: HTMLElement, shift: number, gap: number, range: Range): num
     return shiftNeed(range.getBoundingClientRect().right, limitOf(row, content, gap), shift);
 }
 
+/* The file tree draws its rows in a shadow root, and only the name slides: its decorations sit over the row. */
 export function useFileTreeShift(model: FileTree, resetKey?: string): { attach(node: HTMLElement | null): void; bar: ReactElement } {
-    const [frame, setFrame] = useState<HTMLElement | null>(null);
-    const [track, setTrack] = useState<HTMLDivElement | null>(null);
-    const [thumb, setThumb] = useState<HTMLDivElement | null>(null);
-
-    useEffect(() => {
-        if (frame === null || track === null || thumb === null) {
-            return;
-        }
-        const range = document.createRange();
-        let root: ShadowRoot | null = null;
-        let exact = 0;
-        let drawn = 0;
-        let max = 0;
-        let pending = 0;
-        let hideTimer = 0;
-        let scrolling = false;
-        let near = false;
-
-        const draw = (): void => {
-            const shift = Math.round(exact);
-            if (shift !== drawn) {
-                drawn = shift;
-                frame.style.setProperty(SHIFT_PROPERTY, `${shift}px`);
-            }
-            const { left, width } = shiftThumb(shift, max, track.clientWidth, frame.clientWidth);
-            thumb.style.left = `${left}px`;
-            thumb.style.width = `${width}px`;
-            track.toggleAttribute('data-visible', max > 0 && (scrolling || near));
-        };
-
-        const measure = (): void => {
-            pending = 0;
-            if (root === null) {
-                root = model.getFileTreeContainer()?.shadowRoot ?? null;
-                if (root === null) {
-                    return;
-                }
-                rows.observe(root, { childList: true, subtree: true, characterData: true });
-            }
-            const drawnRows = [...root.querySelectorAll<HTMLElement>(ROWS)];
-            const gap = drawnRows.length === 0 ? 0 : Number.parseFloat(getComputedStyle(drawnRows[0]!).columnGap) || 0;
-            max = maxShift(drawnRows.map((row) => needOf(row, drawn, gap, range)).filter((need) => need !== null));
-            exact = clampShift(exact, max);
-            draw();
-        };
-
-        const schedule = (): void => {
-            if (pending === 0) {
-                pending = requestAnimationFrame(measure);
-            }
-        };
-
-        const rows = new MutationObserver(schedule);
-        const mounts = new MutationObserver(schedule);
-        mounts.observe(frame, { childList: true, subtree: true });
-        const sizes = new ResizeObserver(schedule);
-        sizes.observe(frame);
-
-        const onWheel = (event: WheelEvent): void => {
-            const delta = sidewaysDelta(event, frame.clientWidth);
-            if (delta === 0 || max === 0) {
-                return;
-            }
-            scrolling = true;
-            window.clearTimeout(hideTimer);
-            hideTimer = window.setTimeout(() => {
-                scrolling = false;
-                draw();
-            }, HIDE_AFTER);
-            const next = clampShift(exact + delta, max);
-            if (next !== exact) {
-                event.preventDefault();
-                exact = next;
-            }
-            draw();
-        };
-
-        const onPointerMove = (event: PointerEvent): void => {
-            const bottom = track.getBoundingClientRect().bottom;
-            const isNear = event.clientY >= bottom - NEAR_BOTTOM;
-            if (isNear !== near) {
-                near = isNear;
-                draw();
-            }
-        };
-
-        const onPointerLeave = (): void => {
-            if (near) {
-                near = false;
-                draw();
-            }
-        };
-
-        frame.addEventListener('wheel', onWheel, { passive: false });
-        frame.addEventListener('pointermove', onPointerMove);
-        frame.addEventListener('pointerleave', onPointerLeave);
-        schedule();
-
-        return () => {
-            frame.removeEventListener('wheel', onWheel);
-            frame.removeEventListener('pointermove', onPointerMove);
-            frame.removeEventListener('pointerleave', onPointerLeave);
-            rows.disconnect();
-            mounts.disconnect();
-            sizes.disconnect();
-            cancelAnimationFrame(pending);
-            window.clearTimeout(hideTimer);
-            frame.style.removeProperty(SHIFT_PROPERTY);
-            track.removeAttribute('data-visible');
-        };
-    }, [frame, track, thumb, model, resetKey]);
-
-    const bar = (
-        <div aria-hidden className="adecore-tree-shift">
-            <div ref={setTrack} className="adecore-tree-shift-track">
-                <div ref={setThumb} className="adecore-tree-shift-thumb" />
-            </div>
-        </div>
+    const source = useMemo(
+        (): TreeShiftSource => ({
+            root: () => model.getFileTreeContainer()?.shadowRoot ?? null,
+            rows: (root) => [...root.querySelectorAll<HTMLElement>(ROWS)],
+            need: needOf
+        }),
+        [model]
     );
-
-    return { attach: setFrame, bar };
+    return useTreeShift(source, resetKey);
 }

package/src/tabs/parts.tsx

@@ -66,6 +66,8 @@ export function TabsRoot({ value, defaultValue = 0, onValueChange, ...props }: T
 export type TabsListProps = Omit<ComponentProps<typeof BaseTabs.List>, 'className'> & {
     /* On the strip, which runs the width of the pane; padding here insets the tabs from its edges. */
     className?: string;
+    /* Drawn before the tabs, such as what they are the views of. It keeps its own width, like `end`. */
+    start?: ReactNode;
     /* Drawn after the tabs, such as a button that adds one. It keeps its own width: the tabs fit in what is left. */
     end?: ReactNode;
 };
@@ -78,11 +80,12 @@ const sameIndices = (left: readonly number[] | null, right: readonly number[]):
  * in a row nobody sees, so the strip knows what fits before it draws. The tabs are the direct children,
  * since the menu repeats what a tab holds.
  */
-export function TabsList({ className, children, end, ...props }: TabsListProps) {
+export function TabsList({ className, children, start, end, ...props }: TabsListProps) {
     const { t } = useTranslation('ui');
     const { value, select } = useContext(SelectionContext);
     const strip = useRef<HTMLDivElement>(null);
     const measure = useRef<HTMLDivElement>(null);
+    const head = useRef<HTMLDivElement>(null);
     const tail = useRef<HTMLDivElement>(null);
     // Null until the first measure, which runs before the first paint.
     const [shown, setShown] = useState<number[] | null>(null);
@@ -100,7 +103,7 @@ export function TabsList({ className, children, end, ...props }: TabsListProps)
         const fit = (): void => {
             const style = getComputedStyle(host);
             const gap = parseFloat(style.columnGap) || 0;
-            const taken = tail.current === null ? 0 : tail.current.getBoundingClientRect().width + gap;
+            const taken = [head.current, tail.current].reduce((sum, part) => (part === null ? sum : sum + part.getBoundingClientRect().width + gap), 0);
             const room = host.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - taken;
             const cells = [...row.children].map((cell) => cell.getBoundingClientRect().width);
             const more = cells.pop() ?? 0;
@@ -111,8 +114,10 @@ export function TabsList({ className, children, end, ...props }: TabsListProps)
         const observer = new ResizeObserver(fit);
         observer.observe(host);
         observer.observe(row);
-        if (tail.current !== null) {
-            observer.observe(tail.current);
+        for (const part of [head.current, tail.current]) {
+            if (part !== null) {
+                observer.observe(part);
+            }
         }
         return () => observer.disconnect();
     });
@@ -122,6 +127,11 @@ export function TabsList({ className, children, end, ...props }: TabsListProps)
 
     return (
         <div ref={strip} className={clsx('relative flex items-center gap-4 border-b border-border', className)}>
+            {start !== undefined && start !== null && (
+                <div ref={head} className="flex shrink-0 items-center gap-1">
+                    {start}
+                </div>
+            )}
             <BaseTabs.List className="flex min-w-0 items-end gap-4" {...props}>
                 {visible}
             </BaseTabs.List>

package/src/theme.css

@@ -134,6 +134,13 @@
     --file-icon-mauve: #79697b;
 }
 
+/* Code a person reads as code (an editor, a grid of values, a statement) at one size the app may set on
+   `<html>`, apart from the interface's own type. Left alone it is `--text-code`. */
+:root {
+    --code-font-size: var(--text-code);
+    --code-line-height: var(--text-code--line-height);
+}
+
 /* Who floats over whom. Whole numbers in one place, so a new popup cannot guess. */
 :root {
     --z-dialog-backdrop: 80;
@@ -628,6 +635,39 @@
     .adecore-tree-decoration {
         font-variant-numeric: tabular-nums;
     }
+    /* A tree whose rows slide sideways: every part of a row keeps its width and moves with the shift. */
+    .adecore-tree[data-overflow="scroll"] .adecore-tree-row {
+        overflow: clip;
+    }
+    .adecore-tree[data-overflow="scroll"] .adecore-tree-row > * {
+        flex-shrink: 0;
+    }
+    .adecore-tree[data-overflow="scroll"] .adecore-tree-row::after {
+        content: "";
+        flex: none;
+        order: -100;
+        margin-inline: calc(var(--adecore-tree-shift, 0px) * -1) calc(var(--tree-row-gap) * -1);
+    }
+    .adecore-tree[data-overflow="scroll"] .adecore-tree-guide {
+        translate: calc(var(--adecore-tree-shift, 0px) * -1) 0;
+    }
+    .adecore-tree[data-overflow="scroll"] .adecore-tree-label {
+        overflow: visible;
+    }
+    /* The bar keeps to the bottom of the tree however few rows there are: a column whose rows keep their
+       height, and the bar after them pushed down. Its own room is the space under the last row, so the
+       bar sits as far from the bottom edge mid-scroll as at the end. */
+    .adecore-tree[data-overflow="scroll"] {
+        display: flex;
+        flex-direction: column;
+    }
+    .adecore-tree[data-overflow="scroll"] > * {
+        flex-shrink: 0;
+    }
+    .adecore-tree[data-overflow="scroll"] > .adecore-tree-shift {
+        margin-top: auto;
+        height: 8px;
+    }
     .adecore-file-tree {
         position: relative;
         min-height: 0;

package/src/tree/parts.tsx

@@ -1,27 +1,43 @@
-import type { MouseEvent, KeyboardEvent, PointerEvent } from 'react';
+import { useCallback, type MouseEvent, type KeyboardEvent, type PointerEvent } from 'react';
 import clsx from 'clsx';
 import { useRender } from '@base-ui-components/react/use-render';
 import { ChevronRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Checkbox as UICheckbox, type CheckboxProps } from '../Checkbox.tsx';
 import { Icon } from '../Icon.tsx';
+import { mergeRefs } from '../merge-refs.ts';
 import { treeRowStyle } from './style.ts';
+import { TREE_ROWS, useTreeShift } from './use-tree-shift.tsx';
 
-export type TreeRootProps = useRender.ComponentProps<'div'>;
+export type TreeRootProps = useRender.ComponentProps<'div'> & {
+    /* What a row wider than the tree does: cut its name off at the end, or keep the row whole and let every row slide sideways together, as a file tree does. */
+    overflow?: 'truncate' | 'scroll';
+};
 
-export function TreeRoot({ render, className, ref, children, ...props }: TreeRootProps) {
+export function TreeRoot({ overflow = 'truncate', render, className, ref, children, ...props }: TreeRootProps) {
+    const { attach, bar } = useTreeShift(TREE_ROWS);
+    const scrolls = overflow === 'scroll';
+    const rootRef = useCallback(
+        (node: HTMLDivElement | null) => {
+            attach(scrolls ? node : null);
+            mergeRefs<HTMLDivElement>(ref)(node);
+        },
+        [scrolls, ref, attach]
+    );
     return useRender({
         render,
-        ref,
+        ref: rootRef,
         defaultTagName: 'div',
         props: {
             role: 'tree',
             ...props,
+            'data-overflow': overflow,
             className: clsx('adecore-tree', className),
             children: (
                 <>
                     <style>{treeRowStyle('.adecore-tree-row')}</style>
                     {children}
+                    {scrolls && bar}
                 </>
             )
         }

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

@@ -0,0 +1,163 @@
+import { useEffect, useState, type ReactElement } from 'react';
+import { clampShift, maxShift, SHIFT_PROPERTY, shiftNeed, shiftThumb, sidewaysDelta } from '../file-tree/shift.ts';
+
+const HIDE_AFTER = 900;
+
+const NEAR_BOTTOM = 16;
+
+/* Where a tree draws its rows, and how far a row reaches past the edge it may use. */
+export interface TreeShiftSource {
+    /* The node whose changes add, remove or rename rows; null while the tree has not drawn it yet. */
+    root(frame: HTMLElement): ParentNode | null;
+    rows(root: ParentNode): readonly HTMLElement[];
+    /* How many pixels of the row lie past its edge at no shift; null for a row that is not laid out. */
+    need(row: HTMLElement, shift: number, gap: number, range: Range): number | null;
+}
+
+/*
+ * Rows that are wider than the tree slide sideways together, by a shift every row reads from the
+ * frame's `--adecore-tree-shift`, with a thin bar that shows while a person scrolls or nears it. A
+ * shift instead of a scroll keeps every row's background and the vertical scroll where they are.
+ */
+export function useTreeShift(source: TreeShiftSource, resetKey?: string): { attach(node: HTMLElement | null): void; bar: ReactElement } {
+    const [frame, setFrame] = useState<HTMLElement | null>(null);
+    const [track, setTrack] = useState<HTMLDivElement | null>(null);
+    const [thumb, setThumb] = useState<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        if (frame === null || track === null || thumb === null) {
+            return;
+        }
+        const range = document.createRange();
+        let root: ParentNode | null = null;
+        let exact = 0;
+        let drawn = 0;
+        let max = 0;
+        let pending = 0;
+        let hideTimer = 0;
+        let scrolling = false;
+        let near = false;
+
+        const draw = (): void => {
+            const shift = Math.round(exact);
+            if (shift !== drawn) {
+                drawn = shift;
+                frame.style.setProperty(SHIFT_PROPERTY, `${shift}px`);
+            }
+            const { left, width } = shiftThumb(shift, max, track.clientWidth, frame.clientWidth);
+            thumb.style.left = `${left}px`;
+            thumb.style.width = `${width}px`;
+            track.toggleAttribute('data-visible', max > 0 && (scrolling || near));
+        };
+
+        const measure = (): void => {
+            pending = 0;
+            if (root === null) {
+                root = source.root(frame);
+                if (root === null) {
+                    return;
+                }
+                rows.observe(root, { childList: true, subtree: true, characterData: true });
+            }
+            const drawnRows = source.rows(root);
+            const gap = drawnRows.length === 0 ? 0 : Number.parseFloat(getComputedStyle(drawnRows[0]!).columnGap) || 0;
+            max = maxShift(drawnRows.map((row) => source.need(row, drawn, gap, range)).filter((need) => need !== null));
+            exact = clampShift(exact, max);
+            draw();
+        };
+
+        const schedule = (): void => {
+            if (pending === 0) {
+                pending = requestAnimationFrame(measure);
+            }
+        };
+
+        const rows = new MutationObserver(schedule);
+        const mounts = new MutationObserver(schedule);
+        mounts.observe(frame, { childList: true, subtree: true });
+        const sizes = new ResizeObserver(schedule);
+        sizes.observe(frame);
+
+        const onWheel = (event: WheelEvent): void => {
+            const delta = sidewaysDelta(event, frame.clientWidth);
+            if (delta === 0 || max === 0) {
+                return;
+            }
+            scrolling = true;
+            window.clearTimeout(hideTimer);
+            hideTimer = window.setTimeout(() => {
+                scrolling = false;
+                draw();
+            }, HIDE_AFTER);
+            const next = clampShift(exact + delta, max);
+            if (next !== exact) {
+                event.preventDefault();
+                exact = next;
+            }
+            draw();
+        };
+
+        const onPointerMove = (event: PointerEvent): void => {
+            const bottom = track.getBoundingClientRect().bottom;
+            const isNear = event.clientY >= bottom - NEAR_BOTTOM;
+            if (isNear !== near) {
+                near = isNear;
+                draw();
+            }
+        };
+
+        const onPointerLeave = (): void => {
+            if (near) {
+                near = false;
+                draw();
+            }
+        };
+
+        frame.addEventListener('wheel', onWheel, { passive: false });
+        frame.addEventListener('pointermove', onPointerMove);
+        frame.addEventListener('pointerleave', onPointerLeave);
+        schedule();
+
+        return () => {
+            frame.removeEventListener('wheel', onWheel);
+            frame.removeEventListener('pointermove', onPointerMove);
+            frame.removeEventListener('pointerleave', onPointerLeave);
+            rows.disconnect();
+            mounts.disconnect();
+            sizes.disconnect();
+            cancelAnimationFrame(pending);
+            window.clearTimeout(hideTimer);
+            frame.style.removeProperty(SHIFT_PROPERTY);
+            track.removeAttribute('data-visible');
+        };
+    }, [frame, track, thumb, source, resetKey]);
+
+    const bar = (
+        <div aria-hidden className="adecore-tree-shift">
+            <div ref={setTrack} className="adecore-tree-shift-track">
+                <div ref={setThumb} className="adecore-tree-shift-thumb" />
+            </div>
+        </div>
+    );
+
+    return { attach: setFrame, bar };
+}
+
+/* The rows of `Tree.Root`: everything a row holds slides, so a row reaches as far as its last part. */
+export const TREE_ROWS: TreeShiftSource = {
+    root: (frame) => frame,
+    rows: (root) => [...root.querySelectorAll<HTMLElement>('.adecore-tree-row')],
+    need: (row, shift) => {
+        const box = row.getBoundingClientRect();
+        if (box.width === 0) {
+            return null;
+        }
+        const parts = [...row.children].filter((child) => !child.classList.contains('adecore-tree-guide'));
+        if (parts.length === 0) {
+            return null;
+        }
+        const reach = Math.max(...parts.map((part) => part.getBoundingClientRect().right));
+        const limit = box.right - (Number.parseFloat(getComputedStyle(row).paddingInlineEnd) || 0);
+        return shiftNeed(reach, limit, shift);
+    }
+};