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

package/dist/types/src/compute.stories.d.ts

@@ -1,58 +0,0 @@
-import { type StoryObj } from '@storybook/react-vite';
-import React, { type PropsWithChildren } from 'react';
-import { type ComputeGraphModel } from '@dxos/conductor';
-import { type EditorRootProps } from '@dxos/react-ui-canvas-editor';
-import { type ComputeGraphController } from './graph/index.ts';
-import { type ComputeShape } from './shapes/index.ts';
-type RenderProps = EditorRootProps<ComputeShape> & PropsWithChildren<{
-    init?: boolean;
-    sidebar?: 'canvas' | 'compute' | 'controller' | 'selected';
-    computeGraph?: ComputeGraphModel;
-    controller?: ComputeGraphController | null;
-}>;
-declare const DefaultStory: ({ id, children, graph, controller, sidebar: sidebarProp, registry, showGrid, snapToGrid, ...props }: RenderProps) => React.JSX.Element;
-declare const meta: {
-    title: string;
-    component: any;
-    render: typeof DefaultStory;
-    decorators: import("@storybook/react").Decorator[];
-    parameters: {
-        layout: string;
-    };
-    argTypes: {
-        controller: {
-            table: {
-                disable: boolean;
-            };
-        };
-        graph: {
-            table: {
-                disable: boolean;
-            };
-        };
-        registry: {
-            table: {
-                disable: boolean;
-            };
-        };
-        sidebar: {
-            control: "select";
-            options: (NonNullable<"canvas" | "compute" | "controller" | "selected" | undefined> | null)[];
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Beacon: Story;
-export declare const Transform: Story;
-export declare const Logic: Story;
-export declare const Control: Story;
-export declare const Template: Story;
-export declare const GPT: Story;
-export declare const Plugins: Story;
-export declare const Artifact: Story;
-export declare const ImageGen: Story;
-export declare const Audio: Story;
-export declare const Voice: Story;
-//# sourceMappingURL=compute.stories.d.ts.map

package/dist/types/src/compute.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"compute.stories.d.ts","sourceRoot":"","sources":["../../../src/compute.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAwC,MAAM,OAAO,CAAC;AAI5F,OAAO,EAAE,KAAK,iBAAiB,EAA0C,MAAM,iBAAiB,CAAC;AAGjG,OAAO,EAAiC,KAAK,eAAe,EAAiB,MAAM,8BAA8B,CAAC;AAUlH,OAAO,EAAE,KAAK,sBAAsB,EAAgC,MAAM,kBAAkB,CAAC;AAG7F,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAqBtD,KAAK,WAAW,GAAG,eAAe,CAAC,YAAY,CAAC,GAC9C,iBAAiB,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;IAC3D,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,UAAU,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;CAC5C,CAAC,CAAC;AAEL,QAAA,MAAM,YAAY,wGAUf,WAAW,sBAyHb,CAAC;AAEF,QAAA,MAAM,IAAI;;eAEkB,GAAG;;;;QAU3B,MAAM;;;;;gBA3JmB,OAAO;;;;;;;;;;;;;;;;;;CAsKC,CAAC;eAEvB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,KAKjB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC"}

package/dist/types/src/hooks/useComputeGraphController.d.ts

@@ -1,10 +0,0 @@
-import { type RefObject } from 'react';
-import { type EditorController, type EditorRootProps } from '@dxos/react-ui-canvas-editor';
-import { type ComputeGraphController } from '../graph/index.ts';
-import { type ComputeShape } from '../shapes/index.ts';
-export type UseComputeGraphControllerOptions = Pick<EditorRootProps<ComputeShape>, 'graph'> & {
-    controller: ComputeGraphController | null;
-    editorRef: RefObject<EditorController | null>;
-};
-export declare const useComputeGraphController: ({ controller, graph, editorRef }: UseComputeGraphControllerOptions) => void;
-//# sourceMappingURL=useComputeGraphController.d.ts.map

package/dist/types/src/hooks/useComputeGraphController.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useComputeGraphController.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useComputeGraphController.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE3F,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAWvD,MAAM,MAAM,gCAAgC,GAAG,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,GAAG;IAC5F,UAAU,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,yBAAyB,qCAAsC,gCAAgC,SAsC3G,CAAC"}

package/dist/types/src/scene/NodeView.d.ts

@@ -1,11 +0,0 @@
-import * as Schema from 'effect/Schema';
-import { type ComponentType, type FC } from 'react';
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
-import { type NodeViewProps } from '@dxos/react-ui-canvas/scene';
-import { type ComputeShape } from '../shapes/index.ts';
-/**
- * The shape component under the engine's view props: the node is the shape (it carries the same fields
- * plus `z`), re-rendered on every controller update since the runtime state it reads is not reactive.
- */
-export declare const computeNodeView: <S extends ComputeShape>(schema: Schema.Codec<S, unknown, never, never>, Component: FC<ShapeComponentProps<S>>) => ComponentType<NodeViewProps>;
-//# sourceMappingURL=NodeView.d.ts.map

package/dist/types/src/scene/NodeView.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NodeView.d.ts","sourceRoot":"","sources":["../../../../src/scene/NodeView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAc,EAAE,KAAK,aAAa,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,KAAK,aAAa,EAAmB,MAAM,6BAA6B,CAAC;AAIlF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,YAAY,UAC5C,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,aACnC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,KACpC,aAAa,CAAC,aAAa,CAoB7B,CAAC"}

package/dist/types/src/scene/defs.d.ts

@@ -1,5 +0,0 @@
-import { type NodeDef, type NodeRegistry } from '@dxos/react-ui-canvas/scene';
-export declare const computeNodeDefs: NodeDef[];
-/** The compute types plus the engine's note under a `Misc` group. */
-export declare const computeNodeRegistry: NodeRegistry;
-//# sourceMappingURL=defs.d.ts.map

package/dist/types/src/scene/defs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/scene/defs.ts"],"names":[],"mappings":"AAeA,OAAO,EAGL,KAAK,OAAO,EACZ,KAAK,YAAY,EAGlB,MAAM,6BAA6B,CAAC;AAiIrC,eAAO,MAAM,eAAe,EAAE,OAAO,EAAkC,CAAC;AAExE,qEAAqE;AACrE,eAAO,MAAM,mBAAmB,EAAE,YAGjC,CAAC"}

package/dist/types/src/scene/ports.d.ts

@@ -1,5 +0,0 @@
-import { type Anchor } from '@dxos/react-ui-canvas-editor';
-import { type Port, type Size } from '@dxos/react-ui-canvas/scene';
-/** The ports of a shape from its anchors; a port's direction comes from the `input.` / `output.` prefix. */
-export declare const anchorsToPorts: (anchors: Record<string, Anchor>, size: Size) => Port[];
-//# sourceMappingURL=ports.d.ts.map

package/dist/types/src/scene/ports.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ports.d.ts","sourceRoot":"","sources":["../../../../src/scene/ports.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAInE,4GAA4G;AAC5G,eAAO,MAAM,cAAc,YAAa,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,QAAQ,IAAI,KAAG,IAAI,EAc7E,CAAC"}

package/dist/types/src/shapes/common/function-anchors.d.ts

@@ -1,12 +0,0 @@
-import type * as Schema from 'effect/Schema';
-import { type Polygon } from '@dxos/react-ui-canvas-editor';
-/** Vertical padding inside the function body; the height maths below depends on it. */
-export declare const bodyPadding = 8;
-/**
- * A function shape's height: the chrome plus a body grown to a whole number of grid cells. One row per
- * input is a floor on the body rather than its height, so the box lands on the grid whatever its schema
- * declares — the rows used to set it exactly, and `rowHeight` divides into no grid cell.
- */
-export declare const getHeight: (input: Schema.Schema<any>, unit?: number) => number;
-export declare const createFunctionAnchors: (shape: Polygon, input?: Schema.Schema<any>, output?: Schema.Schema<any>) => Record<string, import("@dxos/react-ui-canvas-editor").Anchor>;
-//# sourceMappingURL=function-anchors.d.ts.map

package/dist/types/src/shapes/common/function-anchors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"function-anchors.d.ts","sourceRoot":"","sources":["../../../../../src/shapes/common/function-anchors.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,MAAM,eAAe,CAAC;AAI7C,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAU5D,uFAAuF;AACvF,eAAO,MAAM,WAAW,IAAI,CAAC;AAE7B;;;;GAIG;AACH,eAAO,MAAM,SAAS,UAAW,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,0BAIlD,CAAC;AAEF,eAAO,MAAM,qBAAqB,UACzB,OAAO,UACP,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,WACjB,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,kEAQ3B,CAAC"}

package/src/compute-layout.ts

@@ -1,37 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { DefaultInput, DefaultOutput } from '@dxos/conductor';
-import * as JsonSchema from '@dxos/echo/JsonSchema';
-import { type Anchor, ShapeLayout, type ShapeRegistry } from '@dxos/react-ui-canvas-editor';
-
-import { type ComputeGraphController } from './graph/index.ts';
-import { type ComputeShape, createFunctionAnchors } from './shapes/index.ts';
-
-// TODO(burdon): Customize layout. Specialize ComputeShapeDef and registry.
-export class ComputeShapeLayout extends ShapeLayout {
-  constructor(
-    private _controller: ComputeGraphController,
-    registry: ShapeRegistry,
-  ) {
-    super(registry);
-  }
-
-  // TODO(burdon): Doesn't update.
-  override getAnchors(shape: ComputeShape): Record<string, Anchor> {
-    const shapeDef = this._registry.getShapeDef(shape.type);
-    let anchors = shapeDef?.getAnchors?.(shape) ?? {};
-    if (shape.node) {
-      const node = this._controller.graph.getNode(shape.node);
-      if (node.inputSchema || node.outputSchema) {
-        // TODO(burdon): Requires that component defined input and output types.
-        const inputSchema = node.inputSchema ? JsonSchema.toEffectSchema(node.inputSchema) : DefaultInput;
-        const outputSchema = node.outputSchema ? JsonSchema.toEffectSchema(node.outputSchema) : DefaultOutput;
-        anchors = createFunctionAnchors(shape, inputSchema, outputSchema);
-      }
-    }
-
-    return anchors;
-  }
-}

package/src/compute.stories.tsx

@@ -1,302 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react';
-
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { capabilities } from '@dxos/assistant-toolkit/testing';
-import { type ComputeGraphModel, type ComputeNode, type GraphDiagnostic } from '@dxos/conductor';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withAttention } from '@dxos/react-ui-attention/testing';
-import { Editor, type EditorController, type EditorRootProps, ShapeRegistry } from '@dxos/react-ui-canvas-editor';
-import { Container, useSelection } from '@dxos/react-ui-canvas-editor/testing';
-import { Form } from '@dxos/react-ui-form';
-import { Syntax } from '@dxos/react-ui-syntax-highlighter';
-import * as Select from '@dxos/react-ui/Select';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import * as Toolbar from '@dxos/react-ui/Toolbar';
-
-import { DiagnosticOverlay } from './components/index.ts';
-import { ComputeShapeLayout } from './compute-layout.ts';
-import { type ComputeGraphController, createComputeGraphController } from './graph/index.ts';
-import { ComputeContext, useComputeGraphController, useGraphMonitor } from './hooks/index.ts';
-import { computeShapes } from './registry.ts';
-import { type ComputeShape } from './shapes/index.ts';
-import {
-  createArtifactCircuit,
-  createAudioCircuit,
-  createBasicCircuit,
-  createControlCircuit,
-  createEmptyCircuit,
-  createGptCircuit,
-  createGPTRealtimeCircuit,
-  createLogicCircuit,
-  createTemplateCircuit,
-  createTransformCircuit,
-} from './testing/index.ts';
-import { createStoryRuntime } from './testing/services.ts';
-
-// TODO(burdon): Replace ServiceContainer.
-
-const sidebarTypes: NonNullable<RenderProps['sidebar']>[] = ['canvas', 'compute', 'controller', 'selected'] as const;
-
-const hiddenArg = { table: { disable: true } };
-
-type RenderProps = EditorRootProps<ComputeShape> &
-  PropsWithChildren<{
-    init?: boolean;
-    sidebar?: 'canvas' | 'compute' | 'controller' | 'selected';
-    computeGraph?: ComputeGraphModel;
-    controller?: ComputeGraphController | null;
-  }>;
-
-const DefaultStory = ({
-  id = 'test',
-  children,
-  graph,
-  controller = null,
-  sidebar: sidebarProp,
-  registry,
-  showGrid = true,
-  snapToGrid = true,
-  ...props
-}: RenderProps) => {
-  const editorRef = useRef<EditorController>(null);
-
-  // Selection.
-  const [selection, selected] = useSelection(graph);
-
-  const getComputeNode = (id?: string): ComputeNode | undefined => {
-    if (id) {
-      const node = graph?.getNode(id) as ComputeShape;
-      if (node?.node) {
-        return controller?.graph.getNode(node.node);
-      }
-    }
-  };
-
-  // Sidebar.
-  const [sidebar, setSidebar] = useState<RenderProps['sidebar']>(sidebarProp);
-  const json = useMemo(() => {
-    switch (sidebar) {
-      case 'canvas':
-        return { graph };
-      case 'compute':
-        return { graph: controller?.graph };
-      case 'controller':
-        return { state: controller?.state };
-      case 'selected':
-        return { shape: selected, compute: getComputeNode(selected?.id) };
-    }
-  }, [graph, controller, sidebar, selected]);
-
-  // Controller.
-  useComputeGraphController({ controller, graph, editorRef });
-
-  // Sync monitor.
-  const graphMonitor = useGraphMonitor(controller?.graph);
-
-  // Layout.
-  const layout = useMemo(
-    () => (controller && registry ? new ComputeShapeLayout(controller, registry) : undefined),
-    [controller, registry],
-  );
-
-  const [diagnostics, setDiagnostics] = useState<GraphDiagnostic[]>([]);
-  useEffect(() => {
-    if (controller) {
-      void controller.checkGraph().then(() => {
-        setDiagnostics(controller.diagnostics);
-      });
-    }
-  }, []);
-
-  if (!controller) {
-    return <div />;
-  }
-
-  return (
-    <div className='grid grid-cols-[1fr_360px] dx-fill'>
-      <ComputeContext.Provider value={{ controller, registry }}>
-        <Container id={id} classNames={['flex grow overflow-hidden', !sidebar && 'col-span-2']}>
-          <Editor.Root<ComputeShape>
-            ref={editorRef}
-            id={id}
-            graph={graph}
-            graphMonitor={graphMonitor}
-            layout={layout}
-            registry={registry}
-            selection={selection}
-            autoZoom
-            showGrid={showGrid}
-            snapToGrid={snapToGrid}
-            {...props}
-          >
-            <Editor.Canvas>{children}</Editor.Canvas>
-            <Editor.UI showTools />
-          </Editor.Root>
-          <DiagnosticOverlay diagnostics={diagnostics} />
-        </Container>
-      </ComputeContext.Provider>
-
-      {sidebar && (
-        <Container id='sidebar' classNames='flex flex-col h-full overflow-hidden'>
-          <Toolbar.Root>
-            <Select.Root
-              value={[sidebar]}
-              onValueChange={({ value: [value] }) => setSidebar(value as RenderProps['sidebar'])}
-              items={sidebarTypes.map((type) => ({ value: type, label: type }))}
-            >
-              <Select.Trigger classNames='w-full' />
-              <Select.Content>
-                {sidebarTypes.map((type) => (
-                  <Select.Item key={type} item={{ value: type, label: type }} />
-                ))}
-              </Select.Content>
-            </Select.Root>
-          </Toolbar.Root>
-
-          <div className='flex flex-col h-full overflow-hidden divide-y divider-separator'>
-            {/* TODO(burdon): Provide schema. */}
-            {sidebar === 'selected' && selected && (
-              <Form.Root<ComputeNode> values={getComputeNode(selected.id) ?? {}}>
-                <Form.Viewport>
-                  <Form.Content>
-                    <Form.Fields />
-                    <Form.Actions />
-                  </Form.Content>
-                </Form.Viewport>
-              </Form.Root>
-            )}
-            <Syntax.Root data={json}>
-              <Syntax.Content>
-                <Syntax.Filter />
-                <Syntax.Viewport>
-                  <Syntax.Code />
-                </Syntax.Viewport>
-              </Syntax.Content>
-            </Syntax.Root>
-          </div>
-        </Container>
-      )}
-    </div>
-  );
-};
-
-const meta = {
-  title: 'ui/react-ui-canvas-compute/compute',
-  component: Editor.Root as any,
-  render: DefaultStory,
-  decorators: [
-    withTheme(),
-    withLayout({ layout: 'fullscreen' }),
-    withAttention(),
-    withClientProvider({ createIdentity: true, createSpace: true }),
-    withPluginManager({ capabilities }),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    controller: hiddenArg,
-    graph: hiddenArg,
-    registry: hiddenArg,
-    sidebar: {
-      control: 'select',
-      options: [...sidebarTypes, null],
-    },
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createEmptyCircuit(), createStoryRuntime()),
-  },
-};
-
-export const Beacon: Story = {
-  args: {
-    registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createBasicCircuit(), createStoryRuntime()),
-  },
-};
-
-export const Transform: Story = {
-  args: {
-    registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createTransformCircuit(), createStoryRuntime()),
-  },
-};
-
-export const Logic: Story = {
-  args: {
-    registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createLogicCircuit(), createStoryRuntime()),
-  },
-};
-
-export const Control: Story = {
-  args: {
-    registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createControlCircuit(), createStoryRuntime()),
-  },
-};
-
-export const Template: Story = {
-  args: {
-    registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createTemplateCircuit(), createStoryRuntime()),
-  },
-};
-
-export const GPT: Story = {
-  args: {
-    registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createGptCircuit({ history: true }), createStoryRuntime()),
-  },
-};
-
-export const Plugins: Story = {
-  args: {
-    registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(
-      createGptCircuit({ history: true, image: true, artifact: true }),
-      createStoryRuntime(),
-    ),
-  },
-};
-
-export const Artifact: Story = {
-  args: {
-    registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createArtifactCircuit(), createStoryRuntime()),
-  },
-};
-
-export const ImageGen: Story = {
-  args: {
-    registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createGptCircuit({ image: true, artifact: true }), createStoryRuntime()),
-  },
-};
-
-export const Audio: Story = {
-  args: {
-    registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createAudioCircuit(), createStoryRuntime()),
-  },
-};
-
-export const Voice: Story = {
-  args: {
-    registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createGPTRealtimeCircuit(), createStoryRuntime()),
-  },
-};

package/src/hooks/useComputeGraphController.ts

@@ -1,65 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type RefObject, useEffect, useState } from 'react';
-
-import { type CleanupFn } from '@dxos/async';
-import { type EditorController, type EditorRootProps } from '@dxos/react-ui-canvas-editor';
-
-import { type ComputeGraphController } from '../graph/index.ts';
-import { type ComputeShape } from '../shapes/index.ts';
-
-// TODO(burdon): Move to async/context?
-const combine = (...cbs: CleanupFn[]) => {
-  return () => {
-    for (const cb of cbs) {
-      cb();
-    }
-  };
-};
-
-export type UseComputeGraphControllerOptions = Pick<EditorRootProps<ComputeShape>, 'graph'> & {
-  controller: ComputeGraphController | null;
-  editorRef: RefObject<EditorController | null>;
-};
-
-export const useComputeGraphController = ({ controller, graph, editorRef }: UseComputeGraphControllerOptions) => {
-  const [, forceUpdate] = useState({});
-
-  useEffect(() => {
-    if (!controller || !graph) {
-      return;
-    }
-
-    void controller.open();
-    const off = combine(
-      controller.update.on(() => {
-        void editorRef.current?.update();
-        forceUpdate({});
-      }),
-
-      // TODO(burdon): Every node is called on every update.
-      controller.output.on(({ nodeId, property, value }) => {
-        if (value.type === 'not-executed') {
-          // If the node didn't execute, don't trigger.
-          return;
-        }
-
-        const edge = graph.edges.find((edge) => {
-          const source = graph.getNode(edge.source);
-          return (source as ComputeShape).node === nodeId && edge.output === property;
-        });
-
-        if (edge) {
-          void editorRef.current?.action?.({ type: 'trigger', edges: [edge] });
-        }
-      }),
-    );
-
-    return () => {
-      void controller.close();
-      off();
-    };
-  }, [graph, controller]);
-};

package/src/scene/NodeView.tsx

@@ -1,42 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-import React, { type ComponentType, type FC } from 'react';
-
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
-import { type NodeViewProps, UnknownNodeView } from '@dxos/react-ui-canvas/scene';
-
-import { useComputeContext } from '../hooks/compute-context.ts';
-import { useControllerUpdates } from '../hooks/useControllerUpdates.ts';
-import { type ComputeShape } from '../shapes/index.ts';
-
-/**
- * The shape component under the engine's view props: the node is the shape (it carries the same fields
- * plus `z`), re-rendered on every controller update since the runtime state it reads is not reactive.
- */
-export const computeNodeView = <S extends ComputeShape>(
-  schema: Schema.Codec<S, unknown, never, never>,
-  Component: FC<ShapeComponentProps<S>>,
-): ComponentType<NodeViewProps> => {
-  const isShape = Schema.is(schema);
-  const View = (props: NodeViewProps) => {
-    const { node, selected } = props;
-    const { controller } = useComputeContext();
-    useControllerUpdates(controller);
-    if (!isShape(node)) {
-      return <UnknownNodeView {...props} />;
-    }
-    // The shape components were written against the editor's frame body, which is a full-size flex
-    // container (`styles.frameContainer`); the engine's node frame is not, so their `grow` / `w-full`
-    // centring collapsed to the top-left corner. The wrapper restores that contract for every shape.
-    return (
-      <div className='dx-cover flex'>
-        <Component shape={node} selected={selected} />
-      </div>
-    );
-  };
-  View.displayName = `ComputeNodeView(${Component.displayName ?? Component.name})`;
-  return View;
-};