@dxos/ui-editor 0.8.4-main.2244d791bb → 0.8.4-main.4a85c3132b

package/dist/lib/browser/index.mjs

@@ -13,17 +13,17 @@ 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 editorWidth = "!mx-auto w-full max-w-[min(50rem,100%-4rem)]";
 var editorSlots = {
   scroll: {
-    className: "pbs-2"
+    className: "pt-2"
   },
   content: {
     className: editorWidth
   }
 };
 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");
+var stackItemContentEditorClassNames = (role) => mx("dx-attention-surface p-0.5 dx-focus-ring-inset data-[toolbar=disabled]:pt-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-h-24" : "dx-container overflow-hidden");
 
 // src/extensions/annotations.ts
 import { RangeSetBuilder } from "@codemirror/state";
@@ -58,7 +58,7 @@ var annotations = ({ match } = {}) => {
       ".cm-annotation": {
         textDecoration: "underline",
         textDecorationStyle: "wavy",
-        textDecorationColor: "var(--dx-errorText)"
+        textDecorationColor: "var(--color-error-text)"
       }
     })
   ];
@@ -503,155 +503,179 @@ var typeahead = ({ onComplete } = {}) => {
 
 // src/extensions/auto-scroll.ts
 import { EditorView as EditorView5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
-import { addEventListener, combine } from "@dxos/async";
+import { addEventListener, combine, throttle } from "@dxos/async";
 import { Domino } from "@dxos/ui";
 
-// src/extensions/smooth-scroll.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 scroller = this.view.scrollDOM;
-      const doc = this.view.state.doc;
-      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 (lineNumber === -1) {
-        this.animateScroll(scroller, scroller.scrollHeight - scroller.clientHeight);
-        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));
+        }
       }
-      setTimeout(() => {
-        element.scrollTo({
+      requestAnimationFrame(() => {
+        this.view.scrollDOM.scrollTo({
           top: targetScrollTop,
-          behavior: "smooth"
+          behavior
         });
-      }, 100);
+      });
     }
   });
   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, {
+            F: __dxlog_file2,
+            L: 145,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
         }
       });
+    }),
+    // Styles.
+    EditorView4.theme({
+      ".cm-content": {
+        paddingBottom: `${overScroll}px`
+      },
+      ".cm-scroller": {
+        overflowAnchor: "none",
+        paddingBottom: "0"
+      },
+      ".cm-scroller.cm-hide-scrollbar::-webkit-scrollbar": {
+        display: "none"
+      },
+      ".cm-scroller::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        transition: "background 0.15s"
+      },
+      "&:hover .cm-scroller::-webkit-scrollbar-thumb": {
+        background: "var(--color-scrollbar-thumb)"
+      },
+      ".cm-scroll-button": {
+        position: "absolute",
+        bottom: "0.5rem",
+        right: "1rem"
+      }
     })
   ];
 };
-var scrollToLine = (view, line, options) => {
-  view.dispatch({
-    effects: scrollToLineEffect.of({
-      line,
-      options
-    })
-  });
-};
+function createCrawler(view, k = 0.3, maxStep = 2, targetDelta = 0.5) {
+  const el = view.scrollDOM;
+  let currentTop = 0;
+  let rafId = null;
+  function frame() {
+    const targetTop = el.scrollHeight - el.clientHeight;
+    const delta = targetTop - currentTop;
+    const absDelta = Math.abs(delta);
+    if (absDelta < targetDelta) {
+      el.scrollTop = targetTop;
+      currentTop = targetTop;
+      rafId = null;
+      return;
+    }
+    const step = Math.sign(delta) * Math.min(absDelta, Math.max(1, Math.min(absDelta * k, maxStep)));
+    currentTop += step;
+    el.scrollTop = currentTop;
+    rafId = requestAnimationFrame(frame);
+  }
+  return {
+    scroll: () => {
+      if (rafId === null) {
+        currentTop = el.scrollTop;
+        rafId = requestAnimationFrame(frame);
+      }
+    },
+    cancel: () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+    }
+  };
+}
 
 // src/extensions/auto-scroll.ts
-var autoScroll = ({ pinned = true, threshold = 100, throttleDelay = 500, onAutoScroll } = {}) => {
+var autoScroll = (_ = {}) => {
   let buttonContainer;
-  let isPinned = pinned;
-  const setPinned = (pinned2) => {
-    buttonContainer?.classList.toggle("opacity-0", pinned2);
-    isPinned = pinned2;
+  let isPinned = true;
+  const setPinned = (pinned) => {
+    buttonContainer?.classList.toggle("opacity-0", pinned);
+    isPinned = pinned;
   };
-  const scrollToBottom = (view, behavior) => {
-    setPinned(true);
-    view.dispatch({
-      effects: scrollToLineEffect.of({
-        line: -1,
-        options: {
-          position: "end",
-          behavior
-        }
-      })
-    });
-  };
-  const triggerUpdate = intervalUntilQuiet((view) => {
-    if (isPinned) {
-      scrollToBottom(view);
-    }
-  }, throttleDelay);
   return [
     // Update listener for logging when scrolling is needed.
     EditorView5.updateListener.of(({ view, heightChanged, state }) => {
       if (heightChanged) {
         if (isPinned) {
-          const coords = view.coordsAtPos(view.state.doc.length);
-          const scrollerRect = view.scrollDOM.getBoundingClientRect();
-          const distanceFromBottom = coords ? scrollerRect.bottom - coords.bottom : 0;
-          if (distanceFromBottom < threshold) {
-            const shouldScroll = onAutoScroll?.({
-              view,
-              distanceFromBottom
-            }) ?? true;
-            if (shouldScroll) {
-              triggerUpdate(view);
-            }
-          } else if (distanceFromBottom < 0) {
+          const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+          const delta = scrollHeight - scrollTop - clientHeight;
+          if (delta > 0 && scrollTop > 0) {
+            setPinned(true);
+            view.dispatch({
+              effects: scrollerCrawlEffect.of(true)
+            });
+          } else if (delta < 0) {
             setPinned(false);
           }
         } else {
@@ -665,13 +689,19 @@ var autoScroll = ({ pinned = true, threshold = 100, throttleDelay = 500, onAutoS
     ViewPlugin6.fromClass(class {
       cleanup;
       constructor(view) {
-        this.cleanup = createUserScrollDetector(view.scrollDOM, () => {
+        this.cleanup = createUserScrollDetector(view.scrollDOM, throttle(() => {
           requestAnimationFrame(() => {
             const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
-            const atBottom = scrollHeight - scrollTop - clientHeight < threshold;
-            setPinned(atBottom);
+            const delta = scrollHeight - scrollTop - clientHeight;
+            const pinned = delta === 0;
+            setPinned(pinned);
+            if (!pinned) {
+              view.dispatch({
+                effects: scrollerCrawlEffect.of(false)
+              });
+            }
           });
-        });
+        }, 500));
       }
       destroy() {
         this.cleanup();
@@ -683,38 +713,21 @@ var autoScroll = ({ pinned = true, threshold = 100, throttleDelay = 500, onAutoS
         const icon = Domino.of("dx-icon").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);
+          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;
         view.scrollDOM.parentElement.appendChild(buttonContainer);
       }
-    }),
-    // Styles.
-    EditorView5.theme({
-      ".cm-content": {
-        paddingBottom: `${threshold}px`
-      },
-      ".cm-scroller": {
-        paddingBottom: "0"
-      },
-      ".cm-scroller.cm-hide-scrollbar::-webkit-scrollbar": {
-        display: "none"
-      },
-      ".cm-scroller::-webkit-scrollbar-thumb": {
-        background: "transparent",
-        transition: "background 0.15s"
-      },
-      "&:hover .cm-scroller::-webkit-scrollbar-thumb": {
-        background: "var(--dx-scrollbarThumb)"
-      },
-      ".cm-scroll-button": {
-        position: "absolute",
-        bottom: "0.5rem",
-        right: "1rem"
-      }
     })
   ];
 };
@@ -727,28 +740,6 @@ function createUserScrollDetector(element, onUserScroll) {
     }
   }));
 }
-function intervalUntilQuiet(fn, interval) {
-  let timer = null;
-  let quietTimer = null;
-  let latestArgs;
-  return (...args) => {
-    latestArgs = args;
-    if (quietTimer) {
-      clearTimeout(quietTimer);
-    }
-    quietTimer = setTimeout(() => {
-      if (timer) {
-        clearInterval(timer);
-        timer = null;
-      }
-      quietTimer = null;
-    }, interval);
-    if (!timer) {
-      fn(...latestArgs);
-      timer = setInterval(() => fn(...latestArgs), interval);
-    }
-  };
-}
 
 // src/extensions/automerge/automerge.ts
 import { next as A3 } from "@automerge/automerge";
@@ -762,15 +753,15 @@ 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,
+      log3.catch(err, void 0, {
+        F: __dxlog_file3,
         L: 15,
         S: void 0,
         C: (f, a) => f(...a)
@@ -782,8 +773,8 @@ var cursorConverter = (accessor) => ({
     try {
       return fromCursor(accessor, cursor2);
     } catch (err) {
-      log2.catch(err, void 0, {
-        F: __dxlog_file2,
+      log3.catch(err, void 0, {
+        F: __dxlog_file3,
         L: 24,
         S: void 0,
         C: (f, a) => f(...a)
@@ -808,7 +799,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";
@@ -949,7 +940,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;
@@ -972,8 +963,8 @@ var Syncer = class {
     this._pending = false;
   }
   onEditorChange(view) {
-    log3("onEditorChange", void 0, {
-      F: __dxlog_file3,
+    log4("onEditorChange", void 0, {
+      F: __dxlog_file4,
       L: 45,
       S: this,
       C: (f, a) => f(...a)
@@ -988,8 +979,8 @@ var Syncer = class {
     }
   }
   onAutomergeChange(view) {
-    log3("onAutomergeChange", void 0, {
-      F: __dxlog_file3,
+    log4("onAutomergeChange", void 0, {
+      F: __dxlog_file4,
       L: 60,
       S: this,
       C: (f, a) => f(...a)
@@ -1082,7 +1073,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: () => {
@@ -1106,7 +1097,7 @@ var awareness = (provider = dummyProvider) => {
 };
 var RemoteSelectionsDecorator = class {
   _ctx = new Context(void 0, {
-    F: __dxlog_file4,
+    F: __dxlog_file5,
     L: 80
   });
   _cursorConverter;
@@ -1319,8 +1310,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();
@@ -1340,7 +1331,7 @@ var SpaceAwarenessProvider = class {
   }
   open() {
     this._ctx = new Context2(void 0, {
-      F: __dxlog_file5,
+      F: __dxlog_file6,
       L: 57
     });
     this._postTask = new DeferredTask(this._ctx, async () => {
@@ -1367,10 +1358,10 @@ 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,
+        F: __dxlog_file6,
         L: 91,
         S: this,
         C: (f, a) => f(...a)
@@ -1387,7 +1378,7 @@ var SpaceAwarenessProvider = class {
   }
   update(position) {
     invariant(this._postTask, void 0, {
-      F: __dxlog_file5,
+      F: __dxlog_file6,
       L: 106,
       S: this,
       A: [
@@ -1404,7 +1395,7 @@ var SpaceAwarenessProvider = class {
   }
   _handleQueryMessage() {
     invariant(this._postTask, void 0, {
-      F: __dxlog_file5,
+      F: __dxlog_file6,
       L: 117,
       S: this,
       A: [
@@ -1416,7 +1407,7 @@ var SpaceAwarenessProvider = class {
   }
   _handlePostMessage(message) {
     invariant(message.kind === "post", void 0, {
-      F: __dxlog_file5,
+      F: __dxlog_file6,
       L: 122,
       S: this,
       A: [
@@ -1432,9 +1423,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,
@@ -1553,7 +1544,7 @@ var Blaster = class {
   }
   initialize() {
     invariant2(!this._canvas && !this._ctx, void 0, {
-      F: __dxlog_file6,
+      F: __dxlog_file7,
       L: 142,
       S: this,
       A: [
@@ -1590,7 +1581,7 @@ var Blaster = class {
   }
   start() {
     invariant2(this._canvas && this._ctx, void 0, {
-      F: __dxlog_file6,
+      F: __dxlog_file7,
       L: 181,
       S: this,
       A: [
@@ -1624,11 +1615,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;
@@ -1802,11 +1793,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",
@@ -1814,7 +1805,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",
@@ -1822,7 +1813,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",
@@ -1834,8 +1825,8 @@ var blocks = () => [
 // src/extensions/bookmarks.ts
 import { Prec as Prec3, StateEffect as StateEffect3, 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 = StateEffect3.define();
 var removeBookmark = StateEffect3.define();
 var clearBookmarks = StateEffect3.define();
@@ -1847,8 +1838,8 @@ var bookmarks = () => {
         key: "Mod-ArrowUp",
         run: (view) => {
           const bookmarks2 = view.state.field(bookmarksField);
-          log5("up", bookmarks2, {
-            F: __dxlog_file7,
+          log6("up", bookmarks2, {
+            F: __dxlog_file8,
             L: 29,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1860,8 +1851,8 @@ var bookmarks = () => {
         key: "Mod-ArrowDown",
         run: (view) => {
           const bookmarks2 = view.state.field(bookmarksField);
-          log5("down", bookmarks2, {
-            F: __dxlog_file7,
+          log6("down", bookmarks2, {
+            F: __dxlog_file8,
             L: 37,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1906,7 +1897,7 @@ import { StateEffect as StateEffect4, StateField as StateField3 } from "@codemir
 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 debounce2 } from "@dxos/async";
-import { log as log6 } from "@dxos/log";
+import { log as log7 } from "@dxos/log";
 import { isNonNullable } from "@dxos/util";
 
 // src/extensions/selection.ts
@@ -1915,7 +1906,7 @@ import { EditorView as EditorView10, keymap as keymap5 } from "@codemirror/view"
 import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isTruthy } from "@dxos/util";
-var __dxlog_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 createEditorStateTransaction = ({ scrollTo, selection }) => {
@@ -1931,7 +1922,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
 var createEditorStateStore = (keyPrefix) => ({
   getState: (id) => {
     invariant3(id, void 0, {
-      F: __dxlog_file8,
+      F: __dxlog_file9,
       L: 47,
       S: void 0,
       A: [
@@ -1944,7 +1935,7 @@ var createEditorStateStore = (keyPrefix) => ({
   },
   setState: (id, state) => {
     invariant3(id, void 0, {
-      F: __dxlog_file8,
+      F: __dxlog_file9,
       L: 53,
       S: void 0,
       A: [
@@ -2003,7 +1994,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 = StateEffect4.define();
 var setSelection = StateEffect4.define();
 var setCommentState = StateEffect4.define();
@@ -2048,14 +2039,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"
   }
 });
@@ -2073,8 +2064,8 @@ 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,
+      log7.warn("Invalid range:", range, {
+        F: __dxlog_file10,
         L: 140,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2418,9 +2409,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),
@@ -2455,8 +2446,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": {
@@ -2474,42 +2465,58 @@ import { EditorView as EditorView15, ViewPlugin as ViewPlugin11, drawSelection,
 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-4xl",
+    fontSize: "var(--text-4xl)",
+    lineHeight: "var(--text-4xl--line-height)"
+  },
+  2: {
+    className: "text-3xl",
+    fontSize: "var(--text-3xl)",
+    lineHeight: "var(--text-3xl--line-height)"
+  },
+  3: {
+    className: "text-2xl",
+    fontSize: "var(--text-2xl)",
+    lineHeight: "var(--text-2xl--line-height)"
+  },
+  4: {
+    className: "text-xl",
+    fontSize: "var(--text-xl)",
+    lineHeight: "var(--text-xl--line-height)"
+  },
+  5: {
+    className: "text-lg",
+    fontSize: "var(--text-lg)",
+    lineHeight: "var(--text-lg--line-height)"
+  },
+  6: {
+    className: "text-base",
+    fontSize: "var(--text-base)",
+    lineHeight: "var(--text-base--line-height)"
+  }
 };
 var markdownTheme = {
-  code: "font-mono !no-underline text-neutral-700 dark:text-neutral-300",
-  codeMark: "font-mono text-primary-500",
+  code: "font-mono no-underline! text-cm-code",
+  codeMark: "font-mono text-cm-code-mark",
   mark: "opacity-50",
-  heading: (level) => {
-    return mx3(headings[level], "dark:text-neutral-400");
-  }
+  heading: (level) => ({
+    className: mx3(headings[level].className, "font-light text-cm-heading"),
+    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 fontBody = "Inter Variable, ui-sans-serif, system-ui, sans-serif";
+var fontMono = "JetBrains Mono Variable, ui-monospace, Cascadia Code, Source Code Pro, monospace";
 var baseTheme = EditorView13.baseTheme({
   /**
   * Outer frame.
@@ -2521,7 +2528,9 @@ var baseTheme = EditorView13.baseTheme({
   /**
   * Scroller
   */
-  ".cm-scroller": {},
+  ".cm-scroller": {
+    overflowAnchor: "none"
+  },
   ".cm-scroller::-webkit-scrollbar": {
     width: "8px"
   },
@@ -2531,7 +2540,7 @@ var baseTheme = EditorView13.baseTheme({
     transition: "background 0.15s"
   },
   "&:hover .cm-scroller::-webkit-scrollbar-thumb": {
-    background: "var(--dx-scrollbarThumb)"
+    background: "var(--color-scrollbar-thumb)"
   },
   /**
   * Content
@@ -2553,8 +2562,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"
@@ -2574,25 +2583,25 @@ var baseTheme = EditorView13.baseTheme({
     paddingInline: 0
   },
   ".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.
@@ -2602,8 +2611,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"
@@ -2614,20 +2623,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
@@ -2635,7 +2653,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": {
@@ -2645,12 +2663,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.
@@ -2659,17 +2677,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"
   },
   /**
@@ -2693,7 +2711,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",
@@ -2701,10 +2719,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",
@@ -2717,26 +2735,26 @@ 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": {
-      // TODO(burdon): Replace with layer and @apply bg-accentSurfaceHover
-      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"
   }
 });
@@ -2785,7 +2803,7 @@ var focus = [
 ];
 
 // src/extensions/factories.ts
-var __dxlog_file10 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/factories.ts";
+var __dxlog_file11 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/factories.ts";
 var tabbable = EditorView15.contentAttributes.of({
   tabindex: "0"
 });
@@ -2840,9 +2858,9 @@ var createBasicExtensions = (propsProp) => {
   return [
     // NOTE: Doesn't catch errors in keymap functions.
     EditorView15.exceptionSink.of((err) => {
-      log7.catch(err, void 0, {
-        F: __dxlog_file10,
-        L: 132,
+      log8.catch(err, void 0, {
+        F: __dxlog_file11,
+        L: 131,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2894,12 +2912,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;
@@ -2942,8 +2960,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())
       }
     })));
@@ -2962,7 +2980,7 @@ var folding = () => {
     }),
     foldGutter({
       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").children(Domino2.of("svg", Domino2.SVG).classNames(mx4("w-4 h-4 cursor-pointer", open && "rotate-90")).children(Domino2.of("use", Domino2.SVG).attributes({
           href: Domino2.icon("ph--caret-right--regular")
         }))).root;
       }
@@ -4258,6 +4276,11 @@ import { markdownLanguage } from "@codemirror/lang-markdown";
 import { HighlightStyle as HighlightStyle2 } from "@codemirror/language";
 import { Tag, styleTags, tags } from "@lezer/highlight";
 import { Table } from "@lezer/markdown";
+var styles4 = {
+  code: "font-mono no-underline! text-cm-code",
+  codeMark: "font-mono text-cm-code-mark",
+  mark: "opacity-50"
+};
 var markdownTags = {
   Blockquote: Tag.define(),
   CodeMark: Tag.define(),
@@ -4339,7 +4362,7 @@ var markdownHighlightStyle = (_options = {}) => {
         markdownTags.LinkReference,
         markdownTags.ListMark
       ],
-      class: markdownTheme.mark
+      class: styles4.mark
     },
     // Markdown marks.
     {
@@ -4350,7 +4373,7 @@ var markdownHighlightStyle = (_options = {}) => {
         markdownTags.QuoteMark,
         markdownTags.EmphasisMark
       ],
-      class: markdownTheme.mark
+      class: styles4.mark
     },
     // E.g., code block language (after ```).
     {
@@ -4359,7 +4382,7 @@ var markdownHighlightStyle = (_options = {}) => {
         tags.function(tags.variableName),
         tags.labelName
       ],
-      class: markdownTheme.codeMark
+      class: styles4.codeMark
     },
     // Fonts.
     {
@@ -4369,30 +4392,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.
     {
@@ -4417,7 +4448,7 @@ var markdownHighlightStyle = (_options = {}) => {
         markdownTags.CodeText,
         markdownTags.InlineCode
       ],
-      class: markdownTheme.code
+      class: styles4.code
     },
     {
       tag: [
@@ -4774,7 +4805,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
   },
   /**
@@ -4797,8 +4828,8 @@ 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"
   },
@@ -4809,7 +4840,7 @@ var formattingStyles = EditorView21.theme({
     fontFamily: fontMono
   },
   "& .cm-codeblock-line": {
-    background: "var(--dx-cmCodeblock)",
+    background: "var(--color-cm-codeblock)",
     paddingInline: "1rem !important"
   },
   "& .cm-codeblock-start": {
@@ -4843,8 +4874,8 @@ var formattingStyles = EditorView21.theme({
   ".cm-table-head": {
     padding: "2px 16px 2px 0px",
     textAlign: "left",
-    borderBottom: "1px solid var(--dx-cmSeparator)",
-    color: "var(--dx-subdued)"
+    borderBottom: "1px solid var(--color-cm-separator)",
+    color: "var(--color-subdued)"
   },
   ".cm-table-cell": {
     padding: "2px 16px 2px 0px"
@@ -4984,7 +5015,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",
@@ -5007,7 +5038,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, {
@@ -5120,8 +5150,8 @@ var buildDecorations2 = (view, options, focus2) => {
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
     invariant4(level > 0, void 0, {
-      F: __dxlog_file11,
-      L: 180,
+      F: __dxlog_file12,
+      L: 179,
       S: void 0,
       A: [
         "level > 0",
@@ -5159,8 +5189,8 @@ var buildDecorations2 = (view, options, focus2) => {
   };
   const getCurrentListLevel = () => {
     invariant4(listLevels.length, void 0, {
-      F: __dxlog_file11,
-      L: 202,
+      F: __dxlog_file12,
+      L: 201,
       S: void 0,
       A: [
         "listLevels.length",
@@ -5210,7 +5240,7 @@ var buildDecorations2 = (view, options, focus2) => {
                 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)
                 })
               });
             }
@@ -5549,8 +5579,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({});
@@ -5566,16 +5595,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.
@@ -5587,10 +5613,10 @@ var mention = ({ debug, onSearch }) => {
     icons: false,
     override: [
       (context) => {
-        log8.info("completion context", {
+        log9.info("completion context", {
           context
         }, {
-          F: __dxlog_file12,
+          F: __dxlog_file13,
           L: 27,
           S: void 0,
           C: (f, a) => f(...a)
@@ -5673,7 +5699,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,
@@ -5828,7 +5854,7 @@ var outlinerTree = (_options = {}) => {
           }
           case "BulletList": {
             invariant5(current, void 0, {
-              F: __dxlog_file13,
+              F: __dxlog_file14,
               L: 219,
               S: void 0,
               A: [
@@ -5845,7 +5871,7 @@ var outlinerTree = (_options = {}) => {
           }
           case "ListItem": {
             invariant5(parent, void 0, {
-              F: __dxlog_file13,
+              F: __dxlog_file14,
               L: 228,
               S: void 0,
               A: [
@@ -5887,7 +5913,7 @@ var outlinerTree = (_options = {}) => {
           }
           case "ListMark": {
             invariant5(current, void 0, {
-              F: __dxlog_file13,
+              F: __dxlog_file14,
               L: 272,
               S: void 0,
               A: [
@@ -5901,7 +5927,7 @@ var outlinerTree = (_options = {}) => {
           }
           case "Task": {
             invariant5(current, void 0, {
-              F: __dxlog_file13,
+              F: __dxlog_file14,
               L: 278,
               S: void 0,
               A: [
@@ -5914,7 +5940,7 @@ var outlinerTree = (_options = {}) => {
           }
           case "TaskMarker": {
             invariant5(current, void 0, {
-              F: __dxlog_file13,
+              F: __dxlog_file14,
               L: 283,
               S: void 0,
               A: [
@@ -5930,7 +5956,7 @@ var outlinerTree = (_options = {}) => {
       leave: (node) => {
         if (node.name === "BulletList") {
           invariant5(parent, void 0, {
-            F: __dxlog_file13,
+            F: __dxlog_file14,
             L: 291,
             S: void 0,
             A: [
@@ -5944,7 +5970,7 @@ var outlinerTree = (_options = {}) => {
       }
     });
     invariant5(tree, void 0, {
-      F: __dxlog_file13,
+      F: __dxlog_file14,
       L: 298,
       S: void 0,
       A: [
@@ -6242,8 +6268,8 @@ import { mx as mx7 } from "@dxos/ui-theme";
 // src/extensions/outliner/editor.ts
 import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
 import { ViewPlugin as 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 { 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 {
@@ -6375,7 +6401,7 @@ var editor = () => [
           cancel = true;
           return;
         }
-        log9("change", {
+        log10("change", {
           item,
           line: {
             from: line.from,
@@ -6394,7 +6420,7 @@ var editor = () => [
             length: insert.length
           }
         }, {
-          F: __dxlog_file14,
+          F: __dxlog_file15,
           L: 164,
           S: void 0,
           C: (f, a) => f(...a)
@@ -6402,10 +6428,10 @@ var editor = () => [
       }
     });
     if (changes.length > 0) {
-      log9("modified,", {
+      log10("modified,", {
         changes
       }, {
-        F: __dxlog_file14,
+        F: __dxlog_file15,
         L: 175,
         S: void 0,
         C: (f, a) => f(...a)
@@ -6416,8 +6442,8 @@ var editor = () => [
         }
       ];
     } else if (cancel) {
-      log9("cancel", void 0, {
-        F: __dxlog_file14,
+      log10("cancel", void 0, {
+        F: __dxlog_file15,
         L: 178,
         S: void 0,
         C: (f, a) => f(...a)
@@ -6531,7 +6557,7 @@ var outliner = (_options = {}) => [
   }),
   // Researve space for menu.
   EditorView25.contentAttributes.of({
-    class: "is-full !mr-[3rem]"
+    class: "w-full !mr-[3rem]"
   })
 ];
 var decorations = () => [
@@ -6595,10 +6621,10 @@ 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)"
     }
   }))
 ];
@@ -6715,7 +6741,7 @@ var PreviewBlockWidget = class extends WidgetType8 {
   }
   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
@@ -7012,7 +7038,7 @@ var CursorWidget = class extends WidgetType9 {
 };
 var fadeIn = (options = {}) => {
   const FADE_IN_DURATION = 1e3;
-  const DEFAULT_REMOVAL_DELAY = 5e3;
+  const DEFAULT_REMOVAL_DELAY = 3e3;
   const removalDelay = options.removalDelay ?? DEFAULT_REMOVAL_DELAY;
   const removeDecoration = StateEffect8.define();
   const fadeField = StateField12.define({
@@ -7127,14 +7153,14 @@ import { syntaxTree as syntaxTree11 } from "@codemirror/language";
 import { Prec as Prec7, RangeSetBuilder as RangeSetBuilder7, StateEffect as StateEffect9, 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 { invariant as invariant7 } from "@dxos/invariant";
-import { log as log10 } from "@dxos/log";
+import { log as log11 } from "@dxos/log";
 
 // 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,
+    F: __dxlog_file16,
     L: 18,
     S: void 0,
     A: [
@@ -7198,7 +7224,7 @@ var nodeToJson = (state, node) => {
 };
 
 // src/extensions/tags/xml-tags.ts
-var __dxlog_file16 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/tags/xml-tags.ts";
+var __dxlog_file17 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/tags/xml-tags.ts";
 var navigatePreviousEffect = StateEffect9.define();
 var navigateNextEffect = StateEffect9.define();
 var getXmlTextChild = (children) => {
@@ -7228,11 +7254,11 @@ var widgetStateMapStateField = StateField13.define({
       }
       if (effect.is(xmlTagUpdateEffect)) {
         const { id, value } = effect.value;
-        log10("widget updated", {
+        log11("widget updated", {
           id,
           value
         }, {
-          F: __dxlog_file16,
+          F: __dxlog_file17,
           L: 153,
           S: void 0,
           C: (f, a) => f(...a)
@@ -7263,11 +7289,11 @@ 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,
+        F: __dxlog_file17,
         L: 206,
         S: void 0,
         C: (f, a) => f(...a)
@@ -7279,11 +7305,11 @@ var createWidgetMap = (setWidgets) => {
     },
     unmounted: (id) => {
       const state = widgets.get(id);
-      log10("widget unmounted", {
+      log11("widget unmounted", {
         id,
         tag: state?.props._tag
       }, {
-        F: __dxlog_file16,
+        F: __dxlog_file17,
         L: 212,
         S: void 0,
         C: (f, a) => f(...a)
@@ -7345,11 +7371,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;
@@ -7380,11 +7404,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 {
@@ -7394,11 +7416,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"
               })
             });
           }
@@ -7445,6 +7465,12 @@ var createWidgetDecorationsField = (registry = {}, notifier) => StateField13.def
   update: ({ from, 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
@@ -7455,12 +7481,12 @@ 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,
+          F: __dxlog_file17,
+          L: 374,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -7541,9 +7567,9 @@ var buildDecorations4 = (state, range, registry, notifier) => {
               }
             }
           } catch (err) {
-            log10.catch(err, void 0, {
-              F: __dxlog_file16,
-              L: 456,
+            log11.catch(err, void 0, {
+              F: __dxlog_file17,
+              L: 459,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -7567,8 +7593,8 @@ var PlaceholderWidget2 = class extends WidgetType10 {
   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,
+      F: __dxlog_file17,
+      L: 485,
       S: this,
       A: [
         "id",
@@ -7697,6 +7723,7 @@ export {
   convertTreeToJson,
   createBasicExtensions,
   createComment,
+  createCrawler,
   createDataExtensions,
   createEditorStateStore,
   createEditorStateTransaction,
@@ -7778,7 +7805,9 @@ export {
   replacer,
   scrollThreadIntoView,
   scrollToLine,
-  scrollToLineEffect,
+  scroller,
+  scrollerCrawlEffect,
+  scrollerLineEffect,
   selectionState,
   setBlockquote,
   setComments,
@@ -7786,7 +7815,6 @@ export {
   setSelection,
   setStyle,
   singleValueFacet,
-  smoothScroll,
   stackItemContentEditorClassNames,
   staticCompletion,
   streamer,