@adecore/ui 0.35.4 → 0.36.0

package/src/file-tree/parts.tsx

@@ -1,14 +1,18 @@
-import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { useRender } from '@base-ui/react/use-render';
 import { FileTree as PierreFileTree, type FileTreeProps as PierreProps } from '@pierre/trees/react';
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
 import { useTranslation } from 'react-i18next';
+import type { LucideIcon } from 'lucide-react';
 import clsx from 'clsx';
+import { Icon } from '../Icon.tsx';
 import { mergeRefs } from '../merge-refs.ts';
 import { directoryHandle, extendsSelection, followFocus, movesFocus, menuTargetsOf, rowPathOf, visibleRows } from './helpers.ts';
+import type { FileTreeEmptyLabel } from './empty-lines.ts';
+import { useEmptyLines } from './use-empty-lines.ts';
 import { useFileTreeShift } from './use-file-tree-shift.tsx';
-import { useFileTreeSlots } from './use-slots.ts';
+import { useFileTreeSlots, type FileTreeDecorationOrder } from './use-slots.ts';
 
 export type FileTreeRootProps = useRender.ComponentProps<'div'> & {
     model: FileTree;
@@ -23,6 +27,16 @@ export type FileTreeRootProps = useRender.ComponentProps<'div'> & {
     onExpandedPathsChange?(paths: readonly string[]): void;
     renderControl?(row: FileTreeVisibleRow): ReactNode;
     renderDecoration?(row: FileTreeVisibleRow): ReactNode;
+    /* `after-status` draws the decoration after the engine's git status column instead of between the name and that column. */
+    decorationOrder?: FileTreeDecorationOrder;
+    /* A Lucide icon in place of the row's own glyph (the file icon, or a directory's chevron); undefined keeps that glyph. */
+    rowIcon?(row: FileTreeVisibleRow): LucideIcon | undefined;
+    /* As tall as its rows, up to the height its container leaves it, instead of filling that container. */
+    fitContent?: boolean;
+    /* Marks where this occurs in every name, ignoring case, such as the query a list was filtered by. */
+    highlight?: string;
+    /* The line under an open directory with nothing in it; undefined draws none, such as while its children still load. */
+    emptyLabel?: FileTreeEmptyLabel;
     treeProps?: Omit<PierreProps, 'model'>;
 };
 
@@ -43,6 +57,11 @@ export function FileTreeRoot({
     onRowDragStart,
     renderControl,
     renderDecoration,
+    decorationOrder = 'before-status',
+    rowIcon,
+    fitContent = false,
+    highlight = '',
+    emptyLabel,
     treeProps,
     render,
     className,
@@ -50,6 +69,7 @@ export function FileTreeRoot({
     children,
     onClick,
     onKeyDownCapture,
+    style,
     ...props
 }: FileTreeRootProps) {
     const { t } = useTranslation('ui');
@@ -60,7 +80,11 @@ export function FileTreeRoot({
         attach(node as HTMLElement | null);
         mergeRefs<Element>(ref)(node);
     };
-    const slots = useFileTreeSlots(model, frame, label ?? t('tree.label'));
+    const subscribeToRows = (listener: () => void): (() => void) => (fitContent ? model.subscribe(listener) : () => {});
+    const countRows = (): number => model.getVisibleCount();
+    const rowCount = useSyncExternalStore(subscribeToRows, countRows, countRows);
+    const slots = useFileTreeSlots(model, frame, label ?? t('tree.label'), { order: decorationOrder, rowIcon, highlight, emptyLabel });
+    const passEmptyLine = useEmptyLines(model, frame, emptyLabel);
     const latestLoads = useRef({ onLoadChildren, onExpandedPathsChange });
     useLayoutEffect(() => {
         latestLoads.current = { onLoadChildren, onExpandedPathsChange };
@@ -131,7 +155,9 @@ export function FileTreeRoot({
                 cancelFocus.current?.();
                 // beta.6 stops the key in its own handler; selection must follow after that handler moves focus.
                 cancelFocus.current = followFocus(model, onFocusMove);
-            } else if (event.key === 'Enter' && !event.altKey && !event.metaKey && !event.ctrlKey) {
+            }
+            passEmptyLine(event);
+            if (event.key === 'Enter' && !event.altKey && !event.metaKey && !event.ctrlKey) {
                 const path = model.getFocusedPath();
                 if (path === null) {
                     return;
@@ -169,7 +195,7 @@ export function FileTreeRoot({
             frame.removeEventListener('contextmenu', onContext);
             frame.removeEventListener('dragstart', onDrag);
         };
-    }, [frame, model, selectionFollowsFocus, onActivate, onFocusMove, onRowContextMenu, onRowDragStart]);
+    }, [frame, model, selectionFollowsFocus, passEmptyLine, onActivate, onFocusMove, onRowContextMenu, onRowDragStart]);
 
     return useRender({
         render,
@@ -178,17 +204,22 @@ export function FileTreeRoot({
         props: {
             ...props,
             className: clsx('adecore-tree adecore-file-tree', className),
+            style: fitContent ? { ...style, height: rowCount * model.getItemHeight(), maxHeight: '100%' } : style,
             onClick,
             onKeyDownCapture,
             children: (
                 <>
                     <PierreFileTree {...treeProps} model={model} className={clsx('adecore-file-tree-host', treeProps?.className)} />
-                    {slots.map(({ row, control, decoration }) => (
-                        <span key={control.slot} style={{ display: 'contents' }}>
-                            {createPortal(renderControl?.(row), control)}
-                            {createPortal(renderDecoration?.(row), decoration)}
-                        </span>
-                    ))}
+                    {slots.map(({ row, control, decoration, icon }) => {
+                        const ownIcon = icon === null ? undefined : rowIcon?.(row);
+                        return (
+                            <span key={control.slot} style={{ display: 'contents' }}>
+                                {createPortal(renderControl?.(row), control)}
+                                {createPortal(renderDecoration?.(row), decoration)}
+                                {icon !== null && ownIcon !== undefined && createPortal(<Icon icon={ownIcon} size={14} />, icon)}
+                            </span>
+                        );
+                    })}
                     {children}
                     {bar}
                 </>

package/src/file-tree/style.ts

@@ -1,4 +1,5 @@
 import { treeRowStyle } from '../tree/style.ts';
+import { MATCH_HIGHLIGHT } from './highlight.ts';
 
 // beta.6 splits the extension into nested grids; flatten them to truncate the end of the entire name.
 export const FILE_TREE_CSS = `
@@ -20,6 +21,18 @@ export const FILE_TREE_CSS = `
     [data-item-section="content"] :where([data-truncate-group-container], [data-truncate-group-container] div, [data-truncate-container], [data-truncate-container] div) { display: inline; }
     [data-item-section="content"] [data-truncate-content] { direction: ltr; }
     [data-item-section="content"] :where([data-truncate-content="overflow"], [data-truncate-marker-cell], [data-truncate-fill]) { display: none; }
+    [data-item-section="git"] { margin-inline-end: var(--adecore-tree-status-space, 0px); }
+    ::highlight(${MATCH_HIGHLIGHT}) { background-color: var(--match); color: inherit; }
     [data-tree-port] { position: absolute; z-index: 4; display: flex; align-items: center; height: 25px; pointer-events: none; }
     [data-tree-port] > slot { pointer-events: auto; }
+    [data-tree-port="icon"] { width: 16px; justify-content: center; }
+    [data-tree-port="icon"] > slot { pointer-events: none; }
+    [data-own-icon="true"] [data-item-section="icon"] > * { visibility: hidden; }
+    [data-own-icon="true"][data-item-type="folder"]:hover [data-item-section="icon"] > * { visibility: visible; }
+    [data-tree-port="icon"][data-hover="true"] { visibility: hidden; }
+    [data-empty-line="true"] { cursor: default; }
+    [data-empty-line="true"] :is([data-item-section="icon"], [data-item-section="git"]) { display: none; }
+    [data-empty-line="true"] [data-item-section="content"] { overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
+    [data-empty-line="true"] [data-item-section="content"] > * { display: none; }
+    [data-empty-line="true"] [data-item-section="content"]::before { content: attr(data-empty-label); }
 `;

package/src/file-tree/use-empty-lines.ts

@@ -0,0 +1,115 @@
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import type { FileTree } from '@pierre/trees';
+import { emptyLineChanges, isEmptyLine, pastEmptyLine, skipEmptyLine, type FileTreeEmptyLabel } from './empty-lines.ts';
+import { movesFocus, visibleRows } from './helpers.ts';
+
+const POINTER_EVENTS = ['pointerdown', 'mousedown', 'click', 'dblclick', 'auxclick', 'contextmenu', 'dragstart'] as const;
+
+function onEmptyLine(event: Event): boolean {
+    return event.composedPath().some((node) => node instanceof HTMLElement && node.dataset.emptyLine === 'true');
+}
+
+/*
+ * Keeps a line under every open directory that is known to be empty, and keeps the line out of
+ * reach: a pointer on it does nothing and a key passes it. Returns what to call with every key the
+ * tree hears, after anything that notes where focus was.
+ */
+export function useEmptyLines(model: FileTree, frame: HTMLElement | null, emptyLabel: FileTreeEmptyLabel | undefined): (event: KeyboardEvent) => void {
+    const latest = useRef(emptyLabel);
+    const reconcile = useRef<(() => void) | undefined>(undefined);
+    // Focus that lands on a line goes on in the direction of the last key, which the engine handles after the tree hears it.
+    const lastKey = useRef('');
+    const enabled = emptyLabel !== undefined;
+
+    useLayoutEffect(() => {
+        latest.current = emptyLabel;
+        reconcile.current?.();
+    }, [emptyLabel]);
+
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const added = new Set<string>();
+        let pending = false;
+        let disposed = false;
+        const run = (): void => {
+            pending = false;
+            const labelOf = latest.current;
+            if (disposed || labelOf === undefined) {
+                return;
+            }
+            const selectedLines = model.getSelectedPaths().filter(isEmptyLine);
+            for (const path of selectedLines) {
+                model.getItem(path)?.deselect();
+            }
+            // A selection that followed focus onto the line follows it on to where it went.
+            const focused = skipEmptyLine(model, lastKey.current) ? model.getFocusedPath() : null;
+            if (focused !== null && selectedLines.length > 0) {
+                model.getItem(focused)?.select();
+            }
+            const { add, remove } = emptyLineChanges(visibleRows(model), labelOf, (path) => model.getItem(path) !== null, added);
+            for (const path of remove) {
+                added.delete(path);
+            }
+            for (const path of add) {
+                added.add(path);
+            }
+            if (add.length > 0 || remove.length > 0) {
+                model.batch([...remove.map((path) => ({ type: 'remove' as const, path })), ...add.map((path) => ({ type: 'add' as const, path }))]);
+            }
+        };
+        const schedule = (): void => {
+            if (!pending && !disposed) {
+                pending = true;
+                queueMicrotask(run);
+            }
+        };
+        reconcile.current = schedule;
+        const unsubscribe = model.subscribe(schedule);
+        run();
+        return () => {
+            disposed = true;
+            reconcile.current = undefined;
+            unsubscribe();
+            const left = [...added].filter((path) => model.getItem(path) !== null);
+            if (left.length > 0) {
+                model.batch(left.map((path) => ({ type: 'remove' as const, path })));
+            }
+        };
+    }, [model, enabled]);
+
+    useEffect(() => {
+        if (frame === null) {
+            return;
+        }
+        const block = (event: Event): void => {
+            if (onEmptyLine(event)) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        };
+        for (const type of POINTER_EVENTS) {
+            frame.addEventListener(type, block, true);
+        }
+        return () => {
+            for (const type of POINTER_EVENTS) {
+                frame.removeEventListener(type, block, true);
+            }
+        };
+    }, [frame]);
+
+    return (event: KeyboardEvent): void => {
+        lastKey.current = event.key;
+        const past = latest.current !== undefined && movesFocus(event) ? pastEmptyLine(model, event.key) : null;
+        if (past === null) {
+            return;
+        }
+        // The engine never sees this key, so focus never lands on the line for a moment.
+        event.preventDefault();
+        event.stopPropagation();
+        if (past !== model.getFocusedPath()) {
+            model.scrollToPath(past, { focus: true, offset: 'nearest' });
+        }
+    };
+}

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

@@ -3,6 +3,7 @@ import { useFileTree as usePierreFileTree } from '@pierre/trees/react';
 import { useLayoutEffect, useRef } from 'react';
 import { FILE_TREE_ICONS } from '../file-icon.ts';
 import { TREE_ROW_HEIGHT } from '../tree/style.ts';
+import { isEmptyLine } from './empty-lines.ts';
 import { compareRows } from './helpers.ts';
 import { FILE_TREE_CSS } from './style.ts';
 
@@ -25,7 +26,7 @@ export function useFileTree(options: FileTreeOptions) {
         ...options,
         density: 'compact',
         itemHeight: TREE_ROW_HEIGHT,
-        onSelectionChange: (paths) => latest.current?.(paths),
+        onSelectionChange: (paths) => latest.current?.(paths.some(isEmptyLine) ? paths.filter((path) => !isEmptyLine(path)) : paths),
         unsafeCSS: `${FILE_TREE_CSS}\n${options.unsafeCSS ?? ''}`
     });
 }

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

@@ -1,13 +1,18 @@
-import { useEffect, useId, useState } from 'react';
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+import type { LucideIcon } from 'lucide-react';
+import { directoryOfEmptyLine, isEmptyLine, type FileTreeEmptyLabel } from './empty-lines.ts';
 import { pathOfRow, visibleRows, visibleRowsAround } from './helpers.ts';
+import { matchHighlight, rangesOfMatches } from './highlight.ts';
 import { FILE_TREE_CSS } from './style.ts';
 
 export interface RowSlot {
     row: FileTreeVisibleRow;
     control: HTMLElement;
     decoration: HTMLElement;
+    /* Where a row's own icon goes in place of the engine's glyph; null when the row keeps that glyph. */
+    icon: HTMLElement | null;
 }
 
 export interface Port {
@@ -16,8 +21,13 @@ export interface Port {
     decoration: HTMLElement;
     lightControl: HTMLElement;
     lightDecoration: HTMLElement;
+    icon?: HTMLElement;
+    lightIcon?: HTMLElement;
+    unhover?(): void;
 }
 
+export type FileTreeRowIcon = (row: FileTreeVisibleRow) => LucideIcon | undefined;
+
 /*
  * The rows of the mounted window, read from the spacer beta.6 puts above it (its first index times the
  * row height), so a scroll frame copies those and not every visible row. The whole list stands in when
@@ -37,36 +47,48 @@ function mountedRows(model: FileTree, shadow: ShadowRoot, elements: readonly HTM
     return elements.every((element) => element.dataset.itemPath === undefined || paths.has(element.dataset.itemPath)) ? rows : visibleRows(model);
 }
 
+/* Where a row's own decoration goes: between the name and the engine's git status column, or after that column. */
+export type FileTreeDecorationOrder = 'before-status' | 'after-status';
+
 /*
  * Lines the ports up with their rows: every size first, then the spaces they reserve, then every offset,
  * then the ports, so a pass forces two layouts at most however many rows are mounted.
  */
-export function positionPorts(ports: Iterable<Port>): void {
+export function positionPorts(ports: Iterable<Port>, order: FileTreeDecorationOrder = 'before-status'): void {
     const spaced = [...ports].map((port) => ({
         port,
+        // Without a git column, after the column is right after the name.
+        status: order === 'after-status' ? port.rowElement.querySelector<HTMLElement>('[data-item-section="git"]') : null,
         control: port.lightControl.childNodes.length > 0 ? Math.ceil(port.lightControl.getBoundingClientRect().width) + 6 : 0,
         decoration: port.lightDecoration.childNodes.length > 0 ? Math.ceil(port.lightDecoration.getBoundingClientRect().width) + 6 : 0
     }));
-    for (const { port, control, decoration } of spaced) {
+    for (const { port, status, control, decoration } of spaced) {
         setSpace(port.rowElement, '--adecore-tree-control-space', control);
-        setSpace(port.rowElement, '--adecore-tree-decoration-space', decoration);
+        setSpace(port.rowElement, '--adecore-tree-decoration-space', status === null ? decoration : 0);
+        setSpace(port.rowElement, '--adecore-tree-status-space', status === null ? 0 : decoration);
     }
-    const placed = spaced.map(({ port, control, decoration }) => {
+    const placed = spaced.map(({ port, status, control, decoration }) => {
         const row = port.rowElement;
-        const content = row.querySelector<HTMLElement>('[data-item-section="content"]');
+        const before = status ?? row.querySelector<HTMLElement>('[data-item-section="content"]');
         const icon = row.querySelector<HTMLElement>('[data-item-section="icon"]');
+        const iconLeft = row.offsetLeft + (icon?.offsetLeft ?? 4);
         return {
             port,
             top: `${row.offsetTop}px`,
-            controlLeft: `${row.offsetLeft + (icon?.offsetLeft ?? 4) - control}px`,
-            decorationLeft: `${row.offsetLeft + (content === null ? row.offsetWidth - decoration - 2 : content.offsetLeft + content.offsetWidth + 6)}px`
+            iconLeft: `${iconLeft}px`,
+            controlLeft: `${iconLeft - control}px`,
+            decorationLeft: `${row.offsetLeft + (before === null ? row.offsetWidth - decoration - 2 : before.offsetLeft + before.offsetWidth + 6)}px`
         };
     });
-    for (const { port, top, controlLeft, decorationLeft } of placed) {
+    for (const { port, top, iconLeft, controlLeft, decorationLeft } of placed) {
         port.control.style.top = top;
         port.control.style.left = controlLeft;
         port.decoration.style.top = top;
         port.decoration.style.left = decorationLeft;
+        if (port.icon !== undefined) {
+            port.icon.style.top = top;
+            port.icon.style.left = iconLeft;
+        }
     }
 }
 
@@ -78,10 +100,53 @@ function setSpace(row: HTMLElement, name: string, space: number): void {
     }
 }
 
+export interface FileTreeSlotOptions {
+    order: FileTreeDecorationOrder;
+    rowIcon?: FileTreeRowIcon;
+    /* What to mark in every name; empty marks nothing. */
+    highlight: string;
+    emptyLabel?: FileTreeEmptyLabel;
+}
+
+/* An empty line draws its directory's label in place of its name and is no item to point at or read out. */
+function markEmptyLine(element: HTMLElement, label: string): void {
+    element.dataset.emptyLine = 'true';
+    element.dataset.interactive = 'false';
+    element.setAttribute('aria-hidden', 'true');
+    const content = element.querySelector<HTMLElement>('[data-item-section="content"]');
+    if (content !== null && content.dataset.emptyLabel !== label) {
+        content.dataset.emptyLabel = label;
+    }
+}
+
+// The engine recycles row elements, so one that drew a line can come back as an ordinary row.
+function unmarkEmptyLine(element: HTMLElement): void {
+    if (element.dataset.emptyLine === undefined) {
+        return;
+    }
+    delete element.dataset.emptyLine;
+    element.removeAttribute('aria-hidden');
+    const content = element.querySelector<HTMLElement>('[data-item-section="content"]');
+    if (content !== null) {
+        delete content.dataset.emptyLabel;
+    }
+}
+
 // beta.6 owns button rows. Sibling slots keep real controls outside those buttons and in the app's stylesheet.
-export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, label: string) {
+export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, label: string, { order, rowIcon, highlight, emptyLabel }: FileTreeSlotOptions) {
     const prefix = useId().replaceAll(':', '');
     const [slots, setSlots] = useState<RowSlot[]>([]);
+    const latestIcon = useRef(rowIcon);
+    const latestHighlight = useRef(highlight);
+    const latestEmpty = useRef(emptyLabel);
+    const rescan = useRef<(() => void) | undefined>(undefined);
+
+    useLayoutEffect(() => {
+        latestIcon.current = rowIcon;
+        latestHighlight.current = highlight;
+        latestEmpty.current = emptyLabel;
+        rescan.current?.();
+    }, [rowIcon, highlight, emptyLabel]);
 
     useEffect(() => {
         if (frame === null) {
@@ -94,8 +159,23 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
         let disposed = false;
         let pending = false;
         let snapshot: string | null = null;
+        let marked: Range[] = [];
+
+        const mark = (rows: readonly HTMLElement[], query: string): void => {
+            const matches = matchHighlight();
+            if (matches === null) {
+                return;
+            }
+            for (const range of marked) {
+                matches.delete(range);
+            }
+            marked = rangesOfMatches(rows, query);
+            for (const range of marked) {
+                matches.add(range);
+            }
+        };
 
-        const position = (): void => positionPorts(ports.values());
+        const position = (): void => positionPorts(ports.values(), order);
 
         const resize = new ResizeObserver(position);
         const dropPort = (port: Port): void => {
@@ -105,6 +185,53 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
             resize.unobserve(port.lightDecoration);
             port.lightControl.remove();
             port.lightDecoration.remove();
+            dropIcon(port);
+        };
+        const clearPort = (port: Port): void => {
+            port.rowElement.style.removeProperty('--adecore-tree-control-space');
+            port.rowElement.style.removeProperty('--adecore-tree-decoration-space');
+            port.rowElement.style.removeProperty('--adecore-tree-status-space');
+            delete port.rowElement.dataset.ownIcon;
+            dropPort(port);
+        };
+        const dropIcon = (port: Port): void => {
+            port.unhover?.();
+            port.icon?.remove();
+            port.lightIcon?.remove();
+            port.icon = undefined;
+            port.lightIcon = undefined;
+            port.unhover = undefined;
+        };
+        // The icon lets every pointer event through to the row under it, which then opens, folds or selects as it would.
+        const makeIcon = (port: Port, host: HTMLElement): void => {
+            const container = document.createElement('span');
+            container.dataset.treePort = 'icon';
+            container.dataset.itemPath = port.rowElement.dataset.itemPath;
+            const slot = document.createElement('slot');
+            slot.name = `${prefix}-icon-${serial++}`;
+            container.append(slot);
+            port.rowElement.parentElement?.append(container);
+            const target = document.createElement('span');
+            target.slot = slot.name;
+            target.className = 'adecore-tree-icon';
+            host.append(target);
+            // A folder under the pointer gives its chevron back, so the row still says it opens.
+            const show = (): void => {
+                if (port.rowElement.dataset.itemType === 'folder') {
+                    container.dataset.hover = 'true';
+                }
+            };
+            const hide = (): void => {
+                delete container.dataset.hover;
+            };
+            port.rowElement.addEventListener('pointerenter', show);
+            port.rowElement.addEventListener('pointerleave', hide);
+            port.icon = container;
+            port.lightIcon = target;
+            port.unhover = () => {
+                port.rowElement.removeEventListener('pointerenter', show);
+                port.rowElement.removeEventListener('pointerleave', hide);
+            };
         };
         const makePort = (element: HTMLElement, host: HTMLElement, kind: 'control' | 'decoration'): { container: HTMLElement; target: HTMLElement } => {
             const container = document.createElement('span');
@@ -164,12 +291,25 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
                 }
             }
             const next: RowSlot[] = [];
+            const named: HTMLElement[] = [];
             for (const element of elements) {
                 const path = element.dataset.itemPath;
                 const row = path === undefined ? undefined : byPath.get(path);
                 if (row === undefined) {
                     continue;
                 }
+                if (isEmptyLine(row.path)) {
+                    const recycled = ports.get(element);
+                    if (recycled !== undefined) {
+                        clearPort(recycled);
+                        ports.delete(element);
+                    }
+                    const directory = byPath.get(directoryOfEmptyLine(row.path));
+                    markEmptyLine(element, (directory === undefined ? undefined : latestEmpty.current?.(directory)) ?? '');
+                    continue;
+                }
+                unmarkEmptyLine(element);
+                named.push(element);
                 element.dataset.interactive = 'true';
                 element.dataset.joinedStart = String(row.isSelected && byIndex.get(row.index - 1)?.isSelected === true);
                 element.dataset.joinedEnd = String(row.isSelected && byIndex.get(row.index + 1)?.isSelected === true);
@@ -195,16 +335,34 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
                 }
                 port.lightControl.dataset.itemPath = row.path;
                 port.lightDecoration.dataset.itemPath = row.path;
-                next.push({ row, control: port.lightControl, decoration: port.lightDecoration });
+                const ownIcon = latestIcon.current?.(row) !== undefined;
+                if (ownIcon && port.icon === undefined) {
+                    makeIcon(port, current);
+                } else if (!ownIcon && port.icon !== undefined) {
+                    dropIcon(port);
+                }
+                if (port.icon !== undefined && port.icon.dataset.itemPath !== row.path) {
+                    port.icon.dataset.itemPath = row.path;
+                }
+                if (ownIcon) {
+                    element.dataset.ownIcon = 'true';
+                } else if (element.dataset.ownIcon !== undefined) {
+                    delete element.dataset.ownIcon;
+                }
+                next.push({ row, control: port.lightControl, decoration: port.lightDecoration, icon: port.lightIcon ?? null });
             }
             const key = next
-                .map(({ row, control }) => `${control.slot}:${row.path}:${row.isSelected}:${row.isExpanded}:${row.isFocused}:${row.name}`)
+                .map(
+                    ({ row, control, icon }) =>
+                        `${control.slot}:${row.path}:${row.isSelected}:${row.isExpanded}:${row.isFocused}:${row.name}:${icon?.slot ?? ''}`
+                )
                 .join('|');
             if (snapshot !== key) {
                 snapshot = key;
                 // Recycled rows must paint with their new portal contents in the same frame.
                 flushSync(() => setSlots(next));
             }
+            mark(named, latestHighlight.current);
             position();
         };
         const schedule = (): void => {
@@ -213,6 +371,7 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
                 queueMicrotask(scan);
             }
         };
+        rescan.current = schedule;
         const shifts = new MutationObserver(position);
         shifts.observe(frame, { attributes: true, attributeFilter: ['style'] });
         const changes = new MutationObserver(schedule);
@@ -221,18 +380,18 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
         schedule();
         return () => {
             disposed = true;
+            rescan.current = undefined;
             unsubscribe();
             changes.disconnect();
             shifts.disconnect();
             resize.disconnect();
             style?.remove();
+            mark([], '');
             for (const port of ports.values()) {
-                port.rowElement.style.removeProperty('--adecore-tree-control-space');
-                port.rowElement.style.removeProperty('--adecore-tree-decoration-space');
-                dropPort(port);
+                clearPort(port);
             }
         };
-    }, [frame, model, label, prefix]);
+    }, [frame, model, label, order, prefix]);
 
     return slots;
 }

package/src/index.ts

@@ -72,6 +72,7 @@ export { Skeleton, type SkeletonProps } from './Skeleton.tsx';
 export { Slider, type SliderProps } from './Slider.tsx';
 export { SlidingColumn, type SlidingColumnProps } from './SlidingColumn.tsx';
 export { Spinner, type SpinnerProps } from './Spinner.tsx';
+export { SplitButton, type SplitButtonProps } from './SplitButton.tsx';
 export { Stepper, type StepperProps } from './Stepper.tsx';
 export { Surface, type SurfaceProps } from './Surface.tsx';
 export { Switch, type SwitchProps } from './Switch.tsx';

package/src/locales/en.ts

@@ -49,6 +49,7 @@ export default {
     iconPicker: {
         label: 'Icon',
         none: 'No icon',
+        placeholder: 'None',
         search: 'Search icons',
         clear: 'Clear search',
         noMatch: 'No icon matches “{{query}}”'

package/src/locales/nl.ts

@@ -49,6 +49,7 @@ export default {
     iconPicker: {
         label: 'Icoon',
         none: 'Geen icoon',
+        placeholder: 'Geen',
         search: 'Iconen zoeken',
         clear: 'Zoekopdracht wissen',
         noMatch: 'Geen icoon past bij “{{query}}”'

package/src/select-shared.ts

@@ -23,7 +23,8 @@ export const TRIGGER_SIZE = {
 } as const;
 
 export const TRIGGER_VARIANT = {
-    outlined: 'max-w-56 rounded-lg border border-border bg-surface-raised text-text',
+    outlined:
+        'max-w-56 rounded-lg border border-field-border bg-field text-text hover:bg-surface-hover data-[popup-open]:bg-surface-hover data-disabled:hover:bg-field',
     ghost: 'rounded-md text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text data-disabled:hover:bg-transparent data-disabled:hover:text-text-muted'
 } as const;
 

package/src/settings/SettingsDialog.tsx

@@ -135,7 +135,7 @@ function SearchField({ search, query, onQuery, onPick }: SearchFieldProps) {
             <Icon icon={Search} size={14} className="pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-text-faint" />
             <Input
                 ref={input}
-                className="bg-surface-sunken pr-12 pl-8 text-xs"
+                className="pr-12 pl-8 text-xs"
                 placeholder={t('settings.search.placeholder')}
                 aria-label={t('settings.search.placeholder')}
                 value={query}