@dxos/react-ui-editor 0.8.3-main.672df60 → 0.8.3-main.7f5a14c

package/dist/lib/node/index.cjs

@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var node_exports = {};
 __export(node_exports, {
+  CommandMenu: () => CommandMenu,
   Cursor: () => Cursor,
   EditorInputMode: () => EditorInputMode,
   EditorInputModes: () => EditorInputModes,
@@ -39,6 +40,7 @@ __export(node_exports, {
   Inline: () => Inline,
   InputModeExtensions: () => InputModeExtensions,
   List: () => List,
+  PreviewProvider: () => PreviewProvider,
   RefDropdownMenu: () => RefDropdownMenu,
   RefPopover: () => RefPopover,
   RemoteSelectionsDecorator: () => RemoteSelectionsDecorator,
@@ -62,11 +64,14 @@ __export(node_exports, {
   closeEffect: () => closeEffect,
   command: () => command,
   commandKeyBindings: () => commandKeyBindings,
+  commandMenu: () => commandMenu,
+  commandRangeEffect: () => commandRangeEffect,
   commands: () => commands,
   commentClickedEffect: () => commentClickedEffect,
   comments: () => comments,
   commentsState: () => commentsState,
   convertTreeToJson: () => convertTreeToJson,
+  coreSlashCommands: () => coreSlashCommands,
   createBasicExtensions: () => createBasicExtensions,
   createComment: () => createComment,
   createDataExtensions: () => createDataExtensions,
@@ -94,6 +99,7 @@ __export(node_exports, {
   editorSlots: () => editorSlots,
   editorWidth: () => editorWidth,
   editorWithToolbarLayout: () => editorWithToolbarLayout,
+  filterItems: () => filterItems,
   flattenRect: () => flattenRect,
   floatingMenu: () => floatingMenu,
   focus: () => focus,
@@ -102,15 +108,21 @@ __export(node_exports, {
   formattingEquals: () => formattingEquals,
   formattingKeymap: () => formattingKeymap,
   getFormatting: () => getFormatting,
+  getItem: () => getItem,
   getListItemContent: () => getListItemContent,
+  getNextItem: () => getNextItem,
+  getPreviousItem: () => getPreviousItem,
   getRange: () => getRange,
   hashtag: () => hashtag,
   image: () => image,
   indentItemLess: () => indentItemLess,
   indentItemMore: () => indentItemMore,
+  insertAtCursor: () => insertAtCursor,
+  insertAtLineStart: () => insertAtLineStart,
   insertTable: () => insertTable,
   itemToJSON: () => itemToJSON,
   keymap: () => import_view.keymap,
+  linkSlashCommands: () => linkSlashCommands,
   linkTooltip: () => linkTooltip,
   listItemToString: () => listItemToString,
   listener: () => listener,
@@ -122,6 +134,7 @@ __export(node_exports, {
   mention: () => mention,
   moveItemDown: () => moveItemDown,
   moveItemUp: () => moveItemUp,
+  multilinePlaceholder: () => multilinePlaceholder,
   openCommand: () => openCommand,
   openEffect: () => openEffect,
   outliner: () => outliner,
@@ -164,6 +177,7 @@ __export(node_exports, {
   treeFacet: () => treeFacet,
   typeahead: () => typeahead,
   typewriter: () => typewriter,
+  useCommandMenu: () => useCommandMenu,
   useComments: () => useComments,
   useEditorToolbarState: () => useEditorToolbarState,
   useFormattingState: () => useFormattingState,
@@ -224,133 +238,139 @@ var import_view7 = require("@codemirror/view");
 var import_view8 = require("@codemirror/view");
 var import_state10 = require("@codemirror/state");
 var import_view9 = require("@codemirror/view");
+var import_state11 = require("@codemirror/state");
 var import_view10 = require("@codemirror/view");
+var import_react4 = require("react");
 var import_async3 = require("@dxos/async");
-var import_state11 = require("@codemirror/state");
 var import_view11 = require("@codemirror/view");
-var import_commands = require("@codemirror/commands");
 var import_state12 = require("@codemirror/state");
 var import_view12 = require("@codemirror/view");
+var import_commands = require("@codemirror/commands");
+var import_state13 = require("@codemirror/state");
+var import_view13 = require("@codemirror/view");
 var import_lodash2 = __toESM(require("lodash.sortby"));
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_async4 = require("@dxos/async");
 var import_log4 = require("@dxos/log");
 var import_util = require("@dxos/util");
-var import_state13 = require("@codemirror/state");
-var import_view13 = require("@codemirror/view");
+var import_state14 = require("@codemirror/state");
+var import_view14 = require("@codemirror/view");
 var import_async5 = require("@dxos/async");
 var import_invariant3 = require("@dxos/invariant");
 var import_util2 = require("@dxos/util");
 var import_language = require("@codemirror/language");
-var import_state14 = require("@codemirror/state");
-var import_view14 = require("@codemirror/view");
+var import_state15 = require("@codemirror/state");
+var import_view15 = require("@codemirror/view");
 var import_autocomplete2 = require("@codemirror/autocomplete");
 var import_commands2 = require("@codemirror/commands");
 var import_language2 = require("@codemirror/language");
 var import_search = require("@codemirror/search");
-var import_state15 = require("@codemirror/state");
+var import_state16 = require("@codemirror/state");
 var import_theme_one_dark = require("@codemirror/theme-one-dark");
-var import_view15 = require("@codemirror/view");
+var import_view16 = require("@codemirror/view");
 var import_lodash3 = __toESM(require("lodash.defaultsdeep"));
 var import_lodash4 = __toESM(require("lodash.merge"));
 var import_display_name = require("@dxos/display-name");
 var import_log5 = require("@dxos/log");
 var import_util3 = require("@dxos/util");
-var import_state16 = require("@codemirror/state");
-var import_view16 = require("@codemirror/view");
+var import_state17 = require("@codemirror/state");
+var import_view17 = require("@codemirror/view");
+var import_view18 = require("@codemirror/view");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
 var import_react_ui_theme4 = require("@dxos/react-ui-theme");
+var import_react_ui_theme5 = require("@dxos/react-ui-theme");
 var import_util4 = require("@dxos/util");
 var import_language3 = require("@codemirror/language");
-var import_view17 = require("@codemirror/view");
-var import_react5 = __toESM(require("react"));
+var import_view19 = require("@codemirror/view");
+var import_react6 = __toESM(require("react"));
 var import_react_ui3 = require("@dxos/react-ui");
-var import_view18 = require("@codemirror/view");
-var import_react_ui_theme5 = require("@dxos/react-ui-theme");
+var import_view20 = require("@codemirror/view");
+var import_react_ui_theme6 = require("@dxos/react-ui-theme");
 var import_lang_json = require("@codemirror/lang-json");
 var import_lint = require("@codemirror/lint");
 var import_ajv = __toESM(require("ajv"));
-var import_view19 = require("@codemirror/view");
+var import_view21 = require("@codemirror/view");
 var import_autocomplete3 = require("@codemirror/autocomplete");
 var import_language4 = require("@codemirror/language");
-var import_state17 = require("@codemirror/state");
-var import_view20 = require("@codemirror/view");
-var import_react6 = require("react");
+var import_state18 = require("@codemirror/state");
+var import_view22 = require("@codemirror/view");
+var import_react7 = require("react");
 var import_autocomplete4 = require("@codemirror/autocomplete");
 var import_commands3 = require("@codemirror/commands");
 var import_lang_markdown2 = require("@codemirror/lang-markdown");
 var import_language5 = require("@codemirror/language");
 var import_language_data = require("@codemirror/language-data");
 var import_lint2 = require("@codemirror/lint");
-var import_view21 = require("@codemirror/view");
+var import_view23 = require("@codemirror/view");
 var import_util5 = require("@dxos/util");
 var import_lang_markdown3 = require("@codemirror/lang-markdown");
 var import_language6 = require("@codemirror/language");
 var import_highlight2 = require("@lezer/highlight");
 var import_markdown = require("@lezer/markdown");
 var import_language7 = require("@codemirror/language");
-var import_state18 = require("@codemirror/state");
-var import_language8 = require("@codemirror/language");
 var import_state19 = require("@codemirror/state");
-var import_view22 = require("@codemirror/view");
+var import_language8 = require("@codemirror/language");
+var import_state20 = require("@codemirror/state");
+var import_view24 = require("@codemirror/view");
 var import_invariant4 = require("@dxos/invariant");
-var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_react_ui_theme7 = require("@dxos/react-ui-theme");
 var import_language9 = require("@codemirror/language");
-var import_state20 = require("@codemirror/state");
-var import_view23 = require("@codemirror/view");
-var import_language10 = require("@codemirror/language");
 var import_state21 = require("@codemirror/state");
-var import_view24 = require("@codemirror/view");
 var import_view25 = require("@codemirror/view");
-var import_language11 = require("@codemirror/language");
+var import_language10 = require("@codemirror/language");
 var import_state22 = require("@codemirror/state");
 var import_view26 = require("@codemirror/view");
-var import_language12 = require("@codemirror/language");
 var import_view27 = require("@codemirror/view");
-var import_react_ui_theme7 = require("@dxos/react-ui-theme");
+var import_language11 = require("@codemirror/language");
+var import_state23 = require("@codemirror/state");
+var import_view28 = require("@codemirror/view");
+var import_language12 = require("@codemirror/language");
+var import_view29 = require("@codemirror/view");
+var import_react_ui_theme8 = require("@dxos/react-ui-theme");
 var import_autocomplete5 = require("@codemirror/autocomplete");
 var import_log6 = require("@dxos/log");
-var import_view28 = require("@codemirror/view");
+var import_view30 = require("@codemirror/view");
 var import_codemirror_vim = require("@replit/codemirror-vim");
 var import_codemirror_vscode_keymap = require("@replit/codemirror-vscode-keymap");
 var import_effect = require("effect");
 var import_commands4 = require("@codemirror/commands");
 var import_language13 = require("@codemirror/language");
-var import_state23 = require("@codemirror/state");
-var import_view29 = require("@codemirror/view");
 var import_state24 = require("@codemirror/state");
-var import_language14 = require("@codemirror/language");
+var import_view31 = require("@codemirror/view");
 var import_state25 = require("@codemirror/state");
+var import_language14 = require("@codemirror/language");
 var import_state26 = require("@codemirror/state");
-var import_invariant5 = require("@dxos/invariant");
 var import_state27 = require("@codemirror/state");
-var import_view30 = require("@codemirror/view");
-var import_react_ui_theme8 = require("@dxos/react-ui-theme");
+var import_invariant5 = require("@dxos/invariant");
 var import_state28 = require("@codemirror/state");
-var import_view31 = require("@codemirror/view");
+var import_view32 = require("@codemirror/view");
+var import_react_ui_theme9 = require("@dxos/react-ui-theme");
+var import_state29 = require("@codemirror/state");
+var import_view33 = require("@codemirror/view");
 var import_log7 = require("@dxos/log");
 var import_dx_ref_tag = require("@dxos/lit-ui/dx-ref-tag.pcss");
 var import_language15 = require("@codemirror/language");
-var import_state29 = require("@codemirror/state");
-var import_view32 = require("@codemirror/view");
-var import_view33 = require("@codemirror/view");
-var import_search2 = require("@codemirror/search");
+var import_state30 = require("@codemirror/state");
 var import_view34 = require("@codemirror/view");
-var import_react_ui_theme9 = require("@dxos/react-ui-theme");
+var import_view35 = require("@codemirror/view");
+var import_search2 = require("@codemirror/search");
 var import_tracking2 = require("@preact-signals/safe-react/tracking");
-var import_react_context = require("@radix-ui/react-context");
-var import_react7 = __toESM(require("react"));
-var import_async6 = require("@dxos/async");
+var import_react8 = __toESM(require("react"));
 var import_react_ui4 = require("@dxos/react-ui");
 var import_tracking3 = require("@preact-signals/safe-react/tracking");
+var import_react_context = require("@radix-ui/react-context");
+var import_react9 = __toESM(require("react"));
+var import_async6 = require("@dxos/async");
+var import_react_ui5 = require("@dxos/react-ui");
+var import_tracking4 = require("@preact-signals/safe-react/tracking");
 var import_react_context2 = require("@radix-ui/react-context");
-var import_react8 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_async7 = require("@dxos/async");
-var import_react_ui5 = require("@dxos/react-ui");
-var import_state30 = require("@codemirror/state");
-var import_view35 = require("@codemirror/view");
+var import_react_ui6 = require("@dxos/react-ui");
+var import_state31 = require("@codemirror/state");
+var import_view36 = require("@codemirror/view");
 var import_react_tabster = require("@fluentui/react-tabster");
-var import_react9 = require("react");
+var import_react11 = require("react");
 var import_log8 = require("@dxos/log");
 var import_util6 = require("@dxos/util");
 var translationKey = "react-ui-editor";
@@ -1705,6 +1725,69 @@ var command = (options = {}) => {
     })
   ];
 };
+var Placeholder = class extends import_view11.WidgetType {
+  constructor(content) {
+    super(), this.content = content;
+  }
+  toDOM(view) {
+    const wrap = document.createElement("span");
+    wrap.className = "cm-placeholder";
+    wrap.style.pointerEvents = "none";
+    wrap.appendChild(typeof this.content === "string" ? document.createTextNode(this.content) : typeof this.content === "function" ? this.content(view) : this.content.cloneNode(true));
+    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;
+  }
+};
+function multilinePlaceholder(content) {
+  const plugin = import_view11.ViewPlugin.fromClass(class {
+    constructor(view) {
+      this.view = view;
+    }
+    get decorations() {
+      const activeLine = this.view.state.doc.lineAt(this.view.state.selection.main.head);
+      const isEmpty = activeLine.text.trim() === "";
+      if (!isEmpty || !content) {
+        return import_view11.Decoration.none;
+      }
+      const lineStart = activeLine.from;
+      return import_view11.Decoration.set([
+        import_view11.Decoration.widget({
+          widget: new Placeholder(content),
+          side: 1
+        }).range(lineStart)
+      ]);
+    }
+  }, {
+    decorations: (v) => v.decorations
+  });
+  return typeof content === "string" ? [
+    plugin,
+    import_view11.EditorView.contentAttributes.of({
+      "aria-placeholder": content
+    })
+  ] : plugin;
+}
 var floatingMenu = (options = {}) => [
   import_view10.ViewPlugin.fromClass(class {
     constructor(view) {
@@ -1781,9 +1864,6 @@ var floatingMenu = (options = {}) => [
     "[data-has-focus] & .cm-ref-tag": {
       opacity: "1"
     },
-    "[data-is-attention-source] & .cm-ref-tag": {
-      opacity: "1"
-    },
     ".cm-ref-tag button": {
       display: "grid",
       alignItems: "center",
@@ -1793,6 +1873,255 @@ var floatingMenu = (options = {}) => [
     }
   })
 ];
+var commandRangeEffect = import_state11.StateEffect.define();
+var commandMenuState = import_state11.StateField.define({
+  create: () => null,
+  update: (value, tr) => {
+    let newValue = value;
+    for (const effect of tr.effects) {
+      if (effect.is(commandRangeEffect)) {
+        newValue = effect.value;
+      }
+    }
+    return newValue;
+  }
+});
+var commandMenu = (options) => {
+  const commandMenuPlugin = import_view10.ViewPlugin.fromClass(class {
+    constructor(view) {
+      this.view = view;
+      this.decorations = import_view10.Decoration.none;
+    }
+    // TODO(wittjosiah): The decorations are repainted on every update, this occasionally causes menu to flicker.
+    update(update2) {
+      const builder = new import_state11.RangeSetBuilder();
+      const selection = update2.view.state.selection.main;
+      const { range: activeRange, trigger } = update2.view.state.field(commandMenuState) ?? {};
+      const shouldShowWidget = activeRange && selection.head >= activeRange.from && selection.head <= activeRange.to;
+      if (shouldShowWidget) {
+        builder.add(activeRange.from, activeRange.to, import_view10.Decoration.mark({
+          tagName: "dx-ref-tag",
+          class: "cm-ref-tag",
+          attributes: {
+            "data-auto-trigger": "true",
+            "data-trigger": trigger
+          }
+        }));
+      }
+      const activeRangeChanged = update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(commandRangeEffect)));
+      if (activeRange && activeRangeChanged && trigger) {
+        const content = update2.view.state.sliceDoc(activeRange.from + 1, activeRange.to);
+        options.onTextChange?.(trigger, content);
+      }
+      this.decorations = builder.finish();
+    }
+  }, {
+    decorations: (v) => v.decorations
+  });
+  const triggers = Array.isArray(options.trigger) ? options.trigger : [
+    options.trigger
+  ];
+  const commandKeymap = import_view10.keymap.of([
+    ...triggers.map((trigger) => ({
+      key: trigger,
+      run: (view) => {
+        const selection = view.state.selection.main;
+        const line = view.state.doc.lineAt(selection.head);
+        const shouldTrigger = line.text.trim() === "" || selection.head === line.from || selection.head > line.from && line.text[selection.head - line.from - 1] === " ";
+        if (shouldTrigger) {
+          view.dispatch({
+            changes: {
+              from: selection.head,
+              insert: trigger
+            },
+            selection: {
+              anchor: selection.head + 1,
+              head: selection.head + 1
+            },
+            effects: commandRangeEffect.of({
+              trigger,
+              range: {
+                from: selection.head,
+                to: selection.head + 1
+              }
+            })
+          });
+          return true;
+        }
+        return false;
+      }
+    })),
+    {
+      key: "Enter",
+      run: (view) => {
+        const activeRange = view.state.field(commandMenuState)?.range;
+        if (activeRange) {
+          view.dispatch({
+            changes: {
+              from: activeRange.from,
+              to: activeRange.to,
+              insert: ""
+            }
+          });
+          options.onEnter?.();
+          return true;
+        }
+        return false;
+      }
+    },
+    {
+      key: "ArrowDown",
+      run: (view) => {
+        const activeRange = view.state.field(commandMenuState)?.range;
+        if (activeRange) {
+          options.onArrowDown?.();
+          return true;
+        }
+        return false;
+      }
+    },
+    {
+      key: "ArrowUp",
+      run: (view) => {
+        const activeRange = view.state.field(commandMenuState)?.range;
+        if (activeRange) {
+          options.onArrowUp?.();
+          return true;
+        }
+        return false;
+      }
+    }
+  ]);
+  const updateListener = import_view10.EditorView.updateListener.of((update2) => {
+    const { trigger, range: activeRange } = update2.view.state.field(commandMenuState) ?? {};
+    if (!activeRange || !trigger) {
+      return;
+    }
+    const selection = update2.view.state.selection.main;
+    const firstChar = update2.view.state.doc.sliceString(activeRange.from, activeRange.from + 1);
+    const shouldRemove = firstChar !== trigger || // Trigger deleted.
+    selection.head < activeRange.from || // Cursor moved before the range.
+    selection.head > activeRange.to + 1;
+    const nextRange = shouldRemove ? null : update2.docChanged ? {
+      from: activeRange.from,
+      to: selection.head
+    } : activeRange;
+    if (nextRange !== activeRange) {
+      update2.view.dispatch({
+        effects: commandRangeEffect.of(nextRange ? {
+          trigger,
+          range: nextRange
+        } : null)
+      });
+    }
+    if (shouldRemove) {
+      options.onDeactivate?.();
+    }
+  });
+  return [
+    multilinePlaceholder(options.placeholder ?? `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`),
+    import_state11.Prec.highest(commandKeymap),
+    updateListener,
+    commandMenuState,
+    commandMenuPlugin
+  ];
+};
+var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder2, getGroups }) => {
+  const triggerRef = (0, import_react4.useRef)(null);
+  const currentRef = (0, import_react4.useRef)(null);
+  const groupsRef = (0, import_react4.useRef)([]);
+  const [currentItem, setCurrentItem] = (0, import_react4.useState)();
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [_, update2] = (0, import_react4.useState)({});
+  const handleOpenChange = (0, import_react4.useCallback)(async (open2, trigger2) => {
+    if (open2 && trigger2) {
+      groupsRef.current = await getGroups(trigger2);
+    }
+    setOpen(open2);
+    if (!open2) {
+      triggerRef.current = null;
+      setCurrentItem(void 0);
+      viewRef.current?.dispatch({
+        effects: [
+          commandRangeEffect.of(null)
+        ]
+      });
+    }
+  }, [
+    getGroups
+  ]);
+  const handleActivate = (0, import_react4.useCallback)(async (event) => {
+    const item = getItem(groupsRef.current, currentItem);
+    if (item) {
+      currentRef.current = item;
+    }
+    triggerRef.current = event.trigger;
+    const triggerKey = event.trigger.getAttribute("data-trigger");
+    if (!open && triggerKey) {
+      await handleOpenChange(true, triggerKey);
+    }
+  }, [
+    open,
+    handleOpenChange
+  ]);
+  const handleSelect = (0, import_react4.useCallback)((item) => {
+    const view = viewRef.current;
+    if (!view) {
+      return;
+    }
+    const selection = view.state.selection.main;
+    void item.onSelect?.(view, selection.head);
+  }, []);
+  const serializedTrigger = Array.isArray(trigger) ? trigger.join(",") : trigger;
+  const _commandMenu = (0, import_react4.useMemo)(() => commandMenu({
+    trigger,
+    placeholder: placeholder2,
+    onArrowDown: () => {
+      setCurrentItem((currentItem2) => {
+        const next = getNextItem(groupsRef.current, currentItem2);
+        currentRef.current = next;
+        return next.id;
+      });
+    },
+    onArrowUp: () => {
+      setCurrentItem((currentItem2) => {
+        const previous = getPreviousItem(groupsRef.current, currentItem2);
+        currentRef.current = previous;
+        return previous.id;
+      });
+    },
+    onDeactivate: () => handleOpenChange(false),
+    onEnter: () => {
+      if (currentRef.current) {
+        handleSelect(currentRef.current);
+      }
+    },
+    onTextChange: async (trigger2, text) => {
+      groupsRef.current = await getGroups(trigger2, text);
+      const firstItem = groupsRef.current.filter((group) => group.items.length > 0)[0]?.items[0];
+      if (firstItem) {
+        setCurrentItem(firstItem.id);
+        currentRef.current = firstItem;
+      }
+      update2({});
+    }
+  }), [
+    handleOpenChange,
+    getGroups,
+    serializedTrigger,
+    placeholder2
+  ]);
+  return {
+    commandMenu: _commandMenu,
+    currentItem,
+    groupsRef,
+    ref: triggerRef,
+    open,
+    onActivate: handleActivate,
+    onOpenChange: setOpen,
+    onSelect: handleSelect
+  };
+};
 var typeahead = ({ onComplete } = {}) => {
   let hint;
   const complete = (view) => {
@@ -1808,17 +2137,17 @@ var typeahead = ({ onComplete } = {}) => {
           insert: hint
         }
       ],
-      selection: import_state11.EditorSelection.cursor(selection.from + hint.length)
+      selection: import_state12.EditorSelection.cursor(selection.from + hint.length)
     });
     return true;
   };
   return [
-    import_view11.ViewPlugin.fromClass(class {
+    import_view12.ViewPlugin.fromClass(class {
       constructor() {
-        this.decorations = import_view11.Decoration.none;
+        this.decorations = import_view12.Decoration.none;
       }
       update(update2) {
-        const builder = new import_state11.RangeSetBuilder();
+        const builder = new import_state12.RangeSetBuilder();
         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) {
@@ -1827,7 +2156,7 @@ var typeahead = ({ onComplete } = {}) => {
             line: str
           });
           if (hint) {
-            builder.add(selection.from, selection.to, import_view11.Decoration.widget({
+            builder.add(selection.from, selection.to, import_view12.Decoration.widget({
               widget: new Hint(hint)
             }));
           }
@@ -1838,7 +2167,7 @@ var typeahead = ({ onComplete } = {}) => {
       decorations: (v) => v.decorations
     }),
     // Keys.
-    import_state11.Prec.highest(import_view11.keymap.of([
+    import_state12.Prec.highest(import_view12.keymap.of([
       {
         key: "Tab",
         preventDefault: true,
@@ -1879,10 +2208,10 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? import_view13.EditorView.scrollIntoView(scrollTo, {
+    effects: scrollTo ? import_view14.EditorView.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
-    annotations: import_state13.Transaction.userEvent.of(stateRestoreAnnotation)
+    annotations: import_state14.Transaction.userEvent.of(stateRestoreAnnotation)
   };
 };
 var createEditorStateStore = (keyPrefix) => ({
@@ -1921,7 +2250,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    import_view13.EditorView.updateListener.of(({ view, transactions }) => {
+    import_view14.EditorView.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -1944,7 +2273,7 @@ var selectionState = ({ getState, setState } = {}) => {
         }
       }
     }),
-    getState && import_view13.keymap.of([
+    getState && import_view14.keymap.of([
       {
         key: "ctrl-r",
         run: (view) => {
@@ -1959,10 +2288,10 @@ var selectionState = ({ getState, setState } = {}) => {
   ].filter(import_util2.isNotFalsy);
 };
 var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
-var setComments = import_state12.StateEffect.define();
-var setSelection = import_state12.StateEffect.define();
-var setCommentState = import_state12.StateEffect.define();
-var commentsState = import_state12.StateField.define({
+var setComments = import_state13.StateEffect.define();
+var setSelection = import_state13.StateEffect.define();
+var setCommentState = import_state13.StateEffect.define();
+var commentsState = import_state13.StateField.define({
   create: (state) => ({
     id: state.facet(documentId),
     comments: [],
@@ -2000,7 +2329,7 @@ var commentsState = import_state12.StateField.define({
     return value;
   }
 });
-var styles2 = import_view12.EditorView.theme({
+var styles2 = import_view13.EditorView.theme({
   ".cm-comment, .cm-comment-current": {
     margin: "0 -3px",
     padding: "3px",
@@ -2013,14 +2342,14 @@ var styles2 = import_view12.EditorView.theme({
     textDecoration: "underline"
   }
 });
-var createCommentMark = (id, isCurrent) => import_view12.Decoration.mark({
+var createCommentMark = (id, isCurrent) => import_view13.Decoration.mark({
   class: isCurrent ? "cm-comment-current" : "cm-comment",
   attributes: {
     "data-testid": "cm-comment",
     "data-comment-id": id
   }
 });
-var commentsDecorations = import_view12.EditorView.decorations.compute([
+var commentsDecorations = import_view13.EditorView.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -2040,10 +2369,10 @@ var commentsDecorations = import_view12.EditorView.decorations.compute([
     const mark = createCommentMark(comment.comment.id, comment.comment.id === current);
     return mark.range(range.from, range.to);
   }).filter(import_util.isNonNullable);
-  return import_view12.Decoration.set(decorations2);
+  return import_view13.Decoration.set(decorations2);
 });
-var commentClickedEffect = import_state12.StateEffect.define();
-var handleCommentClick = import_view12.EditorView.domEventHandlers({
+var commentClickedEffect = import_state13.StateEffect.define();
+var handleCommentClick = import_view13.EditorView.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -2082,7 +2411,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    import_view12.EditorView.domEventHandlers({
+    import_view13.EditorView.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -2104,7 +2433,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    import_view12.EditorView.updateListener.of((update2) => {
+    import_view13.EditorView.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -2160,7 +2489,7 @@ var mapTrackedComment = (comment, changes) => ({
   from: changes.mapPos(comment.from, 1),
   to: changes.mapPos(comment.to, 1)
 });
-var restoreCommentEffect = import_state12.StateEffect.define({
+var restoreCommentEffect = import_state13.StateEffect.define({
   map: mapTrackedComment
 });
 var createComment = (view) => {
@@ -2205,7 +2534,7 @@ var comments = (options = {}) => {
     //
     // Keymap.
     //
-    options.onCreate && import_view12.keymap.of([
+    options.onCreate && import_view13.keymap.of([
       {
         key: shortcut,
         run: callbackWrapper(createComment)
@@ -2215,7 +2544,7 @@ var comments = (options = {}) => {
     // Hover tooltip (for key shortcut hints, etc.)
     // TODO(burdon): Factor out to generic hints extension for current selection/line.
     //
-    options.renderTooltip && (0, import_view12.hoverTooltip)((view, pos) => {
+    options.renderTooltip && (0, import_view13.hoverTooltip)((view, pos) => {
       const selection = view.state.selection.main;
       if (selection && pos >= selection.from && pos <= selection.to) {
         return {
@@ -2246,7 +2575,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    import_view12.EditorView.updateListener.of(({ view, state, changes }) => {
+    import_view13.EditorView.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -2278,7 +2607,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    import_view12.EditorView.updateListener.of(({ view, state }) => {
+    import_view13.EditorView.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -2332,7 +2661,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? import_view12.EditorView.scrollIntoView(range.from, center ? {
+          needsScroll ? import_view13.EditorView.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2362,13 +2691,13 @@ var ExternalCommentSync = class {
     this.unsubscribe = subscribe(updateComments);
   }
 };
-var createExternalCommentSync = (id, subscribe, getComments) => import_view12.ViewPlugin.fromClass(class {
+var createExternalCommentSync = (id, subscribe, getComments) => import_view13.ViewPlugin.fromClass(class {
   constructor(view) {
     return new ExternalCommentSync(view, id, subscribe, getComments);
   }
 });
 var useComments = (view, id, comments2) => {
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (view) {
       if (id === view.state.facet(documentId)) {
         view.dispatch({
@@ -2385,12 +2714,12 @@ var debugNodeLogger = (log9 = console.log) => {
   const logTokens = (state) => (0, import_language.syntaxTree)(state).iterate({
     enter: (node) => log9(node.type)
   });
-  return import_state14.StateField.define({
+  return import_state15.StateField.define({
     create: (state) => logTokens(state),
     update: (_, tr) => logTokens(tr.state)
   });
 };
-var styles3 = import_view14.EditorView.theme({
+var styles3 = import_view15.EditorView.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--dx-accentText)",
     color: "var(--dx-accentText)",
@@ -2403,8 +2732,8 @@ var styles3 = import_view14.EditorView.theme({
 var dropFile = (options = {}) => {
   return [
     styles3,
-    (0, import_view14.dropCursor)(),
-    import_view14.EditorView.domEventHandlers({
+    (0, import_view15.dropCursor)(),
+    import_view15.EditorView.domEventHandlers({
       drop: (event, view) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
@@ -2423,8 +2752,8 @@ var dropFile = (options = {}) => {
     })
   ];
 };
-var focusEffect = import_state16.StateEffect.define();
-var focusField = import_state16.StateField.define({
+var focusEffect = import_state17.StateEffect.define();
+var focusField = import_state17.StateField.define({
   create: () => false,
   update: (value, tr) => {
     for (const effect of tr.effects) {
@@ -2437,7 +2766,7 @@ var focusField = import_state16.StateField.define({
 });
 var focus = [
   focusField,
-  import_view16.EditorView.domEventHandlers({
+  import_view17.EditorView.domEventHandlers({
     focus: (event, view) => {
       setTimeout(() => view.dispatch({
         effects: focusEffect.of(true)
@@ -2463,11 +2792,11 @@ var theme = {
   codeMark: "font-mono text-primary-500",
   mark: "opacity-50",
   heading: (level) => {
-    return (0, import_react_ui_theme3.mx)(headings[level], "dark:text-primary-400");
+    return (0, import_react_ui_theme4.mx)(headings[level], "dark:text-primary-400");
   }
 };
 var getToken = (path, defaultValue) => {
-  const value = (0, import_util4.get)(import_react_ui_theme4.tokens, path, defaultValue);
+  const value = (0, import_util4.get)(import_react_ui_theme5.tokens, path, defaultValue);
   return value?.toString() ?? "";
 };
 var fontBody = getToken("fontFamily.body");
@@ -2682,8 +3011,31 @@ var defaultTheme = {
     borderTop: "1px solid var(--dx-separator)"
   }
 };
+var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
+var editorSlots = {
+  scroll: {
+    className: "pbs-2"
+  },
+  content: {
+    className: editorWidth
+  }
+};
+var editorGutter = import_view18.EditorView.theme({
+  ".cm-gutters": {
+    background: "var(--dx-baseSurface)",
+    paddingRight: "1rem"
+  }
+});
+var editorMonospace = import_view18.EditorView.theme({
+  ".cm-content": {
+    fontFamily: fontMono
+  }
+});
+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) => (0, import_react_ui_theme3.mx)("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");
+var stackItemContentToolbarClassNames = (role) => (0, import_react_ui_theme3.mx)("relative z-[1] flex is-full bg-toolbarSurface border-be border-subduedSeparator", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
 var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
-var preventNewline = import_state15.EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
+var preventNewline = import_state16.EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
 var defaultBasicOptions = {
   allowMultipleSelections: true,
   bracketMatching: true,
@@ -2705,33 +3057,37 @@ var createBasicExtensions = (_props) => {
   const props = (0, import_lodash3.default)({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    import_view15.EditorView.exceptionSink.of((err) => {
+    import_view16.EditorView.exceptionSink.of((err) => {
       import_log5.log.catch(err, void 0, {
         F: __dxlog_file8,
-        L: 98,
+        L: 100,
         S: void 0,
         C: (f, a) => f(...a)
       });
     }),
-    props.allowMultipleSelections && import_state15.EditorState.allowMultipleSelections.of(true),
+    props.allowMultipleSelections && import_state16.EditorState.allowMultipleSelections.of(true),
     props.bracketMatching && (0, import_language2.bracketMatching)(),
     props.closeBrackets && (0, import_autocomplete2.closeBrackets)(),
-    props.dropCursor && (0, import_view15.dropCursor)(),
-    props.drawSelection && (0, import_view15.drawSelection)({
+    props.dropCursor && (0, import_view16.dropCursor)(),
+    props.drawSelection && (0, import_view16.drawSelection)({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && import_view15.EditorView.editable.of(props.editable),
+    props.editable !== void 0 && import_view16.EditorView.editable.of(props.editable),
     props.focus && focus,
-    props.highlightActiveLine && (0, import_view15.highlightActiveLine)(),
+    props.highlightActiveLine && (0, import_view16.highlightActiveLine)(),
     props.history && (0, import_commands2.history)(),
-    props.lineNumbers && (0, import_view15.lineNumbers)(),
-    props.lineWrapping && import_view15.EditorView.lineWrapping,
-    props.placeholder && (0, import_view15.placeholder)(props.placeholder),
-    props.readOnly !== void 0 && import_state15.EditorState.readOnly.of(props.readOnly),
-    props.scrollPastEnd && (0, import_view15.scrollPastEnd)(),
-    props.tabSize && import_state15.EditorState.tabSize.of(props.tabSize),
+    props.lineNumbers && [
+      (0, import_view16.lineNumbers)(),
+      editorGutter
+    ],
+    props.lineWrapping && import_view16.EditorView.lineWrapping,
+    props.monospace && editorMonospace,
+    props.placeholder && (0, import_view16.placeholder)(props.placeholder),
+    props.readOnly !== void 0 && import_state16.EditorState.readOnly.of(props.readOnly),
+    props.scrollPastEnd && (0, import_view16.scrollPastEnd)(),
+    props.tabSize && import_state16.EditorState.tabSize.of(props.tabSize),
     // https://codemirror.net/docs/ref/#view.KeyBinding
-    import_view15.keymap.of([
+    import_view16.keymap.of([
       ...(props.keymap && keymaps[props.keymap]) ?? [],
       // NOTE: Tabs are also configured by markdown extension.
       // https://codemirror.net/docs/ref/#commands.indentWithTab
@@ -2762,17 +3118,17 @@ var defaultThemeSlots = {
 var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
   const slots = (0, import_lodash3.default)({}, _slots, defaultThemeSlots);
   return [
-    import_view15.EditorView.darkTheme.of(themeMode === "dark"),
-    import_view15.EditorView.baseTheme(styles4 ? (0, import_lodash4.default)({}, defaultTheme, styles4) : defaultTheme),
+    import_view16.EditorView.darkTheme.of(themeMode === "dark"),
+    import_view16.EditorView.baseTheme(styles4 ? (0, import_lodash4.default)({}, defaultTheme, styles4) : defaultTheme),
     // https://github.com/codemirror/theme-one-dark
     _syntaxHighlighting && (themeMode === "dark" ? (0, import_language2.syntaxHighlighting)(import_theme_one_dark.oneDarkHighlightStyle) : (0, import_language2.syntaxHighlighting)(import_language2.defaultHighlightStyle)),
-    slots.editor?.className && import_view15.EditorView.editorAttributes.of({
+    slots.editor?.className && import_view16.EditorView.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && import_view15.EditorView.contentAttributes.of({
+    slots.content?.className && import_view16.EditorView.contentAttributes.of({
       class: slots.content.className
     }),
-    slots.scroll?.className && import_view15.ViewPlugin.fromClass(class {
+    slots.scroll?.className && import_view16.ViewPlugin.fromClass(class {
       constructor(view) {
         view.scrollDOM.classList.add(slots.scroll.className);
       }
@@ -2811,7 +3167,7 @@ var folding = (_props = {}) => [
       const el = createElement("div", {
         className: "flex h-full items-center"
       });
-      return renderRoot(el, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Icon, {
+      return renderRoot(el, /* @__PURE__ */ import_react6.default.createElement(import_react_ui3.Icon, {
         icon: "ph--caret-right--bold",
         size: 3,
         classNames: [
@@ -2821,7 +3177,7 @@ var folding = (_props = {}) => [
       }));
     }
   }),
-  import_view17.EditorView.theme({
+  import_view19.EditorView.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
       transition: "opacity 0.3s",
@@ -2832,25 +3188,25 @@ var folding = (_props = {}) => [
     }
   })
 ];
-var TagWidget = class extends import_view18.WidgetType {
+var TagWidget = class extends import_view20.WidgetType {
   constructor(_text) {
     super(), this._text = _text;
   }
   toDOM() {
     const span = document.createElement("span");
-    span.className = (0, import_react_ui_theme5.mx)("cm-tag", (0, import_react_ui_theme5.getHashColor)(this._text).tag);
+    span.className = (0, import_react_ui_theme6.mx)("cm-tag", (0, import_react_ui_theme6.getHashColor)(this._text).tag);
     span.textContent = this._text;
     return span;
   }
 };
-var tagMatcher = new import_view18.MatchDecorator({
+var tagMatcher = new import_view20.MatchDecorator({
   regexp: /#(\w+)\W/g,
-  decoration: (match) => import_view18.Decoration.replace({
+  decoration: (match) => import_view20.Decoration.replace({
     widget: new TagWidget(match[1])
   })
 });
 var hashtag = () => [
-  import_view18.ViewPlugin.fromClass(class {
+  import_view20.ViewPlugin.fromClass(class {
     constructor(view) {
       this.tags = tagMatcher.createDeco(view);
     }
@@ -2859,11 +3215,11 @@ var hashtag = () => [
     }
   }, {
     decorations: (instance) => instance.tags,
-    provide: (plugin) => import_view18.EditorView.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.tags || import_view18.Decoration.none;
+    provide: (plugin) => import_view20.EditorView.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.tags || import_view20.Decoration.none;
     })
   }),
-  import_view18.EditorView.theme({
+  import_view20.EditorView.theme({
     ".cm-tag": {
       borderRadius: "4px",
       marginRight: "6px",
@@ -2913,11 +3269,11 @@ var schemaLinter = (validate) => (view) => {
 };
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(import_view19.EditorView.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(import_view21.EditorView.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(import_view19.EditorView.updateListener.of((update2) => {
+  onChange && extensions.push(import_view21.EditorView.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -3040,7 +3396,7 @@ var setStyle = (type, enable) => {
                   to: range.head + found + marker.length
                 }
               ],
-              range: import_state17.EditorSelection.cursor(range.from - marker.length)
+              range: import_state18.EditorSelection.cursor(range.from - marker.length)
             };
           }
         }
@@ -3168,13 +3524,13 @@ var setStyle = (type, enable) => {
             from: range.head,
             insert: marker + marker
           },
-          range: import_state17.EditorSelection.cursor(range.head + marker.length)
+          range: import_state18.EditorSelection.cursor(range.head + marker.length)
         };
       }
       const changeSet = state.changes(changes2.concat(changesAtEnd));
       return {
         changes: changeSet,
-        range: range.empty && !changeSet.empty ? import_state17.EditorSelection.cursor(range.head + marker.length) : import_state17.EditorSelection.range(changeSet.mapPos(range.from, 1), changeSet.mapPos(range.to, -1))
+        range: range.empty && !changeSet.empty ? import_state18.EditorSelection.cursor(range.head + marker.length) : import_state18.EditorSelection.range(changeSet.mapPos(range.from, 1), changeSet.mapPos(range.to, -1))
       };
     });
     dispatch(state.update(changes, {
@@ -3374,7 +3730,7 @@ var addLink = ({ url, image: image2 } = {}) => {
       const changeSet = state.changes(changes2.concat(changesAfter));
       return {
         changes: changeSet,
-        range: import_state17.EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0))
+        range: import_state18.EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0))
       };
     });
     if (changes.changes.empty) {
@@ -3808,7 +4164,7 @@ var toggleCodeblock = (target) => {
 };
 var formattingKeymap = (_options = {}) => {
   return [
-    import_view20.keymap.of([
+    import_view22.keymap.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -4009,7 +4365,7 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return (0, import_react6.useMemo)(() => import_view20.EditorView.updateListener.of((update2) => {
+  return (0, import_react7.useMemo)(() => import_view22.EditorView.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
@@ -4261,7 +4617,7 @@ var createMarkdownExtensions = (options = {}) => {
     }),
     // Custom styles.
     (0, import_language5.syntaxHighlighting)(markdownHighlightStyle()),
-    import_view21.keymap.of([
+    import_view23.keymap.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       options.indentWithTab !== false && import_commands3.indentWithTab,
       // https://codemirror.net/docs/ref/#commands.defaultKeymap
@@ -4271,7 +4627,7 @@ var createMarkdownExtensions = (options = {}) => {
     ].filter(import_util5.isNotFalsy))
   ];
 };
-var debugTree = (cb) => import_state18.StateField.define({
+var debugTree = (cb) => import_state19.StateField.define({
   create: (state) => cb(convertTreeToJson(state)),
   update: (value, tr) => cb(convertTreeToJson(tr.state))
 });
@@ -4295,12 +4651,12 @@ var convertTreeToJson = (state) => {
   return treeToJson((0, import_language7.syntaxTree)(state).cursor());
 };
 var adjustChanges = () => {
-  return import_view23.ViewPlugin.fromClass(class {
+  return import_view25.ViewPlugin.fromClass(class {
     update(update2) {
       const tree = (0, import_language9.syntaxTree)(update2.state);
       const adjustments = [];
       for (const tr of update2.transactions) {
-        const event = tr.annotation(import_state20.Transaction.userEvent);
+        const event = tr.annotation(import_state21.Transaction.userEvent);
         switch (event) {
           //
           // Enter
@@ -4435,9 +4791,9 @@ var getValidUrl = (str) => {
 };
 var image = (_options = {}) => {
   return [
-    import_state21.StateField.define({
+    import_state22.StateField.define({
       create: (state) => {
-        return import_view24.Decoration.set(buildDecorations(0, state.doc.length, state));
+        return import_view26.Decoration.set(buildDecorations(0, state.doc.length, state));
       },
       update: (value, tr) => {
         if (!tr.docChanged && !tr.selection) {
@@ -4460,7 +4816,7 @@ var image = (_options = {}) => {
           add: buildDecorations(from, to, tr.state)
         });
       },
-      provide: (field) => import_view24.EditorView.decorations.from(field)
+      provide: (field) => import_view26.EditorView.decorations.from(field)
     })
   ];
 };
@@ -4478,7 +4834,7 @@ var buildDecorations = (from, to, state) => {
             return;
           }
           preloadImage(url);
-          decorations2.push(import_view24.Decoration.replace({
+          decorations2.push(import_view26.Decoration.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -4498,7 +4854,7 @@ var preloadImage = (url) => {
     preloaded.add(url);
   }
 };
-var ImageWidget = class extends import_view24.WidgetType {
+var ImageWidget = class extends import_view26.WidgetType {
   constructor(_url) {
     super(), this._url = _url;
   }
@@ -4519,7 +4875,7 @@ var ImageWidget = class extends import_view24.WidgetType {
 };
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = import_view25.EditorView.theme({
+var formattingStyles = import_view27.EditorView.theme({
   /**
   * Horizontal rule.
   */
@@ -4638,14 +4994,14 @@ var formattingStyles = import_view25.EditorView.theme({
   }
 });
 var table = (options = {}) => {
-  return import_state22.StateField.define({
+  return import_state23.StateField.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => import_view26.EditorView.decorations.from(field)
+    provide: (field) => import_view28.EditorView.decorations.from(field)
   });
 };
 var update = (state, _options) => {
-  const builder = new import_state22.RangeSetBuilder();
+  const builder = new import_state23.RangeSetBuilder();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -4686,19 +5042,19 @@ var update = (state, _options) => {
   tables.forEach((table2) => {
     const replace = state.readOnly || cursor < table2.from || cursor > table2.to;
     if (replace) {
-      builder.add(table2.from, table2.to, import_view26.Decoration.replace({
+      builder.add(table2.from, table2.to, import_view28.Decoration.replace({
         block: true,
         widget: new TableWidget(table2)
       }));
     } else {
-      builder.add(table2.from, table2.to, import_view26.Decoration.mark({
+      builder.add(table2.from, table2.to, import_view28.Decoration.mark({
         class: "cm-table"
       }));
     }
   });
   return builder.finish();
 };
-var TableWidget = class extends import_view26.WidgetType {
+var TableWidget = class extends import_view28.WidgetType {
   constructor(_table) {
     super(), this._table = _table;
   }
@@ -4737,14 +5093,14 @@ var Unicode = {
   bulletSmall: "\u2219",
   bulletSquare: "\u2B1D"
 };
-var HorizontalRuleWidget = class extends import_view22.WidgetType {
+var HorizontalRuleWidget = class extends import_view24.WidgetType {
   toDOM() {
     const el = document.createElement("span");
     el.className = "cm-hr";
     return el;
   }
 };
-var LinkButton = class extends import_view22.WidgetType {
+var LinkButton = class extends import_view24.WidgetType {
   constructor(url, render) {
     super(), this.url = url, this.render = render;
   }
@@ -4760,7 +5116,7 @@ var LinkButton = class extends import_view22.WidgetType {
     return el;
   }
 };
-var CheckboxWidget = class extends import_view22.WidgetType {
+var CheckboxWidget = class extends import_view24.WidgetType {
   constructor(_checked) {
     super(), this._checked = _checked;
   }
@@ -4804,7 +5160,7 @@ var CheckboxWidget = class extends import_view22.WidgetType {
     return false;
   }
 };
-var TextWidget = class extends import_view22.WidgetType {
+var TextWidget = class extends import_view24.WidgetType {
   constructor(text, className) {
     super(), this.text = text, this.className = className;
   }
@@ -4817,29 +5173,29 @@ var TextWidget = class extends import_view22.WidgetType {
     return el;
   }
 };
-var hide = import_view22.Decoration.replace({});
-var blockQuote = import_view22.Decoration.line({
+var hide = import_view24.Decoration.replace({});
+var blockQuote = import_view24.Decoration.line({
   class: "cm-blockquote"
 });
-var fencedCodeLine = import_view22.Decoration.line({
+var fencedCodeLine = import_view24.Decoration.line({
   class: "cm-code cm-codeblock-line"
 });
-var fencedCodeLineFirst = import_view22.Decoration.line({
-  class: (0, import_react_ui_theme6.mx)("cm-code cm-codeblock-line", "cm-codeblock-start")
+var fencedCodeLineFirst = import_view24.Decoration.line({
+  class: (0, import_react_ui_theme7.mx)("cm-code cm-codeblock-line", "cm-codeblock-start")
 });
-var fencedCodeLineLast = import_view22.Decoration.line({
-  class: (0, import_react_ui_theme6.mx)("cm-code cm-codeblock-line", "cm-codeblock-end")
+var fencedCodeLineLast = import_view24.Decoration.line({
+  class: (0, import_react_ui_theme7.mx)("cm-code cm-codeblock-line", "cm-codeblock-end")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
 var commentBlockLineLast = fencedCodeLineLast;
-var horizontalRule = import_view22.Decoration.replace({
+var horizontalRule = import_view24.Decoration.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = import_view22.Decoration.replace({
+var checkedTask = import_view24.Decoration.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = import_view22.Decoration.replace({
+var uncheckedTask = import_view24.Decoration.replace({
   widget: new CheckboxWidget(false)
 });
 var editingRange = (state, range, focus2) => {
@@ -4855,8 +5211,8 @@ var autoHideTags = /* @__PURE__ */ new Set([
   "SuperscriptMark"
 ]);
 var buildDecorations2 = (view, options, focus2) => {
-  const deco = new import_state19.RangeSetBuilder();
-  const atomicDeco = new import_state19.RangeSetBuilder();
+  const deco = new import_state20.RangeSetBuilder();
+  const atomicDeco = new import_state20.RangeSetBuilder();
   const { state } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
@@ -4943,7 +5299,7 @@ var buildDecorations2 = (view, options, focus2) => {
           } else {
             const num = headers.slice(from - 1).map((level2) => level2?.number ?? 0).join(".") + " ";
             if (num.length) {
-              atomicDeco.add(mark.from, mark.from + len, import_view22.Decoration.replace({
+              atomicDeco.add(mark.from, mark.from + len, import_view24.Decoration.replace({
                 widget: new TextWidget(num, theme.heading(level))
               }));
             }
@@ -4968,7 +5324,7 @@ var buildDecorations2 = (view, options, focus2) => {
         if (node.from === line.to - 1) {
           return false;
         }
-        deco.add(line.from, line.from, import_view22.Decoration.line({
+        deco.add(line.from, line.from, import_view24.Decoration.line({
           class: "cm-list-item",
           attributes: {
             style: `padding-left: ${offset}px; text-indent: -${width}px;`
@@ -4985,7 +5341,7 @@ var buildDecorations2 = (view, options, focus2) => {
         const label = list.type === "OrderedList" ? `${++list.number}.` : Unicode.bulletSmall;
         const line = state.doc.lineAt(node.from);
         const to = state.doc.sliceString(node.to, node.to + 1) === " " ? node.to + 1 : node.to;
-        atomicDeco.add(line.from, to, import_view22.Decoration.replace({
+        atomicDeco.add(line.from, to, import_view24.Decoration.replace({
           widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
         }));
         break;
@@ -5072,7 +5428,7 @@ var buildDecorations2 = (view, options, focus2) => {
           if (!editing) {
             atomicDeco.add(node.from, marks[0].to, hide);
           }
-          deco.add(marks[0].to, marks[1].from, import_view22.Decoration.mark({
+          deco.add(marks[0].to, marks[1].from, import_view24.Decoration.mark({
             tagName: "a",
             attributes: {
               class: "cm-link",
@@ -5082,7 +5438,7 @@ var buildDecorations2 = (view, options, focus2) => {
             }
           }));
           if (!editing) {
-            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? import_view22.Decoration.replace({
+            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? import_view24.Decoration.replace({
               widget: new LinkButton(url, options.renderLinkButton)
             }) : hide);
           }
@@ -5137,10 +5493,10 @@ var buildDecorations2 = (view, options, focus2) => {
     atomicDeco: atomicDeco.finish()
   };
 };
-var forceUpdate = import_state19.StateEffect.define();
+var forceUpdate = import_state20.StateEffect.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    import_view22.ViewPlugin.fromClass(class {
+    import_view24.ViewPlugin.fromClass(class {
       constructor(view) {
         ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
       }
@@ -5172,9 +5528,9 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        import_view22.EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view22.Decoration.none),
-        import_view22.EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view22.Decoration.none),
-        import_view22.EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? import_view22.Decoration.none)
+        import_view24.EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view24.Decoration.none),
+        import_view24.EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view24.Decoration.none),
+        import_view24.EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? import_view24.Decoration.none)
       ]
     }),
     image(),
@@ -5184,7 +5540,7 @@ var decorateMarkdown = (options = {}) => {
   ];
 };
 var linkTooltip = (renderTooltip) => {
-  return (0, import_view27.hoverTooltip)((view, pos, side) => {
+  return (0, import_view29.hoverTooltip)((view, pos, side) => {
     const syntax = (0, import_language12.syntaxTree)(view.state).resolveInner(pos, side);
     let link = null;
     for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
@@ -5202,7 +5558,7 @@ var linkTooltip = (renderTooltip) => {
       // above: true,
       create: () => {
         const el = document.createElement("div");
-        el.className = (0, import_react_ui_theme7.tooltipContent)({});
+        el.className = (0, import_react_ui_theme8.tooltipContent)({});
         renderTooltip(el, {
           url: urlText
         }, view);
@@ -5274,7 +5630,7 @@ var InputModeExtensions = {
     editorInputMode.of({
       type: "vscode"
     }),
-    import_view28.keymap.of(import_codemirror_vscode_keymap.vscodeKeymap)
+    import_view30.keymap.of(import_codemirror_vscode_keymap.vscodeKeymap)
   ],
   vim: [
     // https://github.com/replit/codemirror-vim
@@ -5283,7 +5639,7 @@ var InputModeExtensions = {
       type: "vim",
       noTabster: true
     }),
-    import_view28.keymap.of([
+    import_view30.keymap.of([
       {
         key: "Alt-Escape",
         run: (view) => {
@@ -5423,7 +5779,7 @@ var format = (value) => JSON.stringify(value, (key, value2) => {
   }
   return value2;
 }).replaceAll('"', "");
-var treeFacet = import_state26.Facet.define({
+var treeFacet = import_state27.Facet.define({
   combine: (values) => values[0]
 });
 var outlinerTree = (options = {}) => {
@@ -5572,7 +5928,7 @@ var outlinerTree = (options = {}) => {
     return tree;
   };
   return [
-    import_state25.StateField.define({
+    import_state26.StateField.define({
       create: (state) => {
         return buildTree(state);
       },
@@ -5588,10 +5944,10 @@ var outlinerTree = (options = {}) => {
 };
 var getSelection = (state) => state.selection.main;
 var selectionEquals = (a, b) => a.length === b.length && a.every((i) => b.includes(i));
-var selectionFacet = import_state24.Facet.define({
+var selectionFacet = import_state25.Facet.define({
   combine: (values) => values[0]
 });
-var selectionCompartment = new import_state24.Compartment();
+var selectionCompartment = new import_state25.Compartment();
 var selectNone = (view) => {
   view.dispatch({
     effects: selectionCompartment.reconfigure(selectionFacet.of([]))
@@ -5672,7 +6028,7 @@ var moveItemDown = (view) => {
     ];
     view.dispatch({
       changes,
-      selection: import_state23.EditorSelection.cursor(pos + nextContent.length + 1),
+      selection: import_state24.EditorSelection.cursor(pos + nextContent.length + 1),
       scrollIntoView: true
     });
   }
@@ -5700,7 +6056,7 @@ var moveItemUp = (view) => {
     ];
     view.dispatch({
       changes,
-      selection: import_state23.EditorSelection.cursor(pos - prevContent.length - 1),
+      selection: import_state24.EditorSelection.cursor(pos - prevContent.length - 1),
       scrollIntoView: true
     });
   }
@@ -5712,7 +6068,7 @@ var deleteItem = (view) => {
   const current = tree.find(pos);
   if (current) {
     view.dispatch({
-      selection: import_state23.EditorSelection.cursor(current.lineRange.from),
+      selection: import_state24.EditorSelection.cursor(current.lineRange.from),
       changes: [
         {
           from: current.lineRange.from,
@@ -5742,7 +6098,7 @@ var toggleTask = (view) => {
   }
   return true;
 };
-var commands = () => import_view29.keymap.of([
+var commands = () => import_view31.keymap.of([
   //
   // Indentation.
   //
@@ -5768,7 +6124,7 @@ var commands = () => import_view29.keymap.of([
             insert
           }
         ],
-        selection: import_state23.EditorSelection.cursor(pos + insert.length)
+        selection: import_state24.EditorSelection.cursor(pos + insert.length)
       });
       return true;
     }
@@ -5786,7 +6142,7 @@ var commands = () => import_view29.keymap.of([
         const next = tree.next(item);
         if (next) {
           view.dispatch({
-            selection: import_state23.EditorSelection.cursor(next.contentRange.from)
+            selection: import_state24.EditorSelection.cursor(next.contentRange.from)
           });
           return true;
         }
@@ -5849,7 +6205,7 @@ var commands = () => import_view29.keymap.of([
 var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/editor.ts";
 var LIST_ITEM_REGEX = /^\s*- (\[ \]|\[x\])? /;
 var initialize = () => {
-  return import_view31.ViewPlugin.fromClass(class {
+  return import_view33.ViewPlugin.fromClass(class {
     constructor(view) {
       const first = view.state.doc.lineAt(0);
       const text = view.state.sliceDoc(first.from, first.to);
@@ -5865,7 +6221,7 @@ var initialize = () => {
                 insert
               }
             ],
-            selection: import_state28.EditorSelection.cursor(insert.length)
+            selection: import_state29.EditorSelection.cursor(insert.length)
           });
         });
       }
@@ -5874,7 +6230,7 @@ var initialize = () => {
 };
 var editor = () => [
   initialize(),
-  import_state28.EditorState.transactionFilter.of((tr) => {
+  import_state29.EditorState.transactionFilter.of((tr) => {
     const tree = tr.state.facet(treeFacet);
     if (!tr.docChanged) {
       const current = getSelection(tr.state).from;
@@ -5889,20 +6245,20 @@ var editor = () => [
           if (!prevItem) {
             return [
               {
-                selection: import_state28.EditorSelection.cursor(currentItem.contentRange.from)
+                selection: import_state29.EditorSelection.cursor(currentItem.contentRange.from)
               }
             ];
           } else {
             if (currentItem.index < prevItem.index) {
               return [
                 {
-                  selection: import_state28.EditorSelection.cursor(currentItem.contentRange.to)
+                  selection: import_state29.EditorSelection.cursor(currentItem.contentRange.to)
                 }
               ];
             } else if (currentItem.index > prevItem.index) {
               return [
                 {
-                  selection: import_state28.EditorSelection.cursor(currentItem.contentRange.from)
+                  selection: import_state29.EditorSelection.cursor(currentItem.contentRange.from)
                 }
               ];
             } else {
@@ -5912,14 +6268,14 @@ var editor = () => [
                 } else {
                   return [
                     {
-                      selection: import_state28.EditorSelection.cursor(currentItem.lineRange.from - 1)
+                      selection: import_state29.EditorSelection.cursor(currentItem.lineRange.from - 1)
                     }
                   ];
                 }
               } else {
                 return [
                   {
-                    selection: import_state28.EditorSelection.cursor(currentItem.contentRange.to)
+                    selection: import_state29.EditorSelection.cursor(currentItem.contentRange.to)
                   }
                 ];
               }
@@ -6032,7 +6388,7 @@ var editor = () => [
 ];
 var outliner = (options = {}) => [
   // Commands.
-  import_state27.Prec.highest(commands()),
+  import_state28.Prec.highest(commands()),
   // Selection.
   selectionCompartment.of(selectionFacet.of([])),
   // State.
@@ -6048,14 +6404,14 @@ var outliner = (options = {}) => [
     listPaddingLeft: 8
   }),
   // Researve space for menu.
-  import_view30.EditorView.contentAttributes.of({
+  import_view32.EditorView.contentAttributes.of({
     class: "is-full !mr-[3rem]"
   })
 ];
 var decorations = () => [
-  import_view30.ViewPlugin.fromClass(class {
+  import_view32.ViewPlugin.fromClass(class {
     constructor(view) {
-      this.decorations = import_view30.Decoration.none;
+      this.decorations = import_view32.Decoration.none;
       this.updateDecorations(view.state, view);
     }
     update(update2) {
@@ -6077,18 +6433,18 @@ var decorations = () => [
           const lineFrom = doc.lineAt(item.contentRange.from);
           const lineTo = doc.lineAt(item.contentRange.to);
           const isSelected = selection.includes(item.index) || item === current;
-          decorations2.push(import_view30.Decoration.line({
-            class: (0, import_react_ui_theme8.mx)("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
+          decorations2.push(import_view32.Decoration.line({
+            class: (0, import_react_ui_theme9.mx)("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
           }).range(line.from, line.from));
         }
       }
-      this.decorations = import_view30.Decoration.set(decorations2);
+      this.decorations = import_view32.Decoration.set(decorations2);
     }
   }, {
     decorations: (v) => v.decorations
   }),
   // Theme.
-  import_view30.EditorView.theme(Object.assign({
+  import_view32.EditorView.theme(Object.assign({
     ".cm-list-item": {
       borderLeftWidth: "1px",
       borderRightWidth: "1px",
@@ -6117,9 +6473,6 @@ var decorations = () => [
     },
     "[data-has-focus] & .cm-list-item-selected": {
       borderColor: "var(--dx-separator)"
-    },
-    "[data-is-attention-source] & .cm-list-item-selected": {
-      borderColor: "var(--dx-separator)"
     }
   }))
 ];
@@ -6127,22 +6480,19 @@ var preview = (options = {}) => {
   return [
     // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
     // "Block decorations may not be specified via plugins"
-    import_state29.StateField.define({
+    import_state30.StateField.define({
       create: (state) => buildDecorations3(state, options),
       update: (_, tr) => buildDecorations3(tr.state, options),
       provide: (field) => [
-        import_view32.EditorView.decorations.from(field),
-        import_view32.EditorView.atomicRanges.of((view) => view.state.field(field))
+        import_view34.EditorView.decorations.from(field),
+        import_view34.EditorView.atomicRanges.of((view) => view.state.field(field))
       ]
     }),
-    import_view32.EditorView.theme({
+    import_view34.EditorView.theme({
       ".cm-preview-block": {
-        marginLeft: "-1rem",
-        marginRight: "-1rem",
-        padding: "1rem",
-        borderRadius: "0.5rem",
-        background: "var(--dx-modalSurface)",
-        border: "1px solid var(--dx-separator)"
+        "--dx-card-spacing-inline": "var(--dx-trimMd)",
+        "--dx-card-spacing-block": "var(--dx-trimMd)",
+        marginInline: "calc(-1*var(--dx-trimMd))"
       }
     })
   ];
@@ -6161,7 +6511,7 @@ var getLinkRef = (state, node) => {
   }
 };
 var buildDecorations3 = (state, options) => {
-  const builder = new import_state29.RangeSetBuilder();
+  const builder = new import_state30.RangeSetBuilder();
   (0, import_language15.syntaxTree)(state).iterate({
     enter: (node) => {
       switch (node.name) {
@@ -6172,7 +6522,7 @@ var buildDecorations3 = (state, options) => {
         case "Link": {
           const link = getLinkRef(state, node.node);
           if (link) {
-            builder.add(node.from, node.to, import_view32.Decoration.replace({
+            builder.add(node.from, node.to, import_view34.Decoration.replace({
               widget: new PreviewInlineWidget(options, link)
             }));
           }
@@ -6185,7 +6535,7 @@ var buildDecorations3 = (state, options) => {
         case "Image": {
           const link = getLinkRef(state, node.node);
           if (options.renderBlock && link) {
-            builder.add(node.from, node.to, import_view32.Decoration.replace({
+            builder.add(node.from, node.to, import_view34.Decoration.replace({
               block: true,
               // atomic: true,
               widget: new PreviewBlockWidget(options, link)
@@ -6198,7 +6548,7 @@ var buildDecorations3 = (state, options) => {
   });
   return builder.finish();
 };
-var PreviewInlineWidget = class extends import_view32.WidgetType {
+var PreviewInlineWidget = class extends import_view34.WidgetType {
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -6215,7 +6565,7 @@ var PreviewInlineWidget = class extends import_view32.WidgetType {
     return root;
   }
 };
-var PreviewBlockWidget = class extends import_view32.WidgetType {
+var PreviewBlockWidget = class extends import_view34.WidgetType {
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -6281,7 +6631,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    import_view33.keymap.of([
+    import_view35.keymap.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -6608,28 +6958,6 @@ var createViewMode = (state, onViewModeChange) => {
     ]
   };
 };
-var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
-var editorSlots = {
-  scroll: {
-    className: "pbs-2"
-  },
-  content: {
-    className: editorWidth
-  }
-};
-var editorGutter = import_view34.EditorView.theme({
-  ".cm-gutters": {
-    paddingRight: "1rem"
-  }
-});
-var editorMonospace = import_view34.EditorView.theme({
-  ".cm-content": {
-    fontFamily: fontMono
-  }
-});
-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) => (0, import_react_ui_theme9.mx)("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");
-var stackItemContentToolbarClassNames = (role) => (0, import_react_ui_theme9.mx)("relative z-[1] flex is-full bg-toolbarSurface border-be border-subduedSeparator", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
 var createToolbar = ({ getView, state, customActions, ...features }) => {
   return import_rx_react.Rx.make((get2) => {
     const nodes = [];
@@ -6731,20 +7059,304 @@ var EditorToolbar = /* @__PURE__ */ (0, import_react.memo)(({ classNames, attend
     _effect.f();
   }
 });
+var CommandMenu = ({ groups, currentItem, onSelect }) => {
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const { tx } = (0, import_react_ui4.useThemeContext)();
+    const groupsWithItems = groups.filter((group) => group.items.length > 0);
+    return /* @__PURE__ */ import_react8.default.createElement(import_react_ui4.Popover.Portal, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui4.Popover.Content, {
+      align: "start",
+      onOpenAutoFocus: (event) => event.preventDefault(),
+      classNames: tx("menu.content", "menu--exotic-unfocusable", {
+        elevation: "positioned"
+      }, [
+        "max-h-[300px] overflow-y-auto"
+      ])
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui4.Popover.Viewport, {
+      classNames: tx("menu.viewport", "menu__viewport--exotic-unfocusable", {})
+    }, /* @__PURE__ */ import_react8.default.createElement("ul", null, groupsWithItems.map((group, index) => /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, {
+      key: group.id
+    }, /* @__PURE__ */ import_react8.default.createElement(CommandGroup, {
+      group,
+      currentItem,
+      onSelect
+    }), index < groupsWithItems.length - 1 && /* @__PURE__ */ import_react8.default.createElement("div", {
+      className: tx("menu.separator", "menu__item", {})
+    })))))));
+  } finally {
+    _effect.f();
+  }
+};
+var CommandGroup = ({ group, currentItem, onSelect }) => {
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const { tx } = (0, import_react_ui4.useThemeContext)();
+    const { t } = (0, import_react_ui4.useTranslation)();
+    return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, group.label && /* @__PURE__ */ import_react8.default.createElement("div", {
+      className: tx("menu.groupLabel", "menu__group__label", {})
+    }, /* @__PURE__ */ import_react8.default.createElement("span", null, (0, import_react_ui4.toLocalizedString)(group.label, t))), group.items.map((item) => /* @__PURE__ */ import_react8.default.createElement(CommandItem, {
+      key: item.id,
+      item,
+      current: currentItem === item.id,
+      onSelect
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+var CommandItem = ({ item, current, onSelect }) => {
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const ref = (0, import_react8.useRef)(null);
+    const { tx } = (0, import_react_ui4.useThemeContext)();
+    const { t } = (0, import_react_ui4.useTranslation)();
+    const handleSelect = (0, import_react8.useCallback)(() => onSelect(item), [
+      item,
+      onSelect
+    ]);
+    (0, import_react8.useEffect)(() => {
+      if (current && ref.current) {
+        ref.current.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        });
+      }
+    }, [
+      current
+    ]);
+    return /* @__PURE__ */ import_react8.default.createElement("li", {
+      ref,
+      className: tx("menu.item", "menu__item--exotic-unfocusable", {}, [
+        current && "bg-hoverSurface"
+      ]),
+      onClick: handleSelect
+    }, item.icon && /* @__PURE__ */ import_react8.default.createElement(import_react_ui4.Icon, {
+      icon: item.icon,
+      size: 5
+    }), /* @__PURE__ */ import_react8.default.createElement("span", {
+      className: "grow truncate"
+    }, (0, import_react_ui4.toLocalizedString)(item.label, t)));
+  } finally {
+    _effect.f();
+  }
+};
+var getItem = (groups, id) => {
+  return groups.flatMap((group) => group.items).find((item) => item.id === id);
+};
+var getNextItem = (groups, id) => {
+  const items = groups.flatMap((group) => group.items);
+  const index = items.findIndex((item) => item.id === id);
+  return items[(index + 1) % items.length];
+};
+var getPreviousItem = (groups, id) => {
+  const items = groups.flatMap((group) => group.items);
+  const index = items.findIndex((item) => item.id === id);
+  return items[(index - 1 + items.length) % items.length];
+};
+var filterItems = (groups, filter) => {
+  return groups.map((group) => ({
+    ...group,
+    items: group.items.filter(filter)
+  }));
+};
+var insertAtCursor = (view, head, insert) => {
+  view.dispatch({
+    changes: {
+      from: head,
+      to: head,
+      insert
+    },
+    selection: {
+      anchor: head + insert.length,
+      head: head + insert.length
+    }
+  });
+};
+var insertAtLineStart = (view, head, insert) => {
+  const line = view.state.doc.lineAt(head);
+  if (line.from === head) {
+    insertAtCursor(view, head, insert);
+  } else {
+    insert = "\n" + insert;
+    view.dispatch({
+      changes: {
+        from: line.to,
+        to: line.to,
+        insert
+      },
+      selection: {
+        anchor: line.to + insert.length,
+        head: line.to + insert.length
+      }
+    });
+  }
+};
+var coreSlashCommands = {
+  id: "markdown",
+  label: "Markdown",
+  items: [
+    {
+      id: "heading-1",
+      label: "Heading 1",
+      icon: "ph--text-h-one--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "# ")
+    },
+    {
+      id: "heading-2",
+      label: "Heading 2",
+      icon: "ph--text-h-two--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "## ")
+    },
+    {
+      id: "heading-3",
+      label: "Heading 3",
+      icon: "ph--text-h-three--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "### ")
+    },
+    {
+      id: "heading-4",
+      label: "Heading 4",
+      icon: "ph--text-h-four--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "#### ")
+    },
+    {
+      id: "heading-5",
+      label: "Heading 5",
+      icon: "ph--text-h-five--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "##### ")
+    },
+    {
+      id: "heading-6",
+      label: "Heading 6",
+      icon: "ph--text-h-six--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "###### ")
+    },
+    {
+      id: "bullet-list",
+      label: "Bullet List",
+      icon: "ph--list-bullets--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "- ")
+    },
+    {
+      id: "numbered-list",
+      label: "Numbered List",
+      icon: "ph--list-numbers--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "1. ")
+    },
+    {
+      id: "task-list",
+      label: "Task List",
+      icon: "ph--list-checks--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "- [ ] ")
+    },
+    {
+      id: "quote",
+      label: "Quote",
+      icon: "ph--quotes--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "> ")
+    },
+    {
+      id: "code-block",
+      label: "Code Block",
+      icon: "ph--code-block--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "```\n\n```")
+    },
+    {
+      id: "table",
+      label: "Table",
+      icon: "ph--table--regular",
+      onSelect: (view, head) => insertAtLineStart(view, head, "| | | |\n|---|---|---|\n| | | |")
+    }
+  ]
+};
+var linkSlashCommands = {
+  id: "link",
+  label: "Link",
+  items: [
+    {
+      id: "inline-link",
+      label: "Inline link",
+      icon: "ph--link--regular",
+      onSelect: (view, head) => view.dispatch({
+        changes: {
+          from: head,
+          insert: "@"
+        },
+        selection: {
+          anchor: head + 1,
+          head: head + 1
+        },
+        effects: commandRangeEffect.of({
+          trigger: "@",
+          range: {
+            from: head,
+            to: head + 1
+          }
+        })
+      })
+    },
+    {
+      id: "block-embed",
+      label: "Block embed",
+      icon: "ph--lego--regular",
+      onSelect: (view, head) => view.dispatch({
+        changes: {
+          from: head,
+          insert: "@@"
+        },
+        selection: {
+          anchor: head + 2,
+          head: head + 2
+        },
+        effects: commandRangeEffect.of({
+          trigger: "@",
+          range: {
+            from: head,
+            to: head + 2
+          }
+        })
+      })
+    }
+  ]
+};
 var customEventOptions = {
   capture: true,
   passive: false
 };
+var RefPopover = /* @__PURE__ */ (0, import_react9.forwardRef)(({ children, open, onOpenChange, modal, onActivate }, ref) => {
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    const [rootRef, setRootRef] = (0, import_react9.useState)(null);
+    (0, import_react9.useEffect)(() => {
+      return rootRef && onActivate ? (0, import_async6.addEventListener)(rootRef, "dx-ref-tag-activate", onActivate, customEventOptions) : void 0;
+    }, [
+      rootRef,
+      onActivate
+    ]);
+    return /* @__PURE__ */ import_react9.default.createElement(import_react_ui5.Popover.Root, {
+      open,
+      onOpenChange,
+      modal
+    }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui5.Popover.VirtualTrigger, {
+      virtualRef: ref
+    }), /* @__PURE__ */ import_react9.default.createElement("div", {
+      role: "none",
+      className: "contents",
+      ref: setRootRef
+    }, children));
+  } finally {
+    _effect.f();
+  }
+});
 var REF_POPOVER = "RefPopover";
 var [RefPopoverContextProvider, useRefPopover] = (0, import_react_context.createContext)(REF_POPOVER, {});
-var RefPopoverProvider = ({ children, onLookup }) => {
-  var _effect = (0, import_tracking2.useSignals)();
+var PreviewProvider = ({ children, onLookup }) => {
+  var _effect = (0, import_tracking3.useSignals)();
   try {
-    const trigger = (0, import_react7.useRef)(null);
-    const [value, setValue] = (0, import_react7.useState)({});
-    const [rootRef, setRootRef] = (0, import_react7.useState)(null);
-    const [open, setOpen] = (0, import_react7.useState)(false);
-    const handleDxRefTagActivate = (0, import_react7.useCallback)((event) => {
+    const trigger = (0, import_react9.useRef)(null);
+    const [value, setValue] = (0, import_react9.useState)({});
+    const [open, setOpen] = (0, import_react9.useState)(false);
+    const handleDxRefTagActivate = (0, import_react9.useCallback)((event) => {
       const { refId, label, trigger: dxTrigger } = event;
       setValue((value2) => ({
         ...value2,
@@ -6767,32 +7379,20 @@ var RefPopoverProvider = ({ children, onLookup }) => {
     }, [
       onLookup
     ]);
-    (0, import_react7.useEffect)(() => {
-      return rootRef ? (0, import_async6.addEventListener)(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions) : void 0;
-    }, [
-      rootRef
-    ]);
-    return /* @__PURE__ */ import_react7.default.createElement(RefPopoverContextProvider, {
+    return /* @__PURE__ */ import_react9.default.createElement(RefPopoverContextProvider, {
       pending: value.pending,
       link: value.link,
       target: value.target
-    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Popover.Root, {
+    }, /* @__PURE__ */ import_react9.default.createElement(RefPopover, {
+      ref: trigger,
       open,
-      onOpenChange: setOpen
-    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Popover.VirtualTrigger, {
-      virtualRef: trigger
-    }), /* @__PURE__ */ import_react7.default.createElement("div", {
-      role: "none",
-      className: "contents",
-      ref: setRootRef
-    }, children)));
+      onOpenChange: setOpen,
+      onActivate: handleDxRefTagActivate
+    }, children));
   } finally {
     _effect.f();
   }
 };
-var RefPopover = {
-  Provider: RefPopoverProvider
-};
 var customEventOptions2 = {
   capture: true,
   passive: false
@@ -6800,13 +7400,13 @@ var customEventOptions2 = {
 var REF_DROPDOWN_MENU = "RefDropdownMenu";
 var [RefDropdownMenuContextProvider, useRefDropdownMenu] = (0, import_react_context2.createContext)(REF_DROPDOWN_MENU, {});
 var RefDropdownMenuProvider = ({ children, onLookup }) => {
-  var _effect = (0, import_tracking3.useSignals)();
+  var _effect = (0, import_tracking4.useSignals)();
   try {
-    const trigger = (0, import_react8.useRef)(null);
-    const [value, setValue] = (0, import_react8.useState)({});
-    const [rootRef, setRootRef] = (0, import_react8.useState)(null);
-    const [open, setOpen] = (0, import_react8.useState)(false);
-    const handleDxRefTagActivate = (0, import_react8.useCallback)((event) => {
+    const trigger = (0, import_react10.useRef)(null);
+    const [value, setValue] = (0, import_react10.useState)({});
+    const [rootRef, setRootRef] = (0, import_react10.useState)(null);
+    const [open, setOpen] = (0, import_react10.useState)(false);
+    const handleDxRefTagActivate = (0, import_react10.useCallback)((event) => {
       const { refId, label, trigger: dxTrigger } = event;
       setValue((value2) => ({
         ...value2,
@@ -6829,21 +7429,21 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
     }, [
       onLookup
     ]);
-    (0, import_react8.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       return rootRef ? (0, import_async7.addEventListener)(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2) : void 0;
     }, [
       rootRef
     ]);
-    return /* @__PURE__ */ import_react8.default.createElement(RefDropdownMenuContextProvider, {
+    return /* @__PURE__ */ import_react10.default.createElement(RefDropdownMenuContextProvider, {
       pending: value.pending,
       link: value.link,
       target: value.target
-    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.DropdownMenu.Root, {
+    }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui6.DropdownMenu.Root, {
       open,
       onOpenChange: setOpen
-    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.DropdownMenu.VirtualTrigger, {
+    }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui6.DropdownMenu.VirtualTrigger, {
       virtualRef: trigger
-    }), /* @__PURE__ */ import_react8.default.createElement("div", {
+    }), /* @__PURE__ */ import_react10.default.createElement("div", {
       role: "none",
       className: "contents",
       ref: setRootRef
@@ -6858,11 +7458,11 @@ var RefDropdownMenu = {
 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 } = (0, import_react9.useMemo)(() => (0, import_util6.getProviderValue)(props), deps ?? []);
-  const [instanceId] = (0, import_react9.useState)(() => `text-editor-${++instanceCount}`);
-  const [view, setView] = (0, import_react9.useState)();
-  const parentRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = (0, import_react11.useMemo)(() => (0, import_util6.getProviderValue)(props), deps ?? []);
+  const [instanceId] = (0, import_react11.useState)(() => `text-editor-${++instanceCount}`);
+  const [view, setView] = (0, import_react11.useState)();
+  const parentRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     let view2;
     if (parentRef.current) {
       (0, import_log8.log)("create", {
@@ -6871,7 +7471,7 @@ var useTextEditor = (props = {}, deps = []) => {
         doc: initialValue?.length ?? 0
       }, {
         F: __dxlog_file13,
-        L: 76,
+        L: 75,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -6887,27 +7487,27 @@ var useTextEditor = (props = {}, deps = []) => {
           anchor
         };
       }
-      const state = import_state30.EditorState.create({
+      const state = import_state31.EditorState.create({
         doc: doc ?? initialValue,
         // selection: initialSelection,
         extensions: [
           id && documentId.of(id),
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
-          import_view35.EditorView.exceptionSink.of((err) => {
+          import_view36.EditorView.exceptionSink.of((err) => {
             import_log8.log.catch(err, void 0, {
               F: __dxlog_file13,
-              L: 98,
+              L: 97,
               S: void 0,
               C: (f, a) => f(...a)
             });
           })
         ].filter(import_util6.isNotFalsy)
       });
-      view2 = new import_view35.EditorView({
+      view2 = new import_view36.EditorView({
         parent: parentRef.current,
         state,
-        scrollTo: scrollTo ? import_view35.EditorView.scrollIntoView(scrollTo, {
+        scrollTo: scrollTo ? import_view36.EditorView.scrollIntoView(scrollTo, {
           yMargin: 96
         }) : void 0,
         dispatchTransactions: debug ? debugDispatcher : void 0
@@ -6929,14 +7529,14 @@ var useTextEditor = (props = {}, deps = []) => {
         id
       }, {
         F: __dxlog_file13,
-        L: 135,
+        L: 134,
         S: void 0,
         C: (f, a) => f(...a)
       });
       view2?.destroy();
     };
   }, deps);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (view) {
       if (scrollTo || selection) {
         if (selection && selection.anchor > view.state.doc.length) {
@@ -6946,7 +7546,7 @@ var useTextEditor = (props = {}, deps = []) => {
             selection
           }, {
             F: __dxlog_file13,
-            L: 144,
+            L: 143,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -6963,7 +7563,7 @@ var useTextEditor = (props = {}, deps = []) => {
     scrollTo,
     selection
   ]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (view && autoFocus) {
       view.focus();
     }
@@ -6977,7 +7577,7 @@ var useTextEditor = (props = {}, deps = []) => {
       Escape: view?.state.facet(editorInputMode).noTabster
     }
   });
-  const handleKeyUp = (0, import_react9.useCallback)((event) => {
+  const handleKeyUp = (0, import_react11.useCallback)((event) => {
     const { key, target, currentTarget } = event;
     if (target === currentTarget) {
       switch (key) {
@@ -7002,6 +7602,7 @@ var useTextEditor = (props = {}, deps = []) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CommandMenu,
   Cursor,
   EditorInputMode,
   EditorInputModes,
@@ -7013,6 +7614,7 @@ var useTextEditor = (props = {}, deps = []) => {
   Inline,
   InputModeExtensions,
   List,
+  PreviewProvider,
   RefDropdownMenu,
   RefPopover,
   RemoteSelectionsDecorator,
@@ -7036,11 +7638,14 @@ var useTextEditor = (props = {}, deps = []) => {
   closeEffect,
   command,
   commandKeyBindings,
+  commandMenu,
+  commandRangeEffect,
   commands,
   commentClickedEffect,
   comments,
   commentsState,
   convertTreeToJson,
+  coreSlashCommands,
   createBasicExtensions,
   createComment,
   createDataExtensions,
@@ -7068,6 +7673,7 @@ var useTextEditor = (props = {}, deps = []) => {
   editorSlots,
   editorWidth,
   editorWithToolbarLayout,
+  filterItems,
   flattenRect,
   floatingMenu,
   focus,
@@ -7076,15 +7682,21 @@ var useTextEditor = (props = {}, deps = []) => {
   formattingEquals,
   formattingKeymap,
   getFormatting,
+  getItem,
   getListItemContent,
+  getNextItem,
+  getPreviousItem,
   getRange,
   hashtag,
   image,
   indentItemLess,
   indentItemMore,
+  insertAtCursor,
+  insertAtLineStart,
   insertTable,
   itemToJSON,
   keymap,
+  linkSlashCommands,
   linkTooltip,
   listItemToString,
   listener,
@@ -7096,6 +7708,7 @@ var useTextEditor = (props = {}, deps = []) => {
   mention,
   moveItemDown,
   moveItemUp,
+  multilinePlaceholder,
   openCommand,
   openEffect,
   outliner,
@@ -7138,6 +7751,7 @@ var useTextEditor = (props = {}, deps = []) => {
   treeFacet,
   typeahead,
   typewriter,
+  useCommandMenu,
   useComments,
   useEditorToolbarState,
   useFormattingState,