@dxos/react-ui-editor 0.8.3 → 0.8.4-main.28f8d3d

package/dist/lib/browser/index.mjs

@@ -1,6 +1,13 @@
-// packages/ui/react-ui-editor/src/translations.ts
+import {
+  EditorInputMode,
+  EditorInputModes,
+  EditorViewMode,
+  EditorViewModes
+} from "./chunk-22UMM3QJ.mjs";
+
+// src/translations.ts
 var translationKey = "react-ui-editor";
-var translations_default = [
+var translations = [
   {
     "en-US": {
       [translationKey]: {
@@ -33,46 +40,27 @@ var translations_default = [
   }
 ];
 
-// packages/ui/react-ui-editor/src/index.ts
+// src/index.ts
 import { EditorState as EditorState4 } from "@codemirror/state";
 import { EditorView as EditorView27, keymap as keymap14 } 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/EditorToolbar/EditorToolbar.tsx
+// src/components/Editor/Editor.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import { Rx } from "@effect-rx/rx-react";
-import React3, { memo, useMemo as useMemo4 } from "react";
-import { rxFromSignal } from "@dxos/app-graph";
-import { ElevationProvider } from "@dxos/react-ui";
-import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
+import React3, { forwardRef, useImperativeHandle } from "react";
+import { useThemeContext } from "@dxos/react-ui";
+import { mx as mx6 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/util.ts
-import { useMemo } from "react";
-import { live } from "@dxos/live-object";
-import { createMenuAction, createMenuItemGroup } from "@dxos/react-ui-menu";
-var useEditorToolbarState = (initialState = {}) => {
-  return useMemo(() => live(initialState), []);
-};
-var createEditorAction = (id, invoke, properties) => {
-  const { label = [
-    `${id} label`,
-    {
-      ns: translationKey
-    }
-  ], ...rest } = properties;
-  return createMenuAction(id, invoke, {
-    label,
-    ...rest
-  });
-};
-var createEditorActionGroup = (id, props, icon) => createMenuItemGroup(id, {
-  icon,
-  iconOnly: true,
-  ...props
-});
+// src/hooks/useTextEditor.ts
+import { EditorState as EditorState3 } from "@codemirror/state";
+import { EditorView as EditorView26 } from "@codemirror/view";
+import { useFocusableGroup } from "@fluentui/react-tabster";
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
+import { log as log8 } from "@dxos/log";
+import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/extensions/annotations.ts
+// src/extensions/annotations.ts
 import { RangeSetBuilder } from "@codemirror/state";
 import { Decoration, EditorView, ViewPlugin } from "@codemirror/view";
 var annotationMark = Decoration.mark({
@@ -81,9 +69,7 @@ var annotationMark = Decoration.mark({
 var annotations = ({ match } = {}) => {
   return [
     ViewPlugin.fromClass(class {
-      constructor() {
-        this.decorations = Decoration.none;
-      }
+      decorations = Decoration.none;
       update(update2) {
         const builder = new RangeSetBuilder();
         if (match) {
@@ -113,7 +99,7 @@ var annotations = ({ match } = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/autocomplete.ts
+// src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
@@ -150,22 +136,179 @@ var autocomplete = ({ activateOnTyping, override, onSearch } = {}) => {
   return extensions;
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
+// src/extensions/automerge/automerge.ts
 import { next as A3 } from "@automerge/automerge";
 import { StateField } from "@codemirror/state";
 import { EditorView as EditorView2, ViewPlugin as ViewPlugin2 } from "@codemirror/view";
 
-// packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
+// src/util/facet.ts
+import { Facet } from "@codemirror/state";
+var singleValueFacet = (defaultValue) => Facet.define({
+  // Called immediately.
+  combine: (providers) => {
+    return providers[0] ?? defaultValue;
+  }
+});
+
+// src/util/cursor.ts
+var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
+var defaultCursorConverter = {
+  toCursor: (position) => position.toString(),
+  fromCursor: (cursor) => parseInt(cursor)
+};
+var Cursor = class _Cursor {
+  static converter = singleValueFacet(defaultCursorConverter);
+  static getCursorFromRange = (state, range) => {
+    const cursorConverter2 = state.facet(_Cursor.converter);
+    const from = cursorConverter2.toCursor(range.from);
+    const to = cursorConverter2.toCursor(range.to, -1);
+    return [
+      from,
+      to
+    ].join(":");
+  };
+  static getRangeFromCursor = (state, cursor) => {
+    const cursorConverter2 = state.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;
+  };
+};
+
+// src/util/debug.ts
 import { log } from "@dxos/log";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/util/debug.ts";
+var wrapWithCatch = (fn) => {
+  return (...args) => {
+    try {
+      return fn(...args);
+    } catch (err) {
+      log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 15,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  };
+};
+var callbackWrapper = (fn) => (...args) => {
+  try {
+    return fn(...args);
+  } catch (err) {
+    log.catch(err, void 0, {
+      F: __dxlog_file,
+      L: 29,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+};
+var debugDispatcher = (trs, view) => {
+  logChanges(trs);
+  view.update(trs);
+};
+var logChanges = (trs) => {
+  const changes = trs.flatMap((tr) => {
+    if (tr.changes.empty) {
+      return void 0;
+    }
+    const changes2 = [];
+    tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => changes2.push(JSON.stringify({
+      fromA,
+      toA,
+      fromB,
+      toB,
+      inserted: inserted.toString()
+    })));
+    return changes2;
+  }).filter(Boolean);
+  if (changes.length) {
+    log("changes", {
+      changes
+    }, {
+      F: __dxlog_file,
+      L: 62,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+};
+
+// src/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 [];
+  }
+};
+var createElement = (tag, options, children) => {
+  const el = document.createElement(tag);
+  if (options?.className) {
+    el.className = options.className;
+  }
+  if (options?.text) {
+    el.textContent = options.text;
+  }
+  if (children) {
+    el.append(...Array.isArray(children) ? children : [
+      children
+    ]);
+  }
+  return el;
+};
+
+// src/util/react.tsx
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { ThemeProvider, Tooltip } 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;
+};
+var createRenderer = (Component) => (el, props) => {
+  renderRoot(el, /* @__PURE__ */ React.createElement(ThemeProvider, {
+    tx: defaultTx
+  }, /* @__PURE__ */ React.createElement(Tooltip.Provider, null, /* @__PURE__ */ React.createElement(Component, props))));
+};
+
+// src/extensions/automerge/cursor.ts
+import { log as log2 } 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 __dxlog_file2 = "/__w/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,
+      log2.catch(err, void 0, {
+        F: __dxlog_file2,
         L: 15,
         S: void 0,
         C: (f, a) => f(...a)
@@ -177,8 +320,8 @@ var cursorConverter = (accessor) => ({
     try {
       return fromCursor(accessor, cursor);
     } catch (err) {
-      log.catch(err, void 0, {
-        F: __dxlog_file,
+      log2.catch(err, void 0, {
+        F: __dxlog_file2,
         L: 24,
         S: void 0,
         C: (f, a) => f(...a)
@@ -188,7 +331,7 @@ var cursorConverter = (accessor) => ({
   }
 });
 
-// packages/ui/react-ui-editor/src/extensions/automerge/defs.ts
+// src/extensions/automerge/defs.ts
 import { Annotation, StateEffect } from "@codemirror/state";
 var getPath = (state, field) => state.field(field).path;
 var getLastHeads = (state, field) => state.field(field).lastHeads;
@@ -201,10 +344,10 @@ var isReconcile = (tr) => {
   return !!tr.annotation(reconcileAnnotation);
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/sync.ts
+// src/extensions/automerge/sync.ts
 import { next as A2 } from "@automerge/automerge";
 
-// packages/ui/react-ui-editor/src/extensions/automerge/update-automerge.ts
+// src/extensions/automerge/update-automerge.ts
 import { next as A } from "@automerge/automerge";
 var updateAutomerge = (field, handle, transactions, state) => {
   const { lastHeads, path } = state.field(field);
@@ -235,7 +378,7 @@ var updateAutomerge = (field, handle, transactions, state) => {
   return newHeads ?? void 0;
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/update-codemirror.ts
+// src/extensions/automerge/update-codemirror.ts
 import { ChangeSet } from "@codemirror/state";
 var updateCodeMirror = (view, selection, target, patches) => {
   for (const patch of patches) {
@@ -342,8 +485,11 @@ var charPath = (textPath, candidatePath) => {
   return null;
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/sync.ts
+// src/extensions/automerge/sync.ts
 var Syncer = class {
+  _handle;
+  _state;
+  _pending;
   // prettier-ignore
   constructor(_handle, _state) {
     this._handle = _handle;
@@ -386,170 +532,7 @@ var Syncer = class {
   }
 };
 
-// packages/ui/react-ui-editor/src/util/facet.ts
-import { Facet } from "@codemirror/state";
-var singleValueFacet = (defaultValue) => Facet.define({
-  // Called immediately.
-  combine: (providers) => {
-    return providers[0] ?? defaultValue;
-  }
-});
-
-// packages/ui/react-ui-editor/src/util/cursor.ts
-var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
-var defaultCursorConverter = {
-  toCursor: (position) => position.toString(),
-  fromCursor: (cursor) => parseInt(cursor)
-};
-var Cursor = class _Cursor {
-  static {
-    this.converter = singleValueFacet(defaultCursorConverter);
-  }
-  static {
-    this.getCursorFromRange = (state, range) => {
-      const cursorConverter2 = state.facet(_Cursor.converter);
-      const from = cursorConverter2.toCursor(range.from);
-      const to = cursorConverter2.toCursor(range.to, -1);
-      return [
-        from,
-        to
-      ].join(":");
-    };
-  }
-  static {
-    this.getRangeFromCursor = (state, cursor) => {
-      const cursorConverter2 = state.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/util/debug.ts
-import { log as log2 } from "@dxos/log";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util/debug.ts";
-var wrapWithCatch = (fn) => {
-  return (...args) => {
-    try {
-      return fn(...args);
-    } catch (err) {
-      log2.catch(err, void 0, {
-        F: __dxlog_file2,
-        L: 15,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    }
-  };
-};
-var callbackWrapper = (fn) => (...args) => {
-  try {
-    return fn(...args);
-  } catch (err) {
-    log2.catch(err, void 0, {
-      F: __dxlog_file2,
-      L: 29,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
-};
-var debugDispatcher = (trs, view) => {
-  logChanges(trs);
-  view.update(trs);
-};
-var logChanges = (trs) => {
-  const changes = trs.flatMap((tr) => {
-    if (tr.changes.empty) {
-      return void 0;
-    }
-    const changes2 = [];
-    tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => changes2.push(JSON.stringify({
-      fromA,
-      toA,
-      fromB,
-      toB,
-      inserted: inserted.toString()
-    })));
-    return changes2;
-  }).filter(Boolean);
-  if (changes.length) {
-    log2("changes", {
-      changes
-    }, {
-      F: __dxlog_file2,
-      L: 62,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
-};
-
-// packages/ui/react-ui-editor/src/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 [];
-  }
-};
-var createElement = (tag, options, children) => {
-  const el = document.createElement(tag);
-  if (options?.className) {
-    el.className = options.className;
-  }
-  if (options?.text) {
-    el.textContent = options.text;
-  }
-  if (children) {
-    el.append(...Array.isArray(children) ? children : [
-      children
-    ]);
-  }
-  return el;
-};
-
-// packages/ui/react-ui-editor/src/util/react.tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider, Tooltip } 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;
-};
-var createRenderer = (Component) => (el, props) => {
-  renderRoot(el, /* @__PURE__ */ React.createElement(ThemeProvider, {
-    tx: defaultTx
-  }, /* @__PURE__ */ React.createElement(Tooltip.Provider, null, /* @__PURE__ */ React.createElement(Component, props))));
-};
-
-// packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
+// src/extensions/automerge/automerge.ts
 var automerge = (accessor) => {
   const syncState = StateField.define({
     create: () => ({
@@ -587,6 +570,7 @@ var automerge = (accessor) => {
     syncState,
     // Reconcile external updates.
     ViewPlugin2.fromClass(class {
+      _view;
       constructor(_view) {
         this._view = _view;
         this._handleChange = () => {
@@ -597,6 +581,7 @@ var automerge = (accessor) => {
       destroy() {
         accessor.handle.removeListener("change", this._handleChange);
       }
+      _handleChange;
     }),
     // Reconcile local updates.
     EditorView2.updateListener.of(({ view, changes }) => {
@@ -607,12 +592,12 @@ var automerge = (accessor) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts
+// src/extensions/awareness/awareness.ts
 import { Annotation as Annotation2, RangeSet } from "@codemirror/state";
 import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin3, WidgetType } from "@codemirror/view";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
 var dummyProvider = {
   remoteStateChange: new Event(),
   open: () => {
@@ -635,12 +620,16 @@ var awareness = (provider = dummyProvider) => {
   ];
 };
 var RemoteSelectionsDecorator = class {
+  _ctx = new Context(void 0, {
+    F: __dxlog_file3,
+    L: 80
+  });
+  _cursorConverter;
+  _provider;
+  _lastAnchor;
+  _lastHead;
+  decorations = RangeSet.of([]);
   constructor(view) {
-    this._ctx = new Context(void 0, {
-      F: __dxlog_file3,
-      L: 80
-    });
-    this.decorations = RangeSet.of([]);
     this._cursorConverter = view.state.facet(Cursor.converter);
     this._provider = view.state.facet(awarenessProvider);
     this._provider.open();
@@ -748,6 +737,8 @@ var RemoteSelectionsDecorator = class {
   }
 };
 var RemoteCaretWidget = class extends WidgetType {
+  _name;
+  _color;
   constructor(_name, _color) {
     super(), this._name = _name, this._color = _color;
   }
@@ -839,17 +830,24 @@ var styles = EditorView3.theme({
   }
 });
 
-// packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts
+// 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 log3 } from "@dxos/log";
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts";
+var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts";
 var DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
+  _remoteStates = /* @__PURE__ */ new Map();
+  _space;
+  _channel;
+  _peerId;
+  _info;
+  _ctx;
+  _postTask;
+  _localState;
+  remoteStateChange = new Event2();
   constructor(params) {
-    this._remoteStates = /* @__PURE__ */ new Map();
-    this.remoteStateChange = new Event2();
     this._space = params.space;
     this._channel = params.channel;
     this._peerId = params.peerId;
@@ -946,11 +944,12 @@ var SpaceAwarenessProvider = class {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/blast.ts
+// src/extensions/blast.ts
 import { EditorView as EditorView4, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
+import { throttle } from "@dxos/async";
 import { invariant as invariant2 } from "@dxos/invariant";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
+var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
   maxParticles: 200,
@@ -1044,6 +1043,18 @@ var blast = (options = defaultOptions) => {
   ];
 };
 var Blaster = class {
+  _node;
+  _options;
+  _effect;
+  _canvas;
+  _ctx;
+  _running;
+  _lastTime;
+  _shakeTime;
+  _shakeTimeMax;
+  _particles;
+  _particlePointer;
+  _lastPoint;
   constructor(_node, _options) {
     this._node = _node;
     this._options = _options;
@@ -1078,7 +1089,7 @@ var Blaster = class {
   initialize() {
     invariant2(!this._canvas && !this._ctx, void 0, {
       F: __dxlog_file5,
-      L: 141,
+      L: 142,
       S: this,
       A: [
         "!this._canvas && !this._ctx",
@@ -1115,7 +1126,7 @@ var Blaster = class {
   start() {
     invariant2(this._canvas && this._ctx, void 0, {
       F: __dxlog_file5,
-      L: 180,
+      L: 181,
       S: this,
       A: [
         "this._canvas && this._ctx",
@@ -1148,6 +1159,8 @@ var Blaster = class {
     this.drawParticles();
     requestAnimationFrame(this.loop.bind(this));
   }
+  shake;
+  spawn;
   drawParticles() {
     for (let i = this._particles.length; i--; i > 0) {
       const particle = this._particles[i];
@@ -1162,6 +1175,7 @@ var Blaster = class {
   }
 };
 var Effect = class {
+  _options;
   constructor(_options) {
     this._options = _options;
   }
@@ -1219,18 +1233,6 @@ var Effect2 = class extends Effect {
     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();
@@ -1256,10 +1258,10 @@ var random = (min, max) => {
   return min + ~~(Math.random() * (max - min + 1));
 };
 
-// packages/ui/react-ui-editor/src/extensions/command/action.ts
+// src/extensions/command/action.ts
 import { StateEffect as StateEffect2 } from "@codemirror/state";
 
-// packages/ui/react-ui-editor/src/extensions/command/state.ts
+// src/extensions/command/state.ts
 import { StateField as StateField2 } from "@codemirror/state";
 import { showTooltip } from "@codemirror/view";
 var commandConfig = singleValueFacet();
@@ -1272,7 +1274,7 @@ var commandState = StateField2.define({
       }
       const { renderDialog } = tr.state.facet(commandConfig);
       if (effect.is(openEffect) && renderDialog) {
-        const { pos, fullWidth } = effect.value;
+        const { pos, fullWidth: fullWidth2 } = effect.value;
         const tooltip = {
           pos,
           above: false,
@@ -1283,7 +1285,7 @@ var commandState = StateField2.define({
             const tooltipView = {
               dom: root,
               mount: (view2) => {
-                if (fullWidth) {
+                if (fullWidth2) {
                   const parent = root.parentElement;
                   const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
                   const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
@@ -1329,7 +1331,7 @@ var commandState = StateField2.define({
   ]
 });
 
-// packages/ui/react-ui-editor/src/extensions/command/action.ts
+// src/extensions/command/action.ts
 var openEffect = StateEffect2.define();
 var closeEffect = StateEffect2.define();
 var openCommand = (view) => {
@@ -1369,19 +1371,18 @@ var commandKeyBindings = [
   }
 ];
 
-// packages/ui/react-ui-editor/src/extensions/command/command.ts
+// src/extensions/command/command.ts
 import { Prec } from "@codemirror/state";
 import { EditorView as EditorView6, keymap as keymap3 } from "@codemirror/view";
 import { isNonNullable } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/extensions/command/hint.ts
+// src/extensions/command/hint.ts
 import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
 import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
 var hint = ({ delay = 3e3, onHint }) => {
   return ViewPlugin4.fromClass(class {
-    constructor() {
-      this.decorations = Decoration3.none;
-    }
+    decorations = Decoration3.none;
+    timeout;
     update(update2) {
       if (this.timeout) {
         clearTimeout(this.timeout);
@@ -1420,6 +1421,7 @@ var hint = ({ delay = 3e3, onHint }) => {
   });
 };
 var Hint = class extends WidgetType2 {
+  content;
   constructor(content) {
     super(), this.content = content;
   }
@@ -1458,7 +1460,7 @@ var Hint = class extends WidgetType2 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/command/command.ts
+// src/extensions/command/command.ts
 var command = (options = {}) => {
   return [
     Prec.highest(keymap3.of(commandKeyBindings)),
@@ -1474,17 +1476,16 @@ var command = (options = {}) => {
   ].filter(isNonNullable);
 };
 
-// packages/ui/react-ui-editor/src/extensions/command/command-menu.ts
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField3, StateEffect as StateEffect3, Prec as Prec2 } from "@codemirror/state";
-import { EditorView as EditorView8, ViewPlugin as ViewPlugin6, Decoration as Decoration5, keymap as keymap4 } from "@codemirror/view";
+// src/extensions/command/command-menu.ts
+import { Prec as Prec2, RangeSetBuilder as RangeSetBuilder3, StateEffect as StateEffect3, StateField as StateField3 } from "@codemirror/state";
+import { Decoration as Decoration5, EditorView as EditorView8, ViewPlugin as ViewPlugin6, keymap as keymap4 } from "@codemirror/view";
 
-// packages/ui/react-ui-editor/src/extensions/command/placeholder.ts
-import { Decoration as Decoration4, EditorView as EditorView7, WidgetType as WidgetType3, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+// src/extensions/command/placeholder.ts
+import { Decoration as Decoration4, EditorView as EditorView7, ViewPlugin as ViewPlugin5, WidgetType as WidgetType3 } from "@codemirror/view";
 var placeholder = ({ delay = 3e3, content }) => {
   const plugin = ViewPlugin5.fromClass(class {
-    constructor() {
-      this.decorations = Decoration4.none;
-    }
+    decorations = Decoration4.none;
+    timeout;
     update(update2) {
       if (this.timeout) {
         window.clearTimeout(this.timeout);
@@ -1526,6 +1527,7 @@ var placeholder = ({ delay = 3e3, content }) => {
   ] : plugin;
 };
 var Placeholder = class extends WidgetType3 {
+  content;
   constructor(content) {
     super(), this.content = content;
   }
@@ -1560,9 +1562,11 @@ var Placeholder = class extends WidgetType3 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/command/command-menu.ts
+// src/extensions/command/command-menu.ts
 var commandMenu = (options) => {
   const commandMenuPlugin = ViewPlugin6.fromClass(class {
+    view;
+    decorations;
     constructor(view) {
       this.view = view;
       this.decorations = Decoration5.none;
@@ -1717,11 +1721,15 @@ var commandMenuState = StateField3.define({
   }
 });
 
-// packages/ui/react-ui-editor/src/extensions/command/floating-menu.ts
+// src/extensions/command/floating-menu.ts
 import { EditorView as EditorView9, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
 import { addEventListener } from "@dxos/async";
 var floatingMenu = (options = {}) => [
   ViewPlugin7.fromClass(class {
+    view;
+    tag;
+    rafId;
+    cleanup;
     constructor(view) {
       this.view = view;
       const container = view.scrollDOM;
@@ -1803,11 +1811,94 @@ var floatingMenu = (options = {}) => [
       width: "2rem",
       height: "2rem"
     }
-  })
-];
+  })
+];
+
+// src/extensions/command/typeahead.ts
+import { EditorSelection, Prec as Prec3, RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
+import { Decoration as Decoration6, ViewPlugin as ViewPlugin8, keymap as keymap5 } from "@codemirror/view";
+var typeahead = ({ onComplete } = {}) => {
+  let hint2;
+  const complete = (view) => {
+    if (!hint2) {
+      return false;
+    }
+    const selection = view.state.selection.main;
+    view.dispatch({
+      changes: [
+        {
+          from: selection.from,
+          to: selection.to,
+          insert: hint2
+        }
+      ],
+      selection: EditorSelection.cursor(selection.from + hint2.length)
+    });
+    return true;
+  };
+  return [
+    ViewPlugin8.fromClass(class {
+      decorations = Decoration6.none;
+      update(update2) {
+        const builder = new RangeSetBuilder4();
+        const selection = update2.view.state.selection.main;
+        const line = update2.view.state.doc.lineAt(selection.from);
+        if (selection.from === selection.to && selection.from === line.to) {
+          const str = update2.state.sliceDoc(line.from, selection.from);
+          hint2 = onComplete?.({
+            line: str
+          });
+          if (hint2) {
+            builder.add(selection.from, selection.to, Decoration6.widget({
+              widget: new Hint(hint2)
+            }));
+          }
+        }
+        this.decorations = builder.finish();
+      }
+    }, {
+      decorations: (v) => v.decorations
+    }),
+    // Keys.
+    Prec3.highest(keymap5.of([
+      {
+        key: "Tab",
+        preventDefault: true,
+        run: complete
+      },
+      {
+        key: "ArrowRight",
+        preventDefault: true,
+        run: complete
+      }
+    ]))
+  ];
+};
+var staticCompletion = (completions, options = {}) => ({ line }) => {
+  if (line.length === 0 && options.default) {
+    return options.default;
+  }
+  const parts = line.split(/\s+/).filter(Boolean);
+  if (parts.length) {
+    const str = parts.at(-1);
+    if (str.length >= (options.minLength ?? 0)) {
+      for (const completion of completions) {
+        const match = matchCompletion(completion, str);
+        if (match) {
+          return match;
+        }
+      }
+    }
+  }
+};
+var matchCompletion = (completion, str, minLength = 0) => {
+  if (str.length >= minLength && completion.length > str.length && completion.startsWith(str)) {
+    return completion.slice(str.length);
+  }
+};
 
-// packages/ui/react-ui-editor/src/extensions/command/useCommandMenu.ts
-import { useCallback, useMemo as useMemo2, useRef, useState } from "react";
+// src/extensions/command/useCommandMenu.ts
+import { useCallback, useMemo, useRef, useState } from "react";
 var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder3, getMenu }) => {
   const triggerRef = useRef(null);
   const currentRef = useRef(null);
@@ -1855,7 +1946,7 @@ var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder3, getMenu })
     void item.onSelect?.(view, selection.head);
   }, []);
   const serializedTrigger = Array.isArray(trigger) ? trigger.join(",") : trigger;
-  const _commandMenu = useMemo2(() => {
+  const _commandMenu = useMemo(() => {
     return commandMenu({
       trigger,
       placeholder: placeholder3,
@@ -1907,106 +1998,23 @@ var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder3, getMenu })
   };
 };
 
-// packages/ui/react-ui-editor/src/extensions/command/typeahead.ts
-import { EditorSelection, Prec as Prec3, RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
-import { Decoration as Decoration6, keymap as keymap5, ViewPlugin as ViewPlugin8 } from "@codemirror/view";
-var typeahead = ({ onComplete } = {}) => {
-  let hint2;
-  const complete = (view) => {
-    if (!hint2) {
-      return false;
-    }
-    const selection = view.state.selection.main;
-    view.dispatch({
-      changes: [
-        {
-          from: selection.from,
-          to: selection.to,
-          insert: hint2
-        }
-      ],
-      selection: EditorSelection.cursor(selection.from + hint2.length)
-    });
-    return true;
-  };
-  return [
-    ViewPlugin8.fromClass(class {
-      constructor() {
-        this.decorations = Decoration6.none;
-      }
-      update(update2) {
-        const builder = new RangeSetBuilder4();
-        const selection = update2.view.state.selection.main;
-        const line = update2.view.state.doc.lineAt(selection.from);
-        if (selection.from === selection.to && selection.from === line.to) {
-          const str = update2.state.sliceDoc(line.from, selection.from);
-          hint2 = onComplete?.({
-            line: str
-          });
-          if (hint2) {
-            builder.add(selection.from, selection.to, Decoration6.widget({
-              widget: new Hint(hint2)
-            }));
-          }
-        }
-        this.decorations = builder.finish();
-      }
-    }, {
-      decorations: (v) => v.decorations
-    }),
-    // Keys.
-    Prec3.highest(keymap5.of([
-      {
-        key: "Tab",
-        preventDefault: true,
-        run: complete
-      },
-      {
-        key: "ArrowRight",
-        preventDefault: true,
-        run: complete
-      }
-    ]))
-  ];
-};
-var staticCompletion = (completions, defaultCompletion) => ({ line }) => {
-  if (line.length === 0 && defaultCompletion) {
-    return defaultCompletion;
-  }
-  const words = line.split(/\s+/).filter(Boolean);
-  if (words.length) {
-    const word = words.at(-1);
-    for (const completion of completions) {
-      const match = matchCompletion(completion, word);
-      if (match) {
-        return match;
-      }
-    }
-  }
-};
-var matchCompletion = (completion, word) => {
-  if (completion.length > word.length && completion.startsWith(word)) {
-    return completion.slice(word.length);
-  }
-};
-
-// packages/ui/react-ui-editor/src/extensions/comments.ts
+// src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
 import { StateEffect as StateEffect4, StateField as StateField4 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap7, Decoration as Decoration7, EditorView as EditorView11, ViewPlugin as ViewPlugin9 } from "@codemirror/view";
+import { Decoration as Decoration7, EditorView as EditorView11, ViewPlugin as ViewPlugin9, hoverTooltip, keymap as keymap7 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { useEffect } from "react";
 import { debounce as debounce2 } from "@dxos/async";
 import { log as log4 } from "@dxos/log";
 import { isNonNullable as isNonNullable2 } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/extensions/selection.ts
+// src/extensions/selection.ts
 import { Transaction } from "@codemirror/state";
 import { EditorView as EditorView10, keymap as keymap6 } from "@codemirror/view";
 import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isNotFalsy } from "@dxos/util";
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/selection.ts";
+var __dxlog_file6 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/selection.ts";
 var documentId = singleValueFacet();
 var stateRestoreAnnotation = "dxos.org/cm/state-restore";
 var createEditorStateTransaction = ({ scrollTo, selection }) => {
@@ -2093,8 +2101,8 @@ var selectionState = ({ getState, setState } = {}) => {
   ].filter(isNotFalsy);
 };
 
-// packages/ui/react-ui-editor/src/extensions/comments.ts
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
+// src/extensions/comments.ts
+var __dxlog_file7 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
 var setComments = StateEffect4.define();
 var setSelection = StateEffect4.define();
 var setCommentState = StateEffect4.define();
@@ -2165,7 +2173,7 @@ var commentsDecorations = EditorView11.decorations.compute([
     if (!range) {
       log4.warn("Invalid range:", range, {
         F: __dxlog_file7,
-        L: 135,
+        L: 136,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2480,10 +2488,8 @@ var scrollThreadIntoView = (view, id, center = true) => {
   }
 };
 var ExternalCommentSync = class {
+  unsubscribe;
   constructor(view, id, subscribe, getComments) {
-    this.destroy = () => {
-      this.unsubscribe();
-    };
     const updateComments = () => {
       const comments2 = getComments();
       if (id === view.state.facet(documentId)) {
@@ -2497,6 +2503,9 @@ var ExternalCommentSync = class {
     };
     this.unsubscribe = subscribe(updateComments);
   }
+  destroy = () => {
+    this.unsubscribe();
+  };
 };
 var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin9.fromClass(class {
   constructor(view) {
@@ -2518,7 +2527,7 @@ var useComments = (view, id, comments2) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/debug.ts
+// src/extensions/debug.ts
 import { syntaxTree } from "@codemirror/language";
 import { StateField as StateField5 } from "@codemirror/state";
 var debugNodeLogger = (log9 = console.log) => {
@@ -2531,8 +2540,8 @@ var debugNodeLogger = (log9 = console.log) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/dnd.ts
-import { dropCursor, EditorView as EditorView12 } from "@codemirror/view";
+// src/extensions/dnd.ts
+import { EditorView as EditorView12, dropCursor } from "@codemirror/view";
 var styles3 = EditorView12.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--dx-accentText)",
@@ -2567,7 +2576,7 @@ var dropFile = (options = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/factories.ts
+// src/extensions/factories.ts
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
@@ -2581,42 +2590,11 @@ import { generateName } from "@dxos/display-name";
 import { log as log5 } from "@dxos/log";
 import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/extensions/focus.ts
-import { StateEffect as StateEffect5, StateField as StateField6 } from "@codemirror/state";
+// src/defaults.ts
 import { EditorView as EditorView13 } from "@codemirror/view";
-var focusEffect = StateEffect5.define();
-var focusField = StateField6.define({
-  create: () => false,
-  update: (value, tr) => {
-    for (const effect of tr.effects) {
-      if (effect.is(focusEffect)) {
-        return effect.value;
-      }
-    }
-    return value;
-  }
-});
-var focus = [
-  focusField,
-  EditorView13.domEventHandlers({
-    focus: (event, view) => {
-      setTimeout(() => view.dispatch({
-        effects: focusEffect.of(true)
-      }));
-    },
-    blur: (event, view) => {
-      setTimeout(() => view.dispatch({
-        effects: focusEffect.of(false)
-      }));
-    }
-  })
-];
-
-// packages/ui/react-ui-editor/src/defaults.ts
-import { EditorView as EditorView14 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-editor/src/styles/markdown.ts
+// src/styles/markdown.ts
 import { mx } from "@dxos/react-ui-theme";
 var headings = {
   1: "text-4xl",
@@ -2635,7 +2613,7 @@ var theme = {
   }
 };
 
-// packages/ui/react-ui-editor/src/styles/tokens.ts
+// src/styles/tokens.ts
 import { tokens } from "@dxos/react-ui-theme";
 import { get } from "@dxos/util";
 var getToken = (path, defaultValue) => {
@@ -2645,7 +2623,7 @@ var getToken = (path, defaultValue) => {
 var fontBody = getToken("fontFamily.body");
 var fontMono = getToken("fontFamily.mono");
 
-// packages/ui/react-ui-editor/src/styles/theme.ts
+// src/styles/theme.ts
 var defaultTheme = {
   "&": {},
   "&.cm-focused": {
@@ -2680,18 +2658,17 @@ var defaultTheme = {
   ".cm-gutter": {},
   ".cm-gutter.cm-lineNumbers": {
     paddingRight: "4px",
-    borderRight: "1px solid var(--dx-separator)"
+    borderRight: "1px solid var(--dx-subduedSeparator)"
   },
   ".cm-gutter.cm-lineNumbers .cm-gutterElement": {
-    minWidth: "40px",
-    alignContent: "center"
+    minWidth: "40px"
   },
   /**
-  * Height is set to match the corresponding line.
+  * Height is set to match the corresponding line (which may have wrapped).
   */
   ".cm-gutterElement": {
-    alignItems: "center",
-    fontSize: "12px"
+    fontSize: "12px",
+    lineHeight: "24px"
   },
   /**
   * Line.
@@ -2709,7 +2686,7 @@ var defaultTheme = {
     borderLeft: "2px solid var(--dx-cmCursor)"
   },
   ".cm-placeholder": {
-    color: "var(--dx-subdued)"
+    color: "var(--dx-placeholder)"
   },
   /**
   * Selection (layer).
@@ -2751,7 +2728,7 @@ var defaultTheme = {
   * Tooltip.
   */
   ".cm-tooltip": {
-    background: "var(--dx-baseSurface)"
+    background: "var(--dx-modalSurface)"
   },
   ".cm-tooltip-below": {},
   /**
@@ -2771,7 +2748,8 @@ var defaultTheme = {
     padding: "4px"
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
-    background: "var(--dx-hoverSurface)"
+    background: "var(--dx-accentSurface)",
+    color: "var(--dx-accentSurfaceText)"
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
     paddingLeft: "4px !important",
@@ -2825,7 +2803,7 @@ var defaultTheme = {
     outline: "1px solid transparent"
   },
   ".cm-panel input, .cm-panel button": {
-    backgroundColor: "var(--dx-input)"
+    backgroundColor: "var(--dx-inputSurface)"
   },
   ".cm-panel input:focus, .cm-panel button:focus": {
     outline: "1px solid var(--dx-neutralFocusIndicator)"
@@ -2857,7 +2835,7 @@ var defaultTheme = {
   }
 };
 
-// packages/ui/react-ui-editor/src/defaults.ts
+// src/defaults.ts
 var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
 var editorSlots = {
   scroll: {
@@ -2867,13 +2845,13 @@ var editorSlots = {
     className: editorWidth
   }
 };
-var editorGutter = EditorView14.theme({
+var editorGutter = EditorView13.theme({
   ".cm-gutters": {
     background: "var(--dx-baseSurface)",
     paddingRight: "1rem"
   }
 });
-var editorMonospace = EditorView14.theme({
+var editorMonospace = EditorView13.theme({
   ".cm-content": {
     fontFamily: fontMono
   }
@@ -2881,8 +2859,39 @@ var editorMonospace = EditorView14.theme({
 var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
 var stackItemContentEditorClassNames = (role) => mx2("attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
 
-// packages/ui/react-ui-editor/src/extensions/factories.ts
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
+// src/extensions/focus.ts
+import { StateEffect as StateEffect5, StateField as StateField6 } from "@codemirror/state";
+import { EditorView as EditorView14 } from "@codemirror/view";
+var focusEffect = StateEffect5.define();
+var focusField = StateField6.define({
+  create: () => false,
+  update: (value, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(focusEffect)) {
+        return effect.value;
+      }
+    }
+    return value;
+  }
+});
+var focus = [
+  focusField,
+  EditorView14.domEventHandlers({
+    focus: (event, view) => {
+      setTimeout(() => view.dispatch({
+        effects: focusEffect.of(true)
+      }));
+    },
+    blur: (event, view) => {
+      setTimeout(() => view.dispatch({
+        effects: focusEffect.of(false)
+      }));
+    }
+  })
+];
+
+// src/extensions/factories.ts
+var __dxlog_file8 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
 var preventNewline = EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
 var defaultBasicOptions = {
   allowMultipleSelections: true,
@@ -2893,7 +2902,7 @@ var defaultBasicOptions = {
   history: true,
   keymap: "standard",
   lineWrapping: true,
-  search: true
+  search: false
 };
 var keymaps = {
   // https://codemirror.net/docs/ref/#commands.standardKeymap
@@ -2908,7 +2917,7 @@ var createBasicExtensions = (_props) => {
     EditorView15.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
         F: __dxlog_file8,
-        L: 100,
+        L: 101,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2958,11 +2967,17 @@ var createBasicExtensions = (_props) => {
     ].filter(isNotFalsy2))
   ].filter(isNotFalsy2);
 };
-var defaultThemeSlots = {
+var grow = {
   editor: {
-    className: "w-full bs-full"
+    className: "is-full bs-full"
   }
 };
+var fullWidth = {
+  editor: {
+    className: "is-full"
+  }
+};
+var defaultThemeSlots = grow;
 var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
   const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
@@ -2980,6 +2995,11 @@ var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: _
       constructor(view) {
         view.scrollDOM.classList.add(slots.scroll.className);
       }
+    }),
+    slots.scroller?.className && ViewPlugin10.fromClass(class {
+      constructor(view) {
+        view.dom.querySelector(".cm-scroller")?.classList.add(...slots.scroller.className.split(" "));
+      }
     })
   ].filter(isNotFalsy2);
 };
@@ -3005,7 +3025,7 @@ var createDataExtensions = ({ id, text, space, identity }) => {
   return extensions;
 };
 
-// packages/ui/react-ui-editor/src/extensions/folding.tsx
+// src/extensions/folding.tsx
 import { codeFolding, foldGutter } from "@codemirror/language";
 import { EditorView as EditorView16 } from "@codemirror/view";
 import React2 from "react";
@@ -3043,10 +3063,11 @@ var folding = (_props = {}) => [
   })
 ];
 
-// packages/ui/react-ui-editor/src/extensions/hashtag.tsx
+// src/extensions/hashtag.tsx
 import { Decoration as Decoration8, EditorView as EditorView17, MatchDecorator, ViewPlugin as ViewPlugin11, WidgetType as WidgetType4 } from "@codemirror/view";
 import { getHashColor, mx as mx3 } from "@dxos/react-ui-theme";
 var TagWidget = class extends WidgetType4 {
+  _text;
   constructor(_text) {
     super(), this._text = _text;
   }
@@ -3065,6 +3086,7 @@ var tagMatcher = new MatchDecorator({
 });
 var hashtag = () => [
   ViewPlugin11.fromClass(class {
+    tags;
     constructor(view) {
       this.tags = tagMatcher.createDeco(view);
     }
@@ -3086,7 +3108,7 @@ var hashtag = () => [
   })
 ];
 
-// packages/ui/react-ui-editor/src/extensions/json.ts
+// src/extensions/json.ts
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { linter } from "@codemirror/lint";
 import Ajv from "ajv";
@@ -3131,7 +3153,7 @@ var schemaLinter = (validate) => (view) => {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/listener.ts
+// src/extensions/listener.ts
 import { EditorView as EditorView18 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
@@ -3145,12 +3167,13 @@ var listener = ({ onFocus, onChange }) => {
   return extensions;
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
+// src/extensions/markdown/formatting.ts
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection as EditorSelection2 } from "@codemirror/state";
 import { EditorView as EditorView19, keymap as keymap9 } from "@codemirror/view";
-import { useMemo as useMemo3 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { debounceAndThrottle } from "@dxos/async";
 var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
 var Inline = /* @__PURE__ */ function(Inline2) {
   Inline2[Inline2["Strong"] = 0] = "Strong";
@@ -4238,16 +4261,21 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return useMemo3(() => EditorView19.updateListener.of((update2) => {
+  const handleUpdate = useCallback2(debounceAndThrottle((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
       });
     }
-  }), []);
+  }, 100), [
+    state
+  ]);
+  return useMemo2(() => EditorView19.updateListener.of(handleUpdate), [
+    handleUpdate
+  ]);
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/action.ts
+// src/extensions/markdown/action.ts
 var processEditorPayload = (view, { type, data }) => {
   let inlineType, listType;
   switch (type) {
@@ -4296,19 +4324,19 @@ var processEditorPayload = (view, { type, data }) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+// src/extensions/markdown/bundle.ts
 import { completionKeymap as completionKeymap2 } from "@codemirror/autocomplete";
 import { defaultKeymap as defaultKeymap2, indentWithTab as indentWithTab2 } from "@codemirror/commands";
-import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
+import { markdown, markdownLanguage as markdownLanguage3 } from "@codemirror/lang-markdown";
 import { syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { keymap as keymap10 } from "@codemirror/view";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
+// src/extensions/markdown/highlight.ts
 import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
-import { tags, styleTags, Tag } from "@lezer/highlight";
+import { Tag, styleTags, tags } from "@lezer/highlight";
 import { Table } from "@lezer/markdown";
 var markdownTags = {
   Blockquote: Tag.define(),
@@ -4484,7 +4512,7 @@ var markdownHighlightStyle = (_options = {}) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+// src/extensions/markdown/bundle.ts
 var createMarkdownExtensions = (options = {}) => {
   return [
     // Main extension.
@@ -4519,7 +4547,7 @@ var createMarkdownExtensions = (options = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/debug.ts
+// src/extensions/markdown/debug.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { StateField as StateField7 } from "@codemirror/state";
 var debugTree = (cb) => StateField7.define({
@@ -4546,14 +4574,14 @@ var convertTreeToJson = (state) => {
   return treeToJson(syntaxTree3(state).cursor());
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
+// src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder6, StateEffect as StateEffect6 } from "@codemirror/state";
-import { EditorView as EditorView23, Decoration as Decoration11, WidgetType as WidgetType7, ViewPlugin as ViewPlugin13 } from "@codemirror/view";
+import { Decoration as Decoration11, EditorView as EditorView23, ViewPlugin as ViewPlugin13, WidgetType as WidgetType7 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-editor/src/extensions/markdown/changes.ts
+// src/extensions/markdown/changes.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { Transaction as Transaction2 } from "@codemirror/state";
 import { ViewPlugin as ViewPlugin12 } from "@codemirror/view";
@@ -4697,7 +4725,7 @@ var getValidUrl = (str) => {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/image.ts
+// src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { StateField as StateField8 } from "@codemirror/state";
 import { Decoration as Decoration9, EditorView as EditorView20, WidgetType as WidgetType5 } from "@codemirror/view";
@@ -4767,6 +4795,7 @@ var preloadImage = (url) => {
   }
 };
 var ImageWidget = class extends WidgetType5 {
+  _url;
   constructor(_url) {
     super(), this._url = _url;
   }
@@ -4786,7 +4815,7 @@ var ImageWidget = class extends WidgetType5 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
+// src/extensions/markdown/styles.ts
 import { EditorView as EditorView21 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
@@ -4909,7 +4938,7 @@ var formattingStyles = EditorView21.theme({
   }
 });
 
-// packages/ui/react-ui-editor/src/extensions/markdown/table.ts
+// src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder5, StateField as StateField9 } from "@codemirror/state";
 import { Decoration as Decoration10, EditorView as EditorView22, WidgetType as WidgetType6 } from "@codemirror/view";
@@ -4975,6 +5004,7 @@ var update = (state, _options) => {
   return builder.finish();
 };
 var TableWidget = class extends WidgetType6 {
+  _table;
   constructor(_table) {
     super(), this._table = _table;
   }
@@ -5007,8 +5037,8 @@ var TableWidget = class extends WidgetType6 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
-var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
+// src/extensions/markdown/decorate.ts
+var __dxlog_file9 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
 var Unicode = {
   emDash: "\u2014",
   bullet: "\u2022",
@@ -5023,6 +5053,8 @@ var HorizontalRuleWidget = class extends WidgetType7 {
   }
 };
 var LinkButton = class extends WidgetType7 {
+  url;
+  render;
   constructor(url, render) {
     super(), this.url = url, this.render = render;
   }
@@ -5039,6 +5071,7 @@ var LinkButton = class extends WidgetType7 {
   }
 };
 var CheckboxWidget = class extends WidgetType7 {
+  _checked;
   constructor(_checked) {
     super(), this._checked = _checked;
   }
@@ -5083,6 +5116,8 @@ var CheckboxWidget = class extends WidgetType7 {
   }
 };
 var TextWidget = class extends WidgetType7 {
+  text;
+  className;
   constructor(text, className) {
     super(), this.text = text, this.className = className;
   }
@@ -5140,7 +5175,7 @@ var buildDecorations2 = (view, options, focus2) => {
   const getHeaderLevels = (node, level) => {
     invariant4(level > 0, void 0, {
       F: __dxlog_file9,
-      L: 179,
+      L: 180,
       S: void 0,
       A: [
         "level > 0",
@@ -5179,7 +5214,7 @@ var buildDecorations2 = (view, options, focus2) => {
   const getCurrentListLevel = () => {
     invariant4(listLevels.length, void 0, {
       F: __dxlog_file9,
-      L: 201,
+      L: 202,
       S: void 0,
       A: [
         "listLevels.length",
@@ -5419,6 +5454,9 @@ var forceUpdate = StateEffect6.define();
 var decorateMarkdown = (options = {}) => {
   return [
     ViewPlugin13.fromClass(class {
+      deco;
+      atomicDeco;
+      pendingUpdate;
       constructor(view) {
         ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
       }
@@ -5462,7 +5500,7 @@ var decorateMarkdown = (options = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/link.ts
+// src/extensions/markdown/link.ts
 import { syntaxTree as syntaxTree8 } from "@codemirror/language";
 import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
@@ -5504,10 +5542,10 @@ var linkTooltip = (renderTooltip) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/mention.ts
+// src/extensions/mention.ts
 import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
 import { log as log6 } from "@dxos/log";
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+var __dxlog_file10 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
 var mention = ({ debug, onSearch }) => {
   return autocompletion2({
     // TODO(burdon): Not working.
@@ -5542,23 +5580,10 @@ var mention = ({ debug, onSearch }) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/modes.ts
+// src/extensions/modes.ts
 import { keymap as keymap11 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
 import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
-import { Schema } from "effect";
-var EditorViewModes = [
-  "preview",
-  "readonly",
-  "source"
-];
-var EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
-var EditorInputModes = [
-  "default",
-  "vim",
-  "vscode"
-];
-var EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
 var editorInputMode = singleValueFacet({});
 var InputModeExtensions = {
   default: [],
@@ -5588,21 +5613,21 @@ var InputModeExtensions = {
   ]
 };
 
-// packages/ui/react-ui-editor/src/extensions/outliner/commands.ts
+// src/extensions/outliner/commands.ts
 import { indentMore } from "@codemirror/commands";
 import { getIndentUnit } from "@codemirror/language";
 import { EditorSelection as EditorSelection3 } from "@codemirror/state";
 import { keymap as keymap12 } from "@codemirror/view";
 
-// packages/ui/react-ui-editor/src/extensions/outliner/selection.ts
+// src/extensions/outliner/selection.ts
 import { Compartment, Facet as Facet3 } from "@codemirror/state";
 
-// packages/ui/react-ui-editor/src/extensions/outliner/tree.ts
+// src/extensions/outliner/tree.ts
 import { syntaxTree as syntaxTree9 } from "@codemirror/language";
 import { StateField as StateField10 } from "@codemirror/state";
 import { Facet as Facet2 } from "@codemirror/state";
 import { invariant as invariant5 } from "@dxos/invariant";
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/tree.ts";
+var __dxlog_file11 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/tree.ts";
 var itemToJSON = ({ type, index, level, lineRange, contentRange, children }) => {
   return {
     type,
@@ -5614,11 +5639,14 @@ var itemToJSON = ({ type, index, level, lineRange, contentRange, children }) =>
   };
 };
 var Tree = class {
+  type = "root";
+  index = -1;
+  level = -1;
+  node;
+  lineRange;
+  contentRange;
+  children = [];
   constructor(node) {
-    this.type = "root";
-    this.index = -1;
-    this.level = -1;
-    this.children = [];
     this.node = node;
     this.lineRange = {
       from: node.from,
@@ -5896,7 +5924,7 @@ var outlinerTree = (options = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/outliner/selection.ts
+// src/extensions/outliner/selection.ts
 var getSelection = (state) => state.selection.main;
 var selectionEquals = (a, b) => a.length === b.length && a.every((i) => b.includes(i));
 var selectionFacet = Facet3.define({
@@ -5926,7 +5954,7 @@ var selectDown = (view) => {
   return true;
 };
 
-// packages/ui/react-ui-editor/src/extensions/outliner/commands.ts
+// src/extensions/outliner/commands.ts
 var indentItemMore = (view) => {
   const pos = getSelection(view.state).from;
   const tree = view.state.facet(treeFacet);
@@ -6160,16 +6188,16 @@ var commands = () => keymap12.of([
   }
 ]);
 
-// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
+// src/extensions/outliner/outliner.ts
 import { Prec as Prec4 } from "@codemirror/state";
 import { Decoration as Decoration12, EditorView as EditorView24, ViewPlugin as ViewPlugin15 } from "@codemirror/view";
 import { mx as mx5 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-editor/src/extensions/outliner/editor.ts
+// src/extensions/outliner/editor.ts
 import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
 import { ViewPlugin as ViewPlugin14 } from "@codemirror/view";
 import { log as log7 } from "@dxos/log";
-var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/editor.ts";
+var __dxlog_file12 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/editor.ts";
 var LIST_ITEM_REGEX = /^\s*- (\[ \]|\[x\])? /;
 var initialize = () => {
   return ViewPlugin14.fromClass(class {
@@ -6354,7 +6382,7 @@ var editor = () => [
   })
 ];
 
-// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
+// src/extensions/outliner/outliner.ts
 var outliner = (options = {}) => [
   // Commands.
   Prec4.highest(commands()),
@@ -6379,8 +6407,8 @@ var outliner = (options = {}) => [
 ];
 var decorations = () => [
   ViewPlugin15.fromClass(class {
+    decorations = Decoration12.none;
     constructor(view) {
-      this.decorations = Decoration12.none;
       this.updateDecorations(view.state, view);
     }
     update(update2) {
@@ -6446,7 +6474,7 @@ var decorations = () => [
   }))
 ];
 
-// packages/ui/react-ui-editor/src/extensions/preview/preview.ts
+// src/extensions/preview/preview.ts
 import "@dxos/lit-ui/dx-ref-tag.pcss";
 import { syntaxTree as syntaxTree10 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder7, StateField as StateField11 } from "@codemirror/state";
@@ -6517,6 +6545,8 @@ var buildDecorations3 = (state, options) => {
   return builder.finish();
 };
 var PreviewInlineWidget = class extends WidgetType8 {
+  _options;
+  _link;
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -6534,6 +6564,8 @@ var PreviewInlineWidget = class extends WidgetType8 {
   }
 };
 var PreviewBlockWidget = class extends WidgetType8 {
+  _options;
+  _link;
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -6554,7 +6586,7 @@ var PreviewBlockWidget = class extends WidgetType8 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/typewriter.ts
+// src/extensions/typewriter.ts
 import { keymap as keymap13 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
@@ -6607,11 +6639,218 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
           return true;
         }
       }
-    ])
-  ];
+    ])
+  ];
+};
+
+// src/hooks/useTextEditor.ts
+var __dxlog_file13 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var instanceCount = 0;
+var useTextEditor = (props = {}, deps = []) => {
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo3(() => getProviderValue(props), deps ?? []);
+  const [instanceId] = useState2(() => `text-editor-${++instanceCount}`);
+  const [view, setView] = useState2();
+  const parentRef = useRef2(null);
+  useEffect2(() => {
+    let view2;
+    if (parentRef.current) {
+      log8("create", {
+        id,
+        instanceId,
+        doc: initialValue?.length ?? 0
+      }, {
+        F: __dxlog_file13,
+        L: 75,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      let initialSelection;
+      if (selection?.anchor && initialValue?.length) {
+        if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) {
+          initialSelection = selection;
+        }
+      } else if (moveToEndOfLine && selection === void 0) {
+        const index = initialValue?.indexOf("\n");
+        const anchor = !index || index === -1 ? 0 : index;
+        initialSelection = {
+          anchor
+        };
+      }
+      const state = EditorState3.create({
+        doc: doc ?? initialValue,
+        // selection: initialSelection,
+        extensions: [
+          id && documentId.of(id),
+          extensions,
+          // NOTE: This doesn't catch errors in keymap functions.
+          EditorView26.exceptionSink.of((err) => {
+            log8.catch(err, void 0, {
+              F: __dxlog_file13,
+              L: 97,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+          })
+        ].filter(isNotFalsy4)
+      });
+      view2 = new EditorView26({
+        parent: parentRef.current,
+        state,
+        scrollTo: scrollTo ? EditorView26.scrollIntoView(scrollTo, {
+          yMargin: 96
+        }) : void 0,
+        dispatchTransactions: debug ? debugDispatcher : void 0
+      });
+      if (moveToEndOfLine && !initialSelection) {
+        const { to } = view2.state.doc.lineAt(0);
+        if (to) {
+          view2.dispatch({
+            selection: {
+              anchor: to
+            }
+          });
+        }
+      }
+      setView(view2);
+    }
+    return () => {
+      log8("destroy", {
+        id
+      }, {
+        F: __dxlog_file13,
+        L: 134,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      view2?.destroy();
+    };
+  }, deps);
+  useEffect2(() => {
+    if (view) {
+      if (scrollTo || selection) {
+        if (selection && selection.anchor > view.state.doc.length) {
+          log8.warn("invalid selection", {
+            length: view.state.doc.length,
+            scrollTo,
+            selection
+          }, {
+            F: __dxlog_file13,
+            L: 143,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return;
+        }
+        view.dispatch(createEditorStateTransaction({
+          scrollTo,
+          selection
+        }));
+      }
+    }
+  }, [
+    view,
+    scrollTo,
+    selection
+  ]);
+  useEffect2(() => {
+    if (view && autoFocus) {
+      view.focus();
+    }
+  }, [
+    autoFocus,
+    view
+  ]);
+  const focusableGroupAttrs = useFocusableGroup({
+    tabBehavior: "limited",
+    ignoreDefaultKeydown: {
+      Escape: view?.state.facet(editorInputMode).noTabster
+    }
+  });
+  const handleKeyUp = useCallback3((event) => {
+    const { key, target, currentTarget } = event;
+    if (target === currentTarget) {
+      switch (key) {
+        case "Enter": {
+          view?.focus();
+          break;
+        }
+      }
+    }
+  }, [
+    view
+  ]);
+  return {
+    parentRef,
+    view,
+    focusAttributes: {
+      tabIndex: 0,
+      ...focusableGroupAttrs,
+      onKeyUp: handleKeyUp
+    }
+  };
+};
+
+// src/components/Editor/Editor.tsx
+var Editor = /* @__PURE__ */ forwardRef(({ classNames, id, text, ...props }, forwardedRef) => {
+  var _effect = _useSignals();
+  try {
+    const { themeMode } = useThemeContext();
+    const { parentRef, focusAttributes, view } = useTextEditor(() => ({
+      id,
+      initialValue: text.content,
+      ...props
+    }), [
+      id,
+      text,
+      themeMode
+    ]);
+    useImperativeHandle(forwardedRef, () => view, [
+      view
+    ]);
+    return /* @__PURE__ */ React3.createElement("div", {
+      ref: parentRef,
+      className: mx6(classNames),
+      ...focusAttributes
+    });
+  } finally {
+    _effect.f();
+  }
+});
+
+// src/components/EditorToolbar/EditorToolbar.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import { Rx } from "@effect-rx/rx-react";
+import React4, { memo, useMemo as useMemo5 } from "react";
+import { rxFromSignal } from "@dxos/app-graph";
+import { ElevationProvider } from "@dxos/react-ui";
+import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
+
+// src/components/EditorToolbar/util.ts
+import { useMemo as useMemo4 } from "react";
+import { live } from "@dxos/live-object";
+import { createMenuAction, createMenuItemGroup } from "@dxos/react-ui-menu";
+var useEditorToolbarState = (initialState = {}) => {
+  return useMemo4(() => live(initialState), []);
+};
+var createEditorAction = (id, invoke, properties) => {
+  const { label = [
+    `${id} label`,
+    {
+      ns: translationKey
+    }
+  ], ...rest } = properties;
+  return createMenuAction(id, invoke, {
+    label,
+    ...rest
+  });
 };
+var createEditorActionGroup = (id, props, icon) => createMenuItemGroup(id, {
+  icon,
+  iconOnly: true,
+  ...props
+});
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/blocks.ts
+// src/components/EditorToolbar/blocks.ts
 var createBlockGroupAction = (value) => createEditorActionGroup("block", {
   variant: "toggleGroup",
   selectCardinality: "single",
@@ -6669,7 +6908,7 @@ var createBlocks = (state, getView) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/formatting.ts
+// src/components/EditorToolbar/formatting.ts
 var formats = {
   strong: "ph--text-b--regular",
   emphasis: "ph--text-italic--regular",
@@ -6721,7 +6960,7 @@ var createFormatting = (state, getView) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/headings.ts
+// src/components/EditorToolbar/headings.ts
 var createHeadingGroupAction = (value) => createEditorActionGroup("heading", {
   variant: "dropdownMenu",
   applyActive: true,
@@ -6776,7 +7015,7 @@ var createHeadings = (state, getView) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/image.ts
+// src/components/EditorToolbar/image.ts
 var createImageUploadAction = (onImageUpload) => createEditorAction("image", onImageUpload, {
   testId: "editor.toolbar.image",
   icon: "ph--image-square--regular"
@@ -6793,7 +7032,7 @@ var createImageUpload = (onImageUpload) => ({
   ]
 });
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/lists.ts
+// src/components/EditorToolbar/lists.ts
 var listStyles = {
   bullet: "ph--list-bullets--regular",
   ordered: "ph--list-numbers--regular",
@@ -6844,7 +7083,7 @@ var createLists = (state, getView) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/search.ts
+// src/components/EditorToolbar/search.ts
 import { openSearchPanel } from "@codemirror/search";
 var createSearchAction = (getView) => createEditorAction("search", () => openSearchPanel(getView()), {
   testId: "editor.toolbar.search",
@@ -6862,7 +7101,7 @@ var createSearch = (getView) => ({
   ]
 });
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/view-mode.ts
+// src/components/EditorToolbar/view-mode.ts
 var createViewModeGroupAction = (value) => createEditorActionGroup("viewMode", {
   variant: "dropdownMenu",
   applyActive: true,
@@ -6908,7 +7147,7 @@ var createViewMode = (state, onViewModeChange) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
+// src/components/EditorToolbar/EditorToolbar.tsx
 var createToolbar = ({ getView, state, customActions, ...features }) => {
   return Rx.make((get2) => {
     const nodes = [];
@@ -6963,7 +7202,7 @@ var createToolbar = ({ getView, state, customActions, ...features }) => {
   });
 };
 var useEditorToolbarActionGraph = (props) => {
-  const menuCreator = useMemo4(() => createToolbar({
+  const menuCreator = useMemo5(() => createToolbar({
     getView: props.getView,
     state: props.state,
     customActions: props.customActions,
@@ -6989,15 +7228,15 @@ var useEditorToolbarActionGraph = (props) => {
   return useMenuActions(menuCreator);
 };
 var EditorToolbar = /* @__PURE__ */ memo(({ classNames, attendableId, role, ...props }) => {
-  var _effect = _useSignals();
+  var _effect = _useSignals2();
   try {
     const menuProps = useEditorToolbarActionGraph(props);
-    return /* @__PURE__ */ React3.createElement(ElevationProvider, {
+    return /* @__PURE__ */ React4.createElement(ElevationProvider, {
       elevation: role === "section" ? "positioned" : "base"
-    }, /* @__PURE__ */ React3.createElement(MenuProvider, {
+    }, /* @__PURE__ */ React4.createElement(MenuProvider, {
       ...menuProps,
       attendableId
-    }, /* @__PURE__ */ React3.createElement(ToolbarMenu, {
+    }, /* @__PURE__ */ React4.createElement(ToolbarMenu, {
       classNames,
       textBlockWidth: true
     })));
@@ -7006,16 +7245,16 @@ var EditorToolbar = /* @__PURE__ */ memo(({ classNames, attendableId, role, ...p
   }
 });
 
-// packages/ui/react-ui-editor/src/components/Popover/CommandMenu.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React4, { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
-import { Icon as Icon2, Popover, toLocalizedString, useThemeContext, useTranslation } from "@dxos/react-ui";
+// src/components/Popover/CommandMenu.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React5, { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { Icon as Icon2, Popover, toLocalizedString, useThemeContext as useThemeContext2, useTranslation } from "@dxos/react-ui";
 var CommandMenu = ({ groups, currentItem, onSelect }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals3();
   try {
-    const { tx } = useThemeContext();
+    const { tx } = useThemeContext2();
     const groupsWithItems = groups.filter((group) => group.items.length > 0);
-    return /* @__PURE__ */ React4.createElement(Popover.Portal, null, /* @__PURE__ */ React4.createElement(Popover.Content, {
+    return /* @__PURE__ */ React5.createElement(Popover.Portal, null, /* @__PURE__ */ React5.createElement(Popover.Content, {
       align: "start",
       onOpenAutoFocus: (event) => event.preventDefault(),
       classNames: tx("menu.content", "menu--exotic-unfocusable", {
@@ -7023,15 +7262,15 @@ var CommandMenu = ({ groups, currentItem, onSelect }) => {
       }, [
         "max-h-[300px] overflow-y-auto"
       ])
-    }, /* @__PURE__ */ React4.createElement(Popover.Viewport, {
+    }, /* @__PURE__ */ React5.createElement(Popover.Viewport, {
       classNames: tx("menu.viewport", "menu__viewport--exotic-unfocusable", {})
-    }, /* @__PURE__ */ React4.createElement("ul", null, groupsWithItems.map((group, index) => /* @__PURE__ */ React4.createElement(React4.Fragment, {
+    }, /* @__PURE__ */ React5.createElement("ul", null, groupsWithItems.map((group, index) => /* @__PURE__ */ React5.createElement(React5.Fragment, {
       key: group.id
-    }, /* @__PURE__ */ React4.createElement(CommandGroup, {
+    }, /* @__PURE__ */ React5.createElement(CommandGroup, {
       group,
       currentItem,
       onSelect
-    }), index < groupsWithItems.length - 1 && /* @__PURE__ */ React4.createElement("div", {
+    }), index < groupsWithItems.length - 1 && /* @__PURE__ */ React5.createElement("div", {
       className: tx("menu.separator", "menu__item", {})
     })))))));
   } finally {
@@ -7039,13 +7278,13 @@ var CommandMenu = ({ groups, currentItem, onSelect }) => {
   }
 };
 var CommandGroup = ({ group, currentItem, onSelect }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals3();
   try {
-    const { tx } = useThemeContext();
+    const { tx } = useThemeContext2();
     const { t } = useTranslation();
-    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, group.label && /* @__PURE__ */ React4.createElement("div", {
+    return /* @__PURE__ */ React5.createElement(React5.Fragment, null, group.label && /* @__PURE__ */ React5.createElement("div", {
       className: tx("menu.groupLabel", "menu__group__label", {})
-    }, /* @__PURE__ */ React4.createElement("span", null, toLocalizedString(group.label, t))), group.items.map((item) => /* @__PURE__ */ React4.createElement(CommandItem, {
+    }, /* @__PURE__ */ React5.createElement("span", null, toLocalizedString(group.label, t))), group.items.map((item) => /* @__PURE__ */ React5.createElement(CommandItem, {
       key: item.id,
       item,
       current: currentItem === item.id,
@@ -7056,16 +7295,16 @@ var CommandGroup = ({ group, currentItem, onSelect }) => {
   }
 };
 var CommandItem = ({ item, current, onSelect }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals3();
   try {
-    const ref = useRef2(null);
-    const { tx } = useThemeContext();
+    const ref = useRef3(null);
+    const { tx } = useThemeContext2();
     const { t } = useTranslation();
-    const handleSelect = useCallback2(() => onSelect(item), [
+    const handleSelect = useCallback4(() => onSelect(item), [
       item,
       onSelect
     ]);
-    useEffect2(() => {
+    useEffect3(() => {
       if (current && ref.current) {
         ref.current.scrollIntoView({
           behavior: "smooth",
@@ -7075,16 +7314,16 @@ var CommandItem = ({ item, current, onSelect }) => {
     }, [
       current
     ]);
-    return /* @__PURE__ */ React4.createElement("li", {
+    return /* @__PURE__ */ React5.createElement("li", {
       ref,
       className: tx("menu.item", "menu__item--exotic-unfocusable", {}, [
         current && "bg-hoverSurface"
       ]),
       onClick: handleSelect
-    }, item.icon && /* @__PURE__ */ React4.createElement(Icon2, {
+    }, item.icon && /* @__PURE__ */ React5.createElement(Icon2, {
       icon: item.icon,
       size: 5
-    }), /* @__PURE__ */ React4.createElement("span", {
+    }), /* @__PURE__ */ React5.createElement("span", {
       className: "grow truncate"
     }, toLocalizedString(item.label, t)));
   } finally {
@@ -7271,21 +7510,21 @@ var linkSlashCommands = {
   ]
 };
 
-// packages/ui/react-ui-editor/src/components/Popover/RefPopover.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+// src/components/Popover/RefPopover.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import { createContext } from "@radix-ui/react-context";
-import React5, { useRef as useRef3, useState as useState2, useEffect as useEffect3, useCallback as useCallback3, forwardRef } from "react";
+import React6, { forwardRef as forwardRef2, useCallback as useCallback5, useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
 import { addEventListener as addEventListener2 } from "@dxos/async";
 import { Popover as Popover2 } from "@dxos/react-ui";
 var customEventOptions = {
   capture: true,
   passive: false
 };
-var RefPopover = /* @__PURE__ */ forwardRef(({ children, open, onOpenChange, modal, onActivate }, ref) => {
-  var _effect = _useSignals3();
+var RefPopover = /* @__PURE__ */ forwardRef2(({ children, open, onOpenChange, modal, onActivate }, ref) => {
+  var _effect = _useSignals4();
   try {
-    const [rootRef, setRootRef] = useState2(null);
-    useEffect3(() => {
+    const [rootRef, setRootRef] = useState3(null);
+    useEffect4(() => {
       if (!rootRef || !onActivate) {
         return;
       }
@@ -7294,13 +7533,13 @@ var RefPopover = /* @__PURE__ */ forwardRef(({ children, open, onOpenChange, mod
       rootRef,
       onActivate
     ]);
-    return /* @__PURE__ */ React5.createElement(Popover2.Root, {
+    return /* @__PURE__ */ React6.createElement(Popover2.Root, {
       open,
       onOpenChange,
       modal
-    }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
+    }, /* @__PURE__ */ React6.createElement(Popover2.VirtualTrigger, {
       virtualRef: ref
-    }), /* @__PURE__ */ React5.createElement("div", {
+    }), /* @__PURE__ */ React6.createElement("div", {
       role: "none",
       className: "contents",
       ref: setRootRef
@@ -7312,12 +7551,12 @@ var RefPopover = /* @__PURE__ */ forwardRef(({ children, open, onOpenChange, mod
 var REF_POPOVER = "RefPopover";
 var [RefPopoverContextProvider, useRefPopover] = createContext(REF_POPOVER, {});
 var PreviewProvider = ({ children, onLookup }) => {
-  var _effect = _useSignals3();
+  var _effect = _useSignals4();
   try {
-    const trigger = useRef3(null);
-    const [value, setValue] = useState2({});
-    const [open, setOpen] = useState2(false);
-    const handleDxRefTagActivate = useCallback3((event) => {
+    const trigger = useRef4(null);
+    const [value, setValue] = useState3({});
+    const [open, setOpen] = useState3(false);
+    const handleDxRefTagActivate = useCallback5((event) => {
       const { refId, label, trigger: dxTrigger } = event;
       setValue((value2) => ({
         ...value2,
@@ -7340,11 +7579,11 @@ var PreviewProvider = ({ children, onLookup }) => {
     }, [
       onLookup
     ]);
-    return /* @__PURE__ */ React5.createElement(RefPopoverContextProvider, {
+    return /* @__PURE__ */ React6.createElement(RefPopoverContextProvider, {
       pending: value.pending,
       link: value.link,
       target: value.target
-    }, /* @__PURE__ */ React5.createElement(RefPopover, {
+    }, /* @__PURE__ */ React6.createElement(RefPopover, {
       ref: trigger,
       open,
       onOpenChange: setOpen,
@@ -7355,10 +7594,10 @@ var PreviewProvider = ({ children, onLookup }) => {
   }
 };
 
-// packages/ui/react-ui-editor/src/components/Popover/RefDropdownMenu.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+// src/components/Popover/RefDropdownMenu.tsx
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import { createContext as createContext2 } from "@radix-ui/react-context";
-import React6, { useRef as useRef4, useState as useState3, useEffect as useEffect4, useCallback as useCallback4 } from "react";
+import React7, { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef5, useState as useState4 } from "react";
 import { addEventListener as addEventListener3 } from "@dxos/async";
 import { DropdownMenu } from "@dxos/react-ui";
 var customEventOptions2 = {
@@ -7368,13 +7607,13 @@ var customEventOptions2 = {
 var REF_DROPDOWN_MENU = "RefDropdownMenu";
 var [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext2(REF_DROPDOWN_MENU, {});
 var RefDropdownMenuProvider = ({ children, onLookup }) => {
-  var _effect = _useSignals4();
+  var _effect = _useSignals5();
   try {
-    const trigger = useRef4(null);
-    const [value, setValue] = useState3({});
-    const [rootRef, setRootRef] = useState3(null);
-    const [open, setOpen] = useState3(false);
-    const handleDxRefTagActivate = useCallback4((event) => {
+    const trigger = useRef5(null);
+    const [value, setValue] = useState4({});
+    const [rootRef, setRootRef] = useState4(null);
+    const [open, setOpen] = useState4(false);
+    const handleDxRefTagActivate = useCallback6((event) => {
       const { refId, label, trigger: dxTrigger } = event;
       setValue((value2) => ({
         ...value2,
@@ -7397,7 +7636,7 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
     }, [
       onLookup
     ]);
-    useEffect4(() => {
+    useEffect5(() => {
       if (!rootRef) {
         return;
       }
@@ -7405,16 +7644,16 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
     }, [
       rootRef
     ]);
-    return /* @__PURE__ */ React6.createElement(RefDropdownMenuContextProvider, {
+    return /* @__PURE__ */ React7.createElement(RefDropdownMenuContextProvider, {
       pending: value.pending,
       link: value.link,
       target: value.target
-    }, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
+    }, /* @__PURE__ */ React7.createElement(DropdownMenu.Root, {
       open,
       onOpenChange: setOpen
-    }, /* @__PURE__ */ React6.createElement(DropdownMenu.VirtualTrigger, {
+    }, /* @__PURE__ */ React7.createElement(DropdownMenu.VirtualTrigger, {
       virtualRef: trigger
-    }), /* @__PURE__ */ React6.createElement("div", {
+    }), /* @__PURE__ */ React7.createElement("div", {
       role: "none",
       className: "contents",
       ref: setRootRef
@@ -7426,162 +7665,10 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
 var RefDropdownMenu = {
   Provider: RefDropdownMenuProvider
 };
-
-// packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
-import { EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView26 } from "@codemirror/view";
-import { useFocusableGroup } from "@fluentui/react-tabster";
-import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef5, useState as useState4 } from "react";
-import { log as log8 } from "@dxos/log";
-import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
-var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
-var instanceCount = 0;
-var useTextEditor = (props = {}, deps = []) => {
-  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo5(() => getProviderValue(props), deps ?? []);
-  const [instanceId] = useState4(() => `text-editor-${++instanceCount}`);
-  const [view, setView] = useState4();
-  const parentRef = useRef5(null);
-  useEffect5(() => {
-    let view2;
-    if (parentRef.current) {
-      log8("create", {
-        id,
-        instanceId,
-        doc: initialValue?.length ?? 0
-      }, {
-        F: __dxlog_file13,
-        L: 75,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      let initialSelection;
-      if (selection?.anchor && initialValue?.length) {
-        if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) {
-          initialSelection = selection;
-        }
-      } else if (moveToEndOfLine && selection === void 0) {
-        const index = initialValue?.indexOf("\n");
-        const anchor = !index || index === -1 ? 0 : index;
-        initialSelection = {
-          anchor
-        };
-      }
-      const state = EditorState3.create({
-        doc: doc ?? initialValue,
-        // selection: initialSelection,
-        extensions: [
-          id && documentId.of(id),
-          extensions,
-          // NOTE: This doesn't catch errors in keymap functions.
-          EditorView26.exceptionSink.of((err) => {
-            log8.catch(err, void 0, {
-              F: __dxlog_file13,
-              L: 97,
-              S: void 0,
-              C: (f, a) => f(...a)
-            });
-          })
-        ].filter(isNotFalsy4)
-      });
-      view2 = new EditorView26({
-        parent: parentRef.current,
-        state,
-        scrollTo: scrollTo ? EditorView26.scrollIntoView(scrollTo, {
-          yMargin: 96
-        }) : void 0,
-        dispatchTransactions: debug ? debugDispatcher : void 0
-      });
-      if (moveToEndOfLine && !initialSelection) {
-        const { to } = view2.state.doc.lineAt(0);
-        if (to) {
-          view2.dispatch({
-            selection: {
-              anchor: to
-            }
-          });
-        }
-      }
-      setView(view2);
-    }
-    return () => {
-      log8("destroy", {
-        id
-      }, {
-        F: __dxlog_file13,
-        L: 134,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      view2?.destroy();
-    };
-  }, deps);
-  useEffect5(() => {
-    if (view) {
-      if (scrollTo || selection) {
-        if (selection && selection.anchor > view.state.doc.length) {
-          log8.warn("invalid selection", {
-            length: view.state.doc.length,
-            scrollTo,
-            selection
-          }, {
-            F: __dxlog_file13,
-            L: 143,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
-          return;
-        }
-        view.dispatch(createEditorStateTransaction({
-          scrollTo,
-          selection
-        }));
-      }
-    }
-  }, [
-    view,
-    scrollTo,
-    selection
-  ]);
-  useEffect5(() => {
-    if (view && autoFocus) {
-      view.focus();
-    }
-  }, [
-    autoFocus,
-    view
-  ]);
-  const focusableGroupAttrs = useFocusableGroup({
-    tabBehavior: "limited",
-    ignoreDefaultKeydown: {
-      Escape: view?.state.facet(editorInputMode).noTabster
-    }
-  });
-  const handleKeyUp = useCallback5((event) => {
-    const { key, target, currentTarget } = event;
-    if (target === currentTarget) {
-      switch (key) {
-        case "Enter": {
-          view?.focus();
-          break;
-        }
-      }
-    }
-  }, [
-    view
-  ]);
-  return {
-    parentRef,
-    view,
-    focusAttributes: {
-      tabIndex: 0,
-      ...focusableGroupAttrs,
-      onKeyUp: handleKeyUp
-    }
-  };
-};
 export {
   CommandMenu,
   Cursor,
+  Editor,
   EditorInputMode,
   EditorInputModes,
   EditorState4 as EditorState,
@@ -7642,6 +7729,7 @@ export {
   debugTree,
   decorateMarkdown,
   defaultOptions,
+  defaultThemeSlots,
   deleteItem,
   documentId,
   dropFile,
@@ -7659,6 +7747,7 @@ export {
   folding,
   formattingEquals,
   formattingKeymap,
+  fullWidth,
   getFormatting,
   getItem,
   getLinkRef,
@@ -7666,6 +7755,7 @@ export {
   getNextItem,
   getPreviousItem,
   getRange,
+  grow,
   hashtag,
   image,
   indentItemLess,
@@ -7723,7 +7813,7 @@ export {
   toggleStrong,
   toggleStyle,
   toggleTask,
-  translations_default as translations,
+  translations,
   traverse,
   treeFacet,
   typeahead,