@dxos/plugin-markdown 0.8.4-main.7ace549 → 0.8.4-main.9735255

package/src/{functions → blueprints/functions}/update.test.ts

@@ -6,8 +6,8 @@ import { describe, expect, it } from '@effect/vitest';
 import * as Effect from 'effect/Effect';
 import * as Layer from 'effect/Layer';
 
-import { AiService, ConsolePrinter, MemoizedAiService } from '@dxos/ai';
-import { TestAiService } from '@dxos/ai/testing';
+import { AiService, ConsolePrinter } from '@dxos/ai';
+import { MemoizedAiService, TestAiService } from '@dxos/ai/testing';
 import {
   AiConversation,
   type ContextBinding,
@@ -18,14 +18,10 @@ import {
 import { Blueprint } from '@dxos/blueprints';
 import { SpaceProperties } from '@dxos/client-protocol';
 import { Obj, Query, Ref } from '@dxos/echo';
-import { TestHelpers, acquireReleaseResource } from '@dxos/effect';
-import {
-  CredentialsService,
-  DatabaseService,
-  FunctionInvocationService,
-  QueueService,
-  TracingService,
-} from '@dxos/functions';
+import { Database } from '@dxos/echo';
+import { acquireReleaseResource } from '@dxos/effect';
+import { TestHelpers } from '@dxos/effect/testing';
+import { CredentialsService, FunctionInvocationService, QueueService, TracingService } from '@dxos/functions';
 import { FunctionInvocationServiceLayerTest, TestDatabaseLayer } from '@dxos/functions-runtime/testing';
 import { invariant } from '@dxos/invariant';
 import { ObjectId } from '@dxos/keys';
@@ -33,19 +29,21 @@ import { Markdown } from '@dxos/plugin-markdown/types';
 import { Collection } from '@dxos/schema';
 import { HasSubject, type Message } from '@dxos/types';
 
-import { WithProperties, testToolkit } from '../testing';
-import { MarkdownBlueprint, MarkdownFunction } from '../toolkit';
+import { WithProperties, testToolkit } from '../../testing';
+import * as MarkdownBlueprint from '../markdown-blueprint';
+
+import update from './update';
 
 ObjectId.dangerouslyDisableRandomness();
 
 const TestLayer = Layer.mergeAll(
   AiService.model('@anthropic/claude-opus-4-0'),
-  makeToolResolverFromFunctions([MarkdownFunction.create, MarkdownFunction.open, MarkdownFunction.update], testToolkit),
+  makeToolResolverFromFunctions(MarkdownBlueprint.functions, testToolkit),
   makeToolExecutionServiceFromFunctions(testToolkit, testToolkit.toLayer({}) as any),
 ).pipe(
   Layer.provideMerge(
     FunctionInvocationServiceLayerTest({
-      functions: [MarkdownFunction.create, MarkdownFunction.open, MarkdownFunction.update],
+      functions: MarkdownBlueprint.functions,
     }),
   ),
   Layer.provideMerge(
@@ -71,16 +69,16 @@ describe('update', () => {
           name: 'BlueYard',
           content: 'Founders and portfolio of BlueYard.',
         });
-        yield* DatabaseService.add(doc);
+        yield* Database.Service.add(doc);
 
-        yield* FunctionInvocationService.invokeFunction(MarkdownFunction.update, {
+        yield* FunctionInvocationService.invokeFunction(update, {
           id: doc.id,
           diffs: ['- Founders', '+ # Founders'],
         });
 
-        const updatedDoc = yield* DatabaseService.resolve(Obj.getDXN(doc), Markdown.Document);
+        const updatedDoc = yield* Database.Service.resolve(Obj.getDXN(doc), Markdown.Document);
         expect(updatedDoc.name).toBe(doc.name);
-        const text = yield* DatabaseService.load(updatedDoc.content);
+        const text = yield* Database.Service.load(updatedDoc.content);
         expect(text.content).toBe('# Founders and portfolio of BlueYard.');
       },
       WithProperties,
@@ -94,10 +92,10 @@ describe('update', () => {
     Effect.fnUntraced(
       function* (_) {
         const queue = yield* QueueService.createQueue<Message.Message | ContextBinding>();
-        const conversation = yield* acquireReleaseResource(() => new AiConversation(queue));
+        const conversation = yield* acquireReleaseResource(() => new AiConversation({ queue }));
 
-        yield* DatabaseService.flush({ indexes: true });
-        const markdownBlueprint = yield* DatabaseService.add(Obj.clone(MarkdownBlueprint));
+        yield* Database.Service.flush({ indexes: true });
+        const markdownBlueprint = yield* Database.Service.add(Obj.clone(MarkdownBlueprint.make()));
         yield* Effect.promise(() =>
           conversation.context.bind({
             blueprints: [Ref.make(markdownBlueprint)],
@@ -111,7 +109,7 @@ describe('update', () => {
           prompt: `Create a document with a cookie recipe.`,
         });
         {
-          const { objects: docs } = yield* DatabaseService.runQuery(Query.type(Markdown.Document));
+          const docs = yield* Database.Service.runQuery(Query.type(Markdown.Document));
           if (docs.length !== 1) {
             throw new Error(`Expected 1 document; got ${docs.length}: ${docs.map((_) => _.name)}`);
           }
@@ -120,7 +118,7 @@ describe('update', () => {
           invariant(Obj.instanceOf(Markdown.Document, doc));
           console.log({
             name: doc.name,
-            content: yield* DatabaseService.load(doc.content).pipe(Effect.map((_) => _.content)),
+            content: yield* Database.Service.load(doc.content).pipe(Effect.map((_) => _.content)),
           });
         }
 
@@ -129,7 +127,7 @@ describe('update', () => {
           prompt: 'Add a section with a holiday-themed variation.',
         });
         {
-          const { objects: docs } = yield* DatabaseService.runQuery(Query.type(Markdown.Document));
+          const docs = yield* Database.Service.runQuery(Query.type(Markdown.Document));
           if (docs.length !== 1) {
             throw new Error(`Expected 1 document; got ${docs.length}: ${docs.map((_) => _.name)}`);
           }
@@ -138,7 +136,7 @@ describe('update', () => {
           invariant(Obj.instanceOf(Markdown.Document, doc));
           console.log({
             name: doc.name,
-            content: yield* DatabaseService.load(doc.content).pipe(Effect.map((_) => _.content)),
+            content: yield* Database.Service.load(doc.content).pipe(Effect.map((_) => _.content)),
           });
         }
       },

package/src/{functions → blueprints/functions}/update.ts

@@ -6,11 +6,12 @@ import * as Effect from 'effect/Effect';
 import * as Schema from 'effect/Schema';
 
 import { ArtifactId, applyDiffs } from '@dxos/assistant';
+import { Database } from '@dxos/echo';
 import { createDocAccessor } from '@dxos/echo-db';
-import { DatabaseService, defineFunction } from '@dxos/functions';
+import { defineFunction } from '@dxos/functions';
 import { trim } from '@dxos/util';
 
-import { Markdown } from '../types';
+import { Markdown } from '../../types';
 
 // TODO(wittjosiah): Reconcile with ThreadAction.AddProposal.
 export default defineFunction({
@@ -29,7 +30,7 @@ export default defineFunction({
   }),
   outputSchema: Schema.Void,
   handler: Effect.fn(function* ({ data: { id, diffs } }) {
-    const object = yield* DatabaseService.resolve(ArtifactId.toDXN(id), Markdown.Document);
+    const object = yield* Database.Service.resolve(ArtifactId.toDXN(id), Markdown.Document);
     const content = yield* Effect.promise(() => object.content.load());
     const accessor = createDocAccessor(content, ['content']);
     applyDiffs(accessor, diffs);

package/src/blueprints/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * as MarkdownBlueprint from './markdown-blueprint';

package/src/blueprints/markdown-blueprint.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Blueprint, Template } from '@dxos/blueprints';
+import { type FunctionDefinition } from '@dxos/functions';
+import { trim } from '@dxos/util';
+
+import { create, open, update } from './functions';
+
+export const functions: FunctionDefinition[] = [create, open, update];
+
+export const Key = 'dxos.org/blueprint/markdown';
+
+export const make = () =>
+  Blueprint.make({
+    key: Key,
+    name: 'Markdown',
+    tools: Blueprint.toolDefinitions({ functions }),
+    instructions: Template.make({
+      // TODO(wittjosiah): Move example to function input schema annotation.
+      source: trim`
+        {{! Markdown }}
+
+        You can create, read and update markdown documents.
+        When asked to edit or update documents return updates as a set of compact diff string pairs.
+        For each diff, respond with the smallest possible matching span.
+
+        Example:
+        ${'```'}diff
+        - "There is a tyop in this sentence."
+        + "There is a typo in this sentence."
+        - "This id good."
+        + "This sentence is really good."
+        ${'```'}
+      `,
+    }),
+  });

package/src/capabilities/anchor-sort/anchor-sort.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability, Common } from '@dxos/app-framework';
+import { Relation } from '@dxos/echo';
+import { createDocAccessor, getRangeFromCursor } from '@dxos/echo-db';
+import { type AnchoredTo } from '@dxos/types';
+
+import { Markdown } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Common.Capability.AnchorSort, {
+      key: Markdown.Document.typename,
+      sort: (anchorA: AnchoredTo.AnchoredTo, anchorB: AnchoredTo.AnchoredTo) => {
+        const doc = Relation.getTarget(anchorA) as Markdown.Document;
+        const accessor = doc.content.target ? createDocAccessor(doc.content.target, ['content']) : undefined;
+        if (doc !== Relation.getTarget(anchorB) || !accessor) {
+          return 0;
+        }
+
+        const getStartPosition = (cursor: string | undefined) => {
+          const range = cursor ? getRangeFromCursor(accessor, cursor) : undefined;
+          return range?.start ?? Number.MAX_SAFE_INTEGER;
+        };
+
+        const posA = getStartPosition(anchorA.anchor);
+        const posB = getStartPosition(anchorB.anchor);
+        return posA - posB;
+      },
+    }),
+  ),
+);

package/src/capabilities/anchor-sort/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const AnchorSort = Capability.lazy('AnchorSort', () => import('./anchor-sort'));

package/src/capabilities/app-graph-serializer/app-graph-serializer.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability, Common } from '@dxos/app-framework';
+import { Obj } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space/types';
+import { isSpace } from '@dxos/react-client/echo';
+import { Collection } from '@dxos/schema';
+
+import { translations } from '../../translations';
+import { Markdown, MarkdownOperation } from '../../types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    // Get context for lazy capability access in callbacks.
+    const capabilities = yield* Capability.Service;
+
+    return Capability.contributes(Common.Capability.AppGraphSerializer, [
+      {
+        inputType: Markdown.Document.typename,
+        outputType: 'text/markdown',
+        // Reconcile with metadata serializers.
+        serialize: async (node) => {
+          const doc = node.data;
+          const content = await doc.content.load();
+          return {
+            name:
+              doc.name ||
+              doc.fallbackName ||
+              translations[0]['en-US'][Markdown.Document.typename]['object name placeholder'],
+            data: content.content,
+            type: 'text/markdown',
+          };
+        },
+        deserialize: async (data, ancestors) => {
+          const space = ancestors.find(isSpace);
+          const target =
+            ancestors.findLast((ancestor) => Obj.instanceOf(Collection.Collection, ancestor)) ??
+            space?.properties[Collection.Collection.typename]?.target;
+          if (!space || !target) {
+            return;
+          }
+
+          const { invokePromise } = capabilities.get(Common.Capability.OperationInvoker);
+          const createResult = await invokePromise(MarkdownOperation.Create, { name: data.name, content: data.data });
+          if (!createResult.data?.object) {
+            return undefined;
+          }
+          await invokePromise(SpaceOperation.AddObject, { target, object: createResult.data.object });
+
+          return createResult.data.object;
+        },
+      },
+    ]);
+  }),
+);

package/src/capabilities/app-graph-serializer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const AppGraphSerializer = Capability.lazy('AppGraphSerializer', () => import('./app-graph-serializer'));

package/src/capabilities/artifact-definition/artifact-definition.ts

@@ -0,0 +1,110 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// ISSUE(burdon): defineArtifact
+// @ts-nocheck
+
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+
+import { ToolResult, createTool } from '@dxos/ai';
+import { Capability, Common } from '@dxos/app-framework';
+import { ArtifactId, createArtifactElement } from '@dxos/assistant';
+import { defineArtifact } from '@dxos/blueprints';
+import { Obj } from '@dxos/echo';
+import { assertArgument, invariant } from '@dxos/invariant';
+import { SpaceOperation } from '@dxos/plugin-space/types';
+import { Filter } from '@dxos/react-client/echo';
+
+import { meta } from '../../meta';
+import { Markdown } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const definition = defineArtifact({
+      id: `artifact:${meta.id}`, // TODO(burdon): meta.id/artifact?
+      name: meta.name,
+      instructions: `
+      The markdown plugin allows you to work with text documents in the current space.
+      Use these tools to interact with documents, including listing available documents and retrieving their content.
+      Documents are stored in Markdown format.
+    `,
+      schema: Markdown.Document,
+      tools: [
+        createTool(meta.id, {
+          name: 'create',
+          description: 'Create a new markdown document',
+          caption: 'Creating document...',
+          schema: Schema.Struct({
+            name: Schema.optional(Schema.String).annotations({
+              description: 'Optional name for the document.',
+            }),
+            content: Schema.String.annotations({
+              description: 'The content of the document.',
+            }),
+          }),
+          execute: async ({ name, content }, { extensions }) => {
+            invariant(extensions?.space, 'No space');
+            invariant(extensions?.invoke, 'No operation invoker');
+
+            const document = Markdown.make({ name, content });
+
+            const { error } = await extensions.invoke(SpaceOperation.AddObject, {
+              target: extensions.space,
+              object: document,
+            });
+            if (error) {
+              return ToolResult.Error(error?.message ?? 'Failed to add document to space');
+            }
+
+            return ToolResult.Success(createArtifactElement(document.id));
+          },
+        }),
+        createTool(meta.id, {
+          name: 'list',
+          description: 'List all markdown documents in the current space.',
+          caption: 'Listing markdown documents...',
+          schema: Schema.Struct({}),
+          execute: async (_input, { extensions }) => {
+            invariant(extensions?.space, 'No space');
+            const space = extensions.space;
+            const { objects: documents } = await space.db.query(Filter.type(Markdown.Document)).run();
+            const documentInfo = documents.map((doc) => {
+              invariant(Obj.instanceOf(Markdown.Document, doc));
+              return {
+                id: Obj.getDXN(doc).toString(),
+                name: doc.name || doc.fallbackName || 'Unnamed Document',
+                // TODO(ZaymonFC): Include updatedAt?
+              };
+            });
+
+            return ToolResult.Success(documentInfo);
+          },
+        }),
+        createTool(meta.id, {
+          name: 'inspect',
+          description: 'Read the content of a markdown document.',
+          caption: 'Inspecting markdown document...',
+          schema: Schema.Struct({
+            id: ArtifactId,
+          }),
+          execute: async ({ id }, { extensions }) => {
+            invariant(extensions?.space, 'No space');
+            const document = await extensions.space.db.query(Filter.id(ArtifactId.toDXN(id).toString())).first();
+            assertArgument(Obj.instanceOf(Markdown.Document, document), 'document', 'Invalid type');
+
+            const { content } = await document.content?.load();
+            return ToolResult.Success({
+              id: Obj.getDXN(document).toString(),
+              name: document.name || document.fallbackName || 'Unnamed Document',
+              content,
+            });
+          },
+        }),
+      ],
+    });
+
+    return Capability.contributes(Common.Capability.ArtifactDefinition, definition);
+  }),
+);

package/src/capabilities/artifact-definition/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ArtifactDefinition = Capability.lazy('ArtifactDefinition', () => import('./artifact-definition'));

package/src/capabilities/blueprint-definition/blueprint-definition.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability, Common } from '@dxos/app-framework';
+
+import { MarkdownBlueprint } from '../../blueprints';
+
+export const functions = MarkdownBlueprint.functions;
+
+export type BlueprintCapabilities = [
+  Capability.Capability<typeof Common.Capability.Functions>,
+  Capability.Capability<typeof Common.Capability.BlueprintDefinition>,
+];
+
+const blueprintDefinition = Capability.makeModule<[], BlueprintCapabilities>(() =>
+  Effect.succeed([
+    Capability.contributes(Common.Capability.Functions, functions),
+    Capability.contributes(Common.Capability.BlueprintDefinition, MarkdownBlueprint.make()),
+  ]),
+);
+
+export default blueprintDefinition;

package/src/capabilities/blueprint-definition/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));

package/src/capabilities/index.ts

@@ -2,15 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { lazy } from '@dxos/app-framework';
-
-export const AnchorSort: any = lazy(() => import('./anchor-sort'));
-export const AppGraphSerializer = lazy(() => import('./app-graph-serializer'));
-export const BlueprintDefinition = lazy(() => import('./blueprint-definition'));
-export const IntentResolver = lazy(() => import('./intent-resolver'));
-export const ReactSurface = lazy(() => import('./react-surface'));
-export const MarkdownSettings = lazy(() => import('./settings'));
-export const MarkdownState = lazy(() => import('./state'));
-
+export * from './anchor-sort';
+export * from './app-graph-serializer';
 export * from './blueprint-definition';
-export * from './capabilities';
+export * from './operation-resolver';
+export * from './react-surface';
+export * from './settings';
+export * from './state';

package/src/capabilities/operation-resolver/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const OperationResolver = Capability.lazy('OperationResolver', () => import('./operation-resolver'));

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability, Common } from '@dxos/app-framework';
+import { Obj, Ref, Type } from '@dxos/echo';
+import { OperationResolver } from '@dxos/operation';
+import { Collection } from '@dxos/schema';
+
+import { Markdown, MarkdownCapabilities, MarkdownOperation } from '../../types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Common.Capability.OperationResolver, [
+      OperationResolver.make({
+        operation: MarkdownOperation.OnCreateSpace,
+        handler: Effect.fnUntraced(function* ({ rootCollection }) {
+          const collection = Collection.makeManaged({ key: Type.getTypename(Markdown.Document) });
+          Obj.change(rootCollection, (c) => {
+            c.objects.push(Ref.make(collection));
+          });
+        }),
+      }),
+      OperationResolver.make({
+        operation: MarkdownOperation.Create,
+        handler: ({ name, content }) =>
+          Effect.succeed({
+            object: Markdown.make({ name, content }),
+          }),
+      }),
+      // TODO(wittjosiah): This appears to be unused.
+      OperationResolver.make({
+        operation: MarkdownOperation.SetViewMode,
+        handler: Effect.fnUntraced(function* ({ id, viewMode }) {
+          yield* Common.Capability.updateAtomValue(MarkdownCapabilities.State, (current) => ({
+            ...current,
+            viewMode: { ...current.viewMode, [id]: viewMode },
+          }));
+        }),
+      }),
+    ]);
+  }),
+);

package/src/capabilities/react-surface/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

package/src/capabilities/react-surface/react-surface.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React, { forwardRef, useCallback, useMemo } from 'react';
+
+import { Capability, Common } from '@dxos/app-framework';
+import {
+  type SurfaceComponentProps,
+  useAtomCapability,
+  useAtomCapabilityState,
+  useCapability,
+  useSettingsState,
+} from '@dxos/app-framework/react';
+import { Obj } from '@dxos/echo';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+import { Text } from '@dxos/schema';
+import { type EditorViewMode } from '@dxos/ui-editor';
+
+import { MarkdownCard, MarkdownContainer, type MarkdownContainerProps, MarkdownSettings } from '../../components';
+import { meta } from '../../meta';
+import { Markdown, MarkdownCapabilities } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Common.Capability.ReactSurface, [
+      Common.createSurface({
+        id: `${meta.id}/surface/document`,
+        role: ['article', 'section', 'tabpanel'],
+        filter: (data): data is { subject: Markdown.Document; variant: undefined } =>
+          Obj.instanceOf(Markdown.Document, data.subject) && !data.variant,
+        component: ({ data, role, ref }) => {
+          return <Container id={Obj.getDXN(data.subject).toString()} subject={data.subject} role={role} ref={ref} />;
+        },
+      }),
+      Common.createSurface({
+        id: `${meta.id}/surface/text`,
+        role: ['article', 'section', 'tabpanel'],
+        filter: (data): data is { id: string; subject: Text.Text } =>
+          typeof data.id === 'string' && Obj.instanceOf(Text.Text, data.subject),
+        component: ({ data, role }) => {
+          return <Container id={data.id} subject={data.subject} role={role} />;
+        },
+      }),
+      Common.createSurface({
+        id: `${meta.id}/surface/plugin-settings`,
+        role: 'article',
+        filter: (data): data is { subject: Common.Capability.Settings } =>
+          Common.Capability.isSettings(data.subject) && data.subject.prefix === meta.id,
+        component: ({ data: { subject } }) => {
+          const { settings, updateSettings } = useSettingsState<Markdown.Settings>(subject.atom);
+          return <MarkdownSettings settings={settings} onSettingsChange={updateSettings} />;
+        },
+      }),
+      Common.createSurface({
+        id: `${meta.id}/surface/preview`,
+        role: 'card--content',
+        filter: (data): data is { subject: Markdown.Document | Text.Text } =>
+          Obj.instanceOf(Markdown.Document, data.subject) || Obj.instanceOf(Text.Text, data.subject),
+        component: ({ data }) => <MarkdownCard {...data} />,
+      }),
+    ]),
+  ),
+);
+
+/**
+ * Common wrapper.
+ */
+const Container = forwardRef<HTMLDivElement, SurfaceComponentProps<Markdown.Document | Text.Text, { id: string }>>(
+  ({ id, subject, role }, forwardedRef) => {
+    const selectionManager = useCapability(AttentionCapabilities.Selection);
+    const settings = useAtomCapability(MarkdownCapabilities.Settings);
+    const [state, setState] = useAtomCapabilityState(MarkdownCapabilities.State);
+    const editorState = useCapability(MarkdownCapabilities.EditorState);
+    const extensions = useCapability(MarkdownCapabilities.Extensions);
+    const extensionProviders = useMemo(() => extensions.flat(), [extensions]);
+
+    const viewMode: EditorViewMode = (id && state.viewMode[id]) || settings?.defaultViewMode || 'source';
+    const handleViewModeChange = useCallback<NonNullable<MarkdownContainerProps['onViewModeChange']>>(
+      (mode) => setState((current) => ({ ...current, viewMode: { ...current.viewMode, [id]: mode } })),
+      [id, setState],
+    );
+
+    return (
+      <MarkdownContainer
+        role={role}
+        subject={subject}
+        id={id}
+        settings={settings}
+        selectionManager={selectionManager}
+        extensionProviders={extensionProviders}
+        editorStateStore={editorState}
+        viewMode={viewMode}
+        onViewModeChange={handleViewModeChange}
+        ref={forwardedRef}
+      />
+    );
+  },
+);

package/src/capabilities/settings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const MarkdownSettings = Capability.lazy('MarkdownSettings', () => import('./settings'));