@dxos/react-ui-editor 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/dist/lib/browser/index.mjs

@@ -4,30 +4,30 @@ var translations = [
   {
     "en-US": {
       [translationKey]: {
-        "strong label": "Bold",
-        "emphasis label": "Italics",
-        "strikethrough label": "Strikethrough",
-        "code label": "Code",
-        "link label": "Link",
-        "list-bullet label": "Bullet list",
-        "list-ordered label": "Numbered list",
-        "list-task label": "Task list",
-        "blockquote label": "Block quote",
-        "codeblock label": "Code block",
-        "comment label": "Create comment",
-        "selection overlaps existing comment label": "Selection overlaps existing comment",
-        "select text to comment label": "Select text to comment",
-        "image label": "Insert image",
-        "table label": "Create table",
-        "heading label": "Heading level",
-        "heading level label_zero": "Paragraph",
-        "heading level label_one": "Heading level {{count}}",
-        "heading level label_other": "Heading level {{count}}",
-        "search label": "Search",
-        "view mode label": "Editor view",
-        "preview mode label": "Markdown",
-        "readonly mode label": "Read only",
-        "source mode label": "Plain text"
+        "comment.label": "Create comment",
+        "image.label": "Insert image",
+        "search.label": "Search",
+        "block.label": "Block",
+        "block.blockquote.label": "Block quote",
+        "block.codeblock.label": "Code block",
+        "block.table.label": "Create table",
+        "formatting.label": "Formatting",
+        "formatting.strong.label": "Bold",
+        "formatting.emphasis.label": "Italics",
+        "formatting.strikethrough.label": "Strikethrough",
+        "formatting.code.label": "Code",
+        "formatting.link.label": "Link",
+        "list.bullet.label": "Bullet list",
+        "list.ordered.label": "Numbered list",
+        "list.task.label": "Task list",
+        "heading.label": "Heading level",
+        "heading-level.label_zero": "Paragraph",
+        "heading-level.label_one": "Heading level {{count}}",
+        "heading-level.label_other": "Heading level {{count}}",
+        "view-mode.label": "Editor view",
+        "view-mode.preview.label": "Markdown",
+        "view-mode.source.label": "Plain text",
+        "view-mode.readonly.label": "Read only"
       }
     }
   }
@@ -296,7 +296,7 @@ var EditorContent = /* @__PURE__ */ forwardRef(({ classNames, id, extensions, se
   ]);
   return /* @__PURE__ */ React.createElement("div", {
     role: "none",
-    className: mx("is-full outline-none focus:border-accentSurface focus-within:border-neutralFocusIndicator", classNames),
+    className: mx("w-full outline-hidden focus:border-accent-surface focus-within:border-neutral-focus-indicator", classNames),
     ref: parentRef,
     ...focusable ? focusAttributes : {}
   });
@@ -702,7 +702,7 @@ import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import React2, { Fragment, useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
 import { addEventListener } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
-import { DX_ANCHOR_ACTIVATE, Icon, Popover, toLocalizedString, useDynamicRef, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { DX_ANCHOR_ACTIVATE, Icon, Popover, ScrollArea, toLocalizedString, useDynamicRef, useThemeContext, useTranslation } from "@dxos/react-ui";
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/components/EditorMenuProvider/EditorMenuProvider.tsx";
 var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp, defaultOpen, numItems = 8, onOpenChange, onActivate, onSelect, onCancel }) => {
   const { tx } = useThemeContext();
@@ -714,7 +714,7 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
     onChange: (open2) => {
       invariant(viewRef.current, void 0, {
         F: __dxlog_file2,
-        L: 65,
+        L: 64,
         S: void 0,
         A: [
           "viewRef.current",
@@ -733,8 +733,8 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
       return;
     }
     return addEventListener(root, DX_ANCHOR_ACTIVATE, (event) => {
-      const { trigger, refId } = event;
-      if (!refId) {
+      const { trigger, dxn } = event;
+      if (!dxn) {
         triggerRef.current = trigger;
         if (onActivate) {
           onActivate({
@@ -756,7 +756,7 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
   const handleSelect = useCallback2((item) => {
     invariant(viewRef.current, void 0, {
       F: __dxlog_file2,
-      L: 102,
+      L: 99,
       S: void 0,
       A: [
         "viewRef.current",
@@ -780,34 +780,36 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
     virtualRef: triggerRef
   }), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
     align: "start",
-    classNames: tx("menu.content", "menu--exotic-unfocusable", {
-      elevation: "positioned"
-    }, [
-      "overflow-y-auto",
+    classNames: [
+      "flex flex-col",
       !menuGroups.length && "hidden"
-    ]),
+    ],
     style: {
       maxBlockSize: 36 * numItems + 10
     },
-    /**
-       * NOTE: We keep the focus in the editor, but Radix routes escape key.
-       */
+    // NOTE: We keep the focus in the editor, but Radix routes escape key.
     onEscapeKeyDown: () => {
-      onCancel?.({
-        view
-      });
+      const currentView = viewRef.current;
+      if (currentView) {
+        onCancel?.({
+          view: currentView
+        });
+      }
     },
     onOpenAutoFocus: (event) => event.preventDefault()
   }, /* @__PURE__ */ React2.createElement(Popover.Viewport, {
-    classNames: tx("menu.viewport", "menu__viewport--exotic-unfocusable", {})
-  }, /* @__PURE__ */ React2.createElement(Menu, {
+    asChild: true,
+    classNames: "dx-container"
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Root, {
+    thin: true
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React2.createElement(Menu, {
     groups: menuGroups,
     currentItem,
     onSelect: handleSelect
-  })), /* @__PURE__ */ React2.createElement(Popover.Arrow, null))), /* @__PURE__ */ React2.createElement("div", {
-    ref: setRoot,
+  })))), /* @__PURE__ */ React2.createElement(Popover.Arrow, null))), /* @__PURE__ */ React2.createElement("div", {
     role: "none",
-    className: "contents"
+    className: "contents",
+    ref: setRoot
   }, children));
 };
 var Menu = ({ groups, currentItem, onSelect }) => {
@@ -819,14 +821,14 @@ var Menu = ({ groups, currentItem, onSelect }) => {
     currentItem,
     onSelect
   }), index < groups.length - 1 && /* @__PURE__ */ React2.createElement("div", {
-    className: tx("menu.separator", "menu__item", {})
+    className: tx("menu.separator", {})
   }))));
 };
 var MenuGroup = ({ group, currentItem, onSelect }) => {
   const { tx } = useThemeContext();
   const { t } = useTranslation();
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, group.label && /* @__PURE__ */ React2.createElement("div", {
-    className: tx("menu.groupLabel", "menu__group__label", {})
+    className: tx("menu.groupLabel", {})
   }, /* @__PURE__ */ React2.createElement("span", null, toLocalizedString(group.label, t))), group.items.map((item) => /* @__PURE__ */ React2.createElement(MenuItem, {
     key: item.id,
     item,
@@ -854,13 +856,12 @@ var MenuItem = ({ item, current, onSelect }) => {
   ]);
   return /* @__PURE__ */ React2.createElement("li", {
     ref: listRef,
-    className: tx("menu.item", "menu__item--exotic-unfocusable", {}, [
-      current && "bg-hoverSurface"
+    className: tx("menu.item", {}, [
+      current && "bg-hover-surface"
     ]),
     onClick: handleSelect
   }, item.icon && /* @__PURE__ */ React2.createElement(Icon, {
-    icon: item.icon,
-    size: 5
+    icon: item.icon
   }), /* @__PURE__ */ React2.createElement("span", {
     className: "grow truncate"
   }, toLocalizedString(item.label, t)));
@@ -883,7 +884,7 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter =
       trigger: trigger2,
       ...props
     }) ?? [];
-    return filter ? filterMenuGroups(groups, (item) => text ? item.label.toLowerCase().startsWith(text.toLowerCase()) : true) : groups;
+    return filter && trigger2 !== "@" ? filterMenuGroups(groups, (item) => text ? item.label.toLowerCase().startsWith(text.toLowerCase()) : true) : groups;
   }, [
     getMenu,
     filter
@@ -891,7 +892,7 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter =
   const handleOpenChange = useCallback3(async ({ view, open: open2 }) => {
     invariant2(view, void 0, {
       F: __dxlog_file3,
-      L: 76,
+      L: 77,
       S: void 0,
       A: [
         "view",
@@ -934,10 +935,21 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter =
     handleOpenChange
   ]);
   const handleSelect = useCallback3(({ view, item }) => {
+    const { range } = view.state.field(popoverStateField) ?? {};
+    if (range) {
+      view.dispatch({
+        changes: {
+          from: range.from,
+          to: range.to,
+          insert: ""
+        }
+      });
+    }
     void item.onSelect?.({
       view,
       head: view.state.selection.main.head
     });
+    view.focus();
   }, []);
   const handleCancel = useCallback3(({ view }) => {
     const { range, trigger: trigger2 } = view.state.field(popoverStateField) ?? {};
@@ -1019,144 +1031,110 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter =
 import { Atom } from "@effect-atom/atom-react";
 import React3, { memo, useMemo as useMemo3 } from "react";
 import { ElevationProvider } from "@dxos/react-ui";
-import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
+import { Menu as Menu2, MenuBuilder, useMenuActions } from "@dxos/react-ui-menu";
 
-// src/components/EditorToolbar/actions.ts
-import { createMenuAction, createMenuItemGroup } from "@dxos/react-ui-menu";
+// src/components/EditorToolbar/lists.ts
 import { List, addList, removeList } from "@dxos/ui-editor";
 var listStyles = {
   bullet: "ph--list-bullets--regular",
   ordered: "ph--list-numbers--regular",
   task: "ph--list-checks--regular"
 };
-var createLists = (state, getView) => {
+var addLists = (state, getView) => (builder) => {
   const value = state.listStyle ?? "";
-  const listGroupAction = createListGroupAction(value);
-  const listActionsMap = createListActions(value, getView);
-  return {
-    nodes: [
-      listGroupAction,
-      ...listActionsMap
-    ],
-    edges: [
+  builder.group("list", {
+    label: [
+      "list.label",
       {
-        source: "root",
-        target: "list"
-      },
-      ...listActionsMap.map(({ id }) => ({
-        source: listGroupAction.id,
-        target: id
-      }))
-    ]
-  };
-};
-var createEditorAction = (id, props, invoke) => {
-  const { label = [
-    `${id} label`,
-    {
-      ns: translationKey
-    }
-  ], ...rest } = props;
-  return createMenuAction(id, invoke, {
-    label,
-    ...rest
-  });
-};
-var createEditorActionGroup = (id, props, icon) => {
-  const { label = [
-    `${id} label`,
-    {
-      ns: translationKey
-    }
-  ], ...rest } = props;
-  return createMenuItemGroup(id, {
-    label,
-    icon,
+        ns: translationKey
+      }
+    ],
     iconOnly: true,
-    ...rest
-  });
-};
-var createListGroupAction = (value) => createEditorActionGroup("list", {
-  variant: "toggleGroup",
-  selectCardinality: "single",
-  value
-});
-var createListActions = (value, getView) => Object.entries(listStyles).map(([listStyle, icon]) => {
-  const checked = value === listStyle;
-  return createEditorAction(`list-${listStyle}`, {
-    checked,
-    icon
-  }, () => {
-    const view = getView();
-    if (!view) {
-      return;
-    }
-    const listType = listStyle === "ordered" ? List.Ordered : listStyle === "bullet" ? List.Bullet : List.Task;
-    if (checked) {
-      removeList(listType)(view);
-    } else {
-      addList(listType)(view);
+    variant: "toggleGroup",
+    selectCardinality: "single",
+    value
+  }, (group) => {
+    for (const [listStyle, icon] of Object.entries(listStyles)) {
+      const checked = value === listStyle;
+      group.action(`list-${listStyle}`, {
+        label: [
+          `list.${listStyle}.label`,
+          {
+            ns: translationKey
+          }
+        ],
+        checked,
+        icon
+      }, () => {
+        const view = getView();
+        if (!view) {
+          return;
+        }
+        const listType = listStyle === "ordered" ? List.Ordered : listStyle === "bullet" ? List.Bullet : List.Task;
+        if (checked) {
+          removeList(listType)(view);
+        } else {
+          addList(listType)(view);
+        }
+      });
     }
   });
-});
+};
 
 // src/components/EditorToolbar/blocks.ts
 import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from "@dxos/ui-editor";
-var createBlockGroupAction = (value) => createEditorActionGroup("block", {
-  variant: "toggleGroup",
-  selectCardinality: "single",
-  value
-});
-var createBlockActions = (value, getView, blankLine) => Object.entries({
+var blockTypes = {
   blockquote: "ph--quotes--regular",
   codeblock: "ph--code-block--regular",
   table: "ph--table--regular"
-}).map(([type, icon]) => {
-  const checked = type === value;
-  return createEditorAction(type, {
-    checked,
-    ...type === "table" && {
-      disabled: !!blankLine
-    },
-    icon
-  }, () => {
-    const view = getView();
-    if (!view) {
-      return;
-    }
-    switch (type) {
-      case "blockquote":
-        checked ? removeBlockquote(view) : addBlockquote(view);
-        break;
-      case "codeblock":
-        checked ? removeCodeblock(view) : addCodeblock(view);
-        break;
-      case "table":
-        insertTable(view);
-        break;
-    }
-  });
-});
-var createBlocks = (state, getView) => {
+};
+var addBlocks = (state, getView) => (builder) => {
   const value = state?.blockQuote ? "blockquote" : state.blockType ?? "";
-  const blockGroupAction = createBlockGroupAction(value);
-  const blockActions = createBlockActions(value, getView, state.blankLine);
-  return {
-    nodes: [
-      blockGroupAction,
-      ...blockActions
-    ],
-    edges: [
+  builder.group("block", {
+    label: [
+      "block.label",
       {
-        source: "root",
-        target: "block"
-      },
-      ...blockActions.map(({ id }) => ({
-        source: blockGroupAction.id,
-        target: id
-      }))
-    ]
-  };
+        ns: translationKey
+      }
+    ],
+    iconOnly: true,
+    variant: "toggleGroup",
+    selectCardinality: "single",
+    value
+  }, (group) => {
+    for (const [type, icon] of Object.entries(blockTypes)) {
+      const checked = type === value;
+      group.action(type, {
+        label: [
+          `block.${type}.label`,
+          {
+            ns: translationKey
+          }
+        ],
+        checked,
+        ...type === "table" && {
+          disabled: !!state.blankLine
+        },
+        icon
+      }, () => {
+        const view = getView();
+        if (!view) {
+          return;
+        }
+        switch (type) {
+          case "blockquote":
+            checked ? removeBlockquote(view) : addBlockquote(view);
+            break;
+          case "codeblock":
+            checked ? removeCodeblock(view) : addCodeblock(view);
+            break;
+          case "table":
+            insertTable(view);
+            break;
+        }
+      });
+    }
+  });
 };
 
 // src/components/EditorToolbar/formatting.ts
@@ -1168,201 +1146,174 @@ var formats = {
   code: "ph--code--regular",
   link: "ph--link--regular"
 };
-var createFormattingGroup = (formatting) => createEditorActionGroup("formatting", {
-  variant: "toggleGroup",
-  selectCardinality: "multiple",
-  value: Object.keys(formats).filter((key) => !!formatting[key])
-});
-var createFormattingActions = (formatting, getView) => Object.entries(formats).map(([type, icon]) => {
-  const checked = !!formatting[type];
-  return createEditorAction(type, {
-    checked,
-    icon
-  }, () => {
-    const view = getView();
-    if (!view) {
-      return;
-    }
-    if (type === "link") {
-      checked ? removeLink(view) : addLink()(view);
-      return;
+var addFormatting = (state, getView) => (builder) => {
+  const formatting = state;
+  builder.group("formatting", {
+    label: [
+      "formatting.label",
+      {
+        ns: translationKey
+      }
+    ],
+    iconOnly: true,
+    variant: "toggleGroup",
+    selectCardinality: "multiple",
+    value: Object.keys(formats).filter((key) => !!formatting[key])
+  }, (group) => {
+    for (const [type, icon] of Object.entries(formats)) {
+      const checked = !!formatting[type];
+      group.action(type, {
+        label: [
+          `formatting.${type}.label`,
+          {
+            ns: translationKey
+          }
+        ],
+        checked,
+        icon
+      }, () => {
+        const view = getView();
+        if (!view) {
+          return;
+        }
+        if (type === "link") {
+          checked ? removeLink(view) : addLink()(view);
+          return;
+        }
+        setStyle(type === "strong" ? Inline.Strong : type === "emphasis" ? Inline.Emphasis : type === "strikethrough" ? Inline.Strikethrough : Inline.Code, !checked)(view);
+      });
     }
-    const inlineType = type === "strong" ? Inline.Strong : type === "emphasis" ? Inline.Emphasis : type === "strikethrough" ? Inline.Strikethrough : Inline.Code;
-    setStyle(inlineType, !checked)(view);
   });
-});
-var createFormatting = (state, getView) => {
-  const formattingGroupAction = createFormattingGroup(state);
-  const formattingActions = createFormattingActions(state, getView);
-  return {
-    nodes: [
-      formattingGroupAction,
-      ...formattingActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "formatting"
-      },
-      ...formattingActions.map(({ id }) => ({
-        source: formattingGroupAction.id,
-        target: id
-      }))
-    ]
-  };
 };
 
 // src/components/EditorToolbar/headings.ts
 import { setHeading } from "@dxos/ui-editor";
-var createHeadingGroupAction = (value) => createEditorActionGroup("heading", {
-  variant: "dropdownMenu",
-  applyActive: true,
-  selectCardinality: "single",
-  // TODO(wittjosiah): Remove? Not sure this does anything.
-  value
-}, "ph--text-h--regular");
-var createHeadingActions = (currentLevel, getView) => Object.entries({
-  "0": "ph--paragraph--regular",
-  "1": "ph--text-h-one--regular",
-  "2": "ph--text-h-two--regular",
-  "3": "ph--text-h-three--regular",
-  "4": "ph--text-h-four--regular",
-  "5": "ph--text-h-five--regular",
-  "6": "ph--text-h-six--regular"
-}).map(([levelStr, icon]) => {
-  const level = parseInt(levelStr);
-  return createEditorAction(`heading--${levelStr}`, {
-    label: [
-      "heading level label",
-      {
-        count: level,
-        ns: translationKey
-      }
-    ],
-    icon,
-    checked: levelStr === currentLevel
-  }, () => setHeading(level)(getView()));
-});
+var headingIcons = {
+  0: "ph--paragraph--regular",
+  1: "ph--text-h-one--regular",
+  2: "ph--text-h-two--regular",
+  3: "ph--text-h-three--regular",
+  4: "ph--text-h-four--regular",
+  5: "ph--text-h-five--regular",
+  6: "ph--text-h-six--regular"
+};
 var computeHeadingValue = (state) => {
   const blockType = state ? state.blockType : "paragraph";
   const heading = blockType && /heading(\d)/.exec(blockType);
   return heading ? heading[1] : blockType === "paragraph" || !blockType ? "0" : "";
 };
-var createHeadings = (state, getView) => {
+var addHeadings = (state, getView) => (builder) => {
   const headingValue = computeHeadingValue(state);
-  const headingGroupAction = createHeadingGroupAction(headingValue);
-  const headingActions = createHeadingActions(headingValue, getView);
-  return {
-    nodes: [
-      headingGroupAction,
-      ...headingActions
-    ],
-    edges: [
+  builder.group("heading", {
+    label: [
+      "heading.label",
       {
-        source: "root",
-        target: "heading"
-      },
-      ...headingActions.map(({ id }) => ({
-        source: headingGroupAction.id,
-        target: id
-      }))
-    ]
-  };
+        ns: translationKey
+      }
+    ],
+    icon: "ph--text-h--regular",
+    iconOnly: true,
+    variant: "dropdownMenu",
+    applyActive: true,
+    selectCardinality: "single",
+    // TODO(wittjosiah): Remove? Not sure this does anything.
+    value: headingValue
+  }, (group) => {
+    for (const [levelStr, icon] of Object.entries(headingIcons)) {
+      const level = parseInt(levelStr);
+      group.action(`heading--${levelStr}`, {
+        label: [
+          "heading-level.label",
+          {
+            count: level,
+            ns: translationKey
+          }
+        ],
+        icon,
+        checked: levelStr === headingValue
+      }, () => setHeading(level)(getView()));
+    }
+  });
 };
 
 // src/components/EditorToolbar/image.ts
-var createImageUploadAction = (onImageUpload) => createEditorAction("image", {
-  testId: "editor.toolbar.image",
-  icon: "ph--image-square--regular"
-}, onImageUpload);
-var createImageUpload = (onImageUpload) => ({
-  nodes: [
-    createImageUploadAction(onImageUpload)
-  ],
-  edges: [
-    {
-      source: "root",
-      target: "image"
-    }
-  ]
-});
+var addImageUpload = (onImageUpload) => (builder) => {
+  builder.action("image", {
+    label: [
+      "image.label",
+      {
+        ns: translationKey
+      }
+    ],
+    testId: "editor.toolbar.image",
+    icon: "ph--image-square--regular"
+  }, onImageUpload);
+};
 
 // src/components/EditorToolbar/search.ts
 import { openSearchPanel } from "@codemirror/search";
-var createSearchAction = (getView) => createEditorAction("search", {
-  testId: "editor.toolbar.search",
-  icon: "ph--magnifying-glass--regular"
-}, () => openSearchPanel(getView()));
-var createSearch = (getView) => ({
-  nodes: [
-    createSearchAction(getView)
-  ],
-  edges: [
-    {
-      source: "root",
-      target: "search"
-    }
-  ]
-});
+var addSearch = (getView) => (builder) => {
+  builder.action("search", {
+    label: [
+      "search.label",
+      {
+        ns: translationKey
+      }
+    ],
+    testId: "editor.toolbar.search",
+    icon: "ph--magnifying-glass--regular"
+  }, () => openSearchPanel(getView()));
+};
 
 // src/components/EditorToolbar/view-mode.ts
-var createViewModeGroupAction = (value) => createEditorActionGroup("viewMode", {
-  variant: "dropdownMenu",
-  applyActive: true,
-  selectCardinality: "single",
-  value
-}, "ph--eye--regular");
-var createViewModeActions = (value, onViewModeChange) => Object.entries({
+var viewModes = {
   preview: "ph--eye--regular",
   source: "ph--pencil-simple--regular",
   readonly: "ph--pencil-slash--regular"
-}).map(([viewMode, icon]) => {
-  const checked = viewMode === value;
-  return createEditorAction(`view-mode--${viewMode}`, {
+};
+var addViewMode = (state, onViewModeChange) => (builder) => {
+  const value = state.viewMode ?? "source";
+  builder.group("viewMode", {
     label: [
-      `${viewMode} mode label`,
+      "view-mode.label",
       {
         ns: translationKey
       }
     ],
-    checked,
-    icon
-  }, () => onViewModeChange(viewMode));
-});
-var createViewMode = (state, onViewModeChange) => {
-  const value = state.viewMode ?? "source";
-  const viewModeGroupAction = createViewModeGroupAction(value);
-  const viewModeActions = createViewModeActions(value, onViewModeChange);
-  return {
-    nodes: [
-      viewModeGroupAction,
-      ...viewModeActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "viewMode"
-      },
-      ...viewModeActions.map(({ id }) => ({
-        source: viewModeGroupAction.id,
-        target: id
-      }))
-    ]
-  };
+    icon: "ph--eye--regular",
+    iconOnly: true,
+    variant: "dropdownMenu",
+    applyActive: true,
+    selectCardinality: "single",
+    value
+  }, (group) => {
+    for (const [viewMode, icon] of Object.entries(viewModes)) {
+      const checked = viewMode === value;
+      group.action(`view-mode--${viewMode}`, {
+        label: [
+          `view-mode.${viewMode}.label`,
+          {
+            ns: translationKey
+          }
+        ],
+        checked,
+        icon
+      }, () => onViewModeChange(viewMode));
+    }
+  });
 };
 
 // src/components/EditorToolbar/EditorToolbar.tsx
 var EditorToolbar = /* @__PURE__ */ memo(({ classNames, role, attendableId, onAction, ...props }) => {
-  const menuProps = useEditorToolbarActionGraph(props);
+  const menuActions = useEditorToolbarActionGraph(props);
   return /* @__PURE__ */ React3.createElement(ElevationProvider, {
     elevation: role === "section" ? "positioned" : "base"
-  }, /* @__PURE__ */ React3.createElement(MenuProvider, {
-    ...menuProps,
+  }, /* @__PURE__ */ React3.createElement(Menu2.Root, {
+    ...menuActions,
     attendableId,
     onAction
-  }, /* @__PURE__ */ React3.createElement(ToolbarMenu, {
-    classNames,
-    textBlockWidth: true
+  }, /* @__PURE__ */ React3.createElement(Menu2.Toolbar, {
+    classNames
   })));
 });
 var useEditorToolbarActionGraph = ({ state, getView, customActions, ...features }) => {
@@ -1387,41 +1338,8 @@ var useEditorToolbarActionGraph = ({ state, getView, customActions, ...features
 };
 var createToolbarActions = ({ state, getView, customActions, ...features }) => {
   return Atom.make((get) => {
-    const graph = {
-      nodes: [],
-      edges: []
-    };
-    const addSubGraph = (graph2, subGraph) => {
-      graph2.nodes.push(...subGraph.nodes);
-      graph2.edges.push(...subGraph.edges);
-    };
     const stateSnapshot = get(state);
-    if (features?.showHeadings ?? true) {
-      addSubGraph(graph, createHeadings(stateSnapshot, getView));
-    }
-    if (features?.showFormatting ?? true) {
-      addSubGraph(graph, createFormatting(stateSnapshot, getView));
-    }
-    if (features?.showLists ?? true) {
-      addSubGraph(graph, createLists(stateSnapshot, getView));
-    }
-    if (features?.showBlocks ?? true) {
-      addSubGraph(graph, createBlocks(stateSnapshot, getView));
-    }
-    if (features?.onImageUpload) {
-      addSubGraph(graph, createImageUpload(features.onImageUpload));
-    }
-    addSubGraph(graph, createGapSeparator());
-    if (customActions) {
-      addSubGraph(graph, get(customActions));
-    }
-    if (features?.showSearch ?? true) {
-      addSubGraph(graph, createSearch(getView));
-    }
-    if (features?.onViewModeChange) {
-      addSubGraph(graph, createViewMode(stateSnapshot, features.onViewModeChange));
-    }
-    return graph;
+    return MenuBuilder.make().subgraph(features?.showHeadings !== false && addHeadings(stateSnapshot, getView)).subgraph(features?.showFormatting !== false && addFormatting(stateSnapshot, getView)).subgraph(features?.showLists !== false && addLists(stateSnapshot, getView)).subgraph(features?.showBlocks !== false && addBlocks(stateSnapshot, getView)).subgraph(features?.onImageUpload && addImageUpload(features.onImageUpload)).separator("gap").subgraph(customActions && get(customActions)).subgraph(features?.showSearch !== false && addSearch(getView)).subgraph(features?.onViewModeChange && addViewMode(stateSnapshot, features.onViewModeChange)).build();
   });
 };
 
@@ -1463,15 +1381,17 @@ var EditorRoot = /* @__PURE__ */ forwardRef2(({ children, extensions: extensions
   }, children));
 });
 EditorRoot.displayName = "Editor.Root";
+var EDITOR_VIEWPORT_NAME = "Editor.Viewport";
 var EditorViewport = ({ classNames, children }) => {
   return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: mx2("grid grid-rows-[min-content_1fr] bs-full overflow-hidden", classNames)
+    className: mx2("grid grid-rows-[min-content_1fr] h-full overflow-hidden", classNames)
   }, children);
 };
-EditorViewport.displayName = "Editor.Viewport";
+EditorViewport.displayName = EDITOR_VIEWPORT_NAME;
+var EDITOR_CONTENT_NAME = "Editor.Content";
 var EditorContent2 = ({ extensions: providedExtensions, ...props }) => {
-  const { extensions: additionalExtensions = [], setController } = useEditorContext(EditorContent2.displayName);
+  const { extensions: additionalExtensions = [], setController } = useEditorContext(EDITOR_CONTENT_NAME);
   const extensions = useMemo5(() => [
     additionalExtensions,
     providedExtensions
@@ -1485,13 +1405,14 @@ var EditorContent2 = ({ extensions: providedExtensions, ...props }) => {
     ref: setController
   });
 };
-EditorContent2.displayName = "Editor.Content";
+EditorContent2.displayName = EDITOR_CONTENT_NAME;
+var EDITOR_TOOLBAR_NAME = "Editor.Toolbar";
 var EditorToolbar2 = (props) => {
-  const { controller, state } = useEditorContext(EditorToolbar2.displayName);
+  const { controller, state } = useEditorContext(EDITOR_TOOLBAR_NAME);
   const getView = useCallback4(() => {
     invariant3(controller?.view, void 0, {
       F: __dxlog_file4,
-      L: 140,
+      L: 146,
       S: void 0,
       A: [
         "controller?.view",
@@ -1508,7 +1429,7 @@ var EditorToolbar2 = (props) => {
     state
   });
 };
-EditorToolbar2.displayName = "Editor.Toolbar";
+EditorToolbar2.displayName = EDITOR_TOOLBAR_NAME;
 var Editor = {
   Root: EditorRoot,
   Viewport: EditorViewport,
@@ -1527,20 +1448,20 @@ var EditorPreviewProvider = ({ children, onLookup }) => {
   const [value, setValue] = useState5({});
   const [open, setOpen] = useState5(false);
   const handleActivate = useCallback5((event) => {
-    const { refId, label, trigger: dxTrigger } = event;
+    const { dxn, label, trigger } = event;
     setValue((value2) => ({
       ...value2,
       link: {
         label,
-        ref: refId
+        dxn
       },
       pending: true
     }));
-    triggerRef.current = dxTrigger;
+    triggerRef.current = trigger;
     queueMicrotask(() => setOpen(true));
     void onLookup?.({
       label,
-      ref: refId
+      dxn
     }).then((target) => setValue((value2) => ({
       ...value2,
       target: target ?? void 0,
@@ -1572,9 +1493,9 @@ var EditorPreviewProvider = ({ children, onLookup }) => {
   }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
     virtualRef: triggerRef
   }), /* @__PURE__ */ React5.createElement("div", {
-    ref: setRoot,
     role: "none",
-    className: "contents"
+    className: "contents",
+    ref: setRoot
   }, children)));
 };
 export {