@dxos/plugin-tldraw 0.10.0 → 0.11.1

package/dx.config.ts

@@ -30,6 +30,7 @@ export default Config2.make({
     dependsOn: ['org.dxos.plugin.illustrator'],
     icon: { key: 'ph--compass-tool--regular', hue: 'indigo' },
     spec: 'PLUGIN.mdl',
+    tags: ['alpha'],
     screenshots: [{ dark: 'https://dxos.network/plugin-details-sketch-dark.png' }],
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-tldraw",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "tldraw canvas renderer for the DXOS Illustrator plugin.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -92,7 +92,7 @@
   ],
   "dependencies": {
     "@automerge/automerge": "3.3.0-fragments.2",
-    "@effect-atom/atom-react": "^0.5.0",
+    "@effect-atom/atom": "^0.5.3",
     "@tldraw/assets": "^3.0.0",
     "@tldraw/editor": "^3.0.0",
     "@tldraw/state": "^3.0.0",
@@ -103,29 +103,30 @@
     "effect": "3.21.4",
     "lodash.defaultsdeep": "^4.6.1",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.10.0",
-    "@dxos/app-toolkit": "0.10.0",
-    "@dxos/async": "0.10.0",
-    "@dxos/client": "0.10.0",
-    "@dxos/echo": "0.10.0",
-    "@dxos/echo-client": "0.10.0",
-    "@dxos/invariant": "0.10.0",
-    "@dxos/compute": "0.10.0",
-    "@dxos/effect": "0.10.0",
-    "@dxos/echo-doc": "0.10.0",
-    "@dxos/log": "0.10.0",
-    "@dxos/plugin-illustrator": "0.10.0",
-    "@dxos/keys": "0.10.0",
-    "@dxos/react-client": "0.10.0",
-    "@dxos/react-ui-attention": "0.10.0",
-    "@dxos/react-hooks": "0.10.0",
-    "@dxos/plugin-graph": "0.10.0",
-    "@dxos/plugin-space": "0.10.0",
-    "@dxos/react-ui-form": "0.10.0",
-    "@dxos/schema": "0.10.0",
-    "@dxos/util": "0.10.0"
+    "@dxos/app-framework": "0.11.1",
+    "@dxos/async": "0.11.1",
+    "@dxos/client": "0.11.1",
+    "@dxos/compute": "0.11.1",
+    "@dxos/app-toolkit": "0.11.1",
+    "@dxos/echo-doc": "0.11.1",
+    "@dxos/effect": "0.11.1",
+    "@dxos/invariant": "0.11.1",
+    "@dxos/keys": "0.11.1",
+    "@dxos/log": "0.11.1",
+    "@dxos/plugin-graph": "0.11.1",
+    "@dxos/plugin-illustrator": "0.11.1",
+    "@dxos/plugin-space": "0.11.1",
+    "@dxos/echo-client": "0.11.1",
+    "@dxos/react-client": "0.11.1",
+    "@dxos/react-hooks": "0.11.1",
+    "@dxos/react-ui-attention": "0.11.1",
+    "@dxos/echo": "0.11.1",
+    "@dxos/react-ui-form": "0.11.1",
+    "@dxos/schema": "0.11.1",
+    "@dxos/util": "0.11.1"
   },
   "devDependencies": {
+    "@effect-atom/atom-react": "^0.5.0",
     "@effect/vitest": "0.29.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/react": "~19.2.17",
@@ -133,20 +134,20 @@
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
     "vite": "^8.1.4",
-    "@dxos/plugin-testing": "0.10.0",
-    "@dxos/random": "0.10.0",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/react-ui-mosaic": "0.10.0",
-    "@dxos/storybook-utils": "0.10.0",
-    "@dxos/ui-theme": "0.10.0",
-    "@dxos/agent-runtime": "0.10.0"
+    "@dxos/agent-runtime": "0.11.1",
+    "@dxos/plugin-testing": "0.11.1",
+    "@dxos/react-ui-mosaic": "0.11.1",
+    "@dxos/storybook-utils": "0.11.1",
+    "@dxos/ui-theme": "0.11.1",
+    "@dxos/random": "0.11.1",
+    "@dxos/react-ui": "0.11.1"
   },
   "peerDependencies": {
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "^0.10.0",
-    "@dxos/ui-theme": "^0.10.0"
+    "@dxos/react-ui": "^0.11.1",
+    "@dxos/ui-theme": "^0.11.1"
   },
   "publishConfig": {
     "access": "public"

package/src/TldrawPlugin.tsx

@@ -5,21 +5,19 @@
 import { Plugin } from '@dxos/app-framework';
 import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
 
-import { SketchVariant, TldrawSettings } from '#capabilities';
+import { DrawingVariant, TldrawSettings } from '#capabilities';
 import { meta } from '#meta';
 import { translations } from '#translations';
-import { Tldraw } from '#types';
 
 // eslint-disable-next-line import/no-relative-packages
 import pluginSpec from '../PLUGIN.mdl?raw';
 
 export const TldrawPlugin = Plugin.define(meta).pipe(
   Plugin.addModule({
-    id: 'sketch-variant',
+    id: 'drawing-variant',
     activatesOn: AppActivationEvents.SetupSchema,
-    activate: SketchVariant,
+    activate: DrawingVariant,
   }),
-  AppPlugin.addSchemaModule({ schema: [Tldraw.Canvas] }),
   AppPlugin.addSettingsModule({ activate: TldrawSettings }),
   AppPlugin.addTranslationsModule({ translations }),
   AppPlugin.addPluginAssetModule({

package/src/capabilities/{sketch-variant.ts → drawing-variant.ts}

@@ -5,21 +5,20 @@
 import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
-import { Type } from '@dxos/echo';
-import { IllustratorCapabilities, type SketchVariant } from '@dxos/plugin-illustrator/types';
+import { type DrawingVariant, IllustratorCapabilities } from '@dxos/plugin-illustrator/types';
 
 import { TldrawArticle, TldrawCard } from '#containers';
-import { tldrawBuilder } from '#model';
+import { TldrawBuilder } from '#model';
 
 import { Tldraw } from '../types';
 
-const variant: SketchVariant = {
-  id: Type.getTypename(Tldraw.Canvas),
+// No `canvasType`/`createCanvas`: tldraw stores its records in the base `Drawing.Canvas`,
+// discriminated by `schema`.
+const variant: DrawingVariant = {
+  id: Tldraw.TLDRAW_SCHEMA,
   label: 'tldraw',
   icon: 'ph--compass-tool--regular',
-  canvasType: Tldraw.Canvas,
-  createCanvas: () => Effect.sync(() => Tldraw.makeCanvas()),
-  builder: tldrawBuilder,
+  builder: TldrawBuilder,
   card: TldrawCard,
   article: TldrawArticle,
 };

package/src/capabilities/index.ts

@@ -4,5 +4,5 @@
 
 import { Capability } from '@dxos/app-framework';
 
-export const SketchVariant = Capability.lazy('SketchVariant', () => import('./sketch-variant'));
+export const DrawingVariant = Capability.lazy('DrawingVariant', () => import('./drawing-variant'));
 export const TldrawSettings = Capability.lazy('TldrawSettings', () => import('./settings'));

package/src/components/Canvas/Canvas.stories.tsx

@@ -6,10 +6,11 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { createObject } from '@dxos/echo-client';
+import { Drawing } from '@dxos/plugin-illustrator/types';
 import { Button, Panel, Toolbar } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { TldrawBuilder } from '#model';
+import { RecordBuilder } from '#model';
 import { data } from '#testing';
 import { Tldraw } from '#types';
 
@@ -17,21 +18,23 @@ import { migrateCanvas } from '../../migrations';
 import { CanvasComponent } from './Canvas';
 
 const DefaultStory = () => {
-  const [canvas, setCanvas] = useState(createObject(Tldraw.makeCanvas({ content: data.v2 })));
+  const [canvas, setCanvas] = useState(
+    createObject(Drawing.makeCanvas({ schema: Tldraw.TLDRAW_SCHEMA, content: data.v2 })),
+  );
 
   const handleClear = () => {
-    setCanvas(createObject(Tldraw.makeCanvas()));
+    setCanvas(createObject(Drawing.makeCanvas({ schema: Tldraw.TLDRAW_SCHEMA })));
   };
 
   const handleCreate = () => {
-    const canvas = createObject(Tldraw.makeCanvas({ content: data.v2 }));
+    const canvas = createObject(Drawing.makeCanvas({ schema: Tldraw.TLDRAW_SCHEMA, content: data.v2 }));
     console.log(JSON.stringify(canvas, undefined, 2));
     setCanvas(canvas);
   };
 
   const handleMigrate = async () => {
     const content = await migrateCanvas(data.v1);
-    setCanvas(createObject(Tldraw.makeCanvas({ content })));
+    setCanvas(createObject(Drawing.makeCanvas({ schema: Tldraw.TLDRAW_SCHEMA, content })));
   };
 
   return (
@@ -74,8 +77,9 @@ export const Default: Story = {};
 const BuilderStory = () => {
   const [canvas] = useState(() =>
     createObject(
-      Tldraw.makeCanvas({
-        content: new TldrawBuilder()
+      Drawing.makeCanvas({
+        schema: Tldraw.TLDRAW_SCHEMA,
+        content: new RecordBuilder()
           .rectangle({ id: 'a', x: 0, y: 0, text: 'DXOS', color: 'blue', fill: 'solid' })
           .ellipse({ id: 'b', x: 360, y: 0, text: 'ECHO', color: 'green' })
           .geo('star', { id: 'c', x: 180, y: 280, text: 'EDGE', color: 'yellow' })

package/src/components/Canvas/Canvas.tsx

@@ -13,11 +13,12 @@ import React, { type FC, useEffect, useMemo, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
 import { Obj } from '@dxos/echo';
+import { Drawing } from '@dxos/plugin-illustrator/types';
 import { useMergeRefs } from '@dxos/react-hooks';
 import { composable, composableProps } from '@dxos/react-ui';
 
 import { useStoreAdapter } from '#hooks';
-import { type Settings, type Tldraw } from '#types';
+import { type Settings } from '#types';
 
 import { handleSnap } from '../actions';
 import { CustomMenu, CustomStylePanel, DefaultToolbarContent, DottedGrid, MeshGrid } from '../custom';
@@ -30,7 +31,7 @@ const gridComponents: Record<Settings.GridType, FC<TLGridProps>> = {
 };
 
 export type CanvasProps = {
-  canvas: Tldraw.Canvas;
+  canvas: Drawing.Canvas;
   readonly?: boolean;
   autoCenter?: boolean;
   hideUi?: boolean;

package/src/components/Canvas/Mermaid.stories.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { createObject } from '@dxos/echo-client';
+import { type ContentMap, Mermaid } from '@dxos/plugin-illustrator/model';
+import { Drawing } from '@dxos/plugin-illustrator/types';
+import { Panel } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { applyCommands } from '#model';
+import { Tldraw } from '#types';
+
+import { CanvasComponent } from './Canvas';
+
+const FLOWCHART = `
+flowchart TB
+    X[X]
+
+    subgraph CORE[" "]
+        A[A]
+        B[B]
+        C[C]
+
+        A --> B
+        A --> C
+    end
+
+    Y[Y]
+
+    X --> A
+    X --> B
+    X --> C
+    C --> Y
+    Y --> C
+`;
+
+const DefaultStory = () => {
+  const [canvas] = useState(() => {
+    const content: ContentMap = {};
+    applyCommands(content, Mermaid.compile(FLOWCHART, { scale: 2 }));
+    return createObject(Drawing.makeCanvas({ schema: Tldraw.TLDRAW_SCHEMA, content }));
+  });
+
+  return (
+    <Panel.Root>
+      <Panel.Content asChild>
+        <CanvasComponent classNames='dx-attention-surface' canvas={canvas} assetsBaseUrl={null} autoCenter />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-tldraw/components/Mermaid',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/actions.ts

@@ -6,14 +6,13 @@ import type { TLRecord } from '@tldraw/tldraw';
 import { isShape } from '@tldraw/tlschema';
 
 import { Doc } from '@dxos/echo-doc';
+import { Drawing } from '@dxos/plugin-illustrator/types';
 import { getDeep } from '@dxos/util';
 
-import type { Tldraw } from '#types';
-
 /**
  * Snap to grid.
  */
-export const handleSnap = async (canvas: Tldraw.Canvas) => {
+export const handleSnap = async (canvas: Drawing.Canvas) => {
   const snap = (value: number, tolerance = 40) => {
     return Math.round(value / tolerance) * tolerance;
   };

package/src/containers/TldrawArticle/TldrawArticle.tsx

@@ -8,22 +8,23 @@ import { useAtomCapability } from '@dxos/app-framework/ui';
 import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
-import { useActions } from '@dxos/plugin-graph';
-import { type SketchVariantSurfaceProps } from '@dxos/plugin-illustrator/types';
+import { useActions } from '@dxos/plugin-graph/hooks';
+import { type DrawingVariantSurfaceProps } from '@dxos/plugin-illustrator/types';
+import { Drawing } from '@dxos/plugin-illustrator/types';
 import { Flex, Panel } from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import { isTauri } from '@dxos/util';
 
 import { CanvasComponent } from '#components';
-import { Tldraw, TldrawCapabilities } from '#types';
+import { TldrawCapabilities } from '#types';
 
-export type TldrawArticleProps = SketchVariantSurfaceProps;
+export type TldrawArticleProps = DrawingVariantSurfaceProps;
 
-export const TldrawArticle = ({ role, attendableId, sketch, canvas, extrinsic }: TldrawArticleProps) => {
-  invariant(Obj.instanceOf(Tldraw.Canvas, canvas));
+export const TldrawArticle = ({ role, attendableId, drawing, canvas, extrinsic }: TldrawArticleProps) => {
+  invariant(Obj.instanceOf(Drawing.Canvas, canvas));
   const settings = useAtomCapability(TldrawCapabilities.Settings);
-  const id = Obj.getURI(sketch as Obj.Any);
+  const id = Obj.getURI(drawing as Obj.Any);
   const { hasAttention } = useAttention(attendableId);
   const section = role === AppSurface.Section.role;
 

package/src/containers/TldrawCard/TldrawCard.stories.tsx

@@ -5,20 +5,21 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { Sketch } from '@dxos/plugin-illustrator/types';
+import { Drawing } from '@dxos/plugin-illustrator/types';
 import { CardContainer } from '@dxos/react-ui-mosaic/testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { meta as pluginMeta } from '#meta';
-import { TldrawBuilder } from '#model';
+import { RecordBuilder } from '#model';
 import { Tldraw } from '#types';
 
 import { TldrawCard } from './TldrawCard';
 
 const CardStory = () => {
-  const { sketch, canvas } = useMemo(() => {
-    const canvas = Tldraw.makeCanvas({
-      content: new TldrawBuilder()
+  const { drawing, canvas } = useMemo(() => {
+    const canvas = Drawing.makeCanvas({
+      schema: Tldraw.TLDRAW_SCHEMA,
+      content: new RecordBuilder()
         .rectangle({ id: 'a', x: 0, y: 0, text: 'DXOS', color: 'blue', fill: 'solid' })
         .ellipse({ id: 'b', x: 360, y: 0, text: 'ECHO', color: 'green' })
         .geo('star', { id: 'c', x: 180, y: 280, text: 'EDGE', color: 'yellow' })
@@ -26,12 +27,12 @@ const CardStory = () => {
         .arrow({ from: 'b', to: 'c' })
         .build(),
     });
-    return { sketch: Sketch.make({ canvas }), canvas };
+    return { drawing: Drawing.make({ canvas }), canvas };
   }, []);
 
   return (
     <CardContainer role='popover' icon={pluginMeta.profile.icon?.key}>
-      <TldrawCard role='card--content' sketch={sketch} canvas={canvas} />
+      <TldrawCard role='card--content' drawing={drawing} canvas={canvas} />
     </CardContainer>
   );
 };

package/src/containers/TldrawCard/TldrawCard.tsx

@@ -6,16 +6,16 @@ import React from 'react';
 
 import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
-import { type SketchVariantSurfaceProps } from '@dxos/plugin-illustrator/types';
+import { type DrawingVariantSurfaceProps } from '@dxos/plugin-illustrator/types';
+import { Drawing } from '@dxos/plugin-illustrator/types';
 import { Card } from '@dxos/react-ui';
 
 import { CanvasComponent } from '#components';
-import { Tldraw } from '#types';
 
-export type TldrawCardProps = SketchVariantSurfaceProps;
+export type TldrawCardProps = DrawingVariantSurfaceProps;
 
 export const TldrawCard = ({ canvas, editable = false }: TldrawCardProps) => {
-  invariant(Obj.instanceOf(Tldraw.Canvas, canvas));
+  invariant(Obj.instanceOf(Drawing.Canvas, canvas));
   return (
     <Card.Body>
       <Card.Section classNames='aspect-square'>

package/src/hooks/useStoreAdapter.ts

@@ -6,6 +6,7 @@ import { useState } from 'react';
 
 import { Doc } from '@dxos/echo-doc';
 import { log } from '@dxos/log';
+import { Drawing } from '@dxos/plugin-illustrator/types';
 import { useAsyncEffect } from '@dxos/react-ui';
 
 import { Tldraw } from '#types';
@@ -19,7 +20,7 @@ import { TLDrawStoreAdapter } from './adapter';
  * @param canvas - Optional canvas whose content will be synced.
  * @returns The TLDrawStoreAdapter instance managing the tldraw store.
  */
-export const useStoreAdapter = (canvas?: Tldraw.Canvas) => {
+export const useStoreAdapter = (canvas?: Drawing.Canvas) => {
   const [adapter] = useState(new TLDrawStoreAdapter());
   const [_, forceUpdate] = useState({});
   useAsyncEffect(

package/src/model/{TldrawBuilder.test.ts → RecordBuilder.test.ts}

@@ -5,17 +5,17 @@
 import { createTLSchema } from '@tldraw/tlschema';
 import { describe, test } from 'vitest';
 
-import { TldrawBuilder } from './TldrawBuilder';
+import { RecordBuilder } from './RecordBuilder';
 
-describe('TldrawBuilder', () => {
+describe('RecordBuilder', () => {
   test('builds an empty canvas with document and page', ({ expect }) => {
-    const content = new TldrawBuilder().build();
+    const content = new RecordBuilder().build();
     expect(content['document:document'].typeName).to.eq('document');
     expect(content['page:page'].typeName).to.eq('page');
   });
 
   test('chains shapes and connectors', ({ expect }) => {
-    const content = new TldrawBuilder()
+    const content = new RecordBuilder()
       .rectangle({ id: 'a', x: 0, y: 0, text: 'DXOS', color: 'blue' })
       .ellipse({ id: 'b', x: 320, y: 0, text: 'ECHO', color: 'green' })
       .text({ x: 0, y: 240, text: 'Hello', font: 'mono' })
@@ -30,7 +30,7 @@ describe('TldrawBuilder', () => {
   });
 
   test('connects via explicit points when shapes are not referenced', ({ expect }) => {
-    const content = new TldrawBuilder()
+    const content = new RecordBuilder()
       .arrow({ id: 'arrow', start: { x: 0, y: 0 }, end: { x: 200, y: 100 } })
       .line({ id: 'line', start: { x: 0, y: 0 }, end: { x: 100, y: 0 } })
       .build();
@@ -44,14 +44,14 @@ describe('TldrawBuilder', () => {
   });
 
   test('throws on unknown connector handles and duplicate shape ids', ({ expect }) => {
-    expect(() => new TldrawBuilder().rectangle({ id: 'a' }).arrow({ from: 'a', to: 'missing' })).to.throw(
+    expect(() => new RecordBuilder().rectangle({ id: 'a' }).arrow({ from: 'a', to: 'missing' })).to.throw(
       /unknown target shape/,
     );
-    expect(() => new TldrawBuilder().rectangle({ id: 'dup' }).ellipse({ id: 'dup' })).to.throw(/duplicate shape id/);
+    expect(() => new RecordBuilder().rectangle({ id: 'dup' }).ellipse({ id: 'dup' })).to.throw(/duplicate shape id/);
   });
 
   test('produces records that pass tldraw schema validation', ({ expect }) => {
-    const content = new TldrawBuilder()
+    const content = new RecordBuilder()
       .rectangle({ id: 'a', x: 0, y: 0, text: 'A' })
       .circle({ id: 'b', x: 320, y: 0, text: 'B' })
       .geo('star', { id: 'c', x: 160, y: 240, color: 'yellow' })

package/src/model/{TldrawBuilder.ts → RecordBuilder.ts}

@@ -134,14 +134,14 @@ type Box = { id: string; x: number; y: number; w: number; h: number };
  *
  * @example
  * ```ts
- * const content = new TldrawBuilder()
+ * const content = new RecordBuilder()
  *   .rectangle({ id: 'a', x: 0, y: 0, text: 'DXOS', color: 'blue' })
  *   .ellipse({ id: 'b', x: 320, y: 0, text: 'ECHO', color: 'green' })
  *   .arrow({ from: 'a', to: 'b' })
  *   .build();
  * ```
  */
-export class TldrawBuilder {
+export class RecordBuilder {
   readonly #records: CanvasContent = {};
   readonly #boxes = new Map<string, Box>();
   readonly #metaFor?: (handle: string) => Record<string, any>;

package/src/model/builder.ts

@@ -3,29 +3,66 @@
 //
 
 //
-// tldraw implementation of the illustrator `SketchBuilder` contract: maps the scene DSL
-// onto the tldraw record map stored in `Tldraw.Canvas.content`.
+// tldraw implementation of the illustrator `DrawingBuilder` contract: supplies the record
+// encoding (identity in `meta`, page scaffold, binding cleanup) and inherits the command
+// semantics from the shared content handler.
 //
 
-import { Obj } from '@dxos/echo';
-import { invariant } from '@dxos/invariant';
-import { type ApplyResult, type SketchBuilder } from '@dxos/plugin-illustrator/model';
+import {
+  type ContentHandler,
+  type ContentMap,
+  type Identity,
+  type Scene,
+  applyCommands as applyContentCommands,
+  makeBuilder,
+  nextIndex,
+} from '@dxos/plugin-illustrator/model';
 
 import { Tldraw } from '../types';
-import { applyCommands } from './apply';
-import { readScene } from './read';
+import { elementBoxes, readScene } from './read';
+import { DOCUMENT_ID, PAGE_ID } from './RecordBuilder';
+import { renderObject } from './render';
 
-export const tldrawBuilder: SketchBuilder = {
-  read: (canvas) => {
-    invariant(Obj.instanceOf(Tldraw.Canvas, canvas));
-    return readScene(canvas.content);
+const isShape = (record: any) => record?.typeName === 'shape';
+
+const handler: ContentHandler = {
+  identify: (record) => {
+    if (!isShape(record) || typeof record.meta?.object !== 'string' || typeof record.meta?.element !== 'string') {
+      return undefined;
+    }
+    return { object: record.meta.object, element: record.meta.element } satisfies Identity;
+  },
+
+  render: (object, placement, content) =>
+    renderObject(object, { ...placement, indexStart: nextIndex(content, isShape), external: elementBoxes(content) }),
+
+  read: (content) => readScene(content),
+
+  translate: (record, delta) => {
+    record.x += delta.x;
+    record.y += delta.y;
   },
-  apply: (canvas, commands) => {
-    invariant(Obj.instanceOf(Tldraw.Canvas, canvas));
-    let result: ApplyResult = { upserted: [], removed: 0 };
-    Obj.update(canvas, (canvas) => {
-      result = applyCommands(canvas.content as Obj.Mutable<typeof canvas.content>, commands);
-    });
-    return result;
+
+  scaffold: (content: ContentMap) => {
+    content[DOCUMENT_ID] ??= { gridSize: 10, name: '', meta: {}, id: DOCUMENT_ID, typeName: 'document' };
+    content[PAGE_ID] ??= { meta: {}, id: PAGE_ID, name: 'Page 1', index: 'a1', typeName: 'page' };
+  },
+
+  // Bindings reference shapes by id; drop any left dangling by a deletion.
+  prune: (content: ContentMap) => {
+    for (const [key, record] of Object.entries(content)) {
+      if (record?.typeName === 'binding' && (!content[record.fromId] || !content[record.toId])) {
+        delete content[key];
+      }
+    }
   },
 };
+
+export const TldrawBuilder = makeBuilder({ schema: Tldraw.TLDRAW_SCHEMA, handler });
+
+/**
+ * Apply commands straight to a content map, bypassing ECHO — for tests and tooling that hold
+ * raw tldraw records. The object-aware path is {@link TldrawBuilder}.
+ */
+export const applyCommands = (content: ContentMap, commands: readonly Scene.Command[]) =>
+  applyContentCommands(content, commands, handler);

package/src/model/index.ts

@@ -2,8 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
-export * from './apply';
 export * from './builder';
 export * from './read';
 export * from './render';
-export * from './TldrawBuilder';
+export * from './RecordBuilder';

package/src/model/read.ts

@@ -10,8 +10,8 @@
 
 import { type ReadResult, type ReadWorldObject, type Scene } from '@dxos/plugin-illustrator/model';
 
+import { type CanvasContent } from './RecordBuilder';
 import { type ExternalBox } from './render';
-import { type CanvasContent } from './TldrawBuilder';
 
 type ShapeRecord = Record<string, any>;
 

package/src/model/render.ts

@@ -17,9 +17,9 @@ import {
   type Fill,
   type PathProps,
   type Point,
+  RecordBuilder,
   type ShapeProps,
-  TldrawBuilder,
-} from './TldrawBuilder';
+} from './RecordBuilder';
 
 export const DEFAULT_SCALE = 1;
 
@@ -79,7 +79,7 @@ export const renderObject = (object: Scene.WorldObject, options: RenderOptions):
   const length = (units: number) => units * scale;
 
   const kinds = new Map<string, string>();
-  const builder = new TldrawBuilder({
+  const builder = new RecordBuilder({
     indexStart,
     metaFor: (handle) => {
       const [objectId, elementId] = splitHandle(handle);