@adecore/editor-react 0.22.1 → 0.23.1

package/dist/CallHierarchyPanel.d.ts

@@ -0,0 +1,6 @@
+import type { EditorLanguage } from './editor-language.ts';
+import type { CallHierarchyView } from './popups.ts';
+export declare function CallHierarchyPanel({ language, view }: {
+    language: EditorLanguage;
+    view: CallHierarchyView;
+}): import("react").ReactPortal | null;

package/dist/CallHierarchyPanel.js

@@ -0,0 +1,92 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { ChevronDown, ChevronLeft, ChevronRight, X } from 'lucide-react';
+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';
+import { Preview } from './PeekPanel.js';
+import { SymbolBadge } from './SymbolPicker.js';
+const INDENT = 14;
+const BASE_INDENT = 8;
+function folderOf(path) {
+    return path.slice(0, Math.max(0, path.lastIndexOf('/')));
+}
+/* One line of the tree. Status lines are treeitems too, so the level of a symbol's calls is read the same way, but nothing selects them. */
+function Line({ row, id, active, expanded, position, size, ref, children, onClick, onDoubleClick }) {
+    return (_jsx("div", { ref: ref, id: id, role: "treeitem", "aria-level": row.level, "aria-selected": active, "aria-expanded": expanded, "aria-posinset": position, "aria-setsize": size, "aria-disabled": row.kind === 'status' ? true : undefined, "data-active": active, className: "flex h-[22px] w-full cursor-default items-center gap-1.5 pr-3 text-left font-mono text-code hover:bg-surface-hover data-[active=true]:bg-accent-soft", style: { paddingLeft: BASE_INDENT + (row.level - 1) * INDENT }, onClick: onClick, onDoubleClick: onDoubleClick, children: children }));
+}
+function Symbol({ language, row, active, id, ref }) {
+    const { t } = useTranslation('editor');
+    const { item } = row;
+    const path = relativeTo(fileUriToPath(item.uri) ?? item.uri, language.project.folder);
+    const tool = language.callHierarchy;
+    return (_jsxs(Line, { ref: ref, row: row, id: id, active: active, expanded: row.leaf ? undefined : row.expanded, position: row.position, size: row.size, onClick: () => (active ? tool.go(row.id) : tool.select(row.id)), onDoubleClick: () => tool.go(row.id), children: [_jsx("span", { "aria-hidden": true, className: "grid size-3.5 shrink-0 place-items-center text-text-muted", onClick: (event) => {
+                    event.stopPropagation();
+                    tool.toggle(row.id);
+                }, children: row.leaf ? null : _jsx(Icon, { icon: row.expanded ? ChevronDown : ChevronRight, size: 14 }) }), _jsx(SymbolBadge, { kind: item.kind }), _jsx("span", { className: `shrink-0 text-text ${item.tags?.includes(1) ? 'line-through' : ''}`, children: item.name }), item.detail !== undefined && item.detail !== '' && _jsx("span", { className: "min-w-0 flex-1 truncate text-text-muted", children: item.detail }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 font-sans text-xs text-text-faint", children: [row.sites > 1 && (_jsx(Tooltip, { label: t('language.callHierarchy.sites', { count: row.sites, formatted: formatNumber(row.sites) }), children: _jsx("span", { className: "text-text-muted", children: `×${formatNumber(row.sites)}` }) })), _jsx(Tooltip, { label: path, children: _jsx("span", { className: "max-w-40 truncate", children: `${basenameOf(path)}:${formatNumber(item.selectionRange.start.line + 1)}` }) })] })] }));
+}
+function Tree({ language, view }) {
+    const { t } = useTranslation('editor');
+    const treeId = useId();
+    const activeRow = useRef(null);
+    const idOf = (row) => `${treeId}-${row.id}`;
+    const activeId = view.rows.some((row) => row.id === view.active) ? `${treeId}-${view.active}` : undefined;
+    useEffect(() => {
+        activeRow.current?.scrollIntoView({ block: 'nearest' });
+    }, [view.active]);
+    // The focus stays in the text, so the input is what names the tree and its active row.
+    useLayoutEffect(() => {
+        language.editor.setInputPopup({ controls: treeId, activeDescendant: activeId });
+        return () => language.editor.setInputPopup(null);
+    }, [language, treeId, activeId]);
+    return (_jsx("div", { id: treeId, role: "tree", "aria-label": t('language.callHierarchy.label'), className: "w-1/2 shrink-0 overflow-y-auto border-r border-border py-1", children: view.rows.map((row) => {
+            const active = row.id === view.active;
+            const ref = active ? activeRow : undefined;
+            if (row.kind === 'node') {
+                return _jsx(Symbol, { ref: ref, language: language, row: row, active: active, id: idOf(row) }, row.id);
+            }
+            if (row.kind === 'more') {
+                const next = Math.min(row.hidden, CALL_LEVEL_LIMIT);
+                return (_jsx(Line, { ref: ref, row: row, id: idOf(row), active: active, onClick: () => language.callHierarchy.showMore(row.parent), children: _jsx("span", { className: "font-sans text-xs text-accent", children: t('language.callHierarchy.more', { count: next, formatted: formatNumber(next), hidden: formatNumber(row.hidden) }) }) }, row.id));
+            }
+            return (_jsx(Line, { row: row, id: idOf(row), active: false, onClick: () => language.callHierarchy.retry(row.parent), children: _jsx(StatusText, { row: row, direction: view.direction }) }, row.id));
+        }) }));
+}
+function StatusText({ row, direction }) {
+    const { t } = useTranslation('editor');
+    if (row.status === 'loading') {
+        return (_jsxs("span", { className: "flex items-center gap-2 font-sans text-xs text-text-muted", children: [_jsx(Spinner, { size: 12 }), t('language.callHierarchy.loading')] }));
+    }
+    if (row.status === 'failed') {
+        return (_jsx("span", { className: "min-w-0 truncate font-sans text-xs text-status-error", children: t('language.callHierarchy.retry', { message: row.message ?? '' }) }));
+    }
+    return (_jsx("span", { className: "font-sans text-xs text-text-muted", children: t(direction === 'incoming' ? 'language.callHierarchy.noIncoming' : 'language.callHierarchy.noOutgoing') }));
+}
+/*
+ * The call hierarchy of a symbol in the row the editor leaves under the line: the tree of callers or callees on
+ * the left and the code of the active call on the right. Like the peek it portals into that row, which the
+ * editor makes again when it scrolls back into view.
+ */
+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 - 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 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/CompletionPopup.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useId, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { kindLetterOf, kindToneOf, rowWindow } from './completion-model.js';
@@ -47,6 +47,7 @@ const ROW_CHROME = 72;
  */
 export function CompletionPopup({ language, view, rect }) {
     const { t } = useTranslation('editor');
+    const listId = useId();
     const list = useRef(null);
     const docs = useRef(null);
     const activeRow = useRef(null);
@@ -94,10 +95,17 @@ export function CompletionPopup({ language, view, rect }) {
     }, [view.active, view.rows]);
     const total = view.rows.length;
     const { first, last } = rowWindow(listTop, view.active, total, ROW_HEIGHT, VISIBLE_ROWS, OVERSCAN_ROWS, LIST_PADDING);
+    const optionId = (index) => `${listId}-option-${index}`;
+    const activeId = view.active >= first && view.active < last ? optionId(view.active) : undefined;
+    // The focus stays in the text, so the input is what names the list and its active option.
+    useLayoutEffect(() => {
+        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: {
                             width: `calc(${Math.max(widest, need)}ch + ${ROW_CHROME}px)`
-                        } }), _jsxs("div", { 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) => {
+                        } }), _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", { 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}`));
+                                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);
 }

package/dist/DiffView.d.ts

@@ -0,0 +1,22 @@
+import { type Ref } from 'react';
+import type { Editor, EditorEngine, EditorTheme } from '@adecore/editor';
+import { type DiffDocument } from '@adecore/merge';
+import type { DiffSourceTokens } from './diff-syntax.ts';
+import { type DiffLimits } from './diff-expansion.ts';
+export interface DiffViewProps {
+    engine: EditorEngine;
+    document: DiffDocument;
+    theme: EditorTheme;
+    tokens?: DiffSourceTokens;
+    wrap?: boolean;
+    layout?: 'unified' | 'split';
+    splitWrapLimit?: number;
+    fill?: boolean;
+    maxHeight?: number;
+    unfoldLimits?: DiffLimits;
+    label: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    onMount?(editor: Editor, side?: 'old' | 'new'): void | (() => void);
+}
+export declare function DiffView(props: DiffViewProps): import("react").JSX.Element;

package/dist/DiffView.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { parseChord } from '@adecore/editor/keymap';
+import { diffDisplay, diffSplit } from '@adecore/merge';
+import { wordMarks } from './diff-wordmarks.js';
+import { DiffOverlays } from './diff-overlays.js';
+import { SplitDiffView } from './SplitDiffView.js';
+import { LineActionHost, RowHost } from './row-host.js';
+import { DEFAULT_UNFOLD_LIMITS, expandDiff } from './diff-expansion.js';
+function UnifiedDiffView({ engine, document, display, unfold, blocked, theme, tokens, wrap = true, fill = false, maxHeight, label, className, ref, onMount }) {
+    const { t } = useTranslation('editor');
+    const emphasis = useMemo(() => wordMarks(document), [document]);
+    const element = useRef(null);
+    const current = useRef({ display, tokens, theme, wrap, label });
+    const applied = useRef({ theme, wrap, label });
+    const [mounted, setMounted] = useState(null);
+    const [height, setHeight] = useState(0);
+    useLayoutEffect(() => {
+        current.current = { display, tokens, theme, wrap, label };
+    });
+    useLayoutEffect(() => {
+        const host = element.current;
+        if (host === null) {
+            return;
+        }
+        const initial = current.current;
+        const editor = engine.mount(host, {
+            text: initial.display.text,
+            theme: initial.theme,
+            wrap: initial.wrap,
+            label: initial.label,
+            readOnly: true,
+            guides: false,
+            foldOutline: 'off',
+            folding: false,
+            // Prompt cards use this chord for their primary action; a read-only review has no split-line action.
+            handBack: [parseChord('Mod+Enter')]
+        });
+        applied.current = { theme: initial.theme, wrap: initial.wrap, label: initial.label };
+        editor.setBlocks([]);
+        editor.setLineTokens((line) => {
+            const { display, tokens } = current.current;
+            const row = display.rows[line];
+            return row === undefined ? null : tokens?.get(row.new === undefined ? 'old' : 'new', (row.new ?? row.old).index);
+        });
+        setMounted({ engine, editor, rows: new RowHost(editor, 'diff-gaps'), actions: new LineActionHost(editor, 'diff-status') });
+        const measure = () => setHeight(editor.getContentHeight());
+        const stop = editor.onViewChange(measure);
+        measure();
+        return () => {
+            stop();
+            editor.dispose();
+        };
+    }, [engine]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.engine !== engine) {
+            return;
+        }
+        const { editor, rows, actions } = mounted;
+        editor.setText(display.text);
+        editor.setLineNumbers((line) => {
+            const row = current.current.display.rows[line];
+            return row === undefined ? null : String((row.new ?? row.old).number);
+        });
+        const highlights = [];
+        for (const [index, row] of display.rows.entries()) {
+            if (row.change !== 'delete' && row.change !== 'insert') {
+                continue;
+            }
+            const removed = row.change === 'delete';
+            highlights.push({
+                startLine: index + 1,
+                endLine: index + 1,
+                color: removed ? '--editor-deleted' : '--editor-added',
+                bar: removed ? 'hatched' : 'solid',
+                emphasis: [(removed ? emphasis.old.get(row.old.index) : emphasis.new.get(row.new.index)) ?? []]
+            });
+        }
+        editor.setLineHighlights(highlights);
+        editor.setChangeMarks(highlights.map((highlight) => ({
+            startLine: highlight.startLine,
+            endLine: highlight.endLine,
+            kind: highlight.bar === 'hatched' ? 'deleted' : 'added'
+        })));
+        rows.set(display.gaps.map(({ before, row }) => ({
+            id: `gap-${row.id}`,
+            line: Math.min(before, Math.max(0, display.rows.length - 1)),
+            placement: before < display.rows.length ? 'above' : 'below',
+            height: 32
+        })));
+        actions.set(display.rows.flatMap((row, line) => (row.noNewline === undefined ? [] : [{ id: `no-newline-${line}`, line }])));
+    }, [mounted, engine, display, emphasis]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.engine !== engine) {
+            return;
+        }
+        // The color of a changed line is not the only thing that says so: the gutter carries a sentence with the numbers it reads from.
+        mounted.editor.setLineLabels((line) => {
+            const row = display.rows[line];
+            if (row?.change === 'delete') {
+                return t('diff.removed', { number: row.old.number });
+            }
+            if (row?.change === 'insert') {
+                return t('diff.added', { number: row.new.number });
+            }
+            return row?.old !== undefined && row.new !== undefined ? t('diff.unchanged', { old: row.old.number, new: row.new.number }) : null;
+        });
+    }, [mounted, engine, display, t]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.engine !== engine) {
+            return;
+        }
+        const previous = applied.current;
+        if (previous.theme !== theme) {
+            mounted.editor.setTheme(theme);
+        }
+        if (previous.wrap !== wrap) {
+            mounted.editor.setWrap(wrap);
+        }
+        if (previous.label !== label) {
+            mounted.editor.setLabel(label);
+        }
+        applied.current = { theme, wrap, label };
+    }, [mounted, engine, theme, wrap, label]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.engine !== engine) {
+            return;
+        }
+        const refresh = () => {
+            mounted.editor.setLineTokens((line) => {
+                const row = current.current.display.rows[line];
+                return row === undefined ? null : current.current.tokens?.get(row.new === undefined ? 'old' : 'new', (row.new ?? row.old).index);
+            });
+        };
+        refresh();
+        const ownerWindow = element.current?.ownerDocument.defaultView;
+        let pending = false;
+        let stopped = false;
+        let frame;
+        const schedule = () => {
+            if (pending) {
+                return;
+            }
+            pending = true;
+            const paint = () => {
+                pending = false;
+                if (!stopped) {
+                    refresh();
+                }
+            };
+            if (ownerWindow?.requestAnimationFrame !== undefined) {
+                frame = ownerWindow.requestAnimationFrame(paint);
+            }
+            else {
+                queueMicrotask(paint);
+            }
+        };
+        const stop = tokens?.subscribe(schedule);
+        return () => {
+            stopped = true;
+            stop?.();
+            if (frame !== undefined) {
+                ownerWindow?.cancelAnimationFrame?.(frame);
+            }
+        };
+    }, [mounted, engine, tokens, display]);
+    useLayoutEffect(() => {
+        if (mounted !== null && mounted.engine === engine) {
+            return onMount?.(mounted.editor);
+        }
+    }, [mounted, engine, onMount]);
+    const limit = maxHeight !== undefined && Number.isFinite(maxHeight) && maxHeight > 0 ? maxHeight : Infinity;
+    return (_jsxs("div", { className: `adecore-editor-diff ${className ?? ''}`, ref: ref, "data-scroll": fill || height > limit, style: { position: 'relative', minHeight: 0, height: fill ? '100%' : Math.min(height, limit) }, children: [_jsx("div", { ref: element, style: { position: 'absolute', inset: 0 } }), mounted !== null && mounted.engine === engine && _jsx(DiffOverlays, { mounted: mounted, display: display, unfold: unfold, blocked: blocked })] }));
+}
+export function DiffView(props) {
+    const { document, unfoldLimits = DEFAULT_UNFOLD_LIMITS } = props;
+    const [expanded, setExpanded] = useState(() => ({
+        document,
+        gaps: new Map(),
+        blocked: new Set()
+    }));
+    const gaps = expanded.document === document ? expanded.gaps : undefined;
+    const blocked = expanded.document === document ? expanded.blocked : new Set();
+    const projection = useMemo(() => (props.layout === 'split' ? diffSplit(document, gaps) : diffDisplay(document, gaps)), [props.layout, document, gaps]);
+    const unfold = (id) => setExpanded((previous) => {
+        const gaps = previous.document === document ? previous.gaps : new Map();
+        const next = expandDiff(document, gaps, id, unfoldLimits);
+        return {
+            document,
+            gaps: next,
+            blocked: new Set([...(previous.document === document ? previous.blocked : []), ...(next === gaps ? [id] : [])])
+        };
+    });
+    if ('aligned' in projection && projection.old.lines.length > 0 && projection.new.lines.length > 0) {
+        const visibleRows = projection.aligned.reduce((count, row) => count + (row.kind === 'gap' ? 0 : row.row.change === 'pair' ? 2 : 1), 0);
+        const wrap = props.wrap !== false && visibleRows <= (props.splitWrapLimit ?? 2000);
+        return _jsx(SplitDiffView, { ...props, wrap: wrap, display: projection, unfold: unfold, blocked: blocked });
+    }
+    // An absent side has no selectable text; keep additions and deletions in the unified editor.
+    const display = 'aligned' in projection ? (projection.old.lines.length > 0 ? projection.old : projection.new) : projection;
+    return _jsx(UnifiedDiffView, { ...props, display: display, unfold: unfold, blocked: blocked });
+}

package/dist/EditorContextMenu.js

@@ -14,6 +14,7 @@ export function EditorContextMenu({ language, view, children }) {
         { id: 'goToTypeDefinition', method: 'textDocument/typeDefinition', run: () => void language.navigation.go('typeDefinition') },
         { id: 'goToImplementation', method: 'textDocument/implementation', run: () => void language.navigation.go('implementation') },
         { id: 'peekReferences', method: 'textDocument/references', run: () => void language.peek.open() },
+        { id: 'callHierarchy', method: 'textDocument/prepareCallHierarchy', run: () => void language.callHierarchy.open() },
         { id: 'renameSymbol', method: 'textDocument/rename', run: () => void language.rename.start() },
         { id: 'codeActions', method: 'textDocument/codeAction', run: () => void language.codeActions.open() }
     ];

package/dist/EditorView.js

@@ -1,10 +1,19 @@
 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 { EditorLanguage } from './editor-language.js';
 import { LanguagePopups } from './LanguagePopups.js';
+/* 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 }) {
+    const { t } = useTranslation('editor');
     const element = useRef(null);
+    const mounted = useRef(null);
+    const words = useRef(t);
     const holder = useMemo(() => createHolder(), []);
     const language = useSyncExternalStore(holder.subscribe, holder.get, holder.get);
     useLayoutEffect(() => {
@@ -12,16 +21,24 @@ export function EditorView({ engine, options, project, uri, languageId, classNam
         if (host === null) {
             return;
         }
-        const editor = engine.mount(host, options);
+        const editor = engine.mount(host, { ...options, messages: { ...foldMessages(words.current), ...options.messages } });
+        mounted.current = editor;
         const attached = project === undefined || uri === undefined || languageId === undefined ? null : new EditorLanguage(project, editor, uri, languageId);
         holder.set(attached);
         const stop = onMount?.(editor, attached);
         return () => {
+            mounted.current = null;
             holder.set(null);
             stop?.();
             attached?.dispose();
             editor.dispose();
         };
     }, [engine, options, project, uri, languageId, holder, onMount]);
+    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 })] }));
 }

package/dist/FindReplace.d.ts

@@ -1,4 +1,4 @@
-import type { Editor } from '@adecore/editor';
+import { type Editor } from '@adecore/editor';
 export declare function FindReplace({ editor, className, onClose }: {
     editor: Editor;
     className?: string;

package/dist/FindReplace.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
+import { MAX_REPLACEMENT_PAGE, MAX_REPLACEMENT_CHARACTERS } from '@adecore/editor';
 import { compileFind, EMPTY_FIND_QUERY } from './find-query.js';
 export function FindReplace({ editor, className, onClose }) {
     const { t } = useTranslation('editor');
@@ -10,6 +11,7 @@ export function FindReplace({ editor, className, onClose }) {
     const [replacement, setReplacement] = useState('');
     const [preserveCase, setPreserveCase] = useState(false);
     const [state, setState] = useState({ count: 0, current: null });
+    const root = useRef(null);
     const compiled = useMemo(() => compileFind(query), [query]);
     useEffect(() => editor.onFind(setState), [editor]);
     useEffect(() => {
@@ -22,12 +24,45 @@ export function FindReplace({ editor, className, onClose }) {
         editor.endFind();
         editor.setReplacePreview(null);
     }, [editor]);
+    // The host closes the widget by unmounting it, with the keyboard in it or not; only a keyboard in it is handed back.
+    useLayoutEffect(() => () => {
+        if (root.current?.contains(root.current.ownerDocument.activeElement) === true) {
+            editor.focus();
+        }
+    }, [editor]);
+    const failure = state.failed ?? state.captureFailed;
     const label = compiled.kind === 'invalid'
         ? t('find.invalid')
-        : state.noSelection
-            ? t('find.noSelection')
-            : t('find.count', { total: formatNumber(state.count), current: state.current === null ? '0' : formatNumber(state.current + 1) });
-    return (_jsxs("div", { className: `adecore-editor-find ${className ?? ''}`, role: "search", "aria-label": t('find.label'), children: [_jsxs("div", { className: "adecore-editor-find-row", children: [_jsx("input", { type: "text", "aria-label": t('find.label'), value: query.text, onChange: (event) => setQuery({ ...query, text: event.target.value }), onKeyDown: (event) => {
+        : state.replaceFailed !== undefined
+            ? t(`find.replace.failed.${state.replaceFailed}`, {
+                edits: formatNumber(MAX_REPLACEMENT_PAGE),
+                characters: formatNumber(MAX_REPLACEMENT_CHARACTERS)
+            })
+            : failure !== undefined
+                ? t(`find.failed.${failure}`)
+                : state.searching
+                    ? t('find.searching')
+                    : state.large
+                        ? t('find.large')
+                        : state.noSelection
+                            ? t('find.noSelection')
+                            : state.replaced !== undefined
+                                ? t('find.replaced', { count: formatNumber(state.replaced) })
+                                : state.limited && state.current === null
+                                    ? t('find.countMore', { total: formatNumber(state.count) })
+                                    : t(state.limited ? 'find.countLimited' : 'find.count', {
+                                        total: formatNumber(state.count),
+                                        current: state.current === null ? '0' : formatNumber(state.current + 1)
+                                    });
+    return (_jsxs("div", { ref: root, className: `adecore-editor-find ${className ?? ''}`, role: "search", "aria-label": t('find.label'), onKeyDown: (event) => {
+            if (event.key === 'Escape' && !event.nativeEvent.isComposing) {
+                event.preventDefault();
+                editor.endFind();
+                editor.setReplacePreview(null);
+                onClose?.();
+                editor.focus();
+            }
+        }, children: [_jsxs("div", { className: "adecore-editor-find-row", children: [_jsx("input", { type: "text", "aria-label": t('find.label'), value: query.text, onChange: (event) => setQuery({ ...query, text: event.target.value }), onKeyDown: (event) => {
                             if (event.nativeEvent.isComposing) {
                                 return;
                             }
@@ -35,10 +70,5 @@ export function FindReplace({ editor, className, onClose }) {
                                 event.preventDefault();
                                 editor.findStep(event.shiftKey ? -1 : 1);
                             }
-                            if (event.key === 'Escape') {
-                                event.preventDefault();
-                                onClose?.();
-                                editor.focus();
-                            }
-                        } }), _jsx("output", { "aria-live": "polite", children: label }), _jsx(Button, { size: "xs", onClick: () => editor.findStep(-1), children: t('find.previous') }), _jsx(Button, { size: "xs", onClick: () => editor.findStep(1), children: t('find.next') })] }), _jsx("div", { className: "adecore-editor-find-row", children: ['caseSensitive', 'wholeWord', 'regex', 'inSelection'].map((option) => (_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: query[option] === true, onChange: (event) => setQuery({ ...query, [option]: event.target.checked }) }), t(`find.${option}`)] }, option))) }), _jsxs("div", { className: "adecore-editor-find-row", children: [_jsx("input", { type: "text", "aria-label": t('find.replace.label'), value: replacement, onChange: (event) => setReplacement(event.target.value) }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: preserveCase, onChange: (event) => setPreserveCase(event.target.checked) }), t('find.replace.preserveCase')] }), _jsx(Button, { size: "xs", onClick: () => editor.replace(replacement, { preserveCase }), children: t('find.replace.one') }), _jsx(Button, { size: "xs", onClick: () => editor.replaceAll(replacement, { preserveCase }), children: t('find.replace.allLabel') })] })] }));
+                        } }), _jsx("output", { "aria-live": "polite", children: label }), _jsx(Button, { size: "xs", onClick: () => editor.findStep(-1), children: t('find.previous') }), _jsx(Button, { size: "xs", onClick: () => editor.findStep(1), children: t('find.next') })] }), _jsx("div", { className: "adecore-editor-find-row", children: ['caseSensitive', 'wholeWord', 'regex', 'inSelection'].map((option) => (_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: query[option] === true, onChange: (event) => setQuery({ ...query, [option]: event.target.checked }) }), t(`find.${option}`)] }, option))) }), _jsxs("div", { className: "adecore-editor-find-row", children: [_jsx("input", { type: "text", "aria-label": t('find.replace.label'), value: replacement, onChange: (event) => setReplacement(event.target.value) }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: preserveCase, onChange: (event) => setPreserveCase(event.target.checked) }), t('find.replace.preserveCase')] }), _jsx(Button, { size: "xs", disabled: state.searching === true, onClick: () => editor.replace(replacement, { preserveCase }), children: t('find.replace.one') }), _jsx(Button, { size: "xs", disabled: state.searching === true, onClick: () => void editor.replaceAllAsync(replacement, { preserveCase }), children: t('find.replace.allLabel') })] })] }));
 }

package/dist/HoverCard.js

@@ -46,8 +46,8 @@ export function HoverCard({ language, problems, info, anchor, position }) {
     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();
                             void language.navigation.goToName(name, anchor, name === (declared ?? info.word) ? info.definition : null);
-                        } }), _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: () => {
+                        } }), 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)))] }));
 }

package/dist/LanguagePopups.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useReducer } from 'react';
 import { useStore } from 'zustand';
 import { AnchoredPopup } from './AnchoredPopup.js';
+import { CallHierarchyPanel } from './CallHierarchyPanel.js';
 import { CodeAuthorsCard } from './CodeAuthorsCard.js';
 import { CompletionPopup } from './CompletionPopup.js';
 import { EditorContextMenu } from './EditorContextMenu.js';
@@ -9,6 +10,7 @@ import { HoverCard } from './HoverCard.js';
 import { PeekPanel } from './PeekPanel.js';
 import { PickPopup } from './PickPopup.js';
 import { RenameCard } from './RenameCard.js';
+import { RenderedDocs } from './RenderedDocs.js';
 import { SymbolPicker } from './SymbolPicker.js';
 import { SignatureCard } from './SignatureCard.js';
 /*
@@ -24,6 +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 symbols = useStore(language.popups, (state) => state.symbols);
     const menu = useStore(language.popups, (state) => state.menu);
     const authors = useStore(language.popups, (state) => state.authors);
@@ -34,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: [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 }), 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 }) })), 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 })] }));
 }

package/dist/Markdown.d.ts

@@ -1,3 +1,4 @@
-export declare function Markdown({ text }: {
+export declare function Markdown({ text, images }: {
     text: string;
+    images?: boolean;
 }): import("react").JSX.Element;

package/dist/Markdown.js

@@ -1,7 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ReactMarkdown from 'react-markdown';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown, {} from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkBreaks from 'remark-breaks';
-export function Markdown({ text }) {
-    return (_jsx("div", { className: "adecore-editor-markdown", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, remarkBreaks], children: text }) }));
+/* An image becomes its alt text, so a comment cannot make the editor fetch a page of its choosing. */
+const WITHOUT_IMAGES = {
+    img: ({ alt }) => _jsx(_Fragment, { children: alt ?? '' })
+};
+export function Markdown({ text, images = true }) {
+    return (_jsx("div", { className: "adecore-editor-markdown", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, remarkBreaks], components: images ? undefined : WITHOUT_IMAGES, children: text }) }));
 }

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