@adecore/ui 0.35.4 → 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/command-palette/parts.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode, type RefObject } from 'react';
+import { flushSync } from 'react-dom';
 import clsx from 'clsx';
 import { Search } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -16,6 +17,7 @@ interface PaletteRefs {
     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);
@@ -52,6 +54,7 @@ export function CommandPaletteRoot<ItemValue>({
     onOpenChangeComplete,
     autoHighlight = 'always',
     keepHighlight = true,
+    highlightItemOnHover = true,
     value,
     onValueChange,
     items,
@@ -60,6 +63,7 @@ export function CommandPaletteRoot<ItemValue>({
 }: CommandPaletteRootProps<ItemValue>) {
     const inputRef = useRef<HTMLInputElement>(null);
     const listRef = useRef<HTMLDivElement>(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,
      * the list is empty for one commit that is never painted: Base UI drops the highlight then and
@@ -80,9 +84,27 @@ export function CommandPaletteRoot<ItemValue>({
         setSettledValue(value);
     }, [resetting, value]);
 
+    const highlight = (row: Element): void => {
+        if (row.hasAttribute('data-highlighted')) {
+            return;
+        }
+        // Base UI has no imperative highlight action and disables highlighting on item focus.
+        // Enable pointer navigation just for this event when the app has disabled hover highlighting.
+        if (!highlightItemOnHover) {
+            flushSync(() => setFocusHighlight(true));
+        }
+        try {
+            row.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, movementX: 1 }));
+        } finally {
+            if (!highlightItemOnHover) {
+                flushSync(() => setFocusHighlight(false));
+            }
+        }
+    };
+
     return (
         <DialogRoot open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} onOpenChangeComplete={onOpenChangeComplete}>
-            <PaletteRefsContext value={{ input: inputRef, list: listRef }}>
+            <PaletteRefsContext value={{ input: inputRef, list: listRef, highlight }}>
                 {/* 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}
@@ -98,6 +120,7 @@ export function CommandPaletteRoot<ItemValue>({
                     open
                     autoHighlight={autoHighlight}
                     keepHighlight={keepHighlight}
+                    highlightItemOnHover={highlightItemOnHover || focusHighlight}
                 >
                     {children}
                 </Autocomplete.Root>
@@ -159,7 +182,7 @@ export function CommandPaletteInput({ leading, trailing, escapeHint = true, mono
 }
 
 /* The rows. It scrolls on its own, so the field and the footer stay put. */
-export function CommandPaletteList({ className, ref, ...props }: ComponentProps<typeof Autocomplete.List>) {
+export function CommandPaletteList({ className, ref, onFocus, ...props }: ComponentProps<typeof Autocomplete.List>) {
     const { t } = useTranslation('ui');
     const refs = useContext(PaletteRefsContext);
     return (
@@ -168,6 +191,15 @@ export function CommandPaletteList({ className, ref, ...props }: ComponentProps<
             aria-label={t('palette.results')}
             className={withClass('max-h-[50vh] min-h-0 overflow-y-auto overscroll-contain scroll-py-1.5 not-empty:p-1.5', className)}
             {...props}
+            onFocus={(event) => {
+                onFocus?.(event);
+                const row = event.target.closest('[role="option"]');
+                if (row === null || !event.currentTarget.contains(row) || refs?.input.current == null) {
+                    return;
+                }
+                refs.highlight(row);
+                refs.input.current.focus({ preventScroll: true });
+            }}
         />
     );
 }

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;
+}