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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-canvas-compute",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "A compute graph extension for the canvas editor component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -17,6 +17,11 @@
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "import": "./dist/lib/index.mjs"
+    },
+    "./types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "import": "./dist/lib/types.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -25,29 +30,33 @@
     "src"
   ],
   "dependencies": {
-    "@dxos/ai": "0.13.0",
-    "@dxos/app-framework": "0.13.0",
-    "@dxos/app-toolkit": "0.13.0",
-    "@dxos/async": "0.13.0",
-    "@dxos/compute": "0.13.0",
-    "@dxos/conductor": "0.13.0",
-    "@dxos/context": "0.13.0",
-    "@dxos/debug": "0.13.0",
-    "@dxos/echo": "0.13.0",
-    "@dxos/echo-react": "0.13.0",
-    "@dxos/effect": "0.13.0",
-    "@dxos/graph": "0.13.0",
-    "@dxos/invariant": "0.13.0",
-    "@dxos/keys": "0.13.0",
-    "@dxos/log": "0.13.0",
-    "@dxos/react-client": "0.13.0",
-    "@dxos/react-ui-audio": "0.13.0",
-    "@dxos/react-ui-canvas": "0.13.0",
-    "@dxos/react-ui-canvas-editor": "0.13.0",
-    "@dxos/react-ui-experimental": "0.13.0",
-    "@dxos/react-ui-syntax-highlighter": "0.13.0",
-    "@dxos/types": "0.13.0",
-    "@dxos/util": "0.13.0"
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.13",
+    "@dxos/ai": "0.14.0",
+    "@dxos/app-framework": "0.14.0",
+    "@dxos/app-toolkit": "0.14.0",
+    "@dxos/async": "0.14.0",
+    "@dxos/compute": "0.14.0",
+    "@dxos/conductor": "0.14.0",
+    "@dxos/context": "0.14.0",
+    "@dxos/debug": "0.14.0",
+    "@dxos/echo": "0.14.0",
+    "@dxos/echo-react": "0.14.0",
+    "@dxos/effect": "0.14.0",
+    "@dxos/graph": "0.14.0",
+    "@dxos/invariant": "0.14.0",
+    "@dxos/keys": "0.14.0",
+    "@dxos/log": "0.14.0",
+    "@dxos/react-client": "0.14.0",
+    "@dxos/react-ui-audio": "0.14.0",
+    "@dxos/react-ui-canvas": "0.14.0",
+    "@dxos/react-ui-editor": "0.14.0",
+    "@dxos/react-ui-experimental": "0.14.0",
+    "@dxos/react-ui-syntax-highlighter": "0.14.0",
+    "@dxos/types": "0.14.0",
+    "@dxos/ui-editor": "0.14.0",
+    "@dxos/util": "0.14.0"
   },
   "devDependencies": {
     "@effect/atom-react": "4.0.0",
@@ -59,22 +68,21 @@
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
     "vite": "^8.2.2",
-    "@dxos/app-framework": "0.13.0",
-    "@dxos/assistant": "0.13.0",
-    "@dxos/assistant-toolkit": "0.13.0",
-    "@dxos/compute-runtime": "0.13.0",
-    "@dxos/react-ui": "0.13.0",
-    "@dxos/react-ui-attention": "0.13.0",
-    "@dxos/react-ui-form": "0.13.0",
-    "@dxos/test-utils": "0.13.0",
-    "@dxos/ui-theme": "0.13.0"
+    "@dxos/app-framework": "0.14.0",
+    "@dxos/assistant": "0.14.0",
+    "@dxos/assistant-toolkit": "0.14.0",
+    "@dxos/compute-runtime": "0.14.0",
+    "@dxos/react-ui": "0.14.0",
+    "@dxos/react-ui-attention": "0.14.0",
+    "@dxos/test-utils": "0.14.0",
+    "@dxos/ui-theme": "0.14.0"
   },
   "peerDependencies": {
     "effect": "4.0.0",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "^0.13.0",
-    "@dxos/ui-theme": "^0.13.0"
+    "@dxos/react-ui": "^0.14.0",
+    "@dxos/ui-theme": "^0.14.0"
   },
   "publishConfig": {
     "access": "public"

package/src/graph/controller.ts

@@ -35,11 +35,11 @@ import { Resource } from '@dxos/context';
 import type { Database, Registry } from '@dxos/echo';
 import * as EffectEx from '@dxos/effect/EffectEx';
 import { log } from '@dxos/log';
-import { type CanvasGraphModel } from '@dxos/react-ui-canvas-editor';
 import { type ContentBlock } from '@dxos/types';
 
 import { createComputeGraph } from '../hooks/index.ts';
 import { type ComputeShape } from '../shapes/index.ts';
+import { type CanvasGraphModel } from '../types/index.ts';
 import { resolveComputeNode } from './node-defs.ts';
 
 // TODO(burdon): API package for conductor.

package/src/hooks/compute-context.ts

@@ -5,16 +5,14 @@
 import { createContext, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
-import { type ShapeRegistry } from '@dxos/react-ui-canvas-editor';
+import { type NodeDef } from '@dxos/react-ui-canvas/scene';
 
 import type { ComputeGraphController } from '../graph/index.ts';
 
 export type ComputeContextType = {
   controller: ComputeGraphController;
-  /** Shape definitions for the frame chrome (icon, name, openable); the editor's own registry is the fallback. */
-  registry?: ShapeRegistry;
   debug?: boolean;
-  /** Grows or shrinks a shape by `delta` px (a function body opening); absent, the frame's element is resized. */
+  /** Grows or shrinks a shape by `delta` px (a function body opening); absent, the body opens in place. */
   resize?: (id: string, delta: number) => void;
 };
 
@@ -23,3 +21,8 @@ export const ComputeContext = createContext<ComputeContextType | null>(null);
 export const useComputeContext = () => {
   return useContext(ComputeContext) ?? raise(new Error('Missing ComputeContext'));
 };
+
+/** The definition of the node being rendered, from the registry the scene renders with, for the frame chrome. */
+export const ComputeNodeDefContext = createContext<NodeDef | undefined>(undefined);
+
+export const useComputeNodeDef = () => useContext(ComputeNodeDefContext);

package/src/hooks/index.ts

@@ -3,7 +3,6 @@
 //
 
 export * from './compute-context.ts';
-export * from './useComputeGraphController.ts';
 export * from './useComputeNodeState.ts';
 export * from './useGraphMonitor.ts';
 export * from './useControllerUpdates.ts';

package/src/hooks/useGraphMonitor.ts

@@ -6,10 +6,19 @@ import { useMemo } from 'react';
 
 import { type ComputeEdge, ComputeGraphModel, DEFAULT_INPUT, DEFAULT_OUTPUT } from '@dxos/conductor';
 import { invariant } from '@dxos/invariant';
-import { type CanvasBoard, type CanvasGraphModel, type GraphMonitor } from '@dxos/react-ui-canvas-editor';
 
 import { deleteTriggerObjects, syncCreate, syncDelete, syncLink } from '../graph/index.ts';
 import { type ComputeShape } from '../shapes/index.ts';
+import { type CanvasBoard, type CanvasGraphModel } from '../types/index.ts';
+
+/**
+ * Model callback.
+ */
+export interface GraphMonitor<S extends CanvasBoard.Shape = CanvasBoard.Shape> {
+  onCreate: (props: { graph: CanvasGraphModel<S>; node: S }) => void;
+  onLink: (props: { graph: CanvasGraphModel<S>; edge: CanvasBoard.Connection }) => void;
+  onDelete: (props: { graph: CanvasGraphModel<S>; subgraph: CanvasGraphModel<S> }) => void;
+}
 
 /**
  * Map canvas edge to compute edge.

package/src/index.ts

@@ -7,4 +7,4 @@ export * from './hooks/index.ts';
 export * from './registry.ts';
 export * from './scene/index.ts';
 export * from './shapes/index.ts';
-export * from './compute-layout.ts';
+export * from './types/index.ts';

package/src/playwright/scene.spec.ts

@@ -7,9 +7,9 @@ import { type Page, expect, test } from '@playwright/test';
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
 const PORT = 9007;
-const TRANSFORM_URL = storybookUrl('ui-react-ui-canvas-compute-scene--transform', PORT);
-const LOGIC_URL = storybookUrl('ui-react-ui-canvas-compute-scene--logic', PORT);
-const TEMPLATE_URL = storybookUrl('ui-react-ui-canvas-compute-scene--template', PORT);
+const TRANSFORM_URL = storybookUrl('ui-react-ui-canvas-compute-circuits--transform', PORT);
+const LOGIC_URL = storybookUrl('ui-react-ui-canvas-compute-circuits--logic', PORT);
+const TEMPLATE_URL = storybookUrl('ui-react-ui-canvas-compute-circuits--template', PORT);
 
 /** The die a `random` shape draws; its icon name changes as it spins, so match the family. */
 const DICE = 'svg:has(use[href*="dice"])';

package/src/registry.ts

@@ -2,99 +2,71 @@
 // Copyright 2025 DXOS.org
 //
 
-import type { ShapeDef } from '@dxos/react-ui-canvas-editor';
-import { noteShape } from '@dxos/react-ui-canvas-editor';
+import { type NodeDef, type NodeRegistry, defaultNodeRegistry } from '@dxos/react-ui-canvas/scene';
 
 import {
-  andShape,
-  appendShape,
-  audioShape,
-  beaconShape,
-  chatShape,
-  constantShape,
-  databaseShape,
-  feedShape,
-  functionShape,
-  gptRealtimeShape,
-  gptShape,
-  ifElseShape,
-  ifShape,
-  jsonShape,
-  jsonTransformShape,
-  notShape,
-  orShape,
-  randomShape,
-  reducerShape,
-  scopeShape,
-  surfaceShape,
-  switchShape,
-  templateShape,
-  textShape,
-  textToImageShape,
-  threadShape,
-  triggerShape,
+  andNodeDef,
+  appendNodeDef,
+  audioNodeDef,
+  beaconNodeDef,
+  chatNodeDef,
+  constantNodeDef,
+  databaseNodeDef,
+  feedNodeDef,
+  functionNodeDef,
+  gptNodeDef,
+  gptRealtimeNodeDef,
+  ifElseNodeDef,
+  ifNodeDef,
+  jsonNodeDef,
+  jsonTransformNodeDef,
+  notNodeDef,
+  orNodeDef,
+  randomNodeDef,
+  reducerNodeDef,
+  scopeNodeDef,
+  surfaceNodeDef,
+  switchNodeDef,
+  templateNodeDef,
+  textNodeDef,
+  textToImageNodeDef,
+  threadNodeDef,
+  triggerNodeDef,
 } from './shapes/index.ts';
 
-/**
- * Order used by toolbar.
- */
-export const computeShapes: { title: string; shapes: ShapeDef[] }[] = [
-  {
-    title: 'Inputs',
-    shapes: [
-      //
-      constantShape,
-      templateShape,
-      chatShape,
-      switchShape,
-      audioShape,
-      triggerShape,
-      randomShape,
-    ],
-  },
-  {
-    title: 'Transform',
-    shapes: [
-      //
-      gptShape,
-      gptRealtimeShape,
-      functionShape,
-      databaseShape,
-      textToImageShape,
-      appendShape,
-    ],
-  },
-  {
-    title: 'Operations',
-    shapes: [
-      //
-      ifShape,
-      ifElseShape,
-      andShape,
-      orShape,
-      notShape,
-      reducerShape,
-      jsonTransformShape,
-    ],
-  },
-  {
-    title: 'Outputs',
-    shapes: [
-      //
-      jsonShape,
-      feedShape,
-      threadShape,
-      textShape,
-      surfaceShape,
-      beaconShape,
-      scopeShape,
-    ],
-  },
-  {
-    title: 'Misc',
-    shapes: [
-      //
-      noteShape,
-    ],
-  },
+/** The compute types in palette order, each under its group (Inputs, Transform, Operations, Outputs). */
+export const computeNodeDefs: NodeDef[] = [
+  constantNodeDef,
+  templateNodeDef,
+  chatNodeDef,
+  switchNodeDef,
+  audioNodeDef,
+  triggerNodeDef,
+  randomNodeDef,
+  gptNodeDef,
+  gptRealtimeNodeDef,
+  functionNodeDef,
+  databaseNodeDef,
+  textToImageNodeDef,
+  appendNodeDef,
+  ifNodeDef,
+  ifElseNodeDef,
+  andNodeDef,
+  orNodeDef,
+  notNodeDef,
+  reducerNodeDef,
+  jsonTransformNodeDef,
+  jsonNodeDef,
+  feedNodeDef,
+  threadNodeDef,
+  textNodeDef,
+  surfaceNodeDef,
+  beaconNodeDef,
+  scopeNodeDef,
 ];
+
+/** The compute types plus the engine's note under a `Misc` group. */
+export const computeNodeRegistry: NodeRegistry = {
+  ...Object.fromEntries(computeNodeDefs.map((def) => [def.type, def])),
+  note: { ...defaultNodeRegistry.note, group: 'Misc' },
+};

package/src/scene/compute.stories.tsx

@@ -11,7 +11,6 @@ import { capabilities } from '@dxos/assistant-toolkit/testing';
 import { type GraphDiagnostic } from '@dxos/conductor';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
-import { ShapeRegistry } from '@dxos/react-ui-canvas-editor';
 import {
   type FreehandProjectionOptions,
   SceneView,
@@ -28,7 +27,7 @@ import * as Toolbar from '@dxos/react-ui/Toolbar';
 import { DiagnosticOverlay } from '../components/index.ts';
 import { type ComputeGraphController, createComputeGraphController } from '../graph/index.ts';
 import { ComputeContext } from '../hooks/index.ts';
-import { computeShapes } from '../registry.ts';
+import { computeNodeRegistry } from '../registry.ts';
 import {
   createArtifactCircuit,
   createAudioCircuit,
@@ -43,7 +42,6 @@ import {
 } from '../testing/index.ts';
 import { createStoryRuntime } from '../testing/services.ts';
 import { Bullets } from './Bullets.tsx';
-import { computeNodeRegistry } from './defs.ts';
 import { createComputeProjection } from './projection.ts';
 import { sceneFromCircuit } from './scene.ts';
 
@@ -71,7 +69,6 @@ const DefaultStory = ({ controller, circuit, sidebar: sidebarProp }: StoryProps)
     [controller],
   );
   const projection = useSceneProjection({ store, atoms, createProjection });
-  const shapeRegistry = useMemo(() => new ShapeRegistry(computeShapes), []);
   // A function body opening grows its node through the model, so links re-route with it.
   const resize = useCallback(
     (id: string, delta: number) => {
@@ -103,7 +100,7 @@ const DefaultStory = ({ controller, circuit, sidebar: sidebarProp }: StoryProps)
 
   return (
     <div className='grid grid-cols-[1fr_360px] dx-fill'>
-      <ComputeContext.Provider value={{ controller, registry: shapeRegistry, resize }}>
+      <ComputeContext.Provider value={{ controller, resize }}>
         <div className={sidebar ? 'relative flex overflow-hidden' : 'relative flex overflow-hidden col-span-2'}>
           <SceneView.Root
             store={store}
@@ -188,7 +185,7 @@ const SidebarJson = ({
 };
 
 const meta = {
-  title: 'ui/react-ui-canvas-compute/scene',
+  title: 'ui/react-ui-canvas-compute/Circuits',
   render: DefaultStory,
   decorators: [
     withRegistry,

package/src/scene/echo-store.test.ts

@@ -5,15 +5,25 @@
 import { describe, test } from 'vitest';
 
 import { DEFAULT_INPUT, DEFAULT_OUTPUT } from '@dxos/conductor';
-import { type CanvasBoard, type Polygon } from '@dxos/react-ui-canvas-editor';
-import { type Link, type Node, type Scene, reduceIntent, sortByZ } from '@dxos/react-ui-canvas/scene';
+import { type Link, type Node, type NodeStyle, type Scene, reduceIntent, sortByZ } from '@dxos/react-ui-canvas/scene';
 
+import { type ComputeShape } from '../shapes/index.ts';
+import { type CanvasBoard } from '../types/index.ts';
 import { applySceneToLayout, sceneFromLayout } from './echo-store.ts';
 
-type Layout = { nodes: Polygon[]; edges: CanvasBoard.Connection[] };
+type Layout = { nodes: ComputeShape[]; edges: CanvasBoard.Connection[] };
 
-const shape = (id: string, x: number, rest: Record<string, unknown> = {}): Polygon =>
-  ({ id, type: 'constant', center: { x, y: 0 }, size: { width: 64, height: 32 }, ...rest }) as Polygon;
+const shape = (
+  id: string,
+  x: number,
+  rest: Partial<ComputeShape> & { style?: NodeStyle } = {},
+): ComputeShape & { style?: NodeStyle } => ({
+  id,
+  type: 'constant',
+  center: { x, y: 0 },
+  size: { width: 64, height: 32 },
+  ...rest,
+});
 
 const edge = (id: string, source: string, target: string, rest: Record<string, unknown> = {}) =>
   ({ id, source, target, ...rest }) as CanvasBoard.Connection;
@@ -54,10 +64,11 @@ describe('echo store', () => {
       nodes: [shape('a', 0, { guide: true, classNames: 'text-red-500' }), shape('b', 1, { style: { hue: 'sky' } })],
       edges: [],
     });
-    expect(scene.nodes.a.style).toEqual({ guide: true, className: 'text-red-500' });
+    expect(scene.nodes.a.style).toEqual({ guide: true });
     expect(scene.nodes.b.style).toEqual({ hue: 'sky' });
     expect('guide' in scene.nodes.a).toBe(false);
-    expect('classNames' in scene.nodes.a).toBe(false);
+    // The old editor's classes ride through untouched; the engine draws none.
+    expect(Reflect.get(scene.nodes.a, 'classNames')).toBe('text-red-500');
   });
 
   test('a move writes back the node and nothing else', ({ expect }) => {

package/src/scene/echo-store.ts

@@ -18,7 +18,6 @@ import * as Atom from 'effect/reactivity/Atom';
 
 import { DEFAULT_INPUT, DEFAULT_OUTPUT } from '@dxos/conductor';
 import { Obj } from '@dxos/echo';
-import { CanvasBoard } from '@dxos/react-ui-canvas-editor';
 import {
   type Link,
   LINK_TYPES,
@@ -34,6 +33,7 @@ import {
 } from '@dxos/react-ui-canvas/scene';
 
 import { createAnchorId, parseAnchorId } from '../shapes/defs.ts';
+import { type CanvasBoard } from '../types/index.ts';
 
 /** A board's layout as both representations see it: the arrays, whether live (ECHO) or plain. */
 type Layout = { nodes: CanvasBoard.Shape[]; edges: CanvasBoard.Connection[] };
@@ -72,7 +72,8 @@ export const sceneFromLayout = (id: SceneId, layout: Partial<Layout> | undefined
 };
 
 const nodeFromShape = (shape: CanvasBoard.Shape, z: string): Node => {
-  const { guide: _guide, classNames: _classNames, ...rest } = shape as CanvasBoard.Shape & { style?: NodeStyle };
+  // `classNames` rides through on the node untouched: the old editor reads it, the engine draws no host classes.
+  const { guide: _guide, ...rest } = shape as CanvasBoard.Shape & { style?: NodeStyle };
   const style = styleFromShape(shape);
   return {
     ...(rest as unknown as Node),
@@ -81,13 +82,10 @@ const nodeFromShape = (shape: CanvasBoard.Shape, z: string): Node => {
   };
 };
 
-/** A shape's look: its own `style` when the engine wrote one, else the editor's two top-level fields. */
+/** A shape's look: its own `style` when the engine wrote one, else the editor's top-level `guide`. */
 const styleFromShape = (shape: CanvasBoard.Shape): NodeStyle | undefined => {
-  const { style, guide, classNames } = shape as CanvasBoard.Shape & { style?: NodeStyle };
-  const legacy: NodeStyle = {
-    ...(guide !== undefined ? { guide } : {}),
-    ...(classNames !== undefined ? { className: classNames } : {}),
-  };
+  const { style, guide } = shape as CanvasBoard.Shape & { style?: NodeStyle };
+  const legacy: NodeStyle = guide !== undefined ? { guide } : {};
   const merged = { ...legacy, ...style };
   return Object.keys(merged).length > 0 ? merged : undefined;
 };
@@ -165,9 +163,8 @@ const shapeFromNode = (node: Node): CanvasBoard.Shape => {
   return {
     ...(rest as unknown as CanvasBoard.Shape),
     ...(style ? { style } : {}),
-    // The old editor reads these two, so a board stays readable by it (M5 retires them with the package).
+    // The old editor reads `guide`, so a board stays readable by it (M5 retires it with the package).
     ...(style?.guide !== undefined ? { guide: style.guide } : {}),
-    ...(style?.className !== undefined ? { classNames: style.className } : {}),
   } as CanvasBoard.Shape;
 };
 

package/src/scene/index.ts

@@ -3,9 +3,6 @@
 //
 
 export * from './Bullets.tsx';
-export * from './defs.ts';
 export * from './echo-store.ts';
-export * from './NodeView.tsx';
-export * from './ports.ts';
 export * from './projection.ts';
 export * from './scene.ts';

package/src/scene/projection.ts

@@ -34,8 +34,7 @@ import {
   syncDelete,
   syncLink,
 } from '../graph/index.ts';
-import { type ComputeShape, createFunctionAnchors, parseAnchorId } from '../shapes/index.ts';
-import { anchorsToPorts } from './ports.ts';
+import { type ComputeShape, createFunctionPorts, parseAnchorId } from '../shapes/index.ts';
 
 /** What the projection needs of the controller: the graph it mirrors into and the runtime's change event. */
 export type ComputeGraphSource = Pick<ComputeGraphController, 'graph' | 'update'>;
@@ -235,7 +234,7 @@ const withRuntimePorts = (controller: ComputeGraphSource, node: Node): Node => {
   }
   const inputSchema = computeNode.inputSchema ? JsonSchema.toEffectSchema(computeNode.inputSchema) : DefaultInput;
   const outputSchema = computeNode.outputSchema ? JsonSchema.toEffectSchema(computeNode.outputSchema) : DefaultOutput;
-  return { ...node, ports: anchorsToPorts(createFunctionAnchors(node, inputSchema, outputSchema), node.size) };
+  return { ...node, ports: createFunctionPorts(node.size, inputSchema, outputSchema) };
 };
 
 const model = (controller: ComputeGraphSource) => controller.graph;

package/src/scene/scene.test.ts

@@ -11,9 +11,9 @@ import { DEFAULT_INPUT, DEFAULT_OUTPUT } from '@dxos/conductor';
 import { type Link, type Node, createMemoryStore, createSceneSchema, nodePorts } from '@dxos/react-ui-canvas/scene';
 
 import { createComputeGraph } from '../hooks/index.ts';
+import { computeNodeDefs, computeNodeRegistry } from '../registry.ts';
+import { createRowPorts } from '../shapes/index.ts';
 import { createControlCircuit, createTemplateCircuit, createTransformCircuit } from '../testing/index.ts';
-import { computeNodeDefs, computeNodeRegistry } from './defs.ts';
-import { anchorsToPorts } from './ports.ts';
 import { createComputeProjection } from './projection.ts';
 import { sceneFromCircuit } from './scene.ts';
 
@@ -81,7 +81,7 @@ describe('compute scene', () => {
     const plain = Object.values(scene.links).find(
       (link) => 'port' in link.target && link.target.port === `input.${DEFAULT_INPUT}`,
     );
-    expect(plain?.directed).toBe(true);
+    expect(plain?.ends).toEqual({ end: 'arrow' });
   });
 
   test('ports follow the anchors: stacked inputs on the west side, outputs east, exact offsets', ({ expect }) => {
@@ -98,7 +98,7 @@ describe('compute scene', () => {
     // Rows keep their order down the side.
     const offsets = inputs.map((port) => port.offset);
     expect([...offsets].sort((left, right) => left - right)).toEqual(offsets);
-    expect(anchorsToPorts({}, { width: 10, height: 10 })).toEqual([]);
+    expect(createRowPorts({ size: { width: 10, height: 10 }, inputs: [], outputs: [] })).toEqual([]);
   });
 });
 

package/src/scene/scene.ts

@@ -8,14 +8,16 @@
 // and `createComputeGraph` stay as they are; this is the seam the M4 store migration builds on.
 //
 
+import * as Schema from 'effect/Schema';
+
 import { DEFAULT_INPUT, DEFAULT_OUTPUT } from '@dxos/conductor';
-import { type CanvasGraphModel, isPolygon } from '@dxos/react-ui-canvas-editor';
 import { type Link, type Node, type Scene, initialKeys } from '@dxos/react-ui-canvas/scene';
 
-import { type ComputeShape, createAnchorId } from '../shapes/index.ts';
+import { ComputeShape, createAnchorId } from '../shapes/index.ts';
+import { type CanvasGraphModel } from '../types/index.ts';
 
 export const sceneFromCircuit = (model: CanvasGraphModel<ComputeShape>, id = 'circuit', name?: string): Scene => {
-  const shapes = model.nodes.filter(isPolygon);
+  const shapes = model.nodes.filter(Schema.is(ComputeShape));
   const keys = initialKeys(shapes.length + model.edges.length);
   const nodes: Record<string, Node> = {};
   shapes.forEach((shape, index) => {
@@ -33,7 +35,7 @@ export const sceneFromCircuit = (model: CanvasGraphModel<ComputeShape>, id = 'ci
       z: keys[shapes.length + index],
       source: { node: edge.source, port: createAnchorId('output', edge.output ?? DEFAULT_OUTPUT) },
       target: { node: edge.target, port: createAnchorId('input', edge.input ?? DEFAULT_INPUT) },
-      directed: true,
+      ends: { end: 'arrow' },
     };
   });
   return { id, ...(name ? { name } : {}), nodes, links };