@dxos/plugin-markdown 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-markdown",
-  "version": "0.8.4-main.f9ba587",
+  "version": "0.8.4-main.fd6878d",
   "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,57 +35,57 @@
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.0.0",
+    "@automerge/automerge": "3.1.1",
     "@codemirror/search": "^6.5.6",
     "@codemirror/view": "^6.34.1",
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.9.0",
     "react-dropzone": "^14.2.3",
-    "@dxos/ai": "0.8.4-main.f9ba587",
-    "@dxos/app-framework": "0.8.4-main.f9ba587",
-    "@dxos/artifact": "0.8.4-main.f9ba587",
-    "@dxos/assistant": "0.8.4-main.f9ba587",
-    "@dxos/async": "0.8.4-main.f9ba587",
-    "@dxos/echo-schema": "0.8.4-main.f9ba587",
-    "@dxos/echo": "0.8.4-main.f9ba587",
-    "@dxos/invariant": "0.8.4-main.f9ba587",
-    "@dxos/keys": "0.8.4-main.f9ba587",
-    "@dxos/lit-ui": "0.8.4-main.f9ba587",
-    "@dxos/live-object": "0.8.4-main.f9ba587",
-    "@dxos/local-storage": "0.8.4-main.f9ba587",
-    "@dxos/plugin-attention": "0.8.4-main.f9ba587",
-    "@dxos/log": "0.8.4-main.f9ba587",
-    "@dxos/plugin-client": "0.8.4-main.f9ba587",
-    "@dxos/plugin-deck": "0.8.4-main.f9ba587",
-    "@dxos/plugin-graph": "0.8.4-main.f9ba587",
-    "@dxos/plugin-preview": "0.8.4-main.f9ba587",
-    "@dxos/plugin-space": "0.8.4-main.f9ba587",
-    "@dxos/plugin-theme": "0.8.4-main.f9ba587",
-    "@dxos/react-client": "0.8.4-main.f9ba587",
-    "@dxos/react-hooks": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-attention": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-editor": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-form": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-stack": "0.8.4-main.f9ba587",
-    "@dxos/schema": "0.8.4-main.f9ba587",
-    "@dxos/util": "0.8.4-main.f9ba587"
+    "@dxos/ai": "0.8.4-main.fd6878d",
+    "@dxos/app-framework": "0.8.4-main.fd6878d",
+    "@dxos/assistant": "0.8.4-main.fd6878d",
+    "@dxos/async": "0.8.4-main.fd6878d",
+    "@dxos/echo": "0.8.4-main.fd6878d",
+    "@dxos/echo-schema": "0.8.4-main.fd6878d",
+    "@dxos/blueprints": "0.8.4-main.fd6878d",
+    "@dxos/invariant": "0.8.4-main.fd6878d",
+    "@dxos/keys": "0.8.4-main.fd6878d",
+    "@dxos/live-object": "0.8.4-main.fd6878d",
+    "@dxos/log": "0.8.4-main.fd6878d",
+    "@dxos/lit-ui": "0.8.4-main.fd6878d",
+    "@dxos/local-storage": "0.8.4-main.fd6878d",
+    "@dxos/plugin-client": "0.8.4-main.fd6878d",
+    "@dxos/plugin-attention": "0.8.4-main.fd6878d",
+    "@dxos/plugin-graph": "0.8.4-main.fd6878d",
+    "@dxos/plugin-space": "0.8.4-main.fd6878d",
+    "@dxos/plugin-theme": "0.8.4-main.fd6878d",
+    "@dxos/plugin-preview": "0.8.4-main.fd6878d",
+    "@dxos/react-client": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-attention": "0.8.4-main.fd6878d",
+    "@dxos/react-hooks": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-editor": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-form": "0.8.4-main.fd6878d",
+    "@dxos/plugin-deck": "0.8.4-main.fd6878d",
+    "@dxos/schema": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-stack": "0.8.4-main.fd6878d",
+    "@dxos/util": "0.8.4-main.fd6878d"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.88.0",
+    "@effect/platform": "0.90.2",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.16.13",
+    "effect": "3.17.7",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/debug": "0.8.4-main.f9ba587",
-    "@dxos/plugin-storybook-layout": "0.8.4-main.f9ba587",
-    "@dxos/plugin-theme": "0.8.4-main.f9ba587",
-    "@dxos/random": "0.8.4-main.f9ba587",
-    "@dxos/react-ui": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-theme": "0.8.4-main.f9ba587",
-    "@dxos/storybook-utils": "0.8.4-main.f9ba587"
+    "@dxos/plugin-storybook-layout": "0.8.4-main.fd6878d",
+    "@dxos/debug": "0.8.4-main.fd6878d",
+    "@dxos/random": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
+    "@dxos/react-ui": "0.8.4-main.fd6878d",
+    "@dxos/plugin-theme": "0.8.4-main.fd6878d",
+    "@dxos/storybook-utils": "0.8.4-main.fd6878d"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -91,8 +93,8 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-theme": "0.8.4-main.f9ba587"
+    "@dxos/react-ui": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
   },
   "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,15 @@ import { DataType } from '@dxos/schema';
 import {
   AnchorSort,
   AppGraphSerializer,
-  ArtifactDefinition,
   IntentResolver,
-  MarkdownState,
   MarkdownSettings,
+  MarkdownState,
   ReactSurface,
 } from './capabilities';
 import { MarkdownEvents } from './events';
 import { meta } from './meta';
 import { translations } from './translations';
-import { DocumentType, MarkdownAction } from './types';
+import { Markdown, MarkdownAction } from './types';
 import { serializer } from './util';
 
 export const MarkdownPlugin = () =>
@@ -51,20 +50,20 @@ 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',
             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,7 +79,7 @@ export const MarkdownPlugin = () =>
         contributes(
           SpaceCapabilities.ObjectForm,
           defineObjectForm({
-            objectSchema: DocumentType,
+            objectSchema: Markdown.Document,
             getIntent: (_, { space }) => createIntent(MarkdownAction.Create, { spaceId: space.id }),
           }),
         ),
@@ -113,9 +112,4 @@ export const MarkdownPlugin = () =>
       activatesOn: Events.AppGraphReady,
       activate: AnchorSort,
     }),
-    defineModule({
-      id: `${meta.id}/module/artifact-definition`,
-      activatesOn: Events.SetupArtifactDefinition,
-      activate: ArtifactDefinition,
-    }),
   ]);

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 { 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 { 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',
         };

package/src/capabilities/artifact-definition.ts

@@ -2,19 +2,22 @@
 // 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, type PromiseIntentDispatcher, 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, type Space, fullyQualifiedId } from '@dxos/react-client/echo';
 
 import { meta } from '../meta';
-import { DocumentType, MarkdownAction } from '../types';
+import { Markdown, MarkdownAction } from '../types';
 
 // TODO(burdon): Factor out.
 declare global {
@@ -26,14 +29,14 @@ declare global {
 
 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.
     `,
-    schema: DocumentType,
+    schema: Markdown.Document,
     tools: [
       createTool(meta.id, {
         name: 'create',
@@ -76,9 +79,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 +102,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), 'Invalid type');
 
           const { content } = await document.content?.load();
           return ToolResult.Success({

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,7 +6,6 @@ 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 IntentResolver = lazy(() => import('./intent-resolver'));
 export const ReactSurface = lazy(() => import('./react-surface'));
 export const MarkdownSettings = lazy(() => import('./settings'));

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, pipe } 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({
@@ -44,8 +39,8 @@ export default (context: PluginContext) =>
       filter: (
         data,
       ): data is Omit<Schema.Schema.Type<typeof CollaborationActions.InsertContent.fields.input>, 'target'> & {
-        target: DocumentType;
-      } => Obj.instanceOf(DocumentType, data.target),
+        target: Markdown.Document;
+      } => Obj.instanceOf(Markdown.Document, data.target),
       resolve: async ({ target, object: objectRef, at, label }) => {
         const text = await target.content.load();
         const accessor = createDocAccessor(text, ['content']);

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} />,
     }),
   ]);

package/src/capabilities/settings.ts

@@ -6,10 +6,10 @@ import { Capabilities, contributes } from '@dxos/app-framework';
 import { live } from '@dxos/live-object';
 
 import { meta } from '../meta';
-import { type MarkdownSettingsProps, MarkdownSettingsSchema } from '../types';
+import { Markdown } from '../types';
 
 export default () => {
-  const settings = live<MarkdownSettingsProps>({
+  const settings = live<Markdown.Settings>({
     defaultViewMode: 'preview',
     toolbar: true,
     numberedHeadings: true,
@@ -19,7 +19,7 @@ export default () => {
 
   return contributes(Capabilities.Settings, {
     prefix: meta.id,
-    schema: MarkdownSettingsSchema,
+    schema: Markdown.Settings,
     value: settings,
   });
 };

package/src/capabilities/state.ts

@@ -2,25 +2,25 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { type EditorViewMode, createEditorStateStore } from '@dxos/react-ui-editor';
 
+import { meta } from '../meta';
+import { type Markdown, type MarkdownPluginState } from '../types';
+
 import { MarkdownCapabilities } from './capabilities';
-import { MARKDOWN_PLUGIN } from '../meta';
-import { type MarkdownPluginState, type MarkdownSettingsProps } from '../types';
 
 export default (context: PluginContext) => {
-  const state = new LocalStorageStore<MarkdownPluginState>(MARKDOWN_PLUGIN, { extensionProviders: [], viewMode: {} });
+  const state = new LocalStorageStore<MarkdownPluginState>(meta.id, { extensionProviders: [], viewMode: {} });
   state.prop({ key: 'viewMode', type: LocalStorageStore.json<{ [key: string]: EditorViewMode }>() });
 
   // TODO(wittjosiah): Fold into state.
-  const editorState = createEditorStateStore(`${MARKDOWN_PLUGIN}/editor`);
+  const editorState = createEditorStateStore(`${meta.id}/editor`);
 
   const getViewMode = (id: string) => {
-    const defaultViewMode = context
-      .getCapability(Capabilities.SettingsStore)
-      .getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value.defaultViewMode;
+    const defaultViewMode = context.getCapability(Capabilities.SettingsStore).getStore<Markdown.Settings>(meta.id)!
+      .value.defaultViewMode;
     return (id && state.values.viewMode[id]) || defaultViewMode;
   };
 

package/src/components/MarkdownCard/MarkdownCard.stories.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Markdown } from '@dxos/plugin-markdown/types';
+import { faker } from '@dxos/random';
+import { CardContainer } from '@dxos/react-ui-stack/testing';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { translations } from '../../translations';
+
+import { MarkdownCard } from './MarkdownCard';
+
+faker.seed(1234);
+
+const meta: Meta<typeof MarkdownCard> = {
+  title: 'plugins/plugin-markdown/Card',
+  component: MarkdownCard,
+  render: ({ role, subject, ...args }) => {
+    return (
+      <CardContainer icon='ph--text-aa--regular' role={role}>
+        <MarkdownCard role={role} subject={subject} {...args} />
+      </CardContainer>
+    );
+  },
+  decorators: [
+    withPluginManager({
+      plugins: [IntentPlugin()],
+    }),
+    withTheme,
+    withLayout(),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+  tags: ['cards'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Popover = {
+  args: {
+    role: 'card--popover',
+    subject: Markdown.makeDocument({
+      name: faker.lorem.words(3),
+      content: faker.lorem.paragraphs(3),
+    }),
+  },
+} satisfies Story;
+
+export const Intrinsic = {
+  args: {
+    role: 'card--intrinsic',
+    subject: Markdown.makeDocument({
+      name: faker.lorem.words(3),
+      content: faker.lorem.paragraphs(3),
+    }),
+  },
+} satisfies Story;
+
+export const Extrinsic = {
+  args: {
+    role: 'card--extrinsic',
+    subject: Markdown.makeDocument({
+      name: faker.lorem.words(3),
+      content: faker.lorem.paragraphs(3),
+    }),
+  },
+} satisfies Story;