@adecore/editor-react 0.23.1 → 0.24.0

package/dist/AnchoredPopup.d.ts

@@ -4,9 +4,10 @@ import { type PlaceOptions } from './popup-placement.ts';
 export interface AnchoredPopupProps {
     rect: EditorRect;
     className?: string;
+    overflow?: 'scroll' | 'clip';
     children: ReactNode;
     placement?: PlaceOptions;
     onPointerEnter?(): void;
     onPointerLeave?(): void;
 }
-export declare function AnchoredPopup({ rect, className, children, placement, onPointerEnter, onPointerLeave }: AnchoredPopupProps): import("react").ReactPortal;
+export declare function AnchoredPopup({ rect, className, overflow, children, placement, onPointerEnter, onPointerLeave }: AnchoredPopupProps): import("react").ReactPortal;

package/dist/AnchoredPopup.js

@@ -6,7 +6,7 @@ import { placePopup } from './popup-placement.js';
  * 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 }) {
+export function AnchoredPopup({ rect, className, overflow = 'scroll', children, placement, onPointerEnter, onPointerLeave }) {
     const element = useRef(null);
     // Every render, since the character moves when the editor scrolls and the card's own size follows its content.
     useLayoutEffect(() => {
@@ -22,5 +22,5 @@ export function AnchoredPopup({ rect, className, children, placement, onPointerE
         popup.style.maxHeight = `${Math.floor(placed.maxHeight)}px`;
         popup.style.visibility = 'visible';
     });
-    return createPortal(_jsx("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 ?? ''}`, style: { visibility: 'hidden' }, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: children }), document.body);
+    return createPortal(_jsx("div", { ref: element, 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, children: children }), document.body);
 }

package/dist/CodeAuthorsCard.d.ts

@@ -1,5 +1,9 @@
 import type { EditorLanguage } from './editor-language.ts';
+import type { GitBlameCommit } from './host-types.ts';
 import type { AuthorsView } from './popups.ts';
+export declare function LatestCommit({ commit }: {
+    commit: GitBlameCommit;
+}): import("react").JSX.Element;
 export declare function CodeAuthorsCard({ language, view }: {
     language: EditorLanguage;
     view: AuthorsView;

package/dist/CodeAuthorsCard.js

@@ -3,20 +3,24 @@ 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.js';
+import { formatAge, formatNumber } from '@adecore/ui/format';
 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 }) {
+    const { t } = useTranslation('editor');
+    const now = useNow(MINUTE_MS);
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-text-muted", children: t('language.codeVision.latest') }), _jsx("span", { className: "text-text select-text", children: commit.summary }), _jsxs("span", { className: "flex items-center gap-1.5 text-text-muted", children: [_jsx("span", { className: "font-mono select-text", children: commit.shortHash }), _jsx("span", { className: "min-w-0 truncate", children: commit.author }), _jsx("span", { className: "shrink-0", children: formatAge(commit.at * 1000, now) })] })] }));
+}
 /*
  * 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 }) {
     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;
         return { getBoundingClientRect: () => new DOMRect(left, top, right - left, bottom - top) };
     }, [view.anchor]);
-    return (_jsx(Popover.Root, { open: true, onOpenChange: (open, details) => !open && language.codeVision.closeAuthors(details.reason === 'escape-key'), children: _jsxs(Popover.Popup, { anchor: anchor, side: "bottom", align: "start", sideOffset: 4, className: "flex w-72 flex-col gap-2 p-3 text-xs", children: [_jsxs(Popover.Title, { className: "flex items-center gap-1.5 font-medium text-text", children: [_jsx(Icon, { icon: authors.length > 1 ? Users : User, size: 14, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate", children: view.name })] }), _jsxs("ul", { className: "flex flex-col gap-1", children: [authors.map((author) => (_jsxs("li", { className: "flex items-baseline gap-2", children: [_jsx(Tooltip, { label: author.email, children: _jsx("span", { className: "min-w-0 grow truncate text-text", children: author.name }) }), _jsx("span", { className: "shrink-0 text-text-muted", children: t('language.codeVision.lines', { count: author.lines, formatted: formatNumber(author.lines) }) })] }, author.name))), uncommittedLines > 0 && (_jsxs("li", { className: "flex items-baseline gap-2 text-text-muted", children: [_jsx("span", { className: "min-w-0 grow truncate", children: t('language.codeVision.uncommitted') }), _jsx("span", { className: "shrink-0", children: t('language.codeVision.lines', { count: uncommittedLines, formatted: formatNumber(uncommittedLines) }) })] }))] }), latest !== null && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-text-muted", children: t('language.codeVision.latest') }), _jsx("span", { className: "text-text select-text", children: latest.summary }), _jsxs("span", { className: "flex items-center gap-1.5 text-text-muted", children: [_jsx("span", { className: "font-mono select-text", children: latest.shortHash }), _jsx("span", { className: "min-w-0 truncate", children: latest.author }), _jsx("span", { className: "shrink-0", children: relativeTime(latest.at, now) })] })] }), view.openCommit !== null && (_jsx("div", { className: "flex justify-end", children: _jsx(Popover.Close, { render: _jsxs(Button, { size: "xs", variant: "secondary", onClick: view.openCommit, children: [_jsx(Icon, { icon: GitCommitHorizontal, size: 14 }), t('language.codeVision.showCommit')] }) }) }))] }))] }) }));
+    return (_jsx(Popover.Root, { open: true, onOpenChange: (open, details) => !open && language.codeVision.closeAuthors(details.reason === 'escape-key'), children: _jsxs(Popover.Popup, { anchor: anchor, side: "bottom", align: "start", sideOffset: 4, className: "flex w-72 flex-col gap-2 p-3 text-xs", children: [_jsxs(Popover.Title, { className: "flex items-center gap-1.5 font-medium text-text", children: [_jsx(Icon, { icon: authors.length > 1 ? Users : User, size: 14, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate", children: view.name })] }), _jsxs("ul", { className: "flex flex-col gap-1", children: [authors.map((author) => (_jsxs("li", { className: "flex items-baseline gap-2", children: [_jsx(Tooltip, { label: author.email, children: _jsx("span", { className: "min-w-0 grow truncate text-text", children: author.name }) }), _jsx("span", { className: "shrink-0 text-text-muted", children: t('language.codeVision.lines', { count: author.lines, formatted: formatNumber(author.lines) }) })] }, author.name))), uncommittedLines > 0 && (_jsxs("li", { className: "flex items-baseline gap-2 text-text-muted", children: [_jsx("span", { className: "min-w-0 grow truncate", children: t('language.codeVision.uncommitted') }), _jsx("span", { className: "shrink-0", children: t('language.codeVision.lines', { count: uncommittedLines, formatted: formatNumber(uncommittedLines) }) })] }))] }), latest !== null && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(LatestCommit, { commit: latest }), view.openCommit !== null && (_jsx("div", { className: "flex justify-end", children: _jsx(Popover.Close, { render: _jsxs(Button, { size: "xs", variant: "secondary", onClick: view.openCommit, children: [_jsx(Icon, { icon: GitCommitHorizontal, size: 14 }), t('language.codeVision.showCommit')] }) }) }))] }))] }) }));
 }

package/dist/CompletionPopup.js

@@ -2,9 +2,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useId, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
+import { formatShortcut } from '@adecore/ui';
 import { kindLetterOf, kindToneOf, rowWindow } from './completion-model.js';
 import { SourceLine, SymbolSections } from './HoverSections.js';
 import { PathText } from './PathText.js';
+import { keepFocusOutOfList } from './popup-focus.js';
 import { placeBeside, placePopup } from './popup-placement.js';
 const TONES = {
     callable: 'bg-accent-soft text-accent',
@@ -47,6 +49,8 @@ const ROW_CHROME = 72;
  */
 export function CompletionPopup({ language, view, rect }) {
     const { t } = useTranslation('editor');
+    const toggle = language.shortcuts.triggerCompletion;
+    const detailsKey = toggle === null ? null : formatShortcut(toggle, toggle.apple);
     const listId = useId();
     const list = useRef(null);
     const docs = useRef(null);
@@ -102,10 +106,10 @@ export function CompletionPopup({ language, view, rect }) {
         language.editor.setInputPopup({ controls: listId, activeDescendant: activeId });
         return () => language.editor.setInputPopup(null);
     }, [language, listId, activeId]);
-    return createPortal(_jsxs(_Fragment, { children: [_jsxs("div", { ref: list, className: `${CARD} flex w-max max-w-[min(560px,calc(100vw-16px))] min-w-[340px] flex-col`, style: { visibility: 'hidden' }, onPointerDown: (event) => event.preventDefault(), children: [_jsx("div", { "aria-hidden": true, className: "h-0 overflow-hidden font-mono text-code", style: {
+    return createPortal(_jsxs(_Fragment, { children: [_jsxs("div", { ref: list, 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()), children: [_jsx("div", { "aria-hidden": true, className: "h-0 overflow-hidden font-mono text-code", style: {
                             width: `calc(${Math.max(widest, need)}ch + ${ROW_CHROME}px)`
                         } }), _jsxs("div", { id: listId, role: "listbox", className: "w-0 min-w-full overflow-y-auto p-1", style: { maxHeight: ROW_HEIGHT * VISIBLE_ROWS + 8 }, onScroll: (event) => setListTop(event.currentTarget.scrollTop), children: [_jsx("div", { "aria-hidden": true, style: { height: first * ROW_HEIGHT } }), view.rows.slice(first, last).map((row, offset) => {
                                 const index = first + offset;
-                                return (_jsxs("button", { id: optionId(index), ref: index === view.active ? activeRow : undefined, type: "button", role: "option", "aria-selected": index === view.active, "aria-setsize": total, "aria-posinset": index + 1, "data-active": index === view.active, className: "flex h-6 w-full items-center gap-2 overflow-hidden rounded-md px-1.5 text-left text-xs cursor-row", onClick: () => void language.completion.accept(false, index), children: [_jsx("span", { className: `grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs leading-none font-semibold ${TONES[kindToneOf(row.kind)]}`, children: kindLetterOf(row.kind) }), _jsx("span", { className: `max-w-full shrink-0 truncate font-mono text-code ${row.deprecated ? 'line-through' : ''}`, children: _jsx(MarkedLabel, { label: row.label, matches: row.matches }) }), _jsx("span", { className: "min-w-0 grow truncate font-mono text-text-faint", children: row.detail }), _jsx(PathText, { path: row.description, className: "max-w-[60%] font-mono text-text-faint" })] }, `${index}:${row.label}`));
-                            }), _jsx("div", { "aria-hidden": true, style: { height: (total - last) * ROW_HEIGHT } })] }), _jsxs("div", { className: "flex items-center gap-3 border-t border-border px-2 py-1 text-xs whitespace-nowrap text-text-faint", children: [_jsxs("span", { children: ["\u21B5 ", t('language.completion.insert')] }), _jsxs("span", { children: ["\u21E5 ", t('language.completion.replace')] }), _jsxs("span", { children: ["^Space ", t('language.completion.details')] }), _jsx("span", { className: "ml-auto", children: view.server })] })] }), view.detailsOpen && view.docs !== null && (_jsxs("div", { ref: docs, className: `${CARD} flex w-[360px] flex-col divide-y divide-border overflow-y-auto select-text`, style: { visibility: 'hidden' }, onPointerDown: (event) => event.preventDefault(), children: [view.docs.source !== '' && (_jsx("div", { className: "px-3 py-2", children: _jsx(SourceLine, { text: view.docs.source, language: view.highlightLanguage }) })), _jsx(SymbolSections, { text: view.docs.text })] }))] }), document.body);
+                                return (_jsxs("button", { id: optionId(index), ref: index === view.active ? activeRow : undefined, type: "button", role: "option", tabIndex: -1, "aria-selected": index === view.active, "aria-setsize": total, "aria-posinset": index + 1, "data-active": index === view.active, className: "flex h-6 w-full items-center gap-2 overflow-hidden rounded-md px-1.5 text-left text-xs cursor-row", onClick: () => void language.completion.accept(false, index), children: [_jsx("span", { className: `grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs leading-none font-semibold ${TONES[kindToneOf(row.kind)]}`, children: kindLetterOf(row.kind) }), _jsx("span", { className: `max-w-full shrink-0 truncate font-mono text-code ${row.deprecated ? 'line-through' : ''}`, children: _jsx(MarkedLabel, { label: row.label, matches: row.matches }) }), _jsx("span", { className: "min-w-0 grow truncate font-mono text-text-faint", children: row.detail }), _jsx(PathText, { path: row.description, className: "max-w-[60%] font-mono text-text-faint" })] }, `${index}:${row.label}`));
+                            }), _jsx("div", { "aria-hidden": true, style: { height: (total - last) * ROW_HEIGHT } })] }), _jsxs("div", { className: "flex items-center gap-3 border-t border-border px-2 py-1 text-xs whitespace-nowrap text-text-faint", children: [_jsxs("span", { children: ["\u21B5 ", t('language.completion.insert')] }), _jsxs("span", { children: ["\u21E5 ", t('language.completion.replace')] }), detailsKey !== null && (_jsxs("span", { children: [detailsKey, " ", t('language.completion.details')] })), _jsx("span", { className: "ml-auto", children: view.server })] })] }), view.detailsOpen && view.docs !== null && (_jsxs("div", { ref: docs, className: `${CARD} flex w-[360px] flex-col divide-y divide-border overflow-y-auto select-text`, style: { visibility: 'hidden' }, onPointerDown: (event) => event.preventDefault(), children: [view.docs.source !== '' && (_jsx("div", { className: "px-3 py-2", children: _jsx(SourceLine, { text: view.docs.source, language: view.highlightLanguage }) })), _jsx(SymbolSections, { text: view.docs.text })] }))] }), document.body);
 }

package/dist/EditorView.d.ts

@@ -1,16 +1,21 @@
 import { type ReactNode, type Ref } from 'react';
-import type { Editor, EditorEngine, EditorOptions } from '@adecore/editor';
-import { EditorLanguage } from './editor-language.ts';
+import { type Editor, type EditorEngine, type EditorOptions } from '@adecore/editor';
+import { EditorLanguage, type EditorLanguageOptions } from './editor-language.ts';
 import type { ProjectLanguage } from './project-language.ts';
+import type { HoverView } from './popups.ts';
+import type { Timers } from './timers.ts';
 export interface EditorViewProps {
     engine: EditorEngine;
     options: EditorOptions;
     project?: ProjectLanguage;
     uri?: string;
     languageId?: string;
+    timers?: Timers;
+    languageOptions?: EditorLanguageOptions;
     className?: string;
     ref?: Ref<HTMLDivElement>;
     onMount?(editor: Editor, language: EditorLanguage | null): void | (() => void);
     contextMenuItems?(language: EditorLanguage): ReactNode;
+    hoverFooter?(view: HoverView, language: EditorLanguage): ReactNode;
 }
-export declare function EditorView({ engine, options, project, uri, languageId, className, ref, onMount, contextMenuItems }: EditorViewProps): import("react").JSX.Element;
+export declare function EditorView({ engine, options, project, uri, languageId, timers, languageOptions, className, ref, onMount, contextMenuItems, hoverFooter }: EditorViewProps): import("react").JSX.Element;

package/dist/EditorView.js

@@ -2,30 +2,88 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createHolder } from './holder.js';
 import { useLayoutEffect, useMemo, useRef, useSyncExternalStore } from 'react';
 import { useTranslation } from 'react-i18next';
+import { DEFAULT_SMART_KEYS } from '@adecore/editor';
 import { EditorLanguage } from './editor-language.js';
 import { LanguagePopups } from './LanguagePopups.js';
+const DEFAULT_INDENTATION = { 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) {
     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 }) {
+function sameFields(left, right) {
+    if (left === right) {
+        return true;
+    }
+    if (left === undefined || right === undefined) {
+        return false;
+    }
+    const keys = new Set([...Object.keys(left), ...Object.keys(right)]);
+    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, before, after) {
+    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(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 }) {
     const { t } = useTranslation('editor');
     const element = useRef(null);
     const mounted = useRef(null);
     const words = useRef(t);
+    const latest = useRef({ options, timers, languageOptions, onMount });
+    const applied = useRef(options);
     const holder = useMemo(() => createHolder(), []);
     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);
@@ -33,12 +91,24 @@ 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]);
-    return (_jsxs("div", { className: className, ref: ref, style: { position: 'relative', minHeight: 0 }, children: [_jsx("div", { ref: element, style: { position: 'absolute', inset: 0 } }), language !== null && _jsx(LanguagePopups, { language: language, contextMenuItems: contextMenuItems })] }));
+        mounted.current?.setMessages({
+            fold: fold ?? localized.fold,
+            unfold: unfold ?? localized.unfold,
+            ...(noMoreOccurrences === undefined ? {} : { noMoreOccurrences })
+        });
+    }, [t, fold, unfold, noMoreOccurrences]);
+    return (_jsxs("div", { className: className, ref: ref, style: { position: 'relative', minHeight: 0 }, children: [_jsx("div", { ref: element, style: { position: 'absolute', inset: 0 } }), language !== null && _jsx(LanguagePopups, { language: language, contextMenuItems: contextMenuItems, hoverFooter: hoverFooter })] }));
 }

package/dist/HoverCard.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { type Location } from '@adecore/lsp';
 import type { EditorPosition } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
@@ -8,10 +9,11 @@ export declare function DefinitionPlace({ definition, uri, folder }: {
     uri: string;
     folder: string;
 }): import("react").JSX.Element | null;
-export declare function HoverCard({ language, problems, info, anchor, position }: {
+export declare function HoverCard({ language, problems, info, anchor, position, footer }: {
     language: EditorLanguage;
     problems: readonly Problem[];
     info: HoverInfo | null;
     anchor: EditorPosition;
     position: EditorPosition;
+    footer?: ReactNode;
 }): import("react").JSX.Element;

package/dist/HoverCard.js

@@ -41,7 +41,7 @@ function ProblemSection({ problem, language }) {
                             }
                         }, children: t('language.hover.quickFix') }) }) })] }));
 }
-export function HoverCard({ language, problems, info, anchor, position }) {
+export function HoverCard({ language, problems, info, anchor, position, footer }) {
     const { t } = useTranslation('editor');
     return (_jsxs("div", { className: "flex w-max min-w-[280px] max-w-[min(520px,calc(100vw-16px))] flex-col divide-y divide-border", children: [info !== null && (_jsxs(_Fragment, { children: [_jsx(SymbolSections, { text: info.text, onName: (name, declared) => {
                             language.hover.hide();
@@ -49,5 +49,5 @@ export function HoverCard({ language, problems, info, anchor, position }) {
                         } }), info.plain !== true && (_jsxs("div", { className: "flex flex-col gap-0.5 px-3 py-1.5 text-xs", children: [_jsxs("div", { className: "flex items-center gap-3 whitespace-nowrap", children: [info.definition !== null && (_jsx("button", { type: "button", className: "text-accent hover:underline", onClick: () => language.goTo(info.definition), children: t('language.hover.definition') })), info.references !== null && info.references > 0 && (_jsx("button", { type: "button", className: "text-accent hover:underline", onClick: () => {
                                             language.hover.hide();
                                             void language.peek.open(position);
-                                        }, children: t('language.hover.references', { count: info.references, formatted: formatNumber(info.references) }) }))] }), info.definition !== null && _jsx(DefinitionPlace, { definition: info.definition, uri: language.uri, folder: language.project.folder })] }))] })), problems.map((problem, index) => (_jsx(ProblemSection, { problem: problem, language: language }, index)))] }));
+                                        }, children: t('language.hover.references', { count: info.references, formatted: formatNumber(info.references) }) }))] }), info.definition !== null && _jsx(DefinitionPlace, { definition: info.definition, uri: language.uri, folder: language.project.folder })] }))] })), problems.map((problem, index) => (_jsx(ProblemSection, { problem: problem, language: language }, index))), footer] }));
 }

package/dist/LanguagePopups.d.ts

@@ -1,6 +1,10 @@
 import { type ReactNode } from 'react';
 import type { EditorLanguage } from './editor-language.ts';
-export declare function LanguagePopups({ language, contextMenuItems }: {
-    language: EditorLanguage;
-    contextMenuItems?: (language: EditorLanguage) => ReactNode;
-}): import("react").JSX.Element;
+import type { HoverView } from './popups.ts';
+export interface LanguagePopupsProps<Language extends EditorLanguage = EditorLanguage> {
+    language: Language;
+    contextMenuItems?(language: Language): ReactNode;
+    hoverFooter?(view: HoverView, language: Language): ReactNode;
+    children?: ReactNode;
+}
+export declare function LanguagePopups<Language extends EditorLanguage>({ language, contextMenuItems, hoverFooter, children }: LanguagePopupsProps<Language>): import("react").JSX.Element;

package/dist/LanguagePopups.js

@@ -16,9 +16,9 @@ import { SignatureCard } from './SignatureCard.js';
 /*
  * 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 }) {
+export function LanguagePopups({ language, contextMenuItems, hoverFooter, children }) {
     const [, redraw] = useReducer((count) => count + 1, 0);
     const hover = useStore(language.popups, (state) => state.hover);
     const completion = useStore(language.popups, (state) => state.completion);
@@ -26,7 +26,7 @@ export function LanguagePopups({ language, contextMenuItems }) {
     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);
@@ -37,5 +37,5 @@ export function LanguagePopups({ language, contextMenuItems }) {
     const pickRect = pick === null ? null : language.editor.rectAt(pick.anchor);
     const renameRect = rename === null ? null : language.editor.rectAt(rename.range.start);
     const renameEnd = rename === null ? null : language.editor.rectAt(rename.range.end);
-    return (_jsxs(_Fragment, { children: [_jsx(RenderedDocs, { language: language }), hover !== null && hoverRect !== null && (_jsx(AnchoredPopup, { rect: hoverRect, onPointerEnter: () => language.hover.holdCard(true), onPointerLeave: () => language.hover.holdCard(false), children: _jsx(HoverCard, { language: language, problems: hover.problems, info: hover.info, anchor: hover.anchor, position: hover.position }) })), signature !== null && signatureRect !== null && (_jsx(AnchoredPopup, { rect: signatureRect, placement: { prefer: 'above' }, children: _jsx(SignatureCard, { model: signature.model }) })), completion !== null && completionRect !== null && _jsx(CompletionPopup, { language: language, view: completion, rect: completionRect }), pick !== null && pickRect !== null && _jsx(PickPopup, { language: language, view: pick, rect: pickRect }), menu !== null && (_jsx(EditorContextMenu, { language: language, view: menu, children: contextMenuItems?.(language) })), symbols !== null && _jsx(SymbolPicker, { language: language, view: symbols }), peek !== null && _jsx(PeekPanel, { language: language, view: peek }), callHierarchy !== null && _jsx(CallHierarchyPanel, { language: language, view: callHierarchy }), authors !== null && _jsx(CodeAuthorsCard, { language: language, view: authors }), rename !== null && renameRect !== null && _jsx(RenameCard, { language: language, view: rename, rect: renameRect, endRect: renameEnd })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(RenderedDocs, { language: language }), hover !== null && hoverRect !== null && (_jsx(AnchoredPopup, { rect: hoverRect, onPointerEnter: () => language.hover.holdCard(true), onPointerLeave: () => language.hover.holdCard(false), children: _jsx(HoverCard, { language: language, problems: hover.problems, info: hover.info, anchor: hover.anchor, position: hover.position, footer: hoverFooter?.(hover, language) }) })), signature !== null && signatureRect !== null && (_jsx(AnchoredPopup, { rect: signatureRect, placement: { prefer: 'above' }, children: _jsx(SignatureCard, { model: signature.model }) })), completion !== null && completionRect !== null && _jsx(CompletionPopup, { language: language, view: completion, rect: completionRect }), pick !== null && pickRect !== null && _jsx(PickPopup, { language: language, view: pick, rect: pickRect }), menu !== null && (_jsx(EditorContextMenu, { language: language, view: menu, children: contextMenuItems?.(language) })), symbols !== null && _jsx(SymbolPicker, { language: language, view: symbols }), peek !== null && _jsx(PeekPanel, { language: language, view: peek }), callHierarchy !== null && _jsx(CallHierarchyPanel, { language: language, view: callHierarchy }), authors !== null && _jsx(CodeAuthorsCard, { language: language, view: authors }), children, rename !== null && renameRect !== null && _jsx(RenameCard, { language: language, view: rename, rect: renameRect, endRect: renameEnd })] }));
 }

package/dist/PickPopup.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useLayoutEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { PathText } from './PathText.js';
+import { keepFocusOutOfList } from './popup-focus.js';
 import { placePopup } from './popup-placement.js';
 const CARD = 'fixed top-0 left-0 z-(--z-popup) flex w-[420px] flex-col overflow-hidden rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow)';
 function PreviewLines({ preview }) {
@@ -42,5 +43,5 @@ export function PickPopup({ language, view, rect }) {
         language.editor.setInputPopup({ controls: listId, activeDescendant: activeId });
         return () => language.editor.setInputPopup(null);
     }, [language, listId, activeId]);
-    return createPortal(_jsxs("div", { ref: card, className: CARD, style: { visibility: 'hidden' }, onPointerDown: (event) => event.preventDefault(), children: [view.title !== null && _jsx("div", { className: "border-b border-border px-3 py-1.5 text-xs text-text-muted", children: view.title }), _jsx("div", { id: listId, role: "listbox", className: "min-h-0 flex-1 overflow-y-auto p-1", children: view.groups.map((group, groupIndex) => (_jsxs("div", { role: "group", className: "flex flex-col", children: [group.title !== null && _jsx("div", { className: "px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint", children: group.title }), group.rows.map((row) => (_jsxs("button", { id: optionIds.get(row.id), ref: row.id === view.active ? activeRow : undefined, type: "button", role: "option", "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", onClick: () => language.pick.choose(row.id), children: [_jsx("span", { className: row.path ? 'shrink-0' : 'min-w-0 truncate', children: row.label }), row.path ? (_jsx(PathText, { path: row.detail, className: "ml-auto font-mono text-text-faint" })) : (_jsx("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: row.id === view.active && row.detail === '' ? '↵' : row.detail }))] }, row.id)))] }, group.title ?? groupIndex))) }), view.preview !== null && _jsx(PreviewLines, { preview: view.preview })] }), document.body);
+    return createPortal(_jsxs("div", { ref: card, className: CARD, style: { visibility: 'hidden' }, onPointerDown: (event) => event.preventDefault(), ...keepFocusOutOfList(() => language.editor.focus()), children: [view.title !== null && _jsx("div", { className: "border-b border-border px-3 py-1.5 text-xs text-text-muted", children: view.title }), _jsx("div", { id: listId, role: "listbox", className: "min-h-0 flex-1 overflow-y-auto p-1", children: view.groups.map((group, groupIndex) => (_jsxs("div", { role: "group", className: "flex flex-col", children: [group.title !== null && _jsx("div", { className: "px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint", children: group.title }), group.rows.map((row) => (_jsxs("button", { id: optionIds.get(row.id), 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", onClick: () => language.pick.choose(row.id), children: [_jsx("span", { className: row.path ? 'shrink-0' : 'min-w-0 truncate', children: row.label }), row.path ? (_jsx(PathText, { path: row.detail, className: "ml-auto font-mono text-text-faint" })) : (_jsx("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: row.id === view.active && row.detail === '' ? '↵' : row.detail }))] }, row.id)))] }, group.title ?? groupIndex))) }), view.preview !== null && _jsx(PreviewLines, { preview: view.preview })] }), document.body);
 }

package/dist/RenameCard.js

@@ -8,6 +8,7 @@ import { Button, Icon } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { basenameOf, relativeTo } from './paths.js';
 import { AnchoredPopup } from './AnchoredPopup.js';
+import { keepFocusOutOfList } from './popup-focus.js';
 const CARD_ATTRIBUTE = 'data-rename-card';
 /* Whether the focus moved to something that belongs to the rename, which is not leaving it. */
 function staysInside(target) {
@@ -17,14 +18,14 @@ function staysInside(target) {
  * Suggested names from the host, in a list under the input; a press fills the input and the
  * typed name stays what Enter applies. While it is up the card says only its two keys.
  */
-function Suggestions({ names, active, onPick }) {
+function Suggestions({ names, active, onPick, onFocusBack }) {
     const { t } = useTranslation('editor');
-    return (_jsxs("div", { className: "flex w-[250px] flex-col p-1.25", children: [_jsxs("div", { className: "flex items-center gap-1.5 px-2.25 pt-1.25 pb-1 text-xs font-semibold text-text-faint", children: [_jsx(Icon, { icon: Sparkles, size: 12, className: "shrink-0" }), t('language.rename.suggestions')] }), names.map((name, index) => (_jsxs("button", { type: "button", tabIndex: -1, className: `flex h-6.5 items-center gap-2 rounded-md px-2.25 text-left font-mono text-code text-text ${index === active ? 'bg-accent/20' : 'hover:bg-surface-hover'}`, onClick: () => onPick(name), children: [_jsx(Icon, { icon: Sparkles, size: 12, className: `shrink-0 ${index === active ? 'text-accent' : 'text-text-faint'}` }), name] }, name))), _jsxs("div", { className: "mt-1 flex gap-3 border-t border-border px-2.25 pt-1.75 pb-0.75 text-xs text-text-muted", children: [_jsxs("span", { children: ["\u21B5 ", t('language.rename.rename')] }), _jsxs("span", { children: ["\u21E5 ", t('language.rename.useSuggestion')] })] })] }));
+    return (_jsxs("div", { className: "flex w-[250px] flex-col p-1.25", ...keepFocusOutOfList(onFocusBack), children: [_jsxs("div", { className: "flex items-center gap-1.5 px-2.25 pt-1.25 pb-1 text-xs font-semibold text-text-faint", children: [_jsx(Icon, { icon: Sparkles, size: 12, className: "shrink-0" }), t('language.rename.suggestions')] }), names.map((name, index) => (_jsxs("button", { type: "button", tabIndex: -1, className: `flex h-6.5 items-center gap-2 rounded-md px-2.25 text-left font-mono text-code text-text ${index === active ? 'bg-accent/20' : 'hover:bg-surface-hover'}`, onClick: () => onPick(name), children: [_jsx(Icon, { icon: Sparkles, size: 12, className: `shrink-0 ${index === active ? 'text-accent' : 'text-text-faint'}` }), name] }, name))), _jsxs("div", { className: "mt-1 flex gap-3 border-t border-border px-2.25 pt-1.75 pb-0.75 text-xs text-text-muted", children: [_jsxs("span", { children: ["\u21B5 ", t('language.rename.rename')] }), _jsxs("span", { children: ["\u21E5 ", t('language.rename.useSuggestion')] })] })] }));
 }
-function Hints({ view, active, onPick }) {
+function Hints({ view, active, onPick, onFocusBack }) {
     const { t } = useTranslation('editor');
     const { occurrences } = view;
-    return (_jsxs("div", { className: "flex flex-col", children: [view.error !== null && (_jsx("div", { role: "alert", className: "max-w-[420px] px-2.5 py-1.5 text-xs text-status-error", children: view.error })), view.suggestions.length > 0 ? (_jsx(Suggestions, { names: view.suggestions, active: active, onPick: onPick })) : (_jsxs("div", { className: "flex items-center gap-3 px-2.5 py-1.5 text-xs whitespace-nowrap text-text-muted", children: [occurrences !== null && (_jsx("span", { children: occurrences.files > 1
+    return (_jsxs("div", { className: "flex flex-col", children: [view.error !== null && (_jsx("div", { role: "alert", className: "max-w-[420px] px-2.5 py-1.5 text-xs text-status-error", children: view.error })), view.suggestions.length > 0 ? (_jsx(Suggestions, { names: view.suggestions, active: active, onPick: onPick, onFocusBack: onFocusBack })) : (_jsxs("div", { className: "flex items-center gap-3 px-2.5 py-1.5 text-xs whitespace-nowrap text-text-muted", children: [occurrences !== null && (_jsx("span", { children: occurrences.files > 1
                             ? t('language.rename.occurrencesFiles', {
                                 count: occurrences.count,
                                 formatted: formatNumber(occurrences.count),
@@ -97,11 +98,12 @@ export function RenameCard({ language, view, rect, endRect }) {
         }
     }
     const symbolWidth = endRect === null ? 0 : Math.max(0, endRect.left - rect.left);
-    return createPortal(_jsxs(_Fragment, { children: [_jsx("input", { ref: input, [CARD_ATTRIBUTE]: '', value: view.phase === 'preview' ? view.name : value, readOnly: view.phase === 'preview' || view.busy, spellCheck: false, autoComplete: "off", "aria-label": view.original, className: "fixed z-(--z-popup) rounded-sm border border-accent bg-surface px-1 font-mono text-code text-text shadow-(--float-shadow) outline-none [field-sizing:content]", style: {
-                    left: Math.round(rect.left) - 5,
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("input", { ref: input, [CARD_ATTRIBUTE]: '', value: view.phase === 'preview' ? view.name : value, readOnly: view.phase === 'preview' || view.busy, spellCheck: false, autoComplete: "off", "aria-label": view.original, className: "fixed z-(--z-popup) rounded-sm border border-accent bg-surface px-0 font-mono text-(length:--code-font-size) text-text shadow-(--float-shadow) outline-none [font-kerning:none] [field-sizing:content]", style: {
+                    // Only the border stands beside the name: any padding would cover the character after it, often a `(`.
+                    left: Math.round(rect.left) - 1,
                     top: Math.round(rect.top) - 2,
                     height: Math.round(rect.bottom - rect.top) + 4,
-                    minWidth: Math.round(symbolWidth) + 10
+                    minWidth: Math.round(symbolWidth) + 2
                 }, onChange: (event) => {
                     setValue(event.target.value);
                     language.rename.edited();
@@ -109,5 +111,5 @@ export function RenameCard({ language, view, rect, endRect }) {
                     if (!staysInside(event.relatedTarget)) {
                         language.rename.cancel();
                     }
-                } }), _jsx(AnchoredPopup, { rect: { ...rect, top: rect.top - 2, bottom: rect.bottom + 2 }, className: "overflow-hidden", placement: { gap: 2 }, children: _jsx("div", { [CARD_ATTRIBUTE]: '', onPointerDown: (event) => event.preventDefault(), children: view.phase === 'preview' ? _jsx(Preview, { language: language, view: view }) : _jsx(Hints, { view: view, active: active, onPick: fill }) }) })] }), document.body);
+                } }), _jsx(AnchoredPopup, { rect: { ...rect, top: rect.top - 2, bottom: rect.bottom + 2 }, overflow: "clip", placement: { gap: 2 }, children: _jsx("div", { [CARD_ATTRIBUTE]: '', onPointerDown: (event) => event.preventDefault(), children: view.phase === 'preview' ? (_jsx(Preview, { language: language, view: view })) : (_jsx(Hints, { view: view, active: active, onPick: fill, onFocusBack: () => input.current?.focus() })) }) })] }), document.body);
 }

package/dist/RenderedDocs.d.ts

@@ -1,9 +1,15 @@
+import type { DocComment } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
-import type { RenderedDocEntry } from './rendered-docs.ts';
-export declare function RenderedDocBlock({ language, entry }: {
+import { type ParsedDocComment } from './doc-comment-model.ts';
+interface DocBlockProps {
     language: EditorLanguage;
-    entry: RenderedDocEntry;
-}): import("react").JSX.Element;
+    comment: DocComment;
+    parsed: ParsedDocComment;
+    linkable: boolean;
+}
+declare function DocBlock({ language, comment, parsed, linkable }: DocBlockProps): import("react").JSX.Element;
+export declare const RenderedDocBlock: import("react").MemoExoticComponent<typeof DocBlock>;
 export declare function RenderedDocs({ language }: {
     language: EditorLanguage;
 }): import("react").JSX.Element;
+export {};

package/dist/RenderedDocs.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
-import { useSyncExternalStore } from 'react';
+import { memo, useSyncExternalStore } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DOC_LINK_PREFIX, sectionsOf } from './doc-comment-model.js';
 import { markdownParts } from './hover-content.js';
@@ -39,12 +39,11 @@ function TagRow({ tag, language, linkable, spaced }) {
     const link = target === null ? null : /^https?:\/\//i.test(target) ? `[${target}](${target})` : `[\`${target}\`](${DOC_LINK_PREFIX}${encodeURIComponent(target)})`;
     return (_jsx("dd", { className: `col-start-2 m-0 flex min-w-0 flex-wrap items-baseline gap-x-2 ${spaced ? 'mt-1' : ''}`, children: tag.name === 'example' ? (_jsx("div", { className: "w-full rounded-md bg-surface-sunken px-2 py-1.5", children: _jsx(Signature, { code: tag.text, language: language }) })) : (_jsxs(_Fragment, { children: [tag.subject !== null && target === null && _jsx(Code, { children: tag.subject }), tag.type !== null && _jsx(Code, { faint: true, children: tag.type }), (link !== null || tag.text !== '') && (_jsx("div", { className: "min-w-0 grow basis-48 text-text", children: _jsx(Prose, { text: [link, tag.text].filter((part) => part !== null && part !== '').join(' '), language: language, linkable: linkable, compact: true }) }))] })) }));
 }
-export function RenderedDocBlock({ language, entry }) {
+function DocBlock({ language, comment, parsed, linkable }) {
     const { t } = useTranslation('editor');
     const feature = language.renderedDocs;
-    const { description, tags } = entry.parsed;
+    const { description, tags } = parsed;
     const highlighter = shikiLanguageOf(language.languageId);
-    const linkable = feature.canFollow;
     const sections = sectionsOf(tags);
     const deprecated = sections.find((section) => section.name === 'deprecated');
     const shown = sections.filter((section) => section.name !== 'deprecated');
@@ -61,7 +60,7 @@ export function RenderedDocBlock({ language, entry }) {
             return;
         }
         if (href.startsWith(DOC_LINK_PREFIX)) {
-            feature.follow(decodeURIComponent(href.slice(DOC_LINK_PREFIX.length)), entry.comment);
+            feature.follow(decodeURIComponent(href.slice(DOC_LINK_PREFIX.length)), comment);
         }
         else if (/^(https?:|mailto:)/i.test(href)) {
             window.open(href, '_blank', 'noopener,noreferrer');
@@ -72,6 +71,8 @@ export function RenderedDocBlock({ language, entry }) {
                     ...section.tags.map((tag, index) => (_jsx(TagRow, { tag: tag, language: highlighter, linkable: linkable, spaced: row > 0 && index === 0 }, `${section.name}:${index}`)))
                 ]) }))] }));
 }
+/* Drawn again only when its comment or its links change, since every scroll of the editor draws the popups again. */
+export const RenderedDocBlock = memo(DocBlock);
 /*
  * The documentation comments the editor drew as rows, filled with their formatted text. It portals into
  * the element the editor made for each row, so the editor decides what is in view; a comment is parsed
@@ -80,5 +81,8 @@ export function RenderedDocBlock({ language, entry }) {
 export function RenderedDocs({ language }) {
     const feature = language.renderedDocs;
     useSyncExternalStore(feature.subscribe, feature.getVersion, feature.getVersion);
-    return _jsx(_Fragment, { children: feature.entries().map((entry) => createPortal(_jsx(RenderedDocBlock, { language: language, entry: entry }), entry.container, entry.id)) });
+    const linkable = feature.canFollow;
+    return (_jsx(_Fragment, { children: feature
+            .entries()
+            .map((entry) => createPortal(_jsx(RenderedDocBlock, { language: language, comment: entry.comment, parsed: entry.parsed, linkable: linkable }), entry.container, entry.id)) }));
 }