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

package/src/shapes/Table.tsx

@@ -4,12 +4,10 @@
 
 import React from 'react';
 
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
-
-import { Box } from './common/index.ts';
+import { Box, type ComputeNodeViewProps } from './common/index.ts';
 import { type TableShape } from './table-def.ts';
 
-export const TableComponent = ({ shape }: ShapeComponentProps<TableShape>) => {
+export const TableComponent = ({ node: shape }: ComputeNodeViewProps<TableShape>) => {
   // const items = shape.node.items.value;
 
   return <Box shape={shape}></Box>;

package/src/shapes/Template.tsx

@@ -8,24 +8,25 @@ import React, { useRef } from 'react';
 import { ComputeValueType, getTemplateInputSchema } from '@dxos/conductor';
 import * as JsonSchema from '@dxos/echo/JsonSchema';
 import { invariant } from '@dxos/invariant';
+
+import { useComputeNodeState } from '../hooks/index.ts';
 import {
-  type ShapeComponentProps,
+  Box,
+  type ComputeNodeViewProps,
   TextBox,
   type TextBoxControl,
   type TextBoxProps,
-} from '@dxos/react-ui-canvas-editor';
-
-import { useComputeNodeState } from '../hooks/index.ts';
-import { Box, TypeSelect } from './common/index.ts';
+  TypeSelect,
+} from './common/index.ts';
 import { type TemplateShape } from './template-def.ts';
 
 //
 // Component
 //
 
-type TextInputComponentProps = ShapeComponentProps<TemplateShape> & TextBoxProps & { title?: string };
+type TextInputComponentProps = ComputeNodeViewProps<TemplateShape> & Pick<TextBoxProps, 'placeholder'>;
 
-const TextInputComponent = ({ shape, title, ...props }: TextInputComponentProps) => {
+const TextInputComponent = ({ node: shape, placeholder }: TextInputComponentProps) => {
   const { node } = useComputeNodeState(shape);
   const inputRef = useRef<TextBoxControl>(null);
 
@@ -53,7 +54,7 @@ const TextInputComponent = ({ shape, title, ...props }: TextInputComponentProps)
       status={<TypeSelect value={node.valueType ?? 'string'} onValueChange={handleTypeChange} />}
     >
       <TextBox
-        {...props}
+        placeholder={placeholder}
         ref={inputRef}
         value={node.value}
         language={node.valueType === 'object' ? 'json' : undefined}
@@ -64,6 +65,6 @@ const TextInputComponent = ({ shape, title, ...props }: TextInputComponentProps)
   );
 };
 
-export const TemplateComponent = (props: ShapeComponentProps<TemplateShape>) => (
+export const TemplateComponent = (props: ComputeNodeViewProps<TemplateShape>) => (
   <TextInputComponent {...props} placeholder={'Prompt'} />
 );

package/src/shapes/Text.tsx

@@ -5,13 +5,12 @@
 import React from 'react';
 
 import { DEFAULT_INPUT } from '@dxos/conductor';
-import { type ShapeComponentProps, TextBox } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks/index.ts';
-import { Box } from './common/index.ts';
+import { Box, type ComputeNodeViewProps, TextBox } from './common/index.ts';
 import { type TextShape } from './text-def.ts';
 
-export const TextComponent = ({ shape }: ShapeComponentProps<TextShape>) => {
+export const TextComponent = ({ node: shape }: ComputeNodeViewProps<TextShape>) => {
   const { runtime } = useComputeNodeState(shape);
   const input = runtime.inputs[DEFAULT_INPUT];
   const value = input?.type === 'executed' ? input.value : 0;

package/src/shapes/TextToImage.tsx

@@ -4,11 +4,9 @@
 
 import React from 'react';
 
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
-
-import { Box } from './common/index.ts';
+import { Box, type ComputeNodeViewProps } from './common/index.ts';
 import { type TextToImageShape } from './text-to-image-def.ts';
 
-export const TextToImageComponent = ({ shape }: ShapeComponentProps<TextToImageShape>) => {
+export const TextToImageComponent = ({ node: shape }: ComputeNodeViewProps<TextToImageShape>) => {
   return <Box shape={shape} />;
 };

package/src/shapes/Thread.tsx

@@ -4,15 +4,14 @@
 
 import React, { useEffect, useRef } from 'react';
 
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 import * as ScrollArea from '@dxos/react-ui/ScrollArea';
 import type * as Util from '@dxos/react-ui/Util';
 import { mx } from '@dxos/ui-theme';
 
-import { Box } from './common/index.ts';
+import { Box, type ComputeNodeViewProps } from './common/index.ts';
 import { type ThreadShape } from './thread-def.ts';
 
-export const ThreadComponent = ({ shape }: ShapeComponentProps<ThreadShape>) => {
+export const ThreadComponent = ({ node: shape }: ComputeNodeViewProps<ThreadShape>) => {
   const items: any[] = [];
   const scrollRef = useRef<HTMLDivElement>(null);
   useEffect(() => {

package/src/shapes/Trigger.tsx

@@ -9,16 +9,15 @@ import { VoidInput } from '@dxos/conductor';
 import { Obj } from '@dxos/echo';
 import { useResolveRef } from '@dxos/echo-react';
 import { useSpaces } from '@dxos/react-client/echo';
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 import * as Select from '@dxos/react-ui/Select';
 
-import { FunctionBody, getHeight } from './common/index.ts';
+import { type ComputeNodeViewProps, FunctionBody, getHeight } from './common/index.ts';
 import { type TriggerShape } from './trigger-def.ts';
 import { createTriggerSpec, getOutputSchema } from './trigger-spec.ts';
 
-export type TriggerComponentProps = ShapeComponentProps<TriggerShape>;
+export type TriggerComponentProps = ComputeNodeViewProps<TriggerShape>;
 
-export const TriggerComponent = ({ shape }: TriggerComponentProps) => {
+export const TriggerComponent = ({ node: shape }: TriggerComponentProps) => {
   const [space] = useSpaces();
   const functionTrigger = useResolveRef(shape.functionTrigger);
 

package/src/shapes/append-def.ts

@@ -6,11 +6,10 @@ import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
 
 import { AppendInput } from '@dxos/conductor';
-import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
 
 import { AppendComponent } from './Append.tsx';
-import { createFunctionAnchors, getHeight } from './common/index.ts';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs.ts';
+import { createFunctionPorts, defineComputeNode, getHeight } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createShape, withZ } from './defs.ts';
 
 // 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.
@@ -32,11 +31,13 @@ export const createAppend = (props: CreateAppendProps) =>
     ...props,
   });
 
-export const appendShape: ShapeDef<AppendShape> = {
+export const appendNodeDef = defineComputeNode<AppendShape>({
   type: 'append',
   name: 'Append',
   icon: 'ph--list-plus--regular',
+  group: 'Transform',
+  schema: withZ(AppendShape),
   component: AppendComponent,
-  createShape: createAppend,
-  getAnchors: (shape) => createFunctionAnchors(shape, AppendInput),
-};
+  create: createAppend,
+  ports: (shape) => createFunctionPorts(shape.size, AppendInput),
+});

package/src/shapes/array-def.ts

@@ -6,11 +6,10 @@ import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
 
 import { ReducerInput, ReducerOutput } from '@dxos/conductor';
-import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
 
 import { ReducerComponent } from './Array.tsx';
-import { createFunctionAnchors, getHeight } from './common/index.ts';
-import { ComputeShape, type CreateShapeProps, createShape } from './defs.ts';
+import { createFunctionPorts, defineComputeNode, getHeight } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createShape, withZ } from './defs.ts';
 
 // 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.
@@ -34,7 +33,6 @@ export type ReducerShape = Schema.Schema.Type<typeof ReducerShape>;
 export type CreateReduceProps = CreateShapeProps<ReducerShape> & { reduce?: string };
 
 export const createReducer = ({
-  id,
   size = { width: 192, height: getHeight(ReducerInput) },
   ...rest
 }: CreateReduceProps): ReducerShape =>
@@ -44,11 +42,13 @@ export const createReducer = ({
     ...rest,
   });
 
-export const reducerShape: ShapeDef<ReducerShape> = {
+export const reducerNodeDef = defineComputeNode<ReducerShape>({
   type: 'reducer',
   name: 'Reducer',
   icon: 'ph--repeat--regular',
+  group: 'Operations',
+  schema: withZ(ReducerShape),
   component: ReducerComponent,
-  createShape: createReducer,
-  getAnchors: (shape) => createFunctionAnchors(shape, ReducerInput, ReducerOutput),
-};
+  create: createReducer,
+  ports: (shape) => createFunctionPorts(shape.size, ReducerInput, ReducerOutput),
+});

package/src/shapes/audio-def.ts

@@ -5,10 +5,9 @@
 import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
 
-import { type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
-
 import { AudioComponent } from './Audio.tsx';
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs.ts';
+import { createPorts, defineComputeNode } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape, withZ } from './defs.ts';
 
 // 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.
@@ -26,11 +25,13 @@ 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> = {
+export const audioNodeDef = defineComputeNode<AudioShape>({
   type: 'audio',
   name: 'Audio',
   icon: 'ph--microphone--regular',
+  group: 'Inputs',
+  schema: withZ(AudioShape),
   component: AudioComponent,
-  createShape: createAudio,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
-};
+  create: createAudio,
+  ports: (shape) => createPorts(shape.size, { [createAnchorId('output')]: { x: 1, y: 0 } }),
+});

package/src/shapes/beacon-def.ts

@@ -5,10 +5,9 @@
 import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
 
-import { type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
-
 import { BeaconComponent } from './Beacon.tsx';
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs.ts';
+import { createPorts, defineComputeNode } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape, withZ } from './defs.ts';
 
 // 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.
@@ -26,14 +25,16 @@ 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> = {
+export const beaconNodeDef = defineComputeNode<BeaconShape>({
   type: 'beacon',
   name: 'Beacon',
   icon: 'ph--sun--regular',
+  group: 'Outputs',
+  schema: withZ(BeaconShape),
   component: BeaconComponent,
-  createShape: createBeacon,
-  getAnchors: (shape) =>
-    createAnchorMap(shape, {
+  create: createBeacon,
+  ports: (shape) =>
+    createPorts(shape.size, {
       [createAnchorId('input')]: { x: -1, y: 0 },
     }),
-};
+});

package/src/shapes/chat-def.tsx

@@ -6,11 +6,9 @@ import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
 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.tsx';
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs.ts';
+import { createPorts, defineComputeNode } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape, withZ } from './defs.ts';
 
 // 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.
@@ -36,12 +34,14 @@ 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> = {
+export const chatNodeDef = defineComputeNode<ChatShape>({
   type: 'chat',
   name: 'Chat',
   icon: 'ph--textbox--regular',
+  group: 'Inputs',
+  schema: withZ(ChatShape),
   component: (props) => <TextInputComponent {...props} title={'Prompt'} placeholder={'Message'} />,
-  createShape: createChat,
-  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
+  create: createChat,
+  ports: (shape) => createPorts(shape.size, { [createAnchorId('output')]: { x: 1, y: 0 } }),
   resizable: true,
-};
+});

package/src/shapes/common/Box.tsx

@@ -11,7 +11,7 @@ import * as Icon from '@dxos/react-ui/Icon';
 import type * as Util from '@dxos/react-ui/Util';
 import { mx } from '@dxos/ui-theme';
 
-import { useComputeContext } from '../../hooks/compute-context.ts';
+import { useComputeContext, useComputeNodeDef } from '../../hooks/compute-context.ts';
 import { type ComputeShape } from '../defs.ts';
 
 export type BoxActionHandler = (action: 'open' | 'close') => void;
@@ -29,9 +29,12 @@ export type BoxProps = PropsWithChildren<
 export const Box = forwardRef<HTMLDivElement, BoxProps>(
   ({ children, classNames, shape, title, status, open, onAction }, forwardedRef) => {
     invariant(shape.type);
-    // The chrome comes from the host's registry, whichever surface the shape is mounted in.
-    const { controller, registry, debug = false } = useComputeContext();
-    const { icon, name, openable } = registry?.getShapeDef(shape.type) ?? { icon: 'ph--circle-dashed--regular' };
+    // The chrome comes from the node registry the scene renders with.
+    const { controller, debug = false } = useComputeContext();
+    const def = useComputeNodeDef();
+    const icon = def?.icon ?? 'ph--circle-dashed--regular';
+    const name = def?.name;
+    const openable = def?.openable;
 
     // Running a node propagates to everything downstream of it, which is what the button means; a shape
     // with no compute node behind it has nothing to run, so it does not get one.

package/src/shapes/common/FunctionBody.tsx

@@ -3,15 +3,15 @@
 //
 
 import type * as Schema from 'effect/Schema';
-import React, { type JSX, useRef, useState } from 'react';
+import React, { type JSX, useState } from 'react';
 
 import { VoidInput, VoidOutput } from '@dxos/conductor';
-import { getParentShapeElement, rowHeight } from '@dxos/react-ui-canvas-editor';
+import { mx } from '@dxos/ui-theme';
 
 import { useComputeContext } from '../../hooks/compute-context.ts';
 import { Box, type BoxProps } from '../common/index.ts';
 import { type ComputeShape, getProperties } from '../defs.ts';
-import { bodyPadding } from './function-anchors.ts';
+import { rowHeight } from './ports.ts';
 
 const expandedHeight = 200;
 
@@ -32,23 +32,13 @@ export const FunctionBody = ({
   outputSchema = VoidOutput,
   ...props
 }: FunctionBodyProps) => {
-  // Opening grows the shape: through the host's `resize` when it offers one (the scene engine, where size
-  // is model state), else by stretching the editor's frame element as the canvas editor always did.
+  // Opening grows the shape through the host's `resize`, since its size is model state.
   const { resize } = useComputeContext();
-  const rootRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
 
   const handleAction: BoxProps['onAction'] = (action) => {
     const opening = action === 'open';
-    if (resize) {
-      resize(shape.id, opening ? expandedHeight : -expandedHeight);
-    } else if (rootRef.current) {
-      const element = getParentShapeElement(rootRef.current, shape.id);
-      if (element) {
-        // The layout height is already in canvas units, whatever the zoom.
-        element.style.height = opening ? `${element.offsetHeight + expandedHeight}px` : '';
-      }
-    }
+    resize?.(shape.id, opening ? expandedHeight : -expandedHeight);
     setOpen(opening);
   };
 
@@ -59,7 +49,6 @@ export const FunctionBody = ({
 
   return (
     <Box
-      ref={rootRef}
       shape={shape}
       title={name}
       classNames='divide-y divide-separator-subtle'
@@ -67,28 +56,26 @@ export const FunctionBody = ({
       onAction={handleAction}
       {...props}
     >
-      <div
-        className={`grid grid-cols-${columnCount} items-center`}
-        style={{ paddingTop: bodyPadding, paddingBottom: bodyPadding }}
-      >
+      {/* Each column's rows are centred in the body, as the ports beside them are (`createFunctionPorts`). */}
+      <div className={mx(`grid grid-cols-${columnCount}`, !open && 'grow')}>
         {(inputs?.length ?? 0) > 0 && (
-          <div className='flex flex-col'>
+          <div className='flex flex-col justify-center'>
             {inputs?.map(({ name }) => (
-              <div key={name} className='px-2 truncate text-sm font-mono items-center' style={{ height: rowHeight }}>
-                {name}
+              <div key={name} className='flex items-center px-2 text-sm font-mono' style={{ height: rowHeight }}>
+                <span className='truncate'>{name}</span>
               </div>
             ))}
           </div>
         )}
         {(outputs?.length ?? 0) > 0 && (
-          <div className='flex flex-col'>
+          <div className='flex flex-col justify-center'>
             {outputs?.map(({ name }) => (
               <div
                 key={name}
-                className='px-2 truncate text-sm font-mono items-center text-right'
+                className='flex items-center justify-end px-2 text-sm font-mono'
                 style={{ height: rowHeight }}
               >
-                {name}
+                <span className='truncate'>{name}</span>
               </div>
             ))}
           </div>

package/src/shapes/common/TextBox.tsx

@@ -0,0 +1,137 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { json } from '@codemirror/lang-json';
+import { Prec } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+
+import { useTextEditor } from '@dxos/react-ui-editor';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import type * as Util from '@dxos/react-ui/Util';
+import {
+  type BasicExtensionsOptions,
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
+
+// An always-editable field, since the engine's `TextPart` edits only an opened part and focuses on mount.
+
+export interface TextBoxControl {
+  setText(text: string): void;
+  focus(): void;
+}
+
+export type TextBoxProps = Util.ThemedClassName<
+  {
+    value?: string;
+    centered?: boolean;
+    onBlur?: (value: string) => void;
+    onEnter?: (value: string) => void;
+    onCancel?: () => void;
+    language?: 'json' | 'markdown';
+  } & Pick<BasicExtensionsOptions, 'placeholder'>
+>;
+
+export const TextBox = forwardRef<TextBoxControl, TextBoxProps>(
+  ({ classNames, value = '', centered, onEnter, onCancel, language, ...rest }, forwardedRef) => {
+    const themeMode = Hooks.useThemeMode();
+    const modified = useRef(false);
+    const doc = useRef(value);
+    useEffect(() => {
+      modified.current = false;
+      doc.current = value;
+    }, [value]);
+
+    const { parentRef, view, focusAttributes } = useTextEditor(() => {
+      return {
+        id: 'text',
+        initialValue: value,
+        extensions: [
+          createBasicExtensions({ lineWrapping: !centered, ...rest }),
+          ...(language === 'json'
+            ? [json()]
+            : language === 'markdown'
+              ? [createMarkdownExtensions(), decorateMarkdown()]
+              : []),
+          createThemeExtensions({
+            themeMode,
+            syntaxHighlighting: !!language,
+            slots: {
+              editor: { className: 'h-full w-full [&>.cm-scroller]:scrollbar-none p-2' },
+              content: { className: mx(centered && 'text-center') },
+            },
+          }),
+          // Detect changes.
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+              modified.current = doc.current !== update.state.doc.toString();
+            }
+          }),
+          // TODO(burdon): Only fire if modified.
+          EditorView.focusChangeEffect.of((state, focusing) => {
+            if (!focusing && modified.current) {
+              onEnter?.(state.doc.toString());
+            }
+
+            return null;
+          }),
+          Prec.highest(
+            keymap.of([
+              {
+                key: 'Enter',
+                preventDefault: true,
+                run: (view) => {
+                  onEnter?.(view.state.doc.toString());
+                  modified.current = false;
+                  return true;
+                },
+              },
+              {
+                key: 'Shift-Enter',
+                run: (view) => {
+                  // The new line is an edit like any other, so leaving the field still commits it.
+                  view.dispatch(view.state.replaceSelection('\n'));
+                  return true;
+                },
+              },
+              {
+                key: 'Escape',
+                run: () => {
+                  onCancel?.();
+                  modified.current = false;
+                  return true;
+                },
+              },
+            ]),
+          ),
+        ],
+      };
+    }, [value, language]);
+
+    // External control.
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        setText: (text: string) => {
+          view?.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: text } });
+        },
+        focus: () => {
+          view?.focus();
+        },
+      }),
+      [view],
+    );
+
+    // Scroll to bottom.
+    useEffect(() => {
+      view?.dispatch({ selection: { anchor: view.state.doc.length } });
+    }, [view]);
+
+    return <div ref={parentRef} {...focusAttributes} className={mx('dx-fill overflow-hidden', classNames)} />;
+  },
+);

package/src/shapes/common/index.ts

@@ -3,8 +3,10 @@
 //
 
 export * from './box-defs.ts';
-export * from './function-anchors.ts';
+export * from './node-def.tsx';
+export * from './ports.ts';
 
 export * from './Box.tsx';
 export * from './FunctionBody.tsx';
+export * from './TextBox.tsx';
 export * from './TypeSelect.tsx';