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

package/dist/workspace-edit.js

@@ -0,0 +1,147 @@
+import { applyTextEdits, fileUriToPath } from '@adecore/lsp';
+function refused(failureReason) {
+    return { applied: false, failureReason };
+}
+/* The steps of an edit; null when it creates or deletes a file, which an edit is not applied with. */
+function stepsOf(edit) {
+    const steps = [];
+    for (const change of edit.documentChanges ?? []) {
+        if ('textDocument' in change) {
+            steps.push({ kind: 'edits', uri: change.textDocument.uri, edits: change.edits });
+        }
+        else if (change.kind === 'rename') {
+            steps.push({ kind: 'rename', oldUri: change.oldUri, newUri: change.newUri });
+        }
+        else {
+            return null;
+        }
+    }
+    if (edit.documentChanges === undefined) {
+        for (const [uri, edits] of Object.entries(edit.changes ?? {})) {
+            steps.push({ kind: 'edits', uri, edits });
+        }
+    }
+    return steps;
+}
+/* The text edits of an edit per document, as the entries a document has in it; null when it creates or deletes a file. */
+export function entriesOf(edit) {
+    const steps = stepsOf(edit);
+    if (steps === null) {
+        return null;
+    }
+    const entries = new Map();
+    for (const step of steps) {
+        if (step.kind === 'edits') {
+            entries.set(step.uri, [...(entries.get(step.uri) ?? []), step.edits]);
+        }
+    }
+    return entries;
+}
+/* The files an edit moves, which a preview of lines cannot show. */
+export function renamesOf(edit) {
+    return (edit.documentChanges ?? []).filter((change) => 'kind' in change && change.kind === 'rename');
+}
+function contentChangeOf(edit) {
+    return { range: edit.range, text: edit.newText };
+}
+/*
+ * Applies an LSP workspace edit on the client, step by step in the order it says. A file an editor holds takes
+ * its edits as one undo step. Any other file gets its new text as an unsaved draft that a person saves, and
+ * nothing is written to disk on a server's word alone, unless the edit also moves a file: the edits and the
+ * move are then one change, so every file is saved through the machine and the move is made there. The
+ * edit is checked against every text first, so one that does not fit changes nothing.
+ */
+export async function applyWorkspaceEdit(edit, host) {
+    const steps = stepsOf(edit);
+    if (steps === null) {
+        return refused('Creating and deleting files is not supported yet');
+    }
+    const planned = await plan(steps, host);
+    if (typeof planned === 'string') {
+        return refused(planned);
+    }
+    const moving = planned.some((item) => item.kind === 'rename');
+    const staged = [];
+    for (const item of planned) {
+        if (item.kind === 'rename') {
+            const reason = await host.files.rename(item.oldPath, item.newPath);
+            if (reason !== null) {
+                return refused(reason);
+            }
+            continue;
+        }
+        if (item.after === item.before) {
+            continue;
+        }
+        const editor = host.editorOf(item.uri);
+        if (editor) {
+            // The edits stay apart, so the caret and what is drawn over the text stay where they were between them.
+            if (!editor.applyEdits(item.edits.map(contentChangeOf))) {
+                return refused(`${item.uri} is read only`);
+            }
+            continue;
+        }
+        const path = fileUriToPath(item.uri);
+        if (path === null || item.disk === null) {
+            continue;
+        }
+        const file = { path, disk: item.disk, text: item.after };
+        if (!moving) {
+            staged.push(file);
+            continue;
+        }
+        const reason = await host.files.save([file]);
+        if (reason !== null) {
+            return refused(reason);
+        }
+    }
+    if (staged.length > 0) {
+        host.files?.stage(staged);
+    }
+    return { applied: true };
+}
+/* Reads every text the edit needs and works out what each step leaves, or says why it does not fit. */
+async function plan(steps, host) {
+    const texts = new Map();
+    // A file that has moved is read where it still stands: nothing moves until the plan is made.
+    const origins = new Map();
+    const planned = [];
+    for (const step of steps) {
+        if (step.kind === 'rename') {
+            const oldPath = fileUriToPath(step.oldUri);
+            const newPath = fileUriToPath(step.newUri);
+            if (oldPath === null || newPath === null || host.files === null) {
+                return `${step.oldUri} cannot be moved from here`;
+            }
+            origins.set(step.newUri, origins.get(step.oldUri) ?? step.oldUri);
+            planned.push({ kind: 'rename', oldPath, newPath });
+            continue;
+        }
+        const source = origins.get(step.uri) ?? step.uri;
+        if (!texts.has(source)) {
+            const editor = host.editorOf(source);
+            if (editor) {
+                texts.set(source, { text: editor.getText(), disk: null });
+            }
+            else {
+                const path = fileUriToPath(source);
+                const disk = path === null || host.files === null ? null : await host.files.read(path);
+                if (disk === null) {
+                    return `${source} cannot be read as text`;
+                }
+                texts.set(source, { text: disk.text, disk });
+            }
+        }
+        const held = texts.get(source);
+        let after;
+        try {
+            after = applyTextEdits(held.text, step.edits);
+        }
+        catch (error) {
+            return error instanceof Error ? error.message : String(error);
+        }
+        planned.push({ kind: 'edits', uri: step.uri, edits: step.edits, before: held.text, after, disk: held.disk });
+        texts.set(source, { text: after, disk: held.disk });
+    }
+    return planned;
+}

package/package.json

@@ -1,11 +1,83 @@
 {
   "name": "@adecore/editor-react",
-  "version": "0.0.1",
-  "description": "Placeholder for the first release.",
+  "version": "0.17.0-beta.1",
+  "type": "module",
+  "description": "Language-enabled editors, feature coordination and React popups over injected language services.",
   "license": "FSL-1.1-MIT",
+  "author": "Bas Milius",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/basmilius/adecore.git",
     "directory": "packages/editor-react"
+  },
+  "bugs": {
+    "url": "https://github.com/basmilius/adecore/issues"
+  },
+  "homepage": "https://adecore.dev/editor-react/",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/test-support.ts",
+    "LICENSE",
+    "!src/test-setup.ts"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./models": {
+      "source": "./src/models.ts",
+      "types": "./dist/models.d.ts",
+      "default": "./dist/models.js"
+    },
+    "./testing": {
+      "source": "./src/testing.ts",
+      "types": "./dist/testing.d.ts",
+      "default": "./dist/testing.js"
+    },
+    "./editor-react.css": {
+      "source": "./src/editor-react.css",
+      "default": "./dist/editor-react.css"
+    },
+    "./locales/*.json": {
+      "source": "./src/locales/*.json",
+      "default": "./dist/locales/*.json"
+    }
+  },
+  "scripts": {
+    "build": "bun scripts/build.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test --conditions=source"
+  },
+  "dependencies": {
+    "@adecore/editor": "0.17.0-beta.1",
+    "@adecore/lsp": "0.17.0-beta.1",
+    "@adecore/merge": "0.17.0-beta.1",
+    "zustand": "^5.0.15",
+    "lucide-react": "^1.47.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "remark-breaks": "^4.0.0"
+  },
+  "peerDependencies": {
+    "@adecore/ui": "^0.17.0-beta.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "i18next": "^26.4.2",
+    "react-i18next": "^17.0.15"
+  },
+  "devDependencies": {
+    "@adecore/ui": "workspace:*",
+    "@types/bun": "^1.4.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "typescript": "^7.0.2"
   }
 }

package/src/AnchoredPopup.tsx

@@ -0,0 +1,51 @@
+import { useLayoutEffect, useRef, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import type { EditorRect } from '@adecore/editor';
+import { placePopup, type PlaceOptions } from './popup-placement.ts';
+
+export interface AnchoredPopupProps {
+    /* The character the popup belongs to, in the page's pixels. */
+    rect: EditorRect;
+    className?: string;
+    children: ReactNode;
+    placement?: PlaceOptions;
+    onPointerEnter?(): void;
+    onPointerLeave?(): void;
+}
+
+/*
+ * A card next to a character of the editor, in a layer of the page itself: a canvas puts a scale on its
+ * nodes, and a card inside one would be drawn at that scale and cut off by the node's edge. It is
+ * placed from the character's screen rectangle, so it is right at any zoom, and it never leaves the window.
+ */
+export function AnchoredPopup({ rect, className, children, placement, onPointerEnter, onPointerLeave }: AnchoredPopupProps) {
+    const element = useRef<HTMLDivElement>(null);
+
+    // Every render, since the character moves when the editor scrolls and the card's own size follows its content.
+    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);
+        popup.style.left = `${Math.round(placed.left)}px`;
+        popup.style.top = `${Math.round(placed.top)}px`;
+        popup.style.maxHeight = `${Math.floor(placed.maxHeight)}px`;
+        popup.style.visibility = 'visible';
+    });
+
+    return createPortal(
+        <div
+            ref={element}
+            className={`fixed top-0 left-0 z-(--z-popup) overflow-y-auto rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow) ${className ?? ''}`}
+            style={{ visibility: 'hidden' }}
+            onPointerEnter={onPointerEnter}
+            onPointerLeave={onPointerLeave}
+        >
+            {children}
+        </div>,
+        document.body
+    );
+}

package/src/AttributionCard.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { EditorMarkColor, EditorRect } from '@adecore/editor';
+import { AnchoredPopup } from './AnchoredPopup.tsx';
+
+export interface AttributionCardProps {
+    rect: EditorRect;
+    title: string;
+    subtitle?: string;
+    metadata?: ReactNode;
+    prompt?: string;
+    color?: EditorMarkColor;
+    icon?: ReactNode;
+    actions?: ReactNode;
+    onHold?(inside: boolean): void;
+}
+
+export function AttributionCard({ rect, title, subtitle, metadata, prompt, color, icon, actions, onHold }: AttributionCardProps) {
+    return (
+        <AnchoredPopup rect={rect} className="flex w-105 flex-col text-xs" onPointerEnter={() => onHold?.(true)} onPointerLeave={() => onHold?.(false)}>
+            <div className="flex flex-col gap-2 px-3 pt-3 pb-2.5">
+                <div className="flex items-center gap-2">
+                    <span className="flex shrink-0 items-center" style={{ color: color?.startsWith('--') ? `var(${color})` : color }}>
+                        {icon ?? <span className="size-2 rounded-full bg-current" />}
+                    </span>
+                    <span className="shrink-0 text-sm font-semibold text-text">{title}</span>
+                    {subtitle !== undefined && <span className="min-w-0 truncate text-sm text-text-muted">{subtitle}</span>}
+                </div>
+                {metadata !== undefined && <div className="text-text-muted">{metadata}</div>}
+                {prompt !== undefined && prompt !== '' && (
+                    <q className="line-clamp-4 rounded-md bg-surface-hover px-2.5 py-2 text-sm leading-4.5 text-text select-text">{prompt}</q>
+                )}
+            </div>
+            {actions !== undefined && <div className="flex gap-1 border-t border-border px-1.5 py-1.25">{actions}</div>}
+        </AnchoredPopup>
+    );
+}

package/src/BaselineStatus.tsx

@@ -0,0 +1,20 @@
+import { CircleCheck, Sparkles, TriangleAlert } from 'lucide-react';
+import { Icon } from '@adecore/ui';
+import type { Baseline, BaselineLevel } from './hover-content.ts';
+
+const BASELINE_MARKS: Record<BaselineLevel, { icon: typeof CircleCheck; color: string }> = {
+    widely: { icon: CircleCheck, color: 'text-status-idle' },
+    newly: { icon: Sparkles, color: 'text-status-running' },
+    limited: { icon: TriangleAlert, color: 'text-status-needs-you' }
+};
+
+/* 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}`} />
+            <span className="min-w-0">{baseline.text}</span>
+        </div>
+    );
+}

package/src/ChangeReview.tsx

@@ -0,0 +1,43 @@
+import { useLayoutEffect, useRef, type ReactNode } from 'react';
+import type { Editor } from '@adecore/editor';
+import { diffSegments, emphasisOf } from './proposal-model.ts';
+
+export interface ChangeReviewProps {
+    editor: Editor;
+    selected: string;
+    proposal: string;
+    startLine?: number;
+    actions?: ReactNode;
+    className?: string;
+    label: string;
+}
+
+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'
+                    ? {}
+                    : { sign: segment.kind === 'removed' ? '-' : '+', color: segment.kind === 'removed' ? '--editor-deleted' : '--editor-added' }),
+                faded: segment.kind === 'removed',
+                emphasis: emphasisOf(segment)
+            });
+        }
+        return () => element.replaceChildren();
+    }, [editor, selected, proposal, startLine]);
+    return (
+        <section className={className} aria-label={label}>
+            <div ref={code} />
+            {actions}
+        </section>
+    );
+}

package/src/CodeAuthorsCard.tsx

@@ -0,0 +1,81 @@
+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';
+import { formatNumber } from '@adecore/ui/format';
+import { relativeTime } from './relative-time.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import type { AuthorsView } from './popups.ts';
+
+const MINUTE_MS = 60_000;
+
+/*
+ * Who wrote a declaration, by lines, and the newest commit that touched it. It opens beside the entry that
+ * was pressed and closes on Escape or a press anywhere else; Escape hands the keyboard back to the editor.
+ */
+export function CodeAuthorsCard({ language, view }: { language: EditorLanguage; view: AuthorsView }) {
+    const { t } = useTranslation('editor');
+    const now = Math.floor(useNow(MINUTE_MS) / 1000);
+    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]);
+
+    return (
+        <Popover.Root open onOpenChange={(open, details) => !open && language.codeVision.closeAuthors(details.reason === 'escape-key')}>
+            <Popover.Popup anchor={anchor} side="bottom" align="start" sideOffset={4} className="flex w-72 flex-col gap-2 p-3 text-xs">
+                <Popover.Title className="flex items-center gap-1.5 font-medium text-text">
+                    <Icon icon={authors.length > 1 ? Users : User} size={14} className="shrink-0 text-text-muted" />
+                    <span className="min-w-0 truncate">{view.name}</span>
+                </Popover.Title>
+                <ul className="flex flex-col gap-1">
+                    {authors.map((author) => (
+                        <li key={author.name} className="flex items-baseline gap-2">
+                            <Tooltip label={author.email}>
+                                <span className="min-w-0 grow truncate text-text">{author.name}</span>
+                            </Tooltip>
+                            <span className="shrink-0 text-text-muted">
+                                {t('language.codeVision.lines', { count: author.lines, formatted: formatNumber(author.lines) })}
+                            </span>
+                        </li>
+                    ))}
+                    {uncommittedLines > 0 && (
+                        <li className="flex items-baseline gap-2 text-text-muted">
+                            <span className="min-w-0 grow truncate">{t('language.codeVision.uncommitted')}</span>
+                            <span className="shrink-0">
+                                {t('language.codeVision.lines', { count: uncommittedLines, formatted: formatNumber(uncommittedLines) })}
+                            </span>
+                        </li>
+                    )}
+                </ul>
+                {latest !== null && (
+                    <>
+                        <Separator />
+                        <div className="flex flex-col gap-1">
+                            <span className="text-text-muted">{t('language.codeVision.latest')}</span>
+                            <span className="text-text select-text">{latest.summary}</span>
+                            <span className="flex items-center gap-1.5 text-text-muted">
+                                <span className="font-mono select-text">{latest.shortHash}</span>
+                                <span className="min-w-0 truncate">{latest.author}</span>
+                                <span className="shrink-0">{relativeTime(latest.at, now)}</span>
+                            </span>
+                        </div>
+                        {view.openCommit !== null && (
+                            <div className="flex justify-end">
+                                <Popover.Close
+                                    render={
+                                        <Button size="xs" variant="secondary" onClick={view.openCommit}>
+                                            <Icon icon={GitCommitHorizontal} size={14} />
+                                            {t('language.codeVision.showCommit')}
+                                        </Button>
+                                    }
+                                />
+                            </div>
+                        )}
+                    </>
+                )}
+            </Popover.Popup>
+        </Popover.Root>
+    );
+}

package/src/CompletionPopup.tsx

@@ -0,0 +1,196 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import type { EditorRect } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import { kindLetterOf, kindToneOf, rowWindow, type KindTone } from './completion-model.ts';
+import { SourceLine, SymbolSections } from './HoverSections.tsx';
+import { PathText } from './PathText.tsx';
+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'
+};
+
+/* 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) =>
+                run.marked ? (
+                    <span key={index} className="font-semibold text-accent">
+                        {run.text}
+                    </span>
+                ) : (
+                    run.text
+                )
+            )}
+        </>
+    );
+}
+
+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;
+
+/*
+ * The suggestions under the word being typed: a narrow list with the parameters of each, and the
+ * documentation of the active one beside it, or under it when the window has no room at its side. A
+ * press on a row never takes the focus from the editor, so typing goes on while the list is open.
+ */
+export function CompletionPopup({ language, view, rect }: { language: EditorLanguage; view: CompletionView; rect: EditorRect }) {
+    const { t } = useTranslation('editor');
+    const list = useRef<HTMLDivElement>(null);
+    const docs = useRef<HTMLDivElement>(null);
+    const activeRow = useRef<HTMLButtonElement>(null);
+    // The widest row so far in characters, which only grows, so the list never narrows or jumps while it is typed into.
+    const [widest, setWidest] = useState(0);
+    // 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);
+    }
+
+    // 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 };
+        const sideSize = side === null ? null : { width: side.offsetWidth, height: side.offsetHeight };
+        const placed = placePopup(rect, size, viewport, { gap: 2 });
+        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`;
+            side.style.maxHeight = `${Math.floor(beside.maxHeight)}px`;
+            side.style.visibility = 'visible';
+        }
+    });
+
+    useLayoutEffect(() => {
+        activeRow.current?.scrollIntoView({ block: 'nearest' });
+    }, [view.active, view.rows]);
+
+    const total = view.rows.length;
+    const { first, last } = rowWindow(listTop, view.active, total, ROW_HEIGHT, VISIBLE_ROWS, OVERSCAN_ROWS, LIST_PADDING);
+
+    return createPortal(
+        <>
+            <div
+                ref={list}
+                className={`${CARD} flex w-max max-w-[min(560px,calc(100vw-16px))] min-w-[340px] flex-col`}
+                style={{ visibility: 'hidden' }}
+                onPointerDown={(event) => event.preventDefault()}
+            >
+                {/* Sizes the list to the widest rows in the face the rows use; the rows themselves fill that width and truncate inside it. */}
+                <div
+                    aria-hidden
+                    className="h-0 overflow-hidden font-mono text-code"
+                    style={{
+                        width: `calc(${Math.max(widest, need)}ch + ${ROW_CHROME}px)`
+                    }}
+                />
+                <div
+                    role="listbox"
+                    className="w-0 min-w-full overflow-y-auto p-1"
+                    style={{ maxHeight: ROW_HEIGHT * VISIBLE_ROWS + 8 }}
+                    onScroll={(event) => setListTop(event.currentTarget.scrollTop)}
+                >
+                    <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}`}
+                                ref={index === view.active ? activeRow : undefined}
+                                type="button"
+                                role="option"
+                                aria-selected={index === view.active}
+                                aria-setsize={total}
+                                aria-posinset={index + 1}
+                                data-active={index === view.active}
+                                className="flex h-6 w-full items-center gap-2 overflow-hidden rounded-md px-1.5 text-left text-xs cursor-row"
+                                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)]}`}
+                                >
+                                    {kindLetterOf(row.kind)}
+                                </span>
+                                <span className={`max-w-full shrink-0 truncate font-mono text-code ${row.deprecated ? 'line-through' : ''}`}>
+                                    <MarkedLabel label={row.label} matches={row.matches} />
+                                </span>
+                                <span className="min-w-0 grow truncate font-mono text-text-faint">{row.detail}</span>
+                                <PathText path={row.description} className="max-w-[60%] font-mono text-text-faint" />
+                            </button>
+                        );
+                    })}
+                    <div aria-hidden style={{ height: (total - last) * ROW_HEIGHT }} />
+                </div>
+                <div className="flex items-center gap-3 border-t border-border px-2 py-1 text-xs whitespace-nowrap text-text-faint">
+                    <span>↵ {t('language.completion.insert')}</span>
+                    <span>⇥ {t('language.completion.replace')}</span>
+                    <span>^Space {t('language.completion.details')}</span>
+                    <span className="ml-auto">{view.server}</span>
+                </div>
+            </div>
+            {view.detailsOpen && view.docs !== null && (
+                <div
+                    ref={docs}
+                    className={`${CARD} flex w-[360px] flex-col divide-y divide-border overflow-y-auto select-text`}
+                    style={{ visibility: 'hidden' }}
+                    onPointerDown={(event) => event.preventDefault()}
+                >
+                    {view.docs.source !== '' && (
+                        <div className="px-3 py-2">
+                            <SourceLine text={view.docs.source} language={view.highlightLanguage} />
+                        </div>
+                    )}
+                    <SymbolSections text={view.docs.text} />
+                </div>
+            )}
+        </>,
+        document.body
+    );
+}