@dxos/plugin-markdown 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

package/dx.config.ts

@@ -17,7 +17,7 @@ export default Config2.make({
 
       The editor integrates with the rest of the workspace through @ references that link to any ECHO object, image and file uploads stored in the active space, and anchored comment threads on text ranges. Comments can optionally be routed to an AI agent on every message or only on @mention.
 
-      A built-in blueprint exposes create, open, and update operations as tools for AI agents. Updates are applied as compact find-and-replace diffs against the document, making it safe for agents to edit large documents incrementally while you continue collaborating.
+      A built-in skill exposes create, open, and update operations as tools for AI agents. Updates are applied as compact find-and-replace diffs against the document, making it safe for agents to edit large documents incrementally while you continue collaborating.
     `,
     source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-markdown',
     icon: { key: 'ph--text-aa--regular', hue: 'indigo' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-markdown",
-  "version": "0.9.1-main.c7dcc2e112",
+  "version": "0.9.1-staging.ee54ba693a",
   "description": "DXOS Surface plugin for interacting with Markdown",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,10 +13,10 @@
   "sideEffects": true,
   "type": "module",
   "imports": {
-    "#blueprints": {
-      "source": "./src/blueprints/index.ts",
-      "types": "./dist/types/src/blueprints/index.d.ts",
-      "default": "./dist/lib/neutral/blueprints/index.mjs"
+    "#skills": {
+      "source": "./src/skills/index.ts",
+      "types": "./dist/types/src/skills/index.d.ts",
+      "default": "./dist/lib/neutral/skills/index.mjs"
     },
     "#capabilities": {
       "source": {
@@ -85,14 +85,18 @@
       "types": "./dist/types/src/index.d.ts",
       "default": "./dist/lib/neutral/index.mjs"
     },
-    "./blueprints": {
-      "source": "./src/blueprints/index.ts",
-      "types": "./dist/types/src/blueprints/index.d.ts",
-      "default": "./dist/lib/neutral/blueprints/index.mjs"
+    "./skills": {
+      "source": "./src/skills/index.ts",
+      "types": "./dist/types/src/skills/index.d.ts",
+      "default": "./dist/lib/neutral/skills/index.mjs"
     },
     "./plugin": {
-      "source": "./src/plugin.ts",
+      "source": {
+        "workerd": "./src/plugin.workerd.ts",
+        "default": "./src/plugin.ts"
+      },
       "types": "./dist/types/src/plugin.d.ts",
+      "workerd": "./dist/lib/neutral/plugin.workerd.mjs",
       "default": "./dist/lib/neutral/plugin.mjs"
     },
     "./testing": {
@@ -118,7 +122,7 @@
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.3.0-fragments.1",
+    "@automerge/automerge": "3.3.0-fragments.2",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.43.0",
     "@effect-atom/atom-react": "^0.5.0",
@@ -126,62 +130,65 @@
     "@effect/experimental": "0.60.0",
     "@radix-ui/react-context": "1.1.1",
     "react-dropzone": "^14.2.3",
-    "@dxos/ai": "0.9.1-main.c7dcc2e112",
-    "@dxos/app-toolkit": "0.9.1-main.c7dcc2e112",
-    "@dxos/app-framework": "0.9.1-main.c7dcc2e112",
-    "@dxos/async": "0.9.1-main.c7dcc2e112",
-    "@dxos/client-protocol": "0.9.1-main.c7dcc2e112",
-    "@dxos/client": "0.9.1-main.c7dcc2e112",
-    "@dxos/assistant": "0.9.1-main.c7dcc2e112",
-    "@dxos/compute": "0.9.1-main.c7dcc2e112",
-    "@dxos/echo-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/echo": "0.9.1-main.c7dcc2e112",
-    "@dxos/functions-runtime": "0.9.1-main.c7dcc2e112",
-    "@dxos/invariant": "0.9.1-main.c7dcc2e112",
-    "@dxos/keys": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/effect": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-attention": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-preview": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-space": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-graph": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-attention": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-editor": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-mosaic": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-form": "0.9.1-main.c7dcc2e112",
-    "@dxos/schema": "0.9.1-main.c7dcc2e112",
-    "@dxos/types": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-editor": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/util": "0.9.1-main.c7dcc2e112",
-    "@dxos/log": "0.9.1-main.c7dcc2e112"
+    "@dxos/ai": "0.9.1-staging.ee54ba693a",
+    "@dxos/app-framework": "0.9.1-staging.ee54ba693a",
+    "@dxos/app-toolkit": "0.9.1-staging.ee54ba693a",
+    "@dxos/assistant": "0.9.1-staging.ee54ba693a",
+    "@dxos/async": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo": "0.9.1-staging.ee54ba693a",
+    "@dxos/client": "0.9.1-staging.ee54ba693a",
+    "@dxos/client-protocol": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo-client": "0.9.1-staging.ee54ba693a",
+    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo-doc": "0.9.1-staging.ee54ba693a",
+    "@dxos/functions-runtime": "0.9.1-staging.ee54ba693a",
+    "@dxos/effect": "0.9.1-staging.ee54ba693a",
+    "@dxos/log": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-attention": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-client": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-graph": "0.9.1-staging.ee54ba693a",
+    "@dxos/keys": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-preview": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-sketch": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-space": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-attention": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-dnd": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-client": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-editor": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-mosaic": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-form": "0.9.1-staging.ee54ba693a",
+    "@dxos/compute": "0.9.1-staging.ee54ba693a",
+    "@dxos/types": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-editor": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a",
+    "@dxos/schema": "0.9.1-staging.ee54ba693a"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "@types/react": "~19.2.7",
+    "@effect/platform": "0.96.2",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "vite": "^8.0.16",
-    "@dxos/debug": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-testing": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/random": "0.9.1-main.c7dcc2e112",
-    "@dxos/storybook-utils": "0.9.1-main.c7dcc2e112"
+    "@dxos/debug": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-testing": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/random": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112"
+    "@effect/platform": "0.96.2",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a"
   },
   "publishConfig": {
     "access": "public"

package/src/MarkdownPlugin.node.ts

@@ -6,11 +6,12 @@ import { Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
 import { Text } from '@dxos/schema';
 
-import { CreateObject, OperationHandler } from '#capabilities';
+import { CreateObject, OperationHandler, SkillDefinition } from '#capabilities';
 import { meta } from '#meta';
 import { Markdown } from '#types';
 
 export const MarkdownPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addSkillDefinitionModule({ activate: SkillDefinition }),
   AppPlugin.addCreateObjectModule({ activate: CreateObject }),
   AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
   AppPlugin.addSchemaModule({ schema: [Markdown.Document, Text.Text] }),

package/src/MarkdownPlugin.tsx

@@ -10,24 +10,20 @@ import { Text } from '@dxos/schema';
 
 import {
   AnchorSort,
-  AppGraphBuilder,
-  NavigationResolver,
-  BlueprintDefinition,
   CommentConfig,
   CreateObject,
   MarkdownSettings,
   MarkdownState,
   OperationHandler,
   ReactSurface,
+  SkillDefinition,
 } from '#capabilities';
 import { meta } from '#meta';
 import { translations } from '#translations';
 import { Markdown, MarkdownEvents } from '#types';
 
 export const MarkdownPlugin = Plugin.define(meta).pipe(
-  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
-  AppPlugin.addNavigationResolverModule({ activate: NavigationResolver }),
-  AppPlugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
+  AppPlugin.addSkillDefinitionModule({ activate: SkillDefinition }),
   AppPlugin.addCommentConfigModule({ activate: CommentConfig }),
   AppPlugin.addCreateObjectModule({ activate: CreateObject }),
   AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),

package/src/MarkdownPlugin.workerd.ts

@@ -6,12 +6,15 @@ import { Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
 import { Text } from '@dxos/schema';
 
-import { OperationHandler } from '#capabilities';
 import { meta } from '#meta';
 import { Markdown } from '#types';
 
+import OperationHandler from './capabilities/operation-handler';
+import SkillDefinition from './capabilities/skill-definition';
+
 export const MarkdownPlugin = Plugin.define(meta).pipe(
-  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addSkillDefinitionModule({ id: 'skill-definition', activate: SkillDefinition }),
+  AppPlugin.addOperationHandlerModule({ id: 'operation-handler', activate: OperationHandler }),
   AppPlugin.addSchemaModule({ schema: [Markdown.Document, Text.Text] }),
   Plugin.make,
 );

package/src/capabilities/anchor-sort.ts

@@ -7,7 +7,8 @@ import * as Effect from 'effect/Effect';
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
 import { Relation, Type } from '@dxos/echo';
-import { createDocAccessor, getRangeFromCursor } from '@dxos/echo-client';
+import { getRangeFromCursor } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 import { type AnchoredTo } from '@dxos/types';
 
 import { Markdown } from '#types';
@@ -18,7 +19,7 @@ export default Capability.makeModule(() =>
       key: Type.getTypename(Markdown.Document),
       sort: (anchorA: AnchoredTo.AnchoredTo, anchorB: AnchoredTo.AnchoredTo) => {
         const doc = Relation.getTarget(anchorA) as Markdown.Document;
-        const accessor = doc.content.target ? createDocAccessor(doc.content.target, ['content']) : undefined;
+        const accessor = doc.content.target ? Doc.createAccessor(doc.content.target, ['content']) : undefined;
         if (doc !== Relation.getTarget(anchorB) || !accessor) {
           return 0;
         }

package/src/capabilities/comment-config.ts

@@ -7,25 +7,22 @@ import * as Effect from 'effect/Effect';
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
 import { Type } from '@dxos/echo';
-import { createDocAccessor, getTextInRange } from '@dxos/echo-client';
+import { getTextInRange } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 
 import { MarkdownOperation } from '#types';
 import { Markdown } from '#types';
 
-// NOTE: Explicit annotation required: d.ts emit cannot portably name the inferred @dxos/compute types (TS2883).
-const activate: () => Effect.Effect<
-  Capability.Capability<typeof AppCapabilities.CommentConfig>,
-  never,
-  Capability.Service
-> = Effect.fnUntraced(function* () {
+const activate = Effect.fnUntraced(function* () {
   const config: AppCapabilities.CommentConfig = {
     id: Type.getTypename(Markdown.Document),
     comments: 'anchored',
     selectionMode: 'multi-range',
     getAnchorLabel: (doc: Markdown.Document, anchor: string): string | undefined => {
-      if (doc.content) {
+      const target = doc.content?.target;
+      if (target) {
         const [start, end] = anchor.split(':');
-        return getTextInRange(createDocAccessor(doc.content.target!, ['content']), start, end);
+        return getTextInRange(Doc.createAccessor(target, ['content']), start, end);
       }
     },
     scrollToAnchor: MarkdownOperation.ScrollToAnchor,

package/src/capabilities/create-object.ts

@@ -12,8 +12,6 @@ import { SpaceCapabilities } from '@dxos/plugin-space';
 
 import { Markdown } from '#types';
 
-import { getDocumentsPath } from '../paths';
-
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     return Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
@@ -24,8 +22,7 @@ export default Capability.makeModule(
           return yield* Operation.invoke(SpaceOperation.AddObject, {
             object,
             target: options.target,
-            hidden: true,
-            targetNodeId: options.targetNodeId ?? getDocumentsPath(options.db.spaceId),
+            targetNodeId: options.targetNodeId,
           });
         }),
     });

package/src/capabilities/editor-view-state.ts

@@ -4,7 +4,7 @@
 
 import { invariant } from '@dxos/invariant';
 import { type ViewStateManager, defineViewState } from '@dxos/react-ui-attention';
-import { type EditorStateStore, EditorSelectionStateSchema } from '@dxos/ui-editor';
+import { EditorSelectionStateSchema, type EditorStateStore } from '@dxos/ui-editor';
 
 /** Per-document editor scroll/caret state, persisted to localStorage on this device. */
 export const editorViewStateAspect = defineViewState({

package/src/capabilities/index.ts

@@ -5,12 +5,10 @@
 import { Capability } from '@dxos/app-framework';
 import type { OperationHandlerSet } from '@dxos/compute';
 
-export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
-export const NavigationResolver = Capability.lazy('NavigationResolver', () => import('./navigation-resolver'));
 export const AnchorSort = Capability.lazy('AnchorSort', () => import('./anchor-sort'));
 export const CommentConfig = Capability.lazy('CommentConfig', () => import('./comment-config'));
 export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
-export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const SkillDefinition = Capability.lazy('SkillDefinition', () => import('./skill-definition'));
 export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
   'OperationHandler',
   () => import('./operation-handler'),

package/src/capabilities/node.ts

@@ -5,6 +5,7 @@
 import { Capability } from '@dxos/app-framework';
 import { OperationHandlerSet } from '@dxos/compute';
 
+export const SkillDefinition = Capability.lazy('SkillDefinition', () => import('./skill-definition'));
 export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
 
 export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(

package/src/capabilities/react-surface.tsx

@@ -19,9 +19,15 @@ import { Obj } from '@dxos/echo';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { Text } from '@dxos/schema';
 import { type EditorViewMode } from '@dxos/ui-editor/types';
+import { Position } from '@dxos/util';
 
-import { MarkdownSettings } from '#components';
-import { MarkdownCard, EditableMarkdownCard, MarkdownArticle, type MarkdownArticleProps } from '#containers';
+import {
+  EditableMarkdownCard,
+  MarkdownArticle,
+  type MarkdownArticleProps,
+  MarkdownCard,
+  MarkdownSettings,
+} from '#containers';
 import { meta } from '#meta';
 import { Markdown, MarkdownCapabilities } from '#types';
 
@@ -79,7 +85,7 @@ export default Capability.makeModule(() =>
       }),
       Surface.create({
         id: 'surface.editable',
-        position: 'first',
+        position: Position.first,
         filter: AppSurface.object(
           AppSurface.CardContent,
           [Markdown.Document, Text.Text],

package/src/capabilities/skill-definition.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+
+import { MarkdownSkill } from '#skills';
+
+const skillDefinition = () => Effect.succeed([Capability.contributes(AppCapabilities.SkillDefinition, MarkdownSkill)]);
+
+export default skillDefinition;

package/src/components/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -2,15 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppActivationEvents } from '@dxos/app-toolkit';
 import { Filter, Obj } from '@dxos/echo';
-import { ClientPlugin } from '@dxos/plugin-client/testing';
-import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
+import { Sketch } from '@dxos/plugin-sketch';
+import { SketchPlugin } from '@dxos/plugin-sketch/plugin';
+import { SketchBuilder } from '@dxos/plugin-sketch/testing';
 import { corePlugins } from '@dxos/plugin-testing';
+import { type Client } from '@dxos/react-client';
 import { useQuery, useSpaces } from '@dxos/react-client/echo';
 import { Panel } from '@dxos/react-ui';
 import { AttendableContainer } from '@dxos/react-ui-attention';
@@ -19,16 +23,23 @@ import { translations as editorTranslations } from '@dxos/react-ui-editor/transl
 import { Loading, withLayout } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';
 
+import { useLinkQuery } from '#hooks';
 import { translations } from '#translations';
 import { Markdown } from '#types';
 
 import { MarkdownEditor, MarkdownEditorProvider, type MarkdownEditorProviderProps } from './MarkdownEditor';
 
-type DefaultStoryProps = Omit<MarkdownEditorProviderProps, 'id' | 'extensions' | 'children'>;
+// A minimal sketch (tldraw `tldraw.com/2`) snapshot, used as a test sketch.
+const SKETCH_CONTENT = new SketchBuilder()
+  .rectangle({ id: 'rect', x: 0, y: 0, text: 'DXOS', color: 'blue', fill: 'solid', size: 'l' })
+  .build();
 
-const DefaultStory = (props: DefaultStoryProps) => {
+type StoryArgs = Omit<MarkdownEditorProviderProps, 'id' | 'extensions' | 'children'>;
+
+const DefaultStory = (props: StoryArgs) => {
   const [space] = useSpaces();
   const [doc] = useQuery(space?.db, Filter.type(Markdown.Document));
+  const handleLinkQuery = useLinkQuery(space?.db, doc);
   const id = doc && Obj.getURI(doc);
   if (!id) {
     return <Loading data={{ id }} />;
@@ -36,15 +47,19 @@ const DefaultStory = (props: DefaultStoryProps) => {
 
   return (
     <AttendableContainer id={id} tabIndex={0} classNames='dx-container'>
-      <MarkdownEditorProvider id={id} object={doc} {...props}>
+      <MarkdownEditorProvider id={id} attendableId={id} object={doc} onLinkQuery={handleLinkQuery} {...props}>
         {(editorRootProps) => (
           <Editor.Root {...editorRootProps}>
-            <Panel.Root>
-              <Panel.Toolbar asChild>
-                <MarkdownEditor.Toolbar />
+            {/* Mirror MarkdownArticle: Panel.Toolbar/Content are NOT `asChild` (MarkdownEditor.Toolbar is not
+                composable, so asChild wraps it in a dx-slot-warning div that breaks the grid-area layout). */}
+            <Panel.Root role='article'>
+              <Panel.Toolbar>
+                <MarkdownEditor.Toolbar classNames='dx-document' />
               </Panel.Toolbar>
-              <Panel.Content asChild>
+              <Panel.Content>
                 <MarkdownEditor.Content />
+                {/* Embedded objects (transclusions) portal into block-container elements created by the editor. */}
+                <MarkdownEditor.Blocks />
               </Panel.Content>
             </Panel.Root>
           </Editor.Root>
@@ -54,28 +69,49 @@ const DefaultStory = (props: DefaultStoryProps) => {
   );
 };
 
+const withClient = (seed: (client: Client) => Effect.Effect<void>): Decorator =>
+  withPluginManager({
+    // SketchPlugin's section surface reads its Settings atom, contributed on SetupSettings.
+    setupEvents: [AppActivationEvents.SetupSettings],
+    plugins: [
+      ...corePlugins(),
+      SketchPlugin(),
+      ClientPlugin({
+        types: [Markdown.Document, Text.Text, Sketch.Sketch, Sketch.Canvas],
+        onClientInitialized: ({ client }) => seed(client),
+      }),
+    ],
+  });
+
+const seedPlainDocument = (client: Client) =>
+  Effect.gen(function* () {
+    const { personalSpace } = yield* initializeIdentity(client);
+    personalSpace.db.add(Markdown.make({ content: Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n') }));
+  });
+
+const seedEmbeddedSketch = (client: Client) =>
+  Effect.gen(function* () {
+    const { personalSpace } = yield* initializeIdentity(client);
+    const sketch = personalSpace.db.add(Sketch.make({ name: 'Test Sketch', canvas: { content: SKETCH_CONTENT } }));
+    const uri = Obj.getURI(sketch);
+    personalSpace.db.add(
+      Markdown.make({
+        content: [
+          '# Test Document',
+          '',
+          'The sketch below renders inline as a block surface:',
+          '',
+          `![${sketch.name}](${uri})`,
+          '',
+        ].join('\n'),
+      }),
+    );
+  });
+
 const meta: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-markdown/components/MarkdownEditor',
   render: DefaultStory,
-  decorators: [
-    withLayout({ layout: 'column' }),
-    withPluginManager({
-      plugins: [
-        ...corePlugins(),
-        // TODO(burdon): Try to write story without ClientPlugin.
-        ClientPlugin({
-          types: [Markdown.Document, Text.Text],
-          onClientInitialized: ({ client }) =>
-            Effect.gen(function* () {
-              const { personalSpace } = yield* initializeIdentity(client);
-              personalSpace.db.add(
-                Markdown.make({ content: Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n') }),
-              );
-            }),
-        }),
-      ],
-    }),
-  ],
+  decorators: [withLayout({ layout: 'column' })],
   parameters: {
     translations: [...translations, ...editorTranslations],
   },
@@ -85,4 +121,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  decorators: [withClient(seedPlainDocument)],
+};
+
+export const WithEmbeddedSketch: Story = {
+  decorators: [withClient(seedEmbeddedSketch)],
+};