can disable syntactic sugar also for let...in... blocks + nicer looking fn input parameters

src/App.tsx

@@ -10,8 +10,8 @@ const commands: [string, string[], string][] = [
   ["call"     , ['c'              ], "call"          ],
   ["eval"     , ['e','Tab','Enter'], "eval"          ],
   ["transform", ['t', '.'         ], "transform"     ],
-  ["let"      , ['l', '='         ], "let ... in ..."],
+  ["let"      , ['l', '='         ], "let … in …"    ],
-  ["lambda"   , ['a'              ], "lambda"        ],
+  ["lambda"   , ['a'              ], "λx: …"         ],
 ];
 
 const examples: [string, EditorState][] = [

src/CallBlock.css

@@ -7,10 +7,6 @@
   vertical-align: top;
 }
 
-/* * {
-  vertical-align: text-top;
-} */
-
 .functionName {
   /* text-align: center; */
   background-color: white;
@@ -22,15 +18,16 @@
   right: 0;
   clip-path: polygon(1% 0%, 100% 50%, 0% 100%);
   height: 100%;
-  aspect-ratio: 0.25/1;
+  width: var(--param-arrow-width);
-  transform: translateX(99%);
+  right: calc(var(--param-arrow-width)*(-1) + .2px);
 }
 .inputParam {
-  margin-right: 20px;
   display: inline-flex;
   vertical-align: middle;
   position: relative; /* to ensure the :after (which is absolute) is relative to ourselves */
   flex-grow: 1;
+  --param-arrow-width: 8px;
+  margin-right: calc(var(--param-arrow-width)*2);
 }
 
 /* Count nested level AFTER .outputParam (resets the depth) */

src/LetInBlock.css

@@ -1,11 +1,17 @@
 .letIn {
   display: inline-block;
+  /* border: 1px solid darkgrey; */
+}
+
+.inner {
   border: 1px solid darkgrey;
+  margin-left: 4px
 }
 
 .decl {
   display: grid;
   grid-template-columns: auto auto auto auto;
+  width: fit-content;
 }
 
 .column.rightAlign {

src/LetInBlock.tsx

@@ -3,12 +3,13 @@ import { useContext, useEffect, useRef } from "react";
 
 import { Editor, type EditorState } from "./Editor";
 import { EnvContext } from "./EnvContext";
-import { evalEditorBlock, evalLetInBlock, makeInnerEnv, scoreResolved } from "./eval";
+import { evalEditorBlock, makeInnerEnv, scoreResolved } from "./eval";
 import { type State2Props } from "./Editor";
 import { autoInputWidth } from "./util/dom_trickery";
 
 import "./LetInBlock.css";
 import type { SuggestionType } from "./InputBlock";
+import { CommandContext } from "./CommandContext";
 
 export interface LetInBlockState {
   kind: "let";
@@ -35,13 +36,14 @@ export function LetInBlock({state, setState, suggestionPriority}: LetInBlockProp
         state={state}
         setState={setState}
         suggestionPriority={suggestionPriority}
-        />    
+        />
     </div>
   </span>
 }
 
 function DeclColumns({state, setState, suggestionPriority}) {
   const env = useContext(EnvContext);
+  const globalContext = useContext(CommandContext);
   const {name, value, inner} = state;
 
   const setInner = callback => setState(state => ({...state, inner: callback(state.inner)}));
@@ -86,8 +88,8 @@ function DeclColumns({state, setState, suggestionPriority}) {
           onCancel={() => setState(state => state.inner)} // keep inner
           />
       </span>
-    {/* <span className="keyword column">in</span> */}
     {inner.kind === "let" &&
+     globalContext?.syntacticSugar &&
       <EnvContext value={innerEnv}>
         <DeclColumns
           state={inner}
@@ -101,11 +103,12 @@ function DeclColumns({state, setState, suggestionPriority}) {
 
 function InnerMost({state, setState, suggestionPriority}) {
   const env = useContext(EnvContext);
+  const globalContext = useContext(CommandContext);
   const setInner = callback => setState(state => ({...state, inner: callback(state.inner)}));
   const valueResolved = evalEditorBlock(state.value, env);
   const innerEnv = makeInnerEnv(env, state.name, valueResolved);
   const onCancel = () => setState(state => state.value);
-  if (state.inner.kind === "let") {
+  if (state.inner.kind === "let" && globalContext?.syntacticSugar) {
     return <EnvContext value={innerEnv}>
         <InnerMost
           state={state.inner}