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

package/src/LanguagePopups.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useReducer, type ReactNode } from 'react';
+import { useStore } from 'zustand';
+import type { EditorLanguage } from './editor-language.ts';
+import { AnchoredPopup } from './AnchoredPopup.tsx';
+import { CodeAuthorsCard } from './CodeAuthorsCard.tsx';
+import { CompletionPopup } from './CompletionPopup.tsx';
+import { EditorContextMenu } from './EditorContextMenu.tsx';
+import { HoverCard } from './HoverCard.tsx';
+import { PeekPanel } from './PeekPanel.tsx';
+import { PickPopup } from './PickPopup.tsx';
+import { RenameCard } from './RenameCard.tsx';
+import { SymbolPicker } from './SymbolPicker.tsx';
+import { SignatureCard } from './SignatureCard.tsx';
+
+/*
+ * 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 }: { language: EditorLanguage; contextMenuItems?: (language: EditorLanguage) => ReactNode }) {
+    const [, redraw] = useReducer((count: number) => 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 (
+        <>
+            {hover !== null && hoverRect !== null && (
+                <AnchoredPopup rect={hoverRect} onPointerEnter={() => language.hover.holdCard(true)} onPointerLeave={() => language.hover.holdCard(false)}>
+                    <HoverCard language={language} problems={hover.problems} info={hover.info} anchor={hover.anchor} position={hover.position} />
+                </AnchoredPopup>
+            )}
+            {signature !== null && signatureRect !== null && (
+                <AnchoredPopup rect={signatureRect} placement={{ prefer: 'above' }}>
+                    <SignatureCard model={signature.model} />
+                </AnchoredPopup>
+            )}
+            {completion !== null && completionRect !== null && <CompletionPopup language={language} view={completion} rect={completionRect} />}
+            {pick !== null && pickRect !== null && <PickPopup language={language} view={pick} rect={pickRect} />}
+            {menu !== null && (
+                <EditorContextMenu language={language} view={menu}>
+                    {contextMenuItems?.(language)}
+                </EditorContextMenu>
+            )}
+            {symbols !== null && <SymbolPicker language={language} view={symbols} />}
+            {peek !== null && <PeekPanel language={language} view={peek} />}
+            {authors !== null && <CodeAuthorsCard language={language} view={authors} />}
+            {rename !== null && renameRect !== null && <RenameCard language={language} view={rename} rect={renameRect} endRect={renameEnd} />}
+        </>
+    );
+}

package/src/Markdown.tsx

@@ -0,0 +1,11 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkBreaks from 'remark-breaks';
+
+export function Markdown({ text }: { text: string }) {
+    return (
+        <div className="adecore-editor-markdown">
+            <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>{text}</ReactMarkdown>
+        </div>
+    );
+}

package/src/PathText.tsx

@@ -0,0 +1,18 @@
+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 = '' }: { path: string; className?: string }) {
+    if (path === '') {
+        return null;
+    }
+    return (
+        <Tooltip label={path}>
+            <span className={`min-w-0 overflow-hidden text-left text-ellipsis whitespace-nowrap [direction:rtl] ${className}`}>
+                <bdi>{path}</bdi>
+            </span>
+        </Tooltip>
+    );
+}

package/src/PeekPanel.tsx

@@ -0,0 +1,222 @@
+import { useEditorRendering } from './rendering-context.ts';
+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.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import { shikiLanguageOfPath } from './language-ids.ts';
+import { PathText } from './PathText.tsx';
+import { PEEK_HEIGHT } from './peek.ts';
+import { distinguishingFolders, visualColumnOf, type NameRange, type PeekPlace } from './peek-model.ts';
+import type { PeekView } from './popups.ts';
+
+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 }: { view: PeekView }) {
+    const { theme, highlight } = useEditorRendering();
+    const scroller = useRef<HTMLDivElement>(null);
+    const { preview } = view;
+    const [html, setHtml] = useState<{ key: string; html: string } | null>(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 <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 (
+        <div ref={scroller} className="relative min-w-0 flex-1 overflow-auto pt-1">
+            <div className="relative flex min-w-max">
+                <div
+                    className="absolute inset-x-0 bg-surface-hover"
+                    style={{ top: `calc(${preview.active} * var(--code-line-height))`, height: 'var(--code-line-height)' }}
+                />
+                <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">
+                    {lines.map((_, index) => (
+                        <div
+                            key={index}
+                            className={`h-(--code-line-height) leading-(--code-line-height) ${index === preview.active ? 'bg-surface-hover text-text' : 'bg-surface'}`}
+                        >
+                            {preview.startLine + index + 1}
+                        </div>
+                    ))}
+                </div>
+                <div className="relative">
+                    {name !== null && (
+                        <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 ? (
+                        <div className={`relative ${CODE}`} dangerouslySetInnerHTML={{ __html: html.html }} />
+                    ) : (
+                        <div className={`relative ${CODE} whitespace-pre`}>{preview.text}</div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/* The name's stretch of a line in monospace columns, which is what the code is laid out in. */
+function columnsOf(line: string, name: NameRange): NameRange {
+    const start = visualColumnOf(line, name.start, TAB_SIZE);
+    return { start, end: visualColumnOf(line, name.end, TAB_SIZE) };
+}
+
+function relativeTo(path: string, folder: string): string {
+    return path.startsWith(`${folder}/`) ? path.slice(folder.length + 1) : path;
+}
+
+function folderOf(path: string): string {
+    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 }: { place: PeekPlace }) {
+    if (place.text === '') {
+        return <span className="min-w-0 truncate text-text-muted">{`:${place.line + 1}`}</span>;
+    }
+    const { name } = place;
+    if (name === null) {
+        return <span className="min-w-0 truncate text-text-muted">{place.text}</span>;
+    }
+    return (
+        <span className="min-w-0 truncate text-text-muted">
+            {place.text.slice(0, name.start)}
+            <span className="font-semibold text-text">{place.text.slice(name.start, name.end)}</span>
+            {place.text.slice(name.end)}
+        </span>
+    );
+}
+
+function Places({ language, view }: { language: EditorLanguage; view: PeekView }) {
+    const { t } = useTranslation('editor');
+    const activeRow = useRef<HTMLButtonElement>(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 (
+        <div className="w-1/3 shrink-0 overflow-y-auto border-l border-border py-1">
+            {view.files.map((file, fileIndex) => {
+                const collapsed = view.collapsed.includes(file.uri);
+                return (
+                    <div key={file.uri}>
+                        <Tooltip label={paths[fileIndex]!} side="left">
+                            <div className="flex h-[22px] items-center pr-3 pl-1 text-xs">
+                                <IconButton
+                                    icon={collapsed ? ChevronRight : ChevronDown}
+                                    size="2xs"
+                                    label={t(collapsed ? 'language.peek.expand' : 'language.peek.collapse')}
+                                    onClick={() => language.peek.toggleFile(file.uri)}
+                                />
+                                <FileIcon path={paths[fileIndex]!} size={14} className="ml-0.5 shrink-0" />
+                                <span className="ml-1 max-w-full shrink-0 truncate">{basenameOf(paths[fileIndex]!)}</span>
+                                <span className="ml-1.5 shrink-0 text-text-muted">{formatNumber(file.places.length)}</span>
+                                {folders[fileIndex] !== '' && <span className="ml-2 min-w-0 flex-1 truncate text-text-faint">{folders[fileIndex]}</span>}
+                            </div>
+                        </Tooltip>
+                        {!collapsed &&
+                            file.places.map((place) => (
+                                <button
+                                    key={place.id}
+                                    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)}
+                                >
+                                    <PlaceText place={place} />
+                                </button>
+                            ))}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+
+/*
+ * 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 }: { language: EditorLanguage; view: PeekView }) {
+    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(
+        <div
+            className="flex flex-col bg-surface pt-[2px] font-sans text-xs text-text"
+            style={{ height: PEEK_HEIGHT }}
+            onPointerDown={(event) => event.preventDefault()}
+        >
+            <div className="peek-hatch h-[14px]" />
+            <div className="flex h-[31px] shrink-0 items-center gap-2 border-b border-border pr-2 pl-3 text-sm">
+                <span className="shrink-0 font-medium">{path === null ? '' : basenameOf(path)}</span>
+                <PathText path={shown} className="text-text-muted" />
+                <div className="ml-auto flex shrink-0 items-center gap-1">
+                    <span className="text-text-muted">
+                        {t(view.kind === 'definitions' ? 'language.peek.definitions' : 'language.peek.references', {
+                            count: view.count,
+                            formatted: formatNumber(view.count)
+                        })}
+                    </span>
+                    <IconButton icon={X} size="xs" label={t('language.peek.close')} onClick={() => language.peek.close()} />
+                </div>
+            </div>
+            <div className="flex h-[180px] shrink-0">
+                <Preview view={view} />
+                <Places language={language} view={view} />
+            </div>
+            <div className="peek-hatch h-[14px]" />
+        </div>,
+        view.container
+    );
+}

package/src/PickPopup.tsx

@@ -0,0 +1,102 @@
+import { useLayoutEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import type { EditorRect } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import { PathText } from './PathText.tsx';
+import { placePopup } from './popup-placement.ts';
+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)';
+
+function PreviewLines({ preview }: { preview: PickPreview }) {
+    return (
+        <div className="flex flex-col gap-px border-t border-border p-1 font-mono text-code">
+            {preview.removed.map((line, index) => (
+                <div key={`-${index}`} className="flex gap-2 rounded-sm bg-status-error/10 px-1.5 whitespace-pre">
+                    <span className="text-status-error">−</span>
+                    <span className="min-w-0 truncate">{line}</span>
+                </div>
+            ))}
+            {preview.added.map((line, index) => (
+                <div key={`+${index}`} className="flex gap-2 rounded-sm bg-status-idle/10 px-1.5 whitespace-pre">
+                    <span className="text-status-idle">+</span>
+                    <span className="min-w-0 truncate">{line}</span>
+                </div>
+            ))}
+            {preview.note !== null && <div className="px-1.5 font-sans text-xs text-text-muted">{preview.note}</div>}
+            {preview.refusal !== undefined && (
+                <div role="alert" className="px-1.5 py-0.5 font-sans text-xs text-status-error">
+                    {preview.refusal}
+                </div>
+            )}
+        </div>
+    );
+}
+
+/*
+ * 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 }: { language: EditorLanguage; view: PickView; rect: EditorRect }) {
+    const card = useRef<HTMLDivElement>(null);
+    const activeRow = useRef<HTMLButtonElement>(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(
+        <div ref={card} className={CARD} style={{ visibility: 'hidden' }} onPointerDown={(event) => event.preventDefault()}>
+            {view.title !== null && <div className="border-b border-border px-3 py-1.5 text-xs text-text-muted">{view.title}</div>}
+            <div 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">
+                        {group.title !== null && <div className="px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint">{group.title}</div>}
+                        {group.rows.map((row) => (
+                            <button
+                                key={row.id}
+                                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)}
+                            >
+                                <span className={row.path ? 'shrink-0' : 'min-w-0 truncate'}>{row.label}</span>
+                                {row.path ? (
+                                    <PathText path={row.detail} className="ml-auto font-mono text-text-faint" />
+                                ) : (
+                                    <span className="ml-auto shrink-0 font-mono text-text-faint">
+                                        {row.id === view.active && row.detail === '' ? '↵' : row.detail}
+                                    </span>
+                                )}
+                            </button>
+                        ))}
+                    </div>
+                ))}
+            </div>
+            {view.preview !== null && <PreviewLines preview={view.preview} />}
+        </div>,
+        document.body
+    );
+}

package/src/RenameCard.tsx

@@ -0,0 +1,219 @@
+import { useLayoutEffect, useRef, useState, type KeyboardEvent } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { Sparkles } from 'lucide-react';
+import { fileUriToPath } from '@adecore/lsp';
+import type { EditorRect } from '@adecore/editor';
+import { Button, Icon } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { basenameOf } from './paths.ts';
+import { AnchoredPopup } from './AnchoredPopup.tsx';
+import type { EditorLanguage } from './editor-language.ts';
+import type { RenameView } from './popups.ts';
+
+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: EventTarget | null): boolean {
+    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 }: { names: readonly string[]; active: number; onPick(name: string): void }) {
+    const { t } = useTranslation('editor');
+    return (
+        <div className="flex w-[250px] flex-col p-1.25">
+            <div className="flex items-center gap-1.5 px-2.25 pt-1.25 pb-1 text-xs font-semibold text-text-faint">
+                <Icon icon={Sparkles} size={12} className="shrink-0" />
+                {t('language.rename.suggestions')}
+            </div>
+            {names.map((name, index) => (
+                <button
+                    key={name}
+                    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)}
+                >
+                    <Icon icon={Sparkles} size={12} className={`shrink-0 ${index === active ? 'text-accent' : 'text-text-faint'}`} />
+                    {name}
+                </button>
+            ))}
+            <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">
+                <span>↵ {t('language.rename.rename')}</span>
+                <span>⇥ {t('language.rename.useSuggestion')}</span>
+            </div>
+        </div>
+    );
+}
+
+function Hints({ view, active, onPick }: { view: RenameView; active: number; onPick(name: string): void }) {
+    const { t } = useTranslation('editor');
+    const { occurrences } = view;
+    return (
+        <div className="flex flex-col">
+            {view.error !== null && (
+                <div role="alert" className="max-w-[420px] px-2.5 py-1.5 text-xs text-status-error">
+                    {view.error}
+                </div>
+            )}
+            {view.suggestions.length > 0 ? (
+                <Suggestions names={view.suggestions} active={active} onPick={onPick} />
+            ) : (
+                <div className="flex items-center gap-3 px-2.5 py-1.5 text-xs whitespace-nowrap text-text-muted">
+                    {occurrences !== null && (
+                        <span>
+                            {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) })}
+                        </span>
+                    )}
+                    <span>↵ {t('language.rename.rename')}</span>
+                    <span>⇧↵ {t('language.rename.preview')}</span>
+                </div>
+            )}
+        </div>
+    );
+}
+
+function Preview({ language, view }: { language: EditorLanguage; view: RenameView }) {
+    const { t } = useTranslation('editor');
+    const folder = language.project.folder;
+    return (
+        <div className="flex w-[520px] max-w-full flex-col" onPointerDown={(event) => event.preventDefault()}>
+            <div className="max-h-[320px] overflow-y-auto">
+                {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 (
+                        <div key={file.uri} className="border-b border-border last:border-b-0">
+                            <div className="flex items-center gap-2 px-3 py-1.5 text-xs">
+                                <span className="font-medium">{path === null ? shown : basenameOf(path)}</span>
+                                <span className="min-w-0 truncate text-text-faint">{shown}</span>
+                            </div>
+                            <div className="flex flex-col gap-px px-1 pb-1.5 font-mono text-code">
+                                {file.rows.map((row) => (
+                                    <div key={row.line} className="flex flex-col gap-px">
+                                        <div className="flex gap-2 rounded-sm bg-status-error/10 px-1.5 whitespace-pre">
+                                            <span className="w-8 shrink-0 text-right text-text-faint">{row.line}</span>
+                                            <span className="min-w-0 truncate">{row.before}</span>
+                                        </div>
+                                        <div className="flex gap-2 rounded-sm bg-status-idle/10 px-1.5 whitespace-pre">
+                                            <span className="w-8 shrink-0" />
+                                            <span className="min-w-0 truncate">{row.after}</span>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+            <div className="flex items-center justify-end gap-2 border-t border-border p-2">
+                <Button size="xs" variant="ghost" onClick={() => language.rename.cancel()}>
+                    {t('language.rename.cancel')}
+                </Button>
+                <Button size="xs" variant="primary" onClick={() => void language.rename.confirm()}>
+                    {t('language.rename.apply')}
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+/*
+ * 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 }: { language: EditorLanguage; view: RenameView; rect: EditorRect; endRect: EditorRect | null }) {
+    const input = useRef<HTMLInputElement>(null);
+    const [value, setValue] = useState(view.placeholder);
+    const [active, setActive] = useState(0);
+
+    useLayoutEffect(() => {
+        input.current?.focus();
+        input.current?.select();
+    }, []);
+
+    function fill(name: string): void {
+        setValue(name);
+        language.rename.edited();
+        input.current?.focus();
+    }
+
+    function onKeyDown(event: KeyboardEvent<HTMLInputElement>): void {
+        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(
+        <>
+            <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();
+                    }
+                }}
+            />
+            <AnchoredPopup rect={{ ...rect, top: rect.top - 2, bottom: rect.bottom + 2 }} className="overflow-hidden" placement={{ gap: 2 }}>
+                <div {...{ [CARD_ATTRIBUTE]: '' }} onPointerDown={(event) => event.preventDefault()}>
+                    {view.phase === 'preview' ? <Preview language={language} view={view} /> : <Hints view={view} active={active} onPick={fill} />}
+                </div>
+            </AnchoredPopup>
+        </>,
+        document.body
+    );
+}