@dxos/react-ui-editor 0.6.8-staging.77f93a3 → 0.6.8-staging.dec6b33

package/dist/lib/browser/index.mjs

@@ -37,1625 +37,1635 @@ import { keymap as keymap11 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
-// packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, CaretDown, Check, PencilSimpleSlash, MarkdownLogo, PencilSimple } from "@phosphor-icons/react";
-import { createContext } from "@radix-ui/react-context";
-import React3, { useEffect as useEffect2, useRef, useState as useState3 } from "react";
-import { useDropzone } from "react-dropzone";
-import { Button, DensityProvider, DropdownMenu, ElevationProvider, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
-import { getSize as getSize2 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-editor/src/extensions/annotations.ts
-import { StateField } from "@codemirror/state";
-import { Decoration, EditorView } from "@codemirror/view";
-import { isNotFalsy } from "@dxos/util";
-
-// packages/ui/react-ui-editor/src/extensions/cursor.ts
-import { Facet } from "@codemirror/state";
-var defaultCursorConverter = {
-  toCursor: (position) => position.toString(),
-  fromCursor: (cursor) => parseInt(cursor)
+// packages/ui/react-ui-editor/src/styles/markdown.ts
+import { mx } from "@dxos/react-ui-theme";
+var headings = {
+  1: "text-4xl",
+  2: "text-3xl",
+  3: "text-2xl",
+  4: "text-xl",
+  5: "text-lg",
+  6: "text-md"
 };
-var Cursor = class _Cursor {
-  static {
-    this.converter = Facet.define({
-      combine: (providers) => {
-        return providers[0] ?? defaultCursorConverter;
-      }
-    });
-  }
-  static {
-    this.getCursorFromRange = (state2, range) => {
-      const cursorConverter2 = state2.facet(_Cursor.converter);
-      const from = cursorConverter2.toCursor(range.from);
-      const to = cursorConverter2.toCursor(range.to, -1);
-      return [
-        from,
-        to
-      ].join(":");
-    };
-  }
-  static {
-    this.getRangeFromCursor = (state2, cursor) => {
-      const cursorConverter2 = state2.facet(_Cursor.converter);
-      const parts = cursor.split(":");
-      const from = cursorConverter2.fromCursor(parts[0]);
-      const to = cursorConverter2.fromCursor(parts[1]);
-      return from !== void 0 && to !== void 0 ? {
-        from,
-        to
-      } : void 0;
-    };
+var theme = {
+  mark: "opacity-50",
+  code: "font-mono !no-underline text-neutral-700 dark:text-neutral-300",
+  codeMark: "font-mono text-primary-500",
+  // TODO(burdon): Replace with widget.
+  blockquote: "pl-1 mr-1 border-is-4 border-orange-500 dark:border-orange-500 dark:text-neutral-500",
+  heading: (level) => {
+    return mx(headings[level], "dark:text-primary-400");
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/annotations.ts
-var annotationMark = Decoration.mark({
-  class: "cm-annotation"
-});
-var annotations = (options = {}) => {
-  const match = (state2) => {
-    const annotations2 = [];
-    const text = state2.doc.toString();
-    if (options.match) {
-      const matches = text.matchAll(options.match);
-      for (const match2 of matches) {
-        const from = match2.index;
-        const to = from + match2[0].length;
-        const cursor = Cursor.getCursorFromRange(state2, {
-          from,
-          to
-        });
-        annotations2.push({
-          cursor
-        });
-      }
-    }
-    return annotations2;
-  };
-  const annotationsState = StateField.define({
-    create: (state2) => {
-      return match(state2);
-    },
-    update: (value, tr) => {
-      if (!tr.changes.empty) {
-        return match(tr.state);
-      }
-      return value;
-    }
-  });
-  return [
-    annotationsState,
-    EditorView.decorations.compute([
-      annotationsState
-    ], (state2) => {
-      const annotations2 = state2.field(annotationsState);
-      const decorations = annotations2.map((annotation) => {
-        const range = Cursor.getRangeFromCursor(state2, annotation.cursor);
-        return range && annotationMark.range(range.from, range.to);
-      }).filter(isNotFalsy);
-      return Decoration.set(decorations);
-    }),
-    styles
-  ];
-};
-var styles = EditorView.baseTheme({
-  ".cm-annotation": {
-    textDecoration: "underline",
-    textDecorationStyle: "wavy",
-    textDecorationColor: "red"
-  }
-});
-
-// 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 = ({ activateOnTyping, onSearch } = {}) => {
-  const extentions = [
-    // 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({
-      activateOnTyping,
-      // closeOnBlur: false,
-      // defaultKeymap: false,
-      // TODO(burdon): Styles/fragments.
-      tooltipClass: () => "shadow rounded"
-    })
-  ];
-  if (onSearch) {
-    extentions.push(
-      // 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())
-          };
-        }
-      })
-    );
-  }
-  return extentions;
+// packages/ui/react-ui-editor/src/styles/tokens.ts
+import get from "lodash.get";
+import { tailwindConfig } from "@dxos/react-ui-theme";
+var tokens = tailwindConfig({}).theme;
+var getToken = (path, defaultValue) => {
+  const value = get(tokens, path, defaultValue);
+  return value?.toString() ?? "";
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-import { StateField as StateField2 } from "@codemirror/state";
-import { EditorView as EditorView2, ViewPlugin } from "@codemirror/view";
-import { next as A3 } from "@dxos/automerge/automerge";
-
-// packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
-import { log } from "@dxos/log";
-import { fromCursor, toCursor } from "@dxos/react-client/echo";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
-var cursorConverter = (accessor) => ({
-  toCursor: (pos, assoc) => {
-    try {
-      return toCursor(accessor, pos, assoc);
-    } catch (err) {
-      log.catch(err, void 0, {
-        F: __dxlog_file,
-        L: 15,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      return "";
-    }
+// packages/ui/react-ui-editor/src/styles/theme.ts
+var defaultTheme = {
+  "&": {},
+  "&.cm-focused": {
+    outline: "none"
   },
-  fromCursor: (cursor) => {
-    try {
-      return fromCursor(accessor, cursor);
-    } catch (err) {
-      log.catch(err, void 0, {
-        F: __dxlog_file,
-        L: 24,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      return 0;
-    }
-  }
-});
-
-// packages/ui/react-ui-editor/src/extensions/automerge/defs.ts
-import { Annotation, StateEffect } from "@codemirror/state";
-var getPath = (state2, field) => state2.field(field).path;
-var getLastHeads = (state2, field) => state2.field(field).lastHeads;
-var updateHeadsEffect = StateEffect.define({});
-var updateHeads = (newHeads) => updateHeadsEffect.of({
-  newHeads
-});
-var reconcileAnnotation = Annotation.define();
-var isReconcile = (tr) => {
-  return !!tr.annotation(reconcileAnnotation);
-};
-
-// packages/ui/react-ui-editor/src/extensions/automerge/sync.ts
-import { next as A2 } from "@dxos/automerge/automerge";
-
-// packages/ui/react-ui-editor/src/extensions/automerge/update-automerge.ts
-import { next as A } from "@dxos/automerge/automerge";
-var updateAutomerge = (field, handle, transactions, state2) => {
-  const { lastHeads, path } = state2.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) => {
-    const invertedTransactions = [];
-    for (const tr of transactions) {
-      tr.changes.iterChanges((fromA, toA, _fromB, _toB, insert) => {
-        invertedTransactions.push({
-          from: fromA,
-          del: toA - fromA,
-          insert
-        });
-      });
-    }
-    invertedTransactions.reverse().forEach(({ from, del, insert }) => {
-      A.splice(doc, path.slice(), from, del, insert.toString());
-    });
-  });
-  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: reconcileAnnotation.of(false)
-      });
-    }
-  }
-  view.dispatch({
-    selection,
-    annotations: reconcileAnnotation.of(false)
-  });
-};
-var handlePatch = (patch, target, state2) => {
-  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, state2);
-  } else {
-    return null;
-  }
-};
-var handleInsert = (target, patch) => {
-  const index = charPath(target, patch.path);
-  if (index == null) {
-    return [];
-  }
-  const text = patch.values.map((value) => value ? value.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
+  /**
+  * Scroller
+  */
+  ".cm-scroller": {
+    overflowY: "auto"
+  },
+  /**
+  * Content
+  * NOTE: Apply margins to content so that scrollbar is at the edge of the container.
+  */
+  ".cm-content": {
+    padding: "unset",
+    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
+    fontSize: "16px",
+    fontFamily: getToken("fontFamily.body"),
+    lineHeight: 1.5
+  },
+  "&light .cm-content": {
+    color: getToken("extend.semanticColors.base.fg.light", "black")
+  },
+  "&dark .cm-content": {
+    color: getToken("extend.semanticColors.base.fg.dark", "white")
+  },
+  /**
+  * Gutters
+  * NOTE: Gutters should have the same top margin as the content.
+  */
+  ".cm-gutters": {
+    background: "transparent"
+  },
+  ".cm-gutter": {},
+  ".cm-gutterElement": {
+    lineHeight: 1.5
+  },
+  //
+  // Cursor
+  //
+  "&light .cm-cursor, &light .cm-dropCursor": {
+    borderLeft: "2px solid black"
+  },
+  "&dark .cm-cursor, &dark .cm-dropCursor": {
+    borderLeft: "2px solid white"
+  },
+  "&light .cm-placeholder": {
+    color: getToken("extend.semanticColors.description.light", "rgba(0,0,0,.2)")
+  },
+  "&dark .cm-placeholder": {
+    color: getToken("extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
+  },
+  //
+  // line
+  //
+  ".cm-line": {
+    paddingInline: 0
+  },
+  ".cm-activeLine": {
+    background: "transparent"
+  },
+  //
+  // gutter
+  //
+  ".cm-lineNumbers": {
+    minWidth: "36px"
+  },
+  //
+  // Selection
+  //
+  "&light .cm-selectionBackground": {
+    background: getToken("extend.colors.primary.100")
+  },
+  "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    background: getToken("extend.colors.primary.200")
+  },
+  "&dark .cm-selectionBackground": {
+    background: getToken("extend.colors.primary.700")
+  },
+  "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    background: getToken("extend.colors.primary.600")
+  },
+  //
+  // Search
+  //
+  "&light .cm-searchMatch": {
+    backgroundColor: getToken("extend.colors.yellow.100")
+  },
+  "&dark .cm-searchMatch": {
+    backgroundColor: getToken("extend.colors.yellow.700")
+  },
+  //
+  // link
+  //
+  ".cm-link": {
+    textDecorationLine: "underline",
+    textDecorationThickness: "1px",
+    textUnderlineOffset: "2px",
+    borderRadius: ".125rem",
+    fontFamily: getToken("fontFamily.body")
+  },
+  "&light .cm-link > span": {
+    color: getToken("extend.colors.primary.600")
+  },
+  "&dark .cm-link > span": {
+    color: getToken("extend.colors.primary.400")
+  },
+  //
+  // tooltip
+  //
+  ".cm-tooltip": {},
+  "&light .cm-tooltip": {
+    background: `${getToken("extend.colors.neutral.100")} !important`
+  },
+  "&dark .cm-tooltip": {
+    background: `${getToken("extend.colors.neutral.900")} !important`
+  },
+  ".cm-tooltip-below": {},
+  //
+  // autocomplete
+  // https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
+  //
+  ".cm-tooltip.cm-tooltip-autocomplete": {
+    marginTop: "4px",
+    marginLeft: "-3px"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
+    maxHeight: "20em !important"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {},
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {},
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
+    paddingLeft: "4px !important",
+    borderBottom: "none !important",
+    color: getToken("extend.colors.primary.500")
+  },
+  ".cm-tooltip.cm-completionInfo": {
+    border: getToken("extend.colors.neutral.500"),
+    width: "360px !important",
+    margin: "-10px 1px 0 1px",
+    padding: "8px !important"
+  },
+  ".cm-completionIcon": {
+    display: "none"
+  },
+  ".cm-completionLabel": {
+    fontFamily: getToken("fontFamily.body")
+  },
+  ".cm-completionMatchedText": {
+    textDecoration: "none !important",
+    opacity: 0.5
+  },
+  // TODO(burdon): Override vars --cm-background.
+  //  https://www.npmjs.com/package/codemirror-theme-vars
+  /**
+  * Panels
+  * TODO(burdon): Needs styling attention (esp. dark mode).
+  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
+  *
+  * Find/replace panel.
+  * <div class="cm-announced">...</div>
+  * <div class="cm-scroller">...</div>
+  * <div class="cm-panels cm-panels-bottom">
+  *   <div class="cm-search cm-panel">
+  *     <input class="cm-textfield" />
+  *     <button class="cm-button">...</button>
+  *     <label><input type="checkbox" />...</label>
+  *   </div>
+  * </div
+  */
+  ".cm-panels": {},
+  ".cm-panel": {
+    fontFamily: getToken("fontFamily.body")
+  },
+  ".cm-panel input[type=checkbox]": {
+    marginRight: "0.4rem !important"
+  },
+  "&light .cm-panel": {
+    background: getToken("extend.colors.neutral.50")
+  },
+  "&dark .cm-panel": {
+    background: getToken("extend.colors.neutral.850")
+  },
+  ".cm-button": {
+    margin: "4px",
+    fontFamily: getToken("fontFamily.body"),
+    backgroundImage: "none",
+    border: "none",
+    "&:active": {
+      backgroundImage: "none"
     }
-  ];
-};
-var handlePut = (target, patch, state2) => {
-  const index = charPath(target, [
-    ...patch.path,
-    0
-  ]);
-  if (index == null) {
-    return [];
-  }
-  const length = state2.doc.length;
-  if (typeof patch.value !== "string") {
-    return [];
-  }
-  return [
-    {
-      from: 0,
-      to: length,
-      insert: patch.value
+  },
+  "&light .cm-button": {
+    background: getToken("extend.colors.neutral.100"),
+    "&:hover": {
+      background: getToken("extend.colors.neutral.200")
+    },
+    "&:active": {
+      background: getToken("extend.colors.neutral.300")
     }
-  ];
-};
-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;
+  },
+  "&dark .cm-button": {
+    background: getToken("extend.colors.neutral.800"),
+    "&:hover": {
+      background: getToken("extend.colors.neutral.700")
+    },
+    "&:active": {
+      background: getToken("extend.colors.neutral.600")
     }
+  },
+  // TODO(burdon): Factor out element specific logic.
+  //
+  // table
+  //
+  ".cm-table *": {
+    fontFamily: `${getToken("fontFamily.mono")} !important`,
+    textDecoration: "none !important"
+  },
+  ".cm-table-head": {
+    padding: "2px 16px 2px 0px",
+    textAlign: "left",
+    borderBottom: `1px solid ${getToken("extend.colors.primary.500")}`,
+    color: getToken("extend.colors.neutral.500")
+  },
+  ".cm-table-cell": {
+    padding: "2px 16px 2px 0px"
+  },
+  //
+  // image
+  //
+  ".cm-image": {
+    display: "block",
+    height: "0"
+  },
+  ".cm-image.cm-loaded-image": {
+    height: "auto",
+    borderTop: "0.5rem solid transparent",
+    borderBottom: "0.5rem solid transparent"
   }
-  const index = candidatePath[candidatePath.length - 1];
-  if (typeof index === "number") {
-    return index;
-  }
-  return null;
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/sync.ts
-var Syncer = class {
-  // prettier-ignore
-  constructor(_handle, _state) {
-    this._handle = _handle;
-    this._state = _state;
-    this._pending = false;
-  }
-  reconcile(view, editor) {
-    if (this._pending) {
-      return;
-    }
-    this._pending = true;
-    if (editor) {
-      this.onEditorChange(view);
-    } else {
-      this.onAutomergeChange(view);
-    }
-    this._pending = false;
+// packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
+import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, CaretDown, Check, PencilSimpleSlash, MarkdownLogo, PencilSimple } from "@phosphor-icons/react";
+import { createContext } from "@radix-ui/react-context";
+import React3, { useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import { useDropzone } from "react-dropzone";
+import { Button, DensityProvider, DropdownMenu, ElevationProvider, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
+import { getSize as getSize2 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-editor/src/extensions/annotations.ts
+import { StateField } from "@codemirror/state";
+import { Decoration, EditorView } from "@codemirror/view";
+import { isNotFalsy } from "@dxos/util";
+
+// packages/ui/react-ui-editor/src/extensions/cursor.ts
+import { Facet } from "@codemirror/state";
+var defaultCursorConverter = {
+  toCursor: (position) => position.toString(),
+  fromCursor: (cursor) => parseInt(cursor)
+};
+var Cursor = class _Cursor {
+  static {
+    this.converter = Facet.define({
+      combine: (providers) => {
+        return providers[0] ?? defaultCursorConverter;
+      }
+    });
   }
-  onEditorChange(view) {
-    const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
-    const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
-    if (newHeads) {
-      view.dispatch({
-        effects: updateHeads(newHeads),
-        annotations: reconcileAnnotation.of(false)
-      });
-    }
+  static {
+    this.getCursorFromRange = (state2, range) => {
+      const cursorConverter2 = state2.facet(_Cursor.converter);
+      const from = cursorConverter2.toCursor(range.from);
+      const to = cursorConverter2.toCursor(range.to, -1);
+      return [
+        from,
+        to
+      ].join(":");
+    };
   }
-  onAutomergeChange(view) {
-    const oldHeads = getLastHeads(view.state, this._state);
-    const newHeads = A2.getHeads(this._handle.docSync());
-    const diff = A2.equals(oldHeads, newHeads) ? [] : A2.diff(this._handle.docSync(), oldHeads, newHeads);
-    const selection = view.state.selection;
-    const path = getPath(view.state, this._state);
-    updateCodeMirror(view, selection, path, diff);
-    view.dispatch({
-      effects: updateHeads(newHeads),
-      annotations: reconcileAnnotation.of(false)
-    });
+  static {
+    this.getRangeFromCursor = (state2, cursor) => {
+      const cursorConverter2 = state2.facet(_Cursor.converter);
+      const parts = cursor.split(":");
+      const from = cursorConverter2.fromCursor(parts[0]);
+      const to = cursorConverter2.fromCursor(parts[1]);
+      return from !== void 0 && to !== void 0 ? {
+        from,
+        to
+      } : void 0;
+    };
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-var automerge = (accessor) => {
-  const syncState = StateField2.define({
-    create: () => ({
-      path: accessor.path.slice(),
-      lastHeads: A3.getHeads(accessor.handle.docSync()),
-      unreconciledTransactions: []
-    }),
-    update: (value, tr) => {
-      const result = {
-        path: accessor.path.slice(),
-        lastHeads: value.lastHeads,
-        unreconciledTransactions: value.unreconciledTransactions.slice()
-      };
-      let clearUnreconciled = false;
-      for (const effect of tr.effects) {
-        if (effect.is(updateHeadsEffect)) {
-          result.lastHeads = effect.value.newHeads;
-          clearUnreconciled = true;
-        }
+// packages/ui/react-ui-editor/src/extensions/annotations.ts
+var annotationMark = Decoration.mark({
+  class: "cm-annotation"
+});
+var annotations = (options = {}) => {
+  const match = (state2) => {
+    const annotations2 = [];
+    const text = state2.doc.toString();
+    if (options.match) {
+      const matches = text.matchAll(options.match);
+      for (const match2 of matches) {
+        const from = match2.index;
+        const to = from + match2[0].length;
+        const cursor = Cursor.getCursorFromRange(state2, {
+          from,
+          to
+        });
+        annotations2.push({
+          cursor
+        });
       }
-      if (clearUnreconciled) {
-        result.unreconciledTransactions = [];
-      } else {
-        if (!isReconcile(tr)) {
-          result.unreconciledTransactions.push(tr);
-        }
+    }
+    return annotations2;
+  };
+  const annotationsState = StateField.define({
+    create: (state2) => {
+      return match(state2);
+    },
+    update: (value, tr) => {
+      if (!tr.changes.empty) {
+        return match(tr.state);
       }
-      return result;
+      return value;
     }
   });
-  const syncer = new Syncer(accessor.handle, syncState);
   return [
-    Cursor.converter.of(cursorConverter(accessor)),
-    // Track heads.
-    syncState,
-    // Reconcile external updates.
-    ViewPlugin.fromClass(class {
-      constructor(_view) {
-        this._view = _view;
-        this._handleChange = () => {
-          syncer.reconcile(this._view, false);
-        };
-        accessor.handle.addListener("change", this._handleChange);
-      }
-      destroy() {
-        accessor.handle.removeListener("change", this._handleChange);
-      }
+    annotationsState,
+    EditorView.decorations.compute([
+      annotationsState
+    ], (state2) => {
+      const annotations2 = state2.field(annotationsState);
+      const decorations = annotations2.map((annotation) => {
+        const range = Cursor.getRangeFromCursor(state2, annotation.cursor);
+        return range && annotationMark.range(range.from, range.to);
+      }).filter(isNotFalsy);
+      return Decoration.set(decorations);
     }),
-    // Reconcile local updates.
-    EditorView2.updateListener.of(({ view, changes }) => {
-      if (!changes.empty) {
-        syncer.reconcile(view, true);
-      }
-    })
+    styles
   ];
 };
-
-// packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts
-import { Annotation as Annotation2, Facet as Facet2, RangeSet } from "@codemirror/state";
-import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
-import { Event } from "@dxos/async";
-import { Context } from "@dxos/context";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
-var dummyProvider = {
-  remoteStateChange: new Event(),
-  open: () => {
-  },
-  close: () => {
-  },
-  getRemoteStates: () => [],
-  update: () => {
+var styles = EditorView.baseTheme({
+  ".cm-annotation": {
+    textDecoration: "underline",
+    textDecorationStyle: "wavy",
+    textDecorationColor: "red"
   }
-};
-var awarenessProvider = Facet2.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
-    }),
-    styles2
+
+// 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 = ({ activateOnTyping, onSearch } = {}) => {
+  const extentions = [
+    // 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({
+      activateOnTyping,
+      // closeOnBlur: false,
+      // defaultKeymap: false,
+      // TODO(burdon): Styles/fragments.
+      tooltipClass: () => "shadow rounded"
+    })
   ];
+  if (onSearch) {
+    extentions.push(
+      // 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())
+          };
+        }
+      })
+    );
+  }
+  return extentions;
 };
-var RemoteSelectionsDecorator = class {
-  constructor(view) {
-    this._ctx = new Context(void 0, {
-      F: __dxlog_file2,
-      L: 82
-    });
-    this.decorations = RangeSet.of([]);
-    this._cursorConverter = view.state.facet(Cursor.converter);
-    this._provider = view.state.facet(awarenessProvider);
-    this._provider.open();
-    this._provider.remoteStateChange.on(this._ctx, () => {
-      view.dispatch({
-        annotations: [
-          RemoteSelectionChangedAnnotation.of([])
-        ]
+
+// packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
+import { StateField as StateField2 } from "@codemirror/state";
+import { EditorView as EditorView2, ViewPlugin } from "@codemirror/view";
+import { next as A3 } from "@dxos/automerge/automerge";
+
+// packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
+import { log } from "@dxos/log";
+import { fromCursor, toCursor } from "@dxos/react-client/echo";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
+var cursorConverter = (accessor) => ({
+  toCursor: (pos, assoc) => {
+    try {
+      return toCursor(accessor, pos, assoc);
+    } catch (err) {
+      log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 15,
+        S: void 0,
+        C: (f, a) => f(...a)
       });
-    });
-  }
-  destroy() {
-    void this._ctx.dispose();
-    this._provider.close();
-  }
-  update(update2) {
-    this._updateLocalSelection(update2.view);
-    this._updateRemoteSelections(update2.view);
-  }
-  _updateLocalSelection(view) {
-    const hasFocus = view.hasFocus && view.dom.ownerDocument.hasFocus();
-    const { anchor = void 0, head = void 0 } = hasFocus ? view.state.selection.main : {};
-    if (this._lastAnchor === anchor && this._lastHead === head) {
-      return;
+      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, -1)
-    } : void 0);
-  }
-  _updateRemoteSelections(view) {
-    const decorations = [];
-    const awarenessStates = this._provider.getRemoteStates();
-    for (const state2 of awarenessStates) {
-      const anchor = state2.position?.anchor ? this._cursorConverter.fromCursor(state2.position.anchor) : null;
-      const head = state2.position?.head ? this._cursorConverter.fromCursor(state2.position.head) : null;
-      if (anchor == null || head == null) {
-        continue;
-      }
-      const start = Math.min(Math.min(anchor, head), view.state.doc.length);
-      const end = Math.min(Math.max(anchor, head), view.state.doc.length);
-      const startLine = view.state.doc.lineAt(start);
-      const endLine = view.state.doc.lineAt(end);
-      const darkColor = state2.info.darkColor;
-      const lightColor = state2.info.lightColor;
-      if (startLine.number === endLine.number) {
-        decorations.push({
-          from: start,
-          to: end,
-          value: Decoration2.mark({
-            attributes: {
-              style: `background-color: ${lightColor}`
-            },
-            class: "cm-collab-selection"
-          })
-        });
-      } else {
-        decorations.push({
-          from: start,
-          to: startLine.from + startLine.length,
-          value: Decoration2.mark({
-            attributes: {
-              style: `background-color: ${lightColor}`
-            },
-            class: "cm-collab-selection"
-          })
-        });
-        decorations.push({
-          from: endLine.from,
-          to: end,
-          value: Decoration2.mark({
-            attributes: {
-              style: `background-color: ${lightColor}`
-            },
-            class: "cm-collab-selection"
-          })
-        });
-        for (let i = startLine.number + 1; i < endLine.number; i++) {
-          const linePos = view.state.doc.line(i).from;
-          decorations.push({
-            from: linePos,
-            to: linePos,
-            value: Decoration2.line({
-              attributes: {
-                style: `background-color: ${lightColor}`,
-                class: "cm-collab-selectionLine"
-              }
-            })
-          });
-        }
-      }
-      decorations.push({
-        from: head,
-        to: head,
-        value: Decoration2.widget({
-          side: head - anchor > 0 ? -1 : 1,
-          block: false,
-          widget: new RemoteCaretWidget(state2.info.displayName ?? "Anonymous", darkColor)
-        })
+  },
+  fromCursor: (cursor) => {
+    try {
+      return fromCursor(accessor, cursor);
+    } catch (err) {
+      log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 24,
+        S: void 0,
+        C: (f, a) => f(...a)
       });
+      return 0;
     }
-    this.decorations = Decoration2.set(decorations, true);
   }
+});
+
+// packages/ui/react-ui-editor/src/extensions/automerge/defs.ts
+import { Annotation, StateEffect } from "@codemirror/state";
+var getPath = (state2, field) => state2.field(field).path;
+var getLastHeads = (state2, field) => state2.field(field).lastHeads;
+var updateHeadsEffect = StateEffect.define({});
+var updateHeads = (newHeads) => updateHeadsEffect.of({
+  newHeads
+});
+var reconcileAnnotation = Annotation.define();
+var isReconcile = (tr) => {
+  return !!tr.annotation(reconcileAnnotation);
 };
-var RemoteCaretWidget = class extends WidgetType {
-  constructor(_name, _color) {
-    super();
-    this._name = _name;
-    this._color = _color;
-  }
-  toDOM() {
-    const span = document.createElement("span");
-    span.className = "cm-collab-selectionCaret";
-    span.style.backgroundColor = this._color;
-    span.style.borderColor = this._color;
-    const dot = document.createElement("div");
-    dot.className = "cm-collab-selectionCaretDot";
-    const info = document.createElement("div");
-    info.className = "cm-collab-selectionInfo";
-    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;
+
+// packages/ui/react-ui-editor/src/extensions/automerge/sync.ts
+import { next as A2 } from "@dxos/automerge/automerge";
+
+// packages/ui/react-ui-editor/src/extensions/automerge/update-automerge.ts
+import { next as A } from "@dxos/automerge/automerge";
+var updateAutomerge = (field, handle, transactions, state2) => {
+  const { lastHeads, path } = state2.field(field);
+  let hasChanges = false;
+  for (const tr of transactions) {
+    tr.changes.iterChanges(() => {
+      hasChanges = true;
+    });
   }
-  updateDOM() {
-    return false;
+  if (!hasChanges) {
+    return void 0;
   }
-  eq(widget) {
-    return widget._color === this._color;
+  const newHeads = handle.changeAt(lastHeads, (doc) => {
+    const invertedTransactions = [];
+    for (const tr of transactions) {
+      tr.changes.iterChanges((fromA, toA, _fromB, _toB, insert) => {
+        invertedTransactions.push({
+          from: fromA,
+          del: toA - fromA,
+          insert
+        });
+      });
+    }
+    invertedTransactions.reverse().forEach(({ from, del, insert }) => {
+      A.splice(doc, path.slice(), from, del, insert.toString());
+    });
+  });
+  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: reconcileAnnotation.of(false)
+      });
+    }
   }
-  get estimatedHeight() {
-    return -1;
+  view.dispatch({
+    selection,
+    annotations: reconcileAnnotation.of(false)
+  });
+};
+var handlePatch = (patch, target, state2) => {
+  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, state2);
+  } else {
+    return null;
   }
-  ignoreEvent() {
-    return true;
+};
+var handleInsert = (target, patch) => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
   }
+  const text = patch.values.map((value) => value ? value.toString() : "").join("");
+  return [
+    {
+      from: index,
+      to: index,
+      insert: text
+    }
+  ];
 };
-var styles2 = EditorView3.baseTheme({
-  ".cm-collab-selection": {},
-  ".cm-collab-selectionLine": {
-    padding: 0,
-    margin: "0px 2px 0px 4px"
-  },
-  ".cm-collab-selectionCaret": {
-    position: "relative",
-    borderLeft: "1px solid black",
-    borderRight: "1px solid black",
-    marginLeft: "-1px",
-    marginRight: "-1px",
-    boxSizing: "border-box",
-    display: "inline",
-    cursor: "pointer"
-  },
-  ".cm-collab-selectionCaretDot": {
-    borderRadius: "50%",
-    position: "absolute",
-    width: ".5em",
-    height: ".5em",
-    top: "-.25em",
-    left: "-.25em",
-    backgroundColor: "inherit",
-    transition: "transform .3s ease-in-out",
-    boxSizing: "border-box"
-  },
-  ".cm-collab-selectionCaret:hover > .cm-collab-selectionCaretDot": {
-    transform: "scale(0)",
-    transformOrigin: "center"
-  },
-  ".cm-collab-selectionInfo": {
-    position: "absolute",
-    transform: "translate(-50%, 0)",
-    top: "-20px",
-    left: 0,
-    fontSize: ".75em",
-    fontFamily: "sans-serif",
-    fontStyle: "normal",
-    fontWeight: "normal",
-    lineHeight: "normal",
-    userSelect: "none",
-    color: "white",
-    padding: "2px 6px",
-    zIndex: 101,
-    transition: "opacity .3s ease-in-out",
-    backgroundColor: "inherit",
-    borderRadius: "2px",
-    opacity: 0,
-    transitionDelay: "0s",
-    whiteSpace: "nowrap"
-  },
-  ".cm-collab-selectionCaret:hover > .cm-collab-selectionInfo": {
-    opacity: 1,
-    transitionDelay: "0s"
+var handleSplice = (target, patch) => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
   }
-});
-
-// packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts
-import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
-import { Context as Context2 } from "@dxos/context";
-import { invariant } from "@dxos/invariant";
-import { log as log2 } from "@dxos/log";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts";
-var DEBOUNCE_INTERVAL = 100;
-var SpaceAwarenessProvider = class {
-  constructor(params) {
-    this._remoteStates = /* @__PURE__ */ new Map();
-    this.remoteStateChange = new Event2();
-    this._space = params.space;
-    this._channel = params.channel;
-    this._peerId = params.peerId;
-    this._info = params.info;
+  return [
+    {
+      from: index,
+      insert: patch.value
+    }
+  ];
+};
+var handleDel = (target, patch) => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
   }
-  open() {
-    this._ctx = new Context2(void 0, {
-      F: __dxlog_file3,
-      L: 57
-    });
-    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);
-      }
-    });
-    this._ctx.onDispose(this._space.listen(this._channel, (message) => {
-      switch (message.payload.kind) {
-        case "query": {
-          this._handleQueryMessage();
-          break;
-        }
-        case "post": {
-          this._handlePostMessage(message.payload);
-          break;
-        }
-      }
-    }));
-    void this._space.postMessage(this._channel, {
-      kind: "query"
-    }).catch((err) => {
-      log2.debug("failed to query awareness", {
-        err
-      }, {
-        F: __dxlog_file3,
-        L: 91,
-        S: this,
-        C: (f, a) => f(...a)
-      });
-    });
+  const length = patch.length || 1;
+  return [
+    {
+      from: index,
+      to: index + length
+    }
+  ];
+};
+var handlePut = (target, patch, state2) => {
+  const index = charPath(target, [
+    ...patch.path,
+    0
+  ]);
+  if (index == null) {
+    return [];
   }
-  close() {
-    void this._ctx?.dispose();
-    this._ctx = void 0;
-    this._postTask = void 0;
+  const length = state2.doc.length;
+  if (typeof patch.value !== "string") {
+    return [];
   }
-  getRemoteStates() {
-    return Array.from(this._remoteStates.values());
+  return [
+    {
+      from: 0,
+      to: length,
+      insert: patch.value
+    }
+  ];
+};
+var charPath = (textPath, candidatePath) => {
+  if (candidatePath.length !== textPath.length + 1) {
+    return null;
   }
-  update(position) {
-    invariant(this._postTask, void 0, {
-      F: __dxlog_file3,
-      L: 106,
-      S: this,
-      A: [
-        "this._postTask",
-        ""
-      ]
-    });
-    this._localState = {
-      peerId: this._peerId,
-      position,
-      info: this._info
-    };
-    this._postTask.schedule();
+  for (let i = 0; i < textPath.length; i++) {
+    if (textPath[i] !== candidatePath[i]) {
+      return null;
+    }
   }
-  _handleQueryMessage() {
-    invariant(this._postTask, void 0, {
-      F: __dxlog_file3,
-      L: 117,
-      S: this,
-      A: [
-        "this._postTask",
-        ""
-      ]
-    });
-    this._postTask.schedule();
+  const index = candidatePath[candidatePath.length - 1];
+  if (typeof index === "number") {
+    return index;
   }
-  _handlePostMessage(message) {
-    invariant(message.kind === "post", void 0, {
-      F: __dxlog_file3,
-      L: 122,
-      S: this,
-      A: [
-        "message.kind === 'post'",
-        ""
-      ]
+  return null;
+};
+
+// packages/ui/react-ui-editor/src/extensions/automerge/sync.ts
+var Syncer = class {
+  // prettier-ignore
+  constructor(_handle, _state) {
+    this._handle = _handle;
+    this._state = _state;
+    this._pending = false;
+  }
+  reconcile(view, editor) {
+    if (this._pending) {
+      return;
+    }
+    this._pending = true;
+    if (editor) {
+      this.onEditorChange(view);
+    } else {
+      this.onAutomergeChange(view);
+    }
+    this._pending = false;
+  }
+  onEditorChange(view) {
+    const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
+    const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
+    if (newHeads) {
+      view.dispatch({
+        effects: updateHeads(newHeads),
+        annotations: reconcileAnnotation.of(false)
+      });
+    }
+  }
+  onAutomergeChange(view) {
+    const oldHeads = getLastHeads(view.state, this._state);
+    const newHeads = A2.getHeads(this._handle.docSync());
+    const diff = A2.equals(oldHeads, newHeads) ? [] : A2.diff(this._handle.docSync(), oldHeads, newHeads);
+    const selection = view.state.selection;
+    const path = getPath(view.state, this._state);
+    updateCodeMirror(view, selection, path, diff);
+    view.dispatch({
+      effects: updateHeads(newHeads),
+      annotations: reconcileAnnotation.of(false)
     });
-    this._remoteStates.set(message.state.peerId, message.state);
-    this.remoteStateChange.emit();
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/blast.ts
-import { EditorView as EditorView4, keymap as keymap2 } from "@codemirror/view";
-import defaultsDeep from "lodash.defaultsdeep";
-import { invariant as invariant2 } from "@dxos/invariant";
-var __dxlog_file4 = "/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.
-    EditorView4.updateListener.of((update2) => {
-      if (blaster?.node !== update2.view.scrollDOM) {
-        if (blaster) {
-          blaster.destroy();
+// packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
+var automerge = (accessor) => {
+  const syncState = StateField2.define({
+    create: () => ({
+      path: accessor.path.slice(),
+      lastHeads: A3.getHeads(accessor.handle.docSync()),
+      unreconciledTransactions: []
+    }),
+    update: (value, tr) => {
+      const result = {
+        path: accessor.path.slice(),
+        lastHeads: value.lastHeads,
+        unreconciledTransactions: value.unreconciledTransactions.slice()
+      };
+      let clearUnreconciled = false;
+      for (const effect of tr.effects) {
+        if (effect.is(updateHeadsEffect)) {
+          result.lastHeads = effect.value.newHeads;
+          clearUnreconciled = true;
         }
-        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
-          });
+      if (clearUnreconciled) {
+        result.unreconciledTransactions = [];
+      } else {
+        if (!isReconcile(tr)) {
+          result.unreconciledTransactions.push(tr);
         }
       }
+      return result;
+    }
+  });
+  const syncer = new Syncer(accessor.handle, syncState);
+  return [
+    Cursor.converter.of(cursorConverter(accessor)),
+    // Track heads.
+    syncState,
+    // Reconcile external updates.
+    ViewPlugin.fromClass(class {
+      constructor(_view) {
+        this._view = _view;
+        this._handleChange = () => {
+          syncer.reconcile(this._view, false);
+        };
+        accessor.handle.addListener("change", this._handleChange);
+      }
+      destroy() {
+        accessor.handle.removeListener("change", this._handleChange);
+      }
     }),
-    keymap2.of([
-      {
-        any: (_, event) => {
-          if (blaster) {
-            if (event.key === "Enter" && event.shiftKey) {
-              blaster.shake({
-                time: 0.8
-              });
-              return true;
-            }
-          }
-          return false;
-        }
+    // Reconcile local updates.
+    EditorView2.updateListener.of(({ view, changes }) => {
+      if (!changes.empty) {
+        syncer.reconcile(view, true);
       }
-    ])
+    })
   ];
 };
-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 node() {
-    return this._node;
+
+// packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts
+import { Annotation as Annotation2, Facet as Facet2, RangeSet } from "@codemirror/state";
+import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
+import { Event } from "@dxos/async";
+import { Context } from "@dxos/context";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
+var dummyProvider = {
+  remoteStateChange: new Event(),
+  open: () => {
+  },
+  close: () => {
+  },
+  getRemoteStates: () => [],
+  update: () => {
   }
-  initialize() {
-    invariant2(!this._canvas && !this._ctx, void 0, {
-      F: __dxlog_file4,
-      L: 141,
-      S: this,
-      A: [
-        "!this._canvas && !this._ctx",
-        ""
-      ]
+};
+var awarenessProvider = Facet2.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
+    }),
+    styles2
+  ];
+};
+var RemoteSelectionsDecorator = class {
+  constructor(view) {
+    this._ctx = new Context(void 0, {
+      F: __dxlog_file2,
+      L: 82
+    });
+    this.decorations = RangeSet.of([]);
+    this._cursorConverter = view.state.facet(Cursor.converter);
+    this._provider = view.state.facet(awarenessProvider);
+    this._provider.open();
+    this._provider.remoteStateChange.on(this._ctx, () => {
+      view.dispatch({
+        annotations: [
+          RemoteSelectionChangedAnnotation.of([])
+        ]
+      });
     });
-    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;
-    }
-  }
-  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() {
-    invariant2(this._canvas && this._ctx, void 0, {
-      F: __dxlog_file4,
-      L: 180,
-      S: this,
-      A: [
-        "this._canvas && this._ctx",
-        ""
-      ]
-    });
-    this._running = true;
-    this.loop();
+    void this._ctx.dispose();
+    this._provider.close();
   }
-  stop() {
-    this._running = false;
-    this._node.style.transform = "translate(0px, 0px)";
+  update(update2) {
+    this._updateLocalSelection(update2.view);
+    this._updateRemoteSelections(update2.view);
   }
-  loop() {
-    if (!this._running || !this._canvas || !this._ctx) {
+  _updateLocalSelection(view) {
+    const hasFocus = view.hasFocus && view.dom.ownerDocument.hasFocus();
+    const { anchor = void 0, head = void 0 } = hasFocus ? view.state.selection.main : {};
+    if (this._lastAnchor === anchor && this._lastHead === head) {
       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));
+    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, -1)
+    } : void 0);
   }
-  drawParticles() {
-    for (let i = this._particles.length; i--; i > 0) {
-      const particle = this._particles[i];
-      if (!particle) {
+  _updateRemoteSelections(view) {
+    const decorations = [];
+    const awarenessStates = this._provider.getRemoteStates();
+    for (const state2 of awarenessStates) {
+      const anchor = state2.position?.anchor ? this._cursorConverter.fromCursor(state2.position.anchor) : null;
+      const head = state2.position?.head ? this._cursorConverter.fromCursor(state2.position.head) : null;
+      if (anchor == null || head == null) {
         continue;
       }
-      if (particle.alpha < 0.01 || particle.size <= 0.5) {
-        continue;
+      const start = Math.min(Math.min(anchor, head), view.state.doc.length);
+      const end = Math.min(Math.max(anchor, head), view.state.doc.length);
+      const startLine = view.state.doc.lineAt(start);
+      const endLine = view.state.doc.lineAt(end);
+      const darkColor = state2.info.darkColor;
+      const lightColor = state2.info.lightColor;
+      if (startLine.number === endLine.number) {
+        decorations.push({
+          from: start,
+          to: end,
+          value: Decoration2.mark({
+            attributes: {
+              style: `background-color: ${lightColor}`
+            },
+            class: "cm-collab-selection"
+          })
+        });
+      } else {
+        decorations.push({
+          from: start,
+          to: startLine.from + startLine.length,
+          value: Decoration2.mark({
+            attributes: {
+              style: `background-color: ${lightColor}`
+            },
+            class: "cm-collab-selection"
+          })
+        });
+        decorations.push({
+          from: endLine.from,
+          to: end,
+          value: Decoration2.mark({
+            attributes: {
+              style: `background-color: ${lightColor}`
+            },
+            class: "cm-collab-selection"
+          })
+        });
+        for (let i = startLine.number + 1; i < endLine.number; i++) {
+          const linePos = view.state.doc.line(i).from;
+          decorations.push({
+            from: linePos,
+            to: linePos,
+            value: Decoration2.line({
+              attributes: {
+                style: `background-color: ${lightColor}`,
+                class: "cm-collab-selectionLine"
+              }
+            })
+          });
+        }
       }
-      this._effect.update(this._ctx, particle);
+      decorations.push({
+        from: head,
+        to: head,
+        value: Decoration2.widget({
+          side: head - anchor > 0 ? -1 : 1,
+          block: false,
+          widget: new RemoteCaretWidget(state2.info.displayName ?? "Anonymous", darkColor)
+        })
+      });
     }
+    this.decorations = Decoration2.set(decorations, true);
   }
 };
-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
-    };
+var RemoteCaretWidget = class extends WidgetType {
+  constructor(_name, _color) {
+    super();
+    this._name = _name;
+    this._color = _color;
   }
-  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();
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-collab-selectionCaret";
+    span.style.backgroundColor = this._color;
+    span.style.borderColor = this._color;
+    const dot = document.createElement("div");
+    dot.className = "cm-collab-selectionCaretDot";
+    const info = document.createElement("div");
+    info.className = "cm-collab-selectionInfo";
+    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;
   }
-};
-function throttle(callback, limit) {
-  let wait = false;
-  return function(...args) {
-    if (!wait) {
-      callback.apply(this, args);
-      wait = true;
-      setTimeout(() => {
-        wait = false;
-      }, limit);
-    }
-  };
-}
-var getRGBComponents = (node, color) => {
-  if (typeof color === "function") {
-    return color();
+  updateDOM() {
+    return false;
   }
-  const bgColor = getComputedStyle(node).color;
-  if (bgColor) {
-    const x = bgColor.match(/(\d+), (\d+), (\d+)/)?.slice(1);
-    if (x) {
-      return x;
-    }
+  eq(widget) {
+    return widget._color === this._color;
   }
-  return [
-    50,
-    50,
-    50
-  ];
-};
-var random = (min, max) => {
-  if (!max) {
-    max = min;
-    min = 0;
+  get estimatedHeight() {
+    return -1;
+  }
+  ignoreEvent() {
+    return true;
   }
-  return min + ~~(Math.random() * (max - min + 1));
 };
-
-// packages/ui/react-ui-editor/src/extensions/command/command.ts
-import { EditorView as EditorView6, keymap as keymap3 } from "@codemirror/view";
-
-// packages/ui/react-ui-editor/src/extensions/command/hint.ts
-import { RangeSetBuilder } from "@codemirror/state";
-import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin3, WidgetType as WidgetType2 } from "@codemirror/view";
-
-// packages/ui/react-ui-editor/src/extensions/command/state.ts
-import { Facet as Facet3, StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
-import { showTooltip } from "@codemirror/view";
-var commandConfig = Facet3.define({
-  combine: (providers) => providers[0]
-});
-var commandState = StateField3.define({
-  create: () => ({}),
-  update: (state2, tr) => {
-    for (const effect of tr.effects) {
-      if (effect.is(closeEffect)) {
-        return {};
-      }
-      if (effect.is(openEffect)) {
-        const options = tr.state.facet(commandConfig);
-        const { pos, fullWidth } = effect.value;
-        const tooltip = {
-          pos,
-          above: false,
-          arrow: false,
-          strictSide: true,
-          create: (view) => {
-            const dom = document.createElement("div");
-            const tooltipView = {
-              dom,
-              mount: (view2) => {
-                if (fullWidth) {
-                  const parent = dom.parentElement;
-                  const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
-                  const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
-                  dom.style.width = `${widthWithoutPadding}px`;
-                }
-                options.onRender(dom, (action) => {
-                  view2.dispatch({
-                    effects: closeEffect.of(null)
-                  });
-                  if (action?.insert?.length) {
-                    view2.dispatch({
-                      changes: {
-                        from: pos,
-                        insert: action.insert
-                      },
-                      selection: {
-                        anchor: pos + action.insert.length
-                      }
-                    });
-                  }
-                  requestAnimationFrame(() => view2.focus());
-                });
-              }
-            };
-            return tooltipView;
-          }
-        };
-        return {
-          tooltip
-        };
-      }
-    }
-    return state2;
+var styles2 = EditorView3.baseTheme({
+  ".cm-collab-selection": {},
+  ".cm-collab-selectionLine": {
+    padding: 0,
+    margin: "0px 2px 0px 4px"
   },
-  provide: (field) => [
-    showTooltip.from(field, (value) => value.tooltip ?? null)
-  ]
+  ".cm-collab-selectionCaret": {
+    position: "relative",
+    borderLeft: "1px solid black",
+    borderRight: "1px solid black",
+    marginLeft: "-1px",
+    marginRight: "-1px",
+    boxSizing: "border-box",
+    display: "inline",
+    cursor: "pointer"
+  },
+  ".cm-collab-selectionCaretDot": {
+    borderRadius: "50%",
+    position: "absolute",
+    width: ".5em",
+    height: ".5em",
+    top: "-.25em",
+    left: "-.25em",
+    backgroundColor: "inherit",
+    transition: "transform .3s ease-in-out",
+    boxSizing: "border-box"
+  },
+  ".cm-collab-selectionCaret:hover > .cm-collab-selectionCaretDot": {
+    transform: "scale(0)",
+    transformOrigin: "center"
+  },
+  ".cm-collab-selectionInfo": {
+    position: "absolute",
+    transform: "translate(-50%, 0)",
+    top: "-20px",
+    left: 0,
+    fontSize: ".75em",
+    fontFamily: "sans-serif",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    lineHeight: "normal",
+    userSelect: "none",
+    color: "white",
+    padding: "2px 6px",
+    zIndex: 101,
+    transition: "opacity .3s ease-in-out",
+    backgroundColor: "inherit",
+    borderRadius: "2px",
+    opacity: 0,
+    transitionDelay: "0s",
+    whiteSpace: "nowrap"
+  },
+  ".cm-collab-selectionCaret:hover > .cm-collab-selectionInfo": {
+    opacity: 1,
+    transitionDelay: "0s"
+  }
 });
-var openEffect = StateEffect2.define();
-var closeEffect = StateEffect2.define();
-var openCommand = (view) => {
-  if (view.state.field(commandState, false)) {
-    const selection = view.state.selection.main;
-    const line = view.state.doc.lineAt(selection.from);
-    if (line.from === selection.from && line.from === line.to) {
-      view.dispatch({
-        effects: openEffect.of({
-          pos: selection.anchor,
-          fullWidth: true
-        })
+
+// packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts
+import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
+import { Context as Context2 } from "@dxos/context";
+import { invariant } from "@dxos/invariant";
+import { log as log2 } from "@dxos/log";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts";
+var DEBOUNCE_INTERVAL = 100;
+var SpaceAwarenessProvider = class {
+  constructor(params) {
+    this._remoteStates = /* @__PURE__ */ new Map();
+    this.remoteStateChange = new Event2();
+    this._space = params.space;
+    this._channel = params.channel;
+    this._peerId = params.peerId;
+    this._info = params.info;
+  }
+  open() {
+    this._ctx = new Context2(void 0, {
+      F: __dxlog_file3,
+      L: 57
+    });
+    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);
+      }
+    });
+    this._ctx.onDispose(this._space.listen(this._channel, (message) => {
+      switch (message.payload.kind) {
+        case "query": {
+          this._handleQueryMessage();
+          break;
+        }
+        case "post": {
+          this._handlePostMessage(message.payload);
+          break;
+        }
+      }
+    }));
+    void this._space.postMessage(this._channel, {
+      kind: "query"
+    }).catch((err) => {
+      log2.debug("failed to query awareness", {
+        err
+      }, {
+        F: __dxlog_file3,
+        L: 91,
+        S: this,
+        C: (f, a) => f(...a)
       });
-      return true;
-    }
+    });
   }
-  return false;
-};
-var closeCommand = (view) => {
-  if (view.state.field(commandState, false)) {
-    view.dispatch({
-      effects: closeEffect.of(null)
+  close() {
+    void this._ctx?.dispose();
+    this._ctx = void 0;
+    this._postTask = void 0;
+  }
+  getRemoteStates() {
+    return Array.from(this._remoteStates.values());
+  }
+  update(position) {
+    invariant(this._postTask, void 0, {
+      F: __dxlog_file3,
+      L: 106,
+      S: this,
+      A: [
+        "this._postTask",
+        ""
+      ]
     });
-    return true;
+    this._localState = {
+      peerId: this._peerId,
+      position,
+      info: this._info
+    };
+    this._postTask.schedule();
   }
-  return false;
-};
-var commandKeyBindings = [
-  {
-    key: "/",
-    run: openCommand
-  },
-  {
-    key: "Escape",
-    run: closeCommand
+  _handleQueryMessage() {
+    invariant(this._postTask, void 0, {
+      F: __dxlog_file3,
+      L: 117,
+      S: this,
+      A: [
+        "this._postTask",
+        ""
+      ]
+    });
+    this._postTask.schedule();
   }
-];
+  _handlePostMessage(message) {
+    invariant(message.kind === "post", void 0, {
+      F: __dxlog_file3,
+      L: 122,
+      S: this,
+      A: [
+        "message.kind === 'post'",
+        ""
+      ]
+    });
+    this._remoteStates.set(message.state.peerId, message.state);
+    this.remoteStateChange.emit();
+  }
+};
 
-// packages/ui/react-ui-editor/src/extensions/util/dom.ts
-var flattenRect = (rect, left) => {
-  const x = left ? rect.left : rect.right;
-  return {
-    left: x,
-    right: x,
-    top: rect.top,
-    bottom: rect.bottom
-  };
+// packages/ui/react-ui-editor/src/extensions/blast.ts
+import { EditorView as EditorView4, keymap as keymap2 } from "@codemirror/view";
+import defaultsDeep from "lodash.defaultsdeep";
+import { invariant as invariant2 } from "@dxos/invariant";
+var __dxlog_file4 = "/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 scratchRange;
-var textRange = (node, from, to = from) => {
-  const range = scratchRange || (scratchRange = document.createRange());
-  range.setEnd(node, to);
-  range.setStart(node, from);
-  return range;
+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.
+    EditorView4.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 clientRectsFor = (dom) => {
-  if (dom.nodeType === 3) {
-    return textRange(dom, 0, dom.nodeValue.length).getClientRects();
-  } else if (dom.nodeType === 1) {
-    return dom.getClientRects();
-  } else {
-    return [];
+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 node() {
+    return this._node;
+  }
+  initialize() {
+    invariant2(!this._canvas && !this._ctx, void 0, {
+      F: __dxlog_file4,
+      L: 141,
+      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();
   }
-};
-
-// packages/ui/react-ui-editor/src/extensions/command/hint.ts
-var CommandHint = class extends WidgetType2 {
-  constructor(content) {
-    super();
-    this.content = content;
+  destroy() {
+    this.stop();
+    if (this._canvas) {
+      this._canvas.remove();
+      this._canvas = void 0;
+      this._ctx = void 0;
+    }
   }
-  toDOM() {
-    const wrap = document.createElement("span");
-    wrap.className = "cm-placeholder";
-    wrap.style.pointerEvents = "none";
-    wrap.appendChild(typeof this.content === "string" ? document.createTextNode(this.content) : this.content);
-    if (typeof this.content === "string") {
-      wrap.setAttribute("aria-label", "placeholder " + this.content);
-    } else {
-      wrap.setAttribute("aria-hidden", "true");
+  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;
     }
-    return wrap;
   }
-  coordsAt(dom) {
-    const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
-    if (!rects.length) {
-      return null;
+  start() {
+    invariant2(this._canvas && this._ctx, void 0, {
+      F: __dxlog_file4,
+      L: 180,
+      S: this,
+      A: [
+        "this._canvas && this._ctx",
+        ""
+      ]
+    });
+    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;
     }
-    const style = window.getComputedStyle(dom.parentNode);
-    const rect = flattenRect(rects[0], style.direction !== "rtl");
-    const lineHeight = parseInt(style.lineHeight);
-    if (rect.bottom - rect.top > lineHeight * 1.5) {
-      return {
-        left: rect.left,
-        right: rect.right,
-        top: rect.top,
-        bottom: rect.top + lineHeight
-      };
+    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)`;
     }
-    return rect;
+    this.drawParticles();
+    requestAnimationFrame(this.loop.bind(this));
   }
-  ignoreEvent() {
-    return false;
+  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);
+    }
   }
 };
-var hintViewPlugin = ({ onHint }) => ViewPlugin3.fromClass(class {
-  constructor() {
-    this.deco = Decoration3.none;
+var Effect = class {
+  constructor(_options) {
+    this._options = _options;
   }
-  update(update2) {
-    const builder = new RangeSetBuilder();
-    const cState = update2.view.state.field(commandState, false);
-    if (!cState?.tooltip) {
-      const selection = update2.view.state.selection.main;
-      const line = update2.view.state.doc.lineAt(selection.from);
-      if (selection.from === selection.to && line.from === line.to) {
-        const hint = onHint();
-        if (hint) {
-          builder.add(selection.from, selection.to, Decoration3.widget({
-            widget: new CommandHint(hint)
-          }));
-        }
-      }
-    }
-    this.deco = builder.finish();
+};
+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);
   }
-}, {
-  provide: (plugin) => [
-    EditorView5.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration3.none)
-  ]
-});
-
-// packages/ui/react-ui-editor/src/extensions/command/command.ts
-var command = (options) => {
-  return [
-    commandConfig.of(options),
-    commandState,
-    keymap3.of(commandKeyBindings),
-    hintViewPlugin(options),
-    EditorView6.focusChangeEffect.of((_, focusing) => {
-      return focusing ? closeEffect.of(null) : null;
-    })
-  ];
 };
-
-// packages/ui/react-ui-editor/src/extensions/comments.ts
-import { invertedEffects } from "@codemirror/commands";
-import { Facet as Facet4, StateEffect as StateEffect3, StateField as StateField4 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap4, Decoration as Decoration4, EditorView as EditorView7, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
-import sortBy from "lodash.sortby";
-import { useEffect, useMemo, useState } from "react";
-import { debounce } from "@dxos/async";
-import { log as log5 } from "@dxos/log";
-import { nonNullable } from "@dxos/util";
-
-// packages/ui/react-ui-editor/src/extensions/util/error.ts
-import { log as log3 } from "@dxos/log";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/util/error.ts";
-var wrapWithCatch = (fn) => {
-  return (...args) => {
-    try {
-      return fn(...args);
-    } catch (err) {
-      log3.catch(err, void 0, {
-        F: __dxlog_file5,
-        L: 12,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+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);
     }
   };
+}
+var getRGBComponents = (node, color) => {
+  if (typeof color === "function") {
+    return color();
+  }
+  const bgColor = getComputedStyle(node).color;
+  if (bgColor) {
+    const x = bgColor.match(/(\d+), (\d+), (\d+)/)?.slice(1);
+    if (x) {
+      return x;
+    }
+  }
+  return [
+    50,
+    50,
+    50
+  ];
 };
-
-// packages/ui/react-ui-editor/src/extensions/util/overlap.ts
-var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
-
-// packages/ui/react-ui-editor/src/extensions/util/react.tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider } from "@dxos/react-ui";
-import { defaultTx } from "@dxos/react-ui-theme";
-var renderRoot = (root, node) => {
-  createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
-    tx: defaultTx
-  }, node));
-  return root;
-};
-
-// packages/ui/react-ui-editor/src/styles/markdown.ts
-import { mx } from "@dxos/react-ui-theme";
-var headings = {
-  1: "text-4xl",
-  2: "text-3xl",
-  3: "text-2xl",
-  4: "text-xl",
-  5: "text-lg",
-  6: "text-md"
-};
-var theme = {
-  mark: "opacity-50",
-  code: "font-mono !no-underline text-neutral-700 dark:text-neutral-300",
-  codeMark: "font-mono text-primary-500",
-  // TODO(burdon): Replace with widget.
-  blockquote: "pl-1 mr-1 border-is-4 border-orange-500 dark:border-orange-500 dark:text-neutral-500",
-  heading: (level) => {
-    return mx(headings[level], "dark:text-primary-400");
+var random = (min, max) => {
+  if (!max) {
+    max = min;
+    min = 0;
   }
+  return min + ~~(Math.random() * (max - min + 1));
 };
 
-// packages/ui/react-ui-editor/src/styles/tokens.ts
-import get from "lodash.get";
-import { tailwindConfig } from "@dxos/react-ui-theme";
-var tokens = tailwindConfig({}).theme;
-var getToken = (path, defaultValue) => {
-  const value = get(tokens, path, defaultValue);
-  return value?.toString() ?? "";
-};
+// packages/ui/react-ui-editor/src/extensions/command/command.ts
+import { EditorView as EditorView6, keymap as keymap3 } from "@codemirror/view";
 
-// packages/ui/react-ui-editor/src/styles/theme.ts
-var defaultTheme = {
-  "&": {},
-  "&.cm-focused": {
-    outline: "none"
-  },
-  // Scroller.
-  // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
-  ".cm-scroller": {
-    overflowY: "auto"
-  },
-  // Content.
-  ".cm-content": {
-    padding: "unset",
-    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
-    fontSize: "16px",
-    fontFamily: getToken("fontFamily.body"),
-    lineHeight: 1.5
-  },
-  "&light .cm-content": {
-    color: getToken("extend.semanticColors.base.fg.light", "black")
-  },
-  "&dark .cm-content": {
-    color: getToken("extend.semanticColors.base.fg.dark", "white")
-  },
-  //
-  // Cursor
-  //
-  "&light .cm-cursor, &light .cm-dropCursor": {
-    borderLeft: "2px solid black"
-  },
-  "&dark .cm-cursor, &dark .cm-dropCursor": {
-    borderLeft: "2px solid white"
-  },
-  "&light .cm-placeholder": {
-    color: getToken("extend.semanticColors.description.light", "rgba(0,0,0,.2)")
-  },
-  "&dark .cm-placeholder": {
-    color: getToken("extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
-  },
-  //
-  // line
-  //
-  ".cm-line": {
-    paddingInline: 0
-  },
-  ".cm-activeLine": {
-    background: "transparent"
-  },
-  //
-  // gutter
-  //
-  ".cm-lineNumbers": {
-    minWidth: "36px"
-  },
-  //
-  // Selection
-  //
-  "&light .cm-selectionBackground": {
-    background: getToken("extend.colors.primary.100")
-  },
-  "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: getToken("extend.colors.primary.200")
-  },
-  "&dark .cm-selectionBackground": {
-    background: getToken("extend.colors.primary.700")
-  },
-  "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: getToken("extend.colors.primary.600")
-  },
-  //
-  // Search
-  //
-  "&light .cm-searchMatch": {
-    backgroundColor: getToken("extend.colors.yellow.100")
-  },
-  "&dark .cm-searchMatch": {
-    backgroundColor: getToken("extend.colors.yellow.700")
-  },
-  //
-  // link
-  //
-  ".cm-link": {
-    textDecorationLine: "underline",
-    textDecorationThickness: "1px",
-    textUnderlineOffset: "2px",
-    borderRadius: ".125rem",
-    fontFamily: getToken("fontFamily.body")
-  },
-  "&light .cm-link > span": {
-    color: getToken("extend.colors.primary.600")
-  },
-  "&dark .cm-link > span": {
-    color: getToken("extend.colors.primary.400")
-  },
-  //
-  // tooltip
-  //
-  ".cm-tooltip": {},
-  "&light .cm-tooltip": {
-    background: `${getToken("extend.colors.neutral.100")} !important`
-  },
-  "&dark .cm-tooltip": {
-    background: `${getToken("extend.colors.neutral.900")} !important`
-  },
-  ".cm-tooltip-below": {},
-  //
-  // autocomplete
-  // https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
-  //
-  ".cm-tooltip.cm-tooltip-autocomplete": {
-    marginTop: "4px",
-    marginLeft: "-3px"
-  },
-  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
-    maxHeight: "20em !important"
-  },
-  ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {},
-  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {},
-  ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
-    paddingLeft: "4px !important",
-    borderBottom: "none !important",
-    color: getToken("extend.colors.primary.500")
-  },
-  ".cm-tooltip.cm-completionInfo": {
-    border: getToken("extend.colors.neutral.500"),
-    width: "360px !important",
-    margin: "-10px 1px 0 1px",
-    padding: "8px !important"
-  },
-  ".cm-completionIcon": {
-    display: "none"
-  },
-  ".cm-completionLabel": {
-    fontFamily: getToken("fontFamily.body")
-  },
-  ".cm-completionMatchedText": {
-    textDecoration: "none !important",
-    opacity: 0.5
-  },
-  //
-  // table
-  //
-  ".cm-table *": {
-    fontFamily: `${getToken("fontFamily.mono")} !important`,
-    textDecoration: "none !important"
-  },
-  ".cm-table-head": {
-    padding: "2px 16px 2px 0px",
-    textAlign: "left",
-    borderBottom: `1px solid ${getToken("extend.colors.primary.500")}`,
-    color: getToken("extend.colors.neutral.500")
-  },
-  ".cm-table-cell": {
-    padding: "2px 16px 2px 0px"
-  },
-  //
-  // image
-  //
-  ".cm-image": {
-    display: "block",
-    height: "0"
-  },
-  ".cm-image.cm-loaded-image": {
-    height: "auto",
-    borderTop: "0.5rem solid transparent",
-    borderBottom: "0.5rem solid transparent"
-  },
-  // TODO(burdon): Override vars --cm-background.
-  //  https://www.npmjs.com/package/codemirror-theme-vars
-  /**
-  * Gutters
-  */
-  ".cm-gutters": {
-    background: "transparent"
-  },
-  /**
-  * Panels
-  * TODO(burdon): Needs styling attention (esp. dark mode).
-  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
-  *
-  * Find/replace panel.
-  * <div class="cm-announced">...</div>
-  * <div class="cm-scroller">...</div>
-  * <div class="cm-panels cm-panels-bottom">
-  *   <div class="cm-search cm-panel">
-  *     <input class="cm-textfield" />
-  *     <button class="cm-button">...</button>
-  *     <label><input type="checkbox" />...</label>
-  *   </div>
-  * </div
-  */
-  ".cm-panels": {},
-  ".cm-panel": {
-    fontFamily: getToken("fontFamily.body")
-  },
-  ".cm-panel input[type=checkbox]": {
-    marginRight: "0.4rem !important"
-  },
-  "&light .cm-panel": {
-    background: getToken("extend.colors.neutral.50")
-  },
-  "&dark .cm-panel": {
-    background: getToken("extend.colors.neutral.850")
-  },
-  ".cm-button": {
-    margin: "4px",
-    fontFamily: getToken("fontFamily.body"),
-    backgroundImage: "none",
-    border: "none",
-    "&:active": {
-      backgroundImage: "none"
+// packages/ui/react-ui-editor/src/extensions/command/hint.ts
+import { RangeSetBuilder } from "@codemirror/state";
+import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin3, WidgetType as WidgetType2 } from "@codemirror/view";
+
+// packages/ui/react-ui-editor/src/extensions/command/state.ts
+import { Facet as Facet3, StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
+import { showTooltip } from "@codemirror/view";
+var commandConfig = Facet3.define({
+  combine: (providers) => providers[0]
+});
+var commandState = StateField3.define({
+  create: () => ({}),
+  update: (state2, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(closeEffect)) {
+        return {};
+      }
+      if (effect.is(openEffect)) {
+        const options = tr.state.facet(commandConfig);
+        const { pos, fullWidth } = effect.value;
+        const tooltip = {
+          pos,
+          above: false,
+          arrow: false,
+          strictSide: true,
+          create: (view) => {
+            const dom = document.createElement("div");
+            const tooltipView = {
+              dom,
+              mount: (view2) => {
+                if (fullWidth) {
+                  const parent = dom.parentElement;
+                  const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
+                  const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
+                  dom.style.width = `${widthWithoutPadding}px`;
+                }
+                options.onRender(dom, (action) => {
+                  view2.dispatch({
+                    effects: closeEffect.of(null)
+                  });
+                  if (action?.insert?.length) {
+                    view2.dispatch({
+                      changes: {
+                        from: pos,
+                        insert: action.insert
+                      },
+                      selection: {
+                        anchor: pos + action.insert.length
+                      }
+                    });
+                  }
+                  requestAnimationFrame(() => view2.focus());
+                });
+              }
+            };
+            return tooltipView;
+          }
+        };
+        return {
+          tooltip
+        };
+      }
     }
+    return state2;
   },
-  "&light .cm-button": {
-    background: getToken("extend.colors.neutral.100"),
-    "&:hover": {
-      background: getToken("extend.colors.neutral.200")
-    },
-    "&:active": {
-      background: getToken("extend.colors.neutral.300")
+  provide: (field) => [
+    showTooltip.from(field, (value) => value.tooltip ?? null)
+  ]
+});
+var openEffect = StateEffect2.define();
+var closeEffect = StateEffect2.define();
+var openCommand = (view) => {
+  if (view.state.field(commandState, false)) {
+    const selection = view.state.selection.main;
+    const line = view.state.doc.lineAt(selection.from);
+    if (line.from === selection.from && line.from === line.to) {
+      view.dispatch({
+        effects: openEffect.of({
+          pos: selection.anchor,
+          fullWidth: true
+        })
+      });
+      return true;
     }
+  }
+  return false;
+};
+var closeCommand = (view) => {
+  if (view.state.field(commandState, false)) {
+    view.dispatch({
+      effects: closeEffect.of(null)
+    });
+    return true;
+  }
+  return false;
+};
+var commandKeyBindings = [
+  {
+    key: "/",
+    run: openCommand
   },
-  "&dark .cm-button": {
-    background: getToken("extend.colors.neutral.800"),
-    "&:hover": {
-      background: getToken("extend.colors.neutral.700")
-    },
-    "&:active": {
-      background: getToken("extend.colors.neutral.600")
+  {
+    key: "Escape",
+    run: closeCommand
+  }
+];
+
+// packages/ui/react-ui-editor/src/extensions/util/dom.ts
+var flattenRect = (rect, left) => {
+  const x = left ? rect.left : rect.right;
+  return {
+    left: x,
+    right: x,
+    top: rect.top,
+    bottom: rect.bottom
+  };
+};
+var scratchRange;
+var textRange = (node, from, to = from) => {
+  const range = scratchRange || (scratchRange = document.createRange());
+  range.setEnd(node, to);
+  range.setStart(node, from);
+  return range;
+};
+var clientRectsFor = (dom) => {
+  if (dom.nodeType === 3) {
+    return textRange(dom, 0, dom.nodeValue.length).getClientRects();
+  } else if (dom.nodeType === 1) {
+    return dom.getClientRects();
+  } else {
+    return [];
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/command/hint.ts
+var CommandHint = class extends WidgetType2 {
+  constructor(content) {
+    super();
+    this.content = content;
+  }
+  toDOM() {
+    const wrap = document.createElement("span");
+    wrap.className = "cm-placeholder";
+    wrap.style.pointerEvents = "none";
+    wrap.appendChild(typeof this.content === "string" ? document.createTextNode(this.content) : this.content);
+    if (typeof this.content === "string") {
+      wrap.setAttribute("aria-label", "placeholder " + this.content);
+    } else {
+      wrap.setAttribute("aria-hidden", "true");
+    }
+    return wrap;
+  }
+  coordsAt(dom) {
+    const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+    if (!rects.length) {
+      return null;
+    }
+    const style = window.getComputedStyle(dom.parentNode);
+    const rect = flattenRect(rects[0], style.direction !== "rtl");
+    const lineHeight = parseInt(style.lineHeight);
+    if (rect.bottom - rect.top > lineHeight * 1.5) {
+      return {
+        left: rect.left,
+        right: rect.right,
+        top: rect.top,
+        bottom: rect.top + lineHeight
+      };
+    }
+    return rect;
+  }
+  ignoreEvent() {
+    return false;
+  }
+};
+var hintViewPlugin = ({ onHint }) => ViewPlugin3.fromClass(class {
+  constructor() {
+    this.deco = Decoration3.none;
+  }
+  update(update2) {
+    const builder = new RangeSetBuilder();
+    const cState = update2.view.state.field(commandState, false);
+    if (!cState?.tooltip) {
+      const selection = update2.view.state.selection.main;
+      const line = update2.view.state.doc.lineAt(selection.from);
+      if (selection.from === selection.to && line.from === line.to) {
+        const hint = onHint();
+        if (hint) {
+          builder.add(selection.from, selection.to, Decoration3.widget({
+            widget: new CommandHint(hint)
+          }));
+        }
+      }
     }
+    this.deco = builder.finish();
   }
+}, {
+  provide: (plugin) => [
+    EditorView5.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration3.none)
+  ]
+});
+
+// packages/ui/react-ui-editor/src/extensions/command/command.ts
+var command = (options) => {
+  return [
+    commandConfig.of(options),
+    commandState,
+    keymap3.of(commandKeyBindings),
+    hintViewPlugin(options),
+    EditorView6.focusChangeEffect.of((_, focusing) => {
+      return focusing ? closeEffect.of(null) : null;
+    })
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/comments.ts
+import { invertedEffects } from "@codemirror/commands";
+import { Facet as Facet4, StateEffect as StateEffect3, StateField as StateField4 } from "@codemirror/state";
+import { hoverTooltip, keymap as keymap4, Decoration as Decoration4, EditorView as EditorView7, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+import sortBy from "lodash.sortby";
+import { useEffect, useMemo, useState } from "react";
+import { debounce } from "@dxos/async";
+import { log as log5 } from "@dxos/log";
+import { nonNullable } from "@dxos/util";
+
+// packages/ui/react-ui-editor/src/extensions/util/error.ts
+import { log as log3 } from "@dxos/log";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/util/error.ts";
+var wrapWithCatch = (fn) => {
+  return (...args) => {
+    try {
+      return fn(...args);
+    } catch (err) {
+      log3.catch(err, void 0, {
+        F: __dxlog_file5,
+        L: 12,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  };
+};
+
+// packages/ui/react-ui-editor/src/extensions/util/overlap.ts
+var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
+
+// packages/ui/react-ui-editor/src/extensions/util/react.tsx
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { ThemeProvider } from "@dxos/react-ui";
+import { defaultTx } from "@dxos/react-ui-theme";
+var renderRoot = (root, node) => {
+  createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
+    tx: defaultTx
+  }, node));
+  return root;
 };
 
 // packages/ui/react-ui-editor/src/util.ts
@@ -4144,8 +4154,9 @@ var CheckboxWidget = class extends WidgetType5 {
   }
   toDOM(view) {
     const input = document.createElement("input");
-    input.className = "cm-task-checkbox ch-checkbox ch-focus-ring";
+    input.className = "cm-task-checkbox ch-checkbox";
     input.type = "checkbox";
+    input.tabIndex = -1;
     input.checked = this._checked;
     if (view.state.readOnly) {
       input.setAttribute("disabled", "true");
@@ -4233,7 +4244,7 @@ var buildDecorations2 = (view, options, focus) => {
   const getHeaderLevels = (node, level) => {
     invariant4(level > 0, void 0, {
       F: __dxlog_file10,
-      L: 158,
+      L: 159,
       S: void 0,
       A: [
         "level > 0",
@@ -4272,7 +4283,7 @@ var buildDecorations2 = (view, options, focus) => {
   const getCurrentList = () => {
     invariant4(listLevels.length, void 0, {
       F: __dxlog_file10,
-      L: 180,
+      L: 181,
       S: void 0,
       A: [
         "listLevels.length",
@@ -5245,6 +5256,11 @@ var editorGutter = EditorView16.baseTheme({
     backgroundColor: "transparent !important"
   }
 });
+var editorMonospace = EditorView16.baseTheme({
+  ".cm-content": {
+    fontFamily: `${getToken("fontFamily.mono")} !important`
+  }
+});
 
 // packages/ui/react-ui-editor/src/hooks/useActionHandler.ts
 var useActionHandler = (view) => {
@@ -5444,6 +5460,7 @@ export {
   editorContent,
   editorGutter,
   editorInputMode,
+  editorMonospace,
   editorWithToolbarLayout,
   focusEvent,
   folding,