diff --git a/src/App.tsx b/src/App.tsx
index 1c8859e..031f3b6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,11 +3,11 @@ import { useEffect, useState } from 'react';
 import './App.css'
 import { Editor, initialEditorState, type EditorState } from './Editor'
 
-
 export function App() {
   const [state, setState] = useState<EditorState>(initialEditorState);
 
   useEffect(() => {
+    window['APP_STATE'] = state;
     // console.log("EDITOR STATE:", state);
   }, [state]);
 
@@ -18,7 +18,12 @@ export function App() {
       </header>
 
       <main>
-        <Editor state={state} setState={setState}></Editor>
+        <Editor
+          state={state}
+          setState={setState}
+          onResolve={() => {console.log("toplevel resolved")}}
+          onCancel={() => {console.log("toplevel canceled")}}
+        />
       </main>
 
       <footer>
diff --git a/src/CallBlock.css b/src/CallBlock.css
index 961beb2..1611057 100644
--- a/src/CallBlock.css
+++ b/src/CallBlock.css
@@ -5,7 +5,7 @@
 }
 
 .functionName {
-  text-align: center;
+  /* text-align: center; */
 
 }
 
@@ -16,43 +16,23 @@
   border: solid 10px transparent;
   border-left-color: rgba(242, 253, 146);
   margin-left: 0px;
+  /* z-index: 1; */
 }
 
 .inputParam {
-  height: 20px;
+  /* height: 20px; */
   margin-right: 20px;
-  /* vertical-align: ; */
-  /* margin-left: 0; */
   display: inline-block;
-  /* border: solid 1px black; */
   background-color: rgba(242, 253, 146);
-  /* border-radius: 10px; */
 }
 
-
-
 .typeAnnot {
   display: inline-block;
   vertical-align: top;
 }
 
-
-
-
-/* .outputParam:before {
-  content: "";
-  position: absolute;
-  width: 0px;
-  height: 0px;
-  margin-left: -28px;
-  margin-top: 0px;
-  border-style: solid;
-  border-color: orange;
-  border-width: 14px;
-  border-left-color: transparent;
-} */
-
 .outputParam {
+  text-align: left;
   vertical-align: top;
   /* margin-left: 28px; */
   padding: 0px;
diff --git a/src/CallBlock.tsx b/src/CallBlock.tsx
index f0b955e..bd164f6 100644
--- a/src/CallBlock.tsx
+++ b/src/CallBlock.tsx
@@ -1,75 +1,104 @@
+import { apply, getType, getInst } from "dope2";
 import type { Dynamic, State2Props } from "./util/extra";
 import { Editor, type EditorState } from "./Editor";
 
 import "./CallBlock.css";
+import { useEffect } from "react";
+import { Type } from "./Type";
+import { Value } from "./Value";
+import { focusPrevElement } from "./util/dom_trickery";
 
 export interface CallBlockState {
   kind: "call";
   env: any;
   fn: EditorState;
   input: EditorState;
+  resolved: undefined | Dynamic;
+  rollback: EditorState;
 }
 
 interface CallBlockProps extends State2Props<CallBlockState> {
-  onResolve: (d: Dynamic) => void;
+  onResolve: (resolved: EditorState) => void;
 }
 
-export function CallBlock({ state: {kind, env, fn, input}, setState, onResolve }: CallBlockProps) {
+export function CallBlock({ state: {kind, env, fn, input, resolved, rollback }, setState, onResolve }: CallBlockProps) {
+  const setResolved = (resolved?: Dynamic) => {
+    setState({kind, env, fn, input, resolved, rollback});
+  }
+
+  const makeTheCall = (input, fn) => {
+    console.log('makeTheCall...')
+    try {
+      const outputResolved = apply(input.resolved)(fn.resolved);
+      setResolved(outputResolved);
+      console.log("onResolve callblock..")
+      onResolve({
+        kind, env, fn, input, resolved: outputResolved, rollback
+      });
+    }
+    catch (e) {
+      console.log('makeTheCall:', e);
+    }
+  }
+
   const setFn = (fn: EditorState) => {
-    setState({kind, env, fn, input});
+    setState({kind, env, fn, input, resolved, rollback});
   }
   const setInput = (input: EditorState) => {
-    setState({kind, env, fn, input});
+    setState({kind, env, fn, input, resolved, rollback});
   }
+  const onFnResolve = (fnState) => {
+    console.log('my fn resolved')
+    if (input.resolved) {
+      makeTheCall(input, fnState);
+    }
+    else {
+      // setFn(fnState);
+      setResolved(undefined);
+      onResolve({
+        kind, env, fn: fnState, input, resolved: undefined, rollback
+      });
+    }
+  }
+  const onInputResolve = (inputState) => {
+    console.log('my input resolved')
+    if (fn.resolved) {
+      makeTheCall(inputState, fn);
+    }
+    else {
+      // setInput(inputState);
+      setResolved(undefined);
+      onResolve({
+        kind, env, fn, input: inputState, resolved: undefined, rollback
+      });
+    }
+  }
+  const onFnCancel = () => {
+
+  }
+  const onInputCancel = () => {
+    // we become what we were before we became a CallBlock
+    if (rollback) {
+      setState(rollback);
+      focusPrevElement();
+    }
+  }
+
   return <span className="functionBlock">
     <div className="functionName">
     &#119891;&#119899;&nbsp;
-      <Editor state={fn} setState={setFn}/>
+      <Editor state={fn} setState={setFn}
+        onResolve={onFnResolve} onCancel={onFnCancel}/>
     </div>
     <div className="functionParams">
       <div className="outputParam">
       <div className="inputParam">
-        <Editor state={input} setState={setInput} />
+        <Editor state={input} setState={setInput} onResolve={onInputResolve} onCancel={onInputCancel} />
       </div>
-      result
+      { resolved
+        ? <Value dynamic={resolved} />
+        : <></> }
       </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>;
-// }
\ No newline at end of file
diff --git a/src/Editor.css b/src/Editor.css
new file mode 100644
index 0000000..1e324d9
--- /dev/null
+++ b/src/Editor.css
@@ -0,0 +1,8 @@
+.typeSignature {
+  display: inline-block;
+  /* vertical-align:; */
+}
+
+.command {
+  width: 136px;
+}
\ No newline at end of file
diff --git a/src/Editor.tsx b/src/Editor.tsx
index 8a2f873..4b4acb3 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -3,6 +3,11 @@ import { getSymbol, getType, module2Env, ModuleStd, symbolFunction } from "dope2
 import { InputBlock, type InputBlockState } from "./InputBlock";
 import { type Dynamic, type State2Props } from "./util/extra";
 import { CallBlock, type CallBlockState } from "./CallBlock";
+import { useEffect, useState } from "react";
+import { Type } from "./Type";
+
+import "./Editor.css"
+import { focusNextElement, focusPrevElement } from "./util/dom_trickery";
 
 interface LetInBlockState {
   kind: "let";
@@ -10,12 +15,17 @@ interface LetInBlockState {
   name: string;
   value: EditorState;
   inner: EditorState;
+  resolved: undefined | Dynamic;
+  rollback?: EditorState;
 }
 
 interface LambdaBlockState {
   kind: "lambda";
+  env: any;
   paramName: string;
   expr: EditorState;
+  resolved: undefined | Dynamic;
+  rollback?: EditorState;
 }
 
 export type EditorState =
@@ -29,72 +39,107 @@ export const initialEditorState: EditorState = {
   env: module2Env(ModuleStd),
   text: "",
   resolved: undefined,
+  rollback: undefined,
 };
 
-type EditorProps = State2Props<EditorState>;
+interface EditorProps extends State2Props<EditorState> {
+  onResolve: (state: EditorState) => void;
+  onCancel: () => void;
+}
 
 const dontFilter = () => true;
 
-export function Editor({state, setState}: EditorProps) {
-  let onResolve;
-  switch (state.kind) {
-    case "input":
-      onResolve = (resolved: InputBlockState) => {
-        console.log('resolved!', state, resolved);
-        if (resolved) {
-          const type = getType(resolved.resolved);
-          if (getSymbol(type) === symbolFunction) {
-            console.log('function!');
-            // we were InputBlock
-            // now we become FunctionBlock
-            setState({
-              kind: "call",
-              env: state.env,
-              fn: resolved,
-              input: initialEditorState,
-            })
-          }
-        }
-        // const type = getType(state.resolved);
-        // if (getSymbol(type) === symbolFunction) {
-        //   console.log('function!');
-        //   console.log('editor state:', state);
-        // }
-      }
-      return <InputBlock state={state} setState={setState} filter={dontFilter} onResolve={onResolve} />;
-    case "call":
-      onResolve = (d: Dynamic) => {}
-      return <CallBlock state={state} setState={setState} onResolve={onResolve} />;
-    case "let":
-      return <></>;
-    case "lambda":
-      return <></>;
+function getCommands(type) {
+  const commands = ['u', 't', 'Enter', 'Backspace', 'ArrowLeft', 'Tab'];
+  if (getSymbol(type) === symbolFunction) {
+    commands.push('c');
   }
+  return commands;
 }
 
-// function DynamicBlock({env, name, dynamic}) {
-//   const type = getType(dynamic);
-//   if (getSymbol(type) === symbolFunction) {
-//     return <FunctionBlock env={env} name={name} funDynamic={dynamic} />;
-//   }
-//   else return <>{getInst(dynamic).toString()} :: <Type type={type}/></>;
-// }
-
-// function InputBlock({env, done, type}) {
-//   const filterInputType = ([_, dynamic]) => {
-//     try {
-//       unify(type, getType(dynamic));
-//       return true;
-//     } catch (e) {
-//       if (!(e instanceof UnifyError)) {
-//         console.error(e);
-//       }
-//       return false;
-//     }
-//   }
-//   return <>
-//     <span className="typeAnnot"><InputBlock env={env} done={done} filter={filterInputType} /></span>
-//     <span className="typeAnnot">:: <Type type={type}/></span>
-//   </>;
-// }
+export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
+  const [needCommand, setNeedCommand] = useState(false);
+  const onMyResolve = (editorState: EditorState) => {
+    setState(editorState);
+    if (editorState.resolved) {
+      setNeedCommand(true);
+    }
+    else {
+      // unresolved
+      setNeedCommand(false);
+      onResolve(editorState); // pass up the fact that we're unresolved
+    }
+  }
+  // const onMyCancel
+  const onCommand = (e: React.KeyboardEvent) => {
+    const type = getType(state.resolved);
+    const commands = getCommands(type);
+    if (!commands.includes(e.key)) {
+      return;
+    }
+    e.preventDefault();
+    setNeedCommand(false);
+    // u -> pass Up
+    if (e.key === "u" || e.key === "Enter" || e.key === "Tab") {
+      onResolve(state);
+      return;
+    }
+    // c -> Call
+    if (e.key === "c") {
+      // we become CallBlock
+      setState({
+        kind: "call",
+        env: state.env,
+        fn: state,
+        input: initialEditorState,
+        resolved: undefined,
+        rollback: state,
+      });
+      return;
+    }
+    // t -> Transform
+    if (e.key === "t") {
+      // we become CallBlock
+      setState({
+        kind: "call",
+        env: state.env,
+        fn: initialEditorState,
+        input: state,
+        resolved: undefined,
+        rollback: state,
+      });
+      return;
+    }
+    if (e.key === "Backspace" || e.key === "ArrowLeft") {
+      focusPrevElement();
+      return;
+    }
+  };
 
+  const renderBlock = () => {
+    switch (state.kind) {
+      case "input":
+        return <InputBlock state={state} setState={setState} filter={dontFilter} onResolve={onMyResolve} onCancel={onCancel} />;
+      case "call":
+        return <CallBlock state={state} setState={setState} onResolve={onMyResolve} />;
+      case "let":
+        return <></>;
+      case "lambda":
+        return <></>;
+    }  
+  }
+  return <>
+    {renderBlock()}
+    {
+      (state.resolved)
+      ? <div className="typeSignature">
+          :: <Type type={getType(state.resolved)} />
+          { (needCommand)
+            ? <input autoFocus={true} className="editable command" placeholder="<enter command>" onKeyDown={onCommand} value=""/>
+            : <></>
+          }
+        </div>
+      : <></>
+    }
+  </>;
+}
diff --git a/src/InputBlock.css b/src/InputBlock.css
index db54782..7115fd4 100644
--- a/src/InputBlock.css
+++ b/src/InputBlock.css
@@ -1,14 +1,32 @@
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap');
+
 .suggest {
+  margin-left: -3.5px;
+  margin-right: 5px;
   color: #aaa;
+  min-width: 30px;
+
+  font-size: 13pt;
+  font-family: "Inconsolata", monospace;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+  font-variation-settings: "wdth" 100;
+
 }
-.suggestions { 
+.suggestions {
+  display: none;
+}
+.suggestions {
+  display: block;
+  text-align: left;
   position: absolute;
-  /* display: inline-block; */
-  /* top: 20px; */
-  border: solid 1px lightgrey;
+  border: solid 1px dodgerblue;
   cursor: pointer;
   max-height: calc(100vh - 44px);
   overflow: scroll;
+  z-index: 10;
+  background-color: white;
 }
 .selected {
   background-color: dodgerblue;
@@ -17,6 +35,23 @@
 .editable {
   outline: 0px solid transparent;
   display: inline-block;
+  border: 0;
+  /* box-sizing: border-box; */
+  /* width: ; */
+  /* border: 1px black solid; */
+  /* border-style: dashed none dashed; */
+
+  margin-left: 4px;
+  margin-right: 0;
+
+  font-size: 13pt;
+  font-family: "Inconsolata", monospace;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+  font-variation-settings: "wdth" 100;
+
+  background-color: transparent;
 }
 .border-around-input {
   border: 1px solid black;
diff --git a/src/InputBlock.tsx b/src/InputBlock.tsx
index 87b0940..8b9835f 100644
--- a/src/InputBlock.tsx
+++ b/src/InputBlock.tsx
@@ -7,36 +7,37 @@ import { Type } from "./Type";
 
 import "./InputBlock.css";
 import type { Dynamic, State2Props } from "./util/extra";
+import type { EditorState } from "./Editor";
+import { ShowIf } from "./ShowIf";
 
 export interface InputBlockState {
   kind: "input";
   env: any;
   text: string;
   resolved: undefined | Dynamic;
+  rollback?: EditorState;
 }
 
 interface InputBlockProps extends State2Props<InputBlockState> {
   filter: (ls: any[]) => boolean;
   onResolve: (state: InputBlockState) => void;
+  onCancel: () => void;
 }
 
-export function InputBlock({ state: {kind, env, text, resolved}, setState, filter, onResolve }: InputBlockProps) {
+export function InputBlock({ state: {kind, env, text, resolved, rollback}, setState, filter, onResolve, onCancel }: InputBlockProps) {
   const ref = useRef<any>(null);
   useEffect(() => {
     ref.current?.focus();
-    if (ref.current) {
-      ref.current.textContent = text;
-    }
   }, []);
 
   const [i, setI] = useState(0); // selected suggestion
   const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
 
   const setText = (text: string) => {
-    setState({kind, env, text, resolved});
+    setState({kind, env, text, resolved, rollback});
   }
   const setResolved = (resolved: Dynamic) => {
-    setState({kind, env, text, resolved});
+    setState({kind, env, text, resolved, rollback});
   }
 
   const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
@@ -53,28 +54,45 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
 
   useEffect(() => {
     setI(0); // reset
-    const found = trie.get(env.name2dyn)(text);
-    setResolved(found); // may be undefined
+    if (ref.current) {
+      ref.current.style.width = `${text.length === 0 ? 140 : (text.length*8.7)}px`;
+    }
   }, [text]);
-  
 
-  const onSelectSuggestion = ([name, _dynamic]) => {
+  const onSelectSuggestion = ([name, dynamic]) => {
+    console.log(name);
     // setText(name);
     // ref.current.textContent = name;
     // setRightMostCaretPosition(ref.current);
     // setI(0);
+    // setResolved(dynamic);
+    console.log("onResolve inputblock..")
     onResolve({
-      env,
       kind: "input",
-      resolved: _dynamic,
+      env,
       text: name,
+      resolved: dynamic,
+      rollback,
     });
   };
 
   const onInput = e => {
-    setText(e.target.textContent);
+    setText(e.target.value);
+    if (resolved) {
+      onResolve({
+        kind: "input",
+        env,
+        text: e.target.value,
+        resolved: undefined,
+        rollback,
+      });
+    }
   };
 
+  const getCaretPosition = () => {
+    return ref.current.selectionStart;
+  }
+
   const onKeyDown = (e: React.KeyboardEvent) => {
     const fns = {
       Tab: () => {
@@ -87,10 +105,14 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
           if (singleSuggestion.length > 0) {
             const newText = text + singleSuggestion;
             setText(newText);
-            ref.current.textContent = newText;
+            // ref.current.textContent = newText;
             setRightMostCaretPosition(ref.current);
             e.preventDefault();  
           }
+          else {
+            onSelectSuggestion(suggestions[i]);
+            e.preventDefault();
+          }
         }
       },
       ArrowDown: () => {
@@ -117,33 +139,50 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
         onSelectSuggestion(suggestions[i]);
         e.preventDefault();
       },
+      Backspace: () => {
+        if (text.length === 0) {
+          onCancel();
+          e.preventDefault();
+        }
+      }
     };
     fns[e.key]?.();
   };
 
   return <span>
-    <span className="border-around-input">
-      <span className="editable" ref={ref} contentEditable="plaintext-only" onInput={onInput} onKeyDown={onKeyDown}
-      onFocus={() => setHaveFocus(true)}
-      onBlur={() => {
-        // hacky, but couldn't find another way:
-        // setTimeout(resetFocus, 0);
-        setHaveFocus(false);
-      } } style={{ height: 19 }}></span>
-      {
-        (haveFocus)
-        ? <Suggestions suggestions={suggestions} onSelect={onSelectSuggestion} i={i} setI={setI} />
-        : <></>
-      }
-    <span className="text-block suggest">{singleSuggestion}</span>
-    </span>
+    <span className="">
+      <input ref={ref} placeholder="start typing..." className="editable" value={text} onInput={onInput} onKeyDown={onKeyDown} onFocus={() => setHaveFocus(true)} onBlur={() => setTimeout(() => setHaveFocus(false), 200)}/>
+      <span className="text-block suggest">{singleSuggestion}</span>
+      </span>
+      <ShowIf cond={haveFocus}>
+        <Suggestions
+          suggestions={suggestions}
+          onSelect={onSelectSuggestion}
+          i={i} setI={setI} />
+      </ShowIf>
   </span>;
 }
 
 function Suggestions({ suggestions, onSelect, i, setI }) {
+  const onMouseEnter = j => () => {
+    setI(j);
+  };
+  const onMouseDown = j => () => {
+    setI(j);
+    onSelect(suggestions[i]);
+  };
+
   return (suggestions.length > 0) ?
-    <div className="suggestions">
-      {suggestions.map(([name, dynamic], j) => <div key={`${j}_${name}`} className={i === j ? "selected" : ""} onClick={() => setI(j)} onDoubleClick={() => onSelect(suggestions[i])}>{name} :: <Type type={getType(dynamic)} /></div>)}
+    <div className={"suggestions"}>
+      {suggestions.map(([name, dynamic], j) =>
+        <div
+          key={`${j}_${name}`}
+          className={i === j ? "selected" : ""}
+          onMouseEnter={onMouseEnter(j)}
+          onMouseDown={onMouseDown(j)}>
+            {name} :: <Type type={getType(dynamic)} />
+        </div>)
+      }
     </div>
     : <></>;
 }
\ No newline at end of file
diff --git a/src/ShowIf.tsx b/src/ShowIf.tsx
new file mode 100644
index 0000000..182f239
--- /dev/null
+++ b/src/ShowIf.tsx
@@ -0,0 +1,9 @@
+// syntactic sugar
+export function ShowIf({cond, children}) {
+  if (cond) {
+    return <>{children}</>;
+  }
+  else {
+    return <></>;
+  }
+}
\ No newline at end of file
diff --git a/src/Type.tsx b/src/Type.tsx
index db77e59..ee0198d 100644
--- a/src/Type.tsx
+++ b/src/Type.tsx
@@ -22,7 +22,7 @@ export function Type({type}) {
     case symbolDictIterator:
       return <BinaryType type={type} cssClass="dictType iteratorType" infix="*&rArr;" prefix="{" suffix="}"/>;
   
-      default:
+    default:
       return <div className="type">{getHumanReadableName(symbol)}</div>
   }
 }
diff --git a/src/Value.css b/src/Value.css
new file mode 100644
index 0000000..6d539a7
--- /dev/null
+++ b/src/Value.css
@@ -0,0 +1,9 @@
+.value {
+  border: 1px solid black;
+  border-radius: 10px;
+  margin-left: 2px;
+  margin-right: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
+  background-color: white;
+}
\ No newline at end of file
diff --git a/src/Value.tsx b/src/Value.tsx
new file mode 100644
index 0000000..a58aab1
--- /dev/null
+++ b/src/Value.tsx
@@ -0,0 +1,60 @@
+import {getType, getInst, getSymbol, Double, Int, symbolFunction, symbolProduct, symbolSum, symbolDict, symbolSet, symbolList, eqType, match, getLeft, getRight} from "dope2";
+
+import "./Value.css";
+
+export function Value({dynamic}) {
+  const type = getType(dynamic);
+  const inst = getInst(dynamic);
+  if (eqType(type)(Double)) {
+    return <ValueDouble val={inst}/>;
+  }
+  if (eqType(type)(Int)) {
+    return <ValueInt val={inst}/>;
+  }
+  const symbol = getSymbol(type);
+  switch (symbol) {
+    case symbolFunction:
+      return <ValueFunction/>;
+    //   return <BinaryType type={type} cssClass="functionType" infix="&rarr;" prefix="" suffix=""/>;
+    // case symbolProduct:
+    //   return <BinaryType type={type} cssClass="productType" infix="&#10799;" prefix="" suffix=""/>;
+    case symbolSum:
+      return <ValueSum val={inst} leftType={type.params[0](type)} rightType={type.params[1](type)}/>;
+      case symbolProduct:
+        return <ValueProduct val={inst} leftType={type.params[0](type)} rightType={type.params[1](type)}/>;
+  
+    // case symbolDict:
+    //   return <BinaryType type={type} cssClass="dictType" infix="&rArr;" prefix="{" suffix="}"/>;
+    // case symbolSet:
+    //   return <UnaryType type={type} cssClass="setType" prefix="{" suffix="}" />;
+    case symbolList:
+      return <List val={inst} elemType={type.params[0](type)} />;
+  
+    default:
+      return <>don't know how to show value</>;
+  }
+}
+
+function ValueDouble({val}) {
+  return <span className="value">{val.toString()}</span>;
+}
+function ValueInt({val}) {
+  return <span className="value">{val.toString()}</span>;
+}
+function ValueFunction() {
+  return <>&#119891;&#119899;&nbsp;</>;
+}
+// function Sum({val, elemType}) {
+//   return 
+// }
+function List({val, elemType}) {
+  return <span className="listType">[{val.map((v, i) => <Value dynamic={{i:v, t:elemType}}/>)}]</span>;
+}
+function ValueSum({val, leftType, rightType}) {
+  return match(val)
+    (l => <>L <Value dynamic={{i:l, t:leftType}}/></>)
+    (r => <>R <Value dynamic={{i:r, t:rightType}}/></>);
+}
+function ValueProduct({val, leftType, rightType}) {
+  return <>(<Value dynamic={{i:getLeft(val), t:leftType}}/>,&nbsp;<Value dynamic={{i:getRight(val), t:rightType}} />)</>;
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 6092539..7529615 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+
 body {
   margin: 0;
+  font-family: "Roboto", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings:
+    "wdth" 100;
+
+}
+
+:focus-within:not(body) {
+  /* outline: 2px solid black; */
+  /* background-color: aqua; */
 }
\ No newline at end of file
diff --git a/src/util/dom_trickery.ts b/src/util/dom_trickery.ts
index c474b7e..2ccc419 100644
--- a/src/util/dom_trickery.ts
+++ b/src/util/dom_trickery.ts
@@ -33,13 +33,13 @@ export function setRightMostCaretPosition(elem) {
 }
 
 export function focusNextElement() {
-  const editable = Array.from<any>(document.querySelectorAll('[contenteditable]'));
+  const editable = Array.from<any>(document.querySelectorAll('input'));
   const index = editable.indexOf(document.activeElement);
   editable[index+1]?.focus();
 }
 
 export function focusPrevElement() {
-  const editable = Array.from<any>(document.querySelectorAll('[contenteditable]'));
+  const editable = Array.from<any>(document.querySelectorAll('input'));
   const index = editable.indexOf(document.activeElement);
   const prevElem = editable[index-1]
   if (prevElem) {
diff --git a/src/util/extra.ts b/src/util/extra.ts
index c8a39a4..f2f0dde 100644
--- a/src/util/extra.ts
+++ b/src/util/extra.ts
@@ -1,3 +1,5 @@
+import type { EditorState } from "../Editor";
+
 export interface Dynamic {
   i: any;
   t: any;
@@ -6,5 +8,6 @@ export interface Dynamic {
 export interface State2Props<T> {
   state: T;
   // setState: (callback: (state: T) => T) => void;
-  setState: (state: T) => void;
+  // setState: (state: T) => void;
+  setState: (state: EditorState) => void;
 }
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 6ae4540..811071c 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -20,8 +20,8 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true