@adecore/editor-react 0.0.1 → 0.17.0-beta.2

package/dist/HoverCard.js

@@ -0,0 +1,38 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { CircleX, Info, TriangleAlert } from 'lucide-react';
+import { fileUriToPath } from '@adecore/lsp';
+import { Button, Icon, Tooltip } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { basenameOf } from './paths.js';
+import { codeLabelOf, severityOf } from './diagnostics-model.js';
+import { SymbolSections } from './HoverSections.js';
+const SEVERITY_ICONS = { error: CircleX, warning: TriangleAlert, info: Info, hint: Info };
+const SEVERITY_COLORS = { error: 'text-status-error', warning: 'text-status-needs-you', info: 'text-status-running', hint: 'text-text-muted' };
+function ProblemSection({ problem, language }) {
+    const { t } = useTranslation('editor');
+    const { diagnostic } = problem;
+    const severity = severityOf(diagnostic);
+    const label = diagnostic.source === undefined ? [codeLabelOf(diagnostic), problem.server].filter((part) => part !== '').join(' · ') : codeLabelOf(diagnostic);
+    const supported = language.codeActions.supported;
+    return (_jsxs("div", { className: "flex flex-col gap-1.5 px-3 py-2.5", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Icon, { icon: SEVERITY_ICONS[severity], size: 14, className: `mt-px shrink-0 ${SEVERITY_COLORS[severity]}` }), _jsx("div", { className: "min-w-0 text-xs/[18px] break-words whitespace-pre-wrap select-text", children: diagnostic.message })] }), label !== '' && _jsx("div", { className: "pl-[22px] text-xs text-text-muted select-text", children: label }), diagnostic.relatedInformation?.map((related, index) => {
+                const path = fileUriToPath(related.location.uri);
+                return (_jsxs("div", { className: "pl-[22px] text-xs text-text-muted", children: [path !== null && (_jsxs("button", { type: "button", className: "font-mono text-accent hover:underline", onClick: () => language.goTo(related.location), children: [basenameOf(path), ":", formatNumber(related.location.range.start.line + 1)] })), ' ', related.message] }, index));
+            }), _jsx("div", { className: "pt-1 pl-[22px]", children: _jsx(Tooltip, { label: t(supported ? 'language.hover.quickFix' : 'language.hover.quickFixNone'), children: _jsx(Button, { size: "xs", variant: "secondary", "aria-disabled": !supported, onClick: () => {
+                            if (supported) {
+                                language.hover.hide();
+                                void language.codeActions.quickFixFor(problem);
+                            }
+                        }, children: t('language.hover.quickFix') }) }) })] }));
+}
+export function HoverCard({ language, problems, info, anchor, position }) {
+    const { t } = useTranslation('editor');
+    const place = info?.definition === null || info === null ? null : fileUriToPath(info.definition.uri);
+    return (_jsxs("div", { className: "flex w-max min-w-[280px] max-w-[min(520px,calc(100vw-16px))] flex-col divide-y divide-border", children: [info !== null && (_jsxs(_Fragment, { children: [_jsx(SymbolSections, { text: info.text, onName: (name, declared) => {
+                            language.hover.hide();
+                            void language.navigation.goToName(name, anchor, name === (declared ?? info.word) ? info.definition : null);
+                        } }), _jsxs("div", { className: "flex items-center gap-3 px-3 py-1.5 text-xs", children: [info.definition !== null && (_jsx("button", { type: "button", className: "text-accent hover:underline", onClick: () => language.goTo(info.definition), children: t('language.hover.definition') })), info.references !== null && info.references > 0 && (_jsx("button", { type: "button", className: "text-accent hover:underline", onClick: () => {
+                                    language.hover.hide();
+                                    void language.peek.open(position);
+                                }, children: t('language.hover.references', { count: info.references, formatted: formatNumber(info.references) }) })), place !== null && info.definition !== null && (_jsxs("span", { className: "ml-auto font-mono text-text-faint", children: [basenameOf(place), ":", formatNumber(info.definition.range.start.line + 1)] }))] })] })), problems.map((problem, index) => (_jsx(ProblemSection, { problem: problem, language: language }, index)))] }));
+}

package/dist/HoverSections.d.ts

@@ -0,0 +1,21 @@
+import { type DocTag, type HoverSection, type HoverText } from './hover-content.ts';
+export declare function Signature({ code, language, onName }: {
+    code: string;
+    language: string;
+    onName?: (name: string) => void;
+}): import("react").JSX.Element;
+export declare function DocTags({ tags }: {
+    tags: readonly DocTag[];
+}): import("react").JSX.Element;
+export declare function SymbolSection({ section, onName }: {
+    section: HoverSection;
+    onName?: (name: string, declared: string | null) => void;
+}): import("react").JSX.Element;
+export declare function SymbolSections({ text, onName }: {
+    text: HoverText;
+    onName?: (name: string, declared: string | null) => void;
+}): import("react").JSX.Element;
+export declare function SourceLine({ text, language }: {
+    text: string;
+    language: string;
+}): import("react").JSX.Element;

package/dist/HoverSections.js

@@ -0,0 +1,82 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditorRendering } from './rendering-context.js';
+import { useEffect, useState } from 'react';
+import { Markdown } from './Markdown.js';
+import { Tooltip } from '@adecore/ui';
+import { hoverSectionsOf, markdownParts } from './hover-content.js';
+import { BaselineStatus } from './BaselineStatus.js';
+import { declaredNameOf, linkTypeNames } from './symbol-links.js';
+/* Code as the viewer colors it, plain until the grammar is in so the card never changes size under the pointer by much. */
+export function Signature({ code, language, onName }) {
+    const { theme, highlight } = useEditorRendering();
+    const [html, setHtml] = useState(null);
+    const key = `${language}\0${theme}\0${code}\0${onName !== undefined}`;
+    // Only whether there are links goes into the highlighting; the handler is read when a name is pressed.
+    const linked = onName !== undefined;
+    useEffect(() => {
+        if (highlight === undefined) {
+            return;
+        }
+        let alive = true;
+        highlight(code, language, theme)
+            .then((result) => alive && setHtml({ key, html: linked ? linkTypeNames(result) : result }))
+            .catch(() => undefined);
+        return () => {
+            alive = false;
+        };
+    }, [code, language, theme, key, linked, highlight]);
+    const className = 'font-mono text-code break-words whitespace-pre-wrap [&_.line]:block [&_pre]:m-0 [&_pre]:bg-transparent! [&_pre]:whitespace-pre-wrap [&_code]:font-mono';
+    // One handler for every name, since the names are part of the highlighted HTML and not elements of ours.
+    const follow = (event) => {
+        const name = event.target.closest('[data-symbol]')?.dataset.symbol;
+        if (name !== undefined && onName !== undefined) {
+            onName(name);
+        }
+    };
+    return html?.key === key ? (_jsx("div", { className: className, onClick: follow, dangerouslySetInnerHTML: { __html: html.html } })) : (_jsx("div", { className: className, children: code }));
+}
+/* A docblock's tags as rows: the tag once beside each run of the same tag, so a list of parameters reads as one. */
+export function DocTags({ tags }) {
+    return (_jsx("div", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-0.5 text-xs/[18px] select-text", children: tags.map((tag, index) => (_jsxs("div", { className: "contents", children: [_jsx("span", { className: "font-mono text-text-faint", children: tags[index - 1]?.name === tag.name ? '' : `@${tag.name}` }), _jsx("div", { className: "min-w-0 break-words text-text-muted [&_.adecore-editor-markdown]:text-xs [&_code]:bg-transparent! [&_code]:p-0! [&_p]:m-0", children: _jsx(Markdown, { text: tag.markdown }) })] }, index))) }));
+}
+/* One symbol: its qualified name muted, its signature, the prose and examples as compact blocks, and its tags as rows. Names in the signature are links only where `onName` says what a press does. */
+export function SymbolSection({ section, onName }) {
+    const declared = declaredNameOf(section.signatures[0]?.code ?? '');
+    const follow = onName === undefined ? undefined : (name) => onName(name, declared);
+    return (_jsxs("div", { className: "flex flex-col gap-1.5 px-3 py-2", children: [section.title !== null && _jsx("div", { className: "truncate font-mono text-xs text-text-faint select-text", children: section.title }), section.signatures.map((block, index) => (_jsx(Signature, { code: block.code, language: block.language, onName: follow }, index))), section.baseline !== null && _jsx(BaselineStatus, { baseline: section.baseline }), markdownParts(section.markdown).map((part, index) => part.kind === 'code' ? (_jsx("div", { className: "rounded-md bg-surface-sunken px-2 py-1.5", children: _jsx(Signature, { code: part.block.code, language: part.block.language, onName: follow }) }, index)) : (_jsx("div", { className: "text-text-muted select-text [&_.adecore-editor-markdown]:text-xs [&_p]:my-1", children: _jsx(Markdown, { text: part.text }) }, index))), section.tags.length > 0 && _jsx(DocTags, { tags: section.tags })] }));
+}
+/* What a server says about a symbol as the sections of a hover card, shared by the hover and the documentation beside the suggestions. */
+export function SymbolSections({ text, onName }) {
+    return (_jsx(_Fragment, { children: hoverSectionsOf(text).map((section, index) => (_jsx(SymbolSection, { section: section, onName: onName }, index))) }));
+}
+/* PHP highlights only after its opening tag, which is put in front for the grammar and taken off again. */
+function phpWithoutOpenTag(html) {
+    return html.replace(/<span[^>]*>&#x3C;\?<\/span><span[^>]*>php<\/span>(<span[^>]*>) /, '$1');
+}
+/*
+ * Where a suggestion comes from, such as `use Raxos\Database\Orm\Attribute\PrimaryKey`, on one line that gives
+ * way from its start, so the end of the name stays readable and a word is never cut in two. The full text is in the tooltip.
+ */
+export function SourceLine({ text, language }) {
+    const { theme, highlight } = useEditorRendering();
+    const [html, setHtml] = useState(null);
+    const highlighted = language === 'php' && text.startsWith('use ');
+    const key = `${theme}\0${text}`;
+    useEffect(() => {
+        if (!highlighted) {
+            return;
+        }
+        if (highlight === undefined) {
+            return;
+        }
+        let alive = true;
+        highlight(`<?php ${text}`, 'php', theme)
+            .then((result) => alive && setHtml({ key, html: phpWithoutOpenTag(result) }))
+            .catch(() => undefined);
+        return () => {
+            alive = false;
+        };
+    }, [highlighted, text, theme, key, highlight]);
+    const className = 'block overflow-hidden text-left font-mono text-code text-ellipsis whitespace-nowrap [direction:rtl] [&_code]:font-mono [&_pre]:m-0 [&_pre]:inline [&_pre]:bg-transparent! [&_pre]:p-0 [&_code]:inline [&_.line]:inline';
+    return (_jsx(Tooltip, { label: text, children: highlighted && html?.key === key ? (_jsx("div", { className: className, children: _jsx("bdi", { dangerouslySetInnerHTML: { __html: html.html } }) })) : (_jsx("div", { className: `${className} text-text-muted`, children: _jsx("bdi", { children: text }) })) }));
+}

package/dist/LanguagePopups.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+import type { EditorLanguage } from './editor-language.ts';
+export declare function LanguagePopups({ language, contextMenuItems }: {
+    language: EditorLanguage;
+    contextMenuItems?: (language: EditorLanguage) => ReactNode;
+}): import("react").JSX.Element;

package/dist/LanguagePopups.js

@@ -0,0 +1,38 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useReducer } from 'react';
+import { useStore } from 'zustand';
+import { AnchoredPopup } from './AnchoredPopup.js';
+import { CodeAuthorsCard } from './CodeAuthorsCard.js';
+import { CompletionPopup } from './CompletionPopup.js';
+import { EditorContextMenu } from './EditorContextMenu.js';
+import { HoverCard } from './HoverCard.js';
+import { PeekPanel } from './PeekPanel.js';
+import { PickPopup } from './PickPopup.js';
+import { RenameCard } from './RenameCard.js';
+import { SymbolPicker } from './SymbolPicker.js';
+import { SignatureCard } from './SignatureCard.js';
+/*
+ * Every card a language feature opens over the editor. Each feature keeps its own state and these
+ * only draw it, placed by the screen position of the character it belongs to, which is read again
+ * whenever the editor scrolls or resizes. `contextMenuItems` adds rows of the app to the context menu.
+ */
+export function LanguagePopups({ language, contextMenuItems }) {
+    const [, redraw] = useReducer((count) => count + 1, 0);
+    const hover = useStore(language.popups, (state) => state.hover);
+    const completion = useStore(language.popups, (state) => state.completion);
+    const signature = useStore(language.popups, (state) => state.signature);
+    const pick = useStore(language.popups, (state) => state.pick);
+    const rename = useStore(language.popups, (state) => state.rename);
+    const peek = useStore(language.popups, (state) => state.peek);
+    const symbols = useStore(language.popups, (state) => state.symbols);
+    const menu = useStore(language.popups, (state) => state.menu);
+    const authors = useStore(language.popups, (state) => state.authors);
+    useEffect(() => language.editor.onViewChange(redraw), [language]);
+    const hoverRect = hover === null ? null : language.editor.rectAt(hover.anchor);
+    const completionRect = completion === null ? null : language.editor.rectAt(completion.anchor);
+    const signatureRect = signature === null ? null : language.editor.rectAt(signature.anchor);
+    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);
+    return (_jsxs(_Fragment, { children: [hover !== null && hoverRect !== null && (_jsx(AnchoredPopup, { rect: hoverRect, onPointerEnter: () => language.hover.holdCard(true), onPointerLeave: () => language.hover.holdCard(false), children: _jsx(HoverCard, { language: language, problems: hover.problems, info: hover.info, anchor: hover.anchor, position: hover.position }) })), signature !== null && signatureRect !== null && (_jsx(AnchoredPopup, { rect: signatureRect, placement: { prefer: 'above' }, children: _jsx(SignatureCard, { model: signature.model }) })), completion !== null && completionRect !== null && _jsx(CompletionPopup, { language: language, view: completion, rect: completionRect }), pick !== null && pickRect !== null && _jsx(PickPopup, { language: language, view: pick, rect: pickRect }), menu !== null && (_jsx(EditorContextMenu, { language: language, view: menu, children: contextMenuItems?.(language) })), symbols !== null && _jsx(SymbolPicker, { language: language, view: symbols }), peek !== null && _jsx(PeekPanel, { language: language, view: peek }), authors !== null && _jsx(CodeAuthorsCard, { language: language, view: authors }), rename !== null && renameRect !== null && _jsx(RenameCard, { language: language, view: rename, rect: renameRect, endRect: renameEnd })] }));
+}

package/dist/Markdown.d.ts

@@ -0,0 +1,3 @@
+export declare function Markdown({ text }: {
+    text: string;
+}): import("react").JSX.Element;

package/dist/Markdown.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkBreaks from 'remark-breaks';
+export function Markdown({ text }) {
+    return (_jsx("div", { className: "adecore-editor-markdown", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, remarkBreaks], children: text }) }));
+}

package/dist/PathText.d.ts

@@ -0,0 +1,4 @@
+export declare function PathText({ path, className }: {
+    path: string;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/PathText.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@adecore/ui';
+/*
+ * A path that gives way from its start, so the end of it, which names the place, stays readable. The
+ * full path is in the tooltip. The `bdi` keeps the slashes in reading order inside the right-to-left box.
+ */
+export function PathText({ path, className = '' }) {
+    if (path === '') {
+        return null;
+    }
+    return (_jsx(Tooltip, { label: path, children: _jsx("span", { className: `min-w-0 overflow-hidden text-left text-ellipsis whitespace-nowrap [direction:rtl] ${className}`, children: _jsx("bdi", { children: path }) }) }));
+}

package/dist/PeekPanel.d.ts

@@ -0,0 +1,6 @@
+import type { EditorLanguage } from './editor-language.ts';
+import type { PeekView } from './popups.ts';
+export declare function PeekPanel({ language, view }: {
+    language: EditorLanguage;
+    view: PeekView;
+}): import("react").ReactPortal | null;

package/dist/PeekPanel.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditorRendering } from './rendering-context.js';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { ChevronDown, ChevronRight, X } from 'lucide-react';
+import { fileUriToPath } from '@adecore/lsp';
+import { FileIcon, IconButton, Tooltip } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { basenameOf } from './paths.js';
+import { shikiLanguageOfPath } from './language-ids.js';
+import { PathText } from './PathText.js';
+import { PEEK_HEIGHT } from './peek.js';
+import { distinguishingFolders, visualColumnOf } from './peek-model.js';
+const TAB_SIZE = 4;
+const CODE = 'font-mono text-(length:--code-font-size) [tab-size:4] [&_.line]:block [&_.line]:h-(--code-line-height) [&_.line]:leading-(--code-line-height) [&_pre]:m-0 [&_pre]:bg-transparent! [&_pre]:p-0 [&_pre]:whitespace-pre [&_code]:font-mono';
+/* The code around the active reference, drawn like the editor's own rows: its gutter, the line the reference is on and the name marked. */
+function Preview({ view }) {
+    const { theme, highlight } = useEditorRendering();
+    const scroller = useRef(null);
+    const { preview } = view;
+    const [html, setHtml] = useState(null);
+    const path = preview === null ? null : fileUriToPath(preview.uri);
+    const key = preview === null ? '' : `${theme}\0${path}\0${preview.text}`;
+    useEffect(() => {
+        if (preview === null) {
+            return;
+        }
+        if (highlight === undefined) {
+            return;
+        }
+        let alive = true;
+        highlight(preview.text, shikiLanguageOfPath(path ?? preview.uri), theme)
+            .then((result) => alive && setHtml({ key, html: result }))
+            .catch(() => undefined);
+        return () => {
+            alive = false;
+        };
+    }, [preview, path, theme, key, highlight]);
+    useEffect(() => {
+        scroller.current?.scrollTo(0, 0);
+    }, [preview]);
+    if (preview === null) {
+        return _jsx("div", { className: "min-w-0 flex-1" });
+    }
+    const lines = preview.text.split('\n');
+    const name = preview.name === null ? null : columnsOf(lines[preview.active] ?? '', preview.name);
+    return (_jsx("div", { ref: scroller, className: "relative min-w-0 flex-1 overflow-auto pt-1", children: _jsxs("div", { className: "relative flex min-w-max", children: [_jsx("div", { className: "absolute inset-x-0 bg-surface-hover", style: { top: `calc(${preview.active} * var(--code-line-height))`, height: 'var(--code-line-height)' } }), _jsx("div", { className: "sticky left-0 z-10 w-16 shrink-0 pr-4 text-right font-mono text-(length:--code-font-size) text-text-faint select-none", children: lines.map((_, index) => (_jsx("div", { className: `h-(--code-line-height) leading-(--code-line-height) ${index === preview.active ? 'bg-surface-hover text-text' : 'bg-surface'}`, children: preview.startLine + index + 1 }, index))) }), _jsxs("div", { className: "relative", children: [name !== null && (_jsx("div", { className: "absolute rounded-sm bg-(--editor-occurrence) font-mono text-(length:--code-font-size)", style: {
+                                top: `calc(${preview.active} * var(--code-line-height))`,
+                                height: 'var(--code-line-height)',
+                                left: `${name.start}ch`,
+                                width: `${name.end - name.start}ch`
+                            } })), html?.key === key ? (_jsx("div", { className: `relative ${CODE}`, dangerouslySetInnerHTML: { __html: html.html } })) : (_jsx("div", { className: `relative ${CODE} whitespace-pre`, children: preview.text }))] })] }) }));
+}
+/* The name's stretch of a line in monospace columns, which is what the code is laid out in. */
+function columnsOf(line, name) {
+    const start = visualColumnOf(line, name.start, TAB_SIZE);
+    return { start, end: visualColumnOf(line, name.end, TAB_SIZE) };
+}
+function relativeTo(path, folder) {
+    return path.startsWith(`${folder}/`) ? path.slice(folder.length + 1) : path;
+}
+function folderOf(path) {
+    return path.slice(0, Math.max(0, path.lastIndexOf('/')));
+}
+/* A line of code with its name in the text color and the rest muted. */
+function PlaceText({ place }) {
+    if (place.text === '') {
+        return _jsx("span", { className: "min-w-0 truncate text-text-muted", children: `:${place.line + 1}` });
+    }
+    const { name } = place;
+    if (name === null) {
+        return _jsx("span", { className: "min-w-0 truncate text-text-muted", children: place.text });
+    }
+    return (_jsxs("span", { className: "min-w-0 truncate text-text-muted", children: [place.text.slice(0, name.start), _jsx("span", { className: "font-semibold text-text", children: place.text.slice(name.start, name.end) }), place.text.slice(name.end)] }));
+}
+function Places({ language, view }) {
+    const { t } = useTranslation('editor');
+    const activeRow = useRef(null);
+    const folder = language.project.folder;
+    const paths = useMemo(() => view.files.map((file) => relativeTo(fileUriToPath(file.uri) ?? file.uri, folder)), [view.files, folder]);
+    const folders = useMemo(() => distinguishingFolders(paths), [paths]);
+    useEffect(() => {
+        activeRow.current?.scrollIntoView({ block: 'nearest' });
+    }, [view.active]);
+    return (_jsx("div", { className: "w-1/3 shrink-0 overflow-y-auto border-l border-border py-1", children: view.files.map((file, fileIndex) => {
+            const collapsed = view.collapsed.includes(file.uri);
+            return (_jsxs("div", { children: [_jsx(Tooltip, { label: paths[fileIndex], side: "left", children: _jsxs("div", { className: "flex h-[22px] items-center pr-3 pl-1 text-xs", children: [_jsx(IconButton, { icon: collapsed ? ChevronRight : ChevronDown, size: "2xs", label: t(collapsed ? 'language.peek.expand' : 'language.peek.collapse'), onClick: () => language.peek.toggleFile(file.uri) }), _jsx(FileIcon, { path: paths[fileIndex], size: 14, className: "ml-0.5 shrink-0" }), _jsx("span", { className: "ml-1 max-w-full shrink-0 truncate", children: basenameOf(paths[fileIndex]) }), _jsx("span", { className: "ml-1.5 shrink-0 text-text-muted", children: formatNumber(file.places.length) }), folders[fileIndex] !== '' && _jsx("span", { className: "ml-2 min-w-0 flex-1 truncate text-text-faint", children: folders[fileIndex] })] }) }), !collapsed &&
+                        file.places.map((place) => (_jsx("button", { ref: place.id === view.active ? activeRow : undefined, type: "button", "data-active": place.id === view.active, className: "flex h-[22px] w-full items-center pr-3 pl-9 text-left font-mono text-code hover:bg-surface-hover data-[active=true]:bg-accent-soft", onClick: () => (place.id === view.active ? language.peek.go(place.id) : language.peek.select(place.id)), onDoubleClick: () => language.peek.go(place.id), children: _jsx(PlaceText, { place: place }) }, place.id)))] }, file.uri));
+        }) }));
+}
+/*
+ * The references of a name drawn in the row the editor leaves under the line: the file of the active
+ * reference and where it is, the code around it on the left and every place on the right. It lives in a
+ * portal into the editor's own row, which the editor makes again when it scrolls back into view. It has
+ * the editor's own ground and no edge of its own, so it reads as part of the file.
+ */
+export function PeekPanel({ language, view }) {
+    const { t } = useTranslation('editor');
+    const active = view.files.flatMap((file) => file.places).find((place) => place.id === view.active);
+    const path = active === undefined ? null : fileUriToPath(active.location.uri);
+    const folder = language.project.folder;
+    const shown = path === null ? '' : folderOf(relativeTo(path, folder));
+    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', {
+                                    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, { view: view }), _jsx(Places, { language: language, view: view })] }), _jsx("div", { className: "peek-hatch h-[14px]" })] }), view.container);
+}

package/dist/PickPopup.d.ts

@@ -0,0 +1,8 @@
+import type { EditorRect } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import type { PickView } from './popups.ts';
+export declare function PickPopup({ language, view, rect }: {
+    language: EditorLanguage;
+    view: PickView;
+    rect: EditorRect;
+}): import("react").ReactPortal;

package/dist/PickPopup.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { PathText } from './PathText.js';
+import { placePopup } from './popup-placement.js';
+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)';
+function PreviewLines({ preview }) {
+    return (_jsxs("div", { className: "flex flex-col gap-px border-t border-border p-1 font-mono text-code", children: [preview.removed.map((line, index) => (_jsxs("div", { className: "flex gap-2 rounded-sm bg-status-error/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "text-status-error", children: "\u2212" }), _jsx("span", { className: "min-w-0 truncate", children: line })] }, `-${index}`))), preview.added.map((line, index) => (_jsxs("div", { className: "flex gap-2 rounded-sm bg-status-idle/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "text-status-idle", children: "+" }), _jsx("span", { className: "min-w-0 truncate", children: line })] }, `+${index}`))), preview.note !== null && _jsx("div", { className: "px-1.5 font-sans text-xs text-text-muted", children: preview.note }), preview.refusal !== undefined && (_jsx("div", { role: "alert", className: "px-1.5 py-0.5 font-sans text-xs text-status-error", children: preview.refusal }))] }));
+}
+/*
+ * The list of an editor's pick feature under the character it belongs to. A press on a row never takes
+ * the focus from the editor, so the keys keep going to it while the list is open.
+ */
+export function PickPopup({ language, view, rect }) {
+    const card = useRef(null);
+    const activeRow = useRef(null);
+    // Every render: the character moves with the scroll, and the list changes size with its preview.
+    useLayoutEffect(() => {
+        const element = card.current;
+        if (element === null) {
+            return;
+        }
+        const placed = placePopup(rect, { width: element.offsetWidth, height: element.offsetHeight }, { width: window.innerWidth, height: window.innerHeight }, { gap: 2 });
+        element.style.left = `${Math.round(placed.left)}px`;
+        element.style.top = `${Math.round(placed.top)}px`;
+        element.style.maxHeight = `${Math.floor(placed.maxHeight)}px`;
+        element.style.visibility = 'visible';
+    });
+    useLayoutEffect(() => {
+        activeRow.current?.scrollIntoView({ block: 'nearest' });
+    }, [view.active]);
+    return createPortal(_jsxs("div", { ref: card, className: CARD, style: { visibility: 'hidden' }, onPointerDown: (event) => event.preventDefault(), children: [view.title !== null && _jsx("div", { className: "border-b border-border px-3 py-1.5 text-xs text-text-muted", children: view.title }), _jsx("div", { role: "listbox", className: "min-h-0 flex-1 overflow-y-auto p-1", children: view.groups.map((group, groupIndex) => (_jsxs("div", { role: "group", className: "flex flex-col", children: [group.title !== null && _jsx("div", { className: "px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint", children: group.title }), group.rows.map((row) => (_jsxs("button", { ref: row.id === view.active ? activeRow : undefined, type: "button", role: "option", "aria-selected": row.id === view.active, "data-active": row.id === view.active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => language.pick.choose(row.id), children: [_jsx("span", { className: row.path ? 'shrink-0' : 'min-w-0 truncate', children: row.label }), row.path ? (_jsx(PathText, { path: row.detail, className: "ml-auto font-mono text-text-faint" })) : (_jsx("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: row.id === view.active && row.detail === '' ? '↵' : row.detail }))] }, row.id)))] }, group.title ?? groupIndex))) }), view.preview !== null && _jsx(PreviewLines, { preview: view.preview })] }), document.body);
+}

package/dist/RenameCard.d.ts

@@ -0,0 +1,9 @@
+import type { EditorRect } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import type { RenameView } from './popups.ts';
+export declare function RenameCard({ language, view, rect, endRect }: {
+    language: EditorLanguage;
+    view: RenameView;
+    rect: EditorRect;
+    endRect: EditorRect | null;
+}): import("react").ReactPortal;

package/dist/RenameCard.js

@@ -0,0 +1,108 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { Sparkles } from 'lucide-react';
+import { fileUriToPath } from '@adecore/lsp';
+import { Button, Icon } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { basenameOf } from './paths.js';
+import { AnchoredPopup } from './AnchoredPopup.js';
+const CARD_ATTRIBUTE = 'data-rename-card';
+/* Whether the focus moved to something that belongs to the rename, which is not leaving it. */
+function staysInside(target) {
+    return target instanceof Element && target.closest(`[${CARD_ATTRIBUTE}]`) !== null;
+}
+/*
+ * Suggested names from the host, in a list under the input; a press fills the input and the
+ * typed name stays what Enter applies. While it is up the card says only its two keys.
+ */
+function Suggestions({ names, active, onPick }) {
+    const { t } = useTranslation('editor');
+    return (_jsxs("div", { className: "flex w-[250px] flex-col p-1.25", children: [_jsxs("div", { className: "flex items-center gap-1.5 px-2.25 pt-1.25 pb-1 text-xs font-semibold text-text-faint", children: [_jsx(Icon, { icon: Sparkles, size: 12, className: "shrink-0" }), t('language.rename.suggestions')] }), names.map((name, index) => (_jsxs("button", { type: "button", tabIndex: -1, className: `flex h-6.5 items-center gap-2 rounded-md px-2.25 text-left font-mono text-code text-text ${index === active ? 'bg-accent/20' : 'hover:bg-surface-hover'}`, onClick: () => onPick(name), children: [_jsx(Icon, { icon: Sparkles, size: 12, className: `shrink-0 ${index === active ? 'text-accent' : 'text-text-faint'}` }), name] }, name))), _jsxs("div", { className: "mt-1 flex gap-3 border-t border-border px-2.25 pt-1.75 pb-0.75 text-xs text-text-muted", children: [_jsxs("span", { children: ["\u21B5 ", t('language.rename.rename')] }), _jsxs("span", { children: ["\u21E5 ", t('language.rename.useSuggestion')] })] })] }));
+}
+function Hints({ view, active, onPick }) {
+    const { t } = useTranslation('editor');
+    const { occurrences } = view;
+    return (_jsxs("div", { className: "flex flex-col", children: [view.error !== null && (_jsx("div", { role: "alert", className: "max-w-[420px] px-2.5 py-1.5 text-xs text-status-error", children: view.error })), view.suggestions.length > 0 ? (_jsx(Suggestions, { names: view.suggestions, active: active, onPick: onPick })) : (_jsxs("div", { className: "flex items-center gap-3 px-2.5 py-1.5 text-xs whitespace-nowrap text-text-muted", children: [occurrences !== null && (_jsx("span", { children: occurrences.files > 1
+                            ? t('language.rename.occurrencesFiles', {
+                                count: occurrences.count,
+                                formatted: formatNumber(occurrences.count),
+                                files: formatNumber(occurrences.files)
+                            })
+                            : t('language.rename.occurrences', { count: occurrences.count, formatted: formatNumber(occurrences.count) }) })), _jsxs("span", { children: ["\u21B5 ", t('language.rename.rename')] }), _jsxs("span", { children: ["\u21E7\u21B5 ", t('language.rename.preview')] })] }))] }));
+}
+function Preview({ language, view }) {
+    const { t } = useTranslation('editor');
+    const folder = language.project.folder;
+    return (_jsxs("div", { className: "flex w-[520px] max-w-full flex-col", onPointerDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "max-h-[320px] overflow-y-auto", children: view.files.map((file) => {
+                    const path = fileUriToPath(file.uri);
+                    const shown = path === null ? file.uri : path.startsWith(`${folder}/`) ? path.slice(folder.length + 1) : path;
+                    return (_jsxs("div", { className: "border-b border-border last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 text-xs", children: [_jsx("span", { className: "font-medium", children: path === null ? shown : basenameOf(path) }), _jsx("span", { className: "min-w-0 truncate text-text-faint", children: shown })] }), _jsx("div", { className: "flex flex-col gap-px px-1 pb-1.5 font-mono text-code", children: file.rows.map((row) => (_jsxs("div", { className: "flex flex-col gap-px", children: [_jsxs("div", { className: "flex gap-2 rounded-sm bg-status-error/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "w-8 shrink-0 text-right text-text-faint", children: row.line }), _jsx("span", { className: "min-w-0 truncate", children: row.before })] }), _jsxs("div", { className: "flex gap-2 rounded-sm bg-status-idle/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "w-8 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: row.after })] })] }, row.line))) })] }, file.uri));
+                }) }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border p-2", children: [_jsx(Button, { size: "xs", variant: "ghost", onClick: () => language.rename.cancel(), children: t('language.rename.cancel') }), _jsx(Button, { size: "xs", variant: "primary", onClick: () => void language.rename.confirm(), children: t('language.rename.apply') })] })] }));
+}
+/*
+ * The rename of a symbol: an input over the symbol itself, and under it either the count of its places with
+ * the keys, or after Shift+Enter the lines the rename would change. The input keeps the focus the whole time,
+ * so Enter and Escape mean the same in both, and the focus leaving the card means the person went elsewhere.
+ */
+export function RenameCard({ language, view, rect, endRect }) {
+    const input = useRef(null);
+    const [value, setValue] = useState(view.placeholder);
+    const [active, setActive] = useState(0);
+    useLayoutEffect(() => {
+        input.current?.focus();
+        input.current?.select();
+    }, []);
+    function fill(name) {
+        setValue(name);
+        language.rename.edited();
+        input.current?.focus();
+    }
+    function onKeyDown(event) {
+        const names = view.phase === 'input' ? view.suggestions : [];
+        if (names.length > 0 && !event.nativeEvent.isComposing && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+            const step = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
+            if (step !== 0 || event.key === 'Tab') {
+                event.preventDefault();
+                event.stopPropagation();
+                if (event.key === 'Tab') {
+                    fill(names[Math.min(active, names.length - 1)]);
+                }
+                else {
+                    setActive((active + step + names.length) % names.length);
+                }
+                return;
+            }
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            language.rename.cancel();
+        }
+        else if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (view.phase === 'preview') {
+                void language.rename.confirm();
+            }
+            else if (!view.busy) {
+                void language.rename.submit(value, event.shiftKey);
+            }
+        }
+    }
+    const symbolWidth = endRect === null ? 0 : Math.max(0, endRect.left - rect.left);
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("input", { ref: input, [CARD_ATTRIBUTE]: '', value: view.phase === 'preview' ? view.name : value, readOnly: view.phase === 'preview' || view.busy, spellCheck: false, autoComplete: "off", "aria-label": view.original, className: "fixed z-(--z-popup) rounded-sm border border-accent bg-surface px-1 font-mono text-code text-text shadow-(--float-shadow) outline-none [field-sizing:content]", style: {
+                    left: Math.round(rect.left) - 5,
+                    top: Math.round(rect.top) - 2,
+                    height: Math.round(rect.bottom - rect.top) + 4,
+                    minWidth: Math.round(symbolWidth) + 10
+                }, onChange: (event) => {
+                    setValue(event.target.value);
+                    language.rename.edited();
+                }, onKeyDown: onKeyDown, onBlur: (event) => {
+                    if (!staysInside(event.relatedTarget)) {
+                        language.rename.cancel();
+                    }
+                } }), _jsx(AnchoredPopup, { rect: { ...rect, top: rect.top - 2, bottom: rect.bottom + 2 }, className: "overflow-hidden", placement: { gap: 2 }, children: _jsx("div", { [CARD_ATTRIBUTE]: '', onPointerDown: (event) => event.preventDefault(), children: view.phase === 'preview' ? _jsx(Preview, { language: language, view: view }) : _jsx(Hints, { view: view, active: active, onPick: fill }) }) })] }), document.body);
+}

package/dist/SignatureCard.d.ts

@@ -0,0 +1,4 @@
+import type { SignatureViewModel } from './signature-model.ts';
+export declare function SignatureCard({ model }: {
+    model: SignatureViewModel;
+}): import("react").JSX.Element;

package/dist/SignatureCard.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Markdown } from './Markdown.js';
+/* The signature with the parameter being typed underlined, and what is said about that parameter below it. */
+export function SignatureCard({ model }) {
+    const { label, active } = model;
+    const documentation = model.parameterDocumentation !== '' ? model.parameterDocumentation : model.documentation;
+    return (_jsxs("div", { className: "flex w-max max-w-[min(560px,calc(100vw-16px))] min-w-[240px] flex-col divide-y divide-border", children: [_jsxs("div", { className: "px-3 py-2 font-mono text-code break-words whitespace-pre-wrap text-text-muted", children: [active === null ? (label) : (_jsxs(_Fragment, { children: [label.slice(0, active.start), _jsx("span", { className: "font-semibold text-text underline decoration-2 underline-offset-2", children: label.slice(active.start, active.end) }), label.slice(active.end)] })), model.count > 1 && (_jsxs("span", { className: "ml-2 font-sans text-xs text-text-faint", children: [model.index + 1, "/", model.count] }))] }), documentation !== '' && (_jsxs("div", { className: "flex items-baseline gap-1.5 px-3 py-2 text-xs text-text-muted select-text [&_.adecore-editor-markdown]:text-xs [&_.adecore-editor-markdown_p]:m-0", children: [model.parameterName !== '' && model.parameterDocumentation !== '' && (_jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0 font-semibold text-text", children: model.parameterName }), _jsx("span", { "aria-hidden": true, children: "\u00B7" })] })), _jsx("div", { className: "min-w-0", children: _jsx(Markdown, { text: documentation }) })] }))] }));
+}

package/dist/SymbolPicker.d.ts

@@ -0,0 +1,6 @@
+import type { EditorLanguage } from './editor-language.ts';
+import type { SymbolsView } from './popups.ts';
+export declare function SymbolPicker({ language, view }: {
+    language: EditorLanguage;
+    view: SymbolsView;
+}): import("react").ReactPortal;