@dxos/ui-editor 0.8.4-main.9be5663bfe → 0.8.4-main.bc2380dfbc

package/dist/lib/browser/index.mjs

@@ -1,13 +1,6 @@
-import {
-  EditorInputMode,
-  EditorInputModes,
-  EditorViewMode,
-  EditorViewModes
-} from "./chunk-HL3YF6WC.mjs";
-
 // src/index.ts
 import { EditorState as EditorState4 } from "@codemirror/state";
-import { EditorView as EditorView32, keymap as keymap15 } from "@codemirror/view";
+import { EditorView as EditorView33, keymap as keymap15 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
@@ -23,8 +16,11 @@ var documentSlots = {
     * NOTE: Max width - 4rem = 2rem left/right margin (or 2rem gutter plus 1rem left/right margin).
     */
     className: mx(
-      // NOTE: Container for widget sizing (must have `max-w-[100cqi]`).
-      "dx-size-container",
+      // Inline-size container for widget sizing (children use `max-w-[100cqi]`).
+      // NOTE: Use inline-size, not full size containment — `container-type: size` on the
+      // editor content breaks CodeMirror's viewport measurement, leaving blank gaps during
+      // scroll until a click forces a re-measure.
+      "dx-inline-size-container",
       // Wider margin for web (vs. mobile).
       "pointer-fine:max-w-[min(50rem,100%-4rem)] pointer-coarse:max-w-[min(50rem,100%-2rem)]",
       "mx-auto! w-full"
@@ -33,7 +29,12 @@ var documentSlots = {
 };
 var compactSlots = {
   content: {
-    className: "mx-2! w-full"
+    className: "mx-2!"
+  }
+};
+var mobileSlots = {
+  content: {
+    className: "mx-2!"
   }
 };
 
@@ -270,12 +271,7 @@ var wrapWithCatch = (fn, label) => {
     } catch (err) {
       log.catch(err, {
         label
-      }, {
-        F: __dxlog_file,
-        L: 20,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 13, S: void 0 });
     }
   };
 };
@@ -301,12 +297,7 @@ var logChanges = (trs) => {
   if (changes.length) {
     log("changes", {
       changes
-    }, {
-      F: __dxlog_file,
-      L: 54,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 44, S: void 0 });
   }
 };
 
@@ -372,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) {
@@ -513,300 +511,10 @@ 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, {
-            F: __dxlog_file2,
-            L: 146,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
-        }
-      });
-    }),
-    // Styles.
-    EditorView4.theme({
-      ".cm-content": {
-        paddingBottom: `${overScroll}px`
-      },
-      ".cm-scroller": {
-        overflowY: "scroll",
-        overflowAnchor: "none",
-        paddingBottom: "0"
-      },
-      ".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)"
-      },
-      ".cm-scroll-button": {
-        position: "absolute",
-        bottom: "0.5rem",
-        right: "1rem"
-      }
-    })
-  ];
-};
-function createCrawler(view, accel = 0.15, maxVelocity = 1, snapThreshold = 0.5) {
-  const el = view.scrollDOM;
-  let currentTop = 0;
-  let velocity = 0;
-  let rafId = null;
-  function frame() {
-    const targetTop = el.scrollHeight - el.clientHeight;
-    const delta = targetTop - currentTop;
-    const absDelta = Math.abs(delta);
-    if (absDelta < snapThreshold && Math.abs(velocity) < snapThreshold) {
-      el.scrollTop = targetTop;
-      currentTop = targetTop;
-      velocity = 0;
-      rafId = null;
-      return;
-    }
-    const stoppingDistance = velocity * velocity / (2 * accel);
-    const direction = Math.sign(delta);
-    if (velocity !== 0 && (absDelta <= stoppingDistance || direction !== Math.sign(velocity))) {
-      velocity -= Math.sign(velocity) * Math.min(accel, Math.abs(velocity));
-    } else {
-      velocity += direction * accel;
-      velocity = Math.sign(velocity) * Math.min(Math.abs(velocity), maxVelocity);
-    }
-    currentTop += velocity;
-    el.scrollTop = currentTop;
-    rafId = requestAnimationFrame(frame);
-  }
-  return {
-    scroll: () => {
-      if (rafId === null) {
-        currentTop = el.scrollTop;
-        rafId = requestAnimationFrame(frame);
-      }
-    },
-    cancel: () => {
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId);
-        rafId = null;
-        velocity = 0;
-      }
-    }
-  };
-}
-
-// src/extensions/auto-scroll.ts
-var autoScrollEffect = StateEffect2.define();
-var autoScroll = (_ = {}) => {
-  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);
-          }
-        }
-      }
-    }),
-    // 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 { EditorView as EditorView4, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
 import { DocAccessor } from "@dxos/echo-db";
 
 // src/extensions/state.ts
@@ -815,19 +523,14 @@ 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 { 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, {
-        F: __dxlog_file3,
-        L: 15,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      log2.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 11, S: void 0 });
       return "";
     }
   },
@@ -835,22 +538,17 @@ var cursorConverter = (accessor) => ({
     try {
       return fromCursor(accessor, cursor);
     } catch (err) {
-      log3.catch(err, void 0, {
-        F: __dxlog_file3,
-        L: 24,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      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
 });
@@ -861,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";
@@ -1002,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;
@@ -1025,12 +723,7 @@ var Syncer = class {
     this._pending = false;
   }
   onEditorChange(view) {
-    log4("onEditorChange", void 0, {
-      F: __dxlog_file4,
-      L: 45,
-      S: this,
-      C: (f, a) => f(...a)
-    });
+    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) {
@@ -1041,12 +734,7 @@ var Syncer = class {
     }
   }
   onAutomergeChange(view) {
-    log4("onAutomergeChange", void 0, {
-      F: __dxlog_file4,
-      L: 60,
-      S: this,
-      C: (f, a) => f(...a)
-    });
+    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);
@@ -1099,7 +787,7 @@ var automerge = (accessor) => {
     // Track heads.
     syncState,
     // Reconcile external updates.
-    ViewPlugin7.fromClass(class {
+    ViewPlugin5.fromClass(class {
       _view;
       constructor(_view) {
         this._view = _view;
@@ -1108,14 +796,16 @@ var automerge = (accessor) => {
           const value = DocAccessor.getValue(accessor);
           const current = this._view.state.doc.toString();
           if (value !== current) {
-            console.warn("ENABLING INITIAL SYNC -- THIS MAY BE A REGRESSION");
             this._view.dispatch({
               changes: {
                 from: 0,
                 to: this._view.state.doc.length,
                 insert: value
               },
-              annotations: initialSync
+              annotations: [
+                initialSync,
+                reconcileAnnotation.of(true)
+              ]
             });
           }
         });
@@ -1128,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) {
@@ -1141,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: () => {
@@ -1160,17 +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, {
-    F: __dxlog_file5,
-    L: 80
-  });
+  _ctx = new Context(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 33 });
   _cursorConverter;
   _provider;
   _lastAnchor;
@@ -1319,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,
@@ -1381,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();
@@ -1401,10 +1088,7 @@ var SpaceAwarenessProvider = class {
     this._info = info;
   }
   open() {
-    this._ctx = new Context2(void 0, {
-      F: __dxlog_file6,
-      L: 57
-    });
+    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, {
@@ -1429,14 +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
-      }, {
-        F: __dxlog_file6,
-        L: 91,
-        S: this,
-        C: (f, a) => f(...a)
-      });
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 57, S: this });
     });
   }
   close() {
@@ -1448,15 +1127,7 @@ var SpaceAwarenessProvider = class {
     return Array.from(this._remoteStates.values());
   }
   update(position) {
-    invariant(this._postTask, void 0, {
-      F: __dxlog_file6,
-      L: 106,
-      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,
@@ -1465,38 +1136,22 @@ var SpaceAwarenessProvider = class {
     this._postTask.schedule();
   }
   _handleQueryMessage() {
-    invariant(this._postTask, void 0, {
-      F: __dxlog_file6,
-      L: 117,
-      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, {
-      F: __dxlog_file6,
-      L: 122,
-      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,
@@ -1541,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();
@@ -1614,15 +1269,7 @@ var Blaster = class {
     return this._node;
   }
   initialize() {
-    invariant2(!this._canvas && !this._ctx, void 0, {
-      F: __dxlog_file7,
-      L: 142,
-      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";
@@ -1651,15 +1298,7 @@ var Blaster = class {
     }
   }
   start() {
-    invariant2(this._canvas && this._ctx, void 0, {
-      F: __dxlog_file7,
-      L: 181,
-      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();
   }
@@ -1686,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;
@@ -1799,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);
@@ -1860,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",
@@ -1894,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,
@@ -1909,12 +1548,7 @@ var bookmarks = () => {
         key: "Mod-ArrowUp",
         run: (view) => {
           const bookmarks2 = view.state.field(bookmarksField);
-          log6("up", bookmarks2, {
-            F: __dxlog_file8,
-            L: 29,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
+          log5("up", bookmarks2, { "~LogMeta": "~LogMeta", F: __dxlog_file7, L: 18, S: void 0 });
           return true;
         }
       },
@@ -1922,12 +1556,7 @@ var bookmarks = () => {
         key: "Mod-ArrowDown",
         run: (view) => {
           const bookmarks2 = view.state.field(bookmarksField);
-          log6("down", bookmarks2, {
-            F: __dxlog_file8,
-            L: 37,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
+          log5("down", bookmarks2, { "~LogMeta": "~LogMeta", F: __dxlog_file7, L: 26, S: void 0 });
           return true;
         }
       }
@@ -1964,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)
@@ -1992,28 +1621,12 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
 };
 var createEditorStateStore = (keyPrefix) => ({
   getState: (id) => {
-    invariant3(id, void 0, {
-      F: __dxlog_file9,
-      L: 47,
-      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, {
-      F: __dxlog_file9,
-      L: 53,
-      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));
   }
 });
@@ -2026,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;
@@ -2065,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),
@@ -2107,7 +1720,7 @@ var commentsState = StateField3.define({
     return value;
   }
 });
-var styles2 = EditorView11.theme({
+var styles2 = EditorView9.theme({
   ".cm-comment, .cm-comment-current": {
     padding: "3px 0",
     color: "var(--color-cm-comment-text)",
@@ -2128,19 +1741,14 @@ var createCommentMark = (id, isCurrent) => Decoration7.mark({
     "data-comment-id": id
   }
 });
-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, {
-        F: __dxlog_file10,
-        L: 139,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      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;
@@ -2150,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;
@@ -2190,7 +1798,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView11.domEventHandlers({
+    EditorView9.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -2212,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];
@@ -2268,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) => {
@@ -2354,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) => {
@@ -2386,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;
@@ -2440,7 +2048,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? EditorView11.scrollIntoView(range.from, center ? {
+          needsScroll ? EditorView9.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2471,7 +2079,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);
   }
@@ -2491,12 +2099,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;
@@ -2515,7 +2123,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)",
@@ -2537,10 +2145,10 @@ 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: {
@@ -2588,7 +2196,7 @@ var markdownTheme = {
     fontWeight: "100 !important"
   })
 };
-var baseTheme = EditorView13.baseTheme({
+var baseTheme = EditorView11.baseTheme({
   /**
   * Outer frame.
   */
@@ -2600,12 +2208,21 @@ var baseTheme = EditorView13.baseTheme({
   * Scroller
   */
   ".cm-scroller": {
-    overflowAnchor: "none"
+    // 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"
   },
   ".cm-scroller::-webkit-scrollbar": {
-    width: "8px"
+    width: "var(--scrollbar-size,8px)",
+    height: "var(--scrollbar-size,8px)"
+  },
+  ".cm-scroller::-webkit-scrollbar-corner": {
+    background: "transparent"
+  },
+  ".cm-scroller::-webkit-scrollbar-track": {
+    background: "transparent"
   },
-  ".cm-scroller::-webkit-scrollbar-track": {},
   ".cm-scroller::-webkit-scrollbar-thumb": {
     background: "transparent",
     transition: "background 0.15s"
@@ -2642,7 +2259,7 @@ var baseTheme = EditorView13.baseTheme({
   * Height is set to match the corresponding line (which may have wrapped).
   */
   ".cm-gutterElement": {
-    lineHeight: 1.5,
+    lineHeight: "24px",
     fontSize: "12px"
   },
   /**
@@ -2702,7 +2319,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)"
@@ -2740,12 +2358,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-foreground)"
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
     paddingLeft: "4px !important",
-    color: "var(--color-base-surface-text)"
+    color: "var(--color-base-foreground)"
   },
   /**
   * Completion info.
@@ -2764,7 +2382,7 @@ var baseTheme = EditorView13.baseTheme({
     padding: "0 4px"
   },
   ".cm-completionMatchedText": {
-    color: "var(--color-base-surface-text)",
+    color: "var(--color-base-foreground)",
     textDecoration: "none !important"
   },
   /**
@@ -2799,7 +2417,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",
@@ -2812,7 +2430,7 @@ 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": {
@@ -2828,14 +2446,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
@@ -2848,9 +2466,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) => {
@@ -2864,7 +2482,7 @@ var focusField = StateField5.define({
 });
 var focus = [
   focusField,
-  EditorView14.domEventHandlers({
+  EditorView12.domEventHandlers({
     focus: (_event, view) => {
       requestAnimationFrame(() => view.dispatch({
         effects: focusEffect.of(true)
@@ -2875,22 +2493,365 @@ var focus = [
         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(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 [
+    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: 98, 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;
+  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/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;
+  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(true)
+              });
+            } else {
+              view.dispatch({
+                effects: crawlerActiveEffect.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: crawlerActiveEffect.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 ? 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(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(false)
+              });
+            }
+          });
+        }, 500);
+        this.cleanup = createUserScrollDetector(view.scrollDOM, () => {
+          if (isPinned) {
+            setPinned(false);
+            view.dispatch({
+              effects: crawlerActiveEffect.of(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-surface").attributes({
+          "data-density": "fine"
+        }).append(icon).on("click", () => {
+          setPinned(true);
+          view.dispatch({
+            effects: crawlerLineEffect.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/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`
       };
     }
@@ -2898,9 +2859,22 @@ 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/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({
@@ -2957,12 +2931,7 @@ var createBasicExtensions = (propsProp) => {
   return [
     // NOTE: Doesn't catch errors in keymap functions.
     EditorView16.exceptionSink.of((err) => {
-      log8.catch(err, void 0, {
-        F: __dxlog_file11,
-        L: 130,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      log8.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file11, L: 79, S: void 0 });
     }),
     props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
     props.bracketMatching && bracketMatching(),
@@ -2982,6 +2951,13 @@ var createBasicExtensions = (propsProp) => {
     props.lineWrapping && EditorView16.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
+    // transactions. Some extensions (e.g. `@codemirror/lang-markdown`'s Enter handler that
+    // continues a list) dispatch programmatic edits regardless. Drop user-initiated edits
+    // (`input` / `delete` keymap dispatches plus `undo` / `redo` from the history extension)
+    // but pass programmatic dispatches — streaming `MarkdownStream` and similar consumers
+    // depend on being able to populate the doc themselves.
+    props.readOnly && EditorState.transactionFilter.of((tr) => tr.docChanged && (tr.isUserEvent("input") || tr.isUserEvent("delete") || tr.isUserEvent("undo") || tr.isUserEvent("redo")) ? [] : tr),
     props.scrollPastEnd && scrollPastEnd(),
     props.tabbable && tabbable,
     props.tabSize && EditorState.tabSize.of(props.tabSize),
@@ -3006,8 +2982,8 @@ var createBasicExtensions = (propsProp) => {
         preventDefault: true,
         run: () => true
       }
-    ].filter(isTruthy2))
-  ].filter(isTruthy2);
+    ].filter(isTruthy3))
+  ].filter(isTruthy3);
 };
 var grow = {
   editor: {
@@ -3024,7 +3000,7 @@ var defaultStyles = {
   dark: vscodeDarkStyle,
   light: vscodeLightStyle
 };
-var createThemeExtensions = ({ monospace, themeMode, slots: slotsProp, syntaxHighlighting: syntaxHighlightingProp } = {}) => {
+var createThemeExtensions = ({ monospace, scrollbarThin, slots: slotsProp, syntaxHighlighting: syntaxHighlightingProp, themeMode } = {}) => {
   const slots = defaultsDeep2({}, slotsProp, defaultThemeSlots);
   return [
     baseTheme,
@@ -3039,12 +3015,17 @@ var createThemeExtensions = ({ monospace, themeMode, slots: slotsProp, syntaxHig
     slots.content?.className && EditorView16.contentAttributes.of({
       class: slots.content.className
     }),
-    slots.scroll?.className && ViewPlugin12.fromClass(class {
+    (slots.scroller?.className || scrollbarThin) && ViewPlugin12.fromClass(class {
       constructor(view) {
-        view.scrollDOM.classList.add(...slots.scroll.className.split(/\s+/));
+        if (slots.scroller?.className) {
+          view.scrollDOM.classList.add(...slots.scroller.className.split(/\s+/));
+        }
+        if (scrollbarThin) {
+          view.scrollDOM.style.setProperty("--scrollbar-size", "4px");
+        }
       }
     })
-  ].filter(isTruthy2);
+  ].filter(isTruthy3);
 };
 var createDataExtensions = ({ id, text, messenger, identity }) => {
   const extensions = [];
@@ -4368,7 +4349,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";
@@ -4600,7 +4581,7 @@ var createMarkdownExtensions = (options = {}) => {
       ...defaultKeymap2,
       // TODO(burdon): Remove?
       ...completionKeymap
-    ].filter(isTruthy3))
+    ].filter(isTruthy4))
   ];
 };
 var noFencedCodeFolding = {
@@ -5298,15 +5279,7 @@ var buildDecorations2 = (view, options, focus2) => {
   const { state } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
-    invariant4(level > 0, void 0, {
-      F: __dxlog_file12,
-      L: 177,
-      S: void 0,
-      A: [
-        "level > 0",
-        ""
-      ]
-    });
+    invariant4(level > 0, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file12, L: 160, S: void 0, A: ["level > 0", ""] });
     if (level > headerLevels.length) {
       const len = headerLevels.length;
       headerLevels.length = level;
@@ -5337,15 +5310,7 @@ var buildDecorations2 = (view, options, focus2) => {
     listLevels.pop();
   };
   const getCurrentListLevel = () => {
-    invariant4(listLevels.length, void 0, {
-      F: __dxlog_file12,
-      L: 199,
-      S: void 0,
-      A: [
-        "listLevels.length",
-        ""
-      ]
-    });
+    invariant4(listLevels.length, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file12, L: 192, S: void 0, A: ["listLevels.length", ""] });
     return listLevels[listLevels.length - 1];
   };
   const enterNode = (node) => {
@@ -5767,12 +5732,7 @@ var mention = ({ debug, onSearch }) => {
       (context) => {
         log9.info("completion context", {
           context
-        }, {
-          F: __dxlog_file13,
-          L: 27,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file13, L: 18, S: void 0 });
         const match = context.matchBefore(/@(\w+)?/);
         if (!match || match.from === match.to && !context.explicit) {
           return null;
@@ -6005,15 +5965,7 @@ var outlinerTree = (_options = {}) => {
             break;
           }
           case "BulletList": {
-            invariant5(current, void 0, {
-              F: __dxlog_file14,
-              L: 219,
-              S: void 0,
-              A: [
-                "current",
-                ""
-              ]
-            });
+            invariant5(current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file14, L: 169, S: void 0, A: ["current", ""] });
             parent = current;
             if (current) {
               current.lineRange.to = current.node.from;
@@ -6022,15 +5974,7 @@ var outlinerTree = (_options = {}) => {
             break;
           }
           case "ListItem": {
-            invariant5(parent, void 0, {
-              F: __dxlog_file14,
-              L: 228,
-              S: void 0,
-              A: [
-                "parent",
-                ""
-              ]
-            });
+            invariant5(parent, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file14, L: 179, S: void 0, A: ["parent", ""] });
             const nextSibling = node.node.nextSibling ?? node.node.parent?.nextSibling;
             const docRange = {
               from: state.doc.lineAt(node.from).from,
@@ -6064,42 +6008,18 @@ var outlinerTree = (_options = {}) => {
             break;
           }
           case "ListMark": {
-            invariant5(current, void 0, {
-              F: __dxlog_file14,
-              L: 272,
-              S: void 0,
-              A: [
-                "current",
-                ""
-              ]
-            });
+            invariant5(current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file14, L: 219, S: void 0, A: ["current", ""] });
             current.type = "bullet";
             current.contentRange.from = node.from + "- ".length;
             break;
           }
           case "Task": {
-            invariant5(current, void 0, {
-              F: __dxlog_file14,
-              L: 278,
-              S: void 0,
-              A: [
-                "current",
-                ""
-              ]
-            });
+            invariant5(current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file14, L: 226, S: void 0, A: ["current", ""] });
             current.type = "task";
             break;
           }
           case "TaskMarker": {
-            invariant5(current, void 0, {
-              F: __dxlog_file14,
-              L: 283,
-              S: void 0,
-              A: [
-                "current",
-                ""
-              ]
-            });
+            invariant5(current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file14, L: 232, S: void 0, A: ["current", ""] });
             current.contentRange.from = node.from + "[ ] ".length;
             break;
           }
@@ -6107,29 +6027,13 @@ var outlinerTree = (_options = {}) => {
       },
       leave: (node) => {
         if (node.name === "BulletList") {
-          invariant5(parent, void 0, {
-            F: __dxlog_file14,
-            L: 291,
-            S: void 0,
-            A: [
-              "parent",
-              ""
-            ]
-          });
+          invariant5(parent, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file14, L: 240, S: void 0, A: ["parent", ""] });
           prevSiblings[level--] = void 0;
           parent = parent.parent;
         }
       }
     });
-    invariant5(tree, void 0, {
-      F: __dxlog_file14,
-      L: 298,
-      S: void 0,
-      A: [
-        "tree",
-        ""
-      ]
-    });
+    invariant5(tree, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file14, L: 246, S: void 0, A: ["tree", ""] });
     return tree;
   };
   return [
@@ -6571,35 +6475,20 @@ var editor = () => [
             text: insert.toString(),
             length: insert.length
           }
-        }, {
-          F: __dxlog_file15,
-          L: 164,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file15, L: 174, S: void 0 });
       }
     });
     if (changes.length > 0) {
       log10("modified,", {
         changes
-      }, {
-        F: __dxlog_file15,
-        L: 175,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file15, L: 196, S: void 0 });
       return [
         {
           changes
         }
       ];
     } else if (cancel) {
-      log10("cancel", void 0, {
-        F: __dxlog_file15,
-        L: 178,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      log10("cancel", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file15, L: 205, S: void 0 });
       return [];
     }
     return tr;
@@ -6773,7 +6662,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)"
@@ -7040,12 +6929,69 @@ var replacer = ({ replacements = defaultReplacements } = {}) => {
   });
 };
 
+// src/extensions/snippets.ts
+import { keymap as keymap12 } from "@codemirror/view";
+var defaultItems = [
+  "hello world!",
+  "this is a test.",
+  "this is [DXOS](https://dxos.org)"
+];
+var snippets2 = ({ delay = 75, items = defaultItems } = {}) => {
+  let timer;
+  let index = 0;
+  return [
+    keymap12.of([
+      {
+        // Reset.
+        key: "alt-meta-'",
+        run: () => {
+          clearTimeout(timer);
+          index = 0;
+          return true;
+        }
+      },
+      {
+        // Next snippet.
+        // TODO(burdon): Press 1-9 to select snippet?
+        key: "Shift-Meta-'",
+        run: (view) => {
+          clearTimeout(timer);
+          const text = items[index++];
+          if (index === items?.length) {
+            index = 0;
+          }
+          let offset = 0;
+          const insert = (delayMs = 0) => {
+            timer = setTimeout(() => {
+              const pos = view.state.selection.main.head;
+              view.dispatch({
+                changes: {
+                  from: pos,
+                  insert: text[offset++]
+                },
+                selection: {
+                  anchor: pos + 1
+                }
+              });
+              if (offset < text.length) {
+                insert(Math.random() * delay * (text[offset] === " " ? 2 : 1));
+              }
+            }, delayMs);
+          };
+          insert();
+          return true;
+        }
+      }
+    ])
+  ];
+};
+
 // src/extensions/submit.ts
 import { Prec as Prec6 } from "@codemirror/state";
-import { keymap as keymap12 } from "@codemirror/view";
+import { keymap as keymap13 } from "@codemirror/view";
 var submit = ({ fireIfEmpty = false, onSubmit } = {}) => {
   return [
-    Prec6.highest(keymap12.of([
+    Prec6.highest(keymap13.of([
       {
         key: "Enter",
         preventDefault: true,
@@ -7371,36 +7317,46 @@ var fader = (options = {}) => {
   ];
 };
 
-// src/extensions/tags/wire.ts
+// 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 { Domino as Domino3 } from "@dxos/ui";
-var wireBypass = Annotation3.define();
-var DEFAULT_RATE = 200;
+var typewriterBypass = Annotation3.define();
+var typewriterDrainingEffect = StateEffect11.define();
 var CURSOR_LINGER = 3e3;
-var wire = (options = {}) => {
-  const rate = options.rate ?? DEFAULT_RATE;
-  const interval = 1e3 / rate;
+var FRAME_BUDGET_MS = 4;
+var CHARS_PER_FRAME = 5;
+var FLUSH_THRESHOLD = 2e3;
+var COMPACT_HEAD_THRESHOLD = 4096;
+var typewriter = (options = {}) => {
   const streamingTags = options.streamingTags ?? /* @__PURE__ */ new Set();
+  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 bufferField = StateField13.define({
     create: () => ({
       text: "",
+      head: 0,
       insertAt: 0
     }),
     update: (value, tr) => {
-      let { text, insertAt } = value;
+      let { text, head, insertAt } = value;
       for (const effect of tr.effects) {
         if (effect.is(suppressAppend)) {
-          text += effect.value.text;
-          if (text.length === effect.value.text.length) {
+          if (text.length === head) {
             insertAt = effect.value.from;
           }
+          text += effect.value.text;
         }
         if (effect.is(insertChunk)) {
-          text = text.slice(effect.value.text.length);
+          head += effect.value.text.length;
           insertAt = effect.value.from + effect.value.text.length;
+          if (head >= COMPACT_HEAD_THRESHOLD || head > 0 && head * 2 >= text.length) {
+            text = text.slice(head);
+            head = 0;
+          }
         }
       }
       if (tr.docChanged) {
@@ -7415,6 +7371,7 @@ var wire = (options = {}) => {
         if (isReset) {
           return {
             text: "",
+            head: 0,
             insertAt: 0
           };
         }
@@ -7424,6 +7381,7 @@ var wire = (options = {}) => {
       }
       return {
         text,
+        head,
         insertAt
       };
     }
@@ -7432,7 +7390,7 @@ var wire = (options = {}) => {
     if (!tr.docChanged) {
       return tr;
     }
-    if (tr.annotation(wireBypass) || tr.effects.some((effect) => effect.is(insertChunk))) {
+    if (tr.annotation(typewriterBypass) || tr.effects.some((effect) => effect.is(insertChunk))) {
       return tr;
     }
     let appendedText = "";
@@ -7461,40 +7419,82 @@ var wire = (options = {}) => {
   });
   const drainPlugin = ViewPlugin21.fromClass(class {
     view;
-    #timer;
-    #activeStreamTag = null;
+    _raf;
+    _activeStreamTag = null;
     constructor(view) {
       this.view = view;
-      this.#start();
     }
     update(update2) {
-      const buffer = update2.state.field(bufferField);
-      if (buffer.text.length === 0) {
-        this.#activeStreamTag = null;
+      const { text, head } = update2.state.field(bufferField);
+      const pending = text.length - head;
+      if (pending === 0) {
+        this._activeStreamTag = null;
       }
-      if (buffer.text.length > 0 && this.#timer === void 0) {
-        this.#start();
+      if (pending > 0 && this._raf === void 0) {
+        this._start();
       }
     }
-    #start() {
-      this.#timer = setInterval(() => {
-        const { text, insertAt } = this.view.state.field(bufferField);
-        if (text.length === 0) {
-          clearInterval(this.#timer);
-          this.#timer = void 0;
-          return;
-        }
-        const result = flushable(text, streamingTags, this.#activeStreamTag);
+    _start() {
+      queueMicrotask(() => {
+        this.view.dispatch({
+          effects: typewriterDrainingEffect.of(true),
+          annotations: typewriterBypass.of(true)
+        });
+      });
+      this._raf = requestAnimationFrame(this._tick);
+    }
+    _tick = () => {
+      const { text, head, insertAt } = this.view.state.field(bufferField);
+      const pending = text.length - head;
+      if (pending === 0) {
+        this.view.dispatch({
+          effects: typewriterDrainingEffect.of(false),
+          annotations: typewriterBypass.of(true)
+        });
+        this._raf = void 0;
+        return;
+      }
+      if (pending > flushThreshold) {
+        const chunk = text.slice(head);
+        this._activeStreamTag = null;
+        this.view.dispatch({
+          changes: {
+            from: insertAt,
+            insert: chunk
+          },
+          effects: insertChunk.of({
+            from: insertAt,
+            text: chunk
+          })
+        });
+        this._raf = requestAnimationFrame(this._tick);
+        return;
+      }
+      const startTime = performance.now();
+      let pos = head;
+      let activeTag = this._activeStreamTag;
+      let charsEmitted = 0;
+      while (pos < text.length && performance.now() - startTime < frameBudgetMs) {
+        const result = flushable(text, pos, streamingTags, activeTag);
         if (result.count === 0) {
-          return;
+          break;
+        }
+        if (charsEmitted > 0 && charsEmitted + result.count > charsPerFrame) {
+          break;
         }
         if (result.enterTag) {
-          this.#activeStreamTag = result.enterTag;
+          activeTag = result.enterTag;
         }
         if (result.exitTag) {
-          this.#activeStreamTag = null;
+          activeTag = null;
         }
-        const chunk = text.slice(0, result.count);
+        pos += result.count;
+        charsEmitted += result.count;
+      }
+      const totalCount = pos - head;
+      if (totalCount > 0) {
+        const chunk = text.slice(head, head + totalCount);
+        this._activeStreamTag = activeTag;
         this.view.dispatch({
           changes: {
             from: insertAt,
@@ -7505,20 +7505,23 @@ var wire = (options = {}) => {
             text: chunk
           })
         });
-      }, interval);
-    }
+      }
+      this._raf = requestAnimationFrame(this._tick);
+    };
     destroy() {
-      clearInterval(this.#timer);
+      if (this._raf !== void 0) {
+        cancelAnimationFrame(this._raf);
+      }
     }
   });
   return [
     bufferField,
     filter,
     drainPlugin,
-    options.cursor && wireCursor(bufferField)
+    options.cursor && typewriterCursor(bufferField)
   ].filter(Boolean);
 };
-var wireCursor = (bufferField) => {
+var typewriterCursor = (bufferField) => {
   const hideCursor = StateEffect11.define();
   const visibilityField = StateField13.define({
     create: () => ({
@@ -7527,8 +7530,9 @@ var wireCursor = (bufferField) => {
       lastNonWsAt: 0
     }),
     update: (value, tr) => {
-      const { text, insertAt } = tr.state.field(bufferField);
-      if (text.length > 0) {
+      const { text, head, insertAt } = tr.state.field(bufferField);
+      const pending = text.length - head;
+      if (pending > 0) {
         let lastNonWsAt = tr.changes.mapPos(Math.min(value.lastNonWsAt, tr.startState.doc.length));
         if (tr.docChanged) {
           tr.changes.iterChanges((_fromA, _toA, _fromB, _toB, inserted) => {
@@ -7562,8 +7566,8 @@ var wireCursor = (bufferField) => {
       if (!visible) {
         return Decoration15.none;
       }
-      const { text } = tr.state.field(bufferField);
-      const cursorAt = text.length > 0 ? insertAt : lastNonWsAt;
+      const { text, head } = tr.state.field(bufferField);
+      const cursorAt = text.length > head ? insertAt : lastNonWsAt;
       const pos = Math.min(cursorAt, tr.state.doc.length);
       return Decoration15.set([
         Decoration15.widget({
@@ -7576,27 +7580,28 @@ var wireCursor = (bufferField) => {
   });
   const timerPlugin = ViewPlugin21.fromClass(class {
     view;
-    #timer;
+    _timer;
     constructor(view) {
       this.view = view;
     }
     update(update2) {
-      const { text } = update2.state.field(bufferField);
+      const { text, head } = update2.state.field(bufferField);
       const { visible } = update2.state.field(visibilityField);
-      if (text.length > 0) {
-        clearTimeout(this.#timer);
-        this.#timer = void 0;
-      } else if (visible && this.#timer === void 0) {
-        this.#timer = setTimeout(() => {
+      const pending = text.length - head;
+      if (pending > 0) {
+        clearTimeout(this._timer);
+        this._timer = void 0;
+      } else if (visible && this._timer === void 0) {
+        this._timer = setTimeout(() => {
           this.view.dispatch({
             effects: hideCursor.of(null)
           });
-          this.#timer = void 0;
+          this._timer = void 0;
         }, CURSOR_LINGER);
       }
     }
     destroy() {
-      clearTimeout(this.#timer);
+      clearTimeout(this._timer);
     }
   });
   return [
@@ -7605,7 +7610,12 @@ var wireCursor = (bufferField) => {
     timerPlugin
   ];
 };
-var CursorWidget = class extends WidgetType9 {
+var CursorWidget = class _CursorWidget extends WidgetType9 {
+  // All instances are interchangeable — let CM reuse the existing DOM across drips so
+  // the blink animation isn't restarted on every transaction.
+  eq(other) {
+    return other instanceof _CursorWidget;
+  }
   toDOM() {
     const inner = Domino3.of("span").text("\u2217").style({
       animation: "blink 1s infinite",
@@ -7617,35 +7627,37 @@ var CursorWidget = class extends WidgetType9 {
   }
 };
 var OPENING_TAG_NAME = /^<([a-zA-Z][\w-]*)/;
+var TAG_NAME_PROBE = 64;
 var escapeRegExpSource2 = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-var flushable = (buffer, streamingTags, activeStreamTag) => {
-  if (buffer.length === 0) {
+var flushable = (buffer, start, streamingTags, activeStreamTag) => {
+  if (start >= buffer.length) {
     return {
       count: 0
     };
   }
   if (activeStreamTag) {
     const closeTag = `</${activeStreamTag}>`;
-    if (buffer.startsWith(closeTag)) {
+    if (buffer.startsWith(closeTag, start)) {
       return {
         count: closeTag.length,
         exitTag: true
       };
     }
-    if (buffer[0] === "<") {
+    if (buffer[start] === "<") {
       return {
-        count: xmlElementLength(buffer)
+        count: xmlElementLength(buffer, start)
       };
     }
     return {
       count: 1
     };
   }
-  const ch = buffer[0];
+  const ch = buffer[start];
   if (ch === "<") {
-    const nameMatch = buffer.match(OPENING_TAG_NAME);
+    const probe = buffer.slice(start, start + TAG_NAME_PROBE);
+    const nameMatch = probe.match(OPENING_TAG_NAME);
     if (nameMatch && streamingTags.has(nameMatch[1])) {
-      const close = buffer.indexOf(">");
+      const close = buffer.indexOf(">", start);
       if (close === -1) {
         return {
           count: 0
@@ -7653,62 +7665,64 @@ var flushable = (buffer, streamingTags, activeStreamTag) => {
       }
       if (buffer[close - 1] === "/") {
         return {
-          count: close + 1
+          count: close + 1 - start
         };
       }
       return {
-        count: close + 1,
+        count: close + 1 - start,
         enterTag: nameMatch[1]
       };
     }
     return {
-      count: xmlElementLength(buffer)
+      count: xmlElementLength(buffer, start)
     };
   }
-  if (ch === "!" && buffer.length > 1 && buffer[1] === "[") {
+  if (ch === "!" && buffer.length > start + 1 && buffer[start + 1] === "[") {
     return {
-      count: linkLength(buffer, 1)
+      count: linkLength(buffer, start, start + 1)
     };
   }
   if (ch === "[") {
     return {
-      count: linkLength(buffer, 0)
+      count: linkLength(buffer, start, start)
     };
   }
   return {
     count: 1
   };
 };
-var xmlElementLength = (buffer) => {
-  const close = buffer.indexOf(">");
+var xmlElementLength = (buffer, start = 0) => {
+  const close = buffer.indexOf(">", start);
   if (close === -1) {
     return 0;
   }
   if (buffer[close - 1] === "/") {
-    return close + 1;
+    return close + 1 - start;
   }
-  if (buffer[1] === "/") {
-    return close + 1;
+  if (buffer[start + 1] === "/") {
+    return close + 1 - start;
   }
-  const nameMatch = buffer.match(OPENING_TAG_NAME);
+  const probe = buffer.slice(start, start + TAG_NAME_PROBE);
+  const nameMatch = probe.match(OPENING_TAG_NAME);
   if (!nameMatch) {
     return 1;
   }
   const tagName = nameMatch[1];
   let depth = 0;
   const tagPattern = new RegExp(`<(/?)${escapeRegExpSource2(tagName)}(\\s[^>]*)?>`, "g");
+  tagPattern.lastIndex = start;
   let match;
   while ((match = tagPattern.exec(buffer)) !== null) {
     const isSelfClosing = match[0].endsWith("/>");
     const isClosing = match[1] === "/";
     if (isSelfClosing) {
       if (depth === 0) {
-        return match.index + match[0].length;
+        return match.index + match[0].length - start;
       }
     } else if (isClosing) {
       depth--;
       if (depth === 0) {
-        return match.index + match[0].length;
+        return match.index + match[0].length - start;
       }
     } else {
       depth++;
@@ -7716,8 +7730,8 @@ var xmlElementLength = (buffer) => {
   }
   return 0;
 };
-var linkLength = (buffer, offset) => {
-  const bracketClose = buffer.indexOf("]", offset + 1);
+var linkLength = (buffer, start, bracketAt) => {
+  const bracketClose = buffer.indexOf("]", bracketAt + 1);
   if (bracketClose === -1) {
     return 0;
   }
@@ -7731,13 +7745,179 @@ var linkLength = (buffer, offset) => {
   if (parenClose === -1) {
     return 0;
   }
-  return parenClose + 1;
+  return parenClose + 1 - start;
+};
+
+// 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";
+var xmlBlockDecoration = ({ tag, lineClass, contentClass, hideTags }) => {
+  const lineDecoration = lineClass ? Decoration16.line({
+    class: lineClass
+  }) : void 0;
+  const contentDecoration = contentClass ? Decoration16.mark({
+    class: contentClass
+  }) : void 0;
+  const hideDecoration = hideTags ? Decoration16.replace({}) : void 0;
+  const buildDecorations5 = (view) => {
+    const text = view.state.sliceDoc(0, view.state.doc.length);
+    if (!text.includes(`<${tag}`)) {
+      return Decoration16.none;
+    }
+    const tree = xmlLanguage2.parser.parse(text);
+    const ranges = [];
+    tree.iterate({
+      enter: (node) => {
+        if (node.type.name !== "Element") {
+          return;
+        }
+        const openTag = node.node.getChild("OpenTag");
+        const closeTag = node.node.getChild("CloseTag") ?? node.node.getChild("MismatchedCloseTag");
+        const tagNameNode = openTag?.getChild("TagName");
+        if (!openTag || !tagNameNode) {
+          return;
+        }
+        if (text.slice(tagNameNode.from, tagNameNode.to) !== tag) {
+          return;
+        }
+        const contentFrom = openTag.to;
+        const contentTo = closeTag?.from ?? node.node.to;
+        if (hideDecoration) {
+          ranges.push(hideDecoration.range(openTag.from, openTag.to));
+          if (closeTag) {
+            ranges.push(hideDecoration.range(closeTag.from, closeTag.to));
+          }
+        }
+        if (contentDecoration && contentFrom < contentTo) {
+          ranges.push(contentDecoration.range(contentFrom, contentTo));
+        }
+        if (lineDecoration && contentFrom <= view.state.doc.length) {
+          let pos = contentFrom;
+          while (pos <= contentTo && pos <= view.state.doc.length) {
+            const line = view.state.doc.lineAt(pos);
+            ranges.push(lineDecoration.range(line.from));
+            if (line.to >= contentTo) {
+              break;
+            }
+            pos = line.to + 1;
+          }
+        }
+      }
+    });
+    return Decoration16.set(ranges, true);
+  };
+  return ViewPlugin22.fromClass(class {
+    decorations;
+    constructor(view) {
+      this.decorations = buildDecorations5(view);
+    }
+    update(update2) {
+      if (update2.docChanged) {
+        this.decorations = buildDecorations5(update2.view);
+      }
+    }
+  }, {
+    decorations: (instance) => instance.decorations
+  });
+};
+
+// 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";
+var XML_TAG_NODES = /* @__PURE__ */ new Set([
+  "OpenTag",
+  "CloseTag",
+  "SelfClosingTag",
+  "MismatchedCloseTag"
+]);
+var xmlElementMark = Decoration17.mark({
+  class: "cm-xml-element"
+});
+var xmlTagMark = Decoration17.mark({
+  class: "cm-xml-tag"
+});
+var xmlContentMark = Decoration17.mark({
+  class: "cm-xml-content"
+});
+var xmlFormatting = ({ skip } = {}) => {
+  const skipSet = skip && skip.length > 0 ? new Set(skip) : void 0;
+  const buildDecorations5 = (view) => {
+    const text = view.state.sliceDoc(0, view.state.doc.length);
+    if (!text.includes("<")) {
+      return Decoration17.none;
+    }
+    const tagNameAt = (node) => text.slice(node.from, node.to);
+    const tree = xmlLanguage3.parser.parse(text);
+    const ranges = [];
+    tree.iterate({
+      enter: (node) => {
+        const name = node.type.name;
+        if (name === "SelfClosingTag" && node.from < node.to) {
+          if (skipSet) {
+            const tagNameNode = node.node.getChild("TagName");
+            if (tagNameNode && skipSet.has(tagNameAt(tagNameNode))) {
+              return false;
+            }
+          }
+          ranges.push(xmlElementMark.range(node.from, node.to));
+          ranges.push(xmlTagMark.range(node.from, node.to));
+          return;
+        }
+        if (XML_TAG_NODES.has(name) && node.from < node.to) {
+          ranges.push(xmlTagMark.range(node.from, node.to));
+          return;
+        }
+        if (name === "Element" && node.from < node.to) {
+          const openTag = node.node.getChild("OpenTag");
+          if (openTag && skipSet) {
+            const tagNameNode = openTag.getChild("TagName");
+            if (tagNameNode && skipSet.has(tagNameAt(tagNameNode))) {
+              return false;
+            }
+          }
+          const closeTag = node.node.getChild("CloseTag") ?? node.node.getChild("MismatchedCloseTag");
+          ranges.push(xmlElementMark.range(node.from, node.to));
+          if (openTag && closeTag && openTag.to < closeTag.from) {
+            ranges.push(xmlContentMark.range(openTag.to, closeTag.from));
+          }
+        }
+      }
+    });
+    return Decoration17.set(ranges, true);
+  };
+  return [
+    ViewPlugin23.fromClass(class {
+      decorations;
+      constructor(view) {
+        this.decorations = buildDecorations5(view);
+      }
+      update(update2) {
+        if (update2.docChanged) {
+          this.decorations = buildDecorations5(update2.view);
+        }
+      }
+    }, {
+      decorations: (instance) => instance.decorations
+    }),
+    EditorView31.baseTheme({
+      ".cm-xml-element": {
+        backgroundColor: "var(--color-current-surface)",
+        borderRadius: "0.25rem",
+        padding: "0.25rem"
+      },
+      ".cm-xml-tag": {
+        color: "var(--color-blue-500)",
+        fontFamily: "var(--font-mono)"
+      },
+      ".cm-xml-content": {}
+    })
+  ];
 };
 
 // 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 Decoration16, EditorView as EditorView31, ViewPlugin as ViewPlugin22, WidgetType as WidgetType10, keymap as keymap13 } from "@codemirror/view";
+import { Decoration as Decoration18, EditorView as EditorView32, ViewPlugin as ViewPlugin24, 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";
@@ -7746,15 +7926,7 @@ import { Domino as Domino4 } from "@dxos/ui";
 import { invariant as invariant6 } from "@dxos/invariant";
 var __dxlog_file16 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/tags/xml-util.ts";
 var nodeToJson = (state, node) => {
-  invariant6(node.type.name === "Element", "Node is not an Element", {
-    F: __dxlog_file16,
-    L: 18,
-    S: void 0,
-    A: [
-      "node.type.name === 'Element'",
-      "'Node is not an Element'"
-    ]
-  });
+  invariant6(node.type.name === "Element", "Node is not an Element", { "~LogMeta": "~LogMeta", F: __dxlog_file16, L: 8, S: void 0, A: ["node.type.name === 'Element'", "'Node is not an Element'"] });
   const openTag = node.node.getChild("OpenTag") || node.node.getChild("SelfClosingTag");
   if (openTag) {
     const tagName = openTag.getChild("TagName");
@@ -7786,13 +7958,23 @@ var nodeToJson = (state, node) => {
     if (node.type.name === "Element" && openTag.type.name !== "SelfClosingTag") {
       const children = [];
       let child = node.node.firstChild;
+      const appendText = (raw) => {
+        if (raw.length === 0) {
+          return;
+        }
+        const last = children[children.length - 1];
+        if (typeof last === "string") {
+          children[children.length - 1] = last + raw;
+        } else {
+          children.push(raw);
+        }
+      };
       while (child) {
         if (child.type.name !== "OpenTag" && child.type.name !== "CloseTag") {
           if (child.type.name === "Text") {
-            const text = state.doc.sliceString(child.from, child.to).trim();
-            if (text) {
-              children.push(text);
-            }
+            appendText(state.doc.sliceString(child.from, child.to));
+          } else if (child.type.name === "EntityReference" || child.type.name === "CharacterReference") {
+            appendText(decodeXmlEntity(state.doc.sliceString(child.from, child.to)));
           } else if (child.type.name === "Element") {
             const data = nodeToJson(state, child);
             if (data) {
@@ -7802,13 +7984,48 @@ var nodeToJson = (state, node) => {
         }
         child = child.nextSibling;
       }
+      if (children.length > 0 && typeof children[0] === "string") {
+        children[0] = children[0].trimStart();
+      }
       if (children.length > 0) {
-        tag.children = children;
+        const lastIndex = children.length - 1;
+        const last = children[lastIndex];
+        if (typeof last === "string") {
+          children[lastIndex] = last.trimEnd();
+        }
+      }
+      const trimmed = children.filter((value) => typeof value !== "string" || value.length > 0);
+      if (trimmed.length > 0) {
+        tag.children = trimmed;
       }
     }
     return tag;
   }
 };
+var XML_NAMED_ENTITIES = {
+  "&lt;": "<",
+  "&gt;": ">",
+  "&amp;": "&",
+  "&quot;": '"',
+  "&apos;": "'"
+};
+var decodeXmlEntity = (raw) => {
+  const named = XML_NAMED_ENTITIES[raw];
+  if (named !== void 0) {
+    return named;
+  }
+  const numeric = /^&#(x?)([0-9a-fA-F]+);$/.exec(raw);
+  if (numeric) {
+    const code = parseInt(numeric[2], numeric[1] ? 16 : 10);
+    if (Number.isFinite(code)) {
+      try {
+        return String.fromCodePoint(code);
+      } catch {
+      }
+    }
+  }
+  return raw;
+};
 
 // src/extensions/tags/xml-tags.ts
 var __dxlog_file17 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/tags/xml-tags.ts";
@@ -7846,12 +8063,7 @@ var widgetStateMapStateField = StateField14.define({
         log11("widget updated", {
           id,
           value
-        }, {
-          F: __dxlog_file17,
-          L: 184,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file17, L: 59, S: void 0 });
         const state = typeof value === "function" ? value(map[id]) : value;
         return {
           ...map,
@@ -7862,25 +8074,16 @@ var widgetStateMapStateField = StateField14.define({
     return map;
   }
 });
-var XML_WIDGET_DATA_ATTR = "data-xml-widget";
-var xmlTags = ({ registry, setWidgets, bookmarks: bookmarks2, paragraphToWidgetGapRem } = {}) => {
+var xmlTags = ({ registry, setWidgets, bookmarks: bookmarks2 } = {}) => {
   const notifier = createWidgetMap(setWidgets);
   const widgetDecorationsField = createWidgetDecorationsField(registry, notifier);
-  const paragraphGapTheme = paragraphToWidgetGapRem != null && paragraphToWidgetGapRem > 0 ? EditorView31.baseTheme({
-    [`& .cm-content > .cm-line:not(:has([${XML_WIDGET_DATA_ATTR}])) + .cm-line:has([${XML_WIDGET_DATA_ATTR}])`]: {
-      marginTop: `${paragraphToWidgetGapRem}rem`
-    }
-  }) : null;
   return [
     widgetContextStateField,
     widgetStateMapStateField,
     widgetDecorationsField,
     createWidgetUpdatePlugin(widgetDecorationsField, notifier),
     createNavigationEffectPlugin(widgetDecorationsField, bookmarks2),
-    bookmarks2?.length ? Prec7.highest(keyHandlers) : [],
-    ...paragraphGapTheme ? [
-      paragraphGapTheme
-    ] : []
+    bookmarks2?.length ? Prec7.highest(keyHandlers) : []
   ];
 };
 var createWidgetMap = (setWidgets) => {
@@ -7890,12 +8093,7 @@ var createWidgetMap = (setWidgets) => {
       log11("widget mounted", {
         id: state.id,
         tag: state.props._tag
-      }, {
-        F: __dxlog_file17,
-        L: 261,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file17, L: 101, S: void 0 });
       widgets.set(state.id, state);
       setWidgets?.([
         ...widgets.values()
@@ -7906,12 +8104,7 @@ var createWidgetMap = (setWidgets) => {
       log11("widget unmounted", {
         id,
         tag: state?.props._tag
-      }, {
-        F: __dxlog_file17,
-        L: 267,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file17, L: 112, S: void 0 });
       widgets.delete(id);
       setWidgets?.([
         ...widgets.values()
@@ -7920,7 +8113,7 @@ var createWidgetMap = (setWidgets) => {
   };
   return notifier;
 };
-var keyHandlers = keymap13.of([
+var keyHandlers = keymap14.of([
   {
     key: "Mod-ArrowUp",
     run: (view) => {
@@ -7941,7 +8134,7 @@ var keyHandlers = keymap13.of([
   }
 ]);
 var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
-  return EditorView31.updateListener.of((update2) => {
+  return EditorView32.updateListener.of((update2) => {
     update2.transactions.forEach((transaction) => {
       for (const effect of transaction.effects) {
         if (effect.is(navigatePreviousEffect)) {
@@ -7969,7 +8162,7 @@ var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
               anchor: line.from,
               head: line.from
             },
-            effects: scrollerLineEffect.of({
+            effects: crawlerLineEffect.of({
               line: line.number - 1,
               offset: -16
             })
@@ -8002,7 +8195,7 @@ var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
                 anchor: line.to,
                 head: line.to
               },
-              effects: scrollerLineEffect.of({
+              effects: crawlerLineEffect.of({
                 line: line.number - 1,
                 offset: -16
               })
@@ -8014,7 +8207,7 @@ var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
                 anchor: line.to,
                 head: line.to
               },
-              effects: scrollerLineEffect.of({
+              effects: crawlerLineEffect.of({
                 line: line.number - 1,
                 position: "end"
               })
@@ -8026,7 +8219,7 @@ var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
     });
   });
 };
-var createWidgetUpdatePlugin = (widgetDecorationsField, notifier) => ViewPlugin22.fromClass(class {
+var createWidgetUpdatePlugin = (widgetDecorationsField, notifier) => ViewPlugin24.fromClass(class {
   update(update2) {
     const widgetStateMap = update2.state.field(widgetStateMapStateField);
     const { decorations: decorations2 } = update2.state.field(widgetDecorationsField);
@@ -8071,7 +8264,7 @@ var createWidgetDecorationsField = (registry = {}, notifier) => StateField14.def
         }
         return {
           from: 0,
-          decorations: Decoration16.none
+          decorations: Decoration18.none
         };
       }
     }
@@ -8082,12 +8275,7 @@ var createWidgetDecorationsField = (registry = {}, notifier) => StateField14.def
         log11("document reset", {
           from,
           to: state.doc.length
-        }, {
-          F: __dxlog_file17,
-          L: 429,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file17, L: 298, S: void 0 });
         return buildDecorations4(state, {
           from: 0,
           to: state.doc.length
@@ -8116,8 +8304,8 @@ var createWidgetDecorationsField = (registry = {}, notifier) => StateField14.def
     };
   },
   provide: (field) => [
-    EditorView31.decorations.from(field, (v) => v.decorations),
-    EditorView31.atomicRanges.of((view) => view.state.field(field).decorations || Decoration16.none)
+    EditorView32.decorations.from(field, (v) => v.decorations),
+    EditorView32.atomicRanges.of((view) => view.state.field(field).decorations || Decoration18.none)
   ]
 });
 var buildDecorations4 = (state, range, registry, notifier) => {
@@ -8128,7 +8316,7 @@ var buildDecorations4 = (state, range, registry, notifier) => {
   if (!tree || tree.type.name === "Program" && tree.length === 0) {
     return {
       from: range.from,
-      decorations: Decoration16.none
+      decorations: Decoration18.none
     };
   }
   let last = range.from;
@@ -8164,7 +8352,7 @@ var buildDecorations4 = (state, range, registry, notifier) => {
                 };
                 const widget = factory ? factory(props) ?? void 0 : Component ? new PlaceholderWidget2(widgetId, Component, props, notifier) : void 0;
                 if (widget) {
-                  builder.add(nodeRange.from, nodeRange.to, Decoration16.replace({
+                  builder.add(nodeRange.from, nodeRange.to, Decoration18.replace({
                     widget,
                     block,
                     atomic: true,
@@ -8176,12 +8364,7 @@ var buildDecorations4 = (state, range, registry, notifier) => {
               }
             }
           } catch (err) {
-            log11.catch(err, void 0, {
-              F: __dxlog_file17,
-              L: 538,
-              S: void 0,
-              C: (f, a) => f(...a)
-            });
+            log11.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file17, L: 401, S: void 0 });
           }
           return false;
         }
@@ -8228,7 +8411,7 @@ var buildDecorations4 = (state, range, registry, notifier) => {
         };
         const widget = def.factory ? def.factory(mergedProps) ?? void 0 : def.Component ? new PlaceholderWidget2(widgetId, def.Component, mergedProps, notifier, true) : void 0;
         if (widget) {
-          builder.add(absoluteFrom, range.to, Decoration16.replace({
+          builder.add(absoluteFrom, range.to, Decoration18.replace({
             widget,
             block: def.block,
             atomic: true,
@@ -8260,15 +8443,7 @@ var PlaceholderWidget2 = class extends WidgetType10 {
   #view;
   constructor(id, Component, props, notifier, streaming) {
     super(), this.id = id, this.Component = Component, this.props = props, this.notifier = notifier, this.streaming = streaming;
-    invariant7(id, void 0, {
-      F: __dxlog_file17,
-      L: 641,
-      S: this,
-      A: [
-        "id",
-        ""
-      ]
-    });
+    invariant7(id, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file17, L: 488, S: this, A: ["id", ""] });
   }
   get root() {
     return this.#root;
@@ -8284,9 +8459,7 @@ var PlaceholderWidget2 = class extends WidgetType10 {
   }
   toDOM(view) {
     this.#view = view;
-    this.#root = Domino4.of("div").classNames("min-h-[24px]").attributes({
-      [XML_WIDGET_DATA_ATTR]: ""
-    }).root;
+    this.#root = Domino4.of("div").classNames("min-h-[24px]").root;
     const props = Object.assign({}, this.props, {
       view
     });
@@ -8317,71 +8490,10 @@ var PlaceholderWidget2 = class extends WidgetType10 {
     this.#view = void 0;
   }
 };
-
-// src/extensions/typewriter.ts
-import { keymap as keymap14 } from "@codemirror/view";
-var defaultItems = [
-  "hello world!",
-  "this is a test.",
-  "this is [DXOS](https://dxos.org)"
-];
-var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
-  let t;
-  let idx = 0;
-  return [
-    keymap14.of([
-      {
-        // Reset.
-        key: "alt-meta-'",
-        run: () => {
-          clearTimeout(t);
-          idx = 0;
-          return true;
-        }
-      },
-      {
-        // Next prompt.
-        // TODO(burdon): Press 1-9 to select prompt?
-        key: "Shift-Meta-'",
-        run: (view) => {
-          clearTimeout(t);
-          const text = items[idx++];
-          if (idx === items?.length) {
-            idx = 0;
-          }
-          let i = 0;
-          const insert = (d = 0) => {
-            t = setTimeout(() => {
-              const pos = view.state.selection.main.head;
-              view.dispatch({
-                changes: {
-                  from: pos,
-                  insert: text[i++]
-                },
-                selection: {
-                  anchor: pos + 1
-                }
-              });
-              if (i < text.length) {
-                insert(Math.random() * delay * (text[i] === " " ? 2 : 1));
-              }
-            }, d);
-          };
-          insert();
-          return true;
-        }
-      }
-    ])
-  ];
-};
 export {
   Cursor,
-  EditorInputMode,
-  EditorInputModes,
   EditorState4 as EditorState,
-  EditorView32 as EditorView,
-  EditorViewMode,
-  EditorViewModes,
+  EditorView33 as EditorView,
   Inline,
   InputModeExtensions,
   List,
@@ -8390,7 +8502,6 @@ export {
   SpaceAwarenessProvider,
   TextKind,
   Tree,
-  XML_WIDGET_DATA_ATTR,
   addBlockquote,
   addBookmark,
   addCodeblock,
@@ -8415,6 +8526,9 @@ export {
   commentsState,
   compactSlots,
   convertTreeToJson,
+  crawler,
+  crawlerActiveEffect,
+  crawlerLineEffect,
   createBasicExtensions,
   createComment,
   createCrawler,
@@ -8478,6 +8592,7 @@ export {
   markdownTagsExtensions,
   matchCompletion,
   mention,
+  mobileSlots,
   modalStateEffect,
   modalStateField,
   moveItemDown,
@@ -8501,8 +8616,6 @@ export {
   scrollThreadIntoView,
   scrollToLine,
   scroller,
-  scrollerCrawlEffect,
-  scrollerLineEffect,
   selectionState,
   setBlockquote,
   setComments,
@@ -8510,6 +8623,7 @@ export {
   setSelection,
   setStyle,
   singleValueFacet,
+  snippets2 as snippets,
   staticCompletion,
   submit,
   tabbable,
@@ -8529,10 +8643,12 @@ export {
   treeFacet,
   typeahead,
   typewriter,
-  wire,
-  wireBypass,
+  typewriterBypass,
+  typewriterDrainingEffect,
   wrapWithCatch,
+  xmlBlockDecoration,
   xmlElementLength,
+  xmlFormatting,
   xmlTagContextEffect,
   xmlTagResetEffect,
   xmlTagUpdateEffect,