@adecore/ui 0.35.5 → 0.36.0

package/src/Input.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import type { LucideIcon } from 'lucide-react';
 import clsx from 'clsx';
 import { fieldControlProps, useFieldControl } from './field-context.ts';
@@ -11,34 +11,40 @@ export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
     mono?: boolean;
     /* Drawn in front of the text, such as a magnifier on a search field. `className` then goes to the box around the icon and the input; `ref` stays on the input. */
     icon?: LucideIcon;
+    /* Drawn after the text inside the field, such as a count of matches and an `IconButton` that clears it. `className` then goes to the box, as with `icon`. */
+    end?: ReactNode;
 }
 
 /* The one text input: one border and one focus ring at the one height or the compact one. */
-export function Input({ size = 'md', mono = false, icon, className, id, ...props }: InputProps) {
+export function Input({ size = 'md', mono = false, icon, end, className, id, ...props }: InputProps) {
     const field = useFieldControl();
     const small = size === 'sm';
     const control = { ...fieldControlProps(field, id), ...props };
 
-    if (icon === undefined) {
+    if (icon === undefined && end === undefined) {
         return <input {...control} className={clsx('field', small && 'field-sm', mono && 'font-mono text-code', className)} />;
     }
 
     // The input fills the whole box and the icon lets clicks through, so a click on the icon still lands in the input.
     return (
         <span className={clsx('field relative flex p-0', small && 'field-sm', className)}>
-            <Icon
-                icon={icon}
-                size={small ? 12 : 14}
-                className={clsx('pointer-events-none absolute top-1/2 -translate-y-1/2 text-text-faint', small ? 'left-2' : 'left-2.5')}
-            />
+            {icon !== undefined && (
+                <Icon
+                    icon={icon}
+                    size={small ? 12 : 14}
+                    className={clsx('pointer-events-none absolute top-1/2 -translate-y-1/2 text-text-faint', small ? 'left-2' : 'left-2.5')}
+                />
+            )}
             <input
                 {...control}
                 className={clsx(
                     'min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint',
-                    small ? 'pr-2 pl-7' : 'pr-2.5 pl-8',
+                    icon === undefined ? (small ? 'pl-2' : 'pl-2.5') : small ? 'pl-7' : 'pl-8',
+                    end === undefined ? (small ? 'pr-2' : 'pr-2.5') : 'pr-1',
                     mono && 'font-mono text-code'
                 )}
             />
+            {end !== undefined && <span className={clsx('flex shrink-0 items-center gap-1', small ? 'pr-0.5' : 'pr-1')}>{end}</span>}
         </span>
     );
 }
@@ -50,10 +56,12 @@ export interface TextAreaProps extends ComponentProps<'textarea'> {
     resize?: 'none' | 'vertical';
     /* A command or anything else read back letter by letter. */
     mono?: boolean;
+    /* `bare` drops the border, the ground and the focus outline, for a field inside a card that draws all three around it. */
+    variant?: 'field' | 'bare';
 }
 
 /* A field of a few lines: a commit message, the body of a pull request, a note. At least 64px tall; `rows` makes it taller. */
-export function TextArea({ size = 'md', resize = 'none', mono = false, className, id, ...props }: TextAreaProps) {
+export function TextArea({ size = 'md', resize = 'none', mono = false, variant = 'field', className, id, ...props }: TextAreaProps) {
     const field = useFieldControl();
     return (
         <textarea
@@ -62,6 +70,7 @@ export function TextArea({ size = 'md', resize = 'none', mono = false, className
             className={clsx(
                 'field h-auto min-h-16 py-1.5',
                 size === 'sm' && 'field-sm',
+                variant === 'bare' && 'field-bare',
                 resize === 'vertical' ? 'resize-y' : 'resize-none',
                 mono && 'font-mono text-code',
                 className

package/src/Segmented.tsx

@@ -69,7 +69,7 @@ export function Segmented<T extends string>({
         <div
             ref={ref}
             className={clsx(
-                'flex bg-surface-sunken p-0.5 text-xs font-medium',
+                'flex bg-surface-sunken p-0.5 text-xs font-medium dark:bg-surface-idle',
                 sizing.track,
                 vertical ? 'w-full flex-col items-stretch gap-0.5' : clsx(sizing.row, 'w-fit items-center'),
                 className

package/src/SplitButton.tsx

@@ -0,0 +1,72 @@
+import { useState, type ComponentProps, type ReactNode } from 'react';
+import clsx from 'clsx';
+import { ChevronDown } from 'lucide-react';
+import { splitFrameClass, splitHalfClass, type ButtonSize, type ButtonVariant } from './button-class.ts';
+import { Icon } from './Icon.tsx';
+import { MenuPopup, MenuRoot, MenuTrigger, type MenuPopupProps } from './menu/parts.tsx';
+import { mergeRefs } from './merge-refs.ts';
+import { Tooltip } from './Tooltip.tsx';
+
+export interface SplitButtonProps extends Omit<ComponentProps<'button'>, 'ref'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /* The hint on the action half. */
+    tooltip?: ReactNode;
+    /* The rows of the menu the chevron opens: `Menu.Item`, `Menu.Separator` and the rest of a menu's parts. */
+    menu: ReactNode;
+    /* The accessible name of the chevron, and its hint unless `menuTooltip` says something else. */
+    menuLabel: string;
+    menuTooltip?: ReactNode;
+    menuDisabled?: boolean;
+    /* Where the menu lines up under the whole control. */
+    menuAlign?: MenuPopupProps['align'];
+    /* A width or a layout of the menu's own, such as `w-72`. */
+    menuClassName?: string;
+    /* On the box around both halves; every other prop goes to the action half. */
+    className?: string;
+    ref?: ComponentProps<'span'>['ref'];
+}
+
+/*
+ * A primary action and a chevron that opens a menu of related ones, drawn as one button with a short
+ * line between the halves. Each half is a button of its own, so each takes the focus, can be disabled
+ * and carries its own hint; the menu hangs under the whole control.
+ */
+export function SplitButton({
+    variant = 'secondary',
+    size = 'md',
+    tooltip,
+    menu,
+    menuLabel,
+    menuTooltip,
+    menuDisabled = false,
+    menuAlign = 'end',
+    menuClassName,
+    className,
+    ref,
+    type = 'button',
+    ...props
+}: SplitButtonProps) {
+    const [box, setBox] = useState<HTMLSpanElement | null>(null);
+    const action = <button type={type} className={splitHalfClass(variant, size, 'action')} {...props} />;
+
+    return (
+        <span ref={mergeRefs<HTMLSpanElement>(ref, setBox)} className={clsx(splitFrameClass(variant, size), className)}>
+            {tooltip === undefined ? action : <Tooltip label={tooltip}>{action}</Tooltip>}
+            <MenuRoot>
+                <Tooltip label={menuTooltip ?? menuLabel}>
+                    <MenuTrigger
+                        render={<button type="button" className={splitHalfClass(variant, size, 'menu')} />}
+                        aria-label={menuLabel}
+                        disabled={menuDisabled}
+                    >
+                        <Icon icon={ChevronDown} size={14} />
+                    </MenuTrigger>
+                </Tooltip>
+                <MenuPopup anchor={box} align={menuAlign} className={menuClassName}>
+                    {menu}
+                </MenuPopup>
+            </MenuRoot>
+        </span>
+    );
+}

package/src/Stepper.tsx

@@ -36,7 +36,12 @@ export function Stepper({ value, onValueChange, min, max, step, decimals = place
         onValueChange(Math.min(max, Math.max(min, next)));
     };
     return (
-        <ButtonGroup ref={ref} className={clsx('shrink-0 rounded-lg bg-surface-sunken p-0.5', className)} role="group" aria-label={label}>
+        <ButtonGroup
+            ref={ref}
+            className={clsx('shrink-0 rounded-lg border border-field-border bg-field bg-clip-padding p-px', className)}
+            role="group"
+            aria-label={label}
+        >
             <IconButton
                 icon={Minus}
                 size="sm"

package/src/Switch.tsx

@@ -23,7 +23,7 @@ export function Switch({ checked, onCheckedChange, label, disabled, className, r
             disabled={disabled}
             // Base UI renders the root as a `span`, which ignores its size outside a flex row unless it lays out as a box.
             className={clsx(
-                'relative inline-flex h-5 w-9 shrink-0 rounded-full bg-border-strong p-0.5 transition-colors data-checked:bg-accent data-disabled:opacity-50',
+                'relative inline-flex h-5 w-9 shrink-0 rounded-full bg-border-strong p-0.5 transition-colors data-checked:bg-accent dark:not-data-checked:bg-field dark:not-data-checked:inset-ring dark:not-data-checked:inset-ring-field-border data-disabled:opacity-50',
                 className
             )}
         >

package/src/Tile.tsx

@@ -24,7 +24,7 @@ export function Tile({ icon, title, description, shortcut, primary = false, size
         <button
             type={type}
             className={clsx(
-                'flex min-w-0 items-center border bg-surface text-left hover:bg-surface-hover disabled:opacity-50 disabled:hover:bg-surface',
+                'flex min-w-0 items-center border bg-surface text-left hover:bg-surface-hover-edged disabled:opacity-50 disabled:hover:bg-surface',
                 size === 'md' ? 'gap-3 rounded-xl p-3' : 'gap-2 rounded-lg px-2 py-1.5',
                 primary ? 'border-accent' : 'border-border',
                 className
@@ -34,7 +34,7 @@ export function Tile({ icon, title, description, shortcut, primary = false, size
             <span
                 className={clsx(
                     'grid size-8 shrink-0 place-items-center rounded-lg',
-                    primary ? 'bg-accent text-accent-text' : 'bg-surface-sunken text-text-muted'
+                    primary ? 'bg-accent text-accent-text' : 'bg-surface-sunken text-text-muted dark:bg-field dark:inset-ring dark:inset-ring-field-border'
                 )}
             >
                 {icon}

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