@dxos/plugin-illustrator 0.10.0 → 0.11.0

package/dx.config.ts

@@ -31,5 +31,6 @@ export default Config2.make({
     source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-illustrator',
     icon: { key: 'ph--compass-tool--regular', hue: 'indigo' },
     spec: 'PLUGIN.mdl',
+    tags: ['alpha'],
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-illustrator",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Headless diagramming plugin for DXOS Composer (unifies canvas renderers like tldraw and excalidraw).",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -108,20 +108,21 @@
   ],
   "dependencies": {
     "effect": "3.21.4",
-    "@dxos/app-framework": "0.10.0",
-    "@dxos/app-toolkit": "0.10.0",
-    "@dxos/compute": "0.10.0",
-    "@dxos/echo": "0.10.0",
-    "@dxos/echo-react": "0.10.0",
-    "@dxos/invariant": "0.10.0",
-    "@dxos/log": "0.10.0",
-    "@dxos/keys": "0.10.0",
-    "@dxos/plugin-space": "0.10.0",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/react-ui-search": "0.10.0",
-    "@dxos/util": "0.10.0",
-    "@dxos/schema": "0.10.0",
-    "@dxos/react-ui-form": "0.10.0"
+    "@dxos/app-framework": "0.11.0",
+    "@dxos/app-toolkit": "0.11.0",
+    "@dxos/compute": "0.11.0",
+    "@dxos/echo": "0.11.0",
+    "@dxos/echo-react": "0.11.0",
+    "@dxos/invariant": "0.11.0",
+    "@dxos/log": "0.11.0",
+    "@dxos/plugin-client": "0.11.0",
+    "@dxos/plugin-space": "0.11.0",
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/react-ui-form": "0.11.0",
+    "@dxos/react-ui-search": "0.11.0",
+    "@dxos/schema": "0.11.0",
+    "@dxos/util": "0.11.0",
+    "@dxos/keys": "0.11.0"
   },
   "devDependencies": {
     "@types/react": "~19.2.17",
@@ -129,14 +130,15 @@
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
     "vite": "^8.1.4",
-    "@dxos/ui-theme": "0.10.0",
-    "@dxos/plugin-testing": "0.10.0"
+    "@dxos/plugin-testing": "0.11.0",
+    "@dxos/ui-theme": "0.11.0",
+    "@dxos/echo-client": "0.11.0"
   },
   "peerDependencies": {
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "^0.10.0",
-    "@dxos/ui-theme": "^0.10.0"
+    "@dxos/ui-theme": "^0.11.0",
+    "@dxos/react-ui": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/IllustratorPlugin.node.tsx

@@ -8,17 +8,17 @@ import { AppPlugin } from '@dxos/app-toolkit';
 import { OperationHandler, SkillDefinition } from '#capabilities';
 import { meta } from '#meta';
 import { translations } from '#translations';
-import { Sketch } from '#types';
+import { Drawing } from '#types';
 
 /**
  * Headless variant of IllustratorPlugin (no React surfaces / CreateObject panel).
  * Used in node contexts (CLI, agents, tests) where rendering is unavailable —
- * the full variant lazy-loads `CreateSketchPanel` from `react-ui-search` which
+ * the full variant lazy-loads `CreateDrawingPanel` from `react-ui-search` which
  * downstream bundlers don't resolve cleanly under nested pnpm symlinks.
  */
 export const IllustratorPlugin = Plugin.define(meta).pipe(
   AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
-  AppPlugin.addSchemaModule({ schema: [Sketch.Sketch] }),
+  AppPlugin.addSchemaModule({ schema: [Drawing.Drawing, Drawing.Canvas] }),
   AppPlugin.addSkillDefinitionModule({ activate: SkillDefinition }),
   AppPlugin.addTranslationsModule({ translations }),
   Plugin.make,

package/src/IllustratorPlugin.test.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { Type } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+
+import { IllustratorPlugin } from '#plugin';
+
+import { Drawing } from './types';
+
+describe('IllustratorPlugin', () => {
+  // Canvas is written to the database by every variant's create flow, so the plugin that owns the
+  // type must register it — registering it from a renderer plugin breaks the others when disabled.
+  test('registers both the Drawing and Canvas schemas', async ({ expect }) => {
+    await using harness = await createComposerTestApp({
+      plugins: [ClientPlugin({}), IllustratorPlugin()],
+    });
+
+    const typenames = harness
+      .getAll(AppCapabilities.Schema)
+      .flat()
+      .map((schema) => Type.getTypename(schema));
+    expect(typenames).toEqual(
+      expect.arrayContaining([Type.getTypename(Drawing.Drawing), Type.getTypename(Drawing.Canvas)]),
+    );
+  });
+});

package/src/IllustratorPlugin.tsx

@@ -4,20 +4,32 @@
 
 import { Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
+import { ClientEvents } from '@dxos/plugin-client';
 
-import { CommentConfig, CreateObject, OperationHandler, ReactSurface, SkillDefinition } from '#capabilities';
+import {
+  CommentConfig,
+  CreateObject,
+  Migrations,
+  OperationHandler,
+  ReactSurface,
+  SkillDefinition,
+} from '#capabilities';
 import { meta } from '#meta';
 import { translations } from '#translations';
-import { Sketch } from '#types';
+import { Drawing } from '#types';
 
 // eslint-disable-next-line import/no-relative-packages
 import pluginSpec from '../PLUGIN.mdl?raw';
 
 export const IllustratorPlugin = Plugin.define(meta).pipe(
+  Plugin.addModule({
+    activatesOn: ClientEvents.SetupMigration,
+    activate: Migrations,
+  }),
   AppPlugin.addCommentConfigModule({ activate: CommentConfig }),
   AppPlugin.addCreateObjectModule({ activate: CreateObject }),
   AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
-  AppPlugin.addSchemaModule({ schema: [Sketch.Sketch] }),
+  AppPlugin.addSchemaModule({ schema: [Drawing.Drawing, Drawing.Canvas] }),
   AppPlugin.addSkillDefinitionModule({ activate: SkillDefinition }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
   AppPlugin.addTranslationsModule({ translations }),

package/src/IllustratorPlugin.workerd.tsx

@@ -6,10 +6,10 @@ import { Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
 
 import { meta } from '#meta';
-import { Sketch } from '#types';
+import { Drawing } from '#types';
 
 export const IllustratorPlugin = Plugin.define(meta).pipe(
-  AppPlugin.addSchemaModule({ schema: [Sketch.Sketch] }),
+  AppPlugin.addSchemaModule({ schema: [Drawing.Drawing, Drawing.Canvas] }),
   Plugin.make,
 );
 

package/src/capabilities/comment-config.ts

@@ -8,11 +8,11 @@ import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
 import { Type } from '@dxos/echo';
 
-import { Sketch } from '#types';
+import { Drawing } from '#types';
 
 const activate = Effect.fnUntraced(function* () {
   return Capability.contributes(AppCapabilities.CommentConfig, {
-    id: Type.getTypename(Sketch.Sketch),
+    id: Type.getTypename(Drawing.Drawing),
     comments: 'unanchored',
   });
 });

package/src/capabilities/create-object.ts

@@ -10,17 +10,17 @@ import { Database, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { SpaceCapabilities, SpaceOperation } from '@dxos/plugin-space';
 
-import { CreateSketchPanel } from '#components';
+import { CreateDrawingPanel } from '#components';
 
-import { IllustratorCapabilities, Sketch } from '../types';
+import { Drawing, IllustratorCapabilities } from '../types';
 
 type CreateOptions = Parameters<SpaceCapabilities.CreateObjectEntry['createObject']>[1];
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     return Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
-      id: Type.getTypename(Sketch.Sketch),
-      customPanel: CreateSketchPanel,
+      id: Type.getTypename(Drawing.Drawing),
+      customPanel: CreateDrawingPanel,
       createObject: (
         { variantId, input }: { variantId: string; input?: Record<string, any> },
         options: CreateOptions,
@@ -28,31 +28,33 @@ export default Capability.makeModule(
         Effect.gen(function* () {
           const variants = yield* Capability.getAll(IllustratorCapabilities.VariantProvider);
           const variant = variants.find((entry) => entry.id === variantId);
-          invariant(variant, `Unknown sketch variant: ${variantId}`);
+          invariant(variant, `Unknown drawing variant: ${variantId}`);
 
-          // Build the canvas object via the variant's factory.
-          const canvas = yield* variant
-            .createCanvas(input ?? {})
-            .pipe(Effect.provideService(Database.Service, Database.makeService(options.db)));
+          // Build the canvas: variants only supply a factory when they extend the base type.
+          const canvas = variant.createCanvas
+            ? yield* variant
+                .createCanvas(input ?? {})
+                .pipe(Effect.provideService(Database.Service, Database.makeService(options.db)))
+            : Drawing.makeCanvas({ schema: variant.id });
 
-          // Add the canvas to the database. Stays hidden — it's referenced by the Sketch and
-          // shouldn't appear as a top-level item in the user's space.
+          // Add the canvas to the database. It carries HiddenAnnotation, so `CollectionModel.add`
+          // persists it without filing it into the target collection.
           yield* Operation.invoke(SpaceOperation.AddObject, {
             object: canvas,
             target: options.target,
             targetNodeId: options.targetNodeId,
           });
 
-          const sketch = Sketch.make({
+          const drawing = Drawing.make({
             name: typeof input?.name === 'string' ? input.name : undefined,
             canvas,
           });
 
-          // Add the user-facing Sketch wrapper. Not hidden — this is the object the user sees
+          // Add the user-facing Drawing wrapper. Not hidden — this is the object the user sees
           // and navigates to. If this second write fails, roll back the canvas so we don't
           // leak an orphaned object into the space.
           return yield* Operation.invoke(SpaceOperation.AddObject, {
-            object: sketch,
+            object: drawing,
             target: options.target,
             targetNodeId: options.targetNodeId,
           }).pipe(

package/src/capabilities/index.ts

@@ -7,6 +7,7 @@ import { OperationHandlerSet } from '@dxos/compute';
 
 export const CommentConfig = Capability.lazy('CommentConfig', () => import('./comment-config'));
 export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
+export const Migrations = Capability.lazy('IllustratorMigrations', () => import('./migrations'));
 export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
   'OperationHandler',
   () => import('./operation-handler'),

package/src/capabilities/migrations.test.ts

@@ -0,0 +1,142 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { afterEach, beforeEach, describe, test } from 'vitest';
+
+import { Filter, Obj, Ref } from '@dxos/echo';
+import { EchoTestBuilder } from '@dxos/echo-client/testing';
+import { invariant } from '@dxos/invariant';
+
+import { Drawing, LegacySketch } from '../types';
+import { sketchToDrawing } from './migrations';
+
+let builder: EchoTestBuilder;
+
+beforeEach(async () => {
+  builder = await new EchoTestBuilder().open();
+});
+
+afterEach(async () => {
+  await builder.close();
+});
+
+const setup = async () => {
+  const { db, graph } = await builder.createDatabase();
+  graph.registry.add([LegacySketch.Sketch, Drawing.Drawing, Drawing.Canvas]);
+  return db;
+};
+
+/** A sketch as it exists in spaces created before the rename. */
+const addLegacySketch = (db: any, { name, schema = 'tldraw.com/2' }: { name?: string; schema?: string } = {}) => {
+  const canvas = db.add(Drawing.makeCanvas({ schema, content: { 'shape:1': { id: 'shape:1' } } }));
+  return db.add(Obj.make(LegacySketch.Sketch, { name, canvas: Ref.make(canvas) }));
+};
+
+describe('sketch → drawing migration', () => {
+  test('converts a legacy sketch in place, preserving id and canvas', async ({ expect }) => {
+    const db = await setup();
+    const sketch = addLegacySketch(db, { name: 'Diagram' });
+    const sketchId = sketch.id;
+    const canvasId = sketch.canvas.target?.id;
+    await db.flush();
+
+    await db.runMigrations([sketchToDrawing]);
+
+    expect(await db.query(Filter.type(LegacySketch.Sketch)).run()).toHaveLength(0);
+    const drawings = await db.query(Filter.type(Drawing.Drawing)).run();
+    expect(drawings).toHaveLength(1);
+
+    const [drawing] = drawings;
+    // The runtime swaps the type on the same object rather than creating a replacement, so
+    // anything already referencing the sketch keeps resolving.
+    expect(drawing.id).toBe(sketchId);
+    expect(Obj.getTypename(drawing)).toBe('org.dxos.type.drawing');
+    expect(drawing.name).toBe('Diagram');
+    expect(drawing.canvas.target?.id).toBe(canvasId);
+  });
+
+  test('leaves the canvas untouched so the renderer variant still resolves', async ({ expect }) => {
+    const db = await setup();
+    addLegacySketch(db, { name: 'Diagram' });
+    await db.flush();
+
+    await db.runMigrations([sketchToDrawing]);
+
+    const [drawing] = await db.query(Filter.type(Drawing.Drawing)).run();
+    const canvas = drawing.canvas.target;
+    invariant(canvas, 'canvas ref did not resolve after migration');
+    expect(Obj.getTypename(canvas)).toBe('org.dxos.type.canvas');
+    // `schema` is what matches a drawing to its variant; losing it would render "unsupported".
+    expect(canvas.schema).toBe('tldraw.com/2');
+    expect(canvas.content).toEqual({ 'shape:1': { id: 'shape:1' } });
+  });
+
+  test('carries a sketch with no name', async ({ expect }) => {
+    const db = await setup();
+    addLegacySketch(db);
+    await db.flush();
+
+    await db.runMigrations([sketchToDrawing]);
+
+    const [drawing] = await db.query(Filter.type(Drawing.Drawing)).run();
+    expect(drawing.name).toBeUndefined();
+  });
+
+  test('migrates every sketch in the space', async ({ expect }) => {
+    const db = await setup();
+    addLegacySketch(db, { name: 'One' });
+    addLegacySketch(db, { name: 'Two', schema: 'excalidraw.com/2' });
+    await db.flush();
+
+    await db.runMigrations([sketchToDrawing]);
+
+    const drawings = await db.query(Filter.type(Drawing.Drawing)).run();
+    expect(drawings.map((drawing) => drawing.name).sort()).toEqual(['One', 'Two']);
+    expect(drawings.map((drawing) => drawing.canvas.target?.schema).sort()).toEqual([
+      'excalidraw.com/2',
+      'tldraw.com/2',
+    ]);
+  });
+
+  test('runs against a space reopened without the legacy schema registered', async ({ expect }) => {
+    // The plugin registers only `Drawing`, never `LegacySketch.Sketch` — so the migration has to
+    // work on a client whose registry has no entry for the type it is reading.
+    const { db, peer, key } = await builder.createDatabase();
+    db.graph.registry.add([LegacySketch.Sketch, Drawing.Drawing, Drawing.Canvas]);
+    const sketchId = addLegacySketch(db, { name: 'Diagram' }).id;
+    await db.flush();
+
+    const client = await peer.createClient();
+    await client.graph.registry.add([Drawing.Drawing, Drawing.Canvas]);
+    const reopened = await peer.openDatabase(key, undefined, { client });
+
+    await reopened.runMigrations([sketchToDrawing]);
+
+    const drawings = await reopened.query(Filter.type(Drawing.Drawing)).run();
+    expect(drawings).toHaveLength(1);
+    expect(drawings[0].id).toBe(sketchId);
+    expect(drawings[0].name).toBe('Diagram');
+  });
+
+  test('is idempotent and picks up sketches that arrive later', async ({ expect }) => {
+    const db = await setup();
+    addLegacySketch(db, { name: 'One' });
+    await db.flush();
+    await db.runMigrations([sketchToDrawing]);
+
+    // Re-running finds nothing: a migrated object no longer matches the source type. This is what
+    // makes it safe to run on every startup and on every peer.
+    await db.runMigrations([sketchToDrawing]);
+    expect(await db.query(Filter.type(Drawing.Drawing)).run()).toHaveLength(1);
+
+    // A sketch replicated in from a peer that has not migrated yet is converted on the next sweep.
+    addLegacySketch(db, { name: 'Two' });
+    await db.flush();
+    await db.runMigrations([sketchToDrawing]);
+
+    const drawings = await db.query(Filter.type(Drawing.Drawing)).run();
+    expect(drawings.map((drawing) => drawing.name).sort()).toEqual(['One', 'Two']);
+    expect(await db.query(Filter.type(LegacySketch.Sketch)).run()).toHaveLength(0);
+  });
+});

package/src/capabilities/migrations.ts

@@ -0,0 +1,28 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { Migration } from '@dxos/echo';
+import { ClientCapabilities } from '@dxos/plugin-client';
+
+import { Drawing, LegacySketch } from '../types';
+
+// `org.dxos.type.sketch` -> `org.dxos.type.drawing`. The shape is unchanged (name + canvas ref)
+// and the canvas keeps its typename, so the transform is a field copy; the runtime swaps the
+// object's type and retires the old one.
+export const sketchToDrawing = Migration.define({
+  from: LegacySketch.Sketch,
+  to: Drawing.Drawing,
+  transform: async ({ name, canvas }) => ({ name, canvas }),
+});
+
+const migrations = [sketchToDrawing];
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(ClientCapabilities.Migration, migrations);
+  }),
+);

package/src/capabilities/react-surface.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+
+import { DrawingArticle, DrawingCard } from '#containers';
+
+import { Drawing } from '../types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'drawing',
+        filter: AppSurface.oneOf(
+          AppSurface.object(AppSurface.Article, Drawing.Drawing),
+          AppSurface.object(AppSurface.Section, Drawing.Drawing),
+          AppSurface.object(AppSurface.Slide, Drawing.Drawing),
+        ),
+        component: DrawingArticle,
+        props: ({ role, data: { subject, attendableId, extrinsic } }) => ({ role, subject, attendableId, extrinsic }),
+      }),
+      Surface.create({
+        id: 'drawingCard',
+        filter: AppSurface.object(AppSurface.CardContent, Drawing.Drawing),
+        component: DrawingCard,
+        props: ({ role, data: { subject, editable } }) => ({ role, subject, editable }),
+      }),
+    ]),
+  ),
+);

package/src/capabilities/skill-definition.ts

@@ -7,8 +7,8 @@ import * as Effect from 'effect/Effect';
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
 
-import { SketchSkill } from '#skills';
+import { DrawingSkill } from '#skills';
 
-const skillDefinition = () => Effect.succeed([Capability.contributes(AppCapabilities.SkillDefinition, SketchSkill)]);
+const skillDefinition = () => Effect.succeed([Capability.contributes(AppCapabilities.SkillDefinition, DrawingSkill)]);
 
 export default skillDefinition;

package/src/components/{CreateSketchPanel.tsx → CreateDrawingPanel.tsx}

@@ -10,20 +10,20 @@ import { useTranslation } from '@dxos/react-ui';
 import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
 
 import { meta } from '#meta';
-import { IllustratorCapabilities, type SketchVariant } from '#types';
+import { type DrawingVariant, IllustratorCapabilities } from '#types';
 
-export type CreateSketchPanelProps = SpaceCapabilities.CreateObjectCustomPanelProps & {
+export type CreateDrawingPanelProps = SpaceCapabilities.CreateObjectCustomPanelProps & {
   /** Optional override (primarily for stories/tests). Defaults to IllustratorCapabilities.VariantProvider. */
-  variants?: SketchVariant[];
+  variants?: DrawingVariant[];
 };
 
 /**
- * Variant picker for sketches (SearchList over contributed `SketchVariant[]`).
+ * Variant picker for drawings (SearchList over contributed `DrawingVariant[]`).
  * On select, calls `onCreateObject({ variantId })`; plugin-illustrator's
  * CreateObjectEntry.createObject resolves the variantId, builds the canvas via
- * variant.createCanvas, then wraps it in a Sketch.
+ * variant.createCanvas, then wraps it in a Drawing.
  */
-export const CreateSketchPanel = ({ onCreateObject, variants: variantsProp }: CreateSketchPanelProps) => {
+export const CreateDrawingPanel = ({ onCreateObject, variants: variantsProp }: CreateDrawingPanelProps) => {
   const { t } = useTranslation(meta.profile.key);
   const capabilityVariants = useCapabilities(IllustratorCapabilities.VariantProvider);
   const variants = variantsProp ?? capabilityVariants;
@@ -49,7 +49,7 @@ export const CreateSketchPanel = ({ onCreateObject, variants: variantsProp }: Cr
       <SearchList.Input
         classNames='mb-form-gap'
         autoFocus
-        data-testid='create-sketch-panel.variant-input'
+        data-testid='create-drawing-panel.variant-input'
         placeholder={t('create-panel.variant.placeholder')}
       />
       <SearchList.Viewport>

package/src/components/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2026 DXOS.org
 //
 
-export * from './CreateSketchPanel';
+export * from './CreateDrawingPanel';

package/src/containers/{SketchArticle/SketchArticle.tsx → DrawingArticle/DrawingArticle.tsx}

@@ -6,22 +6,22 @@ import React from 'react';
 
 import { useCapabilities } from '@dxos/app-framework/ui';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { Obj, type Ref } from '@dxos/echo';
 import { useObject } from '@dxos/echo-react';
 import { useTranslation } from '@dxos/react-ui';
 
 import { meta } from '#meta';
-import { IllustratorCapabilities, type Sketch } from '#types';
+import { type Drawing, IllustratorCapabilities } from '#types';
+import { findVariant } from '#util';
 
-export type SketchArticleProps = AppSurface.ObjectArticleProps<Sketch.Sketch> & {
+export type DrawingArticleProps = AppSurface.ObjectArticleProps<Drawing.Drawing> & {
   extrinsic?: boolean;
 };
 
-/** Resolves the sketch's canvas and delegates rendering to the matching variant's article. */
-export const SketchArticle = ({ role, attendableId, subject: sketch, extrinsic }: SketchArticleProps) => {
+/** Resolves the drawing's canvas and delegates rendering to the variant claiming its schema. */
+export const DrawingArticle = ({ role, attendableId, subject: drawing, extrinsic }: DrawingArticleProps) => {
   const { t } = useTranslation(meta.profile.key);
   const variants = useCapabilities(IllustratorCapabilities.VariantProvider);
-  const ref = sketch.canvas as Ref.Ref<Obj.Unknown>;
+  const ref = drawing.canvas;
   // Subscribe via the snapshot for load/re-render, but hand variants the LIVE object —
   // their store adapters need `Doc.createAccessor`, which rejects snapshots.
   const [snapshot] = useObject(ref);
@@ -31,18 +31,17 @@ export const SketchArticle = ({ role, attendableId, subject: sketch, extrinsic }
     return null;
   }
 
-  const typename = Obj.getTypename(canvas);
-  const match = variants.find((variant) => variant.id === typename);
+  const match = findVariant(variants, canvas);
   if (!match?.article) {
     return (
       <div className='p-4 text-sm'>
-        {t('unsupported-variant.label', { defaultValue: 'Unsupported sketch variant' })}
+        {t('unsupported-variant.label', { defaultValue: 'Unsupported drawing variant' })}
       </div>
     );
   }
 
   const Component = match.article;
-  return <Component sketch={sketch} canvas={canvas} role={role} attendableId={attendableId} extrinsic={extrinsic} />;
+  return <Component drawing={drawing} canvas={canvas} role={role} attendableId={attendableId} extrinsic={extrinsic} />;
 };
 
-SketchArticle.displayName = 'SketchArticle';
+DrawingArticle.displayName = 'DrawingArticle';

package/src/containers/{SketchArticle → DrawingArticle}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2026 DXOS.org
 //
 
-export * from './SketchArticle';
+export * from './DrawingArticle';

package/src/containers/DrawingCard/DrawingCard.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { useCapabilities } from '@dxos/app-framework/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { useObject } from '@dxos/echo-react';
+
+import { type Drawing, IllustratorCapabilities } from '#types';
+import { findVariant } from '#util';
+
+export type DrawingCardProps = AppSurface.ObjectCardProps<Drawing.Drawing>;
+
+/** Resolves the drawing's canvas and delegates rendering to the variant claiming its schema. */
+export const DrawingCard = ({ role, subject: drawing, editable }: DrawingCardProps) => {
+  const variants = useCapabilities(IllustratorCapabilities.VariantProvider);
+  const ref = drawing.canvas;
+  const [snapshot] = useObject(ref);
+  const canvas = snapshot ? ref.target : undefined;
+
+  if (!canvas) {
+    return null;
+  }
+
+  const match = findVariant(variants, canvas);
+  if (!match?.card) {
+    return null;
+  }
+
+  const Component = match.card;
+  return <Component drawing={drawing} canvas={canvas} role={role} editable={editable} />;
+};
+
+DrawingCard.displayName = 'DrawingCard';
+
+export default DrawingCard;

package/src/containers/{SketchCard → DrawingCard}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2026 DXOS.org
 //
 
-export * from './SketchCard';
+export * from './DrawingCard';

package/src/containers/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2026 DXOS.org
 //
 
-export * from './SketchArticle';
-export * from './SketchCard';
+export * from './DrawingArticle';
+export * from './DrawingCard';