@dxos/ui-editor 0.8.4-main.9735255 → 0.8.4-main.abd8ff62ef

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

@@ -1,30 +1,44 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
-import {
-  EditorInputMode,
-  EditorInputModes,
-  EditorViewMode,
-  EditorViewModes
-} from "./chunk-YJZGD3LY.mjs";
 
 // src/index.ts
-import { EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView30, keymap as keymap15 } from "@codemirror/view";
+import { EditorState as EditorState4 } from "@codemirror/state";
+import { EditorView as EditorView33, keymap as keymap15 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
 // src/defaults.ts
 import { mx } from "@dxos/ui-theme";
-var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
-var editorSlots = {
-  scroll: {
-    className: "pbs-2"
-  },
+var editorClassNames = (role) => mx("dx-attention-surface p-0.5 data-[toolbar=disabled]:pt-2 dx-focus-ring-inset", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-h-24" : "dx-container overflow-hidden");
+var documentSlots = {
+  content: {
+    /**
+    * CodeMirror content width.
+    * 40rem = 640px. Corresponds to initial plank width (Google docs, Stashpad, etc.)
+    * 50rem = 800px. Maximum content width for solo mode.
+    * NOTE: Max width - 4rem = 2rem left/right margin (or 2rem gutter plus 1rem left/right margin).
+    */
+    className: mx(
+      // 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"
+    )
+  }
+};
+var compactSlots = {
   content: {
-    className: editorWidth
+    className: "mx-2!"
+  }
+};
+var mobileSlots = {
+  content: {
+    className: "mx-2!"
   }
 };
-var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-var stackItemContentEditorClassNames = (role) => mx("p-0.5 dx-focus-ring-inset attention-surface data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
 
 // src/extensions/annotations.ts
 import { RangeSetBuilder } from "@codemirror/state";
@@ -59,7 +73,7 @@ var annotations = ({ match } = {}) => {
       ".cm-annotation": {
         textDecoration: "underline",
         textDecorationStyle: "wavy",
-        textDecorationColor: "var(--dx-errorText)"
+        textDecorationColor: "var(--color-error-text)"
       }
     })
   ];
@@ -208,7 +222,7 @@ var singleValueFacet = (defaultValue) => Facet.define({
 var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
 var defaultCursorConverter = {
   toCursor: (position) => position.toString(),
-  fromCursor: (cursor2) => parseInt(cursor2)
+  fromCursor: (cursor) => parseInt(cursor)
 };
 var Cursor = class _Cursor {
   static converter = singleValueFacet(defaultCursorConverter);
@@ -221,9 +235,9 @@ var Cursor = class _Cursor {
       to
     ].join(":");
   };
-  static getRangeFromCursor = (state, cursor2) => {
+  static getRangeFromCursor = (state, cursor) => {
     const cursorConverter2 = state.facet(_Cursor.converter);
-    const parts = cursor2.split(":");
+    const parts = cursor.split(":");
     const from = cursorConverter2.fromCursor(parts[0]);
     const to = cursorConverter2.fromCursor(parts[1]);
     return from !== void 0 && to !== void 0 ? {
@@ -259,12 +273,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 });
     }
   };
 };
@@ -290,12 +299,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 });
   }
 };
 
@@ -502,228 +506,336 @@ var typeahead = ({ onComplete } = {}) => {
   ];
 };
 
-// src/extensions/autoscroll.ts
+// src/extensions/auto-scroll.ts
 import { StateEffect as StateEffect2 } from "@codemirror/state";
 import { EditorView as EditorView5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
-import { debounce } from "@dxos/async";
+import { addEventListener, combine, throttle } from "@dxos/async";
 import { Domino } from "@dxos/ui";
+import { getSize } from "@dxos/ui-theme";
 
-// src/extensions/scrolling.ts
+// src/extensions/scroller.ts
 import { StateEffect } from "@codemirror/state";
 import { EditorView as EditorView4, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
-var scrollToLineEffect = StateEffect.define();
-var smoothScroll = ({ offset = 0, position = "start" } = {}) => {
-  const scrollPlugin = ViewPlugin5.fromClass(class SmoothScrollPlugin {
+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();
     }
-    /**
-    * Perform smooth scroll to the specified line.
-    */
-    scrollToLine(lineNumber, options) {
-      const { offset: animOffset = 0, position: animPosition, behavior } = options;
-      const doc = this.view.state.doc;
-      const scroller = this.view.scrollDOM;
-      const targetLine = Math.max(0, lineNumber - 1);
-      if (behavior === "instant") {
-        requestAnimationFrame(() => {
-          this.view.dispatch({
-            selection: {
-              anchor: doc.line(targetLine + 1).from
-            },
-            scrollIntoView: true
-          });
-        });
-        return;
-      }
-      if (targetLine >= doc.lines) {
-        const targetScrollTop2 = scroller.scrollHeight - scroller.clientHeight + (animOffset || 0);
-        this.animateScroll(scroller, targetScrollTop2);
-        return;
-      }
-      const lineStart = doc.line(targetLine + 1).from;
-      const coords = this.view.coordsAtPos(lineStart);
-      if (!coords) {
-        return;
-      }
-      const currentScrollTop = scroller.scrollTop;
-      const scrollerRect = scroller.getBoundingClientRect();
-      const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
-      let targetScrollTop;
-      if (animPosition === "end") {
-        targetScrollTop = currentScrollTop + coords.bottom - scrollerRect.bottom + animOffset;
+    cancel() {
+      this.crawler.cancel();
+    }
+    crawl(start = false) {
+      if (start) {
+        this.crawler.scroll();
       } else {
-        targetScrollTop = currentScrollTop + coords.top - scrollerRect.top + animOffset;
+        this.crawler.cancel();
       }
-      const clampedScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
-      this.animateScroll(scroller, clampedScrollTop);
     }
-    /**
-    * Animate scroll using browser's built-in smooth scrolling.
-    */
-    animateScroll(element, targetScrollTop) {
-      if (Math.abs(targetScrollTop - element.scrollTop) < 1) {
-        return;
+    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));
+        }
       }
-      element.scrollTo({
-        top: targetScrollTop,
-        behavior: "smooth"
+      requestAnimationFrame(() => {
+        this.view.scrollDOM.scrollTo({
+          top: targetScrollTop
+        });
       });
     }
   });
   return [
     scrollPlugin,
-    // Update listener to handle scroll effects.
+    // Listen for effect.s
     EditorView4.updateListener.of((update2) => {
       update2.transactions.forEach((transaction) => {
-        for (const effect of transaction.effects) {
-          if (effect.is(scrollToLineEffect)) {
-            const { line, options = {} } = effect.value;
-            const plugin = update2.view.plugin(scrollPlugin);
-            if (plugin) {
-              plugin.scrollToLine(line, {
-                offset,
-                position,
-                ...options
-              });
+        try {
+          const plugin = update2.view.plugin(scrollPlugin);
+          if (plugin) {
+            for (const effect of transaction.effects) {
+              if (effect.is(scrollerCrawlEffect)) {
+                plugin.crawl(effect.value);
+              } else if (effect.is(scrollerLineEffect)) {
+                plugin.scroll(effect.value);
+              }
             }
           }
+        } catch (err) {
+          log2.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 91, S: void 0 });
         }
       });
+    }),
+    // Styles.
+    EditorView4.theme({
+      ".cm-scroller": {
+        overflowY: "scroll",
+        // Browser scroll-anchoring: when widgets above the viewport resize (e.g. tool blocks
+        // expanding their TogglePanel), the browser picks a stable element near the viewport
+        // top and adjusts `scrollTop` so the user's view doesn't jump. Auto-scroll's pinning
+        // logic still has the final word when pinned (forces scrollTop to scrollHeight).
+        overflowAnchor: "auto"
+      },
+      ".cm-scroller.cm-hide-scrollbar::-webkit-scrollbar": {
+        display: "none"
+      },
+      ".cm-scroller::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        transition: "background 0.15s"
+      },
+      "&:hover .cm-scroller::-webkit-scrollbar-thumb": {
+        background: "var(--color-scrollbar-thumb)"
+      },
+      // Spacer below the last text line. Implemented as a real block pseudo-element
+      // (rather than `padding-bottom` on `.cm-content`) so it materializes in the
+      // scroller's `scrollHeight` regardless of how `padding` is reset by the base
+      // theme or downstream classes — this is what gives auto-scroll its head-room
+      // so the last line stays `overScroll` px above the viewport bottom.
+      ".cm-content::after": {
+        content: '""',
+        display: "block",
+        height: `${overScroll}px`
+      },
+      ".cm-scroll-button": {
+        position: "absolute",
+        bottom: "0.5rem",
+        right: "1rem"
+      }
     })
   ];
 };
-var scrollToLine = (view, line, options) => {
-  view.dispatch({
-    effects: scrollToLineEffect.of({
-      line,
-      options
-    })
-  });
-};
+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/autoscroll.ts
-var scrollToBottomEffect = StateEffect2.define();
-var autoScroll = ({ autoScroll: autoScroll2 = true, threshold = 100, throttleDelay = 1e3, onAutoScroll } = {}) => {
+// src/extensions/auto-scroll.ts
+var autoScrollEffect = StateEffect2.define();
+var autoScroll = ({ scrollOnResize = true } = {}) => {
   let buttonContainer;
-  let hideTimeout;
-  let lastScrollTop = 0;
   let isPinned = true;
-  const setPinned = (pin) => {
-    isPinned = pin;
-    buttonContainer?.classList.toggle("opacity-0", pin);
-  };
-  const hideScrollbar = (view) => {
-    view.scrollDOM.classList.add("cm-hide-scrollbar");
-    clearTimeout(hideTimeout);
-    hideTimeout = setTimeout(() => {
-      view.scrollDOM.classList.remove("cm-hide-scrollbar");
-    }, 1e3);
+  let jumpPending = false;
+  let enabled = true;
+  let firstUpdate = true;
+  const setPinned = (pinned) => {
+    buttonContainer?.classList.toggle("opacity-0", pinned);
+    isPinned = pinned;
   };
-  const scrollToBottom = (view, behavior) => {
-    setPinned(true);
-    hideScrollbar(view);
-    const line = view.state.doc.lineAt(view.state.doc.length);
-    view.dispatch({
-      selection: {
-        anchor: line.to,
-        head: line.to
-      },
-      effects: scrollToLineEffect.of({
-        line: line.number,
-        options: {
-          position: "end",
-          offset: threshold,
-          behavior
-        }
-      })
-    });
-  };
-  const checkDistance = debounce((view) => {
-    const scrollerRect = view.scrollDOM.getBoundingClientRect();
-    const coords = view.coordsAtPos(view.state.doc.length);
-    const distanceFromBottom = coords ? coords.bottom - scrollerRect.bottom : 0;
-    setPinned(distanceFromBottom < 0);
-  }, 1e3);
-  const triggerUpdate = debounce((view) => scrollToBottom(view), throttleDelay);
   return [
-    // Update listener for logging when scrolling is needed.
-    EditorView5.updateListener.of(({ view, transactions, heightChanged }) => {
-      transactions.forEach((transaction) => {
-        for (const effect of transaction.effects) {
-          if (effect.is(scrollToBottomEffect)) {
-            scrollToBottom(view, effect.value);
+    // 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 (heightChanged && isPinned) {
-        const coords = view.coordsAtPos(view.state.doc.length);
-        const scrollerRect = view.scrollDOM.getBoundingClientRect();
-        const distanceFromBottom = coords ? scrollerRect.bottom - coords.bottom : 0;
-        if (autoScroll2 && distanceFromBottom < threshold) {
-          const shouldScroll = onAutoScroll?.({
-            view,
-            distanceFromBottom
-          }) ?? true;
-          if (shouldScroll) {
-            triggerUpdate(view);
+      }
+      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);
           }
-        } else if (distanceFromBottom < 0) {
-          setPinned(false);
         }
       }
     }),
-    // Detect user scroll.
-    EditorView5.domEventHandlers({
-      scroll: (event, view) => {
-        const currentScrollTop = view.scrollDOM.scrollTop;
-        const scrollingUp = currentScrollTop < lastScrollTop;
-        lastScrollTop = currentScrollTop;
-        if (scrollingUp) {
-          setPinned(false);
-        } else {
-          checkDistance(view);
-        }
+    // Re-pin and jump to bottom when the scroll container itself resizes (e.g. sidebar toggle,
+    // window resize). Doc-driven height changes are handled by the updateListener above; this
+    // observer covers the case where the viewport changes while the doc length is unchanged.
+    scrollOnResize ? ViewPlugin6.fromClass(class {
+      observer;
+      firstObservation = true;
+      destroyed = false;
+      constructor(view) {
+        const onResize = throttle(() => {
+          if (this.destroyed || !enabled) {
+            return;
+          }
+          setPinned(true);
+          requestAnimationFrame(() => {
+            if (this.destroyed) {
+              return;
+            }
+            view.scrollDOM.scrollTop = view.scrollDOM.scrollHeight;
+            view.dispatch({
+              effects: scrollerCrawlEffect.of(true)
+            });
+          });
+        }, 100);
+        this.observer = new ResizeObserver(() => {
+          if (this.firstObservation) {
+            this.firstObservation = false;
+            return;
+          }
+          onResize();
+        });
+        this.observer.observe(view.scrollDOM);
+      }
+      destroy() {
+        this.destroyed = true;
+        this.observer.disconnect();
+      }
+    }) : [],
+    // Detect user scroll and unpin (or re-pin if scrolled to the bottom).
+    ViewPlugin6.fromClass(class {
+      cleanup;
+      constructor(view) {
+        this.cleanup = createUserScrollDetector(view.scrollDOM, throttle(() => {
+          requestAnimationFrame(() => {
+            const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+            const delta = scrollHeight - scrollTop - clientHeight;
+            const pinned = delta === 0;
+            setPinned(pinned);
+            if (!pinned) {
+              view.dispatch({
+                effects: scrollerCrawlEffect.of(false)
+              });
+            }
+          });
+        }, 500));
+      }
+      destroy() {
+        this.cleanup();
       }
     }),
     // Scroll button.
     ViewPlugin6.fromClass(class {
       constructor(view) {
-        const icon = Domino.of("dx-icon").attributes({
+        const icon = Domino.of("dx-icon").classNames(getSize(4)).attributes({
           icon: "ph--arrow-down--regular"
         });
-        const button = Domino.of("button").classNames("dx-button bg-accentSurface").attributes({
+        const button = Domino.of("button").classNames("dx-button bg-accent-surface").attributes({
           "data-density": "fine"
-        }).children(icon).on("click", () => {
-          scrollToBottom(view);
+        }).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").children(button).root;
+        buttonContainer = Domino.of("div").classNames("cm-scroll-button transition-opacity duration-300 opacity-0").append(button).root;
         view.scrollDOM.parentElement.appendChild(buttonContainer);
       }
-    }),
-    // Styles.
-    EditorView5.theme({
-      ".cm-scroller": {
-        scrollbarWidth: "thin"
-      },
-      ".cm-scroller.cm-hide-scrollbar": {
-        scrollbarWidth: "none"
-      },
-      ".cm-scroller.cm-hide-scrollbar::-webkit-scrollbar": {
-        display: "none"
-      },
-      ".cm-scroll-button": {
-        position: "absolute",
-        bottom: "0.5rem",
-        right: "1rem"
-      }
     })
   ];
 };
+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";
@@ -737,32 +849,22 @@ var initialSync = Transaction.userEvent.of("initial.sync");
 
 // src/extensions/automerge/cursor.ts
 import { fromCursor, toCursor } from "@dxos/echo-db";
-import { log as log2 } from "@dxos/log";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/automerge/cursor.ts";
+import { log as log3 } from "@dxos/log";
+var __dxlog_file3 = "/__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) {
-      log2.catch(err, void 0, {
-        F: __dxlog_file2,
-        L: 15,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      log3.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 11, S: void 0 });
       return "";
     }
   },
-  fromCursor: (cursor2) => {
+  fromCursor: (cursor) => {
     try {
-      return fromCursor(accessor, cursor2);
+      return fromCursor(accessor, cursor);
     } catch (err) {
-      log2.catch(err, void 0, {
-        F: __dxlog_file2,
-        L: 24,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      log3.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 19, S: void 0 });
       return 0;
     }
   }
@@ -783,7 +885,7 @@ var isReconcile = (tr) => {
 
 // src/extensions/automerge/sync.ts
 import { next as A2 } from "@automerge/automerge";
-import { log as log3 } from "@dxos/log";
+import { log as log4 } from "@dxos/log";
 
 // src/extensions/automerge/update-automerge.ts
 import { next as A } from "@automerge/automerge";
@@ -924,7 +1026,7 @@ var charPath = (textPath, candidatePath) => {
 };
 
 // src/extensions/automerge/sync.ts
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/automerge/sync.ts";
+var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/automerge/sync.ts";
 var Syncer = class {
   _handle;
   _state;
@@ -947,12 +1049,7 @@ var Syncer = class {
     this._pending = false;
   }
   onEditorChange(view) {
-    log3("onEditorChange", void 0, {
-      F: __dxlog_file3,
-      L: 45,
-      S: this,
-      C: (f, a) => f(...a)
-    });
+    log4("onEditorChange", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, 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) {
@@ -963,12 +1060,7 @@ var Syncer = class {
     }
   }
   onAutomergeChange(view) {
-    log3("onAutomergeChange", void 0, {
-      F: __dxlog_file3,
-      L: 60,
-      S: this,
-      C: (f, a) => f(...a)
-    });
+    log4("onAutomergeChange", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, 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);
@@ -1030,6 +1122,17 @@ var automerge = (accessor) => {
           const value = DocAccessor.getValue(accessor);
           const current = this._view.state.doc.toString();
           if (value !== current) {
+            this._view.dispatch({
+              changes: {
+                from: 0,
+                to: this._view.state.doc.length,
+                insert: value
+              },
+              annotations: [
+                initialSync,
+                reconcileAnnotation.of(true)
+              ]
+            });
           }
         });
       }
@@ -1057,7 +1160,7 @@ 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 { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
-var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/awareness/awareness.ts";
+var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/awareness/awareness.ts";
 var dummyProvider = {
   remoteStateChange: new Event(),
   open: () => {
@@ -1080,10 +1183,7 @@ var awareness = (provider = dummyProvider) => {
   ];
 };
 var RemoteSelectionsDecorator = class {
-  _ctx = new Context(void 0, {
-    F: __dxlog_file4,
-    L: 80
-  });
+  _ctx = new Context(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 33 });
   _cursorConverter;
   _provider;
   _lastAnchor;
@@ -1294,8 +1394,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 log4 } from "@dxos/log";
-var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/awareness/awareness-provider.ts";
+import { log as log5 } from "@dxos/log";
+var __dxlog_file6 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/awareness/awareness-provider.ts";
 var DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
   _remoteStates = /* @__PURE__ */ new Map();
@@ -1314,10 +1414,7 @@ var SpaceAwarenessProvider = class {
     this._info = info;
   }
   open() {
-    this._ctx = new Context2(void 0, {
-      F: __dxlog_file5,
-      L: 57
-    });
+    this._ctx = new Context2(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 28 });
     this._postTask = new DeferredTask(this._ctx, async () => {
       if (this._localState) {
         await this._messenger.postMessage(this._channel, {
@@ -1342,14 +1439,9 @@ var SpaceAwarenessProvider = class {
     void this._messenger.postMessage(this._channel, {
       kind: "query"
     }).catch((err) => {
-      log4.debug("failed to query awareness", {
+      log5.debug("failed to query awareness", {
         err
-      }, {
-        F: __dxlog_file5,
-        L: 91,
-        S: this,
-        C: (f, a) => f(...a)
-      });
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 57, S: this });
     });
   }
   close() {
@@ -1361,15 +1453,7 @@ var SpaceAwarenessProvider = class {
     return Array.from(this._remoteStates.values());
   }
   update(position) {
-    invariant(this._postTask, void 0, {
-      F: __dxlog_file5,
-      L: 106,
-      S: this,
-      A: [
-        "this._postTask",
-        ""
-      ]
-    });
+    invariant(this._postTask, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 71, S: this, A: ["this._postTask", ""] });
     this._localState = {
       peerId: this._peerId,
       position,
@@ -1378,27 +1462,11 @@ var SpaceAwarenessProvider = class {
     this._postTask.schedule();
   }
   _handleQueryMessage() {
-    invariant(this._postTask, void 0, {
-      F: __dxlog_file5,
-      L: 117,
-      S: this,
-      A: [
-        "this._postTask",
-        ""
-      ]
-    });
+    invariant(this._postTask, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 80, S: this, A: ["this._postTask", ""] });
     this._postTask.schedule();
   }
   _handlePostMessage(message) {
-    invariant(message.kind === "post", void 0, {
-      F: __dxlog_file5,
-      L: 122,
-      S: this,
-      A: [
-        "message.kind === 'post'",
-        ""
-      ]
-    });
+    invariant(message.kind === "post", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 84, S: this, A: ["message.kind === 'post'", ""] });
     this._remoteStates.set(message.state.peerId, message.state);
     this.remoteStateChange.emit();
   }
@@ -1407,9 +1475,9 @@ var SpaceAwarenessProvider = class {
 // src/extensions/blast.ts
 import { EditorView as EditorView8, keymap as keymap3 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
-import { throttle } from "@dxos/async";
+import { throttle as throttle2 } from "@dxos/async";
 import { invariant as invariant2 } from "@dxos/invariant";
-var __dxlog_file6 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/blast.ts";
+var __dxlog_file7 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
   maxParticles: 200,
@@ -1527,15 +1595,7 @@ var Blaster = class {
     return this._node;
   }
   initialize() {
-    invariant2(!this._canvas && !this._ctx, void 0, {
-      F: __dxlog_file6,
-      L: 142,
-      S: this,
-      A: [
-        "!this._canvas && !this._ctx",
-        ""
-      ]
-    });
+    invariant2(!this._canvas && !this._ctx, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file7, 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";
@@ -1564,15 +1624,7 @@ var Blaster = class {
     }
   }
   start() {
-    invariant2(this._canvas && this._ctx, void 0, {
-      F: __dxlog_file6,
-      L: 181,
-      S: this,
-      A: [
-        "this._canvas && this._ctx",
-        ""
-      ]
-    });
+    invariant2(this._canvas && this._ctx, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file7, L: 166, S: this, A: ["this._canvas && this._ctx", ""] });
     this._running = true;
     this.loop();
   }
@@ -1599,11 +1651,11 @@ var Blaster = class {
     this.drawParticles();
     requestAnimationFrame(this.loop.bind(this));
   }
-  shake = throttle(({ time }) => {
+  shake = throttle2(({ time }) => {
     this._shakeTime = this._shakeTimeMax || time;
     this._shakeTimeMax = time;
   }, 100);
-  spawn = throttle(({ element, point }) => {
+  spawn = throttle2(({ 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;
@@ -1777,11 +1829,11 @@ var blocks = () => [
     ".cm-line.block-line": {
       paddingLeft: "0.75rem",
       paddingRight: "0.75rem",
-      borderLeft: "1px solid var(--dx-subduedSeparator)",
-      borderRight: "1px solid var(--dx-subduedSeparator)"
+      borderLeft: "1px solid var(--color-subdued-separator)",
+      borderRight: "1px solid var(--color-subdued-separator)"
     },
     ".cm-line.block-single": {
-      border: "1px solid var(--dx-subduedSeparator)",
+      border: "1px solid var(--color-subdued-separator)",
       borderRadius: "6px",
       paddingTop: "0.5rem",
       paddingBottom: "0.5rem",
@@ -1789,7 +1841,7 @@ var blocks = () => [
       marginBottom: "0.5rem"
     },
     ".cm-line.block-first": {
-      borderTop: "1px solid var(--dx-subduedSeparator)",
+      borderTop: "1px solid var(--color-subdued-separator)",
       borderTopLeftRadius: "6px",
       borderTopRightRadius: "6px",
       paddingTop: "0.5rem",
@@ -1797,7 +1849,7 @@ var blocks = () => [
     },
     ".cm-line.block-middle": {},
     ".cm-line.block-last": {
-      borderBottom: "1px solid var(--dx-subduedSeparator)",
+      borderBottom: "1px solid var(--color-subdued-separator)",
       borderBottomLeftRadius: "6px",
       borderBottomRightRadius: "6px",
       paddingBottom: "0.5rem",
@@ -1809,8 +1861,8 @@ var blocks = () => [
 // src/extensions/bookmarks.ts
 import { Prec as Prec3, StateEffect as StateEffect4, StateField as StateField2 } from "@codemirror/state";
 import { keymap as keymap4 } from "@codemirror/view";
-import { log as log5 } from "@dxos/log";
-var __dxlog_file7 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/bookmarks.ts";
+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();
@@ -1822,12 +1874,7 @@ var bookmarks = () => {
         key: "Mod-ArrowUp",
         run: (view) => {
           const bookmarks2 = view.state.field(bookmarksField);
-          log5("up", bookmarks2, {
-            F: __dxlog_file7,
-            L: 29,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
+          log6("up", bookmarks2, { "~LogMeta": "~LogMeta", F: __dxlog_file8, L: 18, S: void 0 });
           return true;
         }
       },
@@ -1835,12 +1882,7 @@ var bookmarks = () => {
         key: "Mod-ArrowDown",
         run: (view) => {
           const bookmarks2 = view.state.field(bookmarksField);
-          log5("down", bookmarks2, {
-            F: __dxlog_file7,
-            L: 37,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
+          log6("down", bookmarks2, { "~LogMeta": "~LogMeta", F: __dxlog_file8, L: 26, S: void 0 });
           return true;
         }
       }
@@ -1880,19 +1922,19 @@ import { invertedEffects } from "@codemirror/commands";
 import { StateEffect as StateEffect5, StateField as StateField3 } from "@codemirror/state";
 import { Decoration as Decoration7, EditorView as EditorView11, ViewPlugin as ViewPlugin10, hoverTooltip, keymap as keymap6 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
-import { debounce as debounce3 } from "@dxos/async";
-import { log as log6 } from "@dxos/log";
+import { debounce as debounce2 } from "@dxos/async";
+import { log as log7 } from "@dxos/log";
 import { isNonNullable } from "@dxos/util";
 
 // src/extensions/selection.ts
 import { Transaction as Transaction3 } from "@codemirror/state";
 import { EditorView as EditorView10, keymap as keymap5 } from "@codemirror/view";
-import { debounce as debounce2 } from "@dxos/async";
+import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isTruthy } from "@dxos/util";
-var __dxlog_file8 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/selection.ts";
+var __dxlog_file9 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/selection.ts";
 var documentId = singleValueFacet();
-var stateRestoreAnnotation = "dxos.org/cm/state-restore";
+var stateRestoreAnnotation = "org.dxos.cm.state-restore";
 var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
@@ -1905,33 +1947,17 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
 };
 var createEditorStateStore = (keyPrefix) => ({
   getState: (id) => {
-    invariant3(id, void 0, {
-      F: __dxlog_file8,
-      L: 47,
-      S: void 0,
-      A: [
-        "id",
-        ""
-      ]
-    });
+    invariant3(id, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file9, 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_file8,
-      L: 53,
-      S: void 0,
-      A: [
-        "id",
-        ""
-      ]
-    });
+    invariant3(id, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file9, L: 31, S: void 0, A: ["id", ""] });
     localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
   }
 });
 var selectionState = ({ getState, setState } = {}) => {
-  const setStateDebounced = debounce2(setState, 1e3);
+  const setStateDebounced = debounce(setState, 1e3);
   return [
     // TODO(burdon): Track scrolling (currently only updates when cursor moves).
     // EditorView.domEventHandlers({
@@ -1978,7 +2004,7 @@ var selectionState = ({ getState, setState } = {}) => {
 };
 
 // src/extensions/comments.ts
-var __dxlog_file9 = "/__w/dxos/dxos/packages/ui/ui-editor/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();
@@ -2023,14 +2049,14 @@ var commentsState = StateField3.define({
 var styles2 = EditorView11.theme({
   ".cm-comment, .cm-comment-current": {
     padding: "3px 0",
-    color: "var(--dx-cmCommentText)",
-    backgroundColor: "var(--dx-cmCommentSurface)"
+    color: "var(--color-cm-comment-text)",
+    backgroundColor: "var(--color-cm-comment-surface)"
   },
   ".cm-comment > span, .cm-comment-current > span": {
     boxDecorationBreak: "clone",
-    boxShadow: "0 0 1px 3px var(--dx-cmCommentSurface)",
-    backgroundColor: "var(--dx-cmCommentSurface)",
-    color: "var(--dx-cmCommentText)",
+    boxShadow: "0 0 1px 3px var(--color-cm-comment-surface)",
+    backgroundColor: "var(--color-cm-comment-surface)",
+    color: "var(--color-cm-comment-text)",
     cursor: "pointer"
   }
 });
@@ -2048,12 +2074,7 @@ var commentsDecorations = EditorView11.decorations.compute([
   const decorations2 = sortBy(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
     const range = comment.range;
     if (!range) {
-      log6.warn("Invalid range:", range, {
-        F: __dxlog_file9,
-        L: 140,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      log7.warn("Invalid range:", range, { "~LogMeta": "~LogMeta", F: __dxlog_file10, L: 93, S: void 0 });
       return void 0;
     } else if (range.from === range.to) {
       return void 0;
@@ -2166,10 +2187,10 @@ var trackPastedComments = (onUpdate) => {
         const { comments: comments2 } = update2.startState.field(commentsState);
         const exists = comments2.some((c) => c.comment.id === comment.id && c.range.from < c.range.to);
         if (!exists) {
-          const cursor2 = Cursor.getCursorFromRange(update2.state, comment);
+          const cursor = Cursor.getCursorFromRange(update2.state, comment);
           onUpdate({
             id: comment.id,
-            cursor: cursor2
+            cursor
           });
         }
       }
@@ -2198,13 +2219,13 @@ var createComment = (view) => {
       }
     });
   }
-  const cursor2 = Cursor.getCursorFromRange(view.state, {
+  const cursor = Cursor.getCursorFromRange(view.state, {
     from,
     to
   });
-  if (cursor2) {
+  if (cursor) {
     options.onCreate?.({
-      cursor: cursor2,
+      cursor,
       from,
       location: view.coordsAtPos(from)
     });
@@ -2215,7 +2236,7 @@ var createComment = (view) => {
 var optionsFacet = singleValueFacet();
 var comments = (options = {}) => {
   const { key: shortcut = "meta-'" } = options;
-  const handleSelect = debounce3((state) => options.onSelect?.(state), 200);
+  const handleSelect = debounce2((state) => options.onSelect?.(state), 200);
   return [
     optionsFacet.of(options),
     options.id ? documentId.of(options.id) : void 0,
@@ -2393,9 +2414,9 @@ var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin10.fro
 // src/extensions/debug.ts
 import { syntaxTree } from "@codemirror/language";
 import { StateField as StateField4 } from "@codemirror/state";
-var debugNodeLogger = (log11 = console.log) => {
+var debugNodeLogger = (log12 = console.log) => {
   const logTokens = (state) => syntaxTree(state).iterate({
-    enter: (node) => log11(node.type)
+    enter: (node) => log12(node.type)
   });
   return StateField4.define({
     create: (state) => logTokens(state),
@@ -2430,8 +2451,8 @@ var dropFile = (options = {}) => {
 };
 var styles3 = EditorView12.theme({
   ".cm-dropCursor": {
-    borderLeft: "2px solid var(--dx-accentText)",
-    color: "var(--dx-accentText)",
+    borderLeft: "2px solid var(--color-accent-text)",
+    color: "var(--color-accent-text)",
     padding: "0 4px"
   },
   ".cm-dropCursor:after": {
@@ -2445,47 +2466,66 @@ import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap }
 import { HighlightStyle, bracketMatching, syntaxHighlighting } from "@codemirror/language";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
-import { EditorView as EditorView15, ViewPlugin as ViewPlugin11, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap7, lineNumbers, placeholder as placeholder2, scrollPastEnd } from "@codemirror/view";
+import { EditorView as EditorView16, ViewPlugin as ViewPlugin12, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap7, lineNumbers, placeholder as placeholder2 } from "@codemirror/view";
 import { vscodeDarkStyle, vscodeLightStyle } from "@uiw/codemirror-theme-vscode";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import { generateName } from "@dxos/display-name";
-import { log as log7 } from "@dxos/log";
+import { log as log8 } from "@dxos/log";
 import { hexToHue, isTruthy as isTruthy2 } from "@dxos/util";
 
-// src/styles/markdown.ts
+// src/styles/theme.ts
+import { EditorView as EditorView13 } from "@codemirror/view";
 import { mx as mx3 } from "@dxos/ui-theme";
 var headings = {
-  1: "text-4xl",
-  2: "text-3xl",
-  3: "text-2xl",
-  4: "text-xl",
-  5: "text-lg",
-  6: ""
+  1: {
+    className: "text-3xl",
+    fontSize: "var(--text-3xl)",
+    lineHeight: "var(--text-4xl--line-height)"
+  },
+  2: {
+    className: "text-2xl",
+    fontSize: "var(--text-2xl)",
+    lineHeight: "var(--text-3xl--line-height)"
+  },
+  3: {
+    className: "text-xl",
+    fontSize: "var(--text-xl)",
+    lineHeight: "var(--text-2xl--line-height)"
+  },
+  4: {
+    className: "text-lg",
+    fontSize: "var(--text-lg)",
+    lineHeight: "var(--text-xl--line-height)"
+  },
+  5: {
+    className: "text-base",
+    fontSize: "var(--text-base)",
+    lineHeight: "var(--text-lg--line-height)"
+  },
+  6: {
+    className: "text-base",
+    fontSize: "var(--text-base)",
+    lineHeight: "var(--text-base--line-height)"
+  }
 };
+var fontBody = '"Inter Variable", ui-sans-serif, system-ui, sans-serif';
+var fontMono = '"JetBrains Mono Variable", ui-monospace, "Cascadia Code", "Source Code Pro", monospace';
 var markdownTheme = {
-  code: "font-mono !no-underline text-neutral-700 dark:text-neutral-300",
-  codeMark: "font-mono text-primary-500",
-  mark: "opacity-50",
-  heading: (level) => {
-    return mx3(headings[level], "dark:text-neutral-400");
-  }
+  code: "font-mono! cm-code-inline",
+  codeMark: "font-mono! cm-code-mark",
+  mark: "font-mono!",
+  heading: (level) => ({
+    className: mx3(headings[level].className, "font-light text-(--color-cm-heading-number)"),
+    color: "var(--color-cm-heading) !important",
+    lineHeight: headings[level].lineHeight,
+    fontSize: headings[level].fontSize,
+    fontWeight: "100 !important"
+  })
 };
-
-// src/styles/theme.ts
-import { EditorView as EditorView13 } from "@codemirror/view";
-
-// src/styles/tokens.ts
-import { tokens } from "@dxos/ui-theme";
-import { get } from "@dxos/util";
-var getToken = (path, defaultValue) => {
-  const value = get(tokens, path, defaultValue);
-  return value?.toString() ?? "";
-};
-var fontBody = getToken("fontFamily.body");
-var fontMono = getToken("fontFamily.mono");
-
-// src/styles/theme.ts
 var baseTheme = EditorView13.baseTheme({
+  /**
+  * Outer frame.
+  */
   "&": {},
   "&.cm-focused": {
     outline: "none"
@@ -2494,7 +2534,27 @@ var baseTheme = EditorView13.baseTheme({
   * Scroller
   */
   ".cm-scroller": {
-    overflowY: "auto"
+    // Browser scroll-anchoring: see comment in `scroller.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: "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-thumb": {
+    background: "transparent",
+    transition: "background 0.15s"
+  },
+  "&:hover .cm-scroller::-webkit-scrollbar-thumb": {
+    background: "var(--color-scrollbar-thumb)"
   },
   /**
   * Content
@@ -2502,7 +2562,6 @@ var baseTheme = EditorView13.baseTheme({
   */
   ".cm-content": {
     padding: "unset",
-    lineHeight: "24px",
     color: "unset"
   },
   /**
@@ -2516,8 +2575,8 @@ var baseTheme = EditorView13.baseTheme({
   ".cm-gutter": {},
   ".cm-gutter.cm-lineNumbers": {
     paddingRight: "4px",
-    borderRight: "1px solid var(--dx-subduedSeparator)",
-    color: "var(--dx-subduedText)"
+    borderRight: "1px solid var(--color-subdued-separator)",
+    color: "var(--color-subdued)"
   },
   ".cm-gutter.cm-lineNumbers .cm-gutterElement": {
     minWidth: "40px"
@@ -2533,29 +2592,36 @@ var baseTheme = EditorView13.baseTheme({
   * Line.
   */
   ".cm-line": {
-    lineHeight: "24px",
+    lineHeight: 1.5,
     paddingInline: 0
   },
+  /**
+  * Force all inline children to inherit line-height to prevent monospace font metrics
+  * (JetBrains Mono ascent/descent) from inflating the line box beyond 24px.
+  */
+  ".cm-line *": {
+    lineHeight: "inherit"
+  },
   ".cm-activeLine": {
-    background: "var(--dx-cmActiveLine)"
+    background: "var(--color-cm-active-line)"
   },
   /**
   * Cursor (layer).
   */
   ".cm-cursor, .cm-dropCursor": {
-    borderLeft: "2px solid var(--dx-cmCursor)"
+    borderLeft: "2px solid var(--color-cm-cursor)"
   },
   ".cm-placeholder": {
-    color: "var(--dx-placeholder)"
+    color: "var(--color-placeholder)"
   },
   /**
   * Selection (layer).
   */
   ".cm-selectionBackground": {
-    background: "var(--dx-cmSelection)"
+    background: "var(--color-cm-selection)"
   },
   "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: "var(--dx-cmFocusedSelection)"
+    background: "var(--color-cm-focused-selection)"
   },
   /**
   * Search.
@@ -2565,8 +2631,8 @@ var baseTheme = EditorView13.baseTheme({
     margin: "0 -3px",
     padding: "3px",
     borderRadius: "3px",
-    background: "var(--dx-cmHighlightSurface)",
-    color: "var(--dx-cmHighlight)"
+    background: "var(--color-cm-highlight-surface)",
+    color: "var(--color-cm-highlight)"
   },
   ".cm-searchMatch-selected": {
     textDecoration: "underline"
@@ -2577,20 +2643,29 @@ var baseTheme = EditorView13.baseTheme({
   ".cm-link": {
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
-    textDecorationColor: "var(--dx-separator)",
+    textDecorationColor: "var(--color-separator)",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem"
   },
   ".cm-link > span": {
-    color: "var(--dx-accentText)"
+    color: "var(--color-accent-text)"
+  },
+  ".cm-link > span:hover": {
+    color: "var(--color-accent-text-hover)"
   },
   /**
   * Tooltip.
   */
   ".cm-tooltip": {
-    background: "var(--dx-baseSurface)"
+    background: "var(--color-modal-surface)"
   },
   ".cm-tooltip-below": {},
+  ".cm-tooltip-hover": {
+    background: "var(--color-modal-surface)",
+    border: "1px solid var(--color-separator)",
+    borderRadius: "4px",
+    overflow: "hidden"
+  },
   /**
   * Autocomplete.
   * https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
@@ -2598,7 +2673,7 @@ var baseTheme = EditorView13.baseTheme({
   ".cm-tooltip.cm-tooltip-autocomplete": {
     marginTop: "6px",
     marginLeft: "-10px",
-    border: "2px solid var(--dx-separator)",
+    border: "2px solid var(--color-separator)",
     borderRadius: "4px"
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul": {
@@ -2608,12 +2683,12 @@ var baseTheme = EditorView13.baseTheme({
     padding: "4px"
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
-    background: "var(--dx-activeSurface)",
-    color: "var(--dx-activeSurfaceText)"
+    background: "var(--color-active-surface)",
+    color: "var(--color-base-surface-text)"
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
     paddingLeft: "4px !important",
-    color: "var(--dx-hoverSurfaceText)"
+    color: "var(--color-base-surface-text)"
   },
   /**
   * Completion info.
@@ -2622,17 +2697,17 @@ var baseTheme = EditorView13.baseTheme({
     width: "360px !important",
     margin: "-10px 1px 0 1px",
     padding: "8px !important",
-    borderColor: "var(--dx-separator)"
+    borderColor: "var(--color-separator)"
   },
   ".cm-completionIcon": {
     display: "none"
   },
   ".cm-completionLabel": {
-    color: "var(--dx-description)",
+    color: "var(--color-description)",
     padding: "0 4px"
   },
   ".cm-completionMatchedText": {
-    color: "var(--dx-baseText)",
+    color: "var(--color-base-surface-text)",
     textDecoration: "none !important"
   },
   /**
@@ -2656,7 +2731,7 @@ var baseTheme = EditorView13.baseTheme({
     backgroundColor: "var(--surface-bg)"
   },
   ".cm-panel input, .cm-panel button, .cm-panel label": {
-    color: "var(--dx-subdued)",
+    color: "var(--color-subdued)",
     fontSize: "14px",
     all: "unset",
     margin: "3px !important",
@@ -2664,10 +2739,10 @@ var baseTheme = EditorView13.baseTheme({
     outline: "1px solid transparent"
   },
   ".cm-panel input, .cm-panel button": {
-    backgroundColor: "var(--dx-inputSurface)"
+    backgroundColor: "var(--color-input-surface)"
   },
   ".cm-panel input:focus, .cm-panel button:focus": {
-    outline: "1px solid var(--dx-neutralFocusIndicator)"
+    outline: "1px solid var(--color-neutral-focus-indicator)"
   },
   ".cm-panel label": {
     display: "inline-flex",
@@ -2680,33 +2755,33 @@ var baseTheme = EditorView13.baseTheme({
     height: "8px",
     marginRight: "6px !important",
     padding: "2px !important",
-    color: "var(--dx-neutralFocusIndicator)"
+    color: "var(--color-neutral-focus-indicator)"
   },
   ".cm-panel button": {
     "&:hover": {
-      backgroundColor: "var(--dx-accentSurfaceHover) !important"
+      // TODO(burdon): Replace with layer and @apply bg-accent-surface-hover
+      backgroundColor: "var(--color-accent-surface-hover) !important"
     },
     "&:active": {
-      backgroundColor: "var(--dx-accentSurfaceHover)"
+      backgroundColor: "var(--color-accent-surface-hover)"
     }
   },
   ".cm-panel.cm-search": {
     padding: "4px",
-    borderTop: "1px solid var(--dx-separator)"
+    borderTop: "1px solid var(--color-separator)"
   }
 });
 var editorGutter = EditorView13.theme({
   ".cm-gutters": {
     // NOTE: Non-transparent background required to cover content if scrolling horizontally.
-    background: "var(--dx-baseSurface) !important",
+    background: "var(--color-base-surface) !important",
     paddingRight: "1rem"
   }
 });
 var createFontTheme = ({ monospace } = {}) => EditorView13.theme({
-  // Set metrics on the scroller (this is often what CM uses for layout).
+  // Main content.
   ".cm-scroller": {
-    fontFamily: monospace ? fontMono : fontBody,
-    fontSize: "16px"
+    fontFamily: monospace ? fontMono : fontBody
   },
   // Maintain defaults for UI components.
   ".cm-content, .cm-gutters, .cm-panel": {
@@ -2746,9 +2821,32 @@ var focus = [
   })
 ];
 
+// src/extensions/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"
+  };
+  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 = {
+        style: `padding-bottom: ${height}px`
+      };
+    }
+  }
+});
+var scrollPastEnd = () => [
+  scrollPastEndPlugin,
+  EditorView15.contentAttributes.of((view) => view.plugin(scrollPastEndPlugin)?.attrs ?? null)
+];
+
 // src/extensions/factories.ts
-var __dxlog_file10 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/factories.ts";
-var tabbable = EditorView15.contentAttributes.of({
+var __dxlog_file11 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/factories.ts";
+var tabbable = EditorView16.contentAttributes.of({
   tabindex: "0"
 });
 var filterChars = (chars) => {
@@ -2801,13 +2899,8 @@ var createBasicExtensions = (propsProp) => {
   const props = defaultsDeep2({}, propsProp, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    EditorView15.exceptionSink.of((err) => {
-      log7.catch(err, void 0, {
-        F: __dxlog_file10,
-        L: 132,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+    EditorView16.exceptionSink.of((err) => {
+      log8.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file11, L: 79, S: void 0 });
     }),
     props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
     props.bracketMatching && bracketMatching(),
@@ -2816,7 +2909,7 @@ var createBasicExtensions = (propsProp) => {
     props.drawSelection && drawSelection({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && EditorView15.editable.of(props.editable),
+    props.editable !== void 0 && EditorView16.editable.of(props.editable),
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
@@ -2824,9 +2917,16 @@ var createBasicExtensions = (propsProp) => {
       lineNumbers(),
       editorGutter
     ],
-    props.lineWrapping && EditorView15.lineWrapping,
+    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),
@@ -2856,12 +2956,12 @@ var createBasicExtensions = (propsProp) => {
 };
 var grow = {
   editor: {
-    className: "bs-full is-full"
+    className: "h-full w-full"
   }
 };
 var fullWidth = {
   editor: {
-    className: "is-full"
+    className: "w-full"
   }
 };
 var defaultThemeSlots = grow;
@@ -2869,24 +2969,29 @@ 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,
-    EditorView15.darkTheme.of(themeMode === "dark"),
+    EditorView16.darkTheme.of(themeMode === "dark"),
     createFontTheme({
       monospace
     }),
     syntaxHighlightingProp && syntaxHighlighting(HighlightStyle.define(themeMode === "dark" ? defaultStyles.dark : defaultStyles.light)),
-    slots.editor?.className && EditorView15.editorAttributes.of({
+    slots.editor?.className && EditorView16.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView15.contentAttributes.of({
+    slots.content?.className && EditorView16.contentAttributes.of({
       class: slots.content.className
     }),
-    slots.scroll?.className && ViewPlugin11.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);
@@ -2904,8 +3009,8 @@ var createDataExtensions = ({ id, text, messenger, identity }) => {
       channel: `awareness.${id}`,
       peerId: identity.identityKey.toHex(),
       info: {
-        darkColor: `var(--dx-${hue}Cursor)`,
-        lightColor: `var(--dx-${hue}Cursor)`,
+        darkColor: `var(--color-${hue}-border)`,
+        lightColor: `var(--color-${hue}-border)`,
         displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex())
       }
     })));
@@ -2915,7 +3020,7 @@ var createDataExtensions = ({ id, text, messenger, identity }) => {
 
 // src/extensions/folding.ts
 import { codeFolding, foldGutter } from "@codemirror/language";
-import { EditorView as EditorView16 } from "@codemirror/view";
+import { EditorView as EditorView17 } from "@codemirror/view";
 import { Domino as Domino2, mx as mx4 } from "@dxos/ui";
 var folding = () => {
   return [
@@ -2923,13 +3028,14 @@ var folding = () => {
       placeholderDOM: () => Domino2.of("span").root
     }),
     foldGutter({
+      // NOTE: We can't animate since the element is remounted on state change.
       markerDOM: (open) => {
-        return Domino2.of("div").classNames("flex bs-full justify-center items-center").children(Domino2.of("svg", Domino2.SVG).classNames(mx4("is-4 bs-4 cursor-pointer", open && "rotate-90")).children(Domino2.of("use", Domino2.SVG).attributes({
+        return Domino2.of("div").classNames("flex h-full justify-center items-center").append(Domino2.of("svg", Domino2.SVG).classNames(mx4("w-4 h-4 cursor-pointer", open && "rotate-90")).append(Domino2.of("use", Domino2.SVG).attributes({
           href: Domino2.icon("ph--caret-right--regular")
         }))).root;
       }
     }),
-    EditorView16.theme({
+    EditorView17.theme({
       ".cm-foldGutter": {
         opacity: 0.3,
         transition: "opacity 0.3s",
@@ -2943,7 +3049,7 @@ var folding = () => {
 };
 
 // src/extensions/hashtag.ts
-import { Decoration as Decoration8, EditorView as EditorView17, MatchDecorator, ViewPlugin as ViewPlugin12, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration8, EditorView as EditorView18, MatchDecorator, ViewPlugin as ViewPlugin13, WidgetType as WidgetType4 } from "@codemirror/view";
 import { getHashStyles, mx as mx5 } from "@dxos/ui-theme";
 var TagWidget = class extends WidgetType4 {
   _text;
@@ -2964,7 +3070,7 @@ var tagMatcher = new MatchDecorator({
   })
 });
 var hashtag = () => [
-  ViewPlugin12.fromClass(class {
+  ViewPlugin13.fromClass(class {
     tags;
     constructor(view) {
       this.tags = tagMatcher.createDeco(view);
@@ -2974,11 +3080,11 @@ var hashtag = () => [
     }
   }, {
     decorations: (instance) => instance.tags,
-    provide: (plugin) => EditorView17.atomicRanges.of((view) => {
+    provide: (plugin) => EditorView18.atomicRanges.of((view) => {
       return view.plugin(plugin)?.tags || Decoration8.none;
     })
   }),
-  EditorView17.theme({
+  EditorView18.theme({
     ".cm-tag": {
       borderRadius: "4px",
       marginRight: "6px",
@@ -3033,18 +3139,18 @@ var schemaLinter = (validate) => (view) => {
 };
 
 // src/extensions/listener.ts
-import { EditorView as EditorView18 } from "@codemirror/view";
+import { EditorView as EditorView19 } from "@codemirror/view";
 import { isNonNullable as isNonNullable2 } from "@dxos/util";
 var listener = ({ onFocus, onChange }) => {
   return [
-    onFocus && EditorView18.focusChangeEffect.of((state, focusing) => {
+    onFocus && EditorView19.focusChangeEffect.of((state, focusing) => {
       onFocus({
         id: state.facet(documentId),
         focusing
       });
       return null;
     }),
-    onChange && EditorView18.updateListener.of(({ state, docChanged }) => {
+    onChange && EditorView19.updateListener.of(({ state, docChanged }) => {
       if (docChanged) {
         onChange({
           id: state.facet(documentId),
@@ -3059,7 +3165,7 @@ var listener = ({ onFocus, onChange }) => {
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection as EditorSelection2 } from "@codemirror/state";
-import { EditorView as EditorView19, keymap as keymap8 } from "@codemirror/view";
+import { EditorView as EditorView20, keymap as keymap8 } from "@codemirror/view";
 import { debounceAndThrottle } from "@dxos/async";
 var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
 var Inline = /* @__PURE__ */ (function(Inline2) {
@@ -4148,7 +4254,7 @@ var getFormatting = (state) => {
   };
 };
 var formattingListener = (onStateChange, delay = 100) => {
-  return EditorView19.updateListener.of(debounceAndThrottle((update2) => {
+  return EditorView20.updateListener.of(debounceAndThrottle((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       onStateChange(getFormatting(update2.state));
     }
@@ -4209,8 +4315,7 @@ import { completionKeymap } from "@codemirror/autocomplete";
 import { defaultKeymap as defaultKeymap2, indentWithTab as indentWithTab2 } from "@codemirror/commands";
 import { jsonLanguage } from "@codemirror/lang-json";
 import { markdown, markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
-import { xml } from "@codemirror/lang-xml";
-import { LanguageDescription, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
+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";
@@ -4331,30 +4436,38 @@ var markdownHighlightStyle = (_options = {}) => {
       ],
       class: "font-mono"
     },
-    // Headings.
+    // Headings — use CSS properties only (no class:) so CodeMirror generates scoped CSS via
+    // StyleModule that overrides vscodeDarkStyle's t.heading rule. When class: is present,
+    // HighlightStyle silently ignores all other CSS properties (they're mutually exclusive).
+    // Font sizes use Tailwind v4 CSS variables so nothing is hardcoded.
+    {
+      tag: tags.heading,
+      color: "var(--color-cm-heading) !important",
+      fontWeight: "300"
+    },
     {
       tag: tags.heading1,
-      class: markdownTheme.heading(1)
+      ...markdownTheme.heading(1)
     },
     {
       tag: tags.heading2,
-      class: markdownTheme.heading(2)
+      ...markdownTheme.heading(2)
     },
     {
       tag: tags.heading3,
-      class: markdownTheme.heading(3)
+      ...markdownTheme.heading(3)
     },
     {
       tag: tags.heading4,
-      class: markdownTheme.heading(4)
+      ...markdownTheme.heading(4)
     },
     {
       tag: tags.heading5,
-      class: markdownTheme.heading(5)
+      ...markdownTheme.heading(5)
     },
     {
       tag: tags.heading6,
-      class: markdownTheme.heading(6)
+      ...markdownTheme.heading(6)
     },
     // Emphasis.
     {
@@ -4409,15 +4522,23 @@ var createMarkdownExtensions = (options = {}) => {
       // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
       base: markdownLanguage2,
       // Languages for syntax highlighting fenced code blocks.
+      // Caller-supplied languages are checked first so they can override defaults.
       defaultCodeLanguage: jsonLanguage,
-      codeLanguages: languages,
+      codeLanguages: [
+        ...options.codeLanguages ?? [],
+        ...languages
+      ],
       // Don't complete HTML tags.
       completeHTMLTags: false,
       // Parser extensions.
       extensions: [
         // GFM provided by default.
         markdownTagsExtensions,
-        ...options.extensions ?? defaultExtensions()
+        ...options.extensions ?? defaultExtensions(),
+        // Disable folding for fenced code blocks by overriding foldNodeProp.
+        // Note: returning null from foldService does not prevent syntaxFolding fallback,
+        // so we must override the node prop directly on the FencedCode node type.
+        noFencedCodeFolding
       ]
     }),
     // Custom styles.
@@ -4432,18 +4553,13 @@ var createMarkdownExtensions = (options = {}) => {
     ].filter(isTruthy3))
   ];
 };
-var xmlLanguageDesc = LanguageDescription.of({
-  name: "xml",
-  alias: [
-    "html",
-    "xhtml"
-  ],
-  extensions: [
-    "xml",
-    "xhtml"
-  ],
-  load: async () => xml()
-});
+var noFencedCodeFolding = {
+  props: [
+    foldNodeProp.add({
+      FencedCode: () => null
+    })
+  ]
+};
 var defaultExtensions = () => [
   noSetExtHeading,
   noHtml
@@ -4463,19 +4579,19 @@ var debugTree = (cb) => StateField6.define({
   update: (value, tr) => cb(convertTreeToJson(tr.state))
 });
 var convertTreeToJson = (state) => {
-  const treeToJson = (cursor2) => {
+  const treeToJson = (cursor) => {
     const node = {
-      type: cursor2.type.name,
-      from: cursor2.from,
-      to: cursor2.to,
-      text: state.doc.slice(cursor2.from, cursor2.to).toString(),
+      type: cursor.type.name,
+      from: cursor.from,
+      to: cursor.to,
+      text: state.doc.slice(cursor.from, cursor.to).toString(),
       children: []
     };
-    if (cursor2.firstChild()) {
+    if (cursor.firstChild()) {
       do {
-        node.children.push(treeToJson(cursor2));
-      } while (cursor2.nextSibling());
-      cursor2.parent();
+        node.children.push(treeToJson(cursor));
+      } while (cursor.nextSibling());
+      cursor.parent();
     }
     return node;
   };
@@ -4485,16 +4601,15 @@ var convertTreeToJson = (state) => {
 // src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 import { Prec as Prec4, RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect7 } from "@codemirror/state";
-import { Decoration as Decoration11, EditorView as EditorView23, ViewPlugin as ViewPlugin14, WidgetType as WidgetType7 } from "@codemirror/view";
+import { Decoration as Decoration11, EditorView as EditorView24, ViewPlugin as ViewPlugin15, WidgetType as WidgetType7 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
-import { mx as mx6 } from "@dxos/ui-theme";
 
 // src/extensions/markdown/changes.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { Transaction as Transaction4 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin13 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin14 } from "@codemirror/view";
 var adjustChanges = () => {
-  return ViewPlugin13.fromClass(class {
+  return ViewPlugin14.fromClass(class {
     update(update2) {
       const tree = syntaxTree4(update2.state);
       const adjustments = [];
@@ -4636,7 +4751,7 @@ var getValidUrl = (str) => {
 // src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { StateField as StateField7 } from "@codemirror/state";
-import { Decoration as Decoration9, EditorView as EditorView20, WidgetType as WidgetType5 } from "@codemirror/view";
+import { Decoration as Decoration9, EditorView as EditorView21, WidgetType as WidgetType5 } from "@codemirror/view";
 var image = (_options = {}) => {
   return [
     StateField7.define({
@@ -4647,10 +4762,10 @@ var image = (_options = {}) => {
         if (!tr.docChanged && !tr.selection) {
           return value;
         }
-        const cursor2 = tr.state.selection.main.head;
+        const cursor = tr.state.selection.main.head;
         const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
-        let from = Math.min(cursor2, oldCursor);
-        let to = Math.max(cursor2, oldCursor);
+        let from = Math.min(cursor, oldCursor);
+        let to = Math.max(cursor, oldCursor);
         tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
           from = Math.min(from, fromB);
           to = Math.max(to, toB);
@@ -4664,19 +4779,19 @@ var image = (_options = {}) => {
           add: buildDecorations(tr.state, from, to)
         });
       },
-      provide: (field) => EditorView20.decorations.from(field)
+      provide: (field) => EditorView21.decorations.from(field)
     })
   ];
 };
 var buildDecorations = (state, from, to) => {
   const decorations2 = [];
-  const cursor2 = state.selection.main.head;
+  const cursor = state.selection.main.head;
   syntaxTree5(state).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
         if (urlNode) {
-          const hide2 = state.readOnly || cursor2 < node.from || cursor2 > node.to || !state.field(focusField);
+          const hide2 = state.readOnly || cursor < node.from || cursor > node.to || !state.field(focusField);
           const url = state.sliceDoc(urlNode.from, urlNode.to);
           if (url.match(/^https?:\/\//) === null && url.match(/^file?:\/\//) === null) {
             return;
@@ -4724,10 +4839,10 @@ var ImageWidget = class extends WidgetType5 {
 };
 
 // src/extensions/markdown/styles.ts
-import { EditorView as EditorView21 } from "@codemirror/view";
+import { EditorView as EditorView22 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView21.theme({
+var formattingStyles = EditorView22.theme({
   /**
   * Horizontal rule.
   */
@@ -4736,7 +4851,7 @@ var formattingStyles = EditorView21.theme({
     width: "100%",
     height: "0",
     verticalAlign: "middle",
-    borderTop: "1px solid var(--dx-cmSeparator)",
+    borderTop: "1px solid var(--color-cm-separator)",
     opacity: 0.5
   },
   /**
@@ -4759,19 +4874,44 @@ var formattingStyles = EditorView21.theme({
   * Blockquote.
   */
   "& .cm-blockquote": {
-    background: "var(--dx-cmCodeblock)",
-    borderLeft: "2px solid var(--dx-cmSeparator)",
+    background: "var(--color-cm-codeblock)",
+    borderLeft: "2px solid var(--color-cm-separator)",
     paddingLeft: "1rem",
-    margin: "0"
+    margin: 0
   },
   /**
   * Code and codeblocks.
   */
+  "& code": {
+    fontFamily: fontMono,
+    color: "var(--color-cm-code)",
+    whiteSpace: "nowrap"
+  },
   "& .cm-code": {
-    fontFamily: fontMono
+    fontFamily: fontMono,
+    color: "var(--color-cm-code)"
+  },
+  // Inline code spans (triggered by backticks) use `cm-code-inline` + `font-mono`.
+  // Different monospace font metrics can slightly overflow the fixed CodeMirror line box,
+  // so constrain them to the target 24px height.
+  "& .cm-code-inline": {
+    fontFamily: fontMono,
+    height: "24px",
+    // display: 'inline-flex',
+    alignItems: "center",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    color: "var(--color-cm-code-inline)"
+  },
+  "& .cm-code-mark": {
+    fontFamily: fontMono,
+    height: "24px",
+    display: "inline-flex",
+    alignItems: "center",
+    overflow: "hidden"
   },
   "& .cm-codeblock-line": {
-    background: "var(--dx-cmCodeblock)",
+    background: "var(--color-cm-codeblock)",
     paddingInline: "1rem !important"
   },
   "& .cm-codeblock-start": {
@@ -4800,16 +4940,24 @@ var formattingStyles = EditorView21.theme({
   */
   ".cm-table *": {
     fontFamily: fontMono,
+    lineHeight: 1.5,
     textDecoration: "none !important"
   },
   ".cm-table-head": {
     padding: "2px 16px 2px 0px",
+    overflowWrap: "break-word",
+    whiteSpace: "pre-wrap",
+    wordBreak: "keep-all",
     textAlign: "left",
-    borderBottom: "1px solid var(--dx-cmSeparator)",
-    color: "var(--dx-subdued)"
+    color: "var(--color-subdued)",
+    borderBottom: "1px solid var(--color-cm-separator)"
   },
   ".cm-table-cell": {
-    padding: "2px 16px 2px 0px"
+    padding: "2px 16px 2px 0px",
+    overflowWrap: "break-word",
+    whiteSpace: "pre-wrap",
+    wordBreak: "keep-all",
+    verticalAlign: "top"
   },
   /**
   * Image.
@@ -4825,12 +4973,12 @@ var formattingStyles = EditorView21.theme({
   },
   ".cm-image-with-loader": {
     display: "block",
-    opacity: "0",
+    opacity: 0,
     transitionDuration: "350ms",
     transitionProperty: "opacity"
   },
   ".cm-image-with-loader.cm-loaded-image": {
-    opacity: "1"
+    opacity: 1
   },
   ".cm-image-wrapper": {
     "grid-template-columns": "1fr",
@@ -4849,17 +4997,17 @@ var formattingStyles = EditorView21.theme({
 // src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField8 } from "@codemirror/state";
-import { Decoration as Decoration10, EditorView as EditorView22, WidgetType as WidgetType6 } from "@codemirror/view";
+import { Decoration as Decoration10, EditorView as EditorView23, WidgetType as WidgetType6 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField8.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView22.decorations.from(field)
+    provide: (field) => EditorView23.decorations.from(field)
   });
 };
 var update = (state, _options) => {
   const builder = new RangeSetBuilder4();
-  const cursor2 = state.selection.main.head;
+  const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
   const getRow = () => {
@@ -4897,7 +5045,7 @@ var update = (state, _options) => {
     }
   });
   tables.forEach((table2) => {
-    const replace = state.readOnly || cursor2 < table2.from || cursor2 > table2.to;
+    const replace = state.readOnly || cursor < table2.from || cursor > table2.to;
     if (replace) {
       builder.add(table2.from, table2.to, Decoration10.replace({
         block: true,
@@ -4911,6 +5059,26 @@ var update = (state, _options) => {
   });
   return builder.finish();
 };
+var renderCellContent = (el, text) => {
+  const parts = text.split(/(`[^`\n]+`|\*\*[^*\n]+\*\*|__[^_\n]+__|\*[^*\n]+\*|_[^_\n]+_)/);
+  for (const part of parts) {
+    if (part.length > 2 && part.startsWith("`") && part.endsWith("`")) {
+      const code = document.createElement("code");
+      code.textContent = part.slice(1, -1);
+      el.appendChild(code);
+    } else if (part.startsWith("**") && part.endsWith("**") || part.startsWith("__") && part.endsWith("__")) {
+      const strong = document.createElement("strong");
+      strong.textContent = part.slice(2, -2);
+      el.appendChild(strong);
+    } else if (part.startsWith("*") && part.endsWith("*") || part.startsWith("_") && part.endsWith("_")) {
+      const em = document.createElement("em");
+      em.textContent = part.slice(1, -1);
+      el.appendChild(em);
+    } else {
+      el.appendChild(document.createTextNode(part));
+    }
+  }
+};
 var TableWidget = class extends WidgetType6 {
   _table;
   constructor(_table) {
@@ -4930,7 +5098,7 @@ var TableWidget = class extends WidgetType6 {
     this._table.header?.forEach((cell) => {
       const th = document.createElement("th");
       th.setAttribute("class", "cm-table-head");
-      tr.appendChild(th).textContent = cell;
+      renderCellContent(tr.appendChild(th), cell);
     });
     const body = table2.appendChild(document.createElement("tbody"));
     this._table.rows?.forEach((row) => {
@@ -4938,7 +5106,7 @@ var TableWidget = class extends WidgetType6 {
       row.forEach((cell) => {
         const td = document.createElement("td");
         td.setAttribute("class", "cm-table-cell");
-        tr2.appendChild(td).textContent = cell;
+        renderCellContent(tr2.appendChild(td), cell);
       });
     });
     return div;
@@ -4946,7 +5114,7 @@ var TableWidget = class extends WidgetType6 {
 };
 
 // src/extensions/markdown/decorate.ts
-var __dxlog_file11 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/markdown/decorate.ts";
+var __dxlog_file12 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/markdown/decorate.ts";
 var Unicode = {
   emDash: "\u2014",
   bullet: "\u2022",
@@ -4969,7 +5137,6 @@ var LinkButton = class extends WidgetType7 {
   eq(other) {
     return this.url === other.url;
   }
-  // TODO(burdon): Create icon and link directly without react?
   toDOM(view) {
     const el = document.createElement("span");
     this.render(el, {
@@ -5046,10 +5213,10 @@ var fencedCodeLine = Decoration11.line({
   class: "cm-code cm-codeblock-line"
 });
 var fencedCodeLineFirst = Decoration11.line({
-  class: mx6("cm-code cm-codeblock-line", "cm-codeblock-start")
+  class: "cm-code cm-codeblock-line cm-codeblock-start"
 });
 var fencedCodeLineLast = Decoration11.line({
-  class: mx6("cm-code cm-codeblock-line", "cm-codeblock-end")
+  class: "cm-code cm-codeblock-line cm-codeblock-end"
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
@@ -5081,15 +5248,7 @@ var buildDecorations2 = (view, options, focus2) => {
   const { state } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
-    invariant4(level > 0, void 0, {
-      F: __dxlog_file11,
-      L: 180,
-      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;
@@ -5120,15 +5279,7 @@ var buildDecorations2 = (view, options, focus2) => {
     listLevels.pop();
   };
   const getCurrentListLevel = () => {
-    invariant4(listLevels.length, void 0, {
-      F: __dxlog_file11,
-      L: 202,
-      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) => {
@@ -5166,13 +5317,13 @@ var buildDecorations2 = (view, options, focus2) => {
               deco: hide
             });
           } else {
-            const num = headers.slice(from - 1).map((level2) => level2?.number ?? 0).join(".") + " ";
+            const num = headers.slice(from - 1).map((level2) => level2?.number ?? 0).join(".") + "). ";
             if (num.length) {
               atomicDecoRanges.push({
                 from: mark.from,
                 to: mark.from + len,
                 deco: Decoration11.replace({
-                  widget: new TextWidget(num, markdownTheme.heading(level))
+                  widget: new TextWidget(num, markdownTheme.heading(level).className)
                 })
               });
             }
@@ -5349,11 +5500,11 @@ var buildDecorations2 = (view, options, focus2) => {
           }
           decoRanges.push({
             from: marks[0].to,
-            to: marks[1].from,
+            to: !editing && options.renderLinkButton ? node.to : marks[1].from,
             deco: Decoration11.mark({
               tagName: "a",
               attributes: {
-                class: "cm-link",
+                class: options.renderLinkButton ? "cm-link cm-link-with-button" : "cm-link",
                 href: url,
                 rel: "noreferrer",
                 target: "_blank"
@@ -5431,8 +5582,11 @@ var buildDecorations2 = (view, options, focus2) => {
     deco.add(from, to, d);
   }
   const atomicDeco = new RangeSetBuilder5();
-  for (const { from, to, deco: d } of atomicDecoRanges) {
-    atomicDeco.add(from, to, d);
+  for (const { from, to, deco: deco2 } of atomicDecoRanges) {
+    if (from < to && state.doc.lineAt(from).number !== state.doc.lineAt(to).number) {
+      continue;
+    }
+    atomicDeco.add(from, to, deco2);
   }
   return {
     deco: deco.finish(),
@@ -5442,7 +5596,7 @@ var buildDecorations2 = (view, options, focus2) => {
 var forceUpdate = StateEffect7.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin14.fromClass(class {
+    ViewPlugin15.fromClass(class {
       deco;
       atomicDeco;
       pendingUpdate;
@@ -5477,9 +5631,9 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        Prec4.low(EditorView23.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration11.none)),
-        EditorView23.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none),
-        EditorView23.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none)
+        Prec4.low(EditorView24.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration11.none)),
+        EditorView24.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none),
+        EditorView24.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none)
       ]
     }),
     image(),
@@ -5511,8 +5665,7 @@ var linkTooltip = (renderTooltip) => {
     return {
       pos: link.from,
       end: link.to,
-      // NOTE: Forcing above causes the tooltip to flicker.
-      // above: true,
+      above: true,
       create: () => {
         const el = document.createElement("div");
         el.className = tooltipContent({});
@@ -5528,16 +5681,13 @@ var linkTooltip = (renderTooltip) => {
         };
       }
     };
-  }, {
-    // NOTE: 0 = default of 300ms.
-    hoverTime: 1
   });
 };
 
 // src/extensions/mention.ts
 import { autocompletion } from "@codemirror/autocomplete";
-import { log as log8 } from "@dxos/log";
-var __dxlog_file12 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/mention.ts";
+import { log as log9 } from "@dxos/log";
+var __dxlog_file13 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/mention.ts";
 var mention = ({ debug, onSearch }) => {
   return autocompletion({
     // TODO(burdon): Not working.
@@ -5549,14 +5699,9 @@ var mention = ({ debug, onSearch }) => {
     icons: false,
     override: [
       (context) => {
-        log8.info("completion context", {
+        log9.info("completion context", {
           context
-        }, {
-          F: __dxlog_file12,
-          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;
@@ -5635,7 +5780,7 @@ import { syntaxTree as syntaxTree9 } from "@codemirror/language";
 import { StateField as StateField10 } from "@codemirror/state";
 import { Facet as Facet2 } from "@codemirror/state";
 import { invariant as invariant5 } from "@dxos/invariant";
-var __dxlog_file13 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/outliner/tree.ts";
+var __dxlog_file14 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/outliner/tree.ts";
 var itemToJSON = ({ type, index, level, lineRange, contentRange, children }) => {
   return {
     type,
@@ -5789,15 +5934,7 @@ var outlinerTree = (_options = {}) => {
             break;
           }
           case "BulletList": {
-            invariant5(current, void 0, {
-              F: __dxlog_file13,
-              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;
@@ -5806,15 +5943,7 @@ var outlinerTree = (_options = {}) => {
             break;
           }
           case "ListItem": {
-            invariant5(parent, void 0, {
-              F: __dxlog_file13,
-              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,
@@ -5848,42 +5977,18 @@ var outlinerTree = (_options = {}) => {
             break;
           }
           case "ListMark": {
-            invariant5(current, void 0, {
-              F: __dxlog_file13,
-              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_file13,
-              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_file13,
-              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;
           }
@@ -5891,29 +5996,13 @@ var outlinerTree = (_options = {}) => {
       },
       leave: (node) => {
         if (node.name === "BulletList") {
-          invariant5(parent, void 0, {
-            F: __dxlog_file13,
-            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_file13,
-      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 [
@@ -6198,17 +6287,17 @@ var commands = () => keymap11.of([
 
 // src/extensions/outliner/outliner.ts
 import { Prec as Prec5 } from "@codemirror/state";
-import { Decoration as Decoration12, EditorView as EditorView25, ViewPlugin as ViewPlugin17 } from "@codemirror/view";
-import { mx as mx7 } from "@dxos/ui-theme";
+import { Decoration as Decoration12, EditorView as EditorView26, ViewPlugin as ViewPlugin18 } from "@codemirror/view";
+import { mx as mx6 } from "@dxos/ui-theme";
 
 // src/extensions/outliner/editor.ts
 import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin15 } from "@codemirror/view";
-import { log as log9 } from "@dxos/log";
-var __dxlog_file14 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/outliner/editor.ts";
+import { ViewPlugin as ViewPlugin16 } from "@codemirror/view";
+import { log as log10 } from "@dxos/log";
+var __dxlog_file15 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/outliner/editor.ts";
 var LIST_ITEM_REGEX = /^\s*- (\[ \]|\[x\])? /;
 var initialize = () => {
-  return ViewPlugin15.fromClass(class {
+  return ViewPlugin16.fromClass(class {
     constructor(view) {
       const first = view.state.doc.lineAt(0);
       const text = view.state.sliceDoc(first.from, first.to);
@@ -6337,7 +6426,7 @@ var editor = () => [
           cancel = true;
           return;
         }
-        log9("change", {
+        log10("change", {
           item,
           line: {
             from: line.from,
@@ -6355,35 +6444,20 @@ var editor = () => [
             text: insert.toString(),
             length: insert.length
           }
-        }, {
-          F: __dxlog_file14,
-          L: 164,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file15, L: 174, S: void 0 });
       }
     });
     if (changes.length > 0) {
-      log9("modified,", {
+      log10("modified,", {
         changes
-      }, {
-        F: __dxlog_file14,
-        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) {
-      log9("cancel", void 0, {
-        F: __dxlog_file14,
-        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;
@@ -6391,10 +6465,10 @@ var editor = () => [
 ];
 
 // src/extensions/outliner/menu.ts
-import { EditorView as EditorView24, ViewPlugin as ViewPlugin16 } from "@codemirror/view";
-import { addEventListener } from "@dxos/async";
+import { EditorView as EditorView25, ViewPlugin as ViewPlugin17 } from "@codemirror/view";
+import { addEventListener as addEventListener2 } from "@dxos/async";
 var menu = (options = {}) => [
-  ViewPlugin16.fromClass(class {
+  ViewPlugin17.fromClass(class {
     view;
     tag;
     rafId;
@@ -6414,7 +6488,7 @@ var menu = (options = {}) => [
       }
       container.appendChild(this.tag);
       const handler = () => this.scheduleUpdate();
-      this.cleanup = addEventListener(container, "scroll", handler);
+      this.cleanup = addEventListener2(container, "scroll", handler);
       this.scheduleUpdate();
     }
     destroy() {
@@ -6456,7 +6530,7 @@ var menu = (options = {}) => [
       this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
     }
   }),
-  EditorView24.theme({
+  EditorView25.theme({
     ".cm-popover-trigger": {
       position: "fixed",
       padding: "0",
@@ -6492,12 +6566,12 @@ var outliner = (_options = {}) => [
     listPaddingLeft: 8
   }),
   // Researve space for menu.
-  EditorView25.contentAttributes.of({
-    class: "is-full !mr-[3rem]"
+  EditorView26.contentAttributes.of({
+    class: "w-full !mr-[3rem]"
   })
 ];
 var decorations = () => [
-  ViewPlugin17.fromClass(class {
+  ViewPlugin18.fromClass(class {
     decorations = Decoration12.none;
     constructor(view) {
       this.updateDecorations(view.state, view);
@@ -6522,7 +6596,7 @@ var decorations = () => [
           const lineTo = doc.lineAt(item.contentRange.to);
           const isSelected = selection.includes(item.index) || item === current;
           decorations2.push(Decoration12.line({
-            class: mx7("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
+            class: mx6("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
           }).range(line.from, line.from));
         }
       }
@@ -6532,7 +6606,7 @@ var decorations = () => [
     decorations: (v) => v.decorations
   }),
   // Theme.
-  EditorView25.theme(Object.assign({
+  EditorView26.theme(Object.assign({
     ".cm-list-item": {
       borderLeftWidth: "1px",
       borderRightWidth: "1px",
@@ -6557,38 +6631,67 @@ var decorations = () => [
       marginBottom: "2px"
     },
     ".cm-list-item-focused": {
-      borderColor: "var(--dx-neutralFocusIndicator)"
+      borderColor: "var(--color-neutral-focus-indicator)"
     },
     "&:focus-within .cm-list-item-selected": {
-      borderColor: "var(--dx-separator)"
+      borderColor: "var(--color-separator)"
     }
   }))
 ];
 
 // src/extensions/preview/preview.ts
 import { syntaxTree as syntaxTree10 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField11 } from "@codemirror/state";
-import { Decoration as Decoration13, EditorView as EditorView26, WidgetType as WidgetType8 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder6, StateEffect as StateEffect9, StateField as StateField11 } from "@codemirror/state";
+import { Decoration as Decoration13, EditorView as EditorView27, ViewPlugin as ViewPlugin19, WidgetType as WidgetType8 } from "@codemirror/view";
+import { DXN, Entity } from "@dxos/echo";
+var labelResolvedEffect = StateEffect9.define();
 var preview = (options = {}) => {
+  const viewRef = {
+    current: void 0
+  };
   return [
     // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
     // "Block decorations may not be specified via plugins".
     StateField11.define({
-      create: (state) => buildDecorations3(state, options),
+      create: (state) => buildDecorations3(state, options, viewRef),
       update: (decorations2, tr) => {
-        if (tr.docChanged) {
-          return buildDecorations3(tr.state, options);
+        if (tr.docChanged || tr.effects.some((effect) => effect.is(labelResolvedEffect))) {
+          return buildDecorations3(tr.state, options, viewRef);
         }
         return decorations2.map(tr.changes);
       },
       provide: (field) => [
-        EditorView26.decorations.from(field),
-        EditorView26.atomicRanges.of((view) => view.state.field(field))
+        EditorView27.decorations.from(field),
+        EditorView27.atomicRanges.of((view) => view.state.field(field))
       ]
+    }),
+    ViewPlugin19.define((view) => {
+      viewRef.current = view;
+      return {
+        destroy() {
+          viewRef.current = void 0;
+        }
+      };
     })
   ];
 };
-var buildDecorations3 = (state, options) => {
+var resolveLabel = (db, dxnStr, viewRef) => {
+  const dxn = DXN.tryParse(dxnStr);
+  if (!dxn) {
+    return;
+  }
+  const ref = db.makeRef(dxn);
+  const target = ref.target;
+  if (target) {
+    return Entity.getLabel(target);
+  }
+  void ref.tryLoad().then(() => {
+    viewRef.current?.dispatch({
+      effects: labelResolvedEffect.of(void 0)
+    });
+  });
+};
+var buildDecorations3 = (state, options, viewRef) => {
   const builder = new RangeSetBuilder6();
   syntaxTree10(state).iterate({
     enter: (node) => {
@@ -6600,8 +6703,13 @@ var buildDecorations3 = (state, options) => {
         case "Link": {
           const link = getLinkRef(state, node.node);
           if (link) {
+            const resolved = options.db ? resolveLabel(options.db, link.dxn, viewRef) : void 0;
+            const displayLink = resolved ? {
+              ...link,
+              label: resolved
+            } : link;
             builder.add(node.from, node.to, Decoration13.replace({
-              widget: new PreviewInlineWidget(options, link),
+              widget: new PreviewInlineWidget(options, displayLink),
               side: 1
             }));
           }
@@ -6632,13 +6740,13 @@ var getLinkRef = (state, node) => {
   const mark = node.getChildren("LinkMark");
   const urlNode = node.getChild("URL");
   if (mark && urlNode) {
-    const url = state.sliceDoc(urlNode.from, urlNode.to);
-    if (url.startsWith("dxn:")) {
+    const dxn = state.sliceDoc(urlNode.from, urlNode.to);
+    if (dxn.startsWith("dxn:")) {
       const label = state.sliceDoc(mark[0].to, mark[1].from);
       return {
         block: state.sliceDoc(mark[0].from, mark[0].from + 1) === "!",
         label,
-        ref: url
+        dxn
       };
     }
   }
@@ -6653,13 +6761,13 @@ var PreviewInlineWidget = class extends WidgetType8 {
   //   return false;
   // }
   eq(other) {
-    return this._link.ref === other._link.ref && this._link.label === other._link.label;
+    return this._link.dxn === other._link.dxn && this._link.label === other._link.label;
   }
   toDOM(_view) {
     const root = document.createElement("dx-anchor");
     root.classList.add("dx-tag--anchor");
     root.textContent = this._link.label;
-    root.setAttribute("refId", this._link.ref);
+    root.setAttribute("dxn", this._link.dxn);
     return root;
   }
 };
@@ -6673,11 +6781,11 @@ var PreviewBlockWidget = class extends WidgetType8 {
   //   return true;
   // }
   eq(other) {
-    return this._link.ref === other._link.ref;
+    return this._link.dxn === other._link.dxn;
   }
   toDOM(_view) {
     const root = document.createElement("div");
-    root.classList.add("cm-preview-block", "density-fine");
+    root.classList.add("cm-preview-block", "dx-density-fine");
     this._options.addBlockContainer?.({
       link: this._link,
       el: root
@@ -6693,7 +6801,7 @@ var PreviewBlockWidget = class extends WidgetType8 {
 };
 
 // src/extensions/replacer.ts
-import { EditorView as EditorView27 } from "@codemirror/view";
+import { EditorView as EditorView28 } from "@codemirror/view";
 var defaultReplacements = [
   {
     input: "--",
@@ -6756,7 +6864,7 @@ var replacer = ({ replacements = defaultReplacements } = {}) => {
   const sortedReplacements = [
     ...replacements
   ].sort((a, b) => b.input.length - a.input.length);
-  return EditorView27.inputHandler.of((view, from, to, insert) => {
+  return EditorView28.inputHandler.of((view, from, to, insert) => {
     if (insert.length !== 1) {
       return false;
     }
@@ -6790,12 +6898,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,
@@ -6840,6 +7005,7 @@ var submit = ({ fireIfEmpty = false, onSubmit } = {}) => {
 // src/extensions/tags/extended-markdown.ts
 import { xmlLanguage } from "@codemirror/lang-xml";
 import { parseMixed } from "@lezer/common";
+var escapeRegExpSource = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 var extendedMarkdown = ({ registry } = {}) => {
   return [
     createMarkdownExtensions({
@@ -6851,13 +7017,65 @@ var extendedMarkdown = ({ registry } = {}) => {
             {
               name: "SetextHeading",
               parse: () => false
-            }
+            },
+            // Custom XML block parser that keeps registered tags as a single HTMLBlock
+            // even when their content contains blank lines.
+            ...xmlBlockParsers(registry)
           ]
         }
       ]
     })
   ];
 };
+var xmlBlockParsers = (registry) => {
+  const customTags = Object.keys(registry ?? {});
+  if (customTags.length === 0) {
+    return [];
+  }
+  const tagPattern = customTags.map(escapeRegExpSource).join("|");
+  const selfClosePattern = new RegExp(`^\\s*<(${tagPattern})(\\s[^>]*)?\\/>\\s*$`);
+  const openPattern = new RegExp(`^\\s*<(${tagPattern})(\\s[^>]*)?\\/?>`);
+  return [
+    {
+      name: "XMLBlock",
+      before: "HTMLBlock",
+      parse: (cx, line) => {
+        const match = openPattern.exec(line.text);
+        if (!match) {
+          return false;
+        }
+        if (selfClosePattern.test(line.text)) {
+          const end2 = cx.lineStart + line.text.length;
+          cx.addElement(cx.elt("HTMLBlock", cx.lineStart, end2));
+          cx.nextLine();
+          return true;
+        }
+        if (match[0].trimEnd().endsWith("/>")) {
+          return false;
+        }
+        const tagName = match[1];
+        const closeTag = `</${tagName}>`;
+        const start = cx.lineStart;
+        if (line.text.includes(closeTag)) {
+          cx.addElement(cx.elt("HTMLBlock", start, start + line.text.length));
+          cx.nextLine();
+          return true;
+        }
+        let end = cx.lineStart + line.text.length;
+        while (cx.nextLine()) {
+          end = cx.lineStart + line.text.length;
+          if (line.text.includes(closeTag)) {
+            cx.addElement(cx.elt("HTMLBlock", start, end));
+            cx.nextLine();
+            return true;
+          }
+        }
+        cx.addElement(cx.elt("HTMLBlock", start, end));
+        return true;
+      }
+    }
+  ];
+};
 var mixedParser = (registry) => {
   const customTags = Object.keys(registry ?? {});
   const tagPattern = new RegExp(`<(${customTags.join("|")})`);
@@ -6891,219 +7109,793 @@ var mixedParser = (registry) => {
   });
 };
 
-// src/extensions/tags/streamer.ts
-import { StateEffect as StateEffect9, StateField as StateField12 } from "@codemirror/state";
-import { Decoration as Decoration14, EditorView as EditorView28, ViewPlugin as ViewPlugin18, WidgetType as WidgetType9 } from "@codemirror/view";
-import { Domino as Domino3 } from "@dxos/ui";
-import { isTruthy as isTruthy4 } from "@dxos/util";
-var BLINK_RATE = 2e3;
-var streamer = (options = {}) => {
+// src/extensions/tags/fader.ts
+import { StateEffect as StateEffect10, StateField as StateField12 } from "@codemirror/state";
+import { Decoration as Decoration14, EditorView as EditorView29, ViewPlugin as ViewPlugin20 } from "@codemirror/view";
+var DEFAULT_REMOVAL_DELAY = 5e3;
+var DEFAULT_COALESCE_WINDOW = 100;
+var CLEANUP_INTERVAL = 1e3;
+var fader = (options = {}) => {
+  const removalDelay = DEFAULT_REMOVAL_DELAY;
+  const coalesceWindow = options.coalesce ?? DEFAULT_COALESCE_WINDOW;
+  let lastCount = -1;
+  const log12 = (expiries) => {
+    if (expiries.length !== lastCount) {
+      lastCount = expiries.length;
+    }
+  };
+  const dequeue = StateEffect10.define();
+  const fadeField = StateField12.define({
+    create: () => ({
+      decorations: Decoration14.none,
+      expiries: [],
+      batchStart: 0
+    }),
+    update: ({ decorations: decorations2, expiries, batchStart }, tr) => {
+      for (const effect of tr.effects) {
+        if (effect.is(dequeue)) {
+          const now2 = effect.value;
+          let removeCount = 0;
+          while (removeCount < expiries.length && expiries[removeCount] <= now2) {
+            removeCount++;
+          }
+          if (removeCount > 0) {
+            expiries = expiries.slice(removeCount);
+            let skipped = 0;
+            decorations2 = decorations2.update({
+              filter: () => {
+                if (skipped < removeCount) {
+                  skipped++;
+                  return false;
+                }
+                return true;
+              }
+            });
+          }
+        }
+      }
+      if (!tr.docChanged) {
+        log12(expiries);
+        return {
+          decorations: decorations2,
+          expiries,
+          batchStart
+        };
+      }
+      let isReset = tr.state.doc.length === 0;
+      if (!isReset && tr.startState.doc.length > 0) {
+        tr.changes.iterChanges((fromA, toA) => {
+          if (fromA === 0 && toA === tr.startState.doc.length) {
+            isReset = true;
+          }
+        });
+      }
+      if (isReset) {
+        log12([]);
+        return {
+          decorations: Decoration14.none,
+          expiries: [],
+          batchStart: 0
+        };
+      }
+      const now = Date.now();
+      const add = [];
+      tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
+        if (toA === tr.startState.doc.length && inserted.length > 0) {
+          add.push({
+            from: fromB,
+            to: toB
+          });
+        }
+      });
+      if (add.length > 0) {
+        const canCoalesce = expiries.length > 0 && batchStart > 0 && now - batchStart < coalesceWindow;
+        if (canCoalesce) {
+          let lastFrom = -1;
+          let lastTo = -1;
+          decorations2.between(0, tr.state.doc.length, (from, to) => {
+            lastFrom = from;
+            lastTo = to;
+          });
+          if (lastFrom >= 0) {
+            decorations2 = decorations2.update({
+              filter: (from, to) => !(from === lastFrom && to === lastTo)
+            });
+            const mergedFrom = Math.min(lastFrom, add[0].from);
+            const mergedTo = add[add.length - 1].to;
+            decorations2 = decorations2.update({
+              add: [
+                Decoration14.mark({
+                  class: "cm-fader"
+                }).range(mergedFrom, mergedTo)
+              ]
+            });
+            expiries = [
+              ...expiries.slice(0, -1),
+              now + removalDelay
+            ];
+          }
+        } else {
+          batchStart = now;
+          expiries = [
+            ...expiries,
+            now + removalDelay
+          ];
+          decorations2 = decorations2.update({
+            add: add.map(({ from, to }) => Decoration14.mark({
+              class: "cm-fader"
+            }).range(from, to))
+          });
+        }
+      }
+      log12(expiries);
+      return {
+        decorations: decorations2,
+        expiries,
+        batchStart
+      };
+    },
+    provide: (f) => EditorView29.decorations.from(f, (value) => value.decorations)
+  });
+  const cleanup = ViewPlugin20.fromClass(class {
+    view;
+    #timer;
+    constructor(view) {
+      this.view = view;
+      this.#schedule();
+    }
+    update() {
+      this.#schedule();
+    }
+    #schedule() {
+      const { expiries } = this.view.state.field(fadeField);
+      if (expiries.length === 0) {
+        clearTimeout(this.#timer);
+        this.#timer = void 0;
+        return;
+      }
+      if (this.#timer !== void 0) {
+        return;
+      }
+      const delay = Math.max(CLEANUP_INTERVAL, expiries[0] - Date.now());
+      this.#timer = setTimeout(() => {
+        this.#timer = void 0;
+        this.view.dispatch({
+          effects: dequeue.of(Date.now())
+        });
+      }, delay);
+    }
+    destroy() {
+      clearTimeout(this.#timer);
+    }
+  });
   return [
-    options.cursor && cursor(),
-    options.fadeIn && fadeIn(typeof options.fadeIn === "object" ? options.fadeIn : {})
-  ].filter(isTruthy4);
-};
-var cursor = () => {
-  const hideCursor = StateEffect9.define();
-  const showCursor = StateField12.define({
-    create: () => true,
+    fadeField,
+    cleanup,
+    EditorView29.theme({
+      ".cm-fader": {
+        animation: "fader 1s ease-out forwards"
+      },
+      "@keyframes fader": {
+        "0%": {
+          textShadow: "0 0 16px rgba(100, 200, 255, 1), 0 0 32px rgba(100, 200, 255, 0.6)"
+        },
+        "100%": {}
+      }
+    })
+  ];
+};
+
+// 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 typewriterBypass = Annotation3.define();
+var typewriterDrainingEffect = StateEffect11.define();
+var CURSOR_LINGER = 3e3;
+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, head, insertAt } = value;
       for (const effect of tr.effects) {
-        if (effect.is(hideCursor)) {
-          return false;
+        if (effect.is(suppressAppend)) {
+          if (text.length === head) {
+            insertAt = effect.value.from;
+          }
+          text += effect.value.text;
+        }
+        if (effect.is(insertChunk)) {
+          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) {
-        return true;
+        let isReset = tr.state.doc.length === 0;
+        if (!isReset && tr.startState.doc.length > 0) {
+          tr.changes.iterChanges((fromA, toA) => {
+            if (fromA === 0 && toA === tr.startState.doc.length) {
+              isReset = true;
+            }
+          });
+        }
+        if (isReset) {
+          return {
+            text: "",
+            head: 0,
+            insertAt: 0
+          };
+        }
+        if (!tr.effects.some((effect) => effect.is(insertChunk))) {
+          insertAt = tr.changes.mapPos(Math.min(insertAt, tr.startState.doc.length));
+        }
       }
-      return value;
+      return {
+        text,
+        head,
+        insertAt
+      };
     }
   });
-  const timerPlugin = ViewPlugin18.fromClass(class {
+  const filter = EditorState3.transactionFilter.of((tr) => {
+    if (!tr.docChanged) {
+      return tr;
+    }
+    if (tr.annotation(typewriterBypass) || tr.effects.some((effect) => effect.is(insertChunk))) {
+      return tr;
+    }
+    let appendedText = "";
+    let appendFrom = -1;
+    let isAppendOnly = true;
+    tr.changes.iterChanges((fromA, toA, _fromB, _toB, inserted) => {
+      if (toA === tr.startState.doc.length && fromA === toA && inserted.length > 0) {
+        appendedText += inserted.sliceString(0);
+        if (appendFrom === -1) {
+          appendFrom = fromA;
+        }
+      } else {
+        isAppendOnly = false;
+      }
+    });
+    if (!isAppendOnly || appendedText.length === 0) {
+      return tr;
+    }
+    return {
+      changes: ChangeSet2.empty(tr.startState.doc.length),
+      effects: suppressAppend.of({
+        from: appendFrom,
+        text: appendedText
+      })
+    };
+  });
+  const drainPlugin = ViewPlugin21.fromClass(class {
     view;
-    timer;
+    _raf;
+    _activeStreamTag = null;
     constructor(view) {
       this.view = view;
     }
     update(update2) {
-      if (update2.docChanged) {
-        clearTimeout(this.timer);
-        this.timer = setTimeout(() => {
-          this.view.dispatch({
-            effects: hideCursor.of(null)
-          });
-        }, BLINK_RATE);
+      const { text, head } = update2.state.field(bufferField);
+      const pending = text.length - head;
+      if (pending === 0) {
+        this._activeStreamTag = null;
+      }
+      if (pending > 0 && this._raf === void 0) {
+        this._start();
       }
     }
+    _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) {
+          break;
+        }
+        if (charsEmitted > 0 && charsEmitted + result.count > charsPerFrame) {
+          break;
+        }
+        if (result.enterTag) {
+          activeTag = result.enterTag;
+        }
+        if (result.exitTag) {
+          activeTag = null;
+        }
+        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,
+            insert: chunk
+          },
+          effects: insertChunk.of({
+            from: insertAt,
+            text: chunk
+          })
+        });
+      }
+      this._raf = requestAnimationFrame(this._tick);
+    };
     destroy() {
-      clearTimeout(this.timer);
+      if (this._raf !== void 0) {
+        cancelAnimationFrame(this._raf);
+      }
     }
   });
-  const cursorDecoration = StateField12.define({
-    create: () => Decoration14.none,
-    update: (_decorations, tr) => {
-      const show = tr.state.field(showCursor);
-      if (!show) {
-        return Decoration14.none;
+  return [
+    bufferField,
+    filter,
+    drainPlugin,
+    options.cursor && typewriterCursor(bufferField)
+  ].filter(Boolean);
+};
+var typewriterCursor = (bufferField) => {
+  const hideCursor = StateEffect11.define();
+  const visibilityField = StateField13.define({
+    create: () => ({
+      visible: false,
+      insertAt: 0,
+      lastNonWsAt: 0
+    }),
+    update: (value, tr) => {
+      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) => {
+            const chunk = inserted.sliceString(0);
+            if (chunk.trim().length > 0) {
+              lastNonWsAt = _fromB + chunk.length;
+            }
+          });
+        }
+        return {
+          visible: true,
+          insertAt,
+          lastNonWsAt
+        };
+      }
+      for (const effect of tr.effects) {
+        if (effect.is(hideCursor)) {
+          return {
+            ...value,
+            visible: false
+          };
+        }
       }
-      const endPos = tr.state.doc.length;
-      return Decoration14.set([
-        Decoration14.widget({
+      return value;
+    }
+  });
+  const decorationField = StateField13.define({
+    create: () => Decoration15.none,
+    update: (_decorations, tr) => {
+      const { visible, insertAt, lastNonWsAt } = tr.state.field(visibilityField);
+      if (!visible) {
+        return Decoration15.none;
+      }
+      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({
           widget: new CursorWidget(),
           side: 1
-        }).range(endPos)
+        }).range(pos)
       ]);
     },
-    provide: (f) => EditorView28.decorations.from(f)
+    provide: (field) => EditorView30.decorations.from(field)
+  });
+  const timerPlugin = ViewPlugin21.fromClass(class {
+    view;
+    _timer;
+    constructor(view) {
+      this.view = view;
+    }
+    update(update2) {
+      const { text, head } = update2.state.field(bufferField);
+      const { visible } = update2.state.field(visibilityField);
+      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;
+        }, CURSOR_LINGER);
+      }
+    }
+    destroy() {
+      clearTimeout(this._timer);
+    }
   });
   return [
-    showCursor,
-    timerPlugin,
-    cursorDecoration
+    visibilityField,
+    decorationField,
+    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("\u258F").style({
-      animation: "blink 2s infinite"
+    const inner = Domino3.of("span").text("\u2217").style({
+      animation: "blink 1s infinite",
+      animationDelay: "250ms"
     });
     return Domino3.of("span").style({
       opacity: "0.8"
-    }).children(inner).root;
+    }).append(inner).root;
   }
 };
-var fadeIn = (options = {}) => {
-  const FADE_IN_DURATION = 1e3;
-  const DEFAULT_REMOVAL_DELAY = 5e3;
-  const removalDelay = options.removalDelay ?? DEFAULT_REMOVAL_DELAY;
-  const removeDecoration = StateEffect9.define();
-  const fadeField = StateField12.define({
-    create: () => Decoration14.none,
-    update: (decorations2, tr) => {
-      let next = decorations2;
-      for (const effect of tr.effects) {
-        if (effect.is(removeDecoration)) {
-          const target = effect.value;
-          next = next.update({
-            filter: (from, to) => !(from === target.from && to === target.to)
-          });
-        }
-      }
-      if (!tr.docChanged) {
-        return next;
+var OPENING_TAG_NAME = /^<([a-zA-Z][\w-]*)/;
+var TAG_NAME_PROBE = 64;
+var escapeRegExpSource2 = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+var flushable = (buffer, start, streamingTags, activeStreamTag) => {
+  if (start >= buffer.length) {
+    return {
+      count: 0
+    };
+  }
+  if (activeStreamTag) {
+    const closeTag = `</${activeStreamTag}>`;
+    if (buffer.startsWith(closeTag, start)) {
+      return {
+        count: closeTag.length,
+        exitTag: true
+      };
+    }
+    if (buffer[start] === "<") {
+      return {
+        count: xmlElementLength(buffer, start)
+      };
+    }
+    return {
+      count: 1
+    };
+  }
+  const ch = buffer[start];
+  if (ch === "<") {
+    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(">", start);
+      if (close === -1) {
+        return {
+          count: 0
+        };
       }
-      let isReset = tr.state.doc.length === 0;
-      if (!isReset) {
-        tr.changes.iterChanges((fromA, toA) => {
-          if (fromA === 0 && toA === tr.startState.doc.length) {
-            isReset = true;
-          }
-        });
+      if (buffer[close - 1] === "/") {
+        return {
+          count: close + 1 - start
+        };
       }
-      if (isReset) {
-        return Decoration14.none;
+      return {
+        count: close + 1 - start,
+        enterTag: nameMatch[1]
+      };
+    }
+    return {
+      count: xmlElementLength(buffer, start)
+    };
+  }
+  if (ch === "!" && buffer.length > start + 1 && buffer[start + 1] === "[") {
+    return {
+      count: linkLength(buffer, start, start + 1)
+    };
+  }
+  if (ch === "[") {
+    return {
+      count: linkLength(buffer, start, start)
+    };
+  }
+  return {
+    count: 1
+  };
+};
+var xmlElementLength = (buffer, start = 0) => {
+  const close = buffer.indexOf(">", start);
+  if (close === -1) {
+    return 0;
+  }
+  if (buffer[close - 1] === "/") {
+    return close + 1 - start;
+  }
+  if (buffer[start + 1] === "/") {
+    return close + 1 - start;
+  }
+  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 - start;
+      }
+    } else if (isClosing) {
+      depth--;
+      if (depth === 0) {
+        return match.index + match[0].length - start;
       }
-      const add = [];
-      tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
-        if (fromB === 0 && toB === inserted.length) {
+    } else {
+      depth++;
+    }
+  }
+  return 0;
+};
+var linkLength = (buffer, start, bracketAt) => {
+  const bracketClose = buffer.indexOf("]", bracketAt + 1);
+  if (bracketClose === -1) {
+    return 0;
+  }
+  if (bracketClose + 1 >= buffer.length) {
+    return 0;
+  }
+  if (buffer[bracketClose + 1] !== "(") {
+    return 1;
+  }
+  const parenClose = buffer.indexOf(")", bracketClose + 2);
+  if (parenClose === -1) {
+    return 0;
+  }
+  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;
         }
-        if (toA === tr.startState.doc.length && inserted.length > 0) {
-          add.push(Decoration14.mark({
-            class: "cm-fade-in"
-          }).range(fromB, toB));
+        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;
         }
-      });
-      return next.update({
-        add
-      });
-    },
-    provide: (f) => EditorView28.decorations.from(f)
-  });
-  const timerPlugin = ViewPlugin18.fromClass(class {
-    view;
-    // Map a simple key "from-to" to timer id.
-    _timers = /* @__PURE__ */ new Map();
+        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.view = view;
+      this.decorations = buildDecorations5(view);
     }
     update(update2) {
-      if (!update2.docChanged) {
-        return;
+      if (update2.docChanged) {
+        this.decorations = buildDecorations5(update2.view);
       }
-      update2.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
-        if (toA !== update2.startState.doc.length || inserted.length === 0) {
+    }
+  }, {
+    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;
         }
-        const key = `${fromB}-${toB}`;
-        if (this._timers.has(key)) {
-          clearTimeout(this._timers.get(key));
+        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));
+          }
         }
-        const totalDelay = FADE_IN_DURATION + removalDelay;
-        const id = setTimeout(() => {
-          this.view.dispatch({
-            effects: removeDecoration.of({
-              from: fromB,
-              to: toB
-            })
-          });
-          this._timers.delete(key);
-        }, totalDelay);
-        this._timers.set(key, id);
-      });
-    }
-    destroy() {
-      for (const id of this._timers.values()) {
-        clearTimeout(id);
       }
-      this._timers.clear();
-    }
-  });
+    });
+    return Decoration17.set(ranges, true);
+  };
   return [
-    fadeField,
-    timerPlugin,
-    EditorView28.theme({
-      ".cm-line > span": {
-        opacity: "0.8"
-      },
-      ".cm-fade-in": {
-        animation: "fade-in 3s ease-out forwards"
-      },
-      "@keyframes fade-in": {
-        "0%": {
-          opacity: "0"
-        },
-        "80%": {
-          opacity: "1"
-        },
-        "100%": {
-          opacity: "0.8"
+    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-active-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 StateEffect10, StateField as StateField13 } from "@codemirror/state";
-import { Decoration as Decoration15, EditorView as EditorView29, ViewPlugin as ViewPlugin19, WidgetType as WidgetType10, keymap as keymap13 } from "@codemirror/view";
+import { Prec as Prec7, RangeSetBuilder as RangeSetBuilder7, StateEffect as StateEffect12, StateField as StateField14 } from "@codemirror/state";
+import { Decoration as Decoration18, EditorView as EditorView32, ViewPlugin as ViewPlugin24, WidgetType as WidgetType10, keymap as keymap14 } from "@codemirror/view";
 import { invariant as invariant7 } from "@dxos/invariant";
-import { log as log10 } from "@dxos/log";
+import { log as log11 } from "@dxos/log";
+import { Domino as Domino4 } from "@dxos/ui";
 
 // src/extensions/tags/xml-util.ts
 import { invariant as invariant6 } from "@dxos/invariant";
-var __dxlog_file15 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/tags/xml-util.ts";
+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_file15,
-    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");
@@ -7135,13 +7927,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) {
@@ -7151,26 +7953,63 @@ 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_file16 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/tags/xml-tags.ts";
-var navigatePreviousEffect = StateEffect10.define();
-var navigateNextEffect = StateEffect10.define();
+var __dxlog_file17 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/tags/xml-tags.ts";
+var navigatePreviousEffect = StateEffect12.define();
+var navigateNextEffect = StateEffect12.define();
 var getXmlTextChild = (children) => {
   const child = children?.[0];
   return typeof child === "string" ? child : null;
 };
-var xmlTagContextEffect = StateEffect10.define();
-var xmlTagResetEffect = StateEffect10.define();
-var xmlTagUpdateEffect = StateEffect10.define();
-var widgetContextStateField = StateField13.define({
+var xmlWidgetId = (explicit, fallback) => typeof explicit === "string" && explicit.length > 0 ? explicit : fallback;
+var escapeRegExpSource3 = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+var xmlTagContextEffect = StateEffect12.define();
+var xmlTagResetEffect = StateEffect12.define();
+var xmlTagUpdateEffect = StateEffect12.define();
+var widgetContextStateField = StateField14.define({
   create: () => void 0,
   update: (value, tr) => {
     for (const effect of tr.effects) {
@@ -7181,7 +8020,7 @@ var widgetContextStateField = StateField13.define({
     return value;
   }
 });
-var widgetStateMapStateField = StateField13.define({
+var widgetStateMapStateField = StateField14.define({
   create: () => ({}),
   update: (map, tr) => {
     for (const effect of tr.effects) {
@@ -7190,15 +8029,10 @@ var widgetStateMapStateField = StateField13.define({
       }
       if (effect.is(xmlTagUpdateEffect)) {
         const { id, value } = effect.value;
-        log10("widget updated", {
+        log11("widget updated", {
           id,
           value
-        }, {
-          F: __dxlog_file16,
-          L: 153,
-          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,
@@ -7225,15 +8059,10 @@ var createWidgetMap = (setWidgets) => {
   const widgets = /* @__PURE__ */ new Map();
   const notifier = {
     mounted: (state) => {
-      log10("widget mounted", {
+      log11("widget mounted", {
         id: state.id,
         tag: state.props._tag
-      }, {
-        F: __dxlog_file16,
-        L: 206,
-        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()
@@ -7241,15 +8070,10 @@ var createWidgetMap = (setWidgets) => {
     },
     unmounted: (id) => {
       const state = widgets.get(id);
-      log10("widget unmounted", {
+      log11("widget unmounted", {
         id,
         tag: state?.props._tag
-      }, {
-        F: __dxlog_file16,
-        L: 212,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file17, L: 112, S: void 0 });
       widgets.delete(id);
       setWidgets?.([
         ...widgets.values()
@@ -7258,7 +8082,7 @@ var createWidgetMap = (setWidgets) => {
   };
   return notifier;
 };
-var keyHandlers = keymap13.of([
+var keyHandlers = keymap14.of([
   {
     key: "Mod-ArrowUp",
     run: (view) => {
@@ -7279,7 +8103,7 @@ var keyHandlers = keymap13.of([
   }
 ]);
 var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
-  return EditorView29.updateListener.of((update2) => {
+  return EditorView32.updateListener.of((update2) => {
     update2.transactions.forEach((transaction) => {
       for (const effect of transaction.effects) {
         if (effect.is(navigatePreviousEffect)) {
@@ -7307,11 +8131,9 @@ var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
               anchor: line.from,
               head: line.from
             },
-            effects: scrollToLineEffect.of({
-              line: line.number,
-              options: {
-                offset: -16
-              }
+            effects: scrollerLineEffect.of({
+              line: line.number - 1,
+              offset: -16
             })
           });
           continue;
@@ -7342,11 +8164,9 @@ var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
                 anchor: line.to,
                 head: line.to
               },
-              effects: scrollToLineEffect.of({
-                line: line.number,
-                options: {
-                  offset: -16
-                }
+              effects: scrollerLineEffect.of({
+                line: line.number - 1,
+                offset: -16
               })
             });
           } else {
@@ -7356,11 +8176,9 @@ var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
                 anchor: line.to,
                 head: line.to
               },
-              effects: scrollToLineEffect.of({
-                line: line.number,
-                options: {
-                  position: "end"
-                }
+              effects: scrollerLineEffect.of({
+                line: line.number - 1,
+                position: "end"
               })
             });
           }
@@ -7370,7 +8188,7 @@ var createNavigationEffectPlugin = (widgetDecorationsField, bookmarks2) => {
     });
   });
 };
-var createWidgetUpdatePlugin = (widgetDecorationsField, notifier) => ViewPlugin19.fromClass(class {
+var createWidgetUpdatePlugin = (widgetDecorationsField, notifier) => ViewPlugin24.fromClass(class {
   update(update2) {
     const widgetStateMap = update2.state.field(widgetStateMapStateField);
     const { decorations: decorations2 } = update2.state.field(widgetDecorationsField);
@@ -7397,19 +8215,25 @@ var createWidgetUpdatePlugin = (widgetDecorationsField, notifier) => ViewPlugin1
     }
   }
 });
-var createWidgetDecorationsField = (registry = {}, notifier) => StateField13.define({
+var createWidgetDecorationsField = (registry = {}, notifier) => StateField14.define({
   create: (state) => {
     return buildDecorations4(state, {
       from: 0,
       to: state.doc.length
     }, registry, notifier);
   },
-  update: ({ from, decorations: decorations2 }, tr) => {
+  update: ({ from, streamingFrom, decorations: decorations2 }, tr) => {
     for (const effect of tr.effects) {
       if (effect.is(xmlTagResetEffect)) {
+        if (tr.docChanged) {
+          return buildDecorations4(tr.state, {
+            from: 0,
+            to: tr.state.doc.length
+          }, registry, notifier);
+        }
         return {
           from: 0,
-          decorations: Decoration15.none
+          decorations: Decoration18.none
         };
       }
     }
@@ -7417,27 +8241,26 @@ var createWidgetDecorationsField = (registry = {}, notifier) => StateField13.def
       const { state } = tr;
       const reset = tr.changes.touchesRange(0, from);
       if (reset) {
-        log10("document reset", {
+        log11("document reset", {
           from,
           to: state.doc.length
-        }, {
-          F: __dxlog_file16,
-          L: 371,
-          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
         }, registry, notifier);
       } else {
+        const rebuildFrom = streamingFrom ?? from;
         const result = buildDecorations4(state, {
-          from,
+          from: rebuildFrom,
           to: state.doc.length
         }, registry, notifier);
         return {
           from: result.from,
+          streamingFrom: result.streamingFrom,
           decorations: decorations2.update({
+            // Remove old streaming decorations — they are rebuilt each tick.
+            filter: (_f, _t, deco) => !deco.spec.streaming,
             add: decorationSetToArray(result.decorations)
           })
         };
@@ -7445,12 +8268,13 @@ var createWidgetDecorationsField = (registry = {}, notifier) => StateField13.def
     }
     return {
       from,
+      streamingFrom,
       decorations: decorations2
     };
   },
   provide: (field) => [
-    EditorView29.decorations.from(field, (v) => v.decorations),
-    EditorView29.atomicRanges.of((view) => view.state.field(field).decorations || Decoration15.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) => {
@@ -7461,10 +8285,11 @@ var buildDecorations4 = (state, range, registry, notifier) => {
   if (!tree || tree.type.name === "Program" && tree.length === 0) {
     return {
       from: range.from,
-      decorations: Decoration15.none
+      decorations: Decoration18.none
     };
   }
   let last = range.from;
+  let streamingFrom;
   tree.iterate({
     from: range.from,
     to: range.to,
@@ -7477,21 +8302,26 @@ var buildDecorations4 = (state, range, registry, notifier) => {
             if (args) {
               const def = registry[args._tag];
               if (def) {
+                if (def.streaming && !node.node.getChild("CloseTag")) {
+                  return false;
+                }
                 const { block, factory, Component } = def;
-                const widgetState = args.id ? widgetStateMap[args.id] : void 0;
                 const nodeRange = {
                   from: node.node.from,
                   to: node.node.to
                 };
+                const widgetId = xmlWidgetId(args.id, def.streaming ? `cm-xml-${nodeRange.from}` : `cm-xml-${nodeRange.from}-${nodeRange.to}`);
+                const widgetState = widgetStateMap[widgetId];
                 const props = {
-                  context,
+                  id: widgetId,
                   range: nodeRange,
+                  context,
                   ...args,
                   ...widgetState
                 };
-                const widget = factory ? factory(props) : Component ? args.id && new PlaceholderWidget2(args.id, Component, props, notifier) : void 0;
+                const widget = factory ? factory(props) ?? void 0 : Component ? new PlaceholderWidget2(widgetId, Component, props, notifier) : void 0;
                 if (widget) {
-                  builder.add(nodeRange.from, nodeRange.to, Decoration15.replace({
+                  builder.add(nodeRange.from, nodeRange.to, Decoration18.replace({
                     widget,
                     block,
                     atomic: true,
@@ -7503,20 +8333,72 @@ var buildDecorations4 = (state, range, registry, notifier) => {
               }
             }
           } catch (err) {
-            log10.catch(err, void 0, {
-              F: __dxlog_file16,
-              L: 456,
-              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;
         }
       }
     }
   });
+  const streamingTagNames = Object.entries(registry).filter(([, def]) => def.streaming).map(([name]) => name).sort((a, b) => b.length - a.length);
+  if (streamingTagNames.length > 0) {
+    const tailText = state.sliceDoc(range.from, range.to);
+    const streamingPattern = streamingTagNames.map(escapeRegExpSource3).join("|");
+    const tagPattern = new RegExp(`<(${streamingPattern})(\\s[^>]*)?>`, "g");
+    let match;
+    while ((match = tagPattern.exec(tailText)) !== null) {
+      const tagName = match[1];
+      const closeTag = `</${tagName}>`;
+      const afterOpen = match.index + match[0].length;
+      if (tailText.indexOf(closeTag, afterOpen) === -1) {
+        const absoluteFrom = range.from + match.index;
+        const contentFrom = range.from + afterOpen;
+        const innerText = state.sliceDoc(contentFrom, range.to).trim();
+        const def = registry[tagName];
+        const props = {
+          _tag: tagName,
+          context,
+          range: {
+            from: absoluteFrom,
+            to: range.to
+          },
+          children: innerText ? [
+            innerText
+          ] : void 0
+        };
+        const attrPattern = /(\w+)="([^"]*)"/g;
+        let attrMatch;
+        while ((attrMatch = attrPattern.exec(match[0])) !== null) {
+          props[attrMatch[1]] = attrMatch[2];
+        }
+        const widgetId = xmlWidgetId(props.id, `cm-xml-${absoluteFrom}`);
+        const widgetState = widgetStateMap[widgetId];
+        const mergedProps = {
+          ...props,
+          id: widgetId,
+          ...widgetState
+        };
+        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, Decoration18.replace({
+            widget,
+            block: def.block,
+            atomic: true,
+            inclusive: true,
+            tag: tagName,
+            streaming: true,
+            contentFrom
+          }));
+          streamingFrom = absoluteFrom;
+          last = absoluteFrom;
+        }
+        break;
+      }
+    }
+  }
   return {
     from: last,
+    streamingFrom,
     decorations: builder.finish()
   };
 };
@@ -7525,108 +8407,62 @@ var PlaceholderWidget2 = class extends WidgetType10 {
   Component;
   props;
   notifier;
-  _root = null;
-  constructor(id, Component, props, notifier) {
-    super(), this.id = id, this.Component = Component, this.props = props, this.notifier = notifier;
-    invariant7(id, void 0, {
-      F: __dxlog_file16,
-      L: 482,
-      S: this,
-      A: [
-        "id",
-        ""
-      ]
-    });
+  streaming;
+  #root = null;
+  #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, { "~LogMeta": "~LogMeta", F: __dxlog_file17, L: 488, S: this, A: ["id", ""] });
   }
   get root() {
-    return this._root;
+    return this.#root;
   }
   eq(other) {
+    if (this.streaming) {
+      return false;
+    }
     return this.id === other.id;
   }
   ignoreEvent() {
     return true;
   }
-  toDOM(_view) {
-    this._root = document.createElement("span");
+  toDOM(view) {
+    this.#view = view;
+    this.#root = Domino4.of("div").classNames("min-h-[24px]").root;
+    const props = Object.assign({}, this.props, {
+      view
+    });
     this.notifier.mounted({
       id: this.id,
-      root: this._root,
-      props: this.props,
+      root: this.#root,
+      props,
       Component: this.Component
     });
-    return this._root;
+    return this.#root;
+  }
+  updateDOM(dom) {
+    this.#root = dom;
+    const props = Object.assign({}, this.props, {
+      view: this.#view
+    });
+    this.notifier.mounted({
+      id: this.id,
+      root: this.#root,
+      props,
+      Component: this.Component
+    });
+    return true;
   }
   destroy(_dom) {
     this.notifier.unmounted(this.id);
-    this._root = null;
+    this.#root = null;
+    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,
-  EditorState3 as EditorState,
-  EditorView30 as EditorView,
-  EditorViewMode,
-  EditorViewModes,
+  EditorState4 as EditorState,
+  EditorView33 as EditorView,
   Inline,
   InputModeExtensions,
   List,
@@ -7643,6 +8479,7 @@ export {
   addStyle,
   annotations,
   autoScroll,
+  autoScrollEffect,
   autocomplete,
   automerge,
   awareness,
@@ -7656,9 +8493,11 @@ export {
   commentClickedEffect,
   comments,
   commentsState,
+  compactSlots,
   convertTreeToJson,
   createBasicExtensions,
   createComment,
+  createCrawler,
   createDataExtensions,
   createEditorStateStore,
   createEditorStateTransaction,
@@ -7678,12 +8517,12 @@ export {
   defaultThemeSlots,
   deleteItem,
   documentId,
+  documentSlots,
   dropFile,
+  editorClassNames,
   editorInputMode,
-  editorSlots,
-  editorWidth,
-  editorWithToolbarLayout,
   extendedMarkdown,
+  fader,
   filterChars,
   flattenRect,
   focus,
@@ -7719,6 +8558,7 @@ export {
   markdownTagsExtensions,
   matchCompletion,
   mention,
+  mobileSlots,
   modalStateEffect,
   modalStateField,
   moveItemDown,
@@ -7738,10 +8578,12 @@ export {
   removeList,
   removeStyle,
   replacer,
+  scrollPastEnd,
   scrollThreadIntoView,
-  scrollToBottomEffect,
   scrollToLine,
-  scrollToLineEffect,
+  scroller,
+  scrollerCrawlEffect,
+  scrollerLineEffect,
   selectionState,
   setBlockquote,
   setComments,
@@ -7749,10 +8591,8 @@ export {
   setSelection,
   setStyle,
   singleValueFacet,
-  smoothScroll,
-  stackItemContentEditorClassNames,
+  snippets2 as snippets,
   staticCompletion,
-  streamer,
   submit,
   tabbable,
   table,
@@ -7771,7 +8611,12 @@ export {
   treeFacet,
   typeahead,
   typewriter,
+  typewriterBypass,
+  typewriterDrainingEffect,
   wrapWithCatch,
+  xmlBlockDecoration,
+  xmlElementLength,
+  xmlFormatting,
   xmlTagContextEffect,
   xmlTagResetEffect,
   xmlTagUpdateEffect,