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

package/src/schema.test.ts

@@ -7,26 +7,21 @@ import { describe, test } from 'vitest';
 
 import * as GraphModel from '@dxos/graph/GraphModel';
 import * as GraphNode from '@dxos/graph/GraphNode';
-import {
-  CanvasBoard,
-  CanvasGraphModel,
-  Polygon,
-  createEllipse,
-  createPath,
-  createRectangle,
-  isPath,
-  isPolygon,
-} from '@dxos/react-ui-canvas-editor';
 
-import { ComputeShape, createFunction, createSwitch } from './shapes/index.ts';
+import { ComputeShape, createReducer, createSwitch } from './shapes/index.ts';
+import { CanvasBoard, CanvasGraphModel } from './types/index.ts';
 
 describe('compute', () => {
+  test('a reducer keeps the id it is created with', ({ expect }) => {
+    const reducer = createReducer({ id: 'reducer-1', center: { x: 0, y: 0 } });
+    expect(reducer.id).toBe('reducer-1');
+  });
+
   test('model', ({ expect }) => {
     const model = CanvasGraphModel.create<ComputeShape>();
     const node = createSwitch({ id: 'x', center: { x: 0, y: 0 }, size: { width: 80, height: 80 } });
     console.log(JSON.stringify(node, null, 2));
     expect(Schema.is(ComputeShape)(node)).toBe(true);
-    expect(Schema.is(Polygon)(node)).toBe(true);
     expect(Schema.is(CanvasBoard.Shape)(node)).toBe(true);
     expect(Schema.is(GraphNode.GraphNode)(node)).toBe(true);
 
@@ -37,27 +32,3 @@ describe('compute', () => {
     console.log(JSON.stringify(model, null, 2));
   });
 });
-
-describe('schema', () => {
-  test('basic types', ({ expect }) => {
-    const shapes: CanvasBoard.Shape[] = [];
-    shapes.push(createRectangle({ id: 'shape-1', center: { x: 0, y: 0 }, size: { width: 80, height: 80 } }));
-    shapes.push(createEllipse({ id: 'shape-2', center: { x: 0, y: 0 }, size: { width: 80, height: 80 } }));
-    shapes.push(createFunction({ id: 'shape-3', center: { x: 0, y: 0 } }));
-    shapes.push(
-      createPath({
-        id: 'shape-4',
-        points: [
-          { x: 0, y: 0 },
-          { x: 0, y: 0 },
-        ],
-      }),
-    );
-
-    const polygons = shapes.filter((shape) => isPolygon(shape)).map((shape) => shape.center);
-    expect(polygons).to.have.length(3);
-
-    const paths = shapes.filter((shape) => isPath(shape)).map((shape) => shape.path);
-    expect(paths).to.have.length(1);
-  });
-});

package/src/shapes/Append.tsx

@@ -5,11 +5,10 @@
 import React from 'react';
 
 import { AppendInput } from '@dxos/conductor';
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 
 import { type AppendShape } from './append-def.ts';
-import { FunctionBody } from './common/index.ts';
+import { type ComputeNodeViewProps, FunctionBody } from './common/index.ts';
 
-export const AppendComponent = ({ shape }: ShapeComponentProps<AppendShape>) => {
+export const AppendComponent = ({ node: shape }: ComputeNodeViewProps<AppendShape>) => {
   return <FunctionBody shape={shape} inputSchema={AppendInput} />;
 };

package/src/shapes/Array.tsx

@@ -5,17 +5,16 @@
 import React from 'react';
 
 import { ReducerInput, ReducerOutput } from '@dxos/conductor';
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 
 import { type ReducerShape } from './array-def.ts';
-import { FunctionBody } from './common/index.ts';
+import { type ComputeNodeViewProps, FunctionBody } from './common/index.ts';
 
 //
 // Components
 //
 
-export type ReducerComponentProps = ShapeComponentProps<ReducerShape>;
+export type ReducerComponentProps = ComputeNodeViewProps<ReducerShape>;
 
-export const ReducerComponent = ({ shape }: ReducerComponentProps) => {
+export const ReducerComponent = ({ node: shape }: ReducerComponentProps) => {
   return <FunctionBody shape={shape} inputSchema={ReducerInput} outputSchema={ReducerOutput} />;
 };

package/src/shapes/Audio.tsx

@@ -5,13 +5,13 @@
 import React, { useEffect, useState } from 'react';
 
 import { DEFAULT_OUTPUT } from '@dxos/conductor';
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 import * as Icon from '@dxos/react-ui/Icon';
 
 import { useComputeNodeState } from '../hooks/index.ts';
 import { type AudioShape } from './audio-def.ts';
+import { type ComputeNodeViewProps } from './common/index.ts';
 
-export const AudioComponent = ({ shape }: ShapeComponentProps<AudioShape>) => {
+export const AudioComponent = ({ node: shape }: ComputeNodeViewProps<AudioShape>) => {
   const { runtime } = useComputeNodeState(shape);
   const [active, setActive] = useState(false);
   useEffect(() => {

package/src/shapes/Beacon.tsx

@@ -5,13 +5,13 @@
 import React from 'react';
 
 import { DEFAULT_INPUT, isTruthy } from '@dxos/conductor';
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 import * as Icon from '@dxos/react-ui/Icon';
 
 import { useComputeNodeState } from '../hooks/index.ts';
 import { type BeaconShape } from './beacon-def.ts';
+import { type ComputeNodeViewProps } from './common/index.ts';
 
-export const BeaconComponent = ({ shape }: ShapeComponentProps<BeaconShape>) => {
+export const BeaconComponent = ({ node: shape }: ComputeNodeViewProps<BeaconShape>) => {
   const { runtime } = useComputeNodeState(shape);
   const input = runtime.inputs[DEFAULT_INPUT];
   const value = input?.type === 'executed' ? input.value : false;

package/src/shapes/Boolean.tsx

@@ -6,10 +6,10 @@ import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
 import React, { type FC } from 'react';
 
-import { type ShapeDef, getAnchorPoints } from '@dxos/react-ui-canvas-editor';
-import { createAnchors } from '@dxos/react-ui-canvas-editor';
+import { type NodeDef } from '@dxos/react-ui-canvas/scene';
 
-import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs.ts';
+import { createRowPorts, defineComputeNode, getRowPoints } from './common/index.ts';
+import { ComputeShape, type CreateShapeProps, createAnchorId, createShape, withZ } from './defs.ts';
 
 //
 // Gate utils.
@@ -35,36 +35,39 @@ const createGate = (props: CreateGateProps): GateShape =>
   });
 
 // TODO(burdon): Create custom icons.
-const defineShape = <S extends GateShape>({
+const defineGate = ({
   type,
   name,
   icon,
   symbol: Symbol,
-  createShape,
+  create,
   inputs,
   outputs = [createAnchorId('output')],
 }: {
   type: GateType;
   symbol: FC<GateSymbolProps>;
-  createShape: ShapeDef<S>['createShape'];
+  create: (props: Pick<GateShape, 'id' | 'center'>) => GateShape;
   inputs: string[];
   outputs?: string[];
-} & Pick<ShapeDef<GateShape>, 'name' | 'icon'>): ShapeDef<GateShape> => ({
-  type,
-  name,
-  icon,
-  // NOTE: Preact interprets captitalized properties as React components.
-  // Be careful not to name component factories with a capital letter.
-  component: () => {
-    return (
-      <div className='flex w-full justify-center items-center'>
-        <Symbol />
-      </div>
-    );
-  },
-  createShape,
-  getAnchors: (shape) => createAnchors({ shape, inputs, outputs }),
-});
+} & Pick<NodeDef, 'name' | 'icon'>): NodeDef =>
+  defineComputeNode<GateShape>({
+    type,
+    name,
+    icon,
+    group: 'Operations',
+    schema: withZ(GateShape),
+    // NOTE: Preact interprets captitalized properties as React components.
+    // Be careful not to name component factories with a capital letter.
+    component: () => {
+      return (
+        <div className='flex w-full justify-center items-center'>
+          <Symbol />
+        </div>
+      );
+    },
+    create,
+    ports: (shape) => createRowPorts({ size: shape.size, inputs, outputs }),
+  });
 
 //
 // Symbols
@@ -97,7 +100,7 @@ const createSymbol =
     return (
       <svg viewBox={`0 0 ${width} ${height}`} className='dx-fill'>
         {/* Input line. */}
-        {getAnchorPoints({ x: 0, y: centerY }, inputs).map(({ x, y }, i) => (
+        {getRowPoints({ x: 0, y: centerY }, inputs).map(({ x, y }, i) => (
           <line key={i} x1={x} y1={y} x2={startX * 1.3} y2={y} strokeWidth={strokeWidth} className={className} />
         ))}
 
@@ -135,12 +138,12 @@ export type AndShape = GateShape;
 export const createAnd = (props: Omit<CreateGateProps, 'type' | 'node'>) => {
   return createGate({ ...props, type: 'and' });
 };
-export const andShape = defineShape({
+export const andNodeDef = defineGate({
   type: 'and',
   name: 'AND',
   icon: 'ph--intersection--regular',
   symbol: AndSymbol,
-  createShape: createAnd,
+  create: createAnd,
   inputs: ['input.a', 'input.b'],
 });
 
@@ -169,12 +172,12 @@ export type OrShape = GateShape;
 export const createOr = (props: Omit<CreateGateProps, 'type' | 'node'>) => {
   return createGate({ ...props, type: 'or' });
 };
-export const orShape = defineShape({
+export const orNodeDef = defineGate({
   type: 'or',
   name: 'OR',
   icon: 'ph--union--regular',
   symbol: OrSymbol,
-  createShape: createOr,
+  create: createOr,
   inputs: ['input.a', 'input.b'],
 });
 
@@ -205,11 +208,11 @@ export type NotShape = GateShape;
 export const createNot = (props: Omit<CreateGateProps, 'type' | 'node'>) => {
   return createGate({ ...props, type: 'not' });
 };
-export const notShape = defineShape({
+export const notNodeDef = defineGate({
   type: 'not',
   name: 'NOT',
   icon: 'ph--x--regular',
   symbol: NotSymbol,
-  createShape: createNot,
+  create: createNot,
   inputs: [createAnchorId('input')],
 });

package/src/shapes/Chat.tsx

@@ -5,24 +5,19 @@
 import React, { useRef } from 'react';
 
 import { DEFAULT_OUTPUT } from '@dxos/conductor';
-import {
-  type ShapeComponentProps,
-  TextBox,
-  type TextBoxControl,
-  type TextBoxProps,
-} from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks/index.ts';
 import { type ChatShape } from './chat-def.tsx';
-import { Box } from './common/index.ts';
+import { Box, type ComputeNodeViewProps, TextBox, type TextBoxControl, type TextBoxProps } from './common/index.ts';
 
 //
 // Component
 //
 
-export type TextInputComponentProps = ShapeComponentProps<ChatShape> & TextBoxProps & { title?: string };
+export type TextInputComponentProps = ComputeNodeViewProps<ChatShape> &
+  Pick<TextBoxProps, 'placeholder'> & { title?: string };
 
-export const TextInputComponent = ({ shape, title, ...props }: TextInputComponentProps) => {
+export const TextInputComponent = ({ node: shape, title, placeholder }: TextInputComponentProps) => {
   const { runtime } = useComputeNodeState(shape);
   const inputRef = useRef<TextBoxControl>(null);
 
@@ -36,7 +31,7 @@ export const TextInputComponent = ({ shape, title, ...props }: TextInputComponen
 
   return (
     <Box shape={shape} title={title}>
-      <TextBox ref={inputRef} onEnter={handleEnter} {...props} />
+      <TextBox ref={inputRef} onEnter={handleEnter} placeholder={placeholder} />
     </Box>
   );
 };

package/src/shapes/Constant.tsx

@@ -5,26 +5,27 @@
 import React, { useCallback, useRef, useState } from 'react';
 
 import { ComputeValueType } from '@dxos/conductor';
-import {
-  type ShapeComponentProps,
-  TextBox,
-  type TextBoxControl,
-  type TextBoxProps,
-} from '@dxos/react-ui-canvas-editor';
 import * as Field from '@dxos/react-ui/Field';
 import * as Input from '@dxos/react-ui/Input';
 import { safeParseJson } from '@dxos/util';
 
 import { useComputeNodeState } from '../hooks/index.ts';
-import { Box, TypeSelect } from './common/index.ts';
+import {
+  Box,
+  type ComputeNodeViewProps,
+  TextBox,
+  type TextBoxControl,
+  type TextBoxProps,
+  TypeSelect,
+} from './common/index.ts';
 import { type ConstantShape } from './constant-def.tsx';
 
 //
 // Component
 //
 
-export type ConstantComponentProps = ShapeComponentProps<ConstantShape> &
-  TextBoxProps & { title?: string; chat?: boolean };
+export type ConstantComponentProps = ComputeNodeViewProps<ConstantShape> &
+  Pick<TextBoxProps, 'placeholder'> & { title?: string };
 
 const inferType = (value: any): ComputeValueType | undefined => {
   if (typeof value === 'string') {
@@ -38,7 +39,7 @@ const inferType = (value: any): ComputeValueType | undefined => {
   }
 };
 
-export const ConstantComponent = ({ shape, title, chat, ...props }: ConstantComponentProps) => {
+export const ConstantComponent = ({ node: shape, title, placeholder }: ConstantComponentProps) => {
   const { node } = useComputeNodeState(shape);
   const [type, setType] = useState(inferType(node.value) ?? ComputeValueType.literals[0]);
   const inputRef = useRef<TextBoxControl>(null);
@@ -68,10 +69,16 @@ export const ConstantComponent = ({ shape, title, chat, ...props }: ConstantComp
   return (
     <Box shape={shape} title={title} status={<TypeSelect value={type} onValueChange={setType} />}>
       {(type === 'string' || type === 'number') && (
-        <TextBox {...props} ref={inputRef} value={node.value} onEnter={handleEnter} />
+        <TextBox placeholder={placeholder} ref={inputRef} value={node.value} onEnter={handleEnter} />
       )}
       {type === 'object' && (
-        <TextBox {...props} ref={inputRef} value={JSON.stringify(node.value, null, 2)} language={'json'} />
+        <TextBox
+          placeholder={placeholder}
+          ref={inputRef}
+          value={JSON.stringify(node.value, null, 2)}
+          language={'json'}
+          onEnter={handleEnter}
+        />
       )}
       {type === 'boolean' && (
         <div className='flex grow justify-center items-center'>

package/src/shapes/Database.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 DatabaseShape } from './database-def.ts';
 
-export const DatabaseComponent = ({ shape }: ShapeComponentProps<DatabaseShape>) => {
+export const DatabaseComponent = ({ node: shape }: ComputeNodeViewProps<DatabaseShape>) => {
   return <Box shape={shape} />;
 };

package/src/shapes/Feed.tsx

@@ -5,16 +5,15 @@
 import React, { Fragment } from 'react';
 
 import { DEFAULT_OUTPUT } from '@dxos/conductor';
-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 { useComputeNodeState } from '../hooks/index.ts';
-import { Box } from './common/index.ts';
+import { Box, type ComputeNodeViewProps } from './common/index.ts';
 import { type FeedShape } from './feed-def.ts';
 
-export const FeedComponent = ({ shape }: ShapeComponentProps<FeedShape>) => {
+export const FeedComponent = ({ node: shape }: ComputeNodeViewProps<FeedShape>) => {
   const { runtime } = useComputeNodeState(shape);
   const items = runtime.outputs[DEFAULT_OUTPUT]?.type === 'executed' ? runtime.outputs[DEFAULT_OUTPUT].value : [];
 

package/src/shapes/Function.tsx

@@ -9,24 +9,18 @@ import * as Script from '@dxos/compute/Script';
 import { Filter, Obj, Ref } from '@dxos/echo';
 import { parseId } from '@dxos/keys';
 import { useClient } from '@dxos/react-client';
-import {
-  type ShapeComponentProps,
-  TextBox,
-  type TextBoxControl,
-  type TextBoxProps,
-} from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks/index.ts';
-import { Box } from './common/index.ts';
+import { Box, type ComputeNodeViewProps, TextBox, type TextBoxControl, type TextBoxProps } from './common/index.ts';
 import { type FunctionShape } from './function-def.ts';
 
 //
 // Component
 //
 
-type FunctionShapeComponentProps = ShapeComponentProps<FunctionShape> & TextBoxProps & { title?: string };
+type FunctionShapeComponentProps = ComputeNodeViewProps<FunctionShape> & Pick<TextBoxProps, 'placeholder'>;
 
-export const FunctionShapeComponent = ({ shape, title, ...props }: FunctionShapeComponentProps) => {
+export const FunctionShapeComponent = ({ node: shape, placeholder }: FunctionShapeComponentProps) => {
   const client = useClient();
   const { node, runtime } = useComputeNodeState(shape);
   const inputRef = useRef<TextBoxControl>(null);
@@ -72,7 +66,7 @@ export const FunctionShapeComponent = ({ shape, title, ...props }: FunctionShape
   return (
     <Box shape={shape} title='Function' onAction={handleAction}>
       <TextBox
-        {...props}
+        placeholder={placeholder}
         ref={inputRef}
         value={node.value}
         language={node.valueType === 'object' ? 'json' : undefined}

package/src/shapes/Gpt.tsx

@@ -4,14 +4,13 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 import * as ScrollArea from '@dxos/react-ui/ScrollArea';
 
 import { useComputeNodeState } from '../hooks/index.ts';
-import { FunctionBody } from './common/index.ts';
+import { type ComputeNodeViewProps, FunctionBody } from './common/index.ts';
 import { type GptShape } from './gpt-def.ts';
 
-export const GptComponent = ({ shape }: ShapeComponentProps<GptShape>) => {
+export const GptComponent = ({ node: shape }: ComputeNodeViewProps<GptShape>) => {
   const { meta, runtime } = useComputeNodeState(shape);
   const [text, setText] = useState('');
   const [tokens, setTokens] = useState(0);

package/src/shapes/GptRealtime.tsx

@@ -6,12 +6,12 @@ import React, { useState } from 'react';
 
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 import * as Icon from '@dxos/react-ui/Icon';
 
+import { type ComputeNodeViewProps } from './common/index.ts';
 import { type GptRealtimeShape } from './gpt-realtime-def.ts';
 
-export const GptRealtimeComponent = ({ shape }: ShapeComponentProps<GptRealtimeShape>) => {
+export const GptRealtimeComponent = ({ node: shape }: ComputeNodeViewProps<GptRealtimeShape>) => {
   const [isLive, setIsLive] = useState(false);
   const [isReady, setIsReady] = useState(false);
   const config = useConfig();

package/src/shapes/Json.tsx

@@ -5,20 +5,19 @@
 import React from 'react';
 
 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/index.ts';
-import { Box } from './common/index.ts';
+import { Box, type ComputeNodeViewProps } from './common/index.ts';
 import { type JsonShape, type JsonTransformShape } from './json-def.ts';
 
 //
 // Component
 //
 
-export type JsonComponentProps = ShapeComponentProps<JsonShape>;
+export type JsonComponentProps = ComputeNodeViewProps<JsonShape>;
 
-export const JsonComponent = ({ shape, ...props }: JsonComponentProps) => {
+export const JsonComponent = ({ node: shape }: JsonComponentProps) => {
   const { runtime } = useComputeNodeState(shape);
   const input = runtime.inputs[DEFAULT_INPUT];
   const value = input?.type === 'executed' ? input.value : undefined;
@@ -37,8 +36,8 @@ export const JsonComponent = ({ shape, ...props }: JsonComponentProps) => {
   );
 };
 
-export type JsonTransformComponentProps = ShapeComponentProps<JsonTransformShape>;
+export type JsonTransformComponentProps = ComputeNodeViewProps<JsonTransformShape>;
 
-export const JsonTransformComponent = ({ shape, ...props }: JsonTransformComponentProps) => {
+export const JsonTransformComponent = ({ node: shape }: JsonTransformComponentProps) => {
   return <Box shape={shape} />;
 };

package/src/shapes/Logic.tsx

@@ -5,23 +5,22 @@
 import React from 'react';
 
 import { IfElseInput, IfElseOutput, IfInput, IfOutput } from '@dxos/conductor';
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 
-import { FunctionBody } from './common/index.ts';
+import { type ComputeNodeViewProps, FunctionBody } from './common/index.ts';
 import { type IfElseShape, type IfShape } from './logic-def.ts';
 
 //
 // Components
 //
 
-export type IfComponentProps = ShapeComponentProps<IfShape>;
+export type IfComponentProps = ComputeNodeViewProps<IfShape>;
 
-export const IfComponent = ({ shape, ...props }: IfComponentProps) => {
+export const IfComponent = ({ node: shape }: IfComponentProps) => {
   return <FunctionBody shape={shape} inputSchema={IfInput} outputSchema={IfOutput} />;
 };
 
-export type IfElseComponentProps = ShapeComponentProps<IfElseShape>;
+export type IfElseComponentProps = ComputeNodeViewProps<IfElseShape>;
 
-export const IfElseComponent = ({ shape, ...props }: IfElseComponentProps) => {
+export const IfElseComponent = ({ node: shape }: IfElseComponentProps) => {
   return <FunctionBody shape={shape} inputSchema={IfElseInput} outputSchema={IfElseOutput} />;
 };

package/src/shapes/RNG.tsx

@@ -5,10 +5,10 @@
 import React, { useEffect, useState } from 'react';
 
 import { DEFAULT_OUTPUT } from '@dxos/conductor';
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 import * as Icon from '@dxos/react-ui/Icon';
 
 import { useComputeNodeState } from '../hooks/index.ts';
+import { type ComputeNodeViewProps } from './common/index.ts';
 import { type RandomShape } from './rng-def.ts';
 
 const icons = [
@@ -23,7 +23,7 @@ const icons = [
 const pickIcon = () => icons[Math.floor(Math.random() * icons.length)];
 
 // TODO(burdon): Optional range.
-export const RandomComponent = ({ shape }: ShapeComponentProps<RandomShape>) => {
+export const RandomComponent = ({ node: shape }: ComputeNodeViewProps<RandomShape>) => {
   const { runtime } = useComputeNodeState(shape);
 
   const [spin, setSpin] = useState(false);

package/src/shapes/Scope.tsx

@@ -6,13 +6,13 @@ import React from 'react';
 
 import { DEFAULT_INPUT } from '@dxos/conductor';
 import { useAudioStream } from '@dxos/react-ui-audio';
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 import { Chaos, shaderPresets } from '@dxos/react-ui-experimental';
 
 import { useComputeNodeState } from '../hooks/index.ts';
+import { type ComputeNodeViewProps } from './common/index.ts';
 import { type ScopeShape } from './scope-def.ts';
 
-export const ScopeComponent = ({ shape }: ShapeComponentProps<ScopeShape>) => {
+export const ScopeComponent = ({ node: shape }: ComputeNodeViewProps<ScopeShape>) => {
   const { runtime } = useComputeNodeState(shape);
   const input = runtime.inputs[DEFAULT_INPUT];
   const active = input?.type === 'executed' ? input.value : false;

package/src/shapes/Surface.tsx

@@ -7,14 +7,13 @@ import React from 'react';
 import * as Surface from '@dxos/app-framework/Surface';
 import * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import { DEFAULT_INPUT } from '@dxos/conductor';
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 import * as Card from '@dxos/react-ui/Card';
 
 import { useComputeNodeState } from '../hooks/index.ts';
-import { Box } from './common/index.ts';
+import { Box, type ComputeNodeViewProps } from './common/index.ts';
 import { type SurfaceShape } from './surface-def.ts';
 
-export const SurfaceComponent = ({ shape }: ShapeComponentProps<SurfaceShape>) => {
+export const SurfaceComponent = ({ node: shape }: ComputeNodeViewProps<SurfaceShape>) => {
   const { runtime } = useComputeNodeState(shape);
   const input = runtime.inputs[DEFAULT_INPUT];
   const value = input?.type === 'executed' ? input.value : null;
@@ -22,9 +21,13 @@ export const SurfaceComponent = ({ shape }: ShapeComponentProps<SurfaceShape>) =
   // TODO(burdon): Subject property?
   return (
     <Box shape={shape}>
-      <Card.Root grid>
-        {value !== null && <Surface.Surface type={AppSurface.CardContent} data={{ subject: value }} limit={1} />}
-      </Card.Root>
+      {/* No card until the input has a value: an empty one is a bare frame with nothing in it. */}
+      {value !== null && (
+        // The shape's frame already frames it, so the card fills the body without a border of its own.
+        <Card.Root grid border={false} classNames='dx-grow'>
+          <Surface.Surface type={AppSurface.CardContent} data={{ subject: value }} limit={1} />
+        </Card.Root>
+      )}
     </Box>
   );
 };

package/src/shapes/Switch.tsx

@@ -5,15 +5,15 @@
 import React, { useEffect, useState } from 'react';
 
 import { DEFAULT_OUTPUT } from '@dxos/conductor';
-import { type ShapeComponentProps } from '@dxos/react-ui-canvas-editor';
 import * as Field from '@dxos/react-ui/Field';
 import * as Input from '@dxos/react-ui/Input';
 
 import { useComputeNodeState } from '../hooks/index.ts';
+import { type ComputeNodeViewProps } from './common/index.ts';
 import { type SwitchShape } from './switch-def.ts';
 
 // TODO(burdon): Should model as a constant.
-export const SwitchComponent = ({ shape }: ShapeComponentProps<SwitchShape>) => {
+export const SwitchComponent = ({ node: shape }: ComputeNodeViewProps<SwitchShape>) => {
   const { runtime } = useComputeNodeState(shape);
   const [value, setValue] = useState(false);
   useEffect(() => {
@@ -21,16 +21,14 @@ export const SwitchComponent = ({ shape }: ShapeComponentProps<SwitchShape>) =>
   }, [value]);
 
   return (
-    // The node frame would otherwise take the press as select-and-drag and capture the pointer, so the
-    // switch never sees the click.
-    <div
-      className='flex w-full justify-center items-center'
-      onPointerDown={(ev) => ev.stopPropagation()}
-      onClick={(ev) => ev.stopPropagation()}
-    >
-      <Field.Root>
-        <Input.Switch checked={value} onCheckedChange={({ checked: value }) => setValue(value)} />
-      </Field.Root>
+    <div className='flex w-full justify-center items-center'>
+      {/* Only the switch keeps the press from the node frame (which would take it as select-and-drag and capture
+          the pointer, so the switch never saw the click); the rest of the shape drags as any node does. */}
+      <div className='inline-flex' onPointerDown={(ev) => ev.stopPropagation()} onClick={(ev) => ev.stopPropagation()}>
+        <Field.Root>
+          <Input.Switch checked={value} onCheckedChange={({ checked: value }) => setValue(value)} />
+        </Field.Root>
+      </div>
     </div>
   );
 };