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

package/LICENSE

@@ -0,0 +1,110 @@
+# Functional Source License, Version 1.1, MIT Future License
+
+## Abbreviation
+
+FSL-1.1-MIT
+
+## Notice
+
+Copyright 2026 - present Bas Milius
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+The party offering the Software under these Terms and Conditions.
+
+### The Software
+
+The "Software" is each version of the software that we make available under
+these Terms and Conditions, as indicated by our inclusion of these Terms and
+Conditions with the Software.
+
+### License Grant
+
+Subject to your compliance with this License Grant and the Patents,
+Redistribution and Trademark clauses below, we hereby grant you the right to
+use, copy, modify, create derivative works, publicly perform, publicly display
+and redistribute the Software for any Permitted Purpose identified below.
+
+### Permitted Purpose
+
+A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
+means making the Software available to others in a commercial product or
+service that:
+
+1. substitutes for the Software;
+
+2. substitutes for any other product or service we offer using the Software
+   that exists as of the date we make the Software available; or
+
+3. offers the same or substantially similar functionality as the Software.
+
+Permitted Purposes specifically include using the Software:
+
+1. for your internal use and access;
+
+2. for non-commercial education;
+
+3. for non-commercial research; and
+
+4. in connection with professional services that you provide to a licensee
+   using the Software in accordance with these Terms and Conditions.
+
+### Patents
+
+To the extent your use for a Permitted Purpose would necessarily infringe our
+patents, the license grant above includes a license under our patents. If you
+make a claim against any party that the Software infringes or contributes to
+the infringement of any patent, then your patent license to the Software ends
+immediately.
+
+### Redistribution
+
+The Terms and Conditions apply to all copies, modifications and derivatives of
+the Software.
+
+If you redistribute any copies, modifications or derivatives of the Software,
+you must include a copy of or a link to these Terms and Conditions and not
+remove any copyright notices provided in or with the Software.
+
+### Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
+PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
+
+IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
+SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
+EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
+
+### Trademarks
+
+Except for displaying the License Details and identifying us as the origin of
+the Software, you have no right under these Terms and Conditions to use our
+trademarks, trade names, service marks or product names.
+
+## Grant of Future License
+
+We hereby irrevocably grant you an additional license to use the Software under
+the MIT license that is effective on the second anniversary of the date we make
+the Software available. On or after that date, you may use the Software under
+the MIT license, in which case the following will apply:
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# @adecore/editor-react
+
+[![npm](https://img.shields.io/npm/v/@adecore/editor-react)](https://www.npmjs.com/package/@adecore/editor-react)
+[![Docs](https://img.shields.io/badge/docs-adecore.dev-blue)](https://adecore.dev/editor-react/)
+
+Language features for [`@adecore/editor`](https://adecore.dev/editor/) over a `LanguageService` of [`@adecore/lsp`](https://adecore.dev/lsp/): suggestions and snippets, hover, signature help, problems, navigation, peek, rename, code actions, symbols, semantic colors, inlay hints, folds and code vision, with the React cards that show them. It starts no language server and touches no file; the app hands it a service and the file operations it allows.
+
+**[Documentation with live demos](https://adecore.dev/editor-react/)**
+
+## Install
+
+```sh
+bun add @adecore/editor-react
+```
+
+`@adecore/ui`, React 19, `react-dom`, `i18next` and `react-i18next` are peer dependencies.
+
+## Set up
+
+```css
+@import '@adecore/ui/theme.css';
+@import '@adecore/editor/editor.css';
+@import '@adecore/editor-react/editor-react.css';
+@source "../node_modules/@adecore/editor-react/dist";
+```
+
+Add `@adecore/editor-react/locales/en.json` and `nl.json` to i18next as the `editor` namespace, then:
+
+```tsx
+import { EditorView, ProjectLanguage } from '@adecore/editor-react';
+
+const project = new ProjectLanguage(service, { folder, keymap, openPlace, files, notify });
+
+<EditorView engine={engine} options={options} project={project} uri={uri} languageId="typescript" className="h-96" />;
+```
+
+## Entry points
+
+| Import | What it holds |
+|---|---|
+| `@adecore/editor-react` | The components, `ProjectLanguage`, `EditorLanguage` and every model |
+| `@adecore/editor-react/models` | The pure models, without React |
+| `@adecore/editor-react/testing` | `FakeLanguageService` and `ManualTimers` |
+| `@adecore/editor-react/editor-react.css` | The styles of the cards |
+| `@adecore/editor-react/locales/*.json` | The words, in English and Dutch |
+
+## Documentation
+
+| Page | What it covers |
+|---|---|
+| [Getting started](https://adecore.dev/editor-react/getting-started) | Install, styles, words and a first editor |
+| [Projects and documents](https://adecore.dev/editor-react/project) | `ProjectLanguage`, the host, shared documents and workspace edits |
+| [EditorView](https://adecore.dev/editor-react/editor-view) | The component, `EditorLanguage` and the popups |
+| [Views](https://adecore.dev/editor-react/completion) | A page per feature with a live demo, in the sidebar |
+| [Models](https://adecore.dev/editor-react/models) | The pure functions behind the features |
+| [Testing](https://adecore.dev/editor-react/testing) | `FakeLanguageService` and `ManualTimers` |
+
+## License
+
+FSL-1.1-MIT

package/dist/AnchoredPopup.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import type { EditorRect } from '@adecore/editor';
+import { type PlaceOptions } from './popup-placement.ts';
+export interface AnchoredPopupProps {
+    rect: EditorRect;
+    className?: string;
+    children: ReactNode;
+    placement?: PlaceOptions;
+    onPointerEnter?(): void;
+    onPointerLeave?(): void;
+}
+export declare function AnchoredPopup({ rect, className, children, placement, onPointerEnter, onPointerLeave }: AnchoredPopupProps): import("react").ReactPortal;

package/dist/AnchoredPopup.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { placePopup } from './popup-placement.js';
+/*
+ * 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 }) {
+    const element = useRef(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(_jsx("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: children }), document.body);
+}

package/dist/AttributionCard.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { EditorMarkColor, EditorRect } from '@adecore/editor';
+export interface AttributionCardProps {
+    rect: EditorRect;
+    title: string;
+    subtitle?: string;
+    metadata?: ReactNode;
+    prompt?: string;
+    color?: EditorMarkColor;
+    icon?: ReactNode;
+    actions?: ReactNode;
+    onHold?(inside: boolean): void;
+}
+export declare function AttributionCard({ rect, title, subtitle, metadata, prompt, color, icon, actions, onHold }: AttributionCardProps): import("react").JSX.Element;

package/dist/AttributionCard.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnchoredPopup } from './AnchoredPopup.js';
+export function AttributionCard({ rect, title, subtitle, metadata, prompt, color, icon, actions, onHold }) {
+    return (_jsxs(AnchoredPopup, { rect: rect, className: "flex w-105 flex-col text-xs", onPointerEnter: () => onHold?.(true), onPointerLeave: () => onHold?.(false), children: [_jsxs("div", { className: "flex flex-col gap-2 px-3 pt-3 pb-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex shrink-0 items-center", style: { color: color?.startsWith('--') ? `var(${color})` : color }, children: icon ?? _jsx("span", { className: "size-2 rounded-full bg-current" }) }), _jsx("span", { className: "shrink-0 text-sm font-semibold text-text", children: title }), subtitle !== undefined && _jsx("span", { className: "min-w-0 truncate text-sm text-text-muted", children: subtitle })] }), metadata !== undefined && _jsx("div", { className: "text-text-muted", children: metadata }), prompt !== undefined && prompt !== '' && (_jsx("q", { className: "line-clamp-4 rounded-md bg-surface-hover px-2.5 py-2 text-sm leading-4.5 text-text select-text", children: prompt }))] }), actions !== undefined && _jsx("div", { className: "flex gap-1 border-t border-border px-1.5 py-1.25", children: actions })] }));
+}

package/dist/BaselineStatus.d.ts

@@ -0,0 +1,4 @@
+import type { Baseline } from './hover-content.ts';
+export declare function BaselineStatus({ baseline }: {
+    baseline: Baseline;
+}): import("react").JSX.Element;

package/dist/BaselineStatus.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleCheck, Sparkles, TriangleAlert } from 'lucide-react';
+import { Icon } from '@adecore/ui';
+const BASELINE_MARKS = {
+    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 }) {
+    const { icon, color } = BASELINE_MARKS[baseline.level];
+    return (_jsxs("div", { className: "flex items-start gap-1.5 text-xs/[18px] text-text-muted select-text", children: [_jsx(Icon, { icon: icon, size: 14, className: `mt-px shrink-0 ${color}` }), _jsx("span", { className: "min-w-0", children: baseline.text })] }));
+}

package/dist/ChangeReview.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import type { Editor } from '@adecore/editor';
+export interface ChangeReviewProps {
+    editor: Editor;
+    selected: string;
+    proposal: string;
+    startLine?: number;
+    actions?: ReactNode;
+    className?: string;
+    label: string;
+}
+export declare function ChangeReview({ editor, selected, proposal, startLine, actions, className, label }: ChangeReviewProps): import("react").JSX.Element;

package/dist/ChangeReview.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { diffSegments, emphasisOf } from './proposal-model.js';
+export function ChangeReview({ editor, selected, proposal, startLine = 1, actions, className, label }) {
+    const code = useRef(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 (_jsxs("section", { className: className, "aria-label": label, children: [_jsx("div", { ref: code }), actions] }));
+}

package/dist/CodeAuthorsCard.d.ts

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

package/dist/CodeAuthorsCard.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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.js';
+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 }) {
+    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 (_jsx(Popover.Root, { open: true, onOpenChange: (open, details) => !open && language.codeVision.closeAuthors(details.reason === 'escape-key'), children: _jsxs(Popover.Popup, { anchor: anchor, side: "bottom", align: "start", sideOffset: 4, className: "flex w-72 flex-col gap-2 p-3 text-xs", children: [_jsxs(Popover.Title, { className: "flex items-center gap-1.5 font-medium text-text", children: [_jsx(Icon, { icon: authors.length > 1 ? Users : User, size: 14, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate", children: view.name })] }), _jsxs("ul", { className: "flex flex-col gap-1", children: [authors.map((author) => (_jsxs("li", { className: "flex items-baseline gap-2", children: [_jsx(Tooltip, { label: author.email, children: _jsx("span", { className: "min-w-0 grow truncate text-text", children: author.name }) }), _jsx("span", { className: "shrink-0 text-text-muted", children: t('language.codeVision.lines', { count: author.lines, formatted: formatNumber(author.lines) }) })] }, author.name))), uncommittedLines > 0 && (_jsxs("li", { className: "flex items-baseline gap-2 text-text-muted", children: [_jsx("span", { className: "min-w-0 grow truncate", children: t('language.codeVision.uncommitted') }), _jsx("span", { className: "shrink-0", children: t('language.codeVision.lines', { count: uncommittedLines, formatted: formatNumber(uncommittedLines) }) })] }))] }), latest !== null && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-text-muted", children: t('language.codeVision.latest') }), _jsx("span", { className: "text-text select-text", children: latest.summary }), _jsxs("span", { className: "flex items-center gap-1.5 text-text-muted", children: [_jsx("span", { className: "font-mono select-text", children: latest.shortHash }), _jsx("span", { className: "min-w-0 truncate", children: latest.author }), _jsx("span", { className: "shrink-0", children: relativeTime(latest.at, now) })] })] }), view.openCommit !== null && (_jsx("div", { className: "flex justify-end", children: _jsx(Popover.Close, { render: _jsxs(Button, { size: "xs", variant: "secondary", onClick: view.openCommit, children: [_jsx(Icon, { icon: GitCommitHorizontal, size: 14 }), t('language.codeVision.showCommit')] }) }) }))] }))] }) }));
+}

package/dist/CompletionPopup.d.ts

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

package/dist/CompletionPopup.js

@@ -0,0 +1,103 @@
+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 { kindLetterOf, kindToneOf, rowWindow } from './completion-model.js';
+import { SourceLine, SymbolSections } from './HoverSections.js';
+import { PathText } from './PathText.js';
+import { placeBeside, placePopup } from './popup-placement.js';
+const TONES = {
+    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 }) {
+    if (matches.length === 0) {
+        return _jsx(_Fragment, { children: label });
+    }
+    const marked = new Set(matches);
+    const runs = [];
+    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 (_jsx(_Fragment, { children: runs.map((run, index) => run.marked ? (_jsx("span", { className: "font-semibold text-accent", children: run.text }, index)) : (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 }) {
+    const { t } = useTranslation('editor');
+    const list = useRef(null);
+    const docs = useRef(null);
+    const activeRow = useRef(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(_jsxs(_Fragment, { children: [_jsxs("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(), children: [_jsx("div", { "aria-hidden": true, className: "h-0 overflow-hidden font-mono text-code", style: {
+                            width: `calc(${Math.max(widest, need)}ch + ${ROW_CHROME}px)`
+                        } }), _jsxs("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), children: [_jsx("div", { "aria-hidden": true, style: { height: first * ROW_HEIGHT } }), view.rows.slice(first, last).map((row, offset) => {
+                                const index = first + offset;
+                                return (_jsxs("button", { 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), children: [_jsx("span", { className: `grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs leading-none font-semibold ${TONES[kindToneOf(row.kind)]}`, children: kindLetterOf(row.kind) }), _jsx("span", { className: `max-w-full shrink-0 truncate font-mono text-code ${row.deprecated ? 'line-through' : ''}`, children: _jsx(MarkedLabel, { label: row.label, matches: row.matches }) }), _jsx("span", { className: "min-w-0 grow truncate font-mono text-text-faint", children: row.detail }), _jsx(PathText, { path: row.description, className: "max-w-[60%] font-mono text-text-faint" })] }, `${index}:${row.label}`));
+                            }), _jsx("div", { "aria-hidden": true, style: { height: (total - last) * ROW_HEIGHT } })] }), _jsxs("div", { className: "flex items-center gap-3 border-t border-border px-2 py-1 text-xs whitespace-nowrap text-text-faint", children: [_jsxs("span", { children: ["\u21B5 ", t('language.completion.insert')] }), _jsxs("span", { children: ["\u21E5 ", t('language.completion.replace')] }), _jsxs("span", { children: ["^Space ", t('language.completion.details')] }), _jsx("span", { className: "ml-auto", children: view.server })] })] }), view.detailsOpen && view.docs !== null && (_jsxs("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(), children: [view.docs.source !== '' && (_jsx("div", { className: "px-3 py-2", children: _jsx(SourceLine, { text: view.docs.source, language: view.highlightLanguage }) })), _jsx(SymbolSections, { text: view.docs.text })] }))] }), document.body);
+}

package/dist/EditorContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import type { EditorLanguage } from './editor-language.ts';
+import type { MenuView } from './popups.ts';
+export declare function EditorContextMenu({ language, view, children }: {
+    language: EditorLanguage;
+    view: MenuView;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/EditorContextMenu.js

@@ -0,0 +1,23 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ContextMenu, Kbd } from '@adecore/ui';
+export function EditorContextMenu({ language, view, children }) {
+    const { t } = useTranslation('editor');
+    const trigger = useRef(null);
+    useEffect(() => {
+        trigger.current?.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, clientX: view.x, clientY: view.y }));
+    }, [view.x, view.y]);
+    const { service } = language.project;
+    const rows = [
+        { id: 'goToDefinition', method: 'textDocument/definition', run: () => void language.navigation.go('definition') },
+        { id: 'goToTypeDefinition', method: 'textDocument/typeDefinition', run: () => void language.navigation.go('typeDefinition') },
+        { id: 'goToImplementation', method: 'textDocument/implementation', run: () => void language.navigation.go('implementation') },
+        { id: 'peekReferences', method: 'textDocument/references', run: () => void language.peek.open() },
+        { id: 'renameSymbol', method: 'textDocument/rename', run: () => void language.rename.start() },
+        { id: 'codeActions', method: 'textDocument/codeAction', run: () => void language.codeActions.open() }
+    ];
+    return (_jsxs(ContextMenu.Root, { onOpenChange: (open) => !open && language.contextMenu.close(), children: [_jsx(ContextMenu.Trigger, { ref: trigger, className: "fixed top-0 left-0 h-0 w-0", "aria-hidden": true }), _jsxs(ContextMenu.Popup, { children: [rows
+                        .filter((row) => service.supports(row.method, language.uri))
+                        .map((row) => (_jsxs(ContextMenu.Item, { onClick: row.run, children: [t(`commands.${row.id}`), language.shortcuts[row.id] !== null && _jsx(Kbd, { shortcut: language.shortcuts[row.id] })] }, row.id))), view.refactors.length > 0 && (_jsxs(ContextMenu.SubmenuRoot, { children: [_jsx(ContextMenu.SubmenuTrigger, { children: t('language.context.refactor') }), _jsx(ContextMenu.Popup, { children: view.refactors.map((entry, index) => (_jsxs(Fragment, { children: [index > 0 && view.refactors[index - 1].group !== entry.group && _jsx(ContextMenu.Separator, {}), _jsx(ContextMenu.Item, { onClick: () => void language.codeActions.apply(entry), children: entry.action.title })] }, entry.id))) })] })), children, _jsx(ContextMenu.Separator, {}), ['cut', 'copy', 'paste'].map((action) => (_jsx(ContextMenu.Item, { onClick: () => language.contextMenu.clipboard(action), children: t(`language.context.${action}`) }, action))), service.supports('textDocument/formatting', language.uri) && (_jsxs(_Fragment, { children: [_jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { onClick: () => void language.codeActions.formatDocument(), children: [t('commands.formatDocument'), language.shortcuts.formatDocument !== null && _jsx(Kbd, { shortcut: language.shortcuts.formatDocument })] })] }))] })] }));
+}

package/dist/EditorView.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode, type Ref } from 'react';
+import type { Editor, EditorEngine, EditorOptions } from '@adecore/editor';
+import { EditorLanguage } from './editor-language.ts';
+import type { ProjectLanguage } from './project-language.ts';
+export interface EditorViewProps {
+    engine: EditorEngine;
+    options: EditorOptions;
+    project?: ProjectLanguage;
+    uri?: string;
+    languageId?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    onMount?(editor: Editor, language: EditorLanguage | null): void | (() => void);
+    contextMenuItems?(language: EditorLanguage): ReactNode;
+}
+export declare function EditorView({ engine, options, project, uri, languageId, className, ref, onMount, contextMenuItems }: EditorViewProps): import("react").JSX.Element;

package/dist/EditorView.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createHolder } from './holder.js';
+import { useLayoutEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { EditorLanguage } from './editor-language.js';
+import { LanguagePopups } from './LanguagePopups.js';
+export function EditorView({ engine, options, project, uri, languageId, className, ref, onMount, contextMenuItems }) {
+    const element = useRef(null);
+    const holder = useMemo(() => createHolder(), []);
+    const language = useSyncExternalStore(holder.subscribe, holder.get, holder.get);
+    useLayoutEffect(() => {
+        const host = element.current;
+        if (host === null) {
+            return;
+        }
+        const editor = engine.mount(host, options);
+        const attached = project === undefined || uri === undefined || languageId === undefined ? null : new EditorLanguage(project, editor, uri, languageId);
+        holder.set(attached);
+        const stop = onMount?.(editor, attached);
+        return () => {
+            holder.set(null);
+            stop?.();
+            attached?.dispose();
+            editor.dispose();
+        };
+    }, [engine, options, project, uri, languageId, holder, onMount]);
+    return (_jsxs("div", { className: className, ref: ref, style: { position: 'relative', minHeight: 0 }, children: [_jsx("div", { ref: element, style: { position: 'absolute', inset: 0 } }), language !== null && _jsx(LanguagePopups, { language: language, contextMenuItems: contextMenuItems })] }));
+}

package/dist/FindReplace.d.ts

@@ -0,0 +1,6 @@
+import type { Editor } from '@adecore/editor';
+export declare function FindReplace({ editor, className, onClose }: {
+    editor: Editor;
+    className?: string;
+    onClose?(): void;
+}): import("react").JSX.Element;

package/dist/FindReplace.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { compileFind, EMPTY_FIND_QUERY } from './find-query.js';
+export function FindReplace({ editor, className, onClose }) {
+    const { t } = useTranslation('editor');
+    const [query, setQuery] = useState(EMPTY_FIND_QUERY);
+    const [replacement, setReplacement] = useState('');
+    const [preserveCase, setPreserveCase] = useState(false);
+    const [state, setState] = useState({ count: 0, current: null });
+    const compiled = useMemo(() => compileFind(query), [query]);
+    useEffect(() => editor.onFind(setState), [editor]);
+    useEffect(() => {
+        editor.find(compiled.kind === 'pattern' ? query : null);
+    }, [editor, query, compiled]);
+    useEffect(() => {
+        editor.setReplacePreview(compiled.kind === 'pattern' ? replacement : null, { preserveCase });
+    }, [editor, compiled, replacement, preserveCase]);
+    useEffect(() => () => {
+        editor.endFind();
+        editor.setReplacePreview(null);
+    }, [editor]);
+    const label = compiled.kind === 'invalid'
+        ? t('find.invalid')
+        : state.noSelection
+            ? t('find.noSelection')
+            : t('find.count', { total: formatNumber(state.count), current: state.current === null ? '0' : formatNumber(state.current + 1) });
+    return (_jsxs("div", { className: `adecore-editor-find ${className ?? ''}`, role: "search", "aria-label": t('find.label'), children: [_jsxs("div", { className: "adecore-editor-find-row", children: [_jsx("input", { type: "text", "aria-label": t('find.label'), value: query.text, onChange: (event) => setQuery({ ...query, text: event.target.value }), onKeyDown: (event) => {
+                            if (event.nativeEvent.isComposing) {
+                                return;
+                            }
+                            if (event.key === 'Enter') {
+                                event.preventDefault();
+                                editor.findStep(event.shiftKey ? -1 : 1);
+                            }
+                            if (event.key === 'Escape') {
+                                event.preventDefault();
+                                onClose?.();
+                                editor.focus();
+                            }
+                        } }), _jsx("output", { "aria-live": "polite", children: label }), _jsx(Button, { size: "xs", onClick: () => editor.findStep(-1), children: t('find.previous') }), _jsx(Button, { size: "xs", onClick: () => editor.findStep(1), children: t('find.next') })] }), _jsx("div", { className: "adecore-editor-find-row", children: ['caseSensitive', 'wholeWord', 'regex', 'inSelection'].map((option) => (_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: query[option] === true, onChange: (event) => setQuery({ ...query, [option]: event.target.checked }) }), t(`find.${option}`)] }, option))) }), _jsxs("div", { className: "adecore-editor-find-row", children: [_jsx("input", { type: "text", "aria-label": t('find.replace.label'), value: replacement, onChange: (event) => setReplacement(event.target.value) }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: preserveCase, onChange: (event) => setPreserveCase(event.target.checked) }), t('find.replace.preserveCase')] }), _jsx(Button, { size: "xs", onClick: () => editor.replace(replacement, { preserveCase }), children: t('find.replace.one') }), _jsx(Button, { size: "xs", onClick: () => editor.replaceAll(replacement, { preserveCase }), children: t('find.replace.allLabel') })] })] }));
+}

package/dist/HoverCard.d.ts

@@ -0,0 +1,11 @@
+import type { EditorPosition } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import { type Problem } from './diagnostics-model.ts';
+import type { HoverInfo } from './popups.ts';
+export declare function HoverCard({ language, problems, info, anchor, position }: {
+    language: EditorLanguage;
+    problems: readonly Problem[];
+    info: HoverInfo | null;
+    anchor: EditorPosition;
+    position: EditorPosition;
+}): import("react").JSX.Element;