@dxos/plugin-markdown 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/src/components/Suggestions.stories.tsx

@@ -3,39 +3,34 @@
 //
 
 import { type Meta } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import * as Function from 'effect/Function';
 import * as Match from 'effect/Match';
 import * as Option from 'effect/Option';
 import * as Schema from 'effect/Schema';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
 
-import { Capabilities, IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
-import { useCapability, useIntentDispatcher } from '@dxos/app-framework/react';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { useAtomCapability, useCapability } from '@dxos/app-framework/ui';
 import { Obj, Ref, Type } from '@dxos/echo';
 import { createDocAccessor, toCursorRange } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
 import { ClientPlugin } from '@dxos/plugin-client';
-import { GraphPlugin } from '@dxos/plugin-graph';
 import { PreviewPlugin } from '@dxos/plugin-preview';
-import { SpacePlugin } from '@dxos/plugin-space';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
 import { useQueue, useSpace } from '@dxos/react-client/echo';
 import { IconButton, Toolbar } from '@dxos/react-ui';
+import { Layout } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
-import { type EditorSelection, type Range, useTextEditor } from '@dxos/react-ui-editor';
-import { StackItem } from '@dxos/react-ui-stack';
-import { defaultTx } from '@dxos/react-ui-theme';
+import { useTextEditor } from '@dxos/react-ui-editor';
 import { render } from '@dxos/storybook-utils';
 import { Message } from '@dxos/types';
+import { type EditorSelection, type Range } from '@dxos/ui-editor';
 
-import { MarkdownCapabilities } from '../capabilities';
 import { MarkdownPlugin } from '../MarkdownPlugin';
-import { meta } from '../meta';
 import { translations } from '../translations';
-import { Markdown } from '../types';
+import { Markdown, MarkdownCapabilities } from '../types';
 
 import { MarkdownContainer } from './MarkdownContainer';
 
@@ -51,16 +46,15 @@ const TestItem = Schema.Struct({
     description: 'Product description',
   }),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/Test',
     version: '0.1.0',
   }),
 );
 
 const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, content }) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { parentRef } = useTextEditor({ initialValue: content });
-  const { editorState } = useCapability(MarkdownCapabilities.State);
+  const editorState = useCapability(MarkdownCapabilities.EditorState);
 
   const space = useSpace();
   const queueDxn = useMemo(() => space && space.queues.create().dxn, [space]);
@@ -96,7 +90,7 @@ const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, conten
 
     // void dispatch(
     //   createIntent(CollaborationActions.InsertContent, {
-    //     target: doc as any as Type.Expando,
+    //     target: doc as any as TestSchema.Expando,
     //     object: Ref.fromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
     //     at: cursor,
     //     label: 'Proposal',
@@ -105,20 +99,20 @@ const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, conten
   };
 
   return (
-    <StackItem.Content toolbar>
+    <Layout.Main toolbar>
       <Toolbar.Root>
         <IconButton icon='ph--plus--regular' disabled={!queue} label='Insert' onClick={handleInsert} />
       </Toolbar.Root>
       <div ref={parentRef} className='p-4' />
-    </StackItem.Content>
+    </Layout.Main>
   );
 };
 
 const DefaultStory = ({ document, chat }: { document: string; chat: string }) => {
   const space = useSpace();
   const [doc, setDoc] = useState<Markdown.Document>();
-  const settings = useCapability(Capabilities.SettingsStore).getStore<Markdown.Settings>(meta.id)!.value;
-  const { editorState } = useCapability(MarkdownCapabilities.State);
+  const settings = useAtomCapability(MarkdownCapabilities.Settings);
+  const editorState = useCapability(MarkdownCapabilities.EditorState);
 
   useEffect(() => {
     if (!space) {
@@ -148,10 +142,9 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
     return null;
   }
 
-  // TODO(burdon): Layout issue.
   return (
     <div className='grid grid-cols-2 bs-full overflow-hidden'>
-      <MarkdownContainer id={doc.id} object={doc} settings={settings} editorStateStore={editorState} />
+      <MarkdownContainer id={doc.id} subject={doc} settings={settings} editorStateStore={editorState} />
       <TestChat doc={doc} content={chat} />
     </div>
   );
@@ -161,25 +154,21 @@ const storybook: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-markdown/Suggestions',
   render: render(DefaultStory),
   decorators: [
-    withTheme,
+    withTheme(),
     withPluginManager({
       plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
         ClientPlugin({
           types: [Markdown.Document, TestItem],
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+            }),
         }),
-        SpacePlugin({}),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
 
-        // UI
-        ThemePlugin({ tx: defaultTx }),
         MarkdownPlugin(),
         PreviewPlugin(),
-        StorybookLayoutPlugin({}),
       ],
     }),
   ],

package/src/hooks/useEditorMenuOptions.ts

@@ -5,7 +5,7 @@
 import { type EditorView } from '@codemirror/view';
 import { useCallback, useMemo, useRef } from 'react';
 
-import { Domino, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 import {
   type EditorMenuGroup,
   type UseEditorMenuProps,
@@ -13,6 +13,7 @@ import {
   formattingCommands,
   linkSlashCommands,
 } from '@dxos/react-ui-editor';
+import { Domino } from '@dxos/ui';
 
 import { meta } from '../meta';
 
@@ -52,18 +53,14 @@ export const useEditorMenuOptions = ({
     const trigger = onLinkQuery ? ['/', '@'] : ['/'];
     const placeholder = {
       delay: 3_000,
-      content: () =>
-        Domino.of('div')
-          .children(
-            Domino.of('span').text('Press'),
-            ...trigger.map((text) =>
-              Domino.of('span')
-                .classNames('mx-1 pli-1.5 pt-[1px] pb-[2px] border border-separator rounded-sm')
-                .text(text),
-            ),
-            Domino.of('span').text('for commands.'),
-          )
-          .build(),
+      content: () => {
+        const pressEl = Domino.of('span').text('Press');
+        const triggerEls = trigger.map((text) =>
+          Domino.of('span').classNames('mx-1 pli-1.5 pt-[1px] pb-[2px] border border-separator rounded-sm').text(text),
+        );
+        const forCommandsEl = Domino.of('span').text('for commands.');
+        return Domino.of('div').children(pressEl, ...triggerEls, forCommandsEl).root;
+      },
     };
 
     return { viewRef, getMenu, trigger, placeholder };

package/src/hooks/useExtensions.tsx

@@ -6,16 +6,18 @@ import { type ViewUpdate } from '@codemirror/view';
 import React, { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { LayoutAction, type PromiseIntentDispatcher, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { type Capabilities } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { debounceAndThrottle } from '@dxos/async';
 import { Obj } from '@dxos/echo';
 import { createDocAccessor } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
-import { getSpace } from '@dxos/react-client/echo';
+import { getSpace, useObject } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Icon, ThemeProvider } from '@dxos/react-ui';
 import { type SelectionManager } from '@dxos/react-ui-attention';
+import { Text } from '@dxos/schema';
 import {
   Cursor,
   type EditorStateStore,
@@ -36,9 +38,8 @@ import {
   replacer,
   selectionState,
   typewriter,
-} from '@dxos/react-ui-editor';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { Text } from '@dxos/schema';
+} from '@dxos/ui-editor';
+import { defaultTx } from '@dxos/ui-theme';
 import { isTruthy } from '@dxos/util';
 
 import { Markdown } from '../types';
@@ -49,7 +50,7 @@ export type DocumentType = Markdown.Document | Text.Text | { id: string; text: s
 export type ExtensionsOptions = {
   id: string;
   object?: DocumentType;
-  dispatch?: PromiseIntentDispatcher;
+  invokePromise?: Capabilities.OperationInvoker['invokePromise'];
   settings?: Markdown.Settings;
   selectionManager?: SelectionManager;
   viewMode?: EditorViewMode;
@@ -67,16 +68,16 @@ export const useExtensions = ({
   editorStateStore,
   previewOptions,
 }: ExtensionsOptions): Extension[] => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const identity = useIdentity();
   const space = getSpace(object);
 
-  let target: Obj.Any | undefined;
-  if (Obj.instanceOf(Markdown.Document, object)) {
-    target = (object as Markdown.Document).content.target;
-  } else if (Obj.instanceOf(Text.Text, object)) {
-    target = object;
-  }
+  // Get the content reference from Document objects.
+  const contentRef = Obj.instanceOf(Markdown.Document, object) ? (object as Markdown.Document).content : undefined;
+  // Use useObject to trigger re-render when the reference loads (returns snapshot for reactivity).
+  useObject(contentRef);
+  // Get the actual live object target via .target (needed for createDocAccessor).
+  const target = contentRef?.target ?? (Obj.instanceOf(Text.Text, object) ? object : undefined);
 
   // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
   // TODO(burdon): Unsubscribe.
@@ -92,13 +93,13 @@ export const useExtensions = ({
         selectionManager,
         viewMode,
         previewOptions,
-        dispatch,
+        invokePromise,
       }),
     [
       id,
       object,
       viewMode,
-      dispatch,
+      invokePromise,
       previewOptions,
       settings,
       settings?.debug,
@@ -144,7 +145,7 @@ export const useExtensions = ({
 const createBaseExtensions = ({
   id,
   object,
-  dispatch,
+  invokePromise,
   settings,
   selectionManager,
   viewMode,
@@ -169,17 +170,12 @@ const createBaseExtensions = ({
           // TODO(wittjosiah): For internal links, consider ignoring the link text and rendering the label of the object being linked to.
           // TODO(burdon): Create dx-tag.
           renderLinkButton:
-            dispatch && (object || id)
-              ? createLinkRenderer((id: string) => {
-                  void dispatch(
-                    createIntent(LayoutAction.Open, {
-                      part: 'main',
-                      subject: [id],
-                      options: {
-                        pivotId: object && Obj.isObject(object) ? Obj.getDXN(object).toString() : id,
-                      },
-                    }),
-                  );
+            invokePromise && (object || id)
+              ? createLinkRenderer((targetId: string) => {
+                  void invokePromise(LayoutOperation.Open, {
+                    subject: [targetId],
+                    pivotId: object && Obj.isObject(object) ? Obj.getDXN(object).toString() : id,
+                  });
                 })
               : undefined,
         }),

package/src/hooks/useLinkQuery.ts

@@ -5,41 +5,41 @@
 import * as Option from 'effect/Option';
 import { useCallback, useMemo } from 'react';
 
-import { Capabilities } from '@dxos/app-framework';
-import { usePluginManager } from '@dxos/app-framework/react';
-import { Filter, Obj, Query, Type } from '@dxos/echo';
+import { usePluginManager } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { type Database, Filter, Obj, Query, Type } from '@dxos/echo';
 import { EntityKind, SystemTypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
-import { type Space } from '@dxos/react-client/echo';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { type EditorMenuGroup, type EditorMenuItem, insertAtCursor, insertAtLineStart } from '@dxos/react-ui-editor';
+import { type EditorMenuGroup, type EditorMenuItem } from '@dxos/react-ui-editor';
+import { insertAtCursor, insertAtLineStart } from '@dxos/ui-editor';
 
-export const useLinkQuery = (space: Space | undefined) => {
+export const useLinkQuery = (db: Database.Database | undefined) => {
   const { t } = useTranslation();
 
   const manager = usePluginManager();
   const resolve = useCallback(
     (typename: string) =>
-      manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
+      manager.capabilities.getAll(AppCapabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
     [manager],
   );
 
   const filter = useMemo(
     () =>
       Filter.or(
-        ...(space?.db.schemaRegistry.query({ location: ['database', 'runtime'] }).runSync() ?? [])
+        ...(db?.schemaRegistry.query({ location: ['database', 'runtime'] }).runSync() ?? [])
           .filter((schema) => getTypeAnnotation(schema)?.kind !== EntityKind.Relation)
           .filter((schema) => !SystemTypeAnnotation.get(schema).pipe(Option.getOrElse(() => false)))
           .map((schema) => Filter.typename(Type.getTypename(schema))),
       ),
-    [space],
+    [db],
   );
 
   const handleLinkQuery = useCallback(
     async (query?: string): Promise<EditorMenuGroup[]> => {
       const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
-      const results = await space?.db.query(Query.select(filter)).run();
+      const results = await db?.query(Query.select(filter)).run();
 
-      // TODO(wittjosiah): Use `Obj.Any` type.
+      // TODO(wittjosiah): Use `Obj.Unknown` type.
       const getLabel = (object: any) => {
         const label = Obj.getLabel(object);
         if (label) {
@@ -76,7 +76,7 @@ export const useLinkQuery = (space: Space | undefined) => {
 
       return [{ id: 'echo', items }];
     },
-    [space, filter, resolve],
+    [db, filter, resolve],
   );
 
   return handleLinkQuery;

package/src/hooks/useSelectCurrentThread.tsx

@@ -3,13 +3,14 @@
 //
 
 import { EditorView } from '@codemirror/view';
-import * as Schema from 'effect/Schema';
+import * as Effect from 'effect/Effect';
 import { useMemo } from 'react';
 
-import { LayoutAction, createResolver } from '@dxos/app-framework';
-import { useIntentResolver } from '@dxos/app-framework/react';
+import { useOperationResolver } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { invariant } from '@dxos/invariant';
-import { Cursor, setSelection } from '@dxos/react-ui-editor';
+import { OperationResolver } from '@dxos/operation';
+import { Cursor, setSelection } from '@dxos/ui-editor';
 
 import { meta } from '../meta';
 
@@ -17,50 +18,44 @@ import { meta } from '../meta';
  * Handle scrolling and selection of the current thread in a markdown editor.
  */
 export const useSelectCurrentThread = (editorView: EditorView | null, documentId: string) => {
-  const scrollIntoViewResolver = useMemo(
+  const scrollIntoViewHandler = useMemo(
     () =>
-      createResolver({
-        intent: LayoutAction.UpdateLayout,
+      OperationResolver.make({
+        operation: LayoutOperation.ScrollIntoView,
         position: 'hoist',
-        filter: (
-          data,
-        ): data is {
-          part: 'current';
-          subject: string;
-          options: { cursor: string };
-        } => {
-          if (!Schema.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
-            return false;
-          }
-
-          return !!editorView && data.subject === documentId && !!data.options?.cursor;
-        },
-        resolve: ({ options: { 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 = [
-              // NOTE: This does not use the DOM scrollIntoView function.
-              EditorView.scrollIntoView(range.from, {
-                y: 'start',
-                yMargin: 96,
-              }),
-            ];
-            if (selection) {
-              // Update the editor selection to get bi-directional highlighting.
-              effects.push(setSelection.of({ current: documentId }));
+        filter: (input) => !!editorView && input.subject === documentId && !!input.cursor,
+        handler: (input) =>
+          Effect.sync(() => {
+            invariant(editorView, 'Editor view is not defined.');
+            const cursor = input.cursor;
+            if (!cursor) {
+              return;
             }
+            const range = Cursor.getRangeFromCursor(editorView.state, cursor);
+            if (range) {
+              const selection =
+                editorView.state.selection.main.from !== range.from ? { anchor: range.from } : undefined;
+              const effects = [
+                // NOTE: This does not use the DOM scrollIntoView function.
+                EditorView.scrollIntoView(range.from, {
+                  y: 'start',
+                  yMargin: 96,
+                }),
+              ];
+              if (selection) {
+                // Update the editor selection to get bi-directional highlighting.
+                effects.push(setSelection.of({ current: documentId }));
+              }
 
-            editorView.dispatch({
-              effects,
-              selection: selection ? { anchor: range.from } : undefined,
-            });
-          }
-        },
+              editorView.dispatch({
+                effects,
+                selection: selection ? { anchor: range.from } : undefined,
+              });
+            }
+          }),
       }),
     [documentId, editorView],
   );
 
-  useIntentResolver(meta.id, scrollIntoViewResolver);
+  useOperationResolver(meta.id, scrollIntoViewHandler);
 };

package/src/index.ts

@@ -2,11 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-export { MarkdownCapabilities } from './capabilities';
-export { MarkdownEvents } from './events';
+export { MarkdownCapabilities, MarkdownEvents } from './types';
 
 export * from './meta';
 export * from './types';
 export * from './util';
 
 export * from './MarkdownPlugin';
+
+export { MarkdownEditor } from './components/MarkdownEditor';

package/src/meta.ts

@@ -2,10 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
+export const meta: Plugin.Meta = {
   id: 'dxos.org/plugin/markdown',
   name: 'Markdown',
   description: trim`

package/src/testing.ts

@@ -15,7 +15,7 @@ export const WithProperties = <A, E, R>(effect: Effect.Effect<A, E, R>): Effect.
   Effect.zipRight(
     Effect.gen(function* () {
       // TODO(wittjosiah): Remove cast.
-      yield* Database.Service.add(
+      yield* Database.add(
         Obj.make(SpaceProperties, {
           [Collection.Collection.typename]: Ref.make(Collection.make()),
         }) as any,

package/src/translations.ts

@@ -3,6 +3,7 @@
 //
 
 import { type Resource } from '@dxos/react-ui';
+import { translations as editorTranslations } from '@dxos/react-ui-editor';
 
 import { meta } from './meta';
 import { Markdown } from './types';
@@ -50,4 +51,5 @@ export const translations = [
       },
     },
   },
+  ...editorTranslations,
 ] as const satisfies Resource[];

package/src/types/Markdown.ts

@@ -6,8 +6,8 @@ import * as Schema from 'effect/Schema';
 
 import { Obj, Ref, Type } from '@dxos/echo';
 import { DescriptionAnnotation, FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
-import { EditorInputMode, EditorViewMode } from '@dxos/react-ui-editor/types';
 import { Text } from '@dxos/schema';
+import { EditorInputMode, EditorViewMode } from '@dxos/ui-editor/types';
 
 /**
  * Document Item type.
@@ -18,7 +18,7 @@ export const Document = Schema.Struct({
   fallbackName: Schema.String.pipe(FormInputAnnotation.set(false), Schema.optional),
   content: Type.Ref(Text.Text).pipe(FormInputAnnotation.set(false)),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/Document',
     version: '0.1.0',
   }),

package/src/types/MarkdownAction.ts

@@ -4,26 +4,56 @@
 
 import * as Schema from 'effect/Schema';
 
-import { EditorViewMode } from '@dxos/react-ui-editor/types';
+import { Capability } from '@dxos/app-framework';
+import { Operation } from '@dxos/operation';
+import { SpaceSchema } from '@dxos/react-client/echo';
+import { Collection } from '@dxos/schema';
+import { EditorViewMode } from '@dxos/ui-editor/types';
 
 import { meta } from '../meta';
 
 import { Document } from './Markdown';
 
-export class Create extends Schema.TaggedClass<Create>()(`${meta.id}/action/create`, {
-  input: Schema.Struct({
-    name: Schema.optional(Schema.String),
-    content: Schema.optional(Schema.String),
-  }),
-  output: Schema.Struct({
-    object: Document,
-  }),
-}) {}
-
-export class SetViewMode extends Schema.TaggedClass<SetViewMode>()(`${meta.id}/action/set-view-mode`, {
-  input: Schema.Struct({
-    id: Schema.String,
-    viewMode: EditorViewMode,
-  }),
-  output: Schema.Void,
-}) {}
+const MARKDOWN_OPERATION = `${meta.id}/operation`;
+
+export namespace MarkdownOperation {
+  export const OnCreateSpace = Operation.make({
+    meta: { key: `${MARKDOWN_OPERATION}/on-create-space`, name: 'On Create Space' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        space: SpaceSchema,
+        rootCollection: Collection.Collection,
+        isDefault: Schema.optional(Schema.Boolean),
+      }),
+      output: Schema.Void,
+    },
+  });
+
+  export const Create = Operation.make({
+    meta: { key: `${MARKDOWN_OPERATION}/create`, name: 'Create Markdown Document' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        name: Schema.optional(Schema.String),
+        content: Schema.optional(Schema.String),
+      }),
+      output: Schema.Struct({
+        object: Document,
+      }),
+    },
+  });
+
+  // TODO(wittjosiah): This appears to be unused.
+  export const SetViewMode = Operation.make({
+    meta: { key: `${MARKDOWN_OPERATION}/set-view-mode`, name: 'Set View Mode' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        id: Schema.String,
+        viewMode: EditorViewMode,
+      }),
+      output: Schema.Void,
+    },
+  });
+}

package/src/types/capabilities.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Atom } from '@effect-atom/atom-react';
+import * as Schema from 'effect/Schema';
+
+import { Capability } from '@dxos/app-framework';
+import { type EditorStateStore, type EditorViewMode } from '@dxos/ui-editor';
+
+import { meta } from '../meta';
+
+import type * as Markdown from './Markdown';
+import { type MarkdownExtensionProvider } from './types';
+
+/** Schema for persisted markdown state. */
+export const MarkdownStateSchema = Schema.mutable(
+  Schema.Struct({
+    viewMode: Schema.Record({ key: Schema.String, value: Schema.String }),
+  }),
+);
+
+export type MarkdownState = {
+  viewMode: Record<string, EditorViewMode>;
+};
+
+export namespace MarkdownCapabilities {
+  export const Settings = Capability.make<Atom.Writable<Markdown.Settings>>(`${meta.id}/capability/settings`);
+
+  /** Persisted state atom for view mode per document. */
+  export const State = Capability.make<Atom.Writable<MarkdownState>>(`${meta.id}/capability/state`);
+
+  /** Editor state store for cursor positions, scroll state, etc. */
+  export const EditorState = Capability.make<EditorStateStore>(`${meta.id}/capability/editor-state`);
+
+  // TODO(burdon): Move to ./types (external API)?
+  export const Extensions = Capability.make<MarkdownExtensionProvider[]>(`${meta.id}/capability/extensions`);
+}