@adecore/editor-react 0.23.0 → 0.23.1

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/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/call-hierarchy-model.js

@@ -24,19 +24,13 @@ export function rootsOf(items) {
         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.
+ * The children of a node made from the calls a server returned, in the order the server gave them.
+ * 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) => ({
+    return entries.map((entry, index) => ({
         id: `${parent.id}.${index}`,
         parent: parent.id,
         level: parent.level + 1,

package/dist/call-hierarchy.js

@@ -4,7 +4,7 @@ import { PEEK_HEIGHT } from './peek.js';
 import { snippetOf } from './peek-model.js';
 import { isShortcut } from './shortcut-keys.js';
 import { messageOf } from './error-message.js';
-import { realTimers } from './timers.js';
+import { realTimers, revealRow } from './timers.js';
 const TOAST_ID = 'language-call-hierarchy';
 const PREPARE = 'textDocument/prepareCallHierarchy';
 /* The row the panel stands in is as tall as a peek's, plus the segmented control that is a pixel taller than the peek's title bar. */
@@ -226,8 +226,7 @@ export class CallHierarchyFeature {
         const view = this.language.popups.getState().callHierarchy ?? null;
         if (view !== null && view.container !== container) {
             this.language.popups.setState({ callHierarchy: { ...view, container } });
-            // The row opens under the caret line, which may sit at the bottom of the view with the tree below the fold. The element is in the page a turn later.
-            this.timers.set(() => container.scrollIntoView?.({ block: 'nearest' }), 0);
+            revealRow(this.timers, container);
         }
     }
     patch(id, change) {

package/dist/editor-language.js

@@ -85,7 +85,7 @@ export class EditorLanguage {
         this.codeActions = new CodeActionsFeature(this, timers);
         this.rename = new RenameFeature(this);
         this.navigation = new NavigationFeature(this);
-        this.peek = new PeekFeature(this);
+        this.peek = new PeekFeature(this, timers);
         this.callHierarchy = new CallHierarchyFeature(this, timers);
         this.symbolPicker = new SymbolPickerFeature(this);
         this.contextMenu = new ContextMenuFeature(this);

package/dist/host-types.d.ts

@@ -53,6 +53,8 @@ export interface LanguageHost {
     readonly files?: ProjectFiles;
     readonly apple?: boolean;
     readonly keymap?: Keymap;
+    readonly panelBodyHeight?: number;
+    onPanelResize?(height: number): void;
     openPlace?(place: Place): void;
     pathOfUri?(uri: string): string | null;
     serverNames?(uri: string): readonly string[];

package/dist/locales/en.json

@@ -82,6 +82,9 @@
                 "symbol": "Matches"
             }
         },
+        "panel": {
+            "resize": "Resize panel"
+        },
         "peek": {
             "unavailable": "No language server finds references in this file",
             "none": "No references found",

package/dist/locales/nl.json

@@ -82,6 +82,9 @@
                 "symbol": "Overeenkomsten"
             }
         },
+        "panel": {
+            "resize": "Paneel vergroten of verkleinen"
+        },
         "peek": {
             "unavailable": "Geen language server vindt referenties in dit bestand",
             "none": "Geen referenties gevonden",

package/dist/panel-size.d.ts

@@ -0,0 +1,6 @@
+export declare const PANEL_BODY_HEIGHT = 180;
+export declare const PANEL_BODY_MIN = 88;
+export declare const PANEL_KEY_STEP = 22;
+export declare function panelBodyMax(available: number): number;
+export declare function clampPanelBody(height: number, available?: number): number;
+export declare function availableHeightOf(container: HTMLElement | null): number;

package/dist/panel-size.js

@@ -0,0 +1,25 @@
+/* The height of the list-and-preview area of a peek or a call hierarchy, which is what a person drags; the bands and the title bar around it stay. */
+export const PANEL_BODY_HEIGHT = 180;
+/* Four rows of 22px, so a list never shrinks to nothing. */
+export const PANEL_BODY_MIN = 88;
+/* What the bands and the title bar take of the panel, which the share of the editor has to leave room for. */
+const PANEL_CHROME = 63;
+/* The share of the editor's height a panel may take, so the line it belongs to stays in view. */
+const PANEL_MAX_SHARE = 0.8;
+const PANEL_FALLBACK_AVAILABLE = 800;
+export const PANEL_KEY_STEP = 22;
+/* The tallest body for an editor that is `available` pixels high; never below the minimum, so a tiny editor still gets a usable panel. */
+export function panelBodyMax(available) {
+    return Math.max(PANEL_BODY_MIN, Math.floor(available * PANEL_MAX_SHARE) - PANEL_CHROME);
+}
+export function clampPanelBody(height, available = PANEL_FALLBACK_AVAILABLE) {
+    if (!Number.isFinite(height)) {
+        return PANEL_BODY_HEIGHT;
+    }
+    return Math.min(panelBodyMax(available), Math.max(PANEL_BODY_MIN, Math.round(height)));
+}
+/* The height of the editor's scrolling area around a panel's row; the fallback stands in where nothing is laid out. */
+export function availableHeightOf(container) {
+    const height = container?.closest('.se-viewport')?.clientHeight ?? 0;
+    return height > 0 ? height : PANEL_FALLBACK_AVAILABLE;
+}

package/dist/peek.d.ts

@@ -1,10 +1,12 @@
 import type { EditorPosition } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
 import type { PeekView } from './popups.ts';
+import { type Timers } from './timers.ts';
 export declare const PEEK_HEIGHT = 241;
 type PeekKind = PeekView['kind'];
 export declare class PeekFeature {
     private readonly language;
+    private readonly timers;
     private kind;
     private targets;
     private texts;
@@ -12,7 +14,7 @@ export declare class PeekFeature {
     private order;
     private line;
     private token;
-    constructor(language: EditorLanguage);
+    constructor(language: EditorLanguage, timers?: Timers);
     get isOpen(): boolean;
     open(position?: EditorPosition, kind?: PeekKind): Promise<void>;
     openDefinition(position?: EditorPosition): Promise<void>;

package/dist/peek.js

@@ -3,6 +3,7 @@ import { uniquePlaces } from './navigation.js';
 import { PEEK_READ_FILES, definitionSnippetOf, peekFilesOf, snippetOf } from './peek-model.js';
 import { isShortcut } from './shortcut-keys.js';
 import { messageOf } from './error-message.js';
+import { realTimers, revealRow } from './timers.js';
 const TOAST_ID = 'language-peek';
 /* The block as the panel draws it: a hatched band, the header, eight lines of code and a hatched band, until the editor has measured it. */
 export const PEEK_HEIGHT = 241;
@@ -20,6 +21,7 @@ function placeKey(location) {
  */
 export class PeekFeature {
     language;
+    timers;
     kind = 'references';
     /* The whole declaration of each place of a definition peek, where the server gave it. */
     targets = new Map();
@@ -28,8 +30,9 @@ export class PeekFeature {
     order = [];
     line = 0;
     token = 0;
-    constructor(language) {
+    constructor(language, timers = realTimers) {
         this.language = language;
+        this.timers = timers;
         const { editor } = language;
         const offs = [
             editor.onKeyDown((event) => {
@@ -179,6 +182,7 @@ export class PeekFeature {
         const view = this.language.popups.getState().peek;
         if (view !== null && view.container !== container) {
             this.language.popups.setState({ peek: { ...view, container } });
+            revealRow(this.timers, container);
         }
     }
     key(event) {

package/dist/project-language.d.ts

@@ -23,10 +23,14 @@ export declare class ProjectLanguage {
     readonly history: NavigationHistory;
     private readonly holders;
     private readonly files;
+    panelBodyHeight: number;
+    private readonly panelListeners;
     private pendingCaret;
     private lastPlace;
     private disposed;
     constructor(service: LanguageService, host?: LanguageHost);
+    onPanelBodyChange(listener: (height: number) => void): () => void;
+    resizePanelBody(height: number): void;
     pathOfLocation(uri: string): string | null;
     applyWorkspaceEdit(edit: WorkspaceEdit): Promise<ApplyWorkspaceEditResult>;
     willCreateFiles(targets: readonly FileOperationTarget[]): Promise<WorkspaceEdit | null>;

package/dist/project-language.js

@@ -5,6 +5,7 @@ import { NavigationHistory } from './navigation-history.js';
 import { ProjectProblems } from './project-problems.js';
 import { applyWorkspaceEdit } from './workspace-edit.js';
 import { relativeTo } from './paths.js';
+import { PANEL_BODY_HEIGHT } from './panel-size.js';
 /* Sends one editor's edits to the document, holding them until the document is open. */
 class DocumentSync {
     ready;
@@ -71,6 +72,9 @@ export class ProjectLanguage {
     history = new NavigationHistory();
     holders = new Map();
     files;
+    /* The body height of the peek and call hierarchy panels, shared by the editors of the project. */
+    panelBodyHeight;
+    panelListeners = new Set();
     pendingCaret = null;
     lastPlace = null;
     disposed = false;
@@ -80,8 +84,22 @@ export class ProjectLanguage {
         this.i18n = host.i18n ?? i18next;
         this.folder = host.folder ?? '';
         this.files = host.files ?? null;
+        this.panelBodyHeight = host.panelBodyHeight ?? PANEL_BODY_HEIGHT;
         this.problems = new ProjectProblems(service, (uri) => this.pathOfLocation(uri) ?? uri);
     }
+    /* Open panels of other editors of the project follow a resize. */
+    onPanelBodyChange(listener) {
+        this.panelListeners.add(listener);
+        return () => this.panelListeners.delete(listener);
+    }
+    resizePanelBody(height) {
+        if (height === this.panelBodyHeight) {
+            return;
+        }
+        this.panelBodyHeight = height;
+        this.panelListeners.forEach((listener) => listener(height));
+        this.host.onPanelResize?.(height);
+    }
     pathOfLocation(uri) {
         if (this.host.pathOfUri !== undefined) {
             return this.host.pathOfUri(uri);

package/dist/rendered-docs.d.ts

@@ -4,6 +4,7 @@ import { type ParsedDocComment } from './doc-comment-model.ts';
 import { type Timers } from './timers.ts';
 export interface RenderedDocsSettings {
     readonly renderDocComments: boolean;
+    readonly enabled?: boolean;
 }
 export interface RenderedDocEntry {
     readonly id: string;
@@ -15,6 +16,7 @@ export declare class RenderedDocsFeature {
     private readonly language;
     private readonly timers;
     private settings;
+    private enabled;
     private comments;
     private overrides;
     private readonly containers;

package/dist/rendered-docs.js

@@ -44,6 +44,7 @@ export class RenderedDocsFeature {
     language;
     timers;
     settings = { renderDocComments: false };
+    enabled = true;
     comments = [];
     overrides = [];
     containers = new Map();
@@ -113,11 +114,16 @@ export class RenderedDocsFeature {
     }
     /* Whether every documentation comment is drawn as text until a person switches it. Changing it puts every comment back under it. */
     configure(settings) {
-        if (settings.renderDocComments === this.settings.renderDocComments) {
+        const enabled = settings.enabled !== false;
+        if (settings.renderDocComments === this.settings.renderDocComments && enabled === this.enabled) {
             return;
         }
+        const sameRendering = settings.renderDocComments === this.settings.renderDocComments;
         this.settings = settings;
-        this.clearOverrides();
+        this.enabled = enabled;
+        if (!sameRendering) {
+            this.clearOverrides();
+        }
         this.publish();
     }
     /* The documentation comments of the document, from the last time it settled. */
@@ -132,7 +138,7 @@ export class RenderedDocsFeature {
     toggle() {
         this.settle();
         const comment = this.at(this.language.editor.getCaret().line);
-        if (comment === undefined || !this.canRender(comment)) {
+        if (!this.enabled || comment === undefined || !this.canRender(comment)) {
             return false;
         }
         this.setRendered(comment, !this.wantsRendered(comment));
@@ -142,7 +148,7 @@ export class RenderedDocsFeature {
     toggleAt(startLine) {
         this.settle();
         const comment = this.comments.find((candidate) => candidate.startLine === startLine);
-        if (comment === undefined || !this.canRender(comment)) {
+        if (!this.enabled || comment === undefined || !this.canRender(comment)) {
             return false;
         }
         this.setRendered(comment, !this.wantsRendered(comment));
@@ -186,7 +192,7 @@ export class RenderedDocsFeature {
         return comment.startLine > 0 || comment.endLine < this.language.editor.positionAt(Number.MAX_SAFE_INTEGER).line;
     }
     wantsRendered(comment) {
-        if (!this.canRender(comment)) {
+        if (!this.enabled || !this.canRender(comment)) {
             return false;
         }
         const start = startOf(comment);
@@ -325,7 +331,7 @@ export class RenderedDocsFeature {
             this.bump();
         }
         this.markerLines.clear();
-        const markers = this.comments.map((comment) => {
+        const markers = (this.enabled ? this.comments : []).map((comment) => {
             const id = `docs:${comment.startLine}`;
             this.markerLines.set(id, comment.startLine);
             const on = this.wantsRendered(comment);

package/dist/timers.d.ts

@@ -12,3 +12,4 @@ export declare class ManualTimers implements Timers {
     advance(milliseconds: number): void;
     get size(): number;
 }
+export declare function revealRow(timers: Timers, container: HTMLElement): void;

package/dist/timers.js

@@ -32,3 +32,7 @@ export class ManualTimers {
         return this.pending.size;
     }
 }
+/* Scrolls a row the editor opened under the caret line into view, which may sit at the bottom of the view with the row below the fold. The element is in the page a turn later. */
+export function revealRow(timers, container) {
+    timers.set(() => container.scrollIntoView?.({ block: 'nearest' }), 0);
+}

package/dist/use-panel-body.d.ts

@@ -0,0 +1,6 @@
+import type { EditorLanguage } from './editor-language.ts';
+export declare function usePanelBody(language: EditorLanguage): {
+    height: number;
+    set(height: number): void;
+    commit(height: number): void;
+};

package/dist/use-panel-body.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+import { clampPanelBody } from './panel-size.js';
+/* The body height of a panel, from the project that remembers it for the next one; `commit` hands it to the host. */
+export function usePanelBody(language) {
+    const { project } = language;
+    const [height, set] = useState(() => clampPanelBody(project.panelBodyHeight));
+    useEffect(() => project.onPanelBodyChange((value) => set(clampPanelBody(value))), [project]);
+    return {
+        height,
+        set,
+        commit: (value) => project.resizePanelBody(value)
+    };
+}

package/package.json

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

package/src/CallHierarchyPanel.tsx

@@ -6,6 +6,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.ts';
+import { PanelResizeHandle } from './PanelResizeHandle.tsx';
+import { usePanelBody } from './use-panel-body.ts';
+import { PANEL_BODY_HEIGHT } from './panel-size.ts';
 import { CALL_LEVEL_LIMIT, type CallDirection, type CallRow } from './call-hierarchy-model.ts';
 import type { EditorLanguage } from './editor-language.ts';
 import { basenameOf, relativeTo } from './paths.ts';
@@ -178,6 +181,7 @@ function StatusText({ row, direction }: { row: Extract<CallRow, { kind: 'status'
  */
 export function CallHierarchyPanel({ language, view }: { language: EditorLanguage; view: CallHierarchyView }) {
     const { t } = useTranslation('editor');
+    const body = usePanelBody(language);
     if (view.container === null) {
         return null;
     }
@@ -187,7 +191,7 @@ export function CallHierarchyPanel({ language, view }: { language: EditorLanguag
     return createPortal(
         <div
             className="flex flex-col bg-surface pt-[2px] font-sans text-xs text-text"
-            style={{ height: CALL_HIERARCHY_HEIGHT }}
+            style={{ height: CALL_HIERARCHY_HEIGHT - PANEL_BODY_HEIGHT + body.height }}
             onPointerDown={(event) => event.preventDefault()}
         >
             <div className="peek-hatch h-[14px]" />
@@ -227,11 +231,13 @@ export function CallHierarchyPanel({ language, view }: { language: EditorLanguag
                     <IconButton icon={X} size="xs" label={t('language.callHierarchy.close')} onClick={() => language.callHierarchy.close()} />
                 </div>
             </div>
-            <div className="flex h-[180px] shrink-0">
+            <div className="flex shrink-0" style={{ height: body.height }}>
                 <Tree language={language} view={view} />
                 <Preview preview={view.preview} />
             </div>
-            <div className="peek-hatch h-[14px]" />
+            <div className="peek-hatch relative h-[14px]">
+                <PanelResizeHandle container={view.container} height={body.height} onHeight={body.set} onCommit={body.commit} />
+            </div>
         </div>,
         view.container
     );

package/src/PanelResizeHandle.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState, type KeyboardEvent, type PointerEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PANEL_BODY_MIN, PANEL_KEY_STEP, availableHeightOf, clampPanelBody, panelBodyMax } from './panel-size.ts';
+import { realTimers, revealRow } from './timers.ts';
+
+interface Props {
+    container: HTMLElement;
+    height: number;
+    onHeight(height: number): void;
+    onCommit(height: number): void;
+}
+
+/* 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 }: Props) {
+    const { t } = useTranslation('editor');
+    const drag = useRef<{ startY: number; startHeight: number; lastY: number } | null>(null);
+    const [dragging, setDragging] = useState(false);
+    const [max, setMax] = useState(() => panelBodyMax(availableHeightOf(container)));
+
+    useEffect(() => {
+        const viewport = container.closest<HTMLElement>('.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: number, from: number): void {
+        const next = clampPanelBody(value, availableHeightOf(container));
+        onHeight(next);
+        if (next !== from) {
+            onCommit(next);
+            revealRow(realTimers, container);
+        }
+    }
+
+    function heightAt(clientY: number): number {
+        return clampPanelBody(drag.current!.startHeight + clientY - drag.current!.startY, availableHeightOf(container));
+    }
+
+    function down(event: PointerEvent<HTMLDivElement>): void {
+        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: PointerEvent<HTMLDivElement>): void {
+        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: PointerEvent<HTMLDivElement>): void {
+        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: KeyboardEvent<HTMLDivElement>): void {
+        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 (
+        <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/src/PeekPanel.tsx

@@ -9,6 +9,9 @@ import { basenameOf, relativeTo } from './paths.ts';
 import type { EditorLanguage } from './editor-language.ts';
 import { shikiLanguageOfPath } from './language-ids.ts';
 import { PathText } from './PathText.tsx';
+import { PanelResizeHandle } from './PanelResizeHandle.tsx';
+import { usePanelBody } from './use-panel-body.ts';
+import { PANEL_BODY_HEIGHT } from './panel-size.ts';
 import { PEEK_HEIGHT } from './peek.ts';
 import { distinguishingFolders, visualColumnOf, type NameRange, type PeekPlace } from './peek-model.ts';
 import type { PeekView } from './popups.ts';
@@ -179,13 +182,14 @@ export function PeekPanel({ language, view }: { language: EditorLanguage; 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(
         <div
             className="flex flex-col bg-surface pt-[2px] font-sans text-xs text-text"
-            style={{ height: PEEK_HEIGHT }}
+            style={{ height: PEEK_HEIGHT - PANEL_BODY_HEIGHT + body.height }}
             onPointerDown={(event) => event.preventDefault()}
         >
             <div className="peek-hatch h-[14px]" />
@@ -202,11 +206,13 @@ export function PeekPanel({ language, view }: { language: EditorLanguage; view:
                     <IconButton icon={X} size="xs" label={t('language.peek.close')} onClick={() => language.peek.close()} />
                 </div>
             </div>
-            <div className="flex h-[180px] shrink-0">
+            <div className="flex shrink-0" style={{ height: body.height }}>
                 <Preview preview={view.preview} />
                 <Places language={language} view={view} />
             </div>
-            <div className="peek-hatch h-[14px]" />
+            <div className="peek-hatch relative h-[14px]">
+                <PanelResizeHandle container={view.container} height={body.height} onHeight={body.set} onCommit={body.commit} />
+            </div>
         </div>,
         view.container
     );

package/src/call-hierarchy-model.ts

@@ -81,32 +81,25 @@ export function rootsOf(items: readonly CallHierarchyItem[]): CallNode[] {
     }));
 }
 
-function compareItems(left: CallHierarchyItem, right: CallHierarchyItem): number {
-    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.
+ * The children of a node made from the calls a server returned, in the order the server gave them.
+ * 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: CallDirection, parent: CallNode, calls: readonly (CallHierarchyIncomingCall | CallHierarchyOutgoingCall)[]): CallNode[] {
     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
-        }));
+    return entries.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. */

package/src/call-hierarchy.ts

@@ -18,7 +18,7 @@ import { PEEK_HEIGHT } from './peek.ts';
 import { snippetOf } from './peek-model.ts';
 import { isShortcut } from './shortcut-keys.ts';
 import { messageOf } from './error-message.ts';
-import { realTimers, type Timers } from './timers.ts';
+import { realTimers, revealRow, type Timers } from './timers.ts';
 
 const TOAST_ID = 'language-call-hierarchy';
 const PREPARE = 'textDocument/prepareCallHierarchy';
@@ -262,8 +262,7 @@ export class CallHierarchyFeature {
         const view = this.language.popups.getState().callHierarchy ?? null;
         if (view !== null && view.container !== container) {
             this.language.popups.setState({ callHierarchy: { ...view, container } });
-            // The row opens under the caret line, which may sit at the bottom of the view with the tree below the fold. The element is in the page a turn later.
-            this.timers.set(() => container.scrollIntoView?.({ block: 'nearest' }), 0);
+            revealRow(this.timers, container);
         }
     }
 

package/src/editor-language.ts

@@ -97,7 +97,7 @@ export class EditorLanguage {
         this.codeActions = new CodeActionsFeature(this, timers);
         this.rename = new RenameFeature(this);
         this.navigation = new NavigationFeature(this);
-        this.peek = new PeekFeature(this);
+        this.peek = new PeekFeature(this, timers);
         this.callHierarchy = new CallHierarchyFeature(this, timers);
         this.symbolPicker = new SymbolPickerFeature(this);
         this.contextMenu = new ContextMenuFeature(this);

package/src/host-types.ts

@@ -61,6 +61,10 @@ export interface LanguageHost {
     readonly files?: ProjectFiles;
     readonly apple?: boolean;
     readonly keymap?: Keymap;
+    /* The height in pixels of the list-and-preview area of the peek and the call hierarchy, so a person's drag outlives the panel; 180 without one. */
+    readonly panelBodyHeight?: number;
+    /* A person finished resizing a peek or call hierarchy panel; the height is already within what the editor allows. */
+    onPanelResize?(height: number): void;
     openPlace?(place: Place): void;
     pathOfUri?(uri: string): string | null;
     serverNames?(uri: string): readonly string[];

package/src/locales/en.json

@@ -82,6 +82,9 @@
                 "symbol": "Matches"
             }
         },
+        "panel": {
+            "resize": "Resize panel"
+        },
         "peek": {
             "unavailable": "No language server finds references in this file",
             "none": "No references found",

package/src/locales/nl.json

@@ -82,6 +82,9 @@
                 "symbol": "Overeenkomsten"
             }
         },
+        "panel": {
+            "resize": "Paneel vergroten of verkleinen"
+        },
         "peek": {
             "unavailable": "Geen language server vindt referenties in dit bestand",
             "none": "Geen referenties gevonden",

package/src/panel-size.ts

@@ -0,0 +1,28 @@
+/* The height of the list-and-preview area of a peek or a call hierarchy, which is what a person drags; the bands and the title bar around it stay. */
+export const PANEL_BODY_HEIGHT = 180;
+/* Four rows of 22px, so a list never shrinks to nothing. */
+export const PANEL_BODY_MIN = 88;
+/* What the bands and the title bar take of the panel, which the share of the editor has to leave room for. */
+const PANEL_CHROME = 63;
+/* The share of the editor's height a panel may take, so the line it belongs to stays in view. */
+const PANEL_MAX_SHARE = 0.8;
+const PANEL_FALLBACK_AVAILABLE = 800;
+export const PANEL_KEY_STEP = 22;
+
+/* The tallest body for an editor that is `available` pixels high; never below the minimum, so a tiny editor still gets a usable panel. */
+export function panelBodyMax(available: number): number {
+    return Math.max(PANEL_BODY_MIN, Math.floor(available * PANEL_MAX_SHARE) - PANEL_CHROME);
+}
+
+export function clampPanelBody(height: number, available: number = PANEL_FALLBACK_AVAILABLE): number {
+    if (!Number.isFinite(height)) {
+        return PANEL_BODY_HEIGHT;
+    }
+    return Math.min(panelBodyMax(available), Math.max(PANEL_BODY_MIN, Math.round(height)));
+}
+
+/* The height of the editor's scrolling area around a panel's row; the fallback stands in where nothing is laid out. */
+export function availableHeightOf(container: HTMLElement | null): number {
+    const height = container?.closest<HTMLElement>('.se-viewport')?.clientHeight ?? 0;
+    return height > 0 ? height : PANEL_FALLBACK_AVAILABLE;
+}

package/src/peek.ts

@@ -6,6 +6,7 @@ import { PEEK_READ_FILES, definitionSnippetOf, peekFilesOf, snippetOf, type Peek
 import type { PeekView } from './popups.ts';
 import { isShortcut } from './shortcut-keys.ts';
 import { messageOf } from './error-message.ts';
+import { realTimers, revealRow, type Timers } from './timers.ts';
 
 const TOAST_ID = 'language-peek';
 /* The block as the panel draws it: a hatched band, the header, eight lines of code and a hatched band, until the editor has measured it. */
@@ -29,6 +30,7 @@ function placeKey(location: Location): string {
  */
 export class PeekFeature {
     private readonly language: EditorLanguage;
+    private readonly timers: Timers;
     private kind: PeekKind = 'references';
     /* The whole declaration of each place of a definition peek, where the server gave it. */
     private targets = new Map<string, Range>();
@@ -38,8 +40,9 @@ export class PeekFeature {
     private line = 0;
     private token = 0;
 
-    constructor(language: EditorLanguage) {
+    constructor(language: EditorLanguage, timers: Timers = realTimers) {
         this.language = language;
+        this.timers = timers;
         const { editor } = language;
         const offs = [
             editor.onKeyDown((event) => {
@@ -201,6 +204,7 @@ export class PeekFeature {
         const view = this.language.popups.getState().peek;
         if (view !== null && view.container !== container) {
             this.language.popups.setState({ peek: { ...view, container } });
+            revealRow(this.timers, container);
         }
     }
 

package/src/project-language.ts

@@ -7,6 +7,7 @@ import { ProjectProblems } from './project-problems.ts';
 import { applyWorkspaceEdit, type ProjectFiles } from './workspace-edit.ts';
 import type { LanguageHost } from './host-types.ts';
 import { relativeTo } from './paths.ts';
+import { PANEL_BODY_HEIGHT } from './panel-size.ts';
 
 export interface LanguageDocumentHandle {
     readonly uri: string;
@@ -98,6 +99,9 @@ export class ProjectLanguage {
     readonly history = new NavigationHistory();
     private readonly holders = new Map<string, Holder>();
     private readonly files: ProjectFiles | null;
+    /* The body height of the peek and call hierarchy panels, shared by the editors of the project. */
+    panelBodyHeight: number;
+    private readonly panelListeners = new Set<(height: number) => void>();
     private pendingCaret: Place | null = null;
     private lastPlace: Place | null = null;
     private disposed = false;
@@ -108,9 +112,25 @@ export class ProjectLanguage {
         this.i18n = host.i18n ?? i18next;
         this.folder = host.folder ?? '';
         this.files = host.files ?? null;
+        this.panelBodyHeight = host.panelBodyHeight ?? PANEL_BODY_HEIGHT;
         this.problems = new ProjectProblems(service, (uri) => this.pathOfLocation(uri) ?? uri);
     }
 
+    /* Open panels of other editors of the project follow a resize. */
+    onPanelBodyChange(listener: (height: number) => void): () => void {
+        this.panelListeners.add(listener);
+        return () => this.panelListeners.delete(listener);
+    }
+
+    resizePanelBody(height: number): void {
+        if (height === this.panelBodyHeight) {
+            return;
+        }
+        this.panelBodyHeight = height;
+        this.panelListeners.forEach((listener) => listener(height));
+        this.host.onPanelResize?.(height);
+    }
+
     pathOfLocation(uri: string): string | null {
         if (this.host.pathOfUri !== undefined) {
             return this.host.pathOfUri(uri);

package/src/rendered-docs.ts

@@ -16,6 +16,8 @@ const MAX_PARSED = 200;
 export interface RenderedDocsSettings {
     /* Draw every documentation comment as formatted text, as the Reader mode of the documentation does. Off by default. */
     readonly renderDocComments: boolean;
+    /* Off draws no buttons, ignores the shortcut and shows every comment as source; on unless false. */
+    readonly enabled?: boolean;
 }
 
 /* A documentation comment the editor drew a row for, and the element of that row. */
@@ -69,6 +71,7 @@ export class RenderedDocsFeature {
     private readonly language: EditorLanguage;
     private readonly timers: Timers;
     private settings: RenderedDocsSettings = { renderDocComments: false };
+    private enabled = true;
     private comments: DocComment[] = [];
     private overrides: Override[] = [];
     private readonly containers = new Map<string, HTMLElement>();
@@ -140,11 +143,16 @@ export class RenderedDocsFeature {
 
     /* Whether every documentation comment is drawn as text until a person switches it. Changing it puts every comment back under it. */
     configure(settings: RenderedDocsSettings): void {
-        if (settings.renderDocComments === this.settings.renderDocComments) {
+        const enabled = settings.enabled !== false;
+        if (settings.renderDocComments === this.settings.renderDocComments && enabled === this.enabled) {
             return;
         }
+        const sameRendering = settings.renderDocComments === this.settings.renderDocComments;
         this.settings = settings;
-        this.clearOverrides();
+        this.enabled = enabled;
+        if (!sameRendering) {
+            this.clearOverrides();
+        }
         this.publish();
     }
 
@@ -162,7 +170,7 @@ export class RenderedDocsFeature {
     toggle(): boolean {
         this.settle();
         const comment = this.at(this.language.editor.getCaret().line);
-        if (comment === undefined || !this.canRender(comment)) {
+        if (!this.enabled || comment === undefined || !this.canRender(comment)) {
             return false;
         }
         this.setRendered(comment, !this.wantsRendered(comment));
@@ -173,7 +181,7 @@ export class RenderedDocsFeature {
     toggleAt(startLine: number): boolean {
         this.settle();
         const comment = this.comments.find((candidate) => candidate.startLine === startLine);
-        if (comment === undefined || !this.canRender(comment)) {
+        if (!this.enabled || comment === undefined || !this.canRender(comment)) {
             return false;
         }
         this.setRendered(comment, !this.wantsRendered(comment));
@@ -225,7 +233,7 @@ export class RenderedDocsFeature {
     }
 
     private wantsRendered(comment: DocComment): boolean {
-        if (!this.canRender(comment)) {
+        if (!this.enabled || !this.canRender(comment)) {
             return false;
         }
         const start = startOf(comment);
@@ -375,7 +383,7 @@ export class RenderedDocsFeature {
             this.bump();
         }
         this.markerLines.clear();
-        const markers = this.comments.map((comment) => {
+        const markers = (this.enabled ? this.comments : []).map((comment) => {
             const id = `docs:${comment.startLine}`;
             this.markerLines.set(id, comment.startLine);
             const on = this.wantsRendered(comment);

package/src/timers.ts

@@ -43,3 +43,8 @@ export class ManualTimers implements Timers {
         return this.pending.size;
     }
 }
+
+/* Scrolls a row the editor opened under the caret line into view, which may sit at the bottom of the view with the row below the fold. The element is in the page a turn later. */
+export function revealRow(timers: Timers, container: HTMLElement): void {
+    timers.set(() => container.scrollIntoView?.({ block: 'nearest' }), 0);
+}

package/src/use-panel-body.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import type { EditorLanguage } from './editor-language.ts';
+import { clampPanelBody } from './panel-size.ts';
+
+/* The body height of a panel, from the project that remembers it for the next one; `commit` hands it to the host. */
+export function usePanelBody(language: EditorLanguage): { height: number; set(height: number): void; commit(height: number): void } {
+    const { project } = language;
+    const [height, set] = useState(() => clampPanelBody(project.panelBodyHeight));
+
+    useEffect(() => project.onPanelBodyChange((value) => set(clampPanelBody(value))), [project]);
+
+    return {
+        height,
+        set,
+        commit: (value) => project.resizePanelBody(value)
+    };
+}