@dxos/plugin-markdown 0.7.4 → 0.7.5-main.9cb18ac

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-markdown",
-  "version": "0.7.4",
+  "version": "0.7.5-main.9cb18ac",
   "description": "DXOS Surface plugin for interacting with Markdown",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -44,28 +44,29 @@
     "@codemirror/view": "^6.34.1",
     "@effect/schema": "^0.75.5",
     "@preact/signals-core": "^1.6.0",
-    "@dxos/app-framework": "0.7.4",
-    "@dxos/echo-schema": "0.7.4",
-    "@dxos/async": "0.7.4",
-    "@dxos/live-object": "0.7.4",
-    "@dxos/invariant": "0.7.4",
-    "@dxos/local-storage": "0.7.4",
-    "@dxos/log": "0.7.4",
-    "@dxos/plugin-client": "0.7.4",
-    "@dxos/plugin-attention": "0.7.4",
-    "@dxos/keys": "0.7.4",
-    "@dxos/plugin-graph": "0.7.4",
-    "@dxos/plugin-space": "0.7.4",
-    "@dxos/react-hooks": "0.7.4",
-    "@dxos/plugin-theme": "0.7.4",
-    "@dxos/react-client": "0.7.4",
-    "@dxos/react-ui-card": "0.7.4",
-    "@dxos/react-ui-attention": "0.7.4",
-    "@dxos/react-ui-editor": "0.7.4",
-    "@dxos/react-ui-form": "0.7.4",
-    "@dxos/react-ui-stack": "0.7.4",
-    "@dxos/util": "0.7.4",
-    "@dxos/react-ui-mosaic": "0.7.4"
+    "effect": "^3.12.1",
+    "@dxos/app-framework": "0.7.5-main.9cb18ac",
+    "@dxos/echo-schema": "0.7.5-main.9cb18ac",
+    "@dxos/async": "0.7.5-main.9cb18ac",
+    "@dxos/invariant": "0.7.5-main.9cb18ac",
+    "@dxos/keys": "0.7.5-main.9cb18ac",
+    "@dxos/live-object": "0.7.5-main.9cb18ac",
+    "@dxos/local-storage": "0.7.5-main.9cb18ac",
+    "@dxos/log": "0.7.5-main.9cb18ac",
+    "@dxos/plugin-client": "0.7.5-main.9cb18ac",
+    "@dxos/plugin-attention": "0.7.5-main.9cb18ac",
+    "@dxos/plugin-space": "0.7.5-main.9cb18ac",
+    "@dxos/plugin-graph": "0.7.5-main.9cb18ac",
+    "@dxos/plugin-theme": "0.7.5-main.9cb18ac",
+    "@dxos/react-client": "0.7.5-main.9cb18ac",
+    "@dxos/react-ui-card": "0.7.5-main.9cb18ac",
+    "@dxos/react-hooks": "0.7.5-main.9cb18ac",
+    "@dxos/react-ui-editor": "0.7.5-main.9cb18ac",
+    "@dxos/react-ui-form": "0.7.5-main.9cb18ac",
+    "@dxos/react-ui-stack": "0.7.5-main.9cb18ac",
+    "@dxos/react-ui-mosaic": "0.7.5-main.9cb18ac",
+    "@dxos/util": "0.7.5-main.9cb18ac",
+    "@dxos/react-ui-attention": "0.7.5-main.9cb18ac"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -74,17 +75,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.7.4",
-    "@dxos/react-ui-theme": "0.7.4",
-    "@dxos/storybook-utils": "0.7.4",
-    "@dxos/react-ui": "0.7.4"
+    "@dxos/random": "0.7.5-main.9cb18ac",
+    "@dxos/storybook-utils": "0.7.5-main.9cb18ac",
+    "@dxos/react-ui-theme": "0.7.5-main.9cb18ac",
+    "@dxos/react-ui": "0.7.5-main.9cb18ac"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.4",
-    "@dxos/react-ui-theme": "0.7.4"
+    "@dxos/react-ui": "0.7.5-main.9cb18ac",
+    "@dxos/react-ui-theme": "0.7.5-main.9cb18ac"
   },
   "publishConfig": {
     "access": "public"

package/src/MarkdownPlugin.tsx

@@ -2,27 +2,27 @@
 // Copyright 2023 DXOS.org
 //
 
-import { TextAa } from '@phosphor-icons/react';
+import { pipe } from 'effect';
 import React from 'react';
 
-import { parseIntentPlugin, resolvePlugin, NavigationAction, type PluginDefinition } from '@dxos/app-framework';
-import { create } from '@dxos/live-object';
+import {
+  parseIntentPlugin,
+  resolvePlugin,
+  type PluginDefinition,
+  createSurface,
+  createResolver,
+  createIntent,
+  chain,
+} from '@dxos/app-framework';
+import type { BaseObject } from '@dxos/echo-schema';
+import { create, makeRef, RefArray } from '@dxos/live-object';
 import { LocalStorageStore } from '@dxos/local-storage';
-import { parseClientPlugin } from '@dxos/plugin-client';
-import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
 import { SpaceAction } from '@dxos/plugin-space';
 import { CollectionType } from '@dxos/plugin-space/types';
-import {
-  createDocAccessor,
-  fullyQualifiedId,
-  getRangeFromCursor,
-  isSpace,
-  loadObjectReferences,
-} from '@dxos/react-client/echo';
+import { createDocAccessor, fullyQualifiedId, getRangeFromCursor, isSpace } from '@dxos/react-client/echo';
 import {
   type EditorInputMode,
   type EditorViewMode,
-  EditorViewModes,
   translations as editorTranslations,
   createEditorStateStore,
 } from '@dxos/react-ui-editor';
@@ -39,9 +39,6 @@ import {
 } from './types';
 import { markdownExtensionPlugins, serializer } from './util';
 
-// TODO(burdon): Normalize active/object.
-const getDoc = (object: any) => (object instanceof DocumentType ? object : undefined);
-
 export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
   const settings = new LocalStorageStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN, {
     defaultViewMode: 'preview',
@@ -60,7 +57,7 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
 
   return {
     meta,
-    ready: async (plugins) => {
+    ready: async ({ plugins }) => {
       settings
         .prop({ key: 'defaultViewMode', type: LocalStorageStore.enum<EditorViewMode>() })
         .prop({ key: 'editorInputMode', type: LocalStorageStore.enum<EditorInputMode>({ allowUndefined: true }) })
@@ -83,7 +80,7 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
       metadata: {
         records: {
           [DocumentType.typename]: {
-            createObject: MarkdownAction.CREATE,
+            createObject: (props: { name?: string }) => createIntent(MarkdownAction.Create, props),
             label: (object: any) => (object instanceof DocumentType ? object.name || object.fallbackName : undefined),
             placeholder: ['document title placeholder', { ns: MARKDOWN_PLUGIN }],
             icon: 'ph--text-aa--regular',
@@ -91,7 +88,8 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
               managesAutofocus: true,
             },
             // TODO(wittjosiah): Move out of metadata.
-            loadReferences: (doc: DocumentType) => loadObjectReferences(doc, (doc) => [doc.content, ...doc.threads]),
+            loadReferences: async (doc: DocumentType) =>
+              await RefArray.loadAll<BaseObject>([doc.content, ...doc.threads]),
             serializer,
           },
         },
@@ -102,48 +100,8 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
         system: [TextType],
       },
       graph: {
-        builder: (plugins) => {
-          const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
-          if (!client || !dispatch) {
-            return [];
-          }
-
-          return createExtension({
-            id: MarkdownAction.CREATE,
-            filter: (node): node is ActionGroup => isActionGroup(node) && node.id.startsWith(SpaceAction.ADD_OBJECT),
-            actions: ({ node }) => {
-              const id = node.id.split('/').at(-1);
-              const [spaceId, objectId] = id?.split(':') ?? [];
-              const space = client.spaces.get().find((space) => space.id === spaceId);
-              const object = objectId && space?.db.getObjectById(objectId);
-              const target = objectId ? object : space;
-              if (!target) {
-                return;
-              }
-
-              return [
-                {
-                  id: `${MARKDOWN_PLUGIN}/create/${node.id}`,
-                  data: async () => {
-                    await dispatch([
-                      { plugin: MARKDOWN_PLUGIN, action: MarkdownAction.CREATE },
-                      { action: SpaceAction.ADD_OBJECT, data: { target } },
-                      { action: NavigationAction.OPEN },
-                    ]);
-                  },
-                  properties: {
-                    label: ['create document label', { ns: MARKDOWN_PLUGIN }],
-                    icon: 'ph--text-aa--regular',
-                    testId: 'markdownPlugin.createObject',
-                  },
-                },
-              ];
-            },
-          });
-        },
         serializer: (plugins) => {
-          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
+          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatchPromise;
           if (!dispatch) {
             return [];
           }
@@ -155,7 +113,7 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
               // Reconcile with metadata serializers.
               serialize: async (node) => {
                 const doc = node.data;
-                const content = await loadObjectReferences(doc, (doc) => doc.content);
+                const content = await doc.content.load();
                 return {
                   name:
                     doc.name ||
@@ -169,48 +127,28 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
                 const space = ancestors.find(isSpace);
                 const target =
                   ancestors.findLast((ancestor) => ancestor instanceof CollectionType) ??
-                  space?.properties[CollectionType.typename];
+                  space?.properties[CollectionType.typename]?.target;
                 if (!space || !target) {
                   return;
                 }
 
-                const result = await dispatch([
-                  {
-                    plugin: MARKDOWN_PLUGIN,
-                    action: MarkdownAction.CREATE,
-                    data: { name: data.name, content: data.data },
-                  },
-                  {
-                    action: SpaceAction.ADD_OBJECT,
-                    data: { target },
-                  },
-                ]);
+                const result = await dispatch(
+                  pipe(
+                    createIntent(MarkdownAction.Create, { name: data.name, content: data.data }),
+                    chain(SpaceAction.AddObject, { target }),
+                  ),
+                );
 
-                return result?.data.object;
+                return result.data?.object;
               },
             },
           ];
         },
       },
-      stack: {
-        creators: [
-          {
-            id: 'create-stack-section-doc',
-            testId: 'markdownPlugin.createSection',
-            type: ['plugin name', { ns: MARKDOWN_PLUGIN }],
-            label: ['create stack section label', { ns: MARKDOWN_PLUGIN }],
-            icon: (props: any) => <TextAa {...props} />,
-            intent: {
-              plugin: MARKDOWN_PLUGIN,
-              action: MarkdownAction.CREATE,
-            },
-          },
-        ],
-      },
       thread: {
         predicate: (obj) => obj instanceof DocumentType,
         createSort: (doc: DocumentType) => {
-          const accessor = doc.content ? createDocAccessor(doc.content, ['content']) : undefined;
+          const accessor = doc.content.target ? createDocAccessor(doc.content.target, ['content']) : undefined;
           if (!accessor) {
             return (_) => 0;
           }
@@ -231,67 +169,64 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
         },
       },
       surface: {
-        component: ({ data, role }) => {
-          switch (role) {
-            case 'section':
-            case 'article': {
-              const doc = getDoc(data.object);
-              const { id, object } = isEditorModel(data.object)
-                ? { id: data.object.id, object: data.object }
-                : doc
-                  ? { id: fullyQualifiedId(doc), object: doc }
-                  : {};
-
-              if (!id || !object) {
-                return null;
-              }
-
-              return (
-                <MarkdownContainer
-                  id={id}
-                  object={object}
-                  role={role}
-                  settings={settings.values}
-                  extensionProviders={state.values.extensionProviders}
-                  viewMode={getViewMode(id)}
-                  editorStateStore={editorStateStore}
-                  onViewModeChange={setViewMode}
-                />
-              );
-            }
-
-            case 'settings': {
-              return data.plugin === meta.id ? <MarkdownSettings settings={settings.values} /> : null;
-            }
-          }
-
-          return null;
-        },
+        definitions: () => [
+          createSurface({
+            id: `${MARKDOWN_PLUGIN}/document`,
+            role: ['article', 'section'],
+            filter: (data): data is { subject: DocumentType } => data.subject instanceof DocumentType,
+            component: ({ data, role }) => (
+              <MarkdownContainer
+                id={fullyQualifiedId(data.subject)}
+                object={data.subject}
+                role={role}
+                settings={settings.values}
+                extensionProviders={state.values.extensionProviders}
+                viewMode={getViewMode(fullyQualifiedId(data.subject))}
+                editorStateStore={editorStateStore}
+                onViewModeChange={setViewMode}
+              />
+            ),
+          }),
+          createSurface({
+            id: `${MARKDOWN_PLUGIN}/editor`,
+            role: ['article', 'section'],
+            filter: (data): data is { subject: { id: string; text: string } } => isEditorModel(data.subject),
+            component: ({ data, role }) => (
+              <MarkdownContainer
+                id={data.subject.id}
+                object={data.subject}
+                role={role}
+                settings={settings.values}
+                extensionProviders={state.values.extensionProviders}
+                viewMode={getViewMode(data.subject.id)}
+                editorStateStore={editorStateStore}
+                onViewModeChange={setViewMode}
+              />
+            ),
+          }),
+          createSurface({
+            id: `${MARKDOWN_PLUGIN}/settings`,
+            role: 'settings',
+            filter: (data): data is any => data.subject === MARKDOWN_PLUGIN,
+            component: () => <MarkdownSettings settings={settings.values} />,
+          }),
+        ],
       },
       intent: {
-        resolver: ({ action, data }) => {
-          switch (action) {
-            case MarkdownAction.CREATE: {
-              const doc = create(DocumentType, {
-                name: data?.name,
-                content: create(TextType, { content: data?.content ?? '' }),
-                threads: [],
-              });
-
-              return { data: doc };
-            }
-
-            case MarkdownAction.SET_VIEW_MODE: {
-              const { id, viewMode } = data ?? {};
-              if (typeof id === 'string' && EditorViewModes.includes(viewMode)) {
-                state.values.viewMode[id] = viewMode;
-                return { data: true };
-              }
-
-              break;
-            }
-          }
-        },
+        resolvers: () => [
+          createResolver(MarkdownAction.Create, ({ name, content }) => {
+            const doc = create(DocumentType, {
+              name,
+              content: makeRef(create(TextType, { content: content ?? '' })),
+              threads: [],
+            });
+
+            return { data: { object: doc } };
+          }),
+          createResolver(MarkdownAction.SetViewMode, ({ id, viewMode }) => {
+            state.values.viewMode[id] = viewMode;
+          }),
+        ],
       },
     },
   };

package/src/components/MarkdownContainer.tsx

@@ -77,8 +77,13 @@ export const DocumentEditor = ({ id, document: doc, settings, viewMode, ...props
 
   // Migrate gradually to `fallbackName`.
   useEffect(() => {
-    if (!doc.fallbackName && doc.content?.content) {
-      doc.fallbackName = getFallbackName(doc.content.content);
+    if (typeof doc.fallbackName === 'string') {
+      return;
+    }
+
+    const fallbackName = doc.content?.target?.content ? getFallbackName(doc.content.target.content) : undefined;
+    if (fallbackName) {
+      doc.fallbackName = fallbackName;
     }
   }, [doc, doc.content]);
 
@@ -96,7 +101,7 @@ export const DocumentEditor = ({ id, document: doc, settings, viewMode, ...props
   return (
     <MarkdownEditor
       id={id}
-      initialValue={doc.content?.content}
+      initialValue={doc.content?.target?.content}
       viewMode={viewMode}
       toolbar={settings.toolbar}
       inputMode={settings.editorInputMode}

package/src/components/MarkdownEditor.tsx

@@ -6,7 +6,7 @@ import { openSearchPanel } from '@codemirror/search';
 import { type EditorView } from '@codemirror/view';
 import React, { useMemo, useEffect, useCallback } from 'react';
 
-import { type FileInfo, LayoutAction, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, type FileInfo, LayoutAction, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
 import { useThemeContext, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
@@ -75,7 +75,7 @@ export const MarkdownEditor = ({
 }: MarkdownEditorProps) => {
   const { t } = useTranslation(MARKDOWN_PLUGIN);
   const { themeMode } = useThemeContext();
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const [formattingState, formattingObserver] = useFormattingState();
   const { hasAttention } = useAttention(id);
 
@@ -91,17 +91,9 @@ export const MarkdownEditor = ({
 
   // TODO(Zan): Move these into thread plugin as well?
   const [commentsState, commentObserver] = useCommentState();
-  const onCommentClick = useCallback(() => {
-    void dispatch([
-      {
-        action: NavigationAction.OPEN,
-        data: { activeParts: { complementary: 'comments' } },
-      },
-      {
-        action: LayoutAction.SET_LAYOUT,
-        data: { element: 'complementary', state: true },
-      },
-    ]);
+  const onCommentClick = useCallback(async () => {
+    await dispatch(createIntent(NavigationAction.Open, { activeParts: { complementary: 'comments' } }));
+    await dispatch(createIntent(LayoutAction.SetLayout, { element: 'complementary', state: true }));
   }, [dispatch]);
   const commentClickObserver = useCommentClickListener(onCommentClick);
 

package/src/extensions.tsx

@@ -5,7 +5,7 @@
 import React, { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { type IntentDispatcher, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, NavigationAction, type PromiseIntentDispatcher, useIntentDispatcher } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { createDocAccessor, fullyQualifiedId, getSpace, type Query } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
@@ -34,7 +34,7 @@ import { setFallbackName } from './util';
 
 type ExtensionsOptions = {
   document?: DocumentType;
-  dispatch?: IntentDispatcher;
+  dispatch?: PromiseIntentDispatcher;
   query?: Query<DocumentType>;
   settings: MarkdownSettingsProps;
   viewMode?: EditorViewMode;
@@ -49,7 +49,7 @@ export const useExtensions = ({
   editorStateStore,
   extensionProviders,
 }: ExtensionsOptions & Pick<MarkdownPluginState, 'extensionProviders'>): Extension[] => {
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const identity = useIdentity();
   const space = getSpace(document);
 
@@ -105,7 +105,7 @@ export const useExtensions = ({
         document &&
           createDataExtensions({
             id: document.id,
-            text: document.content && createDocAccessor(document.content, ['content']),
+            text: document.content.target && createDocAccessor(document.content.target, ['content']),
             space,
             identity,
           }),
@@ -117,7 +117,7 @@ export const useExtensions = ({
         baseExtensions,
         pluginExtensions,
       ].filter(isNotFalsy),
-    [baseExtensions, pluginExtensions, document, document?.content, space, identity],
+    [baseExtensions, pluginExtensions, document, document?.content?.target, space, identity],
   );
 };
 
@@ -144,15 +144,14 @@ const createBaseExtensions = ({ document, dispatch, settings, query, viewMode }:
           renderLinkButton:
             dispatch && document
               ? onRenderLink((id: string) => {
-                  void dispatch({
-                    action: NavigationAction.ADD_TO_ACTIVE,
-                    data: {
+                  void dispatch(
+                    createIntent(NavigationAction.AddToActive, {
                       id,
                       part: 'main',
                       pivotId: fullyQualifiedId(document),
                       scrollIntoView: true,
-                    },
-                  });
+                    }),
+                  );
                 })
               : undefined,
         }),

package/src/hooks/useSelectCurrentThread.tsx

@@ -3,9 +3,10 @@
 //
 
 import { EditorView } from '@codemirror/view';
-import { useCallback } from 'react';
+import { useMemo } from 'react';
 
-import { LayoutAction, useIntentResolver } from '@dxos/app-framework';
+import { createResolver, LayoutAction, useIntentResolver } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
 import { Cursor, setSelection } from '@dxos/react-ui-editor';
 
 import { MARKDOWN_PLUGIN } from '../meta';
@@ -14,12 +15,13 @@ import { MARKDOWN_PLUGIN } from '../meta';
  * Handle scrolling and selection of the current thread in a markdown editor.
  */
 export const useSelectCurrentThread = (editorView: EditorView | undefined, documentId: string) => {
-  const handleScrollIntoView = useCallback(
-    ({ action, data }: { action: string; data?: any }) => {
-      if (action === LayoutAction.SCROLL_INTO_VIEW) {
-        if (editorView && data?.id === documentId && data?.cursor) {
-          // TODO(burdon): We need typed intents.
-          const range = Cursor.getRangeFromCursor(editorView.state, data.cursor);
+  const scrollIntoViewResolver = useMemo(
+    () =>
+      createResolver(
+        LayoutAction.ScrollIntoView,
+        ({ cursor }) => {
+          invariant(editorView, 'Editor view is not defined.');
+          const range = Cursor.getRangeFromCursor(editorView.state, cursor!);
           if (range) {
             const selection = editorView.state.selection.main.from !== range.from ? { anchor: range.from } : undefined;
             const effects = [
@@ -35,14 +37,15 @@ export const useSelectCurrentThread = (editorView: EditorView | undefined, docum
               effects,
               selection: selection ? { anchor: range.from } : undefined,
             });
-
-            return { data: true };
           }
-        }
-      }
-    },
+        },
+        {
+          disposition: 'hoist',
+          filter: (data) => !!editorView && data.id === documentId && !!data.cursor,
+        },
+      ),
     [documentId, editorView],
   );
 
-  useIntentResolver(MARKDOWN_PLUGIN, handleScrollIntoView);
+  useIntentResolver(MARKDOWN_PLUGIN, scrollIntoViewResolver);
 };

package/src/types/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './document';
+export * from './schema';
 export * from './types';

package/src/types/{document.ts → schema.ts}

@@ -2,9 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { ref, S, TypedObject } from '@dxos/echo-schema';
+import { Ref, S, TypedObject } from '@dxos/echo-schema';
 import { ThreadType } from '@dxos/plugin-space/types';
 
+// TODO(burdon): Factor out.
 export class TextType extends TypedObject({ typename: 'dxos.org/type/Text', version: '0.1.0' })({
   content: S.String,
 }) {}
@@ -12,8 +13,8 @@ export class TextType extends TypedObject({ typename: 'dxos.org/type/Text', vers
 export class DocumentType extends TypedObject({ typename: 'dxos.org/type/Document', version: '0.1.0' })({
   name: S.optional(S.String),
   fallbackName: S.optional(S.String),
-  content: ref(TextType),
-  threads: S.mutable(S.Array(ref(ThreadType))),
+  content: Ref(TextType),
+  threads: S.mutable(S.Array(Ref(ThreadType))),
 }) {}
 
 /**