@adecore/editor-react 0.23.0 → 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/CallHierarchyPanel.js

@@ -7,6 +7,9 @@ import { fileUriToPath } from '@adecore/lsp';
 import { Icon, IconButton, Segmented, Spinner, Tooltip } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { CALL_HIERARCHY_HEIGHT } from './call-hierarchy.js';
+import { PanelResizeHandle } from './PanelResizeHandle.js';
+import { usePanelBody } from './use-panel-body.js';
+import { PANEL_BODY_HEIGHT } from './panel-size.js';
 import { CALL_LEVEL_LIMIT } from './call-hierarchy-model.js';
 import { basenameOf, relativeTo } from './paths.js';
 import { PathText } from './PathText.js';
@@ -75,14 +78,15 @@ function StatusText({ row, direction }) {
  */
 export function CallHierarchyPanel({ language, view }) {
     const { t } = useTranslation('editor');
+    const body = usePanelBody(language);
     if (view.container === null) {
         return null;
     }
     const folder = language.project.folder;
     const path = view.preview === null ? null : fileUriToPath(view.preview.uri);
     const shown = path === null ? '' : folderOf(relativeTo(path, folder));
-    return createPortal(_jsxs("div", { className: "flex flex-col bg-surface pt-[2px] font-sans text-xs text-text", style: { height: CALL_HIERARCHY_HEIGHT }, onPointerDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "peek-hatch h-[14px]" }), _jsxs("div", { className: "flex h-[33px] shrink-0 items-center gap-2 border-b border-border pr-2 pl-3 text-sm", children: [_jsx(Segmented, { value: view.direction, onValueChange: (direction) => language.callHierarchy.setDirection(direction), label: t('language.callHierarchy.direction'), options: [
+    return createPortal(_jsxs("div", { className: "flex flex-col bg-surface pt-[2px] font-sans text-xs text-text", style: { height: CALL_HIERARCHY_HEIGHT - PANEL_BODY_HEIGHT + body.height }, onPointerDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "peek-hatch h-[14px]" }), _jsxs("div", { className: "flex h-[33px] shrink-0 items-center gap-2 border-b border-border pr-2 pl-3 text-sm", children: [_jsx(Segmented, { value: view.direction, onValueChange: (direction) => language.callHierarchy.setDirection(direction), label: t('language.callHierarchy.direction'), options: [
                             { id: 'incoming', label: t('language.callHierarchy.incoming') },
                             { id: 'outgoing', label: t('language.callHierarchy.outgoing') }
-                        ] }), _jsx("span", { className: "shrink-0 font-medium", children: view.name }), _jsx("span", { className: "shrink-0 font-medium text-text-muted", children: path === null ? '' : basenameOf(path) }), _jsx(PathText, { path: shown, className: "text-text-muted" }), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [view.sites > 1 && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: ChevronLeft, size: "xs", label: t('language.callHierarchy.previousSite'), onClick: () => language.callHierarchy.stepSite(-1) }), _jsx("span", { className: "text-text-muted", children: t('language.callHierarchy.site', { current: formatNumber(view.site + 1), total: formatNumber(view.sites) }) }), _jsx(IconButton, { icon: ChevronRight, size: "xs", label: t('language.callHierarchy.nextSite'), onClick: () => language.callHierarchy.stepSite(1) })] })), _jsx(IconButton, { icon: X, size: "xs", label: t('language.callHierarchy.close'), onClick: () => language.callHierarchy.close() })] })] }), _jsxs("div", { className: "flex h-[180px] shrink-0", children: [_jsx(Tree, { language: language, view: view }), _jsx(Preview, { preview: view.preview })] }), _jsx("div", { className: "peek-hatch h-[14px]" })] }), view.container);
+                        ] }), _jsx("span", { className: "shrink-0 font-medium", children: view.name }), _jsx("span", { className: "shrink-0 font-medium text-text-muted", children: path === null ? '' : basenameOf(path) }), _jsx(PathText, { path: shown, className: "text-text-muted" }), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [view.sites > 1 && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: ChevronLeft, size: "xs", label: t('language.callHierarchy.previousSite'), onClick: () => language.callHierarchy.stepSite(-1) }), _jsx("span", { className: "text-text-muted", children: t('language.callHierarchy.site', { current: formatNumber(view.site + 1), total: formatNumber(view.sites) }) }), _jsx(IconButton, { icon: ChevronRight, size: "xs", label: t('language.callHierarchy.nextSite'), onClick: () => language.callHierarchy.stepSite(1) })] })), _jsx(IconButton, { icon: X, size: "xs", label: t('language.callHierarchy.close'), onClick: () => language.callHierarchy.close() })] })] }), _jsxs("div", { className: "flex shrink-0", style: { height: body.height }, children: [_jsx(Tree, { language: language, view: view }), _jsx(Preview, { preview: view.preview })] }), _jsx("div", { className: "peek-hatch relative h-[14px]", children: _jsx(PanelResizeHandle, { container: view.container, height: body.height, onHeight: body.set, onCommit: body.commit }) })] }), view.container);
 }

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/PanelResizeHandle.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    container: HTMLElement;
+    height: number;
+    onHeight(height: number): void;
+    onCommit(height: number): void;
+}
+export declare function PanelResizeHandle({ container, height, onHeight, onCommit }: Props): import("react").JSX.Element;
+export {};

package/dist/PanelResizeHandle.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PANEL_BODY_MIN, PANEL_KEY_STEP, availableHeightOf, clampPanelBody, panelBodyMax } from './panel-size.js';
+import { realTimers, revealRow } from './timers.js';
+/* The bottom edge of a panel: a drag, or the arrow keys, change the height of its body. */
+export function PanelResizeHandle({ container, height, onHeight, onCommit }) {
+    const { t } = useTranslation('editor');
+    const drag = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const [max, setMax] = useState(() => panelBodyMax(availableHeightOf(container)));
+    useEffect(() => {
+        const viewport = container.closest('.se-viewport');
+        const Observer = viewport?.ownerDocument.defaultView?.ResizeObserver;
+        if (viewport === null || viewport === undefined || Observer === undefined) {
+            return;
+        }
+        const observer = new Observer(() => setMax(panelBodyMax(availableHeightOf(container))));
+        observer.observe(viewport);
+        return () => observer.disconnect();
+    }, [container]);
+    function settle(value, from) {
+        const next = clampPanelBody(value, availableHeightOf(container));
+        onHeight(next);
+        if (next !== from) {
+            onCommit(next);
+            revealRow(realTimers, container);
+        }
+    }
+    function heightAt(clientY) {
+        return clampPanelBody(drag.current.startHeight + clientY - drag.current.startY, availableHeightOf(container));
+    }
+    function down(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        drag.current = { startY: event.clientY, startHeight: height, lastY: event.clientY };
+        setDragging(true);
+    }
+    function move(event) {
+        if (drag.current !== null) {
+            drag.current.lastY = event.clientY;
+            onHeight(heightAt(event.clientY));
+        }
+    }
+    // Also the end of a drag whose capture was lost, such as a container that was replaced under the pointer.
+    function end(event) {
+        if (drag.current === null) {
+            return;
+        }
+        const { startHeight } = drag.current;
+        const next = heightAt(drag.current.lastY);
+        drag.current = null;
+        setDragging(false);
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        settle(next, startHeight);
+    }
+    function key(event) {
+        const step = event.shiftKey ? PANEL_KEY_STEP * 4 : PANEL_KEY_STEP;
+        const end = panelBodyMax(availableHeightOf(container));
+        const target = { ArrowUp: height - step, ArrowDown: height + step, Home: PANEL_BODY_MIN, End: end }[event.key];
+        if (target === undefined) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        settle(target, height);
+    }
+    return (_jsx("div", { role: "separator", "aria-orientation": "horizontal", "aria-label": t('language.panel.resize'), "aria-valuemin": PANEL_BODY_MIN, "aria-valuemax": max, "aria-valuenow": height, tabIndex: 0, "data-dragging": dragging, className: "absolute inset-x-0 bottom-0 z-10 h-1 cursor-row-resize touch-none outline-none hover:bg-accent-soft focus-visible:bg-accent-soft data-[dragging=true]:bg-accent-soft", onPointerDown: down, onPointerMove: move, onPointerUp: end, onPointerCancel: end, onLostPointerCapture: end, onKeyDown: key }));
+}

package/dist/PeekPanel.js

@@ -9,6 +9,9 @@ import { formatNumber } from '@adecore/ui/format';
 import { basenameOf, relativeTo } from './paths.js';
 import { shikiLanguageOfPath } from './language-ids.js';
 import { PathText } from './PathText.js';
+import { PanelResizeHandle } from './PanelResizeHandle.js';
+import { usePanelBody } from './use-panel-body.js';
+import { PANEL_BODY_HEIGHT } from './panel-size.js';
 import { PEEK_HEIGHT } from './peek.js';
 import { distinguishingFolders, visualColumnOf } from './peek-model.js';
 import { useEditorRendering } from './rendering-context.js';
@@ -93,11 +96,12 @@ export function PeekPanel({ language, view }) {
     const path = active === undefined ? null : fileUriToPath(active.location.uri);
     const folder = language.project.folder;
     const shown = path === null ? '' : folderOf(relativeTo(path, folder));
+    const body = usePanelBody(language);
     if (view.container === null) {
         return null;
     }
-    return createPortal(_jsxs("div", { className: "flex flex-col bg-surface pt-[2px] font-sans text-xs text-text", style: { height: PEEK_HEIGHT }, onPointerDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "peek-hatch h-[14px]" }), _jsxs("div", { className: "flex h-[31px] shrink-0 items-center gap-2 border-b border-border pr-2 pl-3 text-sm", children: [_jsx("span", { className: "shrink-0 font-medium", children: path === null ? '' : basenameOf(path) }), _jsx(PathText, { path: shown, className: "text-text-muted" }), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [_jsx("span", { className: "text-text-muted", children: t(view.kind === 'definitions' ? 'language.peek.definitions' : 'language.peek.references', {
+    return createPortal(_jsxs("div", { className: "flex flex-col bg-surface pt-[2px] font-sans text-xs text-text", style: { height: PEEK_HEIGHT - PANEL_BODY_HEIGHT + body.height }, onPointerDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "peek-hatch h-[14px]" }), _jsxs("div", { className: "flex h-[31px] shrink-0 items-center gap-2 border-b border-border pr-2 pl-3 text-sm", children: [_jsx("span", { className: "shrink-0 font-medium", children: path === null ? '' : basenameOf(path) }), _jsx(PathText, { path: shown, className: "text-text-muted" }), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [_jsx("span", { className: "text-text-muted", children: t(view.kind === 'definitions' ? 'language.peek.definitions' : 'language.peek.references', {
                                     count: view.count,
                                     formatted: formatNumber(view.count)
-                                }) }), _jsx(IconButton, { icon: X, size: "xs", label: t('language.peek.close'), onClick: () => language.peek.close() })] })] }), _jsxs("div", { className: "flex h-[180px] shrink-0", children: [_jsx(Preview, { preview: view.preview }), _jsx(Places, { language: language, view: view })] }), _jsx("div", { className: "peek-hatch h-[14px]" })] }), view.container);
+                                }) }), _jsx(IconButton, { icon: X, size: "xs", label: t('language.peek.close'), onClick: () => language.peek.close() })] })] }), _jsxs("div", { className: "flex shrink-0", style: { height: body.height }, children: [_jsx(Preview, { preview: view.preview }), _jsx(Places, { language: language, view: view })] }), _jsx("div", { className: "peek-hatch relative h-[14px]", children: _jsx(PanelResizeHandle, { container: view.container, height: body.height, onHeight: body.set, onCommit: body.commit }) })] }), view.container);
 }

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