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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-markdown",
-  "version": "0.8.4-main.3eb6e50203",
+  "version": "0.8.4-main.422d1c7879",
   "description": "DXOS Surface plugin for interacting with Markdown",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,6 +12,22 @@
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#blueprints": "./src/blueprints/index.ts",
+    "#capabilities": {
+      "source": "./src/capabilities/index.ts",
+      "types": "./src/capabilities/index.ts",
+      "browser": "./src/capabilities/index.ts",
+      "node": "./src/capabilities/node.ts"
+    },
+    "#components": "./src/components/index.ts",
+    "#containers": "./src/containers/index.ts",
+    "#hooks": "./src/hooks/index.ts",
+    "#meta": "./src/meta.ts",
+    "#operations": "./src/operations/index.ts",
+    "#testing": "./src/testing.ts",
+    "#types": "./src/types/index.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -31,33 +47,26 @@
       "browser": "./dist/lib/browser/cli/index.mjs",
       "node": "./dist/lib/node-esm/cli/index.mjs"
     },
-    "./types": {
-      "source": "./src/types/index.ts",
-      "types": "./dist/types/src/types/index.d.ts",
-      "browser": "./dist/lib/browser/types/index.mjs",
-      "node": "./dist/lib/node-esm/types/index.mjs"
+    "./operations": {
+      "source": "./src/operations/index.ts",
+      "types": "./dist/types/src/operations/index.d.ts",
+      "browser": "./dist/lib/browser/operations/index.mjs",
+      "node": "./dist/lib/node-esm/operations/index.mjs"
     },
     "./testing": {
       "source": "./src/testing.ts",
       "types": "./dist/types/src/testing.d.ts",
       "browser": "./dist/lib/browser/testing.mjs",
       "node": "./dist/lib/node-esm/testing.mjs"
+    },
+    "./types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "browser": "./dist/lib/browser/types/index.mjs",
+      "node": "./dist/lib/node-esm/types/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "blueprints": [
-        "dist/types/src/blueprints/index.d.ts"
-      ],
-      "toolkit": [
-        "dist/types/src/toolkit.d.ts"
-      ],
-      "types": [
-        "dist/types/src/types/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -73,69 +82,69 @@
     "@effect/experimental": "0.58.0",
     "@radix-ui/react-context": "1.1.1",
     "react-dropzone": "^14.2.3",
-    "@dxos/ai": "0.8.4-main.3eb6e50203",
-    "@dxos/app-framework": "0.8.4-main.3eb6e50203",
-    "@dxos/app-toolkit": "0.8.4-main.3eb6e50203",
-    "@dxos/assistant": "0.8.4-main.3eb6e50203",
-    "@dxos/async": "0.8.4-main.3eb6e50203",
-    "@dxos/blueprints": "0.8.4-main.3eb6e50203",
-    "@dxos/client-protocol": "0.8.4-main.3eb6e50203",
-    "@dxos/echo": "0.8.4-main.3eb6e50203",
-    "@dxos/echo-db": "0.8.4-main.3eb6e50203",
-    "@dxos/functions": "0.8.4-main.3eb6e50203",
-    "@dxos/functions-runtime": "0.8.4-main.3eb6e50203",
-    "@dxos/effect": "0.8.4-main.3eb6e50203",
-    "@dxos/invariant": "0.8.4-main.3eb6e50203",
-    "@dxos/keys": "0.8.4-main.3eb6e50203",
-    "@dxos/log": "0.8.4-main.3eb6e50203",
-    "@dxos/lit-ui": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-attention": "0.8.4-main.3eb6e50203",
-    "@dxos/operation": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-client": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-deck": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-graph": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-space": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-preview": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-theme": "0.8.4-main.3eb6e50203",
-    "@dxos/react-hooks": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-attention": "0.8.4-main.3eb6e50203",
-    "@dxos/react-client": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-editor": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-menu": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-mosaic": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-form": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-stack": "0.8.4-main.3eb6e50203",
-    "@dxos/schema": "0.8.4-main.3eb6e50203",
-    "@dxos/types": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-editor": "0.8.4-main.3eb6e50203",
-    "@dxos/ui": "0.8.4-main.3eb6e50203",
-    "@dxos/util": "0.8.4-main.3eb6e50203"
+    "@dxos/app-framework": "0.8.4-main.422d1c7879",
+    "@dxos/ai": "0.8.4-main.422d1c7879",
+    "@dxos/app-toolkit": "0.8.4-main.422d1c7879",
+    "@dxos/assistant": "0.8.4-main.422d1c7879",
+    "@dxos/async": "0.8.4-main.422d1c7879",
+    "@dxos/client-protocol": "0.8.4-main.422d1c7879",
+    "@dxos/blueprints": "0.8.4-main.422d1c7879",
+    "@dxos/echo": "0.8.4-main.422d1c7879",
+    "@dxos/echo-db": "0.8.4-main.422d1c7879",
+    "@dxos/effect": "0.8.4-main.422d1c7879",
+    "@dxos/functions": "0.8.4-main.422d1c7879",
+    "@dxos/functions-runtime": "0.8.4-main.422d1c7879",
+    "@dxos/keys": "0.8.4-main.422d1c7879",
+    "@dxos/invariant": "0.8.4-main.422d1c7879",
+    "@dxos/log": "0.8.4-main.422d1c7879",
+    "@dxos/operation": "0.8.4-main.422d1c7879",
+    "@dxos/plugin-attention": "0.8.4-main.422d1c7879",
+    "@dxos/plugin-client": "0.8.4-main.422d1c7879",
+    "@dxos/plugin-deck": "0.8.4-main.422d1c7879",
+    "@dxos/plugin-preview": "0.8.4-main.422d1c7879",
+    "@dxos/plugin-graph": "0.8.4-main.422d1c7879",
+    "@dxos/plugin-space": "0.8.4-main.422d1c7879",
+    "@dxos/react-client": "0.8.4-main.422d1c7879",
+    "@dxos/plugin-theme": "0.8.4-main.422d1c7879",
+    "@dxos/react-hooks": "0.8.4-main.422d1c7879",
+    "@dxos/react-ui-attention": "0.8.4-main.422d1c7879",
+    "@dxos/lit-ui": "0.8.4-main.422d1c7879",
+    "@dxos/react-ui-form": "0.8.4-main.422d1c7879",
+    "@dxos/react-ui-editor": "0.8.4-main.422d1c7879",
+    "@dxos/react-ui-menu": "0.8.4-main.422d1c7879",
+    "@dxos/react-ui-mosaic": "0.8.4-main.422d1c7879",
+    "@dxos/react-ui-stack": "0.8.4-main.422d1c7879",
+    "@dxos/types": "0.8.4-main.422d1c7879",
+    "@dxos/ui": "0.8.4-main.422d1c7879",
+    "@dxos/ui-editor": "0.8.4-main.422d1c7879",
+    "@dxos/util": "0.8.4-main.422d1c7879",
+    "@dxos/schema": "0.8.4-main.422d1c7879"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/platform": "0.94.4",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/plugin-theme": "0.8.4-main.3eb6e50203",
-    "@dxos/debug": "0.8.4-main.3eb6e50203",
-    "@dxos/random": "0.8.4-main.3eb6e50203",
-    "@dxos/storybook-utils": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-testing": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui": "0.8.4-main.3eb6e50203"
+    "vite": "^7.1.11",
+    "@dxos/debug": "0.8.4-main.422d1c7879",
+    "@dxos/plugin-testing": "0.8.4-main.422d1c7879",
+    "@dxos/plugin-theme": "0.8.4-main.422d1c7879",
+    "@dxos/react-ui": "0.8.4-main.422d1c7879",
+    "@dxos/storybook-utils": "0.8.4-main.422d1c7879",
+    "@dxos/random": "0.8.4-main.422d1c7879",
+    "@dxos/ui-theme": "0.8.4-main.422d1c7879"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/platform": "0.94.4",
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui": "0.8.4-main.3eb6e50203"
+    "@dxos/ui-theme": "0.8.4-main.422d1c7879",
+    "@dxos/react-ui": "0.8.4-main.422d1c7879"
   },
   "publishConfig": {
     "access": "public"

package/src/MarkdownPlugin.tsx

@@ -3,30 +3,33 @@
 //
 
 import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
 
-import { Capability, Plugin } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
 import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
-import { type Obj, Ref } from '@dxos/echo';
+import { Annotation, type Obj, Ref } from '@dxos/echo';
 import { createDocAccessor, getTextInRange } from '@dxos/echo-db';
 import { Operation } from '@dxos/operation';
-import { SpaceCapabilities, SpaceEvents } from '@dxos/plugin-space';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { type CreateObject } from '@dxos/plugin-space/types';
 import { translations as editorTranslations } from '@dxos/react-ui-editor';
 import { Text } from '@dxos/schema';
 
-import { MarkdownBlueprint } from './blueprints';
+import { MarkdownBlueprint } from '#blueprints';
 import {
   AnchorSort,
   AppGraphSerializer,
   BlueprintDefinition,
   MarkdownSettings,
   MarkdownState,
-  OperationResolver,
+  OperationHandler,
   ReactSurface,
-} from './capabilities';
-import { meta } from './meta';
+} from '#capabilities';
+import { meta } from '#meta';
+import { MarkdownOperation } from '#operations';
+import { Markdown, MarkdownEvents } from '#types';
+
 import { translations } from './translations';
-import { Markdown, MarkdownEvents, MarkdownOperation } from './types';
 import { serializer } from './util';
 
 export const MarkdownPlugin = Plugin.define(meta).pipe(
@@ -35,10 +38,11 @@ export const MarkdownPlugin = Plugin.define(meta).pipe(
     metadata: {
       id: Markdown.Document.typename,
       metadata: {
+        // TODO(dmaretskyi): Remove label, icon and iconHue and query them of schema.
         label: (object: Markdown.Document) => object.name || object.fallbackName,
-        icon: 'ph--text-aa--regular',
-        iconHue: 'indigo',
-        blueprints: [MarkdownBlueprint.Key],
+        icon: Annotation.IconAnnotation.get(Markdown.Document).pipe(Option.getOrThrow).icon,
+        iconHue: Annotation.IconAnnotation.get(Markdown.Document).pipe(Option.getOrThrow).hue ?? 'white',
+        blueprints: [MarkdownBlueprint.key],
         graphProps: {
           managesAutofocus: true,
         },
@@ -54,15 +58,25 @@ export const MarkdownPlugin = Plugin.define(meta).pipe(
             return getTextInRange(createDocAccessor(doc.content.target!, ['content']), start, end);
           }
         },
-        createObject: ((props) => Effect.sync(() => Markdown.make(props))) satisfies CreateObject,
+        createObject: ((props, options) =>
+          Effect.gen(function* () {
+            const object = Markdown.make(props);
+            return yield* Operation.invoke(SpaceOperation.AddObject, {
+              object,
+              target: options.target,
+              hidden: true,
+              targetNodeId: options.targetNodeId,
+            });
+          })) satisfies CreateObject,
+        scrollToAnchor: MarkdownOperation.ScrollToAnchor,
       },
     },
   }),
-  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
   AppPlugin.addSchemaModule({ schema: [Markdown.Document, Text.Text] }),
   AppPlugin.addSurfaceModule({
     activate: ReactSurface,
-    activatesBefore: [MarkdownEvents.SetupExtensions],
+    firesBeforeActivation: [MarkdownEvents.SetupExtensions],
   }),
   AppPlugin.addTranslationsModule({ translations: [...translations, ...editorTranslations] }),
   Plugin.addModule({
@@ -77,16 +91,6 @@ export const MarkdownPlugin = Plugin.define(meta).pipe(
     activatesOn: AppActivationEvents.SetupSettings,
     activate: MarkdownState,
   }),
-  Plugin.addModule({
-    id: 'on-space-created',
-    activatesOn: SpaceEvents.SpaceCreated,
-    activate: () =>
-      Effect.succeed(
-        Capability.contributes(SpaceCapabilities.OnCreateSpace, (params) =>
-          Operation.invoke(MarkdownOperation.OnCreateSpace, params),
-        ),
-      ),
-  }),
   Plugin.addModule({
     activatesOn: AppActivationEvents.AppGraphReady,
     activate: AppGraphSerializer,

package/src/blueprints/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * as MarkdownBlueprint from './markdown-blueprint';
+export { default as MarkdownBlueprint } from './markdown-blueprint';

package/src/blueprints/markdown-blueprint.ts

@@ -2,21 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type AppCapabilities } from '@dxos/app-toolkit';
 import { Blueprint, Template } from '@dxos/blueprints';
-import { type FunctionDefinition } from '@dxos/functions';
 import { trim } from '@dxos/util';
 
-import { create, open, update } from './functions';
+import { Create, Open, Update } from '../operations/definitions';
 
-export const functions: FunctionDefinition[] = [create, open, update];
+const BLUEPRINT_KEY = 'org.dxos.blueprint.markdown';
 
-export const Key = 'dxos.org/blueprint/markdown';
-
-export const make = () =>
+const make = () =>
   Blueprint.make({
-    key: Key,
+    key: BLUEPRINT_KEY,
     name: 'Markdown',
-    tools: Blueprint.toolDefinitions({ functions }),
+    description: 'Work with markdown documents. Preferred over raw database operations.',
+    tools: Blueprint.toolDefinitions({ operations: [Create, Open, Update] }),
     instructions: Template.make({
       // TODO(wittjosiah): Move example to function input schema annotation.
       source: trim`
@@ -36,3 +35,10 @@ export const make = () =>
       `,
     }),
   });
+
+const blueprint: AppCapabilities.BlueprintDefinition = {
+  key: BLUEPRINT_KEY,
+  make,
+};
+
+export default blueprint;

package/src/capabilities/{anchor-sort/anchor-sort.ts → anchor-sort.ts}

@@ -10,7 +10,7 @@ import { Relation } from '@dxos/echo';
 import { createDocAccessor, getRangeFromCursor } from '@dxos/echo-db';
 import { type AnchoredTo } from '@dxos/types';
 
-import { Markdown } from '../../types';
+import { Markdown } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.succeed(

package/src/capabilities/{app-graph-serializer/app-graph-serializer.ts → app-graph-serializer.ts}

@@ -7,12 +7,14 @@ import * as Effect from 'effect/Effect';
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
 import { Obj } from '@dxos/echo';
-import { SpaceOperation } from '@dxos/plugin-space/types';
+import { Collection } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { isSpace } from '@dxos/react-client/echo';
-import { Collection } from '@dxos/schema';
 
-import { translations } from '../../translations';
-import { Markdown, MarkdownOperation } from '../../types';
+import { MarkdownOperation } from '#operations';
+import { Markdown } from '#types';
+
+import { translations } from '../translations';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
@@ -31,7 +33,7 @@ export default Capability.makeModule(
             name:
               doc.name ||
               doc.fallbackName ||
-              translations[0]['en-US'][Markdown.Document.typename]['object name placeholder'],
+              translations[0]['en-US'][Markdown.Document.typename]['object-name.placeholder'],
             data: content.content,
             type: 'text/markdown',
           };
@@ -46,7 +48,10 @@ export default Capability.makeModule(
           }
 
           const { invokePromise } = capabilities.get(Capabilities.OperationInvoker);
-          const createResult = await invokePromise(MarkdownOperation.Create, { name: data.name, content: data.data });
+          const createResult = await invokePromise(MarkdownOperation.CreateMarkdown, {
+            name: data.name,
+            content: data.data,
+          });
           if (!createResult.data?.object) {
             return undefined;
           }

package/src/capabilities/{artifact-definition/artifact-definition.ts → artifact-definition.ts}

@@ -14,11 +14,11 @@ 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 { SpaceOperation } from '@dxos/plugin-space/operations';
 import { Filter } from '@dxos/react-client/echo';
 
-import { meta } from '../../meta';
-import { Markdown } from '../../types';
+import { meta } from '#meta';
+import { Markdown } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.sync(() => {

package/src/capabilities/blueprint-definition.ts

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

package/src/capabilities/index.ts

@@ -2,10 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './anchor-sort';
-export * from './app-graph-serializer';
-export * from './blueprint-definition';
-export * from './operation-resolver';
-export * from './react-surface';
-export * from './settings';
-export * from './state';
+import { Capability } from '@dxos/app-framework';
+import { OperationHandlerSet } from '@dxos/operation';
+
+export const AnchorSort = Capability.lazy('AnchorSort', () => import('./anchor-sort'));
+export const AppGraphSerializer = Capability.lazy('AppGraphSerializer', () => import('./app-graph-serializer'));
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
+export const MarkdownSettings = Capability.lazy('MarkdownSettings', () => import('./settings'));
+export const MarkdownState = Capability.lazy('MarkdownState', () => import('./state'));

package/src/capabilities/node.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+import { OperationHandlerSet } from '@dxos/operation';
+
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/operation';
+
+import { MarkdownOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, MarkdownOperationHandlerSet);
+  }),
+);

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,121 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React, { forwardRef, useCallback, useMemo } from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import {
+  Surface,
+  useAtomCapability,
+  useAtomCapabilityState,
+  useCapability,
+  useSettingsState,
+} from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { Obj } from '@dxos/echo';
+import { AttentionCapabilities } from '@dxos/plugin-attention/types';
+import { Text } from '@dxos/schema';
+import { type EditorViewMode } from '@dxos/ui-editor';
+
+import { MarkdownSettings } from '#components';
+import { MarkdownCard, MarkdownContainer, type MarkdownContainerProps } from '#containers';
+import { meta } from '#meta';
+import { Markdown, MarkdownCapabilities } from '#types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'surface.document',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        role: ['article', 'section', 'tabpanel'],
+        filter: (data): data is { subject: Markdown.Document; attendableId: string; variant: undefined } =>
+          typeof data.attendableId === 'string' && Obj.instanceOf(Markdown.Document, data.subject) && !data.variant,
+        component: ({ data, role, ref }) => {
+          return (
+            <Container
+              id={Obj.getDXN(data.subject).toString()}
+              attendableId={data.attendableId}
+              subject={data.subject}
+              role={role}
+              ref={ref}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'surface.text',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        // TODO(burdon): Why is attendableId required? See EventArticle.tsx
+        filter: AppSurface.oneOf(
+          AppSurface.object(AppSurface.Article, Text.Text),
+          AppSurface.object(AppSurface.Section, Text.Text),
+          AppSurface.object(AppSurface.Tabpanel, Text.Text),
+        ),
+        component: ({ data, role, ref }) => {
+          return (
+            <Container
+              id={Obj.getDXN(data.subject).toString()}
+              attendableId={data.attendableId}
+              subject={data.subject}
+              role={role}
+              ref={ref}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'surface.plugin-settings',
+        filter: AppSurface.settings(AppSurface.Article, meta.id),
+        component: ({ data: { subject } }) => {
+          const { settings, updateSettings } = useSettingsState<Markdown.Settings>(subject.atom);
+          return <MarkdownSettings settings={settings} onSettingsChange={updateSettings} />;
+        },
+      }),
+      Surface.create({
+        id: 'surface.preview',
+        filter: AppSurface.object(AppSurface.Card, [Markdown.Document, Text.Text]),
+        component: ({ data }) => <MarkdownCard {...data} />,
+      }),
+    ]),
+  ),
+);
+
+/**
+ * Common wrapper.
+ */
+const Container = forwardRef<
+  HTMLDivElement,
+  AppSurface.ObjectArticleProps<Markdown.Document | Text.Text, { id: string }>
+>(({ id, attendableId, 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}
+      attendableId={attendableId}
+      settings={settings}
+      selectionManager={selectionManager}
+      extensionProviders={extensionProviders}
+      editorStateStore={editorState}
+      viewMode={viewMode}
+      onViewModeChange={handleViewModeChange}
+      ref={forwardedRef}
+    />
+  );
+});

package/src/capabilities/{settings/settings.ts → settings.ts}

@@ -8,8 +8,8 @@ import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
 import { createKvsStore } from '@dxos/effect';
 
-import { meta } from '../../meta';
-import { Markdown, MarkdownCapabilities } from '../../types';
+import { meta } from '#meta';
+import { Markdown, MarkdownCapabilities } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.sync(() => {