@adecore/editor-react 0.42.0 → 0.44.0

package/dist/templates.js

@@ -0,0 +1,103 @@
+import { BUILT_IN_LIVE_TEMPLATES, BUILT_IN_POSTFIX_TEMPLATES } from './template-builtins.js';
+import { checkSnippet } from './snippet.js';
+export { BUILT_IN_LIVE_TEMPLATES, BUILT_IN_POSTFIX_TEMPLATES };
+export {} from './live-templates.js';
+const MAX_KEY_LENGTH = 40;
+const MAX_BODY_LENGTH = 20_000;
+const POSTFIX_LANGUAGES = ['javascript', 'typescript', 'php'];
+const LANGUAGES = ['javascript', 'typescript', 'php', 'css', 'html', 'xml', 'other'];
+const PLACES = ['code', 'comment', 'string'];
+/*
+ * The templates the editors of a project know: the built-in ones and the ones a host sets. A host that keeps
+ * templates feeds them through `set`, and the editors read the registry on every use.
+ */
+export class TemplateRegistry {
+  builtins;
+  listeners = new Set();
+  own = {
+    live: [],
+    postfix: []
+  };
+  off = new Set();
+  current = {
+    liveInCompletion: true,
+    postfix: true,
+    postfixInCompletion: true
+  };
+  liveList;
+  postfixList;
+  constructor(options = {}) {
+    this.builtins = options.builtins !== false;
+    this.liveList = this.listed(BUILT_IN_LIVE_TEMPLATES, []);
+    this.postfixList = this.listed(BUILT_IN_POSTFIX_TEMPLATES, []);
+  }
+  /* The built-in templates that are not disabled, then the host's. */
+  get live() {
+    return this.liveList;
+  }
+  get postfix() {
+    return this.postfixList;
+  }
+  get settings() {
+    return this.current;
+  }
+  /* Replaces what the update names. A template that fails `checkTemplate` is dropped; this never throws. */
+  set(update) {
+    this.own = {
+      live: update.live === undefined ? this.own.live : update.live.filter(template => checkTemplate(template, 'live') === null),
+      postfix: update.postfix === undefined ? this.own.postfix : update.postfix.filter(template => checkTemplate(template, 'postfix') === null)
+    };
+    this.off = update.disabled === undefined ? this.off : new Set(update.disabled);
+    if (update.settings !== undefined) {
+      this.current = {
+        liveInCompletion: update.settings.liveInCompletion !== false,
+        postfix: update.settings.postfix !== false,
+        postfixInCompletion: update.settings.postfixInCompletion !== false
+      };
+    }
+    this.liveList = this.listed(BUILT_IN_LIVE_TEMPLATES, this.own.live);
+    this.postfixList = this.listed(BUILT_IN_POSTFIX_TEMPLATES, this.own.postfix);
+    for (const listener of [...this.listeners]) {
+      listener();
+    }
+  }
+  /* Calls `listener` after every `set`. Returns the function that stops it. */
+  onChange(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  listed(builtins, own) {
+    return [...(this.builtins ? builtins.filter(template => !this.off.has(template.id)) : []), ...own];
+  }
+}
+/*
+ * Why a template cannot be used, in English for a host to show, or null. `kind` says which rules apply; without it a
+ * template with an `expression` or an `example` counts as a postfix one.
+ */
+export function checkTemplate(template, kind) {
+  const postfix = kind === undefined ? 'expression' in template || 'example' in template : kind === 'postfix';
+  if (template.id === '') {
+    return 'The template has no id.';
+  }
+  if (template.key === '' || template.key.length > MAX_KEY_LENGTH) {
+    return `The key is one to ${MAX_KEY_LENGTH} characters.`;
+  }
+  if (postfix ? !/^[\p{L}\p{N}_$]+$/u.test(template.key) : /\s/.test(template.key)) {
+    return postfix ? 'The key holds letters, digits, underscores and dollar signs only.' : 'The key holds no whitespace.';
+  }
+  if (template.body.trim() === '') {
+    return 'The text is empty.';
+  }
+  if (template.body.length > MAX_BODY_LENGTH) {
+    return `The text is longer than ${MAX_BODY_LENGTH} characters.`;
+  }
+  if (template.languages.length === 0 || template.languages.some(language => !(postfix ? POSTFIX_LANGUAGES : LANGUAGES).includes(language))) {
+    return 'The languages are empty or not known.';
+  }
+  if (!postfix && template.places?.some(place => !PLACES.includes(place)) === true) {
+    return 'The places are not known.';
+  }
+  return checkSnippet(template.body);
+}

package/dist/testing.d.ts

@@ -1,4 +1,4 @@
-import { type LanguageService, type LanguageDocument, type LanguageRequestOptions, type DiagnosticsReport, type ContentChange, type Disposable, type ProviderOptions, type CallHierarchyIncomingCall, type CallHierarchyItem, type CallHierarchyOutgoingCall, type CodeAction, type CodeActionContext, type CodeLens, type Command, type CompletionContext, type CompletionItem, type CompletionResult, type DocumentHighlight, type DocumentSymbolResult, type FoldingRange, type FormattingOptions, type Hover, type InlayHint, type Location, type NavigationResult, type Position, type PrepareRenameResult, type Range, type SelectionRange, type SemanticTokens, type SemanticTokensDelta, type SignatureHelp, type SignatureHelpContext, type TextEdit, type WorkspaceEdit, type WorkspaceSymbolResult } from '@adecore/lsp';
+import { type LanguageService, type LanguageDocument, type LanguageRequestOptions, type DiagnosticsReport, type ContentChange, type Disposable, type ProviderOptions, type CallHierarchyIncomingCall, type CallHierarchyItem, type CallHierarchyOutgoingCall, type CodeAction, type CodeActionContext, type CodeLens, type Command, type CompletionContext, type CompletionItem, type CompletionResult, type DocumentHighlight, type DocumentSymbolResult, type FoldingRange, type FormattingOptions, type Hover, type InlayHint, type Location, type NavigationResult, type Position, type PrepareRenameResult, type Range, type SelectionRange, type SemanticTokens, type SemanticTokensDelta, type SignatureHelp, type SignatureHelpContext, type TextEdit, type WorkspaceEdit, type WorkspaceSymbolResult, type Color, type ColorInformation, type ColorPresentation, type DocumentLink, type InlineCompletionContext, type InlineCompletionResult, type InlineValue, type InlineValueContext, type LinkedEditingRanges, type Moniker, type PreviousResultId, type ServerMessage, type ShowDocumentParams, type ShowDocumentResult, type TextDocumentSaveReason, type TypeHierarchyItem, type WorkspaceDiagnosticReport } from '@adecore/lsp';
 export { ManualTimers } from './timers.ts';
 export interface LanguageCall {
     method: string;
@@ -15,6 +15,8 @@ export declare class FakeLanguageService implements LanguageService {
     private readonly answers;
     private readonly diagnostics;
     private readonly changes;
+    private readonly messages;
+    private showDocument;
     respond(method: string, answer: (call: LanguageCall) => unknown, provider?: ProviderOptions): void;
     openDocument(document: LanguageDocument): Promise<void>;
     changeDocument(uri: string, changes: readonly ContentChange[]): Promise<void>;
@@ -58,4 +60,24 @@ export declare class FakeLanguageService implements LanguageService {
     outgoingCalls(uri: string, item: CallHierarchyItem, options?: LanguageRequestOptions): Promise<CallHierarchyOutgoingCall[] | null>;
     codeLenses(uri: string, options?: LanguageRequestOptions): Promise<CodeLens[] | null>;
     resolveCodeLens(uri: string, lens: CodeLens, options?: LanguageRequestOptions): Promise<CodeLens>;
+    documentLinks(uri: string, options?: LanguageRequestOptions): Promise<DocumentLink[] | null>;
+    resolveDocumentLink(uri: string, link: DocumentLink, options?: LanguageRequestOptions): Promise<DocumentLink>;
+    documentColors(uri: string, options?: LanguageRequestOptions): Promise<ColorInformation[] | null>;
+    colorPresentations(uri: string, color: Color, range: Range, options?: LanguageRequestOptions): Promise<ColorPresentation[] | null>;
+    linkedEditingRanges(uri: string, position: Position, options?: LanguageRequestOptions): Promise<LinkedEditingRanges | null>;
+    monikers(uri: string, position: Position, options?: LanguageRequestOptions): Promise<Moniker[] | null>;
+    prepareTypeHierarchy(uri: string, position: Position, options?: LanguageRequestOptions): Promise<TypeHierarchyItem[] | null>;
+    supertypes(uri: string, item: TypeHierarchyItem, options?: LanguageRequestOptions): Promise<TypeHierarchyItem[] | null>;
+    subtypes(uri: string, item: TypeHierarchyItem, options?: LanguageRequestOptions): Promise<TypeHierarchyItem[] | null>;
+    inlineValues(uri: string, range: Range, context: InlineValueContext, options?: LanguageRequestOptions): Promise<InlineValue[] | null>;
+    inlineCompletions(uri: string, position: Position, context: InlineCompletionContext, options?: LanguageRequestOptions): Promise<InlineCompletionResult>;
+    rangesFormatting(uri: string, ranges: readonly Range[], formatting: FormattingOptions, options?: LanguageRequestOptions): Promise<TextEdit[] | null>;
+    willSave(uri: string, reason?: TextDocumentSaveReason): Promise<void>;
+    willSaveWaitUntil(uri: string, reason?: TextDocumentSaveReason, options?: LanguageRequestOptions): Promise<TextEdit[] | null>;
+    workspaceDiagnostics(uri: string, previousResultIds?: readonly PreviousResultId[], options?: LanguageRequestOptions): Promise<WorkspaceDiagnosticReport>;
+    textDocumentContent(uri: string, options?: LanguageRequestOptions): Promise<string | null>;
+    onServerMessage(listener: (message: ServerMessage) => void): Disposable;
+    onShowDocument(handler: (params: ShowDocumentParams) => Promise<ShowDocumentResult>): Disposable;
+    message(message: ServerMessage): void;
+    show(params: ShowDocumentParams): Promise<boolean>;
 }

package/dist/testing.js

@@ -7,6 +7,8 @@ export class FakeLanguageService {
   answers = new Map();
   diagnostics = new Set();
   changes = new Set();
+  messages = new Set();
+  showDocument = null;
   respond(method, answer, provider = {}) {
     this.answers.set(method, answer);
     this.providers.set(method, provider);
@@ -248,4 +250,116 @@ export class FakeLanguageService {
   resolveCodeLens(uri, lens, options = {}) {
     return this.request('codeLens/resolve', uri, lens, options);
   }
+  documentLinks(uri, options = {}) {
+    return this.request('textDocument/documentLink', uri, {}, options);
+  }
+  resolveDocumentLink(uri, link, options = {}) {
+    return this.request('documentLink/resolve', uri, link, options);
+  }
+  documentColors(uri, options = {}) {
+    return this.request('textDocument/documentColor', uri, {}, options);
+  }
+  colorPresentations(uri, color, range, options = {}) {
+    return this.request('textDocument/colorPresentation', uri, {
+      color,
+      range
+    }, options);
+  }
+  linkedEditingRanges(uri, position, options = {}) {
+    return this.request('textDocument/linkedEditingRange', uri, {
+      position
+    }, options);
+  }
+  monikers(uri, position, options = {}) {
+    return this.request('textDocument/moniker', uri, {
+      position
+    }, options);
+  }
+  prepareTypeHierarchy(uri, position, options = {}) {
+    return this.request('textDocument/prepareTypeHierarchy', uri, {
+      position
+    }, options);
+  }
+  supertypes(uri, item, options = {}) {
+    return this.request('typeHierarchy/supertypes', uri, {
+      item
+    }, options);
+  }
+  subtypes(uri, item, options = {}) {
+    return this.request('typeHierarchy/subtypes', uri, {
+      item
+    }, options);
+  }
+  inlineValues(uri, range, context, options = {}) {
+    return this.request('textDocument/inlineValue', uri, {
+      range,
+      context
+    }, options);
+  }
+  inlineCompletions(uri, position, context, options = {}) {
+    return this.request('textDocument/inlineCompletion', uri, {
+      position,
+      context
+    }, options);
+  }
+  rangesFormatting(uri, ranges, formatting, options = {}) {
+    return this.request('textDocument/rangesFormatting', uri, {
+      ranges,
+      options: formatting
+    }, options);
+  }
+  async willSave(uri, reason = 1) {
+    this.calls.push({
+      method: 'textDocument/willSave',
+      uri,
+      params: {
+        reason
+      },
+      options: {}
+    });
+  }
+  async willSaveWaitUntil(uri, reason = 1, options = {}) {
+    return this.supports('textDocument/willSaveWaitUntil', uri) ? this.request('textDocument/willSaveWaitUntil', uri, {
+      reason
+    }, options) : null;
+  }
+  workspaceDiagnostics(uri, previousResultIds = [], options = {}) {
+    return this.request('workspace/diagnostic', uri, {
+      previousResultIds
+    }, options);
+  }
+  async textDocumentContent(uri, options = {}) {
+    if (!this.supports('workspace/textDocumentContent', uri)) {
+      return null;
+    }
+    return (await this.request('workspace/textDocumentContent', uri, {
+      uri
+    }, options))?.text ?? null;
+  }
+  onServerMessage(listener) {
+    this.messages.add(listener);
+    return {
+      dispose: () => this.messages.delete(listener)
+    };
+  }
+  onShowDocument(handler) {
+    this.showDocument = handler;
+    return {
+      dispose: () => {
+        if (this.showDocument === handler) {
+          this.showDocument = null;
+        }
+      }
+    };
+  }
+  /* Sends a message as a server would. */
+  message(message) {
+    for (const listener of this.messages) {
+      listener(message);
+    }
+  }
+  /* Asks the host to show a document as a server would; false when nothing handles it. */
+  async show(params) {
+    return (await this.showDocument?.(params))?.success ?? false;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/editor-react",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "type": "module",
   "description": "Language-enabled editors, feature coordination and React popups over injected language services.",
   "license": "FSL-1.1-MIT",
@@ -62,9 +62,10 @@
     "test": "bun test --conditions=source"
   },
   "dependencies": {
-    "@adecore/editor": "0.42.0",
-    "@adecore/lsp": "0.42.0",
-    "@adecore/merge": "0.42.0",
+    "@adecore/editor": "0.44.0",
+    "@adecore/lsp": "0.44.0",
+    "@adecore/merge": "0.44.0",
+    "emmet": "^2.4.11",
     "lucide-react": "^1.61.0",
     "react-markdown": "^10.1.0",
     "remark-breaks": "^4.0.0",
@@ -72,14 +73,14 @@
     "zustand": "^5.0.16"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.42.0",
+    "@adecore/ui": "^0.44.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.42.0",
+    "@adecore/ui": "0.44.0",
     "@types/bun": "^1.4.4",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/CallHierarchyPanel.tsx

@@ -9,7 +9,7 @@ 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 { CALL_LEVEL_LIMIT, isTypeDirection, type CallDirection, type CallRow } from './call-hierarchy-model.ts';
 import type { EditorLanguage } from './editor-language.ts';
 import { basenameOf, relativeTo } from './paths.ts';
 import { PathText } from './PathText.tsx';
@@ -125,7 +125,12 @@ function Tree({ language, view }: { language: EditorLanguage; view: CallHierarch
     useInputPopup(language, treeId, activeId);
 
     return (
-        <div id={treeId} role="tree" aria-label={t('language.callHierarchy.label')} className="w-1/2 shrink-0 overflow-y-auto border-r border-border py-1">
+        <div
+            id={treeId}
+            role="tree"
+            aria-label={t(isTypeDirection(view.direction) ? 'language.callHierarchy.typesLabel' : 'language.callHierarchy.label')}
+            className="w-1/2 shrink-0 overflow-y-auto border-r border-border py-1"
+        >
             {view.rows.map((row) => {
                 const active = row.id === view.active;
                 const ref = active ? activeRow : undefined;
@@ -174,11 +179,14 @@ function StatusText({ row, direction }: { row: Extract<CallRow, { kind: 'status'
         );
     }
 
-    return (
-        <span className="font-sans text-xs text-text-muted">
-            {t(direction === 'incoming' ? 'language.callHierarchy.noIncoming' : 'language.callHierarchy.noOutgoing')}
-        </span>
-    );
+    const empty = {
+        incoming: 'noIncoming',
+        outgoing: 'noOutgoing',
+        supertypes: 'noSupertypes',
+        subtypes: 'noSubtypes'
+    } as const;
+
+    return <span className="font-sans text-xs text-text-muted">{t(`language.callHierarchy.${empty[direction]}`)}</span>;
 }
 
 /*
@@ -210,10 +218,17 @@ export function CallHierarchyPanel({ language, view }: { language: EditorLanguag
                     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') }
-                    ]}
+                    options={
+                        isTypeDirection(view.direction)
+                            ? [
+                                  { id: 'supertypes', label: t('language.callHierarchy.supertypes') },
+                                  { id: 'subtypes', label: t('language.callHierarchy.subtypes') }
+                              ]
+                            : [
+                                  { id: 'incoming', label: t('language.callHierarchy.incoming') },
+                                  { id: 'outgoing', label: t('language.callHierarchy.outgoing') }
+                              ]
+                    }
                 />
                 <span className="shrink-0 font-medium">{view.name}</span>
                 <span className="shrink-0 font-medium text-text-muted">{path === null ? '' : basenameOf(path)}</span>

package/src/EditorContextMenu.tsx

@@ -28,6 +28,7 @@ export function EditorContextMenu({ language, view, children }: { language: Edit
         implementation: () => void language.navigation.go('implementation'),
         peekReferences: () => void language.peek.open(),
         callHierarchy: () => void language.callHierarchy.open(),
+        typeHierarchy: () => void language.callHierarchy.open(undefined, 'supertypes'),
         renameSymbol: () => void language.rename.start(),
         codeActions: () => void language.codeActions.open()
     };
@@ -100,6 +101,12 @@ export function EditorContextMenu({ language, view, children }: { language: Edit
                             {t('commands.formatDocument')}
                             {language.shortcuts.formatDocument !== null && <Kbd shortcut={language.shortcuts.formatDocument} />}
                         </ContextMenu.Item>
+                        {language.codeActions.formatsSelection &&
+                            language.editor
+                                .getSelections()
+                                .some((range) => range.start.line !== range.end.line || range.start.character !== range.end.character) && (
+                                <ContextMenu.Item onClick={() => void language.codeActions.formatSelection()}>{t('commands.formatSelection')}</ContextMenu.Item>
+                            )}
                     </>
                 )}
             </ContextMenu.Popup>

package/src/LanguagePopups.tsx

@@ -13,6 +13,7 @@ import { RenameCard } from './RenameCard.tsx';
 import { RenderedDocs } from './RenderedDocs.tsx';
 import { SymbolPicker } from './SymbolPicker.tsx';
 import { SignatureCard } from './SignatureCard.tsx';
+import { WrapCard } from './WrapCard.tsx';
 import type { HoverView } from './popups.ts';
 
 export interface LanguagePopupsProps<Language extends EditorLanguage = EditorLanguage> {
@@ -44,6 +45,7 @@ export function LanguagePopups<Language extends EditorLanguage>({ language, cont
     const symbols = useStore(language.popups, (state) => state.symbols);
     const menu = useStore(language.popups, (state) => state.menu);
     const authors = useStore(language.popups, (state) => state.authors);
+    const wrap = useStore(language.popups, (state) => state.wrap);
 
     useEffect(() => language.editor.onViewChange(redraw), [language]);
 
@@ -53,6 +55,7 @@ export function LanguagePopups<Language extends EditorLanguage>({ language, cont
     const pickRect = pick === null ? null : language.editor.rectAt(pick.anchor);
     const renameRect = rename === null ? null : language.editor.rectAt(rename.range.start);
     const renameEnd = rename === null ? null : language.editor.rectAt(rename.range.end);
+    const wrapRect = wrap === null ? null : language.editor.rectAt(wrap.anchor);
 
     return (
         <>
@@ -85,6 +88,7 @@ export function LanguagePopups<Language extends EditorLanguage>({ language, cont
             {peek !== null && <PeekPanel language={language} view={peek} />}
             {callHierarchy !== null && <CallHierarchyPanel language={language} view={callHierarchy} />}
             {authors !== null && <CodeAuthorsCard language={language} view={authors} />}
+            {wrap !== null && wrapRect !== null && <WrapCard language={language} view={wrap} rect={wrapRect} />}
             {children}
             {rename !== null && renameRect !== null && <RenameCard language={language} view={rename} rect={renameRect} endRect={renameEnd} />}
         </>

package/src/PickPopup.tsx

@@ -10,7 +10,34 @@ import type { PickPreview, PickView } from './popups.ts';
 const CARD =
     'fixed top-0 left-0 z-(--z-popup) flex w-[420px] flex-col overflow-hidden rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow)';
 
+/* The label with the part a query matched marked, whatever the case. */
+function MatchedLabel({ label, query }: { label: string; query: string | null }) {
+    const start = query === null || query === '' ? -1 : label.toLowerCase().indexOf(query.toLowerCase());
+
+    if (query === null || start < 0) {
+        return label;
+    }
+
+    return (
+        <>
+            {label.slice(0, start)}
+            <mark className="bg-transparent font-semibold text-accent">{label.slice(start, start + query.length)}</mark>
+            {label.slice(start + query.length)}
+        </>
+    );
+}
+
 function PreviewLines({ preview }: { preview: PickPreview }) {
+    if (preview.kind === 'text') {
+        return (
+            <div className="max-h-48 overflow-auto border-t border-border p-2 font-mono text-code whitespace-pre">
+                {preview.added.map((line, index) => (
+                    <div key={index}>{line === '' ? ' ' : line}</div>
+                ))}
+            </div>
+        );
+    }
+
     return (
         <div className="flex flex-col gap-px border-t border-border p-1 font-mono text-code">
             {preview.removed.map((line, index) => (
@@ -78,6 +105,7 @@ export function PickPopup({ language, view, rect }: { language: EditorLanguage;
     }
 
     const activeId = optionIds.get(view.active);
+    const mnemonics = view.groups.some((group) => group.rows.some((row) => row.mnemonic !== undefined));
 
     useInputPopup(language, listId, activeId);
 
@@ -89,7 +117,12 @@ export function PickPopup({ language, view, rect }: { language: EditorLanguage;
             onPointerDown={(event) => event.preventDefault()}
             {...keepFocusOutOfList(() => language.editor.focus())}
         >
-            {view.title !== null && <div className="border-b border-border px-3 py-1.5 text-xs text-text-muted">{view.title}</div>}
+            {(view.title !== null || view.query !== null) && (
+                <div className="flex items-baseline gap-2 border-b border-border px-3 py-1.5 text-xs text-text-muted">
+                    <span className="min-w-0 truncate">{view.title}</span>
+                    {view.query !== null && view.query !== '' && <span className="ml-auto shrink-0 font-mono text-text">{view.query}</span>}
+                </div>
+            )}
             <div id={listId} role="listbox" className="min-h-0 flex-1 overflow-y-auto p-1">
                 {view.groups.map((group, groupIndex) => (
                     <div key={group.title ?? groupIndex} role="group" className="flex flex-col">
@@ -102,12 +135,21 @@ export function PickPopup({ language, view, rect }: { language: EditorLanguage;
                                 type="button"
                                 role="option"
                                 tabIndex={-1}
-                                aria-selected={row.id === view.active}
+                                aria-selected={row.id === view.active || view.chosen.includes(row.id)}
+                                aria-keyshortcuts={row.mnemonic}
                                 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)}
+                                data-chosen={view.chosen.includes(row.id)}
+                                className="flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row data-[chosen=true]:bg-accent/15"
+                                onClick={(event) => language.pick.choose(row.id, { toggle: event.metaKey || event.ctrlKey, range: event.shiftKey })}
                             >
-                                <span className={row.path ? 'shrink-0' : 'min-w-0 truncate'}>{row.label}</span>
+                                {mnemonics && (
+                                    <span aria-hidden="true" className="w-3 shrink-0 text-center font-mono text-text-faint">
+                                        {row.mnemonic}
+                                    </span>
+                                )}
+                                <span className={row.path ? 'shrink-0' : 'min-w-0 truncate'}>
+                                    <MatchedLabel label={row.label} query={view.query} />
+                                </span>
                                 {row.path ? (
                                     <PathText path={row.detail} className="ml-auto font-mono text-text-faint" />
                                 ) : (

package/src/WrapCard.tsx

@@ -0,0 +1,64 @@
+import { useLayoutEffect, useRef, useState, type KeyboardEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { EditorRect } from '@adecore/editor';
+import { Input } from '@adecore/ui';
+import { AnchoredPopup } from './AnchoredPopup.tsx';
+import type { EditorLanguage } from './editor-language.ts';
+import type { WrapView } from './popups.ts';
+
+/* The field for the abbreviation a selection is wrapped in: Enter wraps, Escape or leaving the field cancels. */
+export function WrapCard({ language, view, rect }: { language: EditorLanguage; view: WrapView; rect: EditorRect }) {
+    const { t } = useTranslation('editor');
+    const input = useRef<HTMLInputElement>(null);
+    const [value, setValue] = useState('');
+
+    useLayoutEffect(() => {
+        input.current?.focus();
+    }, []);
+
+    function onKeyDown(event: KeyboardEvent<HTMLInputElement>): void {
+        if (event.nativeEvent.isComposing) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            language.markup.cancelWrap();
+            language.editor.focus();
+        } else if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (value.trim() !== '') {
+                language.markup.submitWrap(value);
+            }
+        }
+    }
+
+    return (
+        <AnchoredPopup rect={rect} placement={{ prefer: 'above' }}>
+            <div className="flex w-[280px] flex-col gap-1.5 p-2">
+                <Input
+                    ref={input}
+                    size="sm"
+                    mono
+                    value={value}
+                    spellCheck={false}
+                    autoComplete="off"
+                    aria-label={t('language.markup.wrap')}
+                    aria-invalid={view.error !== null}
+                    placeholder={t('language.markup.placeholder')}
+                    onChange={(event) => setValue(event.target.value)}
+                    onKeyDown={onKeyDown}
+                    onBlur={() => language.markup.cancelWrap()}
+                />
+                {view.error !== null ? (
+                    <div role="alert" className="text-xs text-status-error">
+                        {view.error}
+                    </div>
+                ) : (
+                    <div className="text-xs text-text-muted">↵ {t('language.markup.apply')}</div>
+                )}
+            </div>
+        </AnchoredPopup>
+    );
+}

package/src/call-hierarchy-model.ts

@@ -1,7 +1,12 @@
-import type { CallHierarchyIncomingCall, CallHierarchyItem, CallHierarchyOutgoingCall, Range } from '@adecore/lsp';
+import type { CallHierarchyIncomingCall, CallHierarchyItem, CallHierarchyOutgoingCall, Range, TypeHierarchyItem } from '@adecore/lsp';
 
-/* Callers of a symbol, or the symbols it calls. */
-export type CallDirection = 'incoming' | 'outgoing';
+/* Callers of a symbol or the symbols it calls; or the super and sub types of a type, which the same tree draws. */
+export type CallDirection = 'incoming' | 'outgoing' | 'supertypes' | 'subtypes';
+
+/* Whether a direction walks a type hierarchy and not the calls. */
+export function isTypeDirection(direction: CallDirection): direction is 'supertypes' | 'subtypes' {
+    return direction === 'supertypes' || direction === 'subtypes';
+}
 
 /* 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;
@@ -103,6 +108,23 @@ export function childrenOf(direction: CallDirection, parent: CallNode, calls: re
     }));
 }
 
+/* The children of a node made from the types a server returned; a type has no call sites, so a row goes to the type itself. */
+export function typeChildrenOf(parent: CallNode, items: readonly TypeHierarchyItem[]): CallNode[] {
+    return items.map((item, index) => ({
+        id: `${parent.id}.${index}`,
+        parent: parent.id,
+        level: parent.level + 1,
+        item,
+        sites: [],
+        siteUri: null,
+        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: ReadonlyMap<string, CallNode>, roots: readonly string[]): CallRow[] {
     const rows: CallRow[] = [];