@dxos/react-ui-editor 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

package/dist/lib/node/index.cjs

@@ -39,9 +39,12 @@ __export(node_exports, {
   Inline: () => Inline,
   InputModeExtensions: () => InputModeExtensions,
   List: () => List,
+  RefDropdownMenu: () => RefDropdownMenu,
+  RefPopover: () => RefPopover,
   RemoteSelectionsDecorator: () => RemoteSelectionsDecorator,
   SpaceAwarenessProvider: () => SpaceAwarenessProvider,
   TextKind: () => import_text.TextKind,
+  Tree: () => Tree,
   addBlockquote: () => addBlockquote,
   addCodeblock: () => addCodeblock,
   addLink: () => addLink,
@@ -59,6 +62,8 @@ __export(node_exports, {
   closeEffect: () => closeEffect,
   command: () => command,
   commandKeyBindings: () => commandKeyBindings,
+  commands: () => commands,
+  commentClickedEffect: () => commentClickedEffect,
   comments: () => comments,
   commentsState: () => commentsState,
   convertTreeToJson: () => convertTreeToJson,
@@ -71,6 +76,7 @@ __export(node_exports, {
   createEditorStateTransaction: () => createEditorStateTransaction,
   createElement: () => createElement,
   createExternalCommentSync: () => createExternalCommentSync,
+  createJsonExtensions: () => createJsonExtensions,
   createMarkdownExtensions: () => createMarkdownExtensions,
   createRenderer: () => createRenderer,
   createThemeExtensions: () => createThemeExtensions,
@@ -79,35 +85,46 @@ __export(node_exports, {
   debugTree: () => debugTree,
   decorateMarkdown: () => decorateMarkdown,
   defaultOptions: () => defaultOptions,
+  deleteItem: () => deleteItem,
   documentId: () => documentId,
   dropFile: () => dropFile,
-  editorContent: () => editorContent,
-  editorFullWidth: () => editorFullWidth,
   editorGutter: () => editorGutter,
   editorInputMode: () => editorInputMode,
   editorMonospace: () => editorMonospace,
+  editorSlots: () => editorSlots,
   editorWidth: () => editorWidth,
   editorWithToolbarLayout: () => editorWithToolbarLayout,
   flattenRect: () => flattenRect,
+  floatingMenu: () => floatingMenu,
   focus: () => focus,
   focusField: () => focusField,
   folding: () => folding,
   formattingEquals: () => formattingEquals,
   formattingKeymap: () => formattingKeymap,
   getFormatting: () => getFormatting,
+  getListItemContent: () => getListItemContent,
+  getRange: () => getRange,
   image: () => image,
+  indentItemLess: () => indentItemLess,
+  indentItemMore: () => indentItemMore,
   insertTable: () => insertTable,
+  itemToJSON: () => itemToJSON,
   keymap: () => import_view.keymap,
   linkTooltip: () => linkTooltip,
+  listItemToString: () => listItemToString,
   listener: () => listener,
   logChanges: () => logChanges,
   markdownHighlightStyle: () => markdownHighlightStyle,
   markdownTags: () => markdownTags,
   markdownTagsExtensions: () => markdownTagsExtensions,
+  matchCompletion: () => matchCompletion,
   mention: () => mention,
+  moveItemDown: () => moveItemDown,
+  moveItemUp: () => moveItemUp,
   openCommand: () => openCommand,
   openEffect: () => openEffect,
   outliner: () => outliner,
+  outlinerTree: () => outlinerTree,
   overlap: () => overlap,
   preventNewline: () => preventNewline,
   preview: () => preview,
@@ -119,7 +136,6 @@ __export(node_exports, {
   removeStyle: () => removeStyle,
   renderRoot: () => renderRoot,
   scrollThreadIntoView: () => scrollThreadIntoView,
-  selectionOverlapsComment: () => selectionOverlapsComment,
   selectionState: () => selectionState,
   setBlockquote: () => setBlockquote,
   setComments: () => setComments,
@@ -129,6 +145,7 @@ __export(node_exports, {
   singleValueFacet: () => singleValueFacet,
   stackItemContentEditorClassNames: () => stackItemContentEditorClassNames,
   stackItemContentToolbarClassNames: () => stackItemContentToolbarClassNames,
+  staticCompletion: () => staticCompletion,
   table: () => table,
   tags: () => import_highlight.tags,
   textRange: () => textRange,
@@ -140,13 +157,17 @@ __export(node_exports, {
   toggleStrikethrough: () => toggleStrikethrough,
   toggleStrong: () => toggleStrong,
   toggleStyle: () => toggleStyle,
+  toggleTask: () => toggleTask,
   translations: () => translations_default,
+  traverse: () => traverse,
+  treeFacet: () => treeFacet,
+  typeahead: () => typeahead,
   typewriter: () => typewriter,
-  useCommentClickListener: () => useCommentClickListener,
-  useCommentState: () => useCommentState,
   useComments: () => useComments,
   useEditorToolbarState: () => useEditorToolbarState,
   useFormattingState: () => useFormattingState,
+  useRefDropdownMenu: () => useRefDropdownMenu,
+  useRefPopover: () => useRefPopover,
   useTextEditor: () => useTextEditor,
   wrapWithCatch: () => wrapWithCatch
 });
@@ -155,7 +176,10 @@ var import_state = require("@codemirror/state");
 var import_view = require("@codemirror/view");
 var import_highlight = require("@lezer/highlight");
 var import_text = require("@dxos/protocols/proto/dxos/echo/model/text");
+var import_tracking = require("@preact-signals/safe-react/tracking");
+var import_rx_react = require("@effect-rx/rx-react");
 var import_react = __toESM(require("react"));
+var import_app_graph = require("@dxos/app-graph");
 var import_react_ui = require("@dxos/react-ui");
 var import_react_ui_menu = require("@dxos/react-ui-menu");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
@@ -164,25 +188,24 @@ var import_live_object = require("@dxos/live-object");
 var import_react_ui_menu2 = require("@dxos/react-ui-menu");
 var import_state2 = require("@codemirror/state");
 var import_view2 = require("@codemirror/view");
-var import_util = require("@dxos/util");
-var import_state3 = require("@codemirror/state");
-var import_log = require("@dxos/log");
-var import_react3 = __toESM(require("react"));
-var import_client = require("react-dom/client");
-var import_react_ui2 = require("@dxos/react-ui");
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_lang_markdown = require("@codemirror/lang-markdown");
 var import_view3 = require("@codemirror/view");
 var import_automerge = require("@automerge/automerge");
-var import_state4 = require("@codemirror/state");
+var import_state3 = require("@codemirror/state");
 var import_view4 = require("@codemirror/view");
-var import_log2 = require("@dxos/log");
+var import_log = require("@dxos/log");
 var import_echo = require("@dxos/react-client/echo");
-var import_state5 = require("@codemirror/state");
+var import_state4 = require("@codemirror/state");
 var import_automerge2 = require("@automerge/automerge");
 var import_automerge3 = require("@automerge/automerge");
+var import_state5 = require("@codemirror/state");
 var import_state6 = require("@codemirror/state");
+var import_log2 = require("@dxos/log");
+var import_react3 = __toESM(require("react"));
+var import_client = require("react-dom/client");
+var import_react_ui2 = require("@dxos/react-ui");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_state7 = require("@codemirror/state");
 var import_view5 = require("@codemirror/view");
 var import_async = require("@dxos/async");
@@ -201,105 +224,131 @@ var import_view8 = require("@codemirror/view");
 var import_state10 = require("@codemirror/state");
 var import_view9 = require("@codemirror/view");
 var import_view10 = require("@codemirror/view");
-var import_commands = require("@codemirror/commands");
 var import_state11 = require("@codemirror/state");
 var import_view11 = require("@codemirror/view");
+var import_commands = require("@codemirror/commands");
+var import_state12 = require("@codemirror/state");
+var import_view12 = require("@codemirror/view");
 var import_lodash2 = __toESM(require("lodash.sortby"));
 var import_react4 = require("react");
 var import_async3 = require("@dxos/async");
 var import_log4 = require("@dxos/log");
-var import_util2 = require("@dxos/util");
-var import_state12 = require("@codemirror/state");
-var import_view12 = require("@codemirror/view");
+var import_util = require("@dxos/util");
+var import_state13 = require("@codemirror/state");
+var import_view13 = require("@codemirror/view");
 var import_async4 = require("@dxos/async");
 var import_invariant3 = require("@dxos/invariant");
-var import_util3 = require("@dxos/util");
+var import_util2 = require("@dxos/util");
 var import_language = require("@codemirror/language");
-var import_state13 = require("@codemirror/state");
-var import_view13 = require("@codemirror/view");
+var import_state14 = require("@codemirror/state");
+var import_view14 = require("@codemirror/view");
 var import_autocomplete2 = require("@codemirror/autocomplete");
 var import_commands2 = require("@codemirror/commands");
 var import_language2 = require("@codemirror/language");
 var import_search = require("@codemirror/search");
-var import_state14 = require("@codemirror/state");
+var import_state15 = require("@codemirror/state");
 var import_theme_one_dark = require("@codemirror/theme-one-dark");
-var import_view14 = require("@codemirror/view");
+var import_view15 = require("@codemirror/view");
 var import_lodash3 = __toESM(require("lodash.defaultsdeep"));
 var import_lodash4 = __toESM(require("lodash.merge"));
 var import_display_name = require("@dxos/display-name");
 var import_log5 = require("@dxos/log");
-var import_util4 = require("@dxos/util");
-var import_state15 = require("@codemirror/state");
-var import_view15 = require("@codemirror/view");
+var import_util3 = require("@dxos/util");
+var import_state16 = require("@codemirror/state");
+var import_view16 = require("@codemirror/view");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_lodash5 = __toESM(require("lodash.get"));
 var import_react_ui_theme4 = require("@dxos/react-ui-theme");
+var import_util4 = require("@dxos/util");
 var import_language3 = require("@codemirror/language");
-var import_view16 = require("@codemirror/view");
+var import_view17 = require("@codemirror/view");
 var import_react5 = __toESM(require("react"));
 var import_react_ui3 = require("@dxos/react-ui");
-var import_view17 = require("@codemirror/view");
+var import_lang_json = require("@codemirror/lang-json");
+var import_lint = require("@codemirror/lint");
+var import_ajv = __toESM(require("ajv"));
+var import_view18 = require("@codemirror/view");
 var import_autocomplete3 = require("@codemirror/autocomplete");
 var import_language4 = require("@codemirror/language");
-var import_state16 = require("@codemirror/state");
-var import_view18 = require("@codemirror/view");
+var import_state17 = require("@codemirror/state");
+var import_view19 = require("@codemirror/view");
 var import_react6 = require("react");
 var import_autocomplete4 = require("@codemirror/autocomplete");
 var import_commands3 = require("@codemirror/commands");
 var import_lang_markdown2 = require("@codemirror/lang-markdown");
 var import_language5 = require("@codemirror/language");
 var import_language_data = require("@codemirror/language-data");
-var import_lint = require("@codemirror/lint");
-var import_view19 = require("@codemirror/view");
+var import_lint2 = require("@codemirror/lint");
+var import_view20 = require("@codemirror/view");
+var import_util5 = require("@dxos/util");
 var import_lang_markdown3 = require("@codemirror/lang-markdown");
 var import_language6 = require("@codemirror/language");
 var import_highlight2 = require("@lezer/highlight");
 var import_markdown = require("@lezer/markdown");
 var import_language7 = require("@codemirror/language");
-var import_state17 = require("@codemirror/state");
-var import_language8 = require("@codemirror/language");
 var import_state18 = require("@codemirror/state");
-var import_view20 = require("@codemirror/view");
+var import_language8 = require("@codemirror/language");
+var import_state19 = require("@codemirror/state");
+var import_view21 = require("@codemirror/view");
 var import_invariant4 = require("@dxos/invariant");
 var import_react_ui_theme5 = require("@dxos/react-ui-theme");
 var import_language9 = require("@codemirror/language");
-var import_state19 = require("@codemirror/state");
-var import_view21 = require("@codemirror/view");
-var import_language10 = require("@codemirror/language");
 var import_state20 = require("@codemirror/state");
 var import_view22 = require("@codemirror/view");
-var import_view23 = require("@codemirror/view");
-var import_language11 = require("@codemirror/language");
+var import_language10 = require("@codemirror/language");
 var import_state21 = require("@codemirror/state");
+var import_view23 = require("@codemirror/view");
 var import_view24 = require("@codemirror/view");
-var import_language12 = require("@codemirror/language");
-var import_view25 = require("@codemirror/view");
-var import_react_ui_theme6 = require("@dxos/react-ui-theme");
-var import_language13 = require("@codemirror/language");
+var import_language11 = require("@codemirror/language");
 var import_state22 = require("@codemirror/state");
+var import_view25 = require("@codemirror/view");
+var import_language12 = require("@codemirror/language");
 var import_view26 = require("@codemirror/view");
-var import_log6 = require("@dxos/log");
-var import_react_ui_theme7 = require("@dxos/react-ui-theme");
+var import_react_ui_theme6 = require("@dxos/react-ui-theme");
 var import_autocomplete5 = require("@codemirror/autocomplete");
-var import_log7 = require("@dxos/log");
+var import_log6 = require("@dxos/log");
 var import_view27 = require("@codemirror/view");
 var import_codemirror_vim = require("@replit/codemirror-vim");
 var import_codemirror_vscode_keymap = require("@replit/codemirror-vscode-keymap");
 var import_effect = require("effect");
-var import_dx_ref_tag = require("@dxos/lit-ui/dx-ref-tag.pcss");
-var import_language14 = require("@codemirror/language");
+var import_commands4 = require("@codemirror/commands");
+var import_language13 = require("@codemirror/language");
 var import_state23 = require("@codemirror/state");
 var import_view28 = require("@codemirror/view");
+var import_state24 = require("@codemirror/state");
+var import_language14 = require("@codemirror/language");
+var import_state25 = require("@codemirror/state");
+var import_state26 = require("@codemirror/state");
+var import_invariant5 = require("@dxos/invariant");
+var import_state27 = require("@codemirror/state");
 var import_view29 = require("@codemirror/view");
-var import_search2 = require("@codemirror/search");
+var import_react_ui_theme7 = require("@dxos/react-ui-theme");
+var import_state28 = require("@codemirror/state");
 var import_view30 = require("@codemirror/view");
-var import_react_ui_theme8 = require("@dxos/react-ui-theme");
-var import_state24 = require("@codemirror/state");
+var import_log7 = require("@dxos/log");
+var import_dx_ref_tag = require("@dxos/lit-ui/dx-ref-tag.pcss");
+var import_language15 = require("@codemirror/language");
+var import_state29 = require("@codemirror/state");
 var import_view31 = require("@codemirror/view");
+var import_view32 = require("@codemirror/view");
+var import_search2 = require("@codemirror/search");
+var import_view33 = require("@codemirror/view");
+var import_react_ui_theme8 = require("@dxos/react-ui-theme");
+var import_tracking2 = require("@preact-signals/safe-react/tracking");
+var import_react_context = require("@radix-ui/react-context");
+var import_react7 = __toESM(require("react"));
+var import_async5 = require("@dxos/async");
+var import_react_ui4 = require("@dxos/react-ui");
+var import_tracking3 = require("@preact-signals/safe-react/tracking");
+var import_react_context2 = require("@radix-ui/react-context");
+var import_react8 = __toESM(require("react"));
+var import_async6 = require("@dxos/async");
+var import_react_ui5 = require("@dxos/react-ui");
+var import_state30 = require("@codemirror/state");
+var import_view34 = require("@codemirror/view");
 var import_react_tabster = require("@fluentui/react-tabster");
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_log8 = require("@dxos/log");
-var import_util5 = require("@dxos/util");
+var import_util6 = require("@dxos/util");
 var translationKey = "react-ui-editor";
 var translations_default = [
   {
@@ -353,50 +402,80 @@ var createEditorActionGroup = (id, props, icon) => (0, import_react_ui_menu2.cre
   iconOnly: true,
   ...props
 });
-var singleValueFacet = (defaultValue) => import_state3.Facet.define({
-  // Called immediately.
-  combine: (providers) => {
-    return providers[0] ?? defaultValue;
-  }
+var annotationMark = import_view2.Decoration.mark({
+  class: "cm-annotation"
 });
-var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
-var defaultCursorConverter = {
-  toCursor: (position) => position.toString(),
-  fromCursor: (cursor) => parseInt(cursor)
+var annotations = ({ match } = {}) => {
+  return [
+    import_view2.ViewPlugin.fromClass(class {
+      constructor() {
+        this.decorations = import_view2.Decoration.none;
+      }
+      update(update2) {
+        const builder = new import_state2.RangeSetBuilder();
+        if (match) {
+          const { from, to } = update2.view.viewport;
+          const text = update2.state.doc.sliceString(from, to);
+          const matches = text.matchAll(match);
+          for (const m of matches) {
+            if (m.index !== void 0) {
+              const start = from + m.index;
+              const end = start + m[0].length;
+              builder.add(start, end, annotationMark);
+            }
+          }
+        }
+        this.decorations = builder.finish();
+      }
+    }, {
+      decorations: (v) => v.decorations
+    }),
+    import_view2.EditorView.theme({
+      ".cm-annotation": {
+        textDecoration: "underline",
+        textDecorationStyle: "wavy",
+        textDecorationColor: "var(--dx-errorText)"
+      }
+    })
+  ];
 };
-var Cursor = class _Cursor {
-  static {
-    this.converter = singleValueFacet(defaultCursorConverter);
-  }
-  static {
-    this.getCursorFromRange = (state, range) => {
-      const cursorConverter2 = state.facet(_Cursor.converter);
-      const from = cursorConverter2.toCursor(range.from);
-      const to = cursorConverter2.toCursor(range.to, -1);
-      return [
-        from,
-        to
-      ].join(":");
-    };
-  }
-  static {
-    this.getRangeFromCursor = (state, cursor) => {
-      const cursorConverter2 = state.facet(_Cursor.converter);
-      const parts = cursor.split(":");
-      const from = cursorConverter2.fromCursor(parts[0]);
-      const to = cursorConverter2.fromCursor(parts[1]);
-      return from !== void 0 && to !== void 0 ? {
-        from,
-        to
-      } : void 0;
-    };
+var autocomplete = ({ activateOnTyping, override, onSearch } = {}) => {
+  const extensions = [
+    // https://codemirror.net/docs/ref/#view.keymap
+    // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
+    // TODO(burdon): Set custom keymap.
+    import_view3.keymap.of(import_autocomplete.completionKeymap),
+    // https://codemirror.net/examples/autocompletion
+    // https://codemirror.net/docs/ref/#autocomplete.autocompletion
+    (0, import_autocomplete.autocompletion)({
+      override,
+      activateOnTyping
+    })
+  ];
+  if (onSearch) {
+    extensions.push(
+      // TODO(burdon): Optional decoration via addToOptions.
+      import_lang_markdown.markdownLanguage.data.of({
+        autocomplete: (context) => {
+          const match = context.matchBefore(/\w*/);
+          if (!match || match.from === match.to && !context.explicit) {
+            return null;
+          }
+          return {
+            from: match.from,
+            options: onSearch(match.text.toLowerCase())
+          };
+        }
+      })
+    );
   }
+  return extensions;
 };
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util/debug.ts";
-var wrapWithCatch = (fn) => {
-  return (...args) => {
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
+var cursorConverter = (accessor) => ({
+  toCursor: (pos, assoc) => {
     try {
-      return fn(...args);
+      return (0, import_echo.toCursor)(accessor, pos, assoc);
     } catch (err) {
       import_log.log.catch(err, void 0, {
         F: __dxlog_file,
@@ -404,266 +483,71 @@ var wrapWithCatch = (fn) => {
         S: void 0,
         C: (f, a) => f(...a)
       });
+      return "";
     }
-  };
+  },
+  fromCursor: (cursor) => {
+    try {
+      return (0, import_echo.fromCursor)(accessor, cursor);
+    } catch (err) {
+      import_log.log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 24,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      return 0;
+    }
+  }
+});
+var getPath = (state, field) => state.field(field).path;
+var getLastHeads = (state, field) => state.field(field).lastHeads;
+var updateHeadsEffect = import_state4.StateEffect.define({});
+var updateHeads = (newHeads) => updateHeadsEffect.of({
+  newHeads
+});
+var reconcileAnnotation = import_state4.Annotation.define();
+var isReconcile = (tr) => {
+  return !!tr.annotation(reconcileAnnotation);
 };
-var callbackWrapper = (fn) => (...args) => {
-  try {
-    return fn(...args);
-  } catch (err) {
-    import_log.log.catch(err, void 0, {
-      F: __dxlog_file,
-      L: 29,
-      S: void 0,
-      C: (f, a) => f(...a)
+var updateAutomerge = (field, handle, transactions, state) => {
+  const { lastHeads, path } = state.field(field);
+  let hasChanges = false;
+  for (const tr of transactions) {
+    tr.changes.iterChanges(() => {
+      hasChanges = true;
     });
   }
+  if (!hasChanges) {
+    return void 0;
+  }
+  const newHeads = handle.changeAt(lastHeads, (doc) => {
+    const invertedTransactions = [];
+    for (const tr of transactions) {
+      tr.changes.iterChanges((fromA, toA, _fromB, _toB, insert) => {
+        invertedTransactions.push({
+          from: fromA,
+          del: toA - fromA,
+          insert
+        });
+      });
+    }
+    invertedTransactions.reverse().forEach(({ from, del, insert }) => {
+      import_automerge3.next.splice(doc, path.slice(), from, del, insert.toString());
+    });
+  });
+  return newHeads ?? void 0;
 };
-var debugDispatcher = (trs, view) => {
-  logChanges(trs);
-  view.update(trs);
-};
-var logChanges = (trs) => {
-  const changes = trs.flatMap((tr) => {
-    if (tr.changes.empty) {
-      return void 0;
-    }
-    const changes2 = [];
-    tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => changes2.push(JSON.stringify({
-      fromA,
-      toA,
-      fromB,
-      toB,
-      inserted: inserted.toString()
-    })));
-    return changes2;
-  }).filter(Boolean);
-  if (changes.length) {
-    (0, import_log.log)("changes", {
-      changes
-    }, {
-      F: __dxlog_file,
-      L: 62,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
-};
-var flattenRect = (rect, left) => {
-  const x = left ? rect.left : rect.right;
-  return {
-    left: x,
-    right: x,
-    top: rect.top,
-    bottom: rect.bottom
-  };
-};
-var scratchRange;
-var textRange = (node, from, to = from) => {
-  const range = scratchRange || (scratchRange = document.createRange());
-  range.setEnd(node, to);
-  range.setStart(node, from);
-  return range;
-};
-var clientRectsFor = (dom) => {
-  if (dom.nodeType === 3) {
-    return textRange(dom, 0, dom.nodeValue.length).getClientRects();
-  } else if (dom.nodeType === 1) {
-    return dom.getClientRects();
-  } else {
-    return [];
-  }
-};
-var createElement = (tag, options, children) => {
-  const el = document.createElement(tag);
-  if (options?.className) {
-    el.className = options.className;
-  }
-  if (children) {
-    el.append(...Array.isArray(children) ? children : [
-      children
-    ]);
-  }
-  return el;
-};
-var renderRoot = (root, node) => {
-  (0, import_client.createRoot)(root).render(/* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ThemeProvider, {
-    tx: import_react_ui_theme2.defaultTx
-  }, node));
-  return root;
-};
-var createRenderer = (Component) => (el, props) => {
-  renderRoot(el, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ThemeProvider, {
-    tx: import_react_ui_theme2.defaultTx
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Tooltip.Provider, null, /* @__PURE__ */ import_react3.default.createElement(Component, props))));
-};
-var annotationMark = import_view2.Decoration.mark({
-  class: "cm-annotation"
-});
-var annotations = (options = {}) => {
-  const match = (state) => {
-    const annotations2 = [];
-    const text = state.doc.toString();
-    if (options.match) {
-      const matches = text.matchAll(options.match);
-      for (const match2 of matches) {
-        const from = match2.index;
-        const to = from + match2[0].length;
-        const cursor = Cursor.getCursorFromRange(state, {
-          from,
-          to
-        });
-        annotations2.push({
-          cursor
-        });
-      }
-    }
-    return annotations2;
-  };
-  const annotationsState = import_state2.StateField.define({
-    create: (state) => {
-      return match(state);
-    },
-    update: (value, tr) => {
-      if (!tr.changes.empty) {
-        return match(tr.state);
-      }
-      return value;
-    }
-  });
-  return [
-    annotationsState,
-    import_view2.EditorView.decorations.compute([
-      annotationsState
-    ], (state) => {
-      const annotations2 = state.field(annotationsState);
-      const decorations = annotations2.map((annotation) => {
-        const range = Cursor.getRangeFromCursor(state, annotation.cursor);
-        return range && annotationMark.range(range.from, range.to);
-      }).filter(import_util.isNotFalsy);
-      return import_view2.Decoration.set(decorations);
-    }),
-    styles
-  ];
-};
-var styles = import_view2.EditorView.theme({
-  ".cm-annotation": {
-    textDecoration: "underline",
-    textDecorationStyle: "wavy",
-    textDecorationColor: "var(--dx-error)"
-  }
-});
-var autocomplete = ({ debug, activateOnTyping, override, onSearch } = {}) => {
-  const extensions = [
-    // https://codemirror.net/docs/ref/#view.keymap
-    // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
-    // TODO(burdon): Set custom keymap.
-    import_view3.keymap.of(import_autocomplete.completionKeymap),
-    // https://codemirror.net/examples/autocompletion
-    // https://codemirror.net/docs/ref/#autocomplete.autocompletion
-    (0, import_autocomplete.autocompletion)({
-      activateOnTyping,
-      override,
-      closeOnBlur: !debug,
-      tooltipClass: () => "shadow rounded"
-    })
-  ];
-  if (onSearch) {
-    extensions.push(
-      // TODO(burdon): Optional decoration via addToOptions
-      import_lang_markdown.markdownLanguage.data.of({
-        autocomplete: (context) => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || match.from === match.to && !context.explicit) {
-            return null;
-          }
-          return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase())
-          };
-        }
-      })
-    );
-  }
-  return extensions;
-};
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
-var cursorConverter = (accessor) => ({
-  toCursor: (pos, assoc) => {
-    try {
-      return (0, import_echo.toCursor)(accessor, pos, assoc);
-    } catch (err) {
-      import_log2.log.catch(err, void 0, {
-        F: __dxlog_file2,
-        L: 15,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      return "";
-    }
-  },
-  fromCursor: (cursor) => {
-    try {
-      return (0, import_echo.fromCursor)(accessor, cursor);
-    } catch (err) {
-      import_log2.log.catch(err, void 0, {
-        F: __dxlog_file2,
-        L: 24,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      return 0;
-    }
-  }
-});
-var getPath = (state, field) => state.field(field).path;
-var getLastHeads = (state, field) => state.field(field).lastHeads;
-var updateHeadsEffect = import_state5.StateEffect.define({});
-var updateHeads = (newHeads) => updateHeadsEffect.of({
-  newHeads
-});
-var reconcileAnnotation = import_state5.Annotation.define();
-var isReconcile = (tr) => {
-  return !!tr.annotation(reconcileAnnotation);
-};
-var updateAutomerge = (field, handle, transactions, state) => {
-  const { lastHeads, path } = state.field(field);
-  let hasChanges = false;
-  for (const tr of transactions) {
-    tr.changes.iterChanges(() => {
-      hasChanges = true;
-    });
-  }
-  if (!hasChanges) {
-    return void 0;
-  }
-  const newHeads = handle.changeAt(lastHeads, (doc) => {
-    const invertedTransactions = [];
-    for (const tr of transactions) {
-      tr.changes.iterChanges((fromA, toA, _fromB, _toB, insert) => {
-        invertedTransactions.push({
-          from: fromA,
-          del: toA - fromA,
-          insert
-        });
-      });
-    }
-    invertedTransactions.reverse().forEach(({ from, del, insert }) => {
-      import_automerge3.next.splice(doc, path.slice(), from, del, insert.toString());
-    });
-  });
-  return newHeads ?? void 0;
-};
-var updateCodeMirror = (view, selection, target, patches) => {
-  for (const patch of patches) {
-    const changeSpec = handlePatch(patch, target, view.state);
-    if (changeSpec != null) {
-      const changeSet = import_state6.ChangeSet.of(changeSpec, view.state.doc.length, "\n");
-      selection = selection.map(changeSet, 1);
-      view.dispatch({
-        changes: changeSet,
-        annotations: reconcileAnnotation.of(false)
-      });
+var updateCodeMirror = (view, selection, target, patches) => {
+  for (const patch of patches) {
+    const changeSpec = handlePatch(patch, target, view.state);
+    if (changeSpec != null) {
+      const changeSet = import_state5.ChangeSet.of(changeSpec, view.state.doc.length, "\n");
+      selection = selection.map(changeSet, 1);
+      view.dispatch({
+        changes: changeSet,
+        annotations: reconcileAnnotation.of(false)
+      });
     }
   }
   view.dispatch({
@@ -765,12 +649,12 @@ var Syncer = class {
     this._state = _state;
     this._pending = false;
   }
-  reconcile(view, editor) {
+  reconcile(view, editor2) {
     if (this._pending) {
       return;
     }
     this._pending = true;
-    if (editor) {
+    if (editor2) {
       this.onEditorChange(view);
     } else {
       this.onAutomergeChange(view);
@@ -800,74 +684,218 @@ var Syncer = class {
     });
   }
 };
-var automerge = (accessor) => {
-  const syncState = import_state4.StateField.define({
-    create: () => ({
-      path: accessor.path.slice(),
-      lastHeads: import_automerge.next.getHeads(accessor.handle.doc()),
-      unreconciledTransactions: []
-    }),
-    update: (value, tr) => {
-      const result = {
-        path: accessor.path.slice(),
-        lastHeads: value.lastHeads,
-        unreconciledTransactions: value.unreconciledTransactions.slice()
-      };
-      let clearUnreconciled = false;
-      for (const effect of tr.effects) {
-        if (effect.is(updateHeadsEffect)) {
-          result.lastHeads = effect.value.newHeads;
-          clearUnreconciled = true;
-        }
-      }
-      if (clearUnreconciled) {
-        result.unreconciledTransactions = [];
-      } else {
-        if (!isReconcile(tr)) {
-          result.unreconciledTransactions.push(tr);
-        }
-      }
-      return result;
-    }
-  });
-  const syncer = new Syncer(accessor.handle, syncState);
-  return [
-    Cursor.converter.of(cursorConverter(accessor)),
-    // Track heads.
-    syncState,
-    // Reconcile external updates.
-    import_view4.ViewPlugin.fromClass(class {
-      constructor(_view) {
-        this._view = _view;
-        this._handleChange = () => {
-          syncer.reconcile(this._view, false);
-        };
-        accessor.handle.addListener("change", this._handleChange);
-      }
-      destroy() {
-        accessor.handle.removeListener("change", this._handleChange);
-      }
-    }),
-    // Reconcile local updates.
-    import_view4.EditorView.updateListener.of(({ view, changes }) => {
-      if (!changes.empty) {
-        syncer.reconcile(view, true);
-      }
-    })
-  ];
-};
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
-var dummyProvider = {
-  remoteStateChange: new import_async.Event(),
-  open: () => {
-  },
-  close: () => {
-  },
-  getRemoteStates: () => [],
-  update: () => {
+var singleValueFacet = (defaultValue) => import_state6.Facet.define({
+  // Called immediately.
+  combine: (providers) => {
+    return providers[0] ?? defaultValue;
   }
-};
-var awarenessProvider = singleValueFacet(dummyProvider);
+});
+var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
+var defaultCursorConverter = {
+  toCursor: (position) => position.toString(),
+  fromCursor: (cursor) => parseInt(cursor)
+};
+var Cursor = class _Cursor {
+  static {
+    this.converter = singleValueFacet(defaultCursorConverter);
+  }
+  static {
+    this.getCursorFromRange = (state, range) => {
+      const cursorConverter2 = state.facet(_Cursor.converter);
+      const from = cursorConverter2.toCursor(range.from);
+      const to = cursorConverter2.toCursor(range.to, -1);
+      return [
+        from,
+        to
+      ].join(":");
+    };
+  }
+  static {
+    this.getRangeFromCursor = (state, cursor) => {
+      const cursorConverter2 = state.facet(_Cursor.converter);
+      const parts = cursor.split(":");
+      const from = cursorConverter2.fromCursor(parts[0]);
+      const to = cursorConverter2.fromCursor(parts[1]);
+      return from !== void 0 && to !== void 0 ? {
+        from,
+        to
+      } : void 0;
+    };
+  }
+};
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util/debug.ts";
+var wrapWithCatch = (fn) => {
+  return (...args) => {
+    try {
+      return fn(...args);
+    } catch (err) {
+      import_log2.log.catch(err, void 0, {
+        F: __dxlog_file2,
+        L: 15,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  };
+};
+var callbackWrapper = (fn) => (...args) => {
+  try {
+    return fn(...args);
+  } catch (err) {
+    import_log2.log.catch(err, void 0, {
+      F: __dxlog_file2,
+      L: 29,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+};
+var debugDispatcher = (trs, view) => {
+  logChanges(trs);
+  view.update(trs);
+};
+var logChanges = (trs) => {
+  const changes = trs.flatMap((tr) => {
+    if (tr.changes.empty) {
+      return void 0;
+    }
+    const changes2 = [];
+    tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => changes2.push(JSON.stringify({
+      fromA,
+      toA,
+      fromB,
+      toB,
+      inserted: inserted.toString()
+    })));
+    return changes2;
+  }).filter(Boolean);
+  if (changes.length) {
+    (0, import_log2.log)("changes", {
+      changes
+    }, {
+      F: __dxlog_file2,
+      L: 62,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+};
+var flattenRect = (rect, left) => {
+  const x = left ? rect.left : rect.right;
+  return {
+    left: x,
+    right: x,
+    top: rect.top,
+    bottom: rect.bottom
+  };
+};
+var scratchRange;
+var textRange = (node, from, to = from) => {
+  const range = scratchRange || (scratchRange = document.createRange());
+  range.setEnd(node, to);
+  range.setStart(node, from);
+  return range;
+};
+var clientRectsFor = (dom) => {
+  if (dom.nodeType === 3) {
+    return textRange(dom, 0, dom.nodeValue.length).getClientRects();
+  } else if (dom.nodeType === 1) {
+    return dom.getClientRects();
+  } else {
+    return [];
+  }
+};
+var createElement = (tag, options, children) => {
+  const el = document.createElement(tag);
+  if (options?.className) {
+    el.className = options.className;
+  }
+  if (children) {
+    el.append(...Array.isArray(children) ? children : [
+      children
+    ]);
+  }
+  return el;
+};
+var renderRoot = (root, node) => {
+  (0, import_client.createRoot)(root).render(/* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ThemeProvider, {
+    tx: import_react_ui_theme2.defaultTx
+  }, node));
+  return root;
+};
+var createRenderer = (Component) => (el, props) => {
+  renderRoot(el, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ThemeProvider, {
+    tx: import_react_ui_theme2.defaultTx
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Tooltip.Provider, null, /* @__PURE__ */ import_react3.default.createElement(Component, props))));
+};
+var automerge = (accessor) => {
+  const syncState = import_state3.StateField.define({
+    create: () => ({
+      path: accessor.path.slice(),
+      lastHeads: import_automerge.next.getHeads(accessor.handle.doc()),
+      unreconciledTransactions: []
+    }),
+    update: (value, tr) => {
+      const result = {
+        path: accessor.path.slice(),
+        lastHeads: value.lastHeads,
+        unreconciledTransactions: value.unreconciledTransactions.slice()
+      };
+      let clearUnreconciled = false;
+      for (const effect of tr.effects) {
+        if (effect.is(updateHeadsEffect)) {
+          result.lastHeads = effect.value.newHeads;
+          clearUnreconciled = true;
+        }
+      }
+      if (clearUnreconciled) {
+        result.unreconciledTransactions = [];
+      } else {
+        if (!isReconcile(tr)) {
+          result.unreconciledTransactions.push(tr);
+        }
+      }
+      return result;
+    }
+  });
+  const syncer = new Syncer(accessor.handle, syncState);
+  return [
+    Cursor.converter.of(cursorConverter(accessor)),
+    // Track heads.
+    syncState,
+    // Reconcile external updates.
+    import_view4.ViewPlugin.fromClass(class {
+      constructor(_view) {
+        this._view = _view;
+        this._handleChange = () => {
+          syncer.reconcile(this._view, false);
+        };
+        accessor.handle.addListener("change", this._handleChange);
+      }
+      destroy() {
+        accessor.handle.removeListener("change", this._handleChange);
+      }
+    }),
+    // Reconcile local updates.
+    import_view4.EditorView.updateListener.of(({ view, changes }) => {
+      if (!changes.empty) {
+        syncer.reconcile(view, true);
+      }
+    })
+  ];
+};
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
+var dummyProvider = {
+  remoteStateChange: new import_async.Event(),
+  open: () => {
+  },
+  close: () => {
+  },
+  getRemoteStates: () => [],
+  update: () => {
+  }
+};
+var awarenessProvider = singleValueFacet(dummyProvider);
 var RemoteSelectionChangedAnnotation = import_state7.Annotation.define();
 var awareness = (provider = dummyProvider) => {
   return [
@@ -875,7 +903,7 @@ var awareness = (provider = dummyProvider) => {
     import_view5.ViewPlugin.fromClass(RemoteSelectionsDecorator, {
       decorations: (value) => value.decorations
     }),
-    styles2
+    styles
   ];
 };
 var RemoteSelectionsDecorator = class {
@@ -918,7 +946,7 @@ var RemoteSelectionsDecorator = class {
     } : void 0);
   }
   _updateRemoteSelections(view) {
-    const decorations = [];
+    const decorations2 = [];
     const awarenessStates = this._provider.getRemoteStates();
     for (const state of awarenessStates) {
       const anchor = state.position?.anchor ? this._cursorConverter.fromCursor(state.position.anchor) : null;
@@ -933,7 +961,7 @@ var RemoteSelectionsDecorator = class {
       const darkColor = state.info.darkColor;
       const lightColor = state.info.lightColor;
       if (startLine.number === endLine.number) {
-        decorations.push({
+        decorations2.push({
           from: start,
           to: end,
           value: import_view5.Decoration.mark({
@@ -944,7 +972,7 @@ var RemoteSelectionsDecorator = class {
           })
         });
       } else {
-        decorations.push({
+        decorations2.push({
           from: start,
           to: startLine.from + startLine.length,
           value: import_view5.Decoration.mark({
@@ -954,7 +982,7 @@ var RemoteSelectionsDecorator = class {
             class: "cm-collab-selection"
           })
         });
-        decorations.push({
+        decorations2.push({
           from: endLine.from,
           to: end,
           value: import_view5.Decoration.mark({
@@ -966,7 +994,7 @@ var RemoteSelectionsDecorator = class {
         });
         for (let i = startLine.number + 1; i < endLine.number; i++) {
           const linePos = view.state.doc.line(i).from;
-          decorations.push({
+          decorations2.push({
             from: linePos,
             to: linePos,
             value: import_view5.Decoration.line({
@@ -978,7 +1006,7 @@ var RemoteSelectionsDecorator = class {
           });
         }
       }
-      decorations.push({
+      decorations2.push({
         from: head,
         to: head,
         value: import_view5.Decoration.widget({
@@ -988,14 +1016,12 @@ var RemoteSelectionsDecorator = class {
         })
       });
     }
-    this.decorations = import_view5.Decoration.set(decorations, true);
+    this.decorations = import_view5.Decoration.set(decorations2, true);
   }
 };
 var RemoteCaretWidget = class extends import_view5.WidgetType {
   constructor(_name, _color) {
-    super();
-    this._name = _name;
-    this._color = _color;
+    super(), this._name = _name, this._color = _color;
   }
   toDOM() {
     const span = document.createElement("span");
@@ -1027,7 +1053,7 @@ var RemoteCaretWidget = class extends import_view5.WidgetType {
     return true;
   }
 };
-var styles2 = import_view5.EditorView.theme({
+var styles = import_view5.EditorView.theme({
   ".cm-collab-selection": {},
   ".cm-collab-selectionLine": {
     padding: 0,
@@ -1595,7 +1621,7 @@ var commandKeyBindings = [
 ];
 var hintViewPlugin = ({ onHint }) => import_view9.ViewPlugin.fromClass(class {
   constructor() {
-    this.deco = import_view9.Decoration.none;
+    this.decorations = import_view9.Decoration.none;
   }
   update(update2) {
     const builder = new import_state10.RangeSetBuilder();
@@ -1607,22 +1633,21 @@ var hintViewPlugin = ({ onHint }) => import_view9.ViewPlugin.fromClass(class {
         const hint = onHint();
         if (hint) {
           builder.add(selection.from, selection.to, import_view9.Decoration.widget({
-            widget: new CommandHint(hint)
+            widget: new Hint(hint)
           }));
         }
       }
     }
-    this.deco = builder.finish();
+    this.decorations = builder.finish();
   }
 }, {
   provide: (plugin) => [
-    import_view9.EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? import_view9.Decoration.none)
+    import_view9.EditorView.decorations.of((view) => view.plugin(plugin)?.decorations ?? import_view9.Decoration.none)
   ]
 });
-var CommandHint = class extends import_view9.WidgetType {
+var Hint = class extends import_view9.WidgetType {
   constructor(content) {
-    super();
-    this.content = content;
+    super(), this.content = content;
   }
   toDOM() {
     const wrap = document.createElement("span");
@@ -1658,75 +1683,11 @@ var CommandHint = class extends import_view9.WidgetType {
     return false;
   }
 };
-var floatingMenu = (options) => import_view10.ViewPlugin.fromClass(class {
-  constructor(view) {
-    this.rafId = null;
-    this.view = view;
-    const container = view.scrollDOM;
-    if (getComputedStyle(container).position === "static") {
-      container.style.position = "relative";
-    }
-    this.button = document.createElement("div");
-    this.button.style.position = "absolute";
-    this.button.style.zIndex = "10";
-    this.button.style.display = "none";
-    options.renderMenu(this.button, {
-      onAction: () => openCommand(view)
-    }, view);
-    container.appendChild(this.button);
-    container.addEventListener("scroll", this.scheduleUpdate.bind(this));
-    this.scheduleUpdate();
-  }
-  update(update2) {
-    if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
-      this.button.style.display = "none";
-    } else if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
-      this.button.style.display = "block";
-    } else if (update2.selectionSet || update2.viewportChanged || update2.docChanged || update2.geometryChanged) {
-      this.scheduleUpdate();
-    }
-  }
-  scheduleUpdate() {
-    if (this.rafId != null) {
-      cancelAnimationFrame(this.rafId);
-    }
-    this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
-  }
-  updateButtonPosition() {
-    const pos = this.view.state.selection.main.head;
-    const lineBlock = this.view.lineBlockAt(pos);
-    const domInfo = this.view.domAtPos(lineBlock.from);
-    let node = domInfo.node;
-    while (node && !(node instanceof HTMLElement)) {
-      node = node.parentNode;
-    }
-    if (!node) {
-      this.button.style.display = "none";
-      return;
-    }
-    const lineRect = node.getBoundingClientRect();
-    const containerRect = this.view.scrollDOM.getBoundingClientRect();
-    const offsetTop = lineRect.top - containerRect.top + this.view.scrollDOM.scrollTop;
-    const offsetLeft = this.view.scrollDOM.clientWidth + this.view.scrollDOM.scrollLeft - lineRect.x;
-    this.button.style.top = `${offsetTop}px`;
-    this.button.style.left = `${offsetLeft}px`;
-    this.button.style.display = "block";
-  }
-  destroy() {
-    this.button.remove();
-    if (this.rafId != null) {
-      cancelAnimationFrame(this.rafId);
-    }
-  }
-});
 var command = (options = {}) => {
   return [
     import_view8.keymap.of(commandKeyBindings),
     commandConfig.of(options),
     commandState,
-    options.renderMenu ? floatingMenu({
-      renderMenu: options.renderMenu
-    }) : [],
     options.onHint ? hintViewPlugin({
       onHint: options.onHint
     }) : [],
@@ -1740,44 +1701,206 @@ var command = (options = {}) => {
     })
   ];
 };
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/selection.ts";
-var documentId = singleValueFacet();
-var stateRestoreAnnotation = "dxos.org/cm/state-restore";
-var createEditorStateTransaction = ({ scrollTo, selection }) => {
-  return {
-    selection,
-    scrollIntoView: !scrollTo,
-    effects: scrollTo ? import_view12.EditorView.scrollIntoView(scrollTo, {
-      yMargin: 96
-    }) : void 0,
-    annotations: import_state12.Transaction.userEvent.of(stateRestoreAnnotation)
-  };
-};
-var createEditorStateStore = (keyPrefix) => ({
-  getState: (id) => {
-    (0, import_invariant3.invariant)(id, void 0, {
-      F: __dxlog_file6,
-      L: 47,
-      S: void 0,
-      A: [
-        "id",
-        ""
-      ]
-    });
-    const state = localStorage.getItem(`${keyPrefix}/${id}`);
-    return state ? JSON.parse(state) : void 0;
-  },
-  setState: (id, state) => {
-    (0, import_invariant3.invariant)(id, void 0, {
-      F: __dxlog_file6,
-      L: 53,
-      S: void 0,
-      A: [
-        "id",
-        ""
-      ]
-    });
-    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
+var floatingMenu = (options = {}) => [
+  import_view10.ViewPlugin.fromClass(class {
+    constructor(view) {
+      this.rafId = null;
+      this.view = view;
+      const container = view.scrollDOM;
+      if (getComputedStyle(container).position === "static") {
+        container.style.position = "relative";
+      }
+      const icon = document.createElement("dx-icon");
+      icon.setAttribute("icon", options.icon ?? "ph--dots-three-outline--regular");
+      const button = document.createElement("button");
+      button.appendChild(icon);
+      this.tag = document.createElement("dx-ref-tag");
+      this.tag.classList.add("cm-ref-tag");
+      this.tag.appendChild(button);
+      container.appendChild(this.tag);
+      container.addEventListener("scroll", this.scheduleUpdate.bind(this));
+      this.scheduleUpdate();
+    }
+    update(update2) {
+      this.tag.dataset.focused = update2.view.hasFocus ? "true" : "false";
+      if (!update2.view.hasFocus) {
+        return;
+      }
+      if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
+        this.tag.style.display = "none";
+        this.tag.classList.add("opacity-10");
+      } else if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
+        this.tag.style.display = "block";
+      } else if (update2.docChanged || update2.focusChanged || update2.geometryChanged || update2.selectionSet || update2.viewportChanged) {
+        this.scheduleUpdate();
+      }
+    }
+    updateButtonPosition() {
+      const { x, width } = this.view.contentDOM.getBoundingClientRect();
+      const pos = this.view.state.selection.main.head;
+      const line = this.view.lineBlockAt(pos);
+      const coords = this.view.coordsAtPos(line.from);
+      if (!coords) {
+        return;
+      }
+      const lineHeight = coords.bottom - coords.top;
+      const dy = (lineHeight - (options.height ?? 32)) / 2;
+      const offsetTop = coords.top + dy;
+      const offsetLeft = x + width + (options.padding ?? 8);
+      this.tag.style.top = `${offsetTop}px`;
+      this.tag.style.left = `${offsetLeft}px`;
+      this.tag.style.display = "block";
+    }
+    scheduleUpdate() {
+      if (this.rafId != null) {
+        cancelAnimationFrame(this.rafId);
+      }
+      this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
+    }
+    destroy() {
+      this.tag.remove();
+      if (this.rafId != null) {
+        cancelAnimationFrame(this.rafId);
+      }
+    }
+  }),
+  import_view10.EditorView.theme({
+    ".cm-ref-tag": {
+      position: "fixed",
+      padding: "0",
+      border: "none",
+      transition: "opacity 0.3s ease-in-out",
+      opacity: 0.1
+    },
+    ".cm-ref-tag button": {
+      display: "grid",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "2rem",
+      height: "2rem"
+    },
+    '.cm-ref-tag[data-focused="true"]': {
+      opacity: 1
+    }
+  })
+];
+var typeahead = ({ onComplete } = {}) => {
+  let hint;
+  const complete = (view) => {
+    if (!hint) {
+      return false;
+    }
+    const selection = view.state.selection.main;
+    view.dispatch({
+      changes: [
+        {
+          from: selection.from,
+          to: selection.to,
+          insert: hint
+        }
+      ],
+      selection: import_state11.EditorSelection.cursor(selection.from + hint.length)
+    });
+    return true;
+  };
+  return [
+    import_view11.ViewPlugin.fromClass(class {
+      constructor() {
+        this.decorations = import_view11.Decoration.none;
+      }
+      update(update2) {
+        const builder = new import_state11.RangeSetBuilder();
+        const selection = update2.view.state.selection.main;
+        const line = update2.view.state.doc.lineAt(selection.from);
+        if (selection.from === selection.to && selection.from === line.to) {
+          const str = update2.state.sliceDoc(line.from, selection.from);
+          hint = onComplete?.({
+            line: str
+          });
+          if (hint) {
+            builder.add(selection.from, selection.to, import_view11.Decoration.widget({
+              widget: new Hint(hint)
+            }));
+          }
+        }
+        this.decorations = builder.finish();
+      }
+    }, {
+      decorations: (v) => v.decorations
+    }),
+    // Keys.
+    import_state11.Prec.highest(import_view11.keymap.of([
+      {
+        key: "Tab",
+        preventDefault: true,
+        run: complete
+      },
+      {
+        key: "ArrowRight",
+        preventDefault: true,
+        run: complete
+      }
+    ]))
+  ];
+};
+var staticCompletion = (completions, defaultCompletion) => ({ line }) => {
+  if (line.length === 0 && defaultCompletion) {
+    return defaultCompletion;
+  }
+  const words = line.split(/\s+/).filter(Boolean);
+  if (words.length) {
+    const word = words.at(-1);
+    for (const completion of completions) {
+      const match = matchCompletion(completion, word);
+      if (match) {
+        return match;
+      }
+    }
+  }
+};
+var matchCompletion = (completion, word) => {
+  if (completion.length > word.length && completion.startsWith(word)) {
+    return completion.slice(word.length);
+  }
+};
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/selection.ts";
+var documentId = singleValueFacet();
+var stateRestoreAnnotation = "dxos.org/cm/state-restore";
+var createEditorStateTransaction = ({ scrollTo, selection }) => {
+  return {
+    selection,
+    scrollIntoView: !scrollTo,
+    effects: scrollTo ? import_view13.EditorView.scrollIntoView(scrollTo, {
+      yMargin: 96
+    }) : void 0,
+    annotations: import_state13.Transaction.userEvent.of(stateRestoreAnnotation)
+  };
+};
+var createEditorStateStore = (keyPrefix) => ({
+  getState: (id) => {
+    (0, import_invariant3.invariant)(id, void 0, {
+      F: __dxlog_file6,
+      L: 47,
+      S: void 0,
+      A: [
+        "id",
+        ""
+      ]
+    });
+    const state = localStorage.getItem(`${keyPrefix}/${id}`);
+    return state ? JSON.parse(state) : void 0;
+  },
+  setState: (id, state) => {
+    (0, import_invariant3.invariant)(id, void 0, {
+      F: __dxlog_file6,
+      L: 53,
+      S: void 0,
+      A: [
+        "id",
+        ""
+      ]
+    });
+    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
   }
 });
 var selectionState = ({ getState, setState } = {}) => {
@@ -1789,7 +1912,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    import_view12.EditorView.updateListener.of(({ view, transactions }) => {
+    import_view13.EditorView.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -1812,7 +1935,7 @@ var selectionState = ({ getState, setState } = {}) => {
         }
       }
     }),
-    getState && import_view12.keymap.of([
+    getState && import_view13.keymap.of([
       {
         key: "ctrl-r",
         run: (view) => {
@@ -1824,13 +1947,13 @@ var selectionState = ({ getState, setState } = {}) => {
         }
       }
     ])
-  ].filter(import_util3.isNotFalsy);
+  ].filter(import_util2.isNotFalsy);
 };
 var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
-var setComments = import_state11.StateEffect.define();
-var setSelection = import_state11.StateEffect.define();
-var setCommentState = import_state11.StateEffect.define();
-var commentsState = import_state11.StateField.define({
+var setComments = import_state12.StateEffect.define();
+var setSelection = import_state12.StateEffect.define();
+var setCommentState = import_state12.StateEffect.define();
+var commentsState = import_state12.StateField.define({
   create: (state) => ({
     id: state.facet(documentId),
     comments: [],
@@ -1855,7 +1978,7 @@ var commentsState = import_state11.StateField.define({
             comment,
             range
           };
-        }).filter(import_util2.isNonNullable);
+        }).filter(import_util.isNonNullable);
         return {
           ...value,
           comments: commentStates
@@ -1868,7 +1991,7 @@ var commentsState = import_state11.StateField.define({
     return value;
   }
 });
-var styles3 = import_view11.EditorView.theme({
+var styles2 = import_view12.EditorView.theme({
   ".cm-comment, .cm-comment-current": {
     margin: "0 -3px",
     padding: "3px",
@@ -1881,23 +2004,23 @@ var styles3 = import_view11.EditorView.theme({
     textDecoration: "underline"
   }
 });
-var createCommentMark = (id, isCurrent) => import_view11.Decoration.mark({
+var createCommentMark = (id, isCurrent) => import_view12.Decoration.mark({
   class: isCurrent ? "cm-comment-current" : "cm-comment",
   attributes: {
     "data-testid": "cm-comment",
     "data-comment-id": id
   }
 });
-var commentsDecorations = import_view11.EditorView.decorations.compute([
+var commentsDecorations = import_view12.EditorView.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
-  const decorations = (0, import_lodash2.default)(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
+  const decorations2 = (0, import_lodash2.default)(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
     const range = comment.range;
     if (!range) {
       import_log4.log.warn("Invalid range:", range, {
         F: __dxlog_file7,
-        L: 144,
+        L: 135,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1907,11 +2030,11 @@ var commentsDecorations = import_view11.EditorView.decorations.compute([
     }
     const mark = createCommentMark(comment.comment.id, comment.comment.id === current);
     return mark.range(range.from, range.to);
-  }).filter(import_util2.isNonNullable);
-  return import_view11.Decoration.set(decorations);
+  }).filter(import_util.isNonNullable);
+  return import_view12.Decoration.set(decorations2);
 });
-var commentClickedEffect = import_state11.StateEffect.define();
-var handleCommentClick = import_view11.EditorView.domEventHandlers({
+var commentClickedEffect = import_state12.StateEffect.define();
+var handleCommentClick = import_view12.EditorView.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -1950,7 +2073,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    import_view11.EditorView.domEventHandlers({
+    import_view12.EditorView.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -1972,7 +2095,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    import_view11.EditorView.updateListener.of((update2) => {
+    import_view12.EditorView.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -2028,7 +2151,7 @@ var mapTrackedComment = (comment, changes) => ({
   from: changes.mapPos(comment.from, 1),
   to: changes.mapPos(comment.to, 1)
 });
-var restoreCommentEffect = import_state11.StateEffect.define({
+var restoreCommentEffect = import_state12.StateEffect.define({
   map: mapTrackedComment
 });
 var createComment = (view) => {
@@ -2069,11 +2192,11 @@ var comments = (options = {}) => {
     commentsState,
     commentsDecorations,
     handleCommentClick,
-    styles3,
+    styles2,
     //
     // Keymap.
     //
-    options.onCreate && import_view11.keymap.of([
+    options.onCreate && import_view12.keymap.of([
       {
         key: shortcut,
         run: callbackWrapper(createComment)
@@ -2083,7 +2206,7 @@ var comments = (options = {}) => {
     // Hover tooltip (for key shortcut hints, etc.)
     // TODO(burdon): Factor out to generic hints extension for current selection/line.
     //
-    options.renderTooltip && (0, import_view11.hoverTooltip)((view, pos) => {
+    options.renderTooltip && (0, import_view12.hoverTooltip)((view, pos) => {
       const selection = view.state.selection.main;
       if (selection && pos >= selection.from && pos <= selection.to) {
         return {
@@ -2114,7 +2237,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    import_view11.EditorView.updateListener.of(({ view, state, changes }) => {
+    import_view12.EditorView.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -2146,7 +2269,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    import_view11.EditorView.updateListener.of(({ view, state }) => {
+    import_view12.EditorView.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -2180,7 +2303,7 @@ var comments = (options = {}) => {
       }
     }),
     options.onUpdate && trackPastedComments(options.onUpdate)
-  ].filter(import_util2.isNonNullable);
+  ].filter(import_util.isNonNullable);
 };
 var scrollThreadIntoView = (view, id, center = true) => {
   const comment = view.state.field(commentsState).comments.find((range2) => range2.comment.id === id);
@@ -2200,7 +2323,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? import_view11.EditorView.scrollIntoView(range.from, center ? {
+          needsScroll ? import_view12.EditorView.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2211,22 +2334,6 @@ var scrollThreadIntoView = (view, id, center = true) => {
     }
   }
 };
-var selectionOverlapsComment = (state) => {
-  const commentState = state.field(commentsState, false);
-  if (commentState === void 0) {
-    return false;
-  }
-  const { selection } = state;
-  for (const range of selection.ranges) {
-    if (commentState.comments.some(({ range: commentRange }) => overlap(commentRange, range))) {
-      return true;
-    }
-  }
-  return false;
-};
-var hasActiveSelection = (state) => {
-  return state.selection.ranges.some((range) => !range.empty);
-};
 var ExternalCommentSync = class {
   constructor(view, id, subscribe, getComments) {
     this.destroy = () => {
@@ -2246,21 +2353,11 @@ var ExternalCommentSync = class {
     this.unsubscribe = subscribe(updateComments);
   }
 };
-var createExternalCommentSync = (id, subscribe, getComments) => import_view11.ViewPlugin.fromClass(class {
+var createExternalCommentSync = (id, subscribe, getComments) => import_view12.ViewPlugin.fromClass(class {
   constructor(view) {
     return new ExternalCommentSync(view, id, subscribe, getComments);
   }
 });
-var useCommentState = (state) => {
-  return (0, import_react4.useMemo)(() => import_view11.EditorView.updateListener.of((update2) => {
-    if (update2.docChanged || update2.selectionSet) {
-      state.comment = selectionOverlapsComment(update2.state);
-      state.selection = hasActiveSelection(update2.state);
-    }
-  }), [
-    state
-  ]);
-};
 var useComments = (view, id, comments2) => {
   (0, import_react4.useEffect)(() => {
     if (view) {
@@ -2275,29 +2372,16 @@ var useComments = (view, id, comments2) => {
     }
   });
 };
-var useCommentClickListener = (onCommentClick) => {
-  return (0, import_react4.useMemo)(() => import_view11.EditorView.updateListener.of((update2) => {
-    update2.transactions.forEach((transaction) => {
-      transaction.effects.forEach((effect) => {
-        if (effect.is(commentClickedEffect)) {
-          onCommentClick(effect.value);
-        }
-      });
-    });
-  }), [
-    onCommentClick
-  ]);
-};
 var debugNodeLogger = (log9 = console.log) => {
   const logTokens = (state) => (0, import_language.syntaxTree)(state).iterate({
     enter: (node) => log9(node.type)
   });
-  return import_state13.StateField.define({
+  return import_state14.StateField.define({
     create: (state) => logTokens(state),
     update: (_, tr) => logTokens(tr.state)
   });
 };
-var styles4 = import_view13.EditorView.theme({
+var styles3 = import_view14.EditorView.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--dx-accentText)",
     color: "var(--dx-accentText)",
@@ -2309,9 +2393,9 @@ var styles4 = import_view13.EditorView.theme({
 });
 var dropFile = (options = {}) => {
   return [
-    styles4,
-    (0, import_view13.dropCursor)(),
-    import_view13.EditorView.domEventHandlers({
+    styles3,
+    (0, import_view14.dropCursor)(),
+    import_view14.EditorView.domEventHandlers({
       drop: (event, view) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
@@ -2330,8 +2414,8 @@ var dropFile = (options = {}) => {
     })
   ];
 };
-var focusEffect = import_state15.StateEffect.define();
-var focusField = import_state15.StateField.define({
+var focusEffect = import_state16.StateEffect.define();
+var focusField = import_state16.StateField.define({
   create: () => false,
   update: (value, tr) => {
     for (const effect of tr.effects) {
@@ -2344,7 +2428,7 @@ var focusField = import_state15.StateField.define({
 });
 var focus = [
   focusField,
-  import_view15.EditorView.domEventHandlers({
+  import_view16.EditorView.domEventHandlers({
     focus: (event, view) => {
       setTimeout(() => view.dispatch({
         effects: focusEffect.of(true)
@@ -2374,7 +2458,7 @@ var theme = {
   }
 };
 var getToken = (path, defaultValue) => {
-  const value = (0, import_lodash5.default)(import_react_ui_theme4.tokens, path, defaultValue);
+  const value = (0, import_util4.get)(import_react_ui_theme4.tokens, path, defaultValue);
   return value?.toString() ?? "";
 };
 var fontBody = getToken("fontFamily.body");
@@ -2493,19 +2577,25 @@ var defaultTheme = {
   */
   ".cm-tooltip.cm-tooltip-autocomplete": {
     marginTop: "4px",
-    marginLeft: "-3px"
+    marginLeft: "-3px",
+    borderColor: "var(--dx-separator)",
+    borderTop: "none"
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul": {
     maxHeight: "20em"
   },
-  ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {},
-  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {},
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {
+    padding: "4px"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
+    background: "var(--dx-hoverSurface)"
+  },
   ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
     paddingLeft: "4px !important",
     borderBottom: "none !important",
     color: "var(--dx-accentText)"
   },
-  ".cm-tooltip.cm-completionInfo": {
+  ".cm-completionInfo": {
     width: "360px !important",
     margin: "-10px 1px 0 1px",
     padding: "8px !important",
@@ -2555,7 +2645,7 @@ var defaultTheme = {
     backgroundColor: "var(--dx-input)"
   },
   ".cm-panel input:focus, .cm-panel button:focus": {
-    outline: "1px solid var(--dx-accentFocusIndicator)"
+    outline: "1px solid var(--dx-neutralFocusIndicator)"
   },
   ".cm-panel label": {
     display: "inline-flex",
@@ -2568,7 +2658,7 @@ var defaultTheme = {
     height: "8px",
     marginRight: "6px !important",
     padding: "2px !important",
-    color: "var(--dx-accentFocusIndicator)"
+    color: "var(--dx-neutralFocusIndicator)"
   },
   ".cm-panel button": {
     "&:hover": {
@@ -2584,7 +2674,7 @@ var defaultTheme = {
   }
 };
 var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
-var preventNewline = import_state14.EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
+var preventNewline = import_state15.EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
 var defaultBasicOptions = {
   allowMultipleSelections: true,
   bracketMatching: true,
@@ -2606,33 +2696,33 @@ var createBasicExtensions = (_props) => {
   const props = (0, import_lodash3.default)({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    import_view14.EditorView.exceptionSink.of((err) => {
+    import_view15.EditorView.exceptionSink.of((err) => {
       import_log5.log.catch(err, void 0, {
         F: __dxlog_file8,
-        L: 96,
+        L: 98,
         S: void 0,
         C: (f, a) => f(...a)
       });
     }),
-    props.allowMultipleSelections && import_state14.EditorState.allowMultipleSelections.of(true),
+    props.allowMultipleSelections && import_state15.EditorState.allowMultipleSelections.of(true),
     props.bracketMatching && (0, import_language2.bracketMatching)(),
     props.closeBrackets && (0, import_autocomplete2.closeBrackets)(),
-    props.dropCursor && (0, import_view14.dropCursor)(),
-    props.drawSelection && (0, import_view14.drawSelection)({
+    props.dropCursor && (0, import_view15.dropCursor)(),
+    props.drawSelection && (0, import_view15.drawSelection)({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && import_view14.EditorView.editable.of(props.editable),
+    props.editable !== void 0 && import_view15.EditorView.editable.of(props.editable),
     props.focus && focus,
-    props.highlightActiveLine && (0, import_view14.highlightActiveLine)(),
+    props.highlightActiveLine && (0, import_view15.highlightActiveLine)(),
     props.history && (0, import_commands2.history)(),
-    props.lineNumbers && (0, import_view14.lineNumbers)(),
-    props.lineWrapping && import_view14.EditorView.lineWrapping,
-    props.placeholder && (0, import_view14.placeholder)(props.placeholder),
-    props.readOnly !== void 0 && import_state14.EditorState.readOnly.of(props.readOnly),
-    props.scrollPastEnd && (0, import_view14.scrollPastEnd)(),
-    props.tabSize && import_state14.EditorState.tabSize.of(props.tabSize),
+    props.lineNumbers && (0, import_view15.lineNumbers)(),
+    props.lineWrapping && import_view15.EditorView.lineWrapping,
+    props.placeholder && (0, import_view15.placeholder)(props.placeholder),
+    props.readOnly !== void 0 && import_state15.EditorState.readOnly.of(props.readOnly),
+    props.scrollPastEnd && (0, import_view15.scrollPastEnd)(),
+    props.tabSize && import_state15.EditorState.tabSize.of(props.tabSize),
     // https://codemirror.net/docs/ref/#view.KeyBinding
-    import_view14.keymap.of([
+    import_view15.keymap.of([
       ...(props.keymap && keymaps[props.keymap]) ?? [],
       // NOTE: Tabs are also configured by markdown extension.
       // https://codemirror.net/docs/ref/#commands.indentWithTab
@@ -2652,28 +2742,33 @@ var createBasicExtensions = (_props) => {
         preventDefault: true,
         run: () => true
       }
-    ].filter(import_util4.isNotFalsy))
-  ].filter(import_util4.isNotFalsy);
+    ].filter(import_util3.isNotFalsy))
+  ].filter(import_util3.isNotFalsy);
 };
 var defaultThemeSlots = {
   editor: {
     className: "w-full bs-full"
   }
 };
-var createThemeExtensions = ({ themeMode, styles: styles5, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
+var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
   const slots = (0, import_lodash3.default)({}, _slots, defaultThemeSlots);
   return [
-    import_view14.EditorView.darkTheme.of(themeMode === "dark"),
-    import_view14.EditorView.baseTheme(styles5 ? (0, import_lodash4.default)({}, defaultTheme, styles5) : defaultTheme),
+    import_view15.EditorView.darkTheme.of(themeMode === "dark"),
+    import_view15.EditorView.baseTheme(styles4 ? (0, import_lodash4.default)({}, defaultTheme, styles4) : defaultTheme),
     // https://github.com/codemirror/theme-one-dark
     _syntaxHighlighting && (themeMode === "dark" ? (0, import_language2.syntaxHighlighting)(import_theme_one_dark.oneDarkHighlightStyle) : (0, import_language2.syntaxHighlighting)(import_language2.defaultHighlightStyle)),
-    slots.editor?.className && import_view14.EditorView.editorAttributes.of({
+    slots.editor?.className && import_view15.EditorView.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && import_view14.EditorView.contentAttributes.of({
+    slots.content?.className && import_view15.EditorView.contentAttributes.of({
       class: slots.content.className
+    }),
+    slots.scroll?.className && import_view15.ViewPlugin.fromClass(class {
+      constructor(view) {
+        view.scrollDOM.classList.add(slots.scroll.className);
+      }
     })
-  ].filter(import_util4.isNotFalsy);
+  ].filter(import_util3.isNotFalsy);
 };
 var createDataExtensions = ({ id, text, space, identity }) => {
   const extensions = [];
@@ -2682,7 +2777,7 @@ var createDataExtensions = ({ id, text, space, identity }) => {
   }
   if (space && identity) {
     const peerId = identity?.identityKey.toHex();
-    const hue = identity?.profile?.data?.hue ?? (0, import_util4.hexToHue)(peerId ?? "0");
+    const hue = identity?.profile?.data?.hue ?? (0, import_util3.hexToHue)(peerId ?? "0");
     extensions.push(awareness(new SpaceAwarenessProvider({
       space,
       channel: `awareness.${id}`,
@@ -2717,7 +2812,7 @@ var folding = (_props = {}) => [
       }));
     }
   }),
-  import_view16.EditorView.theme({
+  import_view17.EditorView.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
       transition: "opacity 0.3s",
@@ -2728,31 +2823,70 @@ var folding = (_props = {}) => [
     }
   })
 ];
+var createJsonExtensions = ({ schema } = {}) => {
+  let lintSource = (0, import_lang_json.jsonParseLinter)();
+  if (schema) {
+    const ajv = new import_ajv.default({
+      allErrors: false
+    });
+    const validate = ajv.compile(schema);
+    lintSource = schemaLinter(validate);
+  }
+  return [
+    (0, import_lang_json.json)(),
+    (0, import_lint.linter)(lintSource)
+  ];
+};
+var schemaLinter = (validate) => (view) => {
+  try {
+    const jsonText = view.state.doc.toString();
+    const jsonData = JSON.parse(jsonText);
+    const valid = validate(jsonData);
+    if (valid) {
+      return [];
+    }
+    return validate.errors?.map((err) => ({
+      from: 0,
+      to: jsonText.length,
+      severity: "error",
+      message: `${err.instancePath || "(root)"} ${err.message}`
+    })) ?? [];
+  } catch (err) {
+    return [
+      {
+        from: 0,
+        to: view.state.doc.length,
+        severity: "error",
+        message: "Invalid JSON: " + err.message
+      }
+    ];
+  }
+};
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(import_view17.EditorView.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(import_view18.EditorView.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(import_view17.EditorView.updateListener.of((update2) => {
+  onChange && extensions.push(import_view18.EditorView.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
 };
 var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
-var Inline;
-(function(Inline2) {
+var Inline = /* @__PURE__ */ function(Inline2) {
   Inline2[Inline2["Strong"] = 0] = "Strong";
   Inline2[Inline2["Emphasis"] = 1] = "Emphasis";
   Inline2[Inline2["Strikethrough"] = 2] = "Strikethrough";
   Inline2[Inline2["Code"] = 3] = "Code";
-})(Inline || (Inline = {}));
-var List;
-(function(List2) {
+  return Inline2;
+}({});
+var List = /* @__PURE__ */ function(List2) {
   List2[List2["Ordered"] = 0] = "Ordered";
   List2[List2["Bullet"] = 1] = "Bullet";
   List2[List2["Task"] = 2] = "Task";
-})(List || (List = {}));
+  return List2;
+}({});
 var setHeading = (level) => {
   return ({ state, dispatch }) => {
     const { selection: { ranges }, doc } = state;
@@ -2857,7 +2991,7 @@ var setStyle = (type, enable) => {
                   to: range.head + found + marker.length
                 }
               ],
-              range: import_state16.EditorSelection.cursor(range.from - marker.length)
+              range: import_state17.EditorSelection.cursor(range.from - marker.length)
             };
           }
         }
@@ -2985,13 +3119,13 @@ var setStyle = (type, enable) => {
             from: range.head,
             insert: marker + marker
           },
-          range: import_state16.EditorSelection.cursor(range.head + marker.length)
+          range: import_state17.EditorSelection.cursor(range.head + marker.length)
         };
       }
       const changeSet = state.changes(changes2.concat(changesAtEnd));
       return {
         changes: changeSet,
-        range: range.empty && !changeSet.empty ? import_state16.EditorSelection.cursor(range.head + marker.length) : import_state16.EditorSelection.range(changeSet.mapPos(range.from, 1), changeSet.mapPos(range.to, -1))
+        range: range.empty && !changeSet.empty ? import_state17.EditorSelection.cursor(range.head + marker.length) : import_state17.EditorSelection.range(changeSet.mapPos(range.from, 1), changeSet.mapPos(range.to, -1))
       };
     });
     dispatch(state.update(changes, {
@@ -3191,7 +3325,7 @@ var addLink = ({ url, image: image2 } = {}) => {
       const changeSet = state.changes(changes2.concat(changesAfter));
       return {
         changes: changeSet,
-        range: import_state16.EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0))
+        range: import_state17.EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0))
       };
     });
     if (changes.changes.empty) {
@@ -3625,7 +3759,7 @@ var toggleCodeblock = (target) => {
 };
 var formattingKeymap = (_options = {}) => {
   return [
-    import_view18.keymap.of([
+    import_view19.keymap.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -3826,7 +3960,7 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return (0, import_react6.useMemo)(() => import_view18.EditorView.updateListener.of((update2) => {
+  return (0, import_react6.useMemo)(() => import_view19.EditorView.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
@@ -4054,7 +4188,7 @@ var markdownHighlightStyle = (_options = {}) => {
     }
   });
 };
-var createMarkdownExtensions = ({ themeMode } = {}) => {
+var createMarkdownExtensions = (options = {}) => {
   return [
     // Main extension.
     // https://github.com/codemirror/lang-markdown
@@ -4078,17 +4212,17 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
     }),
     // Custom styles.
     (0, import_language5.syntaxHighlighting)(markdownHighlightStyle()),
-    import_view19.keymap.of([
+    import_view20.keymap.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
-      import_commands3.indentWithTab,
+      options.indentWithTab !== false && import_commands3.indentWithTab,
       // https://codemirror.net/docs/ref/#commands.defaultKeymap
       ...import_commands3.defaultKeymap,
       ...import_autocomplete4.completionKeymap,
-      ...import_lint.lintKeymap
-    ])
+      ...import_lint2.lintKeymap
+    ].filter(import_util5.isNotFalsy))
   ];
 };
-var debugTree = (cb) => import_state17.StateField.define({
+var debugTree = (cb) => import_state18.StateField.define({
   create: (state) => cb(convertTreeToJson(state)),
   update: (value, tr) => cb(convertTreeToJson(tr.state))
 });
@@ -4112,12 +4246,12 @@ var convertTreeToJson = (state) => {
   return treeToJson((0, import_language7.syntaxTree)(state).cursor());
 };
 var adjustChanges = () => {
-  return import_view21.ViewPlugin.fromClass(class {
+  return import_view22.ViewPlugin.fromClass(class {
     update(update2) {
       const tree = (0, import_language9.syntaxTree)(update2.state);
       const adjustments = [];
       for (const tr of update2.transactions) {
-        const event = tr.annotation(import_state19.Transaction.userEvent);
+        const event = tr.annotation(import_state20.Transaction.userEvent);
         switch (event) {
           //
           // Enter
@@ -4252,9 +4386,9 @@ var getValidUrl = (str) => {
 };
 var image = (_options = {}) => {
   return [
-    import_state20.StateField.define({
+    import_state21.StateField.define({
       create: (state) => {
-        return import_view22.Decoration.set(buildDecorations(0, state.doc.length, state));
+        return import_view23.Decoration.set(buildDecorations(0, state.doc.length, state));
       },
       update: (value, tr) => {
         if (!tr.docChanged && !tr.selection) {
@@ -4277,12 +4411,12 @@ var image = (_options = {}) => {
           add: buildDecorations(from, to, tr.state)
         });
       },
-      provide: (field) => import_view22.EditorView.decorations.from(field)
+      provide: (field) => import_view23.EditorView.decorations.from(field)
     })
   ];
 };
 var buildDecorations = (from, to, state) => {
-  const decorations = [];
+  const decorations2 = [];
   const cursor = state.selection.main.head;
   (0, import_language10.syntaxTree)(state).iterate({
     enter: (node) => {
@@ -4295,7 +4429,7 @@ var buildDecorations = (from, to, state) => {
             return;
           }
           preloadImage(url);
-          decorations.push(import_view22.Decoration.replace({
+          decorations2.push(import_view23.Decoration.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -4305,7 +4439,7 @@ var buildDecorations = (from, to, state) => {
     from,
     to
   });
-  return decorations;
+  return decorations2;
 };
 var preloaded = /* @__PURE__ */ new Set();
 var preloadImage = (url) => {
@@ -4315,10 +4449,9 @@ var preloadImage = (url) => {
     preloaded.add(url);
   }
 };
-var ImageWidget = class extends import_view22.WidgetType {
+var ImageWidget = class extends import_view23.WidgetType {
   constructor(_url) {
-    super();
-    this._url = _url;
+    super(), this._url = _url;
   }
   eq(other) {
     return this._url === other._url;
@@ -4337,7 +4470,7 @@ var ImageWidget = class extends import_view22.WidgetType {
 };
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = import_view23.EditorView.theme({
+var formattingStyles = import_view24.EditorView.theme({
   /**
   * Horizontal rule.
   */
@@ -4396,8 +4529,9 @@ var formattingStyles = import_view23.EditorView.theme({
   * Task list.
   */
   "& .cm-task": {
-    display: "inline-block",
-    width: `${bulletListIndentationWidth}px`
+    display: "inline-flex",
+    width: `${bulletListIndentationWidth}px`,
+    height: "20px"
   },
   "& .cm-task-checkbox": {
     display: "grid",
@@ -4455,14 +4589,14 @@ var formattingStyles = import_view23.EditorView.theme({
   }
 });
 var table = (options = {}) => {
-  return import_state21.StateField.define({
+  return import_state22.StateField.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => import_view24.EditorView.decorations.from(field)
+    provide: (field) => import_view25.EditorView.decorations.from(field)
   });
 };
 var update = (state, _options) => {
-  const builder = new import_state21.RangeSetBuilder();
+  const builder = new import_state22.RangeSetBuilder();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -4503,22 +4637,21 @@ var update = (state, _options) => {
   tables.forEach((table2) => {
     const replace = state.readOnly || cursor < table2.from || cursor > table2.to;
     if (replace) {
-      builder.add(table2.from, table2.to, import_view24.Decoration.replace({
+      builder.add(table2.from, table2.to, import_view25.Decoration.replace({
         block: true,
         widget: new TableWidget(table2)
       }));
     } else {
-      builder.add(table2.from, table2.to, import_view24.Decoration.mark({
+      builder.add(table2.from, table2.to, import_view25.Decoration.mark({
         class: "cm-table"
       }));
     }
   });
   return builder.finish();
 };
-var TableWidget = class extends import_view24.WidgetType {
+var TableWidget = class extends import_view25.WidgetType {
   constructor(_table) {
-    super();
-    this._table = _table;
+    super(), this._table = _table;
   }
   eq(other) {
     return this._table.header?.join() === other._table.header?.join() && this._table.rows?.join() === other._table.rows?.join();
@@ -4555,18 +4688,16 @@ var Unicode = {
   bulletSmall: "\u2219",
   bulletSquare: "\u2B1D"
 };
-var HorizontalRuleWidget = class extends import_view20.WidgetType {
+var HorizontalRuleWidget = class extends import_view21.WidgetType {
   toDOM() {
     const el = document.createElement("span");
     el.className = "cm-hr";
     return el;
   }
 };
-var LinkButton = class extends import_view20.WidgetType {
+var LinkButton = class extends import_view21.WidgetType {
   constructor(url, render) {
-    super();
-    this.url = url;
-    this.render = render;
+    super(), this.url = url, this.render = render;
   }
   eq(other) {
     return this.url === other.url;
@@ -4580,10 +4711,9 @@ var LinkButton = class extends import_view20.WidgetType {
     return el;
   }
 };
-var CheckboxWidget = class extends import_view20.WidgetType {
+var CheckboxWidget = class extends import_view21.WidgetType {
   constructor(_checked) {
-    super();
-    this._checked = _checked;
+    super(), this._checked = _checked;
   }
   eq(other) {
     return this._checked === other._checked;
@@ -4625,11 +4755,9 @@ var CheckboxWidget = class extends import_view20.WidgetType {
     return false;
   }
 };
-var TextWidget = class extends import_view20.WidgetType {
+var TextWidget = class extends import_view21.WidgetType {
   constructor(text, className) {
-    super();
-    this.text = text;
-    this.className = className;
+    super(), this.text = text, this.className = className;
   }
   toDOM() {
     const el = document.createElement("span");
@@ -4640,29 +4768,29 @@ var TextWidget = class extends import_view20.WidgetType {
     return el;
   }
 };
-var hide = import_view20.Decoration.replace({});
-var blockQuote = import_view20.Decoration.line({
+var hide = import_view21.Decoration.replace({});
+var blockQuote = import_view21.Decoration.line({
   class: "cm-blockquote"
 });
-var fencedCodeLine = import_view20.Decoration.line({
+var fencedCodeLine = import_view21.Decoration.line({
   class: "cm-code cm-codeblock-line"
 });
-var fencedCodeLineFirst = import_view20.Decoration.line({
+var fencedCodeLineFirst = import_view21.Decoration.line({
   class: (0, import_react_ui_theme5.mx)("cm-code cm-codeblock-line", "cm-codeblock-start")
 });
-var fencedCodeLineLast = import_view20.Decoration.line({
+var fencedCodeLineLast = import_view21.Decoration.line({
   class: (0, import_react_ui_theme5.mx)("cm-code cm-codeblock-line", "cm-codeblock-end")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
 var commentBlockLineLast = fencedCodeLineLast;
-var horizontalRule = import_view20.Decoration.replace({
+var horizontalRule = import_view21.Decoration.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = import_view20.Decoration.replace({
+var checkedTask = import_view21.Decoration.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = import_view20.Decoration.replace({
+var uncheckedTask = import_view21.Decoration.replace({
   widget: new CheckboxWidget(false)
 });
 var editingRange = (state, range, focus2) => {
@@ -4678,8 +4806,8 @@ var autoHideTags = /* @__PURE__ */ new Set([
   "SuperscriptMark"
 ]);
 var buildDecorations2 = (view, options, focus2) => {
-  const deco = new import_state18.RangeSetBuilder();
-  const atomicDeco = new import_state18.RangeSetBuilder();
+  const deco = new import_state19.RangeSetBuilder();
+  const atomicDeco = new import_state19.RangeSetBuilder();
   const { state } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
@@ -4766,7 +4894,7 @@ var buildDecorations2 = (view, options, focus2) => {
           } else {
             const num = headers.slice(from - 1).map((level2) => level2?.number ?? 0).join(".") + " ";
             if (num.length) {
-              atomicDeco.add(mark.from, mark.from + len, import_view20.Decoration.replace({
+              atomicDeco.add(mark.from, mark.from + len, import_view21.Decoration.replace({
                 widget: new TextWidget(num, theme.heading(level))
               }));
             }
@@ -4791,7 +4919,7 @@ var buildDecorations2 = (view, options, focus2) => {
         if (node.from === line.to - 1) {
           return false;
         }
-        deco.add(line.from, line.from, import_view20.Decoration.line({
+        deco.add(line.from, line.from, import_view21.Decoration.line({
           class: "cm-list-item",
           attributes: {
             style: `padding-left: ${offset}px; text-indent: -${width}px;`
@@ -4808,7 +4936,7 @@ var buildDecorations2 = (view, options, focus2) => {
         const label = list.type === "OrderedList" ? `${++list.number}.` : Unicode.bulletSmall;
         const line = state.doc.lineAt(node.from);
         const to = state.doc.sliceString(node.to, node.to + 1) === " " ? node.to + 1 : node.to;
-        atomicDeco.add(line.from, to, import_view20.Decoration.replace({
+        atomicDeco.add(line.from, to, import_view21.Decoration.replace({
           widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
         }));
         break;
@@ -4895,7 +5023,7 @@ var buildDecorations2 = (view, options, focus2) => {
           if (!editing) {
             atomicDeco.add(node.from, marks[0].to, hide);
           }
-          deco.add(marks[0].to, marks[1].from, import_view20.Decoration.mark({
+          deco.add(marks[0].to, marks[1].from, import_view21.Decoration.mark({
             tagName: "a",
             attributes: {
               class: "cm-link",
@@ -4905,7 +5033,7 @@ var buildDecorations2 = (view, options, focus2) => {
             }
           }));
           if (!editing) {
-            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? import_view20.Decoration.replace({
+            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? import_view21.Decoration.replace({
               widget: new LinkButton(url, options.renderLinkButton)
             }) : hide);
           }
@@ -4960,10 +5088,10 @@ var buildDecorations2 = (view, options, focus2) => {
     atomicDeco: atomicDeco.finish()
   };
 };
-var forceUpdate = import_state18.StateEffect.define();
+var forceUpdate = import_state19.StateEffect.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    import_view20.ViewPlugin.fromClass(class {
+    import_view21.ViewPlugin.fromClass(class {
       constructor(view) {
         ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
       }
@@ -4982,113 +5110,796 @@ var decorateMarkdown = (options = {}) => {
           view.dispatch({
             effects: forceUpdate.of(null)
           });
-        }, options.selectionChangeDelay);
-      }
-      clearUpdate() {
-        if (this.pendingUpdate) {
-          clearTimeout(this.pendingUpdate);
-          this.pendingUpdate = void 0;
-        }
-      }
-      destroy() {
-        this.clearUpdate();
+        }, options.selectionChangeDelay);
+      }
+      clearUpdate() {
+        if (this.pendingUpdate) {
+          clearTimeout(this.pendingUpdate);
+          this.pendingUpdate = void 0;
+        }
+      }
+      destroy() {
+        this.clearUpdate();
+      }
+    }, {
+      provide: (plugin) => [
+        import_view21.EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view21.Decoration.none),
+        import_view21.EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view21.Decoration.none),
+        import_view21.EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? import_view21.Decoration.none)
+      ]
+    }),
+    image(),
+    table(),
+    adjustChanges(),
+    formattingStyles
+  ];
+};
+var linkTooltip = (renderTooltip) => {
+  return (0, import_view26.hoverTooltip)((view, pos, side) => {
+    const syntax = (0, import_language12.syntaxTree)(view.state).resolveInner(pos, side);
+    let link = null;
+    for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
+      link = node.name === "Link" ? node : null;
+    }
+    const url = link && link.getChild("URL");
+    if (!url || !link) {
+      return null;
+    }
+    const urlText = view.state.sliceDoc(url.from, url.to);
+    return {
+      pos: link.from,
+      end: link.to,
+      // NOTE: Forcing above causes the tooltip to flicker.
+      // above: true,
+      create: () => {
+        const el = document.createElement("div");
+        el.className = (0, import_react_ui_theme6.tooltipContent)({});
+        renderTooltip(el, {
+          url: urlText
+        }, view);
+        return {
+          dom: el,
+          offset: {
+            x: 0,
+            y: 4
+          }
+        };
+      }
+    };
+  }, {
+    // NOTE: 0 = default of 300ms.
+    hoverTime: 1
+  });
+};
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+var mention = ({ debug, onSearch }) => {
+  return (0, import_autocomplete5.autocompletion)({
+    // TODO(burdon): Not working.
+    activateOnTyping: true,
+    // activateOnTypingDelay: 100,
+    // selectOnOpen: true,
+    closeOnBlur: !debug,
+    // defaultKeymap: false,
+    icons: false,
+    override: [
+      (context) => {
+        import_log6.log.info("completion context", {
+          context
+        }, {
+          F: __dxlog_file10,
+          L: 27,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        const match = context.matchBefore(/@(\w+)?/);
+        if (!match || match.from === match.to && !context.explicit) {
+          return null;
+        }
+        return {
+          from: match.from,
+          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
+            label: `@${value}`
+          }))
+        };
+      }
+    ]
+  });
+};
+var EditorViewModes = [
+  "preview",
+  "readonly",
+  "source"
+];
+var EditorViewMode = import_effect.Schema.Union(...EditorViewModes.map((mode) => import_effect.Schema.Literal(mode)));
+var EditorInputModes = [
+  "default",
+  "vim",
+  "vscode"
+];
+var EditorInputMode = import_effect.Schema.Union(...EditorInputModes.map((mode) => import_effect.Schema.Literal(mode)));
+var editorInputMode = singleValueFacet({});
+var InputModeExtensions = {
+  default: [],
+  vscode: [
+    // https://github.com/replit/codemirror-vscode-keymap
+    editorInputMode.of({
+      type: "vscode"
+    }),
+    import_view27.keymap.of(import_codemirror_vscode_keymap.vscodeKeymap)
+  ],
+  vim: [
+    // https://github.com/replit/codemirror-vim
+    (0, import_codemirror_vim.vim)(),
+    editorInputMode.of({
+      type: "vim",
+      noTabster: true
+    }),
+    import_view27.keymap.of([
+      {
+        key: "Alt-Escape",
+        run: (view) => {
+          view.dom.parentElement?.focus();
+          return true;
+        }
+      }
+    ])
+  ]
+};
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/tree.ts";
+var itemToJSON = ({ type, index, level, lineRange, contentRange, children }) => {
+  return {
+    type,
+    index,
+    level,
+    lineRange,
+    contentRange,
+    children: children.map(itemToJSON)
+  };
+};
+var Tree = class {
+  constructor(node) {
+    this.type = "root";
+    this.index = -1;
+    this.level = -1;
+    this.children = [];
+    this.node = node;
+    this.lineRange = {
+      from: node.from,
+      to: node.to
+    };
+    this.contentRange = this.lineRange;
+  }
+  toJSON() {
+    return itemToJSON(this);
+  }
+  get root() {
+    return this;
+  }
+  traverse(itemOrCb, maybeCb) {
+    if (typeof itemOrCb === "function") {
+      return traverse(this, itemOrCb);
+    } else {
+      return traverse(itemOrCb, maybeCb);
+    }
+  }
+  /**
+  * Return the closest item.
+  */
+  find(pos) {
+    return this.traverse((item) => item.lineRange.from <= pos && item.lineRange.to >= pos ? item : void 0);
+  }
+  /**
+  * Return the first child, next sibling, or parent's next sibling.
+  */
+  next(item, enter = true) {
+    if (enter && item.children.length > 0) {
+      return item.children[0];
+    }
+    if (item.nextSibling) {
+      return item.nextSibling;
+    }
+    if (item.parent) {
+      return this.next(item.parent, false);
+    }
+    return void 0;
+  }
+  /**
+  * Return the previous sibling, or parent.
+  */
+  prev(item) {
+    if (item.prevSibling) {
+      return this.lastDescendant(item.prevSibling);
+    }
+    return item.parent?.type === "root" ? void 0 : item.parent;
+  }
+  /**
+  * Return the last descendant of the item, or the item itself if it has no children.
+  */
+  lastDescendant(item) {
+    return item.children.length > 0 ? this.lastDescendant(item.children.at(-1)) : item;
+  }
+};
+var getRange = (tree, item) => {
+  const lastDescendant = tree.lastDescendant(item);
+  return [
+    item.lineRange.from,
+    lastDescendant.lineRange.to
+  ];
+};
+var traverse = (root, cb) => {
+  const t = (item, level) => {
+    if (item.type !== "root") {
+      const value = cb(item, level);
+      if (value != null) {
+        return value;
+      }
+    }
+    for (const child of item.children) {
+      const value = t(child, level + 1);
+      if (value != null) {
+        return value;
+      }
+    }
+  };
+  return t(root, root.type === "root" ? -1 : 0);
+};
+var getListItemContent = (state, item) => {
+  return state.doc.sliceString(item.contentRange.from, item.contentRange.to);
+};
+var listItemToString = (item, level = 0) => {
+  const indent = "  ".repeat(level);
+  const data = {
+    i: item.index,
+    n: item.nextSibling?.index ?? "\u2205",
+    p: item.prevSibling?.index ?? "\u2205",
+    level: item.level,
+    node: format([
+      item.node.from,
+      item.node.to
+    ]),
+    line: format([
+      item.lineRange.from,
+      item.lineRange.to
+    ]),
+    content: format([
+      item.contentRange.from,
+      item.contentRange.to
+    ])
+  };
+  return `${indent}${item.type[0].toUpperCase()}(${Object.entries(data).map(([k, v]) => `${k}=${v}`).join(", ")})`;
+};
+var format = (value) => JSON.stringify(value, (key, value2) => {
+  if (typeof value2 === "number") {
+    return value2.toString().padStart(3, " ");
+  }
+  return value2;
+}).replaceAll('"', "");
+var treeFacet = import_state26.Facet.define({
+  combine: (values) => values[0]
+});
+var outlinerTree = (options = {}) => {
+  const buildTree = (state) => {
+    let tree;
+    let parent;
+    let current;
+    let prev;
+    let level = -1;
+    let index = -1;
+    const prevSiblings = [];
+    (0, import_language14.syntaxTree)(state).iterate({
+      enter: (node) => {
+        switch (node.name) {
+          case "Document": {
+            tree = new Tree(node.node);
+            current = tree;
+            break;
+          }
+          case "BulletList": {
+            (0, import_invariant5.invariant)(current, void 0, {
+              F: __dxlog_file11,
+              L: 217,
+              S: void 0,
+              A: [
+                "current",
+                ""
+              ]
+            });
+            parent = current;
+            if (current) {
+              current.lineRange.to = current.node.from;
+            }
+            prevSiblings[++level] = void 0;
+            break;
+          }
+          case "ListItem": {
+            (0, import_invariant5.invariant)(parent, void 0, {
+              F: __dxlog_file11,
+              L: 226,
+              S: void 0,
+              A: [
+                "parent",
+                ""
+              ]
+            });
+            const nextSibling = node.node.nextSibling ?? node.node.parent?.nextSibling;
+            const docRange = {
+              from: state.doc.lineAt(node.from).from,
+              to: nextSibling ? nextSibling.from - 1 : state.doc.length
+            };
+            current = {
+              type: "unknown",
+              index: ++index,
+              level,
+              node: node.node,
+              lineRange: docRange,
+              contentRange: {
+                ...docRange
+              },
+              parent,
+              prevSibling: prevSiblings[level],
+              children: []
+            };
+            if (current.prevSibling) {
+              current.prevSibling.nextSibling = current;
+            }
+            prevSiblings[level] = current;
+            if (prev) {
+              prev.lineRange.to = prev.contentRange.to = current.lineRange.from - 1;
+            }
+            prev = current;
+            parent.children.push(current);
+            if (parent.lineRange.to === parent.node.from) {
+              parent.lineRange.to = parent.contentRange.to = current.lineRange.from - 1;
+            }
+            break;
+          }
+          case "ListMark": {
+            (0, import_invariant5.invariant)(current, void 0, {
+              F: __dxlog_file11,
+              L: 270,
+              S: void 0,
+              A: [
+                "current",
+                ""
+              ]
+            });
+            current.type = "bullet";
+            current.contentRange.from = node.from + "- ".length;
+            break;
+          }
+          case "Task": {
+            (0, import_invariant5.invariant)(current, void 0, {
+              F: __dxlog_file11,
+              L: 276,
+              S: void 0,
+              A: [
+                "current",
+                ""
+              ]
+            });
+            current.type = "task";
+            break;
+          }
+          case "TaskMarker": {
+            (0, import_invariant5.invariant)(current, void 0, {
+              F: __dxlog_file11,
+              L: 281,
+              S: void 0,
+              A: [
+                "current",
+                ""
+              ]
+            });
+            current.contentRange.from = node.from + "[ ] ".length;
+            break;
+          }
+        }
+      },
+      leave: (node) => {
+        if (node.name === "BulletList") {
+          (0, import_invariant5.invariant)(parent, void 0, {
+            F: __dxlog_file11,
+            L: 289,
+            S: void 0,
+            A: [
+              "parent",
+              ""
+            ]
+          });
+          prevSiblings[level--] = void 0;
+          parent = parent.parent;
+        }
+      }
+    });
+    (0, import_invariant5.invariant)(tree, void 0, {
+      F: __dxlog_file11,
+      L: 296,
+      S: void 0,
+      A: [
+        "tree",
+        ""
+      ]
+    });
+    return tree;
+  };
+  return [
+    import_state25.StateField.define({
+      create: (state) => {
+        return buildTree(state);
+      },
+      update: (value, tr) => {
+        if (!tr.docChanged) {
+          return value;
+        }
+        return buildTree(tr.state);
+      },
+      provide: (field) => treeFacet.from(field)
+    })
+  ];
+};
+var getSelection = (state) => state.selection.main;
+var selectionEquals = (a, b) => a.length === b.length && a.every((i) => b.includes(i));
+var selectionFacet = import_state24.Facet.define({
+  combine: (values) => values[0]
+});
+var selectionCompartment = new import_state24.Compartment();
+var selectNone = (view) => {
+  view.dispatch({
+    effects: selectionCompartment.reconfigure(selectionFacet.of([]))
+  });
+  return true;
+};
+var selectAll = (view) => {
+  const tree = view.state.facet(treeFacet);
+  const selection = view.state.facet(selectionFacet);
+  const items = [];
+  tree.traverse((item) => items.push(item.index));
+  view.dispatch({
+    effects: selectionCompartment.reconfigure(selectionFacet.of(selectionEquals(selection, items) ? [] : items))
+  });
+  return true;
+};
+var selectUp = (view) => {
+  return true;
+};
+var selectDown = (view) => {
+  return true;
+};
+var indentItemMore = (view) => {
+  const pos = getSelection(view.state).from;
+  const tree = view.state.facet(treeFacet);
+  const current = tree.find(pos);
+  if (current) {
+    const previous = tree.prev(current);
+    if (previous && current.level <= previous.level) {
+      (0, import_commands4.indentMore)(view);
+    }
+  }
+  return true;
+};
+var indentItemLess = (view) => {
+  const pos = getSelection(view.state).from;
+  const tree = view.state.facet(treeFacet);
+  const current = tree.find(pos);
+  if (current) {
+    if (current.level > 0) {
+      const indentUnit = (0, import_language13.getIndentUnit)(view.state);
+      const changes = [];
+      tree.traverse(current, (item) => {
+        const line = view.state.doc.lineAt(item.lineRange.from);
+        changes.push({
+          from: line.from,
+          to: line.from + indentUnit
+        });
+      });
+      if (changes.length > 0) {
+        view.dispatch({
+          changes
+        });
+      }
+    }
+  }
+  return true;
+};
+var moveItemDown = (view) => {
+  const pos = getSelection(view.state)?.from;
+  const tree = view.state.facet(treeFacet);
+  const current = tree.find(pos);
+  if (current && current.nextSibling) {
+    const next = current.nextSibling;
+    const currentContent = view.state.doc.sliceString(...getRange(tree, current));
+    const nextContent = view.state.doc.sliceString(...getRange(tree, next));
+    const changes = [
+      {
+        from: current.lineRange.from,
+        to: current.lineRange.from + currentContent.length,
+        insert: nextContent
+      },
+      {
+        from: next.lineRange.from,
+        to: next.lineRange.from + nextContent.length,
+        insert: currentContent
+      }
+    ];
+    view.dispatch({
+      changes,
+      selection: import_state23.EditorSelection.cursor(pos + nextContent.length + 1),
+      scrollIntoView: true
+    });
+  }
+  return true;
+};
+var moveItemUp = (view) => {
+  const pos = getSelection(view.state)?.from;
+  const tree = view.state.facet(treeFacet);
+  const current = tree.find(pos);
+  if (current && current.prevSibling) {
+    const prev = current.prevSibling;
+    const currentContent = view.state.doc.sliceString(...getRange(tree, current));
+    const prevContent = view.state.doc.sliceString(...getRange(tree, prev));
+    const changes = [
+      {
+        from: prev.lineRange.from,
+        to: prev.lineRange.from + prevContent.length,
+        insert: currentContent
+      },
+      {
+        from: current.lineRange.from,
+        to: current.lineRange.from + currentContent.length,
+        insert: prevContent
+      }
+    ];
+    view.dispatch({
+      changes,
+      selection: import_state23.EditorSelection.cursor(pos - prevContent.length - 1),
+      scrollIntoView: true
+    });
+  }
+  return true;
+};
+var deleteItem = (view) => {
+  const tree = view.state.facet(treeFacet);
+  const pos = getSelection(view.state).from;
+  const current = tree.find(pos);
+  if (current) {
+    view.dispatch({
+      selection: import_state23.EditorSelection.cursor(current.lineRange.from),
+      changes: [
+        {
+          from: current.lineRange.from,
+          to: Math.min(current.lineRange.to + 1, view.state.doc.length)
+        }
+      ]
+    });
+  }
+  return true;
+};
+var toggleTask = (view) => {
+  const tree = view.state.facet(treeFacet);
+  const pos = getSelection(view.state)?.from;
+  const current = tree.find(pos);
+  if (current) {
+    const type = current.type === "task" ? "bullet" : "task";
+    const indent = " ".repeat((0, import_language13.getIndentUnit)(view.state) * current.level);
+    view.dispatch({
+      changes: [
+        {
+          from: current.lineRange.from,
+          to: current.contentRange.from,
+          insert: indent + (type === "task" ? "- [ ] " : "- ")
+        }
+      ]
+    });
+  }
+  return true;
+};
+var commands = () => import_view28.keymap.of([
+  //
+  // Indentation.
+  //
+  {
+    key: "Tab",
+    preventDefault: true,
+    run: indentItemMore,
+    shift: indentItemLess
+  },
+  //
+  // Continuation.
+  //
+  {
+    key: "Enter",
+    shift: (view) => {
+      const pos = getSelection(view.state).from;
+      const insert = "\n  ";
+      view.dispatch({
+        changes: [
+          {
+            from: pos,
+            to: pos,
+            insert
+          }
+        ],
+        selection: import_state23.EditorSelection.cursor(pos + insert.length)
+      });
+      return true;
+    }
+  },
+  //
+  // Navigation.
+  //
+  {
+    key: "ArrowDown",
+    // Jump to next item (default moves to end of currentline).
+    run: (view) => {
+      const tree = view.state.facet(treeFacet);
+      const item = tree.find(getSelection(view.state).from);
+      if (item && view.state.doc.lineAt(item.lineRange.to).number - view.state.doc.lineAt(item.lineRange.from).number === 0) {
+        const next = tree.next(item);
+        if (next) {
+          view.dispatch({
+            selection: import_state23.EditorSelection.cursor(next.contentRange.from)
+          });
+          return true;
+        }
+      }
+      return false;
+    }
+  },
+  //
+  // Line selection.
+  // TODO(burdon): Shortcut to select current item?
+  //
+  {
+    key: "Mod-a",
+    preventDefault: true,
+    run: selectAll
+  },
+  {
+    key: "Escape",
+    preventDefault: true,
+    run: selectNone
+  },
+  {
+    key: "ArrowUp",
+    shift: selectUp
+  },
+  {
+    key: "ArrowDown",
+    shift: selectDown
+  },
+  //
+  // Move.
+  //
+  {
+    key: "Alt-ArrowDown",
+    preventDefault: true,
+    run: moveItemDown
+  },
+  {
+    key: "Alt-ArrowUp",
+    preventDefault: true,
+    run: moveItemUp
+  },
+  //
+  // Delete.
+  //
+  {
+    key: "Mod-Backspace",
+    preventDefault: true,
+    run: deleteItem
+  },
+  //
+  // Misc.
+  //
+  {
+    key: "Alt-t",
+    preventDefault: true,
+    run: toggleTask
+  }
+]);
+var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/editor.ts";
+var LIST_ITEM_REGEX = /^\s*- (\[ \]|\[x\])? /;
+var initialize = () => {
+  return import_view30.ViewPlugin.fromClass(class {
+    constructor(view) {
+      const first = view.state.doc.lineAt(0);
+      const text = view.state.sliceDoc(first.from, first.to);
+      const match = text.match(LIST_ITEM_REGEX);
+      if (!match) {
+        setTimeout(() => {
+          const insert = "- [ ] ";
+          view.dispatch({
+            changes: [
+              {
+                from: 0,
+                to: 0,
+                insert
+              }
+            ],
+            selection: import_state28.EditorSelection.cursor(insert.length)
+          });
+        });
       }
-    }, {
-      provide: (plugin) => [
-        import_view20.EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view20.Decoration.none),
-        import_view20.EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view20.Decoration.none),
-        import_view20.EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? import_view20.Decoration.none)
-      ]
-    }),
-    image(),
-    table(),
-    adjustChanges(),
-    formattingStyles
-  ];
-};
-var linkTooltip = (renderTooltip) => {
-  return (0, import_view25.hoverTooltip)((view, pos, side) => {
-    const syntax = (0, import_language12.syntaxTree)(view.state).resolveInner(pos, side);
-    let link = null;
-    for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
-      link = node.name === "Link" ? node : null;
-    }
-    const url = link && link.getChild("URL");
-    if (!url || !link) {
-      return null;
     }
-    const urlText = view.state.sliceDoc(url.from, url.to);
-    return {
-      pos: link.from,
-      end: link.to,
-      // NOTE: Forcing above causes the tooltip to flicker.
-      // above: true,
-      create: () => {
-        const el = document.createElement("div");
-        el.className = (0, import_react_ui_theme6.tooltipContent)({});
-        renderTooltip(el, {
-          url: urlText
-        }, view);
-        return {
-          dom: el,
-          offset: {
-            x: 0,
-            y: 4
-          }
-        };
-      }
-    };
-  }, {
-    // NOTE: 0 = default of 300ms.
-    hoverTime: 1
   });
 };
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/outliner.ts";
-var indentLevel = 2;
-var matchTaskMarker = /^\s*- (\[ \]|\[x\])? /;
-var getLineInfo = (line) => {
-  const match = line.text.match(matchTaskMarker);
-  const start = line.from + (match?.[0]?.length ?? 0);
-  return {
-    match,
-    start
-  };
-};
-var outliner = () => [
-  import_state22.EditorState.transactionFilter.of((tr) => {
+var editor = () => [
+  initialize(),
+  import_state28.EditorState.transactionFilter.of((tr) => {
+    const tree = tr.state.facet(treeFacet);
     if (!tr.docChanged) {
-      const pos = tr.selection?.ranges[tr.selection?.mainIndex]?.from;
-      if (pos != null) {
-        const { match, start } = getLineInfo(tr.startState.doc.lineAt(pos));
-        if (match) {
-          if (pos < start) {
+      const current = getSelection(tr.state).from;
+      if (current != null) {
+        const currentItem = tree.find(current);
+        if (!currentItem) {
+          return [];
+        }
+        if (current < currentItem.contentRange.from || current > currentItem.contentRange.to) {
+          const prev = getSelection(tr.startState).from;
+          const prevItem = prev != null ? tree.find(prev) : void 0;
+          if (!prevItem) {
             return [
               {
-                selection: {
-                  anchor: start,
-                  head: start
-                }
+                selection: import_state28.EditorSelection.cursor(currentItem.contentRange.from)
               }
             ];
+          } else {
+            if (currentItem.index < prevItem.index) {
+              return [
+                {
+                  selection: import_state28.EditorSelection.cursor(currentItem.contentRange.to)
+                }
+              ];
+            } else if (currentItem.index > prevItem.index) {
+              return [
+                {
+                  selection: import_state28.EditorSelection.cursor(currentItem.contentRange.from)
+                }
+              ];
+            } else {
+              if (current < prev) {
+                if (currentItem.index === 0) {
+                  return [];
+                } else {
+                  return [
+                    {
+                      selection: import_state28.EditorSelection.cursor(currentItem.lineRange.from - 1)
+                    }
+                  ];
+                }
+              } else {
+                return [
+                  {
+                    selection: import_state28.EditorSelection.cursor(currentItem.contentRange.to)
+                  }
+                ];
+              }
+            }
           }
         }
       }
       return tr;
     }
+    let cancel = false;
     const changes = [];
     tr.changes.iterChanges((fromA, toA, fromB, toB, insert) => {
       const line = tr.startState.doc.lineAt(fromA);
-      const isTaskMarker = line.text.match(matchTaskMarker);
-      if (isTaskMarker) {
-        const { start } = getLineInfo(line);
+      const match = line.text.match(LIST_ITEM_REGEX);
+      if (match) {
+        const startTree = tr.startState.facet(treeFacet);
+        const startItem = startTree.find(tr.startState.selection.main.from);
+        const deleteLine = fromA === startItem?.lineRange.from && toA === startItem?.lineRange.to + 1;
+        if (deleteLine) {
+          return;
+        }
+        const currentItem = tree.find(tr.state.selection.main.from);
+        if (!currentItem?.contentRange) {
+          cancel = true;
+          return;
+        }
+        const start = line.from + (match?.[0]?.length ?? 0);
         const replace = start === toA && toA - fromA === insert.length;
         if (replace) {
-          import_log6.log.info("delete line", void 0, {
-            F: __dxlog_file10,
-            L: 82,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
           changes.push({
             from: line.from - 1,
             to: toA
@@ -5100,24 +5911,9 @@ var outliner = () => [
             const line2 = tr.state.doc.lineAt(fromA);
             if (line2.text.match(/^\s*$/)) {
               if (line2.from === 0) {
-                import_log6.log.info("skip", void 0, {
-                  F: __dxlog_file10,
-                  L: 94,
-                  S: void 0,
-                  C: (f, a) => f(...a)
-                });
-                changes.push({
-                  from: 0,
-                  to: 0
-                });
+                cancel = true;
                 return;
               } else {
-                import_log6.log.info("delete line", void 0, {
-                  F: __dxlog_file10,
-                  L: 99,
-                  S: void 0,
-                  C: (f, a) => f(...a)
-                });
                 changes.push({
                   from: line2.from - 1,
                   to: toA
@@ -5128,44 +5924,17 @@ var outliner = () => [
           }
           return;
         }
-        if (insert.length === indentLevel) {
-          if (line.number === 1) {
-            import_log6.log.info("skip", void 0, {
-              F: __dxlog_file10,
-              L: 111,
-              S: void 0,
-              C: (f, a) => f(...a)
-            });
-            changes.push({
-              from: 0,
-              to: 0
-            });
-            return;
-          } else {
-            const getIndent = (text) => (text.match(/^\s*/)?.[0]?.length ?? 0) / indentLevel;
-            const currentIndent = getIndent(line.text);
-            const indentPrevious = getIndent(tr.state.doc.lineAt(fromA - 1).text);
-            if (currentIndent > indentPrevious) {
-              import_log6.log.info("skip", void 0, {
-                F: __dxlog_file10,
-                L: 119,
-                S: void 0,
-                C: (f, a) => f(...a)
-              });
-              changes.push({
-                from: 0,
-                to: 0
-              });
-              return;
-            }
-          }
+        const item = tree.find(fromA);
+        if (item?.contentRange.from === item?.contentRange.to && fromA === toA) {
+          cancel = true;
+          return;
         }
-        import_log6.log.info("change", {
+        (0, import_log7.log)("change", {
+          item,
           line: {
             from: line.from,
             to: line.to
           },
-          start,
           a: [
             fromA,
             toA
@@ -5179,184 +5948,142 @@ var outliner = () => [
             length: insert.length
           }
         }, {
-          F: __dxlog_file10,
-          L: 134,
+          F: __dxlog_file12,
+          L: 164,
           S: void 0,
           C: (f, a) => f(...a)
         });
       }
     });
     if (changes.length > 0) {
+      (0, import_log7.log)("modified,", {
+        changes
+      }, {
+        F: __dxlog_file12,
+        L: 175,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       return [
         {
           changes
         }
       ];
+    } else if (cancel) {
+      (0, import_log7.log)("cancel", void 0, {
+        F: __dxlog_file12,
+        L: 178,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      return [];
     }
     return tr;
+  })
+];
+var outliner = (options = {}) => [
+  // Commands.
+  import_state27.Prec.highest(commands()),
+  // Selection.
+  selectionCompartment.of(selectionFacet.of([])),
+  // State.
+  outlinerTree(),
+  // Filter and possibly modify changes.
+  editor(),
+  // Floating menu.
+  floatingMenu(),
+  // Line decorations.
+  decorations(options),
+  // Default markdown decorations.
+  decorateMarkdown({
+    listPaddingLeft: 8
+  }),
+  // Researve space for menu.
+  import_view29.EditorView.contentAttributes.of({
+    class: "is-full !mr-[3rem]"
+  })
+];
+var decorations = (options) => [
+  import_view29.ViewPlugin.fromClass(class {
+    constructor(view) {
+      this.decorations = import_view29.Decoration.none;
+      this.updateDecorations(view.state, view);
+    }
+    update(update2) {
+      const selectionChanged = !selectionEquals(update2.state.facet(selectionFacet), update2.startState.facet(selectionFacet));
+      if (update2.focusChanged || update2.docChanged || update2.viewportChanged || update2.selectionSet || selectionChanged) {
+        this.updateDecorations(update2.state, update2.view);
+      }
+    }
+    updateDecorations(state, { viewport: { from, to }, hasFocus }) {
+      const selection = state.facet(selectionFacet);
+      const tree = state.facet(treeFacet);
+      const current = tree.find(state.selection.ranges[state.selection.mainIndex]?.from);
+      const doc = state.doc;
+      const decorations2 = [];
+      for (let lineNum = doc.lineAt(from).number; lineNum <= doc.lineAt(to).number; lineNum++) {
+        const line = doc.line(lineNum);
+        const item = tree.find(line.from);
+        if (item) {
+          const lineFrom = doc.lineAt(item.contentRange.from);
+          const lineTo = doc.lineAt(item.contentRange.to);
+          const isSelected = selection.includes(item.index) || item === current;
+          decorations2.push(import_view29.Decoration.line({
+            class: (0, import_react_ui_theme7.mx)("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
+          }).range(line.from, line.from));
+        }
+      }
+      this.decorations = import_view29.Decoration.set(decorations2);
+    }
+  }, {
+    decorations: (v) => v.decorations
   }),
-  import_state22.StateField.define({
-    create: (state) => {
-      return import_view26.Decoration.set(buildDecorations3(0, state.doc.length, state));
+  // Theme.
+  import_view29.EditorView.theme(Object.assign({
+    ".cm-list-item": {
+      borderLeftWidth: "1px",
+      borderRightWidth: "1px",
+      paddingLeft: "32px",
+      borderColor: "transparent"
     },
-    update: (value, tr) => {
-      const from = 0;
-      const to = tr.state.doc.length;
-      return value.map(tr.changes).update({
-        filterFrom: 0,
-        filterTo: tr.state.doc.length,
-        filter: () => false,
-        add: buildDecorations3(from, to, tr.state)
-      });
+    ".cm-list-item.cm-codeblock-start": {
+      borderRadius: "0"
     },
-    provide: (field) => import_view26.EditorView.decorations.from(field)
-  }),
-  // TODO(burdon): Increase indent padding by configuring decorate extension.
-  // TODO(burdon): Hover to select entire group.
-  import_view26.EditorView.theme({
     ".cm-list-item-start": {
-      borderTop: "1px solid var(--dx-separator)",
-      borderLeft: "1px solid var(--dx-separator)",
-      borderRight: "1px solid var(--dx-separator)",
+      borderTopWidth: "1px",
       borderTopLeftRadius: "4px",
       borderTopRightRadius: "4px",
       paddingTop: "4px",
-      marginTop: "8px"
+      marginTop: "2px"
     },
     ".cm-list-item-end": {
-      borderLeft: "1px solid var(--dx-separator)",
-      borderRight: "1px solid var(--dx-separator)",
-      borderBottom: "1px solid var(--dx-separator)",
+      borderBottomWidth: "1px",
       borderBottomLeftRadius: "4px",
       borderBottomRightRadius: "4px",
       paddingBottom: "4px",
-      marginBottom: "8px"
+      marginBottom: "2px"
     },
-    ".cm-list-item-continuation": {
-      borderLeft: "1px solid var(--dx-separator)",
-      borderRight: "1px solid var(--dx-separator)",
-      // TODO(burdon): Should match parent indentation.
-      paddingLeft: "24px"
+    ".cm-list-item-selected": {
+      borderColor: options.showSelected ? "var(--dx-separator)" : void 0
     },
-    // TODO(burdon): Set via options to decorate extension.
-    ".cm-list-item-continuation.cm-codeblock-start": {
-      borderRadius: "0"
-    }
-  })
-];
-var buildDecorations3 = (from, to, state) => {
-  const decorations = [];
-  (0, import_language13.syntaxTree)(state).iterate({
-    enter: (node) => {
-      if (node.name === "ListItem") {
-        const sub = node.node.getChild("BulletList");
-        const lineStart = state.doc.lineAt(node.from);
-        const lineEnd = sub ? state.doc.lineAt(state.doc.lineAt(sub.from).from - 1) : state.doc.lineAt(node.to);
-        decorations.push(import_view26.Decoration.line({
-          class: (0, import_react_ui_theme7.mx)("cm-list-item-start", lineStart.number === lineEnd.number && "cm-list-item-end")
-        }).range(lineStart.from, lineStart.from));
-        for (let i = lineStart.from + 1; i < lineEnd.from; i++) {
-          decorations.push(import_view26.Decoration.line({
-            class: (0, import_react_ui_theme7.mx)("cm-list-item-continuation")
-          }).range(i, i));
-        }
-        if (lineStart.number !== lineEnd.number) {
-          decorations.push(import_view26.Decoration.line({
-            class: (0, import_react_ui_theme7.mx)("cm-list-item-end")
-          }).range(lineEnd.from, lineEnd.from));
-        }
-      }
+    ".cm-list-item-focused": {
+      borderColor: "var(--dx-accentFocusIndicator)"
     }
-  });
-  return decorations;
-};
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
-var mention = ({ debug, onSearch }) => {
-  return (0, import_autocomplete5.autocompletion)({
-    // TODO(burdon): Not working.
-    activateOnTyping: true,
-    // activateOnTypingDelay: 100,
-    // selectOnOpen: true,
-    closeOnBlur: !debug,
-    // defaultKeymap: false,
-    icons: false,
-    override: [
-      (context) => {
-        import_log7.log.info("completion context", {
-          context
-        }, {
-          F: __dxlog_file11,
-          L: 27,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        const match = context.matchBefore(/@(\w+)?/);
-        if (!match || match.from === match.to && !context.explicit) {
-          return null;
-        }
-        return {
-          from: match.from,
-          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
-            label: `@${value}`
-          }))
-        };
-      }
-    ]
-  });
-};
-var EditorViewModes = [
-  "preview",
-  "readonly",
-  "source"
-];
-var EditorViewMode = import_effect.Schema.Union(...EditorViewModes.map((mode) => import_effect.Schema.Literal(mode)));
-var EditorInputModes = [
-  "default",
-  "vim",
-  "vscode"
+  }))
 ];
-var EditorInputMode = import_effect.Schema.Union(...EditorInputModes.map((mode) => import_effect.Schema.Literal(mode)));
-var editorInputMode = singleValueFacet({});
-var InputModeExtensions = {
-  default: [],
-  vscode: [
-    // https://github.com/replit/codemirror-vscode-keymap
-    editorInputMode.of({
-      type: "vscode"
-    }),
-    import_view27.keymap.of(import_codemirror_vscode_keymap.vscodeKeymap)
-  ],
-  vim: [
-    // https://github.com/replit/codemirror-vim
-    (0, import_codemirror_vim.vim)(),
-    editorInputMode.of({
-      type: "vim",
-      noTabster: true
-    }),
-    import_view27.keymap.of([
-      {
-        key: "Alt-Escape",
-        run: (view) => {
-          view.dom.parentElement?.focus();
-          return true;
-        }
-      }
-    ])
-  ]
-};
 var preview = (options = {}) => {
   return [
     // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
     // "Block decorations may not be specified via plugins"
-    import_state23.StateField.define({
-      create: (state) => buildDecorations4(state, options),
-      update: (_, tr) => buildDecorations4(tr.state, options),
+    import_state29.StateField.define({
+      create: (state) => buildDecorations3(state, options),
+      update: (_, tr) => buildDecorations3(tr.state, options),
       provide: (field) => [
-        import_view28.EditorView.decorations.from(field),
-        import_view28.EditorView.atomicRanges.of((view) => view.state.field(field))
+        import_view31.EditorView.decorations.from(field),
+        import_view31.EditorView.atomicRanges.of((view) => view.state.field(field))
       ]
     }),
-    import_view28.EditorView.theme({
+    import_view31.EditorView.theme({
       ".cm-preview-block": {
         marginLeft: "-1rem",
         marginRight: "-1rem",
@@ -5381,9 +6108,9 @@ var getLinkRef = (state, node) => {
     };
   }
 };
-var buildDecorations4 = (state, options) => {
-  const builder = new import_state23.RangeSetBuilder();
-  (0, import_language14.syntaxTree)(state).iterate({
+var buildDecorations3 = (state, options) => {
+  const builder = new import_state29.RangeSetBuilder();
+  (0, import_language15.syntaxTree)(state).iterate({
     enter: (node) => {
       switch (node.name) {
         //
@@ -5393,7 +6120,7 @@ var buildDecorations4 = (state, options) => {
         case "Link": {
           const link = getLinkRef(state, node.node);
           if (link) {
-            builder.add(node.from, node.to, import_view28.Decoration.replace({
+            builder.add(node.from, node.to, import_view31.Decoration.replace({
               widget: new PreviewInlineWidget(options, link)
             }));
           }
@@ -5406,7 +6133,7 @@ var buildDecorations4 = (state, options) => {
         case "Image": {
           const link = getLinkRef(state, node.node);
           if (options.renderBlock && link) {
-            builder.add(node.from, node.to, import_view28.Decoration.replace({
+            builder.add(node.from, node.to, import_view31.Decoration.replace({
               block: true,
               // atomic: true,
               widget: new PreviewBlockWidget(options, link)
@@ -5419,11 +6146,9 @@ var buildDecorations4 = (state, options) => {
   });
   return builder.finish();
 };
-var PreviewInlineWidget = class extends import_view28.WidgetType {
+var PreviewInlineWidget = class extends import_view31.WidgetType {
   constructor(_options, _link) {
-    super();
-    this._options = _options;
-    this._link = _link;
+    super(), this._options = _options, this._link = _link;
   }
   // override ignoreEvent() {
   //   return false;
@@ -5434,15 +6159,13 @@ var PreviewInlineWidget = class extends import_view28.WidgetType {
   toDOM(view) {
     const root = document.createElement("dx-ref-tag");
     root.textContent = this._link.label;
-    root.setAttribute("ref", this._link.ref);
+    root.setAttribute("refId", this._link.ref);
     return root;
   }
 };
-var PreviewBlockWidget = class extends import_view28.WidgetType {
+var PreviewBlockWidget = class extends import_view31.WidgetType {
   constructor(_options, _link) {
-    super();
-    this._options = _options;
-    this._link = _link;
+    super(), this._options = _options, this._link = _link;
   }
   // override ignoreEvent() {
   //   return true;
@@ -5455,7 +6178,7 @@ var PreviewBlockWidget = class extends import_view28.WidgetType {
     root.classList.add("cm-preview-block");
     const handleAction = (action) => {
       const pos = view.posAtDOM(root);
-      const node = (0, import_language14.syntaxTree)(view.state).resolve(pos + 1).node.parent;
+      const node = (0, import_language15.syntaxTree)(view.state).resolve(pos + 1).node.parent;
       if (!node) {
         return;
       }
@@ -5506,7 +6229,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    import_view29.keymap.of([
+    import_view32.keymap.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -5607,28 +6330,6 @@ var createBlocks = (state, getView) => {
     ]
   };
 };
-var commentLabel = (comment, selection) => comment ? "selection overlaps existing comment label" : selection === false ? "select text to comment label" : "comment label";
-var createCommentAction = (label, getView) => createEditorAction("comment", () => createComment(getView()), {
-  testId: "editor.toolbar.comment",
-  icon: "ph--chat-text--regular",
-  label
-});
-var createComment2 = (state, getView) => ({
-  nodes: [
-    createCommentAction([
-      commentLabel(state.comment, state.selection),
-      {
-        ns: translationKey
-      }
-    ], getView)
-  ],
-  edges: [
-    {
-      source: "root",
-      target: "comment"
-    }
-  ]
-});
 var formats = {
   strong: "ph--text-b--regular",
   emphasis: "ph--text-italic--regular",
@@ -5855,113 +6556,261 @@ var createViewMode = (state, onViewModeChange) => {
     ]
   };
 };
-var margin = "!mt-[1rem]";
 var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
-var editorContent = (0, import_react_ui_theme8.mx)(margin, editorWidth);
-var editorFullWidth = (0, import_react_ui_theme8.mx)(margin);
-var editorGutter = import_view30.EditorView.theme({
-  // Match margin from content.
-  // Gutter = 2rem + 1rem margin.
+var editorSlots = {
+  scroll: {
+    className: "pbs-2"
+  },
+  content: {
+    className: editorWidth
+  }
+};
+var editorGutter = import_view33.EditorView.theme({
   ".cm-gutters": {
-    marginTop: "1rem",
     paddingRight: "1rem"
   }
 });
-var editorMonospace = import_view30.EditorView.theme({
+var editorMonospace = import_view33.EditorView.theme({
   ".cm-content": {
     fontFamily: fontMono
   }
 });
 var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
 var stackItemContentEditorClassNames = (role) => (0, import_react_ui_theme8.mx)("attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
-var stackItemContentToolbarClassNames = (role) => (0, import_react_ui_theme8.mx)("relative z-[1] flex is-full bg-toolbarSurface border-be border-separator", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
+var stackItemContentToolbarClassNames = (role) => (0, import_react_ui_theme8.mx)("relative z-[1] flex is-full bg-toolbarSurface border-be border-subduedSeparator", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
 var createToolbar = ({ getView, state, customActions, ...features }) => {
-  const nodes = [];
-  const edges = [];
-  if (features.headings ?? true) {
-    const headings2 = createHeadings(state, getView);
-    nodes.push(...headings2.nodes);
-    edges.push(...headings2.edges);
-  }
-  if (features.formatting ?? true) {
-    const formatting = createFormatting(state, getView);
-    nodes.push(...formatting.nodes);
-    edges.push(...formatting.edges);
-  }
-  if (features.lists ?? true) {
-    const lists = createLists(state, getView);
-    nodes.push(...lists.nodes);
-    edges.push(...lists.edges);
-  }
-  if (features.blocks ?? true) {
-    const blocks = createBlocks(state, getView);
-    nodes.push(...blocks.nodes);
-    edges.push(...blocks.edges);
-  }
-  if (features.image) {
-    const image2 = createImageUpload(features.image);
-    nodes.push(...image2.nodes);
-    edges.push(...image2.edges);
-  }
-  if (customActions) {
-    const custom = customActions();
-    nodes.push(...custom.nodes);
-    edges.push(...custom.edges);
-  }
-  const editorToolbarGap = (0, import_react_ui_menu.createGapSeparator)();
-  nodes.push(...editorToolbarGap.nodes);
-  edges.push(...editorToolbarGap.edges);
-  if (features.comment) {
-    const comment = createComment2(state, getView);
-    nodes.push(...comment.nodes);
-    edges.push(...comment.edges);
-  }
-  if (features.search ?? true) {
-    const search = createSearch(getView);
-    nodes.push(...search.nodes);
-    edges.push(...search.edges);
-  }
-  if (features.viewMode) {
-    const viewMode = createViewMode(state, features.viewMode);
-    nodes.push(...viewMode.nodes);
-    edges.push(...viewMode.edges);
-  }
-  return {
-    nodes,
-    edges
-  };
+  return import_rx_react.Rx.make((get2) => {
+    const nodes = [];
+    const edges = [];
+    if (features.headings ?? true) {
+      const headings2 = get2((0, import_app_graph.rxFromSignal)(() => createHeadings(state, getView)));
+      nodes.push(...headings2.nodes);
+      edges.push(...headings2.edges);
+    }
+    if (features.formatting ?? true) {
+      const formatting = get2((0, import_app_graph.rxFromSignal)(() => createFormatting(state, getView)));
+      nodes.push(...formatting.nodes);
+      edges.push(...formatting.edges);
+    }
+    if (features.lists ?? true) {
+      const lists = get2((0, import_app_graph.rxFromSignal)(() => createLists(state, getView)));
+      nodes.push(...lists.nodes);
+      edges.push(...lists.edges);
+    }
+    if (features.blocks ?? true) {
+      const blocks = get2((0, import_app_graph.rxFromSignal)(() => createBlocks(state, getView)));
+      nodes.push(...blocks.nodes);
+      edges.push(...blocks.edges);
+    }
+    if (features.image) {
+      const image2 = get2((0, import_app_graph.rxFromSignal)(() => createImageUpload(features.image)));
+      nodes.push(...image2.nodes);
+      edges.push(...image2.edges);
+    }
+    const editorToolbarGap = (0, import_react_ui_menu.createGapSeparator)();
+    nodes.push(...editorToolbarGap.nodes);
+    edges.push(...editorToolbarGap.edges);
+    if (customActions) {
+      const custom = get2(customActions);
+      nodes.push(...custom.nodes);
+      edges.push(...custom.edges);
+    }
+    if (features.search ?? true) {
+      const search = get2((0, import_app_graph.rxFromSignal)(() => createSearch(getView)));
+      nodes.push(...search.nodes);
+      edges.push(...search.edges);
+    }
+    if (features.viewMode) {
+      const viewMode = get2((0, import_app_graph.rxFromSignal)(() => createViewMode(state, features.viewMode)));
+      nodes.push(...viewMode.nodes);
+      edges.push(...viewMode.edges);
+    }
+    return {
+      nodes,
+      edges
+    };
+  });
 };
 var useEditorToolbarActionGraph = (props) => {
-  const menuCreator = (0, import_react.useCallback)(() => createToolbar(props), [
-    props
+  const menuCreator = (0, import_react.useMemo)(() => createToolbar({
+    getView: props.getView,
+    state: props.state,
+    customActions: props.customActions,
+    headings: props.headings,
+    formatting: props.formatting,
+    lists: props.lists,
+    blocks: props.blocks,
+    image: props.image,
+    search: props.search,
+    viewMode: props.viewMode
+  }), [
+    props.getView,
+    props.state,
+    props.customActions,
+    props.headings,
+    props.formatting,
+    props.lists,
+    props.blocks,
+    props.image,
+    props.search,
+    props.viewMode
   ]);
   return (0, import_react_ui_menu.useMenuActions)(menuCreator);
 };
 var EditorToolbar = /* @__PURE__ */ (0, import_react.memo)(({ classNames, attendableId, role, ...props }) => {
-  const menuProps = useEditorToolbarActionGraph(props);
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    className: stackItemContentToolbarClassNames(role)
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.ElevationProvider, {
-    elevation: role === "section" ? "positioned" : "base"
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui_menu.MenuProvider, {
-    ...menuProps,
-    attendableId
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui_menu.ToolbarMenu, {
-    classNames: [
-      import_react_ui_theme.textBlockWidth,
-      classNames
-    ]
-  }))));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const menuProps = useEditorToolbarActionGraph(props);
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      role: "none",
+      className: stackItemContentToolbarClassNames(role)
+    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.ElevationProvider, {
+      elevation: role === "section" ? "positioned" : "base"
+    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui_menu.MenuProvider, {
+      ...menuProps,
+      attendableId
+    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui_menu.ToolbarMenu, {
+      classNames: [
+        import_react_ui_theme.textBlockWidth,
+        classNames
+      ]
+    }))));
+  } finally {
+    _effect.f();
+  }
 });
-var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var customEventOptions = {
+  capture: true,
+  passive: false
+};
+var REF_POPOVER = "RefPopover";
+var [RefPopoverContextProvider, useRefPopover] = (0, import_react_context.createContext)(REF_POPOVER, {});
+var RefPopoverProvider = ({ children, onLookup }) => {
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const trigger = (0, import_react7.useRef)(null);
+    const [value, setValue] = (0, import_react7.useState)({});
+    const [rootRef, setRootRef] = (0, import_react7.useState)(null);
+    const [open, setOpen] = (0, import_react7.useState)(false);
+    const handleDxRefTagActivate = (0, import_react7.useCallback)((event) => {
+      const { refId, label, trigger: dxTrigger } = event;
+      setValue((value2) => ({
+        ...value2,
+        link: {
+          label,
+          ref: refId
+        },
+        pending: true
+      }));
+      trigger.current = dxTrigger;
+      queueMicrotask(() => setOpen(true));
+      void onLookup?.({
+        label,
+        ref: refId
+      }).then((target) => setValue((value2) => ({
+        ...value2,
+        target: target ?? void 0,
+        pending: false
+      })));
+    }, [
+      onLookup
+    ]);
+    (0, import_react7.useEffect)(() => {
+      return rootRef ? (0, import_async5.addEventListener)(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions) : void 0;
+    }, [
+      rootRef
+    ]);
+    return /* @__PURE__ */ import_react7.default.createElement(RefPopoverContextProvider, {
+      pending: value.pending,
+      link: value.link,
+      target: value.target
+    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Popover.Root, {
+      open,
+      onOpenChange: setOpen
+    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Popover.VirtualTrigger, {
+      virtualRef: trigger
+    }), /* @__PURE__ */ import_react7.default.createElement("div", {
+      role: "none",
+      className: "contents",
+      ref: setRootRef
+    }, children)));
+  } finally {
+    _effect.f();
+  }
+};
+var RefPopover = {
+  Provider: RefPopoverProvider
+};
+var customEventOptions2 = {
+  capture: true,
+  passive: false
+};
+var REF_DROPDOWN_MENU = "RefDropdownMenu";
+var [RefDropdownMenuContextProvider, useRefDropdownMenu] = (0, import_react_context2.createContext)(REF_DROPDOWN_MENU, {});
+var RefDropdownMenuProvider = ({ children, onLookup }) => {
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    const trigger = (0, import_react8.useRef)(null);
+    const [value, setValue] = (0, import_react8.useState)({});
+    const [rootRef, setRootRef] = (0, import_react8.useState)(null);
+    const [open, setOpen] = (0, import_react8.useState)(false);
+    const handleDxRefTagActivate = (0, import_react8.useCallback)((event) => {
+      const { refId, label, trigger: dxTrigger } = event;
+      setValue((value2) => ({
+        ...value2,
+        link: {
+          label,
+          ref: refId
+        },
+        pending: true
+      }));
+      trigger.current = dxTrigger;
+      queueMicrotask(() => setOpen(true));
+      void onLookup?.({
+        label,
+        ref: refId
+      }).then((target) => setValue((value2) => ({
+        ...value2,
+        target: target ?? void 0,
+        pending: false
+      })));
+    }, [
+      onLookup
+    ]);
+    (0, import_react8.useEffect)(() => {
+      return rootRef ? (0, import_async6.addEventListener)(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2) : void 0;
+    }, [
+      rootRef
+    ]);
+    return /* @__PURE__ */ import_react8.default.createElement(RefDropdownMenuContextProvider, {
+      pending: value.pending,
+      link: value.link,
+      target: value.target
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.DropdownMenu.Root, {
+      open,
+      onOpenChange: setOpen
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.DropdownMenu.VirtualTrigger, {
+      virtualRef: trigger
+    }), /* @__PURE__ */ import_react8.default.createElement("div", {
+      role: "none",
+      className: "contents",
+      ref: setRootRef
+    }, children)));
+  } finally {
+    _effect.f();
+  }
+};
+var RefDropdownMenu = {
+  Provider: RefDropdownMenuProvider
+};
+var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var instanceCount = 0;
 var useTextEditor = (props = {}, deps = []) => {
-  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = (0, import_react7.useMemo)(() => (0, import_util5.getProviderValue)(props), deps ?? []);
-  const [instanceId] = (0, import_react7.useState)(() => `text-editor-${++instanceCount}`);
-  const [view, setView] = (0, import_react7.useState)();
-  const parentRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = (0, import_react9.useMemo)(() => (0, import_util6.getProviderValue)(props), deps ?? []);
+  const [instanceId] = (0, import_react9.useState)(() => `text-editor-${++instanceCount}`);
+  const [view, setView] = (0, import_react9.useState)();
+  const parentRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
     let view2;
     if (parentRef.current) {
       (0, import_log8.log)("create", {
@@ -5969,7 +6818,7 @@ var useTextEditor = (props = {}, deps = []) => {
         instanceId,
         doc: initialValue?.length ?? 0
       }, {
-        F: __dxlog_file12,
+        F: __dxlog_file13,
         L: 76,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5986,27 +6835,27 @@ var useTextEditor = (props = {}, deps = []) => {
           anchor
         };
       }
-      const state = import_state24.EditorState.create({
+      const state = import_state30.EditorState.create({
         doc: doc ?? initialValue,
         // selection: initialSelection,
         extensions: [
           id && documentId.of(id),
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
-          import_view31.EditorView.exceptionSink.of((err) => {
+          import_view34.EditorView.exceptionSink.of((err) => {
             import_log8.log.catch(err, void 0, {
-              F: __dxlog_file12,
+              F: __dxlog_file13,
               L: 98,
               S: void 0,
               C: (f, a) => f(...a)
             });
           })
-        ].filter(import_util5.isNotFalsy)
+        ].filter(import_util6.isNotFalsy)
       });
-      view2 = new import_view31.EditorView({
+      view2 = new import_view34.EditorView({
         parent: parentRef.current,
         state,
-        scrollTo: scrollTo ? import_view31.EditorView.scrollIntoView(scrollTo, {
+        scrollTo: scrollTo ? import_view34.EditorView.scrollIntoView(scrollTo, {
           yMargin: 96
         }) : void 0,
         dispatchTransactions: debug ? debugDispatcher : void 0
@@ -6027,7 +6876,7 @@ var useTextEditor = (props = {}, deps = []) => {
       (0, import_log8.log)("destroy", {
         id
       }, {
-        F: __dxlog_file12,
+        F: __dxlog_file13,
         L: 135,
         S: void 0,
         C: (f, a) => f(...a)
@@ -6035,7 +6884,7 @@ var useTextEditor = (props = {}, deps = []) => {
       view2?.destroy();
     };
   }, deps);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (view) {
       if (scrollTo || selection) {
         if (selection && selection.anchor > view.state.doc.length) {
@@ -6044,7 +6893,7 @@ var useTextEditor = (props = {}, deps = []) => {
             scrollTo,
             selection
           }, {
-            F: __dxlog_file12,
+            F: __dxlog_file13,
             L: 144,
             S: void 0,
             C: (f, a) => f(...a)
@@ -6062,7 +6911,7 @@ var useTextEditor = (props = {}, deps = []) => {
     scrollTo,
     selection
   ]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (view && autoFocus) {
       view.focus();
     }
@@ -6076,7 +6925,7 @@ var useTextEditor = (props = {}, deps = []) => {
       Escape: view?.state.facet(editorInputMode).noTabster
     }
   });
-  const handleKeyUp = (0, import_react7.useCallback)((event) => {
+  const handleKeyUp = (0, import_react9.useCallback)((event) => {
     const { key, target, currentTarget } = event;
     if (target === currentTarget) {
       switch (key) {
@@ -6112,9 +6961,12 @@ var useTextEditor = (props = {}, deps = []) => {
   Inline,
   InputModeExtensions,
   List,
+  RefDropdownMenu,
+  RefPopover,
   RemoteSelectionsDecorator,
   SpaceAwarenessProvider,
   TextKind,
+  Tree,
   addBlockquote,
   addCodeblock,
   addLink,
@@ -6132,6 +6984,8 @@ var useTextEditor = (props = {}, deps = []) => {
   closeEffect,
   command,
   commandKeyBindings,
+  commands,
+  commentClickedEffect,
   comments,
   commentsState,
   convertTreeToJson,
@@ -6144,6 +6998,7 @@ var useTextEditor = (props = {}, deps = []) => {
   createEditorStateTransaction,
   createElement,
   createExternalCommentSync,
+  createJsonExtensions,
   createMarkdownExtensions,
   createRenderer,
   createThemeExtensions,
@@ -6152,35 +7007,46 @@ var useTextEditor = (props = {}, deps = []) => {
   debugTree,
   decorateMarkdown,
   defaultOptions,
+  deleteItem,
   documentId,
   dropFile,
-  editorContent,
-  editorFullWidth,
   editorGutter,
   editorInputMode,
   editorMonospace,
+  editorSlots,
   editorWidth,
   editorWithToolbarLayout,
   flattenRect,
+  floatingMenu,
   focus,
   focusField,
   folding,
   formattingEquals,
   formattingKeymap,
   getFormatting,
+  getListItemContent,
+  getRange,
   image,
+  indentItemLess,
+  indentItemMore,
   insertTable,
+  itemToJSON,
   keymap,
   linkTooltip,
+  listItemToString,
   listener,
   logChanges,
   markdownHighlightStyle,
   markdownTags,
   markdownTagsExtensions,
+  matchCompletion,
   mention,
+  moveItemDown,
+  moveItemUp,
   openCommand,
   openEffect,
   outliner,
+  outlinerTree,
   overlap,
   preventNewline,
   preview,
@@ -6192,7 +7058,6 @@ var useTextEditor = (props = {}, deps = []) => {
   removeStyle,
   renderRoot,
   scrollThreadIntoView,
-  selectionOverlapsComment,
   selectionState,
   setBlockquote,
   setComments,
@@ -6202,6 +7067,7 @@ var useTextEditor = (props = {}, deps = []) => {
   singleValueFacet,
   stackItemContentEditorClassNames,
   stackItemContentToolbarClassNames,
+  staticCompletion,
   table,
   tags,
   textRange,
@@ -6213,13 +7079,17 @@ var useTextEditor = (props = {}, deps = []) => {
   toggleStrikethrough,
   toggleStrong,
   toggleStyle,
+  toggleTask,
   translations,
+  traverse,
+  treeFacet,
+  typeahead,
   typewriter,
-  useCommentClickListener,
-  useCommentState,
   useComments,
   useEditorToolbarState,
   useFormattingState,
+  useRefDropdownMenu,
+  useRefPopover,
   useTextEditor,
   wrapWithCatch
 });