@adecore/ui 0.35.5 → 0.37.0

package/src/button-class.ts

@@ -0,0 +1,111 @@
+import clsx from 'clsx';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'danger-outline' | 'positive' | 'inverse';
+export type ButtonSize = 'xs' | 'sm' | 'md';
+export type ButtonShape = 'default' | 'pill';
+
+const BASE = 'inline-flex shrink-0 items-center justify-center gap-1.5 font-medium disabled:opacity-50';
+
+const VARIANT: Record<ButtonVariant, string> = {
+    // A filled button darkens under the pointer. Its color is the meaning, so no token of its own for hover.
+    primary: 'bg-accent text-accent-text hover:brightness-90 disabled:hover:brightness-100',
+    // Drawn like a field, so it stands a step off any ground, a dialog's raised one included.
+    secondary: 'border border-field-border bg-field text-text hover:bg-surface-hover disabled:hover:bg-field',
+    ghost: 'text-text-muted hover:bg-surface-hover hover:text-text',
+    danger: 'bg-status-error text-accent-text hover:brightness-90 disabled:hover:brightness-100',
+    // A step that forgets something rather than destroys it: softer than the filled button of a deletion that cannot come back.
+    'danger-outline': 'border border-status-error/35 text-status-error hover:bg-status-error/10 disabled:hover:bg-transparent',
+    positive: 'bg-positive text-positive-text hover:brightness-90 disabled:hover:brightness-100',
+    // Dark on a light theme, light on a dark one, matching what Apple's and GitHub's sign-in buttons ask for.
+    inverse: 'bg-text text-bg hover:opacity-90 disabled:hover:opacity-100'
+};
+
+/* 28 and 32 pixels are the compact and the normal control; 24 fits a header of 32. */
+const SIZE: Record<ButtonSize, string> = {
+    xs: 'h-6 px-2',
+    sm: 'h-7 px-2.5',
+    md: 'h-8 px-3'
+};
+
+/* A pill is one size of its own, for a control that sits in a round row, so it takes the place of `size`. */
+const SHAPE: Record<ButtonShape, string> = {
+    default: 'rounded-md text-xs',
+    pill: 'h-9 rounded-full px-3.5 text-sm'
+};
+
+export function buttonClass(variant: ButtonVariant, size: ButtonSize, shape: ButtonShape): string {
+    return clsx(BASE, SHAPE[shape], VARIANT[variant], shape === 'default' && SIZE[size]);
+}
+
+/*
+ * A split button is one shape: the frame draws the radius, the outline of an outlined variant and the
+ * height, and clips both halves, which carry the ground and its hover each on their own.
+ */
+const SPLIT_FRAME: Record<ButtonVariant, string> = {
+    primary: '',
+    secondary: 'border border-field-border',
+    ghost: '',
+    danger: '',
+    'danger-outline': 'border border-status-error/35',
+    positive: '',
+    inverse: ''
+};
+
+const SPLIT_HALF: Record<ButtonVariant, string> = {
+    primary: VARIANT.primary,
+    secondary: 'bg-field text-text hover:bg-surface-hover disabled:hover:bg-field',
+    ghost: VARIANT.ghost,
+    danger: VARIANT.danger,
+    'danger-outline': 'text-status-error hover:bg-status-error/10 disabled:hover:bg-transparent',
+    positive: VARIANT.positive,
+    inverse: VARIANT.inverse
+};
+
+/* The short line between the halves: a light alpha of the text over a filled ground, the border's alpha elsewhere. */
+const SPLIT_SEPARATOR: Record<ButtonVariant, string> = {
+    primary: 'before:bg-current/30',
+    secondary: 'before:bg-border-strong',
+    ghost: 'before:bg-border-strong',
+    danger: 'before:bg-current/30',
+    'danger-outline': 'before:bg-status-error/35',
+    positive: 'before:bg-current/30',
+    inverse: 'before:bg-current/30'
+};
+
+const SPLIT_HEIGHT: Record<ButtonSize, string> = {
+    xs: 'h-6',
+    sm: 'h-7',
+    md: 'h-8'
+};
+
+/* Half the height of the button, centered by auto margins, which land on whole pixels in the bordered frames too. */
+const SPLIT_SEPARATOR_HEIGHT: Record<ButtonSize, string> = {
+    xs: 'before:h-3',
+    sm: 'before:h-3.5',
+    md: 'before:h-4'
+};
+
+const SPLIT_PADDING: Record<'action' | 'menu', Record<ButtonSize, string>> = {
+    action: { xs: 'px-2', sm: 'px-2.5', md: 'px-3' },
+    // The chevron half is narrower than a half with a word in it.
+    menu: { xs: 'px-1', sm: 'px-1.5', md: 'px-2' }
+};
+
+export function splitFrameClass(variant: ButtonVariant, size: ButtonSize): string {
+    return clsx('inline-flex shrink-0 items-stretch overflow-clip rounded-md', SPLIT_HEIGHT[size], SPLIT_FRAME[variant]);
+}
+
+/* The frame clips the focus outline, so a half draws it inside its own edge. */
+export function splitHalfClass(variant: ButtonVariant, size: ButtonSize, half: 'action' | 'menu'): string {
+    return clsx(
+        'inline-flex items-center justify-center gap-1.5 text-xs font-medium focus-visible:-outline-offset-2 disabled:opacity-50',
+        SPLIT_HALF[variant],
+        SPLIT_PADDING[half][size],
+        half === 'menu' &&
+            clsx(
+                'relative before:absolute before:inset-y-0 before:left-0 before:my-auto before:w-px before:content-[""]',
+                SPLIT_SEPARATOR_HEIGHT[size],
+                SPLIT_SEPARATOR[variant]
+            )
+    );
+}

package/src/command-palette/context.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext, type RefObject } from 'react';
+
+interface PaletteRefs {
+    /* For the popup to put the focus in when it opens: a control before it would take it otherwise. */
+    input: RefObject<HTMLInputElement | null>;
+    /* For the root to scroll back to the top when the app sets the query. */
+    list: RefObject<HTMLDivElement | null>;
+    highlight(row: Element): void;
+    virtualScroll: RefObject<((index: number, reason: string) => void) | null>;
+}
+
+export const PaletteRefsContext = createContext<PaletteRefs | null>(null);
+
+export function useCommandPaletteVirtualScroll(): PaletteRefs['virtualScroll'] | null {
+    return useContext(PaletteRefsContext)?.virtualScroll ?? null;
+}

package/src/command-palette/index.parts.ts

@@ -14,3 +14,5 @@ export {
     CommandPalettePopup as Popup,
     CommandPaletteRoot as Root
 } from './parts.tsx';
+
+export { CommandPaletteVirtualList as VirtualList } from './virtual.tsx';

package/src/command-palette/parts.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode, type RefObject } from 'react';
+import { useContext, useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode } from 'react';
 import { flushSync } from 'react-dom';
 import clsx from 'clsx';
 import { Search } from 'lucide-react';
@@ -11,16 +11,7 @@ import { Icon } from '../Icon.tsx';
 import { Kbd } from '../Kbd.tsx';
 import { mergeRefs } from '../merge-refs.ts';
 import { KEY_SHORTCUTS } from '../shortcut.ts';
-
-interface PaletteRefs {
-    /* For the popup to put the focus in when it opens: a control before it would take it otherwise. */
-    input: RefObject<HTMLInputElement | null>;
-    /* For the root to scroll back to the top when the app sets the query. */
-    list: RefObject<HTMLDivElement | null>;
-    highlight(row: Element): void;
-}
-
-const PaletteRefsContext = createContext<PaletteRefs | null>(null);
+import { PaletteRefsContext } from './context.ts';
 
 const NO_ITEMS: readonly never[] = [];
 
@@ -58,11 +49,13 @@ export function CommandPaletteRoot<ItemValue>({
     value,
     onValueChange,
     items,
+    onItemHighlighted,
     children,
     ...props
 }: CommandPaletteRootProps<ItemValue>) {
     const inputRef = useRef<HTMLInputElement>(null);
     const listRef = useRef<HTMLDivElement>(null);
+    const virtualScroll = useRef<((index: number, reason: string) => void) | null>(null);
     const [focusHighlight, setFocusHighlight] = useState(false);
     /*
      * Base UI moves the highlight to the first row for a typed query only. For a query the app sets,
@@ -104,7 +97,7 @@ export function CommandPaletteRoot<ItemValue>({
 
     return (
         <DialogRoot open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} onOpenChangeComplete={onOpenChangeComplete}>
-            <PaletteRefsContext value={{ input: inputRef, list: listRef, highlight }}>
+            <PaletteRefsContext value={{ input: inputRef, list: listRef, highlight, virtualScroll }}>
                 {/* Its props take a flat list or groups; only its overloads split the two, which a generic caller cannot pick between. */}
                 <Autocomplete.Root<ItemValue>
                     {...props}
@@ -116,6 +109,12 @@ export function CommandPaletteRoot<ItemValue>({
                         onValueChange?.(next, details);
                     }}
                     items={(resetting ? NO_ITEMS : items) as readonly ItemValue[] | undefined}
+                    onItemHighlighted={(item, details) => {
+                        if (item !== undefined && virtualScroll.current !== null) {
+                            queueMicrotask(() => virtualScroll.current?.(details.index, details.reason));
+                        }
+                        onItemHighlighted?.(item, details);
+                    }}
                     inline
                     open
                     autoHighlight={autoHighlight}

package/src/command-palette/virtual.tsx

@@ -0,0 +1,147 @@
+import { Fragment, useLayoutEffect, useMemo, useRef, type ComponentProps, type ReactNode } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { CommandPaletteList } from './parts.tsx';
+import { useCommandPaletteVirtualScroll } from './context.ts';
+import { MENU_LABEL } from '../menu/parts.tsx';
+import { mergeRefs } from '../merge-refs.ts';
+
+export interface CommandPaletteVirtualItemProps {
+    index: number;
+    'aria-setsize': number;
+    'aria-posinset': number;
+}
+
+export type CommandPaletteVirtualListProps<ItemValue, Group extends { items: readonly ItemValue[] } = { items: readonly ItemValue[] }> = Omit<
+    ComponentProps<typeof CommandPaletteList>,
+    'children'
+> & {
+    children(item: ItemValue, props: CommandPaletteVirtualItemProps): ReactNode;
+    groupLabel?(group: Group): ReactNode;
+};
+
+interface VirtualPaletteRow<ItemValue> {
+    group: number;
+    index: number;
+    item?: ItemValue;
+}
+
+function virtualRowsOf<ItemValue, Group extends { items: readonly ItemValue[] }>(values: readonly (ItemValue | Group)[], labelled: boolean) {
+    const groups: (Group | null)[] = [];
+    const rows: VirtualPaletteRow<ItemValue>[] = [];
+    const itemRows: number[] = [];
+    let count = 0;
+    for (const value of values) {
+        const grouped = value !== null && typeof value === 'object' && 'items' in value && Array.isArray(value.items);
+        const group = grouped ? (value as Group) : null;
+        if (group !== null && group.items.length === 0) {
+            continue;
+        }
+        const groupIndex = groups.length;
+        groups.push(group);
+        if (group !== null && labelled) {
+            rows.push({ group: groupIndex, index: -1 });
+        }
+        for (const item of group === null ? [value as ItemValue] : group.items) {
+            itemRows.push(rows.length);
+            rows.push({ group: groupIndex, index: count++, item });
+        }
+    }
+    return { groups, rows, itemRows, count };
+}
+
+/* The root retains every value for keyboard navigation; only the visible rows need DOM elements. */
+export function CommandPaletteVirtualList<ItemValue, Group extends { items: readonly ItemValue[] } = { items: readonly ItemValue[] }>({
+    children,
+    groupLabel,
+    ref,
+    ...props
+}: CommandPaletteVirtualListProps<ItemValue, Group>) {
+    // The virtualizer keeps a mutable handle; every render reads its current window.
+    'use no memo';
+    const scroll = useCommandPaletteVirtualScroll();
+    const filtered = Autocomplete.useFilteredItems<ItemValue | Group>();
+    const scrollRef = useRef<HTMLDivElement | null>(null);
+    const labelled = groupLabel !== undefined;
+    const { groups, rows, itemRows, count } = useMemo(() => virtualRowsOf<ItemValue, Group>(filtered, labelled), [filtered, labelled]);
+    // oxlint-disable-next-line react/incompatible-library
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: (index) => (rows[index]!.index === -1 ? 28 : 32),
+        overscan: 8,
+        initialRect: { width: 576, height: 320 },
+        scrollPaddingStart: 6,
+        scrollPaddingEnd: 6
+    });
+    useLayoutEffect(() => {
+        if (scroll === null) {
+            return;
+        }
+        const highlight = (index: number, reason: string): void => {
+            const row = itemRows[index];
+            if (row !== undefined && reason !== 'pointer') {
+                virtualizer.scrollToIndex(row, { align: reason === 'none' ? 'start' : 'auto' });
+            }
+        };
+        scroll.current = highlight;
+        return () => {
+            if (scroll.current === highlight) {
+                scroll.current = null;
+            }
+        };
+    }, [scroll, virtualizer, itemRows]);
+    const visible = virtualizer.getVirtualItems();
+    const visibleGroups = new Map<number, typeof visible>();
+    for (const item of visible) {
+        const group = rows[item.index]!.group;
+        const current = visibleGroups.get(group);
+        if (current === undefined) {
+            visibleGroups.set(group, [item]);
+        } else {
+            current.push(item);
+        }
+    }
+    const renderRows = (items: typeof visible): ReactNode =>
+        items.map((item) => {
+            const row = rows[item.index]!;
+            const group = groups[row.group];
+            return (
+                <div
+                    key={item.key}
+                    role="presentation"
+                    data-index={item.index}
+                    ref={virtualizer.measureElement}
+                    className="absolute top-0 left-0 w-full"
+                    style={{ transform: `translateY(${item.start}px)` }}
+                >
+                    {row.index === -1 && group !== null && group !== undefined ? (
+                        <Autocomplete.GroupLabel className={MENU_LABEL}>{groupLabel?.(group)}</Autocomplete.GroupLabel>
+                    ) : (
+                        children(row.item as ItemValue, { index: row.index, 'aria-posinset': row.index + 1, 'aria-setsize': count })
+                    )}
+                </div>
+            );
+        });
+    return (
+        <CommandPaletteList {...props} ref={mergeRefs(ref, scrollRef)}>
+            <div role="presentation" className="relative" style={{ height: virtualizer.getTotalSize() }}>
+                {[...visibleGroups].map(([index, items]) => {
+                    const group = groups[index];
+                    if (group === null || group === undefined) {
+                        return <Fragment key={index}>{renderRows(items)}</Fragment>;
+                    }
+                    const labelVisible = items.some((item) => rows[item.index]!.index === -1);
+                    return (
+                        <Autocomplete.Group key={index} items={group.items}>
+                            {!labelVisible && groupLabel !== undefined && (
+                                <Autocomplete.GroupLabel className="sr-only">{groupLabel(group)}</Autocomplete.GroupLabel>
+                            )}
+                            {renderRows(items)}
+                        </Autocomplete.Group>
+                    );
+                })}
+            </div>
+        </CommandPaletteList>
+    );
+}

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

@@ -0,0 +1,105 @@
+import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+import { pathOfRow } from './helpers.ts';
+
+/*
+ * The engine draws only rows it holds, so the line under an open, empty directory is a child the
+ * wrapper adds and removes itself. U+FDD0 is a noncharacter, which no real file name carries.
+ */
+const EMPTY_LINE_NAME = '﷐empty';
+
+export type FileTreeEmptyLabel = (row: FileTreeVisibleRow) => string | undefined;
+
+export function emptyLineOf(directory: string): string {
+    return `${directory}${EMPTY_LINE_NAME}`;
+}
+
+export function isEmptyLine(path: string): boolean {
+    return path.endsWith(`/${EMPTY_LINE_NAME}`);
+}
+
+export function directoryOfEmptyLine(path: string): string {
+    return path.slice(0, -EMPTY_LINE_NAME.length);
+}
+
+/*
+ * The lines to add and the ones to take away: an open directory whose label is not undefined and
+ * that holds nothing besides its own line gets one, every other line the wrapper added goes.
+ */
+export function emptyLineChanges(
+    rows: readonly FileTreeVisibleRow[],
+    labelOf: FileTreeEmptyLabel,
+    has: (path: string) => boolean,
+    added: Iterable<string>
+): { add: string[]; remove: string[] } {
+    const wanted = new Set<string>();
+    rows.forEach((row, index) => {
+        if (row.kind !== 'directory' || !row.isExpanded) {
+            return;
+        }
+        const line = emptyLineOf(row.path);
+        for (let next = index + 1; next < rows.length && rows[next]!.depth > row.depth; next++) {
+            if (rows[next]!.path !== line) {
+                return;
+            }
+        }
+        if (labelOf(row) !== undefined) {
+            wanted.add(line);
+        }
+    });
+    return {
+        add: [...wanted].filter((line) => !has(line)),
+        remove: [...added].filter((line) => !wanted.has(line) && has(line))
+    };
+}
+
+/*
+ * Where an arrow, Home or End goes instead when the row it would land on is a line: past it, or
+ * nowhere (the focused path itself) where nothing lies past it. Null when no line is in the way.
+ */
+export function pastEmptyLine(model: FileTree, key: string): string | null {
+    const index = model.getFocusedIndex();
+    const focused = model.getFocusedPath();
+    if (index < 0 || focused === null) {
+        return null;
+    }
+    const count = model.getVisibleCount();
+    const at = (position: number): FileTreeVisibleRow | null =>
+        position >= 0 && position < count ? (model.getVisibleRows(position, position)[0] ?? null) : null;
+    const lineAt = (position: number): boolean => {
+        const row = at(position);
+        return row !== null && isEmptyLine(row.path);
+    };
+    const pathAt = (position: number): string => {
+        const row = at(position);
+        return row === null ? focused : pathOfRow(row);
+    };
+    if ((key === 'ArrowDown' || key === 'ArrowRight') && lineAt(index + 1)) {
+        return key === 'ArrowDown' ? pathAt(index + 2) : focused;
+    }
+    if (key === 'ArrowUp' && lineAt(index - 1)) {
+        return pathAt(index - 2);
+    }
+    if (key === 'End' && lineAt(count - 1)) {
+        return pathAt(count - 2);
+    }
+    return null;
+}
+
+/* Focus that still lands on a line, through a key with a modifier or the engine giving focus back to the line's element, goes on the way the last key went. */
+export function skipEmptyLine(model: FileTree, key: string): boolean {
+    const path = model.getFocusedPath();
+    if (path === null || !isEmptyLine(path)) {
+        return false;
+    }
+    if (key === 'ArrowUp' || key === 'PageUp') {
+        model.focusPreviousItem();
+        return true;
+    }
+    if (key === 'ArrowDown' || key === 'PageDown' || key === 'End') {
+        model.focusNextItem();
+    }
+    if (model.getFocusedPath() === path) {
+        model.focusPath(directoryOfEmptyLine(path));
+    }
+    return true;
+}

package/src/file-tree/highlight.ts

@@ -0,0 +1,80 @@
+/* The name a tree's shadow stylesheet colors with `::highlight()`. One registry entry is shared by every tree on the page. */
+export const MATCH_HIGHLIGHT = 'adecore-tree-match';
+
+// The copies of a name the engine keeps for truncation, which the tree's stylesheet hides.
+const HIDDEN_PARTS = '[data-truncate-content="overflow"], [data-truncate-marker-cell], [data-truncate-fill]';
+
+let shared: Highlight | null = null;
+
+/* Null where the browser has no CSS Custom Highlight API; the names are then drawn without a mark. */
+export function matchHighlight(): Highlight | null {
+    if (typeof CSS === 'undefined' || !('highlights' in CSS) || typeof Highlight === 'undefined') {
+        return null;
+    }
+    if (shared === null) {
+        shared = new Highlight();
+    }
+    if (CSS.highlights.get(MATCH_HIGHLIGHT) !== shared) {
+        CSS.highlights.set(MATCH_HIGHLIGHT, shared);
+    }
+    return shared;
+}
+
+/* Every place `query` occurs in `text`, ignoring case, as `[start, end)` pairs that do not overlap. */
+export function matchRanges(text: string, query: string): [number, number][] {
+    const wanted = query.toLowerCase();
+    const haystack = text.toLowerCase();
+    // A letter that lowercases to more than one would shift every offset after it.
+    if (wanted === '' || haystack.length !== text.length) {
+        return [];
+    }
+    const found: [number, number][] = [];
+    let at = haystack.indexOf(wanted);
+    while (at !== -1) {
+        found.push([at, at + wanted.length]);
+        at = haystack.indexOf(wanted, at + wanted.length);
+    }
+    return found;
+}
+
+/* The ranges over the visible text of each row's name where `query` occurs. */
+export function rangesOfMatches(rows: readonly HTMLElement[], query: string): Range[] {
+    const ranges: Range[] = [];
+    if (query === '') {
+        return ranges;
+    }
+    for (const row of rows) {
+        const content = row.querySelector('[data-item-section="content"]');
+        if (content === null) {
+            continue;
+        }
+        const nodes: Text[] = [];
+        const walker = row.ownerDocument.createTreeWalker(content, NodeFilter.SHOW_TEXT);
+        for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
+            if (node.parentElement?.closest(HIDDEN_PARTS) === null) {
+                nodes.push(node as Text);
+            }
+        }
+        const starts: number[] = [];
+        let text = '';
+        for (const node of nodes) {
+            starts.push(text.length);
+            text += node.data;
+        }
+        // The node an offset falls in, and the offset inside it; an end may sit at the end of a node.
+        const locate = (offset: number, end: boolean): [Text, number] => {
+            let index = nodes.length - 1;
+            while (index > 0 && (end ? starts[index]! >= offset : starts[index]! > offset)) {
+                index--;
+            }
+            return [nodes[index]!, offset - starts[index]!];
+        };
+        for (const [start, end] of matchRanges(text, query)) {
+            const range = row.ownerDocument.createRange();
+            range.setStart(...locate(start, false));
+            range.setEnd(...locate(end, true));
+            ranges.push(range);
+        }
+    }
+    return ranges;
+}

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); }
 `;