@dxos/react-ui-editor 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.422d1c7879",
+  "version": "0.8.4-main.4f23b4e393",
   "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,12 +12,21 @@
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -26,7 +35,7 @@
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.2.3",
+    "@automerge/automerge": "3.2.6",
     "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/commands": "^6.8.1",
     "@codemirror/lang-html": "^6.4.11",
@@ -41,7 +50,7 @@
     "@codemirror/search": "^6.5.11",
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.38.4",
+    "@codemirror/view": "^6.38.5",
     "@fluentui/react-tabster": "9.26.11",
     "@lezer/common": "^1.2.2",
     "@lezer/generator": "^1.7.1",
@@ -60,31 +69,31 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.8.4-main.422d1c7879",
-    "@dxos/app-graph": "0.8.4-main.422d1c7879",
-    "@dxos/debug": "0.8.4-main.422d1c7879",
-    "@dxos/client": "0.8.4-main.422d1c7879",
-    "@dxos/display-name": "0.8.4-main.422d1c7879",
-    "@dxos/echo": "0.8.4-main.422d1c7879",
-    "@dxos/context": "0.8.4-main.422d1c7879",
-    "@dxos/effect": "0.8.4-main.422d1c7879",
-    "@dxos/invariant": "0.8.4-main.422d1c7879",
-    "@dxos/echo-db": "0.8.4-main.422d1c7879",
-    "@dxos/lit-ui": "0.8.4-main.422d1c7879",
-    "@dxos/log": "0.8.4-main.422d1c7879",
-    "@dxos/protocols": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-menu": "0.8.4-main.422d1c7879",
-    "@dxos/react-hooks": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-mosaic": "0.8.4-main.422d1c7879",
-    "@dxos/ui-editor": "0.8.4-main.422d1c7879",
-    "@dxos/ui-theme": "0.8.4-main.422d1c7879",
-    "@dxos/util": "0.8.4-main.422d1c7879",
-    "@dxos/ui": "0.8.4-main.422d1c7879"
+    "@dxos/async": "0.8.4-main.4f23b4e393",
+    "@dxos/app-graph": "0.8.4-main.4f23b4e393",
+    "@dxos/client": "0.8.4-main.4f23b4e393",
+    "@dxos/debug": "0.8.4-main.4f23b4e393",
+    "@dxos/context": "0.8.4-main.4f23b4e393",
+    "@dxos/display-name": "0.8.4-main.4f23b4e393",
+    "@dxos/echo": "0.8.4-main.4f23b4e393",
+    "@dxos/echo-db": "0.8.4-main.4f23b4e393",
+    "@dxos/effect": "0.8.4-main.4f23b4e393",
+    "@dxos/lit-ui": "0.8.4-main.4f23b4e393",
+    "@dxos/log": "0.8.4-main.4f23b4e393",
+    "@dxos/protocols": "0.8.4-main.4f23b4e393",
+    "@dxos/invariant": "0.8.4-main.4f23b4e393",
+    "@dxos/react-hooks": "0.8.4-main.4f23b4e393",
+    "@dxos/ui": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-editor": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-theme": "0.8.4-main.4f23b4e393",
+    "@dxos/util": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-mosaic": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-menu": "0.8.4-main.4f23b4e393"
   },
   "devDependencies": {
-    "@automerge/automerge": "3.2.3",
-    "@automerge/automerge-repo": "2.5.1",
-    "@automerge/automerge-repo-network-broadcastchannel": "2.5.1",
+    "@automerge/automerge": "3.2.6",
+    "@automerge/automerge-repo": "2.6.0-subduction.17",
+    "@automerge/automerge-repo-network-broadcastchannel": "2.6.0-subduction.17",
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/ai": "0.33.2",
     "@effect/platform": "0.94.4",
@@ -105,23 +114,23 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "react-test-renderer": "~19.2.0",
-    "vite": "^7.1.11",
+    "vite": "^8.0.10",
     "vite-plugin-top-level-await": "^1.6.0",
-    "vite-plugin-wasm": "^3.5.0",
-    "@dxos/config": "0.8.4-main.422d1c7879",
-    "@dxos/ai": "0.8.4-main.422d1c7879",
-    "@dxos/echo-atom": "0.8.4-main.422d1c7879",
-    "@dxos/echo": "0.8.4-main.422d1c7879",
-    "@dxos/random": "0.8.4-main.422d1c7879",
-    "@dxos/keyboard": "0.8.4-main.422d1c7879",
-    "@dxos/react-client": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-attention": "0.8.4-main.422d1c7879",
-    "@dxos/schema": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.422d1c7879",
-    "@dxos/storybook-utils": "0.8.4-main.422d1c7879",
-    "@dxos/ui-types": "0.8.4-main.422d1c7879",
-    "@dxos/ui-theme": "0.8.4-main.422d1c7879"
+    "vite-plugin-wasm": "^3.6.0",
+    "@dxos/ai": "0.8.4-main.4f23b4e393",
+    "@dxos/config": "0.8.4-main.4f23b4e393",
+    "@dxos/echo": "0.8.4-main.4f23b4e393",
+    "@dxos/echo-atom": "0.8.4-main.4f23b4e393",
+    "@dxos/keyboard": "0.8.4-main.4f23b4e393",
+    "@dxos/random": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-attention": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.4f23b4e393",
+    "@dxos/schema": "0.8.4-main.4f23b4e393",
+    "@dxos/storybook-utils": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-theme": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-types": "0.8.4-main.4f23b4e393",
+    "@dxos/react-client": "0.8.4-main.4f23b4e393"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -129,9 +138,9 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-client": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui": "0.8.4-main.422d1c7879",
-    "@dxos/ui-theme": "0.8.4-main.422d1c7879"
+    "@dxos/react-client": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-theme": "0.8.4-main.4f23b4e393"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Editor/Editor.tsx

@@ -110,11 +110,7 @@ type EditorContentProps = ThemedClassName<PropsWithChildren<{}>>;
  * Content component that wraps the toolbar and editor view area.
  */
 const EditorContent = ({ classNames, children }: EditorContentProps) => {
-  return (
-    <div role='none' className={mx('grid grid-rows-[min-content_1fr] h-full overflow-hidden', classNames)}>
-      {children}
-    </div>
-  );
+  return <div className={mx('grid grid-rows-[min-content_1fr] h-full overflow-hidden', classNames)}>{children}</div>;
 };
 
 EditorContent.displayName = EDITOR_CONTENT_NAME;
@@ -157,8 +153,6 @@ type EditorToolbarProps = Omit<NaturalEditorToolbarProps, 'getView' | 'state'>;
  */
 const EditorToolbar = (props: EditorToolbarProps) => {
   const { controller, state } = useEditorContext(EDITOR_TOOLBAR_NAME);
-
-  // TODO(burdon): Fix invariant.
   const getView = useCallback(() => {
     invariant(controller?.view);
     return controller?.view;
@@ -175,9 +169,9 @@ EditorToolbar.displayName = EDITOR_TOOLBAR_NAME;
 
 export const Editor = {
   Root: EditorRoot,
+  Toolbar: EditorToolbar,
   Content: EditorContent,
   View: EditorView,
-  Toolbar: EditorToolbar,
 };
 
 export type {

package/src/components/Editor/EditorView.tsx

@@ -4,7 +4,7 @@
 
 import { Transaction } from '@codemirror/state';
 import { EditorView as NaturalEditorView } from '@codemirror/view';
-import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
 import { initialSync } from '@dxos/ui-editor';
@@ -25,8 +25,15 @@ export type EditorViewProps = ThemedClassName<
  * Minimal text editor.
  * NOTE: This shouold not be used with the automerge extension.
  */
+// TODO(burdon): Move controller to Root component, then make composable.
 export const EditorView = forwardRef<EditorController, EditorViewProps>(
   ({ classNames, id, extensions, selectionEnd, focusable = true, value, onChange, ...props }, forwardedRef) => {
+    // Hold the latest onChange in a ref so callers may pass an inline callback
+    // without forcing the underlying editor to be destroyed and recreated on
+    // every render — which would blur the focused input on each keystroke.
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+
     const { parentRef, focusAttributes, view } = useTextEditor(
       () => ({
         id,
@@ -37,13 +44,13 @@ export const EditorView = forwardRef<EditorController, EditorViewProps>(
           NaturalEditorView.updateListener.of(({ view, docChanged, transactions }) => {
             const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
             if (!isInitialSync && docChanged) {
-              onChange?.(view.state.doc.toString());
+              onChangeRef.current?.(view.state.doc.toString());
             }
           }),
         ],
         ...props,
       }),
-      [id, extensions, selectionEnd, onChange],
+      [id, extensions, selectionEnd],
     );
 
     // External controller.
@@ -51,26 +58,38 @@ export const EditorView = forwardRef<EditorController, EditorViewProps>(
       return createEditorController(view);
     }, [id, view]);
 
-    // Set initial value and cursor position.
+    // Sync the editor doc to the controlled `value` prop, but only when they
+    // disagree. After internal typing the prop will already match the editor's
+    // doc, and dispatching anyway would race fast keystrokes — a stale rAF
+    // closure can replace doc content with an older value, dropping characters.
     useEffect(() => {
+      if (!view) {
+        return;
+      }
+      const next = value ?? '';
+      if (view.state.doc.toString() === next) {
+        return;
+      }
       requestAnimationFrame(() => {
-        view?.dispatch({
+        if (view.state.doc.toString() === next) {
+          return;
+        }
+        view.dispatch({
           annotations: initialSync,
-          changes: value ? [{ from: 0, to: view?.state.doc.length ?? 0, insert: value ?? '' }] : [],
-          selection: selectionEnd ? { anchor: view?.state.doc.length ?? 0 } : undefined,
+          changes: [{ from: 0, to: view.state.doc.length, insert: next }],
+          selection: selectionEnd ? { anchor: next.length } : undefined,
         });
 
         if (selectionEnd) {
-          view?.focus();
+          view.focus();
         }
       });
     }, [view, value, selectionEnd]);
 
     return (
       <div
-        role='none'
         className={mx(
-          'w-full outline-hidden focus:border-accent-surface focus-within:border-neutral-focus-indicator',
+          'w-full outline-hidden focus:border-accent-surface focus-within:border-focus-ring-subtle',
           classNames,
         )}
         {...(focusable ? focusAttributes : {})}

package/src/components/EditorMenuProvider/EditorMenuProvider.tsx

@@ -137,7 +137,7 @@ export const EditorMenuProvider = ({
       </Popover.Portal>
 
       {/* Content */}
-      <div role='none' className='contents' ref={setRoot}>
+      <div className='contents' ref={setRoot}>
         {children}
       </div>
     </Popover.Root>

package/src/components/EditorMenuProvider/popover.ts

@@ -13,7 +13,8 @@ import {
   keymap,
 } from '@codemirror/view';
 
-import { type PlaceholderOptions, type Range, modalStateField, placeholder } from '@dxos/ui-editor';
+import { type PlaceholderOptions, modalStateField, placeholder } from '@dxos/ui-editor';
+import { type Range } from '@dxos/ui-editor/types';
 import { isNonNullable, isTruthy } from '@dxos/util';
 
 const DELIMITERS = [' ', ':'];
@@ -52,6 +53,7 @@ export const popover = (options: PopoverOptions = {}): Extension => {
       placeholder({
         // TODO(burdon): Translations.
         content: `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`,
+        focusOnly: true,
         ...options.placeholder,
       }),
   ].filter(isTruthy);

package/src/components/EditorPreviewProvider/EditorPreviewProvider.tsx

@@ -68,7 +68,7 @@ export const EditorPreviewProvider = ({ children, onLookup }: EditorPreviewProvi
     <EditorPreviewContextProvider pending={value.pending} link={value.link} target={value.target}>
       <Popover.Root open={open} onOpenChange={setOpen}>
         <Popover.VirtualTrigger virtualRef={triggerRef as unknown as RefObject<HTMLButtonElement>} />
-        <div role='none' className='contents' ref={setRoot}>
+        <div className='contents' ref={setRoot}>
           {children}
         </div>
       </Popover.Root>

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -9,7 +9,7 @@ import React, { memo, useMemo } from 'react';
 import { type Node } from '@dxos/app-graph';
 import { ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
 import { type ActionGraphProps, Menu, type MenuAction, MenuBuilder, useMenuActions } from '@dxos/react-ui-menu';
-import { type EditorViewMode } from '@dxos/ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 
 import { addBlocks } from './blocks';
 import { addFormatting } from './formatting';
@@ -20,6 +20,8 @@ import { addSearch } from './search';
 import { type EditorToolbarState } from './types';
 import { addViewMode } from './view-mode';
 
+// TODO(burdon): Enable toolbar variants (e.g., markdown, code).
+
 export type EditorToolbarFeatureFlags = Partial<{
   showHeadings: boolean;
   showFormatting: boolean;
@@ -49,7 +51,7 @@ export type EditorToolbarProps = ThemedClassName<
 >;
 
 export const EditorToolbar = memo(({ classNames, role, attendableId, onAction, ...props }: EditorToolbarProps) => {
-  const menuActions = useEditorToolbarActionGraph(props);
+  const menuActions = useMarkdownMenuActions(props);
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
@@ -63,13 +65,13 @@ export const EditorToolbar = memo(({ classNames, role, attendableId, onAction, .
 type ToolbarActionsProps = Pick<EditorToolbarActionGraphProps, 'state' | 'getView' | 'customActions'> &
   EditorToolbarFeatureFlags;
 
+// TODO(burdon): Some actions should toggle the state (e.g., toggle bullets on/off depending on the current state).
 // TODO(wittjosiah): Toolbar re-rendering is causing this graph to be recreated and breaking reactivity in some cases.
 //   E.g. for toolbar dropdowns which use active icon, the icon is not updated when the active item changes.
 //   This is currently only happening in the markdown plugin usage and should be reproduced in an editor story.
-// TODO(burdon): Some actions should toggle the state (e.g., toggle bullets on/off depending on the current state).
-const useEditorToolbarActionGraph = ({ state, getView, customActions, ...features }: ToolbarActionsProps) => {
+const useMarkdownMenuActions = ({ state, getView, customActions, ...features }: ToolbarActionsProps) => {
   const menuCreator = useMemo(
-    () => createToolbarActions({ state, getView, customActions, ...features }),
+    () => createMarkdownActions({ state, getView, customActions, ...features }),
     [
       state,
       getView,
@@ -87,7 +89,7 @@ const useEditorToolbarActionGraph = ({ state, getView, customActions, ...feature
   return useMenuActions(menuCreator);
 };
 
-const createToolbarActions = ({
+const createMarkdownActions = ({
   state,
   getView,
   customActions,

package/src/components/EditorToolbar/blocks.ts

@@ -7,7 +7,8 @@ import { type EditorView } from '@codemirror/view';
 import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from '@dxos/ui-editor';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
+
 import { type EditorToolbarState } from './types';
 
 const blockTypes = {

package/src/components/EditorToolbar/formatting.ts

@@ -7,7 +7,8 @@ import { type EditorView } from '@codemirror/view';
 import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 import { type Formatting, Inline, addLink, removeLink, setStyle } from '@dxos/ui-editor';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
+
 import { type EditorToolbarState } from './types';
 
 const formats = {

package/src/components/EditorToolbar/headings.ts

@@ -7,7 +7,8 @@ import { type EditorView } from '@codemirror/view';
 import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 import { setHeading } from '@dxos/ui-editor';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
+
 import { type EditorToolbarState } from './types';
 
 const headingIcons: Record<string, string> = {

package/src/components/EditorToolbar/image.ts

@@ -4,7 +4,7 @@
 
 import { type ActionGroupBuilderFn } from '@dxos/react-ui-menu';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
 
 /** Add image upload action to the builder. */
 export const addImageUpload =

package/src/components/EditorToolbar/lists.ts

@@ -7,7 +7,8 @@ import { type EditorView } from '@codemirror/view';
 import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 import { List, addList, removeList } from '@dxos/ui-editor';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
+
 import { type EditorToolbarState } from './types';
 
 const listStyles = {

package/src/components/EditorToolbar/search.ts

@@ -7,7 +7,7 @@ import { type EditorView } from '@codemirror/view';
 
 import { type ActionGroupBuilderFn } from '@dxos/react-ui-menu';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
 
 /** Add search action to the builder. */
 export const addSearch =

package/src/components/EditorToolbar/types.ts

@@ -2,6 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type EditorViewMode, type Formatting } from '@dxos/ui-editor';
+import { type Formatting } from '@dxos/ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 
 export type EditorToolbarState = Formatting & { viewMode?: EditorViewMode };

package/src/components/EditorToolbar/view-mode.ts

@@ -3,9 +3,10 @@
 //
 
 import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
-import { type EditorViewMode } from '@dxos/ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
+
+import { translationKey } from '#translations';
 
-import { translationKey } from '../../translations';
 import { type EditorToolbarState } from './types';
 
 const viewModes = {

package/src/extensions/Assistant.stories.tsx

@@ -16,8 +16,9 @@ import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 import { compactSlots, createBasicExtensions, createThemeExtensions } from '@dxos/ui-editor';
 import { trim } from '@dxos/util';
 
+import { translations } from '#translations';
+
 import { Editor, type EditorViewProps } from '../components';
-import { translations } from '../translations';
 import { assistant, type AssistantOptions } from './assistant-extension';
 
 // TODO(burdon): Factor out.

package/src/extensions/assistant-extension.tsx

@@ -74,15 +74,15 @@ export const assistant = (options: AssistantOptions): Extension[] => {
       },
       /** @apply dx-button */
       '.cm-panel button': {
-        color: 'var(--color-base-surface-text) !important',
+        color: 'var(--color-base-foreground) !important',
       },
       '.cm-panel.cm-panel-lint ul': {
-        color: 'var(--color-base-surface-text) !important',
+        color: 'var(--color-base-foreground) !important',
         backgroundColor: 'var(--color-base-surface) !important',
         marginRight: '2rem !important',
       },
       '.cm-panel.cm-panel-lint ul [aria-selected]': {
-        color: 'var(--color-base-surface-text) !important',
+        color: 'var(--color-base-foreground) !important',
         backgroundColor: 'var(--color-base-surface) !important',
       },
       '.cm-panel.cm-panel-lint ul li': {

package/src/index.ts

@@ -2,10 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
-import { translations } from './translations';
-
 export * from './components';
 export * from './extensions';
 export * from './hooks';
-
-export { translations };

package/src/stories/Automerge.stories.tsx

@@ -7,20 +7,21 @@ import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-networ
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { Obj, Ref } from '@dxos/echo';
+import { Obj, Query, Ref } from '@dxos/echo';
 import { DocAccessor, createDocAccessor } from '@dxos/echo-db';
 import { TestSchema } from '@dxos/echo/testing';
 import { log } from '@dxos/log';
 import { type Messenger } from '@dxos/protocols';
-import { Query, useQuery, useSpace } from '@dxos/react-client/echo';
+import { useQuery, useSpace } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import { useClientStory, withMultiClientProvider } from '@dxos/react-client/testing';
 import { Button, useThemeContext } from '@dxos/react-ui';
 import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
 import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '@dxos/ui-editor';
 
+import { translations } from '#translations';
+
 import { useTextEditor } from '../hooks';
-import { translations } from '../translations';
 
 const initialContent = 'Hello world!';
 

package/src/stories/Comments.stories.tsx

@@ -11,7 +11,8 @@ import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
-import { type Comment, annotations, comments, createExternalCommentSync } from '@dxos/ui-editor';
+import { annotations, comments, createExternalCommentSync } from '@dxos/ui-editor';
+import { type Comment } from '@dxos/ui-editor/types';
 
 import { createRenderer, str } from '../util';
 import { EditorStory, content, longText } from './components';

package/src/stories/EditorToolbar.stories.tsx

@@ -9,7 +9,6 @@ import { useThemeContext } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 import {
-  type EditorViewMode,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
@@ -17,10 +16,12 @@ import {
   documentSlots,
   formattingKeymap,
 } from '@dxos/ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
+
+import { translations } from '#translations';
 
 import { Editor } from '../components';
 import { type UseTextEditorProps } from '../hooks';
-import { translations } from '../translations';
 
 type DefaultStoryProps = { placeholder?: string; viewMode?: EditorViewMode } & UseTextEditorProps;
 
@@ -51,7 +52,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder, viewMode = 'source
     <Editor.Root extensions={extensions} viewMode={viewMode}>
       <Editor.Content>
         <Editor.Toolbar classNames='dx-document' />
-        <div role='none' className='dx-container dx-document bg-base-surface'>
+        <div className='dx-container dx-document bg-base-surface'>
           <Editor.View autoFocus={autoFocus} initialValue={initialValue} selectionEnd />
         </div>
       </Editor.Content>

package/src/stories/Experimental.stories.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { log } from '@dxos/log';
 import { random } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { blast, defaultOptions, dropFile, join, typewriter } from '@dxos/ui-editor';
+import { blast, defaultOptions, dropFile, join, snippets } from '@dxos/ui-editor';
 
 import { EditorStory, content } from './components';
 
@@ -27,16 +27,16 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 //
-// Typewriter
+// Snippets
 //
 
-const typewriterItems = localStorage.getItem('org.dxos.testing.typewriter')?.split(',');
+const snippetItems = localStorage.getItem('org.dxos.testing.snippets')?.split(',');
 
-export const Typewriter: Story = {
+export const Snippets: Story = {
   render: () => (
     <EditorStory
-      text={join('# Typewriter', '', content.paragraphs, content.footer)}
-      extensions={[typewriter({ items: typewriterItems })]}
+      text={join('# Snippets', '', content.paragraphs, content.footer)}
+      extensions={[snippets({ items: snippetItems })]}
     />
   ),
 };
@@ -50,7 +50,7 @@ export const Blast: Story = {
     <EditorStory
       text={join('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
       extensions={[
-        typewriter({ items: typewriterItems }),
+        snippets({ items: snippetItems }),
         blast(
           defaultsDeep(
             {

package/src/stories/components/util.tsx

@@ -9,7 +9,6 @@ import { random } from '@dxos/random';
 import { Domino } from '@dxos/ui';
 import {
   type EditorSelectionState,
-  type RenderCallback,
   decorateMarkdown,
   folding,
   formattingKeymap,
@@ -17,6 +16,7 @@ import {
   linkTooltip,
   table,
 } from '@dxos/ui-editor';
+import { type RenderCallback } from '@dxos/ui-editor/types';
 import { safeUrl } from '@dxos/util';
 
 import { str } from '../../util';
@@ -206,7 +206,7 @@ export const links: Completion[] = [
 export const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
 
 const hover =
-  'rounded-xs text-base-surface-text text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
+  'rounded-xs text-base-foreground text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
 
 export const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
   el.appendChild(

package/src/util/react.tsx

@@ -6,7 +6,7 @@ import React, { type FC } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { ThemeProvider, Tooltip } from '@dxos/react-ui';
-import { type RenderCallback } from '@dxos/ui-editor';
+import { type RenderCallback } from '@dxos/ui-editor/types';
 import { defaultTx } from '@dxos/ui-theme';
 
 /**