@dxos/ui-editor 0.8.4-main.fcc0d83b33 → 0.8.4-staging.60fe92afc8

package/dist/lib/browser/index.mjs

@@ -1,12 +1,12 @@
 // src/index.ts
 import { EditorState as EditorState4 } from "@codemirror/state";
-import { EditorView as EditorView33, keymap as keymap15 } from "@codemirror/view";
+import { EditorView as EditorView35, keymap as keymap15 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
 // src/defaults.ts
 import { mx } from "@dxos/ui-theme";
-var editorClassNames = (role) => mx("dx-attention-surface p-0.5 data-[toolbar=disabled]:pt-2 dx-focus-ring-inset", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-h-24" : "dx-container overflow-hidden");
+var editorClassNames = (role) => mx("dx-attention-surface data-[toolbar=disabled]:pt-2 dx-focus-ring-inset", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-h-24" : "dx-container overflow-hidden");
 var documentSlots = {
   content: {
     /**
@@ -363,30 +363,37 @@ var insertAtLineStart = (view, from, insert) => {
 };
 
 // src/extensions/autocomplete/placeholder.ts
-var placeholder = ({ content, delay = 3e3 }) => {
+var placeholder = ({ content, delay = 3e3, focusOnly = false }) => {
   const plugin = ViewPlugin3.fromClass(class {
     _timeout;
     _decorations = Decoration3.none;
     update(update2) {
+      if (!update2.docChanged && !update2.selectionSet && !update2.focusChanged) {
+        return;
+      }
       if (this._timeout) {
         window.clearTimeout(this._timeout);
         this._timeout = void 0;
       }
+      this._decorations = Decoration3.none;
+      if (focusOnly && !update2.view.hasFocus) {
+        return;
+      }
       const activeLine = update2.view.state.doc.lineAt(update2.view.state.selection.main.head);
-      const isEmpty = activeLine.text.trim() === "";
-      if (isEmpty) {
-        const lineStart = activeLine.from;
-        this._timeout = setTimeout(() => {
-          this._decorations = Decoration3.set([
-            Decoration3.widget({
-              widget: new PlaceholderWidget(content),
-              side: 1
-            }).range(lineStart)
-          ]);
-          update2.view.update([]);
-        }, delay);
+      if (activeLine.text.trim() !== "") {
+        return;
       }
-      this._decorations = Decoration3.none;
+      const lineStart = activeLine.from;
+      const view = update2.view;
+      this._timeout = setTimeout(() => {
+        this._decorations = Decoration3.set([
+          Decoration3.widget({
+            widget: new PlaceholderWidget(content),
+            side: 1
+          }).range(lineStart)
+        ]);
+        view.update([]);
+      }, delay);
     }
     destroy() {
       if (this._timeout) {
@@ -504,357 +511,26 @@ var typeahead = ({ onComplete } = {}) => {
   ];
 };
 
-// src/extensions/auto-scroll.ts
-import { StateEffect as StateEffect2 } from "@codemirror/state";
-import { EditorView as EditorView5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
-import { addEventListener, combine, throttle } from "@dxos/async";
-import { Domino } from "@dxos/ui";
-import { getSize } from "@dxos/ui-theme";
-
-// src/extensions/scroller.ts
-import { StateEffect } from "@codemirror/state";
-import { EditorView as EditorView4, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
-import { log as log2 } from "@dxos/log";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/scroller.ts";
-var scrollerLineEffect = StateEffect.define();
-var scrollerCrawlEffect = StateEffect.define();
-var scrollToLine = (view, options) => {
-  view.dispatch({
-    effects: scrollerLineEffect.of(options)
-  });
-};
-var scroller = ({ overScroll = 0 } = {}) => {
-  const scrollPlugin = ViewPlugin5.fromClass(class ScrollerPlugin {
-    view;
-    crawler;
-    constructor(view) {
-      this.view = view;
-      this.crawler = createCrawler(this.view);
-    }
-    // No-op.
-    destroy() {
-      this.crawler.cancel();
-    }
-    cancel() {
-      this.crawler.cancel();
-    }
-    crawl(start = false) {
-      if (start) {
-        this.crawler.scroll();
-      } else {
-        this.crawler.cancel();
-      }
-    }
-    scroll({ line, offset = 0, position, behavior = "instant" }) {
-      const { scrollTop, scrollHeight, clientHeight } = this.view.scrollDOM;
-      const scrollerRect = this.view.scrollDOM.getBoundingClientRect();
-      const doc = this.view.state.doc;
-      let targetScrollTop = scrollHeight - clientHeight + offset;
-      if (line >= 0 && line <= doc.lines - 1) {
-        const lineStart = doc.line(line + 1).from;
-        const coords = this.view.coordsAtPos(lineStart);
-        if (coords) {
-          const currentScrollTop = scrollTop;
-          const maxScrollTop = scrollHeight - clientHeight;
-          if (position === "end") {
-            targetScrollTop = currentScrollTop + coords.bottom - scrollerRect.bottom + offset;
-          } else {
-            targetScrollTop = currentScrollTop + coords.top - scrollerRect.top + offset;
-          }
-          targetScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
-        }
-      }
-      requestAnimationFrame(() => {
-        this.view.scrollDOM.scrollTo({
-          top: targetScrollTop
-        });
-      });
-    }
-  });
-  return [
-    scrollPlugin,
-    // Listen for effect.s
-    EditorView4.updateListener.of((update2) => {
-      update2.transactions.forEach((transaction) => {
-        try {
-          const plugin = update2.view.plugin(scrollPlugin);
-          if (plugin) {
-            for (const effect of transaction.effects) {
-              if (effect.is(scrollerCrawlEffect)) {
-                plugin.crawl(effect.value);
-              } else if (effect.is(scrollerLineEffect)) {
-                plugin.scroll(effect.value);
-              }
-            }
-          }
-        } catch (err) {
-          log2.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 91, S: void 0 });
-        }
-      });
-    }),
-    // Styles.
-    EditorView4.theme({
-      ".cm-scroller": {
-        overflowY: "scroll",
-        // Browser scroll-anchoring: when widgets above the viewport resize (e.g. tool blocks
-        // expanding their TogglePanel), the browser picks a stable element near the viewport
-        // top and adjusts `scrollTop` so the user's view doesn't jump. Auto-scroll's pinning
-        // logic still has the final word when pinned (forces scrollTop to scrollHeight).
-        overflowAnchor: "auto"
-      },
-      ".cm-scroller.cm-hide-scrollbar::-webkit-scrollbar": {
-        display: "none"
-      },
-      ".cm-scroller::-webkit-scrollbar-thumb": {
-        background: "transparent",
-        transition: "background 0.15s"
-      },
-      "&:hover .cm-scroller::-webkit-scrollbar-thumb": {
-        background: "var(--color-scrollbar-thumb)"
-      },
-      // Spacer below the last text line. Implemented as a real block pseudo-element
-      // (rather than `padding-bottom` on `.cm-content`) so it materializes in the
-      // scroller's `scrollHeight` regardless of how `padding` is reset by the base
-      // theme or downstream classes — this is what gives auto-scroll its head-room
-      // so the last line stays `overScroll` px above the viewport bottom.
-      ".cm-content::after": {
-        content: '""',
-        display: "block",
-        height: `${overScroll}px`
-      },
-      ".cm-scroll-button": {
-        position: "absolute",
-        bottom: "0.5rem",
-        right: "1rem"
-      }
-    })
-  ];
-};
-function createCrawler(view, omega = 5, snapThreshold = 5, snapVelocity = 50) {
-  const el = view.scrollDOM;
-  let currentTop = 0;
-  let velocity = 0;
-  let rafId = null;
-  let lastTime = 0;
-  function frame(now) {
-    const dt = lastTime === 0 ? 1 / 60 : Math.min(0.1, (now - lastTime) / 1e3);
-    lastTime = now;
-    const targetTop = el.scrollHeight - el.clientHeight;
-    const delta = targetTop - currentTop;
-    if (Math.abs(delta) < snapThreshold && Math.abs(velocity) < snapVelocity) {
-      el.scrollTop = targetTop;
-      currentTop = targetTop;
-      velocity = 0;
-      rafId = null;
-      lastTime = 0;
-      return;
-    }
-    const accel = omega * omega * delta - 2 * omega * velocity;
-    velocity += accel * dt;
-    currentTop += velocity * dt;
-    el.scrollTop = currentTop;
-    rafId = requestAnimationFrame(frame);
-  }
-  return {
-    scroll: () => {
-      if (rafId === null) {
-        currentTop = el.scrollTop;
-        lastTime = 0;
-        rafId = requestAnimationFrame(frame);
-      }
-    },
-    cancel: () => {
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId);
-        velocity = 0;
-        lastTime = 0;
-        rafId = null;
-      }
-    }
-  };
-}
-
-// src/extensions/auto-scroll.ts
-var autoScrollEffect = StateEffect2.define();
-var autoScroll = ({ scrollOnResize = true } = {}) => {
-  let buttonContainer;
-  let isPinned = true;
-  let jumpPending = false;
-  let enabled = true;
-  let firstUpdate = true;
-  const setPinned = (pinned) => {
-    buttonContainer?.classList.toggle("opacity-0", pinned);
-    isPinned = pinned;
-  };
-  return [
-    // Update listener for scrolling when content changes.
-    EditorView5.updateListener.of((update2) => {
-      const { view, heightChanged, state, startState } = update2;
-      for (const tr of update2.transactions) {
-        for (const effect of tr.effects) {
-          if (effect.is(autoScrollEffect)) {
-            enabled = effect.value;
-            if (enabled) {
-              setPinned(true);
-              view.dispatch({
-                effects: scrollerCrawlEffect.of(true)
-              });
-            } else {
-              view.dispatch({
-                effects: scrollerCrawlEffect.of(false)
-              });
-            }
-          }
-        }
-      }
-      if (!enabled) {
-        return;
-      }
-      if (isPinned && (firstUpdate || startState.doc.length === 0) && state.doc.length > 0) {
-        firstUpdate = false;
-        jumpPending = true;
-        requestAnimationFrame(() => {
-          view.scrollDOM.scrollTop = view.scrollDOM.scrollHeight;
-          jumpPending = false;
-        });
-        return;
-      }
-      firstUpdate = false;
-      if (jumpPending) {
-        return;
-      }
-      if (heightChanged) {
-        if (isPinned) {
-          const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
-          const delta = scrollHeight - scrollTop - clientHeight;
-          if (delta > 0) {
-            setPinned(true);
-            view.dispatch({
-              effects: scrollerCrawlEffect.of(true)
-            });
-          } else if (delta < -1) {
-            setPinned(false);
-          }
-        } else {
-          if (state.doc.length === 0) {
-            setPinned(true);
-          }
-        }
-      }
-    }),
-    // Re-pin and jump to bottom when the scroll container itself resizes (e.g. sidebar toggle,
-    // window resize). Doc-driven height changes are handled by the updateListener above; this
-    // observer covers the case where the viewport changes while the doc length is unchanged.
-    scrollOnResize ? ViewPlugin6.fromClass(class {
-      observer;
-      firstObservation = true;
-      destroyed = false;
-      constructor(view) {
-        const onResize = throttle(() => {
-          if (this.destroyed || !enabled) {
-            return;
-          }
-          setPinned(true);
-          requestAnimationFrame(() => {
-            if (this.destroyed) {
-              return;
-            }
-            view.scrollDOM.scrollTop = view.scrollDOM.scrollHeight;
-            view.dispatch({
-              effects: scrollerCrawlEffect.of(true)
-            });
-          });
-        }, 100);
-        this.observer = new ResizeObserver(() => {
-          if (this.firstObservation) {
-            this.firstObservation = false;
-            return;
-          }
-          onResize();
-        });
-        this.observer.observe(view.scrollDOM);
-      }
-      destroy() {
-        this.destroyed = true;
-        this.observer.disconnect();
-      }
-    }) : [],
-    // Detect user scroll and unpin (or re-pin if scrolled to the bottom).
-    ViewPlugin6.fromClass(class {
-      cleanup;
-      constructor(view) {
-        this.cleanup = createUserScrollDetector(view.scrollDOM, throttle(() => {
-          requestAnimationFrame(() => {
-            const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
-            const delta = scrollHeight - scrollTop - clientHeight;
-            const pinned = delta === 0;
-            setPinned(pinned);
-            if (!pinned) {
-              view.dispatch({
-                effects: scrollerCrawlEffect.of(false)
-              });
-            }
-          });
-        }, 500));
-      }
-      destroy() {
-        this.cleanup();
-      }
-    }),
-    // Scroll button.
-    ViewPlugin6.fromClass(class {
-      constructor(view) {
-        const icon = Domino.of("dx-icon").classNames(getSize(4)).attributes({
-          icon: "ph--arrow-down--regular"
-        });
-        const button = Domino.of("button").classNames("dx-button bg-accent-surface").attributes({
-          "data-density": "fine"
-        }).append(icon).on("click", () => {
-          setPinned(true);
-          view.dispatch({
-            effects: scrollerLineEffect.of({
-              line: -1,
-              position: "end",
-              behavior: "smooth"
-            })
-          });
-        });
-        buttonContainer = Domino.of("div").classNames("cm-scroll-button transition-opacity duration-300 opacity-0").append(button).root;
-        view.scrollDOM.parentElement.appendChild(buttonContainer);
-      }
-    })
-  ];
-};
-function createUserScrollDetector(element, onUserScroll) {
-  return combine(addEventListener(element, "wheel", () => onUserScroll(), {
-    passive: true
-  }), addEventListener(element, "pointerdown", (event) => {
-    if (event.clientX > element.getBoundingClientRect().right - (element.offsetWidth - element.clientWidth)) {
-      onUserScroll();
-    }
-  }));
-}
-
 // src/extensions/automerge/automerge.ts
 import { next as A3 } from "@automerge/automerge";
 import { StateField, Transaction as Transaction2 } from "@codemirror/state";
-import { EditorView as EditorView6, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
-import { DocAccessor } from "@dxos/echo-db";
+import { EditorView as EditorView4, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+import { DocAccessor } from "@dxos/echo-client";
 
 // 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/echo-db";
-import { log as log3 } from "@dxos/log";
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/automerge/cursor.ts";
+import { fromCursor, toCursor } from "@dxos/echo-client";
+import { log as log2 } from "@dxos/log";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/automerge/cursor.ts";
 var cursorConverter = (accessor) => ({
   toCursor: (pos, assoc) => {
     try {
       return toCursor(accessor, pos, assoc);
     } catch (err) {
-      log3.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 11, S: void 0 });
+      log2.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 11, S: void 0 });
       return "";
     }
   },
@@ -862,17 +538,17 @@ var cursorConverter = (accessor) => ({
     try {
       return fromCursor(accessor, cursor);
     } catch (err) {
-      log3.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 19, S: void 0 });
+      log2.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 19, S: void 0 });
       return 0;
     }
   }
 });
 
 // src/extensions/automerge/defs.ts
-import { Annotation, StateEffect as StateEffect3 } from "@codemirror/state";
+import { Annotation, StateEffect } from "@codemirror/state";
 var getPath = (state, field) => state.field(field).path;
 var getLastHeads = (state, field) => state.field(field).lastHeads;
-var updateHeadsEffect = StateEffect3.define({});
+var updateHeadsEffect = StateEffect.define({});
 var updateHeads = (newHeads) => updateHeadsEffect.of({
   newHeads
 });
@@ -883,7 +559,7 @@ var isReconcile = (tr) => {
 
 // src/extensions/automerge/sync.ts
 import { next as A2 } from "@automerge/automerge";
-import { log as log4 } from "@dxos/log";
+import { log as log3 } from "@dxos/log";
 
 // src/extensions/automerge/update-automerge.ts
 import { next as A } from "@automerge/automerge";
@@ -1024,7 +700,7 @@ var charPath = (textPath, candidatePath) => {
 };
 
 // src/extensions/automerge/sync.ts
-var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/automerge/sync.ts";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/automerge/sync.ts";
 var Syncer = class {
   _handle;
   _state;
@@ -1047,7 +723,7 @@ var Syncer = class {
     this._pending = false;
   }
   onEditorChange(view) {
-    log4("onEditorChange", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 35, S: this });
+    log3("onEditorChange", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 35, S: this });
     const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
     const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
     if (newHeads) {
@@ -1058,7 +734,7 @@ var Syncer = class {
     }
   }
   onAutomergeChange(view) {
-    log4("onAutomergeChange", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 47, S: this });
+    log3("onAutomergeChange", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 47, S: this });
     const oldHeads = getLastHeads(view.state, this._state);
     const newHeads = A2.getHeads(this._handle.doc());
     const diff = A2.equals(oldHeads, newHeads) ? [] : A2.diff(this._handle.doc(), oldHeads, newHeads);
@@ -1111,7 +787,7 @@ var automerge = (accessor) => {
     // Track heads.
     syncState,
     // Reconcile external updates.
-    ViewPlugin7.fromClass(class {
+    ViewPlugin5.fromClass(class {
       _view;
       constructor(_view) {
         this._view = _view;
@@ -1142,7 +818,7 @@ var automerge = (accessor) => {
       };
     }),
     // Reconcile local updates.
-    EditorView6.updateListener.of(({ view, changes, transactions }) => {
+    EditorView4.updateListener.of(({ view, changes, transactions }) => {
       if (!changes.empty) {
         const isInitialSync = transactions.some((tr) => tr.annotation(Transaction2.userEvent) === initialSync.value);
         if (!isInitialSync) {
@@ -1155,10 +831,10 @@ var automerge = (accessor) => {
 
 // src/extensions/awareness/awareness.ts
 import { Annotation as Annotation2, RangeSet } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView7, ViewPlugin as ViewPlugin8, WidgetType as WidgetType3 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView5, ViewPlugin as ViewPlugin6, WidgetType as WidgetType3 } from "@codemirror/view";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
-var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/awareness/awareness.ts";
+var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/awareness/awareness.ts";
 var dummyProvider = {
   remoteStateChange: new Event(),
   open: () => {
@@ -1174,14 +850,14 @@ var RemoteSelectionChangedAnnotation = Annotation2.define();
 var awareness = (provider = dummyProvider) => {
   return [
     awarenessProvider.of(provider),
-    ViewPlugin8.fromClass(RemoteSelectionsDecorator, {
+    ViewPlugin6.fromClass(RemoteSelectionsDecorator, {
       decorations: (value) => value.decorations
     }),
     styles
   ];
 };
 var RemoteSelectionsDecorator = class {
-  _ctx = new Context(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 33 });
+  _ctx = new Context(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 33 });
   _cursorConverter;
   _provider;
   _lastAnchor;
@@ -1330,7 +1006,7 @@ var RemoteCaretWidget = class extends WidgetType3 {
     return true;
   }
 };
-var styles = EditorView7.theme({
+var styles = EditorView5.theme({
   ".cm-collab-selection": {},
   ".cm-collab-selectionLine": {
     padding: 0,
@@ -1392,8 +1068,8 @@ var styles = EditorView7.theme({
 import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
 import { Context as Context2 } from "@dxos/context";
 import { invariant } from "@dxos/invariant";
-import { log as log5 } from "@dxos/log";
-var __dxlog_file6 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/awareness/awareness-provider.ts";
+import { log as log4 } from "@dxos/log";
+var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/awareness/awareness-provider.ts";
 var DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
   _remoteStates = /* @__PURE__ */ new Map();
@@ -1412,7 +1088,7 @@ var SpaceAwarenessProvider = class {
     this._info = info;
   }
   open() {
-    this._ctx = new Context2(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 28 });
+    this._ctx = new Context2(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 28 });
     this._postTask = new DeferredTask(this._ctx, async () => {
       if (this._localState) {
         await this._messenger.postMessage(this._channel, {
@@ -1437,9 +1113,9 @@ var SpaceAwarenessProvider = class {
     void this._messenger.postMessage(this._channel, {
       kind: "query"
     }).catch((err) => {
-      log5.debug("failed to query awareness", {
+      log4.debug("failed to query awareness", {
         err
-      }, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 57, S: this });
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 57, S: this });
     });
   }
   close() {
@@ -1451,7 +1127,7 @@ var SpaceAwarenessProvider = class {
     return Array.from(this._remoteStates.values());
   }
   update(position) {
-    invariant(this._postTask, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 71, S: this, A: ["this._postTask", ""] });
+    invariant(this._postTask, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 71, S: this, A: ["this._postTask", ""] });
     this._localState = {
       peerId: this._peerId,
       position,
@@ -1460,22 +1136,22 @@ var SpaceAwarenessProvider = class {
     this._postTask.schedule();
   }
   _handleQueryMessage() {
-    invariant(this._postTask, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 80, S: this, A: ["this._postTask", ""] });
+    invariant(this._postTask, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 80, S: this, A: ["this._postTask", ""] });
     this._postTask.schedule();
   }
   _handlePostMessage(message) {
-    invariant(message.kind === "post", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 84, S: this, A: ["message.kind === 'post'", ""] });
+    invariant(message.kind === "post", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 84, S: this, A: ["message.kind === 'post'", ""] });
     this._remoteStates.set(message.state.peerId, message.state);
     this.remoteStateChange.emit();
   }
 };
 
 // src/extensions/blast.ts
-import { EditorView as EditorView8, keymap as keymap3 } from "@codemirror/view";
+import { EditorView as EditorView6, keymap as keymap3 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
-import { throttle as throttle2 } from "@dxos/async";
+import { throttle } from "@dxos/async";
 import { invariant as invariant2 } from "@dxos/invariant";
-var __dxlog_file7 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/blast.ts";
+var __dxlog_file6 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
   maxParticles: 200,
@@ -1520,7 +1196,7 @@ var blast = (options = defaultOptions) => {
   };
   return [
     // Cursor moved.
-    EditorView8.updateListener.of((update2) => {
+    EditorView6.updateListener.of((update2) => {
       if (blaster?.node !== update2.view.scrollDOM) {
         if (blaster) {
           blaster.destroy();
@@ -1593,7 +1269,7 @@ var Blaster = class {
     return this._node;
   }
   initialize() {
-    invariant2(!this._canvas && !this._ctx, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file7, L: 134, S: this, A: ["!this._canvas && !this._ctx", ""] });
+    invariant2(!this._canvas && !this._ctx, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 134, S: this, A: ["!this._canvas && !this._ctx", ""] });
     this._canvas = document.createElement("canvas");
     this._canvas.id = "code-blast-canvas";
     this._canvas.style.position = "absolute";
@@ -1622,7 +1298,7 @@ var Blaster = class {
     }
   }
   start() {
-    invariant2(this._canvas && this._ctx, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file7, L: 166, S: this, A: ["this._canvas && this._ctx", ""] });
+    invariant2(this._canvas && this._ctx, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 166, S: this, A: ["this._canvas && this._ctx", ""] });
     this._running = true;
     this.loop();
   }
@@ -1649,11 +1325,11 @@ var Blaster = class {
     this.drawParticles();
     requestAnimationFrame(this.loop.bind(this));
   }
-  shake = throttle2(({ time }) => {
+  shake = throttle(({ time }) => {
     this._shakeTime = this._shakeTimeMax || time;
     this._shakeTimeMax = time;
   }, 100);
-  spawn = throttle2(({ element, point }) => {
+  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;
@@ -1762,9 +1438,9 @@ var random = (min, max) => {
 
 // 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 { Decoration as Decoration6, EditorView as EditorView7, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/ui-theme";
-var paragraphBlockPlugin = ViewPlugin9.fromClass(class {
+var paragraphBlockPlugin = ViewPlugin7.fromClass(class {
   decorations;
   constructor(view) {
     this.decorations = this.build(view);
@@ -1823,7 +1499,7 @@ var paragraphBlockPlugin = ViewPlugin9.fromClass(class {
 });
 var blocks = () => [
   paragraphBlockPlugin,
-  EditorView9.baseTheme({
+  EditorView7.baseTheme({
     ".cm-line.block-line": {
       paddingLeft: "0.75rem",
       paddingRight: "0.75rem",
@@ -1857,13 +1533,13 @@ var blocks = () => [
 ];
 
 // src/extensions/bookmarks.ts
-import { Prec as Prec3, StateEffect as StateEffect4, StateField as StateField2 } from "@codemirror/state";
+import { Prec as Prec3, StateEffect as StateEffect2, StateField as StateField2 } from "@codemirror/state";
 import { keymap as keymap4 } from "@codemirror/view";
-import { log as log6 } from "@dxos/log";
-var __dxlog_file8 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/bookmarks.ts";
-var addBookmark = StateEffect4.define();
-var removeBookmark = StateEffect4.define();
-var clearBookmarks = StateEffect4.define();
+import { log as log5 } from "@dxos/log";
+var __dxlog_file7 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/bookmarks.ts";
+var addBookmark = StateEffect2.define();
+var removeBookmark = StateEffect2.define();
+var clearBookmarks = StateEffect2.define();
 var bookmarks = () => {
   return [
     bookmarksField,
@@ -1872,7 +1548,7 @@ var bookmarks = () => {
         key: "Mod-ArrowUp",
         run: (view) => {
           const bookmarks2 = view.state.field(bookmarksField);
-          log6("up", bookmarks2, { "~LogMeta": "~LogMeta", F: __dxlog_file8, L: 18, S: void 0 });
+          log5("up", bookmarks2, { "~LogMeta": "~LogMeta", F: __dxlog_file7, L: 18, S: void 0 });
           return true;
         }
       },
@@ -1880,7 +1556,7 @@ var bookmarks = () => {
         key: "Mod-ArrowDown",
         run: (view) => {
           const bookmarks2 = view.state.field(bookmarksField);
-          log6("down", bookmarks2, { "~LogMeta": "~LogMeta", F: __dxlog_file8, L: 26, S: void 0 });
+          log5("down", bookmarks2, { "~LogMeta": "~LogMeta", F: __dxlog_file7, L: 26, S: void 0 });
           return true;
         }
       }
@@ -1917,27 +1593,27 @@ var bookmarksField = StateField2.define({
 
 // 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 { StateEffect as StateEffect3, StateField as StateField3 } from "@codemirror/state";
+import { Decoration as Decoration7, EditorView as EditorView9, ViewPlugin as ViewPlugin8, hoverTooltip, keymap as keymap6 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { debounce as debounce2 } from "@dxos/async";
-import { log as log7 } from "@dxos/log";
+import { log as log6 } 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 { EditorView as EditorView8, keymap as keymap5 } from "@codemirror/view";
 import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isTruthy } from "@dxos/util";
-var __dxlog_file9 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/selection.ts";
+var __dxlog_file8 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/selection.ts";
 var documentId = singleValueFacet();
 var stateRestoreAnnotation = "org.dxos.cm.state-restore";
 var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView10.scrollIntoView(scrollTo, {
+    effects: scrollTo ? EditorView8.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: Transaction3.userEvent.of(stateRestoreAnnotation)
@@ -1945,12 +1621,12 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
 };
 var createEditorStateStore = (keyPrefix) => ({
   getState: (id) => {
-    invariant3(id, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file9, L: 26, S: void 0, A: ["id", ""] });
+    invariant3(id, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file8, L: 26, S: void 0, A: ["id", ""] });
     const state = localStorage.getItem(`${keyPrefix}/${id}`);
     return state ? JSON.parse(state) : void 0;
   },
   setState: (id, state) => {
-    invariant3(id, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file9, L: 31, S: void 0, A: ["id", ""] });
+    invariant3(id, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file8, L: 31, S: void 0, A: ["id", ""] });
     localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
   }
 });
@@ -1963,7 +1639,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    EditorView10.updateListener.of(({ view, transactions }) => {
+    EditorView8.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -2002,10 +1678,10 @@ var selectionState = ({ getState, setState } = {}) => {
 };
 
 // src/extensions/comments.ts
-var __dxlog_file10 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/comments.ts";
-var setComments = StateEffect5.define();
-var setSelection = StateEffect5.define();
-var setCommentState = StateEffect5.define();
+var __dxlog_file9 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/comments.ts";
+var setComments = StateEffect3.define();
+var setSelection = StateEffect3.define();
+var setCommentState = StateEffect3.define();
 var commentsState = StateField3.define({
   create: (state) => ({
     id: state.facet(documentId),
@@ -2044,35 +1720,35 @@ var commentsState = StateField3.define({
     return value;
   }
 });
-var styles2 = EditorView11.theme({
-  ".cm-comment, .cm-comment-current": {
-    padding: "3px 0",
-    color: "var(--color-cm-comment-text)",
-    backgroundColor: "var(--color-cm-comment-surface)"
-  },
-  ".cm-comment > span, .cm-comment-current > span": {
+var styles2 = EditorView9.theme({
+  ".cm-comment > span": {
     boxDecorationBreak: "clone",
-    boxShadow: "0 0 1px 3px var(--color-cm-comment-surface)",
+    boxShadow: "0 0 0 3px var(--color-cm-comment-surface)",
     backgroundColor: "var(--color-cm-comment-surface)",
-    color: "var(--color-cm-comment-text)",
+    color: "var(--color-cm-comment-text) !important",
     cursor: "pointer"
+  },
+  '.cm-comment[data-current="1"] > span': {
+    boxShadow: "0 0 0 3px var(--color-cm-comment-current-surface)",
+    backgroundColor: "var(--color-cm-comment-current-surface)"
   }
 });
 var createCommentMark = (id, isCurrent) => Decoration7.mark({
-  class: isCurrent ? "cm-comment-current" : "cm-comment",
+  class: "cm-comment",
   attributes: {
     "data-testid": "cm-comment",
-    "data-comment-id": id
+    "data-comment-id": id,
+    "data-current": isCurrent ? "1" : "0"
   }
 });
-var commentsDecorations = EditorView11.decorations.compute([
+var commentsDecorations = EditorView9.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
   const decorations2 = sortBy(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
     const range = comment.range;
     if (!range) {
-      log7.warn("Invalid range:", range, { "~LogMeta": "~LogMeta", F: __dxlog_file10, L: 93, S: void 0 });
+      log6.warn("Invalid range:", range, { "~LogMeta": "~LogMeta", F: __dxlog_file9, L: 93, S: void 0 });
       return void 0;
     } else if (range.from === range.to) {
       return void 0;
@@ -2082,8 +1758,8 @@ var commentsDecorations = EditorView11.decorations.compute([
   }).filter(isNonNullable);
   return Decoration7.set(decorations2);
 });
-var commentClickedEffect = StateEffect5.define();
-var handleCommentClick = EditorView11.domEventHandlers({
+var commentClickedEffect = StateEffect3.define();
+var handleCommentClick = EditorView9.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -2122,7 +1798,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView11.domEventHandlers({
+    EditorView9.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -2144,7 +1820,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView11.updateListener.of((update2) => {
+    EditorView9.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -2200,7 +1876,7 @@ var mapTrackedComment = (comment, changes) => ({
   from: changes.mapPos(comment.from, 1),
   to: changes.mapPos(comment.to, 1)
 });
-var restoreCommentEffect = StateEffect5.define({
+var restoreCommentEffect = StateEffect3.define({
   map: mapTrackedComment
 });
 var createComment = (view) => {
@@ -2286,7 +1962,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView11.updateListener.of(({ view, state, changes }) => {
+    EditorView9.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -2318,7 +1994,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView11.updateListener.of(({ view, state }) => {
+    EditorView9.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -2354,34 +2030,41 @@ var comments = (options = {}) => {
     options.onUpdate && trackPastedComments(options.onUpdate)
   ].filter(isNonNullable);
 };
-var scrollThreadIntoView = (view, id, center = true) => {
+var isRangeVisible = (view, range) => {
+  const from = view.coordsAtPos(range.from);
+  const to = view.coordsAtPos(range.to);
+  if (!from || !to) {
+    return false;
+  }
+  const { top, bottom } = view.scrollDOM.getBoundingClientRect();
+  return from.top >= top && to.bottom <= bottom;
+};
+var scrollThreadIntoView = (view, id, { y = "center", yMargin } = {}) => {
   const comment = view.state.field(commentsState).comments.find((range2) => range2.comment.id === id);
   if (!comment?.comment.cursor) {
     return;
   }
   const range = Cursor.getRangeFromCursor(view.state, comment.comment.cursor);
-  if (range) {
-    const currentSelection = view.state.selection.main;
-    const currentScrollPosition = view.scrollDOM.scrollTop;
-    const targetScrollPosition = view.coordsAtPos(range.from)?.top;
-    const needsScroll = targetScrollPosition !== void 0 && (targetScrollPosition < currentScrollPosition || targetScrollPosition > currentScrollPosition + view.scrollDOM.clientHeight);
-    const needsSelectionUpdate = currentSelection.from !== range.from || currentSelection.to !== range.from;
-    if (needsScroll || needsSelectionUpdate) {
-      view.dispatch({
-        selection: needsSelectionUpdate ? {
-          anchor: range.from
-        } : void 0,
-        effects: [
-          needsScroll ? EditorView11.scrollIntoView(range.from, center ? {
-            y: "center"
-          } : void 0) : [],
-          needsSelectionUpdate ? setSelection.of({
-            current: id
-          }) : []
-        ].flat()
-      });
-    }
+  if (!range) {
+    return;
   }
+  const { from, to } = view.state.selection.main;
+  const needsSelectionUpdate = from !== range.from || to !== range.from;
+  view.dispatch({
+    selection: needsSelectionUpdate ? {
+      anchor: range.from
+    } : void 0,
+    effects: [
+      isRangeVisible(view, range) ? [] : EditorView9.scrollIntoView(range.from, {
+        y,
+        yMargin
+      }),
+      // Always mark this thread current so the highlight follows the selected thread.
+      setSelection.of({
+        current: id
+      })
+    ].flat()
+  });
 };
 var ExternalCommentSync = class {
   unsubscribe;
@@ -2403,7 +2086,7 @@ var ExternalCommentSync = class {
     this.unsubscribe();
   };
 };
-var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin10.fromClass(class {
+var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin8.fromClass(class {
   constructor(view) {
     return new ExternalCommentSync(view, id, subscribe, getComments);
   }
@@ -2423,12 +2106,12 @@ var debugNodeLogger = (log12 = console.log) => {
 };
 
 // src/extensions/dnd.ts
-import { EditorView as EditorView12, dropCursor } from "@codemirror/view";
+import { EditorView as EditorView10, dropCursor } from "@codemirror/view";
 var dropFile = (options = {}) => {
   return [
     styles3,
     dropCursor(),
-    EditorView12.domEventHandlers({
+    EditorView10.domEventHandlers({
       drop: (event, view) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
@@ -2447,7 +2130,7 @@ var dropFile = (options = {}) => {
     })
   ];
 };
-var styles3 = EditorView12.theme({
+var styles3 = EditorView10.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--color-accent-text)",
     color: "var(--color-accent-text)",
@@ -2464,15 +2147,15 @@ 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 EditorView16, ViewPlugin as ViewPlugin12, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap7, lineNumbers, placeholder as placeholder2 } from "@codemirror/view";
+import { EditorView as EditorView17, ViewPlugin as ViewPlugin13, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap7, lineNumbers, placeholder as placeholder2 } from "@codemirror/view";
 import { vscodeDarkStyle, vscodeLightStyle } from "@uiw/codemirror-theme-vscode";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import { generateName } from "@dxos/display-name";
 import { log as log8 } from "@dxos/log";
-import { hexToHue, isTruthy as isTruthy2 } from "@dxos/util";
+import { hexToHue, isTruthy as isTruthy3 } from "@dxos/util";
 
 // src/styles/theme.ts
-import { EditorView as EditorView13 } from "@codemirror/view";
+import { EditorView as EditorView11 } from "@codemirror/view";
 import { mx as mx3 } from "@dxos/ui-theme";
 var headings = {
   1: {
@@ -2520,7 +2203,7 @@ var markdownTheme = {
     fontWeight: "100 !important"
   })
 };
-var baseTheme = EditorView13.baseTheme({
+var baseTheme = EditorView11.baseTheme({
   /**
   * Outer frame.
   */
@@ -2532,7 +2215,7 @@ var baseTheme = EditorView13.baseTheme({
   * Scroller
   */
   ".cm-scroller": {
-    // Browser scroll-anchoring: see comment in `scroller.ts`. `auto` lets the browser pin a
+    // Browser scroll-anchoring: see comment in `scrolling/crawler.ts`. `auto` lets the browser pin a
     // stable element near the viewport top so widget resizes (e.g. tool-block TogglePanel
     // open/close) don't jump the user's view.
     overflowAnchor: "auto"
@@ -2643,7 +2326,8 @@ var baseTheme = EditorView13.baseTheme({
     textDecorationThickness: "1px",
     textDecorationColor: "var(--color-separator)",
     textUnderlineOffset: "2px",
-    borderRadius: ".125rem"
+    borderRadius: ".125rem",
+    cursor: "pointer"
   },
   ".cm-link > span": {
     color: "var(--color-accent-text)"
@@ -2681,12 +2365,12 @@ var baseTheme = EditorView13.baseTheme({
     padding: "4px"
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
-    background: "var(--color-active-surface)",
-    color: "var(--color-base-surface-text)"
+    background: "var(--color-current-surface)",
+    color: "var(--color-base-fg)"
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
     paddingLeft: "4px !important",
-    color: "var(--color-base-surface-text)"
+    color: "var(--color-base-fg)"
   },
   /**
   * Completion info.
@@ -2705,7 +2389,7 @@ var baseTheme = EditorView13.baseTheme({
     padding: "0 4px"
   },
   ".cm-completionMatchedText": {
-    color: "var(--color-base-surface-text)",
+    color: "var(--color-base-fg)",
     textDecoration: "none !important"
   },
   /**
@@ -2740,7 +2424,7 @@ var baseTheme = EditorView13.baseTheme({
     backgroundColor: "var(--color-input-surface)"
   },
   ".cm-panel input:focus, .cm-panel button:focus": {
-    outline: "1px solid var(--color-neutral-focus-indicator)"
+    outline: "1px solid var(--color-focus-ring-subtle)"
   },
   ".cm-panel label": {
     display: "inline-flex",
@@ -2753,15 +2437,15 @@ var baseTheme = EditorView13.baseTheme({
     height: "8px",
     marginRight: "6px !important",
     padding: "2px !important",
-    color: "var(--color-neutral-focus-indicator)"
+    color: "var(--color-focus-ring-subtle)"
   },
   ".cm-panel button": {
     "&:hover": {
-      // TODO(burdon): Replace with layer and @apply bg-accent-surface-hover
-      backgroundColor: "var(--color-accent-surface-hover) !important"
+      // TODO(burdon): Replace with layer and @apply bg-accent-bg-hover
+      backgroundColor: "var(--color-accent-bg-hover) !important"
     },
     "&:active": {
-      backgroundColor: "var(--color-accent-surface-hover)"
+      backgroundColor: "var(--color-accent-bg-hover)"
     }
   },
   ".cm-panel.cm-search": {
@@ -2769,14 +2453,14 @@ var baseTheme = EditorView13.baseTheme({
     borderTop: "1px solid var(--color-separator)"
   }
 });
-var editorGutter = EditorView13.theme({
+var editorGutter = EditorView11.theme({
   ".cm-gutters": {
     // NOTE: Non-transparent background required to cover content if scrolling horizontally.
     background: "var(--color-base-surface) !important",
     paddingRight: "1rem"
   }
 });
-var createFontTheme = ({ monospace } = {}) => EditorView13.theme({
+var createFontTheme = ({ monospace } = {}) => EditorView11.theme({
   // Main content.
   ".cm-scroller": {
     fontFamily: monospace ? fontMono : fontBody
@@ -2789,9 +2473,9 @@ var createFontTheme = ({ monospace } = {}) => EditorView13.theme({
 });
 
 // src/extensions/focus.ts
-import { StateEffect as StateEffect6, StateField as StateField5 } from "@codemirror/state";
-import { EditorView as EditorView14 } from "@codemirror/view";
-var focusEffect = StateEffect6.define();
+import { StateEffect as StateEffect4, StateField as StateField5 } from "@codemirror/state";
+import { EditorView as EditorView12 } from "@codemirror/view";
+var focusEffect = StateEffect4.define();
 var focusField = StateField5.define({
   create: () => false,
   update: (value, tr) => {
@@ -2800,38 +2484,422 @@ var focusField = StateField5.define({
         return effect.value;
       }
     }
-    return value;
+    return value;
+  }
+});
+var focus = [
+  focusField,
+  EditorView12.domEventHandlers({
+    focus: (_event, view) => {
+      requestAnimationFrame(() => view.dispatch({
+        effects: focusEffect.of(true)
+      }));
+    },
+    blur: (_event, view) => {
+      requestAnimationFrame(() => view.dispatch({
+        effects: focusEffect.of(false)
+      }));
+    }
+  })
+];
+
+// src/extensions/scrolling/auto-scroll.ts
+import { StateEffect as StateEffect6 } from "@codemirror/state";
+import { EditorView as EditorView14, ViewPlugin as ViewPlugin10 } from "@codemirror/view";
+import { addEventListener, combine, throttle as throttle2 } from "@dxos/async";
+import { Domino } from "@dxos/ui";
+import { getSize } from "@dxos/ui-theme";
+
+// src/extensions/scrolling/crawler.ts
+import { StateEffect as StateEffect5 } from "@codemirror/state";
+import { EditorView as EditorView13, ViewPlugin as ViewPlugin9 } from "@codemirror/view";
+import { log as log7 } from "@dxos/log";
+var __dxlog_file10 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/scrolling/crawler.ts";
+var crawlerLineEffect = StateEffect5.define();
+var crawlerActiveEffect = StateEffect5.define();
+var scrollToLine = (view, options) => {
+  view.dispatch({
+    effects: crawlerLineEffect.of(options)
+  });
+};
+var crawler = ({ overScroll = 0 } = {}) => {
+  const crawlerPlugin = ViewPlugin9.fromClass(class CrawlerPlugin {
+    view;
+    crawler;
+    constructor(view) {
+      this.view = view;
+      this.crawler = createCrawler(this.view);
+    }
+    // No-op.
+    destroy() {
+      this.crawler.cancel();
+    }
+    cancel() {
+      this.crawler.cancel();
+    }
+    crawl({ active, instant } = {
+      active: false
+    }) {
+      if (active) {
+        this.crawler.scroll(instant);
+      } else {
+        this.crawler.cancel();
+      }
+    }
+    scroll({ line, offset = 0, position, behavior = "instant" }) {
+      const { scrollTop, scrollHeight, clientHeight } = this.view.scrollDOM;
+      const scrollerRect = this.view.scrollDOM.getBoundingClientRect();
+      const doc = this.view.state.doc;
+      let targetScrollTop = scrollHeight - clientHeight + offset;
+      if (line >= 0 && line <= doc.lines - 1) {
+        const lineStart = doc.line(line + 1).from;
+        const coords = this.view.coordsAtPos(lineStart);
+        if (coords) {
+          const currentScrollTop = scrollTop;
+          const maxScrollTop = scrollHeight - clientHeight;
+          if (position === "end") {
+            targetScrollTop = currentScrollTop + coords.bottom - scrollerRect.bottom + offset;
+          } else {
+            targetScrollTop = currentScrollTop + coords.top - scrollerRect.top + offset;
+          }
+          targetScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
+        }
+      }
+      requestAnimationFrame(() => {
+        this.view.scrollDOM.scrollTo({
+          top: targetScrollTop
+        });
+      });
+    }
+  });
+  return [
+    crawlerPlugin,
+    // Listen for effect.
+    EditorView13.updateListener.of((update2) => {
+      update2.transactions.forEach((transaction) => {
+        try {
+          const plugin = update2.view.plugin(crawlerPlugin);
+          if (plugin) {
+            for (const effect of transaction.effects) {
+              if (effect.is(crawlerActiveEffect)) {
+                plugin.crawl(effect.value);
+              } else if (effect.is(crawlerLineEffect)) {
+                plugin.scroll(effect.value);
+              }
+            }
+          }
+        } catch (err) {
+          log7.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file10, L: 105, S: void 0 });
+        }
+      });
+    }),
+    // Styles.
+    EditorView13.theme({
+      ".cm-scroller": {
+        overflowY: "scroll",
+        // Browser scroll-anchoring: when widgets above the viewport resize (e.g. tool blocks
+        // expanding their TogglePanel), the browser picks a stable element near the viewport
+        // top and adjusts `scrollTop` so the user's view doesn't jump. Auto-scroll's pinning
+        // logic still has the final word when pinned (forces scrollTop to scrollHeight).
+        overflowAnchor: "auto"
+      },
+      ".cm-scroller.cm-hide-scrollbar::-webkit-scrollbar": {
+        display: "none"
+      },
+      ".cm-scroller::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        transition: "background 0.15s"
+      },
+      "&:hover .cm-scroller::-webkit-scrollbar-thumb": {
+        background: "var(--color-scrollbar-thumb)"
+      },
+      // Spacer below the last text line. Implemented as a real block pseudo-element
+      // (rather than `padding-bottom` on `.cm-content`) so it materializes in the
+      // scroller's `scrollHeight` regardless of how `padding` is reset by the base
+      // theme or downstream classes — this is what gives auto-scroll its head-room
+      // so the last line stays `overScroll` px above the viewport bottom.
+      ".cm-content::after": {
+        content: '""',
+        display: "block",
+        height: `${overScroll}px`
+      },
+      ".cm-scroll-button": {
+        position: "absolute",
+        bottom: "0.5rem",
+        right: "1rem"
+      }
+    })
+  ];
+};
+function createCrawler(view, omega = 5, snapThreshold = 5, snapVelocity = 50) {
+  const el = view.scrollDOM;
+  let currentTop = 0;
+  let velocity = 0;
+  let rafId = null;
+  let lastTime = 0;
+  let instant = false;
+  function frame(now) {
+    const dt = lastTime === 0 ? 1 / 60 : Math.min(0.1, (now - lastTime) / 1e3);
+    lastTime = now;
+    const targetTop = el.scrollHeight - el.clientHeight;
+    const delta = targetTop - currentTop;
+    if (instant) {
+      el.scrollTop = targetTop;
+      currentTop = targetTop;
+      velocity = 0;
+      if (Math.abs(delta) < snapThreshold) {
+        rafId = null;
+        lastTime = 0;
+        return;
+      }
+      rafId = requestAnimationFrame(frame);
+      return;
+    }
+    if (Math.abs(delta) < snapThreshold && Math.abs(velocity) < snapVelocity) {
+      el.scrollTop = targetTop;
+      currentTop = targetTop;
+      velocity = 0;
+      rafId = null;
+      lastTime = 0;
+      return;
+    }
+    const accel = omega * omega * delta - 2 * omega * velocity;
+    velocity += accel * dt;
+    currentTop += velocity * dt;
+    el.scrollTop = currentTop;
+    rafId = requestAnimationFrame(frame);
   }
-});
-var focus = [
-  focusField,
-  EditorView14.domEventHandlers({
-    focus: (_event, view) => {
-      requestAnimationFrame(() => view.dispatch({
-        effects: focusEffect.of(true)
-      }));
+  return {
+    scroll: (useInstant = false) => {
+      instant = useInstant;
+      if (rafId === null) {
+        currentTop = el.scrollTop;
+        lastTime = 0;
+        rafId = requestAnimationFrame(frame);
+      }
     },
-    blur: (_event, view) => {
-      requestAnimationFrame(() => view.dispatch({
-        effects: focusEffect.of(false)
-      }));
+    cancel: () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        velocity = 0;
+        lastTime = 0;
+        rafId = null;
+      }
     }
-  })
-];
+  };
+}
+
+// src/extensions/scrolling/auto-scroll.ts
+var autoScrollEffect = StateEffect6.define();
+var autoScroll = ({ scrollOnResize = true } = {}) => {
+  let buttonContainer;
+  let isPinned = true;
+  let jumpPending = false;
+  let enabled = true;
+  let firstUpdate = true;
+  let streamed = false;
+  const setPinned = (pinned) => {
+    buttonContainer?.classList.toggle("opacity-0", pinned);
+    isPinned = pinned;
+  };
+  return [
+    // Update listener for scrolling when content changes.
+    EditorView14.updateListener.of((update2) => {
+      const { view, heightChanged, state, startState } = update2;
+      for (const tr of update2.transactions) {
+        for (const effect of tr.effects) {
+          if (effect.is(autoScrollEffect)) {
+            enabled = effect.value;
+            if (enabled) {
+              setPinned(true);
+              view.dispatch({
+                effects: crawlerActiveEffect.of({
+                  active: true
+                })
+              });
+            } else {
+              view.dispatch({
+                effects: crawlerActiveEffect.of({
+                  active: false
+                })
+              });
+            }
+          }
+        }
+      }
+      if (!enabled) {
+        return;
+      }
+      if (isPinned && (firstUpdate || startState.doc.length === 0) && state.doc.length > 0) {
+        firstUpdate = false;
+        jumpPending = true;
+        requestAnimationFrame(() => {
+          view.scrollDOM.scrollTop = view.scrollDOM.scrollHeight;
+          jumpPending = false;
+        });
+        return;
+      }
+      firstUpdate = false;
+      if (jumpPending) {
+        return;
+      }
+      if (heightChanged) {
+        if (isPinned) {
+          const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+          const delta = scrollHeight - scrollTop - clientHeight;
+          if (update2.docChanged) {
+            streamed = true;
+          }
+          if (delta > 0) {
+            setPinned(true);
+            view.dispatch({
+              effects: crawlerActiveEffect.of({
+                active: true,
+                instant: !streamed
+              })
+            });
+          } else if (delta < -1) {
+            setPinned(false);
+          }
+        } else {
+          if (state.doc.length === 0) {
+            setPinned(true);
+          }
+        }
+      }
+    }),
+    // Re-pin and jump to bottom when the scroll container itself resizes (e.g. sidebar toggle,
+    // window resize). Doc-driven height changes are handled by the updateListener above; this
+    // observer covers the case where the viewport changes while the doc length is unchanged.
+    scrollOnResize ? ViewPlugin10.fromClass(class {
+      observer;
+      firstObservation = true;
+      destroyed = false;
+      constructor(view) {
+        const onResize = throttle2(() => {
+          if (this.destroyed || !enabled) {
+            return;
+          }
+          setPinned(true);
+          requestAnimationFrame(() => {
+            if (this.destroyed) {
+              return;
+            }
+            view.scrollDOM.scrollTo({
+              top: view.scrollDOM.scrollHeight,
+              behavior: "instant"
+            });
+            view.dispatch({
+              effects: crawlerActiveEffect.of({
+                active: false
+              })
+            });
+          });
+        }, 50);
+        this.observer = new ResizeObserver(() => {
+          if (this.firstObservation) {
+            this.firstObservation = false;
+            return;
+          }
+          onResize();
+        });
+        this.observer.observe(view.scrollDOM);
+      }
+      destroy() {
+        this.destroyed = true;
+        this.observer.disconnect();
+      }
+    }) : [],
+    // Detect user scroll and unpin (or re-pin if scrolled to the bottom).
+    ViewPlugin10.fromClass(class {
+      cleanup;
+      constructor(view) {
+        const onUserScroll = throttle2(() => {
+          requestAnimationFrame(() => {
+            const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+            const delta = scrollHeight - scrollTop - clientHeight;
+            const pinned = Math.abs(delta) <= 1;
+            setPinned(pinned);
+            if (!pinned) {
+              view.dispatch({
+                effects: crawlerActiveEffect.of({
+                  active: false
+                })
+              });
+            }
+          });
+        }, 500);
+        this.cleanup = createUserScrollDetector(view.scrollDOM, () => {
+          if (isPinned) {
+            setPinned(false);
+            view.dispatch({
+              effects: crawlerActiveEffect.of({
+                active: false
+              })
+            });
+          }
+          onUserScroll();
+        });
+      }
+      destroy() {
+        this.cleanup();
+      }
+    }),
+    // Scroll button.
+    ViewPlugin10.fromClass(class {
+      constructor(view) {
+        const icon = Domino.of("dx-icon").classNames(getSize(4)).attributes({
+          icon: "ph--arrow-down--regular"
+        });
+        const button = Domino.of("button").classNames("dx-button bg-accent-bg").attributes({
+          "data-density": "md"
+        }).append(icon).on("click", () => {
+          setPinned(true);
+          view.dispatch({
+            effects: [
+              crawlerLineEffect.of({
+                line: -1,
+                position: "end",
+                behavior: "smooth"
+              }),
+              // Re-engage the follower so it keeps tracking the bottom as content continues
+              // to stream after the catch-up jump.
+              crawlerActiveEffect.of({
+                active: true,
+                instant: !streamed
+              })
+            ]
+          });
+        });
+        buttonContainer = Domino.of("div").classNames("cm-scroll-button transition-opacity duration-300 opacity-0 z-1").append(button).root;
+        view.scrollDOM.parentElement.appendChild(buttonContainer);
+      }
+    })
+  ];
+};
+function createUserScrollDetector(element, onUserScroll) {
+  return combine(addEventListener(element, "wheel", () => onUserScroll(), {
+    passive: true
+  }), addEventListener(element, "pointerdown", (event) => {
+    if (event.clientX > element.getBoundingClientRect().right - (element.offsetWidth - element.clientWidth)) {
+      onUserScroll();
+    }
+  }));
+}
 
-// src/extensions/scroll-past-end.ts
+// src/extensions/scrolling/scroll-past-end.ts
 import { EditorView as EditorView15, ViewPlugin as ViewPlugin11 } from "@codemirror/view";
 var scrollPastEndPlugin = ViewPlugin11.fromClass(class {
-  height = 1e3;
-  attrs = {
-    style: "padding-bottom: 1000px"
+  _height = 1e3;
+  _attrs = {
+    style: `padding-bottom: ${this._height}px`
   };
   update({ view }) {
     const lastLineBlock = view.lineBlockAt(view.state.doc.length);
     const height = view.dom.clientHeight - lastLineBlock.height - view.documentPadding.top - 0.5;
-    if (height >= 0 && height !== this.height) {
-      this.height = height;
-      this.attrs = {
+    if (height >= 0 && height !== this._height) {
+      this._height = height;
+      this._attrs = {
         style: `padding-bottom: ${height}px`
       };
     }
@@ -2839,12 +2907,68 @@ var scrollPastEndPlugin = ViewPlugin11.fromClass(class {
 });
 var scrollPastEnd = () => [
   scrollPastEndPlugin,
-  EditorView15.contentAttributes.of((view) => view.plugin(scrollPastEndPlugin)?.attrs ?? null)
+  EditorView15.contentAttributes.of((view) => view.plugin(scrollPastEndPlugin)?._attrs ?? null)
+];
+
+// src/extensions/scrolling/scrollbar-autohide.ts
+import { EditorView as EditorView16, ViewPlugin as ViewPlugin12 } from "@codemirror/view";
+var scrollbarAutohide = ({ timeout = 800 } = {}) => [
+  ViewPlugin12.fromClass(
+    // NOTE: Uses TS `private`/plain fields rather than ES `#private`. CodeMirror's plugin lifecycle
+    // (and the source/prebundled double-load in dev) can invoke `destroy` with a `this` that the
+    // WeakMap-based `#private` transpilation rejects ("private field on non-instance"), crashing
+    // editor teardown. Plain fields avoid the membership check.
+    class {
+      _scroller;
+      _timer;
+      constructor(view) {
+        this._scroller = view.scrollDOM;
+        this._scroller.addEventListener("scroll", this._handleScroll, {
+          passive: true
+        });
+      }
+      destroy() {
+        this._scroller.removeEventListener("scroll", this._handleScroll);
+        clearTimeout(this._timer);
+        this._scroller.classList.remove("cm-scrolling");
+      }
+      // Show the thumb while scrolling; remove the class once scrolling has been idle for `timeout`.
+      _handleScroll = () => {
+        this._scroller.classList.add("cm-scrolling");
+        clearTimeout(this._timer);
+        this._timer = setTimeout(() => this._scroller.classList.remove("cm-scrolling"), timeout);
+      };
+    }
+  ),
+  EditorView16.theme({
+    // Reveal the thumb only while actively scrolling.
+    ".cm-scroller.cm-scrolling::-webkit-scrollbar-thumb": {
+      background: "var(--color-scrollbar-thumb)"
+    },
+    // Suppress the base theme's hover-reveal (higher specificity via `:not(.cm-scrolling)`), so a
+    // hovered/focused-but-idle editor keeps the thumb hidden.
+    "&:hover .cm-scroller:not(.cm-scrolling)::-webkit-scrollbar-thumb": {
+      background: "transparent"
+    }
+  })
 ];
 
+// src/extensions/scrolling/scroller.ts
+import { isTruthy as isTruthy2 } from "@dxos/util";
+var scroller = ({ overScroll, scrollOnResize, autoScroll: autoScroll2 = true } = {}) => {
+  return [
+    crawler({
+      overScroll
+    }),
+    autoScroll2 && autoScroll({
+      scrollOnResize
+    })
+  ].filter(isTruthy2);
+};
+
 // src/extensions/factories.ts
 var __dxlog_file11 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/factories.ts";
-var tabbable = EditorView16.contentAttributes.of({
+var tabbable = EditorView17.contentAttributes.of({
   tabindex: "0"
 });
 var filterChars = (chars) => {
@@ -2897,7 +3021,7 @@ var createBasicExtensions = (propsProp) => {
   const props = defaultsDeep2({}, propsProp, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    EditorView16.exceptionSink.of((err) => {
+    EditorView17.exceptionSink.of((err) => {
       log8.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file11, L: 79, S: void 0 });
     }),
     props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
@@ -2907,7 +3031,7 @@ var createBasicExtensions = (propsProp) => {
     props.drawSelection && drawSelection({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && EditorView16.editable.of(props.editable),
+    props.editable !== void 0 && EditorView17.editable.of(props.editable),
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
@@ -2915,7 +3039,7 @@ var createBasicExtensions = (propsProp) => {
       lineNumbers(),
       editorGutter
     ],
-    props.lineWrapping && EditorView16.lineWrapping,
+    props.lineWrapping && EditorView17.lineWrapping,
     props.placeholder && placeholder2(props.placeholder),
     props.readOnly !== void 0 && EditorState.readOnly.of(props.readOnly),
     // `EditorState.readOnly` is advisory — CodeMirror doesn't auto-reject doc-changing
@@ -2949,8 +3073,8 @@ var createBasicExtensions = (propsProp) => {
         preventDefault: true,
         run: () => true
       }
-    ].filter(isTruthy2))
-  ].filter(isTruthy2);
+    ].filter(isTruthy3))
+  ].filter(isTruthy3);
 };
 var grow = {
   editor: {
@@ -2971,18 +3095,18 @@ var createThemeExtensions = ({ monospace, scrollbarThin, slots: slotsProp, synta
   const slots = defaultsDeep2({}, slotsProp, defaultThemeSlots);
   return [
     baseTheme,
-    EditorView16.darkTheme.of(themeMode === "dark"),
+    EditorView17.darkTheme.of(themeMode === "dark"),
     createFontTheme({
       monospace
     }),
     syntaxHighlightingProp && syntaxHighlighting(HighlightStyle.define(themeMode === "dark" ? defaultStyles.dark : defaultStyles.light)),
-    slots.editor?.className && EditorView16.editorAttributes.of({
+    slots.editor?.className && EditorView17.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView16.contentAttributes.of({
+    slots.content?.className && EditorView17.contentAttributes.of({
       class: slots.content.className
     }),
-    (slots.scroller?.className || scrollbarThin) && ViewPlugin12.fromClass(class {
+    (slots.scroller?.className || scrollbarThin) && ViewPlugin13.fromClass(class {
       constructor(view) {
         if (slots.scroller?.className) {
           view.scrollDOM.classList.add(...slots.scroller.className.split(/\s+/));
@@ -2992,7 +3116,7 @@ var createThemeExtensions = ({ monospace, scrollbarThin, slots: slotsProp, synta
         }
       }
     })
-  ].filter(isTruthy2);
+  ].filter(isTruthy3);
 };
 var createDataExtensions = ({ id, text, messenger, identity }) => {
   const extensions = [];
@@ -3018,7 +3142,7 @@ var createDataExtensions = ({ id, text, messenger, identity }) => {
 
 // src/extensions/folding.ts
 import { codeFolding, foldGutter } from "@codemirror/language";
-import { EditorView as EditorView17 } from "@codemirror/view";
+import { EditorView as EditorView18 } from "@codemirror/view";
 import { Domino as Domino2, mx as mx4 } from "@dxos/ui";
 var folding = () => {
   return [
@@ -3033,7 +3157,7 @@ var folding = () => {
         }))).root;
       }
     }),
-    EditorView17.theme({
+    EditorView18.theme({
       ".cm-foldGutter": {
         opacity: 0.3,
         transition: "opacity 0.3s",
@@ -3047,7 +3171,7 @@ var folding = () => {
 };
 
 // src/extensions/hashtag.ts
-import { Decoration as Decoration8, EditorView as EditorView18, MatchDecorator, ViewPlugin as ViewPlugin13, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration8, EditorView as EditorView19, MatchDecorator, ViewPlugin as ViewPlugin14, WidgetType as WidgetType4 } from "@codemirror/view";
 import { getHashStyles, mx as mx5 } from "@dxos/ui-theme";
 var TagWidget = class extends WidgetType4 {
   _text;
@@ -3068,7 +3192,7 @@ var tagMatcher = new MatchDecorator({
   })
 });
 var hashtag = () => [
-  ViewPlugin13.fromClass(class {
+  ViewPlugin14.fromClass(class {
     tags;
     constructor(view) {
       this.tags = tagMatcher.createDeco(view);
@@ -3078,11 +3202,11 @@ var hashtag = () => [
     }
   }, {
     decorations: (instance) => instance.tags,
-    provide: (plugin) => EditorView18.atomicRanges.of((view) => {
+    provide: (plugin) => EditorView19.atomicRanges.of((view) => {
       return view.plugin(plugin)?.tags || Decoration8.none;
     })
   }),
-  EditorView18.theme({
+  EditorView19.theme({
     ".cm-tag": {
       borderRadius: "4px",
       marginRight: "6px",
@@ -3137,18 +3261,18 @@ var schemaLinter = (validate) => (view) => {
 };
 
 // src/extensions/listener.ts
-import { EditorView as EditorView19 } from "@codemirror/view";
+import { EditorView as EditorView20 } from "@codemirror/view";
 import { isNonNullable as isNonNullable2 } from "@dxos/util";
 var listener = ({ onFocus, onChange }) => {
   return [
-    onFocus && EditorView19.focusChangeEffect.of((state, focusing) => {
+    onFocus && EditorView20.focusChangeEffect.of((state, focusing) => {
       onFocus({
         id: state.facet(documentId),
         focusing
       });
       return null;
     }),
-    onChange && EditorView19.updateListener.of(({ state, docChanged }) => {
+    onChange && EditorView20.updateListener.of(({ state, docChanged }) => {
       if (docChanged) {
         onChange({
           id: state.facet(documentId),
@@ -3163,7 +3287,7 @@ var listener = ({ onFocus, onChange }) => {
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection as EditorSelection2 } from "@codemirror/state";
-import { EditorView as EditorView20, keymap as keymap8 } from "@codemirror/view";
+import { EditorView as EditorView21, 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) {
@@ -4252,7 +4376,7 @@ var getFormatting = (state) => {
   };
 };
 var formattingListener = (onStateChange, delay = 100) => {
-  return EditorView20.updateListener.of(debounceAndThrottle((update2) => {
+  return EditorView21.updateListener.of(debounceAndThrottle((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       onStateChange(getFormatting(update2.state));
     }
@@ -4316,7 +4440,7 @@ import { markdown, markdownLanguage as markdownLanguage2 } from "@codemirror/lan
 import { foldNodeProp, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { keymap as keymap9 } from "@codemirror/view";
-import { isTruthy as isTruthy3 } from "@dxos/util";
+import { isTruthy as isTruthy4 } from "@dxos/util";
 
 // src/extensions/markdown/highlight.ts
 import { markdownLanguage } from "@codemirror/lang-markdown";
@@ -4548,7 +4672,7 @@ var createMarkdownExtensions = (options = {}) => {
       ...defaultKeymap2,
       // TODO(burdon): Remove?
       ...completionKeymap
-    ].filter(isTruthy3))
+    ].filter(isTruthy4))
   ];
 };
 var noFencedCodeFolding = {
@@ -4598,16 +4722,16 @@ var convertTreeToJson = (state) => {
 
 // src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
-import { Prec as Prec4, RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect7 } from "@codemirror/state";
-import { Decoration as Decoration11, EditorView as EditorView24, ViewPlugin as ViewPlugin15, WidgetType as WidgetType7 } from "@codemirror/view";
+import { Prec as Prec4, RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect8 } from "@codemirror/state";
+import { Decoration as Decoration11, EditorView as EditorView25, ViewPlugin as ViewPlugin17, WidgetType as WidgetType7 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
 
 // src/extensions/markdown/changes.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { Transaction as Transaction4 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin14 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin15 } from "@codemirror/view";
 var adjustChanges = () => {
-  return ViewPlugin14.fromClass(class {
+  return ViewPlugin15.fromClass(class {
     update(update2) {
       const tree = syntaxTree4(update2.state);
       const adjustments = [];
@@ -4748,15 +4872,19 @@ var getValidUrl = (str) => {
 
 // src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { StateField as StateField7 } from "@codemirror/state";
-import { Decoration as Decoration9, EditorView as EditorView21, WidgetType as WidgetType5 } from "@codemirror/view";
-var image = (_options = {}) => {
+import { StateEffect as StateEffect7, StateField as StateField7 } from "@codemirror/state";
+import { Decoration as Decoration9, EditorView as EditorView22, ViewPlugin as ViewPlugin16, WidgetType as WidgetType5 } from "@codemirror/view";
+var rebuildEffect = StateEffect7.define();
+var image = (options = {}) => {
   return [
     StateField7.define({
       create: (state) => {
-        return Decoration9.set(buildDecorations(state, 0, state.doc.length));
+        return Decoration9.set(buildDecorations(state, 0, state.doc.length, options));
       },
       update: (value, tr) => {
+        if (tr.effects.some((effect) => effect.is(rebuildEffect))) {
+          return Decoration9.set(buildDecorations(tr.state, 0, tr.state.doc.length, options));
+        }
         if (!tr.docChanged && !tr.selection) {
           return value;
         }
@@ -4774,14 +4902,26 @@ var image = (_options = {}) => {
           filterFrom: from,
           filterTo: to,
           filter: () => false,
-          add: buildDecorations(tr.state, from, to)
+          add: buildDecorations(tr.state, from, to, options)
         });
       },
-      provide: (field) => EditorView21.decorations.from(field)
-    })
+      provide: (field) => EditorView22.decorations.from(field)
+    }),
+    // Block-replace decorations have to live in a state field, but viewport changes are only
+    // observable from a view plugin. Bridge the two by dispatching a rebuild effect whenever
+    // the viewport extends so newly-parsed image nodes get widgetized without requiring focus.
+    ViewPlugin16.define((view) => ({
+      update: (update2) => {
+        if (update2.viewportChanged) {
+          queueMicrotask(() => view.dispatch({
+            effects: rebuildEffect.of(void 0)
+          }));
+        }
+      }
+    }))
   ];
 };
-var buildDecorations = (state, from, to) => {
+var buildDecorations = (state, from, to, options = {}) => {
   const decorations2 = [];
   const cursor = state.selection.main.head;
   syntaxTree5(state).iterate({
@@ -4794,6 +4934,12 @@ var buildDecorations = (state, from, to) => {
           if (url.match(/^https?:\/\//) === null && url.match(/^file?:\/\//) === null) {
             return;
           }
+          if (options.skip?.({
+            name: "Image",
+            url
+          })) {
+            return;
+          }
           preloadImage(url);
           decorations2.push(Decoration9.replace({
             block: true,
@@ -4827,20 +4973,34 @@ var ImageWidget = class extends WidgetType5 {
     const img = document.createElement("img");
     img.setAttribute("src", this._url);
     img.setAttribute("class", "cm-image");
-    if (view.state.field(focusField)) {
-      img.onload = () => img.classList.add("cm-loaded-image");
+    const focused = view.state.field(focusField);
+    if (focused) {
+      img.onload = () => {
+        img.classList.add("cm-loaded-image");
+        collapseIfTrackingPixel(img);
+      };
     } else {
       img.classList.add("cm-loaded-image");
+      img.onload = () => collapseIfTrackingPixel(img);
     }
+    img.onerror = () => collapseLine(img);
     return img;
   }
 };
+var collapseIfTrackingPixel = (img) => {
+  if (img.naturalWidth <= 1 && img.naturalHeight <= 1) {
+    collapseLine(img);
+  }
+};
+var collapseLine = (img) => {
+  img.style.display = "none";
+};
 
 // src/extensions/markdown/styles.ts
-import { EditorView as EditorView22 } from "@codemirror/view";
+import { EditorView as EditorView23 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView22.theme({
+var formattingStyles = EditorView23.theme({
   /**
   * Horizontal rule.
   */
@@ -4995,12 +5155,12 @@ var formattingStyles = EditorView22.theme({
 // src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField8 } from "@codemirror/state";
-import { Decoration as Decoration10, EditorView as EditorView23, WidgetType as WidgetType6 } from "@codemirror/view";
+import { Decoration as Decoration10, EditorView as EditorView24, WidgetType as WidgetType6 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField8.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView23.decorations.from(field)
+    provide: (field) => EditorView24.decorations.from(field)
   });
 };
 var update = (state, _options) => {
@@ -5591,10 +5751,10 @@ var buildDecorations2 = (view, options, focus2) => {
     atomicDeco: atomicDeco.finish()
   };
 };
-var forceUpdate = StateEffect7.define();
+var forceUpdate = StateEffect8.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin15.fromClass(class {
+    ViewPlugin17.fromClass(class {
       deco;
       atomicDeco;
       pendingUpdate;
@@ -5629,12 +5789,14 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        Prec4.low(EditorView24.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration11.none)),
-        EditorView24.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none),
-        EditorView24.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none)
+        Prec4.low(EditorView25.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration11.none)),
+        EditorView25.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none),
+        EditorView25.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none)
       ]
     }),
-    image(),
+    image({
+      skip: options.skip ? (node) => !!options.skip?.(node) : void 0
+    }),
     table(),
     adjustChanges(),
     formattingStyles
@@ -5644,7 +5806,10 @@ var decorateMarkdown = (options = {}) => {
 // src/extensions/markdown/link.ts
 import { syntaxTree as syntaxTree8 } from "@codemirror/language";
 import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
-import { tooltipContent } from "@dxos/ui-theme";
+import { mx as mx6, surfaceShadow } from "@dxos/ui-theme";
+var tooltipClassName = mx6("inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-fg rounded-sm", surfaceShadow({
+  elevation: "positioned"
+}));
 var linkTooltip = (renderTooltip) => {
   return hoverTooltip2((view, pos, side) => {
     const syntax = syntaxTree8(view.state).resolveInner(pos, side);
@@ -5666,7 +5831,7 @@ var linkTooltip = (renderTooltip) => {
       above: true,
       create: () => {
         const el = document.createElement("div");
-        el.className = tooltipContent({});
+        el.className = tooltipClassName;
         renderTooltip(el, {
           url: urlText
         }, view);
@@ -5716,8 +5881,8 @@ var mention = ({ debug, onSearch }) => {
 };
 
 // src/extensions/modal.ts
-import { StateEffect as StateEffect8, StateField as StateField9 } from "@codemirror/state";
-var modalStateEffect = StateEffect8.define();
+import { StateEffect as StateEffect9, StateField as StateField9 } from "@codemirror/state";
+var modalStateEffect = StateEffect9.define();
 var modalStateField = StateField9.define({
   create: () => false,
   update: (value, tr) => {
@@ -6285,17 +6450,17 @@ var commands = () => keymap11.of([
 
 // src/extensions/outliner/outliner.ts
 import { Prec as Prec5 } from "@codemirror/state";
-import { Decoration as Decoration12, EditorView as EditorView26, ViewPlugin as ViewPlugin18 } from "@codemirror/view";
-import { mx as mx6 } from "@dxos/ui-theme";
+import { Decoration as Decoration12, EditorView as EditorView27, ViewPlugin as ViewPlugin20 } from "@codemirror/view";
+import { mx as mx7 } from "@dxos/ui-theme";
 
 // src/extensions/outliner/editor.ts
 import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin16 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin18 } from "@codemirror/view";
 import { log as log10 } from "@dxos/log";
 var __dxlog_file15 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/outliner/editor.ts";
 var LIST_ITEM_REGEX = /^\s*- (\[ \]|\[x\])? /;
 var initialize = () => {
-  return ViewPlugin16.fromClass(class {
+  return ViewPlugin18.fromClass(class {
     constructor(view) {
       const first = view.state.doc.lineAt(0);
       const text = view.state.sliceDoc(first.from, first.to);
@@ -6463,10 +6628,10 @@ var editor = () => [
 ];
 
 // src/extensions/outliner/menu.ts
-import { EditorView as EditorView25, ViewPlugin as ViewPlugin17 } from "@codemirror/view";
+import { EditorView as EditorView26, ViewPlugin as ViewPlugin19 } from "@codemirror/view";
 import { addEventListener as addEventListener2 } from "@dxos/async";
 var menu = (options = {}) => [
-  ViewPlugin17.fromClass(class {
+  ViewPlugin19.fromClass(class {
     view;
     tag;
     rafId;
@@ -6528,7 +6693,7 @@ var menu = (options = {}) => [
       this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
     }
   }),
-  EditorView25.theme({
+  EditorView26.theme({
     ".cm-popover-trigger": {
       position: "fixed",
       padding: "0",
@@ -6564,12 +6729,12 @@ var outliner = (_options = {}) => [
     listPaddingLeft: 8
   }),
   // Researve space for menu.
-  EditorView26.contentAttributes.of({
+  EditorView27.contentAttributes.of({
     class: "w-full !mr-[3rem]"
   })
 ];
 var decorations = () => [
-  ViewPlugin18.fromClass(class {
+  ViewPlugin20.fromClass(class {
     decorations = Decoration12.none;
     constructor(view) {
       this.updateDecorations(view.state, view);
@@ -6594,7 +6759,7 @@ var decorations = () => [
           const lineTo = doc.lineAt(item.contentRange.to);
           const isSelected = selection.includes(item.index) || item === current;
           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"))
+            class: mx7("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));
         }
       }
@@ -6604,7 +6769,7 @@ var decorations = () => [
     decorations: (v) => v.decorations
   }),
   // Theme.
-  EditorView26.theme(Object.assign({
+  EditorView27.theme(Object.assign({
     ".cm-list-item": {
       borderLeftWidth: "1px",
       borderRightWidth: "1px",
@@ -6629,7 +6794,7 @@ var decorations = () => [
       marginBottom: "2px"
     },
     ".cm-list-item-focused": {
-      borderColor: "var(--color-neutral-focus-indicator)"
+      borderColor: "var(--color-focus-ring-subtle)"
     },
     "&:focus-within .cm-list-item-selected": {
       borderColor: "var(--color-separator)"
@@ -6639,10 +6804,11 @@ var decorations = () => [
 
 // src/extensions/preview/preview.ts
 import { syntaxTree as syntaxTree10 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder6, StateEffect as StateEffect9, StateField as StateField11 } from "@codemirror/state";
-import { Decoration as Decoration13, EditorView as EditorView27, ViewPlugin as ViewPlugin19, WidgetType as WidgetType8 } from "@codemirror/view";
-import { DXN, Entity } from "@dxos/echo";
-var labelResolvedEffect = StateEffect9.define();
+import { RangeSetBuilder as RangeSetBuilder6, StateEffect as StateEffect10, StateField as StateField11 } from "@codemirror/state";
+import { Decoration as Decoration13, EditorView as EditorView28, ViewPlugin as ViewPlugin21, WidgetType as WidgetType8 } from "@codemirror/view";
+import { Entity } from "@dxos/echo";
+import { EID, URI } from "@dxos/keys";
+var labelResolvedEffect = StateEffect10.define();
 var preview = (options = {}) => {
   const viewRef = {
     current: void 0
@@ -6659,11 +6825,11 @@ var preview = (options = {}) => {
         return decorations2.map(tr.changes);
       },
       provide: (field) => [
-        EditorView27.decorations.from(field),
-        EditorView27.atomicRanges.of((view) => view.state.field(field))
+        EditorView28.decorations.from(field),
+        EditorView28.atomicRanges.of((view) => view.state.field(field))
       ]
     }),
-    ViewPlugin19.define((view) => {
+    ViewPlugin21.define((view) => {
       viewRef.current = view;
       return {
         destroy() {
@@ -6674,11 +6840,12 @@ var preview = (options = {}) => {
   ];
 };
 var resolveLabel = (db, dxnStr, viewRef) => {
-  const dxn = DXN.tryParse(dxnStr);
-  if (!dxn) {
+  const echoUri = EID.tryParse(dxnStr);
+  const dxnRef = echoUri ?? (dxnStr.startsWith("dxn:") ? URI.make(dxnStr) : void 0);
+  if (!dxnRef) {
     return;
   }
-  const ref = db.makeRef(dxn);
+  const ref = db.makeRef(dxnRef);
   const target = ref.target;
   if (target) {
     return Entity.getLabel(target);
@@ -6696,7 +6863,7 @@ var buildDecorations3 = (state, options, viewRef) => {
       switch (node.name) {
         //
         // Inline widget.
-        // [Label](dxn:echo:123)
+        // [Label](echo:/123)
         //
         case "Link": {
           const link = getLinkRef(state, node.node);
@@ -6715,7 +6882,7 @@ var buildDecorations3 = (state, options, viewRef) => {
         }
         //
         // Block widget (transclusion).
-        // ![Label](dxn:echo:123)
+        // ![Label](echo:/123)
         //
         case "Image": {
           if (options.addBlockContainer && options.removeBlockContainer) {
@@ -6739,7 +6906,7 @@ var getLinkRef = (state, node) => {
   const urlNode = node.getChild("URL");
   if (mark && urlNode) {
     const dxn = state.sliceDoc(urlNode.from, urlNode.to);
-    if (dxn.startsWith("dxn:")) {
+    if (dxn.startsWith("dxn:") || dxn.startsWith("echo:")) {
       const label = state.sliceDoc(mark[0].to, mark[1].from);
       return {
         block: state.sliceDoc(mark[0].from, mark[0].from + 1) === "!",
@@ -6783,7 +6950,7 @@ var PreviewBlockWidget = class extends WidgetType8 {
   }
   toDOM(_view) {
     const root = document.createElement("div");
-    root.classList.add("cm-preview-block", "dx-density-fine");
+    root.classList.add("cm-preview-block", "dx-density-md");
     this._options.addBlockContainer?.({
       link: this._link,
       el: root
@@ -6799,7 +6966,7 @@ var PreviewBlockWidget = class extends WidgetType8 {
 };
 
 // src/extensions/replacer.ts
-import { EditorView as EditorView28 } from "@codemirror/view";
+import { EditorView as EditorView29 } from "@codemirror/view";
 var defaultReplacements = [
   {
     input: "--",
@@ -6862,7 +7029,7 @@ var replacer = ({ replacements = defaultReplacements } = {}) => {
   const sortedReplacements = [
     ...replacements
   ].sort((a, b) => b.input.length - a.input.length);
-  return EditorView28.inputHandler.of((view, from, to, insert) => {
+  return EditorView29.inputHandler.of((view, from, to, insert) => {
     if (insert.length !== 1) {
       return false;
     }
@@ -6896,6 +7063,17 @@ var replacer = ({ replacements = defaultReplacements } = {}) => {
   });
 };
 
+// src/extensions/spacing.ts
+import { EditorView as EditorView30 } from "@codemirror/view";
+function lineSpacing(verticalPadding = 2) {
+  return EditorView30.theme({
+    ".cm-line": {
+      paddingTop: `${verticalPadding}px`,
+      paddingBottom: `${verticalPadding}px`
+    }
+  });
+}
+
 // src/extensions/snippets.ts
 import { keymap as keymap12 } from "@codemirror/view";
 var defaultItems = [
@@ -7108,8 +7286,8 @@ var mixedParser = (registry) => {
 };
 
 // src/extensions/tags/fader.ts
-import { StateEffect as StateEffect10, StateField as StateField12 } from "@codemirror/state";
-import { Decoration as Decoration14, EditorView as EditorView29, ViewPlugin as ViewPlugin20 } from "@codemirror/view";
+import { StateEffect as StateEffect11, StateField as StateField12 } from "@codemirror/state";
+import { Decoration as Decoration14, EditorView as EditorView31, ViewPlugin as ViewPlugin22 } from "@codemirror/view";
 var DEFAULT_REMOVAL_DELAY = 5e3;
 var DEFAULT_COALESCE_WINDOW = 100;
 var CLEANUP_INTERVAL = 1e3;
@@ -7122,7 +7300,7 @@ var fader = (options = {}) => {
       lastCount = expiries.length;
     }
   };
-  const dequeue = StateEffect10.define();
+  const dequeue = StateEffect11.define();
   const fadeField = StateField12.define({
     create: () => ({
       decorations: Decoration14.none,
@@ -7233,9 +7411,9 @@ var fader = (options = {}) => {
         batchStart
       };
     },
-    provide: (f) => EditorView29.decorations.from(f, (value) => value.decorations)
+    provide: (f) => EditorView31.decorations.from(f, (value) => value.decorations)
   });
-  const cleanup = ViewPlugin20.fromClass(class {
+  const cleanup = ViewPlugin22.fromClass(class {
     view;
     #timer;
     constructor(view) {
@@ -7270,7 +7448,7 @@ var fader = (options = {}) => {
   return [
     fadeField,
     cleanup,
-    EditorView29.theme({
+    EditorView31.theme({
       ".cm-fader": {
         animation: "fader 1s ease-out forwards"
       },
@@ -7285,11 +7463,11 @@ var fader = (options = {}) => {
 };
 
 // src/extensions/tags/typewriter.ts
-import { Annotation as Annotation3, ChangeSet as ChangeSet2, EditorState as EditorState3, StateEffect as StateEffect11, StateField as StateField13 } from "@codemirror/state";
-import { Decoration as Decoration15, EditorView as EditorView30, ViewPlugin as ViewPlugin21, WidgetType as WidgetType9 } from "@codemirror/view";
+import { Annotation as Annotation3, ChangeSet as ChangeSet2, EditorState as EditorState3, StateEffect as StateEffect12, StateField as StateField13 } from "@codemirror/state";
+import { Decoration as Decoration15, EditorView as EditorView32, ViewPlugin as ViewPlugin23, WidgetType as WidgetType9 } from "@codemirror/view";
 import { Domino as Domino3 } from "@dxos/ui";
 var typewriterBypass = Annotation3.define();
-var typewriterDrainingEffect = StateEffect11.define();
+var typewriterDrainingEffect = StateEffect12.define();
 var CURSOR_LINGER = 3e3;
 var FRAME_BUDGET_MS = 4;
 var CHARS_PER_FRAME = 5;
@@ -7300,8 +7478,8 @@ var typewriter = (options = {}) => {
   const flushThreshold = options.flushThreshold ?? FLUSH_THRESHOLD;
   const frameBudgetMs = options.frameBudgetMs ?? FRAME_BUDGET_MS;
   const charsPerFrame = options.charsPerFrame ?? CHARS_PER_FRAME;
-  const suppressAppend = StateEffect11.define();
-  const insertChunk = StateEffect11.define();
+  const suppressAppend = StateEffect12.define();
+  const insertChunk = StateEffect12.define();
   const bufferField = StateField13.define({
     create: () => ({
       text: "",
@@ -7384,7 +7562,7 @@ var typewriter = (options = {}) => {
       })
     };
   });
-  const drainPlugin = ViewPlugin21.fromClass(class {
+  const drainPlugin = ViewPlugin23.fromClass(class {
     view;
     _raf;
     _activeStreamTag = null;
@@ -7489,7 +7667,7 @@ var typewriter = (options = {}) => {
   ].filter(Boolean);
 };
 var typewriterCursor = (bufferField) => {
-  const hideCursor = StateEffect11.define();
+  const hideCursor = StateEffect12.define();
   const visibilityField = StateField13.define({
     create: () => ({
       visible: false,
@@ -7543,9 +7721,9 @@ var typewriterCursor = (bufferField) => {
         }).range(pos)
       ]);
     },
-    provide: (field) => EditorView30.decorations.from(field)
+    provide: (field) => EditorView32.decorations.from(field)
   });
-  const timerPlugin = ViewPlugin21.fromClass(class {
+  const timerPlugin = ViewPlugin23.fromClass(class {
     view;
     _timer;
     constructor(view) {
@@ -7717,7 +7895,7 @@ var linkLength = (buffer, start, bracketAt) => {
 
 // src/extensions/tags/xml-block-decoration.ts
 import { xmlLanguage as xmlLanguage2 } from "@codemirror/lang-xml";
-import { Decoration as Decoration16, ViewPlugin as ViewPlugin22 } from "@codemirror/view";
+import { Decoration as Decoration16, ViewPlugin as ViewPlugin24 } from "@codemirror/view";
 var xmlBlockDecoration = ({ tag, lineClass, contentClass, hideTags }) => {
   const lineDecoration = lineClass ? Decoration16.line({
     class: lineClass
@@ -7773,7 +7951,7 @@ var xmlBlockDecoration = ({ tag, lineClass, contentClass, hideTags }) => {
     });
     return Decoration16.set(ranges, true);
   };
-  return ViewPlugin22.fromClass(class {
+  return ViewPlugin24.fromClass(class {
     decorations;
     constructor(view) {
       this.decorations = buildDecorations5(view);
@@ -7790,7 +7968,7 @@ var xmlBlockDecoration = ({ tag, lineClass, contentClass, hideTags }) => {
 
 // src/extensions/tags/xml-formatting.ts
 import { xmlLanguage as xmlLanguage3 } from "@codemirror/lang-xml";
-import { Decoration as Decoration17, EditorView as EditorView31, ViewPlugin as ViewPlugin23 } from "@codemirror/view";
+import { Decoration as Decoration17, EditorView as EditorView33, ViewPlugin as ViewPlugin25 } from "@codemirror/view";
 var XML_TAG_NODES = /* @__PURE__ */ new Set([
   "OpenTag",
   "CloseTag",
@@ -7853,7 +8031,7 @@ var xmlFormatting = ({ skip } = {}) => {
     return Decoration17.set(ranges, true);
   };
   return [
-    ViewPlugin23.fromClass(class {
+    ViewPlugin25.fromClass(class {
       decorations;
       constructor(view) {
         this.decorations = buildDecorations5(view);
@@ -7866,9 +8044,9 @@ var xmlFormatting = ({ skip } = {}) => {
     }, {
       decorations: (instance) => instance.decorations
     }),
-    EditorView31.baseTheme({
+    EditorView33.baseTheme({
       ".cm-xml-element": {
-        backgroundColor: "var(--color-active-surface)",
+        backgroundColor: "var(--color-current-surface)",
         borderRadius: "0.25rem",
         padding: "0.25rem"
       },
@@ -7883,8 +8061,8 @@ var xmlFormatting = ({ skip } = {}) => {
 
 // src/extensions/tags/xml-tags.ts
 import { syntaxTree as syntaxTree11 } from "@codemirror/language";
-import { Prec as Prec7, RangeSetBuilder as RangeSetBuilder7, StateEffect as StateEffect12, StateField as StateField14 } from "@codemirror/state";
-import { Decoration as Decoration18, EditorView as EditorView32, ViewPlugin as ViewPlugin24, WidgetType as WidgetType10, keymap as keymap14 } from "@codemirror/view";
+import { Prec as Prec7, RangeSetBuilder as RangeSetBuilder7, StateEffect as StateEffect13, StateField as StateField14 } from "@codemirror/state";
+import { Decoration as Decoration18, EditorView as EditorView34, ViewPlugin as ViewPlugin26, WidgetType as WidgetType10, keymap as keymap14 } from "@codemirror/view";
 import { invariant as invariant7 } from "@dxos/invariant";
 import { log as log11 } from "@dxos/log";
 import { Domino as Domino4 } from "@dxos/ui";
@@ -7996,17 +8174,17 @@ var decodeXmlEntity = (raw) => {
 
 // src/extensions/tags/xml-tags.ts
 var __dxlog_file17 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/tags/xml-tags.ts";
-var navigatePreviousEffect = StateEffect12.define();
-var navigateNextEffect = StateEffect12.define();
+var navigatePreviousEffect = StateEffect13.define();
+var navigateNextEffect = StateEffect13.define();
 var getXmlTextChild = (children) => {
   const child = children?.[0];
   return typeof child === "string" ? child : null;
 };
 var xmlWidgetId = (explicit, fallback) => typeof explicit === "string" && explicit.length > 0 ? explicit : fallback;
 var escapeRegExpSource3 = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-var xmlTagContextEffect = StateEffect12.define();
-var xmlTagResetEffect = StateEffect12.define();
-var xmlTagUpdateEffect = StateEffect12.define();
+var xmlTagContextEffect = StateEffect13.define();
+var xmlTagResetEffect = StateEffect13.define();
+var xmlTagUpdateEffect = StateEffect13.define();
 var widgetContextStateField = StateField14.define({
   create: () => void 0,
   update: (value, tr) => {
@@ -8101,7 +8279,7 @@ var keyHandlers = keymap14.of([
   }
 ]);
 var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
-  return EditorView32.updateListener.of((update2) => {
+  return EditorView34.updateListener.of((update2) => {
     update2.transactions.forEach((transaction) => {
       for (const effect of transaction.effects) {
         if (effect.is(navigatePreviousEffect)) {
@@ -8129,7 +8307,7 @@ var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
               anchor: line.from,
               head: line.from
             },
-            effects: scrollerLineEffect.of({
+            effects: crawlerLineEffect.of({
               line: line.number - 1,
               offset: -16
             })
@@ -8162,7 +8340,7 @@ var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
                 anchor: line.to,
                 head: line.to
               },
-              effects: scrollerLineEffect.of({
+              effects: crawlerLineEffect.of({
                 line: line.number - 1,
                 offset: -16
               })
@@ -8174,7 +8352,7 @@ var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
                 anchor: line.to,
                 head: line.to
               },
-              effects: scrollerLineEffect.of({
+              effects: crawlerLineEffect.of({
                 line: line.number - 1,
                 position: "end"
               })
@@ -8186,7 +8364,7 @@ var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
     });
   });
 };
-var createWidgetUpdatePlugin = (widgetDecorationsField, notifier) => ViewPlugin24.fromClass(class {
+var createWidgetUpdatePlugin = (widgetDecorationsField, notifier) => ViewPlugin26.fromClass(class {
   update(update2) {
     const widgetStateMap = update2.state.field(widgetStateMapStateField);
     const { decorations: decorations2 } = update2.state.field(widgetDecorationsField);
@@ -8271,8 +8449,8 @@ var createWidgetDecorationsField = (registry = {}, notifier) => StateField14.def
     };
   },
   provide: (field) => [
-    EditorView32.decorations.from(field, (v) => v.decorations),
-    EditorView32.atomicRanges.of((view) => view.state.field(field).decorations || Decoration18.none)
+    EditorView34.decorations.from(field, (v) => v.decorations),
+    EditorView34.atomicRanges.of((view) => view.state.field(field).decorations || Decoration18.none)
   ]
 });
 var buildDecorations4 = (state, range, registry, notifier) => {
@@ -8460,7 +8638,7 @@ var PlaceholderWidget2 = class extends WidgetType10 {
 export {
   Cursor,
   EditorState4 as EditorState,
-  EditorView33 as EditorView,
+  EditorView35 as EditorView,
   Inline,
   InputModeExtensions,
   List,
@@ -8493,6 +8671,9 @@ export {
   commentsState,
   compactSlots,
   convertTreeToJson,
+  crawler,
+  crawlerActiveEffect,
+  crawlerLineEffect,
   createBasicExtensions,
   createComment,
   createCrawler,
@@ -8544,9 +8725,11 @@ export {
   insertAtCursor,
   insertAtLineStart,
   insertTable,
+  isRangeVisible,
   itemToJSON,
   join,
   keymap15 as keymap,
+  lineSpacing,
   linkTooltip,
   listItemToString,
   listener,
@@ -8579,9 +8762,8 @@ export {
   scrollPastEnd,
   scrollThreadIntoView,
   scrollToLine,
+  scrollbarAutohide,
   scroller,
-  scrollerCrawlEffect,
-  scrollerLineEffect,
   selectionState,
   setBlockquote,
   setComments,