@adecore/editor-react 0.23.1 → 0.24.0

package/dist/rename.js

@@ -1,6 +1,7 @@
 import { StaleResultError } from '@adecore/lsp';
+import { KEY_PRIORITY } from './key-priority.js';
 import { lineTextOf } from './line-text.js';
-import { occurrencesOf, renamePreviewOf, renameTargetOf, wordRangeAt } from './rename-model.js';
+import { occurrencesOf, renameKindOf, renamePreviewOf, renameTargetOf, wordRangeAt } from './rename-model.js';
 import { isShortcut } from './shortcut-keys.js';
 import { resourceOperationsOf } from './workspace-edit.js';
 import { messageOf } from './error-message.js';
@@ -22,13 +23,13 @@ export class RenameFeature {
         this.language = language;
         const { editor } = language;
         const offs = [
-            editor.onKeyDown((event) => {
+            language.onKey((event) => {
                 if (!isShortcut(this.language.shortcuts.rename, event)) {
                     return false;
                 }
                 void this.start();
                 return true;
-            }),
+            }, KEY_PRIORITY.rename),
             editor.onTextChange(() => this.cancel())
         ];
         language.onDispose(() => {
@@ -192,8 +193,9 @@ export class RenameFeature {
                 start: { line: Math.max(0, line - CONTEXT_LINES), character: 0 },
                 end: { line: line + CONTEXT_LINES, character: Number.MAX_SAFE_INTEGER }
             });
-            const uses = await this.linesOf(locations ?? []);
-            const names = await suggestNames({ uri, languageId, name: session.original, context, uses }, session.names.signal);
+            const [uses, kind] = await Promise.all([this.linesOf(locations ?? []), this.kindOf(session, locations ?? [])]);
+            const request = { uri, languageId, name: session.original, ...(kind === undefined ? {} : { kind }), context, uses };
+            const names = await suggestNames(request, session.names.signal);
             if (this.session === session && names.length > 0) {
                 this.publish({ suggestions: names });
             }
@@ -202,6 +204,20 @@ export class RenameFeature {
             // Suggestions do not prevent a manual rename.
         }
     }
+    /* So a suggester knows a function from a variable; a rename on a use finds the kind through the declaration's place in this file. */
+    async kindOf(session, locations) {
+        const { project, uri } = this.language;
+        if (!project.service.supports('textDocument/documentSymbol', uri)) {
+            return undefined;
+        }
+        try {
+            const symbols = await project.service.documentSymbols(uri, { signal: session.names.signal, parallel: true });
+            return renameKindOf(symbols, session.original, [session.target.range, ...occurrencesOf(locations, uri).inFile]);
+        }
+        catch {
+            return undefined;
+        }
+    }
     /* The text of the first lines that name the symbol, in the order the servers listed them, reading at most a few other files. */
     async linesOf(locations) {
         const { project } = this.language;

package/dist/rendered-docs.js

@@ -1,4 +1,5 @@
 import { findDocComments } from '@adecore/editor';
+import { KEY_PRIORITY } from './key-priority.js';
 import { parseDocComment } from './doc-comment-model.js';
 import { isShortcut } from './shortcut-keys.js';
 import { realTimers } from './timers.js';
@@ -86,9 +87,9 @@ export class RenderedDocsFeature {
                     this.toggleAt(line);
                 }
             }),
-            editor.onKeyDown((event) => {
+            language.onKey((event) => {
                 return isShortcut(this.language.shortcuts.toggleRenderedDocs, event) && this.toggle();
-            }),
+            }, KEY_PRIORITY.renderedDocs),
             editor.onViewChange(() => {
                 this.sweep();
                 this.releaseRevealed();

package/dist/signature.js

@@ -1,3 +1,4 @@
+import { KEY_PRIORITY } from './key-priority.js';
 import { signatureViewOf } from './signature-model.js';
 import { isShortcut } from './shortcut-keys.js';
 import { realTimers } from './timers.js';
@@ -24,8 +25,8 @@ export class SignatureFeature {
             editor.onTextChange((change) => this.edited(change)),
             editor.onCaret(() => this.retrigger()),
             editor.onBlur(() => this.close()),
-            editor.onKeyDown((event) => {
-                if (event.key === 'Escape' && this.isOpen && this.language.popups.getState().callHierarchy == null) {
+            language.onKey((event) => {
+                if (event.key === 'Escape' && this.isOpen && this.language.popups.getState().callHierarchy === null) {
                     this.close();
                     return true;
                 }
@@ -37,7 +38,7 @@ export class SignatureFeature {
                     return this.cycle(event.key === 'ArrowDown' ? 1 : -1);
                 }
                 return false;
-            })
+            }, KEY_PRIORITY.signature)
         ];
         language.onDispose(() => {
             for (const off of offs) {

package/dist/snippet-session.d.ts

@@ -10,7 +10,7 @@ export interface SnippetInsertion {
     readonly stops: readonly SnippetStop[];
     readonly fields?: readonly SnippetField[];
 }
-type SnippetHost = Pick<EditorLanguage, 'editor' | 'onDispose'> & Partial<Pick<EditorLanguage, 'popups' | 'pick' | 'project'>>;
+type SnippetHost = Pick<EditorLanguage, 'editor' | 'onDispose'> & Partial<Pick<EditorLanguage, 'popups' | 'pick' | 'project' | 'onKey'>>;
 export declare class SnippetFeature {
     private readonly language;
     private frames;

package/dist/snippet-session.js

@@ -3,6 +3,7 @@ import { SnippetFieldTransforms } from './snippet-field-transforms.js';
 import { SnippetTransformError } from './snippet-transform-client.js';
 import { acquireSnippetTransforms } from './snippet-transform-queue.js';
 import { realTimers } from './timers.js';
+import { KEY_PRIORITY } from './key-priority.js';
 import { MAX_TRANSFORM_CHARACTERS } from './snippet-transform-protocol.js';
 import { comparePositions, rangeHolds, shiftPosition } from './diagnostics-model.js';
 export function positionInInsertion(start, text, offset) {
@@ -128,7 +129,12 @@ export class SnippetFeature {
         this.transforms = language.project === undefined ? null : acquireSnippetTransforms(language.project, timers);
         const { editor } = language;
         this.fieldTransforms = new SnippetFieldTransforms(editor, this.transforms, (targets, values) => this.applyFieldTransforms(targets, values));
-        const offs = [editor.onKeyDown((event) => this.key(event)), editor.onTextChange((change) => this.edited(change)), editor.onCaret(() => this.moved())];
+        const key = (event) => this.key(event);
+        const offs = [
+            language.onKey === undefined ? editor.onKeyDown(key) : language.onKey(key, KEY_PRIORITY.snippets),
+            editor.onTextChange((change) => this.edited(change)),
+            editor.onCaret(() => this.moved())
+        ];
         language.onDispose(() => {
             this.transforms?.dispose();
             this.end();
@@ -395,7 +401,7 @@ export class SnippetFeature {
         if (event.key === 'Escape') {
             const popups = this.language.popups?.getState();
             if (popups !== undefined &&
-                [popups.completion, popups.signature, popups.hover, popups.pick, popups.peek, popups.callHierarchy ?? null].some((popup) => popup !== null)) {
+                [popups.completion, popups.signature, popups.hover, popups.pick, popups.peek, popups.callHierarchy].some((popup) => popup !== null)) {
                 return false;
             }
             const active = this.isActive;

package/dist/symbol-picker.js

@@ -1,4 +1,5 @@
 import { StaleResultError } from '@adecore/lsp';
+import { KEY_PRIORITY } from './key-priority.js';
 import { basenameOf } from './paths.js';
 import { entriesOf, workspaceEntriesOf } from './symbol-picker-model.js';
 import { isShortcut } from './shortcut-keys.js';
@@ -13,13 +14,13 @@ export class SymbolPickerFeature {
     language;
     constructor(language) {
         this.language = language;
-        const off = language.editor.onKeyDown((event) => {
+        const off = language.onKey((event) => {
             if (!isShortcut(this.language.shortcuts.goToSymbol, event)) {
                 return false;
             }
             void this.open();
             return true;
-        });
+        }, KEY_PRIORITY.symbolPicker);
         language.onDispose(() => {
             off();
             this.close();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/editor-react",
-  "version": "0.23.1",
+  "version": "0.24.0",
   "type": "module",
   "description": "Language-enabled editors, feature coordination and React popups over injected language services.",
   "license": "FSL-1.1-MIT",
@@ -62,9 +62,9 @@
     "test": "bun test --conditions=source"
   },
   "dependencies": {
-    "@adecore/editor": "0.23.1",
-    "@adecore/lsp": "0.23.1",
-    "@adecore/merge": "0.23.1",
+    "@adecore/editor": "0.24.0",
+    "@adecore/lsp": "0.24.0",
+    "@adecore/merge": "0.24.0",
     "lucide-react": "^1.47.0",
     "react-markdown": "^10.1.0",
     "remark-breaks": "^4.0.0",
@@ -72,14 +72,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.23.1",
+    "@adecore/ui": "^0.24.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "workspace:*",
+    "@adecore/ui": "0.24.0",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/AnchoredPopup.tsx

@@ -7,6 +7,8 @@ export interface AnchoredPopupProps {
     /* The character the popup belongs to, in the page's pixels. */
     rect: EditorRect;
     className?: string;
+    /* What the card does with content past its room: `scroll` it, or `clip` it for content that scrolls on its own. `scroll` without one. */
+    overflow?: 'scroll' | 'clip';
     children: ReactNode;
     placement?: PlaceOptions;
     onPointerEnter?(): void;
@@ -17,7 +19,7 @@ export interface AnchoredPopupProps {
  * A card next to a character of the editor, portaled to the page: inside a scaled canvas node it would be
  * drawn at that scale and clipped by the node. Placed from the character's screen rectangle, so it holds at any zoom.
  */
-export function AnchoredPopup({ rect, className, children, placement, onPointerEnter, onPointerLeave }: AnchoredPopupProps) {
+export function AnchoredPopup({ rect, className, overflow = 'scroll', children, placement, onPointerEnter, onPointerLeave }: AnchoredPopupProps) {
     const element = useRef<HTMLDivElement>(null);
 
     // Every render, since the character moves when the editor scrolls and the card's own size follows its content.
@@ -38,7 +40,7 @@ export function AnchoredPopup({ rect, className, children, placement, onPointerE
     return createPortal(
         <div
             ref={element}
-            className={`fixed top-0 left-0 z-(--z-popup) overflow-y-auto rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow) ${className ?? ''}`}
+            className={`fixed top-0 left-0 z-(--z-popup) ${overflow === 'clip' ? 'overflow-hidden' : 'overflow-y-auto'} rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow) ${className ?? ''}`}
             style={{ visibility: 'hidden' }}
             onPointerEnter={onPointerEnter}
             onPointerLeave={onPointerLeave}

package/src/CodeAuthorsCard.tsx

@@ -2,20 +2,37 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GitCommitHorizontal, User, Users } from 'lucide-react';
 import { Button, Icon, Popover, Separator, Tooltip, useNow } from '@adecore/ui';
-import { formatNumber } from '@adecore/ui/format';
-import { relativeTime } from './relative-time.ts';
+import { formatAge, formatNumber } from '@adecore/ui/format';
 import type { EditorLanguage } from './editor-language.ts';
+import type { GitBlameCommit } from './host-types.ts';
 import type { AuthorsView } from './popups.ts';
 
 const MINUTE_MS = 60_000;
 
+/* The newest commit that touched the declaration. Its clock ticks here, so a minute redraws this block and not the card. */
+export function LatestCommit({ commit }: { commit: GitBlameCommit }) {
+    const { t } = useTranslation('editor');
+    const now = useNow(MINUTE_MS);
+
+    return (
+        <div className="flex flex-col gap-1">
+            <span className="text-text-muted">{t('language.codeVision.latest')}</span>
+            <span className="text-text select-text">{commit.summary}</span>
+            <span className="flex items-center gap-1.5 text-text-muted">
+                <span className="font-mono select-text">{commit.shortHash}</span>
+                <span className="min-w-0 truncate">{commit.author}</span>
+                <span className="shrink-0">{formatAge(commit.at * 1000, now)}</span>
+            </span>
+        </div>
+    );
+}
+
 /*
  * Who wrote a declaration, by lines, and the newest commit that touched it. It opens beside the entry that
  * was pressed and closes on Escape or a press anywhere else; Escape hands the keyboard back to the editor.
  */
 export function CodeAuthorsCard({ language, view }: { language: EditorLanguage; view: AuthorsView }) {
     const { t } = useTranslation('editor');
-    const now = Math.floor(useNow(MINUTE_MS) / 1000);
     const { authors, uncommittedLines, latest } = view.authorship;
     const anchor = useMemo(() => {
         const { left, top, right, bottom } = view.anchor;
@@ -52,15 +69,7 @@ export function CodeAuthorsCard({ language, view }: { language: EditorLanguage;
                 {latest !== null && (
                     <>
                         <Separator />
-                        <div className="flex flex-col gap-1">
-                            <span className="text-text-muted">{t('language.codeVision.latest')}</span>
-                            <span className="text-text select-text">{latest.summary}</span>
-                            <span className="flex items-center gap-1.5 text-text-muted">
-                                <span className="font-mono select-text">{latest.shortHash}</span>
-                                <span className="min-w-0 truncate">{latest.author}</span>
-                                <span className="shrink-0">{relativeTime(latest.at, now)}</span>
-                            </span>
-                        </div>
+                        <LatestCommit commit={latest} />
                         {view.openCommit !== null && (
                             <div className="flex justify-end">
                                 <Popover.Close

package/src/CompletionPopup.tsx

@@ -1,11 +1,13 @@
 import { useId, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
+import { formatShortcut } from '@adecore/ui';
 import type { EditorRect } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
 import { kindLetterOf, kindToneOf, rowWindow, type KindTone } from './completion-model.ts';
 import { SourceLine, SymbolSections } from './HoverSections.tsx';
 import { PathText } from './PathText.tsx';
+import { keepFocusOutOfList } from './popup-focus.ts';
 import { placeBeside, placePopup } from './popup-placement.ts';
 import type { CompletionView } from './popups.ts';
 
@@ -64,6 +66,8 @@ const ROW_CHROME = 72;
  */
 export function CompletionPopup({ language, view, rect }: { language: EditorLanguage; view: CompletionView; rect: EditorRect }) {
     const { t } = useTranslation('editor');
+    const toggle = language.shortcuts.triggerCompletion;
+    const detailsKey = toggle === null ? null : formatShortcut(toggle, toggle.apple);
     const listId = useId();
     const list = useRef<HTMLDivElement>(null);
     const docs = useRef<HTMLDivElement>(null);
@@ -131,6 +135,7 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
                 className={`${CARD} flex w-max max-w-[min(560px,calc(100vw-16px))] min-w-[340px] flex-col`}
                 style={{ visibility: 'hidden' }}
                 onPointerDown={(event) => event.preventDefault()}
+                {...keepFocusOutOfList(() => language.editor.focus())}
             >
                 {/* Sizes the list to the widest rows in the face the rows use; the rows themselves fill that width and truncate inside it. */}
                 <div
@@ -157,6 +162,7 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
                                 ref={index === view.active ? activeRow : undefined}
                                 type="button"
                                 role="option"
+                                tabIndex={-1}
                                 aria-selected={index === view.active}
                                 aria-setsize={total}
                                 aria-posinset={index + 1}
@@ -182,7 +188,11 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
                 <div className="flex items-center gap-3 border-t border-border px-2 py-1 text-xs whitespace-nowrap text-text-faint">
                     <span>↵ {t('language.completion.insert')}</span>
                     <span>⇥ {t('language.completion.replace')}</span>
-                    <span>^Space {t('language.completion.details')}</span>
+                    {detailsKey !== null && (
+                        <span>
+                            {detailsKey} {t('language.completion.details')}
+                        </span>
+                    )}
                     <span className="ml-auto">{view.server}</span>
                 </div>
             </div>

package/src/EditorView.tsx

@@ -2,47 +2,146 @@ import { createHolder } from './holder.ts';
 import { useLayoutEffect, useMemo, useRef, useSyncExternalStore, type ReactNode, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
-import type { Editor, EditorEngine, EditorMessages, EditorOptions } from '@adecore/editor';
-import { EditorLanguage } from './editor-language.ts';
+import {
+    DEFAULT_SMART_KEYS,
+    type Editor,
+    type EditorEngine,
+    type EditorIndentation,
+    type EditorMessages,
+    type EditorOptions,
+    type EditorSmartKeys
+} from '@adecore/editor';
+import { EditorLanguage, type EditorLanguageOptions } from './editor-language.ts';
 import { LanguagePopups } from './LanguagePopups.tsx';
 import type { ProjectLanguage } from './project-language.ts';
+import type { HoverView } from './popups.ts';
+import type { Timers } from './timers.ts';
 
 export interface EditorViewProps {
     engine: EditorEngine;
+    /* Read when the editor mounts; a later change of a setting the editor has a setter for reaches it in place. */
     options: EditorOptions;
     project?: ProjectLanguage;
     uri?: string;
     languageId?: string;
+    /* The clock of the language features, read when the editor mounts. */
+    timers?: Timers;
+    /* Read when the editor mounts. */
+    languageOptions?: EditorLanguageOptions;
     className?: string;
     ref?: Ref<HTMLDivElement>;
+    /* Read when the editor mounts, so an inline function does not mount it again. */
     onMount?(editor: Editor, language: EditorLanguage | null): void | (() => void);
     /* Rows of the app in the context menu, between the refactorings and the clipboard rows. */
     contextMenuItems?(language: EditorLanguage): ReactNode;
+    /* Sections of the app at the foot of the hover card, such as actions on its problems. */
+    hoverFooter?(view: HoverView, language: EditorLanguage): ReactNode;
 }
 
+interface MountInputs {
+    readonly options: EditorOptions;
+    readonly timers: Timers | undefined;
+    readonly languageOptions: EditorLanguageOptions | undefined;
+    readonly onMount: EditorViewProps['onMount'];
+}
+
+const DEFAULT_INDENTATION: EditorIndentation = { tabSize: 4, insertSpaces: true };
+
 /* The names of the fold controls in the editor's `{start}` and `{end}` placeholders, which the editor fills in per control. */
 function foldMessages(t: TFunction<'editor'>): Pick<EditorMessages, 'fold' | 'unfold'> {
     const lines = { start: '{start}', end: '{end}' };
     return { fold: t('language.fold.fold', lines), unfold: t('language.fold.unfold', lines) };
 }
 
-export function EditorView({ engine, options, project, uri, languageId, className, ref, onMount, contextMenuItems }: EditorViewProps) {
+function sameFields<T extends object>(left: T | undefined, right: T | undefined): boolean {
+    if (left === right) {
+        return true;
+    }
+    if (left === undefined || right === undefined) {
+        return false;
+    }
+    const keys = new Set([...Object.keys(left), ...Object.keys(right)] as (keyof T)[]);
+    return [...keys].every((key) => left[key] === right[key]);
+}
+
+/* Hands the editor the settings that changed by value, so a new options object with the same values costs nothing. */
+function applyChangedOptions(editor: Editor, before: EditorOptions, after: EditorOptions): void {
+    if (before.theme !== after.theme) {
+        editor.setTheme(after.theme);
+    }
+    if (before.readOnly !== after.readOnly || before.readOnlyReason !== after.readOnlyReason) {
+        editor.setReadOnly(after.readOnly ?? false, after.readOnlyReason);
+    }
+    if (before.wrap !== after.wrap) {
+        editor.setWrap(after.wrap ?? false);
+    }
+    if (!sameFields(before.indentation, after.indentation)) {
+        editor.setIndentation(after.indentation ?? DEFAULT_INDENTATION);
+    }
+    if (!sameFields<Partial<EditorSmartKeys>>(before.smartKeys, after.smartKeys)) {
+        // The setter keeps the keys left out, where the options mean the default.
+        editor.setSmartKeys({ ...DEFAULT_SMART_KEYS, ...after.smartKeys });
+    }
+    if (before.guides !== after.guides) {
+        editor.setGuides(after.guides ?? true);
+    }
+    if (before.stickyScroll !== after.stickyScroll) {
+        editor.setStickyScroll?.(after.stickyScroll ?? true);
+    }
+    if (before.whitespace !== after.whitespace) {
+        editor.setWhitespace(after.whitespace ?? false);
+    }
+    if (before.rightMargin !== after.rightMargin) {
+        editor.setRightMargin(after.rightMargin ?? null);
+    }
+    if (before.foldOutline !== after.foldOutline) {
+        editor.setFoldOutline(after.foldOutline ?? 'hover');
+    }
+    if (after.label !== undefined && before.label !== after.label) {
+        editor.setLabel(after.label);
+    }
+}
+
+export function EditorView({
+    engine,
+    options,
+    project,
+    uri,
+    languageId,
+    timers,
+    languageOptions,
+    className,
+    ref,
+    onMount,
+    contextMenuItems,
+    hoverFooter
+}: EditorViewProps) {
     const { t } = useTranslation('editor');
     const element = useRef<HTMLDivElement>(null);
     const mounted = useRef<Editor | null>(null);
     const words = useRef(t);
+    const latest = useRef<MountInputs>({ options, timers, languageOptions, onMount });
+    const applied = useRef(options);
     const holder = useMemo(() => createHolder<EditorLanguage>(), []);
     const language = useSyncExternalStore(holder.subscribe, holder.get, holder.get);
+    useLayoutEffect(() => {
+        latest.current = { options, timers, languageOptions, onMount };
+    });
     useLayoutEffect(() => {
         const host = element.current;
         if (host === null) {
             return;
         }
-        const editor = engine.mount(host, { ...options, messages: { ...foldMessages(words.current), ...options.messages } });
+        const inputs = latest.current;
+        const editor = engine.mount(host, { ...inputs.options, messages: { ...foldMessages(words.current), ...inputs.options.messages } });
         mounted.current = editor;
-        const attached = project === undefined || uri === undefined || languageId === undefined ? null : new EditorLanguage(project, editor, uri, languageId);
+        applied.current = inputs.options;
+        const attached =
+            project === undefined || uri === undefined || languageId === undefined
+                ? null
+                : new EditorLanguage(project, editor, uri, languageId, inputs.timers, inputs.languageOptions);
         holder.set(attached);
-        const stop = onMount?.(editor, attached);
+        const stop = inputs.onMount?.(editor, attached);
         return () => {
             mounted.current = null;
             holder.set(null);
@@ -50,17 +149,29 @@ export function EditorView({ engine, options, project, uri, languageId, classNam
             attached?.dispose();
             editor.dispose();
         };
-    }, [engine, options, project, uri, languageId, holder, onMount]);
+    }, [engine, project, uri, languageId, holder]);
+    useLayoutEffect(() => {
+        const editor = mounted.current;
+        if (editor === null || applied.current === options) {
+            return;
+        }
+        applyChangedOptions(editor, applied.current, options);
+        applied.current = options;
+    });
+    const { fold, unfold, noMoreOccurrences } = options.messages ?? {};
     useLayoutEffect(() => {
         words.current = t;
-        const { fold, unfold } = options.messages ?? {};
         const localized = foldMessages(t);
-        mounted.current?.setMessages({ fold: fold ?? localized.fold, unfold: unfold ?? localized.unfold });
-    }, [t, options.messages]);
+        mounted.current?.setMessages({
+            fold: fold ?? localized.fold,
+            unfold: unfold ?? localized.unfold,
+            ...(noMoreOccurrences === undefined ? {} : { noMoreOccurrences })
+        });
+    }, [t, fold, unfold, noMoreOccurrences]);
     return (
         <div className={className} ref={ref} style={{ position: 'relative', minHeight: 0 }}>
             <div ref={element} style={{ position: 'absolute', inset: 0 }} />
-            {language !== null && <LanguagePopups language={language} contextMenuItems={contextMenuItems} />}
+            {language !== null && <LanguagePopups language={language} contextMenuItems={contextMenuItems} hoverFooter={hoverFooter} />}
         </div>
     );
 }

package/src/HoverCard.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CircleX, Info, TriangleAlert } from 'lucide-react';
 import { fileUriToPath, type Location } from '@adecore/lsp';
@@ -88,13 +89,16 @@ export function HoverCard({
     problems,
     info,
     anchor,
-    position
+    position,
+    footer
 }: {
     language: EditorLanguage;
     problems: readonly Problem[];
     info: HoverInfo | null;
     anchor: EditorPosition;
     position: EditorPosition;
+    /* Sections of the app below the problems, each with a divider above it. */
+    footer?: ReactNode;
 }) {
     const { t } = useTranslation('editor');
     return (
@@ -137,6 +141,7 @@ export function HoverCard({
             {problems.map((problem, index) => (
                 <ProblemSection key={index} problem={problem} language={language} />
             ))}
+            {footer}
         </div>
     );
 }

package/src/LanguagePopups.tsx

@@ -13,13 +13,24 @@ import { RenameCard } from './RenameCard.tsx';
 import { RenderedDocs } from './RenderedDocs.tsx';
 import { SymbolPicker } from './SymbolPicker.tsx';
 import { SignatureCard } from './SignatureCard.tsx';
+import type { HoverView } from './popups.ts';
+
+export interface LanguagePopupsProps<Language extends EditorLanguage = EditorLanguage> {
+    language: Language;
+    /* Rows of the app in the context menu, between the refactorings and the clipboard rows. */
+    contextMenuItems?(language: Language): ReactNode;
+    /* Sections of the app at the foot of the hover card, such as actions on its problems; each element gets a divider above it. */
+    hoverFooter?(view: HoverView, language: Language): ReactNode;
+    /* A layer of the app over the editor, drawn above the cards and below the rename field. */
+    children?: ReactNode;
+}
 
 /*
  * Every card a language feature opens over the editor. Each feature keeps its own state and these
  * only draw it, placed by the screen position of the character it belongs to, which is read again
- * whenever the editor scrolls or resizes. `contextMenuItems` adds rows of the app to the context menu.
+ * whenever the editor scrolls or resizes.
  */
-export function LanguagePopups({ language, contextMenuItems }: { language: EditorLanguage; contextMenuItems?: (language: EditorLanguage) => ReactNode }) {
+export function LanguagePopups<Language extends EditorLanguage>({ language, contextMenuItems, hoverFooter, children }: LanguagePopupsProps<Language>) {
     const [, redraw] = useReducer((count: number) => count + 1, 0);
     const hover = useStore(language.popups, (state) => state.hover);
     const completion = useStore(language.popups, (state) => state.completion);
@@ -27,7 +38,7 @@ export function LanguagePopups({ language, contextMenuItems }: { language: Edito
     const pick = useStore(language.popups, (state) => state.pick);
     const rename = useStore(language.popups, (state) => state.rename);
     const peek = useStore(language.popups, (state) => state.peek);
-    const callHierarchy = useStore(language.popups, (state) => state.callHierarchy ?? null);
+    const callHierarchy = useStore(language.popups, (state) => state.callHierarchy);
     const symbols = useStore(language.popups, (state) => state.symbols);
     const menu = useStore(language.popups, (state) => state.menu);
     const authors = useStore(language.popups, (state) => state.authors);
@@ -45,7 +56,14 @@ export function LanguagePopups({ language, contextMenuItems }: { language: Edito
             <RenderedDocs language={language} />
             {hover !== null && hoverRect !== null && (
                 <AnchoredPopup rect={hoverRect} onPointerEnter={() => language.hover.holdCard(true)} onPointerLeave={() => language.hover.holdCard(false)}>
-                    <HoverCard language={language} problems={hover.problems} info={hover.info} anchor={hover.anchor} position={hover.position} />
+                    <HoverCard
+                        language={language}
+                        problems={hover.problems}
+                        info={hover.info}
+                        anchor={hover.anchor}
+                        position={hover.position}
+                        footer={hoverFooter?.(hover, language)}
+                    />
                 </AnchoredPopup>
             )}
             {signature !== null && signatureRect !== null && (
@@ -64,6 +82,7 @@ export function LanguagePopups({ language, contextMenuItems }: { language: Edito
             {peek !== null && <PeekPanel language={language} view={peek} />}
             {callHierarchy !== null && <CallHierarchyPanel language={language} view={callHierarchy} />}
             {authors !== null && <CodeAuthorsCard language={language} view={authors} />}
+            {children}
             {rename !== null && renameRect !== null && <RenameCard language={language} view={rename} rect={renameRect} endRect={renameEnd} />}
         </>
     );

package/src/PickPopup.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import type { EditorRect } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
 import { PathText } from './PathText.tsx';
+import { keepFocusOutOfList } from './popup-focus.ts';
 import { placePopup } from './popup-placement.ts';
 import type { PickPreview, PickView } from './popups.ts';
 
@@ -80,7 +81,13 @@ export function PickPopup({ language, view, rect }: { language: EditorLanguage;
     }, [language, listId, activeId]);
 
     return createPortal(
-        <div ref={card} className={CARD} style={{ visibility: 'hidden' }} onPointerDown={(event) => event.preventDefault()}>
+        <div
+            ref={card}
+            className={CARD}
+            style={{ visibility: 'hidden' }}
+            onPointerDown={(event) => event.preventDefault()}
+            {...keepFocusOutOfList(() => language.editor.focus())}
+        >
             {view.title !== null && <div className="border-b border-border px-3 py-1.5 text-xs text-text-muted">{view.title}</div>}
             <div id={listId} role="listbox" className="min-h-0 flex-1 overflow-y-auto p-1">
                 {view.groups.map((group, groupIndex) => (
@@ -93,6 +100,7 @@ export function PickPopup({ language, view, rect }: { language: EditorLanguage;
                                 ref={row.id === view.active ? activeRow : undefined}
                                 type="button"
                                 role="option"
+                                tabIndex={-1}
                                 aria-selected={row.id === view.active}
                                 data-active={row.id === view.active}
                                 className="flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row"