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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-canvas-compute",
-  "version": "0.9.1-staging.ee54ba693a",
+  "version": "0.11.0",
   "description": "A compute graph extension for the canvas editor component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -14,9 +14,8 @@
   "exports": {
     ".": {
       "source": "./src/index.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs",
-      "types": "./dist/types/src/index.d.ts"
+      "types": "./dist/types/src/index.d.ts",
+      "import": "./dist/lib/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -30,39 +29,37 @@
     "@effect/platform": "0.96.2",
     "chess.js": "^1.0.0",
     "workerize-loader": "^2.0.2",
-    "@dxos/ai": "0.9.1-staging.ee54ba693a",
-    "@dxos/app-framework": "0.9.1-staging.ee54ba693a",
-    "@dxos/async": "0.9.1-staging.ee54ba693a",
-    "@dxos/compute": "0.9.1-staging.ee54ba693a",
-    "@dxos/app-toolkit": "0.9.1-staging.ee54ba693a",
-    "@dxos/conductor": "0.9.1-staging.ee54ba693a",
-    "@dxos/compute-runtime": "0.9.1-staging.ee54ba693a",
-    "@dxos/context": "0.9.1-staging.ee54ba693a",
-    "@dxos/edge-client": "0.9.1-staging.ee54ba693a",
-    "@dxos/debug": "0.9.1-staging.ee54ba693a",
-    "@dxos/echo": "0.9.1-staging.ee54ba693a",
-    "@dxos/effect": "0.9.1-staging.ee54ba693a",
-    "@dxos/functions": "0.9.1-staging.ee54ba693a",
-    "@dxos/graph": "0.9.1-staging.ee54ba693a",
-    "@dxos/functions-runtime": "0.9.1-staging.ee54ba693a",
-    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
-    "@dxos/keys": "0.9.1-staging.ee54ba693a",
-    "@dxos/log": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-attention": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-client": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-edge-client": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-audio": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-canvas-editor": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-canvas": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-editor": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-experimental": "0.9.1-staging.ee54ba693a",
-    "@dxos/assistant": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-syntax-highlighter": "0.9.1-staging.ee54ba693a",
-    "@dxos/schema": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-mosaic": "0.9.1-staging.ee54ba693a",
-    "@dxos/types": "0.9.1-staging.ee54ba693a",
-    "@dxos/util": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-form": "0.9.1-staging.ee54ba693a"
+    "@dxos/ai": "0.11.0",
+    "@dxos/app-framework": "0.11.0",
+    "@dxos/app-toolkit": "0.11.0",
+    "@dxos/async": "0.11.0",
+    "@dxos/assistant": "0.11.0",
+    "@dxos/compute": "0.11.0",
+    "@dxos/compute-runtime": "0.11.0",
+    "@dxos/conductor": "0.11.0",
+    "@dxos/context": "0.11.0",
+    "@dxos/debug": "0.11.0",
+    "@dxos/echo": "0.11.0",
+    "@dxos/edge-client": "0.11.0",
+    "@dxos/effect": "0.11.0",
+    "@dxos/graph": "0.11.0",
+    "@dxos/invariant": "0.11.0",
+    "@dxos/keys": "0.11.0",
+    "@dxos/log": "0.11.0",
+    "@dxos/react-client": "0.11.0",
+    "@dxos/react-edge-client": "0.11.0",
+    "@dxos/react-ui-attention": "0.11.0",
+    "@dxos/react-ui-audio": "0.11.0",
+    "@dxos/react-ui-canvas": "0.11.0",
+    "@dxos/react-ui-canvas-editor": "0.11.0",
+    "@dxos/react-ui-experimental": "0.11.0",
+    "@dxos/react-ui-editor": "0.11.0",
+    "@dxos/react-ui-form": "0.11.0",
+    "@dxos/react-ui-mosaic": "0.11.0",
+    "@dxos/react-ui-syntax-highlighter": "0.11.0",
+    "@dxos/schema": "0.11.0",
+    "@dxos/util": "0.11.0",
+    "@dxos/types": "0.11.0"
   },
   "devDependencies": {
     "@effect/ai": "0.36.0",
@@ -74,20 +71,20 @@
     "lodash.defaultsdeep": "^4.6.1",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/app-framework": "0.9.1-staging.ee54ba693a",
-    "@dxos/assistant-toolkit": "0.9.1-staging.ee54ba693a",
-    "@dxos/random": "0.9.1-staging.ee54ba693a",
-    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a",
-    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui": "0.9.1-staging.ee54ba693a"
+    "vite": "^8.1.4",
+    "@dxos/assistant-toolkit": "0.11.0",
+    "@dxos/random": "0.11.0",
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/app-framework": "0.11.0",
+    "@dxos/storybook-utils": "0.11.0",
+    "@dxos/ui-theme": "0.11.0"
   },
   "peerDependencies": {
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
-    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
+    "@dxos/react-ui": "^0.11.0",
+    "@dxos/ui-theme": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/compute.stories.tsx

@@ -12,10 +12,10 @@ import { AiServiceTestingPreset } from '@dxos/ai/testing';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { capabilities } from '@dxos/assistant-toolkit/testing';
 import { Operation } from '@dxos/compute';
+import { configuredCredentialsLayer } from '@dxos/compute-runtime';
 import { TestDatabaseLayer } from '@dxos/compute-runtime/testing';
 import { type ComputeGraphModel, type ComputeNode, type GraphDiagnostic } from '@dxos/conductor';
 import { registryLayerNoop } from '@dxos/echo/testing';
-import { configuredCredentialsLayer } from '@dxos/functions';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Select, Toolbar } from '@dxos/react-ui';
 import { withAttention } from '@dxos/react-ui-attention/testing';

package/src/shapes/Append.tsx

@@ -2,42 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React from 'react';
 
 import { AppendInput } 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';
-
-export const AppendShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('append'),
-  }),
-);
-
-export type AppendShape = Schema.Schema.Type<typeof AppendShape>;
-
-export type CreateAppendProps = CreateShapeProps<AppendShape>;
-
-export const createAppend = (props: CreateAppendProps) =>
-  createShape<AppendShape>({
-    type: 'append',
-    size: { width: 128, height: getHeight(AppendInput) },
-    ...props,
-  });
+import { type AppendShape } from './append-def';
+import { FunctionBody } from './common';
 
 export const AppendComponent = ({ shape }: ShapeComponentProps<AppendShape>) => {
   return <FunctionBody shape={shape} inputSchema={AppendInput} />;
 };
-
-export const appendShape: ShapeDef<AppendShape> = {
-  type: 'append',
-  name: 'Append',
-  icon: 'ph--list-plus--regular',
-  component: AppendComponent,
-  createShape: createAppend,
-  getAnchors: (shape) => createFunctionAnchors(shape, AppendInput),
-};

package/src/shapes/Array.tsx

@@ -2,27 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React from 'react';
 
 import { ReducerInput, ReducerOutput } 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 ReducerShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('reducer'),
-  }),
-);
-
-export type ReducerShape = Schema.Schema.Type<typeof ReducerShape>;
+import { type ReducerShape } from './array-def';
+import { FunctionBody } from './common';
 
 //
 // Components
@@ -33,29 +19,3 @@ export type ReducerComponentProps = ShapeComponentProps<ReducerShape>;
 export const ReducerComponent = ({ shape }: ReducerComponentProps) => {
   return <FunctionBody shape={shape} inputSchema={ReducerInput} outputSchema={ReducerOutput} />;
 };
-
-//
-// Defs
-//
-
-export type CreateReduceProps = CreateShapeProps<ReducerShape> & { reduce?: string };
-
-export const createReducer = ({
-  id,
-  size = { width: 192, height: getHeight(ReducerInput) },
-  ...rest
-}: CreateReduceProps): ReducerShape =>
-  createShape<ReducerShape>({
-    type: 'reducer',
-    size,
-    ...rest,
-  });
-
-export const reducerShape: ShapeDef<ReducerShape> = {
-  type: 'reducer',
-  name: 'Reducer',
-  icon: 'ph--repeat--regular',
-  component: (props) => <ReducerComponent {...props} />,
-  createShape: createReducer,
-  getAnchors: (shape) => createFunctionAnchors(shape, ReducerInput, ReducerOutput),
-};

package/src/shapes/Audio.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 { Icon } 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 AudioShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('audio'),
-  }),
-);
-
-export type AudioShape = Schema.Schema.Type<typeof AudioShape>;
-
-export type CreateAudioProps = CreateShapeProps<AudioShape>;
-
-export const createAudio = (props: CreateAudioProps) =>
-  createShape<AudioShape>({ type: 'audio', size: { width: 64, height: 64 }, ...props });
+import { type AudioShape } from './audio-def';
 
 export const AudioComponent = ({ shape }: ShapeComponentProps<AudioShape>) => {
   const { runtime } = useComputeNodeState(shape);
@@ -45,12 +30,3 @@ export const AudioComponent = ({ shape }: ShapeComponentProps<AudioShape>) => {
     </div>
   );
 };
-
-export const audioShape: ShapeDef<AudioShape> = {
-  type: 'audio',
-  name: 'Audio',
-  icon: 'ph--microphone--regular',
-  component: AudioComponent,
-  createShape: createAudio,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
-};

package/src/shapes/Beacon.tsx

@@ -2,29 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React from 'react';
 
 import { DEFAULT_INPUT, isTruthy } from '@dxos/conductor';
 import { Icon } 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 BeaconShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('beacon'),
-  }),
-);
-
-export type BeaconShape = Schema.Schema.Type<typeof BeaconShape>;
-
-export type CreateBeaconProps = CreateShapeProps<BeaconShape>;
-
-export const createBeacon = (props: CreateBeaconProps) =>
-  createShape<BeaconShape>({ type: 'beacon', size: { width: 64, height: 64 }, ...props });
+import { type BeaconShape } from './beacon-def';
 
 export const BeaconComponent = ({ shape }: ShapeComponentProps<BeaconShape>) => {
   const { runtime } = useComputeNodeState(shape);
@@ -41,15 +26,3 @@ export const BeaconComponent = ({ shape }: ShapeComponentProps<BeaconShape>) =>
     </div>
   );
 };
-
-export const beaconShape: ShapeDef<BeaconShape> = {
-  type: 'beacon',
-  name: 'Beacon',
-  icon: 'ph--sun--regular',
-  component: BeaconComponent,
-  createShape: createBeacon,
-  getAnchors: (shape) =>
-    createAnchorMap(shape, {
-      [createAnchorId('input')]: { x: -1, y: 0 },
-    }),
-};

package/src/shapes/Chat.tsx

@@ -2,35 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React, { useRef } from 'react';
 
 import { DEFAULT_OUTPUT } from '@dxos/conductor';
 import {
   type ShapeComponentProps,
-  type ShapeDef,
   TextBox,
   type TextBoxControl,
   type TextBoxProps,
 } from '@dxos/react-ui-canvas-editor';
-import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks';
+import { type ChatShape } from './chat-def';
 import { Box } from './common';
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
-
-//
-// Data
-//
-
-export const ChatShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('chat'),
-  }),
-);
-
-export type ChatShape = Schema.Schema.Type<typeof ChatShape>;
 
 //
 // Component
@@ -56,22 +40,3 @@ export const TextInputComponent = ({ shape, title, ...props }: TextInputComponen
     </Box>
   );
 };
-
-//
-// Defs
-//
-
-export type CreateChatProps = CreateShapeProps<ChatShape>;
-
-export const createChat = (props: CreateChatProps) =>
-  createShape<ChatShape>({ type: 'chat', size: { width: 256, height: 128 }, ...props });
-
-export const chatShape: ShapeDef<ChatShape> = {
-  type: 'chat',
-  name: 'Chat',
-  icon: 'ph--textbox--regular',
-  component: (props) => <TextInputComponent {...props} title={'Prompt'} placeholder={'Message'} />,
-  createShape: createChat,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
-  resizable: true,
-};

package/src/shapes/Constant.tsx

@@ -2,38 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React, { useCallback, useRef, useState } from 'react';
 
 import { ComputeValueType } from '@dxos/conductor';
 import { Input } from '@dxos/react-ui';
 import {
   type ShapeComponentProps,
-  type ShapeDef,
   TextBox,
   type TextBoxControl,
   type TextBoxProps,
 } from '@dxos/react-ui-canvas-editor';
-import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
 import { safeParseJson } from '@dxos/util';
 
 import { useComputeNodeState } from '../hooks';
 import { Box, TypeSelect } from './common';
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
-
-//
-// Data
-//
-
-export const ConstantShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('constant'),
-    value: Schema.optional(Schema.Any),
-  }),
-);
-
-export type ConstantShape = Schema.Schema.Type<typeof ConstantShape>;
+import { type ConstantShape } from './constant-def';
 
 //
 // Component
@@ -104,22 +87,3 @@ export const ConstantComponent = ({ shape, title, chat, ...props }: ConstantComp
     </Box>
   );
 };
-
-//
-// Defs
-//
-
-export type CreateConstantProps = CreateShapeProps<ConstantShape>;
-
-export const createConstant = (props: CreateConstantProps) =>
-  createShape<ConstantShape>({ type: 'constant', size: { width: 192, height: 128 }, ...props });
-
-export const constantShape: ShapeDef<ConstantShape> = {
-  type: 'constant',
-  name: 'Value',
-  icon: 'ph--dots-three-circle--regular',
-  component: (props) => <ConstantComponent {...props} placeholder={'Constant'} />,
-  createShape: createConstant,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
-  resizable: true,
-};

package/src/shapes/Database.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 DatabaseShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('database'),
-  }),
-);
-
-export type DatabaseShape = Schema.Schema.Type<typeof DatabaseShape>;
-
-export type CreateDatabaseProps = CreateShapeProps<DatabaseShape>;
-
-export const createDatabase = (props: CreateDatabaseProps) =>
-  createShape<DatabaseShape>({ type: 'database', size: { width: 128, height: 64 }, ...props });
+import { type DatabaseShape } from './database-def';
 
 export const DatabaseComponent = ({ shape }: ShapeComponentProps<DatabaseShape>) => {
   return <Box shape={shape} />;
 };
-
-export const databaseShape: ShapeDef<DatabaseShape> = {
-  type: 'database',
-  name: 'ECHO',
-  icon: 'ph--database--regular',
-  component: DatabaseComponent,
-  createShape: createDatabase,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
-};

package/src/shapes/Feed.tsx

@@ -2,36 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React, { Fragment } from 'react';
 
-import { DEFAULT_OUTPUT, QueueInput, QueueOutput } from '@dxos/conductor';
+import { DEFAULT_OUTPUT } from '@dxos/conductor';
 import { ScrollArea, type ThemedClassName } 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 { mx } from '@dxos/ui-theme';
 
 import { useComputeNodeState } from '../hooks';
-import { createFunctionAnchors } from './common';
 import { Box, type BoxActionHandler } from './common';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs';
-
-export const FeedShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('queue'),
-  }),
-);
-
-export type FeedShape = Schema.Schema.Type<typeof FeedShape>;
-
-export type CreateFeedProps = CreateShapeProps<FeedShape>;
-
-export const createFeed = (props: CreateFeedProps) =>
-  createShape<FeedShape>({
-    type: 'queue',
-    size: { width: 256, height: 512 },
-    ...props,
-  });
+import { type FeedShape } from './feed-def';
 
 export const FeedComponent = ({ shape }: ShapeComponentProps<FeedShape>) => {
   const { runtime } = useComputeNodeState(shape);
@@ -46,7 +26,7 @@ export const FeedComponent = ({ shape }: ShapeComponentProps<FeedShape>) => {
   return (
     <Box shape={shape} status={`${items.length} items`} onAction={handleAction}>
       <ScrollArea.Root orientation='vertical'>
-        <ScrollArea.Viewport classNames='divide-y divide-separator'>
+        <ScrollArea.Viewport classNames='divide-y divide-subdued-separator'>
           {[...items].map((item, i) => (
             <FeedItem key={i} classNames='p-1 px-2' item={item} />
           ))}
@@ -72,14 +52,3 @@ export const FeedItem = ({ classNames, item }: ThemedClassName<{ item: any }>) =
     </div>
   );
 };
-
-export const feedShape: ShapeDef<FeedShape> = {
-  // Must match the shape's `type` literal ('queue') so the registry resolves it; the registry is keyed by this.
-  type: 'queue',
-  name: 'Feed',
-  icon: 'ph--queue--regular',
-  component: FeedComponent,
-  createShape: createFeed,
-  getAnchors: (shape) => createFunctionAnchors(shape, QueueInput, QueueOutput),
-  resizable: true,
-};

package/src/shapes/Function.tsx

@@ -2,53 +2,32 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React, { useCallback, useRef } from 'react';
 
 import { Script } from '@dxos/compute';
 import { Operation } from '@dxos/compute';
-import { AnyOutput, FunctionInput } from '@dxos/conductor';
 import { Filter, Ref } from '@dxos/echo';
 import { instanceOf as isInstanceOf } from '@dxos/echo/Obj';
 import { parseId } from '@dxos/keys';
 import { useClient } from '@dxos/react-client';
 import {
   type ShapeComponentProps,
-  type ShapeDef,
   TextBox,
   type TextBoxControl,
   type TextBoxProps,
 } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks';
-import { Box, createFunctionAnchors } from './common';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs';
-
-export const FunctionShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('function'),
-  }),
-);
-
-export type FunctionShape = Schema.Schema.Type<typeof FunctionShape>;
-
-export type CreateFunctionProps = CreateShapeProps<FunctionShape>;
-
-export const createFunction = (props: CreateFunctionProps) =>
-  createShape<FunctionShape>({
-    type: 'function',
-    size: { width: 256, height: 192 },
-    ...props,
-  });
+import { Box } from './common';
+import { type FunctionShape } from './function-def';
 
 //
 // Component
 //
 
-type TextInputComponentProps = ShapeComponentProps<FunctionShape> & TextBoxProps & { title?: string };
+type FunctionShapeComponentProps = ShapeComponentProps<FunctionShape> & TextBoxProps & { title?: string };
 
-const TextInputComponent = ({ shape, title, ...props }: TextInputComponentProps) => {
+export const FunctionShapeComponent = ({ shape, title, ...props }: FunctionShapeComponentProps) => {
   const client = useClient();
   const { node, runtime } = useComputeNodeState(shape);
   const inputRef = useRef<TextBoxControl>(null);
@@ -104,16 +83,3 @@ const TextInputComponent = ({ shape, title, ...props }: TextInputComponentProps)
     </Box>
   );
 };
-
-//
-// Defs
-//
-
-export const functionShape: ShapeDef<FunctionShape> = {
-  type: 'function',
-  name: 'Function',
-  icon: 'ph--function--regular',
-  component: TextInputComponent,
-  createShape: createFunction,
-  getAnchors: (shape) => createFunctionAnchors(shape, FunctionInput, AnyOutput),
-};