@adecore/editor-react 0.39.0 → 0.40.0

package/dist/symbol-links.js

@@ -1,3 +1,4 @@
+import { uniqueBy } from './unique.js';
 /* The classes a name in a signature has: a pointer and an underline on hover, and the accent only then, so the signature stays calm. */
 export const SYMBOL_LINK_CLASS = 'cursor-pointer hover:text-accent hover:underline';
 const TYPE_NAME = /^[A-Z][A-Za-z0-9_]*$/;
@@ -34,8 +35,7 @@ export function placesOfName(result, name, fileText) {
       candidates = named;
     }
   }
-  const seen = new Set();
-  return candidates.map(symbol => 'range' in symbol.location ? symbol.location : {
+  return uniqueBy(candidates.map(symbol => 'range' in symbol.location ? symbol.location : {
     uri: symbol.location.uri,
     range: {
       start: {
@@ -47,12 +47,5 @@ export function placesOfName(result, name, fileText) {
         character: 0
       }
     }
-  }).filter(location => {
-    const key = `${location.uri}\0${location.range.start.line}`;
-    if (seen.has(key)) {
-      return false;
-    }
-    seen.add(key);
-    return true;
-  });
+  }), location => `${location.uri}\0${location.range.start.line}`);
 }

package/dist/symbol-picker-model.d.ts

@@ -4,6 +4,7 @@ export declare const SYMBOL_GROUPS: readonly SymbolGroup[];
 export declare function groupOfKind(kind: number): SymbolGroup;
 export declare function letterOfKind(kind: number): string;
 export type SymbolTone = 'callable' | 'value' | 'type' | 'other';
+export declare const TONE_CLASSES: Record<SymbolTone, string>;
 export declare function toneOfKind(kind: number): SymbolTone;
 export interface SymbolEntry {
     readonly id: string;

package/dist/symbol-picker-model.js

@@ -38,6 +38,13 @@ const LETTERS = {
 export function letterOfKind(kind) {
   return kind === ENUM_MEMBER ? 'e' : LETTERS[groupOfKind(kind)];
 }
+/* The badge colors of a tone, shared by the symbol picker and the suggestions list. */
+export const TONE_CLASSES = {
+  callable: 'bg-accent-soft text-accent',
+  value: 'bg-status-running/15 text-status-running',
+  type: 'bg-status-idle/15 text-status-idle',
+  other: 'bg-surface-hover text-text-muted'
+};
 const TONES = {
   namespaces: 'other',
   classes: 'type',

package/dist/unique.d.ts

@@ -0,0 +1,10 @@
+export declare function uniqueBy<T>(items: readonly T[], keyOf: (item: T) => string): T[];
+export declare function placeKey(location: {
+    readonly uri: string;
+    readonly range: {
+        readonly start: {
+            readonly line: number;
+            readonly character: number;
+        };
+    };
+}): string;

package/dist/unique.js

@@ -0,0 +1,15 @@
+/* The items in order, without any whose key an earlier one had. */
+export function uniqueBy(items, keyOf) {
+  const seen = new Set();
+  return items.filter(item => {
+    const key = keyOf(item);
+    if (seen.has(key)) {
+      return false;
+    }
+    seen.add(key);
+    return true;
+  });
+}
+export function placeKey(location) {
+  return `${location.uri}\0${location.range.start.line}\0${location.range.start.character}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/editor-react",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "type": "module",
   "description": "Language-enabled editors, feature coordination and React popups over injected language services.",
   "license": "FSL-1.1-MIT",
@@ -62,25 +62,25 @@
     "test": "bun test --conditions=source"
   },
   "dependencies": {
-    "@adecore/editor": "0.39.0",
-    "@adecore/lsp": "0.39.0",
-    "@adecore/merge": "0.39.0",
-    "lucide-react": "^1.47.0",
+    "@adecore/editor": "0.40.0",
+    "@adecore/lsp": "0.40.0",
+    "@adecore/merge": "0.40.0",
+    "lucide-react": "^1.61.0",
     "react-markdown": "^10.1.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
-    "zustand": "^5.0.15"
+    "zustand": "^5.0.16"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.39.0",
+    "@adecore/ui": "^0.40.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.39.0",
-    "@types/bun": "^1.4.2",
+    "@adecore/ui": "0.40.0",
+    "@types/bun": "^1.4.4",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "typescript": "^7.0.2"

package/src/AnchoredPopup.tsx

@@ -25,9 +25,11 @@ export function AnchoredPopup({ rect, className, overflow = 'scroll', children,
     // Every render, since the character moves when the editor scrolls and the card's own size follows its content.
     useLayoutEffect(() => {
         const popup = element.current;
+
         if (popup === null) {
             return;
         }
+
         popup.style.maxHeight = '';
         const size = { width: popup.offsetWidth, height: popup.offsetHeight };
         const placed = placePopup(rect, size, { width: window.innerWidth, height: window.innerHeight }, placement);

package/src/BaselineStatus.tsx

@@ -11,6 +11,7 @@ const BASELINE_MARKS: Record<BaselineLevel, { icon: typeof CircleCheck; color: s
 /* Where a web feature stands across browsers, as one line under a CSS property. */
 export function BaselineStatus({ baseline }: { baseline: Baseline }) {
     const { icon, color } = BASELINE_MARKS[baseline.level];
+
     return (
         <div className="flex items-start gap-1.5 text-xs/[18px] text-text-muted select-text">
             <Icon icon={icon} size={14} className={`mt-px shrink-0 ${color}`} />

package/src/CallHierarchyPanel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useLayoutEffect, useRef, type ReactNode, type Ref } from 'react';
+import { useEffect, useId, useRef, type ReactNode, type Ref } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { ChevronDown, ChevronLeft, ChevronRight, X } from 'lucide-react';
@@ -16,6 +16,7 @@ import { PathText } from './PathText.tsx';
 import { Preview } from './PeekPanel.tsx';
 import type { CallHierarchyView } from './popups.ts';
 import { SymbolBadge } from './SymbolPicker.tsx';
+import { useInputPopup } from './popup-focus.ts';
 
 const INDENT = 14;
 const BASE_INDENT = 8;
@@ -68,6 +69,7 @@ function SymbolRow({ language, row, active, id, ref }: { language: EditorLanguag
     const { item } = row;
     const path = relativeTo(fileUriToPath(item.uri) ?? item.uri, language.project.folder);
     const tool = language.callHierarchy;
+
     return (
         <Line
             ref={ref}
@@ -111,29 +113,30 @@ function Tree({ language, view }: { language: EditorLanguage; view: CallHierarch
     const { t } = useTranslation('editor');
     const treeId = useId();
     const activeRow = useRef<HTMLDivElement>(null);
+
     const idOf = (row: CallRow): string => `${treeId}-${row.id}`;
+
     const activeId = view.rows.some((row) => row.id === view.active) ? `${treeId}-${view.active}` : undefined;
 
     useEffect(() => {
         activeRow.current?.scrollIntoView({ block: 'nearest' });
     }, [view.active]);
 
-    // The focus stays in the text, so the input is what names the tree and its active row.
-    useLayoutEffect(() => {
-        language.editor.setInputPopup({ controls: treeId, activeDescendant: activeId });
-        return () => language.editor.setInputPopup(null);
-    }, [language, treeId, activeId]);
+    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">
             {view.rows.map((row) => {
                 const active = row.id === view.active;
                 const ref = active ? activeRow : undefined;
+
                 if (row.kind === 'node') {
                     return <SymbolRow key={row.id} ref={ref} language={language} row={row} active={active} id={idOf(row)} />;
                 }
+
                 if (row.kind === 'more') {
                     const next = Math.min(row.hidden, CALL_LEVEL_LIMIT);
+
                     return (
                         <Line key={row.id} ref={ref} row={row} id={idOf(row)} active={active} onClick={() => language.callHierarchy.showMore(row.parent)}>
                             <span className="font-sans text-xs text-accent">
@@ -142,6 +145,7 @@ function Tree({ language, view }: { language: EditorLanguage; view: CallHierarch
                         </Line>
                     );
                 }
+
                 return (
                     <Line key={row.id} row={row} id={idOf(row)} active={false} onClick={() => language.callHierarchy.retry(row.parent)}>
                         <StatusText row={row} direction={view.direction} />
@@ -154,6 +158,7 @@ function Tree({ language, view }: { language: EditorLanguage; view: CallHierarch
 
 function StatusText({ row, direction }: { row: Extract<CallRow, { kind: 'status' }>; direction: CallDirection }) {
     const { t } = useTranslation('editor');
+
     if (row.status === 'loading') {
         return (
             <span className="flex items-center gap-2 font-sans text-xs text-text-muted">
@@ -162,11 +167,13 @@ function StatusText({ row, direction }: { row: Extract<CallRow, { kind: 'status'
             </span>
         );
     }
+
     if (row.status === 'failed') {
         return (
             <span className="min-w-0 truncate font-sans text-xs text-status-error">{t('language.callHierarchy.retry', { message: row.message ?? '' })}</span>
         );
     }
+
     return (
         <span className="font-sans text-xs text-text-muted">
             {t(direction === 'incoming' ? 'language.callHierarchy.noIncoming' : 'language.callHierarchy.noOutgoing')}
@@ -182,12 +189,15 @@ 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;
     }
+
     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(
         <div
             className="flex flex-col bg-surface pt-[2px] font-sans text-xs text-text"

package/src/ChangeReview.tsx

@@ -14,15 +14,20 @@ export interface ChangeReviewProps {
 
 export function ChangeReview({ editor, selected, proposal, startLine = 1, actions, className, label }: ChangeReviewProps) {
     const code = useRef<HTMLDivElement>(null);
+
     useLayoutEffect(() => {
         const element = code.current;
+
         if (element === null) {
             return;
         }
+
         element.replaceChildren();
+
         for (const segment of diffSegments(selected, proposal, startLine)) {
             const row = element.ownerDocument.createElement('div');
             element.append(row);
+
             editor.renderCode(row, segment.text, {
                 firstLine: segment.firstLine,
                 ...(segment.kind === 'same'
@@ -32,8 +37,10 @@ export function ChangeReview({ editor, selected, proposal, startLine = 1, action
                 emphasis: emphasisOf(segment)
             });
         }
+
         return () => element.replaceChildren();
     }, [editor, selected, proposal, startLine]);
+
     return (
         <section className={className} aria-label={label}>
             <div ref={code} />

package/src/CodeAuthorsCard.tsx

@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GitCommitHorizontal, User, Users } from 'lucide-react';
 import { Button, Icon, Popover, Separator, Tooltip, useNow } from '@adecore/ui';
@@ -34,10 +33,8 @@ export function LatestCommit({ commit }: { commit: GitBlameCommit }) {
 export function CodeAuthorsCard({ language, view }: { language: EditorLanguage; view: AuthorsView }) {
     const { t } = useTranslation('editor');
     const { authors, uncommittedLines, latest } = view.authorship;
-    const anchor = useMemo(() => {
-        const { left, top, right, bottom } = view.anchor;
-        return { getBoundingClientRect: () => new DOMRect(left, top, right - left, bottom - top) };
-    }, [view.anchor]);
+    const { left, top, right, bottom } = view.anchor;
+    const anchor = { getBoundingClientRect: () => new DOMRect(left, top, right - left, bottom - top) };
 
     return (
         <Popover.Root open onOpenChange={(open, details) => !open && language.codeVision.closeAuthors(details.reason === 'escape-key')}>

package/src/CompletionPopup.tsx

@@ -4,36 +4,34 @@ import { useTranslation } from 'react-i18next';
 import { formatShortcut } from '@adecore/ui';
 import type { EditorRect } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
-import { kindLetterOf, kindToneOf, rowWindow, type KindTone } from './completion-model.ts';
+import { kindLetterOf, kindToneOf, rowWindow } from './completion-model.ts';
 import { SourceLine, SymbolSections } from './HoverSections.tsx';
 import { PathText } from './PathText.tsx';
-import { keepFocusOutOfList } from './popup-focus.ts';
+import { keepFocusOutOfList, useInputPopup } from './popup-focus.ts';
 import { placeBeside, placePopup } from './popup-placement.ts';
 import type { CompletionView } from './popups.ts';
-
-const TONES: Record<KindTone, string> = {
-    callable: 'bg-accent-soft text-accent',
-    value: 'bg-status-running/15 text-status-running',
-    type: 'bg-status-idle/15 text-status-idle',
-    other: 'bg-surface-hover text-text-muted'
-};
+import { TONE_CLASSES } from './symbol-picker-model.ts';
 
 /* The label with the characters that match what was typed set apart. */
 function MarkedLabel({ label, matches }: { label: string; matches: readonly number[] }) {
     if (matches.length === 0) {
         return <>{label}</>;
     }
+
     const marked = new Set(matches);
     const runs: { text: string; marked: boolean }[] = [];
+
     for (let at = 0; at < label.length; at++) {
         const isMarked = marked.has(at);
         const last = runs[runs.length - 1];
+
         if (last !== undefined && last.marked === isMarked) {
             last.text += label[at];
         } else {
             runs.push({ text: label[at]!, marked: isMarked });
         }
     }
+
     return (
         <>
             {runs.map((run, index) =>
@@ -52,10 +50,13 @@ function MarkedLabel({ label, matches }: { label: string; matches: readonly numb
 const CARD = 'fixed top-0 left-0 z-(--z-popup) overflow-hidden rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow)';
 const ROW_HEIGHT = 24;
 const VISIBLE_ROWS = 8;
+
 /* Rows drawn past the visible ones on each side, so a wheel turn lands on rows that exist. */
 const OVERSCAN_ROWS = 6;
+
 /* The padding the listbox has around its rows. */
 const LIST_PADDING = 4;
+
 /* What a row takes besides its name and namespace: padding, the kind badge and the gaps. */
 const ROW_CHROME = 72;
 
@@ -77,6 +78,7 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
     // Only the rows near the visible ones are drawn: a list of 150 is mostly out of sight, and every keystroke makes it again.
     const [listTop, setListTop] = useState(0);
     const need = Math.max(0, ...view.rows.slice(0, VISIBLE_ROWS * 2).map((row) => row.label.length + 2 + row.description.length));
+
     if (need > widest) {
         setWidest(need);
     }
@@ -84,13 +86,16 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
     // Every render: the word moves when the editor scrolls, and the list and the documentation change size with what they hold.
     useLayoutEffect(() => {
         const card = list.current;
+
         if (card === null) {
             return;
         }
+
         const viewport = {
             width: window.innerWidth,
             height: window.innerHeight
         };
+
         const side = docs.current;
         // Every size is read before the first write, so the page is laid out once and not after each of them.
         const size = { width: card.offsetWidth, height: card.offsetHeight };
@@ -99,12 +104,14 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
         card.style.left = `${Math.round(placed.left)}px`;
         card.style.top = `${Math.round(placed.top)}px`;
         card.style.visibility = 'visible';
+
         if (side !== null && sideSize !== null) {
             const box = {
                 left: Math.round(placed.left),
                 top: Math.round(placed.top),
                 ...size
             };
+
             const beside = placeBeside(box, sideSize, viewport);
             side.style.left = `${Math.round(beside.left)}px`;
             side.style.top = `${Math.round(beside.top)}px`;
@@ -119,14 +126,12 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
 
     const total = view.rows.length;
     const { first, last } = rowWindow(listTop, view.active, total, ROW_HEIGHT, VISIBLE_ROWS, OVERSCAN_ROWS, LIST_PADDING);
+
     const optionId = (index: number): string => `${listId}-option-${index}`;
+
     const activeId = view.active >= first && view.active < last ? optionId(view.active) : undefined;
 
-    // The focus stays in the text, so the input is what names the list and its active option.
-    useLayoutEffect(() => {
-        language.editor.setInputPopup({ controls: listId, activeDescendant: activeId });
-        return () => language.editor.setInputPopup(null);
-    }, [language, listId, activeId]);
+    useInputPopup(language, listId, activeId);
 
     return createPortal(
         <>
@@ -155,6 +160,7 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
                     <div aria-hidden style={{ height: first * ROW_HEIGHT }} />
                     {view.rows.slice(first, last).map((row, offset) => {
                         const index = first + offset;
+
                         return (
                             <button
                                 key={`${index}:${row.label}`}
@@ -171,7 +177,7 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
                                 onClick={() => void language.completion.accept(false, index)}
                             >
                                 <span
-                                    className={`grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs leading-none font-semibold ${TONES[kindToneOf(row.kind)]}`}
+                                    className={`grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs leading-none font-semibold ${TONE_CLASSES[kindToneOf(row.kind)]}`}
                                 >
                                     {kindLetterOf(row.kind)}
                                 </span>