@dxos/react-ui-editor 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/dist/lib/index.mjs

@@ -1,19 +1,27 @@
-import { createContext } from "@radix-ui/react-context";
-import * as Atom from "effect/unstable/reactivity/Atom";
-import { Fragment, forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { createContext, useControllableState } from "@dxos/react-hooks";
+import * as Atom from "effect/reactivity/Atom";
+import { Fragment, Suspense, forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { invariant } from "@dxos/invariant";
 import { mx } from "@dxos/ui-theme";
 import { getProviderValue, isNonNullable, isTruthy } from "@dxos/util";
-import { Inline, List, addBlockquote, addCodeblock, addLink, createBasicExtensions, createEditorStateTransaction, createMarkdownExtensions, createThemeExtensions, debugDispatcher, decorateMarkdown, documentId, initialSync, insertAtCursor, insertAtLineStart, insertTable, modalStateEffect, modalStateField, placeholder, removeBlockquote, removeCodeblock, removeLink, setHeading, setStyle, toggleList } from "@dxos/ui-editor";
+import { Inline, List, addBlockquote, addCodeblock, addLink, computeDocChanges, createBasicExtensions, createMarkdownExtensions, createThemeExtensions, debugDispatcher, decorateMarkdown, documentId, initialSync, insertAtCursor, insertAtLineStart, insertTable, modalStateEffect, modalStateField, placeholder, removeBlockquote, removeCodeblock, removeLink, restoreEditorState, setHeading, setStyle, toggleList } from "@dxos/ui-editor";
 import { EditorState, Prec, RangeSetBuilder, StateEffect, StateField, Transaction } from "@codemirror/state";
-import { Decoration, EditorView, ViewPlugin, keymap } from "@codemirror/view";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Decoration, EditorView as EditorView$1, ViewPlugin, keymap } from "@codemirror/view";
 import { addEventListener } from "@dxos/async";
-import { DX_ANCHOR_ACTIVATE, ElevationProvider, Icon, Input, Popover, ScrollArea, toLocalizedString, useDynamicRef, useThemeContext, useTranslation } from "@dxos/react-ui";
+import * as Field from "@dxos/react-ui/Field";
+import * as Hooks from "@dxos/react-ui/Hooks";
+import * as Icon from "@dxos/react-ui/Icon";
+import * as Input from "@dxos/react-ui/Input";
+import * as Layout from "@dxos/react-ui/Layout";
+import * as Popover from "@dxos/react-ui/Popover";
+import * as Theme from "@dxos/react-ui/Theme";
+import * as Typography from "@dxos/react-ui/Typography";
+import * as VirtualAnchor from "@dxos/react-ui/VirtualAnchor";
+import { DX_ANCHOR_ACTIVATE } from "@dxos/ui-types";
 import { translationKey } from "#translations";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Menu, MenuBuilder, useMenuActions } from "@dxos/react-ui-menu";
+import { ActionToolbar, MenuBuilder, useMenuActions } from "@dxos/react-ui-menu";
 import { openSearchPanel } from "@codemirror/search";
 import { log } from "@dxos/log";
 //#region src/components/Editor/controller.ts
@@ -117,7 +125,7 @@ var popover = (options = {}) => {
 /**
 * Listen for selection and document changes.
 */
-var popoverTriggerListener = (options) => EditorView.updateListener.of(({ view, docChanged }) => {
+var popoverTriggerListener = (options) => EditorView$1.updateListener.of(({ view, docChanged }) => {
 	const { range: activeRange, trigger } = view.state.field(popoverStateField) ?? {};
 	if (!activeRange) return;
 	const text = view.state.doc.sliceString(activeRange.from, activeRange.to);
@@ -137,7 +145,7 @@ var popoverTriggerListener = (options) => EditorView.updateListener.of(({ view,
 * Open the popover while typing a word, without requiring a trigger character. Once a range is
 * active, {@link popoverTriggerListener} keeps it in sync and closes it (whitespace, cursor moves).
 */
-var popoverAutoActivate = (options) => EditorView.updateListener.of(({ view, docChanged, transactions }) => {
+var popoverAutoActivate = (options) => EditorView$1.updateListener.of(({ view, docChanged, transactions }) => {
 	if (!docChanged || !transactions.some((tr) => tr.isUserEvent("input")) || view.state.field(popoverStateField)) return;
 	const selection = view.state.selection.main;
 	if (!selection.empty) return;
@@ -418,13 +426,13 @@ var linkSlashCommands = {
 var __dxlog_file$3 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/components/EditorMenuProvider/EditorMenuProvider.tsx";
 /**
 * Implements the Popover and listens for the `dx-anchor-activate` event from the `popover` extension's decoration.
-* NOTE: We don't use DropdownMenu because the command menu needs to manage focus explicitly.
+* NOTE: We don't use Menu because the command menu needs to manage focus explicitly.
 * I.e., focus must remain in the editor while displaying the menu (for type-ahead).
 */
 var EditorMenuProvider = ({ children, getView, groups, currentItem, open: openProp, defaultOpen, numItems = 8, search, query = "", searchPlaceholder, onOpenChange, onActivate, onSelect, onCancel, onQueryChange, onNavigate }) => {
-	const { t } = useTranslation(translationKey);
+	const { t } = Hooks.useTranslation(translationKey);
 	const triggerRef = useRef(null);
-	const getViewRef = useDynamicRef(getView);
+	const getViewRef = Hooks.useDynamicRef(getView);
 	const [open, setOpen] = useControllableState({
 		prop: openProp,
 		defaultProp: defaultOpen,
@@ -433,7 +441,7 @@ var EditorMenuProvider = ({ children, getView, groups, currentItem, open: openPr
 			invariant(view, void 0, {
 				"~LogMeta": "~LogMeta",
 				F: __dxlog_file$3,
-				L: 90,
+				L: 88,
 				S: void 0,
 				A: ["view", ""]
 			});
@@ -447,8 +455,8 @@ var EditorMenuProvider = ({ children, getView, groups, currentItem, open: openPr
 	useEffect(() => {
 		if (!root) return;
 		return addEventListener(root, DX_ANCHOR_ACTIVATE, (event) => {
-			const { trigger, dxn } = event;
-			if (!dxn) {
+			const { trigger, eid } = event;
+			if (!eid) {
 				triggerRef.current = trigger;
 				if (onActivate) {
 					const view = getViewRef.current?.();
@@ -468,7 +476,7 @@ var EditorMenuProvider = ({ children, getView, groups, currentItem, open: openPr
 		invariant(view, void 0, {
 			"~LogMeta": "~LogMeta",
 			F: __dxlog_file$3,
-			L: 129,
+			L: 127,
 			S: void 0,
 			A: ["view", ""]
 		});
@@ -519,69 +527,54 @@ var EditorMenuProvider = ({ children, getView, groups, currentItem, open: openPr
 		onNavigate
 	]);
 	return /* @__PURE__ */ jsxs(Popover.Root, {
-		modal: false,
 		open,
-		onOpenChange: setOpen,
-		children: [
-			/* @__PURE__ */ jsx(Popover.VirtualTrigger, { virtualRef: triggerRef }),
-			/* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
-				align: "start",
-				classNames: ["flex flex-col", !search && !menuGroups.length && "hidden"],
-				style: { maxBlockSize: 36 * numItems + 10 + (search ? 36 : 0) },
-				onEscapeKeyDown: () => {
-					const currentView = getViewRef.current?.();
-					if (currentView) onCancel?.({ view: currentView });
-				},
-				onOpenAutoFocus: search ? void 0 : (event) => event.preventDefault(),
-				children: [
-					search && /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.TextInput, {
-						ref: searchInputRef,
-						density: "sm",
-						variant: "subdued",
-						classNames: "shrink-0 mb-1",
-						value: query,
-						placeholder: searchPlaceholder,
-						"aria-label": searchPlaceholder ?? t("search.label"),
-						onChange: (event) => onQueryChange?.(event.target.value),
-						onKeyDown: handleSearchKeyDown
-					}) }),
-					/* @__PURE__ */ jsx(Popover.Viewport, {
-						asChild: true,
-						classNames: "dx-container",
-						children: /* @__PURE__ */ jsx(ScrollArea.Root, {
-							thin: true,
-							children: /* @__PURE__ */ jsx(ScrollArea.Viewport, { children: /* @__PURE__ */ jsx(Menu$1, {
-								groups: menuGroups,
-								currentItem,
-								onSelect: handleSelect
-							}) })
-						})
-					}),
-					/* @__PURE__ */ jsx(Popover.Arrow, {})
-				]
-			}) }),
-			/* @__PURE__ */ jsx("div", {
-				className: "contents",
-				ref: setRoot,
-				children
-			})
-		]
+		onOpenChange: ({ open }) => setOpen(open),
+		positioning: {
+			...VirtualAnchor.virtualAnchor(triggerRef),
+			placement: "bottom-start"
+		},
+		autoFocus: !!search,
+		onEscapeKeyDown: () => {
+			const currentView = getViewRef.current?.();
+			if (currentView) onCancel?.({ view: currentView });
+		},
+		children: [/* @__PURE__ */ jsxs(Popover.Content, {
+			classNames: !search && !menuGroups.length ? "hidden" : void 0,
+			style: { maxBlockSize: 36 * numItems + 10 + (search ? 36 : 0) },
+			children: [search && /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsx(Input.Root, {
+				ref: searchInputRef,
+				variant: "subdued",
+				classNames: "shrink-0 mb-1",
+				value: query,
+				placeholder: searchPlaceholder,
+				"aria-label": searchPlaceholder ?? t("search.label"),
+				onChange: (event) => onQueryChange?.(event.target.value),
+				onKeyDown: handleSearchKeyDown
+			}) }), /* @__PURE__ */ jsx(Popover.Body, { children: /* @__PURE__ */ jsx(Menu, {
+				groups: menuGroups,
+				currentItem,
+				onSelect: handleSelect
+			}) })]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "contents",
+			ref: setRoot,
+			children
+		})]
 	});
 };
-var Menu$1 = ({ groups, currentItem, onSelect }) => {
-	const { tx } = useThemeContext();
+var Menu = ({ groups, currentItem, onSelect }) => {
 	return /* @__PURE__ */ jsx("ul", { children: groups.map((group, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuGroup, {
 		group,
 		currentItem,
 		onSelect
-	}), index < groups.length - 1 && /* @__PURE__ */ jsx("div", { className: tx("menu.separator", {}) })] }, group.id)) });
+	}), index < groups.length - 1 && /* @__PURE__ */ jsx(Layout.Separator, {})] }, group.id)) });
 };
 var MenuGroup = ({ group, currentItem, onSelect }) => {
-	const { tx } = useThemeContext();
-	const { t } = useTranslation();
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [group.label && /* @__PURE__ */ jsx("div", {
-		className: tx("menu.groupLabel", {}),
-		children: /* @__PURE__ */ jsx("span", { children: toLocalizedString(group.label, t) })
+	const { t } = Hooks.useTranslation();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [group.label && /* @__PURE__ */ jsx(Typography.Text, {
+		tone: "muted",
+		classNames: "px-2",
+		children: Theme.toLocalizedString(group.label, t)
 	}), group.items.map((item) => /* @__PURE__ */ jsx(MenuItem, {
 		item,
 		current: currentItem === item.id,
@@ -589,8 +582,7 @@ var MenuGroup = ({ group, currentItem, onSelect }) => {
 	}, item.id))] });
 };
 var MenuItem = ({ item, current, onSelect }) => {
-	const { tx } = useThemeContext();
-	const { t } = useTranslation();
+	const { t } = Hooks.useTranslation();
 	const listRef = useRef(null);
 	useEffect(() => {
 		if (current && listRef.current) listRef.current.scrollIntoView({
@@ -601,11 +593,12 @@ var MenuItem = ({ item, current, onSelect }) => {
 	const handleSelect = useCallback(() => onSelect?.(item), [item, onSelect]);
 	return /* @__PURE__ */ jsxs("li", {
 		ref: listRef,
-		className: tx("menu.item", {}, [current && "bg-hover-surface"]),
+		className: "dx-menu-item",
+		"data-highlighted": current ? "" : void 0,
 		onClick: handleSelect,
-		children: [item.icon && /* @__PURE__ */ jsx(Icon, { icon: item.icon }), /* @__PURE__ */ jsx("span", {
-			className: "grow truncate",
-			children: toLocalizedString(item.label, t)
+		children: [item.icon && /* @__PURE__ */ jsx(Icon.Icon, { icon: item.icon }), /* @__PURE__ */ jsx("span", {
+			className: "dx-menu-item-text",
+			children: Theme.toLocalizedString(item.label, t)
 		})]
 	});
 };
@@ -865,6 +858,7 @@ var addFormatting = (state, getView) => (builder) => {
 			const checked = !!formatting[type];
 			group.action(type, {
 				label: [`formatting.${type}.label`, { ns: translationKey }],
+				testId: `editor.toolbar.${type}`,
 				checked,
 				icon
 			}, () => {
@@ -1001,6 +995,7 @@ var addViewMode = (state, onViewModeChange, items = defaultViewModeItems) => (bu
 	const value = state.viewMode ?? "source";
 	builder.group("viewMode", {
 		label: ["view-mode.label", { ns: translationKey }],
+		testId: "editor.toolbar.viewMode",
 		icon: "ph--eye--regular",
 		iconOnly: true,
 		variant: "dropdownMenu",
@@ -1020,20 +1015,13 @@ var addViewMode = (state, onViewModeChange, items = defaultViewModeItems) => (bu
 };
 //#endregion
 //#region src/components/EditorToolbar/EditorToolbar.tsx
-var SECTION_ROLE = "org.dxos.role.section";
 var EditorToolbar$1 = memo(({ classNames, role, attendableId, onAction, ...props }) => {
 	const menuActions = useMarkdownMenuActions(props);
-	return /* @__PURE__ */ jsx(ElevationProvider, {
-		elevation: role === SECTION_ROLE ? "positioned" : "base",
-		children: /* @__PURE__ */ jsx(Menu.Root, {
-			...menuActions,
-			attendableId,
-			onAction,
-			children: /* @__PURE__ */ jsx(Menu.Toolbar, {
-				classNames,
-				children: /* @__PURE__ */ jsx(Menu.Items, {})
-			})
-		})
+	return /* @__PURE__ */ jsx(ActionToolbar, {
+		...menuActions,
+		attendableId,
+		onAction,
+		classNames
 	});
 });
 var useMarkdownMenuActions = ({ state, getView, customActions, ...features }) => {
@@ -1067,7 +1055,7 @@ var createMarkdownActions = ({ state, getView, customActions, ...features }) =>
 //#region src/hooks/useBasicMarkdownExtensions.ts
 /**
 * Returns the standard CodeMirror extension stack for an inline markdown editor:
-* basic editor behaviors, themed syntax highlighting (theme mode read from {@link useThemeContext}),
+* basic editor behaviors, themed syntax highlighting (theme mode read from {@link useThemeMode}),
 * markdown parsing, and visual decorations.
 *
 * Used by surfaces such as `AgentProperties` and `MagazineProperties` to render the
@@ -1077,7 +1065,7 @@ var createMarkdownActions = ({ state, getView, customActions, ...features }) =>
 * so callers passing fresh option literals each render still hit the cache.
 */
 var useBasicMarkdownExtensions = ({ placeholder, decorate = true, readonly = false, extensions } = {}) => {
-	const { themeMode } = useThemeContext();
+	const themeMode = Hooks.useThemeMode();
 	return useMemo(() => [
 		createBasicExtensions({
 			placeholder,
@@ -1106,11 +1094,11 @@ var instanceCount = 0;
 * Creates codemirror text editor.
 */
 var useTextEditor = (props = {}, deps = []) => {
-	const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, selectionEnd, debug } = useMemo(() => getProviderValue(props), deps ?? []);
+	const { id, doc, initialValue, extensions, autoFocus, scrollTo, scrollOffset, selection, selectionEnd, debug } = useMemo(() => getProviderValue(props), deps ?? []);
 	const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
 	const [view, setView] = useState(null);
 	const parentRef = useRef(null);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		let view = null;
 		if (parentRef.current) {
 			log("create", {
@@ -1120,7 +1108,7 @@ var useTextEditor = (props = {}, deps = []) => {
 			}, {
 				"~LogMeta": "~LogMeta",
 				F: __dxlog_file$1,
-				L: 75,
+				L: 82,
 				S: void 0
 			});
 			const length = (doc ?? initialValue)?.length ?? 0;
@@ -1133,20 +1121,23 @@ var useTextEditor = (props = {}, deps = []) => {
 				extensions: [
 					id && documentId.of(id),
 					extensions,
-					EditorView.exceptionSink.of((err) => {
+					EditorView$1.exceptionSink.of((err) => {
 						log.catch(err, void 0, {
 							"~LogMeta": "~LogMeta",
 							F: __dxlog_file$1,
-							L: 96,
+							L: 103,
 							S: void 0
 						});
 					})
 				].filter(isTruthy)
 			});
-			view = new EditorView({
+			view = new EditorView$1({
 				parent: parentRef.current,
 				state,
-				scrollTo: scrollTo ? EditorView.scrollIntoView(scrollTo, { yMargin: 96 }) : void 0,
+				scrollTo: scrollTo != null ? EditorView$1.scrollIntoView(scrollTo, {
+					y: "start",
+					yMargin: 0
+				}) : void 0,
 				dispatchTransactions: debug ? debugDispatcher : void 0
 			});
 			if (selectionEnd && !initialSelection) {
@@ -1159,7 +1150,7 @@ var useTextEditor = (props = {}, deps = []) => {
 			log("destroy", { id }, {
 				"~LogMeta": "~LogMeta",
 				F: __dxlog_file$1,
-				L: 119,
+				L: 127,
 				S: void 0
 			});
 			view?.destroy();
@@ -1167,7 +1158,7 @@ var useTextEditor = (props = {}, deps = []) => {
 	}, deps);
 	useEffect(() => {
 		if (view) {
-			if (scrollTo || selection) {
+			if (scrollTo != null || selection) {
 				if (selection && selection.anchor > view.state.doc.length) {
 					log.warn("invalid selection", {
 						length: view.state.doc.length,
@@ -1176,24 +1167,26 @@ var useTextEditor = (props = {}, deps = []) => {
 					}, {
 						"~LogMeta": "~LogMeta",
 						F: __dxlog_file$1,
-						L: 128,
+						L: 136,
 						S: void 0
 					});
 					return;
 				}
-				view.dispatch(createEditorStateTransaction({
+				restoreEditorState(view, {
 					scrollTo,
+					scrollOffset,
 					selection
-				}));
+				});
 			}
 		}
 	}, [
 		view,
 		scrollTo,
+		scrollOffset,
 		selection
 	]);
 	useEffect(() => {
-		if (view && autoFocus) view.focus();
+		if (view && autoFocus && !view.dom.ownerDocument.activeElement?.closest("[role=\"menu\"], [role=\"listbox\"]")) view.focus();
 	}, [autoFocus, view]);
 	return {
 		parentRef,
@@ -1221,14 +1214,14 @@ var useTextEditor = (props = {}, deps = []) => {
 * Minimal text editor.
 * NOTE: This shouold not be used with the automerge extension.
 */
-var EditorView$2 = forwardRef(({ classNames, id, extensions, selectionEnd, focusable = true, value, onChange, ...props }, forwardedRef) => {
+var EditorView = forwardRef(({ classNames, id, extensions, selectionEnd, focusable = true, value, onChange, ...props }, forwardedRef) => {
 	const onChangeRef = useRef(onChange);
 	onChangeRef.current = onChange;
 	const { parentRef, focusAttributes, view } = useTextEditor(() => ({
 		id,
 		initialValue: value,
 		selectionEnd,
-		extensions: [extensions ?? [], EditorView.updateListener.of(({ view, docChanged, transactions }) => {
+		extensions: [extensions ?? [], EditorView$1.updateListener.of(({ view, docChanged, transactions }) => {
 			if (!transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value) && docChanged) onChangeRef.current?.(view.state.doc.toString());
 		})],
 		...props
@@ -1245,14 +1238,13 @@ var EditorView$2 = forwardRef(({ classNames, id, extensions, selectionEnd, focus
 		const next = value;
 		if (view.state.doc.toString() === next) return;
 		requestAnimationFrame(() => {
-			if (view.state.doc.toString() === next) return;
+			const current = view.state.doc.toString();
+			if (current === next) return;
+			const changes = computeDocChanges(current, next);
+			if (changes.length === 0) return;
 			view.dispatch({
 				annotations: initialSync,
-				changes: [{
-					from: 0,
-					to: view.state.doc.length,
-					insert: next
-				}],
+				changes,
 				selection: selectionEnd ? { anchor: next.length } : void 0
 			});
 			if (selectionEnd) view.focus();
@@ -1315,16 +1307,16 @@ var EDITOR_VIEW_NAME = "Editor.View";
 * View component that renders the actual CodeMirror editor.
 * Automatically registers the editor controller with the context.
 */
-var EditorView$1 = ({ extensions: providedExtensions, ...props }) => {
+var EditorView$2 = ({ extensions: providedExtensions, ...props }) => {
 	const { extensions: additionalExtensions = [], setController } = useEditorContext(EDITOR_VIEW_NAME);
 	const extensions = useMemo(() => [additionalExtensions, providedExtensions].filter(isNonNullable).flat(), [providedExtensions, additionalExtensions]);
-	return /* @__PURE__ */ jsx(EditorView$2, {
+	return /* @__PURE__ */ jsx(EditorView, {
 		...props,
 		extensions,
 		ref: setController
 	});
 };
-EditorView$1.displayName = EDITOR_VIEW_NAME;
+EditorView$2.displayName = EDITOR_VIEW_NAME;
 var EDITOR_TOOLBAR_NAME = "Editor.Toolbar";
 /**
 * Toolbar component that provides editor formatting and control actions.
@@ -1336,7 +1328,7 @@ var EditorToolbar = (props) => {
 		invariant(controller?.view, void 0, {
 			"~LogMeta": "~LogMeta",
 			F: __dxlog_file,
-			L: 155,
+			L: 159,
 			S: void 0,
 			A: ["controller?.view", ""]
 		});
@@ -1356,7 +1348,13 @@ var EDITOR_BLOCKS_NAME = "Editor.Blocks";
 */
 var EditorBlocks = () => {
 	const { widgets = [] } = useEditorContext(EDITOR_BLOCKS_NAME);
-	return /* @__PURE__ */ jsx(Fragment$1, { children: widgets.map(({ id, root, Component, props }) => /* @__PURE__ */ jsx("div", { children: createPortal(/* @__PURE__ */ jsx(Component, { ...props }), root) }, id)) });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: widgets.map(({ id, root, Component, props }) => /* @__PURE__ */ jsx("div", {
+		"data-testid": "editor.blocks.portal",
+		children: createPortal(/* @__PURE__ */ jsx(Suspense, {
+			fallback: null,
+			children: /* @__PURE__ */ jsx(Component, { ...props })
+		}), root)
+	}, id)) });
 };
 EditorBlocks.displayName = EDITOR_BLOCKS_NAME;
 var EDITOR_DIAGNOSTICS_NAME = "Editor.Diagnostics";
@@ -1392,11 +1390,11 @@ var EditorDiagnostics = ({ classNames }) => {
 	const head = doc.lineAt(main.head);
 	const extensionCount = countExtensions(extensions);
 	const item = (label, value) => /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
-		className: "text-subdued",
+		className: "text-fg-subtle",
 		children: [label, " "]
 	}), value] });
 	return /* @__PURE__ */ jsxs("div", {
-		className: mx("flex flex-wrap gap-x-4 gap-y-0.5 border-bs border-separator px-2 py-1 text-xs font-mono text-description", classNames),
+		className: mx("flex flex-wrap gap-x-4 gap-y-0.5 border-bs border-separator px-2 py-1 text-xs font-mono text-fg-muted", classNames),
 		"data-testid": "editor.diagnostics",
 		children: [
 			item("chars", doc.length),
@@ -1414,7 +1412,7 @@ var Editor = {
 	Root: EditorRoot,
 	Toolbar: EditorToolbar,
 	Content: EditorContent,
-	View: EditorView$1,
+	View: EditorView$2,
 	Blocks: EditorBlocks,
 	Diagnostics: EditorDiagnostics
 };
@@ -1432,13 +1430,21 @@ var EditorPreviewProvider = ({ children, onLookup }) => {
 	const triggerRef = useRef(null);
 	const [value, setValue] = useState({});
 	const [open, setOpen] = useState(false);
+	const activationRef = useRef(0);
 	const handleActivate = useCallback((event) => {
-		const { dxn, label, trigger } = event;
+		if (event.state === false) {
+			if (event.trigger !== triggerRef.current) return;
+			activationRef.current++;
+			setOpen(false);
+			return;
+		}
+		const sequence = ++activationRef.current;
+		const { eid, label, trigger } = event;
 		setValue((value) => ({
 			...value,
 			link: {
 				label,
-				dxn
+				eid
 			},
 			pending: true
 		}));
@@ -1446,13 +1452,20 @@ var EditorPreviewProvider = ({ children, onLookup }) => {
 		queueMicrotask(() => setOpen(true));
 		onLookup?.({
 			label,
-			dxn
-		}).then((target) => setValue((value) => ({
-			...value,
-			target: target ?? void 0,
-			pending: false
-		})));
+			eid
+		}).then((target) => {
+			if (sequence !== activationRef.current) return;
+			setValue((value) => ({
+				...value,
+				target: target ?? void 0,
+				pending: false
+			}));
+		});
 	}, [onLookup]);
+	const handleOpenChange = useCallback((next) => {
+		if (!next) activationRef.current++;
+		setOpen(next);
+	}, []);
 	const [root, setRoot] = useState(null);
 	useEffect(() => {
 		if (!root || !handleActivate) return;
@@ -1465,18 +1478,20 @@ var EditorPreviewProvider = ({ children, onLookup }) => {
 		pending: value.pending,
 		link: value.link,
 		target: value.target,
-		children: /* @__PURE__ */ jsxs(Popover.Root, {
+		children: /* @__PURE__ */ jsx(Popover.Root, {
 			open,
-			onOpenChange: setOpen,
-			children: [/* @__PURE__ */ jsx(Popover.VirtualTrigger, { virtualRef: triggerRef }), /* @__PURE__ */ jsx("div", {
+			onOpenChange: ({ open }) => handleOpenChange(open),
+			positioning: VirtualAnchor.virtualAnchor(triggerRef),
+			autoFocus: false,
+			children: /* @__PURE__ */ jsx("div", {
 				className: "contents",
 				ref: setRoot,
 				children
-			})]
+			})
 		})
 	});
 };
 //#endregion
-export { Editor, EditorMenuProvider, EditorPreviewProvider, addViewMode, createEditorController, createMenuGroup, defaultViewModeItems, filterMenuGroups, formattingCommands, getMenuItem, getNextMenuItem, getPreviousMenuItem, linkSlashCommands, noopController, popover, popoverRangeEffect, popoverStateField, useBasicMarkdownExtensions, useEditorContext, useEditorMenu, useEditorPreview, useTextEditor };
+export { Editor, EditorMenuProvider, EditorPreviewProvider, EditorView as TextEditor, addViewMode, createEditorController, createMenuGroup, defaultViewModeItems, filterMenuGroups, formattingCommands, getMenuItem, getNextMenuItem, getPreviousMenuItem, linkSlashCommands, noopController, popover, popoverRangeEffect, popoverStateField, useBasicMarkdownExtensions, useEditorContext, useEditorMenu, useEditorPreview, useTextEditor };
 
 //# sourceMappingURL=index.mjs.map