@dxos/plugin-markdown 0.8.3-staging.0fa589b → 0.8.4-main.1da679c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-markdown",
-  "version": "0.8.3-staging.0fa589b",
+  "version": "0.8.4-main.1da679c",
   "description": "DXOS Surface plugin for interacting with Markdown",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,11 +10,13 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/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"
@@ -33,68 +35,69 @@
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.0.0-beta.4",
-    "@codemirror/search": "^6.5.6",
-    "@codemirror/view": "^6.34.1",
+    "@automerge/automerge": "3.1.1",
+    "@codemirror/search": "^6.5.11",
+    "@codemirror/view": "^6.38.2",
+    "@effect/ai": "0.25.2",
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.9.0",
     "react-dropzone": "^14.2.3",
-    "@dxos/ai": "0.8.3-staging.0fa589b",
-    "@dxos/app-framework": "0.8.3-staging.0fa589b",
-    "@dxos/assistant": "0.8.3-staging.0fa589b",
-    "@dxos/artifact": "0.8.3-staging.0fa589b",
-    "@dxos/async": "0.8.3-staging.0fa589b",
-    "@dxos/invariant": "0.8.3-staging.0fa589b",
-    "@dxos/echo": "0.8.3-staging.0fa589b",
-    "@dxos/keys": "0.8.3-staging.0fa589b",
-    "@dxos/echo-schema": "0.8.3-staging.0fa589b",
-    "@dxos/lit-ui": "0.8.3-staging.0fa589b",
-    "@dxos/local-storage": "0.8.3-staging.0fa589b",
-    "@dxos/log": "0.8.3-staging.0fa589b",
-    "@dxos/live-object": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-attention": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-client": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-deck": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-preview": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-graph": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-space": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-theme": "0.8.3-staging.0fa589b",
-    "@dxos/react-client": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-attention": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-editor": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-form": "0.8.3-staging.0fa589b",
-    "@dxos/react-hooks": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-stack": "0.8.3-staging.0fa589b",
-    "@dxos/schema": "0.8.3-staging.0fa589b",
-    "@dxos/util": "0.8.3-staging.0fa589b"
+    "@dxos/ai": "0.8.4-main.1da679c",
+    "@dxos/assistant": "0.8.4-main.1da679c",
+    "@dxos/app-framework": "0.8.4-main.1da679c",
+    "@dxos/async": "0.8.4-main.1da679c",
+    "@dxos/echo": "0.8.4-main.1da679c",
+    "@dxos/echo-db": "0.8.4-main.1da679c",
+    "@dxos/blueprints": "0.8.4-main.1da679c",
+    "@dxos/echo-schema": "0.8.4-main.1da679c",
+    "@dxos/functions": "0.8.4-main.1da679c",
+    "@dxos/invariant": "0.8.4-main.1da679c",
+    "@dxos/lit-ui": "0.8.4-main.1da679c",
+    "@dxos/live-object": "0.8.4-main.1da679c",
+    "@dxos/keys": "0.8.4-main.1da679c",
+    "@dxos/local-storage": "0.8.4-main.1da679c",
+    "@dxos/plugin-client": "0.8.4-main.1da679c",
+    "@dxos/plugin-attention": "0.8.4-main.1da679c",
+    "@dxos/plugin-deck": "0.8.4-main.1da679c",
+    "@dxos/plugin-graph": "0.8.4-main.1da679c",
+    "@dxos/log": "0.8.4-main.1da679c",
+    "@dxos/plugin-space": "0.8.4-main.1da679c",
+    "@dxos/plugin-preview": "0.8.4-main.1da679c",
+    "@dxos/react-client": "0.8.4-main.1da679c",
+    "@dxos/react-hooks": "0.8.4-main.1da679c",
+    "@dxos/react-ui-attention": "0.8.4-main.1da679c",
+    "@dxos/react-ui-editor": "0.8.4-main.1da679c",
+    "@dxos/react-ui-stack": "0.8.4-main.1da679c",
+    "@dxos/react-ui-form": "0.8.4-main.1da679c",
+    "@dxos/schema": "0.8.4-main.1da679c",
+    "@dxos/util": "0.8.4-main.1da679c",
+    "@dxos/plugin-theme": "0.8.4-main.1da679c"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect-rx/rx-react": "0.38.0",
+    "@effect/platform": "0.90.2",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.14.21",
+    "effect": "3.17.7",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/debug": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-theme": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-storybook-layout": "0.8.3-staging.0fa589b",
-    "@dxos/random": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b",
-    "@dxos/storybook-utils": "0.8.3-staging.0fa589b"
+    "vite": "7.1.1",
+    "@dxos/debug": "0.8.4-main.1da679c",
+    "@dxos/plugin-storybook-layout": "0.8.4-main.1da679c",
+    "@dxos/plugin-theme": "0.8.4-main.1da679c",
+    "@dxos/random": "0.8.4-main.1da679c",
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c",
+    "@dxos/storybook-utils": "0.8.4-main.1da679c"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b"
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c"
   },
   "publishConfig": {
     "access": "public"

package/src/MarkdownPlugin.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, createIntent, defineModule, definePlugin, Events } from '@dxos/app-framework';
+import { Capabilities, Events, contributes, createIntent, defineModule, definePlugin } from '@dxos/app-framework';
 import { type Obj, Ref } from '@dxos/echo';
 import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
 import { SpaceCapabilities } from '@dxos/plugin-space';
@@ -14,16 +14,18 @@ import { DataType } from '@dxos/schema';
 import {
   AnchorSort,
   AppGraphSerializer,
-  ArtifactDefinition,
+  BLUEPRINT_KEY,
+  BlueprintDefinition,
   IntentResolver,
-  MarkdownState,
   MarkdownSettings,
+  MarkdownState,
   ReactSurface,
+  Toolkit,
 } from './capabilities';
 import { MarkdownEvents } from './events';
 import { meta } from './meta';
-import translations from './translations';
-import { DocumentType, MarkdownAction } from './types';
+import { translations } from './translations';
+import { Markdown, MarkdownAction } from './types';
 import { serializer } from './util';
 
 export const MarkdownPlugin = () =>
@@ -51,20 +53,21 @@ export const MarkdownPlugin = () =>
       activatesOn: Events.SetupMetadata,
       activate: () =>
         contributes(Capabilities.Metadata, {
-          id: DocumentType.typename,
+          id: Markdown.Document.typename,
           metadata: {
-            label: (object: DocumentType) => object.name || object.fallbackName,
+            label: (object: Markdown.Document) => object.name || object.fallbackName,
             icon: 'ph--text-aa--regular',
+            blueprints: [BLUEPRINT_KEY],
             graphProps: {
               managesAutofocus: true,
             },
             // TODO(wittjosiah): Move out of metadata.
-            loadReferences: async (doc: DocumentType) => await Ref.Array.loadAll<Obj.Any>([doc.content]),
+            loadReferences: async (doc: Markdown.Document) => await Ref.Array.loadAll<Obj.Any>([doc.content]),
             serializer,
             // TODO(wittjosiah): Consider how to do generic comments without these.
             comments: 'anchored',
             selectionMode: 'multi-range',
-            getAnchorLabel: (doc: DocumentType, anchor: string): string | undefined => {
+            getAnchorLabel: (doc: Markdown.Document, anchor: string): string | undefined => {
               if (doc.content) {
                 const [start, end] = anchor.split(':');
                 return getTextInRange(createDocAccessor(doc.content.target!, ['content']), start, end);
@@ -80,8 +83,8 @@ export const MarkdownPlugin = () =>
         contributes(
           SpaceCapabilities.ObjectForm,
           defineObjectForm({
-            objectSchema: DocumentType,
-            getIntent: (_, { space }) => createIntent(MarkdownAction.Create, { spaceId: space.id }),
+            objectSchema: Markdown.Document,
+            getIntent: () => createIntent(MarkdownAction.Create, {}),
           }),
         ),
     }),
@@ -114,8 +117,14 @@ export const MarkdownPlugin = () =>
       activate: AnchorSort,
     }),
     defineModule({
-      id: `${meta.id}/module/artifact-definition`,
+      id: `${meta.id}/module/blueprint`,
       activatesOn: Events.SetupArtifactDefinition,
-      activate: ArtifactDefinition,
+      activate: BlueprintDefinition,
+    }),
+    defineModule({
+      id: `${meta.id}/module/toolkit`,
+      // TODO(wittjosiah): Use a different event.
+      activatesOn: Events.Startup,
+      activate: Toolkit,
     }),
   ]);

package/src/capabilities/anchor-sort.ts

@@ -6,13 +6,13 @@ import { Capabilities, contributes } from '@dxos/app-framework';
 import { Type } from '@dxos/echo';
 import { createDocAccessor, getRangeFromCursor, getTarget } from '@dxos/react-client/echo';
 
-import { DocumentType } from '../types';
+import { Markdown } from '../types';
 
 export default () =>
   contributes(Capabilities.AnchorSort, {
-    key: Type.getTypename(DocumentType)!,
+    key: Type.getTypename(Markdown.Document)!,
     sort: (anchorA, anchorB) => {
-      const doc = getTarget(anchorA) as DocumentType;
+      const doc = getTarget(anchorA) as Markdown.Document;
       const accessor = doc.content.target ? createDocAccessor(doc.content.target, ['content']) : undefined;
       if (doc !== getTarget(anchorB) || !accessor) {
         return 0;

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

@@ -4,19 +4,19 @@
 
 import { pipe } from 'effect';
 
-import { contributes, Capabilities, type PluginContext, chain, createIntent } from '@dxos/app-framework';
-import { Obj, Type } from '@dxos/echo';
+import { Capabilities, type PluginContext, chain, contributes, createIntent } from '@dxos/app-framework';
+import { Obj } from '@dxos/echo';
 import { SpaceAction } from '@dxos/plugin-space/types';
 import { isSpace } from '@dxos/react-client/echo';
 import { DataType } from '@dxos/schema';
 
-import translations from '../translations';
-import { MarkdownAction, DocumentType } from '../types';
+import { translations } from '../translations';
+import { Markdown, MarkdownAction } from '../types';
 
 export default (context: PluginContext) =>
   contributes(Capabilities.AppGraphSerializer, [
     {
-      inputType: DocumentType.typename,
+      inputType: Markdown.Document.typename,
       outputType: 'text/markdown',
       // Reconcile with metadata serializers.
       serialize: async (node) => {
@@ -24,7 +24,9 @@ export default (context: PluginContext) =>
         const content = await doc.content.load();
         return {
           name:
-            doc.name || doc.fallbackName || translations[0]['en-US'][DocumentType.typename]['object name placeholder'],
+            doc.name ||
+            doc.fallbackName ||
+            translations[0]['en-US'][Markdown.Document.typename]['object name placeholder'],
           data: content.content,
           type: 'text/markdown',
         };
@@ -33,7 +35,7 @@ export default (context: PluginContext) =>
         const space = ancestors.find(isSpace);
         const target =
           ancestors.findLast((ancestor) => Obj.instanceOf(DataType.Collection, ancestor)) ??
-          space?.properties[Type.getTypename(DataType.Collection)]?.target;
+          space?.properties[DataType.Collection.typename]?.target;
         if (!space || !target) {
           return;
         }
@@ -41,7 +43,7 @@ export default (context: PluginContext) =>
         const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
         const result = await dispatch(
           pipe(
-            createIntent(MarkdownAction.Create, { spaceId: space.id, name: data.name, content: data.data }),
+            createIntent(MarkdownAction.Create, { name: data.name, content: data.data }),
             chain(SpaceAction.AddObject, { target }),
           ),
         );

package/src/capabilities/artifact-definition.ts

@@ -2,38 +2,33 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe, Schema } from 'effect';
+// ISSUE(burdon): defineArtifact
+// @ts-nocheck
 
-import { createTool, ToolResult } from '@dxos/ai';
-import { Capabilities, chain, contributes, createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
-import { ArtifactId, defineArtifact } from '@dxos/artifact';
-import { createArtifactElement } from '@dxos/assistant';
+import { Schema, pipe } from 'effect';
+
+import { ToolResult, createTool } from '@dxos/ai';
+import { Capabilities, chain, contributes, createIntent } from '@dxos/app-framework';
+import { ArtifactId, createArtifactElement } from '@dxos/assistant';
+import { defineArtifact } from '@dxos/blueprints';
 import { Obj } from '@dxos/echo';
-import { invariant, assertArgument } from '@dxos/invariant';
+import { assertArgument, invariant } from '@dxos/invariant';
 import { SpaceAction } from '@dxos/plugin-space/types';
-import { Filter, fullyQualifiedId, type Space } from '@dxos/react-client/echo';
+import { Filter, fullyQualifiedId } from '@dxos/react-client/echo';
 
 import { meta } from '../meta';
-import { DocumentType, MarkdownAction } from '../types';
-
-// TODO(burdon): Factor out.
-declare global {
-  interface ToolContextExtensions {
-    space?: Space;
-    dispatch?: PromiseIntentDispatcher;
-  }
-}
+import { Markdown, MarkdownAction } from '../types';
 
 export default () => {
   const definition = defineArtifact({
-    id: `artifact:${meta.id}`,
+    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.
+      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: DocumentType,
+    schema: Markdown.Document,
     tools: [
       createTool(meta.id, {
         name: 'create',
@@ -76,9 +71,9 @@ export default () => {
         execute: async (_input, { extensions }) => {
           invariant(extensions?.space, 'No space');
           const space = extensions.space;
-          const { objects: documents } = await space.db.query(Filter.type(DocumentType)).run();
+          const { objects: documents } = await space.db.query(Filter.type(Markdown.Document)).run();
           const documentInfo = documents.map((doc) => {
-            invariant(Obj.instanceOf(DocumentType, doc));
+            invariant(Obj.instanceOf(Markdown.Document, doc));
             return {
               id: fullyQualifiedId(doc),
               name: doc.name || doc.fallbackName || 'Unnamed Document',
@@ -99,7 +94,7 @@ export default () => {
         execute: async ({ id }, { extensions }) => {
           invariant(extensions?.space, 'No space');
           const document = await extensions.space.db.query(Filter.ids(ArtifactId.toDXN(id).toString())).first();
-          assertArgument(Obj.instanceOf(DocumentType, document), 'Invalid type');
+          assertArgument(Obj.instanceOf(Markdown.Document, document), 'document', 'Invalid type');
 
           const { content } = await document.content?.load();
           return ToolResult.Success({

package/src/capabilities/blueprint-definition.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, type Capability, contributes } from '@dxos/app-framework';
+import { Blueprint, Template } from '@dxos/blueprints';
+import { type FunctionDefinition } from '@dxos/functions';
+import { trim } from '@dxos/util';
+
+import { diff, open } from '../functions';
+
+const functions: FunctionDefinition[] = [diff, open];
+const tools = ['add-proposals', 'create-document'];
+
+export const BLUEPRINT_KEY = 'dxos.org/blueprint/markdown';
+
+export default (): Capability<any>[] => [
+  contributes(Capabilities.Functions, functions),
+  contributes(
+    Capabilities.BlueprintDefinition,
+    Blueprint.make({
+      key: BLUEPRINT_KEY,
+      name: 'Markdown',
+      tools: Blueprint.toolDefinitions({ functions, tools }),
+      instructions: Template.make({
+        source: trim`
+            You can create 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.
+            For example:
+            - "There is a tyop in this sentence."
+            + "There is a typo in this sentence."
+            - "This id goof."
+            + "This is good."
+          `,
+      }),
+    }),
+  ),
+];

package/src/capabilities/capabilities.ts

@@ -3,9 +3,9 @@
 //
 
 import { defineCapability } from '@dxos/app-framework';
-import { type EditorViewMode, type EditorStateStore } from '@dxos/react-ui-editor';
+import { type EditorStateStore, type EditorViewMode } from '@dxos/react-ui-editor';
 
-import { MARKDOWN_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type MarkdownExtensionProvider, type MarkdownPluginState } from '../types';
 
 export namespace MarkdownCapabilities {
@@ -14,7 +14,8 @@ export namespace MarkdownCapabilities {
     editorState: EditorStateStore;
     getViewMode: (id: string) => EditorViewMode;
     setViewMode: (id: string, viewMode: EditorViewMode) => void;
-  }>(`${MARKDOWN_PLUGIN}/capability/state`);
+  }>(`${meta.id}/capability/state`);
 
-  export const Extensions = defineCapability<MarkdownExtensionProvider[]>(`${MARKDOWN_PLUGIN}/capability/extensions`);
+  // TODO(burdon): Move to ./types (external API)?
+  export const Extensions = defineCapability<MarkdownExtensionProvider[]>(`${meta.id}/capability/extensions`);
 }

package/src/capabilities/index.ts

@@ -6,10 +6,12 @@ import { lazy } from '@dxos/app-framework';
 
 export const AnchorSort = lazy(() => import('./anchor-sort'));
 export const AppGraphSerializer = lazy(() => import('./app-graph-serializer'));
-export const ArtifactDefinition = lazy(() => import('./artifact-definition'));
+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 const Toolkit = lazy(() => import('./toolkit'));
 
+export * from './blueprint-definition';
 export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -3,33 +3,28 @@
 //
 
 import { next as A } from '@automerge/automerge';
-import { Option, pipe, type Schema } from 'effect';
+import { Option, type Schema } from 'effect';
 
 import {
   Capabilities,
   CollaborationActions,
+  type PluginContext,
   contributes,
   createResolver,
-  type PluginContext,
 } from '@dxos/app-framework';
 import { Obj } from '@dxos/echo';
-import { createDocAccessor, getRangeFromCursor, Ref } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
+import { createDocAccessor, getRangeFromCursor } from '@dxos/react-client/echo';
+
+import { Markdown, MarkdownAction } from '../types';
 
 import { MarkdownCapabilities } from './capabilities';
-import { DocumentType, MarkdownAction } from '../types';
 
 export default (context: PluginContext) =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
       intent: MarkdownAction.Create,
       resolve: ({ name, content }) => {
-        const doc = Obj.make(DocumentType, {
-          name,
-          content: Ref.make(Obj.make(DataType.Text, { content: content ?? '' })),
-        });
-
-        return { data: { object: doc } };
+        return { data: { object: Markdown.makeDocument({ name, content }) } };
       },
     }),
     createResolver({
@@ -40,23 +35,22 @@ export default (context: PluginContext) =>
       },
     }),
     createResolver({
-      intent: CollaborationActions.InsertContent,
+      intent: CollaborationActions.AcceptProposal,
       filter: (
         data,
-      ): data is Omit<Schema.Schema.Type<typeof CollaborationActions.InsertContent.fields.input>, 'target'> & {
-        target: DocumentType;
-      } => Obj.instanceOf(DocumentType, data.target),
-      resolve: async ({ target, object: objectRef, at, label }) => {
-        const text = await target.content.load();
+      ): data is Omit<Schema.Schema.Type<typeof CollaborationActions.AcceptProposal.fields.input>, 'subject'> & {
+        subject: Markdown.Document;
+      } => Obj.instanceOf(Markdown.Document, data.subject),
+      resolve: async ({ subject, anchor, proposal }) => {
+        const text = await subject.content.load();
         const accessor = createDocAccessor(text, ['content']);
-        const { start, end } = pipe(
-          Option.fromNullable(at),
+        const { start, end } = Option.fromNullable(anchor).pipe(
           Option.flatMap((at) => Option.fromNullable(getRangeFromCursor(accessor, at))),
+          // Fallback to the end of the document.
           Option.getOrElse(() => ({ start: text.content.length - 1, end: text.content.length - 1 })),
         );
         accessor.handle.change((doc) => {
-          const ref = `[${label ?? 'Generated content'}]](${objectRef.dxn.toString()})\n`;
-          A.splice(doc, accessor.path.slice(), start, end - start, ref);
+          A.splice(doc, accessor.path.slice(), start, end - start, proposal.text);
         });
       },
     }),

package/src/capabilities/react-surface.tsx

@@ -4,29 +4,31 @@
 
 import React from 'react';
 
-import { createSurface, contributes, Capabilities, useCapability } from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
 import { Obj } from '@dxos/echo';
 import { SettingsStore } from '@dxos/local-storage';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { DataType } from '@dxos/schema';
 
+import { MarkdownCard, MarkdownContainer, MarkdownSettings } from '../components';
+import { meta } from '../meta';
+import { Markdown } from '../types';
+import { isEditorModel } from '../util';
+
 import { MarkdownCapabilities } from './capabilities';
-import { MarkdownContainer, MarkdownSettings, MarkdownPreview } from '../components';
-import { MARKDOWN_PLUGIN } from '../meta';
-import { DocumentType, isEditorModel, type MarkdownSettingsProps } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: `${MARKDOWN_PLUGIN}/document`,
+      id: `${meta.id}/surface/document`,
       role: ['article', 'section', 'tabpanel'],
-      filter: (data): data is { subject: DocumentType; variant: undefined } =>
-        Obj.instanceOf(DocumentType, data.subject) && !data.variant,
+      filter: (data): data is { subject: Markdown.Document; variant: undefined } =>
+        Obj.instanceOf(Markdown.Document, data.subject) && !data.variant,
       component: ({ data, role }) => {
         const selectionManager = useCapability(AttentionCapabilities.Selection);
         const settingsStore = useCapability(Capabilities.SettingsStore);
-        const settings = settingsStore.getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
+        const settings = settingsStore.getStore<Markdown.Settings>(meta.id)!.value;
         const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
         const viewMode = getViewMode(fullyQualifiedId(data.subject));
 
@@ -46,14 +48,14 @@ export default () =>
       },
     }),
     createSurface({
-      id: `${MARKDOWN_PLUGIN}/text`,
+      id: `${meta.id}/surface/text`,
       role: ['article', 'section', 'tabpanel'],
       filter: (data): data is { id: string; subject: DataType.Text } =>
         typeof data.id === 'string' && Obj.instanceOf(DataType.Text, data.subject),
       component: ({ data, role }) => {
         const selectionManager = useCapability(AttentionCapabilities.Selection);
         const settingsStore = useCapability(Capabilities.SettingsStore);
-        const settings = settingsStore.getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
+        const settings = settingsStore.getStore<Markdown.Settings>(meta.id)!.value;
         const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
 
         return (
@@ -72,13 +74,13 @@ export default () =>
       },
     }),
     createSurface({
-      id: `${MARKDOWN_PLUGIN}/editor`,
+      id: `${meta.id}/surface/editor`,
       role: ['article', 'section'],
       filter: (data): data is { subject: { id: string; text: string } } => isEditorModel(data.subject),
       component: ({ data, role }) => {
         const selectionManager = useCapability(AttentionCapabilities.Selection);
         const settingsStore = useCapability(Capabilities.SettingsStore);
-        const settings = settingsStore.getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
+        const settings = settingsStore.getStore<Markdown.Settings>(meta.id)!.value;
         const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
 
         return (
@@ -97,17 +99,17 @@ export default () =>
       },
     }),
     createSurface({
-      id: `${MARKDOWN_PLUGIN}/plugin-settings`,
+      id: `${meta.id}/surface/plugin-settings`,
       role: 'article',
-      filter: (data): data is { subject: SettingsStore<MarkdownSettingsProps> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === MARKDOWN_PLUGIN,
+      filter: (data): data is { subject: SettingsStore<Markdown.Settings> } =>
+        data.subject instanceof SettingsStore && data.subject.prefix === meta.id,
       component: ({ data: { subject } }) => <MarkdownSettings settings={subject.value} />,
     }),
     createSurface({
-      id: `${MARKDOWN_PLUGIN}/preview`,
-      role: ['popover', 'card--kanban', 'card--document', 'card'],
-      filter: (data): data is { subject: DocumentType | DataType.Text } =>
-        Obj.instanceOf(DocumentType, data.subject) || Obj.instanceOf(DataType.Text, data.subject),
-      component: ({ data, role }) => <MarkdownPreview {...data} role={role} />,
+      id: `${meta.id}/surface/preview`,
+      role: ['card--popover', 'card--intrinsic', 'card--extrinsic', 'card--transclusion', 'card'],
+      filter: (data): data is { subject: Markdown.Document | DataType.Text } =>
+        Obj.instanceOf(Markdown.Document, data.subject) || Obj.instanceOf(DataType.Text, data.subject),
+      component: ({ data, role }) => <MarkdownCard {...data} role={role} />,
     }),
   ]);