@adecore/editor-react 0.22.0 → 0.23.0

package/dist/PickPopup.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef } from 'react';
+import { useId, useLayoutEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { PathText } from './PathText.js';
 import { placePopup } from './popup-placement.js';
@@ -12,6 +12,7 @@ function PreviewLines({ preview }) {
  * the focus from the editor, so the keys keep going to it while the list is open.
  */
 export function PickPopup({ language, view, rect }) {
+    const listId = useId();
     const card = useRef(null);
     const activeRow = useRef(null);
     // Every render: the character moves with the scroll, and the list changes size with its preview.
@@ -29,5 +30,17 @@ export function PickPopup({ language, view, rect }) {
     useLayoutEffect(() => {
         activeRow.current?.scrollIntoView({ block: 'nearest' });
     }, [view.active]);
-    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", { 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", { 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);
+    const optionIds = new Map();
+    for (const group of view.groups) {
+        for (const row of group.rows) {
+            optionIds.set(row.id, `${listId}-option-${optionIds.size}`);
+        }
+    }
+    const activeId = optionIds.get(view.active);
+    // 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("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);
 }

package/dist/RenameCard.js

@@ -35,11 +35,16 @@ function Hints({ view, active, onPick }) {
 function Preview({ language, view }) {
     const { t } = useTranslation('editor');
     const folder = language.project.folder;
-    return (_jsxs("div", { className: "flex w-[520px] max-w-full flex-col", onPointerDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "max-h-[320px] overflow-y-auto", children: view.files.map((file) => {
-                    const path = fileUriToPath(file.uri);
-                    const shown = path === null ? file.uri : relativeTo(path, folder);
-                    return (_jsxs("div", { className: "border-b border-border last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 text-xs", children: [_jsx("span", { className: "font-medium", children: path === null ? shown : basenameOf(path) }), _jsx("span", { className: "min-w-0 truncate text-text-faint", children: shown })] }), _jsx("div", { className: "flex flex-col gap-px px-1 pb-1.5 font-mono text-code", children: file.rows.map((row) => (_jsxs("div", { className: "flex flex-col gap-px", children: [_jsxs("div", { className: "flex gap-2 rounded-sm bg-status-error/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "w-8 shrink-0 text-right text-text-faint", children: row.line }), _jsx("span", { className: "min-w-0 truncate", children: row.before })] }), _jsxs("div", { className: "flex gap-2 rounded-sm bg-status-idle/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "w-8 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: row.after })] })] }, row.line))) })] }, file.uri));
-                }) }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border p-2", children: [_jsx(Button, { size: "xs", variant: "ghost", onClick: () => language.rename.cancel(), children: t('language.rename.cancel') }), _jsx(Button, { size: "xs", variant: "primary", onClick: () => void language.rename.confirm(), children: t('language.rename.apply') })] })] }));
+    const operations = view.operations ?? [];
+    const shownPath = (uri) => {
+        const path = fileUriToPath(uri);
+        return path === null ? uri : relativeTo(path, folder);
+    };
+    return (_jsxs("div", { className: "flex w-[520px] max-w-full flex-col", onPointerDown: (event) => event.preventDefault(), children: [_jsxs("div", { className: "max-h-[320px] overflow-y-auto", children: [view.files.map((file) => {
+                        const path = fileUriToPath(file.uri);
+                        const shown = path === null ? file.uri : relativeTo(path, folder);
+                        return (_jsxs("div", { className: "border-b border-border last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 text-xs", children: [_jsx("span", { className: "font-medium", children: path === null ? shown : basenameOf(path) }), _jsx("span", { className: "min-w-0 truncate text-text-faint", children: shown })] }), _jsx("div", { className: "flex flex-col gap-px px-1 pb-1.5 font-mono text-code", children: file.rows.map((row) => (_jsxs("div", { className: "flex flex-col gap-px", children: [_jsxs("div", { className: "flex gap-2 rounded-sm bg-status-error/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "w-8 shrink-0 text-right text-text-faint", children: row.line }), _jsx("span", { className: "min-w-0 truncate", children: row.before })] }), _jsxs("div", { className: "flex gap-2 rounded-sm bg-status-idle/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "w-8 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: row.after })] })] }, row.line))) })] }, file.uri));
+                    }), operations.length > 0 && (_jsx("div", { className: "flex flex-col gap-px border-b border-border px-3 py-1.5 text-xs last:border-b-0", children: operations.map((operation, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "shrink-0 font-medium", children: t(`language.rename.operations.${operation.kind}`) }), _jsxs("span", { className: "min-w-0 truncate text-text-faint", children: [shownPath(operation.uri), operation.newUri === undefined ? '' : ` \u2192 ${shownPath(operation.newUri)}`] })] }, `${operation.kind}:${operation.uri}:${index}`))) }))] }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border p-2", children: [_jsx(Button, { size: "xs", variant: "ghost", onClick: () => language.rename.cancel(), children: t('language.rename.cancel') }), _jsx(Button, { size: "xs", variant: "primary", onClick: () => void language.rename.confirm(), children: t('language.rename.apply') })] })] }));
 }
 /*
  * The rename of a symbol: an input over the symbol itself, and under it either the count of its places with

package/dist/RenderedDocs.d.ts

@@ -0,0 +1,9 @@
+import type { EditorLanguage } from './editor-language.ts';
+import type { RenderedDocEntry } from './rendered-docs.ts';
+export declare function RenderedDocBlock({ language, entry }: {
+    language: EditorLanguage;
+    entry: RenderedDocEntry;
+}): import("react").JSX.Element;
+export declare function RenderedDocs({ language }: {
+    language: EditorLanguage;
+}): import("react").JSX.Element;

package/dist/RenderedDocs.js

@@ -0,0 +1,84 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { useSyncExternalStore } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DOC_LINK_PREFIX, sectionsOf } from './doc-comment-model.js';
+import { markdownParts } from './hover-content.js';
+import { Signature } from './HoverSections.js';
+import { shikiLanguageOf } from './language-ids.js';
+import { Markdown } from './Markdown.js';
+const LINK = /\[([^\]]*)\]\(#doc-link:[^)]*\)/g;
+const KNOWN = new Set([
+    'deprecated',
+    'template',
+    'param',
+    'property',
+    'type',
+    'var',
+    'return',
+    'yield',
+    'throws',
+    'see',
+    'example',
+    'since',
+    'version',
+    'author'
+]);
+/* Code in the editor's face, with a type fainter than a name. */
+function Code({ children, faint = false }) {
+    return _jsx("code", { className: `font-mono text-code break-words ${faint ? 'text-text-faint' : 'text-text'}`, children: children });
+}
+/* Markdown prose and fenced code as the hover draws them: the blocks in the code face, the rest muted. */
+function Prose({ text, language, linkable, compact = false }) {
+    const plain = linkable ? text : text.replace(LINK, '$1');
+    return (_jsx(_Fragment, { children: markdownParts(plain).map((part, index) => part.kind === 'code' ? (_jsx("div", { className: "rounded-md bg-surface-sunken px-2 py-1.5", children: _jsx(Signature, { code: part.block.code, language: part.block.language === 'text' ? language : part.block.language }) }, index)) : (_jsx("div", { className: `[&_.adecore-editor-markdown]:text-xs ${compact ? '[&_p]:my-0' : '[&_p]:my-1'}`, children: _jsx(Markdown, { text: part.text, images: false }) }, index))) }));
+}
+/* A value of a tag, in the second column of the table; `spaced` opens a new section with more room above. */
+function TagRow({ tag, language, linkable, spaced }) {
+    const target = tag.name === 'see' && tag.subject !== null ? tag.subject : null;
+    const link = target === null ? null : /^https?:\/\//i.test(target) ? `[${target}](${target})` : `[\`${target}\`](${DOC_LINK_PREFIX}${encodeURIComponent(target)})`;
+    return (_jsx("dd", { className: `col-start-2 m-0 flex min-w-0 flex-wrap items-baseline gap-x-2 ${spaced ? 'mt-1' : ''}`, children: tag.name === 'example' ? (_jsx("div", { className: "w-full rounded-md bg-surface-sunken px-2 py-1.5", children: _jsx(Signature, { code: tag.text, language: language }) })) : (_jsxs(_Fragment, { children: [tag.subject !== null && target === null && _jsx(Code, { children: tag.subject }), tag.type !== null && _jsx(Code, { faint: true, children: tag.type }), (link !== null || tag.text !== '') && (_jsx("div", { className: "min-w-0 grow basis-48 text-text", children: _jsx(Prose, { text: [link, tag.text].filter((part) => part !== null && part !== '').join(' '), language: language, linkable: linkable, compact: true }) }))] })) }));
+}
+export function RenderedDocBlock({ language, entry }) {
+    const { t } = useTranslation('editor');
+    const feature = language.renderedDocs;
+    const { description, tags } = entry.parsed;
+    const highlighter = shikiLanguageOf(language.languageId);
+    const linkable = feature.canFollow;
+    const sections = sectionsOf(tags);
+    const deprecated = sections.find((section) => section.name === 'deprecated');
+    const shown = sections.filter((section) => section.name !== 'deprecated');
+    // One handler for every link, since the links are made by the Markdown renderer and not by us.
+    const follow = (event) => {
+        const anchor = event.target.closest('a');
+        if (anchor === null) {
+            return;
+        }
+        event.preventDefault();
+        const mod = language.apple ? event.metaKey : event.ctrlKey;
+        const href = anchor.getAttribute('href') ?? '';
+        if (!mod) {
+            return;
+        }
+        if (href.startsWith(DOC_LINK_PREFIX)) {
+            feature.follow(decodeURIComponent(href.slice(DOC_LINK_PREFIX.length)), entry.comment);
+        }
+        else if (/^(https?:|mailto:)/i.test(href)) {
+            window.open(href, '_blank', 'noopener,noreferrer');
+        }
+    };
+    return (_jsxs("div", { className: "adecore-rendered-doc flex max-w-[520px] flex-col gap-1.5 py-1 font-sans text-xs/[18px] text-text select-text", onClick: follow, children: [deprecated !== undefined && (_jsxs("div", { className: "border-l-2 border-status-error pl-2 text-text-muted", children: [_jsx("span", { className: "font-medium text-status-error", children: t('language.docs.deprecated') }), deprecated.tags.some((tag) => tag.text !== '') && (_jsx(Prose, { text: deprecated.tags.map((tag) => tag.text).join(' '), language: highlighter, linkable: linkable }))] })), description !== '' && (_jsx("div", { className: "text-text", children: _jsx(Prose, { text: description, language: highlighter, linkable: linkable }) })), shown.length > 0 && (_jsx("dl", { className: "m-0 grid grid-cols-[max-content_minmax(0,1fr)] items-baseline gap-x-3 gap-y-0.5", children: shown.map((section, row) => [
+                    _jsx("dt", { className: `col-start-1 font-medium text-text-muted ${row > 0 ? 'mt-1' : ''}`, children: KNOWN.has(section.name) ? t(`language.docs.tags.${section.name}`) : `${section.name}:` }, `${section.name}:label`),
+                    ...section.tags.map((tag, index) => (_jsx(TagRow, { tag: tag, language: highlighter, linkable: linkable, spaced: row > 0 && index === 0 }, `${section.name}:${index}`)))
+                ]) }))] }));
+}
+/*
+ * The documentation comments the editor drew as rows, filled with their formatted text. It portals into
+ * the element the editor made for each row, so the editor decides what is in view; a comment is parsed
+ * only once its row is. Links in the text are followed with Cmd (Ctrl elsewhere) held, as definitions are.
+ */
+export function RenderedDocs({ language }) {
+    const feature = language.renderedDocs;
+    useSyncExternalStore(feature.subscribe, feature.getVersion, feature.getVersion);
+    return _jsx(_Fragment, { children: feature.entries().map((entry) => createPortal(_jsx(RenderedDocBlock, { language: language, entry: entry }), entry.container, entry.id)) });
+}

package/dist/SplitDiffView.d.ts

@@ -0,0 +1,9 @@
+import type { DiffSplit } from '@adecore/merge';
+import type { DiffViewProps } from './DiffView.tsx';
+interface SplitViewProps extends DiffViewProps {
+    display: DiffSplit;
+    unfold(id: number): void;
+    blocked: ReadonlySet<number>;
+}
+export declare function SplitDiffView({ engine, document, display, unfold, blocked, theme, tokens, wrap, fill, maxHeight, label, className, ref, onMount }: SplitViewProps): import("react").JSX.Element;
+export {};

package/dist/SplitDiffView.js

@@ -0,0 +1,276 @@
+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 { DiffOverlays } from './diff-overlays.js';
+import { wordMarks } from './diff-wordmarks.js';
+import { RowHost, LineActionHost } from './row-host.js';
+import { splitAlignment } from './split-alignment.js';
+import { SplitScroll } from './split-scroll.js';
+const SIDES = ['old', 'new'];
+export function SplitDiffView({ 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 oldElement = useRef(null);
+    const newElement = useRef(null);
+    const current = useRef({ display, tokens, theme, wrap, label });
+    const applied = useRef({ theme, wrap, label });
+    const [failure, setFailure] = useState(null);
+    const [mounted, setMounted] = useState(null);
+    const [height, setHeight] = useState(0);
+    useLayoutEffect(() => {
+        current.current = { display, tokens, theme, wrap, label };
+    });
+    useLayoutEffect(() => {
+        const oldHost = oldElement.current;
+        const newHost = newElement.current;
+        if (oldHost === null || newHost === null) {
+            return;
+        }
+        const initial = current.current;
+        applied.current = { theme: initial.theme, wrap: initial.wrap, label: initial.label };
+        const mount = (side, host) => {
+            const initial = current.current;
+            const editor = engine.mount(host, {
+                text: initial.display[side].text,
+                theme: initial.theme,
+                wrap: initial.wrap,
+                label: initial.label,
+                readOnly: true,
+                guides: false,
+                folding: false,
+                foldOutline: 'off',
+                handBack: [parseChord('Mod+Enter')]
+            });
+            editor.setBlocks([]);
+            editor.setLineTokens((line) => {
+                const row = current.current.display[side].rows[line];
+                return row === undefined ? null : current.current.tokens?.get(side, row[side].index);
+            });
+            return { engine, editor, rows: new RowHost(editor, 'diff-alignment'), actions: new LineActionHost(editor, 'diff-status') };
+        };
+        const old = mount('old', oldHost);
+        let fresh;
+        try {
+            fresh = mount('new', newHost);
+        }
+        catch (error) {
+            old.editor.dispose();
+            throw error;
+        }
+        const sides = { old, new: fresh };
+        let stopped = false;
+        let pending = false;
+        let failed = false;
+        const scroll = new SplitScroll({ old: old.editor, new: fresh.editor });
+        let aligning = false;
+        let updating = false;
+        const fail = (error) => {
+            failed = true;
+            setFailure({ error });
+        };
+        const measure = () => setHeight(Math.max(sides.old.editor.getContentHeight(), sides.new.editor.getContentHeight()));
+        const align = () => {
+            if (pending || stopped || failed) {
+                return;
+            }
+            pending = true;
+            // Intrinsic measurements arrive after each render; align both editors before the next paint.
+            queueMicrotask(() => {
+                pending = false;
+                if (stopped || failed) {
+                    return;
+                }
+                aligning = true;
+                try {
+                    const rows = splitAlignment(current.current.display.aligned, (line) => sides.old.editor.getLineHeight(line), (line) => sides.new.editor.getLineHeight(line));
+                    sides.old.rows.set(rows.old);
+                    sides.new.rows.set(rows.new);
+                }
+                catch (error) {
+                    fail(error);
+                    return;
+                }
+                finally {
+                    aligning = false;
+                }
+                try {
+                    measure();
+                    scroll.sync();
+                }
+                catch (error) {
+                    fail(error);
+                }
+            });
+        };
+        const update = (run) => {
+            updating = true;
+            try {
+                run();
+            }
+            finally {
+                updating = false;
+            }
+            align();
+        };
+        const stops = SIDES.flatMap((side) => [
+            sides[side].editor.onLineHeights(align),
+            sides[side].editor.onViewChange(() => {
+                if (stopped || failed || aligning || updating) {
+                    return;
+                }
+                try {
+                    measure();
+                    scroll.changed(side);
+                }
+                catch (error) {
+                    fail(error);
+                }
+            })
+        ]);
+        setMounted({ old: sides.old, new: sides.new, align, update, drive: (side) => scroll.drive(side) });
+        measure();
+        return () => {
+            stopped = true;
+            for (const stop of stops) {
+                stop();
+            }
+            for (const side of SIDES) {
+                sides[side].editor.dispose();
+            }
+        };
+    }, [engine]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.old.engine !== engine) {
+            return;
+        }
+        mounted.update(() => {
+            for (const side of SIDES) {
+                const { editor, actions } = mounted[side];
+                editor.setText(display[side].text);
+                editor.setLineNumbers((line) => {
+                    const row = current.current.display[side].rows[line];
+                    return row === undefined ? null : String(row[side].number);
+                });
+                const highlights = [];
+                for (const [index, row] of display[side].rows.entries()) {
+                    if (row.change === 'context') {
+                        continue;
+                    }
+                    highlights.push({
+                        startLine: index + 1,
+                        endLine: index + 1,
+                        color: side === 'old' ? '--editor-deleted' : '--editor-added',
+                        bar: side === 'old' ? 'hatched' : 'solid',
+                        emphasis: [emphasis[side].get(row[side].index) ?? []]
+                    });
+                }
+                editor.setLineHighlights(highlights);
+                editor.setChangeMarks(highlights.map((highlight) => ({ startLine: highlight.startLine, endLine: highlight.endLine, kind: side === 'old' ? 'deleted' : 'added' })));
+                actions.set(display[side].rows.flatMap((row, line) => (row.noNewline === undefined ? [] : [{ id: `no-newline-${line}`, line }])));
+            }
+        });
+    }, [mounted, engine, display, emphasis]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.old.engine !== engine) {
+            return;
+        }
+        for (const side of SIDES) {
+            mounted[side].editor.setLineLabels((line) => {
+                const row = display[side].rows[line];
+                if (row === undefined || row.change === 'context') {
+                    return null;
+                }
+                return t(side === 'old' ? 'diff.removed' : 'diff.added', { number: row[side].number });
+            });
+        }
+    }, [mounted, engine, display, t]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.old.engine !== engine) {
+            return;
+        }
+        mounted.update(() => {
+            for (const side of SIDES) {
+                const previous = applied.current;
+                if (previous.theme !== theme) {
+                    mounted[side].editor.setTheme(theme);
+                }
+                if (previous.wrap !== wrap) {
+                    mounted[side].editor.setWrap(wrap);
+                }
+                if (previous.label !== label) {
+                    mounted[side].editor.setLabel(label);
+                }
+            }
+        });
+        applied.current = { theme, wrap, label };
+    }, [mounted, engine, theme, wrap, label]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.old.engine !== engine) {
+            return;
+        }
+        const refresh = () => {
+            for (const side of SIDES) {
+                mounted[side].editor.setLineTokens((line) => {
+                    const row = current.current.display[side].rows[line];
+                    return row === undefined ? null : current.current.tokens?.get(side, row[side].index);
+                });
+            }
+        };
+        refresh();
+        const ownerWindow = oldElement.current?.ownerDocument.defaultView;
+        let frame;
+        let pending = false;
+        let stopped = false;
+        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, display, tokens]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.old.engine !== engine) {
+            return;
+        }
+        const stops = SIDES.map((side) => onMount?.(mounted[side].editor, side));
+        return () => {
+            for (const stop of stops) {
+                stop?.();
+            }
+        };
+    }, [mounted, engine, onMount]);
+    const limit = maxHeight !== undefined && Number.isFinite(maxHeight) && maxHeight > 0 ? maxHeight : Infinity;
+    if (failure !== null) {
+        throw failure.error;
+    }
+    return (_jsx("div", { className: `adecore-editor-diff adecore-editor-diff-split ${className ?? ''}`, ref: ref, role: "group", "aria-label": label, "data-scroll": fill || height > limit, style: { height: fill ? '100%' : Math.min(height, limit) }, children: SIDES.map((side) => (_jsxs("div", { className: "adecore-editor-diff-side", "data-side": side, role: "group", "aria-label": t(`diff.${side}Side`), onWheelCapture: () => {
+                mounted?.drive(side);
+            }, onFocusCapture: () => {
+                mounted?.drive(side);
+            }, onPointerDownCapture: () => {
+                mounted?.drive(side);
+            }, onKeyDownCapture: () => {
+                mounted?.drive(side);
+            }, children: [_jsx("div", { ref: side === 'old' ? oldElement : newElement, className: "adecore-editor-diff-surface" }), mounted !== null && mounted[side].engine === engine && (_jsx(DiffOverlays, { mounted: mounted[side], display: display[side], unfold: unfold, blocked: blocked }))] }, side))) }));
+}

package/dist/SymbolPicker.d.ts

@@ -1,5 +1,8 @@
 import type { EditorLanguage } from './editor-language.ts';
 import type { SymbolsView } from './popups.ts';
+export declare function SymbolBadge({ kind }: {
+    kind: number;
+}): import("react").JSX.Element;
 export declare function SymbolPicker({ language, view }: {
     language: EditorLanguage;
     view: SymbolsView;

package/dist/SymbolPicker.js

@@ -15,7 +15,8 @@ const TONES = {
     other: 'bg-surface-hover text-text-muted'
 };
 const SEARCH_DELAY_MS = 200;
-function Badge({ kind }) {
+/* The letter badge of a symbol kind, tinted by what the symbol is. */
+export function SymbolBadge({ kind }) {
     return (_jsx("span", { className: `grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs font-semibold ${TONES[toneOfKind(kind)]}`, children: letterOfKind(kind) }));
 }
 /*
@@ -94,14 +95,14 @@ export function SymbolPicker({ language, view }) {
                         }, onKeyDown: onKeyDown, onBlur: () => language.symbolPicker.close() }), _jsx("span", { className: "shrink-0 text-xs text-text-faint", children: language.shortcuts.goToSymbol === null ? '' : formatShortcut(language.shortcuts.goToSymbol, language.apple) })] }), _jsxs("div", { role: "listbox", className: "max-h-[320px] overflow-y-auto p-1", children: [mode.mode === 'line' && (_jsx("div", { className: "px-2 py-1.5 text-xs text-text-muted", children: mode.line === null ? t('language.symbols.lineHint') : t('language.symbols.goToLine', { line: formatNumber(mode.line) }) })), mode.mode === 'workspace' &&
                         places.map((place, index) => {
                             const path = fileUriToPath(place.uri);
-                            return (_jsxs("button", { ref: index === active ? activeRow : undefined, type: "button", role: "option", "aria-selected": index === active, "data-active": index === active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => choose(index), children: [_jsx(Badge, { kind: place.kind }), _jsx("span", { className: "shrink-0", children: place.name }), _jsx("span", { className: "min-w-0 truncate font-mono text-text-faint", children: place.container }), _jsxs("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: [path === null ? '' : basenameOf(path), ":", formatNumber(place.line + 1)] })] }, place.id));
+                            return (_jsxs("button", { ref: index === active ? activeRow : undefined, type: "button", role: "option", "aria-selected": index === active, "data-active": index === active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => choose(index), children: [_jsx(SymbolBadge, { kind: place.kind }), _jsx("span", { className: "shrink-0", children: place.name }), _jsx("span", { className: "min-w-0 truncate font-mono text-text-faint", children: place.container }), _jsxs("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: [path === null ? '' : basenameOf(path), ":", formatNumber(place.line + 1)] })] }, place.id));
                         }), mode.mode === 'symbol' &&
                         groups.map((group) => {
                             const start = offset;
                             offset += group.entries.length;
                             return (_jsxs("div", { role: "group", children: [_jsx("div", { className: "px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint", children: t(`language.symbols.groups.${group.group}`) }), group.entries.map((entry, index) => {
                                         const position = start + index;
-                                        return (_jsxs("button", { ref: position === active ? activeRow : undefined, type: "button", role: "option", "aria-selected": position === active, "data-active": position === active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => choose(position), children: [_jsx(Badge, { kind: entry.kind }), _jsx("span", { className: "shrink-0", children: entry.name }), _jsx("span", { className: "min-w-0 truncate font-mono text-text-faint", children: entry.detail }), entry.container !== '' && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: entry.container }), _jsx("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: formatNumber(entry.line + 1) })] }, entry.id));
+                                        return (_jsxs("button", { ref: position === active ? activeRow : undefined, type: "button", role: "option", "aria-selected": position === active, "data-active": position === active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => choose(position), children: [_jsx(SymbolBadge, { kind: entry.kind }), _jsx("span", { className: "shrink-0", children: entry.name }), _jsx("span", { className: "min-w-0 truncate font-mono text-text-faint", children: entry.detail }), entry.container !== '' && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: entry.container }), _jsx("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: formatNumber(entry.line + 1) })] }, entry.id));
                                     })] }, group.group));
                         }), mode.mode === 'symbol' && flat.length === 0 && (_jsx("div", { className: "px-2 py-3 text-center text-xs text-text-muted", children: t('language.symbols.none') })), mode.mode === 'workspace' && places.length === 0 && (_jsx("div", { className: "px-2 py-3 text-center text-xs text-text-muted", children: mode.text === '' ? t('language.symbols.workspaceHint') : t('language.symbols.none') }))] }), _jsxs("div", { className: "flex items-center gap-3 border-t border-border px-3 py-1.5 text-xs whitespace-nowrap text-text-faint", children: [_jsxs("span", { children: ["\u2191\u2193 ", t('language.symbols.navigate')] }), _jsxs("span", { children: ["\u21B5 ", t('language.symbols.open')] }), _jsxs("button", { type: "button", className: "ml-auto hover:text-text", onClick: () => setInput('#'), children: ["# ", t('language.symbols.workspace')] }), _jsxs("button", { type: "button", className: "hover:text-text", onClick: () => setInput(':'), children: [": ", t('language.symbols.line')] })] })] }), document.body);
 }

package/dist/call-hierarchy-model.d.ts

@@ -0,0 +1,52 @@
+import type { CallHierarchyIncomingCall, CallHierarchyItem, CallHierarchyOutgoingCall, Range } from '@adecore/lsp';
+export type CallDirection = 'incoming' | 'outgoing';
+export declare const CALL_LEVEL_LIMIT = 50;
+export type CallLoad = 'idle' | 'loading' | 'loaded' | 'failed';
+export interface CallNode {
+    readonly id: string;
+    readonly parent: string | null;
+    readonly level: number;
+    readonly item: CallHierarchyItem;
+    readonly sites: readonly Range[];
+    readonly siteUri: string | null;
+    readonly expanded: boolean;
+    readonly load: CallLoad;
+    readonly error: string | null;
+    readonly children: readonly string[];
+    readonly shown: number;
+}
+export type CallRow = {
+    readonly kind: 'node';
+    readonly id: string;
+    readonly level: number;
+    readonly item: CallHierarchyItem;
+    readonly expanded: boolean;
+    readonly load: CallLoad;
+    readonly sites: number;
+    readonly leaf: boolean;
+    readonly position: number;
+    readonly size: number;
+} | {
+    readonly kind: 'status';
+    readonly id: string;
+    readonly parent: string;
+    readonly level: number;
+    readonly status: 'loading' | 'empty' | 'failed';
+    readonly message: string | null;
+} | {
+    readonly kind: 'more';
+    readonly id: string;
+    readonly level: number;
+    readonly parent: string;
+    readonly hidden: number;
+};
+export declare function statusIdOf(parent: string): string;
+export declare function moreIdOf(parent: string): string;
+export declare function rootsOf(items: readonly CallHierarchyItem[]): CallNode[];
+export declare function childrenOf(direction: CallDirection, parent: CallNode, calls: readonly (CallHierarchyIncomingCall | CallHierarchyOutgoingCall)[]): CallNode[];
+export declare function rowsOf(nodes: ReadonlyMap<string, CallNode>, roots: readonly string[]): CallRow[];
+export declare function stepsOf(rows: readonly CallRow[]): CallRow[];
+export declare function targetOf(node: CallNode, site?: number): {
+    uri: string;
+    range: Range;
+};

package/dist/call-hierarchy-model.js

@@ -0,0 +1,99 @@
+/* The most calls of one level that are drawn at once; the rest wait behind a row that shows more. */
+export const CALL_LEVEL_LIMIT = 50;
+/* The id of the status line under a node. */
+export function statusIdOf(parent) {
+    return `${parent}:status`;
+}
+/* The id of the line that shows more calls under a node. */
+export function moreIdOf(parent) {
+    return `${parent}:more`;
+}
+/* The tree's roots, each one a symbol the server prepared. */
+export function rootsOf(items) {
+    return items.map((item, index) => ({
+        id: `r${index}`,
+        parent: null,
+        level: 1,
+        item,
+        sites: [],
+        siteUri: null,
+        expanded: true,
+        load: 'idle',
+        error: null,
+        children: [],
+        shown: 0
+    }));
+}
+function compareItems(left, right) {
+    return left.name.localeCompare(right.name) || left.uri.localeCompare(right.uri) || left.range.start.line - right.range.start.line;
+}
+/*
+ * The children of a node made from the calls a server returned, listed by name the way the symbols of a
+ * file are. The call sites of a caller are in its own file; those of a callee are in the file of the node
+ * that was asked about.
+ */
+export function childrenOf(direction, parent, calls) {
+    const entries = calls.map((call) => ({ item: 'from' in call ? call.from : call.to, sites: call.fromRanges }));
+    return entries
+        .sort((left, right) => compareItems(left.item, right.item))
+        .map((entry, index) => ({
+        id: `${parent.id}.${index}`,
+        parent: parent.id,
+        level: parent.level + 1,
+        item: entry.item,
+        sites: entry.sites,
+        siteUri: direction === 'incoming' ? entry.item.uri : parent.item.uri,
+        expanded: false,
+        load: 'idle',
+        error: null,
+        children: [],
+        shown: 0
+    }));
+}
+/* The lines the tree draws: every root, and under an expanded node its status, its calls and the row that shows more. */
+export function rowsOf(nodes, roots) {
+    const rows = [];
+    const visit = (id, position, size) => {
+        const node = nodes.get(id);
+        rows.push({
+            kind: 'node',
+            id,
+            level: node.level,
+            item: node.item,
+            expanded: node.expanded,
+            load: node.load,
+            sites: node.sites.length,
+            leaf: node.load === 'loaded' && node.children.length === 0,
+            position,
+            size
+        });
+        if (!node.expanded) {
+            return;
+        }
+        if (node.load === 'loading') {
+            rows.push({ kind: 'status', id: statusIdOf(id), parent: id, level: node.level + 1, status: 'loading', message: null });
+        }
+        else if (node.load === 'failed') {
+            rows.push({ kind: 'status', id: statusIdOf(id), parent: id, level: node.level + 1, status: 'failed', message: node.error });
+        }
+        else if (node.load === 'loaded' && node.children.length === 0) {
+            rows.push({ kind: 'status', id: statusIdOf(id), parent: id, level: node.level + 1, status: 'empty', message: null });
+        }
+        const shown = node.children.slice(0, node.shown);
+        shown.forEach((child, index) => visit(child, index + 1, node.children.length));
+        if (node.children.length > node.shown) {
+            rows.push({ kind: 'more', id: moreIdOf(id), level: node.level + 1, parent: id, hidden: node.children.length - node.shown });
+        }
+    };
+    roots.forEach((root, index) => visit(root, index + 1, roots.length));
+    return rows;
+}
+/* The rows a key can land on: symbols, and the row that shows more. */
+export function stepsOf(rows) {
+    return rows.filter((row) => row.kind !== 'status');
+}
+/* The place a node goes to: its first call site, or the symbol itself for a root. */
+export function targetOf(node, site = 0) {
+    const range = node.sites[site];
+    return range === undefined || node.siteUri === null ? { uri: node.item.uri, range: node.item.selectionRange } : { uri: node.siteUri, range };
+}