@dxos/react-ui-editor 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/dist/lib/browser/index.mjs

@@ -42,39 +42,27 @@ var translations = [
 
 // src/index.ts
 import { EditorState as EditorState4 } from "@codemirror/state";
-import { EditorView as EditorView30, keymap as keymap13 } from "@codemirror/view";
+import { EditorView as EditorView33, keymap as keymap15 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
 // src/components/Editor/Editor.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import { Transaction as Transaction6 } from "@codemirror/state";
-import { EditorView as EditorView29 } from "@codemirror/view";
+import { Transaction as Transaction5 } from "@codemirror/state";
+import { EditorView as EditorView32 } from "@codemirror/view";
 import React4, { forwardRef, useEffect as useEffect4, useImperativeHandle } from "react";
-import { mx as mx6 } from "@dxos/react-ui-theme";
+import { mx as mx7 } from "@dxos/react-ui-theme";
 
 // src/extensions/annotations.ts
 import { RangeSetBuilder } from "@codemirror/state";
 import { Decoration, EditorView, ViewPlugin } from "@codemirror/view";
-function _define_property(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var annotationMark = Decoration.mark({
   class: "cm-annotation"
 });
 var annotations = ({ match } = {}) => {
   return [
     ViewPlugin.fromClass(class {
+      decorations = Decoration.none;
       update(update2) {
         const builder = new RangeSetBuilder();
         if (match) {
@@ -91,9 +79,6 @@ var annotations = ({ match } = {}) => {
         }
         this.decorations = builder.finish();
       }
-      constructor() {
-        _define_property(this, "decorations", Decoration.none);
-      }
     }, {
       decorations: (v) => v.decorations
     }),
@@ -110,21 +95,13 @@ var annotations = ({ match } = {}) => {
 // src/extensions/autocomplete/autocomplete.ts
 import { Prec } from "@codemirror/state";
 import { Decoration as Decoration2, EditorView as EditorView2, ViewPlugin as ViewPlugin2, WidgetType, keymap } from "@codemirror/view";
-function _define_property2(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var autocomplete = ({ fireIfEmpty, onSubmit, onSuggest, onCancel } = {}) => {
   const suggest = ViewPlugin2.fromClass(class {
+    _decorations;
+    _currentSuggestion = null;
+    constructor(view) {
+      this._decorations = this.computeDecorations(view);
+    }
     update(update2) {
       if (update2.docChanged || update2.selectionSet) {
         this._decorations = this.computeDecorations(update2.view);
@@ -169,11 +146,6 @@ var autocomplete = ({ fireIfEmpty, onSubmit, onSuggest, onCancel } = {}) => {
       });
       return true;
     }
-    constructor(view) {
-      _define_property2(this, "_decorations", void 0);
-      _define_property2(this, "_currentSuggestion", null);
-      this._decorations = this.computeDecorations(view);
-    }
   }, {
     decorations: (v) => v._decorations
   });
@@ -260,18 +232,19 @@ var autocomplete = ({ fireIfEmpty, onSubmit, onSuggest, onCancel } = {}) => {
   ];
 };
 var InlineSuggestionWidget = class extends WidgetType {
+  suffix;
+  constructor(suffix) {
+    super(), this.suffix = suffix;
+  }
+  eq(other) {
+    return this.suffix === other.suffix;
+  }
   toDOM() {
     const span = document.createElement("span");
     span.textContent = this.suffix;
     span.className = "cm-inline-suggestion";
     return span;
   }
-  eq(other) {
-    return other.suffix === this.suffix;
-  }
-  constructor(suffix) {
-    super(), _define_property2(this, "suffix", void 0), this.suffix = suffix;
-  }
 };
 
 // src/extensions/autocomplete/match.ts
@@ -311,46 +284,33 @@ var singleValueFacet = (defaultValue) => Facet.define({
 });
 
 // src/util/cursor.ts
-function _define_property3(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
 var defaultCursorConverter = {
   toCursor: (position) => position.toString(),
   fromCursor: (cursor2) => parseInt(cursor2)
 };
-var Cursor = class {
+var Cursor = class _Cursor {
+  static converter = singleValueFacet(defaultCursorConverter);
+  static 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 getRangeFromCursor = (state, cursor2) => {
+    const cursorConverter2 = state.facet(_Cursor.converter);
+    const parts = cursor2.split(":");
+    const from = cursorConverter2.fromCursor(parts[0]);
+    const to = cursorConverter2.fromCursor(parts[1]);
+    return from !== void 0 && to !== void 0 ? {
+      from,
+      to
+    } : void 0;
+  };
 };
-_define_property3(Cursor, "converter", singleValueFacet(defaultCursorConverter));
-_define_property3(Cursor, "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(":");
-});
-_define_property3(Cursor, "getRangeFromCursor", (state, cursor2) => {
-  const cursorConverter2 = state.facet(Cursor.converter);
-  const parts = cursor2.split(":");
-  const from = cursorConverter2.fromCursor(parts[0]);
-  const to = cursorConverter2.fromCursor(parts[1]);
-  return from !== void 0 && to !== void 0 ? {
-    from,
-    to
-  } : void 0;
-});
 
 // src/util/decorations.ts
 var decorationSetToArray = (deco) => {
@@ -474,21 +434,10 @@ var createRenderer = (Component) => (el, props) => {
 };
 
 // src/extensions/autocomplete/placeholder.ts
-function _define_property4(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var placeholder = ({ content, delay = 3e3 }) => {
   const plugin = ViewPlugin3.fromClass(class {
+    _timeout;
+    _decorations = Decoration3.none;
     update(update2) {
       if (this._timeout) {
         window.clearTimeout(this._timeout);
@@ -515,10 +464,6 @@ var placeholder = ({ content, delay = 3e3 }) => {
         clearTimeout(this._timeout);
       }
     }
-    constructor() {
-      _define_property4(this, "_timeout", void 0);
-      _define_property4(this, "_decorations", Decoration3.none);
-    }
   }, {
     provide: (plugin2) => {
       return [
@@ -534,6 +479,10 @@ var placeholder = ({ content, delay = 3e3 }) => {
   ] : plugin;
 };
 var PlaceholderWidget = class extends WidgetType2 {
+  content;
+  constructor(content) {
+    super(), this.content = content;
+  }
   toDOM(view) {
     const wrap = document.createElement("span");
     wrap.className = "cm-placeholder";
@@ -549,13 +498,13 @@ var PlaceholderWidget = class extends WidgetType2 {
     }
     const style = getComputedStyle(dom.parentNode);
     const rect = flattenRect(rects[0], style.direction !== "rtl");
-    const lineHeight2 = parseInt(style.lineHeight);
-    if (rect.bottom - rect.top > lineHeight2 * 1.5) {
+    const lineHeight = parseInt(style.lineHeight);
+    if (rect.bottom - rect.top > lineHeight * 1.5) {
       return {
         left: rect.left,
         right: rect.right,
         top: rect.top,
-        bottom: rect.top + lineHeight2
+        bottom: rect.top + lineHeight
       };
     }
     return rect;
@@ -563,27 +512,11 @@ var PlaceholderWidget = class extends WidgetType2 {
   ignoreEvent() {
     return false;
   }
-  constructor(content) {
-    super(), _define_property4(this, "content", void 0), this.content = content;
-  }
 };
 
 // src/extensions/autocomplete/typeahead.ts
 import { EditorSelection, Prec as Prec2, RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
 import { Decoration as Decoration4, ViewPlugin as ViewPlugin4, keymap as keymap2 } from "@codemirror/view";
-function _define_property5(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var typeahead = ({ onComplete } = {}) => {
   let hint;
   const complete = (view) => {
@@ -605,6 +538,7 @@ var typeahead = ({ onComplete } = {}) => {
   };
   return [
     ViewPlugin4.fromClass(class {
+      decorations = Decoration4.none;
       update(update2) {
         const builder = new RangeSetBuilder2();
         const selection = update2.view.state.selection.main;
@@ -622,9 +556,6 @@ var typeahead = ({ onComplete } = {}) => {
         }
         this.decorations = builder.finish();
       }
-      constructor() {
-        _define_property5(this, "decorations", Decoration4.none);
-      }
     }, {
       decorations: (v) => v.decorations
     }),
@@ -645,97 +576,207 @@ var typeahead = ({ onComplete } = {}) => {
 };
 
 // src/extensions/autoscroll.ts
+import { StateEffect as StateEffect2 } from "@codemirror/state";
+import { EditorView as EditorView5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
+import { debounce } from "@dxos/async";
+import { Domino } from "@dxos/react-ui";
+
+// src/extensions/scrolling.ts
 import { StateEffect } from "@codemirror/state";
 import { EditorView as EditorView4, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
-import { Domino } from "@dxos/react-ui";
-var lineHeight = 24;
-var scrollToBottomEffect = StateEffect.define();
-var autoScroll = ({ overscroll = 4 * lineHeight, throttle: throttle2 = 2e3 } = {}) => {
-  let isThrottled = false;
-  let isPinned = true;
-  let timeout;
+var scrollToLineEffect = StateEffect.define();
+var smoothScroll = ({ offset = 0, position = "start" } = {}) => {
+  const scrollPlugin = ViewPlugin5.fromClass(class SmoothScrollPlugin {
+    view;
+    constructor(view) {
+      this.view = view;
+    }
+    // No-op.
+    destroy() {
+    }
+    /**
+    * Perform smooth scroll to the specified line.
+    */
+    scrollToLine(lineNumber, options) {
+      const { offset: animOffset = 0, position: animPosition, behavior } = options;
+      const doc = this.view.state.doc;
+      const scroller = this.view.scrollDOM;
+      const targetLine = Math.max(0, lineNumber - 1);
+      if (behavior === "instant") {
+        requestAnimationFrame(() => {
+          this.view.dispatch({
+            selection: {
+              anchor: doc.line(targetLine + 1).from
+            },
+            scrollIntoView: true
+          });
+        });
+        return;
+      }
+      if (targetLine >= doc.lines) {
+        const targetScrollTop2 = scroller.scrollHeight - scroller.clientHeight + (animOffset || 0);
+        this.animateScroll(scroller, targetScrollTop2);
+        return;
+      }
+      const lineStart = doc.line(targetLine + 1).from;
+      const coords = this.view.coordsAtPos(lineStart);
+      if (!coords) {
+        return;
+      }
+      const currentScrollTop = scroller.scrollTop;
+      const scrollerRect = scroller.getBoundingClientRect();
+      const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
+      let targetScrollTop;
+      if (animPosition === "end") {
+        targetScrollTop = currentScrollTop + coords.bottom - scrollerRect.bottom + animOffset;
+      } else {
+        targetScrollTop = currentScrollTop + coords.top - scrollerRect.top + animOffset;
+      }
+      const clampedScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
+      this.animateScroll(scroller, clampedScrollTop);
+    }
+    /**
+    * Animate scroll using browser's built-in smooth scrolling.
+    */
+    animateScroll(element, targetScrollTop) {
+      if (Math.abs(targetScrollTop - element.scrollTop) < 1) {
+        return;
+      }
+      element.scrollTo({
+        top: targetScrollTop,
+        behavior: "smooth"
+      });
+    }
+  });
+  return [
+    scrollPlugin,
+    // Update listener to handle scroll effects.
+    EditorView4.updateListener.of((update2) => {
+      update2.transactions.forEach((transaction) => {
+        for (const effect of transaction.effects) {
+          if (effect.is(scrollToLineEffect)) {
+            const { line, options = {} } = effect.value;
+            const plugin = update2.view.plugin(scrollPlugin);
+            if (plugin) {
+              plugin.scrollToLine(line, {
+                offset,
+                position,
+                ...options
+              });
+            }
+          }
+        }
+      });
+    })
+  ];
+};
+var scrollToLine = (view, line, options) => {
+  view.dispatch({
+    effects: scrollToLineEffect.of({
+      line,
+      options
+    })
+  });
+};
+
+// src/extensions/autoscroll.ts
+var scrollToBottomEffect = StateEffect2.define();
+var autoScroll = ({ autoScroll: autoScroll2 = true, threshold = 100, throttleDelay = 1e3, onAutoScroll } = {}) => {
   let buttonContainer;
+  let hideTimeout;
   let lastScrollTop = 0;
-  let scrollCounter = 0;
+  let isPinned = true;
+  const setPinned = (pin) => {
+    isPinned = pin;
+    buttonContainer?.classList.toggle("opacity-0", pin);
+  };
   const hideScrollbar = (view) => {
     view.scrollDOM.classList.add("cm-hide-scrollbar");
-    clearTimeout(timeout);
-    timeout = setTimeout(() => {
+    clearTimeout(hideTimeout);
+    hideTimeout = setTimeout(() => {
       view.scrollDOM.classList.remove("cm-hide-scrollbar");
     }, 1e3);
   };
-  const scrollToBottom = (view) => {
-    isPinned = true;
-    scrollCounter = 0;
-    buttonContainer?.classList.add("opacity-0");
-    requestAnimationFrame(() => {
-      hideScrollbar(view);
-      view.scrollDOM.scrollTo({
-        top: view.scrollDOM.scrollHeight,
-        behavior: "smooth"
-      });
+  const scrollToBottom = (view, behavior) => {
+    setPinned(true);
+    hideScrollbar(view);
+    const line = view.state.doc.lineAt(view.state.doc.length);
+    view.dispatch({
+      selection: {
+        anchor: line.to,
+        head: line.to
+      },
+      effects: scrollToLineEffect.of({
+        line: line.number,
+        options: {
+          position: "end",
+          offset: threshold,
+          behavior
+        }
+      })
     });
   };
+  const checkDistance = debounce((view) => {
+    const scrollerRect = view.scrollDOM.getBoundingClientRect();
+    const coords = view.coordsAtPos(view.state.doc.length);
+    const distanceFromBottom = coords ? coords.bottom - scrollerRect.bottom : 0;
+    setPinned(distanceFromBottom < 0);
+  }, 1e3);
+  const triggerUpdate = debounce((view) => scrollToBottom(view), throttleDelay);
   return [
     // Update listener for logging when scrolling is needed.
-    EditorView4.updateListener.of((update2) => {
-      update2.transactions.forEach((transaction) => {
+    EditorView5.updateListener.of(({ view, transactions, heightChanged }) => {
+      transactions.forEach((transaction) => {
         for (const effect of transaction.effects) {
           if (effect.is(scrollToBottomEffect)) {
-            scrollToBottom(update2.view);
+            scrollToBottom(view, effect.value);
           }
         }
       });
-      if (update2.docChanged && isPinned && !isThrottled) {
-        const distanceFromBottom = calcDistance(update2.view.scrollDOM);
-        if (distanceFromBottom >= overscroll) {
-          isThrottled = true;
-          requestAnimationFrame(() => {
-            scrollToBottom(update2.view);
-          });
-          setTimeout(() => {
-            isThrottled = false;
-            scrollToBottom(update2.view);
-          }, throttle2);
+      if (heightChanged && isPinned) {
+        const coords = view.coordsAtPos(view.state.doc.length);
+        const scrollerRect = view.scrollDOM.getBoundingClientRect();
+        const distanceFromBottom = coords ? scrollerRect.bottom - coords.bottom : 0;
+        if (autoScroll2 && distanceFromBottom < threshold) {
+          const shouldScroll = onAutoScroll?.({
+            view,
+            distanceFromBottom
+          }) ?? true;
+          if (shouldScroll) {
+            triggerUpdate(view);
+          }
+        } else if (distanceFromBottom < 0) {
+          setPinned(false);
         }
       }
     }),
     // Detect user scroll.
-    // NOTE: Multiple scroll events are triggered during programmatic smooth scrolling.
-    EditorView4.domEventHandlers({
+    EditorView5.domEventHandlers({
       scroll: (event, view) => {
-        const scroller = view.scrollDOM;
-        if (lastScrollTop > scroller.scrollTop) {
-          scrollCounter++;
-        }
-        lastScrollTop = scroller.scrollTop;
-        const distanceFromBottom = calcDistance(scroller);
-        if (distanceFromBottom === 0) {
-          isPinned = true;
-          buttonContainer?.classList.add("opacity-0");
-          scrollCounter = 0;
-        } else if (scrollCounter > 3) {
-          isPinned = false;
-          buttonContainer?.classList.remove("opacity-0");
+        const currentScrollTop = view.scrollDOM.scrollTop;
+        const scrollingUp = currentScrollTop < lastScrollTop;
+        lastScrollTop = currentScrollTop;
+        if (scrollingUp) {
+          setPinned(false);
+        } else {
+          checkDistance(view);
         }
       }
     }),
     // Scroll button.
-    ViewPlugin5.fromClass(class {
+    ViewPlugin6.fromClass(class {
       constructor(view) {
-        const scroller = view.scrollDOM.parentElement;
         buttonContainer = Domino.of("div").classNames("cm-scroll-button transition-opacity duration-300 opacity-0").children(Domino.of("button").classNames("dx-button bg-accentSurface").data("density", "fine").children(Domino.of("dx-icon").attributes({
           icon: "ph--arrow-down--regular"
         })).on("click", () => {
           scrollToBottom(view);
         })).build();
-        scroller?.appendChild(buttonContainer);
+        view.scrollDOM.parentElement.appendChild(buttonContainer);
       }
     }),
     // Styles.
-    EditorView4.theme({
+    EditorView5.theme({
       ".cm-scroller": {
-        paddingBottom: `${overscroll}px`,
         scrollbarWidth: "thin"
       },
       ".cm-scroller.cm-hide-scrollbar": {
@@ -752,27 +793,20 @@ var autoScroll = ({ overscroll = 4 * lineHeight, throttle: throttle2 = 2e3 } = {
     })
   ];
 };
-var calcDistance = (scroller) => {
-  const scrollTop = scroller.scrollTop;
-  const scrollHeight = scroller.scrollHeight;
-  const clientHeight = scroller.clientHeight;
-  const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
-  return distanceFromBottom;
-};
 
 // src/extensions/automerge/automerge.ts
 import { next as A3 } from "@automerge/automerge";
 import { StateField, Transaction as Transaction2 } from "@codemirror/state";
-import { EditorView as EditorView5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
-import { DocAccessor } from "@dxos/react-client/echo";
+import { EditorView as EditorView6, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+import { DocAccessor } from "@dxos/client/echo";
 
 // src/extensions/state.ts
 import { Transaction } from "@codemirror/state";
 var initialSync = Transaction.userEvent.of("initial.sync");
 
 // src/extensions/automerge/cursor.ts
+import { fromCursor, toCursor } from "@dxos/client/echo";
 import { log as log2 } from "@dxos/log";
-import { fromCursor, toCursor } from "@dxos/react-client/echo";
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
 var cursorConverter = (accessor) => ({
   toCursor: (pos, assoc) => {
@@ -804,10 +838,10 @@ var cursorConverter = (accessor) => ({
 });
 
 // src/extensions/automerge/defs.ts
-import { Annotation, StateEffect as StateEffect2 } from "@codemirror/state";
+import { Annotation, StateEffect as StateEffect3 } from "@codemirror/state";
 var getPath = (state, field) => state.field(field).path;
 var getLastHeads = (state, field) => state.field(field).lastHeads;
-var updateHeadsEffect = StateEffect2.define({});
+var updateHeadsEffect = StateEffect3.define({});
 var updateHeads = (newHeads) => updateHeadsEffect.of({
   newHeads
 });
@@ -959,21 +993,16 @@ var charPath = (textPath, candidatePath) => {
 };
 
 // src/extensions/automerge/sync.ts
-function _define_property6(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/sync.ts";
 var Syncer = class {
+  _handle;
+  _state;
+  _pending = false;
+  // prettier-ignore
+  constructor(_handle, _state) {
+    this._handle = _handle;
+    this._state = _state;
+  }
   reconcile(view, editor2) {
     if (this._pending) {
       return;
@@ -1020,31 +1049,9 @@ var Syncer = class {
       annotations: reconcileAnnotation.of(false)
     });
   }
-  // prettier-ignore
-  constructor(_handle, _state) {
-    _define_property6(this, "_handle", void 0);
-    _define_property6(this, "_state", void 0);
-    _define_property6(this, "_pending", void 0);
-    this._handle = _handle;
-    this._state = _state;
-    this._pending = false;
-  }
 };
 
 // src/extensions/automerge/automerge.ts
-function _define_property7(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var automerge = (accessor) => {
   const syncState = StateField.define({
     create: () => {
@@ -1083,17 +1090,10 @@ var automerge = (accessor) => {
     // Track heads.
     syncState,
     // Reconcile external updates.
-    ViewPlugin6.fromClass(class {
-      destroy() {
-        accessor.handle.removeListener("change", this._handleChange);
-      }
+    ViewPlugin7.fromClass(class {
+      _view;
       constructor(_view) {
-        _define_property7(this, "_view", void 0);
-        _define_property7(this, "_handleChange", void 0);
         this._view = _view;
-        this._handleChange = () => {
-          syncer.reconcile(this._view, false);
-        };
         accessor.handle.addListener("change", this._handleChange);
         requestAnimationFrame(() => {
           const value = DocAccessor.getValue(accessor);
@@ -1102,9 +1102,15 @@ var automerge = (accessor) => {
           }
         });
       }
+      destroy() {
+        accessor.handle.removeListener("change", this._handleChange);
+      }
+      _handleChange = () => {
+        syncer.reconcile(this._view, false);
+      };
     }),
     // Reconcile local updates.
-    EditorView5.updateListener.of(({ view, changes, transactions }) => {
+    EditorView6.updateListener.of(({ view, changes, transactions }) => {
       if (!changes.empty) {
         const isInitialSync = transactions.some((tr) => tr.annotation(Transaction2.userEvent) === initialSync.value);
         if (!isInitialSync) {
@@ -1117,22 +1123,9 @@ var automerge = (accessor) => {
 
 // src/extensions/awareness/awareness.ts
 import { Annotation as Annotation2, RangeSet } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView6, ViewPlugin as ViewPlugin7, WidgetType as WidgetType3 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView7, ViewPlugin as ViewPlugin8, WidgetType as WidgetType3 } from "@codemirror/view";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
-function _define_property8(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
 var dummyProvider = {
   remoteStateChange: new Event(),
@@ -1149,13 +1142,34 @@ var RemoteSelectionChangedAnnotation = Annotation2.define();
 var awareness = (provider = dummyProvider) => {
   return [
     awarenessProvider.of(provider),
-    ViewPlugin7.fromClass(RemoteSelectionsDecorator, {
+    ViewPlugin8.fromClass(RemoteSelectionsDecorator, {
       decorations: (value) => value.decorations
     }),
     styles
   ];
 };
 var RemoteSelectionsDecorator = class {
+  _ctx = new Context(void 0, {
+    F: __dxlog_file4,
+    L: 80
+  });
+  _cursorConverter;
+  _provider;
+  _lastAnchor;
+  _lastHead;
+  decorations = RangeSet.of([]);
+  constructor(view) {
+    this._cursorConverter = view.state.facet(Cursor.converter);
+    this._provider = view.state.facet(awarenessProvider);
+    this._provider.open();
+    this._provider.remoteStateChange.on(this._ctx, () => {
+      view.dispatch({
+        annotations: [
+          RemoteSelectionChangedAnnotation.of([])
+        ]
+      });
+    });
+  }
   destroy() {
     void this._ctx.dispose();
     this._provider.close();
@@ -1250,29 +1264,13 @@ var RemoteSelectionsDecorator = class {
     }
     this.decorations = Decoration5.set(decorations2, true);
   }
-  constructor(view) {
-    _define_property8(this, "_ctx", new Context(void 0, {
-      F: __dxlog_file4,
-      L: 80
-    }));
-    _define_property8(this, "_cursorConverter", void 0);
-    _define_property8(this, "_provider", void 0);
-    _define_property8(this, "_lastAnchor", void 0);
-    _define_property8(this, "_lastHead", void 0);
-    _define_property8(this, "decorations", RangeSet.of([]));
-    this._cursorConverter = view.state.facet(Cursor.converter);
-    this._provider = view.state.facet(awarenessProvider);
-    this._provider.open();
-    this._provider.remoteStateChange.on(this._ctx, () => {
-      view.dispatch({
-        annotations: [
-          RemoteSelectionChangedAnnotation.of([])
-        ]
-      });
-    });
-  }
 };
 var RemoteCaretWidget = class extends WidgetType3 {
+  _name;
+  _color;
+  constructor(_name, _color) {
+    super(), this._name = _name, this._color = _color;
+  }
   toDOM() {
     const span = document.createElement("span");
     span.className = "cm-collab-selectionCaret";
@@ -1302,11 +1300,8 @@ var RemoteCaretWidget = class extends WidgetType3 {
   ignoreEvent() {
     return true;
   }
-  constructor(_name, _color) {
-    super(), _define_property8(this, "_name", void 0), _define_property8(this, "_color", void 0), this._name = _name, this._color = _color;
-  }
 };
-var styles = EditorView6.theme({
+var styles = EditorView7.theme({
   ".cm-collab-selection": {},
   ".cm-collab-selectionLine": {
     padding: 0,
@@ -1369,22 +1364,24 @@ import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
 import { Context as Context2 } from "@dxos/context";
 import { invariant } from "@dxos/invariant";
 import { log as log4 } from "@dxos/log";
-function _define_property9(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts";
 var DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
+  _remoteStates = /* @__PURE__ */ new Map();
+  _space;
+  _channel;
+  _peerId;
+  _info;
+  _ctx;
+  _postTask;
+  _localState;
+  remoteStateChange = new Event2();
+  constructor(params) {
+    this._space = params.space;
+    this._channel = params.channel;
+    this._peerId = params.peerId;
+    this._info = params.info;
+  }
   open() {
     this._ctx = new Context2(void 0, {
       F: __dxlog_file5,
@@ -1474,41 +1471,13 @@ var SpaceAwarenessProvider = class {
     this._remoteStates.set(message.state.peerId, message.state);
     this.remoteStateChange.emit();
   }
-  constructor(params) {
-    _define_property9(this, "_remoteStates", /* @__PURE__ */ new Map());
-    _define_property9(this, "_space", void 0);
-    _define_property9(this, "_channel", void 0);
-    _define_property9(this, "_peerId", void 0);
-    _define_property9(this, "_info", void 0);
-    _define_property9(this, "_ctx", void 0);
-    _define_property9(this, "_postTask", void 0);
-    _define_property9(this, "_localState", void 0);
-    _define_property9(this, "remoteStateChange", new Event2());
-    this._space = params.space;
-    this._channel = params.channel;
-    this._peerId = params.peerId;
-    this._info = params.info;
-  }
 };
 
 // src/extensions/blast.ts
-import { EditorView as EditorView7, keymap as keymap3 } from "@codemirror/view";
+import { EditorView as EditorView8, keymap as keymap3 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
 import { throttle } from "@dxos/async";
 import { invariant as invariant2 } from "@dxos/invariant";
-function _define_property10(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var __dxlog_file6 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
@@ -1554,7 +1523,7 @@ var blast = (options = defaultOptions) => {
   };
   return [
     // Cursor moved.
-    EditorView7.updateListener.of((update2) => {
+    EditorView8.updateListener.of((update2) => {
       if (blaster?.node !== update2.view.scrollDOM) {
         if (blaster) {
           blaster.destroy();
@@ -1603,6 +1572,26 @@ var blast = (options = defaultOptions) => {
   ];
 };
 var Blaster = class {
+  _node;
+  _options;
+  _effect;
+  _canvas;
+  _ctx;
+  _running = false;
+  _lastTime;
+  _shakeTime = 0;
+  _shakeTimeMax = 0;
+  _particles = [];
+  _particlePointer = 0;
+  _lastPoint = {
+    x: 0,
+    y: 0
+  };
+  constructor(_node, _options) {
+    this._node = _node;
+    this._options = _options;
+    this._effect = this._options.effect === 1 ? new Effect1(_options) : new Effect2(_options);
+  }
   get node() {
     return this._node;
   }
@@ -1666,7 +1655,7 @@ var Blaster = class {
     }
     this._ctx.clearRect(0, 0, this._canvas.width ?? 0, this._canvas.height ?? 0);
     const now = (/* @__PURE__ */ new Date()).getTime();
-    this._lastTime ?? (this._lastTime = now);
+    this._lastTime ??= now;
     const dt = (now - this._lastTime) / 1e3;
     this._lastTime = now;
     if (this._shakeTime > 0) {
@@ -1679,6 +1668,20 @@ var Blaster = class {
     this.drawParticles();
     requestAnimationFrame(this.loop.bind(this));
   }
+  shake = throttle(({ time }) => {
+    this._shakeTime = this._shakeTimeMax || time;
+    this._shakeTimeMax = time;
+  }, 100);
+  spawn = throttle(({ element, point }) => {
+    const color = getRGBComponents(element, this._options.color);
+    const numParticles = random(this._options.particleNumRange.min, this._options.particleNumRange.max);
+    const dir = this._lastPoint.x === point.x ? 0 : this._lastPoint.x < point.x ? 1 : -1;
+    this._lastPoint = point;
+    for (let i = numParticles; i--; i > 0) {
+      this._particles[this._particlePointer] = this._effect.create(point.x - dir * 16, point.y, color);
+      this._particlePointer = (this._particlePointer + 1) % this._options.maxParticles;
+    }
+  }, 100);
   drawParticles() {
     for (let i = this._particles.length; i--; i > 0) {
       const particle = this._particles[i];
@@ -1691,52 +1694,10 @@ var Blaster = class {
       this._effect.update(this._ctx, particle);
     }
   }
-  constructor(_node, _options) {
-    _define_property10(this, "_node", void 0);
-    _define_property10(this, "_options", void 0);
-    _define_property10(this, "_effect", void 0);
-    _define_property10(this, "_canvas", void 0);
-    _define_property10(this, "_ctx", void 0);
-    _define_property10(this, "_running", void 0);
-    _define_property10(this, "_lastTime", void 0);
-    _define_property10(this, "_shakeTime", void 0);
-    _define_property10(this, "_shakeTimeMax", void 0);
-    _define_property10(this, "_particles", void 0);
-    _define_property10(this, "_particlePointer", void 0);
-    _define_property10(this, "_lastPoint", void 0);
-    _define_property10(this, "shake", void 0);
-    _define_property10(this, "spawn", void 0);
-    this._node = _node;
-    this._options = _options;
-    this._running = false;
-    this._shakeTime = 0;
-    this._shakeTimeMax = 0;
-    this._particles = [];
-    this._particlePointer = 0;
-    this._lastPoint = {
-      x: 0,
-      y: 0
-    };
-    this.shake = throttle(({ time }) => {
-      this._shakeTime = this._shakeTimeMax || time;
-      this._shakeTimeMax = time;
-    }, 100);
-    this.spawn = throttle(({ element, point }) => {
-      const color = getRGBComponents(element, this._options.color);
-      const numParticles = random(this._options.particleNumRange.min, this._options.particleNumRange.max);
-      const dir = this._lastPoint.x === point.x ? 0 : this._lastPoint.x < point.x ? 1 : -1;
-      this._lastPoint = point;
-      for (let i = numParticles; i--; i > 0) {
-        this._particles[this._particlePointer] = this._effect.create(point.x - dir * 16, point.y, color);
-        this._particlePointer = (this._particlePointer + 1) % this._options.maxParticles;
-      }
-    }, 100);
-    this._effect = this._options.effect === 1 ? new Effect1(_options) : new Effect2(_options);
-  }
 };
 var Effect = class {
+  _options;
   constructor(_options) {
-    _define_property10(this, "_options", void 0);
     this._options = _options;
   }
 };
@@ -1818,20 +1779,173 @@ var random = (min, max) => {
   return min + ~~(Math.random() * (max - min + 1));
 };
 
-// src/extensions/comments.ts
-import { invertedEffects } from "@codemirror/commands";
-import { StateEffect as StateEffect3, StateField as StateField2 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView9, ViewPlugin as ViewPlugin8, hoverTooltip, keymap as keymap5 } from "@codemirror/view";
-import sortBy from "lodash.sortby";
-import { useEffect } from "react";
-import { debounce as debounce2 } from "@dxos/async";
-import { log as log5 } from "@dxos/log";
-import { isNonNullable } from "@dxos/util";
+// src/extensions/blocks.ts
+import { RangeSetBuilder as RangeSetBuilder3 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView9, ViewPlugin as ViewPlugin9 } from "@codemirror/view";
+import { mx } from "@dxos/react-ui-theme";
+var paragraphBlockPlugin = ViewPlugin9.fromClass(class {
+  decorations;
+  constructor(view) {
+    this.decorations = this.build(view);
+  }
+  update(update2) {
+    if (update2.docChanged || update2.viewportChanged) {
+      this.decorations = this.build(update2.view);
+    }
+  }
+  build({ state }) {
+    const builder = new RangeSetBuilder3();
+    const pushBlock = (fromLine, toLine) => {
+      for (let lineNum = fromLine; lineNum <= toLine; lineNum++) {
+        const line = state.doc.line(lineNum);
+        builder.add(line.from, line.from, Decoration6.line({
+          class: mx("block-line", fromLine === toLine && "block-single", lineNum === fromLine && "block-first", lineNum > fromLine && lineNum < toLine && "block-middle", lineNum === toLine && "block-last")
+        }));
+      }
+    };
+    let blockStart = null;
+    let consecutiveBlankLines = 0;
+    const totalLines = state.doc.lines;
+    for (let i = 1; i <= totalLines; i++) {
+      const line = state.doc.line(i);
+      const isBlank = /^\s*$/.test(line.text);
+      if (!isBlank) {
+        consecutiveBlankLines = 0;
+        if (blockStart === null) {
+          blockStart = i;
+        }
+      } else {
+        consecutiveBlankLines++;
+        if (consecutiveBlankLines >= 2 && blockStart !== null) {
+          pushBlock(blockStart, i - consecutiveBlankLines);
+          blockStart = null;
+        }
+      }
+    }
+    if (blockStart !== null) {
+      let lastNonBlankLine = totalLines;
+      while (lastNonBlankLine >= blockStart) {
+        const line = state.doc.line(lastNonBlankLine);
+        if (!/^\s*$/.test(line.text)) {
+          break;
+        }
+        lastNonBlankLine--;
+      }
+      if (lastNonBlankLine >= blockStart) {
+        pushBlock(blockStart, lastNonBlankLine);
+      }
+    }
+    return builder.finish();
+  }
+}, {
+  decorations: (v) => v.decorations
+});
+var blocks = () => [
+  paragraphBlockPlugin,
+  EditorView9.baseTheme({
+    ".cm-line.block-line": {
+      paddingLeft: "0.75rem",
+      paddingRight: "0.75rem",
+      borderLeft: "1px solid var(--dx-subduedSeparator)",
+      borderRight: "1px solid var(--dx-subduedSeparator)"
+    },
+    ".cm-line.block-single": {
+      border: "1px solid var(--dx-subduedSeparator)",
+      borderRadius: "6px",
+      paddingTop: "0.5rem",
+      paddingBottom: "0.5rem",
+      marginTop: "0.5rem",
+      marginBottom: "0.5rem"
+    },
+    ".cm-line.block-first": {
+      borderTop: "1px solid var(--dx-subduedSeparator)",
+      borderTopLeftRadius: "6px",
+      borderTopRightRadius: "6px",
+      paddingTop: "0.5rem",
+      marginTop: "0.5rem"
+    },
+    ".cm-line.block-middle": {},
+    ".cm-line.block-last": {
+      borderBottom: "1px solid var(--dx-subduedSeparator)",
+      borderBottomLeftRadius: "6px",
+      borderBottomRightRadius: "6px",
+      paddingBottom: "0.5rem",
+      marginBottom: "0.5rem"
+    }
+  })
+];
 
-// src/extensions/selection.ts
-import { Transaction as Transaction3 } from "@codemirror/state";
-import { EditorView as EditorView8, keymap as keymap4 } from "@codemirror/view";
-import { debounce } from "@dxos/async";
+// src/extensions/bookmarks.ts
+import { Prec as Prec3, StateEffect as StateEffect4, StateField as StateField2 } from "@codemirror/state";
+import { keymap as keymap4 } from "@codemirror/view";
+var addBookmark = StateEffect4.define();
+var removeBookmark = StateEffect4.define();
+var clearBookmarks = StateEffect4.define();
+var bookmarks = () => {
+  return [
+    bookmarksField,
+    Prec3.highest(keymap4.of([
+      {
+        key: "Mod-ArrowUp",
+        run: (view) => {
+          const bookmarks2 = view.state.field(bookmarksField);
+          console.log("up", bookmarks2);
+          return true;
+        }
+      },
+      {
+        key: "Mod-ArrowDown",
+        run: (view) => {
+          const bookmarks2 = view.state.field(bookmarksField);
+          console.log("down", bookmarks2);
+          return true;
+        }
+      }
+    ]))
+  ];
+};
+var bookmarksField = StateField2.define({
+  create: () => ({
+    bookmarks: []
+  }),
+  update: (value, tr) => {
+    let bookmarks2 = value.bookmarks.map((bookmark) => ({
+      ...bookmark,
+      pos: tr.changes.mapPos(bookmark.pos)
+    }));
+    for (const effect of tr.effects) {
+      if (effect.is(addBookmark)) {
+        bookmarks2 = [
+          ...bookmarks2,
+          effect.value
+        ];
+      } else if (effect.is(removeBookmark)) {
+        bookmarks2 = bookmarks2.filter((b) => b.id !== effect.value);
+      } else if (effect.is(clearBookmarks)) {
+        bookmarks2 = [];
+      }
+    }
+    bookmarks2.sort(({ pos: a }, { pos: b }) => a - b);
+    return {
+      bookmarks: bookmarks2
+    };
+  }
+});
+
+// src/extensions/comments.ts
+import { invertedEffects } from "@codemirror/commands";
+import { StateEffect as StateEffect5, StateField as StateField3 } from "@codemirror/state";
+import { Decoration as Decoration7, EditorView as EditorView11, ViewPlugin as ViewPlugin10, hoverTooltip, keymap as keymap6 } from "@codemirror/view";
+import sortBy from "lodash.sortby";
+import { useEffect } from "react";
+import { debounce as debounce3 } from "@dxos/async";
+import { log as log5 } from "@dxos/log";
+import { isNonNullable } from "@dxos/util";
+
+// src/extensions/selection.ts
+import { Transaction as Transaction3 } from "@codemirror/state";
+import { EditorView as EditorView10, keymap as keymap5 } from "@codemirror/view";
+import { debounce as debounce2 } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isTruthy } from "@dxos/util";
 var __dxlog_file7 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/selection.ts";
@@ -1841,7 +1955,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView8.scrollIntoView(scrollTo, {
+    effects: scrollTo ? EditorView10.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: Transaction3.userEvent.of(stateRestoreAnnotation)
@@ -1875,7 +1989,7 @@ var createEditorStateStore = (keyPrefix) => ({
   }
 });
 var selectionState = ({ getState, setState } = {}) => {
-  const setStateDebounced = debounce(setState, 1e3);
+  const setStateDebounced = debounce2(setState, 1e3);
   return [
     // TODO(burdon): Track scrolling (currently only updates when cursor moves).
     // EditorView.domEventHandlers({
@@ -1883,7 +1997,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    EditorView8.updateListener.of(({ view, transactions }) => {
+    EditorView10.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -1906,9 +2020,9 @@ var selectionState = ({ getState, setState } = {}) => {
         }
       }
     }),
-    getState && keymap4.of([
+    getState && keymap5.of([
       {
-        key: "ctrl-r",
+        key: "Ctrl-r",
         run: (view) => {
           const state = getState(view.state.facet(documentId));
           if (state) {
@@ -1922,24 +2036,11 @@ var selectionState = ({ getState, setState } = {}) => {
 };
 
 // src/extensions/comments.ts
-function _define_property11(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var __dxlog_file8 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
-var setComments = StateEffect3.define();
-var setSelection = StateEffect3.define();
-var setCommentState = StateEffect3.define();
-var commentsState = StateField2.define({
+var setComments = StateEffect5.define();
+var setSelection = StateEffect5.define();
+var setCommentState = StateEffect5.define();
+var commentsState = StateField3.define({
   create: (state) => ({
     id: state.facet(documentId),
     comments: [],
@@ -1977,27 +2078,28 @@ var commentsState = StateField2.define({
     return value;
   }
 });
-var styles2 = EditorView9.theme({
+var styles2 = EditorView11.theme({
   ".cm-comment, .cm-comment-current": {
     padding: "3px 0",
+    color: "var(--dx-cmCommentText)",
     backgroundColor: "var(--dx-cmCommentSurface)"
   },
   ".cm-comment > span, .cm-comment-current > span": {
     boxDecorationBreak: "clone",
     boxShadow: "0 0 1px 3px var(--dx-cmCommentSurface)",
     backgroundColor: "var(--dx-cmCommentSurface)",
-    color: "var(--dx-cmComment)",
+    color: "var(--dx-cmCommentText)",
     cursor: "pointer"
   }
 });
-var createCommentMark = (id, isCurrent) => Decoration6.mark({
+var createCommentMark = (id, isCurrent) => Decoration7.mark({
   class: isCurrent ? "cm-comment-current" : "cm-comment",
   attributes: {
     "data-testid": "cm-comment",
     "data-comment-id": id
   }
 });
-var commentsDecorations = EditorView9.decorations.compute([
+var commentsDecorations = EditorView11.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -2006,7 +2108,7 @@ var commentsDecorations = EditorView9.decorations.compute([
     if (!range) {
       log5.warn("Invalid range:", range, {
         F: __dxlog_file8,
-        L: 140,
+        L: 141,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2017,10 +2119,10 @@ var commentsDecorations = EditorView9.decorations.compute([
     const mark = createCommentMark(comment.comment.id, comment.comment.id === current);
     return mark.range(range.from, range.to);
   }).filter(isNonNullable);
-  return Decoration6.set(decorations2);
+  return Decoration7.set(decorations2);
 });
-var commentClickedEffect = StateEffect3.define();
-var handleCommentClick = EditorView9.domEventHandlers({
+var commentClickedEffect = StateEffect5.define();
+var handleCommentClick = EditorView11.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -2059,7 +2161,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView9.domEventHandlers({
+    EditorView11.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -2081,7 +2183,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView9.updateListener.of((update2) => {
+    EditorView11.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -2137,7 +2239,7 @@ var mapTrackedComment = (comment, changes) => ({
   from: changes.mapPos(comment.from, 1),
   to: changes.mapPos(comment.to, 1)
 });
-var restoreCommentEffect = StateEffect3.define({
+var restoreCommentEffect = StateEffect5.define({
   map: mapTrackedComment
 });
 var createComment = (view) => {
@@ -2171,7 +2273,7 @@ var createComment = (view) => {
 var optionsFacet = singleValueFacet();
 var comments = (options = {}) => {
   const { key: shortcut = "meta-'" } = options;
-  const handleSelect = debounce2((state) => options.onSelect?.(state), 200);
+  const handleSelect = debounce3((state) => options.onSelect?.(state), 200);
   return [
     optionsFacet.of(options),
     options.id ? documentId.of(options.id) : void 0,
@@ -2182,7 +2284,7 @@ var comments = (options = {}) => {
     //
     // Keymap.
     //
-    options.onCreate && keymap5.of([
+    options.onCreate && keymap6.of([
       {
         key: shortcut,
         run: callbackWrapper(createComment)
@@ -2223,7 +2325,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView9.updateListener.of(({ view, state, changes }) => {
+    EditorView11.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -2255,7 +2357,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView9.updateListener.of(({ view, state }) => {
+    EditorView11.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -2309,7 +2411,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? EditorView9.scrollIntoView(range.from, center ? {
+          needsScroll ? EditorView11.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2321,11 +2423,8 @@ var scrollThreadIntoView = (view, id, center = true) => {
   }
 };
 var ExternalCommentSync = class {
+  unsubscribe;
   constructor(view, id, subscribe, getComments) {
-    _define_property11(this, "unsubscribe", void 0);
-    _define_property11(this, "destroy", () => {
-      this.unsubscribe();
-    });
     const updateComments = () => {
       const comments2 = getComments();
       if (id === view.state.facet(documentId)) {
@@ -2339,8 +2438,11 @@ var ExternalCommentSync = class {
     };
     this.unsubscribe = subscribe(updateComments);
   }
+  destroy = () => {
+    this.unsubscribe();
+  };
 };
-var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin8.fromClass(class {
+var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin10.fromClass(class {
   constructor(view) {
     return new ExternalCommentSync(view, id, subscribe, getComments);
   }
@@ -2362,20 +2464,20 @@ var useComments = (view, id, comments2) => {
 
 // src/extensions/debug.ts
 import { syntaxTree } from "@codemirror/language";
-import { StateField as StateField3 } from "@codemirror/state";
+import { StateField as StateField4 } from "@codemirror/state";
 var debugNodeLogger = (log11 = console.log) => {
   const logTokens = (state) => syntaxTree(state).iterate({
     enter: (node) => log11(node.type)
   });
-  return StateField3.define({
+  return StateField4.define({
     create: (state) => logTokens(state),
     update: (_, tr) => logTokens(tr.state)
   });
 };
 
 // src/extensions/dnd.ts
-import { EditorView as EditorView10, dropCursor } from "@codemirror/view";
-var styles3 = EditorView10.theme({
+import { EditorView as EditorView12, dropCursor } from "@codemirror/view";
+var styles3 = EditorView12.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--dx-accentText)",
     color: "var(--dx-accentText)",
@@ -2389,7 +2491,7 @@ var dropFile = (options = {}) => {
   return [
     styles3,
     dropCursor(),
-    EditorView10.domEventHandlers({
+    EditorView12.domEventHandlers({
       drop: (event, view) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
@@ -2415,7 +2517,7 @@ import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap }
 import { HighlightStyle, bracketMatching, syntaxHighlighting } from "@codemirror/language";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
-import { EditorView as EditorView13, ViewPlugin as ViewPlugin9, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap6, lineNumbers, placeholder as placeholder2, scrollPastEnd } from "@codemirror/view";
+import { EditorView as EditorView15, ViewPlugin as ViewPlugin11, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap7, lineNumbers, placeholder as placeholder2, scrollPastEnd } from "@codemirror/view";
 import { vscodeDarkStyle, vscodeLightStyle } from "@uiw/codemirror-theme-vscode";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import merge from "lodash.merge";
@@ -2424,11 +2526,11 @@ import { log as log6 } from "@dxos/log";
 import { hexToHue, isTruthy as isTruthy2 } from "@dxos/util";
 
 // src/defaults.ts
-import { EditorView as EditorView11 } from "@codemirror/view";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+import { EditorView as EditorView13 } from "@codemirror/view";
+import { mx as mx3 } from "@dxos/react-ui-theme";
 
 // src/styles/markdown.ts
-import { mx } from "@dxos/react-ui-theme";
+import { mx as mx2 } from "@dxos/react-ui-theme";
 var headings = {
   1: "text-4xl",
   2: "text-3xl",
@@ -2442,7 +2544,7 @@ var theme = {
   codeMark: "font-mono text-primary-500",
   mark: "opacity-50",
   heading: (level) => {
-    return mx(headings[level], "dark:text-primary-400");
+    return mx2(headings[level], "dark:text-neutral-400");
   }
 };
 
@@ -2490,7 +2592,8 @@ var defaultTheme = {
   ".cm-gutter": {},
   ".cm-gutter.cm-lineNumbers": {
     paddingRight: "4px",
-    borderRight: "1px solid var(--dx-subduedSeparator)"
+    borderRight: "1px solid var(--dx-subduedSeparator)",
+    color: "var(--dx-subduedText)"
   },
   ".cm-gutter.cm-lineNumbers .cm-gutterElement": {
     minWidth: "40px"
@@ -2680,7 +2783,7 @@ var editorSlots = {
     className: editorWidth
   }
 };
-var editorGutter = EditorView11.theme({
+var editorGutter = EditorView13.theme({
   ".cm-gutters": {
     // NOTE: Color required to cover content if scrolling horizontally.
     // TODO(burdon): Non-transparent background clips the focus ring.
@@ -2688,19 +2791,19 @@ var editorGutter = EditorView11.theme({
     paddingRight: "1rem"
   }
 });
-var editorMonospace = EditorView11.theme({
+var editorMonospace = EditorView13.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) => mx2("p-0.5 dx-focus-ring-inset attention-surface data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
+var stackItemContentEditorClassNames = (role) => mx3("p-0.5 dx-focus-ring-inset attention-surface data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
 
 // src/extensions/focus.ts
-import { StateEffect as StateEffect4, StateField as StateField4 } from "@codemirror/state";
-import { EditorView as EditorView12 } from "@codemirror/view";
-var focusEffect = StateEffect4.define();
-var focusField = StateField4.define({
+import { StateEffect as StateEffect6, StateField as StateField5 } from "@codemirror/state";
+import { EditorView as EditorView14 } from "@codemirror/view";
+var focusEffect = StateEffect6.define();
+var focusField = StateField5.define({
   create: () => false,
   update: (value, tr) => {
     for (const effect of tr.effects) {
@@ -2713,7 +2816,7 @@ var focusField = StateField4.define({
 });
 var focus = [
   focusField,
-  EditorView12.domEventHandlers({
+  EditorView14.domEventHandlers({
     focus: (_event, view) => {
       requestAnimationFrame(() => view.dispatch({
         effects: focusEffect.of(true)
@@ -2777,10 +2880,10 @@ var createBasicExtensions = (_props) => {
   const props = defaultsDeep2({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    EditorView13.exceptionSink.of((err) => {
+    EditorView15.exceptionSink.of((err) => {
       log6.catch(err, void 0, {
         F: __dxlog_file9,
-        L: 125,
+        L: 124,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2792,7 +2895,7 @@ var createBasicExtensions = (_props) => {
     props.drawSelection && drawSelection({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && EditorView13.editable.of(props.editable),
+    props.editable !== void 0 && EditorView15.editable.of(props.editable),
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
@@ -2800,14 +2903,13 @@ var createBasicExtensions = (_props) => {
       lineNumbers(),
       editorGutter
     ],
-    props.lineWrapping && EditorView13.lineWrapping,
-    props.monospace && editorMonospace,
+    props.lineWrapping && EditorView15.lineWrapping,
     props.placeholder && placeholder2(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
@@ -2845,19 +2947,20 @@ var defaultStyles = {
   dark: vscodeDarkStyle,
   light: vscodeLightStyle
 };
-var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: syntaxHighlightingProp, slots: slotsParam } = {}) => {
+var createThemeExtensions = ({ themeMode, monospace, styles: styles4, syntaxHighlighting: syntaxHighlightingProp, slots: slotsParam } = {}) => {
   const slots = defaultsDeep2({}, slotsParam, defaultThemeSlots);
   return [
-    EditorView13.darkTheme.of(themeMode === "dark"),
-    EditorView13.baseTheme(styles4 ? merge({}, defaultTheme, styles4) : defaultTheme),
+    EditorView15.darkTheme.of(themeMode === "dark"),
+    EditorView15.baseTheme(styles4 ? merge({}, defaultTheme, styles4) : defaultTheme),
+    monospace && editorMonospace,
     syntaxHighlightingProp && syntaxHighlighting(HighlightStyle.define(themeMode === "dark" ? defaultStyles.dark : defaultStyles.light)),
-    slots.editor?.className && EditorView13.editorAttributes.of({
+    slots.editor?.className && EditorView15.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView13.contentAttributes.of({
+    slots.content?.className && EditorView15.contentAttributes.of({
       class: slots.content.className
     }),
-    slots.scroll?.className && ViewPlugin9.fromClass(class {
+    slots.scroll?.className && ViewPlugin11.fromClass(class {
       constructor(view) {
         view.scrollDOM.classList.add(...slots.scroll.className.split(/\s+/));
       }
@@ -2888,7 +2991,7 @@ var createDataExtensions = ({ id, text, space, identity }) => {
 
 // src/extensions/folding.tsx
 import { codeFolding, foldGutter } from "@codemirror/language";
-import { EditorView as EditorView14 } from "@codemirror/view";
+import { EditorView as EditorView16 } from "@codemirror/view";
 import React2 from "react";
 import { Domino as Domino2, Icon } from "@dxos/react-ui";
 var folding = (_props = {}) => [
@@ -2899,21 +3002,17 @@ var folding = (_props = {}) => [
   }),
   foldGutter({
     markerDOM: (open) => {
-      return renderRoot(
-        Domino2.of("div").classNames("flex h-full items-center").build(),
-        // TODO(burdon): Use sprite directly.
-        /* @__PURE__ */ React2.createElement(Icon, {
-          icon: "ph--caret-right--bold",
-          size: 3,
-          classNames: [
-            "mx-3 cursor-pointer",
-            open && "rotate-90"
-          ]
-        })
-      );
+      return renderRoot(Domino2.of("div").classNames("flex bs-full items-center").build(), /* @__PURE__ */ React2.createElement(Icon, {
+        icon: "ph--caret-right--bold",
+        size: 3,
+        classNames: [
+          "mx-3 cursor-pointer",
+          open && "rotate-90"
+        ]
+      }));
     }
   }),
-  EditorView14.theme({
+  EditorView16.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
       transition: "opacity 0.3s",
@@ -2926,54 +3025,42 @@ var folding = (_props = {}) => [
 ];
 
 // src/extensions/hashtag.tsx
-import { Decoration as Decoration7, EditorView as EditorView15, MatchDecorator, ViewPlugin as ViewPlugin10, WidgetType as WidgetType4 } from "@codemirror/view";
-import { getHashStyles, mx as mx3 } from "@dxos/react-ui-theme";
-function _define_property12(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
+import { Decoration as Decoration8, EditorView as EditorView17, MatchDecorator, ViewPlugin as ViewPlugin12, WidgetType as WidgetType4 } from "@codemirror/view";
+import { getHashStyles, mx as mx4 } from "@dxos/react-ui-theme";
 var TagWidget = class extends WidgetType4 {
+  _text;
+  constructor(_text) {
+    super(), this._text = _text;
+  }
   toDOM() {
     const span = document.createElement("span");
-    span.className = mx3("cm-tag", getHashStyles(this._text).surface);
+    span.className = mx4("cm-tag", getHashStyles(this._text).surface);
     span.textContent = this._text;
     return span;
   }
-  constructor(_text) {
-    super(), _define_property12(this, "_text", void 0), this._text = _text;
-  }
 };
 var tagMatcher = new MatchDecorator({
   regexp: /#(\w+)\W/g,
-  decoration: (match) => Decoration7.replace({
+  decoration: (match) => Decoration8.replace({
     widget: new TagWidget(match[1])
   })
 });
 var hashtag = () => [
-  ViewPlugin10.fromClass(class {
-    update(update2) {
-      this.tags = tagMatcher.updateDeco(update2, this.tags);
-    }
+  ViewPlugin12.fromClass(class {
+    tags;
     constructor(view) {
-      _define_property12(this, "tags", void 0);
       this.tags = tagMatcher.createDeco(view);
     }
+    update(update2) {
+      this.tags = tagMatcher.updateDeco(update2, this.tags);
+    }
   }, {
     decorations: (instance) => instance.tags,
-    provide: (plugin) => EditorView15.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.tags || Decoration7.none;
+    provide: (plugin) => EditorView17.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.tags || Decoration8.none;
     })
   }),
-  EditorView15.theme({
+  EditorView17.theme({
     ".cm-tag": {
       borderRadius: "4px",
       marginRight: "6px",
@@ -3028,25 +3115,33 @@ var schemaLinter = (validate) => (view) => {
 };
 
 // src/extensions/listener.ts
-import { EditorView as EditorView16 } from "@codemirror/view";
+import { EditorView as EditorView18 } from "@codemirror/view";
+import { isNonNullable as isNonNullable2 } from "@dxos/util";
 var listener = ({ onFocus, onChange }) => {
-  const extensions = [];
-  onFocus && extensions.push(EditorView16.focusChangeEffect.of((_, focusing) => {
-    onFocus(focusing);
-    return null;
-  }));
-  onChange && extensions.push(EditorView16.updateListener.of((update2) => {
-    onChange(update2.state.doc.toString(), update2.state.facet(documentId));
-  }));
-  return extensions;
+  return [
+    onFocus && EditorView18.focusChangeEffect.of((state, focusing) => {
+      onFocus({
+        id: state.facet(documentId),
+        focusing
+      });
+      return null;
+    }),
+    onChange && EditorView18.updateListener.of(({ state, docChanged }) => {
+      if (docChanged) {
+        onChange({
+          id: state.facet(documentId),
+          text: state.doc.toString()
+        });
+      }
+    })
+  ].filter(isNonNullable2);
 };
 
 // src/extensions/markdown/formatting.ts
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection as EditorSelection2 } from "@codemirror/state";
-import { EditorView as EditorView17, keymap as keymap7 } from "@codemirror/view";
-import { useCallback, useMemo } from "react";
+import { EditorView as EditorView19, keymap as keymap8 } from "@codemirror/view";
 import { debounceAndThrottle } from "@dxos/async";
 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 = /* @__PURE__ */ (function(Inline2) {
@@ -3519,7 +3614,7 @@ var addList = (type) => {
     let counter = 1;
     let first = true;
     let parentColumn = null;
-    const blocks = [];
+    const blocks2 = [];
     for (const { from, to } of state.selection.ranges) {
       syntaxTree2(state).iterate({
         from,
@@ -3550,7 +3645,7 @@ var addList = (type) => {
               return;
             }
             lastBlock = node.from;
-            blocks.push({
+            blocks2.push({
               node: node.node,
               counter,
               parentColumn
@@ -3567,7 +3662,7 @@ var addList = (type) => {
         }
       });
     }
-    if (!blocks.length) {
+    if (!blocks2.length) {
       const { from, to } = state.doc.lineAt(state.selection.main.anchor);
       if (from === to) {
         const insert = type === 1 ? "- " : type === 0 ? "1. " : "- [ ] ";
@@ -3589,8 +3684,8 @@ var addList = (type) => {
       return false;
     }
     const changes = [];
-    for (let i = 0; i < blocks.length; i++) {
-      const { node, counter: counter2, parentColumn: parentColumn2 } = blocks[i];
+    for (let i = 0; i < blocks2.length; i++) {
+      const { node, counter: counter2, parentColumn: parentColumn2 } = blocks2[i];
       const nodeFrom = node.name === "CodeBlock" ? node.from - 4 : node.from;
       let padding = nodeFrom > 0 && !/\s/.test(state.doc.sliceString(nodeFrom - 1, nodeFrom)) ? 1 : 0;
       if (type === 0) {
@@ -3604,8 +3699,8 @@ var addList = (type) => {
       let mark;
       if (type === 0) {
         let max = counter2;
-        for (let j = i + 1; j < blocks.length; j++) {
-          if (blocks[j].counter !== max + 1) {
+        for (let j = i + 1; j < blocks2.length; j++) {
+          if (blocks2[j].counter !== max + 1) {
             break;
           }
           max++;
@@ -3630,7 +3725,7 @@ var addList = (type) => {
       }
     }
     if (type === 0) {
-      const last = blocks[blocks.length - 1];
+      const last = blocks2[blocks2.length - 1];
       let next = last.node.nextSibling;
       while (next && /Mark$/.test(next.name)) {
         next = next.nextSibling;
@@ -3934,7 +4029,7 @@ var toggleCodeblock = (target) => {
 };
 var formattingKeymap = (_options = {}) => {
   return [
-    keymap7.of([
+    keymap8.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -4134,19 +4229,18 @@ var getFormatting = (state) => {
     listStyle: listStyle || null
   };
 };
-var useFormattingState = (state) => {
-  const handleUpdate = useCallback(debounceAndThrottle((update2) => {
+var formattingListener = (stateProvider, delay = 100) => {
+  return EditorView19.updateListener.of(debounceAndThrottle((update2) => {
     if (update2.docChanged || update2.selectionSet) {
+      const state = stateProvider();
+      if (!state) {
+        return;
+      }
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
       });
     }
-  }, 100), [
-    state
-  ]);
-  return useMemo(() => EditorView17.updateListener.of(handleUpdate), [
-    handleUpdate
-  ]);
+  }, delay));
 };
 
 // src/extensions/markdown/action.ts
@@ -4201,10 +4295,12 @@ var processEditorPayload = (view, { type, data }) => {
 // src/extensions/markdown/bundle.ts
 import { completionKeymap } from "@codemirror/autocomplete";
 import { defaultKeymap as defaultKeymap2, indentWithTab as indentWithTab2 } from "@codemirror/commands";
+import { jsonLanguage } from "@codemirror/lang-json";
 import { markdown, markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
-import { syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
+import { xml } from "@codemirror/lang-xml";
+import { LanguageDescription, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
-import { keymap as keymap8 } from "@codemirror/view";
+import { keymap as keymap9 } from "@codemirror/view";
 import { isTruthy as isTruthy3 } from "@dxos/util";
 
 // src/extensions/markdown/highlight.ts
@@ -4318,7 +4414,8 @@ var markdownHighlightStyle = (_options = {}) => {
     // Fonts.
     {
       tag: [
-        tags.monospace
+        tags.monospace,
+        tags.comment
       ],
       class: "font-mono"
     },
@@ -4400,6 +4497,7 @@ var createMarkdownExtensions = (options = {}) => {
       // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
       base: markdownLanguage2,
       // Languages for syntax highlighting fenced code blocks.
+      defaultCodeLanguage: jsonLanguage,
       codeLanguages: languages,
       // Don't complete HTML tags.
       completeHTMLTags: false,
@@ -4412,7 +4510,7 @@ var createMarkdownExtensions = (options = {}) => {
     }),
     // Custom styles.
     syntaxHighlighting2(markdownHighlightStyle()),
-    keymap8.of([
+    keymap9.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       options.indentWithTab !== false && indentWithTab2,
       // https://codemirror.net/docs/ref/#commands.defaultKeymap
@@ -4422,6 +4520,18 @@ var createMarkdownExtensions = (options = {}) => {
     ].filter(isTruthy3))
   ];
 };
+var xmlLanguageDesc = LanguageDescription.of({
+  name: "xml",
+  alias: [
+    "html",
+    "xhtml"
+  ],
+  extensions: [
+    "xml",
+    "xhtml"
+  ],
+  load: async () => xml()
+});
 var defaultExtensions = () => [
   noSetExtHeading,
   noHtml
@@ -4431,17 +4541,12 @@ var noSetExtHeading = {
     "SetextHeading"
   ]
 };
-var noHtml = {
-  remove: [
-    "HTMLBlock",
-    "HTMLTag"
-  ]
-};
+var noHtml = {};
 
 // src/extensions/markdown/debug.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { StateField as StateField5 } from "@codemirror/state";
-var debugTree = (cb) => StateField5.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))
 });
@@ -4467,17 +4572,17 @@ var convertTreeToJson = (state) => {
 
 // src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
-import { Prec as Prec3, RangeSetBuilder as RangeSetBuilder4, StateEffect as StateEffect5 } from "@codemirror/state";
-import { Decoration as Decoration10, EditorView as EditorView21, ViewPlugin as ViewPlugin12, WidgetType as WidgetType7 } from "@codemirror/view";
+import { Prec as Prec4, RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect7 } from "@codemirror/state";
+import { Decoration as Decoration11, EditorView as EditorView23, ViewPlugin as ViewPlugin14, WidgetType as WidgetType7 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 
 // src/extensions/markdown/changes.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { Transaction as Transaction4 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin11 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin13 } from "@codemirror/view";
 var adjustChanges = () => {
-  return ViewPlugin11.fromClass(class {
+  return ViewPlugin13.fromClass(class {
     update(update2) {
       const tree = syntaxTree4(update2.state);
       const adjustments = [];
@@ -4618,26 +4723,13 @@ var getValidUrl = (str) => {
 
 // src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { StateField as StateField6 } from "@codemirror/state";
-import { Decoration as Decoration8, EditorView as EditorView18, WidgetType as WidgetType5 } from "@codemirror/view";
-function _define_property13(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
+import { StateField as StateField7 } from "@codemirror/state";
+import { Decoration as Decoration9, EditorView as EditorView20, WidgetType as WidgetType5 } from "@codemirror/view";
 var image = (_options = {}) => {
   return [
-    StateField6.define({
+    StateField7.define({
       create: (state) => {
-        return Decoration8.set(buildDecorations(state, 0, state.doc.length));
+        return Decoration9.set(buildDecorations(state, 0, state.doc.length));
       },
       update: (value, tr) => {
         if (!tr.docChanged && !tr.selection) {
@@ -4660,7 +4752,7 @@ var image = (_options = {}) => {
           add: buildDecorations(tr.state, from, to)
         });
       },
-      provide: (field) => EditorView18.decorations.from(field)
+      provide: (field) => EditorView20.decorations.from(field)
     })
   ];
 };
@@ -4678,7 +4770,7 @@ var buildDecorations = (state, from, to) => {
             return;
           }
           preloadImage(url);
-          decorations2.push(Decoration8.replace({
+          decorations2.push(Decoration9.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -4699,6 +4791,10 @@ var preloadImage = (url) => {
   }
 };
 var ImageWidget = class extends WidgetType5 {
+  _url;
+  constructor(_url) {
+    super(), this._url = _url;
+  }
   eq(other) {
     return this._url === other._url;
   }
@@ -4713,16 +4809,13 @@ var ImageWidget = class extends WidgetType5 {
     }
     return img;
   }
-  constructor(_url) {
-    super(), _define_property13(this, "_url", void 0), this._url = _url;
-  }
 };
 
 // src/extensions/markdown/styles.ts
-import { EditorView as EditorView19 } from "@codemirror/view";
+import { EditorView as EditorView21 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView19.theme({
+var formattingStyles = EditorView21.theme({
   /**
   * Horizontal rule.
   */
@@ -4843,30 +4936,17 @@ var formattingStyles = EditorView19.theme({
 
 // src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField7 } from "@codemirror/state";
-import { Decoration as Decoration9, EditorView as EditorView20, WidgetType as WidgetType6 } from "@codemirror/view";
-function _define_property14(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
+import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField8 } from "@codemirror/state";
+import { Decoration as Decoration10, EditorView as EditorView22, WidgetType as WidgetType6 } from "@codemirror/view";
 var table = (options = {}) => {
-  return StateField7.define({
+  return StateField8.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView20.decorations.from(field)
+    provide: (field) => EditorView22.decorations.from(field)
   });
 };
 var update = (state, _options) => {
-  const builder = new RangeSetBuilder3();
+  const builder = new RangeSetBuilder4();
   const cursor2 = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -4889,8 +4969,7 @@ var update = (state, _options) => {
           break;
         }
         case "TableRow": {
-          var _getTable;
-          ((_getTable = getTable()).rows ?? (_getTable.rows = [])).push([]);
+          (getTable().rows ??= []).push([]);
           break;
         }
         case "TableCell": {
@@ -4908,12 +4987,12 @@ var update = (state, _options) => {
   tables.forEach((table2) => {
     const replace = state.readOnly || cursor2 < table2.from || cursor2 > table2.to;
     if (replace) {
-      builder.add(table2.from, table2.to, Decoration9.replace({
+      builder.add(table2.from, table2.to, Decoration10.replace({
         block: true,
         widget: new TableWidget(table2)
       }));
     } else {
-      builder.add(table2.from, table2.to, Decoration9.mark({
+      builder.add(table2.from, table2.to, Decoration10.mark({
         class: "cm-table"
       }));
     }
@@ -4921,10 +5000,17 @@ var update = (state, _options) => {
   return builder.finish();
 };
 var TableWidget = class extends WidgetType6 {
+  _table;
+  constructor(_table) {
+    super(), this._table = _table;
+  }
   eq(other) {
     return this._table.header?.join() === other._table.header?.join() && this._table.rows?.join() === other._table.rows?.join();
   }
-  toDOM(view) {
+  ignoreEvent(e) {
+    return !/^mouse/.test(e.type);
+  }
+  toDOM(_view) {
     const div = document.createElement("div");
     const table2 = div.appendChild(document.createElement("table"));
     const header = table2.appendChild(document.createElement("thead"));
@@ -4945,28 +5031,9 @@ var TableWidget = class extends WidgetType6 {
     });
     return div;
   }
-  ignoreEvent(e) {
-    return !/^mouse/.test(e.type);
-  }
-  constructor(_table) {
-    super(), _define_property14(this, "_table", void 0), this._table = _table;
-  }
 };
 
 // src/extensions/markdown/decorate.ts
-function _define_property15(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var __dxlog_file10 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
 var Unicode = {
   emDash: "\u2014",
@@ -4982,6 +5049,11 @@ var HorizontalRuleWidget = class extends WidgetType7 {
   }
 };
 var LinkButton = class extends WidgetType7 {
+  url;
+  render;
+  constructor(url, render) {
+    super(), this.url = url, this.render = render;
+  }
   eq(other) {
     return this.url === other.url;
   }
@@ -4993,14 +5065,18 @@ var LinkButton = class extends WidgetType7 {
     }, view);
     return el;
   }
-  constructor(url, render) {
-    super(), _define_property15(this, "url", void 0), _define_property15(this, "render", void 0), this.url = url, this.render = render;
-  }
 };
 var CheckboxWidget = class extends WidgetType7 {
+  _checked;
+  constructor(_checked) {
+    super(), this._checked = _checked;
+  }
   eq(other) {
     return this._checked === other._checked;
   }
+  ignoreEvent() {
+    return false;
+  }
   toDOM(view) {
     const input = document.createElement("input");
     input.className = "cm-task-checkbox dx-checkbox";
@@ -5034,14 +5110,13 @@ var CheckboxWidget = class extends WidgetType7 {
     span.appendChild(input);
     return span;
   }
-  ignoreEvent() {
-    return false;
-  }
-  constructor(_checked) {
-    super(), _define_property15(this, "_checked", void 0), this._checked = _checked;
-  }
 };
 var TextWidget = class extends WidgetType7 {
+  text;
+  className;
+  constructor(text, className) {
+    super(), this.text = text, this.className = className;
+  }
   toDOM() {
     const el = document.createElement("span");
     if (this.className) {
@@ -5050,33 +5125,30 @@ var TextWidget = class extends WidgetType7 {
     el.innerText = this.text;
     return el;
   }
-  constructor(text, className) {
-    super(), _define_property15(this, "text", void 0), _define_property15(this, "className", void 0), this.text = text, this.className = className;
-  }
 };
-var hide = Decoration10.replace({});
-var blockQuote = Decoration10.line({
+var hide = Decoration11.replace({});
+var blockQuote = Decoration11.line({
   class: "cm-blockquote"
 });
-var fencedCodeLine = Decoration10.line({
+var fencedCodeLine = Decoration11.line({
   class: "cm-code cm-codeblock-line"
 });
-var fencedCodeLineFirst = Decoration10.line({
-  class: mx4("cm-code cm-codeblock-line", "cm-codeblock-start")
+var fencedCodeLineFirst = Decoration11.line({
+  class: mx5("cm-code cm-codeblock-line", "cm-codeblock-start")
 });
-var fencedCodeLineLast = Decoration10.line({
-  class: mx4("cm-code cm-codeblock-line", "cm-codeblock-end")
+var fencedCodeLineLast = Decoration11.line({
+  class: mx5("cm-code cm-codeblock-line", "cm-codeblock-end")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
 var commentBlockLineLast = fencedCodeLineLast;
-var horizontalRule = Decoration10.replace({
+var horizontalRule = Decoration11.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = Decoration10.replace({
+var checkedTask = Decoration11.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = Decoration10.replace({
+var uncheckedTask = Decoration11.replace({
   widget: new CheckboxWidget(false)
 });
 var editingRange = (state, range, focus2) => {
@@ -5092,8 +5164,8 @@ var autoHideTags = /* @__PURE__ */ new Set([
   "SuperscriptMark"
 ]);
 var buildDecorations2 = (view, options, focus2) => {
-  const deco = new RangeSetBuilder4();
-  const atomicDeco = new RangeSetBuilder4();
+  const deco = new RangeSetBuilder5();
+  const atomicDeco = new RangeSetBuilder5();
   const { state } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
@@ -5180,7 +5252,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, Decoration10.replace({
+              atomicDeco.add(mark.from, mark.from + len, Decoration11.replace({
                 widget: new TextWidget(num, theme.heading(level))
               }));
             }
@@ -5205,7 +5277,7 @@ var buildDecorations2 = (view, options, focus2) => {
         if (node.from === line.to - 1) {
           return false;
         }
-        deco.add(line.from, line.from, Decoration10.line({
+        deco.add(line.from, line.from, Decoration11.line({
           class: "cm-list-item",
           attributes: {
             style: `padding-left: ${offset}px; text-indent: -${width}px;`
@@ -5222,7 +5294,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, Decoration10.replace({
+        atomicDeco.add(line.from, to, Decoration11.replace({
           widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
         }));
         break;
@@ -5315,7 +5387,7 @@ var buildDecorations2 = (view, options, focus2) => {
           if (!editing) {
             atomicDeco.add(node.from, marks[0].to, hide);
           }
-          deco.add(marks[0].to, marks[1].from, Decoration10.mark({
+          deco.add(marks[0].to, marks[1].from, Decoration11.mark({
             tagName: "a",
             attributes: {
               class: "cm-link",
@@ -5325,7 +5397,7 @@ var buildDecorations2 = (view, options, focus2) => {
             }
           }));
           if (!editing) {
-            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration10.replace({
+            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration11.replace({
               widget: new LinkButton(url, options.renderLinkButton)
             }) : hide);
           }
@@ -5380,10 +5452,16 @@ var buildDecorations2 = (view, options, focus2) => {
     atomicDeco: atomicDeco.finish()
   };
 };
-var forceUpdate = StateEffect5.define();
+var forceUpdate = StateEffect7.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin12.fromClass(class {
+    ViewPlugin14.fromClass(class {
+      deco;
+      atomicDeco;
+      pendingUpdate;
+      constructor(view) {
+        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
+      }
       update(update2) {
         if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(forceUpdate))) || update2.selectionSet && !options.selectionChangeDelay) {
           ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(update2.view, options, update2.view.hasFocus));
@@ -5410,17 +5488,11 @@ var decorateMarkdown = (options = {}) => {
       destroy() {
         this.clearUpdate();
       }
-      constructor(view) {
-        _define_property15(this, "deco", void 0);
-        _define_property15(this, "atomicDeco", void 0);
-        _define_property15(this, "pendingUpdate", void 0);
-        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
-      }
     }, {
       provide: (plugin) => [
-        Prec3.low(EditorView21.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration10.none)),
-        EditorView21.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration10.none),
-        EditorView21.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration10.none)
+        Prec4.low(EditorView23.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration11.none)),
+        EditorView23.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none),
+        EditorView23.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none)
       ]
     }),
     image(),
@@ -5514,7 +5586,7 @@ var mention = ({ debug, onSearch }) => {
 };
 
 // src/extensions/modes.ts
-import { keymap as keymap9 } from "@codemirror/view";
+import { keymap as keymap10 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
 import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
 var editorInputMode = singleValueFacet({});
@@ -5525,7 +5597,7 @@ var InputModeExtensions = {
     editorInputMode.of({
       type: "vscode"
     }),
-    keymap9.of(vscodeKeymap)
+    keymap10.of(vscodeKeymap)
   ],
   vim: [
     // https://github.com/replit/codemirror-vim
@@ -5534,7 +5606,7 @@ var InputModeExtensions = {
       type: "vim",
       ignoreEscape: true
     }),
-    keymap9.of([
+    keymap10.of([
       {
         key: "Alt-Escape",
         run: (view) => {
@@ -5550,29 +5622,16 @@ var InputModeExtensions = {
 import { indentMore } from "@codemirror/commands";
 import { getIndentUnit } from "@codemirror/language";
 import { EditorSelection as EditorSelection3 } from "@codemirror/state";
-import { keymap as keymap10 } from "@codemirror/view";
+import { keymap as keymap11 } from "@codemirror/view";
 
 // src/extensions/outliner/selection.ts
 import { Compartment, Facet as Facet3 } from "@codemirror/state";
 
 // src/extensions/outliner/tree.ts
 import { syntaxTree as syntaxTree9 } from "@codemirror/language";
-import { StateField as StateField8 } from "@codemirror/state";
+import { StateField as StateField9 } from "@codemirror/state";
 import { Facet as Facet2 } from "@codemirror/state";
 import { invariant as invariant5 } from "@dxos/invariant";
-function _define_property16(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var __dxlog_file12 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/tree.ts";
 var itemToJSON = ({ type, index, level, lineRange, contentRange, children }) => {
   return {
@@ -5585,6 +5644,21 @@ var itemToJSON = ({ type, index, level, lineRange, contentRange, children }) =>
   };
 };
 var Tree = class {
+  type = "root";
+  index = -1;
+  level = -1;
+  node;
+  lineRange;
+  contentRange;
+  children = [];
+  constructor(node) {
+    this.node = node;
+    this.lineRange = {
+      from: node.from,
+      to: node.to
+    };
+    this.contentRange = this.lineRange;
+  }
   toJSON() {
     return itemToJSON(this);
   }
@@ -5634,21 +5708,6 @@ var Tree = class {
   lastDescendant(item) {
     return item.children.length > 0 ? this.lastDescendant(item.children.at(-1)) : item;
   }
-  constructor(node) {
-    _define_property16(this, "type", "root");
-    _define_property16(this, "index", -1);
-    _define_property16(this, "level", -1);
-    _define_property16(this, "node", void 0);
-    _define_property16(this, "lineRange", void 0);
-    _define_property16(this, "contentRange", void 0);
-    _define_property16(this, "children", []);
-    this.node = node;
-    this.lineRange = {
-      from: node.from,
-      to: node.to
-    };
-    this.contentRange = this.lineRange;
-  }
 };
 var getRange = (tree, item) => {
   const lastDescendant = tree.lastDescendant(item);
@@ -5855,7 +5914,7 @@ var outlinerTree = (_options = {}) => {
     return tree;
   };
   return [
-    StateField8.define({
+    StateField9.define({
       create: (state) => {
         return buildTree(state);
       },
@@ -6029,7 +6088,7 @@ var toggleTask = (view) => {
   }
   return true;
 };
-var commands = () => keymap10.of([
+var commands = () => keymap11.of([
   //
   // Indentation.
   //
@@ -6135,18 +6194,18 @@ var commands = () => keymap10.of([
 ]);
 
 // src/extensions/outliner/outliner.ts
-import { Prec as Prec4 } from "@codemirror/state";
-import { Decoration as Decoration11, EditorView as EditorView23, ViewPlugin as ViewPlugin15 } from "@codemirror/view";
-import { mx as mx5 } from "@dxos/react-ui-theme";
+import { Prec as Prec5 } from "@codemirror/state";
+import { Decoration as Decoration12, EditorView as EditorView25, ViewPlugin as ViewPlugin17 } from "@codemirror/view";
+import { mx as mx6 } from "@dxos/react-ui-theme";
 
 // src/extensions/outliner/editor.ts
 import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin13 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin15 } from "@codemirror/view";
 import { log as log8 } from "@dxos/log";
 var __dxlog_file13 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/editor.ts";
 var LIST_ITEM_REGEX = /^\s*- (\[ \]|\[x\])? /;
 var initialize = () => {
-  return ViewPlugin13.fromClass(class {
+  return ViewPlugin15.fromClass(class {
     constructor(view) {
       const first = view.state.doc.lineAt(0);
       const text = view.state.sliceDoc(first.from, first.to);
@@ -6329,23 +6388,32 @@ var editor = () => [
 ];
 
 // src/extensions/outliner/menu.ts
-import { EditorView as EditorView22, ViewPlugin as ViewPlugin14 } from "@codemirror/view";
+import { EditorView as EditorView24, ViewPlugin as ViewPlugin16 } from "@codemirror/view";
 import { addEventListener } from "@dxos/async";
-function _define_property17(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var menu = (options = {}) => [
-  ViewPlugin14.fromClass(class {
+  ViewPlugin16.fromClass(class {
+    view;
+    tag;
+    rafId;
+    cleanup;
+    constructor(view) {
+      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-vertical--regular");
+        this.tag = document.createElement("dx-anchor");
+        this.tag.classList.add("cm-popover-trigger");
+        this.tag.appendChild(icon);
+      }
+      container.appendChild(this.tag);
+      const handler = () => this.scheduleUpdate();
+      this.cleanup = addEventListener(container, "scroll", handler);
+      this.scheduleUpdate();
+    }
     destroy() {
       this.cleanup?.();
       this.tag.remove();
@@ -6370,8 +6438,8 @@ var menu = (options = {}) => [
       if (!coords) {
         return;
       }
-      const lineHeight2 = coords.bottom - coords.top;
-      const dy = (lineHeight2 - (options.height ?? 32)) / 2;
+      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`;
@@ -6384,30 +6452,8 @@ var menu = (options = {}) => [
       }
       this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
     }
-    constructor(view) {
-      _define_property17(this, "view", void 0);
-      _define_property17(this, "tag", void 0);
-      _define_property17(this, "rafId", void 0);
-      _define_property17(this, "cleanup", void 0);
-      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-vertical--regular");
-        this.tag = document.createElement("dx-anchor");
-        this.tag.classList.add("cm-popover-trigger");
-        this.tag.appendChild(icon);
-      }
-      container.appendChild(this.tag);
-      const handler = () => this.scheduleUpdate();
-      this.cleanup = addEventListener(container, "scroll", handler);
-      this.scheduleUpdate();
-    }
   }),
-  EditorView22.theme({
+  EditorView24.theme({
     ".cm-popover-trigger": {
       position: "fixed",
       padding: "0",
@@ -6425,22 +6471,9 @@ var menu = (options = {}) => [
 ];
 
 // src/extensions/outliner/outliner.ts
-function _define_property18(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var outliner = (_options = {}) => [
   // Commands.
-  Prec4.highest(commands()),
+  Prec5.highest(commands()),
   // Selection.
   selectionCompartment.of(selectionFacet.of([])),
   // State.
@@ -6456,12 +6489,16 @@ var outliner = (_options = {}) => [
     listPaddingLeft: 8
   }),
   // Researve space for menu.
-  EditorView23.contentAttributes.of({
+  EditorView25.contentAttributes.of({
     class: "is-full !mr-[3rem]"
   })
 ];
 var decorations = () => [
-  ViewPlugin15.fromClass(class {
+  ViewPlugin17.fromClass(class {
+    decorations = Decoration12.none;
+    constructor(view) {
+      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) {
@@ -6481,22 +6518,18 @@ var decorations = () => [
           const lineFrom = doc.lineAt(item.contentRange.from);
           const lineTo = doc.lineAt(item.contentRange.to);
           const isSelected = selection.includes(item.index) || item === current;
-          decorations2.push(Decoration11.line({
-            class: mx5("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"))
+          decorations2.push(Decoration12.line({
+            class: mx6("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 = Decoration11.set(decorations2);
-    }
-    constructor(view) {
-      _define_property18(this, "decorations", Decoration11.none);
-      this.updateDecorations(view.state, view);
+      this.decorations = Decoration12.set(decorations2);
     }
   }, {
     decorations: (v) => v.decorations
   }),
   // Theme.
-  EditorView23.theme(Object.assign({
+  EditorView25.theme(Object.assign({
     ".cm-list-item": {
       borderLeftWidth: "1px",
       borderRightWidth: "1px",
@@ -6728,9 +6761,9 @@ var linkSlashCommands = {
 };
 
 // src/extensions/popover/modal.ts
-import { StateEffect as StateEffect6, StateField as StateField9 } from "@codemirror/state";
-var modalStateEffect = StateEffect6.define();
-var modalStateField = StateField9.define({
+import { StateEffect as StateEffect8, StateField as StateField10 } from "@codemirror/state";
+var modalStateEffect = StateEffect8.define();
+var modalStateField = StateField10.define({
   create: () => false,
   update: (value, tr) => {
     let newValue = value;
@@ -6744,29 +6777,16 @@ var modalStateField = StateField9.define({
 });
 
 // src/extensions/popover/popover.ts
-import { Prec as Prec5, RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect7, StateField as StateField10 } from "@codemirror/state";
-import { Decoration as Decoration12, EditorView as EditorView24, ViewPlugin as ViewPlugin16, keymap as keymap11 } from "@codemirror/view";
-import { isNonNullable as isNonNullable2, isTruthy as isTruthy4 } from "@dxos/util";
-function _define_property19(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
+import { Prec as Prec6, RangeSetBuilder as RangeSetBuilder6, StateEffect as StateEffect9, StateField as StateField11 } from "@codemirror/state";
+import { Decoration as Decoration13, EditorView as EditorView26, ViewPlugin as ViewPlugin18, keymap as keymap12 } from "@codemirror/view";
+import { isNonNullable as isNonNullable3, isTruthy as isTruthy4 } from "@dxos/util";
 var DELIMITERS = [
   " ",
   ":"
 ];
 var popover = (options = {}) => {
   return [
-    Prec5.highest(popoverKeymap(options)),
+    Prec6.highest(popoverKeymap(options)),
     popoverStateField,
     popoverTriggerListener(options),
     popoverAnchorDecoration(options),
@@ -6778,7 +6798,7 @@ var popover = (options = {}) => {
     })
   ].filter(isTruthy4);
 };
-var popoverTriggerListener = (options) => EditorView24.updateListener.of(({ view, docChanged }) => {
+var popoverTriggerListener = (options) => EditorView26.updateListener.of(({ view, docChanged }) => {
   const { range: activeRange, trigger } = view.state.field(popoverStateField) ?? {};
   if (!activeRange) {
     return;
@@ -6814,9 +6834,9 @@ var popoverKeymap = (options) => {
   const triggers = Array.isArray(options.trigger) ? options.trigger : [
     options.trigger
   ];
-  return keymap11.of([
+  return keymap12.of([
     // Prefix triggers.
-    ...triggers.filter(isNonNullable2).map((trigger) => ({
+    ...triggers.filter(isNonNullable3).map((trigger) => ({
       key: trigger,
       run: (view) => {
         const selection = view.state.selection.main;
@@ -6858,7 +6878,6 @@ var popoverKeymap = (options) => {
           str = str.slice(idx + 1);
         }
         const from = line.from + idx;
-        console.log("effect", from + 1, selection.head);
         view.dispatch({
           effects: popoverRangeEffect.of({
             range: {
@@ -6927,17 +6946,21 @@ var popoverKeymap = (options) => {
   ].filter(isTruthy4));
 };
 var popoverAnchorDecoration = (options) => {
-  return ViewPlugin16.fromClass(class {
+  return ViewPlugin18.fromClass(class {
+    view;
+    _decorations = Decoration13.none;
+    constructor(view) {
+      this.view = view;
+    }
     // TODO(wittjosiah): The decorations are repainted on every update, this occasionally causes menu to flicker.
     update({ view, transactions }) {
-      const builder = new RangeSetBuilder5();
+      const builder = new RangeSetBuilder6();
       const { range, trigger } = view.state.field(popoverStateField) ?? {};
       if (range) {
         const selection = view.state.selection.main;
         const showWidget = selection.head >= range.from && selection.head <= range.to;
-        console.log("update", showWidget, range.from, range.to + 1);
         if (showWidget) {
-          builder.add(range.from, range.to + 1, Decoration12.mark({
+          builder.add(range.from, range.to + 1, Decoration13.mark({
             tagName: "dx-anchor",
             class: "cm-popover-trigger",
             attributes: {
@@ -6957,23 +6980,15 @@ var popoverAnchorDecoration = (options) => {
             trigger
           });
         }
-      } else {
-        console.log("remove");
       }
       this._decorations = builder.finish();
     }
-    constructor(view) {
-      _define_property19(this, "view", void 0);
-      _define_property19(this, "_decorations", void 0);
-      this.view = view;
-      this._decorations = Decoration12.none;
-    }
   }, {
     decorations: (v) => v._decorations
   });
 };
-var popoverRangeEffect = StateEffect7.define();
-var popoverStateField = StateField10.define({
+var popoverRangeEffect = StateEffect9.define();
+var popoverStateField = StateField11.define({
   create: () => null,
   update: (value, tr) => {
     let newValue = value;
@@ -6990,7 +7005,7 @@ var getLastIndexOf = (str, delimiters) => Math.max(...delimiters.map((delim) =>
 // src/extensions/popover/PopoverMenuProvider.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React3, { Fragment, useCallback as useCallback2, useEffect as useEffect2, useRef, useState } from "react";
+import React3, { Fragment, useCallback, useEffect as useEffect2, useRef, useState } from "react";
 import { addEventListener as addEventListener2 } from "@dxos/async";
 import { invariant as invariant6 } from "@dxos/invariant";
 import { Icon as Icon2, Popover, toLocalizedString, useDynamicRef, useThemeContext, useTranslation } from "@dxos/react-ui";
@@ -7027,7 +7042,6 @@ var PopoverMenuProvider = ({ children, view, groups, currentItem, open: openPara
       }
       return addEventListener2(root, "dx-anchor-activate", (event) => {
         const { trigger, refId } = event;
-        console.log("update", trigger, refId);
         if (!refId) {
           triggerRef.current = trigger;
           if (onActivate) {
@@ -7047,10 +7061,10 @@ var PopoverMenuProvider = ({ children, view, groups, currentItem, open: openPara
       root,
       onActivate
     ]);
-    const handleSelect = useCallback2((item) => {
+    const handleSelect = useCallback((item) => {
       invariant6(viewRef.current, void 0, {
         F: __dxlog_file14,
-        L: 101,
+        L: 100,
         S: void 0,
         A: [
           "viewRef.current",
@@ -7065,7 +7079,7 @@ var PopoverMenuProvider = ({ children, view, groups, currentItem, open: openPara
       viewRef,
       onSelect
     ]);
-    const menuGroups = groups.filter((group) => group.items.length > 0);
+    const menuGroups = groups?.filter((group) => group.items.length > 0) ?? [];
     return /* @__PURE__ */ React3.createElement(Popover.Root, {
       modal: false,
       open,
@@ -7157,7 +7171,7 @@ var MenuItem = ({ item, current, onSelect }) => {
     }, [
       current
     ]);
-    const handleSelect = useCallback2(() => onSelect?.(item), [
+    const handleSelect = useCallback(() => onSelect?.(item), [
       item,
       onSelect
     ]);
@@ -7179,7 +7193,7 @@ var MenuItem = ({ item, current, onSelect }) => {
 };
 
 // src/extensions/popover/usePopoverMenu.ts
-import { useCallback as useCallback3, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useMemo, useRef as useRef2, useState as useState2 } from "react";
 import { invariant as invariant7 } from "@dxos/invariant";
 var __dxlog_file15 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/popover/usePopoverMenu.ts";
 var usePopoverMenu = ({ trigger, triggerKey, placeholder: placeholder3, filter = true, getMenu }) => {
@@ -7188,7 +7202,7 @@ var usePopoverMenu = ({ trigger, triggerKey, placeholder: placeholder3, filter =
   const [currentItem, setCurrentItem] = useState2();
   const [open, setOpen] = useState2(false);
   const [_, refresh] = useState2({});
-  const getMenuOptions = useCallback3(async ({ text, trigger: trigger2, ...props }) => {
+  const getMenuOptions = useCallback2(async ({ text, trigger: trigger2, ...props }) => {
     const groups = await getMenu?.({
       text,
       trigger: trigger2,
@@ -7199,7 +7213,7 @@ var usePopoverMenu = ({ trigger, triggerKey, placeholder: placeholder3, filter =
     getMenu,
     filter
   ]);
-  const handleOpenChange = useCallback3(async ({ view, open: open2 }) => {
+  const handleOpenChange = useCallback2(async ({ view, open: open2 }) => {
     invariant7(view, void 0, {
       F: __dxlog_file15,
       L: 76,
@@ -7228,7 +7242,7 @@ var usePopoverMenu = ({ trigger, triggerKey, placeholder: placeholder3, filter =
   }, [
     getMenuOptions
   ]);
-  const handleActivate = useCallback3(async ({ view, trigger: trigger2 }) => {
+  const handleActivate = useCallback2(async ({ view, trigger: trigger2 }) => {
     const item = getMenuItem(groupsRef.current, currentItem);
     if (item) {
       currentRef.current = item;
@@ -7244,10 +7258,10 @@ var usePopoverMenu = ({ trigger, triggerKey, placeholder: placeholder3, filter =
     open,
     handleOpenChange
   ]);
-  const handleSelect = useCallback3(({ view, item }) => {
+  const handleSelect = useCallback2(({ view, item }) => {
     void item.onSelect?.(view, view.state.selection.main.head);
   }, []);
-  const handleCancel = useCallback3(({ view }) => {
+  const handleCancel = useCallback2(({ view }) => {
     const { range, trigger: trigger2 } = view.state.field(popoverStateField) ?? {};
     if (range && trigger2) {
       view.dispatch({
@@ -7259,7 +7273,7 @@ var usePopoverMenu = ({ trigger, triggerKey, placeholder: placeholder3, filter =
     }
   }, []);
   const serializedTrigger = Array.isArray(trigger) ? trigger.join(",") : trigger;
-  const extension = useMemo2(() => {
+  const extension = useMemo(() => {
     return popover({
       trigger,
       triggerKey,
@@ -7325,26 +7339,13 @@ var usePopoverMenu = ({ trigger, triggerKey, placeholder: placeholder3, filter =
 
 // src/extensions/preview/preview.ts
 import { syntaxTree as syntaxTree10 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField11 } from "@codemirror/state";
-import { Decoration as Decoration13, EditorView as EditorView25, WidgetType as WidgetType8 } from "@codemirror/view";
-function _define_property20(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
+import { RangeSetBuilder as RangeSetBuilder7, StateField as StateField12 } from "@codemirror/state";
+import { Decoration as Decoration14, EditorView as EditorView27, WidgetType as WidgetType8 } 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({
+    StateField12.define({
       create: (state) => buildDecorations3(state, options),
       update: (decorations2, tr) => {
         if (tr.docChanged) {
@@ -7353,14 +7354,14 @@ var preview = (options = {}) => {
         return decorations2.map(tr.changes);
       },
       provide: (field) => [
-        EditorView25.decorations.from(field),
-        EditorView25.atomicRanges.of((view) => view.state.field(field))
+        EditorView27.decorations.from(field),
+        EditorView27.atomicRanges.of((view) => view.state.field(field))
       ]
     })
   ];
 };
 var buildDecorations3 = (state, options) => {
-  const builder = new RangeSetBuilder6();
+  const builder = new RangeSetBuilder7();
   syntaxTree10(state).iterate({
     enter: (node) => {
       switch (node.name) {
@@ -7371,7 +7372,7 @@ var buildDecorations3 = (state, options) => {
         case "Link": {
           const link = getLinkRef(state, node.node);
           if (link) {
-            builder.add(node.from, node.to, Decoration13.replace({
+            builder.add(node.from, node.to, Decoration14.replace({
               widget: new PreviewInlineWidget(options, link),
               side: 1
             }));
@@ -7386,7 +7387,7 @@ var buildDecorations3 = (state, options) => {
           if (options.addBlockContainer && options.removeBlockContainer) {
             const link = getLinkRef(state, node.node);
             if (link) {
-              builder.add(node.from, node.to, Decoration13.replace({
+              builder.add(node.from, node.to, Decoration14.replace({
                 block: true,
                 widget: new PreviewBlockWidget(options, link)
               }));
@@ -7415,6 +7416,11 @@ var getLinkRef = (state, node) => {
   }
 };
 var PreviewInlineWidget = class extends WidgetType8 {
+  _options;
+  _link;
+  constructor(_options, _link) {
+    super(), this._options = _options, this._link = _link;
+  }
   // override ignoreEvent() {
   //   return false;
   // }
@@ -7428,11 +7434,13 @@ var PreviewInlineWidget = class extends WidgetType8 {
     root.setAttribute("refId", this._link.ref);
     return root;
   }
-  constructor(_options, _link) {
-    super(), _define_property20(this, "_options", void 0), _define_property20(this, "_link", void 0), this._options = _options, this._link = _link;
-  }
 };
 var PreviewBlockWidget = class extends WidgetType8 {
+  _options;
+  _link;
+  constructor(_options, _link) {
+    super(), this._options = _options, this._link = _link;
+  }
   // override ignoreEvent() {
   //   return true;
   // }
@@ -7442,18 +7450,119 @@ var PreviewBlockWidget = class extends WidgetType8 {
   toDOM(_view) {
     const root = document.createElement("div");
     root.classList.add("cm-preview-block", "density-coarse");
-    this._options.addBlockContainer?.(this._link, root);
+    this._options.addBlockContainer?.({
+      link: this._link,
+      el: root
+    });
     return root;
   }
-  destroy() {
-    this._options.removeBlockContainer?.(this._link);
-  }
-  constructor(_options, _link) {
-    super(), _define_property20(this, "_options", void 0), _define_property20(this, "_link", void 0), this._options = _options, this._link = _link;
+  destroy(root) {
+    this._options.removeBlockContainer?.({
+      link: this._link,
+      el: root
+    });
   }
 };
 
-// src/extensions/tags/extended-markdown.ts
+// src/extensions/replacer.ts
+import { EditorView as EditorView28 } from "@codemirror/view";
+var defaultReplacements = [
+  {
+    input: "--",
+    output: "\u2014"
+  },
+  {
+    input: "...",
+    output: "\u2026"
+  },
+  {
+    input: "->",
+    output: "\u2192"
+  },
+  {
+    input: "<-",
+    output: "\u2190"
+  },
+  {
+    input: "=>",
+    output: "\u21D2"
+  },
+  {
+    input: "<=>",
+    output: "\u21D4"
+  },
+  {
+    input: "+-",
+    output: "\xB1"
+  },
+  {
+    input: "!=",
+    output: "\u2260"
+  },
+  {
+    input: "<=",
+    output: "\u2264"
+  },
+  {
+    input: ">=",
+    output: "\u2265"
+  },
+  {
+    input: "(c)",
+    output: "\xA9"
+  },
+  {
+    input: "EUR",
+    output: "\u20AC"
+  },
+  {
+    input: "GBP",
+    output: "\xA3"
+  },
+  {
+    input: "BTC",
+    output: "\u20BF"
+  }
+];
+var replacer = ({ replacements = defaultReplacements } = {}) => {
+  const sortedReplacements = [
+    ...replacements
+  ].sort((a, b) => b.input.length - a.input.length);
+  return EditorView28.inputHandler.of((view, from, to, insert) => {
+    if (insert.length !== 1) {
+      return false;
+    }
+    const state = view.state;
+    const doc = state.doc;
+    const lineStart = doc.lineAt(from).from;
+    const textBefore = doc.sliceString(lineStart, from);
+    const textWithInsert = textBefore + insert;
+    for (const replacement of sortedReplacements) {
+      if (textWithInsert.endsWith(replacement.input)) {
+        const range = {
+          from: from - replacement.input.length + 1,
+          to: from
+        };
+        if (range.from < lineStart) {
+          continue;
+        }
+        view.dispatch(state.update({
+          changes: {
+            ...range,
+            insert: replacement.output
+          },
+          selection: {
+            anchor: range.from + replacement.output.length
+          }
+        }));
+        return true;
+      }
+    }
+    return false;
+  });
+};
+
+// src/extensions/tags/extended-markdown.ts
 import { xmlLanguage } from "@codemirror/lang-xml";
 import { parseMixed } from "@lezer/common";
 var extendedMarkdown = ({ registry } = {}) => {
@@ -7508,23 +7617,10 @@ var mixedParser = (registry) => {
 };
 
 // src/extensions/tags/streamer.ts
-import { StateEffect as StateEffect8, StateField as StateField12 } from "@codemirror/state";
-import { Decoration as Decoration14, EditorView as EditorView26, ViewPlugin as ViewPlugin17, WidgetType as WidgetType9 } from "@codemirror/view";
+import { StateEffect as StateEffect10, StateField as StateField13 } from "@codemirror/state";
+import { Decoration as Decoration15, EditorView as EditorView29, ViewPlugin as ViewPlugin19, WidgetType as WidgetType9 } from "@codemirror/view";
 import { Domino as Domino3 } from "@dxos/react-ui";
 import { isTruthy as isTruthy5 } from "@dxos/util";
-function _define_property21(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var BLINK_RATE = 2e3;
 var streamer = (options = {}) => {
   return [
@@ -7533,8 +7629,8 @@ var streamer = (options = {}) => {
   ].filter(isTruthy5);
 };
 var cursor = () => {
-  const hideCursor = StateEffect8.define();
-  const showCursor = StateField12.define({
+  const hideCursor = StateEffect10.define();
+  const showCursor = StateField13.define({
     create: () => true,
     update: (value, tr) => {
       for (const effect of tr.effects) {
@@ -7548,7 +7644,12 @@ var cursor = () => {
       return value;
     }
   });
-  const timerPlugin = ViewPlugin17.fromClass(class {
+  const timerPlugin = ViewPlugin19.fromClass(class {
+    view;
+    timer;
+    constructor(view) {
+      this.view = view;
+    }
     update(update2) {
       if (update2.docChanged) {
         clearTimeout(this.timer);
@@ -7562,28 +7663,23 @@ var cursor = () => {
     destroy() {
       clearTimeout(this.timer);
     }
-    constructor(view) {
-      _define_property21(this, "view", void 0);
-      _define_property21(this, "timer", void 0);
-      this.view = view;
-    }
   });
-  const cursorDecoration = StateField12.define({
-    create: () => Decoration14.none,
+  const cursorDecoration = StateField13.define({
+    create: () => Decoration15.none,
     update: (_decorations, tr) => {
       const show = tr.state.field(showCursor);
       if (!show) {
-        return Decoration14.none;
+        return Decoration15.none;
       }
       const endPos = tr.state.doc.length;
-      return Decoration14.set([
-        Decoration14.widget({
+      return Decoration15.set([
+        Decoration15.widget({
           widget: new CursorWidget(),
           side: 1
         }).range(endPos)
       ]);
     },
-    provide: (f) => EditorView26.decorations.from(f)
+    provide: (f) => EditorView29.decorations.from(f)
   });
   return [
     showCursor,
@@ -7604,9 +7700,9 @@ var fadeIn = (options = {}) => {
   const FADE_IN_DURATION = 1e3;
   const DEFAULT_REMOVAL_DELAY = 5e3;
   const removalDelay = options.removalDelay ?? DEFAULT_REMOVAL_DELAY;
-  const removeDecoration = StateEffect8.define();
-  const fadeField = StateField12.define({
-    create: () => Decoration14.none,
+  const removeDecoration = StateEffect10.define();
+  const fadeField = StateField13.define({
+    create: () => Decoration15.none,
     update: (decorations2, tr) => {
       let next = decorations2;
       for (const effect of tr.effects) {
@@ -7629,7 +7725,7 @@ var fadeIn = (options = {}) => {
         });
       }
       if (isReset) {
-        return Decoration14.none;
+        return Decoration15.none;
       }
       const add = [];
       tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
@@ -7637,7 +7733,7 @@ var fadeIn = (options = {}) => {
           return;
         }
         if (toA === tr.startState.doc.length && inserted.length > 0) {
-          add.push(Decoration14.mark({
+          add.push(Decoration15.mark({
             class: "cm-fade-in"
           }).range(fromB, toB));
         }
@@ -7646,9 +7742,15 @@ var fadeIn = (options = {}) => {
         add
       });
     },
-    provide: (f) => EditorView26.decorations.from(f)
+    provide: (f) => EditorView29.decorations.from(f)
   });
-  const timerPlugin = ViewPlugin17.fromClass(class {
+  const timerPlugin = ViewPlugin19.fromClass(class {
+    view;
+    // Map a simple key "from-to" to timer id.
+    _timers = /* @__PURE__ */ new Map();
+    constructor(view) {
+      this.view = view;
+    }
     update(update2) {
       if (!update2.docChanged) {
         return;
@@ -7680,17 +7782,11 @@ var fadeIn = (options = {}) => {
       }
       this._timers.clear();
     }
-    constructor(view) {
-      _define_property21(this, "view", void 0);
-      _define_property21(this, "_timers", void 0);
-      this.view = view;
-      this._timers = /* @__PURE__ */ new Map();
-    }
   });
   return [
     fadeField,
     timerPlugin,
-    EditorView26.theme({
+    EditorView29.theme({
       ".cm-line > span": {
         opacity: "0.8"
       },
@@ -7714,8 +7810,10 @@ var fadeIn = (options = {}) => {
 
 // src/extensions/tags/xml-tags.ts
 import { syntaxTree as syntaxTree11 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder7, StateEffect as StateEffect9, StateField as StateField13, Transaction as Transaction5 } from "@codemirror/state";
-import { Decoration as Decoration15, EditorView as EditorView27, WidgetType as WidgetType10 } from "@codemirror/view";
+import { Prec as Prec7 } from "@codemirror/state";
+import { RangeSetBuilder as RangeSetBuilder8, StateEffect as StateEffect11, StateField as StateField14 } from "@codemirror/state";
+import { keymap as keymap13 } from "@codemirror/view";
+import { Decoration as Decoration16, EditorView as EditorView30, ViewPlugin as ViewPlugin20, WidgetType as WidgetType10 } from "@codemirror/view";
 import { invariant as invariant9 } from "@dxos/invariant";
 import { log as log9 } from "@dxos/log";
 
@@ -7788,102 +7886,281 @@ var nodeToJson = (state, node) => {
 };
 
 // src/extensions/tags/xml-tags.ts
-function _define_property22(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var __dxlog_file17 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/tags/xml-tags.ts";
+var navigatePreviousEffect = StateEffect11.define();
+var navigateNextEffect = StateEffect11.define();
 var getXmlTextChild = (children) => {
   const child = children?.[0];
   return typeof child === "string" ? child : null;
 };
-var xmlTagContextEffect = StateEffect9.define();
-var xmlTagUpdateEffect = StateEffect9.define();
-var xmlTagResetEffect = StateEffect9.define();
-var xmlTags = (options = {}) => {
-  const contextState = StateField13.define({
-    create: () => void 0,
-    update: (value, tr) => {
-      for (const effect of tr.effects) {
-        if (effect.is(xmlTagContextEffect)) {
-          return effect.value;
-        }
+var xmlTagContextEffect = StateEffect11.define();
+var xmlTagResetEffect = StateEffect11.define();
+var xmlTagUpdateEffect = StateEffect11.define();
+var widgetContextStateField = StateField14.define({
+  create: () => void 0,
+  update: (value, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(xmlTagContextEffect)) {
+        return effect.value;
       }
-      return value;
     }
-  });
+    return value;
+  }
+});
+var widgetStateMapStateField = StateField14.define({
+  create: () => ({}),
+  update: (map, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(xmlTagResetEffect)) {
+        return {};
+      }
+      if (effect.is(xmlTagUpdateEffect)) {
+        const { id, value } = effect.value;
+        log9("widget updated", {
+          id,
+          value
+        }, {
+          F: __dxlog_file17,
+          L: 146,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        const state = typeof value === "function" ? value(map[id]) : value;
+        return {
+          ...map,
+          [id]: state
+        };
+      }
+    }
+    return map;
+  }
+});
+var xmlTags = ({ registry, setWidgets, bookmarks: bookmarks2 }) => {
+  const notifier = createWidgetMap(setWidgets);
+  const widgetDecorationsField = createWidgetDecorationsField(registry, notifier);
+  return [
+    widgetContextStateField,
+    widgetStateMapStateField,
+    widgetDecorationsField,
+    createWidgetUpdatePlugin(widgetDecorationsField, notifier),
+    createNavigationEffectPlugin(widgetDecorationsField, bookmarks2),
+    bookmarks2?.length ? Prec7.highest(keyHandlers) : []
+  ];
+};
+var createWidgetMap = (setWidgets) => {
   const widgets = /* @__PURE__ */ new Map();
   const notifier = {
-    mounted: (widget) => {
-      widgets.set(widget.id, widget);
-      options.setWidgets?.([
+    mounted: (state) => {
+      log9("widget mounted", {
+        id: state.id,
+        tag: state.props._tag
+      }, {
+        F: __dxlog_file17,
+        L: 199,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      widgets.set(state.id, state);
+      setWidgets?.([
         ...widgets.values()
       ]);
     },
     unmounted: (id) => {
+      const state = widgets.get(id);
+      log9("widget unmounted", {
+        id,
+        tag: state?.props._tag
+      }, {
+        F: __dxlog_file17,
+        L: 205,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       widgets.delete(id);
-      options.setWidgets?.([
+      setWidgets?.([
         ...widgets.values()
       ]);
     }
   };
-  const decorationsState = StateField13.define({
-    create: (state) => {
-      return buildDecorations4(state, 0, state.doc.length, state.field(contextState), state.field(widgetState), options, notifier);
-    },
-    update: ({ from, decorations: decorations2 }, tr) => {
-      for (const effect of tr.effects) {
-        if (effect.is(xmlTagResetEffect)) {
-          return {
-            from: 0,
-            decorations: Decoration15.none
-          };
+  return notifier;
+};
+var keyHandlers = keymap13.of([
+  {
+    key: "Mod-ArrowUp",
+    run: (view) => {
+      view.dispatch({
+        effects: navigatePreviousEffect.of()
+      });
+      return true;
+    }
+  },
+  {
+    key: "Mod-ArrowDown",
+    run: (view) => {
+      view.dispatch({
+        effects: navigateNextEffect.of()
+      });
+      return true;
+    }
+  }
+]);
+var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
+  return EditorView30.updateListener.of((update2) => {
+    update2.transactions.forEach((transaction) => {
+      for (const effect of transaction.effects) {
+        if (effect.is(navigatePreviousEffect)) {
+          const view = update2.view;
+          const cursorPos = view.state.doc.lineAt(view.state.selection.main.head).from;
+          let widget = null;
+          const { decorations: decorations2 } = view.state.field(widgetDecorationsField);
+          for (const range of decorationSetToArray(decorations2)) {
+            if (range.from < cursorPos) {
+              const tag = range.value.spec.tag;
+              if (bookmarks2?.includes(tag)) {
+                if (!widget || range.from > widget.from) {
+                  widget = {
+                    from: range.from,
+                    to: range.to,
+                    tag
+                  };
+                }
+              }
+            }
+          }
+          const line = view.state.doc.lineAt(widget?.from ?? 0);
+          view.dispatch({
+            selection: {
+              anchor: line.from,
+              head: line.from
+            },
+            effects: scrollToLineEffect.of({
+              line: line.number,
+              options: {
+                offset: -16
+              }
+            })
+          });
+          continue;
         }
-      }
-      const userEvent = tr.annotation(Transaction5.userEvent);
-      if (userEvent === "delete.backward" || userEvent === "delete.forward") {
-        const { state } = tr;
-        const decorationArray = decorationSetToArray(decorations2);
-        const filteredDecorations = [];
-        const cursorPos = state.selection.main.head;
-        for (const range of decorationArray) {
-          let shouldKeep = true;
-          if (userEvent === "delete.backward" && range.from === cursorPos) {
-            shouldKeep = false;
+        if (effect.is(navigateNextEffect)) {
+          const view = update2.view;
+          const cursorPos = view.state.doc.lineAt(view.state.selection.main.head).to;
+          let widget = null;
+          const { decorations: decorations2 } = view.state.field(widgetDecorationsField);
+          for (const range of decorationSetToArray(decorations2)) {
+            if (range.from > cursorPos) {
+              const tag = range.value.spec.tag;
+              if (bookmarks2?.includes(tag)) {
+                if (!widget || range.from < widget.from) {
+                  widget = {
+                    from: range.from,
+                    to: range.to,
+                    tag
+                  };
+                }
+              }
+            }
           }
-          if (userEvent === "delete.forward" && range.to === cursorPos) {
-            shouldKeep = false;
+          if (widget) {
+            const line = view.state.doc.lineAt(widget?.from);
+            view.dispatch({
+              selection: {
+                anchor: line.to,
+                head: line.to
+              },
+              effects: scrollToLineEffect.of({
+                line: line.number,
+                options: {
+                  offset: -16
+                }
+              })
+            });
+          } else {
+            const line = view.state.doc.lineAt(view.state.doc.length);
+            view.dispatch({
+              selection: {
+                anchor: line.to,
+                head: line.to
+              },
+              effects: scrollToLineEffect.of({
+                line: line.number,
+                options: {
+                  position: "end"
+                }
+              })
+            });
           }
-          if (shouldKeep) {
-            const mappedFrom = tr.changes.mapPos(range.from, -1);
-            const mappedTo = tr.changes.mapPos(range.to, 1);
-            if (mappedFrom >= 0 && mappedTo >= mappedFrom && mappedTo <= state.doc.length) {
-              filteredDecorations.push({
-                from: mappedFrom,
-                to: mappedTo,
-                value: range.value
-              });
-            }
+          continue;
+        }
+      }
+    });
+  });
+};
+var createWidgetUpdatePlugin = (widgetDecorationsField, notifier) => ViewPlugin20.fromClass(class {
+  update(update2) {
+    const widgetStateMap = update2.state.field(widgetStateMapStateField);
+    const { decorations: decorations2 } = update2.state.field(widgetDecorationsField);
+    for (const effect of update2.transactions.flatMap((tr) => tr.effects)) {
+      if (effect.is(xmlTagUpdateEffect)) {
+        const widgetState = widgetStateMap[effect.value.id];
+        for (const range of decorationSetToArray(decorations2)) {
+          const deco = range.value;
+          const widget = deco?.spec?.widget;
+          if (widget && widget instanceof PlaceholderWidget2 && widget.id === effect.value.id && widget.root) {
+            const props = {
+              ...widget.props,
+              ...widgetState
+            };
+            notifier.mounted({
+              id: widget.id,
+              props,
+              root: widget.root,
+              Component: widget.Component
+            });
           }
         }
+      }
+    }
+  }
+});
+var createWidgetDecorationsField = (registry = {}, notifier) => StateField14.define({
+  create: (state) => {
+    return buildDecorations4(state, {
+      from: 0,
+      to: state.doc.length
+    }, registry, notifier);
+  },
+  update: ({ from, decorations: decorations2 }, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(xmlTagResetEffect)) {
         return {
-          from,
-          decorations: Decoration15.set(filteredDecorations)
+          from: 0,
+          decorations: Decoration16.none
         };
       }
-      if (tr.docChanged) {
-        const { state } = tr;
-        const reset = tr.changes.touchesRange(0, from);
-        const result = buildDecorations4(state, reset ? 0 : from, state.doc.length, state.field(contextState), state.field(widgetState), options, notifier);
+    }
+    if (tr.docChanged) {
+      const { state } = tr;
+      const reset = tr.changes.touchesRange(0, from);
+      if (reset) {
+        log9("document reset", {
+          from,
+          to: state.doc.length
+        }, {
+          F: __dxlog_file17,
+          L: 364,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        return buildDecorations4(state, {
+          from: 0,
+          to: state.doc.length
+        }, registry, notifier);
+      } else {
+        const result = buildDecorations4(state, {
+          from,
+          to: state.doc.length
+        }, registry, notifier);
         return {
           from: result.from,
           decorations: decorations2.update({
@@ -7891,104 +8168,70 @@ var xmlTags = (options = {}) => {
           })
         };
       }
-      return {
-        from,
-        decorations: decorations2
-      };
-    },
-    provide: (field) => [
-      EditorView27.decorations.from(field, (v) => v.decorations),
-      EditorView27.atomicRanges.of((view) => view.state.field(field).decorations || Decoration15.none)
-    ]
-  });
-  const widgetState = StateField13.define({
-    create: () => ({}),
-    update: (map, tr) => {
-      for (const effect of tr.effects) {
-        if (effect.is(xmlTagResetEffect)) {
-          return {};
-        }
-        if (effect.is(xmlTagUpdateEffect)) {
-          const { id, value } = effect.value;
-          const state = typeof value === "function" ? value(map[id]) : value;
-          const { decorations: decorations2 } = tr.state.field(decorationsState);
-          for (const range of decorationSetToArray(decorations2)) {
-            const deco = range.value;
-            const widget = deco?.spec?.widget;
-            if (widget && widget instanceof PlaceholderWidget2 && widget.id === effect.value.id && widget.root) {
-              const props = {
-                ...widget.props,
-                ...state
-              };
-              notifier.mounted({
-                id: widget.id,
-                props,
-                root: widget.root,
-                Component: widget.Component
-              });
-            }
-          }
-          return {
-            ...map,
-            [id]: state
-          };
-        }
-      }
-      return map;
     }
-  });
-  return [
-    contextState,
-    decorationsState,
-    widgetState
-  ];
-};
-var buildDecorations4 = (state, from, to, context, widgetState, options, notifier) => {
-  const builder = new RangeSetBuilder7();
+    return {
+      from,
+      decorations: decorations2
+    };
+  },
+  provide: (field) => [
+    EditorView30.decorations.from(field, (v) => v.decorations),
+    EditorView30.atomicRanges.of((view) => view.state.field(field).decorations || Decoration16.none)
+  ]
+});
+var buildDecorations4 = (state, range, registry, notifier) => {
+  const context = state.field(widgetContextStateField, false);
+  const widgetStateMap = state.field(widgetStateMapStateField, false) ?? {};
+  const builder = new RangeSetBuilder8();
   const tree = syntaxTree11(state);
   if (!tree || tree.type.name === "Program" && tree.length === 0) {
     return {
-      from,
-      decorations: Decoration15.none
+      from: range.from,
+      decorations: Decoration16.none
     };
   }
+  let last = range.from;
   tree.iterate({
-    from,
-    to,
+    from: range.from,
+    to: range.to,
     enter: (node) => {
       switch (node.type.name) {
         // XML Element.
         case "Element": {
           try {
-            if (options.registry) {
-              const props = nodeToJson(state, node.node);
-              if (props) {
-                const def = options.registry[props._tag];
-                if (def) {
-                  const { block, factory, Component } = def;
-                  const state2 = props.id ? widgetState[props.id] : void 0;
-                  const args = {
-                    context,
-                    ...props,
-                    ...state2
-                  };
-                  const widget = factory ? factory(args) : Component ? props.id && new PlaceholderWidget2(props.id, Component, args, notifier) : void 0;
-                  if (widget) {
-                    from = node.node.to;
-                    builder.add(node.node.from, node.node.to, Decoration15.replace({
-                      widget,
-                      block,
-                      atomic: true,
-                      inclusive: true
-                    }));
-                  }
+            const args = nodeToJson(state, node.node);
+            if (args) {
+              const def = registry[args._tag];
+              if (def) {
+                const { block, factory, Component } = def;
+                const widgetState = args.id ? widgetStateMap[args.id] : void 0;
+                const nodeRange = {
+                  from: node.node.from,
+                  to: node.node.to
+                };
+                const props = {
+                  context,
+                  range: nodeRange,
+                  ...args,
+                  ...widgetState
+                };
+                const widget = factory ? factory(props) : Component ? args.id && new PlaceholderWidget2(args.id, Component, props, notifier) : void 0;
+                if (widget) {
+                  builder.add(nodeRange.from, nodeRange.to, Decoration16.replace({
+                    widget,
+                    block,
+                    atomic: true,
+                    inclusive: true,
+                    tag: args._tag
+                  }));
+                  last = nodeRange.to - 1;
                 }
               }
             }
           } catch (err) {
             log9.catch(err, void 0, {
               F: __dxlog_file17,
-              L: 343,
+              L: 449,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -7999,16 +8242,33 @@ var buildDecorations4 = (state, from, to, context, widgetState, options, notifie
     }
   });
   return {
-    from,
+    from: last,
     decorations: builder.finish()
   };
 };
-var PlaceholderWidget2 = class _PlaceholderWidget extends WidgetType10 {
+var PlaceholderWidget2 = class extends WidgetType10 {
+  id;
+  Component;
+  props;
+  notifier;
+  _root = null;
+  constructor(id, Component, props, notifier) {
+    super(), this.id = id, this.Component = Component, this.props = props, this.notifier = notifier;
+    invariant9(id, void 0, {
+      F: __dxlog_file17,
+      L: 475,
+      S: this,
+      A: [
+        "id",
+        ""
+      ]
+    });
+  }
   get root() {
     return this._root;
   }
   eq(other) {
-    return other instanceof _PlaceholderWidget && this.id === other.id;
+    return this.id === other.id;
   }
   ignoreEvent() {
     return true;
@@ -8017,8 +8277,8 @@ var PlaceholderWidget2 = class _PlaceholderWidget extends WidgetType10 {
     this._root = document.createElement("span");
     this.notifier.mounted({
       id: this.id,
-      props: this.props,
       root: this._root,
+      props: this.props,
       Component: this.Component
     });
     return this._root;
@@ -8027,22 +8287,10 @@ var PlaceholderWidget2 = class _PlaceholderWidget extends WidgetType10 {
     this.notifier.unmounted(this.id);
     this._root = null;
   }
-  constructor(id, Component, props, notifier) {
-    super(), _define_property22(this, "id", void 0), _define_property22(this, "Component", void 0), _define_property22(this, "props", void 0), _define_property22(this, "notifier", void 0), _define_property22(this, "_root", void 0), this.id = id, this.Component = Component, this.props = props, this.notifier = notifier, this._root = null;
-    invariant9(id, void 0, {
-      F: __dxlog_file17,
-      L: 368,
-      S: this,
-      A: [
-        "id",
-        ""
-      ]
-    });
-  }
 };
 
 // src/extensions/typewriter.ts
-import { keymap as keymap12 } from "@codemirror/view";
+import { keymap as keymap14 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -8052,7 +8300,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap12.of([
+    keymap14.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -8065,7 +8313,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
       {
         // Next prompt.
         // TODO(burdon): Press 1-9 to select prompt?
-        key: "shift-meta-'",
+        key: "Shift-Meta-'",
         run: (view) => {
           clearTimeout(t);
           const text = items[idx++];
@@ -8100,14 +8348,14 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
 
 // src/hooks/useTextEditor.ts
 import { EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView28 } from "@codemirror/view";
-import { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import { EditorView as EditorView31 } from "@codemirror/view";
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
 import { log as log10 } from "@dxos/log";
 import { getProviderValue, isTruthy as isTruthy6 } from "@dxos/util";
 var __dxlog_file18 = "/__w/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 } = useMemo3(() => getProviderValue(props), deps ?? []);
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo2(() => getProviderValue(props), deps ?? []);
   const [instanceId] = useState3(() => `text-editor-${++instanceCount}`);
   const [view, setView] = useState3(null);
   const parentRef = useRef3(null);
@@ -8143,7 +8391,7 @@ var useTextEditor = (props = {}, deps = []) => {
           id && documentId.of(id),
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
-          EditorView28.exceptionSink.of((err) => {
+          EditorView31.exceptionSink.of((err) => {
             log10.catch(err, void 0, {
               F: __dxlog_file18,
               L: 93,
@@ -8153,10 +8401,10 @@ var useTextEditor = (props = {}, deps = []) => {
           })
         ].filter(isTruthy6)
       });
-      view2 = new EditorView28({
+      view2 = new EditorView31({
         parent: parentRef.current,
         state,
-        scrollTo: scrollTo ? EditorView28.scrollIntoView(scrollTo, {
+        scrollTo: scrollTo ? EditorView31.scrollIntoView(scrollTo, {
           yMargin: 96
         }) : void 0,
         dispatchTransactions: debug ? debugDispatcher : void 0
@@ -8220,7 +8468,7 @@ var useTextEditor = (props = {}, deps = []) => {
     autoFocus,
     view
   ]);
-  const handleKeyDown = useCallback4((event) => {
+  const handleKeyDown = useCallback3((event) => {
     const { key, target, currentTarget } = event;
     switch (key) {
       case "Escape": {
@@ -8261,8 +8509,8 @@ var Editor = /* @__PURE__ */ forwardRef(({ classNames, id, extensions, moveToEnd
       initialValue: value,
       extensions: [
         extensions ?? [],
-        EditorView29.updateListener.of(({ view: view2, docChanged, transactions }) => {
-          const isInitialSync = transactions.some((tr) => tr.annotation(Transaction6.userEvent) === initialSync.value);
+        EditorView32.updateListener.of(({ view: view2, docChanged, transactions }) => {
+          const isInitialSync = transactions.some((tr) => tr.annotation(Transaction5.userEvent) === initialSync.value);
           if (!isInitialSync && docChanged) {
             onChange?.(view2.state.doc.toString());
           }
@@ -8304,7 +8552,7 @@ var Editor = /* @__PURE__ */ forwardRef(({ classNames, id, extensions, moveToEnd
     ]);
     return /* @__PURE__ */ React4.createElement("div", {
       role: "none",
-      className: mx6("is-full", classNames),
+      className: mx7("is-full", classNames),
       ...focusAttributes,
       ref: parentRef
     });
@@ -8315,18 +8563,18 @@ var Editor = /* @__PURE__ */ forwardRef(({ classNames, id, extensions, moveToEnd
 
 // src/components/EditorToolbar/EditorToolbar.tsx
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import { Rx } from "@effect-rx/rx-react";
-import React5, { memo, useMemo as useMemo5 } from "react";
+import { Atom } from "@effect-atom/atom-react";
+import React5, { memo, useMemo as useMemo4 } from "react";
 import { rxFromSignal } from "@dxos/app-graph";
 import { ElevationProvider } from "@dxos/react-ui";
 import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
 
 // src/components/EditorToolbar/util.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { live } from "@dxos/live-object";
 import { createMenuAction, createMenuItemGroup } from "@dxos/react-ui-menu";
 var useEditorToolbarState = (initialState = {}) => {
-  return useMemo4(() => live(initialState), []);
+  return useMemo3(() => live(initialState), []);
 };
 var createEditorAction = (id, props, invoke) => {
   const { label = [
@@ -8470,9 +8718,10 @@ var createHeadingGroupAction = (value) => createEditorActionGroup("heading", {
   variant: "dropdownMenu",
   applyActive: true,
   selectCardinality: "single",
+  // TODO(wittjosiah): Remove? Not sure this does anything.
   value
 }, "ph--text-h--regular");
-var createHeadingActions = (getView) => Object.entries({
+var createHeadingActions = (currentLevel, getView) => Object.entries({
   "0": "ph--paragraph--regular",
   "1": "ph--text-h-one--regular",
   "2": "ph--text-h-two--regular",
@@ -8490,18 +8739,19 @@ var createHeadingActions = (getView) => Object.entries({
         ns: translationKey
       }
     ],
-    icon
+    icon,
+    checked: levelStr === currentLevel
   }, () => setHeading(level)(getView()));
 });
 var computeHeadingValue = (state) => {
   const blockType = state ? state.blockType : "paragraph";
-  const header = blockType && /heading(\d)/.exec(blockType);
-  return header ? header[1] : blockType === "paragraph" || !blockType ? "0" : "";
+  const heading = blockType && /heading(\d)/.exec(blockType);
+  return heading ? heading[1] : blockType === "paragraph" || !blockType ? "0" : "";
 };
 var createHeadings = (state, getView) => {
   const headingValue = computeHeadingValue(state);
   const headingGroupAction = createHeadingGroupAction(headingValue);
-  const headingActions = createHeadingActions(getView);
+  const headingActions = createHeadingActions(headingValue, getView);
   return {
     nodes: [
       headingGroupAction,
@@ -8653,87 +8903,7 @@ var createViewMode = (state, onViewModeChange) => {
 };
 
 // src/components/EditorToolbar/EditorToolbar.tsx
-var createToolbarActions = ({ getView, state, customActions, ...features }) => {
-  return Rx.make((get2) => {
-    const graph = {
-      nodes: [],
-      edges: []
-    };
-    if (features.headings ?? true) {
-      const headings2 = get2(rxFromSignal(() => createHeadings(state, getView)));
-      graph.nodes.push(...headings2.nodes);
-      graph.edges.push(...headings2.edges);
-    }
-    if (features.formatting ?? true) {
-      const formatting = get2(rxFromSignal(() => createFormatting(state, getView)));
-      graph.nodes.push(...formatting.nodes);
-      graph.edges.push(...formatting.edges);
-    }
-    if (features.lists ?? true) {
-      const lists = get2(rxFromSignal(() => createLists(state, getView)));
-      graph.nodes.push(...lists.nodes);
-      graph.edges.push(...lists.edges);
-    }
-    if (features.blocks ?? true) {
-      const blocks = get2(rxFromSignal(() => createBlocks(state, getView)));
-      graph.nodes.push(...blocks.nodes);
-      graph.edges.push(...blocks.edges);
-    }
-    if (features.image) {
-      const image2 = get2(rxFromSignal(() => createImageUpload(features.image)));
-      graph.nodes.push(...image2.nodes);
-      graph.edges.push(...image2.edges);
-    }
-    {
-      const gap = createGapSeparator();
-      graph.nodes.push(...gap.nodes);
-      graph.edges.push(...gap.edges);
-    }
-    if (customActions) {
-      const custom = get2(customActions);
-      graph.nodes.push(...custom.nodes);
-      graph.edges.push(...custom.edges);
-    }
-    if (features.search ?? true) {
-      const search = get2(rxFromSignal(() => createSearch(getView)));
-      graph.nodes.push(...search.nodes);
-      graph.edges.push(...search.edges);
-    }
-    if (features.viewMode) {
-      const viewMode = get2(rxFromSignal(() => createViewMode(state, features.viewMode)));
-      graph.nodes.push(...viewMode.nodes);
-      graph.edges.push(...viewMode.edges);
-    }
-    return graph;
-  });
-};
-var useEditorToolbarActionGraph = (props) => {
-  const menuCreator = useMemo5(() => createToolbarActions({
-    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 }) => {
+var EditorToolbar = /* @__PURE__ */ memo(({ classNames, role, attendableId, ...props }) => {
   var _effect = _useSignals3();
   try {
     const menuProps = useEditorToolbarActionGraph(props);
@@ -8750,6 +8920,64 @@ var EditorToolbar = /* @__PURE__ */ memo(({ classNames, attendableId, role, ...p
     _effect.f();
   }
 });
+var useEditorToolbarActionGraph = ({ state, getView, customActions, ...features }) => {
+  const menuCreator = useMemo4(() => createToolbarActions({
+    state,
+    getView,
+    customActions,
+    ...features
+  }), [
+    state,
+    getView,
+    customActions,
+    features?.showHeadings,
+    features?.showFormatting,
+    features?.showLists,
+    features?.showBlocks,
+    features?.showSearch,
+    features?.onImageUpload,
+    features?.onViewModeChange
+  ]);
+  return useMenuActions(menuCreator);
+};
+var createToolbarActions = ({ state, getView, customActions, ...features }) => {
+  return Atom.make((get2) => {
+    const graph = {
+      nodes: [],
+      edges: []
+    };
+    const addSubGraph = (graph2, subGraph) => {
+      graph2.nodes.push(...subGraph.nodes);
+      graph2.edges.push(...subGraph.edges);
+    };
+    if (features?.showHeadings ?? true) {
+      addSubGraph(graph, get2(rxFromSignal(() => createHeadings(state, getView))));
+    }
+    if (features?.showFormatting ?? true) {
+      addSubGraph(graph, get2(rxFromSignal(() => createFormatting(state, getView))));
+    }
+    if (features?.showLists ?? true) {
+      addSubGraph(graph, get2(rxFromSignal(() => createLists(state, getView))));
+    }
+    if (features?.showBlocks ?? true) {
+      addSubGraph(graph, get2(rxFromSignal(() => createBlocks(state, getView))));
+    }
+    if (features?.onImageUpload) {
+      addSubGraph(graph, get2(rxFromSignal(() => createImageUpload(features.onImageUpload))));
+    }
+    addSubGraph(graph, createGapSeparator());
+    if (customActions) {
+      addSubGraph(graph, get2(customActions));
+    }
+    if (features?.showSearch ?? true) {
+      addSubGraph(graph, get2(rxFromSignal(() => createSearch(getView))));
+    }
+    if (features?.onViewModeChange) {
+      addSubGraph(graph, get2(rxFromSignal(() => createViewMode(state, features.onViewModeChange))));
+    }
+    return graph;
+  });
+};
 export {
   Cursor,
   Editor,
@@ -8757,7 +8985,7 @@ export {
   EditorInputModes,
   EditorState4 as EditorState,
   EditorToolbar,
-  EditorView30 as EditorView,
+  EditorView33 as EditorView,
   EditorViewMode,
   EditorViewModes,
   Inline,
@@ -8770,6 +8998,7 @@ export {
   TextKind,
   Tree,
   addBlockquote,
+  addBookmark,
   addCodeblock,
   addLink,
   addList,
@@ -8781,7 +9010,10 @@ export {
   awareness,
   awarenessProvider,
   blast,
+  blocks,
+  bookmarks,
   callbackWrapper,
+  clearBookmarks,
   clientRectsFor,
   commands,
   commentClickedEffect,
@@ -8808,6 +9040,7 @@ export {
   decorationSetToArray,
   defaultExtensions,
   defaultOptions,
+  defaultReplacements,
   defaultStyles,
   defaultThemeSlots,
   deleteItem,
@@ -8829,6 +9062,7 @@ export {
   formattingCommands,
   formattingEquals,
   formattingKeymap,
+  formattingListener,
   fullWidth,
   getFormatting,
   getLinkRef,
@@ -8848,7 +9082,7 @@ export {
   insertAtLineStart,
   insertTable,
   itemToJSON,
-  keymap13 as keymap,
+  keymap15 as keymap,
   linkSlashCommands,
   linkTooltip,
   listItemToString,
@@ -8863,6 +9097,8 @@ export {
   modalStateField,
   moveItemDown,
   moveItemUp,
+  navigateNextEffect,
+  navigatePreviousEffect,
   outliner,
   outlinerTree,
   overlap,
@@ -8873,13 +9109,17 @@ export {
   preview,
   processEditorPayload,
   removeBlockquote,
+  removeBookmark,
   removeCodeblock,
   removeLink,
   removeList,
   removeStyle,
   renderRoot,
+  replacer,
   scrollThreadIntoView,
   scrollToBottomEffect,
+  scrollToLine,
+  scrollToLineEffect,
   selectionState,
   setBlockquote,
   setComments,
@@ -8887,6 +9127,7 @@ export {
   setSelection,
   setStyle,
   singleValueFacet,
+  smoothScroll,
   stackItemContentEditorClassNames,
   staticCompletion,
   streamer,
@@ -8909,7 +9150,6 @@ export {
   typewriter,
   useComments,
   useEditorToolbarState,
-  useFormattingState,
   usePopoverMenu,
   useTextEditor,
   wrapWithCatch,