making some good progress

src/CallBlock.tsx

@@ -0,0 +1,75 @@
+import type { Dynamic, State2Props } from "./util/extra";
+import { Editor, type EditorState } from "./Editor";
+
+import "./CallBlock.css";
+
+export interface CallBlockState {
+  kind: "call";
+  env: any;
+  fn: EditorState;
+  input: EditorState;
+}
+
+interface CallBlockProps extends State2Props<CallBlockState> {
+  onResolve: (d: Dynamic) => void;
+}
+
+export function CallBlock({ state: {kind, env, fn, input}, setState, onResolve }: CallBlockProps) {
+  const setFn = (fn: EditorState) => {
+    setState({kind, env, fn, input});
+  }
+  const setInput = (input: EditorState) => {
+    setState({kind, env, fn, input});
+  }
+  return <span className="functionBlock">
+    <div className="functionName">
+    &#119891;&#119899;&nbsp;
+      <Editor state={fn} setState={setFn}/>
+    </div>
+    <div className="functionParams">
+      <div className="outputParam">
+      <div className="inputParam">
+        <Editor state={input} setState={setInput} />
+      </div>
+      result
+      </div>
+    </div>
+  </span>;
+}
+
+// function FunctionBlock({env, done, name, funDynamic}) {
+//   const functionType = getType(funDynamic);
+//   const inType = functionType.params[0](functionType);
+//   const [outDynamic, setOutDynamic] = useState<any>(null);
+//   const [input, setInput] = useState<any>(null);
+//   const gotInput = (name, inDynamic) => {
+//     setInput([name, inDynamic]);
+//     const outDynamic = apply(inDynamic)(funDynamic);
+//     setOutDynamic(outDynamic);
+//     // propagate result up
+//     done(outDynamic);
+//   };
+//   return <span className="functionBlock">
+//     <div className="functionName">
+//     &#119891;&#119899;&nbsp;
+//       {name}
+//       {/* <Type type={functionType}/> */}
+//     </div>
+//     <div className="functionParams">
+//       <div className="outputParam">
+//       <div className="inputParam">
+//         {
+//           (input === null)
+//             ? <InputBlock env={env} done={gotInput} type={inType} />
+//             : <DynamicBlock env={env} name={input[0]} dynamic={input[1]}/>
+//         }
+//       </div>
+//       {
+//           (input === null)
+//             ? <>&nbsp;</>
+//             : <DynamicBlock env={env} name="" dynamic={outDynamic} />
+//         }
+//       </div>
+//     </div>
+//   </span>;
+// }