@dxos/react-ui-editor 0.3.11-main.0e40963 → 0.3.11-main.162de7b

package/dist/lib/browser/index.mjs

@@ -11,511 +11,288 @@ import { EditorView as EditorView12 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useState as useState2 } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
 import { generateName } from "@dxos/display-name";
 import { useThemeContext } from "@dxos/react-ui";
 import { getColorForValue, inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
 var autocomplete = ({ onSearch }) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
+    // TODO(burdon): Set custom keymap.
     keymap.of(completionKeymap),
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      // TODO(burdon): Set custom keymap.
-      // defaultKeymap: false,
+      defaultKeymap: false,
       // Don't start unless key press.
-      activateOnTyping: false,
-      // TODO(burdon): Option to create new page?
-      // TODO(burdon): Optional decoration via addToOptions
-      override: [
-        (context) => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || match.from === match.to && !context.explicit) {
-            return null;
-          }
-          return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase())
-          };
+      activateOnTyping: false
+    }),
+    // TODO(burdon): Option to create new page?
+    // TODO(burdon): Optional decoration via addToOptions
+    markdownLanguage.data.of({
+      autocomplete: (context) => {
+        const match = context.matchBefore(/\w*/);
+        if (!match || match.from === match.to && !context.explicit) {
+          return null;
         }
-      ]
+        return {
+          from: match.from,
+          options: onSearch(match.text.toLowerCase())
+        };
+      }
     })
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/basic.ts
-import { closeBrackets } from "@codemirror/autocomplete";
-import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { drawSelection, EditorView, placeholder } from "@codemirror/view";
-var basicBundle = ({ readonly, themeMode, placeholder: _placeholder }) => [
-  EditorView.lineWrapping,
-  // TODO(burdon): Compare with minimalSetup.
-  // https://codemirror.net/docs/ref/#codemirror.minimalSetup
-  bracketMatching(),
-  closeBrackets(),
-  drawSelection(),
-  _placeholder && placeholder(_placeholder),
-  // TODO(burdon): Is this required?
-  themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
-].filter(Boolean);
+// packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
+import { Facet as Facet2, StateField } from "@codemirror/state";
+import { ViewPlugin } from "@codemirror/view";
+import { next as A } from "@dxos/automerge/automerge";
 
-// packages/ui/react-ui-editor/src/extensions/blast.ts
-import { EditorView as EditorView2, keymap as keymap2 } from "@codemirror/view";
-import defaultsDeep from "lodash.defaultsdeep";
-import { invariant } from "@dxos/invariant";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
-var defaultOptions = {
-  effect: 2,
-  maxParticles: 200,
-  particleGravity: 0.08,
-  particleAlphaFadeout: 0.996,
-  particleSize: {
-    min: 2,
-    max: 8
-  },
-  particleNumRange: {
-    min: 5,
-    max: 10
-  },
-  particleVelocityRange: {
-    x: [
-      -1,
-      1
-    ],
-    y: [
-      -3.5,
-      -1.5
-    ]
+// packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
+import get from "lodash.get";
+import { next as automerge } from "@dxos/automerge/automerge";
+var cursorConverter = (handle, path) => ({
+  // TODO(burdon): Handle assoc to associate with a previous character.
+  toCursor: (pos) => {
+    const doc = handle.docSync();
+    if (!doc) {
+      return "";
+    }
+    const value = get(doc, path);
+    if (typeof value === "string" && value.length <= pos) {
+      return "end";
+    }
+    return automerge.getCursor(doc, path.slice(), pos);
   },
-  particleShrinkRate: 0.95,
-  shakeIntensity: 5
-};
-var blast = (options = defaultOptions) => {
-  let blaster;
-  let last = 0;
-  const getPoint = (view, pos) => {
-    const { left: x = 0, top: y = 0 } = view.coordsForChar(pos) ?? {};
-    const element = document.elementFromPoint(x, y);
-    const { offsetLeft: left = 0, offsetTop: top = 0 } = view.scrollDOM.parentElement ?? {};
-    const point = {
-      x: x - left,
-      y: y - top
-    };
-    return {
-      element,
-      point
-    };
-  };
-  return [
-    // Cursor moved.
-    EditorView2.updateListener.of((update4) => {
-      if (blaster?.node !== update4.view.scrollDOM) {
-        if (blaster) {
-          blaster.destroy();
-        }
-        blaster = new Blaster(update4.view.scrollDOM, defaultsDeep({
-          particleGravity: 0.2,
-          particleShrinkRate: 0.995,
-          color: () => [
-            100 + Math.random() * 100,
-            0,
-            0
-          ]
-        }, options, defaultOptions));
-        blaster.initialize();
-        blaster.start();
+  fromCursor: (cursor) => {
+    if (cursor === "") {
+      return 0;
+    }
+    const doc = handle.docSync();
+    if (!doc) {
+      return 0;
+    }
+    if (cursor === "end") {
+      const value = get(doc, path);
+      if (typeof value === "string") {
+        return value.length;
       } else {
-        blaster.resize();
-      }
-      const current = update4.state.selection.main.head;
-      if (current !== last) {
-        last = current;
-        const { element, point } = getPoint(update4.view, current - 1);
-        if (element && point) {
-          blaster.spawn({
-            element,
-            point
-          });
-        }
-      }
-    }),
-    keymap2.of([
-      {
-        any: (_, event) => {
-          if (blaster) {
-            if (event.key === "Enter" && event.shiftKey) {
-              blaster.shake({
-                time: 0.8
-              });
-              return true;
-            }
-          }
-          return false;
-        }
-      }
-    ])
-  ];
-};
-var Blaster = class {
-  constructor(_node, _options) {
-    this._node = _node;
-    this._options = _options;
-    this._running = false;
-    this._shakeTime = 0;
-    this._shakeTimeMax = 0;
-    this._particles = [];
-    this._particlePointer = 0;
-    this._lastPoint = {
-      x: 0,
-      y: 0
-    };
-    this.shake = throttle(({ time }) => {
-      this._shakeTime = this._shakeTimeMax || time;
-      this._shakeTimeMax = time;
-    }, 100);
-    this.spawn = throttle(({ element, point }) => {
-      const color = getRGBComponents(element, this._options.color);
-      const numParticles = random(this._options.particleNumRange.min, this._options.particleNumRange.max);
-      const dir = this._lastPoint.x === point.x ? 0 : this._lastPoint.x < point.x ? 1 : -1;
-      this._lastPoint = point;
-      for (let i = numParticles; i--; i > 0) {
-        this._particles[this._particlePointer] = this._effect.create(point.x - dir * 16, point.y, color);
-        this._particlePointer = (this._particlePointer + 1) % this._options.maxParticles;
+        return 0;
       }
-    }, 100);
-    this._effect = this._options.effect === 1 ? new Effect1(_options) : new Effect2(_options);
-  }
-  get node() {
-    return this._node;
-  }
-  initialize() {
-    invariant(!this._canvas && !this._ctx, void 0, {
-      F: __dxlog_file,
-      L: 138,
-      S: this,
-      A: [
-        "!this._canvas && !this._ctx",
-        ""
-      ]
-    });
-    this._canvas = document.createElement("canvas");
-    this._canvas.id = "code-blast-canvas";
-    this._canvas.style.position = "absolute";
-    this._canvas.style.zIndex = "0";
-    this._canvas.style.pointerEvents = "none";
-    this._ctx = this._canvas.getContext("2d");
-    const parent = this._node.parentElement?.parentElement;
-    parent?.appendChild(this._canvas);
-    this.resize();
-  }
-  destroy() {
-    this.stop();
-    if (this._canvas) {
-      this._canvas.remove();
-      this._canvas = void 0;
-      this._ctx = void 0;
     }
+    return automerge.getCursorPosition(doc, path.slice(), cursor);
   }
-  resize() {
-    if (this._node.parentElement && this._canvas) {
-      const { offsetLeft: x, offsetTop: y, offsetWidth: width, offsetHeight: height } = this._node.parentElement;
-      this._canvas.style.top = `${y}px`;
-      this._canvas.style.left = `${x}px`;
-      this._canvas.width = width;
-      this._canvas.height = height;
-    }
-  }
-  start() {
-    invariant(this._canvas && this._ctx, void 0, {
-      F: __dxlog_file,
-      L: 177,
-      S: this,
-      A: [
-        "this._canvas && this._ctx",
-        ""
-      ]
+});
+
+// packages/ui/react-ui-editor/src/extensions/automerge/defs.ts
+import { Annotation, StateEffect } from "@codemirror/state";
+var effectType = StateEffect.define({});
+var updateHeads = (newHeads) => effectType.of({
+  newHeads
+});
+var getLastHeads = (state, field) => state.field(field).lastHeads;
+var getPath = (state, field) => state.field(field).path;
+var reconcileAnnotationType = Annotation.define();
+var isReconcileTx = (tr) => !!tr.annotation(reconcileAnnotationType);
+
+// packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
+import { next as automerge2 } from "@dxos/automerge/automerge";
+
+// packages/ui/react-ui-editor/src/extensions/automerge/update-automerge.ts
+import { next as am } from "@dxos/automerge/automerge";
+var updateAutomerge = (field, handle, transactions, state) => {
+  const { lastHeads, path } = state.field(field);
+  let hasChanges = false;
+  for (const tr of transactions) {
+    tr.changes.iterChanges(() => {
+      hasChanges = true;
     });
-    this._running = true;
-    this.loop();
   }
-  stop() {
-    this._running = false;
-    this._node.style.transform = "translate(0px, 0px)";
+  if (!hasChanges) {
+    return void 0;
   }
-  loop() {
-    if (!this._running || !this._canvas || !this._ctx) {
-      return;
+  const newHeads = handle.changeAt(lastHeads, (doc) => {
+    for (const tr of transactions) {
+      tr.changes.iterChanges((fromA, toA, _fromB, _toB, inserted) => {
+        am.splice(doc, path, fromA, toA - fromA, inserted.toString());
+      });
     }
-    this._ctx.clearRect(0, 0, this._canvas.width ?? 0, this._canvas.height ?? 0);
-    const now = (/* @__PURE__ */ new Date()).getTime();
-    this._lastTime ??= now;
-    const dt = (now - this._lastTime) / 1e3;
-    this._lastTime = now;
-    if (this._shakeTime > 0) {
-      this._shakeTime -= dt;
-      const magnitude = this._shakeTime / this._shakeTimeMax * this._options.shakeIntensity;
-      const shakeX = random(-magnitude, magnitude);
-      const shakeY = random(-magnitude, magnitude);
-      this._node.style.transform = `translate(${shakeX}px,${shakeY}px)`;
-    }
-    this.drawParticles();
-    requestAnimationFrame(this.loop.bind(this));
-  }
-  drawParticles() {
-    for (let i = this._particles.length; i--; i > 0) {
-      const particle = this._particles[i];
-      if (!particle) {
-        continue;
-      }
-      if (particle.alpha < 0.01 || particle.size <= 0.5) {
-        continue;
-      }
-      this._effect.update(this._ctx, particle);
+  });
+  return newHeads ?? void 0;
+};
+
+// packages/ui/react-ui-editor/src/extensions/automerge/update-codemirror.ts
+import { ChangeSet } from "@codemirror/state";
+var updateCodeMirror = (view, selection, target, patches) => {
+  for (const patch of patches) {
+    const changeSpec = handlePatch(patch, target, view.state);
+    if (changeSpec != null) {
+      const changeSet = ChangeSet.of(changeSpec, view.state.doc.length, "\n");
+      selection = selection.map(changeSet, 1);
+      view.dispatch({
+        changes: changeSet,
+        annotations: reconcileAnnotationType.of({})
+      });
     }
   }
+  view.dispatch({
+    selection,
+    annotations: reconcileAnnotationType.of({})
+  });
 };
-var Effect = class {
-  constructor(_options) {
-    this._options = _options;
+var handlePatch = (patch, target, state) => {
+  if (patch.action === "insert") {
+    return handleInsert(target, patch);
+  } else if (patch.action === "splice") {
+    return handleSplice(target, patch);
+  } else if (patch.action === "del") {
+    return handleDel(target, patch);
+  } else if (patch.action === "put") {
+    return handlePut(target, patch, state);
+  } else {
+    return null;
   }
 };
-var Effect1 = class extends Effect {
-  create(x, y, color) {
-    return {
-      x,
-      y: y + 10,
-      vx: random(this._options.particleVelocityRange.x[0], this._options.particleVelocityRange.x[1]),
-      vy: random(this._options.particleVelocityRange.y[0], this._options.particleVelocityRange.y[1]),
-      size: random(this._options.particleSize.min, this._options.particleSize.max),
-      color,
-      alpha: 1
-    };
-  }
-  update(ctx, particle) {
-    particle.vy += this._options.particleGravity;
-    particle.x += particle.vx;
-    particle.y += particle.vy;
-    particle.alpha *= this._options.particleAlphaFadeout;
-    ctx.fillStyle = `rgba(${particle.color[0]},${particle.color[1]},${particle.color[2]},${particle.alpha})`;
-    ctx.fillRect(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, particle.size);
+var handleInsert = (target, patch) => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
   }
+  const text = patch.values.map((v) => v ? v.toString() : "").join("");
+  return [
+    {
+      from: index,
+      to: index,
+      insert: text
+    }
+  ];
 };
-var Effect2 = class extends Effect {
-  create(x, y, color) {
-    return {
-      x,
-      y: y + 10,
-      vx: random(this._options.particleVelocityRange.x[0], this._options.particleVelocityRange.x[1]),
-      vy: random(this._options.particleVelocityRange.y[0], this._options.particleVelocityRange.y[1]),
-      size: random(this._options.particleSize.min, this._options.particleSize.max),
-      color,
-      alpha: 1,
-      theta: random(0, 360) * Math.PI / 180,
-      drag: 0.92,
-      wander: 0.15
-    };
-  }
-  update(ctx, particle) {
-    particle.vy += this._options.particleGravity;
-    particle.x += particle.vx;
-    particle.y += particle.vy;
-    particle.vx *= particle.drag;
-    particle.vy *= particle.drag;
-    particle.theta += random(-0.5, 0.5);
-    particle.vx += Math.sin(particle.theta) * 0.1;
-    particle.vy += Math.cos(particle.theta) * 0.1;
-    particle.size *= this._options.particleShrinkRate;
-    particle.alpha *= this._options.particleAlphaFadeout;
-    ctx.fillStyle = `rgba(${particle.color[0]},${particle.color[1]},${particle.color[2]},${particle.alpha})`;
-    ctx.beginPath();
-    ctx.arc(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, 0, 2 * Math.PI);
-    ctx.fill();
+var handleSplice = (target, patch) => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
   }
-};
-function throttle(callback, limit) {
-  let wait = false;
-  return function(...args) {
-    if (!wait) {
-      callback.apply(this, args);
-      wait = true;
-      setTimeout(() => {
-        wait = false;
-      }, limit);
+  return [
+    {
+      from: index,
+      insert: patch.value
     }
-  };
-}
-var getRGBComponents = (node, color) => {
-  if (typeof color === "function") {
-    return color();
+  ];
+};
+var handleDel = (target, patch) => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
   }
-  const bgColor = getComputedStyle(node).color;
-  if (bgColor) {
-    const x = bgColor.match(/(\d+), (\d+), (\d+)/)?.slice(1);
-    if (x) {
-      return x;
+  const length = patch.length || 1;
+  return [
+    {
+      from: index,
+      to: index + length
     }
+  ];
+};
+var handlePut = (target, patch, state) => {
+  const index = charPath(target, [
+    ...patch.path,
+    0
+  ]);
+  if (index == null) {
+    return [];
+  }
+  const length = state.doc.length;
+  if (typeof patch.value !== "string") {
+    return [];
   }
   return [
-    50,
-    50,
-    50
+    {
+      from: 0,
+      to: length,
+      insert: patch.value
+    }
   ];
 };
-var random = (min, max) => {
-  if (!max) {
-    max = min;
-    min = 0;
+var charPath = (textPath, candidatePath) => {
+  if (candidatePath.length !== textPath.length + 1) {
+    return null;
   }
-  return min + ~~(Math.random() * (max - min + 1));
+  for (let i = 0; i < textPath.length; i++) {
+    if (textPath[i] !== candidatePath[i]) {
+      return null;
+    }
+  }
+  const index = candidatePath[candidatePath.length - 1];
+  if (typeof index === "number") {
+    return index;
+  }
+  return null;
 };
 
-// packages/ui/react-ui-editor/src/extensions/code.ts
-import { ViewPlugin, EditorView as EditorView3, Decoration } from "@codemirror/view";
-import get from "lodash.get";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-editor/src/styles/markdown.ts
-import { mx } from "@dxos/react-ui-theme";
-var headings = {
-  1: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl",
-    "-ml-[10px]"
-  ],
-  2: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl",
-    "-ml-[8px]"
-  ],
-  3: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl",
-    "-ml-[7px]"
-  ],
-  4: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-xl",
-    "-ml-[6px]"
-  ],
-  5: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-lg",
-    "-ml-[5px]"
-  ],
-  6: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline",
-    "-ml-[4px]"
-  ]
-};
-var heading = (level, readonly) => {
-  const [style, offset] = headings[level];
-  return mx(style, readonly && offset);
+// packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
+var PatchSemaphore = class {
+  constructor(_field) {
+    this._field = _field;
+    this._inReconcile = false;
+    this._queue = [];
+    this.reconcile = (handle, view) => {
+      if (this._inReconcile) {
+        return;
+      }
+      this._inReconcile = true;
+      const path = getPath(view.state, this._field);
+      const oldHeads = getLastHeads(view.state, this._field);
+      let selection = view.state.selection;
+      const transactions = view.state.field(this._field).unreconciledTransactions.filter((tx) => !isReconcileTx(tx));
+      const toInvert = transactions.slice().reverse();
+      for (const tx of toInvert) {
+        const inverted = tx.changes.invert(tx.startState.doc);
+        selection = selection.map(inverted);
+        view.dispatch({
+          changes: inverted,
+          annotations: reconcileAnnotationType.of(true)
+        });
+      }
+      let newHeads = updateAutomerge(this._field, handle, transactions, view.state);
+      if (newHeads === null || newHeads === void 0) {
+        newHeads = automerge2.getHeads(handle.docSync());
+      }
+      const diff = automerge2.equals(oldHeads, newHeads) ? [] : automerge2.diff(handle.docSync(), oldHeads, newHeads);
+      updateCodeMirror(view, selection, path, diff);
+      view.dispatch({
+        effects: updateHeads(newHeads),
+        annotations: reconcileAnnotationType.of({})
+      });
+      this._inReconcile = false;
+    };
+  }
 };
-var light = "text-neutral-200 dark:text-neutral-800";
-var mark = mx("!font-normal !no-underline !text-inherit opacity-40", light);
-var bold = "font-bold";
-var italic = "italic";
-var strikethrough = "line-through";
-var code = "font-mono !no-underline text-neutral-700 dark:text-neutral-300";
-var codeMark = "font-mono text-primary-500";
-var inlineUrl = mx(code, "px-1");
-var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30", light);
 
-// packages/ui/react-ui-editor/src/styles/tokens.ts
-import { tailwindConfig } from "@dxos/react-ui-theme";
-var tokens = tailwindConfig({}).theme;
+// packages/ui/react-ui-editor/src/util/cursor.ts
+import { Facet } from "@codemirror/state";
+var DEFAULT_CURSOR_CONVERTER = {
+  toCursor: (position) => position.toString(),
+  fromCursor: (cursor) => parseInt(cursor)
+};
+var CursorConverter = Facet.define({
+  combine: (providers) => providers[0] ?? DEFAULT_CURSOR_CONVERTER
+});
 
-// packages/ui/react-ui-editor/src/extensions/code.ts
-var CODE_REGEX = /```[\s\S]*?```/gs;
-var styles = EditorView3.baseTheme({
-  "& .cm-codeblock": {
-    fontFamily: get(tokens, "fontFamily.mono", []).join(",")
-  },
-  '&light [aria-readonly="true"] .cm-codeblock': {
-    background: get(tokens, "extend.colors.neutral.50")
-  },
-  '&dark [aria-readonly="true"] .cm-codeblock': {
-    background: get(tokens, "extend.colors.neutral.850")
-  },
-  '& [aria-readonly="true"] .cm-codeblock': {
-    display: "block",
-    paddingInline: "4px !important"
-  },
-  '& [aria-readonly="true"] .cm-codeblock-first': {
-    paddingTop: "4px !important",
-    borderTopLeftRadius: "4px",
-    borderTopRightRadius: "4px"
-  },
-  '& [aria-readonly="true"] .cm-codeblock-last': {
-    paddingBottom: "4px !important",
-    borderBottomLeftRadius: "4px",
-    borderBottomRightRadius: "4px"
-  }
-});
-var getLineRange = (lines, from, to) => {
-  const start = lines.findIndex((line) => line.from >= from);
-  const end = lines.findIndex((line) => line.to >= to);
-  return [
-    start,
-    end
-  ];
-};
-var code2 = () => {
-  const getDecorations = (view) => {
-    const decorations = [];
-    if (view.state.readOnly) {
-      const text = view.state.doc.sliceString(0);
-      const matches = text.matchAll(CODE_REGEX);
-      const blocks = view.viewportLineBlocks;
-      for (const match of matches) {
-        const range = getLineRange(blocks, match.index, match.index + match[0].length);
-        for (let i = range[0]; i <= range[1]; i++) {
-          const block = blocks[i];
-          decorations.push(Decoration.line({
-            class: mx2("cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
-          }).range(block.from));
-        }
-      }
-    }
-    return Decoration.set(decorations);
-  };
-  return [
-    ViewPlugin.fromClass(class {
-      constructor(view) {
-        this.decorations = getDecorations(view);
-      }
-      update(update4) {
-        if (update4.docChanged || update4.viewportChanged) {
-          this.decorations = getDecorations(update4.view);
-        }
-      }
-    }, {
-      decorations: (value) => value.decorations
-    }),
-    styles
-  ];
-};
-
-// packages/ui/react-ui-editor/src/extensions/comments.ts
-import { StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap3, Decoration as Decoration2, EditorView as EditorView4, MatchDecorator, ViewPlugin as ViewPlugin3, WidgetType } from "@codemirror/view";
-import sortBy from "lodash.sortby";
-import { debounce } from "@dxos/async";
-import { invariant as invariant3 } from "@dxos/invariant";
-import { log as log3 } from "@dxos/log";
-import { nonNullable } from "@dxos/util";
-
-// packages/ui/react-ui-editor/src/extensions/util.ts
+// packages/ui/react-ui-editor/src/util/util.ts
 import { log } from "@dxos/log";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/util.ts";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util/util.ts";
 var callbackWrapper = (fn) => (...args) => {
   try {
     return fn(...args);
   } catch (error) {
     log.catch(error, void 0, {
-      F: __dxlog_file2,
+      F: __dxlog_file,
       L: 16,
       S: void 0,
       C: (f, a) => f(...a)
@@ -523,209 +300,14 @@ var callbackWrapper = (fn) => (...args) => {
   }
 };
 
-// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import { StateField as StateField2 } from "@codemirror/state";
-import get2 from "lodash.get";
-import { useEffect, useState } from "react";
-import { yCollab } from "y-codemirror.next";
-import * as Y from "yjs";
-import { invariant as invariant2 } from "@dxos/invariant";
-import { getRawDoc, isActualAutomergeObject } from "@dxos/react-client/echo";
-import { arrayToString, stringToArray } from "@dxos/util";
-
-// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
-import { Annotation, Facet, StateEffect, StateField } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin2 } from "@codemirror/view";
-import * as automerge2 from "@dxos/automerge/automerge";
-
-// packages/ui/react-ui-editor/src/hooks/automerge/semaphore.ts
-import { next as automerge } from "@dxos/automerge/automerge";
-
-// packages/ui/react-ui-editor/src/hooks/automerge/update-automerge.ts
-import { next as am } from "@dxos/automerge/automerge";
-var updateAutomerge = (field, handle, transactions, state) => {
-  const { lastHeads, path } = state.field(field);
-  let hasChanges = false;
-  for (const tr of transactions) {
-    tr.changes.iterChanges(() => {
-      hasChanges = true;
-    });
-  }
-  if (!hasChanges) {
-    return void 0;
-  }
-  const newHeads = handle.changeAt(lastHeads, (doc) => {
-    for (const tr of transactions) {
-      tr.changes.iterChanges((fromA, toA, _fromB, _toB, inserted) => {
-        am.splice(doc, path, fromA, toA - fromA, inserted.toString());
-      });
-    }
-  });
-  return newHeads ?? void 0;
-};
-
-// packages/ui/react-ui-editor/src/hooks/automerge/update-codemirror.ts
-import { ChangeSet } from "@codemirror/state";
-var updateCodeMirror = (view, selection, target, patches) => {
-  for (const patch of patches) {
-    const changeSpec = handlePatch(patch, target, view.state);
-    if (changeSpec != null) {
-      const changeSet = ChangeSet.of(changeSpec, view.state.doc.length, "\n");
-      selection = selection.map(changeSet, 1);
-      view.dispatch({
-        changes: changeSet,
-        annotations: reconcileAnnotationType.of({})
-      });
-    }
-  }
-  view.dispatch({
-    selection,
-    annotations: reconcileAnnotationType.of({})
-  });
-};
-var handlePatch = (patch, target, state) => {
-  if (patch.action === "insert") {
-    return handleInsert(target, patch);
-  } else if (patch.action === "splice") {
-    return handleSplice(target, patch);
-  } else if (patch.action === "del") {
-    return handleDel(target, patch);
-  } else if (patch.action === "put") {
-    return handlePut(target, patch, state);
-  } else {
-    return null;
-  }
-};
-var handleInsert = (target, patch) => {
-  const index = charPath(target, patch.path);
-  if (index == null) {
-    return [];
-  }
-  const text = patch.values.map((v) => v ? v.toString() : "").join("");
-  return [
-    {
-      from: index,
-      to: index,
-      insert: text
-    }
-  ];
-};
-var handleSplice = (target, patch) => {
-  const index = charPath(target, patch.path);
-  if (index == null) {
-    return [];
-  }
-  return [
-    {
-      from: index,
-      insert: patch.value
-    }
-  ];
-};
-var handleDel = (target, patch) => {
-  const index = charPath(target, patch.path);
-  if (index == null) {
-    return [];
-  }
-  const length = patch.length || 1;
-  return [
-    {
-      from: index,
-      to: index + length
-    }
-  ];
-};
-var handlePut = (target, patch, state) => {
-  const index = charPath(target, [
-    ...patch.path,
-    0
-  ]);
-  if (index == null) {
-    return [];
-  }
-  const length = state.doc.length;
-  if (typeof patch.value !== "string") {
-    return [];
-  }
-  return [
-    {
-      from: 0,
-      to: length,
-      insert: patch.value
-    }
-  ];
-};
-var charPath = (textPath, candidatePath) => {
-  if (candidatePath.length !== textPath.length + 1) {
-    return null;
-  }
-  for (let i = 0; i < textPath.length; i++) {
-    if (textPath[i] !== candidatePath[i]) {
-      return null;
-    }
-  }
-  const index = candidatePath[candidatePath.length - 1];
-  if (typeof index === "number") {
-    return index;
-  }
-  return null;
-};
-
-// packages/ui/react-ui-editor/src/hooks/automerge/semaphore.ts
-var PatchSemaphore = class {
-  constructor(field) {
-    this._inReconcile = false;
-    this._queue = [];
-    this.reconcile = (handle, view) => {
-      if (this._inReconcile) {
-        return;
-      }
-      this._inReconcile = true;
-      const path = getPath(view.state, this._field);
-      const oldHeads = getLastHeads(view.state, this._field);
-      let selection = view.state.selection;
-      const transactions = view.state.field(this._field).unreconciledTransactions.filter((tx) => !isReconcileTx(tx));
-      const toInvert = transactions.slice().reverse();
-      for (const tx of toInvert) {
-        const inverted = tx.changes.invert(tx.startState.doc);
-        selection = selection.map(inverted);
-        view.dispatch({
-          changes: inverted,
-          annotations: reconcileAnnotationType.of(true)
-        });
-      }
-      let newHeads = updateAutomerge(this._field, handle, transactions, view.state);
-      if (newHeads === null || newHeads === void 0) {
-        newHeads = automerge.getHeads(handle.docSync());
-      }
-      const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.docSync(), oldHeads, newHeads);
-      updateCodeMirror(view, selection, path, diff);
-      view.dispatch({
-        effects: updateHeads(newHeads),
-        annotations: reconcileAnnotationType.of({})
-      });
-      this._inReconcile = false;
-    };
-    if (field !== void 0) {
-      this._field = field;
-    }
-  }
-};
-
-// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
-var effectType = StateEffect.define({});
-var updateHeads = (newHeads) => effectType.of({
-  newHeads
-});
-var getLastHeads = (state, field) => state.field(field).lastHeads;
-var getPath = (state, field) => state.field(field).path;
-var semaphoreFacet = Facet.define({
+// packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
+var semaphoreFacet = Facet2.define({
   combine: (values) => values.at(-1)
 });
-var automergePlugin = (handle, path) => {
+var automerge3 = ({ handle, path }) => {
   const stateField = StateField.define({
     create: () => ({
-      lastHeads: automerge2.getHeads(handle.docSync()),
+      lastHeads: A.getHeads(handle.docSync()),
       unreconciledTransactions: [],
       path: path.slice()
     }),
@@ -753,16 +335,16 @@ var automergePlugin = (handle, path) => {
     }
   });
   const semaphore = new PatchSemaphore(stateField);
-  const viewPlugin = ViewPlugin2.fromClass(class AutomergeCodemirrorViewPlugin {
-    constructor(view) {
+  const viewPlugin = ViewPlugin.fromClass(class AutomergeCodemirrorViewPlugin {
+    constructor(_view) {
+      this._view = _view;
       this._handleChange = () => {
         this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
       };
-      this._view = view;
       handle.addListener("change", this._handleChange);
     }
-    update(update4) {
-      if (update4.transactions.length > 0 && update4.transactions.some((t) => !isReconcileTx(t))) {
+    update(update2) {
+      if (update2.transactions.length > 0 && update2.transactions.some((tr) => !isReconcileTx(tr))) {
         queueMicrotask(() => {
           this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
         });
@@ -774,263 +356,750 @@ var automergePlugin = (handle, path) => {
   });
   return {
     extension: [
-      stateField,
+      CursorConverter.of(cursorConverter(handle, path)),
       semaphoreFacet.of(semaphore),
+      stateField,
       viewPlugin
     ]
   };
 };
-var reconcileAnnotationType = Annotation.define();
-var isReconcileTx = (tr) => !!tr.annotation(reconcileAnnotationType);
 
-// packages/ui/react-ui-editor/src/hooks/yjs/cursors.ts
-import * as random2 from "lib0/random";
-var cursorColors = [
-  {
-    color: "#30bced",
-    light: "#30bced33"
+// packages/ui/react-ui-editor/src/extensions/awareness.ts
+import { Annotation as Annotation2, Facet as Facet3, RangeSet } from "@codemirror/state";
+import { Decoration, EditorView, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
+import { Event } from "@dxos/async";
+import { Context } from "@dxos/context";
+var dummyProvider = {
+  remoteStateChange: new Event(),
+  open: () => {
   },
-  {
-    color: "#6eeb83",
-    light: "#6eeb8333"
+  close: () => {
   },
-  {
-    color: "#ffbc42",
-    light: "#ffbc4233"
+  update: () => {
   },
-  {
-    color: "#ecd444",
-    light: "#ecd44433"
+  getRemoteStates: () => []
+};
+var AwarenessProvider = Facet3.define({
+  combine: (providers) => providers[0] ?? dummyProvider
+});
+var RemoteSelectionChangedAnnotation = Annotation2.define();
+var awareness = (provider = dummyProvider) => {
+  return [
+    AwarenessProvider.of(provider),
+    ViewPlugin2.fromClass(RemoteSelectionsDecorator, {
+      decorations: (value) => value.decorations
+    }),
+    styles
+  ];
+};
+var RemoteSelectionsDecorator = class {
+  constructor(view) {
+    this.decorations = RangeSet.of([]);
+    this._ctx = new Context();
+    this._lastAnchor = void 0;
+    this._lastHead = void 0;
+    this._cursorConverter = view.state.facet(CursorConverter);
+    this._provider = view.state.facet(AwarenessProvider);
+    this._provider.open();
+    this._provider.remoteStateChange.on(this._ctx, () => {
+      view.dispatch({
+        annotations: [
+          RemoteSelectionChangedAnnotation.of([])
+        ]
+      });
+    });
+  }
+  destroy() {
+    void this._ctx.dispose();
+    this._provider.close();
+  }
+  update(update2) {
+    this._updateLocalSelection(update2);
+    this._updateRemoteSelections(update2);
+  }
+  _updateLocalSelection(update2) {
+    const hasFocus = update2.view.hasFocus && update2.view.dom.ownerDocument.hasFocus();
+    const { anchor = void 0, head = void 0 } = hasFocus ? update2.state.selection.main : {};
+    if (this._lastAnchor === anchor && this._lastHead === head) {
+      return;
+    }
+    this._lastAnchor = anchor;
+    this._lastHead = head;
+    this._provider.update(anchor !== void 0 && head !== void 0 ? {
+      anchor: this._cursorConverter.toCursor(anchor),
+      head: this._cursorConverter.toCursor(head)
+    } : void 0);
+  }
+  _updateRemoteSelections(update2) {
+    const decorations = [];
+    const awarenessStates = this._provider.getRemoteStates();
+    for (const state of awarenessStates) {
+      const anchor = state.position?.anchor ? this._cursorConverter.fromCursor(state.position.anchor) : null;
+      const head = state.position?.head ? this._cursorConverter.fromCursor(state.position.head) : null;
+      if (anchor == null || head == null) {
+        continue;
+      }
+      const start = Math.min(Math.min(anchor, head), update2.view.state.doc.length);
+      const end = Math.min(Math.max(anchor, head), update2.view.state.doc.length);
+      const startLine = update2.view.state.doc.lineAt(start);
+      const endLine = update2.view.state.doc.lineAt(end);
+      const color = state.info.color ?? "#30bced";
+      const lightColor = state.info.lightColor ?? color + "33";
+      if (startLine.number === endLine.number) {
+        decorations.push({
+          from: start,
+          to: end,
+          value: Decoration.mark({
+            attributes: {
+              style: `background-color: ${lightColor}`
+            },
+            class: "cm-ySelection"
+          })
+        });
+      } else {
+        decorations.push({
+          from: start,
+          to: startLine.from + startLine.length,
+          value: Decoration.mark({
+            attributes: {
+              style: `background-color: ${color}`
+            },
+            class: "cm-ySelection"
+          })
+        });
+        decorations.push({
+          from: endLine.from,
+          to: end,
+          value: Decoration.mark({
+            attributes: {
+              style: `background-color: ${color}`
+            },
+            class: "cm-ySelection"
+          })
+        });
+        for (let i = startLine.number + 1; i < endLine.number; i++) {
+          const linePos = update2.view.state.doc.line(i).from;
+          decorations.push({
+            from: linePos,
+            to: linePos,
+            value: Decoration.line({
+              attributes: {
+                style: `background-color: ${color}`,
+                class: "cm-yLineSelection"
+              }
+            })
+          });
+        }
+      }
+      decorations.push({
+        from: head,
+        to: head,
+        value: Decoration.widget({
+          side: head - anchor > 0 ? -1 : 1,
+          block: false,
+          widget: new RemoteCaretWidget(state.info.displayName ?? "Anonymous", color)
+        })
+      });
+    }
+    this.decorations = Decoration.set(decorations, true);
+  }
+};
+var RemoteCaretWidget = class extends WidgetType {
+  constructor(name, color) {
+    super();
+    this.name = name;
+    this.color = color;
+    this.name = name;
+    this.color = color;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-ySelectionCaret";
+    span.style.backgroundColor = this.color;
+    span.style.borderColor = this.color;
+    const dot = document.createElement("div");
+    dot.className = "cm-ySelectionCaretDot";
+    const info = document.createElement("div");
+    info.className = "cm-ySelectionInfo";
+    info.innerText = this.name;
+    span.appendChild(document.createTextNode("\u2060"));
+    span.appendChild(dot);
+    span.appendChild(document.createTextNode("\u2060"));
+    span.appendChild(info);
+    span.appendChild(document.createTextNode("\u2060"));
+    return span;
+  }
+  eq(widget) {
+    return widget.color === this.color;
+  }
+  compare(widget) {
+    return widget.color === this.color;
+  }
+  updateDOM() {
+    return false;
+  }
+  get estimatedHeight() {
+    return -1;
+  }
+  ignoreEvent() {
+    return true;
+  }
+};
+var styles = EditorView.baseTheme({
+  ".cm-ySelection": {},
+  ".cm-yLineSelection": {
+    padding: 0,
+    margin: "0px 2px 0px 4px"
   },
-  {
-    color: "#ee6352",
-    light: "#ee635233"
+  ".cm-ySelectionCaret": {
+    position: "relative",
+    borderLeft: "1px solid black",
+    borderRight: "1px solid black",
+    marginLeft: "-1px",
+    marginRight: "-1px",
+    boxSizing: "border-box",
+    display: "inline"
   },
-  {
-    color: "#9ac2c9",
-    light: "#9ac2c933"
+  ".cm-ySelectionCaretDot": {
+    borderRadius: "50%",
+    position: "absolute",
+    width: ".4em",
+    height: ".4em",
+    top: "-.2em",
+    left: "-.2em",
+    backgroundColor: "inherit",
+    transition: "transform .3s ease-in-out",
+    boxSizing: "border-box"
   },
-  {
-    color: "#8acb88",
-    light: "#8acb8833"
+  ".cm-ySelectionCaret:hover > .cm-ySelectionCaretDot": {
+    transformOrigin: "bottom center",
+    transform: "scale(0)"
   },
-  {
-    color: "#1be7ff",
-    light: "#1be7ff33"
+  ".cm-ySelectionInfo": {
+    position: "absolute",
+    top: "-1.05em",
+    left: "-1px",
+    fontSize: ".75em",
+    fontFamily: "serif",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    lineHeight: "normal",
+    userSelect: "none",
+    color: "white",
+    paddingLeft: "2px",
+    paddingRight: "2px",
+    zIndex: 101,
+    transition: "opacity .3s ease-in-out",
+    backgroundColor: "inherit",
+    // these should be separate
+    opacity: 0,
+    transitionDelay: "0s",
+    whiteSpace: "nowrap"
+  },
+  ".cm-ySelectionCaret:hover > .cm-ySelectionInfo": {
+    opacity: 1,
+    transitionDelay: "0s"
   }
-];
-var cursorColor = cursorColors[random2.uint32() % cursorColors.length];
+});
 
-// packages/ui/react-ui-editor/src/hooks/yjs/space-provider.ts
-import * as decoding from "lib0/decoding";
-import * as encoding from "lib0/encoding";
-import { Observable } from "lib0/observable";
-import * as awarenessProtocol from "y-protocols/awareness";
-import { log as log2 } from "@dxos/log";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs/space-provider.ts";
-var messageAwareness = 1;
-var messageQueryAwareness = 3;
-var SpaceAwarenessProvider = class extends Observable {
-  constructor({ space, doc, channel, awareness }) {
-    super();
-    this._space = space;
-    this._awareness = awareness ?? new awarenessProtocol.Awareness(doc);
-    this._channel = channel;
-    this._clientId = doc.clientID;
-    this._awareness.on("update", this._handleAwarenessUpdate.bind(this));
-    this._space.listen(this._channel, this._handleSpaceMessage.bind(this));
-    if (typeof window !== "undefined") {
-      window.addEventListener("beforeunload", this._handleBeforeUnload.bind(this));
-    } else if (typeof process !== "undefined") {
-      process.on("exit", this._handleBeforeUnload.bind(this));
-    }
-    const encoderAwarenessQuery = encoding.createEncoder();
-    encoding.writeVarUint(encoderAwarenessQuery, messageQueryAwareness);
-    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessQuery));
-    const encoderAwarenessState = encoding.createEncoder();
-    encoding.writeVarUint(encoderAwarenessState, messageAwareness);
-    encoding.writeVarUint8Array(encoderAwarenessState, awarenessProtocol.encodeAwarenessUpdate(this.awareness, [
-      this._clientId
-    ]));
-    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessState));
+// packages/ui/react-ui-editor/src/extensions/basic.ts
+import { closeBrackets } from "@codemirror/autocomplete";
+import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
+import { drawSelection, EditorView as EditorView2, placeholder } from "@codemirror/view";
+var basicBundle = ({ readonly, themeMode, placeholder: _placeholder }) => [
+  EditorView2.lineWrapping,
+  // TODO(burdon): Compare with minimalSetup.
+  // https://codemirror.net/docs/ref/#codemirror.minimalSetup
+  bracketMatching(),
+  closeBrackets(),
+  drawSelection(),
+  _placeholder && placeholder(_placeholder),
+  // TODO(burdon): Is this required?
+  themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
+].filter(Boolean);
+
+// packages/ui/react-ui-editor/src/extensions/blast.ts
+import { EditorView as EditorView3, keymap as keymap2 } from "@codemirror/view";
+import defaultsDeep from "lodash.defaultsdeep";
+import { invariant } from "@dxos/invariant";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
+var defaultOptions = {
+  effect: 2,
+  maxParticles: 200,
+  particleGravity: 0.08,
+  particleAlphaFadeout: 0.996,
+  particleSize: {
+    min: 2,
+    max: 8
+  },
+  particleNumRange: {
+    min: 5,
+    max: 10
+  },
+  particleVelocityRange: {
+    x: [
+      -1,
+      1
+    ],
+    y: [
+      -3.5,
+      -1.5
+    ]
+  },
+  particleShrinkRate: 0.95,
+  shakeIntensity: 5
+};
+var blast = (options = defaultOptions) => {
+  let blaster;
+  let last = 0;
+  const getPoint = (view, pos) => {
+    const { left: x = 0, top: y = 0 } = view.coordsForChar(pos) ?? {};
+    const element = document.elementFromPoint(x, y);
+    const { offsetLeft: left = 0, offsetTop: top = 0 } = view.scrollDOM.parentElement ?? {};
+    const point = {
+      x: x - left,
+      y: y - top
+    };
+    return {
+      element,
+      point
+    };
+  };
+  return [
+    // Cursor moved.
+    EditorView3.updateListener.of((update2) => {
+      if (blaster?.node !== update2.view.scrollDOM) {
+        if (blaster) {
+          blaster.destroy();
+        }
+        blaster = new Blaster(update2.view.scrollDOM, defaultsDeep({
+          particleGravity: 0.2,
+          particleShrinkRate: 0.995,
+          color: () => [
+            100 + Math.random() * 100,
+            0,
+            0
+          ]
+        }, options, defaultOptions));
+        blaster.initialize();
+        blaster.start();
+      } else {
+        blaster.resize();
+      }
+      const current = update2.state.selection.main.head;
+      if (current !== last) {
+        last = current;
+        const { element, point } = getPoint(update2.view, current - 1);
+        if (element && point) {
+          blaster.spawn({
+            element,
+            point
+          });
+        }
+      }
+    }),
+    keymap2.of([
+      {
+        any: (_, event) => {
+          if (blaster) {
+            if (event.key === "Enter" && event.shiftKey) {
+              blaster.shake({
+                time: 0.8
+              });
+              return true;
+            }
+          }
+          return false;
+        }
+      }
+    ])
+  ];
+};
+var Blaster = class {
+  constructor(_node, _options) {
+    this._node = _node;
+    this._options = _options;
+    this._running = false;
+    this._shakeTime = 0;
+    this._shakeTimeMax = 0;
+    this._particles = [];
+    this._particlePointer = 0;
+    this._lastPoint = {
+      x: 0,
+      y: 0
+    };
+    this.shake = throttle(({ time }) => {
+      this._shakeTime = this._shakeTimeMax || time;
+      this._shakeTimeMax = time;
+    }, 100);
+    this.spawn = throttle(({ element, point }) => {
+      const color = getRGBComponents(element, this._options.color);
+      const numParticles = random(this._options.particleNumRange.min, this._options.particleNumRange.max);
+      const dir = this._lastPoint.x === point.x ? 0 : this._lastPoint.x < point.x ? 1 : -1;
+      this._lastPoint = point;
+      for (let i = numParticles; i--; i > 0) {
+        this._particles[this._particlePointer] = this._effect.create(point.x - dir * 16, point.y, color);
+        this._particlePointer = (this._particlePointer + 1) % this._options.maxParticles;
+      }
+    }, 100);
+    this._effect = this._options.effect === 1 ? new Effect1(_options) : new Effect2(_options);
   }
-  get awareness() {
-    return this._awareness;
+  get node() {
+    return this._node;
   }
-  _handleAwarenessUpdate({ added, updated, removed }, origin) {
-    log2("awareness update", {
-      added,
-      updated,
-      removed,
-      origin
-    }, {
-      F: __dxlog_file3,
-      L: 67,
+  initialize() {
+    invariant(!this._canvas && !this._ctx, void 0, {
+      F: __dxlog_file2,
+      L: 138,
       S: this,
-      C: (f, a) => f(...a)
+      A: [
+        "!this._canvas && !this._ctx",
+        ""
+      ]
     });
-    const changedClients = added.concat(updated).concat(removed);
-    const encoderAwareness = encoding.createEncoder();
-    encoding.writeVarUint(encoderAwareness, messageAwareness);
-    encoding.writeVarUint8Array(encoderAwareness, awarenessProtocol.encodeAwarenessUpdate(this._awareness, changedClients));
-    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwareness));
+    this._canvas = document.createElement("canvas");
+    this._canvas.id = "code-blast-canvas";
+    this._canvas.style.position = "absolute";
+    this._canvas.style.zIndex = "0";
+    this._canvas.style.pointerEvents = "none";
+    this._ctx = this._canvas.getContext("2d");
+    const parent = this._node.parentElement?.parentElement;
+    parent?.appendChild(this._canvas);
+    this.resize();
   }
-  _handleSpaceMessage({ payload }) {
-    log2("space message", payload, {
-      F: __dxlog_file3,
-      L: 79,
+  destroy() {
+    this.stop();
+    if (this._canvas) {
+      this._canvas.remove();
+      this._canvas = void 0;
+      this._ctx = void 0;
+    }
+  }
+  resize() {
+    if (this._node.parentElement && this._canvas) {
+      const { offsetLeft: x, offsetTop: y, offsetWidth: width, offsetHeight: height } = this._node.parentElement;
+      this._canvas.style.top = `${y}px`;
+      this._canvas.style.left = `${x}px`;
+      this._canvas.width = width;
+      this._canvas.height = height;
+    }
+  }
+  start() {
+    invariant(this._canvas && this._ctx, void 0, {
+      F: __dxlog_file2,
+      L: 177,
       S: this,
-      C: (f, a) => f(...a)
+      A: [
+        "this._canvas && this._ctx",
+        ""
+      ]
     });
-    const data = new Uint8Array(Array.from(Object.values(payload)));
-    const encoder = this._readMessage(data);
-    if (encoder) {
-      void this._space.postMessage(this._channel, encoding.toUint8Array(encoder));
+    this._running = true;
+    this.loop();
+  }
+  stop() {
+    this._running = false;
+    this._node.style.transform = "translate(0px, 0px)";
+  }
+  loop() {
+    if (!this._running || !this._canvas || !this._ctx) {
+      return;
     }
+    this._ctx.clearRect(0, 0, this._canvas.width ?? 0, this._canvas.height ?? 0);
+    const now = (/* @__PURE__ */ new Date()).getTime();
+    this._lastTime ??= now;
+    const dt = (now - this._lastTime) / 1e3;
+    this._lastTime = now;
+    if (this._shakeTime > 0) {
+      this._shakeTime -= dt;
+      const magnitude = this._shakeTime / this._shakeTimeMax * this._options.shakeIntensity;
+      const shakeX = random(-magnitude, magnitude);
+      const shakeY = random(-magnitude, magnitude);
+      this._node.style.transform = `translate(${shakeX}px,${shakeY}px)`;
+    }
+    this.drawParticles();
+    requestAnimationFrame(this.loop.bind(this));
   }
-  _readMessage(message) {
-    const decoder = decoding.createDecoder(message);
-    const encoder = encoding.createEncoder();
-    const messageType = decoding.readVarUint(decoder);
-    let sendReply = false;
-    switch (messageType) {
-      case messageAwareness: {
-        awarenessProtocol.applyAwarenessUpdate(this._awareness, decoding.readVarUint8Array(decoder), this);
-        break;
-      }
-      case messageQueryAwareness: {
-        encoding.writeVarUint(encoder, messageAwareness);
-        encoding.writeVarUint8Array(encoder, awarenessProtocol.encodeAwarenessUpdate(this._awareness, Array.from(this._awareness.getStates().keys())));
-        sendReply = true;
-        break;
+  drawParticles() {
+    for (let i = this._particles.length; i--; i > 0) {
+      const particle = this._particles[i];
+      if (!particle) {
+        continue;
       }
-      default: {
-        console.error("Invalid message:", messageType);
-        return encoder;
+      if (particle.alpha < 0.01 || particle.size <= 0.5) {
+        continue;
       }
+      this._effect.update(this._ctx, particle);
     }
-    if (!sendReply) {
-      return null;
+  }
+};
+var Effect = class {
+  constructor(_options) {
+    this._options = _options;
+  }
+};
+var Effect1 = class extends Effect {
+  create(x, y, color) {
+    return {
+      x,
+      y: y + 10,
+      vx: random(this._options.particleVelocityRange.x[0], this._options.particleVelocityRange.x[1]),
+      vy: random(this._options.particleVelocityRange.y[0], this._options.particleVelocityRange.y[1]),
+      size: random(this._options.particleSize.min, this._options.particleSize.max),
+      color,
+      alpha: 1
+    };
+  }
+  update(ctx, particle) {
+    particle.vy += this._options.particleGravity;
+    particle.x += particle.vx;
+    particle.y += particle.vy;
+    particle.alpha *= this._options.particleAlphaFadeout;
+    ctx.fillStyle = `rgba(${particle.color[0]},${particle.color[1]},${particle.color[2]},${particle.alpha})`;
+    ctx.fillRect(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, particle.size);
+  }
+};
+var Effect2 = class extends Effect {
+  create(x, y, color) {
+    return {
+      x,
+      y: y + 10,
+      vx: random(this._options.particleVelocityRange.x[0], this._options.particleVelocityRange.x[1]),
+      vy: random(this._options.particleVelocityRange.y[0], this._options.particleVelocityRange.y[1]),
+      size: random(this._options.particleSize.min, this._options.particleSize.max),
+      color,
+      alpha: 1,
+      theta: random(0, 360) * Math.PI / 180,
+      drag: 0.92,
+      wander: 0.15
+    };
+  }
+  update(ctx, particle) {
+    particle.vy += this._options.particleGravity;
+    particle.x += particle.vx;
+    particle.y += particle.vy;
+    particle.vx *= particle.drag;
+    particle.vy *= particle.drag;
+    particle.theta += random(-0.5, 0.5);
+    particle.vx += Math.sin(particle.theta) * 0.1;
+    particle.vy += Math.cos(particle.theta) * 0.1;
+    particle.size *= this._options.particleShrinkRate;
+    particle.alpha *= this._options.particleAlphaFadeout;
+    ctx.fillStyle = `rgba(${particle.color[0]},${particle.color[1]},${particle.color[2]},${particle.alpha})`;
+    ctx.beginPath();
+    ctx.arc(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, 0, 2 * Math.PI);
+    ctx.fill();
+  }
+};
+function throttle(callback, limit) {
+  let wait = false;
+  return function(...args) {
+    if (!wait) {
+      callback.apply(this, args);
+      wait = true;
+      setTimeout(() => {
+        wait = false;
+      }, limit);
     }
-    return encoder;
+  };
+}
+var getRGBComponents = (node, color) => {
+  if (typeof color === "function") {
+    return color();
   }
-  _handleBeforeUnload() {
-    awarenessProtocol.removeAwarenessStates(this._awareness, [
-      this._clientId
-    ], "window unload");
+  const bgColor = getComputedStyle(node).color;
+  if (bgColor) {
+    const x = bgColor.match(/(\d+), (\d+), (\d+)/)?.slice(1);
+    if (x) {
+      return x;
+    }
+  }
+  return [
+    50,
+    50,
+    50
+  ];
+};
+var random = (min, max) => {
+  if (!max) {
+    max = min;
+    min = 0;
+  }
+  return min + ~~(Math.random() * (max - min + 1));
+};
+
+// packages/ui/react-ui-editor/src/extensions/code.ts
+import { ViewPlugin as ViewPlugin3, EditorView as EditorView4, Decoration as Decoration2 } from "@codemirror/view";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-editor/src/styles/cursors.ts
+import * as random2 from "lib0/random";
+var cursorColors = [
+  {
+    color: "#30bced",
+    light: "#30bced33"
+  },
+  {
+    color: "#6eeb83",
+    light: "#6eeb8333"
+  },
+  {
+    color: "#ffbc42",
+    light: "#ffbc4233"
+  },
+  {
+    color: "#ecd444",
+    light: "#ecd44433"
+  },
+  {
+    color: "#ee6352",
+    light: "#ee635233"
+  },
+  {
+    color: "#9ac2c9",
+    light: "#9ac2c933"
+  },
+  {
+    color: "#8acb88",
+    light: "#8acb8833"
+  },
+  {
+    color: "#1be7ff",
+    light: "#1be7ff33"
   }
+];
+var cursorColor = cursorColors[random2.uint32() % cursorColors.length];
+
+// packages/ui/react-ui-editor/src/styles/markdown.ts
+import { mx } from "@dxos/react-ui-theme";
+var headings = {
+  1: [
+    "mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl",
+    "-ml-[10px]"
+  ],
+  2: [
+    "mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl",
+    "-ml-[8px]"
+  ],
+  3: [
+    "mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl",
+    "-ml-[7px]"
+  ],
+  4: [
+    "mbs-4 mbe-2 font-medium text-inherit no-underline text-xl",
+    "-ml-[6px]"
+  ],
+  5: [
+    "mbs-4 mbe-2 font-medium text-inherit no-underline text-lg",
+    "-ml-[5px]"
+  ],
+  6: [
+    "mbs-4 mbe-2 font-medium text-inherit no-underline",
+    "-ml-[4px]"
+  ]
+};
+var heading = (level, readonly) => {
+  const [style, offset] = headings[level];
+  return mx(style, readonly && offset);
 };
+var light = "text-neutral-200 dark:text-neutral-800";
+var mark = mx("!font-normal !no-underline !text-inherit opacity-40", light);
+var bold = "font-bold";
+var italic = "italic";
+var strikethrough = "line-through";
+var code = "font-mono !no-underline text-neutral-700 dark:text-neutral-300";
+var codeMark = "font-mono text-primary-500";
+var inlineUrl = mx(code, "px-1");
+var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30", light);
 
-// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
-var modelState = StateField2.define({
-  create: () => void 0,
-  update: (model) => model
+// packages/ui/react-ui-editor/src/styles/tokens.ts
+import get2 from "lodash.get";
+import { tailwindConfig } from "@dxos/react-ui-theme";
+var tokens = tailwindConfig({}).theme;
+var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
+
+// packages/ui/react-ui-editor/src/extensions/code.ts
+var CODE_REGEX = /```[\s\S]*?```/gs;
+var styles2 = EditorView4.baseTheme({
+  "& .cm-codeblock": {
+    fontFamily: getToken("fontFamily.mono", []).join(",")
+  },
+  '&light [aria-readonly="true"] .cm-codeblock': {
+    background: getToken("extend.colors.neutral.50")
+  },
+  '&dark [aria-readonly="true"] .cm-codeblock': {
+    background: getToken("extend.colors.neutral.850")
+  },
+  '& [aria-readonly="true"] .cm-codeblock': {
+    display: "block",
+    paddingInline: "4px !important"
+  },
+  '& [aria-readonly="true"] .cm-codeblock-first': {
+    paddingTop: "4px !important",
+    borderTopLeftRadius: "4px",
+    borderTopRightRadius: "4px"
+  },
+  '& [aria-readonly="true"] .cm-codeblock-last': {
+    paddingBottom: "4px !important",
+    borderBottomLeftRadius: "4px",
+    borderBottomRightRadius: "4px"
+  }
 });
-var useTextModel = (props) => {
-  const { identity, space, text } = props;
-  const [model, setModel] = useState(() => createModel(props));
-  useEffect(() => setModel(createModel(props)), [
-    identity,
-    space,
-    text
-  ]);
-  return model;
+var getLineRange = (lines, from, to) => {
+  const start = lines.findIndex((line) => line.from >= from);
+  const end = lines.findIndex((line) => line.to >= to);
+  return [
+    start,
+    end
+  ];
 };
-var createModel = (props) => {
-  const { text } = props;
-  if (isActualAutomergeObject(text)) {
-    return createAutomergeModel(props);
-  } else {
-    if (!text?.doc) {
-      return void 0;
+var code2 = () => {
+  const getDecorations = (view) => {
+    const decorations = [];
+    if (view.state.readOnly) {
+      const text = view.state.doc.sliceString(0);
+      const matches = text.matchAll(CODE_REGEX);
+      const blocks = view.viewportLineBlocks;
+      for (const match of matches) {
+        const range = getLineRange(blocks, match.index, match.index + match[0].length);
+        for (let i = range[0]; i <= range[1]; i++) {
+          const block = blocks[i];
+          decorations.push(Decoration2.line({
+            class: mx2("cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
+          }).range(block.from));
+        }
+      }
     }
-    return createYjsModel(props);
-  }
-};
-var createYjsModel = ({ identity, space, text }) => {
-  invariant2(text?.doc && text?.content, void 0, {
-    F: __dxlog_file4,
-    L: 97,
-    S: void 0,
-    A: [
-      "text?.doc && text?.content",
-      ""
-    ]
-  });
-  const provider = space ? new SpaceAwarenessProvider({
-    space,
-    doc: text.doc,
-    channel: `yjs.awareness.${text.id}`
-  }) : void 0;
-  const model = {
-    id: text.doc.guid,
-    content: text.content,
-    text: () => text.content.toString(),
-    // https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
-    getCursorFromRange: (range) => {
-      const from = Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(text.content, range.from));
-      const to = Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(text.content, range.to, -1));
-      return [
-        arrayToString(from),
-        arrayToString(to)
-      ].join(":");
-    },
-    getRangeFromCursor: (cursor) => {
-      invariant2(text.doc, void 0, {
-        F: __dxlog_file4,
-        L: 113,
-        S: void 0,
-        A: [
-          "text.doc",
-          ""
-        ]
-      });
-      const parts = cursor.split(":");
-      const from = Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(stringToArray(parts[0])), text.doc);
-      const to = Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(stringToArray(parts[1])), text.doc);
-      return from && to ? {
-        from: from.index,
-        to: to.index
-      } : void 0;
-    },
-    extension: [
-      yCollab(text.content, provider?.awareness),
-      modelState.init(() => model)
-    ],
-    awareness: provider?.awareness,
-    peer: identity ? {
-      id: identity.identityKey.toHex(),
-      name: identity.profile?.displayName
-    } : void 0
-  };
-  return model;
-};
-var createAutomergeModel = ({ identity, text }) => {
-  const obj = text;
-  const doc = getRawDoc(obj, [
-    obj.field
-  ]);
-  const model = {
-    id: obj.id,
-    content: doc,
-    text: () => get2(doc.handle.docSync(), doc.path),
-    // TODO(burdon): https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
-    extension: [
-      automergePlugin(doc.handle, doc.path),
-      modelState.init(() => model)
-    ],
-    peer: identity ? {
-      id: identity.identityKey.toHex(),
-      name: identity.profile?.displayName
-    } : void 0
+    return Decoration2.set(decorations);
   };
-  return model;
+  return [
+    ViewPlugin3.fromClass(class {
+      constructor(view) {
+        this.decorations = getDecorations(view);
+      }
+      update(update2) {
+        if (update2.docChanged || update2.viewportChanged) {
+          this.decorations = getDecorations(update2.view);
+        }
+      }
+    }, {
+      decorations: (value) => value.decorations
+    }),
+    styles2
+  ];
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
-var styles2 = EditorView4.baseTheme({
+import { StateEffect as StateEffect2, StateField as StateField2 } from "@codemirror/state";
+import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView as EditorView5, MatchDecorator, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
+import sortBy from "lodash.sortby";
+import { debounce } from "@dxos/async";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { log as log2 } from "@dxos/log";
+import { nonNullable } from "@dxos/util";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
+var styles3 = EditorView5.baseTheme({
   "& .cm-bookmark": {
     cursor: "pointer",
     margin: "4px",
@@ -1041,28 +1110,44 @@ var styles2 = EditorView4.baseTheme({
     backgroundColor: "orange"
   },
   "& .cm-comment": {
-    backgroundColor: "yellow"
+    backgroundColor: getToken("extend.colors.yellow.50")
   },
   "& .cm-comment-active": {
-    backgroundColor: "orange"
+    backgroundColor: getToken("extend.colors.yellow.100")
   }
 });
 var marks = {
-  highlight: Decoration2.mark({
+  highlight: Decoration3.mark({
     class: "cm-comment"
   }),
-  highlightActive: Decoration2.mark({
+  highlightActive: Decoration3.mark({
     class: "cm-comment-active"
   })
 };
+var setFocus = (view, thread) => {
+  const range = view.state.field(commentsStateField).ranges.find((range2) => range2.id === thread);
+  if (!range) {
+    return;
+  }
+  view.dispatch({
+    effects: setSelection.of({
+      active: thread
+    }),
+    selection: {
+      anchor: range.from
+    },
+    scrollIntoView: true
+  });
+};
 var setCommentRange = StateEffect2.define();
 var setSelection = StateEffect2.define();
 var setCommentState = StateEffect2.define();
-var commentsStateField = StateField3.define({
+var commentsStateField = StateField2.define({
   create: () => ({
     ranges: []
   }),
   update: (value, tr) => {
+    const cursorConverter3 = tr.state.facet(CursorConverter);
     for (const effect of tr.effects) {
       if (effect.is(setSelection)) {
         return {
@@ -1071,9 +1156,9 @@ var commentsStateField = StateField3.define({
         };
       }
       if (effect.is(setCommentRange)) {
-        const { model, comments: comments2 } = effect.value;
+        const { comments: comments2 } = effect.value;
         const ranges = comments2.map((comment) => {
-          const range = model.getRangeFromCursor(comment.cursor);
+          const range = getRangeFromCursor(cursorConverter3, comment.cursor);
           return range && {
             ...comment,
             ...range
@@ -1091,7 +1176,7 @@ var commentsStateField = StateField3.define({
     return value;
   }
 });
-var highlightDecorations = EditorView4.decorations.compute([
+var highlightDecorations = EditorView5.decorations.compute([
   commentsStateField
 ], (state) => {
   const { active, ranges } = state.field(commentsStateField);
@@ -1109,17 +1194,17 @@ var highlightDecorations = EditorView4.decorations.compute([
       return marks.highlight.range(range.from, range.to);
     }
   }).filter(nonNullable) ?? [];
-  return Decoration2.set(decorations);
+  return Decoration3.set(decorations);
 });
-var BookmarkWidget = class extends WidgetType {
+var BookmarkWidget = class extends WidgetType2 {
   constructor(_anchor, _id, _handleClick) {
     super();
     this._anchor = _anchor;
     this._id = _id;
     this._handleClick = _handleClick;
-    invariant3(this._id, void 0, {
-      F: __dxlog_file5,
-      L: 153,
+    invariant2(this._id, void 0, {
+      F: __dxlog_file3,
+      L: 168,
       S: this,
       A: [
         "this._id",
@@ -1143,9 +1228,10 @@ var BookmarkWidget = class extends WidgetType {
 var comments = (options = {}) => {
   const handleSelect = debounce((state) => options.onSelect?.(state), 200);
   const createCommentThread = (view) => {
-    invariant3(options.onCreate, void 0, {
-      F: __dxlog_file5,
-      L: 207,
+    const cursorConverter3 = view.state.facet(CursorConverter);
+    invariant2(options.onCreate, void 0, {
+      F: __dxlog_file3,
+      L: 224,
       S: void 0,
       A: [
         "options.onCreate",
@@ -1156,8 +1242,7 @@ var comments = (options = {}) => {
     if (from === to) {
       return false;
     }
-    const model = view.state.field(modelState);
-    const relPos = model?.getCursorFromRange?.({
+    const relPos = getCursorFromRange(cursorConverter3, {
       from,
       to
     });
@@ -1189,7 +1274,7 @@ var comments = (options = {}) => {
     }
     return false;
   };
-  const bookmarksViewPlugin = ViewPlugin3.fromClass(class BookmarkViewPlugin {
+  const bookmarksViewPlugin = ViewPlugin4.fromClass(class BookmarkViewPlugin {
     static {
       // Match markdown footnotes (option).
       // https://www.markdownguide.org/extended-syntax/#footnotes
@@ -1197,7 +1282,7 @@ var comments = (options = {}) => {
         regexp: /\[\^(\w+)\]/g,
         decoration: (match, view, pos) => {
           const id = match[1];
-          return Decoration2.replace({
+          return Decoration3.replace({
             id,
             widget: new BookmarkWidget(pos, id)
           });
@@ -1207,20 +1292,20 @@ var comments = (options = {}) => {
     constructor(view) {
       this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.createDeco(view);
     }
-    update(update4) {
-      this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update4, this.bookmarks);
+    update(update2) {
+      this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update2, this.bookmarks);
     }
   }, {
     decorations: (instance) => instance.bookmarks,
-    provide: (plugin) => EditorView4.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.bookmarks || Decoration2.none;
+    provide: (plugin) => EditorView5.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.bookmarks || Decoration3.none;
     })
   });
   return [
     bookmarksViewPlugin,
     commentsStateField,
     highlightDecorations,
-    styles2,
+    styles3,
     //
     // Keymap.
     //
@@ -1263,37 +1348,28 @@ var comments = (options = {}) => {
     // Monitor cursor movement and text updates.
     // TODO(burdon): Is there a better (finer grained) way to do this?
     //
-    EditorView4.updateListener.of(({ view, state, startState, changes }) => {
+    EditorView5.updateListener.of(({ view, state, changes }) => {
+      const cursorConverter3 = view.state.facet(CursorConverter);
       {
         let mod = false;
-        const model = state.field(modelState);
         const { active, ranges } = state.field(commentsStateField);
         changes.iterChanges((from, to, from2, to2) => {
-          invariant3(model, void 0, {
-            F: __dxlog_file5,
-            L: 336,
-            S: void 0,
-            A: [
-              "model",
-              ""
-            ]
-          });
           ranges.forEach((range) => {
             if (from2 === to2) {
-              const newRange = model.getRangeFromCursor(range.cursor);
+              const newRange = getRangeFromCursor(cursorConverter3, range.cursor);
               if (!newRange || newRange.to - newRange.from === 0) {
-                log3.info("deleted comment", {
+                log2.info("deleted comment", {
                   thread: range.id
                 }, {
-                  F: __dxlog_file5,
-                  L: 342,
+                  F: __dxlog_file3,
+                  L: 358,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
               }
             }
             if (from <= range.to) {
-              const newRange = model.getRangeFromCursor(range.cursor);
+              const newRange = getRangeFromCursor(cursorConverter3, range.cursor);
               Object.assign(range, newRange);
               mod = true;
             }
@@ -1342,18 +1418,34 @@ var comments = (options = {}) => {
     })
   ];
 };
+var getCursorFromRange = (cursorConverter3, range) => {
+  const from = cursorConverter3.toCursor(range.from);
+  const to = cursorConverter3.toCursor(range.to, -1);
+  return [
+    from,
+    to
+  ].join(":");
+};
+var getRangeFromCursor = (cursorConverter3, cursor) => {
+  const parts = cursor.split(":");
+  const from = cursorConverter3.fromCursor(parts[0]);
+  const to = cursorConverter3.fromCursor(parts[1]);
+  return from !== void 0 && to !== void 0 ? {
+    from,
+    to
+  } : void 0;
+};
 
 // packages/ui/react-ui-editor/src/extensions/hr.ts
-import { Decoration as Decoration3, EditorView as EditorView5, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
-import get3 from "lodash.get";
-var styles3 = EditorView5.baseTheme({
+import { Decoration as Decoration4, EditorView as EditorView6, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin5, WidgetType as WidgetType3 } from "@codemirror/view";
+var styles4 = EditorView6.baseTheme({
   "& .cm-hr": {
     // TODO(burdon): ???
     // Note that block-level decorations should not have vertical margins,
-    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
+    borderBottom: `1px solid ${getToken("extend.colors.neutral.200")}`
   }
 });
-var HorizontalRuleWidget = class extends WidgetType2 {
+var HorizontalRuleWidget = class extends WidgetType3 {
   constructor(_pos) {
     super();
     this._pos = _pos;
@@ -1369,41 +1461,63 @@ var HorizontalRuleWidget = class extends WidgetType2 {
 };
 var placeholderMatcher = new MatchDecorator2({
   regexp: /^---$/g,
-  decoration: (match, view, pos) => Decoration3.replace({
+  decoration: (match, view, pos) => Decoration4.replace({
     widget: new HorizontalRuleWidget(pos)
   })
 });
 var hr = () => [
-  styles3,
-  ViewPlugin4.fromClass(class {
+  styles4,
+  ViewPlugin5.fromClass(class {
     constructor(view) {
       this.rules = placeholderMatcher.createDeco(view);
     }
-    update(update4) {
-      this.rules = placeholderMatcher.updateDeco(update4, this.rules);
+    update(update2) {
+      this.rules = placeholderMatcher.updateDeco(update2, this.rules);
     }
   }, {
     decorations: (instance) => instance.rules,
     // TODO(burdon): Is this really atomic (cursor can move into ---).
-    provide: (plugin) => EditorView5.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.rules || Decoration3.none;
+    provide: (plugin) => EditorView6.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.rules || Decoration4.none;
     })
   })
 ];
 
 // packages/ui/react-ui-editor/src/extensions/image.ts
 import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder, StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration4, EditorView as EditorView6, WidgetType as WidgetType3 } from "@codemirror/view";
+import { StateField as StateField3 } from "@codemirror/state";
+import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
-  return StateField4.define({
-    create: (state) => update(state, options),
-    update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView6.decorations.from(field)
+  return StateField3.define({
+    create: (state) => {
+      return Decoration5.set(buildDecorations(0, state.doc.length, state));
+    },
+    update: (value, tr) => {
+      if (!tr.docChanged && !tr.selection) {
+        return value;
+      }
+      const cursor = tr.state.selection.main.head;
+      const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
+      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);
+      });
+      from = tr.state.doc.lineAt(from).from;
+      to = tr.state.doc.lineAt(to).to;
+      return value.map(tr.changes).update({
+        filterFrom: from,
+        filterTo: to,
+        filter: () => false,
+        add: buildDecorations(from, to, tr.state)
+      });
+    },
+    provide: (field) => EditorView7.decorations.from(field)
   });
 };
-var update = (state, options) => {
-  const builder = new RangeSetBuilder();
+var buildDecorations = (from, to, state) => {
+  const decorations = [];
   const cursor = state.selection.main.head;
   syntaxTree(state).iterate({
     enter: (node) => {
@@ -1412,22 +1526,23 @@ var update = (state, options) => {
         if (urlNode) {
           const hide = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
-          builder.add(hide ? node.from : node.to, node.to, Decoration4.replace({
+          decorations.push(Decoration5.replace({
             block: true,
             widget: new ImageWidget(url)
-          }));
+          }).range(hide ? node.from : node.to, node.to));
         }
       }
-    }
+    },
+    from,
+    to
   });
-  return builder.finish();
+  return decorations;
 };
-var ImageWidget = class extends WidgetType3 {
+var ImageWidget = class extends WidgetType4 {
   constructor(_url) {
     super();
     this._url = _url;
   }
-  // TODO(burdon): Does this need to be unique for each position?
   eq(other) {
     return this._url === other._url;
   }
@@ -1435,58 +1550,55 @@ var ImageWidget = class extends WidgetType3 {
     const img = document.createElement("img");
     img.setAttribute("src", this._url);
     img.setAttribute("class", "cm-image");
+    img.onload = () => img.classList.add("cm-loaded-image");
     return img;
   }
 };
 
 // packages/ui/react-ui-editor/src/extensions/link.ts
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType4, hoverTooltip as hoverTooltip2 } from "@codemirror/view";
+import { RangeSetBuilder } from "@codemirror/state";
+import { Decoration as Decoration6, WidgetType as WidgetType5, hoverTooltip as hoverTooltip2, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
-var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
 var link = (options = {}) => {
   const extensions = [
-    StateField5.define({
-      create: (state) => update2(state, options),
-      update: (_, tr) => update2(tr.state, options),
-      provide: (field) => EditorView7.decorations.from(field)
+    ViewPlugin6.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations2(view, options);
+      }
+      update(update2) {
+        if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
+          this.decorations = buildDecorations2(update2.view, options);
+        }
+      }
+    }, {
+      decorations: (v) => v.decorations
     })
   ];
   if (options.onHover) {
     extensions.push(
       // https://codemirror.net/examples/tooltip
       // https://codemirror.net/docs/ref/#view.hoverTooltip
-      // https://github.com/codemirror/view/blob/main/src/tooltip.ts
-      hoverTooltip2((view, pos) => {
-        const { from, text } = view.state.doc.lineAt(pos);
-        const p = pos - from;
-        let idx = 0;
-        let match;
-        do {
-          match = text.substring(idx).match(markdownLinkRegexp);
-          if (!match) {
-            match = void 0;
-            break;
-          }
-          idx = text.indexOf(match[0]);
-          if (p >= idx && p < idx + match[0].length) {
-            break;
-          }
-          idx += match[0].length;
-        } while (true);
-        if (!match) {
+      // https://github.com/codemirror/view/blob/main/src/tooltip.ts
+      hoverTooltip2((view, pos, side) => {
+        const syntax = syntaxTree2(view.state).resolveInner(pos, side);
+        let link2 = null;
+        for (let i = 0, node = syntax; !link2 && node && i < 5; node = node.parent, i++) {
+          link2 = node.name === "Link" ? node : null;
+        }
+        const url = link2 && link2.getChild("URL");
+        if (!url || !link2) {
           return null;
         }
-        const [, , url] = match ?? [];
+        const urlText = view.state.sliceDoc(url.from, url.to);
         return {
-          pos: idx + from,
-          end: idx + from + match[0].length,
+          pos: link2.from,
+          end: link2.to,
           above: true,
           create: () => {
             const el = document.createElement("div");
             el.className = tooltipContent({}, "pli-2 plb-1");
-            options.onHover(el, url);
+            options.onHover(el, urlText);
             return {
               dom: el,
               offset: {
@@ -1501,15 +1613,14 @@ var link = (options = {}) => {
   }
   return extensions;
 };
-var LinkButton = class extends WidgetType4 {
-  constructor(_pos, _url, _onAttach) {
+var LinkButton = class extends WidgetType5 {
+  constructor(_url, _onAttach) {
     super();
-    this._pos = _pos;
     this._url = _url;
     this._onAttach = _onAttach;
   }
   eq(other) {
-    return this._pos === other._pos && this._url === other._url;
+    return this._url === other._url;
   }
   toDOM(view) {
     const el = document.createElement("span");
@@ -1517,7 +1628,7 @@ var LinkButton = class extends WidgetType4 {
     return el;
   }
 };
-var LinkText = class extends WidgetType4 {
+var LinkText = class extends WidgetType5 {
   constructor(_text, _url) {
     super();
     this._text = _text;
@@ -1546,33 +1657,38 @@ var LinkText = class extends WidgetType4 {
     return link2;
   }
 };
-var update2 = (state, options) => {
-  const builder = new RangeSetBuilder2();
+var buildDecorations2 = (view, options) => {
+  const builder = new RangeSetBuilder();
+  const { state } = view;
   const cursor = state.selection.main.head;
-  syntaxTree2(state).iterate({
-    enter: (node) => {
-      if (node.name === "Link") {
-        const marks2 = node.node.getChildren("LinkMark");
-        const text = marks2.length >= 2 ? state.sliceDoc(marks2[0].to, marks2[1].from) : "";
-        const urlNode = node.node.getChild("URL");
-        const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
-        if (!url) {
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree2(state).iterate({
+      enter: (node) => {
+        if (node.name === "Link") {
+          const marks2 = node.node.getChildren("LinkMark");
+          const text = marks2.length >= 2 ? state.sliceDoc(marks2[0].to, marks2[1].from) : "";
+          const urlNode = node.node.getChild("URL");
+          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
+          if (!url) {
+            return false;
+          }
+          if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
+            builder.add(node.from, node.to, Decoration6.replace({
+              widget: new LinkText(text, options.link ? url : void 0)
+            }));
+          }
+          if (options.onRender) {
+            builder.add(node.to, node.to, Decoration6.replace({
+              widget: new LinkButton(url, options.onRender)
+            }));
+          }
           return false;
         }
-        if (state.readOnly || cursor < node.from || cursor > node.to) {
-          builder.add(node.from, node.to, Decoration5.replace({
-            widget: new LinkText(text, options.link ? url : void 0)
-          }));
-        }
-        if (options.onRender) {
-          builder.add(node.to, node.to, Decoration5.replace({
-            widget: new LinkButton(node.from, url, options.onRender)
-          }));
-        }
-        return false;
-      }
-    }
-  });
+      },
+      from,
+      to
+    });
+  }
   return builder.finish();
 };
 
@@ -1584,8 +1700,8 @@ var listener = ({ onFocus, onChange }) => {
     onFocus(focused);
     return null;
   }));
-  onChange && extensions.push(EditorView8.updateListener.of((update4) => {
-    onChange(update4.state.doc.toString());
+  onChange && extensions.push(EditorView8.updateListener.of((update2) => {
+    onChange(update2.state.doc.toString());
   }));
   return extensions;
 };
@@ -1593,7 +1709,7 @@ var listener = ({ onFocus, onChange }) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-import { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
+import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
 import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { searchKeymap } from "@codemirror/search";
@@ -1602,11 +1718,10 @@ import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/the
 import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView9, highlightActiveLine, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
-import { markdownLanguage } from "@codemirror/lang-markdown";
+import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
 import { tags, styleTags, Tag } from "@lezer/highlight";
 import { Table } from "@lezer/markdown";
-import get4 from "lodash.get";
 var markdownTags = {
   Blockquote: Tag.define(),
   CodeMark: Tag.define(),
@@ -1790,9 +1905,9 @@ var markdownHighlightStyle = (readonly) => {
       class: "font-mono"
     }
   ], {
-    scope: markdownLanguage,
+    scope: markdownLanguage2,
     all: {
-      fontFamily: get4(tokens, "fontFamily.body", []).join(",")
+      fontFamily: getToken("fontFamily.body", []).join(",")
     }
   });
 };
@@ -1822,7 +1937,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
       // NOTE: This extends the parser; it doesn't affect rendering.
       // https://github.github.com/gfm
       // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-      base: markdownLanguage2,
+      base: markdownLanguage3,
       // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
       // Parser extensions.
@@ -1873,24 +1988,19 @@ var mention = ({ onSearch }) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/mermaid.ts
-var mermaid = () => {
-  return [];
-};
-
 // packages/ui/react-ui-editor/src/extensions/table.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView10, WidgetType as WidgetType5 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField4 } from "@codemirror/state";
+import { Decoration as Decoration7, EditorView as EditorView10, WidgetType as WidgetType6 } from "@codemirror/view";
 var table = (options = {}) => {
-  return StateField6.define({
-    create: (state) => update3(state, options),
-    update: (_, tr) => update3(tr.state, options),
+  return StateField4.define({
+    create: (state) => update(state, options),
+    update: (_, tr) => update(tr.state, options),
     provide: (field) => EditorView10.decorations.from(field)
   });
 };
-var update3 = (state, options) => {
-  const builder = new RangeSetBuilder3();
+var update = (state, options) => {
+  const builder = new RangeSetBuilder2();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -1930,23 +2040,22 @@ var update3 = (state, options) => {
   });
   tables.forEach((table2) => {
     const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
-    hide && builder.add(table2.from, table2.to, Decoration6.replace({
-      block: true,
+    hide && builder.add(table2.from, table2.to, Decoration7.replace({
       widget: new TableWidget(table2)
     }));
-    builder.add(table2.from, table2.to, Decoration6.mark({
+    builder.add(table2.from, table2.to, Decoration7.mark({
       class: "cm-table"
     }));
   });
   return builder.finish();
 };
-var TableWidget = class extends WidgetType5 {
+var TableWidget = class extends WidgetType6 {
   constructor(_table) {
     super();
     this._table = _table;
   }
   eq(other) {
-    return this._table.from === other?._table?.from;
+    return this._table.header?.join() === other._table.header?.join() && this._table.rows?.join() === other._table.rows?.join();
   }
   toDOM(view) {
     const table2 = document.createElement("table");
@@ -1972,26 +2081,28 @@ var TableWidget = class extends WidgetType5 {
     }
     return table2;
   }
+  ignoreEvent(e) {
+    return !/^mouse/.test(e.type);
+  }
 };
 
 // packages/ui/react-ui-editor/src/extensions/tasklist.ts
-import { EditorView as EditorView11, Decoration as Decoration7, WidgetType as WidgetType6, MatchDecorator as MatchDecorator3, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
-var styles4 = EditorView11.baseTheme({
+import { EditorView as EditorView11, Decoration as Decoration8, WidgetType as WidgetType7, MatchDecorator as MatchDecorator3, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+var styles5 = EditorView11.baseTheme({
   "& .cm-task-item": {
     paddingLeft: "4px",
     paddingRight: "8px"
   }
 });
-var CheckboxWidget = class extends WidgetType6 {
-  constructor(_pos, _checked, _indent, _onCheck) {
+var CheckboxWidget = class extends WidgetType7 {
+  constructor(_checked, _indent, _onCheck) {
     super();
-    this._pos = _pos;
     this._checked = _checked;
     this._indent = _indent;
     this._onCheck = _onCheck;
   }
   eq(other) {
-    return this._pos === other._pos && this._checked === other._checked && this._indent === other._indent;
+    return this._checked === other._checked && this._indent === other._indent;
   }
   toDOM(view) {
     const wrap = document.createElement("span");
@@ -2022,8 +2133,8 @@ var tasklist = (options = {}) => {
     decoration: (match, view, pos) => {
       const indent = Math.floor(match[1].length / 2);
       const checked = match[2] === "x" || match[2] === "X";
-      return Decoration7.replace({
-        widget: new CheckboxWidget(pos, checked, indent, view.state.readOnly ? void 0 : (checked2) => {
+      return Decoration8.replace({
+        widget: new CheckboxWidget(checked, indent, view.state.readOnly ? void 0 : (checked2) => {
           const idx = pos + match[0].indexOf("[") + 1;
           view.dispatch({
             changes: {
@@ -2040,22 +2151,22 @@ var tasklist = (options = {}) => {
       });
     }
   });
-  const tasks = ViewPlugin5.fromClass(class {
+  const tasks = ViewPlugin7.fromClass(class {
     constructor(view) {
       this.tasks = taskMatcher.createDeco(view);
     }
-    update(update4) {
-      this.tasks = taskMatcher.updateDeco(update4, this.tasks);
+    update(update2) {
+      this.tasks = taskMatcher.updateDeco(update2, this.tasks);
     }
   }, {
     decorations: (value) => value.tasks,
     provide: (plugin) => EditorView11.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.tasks || Decoration7.none;
+      return view.plugin(plugin)?.tasks || Decoration8.none;
     })
   });
   return [
     tasks,
-    styles4
+    styles5
   ];
 };
 
@@ -2116,8 +2227,29 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   ];
 };
 
+// packages/ui/react-ui-editor/src/extensions/yjs/yjs.ts
+import { yCollab } from "y-codemirror.next";
+
+// packages/ui/react-ui-editor/src/extensions/yjs/cursor.ts
+import * as Y from "yjs";
+import { arrayToString, stringToArray } from "@dxos/util";
+var cursorConverter2 = (text) => ({
+  toCursor: (index, assoc) => {
+    return arrayToString(Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(text, index, assoc)));
+  },
+  fromCursor: (cursor) => {
+    return Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(stringToArray(cursor)), text.doc)?.index ?? 0;
+  }
+});
+
+// packages/ui/react-ui-editor/src/extensions/yjs/yjs.ts
+var yjs = (content, awareness2) => [
+  CursorConverter.of(cursorConverter2(content)),
+  yCollab(content, awareness2)
+];
+
 // packages/ui/react-ui-editor/src/themes/default.ts
-import get5 from "lodash.get";
+import get3 from "lodash.get";
 var defaultTheme = {
   //
   // Main layout:
@@ -2146,21 +2278,21 @@ var defaultTheme = {
   "&.cm-focused": {
     outline: "none"
   },
-  "& .cm-scroller": {
+  ".cm-scroller": {
     overflow: "visible",
-    fontFamily: get5(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   },
-  "& .cm-content": {
+  ".cm-content": {
     padding: 0,
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
     fontSize: "16px"
   },
   "&light .cm-content": {
-    color: get5(tokens, "extend.colors.neutral.900", "black"),
+    color: get3(tokens, "extend.colors.neutral.900", "black"),
     caretColor: "black"
   },
   "&dark .cm-content": {
-    color: get5(tokens, "extend.colors.neutral.100", "white"),
+    color: get3(tokens, "extend.colors.neutral.100", "white"),
     caretColor: "white"
   },
   //
@@ -2172,41 +2304,41 @@ var defaultTheme = {
   "&dark .cm-cursor, &dark .cm-dropCursor": {
     borderLeft: "2px solid white"
   },
-  "& .cm-placeholder": {
+  ".cm-placeholder": {
     fontWeight: 100
   },
   //
   // line
   //
-  "& .cm-line": {
+  ".cm-line": {
     paddingInline: 0
   },
-  "& .cm-activeLine": {
+  ".cm-activeLine": {
     background: "inherit"
   },
   //
   // Selection
   //
   "&light .cm-selectionBackground": {
-    background: get5(tokens, "extend.colors.primary.100")
+    background: get3(tokens, "extend.colors.primary.100")
   },
   "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get5(tokens, "extend.colors.primary.200")
+    background: get3(tokens, "extend.colors.primary.200")
   },
   "&dark .cm-selectionBackground": {
-    background: get5(tokens, "extend.colors.primary.700")
+    background: get3(tokens, "extend.colors.primary.700")
   },
   "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get5(tokens, "extend.colors.primary.600")
+    background: get3(tokens, "extend.colors.primary.600")
   },
   //
   // Search
   //
   "&light .cm-searchMatch": {
-    backgroundColor: get5(tokens, "extend.colors.yellow.100")
+    backgroundColor: get3(tokens, "extend.colors.yellow.100")
   },
   "&dark .cm-searchMatch": {
-    backgroundColor: get5(tokens, "extend.colors.yellow.700")
+    backgroundColor: get3(tokens, "extend.colors.yellow.700")
   },
   //
   // collaboration
@@ -2218,95 +2350,101 @@ var defaultTheme = {
   "&dark .cm-ySelection, &dark .cm-yLineSelection": {
     mixBlendMode: "screen"
   },
-  "& .cm-ySelectionInfo": {
+  ".cm-ySelectionInfo": {
     padding: "2px 4px",
     marginBlockStart: "-4px"
   },
-  "& .cm-ySelection, & .cm-selectionMatch": {
+  ".cm-ySelection, & .cm-selectionMatch": {
     paddingBlockStart: ".15em",
     paddingBlockEnd: ".15em"
   },
-  "& .cm-ySelectionCaret": {
+  ".cm-ySelectionCaret": {
     display: "inline-block",
     insetBlockStart: ".1em",
     blockSize: "1.4em",
     verticalAlign: "top"
   },
-  "& .cm-yLineSelection": {
+  ".cm-yLineSelection": {
     margin: 0
   },
   //
   // link
   //
-  "& .cm-link": {
-    color: get5(tokens, "extend.colors.primary.500"),
+  ".cm-link": {
+    color: get3(tokens, "extend.colors.primary.500"),
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem",
-    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   //
   // tooltip
   //
-  "& .cm-tooltip": {
+  ".cm-tooltip": {
     border: "none"
   },
-  "& .cm-tooltip-below": {},
+  ".cm-tooltip-below": {},
   //
   // autocomplete
   //
-  "& .cm-tooltip-autocomplete": {
+  ".cm-tooltip-autocomplete": {
     marginTop: "4px",
     marginLeft: "-3px"
   },
-  "& .cm-tooltip-autocomplete ul li": {},
-  "& .cm-tooltip-autocomplete ul li[aria-selected]": {},
-  "& .cm-completionIcon": {
+  ".cm-tooltip-autocomplete ul li": {},
+  ".cm-tooltip-autocomplete ul li[aria-selected]": {},
+  ".cm-completionIcon": {
     display: "none"
   },
-  "& .cm-completionLabel": {
-    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+  ".cm-completionLabel": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
-  "& .cm-completionMatchedText": {
+  ".cm-completionMatchedText": {
     textDecoration: "none"
   },
   //
   // widgets
   //
-  "& .cm-widgetBuffer": {
+  ".cm-widgetBuffer": {
     display: "none",
     height: 0
   },
   //
   // table
   //
-  "& .cm-table *": {
-    fontFamily: `${get5(tokens, "fontFamily.mono", []).join(",")} !important`,
+  ".cm-table *": {
+    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
     textDecoration: "none !important"
   },
-  "& .cm-table-head": {
+  ".cm-table-head": {
     padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get5(tokens, "extend.colors.neutral.500")}`,
+    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
     fontWeight: 100,
     textAlign: "left",
-    color: get5(tokens, "extend.colors.neutral.500")
+    color: get3(tokens, "extend.colors.neutral.500")
   },
-  "& .cm-table-cell": {
+  ".cm-table-cell": {
     padding: "2px 16px 2px 0px"
   },
   //
   // image
   //
-  "& .cm-image": {
-    margin: "0.5rem 0"
+  ".cm-image": {
+    display: "block",
+    height: "0"
+  },
+  ".cm-image.cm-loaded-image": {
+    height: "auto",
+    borderTop: "0.5rem solid transparent",
+    borderBottom: "0.5rem solid transparent"
   },
   //
   // font size
   // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
   //
-  ...Object.keys(get5(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
-    const height = get5(tokens, [
+  ...Object.keys(get3(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
+    const height = get3(tokens, [
       "extend",
       "fontSize",
       fontSize,
@@ -2340,51 +2478,51 @@ var defaultTheme = {
   *   </div>
   * </div
   */
-  "& .cm-panels": {
-    border: `1px solid ${get5(tokens, "extend.colors.neutral.200")}`
+  ".cm-panels": {
+    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
   },
-  "& .cm-panel": {
-    background: get5(tokens, "extend.colors.neutral.50"),
-    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+  ".cm-panel": {
+    background: get3(tokens, "extend.colors.neutral.50"),
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
-  "& .cm-button": {
+  ".cm-button": {
     margin: "4px",
-    fontFamily: get5(tokens, "fontFamily.body", []).join(","),
-    background: get5(tokens, "extend.colors.neutral.100"),
+    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
+    background: get3(tokens, "extend.colors.neutral.100"),
     backgroundImage: "none",
     border: "none",
     "&:hover": {
-      background: get5(tokens, "extend.colors.neutral.200")
+      background: get3(tokens, "extend.colors.neutral.200")
     },
     "&:active": {
-      background: get5(tokens, "extend.colors.neutral.300"),
+      background: get3(tokens, "extend.colors.neutral.300"),
       backgroundImage: "none"
     }
   },
-  "& .cm-panel input[type=checkbox]": {
+  ".cm-panel input[type=checkbox]": {
     marginRight: "0.4rem !important"
   }
 };
 var textTheme = {
-  "& .cm-scroller": {
-    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+  ".cm-scroller": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
-  "& .cm-placeholder": {
-    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+  ".cm-placeholder": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   }
 };
 var markdownTheme = {
   // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
-  "& .cm-placeholder": {
-    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+  ".cm-placeholder": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   }
 };
 var codeTheme = {
-  "& .cm-scroller": {
-    fontFamily: get5(tokens, "fontFamily.mono", []).join(",")
+  ".cm-scroller": {
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   },
-  "& .cm-placeholder": {
-    fontFamily: get5(tokens, "fontFamily.mono", []).join(",")
+  ".cm-placeholder": {
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   }
 };
 
@@ -2398,8 +2536,8 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
-  const [root, setRoot] = useState2(null);
-  const [{ state = void 0, view = void 0 } = {}, setEditor] = useState2();
+  const [root, setRoot] = useState(null);
+  const [{ state = void 0, view = void 0 } = {}, setEditor] = useState();
   useImperativeHandle(forwardedRef, () => ({
     root,
     state,
@@ -2409,10 +2547,10 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
     state,
     root
   ]);
-  const { awareness, peer } = model;
-  useEffect2(() => {
-    if (awareness && peer) {
-      awareness.setLocalStateField("user", {
+  const { awareness: awareness2, peer } = model;
+  useEffect(() => {
+    if (awareness2 && peer) {
+      awareness2.setLocalStateField("user", {
         name: peer.name ?? generateName(peer.id),
         color: getColorForValue({
           value: peer.id,
@@ -2426,11 +2564,11 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
       });
     }
   }, [
-    awareness,
+    awareness2,
     peer,
     themeMode
   ]);
-  useEffect2(() => {
+  useEffect(() => {
     if (view && comments2?.length) {
       view.dispatch({
         effects: setCommentRange.of({
@@ -2443,7 +2581,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
     view,
     comments2
   ]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!root) {
       return;
     }
@@ -2561,28 +2699,379 @@ var defaultMarkdownSlots = {
     theme: markdownTheme
   }
 };
+
+// packages/ui/react-ui-editor/src/hooks/automerge.ts
+import get4 from "lodash.get";
+import { getRawDoc } from "@dxos/echo-schema";
+import { isNotNullOrUndefined } from "@dxos/util";
+
+// packages/ui/react-ui-editor/src/hooks/awareness-provider.ts
+import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
+import { Context as Context2 } from "@dxos/context";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { log as log3 } from "@dxos/log";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/awareness-provider.ts";
+var DEBOUNCE_INTERVAL = 100;
+var SpaceAwarenessProvider = class {
+  constructor(params) {
+    this.remoteStateChange = new Event2();
+    this._remoteStates = /* @__PURE__ */ new Map();
+    this._space = params.space;
+    this._channel = params.channel;
+    this._peerId = params.peerId;
+    this._info = params.info;
+  }
+  open() {
+    this._ctx = new Context2();
+    this._postTask = new DeferredTask(this._ctx, async () => {
+      if (this._localState) {
+        await this._space.postMessage(this._channel, {
+          kind: "post",
+          state: this._localState
+        });
+        await sleep(DEBOUNCE_INTERVAL);
+      }
+    });
+    const unsubscribe = this._space.listen(this._channel, (message) => {
+      switch (message.payload.kind) {
+        case "query": {
+          this._handleQueryMessage();
+          break;
+        }
+        case "post": {
+          this._handlePostMessage(message.payload);
+          break;
+        }
+      }
+    });
+    this._ctx.onDispose(unsubscribe);
+    void this._space.postMessage(this._channel, {
+      kind: "query"
+    }).catch((err) => {
+      log3.debug("failed to query awareness", {
+        err
+      }, {
+        F: __dxlog_file4,
+        L: 85,
+        S: this,
+        C: (f, a) => f(...a)
+      });
+    });
+  }
+  close() {
+    void this._ctx?.dispose();
+    this._ctx = void 0;
+    this._postTask = void 0;
+  }
+  update(position) {
+    invariant3(this._postTask, void 0, {
+      F: __dxlog_file4,
+      L: 96,
+      S: this,
+      A: [
+        "this._postTask",
+        ""
+      ]
+    });
+    this._localState = {
+      peerId: this._peerId,
+      position,
+      info: this._info
+    };
+    this._postTask.schedule();
+  }
+  getRemoteStates() {
+    return Array.from(this._remoteStates.values());
+  }
+  _handleQueryMessage() {
+    invariant3(this._postTask, void 0, {
+      F: __dxlog_file4,
+      L: 111,
+      S: this,
+      A: [
+        "this._postTask",
+        ""
+      ]
+    });
+    this._postTask.schedule();
+  }
+  _handlePostMessage(message) {
+    invariant3(message.kind === "post", void 0, {
+      F: __dxlog_file4,
+      L: 116,
+      S: this,
+      A: [
+        "message.kind === 'post'",
+        ""
+      ]
+    });
+    this._remoteStates.set(message.state.peerId, message.state);
+    this.remoteStateChange.emit();
+  }
+};
+
+// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+import { StateField as StateField5 } from "@codemirror/state";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { isAutomergeObject } from "@dxos/react-client/echo";
+
+// packages/ui/react-ui-editor/src/hooks/yjs.ts
+import * as decoding from "lib0/decoding";
+import * as encoding from "lib0/encoding";
+import { Observable } from "lib0/observable";
+import * as YP from "y-protocols/awareness";
+import * as Y2 from "yjs";
+import { invariant as invariant4 } from "@dxos/invariant";
+import { log as log4 } from "@dxos/log";
+import { arrayToString as arrayToString2, stringToArray as stringToArray2 } from "@dxos/util";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs.ts";
+var createYjsModel = ({ identity, space, text }) => {
+  invariant4(text?.doc && text?.content, void 0, {
+    F: __dxlog_file5,
+    L: 23,
+    S: void 0,
+    A: [
+      "text?.doc && text?.content",
+      ""
+    ]
+  });
+  const provider = space ? new YAwarenessProvider({
+    space,
+    doc: text.doc,
+    channel: `yjs.awareness.${text.id}`
+  }) : void 0;
+  const model = {
+    id: text.doc.guid,
+    content: text.content,
+    text: () => text.content.toString(),
+    // https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
+    // TODO(dmaretskyi): Refactor as cursor-converter.
+    getCursorFromRange: (range) => {
+      const from = Y2.encodeRelativePosition(Y2.createRelativePositionFromTypeIndex(text.content, range.from));
+      const to = Y2.encodeRelativePosition(Y2.createRelativePositionFromTypeIndex(text.content, range.to, -1));
+      return [
+        arrayToString2(from),
+        arrayToString2(to)
+      ].join(":");
+    },
+    getRangeFromCursor: (cursor) => {
+      invariant4(text.doc, void 0, {
+        F: __dxlog_file5,
+        L: 40,
+        S: void 0,
+        A: [
+          "text.doc",
+          ""
+        ]
+      });
+      const parts = cursor.split(":");
+      const from = Y2.createAbsolutePositionFromRelativePosition(Y2.decodeRelativePosition(stringToArray2(parts[0])), text.doc);
+      const to = Y2.createAbsolutePositionFromRelativePosition(Y2.decodeRelativePosition(stringToArray2(parts[1])), text.doc);
+      return from && to ? {
+        from: from.index,
+        to: to.index
+      } : void 0;
+    },
+    extension: [
+      modelState.init(() => model),
+      yjs(text.content, provider?.awareness)
+    ],
+    awareness: provider?.awareness,
+    peer: identity ? {
+      id: identity.identityKey.toHex(),
+      name: identity.profile?.displayName
+    } : void 0
+  };
+  return model;
+};
+var messageAwareness = 1;
+var messageQueryAwareness = 3;
+var YAwarenessProvider = class extends Observable {
+  constructor({ space, doc, channel, awareness: awareness2 }) {
+    super();
+    this._space = space;
+    this._awareness = awareness2 ?? new YP.Awareness(doc);
+    this._channel = channel;
+    this._clientId = doc.clientID;
+    this._awareness.on("update", this._handleAwarenessUpdate.bind(this));
+    this._space.listen(this._channel, this._handleSpaceMessage.bind(this));
+    if (typeof window !== "undefined") {
+      window.addEventListener("beforeunload", this._handleBeforeUnload.bind(this));
+    } else if (typeof process !== "undefined") {
+      process.on("exit", this._handleBeforeUnload.bind(this));
+    }
+    const encoderAwarenessQuery = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessQuery, messageQueryAwareness);
+    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessQuery));
+    const encoderAwarenessState = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessState, messageAwareness);
+    encoding.writeVarUint8Array(encoderAwarenessState, YP.encodeAwarenessUpdate(this.awareness, [
+      this._clientId
+    ]));
+    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessState));
+  }
+  get awareness() {
+    return this._awareness;
+  }
+  _handleAwarenessUpdate({ added, updated, removed }, origin) {
+    log4("awareness update", {
+      added,
+      updated,
+      removed,
+      origin
+    }, {
+      F: __dxlog_file5,
+      L: 122,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    const changedClients = added.concat(updated).concat(removed);
+    const encoderAwareness = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwareness, messageAwareness);
+    encoding.writeVarUint8Array(encoderAwareness, YP.encodeAwarenessUpdate(this._awareness, changedClients));
+    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwareness));
+  }
+  _handleSpaceMessage({ payload }) {
+    log4("space message", payload, {
+      F: __dxlog_file5,
+      L: 131,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    const data = new Uint8Array(Array.from(Object.values(payload)));
+    const encoder = this._readMessage(data);
+    if (encoder) {
+      void this._space.postMessage(this._channel, encoding.toUint8Array(encoder));
+    }
+  }
+  _readMessage(message) {
+    const decoder = decoding.createDecoder(message);
+    const encoder = encoding.createEncoder();
+    const messageType = decoding.readVarUint(decoder);
+    let sendReply = false;
+    switch (messageType) {
+      case messageAwareness: {
+        YP.applyAwarenessUpdate(this._awareness, decoding.readVarUint8Array(decoder), this);
+        break;
+      }
+      case messageQueryAwareness: {
+        encoding.writeVarUint(encoder, messageAwareness);
+        encoding.writeVarUint8Array(encoder, YP.encodeAwarenessUpdate(this._awareness, Array.from(this._awareness.getStates().keys())));
+        sendReply = true;
+        break;
+      }
+      default: {
+        console.error("Invalid message:", messageType);
+        return encoder;
+      }
+    }
+    if (!sendReply) {
+      return null;
+    }
+    return encoder;
+  }
+  _handleBeforeUnload() {
+    YP.removeAwarenessStates(this._awareness, [
+      this._clientId
+    ], "window unload");
+  }
+};
+
+// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+var modelState = StateField5.define({
+  create: () => void 0,
+  update: (model) => model
+});
+var useTextModel = (props) => {
+  const { identity, space, text } = props;
+  const [model, setModel] = useState2(() => createModel(props));
+  useEffect2(() => setModel(createModel(props)), [
+    identity,
+    space,
+    text
+  ]);
+  return model;
+};
+var createModel = (props) => {
+  const { text } = props;
+  if (isAutomergeObject(text)) {
+    return createAutomergeModel(props);
+  } else if (text?.doc) {
+    return createYjsModel(props);
+  } else {
+    return void 0;
+  }
+};
+
+// packages/ui/react-ui-editor/src/hooks/automerge.ts
+var createAutomergeModel = ({ space, identity, text }) => {
+  const obj = text;
+  const doc = getRawDoc(obj, [
+    obj.field
+  ]);
+  const awarenessProvider = space && new SpaceAwarenessProvider({
+    space,
+    channel: `automerge.awareness.${obj.id}`,
+    info: {
+      displayName: identity?.profile?.displayName ?? "",
+      color: cursorColor.color,
+      lightColor: cursorColor.light
+    },
+    peerId: identity?.identityKey.toHex() ?? "Anonymous"
+  });
+  const model = {
+    id: obj.id,
+    content: doc,
+    text: () => get4(doc.handle.docSync(), doc.path),
+    // TODO(burdon): https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
+    extension: [
+      modelState.init(() => model),
+      automerge3({
+        handle: doc.handle,
+        path: doc.path
+      }),
+      awarenessProvider && AwarenessProvider.of(awarenessProvider),
+      awareness()
+    ].filter(isNotNullOrUndefined),
+    peer: identity ? {
+      id: identity.identityKey.toHex(),
+      name: identity.profile?.displayName
+    } : void 0
+  };
+  return model;
+};
 export {
+  AwarenessProvider,
   BaseTextEditor,
+  CursorConverter,
   Doc,
   EditorModes,
   MarkdownEditor,
+  RemoteSelectionsDecorator,
   SpaceAwarenessProvider,
   TextEditor,
   TextKind,
+  YAwarenessProvider,
   YText,
   YXmlFragment,
   autocomplete,
+  automerge3 as automerge,
+  awareness,
   basicBundle,
   blast,
+  callbackWrapper,
   code2 as code,
   codeTheme,
   comments,
-  cursorColor,
+  createAutomergeModel,
+  createYjsModel,
+  cursorConverter,
   defaultMarkdownSlots,
   defaultOptions,
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  getToken,
   hr,
   image,
   link,
@@ -2593,14 +3082,16 @@ export {
   markdownTagsExtensions,
   markdownTheme,
   mention,
-  mermaid,
   modelState,
   setCommentRange,
+  setFocus,
+  setSelection,
   table,
   tags2 as tags,
   tasklist,
   textTheme,
   typewriter,
-  useTextModel
+  useTextModel,
+  yjs
 };
 //# sourceMappingURL=index.mjs.map