@dxos/plugin-tldraw 0.10.0

package/dx.config.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Config2 } from '@dxos/app-framework/config';
+import { trim } from '@dxos/util';
+
+export default Config2.make({
+  plugin: {
+    key: 'org.dxos.plugin.tldraw',
+    name: 'tldraw',
+    author: 'DXOS',
+    description: trim`
+      tldraw is the canvas renderer that powers collaborative whiteboards in DXOS Composer,
+      giving every workspace a full-featured infinite canvas. Draw freehand strokes, place
+      geometric shapes, add text and arrows, and organise ideas visually — all within the same
+      local-first environment as the rest of your documents.
+
+      The plugin contributes a sketch variant to the Illustrator plugin: the base \`Sketch\`
+      object references a tldraw Canvas whose content is stored as a plain JSON record in ECHO,
+      so no binary blobs or external storage are required. Toolbar actions, grid settings, and
+      custom tools are wired through the Composer plugin system, and a builder maps the
+      Illustrator scene DSL onto tldraw records so agents can draw and edit diagrams.
+
+      Because Canvas data lives in ECHO, every edit is replicated peer-to-peer in real time.
+      Collaborators see each other's strokes as they draw, and changes made offline merge
+      automatically when connectivity is restored using ECHO's CRDT semantics.
+    `,
+    source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-tldraw',
+    dependsOn: ['org.dxos.plugin.illustrator'],
+    icon: { key: 'ph--compass-tool--regular', hue: 'indigo' },
+    spec: 'PLUGIN.mdl',
+    screenshots: [{ dark: 'https://dxos.network/plugin-details-sketch-dark.png' }],
+  },
+});

package/package.json

@@ -0,0 +1,157 @@
+{
+  "name": "@dxos/plugin-tldraw",
+  "version": "0.10.0",
+  "description": "tldraw canvas renderer for the DXOS Illustrator plugin.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
+  "author": "DXOS.org",
+  "sideEffects": true,
+  "type": "module",
+  "imports": {
+    "#capabilities": {
+      "source": "./src/capabilities/index.ts",
+      "types": "./dist/types/src/capabilities/index.d.ts",
+      "default": "./dist/lib/capabilities.mjs"
+    },
+    "#components": {
+      "source": "./src/components/index.ts",
+      "types": "./dist/types/src/components/index.d.ts",
+      "default": "./dist/lib/components.mjs"
+    },
+    "#containers": {
+      "source": "./src/containers/index.ts",
+      "types": "./dist/types/src/containers/index.d.ts",
+      "default": "./dist/lib/containers.mjs"
+    },
+    "#hooks": {
+      "source": "./src/hooks/index.ts",
+      "types": "./dist/types/src/hooks/index.d.ts",
+      "default": "./dist/lib/hooks.mjs"
+    },
+    "#model": {
+      "source": "./src/model/index.ts",
+      "types": "./dist/types/src/model/index.d.ts",
+      "default": "./dist/lib/model.mjs"
+    },
+    "#meta": {
+      "source": "./src/meta.ts",
+      "types": "./dist/types/src/meta.d.ts",
+      "default": "./dist/lib/meta.mjs"
+    },
+    "#plugin": {
+      "source": "./src/TldrawPlugin.tsx",
+      "types": "./dist/types/src/TldrawPlugin.d.ts",
+      "default": "./dist/lib/TldrawPlugin.mjs"
+    },
+    "#testing": "./src/testing/index.ts",
+    "#translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/translations.mjs"
+    },
+    "#types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "default": "./dist/lib/types.mjs"
+    }
+  },
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "import": "./dist/lib/index.mjs"
+    },
+    "./assets/PLUGIN.mdl": "./PLUGIN.mdl",
+    "./plugin": {
+      "source": "./src/plugin.ts",
+      "types": "./dist/types/src/plugin.d.ts",
+      "import": "./dist/lib/plugin.mjs"
+    },
+    "./testing": {
+      "source": "./src/testing/index.ts",
+      "types": "./dist/types/src/testing/index.d.ts",
+      "import": "./dist/lib/testing.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "import": "./dist/lib/translations.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "dx.config.ts",
+    "src",
+    "PLUGIN.mdl"
+  ],
+  "dependencies": {
+    "@automerge/automerge": "3.3.0-fragments.2",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@tldraw/assets": "^3.0.0",
+    "@tldraw/editor": "^3.0.0",
+    "@tldraw/state": "^3.0.0",
+    "@tldraw/store": "^3.0.0",
+    "@tldraw/tldraw": "^3.0.0",
+    "@tldraw/tlschema": "^3.0.0",
+    "@tldraw/utils": "^3.0.0",
+    "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"
+  },
+  "devDependencies": {
+    "@effect/vitest": "0.29.0",
+    "@types/lodash.defaultsdeep": "^4.6.6",
+    "@types/react": "~19.2.17",
+    "@types/react-dom": "~19.2.3",
+    "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"
+  },
+  "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"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "copy:assets": "./scripts/copy_assets.sh"
+  }
+}

package/src/TldrawPlugin.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
+
+import { SketchVariant, 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',
+    activatesOn: AppActivationEvents.SetupSchema,
+    activate: SketchVariant,
+  }),
+  AppPlugin.addSchemaModule({ schema: [Tldraw.Canvas] }),
+  AppPlugin.addSettingsModule({ activate: TldrawSettings }),
+  AppPlugin.addTranslationsModule({ translations }),
+  AppPlugin.addPluginAssetModule({
+    asset: { pluginId: meta.profile.key, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
+  }),
+  Plugin.make,
+);
+
+export default TldrawPlugin;

package/src/capabilities/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const SketchVariant = Capability.lazy('SketchVariant', () => import('./sketch-variant'));
+export const TldrawSettings = Capability.lazy('TldrawSettings', () => import('./settings'));

package/src/capabilities/settings.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { createKvsStore } from '@dxos/effect';
+
+import { meta } from '#meta';
+import { Settings, TldrawCapabilities } from '#types';
+
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const settingsAtom = createKvsStore({
+      key: meta.profile.key,
+      schema: Settings.Settings,
+      defaultValue: () => ({}),
+    });
+
+    return [
+      Capability.contributes(TldrawCapabilities.Settings, settingsAtom),
+      Capability.contributes(AppCapabilities.Settings, {
+        prefix: meta.profile.key,
+        schema: Settings.Settings,
+        atom: settingsAtom,
+      }),
+    ];
+  }),
+);

package/src/capabilities/sketch-variant.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+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 { TldrawArticle, TldrawCard } from '#containers';
+import { tldrawBuilder } from '#model';
+
+import { Tldraw } from '../types';
+
+const variant: SketchVariant = {
+  id: Type.getTypename(Tldraw.Canvas),
+  label: 'tldraw',
+  icon: 'ph--compass-tool--regular',
+  canvasType: Tldraw.Canvas,
+  createCanvas: () => Effect.sync(() => Tldraw.makeCanvas()),
+  builder: tldrawBuilder,
+  card: TldrawCard,
+  article: TldrawArticle,
+};
+
+export default Capability.makeModule(() =>
+  Effect.succeed(Capability.contributes(IllustratorCapabilities.VariantProvider, variant)),
+);

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

@@ -0,0 +1,101 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { createObject } from '@dxos/echo-client';
+import { Button, Panel, Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { TldrawBuilder } from '#model';
+import { data } from '#testing';
+import { Tldraw } from '#types';
+
+import { migrateCanvas } from '../../migrations';
+import { CanvasComponent } from './Canvas';
+
+const DefaultStory = () => {
+  const [canvas, setCanvas] = useState(createObject(Tldraw.makeCanvas({ content: data.v2 })));
+
+  const handleClear = () => {
+    setCanvas(createObject(Tldraw.makeCanvas()));
+  };
+
+  const handleCreate = () => {
+    const canvas = createObject(Tldraw.makeCanvas({ 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 })));
+  };
+
+  return (
+    <Panel.Root>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          <Button variant='primary' onClick={handleClear}>
+            Clear
+          </Button>
+          <Button variant='ghost' onClick={handleCreate}>
+            Create
+          </Button>
+          <Button variant='ghost' onClick={handleMigrate}>
+            Load V1 Sample
+          </Button>
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <CanvasComponent classNames='dx-attention-surface' canvas={canvas} assetsBaseUrl={null} autoCenter />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-tldraw/components/Canvas',
+  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 = {};
+
+const BuilderStory = () => {
+  const [canvas] = useState(() =>
+    createObject(
+      Tldraw.makeCanvas({
+        content: new TldrawBuilder()
+          .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' })
+          .text({ x: 0, y: 480, text: 'Built with TldrawBuilder', font: 'mono' })
+          .arrow({ from: 'a', to: 'b', text: 'syncs' })
+          .arrow({ from: 'b', to: 'c' })
+          .build(),
+      }),
+    ),
+  );
+
+  return (
+    <Panel.Root>
+      <Panel.Content asChild>
+        <CanvasComponent classNames='dx-attention-surface' canvas={canvas} assetsBaseUrl={null} autoCenter />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+export const Builder: Story = {
+  render: BuilderStory,
+};

package/src/components/Canvas/Canvas.tsx

@@ -0,0 +1,284 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@tldraw/tldraw/tldraw.css';
+import './theme.css';
+
+import { getAssetUrls } from '@tldraw/assets/selfHosted';
+import { type TLEventInfo, type TLGridProps, type TLInstance } from '@tldraw/editor';
+import { DefaultToolbar, type Editor, Tldraw as TldrawEditor, type TLUiAssetUrlOverrides } from '@tldraw/tldraw';
+import defaultsDeep from 'lodash.defaultsdeep';
+import React, { type FC, useEffect, useMemo, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+import { Obj } from '@dxos/echo';
+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 { handleSnap } from '../actions';
+import { CustomMenu, CustomStylePanel, DefaultToolbarContent, DottedGrid, MeshGrid } from '../custom';
+
+const threadToolId = 'thread';
+
+const gridComponents: Record<Settings.GridType, FC<TLGridProps>> = {
+  mesh: MeshGrid,
+  dotted: DottedGrid,
+};
+
+export type CanvasProps = {
+  canvas: Tldraw.Canvas;
+  readonly?: boolean;
+  autoCenter?: boolean;
+  hideUi?: boolean;
+  assetsBaseUrl?: string | null;
+  settings?: Settings.Settings;
+  onThreadCreate?: () => void;
+};
+
+export const CanvasComponent = composable<HTMLDivElement, CanvasProps>(
+  (
+    {
+      canvas,
+      readonly = false,
+      autoCenter = true,
+      hideUi = false,
+      assetsBaseUrl = '/assets/plugin-tldraw',
+      settings,
+      onThreadCreate,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const adapter = useStoreAdapter(canvas);
+    const [editor, setEditor] = useState<Editor>();
+
+    // Focus.
+    useEffect(() => {
+      hideUi ? editor?.blur() : editor?.focus();
+    }, [hideUi, editor]);
+
+    // Editor State.
+    useEffect(() => {
+      if (!settings) {
+        return;
+      }
+
+      const cleanup = editor?.store.listen(
+        ({ changes: { updated } }) => {
+          for (const [id, [from, to]] of Object.entries(updated)) {
+            if (id === 'instance:instance') {
+              const fromInstance = from as TLInstance;
+              const toInstance = to as TLInstance;
+              if (fromInstance.isGridMode !== toInstance.isGridMode) {
+                settings.showGrid = toInstance.isGridMode;
+              }
+            }
+          }
+        },
+        { source: 'user', scope: 'all' },
+      );
+
+      // TODO(burdon): Combine.
+      return () => cleanup?.();
+    }, [settings, editor]);
+
+    // Editor events.
+    useEffect(() => {
+      // https://tldraw.dev/examples/editor-api/canvas-events
+      const handleEvent = ({ type, name }: TLEventInfo) => {
+        if (type === 'pointer' && name === 'pointer_up') {
+          // Defer: the 'event' stream fires before the active tool commits its shape to the
+          // store, so an immediate save flushes one gesture behind (losing the final stroke).
+          setTimeout(() => adapter.save());
+        }
+      };
+
+      editor?.on('event', handleEvent);
+      return () => {
+        editor?.off('event', handleEvent);
+      };
+    }, [adapter, editor]);
+
+    // UI state.
+    useEffect(() => {
+      if (editor) {
+        editor.user.updateUserPreferences({
+          // TODO(burdon): Adjust snap threshold.
+          isSnapMode: true,
+        });
+        editor.updateInstanceState({
+          isGridMode: settings?.showGrid !== false && !hideUi,
+          isReadonly: readonly || hideUi,
+        });
+        if (readonly || hideUi) {
+          editor.setCurrentTool('hand');
+        }
+      }
+    }, [editor, settings, hideUi, readonly]);
+
+    // Zoom to fit.
+    const { ref: resizeRef, width = 0, height } = useResizeDetector();
+    const containerRef = useMergeRefs([forwardedRef, resizeRef]);
+    const [ready, setReady] = useState(!autoCenter);
+    useEffect(() => {
+      if (!editor || !adapter || width === undefined || height === undefined) {
+        return;
+      }
+
+      const isLocked = readonly || hideUi;
+
+      // Unlock to allow programmatic camera positioning.
+      editor.setCameraOptions({ isLocked: false });
+
+      // Set frame so that top left of grid is inset with our border (if no content).
+      editor.setCamera({ x: -1, y: -1, z: 1 }, { animation: { duration: 0 } });
+      editor.resetZoom();
+
+      setReady(true);
+      if (!autoCenter) {
+        editor.setCameraOptions({ isLocked: isLocked });
+        return;
+      }
+
+      const zoom = () => {
+        zoomToFit(editor, width, height, false);
+      };
+
+      zoom();
+      editor.setCameraOptions({ isLocked: isLocked });
+
+      let timer: ReturnType<typeof setTimeout> | undefined;
+      const onUpdate = () => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          editor.setCameraOptions({ isLocked: false });
+          zoom();
+          editor.setCameraOptions({ isLocked: isLocked });
+        }, 200);
+      };
+      const subscription = isLocked ? adapter.store?.listen(() => onUpdate(), { scope: 'document' }) : undefined;
+      return () => {
+        clearTimeout(timer);
+        subscription?.();
+      };
+    }, [editor, adapter, width, height, autoCenter, readonly, hideUi]);
+
+    // NOTE: Currently copying assets to composer-app public/assets/tldraw.
+    // https://tldraw.dev/installation#Self-hosting-static-assets
+    const assetUrls: TLUiAssetUrlOverrides = useMemo(() => {
+      if (!assetsBaseUrl) {
+        return undefined;
+      }
+
+      return defaultsDeep(
+        {
+          // Change default draw font.
+          // TODO(burdon): Change icon to match font.
+          fonts: { draw: `${assetsBaseUrl}/fonts/Montserrat-Regular.woff2` },
+          icons: {
+            'thread-icon': `${assetsBaseUrl}/icons/icon/chat-teardrop-text.svg`,
+          },
+        },
+        getAssetUrls({ baseUrl: assetsBaseUrl }),
+      );
+    }, [assetsBaseUrl]);
+
+    const overrides = useMemo(
+      () => ({
+        actions: (_editor: Editor, actions: any, _helpers: any) => ({
+          ...actions,
+          snap: {
+            id: 'grid-snap',
+            label: 'Snap',
+            kbd: 's',
+            icon: 'horizontal-align-middle',
+            onSelect: () => {
+              void handleSnap(canvas);
+            },
+          },
+        }),
+        tools: (_editor: Editor, tools: any) => {
+          const newTools = { ...tools };
+          newTools[threadToolId] = {
+            id: threadToolId,
+            icon: 'thread-icon',
+            label: 'Comment', // TODO(Zan): Use translation lookup here.
+            onSelect: () => onThreadCreate?.(),
+          };
+          return newTools;
+        },
+      }),
+      [canvas, onThreadCreate],
+    );
+
+    const components = useMemo(
+      () => ({
+        DebugPanel: null,
+        Grid: gridComponents[settings?.gridType ?? 'mesh'],
+        HelpMenu: null,
+        MenuPanel: CustomMenu,
+        NavigationPanel: null,
+        StylePanel: CustomStylePanel,
+        TopPanel: null,
+        ZoomMenu: null,
+        Toolbar: (props: any) => (
+          <DefaultToolbar {...props}>
+            <DefaultToolbarContent toolsToSplice={[{ toolId: 'thread', position: 8 }]} />
+          </DefaultToolbar>
+        ),
+      }),
+      [settings],
+    );
+
+    if (!adapter.store) {
+      return null;
+    }
+
+    return (
+      <div
+        {...composableProps(props, { classNames: 'dx-expander' })}
+        style={{ visibility: ready ? 'visible' : 'hidden' }}
+        ref={containerRef}
+      >
+        <TldrawEditor
+          // Rebind when the adapter recreates its store (e.g. an effect-churn reopen) — a stale
+          // binding draws into an orphaned store whose change listeners are gone, so saves no-op.
+          key={`${Obj.getURI(canvas)}:${adapter.store.id}`}
+          store={adapter.store}
+          hideUi={hideUi}
+          inferDarkMode
+          className='outline-hidden!'
+          maxAssetSize={1024 * 1024}
+          assetUrls={assetUrls}
+          overrides={overrides}
+          components={components}
+          onMount={setEditor}
+        />
+      </div>
+    );
+  },
+);
+
+/**
+ * Fit content within the viewport and center it, zooming out for oversized content but never
+ * magnifying past 100% (zoom is capped at 1).
+ */
+const zoomToFit = (editor: Editor, width: number, height: number, animate = true) => {
+  const commonBounds = editor.getCurrentPageBounds();
+  if (width && height && commonBounds?.width && commonBounds?.height) {
+    const padding = 60;
+    // Zoom out to fit oversized content; cap at 1 so small content is never zoomed in.
+    const zoom = Math.min(1, (width - padding) / commonBounds.width, (height - padding) / commonBounds.height);
+    const center = {
+      x: (width - commonBounds.width * zoom) / 2 / zoom - commonBounds.minX,
+      y: (height - commonBounds.height * zoom) / 2 / zoom - commonBounds.minY,
+      z: zoom,
+    };
+
+    editor.setCamera(center, animate ? { animation: { duration: 250 } } : undefined);
+  }
+};

package/src/components/Canvas/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { CanvasComponent } from './Canvas';
+
+export * from './Canvas';
+
+export default CanvasComponent;