@dxos/plugin-tldraw 0.10.0

package/src/testing/data.ts

@@ -0,0 +1,238 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export const data = {
+  v1: {
+    'document:document': { gridSize: 10, name: '', meta: {}, id: 'document:document', typeName: 'document' },
+    'page:4erp5FF7mts21Njur5UKw': {
+      meta: {},
+      id: 'page:4erp5FF7mts21Njur5UKw',
+      name: 'Page 1',
+      index: 'a1',
+      typeName: 'page',
+    },
+    'shape:_-1kyVBGSUAeNrcxiGAbw': {
+      x: 0,
+      y: 0,
+      rotation: 0,
+      isLocked: false,
+      opacity: 1,
+      meta: {},
+      id: 'shape:_-1kyVBGSUAeNrcxiGAbw',
+      type: 'geo',
+      props: {
+        w: 160,
+        h: 160,
+        geo: 'rectangle',
+        color: 'black',
+        labelColor: 'black',
+        fill: 'none',
+        dash: 'dotted',
+        size: 'l',
+        font: 'draw',
+        text: 'ECHO',
+        align: 'middle',
+        verticalAlign: 'middle',
+        growY: 0,
+        url: '',
+      },
+      parentId: 'page:4erp5FF7mts21Njur5UKw',
+      index: 'a1',
+      typeName: 'shape',
+    },
+    'shape:kXmGpjXqyzlg1savamgn8': {
+      x: 320,
+      y: 0,
+      rotation: 0,
+      isLocked: false,
+      opacity: 1,
+      meta: {},
+      id: 'shape:kXmGpjXqyzlg1savamgn8',
+      type: 'geo',
+      props: {
+        w: 160,
+        h: 160,
+        geo: 'star',
+        color: 'yellow',
+        labelColor: 'black',
+        fill: 'none',
+        dash: 'draw',
+        size: 'm',
+        font: 'draw',
+        text: 'DXOS',
+        align: 'middle',
+        verticalAlign: 'middle',
+        growY: 0,
+        url: '',
+      },
+      parentId: 'page:4erp5FF7mts21Njur5UKw',
+      index: 'a2',
+      typeName: 'shape',
+    },
+    'shape:eYiyZDA7Iwoi16QjTkJUE': {
+      x: 0,
+      y: 240,
+      rotation: -15 * (Math.PI / 180),
+      isLocked: false,
+      opacity: 1,
+      meta: {},
+      id: 'shape:eYiyZDA7Iwoi16QjTkJUE',
+      type: 'text',
+      props: {
+        color: 'light-green',
+        size: 'xl',
+        w: 320,
+        text: 'DXOS!',
+        font: 'mono',
+        align: 'middle',
+        autoSize: true,
+        scale: 1,
+      },
+      parentId: 'page:4erp5FF7mts21Njur5UKw',
+      index: 'a4',
+      typeName: 'shape',
+    },
+
+    // NOTE: This record will fail to be migrated.
+    'shape:F_o1eH6pS_ABcU3-JPadv': {
+      x: 0,
+      y: 240,
+      rotation: -15 * (Math.PI / 180),
+      isLocked: false,
+      opacity: 1,
+      meta: {},
+      id: 'shape:F_o1eH6pS_ABcU3-JPadv',
+      type: 'arrow',
+      parentId: 'page:4erp5FF7mts21Njur5UKw',
+      index: 'a3',
+      props: {
+        dash: 'draw',
+        size: 's',
+        fill: 'none',
+        color: 'blue',
+        labelColor: 'black',
+        bend: 0,
+        start: {
+          // Incompatible with v2 migration.
+          type: 'binding',
+          boundShapeId: 'shape:_-1kyVBGSUAeNrcxiGAbw',
+          normalizedAnchor: { x: 0.5, y: 0.5 },
+          isExact: false,
+        },
+        end: {
+          // Incompatible with v2 migration.
+          type: 'binding',
+          boundShapeId: 'shape:kXmGpjXqyzlg1savamgn8',
+          normalizedAnchor: { x: 0.5, y: 0.5 },
+          isExact: false,
+        },
+        arrowheadStart: 'none',
+        arrowheadEnd: 'arrow',
+        text: '',
+        font: 'draw',
+      },
+      typeName: 'shape',
+    },
+  },
+
+  v2: {
+    'document:document': {
+      gridSize: 10,
+      name: '',
+      meta: {},
+      id: 'document:document',
+      typeName: 'document',
+    },
+    'page:1': {
+      meta: {},
+      id: 'page:4erp5FF7mts21Njur5UKw',
+      name: 'Page 1',
+      index: 'a1',
+      typeName: 'page',
+    },
+    'shape:_-1kyVBGSUAeNrcxiGAbw': {
+      x: 0,
+      y: 0,
+      rotation: 0,
+      isLocked: false,
+      opacity: 1,
+      meta: {},
+      id: 'shape:_-1kyVBGSUAeNrcxiGAbw',
+      type: 'geo',
+      props: {
+        w: 160,
+        h: 160,
+        geo: 'rectangle',
+        color: 'black',
+        labelColor: 'black',
+        fill: 'none',
+        dash: 'dotted',
+        size: 'l',
+        font: 'draw',
+        text: 'ECHO',
+        align: 'middle',
+        verticalAlign: 'middle',
+        growY: 0,
+        url: '',
+        scale: 1,
+      },
+      parentId: 'page:4erp5FF7mts21Njur5UKw',
+      index: 'a1',
+      typeName: 'shape',
+    },
+    'shape:kXmGpjXqyzlg1savamgn8': {
+      x: 320,
+      y: 0,
+      rotation: 0,
+      isLocked: false,
+      opacity: 1,
+      meta: {},
+      id: 'shape:kXmGpjXqyzlg1savamgn8',
+      type: 'geo',
+      props: {
+        w: 160,
+        h: 160,
+        geo: 'star',
+        color: 'yellow',
+        labelColor: 'black',
+        fill: 'none',
+        dash: 'draw',
+        size: 'm',
+        font: 'draw',
+        text: 'DXOS',
+        align: 'middle',
+        verticalAlign: 'middle',
+        growY: 0,
+        url: '',
+        scale: 1,
+      },
+      parentId: 'page:4erp5FF7mts21Njur5UKw',
+      index: 'a2',
+      typeName: 'shape',
+    },
+    'shape:eYiyZDA7Iwoi16QjTkJUE': {
+      x: 0,
+      y: 240,
+      rotation: -15 * (Math.PI / 180),
+      isLocked: false,
+      opacity: 1,
+      meta: {},
+      id: 'shape:eYiyZDA7Iwoi16QjTkJUE',
+      type: 'text',
+      props: {
+        color: 'light-green',
+        size: 'xl',
+        w: 320,
+        text: 'DXOS!',
+        font: 'mono',
+        autoSize: true,
+        scale: 1,
+        textAlign: 'middle',
+      },
+      parentId: 'page:4erp5FF7mts21Njur5UKw',
+      index: 'a4',
+      typeName: 'shape',
+    },
+  },
+};

package/src/testing/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './data';

package/src/testing/schema.ts

@@ -0,0 +1,98 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export const DEFAULT_VERSION = 1;
+export const CURRENT_VERSION = 2;
+
+/**
+ * TLDraw schema.
+ */
+export const schema: Record<number, any> = {
+  1: {
+    schemaVersion: 1,
+    storeVersion: 4,
+    recordVersions: {
+      asset: {
+        version: 1,
+        subTypeKey: 'type',
+        subTypeVersions: {
+          image: 2,
+          video: 2,
+          bookmark: 0,
+        },
+      },
+      camera: {
+        version: 1,
+      },
+      document: {
+        version: 2,
+      },
+      instance: {
+        version: 22,
+      },
+      instance_page_state: {
+        version: 5,
+      },
+      page: {
+        version: 1,
+      },
+      shape: {
+        version: 3,
+        subTypeKey: 'type',
+        subTypeVersions: {
+          group: 0,
+          text: 1,
+          bookmark: 1,
+          draw: 1,
+          geo: 7,
+          note: 4,
+          line: 1,
+          frame: 0,
+          arrow: 2,
+          highlight: 0,
+          embed: 4,
+          image: 2,
+          video: 1,
+        },
+      },
+      instance_presence: {
+        version: 5,
+      },
+      pointer: {
+        version: 1,
+      },
+    },
+  },
+  2: {
+    schemaVersion: 2,
+    sequences: {
+      'com.tldraw.store': 4,
+      'com.tldraw.asset': 1,
+      'com.tldraw.camera': 1,
+      'com.tldraw.document': 2,
+      'com.tldraw.instance': 24,
+      'com.tldraw.instance_page_state': 5,
+      'com.tldraw.page': 1,
+      'com.tldraw.instance_presence': 5,
+      'com.tldraw.pointer': 1,
+      'com.tldraw.shape': 4,
+      'com.tldraw.asset.bookmark': 1,
+      'com.tldraw.asset.image': 3,
+      'com.tldraw.asset.video': 3,
+      'com.tldraw.shape.group': 0,
+      'com.tldraw.shape.text': 1,
+      'com.tldraw.shape.bookmark': 2,
+      'com.tldraw.shape.draw': 1,
+      'com.tldraw.shape.geo': 8,
+      'com.tldraw.shape.note': 6,
+      'com.tldraw.shape.line': 4,
+      'com.tldraw.shape.frame': 0,
+      'com.tldraw.shape.arrow': 3,
+      'com.tldraw.shape.highlight': 0,
+      'com.tldraw.shape.embed': 4,
+      'com.tldraw.shape.image': 3,
+      'com.tldraw.shape.video': 2,
+    },
+  },
+};

package/src/translations.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Resource } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+
+export const translations = [
+  {
+    'en-US': {
+      [meta.profile.key]: {
+        'plugin.name': 'tldraw',
+        'settings.hover-tools.label': 'Auto hide controls',
+      },
+    },
+  },
+] as const satisfies Resource[];

package/src/types/Settings.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// @import-as-namespace
+
+import * as Schema from 'effect/Schema';
+
+export const GridSchema = Schema.Union(
+  Schema.Literal('mesh').annotations({ title: 'Mesh' }),
+  Schema.Literal('dotted').annotations({ title: 'Dotted' }),
+);
+export type GridType = Schema.Schema.Type<typeof GridSchema>;
+
+export const Settings = Schema.mutable(
+  Schema.Struct({
+    showGrid: Schema.optional(
+      Schema.Boolean.annotations({
+        title: 'Show grid',
+        description: 'Display a background grid on the sketch canvas.',
+      }),
+    ),
+    gridType: Schema.optional(
+      GridSchema.annotations({
+        title: 'Grid type',
+        description: 'Choose between a mesh or dotted background grid.',
+      }),
+    ),
+  }),
+);
+
+export interface Settings extends Schema.Schema.Type<typeof Settings> {}

package/src/types/Tldraw.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// @import-as-namespace
+
+import * as Schema from 'effect/Schema';
+
+import { DXN, Obj, Type } from '@dxos/echo';
+import { HiddenAnnotation } from '@dxos/echo/Annotation';
+
+export const TLDRAW_SCHEMA = 'tldraw.com/2';
+
+/**
+ * Persisted tldraw canvas: an opaque map of RecordId → TLRecord managed by the store adapter.
+ * Referenced by the base `Sketch` (plugin-illustrator) as its renderer-specific canvas.
+ * Keeps the pre-variant typename (`org.dxos.type.canvas`) so existing stored sketches load
+ * without a data migration.
+ */
+export class Canvas extends Type.makeObject<Canvas>(DXN.make('org.dxos.type.canvas', '0.1.0'))(
+  Schema.Struct({
+    /** Fully qualified external schema reference. */
+    // TODO(wittjosiah): Remove once the schema is fully internalized.
+    schema: Schema.String.pipe(Schema.optional),
+    content: Schema.Record({ key: Schema.String, value: Schema.Any }),
+  }).pipe(HiddenAnnotation.set(true)),
+) {}
+
+export type MakeOptions = Partial<Obj.MakeProps<typeof Canvas>>;
+
+/**
+ * Creates an empty {@link Canvas}.
+ */
+export const makeCanvas = ({ schema = TLDRAW_SCHEMA, content = {} }: MakeOptions = {}): Canvas =>
+  Obj.make(Canvas, { schema, content });
+
+/** Type guard for {@link Canvas} objects. */
+export const isCanvas = (object: unknown): object is Canvas => Obj.instanceOf(Canvas, object);

package/src/types/TldrawCapabilities.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// @import-as-namespace
+
+import { type Atom } from '@effect-atom/atom-react';
+
+import { Capability } from '@dxos/app-framework';
+
+import { meta } from '#meta';
+
+// Inline import to avoid `Settings` namespace alias colliding with the
+// `Settings` capability export below.
+export const Settings = Capability.make<Atom.Writable<import('./Settings').Settings>>(
+  `${meta.profile.key}.capability.settings`,
+);

package/src/types/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './types';
+
+export * as Tldraw from './Tldraw';
+export * as TldrawCapabilities from './TldrawCapabilities';

package/src/types/types.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type TLStore } from '@tldraw/tlschema';
+
+export interface TldrawModel {
+  store: TLStore;
+}
+
+export * as Settings from './Settings';

package/src/typings.d.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+declare module '*.css' {
+  const content: undefined;
+  export default content;
+}

package/src/variant.test.ts

@@ -0,0 +1,142 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Registry } from '@effect-atom/atom-react';
+import { it } from '@effect/vitest';
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+import { describe } from 'vitest';
+
+import { AssistantTestLayer } from '@dxos/agent-runtime/testing';
+import { Capability, CapabilityManager } from '@dxos/app-framework';
+import { Operation } from '@dxos/compute';
+import { Database, Ref, Type } from '@dxos/echo';
+import { TestHelpers } from '@dxos/effect/testing';
+import { EntityId } from '@dxos/keys';
+import {
+  IllustratorCapabilities,
+  IllustratorOperationHandlerSet,
+  Sketch,
+  SketchOperation,
+} from '@dxos/plugin-illustrator';
+
+import { tldrawBuilder } from '#model';
+
+import { Tldraw } from './types';
+
+EntityId.dangerouslyDisableRandomness();
+
+const TestLayer = AssistantTestLayer({
+  operationHandlers: IllustratorOperationHandlerSet,
+  extraServices: Layer.sync(Capability.Service, () => capabilityService()),
+  types: [Sketch.Sketch, Tldraw.Canvas],
+  disableLlmMemoization: true,
+});
+
+/** Capability manager pre-loaded with the tldraw sketch variant, as the plugin would contribute it. */
+const capabilityService = () => {
+  const manager = CapabilityManager.make({ registry: Registry.make() });
+  manager.contribute({
+    interface: IllustratorCapabilities.VariantProvider,
+    implementation: {
+      id: Type.getTypename(Tldraw.Canvas),
+      label: 'tldraw',
+      canvasType: Tldraw.Canvas,
+      createCanvas: () => Effect.sync(() => Tldraw.makeCanvas()),
+      builder: tldrawBuilder,
+    },
+    module: 'test',
+  });
+  return manager;
+};
+
+/**
+ * Deterministic version of the storybook mental-model loop: draw a face, read the scene back,
+ * add a hat and edit the smile by id, and confirm the untouched face elements survive.
+ * Exercises the illustrator operations end-to-end through the tldraw builder.
+ */
+describe('tldraw sketch variant', () => {
+  it.effect(
+    'create → edit → read round-trip preserves untouched objects',
+    Effect.fnUntraced(
+      function* ({ expect }) {
+        const { object: sketch } = yield* Operation.invoke(SketchOperation.Create, { name: 'Portrait' });
+        yield* Database.add(sketch);
+        yield* Database.flush();
+        const ref = Ref.make(sketch);
+
+        // Draw a face.
+        const face = yield* Operation.invoke(SketchOperation.Edit, {
+          sketch: ref,
+          commands: [
+            {
+              op: 'upsert-object',
+              object: {
+                id: 'face',
+                origin: { x: 100, y: 100 },
+                scale: 2,
+                elements: [
+                  { kind: 'circle', id: 'head', cx: 50, cy: 50, r: 50, color: 'yellow', fill: 'solid' },
+                  { kind: 'circle', id: 'left-eye', cx: 30, cy: 35, r: 6, fill: 'solid' },
+                  { kind: 'circle', id: 'right-eye', cx: 70, cy: 35, r: 6, fill: 'solid' },
+                  { kind: 'arc', id: 'smile', cx: 50, cy: 55, r: 25, startAngle: 30, endAngle: 150 },
+                ],
+              },
+            },
+          ],
+        });
+        expect(face.upserted).toEqual(['face']);
+        expect(face.scene.objects).toHaveLength(1);
+
+        // Read the scene (what the agent would do before a follow-up edit).
+        const read = yield* Operation.invoke(SketchOperation.Read, { sketch: ref });
+        const readFace = read.scene.objects.find((object) => object.id === 'face');
+        expect(readFace?.origin).toEqual({ x: 100, y: 100 });
+        expect(readFace?.elements.map((element) => element.id)).toEqual(['head', 'left-eye', 'right-eye', 'smile']);
+
+        // Add a hat above the face and turn the smile into a frown — by id, without resending the face.
+        const edit = yield* Operation.invoke(SketchOperation.Edit, {
+          sketch: ref,
+          commands: [
+            {
+              op: 'upsert-object',
+              object: {
+                id: 'hat',
+                origin: { x: 120, y: 40 },
+                scale: 2,
+                elements: [
+                  { kind: 'rect', id: 'brim', x: 0, y: 25, w: 80, h: 6, color: 'blue', fill: 'solid' },
+                  { kind: 'rect', id: 'crown', x: 20, y: 0, w: 40, h: 25, color: 'blue', fill: 'solid' },
+                ],
+              },
+            },
+            {
+              op: 'upsert-elements',
+              objectId: 'face',
+              elements: [{ kind: 'arc', id: 'smile', cx: 50, cy: 70, r: 20, startAngle: 210, endAngle: 330 }],
+            },
+          ],
+        });
+        expect([...edit.upserted].sort()).toEqual(['face', 'hat']);
+        expect(edit.scene.objects.map((object) => object.id).sort()).toEqual(['face', 'hat']);
+
+        // The face's untouched elements survived the follow-up edit.
+        const after = edit.scene.objects.find((object) => object.id === 'face');
+        expect(after?.elements.find((element) => element.id === 'head')).toEqual(
+          readFace?.elements.find((element) => element.id === 'head'),
+        );
+
+        // Remove the hat again.
+        const removed = yield* Operation.invoke(SketchOperation.Edit, {
+          sketch: ref,
+          commands: [{ op: 'remove-object', objectId: 'hat' }],
+        });
+        expect(removed.scene.objects.map((object) => object.id)).toEqual(['face']);
+        expect(removed.removed).toBe(2);
+      },
+      Effect.provide(TestLayer),
+      TestHelpers.provideTestContext,
+    ),
+  );
+});

package/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+//
+// Copyright 2026 DXOS.org
+//
+
+declare module '*.mdl?raw' {
+  const content: string;
+  export default content;
+}