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

package/src/shapes/Thread.tsx

@@ -2,35 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React, { useEffect, useRef } from 'react';
 
-import { createInputSchema, createOutputSchema } from '@dxos/conductor';
-import { Type } from '@dxos/echo';
 import { ScrollArea, type ThemedClassName } from '@dxos/react-ui';
-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 { mx } from '@dxos/ui-theme';
 
-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 ThreadShape = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('thread'),
-  }),
-);
-
-export type ThreadShape = Schema.Schema.Type<typeof ThreadShape>;
-
-export type CreateThreadProps = CreateShapeProps<ThreadShape>;
-
-export const createThread = (props: CreateThreadProps) =>
-  createShape<ThreadShape>({ type: 'thread', size: { width: 384, height: 384 }, ...props });
+import { Box } from './common';
+import { type ThreadShape } from './thread-def';
 
 export const ThreadComponent = ({ shape }: ShapeComponentProps<ThreadShape>) => {
   const items: any[] = [];
@@ -79,13 +58,3 @@ export const ThreadItem = ({ classNames, item }: ThemedClassName<{ item: any }>)
     </div>
   );
 };
-
-export const threadShape: ShapeDef<ThreadShape> = {
-  type: 'thread',
-  name: 'Thread',
-  icon: 'ph--chats-circle--regular',
-  component: ThreadComponent,
-  createShape: createThread,
-  getAnchors: (shape) => createFunctionAnchors(shape, InputSchema, OutputSchema),
-  resizable: true,
-};

package/src/shapes/Trigger.tsx

@@ -2,54 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
 import React, { useEffect } from 'react';
 
-import { Trigger, TriggerEvent } from '@dxos/compute';
+import { Trigger } from '@dxos/compute';
 import { VoidInput } from '@dxos/conductor';
-import { Filter, Obj, Query, Ref } from '@dxos/echo';
+import { Obj } from '@dxos/echo';
 import { type Mutable } from '@dxos/echo/Obj';
-import { type SpaceId } from '@dxos/keys';
 import { useSpaces } from '@dxos/react-client/echo';
 import { Select, type SelectRootProps } 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 { FunctionBody, createFunctionAnchors, getHeight } from './common';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs';
-
-const TriggerShapeSchema = Schema.extend(
-  ComputeShape,
-  Schema.Struct({
-    type: Schema.Literal('trigger'),
-    functionTrigger: Schema.optional(Ref.Ref(Trigger.Trigger)),
-  }),
-);
-
-// TODO(wittjosiah): Try to clean up this type inference.
-export interface TriggerShape extends ComputeShape {
-  type: 'trigger';
-  functionTrigger?: Ref.Ref<Trigger.Trigger>;
-}
-
-export const TriggerShape: Schema.Schema<TriggerShape> = TriggerShapeSchema as any;
-
-export type CreateTriggerProps = CreateShapeProps<Omit<TriggerShape, 'functionTrigger'>> & {
-  spaceId?: SpaceId;
-  triggerKind?: Trigger.Kind;
-};
-
-export const createTrigger = (props: CreateTriggerProps): TriggerShape => {
-  const functionTrigger = Trigger.make({
-    enabled: true,
-    spec: createTriggerSpec(props),
-  });
-  return createShape<TriggerShape>({
-    type: 'trigger',
-    functionTrigger: Ref.make(functionTrigger),
-    size: { width: 192, height: getHeight(TriggerEvent.EmailEvent) },
-    ...props,
-  });
-};
+import { FunctionBody, getHeight } from './common';
+import { type TriggerShape } from './trigger-def';
+import { createTriggerSpec, getOutputSchema } from './trigger-spec';
 
 export type TriggerComponentProps = ShapeComponentProps<TriggerShape>;
 
@@ -115,41 +80,3 @@ const TriggerKindSelect = ({ value, onValueChange }: Pick<SelectRootProps, 'valu
     </Select.Root>
   );
 };
-
-const createTriggerSpec = (props: { triggerKind?: Trigger.Kind; spaceId?: SpaceId }): Trigger.Spec => {
-  const kind = props.triggerKind ?? 'email';
-  switch (kind) {
-    case 'timer':
-      return Trigger.specTimer('*/10 * * * * *');
-    case 'webhook':
-      return Trigger.specWebhook({ method: 'POST' });
-    case 'subscription':
-      return Trigger.specSubscription(Query.select(Filter.nothing()));
-    case 'email':
-      return Trigger.specEmail();
-    case 'feed': {
-      return { kind: 'feed' } satisfies Trigger.FeedSpec;
-    }
-  }
-};
-
-const getOutputSchema = (kind: Trigger.Kind) => {
-  const kindToSchema: Record<Trigger.Kind, Schema.Schema<any>> = {
-    ['email']: TriggerEvent.EmailEvent,
-    ['subscription']: TriggerEvent.SubscriptionEvent,
-    ['timer']: TriggerEvent.TimerEvent,
-    ['webhook']: TriggerEvent.WebhookEvent,
-    ['feed']: TriggerEvent.FeedEvent,
-  };
-  return kindToSchema[kind];
-};
-
-export const triggerShape: ShapeDef<TriggerShape> = {
-  type: 'trigger',
-  name: 'Trigger',
-  icon: 'ph--lightning--regular',
-  component: TriggerComponent,
-  createShape: createTrigger,
-  getAnchors: (shape) =>
-    createFunctionAnchors(shape, VoidInput, getOutputSchema(shape.functionTrigger?.target?.spec?.kind ?? 'email')),
-};

package/src/shapes/append-def.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { AppendInput } from '@dxos/conductor';
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { AppendComponent } from './Append';
+import { createFunctionAnchors, getHeight } from './common';
+import { ComputeShape, type CreateShapeProps, createShape } from './defs';
+
+// Kept out of `Append.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+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,
+  });
+
+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-def.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { ReducerInput, ReducerOutput } from '@dxos/conductor';
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { ReducerComponent } from './Array';
+import { createFunctionAnchors, getHeight } from './common';
+import { ComputeShape, type CreateShapeProps, createShape } from './defs';
+
+// Kept out of `Array.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+//
+// Data
+//
+
+export const ReducerShape = Schema.extend(
+  ComputeShape,
+  Schema.Struct({
+    type: Schema.Literal('reducer'),
+  }),
+);
+
+export type ReducerShape = Schema.Schema.Type<typeof ReducerShape>;
+
+//
+// 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: ReducerComponent,
+  createShape: createReducer,
+  getAnchors: (shape) => createFunctionAnchors(shape, ReducerInput, ReducerOutput),
+};

package/src/shapes/audio-def.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
+
+import { AudioComponent } from './Audio';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
+
+// Kept out of `Audio.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+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 });
+
+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-def.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
+
+import { BeaconComponent } from './Beacon';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
+
+// Kept out of `Beacon.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+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 });
+
+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-def.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React from 'react';
+
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
+
+import { TextInputComponent } from './Chat';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
+
+// Kept out of `Chat.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+//
+// Data
+//
+
+export const ChatShape = Schema.extend(
+  ComputeShape,
+  Schema.Struct({
+    type: Schema.Literal('chat'),
+  }),
+);
+
+export type ChatShape = Schema.Schema.Type<typeof ChatShape>;
+
+//
+// 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/common/Box.tsx

@@ -9,9 +9,6 @@ import { Icon, IconButton, type ThemedClassName } from '@dxos/react-ui';
 import { type CanvasBoard, useEditorContext, useShapeDef } from '@dxos/react-ui-canvas-editor';
 import { mx } from '@dxos/ui-theme';
 
-export const headerHeight = 32;
-export const footerHeight = 32;
-
 export type BoxActionHandler = (action: 'run' | 'open' | 'close') => void;
 
 export type BoxProps = PropsWithChildren<
@@ -32,7 +29,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(
 
     return (
       <div ref={forwardedRef} className='flex flex-col h-full w-full justify-between'>
-        <div className='flex shrink-0 w-full justify-between items-center h-[32px] bg-input-surface'>
+        <div className='flex shrink-0 w-full justify-between items-center h-[32px] dx-input-surface'>
           <Icon icon={icon} classNames='mx-2' />
           <div className='grow text-sm truncate'>{debug ? shape.type : (name ?? shape.text ?? title)}</div>
           <IconButton
@@ -49,7 +46,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(
           />
         </div>
         <div className={mx('flex flex-col h-full grow overflow-hidden', classNames)}>{children}</div>
-        <div className='flex shrink-0 w-full justify-between items-center h-[32px] bg-input-surface'>
+        <div className='flex shrink-0 w-full justify-between items-center h-[32px] dx-input-surface'>
           <div className='grow px-2 text-sm truncate'>{debug ? shape.id : status}</div>
           {openable && (
             <IconButton

package/src/shapes/common/FunctionBody.tsx

@@ -3,18 +3,17 @@
 //
 
 import type * as Schema from 'effect/Schema';
-import * as SchemaAST from 'effect/SchemaAST';
 import React, { type JSX, useRef, useState } from 'react';
 
 import { VoidInput, VoidOutput } from '@dxos/conductor';
 import { useCanvasContext } from '@dxos/react-ui-canvas';
-import { type CanvasBoard, type Polygon } from '@dxos/react-ui-canvas-editor';
-import { createAnchors, getParentShapeElement, rowHeight } from '@dxos/react-ui-canvas-editor';
+import { type CanvasBoard } from '@dxos/react-ui-canvas-editor';
+import { getParentShapeElement, rowHeight } from '@dxos/react-ui-canvas-editor';
 
-import { Box, type BoxProps, footerHeight, headerHeight } from '../common';
-import { createAnchorId, getProperties } from '../defs';
+import { Box, type BoxProps } from '../common';
+import { getProperties } from '../defs';
+import { bodyPadding } from './function-anchors';
 
-const bodyPadding = 8;
 const expandedHeight = 200;
 
 export type FunctionBodyProps = {
@@ -70,7 +69,7 @@ export const FunctionBody = ({
       ref={rootRef}
       shape={shape}
       title={name}
-      classNames='divide-y divide-separator'
+      classNames='divide-y divide-subdued-separator'
       open={open}
       onAction={handleAction}
       {...props}
@@ -106,21 +105,3 @@ export const FunctionBody = ({
     </Box>
   );
 };
-
-export const getHeight = (input: Schema.Schema<any>) => {
-  const properties = SchemaAST.getPropertySignatures(input.ast);
-  return headerHeight + footerHeight + bodyPadding * 2 + properties.length * rowHeight + 2; // Incl. borders.
-};
-
-export const createFunctionAnchors = (
-  shape: Polygon,
-  input: Schema.Schema<any> = VoidInput,
-  output: Schema.Schema<any> = VoidOutput,
-) => {
-  // TODO(burdon): Set type.
-  const inputs = SchemaAST.getPropertySignatures(input.ast).map(({ name }) => createAnchorId('input', name.toString()));
-  const outputs = SchemaAST.getPropertySignatures(output.ast).map(({ name }) =>
-    createAnchorId('output', name.toString()),
-  );
-  return createAnchors({ shape, inputs, outputs, center: { x: 0, y: (headerHeight - footerHeight) / 2 + 1 } });
-};

package/src/shapes/common/box-defs.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// Kept out of `Box.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+export const headerHeight = 32;
+
+export const footerHeight = 32;

package/src/shapes/common/function-anchors.ts

@@ -0,0 +1,37 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
+
+import { VoidInput, VoidOutput } from '@dxos/conductor';
+import { type Polygon } from '@dxos/react-ui-canvas-editor';
+import { createAnchors, rowHeight } from '@dxos/react-ui-canvas-editor';
+
+import { footerHeight, headerHeight } from '../common';
+import { createAnchorId } from '../defs';
+
+// Kept out of `FunctionBody.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+/** Vertical padding inside the function body; the height maths below depends on it. */
+export const bodyPadding = 8;
+
+export const getHeight = (input: Schema.Schema<any>) => {
+  const properties = SchemaAST.getPropertySignatures(input.ast);
+  return headerHeight + footerHeight + bodyPadding * 2 + properties.length * rowHeight + 2; // Incl. borders.
+};
+
+export const createFunctionAnchors = (
+  shape: Polygon,
+  input: Schema.Schema<any> = VoidInput,
+  output: Schema.Schema<any> = VoidOutput,
+) => {
+  // TODO(burdon): Set type.
+  const inputs = SchemaAST.getPropertySignatures(input.ast).map(({ name }) => createAnchorId('input', name.toString()));
+  const outputs = SchemaAST.getPropertySignatures(output.ast).map(({ name }) =>
+    createAnchorId('output', name.toString()),
+  );
+  return createAnchors({ shape, inputs, outputs, center: { x: 0, y: (headerHeight - footerHeight) / 2 + 1 } });
+};

package/src/shapes/common/index.ts

@@ -2,6 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './box-defs';
+export * from './function-anchors';
+
 export * from './Box';
 export * from './FunctionBody';
 export * from './TypeSelect';

package/src/shapes/constant-def.tsx

@@ -0,0 +1,48 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React from 'react';
+
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
+
+import { ConstantComponent } from './Constant';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
+
+// Kept out of `Constant.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+//
+// 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>;
+
+//
+// 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-def.ts

@@ -0,0 +1,37 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
+
+import { DatabaseComponent } from './Database';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
+
+// Kept out of `Database.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+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 });
+
+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-def.ts

@@ -0,0 +1,44 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { QueueInput, QueueOutput } from '@dxos/conductor';
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { createFunctionAnchors } from './common';
+import { ComputeShape, type CreateShapeProps, createShape } from './defs';
+import { FeedComponent } from './Feed';
+
+// Kept out of `Feed.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+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,
+  });
+
+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,
+};