@adecore/editor-react 0.23.0 → 0.24.0

package/dist/project-language.js

@@ -2,9 +2,10 @@ import { disposeSnippetTransforms } from './snippet-transform-queue.js';
 import i18next, {} from 'i18next';
 import { fileUriToPath, pathToFileUri } from '@adecore/lsp';
 import { NavigationHistory } from './navigation-history.js';
-import { ProjectProblems } from './project-problems.js';
+import { ProjectProblems, serviceProblems } 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,7 +84,21 @@ export class ProjectLanguage {
         this.i18n = host.i18n ?? i18next;
         this.folder = host.folder ?? '';
         this.files = host.files ?? null;
-        this.problems = new ProjectProblems(service, (uri) => this.pathOfLocation(uri) ?? uri);
+        this.panelBodyHeight = host.panelBodyHeight ?? PANEL_BODY_HEIGHT;
+        this.problems = new ProjectProblems(host.problemSource ?? serviceProblems(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) {
@@ -193,9 +211,10 @@ export class ProjectLanguage {
             void holder.sync.ready
                 .catch(() => undefined)
                 .then(() => {
-                if (!this.holders.has(uri)) {
-                    return this.service.closeDocument(uri);
+                if (this.holders.has(uri)) {
+                    return undefined;
                 }
+                return this.service.closeDocument(uri);
             })
                 .catch(() => undefined);
         }

package/dist/project-problems.d.ts

@@ -9,12 +9,21 @@ export interface ProblemFile {
     readonly rows: readonly ProblemRow[];
 }
 export declare function compareRows(left: ProblemRow, right: ProblemRow): number;
+export interface ProblemReport {
+    readonly path: string;
+    readonly server: string;
+    readonly diagnostics: readonly Diagnostic[];
+}
+export type ProblemSource = (listener: (report: ProblemReport) => void) => () => void;
+export declare function serviceProblems(service: LanguageService, pathOf?: (uri: string) => string): ProblemSource;
 export declare class ProjectProblems {
     private readonly reports;
+    private readonly files;
     private readonly listeners;
     private readonly stop;
+    private order;
     private snapshot;
-    constructor(service: LanguageService, pathOf?: (uri: string) => string);
+    constructor(source: ProblemSource | LanguageService, pathOf?: (uri: string) => string);
     report(path: string, server: string, diagnostics: readonly Diagnostic[]): void;
     getSnapshot: () => readonly ProblemFile[];
     subscribe: (listener: () => void) => (() => void);

package/dist/project-problems.js

@@ -5,22 +5,38 @@ export function compareRows(left, right) {
     return (SEVERITY_ORDER[severityOf(left.diagnostic)] - SEVERITY_ORDER[severityOf(right.diagnostic)] ||
         comparePositions(left.diagnostic.range.start, right.diagnostic.range.start));
 }
+/* The diagnostics a service reports, by the stored path `pathOf` gives each URI. */
+export function serviceProblems(service, pathOf = (uri) => uri) {
+    return (listener) => {
+        const subscription = service.onDiagnostics((report) => listener({ path: pathOf(report.uri), server: report.source, diagnostics: report.diagnostics }));
+        return () => subscription.dispose();
+    };
+}
 /*
  * Each report replaces the previous diagnostics from that source for the file. Files with no
  * remaining problems drop out. Hints remain editor annotations rather than listed problems.
  */
 export class ProjectProblems {
     reports = new Map();
+    files = new Map();
     listeners = new Set();
     stop;
+    /* The paths of `files` in order; null once a file came or went. */
+    order = [];
+    /* Made on first read after a report, so a project nobody lists does no sorting. */
     snapshot = [];
-    constructor(service, pathOf = (uri) => uri) {
-        const subscription = service.onDiagnostics((report) => this.report(pathOf(report.uri), report.source, report.diagnostics));
-        this.stop = () => subscription.dispose();
+    /* A service stands for `serviceProblems(service, pathOf)`. */
+    constructor(source, pathOf) {
+        const listen = typeof source === 'function' ? source : serviceProblems(source, pathOf);
+        this.stop = listen((report) => this.report(report.path, report.server, report.diagnostics));
     }
     report(path, server, diagnostics) {
         const kept = diagnostics.filter((diagnostic) => severityOf(diagnostic) !== 'hint');
         const servers = this.reports.get(path) ?? new Map();
+        if (kept.length === 0 && !servers.has(server)) {
+            // A clean file reported clean again, as servers do after every edit.
+            return;
+        }
         if (kept.length === 0) {
             servers.delete(server);
         }
@@ -29,22 +45,30 @@ export class ProjectProblems {
         }
         if (servers.size === 0) {
             this.reports.delete(path);
+            this.files.delete(path);
+            this.order = null;
         }
         else {
+            if (!this.files.has(path)) {
+                this.order = null;
+            }
             this.reports.set(path, servers);
+            const rows = [...servers].flatMap(([name, list]) => list.map((diagnostic) => ({ diagnostic, server: name }))).sort(compareRows);
+            this.files.set(path, { path, rows });
         }
-        this.snapshot = [...this.reports]
-            .map(([file, byServer]) => ({
-            path: file,
-            rows: [...byServer].flatMap(([name, list]) => list.map((diagnostic) => ({ diagnostic, server: name }))).sort(compareRows)
-        }))
-            .sort((left, right) => left.path.localeCompare(right.path));
+        this.snapshot = null;
         for (const listener of [...this.listeners]) {
             listener();
         }
     }
     /* The same array until the next report, which is what a store a component reads must hand out. */
-    getSnapshot = () => this.snapshot;
+    getSnapshot = () => {
+        if (this.snapshot === null) {
+            this.order ??= [...this.files.keys()].sort((left, right) => left.localeCompare(right));
+            this.snapshot = this.order.map((path) => this.files.get(path));
+        }
+        return this.snapshot;
+    };
     subscribe = (listener) => {
         this.listeners.add(listener);
         return () => {

package/dist/proposal-model.d.ts

@@ -21,7 +21,6 @@ export interface InlineAnswer {
 }
 export declare function parseAnswer(text: string): InlineAnswer;
 export declare function fitReplacement(selected: string, replacement: string): string;
-export declare function endOfInsertion(start: EditorPosition, text: string): EditorPosition;
 export interface DiffSegment {
     readonly kind: 'same' | 'added' | 'removed';
     readonly text: string;

package/dist/proposal-model.js

@@ -94,14 +94,6 @@ export function fitReplacement(selected, replacement) {
     }
     return breaks === '\n' ? fitted : fitted.replace(/\n/g, breaks);
 }
-/* Where the caret stands after `text` was typed at `start`. */
-export function endOfInsertion(start, text) {
-    const lines = text.split('\n');
-    if (lines.length === 1) {
-        return { line: start.line, character: start.character + text.length };
-    }
-    return { line: start.line + lines.length - 1, character: lines.at(-1).length };
-}
 function linesOf(text) {
     const lines = text.replace(/\r\n/g, '\n').split('\n');
     return lines.length > 1 && lines.at(-1) === '' ? lines.slice(0, -1) : lines;

package/dist/rename-model.d.ts

@@ -1,5 +1,5 @@
 import type { EditorPosition, EditorRange } from '@adecore/editor';
-import type { Location, PrepareRenameResult, TextEdit, WorkspaceEdit } from '@adecore/lsp';
+import type { DocumentSymbolResult, Location, PrepareRenameResult, TextEdit, WorkspaceEdit } from '@adecore/lsp';
 export declare function wordRangeAt(lineText: string, position: EditorPosition): EditorRange | null;
 export interface RenameTarget {
     readonly range: EditorRange;
@@ -12,6 +12,7 @@ export interface Occurrences {
     readonly files: number;
 }
 export declare function occurrencesOf(locations: readonly Location[], uri: string): Occurrences;
+export declare function renameKindOf(result: DocumentSymbolResult, name: string, places: readonly EditorRange[]): string | undefined;
 export interface RenameRow {
     readonly line: number;
     readonly before: string;

package/dist/rename-model.js

@@ -1,4 +1,5 @@
 import { isIdentifierCharacter } from './completion-model.js';
+import { rangeHolds } from './diagnostics-model.js';
 import { textEntriesOf } from './workspace-edit.js';
 /* The identifier the caret is in or touches; null where there is none. */
 export function wordRangeAt(lineText, position) {
@@ -36,6 +37,62 @@ export function occurrencesOf(locations, uri) {
         files: new Set(locations.map((location) => location.uri)).size
     };
 }
+/* LSP's SymbolKind in words, indexed by its number. */
+const SYMBOL_KINDS = [
+    '',
+    'file',
+    'module',
+    'namespace',
+    'package',
+    'class',
+    'method',
+    'property',
+    'field',
+    'constructor',
+    'enum',
+    'interface',
+    'function',
+    'variable',
+    'constant',
+    'string',
+    'number',
+    'boolean',
+    'array',
+    'object',
+    'key',
+    'null',
+    'enum member',
+    'struct',
+    'event',
+    'operator',
+    'type parameter'
+];
+/*
+ * The kind of the symbol a rename names, in words, from the outline of the open file: the symbol whose name
+ * holds one of the places of the name there. Undefined when the outline does not list it, as with most locals.
+ */
+export function renameKindOf(result, name, places) {
+    if (result === null || result.length === 0) {
+        return undefined;
+    }
+    const named = (range) => places.some((place) => rangeHolds(range, place.start));
+    if ('range' in result[0]) {
+        let found;
+        const walk = (symbols) => {
+            for (const symbol of symbols) {
+                if (named(symbol.selectionRange)) {
+                    found = symbol;
+                }
+                walk(symbol.children ?? []);
+            }
+        };
+        walk(result);
+        return found === undefined ? undefined : SYMBOL_KINDS[found.kind];
+    }
+    // A flat list only gives the whole span of a symbol, so the name has to match as well.
+    const found = result.find((symbol) => 'location' in symbol && symbol.name === name && named(symbol.location.range));
+    return found === undefined ? undefined : SYMBOL_KINDS[found.kind];
+}
 function lineStarts(text) {
     const starts = [0];
     for (let index = 0; index < text.length; index++) {

package/dist/rename.d.ts

@@ -14,6 +14,7 @@ export declare class RenameFeature {
     private finish;
     private light;
     private suggest;
+    private kindOf;
     private linesOf;
     private publish;
     private tell;

package/dist/rename.js

@@ -1,6 +1,7 @@
 import { StaleResultError } from '@adecore/lsp';
+import { KEY_PRIORITY } from './key-priority.js';
 import { lineTextOf } from './line-text.js';
-import { occurrencesOf, renamePreviewOf, renameTargetOf, wordRangeAt } from './rename-model.js';
+import { occurrencesOf, renameKindOf, renamePreviewOf, renameTargetOf, wordRangeAt } from './rename-model.js';
 import { isShortcut } from './shortcut-keys.js';
 import { resourceOperationsOf } from './workspace-edit.js';
 import { messageOf } from './error-message.js';
@@ -22,13 +23,13 @@ export class RenameFeature {
         this.language = language;
         const { editor } = language;
         const offs = [
-            editor.onKeyDown((event) => {
+            language.onKey((event) => {
                 if (!isShortcut(this.language.shortcuts.rename, event)) {
                     return false;
                 }
                 void this.start();
                 return true;
-            }),
+            }, KEY_PRIORITY.rename),
             editor.onTextChange(() => this.cancel())
         ];
         language.onDispose(() => {
@@ -192,8 +193,9 @@ export class RenameFeature {
                 start: { line: Math.max(0, line - CONTEXT_LINES), character: 0 },
                 end: { line: line + CONTEXT_LINES, character: Number.MAX_SAFE_INTEGER }
             });
-            const uses = await this.linesOf(locations ?? []);
-            const names = await suggestNames({ uri, languageId, name: session.original, context, uses }, session.names.signal);
+            const [uses, kind] = await Promise.all([this.linesOf(locations ?? []), this.kindOf(session, locations ?? [])]);
+            const request = { uri, languageId, name: session.original, ...(kind === undefined ? {} : { kind }), context, uses };
+            const names = await suggestNames(request, session.names.signal);
             if (this.session === session && names.length > 0) {
                 this.publish({ suggestions: names });
             }
@@ -202,6 +204,20 @@ export class RenameFeature {
             // Suggestions do not prevent a manual rename.
         }
     }
+    /* So a suggester knows a function from a variable; a rename on a use finds the kind through the declaration's place in this file. */
+    async kindOf(session, locations) {
+        const { project, uri } = this.language;
+        if (!project.service.supports('textDocument/documentSymbol', uri)) {
+            return undefined;
+        }
+        try {
+            const symbols = await project.service.documentSymbols(uri, { signal: session.names.signal, parallel: true });
+            return renameKindOf(symbols, session.original, [session.target.range, ...occurrencesOf(locations, uri).inFile]);
+        }
+        catch {
+            return undefined;
+        }
+    }
     /* The text of the first lines that name the symbol, in the order the servers listed them, reading at most a few other files. */
     async linesOf(locations) {
         const { project } = this.language;

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

@@ -1,4 +1,5 @@
 import { findDocComments } from '@adecore/editor';
+import { KEY_PRIORITY } from './key-priority.js';
 import { parseDocComment } from './doc-comment-model.js';
 import { isShortcut } from './shortcut-keys.js';
 import { realTimers } from './timers.js';
@@ -44,6 +45,7 @@ export class RenderedDocsFeature {
     language;
     timers;
     settings = { renderDocComments: false };
+    enabled = true;
     comments = [];
     overrides = [];
     containers = new Map();
@@ -85,9 +87,9 @@ export class RenderedDocsFeature {
                     this.toggleAt(line);
                 }
             }),
-            editor.onKeyDown((event) => {
+            language.onKey((event) => {
                 return isShortcut(this.language.shortcuts.toggleRenderedDocs, event) && this.toggle();
-            }),
+            }, KEY_PRIORITY.renderedDocs),
             editor.onViewChange(() => {
                 this.sweep();
                 this.releaseRevealed();
@@ -113,11 +115,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 +139,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 +149,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 +193,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 +332,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/signature.js

@@ -1,3 +1,4 @@
+import { KEY_PRIORITY } from './key-priority.js';
 import { signatureViewOf } from './signature-model.js';
 import { isShortcut } from './shortcut-keys.js';
 import { realTimers } from './timers.js';
@@ -24,8 +25,8 @@ export class SignatureFeature {
             editor.onTextChange((change) => this.edited(change)),
             editor.onCaret(() => this.retrigger()),
             editor.onBlur(() => this.close()),
-            editor.onKeyDown((event) => {
-                if (event.key === 'Escape' && this.isOpen && this.language.popups.getState().callHierarchy == null) {
+            language.onKey((event) => {
+                if (event.key === 'Escape' && this.isOpen && this.language.popups.getState().callHierarchy === null) {
                     this.close();
                     return true;
                 }
@@ -37,7 +38,7 @@ export class SignatureFeature {
                     return this.cycle(event.key === 'ArrowDown' ? 1 : -1);
                 }
                 return false;
-            })
+            }, KEY_PRIORITY.signature)
         ];
         language.onDispose(() => {
             for (const off of offs) {

package/dist/snippet-session.d.ts

@@ -10,7 +10,7 @@ export interface SnippetInsertion {
     readonly stops: readonly SnippetStop[];
     readonly fields?: readonly SnippetField[];
 }
-type SnippetHost = Pick<EditorLanguage, 'editor' | 'onDispose'> & Partial<Pick<EditorLanguage, 'popups' | 'pick' | 'project'>>;
+type SnippetHost = Pick<EditorLanguage, 'editor' | 'onDispose'> & Partial<Pick<EditorLanguage, 'popups' | 'pick' | 'project' | 'onKey'>>;
 export declare class SnippetFeature {
     private readonly language;
     private frames;

package/dist/snippet-session.js

@@ -3,6 +3,7 @@ import { SnippetFieldTransforms } from './snippet-field-transforms.js';
 import { SnippetTransformError } from './snippet-transform-client.js';
 import { acquireSnippetTransforms } from './snippet-transform-queue.js';
 import { realTimers } from './timers.js';
+import { KEY_PRIORITY } from './key-priority.js';
 import { MAX_TRANSFORM_CHARACTERS } from './snippet-transform-protocol.js';
 import { comparePositions, rangeHolds, shiftPosition } from './diagnostics-model.js';
 export function positionInInsertion(start, text, offset) {
@@ -128,7 +129,12 @@ export class SnippetFeature {
         this.transforms = language.project === undefined ? null : acquireSnippetTransforms(language.project, timers);
         const { editor } = language;
         this.fieldTransforms = new SnippetFieldTransforms(editor, this.transforms, (targets, values) => this.applyFieldTransforms(targets, values));
-        const offs = [editor.onKeyDown((event) => this.key(event)), editor.onTextChange((change) => this.edited(change)), editor.onCaret(() => this.moved())];
+        const key = (event) => this.key(event);
+        const offs = [
+            language.onKey === undefined ? editor.onKeyDown(key) : language.onKey(key, KEY_PRIORITY.snippets),
+            editor.onTextChange((change) => this.edited(change)),
+            editor.onCaret(() => this.moved())
+        ];
         language.onDispose(() => {
             this.transforms?.dispose();
             this.end();
@@ -395,7 +401,7 @@ export class SnippetFeature {
         if (event.key === 'Escape') {
             const popups = this.language.popups?.getState();
             if (popups !== undefined &&
-                [popups.completion, popups.signature, popups.hover, popups.pick, popups.peek, popups.callHierarchy ?? null].some((popup) => popup !== null)) {
+                [popups.completion, popups.signature, popups.hover, popups.pick, popups.peek, popups.callHierarchy].some((popup) => popup !== null)) {
                 return false;
             }
             const active = this.isActive;

package/dist/symbol-picker.js

@@ -1,4 +1,5 @@
 import { StaleResultError } from '@adecore/lsp';
+import { KEY_PRIORITY } from './key-priority.js';
 import { basenameOf } from './paths.js';
 import { entriesOf, workspaceEntriesOf } from './symbol-picker-model.js';
 import { isShortcut } from './shortcut-keys.js';
@@ -13,13 +14,13 @@ export class SymbolPickerFeature {
     language;
     constructor(language) {
         this.language = language;
-        const off = language.editor.onKeyDown((event) => {
+        const off = language.onKey((event) => {
             if (!isShortcut(this.language.shortcuts.goToSymbol, event)) {
                 return false;
             }
             void this.open();
             return true;
-        });
+        }, KEY_PRIORITY.symbolPicker);
         language.onDispose(() => {
             off();
             this.close();

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.24.0",
   "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.24.0",
+    "@adecore/lsp": "0.24.0",
+    "@adecore/merge": "0.24.0",
     "lucide-react": "^1.47.0",
     "react-markdown": "^10.1.0",
     "remark-breaks": "^4.0.0",
@@ -72,14 +72,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.23.0",
+    "@adecore/ui": "^0.24.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "workspace:*",
+    "@adecore/ui": "0.24.0",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/AnchoredPopup.tsx

@@ -7,6 +7,8 @@ export interface AnchoredPopupProps {
     /* The character the popup belongs to, in the page's pixels. */
     rect: EditorRect;
     className?: string;
+    /* What the card does with content past its room: `scroll` it, or `clip` it for content that scrolls on its own. `scroll` without one. */
+    overflow?: 'scroll' | 'clip';
     children: ReactNode;
     placement?: PlaceOptions;
     onPointerEnter?(): void;
@@ -17,7 +19,7 @@ export interface AnchoredPopupProps {
  * A card next to a character of the editor, portaled to the page: inside a scaled canvas node it would be
  * drawn at that scale and clipped by the node. Placed from the character's screen rectangle, so it holds at any zoom.
  */
-export function AnchoredPopup({ rect, className, children, placement, onPointerEnter, onPointerLeave }: AnchoredPopupProps) {
+export function AnchoredPopup({ rect, className, overflow = 'scroll', children, placement, onPointerEnter, onPointerLeave }: AnchoredPopupProps) {
     const element = useRef<HTMLDivElement>(null);
 
     // Every render, since the character moves when the editor scrolls and the card's own size follows its content.
@@ -38,7 +40,7 @@ export function AnchoredPopup({ rect, className, children, placement, onPointerE
     return createPortal(
         <div
             ref={element}
-            className={`fixed top-0 left-0 z-(--z-popup) overflow-y-auto rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow) ${className ?? ''}`}
+            className={`fixed top-0 left-0 z-(--z-popup) ${overflow === 'clip' ? 'overflow-hidden' : 'overflow-y-auto'} rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow) ${className ?? ''}`}
             style={{ visibility: 'hidden' }}
             onPointerEnter={onPointerEnter}
             onPointerLeave={onPointerLeave}