@dxos/react-ui-editor 0.10.0 → 0.11.0

package/dist/lib/index.mjs

@@ -0,0 +1,1477 @@
+import { createContext } from "@radix-ui/react-context";
+import { Atom } from "@effect-atom/atom";
+import { Fragment, forwardRef, memo, useCallback, useEffect, useImperativeHandle, 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 { 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 { addEventListener } from "@dxos/async";
+import { DX_ANCHOR_ACTIVATE, ElevationProvider, Icon, Input, Popover, ScrollArea, toLocalizedString, useDynamicRef, useThemeContext, useTranslation } from "@dxos/react-ui";
+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 { openSearchPanel } from "@codemirror/search";
+import { log } from "@dxos/log";
+//#region src/components/Editor/controller.ts
+var withHiddenView = (controller) => {
+	Object.defineProperty(controller, "view", { enumerable: false });
+	return controller;
+};
+var noopController = withHiddenView({
+	get view() {
+		return null;
+	},
+	getText: () => "",
+	setText: () => {},
+	focus: () => {}
+});
+var createEditorController = (view) => {
+	return withHiddenView({
+		get view() {
+			return view;
+		},
+		getText: () => {
+			return view?.state.doc.toString() ?? "";
+		},
+		setText: (text, focus) => {
+			view?.dispatch({
+				changes: {
+					from: 0,
+					to: view?.state.doc.length ?? 0,
+					insert: text
+				},
+				selection: {
+					anchor: text.length,
+					head: text.length
+				}
+			});
+			if (focus) view?.focus();
+		},
+		focus: () => view?.focus()
+	});
+};
+//#endregion
+//#region src/components/Editor/EditorContext.ts
+var [EditorContextProvider, useEditorContext] = createContext("Editor");
+/**
+* Access the editor context. Must be used within `Editor.Root`.
+*/
+//#endregion
+//#region src/components/EditorMenuProvider/menu.ts
+var getMenuItem = (groups, id) => {
+	return groups.flatMap((group) => group.items).find((item) => item.id === id);
+};
+/** Undefined when the menu is empty; at either end the current item is returned unchanged. */
+var getNextMenuItem = (groups, id) => {
+	const items = groups.flatMap((group) => group.items);
+	const index = items.findIndex((item) => item.id === id);
+	return index < items.length - 1 ? items[index + 1] : items[index];
+};
+/** Undefined when the menu is empty; at either end the current item is returned unchanged. */
+var getPreviousMenuItem = (groups, id) => {
+	const items = groups.flatMap((group) => group.items);
+	const index = items.findIndex((item) => item.id === id);
+	return index > 0 ? items[index - 1] : items[index];
+};
+var createMenuGroup = ({ id = "menu", label, filter, items }) => ({
+	id,
+	label,
+	items: items.filter((item) => !filter || item.toLowerCase().includes(filter.toLowerCase())).map((item, i) => ({
+		id: `${id}-${i}`,
+		label: item,
+		onSelect: ({ view, head }) => insertAtCursor(view, head, item)
+	}))
+});
+var filterMenuGroups = (groups, filter) => {
+	return groups.map((group) => ({
+		...group,
+		items: group.items.filter(filter)
+	}));
+};
+//#endregion
+//#region src/components/EditorMenuProvider/popover.ts
+var DELIMITERS = [" ", ":"];
+/**
+* Creates a popover that appears when the trigger character is inserted.
+* This can be used for context menus or autocompletion.
+*/
+var popover = (options = {}) => {
+	return [
+		Prec.highest(popoverKeymap(options)),
+		popoverStateField,
+		popoverTriggerListener(options),
+		options.activateOnTyping && popoverAutoActivate(options),
+		popoverAnchorDecoration(options),
+		modalStateField,
+		options.trigger && placeholder({
+			content: `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`,
+			focusOnly: true,
+			...options.placeholder
+		})
+	].filter(isTruthy);
+};
+/**
+* Listen for selection and document changes.
+*/
+var popoverTriggerListener = (options) => EditorView.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);
+	const selection = view.state.selection.main;
+	const shouldClose = (trigger ? trigger !== text[0] : false) || /\s/.test(trigger ? text.slice(1) : text) || selection.head < activeRange.from || selection.head > activeRange.to + 1;
+	const nextRange = shouldClose ? null : docChanged ? {
+		from: activeRange.from,
+		to: selection.head
+	} : activeRange;
+	if (nextRange !== activeRange) view.dispatch({ effects: popoverRangeEffect.of(nextRange ? {
+		range: nextRange,
+		trigger
+	} : null) });
+	if (shouldClose) options.onClose?.({ 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 }) => {
+	if (!docChanged || !transactions.some((tr) => tr.isUserEvent("input")) || view.state.field(popoverStateField)) return;
+	const selection = view.state.selection.main;
+	if (!selection.empty) return;
+	const line = view.state.doc.lineAt(selection.head);
+	const before = line.text.slice(0, selection.head - line.from);
+	const idx = getLastIndexOf(before, options.delimiters ?? DELIMITERS);
+	if (before.slice(idx + 1).length === 0) return;
+	view.dispatch({ effects: popoverRangeEffect.of({ range: {
+		from: line.from + idx + 1,
+		to: selection.head
+	} }) });
+});
+/**
+* Popover navigation.
+*/
+var popoverKeymap = (options) => {
+	const triggers = Array.isArray(options.trigger) ? options.trigger : [options.trigger];
+	return keymap.of([
+		...triggers.filter(isNonNullable).map((trigger) => ({
+			key: trigger,
+			run: (view) => {
+				const selection = view.state.selection.main;
+				const line = view.state.doc.lineAt(selection.head);
+				if (line.text.trim() === "" || selection.head === line.from || selection.head > line.from && line.text[selection.head - line.from - 1] === " ") {
+					view.dispatch({
+						changes: {
+							from: selection.head,
+							insert: trigger
+						},
+						selection: {
+							anchor: selection.head + 1,
+							head: selection.head + 1
+						},
+						effects: popoverRangeEffect.of({
+							trigger,
+							range: {
+								from: selection.head,
+								to: selection.head + 1
+							}
+						})
+					});
+					return true;
+				}
+				return false;
+			}
+		})),
+		options.triggerKey && {
+			key: options.triggerKey,
+			run: (view) => {
+				const selection = view.state.selection.main;
+				const line = view.state.doc.lineAt(selection.head);
+				let str = line.text.slice(0, selection.head - line.from);
+				const idx = getLastIndexOf(str, options.delimiters ?? DELIMITERS);
+				if (idx !== -1) str = str.slice(idx + 1);
+				const from = line.from + idx;
+				view.dispatch({
+					effects: popoverRangeEffect.of({ range: {
+						from: from + 1,
+						to: selection.head
+					} }),
+					changes: selection.head === view.state.doc.length ? {
+						from: from + 1,
+						to: selection.head,
+						insert: " "
+					} : void 0
+				});
+				return true;
+			}
+		},
+		{
+			key: "ArrowUp",
+			run: (view) => {
+				if (view.state.field(popoverStateField)?.range) {
+					options.onArrowUp?.({ view });
+					return true;
+				}
+				return false;
+			}
+		},
+		{
+			key: "ArrowDown",
+			run: (view) => {
+				if (view.state.field(popoverStateField)?.range) {
+					options.onArrowDown?.({ view });
+					return true;
+				}
+				return false;
+			}
+		},
+		{
+			key: "Enter",
+			run: (view) => {
+				if (view.state.field(popoverStateField)?.range) return options.onEnter?.({ view }) ?? false;
+				return false;
+			}
+		}
+	].filter(isTruthy));
+};
+/**
+* Creates a <dx-anchor> tag, which is used to anchor the Popver.
+*/
+var popoverAnchorDecoration = (options) => {
+	return ViewPlugin.fromClass(class {
+		view;
+		_decorations = Decoration.none;
+		constructor(view) {
+			this.view = view;
+		}
+		update({ view, transactions }) {
+			const builder = new RangeSetBuilder();
+			const { range, trigger } = view.state.field(popoverStateField) ?? {};
+			if (range) {
+				const selection = view.state.selection.main;
+				if (selection.head >= range.from && selection.head <= range.to) builder.add(range.from, range.to + 1, Decoration.mark({
+					tagName: "dx-anchor",
+					class: "cm-popover-trigger",
+					attributes: {
+						"data-visible-focus": "false",
+						"data-auto-trigger": "true",
+						"data-trigger": trigger ?? options.triggerKey ?? ""
+					}
+				}));
+				if (transactions.some((tr) => tr.effects.some((effect) => effect.is(popoverRangeEffect)))) {
+					const content = view.state.sliceDoc(range.from + (trigger ? trigger.length : 0), range.to);
+					options.onTextChange?.({
+						view,
+						pos: selection.head,
+						text: content,
+						trigger
+					});
+				}
+			}
+			this._decorations = builder.finish();
+		}
+	}, { decorations: (v) => v._decorations });
+};
+var popoverRangeEffect = StateEffect.define();
+var popoverStateField = StateField.define({
+	create: () => null,
+	update: (value, tr) => {
+		let newValue = value;
+		for (const effect of tr.effects) if (effect.is(popoverRangeEffect)) newValue = effect.value;
+		return newValue;
+	}
+});
+var getLastIndexOf = (str, delimiters) => Math.max(...delimiters.map((delim) => str.lastIndexOf(delim)));
+//#endregion
+//#region src/components/EditorMenuProvider/menu-presets.ts
+/**
+* Re-open the popover in link-query ("@") mode at the cursor, seeding the same query shape the user
+* would get by typing the trigger manually: a single "@" for an inline link, "@@" for a block embed.
+* The consumer's `@` handler (e.g. plugin-markdown's link query) renders the object picker and, on
+* selection, replaces this range with the corresponding markdown link.
+*
+* Deferred to the next frame: selecting a slash-menu item deletes the "/" range, which closes the
+* popover; opening synchronously races that close (`onActivate` reads a stale open state) and the
+* picker never appears.
+*/
+var openLinkQuery = (view, insert) => {
+	requestAnimationFrame(() => {
+		const { head } = view.state.selection.main;
+		const to = head + insert.length;
+		view.dispatch({
+			changes: {
+				from: head,
+				insert
+			},
+			selection: {
+				anchor: to,
+				head: to
+			},
+			effects: popoverRangeEffect.of({
+				trigger: "@",
+				range: {
+					from: head,
+					to
+				}
+			})
+		});
+	});
+};
+var formattingCommands = {
+	id: "markdown",
+	label: "Markdown",
+	items: [
+		{
+			id: "heading-1",
+			label: "Heading 1",
+			icon: "ph--text-h-one--regular",
+			onSelect: ({ view, head }) => insertAtLineStart(view, head, "# ")
+		},
+		{
+			id: "heading-2",
+			label: "Heading 2",
+			icon: "ph--text-h-two--regular",
+			onSelect: ({ view, head }) => insertAtLineStart(view, head, "## ")
+		},
+		{
+			id: "heading-3",
+			label: "Heading 3",
+			icon: "ph--text-h-three--regular",
+			onSelect: ({ view, head }) => insertAtLineStart(view, head, "### ")
+		},
+		{
+			id: "heading-4",
+			label: "Heading 4",
+			icon: "ph--text-h-four--regular",
+			onSelect: ({ view, head }) => insertAtLineStart(view, head, "#### ")
+		},
+		{
+			id: "heading-5",
+			label: "Heading 5",
+			icon: "ph--text-h-five--regular",
+			onSelect: ({ view, head }) => insertAtLineStart(view, head, "##### ")
+		},
+		{
+			id: "heading-6",
+			label: "Heading 6",
+			icon: "ph--text-h-six--regular",
+			onSelect: ({ view, head }) => insertAtLineStart(view, head, "###### ")
+		},
+		{
+			id: "bullet-list",
+			label: "Bullet List",
+			icon: "ph--list-bullets--regular",
+			onSelect: ({ view, head }) => insertAtLineStart(view, head, "- ")
+		},
+		{
+			id: "numbered-list",
+			label: "Numbered List",
+			icon: "ph--list-numbers--regular",
+			onSelect: ({ view, head }) => insertAtLineStart(view, head, "1. ")
+		},
+		{
+			id: "task-list",
+			label: "Task List",
+			icon: "ph--list-checks--regular",
+			onSelect: ({ view, head }) => insertAtLineStart(view, head, "- [ ] ")
+		},
+		{
+			id: "quote",
+			label: "Quote",
+			icon: "ph--quotes--regular",
+			onSelect: ({ view, head }) => insertAtLineStart(view, head, "> ")
+		},
+		{
+			id: "code-block",
+			label: "Code Block",
+			icon: "ph--code-block--regular",
+			onSelect: ({ view, head }) => insertAtLineStart(view, head, "```\n\n```")
+		},
+		{
+			id: "table",
+			label: "Table",
+			icon: "ph--table--regular",
+			onSelect: ({ view, head }) => insertAtLineStart(view, head, "| | | |\n|---|---|---|\n| | | |")
+		}
+	]
+};
+var linkSlashCommands = {
+	id: "link",
+	label: "Link",
+	items: [{
+		id: "inline-link",
+		label: "Inline link",
+		icon: "ph--link--regular",
+		onSelect: ({ view }) => openLinkQuery(view, "@")
+	}, {
+		id: "inline-object",
+		label: "Inline object",
+		icon: "ph--lego--regular",
+		onSelect: ({ view }) => openLinkQuery(view, "@@")
+	}]
+};
+//#endregion
+//#region src/components/EditorMenuProvider/EditorMenuProvider.tsx
+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.
+* 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 triggerRef = useRef(null);
+	const getViewRef = useDynamicRef(getView);
+	const [open, setOpen] = useControllableState({
+		prop: openProp,
+		defaultProp: defaultOpen,
+		onChange: (open) => {
+			const view = getViewRef.current?.();
+			invariant(view, void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file$3,
+				L: 90,
+				S: void 0,
+				A: ["view", ""]
+			});
+			onOpenChange?.({
+				view,
+				open
+			});
+		}
+	});
+	const [root, setRoot] = useState(null);
+	useEffect(() => {
+		if (!root) return;
+		return addEventListener(root, DX_ANCHOR_ACTIVATE, (event) => {
+			const { trigger, dxn } = event;
+			if (!dxn) {
+				triggerRef.current = trigger;
+				if (onActivate) {
+					const view = getViewRef.current?.();
+					if (view) onActivate({
+						view,
+						trigger: trigger.getAttribute("data-trigger") ?? void 0
+					});
+				} else requestAnimationFrame(() => setOpen(true));
+			}
+		}, {
+			capture: true,
+			passive: false
+		});
+	}, [root, onActivate]);
+	const handleSelect = useCallback((item) => {
+		const view = getViewRef.current?.();
+		invariant(view, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$3,
+			L: 129,
+			S: void 0,
+			A: ["view", ""]
+		});
+		onSelect?.({
+			view,
+			item
+		});
+		setOpen(false);
+		view.focus();
+	}, [
+		getViewRef,
+		onSelect,
+		setOpen
+	]);
+	const menuGroups = groups?.filter((group) => group.items.length > 0) ?? [];
+	const searchInputRef = useRef(null);
+	useEffect(() => {
+		if (!search || !open) return;
+		let inner;
+		const outer = requestAnimationFrame(() => {
+			inner = requestAnimationFrame(() => searchInputRef.current?.focus());
+		});
+		return () => {
+			cancelAnimationFrame(outer);
+			cancelAnimationFrame(inner);
+		};
+	}, [search, open]);
+	const handleSearchKeyDown = useCallback((event) => {
+		switch (event.key) {
+			case "ArrowUp":
+			case "ArrowDown":
+				event.preventDefault();
+				onNavigate?.(event.key === "ArrowUp" ? "up" : "down");
+				break;
+			case "Enter": {
+				const item = getMenuItem(menuGroups, currentItem);
+				if (item) {
+					event.preventDefault();
+					handleSelect(item);
+				}
+				break;
+			}
+		}
+	}, [
+		menuGroups,
+		currentItem,
+		handleSelect,
+		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 mbe-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
+			})
+		]
+	});
+};
+var Menu$1 = ({ groups, currentItem, onSelect }) => {
+	const { tx } = useThemeContext();
+	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)) });
+};
+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) })
+	}), group.items.map((item) => /* @__PURE__ */ jsx(MenuItem, {
+		item,
+		current: currentItem === item.id,
+		onSelect
+	}, item.id))] });
+};
+var MenuItem = ({ item, current, onSelect }) => {
+	const { tx } = useThemeContext();
+	const { t } = useTranslation();
+	const listRef = useRef(null);
+	useEffect(() => {
+		if (current && listRef.current) listRef.current.scrollIntoView({
+			behavior: "instant",
+			block: "nearest"
+		});
+	}, [current]);
+	const handleSelect = useCallback(() => onSelect?.(item), [item, onSelect]);
+	return /* @__PURE__ */ jsxs("li", {
+		ref: listRef,
+		className: tx("menu.item", {}, [current && "bg-hover-surface"]),
+		onClick: handleSelect,
+		children: [item.icon && /* @__PURE__ */ jsx(Icon, { icon: item.icon }), /* @__PURE__ */ jsx("span", {
+			className: "grow truncate",
+			children: toLocalizedString(item.label, t)
+		})]
+	});
+};
+//#endregion
+//#region src/components/EditorMenuProvider/useEditorMenu.ts
+var __dxlog_file$2 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/components/EditorMenuProvider/useEditorMenu.ts";
+/**
+* ```tsx
+* const { groupsRef, extension, ...menuProps } = useEditorMenu();
+* const { parentRef, viewRef } = useTextEditor({ extensions: [extension] });
+* return (
+*   <EditorMenuProvider getView={() => viewRef.current} groups={groupsRef.current} {...menuProps}>
+*     <div ref={parentRef} />
+*   </EditorMenuProvider>
+* );
+* ```
+*/
+var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, filter = true, searchTriggers, getMenu }) => {
+	const groupsRef = useRef([]);
+	const currentRef = useRef(null);
+	const [currentItem, setCurrentItem] = useState();
+	const [open, setOpen] = useState(false);
+	const [search, setSearch] = useState(false);
+	const [query, setQuery] = useState("");
+	const [_, refresh] = useState({});
+	const contextRef = useRef(null);
+	const requestRef = useRef(0);
+	/**
+	* Get filtered options.
+	*/
+	const getMenuOptions = useCallback(async ({ text, trigger, ...props }) => {
+		const groups = await getMenu?.({
+			text,
+			trigger,
+			...props
+		}) ?? [];
+		return filter && trigger !== "@" ? filterMenuGroups(groups, (item) => text ? item.label.toLowerCase().startsWith(text.toLowerCase()) : true) : groups;
+	}, [getMenu, filter]);
+	/**
+	* Recompute the menu and preselect the first item.
+	*/
+	const updateGroups = useCallback(async ({ view, pos, text, trigger }) => {
+		const request = ++requestRef.current;
+		const groups = await getMenuOptions({
+			state: view.state,
+			pos,
+			text,
+			trigger
+		}) ?? [];
+		if (request !== requestRef.current) return;
+		groupsRef.current = groups;
+		const firstItem = groupsRef.current.filter((group) => group.items.length > 0)[0]?.items[0];
+		if (firstItem) {
+			setCurrentItem(firstItem.id);
+			currentRef.current = firstItem;
+		} else {
+			setCurrentItem(void 0);
+			currentRef.current = null;
+		}
+		refresh({});
+	}, [getMenuOptions]);
+	const handleOpenChange = useCallback(async ({ view, open }) => {
+		invariant(view, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$2,
+			L: 136,
+			S: void 0,
+			A: ["view", ""]
+		});
+		setOpen(open);
+		if (!open) {
+			setCurrentItem(void 0);
+			setSearch(false);
+			setQuery("");
+			contextRef.current = null;
+			requestRef.current++;
+			groupsRef.current = [];
+			currentRef.current = null;
+			view.dispatch({ effects: [popoverRangeEffect.of(null)] });
+		}
+		requestAnimationFrame(() => {
+			view.dispatch({ effects: [modalStateEffect.of(open)] });
+		});
+	}, [getMenuOptions]);
+	const handleActivate = useCallback(async ({ view, trigger }) => {
+		const item = getMenuItem(groupsRef.current, currentItem);
+		if (item) currentRef.current = item;
+		if (!open) handleOpenChange({
+			view,
+			open: true,
+			trigger
+		});
+	}, [open, handleOpenChange]);
+	const handleSelect = useCallback(({ view, item }) => {
+		const { range } = view.state.field(popoverStateField) ?? {};
+		if (range) view.dispatch({ changes: {
+			from: range.from,
+			to: range.to,
+			insert: ""
+		} });
+		item.onSelect?.({
+			view,
+			head: view.state.selection.main.head
+		});
+		view.focus();
+	}, []);
+	const handleCancel = useCallback(({ view }) => {
+		const { range, trigger } = view.state.field(popoverStateField) ?? {};
+		if (range && trigger) view.dispatch({ changes: {
+			...range,
+			insert: ""
+		} });
+	}, []);
+	const handleQueryChange = useCallback((query) => {
+		setQuery(query);
+		const context = contextRef.current;
+		if (context) updateGroups({
+			...context,
+			text: context.text + query
+		});
+	}, [updateGroups]);
+	const handleNavigate = useCallback((direction) => {
+		setCurrentItem((currentItem) => {
+			const next = direction === "up" ? getPreviousMenuItem(groupsRef.current, currentItem) : getNextMenuItem(groupsRef.current, currentItem);
+			if (!next) return currentItem;
+			currentRef.current = next;
+			return next.id;
+		});
+	}, []);
+	const serializedTrigger = Array.isArray(trigger) ? trigger.join(",") : trigger;
+	const serializedSearchTriggers = searchTriggers?.join(",");
+	return {
+		groupsRef,
+		extension: useMemo(() => {
+			return popover({
+				trigger,
+				triggerKey,
+				placeholder,
+				activateOnTyping,
+				onClose: ({ view }) => handleOpenChange({
+					view,
+					open: false
+				}),
+				onEnter: ({ view }) => {
+					if (currentRef.current) {
+						handleSelect({
+							view,
+							item: currentRef.current
+						});
+						return true;
+					}
+					return false;
+				},
+				onArrowUp: () => handleNavigate("up"),
+				onArrowDown: () => handleNavigate("down"),
+				onTextChange: async ({ view, pos, text, trigger }) => {
+					contextRef.current = {
+						view,
+						pos,
+						text,
+						trigger
+					};
+					setSearch(!!trigger && !!searchTriggers?.includes(trigger));
+					setQuery("");
+					await updateGroups({
+						view,
+						pos,
+						text,
+						trigger
+					});
+				}
+			});
+		}, [
+			handleOpenChange,
+			handleNavigate,
+			updateGroups,
+			serializedTrigger,
+			serializedSearchTriggers,
+			placeholder,
+			activateOnTyping
+		]),
+		currentItem,
+		open,
+		search,
+		query,
+		onOpenChange: handleOpenChange,
+		onActivate: handleActivate,
+		onSelect: handleSelect,
+		onCancel: handleCancel,
+		onQueryChange: handleQueryChange,
+		onNavigate: handleNavigate
+	};
+};
+//#endregion
+//#region src/components/EditorToolbar/blocks.ts
+var blockTypes = {
+	blockquote: "ph--quotes--regular",
+	codeblock: "ph--code-block--regular",
+	table: "ph--table--regular"
+};
+/** Add block actions to the builder. */
+var addBlocks = (state, getView) => (builder) => {
+	const value = state?.blockQuote ? "blockquote" : state.blockType ?? "";
+	builder.group("block", {
+		label: ["block.label", { ns: translationKey }],
+		iconOnly: true,
+		variant: "toggleGroup",
+		selectCardinality: "single",
+		value
+	}, (group) => {
+		for (const [type, icon] of Object.entries(blockTypes)) {
+			const checked = type === value;
+			group.action(type, {
+				label: [`block.${type}.label`, { ns: translationKey }],
+				checked,
+				...type === "table" && { disabled: !!state.blankLine },
+				icon
+			}, () => {
+				const view = getView();
+				if (!view) return;
+				switch (type) {
+					case "blockquote":
+						checked ? removeBlockquote(view) : addBlockquote(view);
+						break;
+					case "codeblock":
+						checked ? removeCodeblock(view) : addCodeblock(view);
+						break;
+					case "table":
+						insertTable(view);
+						break;
+				}
+			});
+		}
+	});
+};
+//#endregion
+//#region src/components/EditorToolbar/formatting.ts
+var formats = {
+	strong: "ph--text-b--regular",
+	emphasis: "ph--text-italic--regular",
+	strikethrough: "ph--text-strikethrough--regular",
+	code: "ph--code--regular",
+	link: "ph--link--regular"
+};
+/** Add formatting actions to the builder. */
+var addFormatting = (state, getView) => (builder) => {
+	const formatting = state;
+	builder.group("formatting", {
+		label: ["formatting.label", { ns: translationKey }],
+		iconOnly: true,
+		variant: "toggleGroup",
+		selectCardinality: "multiple",
+		value: Object.keys(formats).filter((key) => !!formatting[key])
+	}, (group) => {
+		for (const [type, icon] of Object.entries(formats)) {
+			const checked = !!formatting[type];
+			group.action(type, {
+				label: [`formatting.${type}.label`, { ns: translationKey }],
+				checked,
+				icon
+			}, () => {
+				const view = getView();
+				if (!view) return;
+				if (type === "link") {
+					checked ? removeLink(view) : addLink()(view);
+					return;
+				}
+				setStyle(type === "strong" ? Inline.Strong : type === "emphasis" ? Inline.Emphasis : type === "strikethrough" ? Inline.Strikethrough : Inline.Code, !checked)(view);
+			});
+		}
+	});
+};
+//#endregion
+//#region src/components/EditorToolbar/headings.ts
+var headingIcons = {
+	0: "ph--paragraph--regular",
+	1: "ph--text-h-one--regular",
+	2: "ph--text-h-two--regular",
+	3: "ph--text-h-three--regular",
+	4: "ph--text-h-four--regular",
+	5: "ph--text-h-five--regular",
+	6: "ph--text-h-six--regular"
+};
+var computeHeadingValue = (state) => {
+	const blockType = state ? state.blockType : "paragraph";
+	const heading = blockType && /heading(\d)/.exec(blockType);
+	return heading ? heading[1] : blockType === "paragraph" || !blockType ? "0" : "";
+};
+/** Add heading actions to the builder. */
+var addHeadings = (state, getView) => (builder) => {
+	const headingValue = computeHeadingValue(state);
+	builder.group("heading", {
+		label: ["heading.label", { ns: translationKey }],
+		icon: "ph--text-h--regular",
+		iconOnly: true,
+		variant: "dropdownMenu",
+		applyActive: true,
+		selectCardinality: "single",
+		value: headingValue
+	}, (group) => {
+		for (const [levelStr, icon] of Object.entries(headingIcons)) {
+			const level = parseInt(levelStr);
+			group.action(`heading--${levelStr}`, {
+				label: ["heading-level.label", {
+					count: level,
+					ns: translationKey
+				}],
+				icon,
+				checked: levelStr === headingValue
+			}, () => setHeading(level)(getView()));
+		}
+	});
+};
+//#endregion
+//#region src/components/EditorToolbar/image.ts
+/** Add image upload action to the builder. */
+var addImageUpload = (onImageUpload) => (builder) => {
+	builder.action("image", {
+		label: ["image.label", { ns: translationKey }],
+		testId: "editor.toolbar.image",
+		icon: "ph--image-square--regular"
+	}, onImageUpload);
+};
+//#endregion
+//#region src/components/EditorToolbar/lists.ts
+var listStyles = {
+	bullet: "ph--list-bullets--regular",
+	ordered: "ph--list-numbers--regular",
+	task: "ph--list-checks--regular"
+};
+/** Add list actions to the builder. */
+var addLists = (state, getView) => (builder) => {
+	const value = state.listStyle ?? "";
+	builder.group("list", {
+		label: ["list.label", { ns: translationKey }],
+		iconOnly: true,
+		variant: "toggleGroup",
+		selectCardinality: "single",
+		value
+	}, (group) => {
+		for (const [listStyle, icon] of Object.entries(listStyles)) {
+			const checked = value === listStyle;
+			group.action(`list-${listStyle}`, {
+				label: [`list.${listStyle}.label`, { ns: translationKey }],
+				checked,
+				icon
+			}, () => {
+				const view = getView();
+				if (!view) return;
+				toggleList(listStyle === "ordered" ? List.Ordered : listStyle === "bullet" ? List.Bullet : List.Task)(view);
+			});
+		}
+	});
+};
+//#endregion
+//#region src/components/EditorToolbar/search.ts
+/** Add search action to the builder. */
+var addSearch = (getView) => (builder) => {
+	builder.action("search", {
+		label: ["search.label", { ns: translationKey }],
+		testId: "editor.toolbar.search",
+		icon: "ph--magnifying-glass--regular"
+	}, () => openSearchPanel(getView()));
+};
+//#endregion
+//#region src/components/EditorToolbar/view-mode.ts
+/**
+* The built-in view modes: preview (rendered), source (raw edit), readonly (non-editable source). Typed
+* so each `id` is an {@link EditorViewMode}, letting callers pass `item.id` to `onViewModeChange` without a cast.
+*/
+var defaultViewModeItems = [
+	{
+		id: "preview",
+		icon: "ph--eye--regular"
+	},
+	{
+		id: "source",
+		icon: "ph--pencil-simple--regular"
+	},
+	{
+		id: "readonly",
+		icon: "ph--pencil-slash--regular"
+	}
+];
+/**
+* Add view mode actions to the builder. `items` defaults to the three built-in editor view modes;
+* callers pass an extended list to surface contributed modes (see {@link ViewModeItem}) in the same
+* single-select dropdown. The trigger tracks the checked item (via the group's `applyActive`).
+*/
+var addViewMode = (state, onViewModeChange, items = defaultViewModeItems) => (builder) => {
+	const value = state.viewMode ?? "source";
+	builder.group("viewMode", {
+		label: ["view-mode.label", { ns: translationKey }],
+		icon: "ph--eye--regular",
+		iconOnly: true,
+		variant: "dropdownMenu",
+		applyActive: true,
+		selectCardinality: "single",
+		value
+	}, (group) => {
+		for (const item of items) {
+			const checked = item.checked ?? item.id === value;
+			group.action(`view-mode--${item.id}`, {
+				label: item.label ?? [`view-mode.${item.id}.label`, { ns: translationKey }],
+				checked,
+				icon: item.icon
+			}, () => item.onSelect ? item.onSelect() : onViewModeChange(item.id));
+		}
+	});
+};
+//#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 })
+		})
+	});
+});
+var useMarkdownMenuActions = ({ state, getView, customActions, ...features }) => {
+	return useMenuActions(useMemo(() => createMarkdownActions({
+		state,
+		getView,
+		customActions,
+		...features
+	}), [
+		state,
+		getView,
+		customActions,
+		features?.showHeadings,
+		features?.showFormatting,
+		features?.showLists,
+		features?.showBlocks,
+		features?.showSearch,
+		features?.onImageUpload,
+		features?.onViewModeChange,
+		features?.viewModes
+	]));
+};
+var createMarkdownActions = ({ state, getView, customActions, ...features }) => {
+	return Atom.make((get) => {
+		const stateSnapshot = get(state);
+		return MenuBuilder.make().subgraph(features?.showHeadings !== false && addHeadings(stateSnapshot, getView)).subgraph(features?.showFormatting !== false && addFormatting(stateSnapshot, getView)).subgraph(features?.showLists !== false && addLists(stateSnapshot, getView)).subgraph(features?.showBlocks !== false && addBlocks(stateSnapshot, getView)).subgraph(features?.onImageUpload && addImageUpload(features.onImageUpload)).separator("gap").subgraph(customActions && get(customActions)).subgraph(features?.showSearch !== false && addSearch(getView)).subgraph(features?.onViewModeChange && addViewMode(stateSnapshot, features.onViewModeChange, features.viewModes)).build();
+	});
+};
+//#endregion
+//#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}),
+* markdown parsing, and visual decorations.
+*
+* Used by surfaces such as `AgentProperties` and `MagazineProperties` to render the
+* `instructions` field of an object as a small editable markdown block.
+*
+* The memoization depends on primitive option values plus the `extensions` array reference,
+* so callers passing fresh option literals each render still hit the cache.
+*/
+var useBasicMarkdownExtensions = ({ placeholder, decorate = true, readonly = false, extensions } = {}) => {
+	const { themeMode } = useThemeContext();
+	return useMemo(() => [
+		createBasicExtensions({
+			placeholder,
+			readOnly: readonly
+		}),
+		createThemeExtensions({
+			syntaxHighlighting: true,
+			themeMode
+		}),
+		createMarkdownExtensions(),
+		...decorate ? [decorateMarkdown()] : [],
+		...extensions ?? []
+	], [
+		placeholder,
+		themeMode,
+		decorate,
+		readonly,
+		extensions
+	]);
+};
+//#endregion
+//#region src/hooks/useTextEditor.ts
+var __dxlog_file$1 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+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 [instanceId] = useState(() => `text-editor-${++instanceCount}`);
+	const [view, setView] = useState(null);
+	const parentRef = useRef(null);
+	useEffect(() => {
+		let view = null;
+		if (parentRef.current) {
+			log("create", {
+				id,
+				instanceId,
+				doc: initialValue?.length ?? 0
+			}, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file$1,
+				L: 75,
+				S: void 0
+			});
+			let initialSelection;
+			if (selection?.anchor && initialValue?.length) {
+				if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) initialSelection = selection;
+			} else if (selectionEnd && selection === void 0) {
+				const index = initialValue?.indexOf("\n");
+				initialSelection = { anchor: !index || index === -1 ? 0 : index };
+			}
+			const state = EditorState.create({
+				doc: doc ?? initialValue,
+				extensions: [
+					id && documentId.of(id),
+					extensions,
+					EditorView.exceptionSink.of((err) => {
+						log.catch(err, void 0, {
+							"~LogMeta": "~LogMeta",
+							F: __dxlog_file$1,
+							L: 97,
+							S: void 0
+						});
+					})
+				].filter(isTruthy)
+			});
+			view = new EditorView({
+				parent: parentRef.current,
+				state,
+				scrollTo: scrollTo ? EditorView.scrollIntoView(scrollTo, { yMargin: 96 }) : void 0,
+				dispatchTransactions: debug ? debugDispatcher : void 0
+			});
+			if (selectionEnd && !initialSelection) {
+				const { to } = view.state.doc.lineAt(0);
+				if (to) view.dispatch({ selection: { anchor: to } });
+			}
+			setView(view);
+		}
+		return () => {
+			log("destroy", { id }, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file$1,
+				L: 122,
+				S: void 0
+			});
+			view?.destroy();
+		};
+	}, deps);
+	useEffect(() => {
+		if (view) {
+			if (scrollTo || selection) {
+				if (selection && selection.anchor > view.state.doc.length) {
+					log.warn("invalid selection", {
+						length: view.state.doc.length,
+						scrollTo,
+						selection
+					}, {
+						"~LogMeta": "~LogMeta",
+						F: __dxlog_file$1,
+						L: 131,
+						S: void 0
+					});
+					return;
+				}
+				view.dispatch(createEditorStateTransaction({
+					scrollTo,
+					selection
+				}));
+			}
+		}
+	}, [
+		view,
+		scrollTo,
+		selection
+	]);
+	useEffect(() => {
+		if (view && autoFocus) view.focus();
+	}, [autoFocus, view]);
+	return {
+		parentRef,
+		view,
+		focusAttributes: {
+			tabIndex: 0,
+			onKeyDown: useCallback((event) => {
+				const { key, target, currentTarget } = event;
+				switch (key) {
+					case "Escape":
+						if (view?.state.field(modalStateField, false)) return;
+						(view?.contentDOM.closest("[tabindex=\"0\"]"))?.focus();
+						break;
+					case "Enter":
+						event.preventDefault();
+						if (target === currentTarget) view?.focus();
+						break;
+				}
+			}, [view])
+		}
+	};
+};
+//#endregion
+//#region src/components/Editor/EditorView.tsx
+/**
+* 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) => {
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	const { parentRef, focusAttributes, view } = useTextEditor(() => ({
+		id,
+		initialValue: value,
+		selectionEnd,
+		extensions: [extensions ?? [], EditorView.updateListener.of(({ view, docChanged, transactions }) => {
+			if (!transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value) && docChanged) onChangeRef.current?.(view.state.doc.toString());
+		})],
+		...props
+	}), [
+		id,
+		extensions,
+		selectionEnd
+	]);
+	useImperativeHandle(forwardedRef, () => {
+		return createEditorController(view);
+	}, [id, view]);
+	useEffect(() => {
+		if (!view || value === void 0) return;
+		const next = value;
+		if (view.state.doc.toString() === next) return;
+		requestAnimationFrame(() => {
+			if (view.state.doc.toString() === next) return;
+			view.dispatch({
+				annotations: initialSync,
+				changes: [{
+					from: 0,
+					to: view.state.doc.length,
+					insert: next
+				}],
+				selection: selectionEnd ? { anchor: next.length } : void 0
+			});
+			if (selectionEnd) view.focus();
+		});
+	}, [
+		view,
+		value,
+		selectionEnd
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: mx("w-full outline-hidden", classNames),
+		...focusable ? focusAttributes : {},
+		ref: parentRef
+	});
+});
+//#endregion
+//#region src/components/Editor/Editor.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/components/Editor/Editor.tsx";
+/**
+* Root component for the Editor compound component.
+* Provides context for all child components and manages the editor controller state.
+*/
+var EditorRoot = forwardRef(({ children, extensions: extensionsProp, widgets, viewMode, numItems, searchPlaceholder, ...props }, forwardedRef) => {
+	const state = useMemo(() => Atom.make({ viewMode }), [viewMode]);
+	const { groupsRef, extension, ...menuProps } = useEditorMenu(props);
+	const extensions = useMemo(() => [extension, extensionsProp].filter(isNonNullable).flat(), [extension, extensionsProp]);
+	const [controller, setController] = useState(noopController);
+	useImperativeHandle(forwardedRef, () => controller, [controller]);
+	return /* @__PURE__ */ jsx(EditorContextProvider, {
+		controller,
+		setController,
+		extensions,
+		widgets,
+		state,
+		children: /* @__PURE__ */ jsx(EditorMenuProvider, {
+			getView: useCallback(() => controller?.view ?? null, [controller]),
+			groups: groupsRef.current,
+			numItems,
+			searchPlaceholder,
+			...menuProps,
+			children
+		})
+	});
+});
+EditorRoot.displayName = "Editor.Root";
+var EDITOR_CONTENT_NAME = "Editor.Content";
+/**
+* Content component that wraps the toolbar and editor view area.
+*/
+var EditorContent = ({ classNames, children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: mx("grid grid-rows-[min-content_1fr] h-full overflow-hidden", classNames),
+		children
+	});
+};
+EditorContent.displayName = EDITOR_CONTENT_NAME;
+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 }) => {
+	const { extensions: additionalExtensions = [], setController } = useEditorContext(EDITOR_VIEW_NAME);
+	const extensions = useMemo(() => [additionalExtensions, providedExtensions].filter(isNonNullable).flat(), [providedExtensions, additionalExtensions]);
+	return /* @__PURE__ */ jsx(EditorView$2, {
+		...props,
+		extensions,
+		ref: setController
+	});
+};
+EditorView$1.displayName = EDITOR_VIEW_NAME;
+var EDITOR_TOOLBAR_NAME = "Editor.Toolbar";
+/**
+* Toolbar component that provides editor formatting and control actions.
+* Automatically connects to the editor view through context.
+*/
+var EditorToolbar = (props) => {
+	const { controller, state } = useEditorContext(EDITOR_TOOLBAR_NAME);
+	const getView = useCallback(() => {
+		invariant(controller?.view, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 155,
+			S: void 0,
+			A: ["controller?.view", ""]
+		});
+		return controller?.view;
+	}, [controller]);
+	return /* @__PURE__ */ jsx(EditorToolbar$1, {
+		...props,
+		getView,
+		state
+	});
+};
+EditorToolbar.displayName = EDITOR_TOOLBAR_NAME;
+var EDITOR_BLOCKS_NAME = "Editor.Blocks";
+/**
+* Renders the xmlTags widget portals (embedded blocks) contributed via the editor's `setWidgets`
+* callback. Place inside `Editor.Root`; the widgets come from context (pass them to `Editor.Root`).
+*/
+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)) });
+};
+EditorBlocks.displayName = EDITOR_BLOCKS_NAME;
+var EDITOR_DIAGNOSTICS_NAME = "Editor.Diagnostics";
+/** Rough leaf count of a (recursively nested) CodeMirror extension tree. */
+var countExtensions = (extension) => extension == null ? 0 : Array.isArray(extension) ? extension.reduce((sum, child) => sum + countExtensions(child), 0) : 1;
+/**
+* Developer panel showing live editor state read from the CodeMirror `EditorState` (document size,
+* selection, viewport, configured-extension count). A debugging aid — gate it behind a dev/debug
+* setting; unrelated to `@codemirror/lint` diagnostics. Place inside `Editor.Root`, below the content.
+*/
+var EditorDiagnostics = ({ classNames }) => {
+	const { controller, extensions } = useEditorContext(EDITOR_DIAGNOSTICS_NAME);
+	const view = controller?.view ?? null;
+	const [, setRevision] = useState(0);
+	const lastState = useRef(null);
+	useEffect(() => {
+		if (!view) return;
+		let frame = 0;
+		const tick = () => {
+			if (view.state !== lastState.current) {
+				lastState.current = view.state;
+				setRevision((revision) => revision + 1);
+			}
+			frame = requestAnimationFrame(tick);
+		};
+		frame = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(frame);
+	}, [view]);
+	if (!view) return null;
+	const { state } = view;
+	const { doc, selection } = state;
+	const { main } = selection;
+	const head = doc.lineAt(main.head);
+	const extensionCount = countExtensions(extensions);
+	const item = (label, value) => /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
+		className: "text-subdued",
+		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),
+		"data-testid": "editor.diagnostics",
+		children: [
+			item("chars", doc.length),
+			item("lines", doc.lines),
+			item("cursor", main.empty ? `${head.number}:${main.head - head.from + 1}` : `${main.from}–${main.to} (${main.to - main.from})`),
+			selection.ranges.length > 1 && item("ranges", selection.ranges.length),
+			item("viewport", `${view.viewport.from}–${view.viewport.to}`),
+			item("mode", state.readOnly ? "read-only" : "editable"),
+			item("extensions", extensionCount)
+		]
+	});
+};
+EditorDiagnostics.displayName = EDITOR_DIAGNOSTICS_NAME;
+var Editor = {
+	Root: EditorRoot,
+	Toolbar: EditorToolbar,
+	Content: EditorContent,
+	View: EditorView$1,
+	Blocks: EditorBlocks,
+	Diagnostics: EditorDiagnostics
+};
+//#endregion
+//#region src/components/EditorPreviewProvider/EditorPreviewContext.ts
+var [EditorPreviewContextProvider, useEditorPreview] = createContext("PreviewPopover", {});
+//#endregion
+//#region src/components/EditorPreviewProvider/EditorPreviewProvider.tsx
+/**
+* Standalone anchor-preview popover for use outside Composer (storybook, tests).
+* In Composer, PreviewPlugin listens on window for DX_ANCHOR_ACTIVATE events and
+* dispatches LayoutOperation.UpdatePopover instead; this provider is not needed there.
+*/
+var EditorPreviewProvider = ({ children, onLookup }) => {
+	const triggerRef = useRef(null);
+	const [value, setValue] = useState({});
+	const [open, setOpen] = useState(false);
+	const handleActivate = useCallback((event) => {
+		const { dxn, label, trigger } = event;
+		setValue((value) => ({
+			...value,
+			link: {
+				label,
+				dxn
+			},
+			pending: true
+		}));
+		triggerRef.current = trigger;
+		queueMicrotask(() => setOpen(true));
+		onLookup?.({
+			label,
+			dxn
+		}).then((target) => setValue((value) => ({
+			...value,
+			target: target ?? void 0,
+			pending: false
+		})));
+	}, [onLookup]);
+	const [root, setRoot] = useState(null);
+	useEffect(() => {
+		if (!root || !handleActivate) return;
+		return addEventListener(root, DX_ANCHOR_ACTIVATE, handleActivate, {
+			capture: true,
+			passive: false
+		});
+	}, [root, handleActivate]);
+	return /* @__PURE__ */ jsx(EditorPreviewContextProvider, {
+		pending: value.pending,
+		link: value.link,
+		target: value.target,
+		children: /* @__PURE__ */ jsxs(Popover.Root, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(Popover.VirtualTrigger, { virtualRef: triggerRef }), /* @__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 };
+
+//# sourceMappingURL=index.mjs.map