@dxos/react-ui-canvas-compute 0.13.0 → 0.14.0

package/src/shapes/scope-def.ts

@@ -5,9 +5,8 @@
 import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
 
-import { type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
-
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs.ts';
+import { createPorts, defineComputeNode } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape, withZ } from './defs.ts';
 import { ScopeComponent } from './Scope.tsx';
 
 // Kept out of `Scope.tsx`: react-refresh only fast-refreshes a module whose
@@ -31,11 +30,13 @@ export const createScope = (props: CreateScopeProps) =>
     ...props,
   });
 
-export const scopeShape: ShapeDef<ScopeShape> = {
+export const scopeNodeDef = defineComputeNode<ScopeShape>({
   type: 'scope',
   name: 'Scope',
   icon: 'ph--waveform--regular',
+  group: 'Outputs',
+  schema: withZ(ScopeShape),
   component: ScopeComponent,
-  createShape: createScope,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('input')]: { x: -1, y: 0 } }),
-};
+  create: createScope,
+  ports: (shape) => createPorts(shape.size, { [createAnchorId('input')]: { x: -1, y: 0 } }),
+});

package/src/shapes/surface-def.ts

@@ -5,10 +5,8 @@
 import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
 
-import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
-import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
-
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs.ts';
+import { createPorts, defineComputeNode } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape, withZ } from './defs.ts';
 import { SurfaceComponent } from './Surface.tsx';
 
 // Kept out of `Surface.tsx`: react-refresh only fast-refreshes a module whose
@@ -31,12 +29,14 @@ export const createSurface = (props: CreateSurfaceProps) =>
     ...props,
   });
 
-export const surfaceShape: ShapeDef<SurfaceShape> = {
+export const surfaceNodeDef = defineComputeNode<SurfaceShape>({
   type: 'surface',
   name: 'Surface',
   icon: 'ph--frame-corners--regular',
+  group: 'Outputs',
+  schema: withZ(SurfaceShape),
   component: SurfaceComponent,
-  createShape: createSurface,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('input')]: { x: -1, y: 0 } }),
+  create: createSurface,
+  ports: (shape) => createPorts(shape.size, { [createAnchorId('input')]: { x: -1, y: 0 } }),
   resizable: true,
-};
+});

package/src/shapes/switch-def.ts

@@ -5,9 +5,8 @@
 import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
 
-import { type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
-
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs.ts';
+import { createPorts, defineComputeNode } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape, withZ } from './defs.ts';
 import { SwitchComponent } from './Switch.tsx';
 
 // Kept out of `Switch.tsx`: react-refresh only fast-refreshes a module whose
@@ -26,11 +25,13 @@ export type CreateSwitchProps = CreateShapeProps<SwitchShape>;
 export const createSwitch = (props: CreateSwitchProps) =>
   createShape<SwitchShape>({ type: 'switch', size: { width: 64, height: 64 }, ...props });
 
-export const switchShape: ShapeDef<SwitchShape> = {
+export const switchNodeDef = defineComputeNode<SwitchShape>({
   type: 'switch',
   name: 'Switch',
   icon: 'ph--toggle-left--regular',
+  group: 'Inputs',
+  schema: withZ(SwitchShape),
   component: SwitchComponent,
-  createShape: createSwitch,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
-};
+  create: createSwitch,
+  ports: (shape) => createPorts(shape.size, { [createAnchorId('output')]: { x: 1, y: 0 } }),
+});

package/src/shapes/table-def.ts

@@ -7,11 +7,10 @@ import * as Struct from 'effect/Struct';
 
 import { createInputSchema, createOutputSchema } from '@dxos/conductor';
 import { Type } from '@dxos/echo';
-import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
 import { Message } from '@dxos/types';
 
-import { createFunctionAnchors } from './common/index.ts';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs.ts';
+import { createFunctionPorts, defineComputeNode } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createShape, withZ } from './defs.ts';
 import { TableComponent } from './Table.tsx';
 
 // Kept out of `Table.tsx`: react-refresh only fast-refreshes a module whose
@@ -34,12 +33,13 @@ export type CreateTableProps = CreateShapeProps<TableShape>;
 export const createTable = (props: CreateTableProps) =>
   createShape<TableShape>({ type: 'table', size: { width: 320, height: 512 }, ...props });
 
-export const tableShape: ShapeDef<TableShape> = {
+export const tableNodeDef = defineComputeNode<TableShape>({
   type: 'table',
   name: 'Table',
   icon: 'ph--table--regular',
+  schema: withZ(TableShape),
   component: TableComponent,
-  createShape: createTable,
-  getAnchors: (shape) => createFunctionAnchors(shape, InputSchema, OutputSchema),
+  create: createTable,
+  ports: (shape) => createFunctionPorts(shape.size, InputSchema, OutputSchema),
   resizable: true,
-};
+});

package/src/shapes/template-def.ts

@@ -6,10 +6,9 @@ import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
 
 import { ComputeValueType, TemplateOutput, VoidInput } from '@dxos/conductor';
-import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
 
-import { createFunctionAnchors } from './common/index.ts';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs.ts';
+import { createFunctionPorts, defineComputeNode } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createShape, withZ } from './defs.ts';
 import { TemplateComponent } from './Template.tsx';
 
 // Kept out of `Template.tsx`: react-refresh only fast-refreshes a module whose
@@ -37,12 +36,14 @@ export type CreateTemplateProps = CreateShapeProps<TemplateShape> & { text?: str
 export const createTemplate = (props: CreateTemplateProps) =>
   createShape<TemplateShape>({ type: 'template', size: { width: 256, height: 384 }, ...props });
 
-export const templateShape: ShapeDef<TemplateShape> = {
+export const templateNodeDef = defineComputeNode<TemplateShape>({
   type: 'template',
   name: 'Template',
   icon: 'ph--article--regular',
+  group: 'Inputs',
+  schema: withZ(TemplateShape),
   component: TemplateComponent,
-  createShape: createTemplate,
-  getAnchors: (shape) => createFunctionAnchors(shape, VoidInput, TemplateOutput),
+  create: createTemplate,
+  ports: (shape) => createFunctionPorts(shape.size, VoidInput, TemplateOutput),
   resizable: true,
-};
+});

package/src/shapes/text-def.ts

@@ -5,10 +5,8 @@
 import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
 
-import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
-import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
-
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs.ts';
+import { createPorts, defineComputeNode } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape, withZ } from './defs.ts';
 import { TextComponent } from './Text.tsx';
 
 // Kept out of `Text.tsx`: react-refresh only fast-refreshes a module whose
@@ -27,12 +25,14 @@ export type CreateTextProps = CreateShapeProps<TextShape>;
 export const createText = (props: CreateTextProps) =>
   createShape<TextShape>({ type: 'text', size: { width: 384, height: 384 }, ...props });
 
-export const textShape: ShapeDef<TextShape> = {
+export const textNodeDef = defineComputeNode<TextShape>({
   type: 'text',
   name: 'Text',
   icon: 'ph--article--regular',
+  group: 'Outputs',
+  schema: withZ(TextShape),
   component: TextComponent,
-  createShape: createText,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('input')]: { x: -1, y: 0 } }),
+  create: createText,
+  ports: (shape) => createPorts(shape.size, { [createAnchorId('input')]: { x: -1, y: 0 } }),
   resizable: true,
-};
+});

package/src/shapes/text-to-image-def.ts

@@ -5,10 +5,8 @@
 import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
 
-import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
-import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
-
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs.ts';
+import { createPorts, defineComputeNode } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape, withZ } from './defs.ts';
 import { TextToImageComponent } from './TextToImage.tsx';
 
 // Kept out of `TextToImage.tsx`: react-refresh only fast-refreshes a module whose
@@ -27,11 +25,13 @@ export type CreateTextToImageProps = CreateShapeProps<TextToImageShape>;
 export const createTextToImage = (props: CreateTextToImageProps) =>
   createShape<TextToImageShape>({ type: 'text-to-image', size: { width: 128, height: 64 }, ...props });
 
-export const textToImageShape: ShapeDef<TextToImageShape> = {
+export const textToImageNodeDef = defineComputeNode<TextToImageShape>({
   type: 'text-to-image',
   name: 'Image',
   icon: 'ph--image--regular',
+  group: 'Transform',
+  schema: withZ(TextToImageShape),
   component: TextToImageComponent,
-  createShape: createTextToImage,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
-};
+  create: createTextToImage,
+  ports: (shape) => createPorts(shape.size, { [createAnchorId('output')]: { x: 1, y: 0 } }),
+});

package/src/shapes/thread-def.ts

@@ -7,11 +7,10 @@ import * as Struct from 'effect/Struct';
 
 import { createInputSchema, createOutputSchema } from '@dxos/conductor';
 import { Type } from '@dxos/echo';
-import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
 import { Message } from '@dxos/types';
 
-import { createFunctionAnchors } from './common/index.ts';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs.ts';
+import { createFunctionPorts, defineComputeNode } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createShape, withZ } from './defs.ts';
 import { ThreadComponent } from './Thread.tsx';
 
 // Kept out of `Thread.tsx`: react-refresh only fast-refreshes a module whose
@@ -34,12 +33,14 @@ export type CreateThreadProps = CreateShapeProps<ThreadShape>;
 export const createThread = (props: CreateThreadProps) =>
   createShape<ThreadShape>({ type: 'thread', size: { width: 384, height: 384 }, ...props });
 
-export const threadShape: ShapeDef<ThreadShape> = {
+export const threadNodeDef = defineComputeNode<ThreadShape>({
   type: 'thread',
   name: 'Thread',
   icon: 'ph--chats-circle--regular',
+  group: 'Outputs',
+  schema: withZ(ThreadShape),
   component: ThreadComponent,
-  createShape: createThread,
-  getAnchors: (shape) => createFunctionAnchors(shape, InputSchema, OutputSchema),
+  create: createThread,
+  ports: (shape) => createFunctionPorts(shape.size, InputSchema, OutputSchema),
   resizable: true,
-};
+});

package/src/shapes/trigger-def.ts

@@ -10,10 +10,9 @@ import * as TriggerEvent from '@dxos/compute/TriggerEvent';
 import { VoidInput } from '@dxos/conductor';
 import { Ref } from '@dxos/echo';
 import { type SpaceId } from '@dxos/keys';
-import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
 
-import { createFunctionAnchors, getHeight } from './common/index.ts';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs.ts';
+import { createFunctionPorts, defineComputeNode, getHeight } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createShape, withZ } from './defs.ts';
 import { createTriggerSpec, getOutputSchema } from './trigger-spec.ts';
 import { TriggerComponent } from './Trigger.tsx';
 
@@ -54,12 +53,16 @@ export const createTrigger = (props: CreateTriggerProps): TriggerShape => {
   });
 };
 
-export const triggerShape: ShapeDef<TriggerShape> = {
+export const triggerNodeDef = defineComputeNode<TriggerShape>({
   type: 'trigger',
   name: 'Trigger',
   icon: 'ph--lightning--regular',
+  group: 'Inputs',
+  schema: withZ(TriggerShapeSchema),
   component: TriggerComponent,
-  createShape: createTrigger,
-  getAnchors: (shape) =>
-    createFunctionAnchors(shape, VoidInput, getOutputSchema(shape.functionTrigger?.target?.spec?.kind ?? 'email')),
-};
+  create: createTrigger,
+  // The factory makes an ECHO object, so the default size is stated rather than sampled.
+  defaultSize: { width: 192, height: getHeight(TriggerEvent.EmailEvent) },
+  ports: (shape) =>
+    createFunctionPorts(shape.size, VoidInput, getOutputSchema(shape.functionTrigger?.target?.spec?.kind ?? 'email')),
+});

package/src/testing/circuits.ts

@@ -4,8 +4,7 @@
 
 import { createSystemPrompt } from '@dxos/assistant';
 import { EID, EntityId, SpaceId } from '@dxos/keys';
-import { type Dimension, type Point } from '@dxos/react-ui-canvas';
-import { CanvasGraphModel, createNote, pointMultiply, pointsToRect, rectToPoints } from '@dxos/react-ui-canvas-editor';
+import { type Point, type Size } from '@dxos/react-ui-canvas/scene';
 
 import {
   type ComputeShape,
@@ -33,6 +32,7 @@ import {
   createText,
   createTextToImage,
 } from '../shapes/index.ts';
+import { CanvasGraphModel, type NoteShape } from '../types/index.ts';
 
 //
 // Circuits
@@ -304,12 +304,26 @@ export const createAudioCircuit = () => {
 // Utils
 //
 
-const position = (rect: Point & Partial<Dimension>, snap = 32): { center: Point; size?: Dimension } => {
-  const [center, size] = rectToPoints({ width: 0, height: 0, ...rect });
-  const { x, y, width, height } = pointsToRect([pointMultiply(center, snap), pointMultiply(size, snap)]);
+/** A note, sized as the editor's note tool made one. */
+const createNote = ({
+  id,
+  ...rest
+}: Omit<NoteShape, 'type' | 'size'> & Partial<Pick<NoteShape, 'size'>>): NoteShape => ({
+  id,
+  type: 'note',
+  size: { width: 256, height: 128 },
+  ...rest,
+});
+
+/** A rectangle in grid cells scaled to pixels; the size is kept only when both extents are non-zero. */
+const position = (
+  { x, y, width = 0, height = 0 }: Point & Partial<Size>,
+  snap = 32,
+): { center: Point; size?: Size } => {
+  const center = { x: Math.min(x, x + width) * snap, y: Math.min(y, y + height) * snap };
   if (width && height) {
-    return { center: { x, y }, size: width && height ? { width, height } : undefined };
+    return { center, size: { width: Math.abs(width) * snap, height: Math.abs(height) * snap } };
   } else {
-    return { center: { x, y } };
+    return { center };
   }
 };

package/src/types/canvas-board.test.ts

@@ -0,0 +1,84 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Registry from 'effect/reactivity/AtomRegistry';
+import { describe, test } from 'vitest';
+
+import { TestDatabaseLayer } from '@dxos/compute-runtime/testing';
+import { Database, Filter, Obj, Type } from '@dxos/echo';
+import * as EffectEx from '@dxos/effect/EffectEx';
+
+import { createEchoStore } from '../scene/index.ts';
+import { CanvasBoard } from './index.ts';
+
+/**
+ * A board exactly as the legacy canvas editor persisted it (`Obj.toJSON` of its `CanvasBoard`): a compute
+ * shape and a note, joined by one connection with both property names. The literal is the compatibility contract,
+ * so it is never regenerated from the schema under test.
+ */
+const persistedBoard = {
+  'id': '01M4ESMZRC98J310RDFN2TTAFT',
+  '@type': 'dxn:org.dxos.type.canvasBoard:0.1.0',
+  '@meta': { keys: [] },
+  'name': 'Circuit',
+  'layout': {
+    nodes: [
+      {
+        id: 'switch-1',
+        type: 'switch',
+        node: 'compute-1',
+        center: { x: -128, y: 0 },
+        size: { width: 64, height: 64 },
+      },
+      {
+        id: 'note-1',
+        type: 'note',
+        text: 'Hello',
+        center: { x: 0, y: -128 },
+        size: { width: 256, height: 128 },
+      },
+    ],
+    edges: [{ id: 'edge-1', source: 'switch-1', target: 'note-1', output: 'value', input: 'input' }],
+  },
+};
+
+const { id, '@type': _type, '@meta': _meta, ...fields } = persistedBoard;
+
+/** The persisted board stored in a database and read back through a query for the compute type. */
+const loadBoard = Effect.gen(function* () {
+  yield* Database.add(Obj.make(CanvasBoard.CanvasBoard, { id, ...fields }));
+  yield* Database.flush();
+  return yield* Database.query(Filter.type(CanvasBoard.CanvasBoard)).run;
+}).pipe(Effect.provide(TestDatabaseLayer({ types: [CanvasBoard.CanvasBoard] })), Effect.scoped);
+
+describe('CanvasBoard', () => {
+  test('keeps the typename and version boards were saved under', ({ expect }) => {
+    expect(Type.getTypename(CanvasBoard.CanvasBoard)).toBe('org.dxos.type.canvasBoard');
+    expect(Type.getVersion(CanvasBoard.CanvasBoard)).toBe('0.1.0');
+  });
+
+  test('a board as the editor saved it round-trips through a database unchanged', async ({ expect }) => {
+    const boards = await EffectEx.runPromise(loadBoard);
+    expect(boards).toHaveLength(1);
+    const [board] = boards;
+    expect(Obj.instanceOf(CanvasBoard.CanvasBoard, board)).toBe(true);
+    // `@uri` names the test space, so it is the one key the editor's JSON cannot carry.
+    const { '@uri': _uri, ...json } = Obj.toJSON(board);
+    expect(json).toEqual(persistedBoard);
+  });
+
+  test('the echo store reads the persisted layout as a scene', async ({ expect }) => {
+    const [board] = await EffectEx.runPromise(loadBoard);
+    const store = createEchoStore(board);
+    const scene = Registry.make().get(store.scene(board.id));
+    expect(scene?.name).toBe('Circuit');
+    expect(Object.keys(scene?.nodes ?? {})).toEqual(['switch-1', 'note-1']);
+    expect(scene?.nodes['note-1']).toMatchObject({ type: 'note', text: 'Hello', center: { x: 0, y: -128 } });
+    expect(scene?.links['edge-1']).toMatchObject({
+      source: { node: 'switch-1', port: 'output.value' },
+      target: { node: 'note-1', port: 'input.input' },
+    });
+  });
+});

package/src/types/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './model.ts';
+export * as CanvasBoard from './schema.ts';
+export * from './shapes.ts';

package/src/types/model.ts

@@ -0,0 +1,63 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { DEFAULT_INPUT, DEFAULT_OUTPUT } from '@dxos/conductor';
+import { Obj } from '@dxos/echo';
+import { isProxy } from '@dxos/echo/internal';
+import * as GraphModel from '@dxos/graph/GraphModel';
+import { type MakeOptional } from '@dxos/util';
+
+import { type Connection, type Shape } from './schema.ts';
+
+export class CanvasGraphModel<S extends Shape = Shape> extends GraphModel.AbstractGraphModel<
+  S,
+  Connection,
+  CanvasGraphModel<S>
+> {
+  static create<S extends Shape>(
+    graph?: Partial<GraphModel.AnyData>,
+    change?: GraphModel.GraphChangeFunction,
+  ): CanvasGraphModel<S> {
+    if (isProxy(graph)) {
+      return new CanvasGraphModel<S>({ graph: graph as GraphModel.Data<S, Connection>, change });
+    }
+
+    return new CanvasGraphModel<S>({
+      graph: {
+        nodes: (graph?.nodes ?? []) as S[],
+        edges: (graph?.edges ?? []) as Connection[],
+      },
+    });
+  }
+
+  override copy(graph?: Partial<GraphModel.Data<S, Connection>>): CanvasGraphModel<S> {
+    return CanvasGraphModel.create<S>(graph);
+  }
+
+  createNode({ id, ...rest }: MakeOptional<S, 'id'>): S {
+    const node: S = { id: id ?? Obj.ID.random(), ...rest } as S;
+    this.addNode(node);
+    return node;
+  }
+
+  createEdge({
+    id,
+    source,
+    target,
+    output = DEFAULT_OUTPUT,
+    input = DEFAULT_INPUT,
+    ...rest
+  }: MakeOptional<Connection, 'id'>): Connection {
+    const edge: Connection = {
+      id: id ?? Obj.ID.random(),
+      source,
+      target,
+      output,
+      input,
+      ...rest,
+    } as Connection;
+    this.addEdge(edge);
+    return edge;
+  }
+}

package/src/types/schema.ts

@@ -0,0 +1,73 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import * as Struct from 'effect/Struct';
+
+import { ComputeGraph, ComputeGraphModel } from '@dxos/conductor';
+import { Annotation, DXN, Obj, Ref, Type } from '@dxos/echo';
+import * as GraphEdge from '@dxos/graph/GraphEdge';
+import * as GraphModel from '@dxos/graph/GraphModel';
+import * as GraphNode from '@dxos/graph/GraphNode';
+
+// TODO(burdon): Consider interop with TLDraw and GeoJSON standards?
+
+/**
+ * Base type for all shapes.
+ */
+export const Shape = GraphNode.GraphNode.mapFields((fields) => Struct.omit(fields, ['type'])).pipe(
+  // TODO(burdon): Breaks graph contract?
+  Schema.fieldsAssign({
+    type: Schema.String,
+    text: Schema.optional(Schema.String),
+    guide: Schema.optional(Schema.Boolean),
+    classNames: Schema.optional(Schema.String),
+  }),
+);
+
+export type Shape = Schema.Schema.Type<typeof Shape>;
+
+/**
+ * Connections between shapes.
+ */
+export const Connection = GraphEdge.GraphEdge.mapFields(
+  Struct.assign({
+    input: Schema.optional(Schema.String),
+    output: Schema.optional(Schema.String),
+  }),
+);
+
+export type Connection = Schema.Schema.Type<typeof Connection>;
+
+// TODO(burdon): Rename scene?
+export const Layout = Schema.Struct({
+  shapes: Schema.Array(Shape),
+});
+
+export type Layout = Schema.Schema.Type<typeof Layout>;
+
+// TODO(wittjosiah): Rename WorkflowType?
+export class CanvasBoard extends Type.makeObject<CanvasBoard>(DXN.make('org.dxos.type.canvasBoard', '0.1.0'))(
+  Schema.Struct({
+    name: Schema.optional(Schema.String),
+
+    computeGraph: Schema.optional(Ref.Ref(ComputeGraph)),
+
+    /**
+     * Graph of shapes positioned on the canvas.
+     */
+    layout: GraphModel.Data,
+  }).pipe(Annotation.IconAnnotation.set({ icon: 'ph--infinity--regular', hue: 'sky' }), Annotation.UserType.set()),
+) {}
+
+/**
+ * Creates a CanvasBoard with default empty layout and compute graph when not provided.
+ */
+export const make = (props: Partial<Obj.MakeProps<typeof CanvasBoard>> = {}) => {
+  return Obj.make(CanvasBoard, {
+    ...props,
+    layout: props.layout ?? { nodes: [], edges: [] },
+    computeGraph: props.computeGraph ?? Ref.make(ComputeGraphModel.create().root),
+  });
+};

package/src/types/shapes.ts

@@ -0,0 +1,73 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import * as Struct from 'effect/Struct';
+
+import { Shape } from './schema.ts';
+
+// The engine's `Point` / `Size` structs, declared here because its `/scene` entry also exports React, which this
+// React-free entry must not import (plugins load it in workers).
+const Point = Schema.Struct({ x: Schema.Number, y: Schema.Number });
+const Size = Schema.Struct({ width: Schema.Number, height: Schema.Number });
+
+//
+// Path
+//
+
+export const PathShape = Shape.mapFields(
+  Struct.assign({
+    type: Schema.Literal('path'),
+    path: Schema.String,
+    start: Schema.optional(Schema.String),
+    end: Schema.optional(Schema.String),
+  }),
+);
+
+export type PathShape = Schema.Schema.Type<typeof PathShape>;
+export const isPath = Schema.is(PathShape);
+
+//
+// Polygon
+//
+
+/**
+ * Closed shape.
+ * Common handling via Frame.
+ */
+// `Schema.mutable` is arrays-only in v4, so a struct's fields are made mutable key by key.
+export const Polygon = Shape.mapFields(
+  Struct.assign({
+    center: Point,
+    size: Size.mapFields(Struct.map(Schema.mutableKey)),
+  }),
+).mapFields(Struct.map(Schema.mutableKey));
+
+export type Polygon = Schema.Schema.Type<typeof Polygon>;
+export const isPolygon = Schema.is(Polygon);
+
+export const EllipseShape = Polygon.mapFields(
+  Struct.assign({
+    type: Schema.Literal('ellipse'),
+  }),
+);
+
+export type EllipseShape = Schema.Schema.Type<typeof EllipseShape>;
+
+export const NoteShape = Polygon.mapFields(
+  Struct.assign({
+    type: Schema.Literal('note'),
+  }),
+);
+
+export type NoteShape = Schema.Schema.Type<typeof NoteShape>;
+
+export const RectangleShape = Polygon.mapFields(
+  Struct.assign({
+    type: Schema.Literal('rectangle'),
+    rounded: Schema.optional(Schema.Number),
+  }),
+);
+
+export type RectangleShape = Schema.Schema.Type<typeof RectangleShape>;

package/dist/types/src/compute-layout.d.ts

@@ -1,9 +0,0 @@
-import { type Anchor, ShapeLayout, type ShapeRegistry } from '@dxos/react-ui-canvas-editor';
-import { type ComputeGraphController } from './graph/index.ts';
-import { type ComputeShape } from './shapes/index.ts';
-export declare class ComputeShapeLayout extends ShapeLayout {
-    private _controller;
-    constructor(_controller: ComputeGraphController, registry: ShapeRegistry);
-    getAnchors(shape: ComputeShape): Record<string, Anchor>;
-}
-//# sourceMappingURL=compute-layout.d.ts.map

package/dist/types/src/compute-layout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"compute-layout.d.ts","sourceRoot":"","sources":["../../../src/compute-layout.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,MAAM,EAAE,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE5F,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,KAAK,YAAY,EAAyB,MAAM,mBAAmB,CAAC;AAG7E,qBAAa,kBAAmB,SAAQ,WAAW;IAE/C,OAAO,CAAC,WAAW;IADrB,YACU,WAAW,EAAE,sBAAsB,EAC3C,QAAQ,EAAE,aAAa,EAGxB;IAGQ,UAAU,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAc/D;CACF"}