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

package/src/shapes/function-def.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { AnyOutput, FunctionInput } from '@dxos/conductor';
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { createFunctionAnchors } from './common';
+import { ComputeShape, type CreateShapeProps, createShape } from './defs';
+import { FunctionShapeComponent } from './Function';
+
+// Kept out of `Function.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 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,
+  });
+
+//
+// Defs
+//
+
+export const functionShape: ShapeDef<FunctionShape> = {
+  type: 'function',
+  name: 'Function',
+  icon: 'ph--function--regular',
+  component: FunctionShapeComponent,
+  createShape: createFunction,
+  getAnchors: (shape) => createFunctionAnchors(shape, FunctionInput, AnyOutput),
+};

package/src/shapes/gpt-def.ts

@@ -0,0 +1,43 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { GptInput, GptOutput } from '@dxos/conductor';
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { createFunctionAnchors, getHeight } from './common';
+import { ComputeShape, type CreateShapeProps, createShape } from './defs';
+import { GptComponent } from './Gpt';
+
+// Kept out of `Gpt.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 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,
+  });
+
+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/gpt-realtime-def.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { createFunctionAnchors } from './common';
+import { ComputeShape, type CreateShapeProps, createShape } from './defs';
+import { GptRealtimeComponent } from './GptRealtime';
+
+// Kept out of `GptRealtime.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 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 });
+
+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,
+};

package/src/shapes/index.ts

@@ -5,6 +5,31 @@
 export * from './common';
 export * from './defs';
 
+// Shape schemas, factories and defs, kept out of the component modules so those can fast-refresh.
+export * from './append-def';
+export * from './array-def';
+export * from './audio-def';
+export * from './beacon-def';
+export * from './chat-def';
+export * from './constant-def';
+export * from './database-def';
+export * from './feed-def';
+export * from './function-def';
+export * from './gpt-def';
+export * from './gpt-realtime-def';
+export * from './json-def';
+export * from './logic-def';
+export * from './rng-def';
+export * from './scope-def';
+export * from './surface-def';
+export * from './switch-def';
+export * from './table-def';
+export * from './template-def';
+export * from './text-def';
+export * from './text-to-image-def';
+export * from './thread-def';
+export * from './trigger-def';
+
 export * from './Array';
 export * from './Append';
 export * from './Audio';

package/src/shapes/json-def.ts

@@ -0,0 +1,80 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { DefaultOutput, JsonTransformInput } from '@dxos/conductor';
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
+
+import { createFunctionAnchors, getHeight } from './common';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
+import { JsonComponent, JsonTransformComponent } from './Json';
+
+// Kept out of `Json.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 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>;
+
+//
+// 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: JsonComponent,
+  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: JsonTransformComponent,
+  createShape: createJsonTransform,
+  getAnchors: (shape) => createFunctionAnchors(shape, JsonTransformInput, DefaultOutput),
+  resizable: true,
+};

package/src/shapes/logic-def.ts

@@ -0,0 +1,69 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { IfElseInput, IfElseOutput, IfInput, IfOutput } from '@dxos/conductor';
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { createFunctionAnchors, getHeight } from './common';
+import { ComputeShape, type CreateShapeProps, createShape } from './defs';
+import { IfComponent, IfElseComponent } from './Logic';
+
+// Kept out of `Logic.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 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>;
+
+//
+// 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: IfComponent,
+  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: IfElseComponent,
+  createShape: createIfElse,
+  getAnchors: (shape) => createFunctionAnchors(shape, IfElseInput, IfElseOutput),
+};

package/src/shapes/rng-def.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
+
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
+import { RandomComponent } from './RNG';
+
+// Kept out of `RNG.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 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,
+  });
+
+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-def.ts

@@ -0,0 +1,41 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
+
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
+import { ScopeComponent } from './Scope';
+
+// Kept out of `Scope.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 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,
+  });
+
+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-def.ts

@@ -0,0 +1,42 @@
+//
+// 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 { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
+import { SurfaceComponent } from './Surface';
+
+// Kept out of `Surface.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 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,
+  });
+
+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-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 { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
+import { SwitchComponent } from './Switch';
+
+// Kept out of `Switch.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 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 });
+
+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-def.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { createInputSchema, createOutputSchema } from '@dxos/conductor';
+import { Type } from '@dxos/echo';
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { Message } from '@dxos/types';
+
+import { createFunctionAnchors } from './common';
+import { ComputeShape, type CreateShapeProps, createShape } from './defs';
+import { TableComponent } from './Table';
+
+// Kept out of `Table.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.
+
+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 });
+
+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-def.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { ComputeValueType, TemplateOutput, VoidInput } from '@dxos/conductor';
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { createFunctionAnchors } from './common';
+import { ComputeShape, type CreateShapeProps, createShape } from './defs';
+import { TemplateComponent } from './Template';
+
+// Kept out of `Template.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 TemplateShape = Schema.extend(
+  ComputeShape,
+  Schema.Struct({
+    type: Schema.Literal('template'),
+    valueType: Schema.optional(ComputeValueType),
+  }),
+);
+
+export type TemplateShape = Schema.Schema.Type<typeof TemplateShape>;
+
+//
+// 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: TemplateComponent,
+  createShape: createTemplate,
+  getAnchors: (shape) => createFunctionAnchors(shape, VoidInput, TemplateOutput),
+  resizable: true,
+};

package/src/shapes/text-def.ts

@@ -0,0 +1,38 @@
+//
+// 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 { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
+import { TextComponent } from './Text';
+
+// Kept out of `Text.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 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 });
+
+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/text-to-image-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 { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
+import { TextToImageComponent } from './TextToImage';
+
+// Kept out of `TextToImage.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 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 });
+
+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 } }),
+};