@dxos/react-ui-editor 0.8.4-main.72ec0f3 → 0.8.4-main.7ace549

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.72ec0f3",
-  "description": "Document editing experience within a DXOS shell.",
+  "version": "0.8.4-main.7ace549",
+  "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
@@ -66,23 +66,24 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.4-main.72ec0f3",
-    "@dxos/context": "0.8.4-main.72ec0f3",
-    "@dxos/debug": "0.8.4-main.72ec0f3",
-    "@dxos/display-name": "0.8.4-main.72ec0f3",
-    "@dxos/client": "0.8.4-main.72ec0f3",
-    "@dxos/echo": "0.8.4-main.72ec0f3",
-    "@dxos/invariant": "0.8.4-main.72ec0f3",
-    "@dxos/lit-ui": "0.8.4-main.72ec0f3",
-    "@dxos/async": "0.8.4-main.72ec0f3",
-    "@dxos/log": "0.8.4-main.72ec0f3",
-    "@dxos/protocols": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-menu": "0.8.4-main.72ec0f3",
-    "@dxos/react-hooks": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-stack": "0.8.4-main.72ec0f3",
-    "@dxos/util": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-types": "0.8.4-main.72ec0f3",
-    "@dxos/live-object": "0.8.4-main.72ec0f3"
+    "@dxos/async": "0.8.4-main.7ace549",
+    "@dxos/context": "0.8.4-main.7ace549",
+    "@dxos/app-graph": "0.8.4-main.7ace549",
+    "@dxos/debug": "0.8.4-main.7ace549",
+    "@dxos/display-name": "0.8.4-main.7ace549",
+    "@dxos/echo": "0.8.4-main.7ace549",
+    "@dxos/echo-db": "0.8.4-main.7ace549",
+    "@dxos/lit-ui": "0.8.4-main.7ace549",
+    "@dxos/live-object": "0.8.4-main.7ace549",
+    "@dxos/invariant": "0.8.4-main.7ace549",
+    "@dxos/log": "0.8.4-main.7ace549",
+    "@dxos/protocols": "0.8.4-main.7ace549",
+    "@dxos/react-hooks": "0.8.4-main.7ace549",
+    "@dxos/react-ui-menu": "0.8.4-main.7ace549",
+    "@dxos/react-ui-stack": "0.8.4-main.7ace549",
+    "@dxos/util": "0.8.4-main.7ace549",
+    "@dxos/react-ui-types": "0.8.4-main.7ace549",
+    "@dxos/client": "0.8.4-main.7ace549"
   },
   "devDependencies": {
     "@automerge/automerge": "3.1.2",
@@ -110,19 +111,19 @@
     "vite": "7.1.9",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.5.0",
-    "@dxos/config": "0.8.4-main.72ec0f3",
-    "@dxos/echo-signals": "0.8.4-main.72ec0f3",
-    "@dxos/keyboard": "0.8.4-main.72ec0f3",
-    "@dxos/random": "0.8.4-main.72ec0f3",
-    "@dxos/react-client": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui": "0.8.4-main.72ec0f3",
-    "@dxos/echo": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-attention": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-stack": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.72ec0f3",
-    "@dxos/storybook-utils": "0.8.4-main.72ec0f3",
-    "@dxos/schema": "0.8.4-main.72ec0f3"
+    "@dxos/config": "0.8.4-main.7ace549",
+    "@dxos/echo-signals": "0.8.4-main.7ace549",
+    "@dxos/keyboard": "0.8.4-main.7ace549",
+    "@dxos/random": "0.8.4-main.7ace549",
+    "@dxos/echo": "0.8.4-main.7ace549",
+    "@dxos/react-ui-attention": "0.8.4-main.7ace549",
+    "@dxos/react-ui": "0.8.4-main.7ace549",
+    "@dxos/react-ui-stack": "0.8.4-main.7ace549",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.7ace549",
+    "@dxos/react-ui-theme": "0.8.4-main.7ace549",
+    "@dxos/react-client": "0.8.4-main.7ace549",
+    "@dxos/schema": "0.8.4-main.7ace549",
+    "@dxos/storybook-utils": "0.8.4-main.7ace549"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.3.4",
@@ -130,9 +131,9 @@
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.72ec0f3",
-    "@dxos/react-client": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.72ec0f3"
+    "@dxos/react-client": "0.8.4-main.7ace549",
+    "@dxos/react-ui": "0.8.4-main.7ace549",
+    "@dxos/react-ui-theme": "0.8.4-main.7ace549"
   },
   "publishConfig": {
     "access": "public"

package/src/components/EditorContent/EditorContent.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 import { useMemo } from 'react';
 
-import { createDocAccessor, createObject } from '@dxos/client/echo';
+import { createDocAccessor, createObject } from '@dxos/echo-db';
 import { useThemeContext } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';

package/src/extensions/automerge/automerge.stories.tsx

@@ -10,7 +10,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useState } from 'react';
 
 import { Obj, Ref, Type } from '@dxos/echo';
-import { DocAccessor, Query, type Space, createDocAccessor, useQuery, useSpace } from '@dxos/react-client/echo';
+import { DocAccessor, createDocAccessor } from '@dxos/echo-db';
+import { Query, type Space, useQuery, useSpace } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
@@ -43,7 +44,7 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
       extensions: [
         createBasicExtensions({ placeholder: 'Type here...', search: true }),
         createThemeExtensions({ themeMode, slots: editorSlots }),
-        createDataExtensions({ id: 'test', text: source, space, identity }),
+        createDataExtensions({ id: 'test', text: source, messenger: space, identity }),
       ],
       autoFocus,
     }),

package/src/extensions/automerge/automerge.ts

@@ -8,7 +8,7 @@ import { next as A } from '@automerge/automerge';
 import { type Extension, StateField, Transaction } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { DocAccessor } from '@dxos/client/echo';
+import { DocAccessor } from '@dxos/echo-db';
 
 import { Cursor } from '../../util';
 import { initialSync } from '../state';

package/src/extensions/automerge/cursor.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type DocAccessor, fromCursor, toCursor } from '@dxos/client/echo';
+import { type DocAccessor, fromCursor, toCursor } from '@dxos/echo-db';
 import { log } from '@dxos/log';
 
 import { type CursorConverter } from '../../util';

package/src/extensions/automerge/sync.ts

@@ -8,7 +8,7 @@ import { next as A } from '@automerge/automerge';
 import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
-import { type IDocHandle } from '@dxos/client/echo';
+import { type IDocHandle } from '@dxos/echo-db';
 import { log } from '@dxos/log';
 
 import { type State, getLastHeads, getPath, isReconcile, reconcileAnnotation, updateHeads } from './defs';

package/src/extensions/automerge/update-automerge.ts

@@ -7,7 +7,7 @@
 import { next as A, type Heads } from '@automerge/automerge';
 import { type EditorState, type StateField, type Text, type Transaction } from '@codemirror/state';
 
-import { type IDocHandle } from '@dxos/client/echo';
+import { type IDocHandle } from '@dxos/echo-db';
 
 import { type State } from './defs';
 

package/src/extensions/awareness/awareness-provider.ts

@@ -3,11 +3,11 @@
 //
 
 import { DeferredTask, Event, sleep } from '@dxos/async';
-import { type Space } from '@dxos/client/echo';
-import { type GossipMessage } from '@dxos/client/mesh';
 import { Context } from '@dxos/context';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
+import { type Messenger } from '@dxos/protocols';
+import { type GossipMessage } from '@dxos/protocols/proto/dxos/mesh/teleport/gossip';
 
 import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from './awareness';
 
@@ -23,7 +23,7 @@ type ProtocolMessage =
 const DEBOUNCE_INTERVAL = 100; // ms
 
 export type AwarenessProviderParams = {
-  space: Space;
+  messenger: Messenger;
   channel: string;
   peerId: string;
   info: AwarenessInfo;
@@ -35,7 +35,7 @@ export type AwarenessProviderParams = {
 export class SpaceAwarenessProvider implements AwarenessProvider {
   private readonly _remoteStates = new Map<string, AwarenessState>();
 
-  private readonly _space: Space;
+  private readonly _messenger: Messenger;
   private readonly _channel: string;
   private readonly _peerId: string;
   private readonly _info: AwarenessInfo;
@@ -46,18 +46,18 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
 
   public readonly remoteStateChange = new Event<void>();
 
-  constructor(params: AwarenessProviderParams) {
-    this._space = params.space;
-    this._channel = params.channel;
-    this._peerId = params.peerId;
-    this._info = params.info;
+  constructor({ messenger, channel, peerId, info }: AwarenessProviderParams) {
+    this._messenger = messenger;
+    this._channel = channel;
+    this._peerId = peerId;
+    this._info = info;
   }
 
   open(): void {
     this._ctx = new Context();
     this._postTask = new DeferredTask(this._ctx, async () => {
       if (this._localState) {
-        await this._space.postMessage(this._channel, {
+        await this._messenger.postMessage(this._channel, {
           kind: 'post',
           state: this._localState,
         } satisfies ProtocolMessage);
@@ -69,7 +69,7 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
     });
 
     this._ctx.onDispose(
-      this._space.listen(this._channel, (message: GossipMessage) => {
+      this._messenger.listen(this._channel, (message: GossipMessage) => {
         switch (message.payload.kind) {
           case 'query': {
             this._handleQueryMessage();
@@ -83,7 +83,7 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
       }),
     );
 
-    void this._space
+    void this._messenger
       .postMessage(this._channel, {
         kind: 'query',
       } satisfies ProtocolMessage)

package/src/extensions/factories.ts

@@ -23,10 +23,11 @@ import { vscodeDarkStyle, vscodeLightStyle } from '@uiw/codemirror-theme-vscode'
 import defaultsDeep from 'lodash.defaultsdeep';
 import merge from 'lodash.merge';
 
-import { type DocAccessor, type Space } from '@dxos/client/echo';
-import { type Identity } from '@dxos/client/halo';
 import { generateName } from '@dxos/display-name';
+import { type DocAccessor } from '@dxos/echo-db';
 import { log } from '@dxos/log';
+import { type Messenger } from '@dxos/protocols';
+import { type Identity } from '@dxos/protocols/proto/dxos/client/services';
 import { type ThemeMode } from '@dxos/react-ui';
 import { type HuePalette } from '@dxos/react-ui-theme';
 import { hexToHue, isTruthy } from '@dxos/util';
@@ -44,7 +45,9 @@ import { focus } from './focus';
 
 export const filterChars = (chars: RegExp) => {
   return EditorState.transactionFilter.of((transaction) => {
-    if (!transaction.docChanged) return transaction;
+    if (!transaction.docChanged) {
+      return transaction;
+    }
 
     const changes: ChangeSpec[] = [];
     transaction.changes.iterChanges((fromA, toA, fromB, toB, text) => {
@@ -62,6 +65,7 @@ export const filterChars = (chars: RegExp) => {
     if (changes.length) {
       return [transaction, { changes, sequential: true } as TransactionSpec];
     }
+
     return transaction;
   });
 };
@@ -190,7 +194,7 @@ export type ThemeExtensionsOptions = {
 
 export const grow: ThemeExtensionsOptions['slots'] = {
   editor: {
-    className: 'is-full bs-full',
+    className: 'bs-full is-full',
   },
 } as const;
 
@@ -244,24 +248,24 @@ export const createThemeExtensions = ({
 export type DataExtensionsProps<T> = {
   id: string;
   text?: DocAccessor<T>;
-  space?: Space;
+  messenger?: Messenger;
   identity?: Identity | null;
 };
 
-// TODO(burdon): Move out of react-ui-editor (remove echo deps).
-export const createDataExtensions = <T>({ id, text, space, identity }: DataExtensionsProps<T>): Extension[] => {
+// TODO(burdon): Move out of react-ui-editor?
+export const createDataExtensions = <T>({ id, text, messenger, identity }: DataExtensionsProps<T>): Extension[] => {
   const extensions: Extension[] = [];
   if (text) {
     extensions.push(automerge(text));
   }
 
-  if (space && identity) {
+  if (messenger && identity) {
     const peerId = identity?.identityKey.toHex();
     const hue = (identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0');
     extensions.push(
       awareness(
         new SpaceAwarenessProvider({
-          space,
+          messenger,
           channel: `awareness.${id}`,
           peerId: identity.identityKey.toHex(),
           info: {

package/src/stories/Popover.stories.tsx

@@ -10,7 +10,7 @@ import { faker } from '@dxos/random';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { Domino } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
-import { Testing, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
+import { TestSchema, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
 
 import {
   type EditorController,
@@ -77,7 +77,7 @@ const LinkStory = (args: StoryProps) => {
       }
 
       const name = text?.startsWith('@') ? text.slice(1).toLowerCase() : (text?.toLowerCase() ?? '');
-      const result = await space?.db.query(Query.type(Testing.Person)).run();
+      const result = await space?.db.query(Query.type(TestSchema.Person)).run();
       const items = result.objects
         .filter((object) => object.name.toLowerCase().includes(name))
         .map(
@@ -143,11 +143,11 @@ export const Link: Story = {
     withClientProvider({
       createSpace: true,
       onInitialized: async (client) => {
-        client.addTypes([Testing.Person]);
+        client.addTypes([TestSchema.Person]);
       },
       onCreateSpace: async ({ space }) => {
         const createObjects = createObjectFactory(space.db, generator);
-        await createObjects([{ type: Testing.Person, count: 10 }]);
+        await createObjects([{ type: TestSchema.Person, count: 10 }]);
         await space.db.flush({ indexes: true });
       },
     }),

package/src/stories/components/EditorStory.tsx

@@ -3,11 +3,10 @@
 //
 
 import { type EditorView } from '@codemirror/view';
+import type * as Schema from 'effect/Schema';
 import React, { type ReactNode, forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 
-import { createDocAccessor, createObject } from '@dxos/client/echo';
-import { Expando } from '@dxos/echo/internal';
-import { live } from '@dxos/echo/internal';
+import { Obj, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
@@ -23,7 +22,6 @@ import {
   type DebugNode,
   type ThemeExtensionsOptions,
   createBasicExtensions,
-  createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   debugTree,
@@ -41,7 +39,8 @@ export type StoryProps = Pick<UseTextEditorProps, 'id' | 'scrollTo' | 'selection
     debug?: DebugMode;
     debugCustom?: (view: EditorView) => ReactNode;
     text?: string;
-    object?: Expando;
+    // TODO(wittjosiah): Find a simpler way to define this type.
+    object?: Obj.Obj<Schema.Schema.Type<typeof Type.Expando>>;
     readOnly?: boolean;
     placeholder?: string;
     lineNumbers?: boolean;
@@ -55,7 +54,7 @@ export const EditorStory = forwardRef<EditorController, StoryProps>(
 
     const attentionAttrs = useAttentionAttributes('test-panel');
     const [tree, setTree] = useState<DebugNode>();
-    const [object] = useState(createObject(live(Expando, { content: text ?? '' })));
+    const [object] = useState(Obj.make(Type.Expando, { content: text ?? '' }));
 
     const extensions = useMemo(
       () => (debug ? [extensionsParam, debugTree(setTree)].filter(isNonNullable) : extensionsParam),
@@ -118,7 +117,6 @@ export const EditorComponent = forwardRef<EditorController, StoryProps>(
         selection,
         initialValue: text,
         extensions: [
-          createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
           createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true, search: true }),
           createMarkdownExtensions(),
           createThemeExtensions({ themeMode, syntaxHighlighting: true, slots }),