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

package/dist/lib/node-esm/index.mjs

@@ -37,12 +37,15 @@ var translations_default = [
 
 // packages/ui/react-ui-editor/src/index.ts
 import { EditorState as EditorState4 } from "@codemirror/state";
-import { EditorView as EditorView23, keymap as keymap11 } from "@codemirror/view";
+import { EditorView as EditorView24, keymap as keymap13 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
 // packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
-import React3, { memo, useCallback } from "react";
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import { Rx } from "@effect-rx/rx-react";
+import React3, { memo, useMemo as useMemo3 } from "react";
+import { rxFromSignal } from "@dxos/app-graph";
 import { ElevationProvider } from "@dxos/react-ui";
 import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
 import { textBlockWidth } from "@dxos/react-ui-theme";
@@ -73,233 +76,51 @@ var createEditorActionGroup = (id, props, icon) => createMenuItemGroup(id, {
 });
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
-import { StateField } from "@codemirror/state";
-import { Decoration, EditorView } from "@codemirror/view";
-import { isNotFalsy } from "@dxos/util";
-
-// packages/ui/react-ui-editor/src/util/facet.ts
-import { Facet } from "@codemirror/state";
-var singleValueFacet = (defaultValue) => Facet.define({
-  // Called immediately.
-  combine: (providers) => {
-    return providers[0] ?? defaultValue;
-  }
-});
-
-// packages/ui/react-ui-editor/src/util/cursor.ts
-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;
-    };
-  }
-};
-
-// packages/ui/react-ui-editor/src/util/debug.ts
-import { log } from "@dxos/log";
-var __dxlog_file = "/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) {
-      log.catch(err, void 0, {
-        F: __dxlog_file,
-        L: 15,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    }
-  };
-};
-var callbackWrapper = (fn) => (...args) => {
-  try {
-    return fn(...args);
-  } catch (err) {
-    log.catch(err, void 0, {
-      F: __dxlog_file,
-      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) {
-    log("changes", {
-      changes
-    }, {
-      F: __dxlog_file,
-      L: 62,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
-};
-
-// packages/ui/react-ui-editor/src/util/dom.ts
-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 [];
-  }
-};
-
-// packages/ui/react-ui-editor/src/util/react.tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider, Tooltip } from "@dxos/react-ui";
-import { defaultTx } from "@dxos/react-ui-theme";
-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) => {
-  createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
-    tx: defaultTx
-  }, node));
-  return root;
-};
-var createRenderer = (Component) => (el, props) => {
-  renderRoot(el, /* @__PURE__ */ React.createElement(ThemeProvider, {
-    tx: defaultTx
-  }, /* @__PURE__ */ React.createElement(Tooltip.Provider, null, /* @__PURE__ */ React.createElement(Component, props))));
-};
-
-// packages/ui/react-ui-editor/src/extensions/annotations.ts
+import { RangeSetBuilder } from "@codemirror/state";
+import { Decoration, EditorView, ViewPlugin } from "@codemirror/view";
 var annotationMark = 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
-        });
+var annotations = ({ match } = {}) => {
+  return [
+    ViewPlugin.fromClass(class {
+      constructor() {
+        this.decorations = Decoration.none;
       }
-    }
-    return annotations2;
-  };
-  const annotationsState = StateField.define({
-    create: (state) => {
-      return match(state);
-    },
-    update: (value, tr) => {
-      if (!tr.changes.empty) {
-        return match(tr.state);
+      update(update2) {
+        const builder = new 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();
       }
-      return value;
-    }
-  });
-  return [
-    annotationsState,
-    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(isNotFalsy);
-      return Decoration.set(decorations);
+    }, {
+      decorations: (v) => v.decorations
     }),
-    styles
+    EditorView.theme({
+      ".cm-annotation": {
+        textDecoration: "underline",
+        textDecorationStyle: "wavy",
+        textDecorationColor: "var(--dx-errorText)"
+      }
+    })
   ];
 };
-var styles = EditorView.theme({
-  ".cm-annotation": {
-    textDecoration: "underline",
-    textDecorationStyle: "wavy",
-    textDecorationColor: "var(--dx-error)"
-  }
-});
 
 // packages/ui/react-ui-editor/src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
-var autocomplete = ({ debug, activateOnTyping, override, onSearch } = {}) => {
+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
@@ -308,15 +129,13 @@ var autocomplete = ({ debug, activateOnTyping, override, onSearch } = {}) => {
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      activateOnTyping,
       override,
-      closeOnBlur: !debug,
-      tooltipClass: () => "shadow rounded"
+      activateOnTyping
     })
   ];
   if (onSearch) {
     extensions.push(
-      // TODO(burdon): Optional decoration via addToOptions
+      // TODO(burdon): Optional decoration via addToOptions.
       markdownLanguage.data.of({
         autocomplete: (context) => {
           const match = context.matchBefore(/\w*/);
@@ -336,20 +155,20 @@ var autocomplete = ({ debug, activateOnTyping, override, onSearch } = {}) => {
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
 import { next as A3 } from "@automerge/automerge";
-import { StateField as StateField2 } from "@codemirror/state";
-import { EditorView as EditorView2, ViewPlugin } from "@codemirror/view";
+import { StateField } from "@codemirror/state";
+import { EditorView as EditorView2, ViewPlugin as ViewPlugin2 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
-import { log as log2 } from "@dxos/log";
+import { log } from "@dxos/log";
 import { fromCursor, toCursor } from "@dxos/react-client/echo";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
+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 toCursor(accessor, pos, assoc);
     } catch (err) {
-      log2.catch(err, void 0, {
-        F: __dxlog_file2,
+      log.catch(err, void 0, {
+        F: __dxlog_file,
         L: 15,
         S: void 0,
         C: (f, a) => f(...a)
@@ -361,8 +180,8 @@ var cursorConverter = (accessor) => ({
     try {
       return fromCursor(accessor, cursor);
     } catch (err) {
-      log2.catch(err, void 0, {
-        F: __dxlog_file2,
+      log.catch(err, void 0, {
+        F: __dxlog_file,
         L: 24,
         S: void 0,
         C: (f, a) => f(...a)
@@ -534,12 +353,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);
@@ -570,70 +389,230 @@ var Syncer = class {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-var automerge = (accessor) => {
-  const syncState = StateField2.define({
-    create: () => ({
-      path: accessor.path.slice(),
-      lastHeads: A3.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.
-    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.
-    EditorView2.updateListener.of(({ view, changes }) => {
-      if (!changes.empty) {
-        syncer.reconcile(view, true);
-      }
-    })
-  ];
-};
-
-// packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts
-import { Annotation as Annotation2, RangeSet } from "@codemirror/state";
-import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
-import { Event } from "@dxos/async";
-import { Context } from "@dxos/context";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
+// packages/ui/react-ui-editor/src/util/facet.ts
+import { Facet } from "@codemirror/state";
+var singleValueFacet = (defaultValue) => Facet.define({
+  // Called immediately.
+  combine: (providers) => {
+    return providers[0] ?? defaultValue;
+  }
+});
+
+// packages/ui/react-ui-editor/src/util/cursor.ts
+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;
+    };
+  }
+};
+
+// packages/ui/react-ui-editor/src/util/debug.ts
+import { log as log2 } from "@dxos/log";
+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) {
+      log2.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) {
+    log2.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) {
+    log2("changes", {
+      changes
+    }, {
+      F: __dxlog_file2,
+      L: 62,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+};
+
+// packages/ui/react-ui-editor/src/util/dom.ts
+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 [];
+  }
+};
+
+// packages/ui/react-ui-editor/src/util/react.tsx
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { ThemeProvider, Tooltip } from "@dxos/react-ui";
+import { defaultTx } from "@dxos/react-ui-theme";
+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) => {
+  createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
+    tx: defaultTx
+  }, node));
+  return root;
+};
+var createRenderer = (Component) => (el, props) => {
+  renderRoot(el, /* @__PURE__ */ React.createElement(ThemeProvider, {
+    tx: defaultTx
+  }, /* @__PURE__ */ React.createElement(Tooltip.Provider, null, /* @__PURE__ */ React.createElement(Component, props))));
+};
+
+// packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
+var automerge = (accessor) => {
+  const syncState = StateField.define({
+    create: () => ({
+      path: accessor.path.slice(),
+      lastHeads: A3.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.
+    ViewPlugin2.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.
+    EditorView2.updateListener.of(({ view, changes }) => {
+      if (!changes.empty) {
+        syncer.reconcile(view, true);
+      }
+    })
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts
+import { Annotation as Annotation2, RangeSet } from "@codemirror/state";
+import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin3, WidgetType } from "@codemirror/view";
+import { Event } from "@dxos/async";
+import { Context } from "@dxos/context";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
 var dummyProvider = {
   remoteStateChange: new Event(),
   open: () => {
@@ -649,10 +628,10 @@ var RemoteSelectionChangedAnnotation = Annotation2.define();
 var awareness = (provider = dummyProvider) => {
   return [
     awarenessProvider.of(provider),
-    ViewPlugin2.fromClass(RemoteSelectionsDecorator, {
+    ViewPlugin3.fromClass(RemoteSelectionsDecorator, {
       decorations: (value) => value.decorations
     }),
-    styles2
+    styles
   ];
 };
 var RemoteSelectionsDecorator = class {
@@ -695,7 +674,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;
@@ -710,7 +689,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: Decoration2.mark({
@@ -721,7 +700,7 @@ var RemoteSelectionsDecorator = class {
           })
         });
       } else {
-        decorations.push({
+        decorations2.push({
           from: start,
           to: startLine.from + startLine.length,
           value: Decoration2.mark({
@@ -731,7 +710,7 @@ var RemoteSelectionsDecorator = class {
             class: "cm-collab-selection"
           })
         });
-        decorations.push({
+        decorations2.push({
           from: endLine.from,
           to: end,
           value: Decoration2.mark({
@@ -743,7 +722,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: Decoration2.line({
@@ -755,7 +734,7 @@ var RemoteSelectionsDecorator = class {
           });
         }
       }
-      decorations.push({
+      decorations2.push({
         from: head,
         to: head,
         value: Decoration2.widget({
@@ -765,14 +744,12 @@ var RemoteSelectionsDecorator = class {
         })
       });
     }
-    this.decorations = Decoration2.set(decorations, true);
+    this.decorations = Decoration2.set(decorations2, true);
   }
 };
 var RemoteCaretWidget = class extends WidgetType {
   constructor(_name, _color) {
-    super();
-    this._name = _name;
-    this._color = _color;
+    super(), this._name = _name, this._color = _color;
   }
   toDOM() {
     const span = document.createElement("span");
@@ -804,7 +781,7 @@ var RemoteCaretWidget = class extends WidgetType {
     return true;
   }
 };
-var styles2 = EditorView3.theme({
+var styles = EditorView3.theme({
   ".cm-collab-selection": {},
   ".cm-collab-selectionLine": {
     padding: 0,
@@ -1283,10 +1260,10 @@ var random = (min, max) => {
 import { StateEffect as StateEffect2 } from "@codemirror/state";
 
 // packages/ui/react-ui-editor/src/extensions/command/state.ts
-import { StateField as StateField3 } from "@codemirror/state";
+import { StateField as StateField2 } from "@codemirror/state";
 import { showTooltip } from "@codemirror/view";
 var commandConfig = singleValueFacet();
-var commandState = StateField3.define({
+var commandState = StateField2.define({
   create: () => ({}),
   update: (state, tr) => {
     for (const effect of tr.effects) {
@@ -1395,14 +1372,14 @@ var commandKeyBindings = [
 import { EditorView as EditorView6, keymap as keymap3 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/command/hint.ts
-import { RangeSetBuilder } from "@codemirror/state";
-import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin3, WidgetType as WidgetType2 } from "@codemirror/view";
-var hintViewPlugin = ({ onHint }) => ViewPlugin3.fromClass(class {
+import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
+import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
+var hintViewPlugin = ({ onHint }) => ViewPlugin4.fromClass(class {
   constructor() {
-    this.deco = Decoration3.none;
+    this.decorations = Decoration3.none;
   }
   update(update2) {
-    const builder = new RangeSetBuilder();
+    const builder = new RangeSetBuilder2();
     const cState = update2.view.state.field(commandState, false);
     if (!cState?.tooltip) {
       const selection = update2.view.state.selection.main;
@@ -1411,22 +1388,21 @@ var hintViewPlugin = ({ onHint }) => ViewPlugin3.fromClass(class {
         const hint = onHint();
         if (hint) {
           builder.add(selection.from, selection.to, Decoration3.widget({
-            widget: new CommandHint(hint)
+            widget: new Hint(hint)
           }));
         }
       }
     }
-    this.deco = builder.finish();
+    this.decorations = builder.finish();
   }
 }, {
   provide: (plugin) => [
-    EditorView5.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration3.none)
+    EditorView5.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration3.none)
   ]
 });
-var CommandHint = class extends WidgetType2 {
+var Hint = class extends WidgetType2 {
   constructor(content) {
-    super();
-    this.content = content;
+    super(), this.content = content;
   }
   toDOM() {
     const wrap = document.createElement("span");
@@ -1463,79 +1439,12 @@ var CommandHint = class extends WidgetType2 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/command/menu.ts
-import { ViewPlugin as ViewPlugin4 } from "@codemirror/view";
-var floatingMenu = (options) => ViewPlugin4.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);
-    }
-  }
-});
-
 // packages/ui/react-ui-editor/src/extensions/command/command.ts
 var command = (options = {}) => {
   return [
     keymap3.of(commandKeyBindings),
     commandConfig.of(options),
     commandState,
-    options.renderMenu ? floatingMenu({
-      renderMenu: options.renderMenu
-    }) : [],
     options.onHint ? hintViewPlugin({
       onHint: options.onHint
     }) : [],
@@ -1550,30 +1459,199 @@ var command = (options = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/comments.ts
-import { invertedEffects } from "@codemirror/commands";
-import { StateEffect as StateEffect3, StateField as StateField4 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap5, Decoration as Decoration4, EditorView as EditorView8, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
-import sortBy from "lodash.sortby";
-import { useEffect, useMemo as useMemo2 } from "react";
-import { debounce as debounce2 } from "@dxos/async";
-import { log as log4 } from "@dxos/log";
-import { isNonNullable } from "@dxos/util";
-
-// packages/ui/react-ui-editor/src/extensions/selection.ts
-import { Transaction } from "@codemirror/state";
-import { EditorView as EditorView7, keymap as keymap4 } from "@codemirror/view";
-import { debounce } from "@dxos/async";
-import { invariant as invariant3 } from "@dxos/invariant";
-import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
-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,
+// packages/ui/react-ui-editor/src/extensions/command/menu.ts
+import { EditorView as EditorView7, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+var floatingMenu = (options = {}) => [
+  ViewPlugin5.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);
+      }
+    }
+  }),
+  EditorView7.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
+    }
+  })
+];
+
+// packages/ui/react-ui-editor/src/extensions/command/typeahead.ts
+import { EditorSelection, Prec, RangeSetBuilder as RangeSetBuilder3 } from "@codemirror/state";
+import { Decoration as Decoration4, keymap as keymap4, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
+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: EditorSelection.cursor(selection.from + hint.length)
+    });
+    return true;
+  };
+  return [
+    ViewPlugin6.fromClass(class {
+      constructor() {
+        this.decorations = Decoration4.none;
+      }
+      update(update2) {
+        const builder = new RangeSetBuilder3();
+        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, Decoration4.widget({
+              widget: new Hint(hint)
+            }));
+          }
+        }
+        this.decorations = builder.finish();
+      }
+    }, {
+      decorations: (v) => v.decorations
+    }),
+    // Keys.
+    Prec.highest(keymap4.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);
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/comments.ts
+import { invertedEffects } from "@codemirror/commands";
+import { StateEffect as StateEffect3, StateField as StateField3 } from "@codemirror/state";
+import { hoverTooltip, keymap as keymap6, Decoration as Decoration5, EditorView as EditorView9, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+import sortBy from "lodash.sortby";
+import { useEffect } from "react";
+import { debounce as debounce2 } from "@dxos/async";
+import { log as log4 } from "@dxos/log";
+import { isNonNullable } from "@dxos/util";
+
+// packages/ui/react-ui-editor/src/extensions/selection.ts
+import { Transaction } from "@codemirror/state";
+import { EditorView as EditorView8, keymap as keymap5 } from "@codemirror/view";
+import { debounce } from "@dxos/async";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { isNotFalsy } from "@dxos/util";
+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 ? EditorView7.scrollIntoView(scrollTo, {
+    effects: scrollTo ? EditorView8.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: Transaction.userEvent.of(stateRestoreAnnotation)
@@ -1615,7 +1693,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    EditorView7.updateListener.of(({ view, transactions }) => {
+    EditorView8.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -1638,7 +1716,7 @@ var selectionState = ({ getState, setState } = {}) => {
         }
       }
     }),
-    getState && keymap4.of([
+    getState && keymap5.of([
       {
         key: "ctrl-r",
         run: (view) => {
@@ -1650,7 +1728,7 @@ var selectionState = ({ getState, setState } = {}) => {
         }
       }
     ])
-  ].filter(isNotFalsy2);
+  ].filter(isNotFalsy);
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
@@ -1658,7 +1736,7 @@ var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src
 var setComments = StateEffect3.define();
 var setSelection = StateEffect3.define();
 var setCommentState = StateEffect3.define();
-var commentsState = StateField4.define({
+var commentsState = StateField3.define({
   create: (state) => ({
     id: state.facet(documentId),
     comments: [],
@@ -1696,7 +1774,7 @@ var commentsState = StateField4.define({
     return value;
   }
 });
-var styles3 = EditorView8.theme({
+var styles2 = EditorView9.theme({
   ".cm-comment, .cm-comment-current": {
     margin: "0 -3px",
     padding: "3px",
@@ -1709,23 +1787,23 @@ var styles3 = EditorView8.theme({
     textDecoration: "underline"
   }
 });
-var createCommentMark = (id, isCurrent) => Decoration4.mark({
+var createCommentMark = (id, isCurrent) => Decoration5.mark({
   class: isCurrent ? "cm-comment-current" : "cm-comment",
   attributes: {
     "data-testid": "cm-comment",
     "data-comment-id": id
   }
 });
-var commentsDecorations = EditorView8.decorations.compute([
+var commentsDecorations = EditorView9.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
-  const decorations = sortBy(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
+  const decorations2 = sortBy(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
     const range = comment.range;
     if (!range) {
       log4.warn("Invalid range:", range, {
         F: __dxlog_file7,
-        L: 144,
+        L: 135,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1736,10 +1814,10 @@ var commentsDecorations = EditorView8.decorations.compute([
     const mark = createCommentMark(comment.comment.id, comment.comment.id === current);
     return mark.range(range.from, range.to);
   }).filter(isNonNullable);
-  return Decoration4.set(decorations);
+  return Decoration5.set(decorations2);
 });
 var commentClickedEffect = StateEffect3.define();
-var handleCommentClick = EditorView8.domEventHandlers({
+var handleCommentClick = EditorView9.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -1778,7 +1856,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView8.domEventHandlers({
+    EditorView9.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -1800,7 +1878,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView8.updateListener.of((update2) => {
+    EditorView9.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -1897,11 +1975,11 @@ var comments = (options = {}) => {
     commentsState,
     commentsDecorations,
     handleCommentClick,
-    styles3,
+    styles2,
     //
     // Keymap.
     //
-    options.onCreate && keymap5.of([
+    options.onCreate && keymap6.of([
       {
         key: shortcut,
         run: callbackWrapper(createComment)
@@ -1942,7 +2020,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView8.updateListener.of(({ view, state, changes }) => {
+    EditorView9.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -1974,7 +2052,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView8.updateListener.of(({ view, state }) => {
+    EditorView9.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -2028,7 +2106,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? EditorView8.scrollIntoView(range.from, center ? {
+          needsScroll ? EditorView9.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2039,22 +2117,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 = () => {
@@ -2074,21 +2136,11 @@ var ExternalCommentSync = class {
     this.unsubscribe = subscribe(updateComments);
   }
 };
-var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin5.fromClass(class {
+var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin7.fromClass(class {
   constructor(view) {
     return new ExternalCommentSync(view, id, subscribe, getComments);
   }
 });
-var useCommentState = (state) => {
-  return useMemo2(() => EditorView8.updateListener.of((update2) => {
-    if (update2.docChanged || update2.selectionSet) {
-      state.comment = selectionOverlapsComment(update2.state);
-      state.selection = hasActiveSelection(update2.state);
-    }
-  }), [
-    state
-  ]);
-};
 var useComments = (view, id, comments2) => {
   useEffect(() => {
     if (view) {
@@ -2103,36 +2155,23 @@ var useComments = (view, id, comments2) => {
     }
   });
 };
-var useCommentClickListener = (onCommentClick) => {
-  return useMemo2(() => EditorView8.updateListener.of((update2) => {
-    update2.transactions.forEach((transaction) => {
-      transaction.effects.forEach((effect) => {
-        if (effect.is(commentClickedEffect)) {
-          onCommentClick(effect.value);
-        }
-      });
-    });
-  }), [
-    onCommentClick
-  ]);
-};
 
 // packages/ui/react-ui-editor/src/extensions/debug.ts
 import { syntaxTree } from "@codemirror/language";
-import { StateField as StateField5 } from "@codemirror/state";
+import { StateField as StateField4 } from "@codemirror/state";
 var debugNodeLogger = (log9 = console.log) => {
   const logTokens = (state) => syntaxTree(state).iterate({
     enter: (node) => log9(node.type)
   });
-  return StateField5.define({
+  return StateField4.define({
     create: (state) => logTokens(state),
     update: (_, tr) => logTokens(tr.state)
   });
 };
 
 // packages/ui/react-ui-editor/src/extensions/dnd.ts
-import { dropCursor, EditorView as EditorView9 } from "@codemirror/view";
-var styles4 = EditorView9.theme({
+import { dropCursor, EditorView as EditorView10 } from "@codemirror/view";
+var styles3 = EditorView10.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--dx-accentText)",
     color: "var(--dx-accentText)",
@@ -2144,9 +2183,9 @@ var styles4 = EditorView9.theme({
 });
 var dropFile = (options = {}) => {
   return [
-    styles4,
+    styles3,
     dropCursor(),
-    EditorView9.domEventHandlers({
+    EditorView10.domEventHandlers({
       drop: (event, view) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
@@ -2173,18 +2212,18 @@ import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@cod
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { EditorView as EditorView11, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap6, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
+import { EditorView as EditorView12, ViewPlugin as ViewPlugin8, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap7, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import merge from "lodash.merge";
 import { generateName } from "@dxos/display-name";
 import { log as log5 } from "@dxos/log";
-import { hexToHue, isNotFalsy as isNotFalsy3 } from "@dxos/util";
+import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/focus.ts
-import { StateEffect as StateEffect4, StateField as StateField6 } from "@codemirror/state";
-import { EditorView as EditorView10 } from "@codemirror/view";
+import { StateEffect as StateEffect4, StateField as StateField5 } from "@codemirror/state";
+import { EditorView as EditorView11 } from "@codemirror/view";
 var focusEffect = StateEffect4.define();
-var focusField = StateField6.define({
+var focusField = StateField5.define({
   create: () => false,
   update: (value, tr) => {
     for (const effect of tr.effects) {
@@ -2197,7 +2236,7 @@ var focusField = StateField6.define({
 });
 var focus = [
   focusField,
-  EditorView10.domEventHandlers({
+  EditorView11.domEventHandlers({
     focus: (event, view) => {
       setTimeout(() => view.dispatch({
         effects: focusEffect.of(true)
@@ -2231,8 +2270,8 @@ var theme = {
 };
 
 // packages/ui/react-ui-editor/src/styles/tokens.ts
-import get from "lodash.get";
 import { tokens } from "@dxos/react-ui-theme";
+import { get } from "@dxos/util";
 var getToken = (path, defaultValue) => {
   const value = get(tokens, path, defaultValue);
   return value?.toString() ?? "";
@@ -2355,19 +2394,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",
@@ -2417,7 +2462,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",
@@ -2430,7 +2475,7 @@ var defaultTheme = {
     height: "8px",
     marginRight: "6px !important",
     padding: "2px !important",
-    color: "var(--dx-accentFocusIndicator)"
+    color: "var(--dx-neutralFocusIndicator)"
   },
   ".cm-panel button": {
     "&:hover": {
@@ -2470,10 +2515,10 @@ var createBasicExtensions = (_props) => {
   const props = defaultsDeep2({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    EditorView11.exceptionSink.of((err) => {
+    EditorView12.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
         F: __dxlog_file8,
-        L: 96,
+        L: 98,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2485,18 +2530,18 @@ var createBasicExtensions = (_props) => {
     props.drawSelection && drawSelection({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && EditorView11.editable.of(props.editable),
+    props.editable !== void 0 && EditorView12.editable.of(props.editable),
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),
-    props.lineWrapping && EditorView11.lineWrapping,
+    props.lineWrapping && EditorView12.lineWrapping,
     props.placeholder && placeholder(props.placeholder),
     props.readOnly !== void 0 && EditorState.readOnly.of(props.readOnly),
     props.scrollPastEnd && scrollPastEnd(),
     props.tabSize && EditorState.tabSize.of(props.tabSize),
     // https://codemirror.net/docs/ref/#view.KeyBinding
-    keymap6.of([
+    keymap7.of([
       ...(props.keymap && keymaps[props.keymap]) ?? [],
       // NOTE: Tabs are also configured by markdown extension.
       // https://codemirror.net/docs/ref/#commands.indentWithTab
@@ -2516,28 +2561,33 @@ var createBasicExtensions = (_props) => {
         preventDefault: true,
         run: () => true
       }
-    ].filter(isNotFalsy3))
-  ].filter(isNotFalsy3);
+    ].filter(isNotFalsy2))
+  ].filter(isNotFalsy2);
 };
 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 = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
-    EditorView11.darkTheme.of(themeMode === "dark"),
-    EditorView11.baseTheme(styles5 ? merge({}, defaultTheme, styles5) : defaultTheme),
+    EditorView12.darkTheme.of(themeMode === "dark"),
+    EditorView12.baseTheme(styles4 ? merge({}, defaultTheme, styles4) : defaultTheme),
     // https://github.com/codemirror/theme-one-dark
     _syntaxHighlighting && (themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
-    slots.editor?.className && EditorView11.editorAttributes.of({
+    slots.editor?.className && EditorView12.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView11.contentAttributes.of({
+    slots.content?.className && EditorView12.contentAttributes.of({
       class: slots.content.className
+    }),
+    slots.scroll?.className && ViewPlugin8.fromClass(class {
+      constructor(view) {
+        view.scrollDOM.classList.add(slots.scroll.className);
+      }
     })
-  ].filter(isNotFalsy3);
+  ].filter(isNotFalsy2);
 };
 var createDataExtensions = ({ id, text, space, identity }) => {
   const extensions = [];
@@ -2563,7 +2613,7 @@ var createDataExtensions = ({ id, text, space, identity }) => {
 
 // packages/ui/react-ui-editor/src/extensions/folding.tsx
 import { codeFolding, foldGutter } from "@codemirror/language";
-import { EditorView as EditorView12 } from "@codemirror/view";
+import { EditorView as EditorView13 } from "@codemirror/view";
 import React2 from "react";
 import { Icon } from "@dxos/react-ui";
 var folding = (_props = {}) => [
@@ -2587,7 +2637,7 @@ var folding = (_props = {}) => [
       }));
     }
   }),
-  EditorView12.theme({
+  EditorView13.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
       transition: "opacity 0.3s",
@@ -2599,15 +2649,59 @@ var folding = (_props = {}) => [
   })
 ];
 
+// packages/ui/react-ui-editor/src/extensions/json.ts
+import { json, jsonParseLinter } from "@codemirror/lang-json";
+import { linter } from "@codemirror/lint";
+import Ajv from "ajv";
+var createJsonExtensions = ({ schema } = {}) => {
+  let lintSource = jsonParseLinter();
+  if (schema) {
+    const ajv = new Ajv({
+      allErrors: false
+    });
+    const validate = ajv.compile(schema);
+    lintSource = schemaLinter(validate);
+  }
+  return [
+    json(),
+    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
+      }
+    ];
+  }
+};
+
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView13 } from "@codemirror/view";
+import { EditorView as EditorView14 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView13.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(EditorView14.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(EditorView13.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView14.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -2616,23 +2710,23 @@ var listener = ({ onFocus, onChange }) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { EditorSelection } from "@codemirror/state";
-import { EditorView as EditorView14, keymap as keymap7 } from "@codemirror/view";
-import { useMemo as useMemo3 } from "react";
+import { EditorSelection as EditorSelection2 } from "@codemirror/state";
+import { EditorView as EditorView15, keymap as keymap8 } from "@codemirror/view";
+import { useMemo as useMemo2 } from "react";
 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;
@@ -2737,7 +2831,7 @@ var setStyle = (type, enable) => {
                   to: range.head + found + marker.length
                 }
               ],
-              range: EditorSelection.cursor(range.from - marker.length)
+              range: EditorSelection2.cursor(range.from - marker.length)
             };
           }
         }
@@ -2865,13 +2959,13 @@ var setStyle = (type, enable) => {
             from: range.head,
             insert: marker + marker
           },
-          range: EditorSelection.cursor(range.head + marker.length)
+          range: EditorSelection2.cursor(range.head + marker.length)
         };
       }
       const changeSet = state.changes(changes2.concat(changesAtEnd));
       return {
         changes: changeSet,
-        range: range.empty && !changeSet.empty ? EditorSelection.cursor(range.head + marker.length) : EditorSelection.range(changeSet.mapPos(range.from, 1), changeSet.mapPos(range.to, -1))
+        range: range.empty && !changeSet.empty ? EditorSelection2.cursor(range.head + marker.length) : EditorSelection2.range(changeSet.mapPos(range.from, 1), changeSet.mapPos(range.to, -1))
       };
     });
     dispatch(state.update(changes, {
@@ -3071,7 +3165,7 @@ var addLink = ({ url, image: image2 } = {}) => {
       const changeSet = state.changes(changes2.concat(changesAfter));
       return {
         changes: changeSet,
-        range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0))
+        range: EditorSelection2.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0))
       };
     });
     if (changes.changes.empty) {
@@ -3505,7 +3599,7 @@ var toggleCodeblock = (target) => {
 };
 var formattingKeymap = (_options = {}) => {
   return [
-    keymap7.of([
+    keymap8.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -3706,7 +3800,7 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return useMemo3(() => EditorView14.updateListener.of((update2) => {
+  return useMemo2(() => EditorView15.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
@@ -3715,7 +3809,7 @@ var useFormattingState = (state) => {
   }), []);
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/editorAction.ts
+// packages/ui/react-ui-editor/src/extensions/markdown/action.ts
 var processEditorPayload = (view, { type, data }) => {
   let inlineType, listType;
   switch (type) {
@@ -3771,7 +3865,8 @@ import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lan
 import { syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { lintKeymap } from "@codemirror/lint";
-import { keymap as keymap8 } from "@codemirror/view";
+import { keymap as keymap9 } from "@codemirror/view";
+import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
 import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
@@ -3953,7 +4048,7 @@ var markdownHighlightStyle = (_options = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-var createMarkdownExtensions = ({ themeMode } = {}) => {
+var createMarkdownExtensions = (options = {}) => {
   return [
     // Main extension.
     // https://github.com/codemirror/lang-markdown
@@ -3977,21 +4072,21 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
     }),
     // Custom styles.
     syntaxHighlighting2(markdownHighlightStyle()),
-    keymap8.of([
+    keymap9.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
-      indentWithTab2,
+      options.indentWithTab !== false && indentWithTab2,
       // https://codemirror.net/docs/ref/#commands.defaultKeymap
       ...defaultKeymap2,
       ...completionKeymap2,
       ...lintKeymap
-    ])
+    ].filter(isNotFalsy3))
   ];
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/debug.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { StateField as StateField7 } from "@codemirror/state";
-var debugTree = (cb) => StateField7.define({
+import { StateField as StateField6 } from "@codemirror/state";
+var debugTree = (cb) => StateField6.define({
   create: (state) => cb(convertTreeToJson(state)),
   update: (value, tr) => cb(convertTreeToJson(tr.state))
 });
@@ -4017,17 +4112,17 @@ var convertTreeToJson = (state) => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateEffect as StateEffect5 } from "@codemirror/state";
-import { EditorView as EditorView18, Decoration as Decoration7, WidgetType as WidgetType5, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect5 } from "@codemirror/state";
+import { EditorView as EditorView19, Decoration as Decoration8, WidgetType as WidgetType5, ViewPlugin as ViewPlugin10 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/changes.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { Transaction as Transaction2 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin6 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin9 } from "@codemirror/view";
 var adjustChanges = () => {
-  return ViewPlugin6.fromClass(class {
+  return ViewPlugin9.fromClass(class {
     update(update2) {
       const tree = syntaxTree4(update2.state);
       const adjustments = [];
@@ -4168,13 +4263,13 @@ var getValidUrl = (str) => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { StateField as StateField8 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView15, WidgetType as WidgetType3 } from "@codemirror/view";
+import { StateField as StateField7 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView16, WidgetType as WidgetType3 } from "@codemirror/view";
 var image = (_options = {}) => {
   return [
-    StateField8.define({
+    StateField7.define({
       create: (state) => {
-        return Decoration5.set(buildDecorations(0, state.doc.length, state));
+        return Decoration6.set(buildDecorations(0, state.doc.length, state));
       },
       update: (value, tr) => {
         if (!tr.docChanged && !tr.selection) {
@@ -4197,12 +4292,12 @@ var image = (_options = {}) => {
           add: buildDecorations(from, to, tr.state)
         });
       },
-      provide: (field) => EditorView15.decorations.from(field)
+      provide: (field) => EditorView16.decorations.from(field)
     })
   ];
 };
 var buildDecorations = (from, to, state) => {
-  const decorations = [];
+  const decorations2 = [];
   const cursor = state.selection.main.head;
   syntaxTree5(state).iterate({
     enter: (node) => {
@@ -4215,7 +4310,7 @@ var buildDecorations = (from, to, state) => {
             return;
           }
           preloadImage(url);
-          decorations.push(Decoration5.replace({
+          decorations2.push(Decoration6.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -4225,7 +4320,7 @@ var buildDecorations = (from, to, state) => {
     from,
     to
   });
-  return decorations;
+  return decorations2;
 };
 var preloaded = /* @__PURE__ */ new Set();
 var preloadImage = (url) => {
@@ -4237,8 +4332,7 @@ var preloadImage = (url) => {
 };
 var ImageWidget = class extends WidgetType3 {
   constructor(_url) {
-    super();
-    this._url = _url;
+    super(), this._url = _url;
   }
   eq(other) {
     return this._url === other._url;
@@ -4257,10 +4351,10 @@ var ImageWidget = class extends WidgetType3 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
-import { EditorView as EditorView16 } from "@codemirror/view";
+import { EditorView as EditorView17 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView16.theme({
+var formattingStyles = EditorView17.theme({
   /**
   * Horizontal rule.
   */
@@ -4319,8 +4413,9 @@ var formattingStyles = EditorView16.theme({
   * Task list.
   */
   "& .cm-task": {
-    display: "inline-block",
-    width: `${bulletListIndentationWidth}px`
+    display: "inline-flex",
+    width: `${bulletListIndentationWidth}px`,
+    height: "20px"
   },
   "& .cm-task-checkbox": {
     display: "grid",
@@ -4380,17 +4475,17 @@ var formattingStyles = EditorView16.theme({
 
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField9 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView17, WidgetType as WidgetType4 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField8 } from "@codemirror/state";
+import { Decoration as Decoration7, EditorView as EditorView18, WidgetType as WidgetType4 } from "@codemirror/view";
 var table = (options = {}) => {
-  return StateField9.define({
+  return StateField8.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView17.decorations.from(field)
+    provide: (field) => EditorView18.decorations.from(field)
   });
 };
 var update = (state, _options) => {
-  const builder = new RangeSetBuilder2();
+  const builder = new RangeSetBuilder4();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -4431,12 +4526,12 @@ 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, Decoration6.replace({
+      builder.add(table2.from, table2.to, Decoration7.replace({
         block: true,
         widget: new TableWidget(table2)
       }));
     } else {
-      builder.add(table2.from, table2.to, Decoration6.mark({
+      builder.add(table2.from, table2.to, Decoration7.mark({
         class: "cm-table"
       }));
     }
@@ -4445,8 +4540,7 @@ var update = (state, _options) => {
 };
 var TableWidget = class extends WidgetType4 {
   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();
@@ -4494,9 +4588,7 @@ var HorizontalRuleWidget = class extends WidgetType5 {
 };
 var LinkButton = class extends WidgetType5 {
   constructor(url, render) {
-    super();
-    this.url = url;
-    this.render = render;
+    super(), this.url = url, this.render = render;
   }
   eq(other) {
     return this.url === other.url;
@@ -4512,8 +4604,7 @@ var LinkButton = class extends WidgetType5 {
 };
 var CheckboxWidget = class extends WidgetType5 {
   constructor(_checked) {
-    super();
-    this._checked = _checked;
+    super(), this._checked = _checked;
   }
   eq(other) {
     return this._checked === other._checked;
@@ -4557,9 +4648,7 @@ var CheckboxWidget = class extends WidgetType5 {
 };
 var TextWidget = class extends WidgetType5 {
   constructor(text, className) {
-    super();
-    this.text = text;
-    this.className = className;
+    super(), this.text = text, this.className = className;
   }
   toDOM() {
     const el = document.createElement("span");
@@ -4570,29 +4659,29 @@ var TextWidget = class extends WidgetType5 {
     return el;
   }
 };
-var hide = Decoration7.replace({});
-var blockQuote = Decoration7.line({
+var hide = Decoration8.replace({});
+var blockQuote = Decoration8.line({
   class: "cm-blockquote"
 });
-var fencedCodeLine = Decoration7.line({
+var fencedCodeLine = Decoration8.line({
   class: "cm-code cm-codeblock-line"
 });
-var fencedCodeLineFirst = Decoration7.line({
+var fencedCodeLineFirst = Decoration8.line({
   class: mx2("cm-code cm-codeblock-line", "cm-codeblock-start")
 });
-var fencedCodeLineLast = Decoration7.line({
+var fencedCodeLineLast = Decoration8.line({
   class: mx2("cm-code cm-codeblock-line", "cm-codeblock-end")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
 var commentBlockLineLast = fencedCodeLineLast;
-var horizontalRule = Decoration7.replace({
+var horizontalRule = Decoration8.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = Decoration7.replace({
+var checkedTask = Decoration8.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = Decoration7.replace({
+var uncheckedTask = Decoration8.replace({
   widget: new CheckboxWidget(false)
 });
 var editingRange = (state, range, focus2) => {
@@ -4608,8 +4697,8 @@ var autoHideTags = /* @__PURE__ */ new Set([
   "SuperscriptMark"
 ]);
 var buildDecorations2 = (view, options, focus2) => {
-  const deco = new RangeSetBuilder3();
-  const atomicDeco = new RangeSetBuilder3();
+  const deco = new RangeSetBuilder5();
+  const atomicDeco = new RangeSetBuilder5();
   const { state } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
@@ -4696,7 +4785,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, Decoration7.replace({
+              atomicDeco.add(mark.from, mark.from + len, Decoration8.replace({
                 widget: new TextWidget(num, theme.heading(level))
               }));
             }
@@ -4721,7 +4810,7 @@ var buildDecorations2 = (view, options, focus2) => {
         if (node.from === line.to - 1) {
           return false;
         }
-        deco.add(line.from, line.from, Decoration7.line({
+        deco.add(line.from, line.from, Decoration8.line({
           class: "cm-list-item",
           attributes: {
             style: `padding-left: ${offset}px; text-indent: -${width}px;`
@@ -4738,7 +4827,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, Decoration7.replace({
+        atomicDeco.add(line.from, to, Decoration8.replace({
           widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
         }));
         break;
@@ -4825,7 +4914,7 @@ var buildDecorations2 = (view, options, focus2) => {
           if (!editing) {
             atomicDeco.add(node.from, marks[0].to, hide);
           }
-          deco.add(marks[0].to, marks[1].from, Decoration7.mark({
+          deco.add(marks[0].to, marks[1].from, Decoration8.mark({
             tagName: "a",
             attributes: {
               class: "cm-link",
@@ -4835,7 +4924,7 @@ var buildDecorations2 = (view, options, focus2) => {
             }
           }));
           if (!editing) {
-            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration7.replace({
+            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration8.replace({
               widget: new LinkButton(url, options.renderLinkButton)
             }) : hide);
           }
@@ -4893,7 +4982,7 @@ var buildDecorations2 = (view, options, focus2) => {
 var forceUpdate = StateEffect5.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin7.fromClass(class {
+    ViewPlugin10.fromClass(class {
       constructor(view) {
         ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
       }
@@ -4925,9 +5014,9 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        EditorView18.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
-        EditorView18.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
-        EditorView18.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration7.none)
+        EditorView19.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
+        EditorView19.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
+        EditorView19.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration8.none)
       ]
     }),
     image(),
@@ -4979,58 +5068,773 @@ var linkTooltip = (renderTooltip) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/outliner.ts
-import { syntaxTree as syntaxTree9 } from "@codemirror/language";
-import { StateField as StateField10, EditorState as EditorState2 } from "@codemirror/state";
-import { Decoration as Decoration8, EditorView as EditorView19 } from "@codemirror/view";
-import { log as log6 } from "@dxos/log";
+// packages/ui/react-ui-editor/src/extensions/mention.ts
+import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
+import { log as log6 } from "@dxos/log";
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+var mention = ({ debug, onSearch }) => {
+  return autocompletion2({
+    // TODO(burdon): Not working.
+    activateOnTyping: true,
+    // activateOnTypingDelay: 100,
+    // selectOnOpen: true,
+    closeOnBlur: !debug,
+    // defaultKeymap: false,
+    icons: false,
+    override: [
+      (context) => {
+        log6.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}`
+          }))
+        };
+      }
+    ]
+  });
+};
+
+// packages/ui/react-ui-editor/src/extensions/modes.ts
+import { keymap as keymap10 } from "@codemirror/view";
+import { vim } from "@replit/codemirror-vim";
+import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
+import { Schema } from "effect";
+var EditorViewModes = [
+  "preview",
+  "readonly",
+  "source"
+];
+var EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
+var EditorInputModes = [
+  "default",
+  "vim",
+  "vscode"
+];
+var EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
+var editorInputMode = singleValueFacet({});
+var InputModeExtensions = {
+  default: [],
+  vscode: [
+    // https://github.com/replit/codemirror-vscode-keymap
+    editorInputMode.of({
+      type: "vscode"
+    }),
+    keymap10.of(vscodeKeymap)
+  ],
+  vim: [
+    // https://github.com/replit/codemirror-vim
+    vim(),
+    editorInputMode.of({
+      type: "vim",
+      noTabster: true
+    }),
+    keymap10.of([
+      {
+        key: "Alt-Escape",
+        run: (view) => {
+          view.dom.parentElement?.focus();
+          return true;
+        }
+      }
+    ])
+  ]
+};
+
+// packages/ui/react-ui-editor/src/extensions/outliner/commands.ts
+import { indentMore } from "@codemirror/commands";
+import { getIndentUnit } from "@codemirror/language";
+import { EditorSelection as EditorSelection3 } from "@codemirror/state";
+import { keymap as keymap11 } from "@codemirror/view";
+
+// packages/ui/react-ui-editor/src/extensions/outliner/selection.ts
+import { Compartment, Facet as Facet3 } from "@codemirror/state";
+
+// packages/ui/react-ui-editor/src/extensions/outliner/tree.ts
+import { syntaxTree as syntaxTree9 } from "@codemirror/language";
+import { StateField as StateField9 } from "@codemirror/state";
+import { Facet as Facet2 } from "@codemirror/state";
+import { invariant as invariant5 } from "@dxos/invariant";
+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 = Facet2.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 = [];
+    syntaxTree9(state).iterate({
+      enter: (node) => {
+        switch (node.name) {
+          case "Document": {
+            tree = new Tree(node.node);
+            current = tree;
+            break;
+          }
+          case "BulletList": {
+            invariant5(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": {
+            invariant5(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": {
+            invariant5(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": {
+            invariant5(current, void 0, {
+              F: __dxlog_file11,
+              L: 276,
+              S: void 0,
+              A: [
+                "current",
+                ""
+              ]
+            });
+            current.type = "task";
+            break;
+          }
+          case "TaskMarker": {
+            invariant5(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") {
+          invariant5(parent, void 0, {
+            F: __dxlog_file11,
+            L: 289,
+            S: void 0,
+            A: [
+              "parent",
+              ""
+            ]
+          });
+          prevSiblings[level--] = void 0;
+          parent = parent.parent;
+        }
+      }
+    });
+    invariant5(tree, void 0, {
+      F: __dxlog_file11,
+      L: 296,
+      S: void 0,
+      A: [
+        "tree",
+        ""
+      ]
+    });
+    return tree;
+  };
+  return [
+    StateField9.define({
+      create: (state) => {
+        return buildTree(state);
+      },
+      update: (value, tr) => {
+        if (!tr.docChanged) {
+          return value;
+        }
+        return buildTree(tr.state);
+      },
+      provide: (field) => treeFacet.from(field)
+    })
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/outliner/selection.ts
+var getSelection = (state) => state.selection.main;
+var selectionEquals = (a, b) => a.length === b.length && a.every((i) => b.includes(i));
+var selectionFacet = Facet3.define({
+  combine: (values) => values[0]
+});
+var selectionCompartment = new 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;
+};
+
+// packages/ui/react-ui-editor/src/extensions/outliner/commands.ts
+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) {
+      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 = 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: EditorSelection3.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: EditorSelection3.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: EditorSelection3.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(getIndentUnit(view.state) * current.level);
+    view.dispatch({
+      changes: [
+        {
+          from: current.lineRange.from,
+          to: current.contentRange.from,
+          insert: indent + (type === "task" ? "- [ ] " : "- ")
+        }
+      ]
+    });
+  }
+  return true;
+};
+var commands = () => keymap11.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: EditorSelection3.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: EditorSelection3.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
+  }
+]);
+
+// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
+import { Prec as Prec2 } from "@codemirror/state";
+import { Decoration as Decoration9, EditorView as EditorView20, ViewPlugin as ViewPlugin12 } from "@codemirror/view";
 import { mx as mx3 } from "@dxos/react-ui-theme";
-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
-  };
+
+// packages/ui/react-ui-editor/src/extensions/outliner/editor.ts
+import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
+import { ViewPlugin as ViewPlugin11 } from "@codemirror/view";
+import { log as log7 } from "@dxos/log";
+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 ViewPlugin11.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: EditorSelection4.cursor(insert.length)
+          });
+        });
+      }
+    }
+  });
 };
-var outliner = () => [
+var editor = () => [
+  initialize(),
   EditorState2.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: EditorSelection4.cursor(currentItem.contentRange.from)
               }
             ];
+          } else {
+            if (currentItem.index < prevItem.index) {
+              return [
+                {
+                  selection: EditorSelection4.cursor(currentItem.contentRange.to)
+                }
+              ];
+            } else if (currentItem.index > prevItem.index) {
+              return [
+                {
+                  selection: EditorSelection4.cursor(currentItem.contentRange.from)
+                }
+              ];
+            } else {
+              if (current < prev) {
+                if (currentItem.index === 0) {
+                  return [];
+                } else {
+                  return [
+                    {
+                      selection: EditorSelection4.cursor(currentItem.lineRange.from - 1)
+                    }
+                  ];
+                }
+              } else {
+                return [
+                  {
+                    selection: EditorSelection4.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) {
-          log6.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
@@ -5042,24 +5846,9 @@ var outliner = () => [
             const line2 = tr.state.doc.lineAt(fromA);
             if (line2.text.match(/^\s*$/)) {
               if (line2.from === 0) {
-                log6.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 {
-                log6.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
@@ -5070,44 +5859,17 @@ var outliner = () => [
           }
           return;
         }
-        if (insert.length === indentLevel) {
-          if (line.number === 1) {
-            log6.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) {
-              log6.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;
         }
-        log6.info("change", {
+        log7("change", {
+          item,
           line: {
             from: line.from,
             to: line.to
           },
-          start,
           a: [
             fromA,
             toA
@@ -5121,200 +5883,150 @@ 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) {
+      log7("modified,", {
+        changes
+      }, {
+        F: __dxlog_file12,
+        L: 175,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       return [
         {
           changes
         }
       ];
+    } else if (cancel) {
+      log7("cancel", void 0, {
+        F: __dxlog_file12,
+        L: 178,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      return [];
     }
     return tr;
+  })
+];
+
+// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
+var outliner = (options = {}) => [
+  // Commands.
+  Prec2.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.
+  EditorView20.contentAttributes.of({
+    class: "is-full !mr-[3rem]"
+  })
+];
+var decorations = (options) => [
+  ViewPlugin12.fromClass(class {
+    constructor(view) {
+      this.decorations = Decoration9.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(Decoration9.line({
+            class: mx3("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 = Decoration9.set(decorations2);
+    }
+  }, {
+    decorations: (v) => v.decorations
   }),
-  StateField10.define({
-    create: (state) => {
-      return Decoration8.set(buildDecorations3(0, state.doc.length, state));
+  // Theme.
+  EditorView20.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) => EditorView19.decorations.from(field)
-  }),
-  // TODO(burdon): Increase indent padding by configuring decorate extension.
-  // TODO(burdon): Hover to select entire group.
-  EditorView19.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 = [];
-  syntaxTree9(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(Decoration8.line({
-          class: mx3("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(Decoration8.line({
-            class: mx3("cm-list-item-continuation")
-          }).range(i, i));
-        }
-        if (lineStart.number !== lineEnd.number) {
-          decorations.push(Decoration8.line({
-            class: mx3("cm-list-item-end")
-          }).range(lineEnd.from, lineEnd.from));
-        }
-      }
+    ".cm-list-item-focused": {
+      borderColor: "var(--dx-accentFocusIndicator)"
     }
-  });
-  return decorations;
-};
-
-// packages/ui/react-ui-editor/src/extensions/mention.ts
-import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
-import { log as log7 } from "@dxos/log";
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
-var mention = ({ debug, onSearch }) => {
-  return autocompletion2({
-    // TODO(burdon): Not working.
-    activateOnTyping: true,
-    // activateOnTypingDelay: 100,
-    // selectOnOpen: true,
-    closeOnBlur: !debug,
-    // defaultKeymap: false,
-    icons: false,
-    override: [
-      (context) => {
-        log7.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}`
-          }))
-        };
-      }
-    ]
-  });
-};
-
-// packages/ui/react-ui-editor/src/extensions/modes.ts
-import { keymap as keymap9 } from "@codemirror/view";
-import { vim } from "@replit/codemirror-vim";
-import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
-import { Schema } from "effect";
-var EditorViewModes = [
-  "preview",
-  "readonly",
-  "source"
-];
-var EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
-var EditorInputModes = [
-  "default",
-  "vim",
-  "vscode"
+  }))
 ];
-var EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
-var editorInputMode = singleValueFacet({});
-var InputModeExtensions = {
-  default: [],
-  vscode: [
-    // https://github.com/replit/codemirror-vscode-keymap
-    editorInputMode.of({
-      type: "vscode"
-    }),
-    keymap9.of(vscodeKeymap)
-  ],
-  vim: [
-    // https://github.com/replit/codemirror-vim
-    vim(),
-    editorInputMode.of({
-      type: "vim",
-      noTabster: true
-    }),
-    keymap9.of([
-      {
-        key: "Alt-Escape",
-        run: (view) => {
-          view.dom.parentElement?.focus();
-          return true;
-        }
-      }
-    ])
-  ]
-};
 
 // packages/ui/react-ui-editor/src/extensions/preview/preview.ts
 import "@dxos/lit-ui/dx-ref-tag.pcss";
 import { syntaxTree as syntaxTree10 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField11 } from "@codemirror/state";
-import { Decoration as Decoration9, EditorView as EditorView20, WidgetType as WidgetType6 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField10 } from "@codemirror/state";
+import { Decoration as Decoration10, EditorView as EditorView21, WidgetType as WidgetType6 } from "@codemirror/view";
 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"
-    StateField11.define({
-      create: (state) => buildDecorations4(state, options),
-      update: (_, tr) => buildDecorations4(tr.state, options),
+    StateField10.define({
+      create: (state) => buildDecorations3(state, options),
+      update: (_, tr) => buildDecorations3(tr.state, options),
       provide: (field) => [
-        EditorView20.decorations.from(field),
-        EditorView20.atomicRanges.of((view) => view.state.field(field))
+        EditorView21.decorations.from(field),
+        EditorView21.atomicRanges.of((view) => view.state.field(field))
       ]
     }),
-    EditorView20.theme({
+    EditorView21.theme({
       ".cm-preview-block": {
         marginLeft: "-1rem",
         marginRight: "-1rem",
@@ -5339,8 +6051,8 @@ var getLinkRef = (state, node) => {
     };
   }
 };
-var buildDecorations4 = (state, options) => {
-  const builder = new RangeSetBuilder4();
+var buildDecorations3 = (state, options) => {
+  const builder = new RangeSetBuilder6();
   syntaxTree10(state).iterate({
     enter: (node) => {
       switch (node.name) {
@@ -5351,7 +6063,7 @@ var buildDecorations4 = (state, options) => {
         case "Link": {
           const link = getLinkRef(state, node.node);
           if (link) {
-            builder.add(node.from, node.to, Decoration9.replace({
+            builder.add(node.from, node.to, Decoration10.replace({
               widget: new PreviewInlineWidget(options, link)
             }));
           }
@@ -5364,7 +6076,7 @@ var buildDecorations4 = (state, options) => {
         case "Image": {
           const link = getLinkRef(state, node.node);
           if (options.renderBlock && link) {
-            builder.add(node.from, node.to, Decoration9.replace({
+            builder.add(node.from, node.to, Decoration10.replace({
               block: true,
               // atomic: true,
               widget: new PreviewBlockWidget(options, link)
@@ -5379,9 +6091,7 @@ var buildDecorations4 = (state, options) => {
 };
 var PreviewInlineWidget = class extends WidgetType6 {
   constructor(_options, _link) {
-    super();
-    this._options = _options;
-    this._link = _link;
+    super(), this._options = _options, this._link = _link;
   }
   // override ignoreEvent() {
   //   return false;
@@ -5392,15 +6102,13 @@ var PreviewInlineWidget = class extends WidgetType6 {
   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 WidgetType6 {
   constructor(_options, _link) {
-    super();
-    this._options = _options;
-    this._link = _link;
+    super(), this._options = _options, this._link = _link;
   }
   // override ignoreEvent() {
   //   return true;
@@ -5457,7 +6165,7 @@ var PreviewBlockWidget = class extends WidgetType6 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap10 } from "@codemirror/view";
+import { keymap as keymap12 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -5467,7 +6175,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap10.of([
+    keymap12.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -5571,30 +6279,6 @@ var createBlocks = (state, getView) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/comment.ts
-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"
-    }
-  ]
-});
-
 // packages/ui/react-ui-editor/src/components/EditorToolbar/formatting.ts
 var formats = {
   strong: "ph--text-b--regular",
@@ -5835,125 +6519,287 @@ var createViewMode = (state, onViewModeChange) => {
 };
 
 // packages/ui/react-ui-editor/src/defaults.ts
-import { EditorView as EditorView21 } from "@codemirror/view";
+import { EditorView as EditorView22 } from "@codemirror/view";
 import { mx as mx4 } from "@dxos/react-ui-theme";
-var margin = "!mt-[1rem]";
 var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
-var editorContent = mx4(margin, editorWidth);
-var editorFullWidth = mx4(margin);
-var editorGutter = EditorView21.theme({
-  // Match margin from content.
-  // Gutter = 2rem + 1rem margin.
+var editorSlots = {
+  scroll: {
+    className: "pbs-2"
+  },
+  content: {
+    className: editorWidth
+  }
+};
+var editorGutter = EditorView22.theme({
   ".cm-gutters": {
-    marginTop: "1rem",
     paddingRight: "1rem"
   }
 });
-var editorMonospace = EditorView21.theme({
+var editorMonospace = EditorView22.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) => mx4("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) => mx4("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) => mx4("relative z-[1] flex is-full bg-toolbarSurface border-be border-subduedSeparator", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
 
 // packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
 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 = 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 Rx.make((get2) => {
+    const nodes = [];
+    const edges = [];
+    if (features.headings ?? true) {
+      const headings2 = get2(rxFromSignal(() => createHeadings(state, getView)));
+      nodes.push(...headings2.nodes);
+      edges.push(...headings2.edges);
+    }
+    if (features.formatting ?? true) {
+      const formatting = get2(rxFromSignal(() => createFormatting(state, getView)));
+      nodes.push(...formatting.nodes);
+      edges.push(...formatting.edges);
+    }
+    if (features.lists ?? true) {
+      const lists = get2(rxFromSignal(() => createLists(state, getView)));
+      nodes.push(...lists.nodes);
+      edges.push(...lists.edges);
+    }
+    if (features.blocks ?? true) {
+      const blocks = get2(rxFromSignal(() => createBlocks(state, getView)));
+      nodes.push(...blocks.nodes);
+      edges.push(...blocks.edges);
+    }
+    if (features.image) {
+      const image2 = get2(rxFromSignal(() => createImageUpload(features.image)));
+      nodes.push(...image2.nodes);
+      edges.push(...image2.edges);
+    }
+    const editorToolbarGap = 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(rxFromSignal(() => createSearch(getView)));
+      nodes.push(...search.nodes);
+      edges.push(...search.edges);
+    }
+    if (features.viewMode) {
+      const viewMode = get2(rxFromSignal(() => createViewMode(state, features.viewMode)));
+      nodes.push(...viewMode.nodes);
+      edges.push(...viewMode.edges);
+    }
+    return {
+      nodes,
+      edges
+    };
+  });
 };
 var useEditorToolbarActionGraph = (props) => {
-  const menuCreator = useCallback(() => createToolbar(props), [
-    props
+  const menuCreator = useMemo3(() => 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 useMenuActions(menuCreator);
 };
 var EditorToolbar = /* @__PURE__ */ memo(({ classNames, attendableId, role, ...props }) => {
-  const menuProps = useEditorToolbarActionGraph(props);
-  return /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
-    className: stackItemContentToolbarClassNames(role)
-  }, /* @__PURE__ */ React3.createElement(ElevationProvider, {
-    elevation: role === "section" ? "positioned" : "base"
-  }, /* @__PURE__ */ React3.createElement(MenuProvider, {
-    ...menuProps,
-    attendableId
-  }, /* @__PURE__ */ React3.createElement(ToolbarMenu, {
-    classNames: [
-      textBlockWidth,
-      classNames
-    ]
-  }))));
+  var _effect = _useSignals();
+  try {
+    const menuProps = useEditorToolbarActionGraph(props);
+    return /* @__PURE__ */ React3.createElement("div", {
+      role: "none",
+      className: stackItemContentToolbarClassNames(role)
+    }, /* @__PURE__ */ React3.createElement(ElevationProvider, {
+      elevation: role === "section" ? "positioned" : "base"
+    }, /* @__PURE__ */ React3.createElement(MenuProvider, {
+      ...menuProps,
+      attendableId
+    }, /* @__PURE__ */ React3.createElement(ToolbarMenu, {
+      classNames: [
+        textBlockWidth,
+        classNames
+      ]
+    }))));
+  } finally {
+    _effect.f();
+  }
 });
 
+// packages/ui/react-ui-editor/src/components/Popover/RefPopover.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import { createContext } from "@radix-ui/react-context";
+import React4, { useRef, useState, useEffect as useEffect2, useCallback } from "react";
+import { addEventListener } from "@dxos/async";
+import { Popover } from "@dxos/react-ui";
+var customEventOptions = {
+  capture: true,
+  passive: false
+};
+var REF_POPOVER = "RefPopover";
+var [RefPopoverContextProvider, useRefPopover] = createContext(REF_POPOVER, {});
+var RefPopoverProvider = ({ children, onLookup }) => {
+  var _effect = _useSignals2();
+  try {
+    const trigger = useRef(null);
+    const [value, setValue] = useState({});
+    const [rootRef, setRootRef] = useState(null);
+    const [open, setOpen] = useState(false);
+    const handleDxRefTagActivate = 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
+    ]);
+    useEffect2(() => {
+      return rootRef ? addEventListener(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions) : void 0;
+    }, [
+      rootRef
+    ]);
+    return /* @__PURE__ */ React4.createElement(RefPopoverContextProvider, {
+      pending: value.pending,
+      link: value.link,
+      target: value.target
+    }, /* @__PURE__ */ React4.createElement(Popover.Root, {
+      open,
+      onOpenChange: setOpen
+    }, /* @__PURE__ */ React4.createElement(Popover.VirtualTrigger, {
+      virtualRef: trigger
+    }), /* @__PURE__ */ React4.createElement("div", {
+      role: "none",
+      className: "contents",
+      ref: setRootRef
+    }, children)));
+  } finally {
+    _effect.f();
+  }
+};
+var RefPopover = {
+  Provider: RefPopoverProvider
+};
+
+// packages/ui/react-ui-editor/src/components/Popover/RefDropdownMenu.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import { createContext as createContext2 } from "@radix-ui/react-context";
+import React5, { useRef as useRef2, useState as useState2, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+import { addEventListener as addEventListener2 } from "@dxos/async";
+import { DropdownMenu } from "@dxos/react-ui";
+var customEventOptions2 = {
+  capture: true,
+  passive: false
+};
+var REF_DROPDOWN_MENU = "RefDropdownMenu";
+var [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext2(REF_DROPDOWN_MENU, {});
+var RefDropdownMenuProvider = ({ children, onLookup }) => {
+  var _effect = _useSignals3();
+  try {
+    const trigger = useRef2(null);
+    const [value, setValue] = useState2({});
+    const [rootRef, setRootRef] = useState2(null);
+    const [open, setOpen] = useState2(false);
+    const handleDxRefTagActivate = useCallback2((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
+    ]);
+    useEffect3(() => {
+      return rootRef ? addEventListener2(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2) : void 0;
+    }, [
+      rootRef
+    ]);
+    return /* @__PURE__ */ React5.createElement(RefDropdownMenuContextProvider, {
+      pending: value.pending,
+      link: value.link,
+      target: value.target
+    }, /* @__PURE__ */ React5.createElement(DropdownMenu.Root, {
+      open,
+      onOpenChange: setOpen
+    }, /* @__PURE__ */ React5.createElement(DropdownMenu.VirtualTrigger, {
+      virtualRef: trigger
+    }), /* @__PURE__ */ React5.createElement("div", {
+      role: "none",
+      className: "contents",
+      ref: setRootRef
+    }, children)));
+  } finally {
+    _effect.f();
+  }
+};
+var RefDropdownMenu = {
+  Provider: RefDropdownMenuProvider
+};
+
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView22 } from "@codemirror/view";
+import { EditorView as EditorView23 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo4, useRef, useState } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
 import { log as log8 } from "@dxos/log";
 import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
-var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+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 } = useMemo4(() => getProviderValue(props), deps ?? []);
-  const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
-  const [view, setView] = useState();
-  const parentRef = useRef(null);
-  useEffect2(() => {
+  const [instanceId] = useState3(() => `text-editor-${++instanceCount}`);
+  const [view, setView] = useState3();
+  const parentRef = useRef3(null);
+  useEffect4(() => {
     let view2;
     if (parentRef.current) {
       log8("create", {
@@ -5961,7 +6807,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)
@@ -5985,9 +6831,9 @@ var useTextEditor = (props = {}, deps = []) => {
           id && documentId.of(id),
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
-          EditorView22.exceptionSink.of((err) => {
+          EditorView23.exceptionSink.of((err) => {
             log8.catch(err, void 0, {
-              F: __dxlog_file12,
+              F: __dxlog_file13,
               L: 98,
               S: void 0,
               C: (f, a) => f(...a)
@@ -5995,10 +6841,10 @@ var useTextEditor = (props = {}, deps = []) => {
           })
         ].filter(isNotFalsy4)
       });
-      view2 = new EditorView22({
+      view2 = new EditorView23({
         parent: parentRef.current,
         state,
-        scrollTo: scrollTo ? EditorView22.scrollIntoView(scrollTo, {
+        scrollTo: scrollTo ? EditorView23.scrollIntoView(scrollTo, {
           yMargin: 96
         }) : void 0,
         dispatchTransactions: debug ? debugDispatcher : void 0
@@ -6019,7 +6865,7 @@ var useTextEditor = (props = {}, deps = []) => {
       log8("destroy", {
         id
       }, {
-        F: __dxlog_file12,
+        F: __dxlog_file13,
         L: 135,
         S: void 0,
         C: (f, a) => f(...a)
@@ -6027,7 +6873,7 @@ var useTextEditor = (props = {}, deps = []) => {
       view2?.destroy();
     };
   }, deps);
-  useEffect2(() => {
+  useEffect4(() => {
     if (view) {
       if (scrollTo || selection) {
         if (selection && selection.anchor > view.state.doc.length) {
@@ -6036,7 +6882,7 @@ var useTextEditor = (props = {}, deps = []) => {
             scrollTo,
             selection
           }, {
-            F: __dxlog_file12,
+            F: __dxlog_file13,
             L: 144,
             S: void 0,
             C: (f, a) => f(...a)
@@ -6054,7 +6900,7 @@ var useTextEditor = (props = {}, deps = []) => {
     scrollTo,
     selection
   ]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (view && autoFocus) {
       view.focus();
     }
@@ -6068,7 +6914,7 @@ var useTextEditor = (props = {}, deps = []) => {
       Escape: view?.state.facet(editorInputMode).noTabster
     }
   });
-  const handleKeyUp = useCallback2((event) => {
+  const handleKeyUp = useCallback3((event) => {
     const { key, target, currentTarget } = event;
     if (target === currentTarget) {
       switch (key) {
@@ -6097,15 +6943,18 @@ export {
   EditorInputModes,
   EditorState4 as EditorState,
   EditorToolbar,
-  EditorView23 as EditorView,
+  EditorView24 as EditorView,
   EditorViewMode,
   EditorViewModes,
   Inline,
   InputModeExtensions,
   List,
+  RefDropdownMenu,
+  RefPopover,
   RemoteSelectionsDecorator,
   SpaceAwarenessProvider,
   TextKind,
+  Tree,
   addBlockquote,
   addCodeblock,
   addLink,
@@ -6123,6 +6972,8 @@ export {
   closeEffect,
   command,
   commandKeyBindings,
+  commands,
+  commentClickedEffect,
   comments,
   commentsState,
   convertTreeToJson,
@@ -6135,6 +6986,7 @@ export {
   createEditorStateTransaction,
   createElement,
   createExternalCommentSync,
+  createJsonExtensions,
   createMarkdownExtensions,
   createRenderer,
   createThemeExtensions,
@@ -6143,35 +6995,46 @@ export {
   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,
-  keymap11 as keymap,
+  itemToJSON,
+  keymap13 as keymap,
   linkTooltip,
+  listItemToString,
   listener,
   logChanges,
   markdownHighlightStyle,
   markdownTags,
   markdownTagsExtensions,
+  matchCompletion,
   mention,
+  moveItemDown,
+  moveItemUp,
   openCommand,
   openEffect,
   outliner,
+  outlinerTree,
   overlap,
   preventNewline,
   preview,
@@ -6183,7 +7046,6 @@ export {
   removeStyle,
   renderRoot,
   scrollThreadIntoView,
-  selectionOverlapsComment,
   selectionState,
   setBlockquote,
   setComments,
@@ -6193,6 +7055,7 @@ export {
   singleValueFacet,
   stackItemContentEditorClassNames,
   stackItemContentToolbarClassNames,
+  staticCompletion,
   table,
   tags2 as tags,
   textRange,
@@ -6204,13 +7067,17 @@ export {
   toggleStrikethrough,
   toggleStrong,
   toggleStyle,
+  toggleTask,
   translations_default as translations,
+  traverse,
+  treeFacet,
+  typeahead,
   typewriter,
-  useCommentClickListener,
-  useCommentState,
   useComments,
   useEditorToolbarState,
   useFormattingState,
+  useRefDropdownMenu,
+  useRefPopover,
   useTextEditor,
   wrapWithCatch
 };