@adecore/ui 0.35.5 → 0.37.0

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/format/index.ts

@@ -17,7 +17,7 @@ export {
     isSameDay
 } from './datetime.ts';
 export { formatAgo, formatClockDuration, formatCountdown, formatDuration, formatElapsedShort, formatPreciseDuration } from './duration.ts';
-export { formatLocale, labelCollator, setFormatSource, systemLocale, useFormatLocale, type FormatSource } from './locale.ts';
+export { formatLocale, labelCollator, nameCollator, setFormatSource, systemLocale, useFormatLocale, type FormatSource } from './locale.ts';
 export {
     formatBytes,
     formatDecimal,

package/src/format/locale.ts

@@ -95,16 +95,17 @@ const subscribe = (onChange: () => void): (() => void) => source.subscribe(onCha
 export const useFormatLocale = (): string => useSyncExternalStore(subscribe, formatLocale, formatLocale);
 
 interface Cached<T> {
-    locale: string;
+    locale: string | undefined;
     formatter: T;
 }
 
-/*
- * A formatter per options object, keyed on the object itself, so a module-level spec builds its
- * formatter once and a list of a thousand rows constructs nothing. A region change throws the entry
- * away, since the locale is part of what was cached.
- */
-const cacheFor = <O extends object, T>(store: WeakMap<O, Cached<T>>, options: O, locale: string, build: (locale: string, options: O) => T): T => {
+/* A module-level options object shares its formatter across rows; a changed locale replaces it. */
+const cacheFor = <O extends object, T>(
+    store: WeakMap<O, Cached<T>>,
+    options: O,
+    locale: string | undefined,
+    build: (locale: string | undefined, options: O) => T
+): T => {
     const hit = store.get(options);
     if (hit !== undefined && hit.locale === locale) {
         return hit.formatter;
@@ -118,6 +119,7 @@ const numbers = new WeakMap<Intl.NumberFormatOptions, Cached<Intl.NumberFormat>>
 const dates = new WeakMap<Intl.DateTimeFormatOptions, Cached<Intl.DateTimeFormat>>();
 const words = new WeakMap<Intl.DateTimeFormatOptions, Cached<Intl.DateTimeFormat>>();
 const relatives = new WeakMap<Intl.RelativeTimeFormatOptions, Cached<Intl.RelativeTimeFormat>>();
+const names = new WeakMap<Intl.CollatorOptions, Cached<Intl.Collator>>();
 
 export const numberFormatter = (options: Intl.NumberFormatOptions): Intl.NumberFormat =>
     cacheFor(numbers, options, formatLocale(), (locale, spec) => new Intl.NumberFormat(locale, spec));
@@ -134,6 +136,10 @@ export const wordFormatter = (options: Intl.DateTimeFormatOptions): Intl.DateTim
 export const relativeFormatter = (options: Intl.RelativeTimeFormatOptions): Intl.RelativeTimeFormat =>
     cacheFor(relatives, options, wordLocale(), (locale, spec) => new Intl.RelativeTimeFormat(locale, spec));
 
+/* Proper names keep the runtime locale; a shared options object reuses its collator. */
+export const nameCollator = (options: Intl.CollatorOptions): Intl.Collator =>
+    cacheFor(names, options, undefined, (locale, spec) => new Intl.Collator(locale, spec));
+
 const collators = new Map<string, Intl.Collator>();
 
 /*

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';
@@ -151,3 +152,5 @@ export {
     type SplitCommand
 } from './workspace/model.ts';
 export { tabGapAt, type SplitRect, type SplitEdges, type SplitMinimum } from './workspace/geometry.ts';
+
+export type { CommandPaletteVirtualListProps, CommandPaletteVirtualItemProps } from './command-palette/virtual.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}

package/src/theme.css

@@ -17,9 +17,16 @@
        than the pressed step, so hover reads as a lift and pressed as the heavier state. A white
        popup cannot go lighter, so in this theme the step is the softest gray there is. */
     --surface-hover: #f3f3f5;
+    /* The hover of something that draws its own border: a smaller step, so the ground never passes
+       its edge and the outline stays visible under the pointer. */
+    --surface-hover-edged: color-mix(in srgb, var(--surface-raised) 60%, var(--surface-hover));
     /* The pressed step of a toggle. It cannot be `--surface-raised`, which equals `--surface` in the
        light theme, and it has to sit a shade past `--surface-hover` so pressed outranks hover. */
     --surface-active: #dcdce2;
+    /* What a person types or picks in: a step lighter than the ground it stands on in the dark theme, the raised white here. */
+    --field: var(--surface-raised);
+    /* An edge of its own, since an app may set `--border` to a solid separator that vanishes against a field. */
+    --field-border: rgb(0 0 0 / 0.11);
     /* Borders carry an alpha rather than a gray of their own, so a line takes the color of whatever
        it is drawn over instead of fighting it. A gray hairline over a tinted surface reads as a
        smudge; the same line in black at a low alpha stays a line. Everything with a surface of its
@@ -41,6 +48,9 @@
     --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
     --accent-text: #ffffff;
     --selection: rgb(var(--accent-rgb) / 0.55);
+    /* The part of a name that answers a filter or a search. A tint of its own rather than the
+       selection's, so a selected row that matches still shows both. */
+    --match: color-mix(in srgb, var(--status-needs-you) 30%, transparent);
     --float-shadow:
         0 1px 2px -1px rgb(0 0 0 / 0.08),
         0 3px 6px -2px rgb(0 0 0 / 0.07),
@@ -106,9 +116,12 @@
     --bg: #0d0d10;
     --surface: #131316;
     --surface-raised: #18181c;
-    --surface-sunken: #08080a;
+    --surface-sunken: #0b0b0e;
     --surface-hover: #202024;
     --surface-active: #28282e;
+    /* Derived, so an app that tints its surfaces tints its fields along. */
+    --field: color-mix(in srgb, var(--surface) 40%, var(--surface-hover));
+    --field-border: rgb(255 255 255 / 0.1);
     /* White at a low alpha, which is what gives a dark surface its lifted edge. */
     --border: rgb(255 255 255 / 0.07);
     --separator: oklch(0.236 0.006 285.956);
@@ -118,6 +131,7 @@
     --text-muted: #9a9aa6;
     --text-faint: #5f5f6b;
     --selection: rgb(var(--accent-rgb) / 0.6);
+    --match: color-mix(in srgb, var(--status-needs-you) 28%, transparent);
     --float-shadow:
         0 1px 2px -1px rgb(0 0 0 / 0.3),
         0 2px 4px rgb(0 0 0 / 0.24),
@@ -233,7 +247,10 @@
     --color-surface-sunken: var(--surface-sunken);
     --color-surface-idle: var(--surface-idle);
     --color-surface-hover: var(--surface-hover);
+    --color-surface-hover-edged: var(--surface-hover-edged);
     --color-surface-active: var(--surface-active);
+    --color-field: var(--field);
+    --color-field-border: var(--field-border);
     --color-border: var(--border);
     --color-separator: var(--separator);
     --color-border-strong: var(--border-strong);
@@ -261,6 +278,10 @@
 }
 
 @layer base {
+    /* Whatever a click acts on shows the hand; a disabled one shows that nothing will. Menu rows keep the arrow (`.menu-item`). */
+    :where(button, a[href], summary, label[for], [role="button"], [role="checkbox"], [role="switch"], [role="radio"], [role="tab"], [role="option"]):not(:disabled, [aria-disabled="true"], [data-disabled]) {
+        cursor: pointer;
+    }
     /*
      * A border with an alpha has to mix with what is behind the element, not with the element's own
      * background: by default a background runs on under the border and a node's white surface would
@@ -326,8 +347,8 @@
         width: 100%;
         padding: 0 10px;
         border-radius: 8px;
-        border: 1px solid var(--border);
-        background: var(--surface);
+        border: 1px solid var(--field-border);
+        background-color: var(--field);
         color: var(--text);
         font-size: var(--text-sm);
         outline: none;
@@ -345,6 +366,10 @@
         border-radius: 6px;
         font-size: var(--text-xs);
     }
+    /* A field inside a card that draws the edge and the focus for it. The border stays as a transparent
+       line, so the text sits where it would in a field of its own. */
+    .field-bare { border-color: transparent; background: transparent; }
+    .field-bare:focus-visible { outline: none; }
     /* Keyboard focus is visible on every control; pointer focus stays quiet. `.focus-ring` is the
        same outline for something that takes focus without being a button, such as a row in a list. */
     .icon-btn:focus-visible, .menu-item:focus-visible, button:focus-visible, .focus-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@@ -683,6 +708,11 @@
     .adecore-tree-decoration {
         font-variant-numeric: tabular-nums;
     }
+    /* A row's own icon in place of the tree's glyph, in the glyph's color. */
+    .adecore-tree-icon {
+        display: inline-flex;
+        color: var(--text-muted);
+    }
     /* A tree whose rows slide sideways: every part of a row keeps its width and moves with the shift. */
     .adecore-tree[data-overflow="scroll"] .adecore-tree-row {
         overflow: clip;