@dxos/plugin-markdown 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-markdown",
-  "version": "0.8.4-main.406dc2a",
+  "version": "0.8.4-main.548089c",
   "description": "DXOS Surface plugin for interacting with Markdown",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -15,6 +15,12 @@
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
+    "./toolkit": {
+      "source": "./src/toolkit.ts",
+      "types": "./dist/types/src/toolkit.d.ts",
+      "browser": "./dist/lib/browser/toolkit.mjs",
+      "node": "./dist/lib/node-esm/toolkit.mjs"
+    },
     "./types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
@@ -25,6 +31,9 @@
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
+      "toolkit": [
+        "dist/types/src/toolkit.d.ts"
+      ],
       "types": [
         "dist/types/src/types/index.d.ts"
       ]
@@ -37,67 +46,74 @@
   "dependencies": {
     "@automerge/automerge": "3.1.2",
     "@codemirror/search": "^6.5.11",
+    "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
     "@effect/ai": "0.29.1",
     "@effect/experimental": "0.56.0",
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.12.1",
+    "@radix-ui/react-context": "^1.0.5",
     "react-dropzone": "^14.2.3",
-    "@dxos/ai": "0.8.4-main.406dc2a",
-    "@dxos/app-framework": "0.8.4-main.406dc2a",
-    "@dxos/assistant": "0.8.4-main.406dc2a",
-    "@dxos/echo": "0.8.4-main.406dc2a",
-    "@dxos/echo-db": "0.8.4-main.406dc2a",
-    "@dxos/blueprints": "0.8.4-main.406dc2a",
-    "@dxos/invariant": "0.8.4-main.406dc2a",
-    "@dxos/functions": "0.8.4-main.406dc2a",
-    "@dxos/lit-ui": "0.8.4-main.406dc2a",
-    "@dxos/keys": "0.8.4-main.406dc2a",
-    "@dxos/async": "0.8.4-main.406dc2a",
-    "@dxos/local-storage": "0.8.4-main.406dc2a",
-    "@dxos/live-object": "0.8.4-main.406dc2a",
-    "@dxos/plugin-attention": "0.8.4-main.406dc2a",
-    "@dxos/log": "0.8.4-main.406dc2a",
-    "@dxos/plugin-client": "0.8.4-main.406dc2a",
-    "@dxos/plugin-deck": "0.8.4-main.406dc2a",
-    "@dxos/plugin-graph": "0.8.4-main.406dc2a",
-    "@dxos/plugin-preview": "0.8.4-main.406dc2a",
-    "@dxos/plugin-space": "0.8.4-main.406dc2a",
-    "@dxos/react-hooks": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-editor": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-form": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-attention": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-stack": "0.8.4-main.406dc2a",
-    "@dxos/schema": "0.8.4-main.406dc2a",
-    "@dxos/react-client": "0.8.4-main.406dc2a",
-    "@dxos/util": "0.8.4-main.406dc2a",
-    "@dxos/plugin-theme": "0.8.4-main.406dc2a"
+    "@dxos/ai": "0.8.4-main.548089c",
+    "@dxos/app-framework": "0.8.4-main.548089c",
+    "@dxos/assistant": "0.8.4-main.548089c",
+    "@dxos/blueprints": "0.8.4-main.548089c",
+    "@dxos/async": "0.8.4-main.548089c",
+    "@dxos/client-protocol": "0.8.4-main.548089c",
+    "@dxos/echo": "0.8.4-main.548089c",
+    "@dxos/functions": "0.8.4-main.548089c",
+    "@dxos/effect": "0.8.4-main.548089c",
+    "@dxos/functions-runtime": "0.8.4-main.548089c",
+    "@dxos/keys": "0.8.4-main.548089c",
+    "@dxos/echo-db": "0.8.4-main.548089c",
+    "@dxos/invariant": "0.8.4-main.548089c",
+    "@dxos/lit-ui": "0.8.4-main.548089c",
+    "@dxos/local-storage": "0.8.4-main.548089c",
+    "@dxos/live-object": "0.8.4-main.548089c",
+    "@dxos/log": "0.8.4-main.548089c",
+    "@dxos/plugin-attention": "0.8.4-main.548089c",
+    "@dxos/plugin-client": "0.8.4-main.548089c",
+    "@dxos/plugin-deck": "0.8.4-main.548089c",
+    "@dxos/plugin-graph": "0.8.4-main.548089c",
+    "@dxos/plugin-theme": "0.8.4-main.548089c",
+    "@dxos/plugin-preview": "0.8.4-main.548089c",
+    "@dxos/react-client": "0.8.4-main.548089c",
+    "@dxos/react-hooks": "0.8.4-main.548089c",
+    "@dxos/plugin-space": "0.8.4-main.548089c",
+    "@dxos/react-ui-attention": "0.8.4-main.548089c",
+    "@dxos/react-ui-editor": "0.8.4-main.548089c",
+    "@dxos/react-ui-stack": "0.8.4-main.548089c",
+    "@dxos/react-ui-form": "0.8.4-main.548089c",
+    "@dxos/schema": "0.8.4-main.548089c",
+    "@dxos/types": "0.8.4-main.548089c",
+    "@dxos/react-ui-menu": "0.8.4-main.548089c",
+    "@dxos/util": "0.8.4-main.548089c"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.42.4",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "0.92.1",
     "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@types/react-dom": "~19.2.2",
     "effect": "3.18.3",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/debug": "0.8.4-main.406dc2a",
-    "@dxos/plugin-storybook-layout": "0.8.4-main.406dc2a",
-    "@dxos/plugin-theme": "0.8.4-main.406dc2a",
-    "@dxos/random": "0.8.4-main.406dc2a",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
-    "@dxos/storybook-utils": "0.8.4-main.406dc2a"
+    "@dxos/debug": "0.8.4-main.548089c",
+    "@dxos/plugin-storybook-layout": "0.8.4-main.548089c",
+    "@dxos/plugin-theme": "0.8.4-main.548089c",
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/storybook-utils": "0.8.4-main.548089c",
+    "@dxos/random": "0.8.4-main.548089c"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a"
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c"
   },
   "publishConfig": {
     "access": "public"

package/src/MarkdownPlugin.tsx

@@ -9,18 +9,17 @@ import { SpaceCapabilities } from '@dxos/plugin-space';
 import { defineObjectForm } from '@dxos/plugin-space/types';
 import { createDocAccessor, getTextInRange } from '@dxos/react-client/echo';
 import { translations as editorTranslations } from '@dxos/react-ui-editor';
-import { DataType } from '@dxos/schema';
+import { Text } from '@dxos/schema';
 
 import {
   AnchorSort,
   AppGraphSerializer,
-  BLUEPRINT_KEY,
   BlueprintDefinition,
   IntentResolver,
+  MARKDOWN_BLUEPRINT_KEY,
   MarkdownSettings,
   MarkdownState,
   ReactSurface,
-  Toolkit,
 } from './capabilities';
 import { MarkdownEvents } from './events';
 import { meta } from './meta';
@@ -56,7 +55,8 @@ export const MarkdownPlugin = definePlugin(meta, () => [
         metadata: {
           label: (object: Markdown.Document) => object.name || object.fallbackName,
           icon: 'ph--text-aa--regular',
-          blueprints: [BLUEPRINT_KEY],
+          iconHue: 'indigo',
+          blueprints: [MARKDOWN_BLUEPRINT_KEY],
           graphProps: {
             managesAutofocus: true,
           },
@@ -90,7 +90,12 @@ export const MarkdownPlugin = definePlugin(meta, () => [
   defineModule({
     id: `${meta.id}/module/schema`,
     activatesOn: ClientEvents.SetupSchema,
-    activate: () => contributes(ClientCapabilities.Schema, [DataType.Text]),
+    activate: () => contributes(ClientCapabilities.Schema, [Text.Text]),
+  }),
+  defineModule({
+    id: `${meta.id}/module/whitelist-schema`,
+    activatesOn: ClientEvents.SetupSchema,
+    activate: () => contributes(ClientCapabilities.SchemaWhiteList, [Markdown.Document]),
   }),
   defineModule({
     id: `${meta.id}/module/react-surface`,
@@ -120,10 +125,4 @@ export const MarkdownPlugin = definePlugin(meta, () => [
     activatesOn: Events.SetupArtifactDefinition,
     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

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

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

@@ -8,7 +8,7 @@ import { Capabilities, type PluginContext, chain, contributes, createIntent } fr
 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 { Collection } from '@dxos/schema';
 
 import { translations } from '../translations';
 import { Markdown, MarkdownAction } from '../types';
@@ -34,8 +34,8 @@ export default (context: PluginContext) =>
       deserialize: async (data, ancestors) => {
         const space = ancestors.find(isSpace);
         const target =
-          ancestors.findLast((ancestor) => Obj.instanceOf(DataType.Collection, ancestor)) ??
-          space?.properties[DataType.Collection.typename]?.target;
+          ancestors.findLast((ancestor) => Obj.instanceOf(Collection.Collection, ancestor)) ??
+          space?.properties[Collection.Collection.typename]?.target;
         if (!space || !target) {
           return;
         }

package/src/capabilities/artifact-definition.ts

@@ -15,7 +15,7 @@ import { defineArtifact } from '@dxos/blueprints';
 import { Obj } from '@dxos/echo';
 import { assertArgument, invariant } from '@dxos/invariant';
 import { SpaceAction } from '@dxos/plugin-space/types';
-import { Filter, fullyQualifiedId } from '@dxos/react-client/echo';
+import { Filter } from '@dxos/react-client/echo';
 
 import { meta } from '../meta';
 import { Markdown, MarkdownAction } from '../types';
@@ -76,7 +76,7 @@ export default () => {
           const documentInfo = documents.map((doc) => {
             invariant(Obj.instanceOf(Markdown.Document, doc));
             return {
-              id: fullyQualifiedId(doc),
+              id: Obj.getDXN(doc).toString(),
               name: doc.name || doc.fallbackName || 'Unnamed Document',
               // TODO(ZaymonFC): Include updatedAt?
             };
@@ -99,7 +99,7 @@ export default () => {
 
           const { content } = await document.content?.load();
           return ToolResult.Success({
-            id: fullyQualifiedId(document),
+            id: Obj.getDXN(document).toString(),
             name: document.name || document.fallbackName || 'Unnamed Document',
             content,
           });

package/src/capabilities/blueprint-definition.ts

@@ -2,38 +2,42 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, type Capability, contributes } from '@dxos/app-framework';
+import { Capabilities, 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';
+import { MarkdownFunction } from '../functions';
 
-const functions: FunctionDefinition[] = [diff, open];
-const tools = ['add-proposals', 'create-document'];
+const functions: FunctionDefinition[] = [MarkdownFunction.create, MarkdownFunction.open, MarkdownFunction.update];
 
-export const BLUEPRINT_KEY = 'dxos.org/blueprint/markdown';
+export const MARKDOWN_BLUEPRINT_KEY = 'dxos.org/blueprint/markdown';
 
-export default (): Capability<any>[] => [
+export const MarkdownBlueprint: Blueprint.Blueprint = Blueprint.make({
+  key: MARKDOWN_BLUEPRINT_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."
+      ${'```'}
+    `,
+  }),
+});
+
+export default () => [
   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."
-          `,
-      }),
-    }),
-  ),
+  contributes(Capabilities.BlueprintDefinition, MarkdownBlueprint),
 ];

package/src/capabilities/capabilities.ts

@@ -13,6 +13,7 @@ export namespace MarkdownCapabilities {
     state: MarkdownPluginState;
     editorState: EditorStateStore;
     getViewMode: (id: string) => EditorViewMode;
+    // TODO(burdon): Event object.
     setViewMode: (id: string, viewMode: EditorViewMode) => void;
   }>(`${meta.id}/capability/state`);
 

package/src/capabilities/index.ts

@@ -4,14 +4,13 @@
 
 import { lazy } from '@dxos/app-framework';
 
-export const AnchorSort = lazy(() => import('./anchor-sort'));
+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 const Toolkit = lazy(() => import('./toolkit'));
 
 export * from './blueprint-definition';
 export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -25,7 +25,7 @@ export default (context: PluginContext) =>
     createResolver({
       intent: MarkdownAction.Create,
       resolve: ({ name, content }) => {
-        return { data: { object: Markdown.makeDocument({ name, content }) } };
+        return { data: { object: Markdown.make({ name, content }) } };
       },
     }),
     createResolver({

package/src/capabilities/react-surface.tsx

@@ -2,16 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/react';
 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 { Text } from '@dxos/schema';
 
-import { MarkdownCard, MarkdownContainer, MarkdownSettings } from '../components';
+import { MarkdownCard, MarkdownContainer, type MarkdownContainerProps, MarkdownSettings } from '../components';
 import { meta } from '../meta';
 import { Markdown } from '../types';
 import { isEditorModel } from '../util';
@@ -26,76 +26,25 @@ export default () =>
       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<Markdown.Settings>(meta.id)!.value;
-        const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
-        const viewMode = getViewMode(fullyQualifiedId(data.subject));
-
-        return (
-          <MarkdownContainer
-            id={fullyQualifiedId(data.subject)}
-            object={data.subject}
-            role={role}
-            settings={settings}
-            selectionManager={selectionManager}
-            extensionProviders={state.extensionProviders}
-            viewMode={viewMode}
-            editorStateStore={editorState}
-            onViewModeChange={setViewMode}
-          />
-        );
+        return <Container id={Obj.getDXN(data.subject).toString()} subject={data.subject} role={role} />;
       },
     }),
     createSurface({
       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),
+      filter: (data): data is { id: string; subject: Text.Text } =>
+        typeof data.id === 'string' && Obj.instanceOf(Text.Text, data.subject),
       component: ({ data, role }) => {
-        const selectionManager = useCapability(AttentionCapabilities.Selection);
-        const settingsStore = useCapability(Capabilities.SettingsStore);
-        const settings = settingsStore.getStore<Markdown.Settings>(meta.id)!.value;
-        const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
-
-        return (
-          <MarkdownContainer
-            id={data.id}
-            object={data.subject}
-            role={role}
-            settings={settings}
-            selectionManager={selectionManager}
-            extensionProviders={state.extensionProviders}
-            viewMode={getViewMode(data.id)}
-            editorStateStore={editorState}
-            onViewModeChange={setViewMode}
-          />
-        );
+        return <Container id={data.id} subject={data.subject} role={role} />;
       },
     }),
+    // TODO(burdon): Remove this variant and conform to Text.
     createSurface({
       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<Markdown.Settings>(meta.id)!.value;
-        const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
-
-        return (
-          <MarkdownContainer
-            id={data.subject.id}
-            object={data.subject}
-            role={role}
-            settings={settings}
-            selectionManager={selectionManager}
-            extensionProviders={state.extensionProviders}
-            viewMode={getViewMode(data.subject.id)}
-            editorStateStore={editorState}
-            onViewModeChange={setViewMode}
-          />
-        );
+        return <Container id={data.subject.id} subject={data.subject} role={role} />;
       },
     }),
     createSurface({
@@ -108,8 +57,37 @@ export default () =>
     createSurface({
       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),
+      filter: (data): data is { subject: Markdown.Document | Text.Text } =>
+        Obj.instanceOf(Markdown.Document, data.subject) || Obj.instanceOf(Text.Text, data.subject),
       component: ({ data, role }) => <MarkdownCard {...data} role={role} />,
     }),
   ]);
+
+/**
+ * Common wrapper.
+ */
+const Container = ({ id, subject, role }: { id: string; subject: MarkdownContainerProps['object']; role: string }) => {
+  const selectionManager = useCapability(AttentionCapabilities.Selection);
+  const settingsStore = useCapability(Capabilities.SettingsStore);
+  const settings = settingsStore.getStore<Markdown.Settings>(meta.id)!.value;
+  const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
+  const viewMode = getViewMode(id);
+  const handleViewModeChange = useCallback<NonNullable<MarkdownContainerProps['onViewModeChange']>>(
+    (mode) => setViewMode(id, mode),
+    [id, setViewMode],
+  );
+
+  return (
+    <MarkdownContainer
+      id={id}
+      object={subject}
+      role={role}
+      settings={settings}
+      selectionManager={selectionManager}
+      extensionProviders={state.extensionProviders}
+      editorStateStore={editorState}
+      viewMode={viewMode}
+      onViewModeChange={handleViewModeChange}
+    />
+  );
+};

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

@@ -48,7 +48,7 @@ type Story = StoryObj<typeof meta>;
 export const Popover: Story = {
   args: {
     role: 'card--popover',
-    subject: Markdown.makeDocument({
+    subject: Markdown.make({
       name: faker.lorem.words(3),
       content: faker.lorem.paragraphs(3),
     }),
@@ -58,7 +58,7 @@ export const Popover: Story = {
 export const Intrinsic: Story = {
   args: {
     role: 'card--intrinsic',
-    subject: Markdown.makeDocument({
+    subject: Markdown.make({
       name: faker.lorem.words(3),
       content: faker.lorem.paragraphs(3),
     }),
@@ -68,7 +68,7 @@ export const Intrinsic: Story = {
 export const Extrinsic: Story = {
   args: {
     role: 'card--extrinsic',
-    subject: Markdown.makeDocument({
+    subject: Markdown.make({
       name: faker.lorem.words(3),
       content: faker.lorem.paragraphs(3),
     }),

package/src/components/MarkdownCard/MarkdownCard.tsx

@@ -5,42 +5,25 @@
 import * as Function from 'effect/Function';
 import React, { useCallback } from 'react';
 
-import { LayoutAction, chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, chain, createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 import { Obj } from '@dxos/echo';
 import { type PreviewProps } from '@dxos/plugin-preview';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui-stack';
-import { DataType } from '@dxos/schema';
+import { Text } from '@dxos/schema';
 
 import { meta } from '../../meta';
 import { Markdown } from '../../types';
 import { getContentSnippet, getFallbackName } from '../../util';
 
-// TODO(burdon): Factor out.
-const getTitle = (subject: Markdown.Document | DataType.Text, fallback: string) => {
-  if (Obj.instanceOf(Markdown.Document, subject)) {
-    return subject.name ?? subject.fallbackName ?? getFallbackName(subject.content?.target?.content ?? fallback);
-  } else if (Obj.instanceOf(DataType.Text, subject)) {
-    return getFallbackName(subject.content);
-  }
-};
-
-// TODO(burdon): Factor out.
-const getSnippet = (subject: Markdown.Document | DataType.Text, fallback: string) => {
-  if (Obj.instanceOf(Markdown.Document, subject)) {
-    return Obj.getDescription(subject) || getContentSnippet(subject.content?.target?.content ?? fallback);
-  } else if (Obj.instanceOf(DataType.Text, subject)) {
-    return getContentSnippet(subject.content ?? fallback);
-  }
-};
-
-export type MarkdownCardProps = PreviewProps<Markdown.Document | DataType.Text>;
+export type MarkdownCardProps = PreviewProps<Markdown.Document | Text.Text>;
 
 export const MarkdownCard = ({ subject, role }: MarkdownCardProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { t } = useTranslation(meta.id);
   const snippet = getSnippet(subject, t('fallback abstract'));
+  const info = getInfo(subject);
 
   // TODO(wittjosiah): Factor out so this component isn't dependent on the app framework.
   const handleNavigate = useCallback(
@@ -52,7 +35,10 @@ export const MarkdownCard = ({ subject, role }: MarkdownCardProps) => {
             subject: null,
             options: { state: false, anchorId: '' },
           }),
-          chain(LayoutAction.Open, { part: 'main', subject: [fullyQualifiedId(subject)] }),
+          chain(LayoutAction.Open, {
+            part: 'main',
+            subject: [Obj.getDXN(subject).toString()],
+          }),
         ),
       ),
     [dispatch, subject],
@@ -71,6 +57,32 @@ export const MarkdownCard = ({ subject, role }: MarkdownCardProps) => {
         />
       </Card.Heading>
       {snippet && <Card.Text classNames='line-clamp-3 text-sm text-description'>{snippet}</Card.Text>}
+      <Card.Text classNames='text-xs text-description'>
+        {info.words} {t('words label', { count: info.words })}
+      </Card.Text>
     </Card.SurfaceRoot>
   );
 };
+
+const getInfo = (subject: Markdown.Document | Text.Text) => {
+  const text = (Obj.instanceOf(Markdown.Document, subject) ? subject.content?.target?.content : subject.content) ?? '';
+  return { words: text.split(' ').length };
+};
+
+// TODO(burdon): Factor out.
+const getTitle = (subject: Markdown.Document | Text.Text, fallback: string) => {
+  if (Obj.instanceOf(Markdown.Document, subject)) {
+    return subject.name ?? subject.fallbackName ?? getFallbackName(subject.content?.target?.content ?? fallback);
+  } else if (Obj.instanceOf(Text.Text, subject)) {
+    return getFallbackName(subject.content);
+  }
+};
+
+// TODO(burdon): Factor out.
+const getSnippet = (subject: Markdown.Document | Text.Text, fallback: string) => {
+  if (Obj.instanceOf(Markdown.Document, subject)) {
+    return Obj.getDescription(subject) || getContentSnippet(subject.content?.target?.content ?? fallback);
+  } else if (Obj.instanceOf(Text.Text, subject)) {
+    return getContentSnippet(subject.content ?? fallback);
+  }
+};