@dxos/react-ui-canvas-compute 0.9.1-staging.ee54ba693a → 0.11.0

package/src/shapes/Gpt.tsx

@@ -2,34 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React, { useEffect, useState } from 'react';
 
-import { GptInput, GptOutput } from '@dxos/conductor';
 import { ScrollArea } from '@dxos/react-ui';
-import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks';
-import { FunctionBody, createFunctionAnchors, getHeight } from './common';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs';
-
-export const GptShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('gpt'),
-  }),
-);
-
-export type GptShape = Schema.Schema.Type<typeof GptShape>;
-
-export type CreateGptProps = CreateShapeProps<GptShape>;
-
-export const createGpt = (props: CreateGptProps) =>
-  createShape<GptShape>({
-    type: 'gpt',
-    size: { width: 256, height: Math.max(getHeight(GptInput), getHeight(GptOutput)) },
-    ...props,
-  });
+import { FunctionBody } from './common';
+import { type GptShape } from './gpt-def';
 
 export const GptComponent = ({ shape }: ShapeComponentProps<GptShape>) => {
   const { meta, runtime } = useComputeNodeState(shape);
@@ -85,13 +65,3 @@ export const GptComponent = ({ shape }: ShapeComponentProps<GptShape>) => {
     />
   );
 };
-
-export const gptShape: ShapeDef<GptShape> = {
-  type: 'gpt',
-  name: 'GPT',
-  icon: 'ph--brain--regular',
-  component: GptComponent,
-  createShape: createGpt,
-  getAnchors: (shape) => createFunctionAnchors(shape, GptInput, GptOutput),
-  openable: true,
-};

package/src/shapes/GptRealtime.tsx

@@ -2,30 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React, { useState } from 'react';
 
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
 import { Icon } from '@dxos/react-ui';
-import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 
-import { createFunctionAnchors } from './common';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs';
-
-export const GptRealtimeShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('gpt-realtime'),
-  }),
-);
-
-export type GptRealtimeShape = Schema.Schema.Type<typeof GptRealtimeShape>;
-
-export type CreateGptRealtimeProps = CreateShapeProps<GptRealtimeShape>;
-
-export const createGptRealtime = (props: CreateGptRealtimeProps) =>
-  createShape<GptRealtimeShape>({ type: 'gpt-realtime', size: { width: 256, height: 256 }, ...props });
+import { type GptRealtimeShape } from './gpt-realtime-def';
 
 export const GptRealtimeComponent = ({ shape }: ShapeComponentProps<GptRealtimeShape>) => {
   const [isLive, setIsLive] = useState(false);
@@ -154,22 +138,4 @@ export const GptRealtimeComponent = ({ shape }: ShapeComponentProps<GptRealtimeS
   );
 };
 
-export const gptRealtimeShape: ShapeDef<GptRealtimeShape> = {
-  type: 'gpt-realtime',
-  name: 'GPT Realtime',
-  icon: 'ph--pulse--regular',
-  component: GptRealtimeComponent,
-  createShape: createGptRealtime,
-  // TODO(dmaretskyi): Can we fetch the schema dynamically?
-  getAnchors: (shape) =>
-    createFunctionAnchors(
-      shape,
-      Schema.Struct({
-        audio: Schema.Any,
-      }),
-      Schema.Struct({}),
-    ),
-  resizable: true,
-};
-
 const DEFAULT_AI_SERVICE_URL = 'http://localhost:8788';

package/src/shapes/Json.tsx

@@ -2,39 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React from 'react';
 
-import { DEFAULT_INPUT, DefaultOutput, JsonTransformInput } from '@dxos/conductor';
-import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
-import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
+import { DEFAULT_INPUT } from '@dxos/conductor';
+import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 
 import { useComputeNodeState } from '../hooks';
-import { Box, createFunctionAnchors, getHeight } from './common';
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
-
-//
-// Data
-//
-
-export const JsonShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('json'),
-  }),
-);
-
-export type JsonShape = Schema.Schema.Type<typeof JsonShape>;
-
-export const JsonTransformShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('json-transform'),
-  }),
-);
-
-export type JsonTransformShape = Schema.Schema.Type<typeof JsonTransformShape>;
+import { Box } from './common';
+import { type JsonShape, type JsonTransformShape } from './json-def';
 
 //
 // Component
@@ -66,45 +42,3 @@ export type JsonTransformComponentProps = ShapeComponentProps<JsonTransformShape
 export const JsonTransformComponent = ({ shape, ...props }: JsonTransformComponentProps) => {
   return <Box shape={shape} />;
 };
-
-//
-// Defs
-//
-
-export type CreateJsonProps = CreateShapeProps<JsonShape>;
-
-export const createJson = (props: CreateJsonProps) =>
-  createShape<JsonShape>({ type: 'json', size: { width: 256, height: 256 }, ...props });
-
-export const jsonShape: ShapeDef<JsonShape> = {
-  type: 'json',
-  name: 'JSON',
-  icon: 'ph--code--regular',
-  component: (props) => <JsonComponent {...props} />,
-  createShape: createJson,
-  getAnchors: (shape) =>
-    createAnchorMap(shape, {
-      [createAnchorId('input')]: { x: -1, y: 0 },
-      [createAnchorId('output')]: { x: 1, y: 0 },
-    }),
-  resizable: true,
-};
-
-export type CreateJsonTransformProps = CreateShapeProps<JsonTransformShape> & { expression?: string };
-
-export const createJsonTransform = (props: CreateJsonTransformProps) =>
-  createShape<JsonTransformShape>({
-    type: 'json-transform',
-    size: { width: 128, height: getHeight(JsonTransformInput) },
-    ...props,
-  });
-
-export const jsonTransformShape: ShapeDef<JsonTransformShape> = {
-  type: 'json-transform',
-  name: 'Transform',
-  icon: 'ph--shuffle-simple--regular',
-  component: (props) => <JsonTransformComponent {...props} />,
-  createShape: createJsonTransform,
-  getAnchors: (shape) => createFunctionAnchors(shape, JsonTransformInput, DefaultOutput),
-  resizable: true,
-};

package/src/shapes/Logic.tsx

@@ -2,36 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React from 'react';
 
 import { IfElseInput, IfElseOutput, IfInput, IfOutput } from '@dxos/conductor';
-import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 
-import { FunctionBody, createFunctionAnchors, getHeight } from './common';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs';
-
-//
-// Data
-//
-
-export const IfShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('if'),
-  }),
-);
-
-export type IfShape = Schema.Schema.Type<typeof IfShape>;
-
-export const IfElseShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('if-else'),
-  }),
-);
-
-export type IfElseShape = Schema.Schema.Type<typeof IfElseShape>;
+import { FunctionBody } from './common';
+import { type IfElseShape, type IfShape } from './logic-def';
 
 //
 // Components
@@ -48,35 +25,3 @@ export type IfElseComponentProps = ShapeComponentProps<IfElseShape>;
 export const IfElseComponent = ({ shape, ...props }: IfElseComponentProps) => {
   return <FunctionBody shape={shape} inputSchema={IfElseInput} outputSchema={IfElseOutput} />;
 };
-
-//
-// Defs
-//
-
-export type CreateIfProps = CreateShapeProps<IfShape> & { if?: string };
-
-export const createIf = (props: CreateIfProps) =>
-  createShape<IfShape>({ type: 'if', size: { width: 192, height: getHeight(IfInput) }, ...props });
-
-export const ifShape: ShapeDef<IfShape> = {
-  type: 'if',
-  name: 'IF',
-  icon: 'ph--arrows-split--regular',
-  component: (props) => <IfComponent {...props} />,
-  createShape: createIf,
-  getAnchors: (shape) => createFunctionAnchors(shape, IfInput, IfOutput),
-};
-
-export type CreateIfElseProps = CreateShapeProps<IfShape> & { if?: string };
-
-export const createIfElse = (props: CreateIfElseProps) =>
-  createShape<IfElseShape>({ type: 'if-else', size: { width: 192, height: getHeight(IfElseInput) }, ...props });
-
-export const ifElseShape: ShapeDef<IfElseShape> = {
-  type: 'if-else',
-  name: 'IF/ELSE',
-  icon: 'ph--arrows-merge--regular',
-  component: (props) => <IfElseComponent {...props} />,
-  createShape: createIfElse,
-  getAnchors: (shape) => createFunctionAnchors(shape, IfElseInput, IfElseOutput),
-};

package/src/shapes/RNG.tsx

@@ -2,35 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React, { useEffect, useState } from 'react';
 
 import { DEFAULT_OUTPUT } from '@dxos/conductor';
 import { Icon, type IconProps } from '@dxos/react-ui';
-import { type ShapeComponentProps, type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
+import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks';
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
-
-export const RandomShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('rng'),
-    min: Schema.optional(Schema.Number),
-    max: Schema.optional(Schema.Number),
-  }),
-);
-
-export type RandomShape = Schema.Schema.Type<typeof RandomShape>;
-
-export type CreateRandomProps = CreateShapeProps<RandomShape>;
-
-export const createRandom = (props: CreateRandomProps) =>
-  createShape<RandomShape>({
-    type: 'rng',
-    size: { width: 64, height: 64 },
-    ...props,
-  });
+import { type RandomShape } from './rng-def';
 
 const icons = [
   'ph--dice-one--regular',
@@ -76,12 +55,3 @@ export const RandomComponent = ({ shape }: ShapeComponentProps<RandomShape>) =>
     </div>
   );
 };
-
-export const randomShape: ShapeDef<RandomShape> = {
-  type: 'rng',
-  name: 'Random',
-  icon: 'ph--dice-six--regular',
-  component: RandomComponent,
-  createShape: createRandom,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
-};

package/src/shapes/Scope.tsx

@@ -2,35 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React from 'react';
 
 import { DEFAULT_INPUT } from '@dxos/conductor';
 import { useAudioStream } from '@dxos/react-ui-audio';
-import { type ShapeComponentProps, type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
+import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 import { Chaos, shaderPresets } from '@dxos/react-ui-experimental';
 
 import { useComputeNodeState } from '../hooks';
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
-
-export const ScopeShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('scope'),
-  }),
-);
-
-export type ScopeShape = Schema.Schema.Type<typeof ScopeShape>;
-
-export type CreateScopeProps = CreateShapeProps<ScopeShape>;
-
-export const createScope = (props: CreateScopeProps) =>
-  createShape<ScopeShape>({
-    type: 'scope',
-    size: { width: 128, height: 128 },
-    classNames: 'rounded-full border-primary-800',
-    ...props,
-  });
+import { type ScopeShape } from './scope-def';
 
 export const ScopeComponent = ({ shape }: ShapeComponentProps<ScopeShape>) => {
   const { runtime } = useComputeNodeState(shape);
@@ -44,12 +24,3 @@ export const ScopeComponent = ({ shape }: ShapeComponentProps<ScopeShape>) => {
     </div>
   );
 };
-
-export const scopeShape: ShapeDef<ScopeShape> = {
-  type: 'scope',
-  name: 'Scope',
-  icon: 'ph--waveform--regular',
-  component: ScopeComponent,
-  createShape: createScope,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('input')]: { x: -1, y: 0 } }),
-};

package/src/shapes/Surface.tsx

@@ -2,37 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { DEFAULT_INPUT } from '@dxos/conductor';
 import { Card } from '@dxos/react-ui';
-import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
-import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
+import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks';
 import { Box, type BoxActionHandler } from './common';
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
-
-export const SurfaceShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('surface'),
-  }),
-);
-
-export type SurfaceShape = Schema.Schema.Type<typeof SurfaceShape>;
-
-export type CreateSurfaceProps = CreateShapeProps<SurfaceShape>;
-
-export const createSurface = (props: CreateSurfaceProps) =>
-  createShape<SurfaceShape>({
-    type: 'surface',
-    size: { width: 384, height: 384 },
-    ...props,
-  });
+import { type SurfaceShape } from './surface-def';
 
 export const SurfaceComponent = ({ shape }: ShapeComponentProps<SurfaceShape>) => {
   const { runtime } = useComputeNodeState(shape);
@@ -54,13 +34,3 @@ export const SurfaceComponent = ({ shape }: ShapeComponentProps<SurfaceShape>) =
     </Box>
   );
 };
-
-export const surfaceShape: ShapeDef<SurfaceShape> = {
-  type: 'surface',
-  name: 'Surface',
-  icon: 'ph--frame-corners--regular',
-  component: SurfaceComponent,
-  createShape: createSurface,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('input')]: { x: -1, y: 0 } }),
-  resizable: true,
-};

package/src/shapes/Switch.tsx

@@ -2,29 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React, { useEffect, useState } from 'react';
 
 import { DEFAULT_OUTPUT } from '@dxos/conductor';
 import { Input } from '@dxos/react-ui';
-import { type ShapeComponentProps, type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
+import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks';
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
-
-export const SwitchShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('switch'),
-  }),
-);
-
-export type SwitchShape = Schema.Schema.Type<typeof SwitchShape>;
-
-export type CreateSwitchProps = CreateShapeProps<SwitchShape>;
-
-export const createSwitch = (props: CreateSwitchProps) =>
-  createShape<SwitchShape>({ type: 'switch', size: { width: 64, height: 64 }, ...props });
+import { type SwitchShape } from './switch-def';
 
 // TODO(burdon): Should model as a constant.
 export const SwitchComponent = ({ shape }: ShapeComponentProps<SwitchShape>) => {
@@ -42,12 +27,3 @@ export const SwitchComponent = ({ shape }: ShapeComponentProps<SwitchShape>) =>
     </div>
   );
 };
-
-export const switchShape: ShapeDef<SwitchShape> = {
-  type: 'switch',
-  name: 'Switch',
-  icon: 'ph--toggle-left--regular',
-  component: SwitchComponent,
-  createShape: createSwitch,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
-};

package/src/shapes/Table.tsx

@@ -2,46 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React from 'react';
 
-import { createInputSchema, createOutputSchema } from '@dxos/conductor';
-import { Type } from '@dxos/echo';
-import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
-import { Message } from '@dxos/types';
+import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 
-import { Box, createFunctionAnchors } from './common';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs';
-
-const InputSchema = createInputSchema(Type.getSchema(Message.Message));
-const OutputSchema = createOutputSchema(Schema.mutable(Schema.Array(Type.getSchema(Message.Message))));
-
-export const TableShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('table'),
-  }),
-);
-
-export type TableShape = Schema.Schema.Type<typeof TableShape>;
-
-export type CreateTableProps = CreateShapeProps<TableShape>;
-
-export const createTable = (props: CreateTableProps) =>
-  createShape<TableShape>({ type: 'table', size: { width: 320, height: 512 }, ...props });
+import { Box } from './common';
+import { type TableShape } from './table-def';
 
 export const TableComponent = ({ shape }: ShapeComponentProps<TableShape>) => {
   // const items = shape.node.items.value;
 
   return <Box shape={shape}></Box>;
 };
-
-export const tableShape: ShapeDef<TableShape> = {
-  type: 'table',
-  name: 'Table',
-  icon: 'ph--table--regular',
-  component: TableComponent,
-  createShape: createTable,
-  getAnchors: (shape) => createFunctionAnchors(shape, InputSchema, OutputSchema),
-  resizable: true,
-};

package/src/shapes/Template.tsx

@@ -5,34 +5,19 @@
 import * as Schema from 'effect/Schema';
 import React, { useRef } from 'react';
 
-import { ComputeValueType, TemplateOutput, VoidInput, getTemplateInputSchema } from '@dxos/conductor';
+import { ComputeValueType, getTemplateInputSchema } from '@dxos/conductor';
 import { toJsonSchema } from '@dxos/echo/JsonSchema';
 import { invariant } from '@dxos/invariant';
 import {
   type ShapeComponentProps,
-  type ShapeDef,
   TextBox,
   type TextBoxControl,
   type TextBoxProps,
 } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks';
-import { Box, TypeSelect, createFunctionAnchors } from './common';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs';
-
-//
-// Data
-//
-
-export const TemplateShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('template'),
-    valueType: Schema.optional(ComputeValueType),
-  }),
-);
-
-export type TemplateShape = Schema.Schema.Type<typeof TemplateShape>;
+import { Box, TypeSelect } from './common';
+import { type TemplateShape } from './template-def';
 
 //
 // Component
@@ -79,21 +64,6 @@ const TextInputComponent = ({ shape, title, ...props }: TextInputComponentProps)
   );
 };
 
-//
-// Defs
-//
-
-export type CreateTemplateProps = CreateShapeProps<TemplateShape> & { text?: string };
-
-export const createTemplate = (props: CreateTemplateProps) =>
-  createShape<TemplateShape>({ type: 'template', size: { width: 256, height: 384 }, ...props });
-
-export const templateShape: ShapeDef<TemplateShape> = {
-  type: 'template',
-  name: 'Template',
-  icon: 'ph--article--regular',
-  component: (props) => <TextInputComponent {...props} placeholder={'Prompt'} />,
-  createShape: createTemplate,
-  getAnchors: (shape) => createFunctionAnchors(shape, VoidInput, TemplateOutput),
-  resizable: true,
-};
+export const TemplateComponent = (props: ShapeComponentProps<TemplateShape>) => (
+  <TextInputComponent {...props} placeholder={'Prompt'} />
+);

package/src/shapes/Text.tsx

@@ -2,30 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React from 'react';
 
 import { DEFAULT_INPUT } from '@dxos/conductor';
-import { type ShapeComponentProps, type ShapeDef, TextBox } from '@dxos/react-ui-canvas-editor';
-import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
+import { type ShapeComponentProps, TextBox } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks';
 import { Box, type BoxActionHandler } from './common';
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
-
-export const TextShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('text'),
-  }),
-);
-
-export type TextShape = Schema.Schema.Type<typeof TextShape>;
-
-export type CreateTextProps = CreateShapeProps<TextShape>;
-
-export const createText = (props: CreateTextProps) =>
-  createShape<TextShape>({ type: 'text', size: { width: 384, height: 384 }, ...props });
+import { type TextShape } from './text-def';
 
 export const TextComponent = ({ shape }: ShapeComponentProps<TextShape>) => {
   const { runtime } = useComputeNodeState(shape);
@@ -44,13 +28,3 @@ export const TextComponent = ({ shape }: ShapeComponentProps<TextShape>) => {
     </Box>
   );
 };
-
-export const textShape: ShapeDef<TextShape> = {
-  type: 'text',
-  name: 'Text',
-  icon: 'ph--article--regular',
-  component: TextComponent,
-  createShape: createText,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('input')]: { x: -1, y: 0 } }),
-  resizable: true,
-};

package/src/shapes/TextToImage.tsx

@@ -2,38 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React from 'react';
 
-import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
-import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
+import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 
 import { Box } from './common';
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
-
-export const TextToImageShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('text-to-image'),
-  }),
-);
-
-export type TextToImageShape = Schema.Schema.Type<typeof TextToImageShape>;
-
-export type CreateTextToImageProps = CreateShapeProps<TextToImageShape>;
-
-export const createTextToImage = (props: CreateTextToImageProps) =>
-  createShape<TextToImageShape>({ type: 'text-to-image', size: { width: 128, height: 64 }, ...props });
+import { type TextToImageShape } from './text-to-image-def';
 
 export const TextToImageComponent = ({ shape }: ShapeComponentProps<TextToImageShape>) => {
   return <Box shape={shape} />;
 };
-
-export const textToImageShape: ShapeDef<TextToImageShape> = {
-  type: 'text-to-image',
-  name: 'Image',
-  icon: 'ph--image--regular',
-  component: TextToImageComponent,
-  createShape: createTextToImage,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
-};